UI界面设计流程参考

UI界面设计流程
人类社会逐步向非物质社会迈进，互联网信息产业已经走入我们的生活。

在这样一个非物质社会中，网站与软件这些非物质产品再也不象过去那样紧紧靠技术就能处于不败之地。

工业设计开始关注非物质产品。

但是在国内依然普遍存在这样一个称呼"美工"。

"工"的意思就是没有思想紧紧靠体力工作的人。

这是一个很愚昧的做法，愚昧在于称呼职员美工的企业没有意识到界面与交互设计能给他们带来的巨大经济效益，另一方面愚昧在于被称为美工的人不知道自己应该做什么，以为自己的工作就是每天给界面与网站勾边描图。

本文主要讲述一套比较科学的设计流程来讲述UI界面设计属于工业设计的范畴，是一个科学的设计过程，理性的商业运作模式。

而不是单纯的美术描边。

UI的本意是user interface也就是用户与界面的关系。

他包括交互设计，用户研究，与界面设计三个部分。

本文主要讲述用户研究与界面设计的过程。

一个通用消费类软件界面的设计大体可分为五个步骤：需求阶段
分析设计阶段
调研验证阶段
方案改进阶段
用户验证反馈阶段
需求阶段软件产品依然属于工业产品的范畴。

依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。

所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。

什么地方用（在办公室/家庭/厂房车间/公共场所）。

如何用（鼠标键盘/遥控器/触摸屏）。

上面的任何一个元素改变结果都会有相应的改变。

除此之外在需求阶段同类竞争产品也是我们必须了解的。

同类产品比我们提前问世，我们要比他作的更好才有存在的价值。

那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。

我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。

如何判定最合适于用户呢，后面我会介绍用户调研。

分析设计阶段通过分析上面的需求，我们进入设计阶段。

也就是方案形成阶段。

我们设计出几套不同风格的界面用于被选。

首先我们应该制作一个体现用户定位的词语坐标。

例如我们为25岁左右的白领男性制作家居娱乐软件。

对于这类用户我们分析得到的词汇有：品质，精美，高档，高雅，男性，时尚，cool,，个性，亲和，放松等。

分析这些词汇的时候我们会发现有些词是绝对必须体现的，例如：品质，精美，高档，时尚。

但有些词是相互矛盾的，必须放弃一些，例如：亲和，放松与cool,个性与等。

所以我们画出一个坐标，上面是我们必须用的品质，精美，高档，时尚。

左边是贴近用户心理的词汇：亲和，放松，人性化。

右边是体现用户外在形象的词汇：cool,个性，工业化。

然后我们开始搜集相呼应的图片，放在坐标的不同点上。

这样根据不同作标点的风格，我们设计出数套不同风格的界面。

调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观的反馈。

测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。

例如：数据收集方式：厅堂测试/模拟家居/办公室。

测试时间：X年X月X日X日。

测试区域：北京、广州、天津。

测试对象。

某消费软件界定市场用户。

主要特征为：对电脑的硬件配置以及相关的性能指标比较了解，电脑应用水平较高；
电脑使用经历一年以上；
家庭购买电脑时品牌和机型的主要决策者
年龄：X-X岁；
年龄在X岁以上的被访者文化程度为大专及以上；
个人月收入X以上或家庭月收入X元及以上；
样品五套软件界面样本量：X个，实际完成X个。

调研阶段需要从以下几个问题出发：用户对各套方案的第一印象
用户对各套方案的综合印象
用户对各套方案的单独评价
选出最喜欢的
选出其次喜欢的
对各方案的色彩，文字，图形等分别打分。

结论出来以后请所有用户说出最受欢迎方案的优缺点。

所有这些都需要用图形表达出来，直观科学。

方案改进阶段经过用户调研，我们得到目标用户最喜欢的方案。

而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。

这时候我们可以把精力投入到一个方案上（这里指不能换皮肤的应用软件或游戏的界面）将方案做到细致精美。

