今天来聊聊我平时捣鼓app界面设计这点事儿。也不是啥高深理论，就是我自己干活儿的一套流程，走不少弯路总结出来的，分享给大伙儿看看。

一开始拿到需求，或者自己有个想法的时候，脑子里面挺乱的。第一步，我肯定不是立马打开电脑。我喜欢先拿纸笔，随便找个本子就开始瞎画，就是那种火柴人加方框框的草图。把大概需要哪些页面，每个页面上有啥按钮和信息，它们之间怎么跳来跳去，先捋个大概。

从想法到框框

草图画得差不多，心里有谱，这时候我才打开电脑，用那个常用的设计软件（具体哪个就不说，顺手就行）。开始搭线框图。线框图这玩意儿，就是把草图再细化一点，但还是不带颜色和样式的，灰不溜秋的。主要目的就是确定信息层级、布局结构还有操作流程。

• 先把主要的导航给定，是放底部还是侧边。
• 然后一个页面一个页面地排，哪里放图片，哪里放文字，按钮搁哪儿。
• 页面之间的跳转逻辑也得串起来，点这个按钮到哪个页面，都得想

这一步要是没做后面改起来那叫一个头疼。有时候客户或者产品经理一看线框图，就能发现流程不对劲或者少啥功能，这时候改成本最低。

开始上色和细化

线框图大家都觉得没问题，接着就是视觉设计，也就是让界面变好看。这一步就开始折腾颜色、字体、图标、图片这些。

我会先定个主色调和辅助色，然后选一套看着舒服、容易阅读的字体。图标，要么自己画，要么找现成的图标库，保持风格统一很重要。图片素材也要找符合产品气质的。这个过程挺磨人的，经常为一个颜色或者一个图标反复调整。有时候感觉这个蓝色不错，放上去一看又觉得怪怪的，就得换。耐心很重要。

通常我会做几个关键页面出来，让大家看看整体风格怎么样。风格定，其他的页面就好办，照着规范来就行。做多，慢慢会形成自己的一套组件库或者说习惯，比如按钮啥样，输入框啥样，这样效率会高很多。

让界面动起来

静态的设计稿看着差不多，我还会做个可交互的原型。就是把设计稿在原型软件里串起来，让按钮可以点，页面可以滚动、跳转。这样能更直观地体验整个app用起来是啥感觉，流程顺不顺畅。

做原型的好处很多。给老板或者客户演示的时候，他们能直接上手点点看，比对着一堆静态图片解释强多。自己也能在点击过程中发现一些之前没想到的问题，比如某个按钮放的位置不方便按，或者跳转逻辑有点绕。

交付和沟通

原型也确认，细节也敲定，一步就是整理设计稿和资源，交给开发小哥们。我会把每个页面的设计图导出来，还有用到的图标、切图什么的。关键是得有清晰的标注，比如字体大小、颜色值、控件间距等等。现在很多设计软件都有标注和切图功能，方便多。

跟开发沟通也特别关键。我会跟他们过一遍设计稿和原型，讲清楚设计意图和交互细节。开发过程中难免会遇到一些实现上的问题，比如某个效果做起来特别麻烦或者性能不这时候就需要一起商量，看看能不能找个折中的办法。不能只把设计稿一扔就不管。

基本上，我做app界面设计就是这么个流程：草图 -> 线框图 -> 视觉稿 -> 原型 -> 交付。中间会穿插着不断的沟通、反馈和修改。这活儿，没什么捷径，就是得多练、多想、多沟通，慢慢就能找到自己的节奏和方法。今天就先分享这些我的实践记录。