1. UI是什么
ico
2009.12.31

2. UI是干什么的？
美工？程序？

3. UI是……
UI 是用户和系统进行交互方法的集合
用户，容易，期望值，目标，可用性，
用户体验，满足，转化率，易用，
UI 和程序和美工有什么区别？
这是杯具

4. UI是程序，是美工吗？
建筑行业3种职业的差别
建筑设计师 土木工程师 装修设计师
关心外形，房间布局 关心成本，工期，结构，防火，建筑方法。 关心整体色调，背景墙，花纹和地板
UI和程序，美工的差别在哪里？

5. 界面华丽≠好用
UI和美工之间区别
界面华丽≠好用
UI和程序之间区别
功能强大≠好用

6. UI设计师的具体工作
• 参与产品起步设计，并且确定风格界面
• 协助为需要开发的产品定义用户模型
• 参与产品的可用性测试和评估，并提出修改意见
• 将完成一个普通任务所需要的鼠标动作减少一半
• 优化友好网站中的操作
• 修改页面中让人困惑的文字
• 等等等等
目标：让用户用使用起来更流畅,抵制杯具

7. UI中交互设计又是什么呢？

8. 交互设计
交互设计 Interaction Design
交互设计是指客户端(操作)与服务端之间产生互动的这个过程，针对这个过程进行设计。
用遥控器打开空调并且调整温度
触摸屏手机
乘坐电梯点选楼层23楼

9. 交互设计的目标
目标是设计出让人愉悦的产品，坚持以用户为中心
用户为主与不以用户为主

10. 交互设计的流程
进入设计制作流程

11. 怎么样的UI是不好的
• 页面表达不清
• 操作繁琐无逻
辑
• 提示混乱
• 难用
• 强迫用户

12. UI需要怎么做？
Amazon导航进化史

13. Amazon导航进化史
2008 – 2009

14. Amazon导航进化史
1998 网站早期
2个分类
使用颜色区分标签

15. Amazon导航进化史
1999 - 2000 Tab的极限
Tab快挤不下了
Logo也没了
Tab的极限

16. Amazon导航进化史
2000 – 2001 用户体验
尝试去掉所有的Tab
注意是Today
同时在那个时期解决了商店问题
更多关注用户的东西出现

17. Amazon导航进化史
2003 - 2004 Tab 随机出现时期
根据推广和营销,Tab进行改变
选中Tab后，颜色也会进行随机
变化

18. Amazon导航进化史
2005 - 2006 单行动态时期
示例：卓越网 http://www.amazon.cn/

19. Amazon导航进化史
2008 – 2009 主次分明

20. 总结
UI =“U”+“I”
让你和我之间更好的沟通

21. 总结
用户体验
是所有人的事情

22. 谢谢大家

23. 摩西的十诫
第一戒 让用户随时了解系统的状态

24. 摩西的十诫
第二戒 系统与真实世界相符合

25. 摩西的十诫
第三戒 给予用户控制权和自主权

26. 摩西的十诫
第四戒 一致性和标准化

27. 摩西的十诫
第五戒 帮助用户识别、诊断和修复错误

28. 摩西的十诫
第六戒 预防错误

29. 摩西的十诫
第七戒 依赖识别而不是记忆

30. 摩西的十诫
第八戒 强调使用的灵活性及有效性

31. 摩西的十诫
第九戒 最小化设计

32. 摩西的十诫
第十戒 提供帮助的文档或途径