界面设计思路概要

很多写产品设计的文章，往往都陷于产品设计这件事情本身。但在我看来，交互和视觉设计本身不是一件很难的事情，最重要的事情，在动手设计之前已经完成了。这篇文章着重对界面设计的基本思路进行整理，形成一个可操作化的执行步骤。

第一步，完成需求分析。

方案产出、原型设计、交互设计都是基于需求分析的。

当你能够还原用户的真实的使用场景，明白用户在这个场景下遇到了什么问题，为什么会遇到这个问题，就可以了解你可以通过产品设计优化哪些点，怎么去优化，那么接下来的解决方案也就呼之欲出了。同样的，在有了深刻理解的基础上再去做界面设计，也是一件很简单的事情。很多时候，不知道这个界面该怎么表达，背后的问题是这是一个伪需求，或者你对问题没有一个清晰深刻的认知。

第二步，页面流程梳理。

在深刻理解了需求和场景的基础上，可以通过用户的使用路径，确定下来产品需要经过哪些流程，每个流程要完成的核心任务。

从而确定大致有哪几个页面，用户需要在页面里完成哪些事情。列完这些之后，心里已经对界面有了一个大概的雏形和基本的感觉。

第三步，页面信息层级梳理。

开始着手画原型图之前，一定要先列下来页面的元素，梳理信息的层级。

首先，页面的信息有哪些？这些信息可以划分为哪些层级？这些信息层级的重要性该如何划分？信息层级的划分取决于用户在这个页面到底需要做什么，信息层级的重要性取决于这件事情对用户而言是不是最重要的。

以国民级应用微信为例。比如微信的进入首页，用户进来可能要完成的事情有哪些？第一件事，找人聊天；第二件事，通过首页去做其他的事情，比如去朋友圈、扫码支付等等；第三件事，查找以前的聊天记录。那么这个页面的信息元素就可以按照使用场景划分为聊天会话栏、导航栏、小工具入口。

再向下划分，聊天会话栏又包含不同的元素：头像、姓名、聊天内容、聊天时间。这里面哪一个是最重要的呢？大多数情况下，我们都是通过头像和姓名来查找用户的，头像最容易吸引注意，但是会经常更改，参考价值没那么大，除非对方是万年不换头像党；姓名在有备注的情况下可以一直不变，所以这个信息也非常重要。上次聊天时间和内容相比之下是个次要信息，毕竟用户如果要看聊天记录，更可能会点进去。这样，信息的优先级就排出来了。

第四步，设计原型图。

以上全都理清了，然后才开始动手画。元素的摆放顺序要符合用户的认知顺序，元素的大小、颜色要符合信息层级的划分。不要被高保真原型图干扰，追求页面效果的精致。要用最简单的线框来传达你想要的感觉。即便是在没有UI，需要出高保真来代替UI效果图的情况下，也应该先在纸上，或者用Axure画出一个简单的线框图。如果有UI，就不需要高保真了，太逼真的设计反而会干扰UI的思路，给他们描绘出大概的想要的效果，最好找几个同样感觉的设计图来给他们参考，让他们理解产品想要传达出的感觉，自行发挥。

第五步，页面走查。

检查交互流程是否做到了操作前有预期、操作中有反馈、操作后能取消；边界case的处理方案，例如输入框输入过长等，是否覆盖到。

最重要的是将自己清空成小白，思考这样的页面交互流程和页面设计是否符合自己的认知，能不能做到秒懂。最好能找身边的人问一下，做一个简单的小调研，降低出错的概率。