而是和按钮类似-直接触发某个交互结果

2019-08-27 20:14| 发布者: | 查看: |



相关推荐:



  在物理世界我们可以给物、给人贴标签,在用户界面中,一张图、一首歌、一种操作乃至于任何一条UGC内容(用户原创内容),都可以被赋予标签

  上面说过标签都是轻量级的,这很好理解。又说了它们可以替换很多组件且出现时机很灵活,为什么呢?来看下这些例子

  其次,标签可以根据内容的变化自然地出现或隐藏。想象一下,如果界面中的按钮和选择控件像下图这样时不时出现、又隐藏,那一定会比较突兀

  最后,从上面的几个案例可以看出,标签的容器长度是自适应内容的,所以多个标签平铺在一起,既紧凑又不显凌乱,所以它是列表和下拉菜单的优秀代替品

  材料设计中的“纸片”(chip)和它很像,但我们很少使用“纸片”这个叫法

  请注意不要把它和tab选项卡中的标签、或APP底部的标签栏混淆了,这里说的标签就像刚买来衣服上的的标签一样,希望这样能帮你记住

  材料设计中的“纸片”(chip)和它很像,但我们很少使用“纸片”这个叫法

  请注意不要把它和tab选项卡中的标签、或APP底部的标签栏混淆了,这里说的标签就像刚买来衣服上的的标签一样,希望这样能帮你记住

  对于无法操作的标签,不要把它们设计得像一个可点击的按钮,比如,不要看上去很立体,那样会让人想点击;又比如形状不一定要很规则,因为按钮都是规则的(圆角)矩形

  标签的组件类型(录入类、触发类、or展示类)无法统一,因为它有很多种类,下文会讲到

  对于无法操作的标签,不要把它们设计得像一个可点击的按钮,比如,不要看上去很立体,那样会让人想点击;又比如形状不一定要很规则,因为按钮都是规则的(圆角)矩形

  标签的组件类型(录入类、触发类、or展示类)无法统一,因为它有很多种类,下文会讲到

  三者都是可选的,它们可以随机组合,常见的是这5种组合:文本、图标、容器+文本、容器+图标、容器+文本+图标

  纯图标标签会更富有设计感且吸引眼球,但这种图标必须是用户熟识的、一看就明白含义的;而纯文本会更直观地表达含义,但其字数受限,主要用于抽象的、或分类较多的标签;图标结合文本的话,面积会较大,视觉冲击很强,它要么是出于交互功能的需要(如上图淘宝),要么则是用在节日和特别专题

  标签的颜色:除了元素之外,颜色也是传达标签感情的重要角色,比如,绿色代表清新、免费,黄色棕色代表尊贵VIP,红色象征火爆热门

  标签的形状:常见的形状有(圆角)矩形、三角形和异形。矩形容器适合放文字或文字+icon;三角形容器(一般放在海报的顶角)中适合放icon,如果放文字,则字数不要超过3个,而且文字需要旋转(如下图);此外还有异形容器,异形标签因为造型夸张,适合出现在活动宣传类场景

  标签的颜色:除了元素之外,颜色也是传达标签感情的重要角色,比如,绿色代表清新、免费,黄色棕色代表尊贵VIP,红色象征火爆热门

  标签的形状:常见的形状有(圆角)矩形、三角形和异形。矩形容器适合放文字或文字+icon;三角形容器(一般放在海报的顶角)中适合放icon,如果放文字,则字数不要超过3个,而且文字需要旋转(如下图);此外还有异形容器,异形标签因为造型夸张,适合出现在活动宣传类场景

  标签一共有5类,它们是:过滤标签、操作标签、输入标签、信息展示标签和同类跳转标签

  过滤标签,是用来快速筛选类别的标签,点击它会导致对应内容被过滤出来。它可以触发、也可以不触发操作,有单选也有多选,来看看示例

  不触发、单选的过滤标签:会自动取消其他的选择,数量至少有两个(和单选按钮同理)

  其实从功能上来看,上面两种标签也可以分别用「单选按钮」和「复选框」代替,而之所以使用标签,是因为它们带有更方便触摸的容器,而没有小圆圈、勾选框这些元素,因此看上去也更清爽

  可触发、单选的过滤标签:立即触发展示相应的内容,数量至少有两个(和单选按钮类似)

  这种标签可以是tab选项卡的代替,想象一下上图中如果用的是tab选项卡,会占用更大空间,而且在切换时会给人一种较强的跳脱感

  操作标签,是一种可以立刻触发操作的标签,和上面的「触发类过滤标签」不同的是,它引起的不是内容的筛选,而是和按钮类似-直接触发某个交互结果。此外,操作标签没有单选多选之分

  虽然操作标签无单选或多选的限制,但一般它们成组出现,至少有俩。单独出现或许合理,但请谨慎使用,此时不妨考虑下按钮

  虽然操作标签无单选或多选的限制,但一般它们成组出现,至少有俩。单独出现或许合理,但请谨慎使用,此时不妨考虑下按钮

  输入标签以标签的形式存放用户的录入信息,它作为「文本框」的补充小组件,经常在录入多条信息时用到,最常见的就是输入多个收件人的文本框

  信息展示标签,这是个很好理解的名称,它的功能就是传递信息,有时也可点击。常出现在资讯平台和电商平台,在资讯平台(如36氪)常用标签来展示内容关键信息,方便用户快捷判断是否对该内容感兴趣;而电商平台的目的则是提高销售业绩:购买率 ,它的标签内容往往跟产品质量和用户利益密切相关,如“热销”、“好评”、“秒杀”、“满减” 等字眼

  徽标中的数字超过99时,可以写成“99+”,随着文字变长,圆点容器可以变成高度不变的圆角矩形

  徽标中的数字超过99时,可以写成“99+”,随着文字变长,圆点容器可以变成高度不变的圆角矩形

  这类标签可以代表一种话题,在被点击后,界面将跳转至更多与该类话题相关的用户生产内容,由此来为同类内容引流、增加用户停留时长,因此该标签常出现在内容平台。推文话题符号“#”(hashtag),是OGC平台的标配,它最早出现于推特。微博上的“超话”标签也是这一类

  不同种类的标签尺寸不一而足,以下是最常规的容器+文本标签尺寸,仅供参考

  如果要给一张卡片或海报加标签,放在什么位置最适合呢?通常一个页中又会有多个标签,怎么安排它们的位置呢?我们可以沿着用户的浏览顺序-“Z字形”来排列,即从左上到右下分别对应「运营性从强到弱」、「存在时间从短到长」、「重要级从高到低」的标签。同时请注意标签不要遮挡海报中的关键信息

  除了位置,还需要从标签的样式来区分其重要级别,这样才能层次清晰、让用户优先关注到核心信息,而且界面也不会显得杂乱无章。我们以最常见的容器+文本类标签为例,如果大致将其分为实心标签、线框标签和文本标签三类,那么它们的重要级应该是递减的,因为它们的视觉重量递减。在页面中,这三类标签也应该有自己的角色,还是以京东到家举例

  上图中,运费和领券直接关系到用户消费金额,它们自然该比超市距离和配送时间更重要;而运费比起优惠券来说,规则更少、金额相对稳定,优惠券数量众多、计算方式复杂,最后能用上哪一张是用户当前无法知道的,所以运费应该比领券设计得更吸引人的注意

  这些就是标签的知识,如果有任何疑问或建议欢迎与我讨论,直接在公众号回复即可,下次见啊

<
>
快速飞艇网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

江苏省南京市玄武区玄武湖

13588889999(服务时间:9:00-18:00)

admin@adminbuy.cn

在线咨询 官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

网站建设 微信开发 售后服务 咨询电话13588889999 返回顶部
返回顶部