设计规范 | 详解组件控件结构体系-单元控件类

@Echo  本篇文章是设计规范中的单元控件类,也是设计规范系列的最后一篇,继这个系列之后我会写一些超有意思的文章,敬请期待哦!

单元控件类一共含以下7类:

  1. 搜索
  2. 开关
  3. 页面控制
  4. 图标
  5. 滑块
  6. 进度
  7. 选框

依旧附上一张脑图,组件控件分类(如果单纯通过组件控件,难以满足功能划分的需求,所以我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。)

1. 搜索

(1)定义

用户通过输入的关键词,搜索到用户想要的信息。

(2)用途

当应用内包含大量的信息的时候,用户通过搜索快速地定位到特定的内容。

(3)使用说明

微信两个版本的搜索,很好的遵循了两个平台的规范。对于搜索的规范,iOS 官方给出的是隐藏搜索栏,用户通过下拉展示搜索栏。Android是通过搜索图标控件引导用户点击出现搜索栏。

2. 开关

(1)定义

开关按钮展示了两个互斥的选项和状态。

(2)用途

仅在列表中用,在列表中使用开关按钮来让用户从某一项的两个互斥状态中指定一个,比如是/否、开/关。

特性:

  1. 含有开关的对象名称
  2. 开关按钮两种互斥状态

3. 页面控制器

(1)定义

页面控件告诉用户当前共打开了几个视图(多长的视图),还有它们正处在其中的哪一个(进度)。

(2)用途

告诉用户当前有多少个视图(多长的视图),还有它们处在其中哪一个(进度)。

(3)使用场景

例如知乎在浏览器中打开,用户浏览页面时,通过滑条用户很容易知晓当前界面的视图有多长,以及所处在哪里。京东的首页轮播,通过页面控制器诉用户当前共打开了几个视图,还有它们正处在其中的哪一个。

特性:

  1. 包含一系列圆点,圆点的个数代表当前打开的视图数量(从左到右,这些圆点代表了视图打开的先后顺序)
  2. 避免显示太多点,建议不超过6个,一般超过6个很难让用户一目了然

PS:在iOS 规范中,把页面中的滑条(知乎移动网页端的举例)也当做页面控制器。

4. 图标

(1)定义

界面中的一种图形元素,用来执行应用程序中的定义的操作。

(2)用途

当单击它时,能执行指定的功能操作。

特性:

  1. 由图标和/或文字组成
  2. 文字及图标必须能让人轻易的识别为按钮并轻易地点击后展示的内容联系起来

5. 滑块

定义:滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边,对应的,最大值放在右边。

滑块可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

连续滑块:在不要求精准、以主观感觉为主的设置中使用连续滑块,让使用者做出更有意义的调整。

带有可编辑数值的滑块:用于使用者需要设定精确数值的设置项,可以通过点触缩略图、文本框来进行编辑。

间续滑块:间续滑块会恰好咬合到在滑动条上平均分布的间续标记上。在要求精准、以客观设定为主的设置项中使用间续滑块,让使用者做出更有意义的调整。应当对每个间续标记(tick mark)设定一定的等级区间进行分割,使得其调整效果对于使用者来说显而易见。这些生成区间的值应当是预先设定好的,使用者不可对其进行编辑。

附带数值标签的滑块:用于使用者需要知晓精确数值的设置项。

6. 进度

定义:在刷新加载或者提交内容时,需要一个时间过度,在做这个过程中需要一个进度和动态的设计。

尽可能地减少视觉上的变化,尽量使应用加载过程令人愉快。每次操作只能由一个活动指示器呈现,例如,对于刷新操作,不能即用刷新条,又用动态圆圈来指示。

指示器的类型有两种:线形进度指示器和圆形进度指示器。可以使用其中任何一项来指示确定性和不确定性的操作。

在操作中,对于完成部分不确定的情况下,用户需要等待一定的时间,无需告知后用户台的情况以及所需时间,这时可以使用不确定的指示器。

