《视界·无界》个人读书笔记
《视界·无界》个人读书笔记。
《视界·无界》个人读书笔记
一、你好，UI
1、什么是UI？
User Interface，用户界面。它包含软件与硬件的人机交互、操作逻辑、行为路径、用户体验、界面排版的整体设计。
2、什么是UE/UX？
User Experience，用户体验。
3、UI设计的基本原则。
<1>简单：界面简单，用户需要操作的功能一目了然、视觉效果便于理解和使用。
<2>统一：设计风格、按钮的排版布局、信息提示、系统文字、字体大小及颜色等。
<3>习惯：用户习惯。
<4>人性：清晰、有序、安全、周到。
二、设计师不是万能的美工
1、GUI设计师：考虑细致全面，使用频率造成的比例问题、颜色区别、大小等。
2、UI设计师：图标&界面。
手指按钮可点击尺寸在44像素*44像素以上，即设计88像素（@2p）。
三、零基础的设计之路
1、绘画
三大构成：平面、色彩和立体。
<1>透视：近大远小、近实远虚，在十字上画各角度的立方体，来观察透视。
<2>色彩：邻近色、对比色、互补色。
使用了对比色，但做出来的感觉让人觉得很乱或很脏，原因在于色彩的饱和度过高，或明度过低。
<3>光影。
2、分析别人作品时，从空间透视（整体——细节）、色彩搭配、光影处理来看。
3、icon网站展示尺寸通常为800*600，分辨率为72像素，icon本身尺寸为512*512像素。
4、<1>临摹作品，临摹过程需要不断思考，为何这样做，怎么样做能做到如此真实自然，为什么需要刻画这些细节、、、
<2>继续临摹，但需要加入自己的想法，比对原图创造出风格相近却不同的icon，再在配色、构图、细节上和原图进行比对，思考区别。
<3>开始做别人没有做过的，一切灵感源于生活，不是凭空造出的，这一步需要自己定义颜色、自己定义光的来源、自己定义造型、自己定义大小、去复制现实中多种实物的质感。
5、从原作中获得的灵感，表现形式与原作极其接近，配色方式使用相似，这就是抄袭。
6、在看到优秀作品时，进行细致思考，包括配色、造型、构图、细节、创意、设计思路。
思考一个作品该用什么技法去实现，以及原作者如此设计的用意。
可以通过拆分图层分析，去分别隐藏图层群组，去观察区别以及用意。
7、提升想法，揣测原作为何这样设计，这样设计的思路从何而来，怎样去表现并提升视觉亮点。
四、好习惯决定好设计
1、收集素材。
2、管理资源。合理分类命名文件夹或图层。
五、设计师的正确工作流程
1、头脑风暴——交互草图——设计阶段——输出研发——动效描述——补充待命——产品上线——倾听用户。
2、设计时需要进行竞品分析，并思考：
<1>这款竞品为什么受欢迎？/不受欢迎？
<2>这个元素的颜色用得是否恰当？
<3>这套风格是否符合用户？
<4>这个按钮或者标题文字的大小位置是否合适？、、、
3、头脑风暴时还需注意用户画像。
4、图层命名：模块_类别_功能_状态。
nor:normal,正常状态
hig:highlight,高亮状态
sel:selected,选中状态
dis:disable,不可用状态
5、PS利用时间轴或序列帧动画所做出的动效，输出也是PNG透明背景格式。
6、一个用户名登录的输入位置，如果输入错了，我们是清空输入框？整个输入框变红色？输入框边缘变成红色并发光？仅在后方出现一个红色叹号？以文字显示用户名错误并提示为什么错误？是否提示大小写？提示超出字符？
7、启动页：splashscreens 按钮：btn
引导页：user guide 滚动：scroll
加载：loading 登录：login
登陆条：loginbar 注册：regsiter
搜索：search 功能区：shop
标题：title 加入：joinus
状态：status 标签页：tab
文章列表：list 提示信息：msg
当前的：current 小技巧：tips
图标：icon 注释：note
指南：guild 服务：service
热点：hot 新闻：news
下载：download 上传：upload
头：header 内容：content/container
尾/页脚：footer 导航：nav
侧栏：sidebar 栏目：column
左、中、右：left、center、right
标志：LOGO 广告：banner
页面主体：main 子导航：subnav
菜单：menu 子菜单：submenu
友情链接：friendlink 版权：copyright
投票：vote 边导航：sidebar
摘要：summary
六、色彩的奥秘
1、红色在中国是一种权威、值得信任的颜色。
蓝色倾向于网盘、手机管理及社交类型。
黄色多用于儿童类、时尚类。
2、质感决定色彩。
金：黄金、金属、不锈钢等。要有强烈的明暗对比，并且会受到周围环境光的强烈影响，甚至是非常远的地方也会反射到金属身上。
木：温柔的精灵，它最包容其他元素，受环境色影响较小，具有不规则的纹理。不要加入太多的环境色，但要加入质感纹理。
水：千变万化的精灵，会随任何实物而变化，受周围环境色的影响最强烈，还会透过本身映出背景承载物。水所映出的纹理是会产生折射的，最接近光源的部分边缘反而越暗，越离光源远的部分反而有一抹最亮的颜色。
火：活泼的精灵，最不受环境色影响，反而最影响环境色。火又可以和灯光、阳光归为一类，它们都属于光源体。
土：沙、石、岩等，是一个沉默寡言的精灵，几乎不受到周围环境色影响，也不影响其他物体，但必须要把磨砂的质感做好，不同颗粒大小、清晰程度为不同质感。
还有麻、布、棉、纸、瓷等需要自己去定义琢磨。
3、提升设计的一个秘诀：避免纯黑色和纯白色。
4、投影：颜色和角度，不透明度40%-60%。
5、设计风格统一：造型上、色彩上、光影。一般整个界面投影统一为90°。
七、提高作品质量的技巧
1、镜像对称：光、质感、明暗对比、背景衬托、重心等无违和感。
2、强迫三改。
3、同步实物。
4、逼迫质问。为什么？为什么？反光、投影、颜色、文字、大小、、、
九、简历与面试话术的秘笈
1、附件不要超过8.5M。
