用户 操作 破坏性 TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。尼尔森十大原则由毕业于哥本哈根的人机交互学博士 Jakob Nielsen 发表，Jakob Nielsen 对人机交互有很多研究，他提出十大可用性原则，用来评价用户体验的好坏，每个产品设计者都可以根据这十大原则进行自查。本文中主要介绍了防错原则的具体应用示例，接下来让我们一起看看吧。用超多App 案例，帮你掌握尼尔森十大原则谈到我们生活中的那些产品和服务，它们常伴于我们左右，影响着我们的生活，与我们处处相关联，同样的这些产品也会影响我们的感受，我们常常在使用时会感到喜悦，也偶尔会在使用另一些产品时会感到不舒服，这些感受都是由产品和服务的体验直接决定的。阅读文章 > 错误预防错误预防是用户界面设计的 10 条启发式评估可用性的原则之一。据统计，犯错误的频率和严重性与系统的整体可用性呈负相关。尽管无法确保用户始终按照我们希望的方式使用我们的设计，但仍有一些方法可以防止（ 或减少 ）用户误操作，而且当涉及到破坏性操作时（ 例如，从系统中删除文件）尤为重要。对话框是系统和用户之间的“ 对话 ”。模态对话框会打断用户本身的任务流程，并要求他们采取行动或向他们提供有关当前工作流程的紧急信息。在执行破坏性操作之前，用户通常会看到一个确认对话框。破坏性操作的确认对话框示例一个确认对话框，询问用户进行确认，他们想询问用户对刚刚操作进一步确认（ 以防止用户误操作 ）。这些行为被称为肯定性破坏性行为；由用户发起的破坏性操作，其中出现模态对话框以确认操作，并确保用户完全理解操作所带来的后果。在某些情况下，用户或系统可能会意外启动破坏性操作。例如，在填写尚未提交的表单时离开页面可能会导致数据丢失。当用户在没有保存数据的情况下意外离开页面时触发错误预防模态对话。如何改进破坏性操作的模态对话框？1. 在执行操作之前提示在执行具有严重后果的操作之前（例如破坏用户的工作 —— 删除文件 / 帐户等），应使用确认对话框，这在无法撤销的行动之前尤为重要。2. 重申用户的请求确认对话框必须重申用户的请求，并说明如果请求得到确认，系统将执行什么操作，这使用户能够更加清楚地了解其操作的结果。将用户的行为描述成一个问题，是一种吸引用户注意力，并让他们停下来考虑自身的上一步操作的方式。下面的示例证明了这一点。重申用户请求的破坏性操作确认对话框示例。3. 帮助用户理解操作为了实现这一点，微内容 [2] 很重要。应该避免是/否以及那种含糊的选项（ 参见下面的一个反面案例 ）并且按钮的文本应该着重强调即将做出的选择（ 例如，删除帐户 ）。此外，在对话框中添加一些辅助解释会很有用，但主要消息应该在按钮文本中，因为急躁的用户更有可能忽略那些辅助的解释只关注按钮的文本。( [2] 微内容是一种用户体验文案，以短文片段或短语的形式出现，通常没有额外的背景支持。)糟糕的微文案会让用户感到困惑，并可能导致用户犯错并非常沮丧。4. 将按钮差异化例如，在一个按钮上使用了红色，可帮助用户识别出来这是一个破坏性操作。在这里颜色与主按钮的文案相匹配，并明确了按钮的用途，但是，由于可访问性和文化差异，仅依靠颜色是不够的。尤其是世界上大约 4.5 % 的人口患有某种形式的色盲，仅使用颜色来传达意义可能会让我们的很大一部分用户被拒之门外。因此，按钮标签需要具有足够的描述性，以便在没有颜色的情况下独立表达含义。为了使警告信号更引人注意且更易于理解，还可以在屏幕上显示一个代表破坏性操作的图标。5. 不要过度使用对常规动作使用确认性对话框会影响用户对破坏性动作对话框的认知。如果用户看到了太多确认性对话框的模态窗口，他们可能会习惯它们，并且不再注意他们。结果就会导致确认性对话框失去了错误预防的能力。6. 保证简洁确认性对话应该简短，以便于浏览，但是，在某些情况下，用户可能希望在提交之前了解有关其行为后果的更多信息。在这些情况下，可以使用渐进式披露 [3] 的交互方式。( [3] 渐进式披露 ：渐进式披露不直接给用户提供大量的信息和选择，而是将这个过程分解成几部分，让用户集中注意力在当前的事件上，从易到难地引导用户，这样不仅可以确保用户不会被新信息淹没，还可以分解用户不想做的任务。)渐进式披露能使用户自主决定是否要了解更多当前行为的后果用一篇文章，帮你了解交互设计方法论「渐进式披露」大家好，我是 Clippp。阅读文章 > 7. 避免默认选择我们要避免给确认性对话框提供默认的选择，因为本来我们的目的就是通过这种模式让用户仔细检查他们的操作，从而预防用户犯错。8. 撤销破坏性操作理想情况下，我们应该允许用户撤销破坏性操作，很多时候在一瞬间你就意识到自己犯下了一个可怕的错误。许多 APP 允许用户撤销此类操作，或者使用撤销空间，或者让用户在最终完成操作之前编辑这些操作。这与启发式评估可用性的 10 条原则中另一条的核心观点相吻合 ，即用户的控制性和自由度。这可以减少用户的焦虑，并能帮助他们挽回重大错误操作造成的损失。当用户知道他们可以撤销操作并从错误中恢复时，他们会感觉对产品有更多的控制权。Google 的 Gmail 有一个可选的“撤销发送”功能已经有一段时间了，它为用户提供了 20 秒的缓冲时间来撤销他们的操作。9. 通过输入确认操作如果无法实现撤销按钮，我们可以提示用户在文本字段中输入文字确认执行破坏性操作（ 例如需要用户手动键入删除/确认/等 ）。提示他们输入以确认，强迫他们停下来并阅读模态文本，从而做出有意识的决定。虽然有可能意外地按错按钮，但不可能意外地输入动作，因为这需要深思熟虑，下面给出一个例子。提示：在非常关键的删除操作中也应谨慎使用这种方式，因为如果经常使用，可能会惹恼用户。“键入以确认”模式可确保用户做出有意识的决定以上便是针对破坏性操作预防模态对话框设计的 9 点建议，可能不能做到万无一失，但关注每一个细节，一定会让你的设计得到提升，进而提升产品的用户体验，如果你有别的建议和技巧，欢迎在评论区分享~从这3个方面，帮你掌握二次确认的设计思路二次确认的主要作用是防止误操作，以及警示操作带来的后果，避免用户无意之间执行了本不想做的操作。阅读文章 > 欢迎关注作者微信公众号：「TCC翻译情报局」本篇来源：优设网原文地址：https://www.uisdc.com/error-prevention
首页 容器 官网 vivo 官网 APP是什么？vivo 官网 APP（下简称官网）作为 vivo 手机内置的应用，是提供 vivo 产品 / 服务 / 权益 / 资讯 / 社区的线上官方阵地，也是陪伴 vivo 用户「购机」至「换机」周期的重要角色。因此，官网的产品体验和设计品质，很大程度上决定了用户对 vivo 品牌的认知，保证官网设计品质，是保证 vivo 品牌正向认知的关键一环。vivo 官网 APP 首页为什么改版？随着业务的发展迭代，官网开始出现设计不统一、品质下降等问题，在首页表现得尤其明显，因此设计师发起了官网的设计升级，先从首页入手，提升首页界面的统一性和品质。基于用户&业务视角看「品质」优化首页容器是关键官网首页定位「精选」，聚合产品、权益、服务、社区等内容，满足用户需求。从用户视角看，首页存在 2 种场景：1. 头部搜索、金刚区为「明确目的场景」；2. 头部以下内容区为「无目的场景」。前者提供功能入口，满足用户明确的需求；后者展示内容，满足用户闲逛的需求。明确且固定的「功能入口」，经过长期认知培养，转化趋于稳定，优化空间较少；而时常更新的「内容」在呈现上的好坏，影响用户对 vivo 品牌的印象及浏览欲望，决定首页留存和转化。因此优化「容器」，使内容更好地呈现给用户，是本次设计升级的核心。从业务视角看，今年官网首页的内容运营将围绕「人-货-场」概念，通过分析用户（人）特征，将信息（货）推送给相应的用户，「场」是最后呈现信息的地方，即「容器」。业务方希望用更精简的容器规则去满足不同的「人-货」需求，做到「少样式」对「多场景」，构建内容展示标准，用更精简、易理解的样式，让用户聚焦到信息本身。乱，多，不全是首页容器的核心问题走查首页，发现如下 3 个问题：1. 容器样式乱首页容器样式多且乱，无章可循。需结合产品定位及功能诉求，梳理容器设计，定义标准。2. 信息冗余无效信息多，如「独立显示芯片」这种言之无物的信息，又如社区帖子密集的信息，都造成了信息过载。3. 信息展示不全首页经常出现信息不全的状态，对品质影响极大，用户无法获取有效信息。头部品牌的官方商城设计都崇尚「简洁」美学了解自身问题后，我们对各行业头部品牌的官方商城进行分析，以此了解行业设计趋势。1. 简洁的直观印象纵览他们的首页，扑面而来的是「简洁」，这是最直观的印象。2. 简洁从何而来深入分析其设计，可发现简洁背后 3 个核心共性：有限的容器：限制了基础容器样式的数量，最多不超过 3 种。有限的信息：限制内容在首页展示时的信息数量和信息容量。明确的优先级：图片是界面视觉焦点，辅以简洁的标题 / 价格 / 标签等文字信息，多数品牌去掉冗长的卖点。3. 简洁背后的意义「简洁」是美的，但信息精简、色彩素雅等特点也常被定性为「气氛弱」、「吸引力低」，尤其在销售领域。那为何这些品牌会将「简洁」的设计美学引入商城界面设计呢？这背后隐含消费者的认知心理。在追求功能性及性价比的消费领域，商品满足消费者物质层面需求，购买动机是功能、卖点、价格等利益点，因而在传统快消电商界面的设计中，更注重利益点、界面气氛对消费欲望的刺激。而在追求高品牌溢价的消费领域，商品满足精神层面需求，如身份&价值认同，购买动机围绕商品的设计品质、是否符合自己的社会属性等方面，过分强调利益点及界面气氛反而会影响品牌调性，使品牌优势被减弱。这类品牌商品的展示更聚焦在商品本身，「简洁」的设计美学就与品牌目标相得益彰。用「至简」的理念重塑vivo 官网 APP 首页用户认知规律、业务诉求及行业趋势的分析结果，都直指关键词「简洁」，它带来了逻辑严谨、规则明确、标准统一的有序体验，隐于简洁的表象之中，让用户更沉浸地体验内容。这种追求简洁表现、有序体验的理念，我们称之为「至简」，它将指导官网首页改版。1. 容器样式梳理基于「至简」理念，经过梳理和方案尝试，首页的基础容器被优化为 3 类：广告容器即传统意义上的 Banner，本次改版统一了首页所有 Banner 的规格、元素组成、文案排版，包括头部 Banner / 新品 Banner / 穿插 Banner。产品容器即展示产品的容器，新版的产品容器统一了信息架构的逻辑，文案限制在 3 阶之内，提供了「组合型」和「横排型」两种形式，对应不同的场景。组合型容器提供 2 种规格，拥有同样的信息量，根据业务需求自由组合。横排型容器提供 1 种规格，根据业务需求选择「横排」或「横滑」。内容容器即展示品牌、社区内容的容器。该容器统一使用上图下文的信息架构，可随场景进行不同形式的拓展。2. 信息展示优化梳理完容器类型后，对信息展示做进一步优化，解决「信息冗余」和「信息展示不全」的问题。产品信息以热销产品楼层为例：信息布局不合理导致手机型号展示不完整；可配置副标题但文案较多；通过颜色强调价格但价格并无优势。新版的信息做了如下优化：优化信息布局为手机型号腾出更多空间，保证展示完整；精炼副标题的核心卖点，转用限制字数的标签进行强调；不强调价格，引导用户关注产品及卖点。社区、品牌信息以社区楼层为例：首页社区楼层通过精选内容为官网社区引流，其定位是「入口」，旧版首页将社区内容直接平铺，露出了过多的信息，不符合定位的同时，也在首页造成信息冗余的问题。因此新版首页做了大幅度精简，只露出最核心的「标题/来源/互动情况」 信息，在有限的界面里露出更多的社区帖子。3. 视觉规则优化基于容器的优化策略，进一步制定了详细的视觉规则。官网首页由不同大小的容器组成，为了更科学地定义容器规格，引入了栅格。字体上，使用 OriginOS 的定制字体 — 汉仪旗黑，保证可读性及统一性。在设计界面时，在准确体现信息层级的前提下克制使用字号。如容器的文案展示，仅使用了 2 种字号，保持极致的统一和简洁。图形语言同样值得考究。官网的内容信息优先级更高，图形是辅助角色。因此图形设计更关注语义是否明确、元素是否统一、形式是否简洁，而不过分追求差异化。基于 vivo 品牌及产品体现出来的圆润亲近属性，对官网的卡片圆角、图标、标签、按钮等元素做了统一的设定，保证整体的协调一致。色彩体系也从 0 到 1 构建起来。过往迭代中，颜色使用仅凭执行设计师的个人感受，没有标准化。对此，基于 vivo 品牌蓝为官网重新定义标准色卡，包括常规色阶、材质色阶及灰色阶，系统指导颜色使用。基于新的容器规则及整体视觉规则，首页刷新后效果如下图。是结语，但不是结束本次 vivo 官网 APP 的首页改版，从预研、推动、落地到验证花费近半年时间，付出了相当「复杂」的努力。而我们的「复杂」，是为了给用户提供「至简」的设计品质和产品体验。但这并不是结束，首页改版后，将基于全新的设计语言，对全局界面进行翻新，全面提升官网设计品质。赋能 vivo 品牌，我们在路上。用3个国民级应用优化案例，分享我的改版思路以大厂的主流产品为优化实操对象，其实是一个很大的挑战，发现并优化其中存在的问题，对于理解用户体验设计有着巨大的帮助。阅读文章 > 欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/vivo-app-redesign
工具 习惯 设计师 上周末一则消息在设计圈子里面引起了震惊，关于一个设计软件封停了一些企业账户，原因是受到制裁因素的影响。这个事件也是众说纷纭，引起了大家的无限遐想。Figma封禁大疆账户！国产软件的春天来了？就在上周六，刷微博时一条微博引起了我的关注：这则消息很快引起了轩然大波，有网友在评论质疑消息可靠性后，很快博主贴出了Figma 官方发给大疆的通稿，并表示向大疆朋友确认了消息属实。阅读文章 > 深扒！连拜登团队都在用的Figma是如何成长起来的？相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿，经过多轮文章和视频的洗礼，这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。阅读文章 > 关于事件本身和相关的讨论这里就不展开了，相信大家已经看了很多了，今天主要还是想和大家聊一下这个事件引发的启示。设计师不能过度依赖于工具，养成良好的职业习惯至关重要。目录设计能力不等于掌握工具不要过度依赖于单一工具养成定期备份的习惯长期存储需要本地化养成阶段性作品总结的习惯探索特殊功能的技法差异利用工具而不受制于工具小结设计能力不等于掌握工具设计软件是我们完成需求的工具，也是最为底层的能力保障，但是会使用工具不代表就掌握了设计能力。我们需要不断磨练提高软件的操作熟练度，但是我们更需要提高设计思维和技巧的方法论。一些设计师在写简历的时候都会将掌握的技能局限于软件，写自己掌握了 Photoshop、Sketch、Figma、Adobe XD、After Effects、Cinema 4D 等等设计软件。作为应届生来说这样写情有可原，作为多年经验的设计师来说，你擅长的技能不是掌握一堆工具，这只是最基本的技能要求。要写自己掌握的设计技能：品牌设计、手绘插画、交互设计、UI 设计、动效制作、三维建模设计、运营设计等等，这样才能明确完成项目的类型。至于什么软件好，我们应该学哪个软件，都是需要结合团队要求而定。我们需要培养的就是自己的学习能力，无论遇到团队要求掌握哪些软件工具，我们都可以快速学习并掌握。而设计感知能力、审美能力、设计技巧和思维等都不是短期内可以解决的，这是一个长期熏陶的过程。不要过度依赖于单一工具掌握设计工具是实现我们设计想法的必备条件，但是不要局限于单一的工具，不能让单一工具变成实现设计想法的唯一条件。过度依赖单一工具容易埋下隐患，换一个工具就使得效率大大降低，而且还容易出现实现不了的效果，进而影响设计想法的完美输出。我们需要研究更多同类型的设计工具，掌握这些工具相互之间的差异，熟悉它们之间的优势和短板。在项目设计过程中，善于借助不同设计工具的优势，相互协作完成设计需求。养成定期备份的习惯此次事件敲响的警钟让我们明白了文件备份的重要性，虽然官方会预留时间给设计师迁移设计资源，但是在急促的时间下容易手忙脚乱，定期备份的习惯将会使得迁移效率提高。养成定期备份的习惯不仅可以在遇到问题时不慌张，而且备份之后的文件整理和项目管理也能使得我们的团队流程更加规范。现在很多同类型的软件都支持文件导入，就算真的遇到个别软件无法使用的问题，也能让往期项目设计资源可以得到还原。文件备份也能有效的预防数据丢失或者损坏，这也是我们设计时遇到多版本调整不要替换原版本的原因，多版本的存储让我们随时可以切换到过程中的任意步骤。养成良好的职业习惯至关重要，定期备份设计资源就是一个非常好的职业习惯。长期存储需要本地化线上设计工具开启了一个不一样的协作模式，也让我们的设计办公变得移动化，不受制于固定电脑或者场所的限制。而本地软件不受制于网络因素的影响，而且不会因为其他外部因素受到访问限制，可以长期存储和使用。线上工具具有便利性，本地软件具有长期的稳定性，各有优势和短板。不过我个人在设计输出的时候习惯选择本地软件，更有利于设计资源的长期存储，不会受到一些不可抗拒因素的影响。如果我们需要长期存储的设计资源最好可以备份之后实现本地化，双重保险更安心。就像一些灵感资源存储一样，我们也要定期进行分析和总结，一些优质的资源可以实行本地化。线上可以随时查看提炼灵感，本地化是为了预防突发情况的发生。养成阶段性作品总结的习惯设计资源的定期备份是一个良好的职业习惯，可以有效预防突发情况造成的影响。养成阶段性作品总结的习惯也是至关重要，参与的项目虽多，但是经验是需要总结才能形成沉淀。一个完整项目结束之后，不要只是变成“存储垃圾”，我们需要及时进行总结。从项目背景到设计思路，设计输出呈现到数据跟踪反馈，我们都需要进行系统性的整理，形成一份完整的项目总结。很多设计师工作多年总是拿不出像样的作品集，零散的项目进行急促的整理，呈现出来的质量肯定是不如意的。而且项目总结的能力也是需要磨练的，不是第一次做就能做到位的，多个项目总结沉淀下来的不仅仅是作品集，也能沉淀出总结的经验。阶段性作品总结是一个非常好的职业习惯，也是提升我们专业能力的关键，只有总结才能不断找出问题，进而制定解决问题的计划。如果方便对外的作品，我们也可以总结之后发布到一些设计平台，让更多设计师参与评价也能促使自己获取更多建议。有时候当局者迷，需要旁观者的建议才能让我们发现更多问题。探索特殊功能的技法差异如果一个设计趋势的呈现需要个别软件的特殊功能才能实现，虽然可以体现出这个软件的差异化，但是对于设计师来说还是比较局限的，受到的限制因素较大。比如之前 Sketch 软件的背景模糊功能，在很多其他软件中就没有，这样局限了一些设计的发挥。后来很多设计软件和线上工具也能实现了，如果遇到实现不了的我们需要养成专研技法的习惯，研究其他软件如何设计出来，不能只是满足于一个方法的实现技巧。就像很多立体的图标大家觉得平面类软件绘制起来比较麻烦，费时费力且效果还不一定到位，要是三维软件渲染出来就会省时省力。知道便捷途径固然是好事，不过我们也是需要研究平面类软件绘制的技巧、光影的把控、质感的深入等，技法层面的差异化探索可以使得我们的专业基础更加稳固。最近比较流行的玻璃质感设计趋势，很多设计师都会选择 C4D 等三维工具来实现，能够熟练掌握这个工具也是需要时间和精力的。平面类的设计工具是否可以实现，实现的方法技巧也是我们可以探索的，虽然实现起来比较繁琐一些，不过对于这种技法的研究是我们需要保持的学习态度。不局限于工具的使用，不断探索特殊功能的技法差异，把工具层面的运用转变到对于设计层面的探索。利用工具而不受制于工具作为设计师是利用工具实现创意想法，而不是受制于工具满足需求。无论运用哪个设计工具，只要这个工具具备图形绘制的能力，我们就要能够具备驾驭的能力。设计师只有在零基础的时候才会把设计工具看得很重要，因为这是入行的必备条件。越往后越要淡化工具，注重设计思维和项目经验的提升，只要掌握实现的技巧和原理，选择一个工具来实现就会轻而易举。比如作为 UI 设计师，无论是利用 Sketch 还是 Figma，或者是 XD 等完成设计，我们都需要可以轻松搞定。而日常的强化中要多去体验产品，分析和总结设计细节和交互思维；养成采集优秀作品的习惯，积累属于自己的灵感资源库；也要加强日常输出，提高自驱力才能沉淀更多作品。小结借此事件和各位设计师一起聊了这个话题，设计师的重心是在于设计思维和项目经验的提升，不能过度依赖于单一的工具。工具只是辅助实现我们的设计想法，同类型的工具都要具备驾驭的能力。也要养成一个好的职业习惯，定期备份和进行项目总结，经验的沉淀离不开阶段性的复盘。本文观点仅为个人反思，不足之处互相弥补。简单实用！适合新手学习的4个设计习惯虽然可能我们整天都耗在了设计上，吃饭在看图，吃完就撸图，但是设计能力提升依旧看不见，摸不着。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/rely-on-tools
网格 海报 海报设计 大家好我是花生~前几天有小伙伴在社群中讨论海报设计，提到了一个问题：虽然自己知道做海报的时候需要用网格，但是不知道网格的行列数量设置成多少比较好；也有小伙伴说自己用了网格，但是海报做出来还是不好看，不知道是哪里出了问题。网格系统是现在排版时常用到的一种设计工具，特别在画册、书籍领域，网格系统是不可或缺的。在海报设计中使用网格，能使版面看起来更加清晰有条理，易于阅读；并且横平竖直的参考线让排版有规律可循的，让我们可以避免无用的排版试错，提升设计效率。针对网格设置的这些问题，我特意请教了优设设计总监兼金牌讲师@全蛋老师，将全蛋老师的回答总结成2个疑问解答和1个解决方法，帮助大家更好地理解网格对海报设计的意义，一起来看看吧~对网格系统还没有概念的朋友可以看这里提炼14本书的精华，写下这份超全面的网格基础手册网格系统是针对于平面的，而不是网页设计和移动端的设计。阅读文章 > 网格系统只是一个有效的辅助工具首先我们需要明白网格系统只是众多辅助海报设计的工具之一，而非必不可缺的部分，毕竟海报不是有网格系统之后才有的。以往的设计师在实践中发现使用网格能更好更快地进行排版，所以提倡使用，但没有网格我们也有其他办法设计出好看的海报，完全不使用网格进行排版的优秀海报也是非常多的。没有遵循网格的海报设计海报设计中最重要的是正确清晰的信息层级海报设计最终为了清晰准确地传达信息，对海报的信息层级进行正确排序是第一位的。做好这一步，我们才能确定每个层级在海报中的版面占比大小，再结合网格系统进行的排版，自然事半功倍。如果你连海报中信息的重要程度都没有分清就到网格中进行排版，最终效果是不会理想的。版式设计中的文字层级怎么学？来看高手的实例演练！编者按：看似简单的版式设计，细节其实非常多。阅读文章 > 如下图，两版海报虽然都是用了网格，但是由于左边的海报信息层级排序错误且区分不明显，导致最终的排版效果并不好。还需要注意的是，海报设计中的网格系统没有书籍排版中要求那么严格，不用苛求排版要完全按照网格来。在利用网格进行海报排版时，如果感觉元素大小调整到了视觉合适，但是没有契合网格，那也没有关系，只要保证信息层级是对的就可以了。如果你不确定一个元素的位置和具体尺寸，那就按照网格来，整体完成后再进行微调。这就是网格辅助设计的意义。使用斐波那契数列设置网格了解以上两点之后再来看网格的设置，你是不是觉得这个问题也没有那么复杂了？页边距留多宽、网格设置成多少行多少列、间距设置多宽并不是定死的，而是以你的海报内容或者你自己的习惯为主。如果你用心分析过一些优秀的海报，就会发现它们的网格设置非常灵活多样。关于网格具体设置成多少才合适这个问题，全蛋老师表示并没有标准答案，而是要以自己的需求为准。如果刚刚接触海报设计没有把握的话，可以使用斐波那契数列作为参考。斐波那契数列又称黄金分割数列，数字排序为 0、1、1、2、3、5、8、13、21、34……由之前的两个数相加得出第三个数，以此类推。我们在设置网格的时候，行数和列数就可以用其中相邻的2个数字为准。如3行5列、5行8列，或者5行3列、8行5列等。但这也只是仅供参考的网格设置方法，在设计中还是要以你自己的实际需要为准。所以海报设计中的网格并不复杂高深，它是一个有效的辅助工具，需要我们在理清正确的海报信息层级后再使用，网格的行列数及间距宽度设置都以海报内容和个人习惯为主，可以灵活调整。弄清楚了这些，网格系统不仅可以帮你提升海报设计的效率，还是成为你分析学习优秀海报的设计原理的利器。如何在PS/AI中快速设置网格思路和方法都讲完了，再顺带提一下如何在设计软件中快速设置网格，帮助还没有接触过网格系统的朋友更好地学习。【PS】按需求新建一个文档，点击【视图-新建参考线版面】，然后设置行、列、页边距，间距。快捷键Ctrl+; 可以显示或关闭参考线。【AI】先用矩形确定好版心，然后点击【对象-路径-分割为网格】，勾选【预览】按需求设置自己的行列数和间距。Ctrl+5将网格转为参考线，快捷键Ctrl+;可以显示或关闭参考线。总结海报设计中的网格并不复杂高深，它是一个有效的辅助工具，需要我们在理清正确的海报信息层级后再使用，网格的行列数及间距宽度设置都以海报内容和个人习惯为主，可以灵活调整。弄清楚了这些，再用网格就会觉得轻松顺手很多。以上就是今天的内容分享，希望对喜欢海报设计的你有所帮助。如果你还有关于网格和海报设计的问题，欢迎加入优设官方设计交流群，我们一起探讨，入群二维码见下图；当然也可以直接在评论里说出你的看法，还有机会收到优设送出的精品设计书籍哦~更多海报设计知识新手如何做好海报配色？我总结了这5个即学即会的方法！配色是海报设计的重点之一。阅读文章 > 如何让画面更精致？注意这6个版式细节这篇文章我们来讲讲在设计手机详情页时，会经常用到的一些排版小细节。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/grid-settings
用户 场景 方案 背景VR 全景为家具行业零售场景带来革命性的变化，在交互式展示和营销体验这两个方面带来了突出的市场机会。相比传统的静态效果图，在谈单阶段有全景图工具的介入，带来了明显的客户留店时长增加、线上传播获客提升以及所见即所得签单率提高等商家营销价值。对设计师来说，借助全景图能够更好地为自己的客户展现设计方案，衬托方案的品质，注解方案的细节，让整个浏览过程的体验感受更加舒适沉浸。业务变化我们在跟更多商家的密切合作过程中，也承接了越来越多的全景图工具需求。而在之前的界面框架基础上进行堆积，整个界面变得臃肿不堪；商家们希望借助全景图工具能够打造更好的营销体验，增加获客率和成交率，方案设计师们对于如何利用交互式展示的形式，更好地展现方案效果提出了挑战。借此契机，由设计侧发起了此次体验改版项目。设计目标具体分析问题之后发现，①商家的诉求是能够通过全景图充分传递设计意图，提高营销谈单的效率；②用户也就是全景图的浏览者的诉求是能够快速获取方案信息，便于决策；③业务的诉求是能够有拓展性更高的框架来承载后续的新增功能，同时提高产品的访问深度。从而推导出了三个设计目标:用户侧：提升用户浏览效率商家侧：提升营销互动体验产品侧：提升产品框架可拓展性和品质感提升用户浏览效率设计策略：拆分全景图信息类型，在导览内和场景内分别进行优化用户在浏览方案时，主要有两类信息需要用户关注：空间物理信息：整屋信息，视角所在房间信息设计辅助信息：商品信息，家具信息，材料信息，品牌、联系方式等。将浏览效率的提升拆分到空间信息和设计信息的传递效率的提升，即在辅助浏览者能够快速理解整个空间的信息的同时，让方案设计者的设计意图可以充分传递给浏览者。1. 导览内空间信息传递单张全景图的技术本身即可以满足用户环视单空间的需求，但是在多空间的场景，需要全局视角将不同空间的全景联系在一起，此时导览的全局概览就变的意义重大。用户理解空间之间的关系，需要知道自己所在房间位置、所在位置和全局的关系。2D 的平面图导览和 3D 场景中的位置标识应有明确清晰的映射关系，并且突出用户重点关注项。此时经常出现的场景是在一个房间内渲染了多张全景图的情况，即一个空间内有多个渲染锚点。移动端和 PC 端的交互处理需要做区分。PC 端可以用鼠标精确操作，所以锚点直接平铺在户型图上方便用户切换，若是重叠严重，支持用户拖拽展开，方便用户点选切换。移动端精确操作困难，在有限区域内显示锚点只会干扰用户视线，故可跳转到三维户型，用滑动模型，点击选择切换对象。2. 场景内空间信息传递在方案场景内，用户是以第一人称的漫游视角环视单个空间信息的，此时，场景热点就是为用户跳转不同空间全景图而存在的引导媒介，也是在全景图中点击量最高的热点，如何让他们能够不突兀地显示在三维场景中，自然地引导用户进行点击是优化的方向。选用立体的形态更能让场景热点的存在贴合三维的场景。拉近空间名称与标志的距离，在多个带房间名称的场景热点距离较近重叠时，更好地识别定位关系。3. 场景内设计辅助信息传递设计师通常会对方案做出额外的补充说明，而这些说明需要满足几个前提：关注度区分，可识别性和有序性关注度区分：希望用户在浏览方案时对不同类型的信息的关注度是不同的，比如商品是需要用户重点关注的对象， 文字多会用于补充说明, 不需要用户重点关注。设计侧通过动效、颜色、细节丰富度等不同维度综合考虑，区分热点的重要程度，从而引导用户的视线。可识别性：不同于普通界面元素，全景图在底图非固定的前提下，要保证在亮暗两色上的可识别性，所以在样式上有一定的限制和原则需要遵守。信息有序一致：作为辅助标注不能喧宾夺主，打破用户浏览的沉浸感。所以标注虽然种类繁多，但需要按照体量，在有限样式中增加，保证信息的有序性和一致性提升设计师营销谈单效率设计策略：分层增加场景互动性，增加访问深度谈单成功的前提是用户充分了解方案，全景图工具提供在单间商品内，多件商品之间，多个风格间和多个方案间等多个维度提供互动形式, 提高用户跟场景方案的互动，增加了对方案的整体访问深度。用户可以更了解商品细节，同时有更多对比选择余地，方便快速决策；设计师可以纵向增加方案丰富程度，提高谈单成交可能性。提升产品框架可拓展性和品质感设计思路：细分用户行为场景，整合场景诉求点随着功能的不断增加，现有高权益版本含功能 30+个，如何提高框架的可拓展性，在界面上合理地布局，需要分场景来分析前置条件。定位场景跟浏览场景互斥，当用户将注意力放在查看方案的时候，是顾不上看功能列表的。因此将“看方案”和“找功能”的场景区分开，共用同一块区域，从而优化信息排布。但同时“用功能”的场景要求所见即所得，需要在操作功能开关的时候，及时浏览到是否在界面上生效，要求场景和功能能同时被用户关注到。以上条件决定了界面特征：在主界面「看方案」，尽量减少操作按钮占用界面的空间，让用户有足够的空间沉浸浏览方案内容，所以需要制定一定规则对现有功能进行整合收纳，同时为后续可能增加功能留出拓展空间。功能列表可以遮盖界面，因为不会同时看方案，但是因为部分功能需要及时预览生效结果，所以遮盖区域需要限制，不能是全屏。1. 框架拓展性提升-功能分类整合收纳同类功能，如热点开关，放在下级菜单中进行统一管理根据频率决定分区，将高频按钮外露，低频使用的功能在「工具箱」中收起；工具箱在有限区域内可滑屏查看。保证商家信息展示优先级2. 风格品质提升-风格探索关键词：未来、空间、延展，借鉴 HMI 设计风格 —— 微型仪表盘、斜切角动态效果 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。结语全景图去年也在展厅等细分领域得到了商业化的落地。我们在设计的时候也会结合更多的因素进行考量，比如不同于家居空间的小巧，展厅等商业空间商品的展示需求会更加密集，在这种情况下，如何结合空间特性，借助前端技术进行巧妙的呈现等，也非常值得思考发散。新领域引入了更多不确定因素，在其间探索更需要设计师把握商业和体验的平衡，我们也会针对特定的课题进行更深入的探讨。文中的数据均已做模糊处理, 非真实数据，仅作为演示用途, 对数据呈现不负相应责任。想着手设计 VR 应用？给你这份实操性极强设计指南！编者按：虚拟现实类的APP 要怎么设计？阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源：优设网原文地址：https://www.uisdc.com/vr-tool-design
价值 领导者 公司 Alan Cooper 曾经写道，设计的价值对组织中的每个人来说都应该是显而易见的。如果有人要求你解释一个设计的价值，那是因为他们看不到它。Alan Cooper 说：“如果你的老板要求你量化工作的价值，你需要明白，你的工作确实没有价值。起码不是在那家公司。那个老板可不行。”Alan 接着指出，对于这种情况，只有两种选择：所以当你的老板问你“你的工作有什么价值?”你只有两条有效的行动路线: 1）接受你和你的处境是一个毫无价值的组合; 2）去一些重视你工作价值的地方，而不是问你工作价值的地方！对我来说，这一针见血。早在 2011 年，我也说过类似的话。在解释了几种让利益相关者开始投资用户体验的方法之后，我建议：“… 也许是时候换个地方工作了。在某些地方，高管们已经被说服，并希望进行投资。”“去别的地方”是优越感的说法我已经很多年没有写过这个了。我现在意识到这是一个非常秀优越感的观点。不是每个人都有能力换工作，找到一个管理层更欣赏设计的新岗位上去。虽然目前对设计师的需求是有史以来最高的（或者在新型冠状病毒肺炎爆发之前是最高的），但它并不是平均分布的。有些地方的设计师很难找到机会。离开他们目前的工作，无论多么不被赏识，可能都不是一种选择。Alan 的文章提醒我，我们需要为那些只能留在原地的人讨论可行的替代方案。Alan 和我这两个中年白人帅哥告诉别人找新工作是他们唯一的选择，这是不公平的。并非所有的设计作品都有价值我认为 Alan 说的有些设计工作没有价值是对的。设计师可以通过调整颜色，清理字体排版，或者让一组界面看起来一致，这样就能让设计变得更好。但是仅仅让一个设计感觉更好并不意味着它对客户或用户更有价值。它可能是为了设计而设计。也就是说，当 Alan 认为当有人质疑设计的价值时，总是因为设计工作没有价值，我不认为他是正确的。这可能是因为价值还没有被发现。并非所有的价值都是显而易见的。并非所有有价值的设计工作都具有同等价值好的设计所带来的价值是递增的。成千上万个经过深思熟虑的小决定，以及对用户体验的关注是设计的价值所在。并不是所有的设计决策都具有相同的价值。例如，在最近发布的一个新设计工具的最初版本中，设计团队没办法在文件夹中存储工作文件。每个设计师的文件都需要和其他人的文件放在一起，不能按照项目或设计部分来分配。这对于小项目来说不是问题，但是对于大项目来说，使用这个工具的设计师发现缺少文件夹功能令人沮丧。在用户访谈中，没有设计师会告诉你文件夹是他们愿意额外付费的功能。然而，当它被忽略的时候，它贬低了设计工具的价值。他们的一些早期采用者放弃了使用这个工具，因为工具不能在项目中很好地起作用。产品团队中的一些人决定将文件夹功能排除在外。可能发生这种情况的原因有很多。他们可能已经没有时间了，或者觉得没有必要。关注与设计相关的功能，而不是文件存储能力，这可能是一个更大决定的一部分。也许他们根本没有想到这一点。由于忽略了文件夹功能，他们错过了许多用户的基本期望。把它加回去是很有价值的。但它的价值是否比得上，比如说，一个可以减少构建动画的时间的功能？并非所有有价值的设计工作都有同等价值。在用户体验设计中，投资回报率通常是关于消除糟糕的设计投资回报率并不像大家说的那么复杂。它可能感觉很难计算，但那是因为我们经常看错地方。而不是因为它需要一些花哨的金融技巧。对于用户体验设计，ROI（投资回报率）是关于寻找公司 Bottom line 的改进。(“ Bottom line”指的是损益表的设计，这是一个标准的财务工具，在这个工具中，公司列出一段时间内所有进入和流出的资金。Bottom line 是报告的最后一行，我们从总收入中减去总支出。当我们提高了 Bottom line，我们就使公司更有利可图。)当设计师试图计算 Bottom line 时，最明显的地方就是问这样一个问题: 如果我改变设计，我们能创造多少收入？但是还有另外一种设计可以帮助的方式：降低成本。设计价值中一个常被忽视的部分是，差的设计对于公司来说是非常昂贵的。糟糕的设计会产生昂贵的客服电话。它会导致销售额下降或订阅数量减少。糟糕的设计会通过返工和浪费增加开发成本。当我们开始寻找糟糕的设计损害公司的地方时，我们可以谈论节省了多少钱。我们让计算投资回报变得更容易，从而做出更好的设计决策。设计领导者知道糟糕的设计给他们的公司带来的成本这就是为什么当 Alan 说如果你的老板问起你的设计就没有价值时，我不同意的原因。我相信你的老板可能会问你设计的价值，因为他们认为你是一个潜在的设计领导者。如果你正在阅读这篇文章，很可能你要么是一个设计领导者，要么很快就会成为一个设计领导者。设计领导者的职责之一是向公司展示设计的价值。很可能你的老板想帮助你使产品或服务更好，但是还没有学会如何描述它的价值。他们希望你能帮助他们，希望你成为公司需要的领导者。当他们的公司开始询问价值时，设计领导者已经准备好了。这意味着要研究低劣的设计在哪些方面会让你的公司付出代价。如果这笔钱足够多，你甚至不需要精确的数字。有时候，仅仅指出公司感受到的巨大痛苦就足够了。例如，假设你接到很多客服电话，因为设计没有做用户期望的事情。这是由于一个糟糕的设计决定而导致的高成本。如果这很容易，你可以估算出一个数字。(呼叫数量 x 平均支持呼叫成本。)如果大家都同意这很可能是昂贵的，你可能就不需要计算了。高价值并不总是需要被量化，它只是需要被看到。设计领导者提升优秀设计的价值一个设计领导者发现哪些地方的设计不好，会让公司付出金钱和痛苦。他们开始编写文档，并将设计团队可以采取哪些不同的方式来减少这些成本的想法整合在一起。当老板来问的时候，设计负责人会准备好给他们答案。他们可以告诉老板哪些糟糕的设计让他们的公司付出了代价，以及如何相信他们可以修复它。当修复一个问题的成本低于让问题继续存在的持续成本时，就会出现良好的投资回报率。有了一个现成的计划，他们就会有一个完美的起点来讨论设计的投资回报率。然而，这里有一个诀窍：聪明的设计领导者不会等到老板问他们。聪明的设计领导者在老板还没有想到要问的时候，就已经指出了成本，以及好的设计会如何减少它们。当他们能够做到的时候，聪明的设计领导者就会在根本没有人问的情况下开始减少成本。聪明的设计领导者在被问到之前就已经证明了好设计的价值。他们的老板不会问设计的价值是什么，因为他们已经看到为什么公司应该为设计投资，会知道为什么他们要投资设计领导者。聪明的设计领导者并不像 Alan 所描述的那样，他们唯一的选择是呆在一个不了解设计价值的地方，或者离开这里去另一个了解价值的地方。他们就在他们应该在的地方，通过做正确的事情为他们的公司提供价值。网易出品！一份“高投资回报率”的用户体验度量方法指南网易UEDC – 陈韵 ：本文核心就是介绍体验度量方法，以及在商业项目中如何发起一个具有高ROI（投资回报率）的用户体验量化流程。阅读文章 > 欢迎关注作者的微信公众号：「龙爪槐守望者」本篇来源：优设网原文地址：https://www.uisdc.com/roi-for-ux-design
角色 效果 赛马 对绝大多数玩家而言，这款游戏最让人眼前一亮的，莫过于角色散发出来的魅力。而市面上，角色 3D 建模水平越攀越高，光是达到技术水准，很难直接给人以如此强烈的印象。《赛马娘》角色 3D 建模要达成的核心目的是什么，具体又用到什么样的手法？这次 Cygames 3DCG 部门角色美术组，以《赛马娘 3DCG 角色制作案例~从基本设计到赛马娘特色表现~》为题，分享了他们的团队架构、制作规格、技巧思路和实际案例。以下为角色 3D 建模篇的分享内容：众所周知，《赛马娘》是一款「继承了有名赛马的名字和灵魂的」赛马娘，所演绎的跨媒体内容。游戏中，包含了「让玩家扮演训练师、亲自安排训练项目」的硬核养成要素，以及「从比赛中胜出以后，赛马娘与粉丝分享喜悦的胜利演出」这样的偶像系要素。通过糅合实际赛马的经历与围绕游戏角色的故事内容，《赛马娘》实现了不仅限于游戏，还延伸至 TV 动画、漫画作品，乃至现实 Live 演出的多种活动，不断扩展其世界观和影响力。那么《赛马娘》根基之一的角色是如何塑造的？今天就从 3D 建模方面分享下我们的经验。主要涉及几块内容：1. 赛马娘角色建模组的介绍；2.建模规格的说明；赛马娘独特表现的制作；以及最后的总结。角色建模组《赛马娘》的 3DCG 部门下设角色建模、背景、动作、特效、剧情画面多个小组，角色建模组主要负责的工作，分为角色模型制作、贴图制作、蒙皮、服装（摇动物件）制作、迷你角色制作、演出道具（小道具）制作。由于要制作多种物件，所以我们首先需要确定「赛马娘角色最核心的要素」是什么。其一，角色本身的可爱。其二，互相认可又互相竞争的「体育精神」。其三，足以在赛场和舞台上活跃的「临场感」。为了表现这些要素，我们重点打磨了四个关键点。即能承载情感表现的表情、能表现跃动感的头发与服装的动作、更加真实有质感的造型、呈现临场感的润湿和污渍效果。概括来说，角色建模组的任务，就是制作又帅又可爱的高质量角色建模。可爱自不必说，呈现在赛场和舞台上的帅气身姿，以及制作最前沿的高质量 3D 角色模型，都是我们的使命。接下来我们具体聊一聊，《赛马娘》的建模规格。建模规格首先说一下建模的基本规格。虽说基本规格听起来很简单，但由于《赛马娘》是一款在智能机和 PC 端不断更新运营的产品，所以必须考虑到能跟上项目更新节奏的效率问题。所以结合建模组的使命来看，我们必须设定一个「终点」。即在「利用有限资源高效制作」和「用丰富的表现呈现模型魅力」两者之间找到平衡点：如何找到一个能对高质量兜底的基本规格。接下来，我们将会介绍实际为了让角色能统一实装，以及在取舍之后，我们认为必要的部分基本规格。确定基本规格并不是一件简单的事。开发周期拉长以后，按照早期规划制作的角色模型，看起来就显得过时。比如下图里的角色，就是我们开发早期的样品，跟现在游戏里的角色相比，很多部分的表现力都差了一截。当时的服装摇动特效，也显得特别自然，之后我们虽然进行了一次优化，但这个水平仍然说不上自然。研发过程中，技术也在进步，为了追上业界的水准，在上架的时候充分满足玩家的期待，我们不得不边开发，边频繁更新基本规格。追寻理想的结果是，我们确实实现了在外表层面达到下面这种效果的能力，下图可以对比开发早期和现在的效果，相信能看到类似眼角附近的，各种细节表现的差异。当然不光是正脸有了变化，3D 模型的打磨，最重要的是从各个角度看起来，都不会给人不自然的感受。此外，服装摇摆效果、服装形状、存在感等等，我们认为都比当初的效果好了两倍以上。有了这些经过，才有了现在的基本规格，具体从模型和贴图构成、着色、描边三个方面来介绍。1. 模型和贴图的构成模型构成上，基本情况是材质用到 6 种、三角面数不到 2 万、基本骨架约 160 个接点（不同角色有浮动）、贴图总计约 20 张、权重的影响数值（每个顶点分配的骨骼数量）调为 2。此外，贴图决定了模型的颜色和质感，大致分为颜色图和控制图两类。先介绍颜色图（Color Map）。为了表现出动画式的光影质感，《赛马娘》采用了两张颜色图，用漫反射贴图（Diffuse Texture）来指定基本颜色，又用阴影色贴图（Shadow Color Texture）来指定阴影的颜色。对比下图，阴影色贴图整体采用偏暗的颜色，这个基础上，还呈现了反射、二次阴影的效果。要注意的是，这里并非单纯让颜色变暗，而是根据模型部位不同，呈现了饱和度、色相的效果。再来看控制用图。为了确保实现光照、阴影和光泽、形状和反射等效果，我们采用两张 Map 共计 5 个通道来控制贴图效果。如下图，左侧从上到下分别为阴影遮罩（ShadowMask）、高光遮罩（SpecularMask）、截断遮罩（Cutoff Mask）；右侧下两张分别为环境遮罩和逆光遮罩（Limlight Mask）。模型头部和身体在细节上稍有不同，身体如上用到的是两张贴图的 5 个通道。具体来看每个通道的作用。阴影遮罩如字面意思可以控制阴影效果。与模型形状相符的阴影很难表现出动画里张力十足的视觉效果，此外，受骨骼数兼容度的问题，导致细节阴影的表现力也有上限，所以会用这个遮罩进行辅助表现。在这 5 个控制用 Map 里，最影响质量的一大半的调整操作都在阴影遮罩里实现。下图是调整前后的效果，右边给人的层次感、阴影表现、临场感都高出许多，动画质感也更强了。高光遮罩主要用来表现高光效果，比如头发的光泽、金属的光泽等。对于动画风格来说，基于物理的高光表现并不一定能实现最想要的效果，所以直接用高光遮罩，来绘制高光的形状。下图中，主要用在金属物件的高光上。截断遮罩主要用来表现细节处的形状。可以在一定区间内区分颜色绘制与否的范围，能用在比如蕾丝的镂空效果等，需要细节表现的地方。如下图，在金属装饰上，原先版块状的边缘被镂空，装饰的形状和立体感一下就呈现了出来。这也是在有限的骨骼数里，要追求效率的一大宝贵手段。环境图是用来呈现能反射光的素材对环境的作用效果，由于和高光遮罩的效果存在类似的地方，这两个功能常常结合起来一起调整建模的观感。下图中，金属材质的反射效果就用了环境图来追加高光效果，进一步体现出了金属的质感。最后是逆光遮罩，它用来控制逆光的适用范围。逆光可以突出呈现立体感，在《赛马娘》游戏中，基本上一直会加入逆光效果来强调角色的立体感，但如果在所有地方都用上这个效果，就会造成信息量过大，看起来让人不适，所以在效果较差、结构复杂的地方，会进行调整。下图角色脖子附近、腋下附近就属于需要调整的地方。调整前角色整体观感偏繁琐，通过限定作用整体协调感好了很多。这样一来，通过上述几类贴图调整手法，每一位赛马娘在舞台光照变化时、在赛场环境变化时，都会呈现出更自然的效果。以上就是贴图规格的概述。2. 着色处理接下来是着色。我们以控制起来最为复杂的角色头部为例说明。基本的调控如前文所说，是用阴影遮罩来实现的，但是为了提高着色效果，我们也下了很多功夫。这里先来说明一下细节控制图。为了实现角色头部的动画式着色效果，我们采用了细节遮罩（Detail Mask），主要用来控制脸颊、鼻子的着色效果。如下图，这种方式可以独立于常规着色处理来进行控制，与光照效果相结合，并辅助生成多种表现效果。此外，脸颊和鼻子的阴影还可以单独控制。我们可以看一下光源运动下的面部阴影表现。采用这个方法调整之前，阴影会显得歪曲和不自然，但调整后，阴影更干净，也更有动画的风味。诸如此类，在调整阴影呈现动画风格表现的时候，主要都是用上述方式来实现的。3. 描边处理最后是描边的介绍。描边在动画风格的美术表现上，有着十分重要的作用，相当于绘画里的白描。具体上，我们依次说明，与阴影的共存关系、描边的调整、颜色变化三个部分。基本来说，描边是将平面顺着法线的方向隆起，从而生成对应的模型。下图可以看到更清晰的效果。用实际的角色模型来看。让头发的模型隆起，改变描边的粗细，描边越粗，角色给人的感觉越粗犷，试试这类效果或许也会很有趣。要让描边呈现得干净利落，就需要调整法线，而法线会影响到各种各样的地方，所以如果为了描边效果而调整法线，可能会造成着色结果与预期不符。下图是分别调整了描边法线和着色法线时的情况。能看到调整着色法线后，描边会出现断断续续的现象，而调整描边法线后，描边是很清晰了，但逆光、阴影变得混乱了起来。所以光使用一种法线，很难同时完美呈现描边和着色的高品质效果。因此，为了解决这个问题，我们在着色信息的基础上，又将另一份描边法线信息添加到了角色模型当中。具体来说，是在初始模型上搭载着色用的法线信息，然后将用来描边的角色模型里的描边法线信息，转换到初始模型的 UVset 里，从而实现两种法线信息同时成立的效果。明白了描边如何与阴影共存的原理以后，我们来说明一下具体的调整方法。描边的调整可以直接依靠法线角度的变化来实现，虽然公司内有一部分提高效率的工具，但基本上大部分都需要手动调整。尤其是在发束和平面急剧变化的地方，更需要细致的调整。比如下图里刘海的部分，调整前描边断断续续，调整后刘海的描边清晰地呈现了出来。最后聊一聊描边的颜色变化。为了呈现动画风格的效果，描边的颜色可以根据场景的不同而变换。可以先看看下面这张动图，这是角色小栗帽的技能演出效果，在她周身爆气的瞬间，能看到，描边变成偏白发光的效果。描边颜色是通过 Diffuse Color 和指定的颜色互相混合，从而控制颜色变化的效果，在技能 Cut in 等演出部分，可以控制合成的颜色、烘焙的程度、合成的方式等细节。如下图，描边颜色可以自由调控。在呈现动画风格的时候，描边颜色的调控也发挥了非常重要的作用。总体来看，建模的基本规格里，通过构建「能够平衡执着追求和实用效率」的制作体制，我们才得以实现高品质的 3D 建模。其中，建模和贴图上，制定「制作赛马娘基本外观」的流程；着色方面，利用细节图来实现高精度的阴影效果；最后在描边环节，摸索与着色共存的手法，寻找能承载「角色更具跃动感、种类更丰富的演出效果」的制作体制。提升品质的策略在分享开篇，我们简单提到了提高品质的缘由，即在定好基本制作规格以后，我们在开发过程当中，经常遇到「看起来不自然」的情况。于是每每针对这些不自然的情形制定对策之后，我们便不断更新基本规格的水准。下面就介绍一些实际上我们遇到的，以及后来成为新规格的案例和对策。具体分为穿模、光照、服装和头发的动作三块。首先看穿模问题。如下图，右侧角色的手与裙子出现了明显穿模，与之类似，即便是相同的动作，根据服装的不同，穿模的情况常有发生。由于我们不希望刻意限制角色动作，或者限制服装的设计范畴，所以必须制定对策。最终我们通过 IK Collision 来解决这个问题。IK（Inverse Kinematics）是一种骨骼接点的计算方法，与 FK（Forward Kinematics）依靠旋转来控制骨骼的方法不同，属于依靠骨骼终点的运动来控制骨架动作的方法。Collision 则是用来判断物体之间碰撞关系的程序。所以能看到实际效果里，绿色球（裙子）能将穿模的红色球（手部）推到模型外沿。下图里，角色手部模型与衣服重叠，在使用了 IK Collision 以后，手部与衣服紧贴，并不再穿模。与此类似，通过这个手法，即便动作各不相同，但都能在维持赛马娘魅力的同时，节省调整的工序。接下来是不自然光照的处理策略。先看一段早期的演唱会片段，能看到角色受光照的影响很弱。要知道，赛马娘不仅会进行演出，还会出现在赛跑等各种各样的场景中，这些场景里，角色的演出方式、表现效果都截然不同，因此如果角色模型不能兼容丰富的场景，那么角色给人的说服力就不够强。随着开发的推进，游戏融入了越来越多极富戏剧性的光照效果，所以角色模型也需要跟上这些功能。为了实现这类功能，我们采用了 Flare Collision 的技术。如下图右侧，绿色球便是 Flare Collision。比如下图用到的，是配置在舞台背景里的炫光光源。镜头炫光效果在舞台效果中很常见，即光源照到镜头的时候，呈现出的炫光效果。而 Flare Collision，是可以遮蔽炫光效果的碰撞体。当角色站在炫光光源前的时候，如果不设置 Flare Collision，光线就会贯穿角色，然而，设置 Flare Collision 以后，就如下图右侧的效果，光线不会贯穿角色。基于这种手法，角色、光源、镜头，都可以更加自由地设置，演唱会的演出效果也能得到极大的扩展。最后是服装和头发表现不自然的对策。在开发初期，我们遇到了下图这些不自然的情况。一种是角色的服装没有表现出应有的柔软质感，另一种是角色的头发没有按照自然的方式下垂。为了除去这种不自然的感觉，我们和程序进行了商量，一方面重新探讨角色建模的规格问题，另一方面重新构建了摇动物件的细节设定。下面是改善了以后的演出效果。能看到，每一位赛马娘的裙子、胸前的蝴蝶结、头发，都能呈现出更加自然、柔顺的质感。相信各位已经能看出摇动物件更加自然的动作了。再比较一下开发早期和现在的效果，光看静态图也能发现，服装和头发，都比以前更加丝滑。与之类似，依据重力、阻力来调整素材本身的硬度和柔软度，再对每一位赛马娘进行细节的设定后，就得以重现摇动物件最自然的表现了。总体来看，《赛马娘》的品质提升要点，就是让观众感受不到不自然的地方，再把这些技巧融入到基本制作规格里。因此，角色建模的品质才能更上一个台阶。这次聊到的穿模、光照、摇动物便是其中一部分细节。受限于篇幅，本文仅介绍了《赛马娘》角色 3D 建模中，有关建模组概要、建模规格的相关内容，在下一篇文章中，将继续分享「赛马娘独特表现力」相关的 3D 建模手法。腾讯在春节上线的这款3D 游戏，是如何设计出来的？每到过年，在外的游子都会不远万里回家与亲人团聚，这是一种中国独有的特色，也是一种别样的年味。阅读文章 > 欢迎关注作者微信公众号：「游戏葡萄」本篇来源：优设网原文地址：https://www.uisdc.com/pretty-derby-3d
插画 矢量 主页 大家好，我是和你们聊设计的花生~之前有和大家聊到矢量扁平风插画在设计领域的应用越来越广泛，并且逐渐规范化，这表明这种插画风格将成为一种稳定的应用风格。而且矢量插画风入门门槛不高，不需要我们有很强的手绘功底，借助 Ai 中的形状工具和钢笔工具就能帮我们塑造出饱满流畅的造型。在之前的文章里，我向大家推荐了 YouTube 上的免费教授矢量扁平风插画的课程，并对关键步骤进行了翻译解释，有兴趣的朋友可以去看看。零基础也没事！大神教你 5 步画出好看的扁平风人物插画大家好我是花生。阅读文章 > 今天再向大家推荐几位 Behance 上的优秀插画师，他们都非常擅长矢量扁平风格插画的绘制，作品的人物造型、配色、元素设计都非常值得学习，一起来看看吧。Justina Leisyte「Behance 主页」 https://www.behance.net/justinalei「Instagram 主页」 https://www.instagram.com/justina_leisyte/「Dribbble 主页」 https://dribbble.com/justinaleiJustina Leisyte 来自立陶宛，她的插画风格简练优雅而不失活力，非常易于学习借鉴。在人物设计上，省略了五官、阴影、褶皱、装饰等细节，舍弃线条直接用最简单色块拼接，但是人物的线条是经过精心提炼的，张弛有度，使人物形象不会显得呆板。配色上以无彩色+高明度高纯度颜色，并有意将色彩数量控制在 3 种以内，这样配色亮眼但又不会花哨杂乱。Bulma Illustrates「Behance 主页」 https://www.behance.net/bulmaillustrates「Instagram 主页」 https://www.instagram.com/bulma.illustrates/「Dribbble 主页」 https://dribbble.com/Bulma-illustrates「个人网站」 https://bulmaillustrates.com/Bulma 来自马耳他，是一个非常有创意的插画师。她擅长人物场景设计，场景中的人物、建筑、工具、植物等穿插安排有序自然，并通过合理的设计构图和色彩来凸显主体。Bulma 笔下人物动作设计得简单却能很好地表意，不知道如何画人物动作的小伙伴可以多多学习。在配色方面，Bulma 喜欢用红绿、黄蓝这样的对比色，因为易于制造对比以吸引注意力，色调整体上都是非常明亮的，很适合商业应用。Maria Maldonado「Behance 主页」 https://www.behance.net/mariamaldonado「个人网站」 https://www.mariamaldonado.com/Maria Maldonado 来自西班牙，她的画很有特色，无论是人还是物都是经过高度概括抽象的，由简单的矩形、圆形、三角形构成，这种绘画思路对没有手绘基础的设计师来说非常友好，很有学习意义。这种简单的构成形式也让 Maria 作品极具可塑性和延展性，同样的元素，用纯色进行填充，画面就非常质朴可爱，有点儿童插画的倾向，但换成渐变色又会很新潮，可见在插画中使用渐变色可以很好的提升画面整体效果。KSUSHA ITWAZCOOL「Behance 主页」 https://www.behance.net/itwazcoolSUSHA ITWAZCOOL 是一位来自莫斯科的潮流插画艺术家。第一眼看到他的作品，你可能会被画面的复杂程度吓到，但仔细观察你就会发现，画面都是由很多个独立的小元素构成的，而每个单独的部分并不复杂。他的画风有些波普——丰富绚烂的色彩、黑色的粗线描边、波点格子的装饰元素。如果你做过波普风的设计，那么学习他的画就会很有心得。SUSHA 最令人惊叹的应该是他脑洞和创造力，有时候你可能觉得他创作主体是个外星生物，但是他可以围绕这个外星生物创造出很多个有意思的小场景还不带重样的，给人带来意想不到的惊喜，这可能就是他的作品深受潮牌喜爱的原因吧。Kemal Sanli「Behance 主页」 https://www.behance.net/kemals「个人网站」 https://kemal-sanli.com/「Dribbble 主页」 https://dribbble.com/kemalKemal Sanli 是一位来自土耳其的艺术家。他的画风很现代理性，在个人习作中可以看见他对画面构成的不同尝试。虽然作品主要都是用 Ai 制作的，但 Kemal Sanli 一直在探索不同的表现效果，有时让人分不清是用 PS 画的还是 Ai 画的。在他的矢量插画中，色块的边缘并不是平滑的，而是具有粗糙的质感，就像是 PS 里面粉笔笔刷的那种感觉，应该是修改了形状描边样式。Kemal 还会用添加渐变、修改透明度、叠加喷溅纹理等方式，提升画面的质感和人文气质，弱化矢量图形过于平滑带来的“工业感”。以上就是今天推荐的 5 为优秀的矢量扁平风插画艺术家，如果有你喜欢的风格，就仔细分析一下画面的风格特征和规律，然后打开 Ai 自己尝试创作吧~更多插画知识：这10个 Dribbble 顶尖大神的作品，是我每日学习的源泉今天彩云跟大家分享的是 Dribbble 上，我非常喜欢的插画设计大佬们。阅读文章 > 这5个顶尖插画师的线稿作品，是我每日学习的源泉！关注优秀插画师，学习借鉴其绘画技巧是插画进阶必不可少的过程。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/5-illustrations-artist
测试题 作品集 内容 在今天的设计师求职中，招聘方提供测试题让求职者完成，已经逐渐成为常态。尤其是知名互联网团队和各家大厂，测试题内容、花样更是层出不穷。下面是我最近收集的一些测试题，大家可以简单看看内容：很多人会抱怨，测试题完全不知道怎么下手，不了解题目、行业，没有更具体的需求，参考案例找不到等……这就是面试题存在的意义，过滤掉不知道怎么解决问题的求职者。对于大厂来说，无论是校招还是中低端岗位社招，都会有大量的作品集投递，虽然可以通过作品集质量完成初筛，但是剩下的作品集到底能不能代表真实水准是打上问号的。包含的可能性如下：抄袭他人作品，但是经过自己的洗稿私下协商，直接借用朋友作品集投递倾吞团队设计成果，包装成个人输出找兼职枪手，花钱输出作品集网上购买以上架作品集让作者下架冒充作者直接发别人主页链接……这些全都是我们真实遇到的案例，有时候不能光抱怨大厂测试难度逐渐提高，部分滥竽充数的新人是没有任何诚信原则的，一直在刷新我们认知的底线。所以，测试题要具备测试求职者真实设计水平的能力。布置的题目一定要是非标准，开放式的，越开放就越没有标准答案，也就越难通过借鉴抄袭来完成，反映求职者真实的水平。并且测试题绝不会只考虑 UI 界面设计水平一项，一定还包括 —— 用设计解决问题的思路，产品思维和交互能力。所以只是按要求简单做个视觉稿，是远远不够的。那么应该怎么完成作品集输出，我用“用户 360 视图” 这个测试题案例来做个解释。测试题的第一步一定是先分析题目，理解题目要我们输出什么，我们简单翻译一下：“输出一个包含前面信息字段，以电商使用场景为基础的 ‘用户 360 视图’ 视觉界面，并提供相关思考和说明内容。”已经明确要求提供设计思路的话，那么完成测试题的方法，就绝对不是勉强把界面拼凑出来，然后看图说话写论文，这是编不出有效的结论的。对于这类测试题，完成的流程如下：第一步：确认问题整个流程中最关键的一环，我们必须要先确定要解决的 “问题” 是什么。原题目中给了充分的暗示，如实际应用场景的导购、客服环境。我们必须要去构思一个业务场景，在这个业务场景中为什么要使用这个页面，它存在的价值是什么。比如我们可以模拟在一个服装电商平台，用户在 IM 工具发起客服的时候，那么客服可以通过查看这个页面来了解客户偏好，推荐相关的其它产品，或引导加入店铺会员，企业官方微信号等。然后，在这个场景中，你是客服你是怎么使用这个页面的，你怎么打开它，查看的习惯是什么，最核心的数据有哪些。开放式场景就是没有限制死业务的场景，让你自己发挥构思。这些业务场景的构思，是没有绝对的对错的，只要它们听起来合理就可以。而构思这些内容，就是把问题给找出来，竖一个 “靶心”，后面输出其它内容，就是一个打靶的过程。缺少靶心的射击，就会变得毫无意义。第二步：构建方案这一步，就是根据上面确定的问题，来构建页面的框架和交互方法。在 B 端设计中，信息、模块的划分是框架设计中的重要一环，我称这个步骤为 “切糕环节“。要根据内容的重要性、交互方式在前期想好它们怎么排列。然后，再把问题中需要的字段信息逐一置入进去，并控制好文字信息的对比性。如果出现了一些特殊的交互形式，就需要把前后的步骤和操作结果全部做出来。比如，用户行为轨迹模块增加时间、类型筛选的操作。我们一定要确保框架和交互是能解决前面提出的各项问题，击中靶心的。如果时间充足，那么一套方案肯定是不够的，你可以根据不同的解决思路，输出多套原型和交互方案出来（符合真实项目场景）。第三步：完成项目输出视觉输出，就是后期相对次要的事情。不是说视觉就无关紧要，而是输出优秀的 B 端视觉界面这个要求太基础了，满足基本要求是天经地义的。B 端测试题的视觉要求，一定不是花里胡哨的追波风，这对解决业务问题不会有任何帮助。只要确保界面的整洁、清晰、干练即可，没有特殊的要求就不要过度设计徒增烦恼。好的到现在了，全部视觉内容输出以后，就直接打包 JPG 邮件发回去？这样肯定也是不行的，专业的设计师输出内容要有自己的严格要求和标准。我们肯定要适当把这些内容进行整合，展现自己的思考内容，解决方案，交互方案和视觉样式。所以，简单省事的方法，是可以用一个文档工具，把内容正常记录进去后导出 PDF 格式。另一种方法，就和正常作品集输出没有太大差异，直接通过布局排版的设计，合并成一份更完整的 PDF 文档导出。比如下面是某入职特斯拉学员的测试题（总共做了 30 页）。这么来看，测试题输出是一件很麻烦的事，但它确实成为有效筛选优质应聘者的方案。最后被选中的，必然是积极性最佳，设计思路最专业符合招聘需求的那些。强烈建议在遇到想去的公司的测试题时，用 200% 的积极性去准备。能不能入职另说，每一次测试题都是一个绝佳的练习题材，认真完成可以非常快的提升我们的相关能力。提前祝各位面试题百发百中～金三银四跳槽季，收下这份 2021 年作品集避坑指南新的一年我们聊聊如何做作品集。阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/job-search-test
干货 合集 页面 大家好，3月的第1波实用设计干货合集来了！这一波干货里当中，一如既往地有免费的图标和免费的字体，不过这回有一些非常有意思的新东西，比如打通 Github 和 Figma 储存库的服务，比如制作漂亮的代码展示效果的工具，还有随机生成网页 UI 组件的制作工具，下面可以具体看看：1、400+高素质手绘涂鸦图标https://khushmeen.com/icons.html这是一套素质超高的优质图标合集，总计超过400+，这些图标涵盖来 15 个常见的类别，风格带有强烈的涂鸦质感，非常可爱，它完全免费可商用，无需声明。另外，这套图标素材包含有 svg、png 和 figma 的格式，应该足以满足绝大多数的设计需求。2、将 Figma 和 Github 储存库连通的服务https://specifyapp.com/这是一个将设计师和开发者的日常使用服务打通的优质服务，设计师习惯使用 Figma ，开发者习惯使用 Github ，将两者的储存库合并，有机地整合到一起，将两个分开的存储体系合为一体，方便管理。3、高效的用户研究平台 Notablyhttps://www.notably.ai/对于团队中的用户研究员和产品而言， Notably 应该是一个不错的工具，它将原始的研究笔记、分享见解、研究报告都整合到了一起，方便进行审视回顾，也便于团队内的其他成员进行探讨和研究。4、Apple 各款硬件设备设计参数https://www.screensizes.app/这个名为 Screen Sizes 的网站清晰完整的整合了苹果旗下包括 iPhone、 iPad 、Apple Watch、Apple TV 在内的各种硬件的设计所需的参数，不仅仅包含屏幕分辨率，还涵盖了对比度、缩放比例、色彩范畴和色调，以及UI 界面中顶部状态栏的尺寸差异、桌面小组件的尺寸等等大量常用的参数。5、制作视觉效果漂亮的代码片段https://snappify.io/有时候需要在网页或者产品页面当中代码片段，但是单纯的把代码列出来通常不够好看，这个时候 Snappify 这个服务的功能就体现出来了，它是一个设计工具，能够给代码嵌套上漂亮的界面，方便你将它展示给别人，也适合作为嵌入到特定的页面中。6、随机生成可用网页的服务 Shufflehttps://shuffle.dev/setup严格意义上来说，Shuffle 是一个网页设计和生成服务，它能根据你的需求和功能模块，「随机」地生成多种可用的网页布局，你只需要根据自己的审美和需求，在它的编辑器当中拖拽你觉得不错的界面模块就能快速搭建网站界面。7、300+ SaaS 定价页面设计灵感https://draftss.com/best-saas-pricing-examples（搭梯子访问）很多服务类网站都有定价页面，但是定价页面的设计还是有超多讲究的，这个网站提供了 341 个设计足够优秀的定价页面作为你的参考，可以说是非常有价值了。另外，关于定价面的设计，你还可以参考下面这篇文章：用户转化率低？看看这21个高转化率的定价页面的设计秘诀编者按：定价页面中，具体的设计细节其实对于用户购买和销售的转化有着直接的影响，怎样设计才会更有有效？阅读文章 > 8、免费牛皮纸袋样机这是一套规整优雅的牛皮纸袋样机，即使是设计新手也可以很轻松地将品牌 LOGO 和内容替换了，拿来展示之用。这个牛皮纸袋本身的造型气质就足够优雅了，和多数品牌都可以无缝地兼容起来。样机文件可以用 PS 打开，仅限个人使用，在文章开头和结尾的百度云链接中可以获取。9、超级可爱的兔子主题字体 Little Bunny这毫无疑问是一款展示性字体，带着兔子耳朵的字符非常之可爱，用作正文很明显不合适，但是在标题里面用就非常不错了。这款字体仅限个人使用，在文章开头和结尾的百度云链接中可以获取。上月干货：第一波！2022年2月精选实用设计干货合集大家开工大吉！阅读文章 > 第二波！2022年2月精选实用设计干货合集大家好，2月的第2波实用设计干货合集来了！阅读文章 > 第三波！2022年2月精选实用设计干货合集大家好，2月的第3波实用设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 3月干货第一波45mme9i 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-3-design-resources-vol1
字体 粗细 斜体 Roboto 是 Google 在 2011 年为 Android 4.0 开发的无衬线字体（Sans-Serif）家族，2014 年为新的 Android 5.0 重新设计，后来也成为 Google 旗下服务 Google Play、YouTube、Google 地图和 Google 图片搜寻的默认字体。Roboto 字体使用 Apache 授权条款释出，整个字体系列包含六种字重粗细：Thin、Light、Regular、Medium、Bold、Black 和相对应的斜体，任何人都可以从 Google Fonts 网站免费下载。近期 Google 宣布推出一款名为「Roboto Serif」的衬线字体（Serif），让任何屏幕尺寸、任何格式的阅读更舒适、容易，Roboto Serif 加入使 Roboto 字体系列更完整（这个字体系列里还有 Mono、Slab 和 Condensed 衍生字体），这款字体开放源码、可从 Google Fonts 免费下载。值得注意的是 Roboto Serif 并不是从原有的 Roboto（无衬线）字体修改而来，而是将每个字母从头开始绘制，既有考虑到 Roboto 但又是一项全新的原创设计。此外，Roboto Serif 还可依照不同的屏幕大小动态调整粗细、宽度，藉此提供更好的显示及阅读效果。Roboto Serif 收录九种字重粗细：Thin、Extra-light、Light、Regular、Medium、Semi-bold、Bold、Extra-bold 和 Black，也有对应的斜体（Italic）可用，如果对这个字体有兴趣，Google 提供「Getting Comfortable with Roboto Serif」电子书详细介绍 Roboto Serif 特色和显示样式。Roboto Serif网站链接：https://fonts.google.com/specimen/Roboto+Serif使用教学开启 Google Fonts 的 Roboto Serif 字体页面，从样式可以看到不同的字重粗细、斜体，从上方调整要预览的文字实例、文字大小。如果要下载字体只要点选右上角「Download family」就能完整取得 Roboto Serif 字体系列。由于部分同学无法搭梯子，优设网已经下载好放在开头和文末的附件了，大家也可以直接下载附件。下载后解压缩、执行字体文件就能将 Roboto Serif 安装到系统上，无论是 Windows、Mac 或是 Linux 都能安装及使用这些字体。想要测试一下 Roboto Serif 不同字重、线条粗细、宽度或斜体实际显示样式，Google Fonts 网站最下方就有测试功能，也能查看范例字符（Sample glyphs）。值得一试的三个理由：Google 宣布推出 Roboto Serif 免费英文衬线字体在任何屏幕尺寸、任何格式上都提供更舒适、易于阅读的体验Roboto Serif 收录九种字重粗细，也有对应的斜体可以使用Fontworks和谷歌合作啦！免费开放8款开放日本字体下载Fontworks Inc.（フォントワークス株式会社）是一家成立于 1993 年的日本字体公司，旗下有知名的筑紫系列、UD 字体系列和 Klee（クレー）字体，经常出现在广告的标题，看起来很有气质，筑紫系列和 Klee 也被内建于 Mac 系统。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 Roboto Serif 字体包56M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/roboto-serif
网格 布局 页面 网格的历史说到网格的应用，我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则，将比例标准定为人的拳头，一个站立的人物从地面到头顶测量为 18 个拳头。公元 1040 年，首次在中国出现活字印刷，主要采用的是泥活字。在西方，金属活字印刷术在 1450 年左右出现，而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。到了 1917 年，网格在荷兰风格派运动中最为明显，由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。1919 年，德国的包豪斯学校成立，他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋，它的棋子都是正方形和长方形等简单的几何形体，可以紧密地组合在一起，以便紧凑地存放。1950 年代，一种崭新的平面设计风格终于在瑞士形成。这种风格的设计，力图通过简单的网络结构和近乎标准化的排版方式，达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。随着第二次世界大战的结束，一种新的消费主义出现了。经济快速发展，广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家，他以企业品牌标志设计及商业广告设计而闻名，网格在这种新的广告形式中发挥了重要作用。今天我们要聊的是关于网页设计的网格系统。说起来很简单，但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪？每个元素之间的间距是多少？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前，我们需要先普及一些概念。页面布局页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列，可以建立元素间的关系，从而更好地引导用户体验。作为网页设计的关键组成部分，布局决定了页面哪些元素最受关注，以及页面的视觉整体平衡。总之，一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上，然后按照重要性顺序阅读余下部分。网格的作用及概念要实现良好的页面布局，最好的办法就是应用网格系统。网格是设计的骨架，可以帮助我们对齐，有序组织页面内容。通过正确使用网格，我们不会随意地把元素放到页面里，而是明确地知道将这些元素放到哪些合理的位置上，有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计，通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。网格由几个部分组成，分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。接下来通过几个图例来详细解释下。列(Column)是跨越内容区域的垂直部分。在网页设计中列越多，网格就越灵活。列的宽度由设计师自己来决定，传统做法是在 PC 端网页上使用 12 个，Pad 端使用 8 个，移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备，可以通过更宽的槽去拉开页面的间距，使页面信息展示的更加舒展。边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕，因为它们会在内容的周边创建更多的空白。介绍了以上 3 个概念，我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统，使用 8 的增量来调整页面元素的大小和间距。也就是说，页面中的高度或宽度、边距或填充都是 8 的倍数。8pt 网格介绍有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板，但我们的显示设备却非常大？比如，我们用 375×812 的尺寸来进行设计 iphone X，但其实 iphone X 的实际尺寸是 1125×2436，是我们设计尺寸的 3 倍。因为设计尺寸会以 2 倍或 3 倍的像素进行渲染，比如 iphoneX 就是以 3 倍尺寸进行渲染，iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计，以适配到不同设备的不同尺寸。因此，1pt 可以分别转换为 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。所以我们设计一个 16pt 的图标，导出@2x 或者@3x 的尺寸应该是 32px、48px为什么一定要用 8pt？使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇数来定义元素尺寸或间距，就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8，也是因为大部分的屏幕尺寸是可以被 8 整除的，这样就很容易适配。此外在 PC 端没有使用 2 或 4，是因为其颗粒度太小，不便于设计师进行操作；用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。文本如何设置？基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸，但它们的行高要尽量是 8 的倍数。在网页端设计时，很少会遇到几倍尺寸的输出，所以通常情况下都以像素为单位，这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。例如：small = 8pxmedium = 16pxlarge = 24pxx-large = 32px……页面布局类型普及了上述概念后，我们一起进一步了解下页面的布局，页面布局大体分为几类：固定布局、流动布局、自适应布局、响应式布局。固定布局，顾名思义就是页面的整体宽度是固定的，不会随着浏览器的拉伸变化而变化。这种页面相对死板单一，但对于设计师来讲相对容易设计，也易于开发。流动布局，它会随着浏览器窗口的大小而变化，但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少，流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽，内容可能会被拉伸得太长，单个文字段落可能会在单行上贯穿页面。相反，小屏幕上的多列布局也可能对内容来说过于拥挤。自适应布局可以理解为是固定布局的一个升级版，举个例子，当页面内容为 960px，此时页面无论再往多宽拉伸，页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时，比如 960px 以内，页面就会缩小到它的第二个宽度，假设是 640，以此类推。这个临界值我们称之为断点。响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少，响应式布局将像流动布局一样进行变化。同时，如果浏览器宽度超出了某个临界点，也就是断点，那么页面布局也会发生改变。通常，响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的，这样会给用户带来更好的浏览体验。最后用图例展示下如何利用网格系统在网页设计上进行页面布局。在 figma 上的设置如图：我们可以设置好列数，定义好列宽和槽宽来决定页面的实际宽度。在网页设计上使用网格系统浅层价值是为了让页面布局有章可循，使页面看起来更加统一，深层价值其实是为了做自适应布局，让页面在不同宽度下适配到不同的设备上。这里我也创建了 4 种不同尺寸的网页端网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。https://www.figma.com/community/file/1076073453929437640/8pt-web-grid最后推荐一款 sketch 智能布局网格的插件，喜欢的同学附件进行下载。切记，在实际项目中，尽可能灵活的使用网格，不必拘泥于 8pt 的单位，但尽量保持在偶数范围。参考文献：The Comprehensive 8pt Grid Guide：https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179UI/UX Design: Setting Up Grids：https://uxplanet.org/ui-ux-design-setting-up-grids-d8b3fd9271fbmaterial design：https://material.io/designHistory of grids: from the printing press to modern web design：https://webflow.com/blog/history-of-gridsHistory of the design grid：https://99designs.hk/blog/tips/history-of-the-grid-part-2/网格系统真是太好用了，6个方面帮你早点学会！Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「iU梦工厂」 文件名 如何下载使用 文件大小 提取码 下载来源 栅格 表格插件神器1.05MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/b-end-grid-system
中文网 自己的 表情符号 Hello Everyone~ 我是花生。不知道大家和我是否有一样的感觉，就是现在和朋友微信聊天或者发朋友圈，如果不加上一两个 emoji 表情，就会感觉自己的意思没有真实完整地传达出去。这些可爱的小黄脸们早已融入我们的生活，承载我们或细微或猛烈的情感，将其传递给屏幕里的世界。据了解，世界上 90%以上的互联网用户都会在社交通讯中使用 emoji。但是 emoji 的用途远不止于此，现在 emoji 能和图片结合做成表情包、运用到短视频中做成特效、在海报中担当 C 位，甚至有人觉得一个 emoji 不足以表达情感，自己动手把两个 emoji 合并成一个新 emoji，还流传甚广——只要有表达情感的需要，emoji就能派上用场。今天向大家介绍一个 emoji 全能型网站——EMOJI中文网，在上面你可以在了解emoji的起源发展，搜到历史上各个版本的emoji并复制使用，下载emoji的高清图片，甚至自己设计上传一个emoji。以后的设计中绝对用得到！EMOJI中文网网站链接：https://www.emojiall.com/zh-hansEMOJI 中文网是一本全面的 emoji 词典。它包含了不同种类不同版本不同系统的所有 emoji，提供每个 emoji 的含义解释、快捷的复制粘贴通道、有关 emoji 的最新资讯和小知识，甚至还有 emoji 专属小游戏，非常值得大家亲自去探索一番。下面重点为大家介绍 EMOJI 中文网比较实用的几个点：1. 高分辨率emoji图片下载EMOJI 中文网提供站内所有 emoji 的高分辨率透明底图片免费下载，下载入口在主页最下方的「emoji 图片下载」，想用表情包进行二创的小伙伴以后找原图不用愁啦~emoji 图片下载入口图源分为三种类型，分别为：「动态表情」 格式：GIF 尺寸：32*32；64*64；128*128「高分辨率图像」格式：PNG 尺寸：60*60；120*120；240*240「矢量图像」格式：SVG 尺寸： 矢量无限格式：PNG 尺寸：640*640；1280*1280：1920*1920下载演示如果大家已经有定好的 emoji，可以直接在主页搜索表情进入详情页，详情页里有对应的单个表情图片高分辨率下载的入口。2. emoji博客和专题EMOJI 中文网提供专业且有趣的 emoji 资讯知识，比如最新的 emoji 草案、不同颜色的心形含义有何不同等，都在首页的 emoji 博客中。深入一点了解有关 emoji 的知识可以帮助我们在生活和设计中更好的运用它们。EMOJI 中文网还按不同主题将 emoji 进行整合，形成了一个个小专题。比如不同季节、不同国家、不同节日、不同职业等等，从事微博/小红书运营或者进行相关主题设计的小伙伴可以好好利用起来。3. 开源的OpenMoji：设计一个你的原创emoji在 EMOJI 中文网中你可以看到一类 emoji 图片叫做「OpenMoji」，是完全免费可商用的。它来源于同名开源项目 OpenMoji，由设计大学 HfG Schwäbisch Gmünd 的 60 多名学生、3 名教授发起，来自不同行业的 20 多名外部贡献者共同完成。OpenMoji 有自己的官网: https://openmoji.org/ ，在上面你可以下载 OpenMoji 的高清原图，并参与设计自己的原创表情。OpenMoji 官网OpenMoji 的发起人认为目前的表情符号创意种类相当有限，且其中大部分来自大型科技公司。这些表情符号在视觉上适应其软件平台的各自外观，使用权利也通常非常严格（例如苹果表情符号的使用条款）。所以他们希望能建立一套开源的、免费使用的表情符号系统，吸收来自各行各业的创意提案，让设计的表情符合与文本有更完美的结合。目前 OpenMoji 系统下已经有 3914 个表情符号，269 个标志，一些特殊领域如卫生健康、工业技术等标志也包含其中。OpenMoji 的表情或许与我们平时在手机上使用的不太一样，但它的所有表情符号都是遵循统一的风格设计的，彼此能完美地融合在一起，并且长期持续更新，我们可以将其当作一套值得收藏使用的符号系统。如果你想参与 OpenMoji 的项目，创造一个将自己的表情符号，可以参考官网指导 https://openmoji.org/styleguide/ ，上面有详细的制作规范、上传指导和模板。只要敢做，拥有自己的官方表情指日可待。总结今天为介绍了可以下载 emoji 高清图片、了解 emoji 资讯的强大网站「EMOJI 中文网」 ，附带展开讲解了拥有独立制作标准，内容超全面且开源的表情符号系统「OpenMoji」，希望对大家的之后的设计有所帮助。另外 OpenMoji 的 3914 个免费表情符号也已经打包好了，包括黑白线稿和彩图两种类型，都是 SVG 矢量格式，下载链接见文末。喜欢的小伙伴记得点赞收藏，之后花生继续为大家带来更多有趣又实用的文章~了解更多有关 emoji 的小知识超过780个！可能是最全的 emoji 矢量表情免费打包下载！下载链接：http://emoji.streamlineicons.com/Emoji 正在改变我们网络语言的使用方式，一个 emoji 胜过千言万语。阅读文章 > 艺术家都是怎么玩儿Emoji的？ 2019年最新的Emoji v12版本中又增加了59个新成员，其中包括机械臂、冰块、火烈鸟、导盲犬、听障行动不便人士等等。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 Openmoji_SVG 彩色 线稿资源7.5MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/emojiall
测试 可用性 用户 设计师面试被提问可用性测试？挺意外的，就着机会结合个人的一点小心得，聊点不一样的“可用性测试”技巧。可用性测试的应用场景与作用可用性测试(Usability Test)的应用场景是没有行业的明确界定的，它一般发生在产品研发上线的前中期，在功能或交互流程有待商榷之时，通过可用性测试可以获得更加真实的反馈来帮助决策或改进。当然已上线的产品，同样可以使用可用性测试为下个版本优化迭代做投资。其中探索式跟验证式是常见的两个可用性测试类型，探索式适合企业对产品进行创新设计以迎合新时代发展的步伐与商业竞争力，验证式适合企业追求精益运营或增长设计。对于可用性测试的概念，这里我用一段类比的情景来揭示出其中奥妙。做好一个饭馆，而菜品必定是馆子的核心竞争力之一，菜不好吃，那就很难形成竞争力或留住客人，所以开发新的菜品或改进就很重要。当厨师开发了新的菜品后，首先肯定是厨师们互相品尝，并不会直接上菜谱开售，这就像是内测过程，当厨师们觉得还可以时，就会找食客们进行免费试吃，通常这个时候厨师们需要食客们给出反馈或一定意见，如果食客们大多表示这个菜不错，下次还愿意吃，那么就是表示这个新菜品的可行性很高，用户满意度不错，就可以考虑对菜品优化上菜谱了。而这个过程就像可用性测试一样，它为新菜品上菜谱降低了风险，为菜品对菜馆整体体验提升了保障，其中“菜馆的食客”就像是测试的目标用户，请求他们尝试新的菜品并给出意见，这便是招募用户和测试阶段，询问食客是否还会再点这个菜品，觉得这个菜品在什么价位区间，就算是对用户满意度或可行性衡量了。相比专业可用性测试，只是少了更多的测试流程、测试技巧与科学严谨的分析汇报，但是基本概念是一致的。但值得注意的是针对单个菜品的研究并不是面向整个菜馆的，可用性测试很少用于研究用户对产品或服务的整体体验。所以可用性测试的本质就很好理解了，以互联网产品为例，其实就是服务数字化后的功能与流程含有不确定性，而决定找到目标用户还原使用场景进行测试验证，以评测设计是否行得通、哪里需要改进，为功能上线减少风险加强容错，减少试错的成本。高保真原型与测试场景还原要测试就得有测试内容，所以测试对象是必不可少的内容，这个过程是我们还原真实用户在特定场景下进行产品体验的一系列问题反馈，那么为了尽可能的还原“真实”，肯定不能只是在用户的真实性上下功夫，接近真实的高保真原型就显得尤为重要，以互联网产品来讲，还原一个可交互的高保真原型并不难，成本也不会很高，可能就是信息内容设计与素材准备会相对麻烦点，对于交互动效，基本可用就行，不必过分追求，并且实现的工具也很丰富，对于大型框架原型可以使用“墨刀、MasterGo、AxureRP”等制作，小型精致的原型可以使用“Principle、Hype3、Flinto、Sketch、Keynote”等制作。反而是工业产品设计的原型会比较麻烦，有的可能要出 3D 打印甚至开发测试样品，尽管这些工作会花费一定的时间与成本，但是从产品稳健发展的战略来看，这些投资是值得的，也是老板们可以接受的。在大多数的可用性测试文章或教程中，用户都是在一个相对降噪的会议室或实验室进行的，其目的是为了更好的布置设备用于过程的观察与记录，同时为用户测试减少干扰与评估难度（其实也省钱），但事实上还原产品服务的真实场景是很有必要的，并且一些产品服务自身就会含有一定的场景属性，所以你的测试环境就应该考虑接近真实场景的布置，甚至考虑跳出会议室、实验室。这样的目的也是为了更加真实的还原使用场景，以取得更严谨科学的有效信息来赋能设计，这也是为什么大多数产品需要上前线测试的原因，就像药品诞生于实验室，上架于临床一样，例如出行、运动相关产品，如果依旧停留在写字楼里测试实验，那就是闭门造车。任务与指标定制化设计产品的本质是为用户提供服务，用户会为了达成自己的某个目标或需求而花费时间使用产品，而我们需要用户测试一系列功能来评测是否能够协助完成目标任务，所以我们在设定不同任务的时候应该以某个用户需求或目标为导向来驱动用户使用产品功能，而不是系统的指出完成那些操作任务，那样没办法深入挖掘真实有效的信息，所以在向用户颁布测试任务的时候，我们应该为用户建立一些任务背景，并且尽可能看起来真实可靠，容易接受和共情，甚至你可以在测试前的暖场环节，根据此次的功能作用推导一些使用场景和需求，并与用户进行简单交涉，看看哪些需求很有可能发生在用户身上，并以此需求目标来调整任务的话术来驱动用户完成测试，值得注意的是如果测试的部分比较明确，那么你的任务目标也应该尽可能的聚焦或明确下来。好了，为了方便理解我要说人话了重点补充：因为在整个测试的过程中，参与测试的用户不止一个，所以在了解用户情况后，可以综合一下共同的特征再去提炼优化任务目标，以保证在多个参与者中维持评估的一致性。并且任务目标应该尽可能的准确有效，我们是要测试新的拍摄识别功能，那我们就应该要求出来，而不是说看完书后使用 APP 的笔记并尝试各种功能支持，产品或功能所没有的就不要提。不保证有效性，最后也只能让用户感到困惑而已。通常完成测试任务的过程中，会涉及到多个功能之间的交互，所以任务目标涉及的多个阶段应该贴合实际的操作顺序或流程规范，另外尽可能的避免专业术语的出现，务必考虑“适老化”一下。关于指标定制化通常在可用性测试中，是否可用的指标被划分成了三大面：1.有效性、2.任务效率、3.满意度，对于这三方面我们可以继续细化成若干个二级指标用于界定产品可用性，至于你家的产品是什么行业、什么阶段、什么用途、有何特性，应该满足哪些指标为可用，我就不深入了，相信大家心里都有数。简言之核心就是考虑产品的特性与阶段，灵活的配置可用性的指标，这里整理了些常见的指标与说明用于参考；用户测试中常见的问题尽管我们有测试脚本甚至测试排练，已经尽可能的保障了可用性测试的稳定可靠，但实际上在用户测试的阶段还是会出现各种问题，用户像一个熟睡的婴儿，何时醒来何时哭泣不可预见，所以这就要求测试的主持人能够灵活变通，同时在技巧上符合可用性测试的科学严谨。在可用性测试过程中的科学严谨一方面体现在方案的合理性、测试主持的技巧上、及评估分析量化的方法上，这些大多可用性测试的文章或教程中都会提到，这里就不展开啰嗦了常见问题举例：1. 他似乎在想些什么但是没有说出来？你在想什么可以分享一下吗？2. 用户好像卡住了或遇到 bug 了这没事儿，是我们产品设计的问题，你可以考虑跳过这一步好了3. 就是这个，它怎么就那啥了？表述不清你刚刚打算做些什么，如果是你，你准备怎么去设计？有没有一些参考4. 然后我要怎么做呢？对于用户提问说明遇到了障碍，尝试反问你平时会怎么做？5. 用户反馈了一些趋势或点子，看起来很有价值尝试深挖，顺着点子或趋势向用户多问一点，但是不要直接问“为什么”，可以尝试问好在哪里或者哪里不好，让问题更有头绪一点以上不难看出，即使有了脚本，但是用户依旧是一个变量因素，所以脚本依旧需要不断调整，也只有去调整才能更好的保障测试结果的有效性，同时主持者也需要随时准备灵活的应对各种幺蛾子。创新与颠覆性设计如何测试可用性测试被很多人视为评估体验的制胜法宝，但实际上很多产品在行业中已经逐步成熟，并有大企业花费大量资源进行研究摸索，让生态系统更进一步，所以说要是你的产品没有特殊的创新或瓶颈，而是传统的功能研发，其实并不一定要花费成本去做可用性测试，直接按照行业标杆也是没问题的。那么你的产品就是有创新或颠覆性设计怎么办？通常这个时候就会面临一个问题，打破传统或者颠覆用户的常识。类似这种颠覆式或创新技术其实非常多，例如按键手机一下到了触屏时代、智能驾驶、语言助手的诞生、刷脸支付等，这对企业是机会也是风险，所以在进行可用性测试的时候也会有些不大一样的地方。我们悉知在可用性测试的三大指标中就有一项是“效率”，对此也会有一些完成任务的时间作为指标，这些指标通常是根据内部人士或专家完成任务的时间乘上 2 倍或者更多倍作为一个评测指标。但是对于颠覆性的变化，我们需要给用户首次测试留出更多的时间去学习去适应，在此之后，可以让用户再进行 1～2 次的测试，并且比较多次任务完成的时间变化，如果时间能够大幅度缩减且完成任务，那就表示可用，而这样做也是为了保障测试的科学严谨性，以避免学习门槛对创新性的评测影响。多版本 Battle 你需要小型可用性测试可用性测试需要招募用户进行测试，预算时间精力可谓一项都不能少，但是大多公司的窘境却是公司小资源又有限，又不给预算招募，可用性测试做不起来？内部产出版本过多，不知何去何从？别担心，小型可用性测试了解一下！1. 什么是小型可用性测试(Small Usability Test)？小型可用性测试就是在标准的可用性测试的基础上减少了一些流程与要求，这就像是大公司与小公司之间会有各自的研发流程一样，两者各有千秋，对应公司规模与背景对症下药。在小型可用性测试中，也有脚本、简易的暖场、用户定义、测试目标、测试任务、测试原型、测试参与者、测试观察、思考总结，更多的也是发生在功能上线之前的推敲阶段，它比较适合设计师在自测阶段后的验证以及多版本 Battle，帮助你 Pick 一套更加合适的方案。但是整个过程相对正式可用性测试会更加简单易行，其中价值观念与目的都是一致的，都是以用户价值与用户目标来驱动（使用动机）使用产品，并且观察用户的使用过程以获取有效的反馈来改进或决策。不过呢，脚本会更加简易一些，原型材料也不用那样精细，主要能表达功能作用与信息流程为主，其中测试者更多的是寻求那些关心我们产品或有需求的用户，另外也不会准备那些知情书、协议、录制设备、测试指标啥的，更多的是寻求熟人或哪些有意向的用户快速进行测试并观察，这样不仅时间成本都节省了，难度降低了，也能拿到一定的有效测评结果。基本上主要的实践步骤就这五点，还有一些布置会穿插在其中，后面代入案例讲解一下。2. 案例代入讲解便于直观的了解和感受小型可用性测试，这里代入一个老案例讲解一下，关于案例背景这里简单交代一下。背景：平台服务于游戏相关的订单交易、互动娱乐，本次测试的内容是新的游戏订单定制服务，通过推出一批专供用户定制游戏服务的客服来完成沟通与定制下单，其价值在于帮助用户快速了解平台游戏服务以及快速定制服务并完成下单转化，以沟通的方式减少用户下单的操作流程与门槛。任务流程：设计服务入口与流量分发->用户选择心仪的小鱼（专供客服的代称）->进入小鱼的会话界面->沟通需求目标->小鱼制定用户专属服务订单->用户支付确认->转到订单流程为了加快讲解和体现测试的价值与方法，这里就不跑全套流程了，就以小鱼入口的设计与流量分发来代入讲解，测试前提是聊天会话界面中已经集成了“小鱼”所受理的主要游戏业务介绍，以及快速下单的入口。当然一般都是在用户向“小鱼”倾述目标需求后，由“小鱼”进行服务定制，并向用户发起订单等待用户确认支付，之后便是等待订单完成到验收评价，平台转交佣金。首先定义用户与目标在这个测试任务开展前一定要知道开展目的是什么，然后就是这个过程中你的功能或产品是为什么样的人服务，能为他们带来什么样的价值，也就是前面一直提到的价值与目标驱动用户的概念。为此你可以建立一个简易的用户原型来定义用户的特征属性，使得目标群体再具体一些。然后将小鱼的服务价值写出来，让参与者能够快速知道小鱼功能有什么用：创建适用于目标的测试任务对于测试任务的创建，应该是围绕目标的。根据流程的多少或复杂程度，可以划分为多个阶段，这样具有阶段性会更好控制测试节奏或分段进行，然后就是将多个任务按照流程顺序或是操作难度排序，目的是使得任务流程正确或是用户接受起来更容易。当你把任务清单罗列出来后还不算完，这套清单你可以放在脚本里，但是当你描述给用户时，你应该代入对方视角去描述并且带有目标性，所以还需要进行一次调整后应用：找到合适的测试参与者关于参与者我们会参考第一步中所设定的用户原型，不需要全部中标，但至少这些人要看起来会用得上你的产品才行，通常这些人建议通过熟人关系去寻找，甚至可以是你的同事，只要他们对产品没有额外的偏见，且不是相关设计者、营销运营者或技术研发人员，因为这些人对该领域的知识掌握甚多，有失真实性。当你找到这五六个接近真实用户的参与者后，你只需要将起初写下的“功能价值阐述”告诉他们，让他们知道要做一个怎样的服务测试，然后预约他们在不同的时间节点上花费半个小时来做一个简单的功能测试即可。观察参与者如何执行任务在这个阶段，你需要保证已经准备好了测试原型，以及一份脚本，脚本中会规范以上的功能价值、测试任务、一些简易的指标、关注要点、暖场介绍、流程顺序等。然后你要找一个相对安静低调的测试场地，不一定是会议室，不用很大空间，一个桌子两个椅子和一些必备的材料即可，但不要有一些产品相关或商业的痕迹，会形成干扰。在测试开始前你需要将测试原型初始化，以确保每个参与者测试的一致性。在暖场和任务布置完成后，就是测试者的 Show Time 了，主持者可以拿好自己的小本本或者录音笔，认真的观察测试者的操作或口述反馈，当测试者遇到一些问题不知所措时，也不用着急指导，告诉测试者先按照自己的认知或想法去做就好，如果测试者在一个地方卡了好几分钟，没有一点头绪甚至感到受挫那就让测试者先跳过障碍，避免整个测试节奏失控。另外记得提醒测试者口述反馈，这很重要。当在计划的时间段完成测试后，就为测试者送上准备的奖品，寒暄几句后送测试者去休息或离开，然后对材料或记录进行简单整理后，准备下一场测试。思考与总结在完成一轮简单的小型可用性测试后，通常一定会拿到一些有用的反馈，可能有些零散还需要进一步的整理，但这不影响最后的分析结果，为了方便验证和整理，我们会提前把一些重要的问题点罗列出来，然后根据测试者的反馈进行记录归档；最终当你完成了这些测试及反馈信息收集以后，产品方案中究竟哪里出了问题应该就了解的差不多了，一些比较明显的问题甚至会被测试者多次提及，或许是页面信息不被理解、交互难懂、提供的内容不受测试者喜爱，亦或是测试者都认可、设计亮点被用户亲睐。尽管会发现一些跟我们预期不大一样的结果，但都是正常的，值得注意的是，我们应该结合这些数据进一步的反思，究竟这些反馈有何含义有何价值，哪里还能优化，基于不用的产品服务或受众，反思点可能会有些不同，这里我泛举一些：最终呢，我们也是通过测试取得一些有效的反馈，并根据反馈深思了更好的设计方案，我们对小鱼卡片的信息进行了丰富以保证可比较性，将每批三个小鱼卡片扩展到了 8 个，用户可以通过横向滑动查看更多，同时为了方便用户更好的换到下一批，在最末尾给予了滑动换批次的交互，使得用户可以一指滑动到底完成查看与换批次的交互衔接，在之后的验证测试中也是获得了测试者的认可与看好。相信说到这里，怎么做好一轮小型可用性测试已经了解了，当你完成了这些测试任务，一定记得不要忘了后续的反思与优化迭代，甚至制定后续的研究计划。多版本方案如何进行可用性测试有时候设计产生多个版本也是在所难免的，那么对于多方案是应该将内部推荐的拿出来测试，还是应该直接两个版本一起拿出来，两个一起会不会因为采集量过少不准确呢？这里我们再说说有多个版本怎么做好测试计划与分配，当有多个版本准备可用性测试时，如何制定测试计划还要看版本数量、版本差异化这两大维度，力争做好有效且不费力。如果说在设计过程中产生的多个版本差异不大，那么都进行测试的必要性我认为不大，通过在商业价值与用户体验间做衡量，选择一个更加符合产品阶段的方案进行可用性测试即可，但是如果多个版本差异较大，难以决策且不确定性较大，那么第一件事就是经过一轮决策将版本减少到两个左右，然后再进行可用性测试，对于此类情况基本上有两种方法进行分配测试；1. 将版本分为两组进行测试；如果说直接分成两组进行可用性测试，那么需要数据样本会更大，数据采集量过少确实会有不准确的可能，因此直接分成俩组进行测试的话，会需要招募更多测试者和测试准备，但同时可能会有意外的惊喜，往往我们以为的，可能会在测试者那里收获意料之外的反馈，这将允许我们以真实用户的视角去挖掘价值或决策，避免内部短视而埋没了好的设计。2. 一组人员测试两个版本；相比分多组测试，一组人员测试两个版本在成本上会更有优势，但同时会面临两个版本测试的前后顺序影响，要知道第一个版本会对用户形成更多印象，甚至产生一些偏好，所以为减小测试结果的偏差，我们会将测试者分为数量相同的两组，并安排两组不同的先后顺序进行测试来打破僵局。测试结果的量化或汇报技巧测试结果量化的目的在于更好的衡量可用性在怎样的一个水准线上，同时便于整理复盘整个测试过程，并将结果更加直观的展现出来，便于同事们了解。对于测试结果量化有两个方面；一方面是将整个测试过程中收集到的各种问题反馈进行分类整理，并用数据图表现出来，这样能够很直观的展现问题缺陷与突破口，同时能够快速体现测试价值，或者说你进行可用性测试为业务带来的价值。另一方面则是通过面向用户的问卷调查获取可用性测试量表，最常见的标配问卷即 ASQ(任务后评估问卷)与 SUS(系统可用性问卷)，除此之外还有专门面向网站产品的 WAMMI(网站分析和测量表)、SUPR-Q(标准通用的百分等级量表，但是获取有效的百分比数据需要购买服务，所以不额外介绍了，有兴趣的自己百度下)，以及面向 APP 使用体验的 SUPR-Qm(APP 用户体验量表)，在说明这些量化表怎么使用和定义前，我需要额外说明一些量化表的概念，这很重要！1. 可用性测试量表标准作为一个合格的标准化量表至少需要保障以下几点：可信度：对同一对象测量得到的结果是否一致，这将直接决定问卷获取的结果是否能可靠，可以通过重复测量信度和[分半信度]测量， 测量出的信度会在 0～1 之间，越是接近 1 的可信度越高，因为量化结果会被直接引用，所以信度至少高于 0.7 才比较有意义，不然一个半信半疑的结果真的充满风险，同时以上我提到 ASQ、SUS、WAMMI、SUPR-Qm 这四个量化问卷也都是经过业内长期试验与验证后信度较高的靠谱问卷模式。「对信度计算有兴趣点这里」：https://baike.baidu.com/item/%E4%BF%A1%E5%BA%A6%E5%88%86%E6%9E%90/9170373?fr=aladdin有效度：主要理念在于是否密切关注到了你所在意的问题点，以及问卷问题是否与验证系统有关联性，对于效度也有效标效度(皮尔逊相关系数) 和内容效度(因子分析) 两种评估方法，不过并不一定要有很高的系数来证明很有效。灵敏度：指达到统计显著性所需的最小样本量，例如一个水果偏好二选一问卷，你问两个人可能是答案 A，但是你问完 10 个人后却是 B，当采量过小没能达到统计显著性所需最小样本量时，可能会获得不够准确的答案。客观性：一份问卷应该保持客观性，不能携带编辑者的个人偏好或主观意愿影响，这会让问卷有失统一性。重复性：尽可能的使问卷框架结构能够复用，一方面便于更多人可以研究验证，另一方面可以使得问卷本身价值最大化。可量化：对于问题的答复最好进行量化处理，而不是单纯的是或否，目的在于可使用高效的统计学方法来理解结果，或进行对比，亦或是数据可视化体现更加精密的差异。所以说开发或调整一套标准可用的度量问卷也是一门富有学问的技术活，并非简单问几个问题这么简单。2. 任务后评估问卷(ASQ)也叫场景后问卷，一般在可用性测试完毕后进行，它可以直观的在任务难度、完成效率和帮助信息上获取到测试者的直接反馈，主要就固定三道题目，答案采用 5 分制或 7 分制，所得分除以总分即可得到一个均分，该分值至少要大于 0.6 才能合格，要获得大部分人满意或认可，则要高于 0.7。3. 系统可用性问卷(SUS)SUS 总共 10 题，奇数项是正面描述题，偶数项是反面描述题，答题采用奇数的 5 分制。SUS 益于它正反向问题结合，以及具有广泛应用的可用性与易用性题型，在业内具有大量应用数据为基础，不论是客观性、灵敏度、可量化还是信度都具有较高的水准，这也是 SUS 能够成为可用性测试后问卷最主流的原因。SUS 量化分数计算：在 SUS 的相关创建者经过对大批数据的研究，其中可用性部分量表信度为 0.91，易学性部分可行度为 0.7，为使得整体量表得分兼容在 0～100 的范围，最终需要对可用性量表总分乘以 3.125，易学性量表总分乘以 12.5。而经过长期的应用迭代，最终分数的计算方式进行了定格：步骤一：所有奇数编号题目得分减一后相加；步骤二：所有偶数编号题目得分由五减去后相加；步骤三：将奇数项最终得分+偶数项最终得分后乘以 2.5 即最终 SUS 得分。分数值概念：在经过创建者的研究与沉淀，最终构成了 5 层不同级别的评级，A 即最优评价，并且对应 0～100 分，有趣的是 5 个评级并非是将 100 分平分，为了解释评级与得分的强关联性，创建者新增了第 11 题进行整体而言的数据收集与分析，最终得到了以下图中所对应的关系，如果说结果是“Good(C)”，那么对应的平均分值则是“71.4”，如果说你的得分高于 85.5 分，那你的评级则处于“Excellent(B)”，这可能已经意味着你的产品优于绝大部分产品了。4. 网站分析和测量表(WAMMI)WAMMI 的建立是为了专门量化网站产品的，该问卷一共 20 道问题，采用 5 分制回答，整体信度高于 0.9，但是吸引力、可控性、效率、帮助性、易学性多个因子测试信度只在 0.63～0.74，因此该问卷对测试样本要求不少于 30 个，若该产品属于学术或专业性较强类型，则样本量不少于 100 个，平均分值为 50 分，总分 100 分，但是也受样本量影响，WAMMI 很难在可用性测试场景后使用，不过它的问题可以在小型可用性测试中进行应用或自检。WAMMI 官网： http://www.wammi.com/index.html5. APP 用户体验量表(SUPR-Qm)作为一个 APP 用户体验量表，涵盖了更多的体验度量面，而不仅仅是衡量了可用性（比如 SUS），并且可以在可用性测试期间或可用性测试之外进行，也可以与其他问题混合使用以便于测量某些特殊产品(如游戏)的用户体验，同时它的信度也高达 0.94，SUPR-Qm 一共 16 道问题，采用传统的 5 分制李克特反应选项。SUPR-Qm 的 16 道题原本来自 23 个其他相关文献中的题目和 4 个开放性的问题，经过不断测试验证和减少冗余后，留下的 16 个具有单维的、可靠的、有效的、兼容强的问题。SUPR-Qm 原博客说明： https://uxpajournal.org/supr-qm-measure-mobile-ux/6. 关于测试结果汇报有些同学一直不清楚可用性测试报告要写些什么，有无固定格式，其实报告没有什么特别的地方，简言之就是将测试的目的、测试过程、测试结果进行整理汇报并反馈优化意见而已，其中大部分内容没有硬性的格式要求，看起来清晰易懂是重点，你可以是文档汇报也可以是 PPT 汇报，另外记得测试汇报讲究真实性，可以把测试过程中的照片或截图等放进去用于佐证。另外就是测试结果的归档，我们通常会借助表格的形式来呈现，这样能够更好的将信息整合，但是考虑报告输出，不是一味的反馈负面问题或解决方案，同样也可以反馈被用户认可的设计，这也是测试的一种价值作用，能够为后续的优化设计提供一定的方向指引与团队信心，所以我们将常见的测试结论归档表进行了一些轻微的调整，补充了反馈的正负趋向，最终呈现如下；关于用户反馈的思考用户反馈本身就是用户在使用产品的过程中遇到了问题，然后通过找客服或反馈入口所给予的反馈，如果一个应用的用户忠诚度不高，即使你在应用内发布问卷收集反馈，用户的参与也会很有限，反而是因为一些问题让用户受阻了才会产生一些宝贵的反馈，而让用户准备和提交截图凭证更是困难，所以这个时候让用户反馈的入口更好找，对问题类型提供细分选项，甚至对截图等动作做出一些预判都是不错的选择。以支付宝的使用场景为例，我们有时候截完图是不是就马上会收到弹窗提示是否遇到什么问题了？这便是对用户反馈的一种重视，如果你确实要准备进行反馈，那么你后续的操作步骤会少很多，使你更容易达成而不会因为繁琐的步骤而产生放弃的念头，并且截图时询问的窗口也是极力克制不会产生过分的干扰。这么说来你是否对用户反馈这个功能有了新的看法，并有了给自家产品优化一下的想法呢？写着写着就又没刹住车，又成了所谓的万字干货了，不管你是从事什么职位，都希望你能够有所收获，即使你脑子里一灵光有了新的想法或不同意见都欢迎来找我交流，最后也感谢那些不厌其烦与我交流的用研大佬们，下次有想法了还来烦你们，哈哈。都看了这么久了，点个赞吧～如何做好可用性测试？来看高手的经验总结！什么是用户研究?用户研究听起来是个非常大的学科和话题，没有具象的描述和切实的研究方法就显得虚无缥缈，让人有种雾里看花的感觉。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/usability-testing-buff
芫荽 字型 字体 去年初 Fontworks 和 Google Fonts 合作释出八款开放原始码免费字型下载，包括 RocknRoll、DotGothic16、Rampart、Reggae、Stick、Klee（标准体和中粗体）和 Train，其中 Klee（クレー）字型「原本内建于 macOS，因其兼具楷体与仿宋的笔调、高易读性与温暖外形，广受中文使用者喜好。」（ButTaiwan / GitHub），但因为 Klee 是日文字型，在繁体中文使用容易遇到缺字或写法不同等问题。早在 Fontworks 将字型以开源授权释出前网络就已经有其他项目为 Klee 补上中文字，例如简体中文版「LXGW WenKai / 霞鹜文楷」、将日文新字形汉字替换为传统字形「Klee One 繁体中文版」都是基于 Klee 进行增补或调整以符合中文使用习惯。近期台湾字体开发者、字嗨发起人 But Ko 基于 Fontworks Klee One 改作，推出「芫荽」（Iansui）免费开放源码的繁体中文字型项目，也是第一套开源硬笔楷书字型。「芫荽」在 Big5 范围收录约 7,800 字，并没有包含 Big5 完整的 13,560 字，也依繁体中文习惯将全角标点符号置中，调整括号引号类标点符号比日文原形更向中靠拢。如果有兴趣的朋友可以前往「芫荽」GitHub 项目页面下载字型文件。芫荽网站链接：https://github.com/ButTaiwan/iansui使用教学开启「芫荽」（Iansui）的 GitHub 项目页面，从档案列表找到 .ttf 字型文件，写这篇文章时文件名为 Iansui0.93-Regular.ttf，点选文件后再按下右侧「Download」即可下载文件。下载后点选字体 .ttf 文件进行字体安装，我是使用 macOS 开启后会打开「字体簿」应用程序，除了预览以外点选「安装字体」就能将它安装到操作系统、在其他的应用程序使用。参考下图就是使用「芫荽」字型呈现的效果，非常清晰、带有力道的笔画线条，彷佛是铅笔书写效果，而且看起来非常优雅，适合各种使用情境，经过「芫荽」项目保留的 Klee 原始字符 3000 字，有超过 4000 字经过修改调整，补充超过 1500 字，解决原字体使用在中文会出现的缺字或显示问题。值得一试的三个理由：芫荽（Iansui）是基于 Klee One 改作而衍生出的繁体中文字体在 Big5 范围收录约 7,800 字，尽可能调整字形以贴近教育部标准字体开放源码，任何人可以无偿使用此字体，包含商用Fontworks和谷歌合作啦！免费开放8款开放日本字体下载Fontworks Inc.（フォントワークス株式会社）是一家成立于 1993 年的日本字体公司，旗下有知名的筑紫系列、UD 字体系列和 Klee（クレー）字体，经常出现在广告的标题，看起来很有气质，筑紫系列和 Klee 也被内建于 Mac 系统。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 芫荽字体源文件7.79M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/iansui
文案 用户 产品 编辑导语：你有考虑过，写出一句你认为好的文案后，用户的感受是什么吗？这篇文章作者详细阐述了极其重要却常被忽视的“文案体验”，推荐想要了解文案撰写的童鞋阅读。著名节目主持人蔡康永说过这样一句话：“你说什么样的话，你就是什么样的人。”有时候，一个人的言语在别人眼里，就代表了这个人的性格为人。那些说话毫不在意别人感受的人，很难给别人留下好印象；而说话有分寸感，懂尊重懂换位思考的人，就很容易给别人留下一个良好的印象。在产品界面中，文案是我们和用户对话的重要桥梁，好的文案能够让用户在使用产品的过程中，能够很顺畅很愉悦地完成任务，给用户留下良好的印象和评价。因此文案的体验设计非常重要，但往往在很多产品设计中，却是最容易被忽视的体验部分。如何做好文案体验？1 个中心：以用户为中心。3 大要点：语言文字、语气态度、数字与标点。以用户为中心产品服务的对象就是我们的用户，所以要明确我们表述的立足点，相应的产品界面上的文案，也应该尽量以用户视角来写作。那我们在产品文案的提供上，就要有共情的能力，把自己切换成用户视角，感同身受地理解不同用户的能力，用户可能对我们业务并不是很了解，那我们就要思考如何通过通俗易懂的文案表达，帮助用户更有效率更愉悦地完成任务，从而达到业务目标。语言文字在产品界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲仔细设计。如何提供更好的文案，让界面有更好的可读性和易读性，同时让用户体验更加友好。需注意以下事项：1. 清晰准确文案传达的语义能让用户清楚明白当前的信息内容，不产生理解上的歧义或误导。2. 简洁有效精简语句，减轻用户阅读及理解负担。3. 表述一致描述同一个事物的词汇表述要一致，避免让用户产生更多的认知负担。4. 语法正确在一些功能操作按钮上，语法要表达正确且需统一，先动词再名词。5. 用户语言使用用户熟悉的语言，能看得懂的用词，避免使用术语或一些非必要的技术专用词。6. 突出重点在一些长文本中，要提炼重点，突出最关键的信息，快速让客户获取重点信息。7. 规范名词通用以及所属行业认可的专业用语用词，要准确规范。语气态度在产品界面上，语言文字更多定义的是产品的内容，文案中体现出来的语气态度，则能牵动用户的情绪，合适的语气态度更容易让用户建立信任感。需注意以下事项：1. 友好尊重文案应传达给用户友好尊重的感受，永远站在用户的角度考虑，并采用包容的语调，给予用户支持与鼓励，不要命令和强迫用户。2. 不要过于极端避免使用过于绝对的表述，不用“一定、绝对、肯定、百分百”等极端词语。3. 尽量不用负面词语避免使用“不要、不可以、请勿”等词汇文案，多使用正向引导文案。数字与标点在产品界面中，数字是表达数量最直接的方式；标点符号是辅助文字阅读的符号，用来表示停顿、语气等作用。需注意以下事项：1. 数字代替文字用户对于数字的感知会更快，在适当场景下，使用数字而非文字表述会更加有效。2. 适当增减标点为了帮助用户更高效地扫视文本内容，可以省略不必要的断句点，但在长句或一些文字链前面，该使用标点还是要保留。3. 慎用感叹号一般只在需要表达强烈的正面情绪下，如祝贺、感谢、问候等场景下可使用，其他场景慎用。最后不同的行业不同的业务，除了上述总结的内容外，也许还有各自不同的表达方式。希望这篇文章能引起共鸣，大家在做产品设计的时候，能把文案体验这部分重视起来。当我们真正以用户为中心，从用户视角去仔细琢磨怎样使用产品的时候，总能够设计出足够优秀的微文案。谨记：尽量采用通俗易懂的文案，确保内容的可读性和易读性，帮助用户更效率更愉悦地完成任务，构建更美好的用户体验。我们不妨从最简单的工作方式尝试下：如产品界面设计出来后，自己再从用户视角复验一遍，以及让身边同事也来测试下，看产品的文案内容是否能读懂且易懂，然后及时再改再测，把它做到更好。好的体验体现在方方面面，我们尽量把每处的体验细节都做好，那么整体的体验终将越来越好，共勉!如何快速增加17%的业绩？收下这份微文案设计基础指南当我们想要设计一个用户体验良好的页面时，文案是我们不容忽视的重要元素。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/copywriting-experience
颜色 场景 对比度 我们在贝壳新装修业务的设计中，针对“投影”这一特殊情境进行了一系列场景化体验设计的实践。当初次面对这一特殊场景的设计时，真的是瞬间头皮发麻，不知道从何下手。因为投影场景比较特殊，业界内也少有参考，需要我们从 0 到 1，探索出一套严谨、合理的设计规范。那么，设计师怎么才能做好这类创新场景的体验设计呢？这需要我们深入线下考察真实的情境，洞察使用者的情况（人）、周围的环境（地）、使用者办事的流程、以及行为的动线（事）等。只有透析线下场景，接地气的解决使用者痛点，才能打造出真正满足需求的体验。图 1 场景化体验三要素为什么要做投影场景设计？说到“无线投影场景”，大家应该都不陌生。没错，就是会议室里播放“劈劈踢”的无线投屏场景。首先来明确一下设计要面临的挑战点：使用场景是什么样的？使用者是谁？现存问题是什么？1. 使用场景是怎样的？在贝壳新装修的业务中，有一个核心使用场景：装修管家要定期向管理者汇报装修工地的进展和问题。他们需要在会议室里，把 PC 中台系统的数据管理界面，通过无线投影呈现在幕布上，装修管家边看边向管理者汇报。图 2 投影设计核心使用场景2. 使用者是谁？业务管理者与装修管家就是这一场景的使用者。装修管家在整个装修流程中负责对工长、设计师、主材厂家等团队人员的协调工作，确保项目进度的正常进行，以及定期巡查工地现场，上报工程进度及现场问题。业务管理者主要负责管理管家、制定施工管理流程，对于装修过程中出现的各类问题提供解决方案。管家需要通过幕布上的内容呈现，突出重点，提高效率，准确且又快速的完成汇报。管理者需要通过观看投影幕布，再结合管家口述的汇报内容，快速的抓住重点，并能直观的总览整体情况。图 3 管家/管理者诉求3. 现存问题是什么？图 4 改版前投影展示效果上面这张配图，就是在会议过程中记录下来的投屏效果。大家可以明显的看出很多问题，比如：字号偏小：在投影场景下，由于用户的观看距离和屏幕尺寸都被大幅放大，导致文字视觉效果偏小，PC 中台系统常用的 14 号字不再适用。颜色看不清：由于无线投影仪会损失一部分清晰度，所以对颜色的识别度较低。灰度文字看不清，导致文字层级区分失效；背景色看不清，导致界面分区设计失效；斑马行看不清，导致 table 信息定位困难。界面信息冗杂：对管家来说，无法快速找到正在汇报的施工单、汇报重点信息在 table 中不突出；对管理者来说，不知道应该关注哪些工地、缺乏数据总览。因此，基于装修管家向管理者汇报的使用场景，结合使用者的特点和痛点、以及现存的问题，我们展开本次投影场景的设计研究，从实际场景出发，来解决使用问题。致力于为使用者提供看的清晰、看的高效的使用体验。如何解决这些问题？我们在 PC 中台系统中，根据实际使用需求和投影场景特点，定制设计了一个新的页面，同时满足投影和 PC 的使用。并建立了一套匹配该场景的新规范，为后续此类场景的设计提供依据。针对“字号偏小、颜色看不清”的问题，我们在表现层中进行了设计规范的探索。针对“界面信息冗余”的问题，我们从结构层和框架层梳理了界面的信息结构，既能符合管家的汇报逻辑，实现汇报提效。也能令管理者快速的了解汇报内容，并抓住重点、实现信息总览。我们从字号、颜色、信息架构三个方面进行具体介绍。图 5 解决现存问题的 3 个优化方向1. 字号我们在为电脑和手机外的电子信息载体做设计时，可能会经常面临无案例可参考的局面。这个时候我们可以跳出常规思维，想一想在这个场景下最常用的产品是什么。即使它不是常规的互联网产品，同样也能为我们提供参考。切入点经过一波调研，投影场景下字号的定义，以投影场景中的成熟产品 PowerPoint 为切入点，我们找到了投影最小字号的计算公式。图 6 投影场景最小字号计算公式当我最初看到这个公式时，也非常迷惑，不知道该如何使用，因此先去尝试理解它的原理。就像下面的图片表示的一样，投影最小字号等于电脑端常用字号与会议室的观看比例、电脑观看比例、显示器大小比例几个参数的乘积。图 7 计算公式原理其中，显示器屏幕系数、投影幕布屏幕系数可以参考下表：图 8 系数参考表数据测量在确定了公式后，我们进行相应的数据的测量。首先，测得“会议厅长”的数据为 7 米图 9 会议厅长数据测量测得眼睛距离电脑显示器的“观察距离”为 0.5 米图 10 观察距离数据测量其次，调查明确了“投影幕布尺寸”为 120 英寸、“显示器尺寸”为 14 英寸。然后，根据“投影幕布比例 4：3”、“显示器屏幕比例 16：9”的比例关系，对照上文屏幕系数参考表，得到“投影幕布屏幕系数”为 1、“显示器屏幕系数为 0.79”。最后，我们再将测量的数据代入公式计算。图 11 数据代入公式计算结论在电脑显示器尺寸 14 英寸 16：9、投影幕布尺寸 120 英寸 4：3 的情况下：会议室厅长为 6 米时，投影最小字号为 16px；会议室厅长为 7 米时，投影最小字号为 18px；会议室厅长为 8 米时，投影最小字号为 20px；在这要里特别注意的是，上述公式推导出来的理论值是最小字号，这并不代表我们在最小字号以上可以无限放大。在保证能看清内容的情况下，字号的选择以较小为优，以保持克制的原则。2. 颜色要解决投影场景下颜色看不清的问题，我首先思考这样两个点：满足什么条件的颜色才能被看清？看清与看不清的边界在哪里？有了能看清的范围，明确了看清与看不清的边界后，我们如何选择使用的颜色？概括来讲就是两个问题：如何检验颜色的可读性？如何定义颜色的值？带着这两个问题，我们继续进行下一步的探索研究。如何检验颜色的可读性「WCAG 标准」WCAG（Web Content Accessibility Guidelines ）内容无障碍指南，定义了如何使残疾人士更方便地使用 Web 内容的方法，遵循这些建议也可让普通用户更容易访问辨别看到的内容。该标准发布自 W3C（万维网联盟）。W3C 是 Web 技术领域最具权威和影响力的国际中立技术标准机构，发布过 200 多项 Web 技术标准和实施指南，一直指导着 Web 领域的发展。图 12 WCAG 标准Web Content Accessibility Guidelines (WCAG) 2.0 中有明确指出：AAA 级别中：普通文本与背景色要符合至少 7:1 的对比度。AA 级别中：普通文本与背景色要符合至少 4.5:1 的对比度。WCAG 标准则可作为检验文字颜色可读性的依据。我们使用的文本颜色与背景色之间的对比度，只要满足上述 WCAG 标准的建议，就能确保被清晰识别。那么问题来了：如何得到对比度值呢？「WebAIM 工具」今天跟大家推荐一个能得到文本与背景色对比度值的小工具：WebAIM。百度搜索：color contrast。第一条就可以找到。图 13 百度搜索 color contrast使用这个小工具很简单，在 “Foreground Color(前景色)” 中输入文字颜色，“Background Color(背景色)”中输入背景色，即可在 “Contrast Ratio”中得到对比度值。图 14 小工具 WebAIM通过这个工具得到的“对比度”值，再参照 WCAG 标准，即可判断文字颜色能否被看清。「结论」通过上述 WCAG 标准，我们得知，普通 PC/移动端产品设计中：主要文本与背景色对比度要至少达到 7:1 AAA 级别对比度；次要文本与背景色对比度要至少达到 4.5:1 AA 级别对比度；而在投影场景设计中，情况又有所不同。无线投影仪损失一定的清晰度，造成对颜色的识别度较低，且投影场景设计的字号已由 14 调整至 18。针对投影场景的特殊情况，设计团队参考 WCAG 标准，并反复的进行了尝试，得出如下结论：投影场景产品设计中：正文文本、标题和背景色之间应保持在 7：1 以上的 AAA 级对比度。次文本、辅助色文本与背景色之间应保持在 3：1 以上的 AA 级对比度。界面分区的灰色色块、背景色、tab 色应保持 1.1：1 以上的对比度。因此，通过上述检验文本可读性的结论，再结合 webAIM 小工具得到的对比度值，如此就解决了如何检验文本可读性的问题。如何定义颜色的值「色彩模式」一直以来，设计师们常用的颜色以 RGB 模式，十六进制颜色码为主。但大家有没有想过，十六进制颜色码，在调整颜色时是没有预期的，老司机们也难以通过“#FFB6C1”这几个字母和数字的组合，辨别出它究竟是个什么颜色。而且还很难记忆。图 15 RGB 模式/十六进制颜色码因此，我们弃用 RGB 模式，而采用 HSB 色彩模型进行颜色的定义。图 16 HSB 色彩模型H：色度用于调整颜色，范围在 0-360之间。S：饱和度是指颜色的强度或纯度，范围在 0%～100%之间。B：亮度是颜色的明暗程度，范围在 0%～100%之间。该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队之间的沟通。「定义颜色」因为黑色系文字颜色 H 和 S 的值都为 0，我们通过 B 值来选择需要的颜色。将 B 值由 0-90 的 10 个代表颜色依次列出，根据前文所述的文字颜色检验标准，B 值 0-50 是满足对比度要求可用的，而 B 值 60-90 的则不可用。图 17 颜色枚举B 值 0-50 的颜色中，B 值为 0 的被首先弃用，B 值为 0 的颜色即纯黑色。自然界中几乎没有纯黑颜色的东西，因此在设计中使用这种颜色给人的感觉不真实，视觉上也太亮。因此，我们选择 B10 的颜色作为主文本色，用于版块标题、tab 名称、表格文字等主要内容。为了保持对比和文本层级，次文本色，跳过 B20 的颜色，选择 B30 的颜色，用于提示、面包屑等辅助文字信息。同理，B50 的颜色，则用于占位文本色、失效色。图 18 颜色选择3. 信息架构在解决了表现层看不清的问题后，这一部分，我们结合实际需求，从框架层、结构层来解决界面信息架构的优化问题，并进行了优化池的梳理：图 19 优化池梳理「最终效果展示」优化前：图 20 优化前效果图优化后：增加了数据指标总览图 21 优化后-数据指标总览按照管家汇报内容进行信息分区划分图 22 优化后-信息分区划分将列表信息按照重要程度进行排序、使用红黄灯标签聚焦重点工地图 23 优化后-红黄灯聚焦重点工地优化后的设计，既符合管家的汇报逻辑，又满足了管理者的关注重点，同时也彻底解决了看不清的问题。总结在实际工作中，我们不止一次面对这种定制化、针对性的场景体验设计需求，除了投影场景的设计外，在面向老龄用户群体进行包容性设计、以及特殊智能硬件设计的时候，以上研究也具有借鉴意义。场景化体验设计研究给我们的启发在于：要想让设计更好的服务于业务、产品、助力问题的解决，必须深入了解实际情境、真正的去关心使用者，并且不断进行尝试、研究和探索。滴滴设计专家：如何把场景化融入到产品设计中？场景化已是耳熟能详的词，主要说在特定时刻，基于特定使用情景和用户特性而进行的定制化设计。阅读文章 > 参考文献：杨臻《PPT 要你好看》欢迎关注作者微信公众号：「贝壳KEDC」本篇来源：优设网原文地址：https://www.uisdc.com/scenario-experience-design
市场调研 产品 用户 现如今互联网市场竞争加剧、不断变化的用户行为习惯以及持续增加的新用户推广成本，多种因素导致企业对于用户需求了解越来越迫切，这也使市场调研的重要性越来越突出。调研具有较大的价值，适用于每个产品的生命周期，一个新项目的立项阶段，需要对整个产品项目有较明确的市场调研评估，精准的市场调研工作有助于提升产品上线后的成功概率，并且可以帮助项目管理人员控制开发成本等。而在产品上线后，侧重点则放在用户调研和竞品调研上，为产品改进和优化方向提供依据。本文的主要内容是一个 0~1 项目初期立项的市场调研内容，这个时候的市场调研应该要做哪些具体的工作？在《市场调研与数据分析》中，对市场调研的作用定义是：调研的重心在于获取可以用来制定决策的信息这一过程，为存在的特定问题提供信息。这个作用也明确了，市场调研的内容需要具有一定的客观性和真实性，调研信息的获取和对信息的理解分析，让我们能够做出较正确的规划和决策，从而促进新项目成功上线。市场调研的信息来源市场调研的主要任务是提供明确的信息，以此来减少决策制定时的不确定因素，而调研的内容来源主要可以分为两类，一类是对市面上已有的二手资料进行分析和研究，也叫桌面研究，另一类是通过实地调研和采集获得的原始数据进行研究。二手资料最显著的优点就是可以在短时间内迅速而便捷地收集到，并且成本相对比较低，主要的内容是行业、用户、相关产品的报告内容。但是，通常也会产生适合性和精确性的问题，缺乏特定项目的针对性、及时性、可靠性，这个时候就需要增加原始数据研究的环节，在二手资料提供的方向上，对理想的目标用户进行调研，目的就是把还未知的问题弄清楚。在《精益创业实战》中，提出了数据收集的方式，即两步验证法——先定性验证，再定量核实。因为我们一开始并不知道用户需要什么，通过定性调研的开放式问题，了解目标用户的相关信息后，再进行问卷定量的验证，可以在设计解决方案之前，了解用户的潜在需求。在市场调研的信息收集中，有目的性收集相关信息资料，需要得出对产品定位的定义性描述，并解决以下三个问题：我们为什么要做这个项目？（项目背景）什么问题应该得到解决？（用户需求）这个项目对公司有什么价值？（商业价值）市场调研的流程由于整个调研过程需要耗费大量的人力物力，并且耗时较长，需要有明确规划把控进度。在了解完具体需要调研的范围后，分阶段来获取内容信息，整个调研流程可分为四个阶段，分别是分析阶段、计划阶段、实施阶段和结论阶段。在四个阶段中，工作量最大的是计划和实施阶段，在这两个阶段中就需要合理的的评估现有资源和能力，最小成本的进行信息的快速获取。1. 分析阶段明确目标在市场调研的第一步就需要明确调查目的，以及要验证的方向，在接下来的流程里保证对信息的收集和验证有明确的范围限制，提升信息的有效性。背景分析在正式的市场调研展开前，需要对项目背景情况，以及相关行业进行初步了解和分析，平衡调研时间、数据可得性、对公司价值、调研投入成本之后，确定是否进一步调研，如果项目不具备明显的价值就果断放弃，可以减少成本投入。初步的调研可以使用 SWOT 分析法，对内外部竞争环境和竞争条件下进行态势分析。或者使用 PEST 分析法，对政治、经济、社会和技术这四大类影响企业的主要外部环境因素进行分析。以此来快速判断项目或者产品是否具备一定价值。2. 计划阶段调研计划调研计划是一个不可或缺的环节，为确保整个流程的流畅进行，需要根据现有资源去制定一整个调研计划方案，包括确定调研对象、选择调研方法、预估经费预算、分步规划实施进度。3. 实施阶段做完了前期的准备工作后，接下来进入实施环节，根据整理的二手资料和原始数据，从行业、用户、产品三个方向对内容进行信息归纳。在这个阶段中需要注意的是，所做的工作是客观信息的调研，应避免太主观的调研结果。行业分析从该项目（产品）角度去分析该行业的趋势、政策、相关新闻以及行业研究报告，更细分的维度分析记录以下几个方面：市场规模：该行业领域的分量，切入点产品的市场表现行业细分：是否存在更为垂直的细分场景，罗列具体的行业细分领域增长态势：该行业的增长空间和未来一段时间的增长趋势盈利情况：行业盈利能力以及稳定性用户分析先定性访谈一些目标用户，对结果进行记录，了解该部分人群的一些特征后，以定量问卷的方式对结果进行验证，主要记录的内容分析如下：社会属性：年龄，性别，职业教育程度等目的：用户为什么去使用这类产品，用户使用场景中有哪些需求行为：目标用户群体使用相关竞品的行为习惯；在使用过程中有哪些问题、痛点与不爽，针对这些内容，用户目前有什么解决方案；无竞品时的替代方案是什么观点：目标用户的消费能力；针对现有解决方案有没有更好的优化方向建议；众多需求中，哪方面需求与期望更迫切产品分析在市场调研中的产品分析，主要是了解相关竞品类型、核心优劣势、规模大小、盈利方式、产品定位等信息，不涉及具体功能细节和交互流程，把注意力放在产品要解决的问题上。4. 结论阶段在得出一系列的调研结果后，对产品发展方向进行分析预测，主要分析未来一段时间内的风险和发展机遇，细分市场，技术和成本可行性。然后根据所有资料内容概括总结，提取重点信息进行阐述。最后输出结论性文档，在团队中进行分享。发展分析风险：风险中有涉及的关于技术难度实现；其他产品可能的市场切入；盈利能力是否稳健且持续；宏观环境的影响等。新机会：行业细分领域中是否有突破口；未来技术发展等因素是否可以成为助力等角度。调研总结总结的内容主要从四个方面对信息进行整理，为方便查阅，也可以利用精益画布或者商业画布，对调研总结进行概括性描述，在画幅上可视化的描述项目产品的内容。产品定义：要解决什么问题、依据调查所得信息论证观点，提出解决方案和实施步骤。产品规划：行业机会在哪里，从哪点进行切入；用户群体特征怎样，用怎样的形式去满足怎样的需求；在众多竞品中怎样做到差异化；如何利用好资源发挥优势，从哪些角度入手项目成本：成本角度可以从研发成本，政策成本，费用成本等方面对项目进行预测。商业价值：可持续性的产品收益和盈利方式报告输出最后一步是输出结论性文档，在这个环节需要注意以容易阅读的方式输出可传阅的文档，在产品立项之初，帮助每个团队成员了解相关信息，达成共识，也为之后具体功能实现提供明确的客观依据。文档包括的内容，主要是上面提到的三个问题的答案，更细分主要有以下几个方面：项目背景和调研目的调研内容和行业调研计划，经费预算和时间安排调研方法、资料分析方法调研对象和调研范围项目前景和风险评估调研总结（产品定义、产品规划、项目成本、商业价值）设计师做调研问卷时，容易出现的5个问题我虽然不是什么问卷研究领域专家，但至少也对一些常见问题有点经验，所以这里给大家总结几点常见问题。阅读文章 > 欢迎关注作者微信公众号：「小馒头的交互笔记」本篇来源：优设网原文地址：https://www.uisdc.com/the-market-research
用户 案例 操作 长久以来，我们一直强调 B 端设计，最重要的输出产物不在于样式，而是交互。优秀的交互设计可以显著的提升操作效率，更快完成工作任务，从而提升经济效益。但是要怎么讲清楚它是很痛苦的一件事，理论上的交互原则，和真实工作场景遇到的困难很难匹配。大家会有这种感觉：看再多的分享和原则，也做不好交互。所以，我们要来探讨一些 B 端交互的基本要求和特点，下面用一些近期的案例做简单的剖析。在 B 端项目中，所有的工作目标，都是围绕在更好的解决业务问题展开的。一个完整的业务需求，必然是包含大量的组件、流程的共同参与。我们在设计内容的过程中，往往会掉进过度关注某个单元的细节，而忽略整体对整体业务目标、重点的认知，出现本末导致的问题。所以，针对每个局部的组件，我们一定要思考它在流程中的重要性，使用频率，使用场景。比如前阵子分享的学员案例筛选组件，我们将左侧露出的筛选项进行折叠合并，修改成了右图的结果。光盯着组件看，可以明确的说案例 1 必然是更好操作的，因为筛选内容可见，操作步骤较少。如果你只想到这里，那么必然是没法处理好交互的。我拿到这个案例的第一件事，实际上就是搞懂这个页面是干嘛用的，处理什么业务，以及了解目前用户的一些基本诉求。最后得到的结果，就是操作员来到这个页面，主要查看异常的状态和它们的详情。因为列表本身是根据时间排序的，异常状态没有处理的也通常都在前面。所以，操作员直接查看列表是最高频的操作，并且表头因为支持排序切换，也是高频操作的内容之一。反而顶部的筛选，只有遇到一些特殊情况，需要将历史中的某些条目筛选出来，才会用得到。在正常使用过程中是会被自动忽略的。而且目前用户的主要反馈也出现，顶部的筛选过高，每次进页面都要下拉才能看见列表，操作极为不便。基于这样的前提条件，我就一定会压缩顶部筛选区域的高度，确保下方列表的大多数内容在一屏内可以显示完。那为什么还要改里面的筛选方法而不是简单做个折叠和展示？还有一个全局化的考虑，就在对一个筛选组件的设计，就是其它所有页面筛选组件样式的基础。这个页面我们只放了七行，其它页面最多的筛选项最高多达一倍。即使做成折叠的，展开后甚至一屏都放不完筛选内容，比如下面这样的示例。并且，筛选完之后，这个面板折叠还是不折叠，折叠了的话看结果列表就看不到前面选了哪些。不折叠同样也基本看不见，因为列表需要下拉，把上半部分内容隐藏。所以，最终进行多列排序的设计，就是舍弃最“初步”的便利性，为业务目标让步。同时基于全局的可用性做预判，对一个低频操作的模块减少过度信息的露出，让用户可以高效完成 1 级信息索引（找到选项标题），然后再去做 2 级筛选。在长期以来的 B 端项目实践中，我都始终践行业务优先的原则，检查处理的方案能不能满足我上面分析的特征，只有满足不了业务需要，我才会去修改它。而不是虚空树靶，光靠各自的 “觉得” 来讨论，这样的讨论不仅没有质量，而且不会获得有效的结果。做产品和交互，对用户的理解优先建立在共情和同理心上。了解用户，最好的方法不是你做了科学的实验，应用完善的理论，而是你自己成为用户！可惜很多设计师都想不明白这个道理，过度追求数据或者调研方式。在上一个案例中，也有同理心应用的部分，自己作为用户知道这个页面操作的重点，在权衡利弊的过程中你自然知道应该选择什么，放弃什么。下面再看另外一个学员案例，也是表单，但是是需要用户完整填写的大量表单内容。在右侧的改版里，我把单从横排改成了竖排，从原本省空间的方案改成了不省空间的方案，和上一个案例截然不同。为什么？看看下面的细节先。如果真当自己是用户，看一遍自己做的设计，给自己定个操作的目的，并尝试在这些内容做选择，那么你选择到这种模块，就必然开始混乱起来。上下的内容离得太近了，比左右同行同级元素还近，这样会极大损害信息识别的效率和操作顺畅度。尤其当我核对前面单选项是否选对的情况，阅读起来更是痛苦。而我们把内容进行上下排序，将亲密性表现得更合理，那么操作的舒适度就会显著的上升。至于多出来的高度，作为用户你沉浸在表单输入过程中，为什么会关注多出来的那点高度？好吧！如果一定要用理论方法来分析，那可以堆砌一堆的理论解释：亲密/对齐性：上下排序的亲密性可以完美符合左对齐视觉引导，以及不同模块跨度的划分菲兹定律：左对齐的选框位置距离极短，除了滚动外鼠标就负责上下移动，而不用全屏幕流浪心流理论：用户视线不要轻易被打乱，就容易沉浸到完成当前目标，而不是关注怎么设计美观……理论可以拿来在 PPT 里强化自己方案的说服力，但前提是别自己绕进去，纯粹通过理论的堆积来认为自己设计的是合理的。再看看下面这种表单页的案例，多列设计来让画布被填满的设计，思考下到底是为了设计而设计，还是为 “用户” 设计？第三点，就是有效的整理需要的设计模块的字段信息。从产品层面去理解该模块的诉求，信息层级，状态类型。有很多复杂的组件，如果我们直接动手画，是行不通的。主要问题源自需求层面的复杂性，不仅字段非常多，而且它们是有层级关系，集联性质。比如再看下图的学员案例，一个在公司平台上传公共文件时，进行素材权限编辑和信息管理的组件。在这个模块中，包含的功能和可操控的元素非常多。从整个面板的标题开始，作为最顶层的信息，向下可以延伸出不同的子模块和对应的二级标题。每个二级标题下，还有不同的下级元素。我们不仅要有效处理这些关系，同时还要分析权限的字段内容，它们包含了：权限类型标题、对象、对象权限、选择、删除、添加。这时候，我就会用文字的方法把这些信息整理出来：然后，重新梳理不同层级结构，再完成不同状态的兼顾，缩减无效的按钮，尽可能降低信息的复杂程度。下面是改动后的案例（只做了原型）。交互的很多工作并不在设计软件上，而是要跳出软件和设计稿，去理解实际的产品需求、信息、字段。除了一些树状图外，必要的交互流程图是无法省略的。多种工具导图和原型的共同作用，才能帮助我们在复杂的需求环境下 “试” 出足够多的方案找到最满意的那一个。最后，就是自己也拿不定主意，或者你的方案就是说服不了产品、开发的常见情况，怎么办？那就是真实的做测试和投票！B 端比 C 端最大的优势之一，就是如果真要做用户调研和测试，容易了无数倍。不管是给客户做方案还是做公司内部项目，你的目标用户群体是非常固定而且容易联系的。当我们在交互方案上僵持不下的时候，就不用纠结或者通过开会的撕逼来做决策。而是把这交互方案的高保真原型做出来，给对应的目标用户做测试。比如上面表单的案例中，新老两个案例，你都可以快速用 Axrure 或者 Protopie 等软件实现高保真的交互原型，1:1 还原真实操作场景。你可以从下面制作的初步案例中查看操作结果：请在电脑端打开，才能还原真实操作：原案例： https://cloud.protopie.io/p/f20dc7a0eb改后案例： https://cloud.protopie.io/p/42c51829cd这时候，方案哪个有效不就根本不用争论，交给目标用户去使用和投票不就明了了嘛？B 端交互方案的决策权，可以由目标用户来主导，而我们要做的就是去建立这样的决策机制，如何快速的来生成不同交互方案，并让目标用户决断。不要再在无穷无尽的 “你觉得”、“我觉得” 中损耗项目进度了……以上，就是一些 B 端交互设计中的思路实际解决流程。这些也是我最真实的工作状态下解决问题的方案，所以并不想写一大堆理论来欺骗自己了（狗头保命）。希望大家能从中获得收获！掌握表格设计，就掌握 B 端设计的半壁江山！（5000字完整版）虽然我们按节奏只剩最后一篇交互部分的，但感觉前面有不少需要优化的地方，所以干脆重新整合，一起优化一遍！阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/improve-sense-of-use
网格 工具 颜色 之前已经和大家分享过很多做渐变的网站，可以非常方便的提取好看的渐变配色。但是想做出一张亮眼的渐变背景，只有双色渐变肯定还不够。今天就向大家推荐一款在线生成酷炫网格渐变的神器——MESH·Y 。它操作简单但效果极佳，一键就能生成一张质感十足的网格效果渐变背景，一起来看看吧！基础操作MESH·Y 的操作界面简单明了，主要分为 4 个部分：1. 颜色修改可选 4 种颜色。如果只需要 3 种颜色，把其中 2 项设置成同一种颜色就可以了；2. 网格模型随机切换颜色选好之后点击黑色的「Randomize」，可以随机切换网格模型，得到不同的渐变效果；3. Mesh Id即网格编号，如#757。MESH·Y 一共有 1000 种网格模型，每一种都有对应的编号。如果你在随意切换网格效果的时候，发现有一款自己特别喜欢的网格，就可以记下它的编号，下次想用这个网格时，设置好颜色后直接在「Mesh Id」处输入对应的编号就可以了；4. Save 保存MESH·Y 支持导出 PNG 格式的图片，而且导出时可以自行设定图片尺寸，最大支持 3000*3000px，非常灵活。另外界面右侧有 6 款渐变模板，如果觉得其中有喜欢的可直接选用，修改一下颜色就可以了。使用技巧下面结合我们之前提到的一款选色神器 Picular 为大家展示如何快速做一张好看的渐变 Banner。色彩界的 Google！给关键词就能帮你找配色的Picular一般配色工具大多提供很多调色盘，让使用者从中找到适合自己需求的色彩，毕竟色彩有时候不容易描述。阅读文章 > 1. 确定主题和配色近来天气渐渐变暖，春天的脚步越来越近，就做一张有春天气息的 Banner 吧。提到春天，最先想到的就是生机，万物萌发，百花盛放。可以在 Picular 输入关键词「flower」，提取一组有关春天的配色。2. 制作渐变背景将配色方案运用到 MESH·Y 中，选择喜欢的渐变配色结果。（这里我用截图工具悬浮在 Picular 做好的配色方案，然后直接用 MESH·Y 吸色工具复制颜色)选几张喜欢的保存下来3. 构思排版将背景放进 AI，发现中间那张有些像青山的形象，可以延展做一个春日野营的宣传 Banner。将背景确定好，加入一些花朵蝴蝶的意象元素，确定好文案进行排版就可以了。总结网格渐变做出的渐变丰富有变化，非常适合直接拿来做背景。但是在 AI 中用网格调出好看的渐变需要一定的时间，而且对配色没有把握的小伙伴来说，调出好看的渐变配色也是一项有难度的工作。MESH·Y 中有 1000 种网格模型，可以极大的解决上面的问题，省时省力。结合快速选色工具 Picular，让渐变背景的效果更符合我们的主题，对喜欢用渐变的小伙伴来说是绝佳的设计工具。附上官方网址：「MESH·Y 官网」 https://meshgradient.in/「Picular 官网」 https://picular.co/感兴趣的朋友赶快收藏，下次设计的时候试一试吧！筛选了100个配色工具后，我挑出了这25个！UI 设计中，颜色几乎是最先被感知到的设计元素，好的色彩感知是成为一个优秀的设计师的基础，配色工具层出不穷，辞典酱在筛选了100多种配色工具后，精选了这25个，相信必然帮到你！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/mesh-y
在路上
飞翔的企鹅
张大湿
表哥
落霞与孤鹜
