我们知道成功的页面设计不仅有很高的转化率，更便于用户使用；既能满足商业目标，又能为用户带来良好的体验。

Good UI是一家研究用户体验的设计机构，以一系列简洁的手绘对比图，清晰说明UI设计的法则与禁忌。

近期我们编译分享一些Good UI在一些项目中获取的设计以及运营策略等方面的经验。

每天10则。对比着寻找自己身边的优秀和不良实践，认真消化，大有益处。

#1 单栏更专注，多栏易分心

单栏布局让读者的精力集中在从上到下阅读文字内容之上，减少干扰。在需要让读者通读一个好故事之后，在文章末尾采取某种行动的场合尤其有用。

△ 按钮内容：你希望动员用户去做的事

#2 给用户实惠，别急着卖钱

一些小的优惠让用户感到更受尊重和善待，从而更能促成交易。

△ 【左】我们的首月服务是免费的！ 【右】你快注册吧！注册吧！注册吧！！！

#3 相似功能要整合，用户界面忌破碎

这真的是一个频发错误——人们很容易为同一功能建立多个入口。请注意同样的功能只应当出现一次。尤其要注意字面表示不同但实际一致的情况。

△ 【左】联系我们 【右】客服中心、联系我们、立刻来电、我们的号码XXXXXX、取得联系……

#4 客户评价是宣传，自吹自擂是作死

不解释。对于中国用户，请千万特别注意在企业简介等处，经常出现的这类文案：

XX公司坚持以客户需求为核心，以顾客体验为根本，为超过XXXX的企业和个人客户，提供XXXX、XXXX和XXXX的专业产品，优质、用心 的服务赢得了众多客户的信赖和好评，在XX地区逐渐树立起公司良好品牌。公司不仅仅提供业界领先水平的XXXX，同时还建立了完善的售后服务体系，为客户 在使用过程中的XXXX等问题提供无微不至的指导、帮助和服务。我们相信，通过我们的不断努力和不懈坚持，一定能够实现与同业人士的互利共赢，为客户创造 永无止境的巨大价值！

这类没有人真正去看的文案，只会给人以浮夸的感受，为企业的印象减分。糟糕透顶的常见实践。

△ 【左】客户是这样评价我们的… 【右】看下边这几条！我们就是这么牛！

#5 主要目标，反复出现

在长页面或多页面中，记得向用户重复你的主要目标，以免用户在阅读过程中忘记。一般头尾出现一次总是好的——页头持续提示用户带着目的开始阅读，页尾让用户在读完后把目标付诸实现。

#6 导航元素宜明确，花哨模糊不应该

我在哪？可以去哪里？这是为了让人类能够在网站中导航的基本要素。这些地方的样式务必要统一，绝对禁止无意义的模糊和多样化。

△ 【左】链接一定是蓝色的，当前位置一定是黑色加粗的 【右】你晕不？

#7 宜重点推荐，忌平铺选择

不止一个心理学研究表明：选择越多，决定越难，从而成交越少。在不得不让客户多选一的时候，把常见的选择突出显示，给客户一点小小的推力。

△ 【左】我们推荐X，不过选Y和Z也可以 【右】XYZ，我也不知道哪个好，你挑吧。

#8 允许用户去反悔，不要事前去确认

人类都自信自己的行为是正确的，从而希望机器立刻响应。执行了还要“确认”，这无异于让人类把一件事重复两次，是违反常识的。

网络上绝大多数的行为，执行之后都没有什么灾难性后果，甚至很多都可以简单的挽回。所以执行后允许撤销才是常态，没事千万不要用确认对话框。这是个雷。一定要只在执行后的后果绝对不能挽回的时候，才把确认作为最后手段。

△ 【左】您改动了这里。如果弄错了，点击撤销。
【右】你确认真的要改动这里吗？ [是的！改！就按我说的做！] [呃不，我犯SB了，对不起]

#9 目标客户，明确胜于高大全

明确您的用户群，会让您和用户有更深度的接触，同时也让用户感觉自己受到了企业的针对性服务和特别对待。

