Download - Ued交流会 《用户体验杂谈》
![Page 1: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/1.jpg)
USER EXPERIENCEMatters of Web
For UI Designer & Front-end Engineer
蒋吉兵 Front-End Department
ChinaFace.com
Web用户体验杂谈
12年7月13日星期五
![Page 2: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/2.jpg)
Me蒋吉兵 开发主管
Servicing in ChinaFace.com
@集冰
12年7月13日星期五
![Page 3: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/3.jpg)
任何个性化的前提都是满足人们的需求,这个需求就是要做好用户体验。
—— Steve Jobs
12年7月13日星期五
![Page 4: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/4.jpg)
你一定遇到过
12年7月13日星期五
![Page 5: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/5.jpg)
12年7月13日星期五
![Page 6: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/6.jpg)
世界第九大奇迹——西直门桥
12年7月13日星期五
![Page 7: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/7.jpg)
世界第九大奇迹——西直门桥
12年7月13日星期五
![Page 8: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/8.jpg)
世界第九大奇迹——西直门桥
12年7月13日星期五
![Page 9: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/9.jpg)
用户纯主观的产品使用过程中的感受!
UX?
12年7月13日星期五
![Page 10: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/10.jpg)
Improving the user’s perception of a product through great architecture and interaction design.
UX
12年7月13日星期五
![Page 11: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/11.jpg)
12年7月13日星期五
![Page 12: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/12.jpg)
CART SIGN IN CHECK OUT
12年7月13日星期五
![Page 13: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/13.jpg)
12年7月13日星期五
![Page 14: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/14.jpg)
CART
SIGN IN
CHECK OUT
12年7月13日星期五
![Page 15: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/15.jpg)
CART
SIGN IN
CHECK OUT
$300 Million
12年7月13日星期五
![Page 16: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/16.jpg)
设计师和前端工程师
怎样做才能提升用户体验
?12年7月13日星期五
![Page 17: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/17.jpg)
UX
从UI设计
产品设计意图
表达一致 —— 排版、控件、版面、色彩、字体等
外观效果 —— 优雅、简练、快速上手、性能
内容为先 —— 重信息、非界面
载体环境 —— 分辨率、终端设备
12年7月13日星期五
![Page 18: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/18.jpg)
UX
产品意图
从UI设计
了解产品需求,参与产品宣讲,给出设计意见和建议;
12年7月13日星期五
![Page 19: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/19.jpg)
UX
产品意图
从UI设计
了解产品需求,参与产品宣讲,给出设计意见和建议;
12年7月13日星期五
![Page 20: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/20.jpg)
UX
产品意图
从UI设计
了解产品需求,参与产品宣讲,给出设计意见和建议;
12年7月13日星期五
![Page 21: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/21.jpg)
UX
产品意图
从UI设计
了解产品需求,参与产品宣讲,给出设计意见和建议;
12年7月13日星期五
![Page 22: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/22.jpg)
UX
产品意图
从UI设计
了解产品需求,参与产品宣讲,给出设计意见和建议;
12年7月13日星期五
![Page 23: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/23.jpg)
UX
表达一致
从UI设计
设计风格确定后,对设计元素应规范并推广使用,严格执行
12年7月13日星期五
![Page 24: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/24.jpg)
UX
表达一致
从UI设计
设计风格确定后,对设计元素应规范并推广使用,严格执行
12年7月13日星期五
![Page 25: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/25.jpg)
UX
表达一致
从UI设计
设计风格确定后,对设计元素应规范并推广使用,严格执行
12年7月13日星期五
![Page 26: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/26.jpg)
UX
表达一致
从UI设计
设计风格确定后,对设计元素应规范并推广使用,严格执行
12年7月13日星期五
![Page 27: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/27.jpg)
UX
表达一致
从UI设计
设计风格确定后,对设计元素应规范并推广使用,严格执行
12年7月13日星期五
![Page 28: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/28.jpg)
UX
外观效果
从UI设计
优雅、简练的设计,用户能较短时间获取信息,同时减少图片Size给网页加载带来的压力;
12年7月13日星期五
![Page 29: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/29.jpg)
UX
外观效果
从UI设计
优雅、简练的设计,用户能较短时间获取信息,同时减少图片Size给网页加载带来的压力;
12年7月13日星期五
![Page 30: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/30.jpg)
UX
外观效果
从UI设计
优雅、简练的设计,用户能较短时间获取信息,同时减少图片Size给网页加载带来的压力;
12年7月13日星期五
![Page 31: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/31.jpg)
UX
外观效果
从UI设计
优雅、简练的设计,用户能较短时间获取信息,同时减少图片Size给网页加载带来的压力;
12年7月13日星期五
![Page 32: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/32.jpg)
UX
外观效果
从UI设计
优雅、简练的设计,用户能较短时间获取信息,同时减少图片Size给网页加载带来的压力;
12年7月13日星期五
![Page 33: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/33.jpg)
UX
内容为先
从UI设计
先内容,后(轻)设计,重视信息展示;同样适用于广告设计
12年7月13日星期五
![Page 34: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/34.jpg)
UX
内容为先
从UI设计
先内容,后(轻)设计,重视信息展示;同样适用于广告设计
12年7月13日星期五
![Page 35: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/35.jpg)
UX
内容为先
从UI设计
先内容,后(轻)设计,重视信息展示;同样适用于广告设计
12年7月13日星期五
![Page 36: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/36.jpg)
UX
内容为先
从UI设计
先内容,后(轻)设计,重视信息展示;同样适用于广告设计
12年7月13日星期五
![Page 37: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/37.jpg)
UX
内容为先
从UI设计
先内容,后(轻)设计,重视信息展示;同样适用于广告设计
12年7月13日星期五
![Page 38: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/38.jpg)
UX
载体环境
从UI设计
有依据地选定主流分辨率、终端和浏览器
12年7月13日星期五
![Page 39: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/39.jpg)
UX
载体环境
从UI设计
有依据地选定主流分辨率、终端和浏览器
12年7月13日星期五
![Page 40: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/40.jpg)
UX
载体环境
从UI设计
有依据地选定主流分辨率、终端和浏览器
12年7月13日星期五
![Page 41: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/41.jpg)
UX
载体环境
从UI设计
有依据地选定主流分辨率、终端和浏览器
12年7月13日星期五
![Page 42: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/42.jpg)
UX
从前端开发
产品设计意图
Web性能 —— 加载、运行、稳定性
表现一致 —— 外观、组件、操作
兼容性 —— 优雅降级、渐进增强
易用性 —— 简单、快速上手
适应性 —— 分辨率、终端设备
12年7月13日星期五
![Page 43: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/43.jpg)
UX从前端开发
一个日收入 10 万美元的电子商务网站,加载速度每延迟 1 秒钟,将会导致转化率下降 7% ,使该网站每年损失 250 万美元
如果网页加载时间超过4秒,约有四分之一的人会放弃打开该网页
如果网页加载时间超过10秒,50%的移动用户会放弃该网页,约五分之三的人不会再返回该网站
‘微’言耸听
12年7月13日星期五
![Page 44: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/44.jpg)
UX
Web性能优化背后
从前端开发
1)加载>4秒,1/4的用户立即跳出
2)移动设备加载速度较慢,用户耐心却没有延长
3)将会有越来越多的移动终端
4)60%的用户不会再次访问出现加载错误的网站
5) 对于电商加载慢就像排队
6)口碑效应
7)转化率损失
12年7月13日星期五
![Page 45: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/45.jpg)
UX
表现一致性
从前端开发
组件化,颗粒化展示、功能,形成DPL
12年7月13日星期五
![Page 46: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/46.jpg)
UX
表现一致性
从前端开发
组件化,颗粒化展示、功能,形成DPL
12年7月13日星期五
![Page 47: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/47.jpg)
UX
表现一致性
从前端开发
组件化,颗粒化展示、功能,形成DPL
12年7月13日星期五
![Page 48: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/48.jpg)
UX
表现一致性
从前端开发
组件化,颗粒化展示、功能,形成DPL
12年7月13日星期五
![Page 49: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/49.jpg)
UX
表现一致性
从前端开发
组件化,颗粒化展示、功能,形成DPL
12年7月13日星期五
![Page 50: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/50.jpg)
UX
表现一致性
从前端开发
组件化,颗粒化展示、功能,形成DPL
12年7月13日星期五
![Page 51: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/51.jpg)
UX
表现一致性
从前端开发
组件化,颗粒化展示、功能,形成DPL
12年7月13日星期五
![Page 52: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/52.jpg)
UX
兼容性
从前端开发
面对如此众多浏览器,从数据上focus主流用户群,适当减少或放弃对小众浏览器兼容;高级浏览器上使用更眩的效果,引导用户向标准浏览器转化;
时常更新专业知识,减少产生兼容问题的几率,规矩做事
12年7月13日星期五
![Page 53: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/53.jpg)
UX
兼容性
从前端开发
面对如此众多浏览器,从数据上focus主流用户群,适当减少或放弃对小众浏览器兼容;高级浏览器上使用更眩的效果,引导用户向标准浏览器转化;
时常更新专业知识,减少产生兼容问题的几率,规矩做事
12年7月13日星期五
![Page 54: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/54.jpg)
UX
易用性
从前端开发
简化交互步骤,减少学习成本,简单、自然、直接;
选择最适合交互场景的解决方案,勿唯前端论;
12年7月13日星期五
![Page 55: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/55.jpg)
UX
适应性
从前端开发
熟悉Web浏览环境的分辨率和特性,并充分利用
12年7月13日星期五
![Page 56: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/56.jpg)
UX
适应性
从前端开发
熟悉Web浏览环境的分辨率和特性,并充分利用
12年7月13日星期五
![Page 57: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/57.jpg)
UX
适应性
从前端开发
熟悉Web浏览环境的分辨率和特性,并充分利用
12年7月13日星期五
![Page 58: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/58.jpg)
Responsive Design响应式设计
It is the design of a website that adapts itself to the to the user’s behavior based on screen size, platform and orientation
12年7月13日星期五
![Page 59: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/59.jpg)
响应式设计
什么情况下选择响应式设计
无专门Native App开发团队
节省开发和预算成本
兼容新设备,无需针对某种规格进行维护
12年7月13日星期五
![Page 60: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/60.jpg)
http://beforweb.com/node/21/page/0/2 响应式设计
设计流程
用户研究与设备规格预估
制作线框原型
视觉设计
前端开发
12年7月13日星期五
![Page 61: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/61.jpg)
http://beforweb.com/node/21/page/0/2 响应式设计
设计流程
用户研究与设备规格预估
制作线框原型
视觉设计
前端开发
12年7月13日星期五
![Page 62: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/62.jpg)
http://beforweb.com/node/21/page/0/2 响应式设计
设计流程
用户研究与设备规格预估
制作线框原型
视觉设计
前端开发
12年7月13日星期五
![Page 63: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/63.jpg)
http://beforweb.com/node/21/page/0/2 响应式设计
设计流程
用户研究与设备规格预估
制作线框原型
视觉设计
前端开发
12年7月13日星期五
![Page 64: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/64.jpg)
http://beforweb.com/node/21/page/0/2 响应式设计
设计流程
用户研究与设备规格预估
制作线框原型
视觉设计
前端开发
12年7月13日星期五
![Page 65: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/65.jpg)
http://beforweb.com/node/21/page/0/2 响应式设计
设计流程
用户研究与设备规格预估
制作线框原型
视觉设计
前端开发
12年7月13日星期五
![Page 66: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/66.jpg)
http://beforweb.com/node/21/page/0/2 响应式设计
设计流程
用户研究与设备规格预估
制作线框原型
视觉设计
前端开发
12年7月13日星期五
![Page 67: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/67.jpg)
响应式设计
设计中的经验和原则
尽量保持小屏幕规格样式的简洁;
- 在UI元素风格方面,可以多与前端开发人员交流,尽量采用可以通过
CSS3实现的常规风格样式,减少背景图片的使用。
保证内容的字体字号可读,尤其是在手机上;
最终产出的页面必定会与视觉稿有所出入;
设计师与开发者之间的交流与沟通更重要,尽可能早的发现各类潜在问题。
12年7月13日星期五
![Page 68: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/68.jpg)
响应式设计
前端开发时需要注意
充分了解HTML、CSS新特性;
图片尺寸选择最适合移动端的;
充分使用CSS3还原视觉特效;
利用移动设备特效完成交互功能实现;
让Web简单、快速、易上手;
充分沟通。
12年7月13日星期五
![Page 69: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/69.jpg)
附:设计原则ChinaFace前端架构
*12年7月13日星期五
![Page 70: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/70.jpg)
UX来自互联网
用户体验优化中的设计原则
主次原则
统一原则
直接原则
少做原则
反馈原则
对称原则
12年7月13日星期五
![Page 71: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/71.jpg)
UX
主次原则
设计原则案例
内容比较多,可放空间少,主要的内容先显示,次要的内容搁置在“更多”里。
12年7月13日星期五
![Page 72: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/72.jpg)
UX
主次原则
设计原则案例
面临好几个操作时,我们也要分清主次,分清哪些是我们提倡用户操作的,哪些是我们不提倡用户操作的,同时,对于提倡用户操作的也要进一步分清主次。
开心
人人
12年7月13日星期五
![Page 73: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/73.jpg)
UX
直接原则
设计原则案例
能在当前页面完成操作的尽量在当前页面完成
开心
CF
12年7月13日星期五
![Page 74: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/74.jpg)
UX
统一原则
设计原则案例
保证全站样式统一,降低用户认知难度
开心
人人
12年7月13日星期五
![Page 75: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/75.jpg)
UX
少做原则
设计原则案例
让用户选择大于让用户输入,尽量做成让用户可以选择,降低难度
CF
CF
微博
12年7月13日星期五
![Page 76: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/76.jpg)
UX
反馈原则
设计原则案例
尽量对每个操作能做到人机交互反馈,让用户清楚知道目前的状态,减少疑惑。
酷讯
鼠标悬停
CF
鼠标悬停
12年7月13日星期五
![Page 77: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/77.jpg)
UX
对称原则
设计原则案例
展开与收起是对称的功能,有依存关系,展开后能收起,收起后能展开,用户能及时返回原来的操作
CF
12年7月13日星期五
![Page 78: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/78.jpg)
UX
ChinaFace的前端技术体系
开发
工具
PhotoshopVimEmeditorSublimeEditplus
Eva
开发框架
Moca
YUI3Eva UI组件库应用模块
模块引擎
Smarty
LessPHP
YUI � Loader
模块CSS组件JS
Moca less
模块HTML引用模块资源
Minify
调试
FiddlerFirebugDeveloper ToolsVisual Studio
品质保障Smush.itJSLintCodeReview
性能监测
YslowWebPageTest.comPageSpeedDynaTrace
项目\资源
SVNVanishCDN
测试 兼容性JS单元
BaseDocument
GridStructureElementModuleUsage
12年7月13日星期五
![Page 79: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/79.jpg)
UX
Eva.require('ebase').ready(function(Y){
Y.log(Y.one('body'))
});
$arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { top: 50%; left: 0; margin-top: -@arrowWidth;
前端框架
12年7月13日星期五
![Page 80: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/80.jpg)
UX
Eva.require('ebase').ready(function(Y){
Y.log(Y.one('body'))
});
$arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { top: 50%; left: 0; margin-top: -@arrowWidth;
前端框架
Javascript UI Library
12年7月13日星期五
![Page 81: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/81.jpg)
UX
Eva.require('ebase').ready(function(Y){
Y.log(Y.one('body'))
});
$arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { top: 50%; left: 0; margin-top: -@arrowWidth;
前端框架
Javascript UI Library CSS Framework
12年7月13日星期五
![Page 82: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/82.jpg)
UX
前端环境部署
环境 模拟CDN本地开发
Apache 2(vhost)PHP 5hosts
本地环境
开发环境
预发布环境
Vanish
compress测试环境
compress、cache
CDN
sources
SVN
sync
r.chinaface.com
debug
debug
cache file
cache file
12年7月13日星期五
![Page 83: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/83.jpg)
UX
前端文档规范
规范F2E � Doc wiki
文件组织
命名规范
模块指南
编程规范
前端安全
前端周报
项目管理
分享培训
接口文档
学习文档
wd.org wiki.chinaface.com
12年7月13日星期五
![Page 84: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/84.jpg)
UX
HTML5
移动互联网
Web App
Hybrid App
展望
12年7月13日星期五
![Page 85: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/85.jpg)
UI设计是一门“语言”艺术前端开发也不例外
理论和运营数据分析结合是用户体验持续改进的依据 !
12年7月13日星期五
![Page 86: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/86.jpg)
12年7月13日星期五
![Page 87: Ued交流会 《用户体验杂谈》](https://reader030.vdocuments.mx/reader030/viewer/2022012304/556acb48d8b42acd348b50cb/html5/thumbnails/87.jpg)
12年7月13日星期五