游戏ui设计流程

第一篇：游戏ui设计流程

UI视频教程之游戏UI设计过程

如今喜欢玩游戏的人在不断的增加，在日渐紧张的环境和压力越来越大的工作中人们越来越喜欢忙里偷闲的玩会游戏放松一下，因此如今的游戏UI设计师很是强手。所以现在有越来越多的人对游戏UI设计很感兴趣，本篇文章小编就和大家分享一下游戏UI设计过程，下面一起来看一下吧。

UI = User Interface，也就是“用户界面设计”。打开你过去24小时里玩过的游戏，从登录界面、操作界面，到游戏道具、技能标志，所有这些设计，统统属于游戏UI。换句话说，你在玩游戏的过程中一半以上的工夫都在跟UI打交道，它设计得是否巧妙、清晰、流畅，很大程度影响到了你的游戏体验。

讲到这里，肯定有不少UI设计小白开始在网上找关于游戏UI设计制作的各种内容。经过寻找我们会发现这方面的干货少得可怜。如今互联网时代处处谈分享，既然没有找到分享的内容我们就自己总结整理一部分吧。饭得一口口吃，路要一步步走。既然想学游戏UI，还是得先从基础学起。下面简单讲讲游戏UI的设计流程，虽然简单，可句句是干货。

在开始高大上的游戏UI设计之旅前，你先要明确一个最最基本的概念：游戏UI不是把自己关在小黑屋里，脑袋一拍，想怎么画就画出来的。你得先跑到游戏策划那儿，和对方推心置腹地沟通，了解清楚你要设计的游戏究竟是玩什么、给谁玩、怎么玩。这几点确定了，才好确定美术风格。比如，你在下手前要先确定游戏的题材、背景年代、质感、整体色调、可用元素等等。要是做一款三国背景的游戏，对话界面竟然跳出肾6的屏幕，如果你是玩家，会不会觉得整个人都穿越了?

确定了设计的主题、风格、背景之后你就进入搭框架阶段，从主界面开始一层层深入设计，像是一些常用界面、弹出框、功能按钮、道具、技能图标等等，要是连一些杂七杂八的东西再加上游戏Logo也能连带着一道设计掉，那真是极好的。到这里就可以为每个元素布局并制作草稿了。千万别想当然，一定要根据用户操作习惯，规划好显示区域、操作区域、执行按钮区域等。用于展示的图标不要大于操作图标，只要能清楚显示就行。文字的字体样式和大小也顺便敲定，都别超过3种。动态文字用系统默认就够了，等到中期再看情况做详细规定。

现在，制作主界面UI以及主要功能按钮的时机才算成熟，可以正式确立UI整体风格了。根据刚开始设定的信息和原画图片，确保UI风格跟原画风格统一。颜色别整得太花里胡哨，清晰美观即可，切记一条关键原则：哪怕玩你游戏的是从没玩过游戏的小白，只要他们能分分钟顺着你的思路走下去，你就赢了。好的UI不仅可以让游戏变得顺畅简单，还能让整个体验更上一层楼。

走完上述流程，你只要按照先后顺序把模块一个个地完成，UI设计就大功告成。 现在明白整套流程了吗?下面给大家分享4条UI设计经验，都是可以在设计游戏UI时着重考虑的，能不能加分看你的运用水平，但至少能保证你在做UI设计时被少退几稿。

1、让你设计的界面简洁，减少玩家发生选择错误的可能性。

2、UI设计要能一眼看明白，一点就有效。

3、切记切记切记：要保持一致。

4、不管设计得多么花里胡哨，永远别忘了：这东西是给人用的，如果功能性差其他什么都白搭。

第二篇：智能手机游戏UI设计

学号：20114221011姓名：屈方柳班级：计科110

1摘要：随着社会生活水平的提高，人们对于娱乐品质的要求也逐渐升高。随着移动通信网络和移动终端设备的不断发展，功能简单、界面单一的手机游戏已经不能满足用户对质量的高要求。由于android和ios的出现，智能手机的发展出现了质的飞跃。智能手机游戏业也乘其东风快速发展。但是，游戏行业虽然发展迅速然，却没有相应的手机游戏UI(User Interface)设计理论作指导，多数开发者都只注重了游戏的商业价值，没有完全的考虑到用户的体验。本文将简单的介绍IOS系统下游戏UI的设计方法和原则，简单的探讨如何去为用户考虑，以充分发挥UI在手游中的价值。

