字体 拉丁文 西文 LL Black Matrix 是一款由针式打印机字体延伸而来的等宽拉丁文字体。这款字体基于 5 乘 9 的网格规范，并通过点阵连接使其在视觉效果上更统一。它包含 300+字符并支持 100+语言，可满足多种拉丁文使用场景。为了让大家无忧使用多样化字体，我决定开放这款字体的版权。2.0 版本在字距上做了等宽的处理，并且加入了 Opentype feature，给生活来一点小惊喜。感谢大家的支持！！！附件下载！还缺免费英文字体？9款活泼可爱风格的字体打包！本期给推荐的是 9 款活泼可爱的西文字体，全部都是免费商用！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL BLACK MATRIX 2.027.87KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/ll-black-matrix-2-0
用户 需求 他们的 编者按：这篇文章出自于用户体验设计领域的专业机构 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
像素 设计师 素材 《超级玛丽》《魂斗罗》《坦克大战》《吃豆人》，还记得这些在那个时代给我们带来无限欢乐的像素风电子游戏吗？虽然这种类型的游戏已不再是主流，但是他们所带有的“像素风”却成为一种经典风格沿用至今，甚至一度成为一种设计新潮流，海报、Banner、UI 图标、H5 等各处都能看见它的应用。像素风的作品虽然有其独特的趣味性，但是也存在制作过程繁杂，费时费力的问题。今天就向大家介绍一种更简单实用的像素风格——「粗点」像素风。「粗点」像素风「粗点」像素风这个概念是由日本设计师前田隆史（Takashi Maeda ）在个人工作室「前田设计事务所」成立时提出的，用来形容其工作室创作一系列具有独特性的像素风作品。这使得「粗点」区别于传统的像素风，并在社会上继续流行。前田隆史曾就职于世界电子游戏巨头任天堂，是像素风的忠实爱好者，也对像素风元素的设计有丰富经验，其 Ins 账号「前田设计事务所」（ID：maedadesignroom）已经持续更新了近百个像素风小元素。免费可商用的像素艺术网站「DOTOWN」近日，前田设计事务所宣布上线像素艺术网站「DOTOWN」，开放其全部的「粗点」像素风图片素材。这些素材都是免费可商用的，种类丰富全面。是有像素风设计需要的设计师不可错过的宝藏网站。站内共有 700 多张「粗点」像素风图片素材，种类包括人物、植物、动物、车辆、建筑等，都是 PNG 模式。网页左侧有分类标签，也有详细的 Tag 列表，可以迅速找到自己想要的类型。DOTOWN 网站丰富多样的像素风素材站内所有素材都已经打包，资源链接见文章底部。「粗点」像素风简单却也不失表意，只要懂得规律，任何人用任何工具都可以做出来，对想要快速上手像素风的设计师来说是一个很好的临摹学习选择。感兴趣的小伙伴快去下载学习吧！再给大家推荐几款免费好用的像素风制作软件，帮助大家更好创作手机软件「八位元画家」「八位元画家」是一款 IOS 应用软件，界面简单，操作方便，非常容易上手。傻瓜式的在线像素画绘制工具 Pixilart这个工具之前和大家介绍过，直接戳链接：设计神器！高颜值傻瓜式的在线像素画绘制工具 Pixilart@豁牙子的阿昕 ：说到可爱风格的设计，我们很容易就想到这种萌萌的像素风，这种小小的颗粒感，让它们比普通的Q版漫画显得高级一些。阅读文章 > 中文版来了！值得每个设计师收藏的《完美像素使用手册》之细节篇这本纪念碑谷团队出品的《完美像素使用手册》，有设计师说是她见过的最全面，最毫无保留，最生动有趣的界面设计指南，而且不止是设计，还包括和程序员的合作经验，AI、PS的操作小技巧等等。阅读文章 > 以上就是有关「粗点」像素风的全部内容，喜欢的小伙伴记得点赞收藏哦！ 文件名 如何下载使用 文件大小 提取码 下载来源 粗点像素风素材合集1M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/dotown
图片 分辨率 四倍 本文要推荐的「Upscale.media」是一个免费图片放大工具，可将图片分辨率（resolution）提高到最大四倍，并有图片增强功能自动调整亮度和饱和度。这项服务和 Erase.bg 同开发商，他们以超过 1000 万张个人和商业用途的图片进行处理，当用户遇到图片分辨率太差、尺寸过小而无法在其他地方使用的问题，以 AI 和 ML（机器学习）技术解决，更棒的是 100% 完全免费！Upscale.media 支持最大分辨率 1500 x 1500 px 的图片，格式为 png、jpeg、jpg 或 webp，无论是使用于电子商务、艺术、不动产广告或个人都非常适合。Upscale.media网站链接：https://www.upscale.media/使用教学开启 Upscale.media 网站后直接把要放大的图片拖曳进去（或是贴上图片网址），支持四种常见格式 png、jpeg、jpg 和 webp，原始图片分辨率最大不能超过 1500 x 1500 。预设情况下 Upscale.media 会将用户的图片放大为两倍（2x），也能选择放大一倍或是最多四倍（4x），选择后会实时处理，产生新的预览图，将光标移动到图片上会放大，可查看更多放大的细节是否满意。右边有一个「增强质量」（Enhance Quality）选项默认为关闭状态，如果单纯只是想调整图片画质、不想放大图片尺寸的话可选择放大一倍，然后将质量增强切换为开启状态。例如将 640 x 640 原始图片放大为四倍就会得到 2560 x 2560 新图片，不过依使用经验不一定在所有类型的图片都能获得好的效果，有些标志或有阴影可能处理后效果会变差，无法使用此服务进行放大，但是可试试看其他同类型的图片放大工具，不同的服务在不同图片处理上得到的结果也会不太一样。值得一试的三个理由：Upscale.media 可将图片分辨率提高到最大四倍不失真模糊内建图片增强功能，自动调整相片亮度和饱和度支持四种常见图片格式，原始图文件不超过 1500 x 1500 px想无损放大图片？试试这个在线神器「AI Image Upscaler」曾经遇到一个情境：对方要求的图片尺寸比我手上有的图片还要大张，而且还大了两三倍，但图片是采用位图格式，若非向量图直接放大就会出现失真、变形或模糊等问题，那要怎么解决呢？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/upscale-media
氛围 细节 感觉 细节决定成败是很多人都会经常挂在嘴边的一句话，甚至还会用它来解释设计圈里的很多事情，但我觉得恰恰相反，决定成败的往往不是设计的细节，而是大感觉。如果是两家鞋厂生产同一款鞋子，外观几乎一样，这时决定谁好谁坏的就是细节的处理，但设计并不是这样，哪怕是数十个人围绕同一主题进行设计创作，那么他们的作品在设计方向上、大感觉上都是截然不同的，而通过这些作品的大感觉往往就能判断出作品的优劣。例如，下图是著名设计师陈绍华为北京申奥设计的标志，左图是初稿，中间是中标的方案，右图是最终使用的方案。中标的方案虽然比初稿好，但在细节的处理上仍不怎么样，笔画太细、笔画之间的衔接不够流畅和连贯、投影的处理不美观等，在参与竞标的方案中肯定有很多细节做得比这个好的，但最终还是这个方案赢了，因为它的创意更好、它的大感觉更好。我带领团队参加过很多次设计比稿，也输过好几次，但没有一次是输在了细节上，因为我对细节其实还是挺有要求的，在比稿结束后，我们有时可以拿到竞争对手的方案，好几次我们都会惊叹对手的执行竟然如此粗糙，但是也会承认他们的大感觉确实要比我们好，而客户更看重的就是大感觉，至于细节，等你赢了以后，客户会给你时间做细节。那么如何做好大感觉呢？葱爷给大家提供四条思路：想一个好的概念什么样的概念才是一个好的概念呢？三个关键字：1. 对设计概念首先一定要对，必须是积极正面的、符合产品特色、且贴近设计主题的。比如我们要设计一张春节的海报，正确的概念应该是：福、吉、乐、团圆之类的。2. 新对的概念很容易想到，不足以赢，所以你的概念还要新，还拿春节海报举例，福、吉、乐、团圆这些概念虽然对，但是都不够新，很难打动客户和消费者，这时候我们可以去洞察消费者在春节期间的一些新需求，比如：好玩、潮、躺平、自由，就是相对来说更加新的概念。3. 高如果你的概念立意比较高，也就是我们所说的格局很高，比如站在了国家的高度，甚至是全社会的高度、哲学的高度，这会让你的设计也更有高度。比如原研哉给小米的的新 logo 注入了一个很高大上的概念：Alive，生命感。探讨科技与生命的关系，所以把小米的 Logo 改得更柔和、更亲切了一些。比如说关于春节，我们可以提出：什么是年味？我们所说的过年到底是过什么？之类的问题。是不是就更有深意和高度了。用新颖的设计风格有了概念以后，你还要把这个概念用视觉表现出来才行，而使用新颖的风格就会很讨巧，容易让你的设计脱颖而出。比如大家都还在用合成的时候你率先使用插画，大家都用插画的时候你率先用 3D，大家都用 3D 的时候你使用 3D 结合插画等等。使用不是太常见的风格，或者用刚刚流行起来的风格，你就很容易赢在大感觉上。更多新的设计风格看这篇：重磅好文！2022 年值得设计师尝试的 9 个视觉设计方向在整个设计领域趋向于多元化的今天，已经很难出现某一个设计风格主导整个领域了，10年前拟物化全面倒向扁平化的盛况，大概率是不再会有了。阅读文章 > 反常规、强对比即在设计形式上使用一种反常规的处理方式，不按套路出牌。并且还要在视觉上要形成强烈的对比，这样的设计会有很强的视觉冲击力，更容易让人眼前一亮。比如下面这件作品，从机械上长出植物就是很反常规的一件事情，所以感觉很酷。再比如，下图的海报划开人的面部，露出的是一个童话世界，这种视觉效果也很反常，所以很吸睛。再比如下面这张海报用红色的胶布遮住海报中的文字，形式上完全不符合设计的常理，色彩对比又强，所以极具视觉冲击。加强氛围感氛围感也是设计的大感觉，比如你要设计一张主题为快乐的海报，那么在视觉上就必须有快乐的感觉，如果主题是神秘就要有神秘的感觉，否则就很难有带入感，很难打动人。一些惊悚电影的海报在这方面就做得很好。让人一看海报就能产生恐惧和悬疑的感觉。还有贺岁档的电影海报通常都很有春节氛围。如何体现氛围感呢？主要是通过色彩、人物的姿态和神态、场景、光影以及装饰元素。1. 色彩不同的颜色和颜色组合能过创造出不同的氛围，比如红色、黄色、橙色是热闹喜庆，蓝色和玫红色是科技、时尚，黑色和暗色是神秘、恐惧等等。2. 人物的姿态和神态比如要想表现快乐的氛围，那么人物的动态最好是奔跑、跳跃的，表情是开心的；要想表现温馨的氛围，人物的动作是比较柔和的，表情是微笑或含情脉脉的。3. 场景在设计中加入合适的场景，那么你的设计就会具有场景感，氛围感也自然加强了，比如惊悚片的场景一般在野外或者古宅里；科幻电影海报的场景一般在外太空、某些星球上、或者是一艘飞船里等等。4. 光影光影对氛围感的影响也很大，比如很多日本二次元的动画都有着明媚的阳光、蔚蓝的天空、斑驳的树影等等，展现的是一种青春、阳光的氛围，做设计时我们也可以借鉴这种光影。恐怖氛围一般是在很暗的光影下，有一些局部的亮光；如想要营造一种大气、壮观的氛围，则通常会采用逆光。5. 装饰元素装饰元素对于增加氛围感也很重要，例如要加强春节的氛围，可以添加烟花、灯笼、爆竹、福字、窗花、红色的服装、中国结、对联等元素；要想强调欢快的氛围可以增加碎纸屑、气球、飞舞的色块、开心的 emoji 表情等等。结语细节很重要，而且真正优秀的设计往往在细节上都会处理得很好，但是细节决定不了成败，细节决定成败只会发生在大感觉已经分不出胜负的时候，否则的话，根本轮不到看细节。所以，在做好细节前，先保证有一个又对又好的大感觉。作品没有设计感？这10个优化技巧简单有效！Hi，我是彩云。阅读文章 > 欢迎关注作者的微信公众号：「葱爷」本篇来源：优设网原文地址：https://www.uisdc.com/sense-of-design
红包 封面 虎年 关于我：优设百万人气插画师 / 知名IP商业画师 / Wacom大赛评委 / 擅长IP形象、潮流插画、分镜设计、爆款漫画等。想看我更多作品可以关注我的小红书@插画师小光sir，微博@插画师小光sir，约稿商务合作加微信：guangsir6666往期文章：虎年“hú”利！资深插画师手把手教你100%成功上架微信表情包农历虎年越来越近，家中挂起的条条腊肉，街边装饰的串串红灯笼，都让过年的氛围越来越浓，大家想放假的心情是不是也越来越迫不及待了呢？阅读文章 > 春节将至，每次在群里抢红包时，总能发现有许多定制化的红包封面非常漂亮，部分好看的红包封面甚至需要抢才能拿到。与普通红包相比，定制的红包封面能让人眼前一亮，这也是那么多公司花钱去定制红包封面的原因。不过自从微信开放个人红包封面定制后，就掀起了一股红包封面定制的浪潮，我身边也有越来越多设计师和工作室将自己的作品制作成红包封面，过年抢红包时往群里一发，立刻就能吸引到大家关注。我看很多设计师还不清楚如何定制红包封面，今天就给大家带来详细的流程全攻略。准备工作登录「微信红包封面开放平台」注册平台号制作红包封面 https://cover.weixin.qq.com/平台账号分为个人认证和企业认证两种，今天主要说大部分用户的个人认证。个人认证有视频号和公众号认证两种形式，均需要关注粉丝＞100人。按照申请流程指引填好身份信息，绑定邮箱就完成注册了。红包封面设计规范平台注册成功后，接下来就看看如何设计红包封面吧。红包封面样式包括拆红包页，气泡，红包详情页，发红包页，其中，主要展示样式就是拆红包页。红包封面的物料规范：支持PNG/JPG/JEPG 格式尺寸：957*1278 PX文件小于500KB大家也可以直接下载平台设计模板，更加直观。我也设计 了4 款红包封面素材供大家参考。（文章开头有源文件下载哦）以恭喜发财这张为例，这里说下封面的排版规范，由于拆红包页面有红包语和红包按钮等元素，所以绘制的时候需要考虑出血空间。拆开红包后，元素会整体上移，所以也需要考虑红包详情页的视觉效果，也可以做好排版自定义上传一张（注意：必须上传和拆红包页元素一致的，否则会审核驳回）在红包气泡页，可以拖动选择展示效果，也可以自定义上传素材，我这里为了更好的展示效果选择了自定义素材（开篇也有气泡 Banner 的源文件哦）在红包详情页下拉会出现封面故事，这个为可选项，可以上传图片或视频，还可以做对应的视频号或表情页跳转，有很好的的引流作用。重点来了！最关键的是证明材料，由于红包封面对版权意识非常重视，所以审核原则十分严格，作品有版权文件最好了，如果没有，需要上传制作图的分层源文件，如还是被驳回，可能还需要身份证明或者录制制作过程视频。小编就因为第一次没有上传源文件被驳回，帮大家避坑了。如果你的设计图中包含了字体或者LOGO，还需要提供对应元素的商标证明哦，可以把你准备好的证明材料打包上传。终于，你的红包申请通过了，接下来可以正式发放啦！第一次发放，有使用和购买两种，使用只有10个，且领取后只有2小时试用期。正式购买，红包封面是按个数收费，1元/个，定制方购买后，封面发放的有效期为6个月。发放形式有二维码，序列号，链接三种形式，每个用户对应一个红包封面，还可以裂变发放。用户领取后，3个月内无限次使用红包。目前这种红包形式是宣传个人和品牌非常好的方式。微信红包封面创作思路这次以「优设鸡」形象搭配虎年元素，结合新年祝福语设计四款形象，分别为“新年快乐”“恭喜发财”“步步高升”“虎年大吉”，先设计好主形象草图Pose：接下来细化绘制每个形象，风格主要以粗线条为主，类似矢量的平涂风格，以恭喜发财为例，先画好完整线稿，平涂上色后再丰富下色彩质感：可以把画好的形象放到平台模板中，做下简单排版，确定大致位置：再预留好文字位置和按钮位置，做背景设计：接下来就可以看看预览效果了，顺便拿出元素做了气泡 Banner 设计：以上是我分享的绘画小教程。更详细的绘制教程，会在本周做一次免费的现场直播。直播亮点：1. 「曝光神器」为什么个人/企业都在做定制红包？2. 「避坑攻略」揭秘定制红包制作全流程3. 「设计规范」红包封面排版设计要点总结进群的同学，到时还会送红包封面哦，想要的添加微信 uisdc123 ，备注红包封面即可进群也欢迎大家在社交平台关注我：腾讯官方出品！微信红包封面设计攻略前言微信红包封面是面向品牌主开放的，可自主设计封面样式、创建封面故事，付费定制专属的红包封面并通过自有渠道发放给微信用户的能力。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 微信红包封面源文件23.7M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/youshe-red-envelope-design
文件 在线 工具 本文要介绍「TinyWow」是一个免费在线工具，首页明确标示「这是一个解决文件问题的工具」，使用者在 TinyWow 可以找到各种解决问题的功能，主要有 PDF、视频、图片、文件和其他工具，使用上也非常简单，选择要用的功能、将文件上传后就能进行处理，完全不用额外安装软件，不过要注意的是这项服务在产生文件后只会保存 15 分钟，超过时间就要重新操作。想转换文件格式？收好这个免费在线神器「cdkm」当前有许多在线转档工具可以解决使用者的格式转换需求，共通性是通过浏览器开启网站即可进行转换，无需额外下载、安装软件或工具，因为这些服务多半将文件上传远程服务器进行处理，即使是移动设备也能正常执行，例如 Convertr 就整合音讯、影片和其他文件格式的在线转档：[link https阅读文章 > 那么 TinyWow 提供哪些工具呢？PDF 部分有分割、合并、压缩、加密、解锁、翻转、签名、加入页码、格式转换（PDF 转 Word、文字、图片）、从 PDF 提取图片文字或将其他格式转档为 PDF。除此之外，TinyWow 还有针对视频、图片或文件的各种在线工具，像是裁切、视频静音、压缩、视频格式转 WebP、GIF、调整视频大小或从 Facebook 下载视频，图片部分则有各种格式转换（例如 HEIC 转为 JPG 或 PNG）也能将不同格式转为图片等等。如果想将文件转换格式，像是 XML、JSON、CSV、Excel 互转，或是将 CSV、Excel 分离为单一或是多个 PDF 文件，TinyWow 也有提供对应的工具。TinyWow网站链接：https://tinywow.com/使用教学开启 TinyWow 网站后从首页就能看到各项功能，从上方选单列选择你要使用的工具，举例来说，视频部分有裁切、静音、压缩、转档、重设视频大小或 Facebook 视频下载功能。图片的话有 WebP、PDF、HEIC、JPG 和 PNG 各种格式互转，或是从 PDF 截取图片、在图片加入文字等等功能，其实这些都是在线工具会看到的功能，好处是 TinyWow 把它们都集合在一起变得更容易使用。举例来说，开启最多人会用到的 PDF 转 Word 功能后，直接从计算机、移动设备上传 PDF 文件，或是拖曳将 PDF 上传到网站即可。上传时需要一段时间处理，如果超出限制的话 TinyWow 会跳出提示，例如转档部分不能超过 10 页，如果页面太多 TinyWow 会要求使用者先从 PDF 分割工具提取需要的页面进行处理，总之要缩小到不超过限制才能继续。转换完成后会显示「Download」下载链接，或是直接将文件保存回 Google 云端硬盘。如果遇到需要手动选取或设定的功能（例如 PDF 分割）就有相关选项可以选择，下图就是分割 PDF 时选择要取出的页面，除了可以将选定的 PDF 分页变成单一文件，也能把每个页面单独分成个别 PDF 文件下载。还记得前面提到 TinyWow 会将文件保存 15 分钟吗？点选网页右上角「My Files」显示用户在这段时间进行的相关操作文件，包括源文件、转换后的文件，都能够从页面里个别下载或是删除，当然文件最多只会保存 15 分钟，即使没有手动删除也没关系，如果需要某份文件、但又忘记下载，赶紧点选右上角我的文件功能就能找到文件下载链接。值得一试的三个理由：TinyWow 是解决文件问题的工具，提供各种常见常用文件处理功能主要分为 PDF、视频、图片、文件和其他格式的操作选项转换文件最多保存 15 分钟，可从右上角我的文件手动下载或删除文件免费超好用！支持视频、音频、图片格式转换的在线神器「Convertr」若偶尔需要对文件进行转档，但又找不到适合的转换工具，直接打开 Convertr.org 将文件拖曳进去、选择要转换的格式就能处理。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/tinywow
自己的 工作 心态 Hi，我是彩云。今天这些内容大概是我工作这些年最重要的领悟了，要是能早些年明白这些道理，或许我能收获更多，所以我希望大家今天能认真读完，并分享给自己的朋友们。工作多年后，越来越意识到心态的重要性。心态不好就容易动摇、迷茫，从而阻碍你的行动。到了 30 岁左右，要由打工者的心态转变成创业者的心态。很多高手能突破自己的瓶颈，往往都是因为想法的转变而非技能上的突破。这里的创业者心态，不是指一定要自己去创业，而是指每天应该要有为自己工作的心态，这个心态很重要。真正明白为自己工作后的意义是重大的，这也是让我的人生轨迹发生重大改变的助推器。我觉得至少有 5 点重大的积极变化：成为自己的老板当你明白要开始为自己工作后，做项目的时候你对自己的定位就不再是设计师，而是创业公司的老板。现在你手头在做的项目就是你在创业的项目，你想把项目做成然后带来丰厚的回报。（对于你现在的身份来说，回报就是项目的参与度变高，思考会更多，更能带来能力上的突破）另外，此时在上班的你要比你真正去创业的成本和风险低很多，至少你不需要去招聘产品，开发，运营，就能在职权范围内尽可能利用好这些资源，而不是你被他们当成资源。虽然这有点难，但你的主动性和推动力会完全不一样。眼光看的更远当你开始为自己工作后，你能看的更远。绩效考核不再是你的唯一目标，也不是需求做完就万事大吉。你需要时刻去思考，你现在手头正在创业的项目如何才能做成功，为了能成功你还可以做什么，做这些事情对你自身的成长有没有什么帮助，能不能持续提高自己的积累给自己未来增值。目标的变化，带来的是心态上的变化，职场上的阴暗面对你影响不再那么大了，因为你会更看重自身的成长。只要自己真的在进步，老板们的绩效评价都只是给你的参考而不是唯一。百分百为自己负责因为是为自己做项目，所以你有了更强的动力全力以赴。面对难题的时候不会抵触而是想尽办法去解决，因为你不去解决的话，可能你公司就垮了。在这个过程中，因为对项目思考的更深入了，同样获得了更大的进步。最近在《复利效应》这本书中看到一个例子，受益颇多，也分享给大家。在一次研讨会上，主持人说：“为了维持一段人际关系，你有多少比例的共同责任？” 当时，作者立马脱口而出“50/50”，他认为双方必须共同分担责任，否则就有一方占便宜。另一位听众大喊：“51/49”，他认为必须愿意比对方多付出一点。接着又有一位说：“80/20”。此时主持人转身走到白板前，用黑色大字写出“100/0”，他说：“你必须愿意付出 100%，而且不期望获得任何回报。当你愿意承担维系关系的 100%完全责任，这段关系才能真正长久维持”。正是这个观念完全改变了作者的人生，如果对人生中的每一项经历，总是能付出 100%的责任，对自己所有的选择和如何回应人生各项遭遇所做的反应，都承担 100%的责任，那么一切的结果都取决于你自己。如果你自己不作为，没有人为你兜底。运气，环境或者各种其他条件都不再是关键，你拥有 100%的责任和选择权。无论运气有多差，谁对你说了什么，做了什么，都没办法影响到你。将自己从受害者的心态中解放出来，这样才能有掌控自身命运的无限力量。放大自己的成长收益大公司的一些管理手段其实是很不错的练兵场。当你开始为自己工作，那么你的晋升答辩可以想象为融资路演，怎么向投资方展示自己的能力从而获得青睐。你开始关注项目的投入产出比 ROI，毕竟“融资”来的钱肯定要每一笔都花在刀刃上。老板找你谈话，就可以想象是投资人给你建议，一定程度上要听，但你也得要有自己的想法，综合来判断具体要怎么做，毕竟你才是你自己公司的主人。做为创业者要有双线思维，一条线是要做好自己的产品，这是内核。另一条线是做好产品带来的赚钱能力，只有不断打磨好的产品，这样未来的估值才会真正做大。对于还在职场中的我们，也同样要有这样的双线思维。实线是工资，这是表层，而虚线是成长、能力，这才是内核。锻炼好内核，才能放大自己的未来收益。当你做“产品”做的还不够好，就还没到商业化的时候，打磨好产品才有让用户付费的资本。在刚工作的前几年，提升自己才是最重要的，此时的你还没有家庭的负担，可以轻装上路，所以别为了一个月几千块的差别而跳槽，找一家能让自己有成长的公司更重要。其实，不光是在职场里，经济学思维同样贯穿在我的生活中，做很多事都会想着能不能放大我的收益，一鱼多吃。比如，我帮星友们看了作品集，如果是一对一的看那么受益的只有被看的那位同学，当我把这个过程分享出来，那么影响的就可能是几百位同学了。但我的时间成本又几乎不会有太大增加，这样我的时间投资回报率 ROI 就会变得更高。再比如我平时的写作思考，如果我只是单纯的写在自己的笔记里，虽然自己肯定是有收益，获得了写作和思维得提升，但影响范围必然有限。如果我把这些分享在社群和公众号上被更多人看到，收获更大的影响力时，给我带来的回报率就会高很多。在同样的成本不变的情况下，如何做大自己的边际收益，是一个非常重要的自我增值思维。长期坚持，能带来巨大的复利回报。抱怨不如感恩经常能听到身边很多人各种抱怨老板，抵触手里的工作，觉得凭什么让你多干活，凭什么把最难做的分给你做。以前群里有个人就是这样，又想转行做 UI，又没有 UI 经验，老板让他做 UI 的项目，他还抱怨老板不给他加工资，说给的平面的钱还要多干 UI 的工作，觉得太亏了。换个角度想想，他应该要感谢老板可以给他试错的机会，做了没太多损失还能积累经验，工资照样拿，但没做好，老板却要承担风险。对于超出工作能力范围的事，在基本合理得情况下，我一般都是先答应下来再说，事后其实会发现，最后总是能完成，而且能学到很多新的知识。所以，自信一点，你肯定可以做好，多做一点不吃亏。抱怨很容易，但这样只会给自己徒增烦恼，用被动和消极的心态面对工作和生活，永远不可能做出什么成绩。试着站的更高一点看待自己得工作和生活，眼光不要只局限于当下自己做的那点事情。从成长进步的角度出来，把每一件事都当做是提升自己的机会。任何事情，你首先都是为自己在做，他们不是负担，而是机遇和礼物。如果你能从全局的角度看工作，就会发现，原来自己一直在一点点的进步。当你在工作中有了成就感，这份工作就能带给你无穷的驱动力，也会不断激励你取得更大的进步。最后总结一下面对工作和生活，要有创业者的心态。好的心态能给你带来更好的行动力，助力你的成长，减少迷茫和负面情绪。突破职业瓶颈，这 5 点思维转变最为重要！1）成为自己的老板，利用好身边的资源，提升自己行动力2）眼光看的更远，多做有积累的事情3）百分百为自己负责，只有这样才能对自己的人生有完全的掌控力4）以经济学观点审视自己的成长，放大自己的时间投资回报率5）抱怨不如感恩，从成长进步的角度看，每一件事都是提升自己的机会。任何一件事，你首先都是为自己做，他们不是负担，而是机遇和礼物。经常有人好奇我为什么可以做到长期坚持，好像永远都能保持热情，今天跟大家分享的这几点思考就是让我能时刻保持干劲的秘密了。坚持锻炼1300多天后，总结了2022设计师健康指南！最近身边不少人生病，也在朋友圈看到不少水滴筹之类的，让我更加意识到健康才是最宝贵的财富。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/giant-thinking
字体 字号 大小 前言读者朋友们大家好呀！（声明：《字体篇》文章中所有的字体规范都只针对可视化大屏设计，后台可视化以及 B 端可视化的字体规范与其不同）最近产出了很多东西，但都是以零碎的知识为主，主要是在社群进行分享，因此有需要的小伙伴欢迎加我交流。上期回顾：超全面的数据可视化设计指南：设备篇各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。阅读文章 > 整体架构今天就带大家好好聊一聊可视化大屏设计中的字体、字号、字重、字体优化等一系列注意事项。字体篇主要分为四大模块：字体选择与字重、字号规范与应用、字体优化与交接、常用字体与推荐。字体选择与字重文字是界面中最核心的元素，是产品传达给用户的主要内容，它的承载体即是字体。从字体的最基本属性（字族、字类、字重、字号等）说起，熟悉字体的那些特征，了解字体在界面中的作用。1. 衬线体与无衬线体衬线体衬线又被称为“字脚”，衬线体就是有边角装饰的字体。我们常用的西文字体 Times New Roman 等；中文比较常见的比如宋体、明体等。无衬线体无衬线体则与衬线体相反，通常是机械和统一粗细的线条，没有边角的装饰。最具代表性的 Arial、Helvetica 的西文字体，中文比较常见的比如黑体，微软雅黑等。总结无衬线字体所具备的技术感和理性气质，更受科技型企业或品牌青睐，腾讯谷歌等互联网企业都是选用的无衬线体；衬线字体的优雅与复古，则常用于艺术性文字，时尚品牌等。因此在具有浓厚技术的可视化氛围中，体现科技感和数字感，结合我们的观测体验，展示形式等，我们统一选用的字体是无衬线体。2. 中文字体字体选择在使用数字屏幕阅读时，字体的选择要选用无衬线体（比如黑体，微软雅黑）厚重一点，不可选用衬线体（比如宋体，书法体）比较单薄。注意事项标题可以用 Bold，更厚重，更加醒目，且不需要长时间观看；正文由于需要长时间观看，因此采用 Regular 字重，观感以及体验更佳；3. 英文字体字体选择英文字体类型的使用，英文选择更明显的粗体，因为要展示数据，使得数据展示更加直观，依旧是选用无衬线体，比较推荐：D-DIN 字体。注意事项字重用 Regular，更加纤细精致，英文字体分为大小写，一般推荐使用纯大写模式，因为大写可以保证字体本身整齐，并且宽高都是一致的，对于排版以及展示会更加友好。4. 数字字体字体选择数字字体类型的使用，考虑画面的字体的种类不超过三种，并考虑到字体的统一性，数字的字体与英文字体保持统一，比较推荐：D-DIN 字体。注意事项数字字体的字重尽量使用 Bold，因为展示更加明显，数字的展示一般都为数据展示，在界面的展示中，一般数字字体会比同字号下中文小 4-6px，因此展示是保证数据清晰显示，数字的字体大一点数据才能更清晰，更符合数据可视化展示。数字字体尽量选用等距字体，比如数字“1”和“0”，有些字体的间距会相应的缩小，我们要选用的就是等距字体，这样在做一些列表数据对齐的时候，数据展示更加友好。字号规范与应用政府类客户对于文字大小粗细的追求可以说是非常的偏激，字体加大加粗几乎成了标配，这种需求下，我们能做的就是在原有规范的基础上尽量去提升字号和字重。1. 常规 16:9 屏常规 16：9 指的是 1920*1080 的分辨率在字体大小的选择上，参考了页面上常规大小，定义了一套关于不同尺寸下的标准字号，正常 1080P 页面，最小字号不小于 16px。此处字号并不是绝对，因为考虑到目标群体适老化的原因，我们主动提高了字体的大小，一切都是为了提高客户的观测体验，具体字号大小还需要参考设备清晰度，环境灯光，视距，人为原因等因素。2. 常规 32:9 屏常规 32：9 指的是 3840*1080 的分辨率在字体大小的选择上，其实是两块 1080P 的屏幕进行拼接，因此如果画面内容较多时，定义最小字号不小于 16px。如果画面内容较少时，具体字号大小还需要参考设备清晰度，环境灯光，视距等因素，对字体进行相应的放大，比例合适即可。此处字号并不是绝对，因为考虑到目标群体适老化的原因，我们主动提高了字体的大小，一切都是为了提高客户的观测体验。3. 特殊尺寸屏特殊尺寸指的是非主流的分辨率，比如 2880*1920 的分辨率这块的字号大小比较难定义，因为需要考虑的因素很多，总体来说字号大小如果高度在 1080px 左右，那么就按 16:9 的字号规范来算。如果高度高于 1080 且很多，则需要等比计算或者放大，具体实践出的准确数值还得需要根据大屏的实际情况来综合考虑，这里只是提供一些基础计算方式。4. 字号影响因素字号的大小受到屏幕大小的影响；字号的大小受到界面内容的影响；字号的大小受到观测距离的影响；字号的大小受到设备性能的影响；字号的大小受到主观人为的影响；字体优化与交接给开发的字体太大怎么办？如何优化？开发采用默认字体去开发怎么办？开发用部署电脑没有这个字体去打发你又该怎么办？1. 优化字体给开发的字体太大，占用内存该怎么办？其实我们可以用一些特殊的方法对原有的字体包进行优化，比如英文字体，我们可以删除非必要的中文字体和数字，符号，只保留一些必要的英文字母。具体方法如下，我们可以用 FontCreator 软件去进行字体的优化与删减，并修改字体细节，重新命名发布。同时如果有意向的同学，也可以用自己设计的字体去应用到开发，这样的操作不是一举两得吗？优化字体教程： https://www.bilibili.com/video/av823111382. 开发交接问题解析开发采用默认字体去开发怎么办？默认字体开发可能有时候会出现文字换行，或者文字放不下的情况，因为不同字体的字间距以及大小可能是不同的，因此在初期就需要跟开发协调好，跟设计效果图的字体保持同步，这样才能保证设计效果的还原。本地部署电脑没有字体该怎么办？字体的存放一般是有两种，一种是放到单独的服务器然后每次加载去服务器访问字体，另一种是跟代码放到一起。对于字体大小的要求。本地存储不需要考虑字体包的大小，云存储需要考虑字体包大小。云存储一般字体包大小的话可以限制在 2、3M 左右，5、6M 的字体包就已经非常大了，太大会影响我们字体的读取，画面加载很慢。最优解就是在部署本地的电脑上安装你需要的字体，这样的话程序就自动读取，可以识别本地部署的字体；如果不支持本地化部署的，字体是存放在服务器或者是跟代码打包放一起的，可以要求开发在全局代码中多写几个备用的字体。比如你是 Windows 系统，那么自带的就是微软雅黑，iOS 系统自带的就是苹方平台，会自动根据写出的代码按顺序筛选自带的系统字体。常用字体与推荐一些特别好用的字体，会在设计过程中提升画面视觉，因此给大家推荐并分享了一些可以做可视化大屏的商用中英文字体。附件下载。1. 可视化常用中文字体中文字体包含了一些可以做标题的一些造型比较好看的字体，比如优设标题黑，站酷高端黑体，卢帅正锐黑体，胡晓波男神体等等。可做正文字体的比如，苹方简体，思源黑体等等。2. 可视化常用英文/数字字体英文字体和数字字体主要是分享了一些数据展示比较奇特的造型字体，比如：DS-digital、Furore、以及正常数据展示的 D-DIN 字体家族等。全篇总结字体的最基本属性：字族、字类、字重、字号，通过四种基本属性为切入点，精准的去讲述大屏可视化的字体规范和样式。在可视化大屏设计中，字体更加偏向于无衬线体，无衬线字体所具备的技术感和理性气质，更受科技型企业或品牌青睐；在可视化大屏中，展示数据的重要性不言而喻，因此要注意中文、英文、数字字体的选择以及注意事项，一切以数据展示更加明显为前提；在不同屏幕中，可视化大屏的字号大小规范是有区别的，并且需要结合影响字号的五大因素：屏幕大小、界面内容、观测距离、设备性能、主观人为去制定字体规范；通过 FontCreator 软件去对字体进行优化，掌握字体的删减发布以及交付开发的方法；了解开发存储字体的两种形式，一种是本地化部署，一种是与代码打包服务器云存储，以及了解两种方式的优缺点；了解可视化开发关于字体交接时的注意事项，可以通过自己的理解去解决工作中的关于字体的问题；推荐了常用的可视化大屏的字体：中文字体、英文字体；如果画面内容较少时，可以适当提高字号，反之亦然，比例合适即可；可视化大屏设计字体规范不存在绝对字体规范。一万六千字！超全面的字体与排版应用指南文字是界面中最核心的元素，是产品传达给用户的主要内容，它的承载体即是字体。阅读文章 > 欢迎关注作者的微信公众号： 文件名 如何下载使用 文件大小 提取码 下载来源 文章字体素材66.01MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/visual-design-font
用户 这一 原则 编者按：在做设计的时候，设计师到底要遵循哪些设计原则？我们曾经有过很多相关的文章，不过这一篇，有些不一样。这篇文章出自资深 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
图案 图标 背景 Icons Pattern 是免费图标库「Flaticon」提供的在线工具，协助用户以喜欢的图标设计出独特的背景素材，可使用于手机、移动设备背景或是做为社群网站背景，也能调整每个图标尺寸大小、位置、不透明度、旋转方向和背景颜色等等，最终产生为 PNG、JPG、SVG 三种主要格式或 Base64 编码，下载前设定尺寸和图片大小。值得一提的是 Icons Pattern 产生的素材图案为无接缝图案（seamless patterns），只要小张的图片、重复拼接显示就能制造很漂亮的效果，而且符合各种尺寸和使用情境，我之前介绍过类似的无接缝图片产生器工具：想快速绘制出好看背景？用这个神器一分钟搞定！本文要推荐的「Everypixel Patterns」是最近新推出的在线工具，可以协助设计师产生更具个人化的图案，这些图案都是无接缝图案（Seamless patterns），对于要获得创作灵感、或产生全新图案来说都很有用，制作后直接从网站就能下载 SVG 向量图和 PNG 两种格式。阅读文章 > Icons Pattern 图标素材来源为 Flaticon 网站，网站本身就已收录超过 200 万个图标图案，不过并非每个图案或图标集都能免费使用，如果标示为 Premium 代表需要付费解锁，还好免费范围已有不少选择，有兴趣的朋友可以自己去动手玩玩看。想寻找类似于上图的手机背景但又没有合适的选择吗？不妨打开 Icons Pattern 工具自己制作一个吧！Icons Pattern by Flaticon网站链接：https://www.flaticon.com/pattern/使用教学开启 Icons Pattern 网站会看到简单三步骤教学，首先搜索、找到你要使用的图标，点选后将它加入并调整尺寸、颜色和背景，最后点选「下载」就能将设计输出保存为特定格式。从左侧选单点选搜索，找到特定的图标集或图标图案，点选就会新增到图片编辑区，也可以使用最下方「Random pattern」随机加入排列。很有趣的是 Icons Pattern 加入的素材可以进行进阶调整，像是配色、阴影、不透明度等等，不喜欢的话点选右下角「Clear」就能清除重来。点选左侧的调色盘设定图片背景颜色，调整后会实时显示于网页右侧编辑器。编辑完成后点选左下角「Download」绿色按钮保存图片。下载前可选择格式：PNG、JPG、SVG 或 Base64 编码，可设定图砖和图片大小，点选下方的绿色「Download Pattern」就能下载并取得图片啰！值得一试的三个理由：免费图标网站 Flaticon 提供的在线工具，以图标设计出独特背景图产生的素材图案为无接缝图案，只要重复拼接即可制造漂亮效果下载为 PNG、JPG、SVG 三种格式或 Base64 编码为什么我10秒就可以做出漂亮的背景图？有这个神器你也行！有时候我们需要一些好看的背景素材，时间一紧张可能就做得不咋地，没关系，今天给大家推荐一个自动生成背景纹理的网站。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/icons-pattern
表达式 明度 属性 表达式是使用 Extendscript 或 Javascript 语言来控制 AE 图层属性（位置、缩放、旋转、不透明度）的一种编程语言，庆幸的是不用真的精通编程，大部分的表达式用的时候只需修改几个简单的参数，就可实现复杂的效果。每一种表达式都是节省时间，简化工作的好帮手。表达式用法很简单，按下 alt/option 键，鼠标点击图层属性前面的“小码表”，然后把代码添加到时间轴里的文本区就可以了。废话少说，来介绍 10 个常用的 Ae 表达式及其用法，建议收藏。time常用在旋转属性上，代码：time*valuevalue 是数值，用在元素的不透明度上，就是由透明到不透明的变化。例如：time*15，意思就是每秒以 15%的透明度一直到 100%不透明。用在旋转属性上，就是每秒以 15的角度进行顺时针旋转，如果是-15，就是逆时针旋转。其实 time 属性也是可以用在位置属性上的，只不过要先把“位置”属性先拆分成 X、Y 两个单独的坐标才可以。接着我们来看下和 time 相关的函数表达式正弦函数 sin代码：Math.sin(time*value1)* value2与 time 不同的是，它多了一个旋转的频率。value1=频率值；value2=幅度值例如把这行代码 Math.sin(time*2)* 30 加在旋转属性上，就是以 30的角度来回旋转 2 次,可以代替手动 K 帧的繁琐。那怎样让旋转的物体停下来呢？需要在这行正弦函数后面加上一行指数函数：Math.sin(time* value1)* value2/Math.exp(time* value)函数 exp 里面的 time 值越大，就越快停下来。wiggle 抖动最常用的“喂狗”表达式，一般用在“位置”属性上，简单写法为：wiggle(value1, value2)。value1 为每秒抖动的次数，value2 为每次随机波动的幅度。例如：wiggle（5,20），意思每秒抖动 5 下，每次波动的幅度为 20。更完整的写法是：wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)freq=频率（设置每秒抖动的频率）；amp=振幅（每次抖动的幅度）；octaves=振幅幅度（在每次振幅的基础上还会进行一定的震幅幅度，很少用）；amp_mult=频率倍频（默认数值即可，数值越接近 0，细节越少；越接近 1，细节越多）；t=持续时间（抖动时间为合成时间，一般无需修改）；一般只写前两个数值即可。index可以理解为规律复制表达式，代码：index*value例如把 index*15 添加在图层的“旋转”属性上，则第一个图层会旋转 15 度，之后按 Ctrl+D 去复制图层时，第 2 个图层将旋转 30 度，第三个图层 45 度，以此类推……若想第一层图形不产生旋转保持正常形态，复制后的图形以 15 度递增，表达式这样写：(index-1)*15，“-1”就是减去第一个图层后其他所有图层以 15旋转复制。time 计时常用于随便变化的数字或倒计时：time.toFixed(2)括弧里的数字 2 代表小数点后两位，所以 0 就是整数变化。数字倒计时：Math.floor(value-time)，value 代表从几开始，如：“20-time”，就是从 20 开始倒计时。random 随机数值变化表达式，所以经常用在数字上，当然也可以用在“不透明度”和“缩放”属性上。代码：random(min,max)。min 是最小值，max 最大值例如：random(1,100)，数字就会在 1-100 间随机变化，它会带 X.xxxxxxxxxx 这样的小数位，如果不想要小数点后面的尾巴，可以这样写:X=random（1,100）Math.round(X)“X”是你自定义的名字，意思就是给这个“X”规定，让它只能在 1-100 之间整数变化。这个效果可用在抽奖游戏里的随机数字。运动脱尾物体运动时，有类似残影的效果，代码如下：delay = 5; //number of frames to delay（延迟的距离）d = delay*thisComp.frameDuration*(index - 1);thisComp.layer(1).position.valueAtTime(time - d)把上述代码添加到运动图层的位置属性里，然后多复制几个图层。如想要实现不透明度拖尾，就需要为元素的不透明度属性添加表达式：opacityFactor = .75;//不透明度值Math.pow(opacityFactor,index - 1)*100万能弹性表达式弹性表达式有两个，Overshoot 和 Bounce。可以轻而易举地实现各种弹性动画，如抖动、弹跳动画等。Keyframe Overshootamp = .1;freq = 2.0;decay = 2.0;n = 0;if (numKeys > 0){n = nearestKey(time).index;if (key(n).time > time){n--;}}if (n == 0){ t = 0;}else{t = time - key(n).time;}if (n > 0){v = velocityAtTime(key(n).time - thisComp.frameDuration/10);value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);}else{value}*amp 表示振幅,freq 表示频率,decay 表示衰减（根据不同需求做不同的调整）Keyframe Bounce Backe = .7;g = 5000;nMax = 9;n = 0;if (numKeys > 0){n = nearestKey(time).index;if (key(n).time > time) n--;}if (n > 0){t = time - key(n).time;v = -velocityAtTime(key(n).time - .001)*e;vl = length(v);if (value instanceof Array){vu = (vl > 0) ? normalize(v) : [0,0,0];}else{vu = (v < 0) ? -1 : 1;}tCur = 0;segDur = 2*vl/g;tNext = segDur;nb = 1; // number of bounceswhile (tNext < t && nb
科技 风格 场景 各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。整个合辑一共有 10 篇文章，分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章，详细的讲一讲可视化大屏设计的知识点。往期回顾：超全面的数据可视化设计指南：字体篇前言读者朋友们大家好呀！阅读文章 > 超全面的数据可视化设计指南：设备篇各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。阅读文章 > 风格篇主要包含：常用风格 > 风格解析 > 风格选择 > 风格应用。本篇文章将会从风格分类入手，进行风格解析，总结可视化设计的风格，选择风格并应用到场景，教大家如何选择合适的风格应用到商业可视化项目中。画面中的动效 GIF 图会比较大，请大家耐心等候加载～总结了商业项目中遇到的一些可视化案例以及科幻可视化风格，大体的将其分为三个大类：传统风格、HUD 风格、FUI 风格。传统酷炫风格传统狭义上的数据可视化, 更多是纯图形去代表数据，通过图形去展示数据，直观的展示所需要表现的指标。数据可视化也有很多分类, 不过也许你也懒得了解了。比如，网站后台分析，可以说是可视化分析报表类的，例如百度统计，谷歌统计等等；比如，面对 B 端后台的数据可视化，国内做的最好的无非就是 antdesign，element；我们此处说的是基于 G 端的数据可视化大屏，G 端数据可视化从本质上来说是注重直接解决问题，通过直观的展示数据图表去了解各个指标的详细数值；也有甚者比较注重视觉效果，要酷炫，心理学家说, 人脑 70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。国内传统可视化对于此处的接受程度确实不一样。B 端和 G 端的用户，对于可视化风格的接受程度确实是不太一样的，B 端对于前沿技术以及可视化表现会有一定的接受能力，但是 G 端更多注重于界面酷炫，功能反而不是很重要了，这多少有点本末倒置的感觉。在传统可视化面前，页面的杂糅程度较强，彷佛是由一块块图表堆砌而成，比较注重色彩的运用，多色搭配，色彩一般具有特质。一般大多数可视化可以看到共同的点就是：配色/布局/构图，机械而又重复，彷佛一个流水线生产出来的。当然，现如今新基建乃是主流，人群对可视化大屏的认知和审美也在逐渐提升，设计师在以后的工作中还需要取长补短，多吸收一些好的东西去丰富我们具有中国特色的数据可视化大屏设计。HUD 风格平视显示器(Head Up Display)，以下简称 HUD，是运用在航空器的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要要的重要资讯。平视显示器最早出现在军用飞机上，降低飞行员需要低头查看仪表的频率，避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。因为 HUD 的方便性以及能够提高飞行安全，民航机也纷纷跟进安装，汽车也开始安装，在一些游戏用户界面，很多地方都会采用 HUD 的风格，比如射击类，格斗类，动作类游戏等等（赛博朋克，堡垒之夜，绝地求生）。在设计的细节当中使用大量的图形元素，并辅以一定的装饰元素，主要以点线为主装饰，排版版式参考价值较强。HUD 相比较于传统和 FUI 来说，更贴合我们的日常设计，对于图形的展示也更加的有意义，所以透析 HUD 风格，对于提升可视化设计水平有很大的帮助。FUI 风格相对于当前流行的扁平化设计，FUI 可谓是在 Ul 设计中独树一帜，设计风格十分鲜明，极具未来感和科技感。FUI 是一个非常有趣的 Ul 设计领域，是我们在日常现实生活之中天法探索的用户界面设计方式。在我们的日常工作中，通常日常设计很难有机会为宇宙飞船、时间旅行设备，或者感知型人工智能和外星人使用的用户界面做设计。FUI 使设计师有机会去突破现有的用户体验和用户界面的限制，探索一个新的领域。通过虚幻界面设计我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用，地图可以采用全息投影技术、人与智能硬件的环境交互等等。虚幻界面设计甚至可以是新的发明，它们可以作为一种概念的验证它们可以启发我们，提出问题，探索什么可行，什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样，虚幻用户界面可以激励人们为未来创造技术。FUI 的图形装饰元素可以说是极其丰富，形式感很强。在设计的细节当中使用大量的“异形”的图形元素，并辅以一定的装饰元素，但是一定程度上对于设计中繁琐的需求，需求层次上寻找设计灵感没有太多帮助。常用在科幻电影以及概念游戏等领域，落地较难。升华：如何培养出自己的可视化设计风格如何培养和完善自己的可视化设计风格呢？其实这个问题有点狭隘，不同客户不同使用场景我们可能风格都会不太一样，但是唯一我们不会变的是我们对于组件图表的理解，图表图形的展示形式。传统风格：多种色彩FUI 风格：科技图形HUD 风格：版式排版一个合格的可视化设计师，对于任何可以参考的页面，都可以迅速领略到可以应用的部分页面和展示形式，多吸收知识，提升自己，这就是取其精华，去其糟粕的正确解答吧！所以要将现有风格结合，完善设计理念，提升视觉技法，这才是当下比较重要的。最近由于工作中的一个项目，对自己充满了怀疑，究竟什么叫科技感？不同的应用场景，科技感是否还依旧有效？同展示条件下不同应用场景，又会有什么样的差异？究竟是什么样子的设计，才能被“甲方爸爸”认定为科技感十足，并且很酷炫呢？从酷炫科技感出发，总结了以下四个方面去解析科技感风格。科技感的界面有哪些特征？同展示条件下不同应用场景，又会有什么样的差异？三维的表现形式，是否真的跟科技感成正比？面对段落文本需求，列表需求等如何把页面做出科技感？1. 科技感的界面有哪些特征？相信很多可视化设计师听到最多的一句话：要酷炫，要科技感！每每听到这句话我都会变得非常暴躁。究竟是酷炫科技感代表可视化？还是数据可视才是可视化的内核？每每遇到这种令人糟心的问题，我想的是如何通过自己的专业知识去解释，可是我发现根本解释不清楚，也无法令甲方客户信服，甚至和同为乙方的总包也无法达成统一战线。那么我们应该如何去做呢，又应该如何去解释科技感这个抽象的概念呢？配色提到科技感色系一般我们想到的就是蓝色系（科技蓝），但是很多人可能走进了一个误区，科技感的专属色彩并不是只有蓝色，而且一些蓝色确实让我们有审美疲劳的感觉。如图，就是我们比较常见的传统可视化设计，一眼看去满屏都是蓝色，具有中国特色的蓝色科技感。正如所有人都公认的党建题材为红色加黄色，那么科技感真的只有蓝色专属吗？党建题材都是红色专属吗？由此可见，红色并不是党建题材的专属色彩，存在即合理，也并没有说党建可视化一定要做成红色的。制约的因素有很多：项目背景，项目需求，设计提案，专业认知等等，可视化大屏归根结底还是做的是服务设计，因此服务好客户，得到客户的认可，就能体现设计的价值。但是在设计稿中可以发现，界面运用到了一些党建色彩的元素，也是通过这种方式去展示，这也是设计师需要注意的一点。传统科技蓝风格可视化其他科技蓝风格可视化橘色科技感风格可视化由此我们可以推断，配色是塑造科技感界面的一个比较重要的因素。色彩的选择需要根据实际所运用到的场景，比如安全行业，蓝绿色会比较好一点；比如公安行业，传统蓝色就比较合适；比如卫星地图，用蓝色就不合适；根据不同的业务范畴以及不同的应用场景去确定配色，这才是我们要做的。蓝色并不是科技感的专有属性，任何一种颜色都是可以塑造科技感的感觉的。比如适合用绿色的场景做的界面，没有做好看，那只能怪自己学艺不精，跟配色无关。不排斥蓝色，但是讨厌到处都是用蓝色，上来就是用蓝色。背景说到背景这是一个影响科技感非常重要的因素，一张超神比比皆是，一张超鬼也是随处可见，究竟什么样的背景才是一个优秀的可视化界面所具备的？不是画面发光，有闪光点，宇宙或者银河那种图；也不是科技点线，带渐变的线条（混合工具做出来的那种）看起来就特别复杂；也不是那种亮度超过画面任何一个元素的图。科技感的背景所起到的作用应该是衬托画面，而不是在画面中比较跳，抢视觉，一大坨发光或者复杂的图形，只会起到反作用。一个好的背景一定是不影响视觉的同时，衬托画面和主视觉，如果整个页面分黑白灰三层，那么背景一定是黑的那一层，这样的画面效果才会好。图形图形应该是以上指标中，最令人可以接受对科技感风格诠释的一种，科技感的图形到底有哪些特征，我们又该如何去做呢？通过以上案例我们可以发现，所谓图形表现科技感，最大的特征就是点线面应用的多元化，通过一种或者多种规律将点线面组合起来，线条粗细长短不一，点大小不等。在使用图形进行点缀搭配时，切不可过于花哨，从而抢了主要内容的风头。不规则图形，点线装饰，色彩，外发光，都是图形诠释科技感的方式。此处可能会出现一些三维样式的图形，特殊的视角以及不常见的设计都会增加科技感的元素，但是也不是所有的三维都可以比二维更有科技感的。我最近做的就是甲方客户一直觉得：三维元素太少了，科技感不够。我就纳闷了，到底什么才是科技感？难道科技感只能用三维的来表示了？只能说一定条件下，三维是优于二维展示的，但这也不是绝对的。如果你的场景主视觉本身就是二维范畴的，何必要要求组件三维展示。下图的二维科技感表现上肯定是超过三维地球的，至少我是这么认为的。动效动效应该是最能体现科技感的方式了，通过动态演示组件，通过动效展示界面，远远比静态页面要合理的多。动效主要是通过：位移、旋转、透明度（闪烁）、缩放等方式去制作，形成独特的动画节奏。最常用的科技动画：粒子动画，线条动画，辉光，剪切路径，偏移字符等等。可以发现科技感动效一般都伴随着极快的闪烁动画，动画的节奏也是比较偏快，再通过出现动画，字符偏移，剪切路径等演示组件的形成过程。2. 同展示条件下不同应用场景，会有怎样的差异？可能大家没有遇到过这种情况，比如在三维建筑可视化中，科技感本身就依赖于场景的表现，但是不知道大家有没有试过，将三维建筑可视化换成二维 GIS 之后，我们如何去使画面表现的更具科技感呢？图一，图二，图三分别就是替换不同的场景，那么我们来看看这些场景为什么不适合原本的之前的科技感风格呢，我们一起思考一下~以上三张图可以看出，图一的飞机可视化是画面的原稿，后两张是在同一种设计面板，替换了不用的主视觉场景，由此可以看出不同主视觉场景可能对应不同的风格 UI 组件，没有通用的组件，如果想完美表达一些面板组件，那么需要取设计不同风格的主视觉场景才可以。大家可能会觉得科技感只针对于一些特殊的场景，或者说是深色场景，比如一些实景地图和卫星地图又该如何去表现科技感的元素呢？那么如果是浅色可视化我们又该如何去做科技感呢？科技感风格应用于不同的场景，那么表现科技感的方式也是有很大的不同的。3. 三维的表现形式，是否真的跟科技感提升成正比？其实这本身就是一个伪命题，三维表现对画面的冲击力是非常强的，对于画面视觉效果的提升有很大的帮助。不过是否所有的三维就是最合适的呢，这个也确实有待商榷。不过能肯定的是，一定程度上，三维一定会比二维更加具有冲击，更加具有科技感。首先必须要确定的是，此处三维一定是科技感点线组成或者说是线描类型的三维主体，而不是实景以及仿真的主体，当然并不是绝对的，此处针对大多数场景下。可以通过以上图片看出，科技感一定伴随的是大量的点线装饰，画面主体一定是最突出的地方。而不是有时候遇到的是：GIS 地图就是很普通的样式，可编辑性不是很强，样式也比较老旧，对设计就会造成大量的困扰。在主视觉没有完美表现的时候，就不要强求说把两边去做好看，主视觉不好看，那么图表做的特别华丽也只是让主视觉更掉分。其实最正确的表现就是二维表现加上三维场景展示，两者相辅相成，对于画面的展示才是最好的。通过下面这组案例可以发现，二维表现加上三维场景才是最优解。4. 面对段落文本列表需求时如何把页面做出科技感？很多同学对于文字需求如何制作科技感有很多的疑问，通过最近的作图，总结出四种关于文字排版科技感的展示，总结起来其实就那么几点：装饰，图形，字体，版式，表现形式…其实对于数据可视化设计科技感的研究，不仅需要了解表现层，更需要上升到业务层。一些特定的图形或者装饰，对于画面的丰富程度一定是有帮助的。讲了这么多，不知道对大家理解科技感是否有帮助，如何提升画面科技感，是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中，多多酷炫，多多科技感！！！1. 根据场景-了解展示需求场景是什么？是人物、时间、地点三要素所组成的特定关系。在某某时间（when），某某地点（where），特定类型的用户（who），干了某某事情（what）。因此我们要确定的是，根据这四个“W”去确定整体业务框架的基础构成，这对于设计风格的初步意向确认有着很积极的意义。who：王局长when：领导人会议时where：公安局what：新基建建设 数字化转型事项在领导人会试上，公安局王局长提议通过了关于新基建，数字化转型的各种措施。面对这一场景，有以下几个问题。受众是谁？需要干什么事情？谁去干？数字化转型怎么做？怎么实现？需要用到的技术？展示风格？重功能？还是重展示？在有了这些的前提下，对于我们设计风格的选择就有了很强的指导意义，比如王局长比较喜欢多色搭配，科技感强的风格，主要为了配合展示汇报，那么就可以通过这一些需求，初步制定风格为效果酷炫的展示类大屏，但是主视觉的展示形式还是要根据其他的具体情况去进一步确认。2. 根据含义-确立设计方向在面对一些特有的项目时，一般客户会给出一些参考术语：“3 个一带”，“2 个方针”，“八大成果”“三山，两水，百林，千田”……面对这种问题，能做的就是理解其包含的真实意义，究竟需要展示哪方面的，了解清楚项目的背景需求，结合客户所说的一些关键字段，剖析以上的内容可以发现，客户通过一些方针和方法，对“山水林田”进行治理，取得了一些阶段性成果。因此展示的内容可以确定为智慧治理，或者智慧生态方向的，然后就可以根据项目背景的内容去选择可以应用的具体的一些方案了。3. 根据需求-明确设计内容因在到了需求分析的阶段，可以根据客户提供的大量的资料和业务需求，去明确的设计方向，究竟是需要展示哪些内容？可以提供的数据有哪些？展示条件（硬件设施）是否具备？想要的效果有哪些？比如客户需要查看到山水林田的各个改进措施的效果，以及改进前后的效果对比。说到这单纯的二维 GIS 和影像已经不太好满足了，那么可以将场景风格定位到三维展示，需要实际 1:1 建模，至于是通过 WEBGL，UE，UNITY 就看各自的团队擅长的方向了。场景大体风格确定，那么展示面板需求根据场景去搭建就可以了，这样一个完整的风格选择过程就算初步走通了，具体的验证环节，可以在一次次会议中再去进行交流和修改即可。二维 GIS（深浅）、卫星影像优点展示容易，风格切换皮肤多，可编辑性高，开发难度低，地图资源较多，适合快速搭建可视化大屏模版，开 源内容较多，前端开发直接调用样式即可。缺点展示形式较普通，地图风格样式不出彩，设计效果也会打很多折扣，很难与同行拉开差距。难点开发过程中可能需要基于高德 API 以及一些平台，对封装地图进行二次开发，没有 GIS 开发经验的前端，会比较困难。网址https://lbs.amap.com/product/mapstyle#/ Mapbox，高德 API，百度 API，超图，天地图等等。以高德 API 为例矢量地图、省市区块优点展示灵活，可下载 svg 矢量区块，并可下载 json 文件直接交付开发，可下钻到县级，可编辑性高，一般会结合二维 GIS 来展示，有插件可以直接绘制全国地图。缺点不够立体，可选样式比较少，画面主视觉容易空洞导致画面效果不强。难点开发对于设计图的一些效果还原比较困难，例如发光，渐变等等。只能做一些比较基础属性的修改，对于效果还原可能达不到 80%以上。网址http://datav.aliyun.com/tools/atlas/以 DATAV 地图下载器为例矢量地图模型、省市区块优点展示效果好，三维场景，有立体效果，材质贴图不同效果会完全不一样，可编辑性较强，相比较二维更推荐这种表现形式。缺点三维范畴，不会三维知识的小伙伴会比较难，此处会涉及到三维软件合并挤压，展 UV，漫射贴图，QGIS 制作高度贴图，PS 制作法线贴图等等知识点。难点对于不懂三维的小伙伴比较困难，涉及知识点较多，容易一知半解。教程https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA （原作者已授权）3D 地图建模及贴图的制作获取方法三维模型、城市建模优点展示形式新颖，展示效果非常好，三维表现往往让人耳目一新，对于可视化的展示可以说是所见即所得，深得客户喜爱。缺点开发难度高，专业性人才比较少，懂三维的设计也是非常的少，对于三维知识以及引擎开发知识需要比较熟悉才行。难点人才稀缺，入门难，做好更难，教程自学难度有点大，例如 cityengine 程序化建模，houdini 程序化建模等等。教程https://space.bilibili.com/21247145?from=search&seid=10582171815506234319cityengine 程序化建模知识图谱、数据中台等优点主视觉效果强，特殊场景的处理能够很完美的讲清逻辑，对于图形化的理解有很强的意义。缺点逻辑复杂，难懂，比较抽象，专业难度高，对业务理解能力需要很强。难点逻辑处理比较难，设计效果比较难以想象，设计容易偏离主题，比如数据中台，是一个非常虚幻的东西，很难讲清楚处理逻辑和过程。网址https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html以知识图谱为例知识点总结可视化风格三大分类以及对于图形的应用（传统、HUD、FUI）；如何培养自己的数据可视化设计风格（色彩+图形+板式）；影响科技感风格的四大影响因素（配色，图形，背景，动效）；设计风格的选择以及确定思路（根据场景、含义、需求）；可视化风格的应用以及拓展（各种主视觉的应用优缺难点）。讲了这么多，不知道对大家理解科技感是否有帮助，如何提升画面科技感，是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中，多多酷炫，多多科技感！！！不知道大家有没有一种错觉，突然有一段时间，某个时候发现自己突然不会做设计了，啥也想不明白了，莫名的有点浮躁，做什么都不能专心。其实很简单，总的来说就是，你即将突破现有的设计水准，如果能想明白，解决掉问题，你的审美以及设计水平都会有很大的进步。这就是别人口中的，突然就会了，知道怎么做了，其实无非就是积累够了，需要升入下一个等级了~本篇来源：优设网原文地址：https://www.uisdc.com/visual-design-style
语音 用户 电台 前沿：开头必须来一句，我相信语音一定是未来，我非常确认这篇 HMI 的语言探索以介绍语音交互内容为基础，结合我的实际工作项目经验，输出总结关于语音设计的内容，最后结合案例，在对话设计中会进行深度的探索，并提出个人的想法和思路，因为有的时候深度去思考觉得我们项目还可以有很多优化的点。进入我们今天的正题。在说语音交互之前，先给大家讲一下题外话，关于人机交互（Human Computer Interaction）简称 HCI，可能日后我想去攻读这个硕士学位，简单来说就是指人与计算机之间通过使用某种对话语言，以一定的交互方式，为完成确定任务的人与计算机之间的信息交换过程。语音助手最初的载体是手机 APP，通过与用户之间的对话方式，能够帮助用户来解决问题的，随着我们现在人工智能的研发技术不断发展，包括让机器学习，语音识别、图像识别、自然语言处理、智能搜索等一系列。语音交互运用的很普遍了，不仅仅只是智能手机，现在涉及到的领域是越来越多了，如智能家居、汽车、可穿戴设备、就连商场普遍也有机器人语音对话。HMI 语音介绍我这边就不打算讲语音的发展历史了，不然又是水了一大堆内容，我可是一个讲干货的小作家呢，如果我的小粉丝们需要的话，就私信我，我会在微信公众号更文。语言是传递信息重要方式，对于我们用户来说，语音交互也是学习成本相对较低、容易掌握的，语音交互设计简称为 VUI。新能源汽车不断的发展，智能车载系统也是我们最看重的。随着语音交互的的普及，语音识别开始走入人们生活，凭借其实用性和准确性得到了用户的认可，因此在发展的过程中摒弃了传统的、繁杂的手动操作，提高安全驾驶属性和更高效的处理问题的能力，但是，在现阶段的新能源汽车发展过程中还不能完全替换掉手动操作。现在为什么用户在驾驶车的过程中，还是不会常用到语音交互，首先提到的就是用户习惯，根据数据调查，在使用语音交互的人群中，年轻人占了主力军，其余年龄段的人由于常年驾驶都是通过硬按键来操控车内空调、电话、音乐、电台、内置导航。其实就算是苹果手机中的 siri 都很少用到， 在使用初期因为技术的不成熟，再加上冰冷的对话方式使得用户不对这个买单，像我现在生活中，用到的 siri 频率也会很少，最多就是定一个闹钟，app 实在找不到就会使用到，还有无聊的时候和他进行无聊的对话，嗯就这样子。国内做语音头部公司有我们熟悉的科大讯飞，还有和多家车企合作的思必驰、云知声，对内服务的百度，搜狗，腾讯，阿里这些大咖都有自己的语音技术。再讲一下语音的基础原理内容，这一块比较难懂一点，首先你要说出你需要解决的需求、要处理什么事情，通过车载系统设备收到指令的语音 自动语音识别 (ASR) 将指令转化为文本 自然语言处理 (NLP) 了解用户需要解决什么问题 通过Skill （普及一下知识：Skill 是一种程序的语言，有notepad++，UltraEdit等，好了不啰嗦了） 将处理好的结果处理成回复文本 最后再通过TTS 播报形式 形成回复音频 通过车载系统回复给用户解决结果，听起来是不是有点复杂了，我相信我是全网说的最细的了。如何去定义一个产品的语音的好坏？我觉得吧，能够让用户对于这个语音系统的满意度达到一个高标准，首先能够让系统能够听懂你所说的内容，并且给出相对应的解决方案，语音系统运用的简而易用即可，如何做到以上的要求，我会在下面对话设计中会着重讲解深挖的。车载语音交互（VUI）基本原则车载场景下的语音交互核心基本原则有三点：1. 首先是安全驾驶过程中，司机的眼睛、耳朵和手占据了大部分多任务操作，如果一些功能还需要通过眼睛和手来操作的话，会降低安全驾驶的系数，所以车载语音交互更有助于辅佐司机安全驾驶，减少注意力的分散。2. 其次是便利语音交互设计之初，一定要考虑便利、快捷，尽量的减少每一个任务的对话次数、快速响应、将对话流程简单化，从而打破 VUI 对于用户的一个心理障碍（便利这块内容我会在后面对话设计中着重讲解）。3. 最后是愉悦为什么要谈到愉悦，因为市场上最初的语音对话交谈，都是冷冰冰的，几乎没有情感可谈，像极了和机器人对话，并且有的时候无法处理任务就会说，超出能力范围，这是一个很不好的用户体验。现在市场上可以看到，导航软件也有语音包可以选择，这也是增加了情感化设计，这是其中的一个点。还有一个小点就是自然的对话交流，很流畅的完成用户提出的每一项任务，尽可能的规避对话中的错误，让整体的对话过程达到一个愉悦的感觉。用户语音的目的用户在语音交互的时候，绝大多数都是带有明确指示任务指令的，也有可能是闲聊状态。1. 任务状态下：任务式对话中，用户需要尽快的得到想要反馈和解决方案，并且快速的完成，此类任务的反馈要求还需要清晰、简单明了。2. 闲聊状态下：我们经常也会问 Siri 一些无聊的问题，比如：“siri 给我来一段 Rap” 通常这类的任务带有的目的性不是很强，但是对于趣味性要求会高。市场现状（VUI+GUI）语音是最舒服的交互形式，但是他不能完全取代 GUI，相互协作才是更佳的方案，所以现在市场上的车载系统大多数都是以语音（VUI）和图形用户界面（GUI）相组合的，也有少部分车加入其他交互方式譬如手势交互。语音与图形的交互是交叉处理，从而形成了多模，多模态在我第二篇文章也有讲到，第一次看我文章的同学们可以回顾一下，用户在对车载系统发送一个指令的同时，设备会有多种的反馈方式，首先你可以听到系统虚拟形象给你做出回答，其次你看到图形界面的变化，举一个例子，你说：“我要听周杰伦的七里香”系统就会处理讲页面跳转到音乐界面，并且播放周杰伦的七里香，如果声音小了，你可以说：“声音大一点”大家是不是发现一个问题呀？我在前面说系统首先会做出回答，然后界面才会发生变化，但是实际情况，系统语音形象没有做出任何多余的回答，而是直接听取到用户的需求，直接反馈出结果，播放了周杰伦的 #七里香#，这就是我准备在下面会重点讲到的“对话设计”在说对话设计之前，我们先了解一下 VUI 设计师，想必大家头一次听说，还有语音（VUI）设计师嘛，国内不太注重培养 VUI 设计师，大家可以去招聘平台搜索一下语音交互设计师，很少有公司专门针对这个职位去招聘的，就算有，也是招聘算法等研发岗的职位，VUI 设计师的工作任务一般都是公司的产品经理或者交互设计师代劳了，这会肯定就有产品经理或者交互设计师想出来吐槽了，哈哈哈语音交互方式给用户听和说两个动作，相信大家也有听过 72 法则，因此在听到的信息设计发面需要考量，因为用户听到一遍内容之后就消失了，除非这款车机语音系统，有再次复述上一段话的功能，不然在语音设计的时候，千万不要让用户产生的认知负荷，更不要挑战用户的短时间的记忆力，最强大脑除外，我们大多数人可不是什么最强大脑是不是。再次强调一下，就算拥有复述这个功能，也要注意设计的语音内容，该功能点只是加分项而已，不能打破底线，将语音设计的原则抛之脑后。几乎所有设计师都在用的72法则到底是什么？了解 72 法则，并应用到日常设计中可以准确的传递主体内容，并使用户对其产生一定的印象。阅读文章 > VUI & GUI 的优缺点再分析一下图形设计（GUI）和语音设计（VUI）之间的优缺点，那我们先从优点开始说起。(1)前面我们有提到 VUI 只需要听 and 说，而 GUI 则需要触控屏幕内容，在效率和安全方面没有 VUI 好，触控操作比语音操作要相对会慢，语音交互方式中驾驶者无需离开方向盘。(2)在对于整套车机系统而言，GUI 学习的成本远高于 VUI，因为 VUI 只要会交流即可，无须像 GUI 一样学习触控交互手势、在哪里点击等一系列问题。(3)还有一点，图形设计是一种已经预设好了操作路径和交互方式，页面之间存在这层级交互的基本关系，用户需要根据指定的操作进行，而 VUI 则突破了 GUI 的限制，交互更快捷了，举个例子：“导航去虹桥机场”，VUI 则一步到位，而 GUI 首先需要找到导航应用的入口，然后再点击搜索输入框，输入#虹桥机场，确认完毕之后，再点击导航，我的天呐我写的都很烦了，说真的还不如语音一步到位呢。说完优点后，我们在反思一下 VUI 还有哪些没有 GUI 做的好的点.(1)语音交互涉及到 3 块内容，语音识别，识别用户所说的内容，其次语言理解，这边会关乎到方言理解的问题，毕竟我国语言博大精深，难以参透哈哈哈，最后是语音的合成，这三块内容如果有一块出了问题，最后反馈的结果可能并不是用户想要的答案。而图形设计有这统一的执行操作指令，不会出现什么 bug 问题，如果有，那肯定就是这款车机在测试的时候测试人员遗漏的问题，可以投诉。(2)整套车载的 GUI 设计都会有一套严谨的操作逻辑，有明确的信息分布和页面的层级关系，但是 VUI 的功能不可见（除非你看那个使用手册，哈哈哈哈哈）所有的场景 VUI 都需要去探索，在引导性方面会弱很多，所以在买车的时候抓住销售员使劲的问哈，毕竟你花了一大笔钱来买车了，在试驾的过程中也要多去询问，就先点到这里了。(3)GUI 是可以全场景交互，不限制于任何场景，而 VUI 则会受到的场景因素较大，有较多场景中不适用语音交互，最直接的就是设置中的内容。(4)语音设计对于用户的一个记忆力是一个考验，如果一个很长的 TTS 反馈，用户不知道哪里才是自己所需要的信息，因此在做 VUI 设计的时候尽量简短高效的句子，而 GUI 信息都会呈现在页面中，所以这个点要相对优胜于 VUI 了。总结一下以自然交互为主的，声音，显然是最自然的交互形式，但不能完全取代图形 GUI，而是更好的协作，尽量减少界面的形式设计，加强情感化的交互形式体验，将智能化更好的融入到车载系统中去，让每一位用户能够更好，更便捷，更安全的驾驶着汽车，是我们全体设计师的初衷。嗯，感慨了一下。想用一个成语总结一下：相辅相成，就是这个意思语音设计需要考虑几个要点1. 一定要想好从哪里开始，到哪里结束我们首先假设一个场景，调节空调温度的语音设计，那 VUI 设计师需要将这个场景的对话要贯穿该流程中去，那接下去要考虑这段对话可能出现的任何状况，以及相对应的解决反馈内容，再第二点设计 VUI 语法中，我给大家演示一下空调全方案案例。2. 设计 VUI 语法语法就是用户输入给机器的指令，VUI 的设计师需要了解对话设计的意图，尽量要考虑用户可能表达的所有方式，将最常用的表达方式提取出来，作为指令的模版，当然越多越好，这样给用户体验带来的感受会更好，能够解决用户的问题概率也会提高，别到时候语音助手反馈：“已经超出我能力范畴 or 您换个说法试试”，我一听到这些就炸毛了，后面就不可能再去使用它了，因此 VUI 设计师一定要多考虑一下指令。语法我会在我工作实际案例有特别详细的讲解（在实际案例篇幅 – 使用语音场景分析里面），这个特别重要，大家要细细的品。3. 空调案列分享：用户一开始的输入指令可能有 “打开制冷模式”、“打开加热模式”这些都会有点官方定义的语法感觉会很正式。下面再延展一下用户轻松的说辞 “我有点热了帮我开一下空调”、“今天太冷了，车温度好低啊” 其实用户的说法有很多，但是空调的模式就这么几种，所以需要抓住关键词 #热、#冷、#高、#低 …，什么意思呢？因为这些关键词是起到决定性因素的内容，其他的修饰词语可能会千变万化，所以语音助手一旦检索到该词汇，就可以做出判断，到底是制冷、还是制热、还是通风等功能。先简单就介绍这一个，后面还有很多案列，大家好好看奥。4. 如何设计好回答用户的问题在语音基础介绍中也有提到过 TTS，他是语音交互中最主要的回答方式，就是将 VUI 设计者撰写好的对话设计脚本，通过 TTS 转化为语音去播报。回答能够给用户带来最直接的感受，回复是好是坏，会直接影响到这款语音产品的体验，想要设计好我想谈两个大方向，设计脚本尽量简洁明了，全局系统语言特点保持统一，后续有案列可以叙述讲解的。国内外语音设计差异点国内的语音设计和国外也会存在差异点的，首先是地方语言的差异，国内语言多达 80 种以上，汽车智能语音在方言这一块相对堪忧，能够支持的方言相对较少，这也成为了中文语音识别的一个难题。在设计语音之初我们就得定义好，需要支持哪些方言，比如粤语、河南话、四川话等，现在的车载版本微信可以支持 20 多种方言，但是整体的车机系统可能难以做到这一点，这块内容是需要攻克的一个壁垒，据我查看国外报道，关于方言解决方案，宝马、三星和松下三家公司与语音识别公司 Nuance 合作开发新智能辅助技术，这项技术使得汽车语音系统在处理特定的方言时，可以更加容易。还有一点就是中西方语言文化差异，那就举一个例子，单从一个社会礼仪就可以展现出两者之间的差距，国人路过遇见熟人总爱嘘寒问暖 “吃饭了吗？”、“到哪儿去”、“最近怎们样呀？”等，在我们看来，这是一种有礼貌的打招呼用语，但你要跟西方人这样打招呼 “Have you had your meal?”、“Where areyou going? ”，他们则会认为，你想请他吃饭，或者干涉其私事，会引起误解，而西方人见面通常打招呼 “Hello”、“How do you do! ”、“Nice day, isn’t it? ”实际案列讲解篇幅1. 语音唤醒设计车载语音唤醒分为免唤醒和需要唤醒，免唤醒的定义就是无需说出唤醒关键词或者其他任何操作，就直接可以进行与语音助手交谈并处理任务。如需要唤醒的话，触发动作可分为点击、按压、语音等，目前市场上主流的车机唤醒方式有三种：实体按钮，好处就是能够给到用户触觉上的反馈，用户感知性强虚拟按钮：此类的按钮一般都会在中控屏幕上面，唤醒的方式是点击语音唤醒：在驾驶场景中双手被占用，不能远距离的操作中控屏幕，最佳的交互操作方式就是语音唤醒语音助手形象在语音助手形象设计方面，会分为两种，一种是卡通化语音助手形象，而另外一种是抽象化语音助手，下面用实际案例展示一下，卡通形象我们就拿未来汽车的 NOMI，抽象化 Google 的 Android Auto 语音形象基于工业设计 2021 年 01 期的调查数据分析来看，卡通化的语音形象在亲和力上有很大的优势，能够被用户快速的接受，但是辨识度上可能存在同质化严重问题，所以在效果表现力上面有欠缺，也较难表达车企的品牌理念。抽象化的语音形象则通过造型的多变和动效丰富，从而在设计感和效果上相对突出，在传达性上也不满意，用户不容易知道当前语音是处在一个什么状态下，在亲和力上远也不如卡通化形象。使用语音场景分析(重点）关于车内可以延展很多应用的场景，要知道用户在驾驶过程中需要完成什么样的任务，接下来我们就围绕这几个核心的功能点 多媒体（娱乐）、车辆控制、导航、电话，顺带将每个模块语音基础话术指令带过一下外加TTS反馈，也是让初学者熟悉一下命令，这块内容很重要奥，都是我在实际项目工作中总结出来的，大家要上点心好好看，答应我好嘛1. 多媒体（音乐、电台）播放音乐、电台或者是播客这些都是一辆车最为常见语音交互的功能之一吧，开车的时候都会听一些音频类内容，对于这个功能播放、暂停和切换歌曲等功能外，电台快速选择，针对这些功能我们可以划分一些子功能对应的典型话术。音乐-话术播放音乐按歌手 我想听霉霉的歌、播放周杰伦的歌歌曲名称搜索 播放天外来物、来一首七里香歌手名称+歌曲名称组合精准定位（因为有很多翻唱的曲目） 播放周杰伦的七里香按照语种 我想听粤语歌、放一些英文歌按照曲风 来点爵士音乐、播放摇滚音乐根据音源播放语在线音乐 播放qq、网易云、酷我音乐等等（因为每一家车厂合作的音乐供应商不一样）蓝牙音乐 播放蓝牙音乐、跳转到蓝牙音乐、放蓝牙歌曲、切换到蓝牙音乐、我要听蓝牙音乐U 盘音乐 播放U盘音乐、听U盘音乐的歌、跳到U盘音乐音乐播放控制命令切换当前播放列表上一首歌 切到上一首、上一首歌切换当前播放列表下一首歌 放下一首音乐、切下一首换一首歌播放 换一首歌、换一个音乐、换个歌暂停歌曲 暂停音乐、音乐暂停、停止播放音乐、不想听歌了继续播放 继续播放音乐、播放音乐针对于音乐这个模块的基础语言先讲到这边了，因为在线音乐的功能相对比较多，所以后续我会对于 QQ 音乐、网易云、酷我音乐等在线音乐额外的语言控制命令再写一篇续集。电台-话术播放电台打开电台 打开/开启收音机、听广播、播放电台/收音机/广播/Radio按频率收听 调频、播放调频、收听调频、广播按频段+频率搜索收听 我想听FM、FM、收听/播放/我要听FM、收听AM按电台频道搜索收听 我想听音乐类电台、我要听上海电台、收听/广播按在线音源+音频类型搜索并播放 播放喜马拉雅的相声按艺术家+音频类别搜索并播放 我想听郭德纲的相声播放源喜马拉雅 收听/打开/我想听 喜马拉雅FM 打开/收听/我想听/播放/我要听 FMAM 打开/收听/我想听/播放/我要听 AM电台扫描扫描电台 扫描电台、搜索电台、重新搜台、搜寻电台、搜索频道、扫描频道电台轮播轮播电台 浏览电台、电台浏览、电台轮播、轮播电台、快速浏览电台播放控制命令上一个电台 上个频道、上一个台下一个电台 下一个台、切到下一个台换台 换一个台暂停电台 暂停电台播放收藏/订阅 节目 收藏、收藏这个、添加收藏、加入收藏取消 收藏/订阅 节目 取消收藏、收藏取消车辆控制-话术基本功能包括车内空调温度调节、控制车窗开关、后视镜角度的调节，还可以切换驾驶模式、变换档位等等。空调控制空调控制 ON/OFF 打开空调、关闭空调空调 Auto 打开自动空调、自动空调开启空调打开+模式 太冷了、好热啊（检索到关键词，制冷/热进行切换模式）空调风量增减 风量大/小一点、风大/小一点设置风量级别 风量设设为2级、风量调成2级、风量最大/小空调温度增减 温度高/低一点、温度调高/低一档设置温度级别 温度调到xx度、温度设置xx度、温度调到最高/最低温度（空调温度调整到对应指）空调吹风模式 吹脸/脚、吹脸吹脚、吹脚前除霜、前除霜（前除霜：处理前挡风玻璃的）后窗除霜 打开后除霜/雾、打开后窗加热、后挡风玻璃除霜/雾车窗开启/关闭车窗 开/开启/打开/关/关闭 车窗（未指定某一个窗户，打开/关闭所有车窗户）指定开启/关闭车窗 开/开启/打开/关/关闭 – 左前/右前/左后右后窗 、 打开/关闭主驾旁边车窗、打开/关闭前排窗、打开/关闭后排窗、打开/关闭全部窗户车窗开启/关闭到具体数值 车窗开/关一半（1/2）（车窗调节范围0-100%，根据不同车厂设定值为准）情景模式前文中有提到 TTS 反馈，那我就在车辆控制中情景模式详细举例子给大家讲解一哈。清凉模式 打开/开启/关闭 清凉模式 TTS反馈 清凉模式已打开/关闭、清凉模式已处于打开状态温暖模式 打开/开启/关闭 温暖模式 TTS反馈 温暖模式已打开/关闭雨雪模式 打开/开启/关闭 雨雪模式 TTS反馈 雨雪模式已打开/关闭、即将关闭车窗，请注意安全抽烟模式 打开/开启/关闭 抽烟模式、我想抽烟 TTS反馈 抽烟模式已打开/关闭导航-话术导航是我们最常用的功能之一，对于用户而言输入地址是一件头疼的事情，所以在导航去目的地的时候，直接语音输入后，匹配所需要导航的目的地，让语音助手帮你直接导航，还可以询问语言助手到达目的地时间和距离播报，有的车机导航系统还可以支持语音缩放地图大小，省得两只手指在触控屏幕进行放大缩小操作手势，在导航中的使用语音主要的目的就是便捷与高效。导航中的执行逻辑我这边就不做过多叙述，因为相对要更专业点，后续有机会我再深挖讲解。导航公司 我要去公司、导航到公司、去公司、上班了回家 我要回家、导航回家、回家了注：如果没有设置公司/家的地址 需要进入设置公司/家的具体地址流程，设置完毕之后，方可语言导航去公司/家附近加油站 导航到附近/周围/周边加油站、帮我找个最近的加油站当前位置导航到模糊的POI（会产生多个结果） 导航到火车站（拿上海举例子：上海有虹桥火车站、上海火车站、上海南站、松江站、上海西站，因此产生了多个结果后，语音助手还会继续问到你需要导航到具体那个火车站，如果时间超过定义时间将默认为第一个）当前位置导航到POI简称 导航到人广（人民广场，要不要和我一起去吃炸鸡 哈哈哈）、带我去交大（交通大学）增加途径点附近其他 导航附近三甲医院搜索指定位置+指定类型 POI 帮我找一下南京西路的日式餐厅搜索指定距离+指定类型 POI 两公里以内的停车场、一公里中式快餐店搜索指定位置+指定品牌 POI 南京西路的古驰店导航距离/时间的播报查询途径点的距离播报 距离南京西路还有多远、距离下一个途径点距离还有多少查询途径点到达耗时播报 到南京西路还需要多久、距离下一个途径点还要多长时间电话-话术在驾驶过程如果需要拨打电话，是一件不太容易的事情，而且是极其危险的，所以需要结合语音进行来辅助，接听/挂断不管是屏幕触控还是方向盘的硬按键都可以直接操作，体验还不错，对于不习惯语音的的人来说该功能点可以替代，但总体来说，语音接通/挂断会优于屏幕触控，硬按键对于长期使用来说可能会有优过语音，对于用户来说，在安全驾驶前提下，哪种使用方式习惯就用哪种。拨打电话联系人姓名 打电话给老妈、呼叫老爸、联系哥哥、给姐姐打电话拨打电话号码 打电话给12315、打电话给18015888888拨打常用黄页名 打电话给中国电信、给上海银行打电话接听/挂断/重拨/回拨接听 接听/接电话/接通电话/接听电话挂断 挂断/挂电话/挂断电话/挂掉电话重拨 重拨电话回拨 回拨电话对话设计对话设计是基于人们的对话的设计语言，它集合多个设计的内容，其中包括语音用户界面设计、交互设计、视觉设计、动画设计、语音对话脚本设计、乃至还有音频设计增加语音助手的灵动性。对话设计的是否成功与否最重要的就是个性，现在市场上的许多车载语音系统对话听起来还是基本很相似，是因为很多公司都没有专业的对话设计师，要么是程序员、产品经理、好一点的公司组建一个语音组，都是从其他行业转化过来，然后将各个大厂的语音对话研究一下，就上岗了，国内优秀的 VUI 设计真的很稀缺，也是很缺少的人才，我可不想再用语音交互的时候语音助手和我说“对不起，我没懂你的意思”对话设计师在规划用户在具体每个功能模块区域内做什么，同时还要考虑用户的需求和技术限制，对话的策略，是代表着该语音系统完整的用户体验，也包含这详细的规范定义流程和底层逻辑。这边需要着重的讲一个小知识点：我们会有一个误区，认为“对话”仅只是说 or 听到的内容，其实对话本质上是多模态的，对话的核心内容是对话的流程和底层逻辑，图形界面的逻辑一般都不太会用在对话内容的设计方面，基本上他们两是一个独立的个体。对话设计需要注意点1. 语音简短化车载语音的对话做的是否 OK？是基于对话内容时间的长短，因为用户没办法像查看 UI 界面内容那样，去查看语音的内容。根据人的平均记忆力，如果车载语音虚拟形象说了，关于这个话题很多内容，用户可能无法记全所有的内容，这对于对话将大打折扣，因此在对话过程中需要严格遵循 简短明了，让每一个文字都有意义，避免重复的短语，可以让用户快速的做决定。2. 响应等待设计当用户在用导航功能的时候，语音对话说“导航去火车站”，如果在上海的话，就有好几个火车站，需要用户再次去选择，1 虹桥火车站、2 上海火车站、3 上海南站、4 上海西站，我们在做项目的时候，体验设计师给他的定义是如果用户超过 8 秒还没有进行选择的话，默认是选择第一个，如果第一个目的地不是我想要的，那么我需要重新通过语音再次输入信息。我觉得默认选择这个选项可能会有些不妥，如果这期间来一个电话或者是微信的语音电话，那么我是不好通过语音去选择的，如果汽车不是在驾驶的状态，可以手动触控屏幕进行选择 OK 没问题，如果是驾驶状态下，就需要优化前面默认选择项了。我的想法(1)超过 8 秒钟后，默认选择第一个没有问题，但是在用户结束自己之前任务状态后，可以说重新选择目的地，将之前的搜索出来的火车站结果都再次调出来，提供用户重新去选择。(2)这块就更智能化一些了（这个有一点前瞻性的意思，研发要是看到这个需求估计要揍死我），当语音助手检测用户正在忙的状态时候，在 8 秒钟都没有做出选择，那么语音助手可以从第一个目的地开始播报，用户可以通过方向盘 OK 硬按键去选择自己所需要导航的目的地，在驾驶过程中，方向盘的硬按键安全性远高于中控屏幕的点击。3. 避免过多的选择给用户提供选择的选项列表的时，最好不要超过三个选项，给用户较少的选择，能够让用户更明确去抉择，减少过多选项对于用户的干扰，刚刚上面导航那个案例排除，上海火车站真的太多了没办法，其他城市应该还好都是 1-3 个左右。我的想法上面实际案例就是强行逼迫用户去选择一个，这种体验很差，有一种场景，如果这三个选项都不是我想要的，你就得重新说，帮我推荐一下附近的餐厅，想想这种体验就不是我想要的，我觉得可以增加一些情感化的设计在里面，如果这三个选项都不是我想要的。我可能会说“这些我都不想去、能不能帮我再推荐其他的”语音助手说“你可真挑食、好的，那我就再帮你找找其他美食”（我的意思就是要让机器多去自我学习，更加智能化、情感化贴近于用户的交流，这样用户才会更愿意使用语音交互）上诉的场景是对于这块区域不熟悉的用户来搜寻美食，如果用户有直接目的需要吃什么类型的餐饮的时候，语言助手只需要推荐相关美食就好。用户说“帮我找一下附近的海底捞”语音助手说“附近有三家海底捞，您是要去哪一家…（播报三家信息）”(播报三家海底捞的位置和距离，甚至我想是不是可以增加排队人数的播报，如果排队人很多就可以换一家，接下来就可以和语音助手直接说帮我预约好位置，省的用户到店面还要进行排队等候)4. 不要假设用户知道该做什么在做对话设计的时候千万别考虑用户的思考逻辑，每个人的思考逻辑都不一样的，所以不用去猜想用户的想法，只需要提供有用的信息让用户自己选择好了，前面有提到对话设计是讲究有逻辑性的，你在设计对话剧本的时候不可能就只考虑一条线。举个简短的例子，你在设计一个订购飞机票语音对话流程，你想法是，首先先确定目的地，哪里起飞去哪里，然后再选择时间点起飞。假设用户直接说：“帮我预定早上八点的飞机，飞往深圳。”那问题来了一开始是用户是说的时间，最后只说了目的地，没有有说出发地，因此在语音设计剧本的时候，你需要将所有能出现的状况都考虑进去。5. 语言文案设计一致性在图形设计之前 UE 也需要将动词、名词之间的搭配提前定义好，需要全局保持一致性，这块内容有在我第二篇文章提到过，因此在对话设计过程中也要格外注意。6. 不要信息轰炸用户现实中我们正常处理事物的时候，也是将事物划分成几块，然后按照计划步骤进行，而不是一股脑子乱做，车载语音设计也是如此，作为一个正常的用户来说，我们一次性说出的需求并不会很多，不会像专业的车机测试人员一样，去叙述一大堆信息去检测机器的运转效率，和一个处理信息的准确性，每次出差去南京走查，都会听到测试人员巴拉巴拉 一直说，我脑袋都大了，所以我们正常用户都是逐步的去说消息的，举个列子7. 避免使用专业术语举一个场景的例子，当你在道路上开车，需要停在路边接朋友，朋友还没有到达指定位置，或者该位置是不可以停留的，语音助手正确说法“这边不可以停车，不然交警叔叔会罚款的，赶紧溜，我帮你找一个附近可以停车的地方吧” 错误的说法：“你触犯了了我国《交通法》第 XXX 条,……此处省略法律条文这边是禁止停车的”首先当你听到触犯法律，你的第一想法 what？这是什么鬼，给用户的感觉是很糟糕的，因为法律消息通常会包含长阅读并且还不自然的语言，给用户带了不好的体验，并且还未给解决的方案。一个好的语言设计方案会让人喜欢上使用它。最后来个总结：后续我会对于前瞻性的语音进行探索，再写一篇。前瞻性的就再举一个吧：通过面部扫描，检测到用户不开心的时候，车载系统可以推荐一些治愈系的电台，或者可以让用户放松、舒缓心理的的歌曲，或者你进行人机交谈（这个就比较高级，需要让语音系统进行大数据自我学习，达到能够和人能正常交流），让我们一起展望未来吧。文章中如有不足之处，欢迎补充交流，我们下期见阿里设计师：语音交互设计的流程及方法全面总结随着移动智能终端和云计算的快速发展，人工智能的浪潮正在悄然颠覆着我们生活的点点滴滴，VUI（Voice User Interface，语音用户界面）作为一个新的领域也在快速发展，并对用户体验提出了更多关于语言学、情感塑造、逻辑搭建等方面的新要求，本文结合参与的项目，将语音交互设计的发展、阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/hmi-vui-design
视频 编辑 静音 当今有非常多的在线视频编辑工具很好用，具备不需额外下载、安装软件和跨平台特性，无论进行简单裁切、合并、调整视频尺寸大小或播放速度等等都能轻松做到，对于平常很少编辑视频的朋友来说就很方便。大家一定知道手机录像后也能对视频进行裁切、套用滤镜、调整色彩或是翻转校正等等操作，那么在计算机上应该怎么做呢？想让视频瞬间静音？收下这 6 个免费在线影工具！在 Instagram 拍摄影片限时动态时只要将上方的喇叭图标按掉，影片就会变成静音状态，要将影片转为无声非常简单，但是一般情况下如果想让影片静音要怎么做呢？阅读文章 > 本文要介绍的「Video Candy」是一个提供免费在线视频编辑服务，收录各种用户需要的编辑视频功能的工具，100% 免费使用！包括压缩视频、视频剪辑、合并、裁切、重新重设大小、将视频转为定格动画、加入音乐、调整播放速度、视频静音、使用相片视频制作投视频、反转视频并倒带播放、翻转视频、回放视频、水平或垂直翻转和视频转为 GIF 格式。Video Candy 优点是集合大多数用户会用到的视频编辑功能，通过浏览器将视频上传、以交互式界面进行操作，最终就能完成编辑，将视频下载保存。Video Candy网站链接：https://videocandy.com/（搭梯子访问更快哦）使用教学开启 Video Candy 网站会看到完整的在线视频编辑工具，直接从首页选择要开启的功能，或是在上方选单列选择，功能不算太多太复杂，也几乎都是使用者日常会碰到的问题。举例来说我选择视频切割功能后会看到「Add File」选项，点选并找到你要编辑的视频文件。因为是网络服务，需要将视频上传到 Video Candy 才能进行接下来的操作，若视频容量很大可能会需要一段等待时间，在完成前需要保持分页开启。视频上传后就会进入裁切工具，从下方时间轴拖曳绿色范围来调整要剪辑的段落，裁切时随时点选中间视频「播放」实时预览剪辑范围，右侧则是使用时间设定裁切部分、淡入淡出音效等等，随时注意右下角会标示使用者拖曳选择的视频时间，完成后点选「Export」输出视频。输出后需要一段时间处理，处理完成会显示新视频下载链接、标示视频大小，点选「Download File」绿色按钮就能下载保存视频。有些工具例如「视频静音」就不会有编辑选项，上传视频后直接会显示处理后的下载链接。右上角会暂时保存使用者最近处理过的视频文件，包括文件名、格式、文件大小等信息，可快速重新下载（如果忘记下载的话），要注意的是编辑后的新视频只会保存最多 120 分钟，时间一定就会自动从服务器删除，需要时可以重新上传文件然后再次进行编辑操作。值得一试的三个理由：Video Candy 收录各种用户需要的编辑视频功能免注册、登陆账号或下载安装软件，通过浏览器就能使用编辑后的视频只会保存 120 分钟，过期会自动删除需重新操作在线就能用！10个帮你修图+剪辑视频+PPT制作的网站编者按：想修图，做视频和PPT，但是不会使用专业软件？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/video-candy
品牌 视觉 游戏 WeGame 作为 PC 游戏发行平台，自品牌创立以来就一直致力于做连接开发者和游戏玩家的桥梁，随着业务的不断发展和优化诉求的持续积累，在今年我们迎来了品牌的全面升级。设计团队主导了 WeGame 2.0 的整体设计工作，今天便和各位分享一下背后的所思所想以及相关设计成果。迄今为止，WeGame 已经陪伴玩家走过四个年头，作为一个逐渐步入成熟期的产品，却没有经历较大的版本升级，而随着业务的不断发展，我们清晰的意识到, WeGame 需要调整升级再前行。而触发改版的具体动因，可分为以下两点：1. 自我审视，调整方向再前行WeGame1.0 定位以“发现更大的游戏世界”，着力于向外挖掘游戏内容，而今看已逐渐偏离实际，对于产品现状的自我审视，调整方向再前行，才能更好的提升品牌价值。2. 产品老化带来体验问题，需自下而上的革新产品持续迭代 4 年多，其间客户端存在着不少遗留的体验问题，如电脑资源的高占用、软件使用卡顿、启动游戏太慢等性能问题，正持续影响着平台口碑。因此自下而上的革新，提升平台体验势在必行。基于以上思考，在今年初，由产品侧发起制定了 WeGame2.0 的升级策略，主要体现为两点，一是向开发者推出一系列更友好的扶持策略，以刺激内容增长；二是持续的优化平台性能，往更轻更快更好玩的方向发展。而产品诉求是希望品牌能够传递出更友好更亲和的感觉，不走高冷范。WeGame 的核心价值在于连接开发者与游戏玩家，在品牌升级之路上也将秉承初心，因此，品牌的新定位为：与游戏人同行，表达了平台希望与玩家、开发者和行业携手并进，共同探索游戏世界的目标。具体会落实到以下三点；综上所述，我们将 WeGame2.0 的设计目标,定为以下三点：首先是配合产品战略升级，刷新品牌调性；然后在继承核心品牌基因的基础上，植入新调性以刷新品牌设定；以及探索更多维度更多形式，不断的深化品牌应用，拓宽品牌边界。而在设计执行上会具体的分为品牌调性、品牌设定和品牌应用三大实施步骤。1. 建立品牌屋通过建立品牌屋整合和梳理相关信息，包括“品牌是什么”，“品牌要做什么”，我们对 WeGame2.0 的升级工作也有了一个较为清晰明确的方向，就是要让品牌传递出更年轻、更具亲和力的感觉， 摆脱产品“疲态”，重新注入“活力”。2. 确立 WEGAME 2.0 品牌调性3. 关键词：活力、趣味、多元关键词活力、趣味、多元，是 WeGame2.0 的高度提炼和解读。活力，表明我们会带着更年轻化的表达，以传递正向的游戏能量；趣味，表达的是要去探索更多形式，做到更有趣更好玩；多元，是不断的拓宽品牌边界，创造出更多可能性。4. 围绕关键词，建立情绪板以上参考图来源于网络品牌调性确立后，接下来的工作重心围绕如何继承核心品牌要素以刷新品牌设定，使其焕发新面貌，覆盖的维度也能更广更全面。品牌设定主要由品牌识别系统、品牌形象、视觉风格三大内容构成。1. 品牌识别系统标志图形LOGO 的设计由来WeGame Logo 的设计是由“W”和“G”组成的一个裂开的蛋型，自创立之初就表达着“孵化，新生，破壳而出”的概念和寓意，在此次升级中我们希望将这份初心延续下来。新 LOGO 的改版过程在保留原 Logo“蛋形“和“W 形”的基础上，我们对图形细节进行了不同程度的调整，然后向内外部用户发放问卷以调研 Logo 的偏好度。结果显示，大家普遍更倾向于选择变化度较小的圆角化图形和渐变的配色风格，而我们也根据这个结果进行再优化和细节打磨。旧—新：新版Logo在充分继承品牌基因的情况下，将图形变得更圆角化更柔和，线条走向也调整的更为匀称。Logo 的定稿效果Logo 的动画演绎辅助图形辅助图形是除 Logo 外最为重要的品牌符号，目前主要有三类元素组成，从 LOGO 图形延伸出的“W”型和圆直角的基础型，还有结合新品牌调性加入了更多活力的视觉表达元素等。W 形：首先是从 Logo 延展出来的 W 型符号，是作为最重要的图形元素。圆直角：基于 LOGO 圆角化延伸，打造出来的圆直角的一个基础型。活力—视觉表达式 ：是对活力的具象化和视觉化，包括对“动”的表达，和对“态”的表达元素。视觉表达式图示色彩系统品牌主色调：活力渐变橙通过在旧版 Logo 上提取原色，来进行色调调和并拓展阈值，得出了全新的活力渐变橙，这个更具年轻化和动感的品牌主色调。除此以外还加入了更多的辅助配色，以形成一个闭环式的全彩色环。文字系统规范基础字体的运用：基于 Logo 圆角化的特征，寻找了一些合适的品牌基础字体。建立字符变形规则：对于特殊字体的设计，我们建立了一套字符变形规则：就是圆直角的基础型加上品牌识别元素，再加上活动的识别元素。活动 LOGO 展示：目前这个规则被应用到了四大品牌活动的 Logo 上，我们希望在这些 Logo 上能够呈现出既统一，又具备着强识别特征的效果。平面构成基于以上内容，从点线面出发来组建了各类平面构成元素，以补充平面图案素材。WeGame2.0 品牌书在完成了以上视觉符号的刷新工作之后，我们建立了一个系统的品牌视觉指南，以便指导后续的应用，这里是品牌书的部分页面展示。2. 品牌形象品牌形象的建设是品牌设定中最为重要的组成部分，作为一个人格化的符号，IP 形象往往能够携带更多的品牌信息,更直接有效的传递给用户。蛋蛋君设定：WeGame 平台的核心形象蛋蛋君，是一个探索游戏能量的机器人伙伴，它是从 Logo 图形延展而来，带着“W 形”面罩和“圆形” 等明显的符号化特征。在品牌升级中我们将会保持蛋蛋君的基础型不变，去赋予更多的形式和变化。更多配色、更多材质、更多形式、更多小伙伴“游戏人”设定包括蛋蛋君在内，这三个形象代表着游戏行业中的每个身份，我们想要以人格化的形象来提高亲和力，在后续的品牌场景中可以起到一个辅助作用。玩家设定：青春活力的年轻小伙，服装设定为反戴鸭舌帽，身穿大帽 T。开发者设定：严谨而友好的开发小哥，在造型上搭配了黑框眼镜，格子衫等元素。3. 视觉风格WEGAME1.0 风格：WeGame1.0 时期我们从 0 到 1 建立起来“硬核、酷炫”的品牌风格，而后因运营需要体现热闹的活动氛围感，转而探索更为活泼的视觉风格，逐渐的两者间风格开始存在着偏差。那么，酷炫的品牌风格与活泼的运营风格是否能够做到更好的融合呢？带着这个问题，结合 WeGame2.0 产品战略调整，品牌需体现更具年轻化和亲和力的感觉，去思考新风格应该怎么变？新风格定位：我们最首要思考的是风格定位，希望是介于硬核感和亲和力之间，为 WeGame2.0 寻找定义一种新风格，既要摆脱高冷感，又要避免低龄的感觉。流行趋势分析：然后我们也针对当下流行的风格趋势进行了研究分析，提取出其中的共性特征，主要是高概括的图形元素和高饱和、高对比的配色风格。以上图片参考来自于网络设计灵感：对玩家来说，游戏中常常出现的对抗元素 ，像“胜利与失败”，“友军与敌军”等高对比而又具备强视觉冲击力的元素，往往会成为他们最为熟知且最为关注的焦点。而抓住玩家的视线焦点，正是游戏平台所需要的。以上图片参考来自于网络定义全新风格：对撞视觉经过以上思考，最终我们定义了一种全新的风格：对撞视觉，作为平台的主视觉风格。具体表现为颜色和元素间的对撞，主要是由圆润的主元素加上尖锐的辅助图形，以及加入高对比的配色形式所组成的视觉风格，这种视觉风格是很开放的，变化的形式也可以多种多样，也比较符合 WeGame2.0 趣味多元的感觉。品牌主视觉 ：“与游戏人同行”的具象化表达设计构思：品牌主视觉主要采用了“W 形”的整体构图框架，以及多个游戏人角色一起同行、方向一致的表达元素来组成画面，以对 “与游戏人同行”的概念进行具象化的表达。对撞视觉的概念图展示WeGame 新官网首页：其他功能页面：客户端下载页、翼计划页、先锋测试页等功能页面的集合WEGAME2.0 客户端：“轻、快”围绕新品牌定位“与游戏人同行”，希望给用户带来更为年轻化的体验，WeGame 客户端搭建了一套“轻快、轻盈”的视觉语言，以契合软件性能的大幅提升；在主要业务场景中，运用了大面积的磨砂玻璃效果和丰富的主题化配色，以提升整体的品质感和商品的多样性。图：客户端主要界面一览广告模板设计：结合 2.0 辅助图形和配色风格进行组合设计，输出了多种品牌化的广告模板，以便后续在项目中更灵活的使用。运营活动设计：在日常的运营活动设计中，也会在新品牌风格的基础上来进行设计。线下应用场景：WEGAME 开发者大会在今年 7 月底所举行的 WEGAME 开发者大会这个线下活动里，官宣了 WEGAME2.0 即将跟大家见面的消息，因此以品牌主视觉延展做了整套视觉包装。礼品包装设计品牌传播活动—游戏之夜S4试玩发布会活动介绍：游戏之夜是 WeGame 专属的游戏发布会，发布会通过举办各种活动来集中造势为新游戏做推广。在今年我们一共举办了两届游戏之夜，其中下半年的游戏之夜 S4 为试玩游戏发布会，在此为了配合品牌升级的宣传工作，活动整体的视觉包装以突出 WeGame2.0 为主，延续“与游戏人同行”的全新品牌概念和全新品牌主色调。宣传视频构思:其中发布会宣传视频的构思也会主要围绕着“与游戏人同行”来进行故事演绎，主题为“游戏人，一起玩！”，画面中蛋蛋君挥手召集开发者和游戏玩家，一起跑向电脑玩游戏，似乎有好玩的事儿即将发生，强调“一起”和“同行”的概念。发布会先导视频：转场页模版设计：以一种平面排版结合 3D 动画的形式，表现蛋蛋君带着另外两个小伙伴逐个登场亮相的感觉。游戏介绍页模版设计：延续活力和动感兼具的视觉语言活动主站 KV：表现“游戏人，一起玩”的主题概念宣发海报集合:游戏联合海报：除常规的宣传物料以外，本次活动还尝试加入了游戏联合海报的形式，为每款参与试玩的游戏制作专属的宣传海报 ，提供给在各社交媒体中进行宣传，借助不同的传播渠道为活动提升曝光度。统一的海报框架，专属的游戏元素游戏海报集合：这里是所有试玩游戏的海报集合，为了配合各个游戏风格海报的主色调上也会有所调整。以上是我们在 WeGame2.0 视觉升级中对品牌探索的一些阶段性成果，而这仅仅是开启了品牌的一个新篇章，品牌建设是一个长期的过程，后续我们将持续打造高识别、高传播的品牌符号，建立和不断的丰富品牌资产，拓展更多品牌应用场景，以设计赋能和助力业务持续发展。腾讯实战案例！如何打造有温度的二次元 IP 形象？项目背景随着 80、90、00 后陆续成为互联网社交的主力群体，泛二次元文化从以前的小众圈层，逐渐发展壮大，与主流文化接轨。阅读文章 > 优设推荐关注“腾讯设计”官方公众号，第一时间获取腾讯的设计方法论本篇来源：优设网原文地址：https://www.uisdc.com/wegame2-0
抽屉 方式 模态 本文会讲一些实用的 B 端弹窗设计方法：如何使用弹窗：根据应用场景、交互需求、内容量、一致性原则如何优化弹窗体验：弹窗按钮、弹窗高度、关闭方式、优化流程…对于想要快速上手 B 端设计的小伙伴，这篇实用性很强的 B 端弹窗设计值得仔细阅读～如何使用弹窗？1. 根据应用场景模态弹窗和非模态弹窗的具体使用场景可参考下图表格：2. 根据交互需求3. 根据内容量当内容量较少时，可以采取下拉菜单进行设计上的优化，下拉菜单几乎都是非模态，它的优势明显，没有复杂操作和各种表单，只需要鼠标划过点击即可，快速高效。如果不是影响业务流程的操作，而只是页面的设置类，可以将对话框改为气泡框或气泡确认框，如下图：当页面内容较多时，New page 新建页 > Drawer 抽屉 > Modal 对话框（内容的深度较深最好采取抽屉、内容宽度较宽则弹窗形式更为合理、而新建页合适宽度与深度同时较大的产品中）4. 遵从一致性原则除以上三个判断维度，还有「一致性」原则需要考虑，例如某产品弹出的表单大多较长，采用抽屉组件，为了保持体验的一致性，个别短表单也可以同样采用抽屉。例如钉钉的后台管理，大部分编辑都采用抽屉形式，而飞书的管理后台大部分编辑则采用弹窗的形式。但针对不同产品的具体情况，一致性的优先级有所区别。怎样优化弹窗使用体验1. 操作按钮固定在底部弹窗的操作按钮没有固定，随滚动条滚动，需要滚动到底部进行操作很不方便。2. 弹窗高度不高于浏览器内容展示弹窗高度过大，弹窗显示不全，就算滚动条固定到底部也有一部分显示不出来，影响操作。这里点击全屏显示会锁定页面的全局滚动条，但浏览器正常显示会出现两个滚动条的情况，体验会变差。对话框的大小主要根据内容而定。B 端应用中，一个尺寸无法满足所有类型的弹窗需求，所以我们要设定几种常规尺寸，一般可设定为 4 种：S （通知提示类）M （配置简单）L （配置复杂或者扩展详情）特殊 （根据实际情况而定）PC 的小屏幕分辨率为 1024*768，所以高度尽量控制在 600px 以内（除去导航栏、工具栏高度），宽度控制在 1000px 以内，避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。但值得注意的是：现在越来越多的宽屏正在逐渐占据市场，相对应的越来越多的网页设计的宽度和高度都不是固定不变的。抽屉提供稳定的尺寸。提供 S (w=378px) 和 M (w=736px)基础宽度选项。这两个尺寸是根据 antd 表单尺寸规范测算，分别可容纳单列和双列表单，而且保持了使用抽屉时父级页内容可见的优势。仍然支持自定义宽度。3. 背景锁定避免滚动条引起的抖动问题浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户注意力。因此我们要做的是背景锁定（从技术角度其实是暂时性干掉滚动条）。4. 关闭方式优化弹窗应至少包含一个以上的关闭方式，常见的弹窗关闭方式有 4 种：右上角的关闭按钮弹窗底部的“取消”按钮弹窗外的任意区域一段时间后自动消失弹窗外的任意区域，这种方式一般用于模态弹窗，除了弹窗中的关闭按钮外，点击弹窗外的任意区域关闭体验更佳。但操作配置类弹窗不建议采用这个方式，容易误操作导致正在配置中的弹窗被关闭。5. 避免弹框上再弹出弹框的问题要尽量避免在弹框上再弹一层弹框，两层蒙版会让用户觉得负担很重。方法一：改为抽屉如下图，钉钉的后台编辑员工信息，抽屉弹窗选择部门后打开选择部门与人员对话框。抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉。方式二：避免中间弹窗跳转抽屉弹窗的交互方式方式三：隐藏当前对话框第一步，选择添加成员后隐藏当前新增用户组弹窗；第二步，打开添加成员弹窗保存确定后显示之前到新增用户组弹窗，如下面来自飞书的后台管理，新增用户组弹窗的打开两个弹窗交互方式：6. 优化交互流程现在弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。如 iconfont 中的新建项目，用户新增后，页面会直接跳转到新的项目空间。如果内容过多，如下图 ，可以重新梳理交互，改成轻量弹窗+新建页的方式。原来的编辑内容过多，业务可以拆分成基本信息和配置信息，新增内容保存后可以自动跳转到配置页面进行配置。7. 模态层优化方式一：模态层颜色根据产品品牌色定模态层模态抽屉的遮罩背景如果根据产品色定不仅更贴合品牌，且显得更有设计感。下图帆软的模态层就不是大部分产品都采用的纯黑透明度而是加入了点品牌的蓝色系。方式二：有模态层但不显示模态层模态抽屉的遮罩背景层可以降低透明度，也可以是全透明不显示的，可以更好的展示关联的信息，点击抽屉其他处可关闭抽屉，钉钉后台管理的模态抽屉就是这样设计的。方式三：去掉模态层下图中的抽屉为非模态抽屉，可以根据左侧列的切换快速查看右侧抽屉内容。最后通过上下两篇「B 端弹窗设计」分享，希望能让你对 B 端弹窗有一个初步的认识和了解。除了弹窗，B 端产品还有很多设计知识点需要学习，在后续的文章中，设计夹将继续为大家分享有用的「B 端设计」文章。慢慢来比较快，如觉得有帮助，欢迎关注作者微信公众号：「Clip设计夹」大厂高手出品！深入了解B端的弹窗设计应用（上）在B端产品中弹窗已经被更多的设计师关注和使用。阅读文章 > 大厂高手出品！深入了解B端的弹窗设计应用（下）本篇文章将分享B端弹窗相关内容，我把文章拆成上下两篇。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/b-ens-popup-design
飞翔的企鹅
张大湿
落霞与孤鹜
表哥
在路上
