四种常见的APP分类界面布局设计案例学习
相信各位对于APP设计,已经很熟练啦。如何在熟练的基础上提高我们界面的优美度,或者是进行APP界面的迭代设计。
重构APP设计布局是我们必须要经历的一个过程。
在之前,学习UI设计的时候,经常要接触到页面的布局,布局的方式会直接影响一个APP的视觉效果,好的布局方式,往往能带来舒服的视觉效果,更能得到用户的接受与好评。
今天,25学堂跟大家来看下四种常见的APP分类界面布局。
第一种APP分类界面布局:宫格式分类界面布局
宫格式布局也算是移动APP上最常见的布局方式,也是用户体验最佳的一种方式。不然锤子手机的界面就是宫格的布局。


上面这个分类界面的设计的图标非常漂亮、精致。有点MBE风格的味道。
第二种APP分类界面布局:左右对称平等分的分类布局
这类分类界面设计的公式:左边是分类名称 + 分类说明 +分类图片
这类布局方式在电商、旅游、新闻等APP分类界面当中最常见。也适合分类特别多的APP布局。

这类对设计的要求比较高,需要设计师把握好设计的尺度。比如左边和大小和右边实物图的比例要是黄金比例才行。
第三种APP分类界面布局:列表式分类界面布局设计
这类最简单,也是最经典的分类界面设计,但是可以融合一些宫格式布局来搭配。比如下面的分类界面设计非常不错。

列表式布局的优点:这种方式的在APP用户体验改进了很多,尤其在连续切换时其操作方式的连续性比较强,主体页面的过渡也更加平滑,会产生更加流畅的体验。
列表式布局的缺点:不适合类别分类目录过多的界面。而且这样连续性的滑动容易导致定位不准。或者容易触发别的栏目的类目。
第四种APP分类界面布局:分模块布局设计
这类的布局设计,适合分类种类比较多,而且扩展性强。同时也可以给设计师提供更广的设计空间。
比如下图这样的设计:

分模块的分类界面设计布局的优点就是非常清晰明了。
缺点:操作点击区域多了,对于有选择困难症的人来说,就会出现不舒服的现象。所以,对于设计师来说,就要对留白技巧掌握非常准确。通过色块和留白消除这样的现象。
四种常见的APP分类界面布局设计案例学习的更多相关文章
- 四种常见的App弹窗设计,你有仔细注意观察吗?
弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...
- http协议里定义的四种常见数据的post方法
原文 https://blog.csdn.net/charlene0824/article/details/51199292 关于http协议里定义的四种常见数据的post方法,分别是: applic ...
- (转)四种常见的 POST 提交数据方式
四种常见的 POST 提交数据方式(转自:https://imququ.com/post/four-ways-to-post-data-in-http.html) HTTP/1.1 协议规定的 HTT ...
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 一文读懂四种常见的XML解析技术
之前的文章我们讲解了<XML系列教程之Schema技术_上海尚学堂java培训技术干货><XML的概念.特点与作用.XML申明_上海Java培训技术干货>,大家可以点击回顾一下 ...
- 四种常见的 POST 提交数据方式(application/x-www-form-urlencoded,multipart/form-data,application/json,text/xml)
四种常见的 POST 提交数据方式(application/x-www-form-urlencoded,multipart/form-data,application/json,text/xml) 转 ...
- application/json 四种常见的 POST 提交数据方式
四种常见的 POST 提交数据方式 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 ...
- 转:application/json 四种常见的 POST 提交数据方式
四种常见的 POST 提交数据方式 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 PO ...
- POST提交数据时四种常见的数据格式
最近项目部署到新环境tomcat+mysql,想看看项目部署成功没有,就用soupui调对应接口开测试,soupui使用比较简单,给上接口地址,入参xml报文,把入参的media Type设置为app ...
随机推荐
- arguments.callee实现深拷贝
最近正在看一个腾讯课堂里面的学习视频中的js知识点,然后有一个深拷贝的题,于是就做了一下,使用arguments.callee实现深拷贝. <script type="text/jav ...
- Linux学习笔记:磁盘分区
本文更新于2019-12-30.操作系统为Debian 8.9 (jessie). 以下假设新磁盘为/dev/sdb,要创建一个分区/dev/sdb1,文件系统类型为xfs.请根据实际情况,自行选择. ...
- javascript 权威指南1
JavaScript是面向web的编程语言 web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的.全球性的.动态交互的.跨平台的分布式图形信息系统.是建立在 ...
- 51Nod 1284 2 3 5 7的倍数 (容斥定理)
给出一个数N,求1至N中,有多少个数不是2 3 5 7的倍数. 例如N = 10,只有1不是2 3 5 7的倍数. Input 输入1个数N(1 <= N <= 10^18). Outpu ...
- Sass和Scss
Sass:https://www.sass.hk/ Sass是什么 Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables).嵌套 (nested rul ...
- python3包、模块、类、方法的认识
包>>模块>>类>> 函数 包:就是一个目录,import time from+import导入包中的部分模块 直接到类 from budaoguan.common ...
- H5_0019:JS中定义json结构
"7HKm": function(e, a, d) { "use strict"; Object ...
- vue自学入门-7(vue style scope)
vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...
- Nginx+uWSGI部署flask项目
uwsgi配置 uwsgi安装 安装uwsgi pip install uwsgi 启动uwsgi uwsgin --ini uwsgi.ini # 后台启动 nohup uwsgi --ini uw ...
- linux基础安全
一.用户防护 Chage -l 用户名 查看用户账号有效期信息 Chage -E 时间 用户名 给用户设置过期时间 /etc/login.defs 文件保存许多默认设置 Pas ...