手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱不堪,丑陋且不可用。我们需要对信息进行有效组织,通过合理布局把信息展示给用户。合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的信息,产品的交互效率和信息的传递效率都得到提升。下面来看看手机界面设计中常用到的一些布局。
竖排列表
竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的,文字是横屏显示的,因此竖排列表可以包含比较多的信息。列表长度可以没有限制,通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观,用户接受度很高,常用于并列元素的展示,包括目录、分类、内容等。
横排方块
横排方块是把并列元素横向显示的一种布局。我们常见的工具栏,TAB,Coverflow 等都采用这种布局。受屏幕宽度限制,它可显示的数量较少,但可通过左右滑动屏幕或点击箭头查看更多内容,不过这需要用户进行主动探索。它比较适合元素数量较少的情形,当需要展示更多的内容适,竖排列表则是更优的选择。
九宫格
九宫格是非常经典的设计,展示形式简单明了,用户接受度很广。当元素数量固定不变为8、9、12、16时,则适合采用九宫格。虽然它有时候给人设计老套的感觉,不过它的一些变体目前比较流行,比如METRO风格,一行两格的设计等。
TAB
采用TAB可以减少界面跳转的层级,可以将并列的信息通过横向或竖向TAB来表现。与传统的一级一级的架构方式对比,此种架构方式可以减少用户的点击次数,提高效率。当功能之间联系密切,用户需要频繁在各功能之间进行频繁时,TAB布局是首选。
多面板
多面版的布局常见于PAD终端,手机上也会用到。多面版很像竖屏排列的TAB,可以展示更多的信息量,操作效率较高,适合分类和内容都比较多的情形。它的不足是界面比较拥挤。
手风琴
手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容,在不用的时候,内容是隐藏的。因此它可承载比较多的信息,同时保持界面简洁。手风琴可以减少界面跳转,与树形结构相比,手风琴减少点击次数,提高操作效率。手风琴在浏览器上很常见,很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。
弹出框
弹出框很常见,也属于布局设计的一种。弹出框把内容隐藏,仅在需要的时候才弹出,以节省屏幕空间。弹出框可在原有界面上进行操作,不必跳出界面,体验比较连贯。弹出框在安卓系统上的使用很普遍,比菜单、单选框、多选框等,在IOS系统上使用相对少些。
抽屉/侧边栏
抽屉也是将内容先藏起来,在需要时再展开。弹出框一般是完成设置或完成某个任务,而抽屉展示的一般是具体内容。抽屉在交互体验上更加自然,和原界面融合较好。抽屉栏一般从顶部或底部拉出,若是从左右两侧拉出的,我们一般称为侧边栏。Path和一些浏览器的书签,均采用了侧边栏的设计。
标签
在搜索界面和分类界面时,会采用标签的方式来展现。标签方式比较动感的,增加了应用的趣味性,但使用场景较有限。
在产品设计过程中,我们需要考虑为不同的信息结构来提供相匹配的布局。布局方案不是唯一的,巧妙采用各种布局可以增强产品的易用性和交互体验。我们还可以通过基本布局的组合来完成复杂的界面设计,例如天天浏览器的菜单,它是一个弹出框,同时它有三个TAB,每个TAB下面是个8宫格的布局。
对于手机终端来说,内容总是超出屏幕可显示的范围,界面布局的设计是非常重要的。掌握这9种常见的布局设计,可以让我们在产品设计时更加地游刃有余
分享到:
相关推荐
C语言程序设计中常用到的经典实例,适合于初学者。
【日本软件外包】设计书中常用到的文型
设计书中常用到的文型.doc本文档收集了关于对日软件开发的文档中所用到的大部分句型,可供参考学习。
开发BS软件中常用到 JavaScript 代码,开发BS软件中常用到 JavaScript 代码,开发BS软件中常用到 JavaScript 代码
网页中常用到的用于显示进度的图片。 在网站设计中常用到的。
JS资料大全(网页设计师工作中常用到的),包括很多JS文件的。。。。
数学中常用到的英语词汇 数学中常用到的英语词汇
Eclipce 中常用到的快捷键
随着经济的繁荣 with the booming of the economy 2. 随着人民生活水平的显著提高 with the remarkable improvement of people's living standard 3. 先进的科学技术 advanced science and technology ...
asp.net中常用到的SQL分页存储过程
CCNA中常用到的基础语句启动接口,分配ip地址: 以下是引用片段: router> router> enable router# router# configure terminal router(config)# router(config)# interface type port router...
asp.net 开发中常用到的代码小小节
AD转换后期处理中常用到的软件滤波方法,介绍常见的几种软件滤波方法
html中常用到的英语.doc
数字图像处理中常用到图片集,适合数字图像开发人员使用
as3 中常用到的公式 如 缓动公式 弹性公式。向鼠标旋转(或向某点旋转)。。很多,网上凑集 不下会后悔的哦, 看看吧,绝对实用