当前位置: 首页 >文章 > 复杂界面的布局设计
收藏
分享

复杂界面的布局设计

举报ZYuhanZYuhan发布于 2019-03-063356阅读12点赞1评论
很多产品的信息量很大,又因为各种各样的原因设计师不能对内容进行轻易删减。如果不好好整理信息,会让界面越来越凌乱。我从去年开始做的很多项目都是这种情况,于是总结了一套简单好用,又有理有据的为复杂界面设计布局的方法。...

很多产品的信息量很大,又因为各种各样的原因设计师不能对内容进行轻易删减。如果不好好整理信息,会让界面越来越凌乱。我从去年开始做的很多项目都是这种情况,于是总结了一套简单好用,又有理有据的为复杂界面设计布局的方法。

为了方便大家理解,我使用Facebook首页作为案例。

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

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

以Facebook为例,首页需要展示的信息有:

Logo、搜索、用户信息、导航、Explore功能列表、发帖发图、最新动态、朋友推荐、语言选择、网站声明、聊天板、我创建的、设置、注销…

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

与对这个产品比你更了解的人讨论(如产品经理),从产品策略的角度将这些信息进行分组归纳(这时还不需要过多考虑用户):

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

基础信息:Logo、用户信息

主要功能:发帖发图

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

重要功能:聊天板

重要信息:朋友推荐

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

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

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

与用户(或潜在用户)交流,观察他们对这些信息的真实想法。因为越贴近真实心理越好,所以可以用一些口头话、感性的表达方式:

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

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

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

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

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

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

这东西需要吗:网站声明

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

产品策略中的重要功能“聊天板”根据用户反馈,除非有动态否则不会关心。所以放到辅助功能里。

产品策略中的重要信息“朋友推荐”根据用户反馈,并不会主动去看,所以放到辅助信息里。

再将其余的信息结合用户关心的优先级前后排列。

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

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

基础信息:Logo、用户信息

主要功能:发帖发图

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

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

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

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

分析其它产品,发现主流的形式是把基础功能和信息放在顶部,主要功能和信息放在中间,两侧放置辅助信息。为了方便理解,我挑选了一些大家比较熟悉的:

简书

Quora

淘宝

微博

知乎

综合分析后,设计出自己的布局:

个复杂页面的布局设计就完成了。


1条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,637人)

电商海报设计训练营
距离开班仅剩11天64人已报名
【5月】零基础手绘插画训练营
距离开班仅剩11天51人已报名
【5月】零基础动态表情包创作训练营
距离开班仅剩28天13人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了41,154
并提交了234份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证