图文 文字 矩形 在我刚大学毕业时，每次遇到折页设计都有点无从下手，有一次，我的总监跟我说，你可以试下先用色块将信息进行分组。这么一来，思路果然清晰了很多，后来我知道，并不是设计折页就一定要用色块，但它确实是一种高效的排版方式。与色块相对应的是线框，我把这二者统称为图文框，即可以用来插入文字或图片的排版神器，这是在版式设计中运用非常广泛的手法，大家肯定也用过，所以，今天我们就来聊聊，如何通过正确使用图文框来使你的设计变得更优秀？往期回顾：高手的平面课堂！用「线」排版必须做好的6个细节在做版式设计的时候，我们经常会用到一种元素来辅助排版——线，“线”具有区隔内容、强调信息、平衡版面、指引、组合、连接、装饰等诸多功能，能有效解决很多版式问题，但“线”的使用并没有表面上看起来那么简单，很多设计新人在用“线”排版时会出现：冗余、死板、不平衡、不美观等问题，所以，葱爷今天就来阅读文章 > 一、图文框的种类不同造型和形态的图文框，其气质以及用途也会有所差别，常用于排版的图文框有以下几种：1. 几何图文框几何图形是最简单的图文框，最常见的有矩形、圆形、椭圆形、圆角矩形等等，主要用于信息分组、信息强调。2. 异形图文框这类图文框常用于海报设计中，像一块补丁一样，把文字插入在画面中，有点拼贴艺术的感觉。3. 对话框对话框具有一定的指向性，常用于排版对话文案、海报标题、插入补充性文字等。4. 爆炸框爆炸框具有很强的视觉冲击力，以往最常用于商品价格之类的促销信息，近几年，爆炸框在海报设计中非常受欢迎，变成了一个很时尚的设计元素。5. 立体框即在平面图文框的基础上增加 3D 效果，这种图文框视觉效果更突出，而且可以加强版面的空间对比，是设计促销海报的不错选择。6. 虚线框虚线框比起线框在视觉上更精致、更可爱，如果你想用图文框进行排版，但又不想图文框很突出，或者是做与儿童相关的设计时，虚线框会是一个不错的选择。二、如何选择合适的图文框前面我们介绍了几种不同造型的图文框，但其实除了造型上的差异，图文框还有圆角和尖角、直线和曲线、填色和描边等方面的差异，我发现很多设计师经常会用错图文框，那么，该如何来选择正确的图文框呢？通常是根据视觉调性和内容的多少来选。如果想要高级、简约的效果，适合用几何形图文框，如矩形、圆形、椭圆形、拱门形等，而且一般是用描边图文框，当然描边自然不能太粗。如果想要时尚一点、酷一点，通常要用填色图文框，即我们平常所说的色块，而且图文框的轮廓最好是比较尖锐、硬朗的，比如直角矩形、平行四边形、尖角的爆炸框、像素图文框、不规则的多边形等等。当然，这类图文框的色彩搭配也很重要，通常是使用饱和度较高的对比色。如果想要视觉效果柔和一点、可爱一点，则更适合使用一些圆润、柔软的图文框，比如圆角矩形、圆形、云朵形、曲线异形等等。如果想要复古或中国风的效果，用中式、港式的图形框很容易出效果，这类图文框通常是描边图文框，或者是填色加描边双效果图文框，而且描边通常较粗。圆形、椭圆形、爆炸框之类的图文框，通常只适合文字比较少的情况，文字较多时，矩形框和异形框会比较适合。三、图文框的使用小细节图文框内的文字应该与图文框的边界保留一定的距离，通常来说，在文字是横排的情况下，文字离图文框的上下距离不得小于正文的行距，左右不得小于 1 个正文字符的宽度。当然，重点是视觉要舒适，要便于阅读，如果文字比较多、字号比较大,那么通常会排得比较满，即文字与图文框边界的距离会比较小，反之，则会比较大。如果想要视觉效果比较轻松、高级，那么图文框内的留白可以尽量多一点，比如网页和 UI 中的按钮设计通常就是这么做的。文本框内的文字排列方式，要尽量与文本框的形状相呼应，视觉上才会比较和谐，即矩形框的文字也要排成矩形，圆形框的文字要排成圆形。在下方的长图中，文字排版的轮廓形状基本都是跟所对应的图文框轮廓相呼应。四、如何避免版面变得死板?图文框内的文字尽量不要左右两端严格对齐，可以采用居中对齐或者左对齐等方式，不要把图文框塞得太满，尽量多留一点呼吸空间。给文字信息加上图文框还只是开始，如何排好框内的文字才是重点，要尽量把图文框内的排版做得精致一点。框内的文字必须有着丰富对比关系和清晰的层级关系，比如要有字号大小区分、颜色区分，可以给小标题增加小的图文框、用图文框突出某些重要词句、用线区隔信息、给信息进行分组、加一些装饰元素等等。图文框之间可以错位排版和叠加处理，不要每个图文框都严格对齐和均等分布；图文框之间也可以有大小对比、轮廓对比、方向对比、空间对比等，这样的版面才会有主次，有变化，视觉上不至于太单调。可以对图文框进行适当打破，使一部分元素或文字冲出图文框，比如把部分文字或图片元素叠加在图文框的边界处，创造出框里框外的对比效果，也可以加强版面的灵活性。注：最好不要把版面里的所有元素都放进图文框内。使用不规则图形作为图文框，或者将图文框和文字一同做旋转和扭曲，也可以有效打破传统、常规的视觉效果。结语图文框真的非常强大，结合不同的设计需求和其他设计知识，你可以创造出无限的可能，基本上可以解决大部分的设计问题，以上葱爷分享的内容只是九牛一毛，这些所谓的方法也绝对不是标准，因为设计是不存在标准的，所谓的经验和技巧只是能帮助经验不足的设计师可以更快做对、做好，如果你够强，所有的经验都可以打破。本篇来源：优设网原文地址：https://www.uisdc.com/layout-design
标题 笔画 文案 关于小黑盒的 Banner 设计，我们对非设计专业的同学有 4 点基本的视觉要求：安全区、图片清晰、Logo 规范、同一活动下各资源位视觉的统一。对于设计同学，除上述基本要求，还要向目标用户进一步传达主题、表现氛围、提升阅读体验。运营 banner 按照组件化思路拆为 4 层：背景、点缀、商品和标题。通过 4 层的分析、及替换项对比，即可找出更好的设计方案。本期分享聚焦「标题」为大家提供部分思路。标题优化可以从三方面来思考：字体选择、样式设计、层级组织。往期干货：Banner设计保姆级全方位教学！万字干货！编者注：Banner设计看似简单，实则囊括了平面设计、设计心理学、用户研究、文案设计等多领域的知识点，本文用1万2千字的超长篇幅，帮你从零开始掌握Banner设计。阅读文章 > 一、标题字体选择黑体，省略衬线装饰，笔画粗细均衡，造型简明有力，更具现代感。结合小黑盒现代简约的风格，建议优先使用黑体。此外，像思源黑体、阿里巴巴普惠体等可面向全场景使用的字体一般设计会更规范严谨、覆盖字符广，且保持着高识别度。由此以小黑盒为主的活动字体优先级参考下图，注意尾部标注的两点：版权，和笔画过粗导致的识别问题。通过叠加纹理、倾斜变形、增加光影，相同字体可以呈现出不同效果，与画面和谐。这个我们归于标题的样式设计在本文第三节会做详细阐述。当主题具有强烈的风格时，字体的选择要以主题风格为主，在没有合适字体时，需要通过笔画拼接、字体变形、原创字体达到契合主题风格的目的。如下图所示。极影毁片辉宋：为适应印刷术而出现的宋体，源远流长，传统节日使用再适合不过书法笔画拼接+叶根友离贤行书：PC 端活动，使用书法体进行大小错落排布，大屏上更具冲击力书法笔画拼接+叶根友离贤行书：以游戏方为主的强风格活动，使用灵动的书法，注意避免过于潦草导致的识别问题创意字体：黑盒设计师+1 设计，以游戏方为主的强风格活动，颇有哥特、暗黑童话的感觉二、标题样式设计推荐阅读和颜阅设的《4 个维度搞定标题文字设计》，作者汇总的 28 个实操方法，是较全面的样式设计灵感库。本文将针对这些维度进行案例补充。4个维度+28个实操方法，帮你搞定标题文字设计我们在电商海报、详情页、产品海报、电影海报等的设计中，在对标题文字设计的时候，直接选择系统字体是很快的，也是比较简单，但想要让标题文字设计得更加丰富和具有吸引力，就需要对标题文字进行设计，设计的前提就是保证标题文字易读、有效传递、具有视觉美感。阅读文章 > 上图为小黑盒的饰品交易功能区 banner，此功能为游戏玩家提供了安全易用的饰品交易平台，目前主要支持游戏 CS:GO。通过 笔画变色（高等级金色）和 笔画替换（CS:GO 玩家喜爱且与文字造型契合的爪子刀）突出了“饰品”、丰富了标题，在后续多资源位投放中复用此标题形式起到了快速统一视觉的作用。黑盒设计师可乐设计，小黑盒影视内容征稿 banner，通过 笔画模糊 和 笔画渐变 丰富了标题，烘托了活动主题“光影”的氛围。通过 色块纹理（部分笔画网点——漫画式处理）和 添加环境效果（浮雕） 丰富了标题，让标题更突出的同时、也不至于和画面太过割裂。图为黑盒虎年活动 banner，通过 图形边框（仿连环剪纸、圆形）丰富了标题。黑盒设计师胡萝卜设计，通过 色块纹理（插画中黄油曲线）平衡了标题与插画的复杂度。通过关键词 添加下划线 和 变色（背景的点缀色）丰富了标题，使标题更易读。图为小黑盒独家的永劫无间专题战报，有丰富的统计数据、可根据用户的突出数据生成专属关键词。通过 添加图形色块 和 变色 丰富标题，使 banner 更易抓住用户视线。黑盒设计师维奇设计，通过关键词 NS 变色（Switch 深入人心的红蓝手柄）处理，既丰富了标题，又加深了主题印象——NS相关活动。图为小黑盒加速器免费加速 banner，每当 TI 等大型赛事时会为用户提供免费加速服务，通过 渐变叠加 和 主体物遮挡穿插（TI 赛事的代表物冠军盾），呼应画面中层次。通过 浮雕效果（呼应手持武器的质感），丰富标题。图为小黑盒刀塔自走棋专题战报，通过 错落效果（扁平化模仿竹简的翻折），丰富画面。banner 设计需要平衡识别度与视觉性——这两个评估点都是相对而言的，要根据实际设计的风格、装饰元素以及主体物来确定复杂度。不变的标准是，标题一定要有识别度，切勿陷入盲目丰富样式的陷阱。三、标题层级组织如何从内容层面优化标题，使之一目了然？针对复杂的标题：第一步缩写、提炼文案；第二步分层、在有限的空间和技法内拉开信息对比。这就需要设计前了解用户的构成来源与运营目标，针对性做对症下药的设计。比如需要引导 IP 向用户，文案及元素设计要围绕品牌印象传达（例：多数游戏会有自己的品牌手册，在游戏宣发拉新阶段，要让用户第一眼获取对游戏的认知，建议围绕品牌手册做出精准的设计）；针对学生党，突出福利；针对游戏重度爱好者，突出画面玩法特点……运营同学提供了如左图所示的素材，当时各媒体只狼曝光度高、素材重复度高，希望在小黑盒首页推广与常用素材区分开，最好以 暖色 为主营造促销氛围、强烈突出 超史低。此时需求明确，所以和运营同学沟通后直接做了文案删改，确保超史低和价格的突出。这是一个以标题为主的 banner，通过 主体物遮挡穿插 和 关键字加色块 适当做了层次丰富。合理删除常用在分享、通知的方形小图需求中，因为尺寸极其有限，是最为凝练的地方，一般突出用户利益点。产品同学提供了如左图所示的文案、和主 kv，人物和标题复杂度都很高需要做简化处理，再次沟通后明确了目标：突出小黑盒、PUBG 的合作，同时也了解到有哪些主要奖品。首先将活动名称做了 品牌化处理，然后根据人物 视线引导 进行构图，放在了左上方，最后强调的奖品 具象化 转移至商品、点缀层，完成了头图的设计。作为小黑盒加速器的基础宣传 banner，覆盖关键信息多。左图主要问题在副标题，字重与主标题一致、5 项要素过于平均、移动端呈现字号小于 10，导致完全不具备可读性。与负责人的沟通及标签优先级方案对比后，通过 突出数字 (价格、支持游戏数的字体与间距)、标签位置亲密性调整（好评与商品图结合） 和 添加图形色块（按标签优先级做对比度区分）完成了 banner 设计。图为未来之役刚上线时，与小黑盒加速器的合作活动。左图为初版文案。由于是新游、同时自带大 IP，将他与 IP 的关系说明可以加快用户的理解，活动以黑盒内完成加速任务为主、签到送好礼并不准确。与运营同学沟通后进行了文案的调整，通过 变色 和 添加图形色块 将复杂的文案调整为三个层级。分层也有利于后期 转化模板。上图为小黑盒功能更新模板。标题分为功能名称、描述、了解更新按钮。上述简化标题方法用到了交互设计四策略中的删除、组织、转移。设计核心逻辑是利用现有手段、工具解决现存的问题，内在是相通的。用超多案例，为你详细解析简化设计经典四策略简化产品是优化用户体验的第一生产力，且是设计师值得关注的一个永恒的命题。阅读文章 > 标题的层级组织并不等于一味地简化，有时还需要进行适当的扩写、改写。比如上面小黑盒加速器与未来之役的活动案例，需要设计师以桥梁的身份拉近用户与活动的距离——帮助运营做好满足目标的合理表达。图为小黑盒加速器的宣传需求，需求很简练——“免费加速PUBG”，投放在游戏界面内。其实也需要宣传到品牌、给出完整品牌名和必要的宣传点，沟通后将文案进行了补充。在万圣节诸多游戏、平台搞活动时节，在 kv 不具备强烈品牌特色的情况下，通过提高标题优先级、文案中使用“PUBG”、“黑盒加速”能快速和其他活动区分开。写在最后banner 标题设计思路，可以分成三方面：字体选择、样式设计、层级组织。在小黑盒，一个好的 banner 设计，需要兼顾识别度、品牌感、视觉性，尽可能给玩家留下一目了然的主题和深刻的品牌印象。在发布图文的功能中，还提供了小黑盒设计团队准备的制图模板，欢迎各位小伙伴前往体验。本篇来源：优设网原文地址：https://www.uisdc.com/banner-design-4
字段 系统 组件 选择对于 B 端系统来说究竟意味着什么？如果将下图两个组件摆在设计师面前，它们唯一的差别便是 一个有着右侧的下拉箭头、一个右侧没有下拉箭头。当听到了这种解释时，我也就只能摇摇头，一方面感觉很多设计师的基础薄弱，同时又觉得需要和咱们读者来讲讲，关于选择这一大类，对于我们设计师究竟有什么意义？首先，选择类的组件对于我们来说已经非常常见，比如简单的：单选框、复选框，难一点的：级联选择、层级选择、树形选择，这些都是我们选择类组件的一个大的范围。同样的输入也是，输入通常会包含有 输入框、网址输入、特定规则输入 等多种输入方式，这些都是我们输入类组件的一个大的范围。那先来了解一下选择和输入当中的差别。往期B端设计干货：5000字干货！超全面的B端设计指南：消息通知消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？阅读文章 > 一、生活当中 输入与选择 的差别想要理解 输入与选择 的差别，我们先来理解生活当中关于输入选择的差别。举一个生活当中的例子，图片当中的这个物体是什么？我相信大家给我的回答一定不会相同。比如：有的人可能会说是它是苹果；而有些人则会说是红苹果、红富士、大苹果 等等...也就导致虽然大家说的都是苹果相关的词汇，但是这些词语往往都会存在细微的差别。那假设同样一张图片，我们提问的方式是，图片当中的物体是下列四个选项当中的哪一个？A.香蕉 B.苹果 C.西瓜 D.火龙果这时候你会发现，得到的结果大多数都是选择的「B.苹果」而上面讲到的便是我们输入和选择的一个差异，从结果上来看我们就会发现 输入要更难一些、选择则会更加的容易。这就像我们在学生时代做的卷子，选择题往往还能动动笔，而到了填空题完全就是一头雾水。二、实际项目当中的例子这种情况，在日常的工作当中，有非常多的例子，比如在一个 CRM 系统当中，我们会有一个叫做客户类型的字段。假设最开始把它设定输入框，这时候销售将二次购买的客户录入系统当中，那不同的销售录入出来的结果完全不同。销售 A：二次客户销售 B：复购客户销售 C：老客户而数据在整个系统当中非常重要，因为我们录入数据的最终目的都是在各个地方使用数据。比如在数据分析页面、数据筛选页面，由于出现了上诉提到的混乱的结果，系统的数据无法正常使用，在管理上就会出现很多问题。假设把客户类型的字段换做是选择，那这些数据就能够正常使用，并且能够在系统当中我们就能够合理的在各个页面当中利用。三、输入与选择的定义通过上面两个例子，我们会发现输入与选择的意义是完全不同的。我们就来看看，输入与选择究竟存在什么定义上的差别。1. 录入方式上的差异输入就是提供给用户进行无规则的信息录入，也就是用户想输入什么就可以进行填写。而在输入的过程当中，通常都是通过键盘的方式进行进行的数据提交，这也就意味着输入的难度较大。选择则是系统预设好的条件提供给用户进行规则的录入，并且在组件的展示当中，都是以鼠标点击的方式来进行的信息录入，它的难度更低，但是选择在系统当中是预设好的情况，也就意味着需要提前预设。如果是一个灵活的 B 端系统，就一定需要在管理后台对于预设的系统进行配置，否则整个系统就缺乏灵活性。这就是在 飞书 的管理后台系统当中，我们需要单独的配置一些自定义的信息，其中就可以定义选择录入的选项。当然为了保证系统的灵活性，我们还会为组件去设定一些小心思，就是选择录入时，底部会有自定义选择项的功能，这就叫能够保证用户都有自己想要的选项。2. 字段属性上的差异关于两个字段，其实在字段属性上也会存在不同。首先是输入类型的字段，在整个系统当中，主要针对的是：名称、手机号、地址、邮箱 等，系统本身无法规则化的字段，这时候只能采取输入的形式。而选择字段，主要是针对的字段是：类型、属性、状态 等，用户能够快速选择的字段，两者在字段设定上存在差异，因此并不相同。四、选择与输入的作用关于作用，问大家这样一个问题，你们认为在 B 端系统当中是输入更多，还是选择更多？我想看完文章过后大家都会觉得输入的限制过多、过于麻烦，因此输入在整个 B 端系统里 录入难度高、规则复杂，只会使用在少数位置来进行使用。同样的逻辑选择则会更为高频使用。字段，其实是涉及到 前台、后台的页面信息，也就造成关于字段的影响，我们不能单纯从表单一个页面来进行看待。而表单、表格、详情页本身是一个整体，这些字段的差别，会影响到后面的页面的展示。比如在表格页面当中，会什么要采取 搜索 而非 筛选？其实这就是在表单页面当中，如果选择了输入，那在检索的时候一定是 搜索的方式。那如果是选择，那在检索的时候一定是 筛选的方式。那在其他页面呢？详情页？这个咱们就不多说了。这其实就是字段的对应关系，在整个系统当中是一个链接的整体，我们在去看待组件的时候，要关注的并不只是组件的样式，而更应该在乎的是组件背后之间的关系。如果觉得文章还不错，也别忘了点赞转发~我们下篇文章，再聊~欢迎关注作者的微信公众号： CE青年Youthce本篇来源：优设网原文地址：https://www.uisdc.com/select-field
键盘 功能 表情 大家好，我是沐风。最近惊喜地发现「微信键盘」上线了 iOS 和安卓正式版。2021 年，张小龙就表示，微信要自己做一个输入法。等了两年，终于等到了。这篇文章带你从交互设计的角度，全面分析一下微信键盘。往期微信产品分析：从用户体验角度，分析微信视频号的「双赞」设计最近微信视频号上线了大拇指和爱心两个点赞，到底它们之前有何不同？阅读文章 > 一、拼写 Plus 的打开引导打开微信键盘 APP，可以看到界面的布局：顶部是功能介绍区 ，下面是各种功能设置区在功能介绍区，以显著位置展示着“开启拼写 Plus”按钮。打开这个按钮，用户可以使用智能拼写、智能推荐、表情推荐、拼写检查等很核心的功能。所以应用的设计者，十分希望用户能打开该按钮。这也是为什么在界面里，以如此显著的方式告诉用户拼写 Plus 可以帮你做什么，潜台词，“这个功能这么好用，你还不打开吗？”如果用户没有打开，在输入法的界面，点击输入法图标，也有显著的按钮。点击开启按钮，会展示开启后会上传部分输入数据，以及开启后用户能够获得的价值。开启后，再次打开面板，这个开启拼写 Plus 按钮就消失了。可以看到，整个方案里，提升拼写 Plus 的打开率，一定是一个核心的产品目标。二、表情功能我们再来看日常输入时的微信键盘界面。相比于搜狗输入法微信键盘把功能都藏得比较深，需要点击键盘 icon，才能看到各个功能。「克制」的标签可以安排上了。值得一提的是，所有功能中，对于表情，微信键盘还是很重视的，给留了个入口。点击表情，在右上角有“显示表情键”的开关打开后，在键盘右边，会展示“表情”入口，点击后有推荐表情+emoji如果关闭，发送按钮会变大。对于表情，可以说微信键盘在我们用微信的时候，会极大发挥它的威力：当我们输入的是一些短语，比如你真棒的时候，候选词中会自动出现一个“笑脸+你真棒”，点击后，出现相关的表情包。以后微信里自带的表情搜索，相信点击量会下降很多。但是，当我们输入的是一个句子，则不会出现这个笑脸。要做出这里的判断，其实不容易。用户输入什么类型的内容，应该出现这个“笑脸”来推荐表情包呢？如果是沐风来做这个功能，一定会请产品经理去后台看一下，用户在使用微信自带的表情功能，搜索的内容都有什么。然后根据这些已有的词条，制定一个规则。三、常用语和智能推荐另外想说说常用语。点击按钮，出现常用语的功能说明。这个流程设计得很好。新手引导非常自然，不突兀。这样以后输入前 3 个字，或者短语的拼音首字母，就可以快速发送。另外，当我们输入的短语，是视频号、公众号或者歌曲、电影时，会在候选词里出现“图标+候选词”的智能推荐选项。点击后会出现相应的卡片，还是很方便的。四、单手键盘的界面设计关于单手键盘，左边的功能有“左/右手模式”和“全尺寸”。这里沐风思考了一个问题：“键盘调节”按钮，是否应该像搜狗一样，放在左边的区域？这个功能更符合单手用键盘的需要，让用户可以更高效调整键盘的尺寸。但是仔细想了一下，键盘调节是一个低频功能，一般人调整好后，不会总是调整键盘的尺寸。咱们就是说，如果放上去了，让“键盘调节”总在那做冷板凳也不好不是。另外，当开始输入的时候，左边的两个功能会自动收起为 3 个点，这样可以减少对用户的干扰。点击 3 个点，会展开为两个功能。这个点做得很细了，点赞。与此类似的，还有键盘选择功能。搜狗输入法是把键盘选择放在了主界面上，点选起来虽然容易，但我想问一句：大家在日常使用中，真的会频繁改变自己的键盘吗？相信大多人会和我一样，选择了一种键盘，就不会改来改去了。但是微信键盘，是把键盘选择收起在功能面板里。虽然操作上多了一步，但确实更符合用户的使用场景。五、缺点相较于搜狗输入法，微信键盘目前对英文的支持还不是太好。比如我经常喜欢用 9 宫格，输入“hh”，就能输入“hi”，但是微信键盘目前还不支持。另外，对于人名的输入，也无法识别。估计后续一定会有「获取通讯录」功能上线，到时候这个问题可以解决。再有就是，由于使用时间的积累，搜狗目前会更懂我一些。但是这个可以接受。相信通过调教，微信键盘会随着时间的增加越来越能 get 我。六、微信键盘？最后，当我在朋友圈发了微信出了「微信键盘」之后，却发现很多人找不到。问了才发现，很多人搜索的是“”微信输入法”。这也很自然，「微信输入法」其实应该是最应该的名字。其实这并不是腾讯不想，而是目前还不能。根据腾讯公司的商标申请情况来看，应该是因为没拿下微信输入法的商标。我们知道，企业或新产品进入市场后，如果没有商标，很容易遭到侵权。微信作为一个拥有超过 12 亿用户的超级社交软件，在命名上肯定会非常谨慎。可能后期，还会改名吧。综合体验下来，沐风感到微信键盘不负众望，交互体验做得很棒，对场景的拿捏很到位。方案里各个细节考虑的也很完善。相信会对以后我们的微信聊天，提供更加丝滑的顺畅体验。以上带大家分析了微信键盘的交互设计。欢迎留言交流扫码加我微信，围观高能朋友圈：本篇来源：优设网原文地址：https://www.uisdc.com/wechat-keyboard
受访者 工具 设计师 编者按：UXtools 每年都会针对流行的设计工具进行统计，从而了解设计师是如何使用设计工具，以及哪些设计工具在过去的一年里又占据主流了，以此从侧面了解目前UX设计行业的现状。整个调研报告针对不同的设计环节、设计职能划分出不同的调研门类，其中有针对整个 UX 设计领域的，也有细分到 UI 设计或者用户测试的独立流程的。这次的设计工具调研问卷总计有 4260 份，调研对象千差万别，来自不同的国家不同规模不同类型的设计师和团队，从统计学的角度上来说，样本的数量足够多，覆盖的区域足够大，类型也相当丰富，所呈现出的结果也比较有代表性。2022年设计趋势回顾：回顾2022年，我总结了最受欢迎的 9 个平面设计趋势编者按：Confetti Design Studio 是一家来自印度的设计工作室，屡获殊荣，客户遍及世界各地。阅读文章 > 1、概况在「哪个头衔最能描述你的角色」这个项目当中，我们发现头衔命名混乱的情况依然存在，和前几年相比，UX/UI设计师 的位置上移了，似乎越来越多的设计师也同样对自己的角色感到迷惑。80% 的受访者反映他们是全职设计师。在公司规模的调查项目中，绝大多数的设计师都供职于人数超过 10 人的公司，这一点和往年保持一致。而在设计团队规模的调研当中发现，「2-10人」仍然是最典型的设计团队的人数规模。在「工作年限」的调研中，我们发现支撑起这个行业的主体依然是较为初级的设计人才，不过工作年限 10+ 的设计师依然保持有不小的比例。25% 的受访者供职于设计机构，这种环境下各种需求可能会促使他们不断探索和发掘不同的设计工具。大概有40%的受访者处于团队领导职位，他们倾向于为团队选取并决定使用什么样的工具。有意思的地方在于，处于领导地位的受访者不一定有权做出采购决策，往往决定是否购买软件的，另有其人。虽然时常有人认为移动端 APP 华而不实，但是绝大多数的团队和设计师都致力于开发移动端 APP 和 web APP。绝大多数的设计师和团队依然选择在 Mac 上做设计。不过，Windows 平台的用户比例从去年的 15%上升到今年的 27%，这应该和越来越多设计工具基于浏览器研发有关系。在工作状态的调研当中，虽然雇主们一直在推动大家「重返办公室」，但是远程工作依然占据主流。2、界面设计93% 的受访者都在使用 UI 设计软件，而绝大多数不做 UI 设计的受访者，都是和 UX 相关的职业（比如产品经理，工程师，平面设计师等）。Figma 处于统治地位一点都不令人意外，而今年 Ai 和 Ps 在几乎所有的门类当中，位置都明显下调了，处于次要地位，他们之所以依然存在，很大程度上是因为他们依然具有一些 Figma 无法取代的编辑功能。从付费购买的数据来看，Figma 确实不算虚高，虽然免费用户是存在的，但是他们并没有大幅拉高 Figma 的实际占比。Lunacy 其实是一款免费工具，部分被调研用户可能将其和同一公司的另一付费软件弄混了。在使用操作系统这一选项当中，由于受访者会优先填写操作系统而非特定的工具，这让我们对于整个生态有了一个大致的了解。而这个基于时间的设计工具调研则清晰地反映出 Figma 崛起的过程。Adobe XD 在今年之前增长都很缓慢，最后的下跌可能和 Figma 被收购有关系。3、基础原型设计基础的原型设计和 UI 的交叉度很高，在数据上和 UI 设计的数据高度类似。91% 的受访者直接用 Figam 制作原型，还有 21%的受访者使用的是 Sketch + InVision 的组合来设计原型，这个组合在几年前还是非常流行的。许多受访者使用 ProtoPie ，他们从中获得不少价值。这里的 Code 指的是自己使用代码编写的工具来替代专门的软件。4、高级原型设计高级原型设计通常会利用逻辑和变量以及其他数据动态输入，借此制作逼真的原型。大概有 5% 的受访者不确定他们是否制作过高级原型。这个是今年新加入的调研内容。87% 的受访者使用 ProtoPie 来制作高级原型。值得注意的是，2021 年以来使用自己写的代码来制作原型的设计师比例从 7.7% 上升到了 12.5%。5、白板工具数字白板工具是前两年随着疫情而开始崛起的工具。Figma 和 FigJam 两者结合共同主导了白板设计的领域，但是 Miro、Mural 和 Whimsical 依然是强有力的替代者。之前这些白板工具仅仅只是看起来有用的工具，但是随着疫情的发展，它们已经成为了日常协同工具中不可或缺的部分，而且正如我们所看到的，它们当中绝大多数都是由雇主购买给设计师使用。虽然每种工具都会被远程使用或者个人使用、混合使用，但是我们注意到，Mural 被混合使用的比例最高。6、设计系统设计系统有助于维持设计元素的交互、视觉样式的统一性，不过我们认为设计系统还没有抵达它真正意义上的「拐点」，所以每年我们对它仅仅是维持观察的状态。有大概 471 名受访者会使用软件以外的东西来管理他们的设计系统，到底为什么，以及如何维系，这都是值得后续观察的问题。Figma 可能是设计系统的起点，但是绝对不是终点。有一部分设计师在使用 Notion 和 Confluence 这样的百科类的工具，但是很少有人会使用代码工具。绝大多数的管理工具依然是团队和公司支付。在这些流行的工具当中，来自大公司的受访者似乎更有可能使用 Zeroheight 或者 Sketch 来管理设计系统。大公司有时候会有更加严格的工具审核流程。7、用户测试用户测试所用到的软件，会尽量让真实的人参与到原型、概念设计、调查研究 和真实的产品体验当中来。56% 的受访者会使用软件来协助进行用户测试，这个数据和去年几乎是完全一致的。Maze 是最受欢迎的用户测试工具。值得注意的是，在使用软件进行用户测试的人当中，大概有 三分之一 正在使用网络会议工具（Zoom、Google Meet 和 Microsoft Teams ）来进行用户调研。去年我们注意到很多设计师和团队不进行用户测试，所以在今年的调研当中，我们加入了这个问题：「为什么不进行用户测试」。我们注意到，团队内不进行用户测试的受访者当中，大多带有「UX」和「产品设计师」的标签。剩余不做用户调研的人头衔就千奇百怪了。喜欢面对面进行用户测试的团队，更有可能会选择 Google Meet 和 Microsoft Teams。在混合工作环境中，他们更倾向于使用 Lookback。8、作品集作品集工具可以帮助设计师建立个人网站来展示自己的项目。我们注意到，22% 的受访者没有自己的作品集网站，20% 的受访者使用 PDF、PPT 或者其他的静态媒体来呈现他们的作品集。14% 的受访者会自己使用代码来构建自己的作品集。webflow 是目前最受欢迎的作品集搭建工具。使用代码来构建作品集的，大多是有超过 10 年工作经验的老手，而仅有1-2 年工作经验的设计师，则倾向于使用 Notion 来构建作品集。9、主要工具下面汇总了每个类别下，使用率前三的设计工具：10、2023预测每次调研的最后，我们都会询问设计师他们在接下来的一年最感兴趣的工具是什么，通过这种方式我们可以大概了解用户的偏好。其中 Figma 毫不意外地排到了第一。但是更有意思的地方在于，有 111 个受访的设计师同时写下了 Adobe 和 Figma，可见大家对于这俩合体之后能走多远，充满了好奇心。 文件名 如何下载使用 文件大小 提取码 下载来源 UXtools报告完整版6.4Mfrwf 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/uxtools-2022-survey
手势 组合 功能 我们将常规的基础通用手势进行打散重组、结合实践案例梳理出组合手势设计模型，探索如何在视频场景中构建便捷高效的进阶手势体验。手势设计干货：超多案例！交互手势全解析（三）：多指类和组合类多指类手势之前的文章讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 按下次数、 阈值类型等。阅读文章 > 一、前言视频播放器中承载着极其丰富的内容画面和播控功能，尤其是在寸土寸金的移动端视频播放器中，为使内容更沉浸消费，需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下，合理的手势设计不但可为界面“减负”，还可帮助用户更快捷触达功能、提升操控便捷性。视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知，如「单击 暂停」、「双击点赞」、「长按快进」、「横滑导航」、「纵滑切视频」、「双指捏合缩放视窗」等通用手势。那么如何在保留用户对于常规通用手势认知的基础上，进一步对视频场景中的手势交互进行扩容升级？这也是我们接下来在手势进阶交互上的重点探索方向。本次针对百度 APP 中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。二、什么是「组合手势」「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1 交互信号 step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。「组合手势」触发一般可分为三个阶段：step1 交互信号step2意图识别step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。三、「长按组合手势」激活快捷菜单1. 项目背景百度 APP 视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达 10 余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。2. 竞品调研及选型通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。选型 A「长按触发独立播控面板」：通过长按手势可激活从屏幕底部弹出的独立播控面板，此方案扩展性较强，但对视频沉浸观感体验有一定的打断感；选型 B「长按触发浮层播控选项」：通过长按手势可触发置于视窗上层的浮层选项入口，一定程度上可延续视频观看的沉浸体验，但浮层扩展性有限；选型 C「长按触发特定播控功能」：通过长按手势触发特定的某个播控功能（如长按“快进”），一定程度上可满足此功能的重度用户，但对于长按手势的使用效率较低；3. 设计方案① 长按手势交互扩容针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型 B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：step1：以“长按手势”创建一个新模式，即发出交互信号并唤出浮层菜单；step2：若用户未松开手指，则系统默认开始识别用户意图，是否有以“拖拽手势”滑选至目标功能项以选择功能；step3：用户滑选锚定至目标功能后，松手释放即可完成最后的功能执行确认。「长按+向上滑选」快捷触发对应功能项；「长按+向下滑选」快捷触发“快进”（一定程度上兼容老用户对于此功能的使用习惯）。② 容错性兼容在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。③ 易用性打磨差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在 DEMO 开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了 10+名不同年龄段的目标用户进行访谈测试。测试访谈的过程中，被测用户在进行 1 至 2 次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。扩展触发热区：考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底 bar 框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。支持跟手触发：长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。实时提示及响应反馈：灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。方案上线及验证以 AB 实验对本次设计方案进行定量测试验证：「对照组」效果：长按触发“快进”（各播控功能入口仍归置于基础菜单面板之中）；「实验组」效果：长按触发“快捷菜单”选项（支持滑选和点选模式）；小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。二期扩展方案随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。四、「组合手势」拓展探索手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。1.「右滑返回手势」激活“小窗播放”“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。2.「双指手势」激活“满屏播放”“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。五、结语便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。本篇来源：优设网原文地址：https://www.uisdc.com/baidu-video-gestures-design
指标 度量 维度 如何从 0 到 1 搭建一套适合产品发展的体验度量指标模型？ 本文将分析产品阶段、业务属性、取数方式对于指标模型的影响，以及该如何拆分细化指标。搭建一套合适的体验度量模型，不仅能帮我们将“用户体验”这个概念具象化，用一套分数体系来衡量一段时间内的体验质量变化，更能将定性定量的数据结合起来，指导我们针对关键问题进行优化迭代。下面就结合往期经验，和大家聊一聊在实际项目中，如何从 0 到 1 建设体验指标模型。更多体验设计模型：设计高手都在用的双钻模型和5E体验模型，看完这篇立刻学会！编者按：设计模型中最常见的2个：双钻模型和5E体验模型，看完这篇帮你掌握！阅读文章 > 一、产品阶段与体验度量第一步我们应该审视自己产品的发展阶段，这是为了确定整个体验度量项目的宏观目标。对于不同阶段的产品而言，发展策略和目标的差异会很大。一般来说，各类型产品都会经历下图所示的几个阶段。随着自身的发展、竞争环境的变化，从启动逐渐走向成熟，进而寻求更大突破。因此，用户度量的目标也会随之变化。1. 冷启动 — 探索期业务目标：功能快速上线，用户数量快速增长；体验目标：无需过多指标，借机推进简单的用户调研，以发现定性问题为主要目的；具体举措：利用现有资源让项目上线并正常运转。快速上线不重体验，快速接触用户，验证产品价值，探索产品定位及发展方向，在产品体验上不必花费太多精力。2. 深耕期 — 打磨期业务目标：用户体量逐渐增加，功能趋近完善，追齐主流竞品；体验目标：逐渐完善指标体系，埋点取数准备，以长期客观数据监测为主；具体举措：基于确定的方向深挖，打造产品壁垒。体验问题走查，优化遗留问题。3. 突破期业务目标：用户增长逐渐见顶，寻找新的突破点；体验目标：在原有指标体系基础上，通过长期的体验数据洞察趋势变化；具体举措：成立专项研究小组，团队模块分工，深入分析，细化人群，挖掘用户潜在需求。二、业务类型与维度选取确定了整体的方向，下一步进行度量维度的选取。那究竟哪些维度是适合自身产品的呢？上图列举了常见的维度，主要分为三类：用户主观感受、用户客观行为、产品系统表现。选取具体体验维度也跟产品的业务属性息息相关，B 端和 C 端产品的侧重点并不相同。1. B 端产品代表维度：任务效率、一致性、易用性、性能工具类产品较多，重视核心流程的任务效率。需要的是既快又好，容易理解，操作简单，流程顺畅。一致性有利于降低认知成本，易用性有助于提高工作效率，性能更是保障一切的基础。2. C 端产品代表维度：满意度、净推荐值、忠诚度同类型产品的核心功能相近，因此产品的差异化吸引力相对更加重要。用户的态度就更需要被重视。当然核心流程的转化率、经营性指标也很关键，但这些业务指标受到的波动因素也很多，对于长期的用户体验提升而言，参考价值不大。三、常用取数方式确定了一级维度，我们需要从更加落地的角度去选取合适的取数方式，这里介绍两类较为常见的取数方式。1. 用户主动反馈这种方式更容易获得定性的数据，也就是上面提到的用户主观感受，但需要定期投入较大的人力成本，比如每个月投放一次问卷或每个季度实施一轮用户访谈，以及后期的问题归纳梳理等。这种方式更适用于发现、定位问题，只要在做访谈或者问卷调研时，对问题再进行细节上的追问，很容易找到问题的原因，以及解决的切入点。2. 后台系统记录这种方式更适合获得长期的定量数据，短期内可能无法精准定位问题，需要不断下钻。并且对于波动较大的指标，很难确定合适的标准值范围。因此，这种方式前期投入的数据开发成本较多，但一旦数据趋于稳定，后期维护成本较低，能够起到实时监测作用。在出现异常数据时，能够及时预警，便于问题排查。很多产品在发展初期，并没有为系统化监测做准备，所以很多后台数据是不完善的。比如性能数据，一般都是研发工程师关注的。而任务效率可能需要做相应的埋点开发，短期内可能难以看到成效。因此，一期体验度量项目，大都以获取用户主观数据为主。通过实施 2-3 轮细致的用户访谈和更大样本量的问卷调研，来获取满意度和易用性的主观数据。同时，也能获得较为详细的问题列表，定位较为常见的用户问题。而在后台取数方面，针对任务效率、性能等维度，也会逐步开始数据的后台开发、补充埋点等。在二期、三期的项目里，再实现系统化的体验管理。四、细项指标选取度量模型的框架已经基本构建完成，那接下来又该如何在框架上补充细节，选取二级、三级指标呢？下面介绍三类较为通用的选取逻辑。1. 按照用户使用流程划分任务效率需要把用户使用的流程环节拆解。比如线上购物可以拆分为：搜索商品、浏览商详页、加入购物车、下单结算、支付、确认收货、评价这些环节；2. 按照页面功能模块划分完整性需要把核心页面进行拆解。如首页可以拆分为搜索、频道区、运营位、秒杀区、直播区、推荐榜单、推荐商品等模块；3. 直接看整体，不再细分在详细指标并不是特别完善的情况下，也可以看产品的整体情况。如性能，可以看整体 APP 的冷启动耗时、热启动耗时、崩溃率、页面卡顿率等指标。五、如何计算分数现在，体验度量的项目已经完成了一大半，剩下的就是统一“度量衡”，进行算分了。在这么一个综合的体验度量体系中，每一个维度、每一项指标都有不同的单位。随便举几个例子，任务耗时单位为秒，首屏耗时的单位为毫秒，参与度维度下人均访问频次的单位为次/人日，完整性的维度又以%来计算……如何用一把标尺来衡量这些天差地别的指标呢？1. 换算百分制像满意度、易用性这类指标，本身就是按照百分制/十分制或其他分数制度来打分的，简单来说就是这些指标有一个明确标准的满分。这些指标的换算相对较为简单，可以将它们统一换算为百分制。2. 设定标准值另一类指标则没有固定的标准，比如性能下的各个指标，首页加载耗时多久视为满分？崩溃率降到多低视为满分？这些指标通常需要各方沟通讨论，确定标准值（最低分和最高分），再计算当前值在这两个值之间的百分序列。换句话说，就是把标准值之间的数切割成 100 份，看看当前这个周期的平均值落在 100 份里的哪个位置。那怎么确定合适的门槛值和目标值呢？有些数据我们可以参考行业的标准，像性能指标就可以参考 google chrome 的一些标准（加载时长、交互性、视觉稳定性都有较为详细的指标）。如果没有任何参考，则建议选取产品自身较长时间周期的数据，因为短期的数据往往波动较大，很难准确定义标准值。通过计算周期中位数和标准差，将上一个时间周期的标准值作为现阶段的参考，就可以将波动范围进一步缩小。在实际项目里，我们又发现了另一个问题，起步分值定得太低了，即使达到了门槛，也可能只有 20 几分。所以，我们在后期将门槛值对应的分数调整为 60 分。当然，多制定几个标准值，也能在一定程度上，更加精准地统计分数。比如，门槛值=60 分，目标值=80 分，挑战值=100 分。六、常见问题及相关参考Q：为什么要做体验度量？业界有哪些较为成熟的体验度量模型？A：看这篇：如何做好用户体验度量？京东设计师总结了五个步骤！体验度量是什么？阅读文章 > 以上，大致梳理了搭建数据指标的几个重要步骤，希望对大家有所帮助！欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/experience-index-model
颜色 色彩 亮度 本文分享个人搭建青云 QingCloud 可视化色彩体系过程中的一些经验。（阅读此文需要一定的色彩空间知识作为基础，否则有些难啃）基础科普：如何4步建立系统级色彩体系？来看京东高手的方法！色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。阅读文章 > 一、前言1. 背景目前平台上使用了三套组件库 A、B、C，A 是最原始的组件库，基于此扩展了 B 组件库，并对颜色进行了改进，C 是全新的组件库，引用了 Token 及其他新的前端技术栈。三套组件库独立存在，应用在庞大的云平台各个业务产品中，发展趋势为使用 C 组件库开发日后新的业务，并逐步替换老的业务。关于颜色，B 组件库采用 HSB 色彩空间调色并进行人工调整，C 组件库沿用 B 组件库的色板并对部分颜色进行了优化。关于可视化组件，平台使用第三方开源图表库 Echarts 进行简单定制化。目前的需求是基于 Echarts 系统化定制出一套图表类型较全面、交互较统一、使用规范较明确的可视化组件库。因此，确定一套可视化颜色系统成为当务之急，经过简单的调研得出两套解决方案：方案一：沿用组件库 C 的颜色；方案二：基于适用于可视化场景的色彩空间确定一套全新的颜色。不难判断的是，采用方案一，要面临的问题就是：色彩空间落后，不适用于可视化场景；大量人工调整，无法满足日后自动化交付场景所需；相关算法及推导过程丢失，设计侧无法进行科学化、可持续化迭代。且在调研过程中我们发现，可视化色彩与设计系统色彩并无必要的理由进行捆绑：一方面，可视化场景对色彩的要求要远高于设计系统组件库，因其主要通过颜色来识别数据差异，所以，对颜色的亮度、对比度、色差、和谐度等要求非常高；另一方面，可视化组件库的适用产品类型通常是多种多样的，夸张点讲就是任何类型的产品中都可能会用到可视化。这一点就需要可视化组件库拥有很强的风格兼容性，这就导致了其颜色必须兼容性强，并非随便拿一套设计系统色彩过来就能满足的；设计系统中的颜色使用场景与可视化中的颜色使用场景不同，这就导致很多已经成型的设计系统色彩从设计之初的（设计目标）就不适合拿来做可视化设计；再向底层去挖掘，很多设计系统的色彩空间不适合可视化场景，这会导致相关扩展色板的推导流程甚至主题演变流程变得异常困难。最终，我们采用了方案二，也就有了接下来要发生的事情。但在开始之前，我们需要想清楚几个问题。2. 理想的可视化色彩特点是什么？看待这个问题，其实我们要搞清楚的是可视化场景对颜色的要求是什么？① 保证同色相或不同色相之间的辨识度与色差是基本要求可以毫不夸张的说，可视化系统就是一个色彩系统，无论多么复杂花样繁多的图表，都要依靠颜色去表达。而在众多表达手法中，颜色与颜色之间的对比是最常使用的。② 颜色所传达出来的感觉要准确众所周知，颜色不仅仅能表达人类的情绪，如热闹、喜庆、冷淡、沉稳。还能表达事物的特征，如温度冷暖、海拔高低、数据升降。③ 充分考虑色盲色弱等视障群体的使用体验我们在产品设计过程中经常会提到无障碍设计，也通常会在设计系统中对颜色对比度、字体大小等做一些验证，也会充分考虑用户设备情况及产品使用环境做一些针对性设计。在可视化设计中，这些验证是相通的。④ 颜色的生成、演变与应用是动态的前面我们提到过，无论是产品迭代还是纯视觉升级亦或产品交付自动化，从技术架构到颜色算法在设计之初都要充分考虑扩展性。以至于在可视化设计中，色环的确定、色板的生成、色彩的搭配、色序的应用等都要保证有理有据且灵活可变，充分兼容复杂极端场景。注意，颜色算法是指通过大量实践、总结和优化，可以用来相对科学的批量的解决符合一定规律或映射关系的场景问题的一种途径，其产出相对理性过程也相对高效，是做后续颜色优化工作的基础，可以大大降低人为干预的几率，而非一成不变的去应用。⑤ 颜色搭配要符合产品调性，是品牌的延续可视化的应用场景非常广泛，从国家生产总值到个人收支明细，大到政务系统小到记账 App，都有其载体风格调性，如中立、活泼、科技等，均不能脱离于“品牌”而设计。⑥ 保证颜色的美观性回到设计本身，也是设计本质---美，还是要保证的。3. 传统的色彩空间弊端是什么？我们先来简单看一下使用传统的色彩空间是如何配色的。此处受 @lemonoO 的启发最初，互联网上的产品形态比较简单，对颜色的定义仅仅局限于红、黄、蓝、绿四个语义色上，用来模拟表达成功、失败等情绪。在此之上，手动扩展几个相对深与浅的颜色用于如按钮 Hover、Active 状态。颜色之间依靠一些配色工具在色盘上根据对比色、互补色等原理进行搭配。随着互联网的飞速发展，互联网产品的形态逐渐复杂，组件也日趋完善，人们不断探索能够满足更多使用场景的配色方案，定义相对完善的色彩体系。于是，Tint&Shade 扩展色阶的方案就出现了。该方案通过定义基准色后分别向深浅两个方向叠加不同不透明度的黑色与白色来生成色阶，达到扩展基础色板的目的，典型的工具如 Tint and Shade Generator。后来人们发现，这种方案虽然简单粗暴，但依靠叠加不同量黑色与白色生成的色阶存在一些问题或不满足使用场景，如首尾丢色严重，无法通过色相偏移的方式制造冷暖效果等。于是，基于更符合人类认知的色彩空间如 HSB、HSL 生成色阶法就诞生了，并成为至今使用范围最广的方案。以 HSL 为例，该方案通过将颜色定义为符合人类认知的三个变量：色相、饱和度、亮度，分别进行控制并灵活调配，如固定饱和度与亮度，在色环上通过改变色相生成基础色。或固定色相与饱和度，通过调整亮度生成色阶。就如同人类科技发展史一样，人们总是在发现问题解决问题和改进方案。如下图所示，这种符合人类认知习惯的色彩空间搭配出来的颜色，其数值亮度并不是与人眼感知亮度相通的，这注定需要人为介入来改变局面。以至于依靠这种方法生成的色彩阶梯肉眼可见的过渡不均匀，且同阶梯不同颜色间差异过大。于是乎，这里调一下亮度，那里调一下饱和度，经过不懈的努力花费了巨大的成本终于得到了满意的效果，然后发现整个色板参数完全失控了。推导经验无法复用，色板升级只能肉眼调，主题定制纯靠研发批量替换......至此，人们发现，传统的色彩空间配色方案弊端主要体现在无法科学准确的表达颜色亮度上，也终于意识到，计算机对颜色的识别和处理是线性和对称的，而人眼对色彩的感知是非线性和不均匀的。简单的例子就是红色比蓝色亮（刺眼），绿色比红色亮（刺眼）。所以，这些基于 RGB 色彩空间扩展出来的配色工具或空间（HSB、HSL 等）终究是要被取代的，这也正式促使了 感知均匀色彩空间 的诞生。由 CIE 组织（国际照明委员会）于 1976 年提出，理论上可以覆盖人眼所能识别的所有色彩，其颜色总量远大于传统色彩空间，最大的特性就是数值变化均匀则颜色变化均匀，亮度亦如此，人们终于可以客观的依据数值来判定颜色了。虽并非完全意义上的感知均匀，但相比传统色彩空间已是质的飞跃。完整介绍可参考《基础概念》篇，这里不做赘述。4. 为何选取感知均匀的色彩空间？很多可视化产品都在推荐使用人眼感知均匀的色彩空间来搭建可视化色彩系统，不断强调感知亮度均匀，但并没有告诉大家为什么。首先，这里需要强调的是，我们所追求的感知亮度均匀更贴切的说法应该是追求亮度的准确表达。表达是否准确就像建房子一样，砖是墙的基础，墙美不美观稳不稳定，取决于每一块砖的大小是否标准，而衡量这个标准的前提是砖的长宽高都是可被衡量的。与之对应的，色板是否“美观与稳定”，取决于每一个颜色是否标准，而衡量这个标准的前提是颜色的每个指标都是可被衡量的。图片源自网络，侵权请联系基于这个前提，我们就可以顺利地构建出一个可被衡量且变化均匀的全量色板。其次，区别于设计系统的是，可视化场景需要基于全量色板按照特定的规则扩展出不同类型的色板，如分类色板、发散色板等，而亮度又是这些特定规则中的重要指标。因此，一个可被衡量且感知变化均匀的全量色板何尝不是可视化设计的最佳选择呢？再其次，我们反向思考一下，如果将感知不均匀的色彩空间应用在可视化场景里会发生什么呢？下面是一个描述美国各地雨水蒸发量的案例，可以非常明显的观察到一条分界线将整张地图一分为二，这很容易让人在解读数据时发生误判---分界线两侧数值发生了巨大的变化。作者：Robert Kosara，查看 原文。而通过观察其图例上的数值后发现并非如此，分界线两侧的颜色所代表的数值区间差均为 0.09，与其他颜色并无差异。这正是由于分界线两侧的颜色感知亮度有较大差异，以及不同色调之间过渡不均匀所导致的。通过这个案例我们可以看出来，很多对数据精度要求高的场景（如气象预测），在分析数据时，需要遵循一个很重要的原则就是保证颜色的客观性，降低颜色对数据分析结果的影响，降低解读数据时数值变化量误差（对应色彩变化量）。最后，总结一下，使用感知均匀的色彩空间可以让我们收获什么？它可以让设计师真正拥有明辨色彩是非的能力。在看似复杂的全量色板上客观、有依据的挑选合适的颜色（通过数值判断颜色是否合适而非阶梯判断），用以表达明暗、冷暖关系（如发散色板的构建），构建贴近工程化理念的配色方案（如动态顺序色板的构建）等。5. 如何选取感知均匀的色彩空间？在众多感知均匀的色彩空间中，选取适合我们的色彩空间需要满足以下几个基本条件：易于操作，最好是有成熟的工具或算法可以用来深入了解对比；颜色变量易于理解，最好能够像 HSL 等空间一样符合人类认知；可生成自定义数量的阶梯，且每个阶梯的亮度可以自由把控。① CIE 系列基于这些基本条件，我们首先排除了 CIELab（CIELuv 与之类似），其色彩空间由 L（感知亮度）、a（红绿通道）、b（蓝黄通道） 三个变量构成。L 变量是相对可控的，但 a、b 变量不符合人类的认知，类似于 RGB 调色板一样，不同的颜色是通过改变 a、b 变量中的红绿与蓝黄的量而得出的。但也不排除使用该色彩空间配色的可能，观赏一下。而 CIELch 是 CIELab 的极坐标转换，通过易于理解的 L（感知亮度）、C（色度，可简单理解为饱和度）、H（色相）三个变量来形容颜色。同时，生态也比较完善，有多种工具可以不同程度的帮助我们生成色阶，作为保留方案。② OK 系列OKLab、OKLch 针对 CIE 系列空间做了进一步优化，纠正了色相偏移（阿布尼效应）与色度对感知亮度的影响（亥姆霍兹-科尔劳施效应）。但这类色彩空间目前还处于早期阶段，生态不完善，兼容的场景也很少，仅有的工具也只能作为调色器（如这个工具 OKLch-Picker）使用。此外，在该色彩空间内，固定色相与色度的同时可覆盖的亮度区间要小于 CIE 系列色彩空间，超出限定区间的颜色又无法在 sRGB 色域内甚至任何设备上正常显示，用于生成色阶非常局限。所以，放弃之。无论使用任何色彩空间进行调色，我们最终都要保证所有颜色均能在 sRGB 色域内正常显示，这是底线。比如你使用了 P3 色域中的颜色，则会有部分用户的设备无法显示并自动取 sRGB 色域中相似的颜色来呈现，从而影响你的设计交付效果。③ HCTHCT 色彩空间是谷歌在 Material Design 3.0 中推出的新方案，基于 CAM16 色彩空间与 CIELab 色彩空间进行了优化，通过 H（色相）、C（色度）、T（光度，源自 CIELab 中的 L） 三个变量描述颜色。官方提供了在线配色工具，但使用该工具生成的黄色显脏，可用色阶少，且无法自定义色阶，许多颜色在色阶两端有丢色偏色的现象。但好在开源，我们可以借助其算法通过在代码中自定义 T 的数量及数值模拟我们想要的效果。单看生成的色阶效果其实还不错，也能够满足基本的使用需求。代码源自：Jony，查看 原文。import { argbFromHex, TonalPalette } from "@material/material-color-utilities";// 定义 tone 梯度const TONE_ARR = [0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 94, 97, 100];const createTonalPalette = (hex) => {// 将 hex 格式颜色转化为 argb 格式const argb = argbFromHex(hex);// 创建 paletteconst palette = TonalPalette.fromInt(argb);// 在 palette 上取一组 tone 梯度对应的颜色数组const colorArr = TONE_ARR.map((t) => hexFromArgb(palette.tone(t)));return colorArr;};其感知亮度变化也是相对均匀的（PS 灰度模式效果）。大家可能在很多教程里都看到过使用灰度模式（用词精确，非黑白模式）来模拟感知亮度变化。首先需要申明的是：在 PS 里，有一个图层叠加模式叫“明度”，在 Figma 里叫 Luminosity，总之使用这种方式来模拟的效果都是不准确的，推荐使用 PS 中的灰度模式来模拟，或者直接打印出来查看效果。那为何使用灰度模式来模拟呢？（这个问题并未找到科学靠谱的答案，属于猜测）相信大家在初次接触美术时都学过素描，通过简单的黑白灰来表达一个物体的光影、层次关系，而色彩会有很明显的情绪传达。所以，要想表达人眼对色彩亮度的感觉，是不是去掉“色彩”会相对客观一些呢？基于该结论，我们还会发现这种方式除了可以用来模拟感知亮度变化以外，还可以用来体现明暗关系（如视障用户无法顺利通过颜色辨别图形时可以依靠明暗对比来辨别），以及用来还原打印效果（打印数据图表分析数据）等。但有一个非常让人难受的缺陷：默认情况下 Key Color（或主题色）很可能会不存在于生成的色阶中，这就意味着需要不断去尝试取 Key Color 相邻的色值让其存在于色阶中，或者通过定义无限多的 T 数量及数值让其显露出来，这显然不符合我们“易于操作”的要求，放弃之。④ 结论其他调研细节就不在这里啰嗦了，总之，我们最终选择了 CIELch 色彩空间。至此，需要铺垫的内容也就告一段落了，接下来我们通过实战来看一下如何推导一套可视化色彩体系。二、全量色板推导整个色彩体系之前，我们已知的条件就是一个主题色。基于青云 QingCloud 品牌 VI 中定义的主题色，我们将其进行一个简单的色彩演变，降低饱和度的同时微调亮度使其更加适用于互联网产品但不脱离我们中立沉稳的品牌调性。这里需要注意，在做色彩空间转换时，尽量保证精确度，从而提升后期颜色推导的精确度。1. 基础 10 色① 24 基色基于 RGB 色彩空间，我们首先需要绘制一个标准色盘。通过正色取值法，以正红色为基准，间隔 15 取色，中间会覆盖正蓝（210）、正青（180）等颜色，得到一个标准的 24 基色。当然，这些颜色并不能直接拿来使用。与正色取值法对应的是主色取值法，以主题色色相为基准间隔 15 取色，得到一个色相偏移的 24 基色。但经过尝试，我们发现，该方案由于主题色色相的不确定性（经验复用时会发生），很有可能导致取出来的颜色“不当不正”，做颜色矫正的成本较高。② 8 基色基于生成的 24 基色，我们选取人眼最容易识别且符合人类认知的 8 个基准色：红、橙、黄、绿、青、蓝、紫、粉。这里取色的过程可以根据自己产品的调性对部分颜色特殊处理，如我们取的粉色就相对沉稳一些。③ 色相矫正虽然现在生成了 8 个基准色，但仍然不能直接使用。此时，我们需要结合一些条件对色相进行偏移。首先是保证视觉舒适度，如黄色、青色过于刺眼；其次是基准色之间要肉眼可区分；最后是生成的梯度色板之间也要肉眼可区分（如我们的主题色与绿、青基准色经过感知均匀的色彩空间转换后生成的梯度色板十分接近）。以上矫正过程需要结合后续的推导结果不断循环往复来回调整，直至符合要求。④ 色彩矫正前面我们花了很多篇幅介绍色彩空间，在这一步才真正得以体现。我们先将颜色转换至感知均匀的色彩空间，方便后续对色彩进行处理。转换至感知均匀的色彩空间后，我们根据主题色的感知亮度将其他颜色也设为一致，这是体现整个可视化色彩体系贴近品牌调性的关键步骤，因为我们会拿这些基色去生成全量色板。大家可能发现我们在这个过程中选用了 HCT 色彩空间进行转换（不是打脸哦），因其调色器工具能自动根据感知亮度调整色度致使各个颜色都保持和谐。当然，你也可以使用其他感知均匀的色彩空间来做转换，差异不大。此外，大家可能还会有疑问，黄色和橙色怎么像一样？为什么还放在这里？因为在真实使用场景中，色板里的颜色并不一定都能被使用到，这是其一。其二，颜色长的丑并不能否定它作为我们生成色阶的基准色。（后面的推导流程推翻了这个结论，但仍不能否定它存在于色板中）三步变化效果。⑤ 生成中性基色常用的中性色大家都知道有中性中性色和冷调中性色，结合品牌调性我们选用了冷调中性色。基于蓝色我们可以通过降低色度的方式扩展出中性基色。这里的中性色比较特殊，仅适用于图表图形中用以中和色调，而非用于文字、填充、轴线等场景的全局中性色。⑥ 相对亮度验证通过上面的步骤，我们得到了感知均匀的 10 个基色，我们使用 Chroma.js 中的相对亮度计算工具验证一下，方便我们基于这些基准色扩展色阶。这里引入了新的概念“相对亮度”，可以查看 W3C 相对亮度 的计算公式和 维基百科 对其的定义。大概可以理解为感知亮度的另一种表达，任意两个颜色的相对亮度值一致说明其感知亮度（HCT 中的 T 或 CIELab 中的 L）值也是一致的。白色为 1，黑色为 0。当然这里我们其实是无需验证的，因为在色彩矫正步骤 2.1.4 里已经基于 HCT 色彩空间将 T 设为一致了，那其相对亮度值也是一致的。我们验证的目的是为了配合后文会提到的 Chroma.js 工具及相对亮度等差数列生成色阶。2. 完整色阶首先需要判断一下需要多少个阶梯，通常情况下的阶梯有 7、9、11、13 几种，大家根据自己的需要选择。我们选择了 13 阶梯，一方面可以使色阶过渡细腻一些，另一方面也可以让取色范围更广一些。其次，谈起色阶就不得不说一下插值。插值的目的是为了获取一个有规律的亮度变化曲线，使色阶过渡均匀。通常的做法就是固定首尾两个点，通过一些算法或工具生成对应的贝塞尔曲线，也可以使用简单的等差数列来完成。而感知均匀的色彩空间有一个很大的特征就是：它的色彩空间是三维且不规则的，固定 L、C、H 三个变量并从中“切一片”下来放进二维平面中观察，你会发现它的形状是不规则的。固定其中任意两个变量改变第三个变量时，都会影响这个二维平面的形状，三者互相影响。这里有点儿考验大家的立体几何想象能力。这就意味着，不管你的亮度曲线是等差数列还是各种高大上的贝塞尔曲线，当你把曲线套进色彩空间中 360 旋转切换色相生成色阶时，曲线中的某些点说不定会跑出整个三维色彩空间。这就需要联动色度及色相一起做各种矫正工作，对设计师来说学习成本和操作成本是巨大的。我们想简化整个流程。前面我们定义好了 10 个基色，也得知其相对亮度值均为 0.287 左右，这就相当于定义好了整个色阶中的“中间”阶梯，我们按等差数列向上向下分别取不同数量的阶梯即可，之后借助现成的算法或工具帮助我们去做矫正工作。为什么基准色阶往右的阶梯要多一些？主要原因在于基准色阶的相对亮度较低，自然可以往亮处扩展的多一些。那为什么我们不在这个基础上间隔取样，使左右两侧的色阶数量相等看起来对称舒服一些呢？这是由于我们在扩展分类色板、顺序色板等时发现，经常需要按不同规律来间隔取样，这样划分会使我们的可选择余地多一些，不至于陷入亮色不够用，暗色又用不到的尴尬境地。通过调研了十几个工具后发现 Chroma.js 正好满足我们的需要。我们只需要选择合适的色彩空间，定义好 Key Color（基准色），定义好相对亮度等差数列即可顺利生成色阶。受 @少年游 的 文章 启发，这里插播一个知识点：韦伯-费希纳定律，可以解释我们为什么会使用等差数列来设计色阶。定律现象：人眼对亮色区域的颜色变化敏感度要高于暗色区域。按照传统的 HSL 色彩空间生成色阶时，需要在亮色区域将阶梯层级设计的细腻一些，也就是亮度变化度（非 L 值的直观体现，需要计算）要小于暗色区域，防止使用亮色区域相邻色阶时造成亮度变化过大的错觉。如图左，浅色按钮之间的变化度为 2.6 倍，而暗色按钮之间的变化度为 1.1 倍。而我们使用的感知均匀色彩空间就很好的避免了这个问题，只要保证颜色之间相对亮度值的变化量是一样的（等差），那就说明无论是浅色按钮还是暗色按钮他们之间的变化度也是一样的，如图右。① 基础色阶基于 Chroma.js，我们生成了大部分颜色的色阶。② 特殊色阶而当我们按照同样的规则去生成黄色与橙色色阶时，我们发现整个色阶过于偏“暗”导致可用阶梯非常少。于是，经过不断地尝试后发现：通过提升黄色与橙色的基准色感知亮度与色度则可以提升整个色阶的亮度与色度，并保持变化均匀。因此，针对黄色与橙色，我们选择基准色色彩矫正前的颜色（2.1.3 步骤中所得出的颜色）做为新的基准色生成色阶。这个过程由于色彩空间、算法等缺陷会导致部分颜色产生差异，但属于肉眼无法辨别的差异，还可接受。③ 色彩矫正现在，我们拥有一套完整的色板了。但仔细观察后发现，个别颜色有些不太符合我们的品牌调性，感知亮度或色度有些过了。我们手动压一压，微调得到最终的全量色板。（绿色因与主题色过于接近，去之）这些微调其实属于可以不调的程度，并不会在实际生产过程中影响自动化交付效果。3. 色彩验证生成全量色板后不意味着推导工作可以结束了，好的色板是要能经得住考验的，同时也是循环往复来回调整基色的必要过程。① 相对亮度验证全量色板中的每层阶梯颜色是否符合相对亮度标准，这也是检验色阶是否过渡均匀的重要手段。灰度模拟效果还不错，使用 PS 中的灰度模式模拟。亮度曲线分布一致，使用工具 Huetone 模拟。② 色差验证在感知均匀的色彩空间内，验证任意两个基准色之间的色差，其目的是为了保障视力正常的用户能够顺利分辨出两个颜色的不同。我们基于 CIE2000 标准进行验证，Delta E 18 即满足，可用工具 Color Contrast 进行计算。“18”这个值的说服力有待考证，暂以其为标准。CIE2000 较 CIE1976（目前使用范围较广） 在算法上进行了优化，描述色差更加准确。可以发现，部分颜色间的色差是不满足标准的（红字加粗部分）。首先我们这里校验的基准色都是可以直接拿来用在设计稿中或者用于后期推导其他色板的，所以校验目标颜色的亮度阶梯是固定的，如黄色取亮度 0.6 阶梯，橙色取 0.44 阶梯。所以，留给我们的选择就是改变色相与色度，通过微调的方式重新生成色板，使被校验的基准色达到色差要求。经过多次尝试，我们发现：如橙色，满足色差要求的同时整个色阶会偏向红色；而黄色，满足色差要求的同时整合色阶需要偏向绿色，结果会很脏，否则会更加偏向橙色不满足要求。最主要的原因是：感知均匀的色彩空间并不像传统色彩空间那样可以肆无忌惮的调出想要的颜色，加上工具和算法的限制会导致微调并不起作用，直观的体现就是换了其他相近的颜色但生成的色阶结果还是一样的。这个时候我们就需要做出取舍了，我们最终选择了保视觉效果而非色差，或许我们后续还有机会回头重新看待这个缺陷。无法满足 CIE2000 标准的颜色，也尽量保证满足 CIE1976 标准，推荐使用工具 iWantHue 计算。③ 色度分布观察所有颜色的色度分布趋势，我们会发现用来生成色阶的基准色刚好处于色度曲线顶点位置处，这是为何？猜测：根据色度分布曲线我们可以大致推测出 Chroma.js 算法的关键点在于基准色，你输入的基准色的色度会是最高的，然后依次向两侧色阶降低。那么，基于该结论，我们就可以知道为什么在步骤 2.2.2 中生成的黄、橙色阶是不理想的了。因为你把整个色阶里的最高色度点定的太低了，以至于使整个色阶偏“暗”。这也反向验证了我们选择色彩矫正前的黄、橙色作为新基准色的做法是可行的。说通俗一点儿就是：选择用于生成色阶的基准色，一定要视觉舒适，要“漂亮”。举个不太恰当的例子，如果你的基准色可以直接拿来用在设计稿中，那么它大概率就是一个合格的基准色。最后，我们来对比一下我们的可视化色板（CIELch）与设计系统色板（HSB）的色阶过渡效果。灰度模拟效果。三、分类色板用于表示可视化场景中的不同类型的数据。1. 竞品分析我们参考知名可视化产品 ColorBrewer2 中的分类色板，通过分析其不同主题中的色彩规则来制定我们的分类色板。主题一：三套不同亮度的色板，最多 8 种颜色，色相一致，适用于不同场景，同时也适用于不同品牌调性，如清新、沉稳、复古，思路值得借鉴；主题二：两套不同亮度的色板，最多 9 种颜色，与主题一原理类似，后续扩展主题时可借鉴；主题三：相邻颜色色相一致但相对亮度明暗交替，最多 12 种颜色，适用于多数据类型的场景，可以借鉴；主题四：没搞懂原理及用途，先放之；主题五：整体偏亮，最多 12 种颜色，相邻颜色色相不一致但相对亮度明暗交替，所以也适合多数据类型场景，思路可借鉴。结合其他可视化产品，我们确定了接下来要做的事情的一些基本思路：通过某种取色规则制定不同风格的分类色板，根据其效果选择一套适合我们品牌调性的；分类色板要兼容多数据类型和少数据类型；少数据类型时，相邻颜色色相不同且明暗交替；多数据类型时，相邻颜色色相相同且明暗交替。2. 生成色板① 风格确定与基础色板分类色板颜色主要考虑明暗交替变化（兼顾视障用户群体），其次考虑色彩美观度及颜色间的对比是否协调，如黄、橙色不脏，中性色不能太深或太浅等。我们一步步来，先把风格确定一下。在全量色板上，我们以主题色所在的相对亮度阶梯为基准，通过明暗交替的方式排布取色标准点。在进行明暗交替取色时，取更暗还是更明，主要取决于色彩美观度及颜色之间协调性。再以相同的规则，将取色标准点整体向上向下偏移取出相对较亮和较暗两种风格的色板。当然，如果你想要更亮或者更暗的风格，改变偏移量即可。较亮。较暗。至此，我们得到了三套不同风格的基础分类色板，结合我们的产品调性，并在实际使用场景中进行验证，我们选择了相对沉稳、中立的版本。灰度模式模拟效果。色相相对亮度分布示意。② 扩展色板前面提到过，分类色板还需要兼容多数据类型场景。如我们现在的基础色板中有 9 种不同的颜色，如果一张图表需要用到 10 种颜色该如何解决？常用的解决方案是将生成的基础色板颜色循环使用，如 Echarts，但这种方案有一个很大的弊端就是会出现首尾颜色相接无法正常区分的情况。因此，我们决定基于基础色板按相邻颜色色相相同但明暗交替的规则衍生出一套扩展色板。注意观察，基础色板中的蓝、红、青、粉色相对亮度值为 0.36，而扩展色板中却为 0.287。这是由于基础色板颜色需要满足明暗交替原则，而对应到扩展色板中时，相邻颜色已为明暗交替的同色相颜色，因此无需再将所有暗色都处理成明暗交替。扩展色板使用效果。③ 关于使用顺序在风格确定步骤中，大家可能会有疑问：取色标准点怎么排布看懂了，但要得出分类色板，还差一个必要条件，那就是不同色阶的摆放顺序。其实这个摆放顺序就是分类色板中的颜色使用顺序，这个顺序至关重要，为何？首先，无需过多解释的就是：顺序不一样，意味着分类色板不一样，这是不同可视化产品之间差异化体现的重要途径，也就是我们前面提过的 体现整个可视化色彩体系贴近品牌调性的另一关键步骤。其次，基于分类色板的特性我们可以明确的一点就是：这个顺序是固定的，不能随意更改，否则会破坏整个产品的视觉和谐度。你不能说环形图用顺序 1，玫瑰图用顺序 2，或者这个页面环形图用顺序 1，另一个页面环形图又用顺序 2。最后，这个顺序会直接影响取色标准点的排布。顺序的不同，意味着原本应该取的暗色却变成了亮色，导致整个分类色板明暗变化产生差异。看到这里大家可能会发现，这正是用来生成不同主题的好手段啊！至于如何决定这个顺序，应该是仁者见仁智者见智并无对错的，这里只阐述一下我们的确立依据：第一位是主题色绿，其次为蓝色。一方面考虑使用绿、蓝等偏中性的颜色可以保证大多数图表在页面中不会突兀，另一方面也能够兼容大多数 B 端产品的色彩基调。其次为避免页面过于单调冷淡，所以加入暖色--黄色中和。约定成俗的语义色就是红、黄、蓝、绿，所以考虑将红色也加进来。不过红、黄色相邻的话会使色板变得过暖，可以在其中间加入偏暖的中性色-紫色来使其过渡均匀。此时整个色板呈现冷-暖变化趋势，紧接着需要回到冷趋势，同样为了避免发生冷暖突变，我们加入绝对中性色--灰色来中和，顺位往下走就只剩青色可选了。接着就是暖色橙色，而粉色是个轻佻暧昧的颜色，使用时稍有不慎就会轻易打破整个页面的风格，所以放在最后，整个色板的顺序就定下来了。此外，除了考虑颜色自身冷暖属性、语义属性外，还需要考虑识别度、视觉歧义、视障等因素。如从识别度角度考虑会使橙、黄色不相邻，绿、青色不相邻；如从视障角度考虑会使红、绿不相邻，粉、青色不相邻等。最后，需要申明的观点就是：可视化场景仅靠颜色是解决不了所有问题的，这其中需要设计师有能力将复杂的视觉问题和交互问题进行简化、合理化，如使用恰当的图表，使用纹理图形辅助识别，重组数据便于理解等。图片源自：Matplotlib。3. 色彩验证① 视障验证视觉障碍用户群体主要是色盲色弱用户，根据 Color Oracle 的统计，全世界人类中，绿色盲占比 5%，红绿色盲占比 2.5%，蓝黄色盲占比 0.5%。我们需要保证的就是尽可能让这部分群体也能够无障碍使用我们的产品，无障碍解读数据。② 色差验证步骤 2.3.2 中详细介绍了色差的验证方式以及验证目的，这里不赘述。4. 应用不在实际业务场景中验证颜色的行为个人认为就是在耍流氓。① 使用规范实际应用时发现，图表类型众多样式差异巨大，统一使用全量分类色板中的 9 个颜色并不合适。如折线图，其图形（线段）视觉占比非常小，通常是 1～2px 粗细的线段。使用全量分类色板时，部分颜色（如橙色与黄色，红色与粉色，绿色与青色）虽能顺利辨识，但长时间查看会产生视觉疲劳导致辨识困难。此外，在 Dashboard 或 BI 等场景中，通常会遇到数据量大，图表类型繁多，数据类型繁多的情况，此时的页面视觉效果将是灾难级的（使用 Echarts 主题定制工具模拟）。因此，针对常规场景，遵循少即是多原则，我们去除了可能会无法辨识的颜色，将可用颜色数量限制为 6 个。特殊场景不做限制，如桑基图。超出 6 种数据类型时，使用分类色板扩展色板，共 18 个。超出 18 种数据类型时，使用强调色板。② 应用效果这里使用屏幕截图，所以效果会出现些许偏差。四、顺序色板通过亮度变化均匀的一组颜色表示具有顺序、梯度、频率等关系的数据。1. 固定色板顾名思义，固定色板即色阶数量有限的色板，用于数据阶梯较少的场景。可基于两个准则确定顺序色板：色阶亮度层次拉开；色阶使用顺序明确。因此，从全量色板中选取色阶时需要注意，亮色区域间隔取色，保证数据阶梯之间能够清晰分辨。基于此，确定我们的 7 阶固定色板。最亮阶梯不满足对比度要求，用于图表中可能无法识别；最暗阶梯无法顺利辨别多个颜色之间的区别，也应避免使用。而明确色阶使用顺序时，除要考虑遵循规律（方便开发实现）外，还要考虑页面和谐。通常的做法是从最亮阶梯开始往上取，当数据阶梯比较少时，其效果其实并不是我们想要的。因此，我们改变一下这个顺序：从中间阶梯（主题色所在的阶梯）开始往下取，取完再依次往上取。该方案仅供参考，目前尚未与研发同学达成共识验证其可行性。最终，我们得到一个包含使用顺序的色板（从左往右依次对应数据阶梯数量）。应用效果（以主题色为例）。2. 动态色板动态色板主要应对数据阶梯量大且不可预知的场景，因此需要借助算法根据数据分布阶梯自动生成对应的色阶。设计师仅需提供最亮、中间及最暗的三个颜色即可。因应用场景区别于固定色板的应用场景，所以动态色板会使用到全量色板中的最亮和最暗阶梯。当然你也可以选择使用与固定色板相对应的最亮、最暗阶梯，本质上设计师提供的三个颜色都是可以自定义的。应用效果（以主题色为例）。五、强调色板与分类色板相对应，当分类数据较多时，或需对比数据时，通常会使用强调色板强调数据，弱化无关数据。1. 取色规则基于全量色板，以基准色作为强调色，向下扩展对应的弱化颜色。注意，与分类基础色板不同的是，通常情况下的强调色不会同时出现，因此无需考虑明暗交替；其次，与分类扩展色板不同的是，因分类扩展色板需要考虑对比度，这里则需要尽量弱化，所以弱化色亮度要高于分类扩展色板。2. 应用效果六、发散色板用来表示具有正负、高低、涨跌等关系的数据，拥有临界中间值，因此通常使用一对冷暖色来呈现。1. 取色规则首先，根据发散色板表达数据对立关系的特性，我们在选取对立冷暖色时，可以通过模拟视障效果来排除掉一些可能会出现问题的颜色。我们选取了既可以表达冷暖关系又不会出现问题的三组颜色，以及表达中立的一组颜色。其次，由于发散色板的使用场景与顺序色板类似，因此我们可以基于全量色板扩展出对应的固定色板。并使用 Chroma.js - chroma.mix 工具将对立相接的两个颜色进行混合，使其过渡更加均匀。视障用户效果模拟，既不能混淆颜色，又不能改变原冷暖关系映射。而为了应对数据阶梯量大且不可预知的场景，我们可以基于固定色板扩展出动态色板，与顺序色板动态色板原理类似，本质上是一组渐变色板，数据阶梯分布区间有多少，则可以在渐变色板上插对应数量的值。此处再次体现感知均匀色彩空间的优势，渐变色过渡也是非常自然的。2. 应用效果可视化效果使用 Datawrapper 模拟。3. 色相偏移关于发散色板的生成，其实还有一种使用范围更广的色相偏移色板，相对无色相偏移色板来说过渡更加自然，更加符合人类对色温的认知。也就是常说的随着色阶的变化冷色会更冷，暖色会更暖。先来看下对比效果：我们的方法是取三种不同暖色中的关键色与三组不同冷色中的关键色，使用 Chroma.js Color Palette Helper 进行混合，生成新的色相偏移色板。但使用该方案并不能生成所有想要的色板，因为我们的一个大前提是所有颜色取至全量色板。如在生成红-蓝发散色板时发现，并没有合适的三组暖色供我们选择用来取出关键色，这就会导致生成的色板偏色严重无法使用。所以，个人猜测，未来一方面应该向更科学合理的色相偏移方案探索，另一方面在该场景中不应将取色标准局限于全量色板。由于我们的产品中很小概率会使用到发散色板，所以这里不做深入研究，也避免误导大家，就此打住。七、语义色板可视化场景中不受主题、风格影响的颜色，是约定成俗具有特定寓意的颜色，通常用于表示告警等级、正负关系等。1. 取色规则关于语义色板的取色来源颇受争议，一种方案是直接选取设计系统中的语义色，另一种是从可视化全量色板中选取并重新定义。其实两种方案各有优劣，关键在于如何客观评判。我们选择从可视化色板中选取并重新定义的理由如下：设计系统色板的色彩空间与可视化有本质区别，无法做到统一；设计系统中定义的语义色感官上饱和度及亮度与可视化色彩不统一，融入可视化场景中不和谐；图表中的元素形状面积通常占比较大，与其他颜色的元素搭配时，使用可视化色彩会更协调；设计系统中的语义色从使用场景、设计思路等角度考虑的话，会与可视化场景有细微差别，解耦设计更合理一些。注意灰色语义色取至中性色板，后面会解释原因。2. 应用效果八、中性色板中性色板用于可视化图表中的标题、轴线、文字等场景，与设计系统中性色板保持一致，这里不做特殊定制。上文提到过，为何中性色板区别于语义色板，可以与设计系统共用呢？首先中性色板本质上都是中性色，应该区别于“有色彩”的颜色。那么，从其使用场景上来看，中性色板可以不受系统限制，独立于设计系统或者可视化组件库以外，成为一套公共的色板；其次，从使用者角度来考虑，中性色板可以说是使用范围最广的，这就形成了肌肉记忆，不再适合重新开辟一套来给大家造成记忆负担；再其次，从页面效果来看，理想状态还是所有中性色保持一致，不能说承载图表的卡片标题是一个颜色，而同级别非图表卡片标题又是另一个颜色；最后，从底层色彩空间来看，中性色是不受色彩空间限制的，可以通用于各种不同色彩空间搭建的系统中是必然的。九、总结总之就一句话，关于颜色的探索是永无止境的，随着探索的不断深入，越发觉得距离踏入门槛是越来越远了。本篇来源：优设网原文地址：https://www.uisdc.com/derived-visual-color
公寓 用户 房型 当我们做项目的时候，最重要的就是设计目标的确定，这关系着我们的方案是否真正解决产品问题。然而这个目标可不是我们以为的用户需要这样改，也不是产品告诉我们这么改，甚至更不可能是拍脑袋定的，那这个影响大局的设计目标到底怎么得出来呢？我将以 58 公寓产品的体验优化项目，来阐述具体的解题思路。相关干货：如何利用方程思维，从设计目标推导设计方案？今天就想给大家做做数学题，让大家再次感受一下被数学支配的“恐惧”（回忆）。阅读文章 > 一、行业背景大家对于公寓的认知是如何呢？“虽然又贵又小，但是装修好配套全。”我想这句话足以表现我们对公寓的初印象。公寓初印象那什么样的人会租公寓呢？通过我们的问卷调研发现，在 58 租房群体的公寓用户中，18-25 对的人群占比最多，其次是 26 岁-40 岁，跟 58 整体租房用户相比，公寓人群趋于年轻化，这就意味着，租房群体已经从高性价比上升为高品质生活。58公寓人群年龄分布那随着年轻群体的需求转变，公寓行情又是如何呢？经过我们对行业的分析发现，得到了三个结论：头部公寓领跑明显，开始在二三线城市扩张；公寓主题细分越来越明确，都有自己的主打用户群体；随着公寓标准的建立，长租公寓开始越来越规范化。二、产品现状通过对 58 公寓商户的梳理，发现 58 的公寓商户较于竞品来说，大部分都是偏中低端，然而这个也成为我们设计的一个困难点。但是从更深入的观察了解，我们发现虽然大部分都是中低端公寓，但是却有着自身的优势：与竞品比价格偏低；与个人房源比装修好；与中介比价格透明；与租房比还能押一付一。58公寓产品现状那这样的优势按理说应该好租吧？但是，我们从问卷中发现 58 租户有一半的用户是不知道公寓的，而在租公寓的用户的比例也是远低于《20 年底租凭市场报告》的，这说明 58 公寓有很大的发挥空间。58公寓用户分析三、设计目标确定从结构层看，我们总结出的问题有：信息传递不准确、品牌感弱、需求方与供给方连接弱。从视觉层看，我们发现公寓房源几乎看不到任何品牌性的内容漏出，且在公寓频道下与租房频道差距并不明显。从竞品分析结果看，我们与竞品确实存在着一定的差距。所以结合以上，我们确定了此次公寓的优化目标，主要围绕着两个方向展开：如何向 58 用户更好的传递公寓优势？如何让关注品质的租房能够快速的找到心仪的房子？58公寓优化方向四、设计落地结合目前 58 的公寓产品在 C 端的产品形态，以及产品的 Q4 计划，我们找到了公寓大类页及独栋公寓频道作为优化的落地页。依据得出的设计方向，我们找到设计的发力点着重在于：结构层：优化不同场景下的信息展示结构；优化独栋公寓用户选房路径；增加租户精细化运营；视觉层：增强品牌感的传递；信息展示更直观；增强真实感。58公寓设计目标拆解公寓大类页优化主要做了以下 3 点在公寓大类页头部增加品牌性的展示区域，主要目的是传递 58 的公寓品牌理念，同时还可承载公寓的大型活动展示；对金刚区的图标进行了优化，在增加细节及品质的同时使其更趋于真实感，为保持与大平台的一致性，颜色控制在 58 的四色范围内；在腰部位置增加个性化推荐卡片，我们把更多的细分公寓房源按分类推荐给用户。独栋公寓改版因为独栋公寓在整个公寓频道中，房源质量是最高的、最贴近用户预期的一类，所以此次的改版变化比较大，主要有了以下 3 点突破初次尝试以房型的方式去做公寓的推荐通过判断用户不同的浏览路径来决定页面的展示结构不同级别的公寓采用不同的展示策略具体视觉呈现有：在独栋公寓落地页，对头部做了更多的品牌调性的尝试；在腰部增加房型推荐卡片，信息展示均围绕着房型，期望通过租户关注的户型、面积、所属公寓、位置因素促进转化；推荐公寓列表通过大卡片的方式展示，信息通过展示品牌+门店+位置+推荐理由促转化。独栋公寓首页改版前后对比在门店详情页，头部沿用门店列表的渐变样式，增加品质连续性；对地理位置与上班距离做了更直观的尝试；房型列表标题信息结构重构使其更直观，增加门店的服务与配置展示公寓间的差异化，甚至通过品牌故事的描述提升租户的好感度。独栋公寓门店详情改版前后在房型详情页，此处应是租户处于决策阶段，所以头部展示房型的基础信息，该房型下的放假则着重展示差异化信息，通过朝向及面积促转化等。独栋公寓房型详情写在最后其实解题思路没有捷径，最好的方式就是深入到产业中，深度理解当下的产品及当下的用户，定义自己产品当下要解决的问题是哪些，定义好问题，再去发散创意，在实现自己价值的同时还可以帮助产品解决问题，这才是我们最终要追求的吧，有相关问题欢迎留言讨论～欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/design-objective-2
用户 也能 插画 作为 UI 设计师来说，体验总结是必不可少的日常习惯，灵感的来源离不开对优秀设计的探索。本期黑马哥选择了最近发现的一些不错的设计案例，希望这些优秀的案例可以带给大家更多设计思考，强化我们的设计感知能力。往期回顾：10个产品细节剖析，看看高手是如何做设计的！产品设计做到极致的时候，发挥的空间就会深入到细微之处的功能，看着简单的功能，也会被设计师脑洞大开。阅读文章 > 一、个性化的性别选择设计完善信息对于产品来说是提升体验的关键，一些产品在初始状态会引导用户去完善，比如昵称、头像、性别、年龄等基础信息的采集。如何提高用户的设置兴趣，降低完善信息的排斥感，需要设计师进行反复推敲。最近在体验 FLAG APP 的时候，在性别选择界面设计上区别于以往体验过的产品，将性别的可视化进行了更为情感化的强化。出色的设计让用户眼前一亮，精美的插画提高了整体设计的感官体验。该案例提供了性别选择差异化的表现，是提高常规信息界面设计视觉感的不错思路。二、情感化的用户等级设计用户等级是增加黏性的关键，也能通过等级带给会员更多的增值服务，激发用户的参与度。在使用海马体照相馆 APP 的时候，个人中心在顶部视觉区域会直接显示用户等级，配合情感化的人物插画特别突出。通过左右滑动可以查看不同的等级，等级名称和对应的人物形象插画也会针对性的设计，不仅强化了用户体验，不错的视觉感也能吸引用户的关注度。三、精美的插画助你释放压力插画在产品设计中的曝光度越来越高，风格多样化直接影响产品风格，也能增强情感化体验。全靠插画撑起整个产品的案例是什么样子呢？最近发现了这么一款产品。Wild Journey 是一款解压的白噪音 APP，内置了许多大自然的声音，让用户体验到荒野的空旷、森林的静谧、大海的波涛。整个设计全是精美的矢量插画作品，带给用户赏心悦目的感官体验。来这里释放自己的压力，放松身心。四、趋势化的引导页设计引导页设计是最容易呈现风格趋势的，利于设计师进行创意发挥。无论是想要发挥插画技能、建模能力或者动效表现，引导页都能提供发挥的场景。最近在体验嘀嗒出行的时候，发现全新升级的 9.0 版本，引导页设计风格也是让人耳目一新。利用了趋势感的插画风格和视觉表现风格（玻璃质感风）相结合，画面清新自然，带给用户非常好的视觉感官体验。五、可视化表现提高用户理解度可视化设计逐步成为信息传递的趋势，利用图形化的形式更利于用户理解，相较于枯燥的文字化呈现来说阅读理解的效率更高。Keep 在产品设计的时候，有效的将一些数据的表达和内容的普及以可视化的图形进行展示，不仅提高了界面设计的感官体验，也能有利于用户对于内容的理解。提高界面设计的视觉感也能让用户更为关注，图形可视化已经逐步成为产品设计解决方案中的趋势。六、个性化的主题皮肤设置个性化的定制设计可以让用户感受到产品的温度，根据自己的喜好选择主题化呈现。成熟的产品都会在个性化设置上面提升体验度，特别是在主题皮肤的定制上面，提供了更多的风格让用户选择。Keep 在将主题皮肤设置定义为选择运动伙伴，不仅提供了不同的 IP 形象和主题皮肤，俏皮可爱的动态延展也传递了情感化的体验。多种风格的设计满足了不同用户的喜好需求，还为不同的主题定义了拟人化的角色和身份，视觉感和体验度都非常的到位。七、提高参与度的签到设计签到设计可以提高用户黏性，让用户在参与的同时获得礼品或者增值服务，签到也成为了众多产品的标配功能。对于设计师来说，如何通过设计提高用户签到的参与度，是需要不断探索的设计思考。最近在使用天天跳绳时，发现其签到设计的视觉表达直观醒目，大大的提高了用户对于签到的理解和参与度。将签到后解锁的勋章、经验、装扮和礼品等直观的结合到签到界面中，不仅风格协调统一，视觉风格也符合运动场景感。看到这个界面成功吸引了我的签到欲望，签到操作简单，整体的体验度都做得非常不错。八、情感化的个人中心设计个人中心作为主界面之一来说，设计的体验度是至关重要的。为了满足用户的喜好需求，个性化的设置也是层出不穷，功能布局、头像装扮、主题皮肤等都呈现出了众多的优秀设计方案。天天跳绳是个人经常使用的一款运动辅助工具，记录小孩跳绳也是非常便利的工具。个人中心顶部视觉区域的人偶形象增强了界面设计的感官度，人偶的动态体现出用户的运动状态，可以进行自定义的设置来满足自己的情感表达。可以设置人偶的装扮、旋转角度、动作等，人性化的功能设置提高了自定义的体验度，强化了用户情感化的使用体验。九、结果导向的设计表达以图标/图形/图片等设计辅助信息的传递很常见，通常都是根据信息的文案来进行设计表达。如果放弃本身文案信息传递的意思，选择结果导向的设计表达，也能带来不一样的设计反思。最近在体验 One More 的时候，动作库的列表设计中便选择了结果导向的思路。如果是常规的设计解决方案，会根据列表主题内容来设计配图，这样也能辅助对于内容的理解。但是 One More 选择了完成该项目得到的锻炼部位为设计思路，虽然不能辅助项目信息的传递，但是这个设计表达更能让用户理解完成的结果，参与度也能得到提升。可视化的设计替代了文字的表达，提高了用户对项目的理解度，进而转化更高的参与度。十、新颖的轮播 Banner 设计轮播 Banner 图对于设计发挥来说，除了在本身的创意和视觉表达层面以外，产品结构和功能层面也是设计师需要探索的方向。极有家 APP 在产品的体验设计层面做得非常不错，针对轮播 Banner 位置也是做了新颖的创新。在 Banner 图上设计了不同商品的引导标签，方便用户在感受整体家装效果图的同时可以选择场景中的商品，也能对场景中的商品价值有个清晰的认知。轮播的形式结合了待轮播图的预览和风格名称，增加了待轮播图的曝光度，整个样式表达上面视觉感也非常不错，是一个比较新颖的设计解决方案。小结体验、记录和总结是为了提高我们对于优秀设计解决方案的理解，也能强化我们的设计思路和灵感。对于设计的理解阐述属于个人见解，不足之处欢迎大家留言补充，我们互相进步。欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/10-ui-ux-design
键盘 用户 功能 微信键盘发布啦！拥有 12 亿用户的移动端巨无霸微信发布微信键盘了！就在上周一，预热近两年的微信键盘终于发布，这款微信之父张小龙口中的——不搜集任何隐私的输入法工具，总算揭开了他的神秘面纱。廖尔摩斯第一时间全面体验了微信键盘，通过三天的使用，我也成了微信键盘的脑残粉，这篇接近3600字的拆解，将会告诉你，这个地主家的小儿子，为什么又帅有才！往期拆解：6000字拆解！花费10个亿，抖音如何设计世界杯专题？作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。阅读文章 > 一、产品拆解作为一款工具类产品，需要更注重产品的用户使用体验，所以此次产品拆解主要基于尼尔森十大可用性原则和常见的设计基础理论，比如格式塔原则、费茨定律等。我将会分为基础功能、个性化功能和个人隐私三个部分进行拆解。让设计更有说服力的20条经典原则：菲茨定律简介说明1. 理论表述 任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。阅读文章 > 1. 基础功能① 键盘管理键盘是输入法最基础的功能，根据每个用户不同的操作习惯，微信键盘为用户提供六种类型的键盘，分别是九宫格、全键盘、笔画键盘、手写键盘、五笔键盘和双拼键盘。在五笔键盘和双拼键盘中，还为用户提供了多种偏好设置，比如 86 五笔方案、98 五笔方案等。设计思考相比行业头部老大哥搜狗输入法，微信键盘的类型相对还比较单薄，比如像搜狗输入法还支持生僻字键盘、拍照转文字等特色功能，不过作为一个 V1.0.0 版本，这也遵循了如今产品设计的主流设计模式，小步快跑，快速迭代。② 键盘输入框「输入框」是用户实际操作和使用的功能，这是最基础、最重要的功能。微信键盘的输入框界面风格非常简洁，和 IOS 默认键盘风格相近，目前仅有一款默认皮肤。长按技巧长按「拼音键」，可选择更多相关字符，比如数字、大小写等。其中长按「JKL」拼音键，可切换至「单手模式」；长按「中英文」键，可切换至「手写模式」，非常方便。智能删除复原这个小技巧使用起来特别方便，在我们删除一段文字的时候，经常会出现误删的情况，微信键盘设计了一个非常巧妙的功能，按住「删除键」左拉可以删除文字，往右则可以把删除的文字复原，提高了产品体验的容错性。上滑输入数字符号这个功能需要在系统设置开启，在键盘输入的时候，只需要上滑「拼音键」，就能直接把拼音键对应的数字拖到输入框，节省切换数字键盘的操作步骤。特殊符号「特殊符号」不仅包含了常见的 10 种类型，横排 26 键的设计更能让用户直观地找到自己需要的字符，使用起来体验非常友好。相比搜狗输入法超过 20 种的符号类型，微信键盘简洁的设计为用户提供了更高效的选择，带来了更友好的体验。设计思考少即是多。相比搜狗输入法的大而全，在特殊符号这个细节的设计，微信键盘让我爱不释手。首先应用了 72 效应，在用户的短期记忆里，降低记忆负荷。其次也应用了席克定律，减少用户的选择，降低消耗的时间成本，从而提升用户体验。③ 偏好设置语音转文字从识别语言观看，微信键盘支持普通话、粤语、英语、四川话和上海话，笔者亲自体验一番，发现识别准确率还挺高的（贵阳话，和四川话接近，超过 80%准确率）。声音和触感「声音和触感」指的是用户使用键盘按键的声音和触感。这里有一个非常贴心的设计，当用户手机静音的时候，打开声音开关按钮会提醒用户当前处于静音模式，无法听到按键声音。这就是尼尔森十大原则的防错原则，在用户出现操作错误之前，通过设计提示提前避免，你可以想象如果没有这样的提示语，如果你的手机不小心静音了，你就会懊恼为啥键盘没有声音，这个软件是不是出问题了（笔者亲身经历）。显示设置微信键盘支持用户可设置键盘候选字的大小，这里也有一个非常贴心的设计，当用户调整字体大小以后，如果想要恢复默认大小，只需要把滑动组件拖动到已经标记的默认起点就可以了，这应用了尼尔森十大原则的易取原则，用户无需记住默认大小设置，如果想恢复，拖动标记的起点即可。模糊拼音及其他「模糊拼音」主要针对拼音基础欠缺的用户，提供模糊的拼音设置，从而提高输入效率。其次微信键盘还提供「首字母自动大小写」、「双击空格输入句号」和「智能添加空格」等偏好设置，用户可根据自己的操作习惯进行设置，获取更便捷的体验。2. 个性化功能个性化功能主要指微信键盘最特色的「拼写 Plus」功能，这也是微信键盘发布以后给用户最大的惊喜。① 智能推荐「智能推荐」是微信结合自己强大的生态设计的一个功能，在用户输入文字的时候，系统会自动判断文字的类型，比如输入一本书的名字，系统就会提示是否需要向好友发送这本书籍。从内容类型看，包含了音乐、视频、读书、小程序、视频号和公众号。这个功能在用户的聊天场景中，实在太方便了，比如作者过去要给好友分享自己的公众号，还需要去公众号搜索、转发，如今只需要输入「设计大侦探」的名字，就可以向好友直接发送，减少了数步操作路径，极大提升了沟通效率。② 表情推荐表情是微信聊天场景中必不可少的一个元素，甚至有很多用户特别喜欢收藏表情，它可以用于各种聊天场景，活跃聊天的氛围。微信键盘的表情推荐，通过用户输入的词语，可以自动识别可能需要发送的表情，无需用户收藏，就可以为用户自动生成。这个功能非常赞，特别像笔者这样从不收藏表情的用户，当突然需要输入一个表情活跃一下气氛的时候，我只需要输入一个「大家好」，微信键盘就能为我提供数十种表情，满足我的需求。③ 智能拼写「智能拼写」是指当用户输入某个词语时候，系统为用户精准匹配候选词，提高输入效率。笔者尝试了输入「梅西」，几乎可以根据智能匹配输入一段完整的文字。而微信生态更为恐怖的是，它会自动结合当前的话题标签，用户可直接跳转至话题的视频号动态，一键查看更多信息，让用户彻彻底底对微信生态的服务上瘾。④ 拼写检查「拼写检查」是指系统会根据用户在输入文字的时候及时发现错别字，一键精准改错。这个功能设计得非常贴心，能让用户及时看到书写错误，降低因错别字带来的烦恼。⑤ 常用语过去在微信聊天的时候，为了提高输入效率，我会把很多反复发送的文字复制到备忘录或微信收藏，这能提升我一定的沟通效率。但相比微信键盘的常用语功能，我以后就会直接放弃之前的两个形式了。这个功能实在太方便了，比如每一次粉丝添加我的时候，我都会需要介绍一下我们公众号的内容，现在我只需要输入前 3 个字，这段话就可以直接出来了，极大提升我的沟通效率。⑥ 单手模式「单手模式」是指用户可根据自己的惯用手或场景设置输入模式，前面我有提到过，长按「JKL」拼音键，可切换至单手模式。⑦ 手写找字「手写找字」是一个支持同时手写多字的输入模式，这个功能对于我们父辈一代的用户特别适用，他们多数人还未习惯用拼音拼写，更喜欢用手写的形式去输入，而支持写多字的模式可以极大提升拼写效率。⑧ 小结什么是以场景为中心的设计，微信键盘的设计团队告诉我们，这就是以场景为中心的设计。过去设计者总是在思考如何去定义人们使用的系统和应用程序，而“以场景为中心”的概念，则强调要以人的需求为中心，系统和应用程序要去帮助人们满足他们的需求。看看微信键盘设计团队结合如此多真实场景的设计，可见设计师真的需要具备场景思维，才能设计出让用户尖叫的体验。3. 个人隐私① 清空个人词典微信键盘提供了「清空个人词典」的功能，这有点不可思议。不过微信键盘的创立之初，微信之父张小龙就说过，微信将上线属于自己的专属输入法，其目的并不是为了抢夺输入法市场，而是为了更好的保护用户的隐私。不过该功能大家要谨慎使用，一旦清空，你所累积的个人词汇就会清空，将会影响你的输入体验。② 帮助反馈针对微信键盘使用的技巧和常见问题，微信键盘也设计了帮助反馈文档，为用户解决使用过程中的困惑。很多产品设计师或许觉得这样的模块可有可无，但这其实这就是尼尔森十大原则的人性化帮助原则，通过帮助文档为用户解决软件使用困惑。③ 隐私与权限“我们非常重视你的隐私安全。我们谨遵最小、必要原则，仅依《微信键盘隐私政策》获取你使用微信键盘的功能所需的你的信息，不会额外获得你的其他信息”。这是隐私与权限页面的一句话，足以见得微信键盘的定位如上文所言，只做一款单纯的输入法软件，不侵犯用户的隐私。二、设计总结作为一个才上线发布 V1.0.0 版本的输入法产品，微信键盘真的给了我太大的惊喜。从产品的易用性来看，无论是交互，还是界面，都严格遵循了尼尔森十大原则的标准。这个产品设计中最基础的设计理论模型，事实上，太多的工具类产品都没有遵循它的设计原则，我们常常说一款工具难用、不好用、设计不好，就是这些操作细节没有考虑进去。而微信键盘，在我目前的使用操作过程中，暂时没有，易用性非常高。从产品的创新性来看，微信键盘不仅满足了一个键盘输入工具的基础功能，而且结合了自身强大的生态环境设计了「拼写 Plus」这样非常创新的功能。它帮助我实实在在地提升沟通效率，比如一键推送我的公众号、和粉丝沟通的常用语等等，甚至破天荒的可以直接在聊天输入框分享我喜欢的歌曲、书籍、电影、视频号等，换做以前真的不敢想象原来这些功能可以通过一个输入法软件实现。我已经彻底成为微信键盘的脑残粉了，即便某狗的输入法显示我已累计输入超过 4 百万字，但微信键盘给我使用的尖叫感，真的让我不可思议，就像那汹涌的潮水，一波又一波袭来，让我尖叫！欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/wechat-keyboard-2
趋势 品牌 消费者 大家好，这里是和你们聊设计的花生~近日，世界顶尖包装设计平台及设计大赛 Pentawards 发布了 2022-2023 趋势报告。Pentawards 团队在浏览审查了来自 5 大洲 60 多个国家的 2000 件参赛作品之后，最终确定了 10 个将在未来一年中塑造包装设计的关键趋势，而这些趋势将会成为指导包装设计领域现在和未来发展方向的重要指南。最新整理！设计师必备的5个专业包装设计灵感网站大家好，这里是和你们聊设计的花生~所谓人靠衣装马靠鞍，对产品包装来说也是一样的道理。阅读文章 > 一、罐装的崛起传统包装在近年来一直有崛起的趋势，究其原由也许是制作材料的环保可回收性，也许是在运输环节更加节省成本，又或者仅仅是为了从同类包装中脱颖而出，给人带来有新鲜感。罐装设计的崛起之势在饮料行业已经酝酿了好几年，今年的饮料白金奖得主就是这一趋势的完美范例。Williams 鸡尾酒是鹿特丹一家酒吧在停业期间为了将来继续营业而研发的，在完善了酒的配方后，他们想让外包装也更有吸引力。最终得到的结果是 6 种不同口味的鸡尾酒各有 6 种不同的标签和 Logo，而这些内容最终都集中呈现在一个 100%可回收的薄轧钢罐里。而在饮料市场以外的领域，易拉罐的身影也悄然出现。在这个被玻璃瓶和塑料袋装占领的市场中，Potts‘希望自己的烹饪酱料能以一个独特的外观在货架上脱颖而出。考虑到环境问题，公司最终选择了可回收的铝罐——尽管这是软饮料最常用的包装。由于无法看到产品是什么样子，铝罐包装上的图形和设计必须更用心，以清楚表达每个包装中的不同味道。还有就是彩色隐形眼镜 CoFANCY 的包装和 Aokka 咖啡的 WHAT NEXT 系列包装。COFANCY CONTACT LENS CAN COLLECTIONAOKKA VISUAL IDENTITY AND PACKAGING DESIGN趋势启发：我们希望看到罐装包装成为食品和饮料行业中越来越受欢迎的选择，因为它在提供新奇和差异化的同时，也提供了可持续发展的包装设计思路。正如 Potts‘的例子所示，我们预计这一趋势将超越人们熟悉的饮料和罐头领域。我们还希望看到高端产品和品牌使用带有复杂图形设计的罐头包装，将罐头重新定位为一种高端包装选择。二、包装即产品可持续发展的理念不再是一种趋势，而是任何包装设计过程中的一个基本组成部分。为了节省空间和避免浪费，越来越多的产品包装成为产品本身的关键部分。在这方面做得很好的例子是今年的钻石奖——最佳展示奖得主Urban Forest的颈枕。其贝壳形的外包装由硅胶材料制成，既可以作为储物袋，也可以用作充气泵。这种包装设计鼓励消费者不要丢弃它，并巧妙地改变了充气枕头的使用方式。还有就是 F SolidPod 的设计。它是一个实用便携的小盒子，由可回收材料制成，用于容纳各种可替换的香皂或固体清洁膏。F SolidPod 的设计让香皂可以最大程度的得到利用，在使用时也不易滑落，还不易滋生细菌，是作为化妆品和个人护理行业一次性包装的替代解决方案而开发。同样体现这一设计趋势的还有香奈儿为庆祝 N5 香水问世 100 周年而设计的降临节日历。采用了香水瓶标志性外形并制作成了超级尺寸，包装使用环保模制纸浆，里面的每个小盒子上印有一个日期。包装的各部分一起构成一本日历，这让整个产品既有环保意义又极具收藏价值。趋势启发："包装即产品"是推动更多可持续包装解决方案和循环经济的必然结果。然而就这一趋势的发展而言，我们希望看到更多美学与功能的融合，创造出既美观又能鼓励消费者保留和重复使用的包装，同时在运输成本和废物方面也具有环保意识。三、以消费者为主导可持续发展个人护理和美容行业每年在全球范围内生产超过 1200 亿个包装，品牌和机构一直在寻找方法来减少它们的影响。有越来越多的品牌与消费者沟通，告诉他们可以做哪些事情来帮助完成更加环保的循环，教育消费者如何处理包装上的各种元素也有助于让他们也承担起一些责任。这可以看作是去年我们看到的一个趋势的进步，即品牌通过他们的包装讲述他们的可持续发展故事。高露洁的 "Recycle Me "牙膏管，是同类产品中的第一个，希望通过明显的回收标识来提高消费者的意识并促进他们的行为改变。Carte Dors Affogati 冰激凌系列则已经改用 100%可堆肥和可回收的纸张，并说明了哪些元素需要回收或堆肥。Colgates 的 Recycle Me 系列牙膏Carte Dors Affogati 冰激凌的可回收纸张包装Dove 的可重复使用的沐浴露瓶和浓缩液补充剂设计也体现了同一理念， 为有生态意识的消费者提供了一个减少浪费的简单解决方案。关于如何使用补充剂和这样做的积极影响，在包装的各个部分都有清晰的说明。趋势启发：对于品牌来说，这种包装设计让消费者有机会更多地参与到品牌的可持续发展的故事中来，反过来又可以促进消费者对品牌的忠诚度，因为他们感到对地球的共同责任。四、超大胆的视觉效果在被疫情阴霾笼罩的世界里，人们对令人惊叹的视觉因素的需求非常强烈。因此，品牌必须靠视觉在实体店、线上网店以及社交媒体上脱颖而出。为了做到这一点，我们看到品牌专注于大胆的颜色、字体和图形。护肤品系列 BYOMA 使用现代简约的字体、图标和大胆的色彩来展现品牌的先锋科学属性和创新性。该品牌的方形瓶子便于有效地运输，以减少其碳足迹。在与安迪-沃霍尔基金会的联名合作中，SK-ll 的包装从沃霍尔标志性的电视测试图案中获得灵感，设计了具有 VHS 磁带和电视屏幕特色的礼品套装盒，呈现了独具一格的视觉效果。趋势启发：虽然使用大胆的色彩本身并不是一个完全原创的趋势，但在日益激烈的社交媒体竞争中，以及在与强大专业的 DTC（直接向消费者）品牌的激烈竞争中，想脱颖而出必须采用强烈和极端的色彩模式和排版。且是简单而大胆的，而不是复杂的，因为前者才是在数字环境中最突出的东西。然而我们预计这种趋势终将达到饱和点，这时我们可能会看到更勇敢的品牌选择单色或更柔和的配色方案。五、超级优质玻璃随着品牌的可持续发展，我们在货架上和网上看到越来越多的玻璃包装。为了给产品增加更多的亮点，我们也看到许多瓶装软饮料转而采用定制的强化玻璃瓶，并进行超高级的细节处理和加工。MATCH 的汤力水标签看起来和感觉都很独特，因为它们有一个微穿孔的外观和橡胶的柔软触感，让人联想到新的自行车或网球拍手柄的奢华感觉，而 Pursues Hard Seltzer 硬苏打水创造了一个定制的瓶子，提供了一个更怀旧的外观和更独特的使用体验。MATCH 汤力水包装Pursues Hard Seltzer 硬苏打水包装我们还看到 Maybe Sammys 酒吧的瓶装高级鸡尾酒的包装设计，通过瓶身纹理、简单而精致的标签体现对细节的考究，使得包装与酒吧一样精致优雅。酒吧的绿色和金色已经成为该品牌的代名词，这种色调被延伸到包装细节中。MAYBE SAMMY BOTTLED COCKTAILSMAYBE SAMMY 是悉尼的著名酒吧趋势启发：我们期待品牌通过使用回收玻璃来提高其玻璃包装的可持续性，向循环经济靠拢。由于品牌必须千方百计努力地建立客户忠诚度，而有意识的消费者在购买时会变得更加挑剔，因此包装能否给人的优质感受将十分重要。六、无障碍和包容性的设计能包容更多消费者的包装设计是品牌巩固自己地位有切实举措，无障碍的设计的趋势现在正赢得更多的关注，成为许多品牌的必备品。在与残疾人的合作中，Microsofts Surface Adaptive Kit 的包装被设计为无障碍模式。包装上带有标签，可以帮助那些有视力障碍或残疾的人使用他们的 Surtace 笔记本电脑；还有便于拆卸的集成环以及盲文 QR 码，都帮助了此类用户的解决自己的遇到的问题。多力多滋的发起的“Solid Black”活动设计旨在为黑人创作者发声，让他们的故事被更多人知道，为此多力多滋推出了限量款包装，还向对应的非营利组织捐赠 500 万美元，作为该活动的一部分。这些都是包容性设计的体现，并将包装设计与现实世界的变化联系起来。趋势启发：随着品牌对其受众的多样性和需求的理解在不断深入，体现无障碍和包容性理念的包装设计趋势必将进一步发展。在今年的 Pentawards Festival 上，Diageo 的全球设计总监 Jeremy Lindley 强调了设计中无意识偏见的危险性，以及设计中仍然缺乏真正的同理心的事实。Lindley 还谈到游戏性是创造真正的包容性设计的最重要的工具之一，我们期望未来几年在包装上看到更多为不同的受众设计的游戏性解决方案。七、触感细节人们总是偏好新奇的感受，品牌也想借此吸引消费者，因此包装设计被附加了视觉维度之外的另一个维度——触觉，为更多人打开了全新的包装体验。在限量版的 AVYUN 葡萄酒中，设计的核心元素是一片压印的葡萄叶，红色的颜料在其凹陷的脉络中不同程度地流动着，以反映葡萄酒的成熟度。同时，Almatura 使用手工制作的回收标签，摸起来质感十足的纤维使人感受到产品的自然品质。压印的字体进一步增加了质感，且标签可以直接种植在土壤中使其种子发芽，繁殖植物生命。趋势启发：我们期待看到更多独特而有创意的包装体验方法，因为在一个日益数字化的世界里，有形的价值将继续吸引消费者。使包装更具有感官多样性的想法，必将与正在兴起的无障碍和包容性包装设计同步进行。八、升级的智能包装品牌正在不断寻找新的方式来与消费者进行沟通和交流，近年来智能互联性质的包装也急剧增加。作为一个相对较新的趋势，我们已经看到它以新的和令人兴奋的方式继续发展。时尚鸡尾酒品牌 The Fetichist 的包装设计使用了大胆的数字霓虹灯效果，灵感来自于视频游戏和夜晚世界，而酒瓶包装上醒目的二维码则让消费者可以在扫描发现更多鸡尾酒并在线购买。FaceGym 是一个以运动为灵感的美容品牌，拥有独特的类似私人教练的应用技术，但只能通过二维码访问。他们在包装上创造了一个触感良好的标签，吸引了消费者的注意二维码，并通过观看教学视频获得更好的护肤体验。趋势启发：随着技术和社交媒体的日益成熟，我们期待看到品牌以新的方式与消费者建立联系，而不仅仅是包装盒上显示的内容。我们也希望这些内容能让消费者参与到全球性问题以及每个产品背后的可持续发展故事中，因为这些对全球受众来说越来越重要。九、包装也需“瘦身”环境问题的越来越不容忽视，因此我们考虑的不仅仅是材料的可回收性和可持续性，还包括如何简化包装，以减少浪费并节省运输费用。作为减少塑料使用的一部分，SONY 开发了一种新的包装材料，由竹子、甘蔗纤维和再生纸制成，将 WF-1000XM4 耳机的包装尺寸减少了 34%。同时，VETA 酒瓶的包装被设计成最大程度上贴合酒瓶本身的几何形状，且使用的是可持续的模塑纸浆。这种设计既以一种有吸引力的方式保护产品，同时又最大限度地减少包装。趋势启发：简化包装作为一种相对简单的可持续发展方法，对品牌来说也很有成本效益，随着过度包装和浪费行为被越来越多的消费者反感，我们希望这一趋势能够长期持续。当品牌使用二维码链接到数字信息，而不是使用空间和多余的材料在包装上展示产品细节时，我们会注意到智能包装的概念与这一趋势相结合。十、涂鸦我们还看到手绘插图或手写笔记风格的包装也在增加，它能唤起了一种个性化的感觉及与品牌进行直接的情感交流。疫情居家期间许多人重新拾起写作或绘画这样的爱好，以宣泄内心的情绪。于是 Vouni Panayia Winery 发布限量版的 "Untitled（无题） "系列葡萄酒时，在包装上为这样情绪留下一个呈现的窗口，同时也是许多人可能已经感受到了的—— 自新冠疫情开始以来 "We are not drunk enough to survive the 21st century（我们没有醉到足以在21世纪生存）"。一个针对年轻人的新啤酒品牌 Lovibonds 在其包装标签上用发光的墨水描绘了两种不同的场景：白天是宁静的插图，晚上是嘻哈的氛围。同时，菓语复合果汁的包装上是一幅有趣的 "水果怪兽 "的 插画，其中有充满活力和想象力的符号图案的涂鸦，这种创造性的方法有助于它在竞争对手中脱颖而出。趋势启发：随着数字世界的发展，我们认为手绘图案将继续在包装中发挥作用，作为对越来越多的模拟设计的一种平衡。特别是涂鸦个性而自由形式，让人联想到孩子般的创造力，这将继续吸引所有世代的人，为包装的视觉设计带来特别的人性感觉。以上就是今天为大家推荐的包装设计界“奥斯卡”Pentawards 发布 2022-2023 趋势报告。喜欢的话记得点赞收藏，也可以转发给身边有需要朋友 。如果有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：先睹为快！2023年值得关注的10大平面设计流行趋势大家好，这里是和你们聊设计的花生~一转眼 2022 年就只剩最后一个月了，除了总结今年的收获，也是时候了解一下未来的设计新趋势了。阅读文章 > 来了！潘通2023年度流行色「非凡洋红」正式发布！每年12月初，潘通都会踩着点发布第二年的流行色。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/2022-2023-pentawards-trend
自己的 团队 机会 或许是因为这世界太过变化莫测，或许是出于与生俱来的一种危机感和求生欲，在我的 15 年的设计职业生涯中，我很少感到稳定和安逸。即便偶尔会有一段时间放松下来觉得吃吃老本也无妨，但往往很快就会发现，自己又被某种力量甩在了后面，不得已，还得再努力跑起来才能追上。本文现身说法，结合自己的经历聊一下在设计师的职业生涯中，经常会遇到的几种职业转型。主要包括专业方向上的转型、专家转管理的转型、经理到总监的转型。之所以把职场晋升称之为“转型”，是因为晋升只是一个表面现象，而真正实现角色上的转变，则需要一个漫长的进化过程。同时，本文也可以解答一个之前几次被问到的问题，那就是我是如何从一个设计小美工，不断成长为一名互联网上市公司的设计总监的。当然，写这个文章并不是觉得自己多了不起，只是觉得一路辛酸可以分享，并希望本文能对你有所帮助，哪怕只是一点。往期回顾：猎聘设计总监：4步帮你做好职业生涯自我规划如果你有午睡的习惯，你会发现如果中午不趴那么一会儿，一下午的脑子都是不清醒的。阅读文章 > 第一次转型：专业方向转型，想清楚了就大胆去做这次转型，让我找到了自己明确的职业方向，并且获得了 BAT 的工作机会。在初入职场的时候，每个人都不太可能一下就进入到一个特别合适自己的角色。再加上大部分人缺少规划，所以步入社会的第一份工作，在很大程度上可能只是出于某种偶然。所以在工作几年之后，当你开始考虑自己要不要进行专业方向上的转型的时候，大概率是因为你的确、确实需要这次转型。但在专业方向转型中往往意味着要放弃很多东西，要面对一些新的不确定性，这个没有什么好讲的，就很简单：自己为自己做决定，然后大胆去做。我曾经建议团队里一个主要做运营设计的同学转做 UX（主要是因为他自身的能力特点以及当时团队的需要），虽然一开始他非常不确定，但后来他还是选择接受，并且转型也颇为成功。我之所以这样建议和操作是因为我自身就经历过这样的转型，并且也目睹过之前的同事或早或晚的成功的完成了这样的转型。他真正去做的时候其实也并没有一开始想象的那么难，如果真的有什么难点，那就难在转型时的取舍选择上。在参加工作 4-5 年左右的时候，我产生了一个想要从视觉设计师转型交互设计师的想法。然后不断地在知乎查资料、看了当时能找到的大部分设计书之后，更加坚定了自己的想法和决定。我当时的理由主要有这么几个：交互设计比视觉设计更能接触到业务核心的问题，我想要在更上游一点的地方做事情；当时移动互联网正在蓬勃发展，交互设计人才比较稀缺；我对纯视觉方向的 UI 设计的价值产生了些许怀疑，终日像素化地调整 UI 细节、与开发同学核对验收，有时候会觉得有点无聊；我感觉成为一名交互设计师，是非常酷的事情；在产生这个明确想法之后的一年时间里，我自学相关知识并在工作中找机会胜任交互设计的相关工作内容，然后凭借一个设计竞赛的获奖作品，拿到了百度资深交互设计师的 offer。虽然现在回顾起来觉得这是一个非常明确的方向，但当时的我也比较困惑该如何取舍。一是自己感性上非常喜欢的图形设计方向，二是自己理性上比较看好的用户体验设计方向。我知道需要做一个明确的选择，因为时间精力有限，要把事情做好，就需要在放弃中做选择。促使我最终选择走上交互设计师道路的是我当时在 HP 的一个项目经历。当时 BU 要做一个企业级的创新产品，但团队里面当时没有产品经理的角色，只有项目经理、开发负责人、设计负责人，基于前两年跟程序员们天天泡在一起的协作关系，我在这个项目里承担了约 50%的产品经理的工作。当我从 0 到 1 的思考一个产品的时候，我得到了一个全新的看待工作、看待设计、看待问题的角度。同时我觉得，只有经历了那样一段把长时间把自己榨干、并不得不迅速吸收各种信息，从而逼迫自己快速成长的时期，才有可能真正理解自己的存在方式应该如何，并且应该如何做进一步的选择。第二次转型：专家转 Leader，角色转变并非一蹴而就这次转型让我放下自己的天真，来到更为残酷的职场环境中。和很多想进大厂的人一样，刚到百度的设计团队的时候，我抱着一种“求学”的心态。但后知后觉，其实公司不是学校，公司里并没有什么人在做学问、做研究。相对于专业领域的讨论，大家更关心业务问题如何解决，跨部门如何协作，以及如何避免踩坑和背锅。所以大厂待几年，专业谈不上有多少精进，扯皮的功力倒是提升不少。关于走专家路线还是管理路线的问题，从当下的互联网设计环境以及职业发展的现实角度来讲，选择带人转管理是相对更容易的一条路，是一个相对更安全更保守的职业选择。但什么时候转呢？是越早转管理待人越好吗？怎么转呢？团队内部没啥机会给我怎么办？我从能力、动机、机会三个方面分别展开一下：1. 能力能力是基础，首先你得具备能力才会获得机会。只有你已经具备成为 leader 的能力，你才会获得成为 leader 的机会。这是很简单的道理，但是有人就是想不明白，自己不做任何准备，干等着。如果你想成为一名设计 leader，那就看一下成为一名 leader 需要具备的能力有哪些，自己还差在哪里。比如项目管理能力、设计指导能力、设计决策能力、沟通协作能力、抗压能力、与不同的人打交道的能力、对一整块业务设计工作的把控能力等等。抓住实现转型前的临界状态，去提前锻炼自己。比如说，如果自己所在的团队人员数量比较少或者没有实际条件让你去带一个小团队，那可以先创造机会从“导师（mentor）”这个角色入手。新入职同学的试用期导师、设计实习生导师，等等。这样的角色可以让提前进入设计 leader 的“实习”状态，同时也会提前锻炼自己的设计指导能力、沟通协作能力等。同时，还要与自己的直属上级建立良性的信任关系，扩大自己在设计团队内的影响力，积累自己的能量的同时，通过专业分享，独立负责重点多人项目等形式释放自己的能量、扩大自己的影响力。2. 动机你为什么想要转管理，做设计 team leader/manager？是因为会获得更高的工资、更高的职位？这可能也无可厚非，但从公司的角度来看，这个问题的最佳答案是你可以承担更大的责任，为公司解决更多的问题，为老板分忧解难。只有这样，才有足够的理由让一个人成为一个组长、干部，带领一个小 team 更好地前进。说实话，我自己本来是不想转管理的，但设计专家这样的角色在国内大部分团队中都会有些许尴尬。设计专家的职级与 leader 一样高，薪资也差不多，但专家所负责的业务宽带较小，如果一个人都不带的话，动手做执行的时候会面临“挑活儿”的问题。一方面，设计专家觉得自己不适合再做一些比较简单基础的设计工作了，另外一方面，团队内可能不太可能一直有很多重点项目只给设计专家来做。所以我想，很多团队还是处理不好这种设计专家资源在团队中的定位和使用的问题。不得不转 leader 的原因还有，我想要解决更大的问题，不光是眼前几个页面的交互问题，我想要提升整个产品的设计水准，运用设计思维让业务可以得到更好的发展。这样的动机和目标，专家岗是无法实现的，因为组织的关系，如果自己没有在一个团队 leader 这样的信息节点上，很多事情只能道听途说，业务上的很多信息自己也很难拿到。到头来，可能还是只是一个抱着砖头的大头兵。3. 机会机会的出现，接近于玄学。虽然我们不知道什么时候机会可以准时出现，但我们可以为机会的出现做好充分的准备。在我晋升完 P7 一年，并下决心转管理之后，我去找我当时的老板当面聊了一下。他当时所负责的团队已经有 40 多名设计师了，我想他可以为我留意一些发展机会。当时聊的时间非常短，我记得可能也就十来分钟的时间。他当时没有任何表态，但那次聊完的一个月后，他打电话跟我说，有一个 9 个人的小团队需要有人来带，问我是不是有意愿。回忆一下我当时跟他聊的十分钟里，我主动说了这几句话。第一句：一起共事挺长时间了，您觉得我的工作做的如何？第二句：在过去的两年时间里，我的能力有所提升，比如我做了 XX 事情。看起来，你也是认可的。第三句：我想我有能力可以承担更多的责任，帮你解决更多的问题，希望你帮我留意一下机会。第一句和第二句讲能力和贡献，第三句讲动机，站在对方的角度，把自己的诉求描述清楚。点到为止，不给老板压力。以上说的是内部晋升机会的主动争取，如果内部实在没机会了，就只能 transfer 或者跳槽。通过跳槽实现管理转型，也需要谨慎。很多人通过跳槽实现了自己的管理转型，比如“大跳小”的方式。自己在大公司是不带人的设计师，想要有新的职业发展，所以跳槽到更小规模的公司。这种“大跳小”的跳槽方式，看上去是一种晋升，但实际上是一种平跳。因为实际上是在拿自己的大厂资历做了一次变现，或者说是等价交换。所以在“大跳小”换机会的时候，一定要非常谨慎。因为这样的机会，一个人一生也没有几次。所以，一是不要着急把自己的大厂经历变现，选公司要看清楚；二是要看好时机，不要太早，也不要太晚。我看到过不少同事，变现太早，后续发展乏力。就是在大厂刚混了一两年，还是个 P5/P6，就着急出来，这就挺不值的。或者呢，也有些同事在大厂呆的太久，呆到六七年以上了，后期真的很难出得来。前面讲的是先具备能力、动机，然后在努力获得机会的情况。而现实场景中，还有很多人是先获得机会，其次再补充能力。就是虽然自己还不太行，但机会来了，就上了。这种情况也非常常见，只是有人能意识到自己能力不足，有人意识不到罢了。同时，即便你顺利得到了 team leader 或设计经理的职位，但并不代表，你就已经是一个合格的、出色的 team leader 或设计经理了。真正得到这个职位之后，还需要经历大概 0.5 年到 2 年不等的转型期。这个转型期的长短取决于每个人的积累与管理天赋。所以我对转型中的设计 leader 有两点建议：① 重视专业积累如果自己的专业能力和工作经验有了充分的积累，专家转 leader 在操作难度上是非常自然的，反之将会困难重重。如果自己在专业上没有话语权，不能成为一个小型业务环境里的那个设计专家，那么也很难建立领导力，自然带团队也带不起来。虽然不是每一个设计师都希望自己的 leader 是个球队教练，但几乎每一个设计师在成长期都希望身边有个专业上厉害的人带一带自己。如果说我在职业发展上有什么优势的话，那只能说得益于我在专家岗上逗留纠结的时间足够长，自身专业能力的积累足够过硬。这一点，才使得我可以在设计序列这个天花板比较低的小世界里生存更久的时间。② 管理目标，管理时间，管理项目，但不要试图管理设计师多“带”，少“管”。思考大家是不是服你，某某是不是对你有意见，这样的问题非常无聊并且是在浪费时间。也许你已经可以决定下属的绩效和去留，但请不要那么急切的认为自己已经完成了“管理者”的转型，实现了阶层跃迁（这类的想法就非常可怕）。带队不超过 10 个人，其实很难谈得上团队管理。设计 leader 的主要任务还是带领团队一起做出更好的设计，这个角色首先是多个设计师中的核心责任承担者，所以还是需要把注意力集中在事情上，管理好团队的阶段工作目标与执行计划，管理好大家的时间和日常安排，管理好重点项目的协作与推进，然后再多关注一下每位小伙伴的个人发展，自然而然团队也就带好了。第三次转型：从经理到总监，二级管理者的转型这次转型让我跨过了“35 岁”职业危机，获得了更为宽广的设计视野。你是否在以设计总监作为自己的职业目标？但如果没有做过设计总监，那么如何获得一份设计总监的工作呢？除非你是业内大咖，影响力爆表，否则如果没有带过 30 人以上设计团队的经验，应该不会有公司会冒风险让你去空降做管理。所以大部分人迈上这个台阶的第一步，大都还是通过内部晋升。这种类型的晋升机会，只有可能会在以下 3 种条件下出现。一是公司业务发展迅速，设计团队的规模也得到了快速发展。比如从 10 人快速发展到 30-50 人，然后趋于稳定。在这样的过程中，10 人团队时的设计 Leader，就获得了直接的晋升机会。二是一个团队的设计负责人突然离职，职位空缺。这时公司会考虑选择外部招聘，还是内部晋升，还是找其他人（比如产品负责人、运营负责人）代管设计团队。通常外部招聘的可能性更大。三是公司本来有几个小的设计团队，隶属于不同的业务，随着公司的发展以及对设计认知的提升，以及公司整体组织架构的科学性，会考虑把分散的小团队整合成一个大的设计团队。这时候就需要一位设计负责人来整体负责。我遇到的是第三种。说实话，这三种情况都是小概率事件，中国也没有那么多个中大型的设计团队，再加上总监级的设计人才跳槽换工作的频率也比较低，所以总体上也没有那么机会出来。能够得到那次晋升机会，得益于一次述职汇报。当初我从百度出来跳槽到 Z 公司，拿到的虽然是设计总监的 title，但只是在 Z 公司的一个子业务管理一个小型的设计团队，不到 15 个人。后来公司安排那段时间新入职的总监级员工给公司高层做一次述职汇报。当然，CEO 也会参加。遇到这样的汇报机会，有谁不会认真准备呢？况且自己还是一个那么容易上场昏的人。我认真准备了汇报材料，还为当天的汇报写了逐字稿。虽然 PPT 没有做地很精美，但我对如何从公司的角度思考自己的设计工作，这方面想了很多。后来汇报就挺成功的，几个月之后，公司进行组织架构调整，老板问我是否愿意带领更多的设计师，把公司的设计做地更系统一些。因为上次听过我的汇报，觉得我的设计思维比较成熟。我接受了。但后面的事情，我也并没有想到。当你真的得到了公司的设计负责人的 title 之后，挑战才刚刚开始而已。工作内容和工作带宽一下变得很大，每天要处理很多不同的信息。公司对你的要求也在一夜之间提高了一倍。但没有人也没有时间给你机会让你慢慢成长。也就是说，职位虽然到了，但能力没有很快跟上。很多之前没有遇到过的问题涌上来，等着你做决策。设计团队的设计师们每天都在看你，下一步会做什么，可以带着大家做什么。不夸张地说，在获得晋升之后的几个月内，我一直处在一种诚惶诚恐的状态中。我没有办法特别清楚地知道，我该怎么调整自己的工作状态。我每天都在反思，我是不是在以一种正确的方式在工作。我是不是看起来只是一个带着更多人的大 leader，而没有为整个设计团队负责，主动去做一些事情？设计流程的优化、设计资产的沉淀、设计师的晋升与招聘、日常设计项目的评审与抓放，现在想起来，因为经验不足，可能当时做的很多决定都不够果断，有一些决策也未必完全正确。但至少问心无愧，在那个时间，我做了自己应该做的事情，尽可能的扮演好自己的角色。成为一名更好的设计管理者，也是有方法的。宝洁公司一度被称为职场人的黄埔军校，宝洁内部有一套自己的人才培养体系，其中面向管理人才的一门基础课程，叫做 5E 领导力。领导力不等同于管理。有了领导力，团队的管理往往水到渠成，没有领导力，团队的管理只能是无米之炊。5E 领导力模型分为 Envision（高瞻远瞩）、Engage（全情投入）、Energize（鼓舞士气）、Enable（授人以渔）、Execute（卓越执行），这五个方面概括了成为一名优秀的领导者需要具备哪些特质。5E 领导力是每个二级管理者（或者高管），都需要按照其要求不断提升自己的基础模型。有时我也用 5E 领导力模型来要求我团队里的 leader，相信这会对他们的下一步成长有所帮助。最后，我想说成为设计管理者，不是设计师职业生涯的唯一出口，也不是设计师所谓“迈向成功”的必备路径。设计师的事业成功，不应该通过职场头衔的高低来衡量，而应该始终以作品说话，取得设计师应该取得的在设计领域内的成就。如果过分执着于职级与薪资，醉心于职场宫斗权谋，只会让自己逐渐变得堕落和腐朽，最终难逃出局的命运。如果你觉得自己有能力带领一个设计团队，如果你正在带领一个设计团队，无论大小，应该努力让团队因你而不同，让设计工作因你而不同。在设计方面成为那个能量最大的人，并且分享自己的能量、动力、理念、视野、经验、知识给团队，带领大家一起前进。共勉。感恩在 15 年职业生涯中遇到的每一个人。欢迎关注作者微信公众号：「柴林的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/designer-career-planning-2
用户 产品 目标 随着 4G、5G 的普及，移动互联网进入成熟时期。用户体验的概念变得越来越普及，互联网进入了用户体验为王的时代。那么为什么要强调用户体验，做用户体验的目的是什么？很多人会说用户体验好，才会有更多的人使用，产品的用户量才能越来越高。那么真的是这样吗？这是本文讨论的重点。相关讨论：如何平衡用户体验和商业收益？来看高级设计师的教程！吴轶 ：用户体验有的时候是和商业化指标KPI 相矛盾的，那我们在设计一款产品的时候如何用量化的方式获得商业化指标和用户体验的均衡？阅读文章 > 一、什么是用户体验用户体验是用户在使用产品过程中建立起来的一种纯主观感受，是用户在使用产品过程中建立起来的一种纯主观感受。用户体验的提升主要包含以下两个方面：从宏观上来说，用户体验就是提升整个产品所能触达到的服务。以滴滴打车服务为例，当用户使用滴滴出行 App 打车时，涉及的触达点有上车前、坐车中和下车后。这 3 个接触点构成了产品的用户体验。而“打开滴滴出行 App输入目的地与司机电话联系并确认具体位置上车在车中到目的地 扣款评价”这整个流程就是用户整体的用户体验。也就是说，好的用户体验不仅仅指的是用户对产品 App 的好感度，还指的是用户对整个服务流程的好感度。从微观上来说，用户体验就是提升 App 产品的用户体验。腾讯旗下最大两个日活产品是微信和 QQ，他们整体的用户体验做的很不错，但是他们的用户体验的出发点却不同。QQ 的用户体验是针对所有不同的用户群，他们的体验是为讨好不同的用户人群，这也就是导致了 QQ 这个产品越来越复杂，信息干扰元素越来越多。QQ 的对话框，用户可自定义样式和字体，表面看起来满足了各个用户的需求，但是对于接收人群来说，在提取信息过程中存在干扰，不利于信息的获取。QQ 空间，用户可以对单个图片进行评价，在看图片详情，评论会以弹幕对形式展示出来，提升了用户获取信息的效率，但是缺点就是看信息不聚焦。无法全心全意看核心信息。那么 QQ 体验不好吗？其实也是挺好的，很多地方很人性化，过于人性化的同时不可避免导致信息获取难度变大。QQ 的设计逻辑总结：满足各个不同群体的用户需求。只考虑使用的用户人群感受，对其他角色（接收者角色）用户人群几乎不考虑。微信在设计中，更多的是考虑全局用户人群。不会因为有的用户需要个性化需求，对其设计。更多的考虑是整个产品的生态。同样的对话框，朋友圈动态，图片详情查看，都保持极度简洁，不可否认这伤害了一部分用户（发送者角色）的需求体验，但是对于绝大部分接收信息的用户者来说却是友好的。微信的设计逻辑总结：所有角色整体考虑，在考虑角色 a 的使用需求，同时还要角色 a 的使用需求给角色 b、c 亦或平台所带来的影响（这点很重要，也是我们在做设计的时候很容易忽略的）整个产品的定位以及平台生态考虑，考虑需求或设计时先全局再局部。微信的用户体验体现在全局的战略智慧。更多的是从整体出发做产品的体验。所以微信能从当年 QQ 这样的庞然大物中异军突起。二、为什么要强调用户体验用户体验是为用户着想，解决用户的问题，让用户在使用过程中更顺畅愉悦。用户体验的核心目的是为了拉新和留存。拉新很好理解，即利用口碑传播，减少新用户的拉新成本。产品拥有良好的用户体验，产品能获得更好的口碑和传播为产品用户增长提供坚强的后盾。同时可以提高产品的用户留存，减少新用户的流失，减少用户拉新成本。同一种类型的产品，如果产品的用户体验好的话，可以达到 60%以上的留存，但是如果体验不好的话，留存可能只有 10%以下。那么这两个产品留存用户数就存在六倍以上差距。用户高留存是产品能否健康发展的基础，高留存背后核心指标之一就是用户体验，用户体验好，则留存高，反之留存低，产品无竞争力。也有一些产品做用户体验更多是为了做品牌宣传，例如夸克浏览器等产品。三、用户体验与商业化的对立用户体验，即主要服务于使用用户，通过设计的方法提升用户在使用过程中的用户体验。而商业化产品则明显和单纯的服务于用户人群相排斥。即商业化和用户体验大部分时间是互斥的。产品的目标大部分都是包含商业化，即通过提升商业化收入。通过从用户那里获取价值或收益，这一过程不可避免需要以牺牲用户为代价，获得利益，在这一过程中又是损坏用户体验的过程。百度在不涉及到商业利益时，无论是搜索推荐，还是搜索结果展示，都很能命中用户的痛点，其用户体验感受是完全优秀的。但是涉及到商业利益时，其竞价排名策略完全凌驾于用户体验之上。前面的搜索结果全是广告，严重误导用户。所以对于百度来说，涉及商业化的时候，用户体验不会优先考虑，会专注做产品的商业化收益设计。当然有一些好的产品商业模式，其巧妙的商业模式，使得用户体验和商业化之间不存在严重的对立，反而是双方互利共赢。例如「什么值得买」这个产品。通过向用户推荐物美价廉的产品，基本是全网最低价，用户通过其链接跳转到各个平台，用户成交后，可以得到部分卖家设置的提成佣金，从而得到盈利。所以什么值得买的产品目标就是，提供更优质的产品推荐内容和操作体验，从而获得更多的用户和成交，使得双方达到了共赢。下图为用户点击链接，跳转到对应的京东热卖，交易完成，会得到卖家的提成佣金。四、产品的设计立场是产品目标产品前期发展过程中，拉新和留存可能就是产品的首要目标，是为产品服务的。所以提升产品的用户体验是为产品的目标而服务。在这个过程中要强调目标用户的用户体验。产品到了稳定期，公司为了生存获益，这时候产品的目标就是商业变现，这时候当用户体验和商业化存在冲突时，就会牺牲产品体验，但是也不能过度牺牲用户体验，不然会影响到后续的商业化变现。作为产品经理或者设计师。我们偏向的角度更应该是公司或者我们的产品平台，而不是单纯的用户，当用户可以为我们的产品创造价值，在这个互利共惠的过程中，我们需要考虑体验去讨好用户，在产品商业化和用户体验中找到平衡点。但是在不同的阶段，产品目标会不同，所以我们需要确定核心目标，并拆解产品目标转化为对应的设计方案。五、产品目标和体验的区别用户体验只是产品目标里面其中的一环，如下图所示：当产品目标是盈利收入，则产品目标就是如何提升商业化收益。当产品当目标是提升用户留存，则这时候产品目标就是用户体验当产品目标是协助公司大战略方向时，则产品的整个形态和信息架构可能都需要调整。当产品目标是为了快速拉新用户，则设计可能就需要做用户裂变和各种营销活动。六、产品目标决定用户体验产品拥有什么目标，就决定了用户体验友好程度。如果对于 C 端产品，产品的第一阶段，主要做产品的用户量，在这个过程中，产品目标就是用户的快速增长，为了达到这个目的，用户体验是首先要考虑，其次是产品的裂变拉新，用户活动等等一系列措施。产品到了第二阶段，这一阶段是保持业务的稳定增长，在这个过程中，产品的目标是为业务增长服务的，当用户体验和业务两者出现冲突时，很可能是偏重业务而轻用户体验。产品到了第三阶段，这一阶段，产品到了成熟期，接下来就要考虑变现。产品的最终目标都是为了变现，为了变现，肯定是会伤害产品的用户体验钉钉的用户体验是从领导（管理者）的角度出发，努力抓住领导者的需求，并将管理者的体验做到极致。但是领导者和员工之间天生就存在一定的对立关系，这也导致了为什么钉钉在普通员工中的口碑极差，甚至谩骂。但是钉钉依旧是公司内部协同的首要选择。钉钉牢牢抓住了核心用户群。下图为钉钉的部分截图：总结：产品目标决定了用户体验。体验只是整个产品目标的一环，同时用户体验也是服从于产品目标。以上是我的个人感受和总结，欢迎大家留言评论。欢迎关注作者微信公众号：「ASAK设计」本篇来源：优设网原文地址：https://www.uisdc.com/user-experience-design-direction
工具 干货 视频剪辑 大家好，这有可能是 2022 年最后一期干货素材合集了！这期合集和往期一样扎实，有如同电影一样屏幕录制的录屏软件，有专业处理截图的实用工具，有完全自定义 SVG 背景的小工具，也有基于人工智能的视频剪辑和头像生成工具，不过我最喜欢的还是免费设计素材搜索引擎和无限可视化画布。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第三波！2022年12月精选实用设计干货合集大家好，这是 12 月的第 3 波设计干货合集！阅读文章 > 下面我们具体看看这一期的干货：1、基于人工智能的视频剪辑工具https://www.descript.com/也许你对视频剪辑并不熟悉，但是对于编辑文档应该不会那么陌生，所以这个名为 Descript 的视频剪辑工具，你应该可以较快上手。Descript 的操作逻辑和传统的视频剪辑工具有所不同，它更接近于是文档编辑的交互方式。基于OpenAI 的 Descript 会将视频中的文本内容识别出来，软件会自动识别句子和段落，你可以像编辑 PPT 一样增删内容，调整内容布局，同时它还可以免费访问大量的第三方素材，方便你剪辑。Descript 的基础套餐是免费的，感兴趣的同学可以上手试试看。2、无限可视化画布工具https://obsidian.md/canvasObsidian Canvas 是一个全新的脑图和白板工具，它提供一个近乎无限的空间来供你梳理和呈现想法，你可以轻松地将图像、文本、链接、视频、音频、PDF 文档等各种类型的素材直接嵌入进去，进行交互式地标注，你甚至可以让画布和画布互相嵌套，让所有内容之间的关系全部可视化地呈现出来。3、免费设计素材搜索引擎https://mrfreetools.com/如你所见，Mr.Freetools 就是一个免费工具合集网站，不过由于收录的各种工具太多，所以你可以根据自己的需求直接在站内搜索关键词，网站会匹配出最可能帮到你的各种设计工具和素材。值得一提的是，网站本身有非常明确的分类，你也可以根据分类来筛选。4、SVG 渐变完全定义工具https://www.magicpattern.design/tools/mesh-gradients这是一个自定义灵活度极高的一款 SVG 渐变生成器，除了完全自定义配色之外，还可以编辑其中的噪点、弥散效果、对比度、明度等各种参数。这个 SVG 生成工具是 MagicPattern 工具箱内诸多工具之一，你可以探索一下整套工具箱中其他的功能。5、超强的动态录制剪辑工具https://www.screen.studio/是否担心基于屏幕录制的视频内容会显得很单调？如果你使用 Screen Studio 就不会有这样的问题，这个录制工具和传统录制工具最大的不同在于它会如同电影动画一样，来处理你的录制过程，它会让镜头跟随着的你的光标移动，如同电影转场一样自然调整画面，动态模糊的效果会给你处理的相当自然和谐。6、人工智能游戏风头像生成工具https://www.heropack.me/Heropack 是一个灵感来自于游戏的 AI 生成头像的付费服务，和很多其他同类的服务不同，它完全专注于将用户头像风格游戏化，它有针对性地将用户头像结合深度学习生成各种经典游戏的风格，而这种高度定制化的服务，也是它收费的原因。如果你真的对于某个游戏极度拥有情怀，那么可能这项服务可能会正好贴合你的需求。7、简约且足够有格调的截图工具https://wrap.so/Wrap 是一个非常强大的浏览器扩展插件，它可以轻松捕获截图，并且生成相当精美效果。在这个插件的协助之下，你可以在极短的时间内，快速调整截图的边界效果，选择背景颜色和效果，优化阴影效果，调整纵横比，力争让整个截图以最舒适好看的效果呈现出来。本篇来源：优设网原文地址：https://www.uisdc.com/2022-12-design-resources-vol4
网站 日本 作品 大家好，这里是和你们聊设计的花生~提起浮世绘大家肯定都不陌生，其中最为我们所熟知的莫过于葛饰北斋的《神奈川冲浪里》。日本浮世绘具有细腻丰富的线条、简洁的着色及充满想象的图案，具有极高的艺术价值和影响力，也是很艺术家偏爱的一种插画风格。葛饰北斋《富岳三十六景》之二十一《神奈川冲浪里》今天为大家推荐一个宝藏网站「Ukiyo-e.org」，它收录了 223128 张浮世绘作品，几乎涵盖了浮世绘从初期到末期的整个发展时期。支持以图搜图，并提供高清大图的免费下载，一起来看看吧~用这篇超全面的好文，带你了解日本浮世绘的前世今生（上）很多朋友都曾听说过浮世绘，但对其认识非常有限或者曲解，比方有人甚至简单将其理解为日本春宫图，是非常严重的误解，所以本期开始我们将努力为大家科普纠正，而首当其冲要讲述的，是浮世绘如何诞生的问题。阅读文章 > Ukiyo-e.org网站直达： https://ja.ukiyo-e.org/Ukiyo-e.org 是一个公益性质的日本浮世绘数据库和检索引擎，由 John Resig 于 2012 年 12 月创建，旨在帮助研究人员研究日本木版画，网站目前收集了来自 24 个机构的超过 223,000 幅版画。Ukiyo-e.org 网站首页对庞大的数据，网站采取按时间顺序、以画家为主的方式进行分类排列，分为初期 (1700-1740)、錦絵 (1740-1780)、歌麿 (1780-1804)、1804-1868、明治 (1868-1912)、新版画/創作版画 (1915-1940)和 1950 年以来 7 个时期，每个时期下方包含该时期的代表画家，浏览下来可以清晰的了解浮世绘一路的风格发展历程及相关的重要画家及其作品。网站共收录了 150 名浮世绘画家，其中 1804-1868 和明治时期收录的画家最多，分别为 31 位和 37 位，当中就有很多我们熟悉的浮世绘名家，比如歌川广重 、葛饰北斋、歌川国芳、溪斋英泉、月冈芳年等。梵高就曾临摹过歌川广重的作品。歌川广重的《名所江户百景·新大桥》与梵高临摹作品，1887 年歌川广重的《名所江户百景·龟户梅屋铺》与梵高临摹作品，1887 年葛饰北斋《富岳三十六景》之三十三《凯风快晴》月冈芳年作品据官网介绍，网站内的资料都收集自世界各地的博物馆、大学、图书馆、拍卖行和经销商的数字资料库。点击进入网站内的作品后，会有关作者、名称、创作日期、资料来源等信息。点击 「详细信息」可以进入该图片的原网址，里面有关于该作品更详细的介绍，点击「下载图片」可以保存原图。每个被收集的印刷品图像都会被分析，并与数据库中所有其他印刷品图像进行比较。相似的印刷品会显示在一起进行比较和分析，同一印刷品的多个不同尺寸、颜色额的副本会自动排列在一起（如下图），并可在画廊中查看，对于寻找资料来说非常便捷。网站另一个点就是可以通过上传图片或者复制图片链接查找类似的图片。操作的入口就在网站首页的右侧搜索框，第一排搜索框是文字搜索，第二排搜索框是以图搜索。将我们前面提到的作品上传，网站就能自动识别并推荐相关的结果。将《神奈川冲浪里》上传识别后得到的结果以上就是今天为大家推荐的浮世绘宝藏网站 Ukiyo-e.org，它值得收藏的理由包括：收录 223128 张浮世绘作品，几乎涵盖了浮世绘从初期到发展末期的所有作品；作品分类明确，支持以图搜图，并可以一键下载高清大图。网站直达： https://ja.ukiyo-e.org/喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：用一篇超全面的文章，帮你掌握日本浮世绘的流派与风格上一期《日本浮世绘是如何诞生的？阅读文章 > 国风参考必备！6500份高清素材的「数字敦煌开放素材库」大家好，这里是和你们聊设计的花生~近日，敦煌研究院和腾讯联合打造的“数字敦煌开放素材库”上线了，号称是内容最权威、最官方的敦煌学研究开发素材库，也是首个基于区块链的数字文化遗产开发共创平台。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/ukiyo-e-org
原型 屏幕 界面 如今 App 和网页可交互原型的制作方法和设计流程早已普及，但 HMI 可交互原型制作方法和设计流程还处在探索阶段，比起只需考虑屏幕内交互的 App 和网页，HMI 还要考虑屏幕在汽车内的位置。这次带来一篇相关译文，文章的作者 Casper Kessels（德国 Snapp 汽车软件公司设计总监），使用 VR 来探索 HMI 可交互原型的设计制作。本文译自：https://www.theturnsignalblog.com/blog/behind-touch-concept原文作者：Casper Kessels（德国 Snapp 汽车软件公司设计总监）往期HMI干货：HMI的点击区域应该多大？总监上路帮你实测！设计师都知道根据《苹果 iPhone 人机界面设计指南》，手机 UI 的最小点击区域是 44px。阅读文章 > 在过去的几周里，我设计了一个新的概念原型，用于测试在汽车中触摸屏的交互。在这篇文章中，我想聊聊我遵循的设计流程和迭代过程。一、行动和目标下图是我遵循的简略设计流程。现在汽车 HMI 界面复杂的主要原因之一是功能太多。所以在开始时，我退一步评估了人们在汽车中真正需求是什么，并以此为基础进行了设计。我首先列出了一辆典型汽车的所有功能，并研究了这些功能实现的潜在目标。例如，提高风扇速度的潜在目标是更快地降温。最终得出一个包含 20 个目标的列表，我将其作为设计界面的基础。但在将这些目标转化为具体界面的过程中，我很难走出第一步。在大多数项目都存在一些限制，如屏幕大小、图像性能、时间、预算等。如果没有这些限制你可以自由地做出完美的设计，可有限制就很难起步了。最困难的问题是没有真实屏幕硬件。为根本没造出来的汽车屏幕设计界面是很困难的。所以我希望至少有一个真实屏幕硬件让我能做实验。我画了不同的屏幕布局，但仅凭一张糟糕的草图很难判断出哪个设计方向更好。所以我更进一步打算在 VR 中探索。我的草图二、在 VR 中探索屏幕布局我很想在真车或模拟器上测试屏幕布局，但新冠病毒危机让这变得相当困难。我不得已退而求其次用 VR。我没有 VR 眼镜，但感谢谷歌 Cardboard，我可以用手机加纸壳当 VR 眼镜。我们的目标是探索屏幕布局可能性的大致概念原型，而不是创造一个精确的内部布局模型。我不想花几个小时搭建精确模型。谷歌 Cardboard（译者配图）首先，我找到一个包含内饰的免费汽车 3D 模型。我把 3D 模型拆开，创建了三种不同的屏幕布局方案，用于后续探索。车内屏幕示例在 Unity 中，我导入谷歌 Cardboard SDK，并修改了默认场景。我又导入汽车模型并下载了一个免费的道路素材。我的 Unity 屏幕不到一个小时，我就配置好了一切，开始在 VR 中探索场景。Unity 中 三种屏幕布局之一这三种不同的屏幕布局是根据目前汽车公司的发展方向而选择的。我发现把屏幕放在司机的视线附近最不会让人分心。因此，小屏幕横放是最佳选择。三种屏幕布局三、草图和线框图在确定了屏幕大小的方向后，我将目标转化为界面就没那么困难了。我很早就明白必须对功能进行分组才能开展设计。我按多媒体、环境控制和导航功能进行分组。另一个核心理念是，我希望用户尽可能少点击来实现他们的目标。我基于可调整大小的窗口做了一些简单的布局。我的想法是，在一个平面上呈现所有东西会尽可能简单，并能最大限度地减少点击次数。我画的窗口布局的简略线框图然后，我为每个功能分组设计草图和线框图。同时对屏幕布局做一些小的调整。四、快速原型想要找到像调节音量一样直接控制的交互方式是很难的。我在之前探索汽车手势交互的概念原型的基础上提出了一个新想法。为了更具体地了解它的工作原理，我使用 Axure 制作了一个非常简单的可交互原型。点击并按住屏幕边缘会显示一个覆盖层。通过滚动到喜欢的位置并释放，选项就会被选中。我认为这个方案有潜力，所以我把它整合到概念原型的第一个版本中。五、第一次迭代第一个概念原型很简单。它在屏幕底部有一个菜单栏，上面有导航、媒体、环境控制和摄像头功能。导航总是覆盖屏幕的左半部分，其他功能总是覆盖屏幕的右半部分。每个菜单项都可以进入全屏模式。我还做了一点简单的视觉设计，使原型变得栩栩如生。我在 Figma 中设计了所有界面，并使用 After Effects 创建了两个手势交互的动画。一个用来控制音量，一个用来调整温度。反馈我联系了有汽车设计经验的设计师，寻求他们对这个概念原型的反馈。从他们的反馈中，我们可以清楚地看到有三点要改进。使用可调整大小的窗口非常受限。如果使用多层级界面而不是窗口，那么界面就有更多的自由和空间。第二点是这个概念原型系统功能过于宽泛。相反，当你开车时，你只需要导航和多媒体功能。这些功能应该是基本功能，其余都是额外功能。在这个概念原型中，所有功能都同等重要。最后一个建议是，这个概念原型相当保守。这是为现在市场上的汽车设计的。而在汽车行业，由于开发周期较长，设计师需要提前设计 3-4 年之后的汽车。所以我不应该害怕创造新的概念原型，应该同时使用不同的屏幕，并着眼于 3-4 年后的用户体验。六、第二次迭代我把上一个原型中反馈的问题在这次迭代中改进了，并更多关注导航和多媒体功能。我还想看看是否可以围绕菜单栏进行设计，创造更自然的交互。所以我尝试将菜单栏转换为一个 3D 多层界面，每一层都对应一个驾驶模式。第二个原型使用分层系统而不是菜单栏最高一层是”通勤模式“，展示多媒体、环境控制和导航功能。其次是“导航模式”，以导航为中心。最后，还有一个“专注模式”，界面菜单占用空间最小。每个模式都对应一个类似的仪表盘界面。用户可以通过方向盘上的按钮或与中央屏幕交互来循环切换这些模式。我遇到的问题是没有控制环境的地方了。我想了一个办法，把控制器分开，放在不同的屏幕上。这样中央屏幕界面更加简单，有助于整个系统的可用性。反馈我已经注意到，在设计这个概念原型时，我引入了许多不必要的复杂性。其他设计师和我交谈也得出了同样的结论。使用层和驾驶模式相结合的想法很有趣，但太复杂了。理想的解决方案是将第一个概念原型和第二个概念原型结合一下。另一个观点说，这些多层级界面看起来相当混乱。所以在最后的概念原型中，我需要找到一种视觉风格，最大限度地减少混乱，使它看起来更简洁。七、最终版本在最终版本中，我删除了在不同驾驶模式中切换的交互。我想保持专注模式的理念。因此，我没有使用 3D 多层界面在驾驶模式中循环切换，而是将两个主要控件放在屏幕的角落，让用户决定他想要显示什么。最后，我在 VR 中测试了这个概念原型，看看控制的可达性如何。我曾担心多媒体按钮会被放置得离司机太远而不舒服。在用谷歌 Cardboard 在 VR 中观察后，我注意到情况并非如此。然而，我使用的车辆 3D 模型的车内空间不大。在大型 SUV 中，这仍然是一个问题。所以这将是下一个版本概念原型需要改进的地方。我还为准备了一个更沉着的视觉设计风格，这有助于减少界面层级的混乱样式。最终的概念原型其结果就是我在上一篇文章中提到的概念原型。像本文提到的这种的项目没有终点，我将继续改进和迭代。我已经收到很多读者的评论和反馈，这将有助于改善概念原型！因此，如果你有任何意见，我会很乐意接受！本篇来源：优设网原文地址：https://www.uisdc.com/hmi-prototype-design-process
用户 品牌 页面 Hey，亲爱的小伙伴，你期待的旅行是什么样的？很高兴在 22 年末，智行 10.0 带着轻快的步伐与大家见面啦！新年新面貌，全新智行希望为小伙伴来年的旅途提供更优质服务，增添一份好心情。下面就来看看，智行 10.0 的构思与成果吧～更多改版案例：如何让图标更吸引人？复盘智行 Tab 图标设计过程OMG！阅读文章 > 智行，作为一站式旅游出行平台，已覆盖火车、机票、汽车票、酒店等业务。近年来，更是以亲民的价格吸引了越来越多的年轻用户，其中 90 后及 00 后占比高达 75.2%。前期调研中我们发现，与核心用户年轻化趋势形成反差的是，智行的界面风格调性更多被评价为“商务”、“严肃”。因此，褪去旧壳，以崭新活力之姿拥抱年轻群体是智行 10.0 需要探索的方向。项目初期，为使改版的感情调性更贴近用户出游场景，我们在团队内部及用户渠道收集了大量关于“旅行”的联想关键词，其中包括：愉悦、轻松、有趣、探索...等等。这些美好的词汇，描绘了大家对未知旅程的期待与憧憬。由此，我们提出「旅行，是对自由与快乐的向往」作为 10.0 升级的主线。我们希望通过 10.0 升级，提升体验及服务品质同时，打破工具类产品较为沉闷的使用感受，挖掘旅行中快乐的情绪内核，以轻盈有趣的设计传递“快乐旅行，自由出发”的生活态度，做有价值有温度的 OTA 产品。以此，我们确立 10.0 的设计目标：轻盈有序 · 打造高效预订体验情感传递 · 旅程的贴心陪伴者品牌外化 · 构建品牌记忆点一、轻盈有序 · 打造高效预订体验1. 全新 10.0 框架 更轻量智行始终致力于让用户订得高效、订得安心。然而扩充的业务场景和功能，使页面结构不堪重负，密集的信息和堆叠的模块影响了用户的预订体验。10.0 全新框架语言，希望通过有效的视重引导及清晰的页面展示，降低操作费力度，打造高效预订流程。“轻”头部色彩 操作更聚焦色彩是影响视重的重要因素。10.0 的升级中，我们将框架语言的背板色由品牌重色调整为明亮通透的浅色，有效将视重由头部转移至高频操作区，为用户营造专注沉浸的下单体验。同时，轻量的头部使页面更具呼吸感，缓解旧版“沉闷”、“商务”的视觉感受。“轻”信息展示 预订更友好清晰的信息展示可有效降低预订流程中的操作难度及决策成本。我们对页面信息进行分类重组，通过字号大小间距等手段扩大信息层级，凸显关键决策信息。并在有限的页面空间内，精简信息，降低信息密度，增加透气感，提升阅读友好度。2. 全新首页 让营销变有趣首页是获悉智行业务种类和流量分发的第一道关卡，业务入口的清晰展示对用户查找和后续转化极为关键。新版首页在使用 10.0 框架的基础上，用重色光感色块衬托智行四大业务入口，增强点击感。同时我们将业务线入口作为营销载体，融入动效，使营销活动的曝光更立体有趣，为各业务线导流及增长起到了正向的作用。二、情感传递 · 旅程的贴心陪伴者我们希望智行 10.0，不仅好用而且好玩，传递正向情绪价值，与用户共情，成为旅途中的贴心伙伴。我们通过 IP 植入、可视化以及创意的视觉唤新等手段一改智行往日“严肃”的形象，为用户提供更温馨友好的服务。1. IP“小智” 陪你环游世界智行 IP“小智”自诞生以来，机智可爱的形象圈粉无数。在 10.0 的升级中，我们将它融入更多页面流程，增加情感触点，提升智行的品牌亲和力。我们结合业务场景的同时，为“小智”量身打造了俏皮活泼的动作，塑造和饱满了它的性格特点，使其焕发生命跃然纸上。下单助手，高效操作有“我”指引下拉刷新，一票在手，极速出行空态场景，有“我”不再无聊2. 全新视觉语言 营造愉悦氛围视觉语言是传递产品调性的关键要素，围绕着“轻松愉悦出行”的基调及年轻的客群特征，我们对 10.0 的整体视觉进行了唤新。明快的色彩天空是纯澈与美好的汇集，正如旅行中探索快乐的本心。我们从中寻找灵感，从智行品牌蓝延伸出“纯净蓝”，并将其作为背景色融入核心流程页面中，营造蓝天白云阳光暖煦的视觉氛围。同时，我们提高了辅助色的明度和饱和度，让页面配色更活泼。圆润的图形我们用简洁流畅的外形结合大圆角，使图形在视觉呈现上更灵动 Q 弹。叠色的表现形式起到 1+1>2 的效果，使图形更丰富多彩～轻盈的插画插画用简约的造型风格，聚焦核心功能点的传达。视觉上以灵动的线条，搭配轻盈的高明度渐变，展现 10.0 年轻活力的品牌调性。3. 3D 现实映射 服务贴心友好调研中我们发现，预订流程中，用户面对复杂功能场景，时常存在这样的烦恼：功能说明长，读得脑壳疼看了半天不理解，迷迷糊糊下了单我是出行新手，那么多专业词看不懂呀...常说“字不如表，表不如图”，图像在传递信息效率和容量上都是文字的数百倍。10.0 的升级中，我们希望通过有效的可视化手段替代单薄苍白的文字表达，将信息化繁为简，提升智行服务的品质感及友好度。我们结合功能为用户搭建 3D 场景，通过营造真实的环境氛围，将现实映射运用到功能表达中，调动用户真实生活中的常规心理认知。同时结合生动的动画，将冗长复杂的功能说明以更直观友好的方式呈现。4. 趣味动效 转角遇到“小惊喜”旅行是快乐地出发，我们在下单流程中埋藏了许多有趣的彩蛋动效，为用户即将到来的旅程增添不期而遇的“小惊喜”。三、品牌外化 · 构建品牌记忆点1. 打造全新 UI 品牌符号品牌符号有利于品牌价值观的外化输出，为产品带来记忆点，同时高辨识度的符号能降低用户对品牌的认知成本，增加信任感和忠诚度。由此，我们结合业务属性及视觉创意打造了智行全新 UI 品牌符号～符号的由来创意上我们选取智行最具代表的火车业务为基点，从产品 logo 出发，衍生出抽象的火车造型。以光感的主题色渐变，增强呼吸感和透亮度。让符号“动”起来为了更生动地展现火车迎面驶来的速度感，我们将符号“动”了起来，穿梭如风的动态不仅象征抢票的高效性，也为原本静态的页面带来一丝小调皮。我们将其应用到了底 bar、一级页面切换等众多核心页面中。写在最后智行 10.0，从探索、落地、验证到上线，历时 10 个月。比心每一位设计师为之付出的努力。同时很开心，我们收获了用户对此次升级的认可和喜爱。随疫情的逐步放开，旅游业也将稳步复苏。正如开篇所说：「旅行，是对自由与快乐的向往」智行期待未来与你相伴，共同探索未知的世界，欣赏旅途的风景。2023 年，和智行一起，向快乐出发～本篇来源：优设网原文地址：https://www.uisdc.com/zhixing-10-0
工作 内容 项目 临近年终，我最近经常会收到大家关于述职报告和工作总结相关的问题。比如：“作为设计师，应该如何在述职报告中简短清晰的表述自己的工作内容 、设计产出和设计思考呢？我现在的情况是，对于工作内容和设计产出，目前只是贴出自己的设计稿和所做过的项目；再拿出项目中遇到的一些问题，写出自己对应的设计思考。但是写完后感觉又零散又混乱，请问有没有什么好的经验和写法呢？”我们每个人都会遇到向上级描述或总结自己工作内容的时刻。有时是以周或月为单位写报告，有时则是以季度或年为单位写总结。设计工作总结主要看的是两个方面：工作目标的进展和完成情况设计工作的方法和内容产出不同公司和团队对于设计师工作总结的要求也不尽相同。但我们都可以使用一套通用的总结思路作为基础。下文会为你介绍两个关键方法：“总分总” 和 “三步走”，不仅是对年度总结有效，对你的周报、月报也会有帮助。更多年终总结思路：设计师如何写好年终总结？我总结了4个维度！2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。阅读文章 > 一、采用“总分总”来搭结构“总分总”结构的优势不需要我多说，少年时期我们写作文也都是先总起全文，再分段描述，让读者可以在短时间内了解你的书写内容。“总分总”可以用在整体报告的结构上，也可以用在单个项目的总结上：1. 整体报告的 “总分总”在整个工作报告的结构上使用“总分总”的形式来呈现：总：先总述你本年度的工作内容分为哪几部分，以及整体工作的目标进展和完成情况（可以用你在年初制定的工作目标来衡量）。分：再以每个项目为单位，具体说明每一部分工作的进展、方式和完成情况。总：最后总述对于本年度整体工作的自我评价和经验积累，以及对明年的工作进行简要规划。2. 单个项目的“总分总”报告中的每一个项目的描述结构，也都可以用“总分总”的形式来呈现：总：先总述项目的重点工作内容，以及项目的目标进展和完成情况。分：再通过“设计策略”、“关键行动”、“最终结果”三步走，对项目做描述。总：最后总述对于该项目的自我思考和经验总结，做简要复盘。所以你的年度工作报告整体的框架结构如下：二、通过“三步走”来述内容我们刚刚在单个项目的“总分总”中提到过，具体描述你的每一个项目，这“三步走”依次是：设计策略：即针对项目目标制定的设计抓手、方法论和设计理念。关键行动：即项目的关键阶段和关键行动，以及使用的设计方法和工具；最终结果：即你的设计产出和所解决的问题，包括成果数据和设计反馈。由此我们也可以得到下面这张设计工作报告的框架结构图，你可以用这种结构方式来描述和梳理你的设计工作内容：三、经验和建议设计工作报告的内容展示建议也分享给你：1. 站在读者的角度思考汇报内容的优先级你的工作报告主要读者是你的老板。所以想想对方关心的是什么，想要通过你的汇报了解什么内容，这部分是重点内容，要优先重点展示。2. 工作成果的呈现要有可以衡量的指标你的设计成果在描述时尽可能都要带有衡量指标，让工作完成情况更加直观，这也是你工作成果的最直接体现。衡量内容可以分两个方面：衡量设计成果的质量：可以通过用户对于产品的使用反馈、产品的体验度量结果、你的合作方对你工作质量的评价等方面体现。衡量工作完成的进度：可以以你在年初确定的工作目标作为标准来衡量工作进度。比如你当前完成年度目标的 30%，进展顺利 / 不顺利，原因和解决方案分别是什么。3. 复杂的逻辑可以使用图片等方式呈现如果项目的设计推导过程或者采取的关键行动很繁杂，需要用大段的语言来解释，你也可以使用思维导图或者框架图进行呈现，让内容和逻辑更清晰。4. 设计原稿和工作量可以通过附件呈现如果你的总结中涉及到大段内容或想要体现你的工作量，这些具体内容可以使用附录文档或链接的形式呈现。如果你的老板有时间或感兴趣，可以自行下载阅读。这样可以最大程度保证总结报告的简要易读。更多总结思路：设计年终总结/汇报怎么写？送你一套超高效的万能公式！2022 马上就要过去，又到了写年终总结的节点。阅读文章 > 欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/summarize-ideas
落霞与孤鹜
飞翔的企鹅
表哥
在路上
张大湿
