用户界面设计

软件界面设计

用户界面设计（User Interface Design，简称UI设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。

概念定义

UI其实是一个广义的概念，《现代汉语词典》将“界面”定义为：物体与物体之间的接触面，泛指人和物（人造物、工具、机器）互动过程中的界面（接口）。以车为例，方向盘、仪表盘、中控都属于用户界面。从字面上看由用户与界面两个部分组成，但实际上还包括用户与界面之间的交互关系，所以可分为三个方向，用户研究、交互设计、界面设计。

通常意义上，UI是User Interface的缩写。其中，“Interface”前缀“Inter”的意思是“在一起、交互”，而翻译成中文“界面”之后， “交互”的概念没能得到体现。

通过以下三个层面来理解UI的概念。

首先，UI是指人与信息交互的媒介，它是信息产品的功能载体和典型特征。UI作为系统的可用形式而存在，比如以视觉为主体的界面，强调的是视觉元素的组织和呈现。这是物理表现层的设计，每一款产品或者交互形式都以这种形态出现，包括图形、图标( Icon)、色彩、文字设计等，用户通过它们使用系统。在这一层面，UI可以理解为User Interface，即用户界面，这是UI作为人机交互的基础层面。

其次，UI是指信息的采集与反馈、输入与输出，这是基于界面而产生的人与产品之间的交互行为。在这一层面，Ul以理解为User Interaction，即用户交互，这是界面产生和存在的意义所在。人与非物质产品的交互更多依赖于程序的无形运作来实现，这种与界面匹配的内部运行机制，需要通过界面对功能的隐喻和引导来完成。因此，UI不仅要有精美的视觉表现，也要有方便快捷的操作，以符合用户的认知和行为习惯。

最后，UI的高级形态可以理解为User Invisible。对用户而言，在这一层面UI是“不可见的”，这并非是指视觉上的不可见，而是让用户在界面之下与系统自然地交互，沉浸在他们喜欢的内容和操作中，忘记了界面的存在（糟糕的设计则迫使用户注意界面，而非内容）。这需要更多地研究用户心理和用户行为，从用户的角度来进行界面结构、行为、视觉等层面的设计。大数据的背景下，在信息空间中，交互会变得更加自由、自然并无处不在，科学技术、设计理念及多通道界面的发展，直至普适计算界面的出现，用户体验到的交互是下意识甚至是无意识的。

综上所述UI设计师就是：软件图形设计师、交互设计师、用户研究工程师。

设计流程

确认目标用户

在UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。例如：对于科学用户和对于电脑入门用户的设计重点就不同。通过确认不同的目标用户从而设计不同的UI界面，使得用户体验更好。

采集目标用户习惯

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。UI设计是为了迎合用户习惯，而不是强迫用户更改已有的习惯。采集获得目标用户的习惯有可能有比较大的差异，这时需要在用户习惯中取舍并作平衡以期望满足用户习惯的“最大公约数”。

提示和引导

软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

提示和引导能使得用户获得信息更加简单，提升用户的使用体验。信息传达的方式各式各样, 在UI界面设计中, 常见的信息传达要素有文字、图形图标、颜色、影像、语言、声音等。无论用哪种信息传达手段, 都应该将抽象的信息转换为直观、形象、准确的符号语言, 使用户能够按照符号线索搜寻或接收到所要了解的信息, 这个过程越简单容易、用户受到的挫败感越低, 获得信息的满足感就越强烈。

一致性原则

1.设计目标一致

软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。

2.元素外观一致

交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。

3.交互行为一致

在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。

例如：所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。

对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。

可用性原则

1.可理解

软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。比如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

2.可达到

用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。

3.可控制

软件的交互流程，用户可以控制。

功能的执行流程，用户可以控制。

如果确实无法提供控制，则用能为目标用户理解的方式提示用户。

设计方向

UI是用户界面，是英文User和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互设计、界面设计。

用户研究

用户研究包含两个方面：

一是可用性工程学（usability Engineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；

二是通过可用性工程学研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法。

用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。

用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。

交互设计

这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。

界面设计

在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。界面设计中必不可少的部分就是文字，文字是传达信息的载体。文字不仅起到了传递信息的作用，而且可以通过一定表现手法来呈现视觉艺术，在进行文字元素的设计时，不仅需要确定文字的色彩、字体、样式等基本属性，而且需要根据UI界面主题来明确文字大小、主次关系等，文字元素的设计效果将直接决定用户对整个UI界面的阅读效果。

设计规范

一致性原则：

坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。

