当前位置: 首页 >文章 > 设计规范 | 详解组件控件结构体系:单元控件类
收藏
分享

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

举报Echo的设计笔记Echo的设计笔记发布于 2018-09-061449阅读1点赞
单元控件类一共含以下7类: 1.搜索 2.开关 3.页面控制 4.图标 5.滑块 6.进度 7.选框...

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

1.搜索

2.开关

3.页面控制

4.图标

5.滑块

6.进度

7.选框

依旧附上一张脑图,组件控件分类(如果单纯通过组件控件,难以满足功能划分的需求,

所以我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。)

1.搜索

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

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

使用说明:微信两个版本的搜索,很好的遵循了两个平台的规范。对于搜索的规范,iOS 

官方给出的是隐藏搜索栏,用户通过下拉展示搜索栏。Android是通过搜索图标控件引导

用户点击出现搜索栏。

2.开关

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

用途:仅在列表中用,在列表中使用开关按钮来让用户从某一项的两个互斥状态中指定一

个,比如是/否、开/关。

特性:

1.含有开关的对象名称

2.开关按钮两种互斥状态

3.页面控制器

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

哪一个(进度)。

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

使用场景:例如知乎在浏览器中打开,用户浏览页面时,通过滑条用户很容易知晓当前界

面的视图有多长,以及所处在哪里。京东的首页轮播,通过页面控制器诉用户当前共打开

了几个视图,还有它们正处在其中的哪一个。

特性:

1.包含一系列圆点,圆点的个数代表当前打开的视图数量(从左到右,这些圆点代表了视

图打开的先后顺序)

2.避免显示太多点,建议不超过6个,一般超过6个很难让用户一目了然

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

4.图标

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

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

特性:

1.由图标和/或文字组成

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

5.滑块

定义:滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择

一个合适的数值。区间最小值放在左边,对应的,最大值放在右边。

滑块可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如

音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

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

的调整。

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

本框来进行编辑。

间续滑块:间续滑块会恰好咬合到在滑动条上平均分布的间续标记上。在要求精准、以客观

设定为主的设置项中使用间续滑块,让使用者做出更有意义的调整。应当对每个间续标记

(tick mark)设定一定的等级区间进行分割,使得其调整效果对于使用者来说显而易见。这些生

成区间的值应当是预先设定好的,使用者不可对其进行编辑。

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

6.进度

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

的设计。

尽可能地减少视觉上的变化,尽量使应用加载过程令人愉快。每次操作只能由一个活动指示器

呈现,例如,对于刷新操作,不能即用刷新条,又用动态圆圈来指示。

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

性和不确定性的操作。

在操作中,对于完成部分不确定的情况下,用户需要等待一定的时间,无需告知后用户台的情

况以及所需时间,这时可以使用不确定的指示器。

线形进度条:应该放置在页眉或某块区域的边缘。线形进度指示器应始终从0%到100%显示,

绝不能从高到低反着来。如果一个队列里有多个正在进行的操作,使用一个进度指示器来指示

整体的所需要等待的时间。

圆形进度指示器:

7.选框

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

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

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

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

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

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

0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天64人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证