UI vs. UX

如果你曾做过任何一点关于软件设计的调查，你很可能就听过UI和UX这个说法。但如果把两者剥离开呢？

简单来说，UX设计是保证界面的可用，而UI设计是保证界面的美观。UI囊括了视觉层级和界面元素。区别一个不错的界面与一个优秀的界面，必须要认识的一点是：UI设计仅仅是一整个设计过程中的一层。也许这就是为什么人们常常对UX和UI区分不清的地方。在接下来的文章中，我希望能帮助你作为一个读者去理解这两者在整个设计过程中的差别在哪。 

根据Garrett在《用户体验的元素》中的观点，UX可以从以下五个主要层面去理解。

首先我们看下最抽象的一层：策略——用户需求、产品目标

最开始的这一层是产品设计的起始点。在这个阶段，你会用各种不同的调研方法，如用户访谈、竞品分析、用户画像和别的调研技巧去解答以下问题：

1、你想要解决的问题是什么？

2、你的用户需要什么？

3、你的产品怎么跟商业环境相契合？ 

第二层：范围——功能规范、内容需求

在这个阶段，你应该定义出你自己平台上的功能规范、内容需求。换言之：

1、你要怎样通过你的平台去解决问题？主要特性是什么？你又是怎么对这些特性进行优先级排序的？

这里对设计师的挑战是，用最少的权衡让步来制定优先级。当然，你也许有上百种解决一个问题的方案，但是你只能选其一来执行。 

第三层：结构——信息架构、用户流

在这个阶段，你的想法应该开始组成一个架构。信息架构是一个app里信息组织的方式，以及用户持续认知信息的方式。用户流展示了用户在app内解决他们具体问题的具体路径。这是对你满足你用户需求最客观的步骤。 

下一层开始，事物变得不再那么抽象：骨架——界面设计、信息设计

骨架层试图实现界面设计和信息设计的结构。界面设计是合理安排界面上的元素，以让用户与一个系统内的功能相交互。而信息设计是以某种形式展示信息以帮助用户去理解。

在这个阶段，你也许会看到UX或产品设计师们在线框图上设计、测试和交互。线框图是非常低精度的，通常只是用一些灰白的模版来论证每个界面元素的意图。 

最后，最具体的一层来了：表层——感知体验和视觉设计

表层，就像它的名字所暗示的，是为优秀感知体验和视觉设计而努力的。这个阶段，设计师的目标是与用户建立一个内在的联系，通过一个统一的图像成功地传达品牌、产品、价值观和功能。

这个阶段你会发现UI设计师和视觉设计师通过使用：ketch, Photoshop, Adobe Experience Design, Illustrator, 或Figma完成大量的设计工作。

接下来，让我们进入一些UI设计基本原则的讨论中吧。 

原则1：清晰性优先

在一个app里面，没有比含糊不清更糟糕的事情了。『这个按钮式干嘛得？』『我怎么才能完成这个操作？』『我怎么返回？』为了避免这些糟糕的体验，一个设计师应该常常问自己：

『这里为什么要存在这个东西？这样又意义吗？我还能探索出一些别的可能性吗？』

优秀的设计师知道怎么样探索一个界面上各种可能性，也清楚知道如何平衡各种关系以及如何设计能让用户最好的完成他们的目标。在设计中保持清醒、明确，可以让用户更自如、自信地使用你的app。 

原则2：提供明白、有意义的反馈

我们都曾通过点击按钮来使用一个网站或是一个app，我们会好奇我们的操作是否有被记录。

简单说，每个操作都需要一个反馈。如果你是一个网站开发者，改变一个按钮的hover态是一个让用户了解他们的hover操作最常见的方式。

一个很好的例子就是Facebook用他们的信息框架图作为加载的默认状态。当用户等待信息加载的时候，一个有形的内容加载状态能提供有意义且相关的信息给到用户，让他们知道自己的内容正在加载中。 

原则3：延续性/统一性

当我谈到延续性，我其实是指贯穿整个产品的界面元素和设计语言的摆放。一旦你的用户开始学习怎么使用一个产品，他们不应该每次都重复学习它。让我们看下在延续性做得较差的产品设计是怎么样的： 

Xfinity的首页

Xfinity的TV页

Xfinity的个人页

以上的例子也许看起来像3个来自不同公司的网页，而实际上它们却是同一个体系下的东西。为什么让人会误以为此？因为每个页面的导航栏都用了不同体系的颜色、排版和字体样式。对用户来说，这些都会造成不同程度的误导和困惑，导致他们已然忘记这些页面其实都位于同一个网站内。

作为一个设计师，你怎样能在你的app内保持延续性？你可以通过用一个统一的网格系统来设计你的app, 比如在移动app和icon设计中最常见的8像素网格设计法。你同样可以通过一个连贯的配色方案和导航元素来保持延续性和统一性。所有这些元素都可以来自一个样式指南中：

来源：https://dribbble.com/shots/1817828-Style-Guide

原则4：当设计存疑，使用已有的设计模式

