业界动态
手机界面设计中12种常用布局-转载手机界面设计「手机界面设计中12种常用布局-转载」
2025-01-26 11:15

总结下手机界面改版要考虑的布局,主要的分为以下2大类

  1. 列表式
  2. 陈列馆式
  3. 九宫馆式
  4. 选项卡式
  5. 旋转木马
  6. 行为扩展式
  7. 多面板
  8. 图表式
  1. 抽屉式
  2. 超级菜单式
  3. 弹出式
  4. 图片轮盘式

其中,所有的主要导航都可以做为次级导航,但次级导航不太适合用作主要导航 。为什么?因为次导航是隐藏起来,隐而不见、只有触发时才显示。

 

 

 

特点:

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

优点:

1、层次展示清晰

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

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

不足:

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

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

3、排版灵活性不是很高

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

场景:

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

 

特点:

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

优点:

1、直观展现各项内容

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

不足:

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

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

3、设计效果容易呆板

场景:

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

 

特点:

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

优点:

1、清晰展现各入口

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

不足:

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

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

3、容易形成更深的路径

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

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

场景:

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

 

特点:

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

优点:

1、减少界面跳转的层级

2、分类位置固定

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

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

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

不足:

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

场景:

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

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

 

1427195220_37_w996_h599

特点:

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

优点:

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

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

不足:

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

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

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

场景:

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

 

特点:

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

优点:

1、减少界面跳转的层级

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

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

不足:

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

场景:

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

内容展示的信息多

 

特点:

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

优点:

1、减少界面跳转的层级

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

3、分类位置固定

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

不足:

2、界面比较拥挤

场景:

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

内容展示的信息不多

 

特点:

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

优点:

1、总体性强

2、直观

不足:

1、详情信息显示的有限

场景:

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

 

特点:

突出核心功能,隐藏其它功能。

优点:

1、不占用宝贵的屏幕空间,让用户首先能聚焦于内容

2、导航的菜单项目不受数量限制,应用的所有信息组织入口都可以加入到抽屉导航中

3、扩展性强,配置灵活,一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中

不足:

1、隐藏框架中其他入口、用户需要一定记忆成本

2、对入口交互的功能可见性要求高

3、容易与应用内的其他交互模式冲突,比如侧滑手势操作

场景:

适合功能较多,信息结构较复杂的产品,用户的注意力聚焦在主信息流的浏览上,不用频繁切换“子产品模块”,且扩展性比较好

 

特点:

默认具有选中态,导航/分类比较多,可快速切换到另一个导航/分类。

优点:

1、层次展示清晰

2、浏览时产生流畅体验

3、可展示内容较长的标题

4、可展示标题的次级内容

不足:

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

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

3、排版灵活性不是很高

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

场景:

比较复杂的信息架构,导航分类比较多。

 

特点:

没有跳出感,适合内容比较少和简单操作的呈现。

优点:

1、在原有界面上进行操作,不必跳出界面,体验比较连贯

2、在用户需要的时候才显示(重要提示除外),不主动干扰

不足:

1、显示的内容有限

场景:

适合内容较少的显示

 

特点:

节省空间,可使用箭头,圆点或显示不全的图片告诉用户还有更多的内容可查看。

优点:

1、查看更多内容不必跳出界面,体验连贯。

2、节省空间。

不足:

横屏宽度有限,更多的内容有数量上限制,如微信只展示5个好友信息。

场景:

适合图片或信息组块更多的展示方式。

以上都是基本布局,在实际的设计中,我们可以像搭积木一样组合起来完成复杂的界面设计,例如手游吧的顶部导航用的是选项卡,下面采用多面板的布局。

    以上就是本篇文章【手机界面设计中12种常用布局-转载手机界面设计「手机界面设计中12种常用布局-转载」】的全部内容了,欢迎阅览 ! 文章地址:http://keair.bhha.com.cn/news/7976.html 
     文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 康宝晨移动站 http://keair.bhha.com.cn/mobile/ , 查看更多   
最新文章
北京将举办人形机器人跑马拉松,这是科技奇迹还是未来常态?
据多家媒体报道,北京亦庄宣布全球首个人形机器人半程马拉松将于4月13日鸣枪开跑。许多人看到这一消息的第一反应是:机器人跑马
武汉“三轮车”乐团,意外走红
白天送快递,晚上搞音乐,武汉有个快递员乐团——“三轮车”乐团意外走红,在网上收获了大量粉丝,还有客户催更视频。 快递员组
把课堂搬到车间、直播间、博览会……浙江工商职院师生共赴实践大课堂
“同学们,看这里!这款月球灯从概念草图到量产成品,每一步都凝聚了设计师的心血。”在宁波双宇电子的设计研发中心,设计总监正
我是一个即将崩溃的女人,我把灵魂拆成四份
2007年10月,即将迎来自己88岁生日的多丽丝·莱辛拿到了诺贝尔文学奖,成为当时年龄最大的得奖者。莱辛对自己的得奖感到意外,她
华为只是上汽奥迪A5L的1%
· 汽车十三行  ID:wzhauto2023 ·   AI的加入,让唯智能论评判汽车好坏,又多了一个维度。人们似乎已经习惯了用屏幕的大
一年狂揽759亿!柳州如何把“路边摊”做成全球生意?
图为柳州白莲洞穴科学博物馆库房内的螺蛳壳化石。韦国政 摄到了二十世纪七八十年代,柳州的夜市逐步繁荣,不少食客在吃米粉的时
深度解析Bless Network:推动AI时代的新计算基础设施
Bless Network提供了一种新的分布式基础设施解决方案,以满足爆炸性增长的AI计算需求。传统的集中式云基础设施无法解决稳定性、
下降5.3%背后的家校责任边界
  3月8日提请十四届全国人大三次会议审议的最高人民法院工作报告(以下简称“最高法报告”)中,一个数据引起全国政协委员、民
日本男篮内线核心的 CBA 经历,实在是惨啊
3月7-9日,2025东超终极4强赛将在中国澳门特别行政区隆重举行。届时,全亚洲球迷的目光将汇聚于新濠影汇综艺馆的东亚地区最顶级
瑞士百达赵俊杰:踏出舒适圈,拥抱机遇|她访谈
从偶然到必然本科攻读国际金融专业的赵俊杰,大学毕业后的第一份工作是在一家五星级酒店从事市场营销工作。虽然看似与金融业毫不
相关文章