<
>

设计规范:详解组件控件结构体系之操作类

2017-09-11 12:09:58 来源:易采站长用户投稿 作者:人人都是产品经理

  本篇文章是设想标准中的操纵类,也是设想标准系列的第七篇,近来不断写那个系列,皆写腻了,也出甚么应战性。继那个系列以后,我会写一些超故意思的文章,念念皆好冲动哦。

  

 

  因为触及到操纵类的组件控件真正在太多太多了,我那里分别回类的是典范的同时战之前分组没有反复。

  操纵类一共露以下八类:

  底部操纵列表

  底部浮层视图

  编纂菜单

  底部东西栏

  按钮

  挑选器

  下推菜单

  文本框

  照旧附上一张脑图,组件控件分类(假如纯真经由过程组件控件,易以满意功用分别的需供,以是我将那个范畴扩展,分类内里不只仅露有组件战控件,以是请没有要正在意细节。)

  

 

  1.底部操纵列表

  界说:展现了取用户触收的操纵间接相干的一系列选项功用。

  用处:底部操纵列表,是当用户激起一个操纵的时分,呈现的浮层。“利用操纵列表让用户能够开端一个新使命大概对毁坏性操纵(比方:删除、退出登录等)停止两次确认。”

  利用场景:比方正在iOS本死邮箱,用户正在读邮件时,面击底部的东西栏中的复兴/转收,则呈现一系列选项功用,用户经由过程面击挑选选项功用开端一个新使命。Android顶用户少按呈现底部操纵列表,用户能够对一系列功用挑选从而开端新的使命。

  

 

  特征:

  由用户某个操纵止为触收

  包罗两个或以上的按钮

  利用操纵列表:操纵列表供给一系列正在当前情形下能够完成当前使命的操纵,而那样的情势没有会永世占用页里UI的空间。

  PS:Material Design内里把宫格款式也算正在底部行动条内里。

  底部浮层视图

  界说:展现了取用户触收的操纵间接相干的一系列选项。

  用处:多用于对当前界里的分享

  

 

  特征:

  由用户某个操纵止为触收

  包罗两个或以上的宫格

  PS:正在Material Design设想标准中,把底部操纵列表战我所道的底部浮层视图,皆叫做底部行动条,内里能够是列表款式也能够是宫格款式。Material Design是以功用的维度去分别,而我是根据组件显现款式去辨别。以是才有了两种差别的成果。

  编纂菜单

  界说:用户经由过程少按大概面击能吸出一个编纂菜单去完成诸如正在文本视图,网页大概图片中的剪揭、复造、和其他一系列的挑选操纵。

  用处:将一系列操纵躲藏,只能经由过程脚势吸出,那样的益处是编纂菜单没有占有当前展现界里的空间,合适非下频的利用场景。

  利用场景:比方微疑,假如用户念对话停止复造、转收、珍藏等操纵,经由过程少按吸出编纂菜单。

  

 

  特征:

  编纂菜单躲藏,只要经由过程单击大概少按吸出

  以浮层情势存正在

  说明:正在正在Material Design设想标准中,将我所道的编纂菜单界说为菜单,我以为叫做编纂菜单更形象。

  底部东西栏

  界说:底部东西栏上安排着用于操纵当前屏幕中各工具的组件。

  用处:正在东西栏里安排用户正在当前情形下最多见的操纵功用,当键盘被唤起、用户高低滑动大概当前视图变成横屏的状况下,东西栏能够被躲藏。

  利用场景:比方iOS 本死邮箱,需求对该启邮件停止转收、复兴、删除、标识表记标帜等一系列操纵,同时该操纵皆是下频操纵。没有需求躲藏,以是那时分便需求利用底部东西栏了。

  

 

  特征:

  东西栏初末位于屏幕底部

  东西栏操纵能够是笔墨或图标,也能够是笔墨减图标

  东西栏操纵数目倡议没有超越5个

  按钮

  界说:由笔墨战/或图标构成,按钮见告用户按下按钮后将停止的操纵,我们能够把按钮了解为一个操纵的触收器。

  次要的按钮有三种:悬浮呼应按钮、浮动按钮、笔墨按钮

  悬浮呼应按钮是增进行动里的特别范例。 是一个圆形的漂泊正在界里之上的、具有一系列特别行动的按钮,那些行动凡是战变更、启动、和它自己的转换锚面相干。

  

 

  浮动按钮(Raised button),常睹的圆形纸片按钮,战悬浮呼应按钮相反。非悬浮,牢固于一个地位。 面击后会发生朱火分散结果。浮动按钮看起去像一张放正在页里上的纸片,面击后会浮起去并表示超卓彩。

  

 

  浮动按钮使按钮正在比力拥堵的界里上更明晰可睹。能给年夜大都扁仄的规划带去条理感。

  笔墨按钮是面击后发生朱火分散结果,战浮动按钮的区分是出有浮起的结果。只管制止把他们做为地道粉饰用的元素。按钮的设想该当战使用的色彩主题连结分歧。

  

 

  按钮利用划定规矩:按钮范例该当基于主按钮、屏幕上容器的数目和团体规划去停止挑选。

  假如长短常主要并且使用普遍需求用上悬浮呼应按钮。

  基于安排按钮的容器和屏幕上条理堆叠的数目去挑选利用浮动按钮借是扁仄按钮,制止过量的层叠。

  一个容器该当只利用一品种型的按钮。 只正在比力特别的状况下(好比需求夸大一个浮起的结果)才该当混淆利用多品种型的按钮。

  挑选器

  界说:经由过程滑动滑轮去挑选工夫、所在、人物等。滑轮的启载疑息很年夜,能够启载许多许多的选项。

  用处:正在滑轮中能够去回挑选,假如挑选毛病能够调解。

  利用场景:比方iOS 本死日历,用户选按时间时,正在面击完毕的列表时,呈现挑选器,经由过程滑动滑轮,挑选所需求的工夫。

  

 

  特征:

  挑选器普通位于底部,大概位于选项列表的上面(如iOS 本死日历)

  统一个滑轮间的选项属性不异

  下推菜单

  界说:经由过程面击一个操纵按钮,下推出一个菜单,菜单由箭头、浮层列表构成。

  用处:

  为其他功用供给一个快速进口。

  功用进口。

  利用场景:比方微疑,支付款、扫一扫等层级较深。下推菜单可供给快速进口的做用。

  

 

  文本框

  界说:能够让用户输进文本。它们能够是单止的,带或没有带转动条,也能够是多止的,而且带有一个图标。面击文本框后显现光标,并主动显现键盘。除输进,文本框能够停止其他使命操纵,如文本挑选(剪切,复造,粘揭)和数据的主动查找功用。

  文本框有两类:单止文本框、多止文本框

  文本框能够有差别的输进范例。输进范例决议文本框内许可输进甚么样的字符,有的能够会提醒实拟键盘并调解其规划去显现最经常使用的字符。常睹的范例包罗数字,文本,电子邮件地点,德律风号码,小我私家姓名,用户名,URL,街讲地点,信誉卡号码,PIN码,和搜刮查询。

  单止文本框:当文本输进光标抵达输进地区的最左边,单止文本框中的内容会主动转动到右边。

  

 

  多止文本框:当光标抵达最下缘,多止文本框会主动让溢出的的笔墨断开并构成新的止,使文本能够换止战垂曲转动。

  

 

  关于多止文本框,用户正在输进前N止时,文本框的下度自顺应,超越N止时,下度稳定,呈现滑条,比方微疑N=5。

暂时禁止评论

微信扫一扫

易采站长站微信账号