2022年UI界面设计规范.docx

《2022年UI界面设计规范.docx》由会员分享，可在线阅读，更多相关《2022年UI界面设计规范.docx（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -UI 设计流程 / 界面规范一： UI 设计基本概念与流程1.1 目的规范公司 UI 设计流程,使UI 设计师参加到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI 设计的流程规范化,保证UI 设计流程的可操作性；1.2 范畴l 界面设计,本文档的读者对象是项目治理人员、售前服务人员、 UI 界面设计人l 此文档用于界面设计员、界面评审人员和配置测试人员；1.3 概述UI 设计包括交互设计,用户争论,与界面设计三个部分；基于这三部分的 UI 设计流程是从一个产品立项开头,UI 设计师就应依据流程规范

2、,参加需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责；UI 设计师应全面负责产品以用户体验为中心的UI 设计,并依据客户（市场）要求不断提升产品可用性；本规范明确规定了 UI 设计在各个环节的职责和要求,以保证每个环节的工作质量；1.4 基本介绍A、需求阶段软件产品依旧属于工业产品的范畴；依旧离不开3W 的考虑 （Who,where,why.）也就是使 第 1 页,共 14 页 - - - - - - - - - 用者, 使用环境, 使用方式的需求分析；所以在设计一个软件产品之前我们应当明确什么人细心整理归纳 精选学习资料 - - - - - -

3、 - - - - - - - - -名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -用用户的年龄,性别,爱好,收入,训练程度等；什么地方用（在办公室/ 家庭 / 厂房车间 /公共场所）；如何用（鼠标键盘应的转变；/ 遥控器 / 触摸屏）；上面的任何一个元素转变结果都会有相除此之外在需求阶段同类竞争产品也是我们必需明白的；同类产品比我们提前问世,我们要比他作的更好才有存在的价值；那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评判标准的；我们只能说哪个更合适,更合适于我们的最终用户的就是最好的；B、分析设计阶段通过分析上面的需求,我们进入设计阶段；

4、也就是方案形成阶段；我们设计出几套不同风格的界面用于被选；C、调研验证阶段几套风格必需保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观真实的反馈；测试阶段开头前我们应当对测试的具体细节进行清晰的分析描述；调研阶段需要从以下几个问题动身：用户对各套方案的第一印象用户对各套方案的综合印象用户对各套方案的单独评判选出最喜爱的选出其次喜爱的对各方案的颜色,文字,图形等分别打分；结论出来以后请全部用户说出最受欢迎方案的优缺点；全部这些都需要用图形表达出来,直观科学；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 2 页,共 14 页 - -

5、- - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -D、方案改进阶段经过用户调研, 我们得到目标用户最喜爱的方案；而且明白到用户为什么喜爱,仍有什么遗憾等, 这样我们就可以进行下一步修改了；这时候我们可以把精力投入到一个方案上,将方案做到细致精致；E、用户验证阶段改正以后的方案,我们可以将他推向市场；但是设计并没有终止；我们仍需要用户反馈,好的设计师应当在产品上市以后去站柜台；零距离接触最终用户, 看看用户真正使用时的感想；为以后的升级版本积存体会资料；经过上面设计过程的描述,大家可以清晰的发觉,界面 UI 设计是一个特别科学的推导

6、公式,他有设计师对艺术的懂得感悟,但肯定不是仅仅表现设计师个人的绘画；所以我们一再强调这个工作过程是设计过程；UI 界面设计不存在美工；2. UI 设计流程2.1 概述依据上述原就,分析公司产品的特点,制定符合软件产品（或项目）生命周期的 UI 设计流程；每个产品（或项目）的生命周期中,UI 设计师应当严格依据流程,完成每个环节的职责,确保流程精确有效的得到执行,从而提高产品的可用性,提升产品质量；二： UI 界面用户体验设计原就与规范1：应当遵循的基本原就细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 3 页,共 14 页 - - - - - -

