USER EXPERIENCEMatters of Web

For UI Designer & Front-end Engineer

蒋吉兵 Front-End Department

ChinaFace.com

Web用户体验杂谈

12年7月13日星期五

Me蒋吉兵 开发主管

Servicing in ChinaFace.com

@集冰

jib_jiang@hnair.com

12年7月13日星期五

任何个性化的前提都是满足人们的需求，这个需求就是要做好用户体验。

—— Steve Jobs

12年7月13日星期五

你一定遇到过

12年7月13日星期五

12年7月13日星期五

世界第九大奇迹——西直门桥

12年7月13日星期五

世界第九大奇迹——西直门桥

12年7月13日星期五

世界第九大奇迹——西直门桥

12年7月13日星期五

用户纯主观的产品使用过程中的感受！

UX？

12年7月13日星期五

Improving the user’s perception of a product through great architecture and interaction design.

UX

12年7月13日星期五

12年7月13日星期五

CART SIGN  IN CHECK  OUT

12年7月13日星期五

12年7月13日星期五

CART

SIGN  IN

CHECK  OUT

12年7月13日星期五

CART

SIGN  IN

CHECK  OUT

$300 Million

12年7月13日星期五

设计师和前端工程师

怎样做才能提升用户体验

？12年7月13日星期五

UX

从UI设计

产品设计意图

表达一致 —— 排版、控件、版面、色彩、字体等

外观效果 —— 优雅、简练、快速上手、性能

内容为先 —— 重信息、非界面

载体环境 —— 分辨率、终端设备

12年7月13日星期五

UX

产品意图

从UI设计

了解产品需求，参与产品宣讲，给出设计意见和建议；

12年7月13日星期五

UX

产品意图

从UI设计

了解产品需求，参与产品宣讲，给出设计意见和建议；

12年7月13日星期五

UX

产品意图

从UI设计

了解产品需求，参与产品宣讲，给出设计意见和建议；

12年7月13日星期五

UX

产品意图

从UI设计

了解产品需求，参与产品宣讲，给出设计意见和建议；

12年7月13日星期五

UX

产品意图

从UI设计

了解产品需求，参与产品宣讲，给出设计意见和建议；

12年7月13日星期五

UX

表达一致

从UI设计

设计风格确定后，对设计元素应规范并推广使用，严格执行

12年7月13日星期五

UX

表达一致

从UI设计

设计风格确定后，对设计元素应规范并推广使用，严格执行

12年7月13日星期五

UX

表达一致

从UI设计

设计风格确定后，对设计元素应规范并推广使用，严格执行

12年7月13日星期五

UX

表达一致

从UI设计

设计风格确定后，对设计元素应规范并推广使用，严格执行

12年7月13日星期五

UX

表达一致

从UI设计

设计风格确定后，对设计元素应规范并推广使用，严格执行

12年7月13日星期五

UX

外观效果

从UI设计

优雅、简练的设计，用户能较短时间获取信息，同时减少图片Size给网页加载带来的压力；

12年7月13日星期五

UX

外观效果

从UI设计

优雅、简练的设计，用户能较短时间获取信息，同时减少图片Size给网页加载带来的压力；

12年7月13日星期五

UX

外观效果

从UI设计

优雅、简练的设计，用户能较短时间获取信息，同时减少图片Size给网页加载带来的压力；

12年7月13日星期五

UX

外观效果

从UI设计

优雅、简练的设计，用户能较短时间获取信息，同时减少图片Size给网页加载带来的压力；

12年7月13日星期五

UX

外观效果

从UI设计

优雅、简练的设计，用户能较短时间获取信息，同时减少图片Size给网页加载带来的压力；

12年7月13日星期五

UX

内容为先

从UI设计

先内容，后(轻)设计，重视信息展示；同样适用于广告设计

12年7月13日星期五

UX

内容为先

从UI设计

先内容，后(轻)设计，重视信息展示；同样适用于广告设计

12年7月13日星期五

UX

内容为先

从UI设计

先内容，后(轻)设计，重视信息展示；同样适用于广告设计