关键词：IOS 游戏 智能手机 UI

1.什么是UI

1.1 UI的简单定义

UI就是User Interface(用户界面)的简称，是指用户和某些系统进行交互的方法，这些系统不单单指电脑程序，还包括其他的机器，设备，复杂的工具等。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。

1.2 UI设计师对UI的看法

对于一个UI设计师来说，UI意义不是这么简单。很多人心中UI只是人机交互的界面而已，这正是在项目开发过程中，UI往往被忽略甚至分配给开发新手做的重要因素。实际上，User Interface，作为一个游戏和玩家交互的直接接口，它的设计直接决定了游戏品质。UI是一种用户体验的总和，除了视觉上的界面，还有听觉上的音效、直觉上的Feeling以及真正的用户体验。

2.UI在中国的发展现状

2.1整体发展现状

在国内，UI设计还不是那么引人注目。国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性理解。另一方面在手游开发过程中还存在重技术而不重应用的现象。许多商家认为智能手机游戏的核心是技术，而UI仅仅是作为游戏的外观而存在。

2.2 UI设计在国内正逐步兴起

幸运的是在国内一些高瞻远瞩的民族企业已经开始意识到UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。联想软件的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，推出的双模式电脑、幸福系列等成功UI范例，为联想赢得全球消费 PC第三的称号等。

我们必须承认现阶段中国在UI设计领域与西方发达国家有相当大的差距，但是从目前的形势来看，手游UI的发展状况的比较乐观的。越来越多有创意的交互都融入了智能手机游戏，游戏UI的风格也越来越多。

3.UI设计的基本原则

3.1 UI设计规范

3.1.1.一致性原则：对于同类型的元素，例如：字体，按钮，表单，滑动手势等，都需要保持各自的一致性，而且要避免同一功能的多重描述。这样能使得界面直观、简洁，操作方便快捷，用户对游戏操作的学习也会更加迅速。

3.1.2.准确性原则：在游戏UI的设计中，开发者往往不注意表达的准确性，通常使用一些意义不明确的词来引导用户进行游戏消费，这会增加用户对于该游戏的厌恶感。使用一致的标记、意义明确的信息提示会让游戏更加容易被用户理解和接受。

3.1.3.布局合理化原则：由于智能手机屏幕大小的限制，在操作复杂的游戏设计时，用户界面的布局合理性显得尤为重要。在进行UI设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，提高游戏的操作性和易用性。

例如：屏幕下部操作按钮的设计

棱型结构在摆放上很别扭，棱型在空间上有很多浪费，并且没有可点击的感觉。这样的布局必然不合理。

3.1.4.操作合理性原则：在进行UI设计时，尤其是注重操作的游戏UI设计时，必须注意到UI的操作合理性。因为智能手机屏幕尺寸和功能的限制，UI设计时，操作必须简单，而且要遵循用户的操作习惯。

3.1.5.响应时间原则：游戏UI不同于其他Application的UI设计。因为用户在进行游戏时会保持一定的操作节奏，所以操作的设计不能过于复杂，

响应时间

应该尽量适应用户的操作节奏。如果响应时间很长，则需要给用户“正在响应”之类的提示。

3.2 UI设计时出现的基本问题

在精致小巧的智能手机屏幕上进行用户界面的设计，要求UI设计师要比网页界面设计师更加注重细节，因为用户很容易看到屏幕内的所有内容。尤其是在界面设计比较简洁的时候，细节能决定一款游戏能否被用户所接受。

3.2.1.同类的元素外观类型过多

在一款游戏中按钮的设计，每个界面中实现同一功能的按钮应该保持一样的外观或者风格。同样一个游戏，每一个界面中担任类似功能的按钮居然长的都不一样，这样的感觉是非常糟糕的，对于一个用户来说，自然的反应就是这些界面并不属于一个游戏。

例如：在一款游戏中人物技能按钮的外观设计

虽然这些按钮的功能都是相同，即“施放技能”。但是在设计时这三个按钮的内容看上去就不一样，在这几个按钮同时出现时，明显给人感觉风格不一致，而且用户的操作也不能统一，没有在同一款游戏的感觉。

