跳到正文
编程术语图鉴

共 30 条词条

简体

设计师读懂开发

写给: 画好图却总被开发说实现不了的设计师

从设计稿上的组件一路看到它落地时的布局规则和边界

9 步 · 约 18 分钟

走完之后: 你能预判哪些设计会难做、交付时把状态和尺寸一次说清

这条线写给画好图却总被开发说实现不了的设计师。你的稿子单看没问题,一落到真实项目就发现间距对不上、状态没画全,来回改到心累。

顺序按你画稿的思路来:先看按钮、卡片、徽标、头像这些你会反复用到的组件,再认识到提示和弹窗这类会临时冒出来的层,接着补上断点,理解同一份设计为什么要交好几套尺寸,最后用弹性布局和无障碍收尾,把版式规则和边界情况一起想清楚。

走完这条线,你在动手前就会预判哪些效果开发代价大、哪些能轻松实现。交付时你会主动带上默认态、悬停态和异常态,也会留意对比度和键盘操作,开发拿到稿子能少问一半问题。

按这个顺序走

  1. 按钮 /button 入门 设计稿上最常画的小方块,先弄清它有几种状态,交付时就不容易漏 页面上点一下就会触发某个操作的小方块
  2. 卡片 /card 入门 把一个信息块装进方框,理解它的边界你就知道列表该规范地怎么画 把一条内容装进一个独立的小方框里展示
  3. 徽标 /badge 入门 名字角上的小红点,认识它你才知道这种提醒在开发眼里是个独立组件 贴在图标或名字角上的那个小红点或数字
  4. 头像 /avatar 入门 代表用户身份的小圆图,懂了它你会主动给尺寸和默认图,少来回改 名字旁边那个代表某个用户身份的小圆图
  5. 文字提示 /tooltip 入门 悬停才出现的小字,认识它你就能提前想好文案长度,避免上线被截断 鼠标放上去才冒出来的那行小字补充说明
  6. 模态框 /modal 进阶 盖住页面逼人先处理的窗口,理解它你就懂什么时候该弹窗而不是跳页 盖住页面逼你先把这件事处理完的小窗口
  7. 断点 /breakpoint 进阶 宽度到某个数页面就换排版,记住它你标稿时就会主动给好几套尺寸 屏幕宽度到了某个数,页面就换一套排版
  8. 弹性布局 /flexbox 进阶 一排元素自动对齐的方式,学完它你就知道开发为什么总问间距怎么算 让一排元素自动伸缩、对齐方便的排版方式
  9. 无障碍 /accessibility 进阶 让屏幕阅读器和键盘也能用,认识它你会开始在意对比度和焦点顺序 让屏幕阅读器和键盘用户也能用好你的页面

走完了,然后呢