【干货】UI设计的30条黄金准则（一）| 南京UI设计培训分享

　　Anyway，好的UI界面有几个特征：简洁、便利、目标明确、人性化。字面上看这几点貌似很简单，但是考虑到我们的营销目标、考虑到内容复杂度，要确确实实达到这个目标却非常困难。下面南京万和UI设计培训列出的这些经验，简单实用、极具操作性，希望大家能从中有所收获！

　　1. 尝试使用一列布局代替多列布局

　　单列布局可以让你更好地掌控你的内容。

　　单列布局可以引导你的读者很自然地从上至下浏览内容，而这个浏览顺序对内容排版的重要性再怎么强调也不过分，可以说所有UI设计都是为了引导用户的浏览和交互。而相反的，多列布局会分散用户的注意力，使得用户无法聚焦在你的内容主旨上。最好的做法是以一个叙事的方式来引导用户，并在文末亮出你的中心主旨以作强调。可能你会觉得两侧的留白很是浪费，但是请你记住：少即是多！

　　2.合并重复的功能

　　尝试合并重复的功能，而不是让各种重复的功能割裂你的界面。

　　在开发编辑阶段，我们总是有意无意地创建很多具有重复功能的模块。当你审视你的界面，发现很多具有重复功能的模块时，这表明你的设计有些过度了。过度的设计不仅降低了应用的性能，还会徒增用户的学习成本。而这与UI设计的黄金原则：“用户是傻瓜”格格不入！好好审视你的界面吧，等你把你的界面删上3~5遍的时候，简洁好用的界面自然就出来了。

　　记住，删除比创造更重要！

　　3. 重复你的主旨

　　要让人记住一样东西的唯一办法就是重复重复再重复。

　　你可能不喜欢《最炫民族风》，但它却深深地刻在你的脑海里，这就是重复的力量，虽然这是楼下大妈硬塞给你的。回到UI设计上也一样，当然你绝对不想在一个视窗里面重复10遍你的主旨。一眼过去都是重复的东西，没有比这更糟糕的了。但是在边幅较长的页面或者多个页面里，这些重复就显得非常自然了。你完全可以在文章开头放入你的主旨，然后在文章末尾重复你的主旨，这种重复对用户来说是自然而便利的。

　　要让你的内容记到用户脑子里？南京万和UI设计培训建议大家擅用重复！

　　4.明确区分可点击/可选区域

　　使用颜色、层次、对比等方式来告诉用户：我在哪，我能到哪里。

　　为了明确地将这些信息传达给用户，界面中可点击的按钮和链接、可选的选项要与纯文本严格区分开来，而且要在页面中贯彻同样的风格。例如下面的例子，我选择使用蓝色来标记这些元素时可以被点击的，而黑色文字来标识不可点击或者指示当前位置，然后在整个页面中都贯彻这种做法。这样用户根本不用思考就知道他所处的位置，他不会尝试去点击黑色的文字，自然也不会有发现点击无效后的一脸懵逼。

　　记住：用户是傻瓜！你不要期望用户会去研究你那复杂的界面，他只会点击右上的关闭，并回赠你一句：SB。

　　5.直接给出你的推荐，而不是让用户选择

　　当展示多个选项的时候，直接给出你的重磅推荐是个更好的做法。

　　尽管你的推荐还是不能满足所有用户，但你要相信：大多数用户其实不知道他们想要什么。据我统计，90%的现代人都患有一种叫选择困难的不治之症，患者们最常用的一个词就是“随便”。另外，有些研究表明，可选项越多，最后选错的概率就越大！所以，使用强调来突出你的推荐吧，不要再让用户在无尽的选择中纠结了！

　　6.使用回撤代替确认选项

　　想象一下每点击一个按钮都弹出一个“请确认是否要xx”的弹窗有多恶心。

　　相比每个按钮下都隐藏着一个确认提示，回撤操作可以让操作更流畅顺滑，也更符合人性。而频繁的确认弹框来质问用户知不知道这个操作的后果，这简直是在赤裸裸地嘲讽用户的智商。况且，如果用户是错的，即使你弹窗100遍，他还是会错的。良好的设计应该是假设用户的操作是正确的，只有极少数情况才需要确认弹框来防止误操作。提供一个可回撤的按钮，已经足够应对绝大部分情况。

　　7.多用鲜明对比让界面易于区分

　　把你的主旨与周围的元素区分开来会得到更好的呈现效果。

　　在现在这种信息爆炸的时代，不要指望用户会乖乖地通读你的全文。为了迎合快餐式阅读，你必须要把你的重点“凸”出来。有各种各样的办法可以用来增强区分，你可以用明暗色调来区分，你也可以使用阴影和渐变等手段来丰富界面层次结构，你甚至可以在色相环上选择互补色（例如黄色与紫色）的方式来增强区分度，突出重点。通过各种加强手段，最后界面就可以将文章主旨和普通元素区分开来，一目了然。

　　南京万和UI设计培训提醒大家记住，重点是要突出的！