不是说在同一款游戏的设计中，同一了美术风格之后就意味着你的界面感觉很棒。作为一款高质量的智能手机游戏，你必须有统一的界面出现的方式，而当同一个控件的出现方式都不一样的时候，会让用户对控件的功能产生怀疑，而且会让人产生整体游戏界面缺乏统筹性、各个界面风格迥异的感觉。。

3.2.2.字体的种类过多

字体是界面不可分割的一部分，除非你的设计优秀到用图案就能说清一切了，但是残酷的现实是，我们所做的游戏达不到这样的水平。通常容易出现的错误就是一个界面内出现多种字体。字体种类过于繁多不仅会影响UI的整体风格，带给人凌乱不堪的视觉感受，而且会降低游戏的运行性能，直接影响到用户的游戏体验。

如下几个例子就是字体做的比较好的：

不仅字体一致，而且尽量以画的形式表现出来。在字体大小不一样时也没有去更改字体，这使得游戏界面给人感觉整体比较整洁，不凌乱。

3.2.3.界面之间的切换处理不当

智能手机游戏的UI设计不同于页游的UI，在智能手机上界面的切换细节很容易被用户注意到。实际上，界面的切换事实上是一个无聊的过程，如果它太久了，会导致游戏 枯燥乏味。但是过于花哨，又会让人感觉游戏设计的重心走偏，占用较多的系统资源。

4.UI设计必须考虑到智能手机的特点

智能手机的共性特点在于其硬件，包括处理器，屏幕，键盘，音响甚至电池等。通常，智能手机的CPU运算能力不如PC机强大，屏幕大小也对UI设计有很大的限制。尤其是全触摸屏的智能手机，显示器和键盘都在同一块空间内，如何让操作不对显示造成较大的遮挡也是UI设计需要考虑的问题。

受制于智能手机的物理性能，为了兼顾游戏运行的性能，游戏UI必定不能占用过多的资源。这也使得手机游戏画面不够精彩、流畅，音效不够理想。

同时由于移动网络的限制，智能手机游戏数据的实时性难以得到保障，这也是单机游戏、在线的卡牌游戏、回合制游戏盛行的原因之一。虽然游戏数据不能及时的传输，但是用户的感觉是实时的。所以在进行UI设计时，如何保证手机游戏界面的实时性和流畅性也成为UI设计的一大难题。

5.游戏UI的设计不能独行

智能手机毕竟不同于PC，通常在使用PC进行游戏时，用户可以很方便而且不需要考虑系统资源的同时进行其他的操作。但是对于智能手机来说，用户在运行一款高质量的大型游戏时会集中精力在游戏上，很少会分散精力和浪费系统内存去做其他的事。所以，智能手机游戏UI更贴近用户。

在进行智能手机UI设计之前，必须进行详细的UX设计。什么是UX?简单来说UX(User experience design)就是用户体验。UI的开发过程是迭代的，在开发过程中也要不断的进行UX的测试，并依据UX的设计进行调整。所以在进行UI的设计时，不能仅仅考虑游戏的操作性，而应该同时进行UX设计。

6.总结

对于智能手机游戏UI的设计，现有的经验肯定是不够的。在设计游戏UI时需要考虑的因素也比其他的APP更多，要求更为苛刻。但是，不可否认的是，一款具有优秀UI设计的游戏确实比同类的其他游戏拥有更多占领市场的资本。根据智能手机游戏UI的发展来看，创新点层出不穷、用户体验越来越好，这也说明UI得到的关注越来越多。未来，智能手机游戏的UI一定会出现更多我们意想不到的进步。

参考文献

[1] 狸雅人. Photoshop智能手机APP界面设计. 北京：人民邮电出版社，2013

[2] 孔令德. 计算机图形学基础教程(第二版). 北京：清华大学出版社，2013

[3]

第三篇：UI设计流程

分析、设计、配合、验证

确认目标用户

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

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

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

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

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

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

提示和引导用户

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

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

一致性原则

设计目标一致

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

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

元素外观一致

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

交互行为一致

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

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

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

可用性原则

可理解

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

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

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

可达到

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

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

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

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

可控制

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

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

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

1、分析阶段

需求分析、用户场景模拟、竞品分析(聆听用户心声)。

