今天就跟大家唠唠我搞手机端设计的这点事儿。现在谁还不揣个手机，所以给手机设计界面这活儿，真是躲不过去。

刚开始接触这块儿的时候，我也是两眼一抹黑。以前都是在电脑大屏幕上瞎比划，手机屏幕那么点儿地方，感觉手脚都施展不开。第一个坎儿就是工具。琢磨半天，发现像 Photoshop 这类的图处理软件多少得会点儿，比如调个图的大小、裁切一下、搞个简单的效果啥的。后来发现光会P图还不行，得有个能画框框、连线的工具，方便把想法落地成草图。我当时就找个叫 Axure 的，也有人用别的，反正就是用来快速搭个架子，看看信息怎么摆，页面怎么跳。

我的实践过程

具体我是怎么一步步来的？

• 先瞎想乱画：我习惯先不动电脑，拿个本子和笔，在纸上随便画。想到哪画到哪，把脑子里那些零碎的想法给倒出来。这阶段就是涂鸦，不用管好不好看，主要是把功能、流程大概捋一捋。比如用户进来先看到点这个按钮会去哪儿，那个功能放哪儿比较顺手。
• 搭框架（线框图）：纸上画得差不多，思路清晰点，就开始在电脑上用软件（像前面说的 Axure）画线框图。这时候就是黑白灰，方框加文字，把每个页面的布局给定下来。哪里是图片，哪里是文字，哪里是按钮，按钮点去哪个页面，都得安排明白。重点是把流程跑通，别让用户用着用着就迷路。
• 搞颜值（视觉设计）：框架定，流程顺，就开始给它“化妆”。打开 Photoshop 或者 Sketch 这类工具，开始配色、选字体、画图标、处理图片。手机屏幕小，元素不能做得太小，特别是按钮和文字，得保证看得清、点得到。颜色也不能乱用，得考虑整体风格和可读性。我经常会做好几个版本，自己看看哪个顺眼，或者找朋友同事帮忙瞅瞅。
• 让它动起来（原型制作）：光看静态图片不过瘾，也不知道实际用起来咋样。我会把设计好的界面链接起来，做成一个可以点击的交互原型。这样就能模拟真实的操作流程，在手机上点点试试，看看跳转是不是自然，操作是不是方便。这一步能发现很多静态图看不出的问题。
• 测试和修改：拿着做好的原型，自己先当用户用几遍，最好也找几个其他人来试试。看看他们会不会用，有没有哪里觉得别扭。根据反馈回来的意见，再回去修改设计。这个过程可能要反复好几次。
• 整理交付：敲定，就得把设计稿整理交给开发去实现。比如图片要切各种尺寸的图标得备齐，颜色、字号、间距这些都得标注清楚。以前还挺烦这步的，现在有些工具能自动生成标注，省不少事儿。

一些踩坑心得

搞手机设计，有几个地方得特别注意：

屏幕尺寸适配：手机屏幕大小五花八门，你设计的时候得考虑怎么适应不同的尺寸，不能在一个手机上看着正换个手机就乱套。虽然现在有很多技术可以辅助，但设计时心里得有这根弦。

手指操作：手指头可比鼠标指针粗多，而且是触摸操作。所以按钮要做得足够大，间距也要留够，不然很容易点错。那些需要精确点击的小链接啥的，在手机上就得少用。

保持简单：手机屏幕就那么大，用户也没那么多耐心。所以界面要尽量简洁明，操作流程要短。别把电脑上那套复杂的东西照搬过来。

多用真机看效果：电脑屏幕上看跟在手机上看，感觉可能完全不一样。颜色、大小、操作的流畅度，一定要经常在真实手机上预览和测试，模拟器有时候不靠谱。

手机端设计就是个细致活儿，得多实践、多思考。从最初的摸索，到能画出线框图，再到搞定视觉和交互，看着自己的设计在手机上跑起来，还是挺有成就感的。反正就是一步一个脚印，不断试错、不断改进过来的。