ui and ue design basic
TRANSCRIPT
UIUE
UX
Visual Design
UEDUCD
Interaction Design UID
UE DesignerGUI
Human Interface
IxDUX-er
美工
前端
CXO
UI• UI
• Graphic user interface of a software
product
• 系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。
UI Design• UI Design
• Visual Design: the look and feel
• Interaction Design: how it work
IxD• IxD(Interaction Design)
• heavily focused on satisfying the needs and
desires of the majority of people who will use the
product.
• 交互设计是一个设计工作，是一门技术。
• 交互技术通过对界面和操作行为的设计提高产品可用性
IxD• IxD(Interaction Design)
IxD• IxD(Interaction Design)
• 原型设计
• 流程图
• 线框图
IxD Sample• QQ Mail(Don’t make me think)
• 返回的位置和做法很重要，这是QQMail交互的枢纽，定义了邮箱的交互风格
• 帮助用户自动选中，在输入密码错误后，应该把输入框的内容选上
• 光标定位，点击回复focus定位到正文，点击转发，focus定位到收件人
• 先字母排序，再优先显示最近联系人，减少键盘操作
IxD Sample• QQ Mail(Don’t make me think)
IxD Sample• QQ Mail(Don’t make me think)
• 附件提示，如果邮件添加了1到2个附件，可以显示附件名称
• QQ 影音
IxD Sample
UX• Involves a person's behaviors, attitudes, and
emotions about using a particular product, system or
service.
• 用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功，是否享受，是否还想再来使用。他们能够忍受的问题，疑惑和BUG的程度
UX• Who is the user?
• Boss
UX• Who is the user?
UX• Experience
UX• Experience
UX• Experience
• 功能性体验要素
• 情感性体验要素
有价值的
可发现的
易用的 创造性的
可靠的 渴望的
有用的
UX• UX Design
UCD• User Centered Design
• 用户需求
• 产品能为用户做什么
• 用户怎么用
• 好用，良好的操作感受
Resources• http://ixdc.org/
• http://ued.baidu.com/
• http://isux.tencent.com/
• http://ued.sina.com/
• http://jdc.jd.com/
• http://www.uisdc.com/
• http://www.zhihu.com/topic/19550685
• http://book.douban.com/subject/19934344/
QA
• 多看多想多体验
• ？