7、- - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -无论是控件使用,提示信息措辞,仍是颜色、窗口布局风格,遵循统一的标准,做到真正的一样；这样得到的好处：1：使用户使用起来能够建立起精确的心里模型,使用娴熟了一个界面后,切换到另外一个界面能够很轻松的估计出各种功能,语句懂得也不需要费神懂得2：降低培训、支持成本,支持人员不会行费劲逐个指导；3：给用户统一感觉,不觉得纷乱,心情开心,支持度增加做法：项目组有体会人士,确立 UI 规范：美工供应色调配色方案,供应整体配色表界面掌握程序人员、用户体验人员提出合理统一使用的控件库；参考标准界面使用规范：控件

8、功能遵循行业标准,windows平台参见 Microsoft 用户体验控件样式在答应的范畴内可以统一修改其样式、色调参考其他软件先进操作,提取对本项目有用的功能,以使用,肯定不能盲从,漫无目的；依据需要,设计特殊操作控件,准就为：简化操作、达到肯定功能目的界面实施人员与美工商榷控件可实现性,如不实行此步骤,将会导致各自对对方工作不满意,也会产生不一样的纷乱；重复叠代上述工作； 第 4 页,共 14 页 - - - - - - - - - 建立合理化文档UI 标准描述上述规范,细心整理归纳 精选学习资料 - - - - - - - - - - - - - - -名师归纳总结 精品学习资料 - -

9、 - - - - - - - - - - - - -强行界面设计者懂得之,并作为开发准就,SQA 人员进行监控开发人员是否遵循,准时警告开发人员；2：Color 颜色使用恰当,遵循对比原就：1：统一色调,针对软件类型以及用户工作环境挑选恰当色调：如：安全软件,依据工业标准,可以选取黄色,绿色表达环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒服,暗色做背景使人不觉得累等2：假如没有自己的系列界面,采纳标准界面就可以少考虑此方面,做到与操作系统统一,读取系统标准色表3：色盲、色弱用户,即使使用了特殊颜色表示重点或者特殊的东西,也应当使用特殊指示符, .quot;. , .着重号,以及图标等4

10、：颜色方案也需要测试,经常由于显示器、显卡的问题,颜色表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试5：遵循对比原就：在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景简洁识别, 而在红色背景就不易辨论,缘由是红色和蓝色没有足够反差,而蓝色和白色反差很大；除非特殊场合,杜绝使用对比剧烈,让人产生憎恶感的颜色；6：整个界面颜色尽量少的使用类别不同的颜色itop 色表具体标准参考美术学统计学术标准；色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用；细心整理归纳 精选学习资料 - - - - - -

11、- - - - - - - - - 第 5 页,共 14 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -3：Resource 资源一个多姿多彩的人机交互界面,少不了精致的鼠标光标、图标以及指示图片、底图等；1：也需要遵循统一的规章,包括上述颜色表的建立,图标的建立步骤也应当尽可能的形成标准,参考itop的 outlookbar图标设计标准2：有标准的图标风格设计风格,有统一的构图布局,有统一的色调、对比度、色阶,以及图片3：底图应当融于底图,使用浅色 , 低对比,尽量少的使用颜色；4：图标、 图像应当很清晰的表达出

12、意思肯定不答应画出莫名神奇的图案；5：鼠标光标样式统一,尽量使用系统标准的外形就有 4 钟不同的样子；4：Font 字体,遵循常用标准, 或者用户机器简洁联想的到物件,杜绝显现重复的情形,例如某些软件中一个手使用统一字体,字体标准的挑选依据操作系统类型打算；中文采纳标准字体, “ 宋体” , 英文采纳标准Microsoft Sans Serif 不考虑特殊字体隶书、草书等 ,特殊情形可以使用图片取代,保证每个用户使用起来显示都很正常；字体大小依据系统标准字体来,例如 MSS 字体 8 磅,宋体的小五号字9 磅）五号字 （10.5磅；全部控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示

13、等例外情形ITop 采纳 BCB,全部控件默认使用parent font,不答应修改,这样有利于统一调整； 第 6 页,共 14 页 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - - 系统大小字体属性转变的处理；Windows 系统有个桌面设置,设置大字体属性,许多界面设计者经常为这个恼火,假如设计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体的时候,相对不会有什么特殊问题；但是由于经常便利使用点阵作为窗口设计单

