用户 创意 又到年底了，想必大家开始在朋友圈和微博中陆续看到各种各样的年度盘点报告。QQ 是很多人在用的社交产品，今年也推出了年终盘点活动，帮用户回忆这一年在 QQ 上发生的事。活动创意揭秘每场年终盘点活动都是一个故事，今年我们给大家讲述的是一个年度社交形象的故事。我们从大家的交友情况、交友习惯、自我表达、影响力四个方面，提炼总结出大家 2021 年的整体社交关键词和 QQ 形象，以构成大家在 QQ 上的年度社交形象。整场年度盘点活动从年度社交形象的悬念引入，四个维度的信息为主内容，以提炼总结出的年度社交形象作为谜底及故事的升华。Part1 揭秘活动内容——值得回忆的社交信息在回忆 2021 年的社交信息前，首页通过 QQ 聊天对话的形式制造社交形象悬念，并通过发送消息的动画形式将大家引入活动内容。在值得回忆的信息上，我们在交友情况、交友习惯、自我表达、影响力四个维度上，盘点了一些大家可能关心、平时难以获知、且安全的信息内容。在交友情况上，我们主要盘点了好友数的变化、交友圈、热聊好友数这三部分能体现大家的交友状态、广度以及深度的信息。交友习惯上，我们盘点的是在手机 QQ 上的活跃时间段，不同的时间段会有不同的展示。自我表达和影响力上，为覆盖更多人，我们提取了空间说说发表量，以及空间访客量。同时也加入了点赞最多的说说、访问你空间最多的人，这些可能给大家带来正能量的信息。Part 2 揭秘活动谜底 ——丰富的年度社交形象每一场年终盘点活动，大家最期待的还是产品对自己一年信息的提炼和总结，希望在里面看到不一样或是未发现的自我，并希望能将其分享给好友们。每个用户都是有差异的，为了凸显大家的差异性，让大家有更多的机会分享，此次我们根据大家四个维度的总体情况设定了：不同的年度社交形象不同的社交标签此外，我们还根据大家参与活动的顺序，给予了对应的参与顺序编号，如第 10 个参与活动的人编号是 No.10。在 QQ 形象设计上，我们根据不同的社交关键词进行了不一样的设计，包括样式、材质、颜色等，这些不一样的设计在隐藏款上尤为突出。例如针对社交关键词“一呼百应 KOL”，此社交关键词形容的是人气高，是众人的焦点，为了体现这种超高人气，QQ 形象通体采用透明材质，并在内部放置了很多不同的体现开心的黄脸表情。在隐藏款“自带光环的主角”的设计上，我们希望传递出受人瞩目的光感，结合我们的生活，光线经过玻璃后，通过不断折射反射，能很好的传递出多彩和绚丽感觉，所以这款 QQ 形象通体采用了玻璃材质，强化和传递出受人瞩目的主角光环。隐藏款之外，其他很多 QQ 形象我们也会根据社交关键词进行不一样的设计。以上只是本次活动的一部分的年度形象，还有更多的隐藏款以及其他的一些款式等待大家去发掘～，欢迎还没有参与活动的朋友们进入 QQ，搜索“社交形象”，或扫码体验。也欢迎大家截图后分享至微博超话#qq2021 年度社交形象#，一起围观其他人的年度形象故事。欢迎关注作者微信公众号：「腾讯ISUX」
用户 页面 入口 本文是关于签到功能的视觉汇总分析。签到体系分析1. 定义：吸引用户定时访问产品，通过点击某个按钮或访问某个页面表明自己使用了该产品或功能。当用户完成签到，会被给予奖励以强化用户行为，从而提高用户粘性。常见名称为“签到”、“打卡”，或者根据具体场景，命名为“喂养小鸡”、“收取能量”等。2. 目标：用户目标：获得实际利益。实际获益=签到奖励-签到成本，奖励可分为物质奖励和精神奖励两类；产品目标：实现“签到-奖励-连接活动-分享-拉新-强化行为”的正向循环；商业目标：通过签到来增加用户访问，提升产品活跃度，进而提高产品的商业价值（广告投放、服务付费等）。3. 体验核心：给用户提供足够高的价值感知；尽可能降低用户需要付出的时间和操作成本，实现用户利益感知最大化。4. 签到方式：手动签到：用户主动点击具体控件，完成签到操作。是最常见的签到方式。自动签到：用户登录产品，即累计一次签到。是最简易的签到方式，存在感较低。互动签到：用户在若干个连续的步骤引导下，完成签到操作。复杂性高，对应趣味性也要高，否则无法支撑用户的操作成本。5. 签到周期：每日签到：每日完成签到任务，获得奖励。连续签到：确定固定周期（一周、双周、一月等），用户在固定周期内，不可断签，完成签到，获得奖励。累计签到：确定时间段（双周、一月等），用户在该时间段内签到，可以断签，只要累计次数满足要求，即可获得奖励。混合签到：用户以每日签到的形式获得奖励，同时在周期内，奖励有阶梯型提高。6. 签到适用范围：适用于：以内容为驱动的产品类型，如社区、电商、资讯类产品，签到的存在提升了用户打开产品的频率，对于养成用户使用习惯有积极作用。不适用于：以效率、功能为驱动的产品类型，如天气、翻译、笔记类产品。这些产品对应用户的刚性需求，一旦用户没有需求，签到行为和产品属性无法形成关联。此时用户得到的奖励不足以抵消用户的操作成本。7. 涉及到的设计元素：签到入口：通向签到页面的入口，一般有固定的安置位置，贴合用户认知，减少操作成本。签到引导弹窗：可直接在弹窗上完成签到，或者点击弹窗跳转签到页。签到页面签到周期：7 天为一个周期，不允许断签。奖励梯度递增，增加吸引；沉没成本，损失厌恶。更常见，规则简单，目的性强，路径短。日历签到：以日历形式记录签到，允许断签，累计到一定签到数量后，获得额外收益。成就感。签到成功弹窗无需用户点击某一具体按钮，直接进入签到页后直接弹出，降低用户操作成本。需要用户点击签到按钮，跳出弹窗，示意签到成功。签到成功弹窗的意义：给用户正反馈。告知用户当前收益，提示用户未来收益预期。签到设计1. 签到入口签到入口是将用户引导至签到页面的控件，一般有固定的位置。常见的入口位置有以下几种：首页左上角首页导航栏右侧首页频道入口搜索框个人中心页面独立模块签到入口除了位置不同，示意方式也有不同，常见的示意方式分为 5 类：签到图标签到图标+文字红包图标动效IP 情感化需要注意的一点：部分签到入口有两种状态，未签到和已签到。最好可以明确区分两者。2. 签到引导弹窗根据签到的触发方式，自动签到一般使用弹窗的形式承载内容，信息较为简单。手动签到常需要用完整页面承载内容。自动签到弹窗和引导签到弹窗的区别在于：前者在弹窗主动跳出之后，无需操作，即算为当日完成签到，而后者意将用户引导至签到页面，如用户直接关闭弹窗，不计为签到成功。虽然此类弹窗都是主动跳出，前者重点在于引导用户参与活动，而不是签到本身。最常见的签到流程：从签到入口进入签到页面签到（点击按钮）签到反馈（成功弹窗）已签到状态3. 签到页面以上两种方式均可设置不同奖励梯度，进度条式更加着重于“连续”的感觉，而卡片式更加强调第七天的奖励特别丰厚。两者本质相同，卡片式可以更充分展示每天具体的激励内容。月历式签到，显然周期更长。若设定为连续签到，用户需要花费大量时间，此时奖励必须具有强烈吸引力，往往是物质型奖励。通过“采摘”的形式，进行签到。签到奖励为“盒花”，即虚拟货币，可以在商城抵扣现金。除了签到之外，还可以通过做任务等方式获得盒花。此类签到往往趣味性很强。将签到和任务融合到游戏生态中，通过精彩的视觉表现，强化了激励。点击引导用户点击按钮，方可完成签到，点击引导是有必要的。「第一次」进入签到页时，需要提供新手引导，提示点击何处。「固定引导」则出现在每次进入签到页面时，按钮动效或者手势提示，都是不错的方案。3. 成功反馈弹窗当用户点击签到按钮后，产品给出反馈。反馈的形式有以下几种：toast弹窗不清楚什么是 Toast ？看这篇就懂了：本篇来源：优设网原文地址：https://www.uisdc.com/check-in-function-design
潜台词 用户 信息 在设计工作中，我常常会听到各种各样对于设计的建议，包括但不限于：“这个页面的感觉不太对”“需要再加一些氛围感”“这段信息有点干”这些问题就像五颜六色的黑一样让人难以捉摸。本文尝试从另一个角度观察这些看似捉摸不定的问题，和大家一起聊聊“潜台词”在 UI 设计中的作用。文章提纲：为什么思考设计中的潜台词何为设计中的潜台词潜台词的作用写在最后为什么思考设计中的潜台词我对潜台词的思考起源于“微信游戏名片”的设计 —— 微信游戏名片是在游戏 app 中展示玩家游戏信息的名片，让玩家可以在不同的游戏中查看其他人的微信游戏信息，以此来方便玩家间的社交活动。当时的设计采用了和微信客户端风格一致的设计语言，强化微信的渠道认知，界面的信息结构也简单清晰。但是，这个设计在上线后却没能得到很好的反馈：有用户说感觉太生硬，像小广告；有用户表示正在玩游戏的时候不想点开这个东西。为什么简单清晰的设计会有问题，这让我开始思考：我们在做设计的时候是不是漏了些什么？想要知道漏了什么，就要搞清楚 UI 设计是在设计什么。UI 设计是在设计什么，从书上和网络资料上不难得到如下的回答：设计信息的包装与排布设计是整理信息的艺术设计的本质是交流，也就是信息的交换…其中绕不开的一个词就是“信息“。“信息”是视觉设计最基础的元素，设计师通过整合文字、照片、声音等信息，来吸引用户的注意力，让用户更轻松地注意到页面里的核心内容。我发现很多时候，除了文字、照片等直观可读的信息之外，用户的注意力常常会被其他东西吸引，我觉得可以把它们归纳为 —— UI 中的潜台词。何为设计中的潜台词在工业设计界很早就有类似“物品潜台词”的讨论，比如大家都很熟悉的唐·诺曼说过：物品能够表现出两种示能 (affordance)，一是物件实际上承担的物理特质，二是使用者察觉到物件的提示性特质。…这里的提示性特质，也就是物品所传达出的潜台词。举两个例子，都来自深泽直人的设计：左图没有任何文字说明也能让人知道这是一瓶香蕉汁，因为它就画成香蕉的样子，传递出“这是一瓶香蕉汁”的提示性。右图是一盏台灯，使用者会自然而然把钥匙、手表等随身小物件在灯的底座上，因为底座的造型像一个托盘，传递出“可以盛放小物件”的提示性。就像物品的信息可以分“物理特质”和“提示性特质”，我觉得 UI 设计中的信息也可以用同样的维度分为“直接信息”和“潜台词信息”。设计师通过颜色、形状、图案、质感等手法构建出视觉的潜台词，以此来营造氛围、唤起用户情绪、或者引发用户的回忆和思考。潜台词的作用这里主要想探讨我在日常工作中感受到的潜台词的三个作用：传递隐藏信息、建立情感连接、减少认知成本。1. 传递隐藏信息回到前文提到的微信游戏名片，通过潜台词的角度看这个界面，发现头部几款游戏的界面大多是暗色风格，潜台词就像是在说：开始专注的玩耍吧。想要给玩家带来一种专注、沉浸的心流体验。而游戏名片的设计明亮清晰，潜台词是高效冷静的平台功能。两者之间潜台词的差异，可能就是用户觉得奇怪的原因。若想要玩家的心流体验不被扰乱，就需要让名片传递与游戏 UI 连贯的视觉潜台词。因此我添加了通用的游戏元素点缀，并且将卡片整体改为暗色模式，得到了新版游戏名片的设计。如下是新旧两个方案的对比，新的游戏名片通过传递和游戏主页面一致的潜台词（专注、沉浸），减弱了突兀的插入感，兼容大部分的游戏风格，让玩家在游玩和社交的过渡中有更连贯的体验。从这个项目中可以看到，潜台词会传递隐藏的信息，对这些潜台词信息加以运用，可以让体验路径更加流畅。2. 建立情感连接这里的案例是游戏礼品站的设计 —— 礼品站是一个支持玩家之间赠送游戏道具和游戏周边的小程序。在负责礼品站设计的时候，产品经理常常会问这样一个问题：这个页面能不能更有氛围感？什么是氛围感？这问题就像五颜六色的黑一样难以琢磨。从潜台词的角度来看，问题似乎简单了一些：就是在传达“直接信息”之余，通过视觉语言传递给用户更多的情感信息。那么我就有了一个相对明确的设计目标：通过视觉潜台词让用户情感升温。第一步，梳理页面，寻找发力点情感升温不是让所有页面都大红大紫，我们需要梳理礼品站的使用路径，找到设计切入点。按承载的情感浓度，礼品站的页面可以分为以效率优先的工具页面，还有赠送礼物等用来完成用户情感传递的页面。后者显然是完成情感化设计的关键。以下是旧版本主要页面的截图，我以最核心的“拆礼物”页面入手设计。第二步，挖掘情感连接，完成潜台词的传递回到现实生活，我们会怎样去包装礼物？不会是包个塑料袋就把礼物放进去，但也不是一层又一层过分精致的包装。我觉得好包装是恰如其分的，在表达我的心意同时，不让对方觉得简陋或者太繁琐华而不实。简单整洁的礼盒加上写着我心意的卡片往往是不错的选择。我尝试把“礼盒”和“卡片”抽象成 UI 元素，礼盒表达送礼的行为，写着双方名字的卡片连接了两个人的关系，把这两个核心元素放在页面里，就得到了新的「拆礼物」页面。就像前面提到的那瓶深泽直人的香蕉汁，即便不看界面文字，也知道是这个头像的朋友送了我一份有心的礼物。最后一步，利用曝光效应统一视觉语言确定礼盒这个情感象征后，我拓展了三种不同维度的图形表现：扁平、微拟物、强拟物。在不同页面采用不同重量感的图形，利用曝光效应，让“礼盒”“卡片”的视觉元素在礼品站各个页面反复出现，以此让用户对礼品站产生记忆点。小结一下，通过挖掘核心的情感元素来传递潜台词，可以放大用户间的情感连接，增强用户代入感，进而让送礼行为物有所值。3. 减少认知成本这里以“和平精英赛季战报”为例，在和平精英 S12 赛季结束时我们制作了一期赛季战报，用来回顾玩家在这个赛季的精彩表现。在设计和平精英赛季战报时，面临的挑战是：如何用更加直观简明的方式来表达复杂的游戏数据，进而产生分享欲望。同样从潜台词的角度思考这个问题，可以通过视觉潜台词将冰冷的赛季数据类比成用户熟悉的事物，用熟悉事物的潜台词来解释陌生的数据，以此来方便用户认知。比如在赛季总击杀人数的页面中，为了能直观展示玩家在这个赛季击杀的总人数，我们找到了“楼层高度”这个现实中被人熟知的概念来具像化游戏数据，用盒子堆起来的高度等于“几层楼”来替换击杀人数，凸显击败的人很多。（在和平精英的游戏中，被消灭的玩家会变成一个存放装备的小木盒）在最后的分享卡片中，为了更明显地展示玩家的实力水平，采用了游戏玩家们耳熟能详的装备等级颜色体系：灰色代表普通、绿色代表优秀，蓝色代表稀有，紫色代表史诗，金色代表传说。通过不同的颜色在游戏语境中表示不同等级的潜台词，区分出不同分享卡片的稀有程度，以此来展现玩家在这个赛季的综合游戏表现。小结一下这个案例：当我们要解释一个陌生概念的时候，可以把它具象成用户熟悉的事物，用熟悉的潜台词来唤起用户的记忆，以此来加快用户的认知。以上就是我常常用到的潜台词的三个作用：写在最后思考设计中可能暗含的潜台词，可以帮助我们用更多的维度来看待界面中的信息。有时候，最精简的界面并不一定才是最好的，运用图形、颜色等设计手段更直观地描绘页面故事，传递出准确的视觉潜台词，也许能够帮助我们更好的和用户沟通。最后，我尝试回答最开始困扰我的那个疑惑：为什么简单清晰的设计会有问题？目前我能给到的答案是：我们追求的“简单”并不是图形排布的简单，是用户感知的简单。设计不只是建立秩序，而是用有限的资源给人更美好的感受和体验。本篇来源：优设网原文地址：https://www.uisdc.com/ui-design-subtex
用户 图标 功能 项目背景近些年，WPS 组件页在完善基础功能的同时，增加了许多新功能。新功能的持续增多，虽然满足了用户更广泛的需求，但也使界面中的功能入口越来越多，一定程度上增加了用户的认知负担。在日常使用 WPS Office 办公时，图标是用户接触最频繁的界面元素之一。它通过更直观、轻松的阅读体验来指导用户的操作行为，从而有效提高产品的易用性。为此，我们以 “让用户更高效地完成工作” 为目标，用了大半年的时间，完成了 WPS Office 组件页 3000 个功能图标的视觉升级。WPS 改版案例合集：升级过程本文将从圈定核心范围、正确处理表意、制定协作模式和适应不同场景等几个方面来详细阐述我们对组件页功能图标视觉升级的全过程。紧密结合数据，圈定核心范围面对数量如此庞大的功能图标，我们必须从中找到最核心的一批图标重点突破。如果能快速确定核心图标的视觉风格，其他图标也能由此展开快速推进。为此，我们找到了产品同学，详细了解了功能的使用情况。 我们计算了 3 月份 PC 端三大组件功能区各个功能的日均点击次数，从高到低排序，得到了点击排名前 50 的功能。为了更直观地体现排序情况，我们制作了表格：根据排序情况，我们圈定了点击量 Top50 功能的图标作为核心图标，重点围绕这批图标进行了设计和优化。深入理解功能，正确处理表意确定了核心图标之后，我们又开始了新的思考。用户能否清晰地理解图标的含义？用户能否快速找到自己想要的功能？带着这些疑问，我们进行了深入的研讨。1. 如何正确处理表意？要想正确处理表意，必须深入理解功能。我们针对核心功能进行了反复地体验与透彻地研究，确保大家都能准确理解这个功能是什么、有什么作用，从而明确、统一了图标的表达形式和重点元素。除了结合自身深刻的理解，我们也找了同类产品进行对比，力争寻找出最符合用户认知的图形表达方案。2. 如何正确验证表意？功能图标产出后，我们积极邀请产品同学进行审核，针对有争议的图标，我们进行了充分地讨论，并结合双方的要求输出优化方案。同时，我们也通过用户访谈的方式去访问公司里的同事，观察他们的反应、操作过程以及操作结束后的反馈，最终选择了更能快速传达这个功能的图标。反复打磨推敲，制定协作模式我们需要绘制将近 3000 个功能图标。为了应对如此庞大的工作量，组内提出了协作绘制的方案，确保能在规定时间内完成目标。这个项目是我们首次使用多人协作的工作模式。在实施过程中，我们遇到了例如绘制流程不规范、项目进度难把握、质量标准难统一等诸多问题。为了解决这些问题，我们实施了 3 个措施。1. 制定流程为了更好地协作绘制图标，我们制定了规范化的流程。这个流程可以帮助我们严格管控好每一环节，规范好每一步，让每一位同学都能快速上手，了解绘制图标的工序，规范地展开工作，最终完成图标绘制任务。2. 专人统筹我们以小组为单位，根据各组人数分配不同数量的图标，并结合各组所负责的业务发放对应的图标。图标绘制工作是列入到各组的需求安排里，以业务需求去安排人员和交付时间。考虑到各组人员紧缺与业务繁重的情况，我们有专门的统筹人把这 3000 个图标进行分批处理和分发，按批次定量绘制图标，减少堆积压力。作为统筹人，需要跟进各组图标分配情况、沟通协调、绘制进度、绘制指引、质量把控等多个事项。同时，也要做到定时收集反馈和提出优化建议，逐步完善多人协作绘制图标的模式，确保图标绘制项目如期完成。3. 严格控质为后续产出的图标达到一个专业的水平。我们制定了一套系统的 2021 版图标绘制规范，解决现存图标绘制表意不清晰、风格不统一、体量不一致等问题。通过严格规范图标的绘制，能够让大家绘制出来的图标质量是符合标准的。每一批图标绘制完成后，都需要自行进行图标设计自查。各组自查没问题就会统一交付到统筹人，再一遍又一遍审核，如遇不通过图标，将通知返稿直到调整通过才算是绘制完成。套色技术支持，适应不同场景图标绘制完成后，还剩下最关键的一步 —— 套色。WPS 2021 的功能图标需要兼容四大组件（WPS、WPP、ET、PDF）、适配深浅色皮肤和个性皮肤、同时还要尽量降低资源包大小，因此图标的适应性对于我们来说是个很大的问题，此时就需要用套色来解决。套色的原理是通过修改 SVG 图标文件中的代码来修改图标的颜色。设计只需要对输出的图标文件进行颜色标记，然后研发再通过这些标记替换颜色，实现图标颜色的变化。目前，这种套色方式已经在组内试验完成并在各个业务的图标绘制工作中进行了推广。套色给我们的工作提供了很大的便利，主要体现在 3 个方面：这个套色工具我们命名为「Style Icon」。通过这个套色工具，我们实现了不同主题皮肤的兼容，这是落地后的部分皮肤界面效果。后续如果有更多的皮肤需要适配，都能很好的适应。总结在设计层面，经历了不同阶段的探索和优化，我们逐渐找到了设计上需要关注的平衡，例如创新与易用的平衡、认知与行为的平衡、用户习惯的平衡等。平衡好这些，会为我们的产品迭代提供很好的指引。在协作层面，第一次使用多人协作的模式，快速完成了 3000 个 图标的绘制，并取得了预期成效。在持续不断的图标迭代上，还会面临越来越多的挑战。我们将继续完善多人协作模式，并将这种模式运用到更多项目中去。在套色工具层面，为了让一套图标适应到不同的场景，是我们一直以来的难题。 如今，设计研究的套色工具就可以完美解决了，这对于我们来说，是非常大的突破，也是设计价值体现之一。感谢阅读！本篇来源：优设网原文地址：https://www.uisdc.com/wps-3000-icon-redesign
表哥
飞翔的企鹅
落霞与孤鹜
