UI界面设计规范方案.docx

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

1、.wd.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.也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应当明确什么人 用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用在办公室/家庭/厂房车间/ 公共场所。如何用鼠标键盘/遥控器/触摸屏。上面的任何一个元素转变结果都会有相应的转变。除此之外在需求阶段同类竞争产

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

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

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

6、的心里模型，使用娴熟了一个界面后，切换到另外一个界面能够很轻松的推想出各种功能，语句理解也不需要费心理解2：降低培训、支持本钱，支持人员不会行费力逐个指导。3：给用户统一感觉，不觉得混乱，心情开心，支持度增加做法：工程组有经受人士，确立 UI 标准：美工供给色调配色方案，供给整体配色表界面掌握程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用标准： 控件功能遵循行业标准，windows 平台参见?Microsoft 用户体验?控件样式在允许的范围内可以统一修改其样式、色调参考其他软件先进操作，提取对本工程有用的功能，以使用，确定不能盲从，漫无目的。依据需要，设计特别操作控件，准那

7、么为：简化操作、到达肯定功能目的界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满足，也会产生不全都的混乱)。重复叠代上述工作。建立合理化文档?UI 标准?描述上述标准，强行界面设计者理解之，并作为开发准那么，SQA 人员进展监控开发人员是否遵循，准时告诫开发人员。2：(Color)颜色使用恰当，遵循比照：1：统一色调，针对软件类型以及用户工作环境选择恰当色调：如：平安软件，依据工业标准，可以选取黄色，绿色表达环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等2：假设没有自己的系列界面，承受标准界面那么可以少考虑此方面，做到与操作系统

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

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

10、5：鼠标光标样式统一，尽量使用系统标准，杜绝消灭重复的状况，例如某些软件中一个手的外形就有 4 钟不同的样子。4：(Font)字体使用统一字体，字体标准的选择依据操作系统类型打算。中文承受标准字体，“宋体，英文承受标准 Microsoft Sans Serif 不考虑特别字体(隶书、草书等,特别状况可以使用图片取代),保证每个用户使用起来显示都很正常。字体大小依据系统标准字体来，例如 MSS 字体 8 磅，宋体的小五号字(9 磅五号字10.5 磅)。全部控件尽量使用大小统一的字体属性，除了特别提示信息、加强显示等例外状况 ITop 承受 BCB，全部控件默认使用 parent font，不允许

11、修改，这样有利于统一调整。系统大小字体属性转变的处理。Windows 系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，假设设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相 对不会有什么特别问题。但是由于常常便利使用点阵作为窗口设计单位，导致转变大字体后，消灭版面混乱的问题。这个状况下，应当做相应处理：1：写程序自动调整大小，点阵值乘以一个相应比例2：全部承受点阵作为单位，不理睬系统字体的调整，这样可以削减调整大字体带来的麻烦。BCB/DELPHI 中多承受这种方法，但是必定结果是和系统不统一。5：(Text)文字表达提示信息、帮助文档文字表达遵

12、循以下准那么： 1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字2：断句逗号句号顿号分号的用法， 提示信息比较多的话，应当分段，3：警告、信息、错误 使用对应的表示方法4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，那么应当统一规定。5: 依据用户不同承受相应的词语语气语调，如专用软件，可以消灭很多专业属于，用户为儿童：这可以语气亲切和气，老年用户那么应当成熟稳重。制定标准遵循之。6：(STYLE)控件风格，不要使用错误控件，控件功能要专一有设计好的同一风格的控件，假设没有力量设计出一套控件，那么使用标准控件，确定不能不伦不类，杂乱无章不要错误使用控件，

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

14、建构师，设计产品架构。4. 互动设计师，作出互动流程。5. 视觉设计师和用户界面设计师，作出页面视觉设计。6. 前台工程师，前台开发。7. 后台工程师，后台开发。8. 用户体验争论员，做用户测试确保质量。1. 确认目标用户在软件设计过程中，需求设计角色会确定软件的目标用户，猎取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。例如：对于科学用户和对于 电脑入门用户的设计重点就不同。2. 设计目标全都软件中往往存在多个组成局部组件、元素。不同组成局部之间的交互设计目标需要全都。例如：假设以电脑操作初级用户作为目标用户，以简化界面规律为设计目标，那么该目标需 要贯彻

