做 App 界面不是画得好看就行,要遵守平台规范。下面是 iOS 和 Android 设计的核心要点。
一、尺寸规范
- iPhone:主流设计稿用 390×844(iPhone 14),@2x 或 @3x 出图。
- Android:用 360×800 dp 设计稿,mdpi/hdpi/xhdpi/xxhdpi 多套切图。
- 状态栏高度 44pt,底部 Home Indicator 34pt。
二、字体规范
- iOS 用苹方(PingFang SC),Android 用思源黑体。
- 标题 17-20pt,正文 14-16pt,辅助文字 12pt。
- 字重不要乱用:标题 Semibold,正文 Regular。
三、间距与圆角
- 左右边距一般 16px,屏幕边到内容的距离。
- 卡片圆角 12-16px,现代 App 趋势是圆角越来越大。
- 元素间距用 8 的倍数(8、16、24、32),整齐。
四、色彩规范
- 主色一个(品牌色),用于按钮、关键文字。
- 文字三级色:标题黑、正文灰、辅助浅灰。
- 成功绿、警告橙、错误红,全 App 统一。
五、新手练习建议
- 下载一个你喜欢的 App,用 Figma 画它的首页。
- 量每个元素的尺寸、颜色、间距。
- 对比设计稿,找差距。
UI 设计是有标准答案的,先模仿成熟产品,再谈创新。
版权与商用注意事项
使用设计素材时,版权是最容易出问题的环节,一定要留意。
- 看清楚授权协议:免费素材也分”可商用”和”仅限个人”,商用前确认。
- 署名要求:有些免费素材要求署名作者,使用时按要求标注。
- 不要直接卖素材:免费素材可以用来做设计作品,但不能打包转卖。
- 字体版权:商用字体一定要买授权或用免费商用字体。
新手常见错误
刚做设计时容易犯的几个错,提前知道能少走弯路。
- 颜色太多:一张设计不要超过 3 种主色,否则杂乱。
- 字体太多:整套设计用 1-2 种字体就够了。
- 对齐混乱:所有元素统一对齐,视觉才整齐。
- 不留白:内容塞满整个画布会很拥挤,适当留白更高级。
总结与行动建议
看完这篇内容,最重要的不是收藏,而是立刻动手做一件事。下面给你一个具体的行动建议。
- 今天就开始:不要等准备好了再开始,边做边学是最快的方式。
- 定一个小目标:比如一周内完成第一次实操,完成了再奖励自己。
- 记录学习过程:把遇到的问题和解决方法记下来,既是笔记也是复盘。
- 找人交流:加入相关社群,和同好交流比自己闷头学效率高很多。
工具和方法都只是手段,真正让你进步的是持续的实践。从今天开始行动,三个月后你会感谢现在的自己。