　　8.保持界面风格一致

　　保持界面风格一致已经是一个非常经典的原则了。

　　不同的界面元素会增加用户的学习成本，过多的元素种类会使得整个界面毫无章法可言。当我们按下一个按钮或者移动滑块的时候，我们会学习这个元素的外观和动作，当我们看到相同的元素时，我们会期待得到相同的结果。如果不能得到相同的结果，那我们就会重新学习这个元素，包括大小、形状、位置等。另外还有一个著名的论断：同一个页面中的颜色不要超过3种！其实说的也是同一回事。

　　但是，世事无绝对，按照我们上一条规则，界面中某一点的不一致会带来强烈的反差，这就可以起到很好的强调作用，但是你要记住，强调只能用在一点上，强调100点的后果是什么都强调不了！

　　9.减少表单

　　在移动端上，没有什么事情要比填一大堆表单更让人抓狂了。

　　人天生就讨厌各种重复性的体力劳动，你的每条表单其实都是在逼迫用户转身离开。即使最终用户填完了表单，在他心中你也早已经是负分了，你后续的服务再优秀也无法填补第一印象的坑。好好琢磨你的表单，把它删到不能再删的时候，再删两遍，这会让你的体验有一个明显的提升。

　　请记住另外一个黄金法则：用户很懒 !

　　10.暴露你的选项

　　直接提供你的选项而不是使用下拉菜单。

　　每一个下拉菜单，都需要用户的一次额外操作来获取内容，这显然与“用户很懒”相违背。选项不多的时候一定要把选项直接暴露出来，减少用户操作，而且内容也不会被一个个下拉菜单切割的支离破碎。这里的建议是下拉菜单只用在时间、日历这种约定俗成的地方，并要给出建议值！什么？你的选项很多，暴露出来太占地方？删删删！不重要的选项统统删掉。南京万和UI设计培训还是那句话：删除比创造更重要！

　　11.保持界面环环相扣而不是平铺直白

　　在wex5开发交流群中，大家讨论过一个有趣的问题，什么样的排版会让用户很快失去兴趣？回答最密集的答案是：大段大段的文字，尤其是对密集恐惧症患者而言，这样的界面令人不寒而栗。

　　据统计，大部分人都有一种看到大段文字就晕的病。滚动的长页面是不错，但是我们要适当将其分割成各种小节，将内容做成环环相扣的形式来保持对用户的吸引力，而且要警惕不要设置过大的空白，否则用户会因为可能误认为已到页面底部而流失。另一个方面，当你写出了大段文字的时候，就要警惕是否过于啰嗦了。除了界面的精简，内容的精简也是必不可少的。一个词能说明白的事，绝不要用一句话表达！

　　12.去掉多余的链接

　　为了满足各种用户需求，我们会在页面上放各种各样的链接。但你要注意的是，用户点击了其他链接之后就有可能不会回到当前页面了，假如你的目标是为了让用户点击最下面的主旨的话，这就有可能得不偿失了。而且页面中太多链接的话，也会将整体内容弄得支离破碎。

　　所以还是要控制链接的数量，少即是多。

　　13.将操作的状态呈现出来

　　让用户知道他干了什么。

　　现在大多数的界面都会将操作的状态呈现出来，比如说邮件信息是否已读、账单是否已经支付等，这些状态对于用户来说非常有必要。用户可以根据当前状态来决定后续操作，可以说状态已经是现代界面中必不可少的内容了。另外，状态操作中也有一些基本原则，比如说已操作过的呈灰色，未操作的成亮色，操作失败呈红色等。方案没有优劣之分，但一旦确定风格，就要严格执行。

　　14.保持操作上下文的连贯性

　　直接在元素上进行操作当然是最直观的，如果不能直接在元素上操作，也要保证操作上下文的连贯性。

　　比如有时候我们要对表格的数据进行操作，这个时候就操作上下文（重写，删除，插入等）就不应该放到表格外部，而应该放在当前行，采用鼠标点击或者悬浮触发显示。或者直接点击元素进行编辑，点击其他地方则保存，这种方式就更加符合人性了。当然，比如页面的前进后退这些普通的操作，就要遵守约定俗成的规则了。

　　15.展示全部内容而不要额外页面

　　当页面足够的时候，直接给出表单也是一个不错的做法。

　　相比点击之后弹出表单会节省一个点击操作，而且流程上也简化了。而且直接呈现表达也很直白地告诉用户，表单不多注册很简单，花不了多少时间。但是当表单比较多的情况下，就会让人模糊了当前主题，不适用这条规则。哦对了，你确定你一定要那么多表单吗？还是那句话，少即是多！

　　想和兴趣相投的朋友们一起交流吗？那就来江苏万和计算机培训中心吧。江苏万和作为专业的南京UI培训设计中心，还会定期邀请知名企业的高级UI/UE设计师，项目经理为学生做经验分享会，参与到国内各大UI设计圈沟通交流群，让更多的UI大咖成为你的人脉朋友。