GoodUI设计技巧(五)

最后更新于:2022-04-01 10:46:06

## 61\. 反馈操作结果 用户做了操作,会希望知道操作是否成功。如果程序缺少操作反馈,用户会很困惑,系统按我的要求执行了吗?按钮按下了吗?我应该再试一次吗?良好的设计要让用户获得持续、完整的操作反馈。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496b1b5c.jpg) idea061 ## 62\. 考虑用户下一步操作 设计时思考用户下一步操作,并为此提供更好的体验。[亚马逊的下拉菜单](http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown)就是个很好的案例——鼠标移动到某项菜单上展开二级菜单,光标经过下一项菜单的右上角时,不会收缩或改变二级菜单——若非如此设计,用户使用起来会很痛苦。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496c02d2.jpg) idea062 ## 63\. 适当留白 适当留白让内容/数据更好读。表格、段落、列表项等等所有页面元素间要留足够的间距。间距不足,内容会混在一起看不清楚。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496cfad9.jpg) idea063 ## 64\. 讲故事 故事是最古老的交流方式,可以使用在产品引导页,或各种可交互的程序中。请尝试叙述故事来替代信息的罗列。基本的故事有几个要素:人物、情节和需要被解决的问题。它们能[引起情感共鸣](http://www.nytimes.com/2012/03/18/opinion/sunday/the-neuroscience-of-your-brain-on-fiction.html?pagewanted=all&_r=1),让读者身临其境,因此,更不容易被遗忘。推销产品的信件都很喜欢讲故事,正因此才能打动客户。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496e23b0.jpg) idea064 ## 65\. 使用真实数据 > 已测试!在Datastories Issue #16测试中修改了四条客户评论,提高了7.8%的购买率。 大多数人能嗅出一英里外的骗子。使用真实数据可以帮助你的产品变得值得信赖。如果用户看到一堆没写任何理由的好评,可能会怀疑评论造假。有好评也有差评看起来更可信。另外,精确的数字也能让产品更可信。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496f32bb.jpg) idea065 ## 66\. 逐步减少提醒 [LayerVault](http://layervault.tumblr.com/post/42361566927/progressive-reduction)曾讨论过这个方法。产品要为新手提供引导,教他们怎么使用产品,随着他们使用次数的增加,逐步减少提醒。例如,把放在显眼位置的快捷操作去掉,或隐藏图标的文本标签等等。用户要学的内容越来越少,直至完全掌握。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4970e41c.jpg) idea066 ## 67\. 少用「我」,多用「你」 将用户的利益放在自己的前面,少用「我」,多用「你」。一个世纪前,戴尔·卡耐基就在[《人性的弱点》](http://book.douban.com/subject/1837006/)中提出,让人广受欢迎的途径是关注对方的兴趣和利益,真心理解对方。这同样也适用于产品。另外,[社会实验](http://strategypeak.com/convicted-criminal-more-credibility-federal-prosecutor/)观察发现,人们更信任非利己主义者。有时,仅从对方角度考虑(即使自己没有立即受益)也能带来双赢。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4971c781.jpg) idea067 ## 68\. 提供解释、说明和提示 有些事对我们来说显而易见,对用户却未必。典型如文本字段,要求用户输入开放性的内容,所以要提供解释性说明,比如:为什么要输入这个信息、输入格式、输入例子、如何找到需要的信息等等。注意,这些解释[不要放在表单字段的占位符里](https://www.nngroup.com/articles/form-design-placeholders/)。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4972f0f5.jpg) idea068 ## 69\. 简洁的文案 用词简练,缩短句子长度。写完初稿后,看看能否在不失原意的前提下让句子更精练。使用[五个简单的技巧](http://www.portent.com/blog/random/5_steps_to_concise_copy.htm)(如少用被动语态、去掉无意义的词等)能让文字简洁老练。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49742662.jpg) idea069 ## 70\. 响应式布局 世界上最糟的事莫过于出现双滚动条。使用较小的设备访问静态布局的网页,比较容易出现这个问题。解决的方法之一是使用响应式布局,根据屏幕形状和大小自动调整内容。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4974e65f.jpg) idea070 ## 71\. 视觉清晰 一切事物都是相对的。有光才有影,有大才有小,有整体才有个体,有混乱才有秩序。视觉上的对比让人更容易理解产品,而模糊相似的视觉元素会让人混乱。所以视觉上的区分,比如大小、颜色对比要明显。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4975fcfc.jpg) idea071 ## 72\. 提供补救措施 误操作或程序异常难以避免。程序应该允许用户在出问题时补救,而不是重头再来。常见的例子比如:换一个帐号登录、修改订单数量、更改送货地址等等。程序应该允许用户做出这样的调整。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49772719.jpg) idea072 ## 73\. 支持分享到SNS 在SNS网站上公开计划是一种自我激励的方式。人们努力[保持形象](https://peopletriggers.wordpress.com/2010/05/26/the-six-weapons-of-influence-part-2-commitment-and-consistency/),所以公开承诺会让人担起责任。[研究](https://neuronarrative.wordpress.com/2010/01/10/does-making-a-public-commitment-really-help-people-lose-weight/)已经证实,使用这种方法能提高减肥成功率。当我们向别人宣告要做什么时,更可能会付出行动。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49782c68.jpg) idea073 ## 74\. 提供重操作功能 有时程序未如期运行(如上传文件失败)得再试一次,或者用户打印完一份文档后想再打印一份,提供重操作让这个过程变得超级简单。出现以上情况却不能重操作时,用户会很挫败。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f497919b4.jpg) idea074 ## 75\. 选项尽量少 给用户的选项数量要尽量少。选项越多越难选,用户满意度会下降,后悔和自责的概率也会增加。然而,选项多也有好处,它意味着用户选择范围广。至今为止,[果酱实验](http://book.douban.com/subject/21346249/)(更少的选择带来更好的决策)还未重验成功[[1]](http://www.jianshu.com/p/f2265ad64b5a#fn_lemma_tips1),所以我们宁愿采取折中的手段,并进一步测试本方法。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4979fb00.jpg) idea075
';

