用户 机制 游戏 给大家直接盘点一下常用的游戏化机制，及每类机制下面常用的游戏化元素。这些机制及元素如果利用恰到好处，可以增强你的游戏化设计感，吸引更多的用户且深度参与。只要用户投入了时间、精力、情感或金钱，会更重视正向反馈的获取。机制 1：纲要式的指引（General）1. 新手引导（On-boarding/Tutorials）对于用户来说可以是活动指引，员工来说可以是「入职指引」，通过自助式的核心内容提炼及重点介绍，帮助用户快速了解你想要传达的信息。2. 路标（Signposting）哪怕是最熟悉“套路”的参与用户也需要指向正确的方向。指示下一步行动，以帮助其顺利完成游戏化进程的新手阶段。必要时给予“提醒”来帮助进行不下去的用户。3. 损失厌恶（Loss Aversion）人都是风险厌恶的，害怕失去地位、朋友、积分、成就、财产、进步等。可以设计一些低门槛机制让用户容易获取某些激励，后续在参与过程中，通过紧迫感的提示，引导用户更深度的参与到游戏化进程中来。4. 进度/反馈（Progress/Feedback）进度和反馈有多种形式：倒计时、完成任务进度条、积分获取进度条….许多游戏化设计中都有使用。所有用户都需要某种进度或反馈的衡量标准，这是用户获得即时反馈最直接的方式。5. 主题（Theme）给你的游戏化一个主题，通常与游戏化的话题相关。可以是任何内容，从公司价值观到打游戏。主题描述的浅显易懂很重要，屏阅时代，我们需要确保用户能够快速理解它。6. 叙事/故事（Narrative / Story）机制是死的，用户是活的。机制和流程固化以后，用户往往不会按照你预先设定的环节思考和推进。我们可以在大型的游戏化设计前，通过一些用户访谈，观察用户对于你的计划的理解，并尝试用户通俗易懂的方式表达出来，以激发更多用户的好奇心，愿意参与进来。7. 好奇心（Curiosity ）好奇心是一种强大的力量，也是马斯洛需求层次理论中描述的、人的高层次需求之一。在游戏化设计中，并非所有事情都必须解释得清清楚楚，一点点神秘感可能会鼓励用户朝着新的方向前进。8. 紧迫感（Time Pressure）充分使用时间的为例，让用户产生必须要在限定时间内行动起来，为的是让用户专注问题，及缩短决策时间。9. （资源）稀缺性（Scarcity）一些大部分用户获取不了的，但非常有价值的、高逼格的，能够让用户有意愿分享转发的资源，可以让游戏化计划的裂变更成功。10. 话题引导（Strategy）使用话题聚集用户，让用户思考在计划中应该做什么、为什么这样做以及它如何影响游戏化的结果。11. 门槛设置恰到好处（Flow）使用户感知的挑战和其参与游戏化计划的技能水平恰到好处，能让用户跃跃欲试。12. 结果反馈（Consequences）如果用户做了一个动作，会有什么后果？计划的设计需要及时的给用户一个结果反馈。例如：用户是否失去了他们赢得的积分或物品？13. 投资（Investment）当人们投入时间、精力、情感或金钱时，他们会更加重视结果。机制 2：奖励机制（Rewards）14. 随机奖励（Random Rewards）用意想不到的奖励给用户带来惊喜和喜悦。让他们保持警惕，甚至可能让他们微笑。15. 固定奖励（Fixed Rewards）根据定义的行动和事件奖励用户。每一次的活动、升级、进步对用户都是一种即时反馈，能够激励用户更深入的参与计划进程。16. 时间相关奖励（Time Dependent Rewards）在特定时间（生日等）发生或仅在设定的时间段内可用（例如：每天签到、每天打开以获得奖励）的事件。用户完成以后获取相应奖励。机制 3：社交需要（Social）17. 团队（Teams）设立一定的机制，让人们基于某个 UGC 主题建立团队。小团体可能比大团体更有效。一些社区会尝试创建协作平台，为后续基于团队的游戏化计划设计做铺垫。18. 社交网络（Social Network）允许用户通过易于使用且可便捷访问的社交网络进行联系和社交，让更多的用户参与进来，与其他人一起玩比自己玩更有趣。19. 社会地位（Social Status）地位可以提高人的知名度，创造建立新关系的机会。它也可以让人感觉良好。游戏化设计者可以利用反馈机制（例如：排行榜、证书、勋章等），让用户在社区内感知到其社会地位，提升其对社区的粘性。20. 社交探索（Social Discovery）根据一些基础标签，例如：兴趣、地位、话题等，让用户能够很便捷的找到或匹配到志同道合的人，能够有利于 UGC 的生成。21. 社交压力（Social Pressure）80%的人都有从众心理。在社区中，需要找到并包装标杆用户，并鼓励其他人像这些标杆用户一样成长。但不要把标杆用户包装得比大众用户高几个维度，「高半格」往往能够让用户摸得着、看得到，且有动力往这个方向进化。22. 竞赛（Competition）竞争让人们有机会向他人证明自己。它可以是赢得奖励的一种方式，但也可以是新友谊和关系诞生的地方。机制 4：探索精神（Free Spirit）23. 探索（Exploration）人都是有探索的心态。请为发挥用户的探索精神提供移动和探索的空间。需要考虑用户在什么条件下、场景下更希望探索到一些东西。24. 分支选择（Branching Choices）让用户感知到有自主选择参与的权力。所以一些复杂的游戏化设计中，都会设定不同的路径供用户最终达成目标。25. 彩蛋关卡（Easter Eggs）彩蛋关卡是一种有趣的方式，可以奖励和惊喜环顾四周的用户。对于某些人来说，越难找到，就越令人兴奋！26. 可解锁/稀有内容（Unlockable / Rare Content）通过为探索精神提供可解锁或稀有的内容来增加自我表达和价值的感觉。27. 创意工具（Creativity Tools）允许人们创建自己的内容并表达自己。工具可以是为了个人利益、娱乐或帮助其他人（教材、级别、装备、常见问题解答等）。28. 个性化（Customisation）为人们提供定制体验的工具。从虚拟形象到虚拟场景，让用户表达自己并选择他们将如何向他人展示自己。机制 5：成就达成（Achievment）29. 挑战（Challenges）挑战有助于保持人们的兴趣，测试他们的知识并允许他们应用它。克服挑战会让人们觉得他们已经获得了成就。30. 证书（Certificates）不同于一般的奖励和奖杯，证书是掌握和成就的物理象征。它们承载着意义、地位并且很有用。31. 学习/新技能（Learning / New Skills）有什么比学习新东西更好的方法来达到精通呢？为您的用户提供学习和扩展的机会。32. 任务（Quests）任务为用户提供了一个固定的目标。通常由一系列相互关联的挑战组成，成就感倍增。33. 级别/进展（Levels / Progression）级别和目标有助于映射用户在系统中的进展。用户查看下一步可以去哪里与查看去过的地方一样重要。34. 终极挑战（Boss Battles）终极挑战是一个机会，可以巩固用户在一个里程碑挑战中所学和掌握的一切。通常标志着里程碑式计划的结束 – 以及新旅程的开始。机制 6：乐善好施（Philanthropists）35. 意义/目的（Meaning / Purpose）一些周期比较长的游戏化计划，需要让用户感知其正在做的事情的含义或目的，以提升其参与的使命感。36. 关怀（Care-taking）为管理员、版主、策展人等创建角色。允许用户扮演家长或者 NPC 的角色。37. 使用权（Access）访问系统中的更多功能可以为用户提供更多帮助他人和做出贡献的方式。这也有助于让用户感到受到重视。38. 收藏与交易（Collect & Trade）许多用户都有收集东西的习惯。为用户提供一种在系统中收集和交易物品的方法。帮助建立关系和目标感和价值感。39. 送礼/分享（Gifting / Sharing）系统设计需要允许向其他人赠送或分享物品，以帮助他们实现目标。虽然是一种利他主义，但互惠的潜力可以成为强大的动力。40. 知识分享（Sharing Knowledge）对于某些人来说，通过与他人分享知识来帮助他人就是对自己的奖励。培养人们回答问题和教导他人的能力是一种提升平台粘性的手段。机制 7：干扰机制（Disruptor）41. 创新平台（Innovation Platform）颠覆者跳出系统的框框和界限思考。给他们一种引导这种方式的方法，平台就可以产生伟大的创新。42. 投票 / 声音（Voting / Voice）给用户一个声音，让他们知道它正在被听到。如果每个人都在同一认知层次上，改变和优化就会容易得多。43. 开发工具（Development Tools）通过一些研发设计维度的思考，将系统进行适度的调整，让用户的 UGC 贡献集中在开发新的附加组件来改进和构建系统。44. 匿名（Anonymity）如果想鼓励完全自由和无拘无束，请允许用户保持匿名。但值得警惕的是，可能会招来许多负面言论，需要做好防攻击措施。45. 轻触（Light Touch）虽然社区中必须有规则，但如果在某一时段鼓励破坏，有限度的应用这个机制，同时观察用户对待这个事情的开发，保持警惕并听取用户的反馈。46. 无序状态（Anarchy）当企业遇到了产品创新瓶颈，或者组织管理瓶颈时，可以考虑举办简短的“无规则”活动。观察大家在无序中做出了怎样的改变，并分析这个进程，说不定会有意想不到的收获。机制 8：激励手段（Inspiring）47. 积分/经验积分 (XP)积分和 XP 是反馈机制。可以跟踪进度，也可以用作解锁新事物的一种方式。基于成就或期望行为的奖励。48. 实物奖励/奖品（Physical Rewards / Prizes）实物奖励和奖品可以促进大量活动，如果使用得当，可以创造参与度。小心促进数量而不是质量。49. 排行榜/阶梯（Leaderboards / Ladders）排行榜有不同的风格，最常见的是相对的或绝对的。通常用于向人们展示他们如何与他人进行比较，以便其他人可以看到他们。但这个激励并不适合所有人，例如一些希望更多人参与进来的活动，排行榜会放大超级用户与一般用户的差距，让大众用户没有意愿再继续参与。50. 徽章/成就（Badges / Achievements）徽章和成就是一种反馈形式。将它们奖励给取得成就的人。明智地以有意义的方式使用它们，使它们更受赞赏。51. 虚拟经济（Virtual Economy）创建虚拟经济并允许人们将虚拟货币用于购买真实或虚拟商品。52. 彩票/机会游戏（Lottery / Game of Chance）彩票和机会游戏是一种无需用户付出努力即可赢得奖励的方式。一般用于低成本获客，吸引泛流量关注。翻阅一篇论文后，我发现「游戏化设计」的真正玩法（附案例）前言今天想跟大家聊聊如何实现一款好的游戏化作品。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/gamification-mechanism
创伤 用户 人群 原文引自 Airbnb Design 上的一篇文章 Designing for crisis：5 learnings from developing trauma-informed products。自全球疫情肆虐以来，各行各业都受到了严重影响，而前线医护人员更是首当其冲承受了巨大压力。在这篇文章中，针对长期与病毒抗争的医护人员以及临时住宿提供者，Airbnb 的团队的体验设计主管 Annie 介绍了他们团队的认知与思考。本文不仅阐述了对创伤知情这一领域的理解，更是包含了他们如何将这一医学概念运用到具体设计之中的方法。文中提及的方法论可以运用到其他很多相似场景，其中蕴含的人文关怀也同样值得我们深思。本文主要介绍了 5 项创伤知情设计准则，即：安全：优先考虑并保护用户心理健康；透明：提供当下及后续的充实而准确的信息；选择权：尊重个人尊严和能动性；互惠：通过协作或共享决策来建立伙伴关系；平等：认识到创伤对被边缘化人群的影响尤为严重。自疫情爆发以来，我们可以说是度过了漫长的一年。在美国，尽管疫苗姗姗来迟，但人们还是渐渐看到了希望。然而对于医疗工作者来说，如此长时间奋战在前线依然是一件非常不容易的事。正如一篇题为《新冠疫情期间医护人员的疲惫：从一所大型重症监护病房吸取的教训》的论文描写的那样，休斯顿卫理公会医院的研究人员们亲眼目睹了这一情形：“新型冠状病毒（COVID-19）疫情导致了抑郁症与焦虑症的全面激增，并且引发了现有精神健康问题的恶化，这对医护人员的身心健康造成了极大伤害……我们发现，由于需要在家庭责任与职业责任之间做出抉择，医护人员们在情感上承受了非常大的压力。”这些研究人员描述的正是所谓的“创伤”，即由某个痛苦经历造成的心理伤害。据药物滥用和心理健康服务管理局(SAMHSA)表示，创伤会对一个人的身体机能以及心理、身体、社会、情感或精神上的健康造成持续的负面影响。在 2020 年 3 月，我们团队和公司内其他许多成员开展了“前线留宿计划”。在这个计划中，新冠工作人员可以找到一个欢迎他们的临时住所来进行自我隔离。我们已然知道医护人员遭受了疫情的严重影响，但是社区房东们反馈他们同样也处于一个两难的境地，因为他们不仅需要权衡这件事对自己家庭的影响，还需要在自身蒙受经济损失和支持社区医护人员之间反复挣扎。那这里就有一个重要的需求：“在这一困难时期，我们可以如何关怀新冠医护人员和社区房东们呢？”在 Airbnb 团队，我们为经历这一困难时期的人们设计了许多工具。为了确保服务对象的安全和舒适，我们的设计流程也在不断地优化。我们大量借鉴了创伤知情护理原则，即一种在医药、人道主义援助和社会服务领域被广泛接受的原则。接下来，我想分享一些我们如何使用这些原则的案例，希望可以帮助其他团队在需要的时候完善用户体验。以下是 5 项创伤知情设计准则：安全优先考虑并保护用户心理健康。在通常的设计中，我们会考虑产品中的用户流失、转化和完成等指标。但一旦当我们需要为经历过创伤的人群进行设计时，优化这些指标就可能会导致不理想的体验。而一种创造心理安全感的方法就是永远都给予用户一个清晰的可以拒绝或者退出的选项。案例研究: Airbnb 的用户评价流程在此之前，灾难疏散人员和新冠工作人员得到的是与普通休闲游客相同的用户体验，其中包括了一系列五项打分和评论的提示。对于游客来说，这通常并不算是一个问题。然而我们从用户这边了解到，在困难时期，额外的操作会使人应接不暇。为了保护用户的心理健康，我们移除了原有的提示并用“反馈”替代了“评价”，同时让几乎所有的问题都变成了可选项（因此还新增了“跳过这一步”）。我们上线这个功能并没有很久，但是已经发现反馈的质量有所提升。我们发现用户在入住期间会给出更多的建议，来告诉我们哪里做得好或者哪里做的不好，这可能是之前他们并不乐意去做的。一些可能帮助你实现安全准则的方法把部分或者所有的操作变成可选的；去除不必要的提醒或推销；确保有随时可以离开的选项。透明提供当下及后续的充实而准确的信息。作为设计师，我们常常热衷于设计视觉效果杰出的方案，比如添加适量的动效，或是使用一张吸人眼球的插画。然而对于经历过危机的人来说，集中注意力和作出决定可能会更加困难，因此对乐趣和易读性进行平衡便显得尤为重要。案例研究：前线留宿计划登录页的第一个版本我们推出了前线留宿计划，希望可以帮助前线工作人员在他们工作时找到留宿的地方。我们意识到医生护士们可能会在轮班时或者在一次长期值班之后浏览这些页面，所以我们决定对信息进行简化，去除图标并分项概述程序特点，以确保信息一目了然。选择权尊重个人尊严和能动性。作为设计师，我们的工作常常就是通过简化用户体验来帮助用户做出决策（比如像 Spotify 或者 Turbotax 一样，在单一流程中优先推荐某个选择）。尽管这样做可能会有效，但是对于正在经历创伤的人群来说依然存在不足之处。因为在受创伤群体人生中的某一刻，他们可能会感觉事态超出了自己的控制，所以除了清晰说明所提供选项的意义之外，提供发挥他们能动性的机会也是非常重要的。案例研究：在 Airbnb 上注册房东资格房东们通常会在社区有迫切需要时注册 Airbnb。比如在一场自然灾害严重影响到他们的所在地区时，为那些避难家庭提供住处就会变成一种简单而有效的帮助途径。对于房东们来说，选择招待对象便是最重要的时刻之一。几年前，为了简化流程，我们曾经预选了“所有人群”选项来简化流程。然而当我们重新审视这段经历时，我们意识到这些响应了紧急需求的房东们希望对他们帮助的人有一个清晰的把控。我们也不希望他们意外在某个紧急瞬间错过了用户的请求，所以在我们的重设计过程中，我们移除了“所有人群”的选项，并使所有选项都处于未选中状态，以求给予房东们更多的控制权。一些你可以在设计中给予选择权的方法一次性展示所有的选项，避免人们后续会因为新的信息而感到不知所措；提前为接下来的步骤或操作添加预期；需要关注是否默认给用户选上某些功能或规划。互惠通过协作或共享决策来建立伙伴关系。产品团队常常是会为用户指定解决方案，而互惠原则要求我们重新审视这种心态，从一个给予者转化成一个合作者，从“为用户设计”转化成“和用户一起设计”。在从调研到落地实现的过程中，强调合作伙伴关系可以让正在经历危机的人们明白他们并不孤单。从“我可以给你三个选择” 到 “让我们一起看看这些选择”。案例研究：Airbnb 的帮助经验我们的支持团队会一直为需要 Airbnb 住宿的用户提供协助。当知道用户可能在避难时，客服们会采用创伤知情类方法来安抚他们。Amelia Savage，Airbnb 的全球业务经理称：“我们意识到用户会在我们的关系中得到治愈，此时一个自然的共同监管方式就是让他们参与所有的相关决策。”当遇到问题时，Airbnb 的客服会避免使用诸如“我可以给你三个选择”或者“这些是我可以做的”，转而关注与用户之间的伙伴关系，会说“让我们一起来看看这些选择”。这种一起做出决定的方式反复告诉用户他们并不孤单，告诉他们客服们很乐意以同伴的关系一起共事。一些建立互惠关系的方法热线是一项值得投资的东西，对于帮助危机中人群至关重要；在从调研到实施的整个产品设计过程中思考，如何体现强化和危机中的用户的合作关系。平等认识到创伤对被边缘化人群的影响尤为严重。诸如残疾人、老年人、非二元性别人群和有色人种等边缘化群体比其他人更有可能受到心理创伤。如果不为边缘化群体设计，我们就不可能做好创伤知情。为了保证被边缘化人群有一个良好的体验，我们花时间调查了自己的特权、偏见以及猜测是如何使我们的流程变得复杂而有压力的。案例研究：医疗旅行预订体验我们在 Airbnb 上服务过的人群中有一部分是去就医的。我们有 50% 的用户是首次使用 Airbnb 医疗组织的人群，他们常常因为上了年纪以及低收入而被边缘化。最开始当我们思考对寻找和预订住宿的过程进行优化时，我们不认为需要调整创建账号的部分。但是当我们的帮助团队发现在这一部分寻求帮助的请求存在小幅增长时，我们意识到自己进入了误区。事实证明，由于我们很多游客从未听说过 Airbnb，同时对软件操作也不熟悉，所以他们会认为在注册时我们希望他们选择登录邮箱。在我们重新设计的过程中，我们对搜索体验进行了简化，并且在整个流程中都增加了引导。此中我们的内容策略师 Claire 保证了所有的描述都清晰、直接且易于浏览。这一举措产生了可观的收益：当前整体的帮助请求量降低了 30%，账户创建相关的帮助量下降至 0%，并且我们收到了诸如癌症帮助社区等合作伙伴的积极反馈。一些可以实现平等的方法关注到自己的偏见和猜测；在你的产品设计过程中将边缘体验设计作为中心。如果可以的话，和那些被边缘化的人一起进行设计工作，至少要倾听并接纳他们的反馈；文案要清晰、简短、易懂；确保可访问性是设计过程的关键部分之一。形成创伤知情意味着优先考虑用户的心理安全和舒适度。作为设计师，我们已经学会了在同理心的引导下制定解决方案。尤其对于那些正在经历艰难时刻的人群，采取创伤知情设计可以增强我们的这种积极影响。在这个我们共同经历创伤的时刻，创伤知情的设计方法可能比以往任何时候都重要。以下途径可以了解更多关于创伤知情护理的知识：网站：Trauma-Informed Care Implementation Resource Center 网址：https://www.traumainformedcare.chcs.org/what-is-trauma-informed-care/书籍：Trauma Stewardship: An Everyday Guide to Caring for Self While Caring for Others by Connie Burk and Laura van Dernoot Lipsky书籍：Trauma-Sensitive Mindfulness: Practices for Safe and Transformative Healing by David A. Treleaven书籍：The Boy who was Raised as a Dog: And Other Stories from a Child Psychiatrist’s Notebook : what Traumatized Children Can Teach Us about Loss, Love, and Healing by Bruce D. Perry最初的指南由 Claire Moshenberg (首席用户体验作家)和 Meredith Hitchcock (首席体验研究员)共同创建完成。万字长文！十大设计心理学知识点全面解析人处于大自然或形色的社会中，会进行下列一系列活动。阅读文章 > 欢迎关注作者微信公众号：「We-Design」本篇来源：优设网原文地址：https://www.uisdc.com/designing-for-crisis
减法 用户 加法 在我过往的工作经历里，「创新」一直是一个很重要的标签。也是这样一种坚持，让我在上一份工作的 4 年里产出了很多创新的设计，提交了不少的专利。《IDEO，设计改变一切》中提到衡量想法是否可行的三个标准是：可行性：在可预见的未来，有可能实现功能（考虑技术可行性和实现成本）；延续性：有可能成为可持续商业模式中的一部分（符合业务的战略诉求）；需求性：对人们来说是有意义的（解决了用户的问题）；而我在评判我的设计是否良好的标准，会在以上 3 项的基础上再加上 2 项：美观性：设计出来的方案是具有审美标准的；创新性：设计具有一定的引领性和创新性。符合前 4 项，这个方案是一个合格的设计，符合「创新」，还能给人眼前一亮的感受，才符合我心里对优秀设计的定义我们作为设计师一职在一个项目制的环境里，要产生颠覆行业的创新是很难的，但是我们可以基于需求问题背后的思考，以及基于市面上现有的解决方案，提出「渐进式的创新」来做出差异化的价值。接下来我想分享一下我自己会用到的 6 个能产出创新方案的思维模式：加法创新加法创新是一种比较基础的创新。当前的产品功能不能满足用户的需求，我就增加一个，必然能满足更多用户的诉求。但是欲望是无止境的，功能的增加必然伴随着结构复杂度的提升。比如一个用户常用的功能，路径非常的深，于是就在首页增加一个快捷的入口方便用户点击，看似便利了用户，实际上破坏了产品首页的简洁性，也开启了一个「我的业务入口点击量大就应该在首页」的先河，以后再有同类的需求就很难去平衡。短期虽然能赢得不错的用户口碑，长久来看实际可能对产品的结构产生了不可逆的破坏。所以，在这里提到加法创新也是想告诫大家，在做加法的时候，一定要谨慎，考虑长远的影响。好的加法应该就像 Magic Mouse 之于传统鼠标一样，增加了各种手势交互却没有变成各种按钮的结合体（除了没有考虑人体工学）。Magic Mouse 和 罗技的 MX Master 鼠标。两个我都买过，最后我放弃了罗技的鼠标，因为这些设置的快捷键我根本记不住。减法创新做加法很简单，做减法就很难了。不同于加法对原来的东西都做保留，做减法意味着我们要去掉一些已经在线上的内容，而这些内容即使再有问题也有可能有部分用户在用。所以每一次删减都要深思熟虑，并且做出很大的决心，甚至是技术的突破。我们可以尝试从以下 3 个角度去思考产品的减法：a.步骤的减法推拉门很麻烦，所以发明了自动感应门，每次开车门需要拿钥匙，所以发明了无钥匙进入，疫情期间每次解锁 iPhone 都要摘下口罩，所以最新的 iOS 系统里增加了戴口罩也可以进行面部识别解锁的功能。我们很容易习惯生活中多余操作带来麻烦，但是设计师就是要敏锐的发现这些带来麻烦的步骤，优雅的解决他，带来全新的用户习惯。就像以前登录注册还都要先注册后登录，现在都是一键授权即可。iOS 正在 Beta 版本测试的功能，使用口罩 Face ID。但是要注意，就像我在加法创新里提到的，步骤的缩减不等于将入口外化，千万不要做了减法的同时又在别的地方做了加法。b.视觉的减法视觉的减法，简单来说就是有更多的「留白」。通过减少页面的视觉信息，让用户的视线更加聚焦，提高转化。视觉留白的好处已经是非常成熟的理论，就不多赘述了。这里倒是想说说一个让我们回忆起要有更大「留白」的方法：所谓的留白增大，其实就是元素之间的间距变大，制造更多的空间感。所以为了方便对已经做好的页面快速使用不同的间距进行对比，figma 的 auto layout 功能就特别好用啦。使用 figma 的 auto layout 功能快速调整元素间距。另外，我们很多时候会因为不断沉溺在需求中，「忘了」要去一个一个像素的调整，看看什么样的界面是最好看的。我有个办法是，每次做一个新页面前，都会在自己的素材库里找一大堆好看的设计稿放在画板的边上。倒不是说为了「借鉴」人家的界面，而是时刻提醒自己，别忘了拉大这些元素的间距，慢慢调整看看，在信息容量和视觉之间找到最佳平衡点。做设计前多找些可以不断敦促自己尝试更多排版可能性的参考。c.结构的减法结构的减法要求我们对当前的结构进行梳理，归类用户认知中一致的内容，整合到接近的位置，甚至对部分入口进行折叠。一个很好的例子就是苹果公司流产的 Airpower 充电基座（也是我一直很期待的产品）。对于用户来说，手机，手表，Airpods 才不需要带 3 个充电器，充电器就应该是统一的。苹果的 Airpower 概念图。而在界面里也是，例如 figma 等设计工具里，把创建形状都聚集在一起已经是一个共识，因为用户知道在这里能找到所有类似的形状。模式的搬运我们很多互联网的优秀设计，都是来源于现实生活。比如拟物时代的界面都和现实世界我们熟知的产品长得相似。iPhone 早年的计算器界面和迪特拉姆斯设计的 Braun ET66 计算器又比如我们的产品在等待加载的过程中，要用各种内容分散用户等待的焦虑，给予用户耐心，就像我们在饭店吃饭的时候，有的饭店会在等菜的时候给你小食，有的则给你一个沙漏让你对上菜的时间有足够的预期。不止从现实世界寻找模式，我们在做产品的时候也不应该将目光局限于同类的竞品，完全不是同类的产品也能给你一些模式的参考。比如我曾经很喜欢用效率软件管理我的生活，在使用了 Omnifocus 之后，去学习了「GTD 工作法」。最后，我把其中「清空大脑」的理念和聊天消息结构的呈现做了结合，设计出了能让消息处理更加高效的钉钉专注模式。钉钉的专注模式，通过结合下拉刷新隐藏已处理的消息，让用户更快看到未读的消息。从内容出发从内容出发要求我们从设计最终服务的人群特色，场景特色，时间特色去反推，我们的设计有什么个性化的创新可以去实现。比如 Bilibili 针对电影《沙丘》的弹幕，基于对电影主题的思考，就用了沙子的形式来表现；B 站的《沙丘》电影弹幕，细节发现来自优设细节猎人 by AmberDu 小白比如微信的情人节限定状态和 520 红包，就是针对特定的时间属性做了内容创新；微信的亲人节限时状态，细节发现来自优设细节猎人 by 洛糊糊。第一时间删除第一时间删除说的是，我们在遇到问题时，第一时间出现在脑子里的方案，不一定是最后和最好的方案，很多时候甚至就是别的竞品类似的方法。尝试去推翻这个想法，去思考「如果不这么做，还有没有别的办法和可能性」。虽然不一定要「为了不一样而不一样」，从而挑战了用户固有的习惯。但是如果都不抱着去尝试新的可能性的决心，又怎么能做出创新的设计，带来一点点设计的突破呢？劳逸结合，享受生活这一条不是一个方法，更像是一个倡议，就像前面说的，好的设计来源于现实生活。整天埋头工作，并不能保证你做出好的设计，《黑镜》编剧 Charlie Brooker 有一个很有意思的说法：“当有意识地写作时，文字就是憋不出来。文字就像蟑螂，只有在关灯后，它们才会感到自由地在厨房地板上乱窜。”试想设计师如果没看过《沙丘》，怎么会知道把弹幕做成沙子的形式，如果不过情人节，又怎么能感受到单身狗的痛，然后做成了微信状态呢。如果不够有足够的好奇心，多观察一些有趣的生活小妙招，多体验好玩的游戏，多使用好的产品，又怎么能学到好的模式呢？好了，以上 6 点，希望能帮助到你。没有灵感怎么做设计创新？收下这个方法！工作中我们设计师除了要完成产品经理或者业务方的需求，往往还希望在设计产出上能有更多的创新来体现自身的价值。阅读文章 > 欢迎关注作者微信公众号：「Minus Lab减法实验室」本篇来源：优设网原文地址：https://www.uisdc.com/innovation-design
小技巧 用户 编者按 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 8 个实用性很强的 UI 效果提升小技巧，是系列文章的十篇，原文最早发布于 marcandrew.me 。在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 8 条实用的建议，一起来看看吧！1. 尽量采用一致且同心的圆弧边角在上面的两个设计示例中， 一个嵌套的矩形的圆角半径看起来不是同心的，另一个则显得更加一致合理。在设计带有圆角的控件的时候，如果两者不是嵌套关系，那么圆角需要保持一致，确保整体视觉的统一性，如果是嵌套关系，那么需要让两者的边角是协调的「同心」的效果。这种按照比例缩小的边角更加符合现实世界的逻辑，而且能够制造出令人愉悦和谐的视觉体验，给人感知会更加精致而专业。2. 深色模式下注意高程变化对于颜色的影响在深色模式下，不要用纯黑应该已经达成共识了，尽量使用深灰色来呈现应该已经是众所周知的事情。不过当 UI 控件有互相重叠的情况发生的时候，需要注意，控件在 Z 轴的高程上存在差异的时候，要控制好深灰色的色阶深浅变化，来确保它在 UI 视觉逻辑上的合理性。在现实世界当中，元素距离你越近，一般也会距离光源越近，在视觉上颜色也应该越浅。在这种情况下，可以根据近浅远深的逻辑来控制色阶，让界面的「高程」逻辑 更加合理自恰。在深色模式下，由于颜色总体偏黑灰，这个时候几乎不需要进行任何阴影上的设计，只需要控制控件主色的色阶变化，就足以呈现出这种规律。3. 使用简短明确的文本标签来传递信息在上方的两个设计范例当中，靠下的案例使用了更加简短明确的文本来描述，简略而明确地传递了信息。如果不是要进行完整全面的解释，一般文本内容，最好在消除了可能存在的歧义之后，尽可能简短地表达，这样可以帮助用户更好地获得他们想要要的关键。4. 何时使用单选按钮，何时使用下拉菜单在上方的两个设计示例当中，一个使用了单选按钮，另一个采用了下来菜单来承载多个选项。当涉及到类似这种产品列表的选项设计时，UI 控件的选取常常会出现混乱的情况，看起来两种设计似乎都是合理，但是实际上是要分情况的。一般而言，是选用单选按钮，还是使用下拉菜单，关键的判据是「用户认知负荷」，通常当可选选项数目少于4个的时候，使用单选按钮即可，当数量超过4个的时候，使用下拉菜单来承载选项。5. 避免使用默认的阴影样式在上方的两个设计示例当中， 一个使用的是默认的黑色阴影样式，另一个则使用的是带有背景颜色倾向的阴影样式。在彩色背景上处理 UI 元素时，尽量避免使用黑色阴影，因为在现实世界当中，实际阴影效果是会受到环境颜色的影响的，如果可以的话，采用偏向背景色的阴影，能够让 UI 变得更加真实。如果你也要避免那些看起来很假的阴影，最简单的方法就是在其中混入一点背景色。6. 深色模式下的白色需要适当调暗在上方的两个设计示例当中， 一个是使用纯白色背景的通知元素，另一个具有更暗更微妙的白色背景。正如我在之前的技巧中提到的，在创建深色主题设计时永远不要选择纯黑色，因为它会影响许多用户的可用性，适当调亮黑色，能够软化强对比所造成的刺眼状况。当深色主题下需要使用白色元素的时候，类似的规则也同样适用。这个时候需要适当让白色的明度更暗，降低对比度，让用户不会因为过强对比而产生视觉频闪效果。7. 不要仅靠颜色来传达表单的错误状态上面是两个表单设计示例，一个案例仅仅使用红色边框作为错误状态警告，另一个案例则在红色边框的基础上添加了图标和说明。这个主要是可访问性的问题，不要仅仅使用颜色来向用户传达状态信息，因为如果用户存在视觉障碍，很容易漏掉错误状态的指引。始终使用图标和文本说明，来告知用户到底发生了什么错误，问题的症结在哪里，确保信息的正确传递。8. 使用占位符示例来改进表单体验在上面的两个设计示例当中， 一个使用默认占位符文本，另一个占位符则使用了贴合内容的格式。与其只使用「输入您的电子邮件」之类的占位符文本，不如提供一个真实的示例，即：「hello@marcandrew.me」，这样可以更加直观地告知用户，这个地方要填写的内容是什么格式的。下面是往期的内容：第一波！快速提升 UI 设计效果的 9 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第二波！快速提升 UI 设计效果的 14 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第三波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第四波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第五波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第六波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第七波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第九波！快速提升 UI 设计效果的 7 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/improve-ui-designs-faster-10-2
线上 流程 用户 泡泡玛特（POP MART），是成立于 2010 年的潮流文化娱乐品牌。是围绕艺术家挖掘、IP 孵化运营、消费者触达以及潮玩文化推广与培育四个领域，泡泡玛特最近几年成为潮流界的新宠。本篇文章让我们探索下，泡泡玛特线上抽盲盒流程以及如何提升产品的转化率和 GMV。内容大纲如下：线上流程线上问题设计优化如何通过盲盒设计提高转化率？我总结了实战的 7 个步骤盲盒游戏是为新房频道打造的专属特色营销玩法，一方面能够帮助平台实现用户拉新、下沉和拓展，通过游戏化活动提升趣味性和情感化感知，打造更多样化的品牌视觉；另一方面通过搭建游戏化的玩法模式，沉淀可复用的互动组件，赋能平台的其他项目，提高设计效率和产出质量。阅读文章 > 线上流程1. 排队购买当有其他人在抽该整套盲盒时，需要点击「立即排队」按钮，先排队。当没人抽盲盒时，则可以直接抽盲盒。2. 单个购买当排队到了后，点击盒子，或者点击「随机选盒」。选择盒子后通过摇一摇可以排除部分角色，点击「就选它」，完成购买。核心主流程交互界面如下：3. 盲盒切换可以左右切换，在同一系列不同盲盒套装挑选。点击「抽盒纪录」，可以到历史浏览的整套盲盒，然后进行抽盲盒。线上问题1. 排队购买泡泡玛特增加排队购买逻辑是为了复刻线下真实场景流程，然而这个复刻是不恰当的。线下有排队机制是因为场地的制约，这也就是线下单个实体店无法规模化，线上购物的优势是可同时高并发的交易，不受交易人数多的限制。买火车票飞机票线下要排队，反而在线上购买就不需要排队，线上排队没有意义，只会制约线上交易规模和转化。2. 单个购买主操作是单个购买流程，这种交互流程只会限制交易量，如果买家想一次性多买，则需要不断的进行操作，一次买一个。对于电商产品，主流程应该鼓励用户一次性买多个。核心流程应该是多选购买，这样既满足用户需求，也提升了平台交易规模。3. 盲盒切换在抽盲盒过程中，可以切换到其他套同系列的盲盒，如果切换到其他套同系列的盲盒，又不受排队限制，会出现多个人同时抽盲盒的情况。这里业务逻辑变得混乱不一致，同时数据库存有多套数据。对于盲盒，拆开之前都是未知的，切换到其他套同系列的盲盒变得毫无意义。设计优化项目背景：优化线上抽盲盒流程，在保持线下行为迁移到线上操作的同时，简化流程，提升抽盲盒完成率和 GMV。产品目标：简化现有复杂的业务流程，降低用户认知和操作负担。提升盲盒购买率和 GMV设计策略：层级对比：重要信息强化，次要信息弱化。去掉排队逻辑：线下有排队因为场地的制约，线上的优势对于大规模流量并发不会影响效率。买火车票飞机票线下要排队，在线上购买就不需要排队，线上排队没有意义，只会制约线上交易规模和转化。优化整箱盲盒展示逻辑：每个用户进来，不需要排队，一个整箱盲盒只保持当前有一个用户。其他用户分配到同系列的其他整箱盲盒。提升盲盒购买率和 GMV：简化流程，同时默认多选，提升整个盲盒购买 GMV。设计验证：抽盲盒的购买完成完成率是否提升。购买完成完成率=付款完成的 PV/进入抽盲盒详情页的 PV抽盲盒整体 GMV 是否有提升。抽盲盒核心主流程：盲盒展示逻辑：每个用户进来，不需要排队，一个整箱盲盒只保持当前有一个用户。其他用户分配到同系列的其他整箱盲盒。以上就是关于如何提升产品的转化率和 GMV 的设计优化，简单设计思路，如果你有其他想法和观点，欢迎在评论区留言。欢迎关注作者的微信公众号：「Echo的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/conversion-rate-gmv
动画 用户 数据 Hi，我是彩云。2021 年比 2020 年变得更好了吗？是的，如果我们探讨的是 UI 和 UX 设计的话。新的令人惊艳的网站和 APP 被开发出来，面向设计师的新软件得到更新和发布，创造力被进一步激发了出来。当设计师被迫待在家里时，终于能有时间去反思现有的设计并重新创造。无聊是艺术家最大的敌人，他们会尽可能地打破困局。那么，2022 年的 UI/UX 设计趋势是什么呢？看看现在的情况，我们已经可以预测未来的设计趋势，就像我们对 2021 年所做的预测一样（回头看非常准确）。在本文中，我们将发现：3D 视觉设计师的内卷将会越来越严重数据可视化的工作将变得越来越重要服务的移动化还需要做出更多努力scrollytelling 技术会越来越流行滚动已死，滚动叙事兴起旧的滚动是无聊的。如果你想吸引注意力，你就需要实现滚动叙事（scrollytelling）。（彩云注：这个技术的核心在于边滚动页面边讲故事）《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。它是一种叙事形式，可以在网页和 APP 上呈现。想象一下，在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地，你会想看到这个故事的结局。它就像一个游戏，带你穿越迷宫。虽然你不能影响它的进程，但却让你感觉自己能参与其中。2022 年，Scrollytelling 将会出现在你看到的每一个流行网站上。另一方面，scrolllytelling 让用户真正去阅读内容。你可以用动态文本让他们产生兴趣，比如谷歌的网站（https://www.google.com/search/howsearchworks/）。他们的团队知道如何让信息看起来更好:Scrollytelling 在用户向下滚动时被激活，因此得名。没有点击，没有选择的麻烦，没有弹出窗口。你似乎停留在一个地方，但通过滚动，把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果，还需要认真思考一个你想要讲述的故事情节。所以，最好的网站不可能在 2 天内建成，需要更多的时间去打磨。IAmBinadam 令人惊艳的叙述设计滚动叙事的项目通常需要大量的时间和精力。不过，这样做的结果是值得的。页面变成“活的”，每一秒都有新的事情发生，所以在阅读时很难感到无聊。那么移动端 APP 呢? Pure 是一款约会应用（彩云注，这个应用在 app store 可以搜到，推荐大家安装一个体验一下，非广告），它创造了一种我称之为“tappytelling”的故事（当你第一次点击并打开应用时，它就会被激活）:Scrollytelling 是为用户而创建的，用户很喜欢它，不需要到其他页面去阅读整个故事。相反，网页设计的整个故事都是事先考虑好的，并尽可能以最有趣的方式设计出来。用户喜欢看数据，数据可视化越来越被重视如何在 2022 年做出一个还不错的企业网站？你不会想告诉用户你是“XX 领域公认的领导者，该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。最好不要用形容词，而是用事实来说明:你有多少分支机构，在哪些城市，谁是你的客户，以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据，你需要让它不仅简单，而且有趣。数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事（Scrollytelling）紧密结合。以下是 IAmBinadam 展示数据的方式:通过去除数据集的复杂性，使信息更容易让读者感知。不同级别的数据具有不同的大小，这样用户知道应该先从哪里查看读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大，那些干净整洁的数字带来的正面影响更大。有些图表乍一看甚至不像图表，这使得它们更加能被注意到还有一种现象叫做“新冠后遗症”。这是 Covid 对公司及其员工的长期影响。根据英国国家统计局的数据，2018 年，压力和焦虑的平均得分约为 2.7/10。自新冠疫情发生以来，得分已升至 4.0/10，很少低于这一水平。同样因为大流行，在过去两年里工作量增加了 4 个小时。人们压力太大，卷的太辛苦，以至于不愿去看复杂的数据。设计师做好数据可视化，以保持人们的注意力。记住，复杂的信息通常被忽略，因为读者试图节省他们的时间，更有可能使用滚动按钮。Illustration by Mona Chalabi以下是我们推荐的一些表示数据的方式图表和曲线图插图静态信息图互动信息图Illustration by Ink Factory如何让信息图表看起来更好?一个好的图表，或者任何其他形式的数据可视化，都应该具有在 Edward Tufte 的“定量信息的可视化显示”中描述的特征。在他的书中，Tufte 通过图表解释了好图表的 3 个原则：1）展示数据的图形元素与数值总数的比值应趋向于 1。简单地说，应该删除一切不必要的元素，保持整洁。Graph by Hootsuite2）充分利用好画面空间。也就是说，需要将数据编排的更紧密。Graph by Hootsuite3）客观地描述数据。不要使用夸张的图表，可视化数据可以看起来很酷，但真实永远是更重要的。2022 年还有必要做 APP 吗？根据 We Are Social 的数据，2021 年有 52.2 亿人使用手机，约占世界人口的 66%。自 2020 年 1 月以来，手机用户数量增长了 1.8%(9300 万)，而手机联网总数量增长了 7200 万(0.9%)，到 2021 年初达到 80.2 亿。过去一年，社交媒体用户的数量增长了 13%以上。到 2021 年初，社交网络上已有近 5 亿新用户注册。根据 App Annie 的数据，Android 用户每天花在手机上的时间超过 4 小时。2020 年，安卓用户上网时长超过 3.5 万亿小时。令人印象深刻的数字，是吗？似乎到 2022 年，为产品做一个 APP 将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用？有以下几点可供评估：1）用户主要通过移动设备访问你的网站这是你应该了解的重要数据。客户和你在一起的时间越长，你就有越多的机会去吸引他们，了解他们的习惯，并给他们想要的东西。（彩云注：这就是为什么各大厂之间都在拼命抢占用户的在线时长。）2）帮助内部业务流程更加有效如果你想要提高员工的工作效率、改进工作流程或增加利润，那么就制作一个可以帮助管理业务流程的移动应用。如今，像这样的手机应用使企业能够执行越来越复杂和多样化的任务，加快日常重复操作和文档管理。3）实现一些网站上没有的新功能如果你认为 APP 能为用户打开新的触点，并让用户体验更加友好，那么它就值得考虑开发。问问自己的 APP 能提供什么新的商业机会？例如，随着疫情的蔓延，许多人开始用上健身 APP 在家里锻炼。4）竞争对手的情况要了解竞争对手在做什么，他们是否有 APP，能做什么，以及他们是否真的对用户有用。查看 App Store 和谷歌 Play 的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要，那么你就容易被甩在后面。5）复购率一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了，给他们发送一个通知就能完成，成本更低。在正确的时间提供的报价越有吸引力，人们购买的可能性就越大。出租车服务公司有回头客，他们肯定需要一个应用6）促销工具有了应用，你就不需要花钱设计和制作实体卡，客户也不需要随身带卡。将促销计划整合到 APP，并分享有用的促销信息。做原生 APP 还是移动端网站?开发手机网站比开发手机应用需要更少的工作量，这反过来可以降低整体推广成本。这部分是由于响应式设计的出现，它允许你根据打开网站的设备屏幕来调整网站。至于 APP，它们必须为许多移动平台单独编写:Android、iOS、Windows 等。一些设计师认为“前端驱动的网络体验”会是 2022 年的一个好机会，我非常同意!（彩云注：在国内，现在开发小程序的肯定越来越多了。）3D 设计具备更强竞争力我们一开始并没有将其放在首位，因为这并不是一个新的趋势，在很久以前设计师们就已经设计了很多 3D 图像和动画了。Cardi B rhymes with 3D3D 技术已经在过去流行了很多年，但它不会很快消失。此外，我们预测 3D 图形将变得更加多样化和包容。在过去的几年里，3D 艺术和动画已经出现在各种 UI 设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。3D 当然应该成为 2022 年最热门的趋势和预测之一，因为与经典动画相比，逼真的 3D 形状结合动画总是引人注目的。“从技术上讲，通过 3D 更容易传达更多内容，因为它比平面图片更接近我们的感知。3D 插图更有深度，信息量更大，也更具互动性。”许多设计师将 3D 对象无缝地“安置”在 2D 空间中。它允许创建更有趣的组合，也作为一个优秀的工作方法蕴藏着巨大的潜力。乌克兰政府网站用 3D 手模拟了黑客帝国注意一点：在整合 3D 图形等重量级内容之前，确保你的应用性能是 OK 的，能够快速加载所有元素。元宇宙风潮Meta 的 logo 既不是 2D 也不是 3D。或者两者兼而有之？这就是即将到来的 2022 年的莫比乌斯带和薛定谔的猫。Meta logo 的变化（彩云注：这个概念在去年简直不要太火，未来几年肯定还会是一个大的趋势，设计师也需要保持关注。跟着趋势走，易于放大自身价值。）混合动画越来越多的公司在网站和移动应用中使用动画，以提高用户的沉浸感和体验，使内容更有趣。动画是 2022 年重要的网页设计趋势。2022 年，如果没有它，你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和 3D 动画的结合，2D 动画和 3D 动画的结合。设计师这样做是为了获得不同寻常的风格解决方案，以及提高最终产品的质量。2022 年，动画设计将是品牌市场定位的重要组成部分，想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长，实现新想法的机会也在增加。2022 年如何使用网页动画?1）讲故事动画可以通过在界面和用户之间建立情感联系来传达信息。加载动画 Yoichi Kobayashi2）更有趣的加载用户不愿意等待，除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力，还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。3）光标效果用户可以精确地观察光标所在的位置。通过添加智能互动动画，对这个光标作出反应来探索网站。这种效果在 21 世纪初非常流行。如你所知，流行趋势往往每 20 年就会重演一次。4）动态排版你有没有想过让字母跳舞?添加角色的动画插图据 Statista 统计，2020 年全球动画市场达到了 2700 亿美元。趋势是视频，而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问，动画插图的优势是它们非常灵活和多样化。宝马历史动画这样的作品通常用于两种情况:1）用于解释视频2）电商广告动画解说的趋势出现在几年前，解说视频清楚地显示点击的位置或公司的项目是关于什么的。在招聘或商业视频中，用户更喜欢看画出来的人物，而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣，就像活着的人一样。微交互，大影响微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果：它们显示发生了什么，将导致什么操作，下一步需要做什么。图片来源 awwards动画交互将为你的设计注入活力，并有助于保持用户粘性。关注每一个细节是设计师工作的关键，因为设计中的所有元素都可以带来积极的用户体验。重要的是要达到元素的和谐，而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色，它们为界面元素增强价值。CTA animated微交互有助于页面导航，解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能，以实现特定的行为。动态 logo，加深品牌印记2022 年，在线品牌面临着新的挑战，需寻求新的解决方案，其中之一就是动画 logo 设计。图片来源 Toridori动画 logo 主要有以下几点营销优势:吸引注意力。这意味着它们有助于提高品牌知名度。有助于提高 SEO。谷歌更倾向于动态内容，带有动态图形的页面更容易吸引用户。在移动端看起来更好。丝滑的动画看起来比静态的 logo 更有趣。最重要的是展示了历史。静态 logo 背后的想法正在动画中发展。由于这一点，在几秒钟内，你可以展示品牌的使命，甚至它的价值!一家洗衣机[公司]的标志现在有很多设计模板，可以很容易地用字体制作一个动画 logo:来源 Shabello, Bobby Voeten最后的话记住，设计趋势总是在变化的，但是设计的意义不会变。如果你不能深刻理解这一点，那么任何设计趋势的文章不能帮你做好设计。独家放送！2022 年值得关注的3个前瞻设计趋势2021 虽不像 2020 那样充满魔幻，但人类还在继续抗击疫情的蔓延。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/2022-ui-ux-design-trends
用户 操作 弹出 前言产品经理：我觉得这里要加个弹窗，你去设计吧。设计师：emmm…。弹窗到底该不该加？怎么加？用什么形态展示？真正的作用是什么？这些真的是产品经理说了算吗？好的产品通常会在恰当的时间、合适的位置给出合理的反馈，弹窗也是必不可少的反馈方式，不反馈、反馈不及时或反馈不合理都会带来不好的使用体验，甚至误导用户，从而导致用户流失。很多时候，产品经理会从商业角度、公司业务、资源限制等方面考虑问题，但这些未必是用户所需要的，设计师不应该完全按照产品需求做设计，否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发，把产品需求转化成设计目标，只有经过反复的推敲、认真分析，最终才能打磨出服务于用户的弹窗设计，所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点，将自己对弹窗的理解、设计经验分享给大家，帮助大家对弹窗组件有更清晰的认识，为后续避坑设计出更好的弹窗做准备。本期大纲弹窗的基本介绍弹窗体系分类弹窗的使用场景如何设计有效的弹窗需关注的问题点总结弹窗的基本介绍1. 弹窗的定义当我们与应用产生主动或被动交互时，页面上层会弹出容器，将可承载的文本、按钮、选项、标签或表单等任一内容与之组合，就可以用来传递信息、状态反馈、引导用户等操作，这就是弹窗。弹窗的目的主要是为回应用户或让用户回应，是用户与产品间对话的一种方式，在线上各种场景中都有可能碰到，相当于产品的线上小助理。不同类型的弹窗其作用不同，但最终都是为了满足跟用户之间的友好交流。2. 弹窗组件的构成弹窗组件的样式很多，如浮层、对话框、下拉菜单、toast 等，且 iOS、Android 官方平台也都根据自身的规范对组件进行命名，不管如何称呼，其常见的弹窗组件绝大多数都是由以下元素组成：容器：作为承载弹窗的文本、图片等内容，容器必不可少，有的弹窗直接以蒙层作为容器，如toast；蒙层：为了和底层内容分离，避免信息混淆，通常会在界面上层（容器下层）设置一个不透明度为20%~60%的纯黑色蒙层。部分小型弹窗不设蒙层，但会为容器设置投影，例如筛选器的展开、下拉菜单等；文本：文本是弹窗传达信息主体的必要条件，如标题、按钮等，即便把文本融入图片，也能一目了然；图片：用于运营弹窗传达更多信息内容的方式之一，为了对用户产生更强的吸引力，还可设计成动态效果；表单：为成功进入下一步做准备，如输入密码（iOS设备下载应用前的必要步骤）。也可以是当前页面流程的分支，例如输入优惠券等；选项：条件较少的选项可使用弹窗完成，单选、复选在选项不超过6个的情况下都可使用；图标：在弱化次要操作的情况下，通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方，目的是突出主操作，鼓励用户从弹窗中进入下一步，另外还有单选、复选、提示等按钮；按钮：是进入下一步或回到上一步（去掉弹窗）的操作入口，部分应用也可以点击弹窗以外的空白区域让弹窗消失，但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。弹窗体系分类1. 模态弹窗用户在完成任务的过程中，界面会出现弹窗打断用户的操作行为，用户必须通过主动点击才可以进行下一步操作，这即是模态弹窗。模态弹窗通常能较好的获取用户的视觉焦点，并通过承载的内容、按钮主次层级来引导用户完成他们的需求，这也会根据用户、产品侧重点的不同，弹出样式也有所不同，常见的模态弹窗有对话框、动作栏、浮层…等。对话框 Dialog/Alert对话框是很常见的弹窗，主要在打断用户后并提供选项操作，对用户的干扰较大，通常会配备 1~3 个操作按钮，而且会把用户最期待的或产品最期待用户操作的按钮突出显示。对话框类型的弹窗主要分为主动、被动两种触发类型，主动弹窗：信息的二次确认、输入内容、前置条件选择、风险警示等；被动弹窗：版本更新、运营宣传、消息通知、系统功能授权等。动作栏 Actionbar动作栏是通过用户主动操作后弹出的内容信息，基本都是从底部弹出，屏幕占用比例根据内容量的多少比较随意，从小区域、半屏、再到全屏随处可见。动作栏相比对话框则能承载更多、更丰富的功能信息，在用户清晰感知当前操作及反馈的情况下，比跳转到新的页面更有安全感。浮层 Popover/Popup浮层是指用户操作某个功能/内容后，会在附近出现一个带有视觉引导性质的弹窗，最常见的浮层就是下拉菜单/弹窗等，浮动于顶层窗口并指向触发操作的位置。例如很多社交娱乐类型的应用右上角有一个“+”入口，里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层，为了与页面信息更好的区分，会给浮层容器加上投影，避免与底部信息混淆。2. 非模态弹窗相比模态弹窗，非模态弹窗属较为轻量，触发后以一种非阻碍的方式呈现，不会打断用户的当前操作，主要是给予用户即时反馈，让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作，根据反馈信息的重要程度及意愿，可在一定的时间内自动消失，也可等待用户操作后消失，常见的有以下几种：提示框 Toast/Hud用于反馈用户操作成功、警告、错误等当前状态信息，可能出现在任何位置（底部/中间/顶部），在呈现样式上，相同等级的模块统一位置、风格即可，无需用户有任何操作，出现 2s 左右自动消失。Toast 只有纯文字提示，例如格式错误、刷新成功、删除成功等；Hud 会使用文字+图标样式，例如添加到购物车、关注成功等。提示对话框 SnackbarSnackbar 早期只是 Android 系统的一种弹窗控件，后在 iOS、Web 前端都会使用到，可以看作是 toast 的加强版。一般只出现在屏幕底部，存在的时间比 toast 长，提供 0~1 个操作入口，可自动消失，也可与用户产生交互后消失或者跳转至其他页面。Snackbar 反馈的重要程度强于 toast，例如，某个应用今天有重要提醒，同时又不想影响用户的其他操作，会在用户首次进入时弹出提醒，并提供关闭操作入口，等待用户通过手动关闭（部分自动关闭），加强用户记忆。通知 Notice最有代表性的就是消息通知、系统推送，在设备未锁屏的情况下，通常从顶部弹出，停留几秒后自动消失，锁屏后，不同设备弹出的位置也有所不同。Notice 的前提是需要在应用设置中打开消息通知开关，具备应用外推送功能的，需在设备系统设置中开启通知权限。透明指示层 HUDHUD 是一种在透明元素上通过填充、反馈用户当前交互操作的指示层，实时生效，例如视频类产品中的调整音量、亮度、控制进度条等。弹窗的使用场景当我们对弹窗体系有了一定了解后，就需要清楚什么场景需要设计弹窗？用什么类型的弹窗？产品最终都是服务于用户，如果仅凭自己的主观意见乱加一通，整的花里胡哨，弹窗就成了干扰元素，很大程度上会影响用户体验。什么样的场景适合什么类型的弹窗，我们可以从以下几点来说明。1. 打断用户的操作风险警示：当用户的某种操作可能存在风险，为避免操作失误，会弹出对话框打断用户，并给予一定的风险提示引起用户的注意，让其有足够的时间确认是否真的需要进行下一步操作，如：删除、放弃福利机会、退出登录等，会弹出对话框提示操作后可能引起的后果。前置条件：部分任务在流程中设有一定的前置条件，需要满足条件才能进入下一步操作，通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出，例如下单时选择优惠券、支付方式。任务关键节点：用户在满足任务的基本条件后，需要操作一个关键步骤才能成功，则会弹出对话框让用户完成最后一步操作，例如提交订单、表单、输入支付密码等。2. 定制化弹窗这类弹窗主要从产品角度出发，不会过于在乎用户是否需要、会不会反感，都会引导或强制用户操作。例如产品发布新版本，会强制用户更新，否则将无法使用。还有各大电商 APP，在进入首页时会弹出一堆红包、优惠券，刻意将取消/关闭入口弱化，给用户返回造成一定的难度，利用突出的视觉、动态效果突出主题增加吸引力，以达到转化用户的目的。3. 二次确认二次确认也是一种打断用户的操作行为，但跟上面纯粹的打断用户相比其作用更大，主要是在用户已做好选择的情况下再次弹出确认，以免操作结果造成用户认知上的偏差。虽然从用户体验角度出发，用最少的操作、最简单的流程满足用户所需是产品追求的目标之一，但通过权和利弊之后，二次确认的出现实属迫不得已的折中方案，它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用。二次确认使用得当，可以避免用户、产品的潜在风险，但若是从主观角度一味的滥用，就成了对用户的恶意干扰、影响使用体验，导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题，所以需要从业务（用户侧、产品侧）实际角度出发，两相其害（加-影响使用体验；不加-造成一定损失）取其轻的考虑是否需要增加二次确认弹窗。当用户的某个操作可能带来不可逆转、错误严重程度较高时，例如：放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等，系统都会给予二次确认，降低用户认知偏差后，以确保用户是经过多次思考才做出的决定，即便后续给用户造成损失也不会过于降罪产品，产品也算是“问心无愧”了。4. 简单提示常见于用户操作之后的状态反馈，即便用户没有注意到，也不会造成较大的损失、或结果已经注定，相对来说成本较低，大部分出现在任务过程中的提示（可重复）和结果反馈，以确保用户知晓当前所处状态。非模态弹窗 toast 样式居多，例如加载中、操作成功、刷新结果、清除缓存等，可出现在其他类型的弹窗之后或同时存在。如何设计有效的弹窗1. 前提条件优秀的弹窗需要从视觉、交互两方面思考，视觉上简洁、易懂，交互上可操作且可控。视觉层面：首先需要做到的是易懂，这时候就非常注重文案清晰程度及按钮层级关系了，弹出的信息需能直击要害，用户看了能一目了然才是关键；其次，弹窗属于一种干扰信息的存在，设计必须简洁，在弹出时需要考虑是否会过度影响（影响是一定会有的、且看如何降低）用户的其他操作。假想我们正在玩游戏、突然来了电话全屏幕覆盖（传统来电），自己会以最快的速度挂掉电话，回到游戏中后发现自己已领“盒饭”，即便来电是多么的理所当然，但心里必定是非常不痛快的，那么，如果来电以弹窗的形式且占据屏幕很小区域（如今的来电方式）是不是就给了用户足够反应时间及缓冲时间呢？交互层面：弹出的内容及操作入口需清晰可操作，虽然有时基于业务需求，产品更希望用户能进行下一步操作而并非回到上一步，即便如此，我们也只能通过弱化次要操作以突出主要操作，用户有来去自由的权利，如果弱化至用户看不清、甚至找不到的程度，即便提供了次要操作入口，也会存在反面作用；另外需注意用户对产品的可控性，不管产品如何期望用户进入下一步转化，但不能强制，一定要给用户提供回去的路径（强制版本更新除外），否则，任性的用户可能会直接结束应用，甚至因产品过于霸道直接卸载。2. 设计目的首先，设计师应该理解产品需求，分别从用户侧（能给用户带来什么？满足什么样的需求？避免什么损失?…）、产品侧（能给产品带来什么？产品如何期望？是否合理？能得到什么样的结果？…）分析为什么要加弹窗，然后将分析的结果转化为设计目标，以确保弹窗根据不同的需求，在恰当的时间、适合的样式合理的呈现给用户。其次，在得到设计目标后，同样需要从设计侧、技术侧思考弹窗组件的一致性。从设计角度，团队所有成员需要对该组件有清晰且统一的认知，了解组件的使用场景，以确保不会错用、滥用，如果增加或更换新人设计师，很容易学习和上手，提升效率；站在技术角度，一致性的常用弹窗组件，便于开发做组件封装后续复用，减少不必要的重复工作，大大提高开发效率。3. 设计思路在 UI 设计中，组件的设计思路基本相通，旨在满足产品的实用性、视觉的统一性，主要围绕着以下几点进行：基础定义：利用清晰易懂且简短的文案描述弹窗组件的内容及目的。类型及构成：明确弹窗的类型，如模态/非模态，将其拆分并注明每个小元素的具体信息。规则用法：弹窗出现的位置、包含的具体内容及信息的展示规则，比如哪些场景可复用。交互状态：交互流程逻辑清晰，理清产品交互前、交互中、交互后如何反馈以及用户随时可能碰到的问题。需关注的问题点1. 信息的层级关系设计弹窗时需要注意信息的主次层级关系，优先传达用户想要的或产品想要让用户知道的，以确保重要的信息在第一时间传达给用户。2. 展现形式弹窗需要根据实际的场景合理使用，不能为了简洁而过分删减内容、更不能画蛇添足。例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈，而可能造成用户损失的提醒就需要刻意打断用户，给予更明确的提示甚至二次确认。例如删除内容就需要使用模态弹窗明确提醒用户，如果用非模态很可能被用户忽略从而带来不可逆的损失。3. 文案表述因弹窗本身承载内容有一定的局限性，固文案一定要简洁且精确，能用一句话说清楚的就不要过于啰嗦，不仅容器的空间有限且用户的耐心也有限，需要在有限的空间、有效的时间内清晰的表达出核心内容。4. 弹出的时机及频率针对运营弹窗，如果弹出的时间不对或过于频繁，可能会造成用户反感，所以需要把握好弹出时机及频率。例如用户有一张未使用的优惠券，如果用户每次进入应用都看到弹出提醒，确实又没有购买商品的意愿，总是被弹窗打断真的就很烦，那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用 5 次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等，总之，需要控制在大部分用户的可接受范围内。总结本篇文章主要系统的分析了弹窗组件分类及使用场景，总结的虽然不是很全面，但能让很多新手设计师清楚认知弹出组件的定义及用法。另外，弹窗不管如何设计，都需要有一个不断优化的过程，要根据产品的实际情况不断思考与打磨，通过脑暴或已知问题作出更好的改善。能清楚认知、理解、使用弹窗组件是一个成熟 UI 设计师必备的条件，当然，并不能以此定义设计师是否优秀，在此基础上，还需通过持续的学习探索，挖掘出更多技巧，不断提高自身的专业能力。从6个方面，详细拆解运营弹窗的设计要点签到提醒、会员购买引导、福利发放等场景都需要依托于弹窗为载体进行展示。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/popup-design-principle
用户 产品 家装 产品发展是有其周期性，在不同的阶段，迭代节奏和评估需求的做法也有所区别；作为设计师在不同的阶段也需要适时的调整自己的工作节奏和思考方式，更好的融入业务团队。在产品的探索初期更应关注价值验证，是否有人愿意使用，如何形成一定的用户规模；到了成长期，则应关注产品能力是否闭环，能力、服务上比竞品更有市场竞争力，进而找到用户愿意付费的模块。1. 如何确定产品方向需要验证这个方向有价值，值得投入资源。由于处在一个验证试错的阶段，产品策略上，产品经理一般使用用户故事来描述需求，推崇敏捷开发的节奏，小步快跑的迭代; 一方面是为了尽快形成能力的闭环，用户可以用起来，另外一方面为了快速验证产品方向是否正确。水电工具的立项最开始源于竞品，竞品具备了水电设计的能力，但是做的并不完善，也是在产品探索的阶段；从丰富产品矩阵，完善产品能力的角度，酷家乐也需要把这块能力补齐；从竞品的动作，可以侧面的验证这个方向可以做下去，却也没有哪一方明确知道怎么做的更厉害。2. 如何证明产品价值酷家乐平台本身就有很大的设计师流量，方便争取到用户群体，因此一开始优先围绕家装场景做了很多功能；在围绕家装场景的功能形成链路的闭环后，用户量逐步增长，有了一小部分稳定的用户群; 虽然和公司其他成熟业务存在很大差距，至少证明了价值的存在。这一阶段产品需求的迭代节奏会很快，怕被竞品超越优先抢占了市场，同时内部每天都有很多的讨论，方向总是在调整，存在很大的不确定性，整体在一个快速试错的节奏上。3. 设计价值作为设计师在其中首先是要快速了解相关的专业知识，其次和业务方保持高频的沟通，以便跟上产品的设计思路。在设计方案的输出上，遵从通用的设计原则，借鉴已有的设计模式，快速输出方案。在价值验证上主要以定性为主，用户评价主要来自定性的用户访谈、可用性测试；在商务拜访客户的时候，能够获得一些客户的正面评价，虽然目前的功能暂时不满足他们业务需求，但是非常看好产品的发展方向，以及未来对他们的赋能。结果如图所示: WAU 开始逐步提升。UV 图 (数据经过模糊处理, 仅作为展示说明使用)4. 面临的问题度过了探索期，形势仿佛一片大好，但仍然存在很多问题。用户体验欠佳，在业务导向的迭代节奏中，用户体验是要做出让步的，用户反馈效率偏低不如传统软件高效；水电本身有很强的专业性，新用户学习成本高，有学习意愿但太难学；对多数家装设计师，水电方案设计不是必要环节，从用户的留存数据上可以看到，有一部分用户在稳定的使用，但并不高频，2 次之间的使用时间间隔较长，不是刚需，也不是痛点，产品对用户的价值更属于锦上添花;除了工具内部的问题，产品面临着家装场景暂时没有挖掘出值得用户付费的进阶功能的困境，很难走向商业化。5. 小结1. 如何形成差异化的优势？此时竞品的能力也在提升，它们主打精细化的还原设计能力，贴近落地实施的场景。从模型的精细度和工具的自由度上，我们短期都无法赶超。追赶竞品短期效益很低，业务上急需寻找一个新的切入口拉开差距。通过商务拜访, 在众多潜在客户中，发现了一类新的用户场景即家电营销场景，需要快速出效果图，对于精确度和正确性要求低，通过对于该场景的需求挖掘，成功的和竞品形成了差异化局面，我们主打营销场景下的一键智能设计，快速输出设计方案，从客户角度大幅降低了对营销人员的培训成本，签入了一些企业客户。2. 如何为客户提供有价值的能力？在探索期通过为闭环家装水电设计的能力获得了一部分稳定的用户群，但活跃留存率偏低。以为家装场景已经做到尽头了; 随着对行业的深入了解，在家装设计师内部划分出了另外一类不同类型的用户。部分的家装设计师，尤其是所在企业有施工落地要求的，水电设计是必要环节，即刚需，且可以抽取出有规律的业务逻辑，嵌入产品中以达到企业提效的目的。家装企业有较强的付费意愿；同时水电工具可以还原了实际施工场景, 达到了比平面图纸更直观的效果，提供了更高的价值。3. 设计价值这一阶段依然有源源不断的需求提到业务方，但在需求评估上更加谨慎了，增加功能会考虑上下游牵扯到的流程，是否符合产品未来的规划发展。对于单个功能的数据验证，成为一个必须的动作。设计的复杂度逐渐提高，同时有 2 个类型的用户在使用同一款产品，业务从深度和广度上都在扩张。面对的场景更加多样复杂，因此会采用用户体验地图对用户的阶段目标进行罗列，对照罗列出产品触点，可视化的了解用户与产品的交互过程，便于设计师判断体验问题的优先级，说服业务方推进优化。设计度量的方式也更多种多样，定性的方法上可以进行可用性测试，满意度度量，借助用研资源发现产品问题。定量的主要通过功能埋点来观测，查看单个功能埋点的用户数据，基于用户体验地图串联多个关键节点的转化率。小团队如何做体验度量？试试这个方法！关于体验度量方法行业内案例已有一些，但普遍为较为全局，实施与结果输出成本相对较高，对一些小团队可能运用起来比较困难。阅读文章 > 用户体验地图（已模糊处理）学会这5个关键点，产出一张完整清晰的用户体验地图！前言1. 什么是用户体验地图？阅读文章 > 4. 面临的问题为了在客户所在的垂直市场有影响力，做了很多定制开发的功能，不具有通用性;功能冗余，开发了非常相似又有细微差别的产品能力，对用户的认知造成了混淆;新用户的上手成本高，用户调研中收到反馈找不到教程;由于以上多个原因导致界面框架承载不下更多功能。5. 小结文中的数据均已做模糊处理, 非真实数据，仅作为演示用途, 对数据呈现不负相应责任。大厂出品！3个方法掌握B端流程型产品设计设计B端流程型产品时，最重要的是先了解并梳理产品的业务流程与信息架构，流程状态和信息架构的设计是否合理，影响到用户的操作效率与使用体验。阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源：优设网原文地址：https://www.uisdc.com/product-design-strategy
操作 用户 组件 浮层是在页面上方展示的浮层容器，可展示文本、按钮、列表、标签、表单项等内容，在 B 端产品中有着非常广泛的应用。根据内容和作用，可以分为不同的设计组件。例如 Notification，Tooltip，Dialog 等等。这些组件都可以看作是页面空间的延展，最近在项目工作中有了一些新的思考，今天我们就来讨论下浮层组件的设计，希望大家能够有新的收获。主要内容包括以下 4 部分：浮层组件的类型浮层组件 3 个的特点几个应用案例浮层组件应用的注意事项浮层组件的类型说起浮层就离不开“模态”和“非模态”。简单的理解，“模态”就是用户必须进行交互操作的浮层，否则浮层会一直存在，并且无法进行页面功能操作。例如对话框，这种强制性保证了对话框信息的有效传递，但是对用户操作流程造成了比较强的阻断。“非模态”则不需要给出反馈，不影响用户的其他操作，没有强制性，可以说是“来去自如”。微信 PC 端图片查看功能中信息提示很好的反映了两者的差异。对于无法查看的图片，采用模态弹窗形式，提醒用户无法查看的原因，用户需要点击确定后，才能继续操作。如果查看到最后一张图片，系统采用非模态的 Notatifion 组件提醒。组件未消失时，用户也可以回看或其他操作，更加轻量化。具体到组件设计层面，浮层的类型就比较多了。例如 AntDesign 设计规范共定义了 8 种浮层组件，Element 设计规范则定义了 9 种浮层组件，增加了 Messagebox 组件，其实就是 Dialog 对话框的简易版。具体的差异感兴趣的同学可以自己去查阅一下。Ant Design设计规范Element 设计规范浮层组件的特点1. 构建独立空间，简化页面信息量浮层在一定的条件下触发展示，作为一种容器可以形成临时的内容空间。不会占据页面空间，并且可以简化页面的信息量，有助于页面的内容布局。例如常见的数据可视化展示时，重点在于图形展示，详细数据放置在浮窗中展示，从而保证了页面的可视化效果。浮窗展示空间2. 交互轻量化对于强调操作效率的 B 端产品，如非必要，需要尽量减少页面的跳转次数，实现当前页面内的流程闭环。在交互流程上，浮层组件停留在当前页面，相比页面跳转的交互方式效率更高。在触发机制上，非模态浮层可以实现悬停展示，移走消失，操作更加方便。某些信息反馈类的组件还可以自动消失，最大程度上减少了用户操作。并且非模态浮层同样可以承载按钮、选择器，表单等功能性组件，用户可以就近操作，从而提高效率。QQ浏览器设置浮窗在页面布局方面，浮层也更加灵活，可以出现在页面中间、侧边、上方、下方等各个位置，尺寸可大可小，对于不太复杂的信息都有较好的适应性。3. 实现操作的所见即所得由于非模态窗口不具有强交互性，一般不占据屏幕中间位置，更多的是跟随功能选项或者页面边缘。这就为功能操作的所见所得提供了便利性，方便用户做出操作决策。例如表格列设置功能，操作后即可实时展示操作结果。或者页面皮肤的设置，用户选择后即可预览效果，方便用户对比选择。QQ浏览器皮肤切换浮层组件的应用案例在实际使用场景中，浮层组件主要应用在信息反馈、内容展示和功能操作 3 个方向，给大家介绍几个案例。1. 预览展示，减少用户的操作成本Windows11 任务栏悬停程序图标时，显示浮窗预览当前运行的任务，通过图形化的方式，让用户更好的识别任务内容，便于用户做出选择。在淘宝 Web 端订单页面，商品在未收货状态下，物流状态就成为用户更加关心的信息，悬停显示物流最新状态，用户可以不进入详情页快速获取信息，交互上更加便捷，有效的减少了用户操作成本。2. 就近原则，快捷操作在 B 端产品中，表格信息如何快速拆分内容，查看单个数据的详情信息呢？如果采用跳转页面，或者表格按钮等形式，都无法带给用户更加流畅的操作体验。通过浮层展示功能选项，就可以实现点对点的查看信息详情。类似于操作系统的右键功能，方便快捷。同样在微信公众号编辑器中，悬停和选中图片都可以调出图片编辑功能，就近的设计形式，保证了用户的操作效率。3. 引导作用，辅助功能指向我们使用 Chrome 浏览器登录网站时，经常提醒我们保存或者更新密码。这是脱离了网页之外的浏览器自带功能。如果采用模态对话框方式，在屏幕中间弹窗展示确认对话框，会阻断用户的正常操作流程。使用了非模态窗口，并与密码管理功能入口强关联，可以引导用户认知功能入口。组件使用注意事项对于组件如何使用，各大厂商都给出了较为明确的场景说明。但是规范是死的，如何灵活运用就需要“仁者见仁、智者见智”了。1. 基于用户场景的思考当我们面对删除功能的时候，基于防错原则，首先想到是增加确认弹窗，这看起来是没有问题的。但是不是最优的解决方案呢？例如同样是删除网址收藏功能，QQ 浏览器和 Chrome 浏览器给出了两种解决方案。QQ 浏览器删除时，增加了确认弹窗，用户确认后可删除。QQ浏览器确认弹窗Chrome 浏览器的方案时，顺应用户操作，直接删除内容，显示成功提示的同时，增加了容错的“撤回”按钮。Chrome浏览器浮窗提醒我们可以先思考下用户场景，删除是个比较高风险的操作，用户一般只有产生了强烈又明确的意图时，才会主动删除内容。无论是确认弹窗还是撤销功能，都是为了避免用户误操作。所以就要评估用户误操作的几率和误操作后带来的用户损失。就书签而言，用户损失并不大，误删除后再加入收藏就可以了。关于误操作的几率QQ 浏览器只有选中内容后，才能激活删除按钮，另外还可以通过右键菜单、更多按钮、选择”删除“选项后才能完成操作，其实防错机制做的比较好的，因此误操作的几率比较低。关于操作成本误操作几率比较低的情况下，我个人认为 Chrome 容错的设计方案更优一些，删除的流程更顺畅，只需要在误操作时撤销就可以了。QQ 浏览器确认弹窗的方式操作成本更高，不过好在能够批量删除。在一定程度上解决了频繁弹窗的问题。这种容错思维在 Chrome 其他场景中也有应用，我觉得还是值得借鉴的。2. 避免滥用现在各种反馈有点泛滥的趋势，所见即所得的场景下，我觉得并不需要增加反馈信息。例如登录页面成功后会直接跳转至系统界面，登录成功的提示就有点画蛇添足了。3. 毫无来源的反馈信息当用户打开页面，没有任何操作就弹出一个提示信息，而且是一闪而过，只会让用户用户一脸疑惑。所以需要注意提示信息的形式和节奏，避免让提示信息成为用户的负担。新人来收！4个底部浮层的科普知识点关于底部浮层的定义相信大家都很熟悉，底部浮层通常称为「浮层」或「浮窗」，可用于给予信息提示，也用于展示更多的拓展信息。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/floating-layer-components
图片 比例 用户 前言在 UI 设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。在这个快节奏的时代，相比文字，图像的传达效率会更快、更高、更有助于用户轻松理解及记忆。配图用的好，往往能起到决定画面基调、流程引导、视觉平衡等关键作用，所以，在同等样式的布局下，因图片的使用及处理方式的不同，界面的品质也会存在较大的差异。本篇文章将介绍一些在 UI 设计中配图的基础知识，帮助大家在图片列表、背景处理、图文混排、头图等相关界面设计无从下手时提供灵感，在选择图片、后续处理时如何做到有规律可循带来一些思路。本期大纲了解 UI 设计中的图片图片的使用及处理方法图片样式效果图片处理小技巧总结了解 UI 设计中的图片1. 为什么要重视图片在文字出现之前，人们都是靠看到的图像来理解信息内容，即便后来文字能表达出很丰富的内容，图示也不可少，试想一下，当别人拿着密密麻麻的数据给你看时，能看的头皮发麻，你更希望有一张清晰的图表，但并不能说明别人的数据不清晰。所以，图像相比文字能更具说服力、更容易传达信息，使读者产生共鸣、震撼内心，让人看了一目了然，能直观的与人产生互动。当说到 UI 设计中的图片非常重要时，并不是说文字就一定比图片弱，好的文字也能带给我们无限的遐想，只能说在更大的概率上图片和文字哪个更吸引人，所以我更倾向于观赏图片，然后感受到带来的美好。但是，如果非要问我选择哪一个时，我只能说“只有小孩子才做选择题，我（设计师）全都要”，图片可以表达出丰富的内容，再用文字言简意赅，是一个非常完美的组合。2. 常用的图片格式图片有多种格式，如 JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在 UI 设计中，最常用的无非 JPG、GIF、PNG 三种。JPG：目前为止使用最多的图片格式，兼容各大操作系统浏览器及编辑软件，非常方便被打开和处理，但不能显示透明底，压缩后会失去一部分原始信息。PNG：如需编辑，PNG 应该算是所有图片格式中的最佳选择，支持无损压缩及透明底，但针对需要高保真的复杂图片，压缩后的文件较大，且有少数的浏览器不支持。GIF：动效图片，支持透明底及无损压缩，通常由视频格式的内容转换而来，但对色彩有非常严格的要求，数量最多不超过 256 种，相比前面两种，GIF 格式的文件更大。图片的使用及处理方法1. 图片的使用比例在移动端 UI 设计中，我归纳了最常用的几个图片比例，分别是 1:1、3:2、4:3、16:9 四种，这些比例都是源于最早的胶片摄影及现代相机的传感器演变而来。当我们不知如何选择比例时，首先需清楚的了解界面图片的应用场景、来源用户以及图片比例背后的缘由，否则将很难把控，下面将针对这几个比例作具体分析。1:1 比例因为相机结构的原因，早期最传统的 120 胶片画幅就是正方形（6*6cm），即 1：1 的比例，此比例更容易的将构图规整，使其最大程度的突出照片主体。在如今的电商 APP 中，商品图片绝大多数都遵循了 1：1 的比例，不管横向还是纵向都能将信息进行完整化的展示，且方便多场景、页面的适配。另外，用户头像也都使用了这一比例。3:2 比例起初 135 胶卷的比例就是 3：2，主要是因相机取景框的大小而决定。在移动端，这一比例使用也比较广泛，例如新闻、旅游类型产品，在拍照之后无需裁剪等处理，直接上传使用，非常方便。4:3 比例随着摄影的发展，小/微型相机出现而诞生 4：3比例，且移动设备发展迅速，在非专业摄影的情况下，手机能很大程度上代替单反并成为主流拍照设备，目前市场上主流手机的拍摄尺寸基本都为4：3比例。相比3：2的图片，4：3图片占比更大，能最大化显示图片以突出重点信息。16:9 比例根据人体工程学的研究，人眼视野范围的比例约为 16：9 的长方形，所以电视、显示器及投影范围的设计都是基于这个黄金比例。线上产品不用多说，影视类型的产品均采用 16：9 的尺寸，例如爱奇艺、优酷、腾讯视频等，到目前为止，这个比例在设定上还没出现过问题。在上述 4 个尺寸中，最容易混淆的是 3：2 和 4：3，如果不清楚如何选择，请根据产品目标定位，看看到底是以内容为主导还是图片为主导。例如：资讯类型产品很注重标题文案，即会使用上文下图、左文右图的版式，选择 3：2 作为封面，以降低图片的视觉重量；旅游、租房类产品，则可使用 4：3 的图片，以传达更多信息。这种选择方式虽然不是绝对，但当我们陷入两难的困境时，可作为参考依据帮助快速决策。2. 图片的使用场景单图布局全屏：具有很强的视觉冲击力，非常适合用于传播行业属性及品牌调性。单图全屏布局处理灵活，可整体突出、局部特写或加纯色不透明度纹理/遮罩，对图片细节、构图等有较高的质量要求，一般用于登录、启动引导、产品介绍背景等页面。卡片：以单张图片作为视觉引导，宽高不固定，但占据界面大部分区域及重要位置，主要突出产品调性和成为吸引用户的流量入口，促使用户与其产生交互行为。常用于产品详情页头图、推荐页、专题入口等。图文列表在图文列表界面，很多时候，我们都在想一个问题，到底是选择左图右文、左文右图还是上图下文？所以我们首先要明白 F 式（从上到下、从左到右）浏览布局，这也跟人眼的浏览习惯相吻合，然后确定图、文信息内容的权重，根据优先级将重要的信息放在关键位置。单列组合左文右图：以文字为主、图片为辅，主要强调文字信息，且图片与标题的关联性不是很大，能减少图片对文字的干扰，对图片的质量要求不高，很多新闻、资讯类产品都是选用这种方式布局。左图右文：在图片内容优先于文本内容的情况下，采用左图右文的方式，更强调以图片直观的传达内容、吸引用户的视线，对图片的质量要求高于左文右图，一般是电商、旅游类产品的最佳之选。上图下文：一行只显示一张图片，大多采用横图，同屏一般不超过两个内容，用户需要从图片中获取大量信息，对图片的质量要求很高，大多有专门的人员审核，以完成对图片的品质的把控。这种方式很占用界面的纵向空间，部分租房类、艺术类产品会选用此种方式。双列组合并排：相同高度的比例控制，是较为经典图文布局，相比单列，同屏可展示更多的图片内容且空间利用率更高，能同时向用户传达更多信息。错位：图片高度自适应（瀑布流），在限制宽度的条件下，高度自由发挥，让图片得到更多的舒展，利用率更高。双列错位的排版方式增加了版式的趣味性，可缓解用户在长时间浏览下的视觉疲劳，需要注意的是宽高比例不要太大、成跳跃式的变化，否则可能导致视觉混乱，且低高度的图片信息很容易被忽略。多图组合规则：3 张或以上的规则的图片组合很常见，主要用图片列表来引导用户查看更多，通常利用单排左右滑动或九宫格的方式呈现。例如旅游、租房、影视类产品，包括手机相册、社交圈子等。不规则：多图不规则比例并不常见，因移动端设备可视宽度有限，容易导致混乱的错觉。艺术、拼图类产品看到的居多，另外，部分社交类产品为了展示不同远近距离的层级关系也会用到这种排版方式。3. 图片操作的交互手势图片常见的手势操为：滑动、点击、双指缩放，除此之外，还有很多针对所有元素都可以操作的交互手势，这里就不多说了，下面单独对图片手势作出介绍。滑动上下滑动：通常在图文列表或单张图片内容超过一屏的情况下，通过上下滑动查看更多信息。左右滑动：为了拓展更多内容，多用于相同等级的图片列表或大图切换，在页面列表中会将无法同时展示的图片呈现一部分或以数量作为提示，引导用户探索以发现更多。点击/长按单击：单击可查看图片，从缩略图到详情或大图的切换操作；双击：针对图片本身进行某些操作，比如喜欢、点赞等，另外，部分图片通过双击进行一定比例的放大缩小。长按：调出图片的部分属性信息、下载图片等进行下一步操作。双指缩放当我们需要查看图片的某些局部信息或细节时，就会使用双指（开合）缩放的交互手势。图片样式效果1. 图片遮罩因图片的色彩变化不规则，为了保证图片上层文字的可读性，通常会在文字区域加一个纯色遮罩，也可设置不透明度的渐变效果，使遮罩跟图片的过渡更加协调，提升视觉美观度。2. 毛玻璃（背景模糊）毛玻璃效果通常出现在应用的 2、3 级页面，对应用性能会有一定的消耗，一般使用封面图片进行大幅度的高斯模糊作为背景使用，可在上层加上一定透明度的蒙层配合使用，透明度数值根据不同的图片色彩及使用场景适当的调整。毛玻璃效果既能满足文字内容的清晰呈现，又能提供场景氛围并提升界面的品质感与神秘感，我们最熟悉的当属音乐播放页面的背景模糊效果了。3. 抠图+纯色背景组合对于自营平台，内容较为固定的商品页面，可将商品抠图后自定义背景，让界面的整体设计风格可控，延展性更高。不适配平台类型应用，因为会让商家产生较高的运营成本。4. 圆角设定图片圆角值设定，能体现出不同的产品属性及气质。例如：直角比较硬朗，给人高冷、力量的感觉，小圆角传达出安全、专业的属性，而大圆角显得活泼、可爱，更有亲和力。5. 图片出界图片出界常用于运营设计，例如图片轮播、胶囊 banner、专题页等，另外，经抠图处理过的图片也可用在商品详情页顶部图示。这种效果能有效避免呆板，营造出画面氛围，制造出更强烈的视觉冲击力。图片处理小技巧1. 符合产品气质UI 设计中，任何一个设计思路、想法及效果样式都是为产品而服务，图片也不例外，需要根据不同的场景进行合理搭配，好的配图更能与用户产生共鸣。2. 切合主体，表达产品核心内容配图必须要明确主体，一眼就能看出核心内容，且不可以炫技或好看为主，否则会被多余的元素、效果影响主体视觉导致没有重点。但确定好一张图片的风格及色系后，后续也要保持统一。3. 风格统一图片以实用性为准，如果一味的追求漂亮、好看，最终可能形色各异造成视觉的不统一，严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理，以形成统一的视觉。常见的控制方向有图片类型（位图/插画/形状）、视角（平视/仰视/俯视）、商品背景（简约/复杂/纯色）、呈现区域（堆积/局部/特写）、构图（中心/水平线/对称/对角线…）等。另外，还有很多抽象的方式但并不是绝对的，我们都可以尝试从不同的角度去调整，力求让所有图片达到最佳视觉效果。4. 颜色丰富因人的天性即向往美好、品质（非物质化）生活，固品质感的配图更容易吸引用户的注意力，让人想要拥有的感觉，如果色彩不够饱满，不管风格是多么统一，也达不到良好的用户体验。在选好图片后，可对色相、饱和度、亮度稍加调整，以确保色彩饱满、丰富。5. 设计稿需呈现上线的实际效果有时候做设计为了方便，整个界面的图片直接复用同一张，即便设计的再好，也可能隐藏着不易察觉的瑕疵。需要说明的是，一个成熟且专业的设计师，首先要对自己负责，然后才是设计，即便是初稿，在即将呈现给大家或汇报前，一定要给出上线后最真实的效果，这样方便他人贴合实际给出一些方向性的建议，帮助自己更好的决策。经处理过的实际配图能体现整体效果，方便找出图片以外的设计缺陷，例如版式、字体大小、层级关系等问题。6. 文件大小处理静态图片常用的无非 PNG、JPG 这两种格式，文件较大的图片会影响打开页面或刷新时的速度，本地图片更会增加应用包的大小。从设计稿中导出图片时需要控制文件大小，如无特别（超大图）情况，切勿主动降低图片质量后再导出，否则会影响界面整体的视觉美观度。这里推荐一个线上无损智能压缩神器： https://tinypng.com ，仅限 PNG、JPG、WEBP 格式的图片。上图可以看出，图片在压缩了76%后，由1.4MB变成了332KB，肉眼很难看出（查看大图）质量上的损失。7. 倍率切图切图不像以前那么麻烦，同一张图片需要手动导出多套规范，现在只需在软件（或安装插件）标记好切图，上传到类似蓝湖、摹客等第三方线上应用，分享给团队成员即可各自下载 web、Android、iOS 对应的多套规范制图。设计师在设计过程中，一定要按照规范的最大极限保留原图，以 iOS 系统@1x 规范设计稿为例，如果图片的宽度是 100px，那么导入软件中的图片宽度至少要在 300 以上，然后再进行缩小（PS 中需转为智能对象），如果低于 300px，开发在导出@3x 的图片就会失真，可能会因损失像素而出现模糊的情况。总结文章中所介绍的图片使用方法及处理技巧，并非最好、唯一的答案，但在你没有更好的方法之前，多多少少能从中得到启发。UI 中图片设计的本质在于自身的专业能力，然后用自己的视觉产出和设计手段去吸引、打动用户，从而为产品带来利益，也能体现出设计价值。不得不承认，人们很多时候都是通过视觉表象决定是否需要深入了解、拥有某一件事/物，设计师就是在做视觉表象的表达，如果图片用的好，不仅能让你的设计更加出彩，还有一定几率转化用户，形成商业价值。下篇「弹窗」文章再见。如何选到设计感强的配图？我总结了这7个实用方法在设计中，判断一张图是否好看的时候，你通常会从哪些角度去分析？阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/ui-photo-guide
用户 优惠券 感官 感谢大家对黑马家族感官体验日记栏目的关注和支持，本栏目皆在为大家带来优秀的设计解决方案和不一样的设计思维。希望每一期的分享都能开启你对于设计的全新认知，提高设计思维和变通能力。下面就和黑马哥一起来看看本期的感官体验总结吧！本期内容涉及优惠券设计、轮播图设计、微动效技巧、刷新的情感化设计、春节主题和冬奥主题等等。不一样的优惠券叠加设计优惠券在电商购物场景中运用普遍，如何提高优惠券的关注度和使用率是至关重要的探索。特别是在多个优惠券叠加的场景中，如何在交互层面和视觉引导层面进行突破，作为设计师来说都在不断尝试新的解决方案。最近发现得物（毒）将多个优惠券设计成左右滑动的动效形式，方便用户关注到更多不一样的优惠券。将有效期设计成失效的倒计时，营造时间紧迫感，提高用户的关注度和优惠券的使用率。突出品牌感的轮播 Banner 设计轮播图在产品设计中较为普遍，以推广营销活动为主。除了在 Banner 设计本身进行创意发挥以外，在 UI 布局层面也是设计师探索的方向。得物（毒）在最近的一次新年活动中，利用品牌展示和轮播 Banner 相结合进行布局呈现，不仅突出活动主题，也强化了活动品牌的曝光度。除了自动轮播之外，也可以点击品牌卡片切换，操作也是非常便利。Banner 底部卡片的展示也能让用户在当前视野中浏览到其他品牌，提高了更多品牌的曝光度。多种分类下的轮播设计单轮播设计较为普遍，当我们遇到按照不同类别轮播类别的内容时，如何处理好类别的样式和轮播的呈现方式呢？相信这个设计解决方案是一个不错的思路。网易云音乐 APP 播客栏目中，随心听 FM 除了卡片轮播以外，下方设计了音乐类别的选择，模拟调频场景设计，操作不仅非常便利，感官体验也是非常不错的。背景颜色也会随着类别切换进行微变化，带给用户非常自然的视觉过渡。通过手势拖拽隐藏红点提示红点效应从强迫症已经开始过渡到治愈期，不过针对信息列表较多的部分，红点提示太多也是非常干扰用户体验的。在 MOMO 陌陌 APP 消息栏目中，如果你觉得红点提示消息过多时，可以通过拖拽红点隐藏显示，无需挨个删除或者阅读。配合微动效的设计表现，带给用户非常流畅自然的操作体验，借助手势交互的设计提升用户体验。这个功能最早是手机QQ设计团队创造的，设计过程见：背后的故事！手机QQ的一键消除红点功能是怎么诞生的？腾讯社交用户体验设计部 YU：人类似乎天生对不对称、不和谐的事物有厌烦心理，并且想要去纠正这些“错误”，简而言之就是大家平时所说的“强迫症”。阅读文章 > 右滑手势探索新的世界手势交互设计在产品中逐渐得到应用，可以在有限的空间里面探索更多的互动体验，带给用户更加便利的操作体验。最近研究手势交互的时候，发现 MOMO 陌陌 APP 首页右滑即可开启新功能，探索新的世界，吸引用户前往这个小宇宙去探索。刷新设计的情感化表达把简单的功能做到极致，把重复的动作做到更有情感化。想要抓住用户的情感共鸣，就要在细微之处带给用户更有情感化的体验。喜马拉雅 APP 在下拉刷新时，不是固定的文案提示，针对这个动作设置了不一样的文案提示。每一次刷新都会展示不一样的文案，让用户感受到这是一个有温度的产品，情感化设计的表达提高了用户的情感共鸣。融入春节元素的金刚区设计春节元素融入到 UI 设计中近期出现了很多案例，在金刚区图标设计中的表现尤为突出，带给用户情感化的场景代入感。自如 APP 就将春节中的元素融入到金刚区的图标设计中，带来的感官体验也是非常不错的。运用到的元素涉及鞭炮、福字、元宝、红包、糖葫芦等等，结合中国红营造出浓厚的春节氛围。醒目的引导提示设计针对新业务或者新功能的新手引导设计，有助于提高用户对于内容的熟悉度，也能降低摸索学习的成本。记账城市 APP 在打开应用时，会在底部弹出新增的一些功能或者交互玩法。通过俏皮可爱的卡通形象以对话式的形式传递内容，降低了用户的学习成本，一目了然且不会形成对主功能区域的干扰。用设计为北京冬奥会加油最近比较热门的话题就是北京冬奥会了，各大品牌都在不同的渠道通过各种形式进行曝光，借助营销策划或者单纯的加油祝贺，为北京冬奥会的举办增添色彩。高德地图 APP 在地图主页添加火炬元素突出冬奥主题，点击会展开“点燃昂扬斗志，中国队加油”。保持当前结构的基础上，通过元素的添加达到主题的突出，既不干扰用户操作，也能通过情感化的设计与用户产生共鸣。游戏化的签到积分设计签到挣积分获取相应的奖励，在产品中较为常见，特别是电商类产品。随着这种形式的普及，起初的新鲜感逐渐减少，有差异和创意的表达方式才能吸引用户的关注度。得物（毒）结合游戏化的形式表达签到和领取积分的设计，通过积分换取优惠券和礼品等。积分采用极光的形式表达，不足的情况下可以通过“找极光”获取，激发用户的参与度。小结从感官体验的角度体验产品，总结了在 UI 设计视觉层面的解决方案，有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达，总结优秀的设计呈现方案，希望这个栏目可以带给你更多帮助！第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/ui-design-skills
用户 操作 信息 老龄化社会已经到来，如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户，也属于适老化的涵盖范畴。在前期调研和设计环节中，我们收集了一些相关的文献及案例，并且结合项目实践有所思考和沉淀，在这里与大家分享。普适的适老化设计理念世界卫生组织根据现代人生命状况，提出了人生阶段年龄的新划分。45~59 岁为中年人；60~74 岁为年轻老年人；75~89 岁为老年人；90 岁以上为长寿老人。[1]随着年龄的增长，人们的身体机能、心理状态、认知能力等都会出现衰退的情况。适老化设计是无障碍设计中的一种。无障碍设计于 1974 年由联合国组织提出，设计中需要充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者（如残疾人、老年人）的使用需求。[2]目前互联网产品中大多数的适老化设计，主要是集中在 C 端。针对不同障碍（视觉、肢体、听觉、认知障碍）[3]，目前普适的适老化设计原则有：1. “强烈“好于“柔和”针对视觉障碍，常见做法有增大字体大小，使用非衬线体字体，提高颜色对比度等。相比原版的 App，百度大字版 App 和支付宝长辈模式修改了 UI 界面，每个功能模块都用了明亮的大色块、加大字体的设计。2. 善用“辅助”和“替代”针对听觉障碍，常见的做法有通过视觉辅助，将声音转化成文字、扩大音量、降低语速等。Google 安卓系统推出了 Live Caption 功能，可自动将手机上播放的内容转换成字幕。Live Transcribe-「Sound Notification 声音通知」功能，可识别特定声音（比如烟雾警报器、婴儿啼哭、敲门声等），并转化成文字及视觉符号推送至手机，方便听障用户辨别生活当中一些重要的声音信号。3. “点击”好于“滑动”针对肢体障碍，减少页面信息的密度，避免使用过小的按钮以及复杂的交互手势。有研究表明，老年群体在操作时难以瞄准物体，在浏览图片时，由于视力衰退导致无法对焦，他们会不断地用两只手指放大/缩小并反复点击屏幕。[4]平安银行 App 关怀模式采用卡片拼接的设计方式，将间距放大，保证每个信息有更大的展示空间，同时也放大按钮点击热区，提高操作的准确率。4. “具象”好于“抽象”针对认知障碍，避免使用不易识别的图标，尽可能配有图标或图片，简化信息内容。有研究表明，文字+图标为主的设计有助于提升老年新手用户对新 ATM 使用的学习效率和记忆。[5]滴滴 App 关怀模式针对老年人进行功能精简，满足高优先级核心诉求，首页只放「一键打车」，操作简单，大字、无广告。B端产品引入适老化设计也值得深思在很多行业中，中老年人因为拥有丰富的经验在岗位上更具竞争优势，譬如教师、医生、律师、会计等职业，工作年限长、经验足是优势，可以提供更好的服务。他们既会使用 C 端产品，也有使用 B 端产品的场景。随着时代变迁，2015 年世界卫生组织提出了“健康老龄化”理念[6]，倡导改变过去“老了就要退出社会生活”的消极认识。从“老有所依”到“老有所为”，很多的 B 端场景都覆盖了中老年用户，如何提升中老年用户的办公用户体验是重要课题。另外我们看下 C 端与 B 端的主要差别：C 端 App 中时常将简单作为适老设计宣传点。追求简单有一部分原因是，C 端用户是在自己的场域操作且几乎无时间压力。而 B 端产品却相反，业务逻辑复杂，用户要长时间使用而且要求效率。B 端面向企业定制化，针对特定人群、情景，使得在适老化设计中要解决的问题更清晰。适老化设计在POS中的应用留意生活中的零售行业，如餐厅、商场、药局、便利店的服务人员，往往能看到中老年人的身影。POS 系统是 B 端场景中使用率最高的产品之一，POS 系统的英文全名为 Point of Sale，中文名为销售时点信息系统。[7]它由硬件与软件组成，根据产业和店面类型的不同，会有功能上的差异。最近团队参与了一个改造 POS 系统的项目，使用人群覆盖到了中老年用户，提升他们的办公用户体验是其中一个产品目标。本次项目主要是 POS 界面的更新，完整的 POS 体验不仅有软件本身，有更大的部分在于实体环境与设备，例如：结账区的控件、店面的摆设、扫描枪，读卡器等，而 POS 界面是连结上述元素的节点。在对 POS 系统进行改造时，我们是按照以下设计思路进行的：第 1 步:沿用旧系统规则与结构B 端系统背后往往由成熟的业务场景和复杂的业务逻辑构成。B 端系统往往不是一个从 0-1 全新的系统，而是存在一个被使用了很多年的系统。在这种情况下，企业服务的每个用户都是趋向于规避风险的。人们可能已经习惯了原有的解决方案（尽管不好用，但是大家都会用了），但新的方案如果不好用，他们的生产力反而会因为不知道如何使用新方案而降低。这就意味着在做 B 端设计时，现行的方案会产生很大的习惯引力。当设计师要引入一个新方案时，取消或改变某些功能及操作行为将有难度，不能霸道性更改，取代需要合理性。设计思路：梳理业务逻辑和功能模块：沿用旧系统规则与结构。制定框架：定稳定一致、拓展性强的信息框架与导航栏。统一专业术语：信息表达（文案）与原有系统尽可能保持一致。遵从使用者习惯：原系统中可能存在一些不够美观或不合常理但却实用的快捷入口及交互方式，可以整合优化后进行复用。第 2 步：理清主要用户与使用场景想要了解使用者的真实痛点，需从场景出发。第 3 步:用适老化设计原则去解决场景中的问题POS 使用场景有很多，这里列举 3 个常见的使用情境：可能存在的障碍：无法聚焦信息内容，难做到边看屏幕边与顾客交流。设计目标：确保信息在复杂的环境中，信息内容清晰可读。设计思路：1. 放大信息内容服务至上，POS 使用者在工作时需保持端庄热情的姿态，不能只专注看 POS 屏幕信息而不顾顾客。内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定，在复杂的现场环境中，信息内容要清晰易读。2. 色彩对比度符合 WCAG 标准参照 WCAG 有 AA 和 AAA 的对比度标准，界面中的信息与其背景间的关系对比度至少在 4.5:1 之上，保证信息易读性。WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)。这是一套由无障碍功能专家编辑的指南，有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]一些设计插件可以帮助我们检验色彩对比度是否符合 WCAG 标准，给大家推荐 2 款：Sketch 插件 Cluse，Figma 插件 A11y-Color Contast Checker。3. 设计有意义的动画通过动效来表达静态视觉效果无法准确传达的信息，如反馈、引导下一步、状态表达等。好的动效与视觉设计是互补而成系统的。比如用动画来展示商品被加进购物车的状态，引导下一步操作。4. 加大点击热区提高使用者点击操作的准确率和速度。5. 一屏策略在这次的项目中存在一个场景，除了销售端服务员看到的屏幕，顾客也会有一个客显屏，即服务人员看到的界面，顾客也会看到。对于页面信息框架以及布局尽量“一屏”展示，确保双方的视线和注意力一致，便于沟通交流。但这时会有挑战：字放大、按钮放大，信息和功能在一屏上怎么放得下？解决思路：进行功能筛选，满足场景中高优先级核心诉求，提取核心功能展示。模块化展示每个信息，根据格式塔的视觉感知理论，做到聚焦用户视角。可能存在的障碍：在顾客的“催促”下，使用者也会着急，对事物表现出茫然的情绪，定位当前位置困难。设计目标：追求信息的有效表达和操作的直觉性与效率。设计思路：1. 避免使用不易识别的图标B 端系统中会有些功能很难用一个图标去表达其含义，此时文字+图标按钮优于纯图标按钮，能帮助 POS 使用者更好地理解语意并做出操作。2. 信息的呈现符合用户眼动规律，操作轨迹越短越好可运用古腾堡图表法 Diagonal Balance，它由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律，左上角是视觉第一落点区，右下角是视觉最终落点区，右上角和左下角都是一个视觉落盲点，大多数情况容易被忽略。[9]用超多案例，帮你掌握交互设计心理学的古腾堡原则写在前面在平时的设计过程当中，你是否有这样的疑惑？阅读文章 > 在进行信息排布时，可根据用户习惯性的眼动规律，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。可能存在的障碍：百忙之中，应变能力下降，容易发生误操作的情况。设计目标：预防不当行为，提升容错率，反馈要及时有效且清晰。设计思路：1. 通过二次确认避免误操作在产品设计时，要把各种可能性考虑进去，通过模态对话框让用户二次确认来避免误操作行为。当有重要操作时需告知用户处理结果，状态反馈信息采用的颜色需要遵守用户对色彩的基本认知，如红色代表警示，黄色代表警告、绿色代表成功等。上述举例的设计原则是启发但不是限制，每个设计提案最后都要经过用户调研，看是否符合使用者的使用习惯，是否真能解决业务与工作中的痛点。附上总结图：其实设计到后面会发现，起初为了方便中老年用户使用 POS 运用的设计原则，最终都能给多数人带来很大便利。这是因为我们每个人在某些时候都会遇到各种临时的无障碍需求。结语适老化设计，不仅仅只是为中老年群体做设计，更是一种新的设计思维方式，去挖掘更多普适的场景痛点，来指导我们做方案设计。市面上很多适老化设计方法为 B 端产品提供了借鉴，但 B 端产品不能为了适老而适老，理清相关工作情境和要解决的问题很重要；不能霸道性更改，取代需要合理性，因为 B 端产品现行的方案会产生很大的习惯引力。以上是近期对 B 端引入适老化设计的一些思考和沉淀，是开始，也将继续，适老化设计还有很多值得深究和验证的内容。如何做好G端可视化中的适老化设计？我总结了10个注意点！前言调查显示，2020 年我国老年人口达到约 2.43 亿，占比 18%，50 岁以上的网民群体占比 22.8%，G 端可视化面对的主要群体就是政府领导，而政府大领导普遍都是市级及其以上，年纪大多数为 60 岁往上，属于适老化的涵盖范围，因此探索适老化在 G 端大屏中的体阅读文章 > 参考文献：[1] Cherry K E, Hawley K S, Jackson E M, et al. Pictorial superiority effects in oldest-old people[J]. Memory, 2008, 16(7): 728-741.[2] Persson H, Åhman H, Yngling A A, et al. Universal design, inclusive design, accessible design, design for all: different concepts—one goal? On the concept of accessibility—historical, methodological and philosophical aspects[J]. Universal Access in the Information Society, 2015, 14(4): 505-526.[3] Vanderheiden G, Tobias J. Barriers, incentives and facilitators for adoption of universal design practices by consumer product manufacturers[C]//Proceedings of the Human Factors and Ergonomics Society Annual Meeting. Sage CA: Los Angeles, CA: SAGE Publications, 1998, 42(6): 584-588.[4] Wang M H, Liu S F. Study on Innovative Gestures Applicable to the Elderly[C]//International Conference on Human-Computer Interaction. Springer, Cham, 2020: 200-211[5] Huang H, Yang M, Yang C, et al. User performance effects with graphical icons and training for elderly novice users: A case study on automatic teller machines[J]. Applied ergonomics, 2019, 78: 62-69.[6] 世界卫生组织网站. 世界卫生组织发布《关于老龄化与健康的全球报告》[J]. 中国卫生政策研究, 2015, 8(11):1.[7] Rahman M, Ripon S. Elicitation and modeling non-functional requirements-a POS case study[J]. arXiv preprint arXiv:1403.1936, 2014.[8] Web Content Accessibility Guidelines (WCAG) Overview[EB/OL].[9] Gutenberg Diagram — Why you should know it and use it[EB/OL].本篇来源：优设网原文地址：https://www.uisdc.com/b-end-elderly-design
游戏 内容 用户 背景数字营销是指借助于互联网营销方式，帮助业务方和消费者建立触达渠道，实现业务的商业目标达成。按业务类型分为线下产品的数字广告和数字内容（APP、影音、动漫、游戏等）线上推广分发。本文主要聚焦在数字内容线上推广分发上，尝试从用户获取渠道、体验方式、内容感知、新技术带来的变化等几个方面，为相关从业者梳理数字内容流行的营销方式，以期提供一些启发和借鉴。往期回顾:腾讯出品！2021-2022设计趋势报告：社交APP篇前言人是群居动物，不论以何种方式，人和人都在社交。阅读文章 > 腾讯 ISUX 出品！2021-2022设计趋势报告：日系潮玩篇潮流玩具最初起源于日本，盛行于美国、香港，又叫艺术家玩具或设计师玩具，是玩具与艺术摆件融合的产物。阅读文章 > 腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 近年来用户内容消费呈碎片化、视频化，多元化趋势。短视频内容强势崛起，这种方式可以让用户更轻松、更深度消费内容。在各类营销类型中，短视频逐渐成为推广的重要方式，不仅在实体产品电商领域，日益成为重要的销售方式，在数字产品的推广上，也发挥越来越重要的作用。漫威在短视频平台注册虚构报社账号宣传《蜘蛛侠：英雄无归》电影，获得海量关注和点赞。说唱歌手 Lil Nas X 用《Old Town Road》做 BGM 在短视频平台发起的牛仔挑战（#Yeehaw challenge），使这首歌曲通过短视频成为了全球爆款。这首歌在美国地区的流媒体播放量超过了 25 亿次，在 Billboard 排行榜保持了 19 周的冠军。美国创作型歌手兼唱片制作人 Charlie Puth 尝试在短视频平台上发布一些旋律，发起了标签挑战 #writethelyrics，邀请粉丝们为旋律填词，这个标签累计视频观看量达到 38 亿次。在游戏领域，短视频/直播内容也正成为分发重要形式。短视频巨头已深入游戏腹地，2020 年移动游戏用户与短视频用户重合率达 82.5%，近六成移动游戏用户会用短视频主动搜索游戏内容。短视频在和游戏内容结合上有先天优势，消费门槛低，体验更沉浸，同时也可以快速获取其他玩家的感受。除此外，对于游戏制作和发行方来说，这里也是通过内容创作获取用户的良好渠道。游戏依托赛事直播、KOL 直播，聚集了大量高质玩家，相较于传统分发方式，直播具备互动性、真实性、及时性等三大特点。KOL 主播可以将游戏最直观的展现在玩家面前，更可以利用高人气迅速提升游戏热度。Facebook gaming 现在采用直播 feeds 的方式进行游戏的推广，使玩家对游戏体验感受更直观。黑客帝国 4 在官网为用户提供了一段可交互的宣传视频，根据用户的选择不同，触发不同类型结局。让用户更有代入感和掌控感。有种“我”开启了一段故事，也更容易带来体验上的惊喜感。洛杉矶流行艺术家 BIIANCO 为其单曲 That’s what friends are for 制作了互动音乐视频，以互动游戏的方式让观众进行多次选择，探索属于自己的故事。在游戏类内容宣传上，为让玩家更直接、更低成本的体验到游戏的玩法和特点。借助 2D、3D 以及交互视频素材高度还原游戏的真实场景，音效、视觉、玩法互动与游戏本身无异，将原有的游戏体验前置，让用户在短暂的广告展示时间中快速明白游戏的核心机制。2021 年音频内容呈爆炸式增长，播客这种很早就有的形式，在今年焕发了蓬勃生机。因为疫情原因，音频内容呈爆发式增长，相较于其他数字内容表达方式，音频覆盖了更多互动场景，用户可以在通勤、运动和打扫房子的时候在车里播放。21 年初热播的《流金岁月》不仅霸屏热播热榜，更首次将营销可能性转化到“看不见的”声音领域，最终联手十多家播客参与多方面讨论了女性、友谊、成长等话题，精细化传播，也让更多电台参与创作讨论，最终“我的「流金岁月」”主题内容实现了全平台百万级的总播放量。Beats 就联合播客《大内密谈》推出了一档名为「一首歌的诞生」的系列节目，主播相征会在节目中和各位音乐聊一聊他们的某一首歌从谱曲、写词到录制的全过程。2021 年，《大内密谈》连续 7 年获得 Apple Podcasts 年度精选播，拥有 400 多万忠实听众，单期节目收听量超过 400 万次。影音、游戏联动明星、品牌、知名 IP、传统文化产业、线下活动等等具有影响力的合作方进行战略合作，扩大双方影响力。如英雄联盟和 LV 的跨界联动，这款由 LV 设计的史上最昂贵、最奢侈的游戏皮肤，还未推出就捕获了无数 LOL 玩家的心，在让玩家兴奋不已之余，还引发了“这款皮肤究竟有多贵”的讨论。自 2017 年腾讯和敦煌研究院达成战略合作以来，王者荣耀飞天及九色鹿主题皮肤、QQ 音乐“古乐重声”音乐会、敦煌诗巾、“云游敦煌”小程序和敦煌动画剧陆续推出。三年间，累计超过 2.5 亿人次参与了“数字供养人”，超过 4000 万年轻人在王者荣耀中遇见了敦煌飞天，“云游敦煌”小程序目前已接待超过 3700 万人次线上游客，40 多万用户设计了自己专属的敦煌丝巾，24 万用户在腾讯公益平台为敦煌石窟保护项目捐款，15 万用户在线用声音演绎敦煌动画剧。《王者荣耀》是如何演绎敦煌第三季美学创意的？项目背景从 2018 年初识敦煌，以标志性符号“飞天”切入，带领用户认识敦煌，到 2020 年尝试在世界观中融入壁画中的故事与情感，讲述家喻户晓的敦煌九色鹿的故事，以爱守护。阅读文章 > 2021 年底热剧《风起洛阳》联动洛阳市文化单位正式发布“华夏古城宇宙”的全新概念，并宣布“华夏古城宇宙” 首发洛阳 IP 中的剧集《风起洛阳》、纪录片《神都洛阳》、动画片《风起洛阳之神机少年》，带领观众开启探索华夏文明的旅程。1）内容二创，形成粉丝传播文化影视剧宣发期，通过话题互动或设置传播内容，让用户创作内容进行传播，如《鱿鱼游戏》引发自发传播的抠糖挑战也引起更多受众注意激发用户观看。游戏也会在上线后逐步积攒口碑和玩家数量，官方在制作游戏时和后期推广上会提供一些方便传播的核心素材，由游戏粉丝玩家群体自发进行二次创作产生的 UGC 内容，也会引发大众关注。很多玩家会围绕游戏内容创作出新奇舞蹈、仿妆、COS、攻略、同人剪辑、漫画等，提供广泛的话题和讨论度。例如《CS：GO》，它通过一条开箱视频引爆短视频平台，打破了消费用户的圈层，从游戏用户到泛娱乐用户，最终令游戏内箱子的价格从 0.8 元涨至 2 元，极大地促进了消费。2）打造庆典活动，激发用户共情通过大型庆典活动，让用户共情，形成记忆共享，将志同道合的人聚在一起，形成文化传播。如英雄联盟每年都会举办盛大的全球总决赛开幕庆典，并加入一些让人印象深刻的游戏元素。相较于通过中心化推荐方式向用户展示广告内容，新的趋势是广告主利用用户社交关系链，在 facebook、微信、QQ 等社交平台进行分享传播。通过社交流量的传播内容，让受众觉得更贴近自己，也更可信。相较于其他数字内容，在游戏分发上私域流量日益重要，很多头部社交渠道在尝试如何更好的通过私域流量带动游戏分发。1）通过社交动态通知触达Facebook 游戏智能助手会在玩家的对手参与游戏后，通过 Facebook 与 Messenger 提示对方继续玩游戏，这种方式可以吸引玩家快速回归玩过的游戏；同时在首页好友动态中可以看到好友的游戏邀请动态和相关战绩，对游戏有较高的流量传播；游戏的高活玩家也可以通过邀请好友对战或分享游戏活动等方式进行裂变传播；2）线上社区深度触达Discord 建立起玩家之间互推、互鉴，玩家与开发者间直接互动的社区平台；社区内的种子玩家可以更直接地与开发者接触，让自己的声音被听到；同时他们也是优质的渠道传播者，将优质的讨论内容、游戏动态进行分享，让渠道转化效率更高；同时 Discord 可以创建「临时」游戏语音频道，可以让其他成员看到频道内成员正在玩的游戏；玩家也可以将游戏实况传输到服务器，在语音频道邀请朋友共同观看自己的游戏“现场直播”，让玩家的朋友在沙发上重现游戏的感觉；3）利用核心玩家作为推广资源触达游戏开发者利用多圈层 KOL 的优势，引导他们产出与游戏相关的 UGC，OGC 内容，形成话题热议，从而触达到目标用户，这种方式可以增强游戏影响力，甚至产生出圈的效果；比如 Youtube 通过扶持优秀的内容创作者，通过他们的粉丝圈或者社交关系进行游戏推广。2021 年初爆火出圈的社交产品 clubhouse，也是在早起利用名人明星和圈子的力量，通过采用邀请制的方式吸引了高质量的种子用户，带动 app 的影响力，提升其在世界产品和科技圈的热度。相较于传统的机器人客服，机器人进化出了新能力,在数字内容推广上展现新前景。在 Discord 中，由第三方机构提供各种数字内容服务能力的机器人，如将 Patchbot 机器人添加到频道后，可以将用户喜欢的游戏资讯/功能更新及时推送到频道中，让玩家获取信息更及时；在 Discord 和 Telegram 聊天群组中，有很多提供数字产品服务能力的机器人，为群中小伙伴定期推送和主动获取影音资源。随着元宇宙、区块链技术的火爆，数字内容也展现了不同以往的展示和推广方式。2021 作为元宇宙爆发年，向我们展示了未来的一角。通过虚实结合的互动体验，数字营销不再局限于单一的文字/画面，而是通过多体感的交互，让用户全方位的体验数字内容，为猎奇的互联网用户打开了数字营销新篇章。1）虚拟偶像成数字内容推广重要方式2021 年，随着元宇宙基建的推进和爆款案例的频出，虚拟偶像也迎来了新一波发展高潮，引得不少音乐公司纷纷入局。19 岁的加州虚拟网红 Lil Miquela 代表了 Z 时代的社群偶像，她在 instagram，youtube，discord 等平台分享自己的时尚穿搭，与名人或朋友的合影及生活想法，甚至她还在 Spotify 发布了自己的 15 首单曲。打造了跨平台的 Vmodel 身份。韩国虚拟模特 Rozy，不仅在社交网络分享自己的穿搭生活，还如同常人一样，营造看电影的真实体验，她的代言产品不仅涉及线下美妆，还为线上购物网站，电影等数字产品内容做宣传推广；下一个洛天依？6个超写实虚拟偶像产品分析编辑导读：洛天依、闪耀暖暖、虚拟 up 主，近些年，“纸片人”不断出现在大家的眼前，收获一批又一批的粉丝，成为青春永驻的“真偶像”。阅读文章 > 2）虚拟演唱会打造多感官音乐体验贾斯汀 比伯举行了一场由真实动作捕捉的线上虚拟演唱会，比伯在演唱《Peaches》、《Hold On》等人气单曲的同时，观看直播的观众可以根据场景与比伯进行线上互动：场景切换到田野时，观众可以点击不同颜色的花朵，让田野生出花朵形状的流光；切换到街头场景时，观众可以把聊天内容或爱心发送到比伯周围；这种虚拟演唱会的形式将全球的粉丝连接在一起，在虚拟场地形成万人互动的沉浸式音乐体验。宝可梦 25 周年，联合说唱歌手 Post Malone 推出了自己的虚拟音乐会，马龙在这次虚拟演唱中共演唱了《Psycho》、《Circles》、《Only Wanna Be With You》、《Congratulations》四首单曲，在虚拟世界中与知名宝可梦一起完成表演；也为新发售的《宝可梦：晶灿钻石/明亮珍珠》起到宣传作用；3）利用虚拟社区打造游戏/影视宣发新方式Decentraland 提供了去中心化的社交世界，用户可以创建自己的虚拟形象，在不同的游戏场馆进行切换，为游戏品牌起到了更好的宣传作用；同时 Dcentraland 提供了虚拟土地售卖，用户或开发者购买土地后，通过制作 3D 场景，发布自己设计的各种产品或服务，这些场景也可以使用 VR 终端来体验，用户或开发者可以发挥无限的想象力进行宣传创作。韩国剧集《鱿鱼游戏》热播后，剧集中的游戏关卡在罗布乐思公司的游戏社区被“1:1”还原，其中的游戏“1、2、3”木头人进入推荐排行榜，吸引了众多观众成为玩家，也让很多玩家去奈飞追剧，扩大了该影视资源的影响力。4）区块链及 NFT 技术赋予数字内容流通新方式伴随着区块链技术的发发展，有的游戏分发公司也在尝试通过区块链技术进行游戏发行。如 Ultra 试图打造一个基于区块链的游戏发行平台，通过通证经济实现更加合理的利益分配。对游戏玩家来说，可以在下载完成前就尽情享受新买的游戏，并在玩游戏时继续下载缺失的数据。玩家可以自主选择是否允许游戏内弹出广告，观看广告可获得通证奖励，邀请朋友、参与测试和策划游戏也可获得相应通证奖励。因此，游戏玩家既可以即时玩独家游戏，又可以通过多种方式赚取通证奖励。NFT 实现了虚拟物品的资产化与流通化，赋予了数字藏品/游戏/影音等内容的虚拟价值；艺术品数字资产化将拓展影视相关内容的产品链，因被赋予独特的价值，使得其可以通过交易完成变现。2021 年 10 月 11 日，王家卫首个 NFT 作品《花样年华——一刹那》以428.4万港元价格成交，同时创下王家卫个人作品与亚洲电影NFT作品拍卖价格新高。艺术家扎堆的「元宇宙」到底是什么？7000字帮你完全看懂！元宇宙是一个全新的数字世界，我们可以想象的任何东西都可以存在。阅读文章 > 总结伴随着用户数字内容消费习惯的变化，数字内容呈现方式、渠道和分发方式都在发生变化。可以看到在未来，数字内容制作方和发行方，需要为用户提供更多元的方式深度进行体验，同时承载数字内容的平台也逐步由传统的中心化渠道向私域流量转移。作为数字内容发行方，如何有效且长线输出高品质内容，构建内容壁垒，探索更有吸引力的表现形式、缩短和用户的沟通渠道，是未来需要深入思考的。参考文献《2021 数字营销趋势重磅出炉，来年的营销风向抢先看！》《2021，数字广告几个可见趋势》《元宇宙中的土地价值评估初探》-微信公众号“金牌估值”Facebook Gaming 博客 https://www.facebook.com/fbgaminghome/blog?type=develope《科技巨头布局元宇宙系列报告 》《虛擬網紅當道——「不是人」卻坐擁百萬粉絲！》欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/2022-design-trends-2
用户 形式 内容 搜索设计看似简单，展现形式上只有一个输入框和搜索按钮就可以了，但是里面隐藏了很多交互细节。最近工作中刚好有搜索相关的设计需求，今天就来总结下搜索中的交互细节设计。本文的主要内容包括：搜索的作用搜索栏的形式搜索设计的原则搜索的作用用户是懒惰的，不愿意花太多精力去记忆信息，“无脑刷”的抖音玩法让亿万用户乐在其中。因此产品设计时需要尽可能的降低用户的行为门槛，“千人千面”推荐机制越来越重要。但是搜索查询是用户主动行为，相对更有掌控感，始终都是产品设计中非常重要的方式。搜索主要是帮助用户从海量数据中快速找到想要浏览的内容，例如百度、谷歌等搜索引擎能够成为单独的产品，可以看出搜索在互联网时代具有极其重要的作用。主要包含以下两个方面：1. 降低用户的行为门槛搜索实现了简单的输入，快速输出，只要几个关键字就可以获得符合用户需求的内容，将原有的用户行为成本转移给系统，从而让购物消费更加快捷、轻松。而语音输入和拍照搜索进一步降低了用户行为门槛。2. 减少用户操作，缩短行为路径搜索功能可以帮助用户快速定位信息，从而提高了用户对内容的触达效率。例如当用户有明确的购物需求时，不需要一步步点击商品分类，选择商品类型、品牌等信息，就可以快速直达自己所需的商品。搜索的形式搜索栏是搜索功能的起点，内容不复杂，但是也有多种形式。我简单的将其分为完全形式、简化形式以及类搜索形式 3 种类型。1. 完全形式我们大多见到的搜索栏是由输入框和搜索按钮组成的，用户输入相关内容后，点击按钮或者回车就可以执行搜索了。在完全形式下，根据搜索范围的设定，又可以分为全量搜索和定向搜索两种形式。全量搜索就是直接对全平台内容执行搜索，在搜索结果中分类展示。例如腾讯云 Web 端搜索功能，用户只需要输入关键字进行模糊搜索就可以了。定向搜索则是用户可以预先设定搜索范围，可以减少后续用户的筛选操作。例如淘宝 Web 端搜索栏可以设定“宝贝、天猫、店铺”3 个搜索类别。微信搜索栏兼具了两者的功能，既可以直接输入关键词完成全平台内容搜索，也可以设定范围定向搜索。完全搜索栏包含了分类项、输入框、搜索按钮等形式，因此占据的页面空间也相对较大，更适合重搜索场景的产品。例如在电商移动端产品中，虽然页面寸土寸金，但是搜索栏仍然采用完全搜索栏形式，辅助关键词引导，可以更好的抓住用户视线。2. 简化形式简化形式主要用于弱搜索的场景中，通常只是用图标来告知用户存在搜索功能，更有利于页面空间布局。当然形式也是随着页面的不同而改变的。今日头条的首页都是采用了完全搜索栏的形式，进入到资讯详情页面时，用户的核心任务是查看页面信息，用户的搜索需求则变成了弱需求，只是提供了图标入口，能够满足用户的快捷操作即可。3. 类搜索形式如果用户没有直接的搜索需求，而是在浏览商品过程中，对某类型商品产生了兴趣，希望查看更多相似商品。电商平台专门增加了“查看相似”的功能，用户不需要输入任何内容，只需要点击按钮就可以查找相似商品，从而提高了用户的搜索效率。搜索的交互设计原则完整的搜索流程包含了各种细节。例如搜索栏的形式、光标停留、输入状态、异常数据、搜索结果、二次筛选等等。整个过程没有非常艰深的业务内容，主要是交互的细节设计，可以总结以下 3 个设计原则。1. 信息引导移动端产品中页面空间有限，搜索栏更多的是作为入口，通常会增加关键词引导用户点击。用户点击操作后会进入到专门的落地页面，里面平铺了各种搜索信息，例如搜索历史、推荐内容，甚至各类营销榜单等，方便用户快速操作的同时，增强的内容的曝光和引导性。而在 PC 端产品具有页面空间优势，用户的搜索过程完全是通过搜索栏完成的。为了做好用户引导，搜索栏中会增加历史搜索记录，下方增加推荐关键词，帮助用户快速完成搜索。同时也可以唤醒用户对某些商品的兴趣和记忆，从而挖掘用户潜在的搜索需求。2. 用户效率搜索是效率型操作，如何快速帮助用户完成输入、结果查询是最主要的设计目标。例如当光标停留时，搜索栏就会呈现各种已有信息，方便用户选择输入。用户输入过程中，搜索栏通常会展示关键词联想信息，方便用户快速选择相关内容。淘宝甚至给出了二级的商品标签，引导用户更准确的定义商品，从而提高搜索的准确率，最终更好的提升用户的购物效率。当关键词与内容不匹配时，反馈结果前置可以减少用户的后续操作。腾讯云搜索栏输入的关键词不符合内容时，并没有跳转到结果页面再给出信息反馈，而是直接在搜索栏中做出反馈，从而减少了用户的跳转次数。由于 PC 页面的展示空间更大，用户的行为成本相对更高，为了帮助用户实时搜索，首页内容滚动时还会增加吸顶搜索浮层，方便用户快速操作。3. 隐私保护搜索历史有利有弊，不经意间可能会泄露自己的隐私。为了打消用户的顾虑，搜索通常都会增加清除记录功能。而在今日头条中细化了隐私保护项，搜索历史不是简单的全部清空，而是可以单独删除，便于用户保留所需的内容。另外还增加了无痕搜索模式，避免用户搜索之后会忘记删除关键词的场景。写在最后设计就是细节不断打磨提升的过程。搜索中还有很多细节设计，例如关键词的视觉引导性、常搜选项置顶、搜索结果的二次筛选等等，今天就不一一讨论了，欢迎大家留言交流。如何做好浏览器搜索设计？我总结了这9个建议对于搜索，百度百科给出的基本解释是: 给予一定的条件后再寻求,搜查。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/3-search-design-principle
用户 操作 会有 在 2022 年的 1 月底，任天堂的《宝可梦传说:阿尔宙斯》正式发布，并有着不错的销量，再一次为整个行业印证了第一“IP”的影响力，本作的一些改造，彻底改变了宝可梦捕捉和战斗的的体验，最具特色的是做成了开放世界的形式，就我个人而言，我认为是一次较为成功的改造，这也更接近我印象中的宝可梦世界。（画质？什么画质？不管出什么我们宝可梦玩家不都边骂边买）由于《阿尔宙斯》故事背景设定在古代，所以在接受程度上，也会减轻对以往玩法固有印象的不适感，游戏中宝可梦也可以更自然的做出差异化。本作增加了宝可梦训练家形象的自定义操作，允许用户创造更多的游戏风格，来增加游戏乐趣和个性化。至于大世界的探索体验，可以剧情获得海陆空的宝可梦坐骑，探索体验感将大大提升。在宝可梦对战的游戏设计中，进入战斗场景不再需要额外加载页面，训练家可以任意走动观看整个战斗过程，当然也会被技能打中，代入感极强。宝可梦对战流程上增加了行动速度的调整，也增大了更多游戏可能性。整个游戏设计的玩法是训练家穿越到远古宝可梦世界，通过 NPC 介绍的背景认知，根据剧情引导产生游戏行为的过程，过程中可以在宝可梦世界自由探索，收服野生宝可梦和完成剧情任务，一步步更新世界观认知，获得更高的能力去推动剧情发展，而最终大目标就是完成宝可梦全图鉴（收服所有宝可梦）。这个就是我对这款游戏的体验总结，这种游戏模式有着较低的适应成本，在不断更新对未知世界的认知后，循序渐进的方式降低了玩家的认知负荷，同时增加了新的趣味性，并且在整个剧情推动中会通过 NPC 反复引导要完成目标的方式，也给用户带来很明确的目标感和使命感，使用户可以更沉浸在游戏世界中，不会感到无聊和疲倦。除了整个游戏体验上有着较强的舒适度，在操作流程上也有许多令人惊喜的设计细节，接下来就通过尼尔森的十大可用性原则，看下本作做了哪些提升用户体验的设计。系统状态可见原则Visibility of system status设计应始终通过合理时间内的适当反馈让用户了解正在发生的事情，他们会了解之前交互的结果并确定下一步要做什么。1. 状态显示本作中会在各个地图中显示当前训练家的所在位置，并且会表示出方向，这对移动有着很大的参考便捷性。在训练家的窗口显示也会随着自身状态进行沉浸式的氛围渲染，比如低血量状态会出现红色边框，在草丛中会压低脚步声，并且未被宝可梦发现时会有暗色边框。2. 行为引导在适当的环境下，提供任务引导可以让用户了解当前任务信息，在显示区域中，标识任务位置指引，可以更具引导性，从而提升任务完成率。这些引导帮助让用户操作更加自如，可以减轻对游戏信息的记忆和识别，降低操作成本，让用户更专注于冒险和娱乐，而不是记忆。3. 操作反馈相较于产品应用，游戏的反馈方式更加多样化，可以通过听觉，视觉，触觉等方式。游戏设计中，用户情绪设计较为关键，在本作中，扔完精灵球后，会在一小段时间内才给出是否收服成功的提示，在这个过程中会有一段紧张情绪的积累，当收服成功时，有一个烟花效果显示，使获得感和成就感更强，而当收服失败时，会有较为低沉的音效提示对应当前心境，但这也是一段情绪积累，因为可以再次选择扔球。宝可梦的技能战斗反馈和一些场景上也会出现手柄震动，极大提升了游戏人物与现实环境的联动，更加有代入感和压迫感。环境贴切原则Match between system and the real world系统应该用用户熟悉的概念，遵循现实世界的惯例，让信息符合自然思考逻辑。在宝可梦中，有很多现实生活的参照，比如有跑步、关门开门声音表现，有春夏秋冬，白天黑夜的时间视觉差异，也有比如烟雾中隐藏位置，跌倒，溺水时挣扎等行为的模拟。撤销重作原则User control and freedom用户经常会执行错误的操作，当人们很容易退出流程或撤销操作时，它会培养一种自由和自信的感觉。退出允许用户保持对系统的控制，避免卡住和感到沮丧。本原则体现在每个用户界面中都有按键提示退出的操作。当遇到宝可梦可以选择逃跑，并且在战斗过程中也可以，在误进入战斗流程的情况下可以选择退出。一致性原则Consistency and standards用户不必怀疑是否不同的语言，不同的情景，或者不同的操作产生的结果实际上是同一件事情。遵循平台的惯例。也就是，同一用语、功能、操作保持一致。一致性原则主要体现在显示和操作的一致性。在宝可梦中同类商品具有外观的一致性，比如精灵球样子。而在不同地图中，相同 NPC 也具有形象一致性，对于扔精灵球和扔物品也具有按键操作的一致性。防错原则Error prevention比出现错误信息提示更好的是更用心的设计防止这类问题发生。在宝可梦中，为了防止出错做了两种处理方式。一种是二次确认，主要的场景是战斗中扔精灵球等行为和地图位置的移动等；另一种是行为终止，当可能会发生更严重后果且不可逆时出现，如物品消耗为防止意外情况则直接置灰或不生效，在一些剧情未开启时，会有 NPC 挡路不让通行。易取原则Recognition rather than recall系统的使用说明应该是可见的或者是容易获取的，最大限度地减少用户的记忆负荷。在功能使用上，一般都是先识别后记忆，极可能的显示描述可以减少用户记忆成本，在宝可梦中，物品都有说明信息，来减少对物品功能的记忆。宝可梦世界中会有不同属性技能的伤害差异，本作中在战斗过程有技能克制的提示图标，可以让用户更好的判断该用什么技能来战斗，通过提示相关信息，帮助大家在战斗中做出最佳选择，增强玩家控制感。灵活高效原则Flexibility and efficiency of use系统可以满足有经验和无经验的用户，并且允许用户进行更加便捷的重复操作。在宝可梦中，也有很多功能可以满足新手用户和熟练度较高的资深用户使用，并且衔接较为流畅，比如用户可以选择自己制作物品，也可以选择直接购买物品；可以选择战斗收服宝可梦，也可以选择直接扔球收服。因为宝可梦坐骑的设定，用户可以随时唤醒宝可梦坐骑，或者在满足条件的特定场景下，显示快捷操作的图标来临时唤醒。简约美观原则Aesthetic and minimalist design信息中不应该包含无关紧要的信息，在信息中每增加一个单位的重要信息，就意味着要减少相应的弱化一些其他信息，这个主要体现在信息优先级的展示。在宝可梦中常规界面和战斗界面的信息显示有着不一样的信息优先级显示，并且可以选择隐藏和显示部分信息，可以做到更大的显示视野。任务列表也做了相应的处理，会隐藏已完成的任务，定位方式来显示未完成的任务。容错原则Help users recognize, diagnose, and recover from errors要避免用户犯错误，无法避免时，要提供解决方案准确地指出问题，并建设性地提出解决方案。在宝可梦中，当前物品不可用时会有不同显示用以区分，购买物品的金额不足等情境下也会有提示；而错误后的解决方案主要体现在，操作失误导致任务失败后可以重来，宝可梦的技能学习可以反复操作等地方。人性化帮助原则Help and documentation系统最好不需要任何额外的解释，但是需要提供文档以帮助用户了解如何完成他们的任务。帮助和文档内容应该易于搜索并专注于用户的任务。当对用户来说属于新的信息时，提示和说明就显得格外重要，在宝可梦中首次向相关用途的 NPC 对话时，会有说明的内容，并且之后可以通过对话反复查看。唤起系统操作界面，有图形化的说明来显示手柄各个按键的说明。作者更多文章：怎样才算一个好的交互设计方案？做好这5个维度就够了！我们在日常使用某个 APP 时，经常会听到别人说某个产品用户体验很好，但是一问具体怎么体验好，要么说不出要么说不全，那到底什么样的设计才算是用户体验好？阅读文章 > 欢迎关注作者微信公众号：「小馒头的交互笔记」本篇来源：优设网原文地址：https://www.uisdc.com/legends_arceus
用户 需求 他们的 编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从心理学和认知科学的角度入手，基于「自我决定论」重新梳理了驱动用户的3个核心心理需求，结合实际的设计案例进行了演示和解读：在 Nielsen Norman Group，我们倾向于说用户不是懒惰的，而是高效的。用户所做的一切——包括使用网站和APP——都需要一定的精力和注意力。没有人有无限的精力和时间，所以用户只做他们最有动力去做的事情来保持效率。用户有动力去做一些事情，有的是因为他们必须这样做，有的事情则是因为他们自己内心深处想要做。心理学家 Richard Ryan 和 Edward Deci 深入研究过人类的行为动机，也提出过一种动机理论，称为自我决定论，它描述了人需要具备了三种基本的心理需求，才能具备「动力」来驱动他们为某件事情投入时间和精力：自主：是否发自内心而非受人影响归属：是否基于互动的本能，能否制造与人互动的机会胜任：了解自身的能力，对于结果有明确预期事实证明，人们倾向于有动力去做任何能满足这三个需求的事情。当这些需求得到满足时，人的内心也更加自洽而健康。因为这些需求相互关联，几乎可以遵循这套逻辑，来满足任何合理的需求，或者呈现出不错的效果。越是符合这3个条件，用户就越有动力和幸福感。让我们依次看看三种能够赋予用户以动力需求，然后就可以梳理出用户体验设计中有效激励用户的方式。自主当用户拥有自主权时，他们可以做出与他们的优先级和价值观相一致的选择，而不是被迫按照别人规定的方式做事。例如，为什么我们大多数人都期待周末？在工作日中，我们在如何利用时间方面的自主权有限：我们必须起床、上学或工作、参加会议、按时完成工作，并且通常按照别人规定的方式工作。然而，在周末，我们可以自由决定如何利用我们的时间——我们拥有更多的自主权。归属与他人产生联系，意味着用户可以以有意义和一致的方式，感受到他人的理解和支持。我们天生就是社交动物，这意味着，无论我们是内向的、外向的还是介于两者之间的人，当我们与他人进行有意义的互动时，我们都会茁壮成长。假设有一个刚刚接受新工作的人，一开始，他可能会因为每天上班而感到压力，因为那里没有他感知里与他有联系的人。然而，随着他开始了解同事并建立深厚的关系，他将开始与同事互动并享受在那里。这是因为他们的工作现在满足了他们对归属的需求。胜任人大都不喜欢无能的感觉。胜任感意味着我们在从事一项任务时，可以有效地取得最终的成功。第一次去滑雪的人会在设备的选取上挣扎，可能会摔倒很多次，感到寒冷，当他们看到周围有经验的滑雪者时，会感到沮丧。如果邀请新手第二次去滑雪，他可能会犹豫，因为他觉得自己没有足以胜任这一切的能力。只有在这个人花足够的时间，发展出相关的技能之后，他才会有足够的能力去享受滑雪。为何要关注用户体验设计中的这3个需求？在你的期望中，用户使用你的产品时，是因为他们必须这样做，还是因为他们想要这样做？满足用户基本需求的设计，能够制造动力的设计，既是令人愉悦的，又是易于使用的。赋予产品这些品质，是促使用户继续使用产品和服务的动力。我们常把这种体验称为「深乐」（deep delight，一种更深层次的愉悦感）。尽管我们不能总是改变用户在特定领域中，必须执行的任务类型（例如，制造或政府任务），但针对自主、归属和胜任进行设计，可以在很大程度上改善用户执行这些任务的体验。当然，这里可能会涉及到一些更为细分的问题，这些可以在其他的文章中进行探讨。在这里，我们结合一些实际设计案例，并分析它们是否满足三个基本人类需求。自主的案例包含自主性的设计，让用户拥有控制权。（控制权也是10 种可用性启发法之一）允许用户选择他们使用UI的方式，有助于感受到对这种体验的控制权。这样一来，由于他们投入了时间和精力，因此通常会导致他们对产品赋予更大的个人情感价值。实现自主权，有时就像允许用户配置应用程序、选择自定义颜色或按照自己的节奏查看内容一样简单。游戏化体验通常将自主性融入他们的设计中。设计得当的游戏化，为用户提供了不同程度的自由度来选择他们的体验路径。语言学习 APP Duolingo 和代码学习 APP Mimo 让用户可以自由选择与哪些内容进行交互，以及何时进入下一级别。Duolingo（左）和 Mimo（右）都是游戏化应用程序，允许用户选择他们学习内容的顺序和速度，借此来提升自主性。用户还可以自由决定他们想要达到的掌握水平。强迫用户采用一种既定方式的设计，限制了用户的自主权。Justanswer.com 让用户在聊天功能模块中输入信息，而此外不提供任何其他可访问的内容。尽管这种设计，在一定程度上和用户在律师办公室可能拥有的体验高度类似，但它使用户与网站交互的时候，深陷固定的方式。这个网站可以通过展示目录、常见问题甚至常见问题页面，来提供其他学习堪萨斯州法律的方法，而不只是聊天。Justanswer.com 强制用户在聊天功能中输入他们的问题以获得帮助。它不提供任何类别或常见问题。归属的案例当用户感觉到其他人有相同的观点，并理解他们的时候，他们会很高兴。了解用户在不同时间点不同情况的感受，并且构建与他们产生情感连接的产品，可能是一项艰巨的挑战。大多数情况下，归属感会需要较长时间的酝酿，但会受到许多小互动的影响。发现加强与用户关系的机会，最常用方法，其实就是传统的用户体验研究的策略，例如用户访谈和日记研究。这些满足用户相关性需求的机会，通常在用户历程图中有所呈现。设计师可以向用户展示他们了解他们的需求，其中一种方法是只给用户传递用户认为绝对最有用和相关度最高的内容。没有什么比包含简单、有用内容的适时消息，更能让用户相信他们被理解的了。Apple Watch 上的这条消息有效地与用户产生了联系，因为它使用了鼓励的语气。而发送建议的时间安排（傍晚）也使它显得非常现实，并展示了它对用户能力和环境的理解。当你认为你认识的人用错误的名字称呼你时，你可能很难从这种尴尬的情绪中恢复过来。同样的，组织和产品如果在错误的时间做了错误的事情，这种「不了解」会让用户很难从这种情况中恢复过来。在用户购买新手机壳后不久，Peel 在一周内发送了四封促销短信——试图向同一用户推销更多手机壳！这些信息就显示出 Peel 对用户的需求出现了错误的理解。在客户购买了新手机壳后，Peel 立即反复尝试让他们购买额外的手机壳。当用户觉得他们可以信任一个企业或组织时，他们最有可能留下来，保持关注。在浏览网站、使用移动 APP 和接收消息时，用户会下意识做出可信度上的判断。帮助用户，或者让用户感觉你了解他们的个人需求，可以表现出同理心，并增强他们与你关联感。另一种帮助用户满足归属感需求的方法，是促进个人之间的交流——也就是说社交，让用户相互联系。虽然这种类型的归属，在通信类产品中最容易实现，不过也可以帮助用户做共享内容，或将社交包含在工作流程当中。胜任的案例作为设计师，我们总乐于在产品中创造尽可能多的实用功能和服务。虽然我们的工作是创建尽可能强大的设计，但如果不帮助用户熟练使用它们，许多功能可能会被埋没。有效地盘活系统会带来更高的用户满意度、安全性、效率，以及许多其他的好处。话虽如此，即使是面对简单的移动端 APP 类产品，用户如果不借助教程 和新手引导，也无法顺利的玩转所有功能。由于高交互的成本和认知的压力，不能期望用户在使用应用程序之前阅读教程。当用户碰到不知道该做什么的情况时，引入有用的工具提示或叠加层说明，通常会好得多。尽管这种帮助在最近的许多设计中变得司空见惯，但仍然经常被误用。重要的是记住，最终衡量标准是它们是否有效地帮助用户能够更好使用产品。如果用户测试表明，它没有解决用户的问题，也没有提升用户的使用熟练度，那就把你的时间和精力放在改进设计上吧。如果一个系统的使用，很容易让用户得到胜任感，那么这个系统是非常有用的。好设计。在第一次打开 APP 时，Otter 会为 APP 的基本功能提供一个简单的教程。理论上，教程可以帮助一些用户变得更有能力，更「胜任」，不过设计虽好，但是多数用户会选择完全跳过教程。更好的设计。Otter 等到用户多次打开应用程序后才给出这个提示，并且只关注用户可以执行的某一项潜在操作。在用户对使用日历或日程功能表现出兴趣之前，这个提示就被推送给了用户。最好的设计。在用户第一次在汉堡菜单中选择「我的日程」之后后，会显示此界面，向用户展示如何使用日历的功能。这种方法在帮助用户熟练使用新工具方面，最为有效。当一个复杂的设计不能帮助用户变得能力更强时，这对用户来说是非常令人沮丧的事情。他们最终可能会浪费大量时间在其他地方寻求帮助（网上搜索答案或第三方视频教程）以获得胜任这个产品的能力。在复杂和专业应用领域尤其如此。FileZilla（一种文件传输协议服务）没有提供帮助新用户熟练使用它的说明。用户必须自己发现 FileZilla 的功能。3种需求有时会发生冲突在某些情况下，在单个UI 中自主性、归属感和能力胜任性，要同时兼顾是具有挑战性的。这种冲突的一个典型例子是使用向导。一方面，对于需要输入大量复杂信息，或需要经历复杂的分支流程的用户来说，向导可以大大提高他们的能力。然而，实际上，APP内置的初始向导又限制了自主性，作为新用户，进入向导就意味着将控制权交给了系统。TurboTax 使用向导来帮助用户，让他们胜任完成复杂的任务（纳税）。但是，这种方法要求用户放弃大部分自主权，因为系统会根据他们的选择，来决定推送给他们相关的内容。在这种情况下，与潜在用户一起测试设计，以确定三个需求中的哪一个优先级更高，这个至关重要。用户是否能够发现放弃自主权以提高能力更有帮助这件事情呢？就像 TurboTax 的情况一样，用户会不会宁愿在复杂性上稍微挣扎一下，会认为保持自主权更重要？满足所有三个需求值得简要说明一下的两个不同行业，它们是能够满足所有三个基本需求的领域。这里提到的两种类型的例子，是开放世界的游戏和协作设计工具。开放世界观的游戏开放世界的游戏，例如我的世界，通过以下方式满足这三种需求：自主：用户几乎可以完全自由地随心所欲地漫游和探索。当用户在这些开放的环境中将精力投入到他们的选择中时，他们可以定制花地创作，并且建立了强大的情感连接。归属：用户可以与同一个世界中的其他人一起玩，并协同构建，获得乐趣。在许多情况下，系统还支持实时通话或聊天，这可以增加交流的丰富性。胜任：这些游戏通常很容易学习。如果设计得当，它们还允许专家用户发现隐藏的快捷方式和机制，从而提高游戏效率。Minecraft 成功地满足了对自主、归属和胜任的需求，因为它允许玩家自由地玩游戏，支持与他人的联系，并且易于学习。协同设计类工具协作设计工具（例如 Figma）与开放世界的游戏形成鲜明对比，因为它们是特定领域的生产力工具，它们通过以下方式满足三个基本需求：自主：用户可以使用工具中提供的资源，创建几乎无限数量的不同设计。在大多数情况下，无需担心可以使用的图标、形状等数量的限制，也无需担心存储容量的限制。归属：用户可以轻松地与任意数量的同事共享设计，并以支持彼此工作的方式，同时处理相同的设计。胜任：这些类型的工具通常会提供大量有用的指导，例如下拉菜单中的键盘命令、新功能教程以及用于提问和帮助的活跃的论坛。（这样的论坛也有助于满足自主性的需要）。Figma 是一种原型设计工具，它还通过为设计师提供几乎无限的功能、与他人协作的能力以及学习许多可用功能的支持来支持所有三种需求。结论几乎可以肯定的是，仔细观察当前流行的数字产品，通常会发现这些产品满足人们对自主、归属和胜任的需求的方式。这项工作通常会因行业和用户任务的重点而有所不同，但你可以确信一件事，就是所有人都有这三种需求，并且会因此产生动力去使用对应的产品——无论是哪个行业。延伸阅读：用户为什么会点击这个链接？信息气味理论解释了一切编者按：用户是怎么判断点击A链接而不是点击B链接？阅读文章 > 从 4 个角度，聊聊长尾效应是如何帮助产品进行提升的编者按：长尾效应不是一个陌生的词汇。阅读文章 > Facebook 被上亿人指责的背后，可能是因为坎贝尔定律编者按：从 KPI 到 北极星指标，设计和产品团队都非常着迷这种杀手级关键性指标。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/autonomy-relatedness-competence
用户 玩法 文案 这两天没有绕过人性中的“贪念”，参加了拼多多提现活动，好在最后获得了 100 块钱的收益。不过想来我应该是比较幸运的，大部分用户肯定是被割韭菜了。今天就复盘下拼多多玩法中的细节，分享给大家。主要内容包括 4 部分：好友背书——建立信任玩法设计——锁定用户激励机制——吸引用户持续投入简单设计——交互及文案设计好友背书事情经过是这样的。下午的时候，突然收到朋友的一条微信信息。之前对拼多多的这种玩法是比较抗拒的，虽然也被拉着助力过几次，但是基本没有深度参与。因为大家都有基本的共识，这是一个“骗局”，大部分用户根本无法成功提现。但是这次有了朋友的现身说法，非常具有煽动效应，并且说今天特别容易提现。拼多多助力完成后，我也不自觉的想要试一把。熟人社交更容易产生信任感，促使用户行动。拼多多借助微信，在用户自传播过程中，会有意无意地为活动背书。而身边的确有成功案例，所以讨论起这些活动时，也会经常提到“我上次提现了”、“我有朋友就成功提现了”。或许这些案例都是很久以前发生的，但是由于稀缺性或者令人羡慕，在用户心中就成为一种符号，总是不断被周围的好友提起，让更多的人觉得提现也不是不可能的。所以很多人一边说着不可能成功，一边又不甘心的想要尝试一下，万一成功了呢。参与之后，你会发现其中的玩法设计真的是一环套一环。玩法设计这种运营活动需要依靠好的玩法设计，才能在初始阶段抓住用户，并激励用户不断地去分享拉人头。主要有以下几个方面：1. 放大利益，缩小差额现金提现玩法不知道是不是拼多多最先发明出来的，但是拼多多玩的最彻底。其他电商平台的玩法基本是购物券、代金币，金额偏小，最终都会回流到电商平台。现金提现玩法，而且金额比较大的情况下，人性中的“贪念”更容易被激发出来。另外拼多多给用户非常高的初始金额，只需要再完成 0.1 元就可以提现。收益和付出的巨大差额，让不明真相的用户认为很容易就可以完成任务，很好的提高了用户参与的积极性。2. 营造幸运感、强化价值拼多多的大额现金不是直接给到用户的，而是加入了翻倍过程，并且通过各种文案、玩法，增强用户的幸运感，让提现额度的价值感更强。3. 心理玩法，建立错觉降低用户心理门槛在各种救援活动中都有“黄金时间”的说法。拼多多同样在游戏刚开始阶段，通过各种玩法牢牢地抓住用户。比如赠送、翻倍卡、直接提现卡、专属特权等等，不断地减少任务金额，并把用户带入到玩法中，产生提现特别容易的错觉，保证用户不会轻易离开。强化获得感在活动过程中，拼多多还增加了体验玩法。用户不注意的情况下，以为真的提现成功了，那一刻激动的心情会激发用户对提现成功的渴望，吸引用户更加积极的去分享。正向激励“望梅止渴”的故事大家都知道，就是要给别人看到希望。拼多多的“预测玩法”大概类似这个效果。通过一系列的视觉场景，告诉用户 10 分钟之内，再邀请 1 人就有机会提现，帮助用户建立信心和希望。负面情绪引导对于之前曾经玩过游戏，但没有成功提现的用户，拼多多还专门设置了时光倒流的玩法。告知用户上次如果再努力一把，就可以成功提现了。希望利用错失的负面情绪，激励用户要珍惜本次机会，不要轻易放弃。经过这一系列的操作，用户基本上就被拼多多洗脑了，此时离提现额度已经相差无几了。沉没成本加上大额现金的诱惑，为后续的拉人头助力做好了充分的铺垫。激励机制进入分享环节后，拼多多增加了各种兑换道具，从金条到宝石、再到红包，一层层地套娃。用户为了赢得现金，就需要不断地找好友助力，获得砸木板的机会。但是这种分享是需要消耗人情的，越到后期难度会越大，单靠用户自己可能无法坚持下去。根据用户行为模型，拼多多通过降低行为门槛，提高用户能力 2 个方面，激励用户玩下去。1. 降低行为门槛——赠送玩法拼多多采用的是砸两块木板，赠送一把锤子的方式。通过这种玩法，降低用户行为的难度，不断迫近提现目标，最终增强用户的行为动机。2. 提高用户能力——定向激励玩法定向激励就是用户分享给指定的用户，最高可以获得 10 个锤子。用户为了尽快提现，很可能会积极分享给这些用户，希望获得更多的锤子。至于能否能够获得最高奖励就另说了，但是激励分享的目的已经达到了。交互及文案1. 交互设计玩法设计是这类游戏化运营活动的核心，所以交互操作上讲求越简单越好，拼多多的交互也是如此。对于需要用户执行的操作，通过 3~5S 倒计时自动完成操作，保证用户完成内容阅读后，就直接进入下一环节。而某些场景下，弹窗只提供一个执行按钮，不显示关闭按钮。如果用户不杀掉程序进程，根本不能退出游戏，只能被动地接受信息。2. 文案技巧另外拼多多在文案方面也是下足了功夫。游戏中充斥着“直接提现”、“手气真好”、“提现 800 元”，“只差 0.01 元”，“额外获得 300 元”等等撩拨用户的字眼，并且都被着重强调展示。而“有机会”、玩法规则等模棱两可的提示都被弱化处理了。很多用户玩到最后，可能也不明白游戏规则是什么。只是知道去分享，就有机会获得提现。写在最后拼多多玩法设计确实有一套，特别是对下沉市场用户有很高的诱惑力。听同事讲，他的父母和家里亲戚朋友专门组建了一个微信群薅羊毛，也时不时有所收获。但是我相信拼多多肯定收获了更多…为什么拼多多红包让人停不下来？来看这篇深度分析！本篇文章是在优化红包领取流程中对用户情绪进行的思考，主要围绕情绪与产品的关系，带入红包领取优化的几个关键点，梳理用户情绪在设计中的价值。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/pinduoduo-design
用户 负荷 认知 我们都说好的设计不是引人注目的，而是自然而然帮助用户完成任务，甚至用户都没发现。这种自然而然感觉背后往往是对人类行为、心理模式的研究，在基于研究转化到在设计上的结果。接下来我们就从日常生活的案例，一起来辨析辨析设计师需要知道的重要法则。认知负荷认知负荷是指用户看到界面后需理解、思考、回忆、计算过程中脑力消耗。大家常常听到的“Don’t make me think”，指的就是不要让用户思考，不要增加额外的认知负荷。不理解没关系，我们来看一个生活中的小案例：想必大家家里应该有过这样的遥控器，一个板上密密麻麻的按钮，让人摸不着头脑，没用都害怕，压根不知道从何下手。就算知道怎么用，一开始也要花较长时间找到对应按键在哪里。这么多按键，我们每一个功能都会使用么？用来用去无非就只有某几个按键高频使用。而上图左边这样的设计无视使用频率，粗暴平铺功能，恰恰给用户施加了极大「负荷」，这样的负荷严重反人类，因为人脑特性就不善于处理这么高的负荷，所以设计师的首要工作任务就是要降低用户的「认知负荷」、「合理调节认知负荷」，让用户顺利的完成任务。降低、合理调节认知负荷的手段可采用：减少选择（多选择反而不知道选什么，还不如二选一或只有一个选择）拆解复杂，循序渐进保持设计的一致性视觉层次分明，帮助用户获取信息1. 减少选择选择越多反而不知道该选什么。当用户有太多选择时，他们往往会感到沮丧。就算一个产品拥有世界上所有的功能，如果因为界面内容过多选择照样会让这个产品显得无比不友好。所以我们在设计时，还是要先贯彻交互设计的第一策略：合理删除，先做减法，尽可能地消除一切干扰。但如果因为业务诉求无法剔除，则可以考虑隐藏的方式，将多的部分统一放在一个隐藏菜单、浮层中，用户触发后再显示。2. 拆解复杂，循序渐进增加步骤会导致每一步的转化流失，所以大多不建议有多步骤的任务路径。但是实际业务中，不可避免需要用户填写、选择的内容就是很多，且必须要有（B 端更是常见），这时我们可以将其全部整理出来，根据步骤之间的亲密性进行分组，将大任务拆分成多个子任务，每次只展示一小个模块，这样用户就可以轻松地一次处理一小块信息，提高处理效率。分步骤的选择、填写常见于一些报销、保险理赔、医疗等信息填写的表单中，由于填写的内容多且复查，如果不分类，直接全篇幅展示在用户面前，用户可能还没填写就被吓到了。像下方这样拆分成 2 个步骤，用户可以轻松完成第一个步骤，进入第二个步骤的概率就会高很多，因为用户已经付出了沉默成本~3. 保持设计一致性设计的统一性是保证体验的基础，因为可以尽可能降低用户的认知负担。所以设计师在设计时应该使用用户熟悉产品的视觉、交互的设计，这也就是为什么这么大厂都有自己的组件库，为的就是保证产品在多次的迭代过程中都能保证设计的一致性，避免产品各个模块在团队协作过程中出现另类的页面，导致用户突然很不习惯。在视觉上需使用一致的配色方案，因为我们的眼睛对颜色敏感，在界面中使用相同的颜色，人们会更容易找到重点的部分，如微信规范中的色板：在 icon 中需使用熟悉的与现实生活中有映射的 icon，不要产生歧义。4. 视觉层次分明，帮助用户获取信息清晰的视觉层级能够帮助用户更好的获取信息重点，从而帮助用户减少认知负荷，视觉上诸如文字大小，按钮大小等分布都需要根据重要程度进行层次的划分。符合用户日常习惯的视觉呈现方式也能够极大程度上让用户获取信息过程中更加顺畅并且能够便于用户记忆。符合用户日常行为的交互方式既能让用户容易学，并且操作起来更加舒服，还能增加一些趣味性，毕竟谁能拒绝与生活中行为相似的交互方式呢~写在最后设计师在设计过程中，通过降低用户的认知负荷实际上为了提高产品的易用性，降低用户学习与操作成本，从而让用户能够顺畅使用产品完成自己的任务。认知负荷越小，可用性越高！更多设计法则 https://www.uisdc.com/zt/design-rules欢迎关注作者微信公众号：「小发的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/cognitive-load-rule
标签 用户 信息 在移动端产品中，标签不是核心内容，甚至有点不起眼，但是谁都无法忽略它的存在。特别是在电商平台中，标签已经成为了不可或缺的设计形式。今天我们就来总结下标签设计的细节。文章主要分为 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
用户 这一 原则 编者按：在做设计的时候，设计师到底要遵循哪些设计原则？我们曾经有过很多相关的文章，不过这一篇，有些不一样。这篇文章出自资深 B 端 UI/UX 设计师 Taras Bakusevych ，他对于产品、视觉、体验设计上，都有深入的钻研，而这些钻研是实实在在的项目喂出来的实战经验。Taras 的这篇文章所挑选的 10 个设计原则能够帮你更好地做好设计，具体往下看：设计原则是构成任何良好产品设计基础的各种考虑因素。您可以在网上找到许多列出各种原则的文章，但它们往往缺乏我们日常遇到的产品的具体示例。这里有十个原则可以帮助您创建更实用、更有效和更身临其境的设计。1、灵活性/可用性 权衡原则随着系统灵活性的增加，系统的可用性会降低。灵活的设计让产品具备更多的功能，满足更广泛的需求，但这回让执行和实现这些功能的效率普遍被降低，并且效率会低于专用的工具。在平衡产品的灵活性和实用性的时候，请深入剖析用户的实际需求，以及用户本身的学习能力和成长性，以及发生改变的可能性。在复杂度、可用性、使用时长和投资需求方面，灵活的产品，通常意味着巨大的成本。正如我们所知道的那样，Adobe Photoshop 被设计师、平面设计师、艺术家、摄影师和创意人士广泛使用。随着 Photoshop 每个版本都会更新大量的功能集，不断扩展它的用例范畴，它的用户界面变得越来越灵活也越来越复杂。与 Photoshop 不同，Figma 是专门为 UI 设计而构建的，它的功能集就显得非常精简，无需太多培训即让用户可充分利用好它简约的界面，开始设计。如何用好这一法则：当无法清晰预测目标受众的需求时，让产品保持尽可能大的灵活性。但是，不要忘记为用户提供智能的初始设置，并且要提供开箱即用的解决方案。每个新功能都会增加产品的复杂性，所以需要确定各个功能的优先级，并缩小范围。专注于关键产品，围绕核心的价值点。每个新版本都尝试改进现有功能集，而不仅仅是添加新功能。 限制相同需求的替代方案的数量，设计更具规范性的用户界面。2、美即好用效应用户倾向于认为美观的设计更实用。我们倾向于相信看起来更好的产品用起来也更好 ——即使它们实际上并没有那么好用。1995 年，在测试 ATM 机的 UI 的时候，测试了它的 26 种变体，测试过程中要求 252 名研究参与者对每种设计的易用性和美感吸引力进行评分。研究人员 Masaaki Kurosu 和 Kaori Kashimura 发现，用户对于 UI 的易用性的评估，会强烈地受到界面的美感的影响。在下面的案例当中，GAP网站的页面报错给予的信息非常有用，它不会使用用户不熟悉的错误代码（如 404 ）并列出错误发生的可能原因。此外，该页面使用明确的号召性用语，并且提供联系方式。与平淡无奇的 Gap 页面相反，皮克斯的 404 页面专注于在这种压力大的情况下，用有趣的插画和文案唤起用户积极的情绪。他们使用更丰富的视觉和俏皮的角色，试图让你会心一笑。如何用好这一法则：渴望创造美学设计。用户更有可能想要尝试视觉上吸引人的产品，并且他们对小问题更有耐心。因此，这是值得投入时间和金钱的。美在旁观者的眼中。对您来说可能在美学上令人愉悦的东西对您的目标受众来说可能并不相同。投资于研究和测试。在您的设计中，请参考吸引力偏差、黄金比例、计数偏差和三分法则等原则来影响美学。3、容错原则好的设计应该帮助用户避免错误，并在错误发生时，帮助用户最大限度地减少错误所造成的负面影响。我们是人类，因此，我们会犯各种错误：当用户采取行动并得到意想不到的结果时，比如拼写错误，又比如由于知识空白或对情况的错误评估，或者由于注意力不集中，记忆力下降。亚马逊搜索可帮助购物者获得他们想要的结果，即使输入错误。当检测到拼写错误时，系统将显示更正的搜索词的结果。Gmail 也会利用许多方法使其界面具有更强的纠错能力。发送电子邮件时，应用程序会制造一个微小的刻意延迟，让用户有机会在改变主意时取消它。或者当邮件正文中提到「附件」的情况下，发送时会提醒用户邮件中需要包含附件，以防用户忘记。如何用好这一法则：避免错误的最佳方法，是创建具有良好可供性的设计，模拟出事物的物理特性，引导用户正确使用和交互。提供可逆性的功能，建立「安全网」—— 借助可逆的操作防止灾难性错误。确保用户在执行重要且不可逆转的操作之前，进行确认。关于可供性设计：那些很熟悉但又叫不出名字的设计法则：功能可供性Affordance 这个设计概念至今没有统一的中文译法。阅读文章 > 4、稀缺性原则当产品或服务供不应求或者经常处于稀缺状态时，它们就会变得更受欢迎。品牌经常会使用稀缺性原则来说服人们购买产品，很少有原则能比稀缺更有效地促使人类采取行动。许多生理现象促成了这种原理发挥效应。害怕错过（FOMO）——担心自己错过可以使自己的生活更美好的信息、事件、经历或感觉。甚至有整个类别的产品都被称为「韦伯伦商品」 ——这种商品的需求随着价格的上涨而增加，因为它具有独特的性质，可以作为身份象征，因而具有极强的吸引力。在大多数旅行预订网站（例如KAYAK Booking）上，列表中都会显示一个注释，即仅以特定价格留下几个座位/房间/物品。新的HYT手表限量 5 块，是经典的「韦伯伦商品」，由于独特的设计和体验，它可能以 2-3 倍的成本价成交，甚至会出现更高的溢价。如何用好这一法则：根据产品或服务的性质，可以采用各种策略来制造稀缺性：-向「特权」用户组提供的独家信息-向「特权」用户组的相对更多访问权限-突出产品或者项目数量有限-出现产品供应突然下降的局面-向客户传达了高要求的明确指示如果没有仔细考虑后果，促使用户迅速采取行动，可能会给企业带来巨大的短期收益，但其中许多策略通常被认为是「黑暗的用户体验」，从长远来看可能会损害品牌忠诚度。5、信噪比原则在用户界面或通讯过程中，相关信息与不相关信息的比率，就是信噪比。人机交互在本质上是信息的传输和接收，任何过度设计的样式或信息，以低效或不恰当的方式呈现，都会降低信号质量，换句话说，就是增加设计的「噪声」。高信噪比（高有效信息，低噪音）是任何 UX 设计师理应追求的关键目标。干扰有效信息传递的原因有很多：缺乏层次结构、信息过载、高度风格化的排版和图表、不清晰的图标和不适当的视觉效果等。下面的范例当中，我们看到了 3 个具有不同噪声比的电商 APP 的主页示例。Aliexpress 应用程序设法显示大量信息、链接和号召性用语。不幸的是，这与明亮的用户界面和华丽的背景相结合会导致过多的噪音，几乎不可能专注于特定的事情。如何用好这一法则：确定关键用户的目标以及用户做出决策所需的基本信息，保持设计足够简单。平衡设计中每个元素的大小、对比度和视觉重量。使用文字排版、颜色建立清晰的视觉层次结构，并将重点放在应该传达给用户的信息上。6、80/20 原则80/20原则也被称为帕累托原理，它反映出任何大型系统中的大部分影响都是由低百分比的变量引起的，这个比例不一定是精准的 80:20 。你可以看到这个原则几乎无处不在。尽管 80/20 原则在经济学中经常使用，这一概念在 UI 设计、质量控制和工程当中有广泛的应用。这里有些例子：80% 的产品只会被用到 20% 的功能80% 的错误是由 20% 的组件引起的公司 80% 的收入来自 20% 的客户80% 的进步来自 20% 的关键努力80% 的想法将来自 20% 的人iOS 计算器应用程序充分利用了 80/20 规则。在默认纵向模式下，界面所呈现的功能，是大部分用户会用到的计算器功能。不常用的功能在横向模式下才会呈现出来。如何用好这一法则：利用数据分析来优化您的设计工作。比如找到对应公司收入的 80% 的 20% 的客户，他们在 80% 的时间内所使用的 20% 的功能，从这些关键性的部分入手，而不是让团队漫无目标地将大部分时间平摊到所有功能在研究、设计和测试上。始终关注设计研究测试的投资回报比，用户消耗时间和结果之间的回报比例。关于 80/20 原则，这篇文章有更加深入的探讨：资深设计师是怎样用「帕累托原则」做设计决策的？编者按：这篇文章出自设计和用户体验设计机构 NNGroup，作者为 Evan Sunwall，主要探讨的是「帕累托原则」也就是我们所熟悉的 80/20 原则。阅读文章 > 7、MAYA 原则当产品的设计足够的前卫新颖，但是仍然在用户的接受范畴以内，它最有可能获得商业的成功。在新鲜的、独特的设计灵感刺激下，所诞生的原创性的设计在各种层面上都是被重视的。话虽如此，经验研究都表明一件事情，人们更喜欢熟悉的体验。熟悉感给我们一种控制感和安全感。「如果解决方案所呈现的和用户习惯、日常规范有太大的偏离，普罗大众的品味不一定真的准备好接受这种超越他们认知的解决方案。」Raymond Loewy — 著名工业设计师，可口可乐瓶、壳牌石油标志等设计者谷歌眼镜是一个大胆的尝试，它真实地将世界推向未来。它的营销活动在很多层面上有炒作的因素，同时也引起了相当多的批评，很多人对其价格、安全性和隐私性表示担忧。同时，谷歌眼镜似乎缺乏「酷」的因素。《财富》杂志将诺基亚 7280 列为 2004 年最好的产品之一。虽然它的设计受到了很多人的称赞，甚至有一些狂热的追随者，但总体来说销量并不理想。如何用好这一法则：如果你必须解释你的设计，或者它需要大量的培训和「帮助」文档来支撑，那么你的设计过于激进或过于复杂。尽量创造几乎不需要进行解释的设计。了解你的目标受众的能力范畴、学习速度和成长能力。逐步推进设计，使用渐进式方法，让产品达到最终愿景。8、沉浸式体验当用户不再有意识地关注「真实」世界，并且完全沉浸在创造出的体验中，这时的精神集中状态就是「沉浸」。当我们玩游戏、从事迷人的任务、跳舞时，可能会体验到这种忘我的沉浸感。这种伴随着愉悦感的感知，通常表现为时间感（感觉时间过的很快）的改变或自我意识的丧失。这些元素有时候可以彼此独立出现，但只有组合起来才能构成所谓的「心流」状态。Pokemon Go 是一款 在 2019 年席卷全球的游戏，它是通过游戏化、讲故事并且结合 AR 创造身临其境体验，它是「沉浸感」的最佳范例之一，在游戏过程中，玩家会完全沉浸在抓住「宝可梦」而完全忘我。在游戏上线 200 天内，玩家在这款游戏上的花销破纪录地达到了十亿美元。IKEA Place 让用户可以在自己家啊中虚拟放置真实比例的 3D 模型，结合最新的 AR 技术和宜家的智能家居解决方案，你可以以前所未有的方式体验宜家的产品。如何用好这一法则：深入构建环境设计，最大限度地减少让用户分心的东西，提升控制感，并提供有效的反馈。为用户提供明确定义的目标，和可以克服的挑战。利用 VR/AR/MR/XR 在虚拟世界中放置内容并促进交互，消除内容与其用户之间的抽象感，建立直接的联接。9、GIGO 原则GIGO 原则是 「Garbage in, garbage out」的缩写，直译就是「垃圾进，垃圾出」，这是一个计算机领域的术语，意识是系统输出的质量，取决于系统输入的质量。该原则出现的时间早于现代计算机诞生，但是现代计算机和产品设计都是遵循这一原则的。计算机遵循着严格的逻辑运行，良好的输入信息，是良好的输出内容的先决条件，而错误的输入通常会导致错误的输出结果。「垃圾」的类型多种多样，可能是完全不沾边的输入内容，比如在护照栏填上了电话号码，也可能是手滑出错，比如输入名字的时候拼写错误。在 Airbnb 上发布居住体验的内容的时候，系统提供了一套严格但有有详细指导的引导流程，它确实有助于改进平台上的内容并增加内容的一致性。对图像质量要求，也有字数限制和预览，这些都是帮助用户创建最具吸引力的内容的机制中的一小部分。如何用好这一法则：设计良好的可供性，借助约束以避免错误。启用预览、确认和自动更正等机制，最大程度地减少内容质量问题。在进行用户研究或访谈时，选择正确的样本。问正确的问题。确保你的问题没有偏见、混淆或预设和假设。10、成本效益原则只有当产出等于或大于成本的时候，某件事情才值得做。用户的时间、精力、投入和其他资源构成基础的成本，用户会拿这个成本，来和服务、产品以及所获得的潜在收益进行比较。产品团队经常使用成本收益原则来评估与新功能的财务回报，并确定功能的优先级。与许多其他初创公司一样， App Nuri 为用户提供一组金钱奖励。而其他投资类产品，如Robinhood，则会赠送股票给用户，以吸引用户在他们那里开户。优先级矩阵可帮助团队审视每个功能带来的价值，以及交付它所需的工作量。如何用好这一法则：专注于简化流程，并最大限度地减少平台中每个任务的工作量。不要将让利益相关者或设计师觉得兴奋的功能误认是为对客户有价值的功能。焦点小组和可用性测试将帮助你找出真正有价值的东西。如果您想了解更多关于各种设计原则的信息，请查看 William Lidwell、Kritina Holden 和 Jill Butler 的《通用设计原则》。更多出自设计师 Taras Bakusevych 的文章：一个UI按钮的自我修养编者按：一个合格的 UI 按钮到底需要具备什么样的素质？阅读文章 > 资深UI设计师搞定输入框和表单的20个秘诀编者按：这篇文章来自资深设计师 Taras Bakusevych，长期从事金融和企业类数字产品的设计，在表单设计领域造诣精深。阅读文章 > 资深 UI 设计师搞定按钮和选框的14个秘诀编者按：这篇文章来自资深设计师 Taras Bakusevych，他长期从事金融和企业类数字产品的设计，在表单和控件设计领域造诣精深。阅读文章 > 顶部导航 vs 侧边导航，到底哪种更好用？桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。阅读文章 > 设计师必知的20个幻灯片实用设计技巧很多时候，设计师需要在公开场合借用幻灯片演示设计作品，或者给客户展示最新的设计方案，又或者是需要在文章当中，展示作品，选取配图。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/10-design-principles-needed
飞翔的企鹅
在路上
表哥
落霞与孤鹜
张大湿
