APP页面布局方式有哪些?
1、List列表布局
特点,内容从上向下排列,导航之间的跳转要回到初始点
优点,层次展示清晰明了,视线流从上到下浏览体验快捷,纵向长度没有限制,上下滑动可以看见无限内容,视觉整齐美观,用户接受度很高,可展示内容较长的菜单或拥有次级文字内容的标题
缺点,同级内容过多时,用户浏览容易产生视觉疲劳,只能通过排列顺序、颜色来区分入口重要程度,页面重点内容不突出
场景,常用于并列元素的展示,包括目录、分类、内容等,简书很多地方运用这种布局方法能让用户清晰明了地知道页面的内容,简洁又大方
2、陈列馆式布局
特点,布局比较灵活,即可以平均分布这些网格,也可以根据内容的重要性做不规则分布
优点,同样的高度下可放置更多的菜单流动性强,直观展现各种内容方便用户浏览经常更新的内容
缺点,不适合展示顶层入口框架,界面内容过多时显得杂乱,让用户眼花缭乱
场景,支付宝首页运用的比较多,能直观展现各种内容,而且首页的内容都是用户经常浏览的,不过由于界面过多,视觉体验效果稍微逊色一点
3、网格布局,移动app主要讲宫格布局
特点,相比陈列馆式,九宫格布局比较稳定为一行三列式
优点,入口展示清晰直观,方便快速查找,结构上最有利于内容区域随屏幕分辨率不同而自动伸展宽高
缺点,菜单之间的跳转要回到初始点,容易形成更深的路径,不能显示太多入口次级内容,扩展性不如列表布局,标题不易过长
场景,适合展示较多入口,切各模块相对独立
4、仪表布局,也是一种数据展示结构布局
优点,展示更加直观
缺点,信息展示量少,过于单一
场景,适合表现趋势走向的展示
5、标签布局(关键词布局、热度布局),搜索界面和分类界面时
优点,比较动感,增加应用趣味性
6、卡片布局
优点,清晰直观,简单易懂,信息模块化,增强点击感,响应式设计,每个卡片信息承载量大、转化率高,每张卡片的操作互相独立、互不干扰
缺点,每个卡片页面空间的消耗大,一屏可展示信息少,用户操作负
场景,以图片为主单一内容浏览型的展示
7、瀑布流布局
优点,瀑布流图片展示更有吸引力,加载模式能获得更多内容容易沉浸其中,错落有致的设计利用视觉层级同时实现任意流动缓解视觉疲劳
缺点,页面跳转后需要从头开始,用户返回查找信息困难很大
场景,适用于实时内容频繁更新的情况
8、手风琴布局
优点,两级结构可承载更多信息同时保持界面简介,减少界面跳转,提高操作效率高
缺点,同时打开多个手风琴菜单,分类标题不易寻找,且容易将页面布局打乱
场景,适用于两级结构的内容,并且二级结构可以隐藏
9、行为扩展式布局
特点,能一屏幕内显示更多细节,无需页面跳转,腾讯QQ联系人使用
优点,减少页面跳转层级,对分类有整体性的了解,清楚当前所在的入口位置
缺点,分类位置不固定,当展示内容较多时时跨分类跳转不方便
10、多面板布局
特点,能同时呈现比较多的分类及内容
优点,分类位置固定,清楚当前所在入口位置,分类一目了然,对分类有整体性的了解,减少界面跳转的层级
缺点,两栏设计使页面比较拥挤,分类很多时左侧滑动区域过窄,且不利于单手操作,容易产生视觉疲劳
场景,适合分类多并且内容需要同时展示
11、大图展示布局,视觉效果好,多见于引导页和一些图片分享、艺术范、摄影类APP
12、gallery布局,单页面内容整体性强(比如天气),聚焦度高,阅读起来比较顺畅感
13、选项卡式布局
特点,导航一直存在,具有选中状态,可快速切换另一个导航
优点,直接展示最重要接口内容信息,分类位置固定清晰当前所在入口位置,减少界面跳转层级轻松在各入口频繁跳转
缺点,功能入口过多时该模式显得笨重不实用
14、旋转木马式布局
特点,重点展示一个对象,通过手势滑动查看更多内容
优点,单页面内容整体性强,聚焦度高
缺点,受屏幕宽度限制可显示的数量较少,不能跳跃性地查看间隔的内容,各页面内容结构相似容易忽略后面的内容
15、图标信息布局
优点,完整的图表要素,突出的标题区,从上到下的阅读顺序,让APP更加生动形象,商务气质
缺点,标题不够突出,信息量不足,移动APP空间利用不足
更多关于“UI培训”的问题,欢迎咨询千锋教育在线名师。千锋教育多年办学,课程大纲紧跟企业需求,更科学更严谨,每年培养泛IT人才近2万人。不论你是零基础还是想提升,都可以找到适合的班型,千锋教育随时欢迎你来试听。