30分钟掌握这8种页面布局

30分钟掌握这8种页面布局

学习UI设计的时候,经常要接触到页面的布局,布局的方式会直接影响一个APP的视觉效果,好的布局方式,往往能带来舒服的视觉效果,更能得到用户的接受与好评。然而万变不离其宗,移动端页面常用的布局,不外乎以下8种。

1.列表式布局

特点:内容从上向下排列,导航之间的跳转要回到初始点

优点:

1.层次展示清晰明了

2.视线流从上到下,浏览体验快捷

3.可展示内容较长的菜单或拥有次级文字内容的标题

缺点:

1.导航之间的跳转要回到初始点,灵活性不高

2.同级内容过多时,用户浏览容易产生视觉疲劳

3.只能通过排列顺序、颜色来区分各入口重要程度

2.陈列馆式布局

特点:布局比较灵活,即可以平均分布这些网格,也可以根据内容的重要性做不规则分布

优点:

1.同样的高度下可放置更多的菜单,流动性强

2.直观展现各项内容,方便用户浏览经常更新的内容

缺点:

1.不适合展示顶层入口框架

2.界面内容过多时显得杂乱,让用户眼花缭乱

3.九宫格布局

特点:相比陈列馆式,九宫格布局比较稳定为一行三列式

优点:清晰展现各入口,方便用户快速查询

缺点:

1.菜单之间的跳转要回到初始点

2.容易形成更深的路径,不能显示太多入口次级内容

很多软件都喜欢运用九宫格布局,简书的专题管理员这里也使用了这种布局,井然有序且间隔合理,视觉效果挺舒服的。

4.选项卡式布局

特点:导航一直存在,具有选中状态,可快速切换另一个导航

优点:

1.直接展示最重要接口内容信息

2.分类位置固定,清楚当前所在入口位置

3.减少界面跳转的层级,轻松在各入口间频繁跳转

缺点:

1.功能入口过多时,该模式显得笨重不实用

5.旋转木马式布局

特点:重点展示一个对象,通过手势滑动查看更多内容

优点:单页面内容整体性强,聚焦度高

缺点

1.受屏幕宽度限制,可显示的数量较少

2.不能跳跃性地查看间隔的页面

3.各页面内容结构相似,容易忽略后面的内容

6.行为扩展式布局

特点:能在一屏幕内显示更多的细节,无需页面跳转

优点:

1.减少页面跳转的层级

2.对分类有整体性的了解,清楚当前所在的入口位置

缺点:分类位置不固定,当展开的内容较多时,跨分类跳转不方便

7.多面板布局

特点:能同时呈现比较多的分类及内容

优点

1.分类位置固定,清楚当前所在入口位置

2.对分类有整体性的了解,减少界面跳转的层级

缺点:界面比较拥挤,容易产生视觉疲劳

8.图表式布局

特点:用图表的方式直接呈现信息

优点:直观,总体性强

缺点:详细信息显示有限

支付宝作为一个与金钱有关的软件,它余额宝页面选择了与自身比较符合的图表式布局,这种布局能直观详细地显示出信息,很适合用于数据、账单有关的APP。

------------------END------------------

转至:30分钟掌握这8种页面布局

时间: 2024-10-09 18:15:51

30分钟掌握这8种页面布局的相关文章

几种页面布局方式的简单说明

一.静态布局 最传统的web页面布局设计,常应用于PC端页面,即网页上的所有元素都统一使用px作为单位.这种设计页面的高度和宽度固定,超出浏览器的部分使用滚动条查阅. 特点:设计简单,但对于不同尺寸屏幕的兼容性不好,特别是移动端. 二.流式布局 页面元素以百分比的形式设置,元素宽高能够按照屏幕分辨率适应调整,但整体的布局不变. 特点:页面元素宽高可以自适应调整,但屏幕尺度跨度过大的情况下,页面不能正常显示.比如我们以百分比设置了按钮的宽度,但按钮上文字的大小是用px来设置的,当屏幕尺寸变大时,按

(转)30 分钟学会 Flex 布局

原文链接:https://zhuanlan.zhihu.com/p/25303493 最简单实用的 Flex 布局教程,30 分钟让你学会 Flex 语法基础. 为什么我要写这一篇关于 Flex 布局的教程? 因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其 float.display.position 这些属性的困扰.然而学习 Flex 布局,你只要学习几个 CSS 属性,就可以写出简洁优雅复杂的页面布局. 本教程适合人群: 前端小白,不太明白

页面布局的几种方式(静态化布局,流式布局,自适应布局,响应式布局,弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. https://developers.google.com/search/mobile-sites/mobile-seo/respon

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

  CSS中几种控制页面布局的定位机制 对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动 普通流 相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

页面布局的几种方式

基本布局的几种方式: (1)流体布局: 流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同.固定宽度布局使用的是像素,但是流布局使用的是百分比,看到百分比,你应该想到,这将提供了很强的可塑性和流动性.换句话说,通过设置了百分比,你将不需要考虑设备尺寸或者屏幕宽度大小了,结论就是,你可以为每种情形找到一种可行的方案,因为你的设计尺寸将适应所有的设备尺寸.流布局与媒体查询和优化样式技术的关系密切. (2)固定布局 在固定布局中,网页的宽度是必须指定为一个像素值,一般设为960像素.在过去,

30分钟彻底弄懂flex布局

目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也有不少flex布局的教程,为什么又要再写一篇? 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. 容器属性 flex-flow flex-direction flex-wrap justify-content

正则表达式30分钟入门教程

目录 跳过目录 本文目标 如何使用本教程 正则表达式到底是什么东西? 入门 测试正则表达式 元字符 字符转义 重复 字符类 分枝条件 反义 分组 后向引用 零宽断言 负向零宽断言 注释 贪婪与懒惰 处理选项 平衡组/递归匹配 还有些什么东西没提到 联系作者 网上的资源及本文参考文献 更新纪录 本文目标 30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它. 如何使用本教程 最重要的是--请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内

【转】正则表达式30分钟入门教程

首页 | 常用正则表达式 | 正则表达式测试工具 正则表达式30分钟入门教程 版本:v2.33 (2013-1-10) 作者:deerchao 转载请注明来源 目录 跳过目录 本文目标 如何使用本教程 正则表达式到底是什么东西? 入门 测试正则表达式 元字符 字符转义 重复 字符类 分枝条件 反义 分组 后向引用 零宽断言 负向零宽断言 注释 贪婪与懒惰 处理选项 平衡组/递归匹配 还有些什么东西没提到 联系作者 网上的资源及本文参考文献 更新纪录 本文目标 30分钟内让你明白正则表达式是什么,

30分钟学会正则表达式

正则表达式30分钟入门教程 版本:v2.33 (2013-1-10) 作者:deerchao 转载请注明来源 原地址:http://www.jb51.net/tools/zhengze.html#mission 目录 跳过目录 本文目标 如何使用本教程 正则表达式到底是什么东西? 入门 测试正则表达式 元字符 字符转义 重复 字符类 分枝条件 反义 分组 后向引用 零宽断言 负向零宽断言 注释 贪婪与懒惰 处理选项 平衡组/递归匹配 还有些什么东西没提到 联系作者 网上的资源及本文参考文献 更新