1. 为什么非设计师也能做出合格UI？
刚入行做产品那会儿，我最怕接到设计任务。直到有次紧急项目，设计师请假，硬着头皮用Sketch画了个原型，结果被老板说"比专业设计师的版本更实用"。这次经历让我意识到：好的UI不等于炫技，关键在于解决用户问题。就像宜家说明书，虽然都是简笔画，但没人会觉得难懂。
UI设计的本质是信息传达。根据尼尔森 Norman Group的研究，普通用户平均只会花10-20秒判断页面价值。这意味着：清晰的视觉动线比酷炫的动效更重要，一致的交互逻辑比独特的控件样式更实用。特别是B端工具或后台系统，功能性永远排在装饰性前面。
2. 零基础设计四步法
2.1 建立视觉基准线
我习惯用"三色原则"起手：
- 主色：取品牌LOGO的基准色，或直接用#2B6CB0（公认最安全的蓝色）
- 辅色：在coolors.co生成器选主色的互补色
- 强调色：保留纯红/纯绿用于错误提示等关键场景
警告：避免使用纯黑(#000000)，真实世界的阴影都带色偏。文字用#333333，背景用#F8F9FA更符合人眼舒适度。
2.2 布局的数学之美
8px网格系统是安全网：
- 所有间距必须是8的倍数（16,24,32...）
- 字体大小按1.25倍率递增（12/15/18/22...）
- 用Figma的Auto Layout功能强制对齐
实测案例：某数据看板改版时，仅通过规范间距就使阅读效率提升40%。记住：混乱的留白比丑陋的配色更致命。
2.3 控件的标准化处理
我的偷懒技巧：
- 按钮：直角按钮圆角半径4px，圆角按钮用50%
- 输入框：高度36/40/44px三档，内边距统一12px
- 阴影：X/Y偏移0，模糊12px，扩展0，透明度12%
推荐直接复制Material Design的组件库，他们的参数经过千万级用户验证。
2.4 图文排版的生存法则
文字处理记住三个数字：
- 行高：字体大小的1.5倍（18px字体用27px行高）
- 行长：中文每行35-45字（约600-700px宽度）
- 字重：常规用400，标题用600，绝对不用300以下
图片处理更简单：所有图片加1px边框#EEEEEE，圆角统一8px，四周留白至少24px。
3. 救急工具包
3.1 配色方案生成
Coolors的"Space"模式最适合新手：
- 锁定主色
- 按空格键生成方案
- 导出时选"Tailwind CSS"格式
遇到配色灾难时，直接套用IBM Carbon的色板，他们的中性色系经过严格验证。
3.2 图标资源选用
三个原则避免图标翻车：
- 同一套系：全部来自Feather或Heroicons
- 相同线宽：2px就全部2px
- 统一风格：要么全填充，要么全线框
特殊技巧：用Figma的Boolean Operations把不同图标统一成相同视觉重量。
3.3 模板套用指南
最佳入门组合：
- 桌面端：直接复制Apple Human Interface Guidelines
- 移动端：照搬Material Design的模板
- 数据可视化：复用AntV的案例库
重要提醒：修改模板时，永远保持原有间距系统和字体比例。
4. 常见翻车现场救援
4.1 文字看不清怎么办？
三步检测法：
- 用WebAIM检查对比度，确保正文AA级（4.5:1）
- 深色背景上文字至少加10%透明度白色描边
- 重要操作按钮用纯色+反白文字
应急方案：所有文字颜色加20%透明度黑色叠加层。
4.2 布局混乱怎么救？
我的暴力修正法：
- 画出血线：所有元素必须对齐某条隐形的垂直线
- 建立栅格：Figma布局网格设置12列，边距24px
- 使用磁贴：每个模块变成8px网格的整数倍
案例：某后台系统通过强制栅格对齐，可用性测试评分从2.1升至4.7（5分制）。
4.3 色彩过曝怎么调？
快速降噪三板斧：
- 所有彩色降低饱和度20%
- 添加10%透明度#FFFFFF叠加层
- 用HSB模式把亮度锁定在75-85%区间
终极方案：直接转灰度，用间距和字号制造层次感。
5. 进阶偷师技巧
5.1 逆向工程法
选3个同类产品（比如都是电商APP）：
- 截图导入Figma
- 用标尺工具测量所有间距
- 统计他们的字体组合规律
- 提取共性的设计模式
5.2 设计系统速成
用Notion建立自己的规范库：
- 颜色：记录所有使用场景的色值
- 文字：预设好所有标题/正文样式
- 组件：按钮等控件的不同状态
- 模板：常用页面的布局框架
5.3 用户测试取巧
低成本验证方法：
- 把设计稿发给非技术朋友
- 让他们完成特定任务（如"找到购买按钮"）
- 记录首次点击位置和耗时
- 观察是否需要语言解释
最后记住：所有大厂设计总监都是从模仿开始的。我的第一个作品完全照抄了Airbnb，但现在没人看得出来。
