新手必看•关于移动端设计常见布局你必须知道这些...

本文源自微信公众号:学翼启  更多原创文章可访问微信号:tencentgad

手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的信息,产品的交互效率和信息的传递效率都得到提升。

上期我们列举了关于WEB网页设计的几种常见布局,那么本期我们一起来看看移动端常见布局又有哪些呢?

•列表式布局

•陈列馆式布局

•九宫格布局

•选项卡式布局

•旋转木马布局

•行为扩展式布局

•多面板布局

•图表式布局

1、列表式布局

特点:

内容从上向下排列,导航之间的跳转要回到初始点,好比一条街上有理发店,饭店,你想从理发店到饭店,得先多理发店出来,才能进入饭店。

优点:

1、层次展示清晰

2、视觉流线从上向下,浏览体验快捷。

3、可展示内容较长的菜单或拥有次级文字内容的标题。

不足:

1、导航之间的跳转要回到初始点。

2、同级内容过多时,用户浏览容易产生疲劳。

3、排版灵活性不是很高。

4、只能通过排列顺序、颜色来区分各入口重要程度。

场景:

列表菜单适合用来显示平级菜单,且较长或拥有次级文字内容的标题。

2、陈列馆式布局

特点:

布局比较灵活,设计师可以平均分布这些网络,也可根据内容的重要性不规则分布,相对列表式,其优点在于同样的高度下可放置更多的菜单,更具有流动性,曝布流就属于其中一种。

优点:

1、直观展现各项内容。

2、方便浏览经常更新的内容。

不足:

1、不适合展现顶层入口框架。

2、容易形成界面内容过多,显得杂乱。

3、设计效果容易呆板。

场景:

适合以图片为主的单一内容浏览型的展示。

3、九宫格布局

特点:

相比陈列馆式,布局比较稳定为一行三列式布局。

优点:

1、清晰展现各入口。

2、容易记住各入口位置,方便快速查找。

不足:

1、菜单之间的跳转要回到初始点。

2、无法向用户介绍大概的功能,只能点击进去才能获知,初始状态不如列表式明朗。

3、容易形成更深的路径。

4、不能直接展现入口内容。

5、不能显示太多入口次级内容。

场景:

适合入口比较多的展示,而且导航之间切换不是很频繁的情况,也就是业务之间相对独立,没有太多的瓜葛。

4、选项卡式布局

特点:

导航一直存在,具有选中态,可快速切换到另一个导航。

优点:

1、减少界面跳转的层级。

2、分类位置固定。

3、清楚当前所在的入口位置。

4、轻松在各入口间频繁跳转且不会迷失方向。

5、直接展现最重要入口的内容信息。

不足:

功能入口过多时,该模式显得笨重不实用。

场景:

大部分放在底部,方便用户操作,切换的时候,选中状态高亮显示,有少数放在顶部。

适合分类少及其内容同时展示,导航菜单项数量为3-5个;各导航菜单项之间内容/功能有显著差异;用户在各个导航选项之间需要非常频繁的切换操作

5、旋转木马布局

特点:

重点展示一个对象,通过手势滑动按顺序查看更多。

优点:

1、单页面内容整体性强,聚焦度高。

2、线性的浏览方式有顺畅感、方向感。

不足:

1、受屏幕宽度限制,它可显示的数量较少,需要用户进行主动探索。

2、由于各页面内容结构相似,容易忽略后面的内容。

3、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面。

场景:

适合数量少,聚焦度高,视觉冲击力强的图片展示。

6、行为扩展式布局

特点:

能在一屏内显示更多的细节,无需页面的跳转。

优点:

1、减少界面跳转的层级。

2、对分类有整体性的了解。

3、清楚当前所在的入口位置。

不足:

分类位置不固定,当展开的内容比较多时,跨分类跳转不方便。

场景:

适合分类多及其内容同时展示。

内容展示的信息多。

7、多面板布局

特点:

能同时呈现比较多的分类及内容。

优点:

1、减少界面跳转的层级。

2、对分类有整体性的了解。

3、分类位置固定。

4、清楚当前所在的入口位置。

不足:

界面比较拥挤。

场景:

适合分类多及其内容同时展示。

内容展示的信息不多。

8、图表式布局

特点:

用图表的形式直观的呈现信息。

优点:

1、总体性强。

2、直观。

不足:

详情信息显示的有限。

场景:

适合总-分结构或表现时间段内的趋势走向的展示。

小结

以上都是基本布局,在实际的设计中,我们可以像搭积木一样组合起来完成复杂的界面设计。另外要考虑到各种布局的优劣,并有最完美的布局,要考虑信息结构、重要层次以及数量上的差异,提供最适合的布局,以增加产品的易用性和交互体验。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容