UI概念设计规划-必和设计

UIUser

interfacedesign不是浮云ZacDingUI概念导入UI设计层次UI设计流程设计原则与规范市场现状分析品牌目标UI的概念导入UI是什么UI的发展历程UI设计的内涵UI是什么UI的本意是用户界面，是英文user和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。UI的发展历程在西方，UI行业的兴起要归功于以计算机为主的高科技迅速发展，尤其是视窗操作系统的普及，然而广义的UI概念在十七世纪的工业革命阶段就已经开始，只不过，把易用性带入机械的设计还是一种无意识的举动，再加上当时几乎所有的工业程序都是由熟练工人一手操办，就更加减弱了易用性设计的能见度。当大型计算机刚刚研制出来的时候，可能因为为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。UI设计的内涵UI设计的重要性UI设计的用户UI设计好坏的判断UI设计的内涵其实UI设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给用户带来舒适的视觉享受，拉近人与设备的距离，为商家创造卖点。UI设计的核心：交互设计，是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。人机交互科学是跨学科的科学，包括了计算机科学，心理学，社会学，人类学，以及工业设计。UI设计的内涵UI设计的重要性UI设计的用户UI设计好坏的判断UI设计的重要性UI设计所倡导的是可用，易用，及舒适的人机互动体验，这对使用者来说是一个长期的感知过程，它不会像产品的其他外在因素一样马上被用户发现，但如果商家忽略UI设计,那将使产品冠上消极的印象并在长时间内很难消除。UI设计的优势在产品竞争中扮演的重要角色是无庸置疑的，但是，这种优势实现和意识都是长期性的，而非短期行为。他意味着需要相当长的时间让客户了解到，但是一旦形成此种心理上的优势，就会在很长的时间内存在，会将易用的心理暗示代入整个产品的后续开发甚至整个品牌。UI设计的内涵UI设计的重要性UI设计的用户UI设计好坏的判断UI设计的用户我们可将用户大致分为两种：以过程为主的用户(processorientedenduser)，以结果为主的用户(resultorientedenduser)。过程为主的用户的典型例子是电玩族，他们追求的终级目标就是视觉听觉的冲击和享受，最终游戏的结果反而变得不是那么重要了。此类设计对视觉和创意的要求是极为挑剔的，与结果为主的用户设计相比，它的市场和受众都要小的多。结果为主的用户不在乎用什么样的方式完成任务，但是任务必须以最短的时间，以最简洁的方式，最精确的运算结果来完成。这些用户通常是工业化软件的受众，工作环境以大型企业为主，软件最终运算结果对于企业的运行和管理有着重大的意义，稍有偏差，可能会对企业产生重大损失。对于此类用户的产品设计人员来讲，绝大部分部分时间可能用在设计任务的逻辑流程(logicaltaskflow),以期最大幅度的符合人脑的思考方式和认知过程(cognitiveprocess)。UI设计的内涵UI设计的重要性UI设计的用户UI设计好坏的判断UI设计好坏的判断UI设计的好坏，必须设定一个任务，从头至尾使用一遍才能知道。UI的概念是动态的过程，是逻辑的推理，也是各种状况的预测。如果衡量UI设计只有一种标准，那就是用户体验(UserExperience).用户体验是以用户为中心的设计(UCD/UserCenteredDesign)中最重要的一个部分,强调的是过程，是软件对用户行为(UserAction)产生的反应与用户期待值的误差测试，也就是说，这种误差越小，也就越符合以用户为中心的设计原则。UI设计的层次用户研究/结构设计交互设计视觉设计用户研究要进行界面开发设计，用户分析是第一步。我们必须了解各类用户的习性，技能、知识和经验，任何一个元素改变结果都会有相应的改变。需求阶段同类竞争产品我们必须了解。同类产品比我们提前问世，我们要做得更好才有存在的价值。单纯的界面美学考虑好坏不会客观的评价标准，合适于我们最终用户的就是最好的。用户研究/结构设计什么人用什么地方用如何用做什么用用户研究whowhereWhenwhy年龄性别爱好收入教育公司家庭户外公共区学校鼠标键盘遥控触摸声控沟通管理设计娱乐办公结构设计结构设计也称概念设计ConceptualDesign结构设计建立在用户研究的基础上，是界面设计的骨架。UI的结构设计将直接影响到后期产品的软件集成、硬件配置、外观造型设计等诸多因素。UI的结构设计构筑了产品设计的基础。如只有首先确定了手机菜单的结构交互形式，才能在造型设计上决定是采用五项键或上下键。

