UI(1)---手机界面设计中12种常用布局
手机界面设计中12种常用布局
手机界面设计中12种常用布局
转载自: 手机界面设计中12种常用布局 - 轩枫阁
总结下手机界面改版要考虑的布局,主要的分为以下2大类
主导航
- 列表式
- 陈列馆式
- 九宫馆式
- 选项卡式
- 旋转木马
- 行为扩展式
- 多面板
- 图表式
次导航
- 抽屉式
- 超级菜单式
- 弹出式
- 图片轮盘式
其中,所有的主要导航都可以做为次级导航,但次级导航不太适合用作主要导航 。为什么?因为次导航是隐藏起来,隐而不见、只有触发时才显示。
主导航
1、列表式
特点:
内容从上向下排列,导航之间的跳转要回到初始点,好比一条街上有理发店,饭店,你想从理发店到饭店,得先多理发店出来,才能进入饭店。
优点:
1、层次展示清晰
2、视觉流线从上向下,浏览体验快捷。
3、可展示内容较长的菜单或拥有次级文字内容的标题
不足:
1、导航之间的跳转要回到初始点
2、同级内容过多时,用户浏览容易产生疲劳
3、排版灵活性不是很高
4、只能通过排列顺序、颜色来区分各入口重要程度
场景:
列表菜单适合用来显示平级菜单,且较长或拥有次级文字内容的标题。
2、陈列馆式
特点:
布局比较灵活,设计师可以平均分布这些网络,也可根据内容的重要性不规则分布,相对列表式,其优点在于同样的高度下可放置更多的菜单,更具有流动性,曝布流就属于其中一种。
优点:
1、直观展现各项内容
2、方便浏览经常更新的内容
不足:
1、不适合展现顶层入口框架
2、容易形成界面内容过多,显得杂乱
3、设计效果容易呆板
场景:
适合以图片为主的单一内容浏览型的展示
3、九宫格
特点:
相比陈列馆式,布局比较稳定为一行三列式布局。
优点:
1、清晰展现各入口
2、容易记住各入口位置,方便快速查找
不足:
1、菜单之间的跳转要回到初始点
2、无法向用户介绍大概的功能,只能点击进去才能获知,初始状态不如列表式明朗
3、容易形成更深的路径
4、不能直接展现入口内容
5、不能显示太多入口次级内容
场景:
适合入口比较多的展示,而且导航之间切换不是很频繁的情况,也就是业务之间相对独立,没有太多的瓜葛。
4、选项卡式
特点:
导航一直存在,具有选中态,可快速切换到另一个导航。
优点:
1、减少界面跳转的层级
2、分类位置固定
3、清楚当前所在的入口位置
3、轻松在各入口间频繁跳转且不会迷失方向
4、直接展现最重要入口的内容信息
不足:
功能入口过多时,该模式显得笨重不实用
场景:
大部分放在底部,方便用户操作,切换的时候,选中状态高亮显示,有少数放在顶部。
适合分类少及其内容同时展示,导航菜单项数量为3-5个;各导航菜单项之间内容/功能有显著差异;用户在各个导航选项之间需要非常频繁的切换操作
5、旋转木马
特点:
重点展示一个对象,通过手势滑动按顺序查看更多
优点:
1、单页面内容整体性强,聚焦度高
2、线性的浏览方式有顺畅感、方向感
不足:
1、受屏幕宽度限制,它可显示的数量较少,需要用户进行主动探索
2、由于各页面内容结构相似,容易忽略后面的内容
3、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面
场景:
适合数量少,聚焦度高,视觉冲击力强的图片展示
6、行为扩展式
特点:
能在一屏内显示更多的细节,无需页面的跳转
优点:
1、减少界面跳转的层级
2、对分类有整体性的了解
3、清楚当前所在的入口位置
不足:
分类位置不固定,当展开的内容比较多时,跨分类跳转不方便
场景:
适合分类多及其内容同时展示
内容展示的信息多
7、多面板
特点:
能同时呈现比较多的分类及内容。
优点:
1、减少界面跳转的层级
2、对分类有整体性的了解
3、分类位置固定
4、清楚当前所在的入口位置
不足:
2、界面比较拥挤
场景:
适合分类多及其内容同时展示
内容展示的信息不多
8、图表式
特点:
用图表的形式直观的呈现信息
优点:
1、总体性强
2、直观
不足:
1、详情信息显示的有限
场景:
适合总-分结构或表现时间段内的趋势走向的展示
次导航
1、抽屉式
特点:
突出核心功能,隐藏其它功能。
优点:
1、不占用宝贵的屏幕空间,让用户首先能聚焦于内容
2、导航的菜单项目不受数量限制,应用的所有信息组织入口都可以加入到抽屉导航中
3、扩展性强,配置灵活,一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中
不足:
1、隐藏框架中其他入口、用户需要一定记忆成本
2、对入口交互的功能可见性要求高
3、容易与应用内的其他交互模式冲突,比如侧滑手势操作
场景:
适合功能较多,信息结构较复杂的产品,用户的注意力聚焦在主信息流的浏览上,不用频繁切换“子产品模块”,且扩展性比较好
2、超级菜单式
特点:
默认具有选中态,导航/分类比较多,可快速切换到另一个导航/分类。
优点:
1、层次展示清晰
2、浏览时产生流畅体验
3、可展示内容较长的标题
4、可展示标题的次级内容
不足:
1、菜单之间的跳转要回到初始点
2、同级内容过多时,用户浏览容易产生疲劳
3、排版灵活性不是很高
4、只能通过排列顺序、颜色来区分各入口重要程度
场景:
比较复杂的信息架构,导航分类比较多。
3、弹出式
特点:
没有跳出感,适合内容比较少和简单操作的呈现。
优点:
1、在原有界面上进行操作,不必跳出界面,体验比较连贯
2、在用户需要的时候才显示(重要提示除外),不主动干扰
不足:
1、显示的内容有限
场景:
适合内容较少的显示
4、图片轮盘式
特点:
节省空间,可使用箭头,圆点或显示不全的图片告诉用户还有更多的内容可查看。
优点:
1、查看更多内容不必跳出界面,体验连贯。
2、节省空间。
不足:
横屏宽度有限,更多的内容有数量上限制,如微信只展示5个好友信息。
场景:
适合图片或信息组块更多的展示方式。
小结
以上都是基本布局,在实际的设计中,我们可以像搭积木一样组合起来完成复杂的界面设计,例如手游吧的顶部导航用的是选项卡,下面采用多面板的布局。
另外要考虑到各种布局的优劣,并有最完美的布局,要考虑信息结构、重要层次以及数量上的差异,提供最适合的布局,以增加产品的易用性和交互体验。
UI(1)---手机界面设计中12种常用布局相关推荐
- 移动端h5 顶部菜单栏_手机界面设计中12种常用布局 - 轩枫阁
前言 总结下手机界面改版要考虑的布局,主要的分为以下2大类 主导航 列表式 陈列馆式 九宫馆式 选项卡式 旋转木马 行为扩展式 多面板 图表式 次导航 抽屉式 超级菜单式 弹出式 图片轮盘式 其中,所 ...
- 手机界面设计中12种常用布局
总结下手机界面改版要考虑的布局,主要的分为以下2大类 主导航 列表式 陈列馆式 九宫馆式 选项卡式 旋转木马 行为扩展式 多面板 图表式 次导航 抽屉式 超级菜单式 弹出式 图片轮盘式 其中,所有的主 ...
- 手机界面设计中9种常用的布局
手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多.在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱不堪,丑陋且不可用.我们需要对信息进行有效组织,通过合理布局把信息展示给用户.合理的布 ...
- 手机界面设计中常用到的9种布局
原文链接 [编者按]本文作者阿沐 ,分享了手机界面设计中常用到的9种布局,我们需要考虑为不同的信息结构来提供相匹配的布局, 手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多.在手机界面设计中,若直 ...
- html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...
- java面向对象使用字符串_java面向对象中的String类中12种常用的方法
1.字符串与字符数组的转换 字符串可以使用toCharArray()方法变成一个字符数组,也可以使用String类的构造方法把一个字符数组变成一个字符串. public class StringAPI ...
- 计算机中12种常用密码破解法
日常用机,我们常要输入各种各样的密码,例如:开机时要输入密码,开QQ时也要先输入密码,假如你忘记了这些密码,就有可能用不了机器.打不开文件.不能聊天--也许还会造成很大的损失!下面我们就介绍电脑操作中 ...
- 手机端软件界面设计中的几种常用布局
感谢@天天阿木 给我们带来的总结.作为一名手机浏览器PM,他从手机界面的设计布局入手,告诉我们如何在APP上展示内容.相信,随着产品设计的迭代更新,还会有更酷的布局出现,让我们一起来看看是哪几种. 手 ...
- android界面设计所用中文什么字体,「界面」手机界面设计字体大小知多少
今天我们来讨论一下界面字体大小的问题,上篇文章我们讨论到使用什么字体的问题,这篇文章我们主要讨论手机界面设计中字体应该多大的问题. 做移动界面和做网页,平面最大的不同之处在于当你使用软件设计的时候,你 ...
最新文章
- hdu 6852Path6(最短路+最小割)
- 华为手机日历倒计时_倒计时40小时!谁来拿走这台华为手机?
- 【东营seo】SEO发展下的大机遇
- 微信上线“拍一拍”功能,结果被网友激情吐槽...
- CUDA——调试“ImportError: libcudart.so.9.2: cannot open shared object file: No such file or directory”
- 项目常用工具类整理(一)--时间工具类DateUtil.java
- Openlayer:学习笔记之控件
- 2008中国优秀无线互联网站点50强
- 计算机专业实践报告立题依据,论文的选题依据.doc
- 磁盘怎么删除分区,磁盘管理怎么删除分区
- 如何玩转OA系统业务审批流程
- Introduction to Graph Neural Network(图神经网络概论)翻译:目录总览
- CAD中用lisp程序实现批量偏移_求一个cad lisp 双向偏移的代码
- 数据仓库 Inmon
- 神州数码交换机CS6200命令(一)
- PKI与证书相关基本知识
- MySQL数据库-错误1166 Incorrect column name
- 完全卸载Myeclipse
- 面试被问到【期望薪资】,怎样回答最合适?
- MDX语句(初学者)
热门文章
- 魔兽怀旧服服务器怎么修改,《魔兽世界怀旧服》转服功能怎么用 转服功能使用方法教程...
- 第八十一章 SQL命令 UNLOCK
- Alibaba Java Coding Guidelines安装使用教程
- 开荒手册3——构思一篇小论文
- [Unity3D]Unity3D游戏开发之ACT游戏三连击效果实现综述
- 光纤验收测试标准、参数及常用设备
- 2021年广东工业大学第十五届文远知行杯程序设计竞赛(同步赛)部分题解
- python五边形的代码_如何使用pythonttkinter画布中的create_line创建五边形和六边形?...
- 机械硬盘大势已去?NAS硬盘笑了
- 《算法笔记》学习 入门篇