CSS对用户体验的影响.docxVIP

{CSS}

CSS对用户体验的影响

@点头猪2015.01.10

用户体验

人们使用产品的过程感觉是否好用，方不方便，个人主观感受。

a.讲师讲得好but举手没人理

b.讲师讲得烂but你中奖了。

这种感受会被人们放大，影响人的判断。

案例：招财猫的手

动画

动画

性能（浏览器原理）animationtransform

性能（浏览器原理）

animationtransform(translate/scale/rotate)

……

/webplatform/2014/03/18/css-animations-and-transitions-performance/

/webplatform/2014/03/18/css-animations-and-transitions-performance/

模拟现实

动画

动画

性能（浏览器原理）animationtransform

性能（浏览器原理）

position(left/top),width/height

timing-function

……

/

反映物理世界，加速度及摩擦力，还有人类行为

人在接近目标时会加快行动

?目标趋近效应：迷宫里寻找食物的老鼠在接近出口时跑得比在入口时快。——ClarkHull（1934年）

GoogleMaterialDesign

掌握了这么多信息，

我们来看完美的实现结果

出Bug了，但在Boss眼中：彩蛋，体验很好……

简单粗暴的background-position

简单粗暴的background-position

已上线，开发同事来不及修复，设计师重新做图

代码要拆三层：手（z轴近大远小），手臂，手在手臂上留下的阴影

用户体验不重要吗

我们在Coding的过程只关注工程、实现、无bug，很少主动考虑体验的东西，是不是它就不重要呢

跟我领导和同事讨论这个问题

稀缺型产品

某理财产品

某理财产品

%

预期年化收益率

14

稀缺型产品，比如高收益类：10000块一年赚1400

你还在乎它长得好不好看吗？还在乎按钮的大小和位置吗？还管支付流程的体验吗？谁能跟钱过不去，马斯洛需求最底层

紧急不重要

紧急不重要：蹲厕，很脏，不想踩到屎，垫两块砖

你能给这两块砖雕花吗？给砖做修饰毫无意义，不如重建整个厕所

重体验型产品在市场早期会火一阵，当市场成熟了或者人们的口味发生变化的时候，它曾经没有重视的体验问题都会显露出来。

我们是因为什么而妥协的？

时间

?工期、推广时效、老板要求、人力资源不足……

?代码的生命体系

?时间是高于技术和体验的不可控因素

狭义的时间，广义的时间

?工期、推广时效、老板要求、人力资源不足……

?代码的生命体系

?时间是高于技术和体验的不可控因素

四维空间

加上时间，进入四维空间考虑问题

时间是一维的，不知道写了某种代码会带来什么结果，等到那个时间点才知道，比如上线后修复bug

五维空间

《星际穿越

《星际穿越Interstellar》

五维空间

时间是二维的，选择某个属性所带来的结果都以二维画面在眼前展现，可以在特定的时间点调整方案

六维空间

时间是三维的，可以穿梭，不用等到某个时间点再去调整，一开始就可以更改解决方案

七维空间

七维空间的人创造解决方案，比如写框架。很多优秀的工程师都在这个维度之上。

CSS实现的影响因素

?技术自身的表现：CSS属性

?开发及维护成本

?时间成本：项目工期、发布Deadline

?CSSer的个人知识结构

开发成本：DOM的变化，JS的配合，图片资源

个人知识体系，对前面几点有不同的解读：技术还原能力，知识的广度，对用户体验的理解，有多大意愿提升产品体验

编程思维工具用户体验前端框架CSS产品

编程思维

工具

用户体验

前端框架

CSS

产品

个人知识结构

深度：更熟练的实现者广度：PM

产品工程师

不再是单纯的链接，进入七维空间了，看到的是场景，是人的手指是触摸这些区域场景复杂多样，扩大手指可操作空间

更大面积

padding,line-height…44x44px

阅读UIGuidelines

很简单的属性就可以提升用户体验

了解最小可触控区域大小，阅读UI规范

深度了解用户如何与屏幕交互

左：蒙版，热区偏中间和右侧

中：短列表，人们倾向于在中间滑动

右：长列表，偏右侧滑动

担心碰到内容会发生误操作，或者想在滚动时看到这些内容

比例or固定宽度？遍历CSS属性：

float,flex,position,inline-block,padding-margin…兼容各种屏幕，响应式

工Ibie

工I