UI界面设计标准规范.doc

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：也需要遵照统一规则，包含上述颜色表建立，图标建立步骤也应该尽可能形成标准，参考itopoutlookbar图标设计标准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步骤进行工作，而并非是单纯图形界面设计。