手机界面设计中常用到的9种布局
原文链接
【编者按】本文作者阿沐 ,分享了手机界面设计中常用到的9种布局,我们需要考虑为不同的信息结构来提供相匹配的布局,
手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱不堪,丑陋且不可用。我们需要对信息进行有效组织,通过合理布局把信息展示给用户。合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的信息,产品的交互效率和信息的传递效率都得到提升。下面来看看手机界面设计中常用到的一些布局。
竖排列表
竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的,文字是横屏显示的,因此竖排列表可以包含比较多的信息。列表长度可以没有限制,通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观,用户接受度很高,常用于并列元素的展示,包括目录、分类、内容等。
文章图片
&
lt;
img class="
attachment-large"
title="
1630195964-02"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630195964-02.jpg"
1630195964-02"
width="
262"
height="
381"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301aC5-12"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301aC5-12.jpg"
16301aC5-12"
width="
480"
height="
800"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301a539-21"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301a539-21.jpg"
16301a539-21"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
横排方块
横排方块是把并列元素横向显示的一种布局。我们常见的工具栏,TAB,Coverflow 等都采用这种布局。受屏幕宽度限制,它可显示的数量较少,但可通过左右滑动屏幕或点击箭头查看更多内容,不过这需要用户进行主动探索。它比较适合元素数量较少的情形,当需要展示更多的内容适,竖排列表则是更优的选择。
文章图片
&
lt;
img class="
attachment-large"
title="
163019D28-3"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/163019D28-3.jpg"
163019D28-3"
width="
262"
height="
381"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
1630195F9-4"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630195F9-4.jpg"
1630195F9-4"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301914F-5"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301914F-5.jpg"
16301914F-5"
width="
300"
height="
180"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
九宫格
九宫格是非常经典的设计,展示形式简单明了,用户接受度很广。当元素数量固定不变为8、9、12、16时,则适合采用九宫格。虽然它有时候给人设计老套的感觉,不过它的一些变体目前比较流行,比如METRO风格,一行两格的设计等。
文章图片
&
lt;
img class="
attachment-large"
title="
16301a412-6"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301a412-6.jpg"
16301a412-6"
width="
262"
height="
381"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
1630191005-72"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630191005-72.jpg"
1630191005-72"
width="
480"
height="
800"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301a0U-83"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301a0U-83.jpg"
16301a0U-83"
width="
480"
height="
800"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
TAB
采用TAB可以减少界面跳转的层级,可以将并列的信息通过横向或竖向TAB来表现。与传统的一级一级的架构方式对比,此种架构方式可以减少用户的点击次数,提高效率。当功能之间联系密切,用户需要频繁在各功能之间进行频繁时,TAB布局是首选。
文章图片
&
lt;
img class="
attachment-large"
title="
1630193X0-9"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630193X0-9.jpg"
1630193X0-9"
width="
266"
height="
381"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
1630192E7-10"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630192E7-10.jpg"
1630192E7-10"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301a491-11"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301a491-11.jpg"
16301a491-11"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
多面板
多面版的布局常见于PAD终端,手机上也会用到。多面版很像竖屏排列的TAB,可以展示更多的信息量,操作效率较高,适合分类和内容都比较多的情形。它的不足是界面比较拥挤。
文章图片
&
lt;
img class="
attachment-large"
title="
1630194438-123"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630194438-123.jpg"
1630194438-123"
width="
266"
height="
384"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/center&
gt;
&
amp;
nbsp;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301a548-13"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301a548-13.jpg"
16301a548-13"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
1630194437-14"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630194437-14.jpg"
1630194437-14"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/center&
gt;
&
amp;
nbsp;
&
lt;
/p&
gt;
手风琴
手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容,在不用的时候,内容是隐藏的。因此它可承载比较多的信息,同时保持界面简洁。手风琴可以减少界面跳转,与树形结构相比,手风琴减少点击次数,提高操作效率。手风琴在浏览器上很常见,很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。
文章图片
&
lt;
img class="
attachment-large"
title="
16301952S-151"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301952S-151.jpg"
16301952S-151"
width="
262"
height="
379"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
1630193510-16"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630193510-16.jpg"
1630193510-16"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301a595-171"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301a595-171.jpg"
16301a595-171"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
弹出框
弹出框很常见,也属于布局设计的一种。弹出框把内容隐藏,仅在需要的时候才弹出,以节省屏幕空间。弹出框可在原有界面上进行操作,不必跳出界面,体验比较连贯。弹出框在安卓系统上的使用很普遍,比菜单、单选框、多选框等,在IOS系统上使用相对少些。
文章图片
&
lt;
img class="
attachment-large"
title="
1630194231-181"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630194231-181.jpg"
1630194231-181"
width="
262"
height="
380"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
1630192a5-19"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630192a5-19.jpg"
1630192a5-19"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/center&
gt;
&
amp;
nbsp;
&
lt;
/p&
gt;
【手机界面设计中常用到的9种布局】抽屉/侧边栏
抽屉也是将内容先藏起来,在需要时再展开。弹出框一般是完成设置或完成某个任务,而抽屉展示的一般是具体内容。抽屉在交互体验上更加自然,和原界面融合较好。抽屉栏一般从顶部或底部拉出,若是从左右两侧拉出的,我们一般称为侧边栏。Path和一些浏览器的书签,均采用了侧边栏的设计。
文章图片
&
lt;
img class="
attachment-large"
title="
1630196312-201"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630196312-201.jpg"
1630196312-201"
width="
262"
height="
381"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301952H-21"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301952H-21.jpg"
16301952H-21"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301922W-221"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301922W-221.jpg"
16301922W-221"
width="
300"
height="
500"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
标签
在搜索界面和分类界面时,会采用标签的方式来展现。标签方式比较动感的,增加了应用的趣味性,但使用场景较有限。
文章图片
&
lt;
img class="
attachment-large"
title="
1630194400-23"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/1630194400-23.jpg"
1630194400-23"
width="
262"
height="
381"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
文章图片
&
lt;
img class="
attachment-large"
title="
16301a4W-24"
src=https://www.it610.com/article/"
http://image.woshipm.com/wp-files/2012/10/16301a4W-24.jpg"
16301a4W-24"
width="
377"
height="
627"
/&
gt;
&
lt;
/a&
gt;
&
lt;
/p&
gt;
在产品设计过程中
,我们需要考虑为不同的信息结构来提供相匹配的布局。布局方案不是唯一的,巧妙采用各种布局可以增强产品的易用性和交互体验。我们还可以通过基本布局的组合来完成复杂的界面设计,例如天天浏览器的菜单,它是一个弹出框,同时它有三个TAB,每个TAB下面是个8宫格的布局。
对于手机终端来说,内容总是超出屏幕可显示的范围,界面布局的设计是非常重要的。掌握这9种常见的布局设计,可以让我们在产品设计时更加地游刃有余。
推荐阅读
- 只要有一台手机,人人都可以是摄影师
- 现代人的痛苦
- 一味地刷手机让你的效率越来越低下
- 如何在手机上查看测试vue-cli构建的项目
- H5、js调用手机通话|H5、js调用手机通话,短信
- iPhone手机这些使用指南|iPhone手机这些使用指南 你知道多少()
- 苹果手机如何利用库乐队自制铃声
- 带动全家锻炼
- 打死都不会用安卓手机(试用两天之后(嗯,真香!))
- 幼时的两小无猜