复杂界面的布局设计

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

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

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

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

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

与比你更了解这个产品的人讨论(如产品经理),从产品的角度对这些信息进行归纳:

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

基础信息:Logo、用户信息

主要功能:发帖发图

主要信息(不断更新):最新动态

重要功能:聊天板

重要信息:朋友推荐

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

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

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

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

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

我常用的东西,越方便越好:发帖发图

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

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

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

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

这东西需要吗:网站声明

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

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

调整后,信息的分类变成了这样:

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

基础信息:Logo、用户信息

主要功能:发帖发图

主要信息(不断更新):最新动态

辅助功能:聊天板(策略重要)、我创建的、Explore功能列表

辅助信息:朋友推荐(策略重要)、语言选择、网站声明

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

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

版权声明:本文出自云智图(官方微信服务号:yzt-design)