△ 【左】实话实说，我们的产品确实无法满足所有人，例如：1.…2.…3.…4.…。点击这里了解我们的服务。
【右】我的产品，无论高矮胖瘦男女老少都能用！点击这里了解我们的服务。

#10 直中靶心，别绕弯子

就如同在生活中，洪亮自信总是比颤抖虚弱的讲话方式有力一样。网络上如果用词不坚决，经常出现“可能”、“也许”等词汇，或者是疑问气氛浓重的表达方法……那么试想：网站主自己都没有信心，那又拿什么让访客信任你呢？

△ 【左】就点这里！ 【右】呃…还想了解点别的吗？或者也许点这儿试试看也不错？

上一期链接：《简洁明了的优秀UI设计原则（1）》

今天继续分享Good UI用户界面设计原则的第11-20条。

#11 对比宜清晰，外观忌模糊

让你的主要元素和其他元素，在颜色、风格上制造区别，突出主要目标。

△ 按钮内容：你希望动员用户去做的事

#12 标注产地或制作方，避免同质化

主动介绍“我们的产品来自哪里”，对体现产品的信心和责任有作用，对于用户而言也是一个简单的善意表示。

△ 【左】NB的产品，来自加拿大。 【右】NB的产品。

#13 管住你的嘴，表单少问那么多

人类真的很懒，很多人对分享个人信息也比较警觉。问太多，用户会被吓跑的，立竿见影。

表单膨胀真的是个极其常见的错误，戒之慎之。把表单项目减少一半，之后再减少一半。不必要的千万别问，不着急的允许用户以后填写，不必须的必须做成可选项。如果实在是死都不能减了却仍然很多，则用分步填写等步骤精心设计。

△ 【左】注册产品 – 姓名、电子邮件。
【右】注册产品 – 名、姓、电子邮件、重新输入电子邮件、喜爱颜色、国家、BOSS非要加进去的条目。

注：最后那个的原文是“委员会设计加入的条目”——“委员会设计模式”在国外是个固定的黑法，专指委员会、董事会等臃肿陈腐的大机构，主导和插手开发工作，为了短期目的而外行指导内行的行为。

#14 把行为显露而不是隐藏起来

每一个下拉菜单，都是卡住用户执行动作的羊肠小道。除非必须，否则不要使用。执行主要动作的元素请考虑直接显示出来。

#15 保持页面形式的连续，防止访客误判页面结束

对于长页面，千万要小心段与段之间的大间隔！

△ 【左】可见标题 1 2 3 4 （到浏览器底端页面仍未结束）
【右】可见标题 正文 空白 浏览器底端 （下一屏幕：可怜的标题，没有人再会注意到他……）

#16 链接只放必要的，满屏蓝字晕死人

链接不是无代价的——每个链接都稀释页面的主要目的和访客的注意力，同时带来跳出率增加的代价。

链接海洋也是个常见错误，发生概率不低于表单膨胀。再次提示：戒之慎之。

△ 【左】你的主要目标
【右】到其他页面的链接 喵星人视频 去其他页面 来看个天气预报吧 你的主要目标 瞧我们在Facebook上也有页面哟…

#17 表明状态，保证用户的知情和控制权

对于电邮（已读/未读）、账单（已付/待付）等有状态的条目，一定要在条目列表的地方，就把状态用视觉反馈传达给用户，让用户有一个一目了然的掌控感。别藏起来让用户要“点击详情”才知道。

△ 【左】账单1 (点击付款)，账单2 (✓ 已付)，账单3 (部分已付, 剩余$50点击付款)，账单4 (点击付款)
【右】账单1 账单2 账单3 账单4

#18 按钮可以考虑避免通用和死板

在主要目标的按钮元素上，体现你对于客户的价值是个好主意。例如“点击开始获得收益”就比干巴巴的“注册”有吸引力的多。

△ 【左】增加您的收入-点击注册 【右】注册

#19 宜直接控制，忌脱离上下文

