UI设计的五个基本原则

关于UI设计，在招聘网站上经常会看到很多公司把它和美工联系起来，就像移动互联网兴起之前的网页设计、网页美工一样。但当你通过本文了解了UI设计的五个重要原则之后，可能会发现，并非只是作图那么简单，严格来说UI设计更多偏向的是技术层面。

原则一：清晰的传达

大概没有什么会比一个令用户常常感到模棱两可的界面设计更糟糕的了。

比如，有一种返回设计，当切换到该页面时，返回按钮是一个x，按通常的理解，我认为是关闭的意思。但当我需要返回上一页时，可能我会习惯性地去左上角寻找那个向左的箭头按钮，然而留给我的只有那个关闭按钮。此时我会犹豫，如果点击关闭按钮，会出现什么状况？我不得不去揣测设计师的意图，是不是应该将当前界面理解为从上一个页面打开的子视图？类似Popup的意思，所以我关闭该视图，即重新显示原本的界面了？

我并不是说返回设计不能这么做，而是作为UI设计师需要在这么做之前就去考虑到可能带给用户的顾虑，因此你需要更加全面的思考，令你的设计意图能清晰无误地传达给用户。

原则二：明确并传递信息的反馈

当用户操作了某个动作之后，他需要知道自己做了什么，操作是否已经执行等等。最简单的例子，当用户发表评论时，点击提交按钮后，随即按钮状态发生变化，比如颜色变深，则用户此时知道已经按下按钮。松开鼠标键或手指后，按钮样式恢复，告诉用户已经松开按钮。注意，此时即是需要反馈设计的时候了，用户需要知道该评论是否已经提交，大多数的做法是Loading Button的样式，按钮本身变为不可点击状态，并在按钮内部或外部相关区域显示Loading信息，表明评论正在提交中，此后则显示提交是否成功的信息。

  

你可以试着将以上反馈设计去掉，会出现什么情况？用户点击后无任何反馈信息的情况下，会误认为操作没有成功，从而反复尝试，如果程序上没有做任何条件限制，很可能造成重复提交。

这只是很常见的一个例子，实际上反馈设计遍布整个App的各个角落，每个细节都不容忽视。

原则三：保持整体设计的一致性

设计原则要贯穿整个产品，这包括视觉、交互等不同方面。从交互层面上来说，表现为页面切换方式、导航设计的一致性。视觉上，是指色彩、字体、图标等元素的一致性。没有任何一个用户在使用一款产品时，发现所在新页面的导航居然变了，或者整体风格都变了，从而陷入懵逼状态。

如果你不希望你的网站或App看起来像是几个不同产品拼凑出来的话，那么你需要做一个风格指南（style-guide)。在Behance, Dribble或中国的站酷上，很多作品展示中都会看到如下所示的风格指南。

原则四：当犹豫不决时，使用公认设计方案

创新设计是好事，但请别反人类。我见过撸UI不久的朋友，满怀创新激情地将一个本该保持统一的App菜单按钮，在不同页面换了4个地方，并幻想出非常炫的展开效果，然后陷入到了一个问题中犹豫不决：在下一个新的页面中，菜单按钮放在哪会比较合适？

这样的创新就好比是一个圆形车轮明明已经可以很好的工作，却要创新搞成六角形车轮，从而又衍生出另一个大麻烦：“转起来，总是咯噔咯噔的，怎么解决？”。

靠谱的创新是在已验证的公认设计方案基础上，作出更好的改进，而不是制造新的麻烦。所以，在UI设计中，第四基本原则就是遵循公认设计方案，符合用户已养成的交互习惯。

示例如下，对比京东和中国亚马逊两个网站的搜索框位置，都在顶部区域的首要位置。这样的设计一定是基于用户搜索习惯的分析数据不断改进验证而来，所以你大可不必在设计上逆其道而为之，相反，进一步增强才更重要。

原则五：增强视觉层次

视觉层次（Visual Hierarchy），是我曾最初做国外项目设计时，听到同行提及最多的词。相反，如果他们形容一个作品非常单调时，会用Plain。

那么什么是视觉层次？首先要强调一下信息可视化的概念。UI始终需要向用户传递信息，那么这些信息需要通过各种设计元素、文字段落、图片等表达出来，而他们的布局方式则决定了所关联的信息的重要层次，即通过视觉表达信息层次化。通过下面的示例，你可以很清楚看出哪种设计更能突出需要强调的信息。

所以你必须根据产品的业务需求，来确定信息本身的重要层级，要知道哪些信息是需要强调的，那些是辅助的。在具体设计当中，可以使用字体和字体大小区分、色彩差、留白。具体设计技巧今后详聊，这里只作简单概括。

感谢你的阅读，如果有任何需要改进或者产生歧义的地方，请不吝赐教。希望能够通过交流，互相得到提高。