UI界面设计规范标准.docx

1、UI界面设计规范标准u I设计（流程/界面）规-：ui设计基本概念与流程1.1目的规公司UI设计流程，使UI设计师参与到产品设计整个坏节中来,对产品的易用性进行全 流程负责,使UI设计的流程规化，保证UI设计流程的可操作性。九2围I界面设计I此文档用于界面设计，本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人 员、界面评审人员和配置测试人员。13概述UI设计包括交互设计,用户硏究，与界面设计三个部分。基于这三部分的UI设计流程是从 个产品立项开始，UI设计师就应根据流程规，参与需求阶段、分析设计阶段、调研验证 阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计

2、师应全面 负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本 规明确规走了 UI设计在各个环节的职责和要求，以保证每个环节的工作质臺。1.4基本介绍A、需求阶段软件产品依然属于工业产品的畴。依然离不开3W的考虑（Who,where,why.）也就是使用 者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用（用户的年龄，性别，爰好，收入，教育程度等）。什么地方用（在办公室/家庭/厂房车间/ 公共场所）0如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相 应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产

3、品比我们提前问世，我们要 比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很 客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。B、 分析设计阶段通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格 的界面用于被选。C、 调硏验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真 实的反馈。测试阶段开始前我们应该对测试的具体细节逬行清楚的分析描述。调硏阶段需要从以下几个问题出发：用户对各套方案的第一E卩象用户对各套方案的综合印象用户对各套方案的单独评价选出最喜欢的选出其次喜欢的

4、对各方案的色彩，文字，图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都需要用图形表达出来，直观科学。D、方案改进阶段经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗 憾等，这样我们就可以逬行下一步修改了。这时候我们可以瞬力投入到一个方案上,将方 案做到细致精美。E、用户验证阶段改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好 的设计师应该在产品上市以后去站柜台。零距离接触最终用户看看用户真正使用时的感想。 为以后的升级版本积累经验资料。经过上面设计过程的描述，大家可以清楚的发现，界面UI设计是一个非常科学

5、的推导公式, 他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调 这个工作过程是设计过程。UI界面设计不存在美工。2. UI设计流程2.1概述根据上述原则,分析公司产品的特点,制定符合软件产品（或项目）生命周期的UI设计流 程。每个产品（或项目）的生命周期中，UI设计师应该严格按照流程,完成每个环节的职 责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质星。二:UI界面用户体验设计原则与规1:应该遵循的基本原则无论是控件使用，提示信息措辞,还是颜色、窗口布局风格，遵循统一的标准,做到真正的0这样得到的好处:1:使用户使用起来能够建立起精确的心里模型,

6、使用熟练了一个界面后,切换到另夕卜一个 界面能够很轻松的推测出各种功能，语句理解也不需要费神理解2:降低培训、支持成本,支持人员不会行费力逐个指导。3:给用户统一感觉，不觉得混乱，心情愉快,支持度增加做法：项目组有经验人士，确立UI规：美工提供色调配色方案,提供整体配色表界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规：控件功能遵循行业标准，windows平台参见Microsoft用户体验控件样式在允许的围可以统F改其样式、色调参考其他软件先进操作，提取对本项目有用的功能，以使用,绝对不能盲从，漫无目的。根据需要,设计特殊操作控彳牛，准则为：简化操作、达到一定功能目的

7、界面实施人员与美工商榷控彳牛可实现性（如不实行此步骤，*各会导致各自对对方工作不满 意,也会产生不一致的混乱）。重复尋代上述工作。建立合理化文档UI标准描述上述规，强行界面设计者理解之，刑乍为开发准则，SQA人员进行监控开发人员是否遵循，及时告诫开发人员。2 : (Color)颜色使用恰当，遵循对比原则：1:统一色调,针对软彳牛类型以及用户工作环境选择恰当色调:如：安全软件,根据工业标准,可以选取黄色,绿色体现环保，蓝色表现时尚、紫色表现浪 漫等等,淡色可以使人舒适，暗色做背景使人不觉得累等2:如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一, 读取系统标准色表3:色

