#读书笔记# 视界·无界2.0：写给UI设计师的设计书

2020-05-10 本文已影响0人相信小宇宙

用户体验不仅是视觉上的，从开始看到，到用手触碰，再到大脑的思考，最后是心里的感受等，这一系列的过程才是用户体验

有规则的设计

1、思考的问题（以一个播放器为例）

按钮的大小如何控制？

颜色是否要和播放条区别开来？

播放按钮和下一页按钮哪个操作更频繁？

使用频率不同是否要有比例和颜色的区分？

进度条是什么颜色？

播放的时候是什么颜色？

静止的时候是什么颜色？

显示剩余时间还是整片时间，抑或是播放的时间？

大小该如何控制？

是否需要收藏按钮？

网络加载时应该怎么设计？

是否需要调用播放列表？

是否需要全屏按钮？

全屏后如何退出？

2、按钮

以APP界面设计为例，一个按钮最合适的高度是96px

按钮边角风格：圆角应该控制在最小长度（注意：最小长度就是高度或者宽度哪个最小按照哪个计算）的1/10，比如高度是96px，那么圆角半径不能大于其1/10，即10px。如果列出一个公式：最小宽高像素×10% = 1/10最小高宽像素 ≈ 四舍五入偶数

3、文字

中文行间距应该是1.5倍，英文行间距是1.2倍

我们还要考虑的就是阅读距离。通常人眼与手机的距离是40cm～60cm，而且需要把实际阅读操作的环境也考虑进去，所以才会出现不同的行间距。如果所设计的界面针对的用户倾向于有阅读障碍或者文字量巨大的产品，可以适当地将行间距调整到1.5倍。

4、图标

5、颜色

主、次、辅三色可以尝试7:2:1这样的比例区分，比如70%的白色、20%的蓝色、10%的黑色，这样的色彩搭配比例会让界面信息层级更加准确，便于用户阅读

6、投影大小

投影大小= 投影距离x N

如果设定某一个元素的投影“距离”等于12，那么它的模糊范围即“大小”就是24, N设定为2, “不透明度”设定为40%，这样的投影效果是比较令人舒服的，哪怕在具有色彩的环境下，40%的不透

有目的的设计

视觉设计：要充分考虑场景，比如设计易拉宝二维码扫描，考虑到人的平均身高，将二维码放在适合扫描的高度，即便影响美观度，但是需首先考虑合适性

听觉设计：设计一些操作的同时加入声效

触觉设计：考虑场景，比如冬天太冷戴着手套，还有车载等特殊场景，通过充分考虑场景来做设计

好的工作习惯

1、提案的简单模板

【1p】封面+项目名称

【2P】设计理念，比如灵感从哪些图片、设计、照片而来

【2P】查找竞品，跟自己产品类似的LOGO并且分析阐述优、劣势

【1P】最终自己设计的完稿

【2P】黑白、彩色渐变、图片、环境LOGO实现效果

【1P】设备展示

【1P】色彩规范

【1P】黄金比例、间距规范、大小规范设定

【1P】手绘草稿

【2P】还有不同设计方案的反思，和被自己抛弃方案的自我批评

【3P】现实应用效果，比如网站、启动图标、公司门口、快递或者信封、工牌等

【1P】将动态设计存储为GIF图或者以AVI格式进行展示

【1P】封底+感谢观看

2、项目清晰的文件管理

一级文件夹：创建日期和项目名称，便于日后知道起始日期，方便搜索查找。

二级文件夹：创建交互原型、组件库、竞品素材、源文件、成果展示、输出切图。

沸水效应

你作完成一件事情时，就处在沸水的状态，热情饱满，情绪高涨，是不能接受外界任何“冷却”（冷静客观的评价）的，这个时候往往不要做决定，而是应该过一段时间再做决定

懒人思维

·接到案子。

·搜集别人设计好的相同类型的作品

·针对每一个设计作品分析3～5分钟

·分析10个左右原作草稿，包括设计目的、拆分构图、色彩风格

·换不同类型的创作来完善前面的碎片思考（如摄影、装修、制作CG原画、看电影、玩游戏等）

·将碎片思维重构成完整的内容或草图

·对照自己的构思、草图来完成作品的创作。

第一，浏览同类作品，作为埋在心里最底层的一颗种子，浏览时要在草稿画草图，或者记忆配色，无须精确，只需大概。

第二，揣测并分析亮点，思考某个细节为何这么设计，并记录下来。

第三，浏览其他类型的创作，不要详细思考，要大量查阅，像雨水般去滋养你之前的种子。

第四，再次罗列对比草图，将想法精细地绘制出来，不要担心手绘问题，自己看得懂即可。

第五，拿走参考作品，对照草图开始设计。