联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

常见的APP界面布局设计有哪些?详解APP列表界面设计方法

Time: 2021-09-18

        说起APP列表界面设计相信大家一点都不陌生,APP是我们最常见的软件,无论手机或者是其他的智能电子设备都是需要的APP的,那么常见的APP界面布局设计有哪些呢?APP列表界面是怎么设计的,今天就让faceui来给大家讲解一下关于常见的APP界面布局设计以及APP列表界面设计方法。

  至于对信息的呈现,越来越多的APP开始尝试数据可视化、信息图表化,让界面上不仅仅是列表,还有更多直观的饼图、扇形图、折线型、柱状图等等丰富的表达方式。表面上看起来也不是很难的事情,但是若真想实现,背后的复杂程度也不容小窥。

  常见的APP界面布局设计有哪些

  1、顶部导航

  整个的应用的导航在顶部,用户通过左右滑动来切换不同的导航选项卡,主内容区域将是一个动态面板。当用户点击导航条目或者左右滑动手指的时候,就切换主内容区域的动态面板的状态。该布局适合新闻等有很多列表内容的应用。

APP列表界面设计

  图片来源于网络

  2、标签式导航

  微信等具有多个主要功能划分的应用都采用了这个方式;适合3~5个导航菜单,核心功能比较突出,也能够以很直观的方式通知用户(比如,使用类似微信一样的数字通知来告诉用户某个导航下面有多少内容更新)。

  3、抽屉式

  抽屉式布局是指导航隐藏在左侧或者右侧,用户通过滑动拖拽的方式,像打开抽屉一样将导航部分拖出。这种布局适合主内容较多,不希望菜单栏占据固定位置消耗空间的应用程序;但是缺点在于用户需要一个明显的提示来发现导航。

  4、九宫格式

  九宫格其实不一定是九个格,可以根据需要灵活地调整。九宫格布局的特点就是直观,所有的功能一目了然;缺点是在不同的导航之间切换的时候,经常要回到首页。

  5、下拉列表式

  在这种布局中,菜单默认是隐藏的,用户点击后滑出,有点儿类似于抽屉布局,不过一般是上下滑动的。

  6、异形

  在这类布局中,会采用一些非常规的菜单来进行导航,如圆形的导航盘,类似滴滴打车那样的飞出式菜单等。

  7、分级菜单

  多层级的菜单这种设计采用与项目很多,但是每个项目的内容比较简单的应用,如联系人、地址等。

APP列表界面设计

图片来源于网络

  APP列表界面设计方法

  1.打开ps软件,新建一个750*1624的文件,像素为72像素。

  2.我们设置导航栏的高度为88像素,底部是68像素的高度,左右侧各留40像素的宽度。

  3.给其添加一个渐变色,高度为750*176。

  4.添加上导航栏的文字和搜索框的内容,注意元素的居中和对齐。

  5.在导航栏和列表下面绘制一个灰色的分隔区域。

  6.绘制头像以及消息信息,同样注意居中和对齐,ui设计当中很多考验的都是细节方面的。

  7.将用户信息复制多个,进行等距离排列。

  8.给其中一个,左滑删除和其中一个灰底,去看下效果。

  9.到这里这个案例就完成了,我们可以看下整体的效果。

  以上就是faceui给大家分享了APP列表界面设计方法,看完这篇文章后,相信各位朋友都清楚的知道APP列表界面设计也是比较简单的,如果你对这方面感兴趣的话,不妨去尝试做一下吧。

合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开