购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.5 移动UI设计常用的布局方式

UI页面的布局方式会直接影响一个App的视觉效果。好的布局方式不但能在视觉上令人感到舒适,还能帮助用户快速找到他们想要的内容。移动UI设计中常用的布局方式有列表式、陈列馆式、九宫格式等8种,下面就来分别介绍这些布局方式的特点及适用范围。

1.5.1 列表式布局

列表式布局是最经典的UI布局方式,其特点是内容从上向下依次排列,导航之间的跳转需要回到初始位置。列表式布局有时也会搭配一些宫格式布局。

列表式布局常用于新闻类App的UI设计,优点是能在较小的屏幕中显示多条信息,通过上下滑动的手势获取更多信息,并且因为内容从上向下排列,所以能展示内容较长的菜单或拥有次级文字内容的标题等。列表式布局的缺点是版面的灵活性不高,如果分类目录过多,连续滑动容易导致定位不准或触发别的栏目。下图所示为列表式布局及其应用效果。

1.5.2 陈列馆式布局

陈列馆式布局是一种比较灵活的布局方式,设计师可以平均分布网格,也可以根据内容的重要性进行不规则分布。与列表式布局相比,陈列馆式布局在同样的高度下可以放置更多的菜单,更具有流动性。陈列馆式布局适合以图片为主的单一内容浏览型的展示。

陈列馆式布局的优点是可以直观展示各项内容,便于随时浏览经常更新的内容。不足之处是不适合展示顶层入口框架;当UI中展示的内容过多时,如果没有处理好,很容易给人留下杂乱的印象。我们熟悉的手机淘宝App就采用了陈列馆式布局呈现用户经常浏览的类目,如下图所示。

1.5.3 宫格式布局

宫格式布局是移动App上较为常见且用户体验最佳的一种布局方式,适合入口比较多且导航之间切换不太频繁的内容展示,也就是业务之间相对独立,没有太多的联系。最常见的九宫格式布局为比较稳定的一行三列式。我们熟悉的携程、途牛和支付宝等App都使用了九宫格式布局,这种布局井然有序且间隔合理,能带给用户较为舒服的视觉感受。

宫格式布局的优点是能清晰地展现各入口,并且方便用户快速记住并查找各入口的位置。但这种布局方式的跳转也需要回到初始点,无法向用户介绍大概的功能,只能点击进去才能获知,初始状态不如列表式布局明朗,这样就容易形成更深的路径。下图所示为九宫格式布局及其应用效果,看起来非常干净、整齐。

1.5.4 选项卡式布局

选项卡式布局的特点是会始终显示一个导航栏,用户可以通过单击导航栏中的标签来快速切换选项卡,当前选项卡的标签会突出显示。选项卡式布局的导航栏大多数被放在UI的底部,方便用户操作,但是也有少部分导航栏被放在UI的顶部。选项卡式布局适用于分类少且其内容同时展示的UI,其分类数量以3~5个为最佳。

选项卡式布局的优点是直接展示最重要的接口内容,信息分类位置固定,用户清楚当前所在的入口位置,页面跳转的层级少,可轻松在各入口间频繁跳转。不足之处则是当功能入口过多时,选项卡式布局会显得笨重、不实用。下图所示为选项卡式布局及其应用效果。

1.5.5 旋转木马式布局

旋转木马式布局的特点是重点展示一个对象,通过手势滑动按顺序查看更多的内容。旋转木马式布局适合数量少、聚焦度高且视觉冲击力强的图片展示。

旋转木马式布局的优点是页面内容整体性较强,聚焦度高,线性的浏览方式有顺畅感和方向感。缺点是往往因为屏幕尺寸的限制,不能展现更多精彩内容,而且由于各页面的内容结构相似,容易忽略后面的内容,并且不能跳跃式地查看间隔的页面,只能按顺序查看相邻的页面。下图所示为旋转木马式布局及其应用效果,看起来不仅简洁、大方,而且聚焦度较高。

1.5.6 行为扩展式布局

行为扩展式布局的特点是无需跳转页面就能在一屏内显示更多细节,适用于分类多且其内容同时展示的UI。腾讯QQ App的联系人页面就采用了这种布局,如下图所示。

行为扩展式布局的优点是能减少页面跳转的层级,用户可对整个UI中栏目的分类有一个整体性的了解。缺点则是分类位置不固定,展开的内容较多时,跨分类跳转不方便。

1.5.7 多面板式布局

多面板式布局最大的特点是能同时呈现比较多的分类及内容,适用于分类多且需要同时展示其内容的UI。

多面板式布局的优点在于分类位置固定,用户清楚当前所在的入口位置,对分类有整体性的了解,能减少页面跳转的层级。缺点则是内容较多,容易让人感觉拥挤,造成视觉疲劳。下图所示为多面板式布局及其应用效果。

1.5.8 图表式布局

图表式布局,顾名思义,就是以图表的形式直观呈现信息。图表式布局能直观展示详细信息,很适用于与数据和账单有关的UI。图表式布局的优点是直观且总体性强,用户通过图形样式就能清楚了解各项数据内容。不足之处是UI的大部分区域被图表占据,显示的详细信息非常有限。下图所示为图表式布局及其应用效果。 bvSsRWKjtLh5mq0mkS4YwqpaPTVpcSfl+Mhyvk83t0eE548rcJ7sbXqo4uT6Nvfr

点击中间区域
呼出菜单
上一章
目录
下一章
×