2022年UI界面设计规范

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

2、应的岗位职责。ui 设计师应全面负责产品以用户体验为中心的ui 设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了ui 设计在各个环节的职责和要求，以保证每个环节的工作质量。1.4 基本介绍a、需求阶段软件产品依然属于工业产品的范畴。依然离不开3w 的考虑 （who,where,why.）也就是使用者， 使用环境， 使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 1 页，共 14 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - -

3、- - - - - - - - 第 1 页，共 14 页 - - - - - - - - -用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/ 家庭 / 厂房车间 /公共场所）。如何用（鼠标键盘/ 遥控器 / 触摸屏）。上面的任何一个元素改变结果都会有相应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。b、分析设计阶段通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设

4、计出几套不同风格的界面用于被选。c、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。调研阶段需要从以下几个问题出发：用户对各套方案的第一印象用户对各套方案的综合印象用户对各套方案的单独评价选出最喜欢的选出其次喜欢的对各方案的色彩，文字，图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都需要用图形表达出来，直观科学。精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 2 页，共 14 页 - - - - - - - - -

5、精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 2 页，共 14 页 - - - - - - - - -d、方案改进阶段经过用户调研， 我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等， 这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。e、用户验证阶段改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户， 看看用户真正使用时的感想。为以后的升级版本积累经验资料。经过上面设计过程的描述，大家可以清楚的发现，界

6、面 ui 设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。ui 界面设计不存在美工。2. ui 设计流程2.1 概述根据上述原则，分析公司产品的特点，制定符合软件产品（或项目）生命周期的ui 设计流程。每个产品（或项目）的生命周期中，ui 设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。二： ui 界面用户体验设计原则与规范1：应该遵循的基本原则精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 3 页，共 1

7、4 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 3 页，共 14 页 - - - - - - - - -无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。这样得到的好处：1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解2：降低培训、支持成本，支持人员不会行费力逐个指导。3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加做法：项目组有经验人士，确立ui 规范：美工提供色调配色方案，提供整

8、体配色表界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：控件功能遵循行业标准，windows平台参见 microsoft 用户体验控件样式在允许的范围内可以统一修改其样式、色调参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。建立合理化文档ui 标准描述上述规范，精品学习资料 可选择p d f - - - - - - - - - - - - - - 第

9、 4 页，共 14 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 4 页，共 14 页 - - - - - - - - -强行界面设计者理解之，并作为开发准则，sqa 人员进行监控开发人员是否遵循，及时告诫开发人员。2：(color)颜色使用恰当，遵循对比原则：1：统一色调，针对软件类型以及用户工作环境选择恰当色调：如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操

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

11、工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 5 页，共 14 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 5 页，共 14 页 - - - - - - - - -3：(resource)资源一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的

12、 outlookbar图标设计标准2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格3：底图应该融于底图，使用浅色 , 低对比，尽量少的使用颜色。4：图标、 图像应该很清晰的表达出意思，遵循常用标准， 或者用户机器容易联想的到物件，绝对不允许画出莫名奇妙的图案。5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4 钟不同的样子。4：(font) 字体使用统一字体，字体标准的选择依据操作系统类型决定。中文采用标准字体， “宋体”， 英文采用标准microsoft sans serif 不考虑特殊字体(隶书、草书等 ,特殊情

13、况可以使用图片取代),保证每个用户使用起来显示都很正常。字体大小根据系统标准字体来，例如mss 字体 8 磅，宋体的小五号字(9 磅）五号字 （10.5磅)。所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况itop 采用 bcb，所有控件默认使用parent font，不允许修改，这样有利于统一调整。精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 6 页，共 14 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 6 页，共 14 页 - - -

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

15、则：1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字2：断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段，3：警告、信息、错误使用对应的表示方法4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。5: 根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。6：(style) 控件风格，不要使用错误控件，控件功能要专一精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 7 页，共 14 页 - - - - -

16、- - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 7 页，共 14 页 - - - - - - - - -有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章不要错误使用控件，例如：使用 button样式做 ttable 的功能，拿主菜单条显示版权信息，统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映一个控件只做单一功能，不复用很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。例如改变红色

17、选项， 左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才回使用，这种情况下解决方法：1:分组，使用双份控件2：使用 table 页，给用户很明显的视觉变化= 总结起来就是：1. 产品制作人，写产品计划书。2. 用户体验研究员，作调查分析。3. 信息建构师，设计产品架构。4. 互动设计师，作出互动流程。5. 视觉设计师和用户界面设计师，作出页面视觉设计。精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 8 页，共 14 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - -

18、 - - - - 第 8 页，共 14 页 - - - - - - - - -6. 前台工程师，前台开发。7. 后台工程师，后台开发。8. 用户体验研究员，做用户测试确保质量。1.确认目标用户在软件设计过程中， 需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。例如：对于科学用户和对于电脑入门用户的设计重点就不同。2.设计目标一致软件中往往存在多个组成部分（组件、 元素）。不同组成部分之间的交互设计目标需要一致。例如： 如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是

19、局部。3.元素外观一致交互元素的外观往往影响用户的交互效果。同一个（类） 软件采用一致风格的外观，对于保持用户焦点， 改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 9 页，共 14 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 9 页，共 14 页 - - - - - - - - -7.可用性原则7.1 可理解软件要为用户使用，用户必须可以理解软件各元素对

20、应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。例如：删除操作元素。 用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。7.2 可达到用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、 鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4 层）那么用户达到该元素的几率就大大降低了。可达到的效果

21、也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则）quote 阶段一：分析 1、 用户需求分析2、 用户交互场景分析3、 竞争产品分析这两者可以说是相辅相成的。精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 10 页，共 14 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 10 页，共 14 页 - - - - - - - - -对于一个较为正规的项目而言，必然有对用户需求的分析内容。其中用户ui 需求是重要的组成部分。如果说ui 设计原则是所有

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

23、户的交互场景进行设计。软件是交互产品， 用户所作的就是对软件事件的响应以及触发软件内置的事件。因此要面向事件设计。现在的程序开发主流采用的是面向对象设计。面向对象设计可以有效的体现面向场景和面向事件的特点。设计的四个要素：交互对象,数据对象 ,事件（交互事件和异常）,动作阶段三：开发 通过：用户交互case 图（说明用户和系统之间的联系）用户交互流程图（说明交互和事件之间的联系）交互功能设计图（说明功能和交互的对应关系）最终得到ui 的设计产品。阶段四：验证 精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 11 页，共 14 页 - - - - -

24、- - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 11 页，共 14 页 - - - - - - - - -正如 ui 交互设计原则探讨文中提到的，对于ui 产品的验证主要从下面几个方面入手：1、 功能性对照ui 设计的再好，和需求不一致也不可以。2、 实用性内部测试ui 设计的最重要点就是实用性。3、 用户焦点小组ui 设计是否优秀的重要衡量依据。最后，说一点其他的问题。现在往往认为交互式设计和最终的ui 效果设计可以截然分开。这就好比说需求可以和设计截然分开，是不可能的。quote ui 设计流程以及设计师参与的环节最近的工作中总结出

25、一条结论：拥有一个完善规范的流程，是决定着一个项目走向成功或失败的关键。对于 ui 设计的工作流程，我觉得可以根据“市场分析用户分析架构原型界面输出完善”这条主线制定，每个环节ui 设计师都应参与其中。1.产品定位与市场分析这一类工作大多都是由新产品研发部门以及市场需求完成的，但ui 设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。2.用户研究与分析这个过程是非常重要的，设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、 需求等， 提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析。精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 12 页，共 14 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - -