攻城师的交互设计

在计算机和互联网的行当,写代码的一般也称作攻城师(工程师)或者程序员,交互设计则是设计师负责。攻城师谈交互设计,前言不搭后语?俗话说,熟读唐诗三百首,不会作诗也会吟。。。这是开个玩笑,交互设计的创作,最终要经过严谨的工程实践转化为“功能”,那么研究从工程的角度是如何看待各式各样的交互设计是否有现实意义?因此,春哥(本人)结合工作经验总结出了一些交互设计的“原则”,希望对实际项目(移动应用)的交互设计有所帮助!

 

1、,App作为信息孤岛,DeepLink(深度链接)或者Scheme(私有方案)的跳转App已经成为App之间在本地相互支持的重要方式。对于一个具体的URI链接,原则上目标App的响应应该只show一个页面或者只做一个动作比如弹框,后续动作应该由用户根据页面呈现的内容,主动触发下一个操作,理由:

a、多于一个的动作对于用户感受和理解都是不好的,用户看上去感觉自己在傻傻看表演一样,理解起来也并不容易,在陌生的不熟悉应用的情况,一个点击引发了好几个动作,每个动作用户都会不自觉地要去理解,动作连续会对思考造成压力;

b、一个应用不论从静止状态到激活状态(俗称冷启动),还是挂起状态到重启唤醒(俗称恢复前台),状态都是不稳定的。系统在这状态切换的毫秒间有很多逻辑要处理,应用本身也会有逻辑,而且还会随着版本迭代越来越复杂。所以动作越多,就越容易出错,需要更多的精力和代码去应对异常;

/* 以上是基于Scheme方式实现的分享功能,跳转到微信之后,微信只展示分享到朋友圈的二次确认页面 */

 

2、对于入口不固定的通用页面或者当前页面相关度不高的页面,比如登录,设置,隐私,搜索,支付,分享等等,应当坚持使用模态,理由主要考虑到,模态对于当前页面的依赖和干预是最小的,展示模态的方式实现起来简单且稳定,适用于各种各样的场景

/*使用模态方式实现的登录页面,适用于任何需要用户登录的场景*/

 

3、除了游戏,其它iPhone应用均以竖屏为主,当某个交互场景需要切换到横屏时,比如播放器播放,图片预览等,原则上只能是回到上一个场景的时候,允许由横屏再次切换回竖屏,其它新增场景不允许再次切换屏幕方向,只能保持横屏状态完成一切操作,理由:

a、横竖屏切换如果不是用户旋转设备触发,用户适应起来是很别扭的,假如新场景停留时间足够长的话还比较好,否则用户就需要在短时间再忍受一次方向切换,回到原来的场景;

b、应用程序开发上看,横竖屏切换对于过场动画和页面排版的代码逻辑都有较高的要求;

c、系统框架对横竖屏切换是有着难以估计的影响,设备方向感应,系统键盘弹出与收起,系统标准弹框,切换页面,系统升级,甚至是来电显示等都很可能会触发不必要的横竖屏切换操作,这对于页面运行的稳定性不利;

/*腾讯视频全屏播放的时候,分享按钮的排版也是基于横屏,不需要切换方向*/

 

4、弹框,全app的弹框风格当保持一致,如果没有其它理由,首选系统弹框,因为系统弹框有两个重要特性:

a、处理弹框与当前页面无关,不论当前处于哪个页面,都能使弹框出现在屏幕的最Top层,保证交互优先级始终是最高的;

b、连续弹多个框的时候,框能够像栈一样先进后出,按顺序呈现给用户,等待用户处理,不丢任何一个弹框;

c、自定义弹框若不能投入足够精力达到系统弹框的水平就不如使用系统弹框,视觉效果反而是其次,自定义弹框往往还有维护成本;

 

5、引导条,引导条是指放在主页面top或者bottom位置,用来吸引用户进一步操作,涉及不外乎帐号登录、信息完善、安装新应用。引导条应当类似弹框,全app的风格当保持一致,设计不要根据某个case去单独设计,而是设计成标准组件,随用随取,理由就是为了减少重复开发以及降低维护成本。具体设计上,简单处理是浮框式,就是引导条浮在主页面的头部或者脚部,如果考虑到会长时间存在影响用户的浏览内容,也可以考虑嵌入到主页面的头部或者脚部,跟随主页面滚动,只是这种情况要统筹兼顾好主页面的下拉刷新和翻页逻辑;

/* 第一张图片将引导条固定在底部,采用浮框式 */

/* 第二张图片将引导条固定在顶部,采用嵌入式 */

 

6、侧边操作VS全屏操作,随着页面的功能逐渐完善,会不断新增功能和按钮,有些不是很常用功能或者为了不影响干扰用户,往往会把这些功能聚合到二级菜单并且通过展开按钮将其展开:

a、如果展开的菜单在主页面的某个侧边,这种方式称之为侧边操作,侧边操作由于展开空间不大,易于快速操作;

b、二级菜单不是在主页面某个侧边,而是覆盖整个屏幕,这种方式称之为全屏操作,全屏操作一来有利于确保交互的优先级,二来有助于用户注意力集中,不受干扰;

c、选择侧边操作还是选择全屏操作,应该依据操作的复杂度,如果二级菜单需要的是单一维度的多个选项,则建议使用侧边操作,如果涉及多维度的话,则建议使用全屏操作

/* 新浪微博的timeline分组切换,由于只涉及单一维度的不同选择,所以应当如图上显示选择侧边操作 */

/*腾讯视频在全屏播放器上面,由于只涉及多个维度的选项,“收藏” “下载” “音量” “亮度”等等,所以应当如图上显示选择全屏操作 */

 

7、App启动页面形式可复用,几乎每款App都会在启动时设计功能介绍页面,一般都是在App有重要升级时,为了让用户快速了解新特性。由于每次升级的功能都不同,产品需求对于介绍页面的要求可能过于脑洞,或者没能和上次介绍页面联系起来,从而会想到一个不一样的引导方式,这时候,我们仍然要确保介绍页面交互方式上保持一致风格,比如多个页面可以采用横滑到下一页,也可以右下角有一个“下一页”的按钮,最后一页的时候出现进入App或者体验新功能的按钮,也可以是继续滑动结束介绍,介绍的内容完全靠视觉设计来完成,交互逻辑保持稳定不变;

 

8、涉及用户隐私,系统需要用户授权的时候,有几个原则可参考:

a、必须采用二次确认,就是先由app弹框询问用户是否同意,用户同意之后才继续由系统发起第二次的弹框确认。理由是在iOS系统上,由系统发起的确认授权弹框在用户选择同意或者拒绝之后,将会一直保持有效直到App被删除重新安装为止,如果直接由系统弹框,用户可能在还未思考清楚的情况,因保守的心理或者匆忙直接拒绝,从而导致获取授权失败,先主动询问用户可以给用户一个心理准备和预期,有助于提高授权成功率;

b、当权限被明确拒绝之后,可能会导致某些功能不可用,可以在适当的时机用适当地方式引导用户重新通过系统设置项重新进行授权

c、如果有多项权限需要用户同时授权的话,也可以通过权限列表,让用户一次性集中管理授权,减少对用户的骚扰,同时也有助于提高授权成功率;

/*自定义一个权限列表,让用户一次性集中管理授权*/

 

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部