SlideShare a Scribd company logo
1 of 33
UI 是什么 ico  2009.12.31
UI 是干什么的? 美工?程序?
UI 是……   UI   是 用户和系统进行交互方法的集合 UI   和程序和美工有什么区别? 用户 , 容易 , 期望值 , 目标 , 可用性 , 用户体验 , 满足, 转化率 , 易用 , 这是杯具
UI 是 程序 ,是美工 吗?   土木工程师, 更关心房屋的成本,工期,环境,结构,防火,建筑方法。   建筑设计师, 关心房屋外形,房间布局   装修设计师, 更关心房屋整体色调,背景墙,花纹和地板  UI 和程序,美工的差别在哪里? 建筑行业 3 种职业的差别
界面华丽≠好用 功能强大≠好用   UI 和美工之间区别 界面华丽 ≠好用   UI 和程序之间区别
UI 设计师的具体工作 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],目标:让用户用使用起来更流畅
UI 中交互设计 又 是什么 呢 ?
交互设计 交互设计  Interaction Design 交互设计是指客户端 ( 操作 ) 与服务端之间产生互动的这个过程,针对这个过程进行设计。 用遥控器打开空调并且调整温度  乘坐电梯点选楼层 23 楼 触摸屏手机
交互设计的目标 目标 是设计 出 让人愉悦 的产 品 ,坚持 以用户为中心 用户为主与不以用户为主
交互设计的流程   进入设计制作流程
UI 的理念 UCD UED 产品
怎么样的 UI 是不好的 ,[object Object],[object Object],[object Object],[object Object],[object Object]
UI 需要怎么做?  Amazon 导航进化史
Amazon 导航进化史 2008 – 2009
Amazon 导航进化史 1998  网站早期 2 个分类 使用颜色区分标签
Amazon 导航进化史 1999 - 2000  Tab 的极限 Tab 快挤不下了 Logo 也没了 Tab 的极限
2000 – 2001  用户体验 Amazon 导航进化史 尝试去掉所有的 Tab 注意是 Today 更多关注用户的东西出现 同时在那个时期解决了商店问题
Amazon 导航进化史 2003 - 2004  Tab  随机出现时期 根据推广和营销 ,Tab 进行改变 选中 Tab 后,颜色也会进行随机变化
Amazon 导航进化史 2005 - 2006  单行动态时期 示例:卓越网  http://www.amazon.cn/
Amazon 导航进化史 2008 – 2009  主次分明
总结 UI =“U”+“I” 让你和我之间更好的沟通
总结 用户体验 是所有人的事情
谢谢大家
摩西的十诫 第一戒  让用户随时了解系统的状态
摩西的十诫 第二戒  系统与真实世界相符合
摩西的十诫 第三戒  给予用户控制权和自主权
摩西的十诫 第四戒  一致性和标准化
摩西的十诫 第五戒  帮助用户识别、诊断和修复错误
摩西的十诫 第六戒  预防错误
摩西的十诫 第七戒  依赖识别而不是记忆
摩西的十诫 第八戒  强调使用的灵活性及有效性
摩西的十诫 第九戒  最小化设计
摩西的十诫 第十戒  提供帮助的文档或途径

More Related Content

Viewers also liked

MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0Thomas Conté
 
活动专题设计
活动专题设计活动专题设计
活动专题设计ico li
 
Design by Aimee Bradshaw
Design by Aimee BradshawDesign by Aimee Bradshaw
Design by Aimee Bradshawaimeebradshaw
 
Taphop diem thgap tren mp phuc
Taphop diem thgap tren mp phucTaphop diem thgap tren mp phuc
Taphop diem thgap tren mp phucSeri Moth
 
Minnette Davis - Professional Network Systems Engineer Accomplishments
Minnette Davis -  Professional Network Systems Engineer AccomplishmentsMinnette Davis -  Professional Network Systems Engineer Accomplishments
Minnette Davis - Professional Network Systems Engineer AccomplishmentsMinnette Davis
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Seri Moth
 
网站优化指南V1 0
网站优化指南V1 0网站优化指南V1 0
网站优化指南V1 0ico li
 
ClientSummit2010_PranavMistry(MIT)
ClientSummit2010_PranavMistry(MIT)ClientSummit2010_PranavMistry(MIT)
ClientSummit2010_PranavMistry(MIT)Razorfish
 
Rc023 php online
Rc023 php onlineRc023 php online
Rc023 php onlineSeri Moth
 
