以前先接触的 CSS，后来又接触了 Sketch, 如今再反过来使用 CSS 的时候，发现设计的思想基本都是共通的。于是，笔者希望通过此文总结下最近所学，希望能对大家有所帮助。
Limitations:
Opportunities:
Focus example
产品的核心功能是什么？这是 UI 设计时可以说最重要的事了。看看 Facebook 和 Dropbox 的设计可知，前者希望我们注意朋友间的状态，后者希望我们注意自己的文件。视觉中心是图片和黑色加粗文字，主色调灰色，辅助一个强调的蓝色，简单的 Icon，一致的网格布局就是一个 Well-designed 的设计。
Native functionality examples
在技术发展日新月异的时代，合理运用设备的功能可以设计出许多酷炫的功能。比如 Uber 运用手机 GPS 实时定位出租车，Instagram 运用摄像头进行照相。当某一硬件功能出现升级换代时，Design something new 的机会便出现了！
Known pattern examples
看看 10 年的设计吧，有没有丑的感觉呢 [背景按钮，多种字体，重纹理阴影，可见网格分隔]。如今在 Material Design 和 IOS Interface Design 的指导下，网站和应用的设计已经越来越统一，用户体验也越来越好。
Grids and Layout:
布局布的好，基本丑不了 – 野子Joey
确定页面的宽度，根据需求确定列数，每列的宽度，列与列之间的间隔，以及内容两侧的间隔，使用软件制作处自己的网格布局 [Sketch 可以很容易的做到这点], 也可以在适当处添加水平辅助线帮助设计, 这样你所有元素的大小，元素间的 margin 和 padding 也都统一了，和谐自然产生美啊。
Columns, gutters, margins, baseline
如果是 Mobile Design, 为了精确布局，也可以创建全网格布局。
Mobile Grids
Typography:
字体的选择，对于 IOS，默认为 Helvetica Neue。 对于 Android, 默认 Roboto, 这两种看起来蛮像的，区别不大。对于 App 设计，一种字体已经足够，当然你可以再选择一种 Serif 字体强化标题或作为品牌特征。
Roboto vs Helvetica Neue
注意 Facebook 的字体设计，人名，时间地址，和正文分别用的不同的字体大小，粗细和颜色用于区分，在该对比的地方一定要强化对比的程度，否则干脆一致。
该留白的地方要留白，人都喜欢宽敞的地方，页面也需要留白喘气，不信你看:
whitespace vs no whitespace
同时注意文字长度要适中，英文每行 7 - 9 个单词，中文每行 15 - 22 的字，行高 1.3 - 1.7 便于阅读。字体颜色和背景颜色要有足够的对比度反差，便于阅读[不要将浅色字体放在亮背景上，或者深色字体放在暗背景上，如果图片作为背景，一般在图片上加一层透明遮罩]。最后是内容上的优化，文字的含义要通俗易懂 [考虑可能有非母语用户使用你的产品哦]。
Color:
一个简单且实用的思路去选取颜色是，背景色采用白色或者浅色，从 Logo 中选取一种颜色作为主颜色，然后再选取主颜色的对比色作为强调色，透明黑色作为阴影，不同灰度灰色作为边框，分割线，柔和字体颜色。
Color Palette
Other color considerations:
颜色有其一定的意义，使用每一种颜色前先想想为什么我要用这个颜色 [比如你不会想把团购网站设计成黑色幽默风格]。主色调和强调色之间一定要有对比。主要颜色尽量不要超过三种，避免给用户造成过高的视觉负担。考虑到 App 的实际应用场景，不同的用户会上传不同的照片，因此背景，字体颜色尽量选取 Web Safe Colors，在实际场景不断改进完善。
更多颜色内容可参考：Material Colors.
软件框架层大家可以参考我之前写的这篇文章：如何用 Sketch 进行网页设计。
这里我主要以一个 App 页面设计作为范例，补充一些设计细节上的内容 [也算是我踩坑的一些经验吧]。
App Demo
User Interface Design 绝对不是仅仅画界面，界面做的再漂亮，没有考虑实际运用场景，开发不出来，或者不具有实际应用价值，只能称之为"花瓶"了。因此自己设计的时候，尽量多站在产品和开发的角度去思考问题，怎么设计更能突出功能，怎么设计更能便于开发，实际交互时的效果是怎样的, 这才是一名合格的 User Experience Designer 应有的品质。因此，国外招聘中都要求 User Experience Designer 了解 Web 前端语言 [Html, CSS, Javascript], 作为技术层面的考核。
随着 CSS 预编译处理器的流行 [后文用 Sass 作为例子]，极大的方便了前端书写 CSS. CSS 我仅仅是新手水平, 这里我主要讨论如何使用 Design 的思想写出更方便使用的 Sass.
//@MEDIA QUERIES//确定尺寸，自适应布局$media-l: 1200px;$media-m: 900px;$media-s: 600px//GRID//统一布局，padding/margin 均可用, 高度，宽度尽量为其倍数$grid: 10px$grid-double: $grid * 2;$grid-third: $grid * 2;$grid-half: $grid / 2;//COLORS//用实物或功能命名$color-bodybg: #fafafa;$color-primary: #f0214f;$color-accent: #505eb1;$color-text: #555;$color-muted: #aaa;$color-border: #c3ddc8;$color-grey-mist: #f5f5f5;$color-grey-platinum: #bbb;$color-mask: rgba(0,0,0,0.1);//FONTS//字体，大小，粗细//1种或2种字体$font-family-1: Roboto, sans-serif;//一般4种大小 [header text, body text, remark, other]$font-header: 150%;$font-body: 100%;$font-remark: 70%$font-other: 85%;//三种粗细即可 [light, normal, bold]$font-light: 300;$font-normal: 400;$font-bold: 700;//Z-INDEX//用于 Material Design 不同层级的使用$z-index-header: 1000;$z-index-sidebar: 1100;$z-index-notify: 1200;$z-index-modal: 1300;
个人觉的 Sass 的 mixins 用处不大，太过繁琐，CSS 就是 CSS， 没必要搞得 Javascript 一样过度程序化。涉及到 vender-prefix 的部分， 推荐使用 Autoprefixer。Nesting 加上伪类建议不要超过4层，否则后期修改比较麻烦，适当使用 > 子元素搜索符即可。
无论是用 Skech 设计界面或是直接 CSS 设计界面，保有 Design Ideas 是最重要的，工具不是重点，思想才是王道。CSSketch 这款插件甚至支持直接用 CSS 修改 Sketch File, 感兴趣的同学可以去试用下。各大应用商店应用数不胜数，没事干下几个玩玩，多注意观察主流应用的设计细节, 尤其是交互细节 [下拉，悬浮，空状态，初次登陆状态，引导界面]，总结为己用。
我说的都是错的，如果不自己思考的话。 – 野子Joey
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
