移动端图形化报表界面设计_移动端几种常见的界面设计布局
在日常产品交互设计中,有时候总会对界面的排版和布局的选择上很纠结,界面的排版布局直接影响了用户体验,选择一个合适的排版是值得持续打磨的事情。
这里我画了几种移动端常见的页面布局和他们的各自特点:
1,列表式布局
2,陈列式布局
3,九宫格式布局
4,选项卡式布局
5,轮播图式布局
6,伸展式布局
7,抽屉式布局
8,弹出框式布局
9,横向拓展式布局
10、多面板式布局
1,列表式布局
70172CBC-B2FA-4920-8FB0-678E407CBB21.png
特点:
内容从上向下排列,导航之间的跳转要回到初始点。
优点:
1、层次展示清晰
2、视觉流线从上向下,浏览体验快捷
3、可展示内容较长的菜单或拥有次级文字内容的标题
不足:
1、导航之间的跳转要回到初始点
2、同级内容过多时,用户浏览容易产生疲劳
3、排版灵活性不是很高
4、只能通过排列顺序、颜色来区分各入口重要程度
场景:
列表菜单适合用来显示平级菜单,且较长或拥有次级文字内容的标题
2,陈列式布局
C7C5962C-F2E1-43A6-BADC-BAE9C48ECCC3.png
特点:
布局比较灵活,设计师可以平均分布这些网络,也可根据内容的重要性不规则分布,相对列表式,其优点在于同样的高度下可放置更多的菜单,更具有流动性,曝布流就属于其中一种。
优点:
1、直观展现各项内容
2、方便浏览经常更新的内容
不足:
1、不适合展现顶层入口框架
2、容易形成界面内容过多,显得杂乱
3、设计效果容易呆板
场景:
适合以图片为主的单一内容浏览型的展示
3,九宫格式布局
315BCC16-2A1E-4640-ACC6-0EF3FA2D965F.png
特点:
相比陈列馆式,布局比较稳定为一行三列式布局。
优点:
1、清晰展现各入口
2、容易记住各入口位置,方便快速查找
不足:
1、菜单之间的跳转要回到初始点
2、无法向用户介绍大概的功能,只能点击进去才能获知,初始状态不如列表式明朗
3、容易形成更深的路径
4、不能直接展现入口内容
5、不能显示太多入口次级内容
场景:
适合入口比较多的展示,而且导航之间切换不是很频繁的情况,也就是业务之间相对独立,没有太多的瓜葛。
4,选项卡式布局
9A5DC012-FDF2-42E4-AE71-B38367061ED9.png
特点:
导航一直存在,具有选中态,可快速切换到另一个导航。
优点:
1、减少界面跳转的层级
2、分类位置固定
3、清楚当前所在的入口位置
3、轻松在各入口间频繁跳转且不会迷失方向
4、直接展现最重要入口的内容信息
不足:
功能入口过多时,该模式显得笨重不实用
场景:
大部分放在底部,方便用户操作,切换的时候,选中状态高亮显示,有少数放在顶部。适合分类少及其内容同时展示,导航菜单项数量为3-5个;各导航菜单项之间内容/功能有显著差异;用户在各个导航选项之间需要非常频繁的切换操作
5,轮播图式布局
6DBDE812-390D-497D-8868-13D8EAAED4FA.png
特点:
重点展示一个对象,通过手势滑动按顺序查看更多
优点:
1、单页面内容整体性强,聚焦度高
2、线性的浏览方式有顺畅感、方向感
不足:
1、受屏幕宽度限制,它可显示的数量较少,需要用户进行主动探索
2、由于各页面内容结构相似,容易忽略后面的内容
3、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面
场景:
适合数量少,聚焦度高,视觉冲击力强的图片展示
6,伸展式布局
14A0C66E-843F-434D-B848-654B8D753E10.png
特点:
能在一屏内显示更多的细节,无需页面的跳转
优点:
1、减少界面跳转的层级
2、对分类有整体性的了解
3、清楚当前所在的入口位置
不足:
分类位置不固定,当展开的内容比较多时,跨分类跳转不方便
场景:
适合分类多及其内容同时展示
内容展示的信息多
7,抽屉式布局
391C6043-E595-46C9-877D-4EFEFF7B3A78.png
特点:
突出核心功能,隐藏其它功能。
优点:
1、不占用宝贵的屏幕空间,让用户首先能聚焦于内容
2、导航的菜单项目不受数量限制,应用的所有信息组织入口都可以加入到抽屉导航中
3、扩展性强,配置灵活,一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中
不足:
1、隐藏框架中其他入口、用户需要一定记忆成本
2、对入口交互的功能可见性要求高
3、容易与应用内的其他交互模式冲突,比如侧滑手势操作
场景:
适合功能较多,信息结构较复杂的产品,用户的注意力聚焦在主信息流的浏览上,不用频繁切换“子产品模块”,且扩展性比较好
8,弹出框式布局
7B9FF50C-F00E-48FD-A6B7-1BD5C1875158.png
特点:
没有跳出感,适合内容比较少和简单操作的呈现。
优点:
1、在原有界面上进行操作,不必跳出界面,体验比较连贯
2、在用户需要的时候才显示(重要提示除外),不主动干扰
不足:
1、显示的内容有限
场景:
适合内容较少的显示
9,横向拓展式布局
4DC6EAE6-08FD-481D-BA83-70C0E75825CC.png
特点:
节省空间,可使用箭头,圆点或显示不全的图片告诉用户还有更多的内容可查看。
优点:
1、查看更多内容不必跳出界面,体验连贯。
2、节省空间。
不足:
横屏宽度有限,更多的内容有数量上限制。
场景:
适合图片或信息组块更多的展示方式。
10、多面板式布局
06B4872F-9722-4C2B-9E8D-01DFB9A97DE1.png
特点:
能同时呈现比较多的分类及内容。
优点:
1、减少界面跳转的层级
2、对分类有整体性的了解
3、分类位置固定
4、清楚当前所在的入口位置
不足:
1、界面比较拥挤
场景:
适合分类多及其内容同时展示
内容展示的信息不多
以上都是基本布局,在实际的设计中,我们需要结合具体的数据结构特点选用合适的布局,把不同的布局像搭积木一样组合起来完成复杂的界面设计,要考虑信息结构、重要层次以及数量上的差异,提供最适合的布局,以增加产品的易用性和交互体验。
喜欢的朋友可以关注我的公众号“产品之火”,我将会持续不断的更新内容。
移动端图形化报表界面设计_移动端几种常见的界面设计布局相关推荐
- 移动端图形化报表界面设计_B端移动设计 | 客户RFM分析
客户RFM分析:最近一次消费(Recency).消费频率(Frequency).消费金额(Monetary),根据三个要素对客户进行分析. 01 场景 在客户关系管理系统中,有多少客户并不是最关键的, ...
- 【报表技术】IReport 图形化报表开发工具安装教程
[报表技术]IReport 图形化报表开发工具安装教程 JasperReport简单介绍 JasperReport是一个强大.灵活的报表生成工具,能够展示丰富的页面内容,并将之转换成PDF,HTML, ...
- JMeter压测输出HTML图形化报表
第一次使用Jmeter的图形化报表功能,记录下练习的例子. 1.方式一:图形化界面执行,使用生成的jtl文件,生成图形化报表 练习: (1)线程数:100 (2)HTTP请求:www.baidu.co ...
- 【报表技术】IReport图形化报表开发工具生成PDF文档
[报表技术]IReport图形化报表开发工具生成PDF文档 新建一个文件. 由于IReport的默认设置是不支持中文的,IReport没有内置中文的包. 了解报表模板结构. ①title:报表标题. ...
- 图上上传页面设计_无线端页面设计“三大雷区”
无线视觉规范 手机端页面的设计有许多的规范,大到涉及整个页面的排版呈现方式,小到一个icon的尺寸大小,这都关系到视觉页面的美观程度以及用户体验设计.所以应该积极主动去分析深入了解并研究出可行的解决方 ...
- web界面左边菜单设计_前端产品经理难点|“取消按钮”逻辑设计
3月,写了内容大部分中后台产品.4月份为了满足读者的要求,我会往C端的设计.和细节交互做案例.今天分享一个交互设计师朋友原创的"取消按钮"设计,提出了按钮主管的设计解决方案.召唤观 ...
- python图形化编程 在线教程_使用Python Editor进行在线图形化编程
先介绍使用Python Editor进行在线开发newbit(microbit)的方法,这也是官方推荐的方法之一.Python Editor是一个在线的开发环境,所以需要连接网络才能使用. 首先打开浏 ...
- minimal linux图形化,CentOS7 Minimal 最小化安装后再安装GNOME图形界面
CentOS7 Minimal下安装图形化界面的方法,有些时候纯命令界面确实比较累,个人学习可以使用图像界面,服务器强烈不建议用图形界面. 登录系统,使用yum 安装 yum -y groupinst ...
- 图形化编程 超级马里奥_超级马里奥可以向我们传授哪些图形技术?
图形化编程 超级马里奥 If you ever played Super Mario Brothers or Mario Galaxy, you probably thought it was onl ...
最新文章
- 不是语言之争---Go vs Erlang
- 查看CentOS的系统版本(亲测)
- 先定个小目标, 使用C# 开发的千万级应用
- jdicom怎么做虚拟服务器,jdicom使用手册
- Linux运维学习大纲
- python爬取某鱼的直播间信息
- IntelliJ IDEA文件模板变量
- 关于 Could not find artifact ...:pom:1.0-SNAPSHOT 的问题!
- HDU 5713 状压dp
- 互联网晚报 | 1月4日 星期二 | 中国移动1月5日在上交所上市;元旦档总票房破10亿;特斯拉连续6个季度交付量创纪录...
- 华为--三层交换实验(原理与实验详情)
- 《编码隐藏在计算机软硬件背后的语言》读感
- WinRar 解压缩文件官方去广告版
- 【MySQL】连接查询
- android 播放wav代码,播放简短的.wav文件 - Android
- 本地Java项目连接Linux系统上的Redis
- 华为路由器配置DHCP服务及给指定PC分配固定IP地址
- 拨号vps为什么会掉线
- IOS UDID 6种方法在线获取
- CMOS 设置完全手册
热门文章
- Android webview 69,android-9.0-pie-env(safe-area-inset-top)无法在Android Pie WebView 69上运行
- Win10与Ubuntu双系统下安装tensorflow2.0全流程备忘录
- 全网天下写作团队教你快速写出一篇新闻稿
- Burp抓包经常出现detectportal.firefox.com解决办法(附图)
- boost 时间和日期
- Java 框架,黑马 java 视频教程,面试资料分享
- 鹏程万里------postman
- 网页特殊字体包压缩与精简(fontmini)
- 第七章:小朱笔记hadoop之源码分析-hdfs分析 第三节:hdfs实现分析
- unityShader采样光照贴图