UI社
  • 首页
  • UI素材
  • 平面图形
  • 办公字体
  • 影视三维
  • 样式工具
  • 素材包
  • 设计干货
登录

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

设计文章 0 49
    当前位置:
  1. 首页
  2. 设计干货
  3. 设计文章
  4. 正文

 

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

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

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

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

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

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

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

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

  • 基础功能:搜索、导航、设置、注销
  • 基础信息:Logo、用户信息
  • 主要功能:发帖发图
  • 主要信息(不断更新):最新动态
  • 重要功能:聊天板
  • 重要信息:朋友推荐
  • 辅助功能:我创建的、Explore功能列表
  • 辅助信息:语言选择、网站声明

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

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

  • 可能是我使用这个东西的唯一目的:最新动态
  • 我常用的东西,越方便越好:发帖发图
  • 必须有,但我通常不会仔细去看:Logo、搜索、用户信息
  • 如果有动态我就感兴趣:聊天板、我创建的
  • 我想要时才回去找:设置、注销、语言选择
  • 我不关心,偶尔可能看一眼:朋友推荐、Explore功能表
  • 这东西需要吗:网站声明

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

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

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

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

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

  • 基础功能:导航、搜索、设置、注销
  • 基础信息:Logo、用户信息
  • 主要功能:发帖发图
  • 主要信息(不断更新):最新动态
  • 辅助功能:聊天板(策略重要)、我创建的、Explore功能列表
  • 辅助信息:朋友推荐(策略重要)、语言选择、网站声明

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

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

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

△ 简书

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

△ Quora

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

△ 淘宝

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

△ 微博

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

△ 知乎

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

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

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

声明:本站所有文章,均来自互联网与网友分享。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
bookceBookexploreFacebooklogoXP一个一套
马老野子永久会员
上一篇 分享7种磨砂玻璃设计使用方法!
下一篇 新手想进阶技能?超酷炫的动感特效轻松get!

相关文章

粗犷大气的汉堡王标志buger king logo同款英文字体素材

粗犷大气的汉堡王标志buger king logo同款英文字体素材

英文Logo如何设计更具有创意和识别性的记忆点

英文Logo如何设计更具有创意和识别性的记忆点

书本书店品牌LOGO实战案例设计过程分享

书本书店品牌LOGO实战案例设计过程分享

简洁清新的现代NFT数字艺术藏品平台界面设计ui素材xd,figma,sketch

简洁清新的现代NFT数字艺术藏品平台界面设计ui素材xd,figma,sketch

盘点2022年15种LOGO设计风格!

盘点2022年15种LOGO设计风格!

7种时尚实用的配色方案助你摆脱LOGO色彩太单调

7种时尚实用的配色方案助你摆脱LOGO色彩太单调

死磕以下平面设计常见细节规范,能让作品呈现效果更深层次体现功力!

死磕以下平面设计常见细节规范,能让作品呈现效果更深层次体现功力!

听说你还不会,国风LOGO设计?

听说你还不会,国风LOGO设计?

简洁科技风领克仪表板HMI界面设计ui素材figma,xd,sketch

简洁科技风领克仪表板HMI界面设计ui素材figma,xd,sketch

超实用,做LOGO的四种常用技巧!

超实用,做LOGO的四种常用技巧!

头秃了,喜茶新LOGO上线!手指也没了?

头秃了,喜茶新LOGO上线!手指也没了?

illustrator可爱风字体设计教程,新手也能做好看!

illustrator可爱风字体设计教程,新手也能做好看!

实用精辟的4种提升海报设计质感大法

实用精辟的4种提升海报设计质感大法

我准备了20张设计图解,帮助你掌握实用的UI/UX设计准则

我准备了20张设计图解,帮助你掌握实用的UI/UX设计准则

ui界面设计魔鬼细节控追求极致的16个细节要点

ui界面设计魔鬼细节控追求极致的16个细节要点

紧追潮流时尚的喜茶带货海报怎么设计,先来一打案例分析分析,然后你就会了

紧追潮流时尚的喜茶带货海报怎么设计,先来一打案例分析分析,然后你就会了

素材推荐
简洁高效的任务列表todolist移动端ui界面设计素材adobe xd源文件

简洁高效的任务列表todolist移动端ui界面设计素材adobe xd源文件

2020-12-20 专属
WyventIOS UI kit .Sketch素材下载

WyventIOS UI kit .Sketch素材下载

2020-02-15 专属
Sky UI Kit 主题包

Sky UI Kit 主题包

2017-02-06 8
金融财务/创业团队着陆页火箭起飞寓意海报banner扁平卡通插画风格网页模板web ui素材

金融财务/创业团队着陆页火箭起飞寓意海报banner扁平卡通插画风格网页模板web ui素材

2021-02-23 专属
六一儿童玩具电子商城手机app ui界面设计figma素材下载

六一儿童玩具电子商城手机app ui界面设计figma素材下载

2020-12-22 专属
简洁扁平化社交媒体管理应用界面设计ui素材(sketch,figma,xd)

简洁扁平化社交媒体管理应用界面设计ui素材(sketch,figma,xd)

2022-05-12 专属
白色UI主题包Whey 下载 

白色UI主题包Whey 下载 

2017-02-08 8
Night Event App ui .fig素材下载

Night Event App ui .fig素材下载

2021-01-08 专属
极具创意的设计团队封面海报模板素材adobe xd&psd源文件

极具创意的设计团队封面海报模板素材adobe xd&psd源文件

2020-12-17 专属
58租房自如找房客类移动端app ar vr看房界面ui设计sketch素材下载

58租房自如找房客类移动端app ar vr看房界面ui设计sketch素材下载

2020-12-22 专属
UI社

UI社是专业的UI设计网站,致力于成长为最好的精品UI设计素材资源网站!

关于UI社
商业合作版权声明
UI社常用
关键词找素材UI素材专题网址导航
关注UI社公众号
关于UI社视频号
微信在线客服
首页友情链接
  • PSD素材网
  • 小科普
  • 良凡设计
  • 设计一点通

Copyright © 2021 UI社 - All rights reserved粤ICP备20059768号京公网安备 188888888

  • 首页
  • 素材
  • 文章
  • 我的
  • 顶部
App Figma Graphics icons PSD sketch UI UI素材 xd 主题包 图标 图标素材 平面图形 样机素材 界面 矢量图标 设计干货 设计文章