需求分析：对于一个产品来说，必然有对用户需求的分析内容，更多的是从MRD与PRD获得，或者从产品需求评审会议上得到需求分析的内容，当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话，那么用户需求就是本次设计的出发点。 用户场景模拟：好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要，了解产品的现有交互以及用户使用产品习惯等，但是设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。

竞品分析(聆听用户心声)：竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当市场上存在竞品时，去听听用户的评论，哪怕是骂声都好，别沉迷于自己的设计中，让真正的用户说话。

输入物：MRD、PRD、市场需求文档、市场调查报告、竞品分析文档(或其一或全部)

输出物：设计初稿(或许只是几个简单的界面)

2、设计阶段

设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟，模拟用户在多种情况下产品使用的模拟。面向事件驱动则是对产品响应与触发事件的设计，一个提示框，一个提交按钮……这类都是对事件驱动的设计。面向对象，产品面向的用户不同对于产品的设计要求不同，不同年龄层的用户对于产品的要求不同，产品的用户定位将对UI设计师影响因素。 输入物：交互文档(高保真原型) 输出物：设计终稿(所有的设计稿)

3、配合

UI设计师交出产品设计图时，更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作，对于不同的开发人员的要求，切图方式也有不同，UI设计师需配合相关的开发人员进行最适合的切图配合。 输入物：设计终稿

输出物：设计修改稿(设计稿切片)

4、验证

产品出来后，UI设计师需对产品的效果进行验证，与当初设计产品时的想法是否一致，是否可用，用户是否接受，以及与需求是否一致。都需要UI设计师验证，UI设计师是将产品需求用图片展现给用户最直接的经手人，对于产品的理解会更加深刻。 输入物：产品

输出物：产品(面向用户最终版本)

产品UI设计中夹杂着许多设计原则要求，统一公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。UI设计师应该分析公司产品的特点，制定符合产品生命周期的UI设计流程。每个产品的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。 GUI设计详细流程定义：

1. 项目开始GUI设计时间点之前，明确客户的GUI需求,了解机器外形硬件和软件的特性。

2. 概念设计【提供GUI设计方案几套，参考产品组人员和领导层的建议，但最多3套，精心设计各套方案;项目组和产品组共同进行方案评审会，决策方案;并且需要项目组提供真机，展开界面的真机效果和环境测评，优化界面颜色、亮度等细节)】; 3. 详细设计【需要明确界面研发的细节;建议项目提出强烈建议优化的几项产品设计点(用户调查)】;对界面有变化的界面进行统计，整理出文档提交给UI层面技术工程师，做好相关的界面准备工作。 4. 原型设计时间【目前国内研发软件的现状通常此环节被忽略，但时间充足，建议按计划进行】 5. 与UI层面的技术工程师共同展开界面实现(界面实现和界面优化的时间点控制在项目时间的百分之几点，需要明确)

6. 界面工程师制作好Demo，提交给项目负责人、决策人和UI用户界面测试工程师(需要指定负责人)，展开用户体验反馈建议汇总，提出用户界面体验的反馈意见表(需要项目负责人支持)。

7. 测试评估，尽早发现存在的交互设计和视觉设计的不足之处，进行软件界面的改善设计。

UI设计流程以及设计师参与的环节

最近的工作中总结出一条结论：拥有一个完善规范的流程，是决定着一个项目走向成功或失败的关键。

对于UI设计的工作流程，我觉得可以根据“市场分析-用户分析-架构-原型-界面-输出-完善”这条主线制定，每个环节UI设计师都应参与其中。

1.产品定位与市场分析

这一类工作大多都是由新产品研发部门以及市场需求完成的，但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。

2.用户研究与分析

这个过程是非常重要的，设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等，提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析。

3.架构设计

这里涉及到比较多的界面交互与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。

4.原型设计

我觉得这里应该是一个小的阶段标志，要对前面所有工作加以设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性。

5.界面设计

如果很倾向于图形界面设计，这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计，否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。

6.界面输出

作为设计师，在这一部分的工作就是配合好开发人员完成相关的界面结合。

7.完善工作

这个环节是很多部门共同参与的，包括可用性的循环研究、用户体验回馈、测试回馈。同时，UI人员也应该把一些可行性建议进行完善。很多设计师做了东西不喜欢改，这是一个大忌。

