转自:http://reynold.cn/?p=422
推荐理由:感谢@天天阿木 给我们带来的总结。作为一名手机浏览器PM,他从手机界面的设计布局入手,告诉我们如何在APP上展示内容。相信,随着产品设计的迭代更新,还会有更酷的布局出现,让我们一起来看看是哪几种。
手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱不堪,丑陋且不可用。我们需要对信息进行有效组织,通过合理布局把信息展示给用户。合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的信息,产品的交互效率和信息的传递效率都得到提升。下面来看看手机界面设计中常用到的一些布局。
1,竖排列表
竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的,文字是横屏显示的,因此竖排列表可以包含比较多的信息。列表长度可以没有限制,通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观,用户接受度很高,常用于并列元素的展示,包括目录、分类、内容等。
2、 横排方块
横排方块是把并列元素横向显示的一种布局。我们常见的工具栏,TAB,Coverflow 等都采用这种布局。受屏幕宽度限制,它可显示的数量较少,但可通过左右滑动屏幕或点击箭头查看更多内容,不过这需要用户进行主动探索。它比较适合元素数量较少的情形,当需要展示更多的内容适,竖排列表则是更优的选择。
3,九宫格
九宫格是非常经典的设计,展示形式简单明了,用户接受度很广。当元素数量固定不变为8、9、12、16时,则适合采用九宫格。虽然它有时候给人设计老套的感觉,不过它的一些变体目前比较流行,比如METRO风格,一行两格的设计等。
4,TAB
采用TAB可以减少界面跳转的层级,可以将并列的信息通过横向或竖向TAB来表现。与传统的一级一级的架构方式对比,此种架构方式可以减少用户的点击次数,提高效率。当功能之间联系密切,用户需要频繁在各功能之间进行频繁时,TAB布局是首选。
5,多面板
多面版的布局常见于PAD终端,手机上也会用到。多面版很像竖屏排列的TAB,可以展示更多的信息量,操作效率较高,适合分类和内容都比较多的情形。它的不足是界面比较拥挤。
6,手风琴
手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容,在不用的时候,内容是隐藏的。因此它可承载比较多的信息,同时保持界面简洁。手风琴可以减少界面跳转,与树形结构相比,手风琴减少点击次数,提高操作效率。手风琴在浏览器上很常见,很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。
7,弹出框
弹出框很常见,也属于布局设计的一种。弹出框把内容隐藏,仅在需要的时候才弹出,以节省屏幕空间。弹出框可在原有界面上进行操作,不必跳出界面,体验比较连贯。弹出框在安卓系统上的使用很普遍,比菜单、单选框、多选框等,在IOS系统上使用相对少些。
8,抽屉/侧边栏
抽屉也是将内容先藏起来,在需要时再展开。弹出框一般是完成设置或完成某个任务,而抽屉展示的一般是具体内容。抽屉在交互体验上更加自然,和原界面融合较好。抽屉栏一般从顶部或底部拉出,若是从左右两侧拉出的,我们一般称为侧边栏。Path和一些浏览器的书签,均采用了侧边栏的设计。
9,标签
在搜索界面和分类界面时,会采用标签的方式来展现。标签方式比较动感的,增加了应用的趣味性,但使用场景较有限。
在产品设计过程中,我们需要考虑为不同的信息结构来提供相匹配的布局。布局方案不是唯一的,巧妙采用各种布局可以增强产品的易用性和交互体验。我们还可以通过基本布局的组合来完成复杂的界面设计,例如天天浏览器的菜单,它是一个弹出框,同时它有三个TAB,每个TAB下面是个8宫格的布局。
总之,对于手机终端来说,内容总是超出屏幕可显示的范围,界面布局的设计是非常重要的。掌握这9种常见的布局设计,可以让我们在产品设计时更加地游刃有余。
分享到:
相关推荐
总结下手机界面改版要考虑的布局,主要的分为以下2大类 主导航 列表式 陈列馆式 九宫格式 选项卡式 旋转木马 行为扩展式 多面板 图表式 次导航 抽屉式 超级菜单式 弹出式 图片轮盘式 其中,所有的主要导航都可以做...
手机网站设计尺寸及界面布局实用.pdf
手机UI界面设计器
–这一切看起来似乎很正常的样子,但是在android studio的布局文件的布局情况只能与模拟器运行效果、真机界面运行效果这两种效果中的一个相匹配。说白了布局文件在模拟器上运行出满意的效果,但运行到真机界面上的...
基于unigui+cBuilder开发的手机app主页框架,附带详细的开发设计文档
国外APP手机UI设计界面设计素材2080张: APP UI -图形设计 个人页面 User Profiles UI 关于 About UI 列表 Table UI - 功能首页 Dashboard UI 启动页 Launch Screen UI 工具条 Tool Bar UI 弹出视图 Popup View UI ...
主要介绍手机wap网页设计中开发注意事项,解决在手机网页开发过程中遇到的各种问题,做到手机页面的兼容(布局,CSS,网页大小,字体控制等)。如:Iphone手机网页设计中需要注意的问题解决方法。
4.包含了界面模型、设备模型、流程元素、标注元素、交互手势等丰富的素材内容,在界面模型中包含了近两百个移动端及WEB端界面模型,其中涵盖了各类常见的界面布局和功能场景。当产品设计初期阶段,可以用界面模型来...
在项目开发过程中编码时间往往和界面设计布局的时间持平从最开始自己一点点的 设计配色到后面直接借鉴开源项目的成果其效率提高岂止一半以上。本章的主要内容便是 和读者探讨如何快速的设计简约美观的...
主要是用手机通过wifi设置房间或楼房的场景,在需要时可以打开或关闭这些场景。这虽然是一个小系统但是确是现在最热的物联网的一部分,这里面大有可为。未来世界手机是一个很重要的中心,也是一个遥控器,可以操作...
Android仿QQ微信登录界面效果,主要是基于对布局main.xml上控件的操作,模拟出了微信整体的登录界面样式和风格,包括了登录时的弹框和提示,以及文字变颜色等功能,是学习android手机界面设计方面的一个参考范例。...
详细介绍了google 发布的新一代智能手机平台Android 的基本架构, 通过对其应用程序构成框架的分析,...最后通过对视图和布局的介绍,给出一种使用Android 技术的界面设计实现方案,并通过数据绑定实现了用户事件映射。
这个资源主要是使用Android模拟开发了一个QQ登录界面的小案例。 内容概要:了解基础Android组件的使用,以及shape和selector组件美化。 适合人群:初学Android开发的小萌新,可以利用这个小案例巩固Android基础控件...
,前端界面采用BootStrap框架设计,使得博客系统界面能自适应区分PC端和WAP手机端界面,针对不同尺寸设备响应不同的界面布局,后台系统基于ThinkPHP框架开发,程序运行速度更快,适合正在学习ThinkPHP框架拿来学习...
第 3 章: 用户界面和布局 手机应用程序的布局 在手机应用程序中处理用户输入 定义手机应用程序和启动屏幕 定义手机应用程序中的视图 定义手机应用程序中的选项卡 定义手机应用程序中的导航控件、标题控件和操作...
系统采用JAVA+MYSQL架构,自适应手机端和电脑端,界面简洁,性能高效。后台数据库备份/还原、全站指定目录打包、一键自动升级等功能使维护简单方便。系统拥有强大的模板管理功能,布局版块支持设置输出条件,让前端...
最适合做手机APP的UI,也可以直接用来做成响应式布局。
主要议程: 屏幕的方位性 分辨率 界面布局 软键和菜单 输入
droiddraw2.3 最新版,双击droiddraw.exe运行,可拖放设计布局; AndroidDesignPreview,可将电脑上的设计图直接放在手机上显示预览效果,双击AndroidDesignPreview-0.3.jar运行,需USB连手机才能用;