要操作的东西在哪里，UI元素就应该跟着到哪里。例如操作单一条目的行为就该跟着条目，如果脱离了规定位置，就会让访客分不清楚是在操作单一条目还是在做什么批量行为。

没有上下文的行为元素，就表示这个行为是全局的，整个浏览界面就是他隐含的上下文，一定要注意这个隐喻。所以不要让限定范围内的行为，脱离开他的上下文环境。

△ 【左】列表条目内：重命名、删除、共享
【右】列表左边：重命名、删除、共享（这是要针对整个列表、单个条目还是选择若干条目？？？）

#20 表单条目，尽可能不要新开页面

如果表单项目不多，就不必新开页面了，勇敢的直接在欢迎页面中展示吧。少一个步骤，就多一份的转化率。

这个设计方法也有助于克制和预防表单膨胀的毛病。

△ 【左】[ 姓名 ] [ 电子邮件 ] 点击这里，缔造非凡 【右】点击这里，缔造非凡（下一个表单页面）

上一期链接：《简洁明了的优秀UI设计原则（2）》

今天继续分享Good UI用户界面设计原则的第11-20条。

#21 加点动画，不要生硬弹出

当元素移动、弹出、消失的时候，加显而易见的渐变效果，给人类时间来理解界面是如何变化的，不要让元素突然“蹦”出来。

△ 【左】漂亮的滑动弹出菜单（动画效果：向左滑出0.5秒）
【右】呜哇！这货从哪蹦出来的！！

#22 渐进鼓励，先服务再吸引注册

如无必要，别第一步就让用户注册，别那么心急。先和用户分享（可能的情况下先初步试用）你的产品，让用户感受到网站对自己的价值之后，那么用户为了更进一步使用产品，或者为了保存自己试用的成果，就一定会注册。这种方法是培养陌生用户粘性的灵丹妙药。

△ 【左】开始制作你的App吧，先给你的App挑一个主题颜色。
【右】做App？先别管怎么做，注册一个再开始。

#23 用背景色划分区域，而不是用边框

边框是一个前景元素，和前景的所有文字、图片等干货争夺注意力。所以现代的设计风格中，避免滥用边框划分区域，而使用背景颜色配合合理的边距。边框仅用来提示真正重点的内容。

△ 看右图有没有人想起来当年恶搞短片《馒头》里的“圆环套圆环娱乐城”？

#24 强调好处，不要列举功能

人们对软件给自己带来的实惠，比技术功能更感兴趣。千万不要在这种问题上犯技术至上的错误——尤其是做惯了开发的人士去做产品的时候经常如此。

△ 【左】这个App有如下好处：帮你省钱、省时间、融入社区
【右】这个App有如下功能：截图、处理PNG和JPG图片、允许存储40GB数据

#25 为0数据量的情况做正确的设计

我们总是为了大负载、大数据量而设计，却经常忽视用户在新注册或处理完数据的时候，个人总是会碰到0数据的情况。正确设计，吸引用户使用功能，而不是给用户一个完全的空页面。

△ 【左】Hi，点击这里开始你的第一个任务。
【右】你有0个任务。以后再来吧。谢谢。

#26 选择退出替代选择进入

用户当然不可能主动去关注和尝试新功能。所以在尊重用户选择的情况下，把默认项设置成选择并没有大问题。

（Web不同于计算机软件，不会有装一大堆工具条这样的灾难后果，放心做吧……）

△ 【左】我想（默认）/不想订阅 【右】点击勾选才能订阅

#27 保持一致，不要让用户多次适应

每一个UI元素的外观变化，都意味着用户必须重新学习“这个东西是什么”。尽量避免。

#28 默认值智能一点

尽量让用户填写的东西少一些。猜不准没关系。

△ 【左】自动根据IP地址猜测了州和国家 【右】必须全都自己填

#29 尊重惯例，不要自己发明轮子

不要违背用户的已有认知，而让用户在你自己建立的一套系统内挣扎！

△ 右边：关闭按钮放在左下角是个毛线？！

