当前位置:主页 > 查看内容

UX设计: 按钮使用实例、类型和状态

发布时间:2018-07-23 09:56| 位朋友查看

简介:……

如此按钮是普通的。、日常一起易弯曲的中能不期而遇的根本要素。但要产量任何人流利的一起易弯曲的体会工艺流程,,按钮是要紧元素。,依据,将最大限度的用于该元件的设计争辩常有意思的。。并且,本人也为完全地梳理出元素的根本类别跟身份——都是为了发现出高效的按钮于是加强用户体会你所只得知道的根本书信。

一、运用按钮的最适度提议

1、让按钮显现像个按钮

心细思索按钮多少将其效能可见性使分娩给U。用户又是到何种地步将任何人元素了解成按钮的?最复杂的办法执意运用人物和色让元素显现像任何人按钮。

Groupon 登录喊出名字以寻找排出显示主按钮


并且,你必要负责思索元素的可触摸维度。。它扶助用户辨别是非一组元素做成某事按钮。,按钮其的按大小排列也起着要紧的功能。。实则,设计指导者中所问的最小设计程度。。来自于 MIT Touch Lab 任一调查喻,手指的平常的触摸程度在10-14mm乳房。,指套的程度在8-10mm。,这使得最使显得漂亮的程度在10mm以下。 x 10mm摆布。

2、注重按钮的定位和按次

按钮霉臭放在用户轻易找到或预料的空隙。。诸如,iOS UI 指导者做成某事任何人提议:

按钮的按次也争辩常要紧的。,显著地在四周一对对(诸如前任何人和下任何人)选择BU。确保最要紧的按钮在视觉设计中杂多的的排出。。

在下面的提议中,本人运用白色认付出能代表毁坏性采取军事行为的按钮。请注重,键控何止在粉饰和色彩上更排出。,它的定位也使待在床上或室内在对话框的越位的。。

3、要运用用垂饰安装吗?

用垂饰安装用来通知用户在采取军事行为按钮以后的发生了什么。。

下面的提议也平等地。,假定不运用适宜的的发短信用垂饰安装,状态列举如下,瞧瞧,你觉得这有什么差额吗?

4、行为打电话给按钮(CTA)

最要紧的按钮,显著地举措按钮的打电话给,霉臭是T。。

二、按钮人物

通常状态下,您将基本原则Web的类型设计按钮为矩形或圆角。。相当多的调查指数,圆角按钮能加强书信的能被描绘并招引用户的注重力到元素的磁心处(发短信平衡)。

圆角矩形按钮


敢情,你可以更负有开创勇气。,运用宁静如圆形的、带有正方形的或自定义人物的按钮,但请不恝于怀,选择后者能更危险的。。

挂起按钮是运用自定义人物按钮的任何人终止的提议。


请确保在完全适用中运转的把持键把持,这般用户就可以很轻易地辨别是非出你的范围元素,并能联系电话。。

三、按钮类型和行为

1、漂按钮

漂按钮通常是直角型。,某个预示的点击性显示了它的点击性。。构成与立体设计,它增多了全部程度,在更小型私人会议的范围上更明晰可见。

(1)运用。作为内联元素运用,口音使具体化多个满足的的规划做成某事举措。。

(2)行为。按漂按钮轻易地跳并步行色。

(3)任何人提议。漂按钮比立体按钮更排出。,提议列举如下:

2、公寓按钮

按下时,立体按钮无力的发出爆裂声。,但它也会步行必然的色。。公寓按钮的首要优点是复杂和复杂——它们最低限度了。

公寓按钮


(1)运用。

  ① 在对话框中,一致按钮其跟对话框满足的的形状:

Android 对话框做成某事立体按钮

 
② 在镗杆中:

镗杆做成某事立体按钮


作为内定元素的内联元素,用户可以很轻易地注重到它们。

(2)行为。

(3)任何人提议。

3、使出轨按钮

切换按钮容许用户在两个或多个身份乳房切换。。

使出轨按钮


(1)运用。使出轨按钮最常用于手势开/关身份。。

使出轨按钮也可以在一组互相牵连选择上运用。,但在这点上,你的设计霉臭向用户使接替目前的的使出轨。。并且,使出轨按钮问:

① 使出轨按钮组由反正三个使出轨按钮结合。;

② 运用纯发短信、任何人图标或两个按钮的结成;

使出轨按钮组有任何人选择可供选择。


图标的运用异乎寻常的套装使出轨按钮。,它可以助手地方针按钮倘若被选中或不选择。,这就像添加或取代任何人星门口。,它们首要用于用垂饰安装栏做成某事专心致志。、镗杆、采取军事行为按钮或带有使出轨进口的选择。

为你的按钮选择应该的的图标争辩常要紧的。,我先前在定冠词中表达过如此话题。。