如上的流程，可能会有很多部门共同参与完成，UI设计师如何与团队配合并发挥自己应有的作用非常重要。一名合格的UI设计师，应该能贯穿整个UI流程进行工作，而并非是单纯的图形界面设计。

确认目标用户

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

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

例如：对于科学用户和对于电脑入门用户的设计重点就不同。 采集目标用户的习惯交互方式

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

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

提示和引导用户

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

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

设计目标一致

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

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

元素外观一致

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

交互行为一致

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

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

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

可理解

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

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

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

可达到

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

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

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

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

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

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

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

上面的文章提到了UI设计的原则，并且对此做出了一些所谓的定义。大家要明白，本人对UI设计的研究时间不长，这些原则只是个人体会。

因此就有人提出问题：有了原则固然好，那么如何付诸实施呢?个人理解达到目标是需要方法的，因此在UI设计原则里面东西拷贝了一些方法和模式。而能够让方法持续实施，达到目标就需要流程-或者说过程来保证。

所以这里就对流程进行一下总结和探讨。以付茶资吧!

我们把UI设计的流程分为一个出发点，4个阶段。

[出发点]

1、

了解UI设计的原则。

没有原则，就丧失了设计的立足点。

2、

了解UI交互模式

正如同编程不了解模式就会事半功倍一样，UI设计不了解模式就会对设计原则的实施造成困惑。

3、

了解UI交互元素及其功能

如果对于UI的基本交互元素和功能都不了解，如何设计UI呢? [阶段一：分析]

1、

用户需求分析

2、

用户交互场景分析

3、

竞争产品分析

这两者可以说是相辅相成的。对于一个较为正规的项目而言，必然有对用户需求的分析内容。其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话，那么用户UI需求就是本次设计的出发点。

好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察，但是UI设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。

竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。

当然有的时候可以参考的并不一定是竞争产品。 [阶段二：设计]

采用面向场景、面向事件驱动和面向对象的设计方法。

UI设计着重于交互，因此必然要对最终用户的交互场景进行设计。

软件是交互产品，用户所作的就是对软件事件的响应以及触发软件内置的事件。因此要面向事件设计。

现在的程序开发主流采用的是面向对象设计。面向对象设计可以有效的体现面向场景和面向事件的特点。

设计的四个要素： 交互对象 数据对象

事件(交互事件和异常) 动作

[阶段三：开发] 通过：

用户交互case图(说明用户和系统之间的联系) 用户交互流程图(说明交互和事件之间的联系) 交互功能设计图(说明功能和交互的对应关系) 最终得到UI的设计产品。 [阶段四：验证]

正如UI交互设计原则探讨文中提到的，对于UI产品的验证主要从下面几个方面入手：

1、

功能性对照

UI设计的再好，和需求不一致也不可以。

2、

实用性内部测试

UI设计的最重要点就是实用性。

3、

用户焦点小组

UI设计是否优秀的重要衡量依据。

第四篇：UI设计规范（流程、界面）

UI设计(流程/界面)规范

一：UI设计基本概念与流程

1.1

目的

规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。

1.2范围

l

界面设计

l

此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。

1.3

概述

UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户(市场)要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。

1.4

基本介绍

A、需求阶段

软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。

除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。

B、分析设计阶段

通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。

C、调研验证阶段

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

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

调研阶段需要从以下几个问题出发：

用户对各套方案的第一印象

用户对各套方案的综合印象

用户对各套方案的单独评价

选出最喜欢的

选出其次喜欢的

对各方案的色彩，文字，图形等分别打分。

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

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

D、方案改进阶段

经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。

E、用户验证阶段

改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。

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

2.

UI设计流程

2.1

概述

根据上述原则，分析公司产品的特点，制定符合软件产品(或项目)生命周期的UI设计流程。每个产品(或项目)的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。

二：UI界面用户体验设计原则与规范

1：应该遵循的基本原则

无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。

这样得到的好处：

1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解

2：降低培训、支持成本，支持人员不会行费力逐个指导。

3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加

做法：

项目组有经验人士，确立UI规范：

美工提供色调配色方案，提供整体配色表

界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：

控件功能遵循行业标准，windows平台参见《Microsoft

用户体验》

控件样式在允许的范围内可以统一修改其样式、色调

参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。

根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的

界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。

建立合理化文档《UI标准》描述上述规范，

强行界面设计者理解之，并作为开发准则，