交互设计交互设计InteractiveDesign交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。人的因素应作为设计的核心被体现出来。人和机器的互动过程（HumanMachineInteraction）中，有一个层面，即我们所说的界面（interface）。HumanMachineInteractionInterface情感感觉触觉听觉视觉界面设计界面设计Interface界面可分为感觉和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是人与机器之间传递和交换信息的媒介，包括硬件界面和软件界面，是计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向置界面于用户的控制之下减少用户的记忆负担保持界面的一致性1984“交互设计”作为一门新学科由比尔•莫格里奇（IDEO的一位创始人）提出。交互设计原则01)有清楚的错误提示。误操作后，系统提供有针对性的提示。

02)让用户控制界面。“下一步”、“完成”，面对不同层次提供多种选择，给不同层次的用户提供多种可能性。03)提供多种可能性。允许兼用鼠标和键盘。同一种功能，同时可以用鼠标和键盘。

04)允许工作中断。例如用手机写新短信的时候，收到短信或电话，完成后回来仍能够找到刚才正写的新短信。05)使用用户的语言。而非技术的语言。

06)提供快速反馈。给用户心理上的暗示，避免用户焦急。

07)方便退出。如手机的退出，是按一个键完全退出，还是一层一层的退出。提供两种可能性。08)导航功能。随时转移功能，很容易从一个功能跳到另外一个功能。

09)让用户知道自己当前的位置。使其做出下一步行动的决定。初级阶段目标使操作更简便、快捷、有效、易学、安全、高效、好记、少错。01)简易性。界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。02)用户语言。界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。03)记忆负担最小化。人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25％的遗忘率。所以对用户来说，浏览信息要比记忆更容易。04)一致性。是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与游戏内容相一致。

05)清楚。在视觉效果上便于理解和使用。06)用户的熟悉程度。用户可通过已掌握的知识来使用界面，但不应超出一般常识。07)从用户的观点考虑。想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计。如：书籍对比竹简。08)排列。一个有序的界面能让用户轻松的使用。09)安全性。用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。10)灵活性。简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄)。11)人性化。高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。界面设计原则视觉设计视觉设计VisualDesign在结构设计的基础上，参照目标群体的心理模型和任务达成进行视觉设计。包括色彩、字体、页面、排版、动画等。视觉设计要达到用户愉悦使用的目的。视觉设计原则视觉设计的原则：01）界面清晰明了。允许用户定制界面。02）减少短期记忆的负担。让计算机帮助记忆，例：UserName,、Password、IE进入界面地址可以让机器记住。

03）依赖认知而非记忆。如打印图标的记忆、下拉菜单列表中的选择04）提供视觉线索。图形符号的视觉的刺激；GUI（图形界面设计）：Where,What,NextStep

05）提供默认（default）、撤销（undo）、恢复（redo）的功能06）提供界面的快捷方式07）尽量使用真实世界的比喻。如：电话、打印机的图标设计，尊重用户以往的使用经验。08）完善视觉的清晰度。条理清晰；图片、文字的布局和隐喻不要让用户去猜。

09）界面的协调一致。如手机界面按钮排放，左键肯定；右键否定；或按内容摆放。10）同样功能用同样的图形。11）色彩与内容。整体软件不超过5个色系，尽量少用红色、绿色。近似的颜色表示近似的意思。经过上面设计过程的描述，大家可以清楚的发现，UI设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程，但更是一个科学的推演过程。第一阶段：基础调研竞争产品分析寻找市场上的竞争产品，挑选3-5款进行解剖分析。整理竞争产品的功能规格；并分析规格代表的需求，需求背后的用户和用户目标；分析竞争产品的功能结构和交互设计，从产品设计的角度解释其优点、缺点及其原因，成为我们产品设计的第一手参考资料。领域调研结合上述分析基础和资料，纵观领域竞争格局、市场状况，利用网络论坛、关键字搜索等手段获得更多用户反馈、观点、前瞻性需求。产出物相应的对比分析文档和领域调研报告开发流程竞争产品分析领域调研产出物新产品开发任务第二阶段：产品分析产品定位从软件提供者的角度分析产品推出的意义和重点关注的方面，实际考量、丰满决策层的idea，明确列出产品定位，通过讨论修缮取得决策层的认可；用户分析