8、盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示 符，?quot;! , ?着重号,以及图标等4:颜色方案也需要测试，常常由于显示器、显卡的问题,色彩表现每台机器都不一样，应 该经过严格测试，不同机器逬行颜色测试5:遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白 色背景容易识别,而在红色背景则不易分辨，原因是红色和蓝色没有足够反差,而蓝色和白 色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。6:整个界面 色彩尽星少的使用类别不同的颜色itop色表具体标准参考美术学统计学术标准。色表的建设,对于美工在图案设计、包装设计上起

9、着 标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。3: (Resource)资源个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。1 :也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成 标准，参考itop的outlookbar图标设计标准2:有标准的图标风格设计,有统一的构图布局，有统一的色调、对比度、色阶,以及图片 风格3:底图应该融于底图，使用浅色，低对比,尽星少的使用颜色。4:图标、图像应该很清晰的表达出意思，遵循常用标准,或者用户机器容易联想的到物件， 绝对不允许画出莫名奇妙的图案。5:鼠标光标样式统一,尽呈

10、使用系统标准,杜绝出现重复的情况,例如某些软件中_个手 的形状就有4钟不同的样子。4 : （Font）字体使用统一字体,字体标准的选择依据操作系统类型决走。中文采用标准字体，宋体，英文采用标准Microsoft Sans Serif不考虑特殊字体（隶书、 草书等，特殊情况可以使用图片取代），保证每个用户使用起来显示嚮艮正常。字体大小根据系统标准字体来，例如MSS字体8磅，宋体的小五号字（9磅）五号字（10.5 磅）。所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况ITop采用BCB ,所有控件默认使用parent font,不允许修改，这样有利于统一调整。系统大小字体属

11、性改变的处理。Windows系统有个桌面设置,设置大字体属性,很多界面设计者常常为这个恼火，如果设 计时遵循微软的标准,全部使用相对大小作为控件的大小设置，当切换大小字体的时候,相 对不会有什么特殊问题。但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。这个情况下，应该做相应处理：1:写程序自动调节大小，点阵值乘以一个相应比例2:全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。5:仃ext)文字表达提示信息、帮助文档文字表达遵循以下准则：1 : 口语化、客气、多用您、请

12、,不要用或少用专业术语,杜绝错别字2:断句逗号句号顿号分号的用法，提示信息比较多的话,应该分段，3:警告、信息、错误使用对应的表示方法4:使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭,则应该 统一SB走。5:根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业属于,用户为 儿童:这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。6: (STYLE)控件风格，不要使用错误控件，控件功能要专有设计好的同一风格的控件，如果没有能力设计出一套控件,则使用标准控件,绝对不能不伦不类,杂乱无章不要错误使用控件，例如：使用Button样式做TTable的功能，拿

13、主菜单条显示信息，统一类型的控彳糕作方式相同,例如一个控件双击可以执行某些动作,而同样控件,双击 却没有彳*可反映个控彳牛只做单一功能,不复用很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。例如改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程星,但是只有 熟练用户才回使用，这种情况下解决方法：1:分组，使用双份控彳牛2 :使用TABLE页，给用户很明显的视觉变化总结起来就是：1.产品制作人，写产品计划书。2.用户体验硏究员，作调查分析。3.信息建构师，设计产品架构。4.互动设计师,作出互动流程。5.视觉设计师

14、和用户界面设计师,作出页面视觉设计。6.前台工程师，前台开发。7.后台工程师,后台开发。8.用户体验硏究员,做用户测试确保质呈。1.确认目标用户在软件设计过程中,需求设计角色会确走软彳牛的目标用户忝取最终用户和直接用户的需求。 用户交互要考虑到目标用户的不同引起的交互设计重点的不同。例如：对于科学用户和对于 电脑入门用户的设计重点就不同。2轴目标T软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计且标需要例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标,那么该目标需 要贯彻软件（软件包）整体，而不是局部。3元素外观T交互元素的外观往往影响用户的交互效果。同一

15、个（类）软件采用一致风格的外观，对于保 持用户焦点，改迸交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡 呈方法。因此需要对目标用户进行调查取得反馈。7 .可用性原则7.1 dT?软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解,那么 需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作,理解其对应的功能。例 如:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除 操作，用户可以更加详细的理解该元素对应的功能,同时可以取消该操作。7.2可达到用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用