线形进度条:应该放置在页眉或某块区域的边缘。线形进度指示器应始终从0%到100%显示,绝不能从高到低反着来。如果一个队列里有多个正在进行的操作,使用一个进度指示器来指示整体的所需要等待的时间。

圆形进度指示器:

7.选框

定义:用户对单个/多个选项进行选择。

选框分为两类:单选框和复选框。

单选框:只允许用户从一组选项中选择一个。

复选框:允许用户从一组选项中选择多个。

如果需要在一个列表中出现多个 on/off 选项,复选框是一种节省空间的好方式。

如果只有一个 on/off 选择,不要使用复选框,而应该替换成开关。

相关文章:

《设计规范 | 详解组件控件结构体系-导航类》

《设计规范 | 详解组件控件结构体系-加载类》

《设计规范 | 详解组件控件结构体系-引导类》

《设计规范 | 详解组件控件结构体系-网络异常类》

《设计规范 | 详解组件控件结构体系-空数据类》

《设计规范 | 详解组件控件结构体系-提示类》

《设计规范 | 详解组件控件结构体系-操作类》

封面作者:Javier Crocco Mendez

作者:Echo(微信公众号:UEDC)

(0)

相关推荐

  • 设计规范 | 详解组件控件结构体系-加载类

    本文作者将加载划分为6种类型,分别适用于不同的场景,各有优缺点.设计师在设计时,可以根据用户的使用场景和环境设计适合的加载. @Echo 设计师在进行APP设计时,往往会更加专注于界面的布局.界面和界 ...

  • 设计规范 | 详解组件控件结构体系-引导类

    @Echo 本文是系列文章之详解组件控件结构体系的第三篇--引导类.enjoy~ 引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品功能前或遇到障碍之前给予及时的引导提示. 为了业务或者产品 ...

  • 设计规范 | 详解组件控件结构体系-提示类

    @Echo 本篇文章讲解功能分类之提示类,如果我是写信息的提示类,那么里面涉及到的会有toast.警示框.界面内嵌.loading加载.tips提示.空数据界面.卡片等等,这就和之前讲的有重复.所以, ...

  • 设计规范 | 详解组件控件结构体系-网络异常类

    @Echo 从用户使用情况来说,在用户在使用APP过程中,任何操作都可能出现网络异常的情况.那么,针对网络异常情况一共有哪几种设计呢?哪些情况使用全局组件,哪些情况使用局部组件呢?本文作者就按照三种网 ...

  • 设计规范 | 详解组件控件结构体系-空数据类

    UI设计师或产品经理在设计产品原型时,大部分情况都是先设计主流程的主界面,然后设计其他各个场景的界面,最后设计异常界面.空数据界面等等.那么,空数据界面一共有哪几种类型呢?这篇文章我们来看一下设计规范 ...

  • 设计规范 | 详解组件控件结构体系-导航类

    @Echo 本文作者将详细阐述组件控件结构体系中的导航系统,分别为7类:底部标签式导航.分段控制式导航.列表式导航.下拉菜单式导航.抽屉式导航.宫格式导航和卡片式导航.enjoy~ 什么是控件?什么组 ...

  • 绝地求生大逃杀画面全选项设置效果图文详解

    画面设置不管是哪个配置段的玩家都无法绕开的一个关键问题,虽然网上有很多其他玩家分享的设置,但往往会由于机器的不同而出现不适配的情况.所以今天小编为大家带来的便是玩家"是阿文啊丶"测 ...

  • 从设计指南说起,详解Material Design体系组件

    @Echo  iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍. 一般把Control翻译成控件,把Component翻译成组件.通俗的解释说法就是组件为多个元素组合 ...

  • Android布局控件之RelativeLayout详解

    操作方法 01 Android布局控件之RelativeLayout详解 RelativeLayout是相对布局,相对布局指的是某个组件的位置是相对于它所以来的组件的位置 android布局属性详解 ...