UI设计

UI即UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。 ?

目录 UI是什么

UI设计师是做什么的

1. 研究界面

2. 研究人与界面的关系

UI设计作品

UI设计在中国的现状

UI设计原则

UI设计的流程

1. 确认目标用户

2. 采集目标用户的习惯交互方式

3. 提示和引导用户

4. 一致性原则

5. 可用性原则

UI设计方向

1. 用户研究

2. 交互设计

3. 界面设计

ui设计就业前景

UI是什么

UI设计师是做什么的

1. 研究界面

2. 研究人与界面的关系

UI设计作品

UI设计在中国的现状

UI设计原则

UI设计的流程

1. 确认目标用户

2. 采集目标用户的习惯交互方式

3. 提示和引导用户

4. 一致性原则

5. 可用性原则

UI设计方向

1. 用户研究

2. 交互设计

3. 界面设计

ui设计就业前景

UI是什么

软件设计可分为两个部分：编码设计与UI设计。编码设计大家都很熟悉，但是UI设计还是一个很陌生的概念，即

UI设计欣赏(4张)

使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和Interface的缩写。从字面上看是用户与界面2个部分组成，但实际上还包括用户与界面之间的交互关系。

在飞速发展的电子产品中，界面设计工作一点点的被重视起来。做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

UI设计师是做什么的

在中国，UI设计还是一个需要不断成长的设计领域，但eicodesign，BrandseerUI，Tigocn，lkkuidesign,,Rigodesign等国内知名设计机构已经进入了探索UI设计的道路。 UI设计从工作内容上来说分为3个方向。它主要是由UI研究的3个因素决定的，其分别是研究工具，研究人与界面的关系，研究人。

研究界面

图形设计师GraphicUIdesigner

国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。

这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。

研究人与界面的关系

交互设计师interactiondesigner

在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。 交互设计师一般都是软件工程师背景居多。

UI设计作品

对UI设计来说，手机系统和appui[1]是在交互规则、功能诉求、关注要点等方面有诸多差异的两种设计方向。不过设计在于灵感，灵感在于发现，就让我们通过FaceUI的作品看一下App是如何从系统UI中发现设计灵感的。

研究人

用户测试/研究工程师Userexperienceengineer

任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。 用户研究工程师一般是心理学人文学背景比较合适。

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

UI设计在中国的现状

UI设计软件登陆界面(5张)

目前在国内UI还是一个相对陌生的词。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。我们以物质产品手机行业为例，当手机刚刚进入市场的时候不但价格贵的惊人，而且除了通话以外没有什么其他功能。由于当时的主导是技术，所以大家都把精力放在信号、待机时间、寿命等方面，对于产品的造型，使用的合理性很少关心。事过境迁，如今技术已经完全的达到用户的需求，于是商家为了创造卖点，提高竞争力，非常重视产品的外观设计，除此之外还频频推出短信,彩屏，和弦，彩信,摄像头等等。这样一来产品的美观、个性、易用、易学、人性化等等都成了产品的卖点。软件产品与物质产品的发展是相同的。过去由于计算机硬件的限制，编码设计成为软件开发的代名词，美观亲和的图形化界面与合理易用的交互方式都没有得到充分的重视，实际上这个时期的软件叫作软件程序，而不是软件产品。

现今随着计算机硬件的飞速发展，过去的软件程序已经不能适应用户的要求。软件产品在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。幸运的是在国内一些高瞻远瞩的民族企业已经开始意识到UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。联想软件的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，推出的双模式电脑、幸福系列等成功UI范例，为联想赢得全球消费PC第三的称号等等、等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。其投入产出比，要比在功能领先性开发上的投入大得多。

我们不得不承认现阶段中国在很多领域都与西方发达国家有相当大的差距，如何赶上并超过他们是我们这代人肩负的历史使命。软件产品领域不象物质产品那样存在工艺、材料上的限制，软件产品核心问题就是人。提高软件UI设计师个人能力减小

人员上的差距是中国UI发展首要关键的问题。

目前国内各院校还没有设立相对健全的UI设计专业，所以提高UI设计师能力关键在于提供一个良好的学习与交流的资源环境。国内已经有很多交流设计网站，介绍工业设计、平面设计、服装设计、绘画艺术、多媒体flash等，但是UI设计一直没有受到应有的关注，仅仅被放在数码设计或者平面网页设计的一个栏目里，这仅有的资源对培养优秀的设计师是不够的，必须有一个信息快捷、资源丰富、设计水平一流、专业权威的UI设计学习与交流的地方才能适应日益发展的UI设计师们的需求。 UI设计原则

1.简易性

界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。

UI设计图片

2.用户语言

界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。

3.记忆负担最小化

人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。

4.一致性

是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与游戏内容相一致。

5.清楚

在视觉效果上便于理解和使用。

6.用户的熟悉程度

用户可通过已掌握的知识来使用界面，但不应超出一般常识。

7.从用户习惯考虑

想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。

通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计。如：书籍对比竹

简。

8.排列

一个有序的界面能让用户轻松的使用。

9.安全性

用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。

10.灵活性