14、位,导致转变大字体后,显现版面纷乱的问题；这个情形下,应当做相应处理：1：写程序自动调剂大小,点阵值乘以一个相应比例2：全部采纳点阵作为单位,不理睬系统字体的调剂,这样可以削减调剂大字体带来的麻烦；BCB/DELPHI 中多采纳这种方法,但是必定结果是和系统不统一；5：Text 文字表达提示信息、帮忙文档文字表达遵循以下准就：1：口语化、客气、多用您、请,不要用或少用专业术语,杜绝错别字2：断句逗号句号顿号分号的用法,提示信息比较多的话,应当分段,3：警告、信息、错误 使用对应的表示方法4：使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,就应当统一规定；5: 依据用户不同

15、采纳相应的词语语气语调,如专用软件,可以显现许多专业属于,用户为儿童：这可以语气亲切和气,老年用户就应当成熟稳重；制定标准遵循之；6：STYLE 控件风格,不要使用错误控件,控件功能要专一细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 7 页,共 14 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -有设计好的同一风格的控件,假如没有才能设计出一套控件,就使用标准控件,肯定不能不伦不类,杂乱无章 不要错误使用控件,例如：使用 Button 样式做 TTable 的功能,拿主

16、菜单条显示版权信息, 统一类型的控件操作方式相同,例如一个控件双击可以执行某些动作,而同样控件,双击却没有任何反映 一个控件只做单一功能,不复用许多人为了写程序便利,喜爱把一个控件在不怜悯形下做不同功能用,这些对用户初次懂得增加难度,只有用户熟识后才能懂得；例如转变红色选项, 左边的参数代表不同的设置,可能由于为了节约控件或者编程量,但是只有娴熟用户才回使用,这种情形下解决方法：1:分组,使用双份控件2：使用 TABLE 页,给用户很明显的视觉变化= 总结起来就是：1. 产品制作人,写产品方案书；2. 用户体验争论员,作调查分析；3. 信息建构师,设计产品架构；4. 互动设计师,作出互动流程；

17、5. 视觉设计师和用户界面设计师,作出页面视觉设计；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 8 页,共 14 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -6. 前台工程师,前台开发；7. 后台工程师,后台开发；8. 用户体验争论员,做用户测试确保质量；1.确认目标用户在软件设计过程中, 需求设计角色会确定软件的目标用户,用户交互要考虑到目标用户的不同引起的交互设计重点的不同；电脑入门用户的设计重点就不同；2.设计目标一样猎取最终用户和直接用户的需求；例如：对于科

18、学用户和对于软件中往往存在多个组成部分（组件、 元素）；不同组成部分之间的交互设计目标需要一样；例如： 假如以电脑操作初级用户作为目标用户,以简化界面规律为设计目标,那么该目标需要贯彻软件（软件包）整体,而不是局部；3.元素外观一样交互元素的外观往往影响用户的交互成效；同一个（类） 软件采纳一样风格的外观,对于保持用户焦点, 改进交互成效有很大帮忙；遗憾的是如何确认元素外观一样没有特殊统一的衡量方法；因此需要对目标用户进行调查取得反馈；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 9 页,共 14 页 - - - - - - - - - 名师归纳总

19、结 精品学习资料 - - - - - - - - - - - - - - -7. 可用性原就7.1 可懂得软件要为用户使用,用户必需可以懂得软件各元素对应的功能；假如不能为用户懂得,那么需要供应一种非破坏性的途径,使得用户可以通过对该元素的操作,懂得其对应的功能；例如：删除操作元素； 用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加具体的懂得该元素对应的功能,同时可以取消该操作；7.2 可达到用户是交互的中心,交互元素对应用户需要的功能；因此交互元素必需可以被用户掌握；用户可以用诸如键盘、 鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不行见或者

