UI界面设计规范方案模板

1、UI界面设计规范方案模板（总1 6页）本页仅作为文档封面，使用时可以删除This document is for reference only-rar21 year.MarchUI设计（流程/界面）规范一：UI设计基本概念与流程目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证 UI设计流程的可操作性。范围I界面设计I此文档用于界而设计，本文档的读者对象是项目管理人员、售前服务人员、UI界而设计人员、界而评审人员和配亶测试人员。 概述UI设计包括交互设计，用户研究，与界而设让三个部分。基于这三部分的UI设计流程是 从一个

2、产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研 验证阶 段、方案改进阶段、用户验证反馈阶段等环肖，履行相应的岗位职责。UI设汁师应 全面负责产品以用户体验为中心的 UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规泄了 UI设计在各个环节的职责和要求，以保证每个环节的工作质量。基本介绍A、需求阶段软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用（用户的年龄，性别，爱好，收入，教育程度等）。什么地方用（在办公室/家庭/厂房车 间/

3、公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上而的任何一个元素改变结果都会有相应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们 要比 他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。B、分析设计阶段通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界而用于被选。C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。测试阶段开始前我们应该对测试的具体细肖进行晴楚的分

4、析描述。调研阶段需要从以下几个问题出发：用户对各套方案的第一印象用户对各套方案的综合印彖用户对各套方案的单独评价选出最喜欢的选出其次喜欢的对各方案的色彩，文字，图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都需要用图形表达出来，直观科学。D、方案改进阶段遗憾经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么等，这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。E、用户验证阶段改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最

5、终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。 经过上而设计过程的描述，大家可以清楚的发现，界面UI设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界而设讣不存在美工。. UI设计流程概述根据上述原则，分析公司产品的特点，制泄符合软件产品（或项目）生命周期的UI设计流程。每个产品（或项目）的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。二：UI界面用尸体验设计原则与规范1:应该遵循的基本原则准，做无论是控件使用

6、，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标到真正的一致。这样得到的好处：1:使用片使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解2：降低培训、支持成本，支持人员不会行费力逐个指导。3：给用尸统一感觉，不觉得混乱，心情愉快，支持度增加做法：项H组有经验人士，确立 ui规范：美工提供色调配色方案，提供整体配色表界面控制程序人员、用尸体验人员提出合理统一使用的控件库。参考标准界面使用规范：控件功能遵循行业标准， windows平台参见Microsoft用尸体验控件样式在允许的范围内可以统一修改其样式、色调参考其

7、他软件先进操作，提取对本项 LI有用的功能，以使用，绝对不能盲从，漫无H的。根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能口的界面实施人员与美工商榷控件可实现性 ,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱 )。重复叠代上述工作。建立合理化文档UI标准描述上述规范，强行界面设讣者理解之，并作为开发准则，SQA人员进行监控开发人员是否遵循，及时告诫开发人员。2： (Color)颜色使用恰当，遵循对比原则：1：统一色调，针对软件类型以及用片工作环境选择恰当色调：如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时 尚、紫色表现浪漫等等，淡色可以使

8、人舒适，暗色做背景使人不觉得累等 TOC o 1-5 h z 2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表3：色盲、色弱用片，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，quot;!,着重号，以及图标等4：颜色方案也需要测试，常常山于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝 色 文字以口色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没 有足够 反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈

9、，让人产生憎恶感的颜色。6：整个界面色彩尽M少的使用类别不同的颜色itop色表具体标准参考美术学统讣学术标准。色表的建设，对于美工在图案设计、包装 设计 上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有旗可循的作用。: (Resource)资源一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、 底图等。1：也需要遵循统-的规则，包括上述颜色表的建立，图标的建立步骤也应该尽 可能的形成标准，参考itop的outlookbar图标设讣标准2：有标准的图标风格 设讣，有统一的构图布局，有统一的色调、对比度、色 阶， 以及图片风格3：底图应该融于底图，使用浅色，低对比

10、，尽M少的使用颜色。4：图标、图像应该很清晰的表达出意 思，遵循常用标准，或者用片机器容易联想的到物件，绝对不允许画出莫名奇妙的图案。5：鼠标光标样式统一，尽M使用系统标准，杜绝出现重复的情况，例如莫些软件中一个手的形状就有4钟不同的样子。;（ Font ）字体使用统一字体，字体标准的选择依据操作系统类型决定。中文采用标准字体，宋体，英文采用标准Microsoft Sans Serif不考虑特殊字体（隶书、草书等，特殊情况可以使用图片取代），保证每个用片使用起来显示都很正常。字体大小根据系统标准字体来，例如MSS字体8磅，宋体的小五号字（9磅）五号字（磅）。所有控件尽M使用大小统一的字体属性，

11、除了特殊提示信息、加强显示等例外情况ITop采用BCB,所有控件默认使用parent font,不允许修改，这样有利于统一调整。?系统大小字体属性改变的处理。Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设讣时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。但是山于常常方便使用点阵作为窗口设讣单位，导致改变大字体后，出现版面混乱的问题。这个情况下，应该做相应处理：1:写程序自动调节大小，点阵值乘以一个相应比例2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体 带 来的麻烦。BCB/DELP

