浅谈用户界面设计
——（用户界面设计流程分析）
冯恒悦
引言：随着科技日益发展，电子数字产品已经深入地影响生活的各个方面和层面，科技应用带给人类愉悦体验的同时也催生了计算机学科中新兴科目—用户界面设计。用户界面设计是一个由复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面的设计包含用户与界面之间的交互关系，在人机交互过程中发挥着重要的作用。
根据用户界面设计流程可分为四个阶段，分别是：用户研究、结构设计、框架设计、视觉设计。如图所示：
一、 用户研究——用户需求和功能定位
首先通过用户需求分析、功能层次划分、整体功能规划等逐步建立系统结构。用户研究包含两方面：一是研究如何提高界面的可用性，使得系统的设计更容易被人使用、学习和记忆；二是发掘用户的潜在需求，为技术创新提供新思路。
(一) 提高界面可用性。通过对于用户的界面使用环境、使用习惯等方面的研究，使得在界面开发的前期能够把用户对于界面功能的期望、对外观设计方面的要求融入到系统开发过程中去。
(二) 明确基本目标，发掘潜在需求。带着“我们想要什么”、“用户想要什么的”的明确认识，并且弄清楚如何去满足所有这些战略的目标。当我们把用户需求和目标转变成应该提供给用户什么样的内容和功能时，系统架构就初步显现了，同时为满足用户潜在的需求，不断进行技术创新。
二、 结构设计——信息架构与交互设计
结构设计是界面设计的骨架。通过前期对用户研究和任务分析，制定出系统的整体架构。
(一) 信息架构。
使用全景的方式呈现信息架构能帮助开发人员更好的理解交互系统。它的基本设计思想是把整个系统划分为很多信息模块，然后把这些模块进行有机的组合。
在架构设计阶段，界面流程图发挥重要的作用。对于开发人员来说，界面流程图直观的呈现交互系统的总体概貌，模拟了信息架构的逻辑关系和相互作用，能帮助开发者宏观的把握系统预期的实际运作流程。
(二) 交互设计
交互设计的目的是让界面更易于理解和使用。具有良好交互设计的系统，能让用户使用起来感觉很顺畅。在过去交互设计也由程序员来做，实际上程序员擅长编码，并不善于与最终用户交互。如今，把交互设计从计算机学科中分离出来单独成为一个学科，目的在于加强软件的易用、易学、易理解，使人机交互系统更好的发挥效用。
交互设计的原则如下：
1. 文字简明扼要。
注意断句时逗号、句号、顿号、分号的用法。警告、信息、错误使用对应的表示方法。使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。
2. 亲和的语气。
使用用户的语言，而非技术的语言。尽量口语化、多用您、请，不用或少用专业术语。根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业术语；用户为儿童，这可以语气亲切和蔼；老年用户则应该成熟稳重。
3. 清晰导航功能。
a) 提供多种操控方式实现同一种功能。如：允许兼用鼠标和键盘或者遥控器。
b) 功能之间随意切换。方便退出,如手机的退出，是按一个键完全退出，还是一层一层的退出。提供两种可能性。
c) 要使一个功能有时有效有时无效，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策。
4. 明确的提示信息:
注意用户的交互感受，用户做了任何动作，应该给用户一个视觉或者听觉、触觉提示。这个提示应该明显简洁，可以有以下几种方法：
a) 显示提示：当用户点击按钮等动作进行一个工作时，弹出交互对话框让用户点击确认。如 “信息：提交成功”；误操作后，显示“信息错误，请重新输入”的提示。
b) 听觉提示：在确定有声卡，用户可以听到声音的时候，发出特殊声音提示。一般作为重要提示的辅助。声音不应过长，紧急错误提示应该短促，频率较高，成功提示应该舒缓，轻松。等等……
三、 框架设计——导航设计和信息布局
在框架设计阶段，我们要更进一步地提炼这些结构，框架布局上体现严谨的主次之间的从属关系。详细的界面外观、导航和信息设计，这能让结构变得更具体。
(一) 整体布局体现疏密有致,主次分明。
框架布局有张有弛，既不拥挤，也不松散。整个系统，按照元素的重要程度排序，重要的或者频繁访问的元素应当放在显著的位置上，以确保越是重要的元素越要快速地显现给用户。一般情况下，用户的眼睛会首先注视屏幕的左上部位，所以最重要的元素应当放在屏幕的左上部位。界面布局上把控件元素分成组也很重要，逻辑上相关联的元素应当加以组合，以表示其关联性，反之，任何不相关的功能项应当分隔开，在不同功能项之间，用间隔对其进行分组，避免用户产生误解。
(二) 控件风格统一，控件功能要专一，控件使用要准确。
遵循一致的准则，确立标准并遵循。无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。这样得到的好处：1：用户使用起来能够建立起精确的心理模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，理解语句也不需要费神2：降低用户培训和开发者技术支持成本。3：使用户感觉顺畅有序，心情愉快，支持度增加。
四、 视觉设计 ——友好美观和引导启示
视觉设计是由内容、功能和美学汇集到一起来产生一个最终设计，将实现前期三个阶段的所有目标。视觉设计要达到用户愉悦使用的目的。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离。我们要明确，界面设计不是单纯的绘画艺术，他需要理性的分析使用者、使用环境、使用方式，是以用户为中心的科学性的艺术设计。最终用户的感受是检验界面设计成败的最有力的依据。所以界面设计要和用户研究紧密结合，为最终用户设计满意视觉效果而努力。
在框架设计阶段，我们解决了界面的元素的基本布局，视觉设计要对结构产生强化和美化的作用。视觉设计不仅要实现友好美观并且要实现引导启示的功能：
(一) 界面设计中，美的因素是不可忽略的，因为它创造了一个愉悦的使用环境。友好美观的界面从布局、色彩、字体三方面着手。
1. 布局。
a) 重点明确，层次清晰，适当留白。在同一画面上，不应出现两个以上的兴趣中心，以免分散注意力。界面设计的空白量问题也很重要，没有空白区就没有界面的美。过分密集的显示会损害用户的视觉，也不利于用户把注意力集中到有用的信息上，必要的空行及空格会使结构合理，条理清晰。
b) 精简设计，杜绝堆砌。界面设计要美观大方，给人以清晰、有序的感觉。不宜过分“花哨”。花哨界面容易扰乱层次，分散用户注意力，是毫无意义的累赘，要果断的摒弃。
c) 尊重大众阅读习惯。现在，人们的阅读习惯是自左而右，从上而下，因此，屏幕的组织也应当是自左而右，从上而下。屏幕上零部件的布局也应以用户熟悉的方式进行。
2. 色彩。
a) 遵循对比原则。颜色的应用要确保屏幕的可读性。明暗是色感中最基本的要素，如：深色背景上使用浅色文字，浅色背景上使用深色文字。利用这一对比可以将界面的背景弱化、突出重要的菜单或图形。
b) 体现视觉环保。针对界面类型以及用户使用环境选择恰当色调：如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等。
c) 照顾特殊人群。对于色盲或色弱的用户，如果在屏幕上使用了颜色来突出显示某些东西，假若想让色盲或色弱的用户注意到，那么需要做些另外的工作来突出它，如在其旁边使用一个符号来提示。
d) 参考美术学统计学术标准建立色表。色表的建设，对于设计师在界面色彩应用上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试。
3. 字体。
a) 阅读区域的文字采用统一字体，字体标准的选择依据操作系统类型决定。
使用那些可读性好的字体，中文如宋体，黑体，西文如serif或times roman。此外，字体的使用要一致。
b) 同时，字体作为设计元素之一，不同的字体都具有独特的外形气质，应恰当使用以符合界面整体形象。
(二) “隐喻”的作用。
设计不仅表现在美丽的视觉享受，关键在于其清晰的逻辑感，条理性和精巧的组织，以及对用户周到的考虑和积极的引导和暗示。
如果引导和暗示在设计中得到合理利用，用户一看便知如何操作，而无须借助任何符号、标志和说明”。值得思考的是，“隐喻”设计应当遵从一定的认知行为习惯，因为我们对事物的认知来源于长期的社会交往中形成的文化和行为习惯，当事物的外观和行为符合我们的认知的时候，我们操作起来才会得心应手。
结束语：成功的界面设计，离不开科学流程分析。深入的用户研究，严谨的架构设计，完美的视觉表现，充分运用设计元素准确的体现导向功能，最终造就美观、亲和、易用的人机交互界面。
参考文献
1) 视觉设计：用理性说话（译） (
2) 《一目了然——Web软件显性设计之路》 机械工业出版社（2008年）
3) Designing Interfaces中文版 电子工业出版社 （2008年）
[相关链接]作者简介
冯恒悦，女，1997年毕业于苏州大学艺术学院。长期从事互联网业的策划，设计及管理工作。
