UI那些事+培训文档

[e-mail]:24075655Blog:缘起：设计和艺术的碰撞设计=艺术？在唐纳德.A.诺曼的《情感化设计》的第一页可以看到这个精美别致的壶，它是由法国艺术家雅克·卡洛曼创造的，卡洛曼称它为咖啡壶：一个“专为受虐狂设计的咖啡壶”。后来才发现,茶壶嘴和茶壶柄在同一边,根本就是一个不可用的壶。咖啡壶雅克·卡洛曼设计与艺术的区别•设计侧重实际的物理作用；艺术侧重精神的心理作用。–设计产物大多是产品或服务形态；艺术的创造更多的是人内心的表达和一种观摩、欣赏。•设计像哲学；艺术像宗教。–设计探讨的是可能和反思，尽量简化实用；艺术强调的是唯一和崇拜，突出艺术风格的图片，期待天才和救世主。•设计师改善生活；艺术家修炼自己。–设计师观察生活，强调吸收进来，改善目前的状态；艺术家不断修炼自己，强调表达出去，不论世俗干扰，只求艺术境界完美。设计和艺术在实践中有着千丝万缕的联系，但实际上还是有一些区别之处，在此罗列一些内容，大家可以有一个基本的认识。UI设计是一个客观理性的过程UI•UI即UserInterface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。UCD•UCD即User-CenteredDesign的简称，中文叫“以用户为中心的设计”。基本思想就是将用户时时刻刻摆在所有过程的首位。•简单的说，在进行产品设计时从用户的需求和用户的感受出发，围绕用户为中心设计产品，而不是让用户去适应产品，无论产品的使用流程、产品的信息架构、人机交互方式等，都需要考虑用户的使用习惯、预期的交互方式、视觉感受等方面。UCD流程实例:阿里软件UCD流程图UE•英文UserExperience，缩写为UE,或者UX。•指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来使用。他们能够忍受的问题，疑惑和BUG的程度。战略层——产品目标和用户需求成功的用户体验，其基础是一个被明确表达的“战略”。知道企业与用户双方对产品的期许和目标，有助于确立用户体验各方面战略的制定。范围层——功能规格和内容说明带着“我们想要什么”、“我们的用户想要什么的”的明确认识，我们就能弄清楚如何去满足所有这些战略的目标。当你把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时，战略就变成了范围。结构层——交互设计与信息架构在收集完用户需求并将其排列好优先级别之后，我们对于最终展品将会包括什么特性已经有了清楚的图像。然而，这些需求并没有说明如何将这些分散的片段组成一个整体。这就是范围层的上面一层：为产品创建一个概念结构。框架层——界面设计、导航设计和信息设计在充满概念的结构层中开始形成了大量的需求，这些需求都是来自我们的战略目标的需求。在框架层，我们要更进一步地提炼这些结构，确定很详细的界面外观、导航和信息设计，这能让美色的结构变得更实在。表现层——视觉设计在这个五层结构的顶端，我们把注意力转移到网站用户会先注意到的那些方面：视觉设计，这里，内容、功能和美学汇集到一起来产生一个最终设计，这将满足其他四个层面的所有目标。用户体验的要素可用性•可用性（Usability）是交互式IT产品/系统的重要质量指标，指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品竞争力的核心。•ISO9241-11国际标准可用性定义：产品在特定使用环境下为特定用户用于特定用途时所具有的–有效性（effectiveness）–效率（efficiency）–用户主观满意度（satisfaction）可用性工程•可用性工程(UsabilityEngineering)是IT产品及其用户界面开发的一种工程方法论，贯穿于产品整个生命周期的各个阶段，包括从需求获取、可用性问题分析、设计方案的开发以及测试评估在内的一整套实用方法，泛指以提高产品可用性质量为目的的一系列过程、方法、技术和标准,其核心是以用户为中心的设计方法论(UCD)。UI工程师分类UI工程师分类UI工程师分类UI工程师分类UI工作开展inBROWAN西安UITeam2008年7月~2010年7月产品开发部@XAUIDesignerBlue.HanUIEngineerRuike.WangUIEngineerJane.Wang工业设计小组2010年7月16日至今PMMartyHumanEngineerBlue@XATBH@TWInterfaceEngineerJane@XAStanley@XAVisualDesignMaggie@TWTBH@TWWeb规范体系介绍产品/项目约定界面框架规范UIframework基础界面元素规范baseUI•产品VILogo•系统框架视觉风格•根据业务需求约定交互模式、页面流•总体界面框架结构•界面模式灵活•优化多语言、多浏览器、换肤、组件库、扩展性等问题•界面组件及其组合•基础应用模板•Web标准编码，优化结构，代码可重用性强2008年7月至今界面设计开发流程2008年7月至今工作中存在的问题产品/项目界面支持约占界面工作总量85%以上的工作量主要支持的产品/项目有：【XC4701】95056【XC4702】Multi-PartyCallSystem【XC4703】Multi-PartyCallSystem【XC1702】FreePPMeetingCenter【XC1901】FreePPTrainingCenter【XC3603】FreePP融合通信系统1.0【XC9006】FreePPUCFor大众电信【XC3401】FreePP.com.cnRevision【XC1702】V-1120RMA烧号程序FreePP企业融合通信聚合门户对外汉语教学网站私塾网规范产品界面设计开发过程，持续改进约占界面工作总量10%的工作量，主要内容有产品界面设计、开发环节规范初步建立，与需求、RD、测试环节的配合顺畅Web通用界面模型优化分析抽象。设计通用用户、管理员界面框架。Web基础界面元素baseUI2.0。Web基础界面元素可与界面框架分离出来，便于今后设计开发使用。界面技术、理论、规范的持续研究关注界面相关领域、前沿技术，学习研究，为产品设计开发提供服务。如利用ExtJS框架组织FMC界面、ActiveX控件Web应用时各类界面技术问题的提出、利用CSS技术改进原RD开发过程中多语言问题等。界面团队建设相关工作统一工作设计平台，以保障界面工作、交流的顺畅。①统一与需求、RD等环节的协作方式；②统一主要设计软件版本；③统一字体库。持续进行知识经验分享交流。①通过网文、图书等方式获取知识；②通过交流讨论会、专题实践等进行经验交流；③对界面规范、相关技术进行培训摘录自《西安UITeam2009年度总结》2009年工作业绩及成果◆界面HTML+CSS基础编码占界面工作总工作量比重过大•并行的Web项目多•需求变更较频繁•UI人力不足◆软件界面设计部分无法精益求精•基础编码比重过大及项目进度所迫设计部分时间缩减•图标设计等细节工作没有人力去原创绘制，只能利用网络素材拼贴，存在版权问题且风格难以保障一致性◆产品部分功能、交互用户体验不佳•产品定位、目标市场、目标用户等信息模糊，相关战略层内容变化较频繁，UI设计的输入不健全•适合各类群体的“万金油”，UI设计将更加中庸，或者只能满足最基本需要•诸多因素导致设计无法以用户为中心，而更多的是以功能实现为中心，偏离UCD思想•缺乏较为客观的评审机制，UITeam人微言轻仅只能提供一些建议，无法较好的发挥专家团队作用◆缺乏质量较好的素材库及必要的UI设计硬件配备未来展望•逐步规划实践以用户为中心的设计评估过程•规范产品界面设计开发过程，持续改进•界面技术、理论、规范的持续研究•手持、移动设备的界面交互设计研究•产品用户体验“战略层、范围层”方面的明晰、完善，提供较为准确的UI工作输入•支持配合以用户为中心的设计评估工作开展需公司相关部门配合：UI评估的一种简单做法UI设计要素检查表•利用UI设计要素检查表的好处：–在评审或测试用户界面的时候，明确究竟要检查什么问题，否则漫无边际，无从下手。–给出了评判用户界面的依据，避免参与的人员各执己见无休止的争论。UI设计要素检查表设计要素重要性检查项适合于检查结果合适性非常重要对照P-Spec用户界面是否与软件的功能适应？用户界面是否适合于用户的应用环境？(如果否定的话，意味着用户不能有效使用这个软件，是不可原谅的缺陷。)评审测试容易理解非常重要界面元素有错别字，或者措辞含糊、逻辑混乱。(如果出现如此低级的缺陷，说明开发人员根本没有吧用户界面放在心上，用户很反感这种不敬业的态度，是不可原谅的缺陷。)评审测试重要(1)对于常用的功能，用户能否不必阅读手册就使用？(2)是否所有界面元素提供了充分而必要的提示？(3)界面结构和工作流程匹配么？(4)提供联机帮助么？(如果实现上述要求，说明界面的细节做的很好)评审测试及时反馈信息重要(1)是否提供进度条、动画等反映正在进行的比较耗时间的过程？(2)是否为重要的操作返回必要的结果信息？(如果否定的话，说明用户界面不够专业)测试防错处理非常重要(1)执行破坏性的操作以前，是否获得用户的确认？(2)输入数据或递交数据时是否进行相应的数据校验(检查数据是否合法)(3)是否根据用户的权限自动隐藏或者禁用某些功能？(如果否定的话，说明开发人员没有防错处理的常识，是不可原谅的缺陷。)测试可选是否提供Undo功能用以撤销不期望的操作？(如果实现该要求，说明界面的细节做的很好。)测试风格一致(和必要的个性化)重要(1)同类的界面元素是否有相同的视感和相同的操作方式？(2)是否符合广大用户使用同类软件的习惯？(如果否定的话说明用户界面不够专业)评审测试可选是否在具备必要的“一致性”的前提下，设计了与众不同的、让用户记忆深刻的界面？(如果实现该要求，说明界面很有创意。)评审测试UI设计要素检查表设计要素重要性检查项适合于检查结果合理的布局可选(1)界面的布局符合软件的功能逻辑么？(2)界面元素是否在水平或者垂直方向对齐？(3)界面元素的尺寸是否合理？(4)是否恰当的利用窗体和控件的空白，以及分割条？(5)窗口切换、移动、改变大小时，界面正常么？(如果否定的话，说明用户界面不够专业)评审测试合理的色彩重要(1)界面的色调是否让人感到和谐、满意？(2)重要的对象是否用醒目的色彩表示？(3)色彩使用是否符合行业的习惯？(如果实现该要求，说明界面细节很好)评审测试适应用户群体和国际化可选(1)新手用户和专家用户都有合适的方式操作这个界面么？(2)色盲或者色弱的用户能正常使用该界面么？(如果实现该要求，说明界面细节很好)测试重要(1)度量单位、日期格式、人的名字是否让用户误解？(2)翻译文字是否地道，是否符合读者习惯？评审测试最少操作步骤(最高效率)重要是否用合理的最少步骤实现常用的操作，获得高效率？(如果实现该要求，说明界面的细节很好。)测试可复用重要用户界面的原型、代码、文档是否可以被复用？(如果实现该要求，说明软件的需求分析、设计、实现做得很好。)开发团队内部评估书籍推荐设计心理学情感化设计可用性工程://book.douban.com/subject/3279105/用户体验的要素一目了然ht