SQA人员进行监控开发人员是否遵循，及时告诫开发人员。

2：(Color)颜色使用恰当，遵循对比原则：

1：统一色调，针对软件类型以及用户工作环境选择恰当色调：

如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等

2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表

3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等

4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试

5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。

6：整个界面色彩尽量少的使用类别不同的颜色

itop色表

具体标准参考美术学统计学术标准。

色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

3：(Resource)资源

一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准

2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格

3：底图应该融于底图，使用浅色,

低对比，尽量少的使用颜色。

4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出莫名奇妙的图案。

5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。

4：(Font)字体

使用统一字体，字体标准的选择依据操作系统类型决定。

中文采用标准字体，“宋体”，英文采用标准

Microsoft

Sans

Serif

不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来，例如

MSS字体8磅，宋体的小五号字(9磅)五号字(10.5磅)。

所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况

ITop采用BCB，所有控件默认使用

parent

font，不允许修改，这样有利于统一调整。

·系统大小字体属性改变的处理。

Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。

这个情况下，应该做相应处理：

1：写程序自动调节大小，点阵值乘以一个相应比例

2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。

5：(Text)文字表达

提示信息、帮助文档文字表达遵循以下准则：

1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字

2：断句逗号句号顿号分号的用法，

提示信息比较多的话，应该分段，

3：警告、信息、错误

使用对应的表示方法

4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。

5:

根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。

6：(STYLE)控件风格，不要使用错误控件，控件功能要专一

有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章

·不要错误使用控件，例如：

使用Button样式做TTable的功能，拿主菜单条显示版权信息，

·统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映

·一个控件只做单一功能，不复用

很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。

例如

改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才回使用，这种情况下解决方法：

1:分组，使用双份控件

2：使用TABLE页，给用户很明显的视觉变化

==========================================================================

总结起来就是：

1.

产品制作人，写产品计划书。

2.

用户体验研究员，作调查分析。

3.

信息建构师，设计产品架构。

4.

互动设计师，作出互动流程。

5.

视觉设计师和用户界面设计师，作出页面视觉设计。

6.

前台工程师，前台开发。

7.

后台工程师，后台开发。

8.

用户体验研究员，做用户测试确保质量。

1.确认目标用户

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

2.设计目标一致

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

3.元素外观一致

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

7.可用性原则

7.1可理解

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

7.2可达到

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

Quote

[阶段一：分析]

1、用户需求分析

2、用户交互场景分析

3、竞争产品分析这两者可以说是相辅相成的。

对于一个较为正规的项目而言，必然有对用户需求的分析内容。其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话，那么用户UI需求就是本次设计的出发点。好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察，但是UI设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当然有的时候可以参考的并不一定是竞争产品。

[阶段二：设计]

采用面向场景、面向事件驱动和面向对象的设计方法。

UI设计着重于交互，因此必然要对最终用户的交互场景进行设计。软件是交互产品，用户所作的就是对软件事件的响应以及触发软件内置的事件。因此要面向事件设计。现在的程序开发主流采用的是面向对象设计。面向对象设计可以有效的体现面向场景和面向事件的特点。设计的四个要素：交互对象,数据对象,事件(交互事件和异常),动作

[阶段三：开发]

通过：用户交互case图(说明用户和系统之间的联系)用户交互流程图(说明交互和事件之间的联系)交互功能设计图(说明功能和交互的对应关系)

最终得到UI的设计产品。

[阶段四：验证]

正如UI交互设计原则探讨文中提到的，对于UI产品的验证主要从下面几个方面入手：

1、功能性对照UI设计的再好，和需求不一致也不可以。

2、实用性内部测试UI设计的最重要点就是实用性。

3、用户焦点小组UI设计是否优秀的重要衡量依据。最后，说一点其他的问题。现在往往认为交互式设计和最终的UI效果设计可以截然分开。这就好比说需求可以和设计截然分开，是不可能的。

Quote

UI设计流程以及设计师参与的环节

最近的工作中总结出一条结论：拥有一个完善规范的流程，是决定着一个项目走向成功或失败的关键。

对于UI设计的工作流程，我觉得可以根据“市场分析-用户分析-架构-原型-界面-输出-完善”这条主线制定，每个环节UI设计师都应参与其中。

1.产品定位与市场分析

