标签 用户 信息 在移动端产品中，标签不是核心内容，甚至有点不起眼，但是谁都无法忽略它的存在。特别是在电商平台中，标签已经成为了不可或缺的设计形式。今天我们就来总结下标签设计的细节。文章主要分为 3 部分：标签是什么？标签需要表达什么？标签设计的要点标签是什么？1. 功能标签百度百科给出的解释是”Tag（标签）是一种更为灵活、有趣的日志分类方式，可以为每篇日志添加一个或多个 Tag（标签）“。例如在网络平台发布文章时，作者可以定义多个标签，方便读者更好的理解文章内容。同时平台也可以根据标签聚合同类文章，建立目录索引，引导读者快速查看标签文章。还有一种就是「话题标签」更加灵活，通常采用“#+任意文字”的形式，作为超链接可以跳转到专题或者信息聚合页。例如微信、微博、今日头条的话题标签。以上 2 种形式更多的是从功能角度出发，侧重分类和索引功能。2. 标签组件在设计侧更讲求标签的信息传递及表现形式。AntDesign、TDesign 等 Web 端规范都有专门的 Tag 组件，可以看出主要有 3 个作用——标记、分类和选择。标签需要表达什么？在移动端产品中，标签通常出现在“发现”、“推荐”页面，或者搜索结果页面中。通过简单精炼的表达方式，在有限的空间辅助信息表达，让用户可以更多维度地了解内容，引起用户注意并激发用户兴趣。所以标签所表达的内容至关重要，主要包括以下 3 个信息方向。1. 商品或服务特点对电商平台而言，商品、价格，服务、物流等服务环节都会影响到用户决策，因此需要尽可能地将商品及服务的价值点传递给用户。而移动端产品屏幕空间有限，需要将各类信息分层有序的展现出来。标签既可以突出商品折扣、优惠信息、服务特色吸引用户，又不会占用太多的空间，所以成为了商品展示重要的辅助信息。2. 用户行为最近我在使用支付宝在付款时，发现对方账户信息增加了”经常光顾“的辅助标签，让我可以更放心地完成付款。简单的标签可以缓解用户误操作的焦虑，增强安全感。而在腾讯云手机端登录时，增加了“上次登录”的标签，降低了多账号用户的记忆成本，带给用户更好的用户体验。同样在电商平台中，用户行为也成为了重要的标签符号，买过，订阅过、浏览过等标签可以唤醒用户的记忆，拉进商品与用户间的距离，有助于带来更好的点击量。3. 从众心理引导当用户无法决策时，从众心理会成为影响用户决策的重要因素。所以在电商平台，销量作为非常重要的排序条件单独展示，方便用户快捷操作。同样其他用户的收藏量、下单量、播放量数据也会对用户行为产生影响。因此这类信息广泛应用在标签设计中，积极引导用户点击和转化。标签设计的要点1. 精炼标签通常面积比较小，主要作为辅助或者补充信息，帮助用户更好的理解主体信息。因此需要精炼易懂，不适合展示大段内容。但是过于简单的标签，无法给用户足够的信息，容易让用户看不懂、产生疑惑。例如美团美食中的标签。“订”是什么含义呢？提前预订？订座？“买”又是什么含义呢？买单？买券？当然可能是因为我不经常使用美团，对标签有些不太理解。所以这些标签信息对我来说，也起不到传递信息的作用。2. 视觉突出由于面积比较小，标签通常会增加背景色，或者采用鲜亮的色彩、图形吸引用户的注意。但是在不同的产品中，视觉突出的方式也是不同的。我们可以通过以下 3 款产品的封面标签了解其中的微妙差异。腾讯视频采用的是固定背景色标签，标签本身成为了一种信息符号，重在表达产品视频的特性，强调突出醒目。在美团中，标签采用透明底色，信息以销量和好评率为主，作为菜品的辅助信息，更多考虑的是减少对图片造成干扰，辅助标签文本信息的传递。而在网易云音乐中，标签采用的是封面主色调作为底色，尽量与封面融为一体，减少对封面干扰，保证标签文本信息的有效传递。3. 一致性与差异化标签是需要遵循一致性还是差异性呢？不同的平台给出了截然不同的答案。在淘宝中，标签基本是固定在同一色系中，采用相近的视觉形式。当然首单优惠、次日达等重点服务特性则采用了明显的差异化表现形式。另外电商平台中的广告标签，更多是满足政策法规的要求，不得已而为之，因此相比价格优惠等利益点标签，明显被弱化了。而在京东中，不同类型的标签具有明显的差异化，整体形式、颜色都不一样，力求通过差异化辅助标签信息的传递。大家是如何看待标签的一致性和差异化的呢？欢迎大家评论区留言讨论~以上就是我对标签的一点思考，今天的分享到此结束。超多案例！10 个底部标签栏的设计技巧本期黑马哥将会给大家分享 10 个关于底部标签栏设计的优秀案例，开启你对底部标签栏设计的不同认知。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/tag-design
用户 信息 气味 编者按：用户是怎么判断点击A链接而不是点击B链接？这个事情背后的逻辑又是怎么帮助设计师更好地设计链接？用「技巧」骗点击的「标题党」为什么是一笔不划算的买卖？信息气味理论就是这背后的答案。下面这篇文章出自用户体验/交互设计领域的权威 NNGroup，一起来看吧：互联网本质上是借助又一个的超链接连接到一起的。但是，当用户看到一堆链接和按钮的时候，他们会下意识点击哪个？答案是，「信息气味」决定用户的选择。就像美食会吸引老饕一样，「气味对」的链接会更容易吸引用户点击跳转。而「信息气味」就是「信息觅食理论」当中，最核心的概念，而这个概念非常清晰地解释了用户在网上如何同潜在的信息源进行交互，并且从中找到满足自身需求信息。简而言之，用户是怎样衡量这些链接「提供答案的可能性」，并且预测「如果跳转了那么多久能够获得答案」。那么对于信息气味，可以这样定义：信息气味是用户对于信息源的不完全估计，而评估的佐证则来源于这个信息源的外观。在网上，信息的来源通常是以网页链接的形式存在的，当用户考虑是否要点击这个链接的时候，链接所附带的标签、概述、上下文环境，甚至其他的背景信息（比如是谁推荐的），都会影响到这个信息源「散发出的气味」，这也决定这个页面是否会被用户选中，并且点击。将我们日常获取信息的方式和捕猎觅食来进行对比把。比如说，获取食物的区域是草原，那么觅食者（比如人类）在提枪打猎之前，还会考虑到一些额外的因素（比如之前狩猎失败的经历），即便这次要捕猎的猎物非常吸引人，也有可能因为之前的经历而感觉艰难，甚至会认为此次狩猎是不成功。通常而言，信息气味通常会涉及到四个概念：「实际来源」(网页或者草原)，「实际外观」（猎物或者连接呈现出来的外观和气味）。然后，就是它的「实际价值」（直到获取之后才能判断出猎物或者网页的实际价值）以及「预估价值」(事先评估预测的价值，并由此决定是否要点击或者狩猎)。接下来，我们详细剖析一下每个因素。构成信息气味的要素我们之前已经看到的，信息气味大体上由2部分构成：「用户看到的部分」（页面上已经给出的信息）和「用户已知的信息」。前者很大程度上是又设计师所直接决定的，而后者则由设计师在过去借助品牌和其他因素来塑造「感知价值」，借此间接控制。用户可见的部分链接标签文本这应该是信息气味当中哦功能最重要的部分了，链接的标签文本应该足够清晰明确，如果名称过于晦涩和模糊，用户可能会错过一个优质的信息来源。如果这个文本，和用户的目标高度相关，那么对于用户而言它的信息气味就足够高，用户也有很大可能性点击它。如果它用了目标受众不理解的词汇，那么它的信息气味会变低，这也是为什么我们有必要规避行话、属于和过于复杂的词汇，并且为所有的用户提供足够易于理解的提示。上面是思科的网站，其中的标题就是一个标准的反面案例，NGFW 代表了下一代防火墙，是思科对于自家防火墙技术的别称，AnyConnect 则是一种 VPN 服务，Duo 则是一种多因素身份验证服务……注释：在 UX 设计当中，我们会使用「这个标签信息气味低」这个表述来描述某个链接的标签文本，让人很难猜出其背后的内容到底是什么。而当一个链接的标签文本可以较为清晰地表述其背后的内容的时候，会使用「链接信息气味很高」这样的描述。不过这个表述是有针对性的，看同一篇文章的用户可能会有不同的目标和需求，对于一部分用户有较高信息气味的链接，可能对于另外一部分用户而言，信息气味很低。但是无论如何，一个好的标签文本的描述总是相对准确有价值的，它至少帮助用户规避了问题，不至于点击链接之后感到失望。链接的附带内容通常，链接总会附带一个简短的说明或者摘要文本和缩略图 ，它们存在的目的是向用户更加全面地展示。即使用户可能不会阅读全部的文本，但是依然可以在快速的扫读过程中，了解到其中的信息和线索，而这些附带的内容就是增加链接信息气味的组成部分。这意味着2件事情：1、文章的摘要文本应当能够传达出链接背后文章的要点，能够辅助链接传递信息。糟糕的摘要内容对于网站而言，是浪费位置，对于用户而言是浪费时间，因为网站无法正确向用户传达文章的价值。正如你在上面思科网站的案例中看到的，摘要内容对于晦涩的标题链接毫无帮助。2、与链接相关联的图片内容应该是具有描述性的，能够传达链接背后文章的属性、类别、内容。很多网站会选择与网站内容关联性较低的图片。比如 utterhealth.org 网站所选取的图片和内容就是低关联度的，仅仅具有装饰性。当然，即使选择了相关的图片，也不总能达到效果，因为这还存在一个相关度的问题。这一问题可以追溯到 1970 年代 Eleanor Rosch 的研究。比如，鸡属于鸟类，但是使用鸡来作为一篇鸟类文章的标题，效果不如使用知更鸟的图片，因为知更鸟的图片更容易让人联想到整个鸟类。因此，在选取图片素材的时候，不要将美观和方便作为唯一标准。在 Costco.com 的网站上，咖啡和甜味剂这个分类所用的图片，不具备代表性，所以除非用户使用搜索引擎或者恰巧看到，才有可能找到这个类别的产品。链接所在的上下文环境通常，页面中的内容会影响用户的感知方式。比如，当你正在寻找「圣诞节餐具」相关的内容，那么当这个词出现在 HarryandDavid.com 和 Williams-Sonoma.com 这两个网站上的时候，你会发现在 Williams-Sonoma.com 上，这些链接内容的信息气味会明显更浓郁一些，因为页面上不仅能够知道这些关键词，而且能够找到其他圣诞相关的物品。相比之下，HarryandDavid.com 的信息气味明显会低很多。在 HarryandDavid.com 这个网站上，从页面文本/链接到图片内容，都使得圣诞餐具相关的信息气味较低。相反在 Williams-Sonoma.com 上，各种图片和链接都围绕着餐具，明显信息气味会更浓郁。尽管上下文环境是一个强有力的提示，但是设计师经常会过分依赖它，从而带来一些别的错误。特别是在小屏幕上，上下文环境不总是可见的，有的时候可能是用户页面滚动太快，或者被别的元素盖住了，因此最好还是老老实实的做好分类和链接标签文本，而不是靠上下文环境来提供提示。在移动端上， Williams-Sonoma.com 的分类标签相对更难找到「圣诞节」的词，可见的上下问环境要比桌面端差很多，而 HarryandDavid.com 则使用了「圣诞礼物」这样的词汇，更方便用户找到相关类别。另外一个常见的错误，则是没能及时提供上下文提示。我们经常能看到网站的着陆页没有文字，就一张超大的图片，也许其中包含了高相关的信息，但是较少的文本使得绝大多数这类页面很难让用户觉得自己走在正确的道路上。所以用户不再费心寻找信息，觉得页面没有探索的价值，然后做出决策——直接离开页面。PosturePillow 这个着陆页确实有公司的名称和 LOGO，图片和产品（枕头）也确实高度相关，但是对于用户而言，这些信息是远远不够的，用户过来甚至不知道要点击哪里。上下文环境的影响还和位置相关，比如侧边栏上显示的信息通常会更容易被忽略——用户很清楚侧边栏上出现的图文有大概率是广告，因此即使在侧边栏上提供有效信息，依然可能会失去相关度。用户知道的部分信息气味的另外一个组成部分，是用户对于这个品牌过去的认知的积累——无论是用户亲身经历的、看过的内容，还是通过网络了解的到，抑或是借助朋友口耳相传听闻的信息。和直接看到的信息不同，这部分属于先验知识：熟悉品牌并信任它。如果您已经了解 Williams Sonoma 并且之前可能和这个品牌进行过互动，比如买过东西，那么即使没有其他的上下文信息，你也将能轻松理解其网站上的「圣诞节」代表什么产品。又或者，如果您过去用过思科的产品，并且有过很好的体验，那么你可以明白点击的链接的含义，即使链接标签的描述性不是很强。熟悉这一领域。如果有本科生去申请大学，那么他可能知道所谓的通用数据集的（其中包含大学发布的有关每年入学本科生的统计数据——详细说明考试成绩范围、GPA 以及不同的录取标准等），而这些信息通常位于大学网站的托管金融相关信息的部分。所以，对于那些熟悉这套体系的人而言，比如财务副校长办公室的链接标签，可能具有很高的信息气味，但对于第一次听说公共数据集的人来说，这个链接名称可能没有太大的意义。通用数据集包含有关录取新生的 统计数据以及有关录取标准的信息，通常托管在大学网站的财务部分，如上面加州大学伯克利分校（顶部）和加州理工学院（底部）的网站所示。但是，对大学招生一无所知的人将无法获得此类背景信息。社会觅食理论：口耳相传和推荐的逻辑社会觅食理论是信息觅食理论的延伸，它解释了人际关系网络如何协作，人们是如何获取信息的。这些人际关系网络可以是有组织的（比如科学家借助网络社区或者论坛在一起研究相同的问题）或临时的（比如维基百科的内容贡献者、亚马逊产品评论区的评论者、协作标记系统上的标记者）。这个理论探讨的是，当人们寻找信息或与信息进行交互的时候，他们会为其他人留下关于各种信息源的痕迹，这些痕迹能有效地增加其他用户的信息气味。假定你正在亚马逊上寻找直发器，你选择一个用户评论并且通读了整篇，然后有个评论说，这种直发器很好，但不如另一种。然后你返回搜索结果页，然后搜索第二个产品的信息，通常会让您倾向于点击它并将它纳入考虑范围内，即使它比第一个更昂贵。那是因为该产品现在带有额外的信息气味，而这种信息气味是由第一个直发器的评论者提供的。为何时间一久点击诱饵就失效了现在你已经了解了信息气味各个不同组成部分，你可能会想通过游戏来吸引用户访问网站，即使这可能并不完全适合用户的需求。（这种方法通常是在点击量这类等虚荣指标驱动下产生的）也许你手头有一篇无聊的文章，然后打算想一个与实际内容不匹配、但是蹭了流量的有趣标题。这种方法从长远来看可能是适得其反的。这种方式骗到的点击量，从长远来看，消耗的是用户的信任。是的，你会得到你的点击，但与此同时，你会耗尽访问者的信任。这就像狼来了的故事一样。用户被一次又一次地欺骗，学乖了。更糟糕的是，有的用户甚至没有亲身「被骗」，但是他们可能在别的评论里面看到抱怨，这意味着这个链接在他们身上甚至骗不到一次点击。另一方面，如果品牌足够强大，用户足够信任，就有更多的犯错空间（但是其实空间本身也不大，因为犯错是一定会侵蚀品牌价值，甚至一次犯错就能葬送整个品牌）。但是基本上，如果你能提高用户对于网站内容的期望，同时借助标签文本、图像来辅助内容，并且网站确实有他们想要的东西……那么起码用户会偶尔对于网站内容的不足予以原谅。延伸阅读：从 4 个角度，聊聊长尾效应是如何帮助产品进行提升的编者按：长尾效应不是一个陌生的词汇。阅读文章 > Facebook 被上亿人指责的背后，可能是因为坎贝尔定律编者按：从 KPI 到 北极星指标，设计和产品团队都非常着迷这种杀手级关键性指标。阅读文章 > 资深设计师是怎样用「帕累托原则」做设计决策的？编者按：这篇文章出自设计和用户体验设计机构 NNGroup，作者为 Evan Sunwall，主要探讨的是「帕累托原则」也就是我们所熟悉的 80/20 原则。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/information-scent
用户 香味 信息 谈到访谈，社恐人士就会有些犯怵，照着提纲问问题访谈过程无比干涩，信息分析的时候总觉得获得的信息不够。而社牛人士觉得不就是聊天问问题嘛，但光聊天能拿到我们想要的信息吗？怎么保证我们通过访谈获得的信息是有效的呢？以下有几点小技巧，帮助我们在访谈过程中能拿到更完整、真实的信息。而且不只是用在用户访谈，沟通需求的时候用起来也能达到奇效哦。怎么在访谈中拿到更完整的信息1. 适当沉默当我们日常生活中沟通聊天时，最怕突然的沉默。这种沉默往往会成为压力迫使大家尽快找到话题打破安静。但是在访谈中却不尽然。当你抛出一个问题，用户回答之后你可以先不着急继续问问题。因为用户也不知道自己应该回答到什么程度，所以有的时候他只是做了简单的回答试探下你。如果用户停顿后你很快接话用户认为对你来说刚刚的信息已经足够了，他可能还有更多的信息就不用说了。但是如果你还在沉默，用户会理解为你还在等他更多的回答，想了解更多，也会再继续表达。即使他刚刚说完了，也会进一步表达会重新阐述自己的意思。当然这个技巧在一次访谈中不能过多使用，不然会给用户造成整个过程很不舒服的感受。2. 同一个问题，多次追问同样的，因为用户不知道需要回答多少内容，可能只是简单的给出一部分回答。在一些非常很重要的问题上，用户如果给出了一些回答之后，为了保证我们获取的信息是完整的，我们可以再追问是否还有其它的，可以多追问几次。问：您喜欢这个产品的哪些地方？答：独立包装不错。以前的我都需要重新拿袋子装好怕染色问：还有吗？答：它的样子包装也比其它的好看一些。3. 了解事件，而非片段当我们在于用户沟通的时候，尽量让用户还原事件的完整经过，了解了事情的来龙去脉前因后果后才能够完整串联用户的行为、知道发生了什么事情导致用户会有这样的行为，后续又导致了什么，再从中我们能挖掘出用户的需求和痛点答：我养了猫，之前铲猫屎会比较臭，但是用了那个产品之后我觉得还行。它可能能掩盖一定气味。问：你家猫砂盆是放到厕所里的嘛 ？能给我完整讲讲您是怎么铲猫砂，怎么使用这个产品的吗？答：我家的猫砂是放到外面。但是我每天会铲，拿到厕所铲，直接冲到马桶里然后冲下去。之前会有点味道，但是用了这个产品之后味道会好一点。但是因为是直接倒进去的，所以多多少少会沾到，需要多冲几次才会把所有的猫砂下去。4. 关键词语，明确含义访谈过程中用户提到的一些核心概念，比如名词、形容词一定要有定义。因为经常会发生用户用的名词和我们想的是不一致的，不要想当然的以为用户表达的就是你心里想的。重要的名词、形容词要和用户进一步确认用户表达的是什么意思。这个技巧在工作聊需求的时候也可以用哦。答：这个味道像香皂，这个像洗衣液，这个就有点像果冻问：你说果冻是什么意思呢答：就是闻起来有点甜腻，感觉这种味道就不是给你很干净的感觉。香皂啊、洗衣液啊这种就给你很干净的感觉。5. 借助对比，引导更多有的时候一些问题直接抛给用户用户很难回答，比如问用户 XX 产品哪里好。这个时候我们可以通过对比的方式，让用户判断对其它类似产品的态度想法，能帮助获得对用户而言哪些是关键的，哪些是不重要的。问：我这边准备了几款类似的产品，想看看你对这些产品的态度。第一种是针管式的，用针管打进去，手不用贴那么近。答：这我觉得长度会稍微好一点，但是我还是我觉得这种东西不能一次性用完，那个东西我还要放在那里，其实有点诡异。问：这个是消臭元（你滴一滴可以除臭的），这个是悬挂球，这个是固体清新剂，这几个产品你会比较喜欢哪个啊答：我会比较喜欢消臭元，使用起来很方便，不会觉得很脏。悬挂球也不行，也是离马桶很近。怎么在访谈中拿到更真实的信息1. 交叉验证，横向对比用户有时候讲出来的观点也不一定是经过深思熟虑的，这就需要访谈员的一些辅助，帮助用户整理思路，找到最核心最重要的信息。比如用户讲了一个观点，我们可以反向询问用户有没有例外，是不是所有的情况下都是这样的。如果存在例外或者反例，我们就可以深入挖掘为什么会存在这个反例。和原先的观点是否冲突，还是一种补充。问：那在香味方面你会有追求嘛？答：香味我个人觉得很香的东西只是把气味盖住，而不是清除。所以我个人对香味没有追求。而且太浓我会觉得很不舒服问：那你有因为香味购买过一些厕所清洁产品嘛？当时是什么一个情形？答：还真的有过，之前被小红书上的一个生活博主种草了一个消臭元，主要是因为当时他说味道不浓，闻起来是很自然的味道。2. 前后矛盾，温柔提出疑问有的时候，你会发现用户的前后观点、行为有矛盾的。有的书说，不要挑战用户，但是在实战中我发现是可以点出来的。但是，一定要注意你的措辞，不要让用户觉得自己被挑战。而是虚心请教、疑惑的语气。问：我有个比较好奇的地方啊，你刚才说对香味其实是没有追求的。但是在刚才几款产品中你最喜欢的还是消臭元，这个地方是不是有点矛盾呢？答：我主要还是从使用角度来考虑的，操作起来比较方便，其它几个离马桶都太近的问：那固体清新剂呢答：因为我可能不需要长期的这种香味吧，如果有需要的时候可以滴一滴，比如我铲猫砂的时候。平时没有问题也不需要香味3. 现场总结和向用户求证在一个很重要的问题访谈完之后，可以将用户前面表达的内容和观点进行总结和向用户求证是不是正确，是不是完整。问：所以听下来您家里马桶清洁最主要的还是让它保持干净就好了，因为无论是清洁剂还是清洁块你最关注的都是这个。答：对的问：那在香味方面你会有追求嘛？答：香味我个人觉得很香的东西只是把气味盖住，而不是清除。所以我个人对香味没有追求。而且太浓我会觉得很不舒服。以上几点小技巧无论是在访谈中，还是在工作聊需求的过程中都可以使用，大家可以试起来。更多访谈技巧：从多次实战中，总结了用户访谈的 8 个小技巧去年被调到了新的专业产品线，为了更快的熟悉新产品，了解用户的目标和使用场景，做出更好的设计。阅读文章 > 从3个方面，帮你做一份更好的用户访谈在这篇文章中，我将带你一步一步地学习如何准备、执行和分享成功的用户访谈：如何列出访谈必要问题？阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/8-user-interview-techniques
状态 信息 产品 缺省状态属于交互的边缘状态，很容易被忽略，造成设计不完整。为了保证设计完整性，对缺省状态进行整理很有必要，以免缺漏。大纲：缺省状态的出现原因和分类缺省状态的组成缺省状态的视觉样式组件化与复用缺省状态的出现原因和分类UI 界面上展示的信息可大致分为固定信息和动态信息两类。所谓固定信息是指，不需要请求服务器的信息类型，例如底部标签栏的图标是以切片的形式存在于安装包中，总是可见。而动态信息是会随场景变化的，如下拉刷新操作一般都伴随着信息的实时更新，这类信息就属于动态信息。以请求服务器是否成功为依据，缺省状态主要分类两大类：请求失败：网络环境原因 或 设备原因请求成功：数据正常且为空 或 数据异常其中，数据正常且为空的状态，我们习惯性称其为空状态。除了空状态之外的其他缺省状态，可以认为是异常状态。缺省状态的组成不同场景、不同产品，缺省页组成都可能不同。为了便于讨论，拿电商产品的搜索无结果为例进行分析。从组成上来看，淘宝和小红书进行了状态说明：根据当前关键词，无搜索结果，提示用户可以尝试更换关键词。而京东将状态提示压缩在很小的区域范围内，一句文案简单表意，使用了绝大多数屏幕空间来推荐其他商品。造作除了商品推荐之外，提供了行为引导。不同的形式有不同的目标侧重，从体验的角度上来讲，淘宝和小红书状态更加清晰明确。而推荐商品更大程度上是为了促成交易。产品层面，空状态也有可以发挥的空间，主要是引导用户行为和推荐相关内容。行为引导，目的是让用户快速熟悉产品并产生使用记录，增加粘性。内容推荐，不论是电商推荐商品或者社交平台推荐人，都是增加用户和产品之间联系的一个很好手段。缺省状态的视觉样式缺省状态的视觉表达样式有多种，不同的表达形式体现了不同的产品调性。从简约克制到丰富的情感化表达，也是逐渐增加视觉元素的过程。组件化与复用当业务模块众多时，可能涉及到的空状态和异常状态对应的具体页面数量巨大，将所有情况遍历、梳理、归类为 n 种类型，再进行统一设计，不仅节约设计成本，更可以使产品群整体性更强，进一步突出专业性和品牌感。以下是有道词典的案例。结语：尽管缺省状态是边缘状态，但是很好体现了产品的质感、特性和细节，值得仔细打磨。更多设计缺省页的方法：本篇来源：优设网原文地址：https://www.uisdc.com/the-default-design
潜台词 用户 信息 在设计工作中，我常常会听到各种各样对于设计的建议，包括但不限于：“这个页面的感觉不太对”“需要再加一些氛围感”“这段信息有点干”这些问题就像五颜六色的黑一样让人难以捉摸。本文尝试从另一个角度观察这些看似捉摸不定的问题，和大家一起聊聊“潜台词”在 UI 设计中的作用。文章提纲：为什么思考设计中的潜台词何为设计中的潜台词潜台词的作用写在最后为什么思考设计中的潜台词我对潜台词的思考起源于“微信游戏名片”的设计 —— 微信游戏名片是在游戏 app 中展示玩家游戏信息的名片，让玩家可以在不同的游戏中查看其他人的微信游戏信息，以此来方便玩家间的社交活动。当时的设计采用了和微信客户端风格一致的设计语言，强化微信的渠道认知，界面的信息结构也简单清晰。但是，这个设计在上线后却没能得到很好的反馈：有用户说感觉太生硬，像小广告；有用户表示正在玩游戏的时候不想点开这个东西。为什么简单清晰的设计会有问题，这让我开始思考：我们在做设计的时候是不是漏了些什么？想要知道漏了什么，就要搞清楚 UI 设计是在设计什么。UI 设计是在设计什么，从书上和网络资料上不难得到如下的回答：设计信息的包装与排布设计是整理信息的艺术设计的本质是交流，也就是信息的交换…其中绕不开的一个词就是“信息“。“信息”是视觉设计最基础的元素，设计师通过整合文字、照片、声音等信息，来吸引用户的注意力，让用户更轻松地注意到页面里的核心内容。我发现很多时候，除了文字、照片等直观可读的信息之外，用户的注意力常常会被其他东西吸引，我觉得可以把它们归纳为 —— UI 中的潜台词。何为设计中的潜台词在工业设计界很早就有类似“物品潜台词”的讨论，比如大家都很熟悉的唐·诺曼说过：物品能够表现出两种示能 (affordance)，一是物件实际上承担的物理特质，二是使用者察觉到物件的提示性特质。…这里的提示性特质，也就是物品所传达出的潜台词。举两个例子，都来自深泽直人的设计：左图没有任何文字说明也能让人知道这是一瓶香蕉汁，因为它就画成香蕉的样子，传递出“这是一瓶香蕉汁”的提示性。右图是一盏台灯，使用者会自然而然把钥匙、手表等随身小物件在灯的底座上，因为底座的造型像一个托盘，传递出“可以盛放小物件”的提示性。就像物品的信息可以分“物理特质”和“提示性特质”，我觉得 UI 设计中的信息也可以用同样的维度分为“直接信息”和“潜台词信息”。设计师通过颜色、形状、图案、质感等手法构建出视觉的潜台词，以此来营造氛围、唤起用户情绪、或者引发用户的回忆和思考。潜台词的作用这里主要想探讨我在日常工作中感受到的潜台词的三个作用：传递隐藏信息、建立情感连接、减少认知成本。1. 传递隐藏信息回到前文提到的微信游戏名片，通过潜台词的角度看这个界面，发现头部几款游戏的界面大多是暗色风格，潜台词就像是在说：开始专注的玩耍吧。想要给玩家带来一种专注、沉浸的心流体验。而游戏名片的设计明亮清晰，潜台词是高效冷静的平台功能。两者之间潜台词的差异，可能就是用户觉得奇怪的原因。若想要玩家的心流体验不被扰乱，就需要让名片传递与游戏 UI 连贯的视觉潜台词。因此我添加了通用的游戏元素点缀，并且将卡片整体改为暗色模式，得到了新版游戏名片的设计。如下是新旧两个方案的对比，新的游戏名片通过传递和游戏主页面一致的潜台词（专注、沉浸），减弱了突兀的插入感，兼容大部分的游戏风格，让玩家在游玩和社交的过渡中有更连贯的体验。从这个项目中可以看到，潜台词会传递隐藏的信息，对这些潜台词信息加以运用，可以让体验路径更加流畅。2. 建立情感连接这里的案例是游戏礼品站的设计 —— 礼品站是一个支持玩家之间赠送游戏道具和游戏周边的小程序。在负责礼品站设计的时候，产品经理常常会问这样一个问题：这个页面能不能更有氛围感？什么是氛围感？这问题就像五颜六色的黑一样难以琢磨。从潜台词的角度来看，问题似乎简单了一些：就是在传达“直接信息”之余，通过视觉语言传递给用户更多的情感信息。那么我就有了一个相对明确的设计目标：通过视觉潜台词让用户情感升温。第一步，梳理页面，寻找发力点情感升温不是让所有页面都大红大紫，我们需要梳理礼品站的使用路径，找到设计切入点。按承载的情感浓度，礼品站的页面可以分为以效率优先的工具页面，还有赠送礼物等用来完成用户情感传递的页面。后者显然是完成情感化设计的关键。以下是旧版本主要页面的截图，我以最核心的“拆礼物”页面入手设计。第二步，挖掘情感连接，完成潜台词的传递回到现实生活，我们会怎样去包装礼物？不会是包个塑料袋就把礼物放进去，但也不是一层又一层过分精致的包装。我觉得好包装是恰如其分的，在表达我的心意同时，不让对方觉得简陋或者太繁琐华而不实。简单整洁的礼盒加上写着我心意的卡片往往是不错的选择。我尝试把“礼盒”和“卡片”抽象成 UI 元素，礼盒表达送礼的行为，写着双方名字的卡片连接了两个人的关系，把这两个核心元素放在页面里，就得到了新的「拆礼物」页面。就像前面提到的那瓶深泽直人的香蕉汁，即便不看界面文字，也知道是这个头像的朋友送了我一份有心的礼物。最后一步，利用曝光效应统一视觉语言确定礼盒这个情感象征后，我拓展了三种不同维度的图形表现：扁平、微拟物、强拟物。在不同页面采用不同重量感的图形，利用曝光效应，让“礼盒”“卡片”的视觉元素在礼品站各个页面反复出现，以此让用户对礼品站产生记忆点。小结一下，通过挖掘核心的情感元素来传递潜台词，可以放大用户间的情感连接，增强用户代入感，进而让送礼行为物有所值。3. 减少认知成本这里以“和平精英赛季战报”为例，在和平精英 S12 赛季结束时我们制作了一期赛季战报，用来回顾玩家在这个赛季的精彩表现。在设计和平精英赛季战报时，面临的挑战是：如何用更加直观简明的方式来表达复杂的游戏数据，进而产生分享欲望。同样从潜台词的角度思考这个问题，可以通过视觉潜台词将冰冷的赛季数据类比成用户熟悉的事物，用熟悉事物的潜台词来解释陌生的数据，以此来方便用户认知。比如在赛季总击杀人数的页面中，为了能直观展示玩家在这个赛季击杀的总人数，我们找到了“楼层高度”这个现实中被人熟知的概念来具像化游戏数据，用盒子堆起来的高度等于“几层楼”来替换击杀人数，凸显击败的人很多。（在和平精英的游戏中，被消灭的玩家会变成一个存放装备的小木盒）在最后的分享卡片中，为了更明显地展示玩家的实力水平，采用了游戏玩家们耳熟能详的装备等级颜色体系：灰色代表普通、绿色代表优秀，蓝色代表稀有，紫色代表史诗，金色代表传说。通过不同的颜色在游戏语境中表示不同等级的潜台词，区分出不同分享卡片的稀有程度，以此来展现玩家在这个赛季的综合游戏表现。小结一下这个案例：当我们要解释一个陌生概念的时候，可以把它具象成用户熟悉的事物，用熟悉的潜台词来唤起用户的记忆，以此来加快用户的认知。以上就是我常常用到的潜台词的三个作用：写在最后思考设计中可能暗含的潜台词，可以帮助我们用更多的维度来看待界面中的信息。有时候，最精简的界面并不一定才是最好的，运用图形、颜色等设计手段更直观地描绘页面故事，传递出准确的视觉潜台词，也许能够帮助我们更好的和用户沟通。最后，我尝试回答最开始困扰我的那个疑惑：为什么简单清晰的设计会有问题？目前我能给到的答案是：我们追求的“简单”并不是图形排布的简单，是用户感知的简单。设计不只是建立秩序，而是用有限的资源给人更美好的感受和体验。本篇来源：优设网原文地址：https://www.uisdc.com/ui-design-subtex
张大湿
飞翔的企鹅
表哥