GoodUI设计技巧(四)

最后更新于:2022-04-01 10:46:04

## 46\. 让一个控件提供多个功能 简单的设计让产品好用。太复杂的页面会消耗用户有限的注意力,页面越复杂,可用性问题越多。简化页面的方法之一是让一个控件提供多个功能。常见的例子是,提供一个输入框查询所有字段,而不是提供多个查询条件。另一个例子是把当前评分和我要评分放在一个控件里。这种方法虽然简化了页面,但也降低了功能可见性,用户可能会找不到功能。因此它更适用于高级功能,用户要投入更多学习成本。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49567c02.jpg) idea046 *译注:网易云音乐的歌手热门歌曲页,单击第一首歌播放,后台自动将剩余歌曲加入播放列表,达到播放全部的效果。而QQ音乐直接提供「播放全部」功能。前者更简洁,但第一次使用着实害我找了半天,后者一下就找到,但页面没那么清爽。* ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4957e778.jpg) demo046 ## 47\. 给图标增加文本标签 一个图标可能有多个含义,和文字结合,可以消除歧义。以向下箭头为例,它表示下移,降低优先级,还是下载?「X」又意味着删除、禁用还是关闭?为了使图标更易懂,请为它们加上说明文字。如果空间不足必须去掉文字,也要让用户有办法一次显示所有图标的含义(而不是悬停在每个图标上单独显示)。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f495b87e3.jpg) idea047 ## 48\. 使用自然语言 > Datastories Issue #5测试,提高了28%的注册率。 [自然语言](https://en.wikipedia.org/wiki/Natural_language_user_interface)是非正式、对话式的交流方式,而非严格、正式的文本。计算机要能更好地理解(或看起来理解)和使用自然语言。这有两点要求。第一,计算机要能理解自然语言的含义;第二,计算机反馈的信息也得是自然语言。虽然第一点的技术还未成熟,但已经有一些很有前景的案例,比如使用谷歌搜索「多伦多天气」,又比如Firefox和Siri命令。至于第二点,给计算机点提示,[它们能将语言转换的自然点](http://www.jroehm.com/2014/01/ui-pattern-natural-language-form/)(这点需要更多测试)。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f495c5db5.jpg) idea048 ## 49\. 免费试用 免费试用是提高转化率的策略。提供免费试用服务,比如样章、演示、产品试用或一些免费的正版内容等,可以诱导潜在消费者购买完整的内容。恰到好处的试用服务,是激励用户的最佳途径。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f495d603d.jpg) idea049 ## 50\. 安抚用户 在销售页末尾,安抚你的用户,比如:航运免费、支付安全、可以随时退出,没有任何风险。让他们别担心。这种策略绝对值得一试。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f495e657f.jpg) idea050 ## 51\. 有技巧地展示价格 > 似乎有效。Datastories Issue #15测试,购买率提升17%,#4测试也提升了48%的购买计划。 你可以选择让用户自己判断产品的价值,也可以引导用户接受你期望的价格。利用人类非理性的一面,有技巧地展示价格,更能吸引用户消费。最简单的方式,就是使用「只要」、「负担得起」、「小费用」等文案;其次,也可以把价格拆分为单元价格(比如告诉用户每页3分钱比每本书30元更能打动用户);此外,你也可以使用x9的价格(比如29、299、2999);最后,价格要用更少的数字显示,30元比30.00元更好。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4960448d.jpg) idea051 ## 52\. 感谢用户 感激和关心用户能让你的业务、产品或页面看起来更人性化。在一些任务完成后感谢用户,比只告诉用户结果更好,也能引导用户进行下一步行动。感谢你阅读这一段:) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496128d1.jpg) idea052 ## 53\. 提供好理解的数据 为用户提供好理解的数据,不要让他们自己计算。举例来说,一些产品会限制用户使用额度,此时,帮用户计算出还能用多少天,比直接显示剩余额度更直观。此外,当我们显示数据的时间时,使用相对时间「3分钟前」比绝对时间「16:37分」更好理解。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4962020e.jpg) idea053 ## 54\. 强调选择自由 当人们被强调选择自由时,更容易行动。有[一些研究发现](http://www.spring.org.uk/2013/02/the-one-really-easy-persuasion-technique-everyone-should-know.php),强调「你很自由」时,人们采取行动的概率甚至翻了一倍。所以我们可以在一个行动后,紧随简单的声明——「你有自由选择的权利」或「你可以选择接受或拒绝」。这种方式在动作和声明紧连一起时最有效。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496306d8.jpg) idea054 ## 55\. 灵活多变的奖励 灵活多变的奖励比一成不变的奖励更能激励用户。当我们(至少老鼠)按动杠杆得到的食物数量随机时,会更频繁地按杠杆。如果觉得这个案例不恰当,可以考虑更贴合你的案例——检查电子邮件——频繁地检查电子邮件,是因为你不知道什么时候会有邮件来。假设你每天收到邮件的次数和时间都固定,就不会那么上瘾地检查了。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4963d841.jpg) idea055 ## 56\. 强调重点功能 强调重点,让用户注意最重要的功能。通过增加大小或加强元素的对比可以达到目的。其它方法还包括:使用不规则的形状、自动聚焦、高亮区域、浮动显示、指示性箭头等等。当然,你不可能让一个页面处处都是重点,但重要的地方还是要强调。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4964aa85.jpg) idea056 ## 57\. 更好对比的数据 用户有时要对比不同的参数做选择。有很多方式可以让对比变容易,帮助用户下决定。首先,限制要比较的属性数量,不要过多;其次,需要对比的属性应该区隔开来,不要合在一个列;第三,只让用户做一个决定(而不是多个决定,或混杂在一起的决定),以减少额外的认知负担。总而言之,表格的目的是显示关键属性的差异,并帮助用户下决定。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49658cb2.jpg) idea057 ## 58\. 提供集合 人都喜欢收集东西。无论是在物理世界还是虚拟世界,人们看到系列的物品,会有收集的欲望。通常用户把整套收集完后,会得到额外的奖励(一个合起来的蛋糕比一块块的总和要大)。让人一目了然地看到自己已经收集了哪些,还有哪些未收集,会更有动力继续。最后,如果收集的是稀缺物,人们的动力也会更足。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496684e3.jpg) idea058 > *译注:多看阅读每日签到获得积分,签到满一周抽一次大奖。* ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49676ff0.jpg) demo058 ## 59\. 显示预期结果 让用户知道自己所处状态和操作预期结果并不费劲。比如:「向导一共有几步,你正在操作第几步」、「你的选择会导致什么结果」、「在什么时候你会收到什么信息」……这些小提醒会让用户更信任产品。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49694d85.jpg) idea059 ## 60\. 幽默一点 为什么总是那么严肃?听到笑话,你会觉得放松。在页面上添加有趣的东西也可能会带来意料外的效果,增进你和用户间的关系。搞好关系,万一哪天你犯错误,用户会更容易原谅你。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f496a0248.jpg) idea060
';