12年7月13日星期五

UX

内容为先

从UI设计

先内容，后(轻)设计，重视信息展示；同样适用于广告设计

12年7月13日星期五

UX

内容为先

从UI设计

先内容，后(轻)设计，重视信息展示；同样适用于广告设计

12年7月13日星期五

UX

载体环境

从UI设计

有依据地选定主流分辨率、终端和浏览器

12年7月13日星期五

UX

载体环境

从UI设计

有依据地选定主流分辨率、终端和浏览器

12年7月13日星期五

UX

载体环境

从UI设计

有依据地选定主流分辨率、终端和浏览器

12年7月13日星期五

UX

载体环境

从UI设计

有依据地选定主流分辨率、终端和浏览器

12年7月13日星期五

UX

从前端开发

产品设计意图

Web性能 —— 加载、运行、稳定性

表现一致 —— 外观、组件、操作

兼容性 —— 优雅降级、渐进增强

易用性 —— 简单、快速上手

适应性 —— 分辨率、终端设备

12年7月13日星期五

UX从前端开发

一个日收入 10 万美元的电子商务网站，加载速度每延迟 1 秒钟，将会导致转化率下降 7% ，使该网站每年损失 250 万美元

如果网页加载时间超过4秒，约有四分之一的人会放弃打开该网页

如果网页加载时间超过10秒，50%的移动用户会放弃该网页，约五分之三的人不会再返回该网站

‘微’言耸听

12年7月13日星期五

UX

Web性能优化背后

从前端开发

1）加载>4秒,1/4的用户立即跳出

2）移动设备加载速度较慢，用户耐心却没有延长

3）将会有越来越多的移动终端

4）60%的用户不会再次访问出现加载错误的网站

5) 对于电商加载慢就像排队

6）口碑效应

7）转化率损失

12年7月13日星期五

UX

表现一致性

从前端开发

组件化，颗粒化展示、功能，形成DPL

12年7月13日星期五

UX

表现一致性

从前端开发

组件化，颗粒化展示、功能，形成DPL

12年7月13日星期五

UX

表现一致性

从前端开发

组件化，颗粒化展示、功能，形成DPL

12年7月13日星期五

UX

表现一致性

从前端开发

组件化，颗粒化展示、功能，形成DPL

12年7月13日星期五

UX

表现一致性

从前端开发

组件化，颗粒化展示、功能，形成DPL

12年7月13日星期五

UX

表现一致性

从前端开发

组件化，颗粒化展示、功能，形成DPL

12年7月13日星期五

UX

表现一致性

从前端开发

组件化，颗粒化展示、功能，形成DPL

12年7月13日星期五

UX

兼容性

从前端开发

面对如此众多浏览器，从数据上focus主流用户群，适当减少或放弃对小众浏览器兼容；高级浏览器上使用更眩的效果，引导用户向标准浏览器转化；

时常更新专业知识，减少产生兼容问题的几率，规矩做事

12年7月13日星期五

UX

兼容性

从前端开发

面对如此众多浏览器，从数据上focus主流用户群，适当减少或放弃对小众浏览器兼容；高级浏览器上使用更眩的效果，引导用户向标准浏览器转化；

时常更新专业知识，减少产生兼容问题的几率，规矩做事

12年7月13日星期五

UX

易用性

从前端开发

简化交互步骤，减少学习成本，简单、自然、直接；

选择最适合交互场景的解决方案，勿唯前端论；

12年7月13日星期五

UX

适应性

从前端开发

熟悉Web浏览环境的分辨率和特性，并充分利用

12年7月13日星期五

UX

适应性

从前端开发

熟悉Web浏览环境的分辨率和特性，并充分利用

12年7月13日星期五

UX

适应性

从前端开发

熟悉Web浏览环境的分辨率和特性，并充分利用

12年7月13日星期五

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日星期五

响应式设计

什么情况下选择响应式设计

无专门Native App开发团队

节省开发和预算成本

兼容新设备，无需针对某种规格进行维护

12年7月13日星期五

http://beforweb.com/node/21/page/0/2 响应式设计

