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

57天前发布

原创文章 / UI / 观点
小小方方 原创,如需商业用途或转载请与小小方方联系,谢谢配合。

最全面的移动端 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设计组件」源文件

↓↓↓

9
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息