立即登入 我在工作中慢慢积累了一些设计方法，算不上什么铁律，但每次回头翻看，总能帮我少走些弯路。设计当然需要跳出框框去思考，可在打破规则之前，先把规则摸清楚，往往会让你的“跳脱”更有底气。
我常常提醒自己：设计像素密度，而不是设计像素。做过跨设备适配的人，对 dp 这个单位一定不陌生。dp 是 density-independent pixel 的缩写，有时也写作 dip，它跟像素密度（ppi）挂钩，而不是直接对应某个固定的像素值。简单说，就是让界面元素在不同屏幕上保持视觉大小一致。假设你设计一个尺寸为 2000×50dp 的按钮，在 160ppi 的屏幕上它显示为 2000×50px，到了 320ppi 的屏幕上，系统就会自动放大成 4000×100px，刚好是原来的两倍。高密度屏幕不会把东西变小，因为系统会按密度倍数放大 2 倍、3 倍甚至 4 倍，这样一套设计稿就能更好地适配各种设备。拿 iPhone XS Max 举例，它的屏幕尺寸是 414×896 点，而不是 414×896 像素，实际像素是 1242×2688px。所以做设计时，我按 414×896 点来布局，交付时再导出 @3x 的资源，既能保证高清屏上清晰锐利，又不会因为直接按像素设计而跑偏。
另一个让我省心不少的习惯，是坚持用 8dp 的增量。为什么是 8，而不是 5 这种看起来更“整”的数字？原因很实际——如果设备分辨率是 1.5 倍，5 的 1.5 倍就是 7.5，界面上就会出现半像素，边缘容易发虚。而 8 的倍数在大多数屏幕尺寸下都能被整除，而且很多常见屏幕的宽高本身就能被 8 整除，这让设计很容易对齐，也更容易保持一致。以 8 点网格为基准来做间距、字号、组件尺寸，做决定时能快很多，不用反复纠结某个间隙该用 7 还是 9。如果你想了解得更深入，可以看看 Bryn Jackson 关于 8 点网格的文章，讲得很清楚。
做界面时，我总爱停下来，盯着那些用线条和边框圈出来的容器，问自己：这些东西真的需要吗？很多时候，用空白来分隔内容，比画线更干净。以前我们习惯把元素放进一个个看得见的盒子里，卡片、表头、分割线，处处都是框。但当你把这些框拆掉，页面会立刻变得透气，元素有了呼吸感，层次反而更清晰。当然，这并不意味着永远不用分割线，只是在动手之前，先想想空白能不能先顶上。
对比度也容易被忽略，但它直接关系到产品是不是好用。设计网站或应用，就像建一座图书馆，它得能容纳所有人，包括盲人、色盲或者视力受损的用户。网页可用性标准（WCAG）建议文本与背景的对比度至少要达到 4.5:1，这可不是随口一说，而是有大量研究支撑的。我通常会装一个叫 Stark 的插件，随时检查设计稿的对比度是否达标，免得等到开发完成才发现问题。
遵循用户习惯这件事，听起来挺保守，但现实就是如此。比如，按钮如果是圆角矩形，文字却要强行塞进一个狭长的圆形按钮里，不仅浪费垂直空间，还破坏了用户已经熟悉的操作预期。大家用过太多产品，对某些模式早已形成肌肉记忆。如果你设计的网站、App 或软件功能跟主流习惯差别太大，就算初衷再好，用户也可能觉得不直观，甚至感到失望。所以，在现有设计规范的框架内去创新，远比重新发明轮子要稳妥。
用颜色深浅来构建层次，是一条很轻量但很有效的办法。每种颜色都有视觉重量，深色看起来更重，浅色更轻。通过给不同元素赋予不同深浅的颜色，你就能在内容里建立起自然的阅读顺序。重要的信息，比如标题或者核心操作，就用更深的颜色把它“拎”出来；次要的辅助文字，就用浅一些的灰色往后退一退。这样用户扫一眼就能分清主次，快速定位到他们关心的内容，而不必费力辨认。
字体数量也要克制。一个界面里，通常两种字体就足够了。这并不是说你绝对不能用到第三种，只是如果没有特别充分的理由，最好别轻易加。更聪明的做法是善用字体族——同一款字体往往包含细体、常规、中粗、粗体、超粗等多种变体，有些还带斜体和宽体。用同一家族的不同字重来区分层级，既能保持视觉上的灵活变化，整体又高度统一，远比你混搭两三种完全不同的字体来得舒服。
别让用户思考，这是产品设计里一条经典原则。结账页面、邮件收件箱、搜索历史、后退按钮，这些地方如果做得好，用户根本不需要动脑子。一个设计得当的付款页面，我一眼就能确认我要买什么，无需回忆购物车里的东西；Gmail 收件箱里，我扫一下就能分辨哪些邮件读过、哪些还没读；打开亚马逊，最近浏览过的商品就明明白白摆在那里，我可以接着看，不用重新搜索。通过清晰的对象、操作和选项，减少用户的认知负担，系统说明也应该在需要时触手可及，而不是让用户去记忆。尼尔森诺曼集团对此有过很透彻的阐述。
说到不让用户放慢脚步，动画和微交互尤其要当心。用户打开一个应用，就是想解决问题，最好还能快点。如果你做了很多花哨的功能，却让操作变得拖沓，那这些创意反而成了障碍。有研究发现，界面动画的最佳速度在 200 到 500 毫秒之间。短于 100 毫秒的动画，人眼几乎察觉不到，等于没做；超过 1 秒，又会让人明显感到延迟。我常在 Dribbble 上看到一些作品，页面滚动时各种元素都在动，乍一看很炫，但内容本身反而被淹没了。作为用户，满屏都在动，注意力根本集中不了，那只是在浪费人家的时间。抱歉，Dribbble 上的朋友，我不得不这么说。所以，如果你用动画，一定要有目的，而且别让我等超过 500 毫秒。惹恼用户，往往只需要一毫秒。
最后，少即是多。每次想在页面上加新东西——按钮、文字、图片、动画、插图——它都会跟已有的信息争夺注意力。页面塞得越满，单个元素的重要性就越低。谷歌首页就是个经典例子，它没有像雅虎那样堆满可能不需要的信息，而是把焦点牢牢放在核心任务上：搜索。不好意思，雅虎，我不得不拿你来对比一下。我最喜欢的一句设计格言是：完美，不在于没有什么可增加的，而在于没有什么可减少的。这话是 Antoine de Saint-Exupéry 说的，每次想往界面里加东西时，我都会用它来提醒自己。
这些算不上什么金科玉律，但每次做设计时多想一步，常常能省去不少返工的麻烦，也让界面更清爽，用户更省心。