用户验证阶段改正以后的方案，我们可以将他推向市场。

但是设计并没有结束。

我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。

零距离接触最终用户，看看用户真正使用时的感想。

为以后的升级版本积累经验资料。

经过上面设计过程的描述，大家可以清楚的发现，界面UI设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。

所以我们一再强调这个工作过程是设计过程。

UI 界面设计不存在美工。

五、UI设计的一般工作流程（取自某UI设计服务公司）1）熟悉行业（熟悉您的软件所涉及的行业，以便制作出适合行业特征的界面风格）2）了解软件（了解您软件的工程进度，做出针对您进度的工作计划）。

3）与软件开发工程师和市场人员讨论界面风格（广泛听取研发和市场人员的意见，做出最适合市场的软件）。

4）人机分析（对您的软件进行人机分析，增强您软件的易用性）。

5）做方案（做出设计方案，并明确细节思想）。

6）审定方案（与技术和市场人员一起审定方案，并听取修改意见）。

7）修改——审定（将有几次重复）8）细化、制作界面（开始制作软件界面）。

9）与软件开发工程师合作把界面加入到程序中。

10）细部修改，完成。

11）进行软件包装盒、光盘盘面、盘套等的设计工作。

12）后期跟踪服务（在完成项目后，对您的软件进行跟踪服务，即对您软件从发布到推出新版本之间的小规模修改进行调整，包括对帮软件界面设计要素界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。

具体包括软件启动封面设计，软件框架设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，滚动条及状态栏设计，安装过程设计，包装及商品化。

在设计的过程中有较多注意的关键问题，以下列出几点：(1)软件启动封面设计应使软件启动封面最终为高清晰度的图像，如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式，并且对选用的色彩不宜超过256色，最好为216色安全色。

软件启动封面大小多为主流显示器分辨率的1/6大。

如果是系列软件将考虑整体设计的统一和延续性。

在上面应该醒目的标注制作或支持的公司标志、产品商标，软件名称，版本号，网址，版权声明，序列号等信息，以树立软件形象，方便使用者或购买者在软件启动的时候得到提示。

插图宜使用具有独立版权的，象征性强的，识别性高的，视觉传达效果好的图形，若使用摄影也应该进行数位处理，以形成该软件的个性化特征。

(2)软件框架设计软件的框架设计就复杂得多，因为涉及软件的使用功能，应该对该软件产品的程序和使用比较了解，这就需要设计师有一定的软件跟进经验，能够快速的学习软件产品，并且在和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出友好的，独特的，符合程序开发原则的软件框架。

软件框架设计应该简洁明快，尽量少用无谓的装饰，应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮，菜单，标签，滚动条及状态栏预留位置。

设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理。

(3)软件按钮设计软件按钮设计应该具有交互性，即应该有3到6种状态效果：点击时状态；鼠标放在上面但未点击的状态；点击前鼠标未放在上面时的状态；点击后鼠标未放在上面时的状态；不能点击时状
态；独立自动变化的状态。

按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异大的按钮应该有所区别。

(4)软件面板设计软件面板设计应该具有缩放功能，面板应该对功能区间划分清晰，应该和对话框，弹出框等风格匹配，尽量节省空间，切换方便。

(5)菜单设计菜单设计一般有选中状态和未选中状态，左边应为名称，右边应为快捷键，如果有下级菜单应该有下级箭头符号，不同功能区间应该用线条分割。

(6)标签设计标签设计应该注意转角部分的变化，状态可参考按钮。

(7)图标设计图标设计色彩不宜超过64色，大小为16x16、32x32两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。

(8)滚动条及状态栏设计滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头，滚动标等，有些还有翻页标。

状态栏是为了对软件当前状态的显示和提示。

(9)安装过程设计安装过程设计主要是将软件安装的过程进行美化，包括对软件功能进行图示化。

(10)包装及商品化最后软件产品的包装应该考虑保护好软件产品，功能的宣传融合于美观中，可以印刷部分产品介绍，产品界面设计。