GoodUI设计技巧(三)

最后更新于:2022-04-01 10:46:02

## 31\. 区分视觉层次 好的视觉层次能够区分页面中哪些元素重要,哪些次要。要做到层次分明,可以从对齐、间距、颜色、色调、缩进、字体大小、元素大小等视觉语言入手,将它们运用得当,用户就能顺畅阅读。层次分明的页面,能让用户放慢速度,从上到下细细浏览。虽然这样他们要花较多时间在页面上,但能获取到更多信息。就像一场旅行,你可以走高速路,更快地到达目的地,也可以放慢脚步欣赏沿途风景。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49473af7.jpg) idea031 ## 32\. 将相似的功能放在一起 将相似的功能放在一起是非常基本的原则。大部分人都知道,刀和叉、打开文件和关闭文件要放在一起。将相似功能放在一起符合逻辑,也尊重人类的认知习惯。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4948653c.jpg) idea032 ## 33\. 及时校验 在处理表单时,最好及时检测是否存在错误,并显示检测结果。这样用户可以立即通过提示的错误信息(一般放在字段右边)调整内容。反之,等到表单提交后才验证并反馈错误信息,就需要用户做一些额外的记忆和操作。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f494986bd.jpg) idea033 ## 34\. 放宽对输入的要求 对用户输入的数据,尽量放宽限制。这样做程序会显得更人性化,页面也更友好。比如程序可以支持多种格式的电话号码,带扩号、带破折号、带空格,带区号或不带区号等等。开发起来会复杂一点,但对用户来说能减少很多工作。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f494a8558.jpg) idea034 ## 35\. 适当营造紧迫氛围 > Datastories Issue #3测试,提高了49%的注册转化率。 如果我们希望用户立即行动,可以营造一种紧迫的氛围。这种方法暗示着资源紧张,或活动时间有限,今天可以买,明天就没了。这种策略也许有一些争议,但仍然可用,只要它是诚实、有效的。但不要为了营销而制造紧迫的假象,因为有可能会弄巧成拙,带来负面影响。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f494b916f.jpg) idea035 ## 36\. 适当尝试饥饿营销 物以稀为贵。通过这种方式,用户会感觉东西再不买就没有了。想想批发和限量版商品的价格差距有多大。还有一些批发商或大型零售商一开始只提供有限数量的商品,直到卖外后才再生产新的一批。但是在软件行业,我们经常忽视这种策略,因为软件产品容易拷贝复制,不会缺货。其实软件产品也可以采用这种策略,比如限制网络研讨会的门票数量,或者限制产品每月服务的人数上限等等。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f494c5e6f.jpg) idea036 ## 37\. 让用户选择,而不是填写 心理学研究表明,用户更擅长从一堆东西中识别出某样东西,而不是靠记忆来回想。前者只要我们稍微回忆,并通过一些线索就能完成,后者则需要我们全面检索自己的大脑。这就是为什么客观题比主观题更好答。所以在页面上提供选项让用户选择,比让他们想半天后自己填写要好。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f494d457d.jpg) idea037 ## 38\. 增大点击区域 把链接、按钮、窗体的尺寸做大,更容易点击。根据[费茨定律](https://en.wikipedia.org/wiki/Fitts's_law),使用鼠标等设备来点击一个特定区域需要点时间,如果元素比较小,就更费劲了。因此最好还是把表单字段、按钮和链接做大点。或者可以大小不变,但可点击区域增大。一个典型的例子就是手机设备上的文本链接和导航菜单,在很宽范围内点击都有效。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f494e83b0.jpg) idea038 ## 39\. 优化页面加载速度,不要让用户等待 速度很重要。页面加载速度和响应用户操作的速度对用户是否继续使用有决定性的影响。有人提出,每增加一秒等待都可能导致用户放弃,降低转化率。因此一种办法是通过优化代码和图像来减少加载时间,还有一种办法是运用心理学原理让用户觉得时间没有那么长。使用进度条就是一个例子,或者在加载数据时让用户做点什么事(比如把传送带的位置设计远一点,让用户多走一段距离,也好过让用户在传送带旁边抖脚等待)。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f495001a0.jpg) idea039 ## 40\. 支持快捷键 高频率使用的程序应该为高级用户以及那些长时间使用的用户多做考虑。人们需要更高效地执行重复任务,而快捷键是其中一种方法,它能大大提高工作效率。比如使用[J键和K键](http://www.skipser.com/p/2/p/why-google-uses-j-and-k-keys.html)来前进和后退的方法已经被诸如Gmail、Google阅读器、Twitter、Tumblr等产品广泛使用。按钮固然好,但快捷键能锦上添花。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4950f2be.jpg) idea040 ## 41\. 利用锚定效应 > Datastories Issue #4测试,提高了48%的购买率。 人类认知充满偏见。[卡尼曼研究](https://en.wikipedia.org/wiki/Anchoring)发现,锚定效应是人类难以抗拒的偏见。它是指当人们考虑一个未知数量时,会受一开始获得数值的影响。一开始给出高价,再给出稍低点的价格,会比直接给出后面的价格更容易被接受。而且锚定值不一定是价格,还有可能是其它内容。营销人员向顾客展示厂家建议零售价,再提供一个更低的价格,就是利用锚定效应的很好案例。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4951dcaa.jpg) idea041 ## 42\. 尽早激励用户 我们越接近完成越有动力。在设计程序时,可以把注册作为新手任务的一个环节,否则等到注册完才开始新手任务,用户看到的是自己一个任务都还没完成的空白状态。所以尽早激励用户,让他们更有动力前进。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4952a7a0.jpg) idea042 ## 43\. 逐步显示 将信息[逐步显示](https://en.wikipedia.org/wiki/Progressive_disclosure),用户不用看到一堆不相干的信息。这种模式经常用在会根据上下文变化的表单上,每次只显示对用户有用的内容。它通常会和扩展动画或滑出动画同时使用。表单中内容很多时,也可以使用这种方法,避免用户填写不必要的信息。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49538622.jpg) idea043 ## 44\. 降低使用门槛 告诉用户使用产品做什么时,不要把饼画得太大,容易把用户吓跑。[研究表明](https://en.wikipedia.org/wiki/Robert_Cialdini),相比完成一个大任务,人们普遍更容易完成一系列相互关联的小任务。所以程序可以将一个大任务分成一系列小任务,并引导用户一步步达成。以约会网站为例,可以先让用户看看周围都有谁在使用,再让用户介绍自己,再为他提供约会的建议等等,不要一开始就让用户联想到婚姻和人生幸福。再以定价举例,用户更容易接受按月支付而不是按年支付。这种策略也是在暗示用户「没有约束」,用户会觉得他们可以在任何时间离开,让用户更容易接受产品。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f495463af.jpg) idea044 ## 45\. 提供非模态的反馈 模态窗口或弹框会带给用户[许多困扰](http://www.azarask.in/blog/post/designing-without-modal-overlays/)。首先,模态窗口会阻止用户执行其他任务,也会遮挡窗口后的信息。其次,如果用户在执行某个任务过程中离开电脑,弹框会停止正在执行的任务。最后,模态窗口会打断那些正沉浸在任务中的用户。使用非模态的反馈方法,同样能抓住用户注意力,也不会带来其他问题。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4955510b.jpg) idea045
';

