Web 前端“像素级还原”的真相

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 设计师


行个 🔨!


讲师带货



上一篇
讲烂了的 JavaScript 原型继承 讲烂了的 JavaScript 原型继承
创建普通对象对象字面量var object = { public_property: 1, public_method: function () { return this.public_property; } }; 内
2020-08-10
下一篇
内容型网站后端一把梭 内容型网站后端一把梭
Web 全栈工程师经常遇到一些内容型网站的开发需求,比如个人博客、机构官网、新闻门户。这些虽是 Web 1.0、2.0 时代就烂大街的典型 Web-site,但面对不同的甲方,看似雷同的需求往往又有各种细节的定制化。 虽然 WordPres
2020-04-09