• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何做好标签系统设计?来看我的实践过程!

如何做好标签系统设计?来看我的实践过程!

作者:沁园 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含一致性原则,用户体验,用户测试,用户认知,经验分享,设计细节等相关知识,沁园希望在学习及工作中可以帮助到您

本文针对的是从 UX 角度出发的标签系统设计,不同于数据库的标签系统设计。「标签系统」的概念来源于《信息架构:超越 web 设计》一书。

想看作者更多好文欢迎搜索知乎专栏「沁园的设计小跑」。

一、什么是标签系统

「标签」通俗来说就是给界面元素命名,使用用户语言来更好地向用户传达信息,降低用户使用产品时的理解成本。当产品各个部分关系很复杂的时候,就需要考虑「标签系统」了。产品中的文字和图标都是标签,普遍使用的是文字标签,图标标签在表达含义上相对会更困难一些。

△ 豆瓣「书影音」的标签系统

《信息架构:超越 web 设计》一书对标签系统进行了详细的介绍,包括标签系统的类型、设计原则和设计方法。阅读的时候就在思考,要如何将这些理论更好的运用在实际操作当中呢?

二、标签系统设计实践

最近在做一个产品的频道首页,当我们在对频道首页的功能入口进行命名时,就涉及到标签系统的设计。个人觉得算是一个比较小的标签系统,尝试结合书里的内容来帮助设计。

在命名标签时遇到的两个难点:

  • 功能 ABCD 的命名无论从哪一个维度,其概念都有交叉的部分。就好比番茄同时属于水果和蔬菜,事物有多种分类方式。例如想把功能 A 用概念1命名,但是功能 C 和功能 D 也属于概念 1。无论用哪种维度,这无法独立地表达这几个功能。
  • 由于语言本身具有模糊性,一个词有多种含义,不同的用户对同一个词也有不同的理解。

这几个功能的命名,小组讨论了多次,每提出一种命名方式都会有人质疑。因此,要采取更有依据的方式来命名标签。

△ 命名标签的难点

1. 初始版本

初始版本的标签命名有以下几个思路:

  • 功能/业务本身。比如给用户提供的是灵活存取的理财产品,标签就可以命名为:灵活理财。
  • 竞品。查看竞品的产品标签,借用一些大家都在用的,比如「活期」、「余额宝」、「零钱」。
  • 行业术语。比如「定期」、「活期」是银行存款惯用的名称。

同时,也要注意以下几个原则:

  • 尽可能缩小范围:针对更明确的受众和场景。
  • 一致性:一致性可以带来可预测性,让用户更容易学习。一致性包括语言风格一致、视觉样式一致、语法一致、粒度一致、目标用户一致等。
2. 表格法

以表格的方式整理标签,可以排除界面的其他元素,更系统、更清楚地审视标签。

比如在用表格法检查初始版本的标签时,就发现几个一句话文案内容重复、稍显赘述。

可以是同一页面的标签表格整理,也可以是跨页面的。这样我们就可以知道,从不同页面之间跳转,标题的表达连不连贯,统不统一。

△ 用表格法系统性审视标签

3. 用户测试

为什么要做用户测试?

产品的界面元素是为了和用户更好的「交谈」,标签的目标是向用户有效地传达信息。适宜的标签可以让用户产生正确的联想,并决定是否要点击进去了解更多内容。所以标签的命名是要以用户为中心的,因此,我们选择做用户测试,来检查标签的命名是否可以让用户快速理解产品的功能和价值。

测试方法

针对频道首页的标签系统,我们采用了分步测试法。把频道首页拆成三个版本,每个版本只展示部分内容,询问被测者并获取反馈,评估标签的有效性。

寻找的被测者都是该频道的新用户,约6~8个人。

△ 分步测试法

测试大纲

  • 第一步测试:给用户展示第一个版本(只有功能入口),询问用户认为这个频道提供了什么功能和服务,以及对这几个功能的理解。
  • 第二步测试:给用户展示第二个版本(功能入口+一句话文案),询问用户对这些功能的理解,和之前的理解有什么不一样,有什么疑问。
  • 第三步测试:给用户展示第三个版本(功能入口+一句话文案+内容),询问用户对这些功能的理解,和之前的理解有什么不一样,有什么疑问。

测试的时候做好记录,然后整理搜集到的信息,优化标签的表达方式,优化后的方案可以再找用户测试,反复打磨迭代。

此外,标签系统的设计还要注重拓展性,这样以后新增的标签才不会破坏当前的标签系统。标签系统还需要跟随产品迭代和用户认知进行调整和优化。

总结

由于语言本身的模糊性和用户认知的差异性,「标签永远都不会完美」。但是我们在设计标签系统的时候可以注重一些原则,使用一些方法(例如表格法和用户测试),为标签系统的设计提供依据,让标签尽可能有效地传达信息。

「提升用户体验的细节」

  • 《为什么你的设计很棒,但用户体验还是很烂?》
  • 《内容为王的时代,阿里设计师用实战案例解读内容化设计!》
  • 《进阶学习!如何做好产品界面中的内容设计?》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 用Airbnb 的产品,帮你快速理解尼尔森10大可用性原则!
  • 腾讯CDC:设计师必须知道的16句名言
  • 设计师想自我提升?高手给你3个方向!
  • 如何做好标签系统设计?来看我的实践过程!
  • 超全面总结!有可以提升用户设计体验的方法?
  • 科普手册!值得新手收藏阅读的界面设计原则
  • 学会这4个心理学小知识,你的设计会更有说服力!
  • 网易设计师:做好文字排版的小技巧
  • 学习按钮设计,看这篇就够了!
  • 想引导用户?来学习UX中的承诺和行为一致性原则

相关文章

  • 2018-08-23在这些因素的制约之下,才能选取出科学的配色方案
  • 2018-08-23涨姿势!全球顶尖的设计团队都有哪些设计原则?
  • 2018-08-23想要提升用户体验,这6种使用插画的方法颇为不错
  • 2018-08-23网易可用性优化实录!如何让你的交互设计自查表真正用起来?
  • 2017-08-06flash 嵌入网页 与IE, FF,傲游兼容问题
  • 2017-08-26浅谈React
  • 2017-08-06重复提交、重复刷新、防止后退的问题以及处理方式分析
  • 2018-08-23今年最火的全链路设计有实战案例了!滴滴设计团队出品
  • 2018-08-23高手帮你学规范!iOS和Android规范解析之底部浮层
  • 2018-08-23用一个实战项目,让你全面认识产品原型的诞生过程!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 2018年,网页和APP中背景的8个主要设计趋势
    • 产品设计过程中,异常流程设计的那些事儿
    • 近万字干货!可能是最全面的交互基础知识总结
    • 用品牌基因法,三步帮你搞定图标设计!
    • 想要搞定网页首图设计,这7个技巧帮你做得更好
    • 对于「以人为中心」的设计,你的理解可能太浅显了
    • UI实战教程!做设计稿前应该做哪些准备工作?
    • 用超多案例,帮你学会排版中最基础的对比和对齐原则
    • css技巧收藏——经典中的经典
    • 超多版式运用手法!128张让你灵感爆发的海报设计

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有