16、 户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前 不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能 被深深隐藏（般来说超过4层）那么用户达到该元素的几率就大大降彳氐了。可达到的效 果也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则） Quote阶段一：分析1、 用户需求分析2、 用户交互场景分析3、 竞争产品分析这两者可以说是相辅相成的。对于一个较为正规的项目而言，必然有对用户需求的分析容。具中用户UI需重要的组成部 分。如果说UI设计原则是所有UI设计的出发点的话，那么用户UI需求就是本次设计的出 发点。

17、好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大 部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考 察，但是UI设计人员在分析的时候一走要站在用户角度思考：如果我是用户,这里我会需 要什么。竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所i胃三人行必有 我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当然有 的时候可以参考的并不一走是竞争产品。阶段二：耐采用面向场景、面向事件驱动和面向对象的设计方法。UI设计着重于交互,因此必然要对最终用户的交互场景进行设计。软件是交互产品，用户所作的就是对软件事件的

18、响应以及触 发软件置的事件。因此要面向事件设计。现在的程序开发主流采用的是面向对象设计。面向 对象设计可以有效的体现面向场景和面向事件的特点。设计的四个要素：交互对象, 象，事件（交互事件和异常），动作阶段三：开发通过：用户交互case图（说明用户和系统之间的联系）用户交互流程图（说明交互和事件之间的联系）交互功能设计图（说明功能和交互的对应关系）最终得到UI的设计产品。阶段四：验证 正如UI交互设计原则探讨文中提到的,对于UI产品的验证主要从下面几个方面入手:1、 功能性对照UI设计的再好,和需求不一致也不可以。2、 实用性部测试UI设计的最重要点就是实用性。3、 用户焦点小组UI设计是否优

19、秀的重要衡呈依据。最后，说一点其他的问题。现在往往 认为交互式设计和最终的UI效果设计可以截然分开。这就好比说需求可以和设计截然分开, 是不可能的。QuoteUI设计流程以及设计师参与的环节最近的工作中总结出一条结论：拥有一个完善规的流程，是决走着一个项目走向成功或失败 的关键。对于UI设计的工作流程，我觉得可以根据市场分析-用户分析-架构-原型-界面-输 出-完善这条主线制走,每个环节UI设计师都应参与其中。1.产品走位与市场分析这一类工作大多都是由新产品硏发部门以及市场需求完成的，但UI设计师应了解产品的市 场走位、产品走义、客户群体、运营方式等。2用户研究与分析这个过程是非常重要的，设计

20、师应该找到合适的方法来完成此环节。你可應集相关资料分 析目标用户的使用特征、情感、习惯、心里、需求等，提出用户硏究报告和可用性设计建议。 这部分工作也可和团队配合完成。时间与项目需求允许的情况下更可以制走实景用户分析。3架构耐这里涉及到比较多的界面交互与流程的设计，根据可用性分析结果制走交互方式、操作与跳 转流程、结构、布局、信息、和其他元素。4原型设计我觉得这里应该是一个小的阶段标志，要对前面所有工作加以设计方面的实施，根据逬度与 成本，可以把原型控制在手绘-图形-FLASH-视频几个质呈围。原型的本质更倾向与 个DEMO,它不需要有全部的功能，但要体现出设计对象的基本特性。5界面设计如果很

21、倾向于图形界面设计，这儿是你最喜欢的部分。但一走要结合循环讨论过的分析结果 做设计,否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环 节的关键。6界面输出作为设计师,在这一5分的工作就是配合好开发人员完成相关的界面结合。7.完善工作这个环节是很多部门共同参与的，包括可用性的循环研究、用户体验回馈、测试回馈。同时, UI人员也应该把一些可行性建议进行完善。很多设计师做了东西不喜欢改，这是一个大忌。 如上的流程，可能会有很多部门共同参与完成，UI设计师如何与团队配合并发挥自己应有 的作用非常重要。一名合格的UI设计师，应该能贯穿整个UI流程逬行工作,而并非是单 纯的图形界面设计。