这里倒是别搞错了——创新很赞而且很值得推崇，但是这不应该是建立在牺牲用户体验之上的事情。当一个轮子能完美胜任自己的职责的时候，没有必要重新发明一个轮子。例如，如果你曾质疑一个icon是否能准确而直接地诠释出一个词的时候，那就用一个词来表示吧。或是遵循传统的颜色模式，比如红色对于用户来说是警告或提醒，绿色表示某件事情已完成。

为什么使用已有的设计模式？其中的解释就是，很多这些已经建立起来的设计原则已经根植于人们的认知之中。让我们看下当人们阅读一段内容时候的F型的阅读模式或眼动模式： 

F型的阅读模式

这是根据眼部追踪实验得出的热力图。红色区域表示视线对多的区域，而蓝色则表示最少。如你所见，热力图在某种程度上跟字符F很像。这对于设计师来说意味着什么？

这意味着你应该把最重要的信息放在左上角。

比如，你会经常发现logo被放置在左上角。这可以让公司不断增加在用户心中的品牌认知。在右上角，你发现这里一般会放置页面的导航或搜索栏。这让用户在各页面之前跳转变得更简单，不需要在每次切换的时候查看一整个页面。以下两个例子都是遵循这样的设计模式的： 

越往页面下方走，用户的注意力消散得越快。因此，把最重要的内容放置在顶部，醒目的分割会让你的内容更易于扫描。

原则5：善用视觉层次

什么是视觉层次？那就是页面元素以某种方式排列以达到页面内容的主次区分。设计师就是这样引导眼睛接受呈现信息的优先次序。

来源：https://dribbble.com/shots/1315388-Dashboard-Web-App-Product-UI-Design-Job-Summary

我们接收信息的方式是受多个因素影响的，这些因素让我们对一个排版的内容优先级进行排序。让我们看下一些基本层次：

I. 排版

怎么样算是一个好的排版？最主要的两个因素是：清晰性与可读性。

清晰性是一个字体的固有属性，它使每个独立的字体都相互区分。在字体中，这是完全独立的，因此你没办法让一个字体变得更清晰，所以选择一个最合适的字体即可。

可读性是取决于你怎样组合一个特定的字体，而让整个内容变得更易于理解。 

注意一下上面的排版为什么比下面的排版更难阅读？如果没发现……

看看这个例子？

另一个决定内容是否好阅读的因素是行长。如果行长太短，用户就不得不老师从一行跳到另一样，这样很难让读者去理解信息。同理，如果行长太长，则眼睛也会很快感到倦怠。

另外，千万不要对太大段内容进行居中排版。对于阅读来说，左对齐会更适宜，因为我们的眼睛能清楚知道下一行从哪开始。

II.留白（又名负空间）

有没有人曾经看着一个菜单/网站/界面，然后想：『这个看着都好舒服，但是又说不出为什么？』那么现在你知道了。答案就是留白。留白可以极大地提高可读性和可理解性。一个研究（Lin,2004）发现，留白在段落和左右边距上的巧妙运用可以有效提高差不多20%的可理解性。

正形是狗，负形是猫

很多人认为凭『品位』决定留白。我想事实可能比这更客观一些。我们可以有意地用留白去建立一个很强的层次感。我们看下Helen Tran的网站，学习下她是如何有意地使用留白的： 

来源： https://dribbble.com/shots/2047524-V5-0-Website-Redesign

超美的个人页，让我们看得更仔细点：

注意这里有4个很明确的信息区。让我们更深入地拆分一下它们：

Helen综合运用了行高、字号、颜色和留白去分隔在每个内容区里的内容。这让用户很自然的沿着这样的划分是看每个内容区域。 

III.色彩

色彩的理论真的是非常非常复杂。我的目标不是去解释色彩理论的全部，而是给你提供一点小的思路去尽快提升你的设计水平。

如果你盯着上面两张图，你会发现左边的蓝色方块看起来离得比较远，而右边的红色方块看着离得更近一些。暖色离你近，而冷色则消失进背景中。让我们看一个UI案例： 

来源：Dribbble

在上面的设计中，我们可以看到设计师是怎么用暖红色去使需要操作的（Update Now）提前，而用蓝色使导航栏弱化进背景里。同样的情况也运用在了左边的插画里。红色的闪电标志立刻通过红色跳脱出整个界面来。

你同样可以使用颜色把页面相似的元素分类在一起： 

来源：Dribbble

最后，少即是多。

页面内颜色越多，单个颜色产生的效果越小。一个很好的示例就是Instagram最近的redesign：

颜色的减少不仅仅是让图片更醒目，同时也让提醒的作用更明显，因为它们不再需要跟顶部和底部按钮的颜色相争奇斗艳。

__________________________________________________________________________

◆ 英文原文由Jeff Wang发布在Medium上。

◆ 本文为原创译文（译者：Laic），仅代表原作者观点，欢迎大家对文章进行讨论。

◆ 如需转载请注明来源

◆ 欢迎关注公众号：SailorMoon