Portfolio residentes farmacia 2011
Portfolio residentes farmacia 2011Portfolio residentes farmacia 2011
Portfolio residentes farmacia 2011Jose Antonio Prados
 

Viewers also liked (11)

MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
MS Day EPITA 2010: Visual Studio 2010 et Framework .NET 4.0
 
活动专题设计
活动专题设计活动专题设计
活动专题设计
 
Design by Aimee Bradshaw
Design by Aimee BradshawDesign by Aimee Bradshaw
Design by Aimee Bradshaw
 
Taphop diem thgap tren mp phuc
Taphop diem thgap tren mp phucTaphop diem thgap tren mp phuc
Taphop diem thgap tren mp phuc
 
Minnette Davis - Professional Network Systems Engineer Accomplishments
Minnette Davis -  Professional Network Systems Engineer AccomplishmentsMinnette Davis -  Professional Network Systems Engineer Accomplishments
Minnette Davis - Professional Network Systems Engineer Accomplishments
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
 
网站优化指南V1 0
网站优化指南V1 0网站优化指南V1 0
网站优化指南V1 0
 
ClientSummit2010_PranavMistry(MIT)
ClientSummit2010_PranavMistry(MIT)ClientSummit2010_PranavMistry(MIT)
ClientSummit2010_PranavMistry(MIT)
 
Rc023 php online
Rc023 php onlineRc023 php online
Rc023 php online
 
Yii
YiiYii
Yii
 
Portfolio residentes farmacia 2011
Portfolio residentes farmacia 2011Portfolio residentes farmacia 2011
Portfolio residentes farmacia 2011
 

Similar to ui是什么

政府網站瀏覽體驗
政府網站瀏覽體驗政府網站瀏覽體驗
政府網站瀏覽體驗BelindaYCWang
 
雲端產品的用戶體驗檢測重要性與作法
雲端產品的用戶體驗檢測重要性與作法雲端產品的用戶體驗檢測重要性與作法
雲端產品的用戶體驗檢測重要性與作法NTUST
 
Mobile design pattern gallery中文译文--导航
Mobile design pattern gallery中文译文--导航Mobile design pattern gallery中文译文--导航
Mobile design pattern gallery中文译文--导航nijahcheung
 
UX设计基础 流程分析 2012-03
UX设计基础 流程分析 2012-03UX设计基础 流程分析 2012-03
UX设计基础 流程分析 2012-03John Woo
 
優使性2.0導讀
優使性2.0導讀優使性2.0導讀
優使性2.0導讀Miya Chang
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web DesignAbby Chiu
 
2013 10-05 由電子產品的演進來看產品開發
2013 10-05 由電子產品的演進來看產品開發2013 10-05 由電子產品的演進來看產品開發
2013 10-05 由電子產品的演進來看產品開發Josh Lee
 
Project Management & System Analysis/Design Approach
Project Management & System Analysis/Design ApproachProject Management & System Analysis/Design Approach
Project Management & System Analysis/Design ApproachWang Johnson
 
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远IxDC
 
展望2013使用經驗設計發展
展望2013使用經驗設計發展展望2013使用經驗設計發展
展望2013使用經驗設計發展Yu-Hsiu Li
 
Web Intro
Web IntroWeb Intro
Web Introtzulin
 
UXI服務設計的日常
UXI服務設計的日常UXI服務設計的日常
UXI服務設計的日常Ian Jang
 
[ MIX 2017 ] 從個人跨界到企業轉型 – 談如何帶領 UX Team 成為企業的創新動力 - 張曉林 / 吉利汽車研究院 首席用戶體驗專家
[ MIX 2017 ] 從個人跨界到企業轉型 – 談如何帶領 UX Team 成為企業的創新動力 - 張曉林 / 吉利汽車研究院 首席用戶體驗專家[ MIX 2017 ] 從個人跨界到企業轉型 – 談如何帶領 UX Team 成為企業的創新動力 - 張曉林 / 吉利汽車研究院 首席用戶體驗專家
[ MIX 2017 ] 從個人跨界到企業轉型 – 談如何帶領 UX Team 成為企業的創新動力 - 張曉林 / 吉利汽車研究院 首席用戶體驗專家悠識學院
 
用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16John Woo
 
创新工厂 -用户体验报告.
创新工厂 -用户体验报告.创新工厂 -用户体验报告.
创新工厂 -用户体验报告.VImLai
 
Jiazi chen design work
Jiazi chen design workJiazi chen design work
Jiazi chen design workjiazi
 

Similar to ui是什么 (19)