20、不行交互的交互元素；要留意的是交互的次数会影响可达到的成效；当一个功能被深深隐匿（一般来说超过4 层）那么用户达到该元素的几率就大大降低了；可达到的效果也同界面设计有关；过于复杂的界面会影响可达到的成效；（参考简洁导向原就）Quote 阶段一：分析 1、 用户需求分析 2、 用户交互场景分析 3、 竞争产品分析这两者可以说是相辅相成的；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 10 页,共 14 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -对于一个较为正规的项目而

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

22、产品；阶段二：设计 采纳面对场景、面对大事驱动和面对对象的设计方法；UI 设计着重于交互,因此必定要对最终用户的交互场景进行设计；软件是交互产品, 用户所作的就是对软件大事的响应以及触发软件内置的大事；因此要面对大事设计；现在的程序开发主流采纳的是面对对象设计；面向对象设计可以有效的表达面对场景和面对大事的特点；设计的四个要素：交互对象 ,数据对象 ,大事（交互大事和反常）,动作阶段三：开发 通过：用户交互 case 图（说明用户和系统之间的联系）用户交互流程图（说明交互和大事之间的联系）交互功能设计图（说明功能和交互的对应关系）阶段四：验证 最终得到 UI 的设计产品；细心整理归纳 精选学习

23、资料 - - - - - - - - - - - - - - - 第 11 页,共 14 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -正如 UI 交互设计原就探讨文中提到的,对于UI 产品的验证主要从下面几个方面入手：1、 功能性对比 UI 设计的再好,和需求不一样也不行以；2、 有用性内部测试 UI 设计的最重要点就是有用性；3、 用户焦点小组 UI 设计是否优秀的重要衡量依据；最终,说一点其他的问题；现在往往认为交互式设计和最终的 UI 成效设计可以截然分开；这就好比说需求可以和设计截然分开,是不行能的；Qu

24、ote UI 设计流程以及设计师参加的环节最近的工作中总结出一条结论：拥有一个完善规范的流程,是打算着一个项目走向胜利或失败的关键；对于 UI 设计的工作流程,我觉得可以依据“ 市场分析用户分析架构原型界面输出完善” 这条主线制定,每个环节 UI 设计师都应参加其中；1.产品定位与市场分析这一类工作大多都是由新产品研发部门以及市场需求完成的,但场定位、产品定义、客户群体、运营方式等；2.用户争论与分析UI 设计师应明白产品的市这个过程是特别重要的,设计师应当找到合适的方法来完成此环节；你可以搜集相关资料分 第 12 页,共 14 页 - - - - - - - - - 析目标用户的使用特点、情

25、感、习惯、心里、 需求等, 提出用户争论报告和可用性设计建议；这部分工作也可和团队协作完成；时间与项目需求答应的情形下,更可以制定实景用户分析；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - -名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -3.架构设计这里涉及到比较多的界面交互与流程的设计,依据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素；4.原型设计我觉得这里应当是一个小的阶段标志,要对前面全部工作加以设计方面的实施,依据进度与成本,可以把原型掌握在“ 手绘图形FLASH- 视频” 几个质量

26、范畴；原型的本质更倾向与一个 DEMO ,它不需要有全部的功能,但要表达出设计对象的基本特性；5.界面设计假如很倾向于图形界面设计,这儿是你最喜爱的部分；但肯定要结合循环争论过的分析结果做设计,否就你的作品很难被人信服；色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键；6.界面输出作为设计师,在这一部分的工作就是协作好开发人员完成相关的界面结合；7.完善工作这个环节是许多部门共同参加的,包括可用性的循环争论、用户体验回馈、 测试回馈； 同时, 第 13 页,共 14 页 - - - - - - - - - UI 人员也应当把一些可行性建议进行完善；许多设计师做了东西不喜爱改,这是一个大忌；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - -名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -如上的流程,可能会有许多部门共同参加完成,UI 设计师如何与团队协作并发挥自己应有的作用特别重要；一名合格的UI 设计师,应当能贯穿整个UI 流程进行工作,而并非是单纯的图形界面设计；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 14 页,共 14 页 - - - - - - - - -