GoodUI设计技巧(二)

最后更新于:2022-04-01 10:45:59

## 16\. 不要放太多链接 为了满足不同用户的需要,我们可能会在页面上增加一个又一个链接。但如果你的目的是想让用户点击页面下方那个重要按钮,每增加一个链接,都会降低他点击按钮的概率。所以请注意网页上链接的数量,尽可能平衡链接和按钮间的关系。删除多余的链接可以增加用户点击按钮的概率。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49374d5d.jpg) idea016 ## 17\. 显示元素状态 在页面直接显示元素状态。比如邮件分已读、未读,电子账单有已支付和未支付状态等等。告诉用户这些状态很有必要,它们还可以帮助用户了解自己过去的操作是否已经成功,接下来应该采取什么行动。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4939e9a3.jpg) idea017 ## 18\. 把好处写在按钮标题上 想象页面上有两个简单的按钮。一个按钮告诉你点击它「获取折扣」,另一个则是「注册」。我打赌大部分人会选择前者,因为点击第二个看起来没有任何价值,相反,还会联想到冗长的表单。也就是说,让用户感受到好处的按钮更有可能被点击。另外,不一定要把这些信息作为按钮标题,也可以把它们放在按钮旁边。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f493acc74.jpg) idea018 ## 19\. 直接在元素上操作 直接在元素上操作最直观明了。以数据列表为例,我们通常把对条目的操作直接放在条目上,而不是放在列表外。另外,单击某个条目可以直接进入编辑状态。这种方式比选中条目再点击按钮的方式要简便。当然,对于没有上下文的通用操作(比如添加按钮)则不必如此。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f493bb825.jpg) idea019 ## 20\. 在产品引导页直接提供注册表单 在传递产品价值的引导页中,直接提供注册表单比点击按钮再弹出表单要好很多。首先,减少了额外的步骤,流程变得简洁,节省了用户时间。其次,在一开始就显示注册表单,可以让用户直观的感受到要填写的内容没多少,不会花时间。当然,这种情况只适合在表单非常简单的情况。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f493c6f59.jpg) idea020 ## 21\. 使用平滑的过场动画 > 已测试!我们对自己的网站进行A/B测试,总共进行了6次实验,其中有1次提高了31%的注册转化率。 用户操作时,页面元素会经常显示、隐藏、移动、放大缩小等。为这些元素增加淡入淡出等过渡动画,能让用户更容易理解刚才的操作带来了什么变化,并且给予用户足够的时间来观察变化的大小和位置。要注意的是,过场动画不宜过长,尽量控制在0.5秒以内,否则部分用户会不耐烦。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f493d4447.jpg) idea021 ## 22\. 循序渐进地引导,不要直接让用户注册 > Datastories Issue #9测试,提高了232%的注册转化率。 与其让用户仓促注册,不如让用户先进行一些体验式的操作,通过这些操作向用户证明产品的价值。这样的初始互动可以向用户展示产品功能,一旦用户看到它们,会更乐意注册。这种循序渐进的引导尽量推迟用户注册的时间,并允许用户在没有注册的情况下进行一些个性化设置。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f493e3cbd.jpg) idea022 ## 23\. 不要使用太多边框 注意力是宝贵的资源,我们在特定时间内拥有的注意力有限。边框可以定义一个非常清楚和准确的空间,但是它们也会吸引和分散用户的注意力。为了不过多吸引用户注意力,在排版时我们可以通过缩小组内元素边距、增加组和组之间边距、使用不同背景色、将文字对齐等方法来划分区域。当使用UI设计工具时,我们很容易在页面上拖拽出许多区域,这些区域多了就会杂乱无章,所以我们又会使用线条来分隔它们,从而导致问题。但使用上面说的那些方式,能让页面更简洁清晰。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f493efcd6.jpg) idea023 ## 24\. 展示产品带给用户的好处 用户往往关心产品能给他们带来什么好处,而不是产品有什么特性。知道产品带来的好处,能让他们更清楚地评估产品的价值。Chris Guillebeau 在《The $100 Startup》中写到,人们期望能拥有更多的:爱、金钱、认同感和自由支配的时间,同时有更少的:压力、冲突、烦心事和不确定性。所以我相信,在展示产品时,告诉他们能获得什么好处很有必要。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49407794.jpg) idea024 ## 25\. 设计零数据页面 页面上经常需要使用不同方式来呈现不同数量的数据,从0,1,10,100到10000+等。最常见的问题是在程序第一次使用还没有任何数据时,页面该如何呈现。我们经常忘记设计这种初始状态。当程序初始没有任何数据时,用户看到的就是一片空白,此时用户可能不知道该进行哪些操作。利用这个页面可以让用户学习和熟悉如何使用程序,让用户跨越最初的障碍。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4941a07c.jpg) idea025 ## 26\. 默认帮用户选中服务 默认帮用户选中服务,意味着用户如果要使用服务,不需要做额外的操作。与此相反的做法是默认不选中服务,用户需要时再打开。前者有两个好处。首先,它缓解了行动的阻力,因为用户不需要做任何事。其次,这也是某种形式的推荐,它暗示用户「其他人都这么做,你也可以这样做」。当然,这种方式也存在争议,有强迫用户的感觉。有一些不道德的公司,会刻意降低文本的可读性,或使用双重否定等混乱的文本来迷惑用户,让用户不知道打开了什么服务。因此若选择这种方法,文本务必清晰易懂,好让用户知道开启的是什么服务。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49428357.jpg) idea026 ## 27\. 页面设计尽量保持一致 页面设计时尽量保持一致可能是唐纳德·诺曼最有名的原则,它可以减少用户的学习成本。当我们按下按钮,或移动滑块,我们期望这些元素的行为和以往见到的一致。如果不一致,我们将被迫重新学习。要做到一致性,得在很多方面下功夫,包括:颜色、方向、行为、位置、大小、形状、标签和语言等。但要注意,在一些特定场景下打破一致性的做法仍然有价值。不一致的元素或行为会让用户下意识的关注——如果想让用户注意,可以尝试这么做。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49436507.jpg) idea027 ## 28\. 使用恰当的默认值 > Datastories Issue #11测试(这次测试还包括许多其它变化),提高了34%的购买率。 表单字段提供恰当的默认值能大大减少用户工作,为他们节省时间。一个糟糕的设计会反复要求用户提供数据,哪怕他们已经在过去重复提供多次。对用户来说,工作越少越好。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4944311c.jpg) idea028 ## 29\. 遵循用户习惯 如果我们在设计上保存一致,用户就不用反复学习。另一方面,如果我们遵循用户的使用习惯,也能减少用户的学习成本。遵循习惯,用户不用思考就知道在屏幕右上角关闭窗口,或者知道点击设置按钮后会发生什么。当然,习惯有可能会过时,随着时间推移,同样的操作可能会被赋予新的含义。要注意,只有给用户带来的好处大于弊端时,才能打破用户习惯。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49455114.jpg) idea029 ## 30\. 告诉用户产品能帮他避免损失 我们喜欢成功,厌恶失败。[心理学研究](https://en.wikipedia.org/wiki/Loss_aversion)表明,我们更倾向于避免损失而不是获取收益。这一结论也可应用在产品设计和推广中。试图说明产品会帮助客户维护现有的利益、财富或社会地位,可能好过告诉用户这个产品能给他们带来哪些新利益。比如保险公司,是强调产品能帮助用户避免失去财产好,还是强调出事后能够得到大笔赔偿好呢? ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49463259.jpg) idea030
';

