做 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 统一。

五、新手练习建议

  1. 下载一个你喜欢的 App,用 Figma 画它的首页。
  2. 量每个元素的尺寸、颜色、间距。
  3. 对比设计稿,找差距。

UI 设计是有标准答案的,先模仿成熟产品,再谈创新。

版权与商用注意事项

使用设计素材时,版权是最容易出问题的环节,一定要留意。

  • 看清楚授权协议:免费素材也分”可商用”和”仅限个人”,商用前确认。
  • 署名要求:有些免费素材要求署名作者,使用时按要求标注。
  • 不要直接卖素材:免费素材可以用来做设计作品,但不能打包转卖。
  • 字体版权:商用字体一定要买授权或用免费商用字体。

新手常见错误

刚做设计时容易犯的几个错,提前知道能少走弯路。

  • 颜色太多:一张设计不要超过 3 种主色,否则杂乱。
  • 字体太多:整套设计用 1-2 种字体就够了。
  • 对齐混乱:所有元素统一对齐,视觉才整齐。
  • 不留白:内容塞满整个画布会很拥挤,适当留白更高级。

总结与行动建议

看完这篇内容,最重要的不是收藏,而是立刻动手做一件事。下面给你一个具体的行动建议。

  • 今天就开始:不要等准备好了再开始,边做边学是最快的方式。
  • 定一个小目标:比如一周内完成第一次实操,完成了再奖励自己。
  • 记录学习过程:把遇到的问题和解决方法记下来,既是笔记也是复盘。
  • 找人交流:加入相关社群,和同好交流比自己闷头学效率高很多。

工具和方法都只是手段,真正让你进步的是持续的实践。从今天开始行动,三个月后你会感谢现在的自己。