之前写过一篇《零基础如何成为交互设计师?聊聊我的学习三步法!》,通过该方法,我们可以对交互设计有个整体的了解,比如,知道了交互设计师的工作流程、需要掌握的技能、交互设计师的日常产出等等。
背景介绍我是从测试被动转交互的(转岗原因不是这次的重点,就不在这里描述了),以前工作的公司是家小公司,没有所谓的交互设计岗位,所有我对交互设计一窍不通,以至于画了一段时间的线框图之后,依然没有找准个人定位,走了不少弯路,浪费了不少时间。
阅读文章 >可是,纸上得来终觉浅,绝知此事要躬行,在我们了解那么多的理论知识,知道了交互设计师需要掌握的众多技能后,又该从哪里开始,该如何快速掌握这些理论,并应用于实际工作之中呢?
还记得上高中那会,有一种英语练习题叫做“各个击破”,比如我在“完形填空”方面比较薄弱,那么就买一本完形填空的练习题,每天晚上睡觉前练习 2~3 篇;又或者我在“阅读理解”方面比较薄弱,那么就买一本阅读理解的练习题,用同样的方式去练习,这种有针对性的练习就叫做“各个击破”,我当时的英语成绩就是通过这种方法提升上来的,练习效果可谓是立竿见影。
既然这种方法效果很好,我们可不可以把它应用在“交互设计技能”的掌握上呢?答案是肯定的。
下面,我就以交互设计原则为例,讲述一下,在了解了这些设计原则之后,怎么做才能更快的掌握这项技能,实现各个击破。
交互设计原则有很多,为了能够更快、更全面的掌握这项技能,我们需要将设计原则进行汇总,整合为“设计原则全家桶”(总结方法我就不在这里赘述了,感兴趣的同学可以查看上文)。
这里我汇总了四个常用的设计原则,古腾堡原则、格式塔原则、尼尔森十大可用性原则、交互设计 5 大原则(这里简单说明一下,本来是交互设计 7 大原则,其中“接近性原则”在格式塔原则中已包含,“防错原则”在尼尔森原则中也已包含,所有我把这两个原则去掉了,一来可以简化原则,二来可以减轻记忆负担)。我们可以通过提取关键词的方式,把这些原则的“主要内容、在设计中的应用”通过“关键词+图片”的形式提炼出来,然后汇总为“设计原则全家桶”。(全家桶相关文章见文末)
“设计原则全家桶”就像是武功秘籍,有了武功秘籍,我们还需要勤加练习才能掌握,可是,该怎么练习呢?如果手上有项目的话,可以通过项目实战进行巩固。如果手上没有项目,我们该怎么进行巩固呢?
我的方法是,找几款常用的产品,然后对这些产品进行分析,分析这些产品,都应用了哪些设计原则,它们是如何应用这些原则的,有没有不符合设计原则的地方,不符合设计原则地方背后的设计目的又是什么?
下面,我以淘宝 APP 为例,来简单说一下该如何强化我们学习到的这些设计原则。
我们先来看下淘宝首页都应用了哪些设计原则?
顶部导航栏只有“订阅、推荐”2 个 tab 页面,底部导航栏有“首页、逛逛、消息、购物车、我的淘宝”5 个版块,这两个导航栏应用到了交互设计 5 原则中的“米勒定律”,也就是 7±2 原则。
签到、会员码、搜索栏等,应用的是“格式塔–主题/背景原则”,即当主题和背景重叠时,人们倾向于把大的元素当做背景,把小的元素当做主题。所以“签到、会员码、搜索栏等”被看做为主题,而后面灰色的部分被当做了背景;同样的,我们再看常用功能栏,后面的白色卡片会被当做背景,而中间的功能图标被当做主题。
再看下面的产品展示区,应用的是“格式塔–闭合性原则”,因为手机屏幕有限,无法展示全部的内容,所以最下面仅展示了部分图片,以提示用户下方还有更多的内容。
继续向上滑动,可以看到这里的图片摆放样式采用了“格式塔-对称性原则”,而且这里对展示样式进行了优化,采用了瀑布流的样式,可以防止视觉疲劳,展示效果更胜一筹。
点击首页上方的搜索框,进入搜索页面,搜索框下方展示了历史搜索数据,且按用户的搜索信息倒序排列,最后搜索的内容展示在最前面,很明显这里使用的是“尼尔森-灵活高效原则”。
再来看产品详情页,该页面使用了“古腾堡原则”,最重要的两个信息(产品信息、购买按钮),一个展示在左上,一个展示在右下;其他信息分别展示在中间、右上及左下方位置。同时这里也使用了“交互设计 5 大定律中的费茨定律”,把“购买”按钮放在距离用户手指最近的位置,并占据底部导航栏三分之一的面积,这样的设计,既方便了用户的操作,又提升了产品的购买率,一举两得。
淘宝关于其他原则的应用示例还有很多,比如淘宝首页的“下拉刷新→松手刷新→正在刷新”,应用的是“尼尔森–状态可见原则”;用户购买商品后发现不合适,可以申请退货或换货,应用的是“尼尔森–用户可控原则”;淘宝客服功能,可以在线为用户答疑解惑,应用的是“尼尔森-的人性化原则”,等等,这里我就不再一一举例了。
强化练习的目的就是为了加深记忆,形成条件反射。以后,不管是做竞品分析,还是自己设计原型,就能快速想到这些设计原则。遵循这些原则,即使我们没有太多的实战经验,也可以设计出符合基本规范的原型图,减少低级错误的可能性。
武功秘籍我们已经练习的差不多了,可是威力如何还需要进一步的检验。如何检验学习的效果呢,那就是通过项目实战。
《刻意练习》中作者说“人的学习受到情景的制约或促进,你要学习的东西将应用在什么情境中,那么你就应该在什么样的情境中学习这些东西。比如,你要学习编程,就应该在 GitHub 里学习,因为你以后编程就是通过 GitHub”。同样的,我们想掌握交互设计原则,那么就需要在交互设计中学习,也就是结合实际项目进行实践。
这里我通过一个实际案例,来简单介绍一下,在实际项目中该如何应用这些原则。
现在有个功能优化的需求,给“党费缴纳”增加一个“待缴费用户查询以及发送短信提醒”的功能,那么我们在设计原型的时候会应用到哪些设计原则呢?
先看原型图,下面这两个页面应用到了“状态可见、接近性、相似性、奥卡姆剃刀原则、一致性原则,以及古腾堡原则”。
其中,查询记录为空和查询记录不为空,应用到了“尼尔森–状态可见原则”;
查询条件(快速查询、精确查询)和下面的查询结果,应用的是“格式塔–接近性原则”;
查询结果中,人们倾向于把“选择框、姓名、联系方式”联系在一起,这里应用的就是“格式塔–相似性原则”。
快速查中的“近一月、近三月、近半年”快捷操作按钮,应用的是“奥卡姆剃刀原则中的减少用户操作次数,给出合理选项原则”;
再看有查询结果的这个页面,这个页面和手机通讯录页面是不是很相似?所以这里应用的是“尼尔森–一致性原则”;
还有右下角的「发送短信提醒」按钮,应用的是“古腾堡原则”。
我们再看下面两个页面,这两个页面主要应用的是“尼尔森–状态可见原则”,当点击用户前面的按钮时,左下角会实时显示“已选中 xx 项”,然后点击「发送短信提醒」按钮时,会弹出“发送成功”的 toast 提示。
上面考虑的都是正常的情况,假如用户未选择任何选项,直接点击了「发送短信提醒」按钮,这个时候该怎么处理呢?这时“尼尔森–容错原则”就派上用场了,增加一个“请选择您要提醒的用户”toast 提示就可以啦。
《刻意练习》的作者告诉我们,“1 万小时定律”是个伪命题,学习需要讲究方法,同时也是有方法可寻的。通过“总结归纳→强化练习→项目实战”的方式,我们就可以将交互设计必备的技能在较短的时间内各个击破。
设计原则全家桶参考链接:
写在前面在平时的设计过程当中,你是否有这样的疑惑?
阅读文章 >好的设计师理解心理学在视觉感知中的强大作用。
阅读文章 >Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。
阅读文章 >在交互设计领域,有很多经过时间检验过的定律及法则,来作为设计的指导原理,它能够帮助产品设计者对界面上的各种视觉元素进行合理评估,从而发现一些使用过程中的可用性问题,还可以根据这些法则从界面的维度来改善操作效率和使用满意度。
阅读文章 >交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”。
阅读文章 >本篇来源:优设网
原文地址:https://www.uisdc.com/master-design-principles