freeCodeCamp 中文社区
首次直播分享会
互联网公司“金句”
这个很简单，技术我不懂，明天我就要！
—— 产品经理
前端应该“像素级还原”设计图！
—— UI 设计师
Web 前端开发的真相
几乎不用“像素”这个单位
| 设计图 数据 |
浏览器 默认字号 |
代码中的数值 （两位精度） |
||
|---|---|---|---|---|
Xpx |
÷ | 16px |
= | Yrem |
边框粗细、圆角半径、阴影范围、动画中 JS 计算出的位移量等除外
与设计完全不同的布局方式
设计师的天马行空
PS、AI 等作图工具用绝对定位排布图层
类似用 CSS 给 <div /> 设置 position: absolute
工程师的条条框框
把设计图从全局到局部
切成一个个嵌套的行列框
图是死的，页是活的
设计效果图
一般最多两套 —— 桌面端、手机端
桌面端分辨率往往是设计师 iMac 的 1920+
屏幕适配
设备：手机、平板、笔记本、大屏台式机
操作：电脑窗口缩放、移动设备横竖屏
行列框会在多个范围间自适应缩放
思维方式的本质差异
美工好比建筑设计师
要的就是惊艳
码农好比土木工程师
要的就是可靠、高效
复用市场现有规格的构件
在施工安全的前提下
尽力贴近设计效果图
从零开始开发项目定制组件
开发工程量非常大
魔改现成组件
- 自适应、响应式样式
- 用户交互逻辑
小心翼翼不破坏它们，但往往事与愿违……
行百里者半九十
开发工时 ≤ “抠细节”工时
开发往往集中进行，并能复用现有组件库
抠 UI 细节往往……
- 再深/浅点……
- 再大/小点……
- 再往这/那来点……
请先定义“一点”……
设计规范，了解一下？
Twitter BootStrap 组件库
字号等级
间距等级
配色主题
最大内容宽度
一致的样式、交互
Google Material Design
Microsoft Fluent Design
蚂蚁金服 Ant Design
饿了么 Element UI
学习收获
你按设计图标注来就行~
—— UI 设计师
行个 🔨！