#30 宣传减损，代替宣传增收

用户总是更关注失去已有资源的恐慌，而不是锦上添花式可有可无的增加。

△ 【左】这个可以防止损失资源、财富、健康和朋友
【右】这个可以获得更多资源、财富、健康和朋友

上一期链接：《简洁明了的优秀UI设计原则（3）》

今天继续分享Good UI用户界面设计原则的第31-40条。

#31 视觉必须体现层次

没有样式的内容，用户无法区分层次，也无法决定阅读顺序。右图那样一路看下来已经算好的了——多数用户碰到这种排版可是会直接走人的！

#32 分组相似的内容

常识。

△ 【左】菜单：打开 保存 建立副本 删除。工作区控制：放大 缩小。
【右】菜单：保存 缩小。工作区控制：放大 建立副本。 散在外边：打开 删除…… （这个有点搞笑了）

#33 表单内直接验证，替代传统的提交后返回错误

AJAX时代的新常识。不要忘记就可以。

当然也需要注意：传统的验证方法仍然要作为保底方案设计出来。绝对禁止因为前台有了AJAX后台就不验证。

△ 【左】好的表单 – 直接显示“这个选项是必填的”
【右】不那么完美的表单 – 提交后才显示缺少部分项

#34 宽容各种格式的用户输入！

在不引起二义性的前提下，程序员有责任尽可能多的接受各种格式的用户输入。例如信用卡号码、电话号码等数据，就应当自动接受并过滤括号、空格、减号、句点、逗号这些合理的分隔符。

宽进严出是程序设计的一个重要原则。对用户的输入要尽可能的宽容，但对数据的显示和输出（包括对用户输入数据的回显）必须格式严格。这个原则也同样适用于Web程序设计。

△ 几个电话号码中包含了空格、括号、减号、加号
【左】完美的表单 – 统统接受
【右】差强人意的表单 – 只接受带空格的
（不错了……国内多少表单连空格都不让加……程序员的懒惰、无知和自大气死人！）

#35 强调紧迫性

明日复明日，明日何其多。我生待明日，万事成蹉跎。不给用户设定时间期限，用户就永远没有行动的动力。该催促就催促。

用户都害怕失去机会，这是个应当合理利用的心理。只是不要欺骗用户——用户发现得了。

△ 【左】还有2天结束 ——　立刻行动
【右】总之行动吧，时间不要紧，今天、明天，反正拖到最后就不做了

#36 强调稀缺性

用户往往认为稀缺的东西更有价值，在面对稀缺资源时也更害怕错过。

用户都害怕失去机会，这是个应当合理利用的心理。只是必须再次强调：不要欺骗用户——用户发现得了。

△ 【左】最好的网络课程 – 仅余 2 席。 【右】最好的网络课程。

#37 给用户提示，不要让用户凭空回忆

做过调查问卷的都知道，右图那样一个<textarea>要求用户反馈的问题，如果是可选问题那么几乎没人写，如果是必填问题那么所有人都对付。

给用户一些提示去选择，明显比让用户自己从0开始回忆更友善。

△ 【左】请告诉我们您最喜欢的电影 – 这里是最近您看过的一些影片，供您选择。
【右】请告诉我们您最喜欢的电影 – 努力回忆一下吧！你能想起来的！加油！

#38 可点击元素做大点儿

小不点的按钮和导航条文字，那已经是上世纪90年代的网页样式了。

尤其是现在的移动时代，小按钮在手机上几乎没法点。请千万做大一点。

#39 页面加载做快点儿

几秒钟加载不出来，用户就流失百分之多少，这都是老生常谈的调查结论了。

请合理选择机房，并正确使用CDN、缓存等手段。生产环境的网站很大程度上都忌讳所有内容往主服务器上一堆完事。

#40 提供必要的快捷键

例如GMail使用j和k切换上一封/下一封邮件。对开发者群体会尤其受欢迎。

转自：http://segmentfault.com

转载请注明：jinglingshu的博客 » 简洁明了的优秀UI设计原则