GoodUI设计技巧(一)

最后更新于:2022-04-01 10:45:57

## 1\. 尽量使用单列布局 单列布局能更好地引导用户自上而下阅读,而多列布局则会分散用户的注意力。最好使用有逻辑的叙述来引导用户,并在文末提供一个呼吁用户行动的按钮。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4928f363.jpg) idea001 ## 2\. 提供礼物,不要急着推销产品 展现友好的姿态,比如给用户一份精美的小礼品。这种方式建立在互惠基础上,能有效地获得用户好感,并让你在接下来的活动中更加顺利。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4929d5c9.jpg) idea002 ## 3\. 合并相似功能 在项目过程中,我们很容易创建重复的模块、元素或功能。而通常情况下,模块越多用户学习成本越高。所以请重构你的页面,合并相似功能,让它更精简。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f492ac3f2.jpg) idea003 ## 4\. 来自用户的评价好过自吹自擂 用户好评能有效地提高转化率。当潜在用户看到其他用户讨论、赞同你的产品时,更有可能采取行动。所以尽量提供证据,让这些评论真实可信。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f492b87b8.jpg) idea004 ## 5\. 重复关键操作 这种方法适用于页面很长或是分页的情况。我们不希望在一个页面中反复出现相同的信息,但当页面足够长的时候这种重复就有必要了。我们可以在页面顶部放置一个按钮,然后在页面底部再放置一个更显眼的按钮。当人们到达底部时,会停下来思考下一步应该做什么,这时候他可以点击底部的按钮,而不用返回顶部进行操作。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f492c586d.jpg) idea005 ## 6\. 区分「可点击」和「被选中」的样式 一些视觉风格,比如颜色,层次的区分和对比,可以更好地帮助用户使用产品,让用户知道自己处在什么页面,可以跳转到哪些页面。要达到这样的效果,你需要将可点击的元素(链接、按钮)、被选中的元素和普通的文字以相同的规则区分开来。在下面的案例中,我将「可点击」元素统一指定为蓝色,「被选中」元素统一指定为黑色,这样的设计让用户更容易学习和使用。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f492d0b8c.jpg) idea006 ## 7\. 给出推荐选项 当有多个选择时,提供一个推荐项是不错的做法。一些心理学研究表明,用户面临的选择越多时,越难做出决定。为了克服这个问题,我们可以高亮或强调某个选项,来帮助用户做出选择。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f492e339c.jpg) idea007 ## 8\. 提供撤销操作来替代确认提醒 撤销比确认提醒更符合人类的本能,而且操作起来更顺畅平滑。我认为用户大多数操作都是正确的,只有在极少数情况下才会误操作,所以在用户每次操作时都进行确认提醒很不人性化。提供撤销操作来替代确认提醒,可以让用户有一切控制在自己手中的感觉。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f492f2379.jpg) idea008 ## 9\. 为明确的目标用户,而不是全部用户设计 你的目标是全体用户,还是某个明确的用户群体?显然应该是后者,你需要明确你的产品为谁服务。通过不断了解目标用户的需求和标准,你能够和他们有更多的交流机会,并且为他们提供更优质的服务。这种策略带来的风险是,你可能会让自己的功能变得不那么全面,也缩小了潜在用户的范围。但这种做法能赢得目标用户的信任。 *小贴士:喜欢下图小人的风格么?去了解下[MicroPersonas](http://www.linowski.ca/micropersonas.php)吧。* ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4930f695.jpg) idea009 ## 10\. 直截了当,不要优柔寡断 你可以用不确定的语气表达,也可以通过很自信的方式表达。如果你的语气以「可能」、「也许」、「有兴趣?」和「要吗?」等不确定的表述用语结尾,那么你完全可以把语气变得坚定点。不过有的时候适当放松措词能给用户更多思考空间。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4931e42d.jpg) idea010 ## 11\. 对比要鲜明 好的界面重点突出,与周围的元素区分开。突出重点有很多种方式。你可以让某个元素使用深色调,和其它浅色调元素区分开;还可以为元素增加阴影和渐变来突然对比;最后,你也可以选择互补色(比如黄色和紫色)来提高对比度。综合使用以上方法,就能让重点从其它元素中凸显。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f4932bd99.jpg) idea011 ## 12\. 提供个性化介绍 在介绍产品时,增加一些个性化的信息(比如原产地),会让用户觉得产品友好和亲近。通常,指明产品在哪里被制造还能够让用户下意识地认为产品有较好的质量。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49339116.jpg) idea012 ## 13\. 精简表单字段 人类生性懒惰,没有人喜欢填写一堆表单。表单中每个字段都有可能让用户放弃填写。每个人打字速读不同,在移动设备上打字更是一件苦差事。尽可能删除没必要的字段,只保留那些有必要的。如果真的有很多信息要用户填写,试着将它们分散在不同页面,一页提交后再填写下一页。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49347bba.jpg) idea013 ## 14\. 直接放出选项 每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f49355026.jpg) idea014 ## 15\. 暗示页面还有下文 可滚动的长页面挺好,但是请注意,如果用户看到页面下方一片空白,会认为网页已经到达底部,哪怕后面有内容也会被忽略。如果你的页面需要滚动才能看到全部内容,那么,你需要建立一个视觉模式或节奏,让用户可以感知到后面还有内容。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-01_5685f493623cd.jpg) idea015
';

前言

最后更新于:2022-04-01 10:45:55

> 出处:http://www.jianshu.com/p/f781c40df57c 译文:[四四四毛 ](http://www.jianshu.com/users/cf88b9c0633f) [GoodUI.org](http://goodui.org/) 网站提供了近百条界面设计技巧,并且还在不断更新中。这些技巧非常实用,我打算乘这段空档期把它们译完。 本系列译自[GoodUI.org](http://goodui.org/),文章索引 * [译文|GoodUI设计技巧(一)](101161) * [译文|GoodUI设计技巧(二)](101162) * [译文|GoodUI设计技巧(三)](101163) * [译文|GoodUI设计技巧(四)](101164) * [译文|GoodUI设计技巧(五)](101165)
';