设计流程

用户研究与设备规格预估

制作线框原型

视觉设计

前端开发

12年7月13日星期五

http://beforweb.com/node/21/page/0/2 响应式设计

设计流程

用户研究与设备规格预估

制作线框原型

视觉设计

前端开发

12年7月13日星期五

http://beforweb.com/node/21/page/0/2 响应式设计

设计流程

用户研究与设备规格预估

制作线框原型

视觉设计

前端开发

12年7月13日星期五

http://beforweb.com/node/21/page/0/2 响应式设计

设计流程

用户研究与设备规格预估

制作线框原型

视觉设计

前端开发

12年7月13日星期五

http://beforweb.com/node/21/page/0/2 响应式设计

设计流程

用户研究与设备规格预估

制作线框原型

视觉设计

前端开发

12年7月13日星期五

http://beforweb.com/node/21/page/0/2 响应式设计

设计流程

用户研究与设备规格预估

制作线框原型

视觉设计

前端开发

12年7月13日星期五

http://beforweb.com/node/21/page/0/2 响应式设计

设计流程

用户研究与设备规格预估

制作线框原型

视觉设计

前端开发

12年7月13日星期五

响应式设计

设计中的经验和原则

尽量保持小屏幕规格样式的简洁;

－ 在UI元素风格方面，可以多与前端开发人员交流，尽量采用可以通过

CSS3实现的常规风格样式，减少背景图片的使用。

保证内容的字体字号可读，尤其是在手机上;

最终产出的页面必定会与视觉稿有所出入;

设计师与开发者之间的交流与沟通更重要，尽可能早的发现各类潜在问题。

12年7月13日星期五

响应式设计

前端开发时需要注意

充分了解HTML、CSS新特性；

图片尺寸选择最适合移动端的；

充分使用CSS3还原视觉特效；

利用移动设备特效完成交互功能实现；

让Web简单、快速、易上手；

充分沟通。

12年7月13日星期五

附：设计原则ChinaFace前端架构

＊12年7月13日星期五

UX来自互联网

用户体验优化中的设计原则

主次原则

统一原则

直接原则

少做原则

反馈原则

对称原则

12年7月13日星期五

UX

主次原则

设计原则案例

内容比较多，可放空间少，主要的内容先显示，次要的内容搁置在“更多”里。

12年7月13日星期五

UX

主次原则

设计原则案例

面临好几个操作时，我们也要分清主次，分清哪些是我们提倡用户操作的，哪些是我们不提倡用户操作的，同时，对于提倡用户操作的也要进一步分清主次。

开心

人人

12年7月13日星期五

UX

直接原则

设计原则案例

能在当前页面完成操作的尽量在当前页面完成

开心

CF

12年7月13日星期五

UX

统一原则

设计原则案例

保证全站样式统一，降低用户认知难度

开心

人人

12年7月13日星期五

UX

少做原则

设计原则案例

让用户选择大于让用户输入，尽量做成让用户可以选择，降低难度

CF

CF

微博

12年7月13日星期五

UX

反馈原则

设计原则案例

尽量对每个操作能做到人机交互反馈，让用户清楚知道目前的状态，减少疑惑。

酷讯

鼠标悬停

CF

鼠标悬停

12年7月13日星期五

UX

对称原则

设计原则案例

展开与收起是对称的功能，有依存关系，展开后能收起，收起后能展开，用户能及时返回原来的操作

CF

12年7月13日星期五

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日星期五

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日星期五

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日星期五

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日星期五

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日星期五

UX

前端文档规范

规范F2E � Doc wiki

文件组织

命名规范

模块指南

编程规范

前端安全

前端周报

项目管理

分享培训

接口文档

学习文档

wd.org wiki.chinaface.com

12年7月13日星期五

UX

HTML5

移动互联网

Web App

Hybrid App

展望

12年7月13日星期五

UI设计是一门“语言”艺术前端开发也不例外

理论和运营数据分析结合是用户体验持续改进的依据 ！

12年7月13日星期五

12年7月13日星期五

12年7月13日星期五