15、软件软件包整体，而不是局部。3. 元素外观全都交互元素的外观往往影响用户的交互效果。同一个类软件承受全都风格的外观，对于保持用户焦点，改进交互效果有很大帮助。圆满的是如何确认元素外观全都没有特别统一的衡量方法。因此需要对目标用户进展调查取得反响。7.可用性 7.1 可理解软件要为用户使用，用户必需可以理解软件各元素对应的功能。假设不能为用户理解，那么需要供给一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。例如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加具体的理解该元素对应的功能，同时可以取消该操作。7.2 可到达用户是交

16、互的中心，交互元素对应用户需要的功能。因此交互元素必需可以被用户掌握。用 户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素到达其它在此之前不行见或者不行交互的交互元素。要留意的是交互的次数会影响可到达的效果。当一个功能 被深深隐蔽一般来说超过 4 层那么用户到达该元素的几率就大大降低了。可到达的效果也同界面设计有关。过于简单的界面会影响可到达的效果。参考简洁导向Quote阶段一：分析1、 用户需求分析2、 用户交互场景分析3、 竞争产品分析这两者可以说是相辅相成的。对于一个较为正规的工程而言，必定有对用户需求的分析内容。其中用户UI 需求是重要的组成局部。假设说UI 设计是全部

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

18、对最终用户的交互场景进展设计。软件是交互产品，用户所作的就是对软件大事的响应以及触发软件内置的大事。因此要面对大事设计。现在的程序开发主流承受的是面对对象设计。面 向对象设计可以有效的表达面对场景和面对大事的特点。设计的四个要素：交互对象,数据 对象,大事交互大事和特别,动作阶段三：开发通过：用户交互 case 图说明用户和系统之间的联系用户交互流程图说明交互和大事之间的联系交互功能设计图说明功能和交互的对应关系 最终得到 UI 的设计产品。阶段四：验证正如 UI 交互设计探讨文中提到的，对于UI 产品的验证主要从下面几个方面入手： 1、 功能性比照 UI 设计的再好，和需求不全都也不行以。2

19、、 有用性内部测试 UI 设计的最重要点就是有用性。3、 用户焦点小组 UI 设计是否优秀的重要衡量依据。最终，说一点其他的问题。现在往往认为交互式设计和最终的 UI 效果设计可以截然分开。这就好比说需求可以和设计截然分开， 是不行能的。QuoteUI 设计流程以及设计师参与的环节最近的工作中总结出一条结论：拥有一个完善标准的流程，是打算着一个工程走向成功或失败的关键。对于 UI 设计的工作流程，我觉得可以依据“市场分析用户分析架构原型界面输出完善这条主线制定，每个环节UI 设计师都应参与其中。1. 产品定位与市场分析这一类工作大多都是由产品研发部门以及市场需求完成的，但UI 设计师应了解产品

20、的市场定位、产品定义、客户群体、运营方式等。2. 用户争论与分析这个过程是格外重要的，设计师应当找到适宜的方法来完成此环节。你可以搜集相关资料分 析目标用户的使用特征、情感、习惯、心里、需求等，提出用户争论报告和可用性设计建议。这局部工作也可和团队协作完成。时间与工程需求允许的状况下，更可以制定实景用户分析。3. 架构设计这里涉及到比较多的界面交互与流程的设计，依据可用性分析结果制定交互方式、操作与跳转流程、构造、布局、信息和其他元素。4. 原型设计我觉得这里应当是一个小的阶段标志，要对前面全部工作加以设计方面的实施，依据进度与本钱，可以把原型掌握在“手绘图形FLASH-视频几个质量范围。原型

21、的本质更倾向与一个 DEMO，它不需要有全部的功能，但要表达出设计对象的根本特性。5. 界面设计假设很倾向于图形界面设计，这儿是你最宠爱的局部。但肯定要结合循环争论过的分析结果 做设计，否那么你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。6. 界面输出作为设计师，在这一局部的工作就是协作好开发人员完成相关的界面结合。7. 完善工作这个环节是很多部门共同参与的，包括可用性的循环争论、用户体验回馈、测试回馈。同时， UI 人员也应当把一些可行性建议进展完善。很多设计师做了东西不宠爱改，这是一个大忌。如上的流程，可能会有很多部门共同参与完成，UI 设计师如何与团队协作并发挥自己应有的作用格外重要。一名合格的 UI 设计师，应当能贯穿整个 UI 流程进展工作，而并非是单纯的图形界面设计。