CSS对用户体验的影响

2020-02-27 231浏览

1.{ } {CSS} CSS
2.CSS对用户体验的影响 @点头猪 2015.01.10
3.用户体验人们使用产品的过程感觉是否好用，方不方便，个人主观感受。 a. 讲师讲得好 but 举手没人理 b. 讲师讲得烂 but 你中奖了。这种感受会被人们放大，影响人的判断。
4.案例：招财猫的手
5.动画性能（浏览器原理） animation transform (translate/scale/rotate) position (left/top), width/height ……
6.http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
7.http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
8.动画模拟现实 animation transform 性能（浏览器原理） position (left/top), width/height timing-function ……
9.http://cubic-bezier.com/反映物理世界，加速度及摩擦力，还有人类行为
10.人在接近目标时会加快行动 • 目标趋近效应：迷宫里寻找食物的老鼠在接近出口时跑得比在入口时快。——Clark Hull（1934年）
11.Google Material Design
12.
13.掌握了这么多信息，我们来看完美的实现结果
14.出Bug了，但在 Boss 眼中：彩蛋，体验很好……
15.简单粗暴的 background-position 已上线，开发同事来不及修复，设计师重新做图代码要拆三层：手（z轴近大远小），手臂，手在手臂上留下的阴影
16.用户体验不重要吗我们在 Coding 的过程只关注工程、实现、无 bug，很少主动考虑体验的东西，是不是它就不重要呢
17.跟我领导和同事讨论这个问题
18.稀缺型产品
19.某理财产品 14 稀缺型产品 % 预期年化收益率稀缺型产品，比如高收益类：10000 块一年赚 1400 你还在乎它长得好不好看吗？还在乎按钮的大小和位置吗？还管支付流程的体验吗？谁能跟钱过不去，马斯洛需求最底层
20.紧急不重要
21.
22.紧急不重要：蹲厕，很脏，不想踩到屎，垫两块砖你能给这两块砖雕花吗？给砖做修饰毫无意义，不如重建整个厕所
23.重体验型产品在市场早期会火一阵，当市场成熟了或者人们的口味发生变化的时候，它曾经没有重视的体验问题都会显露出来。
24.我们是因为什么而妥协的？
25.时间狭义的时间，广义的时间 • 工期、推广时效、老板要求、人力资源不足…… • 代码的生命体系 • 时间是高于技术和体验的不可控因素
26.• 工期、推广时效、老板要求、人力资源不足…… • 代码的生命体系 • 时间是高于技术和体验的不可控因素时间
27.四维空间加上时间，进入四维空间考虑问题时间是一维的，不知道写了某种代码会带来什么结果，等到那个时间点才知道，比如上线后修复bug
28.五维空间
29.五维空间《星际穿越 Interstellar》时间是二维的，选择某个属性所带来的结果都以二维画面在眼前展现，可以在特定的时间点调整方案
30.六维空间时间是三维的，可以穿梭，不用等到某个时间点再去调整，一开始就可以更改解决方案
31.七维空间七维空间的人创造解决方案，比如写框架。很多优秀的工程师都在这个维度之上。
32.CSS 实现的影响因素 • 技术自身的表现：CSS 属性 • 开发及维护成本 • 时间成本：项目工期、发布 Deadline • CSSer 的个人知识结构开发成本：DOM的变化，JS的配合，图片资源个人知识体系，对前面几点有不同的解读：技术还原能力，知识的广度，对用户体验的理解，有多大意愿提升产品体验
33.编程思维工具前端框架 CSS 用户体验产品个人知识结构深度：更熟练的实现者广度：PM
34.产品工程师
35.不再是单纯的链接，进入七维空间了，看到的是场景，是人的手指是触摸这些区域场景复杂多样，扩大手指可操作空间
36.更大面积
37.
38.
39.padding, line-height… 44x44px 阅读 UI Guidelines 很简单的属性就可以提升用户体验了解最小可触控区域大小，阅读 UI 规范
40.深度了解用户如何与屏幕交互
41.左：蒙版，热区偏中间和右侧中：短列表，人们倾向于在中间滑动右：长列表，偏右侧滑动担心碰到内容会发生误操作，或者想在滚动时看到这些内容
42.比例 or 固定宽度？遍历CSS属性： float, flex, position, inline-block, padding&-margin… 兼容各种屏幕，响应式
43.
44.
45.
46.iPhone 5
47.iPhone 6
48.iPhone 6 Plus 减少用户操作，减轻负担，更智能
49.• • 物理尺寸更大，容纳更多信息 • 相对单位：vw, vh, rem, percent… • 断点：media query 横屏，场景变化，界面重排
50.工程师 or 设计师？这部分内容谁来做？工程师主动提出解决方案还是等着设计师提要求
51.上传的正方形变成了扁长形，头没了……
52.打广电总局脸
53.
54.background-size:contain; 即使不用视差滚动也可以选择降级方案
55.工程师 or 设计师？解释心智模型 • 项目组里没有真正的设计师，也没有设计概念模型。产品只不过是硬件、软件或数据库的一种反映。 • 心智模型能与该产品匹配的唯一用户就是工程师。如果受众不是工程师，那么产品开发就有麻烦了。
56.实现模型：工程师开发软件的方式通常是给定的，受制于技术和业务心理模型：用户期待和感觉要做的操作，基于用户的想法表现模型：我们把软件的运行机制展示给用户，这是我们可以很轻易地控制的一个方面目标：表现模型和心理模型尽可能接近，了解目标用户所认为的如何使用软件
57.Alan Cooper 阿兰·库珀，Visual Basic 之父，交互设计提倡者，著有《About Face 3》
58.“这条路还很长，希望我们越走越远。”
59.• @点头猪 • 平安付交互设计师 • xll2651@gmail.com