结合竞争产品的分析资料，采用定性分析的方法，获得对产品目标用户在概念层面的认识；产品概述

以软件提供的身份，以最简短的文字，向用户介绍产品，突出产品对用户的价值。避免功能点的简单罗列，而应该在归纳总结的基础上突出重点；功能需求规格整理

在归纳关键功能的基础上，结合竞争产品规格整理的领域认识，从逻辑上梳理需求规格列表，重在逻辑关系清楚、组织和层级关系清晰。划定项目（设计和研发）范围；产出物

用户分析文档和产品概述、功能规格列表开发流程产品定位用户分析产品概述功能需求规格整理产出物第一次Check是/否通过？第三阶段：交互设计（功能结构和交互流程设计）产品概念模型分析从产品功能逻辑入手，结合对常见软件的经验积累和竞争产品的认识，加上对用户的理解，为产品设计一个尽量接近用户对产品运行方式理解的概念模型，成为产品设计的基础框架；功能结构图在产品概念模型的基础上丰富交互组件，并理顺交互组件之间的结构关系；使用场景分析模拟典型用户执行关键功能达到其目标的使用场景；交互流程分析模拟在上述概念模型和功能结构决定的产品框架之中，支持使用场景的关键操作过程（即鼠标点击步骤和屏幕引导路径）；产出物

产品设计文档的交互设计部分开发流程概念模型分析功能结构图使用场景分析交互流程分析产出物第一次Check是/否通过？第四阶段：原型设计（信息架构和界面原型设计）信息架构和界面原型设计设计产品界面中应该包含的控件数量和类型、控件之间的逻辑和组织关系，以支持用户对控件或控件组所代表的功能的理解，对用户操作的明确引导；所有界面设计成为一套完整的可模拟的产品原型；设计要点说明

对界面设计的重点添加说明，帮助涉众对设计的理解；

产出物

产品设计文档的原型设计部分开发流程信息架构和界面原型要点说明产出物第一次Check是/否通过？第五阶段：详细设计（详细设计和伪代码编写）详细设计完善设计细节、交互文本和信息设计（Messagebox）；设计和逻辑说明

对界面控件/控件组/窗口的属性和行为进行标准化定义，梳理完整的交互逻辑，用状态迁移图或伪代码形式表示；产出物产品设计文档的详细设计部分开发流程详细设计设计和逻辑说明产出物第四次Check是/否通过？第六阶段：设计维护（研发跟踪和设计维护）语言文档整理设计通过评审之后，把产品中所有的交互文本整理成excel文档，预备研发工作；研发跟踪维护

进入研发阶段后负责为研发工程师解释设计方案、问题修改、文档完善、Bug跟踪等；

产出物