简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄、界面)。

11.人性化

高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。

UI设计的流程

确认目标用户

在UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。

用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

例如：对于科学用户和对于电脑入门用户的设计重点就不同。

采集目标用户的习惯交互方式

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。

提示和引导用户

软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。

对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

一致性原则

设计目标一致

软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。

例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。

元素外观一致

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

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

例如：所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。 对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。

可用性原则

可理解

软件要为用户使用，用户必须可以理解软件各元素对应的功能。

如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。

比如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

可达到

用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用

户控制。

用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。

要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。

可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则）

可控制

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

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

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

UI设计方向

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

用户研究

用户研究包含两个方面：一是可用性工程学（usabilityEngineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法。

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

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

他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准。

交互设计

这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使

电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。

界面设计

在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。[2]

ui设计就业前景

目前，UI即用户界面设计行业刚刚在全球软件业兴起，属于高新技术设计产业，与国外在同步发展水平。其次国内外众多大型IT企业(例如：百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的UI设计部门，但专业人才稀缺，人才资源争夺激烈。但目前全国UI设计专业的系统教学极其稀少。UI设计学院作为首家UI设计师的培训基地为国内外知名品牌企业提供优秀的专业设计人才。就业市场供不应求。

UI设计工作的年薪基本保持在10到15万，少有经验者可以达到20万，资深的UI设计人员年薪可以更高。[3]

词条图册更多图册

UI设计欣赏(4张)

UI

设计软件登陆界面(5张)

第二篇：用户体验设计之颜色与UI

用户体验设计之颜色与UI

关于作者

作者：Tobias Komischke

Tobias Komischke博士已在用户体验领域工作超过10年。他是技术刊物、会议的评论家，发表论文超过30篇。在Infragistics，他负责用户体验的内（开发）、外（培训与咨询）工作。

序

顾名思义，GUIs（Graphical User Interfaces，图形化用户界面）从视觉上展现了它们的特性与功能。

人机交互在很大程度上是依赖于可视界面，寻找某个事物，并与图形化UI元素进行交互。颜色是任何视觉画面的主要特征，这并不仅限于计算机屏幕，而是任何我们所看到的事物。因为在我们日常生活中，大多数所看到并进行交互的事物都是有颜色的——或许是看到的太多了，我们已对这点习以为常了。反过来说，如果你需要去阅读一个黑色按钮上的深灰色标签，那将是非常痛苦的。所以，颜色会潜移默化的增强或削弱用户体验。

本文将对用户体验的概念加以介绍，并着重探讨在UI设计中所推荐的颜色以及颜色感知等内容。

1. 用户体验

用户体验（User Experience，简称UX）是一个关于用户（users）以及交互（interactive）技术系统领域的整体概念。具体来说，它代表了一个网站或者应用程序对其用户的可用性（usability）以及吸引程度。可用性高意味着交互产品能够让用户快速的实现他的目标。ISO 9241-110[1]以及Nielsen的研究[2]是这个领域中的“圣经”。

吸引力是指用户以及他所交互系统之间的情感。用户喜欢它吗？讨厌它吗？他们认为它是吸引人的、时尚的，还是为之着迷的？在交互的过程中，他们会为之引以为豪吗？尽管吸引力并不能像可用性那样明确的对其进行定义，但是它对于一个产品的成功仍然至关重要，因为有吸引力的系统会让人使用起来更愉快，更加合其所意，这都会增添产品的价值。

2. 颜色与UI

颜色是360nm至720nm之间的光波刺激人类的眼睛并由视觉系统[3]进行处理后所触发的感知。我们的眼睛拥有三种类型的颜色接收器，分别用于处理长波、中波、短波。它们分别被称为L-、M-和S-cones（译者注：cones是人眼的圆锥细胞）。如图1所示，一束530nm的光波会触发最多的M- cones，其次是L-cones，只会触发很少的S-cones。这条光束最后被感知到的颜色即为绿色。

图1：三种cone类型的光波被感知到的颜色（[4]）。

计算机屏幕中的颜色是由RGB颜色模型（R代表红色，G代表绿色，B代表蓝色）所定义的。这三种颜色被称为（三）原色（primary colors），分别对应L-、M-和S-cone中最易接收的光波。三原色不能由其他颜色混合而生成。相反，通过混合三原色，可以生成其他所有的颜色。屏幕上的每一个像素都是由一束红光、蓝光和绿光相互作用而生成的，它们挨的非常近，是无法分辨出来的。

3. 颜色对比度

通常情况下，UI中的有色对象或区域并不是孤立存在的，都会与其他的对象或区域比邻或者重叠。这就产生了对比效果。没有足够的对比，我们是不能在屏幕上分辨出不同的区域的。这也正是办公软件例如微软的Word、Powerpoint、Excel、Outlook为什么都会默认设置成白底黑字的原因了—— 因为它会产生最强的对比度，以及最佳的可视度。

除此之外，颜色对比度通常被用于把浏览者的注意力引向某些传递关键信息或者需要输入的重要UI元素。

颜色对比度也会提高UI的视觉吸引力。实验研究显示，暖色调（比如红、黄、橙）非常适合作为冷色调（比如蓝、绿、紫）的背景，反之亦然。

对比效果同样会对用户体验产生不利的影响。下面讲的两个例子是比较有代表性的。通常情况下，任何视觉区域都会趋于临域的补色。比如，一个灰色的方框，如果周围是红色，那它看起来就会发绿，如果周围是绿色，看起来就会发红。这种情况被称为同时对比（simultaneous color contrast）【4】。在UI中，通常是一个控件，比如一个按钮，在不同的背景色下会产生完全不同的视觉效果。

另外一种对比度产生的问题是色差（chromatic aberration）【5】。透镜（包括我们眼睛中的水晶体）会对不同的光波产生不同程度的折射。这种情况是因为不同的光源投射到视网膜中不同的地方所引起的，比较明显的情况是紫色与红色的组合，还有蓝色与红色的组合（如图2），因为紫色与蓝色的光波位于光谱的一端，而红色位于另一端（如图1）。

图2：色差

因此，图2中的文字看起来与背景相比，显得有些模糊。所以，在UI中应当避免红色和紫色/蓝色的对比。尽管如此，红-蓝组合仍然比比皆是，或许是因为UI 设计者为了考虑色觉障碍（color deficiency，下有详述）的问题而避免采用红-绿组合的替代选择。图3展示了生成良好对比度的不同前-背景色组合。

图3：良好对比度的不同前-背景色组合

4. 色觉障碍

当人们谈论色盲（color blindness）的时候，通常是指对接收某种特定颜色存在障碍。而这种情况更准确的说，应为色觉障碍（color deficiencies），因为大多数情况下，人们并不是完全不能接收某种颜色，只是他们的感知会有所误差【3】。色觉障碍是由视锥细胞类型（cone type）的缺失或工作异常所导致。表1列出了由L-、M-、和S-cone所引起色觉障碍患者的比例。8%的男性以及0.4%的女性都存在不同程度的色觉障碍。因为L-和M-cone的弧度非常接近（见图1），所以由L-和M-cone引起的色觉障碍症状非常相似。当L-和M-cone存在问题时，颜色的呈现则大多都是基于蓝、黄两个色调，由此导致不能正确的接收值得推荐的红-绿配色。

表1：色觉障碍与发生率

由S-cone引起的色觉误差会导致颜色的接收都是基于红、绿色调，而深受赞誉的蓝、黄配色则无法感知。但这是一种非常罕见的情况，只有0.004%的男性以及0.002%的女性会出现此类症状。还有一种非常罕见的情况——全色盲，这是由完全缺失视锥细胞所导致的：只有0.003%的男性以及0.002% 的女性看不见任何颜色，他们的视觉是非彩色的，完全基于黑、白、灰。

从表1可以看出，色觉障碍患者中最典型的一类人是无法接收红、绿两色的男性。非红

-绿色觉障碍的患者比例非常低。实际上，由闪烁的UI元素引起癫痫的比例都要比非红-绿色觉障碍的比例高出400倍。

问题是，色觉障碍的程度为产品的可用性带来了巨大的挑战。这会因为应用程序的类型差异而有所不同。在所有对颜色的使用有美学要求的地方（比如大多数公司的网站），它对色觉障碍的重要程度就远远低于某些表示状态的系统（比如控制系统和dashboards）。通常情况下，建议不要通过颜色来表明某些重要信息。比如，通过红光或绿光表明系统状态，这会给红-绿色觉障碍者会带来麻烦。所以，最好提供一些有意义的文本标识（“OK” vs. “警告”），或符号（“对号” vs. “感叹号”）代替有色码。

5. 颜色与视觉感染力

颜色非常适合增强软件产品的视觉感染力。我们通常会赋予某些颜色以特定的涵义（表

2）。这些对颜色的观念在设计UI的时候往往起到非常大的作用。举个例子，一个基于白色的诊所软体应用程序是非常合情合理的，因为白色象征着“整洁”。再比如，联合国的主页是基于蓝色的，传达了一种“和平”的理念。

表2：西方的颜色感知

应当注意的是，表2中所列的这些对颜色的感知都起源于西方的文化。因为颜色观念是与文化密切相关的，他们在不同的区域会表示截然不同的涵义。比如红色，在埃及象征着“死亡”，而在印度却代表“生命”与“创新”，在中国则是代表“幸福”【9】。

有感染力的UI是由一组协调、相关的颜色所构成。创建配色方案（color scheme）也是一个技巧，而且是非常重要的，因为需要考虑很多因素，包括所要传达的公司品牌价值、强调的颜色感知（见表2），此外，还要考虑人类个体的问题（比如之前提到的对比度）。 无需图像设计师的帮助，有很多种方法可以用来创建简单的配色方案【10】。举个例子，

你可以在12色环（color wheel）中任选3个相邻的颜色（analogous color——相似色，见图4）。或者选择完全相对的两个颜色（conplementary color——互补色）。不要忘记，红色与蓝色对红-绿色觉障碍者可不是很友好（详见前文“色觉障碍”）。

图4：基于相似色的配色方案