最全面的移动端 UI组件设计详解:下篇

上一期给大家讲解了《最全面的移动端UI组件设计详解:中篇》,主要分享了:基础组件、表单组件反馈组件3个部分;这次给大家带来:数据展示组件其他组件详解,希望你在设计APP、小程序、H5页面中,能熟练使用和理解各种的 UI组件,今天给大家总结了关于移动端UI组件,希望可以在工作中帮到你。

Web端UI组件设计详解

《最全Web端UI组件设计详解》

移动端UI组件设计详解:

《最全移动端UI组件设计详解——上篇》

《最全移动端UI组件设计详解——中篇》

一、数据展示组件

1、手风琴  Accoridon

可以折叠/展开的内容区域。

用法指南:

A. 对复杂区域进行分组和隐藏。

B. 通常,一次只允许单个内容区域展开;特殊情况,多个内容区域可以同时展开。

2、标记/徽标数 Badge

图标右上角的红点、数字或者文字。用于告知用户,该区域的状态变化或者待处理任务的数量。

用法指南:

A. 当用户只需知道大致有内容更新时,应该使用红点型,如:社交中的群消息通知。

B. 当用户有必要知晓每条更新时,应该使用数字型。如:社交中的一对一的消息通知。

3、标签 Tag

进行标记和分类的小标签,用于标记事物的属性和维度,以及进行分类。

4、环形进度条 CricleProgress

用于展示操作进度,告知用户当前状态和预期。

用法指南:

在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。

5、轮播/走马灯 Carousel

走马灯,轮播图,常用于banner图的展示

6、卡片 Card

用于组织信息和操作,通常也作为详细信息的入口。

7、折叠面板  Collapse

可以折叠/展开的内容区域。

8、列表 List

单个连续模块垂直排列,显示当前的内容、状态和可进行的操作。eg:联系人列表。

用法指南:

A. 一般由主要信息、主要操作、次要信息、次要操作组成。

B. 主要信息和主要操作放在列表的左边,次要信息和次要操作放在列表的右边。

9、倒计时  CountDown

倒计时

10、步骤条 Steps

引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。

11、通知栏 NooticeBar

在导航栏下方,一般用作系统提醒、活动提醒等通知。

用法指南:

需要引起用户关注时使用,重要级别低于 Modal ,高于 Toast。

12、分割线 Divider

用于信息内容的层级分割,通常为1px的分割线

13、面板  Panel

用于页面区域内容的展示,可以自定义信息内容

二、其他组件

1、骨架图  Spin

在需要等待加载内容的位置提供一个占位图形组合。

用法指南:

A. 网络较慢,需要长时间等待加载处理的情况下。

B. 图文信息内容较多的列表/卡片中。

C. 只在第一次加载数据的时候使用。

D. 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。


2、空状态  Empty

用于空白页面的占位提示

3、懒加载  Lazyload

懒加载其实就是延时加载,即当对象需要用到的时候再去加载。常用于图片资源的加载。

4、图片预览  ImagePreview

图片资源的放大预览

5、地址编辑  AddressEdit

用户信息地址的编辑

6、省市区选择 Area

省市区三级联动选择

7、宫格  Grid

在水平和垂直方向,将布局切分成若干等大的区块。区块中的内容应该是同类元素,如:都是图片,或者都是图标+文字。

8、回到顶部  Backtop

返回页面顶部的操作按钮

用法指南:

A. 当页面内容区域比较长时;

B. 当用户需要频繁返回顶部查看相关内容时。

写在最后

工欲善其事,必先利其器,充分了解每个组件所具备的功能和设计用法,能让你的设计效率提升,看完这篇文章,希望你可以在H5、小程序、APP界面设计师时,不会再被各种各样错综繁杂的组件弄得晕头转向,可以帮助你更好的选择所需要的组件。

UI组件源文件获取方式

↓↓↓

在私信给我,即可获取「UI设计组件」

你可能感兴趣的:(最全面的移动端 UI组件设计详解:下篇)