Ø 字体颜色一致：避免一套主题出现多个字体；不可修改的字段，统一用灰色文字显示。

Ø 元素对齐方式一致：如无特殊情况应避免同一页面出现多种数据对齐方式。

Ø 可点击的按钮一致：可点击的按钮，外观设计应该遵循一致性

Ø 功能描述一致：避免同一功能描述使用多个词汇，如编辑和修改，新增和增加，删除和清除混用等。

准确性原则：使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源。

可读性原则：

Ø 文字长度：文字的长度，特别是在大块空白的设计中很重要，太长会导致眼睛疲惫，阅读困难。太短又经常会造成尴尬的断裂效果，断字的使用也会造成大量的复合词，这些断裂严重的影响了阅读的流畅性。

Ø 对齐方式：无论是在文本中心，还是偏左，或者是沿着一个文件的右侧对齐，文本的对齐相当重要，可以极大地影响可读性。一般而言，文本习惯向左对齐，因为它反映了从左至右的阅读方式。

Ø 布局合理化：在进行设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。

系统响应时间原则：

系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则：

Ø 2~5秒窗口显示处理信息提示，避免用户误认为没响应而重复操作；

Ø 5秒以上显示处理窗口，或显示进度条；

Ø 一个长时间的处理完成时应给予完成警告信息。

UI设计10条经验法则

针对像素密度设计而不是像素

在设计界面时，建议不要针对像素设计，而是要针对设备的像素密度进行设计。这样能确保设计元素在不同设备上的适配。

善用8 dp增量

为什么设计中要用8 dp这个增量规则？这里有一个简单的解释：我们使用8而不是5这个神奇数字的原因是，如果设备有1.5倍的分辨率，就很难被整除而出现锯齿。

此外，绝大多数的屏幕尺寸都可以被8整除，这就是使得设计在这些屏幕上适配变得很简单。

去掉线和边框

在做设计的时候，应该时不时地停下来看看，确定下设计出的容器是否会使得UI变得混乱。通常，用于分隔内容的框和线可以用留白代替。

关注对比度

合适的对比度不仅可以让用户看到页面上的相关信息，还可以提高产品的易用性。

设计一款产品类似于建造一个公共建筑，比如图书馆或学校，它需要包容所有人：盲人、色盲或视力受损的用户。

遵循用户习惯

如果设计出来的网站、APP软件功能和用户所习惯不太一样，那么它就是不直观的，用户就可能对这种体验感到失望。因此，最好是在现有的设计规范内进行创新，而不是去“重新发明轮子”。

用颜色深浅构建层次结构

这里的经验就是，如果一个元素比另一个元素更重要，那么它就应该具有更高的视觉权重。这能让用户很容易区分重要和不重要的信息，从而快速浏览页面。更大、更醒目的信息会首先吸引用户的眼球，然后才会看向它下面的次要信息。

避免使用超过2种字体

一个普遍接受的设计共识就是在同一张界面中使用的字体数量应该要有限制。一般来说，2种不同的字体就足够了。这不是说不能用更多的字体了，而是要有合理的理由，否则最好不使用。解决这个问题的方法是使用字体族。我们可以在设计中使用具有不同变体的相同字体，来自同一家族的字体可以一起使用，是灵活且一致的。在选择字体时，优先选择具有各种权重的字体，如，细体、标准体、中粗体、加粗体、超粗体、宽体、扩展体和斜体。这将给你更多的发挥空间，而不需要添加额外的字体

直接而不是让用户思考

直接是产品设计的一个很好策略，因为不应该让用户花费时间思考怎么使用。结账页面、电子邮件收件箱、搜索历史记录以及后退按钮等都是很好的例子。

别让用户慢下来

大量研究发现，界面动画的最佳速度是200～500 ms之间。这些数字是基于人类大脑的特殊品质。任何小于100 ms的动画都是即时的，根本不会被识别。而超过1 s的动画会给人一种延迟的感觉，会让用户觉得无聊。所以，如果在使用动画，一定要有目的。如果这些动画是有目的的，那么不要让我等待超过500 ms，惹恼你的用户只需要1 ms。

少即是多

每次想添加额外的信息到页面:按钮、文本、图像、动画和插图等，它都会与相关的信息竞争，如果页面上的内容太多，元素的重要性就会降低。一个完美的案例就是谷歌主页，而不是像Yahoo一样淹没访问者可能并不需要的信息里，它的设计仍然集中在核心任务上——搜索。

全国各地天气预报查询

上海市

云南省

云南省

云南省

云南省