12、HI中多采用这种方法，但是必然结果是和系统不统一。: (Text)文字表达提示信息、帮助文档文字表达遵循以下准则：1： 口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字2：断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段，3：警告、信息、错误使用对应的表示方法4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。5：根据用片不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用尸为儿童：这可以语气亲切和蔼，老年用尸则应该成熟稳重。制定标准遵循之。6: (STYLE)控件风格，不要使用错误控件，控件功能要专一有设计好的同一风格的控件

13、，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无革?不要错误使用控件，例如：使用Button样式做TTable的功能，拿主菜单条显示版权信息,?统一类型的控件操作方式相同，例如一个控件双击可以执行莫些动作，而同样控件，双击却没有任何反映?一个控件只做单一功能，不复用很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用片初次理解增加难度，只有用尸熟悉后才能理解。例如改变红色选项，左边的参数代表不同的设置，可能山于为了节省控件或者编程i:但是只有熟练用片才回使用，这种情况下解决方法：1:分组，使用双份控件2：使用TABLE页，给用片很明显的视觉变化总结起来就

14、是：1?产品制作人，写产品计划书。.用尸体验研究员，作调查分析。.信息建构师，设计产品架构。4?互动设计师，作出互动流程。.视觉设计师和用片界面设计师，作出页面视觉设计。6?前台工程师，前台开发。7?后台工程师，后台开发。8?用尸体验研究员，做用片测试确保质.确认目标用尸在软件设计过程中，需求设计角色会确定软件的 LI标用尸，获取最终用尸和宜 接 用片的需求。用尸交互要考虑到 LI标用片的不同引起的交互设计重点的不 同。例 如：对于科学用尸和对于电脑入门用片的设计重点就不同。.设计LI标一致软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计LI标需要一致。例如：如果以电脑操作

15、初级用片作为L1标用片，以简化界面逻 辑为设计言丁标，那么该LI标需要贯彻软件（软件包）整体，而不是局部。.元素外观一致交互元素的外观往往影响用尸的交互效果。同一个（类）软件采用一致风格的外观，对于保持用尸焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡M方法。因此需要对 LI标用片进行调查取得反馈。?可用性原则可理解软件要为用片使用，用片必须可以理解软件各元素对应的功能。如果不能为用片理解，那么需要提供一种非破坏性的途径，使得用尸可以通过对该元素的操作，理解其对应的功能。例如：删除操作元素。用片可以点击删除操作按钮， 提示用六如何删除操作或者是否确认删除操作，用片可

16、以更加详细的理解该元素对应的功能，同时可以取消该操作。可达到用片是交互的中心，交互元素对应用尸需要的功能。因此交互元素必须可以被用尸控制。用片可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素的次数会影响达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互那么用尸达到该元素于复杂的界面会影响可可达到的效果。当一个功能被深深隐藏（一般来说超过4层）的儿率就大大降低了。可达到的效果也同界面设计有关。过达到的效果。（参考简单导向原则）Quote阶段一：分析1、用尸需求分析2、用尸交互场景分析3、竞争产品分析这两者可以说是相辅相成的。对于一个较为正规的项LI而言，必然有对用尸需求的

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

18、向场景、面向事件驱动和面向对象的设计方法。ui设计着重于交互，因 此必然要对最终用尸的交互场景进行设计。软件是交互产品，用片所作的就是对软件事件的响应以及触发软件内置的事件。因此要面向事件设计。现在的程序开发主流采用的是面向对象设计。面向对象设计可以有效的体现面向场景和面向事件的特点。设计的四个要素：交互对象，数据对象，事件（交互事件和异常），动作阶段三：开发通过：用片交互case图（说明用片和系统之间的联系）用片交互流程图（说明 交 互和事件之间的联系）交互功能设计图（说明功能和交互的对应关系）最终 得到UI的设计产品。阶段四：验证正如UI交互设计原则探讨文中提到的，对于UI产品的验证主要从

19、下面儿个方 面入手：1、功能性对照UI设计的再好，和需求不一致也不可以。2、实用性内部测试UI设汁的最重要点就是实用性。3、用片焦点小组UI设计是否优秀的重要衡M依据。最后，说一点其他的问题。现在往往认为交互式设计和最终的 UI效果设计可以截然分开。这就好比说需求可以和设计截然分开，是不可能的。QuoteUl设计流程以及设计师参与的环节最近的工作中总结出一条结论：拥有一个完善规范的流程，是决定着一个项LI走向成功或失败的关键。对于ui设计的工作流程，我觉得可以根据市场分析一用片分析一架构一原型 一界 面一输出一完善这条主线制定，每个环节ui设计师都应参与其中。.产品定位与市场分析这一类工作大多都是由新产品研发部门以及市场需求完成的，但ui设讣师应了 解产品的市场定位、产品定义、客尸群体、运营方