交互设计分享|最重要的设计原则

第一期分享出来后,我收到很多正向反馈,也认识了好几个小伙伴,超乎意料,觉得很开心。

每个人都有自己内心想表达的东西,当那种表达欲望满的溢出来时,诉诸文字,变成了硬盘上一个个冷冰冰的字节。这些文字最终被上传到互联网的某个角落沉睡。它们只有在其他人短暂目光中获得CPU执行时间,活了过来,并在这个人离开后继续沉睡。这篇文章得到的关注越多,它沉睡的时间越少,生命力越强。

我认为,一篇文章(或一场优秀的演讲)要获得长时间的关注,至少要包含三个要素:1. 作者有发自内心想表达的欲望;2. 阐述了自己独到的观点;3. 条理清楚。虽然现在还无法完全做到,但我自己的每个分享,都会尽力朝这个方向努力。

一、内容介绍

今天这期分享,和接下来的两期分享,我将会分享交互设计中,最重要的一个设计原则,和两个设计方法。

为什么是一个原则和两个方法?

我的桌面上有两本书,一本是《通用设计法则》,另一本是《通用设计方法》,前者一共列举了125条设计原则,后者列举了100条设计方法。两本叠起来有五厘米厚,225条内容。


图-1

这些东西有没有用?有用。

这些东西能不能记得住?不能。

就我自己这三年设计经验中,我认为,交互设计师最有必要掌握的,是这两百多条中的三条——一个原则和两个方法。如果你掌握了这一个原则和两个方法,你的设计可以做到60分。而剩下的40分,则需要付出更多努力。

今天要分享的,就是其中最重要的那个「原则」。


图-2

二、设计原则No.1

我们先看一个案例。这是我们公司上半年某个产品的宣传海报。


图-3

这个海报最大的问题是,看不到重点——也就是没有「优先级」。我做过测验,找了一些对这个产品不熟悉的人看这个海报,看完后让他们回忆,这个产品是做什么的,它给用户带来什么好处,没有人能记得起来。

人的认知资源是稀缺的,当你的所有东西看起来都很重要,那就没有重要的东西了。

所以「优先级」,是设计师在设计过程中,最应该重视的原则。苹果的设计为什么那么好用?还有360安全卫士,我们都用过,这样的产品,是连我们父母那一辈人都能轻松用起来的东西。这些产品怎么做到的?最重要的是,他们的产品经理和设计师能够有魄力地砍掉功能和界面元素,让重点的变得更重点,让需要突出的变得更突出。

三、怎么做?

我们先看看,遵循哪些规则才能在一个页面中凸显重点[1]

1. 不要有太多重点分散用户注意力

图-4

2. 强化需要凸显的内容

图-5

3. 鲜明的对比让人容易区分

图-6

4. 组块让人更容易阅读并找到内容

图-7

有了这些规则后,我们面对一个复杂的、没有重点的页面,有什么手段来达成我们的目标?

传统的DVD遥控器功能复杂难以使用,下面我们通过四个步骤来改善它的设计。

1.删除不必要的

对用户来说,学习成本最低的产品,是够用的最小集;理解成本最低的文案,是让人能够理解的最短文字。每增加一个不必要的功能,或是不必要的文字,都是在浪费,浪费用户的注意力资源,浪费开发、测试和维护资源。

所以第一步,干掉所有没必要的东西,聚焦于真正重要的功能。


图-8

2.组织要提供的

把不能删的元素,按照有意义的标准划分成组。


图-9

在做这一步时,要记住最重要的一点是:只强调一两个最重要的主题。随随便便地组织不会让用户的注意力集中,只能让他们眼花缭乱。

比如在这个改进中,只突出起点(开/关按钮)和最常用的按钮(播放、暂停和停止)。

3.隐藏非核心的

把那些必须,但不常用的元素隐藏起来,避免分散用户注意力。


图-10

这个方法在我们软件设计里也经常使用。比如把个性化设置隐藏到二级菜单里,或者使用向导,不同阶段展示不同内容。

4.转移不擅长的

把一些内容控制转移到其它地方。比如把遥控器按钮精简掉,让屏幕菜单取代。


图-11

总结起来就是:删除不必要的、组织要提供的、隐藏非核心的、转移不擅长的[2]

图-12

四、实际案例

最后,我尝试用上面学到的四步法,来改善前文提到的宣传海报。


图-13

1.删除无用的背景图。删除后海报上的图片会变得更清晰,而文字也会变得更好阅读。


图-14

2.删除重复的logo,和右上角无意义的图片。


图-15

3.重新组织和提炼产品的核心价值,简化文案。


图-16

4.提炼海报的标题和文案。


图-17

5.优化产品介绍图片。


图-18

完成。对比一下修改前和修改后。


图-19

这个宣传海报并非最终版,还有许多要优化的地方,比如文案还不够直接、有力,图片还不能够表达我们的解决方案,价值点也还有待探讨的部分。我只是通过这个案例,来说明如何让一个复杂的设计变简单。

今天的分享就到这里,希望对你有帮助_[3]


  1. 还有很多实用的设计规则,可参见 GoodUI

  2. 更详细的内容请见《简约至上》

  3. 最后再推荐一本对我的设计影响比较多的书《佐藤可士和的超整理术》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容