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