政府網站瀏覽體驗
政府網站瀏覽體驗政府網站瀏覽體驗
政府網站瀏覽體驗
 
雲端產品的用戶體驗檢測重要性與作法
雲端產品的用戶體驗檢測重要性與作法雲端產品的用戶體驗檢測重要性與作法
雲端產品的用戶體驗檢測重要性與作法
 
Mobile design pattern gallery中文译文--导航
Mobile design pattern gallery中文译文--导航Mobile design pattern gallery中文译文--导航
Mobile design pattern gallery中文译文--导航
 
UX设计基础 流程分析 2012-03
UX设计基础 流程分析 2012-03UX设计基础 流程分析 2012-03
UX设计基础 流程分析 2012-03
 
優使性2.0導讀
優使性2.0導讀優使性2.0導讀
優使性2.0導讀
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
 
2013 10-05 由電子產品的演進來看產品開發
2013 10-05 由電子產品的演進來看產品開發2013 10-05 由電子產品的演進來看產品開發
2013 10-05 由電子產品的演進來看產品開發
 
Project Management & System Analysis/Design Approach
Project Management & System Analysis/Design ApproachProject Management & System Analysis/Design Approach
Project Management & System Analysis/Design Approach
 
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
IxDC 中国交互设计体验日-大会_黄峰_体验设计,我们要走的更远
 
展望2013使用經驗設計發展
展望2013使用經驗設計發展展望2013使用經驗設計發展
展望2013使用經驗設計發展
 
Web Intro
Web IntroWeb Intro
Web Intro
 
UXI服務設計的日常
UXI服務設計的日常UXI服務設計的日常
UXI服務設計的日常
 
[ MIX 2017 ] 從個人跨界到企業轉型 – 談如何帶領 UX Team 成為企業的創新動力 - 張曉林 / 吉利汽車研究院 首席用戶體驗專家
[ MIX 2017 ] 從個人跨界到企業轉型 – 談如何帶領 UX Team 成為企業的創新動力 - 張曉林 / 吉利汽車研究院 首席用戶體驗專家[ MIX 2017 ] 從個人跨界到企業轉型 – 談如何帶領 UX Team 成為企業的創新動力 - 張曉林 / 吉利汽車研究院 首席用戶體驗專家
[ MIX 2017 ] 從個人跨界到企業轉型 – 談如何帶領 UX Team 成為企業的創新動力 - 張曉林 / 吉利汽車研究院 首席用戶體驗專家
 
產品企劃與開發過程
產品企劃與開發過程產品企劃與開發過程
產品企劃與開發過程
 
用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16
 
创新工厂 -用户体验报告.
创新工厂 -用户体验报告.创新工厂 -用户体验报告.
创新工厂 -用户体验报告.
 
UX 策略
UX 策略UX 策略
UX 策略
 
Jiazi chen design work
Jiazi chen design workJiazi chen design work
Jiazi chen design work
 
华美宏大明晰谷 V3
华美宏大明晰谷 V3华美宏大明晰谷 V3
华美宏大明晰谷 V3
 

ui是什么

