界面设计 – 云智图空间站

大多数产品的信息量很大，设计师又由于各种各样的原因不能对内容轻易地进行删改。如果对内容不好好整理，会让界面显得十分凌乱。下面就为大家介绍一套简单好用，又有理有据的为复杂界面设计布局的方法。为了方便大家理解，我使用Facebook首页作为案例。

1.把需要展示的信息都列出来

先不用考虑信息之间的关系和顺序，大致罗列出即可。主要信息一定要列出，优先级较低的信息不用全部覆盖也没有关系。

以Facebook为例，在首页需要展示的信息包括：Logo、搜索框、用户信息、导航、发帖发图、最新动态、朋友推荐、语言选择、网站声明、聊天板…

2.从产品策略的角度整理信息

与比你更了解这个产品的人讨论（如产品经理），从产品的角度对这些信息进行归纳：

基础功能：搜索、导航、设置、注销

基础信息：Logo、用户信息

主要功能：发帖发图

主要信息（不断更新）：最新动态

重要功能：聊天板

重要信息：朋友推荐

辅助功能：我创建的、Explore功能列表

辅助信息：语言选择、网站声明

3.从用户的角度整理信息

和用户（或潜在用户）进行交流，了解他们对这些信息的真实看法。因为越贴近真实心理越好，最好可以用一些口头语、较为感性的表达方式：

可能是我使用这个东西的唯一目的：最新动态

我常用的东西，越方便越好：发帖发图

必须有，但我通常不会仔细去看：Logo、搜索、用户信息

如果有动态我就感兴趣：聊天板、我创建的

我想要时才回去找：设置、注销、语言选择

我不关心，偶尔可能看一眼：朋友推荐、Explore功能表

这东西需要吗：网站声明

4.根据用户心理调整按照产品策略整理的信息

“聊天板”功能，除非有动态否则不会关心。所以放到辅助功能里。“朋友推荐”，用户一般并不会主动去看，所以放到辅助信息里。再对其余的信息结合用户关心的优先级前后排列。

调整后，信息的分类变成了这样：

基础功能：导航、搜索、设置、注销

基础信息：Logo、用户信息

主要功能：发帖发图

主要信息（不断更新）：最新动态

辅助功能：聊天板（策略重要）、我创建的、Explore功能列表

辅助信息：朋友推荐（策略重要）、语言选择、网站声明

5.用信息分类画页面布局

对其它主流产品进行分析，一般主流的形式会把基础功能和信息放在页面顶部，主要功能和信息放在页面中间位置，页面两侧放置辅助信息。综合分析后，完成自己的界面设计布局。

转场动效在界面设计中起到的作用无疑是显著的。相比静态界面，动态的转场更符合人的自然认知体系，能够有效地降低用户的认知负载。从这个角度来说，动效不仅是界面美化的元素，也是用户交互的基础。

1.自然是好UI动效的核心

用户界面中状态改变默认表现大多是生硬直接的，这会让用户有时候对产品理解产生困难。在现实生活中，事物不会突然出现或消失，通常都会有一个转变的过程。当界面有两个或多个状态时，状态之间的变化使用过渡动效来填充，能让用户便于理解状态切换是怎么来的。

2.高效的UI动效是层次分明的

一个层次分明的动效能够清晰展示出界面的状态变化，紧抓用户注意力。而这一点正是和用户对焦点的关注度紧密相关。好的过渡动效有助于用户将注意力集中到关键内容上，这就要取决于动效是否能够在正确的时间强调正确的内容。

3.关联是过渡动效的重要功能

既然是过渡，那自然就要牵扯到变化前后元素之间的关联。良好的过渡动效连接着新出现的界面元素和之前的交互与触发元素，这种关联逻辑让用户清楚变化的过程，以及界面中所发生的前后变化。

4.是高效UI动效的基础

在设计过渡动效时，设计师一定要对时间和速度把握好。响应要快速准确，绝不拖沓，这样不会浪费用户的时间，让人觉得APP发生卡顿，也不会让用户觉得烦躁。

5.清晰的UI动效才是好动效

不仅仅是动效，清晰是所有好的设计都具有的共同特点。屏幕上的每一处变化都会引起用户的注意，这些都会成为影响用户体验和决策的至关要素，不必要的动效会让用户感到混乱，产生不好的体验。

Tag: 界面设计