1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

用一个实战案例,教你学会复杂界面的布局设计--九分科技

时间:2020-06-26   分类:交互设计    作者:网络   来源:网络整理   点击:97

用一个实战案例,教你学会复杂界面的布局设计 www.9fen.net

九分网络

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

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

九分网络

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

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

以Facebook为例,首页需要展示的信息有: www.9fen.net

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

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

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

基础功能:搜索、导航、设置、注销 本文来自九分网络

基础信息:Logo、用户信息

copyright 9fen.net

主要功能:发帖发图

内容采集来自9fen.net

主要信息(不断更新):最新动态 九分网络

重要功能:聊天板

内容采集来自9fen.net

重要信息:朋友推荐

www.9fen.net

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

www.9fen.net

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

本文来自九分网络

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

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

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

本文来自九分网络

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

www.9fen.net

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

九分网络

如果有动态我就感兴趣:聊天板、我创建的 本文来自九分网络

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

本文来自九分网络

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

www.9fen.net

这东西需要吗:网站声明

copyright 9fen.net

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

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

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

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

内容采集来自9fen.net

调整后,信息的分类变成了这样: copyright 9fen.net

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

内容采集来自9fen.net

基础信息:Logo、用户信息 本文来自九分网络

主要功能:发帖发图

www.9fen.net

主要信息(不断更新):最新动态 www.9fen.net

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

www.9fen.net

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

九分网络

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

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

用一个实战案例,教你学会复杂界面的布局设计 内容采集来自9fen.net

内容采集来自9fen.net

△ 简书

www.9fen.net

用一个实战案例,教你学会复杂界面的布局设计

www.9fen.net

内容采集来自9fen.net

Quora

copyright 9fen.net

用一个实战案例,教你学会复杂界面的布局设计 本文来自九分网络

copyright 9fen.net

△ 淘宝

www.9fen.net

用一个实战案例,教你学会复杂界面的布局设计

内容采集来自9fen.net

内容采集来自9fen.net

△ 微博

copyright 9fen.net

用一个实战案例,教你学会复杂界面的布局设计

www.9fen.net

本文来自九分网络

△ 知乎 内容采集来自9fen.net

综合分析后,设计出自己的布局: www.9fen.net

用一个实战案例,教你学会复杂界面的布局设计

copyright 9fen.net

copyright 9fen.net

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

copyright 9fen.net

「用一个案例教你学东西系列」

智能对象丨《用一个实战教程,让你学会智能对象》 www.9fen.net

直方图丨《用一个后期教程,帮你学会利用直方图破解图像的方法》 本文来自九分网络

图层样式丨《做一个实战教程,让你学会图层样式9大技能》

本文来自九分网络

标签: 经验分享 优设 优设网 ui设计 排版布局

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----