这一类工作大多都是由新产品研发部门以及市场需求完成的，但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。

2.用户研究与分析

这个过程是非常重要的，设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等，提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析。

3.架构设计

这里涉及到比较多的界面交互与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。

4.原型设计

我觉得这里应该是一个小的阶段标志，要对前面所有工作加以设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性。

5.界面设计

如果很倾向于图形界面设计，这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计，否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。

6.界面输出

作为设计师，在这一部分的工作就是配合好开发人员完成相关的界面结合。

7.完善工作

这个环节是很多部门共同参与的，包括可用性的循环研究、用户体验回馈、测试回馈。同时，UI人员也应该把一些可行性建议进行完善。很多设计师做了东西不喜欢改，这是一个大忌。

如上的流程，可能会有很多部门共同参与完成，UI设计师如何与团队配合并发挥自己应有的作用非常重要。一名合格的UI设计师，应该能贯穿整个UI流程进行工作，而并非是单纯的图形界面设计。

第五篇：UI设计标准流程(精)

一、产品定位与市场分析阶段

1、 目的(UI设计师应了解产品的市场定位、产品定义、客户群体、运行方式等。)

2、 主要执行人员(UI、UE、需求)

3、 需沟通人员(销售)

4、 实现步骤(会议讨论)

5、 UI主要职责：(定义用户群特征、定义最终用户群、定义产品方向)

二、用户研究与分析阶段

1、目的(UI设计师收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。这部分工作有团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析)

2、主要执行人员(UI、UE、需求、技术)

3、需沟通人员(销售)

4、实现步骤(纸搞线稿、黑白稿、原型)

5、UI主要职责(收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。这部分工作有团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析)

三、架构设计阶段

1、目的(这里涉及到比较多的界面交换与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素)

2、主要执行人员(UI、UE、需求部门)

3、需沟通人员(技术、销售)

4、实现步骤(UI进行风格设计出界面，和需求部门拿出定稿;UE对原型进行优化，整理出交互及用户体验方面意见，反馈给UI及需求部门;UID等待效果图，开始代码编制)

5、UI主要职责：(根据可以性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。界面设计、图标设计、风格设计)

四、原型设计阶段

1、目的(根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围)

2、主要执行人员(UI、UE、需求部门)

3、需沟通人员(UID、技术)

4、实现步骤(设计规范;代码及程序开发)

5、UI主要职责：(对前面所以工作以设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围，原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性)

五、界面设计阶段

1、目的(根据原型设计阶段的界面原型，对界面原型进行视觉效果的处理)

2、主要执行人员(UI、UE、技术)

3、需沟通人员(UE、销售)

4、实现步骤

5、UI主要职责：(该阶段确定整个界面的色调、风格、界面、窗口、图标、皮肤的表现)

六、界面输出阶段

1、目的(配合好开发人员完成相关的界面结合)

2、主要执行人员(技术)

3、需

沟通人员(UI、UE、需求部门、销售)

4、实现步骤

5、UI主要职责：(对界面设计阶段的最后结果配合技术部门实现界面设计的实际效果)

七、可用性测试阶段

1、目的(针对一致性测试;信息反馈测试;界面简洁性测试;界面美观度测试;用户动作性测试;行业标准测试)

2、主要执行人员(程序测试部门)

3、需沟通人员(UI、UE、程序、需求部门、销售)

4、实现步骤

5、UI主要职责：(负责原型的可用性测试，发现可用性问题并提出修改意见)

八、完成工作阶段

1、目的(对于前面七个阶段的设计工作进行细节调整)

2、主要执行人员(UI、UE)

3、需沟通人员(技术、销售)

4、实现步骤

5、UI主要职责：(可用性的循环研究、用户体验回馈、测试回馈、UI人员把可行性建议进行完善)

九、产品上线

1、目的(检验前面界面设计的成果是否符合市场及用户群体)

2、主要执行人员(销售)

3、需沟通人员

4、实现步骤

5、UI主要职责：(收集市场对于产品的用户体验，并记录诚文字说明)

十、分析报告及优化方案

1、目的(了解整个界面设计的优缺)

2、主要执行人员(UI、UE)

3、需沟通人员(技术、销售)

4、实现步骤

5、UI主要职责：(对于前九个阶段的界面设计进行详细系统的整理，为下一次界面设计提供有力的市场及专业论据)