Editor's Notes

  1. 他们的工作是让产品如何更容易的学习,使用,还有如何帮助用户达到他们的目标,一个激情四射,一个华丽无比的界面并不代表,他是一个易学易用的用户界面。
  2. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  3. 看起来枯燥?其实,当你用心去完成了这里的某项工作后,你会更全面的去看待一个产品,会得到更多的成就感和看到网站经过你的修改后带来的变化和无法想象的收益的。
  4. 以前服务业有句话“客户就是上帝”,设想一下,如果在店里买东西,你遇上一个刁蛮的服务员,对你爱理不理,你问他,他都含含糊糊的。你的心情会是怎么样的呢?很糟糕吧。 那么现在网上没有服务员怎么办呢?交互设计就是服务员了。每一次的设计和操作,都是对用户提问的一个引导。 而交互设计的目的,就是这设计产品中引入“可用性和“用户体验”的概念从而解决这样的问题。
  5. 理解用户需求,建立用户需求 (PRD) 我们需要了解用户,分析用户,用户就是客户,知道他们的目的何在,针对不同用会会设计出不同的类型的产品,一个卡通形象就不适合在 25 岁的男性身上了。 我们遵循“用户想要什么”,“我们要做什么” 注释 :UCD(User Centered Design) 以用户为中心 设计一些方案 针对需求进行一些方案的设计,设计分 2 种,概念设计和物理设计。 制作设计方案的原型 (Prototype) 原型不是成品,简单的说,就是大致的样子,但是这里面缺包含了简单的交互在其中。 原型可以通过不同途径来做,并非需要软件,纸和笔也可以。因为原型的目的只是将方案简单实现,简单的说先弄个样子出来 测试和评估 我们需要用户来评估这样的产品,是否可行。对于他们已经适应我们网站的习惯有没有冲突。 这就好比你设计出一个玩具能否让小孩感觉到好玩,你需要把玩具塞到孩子手里才会知道他们的反应
  6. 理解用户需求,建立用户需求 (PRD) 我们需要了解用户,分析用户,用户就是客户,知道他们的目的何在,针对不同用会会设计出不同的类型的产品,一个卡通形象就不适合在 25 岁的男性身上了。 我们遵循“用户想要什么”,“我们要做什么” 注释 :UCD(User Centered Design) 以用户为中心 设计一些方案 针对需求进行一些方案的设计,设计分 2 种,概念设计和物理设计。 制作设计方案的原型 (Prototype) 原型不是成品,简单的说,就是大致的样子,但是这里面缺包含了简单的交互在其中。 原型可以通过不同途径来做,并非需要软件,纸和笔也可以。因为原型的目的只是将方案简单实现,简单的说先弄个样子出来 测试和评估 我们需要用户来评估这样的产品,是否可行。对于他们已经适应我们网站的习惯有没有冲突。 这就好比你设计出一个玩具能否让小孩感觉到好玩,你需要把玩具塞到孩子手里才会知道他们的反应
  7. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  8. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  9. 在 1999 年到 2000 年的时候,亚马逊还在不断增加新的分类,并且是它的 Tab 式导航到达极限。店铺( zShops )、玩具与游戏、电器和电子贺卡这些新的产品分类的增加,使得 亚马逊的 Logo  也没地方放了,并且页面文字也随之缩小了(当时页面仍然是按 800×600 分辨率设计的)。一直等到把 Tab 标签做成两排,才给 Logo 腾出了空间。很显然, Tab 式的导航已经被拉伸到了极限并且 快要控制不住 了。
  10. 在 1999 年到 2000 年的时候,亚马逊还在不断增加新的分类,并且是它的 Tab 式导航到达极限。店铺( zShops )、玩具与游戏、电器和电子贺卡这些新的产品分类的增加,使得 亚马逊的 Logo  也没地方放了,并且页面文字也随之缩小了(当时页面仍然是按 800×600 分辨率设计的)。一直等到把 Tab 标签做成两排,才给 Logo 腾出了空间。很显然, Tab 式的导航已经被拉伸到了极限并且 快要控制不住 了。
  11. 在 2000 年的时候,亚马逊 尝试着把所有的 Tab 去掉 ,但是在 2001 年还是增加了商店目录和特色商店 (Store Directory/Featured Stores) 。这次重新设计,用一些特色的商店替代了日益增长的分类,并且提供了一个比较方便的途径让用户可以访问剩下的那些商店。当“我的店铺 (personal stores)” 的概念被提出后,亚马逊再一次回到了单行 Tab 式导航结构,并添加了“ see more stores” 链接来查看更多 Tab 。
  12. 2003 年到 2004 年,亚马逊仍然继续增加新的分类。但为了市场推广及促销考虑, Tab 导航反而变短了。 Tab 会基于公司的促销活动以及用户的行为变化——增加或减少。很少 Tab 会一直在那里(除了“ Welcome” 和“ Your Store” )。根据市场推广及促销,图片式 Tab 被运用起来,并且切换 Tab 时的颜色变化也变成随机的了。
  13. 为了解决 Tab 变化带来的疑惑,亚马逊开始试验一种可替代的方案,即单 行动态 Tab 式导航 ( PPT )。 2004 年的时候作了一个线上测试,将 Tab 的数量减少至 2 (就像 1998 年的设计)。第一个 Tab 是动态的(它取决于你所在的产品分类),第二个就是“所有分类”。在 2005 年的一个版本 中,导航从两个 Tab 开始,然后将当前分类作为新 Tab 插入其中,替代了之前的解决方案,不会替换掉当前任何 Tab 。
  14. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  15. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  16. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  17. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  18. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  19. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  20. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  21. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  22. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  23. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  24. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  25. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。
  26. 有许多人并不了解,视觉设计是和 UI 设计师的区别,他们认为用户界面只是一个表面,漂亮即可,但可能这个产品表面足够漂亮吸引人,但是真正工作起来不好用,不实用。可能对用户造成的伤害会比之前更大。