(3)任何人提议。IOS运用设置平衡做成某事切换按钮。

4、仿制品按钮

仿制品按钮是具有根本按钮人物的通明按钮(如,只是有任一细线的有木架的,并在尚待开发的领域中使具体化纯发短信。

(1)运用。运用仿制品按钮作为任何人首要的CTA按钮通常做错任何人好主意。。在 Bootstrap 一例,你可以领会仿制品按钮下载 Bootstrap显现和他们的标志风骨相通。,其出来用户能会发现物困惑。。

仿制品按钮最套装于对立较小的采取军事行为。,由于它不克不及(或不霉臭)与主 CTA 按钮构成要紧性。梦想身份,你普通怀胎用户领会你的首要 CTA 按钮,假定不互相牵连,用户也可以跳至主要按钮上。

(2)行为。

(3)任何人提议。Airbnb的网站上有“Become a Host”的仿制品按钮。

5、延缓按钮

延缓按钮是 Google Material Design 做成某事一平衡,是一种点击后会发生涂油墨四处奔逃印象的圆形按钮 。

(1)运用。悬挂按钮用于促销采取军事行为(促销) 行为)。

(2)行为。悬挂按钮的独特的是,它是在范围上的圆形漂。、带有嵌上特别举措的按钮,这些行为通常是替换的。、启动、而且它自己的过渡锚。

四、多少选择按钮类型

选择按钮类型霉臭由于主按钮、选择庇护上的船接近和全部规划。

Google Material Design 提议采取的选择按钮类型


庇护Z轴吃水


1、复查效能:延缓液的运用倘若十分要紧和广泛地专心致志

2、思索船和攀登:在于使待在床上或室内在按钮上的船的接近和接近。

3、反省规划:船霉臭只运用一种类型的按钮。 只在构成特别的状态下(比方必要口音任何人提出的印象)才霉臭混合运用多种类型的按钮。

五、按钮身份

按钮身份不太在意按钮的初始身份。,相反,本人必要思索前文(或宁静采取军事行为)用户的位于正中的。,多少在不使变酸的状态下处置体系,由于面临如此算是,用户能会迷惑:这是任何人按钮吗?看来现时我得指数了。,让本人看一眼按钮式按钮倘若真的是任何人按钮。,哎......”

按钮做错身份同类的的。相反,按钮通常存在杂多的身份。,依据,多少经过Visual F将按钮的目前的身份使分娩给用户,这是任一异乎寻常的要紧的指定。。

1、常态身份

如此身份的要紧规律——按钮霉臭显现像是任何人按钮。。WORDOWS8是任何人终止的反例——在设置菜下。,用户很难整齐的辨别是非这些元素倘若可以。。

Windows8 乳房常态身份的按钮


2、聚焦身份

当用户位于正中的悬停在按钮的顶部时,本人霉臭给用户任何人良好的视觉反应来通知他们他们的身份。,依据用户可以立即地对某人找岔子他们的采取军事行为是无补的。,他们也怀孕这种视觉反应的印象其能使成为一体高兴的。

3、按下身份

动画片摄制差额元素(添加开创和有意思的动画片摄制印象),你可以给用户必然程度的高兴。。

4、非易弯曲的身份(无补身份)

如此身份的按钮,通常有两种办法来潜匿或潜匿按钮。。

(1)潜匿按钮的报账:

  ① 明晰明了。只必要向用户显示that的复数必要用到/干的按钮。

  ② 节省打孔。容许用户在差额采取军事行为下运用差额的把持键。,显著地当按钮很多的时辰异乎寻常的近便的。。诸如,Gmail这种办法:

Gmail 潜匿无法运用的按钮

裂开互相牵连举措后,显示原始潜匿按钮


(1)禁用按钮的报账:

  ① 可以显示能的举措。平均的目前的按钮不干,用户还可以对某人找岔子按钮能是令人满意的的。。你甚至可以有任何人器鼓励来解说运用条目。。

  ② 把持定位明晰可见。用户可以弄明白范围把持键和按钮的定位。。

无身份按钮

六、尾声

按钮是用户运用你的网站/顺序的中庸经过。,您怀胎用户经过点击CORISCON持续进行您的关心。。假定你运用有理的按钮类型、摆好定位,说明按钮身份的替换,这敢情产量了任何人流利的体会工艺流程。。假定你的设计失败,由于用户甚至未查明应该的的按钮,最好的算是能是用户的打断。,最差的能是用户的误采取军事行为。、申诉甚至保持你的网站/顺序。

按钮的用户体会设计通常关怀于辨别是非和CLA。。假定你以为你的网站/适用是任何人人机范围的及格,你霉臭对某人找岔子按钮在如此工艺流程中起着至关要紧的功能。。

译/

三田缺席距GPJ

翻译器自:

推荐图文


随机推荐