产品语言文档，设计调整维护开发流程完成设计进入设计维护End竞争产品分析领域调研产出物新产品开发任务产品定位用户分析产品概述功能需求规格整理产出物Check是/否通过？概念模型分析功能结构图使用场景分析交互流程分析产出物Check是/否通过？信息架构和界面原型要点说明产出物Check是/否通过？详细设计设计和逻辑说明产出物Check是/否通过？完成设计进入设计维护EndBASICRESEARCHPRODUCTANALYSEINTERACTIONDESIGNPROTOTYPEDESIGNDETAILEDDESIGNUSER职能主导关系功能需求结构设计交互设计视觉设计DEMOUI设计（交互/视觉/编码）实现PMORTEAMLEADER软件工程师用户体验UserExperience战略层：目标和用户需求范围层：功能规格和内容需求结构层：交互设计与信息架构框架层：界面设计、导航设计和信息设计表现层：视觉设计无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。做法：项目组有经验人士，确立UI规范：美工提供色调配色方案，提供整体配色表界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：控件功能遵循行业标准，windows平台参见《Microsoft用户体验》控件样式在允许的范围内可以统一修改其样式、色调参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。建立合理化文档《UI标准》描述上述规范，强行界面设计者理解之，并作为开发准则，SQA人员进行监控开发人员是否遵循，及时告诫开发人员。用户体验原则规范基本原则1：统一色调，针对软件类型以及用户工作环境选择恰当色调：如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。6：整个界面色彩尽量少的使用类别不同的颜色itop色表具体标准参考美术学统计学术标准。色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。用户体验原则规范颜色使用一个多姿多彩的人机交互界面，少不了精美的图标、图片、动画、底图等。1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格3：底图应该融于底图，使用浅色,低对比，尽量少的使用颜色。4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出莫名奇妙的图案。5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。用户体验原则规范资源运用使用统一字体(Font)，字体标准的选择依据操作系统类型决定。中文采用标准字体，“宋体”，英文采用标准MicrosoftSansSerif不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。字体大小根据系统标准字体来，例如MSS字体8磅，宋体的小五号字(9磅）五号字（10.5磅)。所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况ITop采用BCB，所有控件默认使用parentfont，不允许修改，这样有利于统一调整。系统大小字体属性改变的处理。Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。这个情况下，应该做相应处理：1：写程序自动调节大小，点阵值乘以一个相应比例2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。用户体验原则规范字体标准提示信息、帮助文档文字表达(Text)遵循以下准则：1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字2：断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段，3：警告、信息、错误使用对应的表示方法4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。5:根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。用户体验原则规范文字表达控件风格(STYLE)不要使用错误控件，控件功能要专一要设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章用户体验原则规范控件风格可理解软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。例如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。可达到用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。用户体验原则规范可用原则易用性原则规范性原则合理性原则美观性原则协调性原则安全性原则以手机行业为例，当手机刚刚进入市场的时候不但价格贵得惊人，而且除了通话以外没有什么其他功能。由于当时的主导是技术，所以大家都把精力放在信号、待机时间、寿命等方面，对于产品的造型，使用的合理性很少关心。事过境迁，当技术已经完全的达到用户的需求，于是商家为了创造卖点，提高争力，非常重视产品的外观设计，除此之外还频频推出短信，彩屏，和铉，彩信，摄像头等等。这样一来产品的美观、个性、易用、易学、人性化等等都成了产品的卖点。而时至今日，产品的硬件及技术趋于同质化，导致各手机品牌在成本限制的情况下，手机的硬件及功能之间的差异已非常微弱。各商家也已不再仅仅追求强大的功能，上乘的质量，周密的市场策略，合适的价格定位，甚至是美观的造型设计，如今精明的商家已将UI设计纳入了产品开发的最前端。行业现状企业战略市场分析品牌战略概念设计技术研发产品设计生产制造营销推广渠道销售售后服务概念设计CI/VIID\MDUI\UE品牌战略产品营销推广销售售后产品设计人机外观结构模具材料工艺软件界面交互包装技术研发IC信号电池原件制式屏显功能企业战略产品研发生产品牌销售人力战略目标完善企业形象提升品牌形象创意产品形象品牌差异化产品识别性用户体验强用户研究概念设计交互设计界面设计用户体验品牌管理产品创新产品评估工作目标由上分析我们不难知道UI在手机产品中的作用，事实上，我们要做的就是坚持一个原则，那就是创新，解放自己的思想，实事求是地来不断解决产品中的各种问题，以团队的形式来解决各种问题。在产品前期规划、市场定位、产品战略、产品外观设计概念、外观设计方案确认、产品推广、产品包装、产品广告、产品说明书、产品售后服务等各个环节中，建立系统的工作机制，以此达到塑造产品产异化、品质感和提升产品附加价值的重要作用！传统经典千篇一律可更换皮肤习惯的交互设计设计余地有限容易被拷贝体验感不足识别性不强默认皮肤标准化内置皮肤功能可扩展元素连贯性统一品牌识别强用户可自定义形式不改变方案框架不受配色表现限制默认皮肤默认皮肤默认皮肤皮肤更换与内置皮肤不冲突用户个性自定义设计成本低设计效率高搭建皮肤商店增强推广卖点结合ID提升产品设计感流行风格被模仿和抄袭对硬件要求