网格 结构 标题 写在前面网格系统有很多小伙伴都问过，我也考虑想详细讲解一下这个东西，但是说起来难度真的不算特别小。毕竟《平面设计中的网格系统》用了将近二百页的图文才说清楚的事情靠我一篇文章的简单总结肯定是不到位的。其实我也很怕大家学出偏差，感觉会才是最大的错误，因为这样就不会再去深入学习了。所以我根据自己的理解出这样一个压缩版的网格系统，肯定不如原版严谨，但是绝对好用，而且能加深你对于结构思维的理解，好啦闲话不多说，下面开始今天的内容。结构思维海报设计结构思维是非常重要的，我们这个丐版的网格系统就是基于结构思维的使用。下面列出的就是结构思维的步骤图。光看文字肯定不知道说的是啥，下面给大家找作品反推一下。首先划分网格，这个网格划分的越多整体设计就越精细，因为可分的模块就越多，没有什么具体的数值，是 3*3 的 4*6 的等等都无所谓。如果有小伙伴不知道参考线怎么建立可以看这个步骤图，已经给大家罗列好了。然后下一步我们就要进行分析了，乍一看你觉得它是几乘几的？左右差不多显然就是 1:1 的比例，整体就是一个 2*6 的简单划分。那么重点来了，我们基于这个网格结构先做大块的结构划分，上下先分开，上面两个块面并在一起，然后下面再左右分开进行细分，图文分离，最下面放一些合作商。最后一步就是在细分后再次细分，可以看到就是不断割开网格的过程。那么再来一个找找感觉。这个显然左右就是 1:2，所以网格的划分基本就是 3*4 左右，这个数值其实也不是那么精确，所以大家一定要明确一点，丐版的网格系统不是为了解决精确的设计位置，而是解决大致的位置和培养结构思维。这个就是他的结构流程图，可能它原本不是这么想的，但是这个结构思维可以帮助我们理解~这个是咱们简易版网格系统的使用要点，这个图我建议保存一下。案例实操运动行业的设计选择暗色调聚焦感会更好，设计整体不宜太稳定应该尽可能灵活的综合设计元素，可以考虑使用对角构图。信息分组做好，按照标题组，功能组还有阅读组划分。基础调整画面细化我们选主体的时候一定要注意，要选用具有明显动势的图片。修改背景色为暗色调，我个人建议不要使用纯黑色。解决右上角的结构框，把标题摆放上去，大致给空间占上就可以。组合一下标题，压缩标题左侧的结构框，这里要提到一个关于网格的点，就是区域内的结构划分越多越复杂，整体也就越丰富，难度也就更大一些。把主体和其他信息摆放在画面里。移动块面摆放信息。把信息符号化占据结构的空间，经常有小伙伴问我如何做信息符号化，除了大量的参考就是要知道你的空间需要你把信息做到什么方向去。刚才内文被挤得没位置了，直接改变排放趋势变成竖排放在主体的左侧。添加信息把标题左侧的小空间解决。设计做到这一步就需要分析问题，蓝色区域显然是形式感不足因为它是标题，标题没刻画起来而让其他的信息形式丰富，会造成其他信息“抢镜”的情况。红色区域就是空间问题了。给标题添加一些形式，这里大家思考一下我这么设计的理由是什么。主要就是为了让标题和主体有一个能建立起一个除了前后叠压以外的关联关系。首先是人物的手臂处做了一个红色的环境受光处理，人物的上衣修改为红色与标题建立色彩的关联，这就是强化标题时候的思路。后面有很多小的碎的空间，其实就不如用一个完整的大块叠压解决。把弄好的强化形式放进主体里，可以看出画面一下就完整了很多。人物的腿部加上我们的标语，后面的强化形式可以直接延长调整图层顺序到主体的一条腿前面，这样能让背景和主体建立连接还能承载信息增加空间感。稍微强化一下背景的光感，增加层次。用撕纸的素材来解决这些细碎的空间。整体添加一些做旧的肌理，可以让画面看起来更有质感。最后加上一个样机，就完成了~写在后面本篇文章我们学习了如何处理一张人物海报，知道了很多画面设计时候的细节以及信息符号化的方法。有任何问题都可以扫下面的二维码加我好友，和我一起讨论交流设计。如果喜欢视研设的内容，可以点赞非常感谢。今天的文章就先到这里，我们下期再见。新手如何做好海报设计？试试网格这个神器！大家好我是花生~前几天有小伙伴在社群中讨论海报设计，提到了一个问题：虽然自己知道做海报的时候需要用网格，但是不知道网格的行列数量设置成多少比较好；也有小伙伴说自己用了网格，但是海报做出来还是不好看，不知道是哪里出了问题。阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/simple-grid-system
方法 实验研究 手法 本文重点阐述如何利用实验研究的手法验证屏效提升。屏幕有效利用率这个话题想必大家并不陌生，在 B 端产品中，越来越多的产品和用户把目光聚焦到屏效上来。站在体验设计的角度，立足交互和视觉的设计手法，挖掘屏效提升的设计价值，让屏效最大化是提升用户体验的合理方法。在此文中，对于整个设计（交互、视觉）的手段方法不做过多的详细探讨，我们重点阐述如何利用实验研究的手法验证屏效提升。以某 B 端项目为例，利用科学的实验研究方法，通过设计实验假设、提炼任务场景、准备实验物料、进行控制变量等完整的实验方法，来验证该项目中屏效提升的设计方法（提高信息密度、缩短操作路径以及信息重组）最终是否提升屏效。如何优化阅读体验？来看大厂设计师的实战案例！根据 2020 年中国新闻出版研究院第十七次全国国民阅读调查，国民数字化阅读方式的接触率 79.3%，其中手机阅读接触率达 76.1%，移动阅读成为主流。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/promote-screen-effect
满意度 目标 指标 经常能听到设计师大谈特谈数据分析，一般讲的是漏斗分析，或者分析留存、PV/UV 之类的分析方法和细节，偶尔有些设计团队分享谷歌的 GSM 模型，但是很少听人讲数据分析的基础逻辑。这周我正好事情很多，就和大家简短的分享一下。学习数据分析，从数据分析的4种方法开始在设计工作中，我们常用的数据分析方法有以下 4 种： 漏斗分析 拆解分析 对比分析 行为分析漏斗分析漏斗的定义：基于明确起始操作路径，根据每个路径节点的用户数（操作次数），各个节点流转过程中，会存在一级级的流失，最终形成漏斗形态。阅读文章 > 设计师和产品想法不一致怎么办？试试谷歌的GSM模型！我们为什么要使用 GSM 模型常规工作中，需求往往由 PM 发起，UE 团队到底如何跟 PM、FE 等团队成员协同，达成目标共识，是我们值得讨论的。阅读文章 > 对于设计来讲，数据分析就 4 步：制定指标：知道要去分析什么衡量指标：什么是符合预期、什么是正常波动、什么是异常波动拆解分析：假如数据不符合预期/出现异常波动，找到关键场景分析原因：内部/外部原因制定目标项目目标：也就是谷歌 GSM 里的“Goal”。项目开始时，你就应该了解：这个项目的业务目的是什么？是提升老用户的平台粘性还是拉新促活？是提升熟练用户的操作效率从而提升平台体验，还是帮助新用户更好的学会使用产品从而降低平台运营成本？项目目标是整个设计项目的根本评判标准，虽然一般不是设计定的，但我们可以在开工之前问一嘴。设计目标：大部分情况下，设计目标和项目目标是两个不同的目标，设计目标往往只看行为指标（PV/UV/时长等等）和态度指标（满意度/NPS 等等）。设计目标可以是项目目标的一部分，但是因为项目目标经常包含和行为/态度数据（也就是 PV/UV/满意度）无关的滞后业务指标（比如 GMV），这种业务指标对设计没什么指导价值，也很难证明设计对业务指标有直接影响，所以一般不建议把项目目标直接作为设计目标。衡量指标现在你已经有了自己的设计目标——比如你的项目满意度是3.5，那3.5是好还是差？这是需要定义的。互联网设计是一种带点创意的、可证伪的实证研究，为了让我们这个设计可证伪，我们需要划出那条证明/证伪的界限。一般而言有三种办法：纵向趋势比较：我们可以和上一个时间周期做对比（比如本月和上个月的满意度对比，这叫环比）；或者和一个更大的时间周期中相同的节点做对比（比如今年 1 月和去年 1 月的满意度对比，这叫同比）横向比较：和竞品或者和平台其他模块比较，比如虽然我们的功能满意度只有 2，但是竞品是 1，说明总体我们解决的比他们稍微好些。基线比较：有些量表（比如 NPS、SUS）自带了推荐的基线值，低于基线（比如 NPS 的 7 分）可以说明体验就是不太好。拆解分析讲这一块之前我们先举个例子，北京某大学有两个学院，经济学院和教育学院。广东/天津两地各有 700 个学生报考了这个大学，其中广东省有 380 人高中，而天津只有 260 个人考中了，假如你来做这个分析，现在能得出结论：广东省的录取率比天津省高吗？不能。假如我们以学院-省份两个维度去拆解数据，可能会发现：经济学是当年大热门专业，录取门槛极高，而教育学院没招满，录取分数线比较低。广东省报考某大学的学生报教育学院的比较多，而天津报考某大学的学生报经济学院的多。这么一算，反而在两个院中，天津学生的录取率都比广东学生高这件事情说明，我们需要探索、分析所有可能对总体情况造成影响的场景或者指标，否则分析结果就会和事实产生偏差。以满意度为例，有几种拆解维度：基于时间的：缩小分析的时间单位，是否在某一周内满意度骤降，导致一个月内平均满意度都有下跌？基于人口统计学的：不同年龄段/性别/地区/语言的用户，是否在满意度上有差异？是否有明显不满意的群体？基于用户技能/行为习惯的：新老用户、小白/专家用户、不同用户角色、不同诉求的用户是否在满意度上有差异？基于任务环节的：不同任务环节、甚至不同页面，是否在满意度上有差异？分析原因拆解不同维度分析后，我们基本可以定位到具体影响设计目标的关键问题点：比如一部分老用户的满意度下降了，或者 1-2 月间的 PV 大幅下降导致整体指标受影响。最后，我们需要为这些现象找到原因。有时原因是周期性的、不可避免的，比如一般改版后老用户都需要一点时间去适应新的设计方案，这会导致短期内满意度降低，但 2 个月内会有慢慢回升。又或者节日/突发性事件都会对某些产品/设计产生影响。有时原因是外部的：比如虽然我们没有做什么事情，但是竞品上线了新功能，或者因为政策局势的变化引起了变化。当然，更多的时候原因是内部的、和设计相关的，比如设计中遗留的可用性问题或者部分边缘场景没有被支持到。为了挖掘出这些原因，往往我们需要和用户实地访谈，或者至少打打电话。因为问卷、取数的结论比较浮于表面，只能给到浅层的概念，而深刻的洞见、真实的反馈，只能在人和人沟通的时候渐渐表露出来。用6个章节，帮你掌握常见的数据指标和数据分析模型一文读懂设计师应该懂的数据指标和数据分析模型。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/data-analysis-3
作品 配图 空间感 Hi，我是彩云。最近在 Behance 上发现一套点赞超高的作品，这一组作品看起来非常的干净、高级，看看我们能从中学到什么？学完之后又要怎么用？作品部分截图，完整作品链接请见： https://www.behance.net/gallery一次作品展示，想要视觉效果更高级，需要通过各种细节综合打磨。那么在今天推荐的这份作品中，我认为打磨比较好的细节以及我们可以从中学习的主要有以下几点：高级投影投影的延展运用留白艺术合适的展示角度强设计感配图在我近期看的作品集中，发现很多人的作品本来还不错的，结果被糟糕的展示给减分了，很是可惜。我给不少人提的建议之一是先提升自己的审美，但他们遇到的问题是不知道看啥，判断不了哪些才是好的作品，以及怎么用到自己作品中去。这些问题不知你是否也有遇到？如果有同样的困扰，今天的文章一定要看完了，因为全是干货。高级投影投影的本质就是给画面打造空间感，并突出界面内容，对于这一点我后面也会做一些延展，可能会有一些观点你没听过的。在看作品集的过程中我发现很多人不注意投影的运用，但它其实是非常重要的作品加分手段。1. 投影要干净轻盈投影在取色的时候，可以选择与背景颜色相近的颜色，然后略微加深一些，不要用纯黑色来做投影，会显脏。投影的颜色永远都需要结合环境的颜色，就想象成界面中有一个太阳光打过来，会反射周围的环境色，所以带有环境色的投影会显得更自然。比如下面这个界面展示就是把背景色和投影颜色调整为品牌橙色的色相，只是把饱和度降低到了很浅的程度，看起来就很舒服。再比如我之前做的一个 banner，右边的卡片堆叠的效果，叠起来的投影层就是用到了蓝色的投影，看起来就会显得非常干净。另外，要注意投影的距离不要太小显得不自然，颜色太深会显脏。2. 投影要针对特定的颜色进行微调使用不同的投影透明度取决于产生投影物体的颜色。对于较暗的物体，投影需要做得更强，而对于较亮的物体，投影应该是更浅一些。如果不注意这一点的话，假设两个投影都具有相同的不透明度，那么较亮物体的投影会在较暗物体的投影旁边看起来更暗。比如下面的按钮投影透明度，投影透明度都是 50%透明度时，白色按钮看起来会比蓝色的更深，可能要降低到 30%左右才显得比较一致。3. 投影要符合现实规律高级投影应该要结合现实规律，做到近实远虚。上面这张图的投影就是有些问题的，更远的投影反而显得更深，其实应该要改的更浅一些才好。做到这一点有 2 个小技巧：1）如果在 PS 中设置投影的话，可以通过调整 PS 的投影等高线。如果是在 sketch 和 figma 中做投影的话，也可以叠加多层投影来做，大家可以尝试下。2）在做展示的时候，弥散的范围建议在 6 倍左右会比较舒服，当然这个也要根据你选的投影颜色和透明度综合来调整。投影延展前面提到，投影在做展示的时候，其作用就是打造空间感，围绕这一点我们也可以做些延展。1. 增加简单图形在作品下面增加简单图形，既不干扰作品，又能通过穿插增加空间感。2. 增加插画元素用一些品牌插画，元素，甚至图标给作品增加穿插，增加空间感。3. 增加 3D 元素给作品增加简单 3D 元素，比如球、三角之类的元素。来自 Behance，审美打卡我曾经做的界面包装4. 改变材质把界面做成毛玻璃效果，再做穿插，进一步增强空间感来自 behance，星球审美打卡5. 深色界面有人问，如果界面本身就是深色的怎么办？其实也是基于空间感的原理，给画面增加一些元素，与背景拉开关系就好。比如下面这样来自 behance，星球审美打卡来自 dribbble，星球审美打卡来自 dribbble，星球审美打卡大量留白想要提升作品的逼格，使用大量的留白是非常好的技巧。但在给星友沟通作品集的时候，得到一个奇怪的说法，说是要把作品限定在多少页以内才更好。我觉得这有点本末倒置了，作品要多放精华内容没错，但不是以页数来体现的，展示的时候还是以提升逼格为主，不要影响作品本身的视觉效果。每一页 PPT，重点展示一件作品就足够了，物以稀为贵，像一些大牌奢侈品就特别喜欢大留白。Apple 手机官网截图香奈儿官网截图举一个反例，下面是某位星友的作品，其实这样的网页展示，一个页面单独整理在一页是最好的。当然前提是每一页的设计差别较大，如果太类似的话，放一页就够了。如果网页比较长的话，可以按分屏来展示。星友作品截图就像开头的作品那样调整下，逼格立马就能上来。展示角度作品在做展示的时候，不论是自己设计还是用样机，有一个标准就是一定不能让人看不清细节，不能做了角度变化之后丢失细节。像开头的作品展示，都是用了一些相对没那么夸张的角度，这样做的一个好处是能看到细节，即使是想带一些角度，增强设计感的话，也一定要以能看到细节为标准。比如像下面这样就可以了。高质量配图一个作品中的配图其实非常关键，甚至配图能直接把你糟糕的设计拯救过来。但遗憾的时候，很多人在展示的过程中不大重视自己的配图，我在跟星友交流过程中会发现大家对于配图存在一个误区，就是觉得配图一定要是真实的，有些人甚至觉得作品里呈现的一定是要去线上截图。我想说，如果这样做会把你坑得很惨。原因有以下 2 点：线上的图存在非常多不可控因素，所带来的视觉效果不一定代表你真实的视觉设计能力；审美是设计师的核心能力，如果你放一堆审美不在线的图，那别人有理由怀疑你的审美是有问题的。既然配图这么重要，那怎么做好配图这个事呢？有几个小技巧：1）符合调性配图要符合产品的调性，像开头的作品中，黑白干净是它的关键调性，那么选的图也是这个范的。2）真实可信尽量让配图看起来真实，别偷懒用重复的图，包括图中用到的数据也尽量真实。像下面这位星友的作品展示就有内容重复的问题，稍微花点时间就可以优化好了。星友作品截图3）加强设计感在放界面展示图的时候，界面中放的图尽量多一些设计感，体现你的审美。关于高质量配图我之前也有专门写文章《如何选到设计感强的配图，我总结了这 7 个实用方法》，文章中也分享了很多我自己收藏的高质量配图，大家有需要的也可以去阅读下载。如何选到设计感强的配图？我总结了这7个实用方法在设计中，判断一张图是否好看的时候，你通常会从哪些角度去分析？阅读文章 > 总结最后总结下，今天主要是从作品展示的角度，给大家介绍了如何利用好投影、投影原理延展、留白、角度、配图等方面给自己的作品展示加分。这些技巧操作起来很简单，但又非常有效，具备很强的实用性。彩云希望大家把这些常用技巧真正用到自己的作品集中去，提升逼格，找到自己理想的工作！只需少量修改，就能大幅提升作品集质量的8个技巧！写在前面：经常帮社群里的同学看作品集，发现很多问题其实是会有共性的，今天就分享其中一部分我看到的，可能只需要做少量修改就能大幅提升作品集质量的技巧。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/behance-recommend-portfolio
项目 这个问题 自己的 C/B 端设计面试通用问答全攻略，希望这篇文章能给正在面试和准备换工作的设计师带来实际性的帮助。前言开年又是一波跳槽季，最近我断断续续面试了许多不同工作年限和水平的设计师，也有很多一线大厂的设计师。我发现整体行业是供大于求的，一份 offer 发布没几天可能后台就有上百份简历，想得到一份好点的工作可能需要在众人之中脱颖而出；针对过往的面试候选人的经历，我总结了一份面试问答攻略，希望可以帮助到以后需要面试的小伙伴。1. 请进行一个简单的自我介绍自我介绍一般是面试的避无可避的开场环节，很多面试的伙伴自我介绍都会比较随意，没有做太多的设计，只是一些基本信息的阐述；一个好的自我介绍可以为我们建立良好的第一印象，同时可以让面试官快速的了解我们的基本信息以及优势。那么自我介绍有什么通用的套路呢？自我介绍通用公式：我是谁+从哪里来+为什么来+能带来什么；下面我们就来详细说说怎么运用这个公式:我是谁：顾名思义就是你本人基本信息，包含了你的姓名、毕业学校、工作年限、设计水平（中级、高级、资深，建议刚毕业或者年限较短的筒子们就是直接说 UI /UX/交互设计师就行；本身工作年限较高，公司有对应的职级序列伙伴可以说一下，强调一下咱们的优势）从哪里来：简单介绍你的工作经历，公司、岗位、具体的工作内容，需要注意的是在这里要着重突出你的优势，可以是工作技能、方法论、交互思维、产品思维、业务能力；最后通过这些你的突出点带来的可以量化的结果。为什么来：这个就是你对现在面试公司做的背景调查了，度娘提前用起来，面试前仔细的阅读一下面试 JD，了解公司该岗位的主要需求点，说明自己对该岗位、项目甚至行业有非常大的兴趣，以及想未来在这里深入发展。能带来什么：结合之前对岗位 JD 或者项目背景的了解，说明自己未来加入能带来什么；你的价值点在哪里。说了这么多我们来举个例子。我是七月，毕业 xx 学校，有 8 年的 UX 设计经验，4 年的项目管理经验。上一份工作任职于 XX 公司，负责 xx 项目包括 iOS、安卓、Mac OS、Win OS，从设计策略到设计执行的全流程工作；在设计体验侧从 0-1 主导孵化这个项目，上线后设计体验侧整体 NPS 指数高达 85%，我知道贵公司目前也是在做类似的 xx 项目，我也同样想再加入这个行业/赛道，并持续深耕；相信带着我过往的经验和专业可以帮助咱们这个项目共同成长，彼此成就。2. 你们工作流程是怎么样？这个问题主要是看看你之前的工作流程和现在面试的公司是否类似，差异太大的话可能需要一定的适应和学习的成本；不过目前绝大部分互联网公司的工作流程类似。但是你可以分 2 个维度去阐述：项目流程：前期用户研究/用户调研 — 需求阶段参与讨论 — 产品提需求 — 交互出交互稿 — 交互评审— 视觉评审 — 开发 — 开发验收 — 测试&走查 — 上线跟踪设计流程：梳理业务背景，了解业务需求——组织拉会头脑风暴——确定设计关键词——视觉探索参考——竞品分析——确定设计方向——设计交付——验证/复盘但是这个问题核心是，你在里面做了什么，发挥了什么作用，尤其是你的阶段，如何进行设计创意，设计思考，当遇见和产品冲突时候如何解决等等。3. 描述下你最满意或者印象最深刻项目这个问题就是一个全面展示自己工作能力的机会，平时自己工作的时候越到深刻的有意思的瞬间就要用小本本记录下来，不然这个时候就有点抓瞎。如果不知道怎么阐述，可以按照 STAR 法则来描述：情境(situation)、任务（task）、行动(action)、结果(result)。重点强调这个项目为什么让你满意/印象深刻，以及你在这个项目中起到的作用。就和讲故事一样，有重点，有高潮（困难），有结果。可以在故事中夹带干货，突出你的个人的主观能动性。4. 工作中遇到的问题，你怎么解决这个问题其实和上个问题很类似，都是需要结合你以往工作的点滴，凸显你平时除了完成既定的工作任务，还是一个爱思考爱总结的设计师。重点就是突出你遇到问题，克服挑战，最后总结经验的能力。最好能把这个经验复刻给其他团队的设计伙伴，达到赋能团队的作用。当然，还是得结合自己的实际情况，不能一个小的困难，你为了凸显自己的能力，生拉硬拔。举个例子：你可以说，在工作中遇见项目很赶，人力不足，你通过快速完成核心页面设计，其他次要页面快速组件搭建完成，然后后续沉淀设计规范，提升效率等等。5. 你们产品和竞品的优缺点，以及差异这个问题，其实是从 2 个方面考核我们，一个是我们对自己的产品和业务形态是否有深入的了解和研究；另外一个是我们对相关的行业同一赛道的产品是否有明确的认识。如果你们平时没有做相关积累和了解，而且确实产品同质化比较严重的话呢，确实就比较难回答。如果之前积累，并且对竞品非常了解，如数家珍的话；面试的时候会非常加分哦。不论之前怎么样，我们都可以试着从用户体验五要素，这个五个纬度去回答。从底层到表层分别是：战略层、范围层、结构层、框架层和表现层。去找找自己产品的优缺点和差异，你们可以结合实际项目的情况，说出产品和竞品的优缺点，不用每个维度都说到，主要阐述核心内容。6. 在和产品/项目相关人产生分歧时，你是怎么处理的这个问题是经常被问到，特别是有些产品主导设计的公司；或者是产品面试设计的时候。其实我们也需要理解，作为一个互联网设计师，我们是上下游中的一个环节，合作意识和协同能力在我们的能力图谱中也是非常重要的一个能力项。首先我们需要学会去倾听不同的声音和观点，在当其它角色对设计有异议的时候，先去站在他们的工种角度去理解，他们的需求点，提出设计建议背后的原因是什么，可能他们给到的建议是解决他们需求的一个方案；但是我们通过深入的挖掘，了解背后的诉求，可能不单单只有修改设计图或者牺牲设计效果这一种方式能解决他们的诉求。我们要做到最大程度的求同存异，合作共赢。慢慢上下游的合作伙伴对我们能力也会越来越认可，许多问题也会找我们商量解决方案，而不是一味否决或者一味推动我们执行。7. 你们在工作中怎么分工的这个问题主要是想了解你们项目的人力情况，以及你在这个项目所扮演的角色；如果是主设、设计负责人，就按照日常的项目安排和工作内容说就行了；如果是项目中的普通一员，大概说下项目人员的分工，重点说自己主要负责的内容和方向，以及在这个项目中我自己的核心价值。说白了，就是什么东西是你可以做，但是别人做不了的东西就行。8. 你的优缺点这个问题就是一个双刃剑，面试官可以通过这个问题，快速的了解你；你也是可以通过这个问题用几个短语给自己标签化，快速在面试官面前树立起人设。优点的话，不要说的太空泛，要结合实际工作场景中能有运用到的优点。举个例子：你说我爱冒险，喜欢探究生活的未知；你想这个和工作有关系吗，面试官只会一脸的黑人问号。但是你如果说我爱冒险，对新鲜事物抱有好奇心和探究欲，平时喜欢关注设计/互联网圈子的新的设计风格、表现技法、设计软件什么的，算是公司设计团队的百事通。你要是这样回答，面试官是不是会对你印象很深刻。觉得这个人，学习能力和自驱力很强。缺点的话，尽量说一些不会影响到工作的缺点，比如强迫症，完美主义者，对每一个像素都很执着等等，聪明的面试者会把缺点当优点来说。9. 为什么从上家公司离职？这个问题要注意，不要说上家公司不好，或者是你的领导不好，这些带有负面情绪的评价；不管你说的是真的还是假的，给面试官的感官都不会太好。他可能会联想到如果你将来入职了以后，时间长了，有了一些摩擦，会不会也产生这样消极的情绪和抱怨。我们可以从这几个方向去说：个人职业发展的规划，想去一个更好的团队，或者是现在的行业/赛道自己很看好公司或者部分项目组织架构变动，融资出现问题，整个项目被优化大的行业变动，继而影响到公司以及个人的发展（比如：2021 的教培行业的双减）小到个人规划大到整个行业的变动，大家可以根据实际情况说明原因就好，但是尽量说一些客观原因。关于询问离职原因，并不是面试官想对你寻根问底，其目的主要是了解你个人的稳定性，以及你这个人的抗压和适应能力。10. 平时关于设计方法论了解哪些？首先，我们得知道一直被提到的设计方法论是什么？设计方法论是在解决特定设计问题时，能够不断复用的一般性规律。同时，在不同的设计阶段，以及不同的设计领域，所要具体用到的设计方法论是不同。平时我们需要去不断的了解和沉淀方法论，比较常见通用的有：格式塔原理、黄金比例、5W1H、配色原则、情绪版、交互设计 7 大定律、KANO 模型等等。在回答的时候，可以结合自己的项目案例，进行说明。近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 设计法则阅读文章 > 11. 你平时如何学习设计？这个问题针对刚入行或者入行一段时间的设计师，都会问到。主要是通过这个了解设计师平时对行业的关注程度和敏锐度，以及是否有不断学习提升的意识。大家都知道设计师这个行业性质，是需要不断的学习和提升的，因为行业瞬息万变，可能今年流行简约扁平、明年就流行 3D 微拟物。我们能做的就是保持关注和学习，才能立于不败之地。可以说，自己关注的一些国内大厂的微信公众号，添加的微信设计学习交流的群体、平时浏览的网页（Behance、Dribbble、Pinterest）、私下做的设计练习、报的网课、线下的论坛等等。途径和方法很多，大家可以根据自己的实际情况回答就行。12. 你是如何看待我们产品/对我们的产品了解吗？这个问题就是需要我们面试前，提前做好功课，浏览他们的官网，了解一下公司的规模、企业文化和目标、具体有哪些项目；更加细节的可以是你要加入的这个事业线、项目团队目前做的产品，围绕他们产品提出一下你的看法和观点，可以是设计或者是体验角度的。但是要注意的是很多时候一个产品我们觉得有问题的地方，可能就是该团队现有最好的解决方案。不要在这方面太过于想当然。重点还是需要说明，你很看好这个行业，想要加入其中，和公司一起成长。12. 你未来 3-5 年的发展规划？不同阶段的设计师对于未来的规划和职业方向都是不太一样的。如果你是初入职场，大概需要三年的时间去沉淀专业技能，职业方向只要是围绕自己确定的方向不断发展即可。工作三到五年以上的设计师，你的目标可以是往项目设计负责人、设计组长或者是行业设计专家的方向发展。人到了那个阶段就会想要做那个阶段的事情，不要害怕说出自己的规划。2020年陷入迷茫？帮你做好职业规划的9个实用经验！最近和很多设计师朋友交流发现各个阶段的设计师都对自己的职业规划比较迷茫，我最近也思考了挺久，梳理出这篇文章和大家一起共勉。阅读文章 > 14. 如何看待加班？互联网公司竞争压力大，大家比时间，拼的是效率，这个时候其实就是看我们的积极主动性了。当然问这个问题不一定是这个公司就加班非常严重，可能也是压力测试的一种，看你能不能在关键的时候承受住压力。我们尽量还是往正能量的地方去回答就行。15. 你还有什么问题吗？面试到了最后一般都会问你还有什么疑问需要解答，别着急说没有。说没有问题不代表你都听懂了，事少好沟通。面试就是一个双方互相了解的过程，你要利用这个机会了解你最关心的问题，免得事后入职悔之晚矣。举个例子，你可以问：你的岗位职责、所属部门、团队架构情况、负责的产品情况等等，你自己要事先梳理一下，把心中的疑问都弄清楚，这样才能在做决定的时候更好地选择最合适的公司。总结面试过程是为了更好的展示自己的综合能力，设计师的面试成功与否，还是取决于平时对专业的沉淀、行业经验以及项目作品质量。上面说的很多问题都是需要我们平时的日积月累，平时就要养成整理作品，复盘项目的习惯，这样才能在面试的时候从容不迫，自信满满。最后，希望这篇文章能给正在面试和准备换工作的设计师带来实际性的帮助，祝愿大家都能找到一个自己满意的工作。金三银四求职季，收下这篇5000字的上分秘籍：面试篇在面试前我们还需要准备一些可能会问到的问题和注意事项，自己要整理好思绪，不要在面试的时候说不上话，那场面就十分尴尬了，只有在做好充分准备的前提条件下才会有更大的机会被企业认可。阅读文章 > 欢迎关注作者微信公众号：「Sevenmoon77 的设计圈」本篇来源：优设网原文地址：https://www.uisdc.com/interview-process
图标 圆角 体量 最近我在学习使用 Figma，会在社区查找一些大厂的设计系统文件学习，看到一篇微软 Fluent 系统图标规范文档，还挺详细的。其中，我发现有些小点自己平时很少注意到，并且感觉对设计师定义图标规范也有一定的帮助，所以结合个人图标经验挑选部分内容来翻译成一篇文章，便于扩展自己的图标思维。（备注：以下的规范是针对尺寸 24px、线条粗细 1.5px 的图标）概述在前一个版本，Fluent 系统图标采用了 MDL2 和 Monoline 图标集合，比较大的特征是直角、方方正正的形状。不过随着 Win 11 系统的发布，我们可以看到 Fluent 系统图标也进行了比较大版本的优化，感知最大的地方就是图标变圆润了。设计理念有三个准则：熟悉的、友好的、现代的。图标形状遵循了用户熟悉的基本原则，示意上识别清晰，尽量远离隐喻含义。同时，细节处理更友好，采用了圆角和简洁的形状，并有两个主题：线性和填充。网格和基础形状规范化的网格，能促进图标的整体性和统一性，设计师绘制图形元素时也更有条理性。从 24px 图标尺寸开始，比较建议使用网格系统，内容安全区域是 20px，周围有 2px 的内边距。（留内边距主要是考虑个别图标居中分布和体量问题，有些图标元素会超出安全区域，比如修饰符类型图形）基础形状是网格的基础，正方形、圆形、纵向矩形、水平矩形采用定义好的模板尺寸，在相关图标体量上保持一致的视觉比例。圆形、矩形、正方形图标体量效果如下。（矩形体量看起来有点偏小，这种问题受限于图标尺寸空间小）线条图标线条应当采用一致的粗细，线条末端采用全圆角。对齐网格像素对齐很重要，特别是低分屏设备，图标可以看起来很清晰。由于线条粗细是 1.5px，需要保证 1px 是对齐像素的，避免内外都出现虚边。但在某些特殊场景，为了使图标体量居中分布，就会出现像素不对齐的情况，比如一条竖线。圆角Fluent 图标改动点较大的可以说是圆角了，传递了更柔和、更友好的体验感受。因此，我们认真打磨圆角的细节，定义了三种圆角数值。大圆角使用在线条直角或钝角处；当使用大圆角感觉形状太圆难以辨别时，我们可以使用中圆角；小圆角用于很小的细节或锐角处。（确实挺细的，也影响了整体的风格。如果追求统一大圆角的话，可能太偏圆润风格，更适合娱乐类产品用户吧）断口断口多存在复合图标上，断口间距是 1px。当图形角度堆叠时，圆角中心点需要一致，即外层图形圆角会稍大一点，使线条平滑过渡。（看起来确实挺和谐的）修饰符修改符应当谨慎使用，因为它对于一部分用户来说很难阅读。由于尺寸较小，修饰符元素要尽可能地简洁，常放于图标的右下角。设计师在绘制过程中，修饰符图形可以超出安全区域，使图标视觉感官居中分布。关闭状态如果已经建立的图标需要关闭状态，应当遵循模板：斜杠从左上角到右下角 45 度，撑满图标的安全区域。视觉平衡图标平衡很重要，我们也有测试的两种方法。第一种方法是画一个圆圈，帮助我们更好地感知平衡性。第二种方法是视觉重量测试 ，通过模糊来感知图标的区域面积，从而达到平衡的目的。命名随着更多图标的创建，我们必须非常有意识地命名，并尽可能地具有前瞻性，后续才能更好地协作。我们推荐图标命名使用形状的明喻，比如盾牌代替安全，星号代表收藏。总结以上就是 Microsoft Fluent 图标规范的一些小翻译总结吧，线条粗细、圆角、居中、体量、平衡、命名等方面还挺多细节可以打磨细化的，希望各位设计师能够结合业务来仔细琢磨，提炼出属于自己产品的图标规范。两万字超强干货！设计师必看的图标设计指南图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/microsoft-fluent-icon-norms
构图 海报 素材 大家好，我是和你们聊设计的花生~就在这周三，一条“肯德基提供免费素材给盗图商家”话题登上热搜，引发大家热烈的议论关注。这次热搜的起因是沙特肯德基的官方公开了一个素材下载网站 ChickenStock，里面都是自己鸡肉产品的高清原图。网址是 https://chickenstock.net/ ，进网站看了一下种类还是很丰富的，炸鸡、鸡肉汉堡、鸡块鸡腿鸡肉卷应有尽有，而且图片的确很高清，都是百万像素的级别。至于这样做的原因，他们在网站上给出了解释，我给大家简单翻译了一下：“你们都不行，炸鸡还得看我们的家的。而且我们很大方，高清原图尽管拿去用，反正你拿得走照片也那不走我们的炸鸡的味道。”怎么样，是不是有多少听出点自夸的感觉了。而且正巧在星期三放出这个消息，第二天就是疯狂星期四，说这是一次营销运作也不是不可能。虽然如此，但是第二天当我想打开网站下载一些高质量素材的时候，发现网站“红”了：看来肯德基的高清素材都的确受欢迎，访问量过大把网站挤崩了，估计 ChickenStock 自己都没想到吧。不过素材一个都还没下到呢，也不知道什么时候才能恢复，可惜可惜。注：这个肯德基高清图库是不可商用的，大家看看就好，切忌商用哟。可商用的美食图库看这里：可免费商用！发现一个提供超多高质量美食大图的新图库！现代人在动筷刀叉前必定先拿出手机，帮眼前的美食拍张照，上传到社交应用，俗称的「相机先食」现象，非常有趣。阅读文章 > 其实一张优质的美食海报，除了需要优质高清素材，好的排版展示也非常重要。磨刀不如砍柴工，既然好素材一时半会得不到，那我们就先看看优质的汉堡类海报是怎么设计排版的吧~汉堡类海报常见构图1. 上下构图上下构图是汉堡炸鸡类的海报最常见的构图，单个汉堡作为主体放在画面中央，占比最大，上方填充装饰元素和文字信息。这样构图能很好的放大美食的细节，吸引注意力。图片素材质量够高、汉堡的细节层次饱满精准的话，甚至不需要其他素材装饰，直接加一些文字信息就可以了。如果汉堡主体的细节并不丰富，质量比较平淡，那我们可以在背景处多花点心思，用文字排版来丰富画面。在较小的尺寸的画面展示单个汉堡主体，可以在画面上加入一些动态元素来丰富画面，比如斜线、曲线、展现动态的小元素。2. 上中下构图上中下构图是在上下构图的基础上，多出一栏来展示更多的信息。比如产品特色、套餐信息，或者同系列的其他产品。上中下并非等分，仍是以汉堡为主要突出点，所以图片素材的质量要很高。3. S 型构图S 型构图适合多个食物主体的展示，图片素材为主，文字信息为辅，这样的构图也比单纯的排列对齐更灵动，更有美感。另一种简单一点的错位构图，主要适合双主体的排版。4. 左右构图左右构图的稍微少见一点，主要是为了适应特殊图片（食物主体较长）或者形成对比，也比较适合双主体的展现形式。5 款适合汉堡类海报的免费可商用字体汉堡类海报的主字体都非常粗，一是为了压住站大面记得食物主题以平衡版式，而是粗壮带手绘磨损质感的字体也可以体现汉堡的厚实优惠。是海报中非常总要的一个组成部分主视觉之外的装饰性字体就是也是一些笔画较粗装饰性的花体字，或者类似毛刷的字体。下面为大家推荐 5 款合适汉堡类海报排版的免费可商用字体：1. Frick2. Ebony-Slab3. Moul4. Briberra5. Warteg以上就是今天的分析，5 款字体的安装包下载链接见文章开头和末尾，需要的小伙伴记得下载哦~更多相关设计文章：海报版式太单调？用好这个元素提升99%（附素材下载）大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。阅读文章 > 创意满满！超7000张海报的灵感网站Typo/graphic Posters大家好我是花生~ 今天向大家推荐一个专注于文字排版和抽象图形类的海报的设计灵感网站 Typo/graphic Posters。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 5款粗字体安装包324KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/kfc-gallery
内容 卡片 页面 微交互系列意在分析交互动效中更加细节的思考，探索微小设计中的更大可能性。本期主题是研究双列瀑布流的卡片内容浏览体验。我们关注到不同的双列瀑布流中，从卡片内容点击后到过渡为一个完整页面的动画在不同的 APP 中设计上有一些微妙的区别。而这些微妙的区别带来了不同的浏览体验。于是我尝试把不同的过渡动画进行了逐帧的分析，观察其中的细节差异，以及探寻背后的设计思考。方式一：滑入滑出滑入滑出是在交互中比较常用也是比较普通的形式，典型代表如淘宝的推荐内容，以及 B 站的视频内容等等：这类交互虽然比较常用，使用起来也并不会有太大的问题，不过既然我们今天抱着一种钻研的态度来看，那我们就要找到使用滑入滑出动画带来的问题 – 增加了用户的「反应时间」。什么是「反应时间」？用户完成点击后，到新页面进入的这段时间，是我们常规理解中动画的「过渡时间」。受到网速的影响，可能还会产生系统的「响应时间」及新内容的「加载时间」，这里我们抛开这些，假设响应和网速都处于最佳状况去做后续的探讨。那么在双列卡片内，用户被图片内容吸引，滑入新页面后，原来关注的图片大小和位置均发生了变化，用户的视觉焦点要重新在新页面寻找，然后再基于这个焦点开始浏览其他信息，这个过程称之为「反应时间」。举一个更便于理解的例子，这里的「反应时间」其实就是指你在玩打地鼠的时候，从地鼠出来到反应它在哪个洞的时间。而这样的时间，据研究通常在 200ms 左右（刺激源为单一刺激源，具体引用见文末参考）。这个数字代表了什么呢：当我们在打游戏的时候，延迟超过 100ms，就会有卡顿的感觉。所以滑入滑出动画所带来的近 200ms 的反应时间，在无形中影响到了用户在浏览页面时的体验感。方式二：容器变换容器变换是谷歌在 Material Design 的 Motion 章节中的一种动画定义。对比滑入滑出，容器变换能更好的引导用户的视线，在过渡的同时完成了用户的视线引导，大大缩减了用户的反应时间，提升体验的流畅感。对比上面的例子，就好像你在玩打地鼠的时候，地鼠的半个头已经冒出了洞口。在我们常用的产品中，诸如 Pinterst、小红书、大众点评的推荐内容都用了这种效果：良好的视线引导让过渡和反应同时发生那么如何做一个好的容器变换呢？Material Design 中把此动画打开的过程分为了 4 个部分：原始卡片淡入消失；新内容从卡片变为详情页面的容器大小变化；新内容从卡片变为详情页面后的位置调整的屏幕等宽，并置于屏幕顶部；新元素淡入出现。动画为 0.25 倍速播放但仔细追究，这个过程其实可以分为 5 个部分：原页面出现蒙层；原始卡片放大并淡入消失；新内容从卡片变为详情页面的容器大小变化；新内容从卡片变为详情页面后的位置调整的屏幕等宽，并置于屏幕顶部；新元素淡入出现。蒙层让原来卡片外的内容有了退出舞台的效果，过渡更加自然。关于这个动画，实际开发中可能会遇到一个问题，Material Design 中的设定非常理想化：所有内容都在本地已经被拉去。实际情况是由于网络条件的限制，详情页内更多的内容并不能实时被展现出来，为了让内容能更快展现，过渡更加顺滑，小红书的数据加载做了一些的预处理：每次加载拉取 10 条内容的信息；拉取的信息包括第一张图，标题，和内容；如果是视频，会拉取一定时间长度作为缓存，即可保证点开即播放；文字内容拉取一定长度，保证一屏内可完整阅读。小红书的预加载内容，图为弱网下的测试效果而对比双列瀑布流设计的鼻祖 Pinterest，在内容的预加载上则更加保守，只加载了标题和图片以及很少的描述内容：动画为 0.25 倍速播放总结来说就是为了让过渡更加顺畅，技术上尽可能的将很多内容提前读取到本地，从而让新内容能够在过渡动画的时候就可以展现出来。所以，要想做好一个好的容器变换，除了设计上做好动画的过渡设计，技术上还要考虑好信息的加载。前面讲的是容器变换动画打开的部分，接下来我们说说关闭动画的设计。同样对比滑入滑出，容器变换的关闭通过将页面缩放为卡片，很好的帮用户在返回原页面的时候，引导视线的定位，帮助用户找到之前浏览的断点，继续浏览原来没看完的内容。Material Design 中把此动画关闭的过程分为了 4 个部分：原内容淡出消失；页面变为卡片的大小变化；页面变为卡片的位置变化；原页面中的 UI 元素淡出消失。动画为 0.25 倍速播放而在小红书中，省略了第 4 步，直接从页面缩放回卡片：并且随着右滑的关闭首先还会先进行一部分的缩放效果来保证过渡更加顺滑：而在关闭过程中做的最细致的也是 Pinterest，在原来 Material Design 4 步的基础上，关闭过程中还做了两个优化：对返回后的页面还做了一个从大缩放到小的处理，和原来页面缩放的卡片动画进行了一个大小的呼应；让原页面在滑动返回的过程中就从页面缩放为图片，和整体页面的缩放融合的更加流畅；通过慢动作，可以清楚看到后面页面的元素被整体放大缩小，同时卡片变为图片其次，如果卡片是从中间或者屏幕偏下的位置被点击，在返回后卡片会贴到屏幕顶部，让下面更多的内容被呈现出来，持续吸引用户点击：右下角的内容点开返回后，到了屏幕上方总结从流畅度上来讲，一定是更加建议在双列瀑布流中使用容器变换的动画过渡。同时在设计过程中，注意过渡的细节和数据的处理，保证内容更加流畅。一个小小的内容过渡，也可以做很多精细的设计，从而提升用户的浏览体验。引用：Material Design – Motion：https://material.io/design/motion/the-motion-system.html#container-transform科学网：人机交互的控制及失误：https://wap.sciencenet.cn/blog-40841-1227701.html?mobile=1研究Material Design交互动态系统后，总结了这6个知识点！从设计的维度，动态设计可以分为交互动效和 Ae 动效，在这两方面个人都有相关落地项目。阅读文章 > 欢迎关注作者微信公众号：「Minus Lab减法实验室」本篇来源：优设网原文地址：https://www.uisdc.com/masonry-layouts-card
服务器 软件 数据 有了解和学习 B 端的同学必然都听说过 SAAS 这个词，这在 B 端行业是个非常重要的产品形式和分支。虽然它重要，但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问，Saas 应该怎么设计？适用哪些设计风格？所以我从最底层的技术层面，来解析 SAAS 到底是什么，在未来你再也不用担心对这个词汇一知半解，无法正常参与业务讨论了。上篇回顾：想做B端还不懂什么是SAAS？一篇最专业的扫盲科普（上）有了解和学习 B 端的同学必然都听说过 SAAS 这个词，这在 B 端行业是个非常重要的产品形式和分支。阅读文章 > 在 9 层塔中，SaaS 是完全制作好软件让用户直接上手使用的软件，而 PaaS 和 IaaS 就不一样。1. PaaSPaaS 全文 Platform as a Service，是平台即服务的简称。这属于完全技术化的服务，是非程序员的一般用户难以参与到的业务类型了。即服务商提供了基础的 7 层服务，只要用户购买了这些使用权，那么就可以直接在这个基础上编写或安装运行的程序进行使用了。比如全球最大的开源 CMS 博客程序 WordPress，是由 PHP+MySQL 编写的，如果要创建这样的网站，就可以直接购买符合程序对应环境的服务器，再进行安装部署即可。2. IaaSIaaS 全文 Infrastructure as a Service，就是用户只购买一个完全空白的虚拟主机，类似你购买了一台硬盘格式化后完全空白的虚拟电脑。用户可以自己选择安装什么样的系统，编写什么样的中间件，最后再搭建自己的框架。这适合定自定义要求更高的用户，完全根据自己的需要 DIY 项目的服务器功能。3. HostingHosting 则是比 IaaS 更进一步的服务，从原本的虚拟服务器升级到了完整的服务器。也就是说，在一些特定业务环境下（比如特殊的数据安全要求），用户需要购买完整的服务器硬件使用权，从原本的合租换成整租。所以，Hosting 就是服务器托管的意思，用户向一些服务商购买了完整的服务器硬件使用权和联网功能，然后远程进行控制和使用。而商家负责硬件层面运维，防止服务器断电、断网、损坏、过热、故障等一系列硬件问题。4. Co-location九层塔中，我们其实还省略了一个更底层的环节 —— 数据中心。数据中心是一个物理名词，在今天指的是大规模的服务器数据设备安置和运行的空间。比如苹果的云上贵州，就是典型的数据中心。Co-location 的服务也叫场地出租，就是数据中心的商家，把数据中心的物理空间使用权租用给用户，用户自己购买服务器或商家的（不是临时租用）放进去，再借助数据中心的网络和其它基础服务实现服务器的正常运转。这个概念大家简单理解就可以，我就不多做介绍了。所以，九层塔中包揽了不同层级数量的技术，就可以形成不同的服务，每一级服务有各自的优缺点，是由项目的实际情况决定的。相信看完前面的介绍大家已经知道，SaaS 等服务是建立在联网的基础之上的，也就是说，除了可以独立运行在你客户端里的本地软件，还包含更多需要联网的软件，或者干脆运行在远程服务器主机上的软件。这是一个发展的过程……最早的软件安装是我们到软件店里购买软盘、光盘，回到家里的电脑安装，这些软件往往只在本地运行，是不需要联网的孤岛。随着互联网行业的发展，孤岛渐渐被消除，联网上传和获取数据越来越普及，甚至，软件都不需要再下载和安装，直接用浏览器就可以访问使用。这种模式，就催生了软件的开发维护与服务器、网络的硬件运行进行了分工，一般的产品开发团队专注在软件应用层面的开发工作，而把网络、远程服务交给其它商家，并付费购买。这样不仅带来更高的效率，而且降低了各自的成本，实现了多方的共赢。所以，我们再来理解云服务这个词就很容易了，云就是网络，云服务就是基于联网实现的各种软硬件服务的总和。除了远程的虚拟机、中间件、数据库外，还有远程计算、渲染、CND 加速、直播分流等等。这也是为什么云服务会成为互联网发展的基础，因为它实在太重要了，几乎所有互联网公司都无法脱离云服务带来的支持。这也是为什么各个大厂纷纷投入云服务的赛道中，因为这是互联网的基建和命脉之一，拥有非常广阔的前景与市场。而在马太效应强者越强的现实环境下，头部的厂商拥有更好的机群、技术、人员，可以大幅度降低运作成本，提供更优质但价格更低廉的服务。虽然云服务在今天不可或缺，价格也越来越有优势。但是，并不是所有企业都一定要选择购买外部的云服务，这就是我们要理解的另一个课题 —— 私有化部署。云服务再怎么便捷，也有一个缺陷，那就是数据是存储在别的商家、企业的服务器中，有一定的数据安全隐患。虽然数据安全是云服务的最基本保障，但很多对数据隐私、安全极度重视的企业，是不愿意承担任何外部风险的。所以他们就会通过自建本地服务器（私有云）的方式，实现从网络、硬件到软件全局私有化的部署。也就是说，服务器机房是自己公司的，网络是自己迁进机房的，服务器自己买的，环境、虚拟化、数据库自己搭建的，后端程序也是自己写的，最后电脑手机上运行的客户端，是连接这些服务器的。哦对了，当然这些硬件日常的维护也要由自己公司的运维负责……这样的成本高嘛？非常高。但类似国企、银行、证券、国防、政府机关等机构，对数据的安全性是异乎寻常的执着的，他们是有足够的动力划出预算来确保数据的私密与安全，用来运行自己内部的 B 端系统。这也是为什么这些机构从一开始就拒绝使用 Figma 这种公有云端软件，尤其是服务器在国外的。再问下一个问题，私有化部署，就意味着这个环节中所有步骤全是自己搞定嘛？当然不可能，因为应用这个层面，有时候不是想开发就开发得出来，或者成本实在超出了预算。因为私有化的主要目标是数据安全，但不是应用的工具一定得个性化定制。比如在即时设计官网的价格页面，就可以看到 “私有部署” 这个选项。它的实际作用，就是允许客户在自己的服务器上安装它，让内部的员工使用设计软件时是同步到公司指定的服务器而不是官方的公共服务器中，满足客户的数据隐私需求。注：这例子大家讨论最多适合理解，非恰饭所以，了解完上面的概念，你也就大概能明白什么是云服务，什么是私有化。如果需要在工作中碰到更细节的名词还是概念，可以再进一步做理解。结尾关于 SaaS、PaaS、IaaS、云服务、私有化部署的扫盲，就先解释到这里。希望大家看完以后对 B 端行业一些最基本的产品概念能有一定的认识。我们下篇再贱~万字干货！写给设计新人的B端产品入门指南本文受有赞设计师@美芳的指导，约12941字。阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/saas-2
快捷键 操作 用户 前言键盘，在很多人的眼中，就是一个信息录入的硬件设备。但你却不清楚完整的键盘当中，字符按键只占到了整个键盘数量的 60% （完整键盘共 108 键，字符键 65 键）你会发现，键盘除了打字之外，还会有其他很多用途。快捷键，就是不可忽视的一部分。（注：完整的快捷键会包含，快捷组合键与快捷按键两部分，文章就不做过多纠结，意在讨论这样的交互形式，这里简单统称为快捷键。）无论是设计师常见的三件套：Photoshop、Sketch、Figma，还是很多协作类型的产品：Word、PPT。快捷键，仿佛早已是许多产品的标配。但是我们在做 B 端设计时，又时常忽略掉快捷键这一特殊的交互形式。今天我们就来聊聊 B 端产品与快捷键之间的关系。在实际的工作当中，如何设计快捷键？我会产生这些疑惑：一款 B 端产品，有必要去设计快捷键吗？快捷键是否会增加用户的使用门槛？如果想要去做快捷键设计，究竟应该如何设计？我们就带着问题一起来了解快捷键之间的差异。往期回顾：B端设计指南：从 4 个方面帮你掌握「审批」的知识点一直以来，业务都是 B 端逃不开的话题，你可以在许多文章当中看到我们的改版方向是因为业务需求、设计的思路是因为业务需求。阅读文章 > B端设计指南：网页布局方式科普栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。阅读文章 > B端设计指南：栅格的定义和使用方法在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。阅读文章 > 老规矩开始之前，还是先科普一下桌面端与移动端，虽然他们之间存在很多差异，比如，页面布局、交互方式等等… 这些咱们以后再聊。但是今天想贴合主题，聊聊录入设备之间的差异。在移动端的设备当中，我们多数情况下，采取的是软键盘的形式，也就是手机录入是以虚拟键盘的形式存在。这样也就导致虚拟键盘存在一些常见问题缺少快捷键：虚拟键盘无法通过组合键，实现快捷操作录入门槛高：不能对键盘进行精准定位，无法实现盲打键盘的快捷录入功能按键少：在录入标点符号等信息时，需要切换页面进行实现总结下来就是整体信息录入效率低，准确率低。比如我们最常使用的复制粘贴，到了手机当中，只能够通过点击光标的方式来解决。对于桌面端键盘而言，由于我们录入信息的方式是通过双手与实体键盘进行交互，可以实现更多信息的点击。因此快捷键就会有很大的发展空间，这时候就会很好奇，快捷键究竟是如何诞生的？我们简单回顾一下计算机发展的早期，发现快捷键设定其实是源自 “硬件设计上的无奈”。早在 1980 年，IBM 所研发的个人电脑 Acorn，在当时遇到了一个棘手的问题，在电脑产生系统故障过后，它都需要通过手动重启，并且需要很长的时间来进行内存测试，验证计算机是否出现问题。但在公司内部进行系统测试时，并不是需要这样的一个机制。因此工程师 Bradley 在当时创造了一个快捷键：Ctrl+Alt+Del 可以在不需要内存测试的情况下将系统进行快速恢复重置。我们现在回顾，当时作为工程师，他在快捷键的设定上也是进行了很多思考，因为 Ctrl+Alt 键靠得很近，但 Del 则在键盘上的另一边，这样可以避免一些用户在日常使用的过程当中进行误触。而后续 Windows 电脑遭遇蓝屏死机，而 Ctrl+Alt+Del 这样一组快捷键便留在很多人的心中。随着个人电脑的不断发展，你会发现快捷键的设计也越来越复杂，因为我们想要了解如何设计快捷键，必须先知道，常见的按键分类有哪些？常见快捷键的分类目前共有 Windows MacOS 两大操作系统，在快捷键的设定上也会有着许多差异化，文章部分会将 Win/Mac 的系统统一进行讲解，大家可以优先看看关于两个系统之间的映射关系：想要知道我们快捷键的差异，我们必须了解每一个按键的基本定义：Ctrl / CommandWindows 系统当中的核心快捷键，可以理解为是各项操作的快速触发。我们可以使用它去实现各种组合快捷键，比如使用 Ctrl + C（复制） Ctrl + D （创建副本），算是用户使用最高频的快捷键。同样，在 Mac OS 当中，你会发现 Mac 的 Control 几乎很少使用，因为系统本身就没有给它 “安排太多任务” 取而代之的是饱经风霜的 Command 键。Command 作为 Mac 独有的按键，它的地位几乎等同于 Win 当中的 Ctrl，并且两者的快捷键方式都极为类似，因此也就造成两个系统当中的按键差异。ShiftShift 也叫上档键，可将其意为连续的按键，因为在连续选择时会用到，它的功能主要有两点：在中文输入的场景下，可以组合按键进行中英文的切换在文件选中的场景当中，对文件的内容进行快捷选择的操作TabTab 也叫制表键，不过现如今已不再是制表的含义，更多可以为切换按键，比如我们经常使用 Command + Tab 来对软件进行切换。其用途主要有两点：在信息录入时，按下 Tab 键来实现字符的缩进在表格页面当中，通过 Tab 键实现对单元格的快速切换Alt / OptionWin 系统当中的 Alt 与 Mac 系统的 Option 基本一致。他们的主要用途有两点WIN：呼出菜单或点击按钮的组合键MAC：快速访问系统偏好设置中某个选项的组合键如何设计快捷键，是否需要快捷键在我们的设计快捷键之前，需要考虑清楚是否真的需要快捷键。就像我们在网上冲动消费一样，购买的东西总会有当时觉得有用，然后立马吃灰的产品。所以明确需求的目的就显得尤为重要。因为 B 端产品存在太多产品类型，在每一个产品类型当中，我们也会有不同的使用场景。这里我总结了几个维度去思考。1. 高频使用俗话说得到，好钢得用到刀刃上，快捷键的设定，一定是需要用户使用频率高才会有意义。因为快捷键的使用本身就会有使用门槛，如果你做在一些用户本身就不会频繁操作的地方，对于用户而言感知并不强烈。其次你也不想自己花费了精力，到头来设计思路并没有落地。2. 核心功能这里的核心功能其实是针对不同的角色。比如一个在线教育的产品，老师需要每天在产品当中去点评同学们的作业，也就意味着老师需要高频的在点评学生作业，这个时候其实作业点评就是老师的核心功能。那你对这个功能上的操作进行优化，大概率就不会存在太多问题。比如我们以 figma 为例，如果它现在在 Darfts 首页增加了很多快捷操作，如：Command + N 新建画板 、Command+O 打开通知。但是 Figma 并未对核心功能，编辑区域页面当中添加快捷键，我想这对于很多人而言，就是一个糟糕的设计。3. 沉浸场景B 端产品的使用大致会分为三种状态：暂留、沉浸、配置（这里就不展开讲了）。而最常见的便是专注于用户使用的沉浸场景，也就是说，我们必须要让用户在沉浸场景下使用产品，这些快捷键才会变得更加有意义。沉浸及专注，专注就需要高效，因此高效使用快捷键就显得合情合理。归纳整理快捷键的诉求当我们明确真的需要快捷键的诉求过后，我们可以去思考，究竟应该设计哪些快捷键？哪些操作是属于高频操作？是否会存在操作之间的先后顺序？首先可以通过实地观察，先去判断用户在某一页面当中，具体使用顺序或者流程，然后通过流程图将数据内容进行整理。这其实是我们设计快捷键的基础依据。然后通过对页面当中不同操作进行数据埋点，能够得到用户具体的操作信息。通过这些数据信息，能够保证我们在做的设计都是有理有据，而不是拍脑袋的自己随意 YY 出来的。最后拿到数据进行分析，在数据当中并不能够单纯的去看它的点击量，而是要深入了解这个数据它背后的意义是什么？这也是我不建议初级的设计师去做数据埋点的原因。因为我见过有太多设计师拿到数据过后直接不分析上手就看，导致出现太多数据背后的问题。避免冲突在快捷键的设定，我们应该考虑避免与其他快捷键重复。想要解决这个问题，我们必须先搞清楚，产品究竟采取什么架构方式。通常会分为 BS 架构与 CS 架构。这里简单解释一下 BS 架构与 CS 架构的区别BS 架构：（Browser/Server,浏览器/服务器模式）web 应用，可以实现跨平台，但是个性化能力低，响应速度较慢CS 架构：（Client/Server,客户端/服务器模式）桌面级应用，响应速度快，安全性强，个性化能力强，响应数据较快可以简单理解为，目前产品是否需要通过浏览器才能够打开。需要浏览器打开，那就是 BS 架构，不然则反之只有我们确定了具体的产品架构之后，你才能够知道你设定的快捷键是否与浏览器本身到快捷键有所冲突。因为浏览器自身的快捷键权限肯定是会高于你页面当中的快捷键，所以在设计上我们需要格外留意。这里总结了一份浏览器的快捷键汇总，可以通过这个方式避浏览器的踩坑但客户端的快捷键设定，相对会更加开放，因为客户端不会受到浏览器的限制，在快捷键的设定的空间则会大很多快捷键的设定明确清楚上面的诉求与限制过后，接下来我们可以从三个方面，来对快捷键进行设定：1. 语义法在电脑快捷键设定的早期，最常使用的办法便是通过翻译英文单词首字母，进而实现快捷键的设定。比如我们经常使用的 Command+D 进行复制，D 便是 Duplication 的首字母、Command+N 进行新建，N 便是 New 的首字母。这样的设定方式其实源于国外，同样也是我们日常设定最为常见的一种方式。2. 流程法流程法就是去思考整个快捷操作的具体流程，比如我们最常使用的 Command + C 与 Command + V 就是一个例子。因为如果按照常规的设计思路，粘贴在大家的印象当中一定会是 Paste，但是由于复制、粘贴本身就是高频操作，并且两者按键相互关联，再加上 P 也是 Paint 的缩写，Command + P 有打印的含义，因此通过用户使用流程上的思考，最后将粘贴放在字母 V 上面。Viscidity 的缩写，它是一个名词，具有粘聚性、黏性的意思。3. 竞品法如果假设目前设计的产品当中已经存在许多竞品，它们就已经有了相对应的解决方案，这个时候可以考虑借鉴直接竞争对手的按键设计，因为你可以通过这样的竞品设计，让你的用户的切换成本更低，也能够让他们快速上手。举一个例子，比如 Sketch 与 Figma，Figma 的出现本身就是与 Sketch 进行竞争，因此没有必要在快捷键上进行特立独行，反而会增加用户的使用门槛。在哪使用快捷键既然上面讲到了如何设计，咱们还是不得不提一提在 B 端产品当中，哪些地方可以使用快捷键？好方便在读文章的同学们直接抄作业，用在自己的系统当中。1. 详情页编辑详情页几乎是每一个 B 端产品必备的页面。它能够帮助用户进行详细数据的阅读，其核心诉求会分为两种：对表格页当中的信息不太清楚，想要通过详情页进行更为仔细的阅读；对存储的数据有所质疑，想要更改几条数据；因此，分析完了这两种情况过后，我们可以使用快捷键，去满足用户对详情页编辑的诉求，进而可以实现对某一个页面的快速操作。具体做法我们可以按照上一章节讲的，如何设计快捷键的思路。我也举几个例子比如现在对纷享销客这样一款 CRM 产品的详情页进行编辑时，除了思考初级 B 端设计师需要处理的视觉部分之外，你还可以使用快捷键，将详情页的编辑，与按键的字母 “E” 进行绑定，这样可以配合鼠标来完成页面的快速操作，提高 “高级用户” 的操作效率。这样的优化就算是完了么？其实这也是市面上绝大多数教程不会涉及的点。因为他们缺乏 B 端的实际工作经验。也就导致只会教大家如何依葫芦画瓢，教学员去实现某一个页面的具体布局，根本不考虑实际的项目当中的各种诉求与逻辑关系。这也可能是我上课只喜欢去画草图的原因，因为 B 端的“形”很简单，有太多的组件可以支撑你进行设计，但是 B 端的“意”则会过于复杂，很难理解。说了这么多，我们来看看究竟应该如何进行优化？也就是在这个功能新增之下，还会有哪些存在的漏洞？简单列三点：在用户进入到详情页，但并没有编辑权限时，点击了按键 E 应该怎么办？在整体的页面当中，就只绑定编辑操作吗？其他操作需要绑定按键吗？如果需要你会怎么设计？让用户知道快捷键的存在？是简单的信息外漏？还是会有一整套 “机制” 来去辅佐进行解释。这样不断完善，设计方案才能更加完整。大家要记住，虽然得到一个设计结论很简单，但是 B 端系统本身就不是简单去删除列表，去增加更多视觉上的引导。而是你增加了一个功能模块过后，有没有考虑到它在整个产品当中的合理性，是否有具备思考完整的设计思考。不扯那么多了，我们继续～再举两个真实落地的例子：1. 在网页端的 B 站视频播放页面（你可以理解为是视频的详情页），用户可以通过点击 W 为投币、D 为弹幕开关、E 为添加收藏夹、F 为全屏播放，实现对视频的快速操作。而投币、弹幕开关、收藏夹、全屏播放都是属于 B 站最为核心的功能操作，因此这样的设计非常的赞。但 B 站的处理，还是会有小小的瑕疵。会有很多用户对于这样的快捷操作并不知情，可以考虑在入口提示上，进行对应的简单优化。当然这样的产品还会有很多，比如 Youtube、抖音网页版都采取了这样的设计，大家可以自己去查看总结一下不同产品的特点。2. Salesforce，还没开始对它进行调研的时候，我其实就能够猜到作为世界上如此出名的产品，肯定会有快捷键的设计。但随着调研的深入，发现在早些年间，它并没有进行快捷键的设计，因此受到很多用户的 Diss。随之便有人自行开发一款浏览器插件来实现对应的功能。而在后续的产品迭代当中，SF 逐步更进了这一功能，通过快捷按键，可以实现多个功能。逐渐将快捷键的方式放在整个系统当中，得到更多人的认可。目前形成了这样的一个完整快捷键体系。表格页新建在表格页当中，我们最常使用的便是新建操作。同样可以按照详情页的思路，将整个页面当中的新建操作进行键盘按键绑定，实现快捷操作的效果。比如在飞书管理后台的成员与部门页面当中，我是否可以通过点击 N 实现快速添加成员的操作？通过这样的方式就能够保证，用户的快速按键操作。其实这里还可以将问题再稍稍加深，我们是否还可以考虑一些新的方式？比如全局新建，在整个系统当中提供一个全局新建的入口，让入口更为统一，甚至可以实现全局键盘操作的“梦想”。又或者是通过快捷键呼出全局搜索，进行实现对应的操作？类似于 Notion 这样的产品，这些都是可以去思考的方向。导航菜单切换在 B 端产品当中，导航菜单的设计是最痛苦的一件事。因为一个员工，想要完成自己的工作，就必定会在不同的导航菜单之间进行来回切换。在 2022 年的趋势这篇文章里也讲到，越来越多的 B 端产品开始变得臃肿。也就意味着用户需要不断寻找、不停的切换导航菜单，来完成这个角色自身的工作，因此针对臃肿的 B 端产品，我们可以使用快捷键来实现导航菜单的切换。这里给到几个产品的思路，大家可以学习借鉴一下：比如常见的飞书，因为本身是 CS 架构（客户端），因此可以通过组合键的形式，来实现对导航菜单的快速切换。飞书通过按住 command + 1、2、3 … 来实现切换。钉钉则在这部分就缺少了这样的设计。而薪人薪事的做法则会有所不同，它的入口非常特殊，采取全局导航的形式（这个后面会单独出导航菜单的文章来进行讲解），将整个入口进行绑定，通过双击 command 对导航中心进行呼出，并且后续可以支持更多导航菜单的切换，这也是一个不错的思路，值得大家借鉴。全局功能在你的系统当中，一定会存在一些全局影响的功能。它会影响到系统当中的每一个角落。比如 CRM 系统里面的通讯录、消息、邮件。它本身和主营业务差别不大，但是由于业务发展等其他关系，需要单独处理。因此会有很多全局使用的功能，这时候便可考虑将其与快捷键进行绑定。比如明道云，因为在明道云的整体设计当中，消息、通讯录都是游离产品架构之外的一些协作内容。因此名道云将其通过快捷键的方式进行查看，进而实现页面的快速呼出，能够加大用户的使用效率总结：分享了过后，最后再唠一唠我的自己感受。其实快捷键是一个非常立竿见影的设计提升方式，我们除了去想清楚快捷键应该如何设计之外，更多还需要让用户能够发现有这样快捷键。虽然 B 端产品我们可以通过客户培训、新手引导、帮助文档的方式来教会用户，但是快捷键这样的一个功能本身是针对中、高熟练度的用户，也就意味着，你需要不断的去培养用户养成快捷键的习惯，这样才能够保证，快捷键能够真正的被用户所接受。其实现如今出现了很多无障碍的设计，大多数情况下都是在讨论如何脱离鼠标进行快捷的操作。其实比起无障碍，快捷键应该能够出现在更多 B 端产品当中。最后做个总结：我们常见的常见快捷键会分为：Ctrl、Command、Shift、Tab、Alt、Option如何设计快捷键？首先要去判断是否需要快捷键，共有三种判断方法、高频使用、核心功能、沉浸场景。其次要去归纳用户的快捷键诉求，想清楚快捷键的使用场景，避免与其他软件冲突。接着去想想究竟怎么设计快捷键？可以使用语义法、流程法、竞品法。最后我们可以在哪使用快捷键，能不能抄一抄作业？可以在详情页编辑操作、表格页新建操作、导航菜单的快速切换、以及全局的功能操作。唯快不破！可能是最全面的PS快捷键使用指南（图文演示）@阿随向前冲 ：看完这篇，帮你掌握最常用的32个Photoshop 快捷键。阅读文章 > 我是 CE 青年，一个 2 B 行业 的 2B 设计师欢迎关注作者的微信公众号：CE青年交互设计本篇来源：优设网原文地址：https://www.uisdc.com/shortcut-keys-design
字体 趋势 风格 蒙纳公司最近刚刚发布了 2022 字体设计趋势报告，这份报告对于视觉、LOGO、平面、字体/字库设计师有着相当的参考价值。这家早在 1920 就开始制作中文字库的美国公司，有着丰富的字体设计经验，它的子公司甚至持有着包括 Helvetica、Baskerville、Garamond 在内的诸多经典字体的所有权。英文字体设计当然是值得借鉴的在分享这份报告中内容之前，先说两句。由于汉字本身的复杂性和丰富性，中文字体的制作成本、周期相对会长很多，相应的，国内设计行业中，字体的供需关系和国外有着相当大的差异。但是，西文字体本身「相对低廉」的设计成本使得它们在视觉风格的反应速度上，比起中文字体设计更为「敏锐」。西文字体突出的几何特征，又使得它们在LOGO、标题文本的风格化设计上，对于中文世界中视觉设计，有着重要的参考价值。更何况，在很多设计场景之下，英文文本也是必要的存在。这使得蒙纳这一份 2022 设计趋势报告有了超出「什么字体会流行」这个问题以外的设计价值，它所折射出的设计方向包含了多个层面：正在流行的字体设计趋势有哪些世界范围内设计师、艺术家和品牌正在转向哪些视觉风格哪些字体设计技法是正在流行开来的如果在LOGO、标题字风格上没想法，哪些风格技法是当下值得参考的……总之，这份报告的价值还是相当高的，可以在文章开头结尾下载原始的趋势报告，详细阅读。2021 年加粗软衬线字体是赢家在 2021 年的趋势报告中，蒙纳预测了多个风格字体的流行，其中最典型的就是加粗软衬线字体的流行。衬线字体无论是在中文还是在英文中，都相对更加老派，衬线赋予了笔触更高的识别度，而使用加粗软衬线的字体，则在相对复古的笔画中，加入了圆滑活泼的气质，弱化了衬线的尖锐笔锋。而最典型的是比利时 WeWantMore 旗下的啤酒老品牌 Cristal ，借助这种加粗软衬线字体风格的品牌 LOGO 重设计，重新回到了当地啤酒市场的领导地位。实际上，采用同样策略的品牌不止这一个，美国的食品品牌 Core&Rind，瑞典啤酒品牌 PangPang，等等。不过这种加粗软衬线字体的设计趋势，从冒头到流行，前后有接近5年的时间跨度，设计师和品牌都在寻找新趋势，而接下来的 10 个字体设计趋势，就是蒙纳结合过往的趋势和2022 年已经冒头的设计倾向，梳理出来的趋势。10 种 2022 字体设计趋势在蒙纳的这份报告中，总结梳理了10种 2022 年他们观察到的、可能会流行的趋势，这 10 个趋势涉及到 10 种不同的字体风格或设计技巧，下面逐个说说。1、全新的「新艺术运动」式字体新艺术运动（Art Nouveau）时期所诞生的很多字体设计作品当中，字体会使用充满有活力、波浪形和流动的线条来呈现，传统的「新艺术运动」式的字体有这有趣的装饰性细节，精心调整过的笔锋，字符似乎在受力之下扭曲变形。这种区别于古早经典的 Art Nouveau 的风格，如今重生的是「新·新艺术运动风格」，也就是 Neue Nouveau，它在现代技术的加持上，笔触的变化可以更加反复，更为有趣，其中Nick Towers 所在的 We Are Nothing 工作室为Amore 设计的 LOGO 就巧妙地使用了这种风格，而 Mother Design 为Park Lane 酒店所设计的品牌视觉，则赋予了这一酒店品牌独特的气质，从一众竞争对手手中脱颖而出。和早年的「新艺术运动」时代不同，现代的设计在曲线的转折选取上，更加富有戏剧性，在繁复程度上更上一层楼。2、衬线更为苗条纤细的字体如果说去年的加粗软衬线字体是一个极端，那么这种衬线纤细苗条的字体则是另外一个极端。蒙纳为旧金山交响乐团所设计的字体，就采用了贴合这一趋势的设计。蒙纳专门为此设计了一整套涵盖展示性的字体和正文字体的可变字体，这种趋势早在 2020 年就开始有设计师频繁地使用，在 2020 年的澳门设计周上，基于这类字体设计的海报惊艳了全场。3、充满连笔和循环的字体Facebook 更名为 Meta 并且设计了这个无线循环的 LOGO，这几乎是这一技法上升到设计趋势的转折点。虽然同类的 LOGO 和字体设计并不都非常优秀，但是它们共同构成了这一趋势。中国台湾踏板车厂商 oloo 也使用了类似的设计，不过它在字母 l 的连笔设计上似乎并不一致。Pearlfishers 旗下的汽车保险品牌 Loop 也采用了类似的设计：4、多风格混合式的字体设计不同风格的字体混搭排版，所呈现出的多样性和包容性正是最近几年的重要主题。这些海报和字体设计，通常都是想让截然不同的字体在排版中找到某种秩序感，它们的理念核心是崇高的：包容差异。无论是耶鲁大学建筑学院的作品，还是马来西亚的设计师们集体设计出来的字体 Mixup，它们所秉承的理念都大同小异。UntitledMacao 为在地舞蹈艺术节设计视觉的时候，也借助不同的字体来表达差异和包容的概念，在混搭的视觉呈现上很好的做到了统一而富有动感的效果。5、「有机模组式」的字体设计这是一个非常有趣的趋势，在网格的基础上来设计，确保字体的规整，又借助有机的几何图形和线条来制造出风格多变的字体，这种「有机模组」的设计策略创造出的字体突破了传统字体结构的藩篱，整齐而又具有可用性和一致性。这种字体设计风格延续了之前的 Blockheads 风格字体的 8-bits 式的设计方法，但是更为多变：设计师吴清予为后海大鲨鱼主唱付菡首张创作专辑《新世纪人类浪漫主义》设计的封面，其中英文字体使用的就是这种「有机模组」制作出来的。6、波动式的可变字体数字设计在传统平面设计上发展出了更多的可能性，包括字体的各种变化形态，而可变字体则正好是让这种波动式的改变成为了可能性。和 Neue Nouveau 一样，这种设计趋势有很多下属分支。除了赋予字体不同的颜色之外，字体在二维平面上可以拓展，重复，裁剪，或者随着基线扭曲变化，笔触粗细变化等等。它们还可以进入3D的空间中，在空间中变化，呈现出不同的波动形态。7、街头涂鸦风字体严格意义上，这里说的是源于街头涂鸦的 Throw-up 字体，它有着丰满的笔触，在折叠中隐藏着重复和有趣的变化，像气球一般，也充满了复古的气息。这种字体的风格有年轻的气息，特别具有手工的质感。使用这种风格的字体来设计字体的时候，有着极大的操作空间，有着丰富的变化，但是只要整体协调，每种变化可能都是正确答案。8、「油墨陷阱风」字体设计在油墨印刷盛行的年代，由于铅字上油墨不足而导致字体的转折处油墨不足的效果，如今已经成为一种独特的「风格」。在字体的笔画转折处留出间隙，制造出着色不足的效果，能够让字体的笔画之间更加「脆弱」，但是也能让字体更加具有识别度。9、金属质感字体设计如果将 2D 的 Throw-up 字体的笔触替换成为充满金属质感的气球，拓展到 3D 的空间中，那么它将拥有更加豪华，更为诱人，更加富有光泽变化：当然，字体的笔触也可以带有棱角和锐利的边缘，就像这个源自《英雄联盟》的字体设计：10、NFT字体NFT 是房间里的大象。实际上，现在已经有不少设计师开始将字体和字体相关的数字艺术品借助以太坊分发出去了，只是它们如何产生影响力，如何提升价值感，如何在用户当中形成共识，还有待观望和探索。延伸阅读国外专业机构出品！2022年你需要抓住的 8 个UI/UX设计趋势Hi，我是彩云。阅读文章 > 腾讯出品！2022 设计趋势报告：数字内容营销篇背景数字营销是指借助于互联网营销方式，帮助业务方和消费者建立触达渠道，实现业务的商业目标达成。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 Monotype_Type-Trends-Report-202224mgvkm 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/monotype-trends-report-2022
发明者 网景 发音 2022 年 3 月 14 日，GIF 动图的发明者 Steve Wilhite 因新冠并发症去世，享年 74 岁。GIF 发明者 Steve Wilhite（图片来源：Stephen Lovekin/Getty Images for The Webby Awards；Wikipedia）1987 年，Steve Wilhite 发明了 GIF。那个时候，谁也不曾想到一张小小动图会在日后成为风靡互联网的表情包，出现在人们的日常聊天会话中。为了纪念 Steve Wilhite，我们从 GIF 的历史资料以及 Steve Wilhite 的相关报道中整理出了 9 件与 GIF 相关的事实。这些事你可能有所耳闻，也可能是第一次听说，无论何种，我们都希望这篇文章能让你对 GIF 及其发明者 Steve Wilhite 多一些了解。GIF 起源上个世纪 80 年代，CompuServe 公司的开发者 Steve Wilhite 和他的团队要解决一个难题：如何让计算机在显示图片的同时能够节省内存？那个时候，万维网还没有诞生，用户需要订阅 CompuServe 的服务来传输文件和发送邮件。如何在不占用过多计算机内存的情况下共享彩色图像文件？Steve Wilhite 找到了一种方法，他通过 LZW 压缩算法结合图像参数（可用色彩为 256 种）实现了在计算机之间交换图像，这些图像非常清晰且不需要使用大量颜色。Steve Wilhite 称这一新发明为 Graphics Interchange Format（图形交换格式），即 GIF。第一张 GIF在一次罕见的采访中（Steve Wilhite 极少接受采访），Steve Wilhite 告诉科技媒体 Daily Dot：“我记得世界上第一张 GIF 动图是一架飞机的图片，那是很久以前的事了（I think the first GIF was a picture of a plane. It was a long time ago）。”凭一己之力创造 GIF“Steve 一个人发明了 GIF——实际上他是在家里发明的GIF，经过完善后才投入到工作中，” Steve Wilhite的妻子Kathaleen告诉科技媒体The Verge。“他总是先私下在头脑中想好怎么做，再竭尽全力地在电脑上编程。”“He invented GIF all by himself — he actually did that at home and brought it into work after he perfected it.”网景（Netscape）拯救了 GIF网景是第一个允许用户使用图片在网站上交互的浏览器——这意味着你可以通过单击图片链接到新的网页。1995年，网景推出了支持GIF动图的Netscape Navigator2.0，并为动图添加了无限循环效果。人们可以用GIF静态图或动图装饰网站，十分简单。Steve Wilhite曾告诉Daily Dot：“如果网景没有在浏览器中添加 GIF，它很可能早在 1998 年就死掉了（ If Netscape had not added GIF in their browser, GIF would have died in 1998）。”成也 LZW，败也 LZWGIF 之所以能够获得革命性的成功，是因为它使用了一种被称为 LZW（Lempel-Ziv-Welch，由三位发明者的名字命名）的算法。LZW 通过识别重复模式，然后对其进行简化，从而做到文件的无损压缩。但 LWZ 压缩算法的技术专利由 Unisys 公司持有。1994 年，Unisys 和 CompuServe 宣布向任何使用了 LWZ 算法的软件（其中包括 TIFF、GIF 和 PDF）收取专利费用。这一举动惹怒了开发者们，为了抵制 Unisys，他们开发了不使用 LZW 算法的全新文件格式——PNG，并且在1999年11月5日庆祝了一个名为“Burn All GIFs”的节日，庆祝方式就是齐聚在一起，集体删除GIF文件。虽然Unisys的专利购买只是针对大公司而非个人，但是开发者们还是感受到了威胁。2004 年夏天，Unisys 的 LZW 专利到期。GIF 又重新走上巅峰。GIF 大爆发Reddit、Twitter 和 Tumblr 分别于 2005 年、2006 年和 2007 年面世。它们为 GIF 社交文化的爆发做出了重要贡献。尤其是对图像友好的 Tumblr，可以一次性上传 10 张 GIF 动图。在 Tumblr 上，人们用精心制作的 GIF 动图讲述故事和传播时事新闻。GIF 的广泛流行也促进了 GIF 艺术家的涌现。平面设计师 David Szakaly（网名为 Davidope）是最著名的 GIF 艺术家之一。他通过对 GIF 的艺术化改变了人们心中 GIF 只能用来搞笑的看法。David 的作品通常为黑色和白色，并具有无限循环效果。下图是他的作品。图片来源（ https://dvdp.tumblr.com/ ）2013 年，Tumblr 选择了 GIF 创作者和游戏设计师 Roger Von Biersborn 作为其第一位常驻艺术家，邀请他为网站创作原创艺术。GIF 发音之争一直以来，GIF 的发音问题一直争论不休，有人认为 G 应该发浊音（如 gift、great 中的 g），也有人认为应该发轻音（如 gentle、giraffe 中的 g）。GIF 的发明者 Steve Wilhite 曾多次强调 GIF 中的 G 应该读轻音，甚至为了教大家正确发音，还改编了一则流行一时的 Jif 牌花生酱的广告语：Choosy developers choose GIF（原广告语为 Choosy mothers choose Jif）。可尽管如此，很多人依然按照 gift 的发音，省略其中的“t”来读 GIF。最后，连牛津这样的权威词典都不得不同时收录了两种发音。Steve Wilhite 最喜欢的一张 GIFSteve Wilhite 在一次采访中曾透露，他最喜欢的 GIF 是一张“婴儿跳舞搞笑动图”。这张图片也被称为“baby cha-cha”，最初是由 Character Studio 发布的 3D 渲染动画，在 1996 年曾火爆全网。证明自己是 GIF 发明者Steve Wilhite 的妻子 Kathaleen 向《纽约时报》透露：Steve Wilhite 在晚年的时候，将 GIF 的整个发明过程写进了一个三页的文档中，并常常与他的孩子和孙辈一起分享 GIF 的故事。后来 Wilhite 的孙女 Kylie 在学校将这件事（自己的祖父是 GIF 的发明者）告诉了她的计算机老师，但老师完全不相信，认为 Kylie 是在开玩笑。迫不得已，Steve Wilhite 亲自给老师写了一封信证明孙女所说属实，并在最后签名确认，这才使得老师相信。2013 年，Webby Awards（韦比奖）授予 Steve Wilhite 终身成就奖，而给他颁奖的正是 Tumblr 的创始人 David Karp。编者注：一年一度的“韦比奖”由美国纽约国际数字艺术和科学学院创立，旨在奖励最佳网站、互动广告、网上电影和视频以及移动应用等做出的杰出贡献。——来自百度百科CompuServe 的主管 Sandy Trevor 曾这样评价 Steve Wilhite：“他是一个软件天才，虽然 Steve 以发明 GIF 闻名，但那只是他的一小部分成就。Steve Wilhite 在发明 GIF 时，就已经为 CompuServe 和一个数据库管理系统单独编写了 Fortran 和 BASIC 语言版本。然后他开发了该服务的“Host Micro Interface”协议，可以让 CIM 软件与 CompuServe 的大型计算机通信（无论客户使用何种计算平台），从而在本质上实现了一个“图形浏览器”。遗憾的是，这位天才现在已永远地离开了我们。Steve Wilhite 的讣告中写道：“even with all his accomplishments, he remained a very humble, kind, and good man。”“ 即使取得了诸多成就，他依然是一位非常谦虚、善良和正直的人。”很多人在 Steve 的讣告页面留言，纷纷向他表达感谢和哀悼之情。虽然 Steve Wilhite 永远地离开了这个世界，但是他留下的 GIF 动图将继续为我们带来欢乐。Sources:https://www.smithsonianmag.com/history/brief-history-gif-early-internet-innovation-ubiquitous-relic-180963543/https://www.npr.org/2022/03/23/1088410133/gif-creator-dead-steve-wilhite-kathaleen-wife-interviewhttps://www.vox.com/culture/2017/6/15/15802136/gif-turns-30-evolution-internet-historyhttps://techcrunch.com/gallery/a-brief-history-of-the-dancing-baby-meme/https://www.dailydot.com/upstream/gif-history-steve-wilhite-olia-lialina-interview/https://www.nytimes.com/2022/03/24/technology/stephen-wilhite-dead.htmlhttps://www.rogervonbiersborn.com/https://pixel77.com/gifs-journey-website-ornament-fine-art/https://www.fastcompany.com/90734869/history-of-gif-steve-wilhitehttps://www.megiefuneralhome.com/obituaries/Stephen-E.-Wilhite?obId=24311617#清明将至，谨以此文纪念 Steve Wilhite 先生。如何正确压缩GIF格式文件？来看京东设计师的总结！本文主要介绍了羚珑动图产品侧对压缩GIF格式文件的探索，其中归纳了压缩GIF的各种方法以及相关开源工具，可以为需要压缩GIF文件的设计师提供帮助。阅读文章 > 欢迎关注作者微信公众号：「LiveVideoStack」本篇来源：优设网原文地址：https://www.uisdc.com/gif-history
设计师 技术 现实 疫情四起，仿佛回到两年前，而又觉甚于两年前。那时似乎所有人都躲在家里，而此刻这里那里远的近的相关的熟识的太多人在经历状况的起伏，便感到与两年前相比更加真实和迫近。大约是如此。来自 BrunoEverling@Medium 的系列文章，“Intro to Immersive Experience Design”，关于 AR、3D 界面设计及相关趋势、个人学习策略等等，个人感觉很有看头，译起来也很过瘾。全系列由三篇文章组成：第一部分：为何 3D 将成为 UI/UX 的未来第二部分：AR 产业的过去、现在及未来第三部分：沉浸式体验设计师的职业道路本篇为第一部分的全篇译文，略长；而后两部分出于某些原因或许考虑摘译。一如既往，个人学习之用，独享翻译之过程而共享其结果，全部内容仅代表原文作者 Bruno Everling 之观点。来自 Ameer Basheer on Unsplash为何 3D 将成为 UI/UX 的未来在第一部分中，我将和各位分享为什么我个人相信 AR 将成为 UI/UX 设计师新的前沿阵地。我会聊到界面范式为何势必由 2D 转向 3D，以及这项转变对于设计师及产品构建者的工作将形成怎样的影响。我的首要目标，是帮助大家了解如何充分利用我们此时所处的独特历史时期，即加入这场变革并为之做好准备的窗口仍在开放，而设计师亦可在塑造这个年轻行业并创造长期影响力的过程中扮演至关重要的角色。1. 我为什么要做这件事我写这个文章系列的动机，来自于对如今人机界面技术发展状态的深切不满。互联网存在于我们生活当中的方方面面，我们可以随时随地访问到巨量的信息。而通往这广阔无垠的数字化世界的窗口却只有钞票大小，一切内容都受困于这块玻璃屏幕后面——听起来并不那么方便，而且我们似乎已经习惯了这种不便。出身于工业设计的我，在创作出第一个数字化产品的很久以前，就开始进行实体化的设计了。我仍记得，在第一次设计自己的网站还有 app 时，由于必须面对的局限而感到的一丝沮丧：所有东西都必须是二维的，且必须被规规整整地填入一个矩形边框当中。此外，我也时常在想，在触屏交互范式以外，一定存在着某种更好的“东西”——它会更贴近于我们的天性，更贴近于我们在现实世界中感知和处理信息的方式。三年前，我开始探索这“东西”可能是怎样的一种存在。很快，我接触到沉浸式体验相关的技术。我深深地陷入了兔子洞中，花了大量的时间阅读相关的资讯，尝试各种不同的设备和 app。接下来的文字，归纳了我这一路上所得的关键知识与洞见；如果你有兴趣去理解这迷人的新交互范式，那么希望这些文字能够成为你的学习捷径。2. 增强现实来自 zedinteractive on Pixabay增强现实技术，即 AR，能使计算机生成的信息叠加于现实事物之上。这个概念本身算不上新事物，相关的沉浸式技术研究课题已有数十年的历史。但直到近年，得益于相关软硬件越发强大的性能，越发小巧的尺寸，以及越发低廉的价格，这项技术才逐渐从大学实验室走向大众市场。从几年前开始，我们已经可以在智能手机上体验最早一批实际可用的 AR app，包括“宝可梦 Go”这样的游戏，以及社交平台上的各种面部效果等等。AR 如此大规模吸引到市场的注意，这确实令人兴奋；但要真正实现其潜力，AR 还有很长一段路要走。尽管移动端 AR 在当前所体现出了巨大的创新性，但以手机作为载体，似乎仍然很难实现人们所寻求的那个融合着现实与数字化信息的世界。我们当中那些尝试过高级技术与设备的人距离我们所说的“理想世界”确实更近了，但当前，无论是 Magic Leap 还是微软的 HoloLens，纵使能帮我们更清晰的瞥见那沉浸式的未来，它们也仍然被认为是此类设备较为早期的、bug 较多的版本。那么为何我个人仍如此确信 AR 会有一个光明的未来？我们不妨从界面设计的角度来思考这件事。3. 认知负荷我相信 AR 可以取得成功的理由很简单：这一切都在于“认知负荷”。这个概念由教育心理学家 John Sweller 于上世纪八十年代提出，用于描述人们完成任务时在心智上所需付出的精力总和。该理论认为，由于人们的短期记忆能力非常有限，因此，沉重的认知负荷会对人们完成任务的效率造成严重的负面影响，并使人们的学习能力受到阻碍。我们在设计产品时，一项重要的工作就是帮助用户降低认知负荷。一个 app 或网站，越易于导航和完成任务，便越好；体验越不费力，便越具有竞争力。人机界面的发展历史见证着认知负荷持续降低的历程。GUI（图形界面）之所以能代替命令行界面，并不只是因为它看起来更漂亮——更重要的是，它使得人脑中相当一部分记忆空间得以解放，从而使人能更加聚焦于任务本身。命令行界面需要用户在完成任务的过程中持续回忆和输入各种命令与参数，而 GUI 则能将系统的底层逻辑以符合人们在现实世界中处理事物的方式可视化地呈现出来（文档、文件夹、抽屉），因此极大降低了人们所需付出的脑力。来自 Mika Baumeister on Unsplash而随着移动时代的到来，触屏技术使得人机界面的认知负荷进一步降低。人们可以通过与生俱来的灵活的手指，去直接触摸和控制数字化信息，这就使得指针交互所形成的抽象层面得以被移除。如今，另一类强大的人机界面类型同样得到了广泛的关注，即 VUI（语音界面）。通过语言与数字化设备进行沟通的方式更加自然省力，因为这原本就是我们生而为人所习惯的。这与命令行时代的情况恰好相反：在那时，我们必须学习和适应机器的语言，才能与它们进行沟通；如今，机器开始学习和理解我们的语言，以此与我们进行交流。4. 关于“输出”的下一场变革触控和语音在很大程度上都属于输入方式。而在输出方面，尚缺乏足够贴近人类天性的方式。人类是视觉动物，我们的双眼是帮助我们认知世界的最重要的感官。而一块小小的二维屏幕怎能真正满足我们的所需。正如触屏离我们的手更近（移动设备），VUI 离我们的嘴和耳朵更近（Airpods），人机界面的输出方式也将离我们的眼睛更近——譬如智能眼镜。来自 Jürgen Schmidtlein on PixabayAR 眼镜能帮我们将数字化信息直接投射到真实世界的环境当中。这在本质上是非常强大的概念，因为内容终于打破了屏幕的禁锢。这意味着两件事：首先，内容可以超越矩形框架的范围，真正呈现在我们眼前的现实环境当中，在它们应该在的地方，而不再以手机屏幕作为两者之间的“代理”。第二，内容可以从二维扩展至三维。而由此所创造出的可能性将使更好、更直观的视觉沟通形式得以实现。更重要的是，这将使人机界面的认知负荷进一步降低。我们来看一些更直观的例子。早期的 AR 用例最典型的例子之一便是地图：通常，在二维图像信息与三维环境信息之间进行转换会非常消耗脑力。而通过 AR，你可以直接将信息投射在道路上，从而将一部分脑力解放出来，用于关注更重要的事物。在驾车的场景中，这更是有利于安全性的提升：导航信息直接投射在视野前方，而不是呈现在方向盘侧面的二维屏幕上，这样驾车人的视线便无需去关注侧面的设备屏幕，确保注意力始终聚焦在行车路线上。来自 Roland Denes on Unsplash我们在线上买鞋时，通常会仔细观察若干商品详情图片，并将它们在头脑中转化成复杂的模型，去设想鞋子在现实中甚至是在我们脚上的样子——整个过程的认知负荷非常高。家具一类的产品也是同理。在这些场景中，AR 能让我们从不同的角度直观地看到产品在真实环境中的样子，帮助我们快速有效地制定决策。再来考虑操作手册的例子。譬如为了更换空气净化器的滤芯，而翻看着 300 多页厚的印满了小字和插图的说明手册，这着实不是什么良好的体验。借助 AR，清晰易懂的 3D 图形化的操作指引便可直接附着于操作对象之上。电气装配与维修也是同样的道理，这类在过去仅能由专业人员进行的操作，在 AR 的辅助下，都将会变得简单易行很多。Carlos Fy / CC BY-SA以上这些例子仅展示了 AR 这项技术的一小部分潜力，更多的可能性仍有待我们去进行设计。这便引出了下一个话题，即设计师在该技术的进化历程中将扮演怎样的角色。沉浸式体验设计AR 对于 UI/UX 设计意味着什么？从 2D 到 3D 的转变，对于设计师来说自然意味着一个全新维度的可能性——字面意义上的全新维度。我们将可以通过事物的三维形体，而不只是二维形状，来传达其可供性（affordance）。界面元素与内容将拥有纵深，并能在多个角度上被观察和互动。我们也将拥有一种创建信息层级的新方式：除了颜色、对比度、大小以外，我们还将能利用远近距离来体现界面或内容元素之间的权重关系。我们也不再需要通过模拟的阴影效果让按钮看起来更有质感——在三维环境中，我们可以让它“真实的”凸起于背景之上，就像现实世界当中的按钮那样。来自 ID 849356 on Pixabay由于设计将不再受矩形框架的限制，我们一直以来所依赖的一些设计原则和架构或将不再适用，譬如网页设计中的 12 列栅格体系等等；内容更多将会锚定于物体表面，而非二维屏幕的框架之中。或许，所谓的“响应式设计”，届时将会指代 3D 对象随着用户距离的远近而呈现出不同的外观及功能性，而非基于屏幕或浏览器的尺寸而改变布局。例如，附着于产品表面的文本对象可以随着用户逐渐走远而增大字号，让人从较远的距离也能清晰阅读。在 AR 当中进行叙事的方式也将发生重大变化。每一个体验都将是独特的，且只存在于它所对应的特定场景当中。人们的行动方式不同，因此我们也就无法预先设计一条“标准”的行动路径，所谓“边缘案例”将成为常态，因此用研与测试工作将比以往更加重要。诸如此类的变化让我们看到一个事实：AR 将对数据的组织、管理与呈现方式产生根本性的影响，因此在 UI/UX 设计层面，同样需要全新的思路与方法。业界需要我们我们已经大致了解了为何由 2D 向 3D 进行转变将成为必然，以及这将对我们这些设计师产生怎样的影响。那么接下来，我们可以做些什么呢？当我在几年前意识到 AR 的潜力时，摆在我面前的是两个选项：等待技术的成熟及转变的发生，再进行响应。也就是等待别人搭桥，再去过河。参与建造桥梁，成为第一批过河的人。来自 Mason Kimbarovsky on Unsplash我个人希望能有尽可能多的设计师选择第二条道路，在造桥的阶段就参与其中，而不是等待工程师们把一切都搞定。我认为这很重要，因为：正如曾经出现的诸多新技术，更多是由开发者们首先实现了参与，并在之后持续引领着业界；如今在 AR 方面，也呈现出缺乏以用户为中心的产品开发思路的问题。该技术新近所取得的进展，基本都是围绕着“技术能实现什么”而进行的；我们看到很多所谓的解决方案实际上没有解决任何实际问题。AR 应该如何被用于满足用户实际需求，这依然是一片缺乏探索的领域。这便形成了某种恶性循环：迄今为止最为成功的 AR 案例并没带来太多实际价值，很容易被人忽视，因此设计师们也倾向于认为这项技术不存在真实用例，进而错过了参与其中并创造真实变革的机会。这个领域相对来说仍然非常年轻，因此还没有太多的工具或是设计准则可以依赖。这种局面对于设计师来说既是挑战也是机遇，一片开阔的土壤正等待着我们去开垦。这一次，我们可以探索和建立规则，而不是像过去几次技术变革那样，等待开发人员、业务分析师或市场部门来做这件事。我个人相信，摆在我们面前的是一个独特的机遇：AR 在未来的影响力是足以预见的，但实际技术仍需要发展几年，才能达到价格足够低廉，用户体验足够友好，进而进入大众市场的程度。任何理解了这一点的设计师都应该意识到，我们仍然有足够的时间来学习并逐渐实现 3D 界面设计的转化。随着越来越多的公司开始尝试跨入第三个维度，“沉浸式体验设计师”很可能将成为大受欢迎的职位。我们是否已经做好准备去迎接设计历史的新篇章，并在其中扮演我们的新角色了呢？在本系列文章后续的部分当中，我将和各位一起对当前的 AR 产业进行纵览，例如最重要的玩家有哪些，他们各自的沉浸式技术策略是怎样的，以及接下来几年的发展趋势。而最重要的，我还将和各位一起讨论如何充分利用当前的行业图景，以及作为设计师应该如何在接下来的技术变革中扮演重要的角色。最终，我希望大家都能对这个领域的潜力感到兴奋，并一起加入到沉浸式体验设计师的行列当中。AR｜也许AR增强现实技术才是距离设计师最近的未来从科幻小说到电影，从动漫到现实世界，虚拟现实技术历经几十年的光阴，从一个构想，变成了现实世界中到处可以体验到的民用技术。阅读文章 > 欢迎关注作者的微信公众号：「Beforweb」本篇来源：优设网原文地址：https://www.uisdc.com/immersive-experience-designer
印尼 汽车 消费者 东南亚（主要包括印尼、越南、菲律宾、马来、泰国、新加坡等 11 个国家）各国人口结构、生活方式、经济水平、宗教信仰都差异较大，本系列文章会聚焦在印尼本地化产品的用户体验设计，我们以点到线再到面，慢慢的去渗透了解东南亚整个市场。本篇是本系列第一篇内容，编辑会通过桌面调研（Desk Research) 的方式，从专业机构的研究报告中摘取核心信息，通过本文分享给大家，旨在帮助大家对印尼建立初步的认知，干货多多要认真看哦，建立了基础的认知后，设计师相当于拿到了通行证，才有资格开始着手去做产品的本地化设计，这才是开头第一步。本系列第二篇内容将以东南亚汽车后市场电商平台 Speedwork 为切入点剖析如何做东南亚本地化产品的设计，所以在第一篇文末，会垂直到汽车及汽车后市场领域去介绍。*文中数据均来自专业机构的研究报告：谷歌-2020 年东南亚电子商务报告、TMO Group-印尼电商市场指南(入门版)、Statistica, Ipsos and customer interviews.人口印尼是世界人口第四大国，2020 年约有 2.677 亿人口，是仅次于中、印、美的世界第 4 大人口国。印尼华裔人口占比 8%，且人口组成高度年轻化，40 岁以下人口占比 60.41%；男女比例均衡。GDP印尼是东南亚最大经济体，GDP 总规模 1.042 万亿美金，年均增长 5.1%，人均 GDP3,894 美元（GDP 按照 2020 年 5 月份美金汇率计算）；中国 2021 年预测人均 GDP 大概是 1.27 万美元，约是印尼的 3 倍多，年均增长 3.9%。收入分配基尼系数为 0.38，收入分配处于相对合理区间；中国的基尼系数维持在 0.46-0.47 区间，可见中国的收入差距比印尼大。虽然中国贫富差距依然比较大，但是平均年收入是比印尼高的，2020 年印尼人的平均年收入为 5900 万印尼盾约 4193.3191 美元，目前我国的人均国民收入超 1 万美元。宗教印尼是一个约有 300 个不同民族且多宗教的国家，全国有 87.2%左右的人口信奉伊斯兰教。是世界上穆斯林人口最多的国家。所有印尼公民都必须要有宗教信仰，这个会体现在他们的 KTP(身份证)上，非常重要。《古兰经》中指出，穆斯林不可食自死物、血液、猪肉，还有鹰、虎、狼、狗、狮、熊、象、猫、驴、骡、龟、蛇、蟹、鳖、青蛙等也在禁食之列，牛、羊、鸡是可食用的，同时还忌讳老鼠。伊斯兰法制只许可根据狗的生理和理智特性对狗使用，而禁止把狗当作宠物养在家中，也不允许用狗与儿童作伴，在一起玩耍，因为对儿童的健康不利。这是全世界穆斯林共同遵守的规则，因此，在任何伊斯兰国家，看不到穆斯林在马路上悠闲地溜狗，或者把狗狗作为爱宠。那他们养猫吗？穆圣曾经说过：“猫不是脏东西，猫是属于你们形影不离的家畜。” 可见伊斯兰教是可以养猫的，且猫狗的待遇简直是天壤之别。猫在伊斯兰世界是纯洁的象征，穆罕默德禁止穆斯林虐待动物或杀猫，猫吃过的食物被视为合格的清真，连猫喝过的水也允许用于祈祷前的净礼。因此无论是热闹的观光名胜、市场或神圣的清真寺、圣徒陵墓，都可看到它们悠闲的身影。穆斯林在正式的场合，穿着要庄重得体。男性一般身穿白衬衫长裤，女性要戴头巾，不能穿暴露的服装。日常生活中并不强制穆斯林女性佩戴头巾。节日印尼的节日一般分成四类：宗教节日、国家节日、国际节日和纪念日。穆斯林教徒非常注重斋月，在斋月期间（每年斋月始于伊斯兰教历 9 月初新月出现，结束于教历 10 月初见到新月时为止），许多印尼消费者会进行房屋装饰、节日食品和新衣服的采购，为斋月后的 Hari Raya Idul Fitri 做准备，因此这类采购需求在斋月期间尤为强烈。另外，印尼企业会为员工发放 Tunjangan Hari Raya（印尼特有补贴），对消费者购物有很大程度的激励作用。概览印尼属于国家大，地理格局分散。对消费者而言，线上产品选择更丰富，足不出户买到线下缺乏、或没有的产品，更具便利性。印尼电商仅占该国零售总额的 4.4%，但 2020 年电商市场规模为 270 亿美元，拥有 88%的电商渗透率，约有 2.3 亿消费者在线购物。印尼消费者平均网购额为 481000 印尼盾（约合 36 美元），这一数据远低于新加坡的平均 91 美元，印尼在东南亚国家中排名倒数第二。根据 statista 的调研报告数据显示，印尼地区的互联网渗透率[3] 已经从 2015 年的 42.65%，增长到了 2020 年的 72.81%（预测值）。在五年的时间里，印尼互联网渗透率增长了 30.16%，预计到 2025 年，印尼互联网渗透率将达到 89.3%。印尼的互联网人均使用时长已从疫情前的 3.6 小时/天，增至目前的 4.3 小时/天。庞大的人口基数和互联网高渗透率为印尼电商市场发展奠定了基础。[3] 互联网渗透率是指使用互联网的网民与总人口数之比。用于表达互联渗透到普通民众生活的程度。主流电商平台说到电商，国内消费者一般都会想到淘宝、天猫、京东等购物平台，印尼同样也有强大的本土电商平台：Tokopedia、Bukalapak、Blibli、Zalora 等，及国际巨头电商平台：Shopee、Lazada ID、JD ID 等。值得一提的是，就算是本土电商，也不是本土企业 100%控股，阿里目前是 Tokopedia 最大股东之一，可以看出国内的电商之战早已卷向了东南亚。本土品牌韧性十足，与国际巨头激烈竞争，目前仍是平分秋色，基本格局已然成形。单从流量角度，印尼电商市场由 Shopee（隶属腾讯系）和 Tokopedia（阿里持有 29%股权）两大品牌主导，占据了整个市场的三分之二左右，与第二梯队的 Bukalapak、Lazada（阿里约 92%股权）和 Blibli 拉开了一定的距离。数据显示，2021 年 Q2，Shopee 不再是印尼访问量最高的平台，被 Tokopedia 以 1.4 亿的月访问量反超登顶。下图为 LAZADA 公布的印尼电商促销日历，通过这个我们可以很清楚的了解到市场大促的节点。网购消费者用户画像以 2020 年第 2 季度为例，印尼过去三个月社交媒体用户每天访问的主要社交媒体平台是 Facebook（89%）、YouTube（83%）、Instagram（79%）、Twitter（34%）以及 TikTok（24%）。从数据可看出，印尼消费者是“重度社媒依赖患者“，社媒是品牌及产品广告投放营销的重要渠道。从地域来看，印尼电子商务购物者的数量最多来自 DKI 雅加达 (22%)、西爪哇 (21%)、东爪哇 (14%)、中爪哇 (9%)、万丹 (8%)、和北苏门答腊（6%）。从年龄构成来看，30.8%的网购来自 25-34 岁的消费者，27%的来自 35-44 岁的消费者，25.5%来自 18-24 岁的，14.8%来自 45-54 岁的，2.2%来自 55-64 岁的。印尼人口中位数约为 29.7 岁（中国为 37.1 岁）。此外，印尼电商消费者的性别差异日益均衡，男性占 51.2%，女性占 48.8% 。*来源：statista 2020 年数据从下图可看出，印尼网购消费者的用户画像大致分为 5 类：1. 城市快节奏消费者：喜欢追赶潮流，电子产品和时下流行的产品是该群体的主要购买品类。31%的受访消费者表示实用性和便捷性是他们网购的主要驱动力，此类消费者一般居住在城市，印尼城市交通经常拥堵，所以为了“不堵车”“不排队”，最便捷和效率的选择就是网上购物。2. 潮流引领者：这类消费者热衷于国际潮牌和时兴产品。线上消费对他们而言是购买当地无库存或是不发售产品的有效渠道。追随社媒的 KOL 穿搭去购买商品，或者本身就是 KOL。除电商平台外，他们也会在 Facebook 和 Instagram 之类的社媒电商圈进行消费。3. 千禧一代穆斯林：出生在千禧年间且信仰穆斯林的消费者喜欢购买满足其宗教信仰的同时还具备时尚感的产品。他们进行网购的主要原因是能在线上找到质量出众且款式多样的，能制造保守时尚（出于信仰，宗教或个人喜好而满足其精神和风格要求的方式）感的产品。与伊斯兰精神相契合的品牌是他们的心头好。4. 忙碌的小企业主：对于部分小公司的老板来说，有很多事需要做但又人手不足。这时候，网购能让他们在不需要多余人力资源的情况下就能把要的东西购置齐全。5. 勤劳的妈妈族：她们通常会通过 Whatsapp 等社交群组的推荐进行母婴用品的购买。宝妈们是印尼网购的一大群体，日常琐事经常让她们无暇出门，网购这类能居家购物且送货上门的的购物形式是她们节省时间的利器。网购行为趋势移动流量价格低廉且购物便捷，移动端消费频率超 PC 端且近 70%的移动端订单来自 APP：根据 J.P. Morgan 提供的相关数据显示，印尼 58%的线上消费是在移动设备上完成的，且每 10 笔线上交易中，差不多有 7 笔是通过购物 APP 完成的。优化移动购物体验对于获取印尼消费者至关重要。购物高峰时段为每周三及工作时间：消费者普遍热衷于在每周三，及每天 10AM-5PM，9PM-11PM 进行购物。这些数据为广告定向投放及活动促销时间提供了有力的依据。印尼的电商转化率超出东南亚平均线 1.1 倍左右，购买欲望强烈。（怪不得工作效率很低呢）疫情期间，电子钱包支付占比 29.3%，变为首选：随着智能手机的普及和电商市场的发展，再加之疫情的助推，电子钱包在印尼虽然起步晚，但是发展相当迅猛。移动网速对比据 Opensignal 的报告显示，印尼 2021 年 1 月有 1.953 亿人通过手机访问互联网，约占网民总量的 96.4%。通常 4G 会比 Wifi 的体验更好，通过对比下载速度可以看出，智能手机用户在 4G 上的下载速度平均为 15.1Mbps，比大多数 Wifi（私人和公共热点）快约 25%，3G 的下载速度平均约为 4.9Mbps，低于 Wifi 的下载平均速度。中国 2021 年 4 月 4G 下载平均速度为 49.1Mbps，西藏最高可达 73.71Mbps，青海最低为 39.73Mbps（*数据来源 Speedtest）。需要注意的是，印尼依旧有相当一部分人在使用 3G 网络。主流运营商及流量价格其移动市场份额最大的是印尼国企电信公司 Telkomsel，市场占有率近 50%，其余的主流公司包括 Indosat、XL、Smartfren、3。Telkomsel 官网展示的流量套餐价格如下：23GB 套餐 25.6 元/月，32GB 套餐 33.2 元/月，45GB 套餐 44.9 元/月。下图为另一家主流移动运营商 indosat 的流量套餐价格：20GB 套餐 31.4 元/月，30GB 套餐 44.9 元/月，50GB 套餐 67.4 元/月。2021 全球每 GB 数据平均价格为 4.07 美元(约 26 元)，上面我们看到官网图是流量套餐的价格，通过关注“东南亚 e 生活”的公众号，小编对比看了下印尼流量包价格，Telkomsel 的是 0.5-1.5G 月 32.7 元，12G 月 53.8 元(4.48 元/GB)，50G 月 113.8 元(2.28 元/GB)，indosat 的 1G 是 24.6 元，14G 是 52 元(3.72 元/GB)，37G 是 103.7 元(2.8 元/GB)。再看下中国 4G 流量套餐的价格，网上搜索到移动 4G 自选套餐，单选流量是 1GB 30 元/月，20GB 70 元/月(3.5 元/GB)，30GB 100 元/月(3.3 元/GB)，50GB 150 元/月(3.0 元/GB)。由此可见，印尼的移动资费是比中国便宜的，相对低廉的移动资费也促进了消费者移动化。手机销售排行印尼是亚洲五大智能手机市场之一，它的总量比日本大，是澳大利亚的三倍。根据国际数据公司（IDC）的调查结果显示，小米 2021 年第二季度成功占据了印尼手机市场第一的位置。截至 2021 年 7 月印尼手机市场份额依次为：三星(21.94%）、Oppo（21.28%）、小米（19.83%)、vivo（12.27%）、苹果(8.89%），超半数手机都是中国国产品牌。拉长时间轴去看全年销售，从 2020 年 10 月到 2021 年的 10 月，手机市场份额依次为 Oppo（21.83%），三星(20.93%）、小米（19.86%)、vivo（13.47%）、苹果(9.05%）、Realme(7.25%）。可见印尼智能手机系统以安卓为主导，整体占比超 90%。在 2020 年第三季度的畅销机型榜单中，小米的 Redmi Note9 在印尼的市场份额是 5%，VIVO 的 Y11 排名第二，小米的 Redmi 9 排名第三。需要注意的印尼手机品牌型号和国内型号不都是对应的，比如印尼市场 OPPO F1s 对应国内的 OPPO R9s，海外市场的 Redmi Note9 对应的国内机型是 Redmi 10X 4G。支付网关印尼用户数量较多的支付网关[1] ：2Checkout、BitPay、Coinbase Commerce、Credit Card Payments Powered by PayTabs、Doku、GoCoin、Lay-Buy、Midtrans、MOLPay、PayDollar、PayPal Express Checkout、Sezzle。[1] 支付网关（Payment Gateway）是银行金融网络系统和 Internet 网络之间的接口，是由银行操作的将 Internet 上传输的数据转换为金融机构内部数据的一组服务器设备，或由指派的第三方处理商家支付信息和顾客的支付指令。主流支付方式2020 年，电子商务、食品配送和在线媒体普及和使用激增，消费者和中小型企业(SME)越来越接受在线交易，数字金融服务将备受关注。以往，由于消费者对于在线交易缺乏信任且信用卡普及率低（印尼不到 5%的人拥有信用卡），所以在线支付的时候消费者更倾向于银行卡支付及货到付款。消费者会首选 ATM 转账（27%, Bank Transfer）和在线银⾏支付（27%, Card），其次为货到付款（15%, Cash on Delivery） 、电子钱包（13%, E-walltet）及其他支付方式（18%）。受疫情影响，印尼的消费者在 2020 年大大减少了对现金的使用，电子钱包成为结账的最优选择，约为 29.3%的支付占比，同时接近澳大利亚 (24.1%)、香港 (28.9%) 和新西兰（20%）。GoPay、OVO、DANA 和 LinkAja 是印尼最受欢迎的四大电子钱包。据 Ipsos 调查数据显示，58％的受访者把 GoPay 选作最常用的电子钱包，其次是 OVO（29％）、DANA（9％）和 LinkAja（4％）。印尼拥有超过 1.7 万个散乱岛屿，因此“配送难”是印尼电商的心头患，特别是最后一公里的配送。不同岛屿的人口密度、经济水平、基建差异巨大，对于偏远地区物流与购物成本极高，甚至国内产品的物流费比直接从中国进口产品的费用更加昂贵。在首都雅加达，最快可提供 3 小时内送达的服务，部分平台部分商品也能在主要城市提供当日达服务，费用约为 1.25USD。目前印尼物流市场主流公司为：DHL、FedEx、JNE、J&T Express 等。如果是同城近距离配送，可选 Grab Express、Gosend，类似国内的闪送，可选择摩托车、汽车、货车三种车型进行配送，并通过 GPS 随时追踪货品位置，货品会在当日完成交付。增值税 VAT增值税(VAT)是适⽤用于商品和服务的常⻅见间接税，按交易易链中多个环节(制造，分销和销售)的毛利率收取。印尼对任何年销售额超过 48 亿印尼盾 (333,397 USD)的产品征收增值税。印尼的标准增值税税率是产品销售价格、服务费或进出口价值的 10%。据外媒报道，从 2020 年 12 月 1 日起，印尼消费者从 Tokopedia、Bukalapak 和 Lazada 等平台购物时需要支付 10%的 VAT 税。“客户支付的增值税金额是税前价格的 10%，必须包含在卖家开具的收据或发票上，作为增值税征收的凭证。”印尼财政部税务总局服务、教育和公共关系主任 Hestu Yoga Saksama 在其官方声明中表示。依据汽车发展阶段理论，印尼的汽车行业位于普及初期，2020 年底的汽车总保有量为 2665 万辆，千人保有量 87 台，平均每年销售约 100 万辆汽车，这意味着印尼的汽车保有量还有很大的增长空间。相对发达国家及其他发展中国家，印尼依旧经济发展水平不高，群众购买力不足，基础设施建设也较差，公共交通不完善，印尼 2020 年的城市轨道交通通车里程不足 100 公里，相对于中国的通车里程 7978 公里来说，实在是差距很大。因此两轮车（特别是燃油摩托车）的需求旺盛，使印尼成为了摩托车使用大国，并且是世界第三大的摩托车市场，平均每年售出 650 万辆摩托车。印尼汽车工业协会的数据显示，截至 2019 年，该国的道路上有超过 1500 万辆汽车和 1.12 亿辆摩托车。印尼能源部长表示，为了减少碳排放，印尼的目标是到 2050 年只销售电动汽车和电动摩托车，取代内燃机驱动的汽车。同时，印尼本土的生活出行巨头 Gojek 在 4 月份表示，到 2030 年，该公司平台上的每辆汽车和摩托车都换为电动汽车。此处一定要重点提一下 Grab 以及 Gojek，他们是东南亚出行市场最大的份额占有者，发展到现在两家公司的业务高度重合，简单来说就是滴滴、美团、饿了么、支付宝、顺丰、闪送等等这些公司产品服务的集合，Gojek 最初是印尼提供摩托车打车服务的平台，被称为摩托车版的 Uber，后来逐渐发展成综合生活服务平台，它拥有超过 8000 万注册用户，2000 万日活，日单量 500-600 万，是印尼唯一一家百亿美金级别的公司。Grab 起初则是和 uber 相同，先进马来市场，以打车业务为主，后面进入印尼市场后，在印尼两轮车和四轮车出行市场，Grab 分别持有 60% 和 70% 的市场份额。为了与 gojek 抢夺市场份额，grab 也意将产品打造为 super app，grab 目前拥有 260,000 摩托车司机以及 140,000 汽车司机。再加上印尼本土的出租车运营商 Blue bird，在雅加达掌握约 2 万辆出租车。由此可见，在印尼生活出行行业的汽车司机、摩托车司机对于汽车后市场的需求是刚需及频率较高的，它们同时也是 Speedwork Customer App 的目标用户画像之一。汽车后市场的定义汽车后市场是指汽车销售以后，围绕汽车使用过程中的各种服务，它涵盖了消费者买车后所需要的一切服务。也就是说，汽车从售出到报废的过程中，围绕汽车售后使用环节中各种后继需要和服务而产生的一系列交易活动的总称。汽车后市场大体上可分为七大行业：汽保行业、汽车金融行业、汽车 IT 行业、汽车养护行业(汽车精品、用品、美容、快修及改装行)、汽车维修及配件行业、汽车文化及汽车运动行业、二手车及汽车租赁行业。印尼汽车后市场概览印尼的汽车行业还在普及初期，总保有量也还有很大的提升空间，对于汽车后市场来说，真正影响汽配行业规模的关键因素正是汽车保有量，人口红利加上低保有量，对于印尼的汽车后市场来说还有很大的发展空间，以及需要较长时间的蓄力和长远的布局。印尼目前的汽车千人保有量与中国 2013 年时的千人保有量差不多，2020 年的市场规模为 74 亿美元，预计到 2025 年将达到 115 亿美元。第一章最后：作为用户体验设计师，第一章里我们从大而广的角度横向了解了印尼市场，建立基础的认知体系，不是盲目的就开始着手设计，那会非常迷茫。那第二章就会垂直到汽车后市场去了解 Speedwork 竞品有哪些，去进行竞品分析、产品体验分析。7000字干货！东南亚本地化产品设计差异：印尼篇印尼是东南亚人口最多的一个国家，人口超过 2.65 亿（还是 2019 年末的数据，现在应该近 3 亿），其中 30 岁以下人口占比超过 50%。阅读文章 > 欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/indonesia-user-experience-design
品牌 箭头 图形 前言从「一个工作方式」到「让工作学习更简单」，再到「让进步发生」，钉钉面对数字化时代的变革提出了新的品牌理念，理念之下，品牌形象也迎来了升级焕新之势。设计思路已有的品牌视觉形象不能矢弃，让人印象深刻的翅膀和闪电造型，是大家对钉钉最直接的品牌视觉认知记忆。在保留这一份“记忆”的同时，我们还需要将新的品牌心智注入进品牌形象中，进行具象化的设计表达。所以，在延续原有视觉记忆的基础上，具象化的表达新品牌心智，这也就是此次品牌升级的核心设计思路。1. 视觉记忆的延续在过去，闪电和翅膀代表着钉钉对“高效敏捷、极致效率”的追求，新的品牌形象依旧保持着这份初心，并且在设计上进行一些细节优化，增添一份新的品牌诠释。新的闪电图形在倾斜角度上做了微调，赋予其“蓄势待发”的动态势能，整体造型也更加紧凑有力。大自然才是最好的设计师，我们参考了大量真实鸟类的羽毛造型，优化出更贴近自然的翅膀圆弧和角度，使翅膀看起来更加生动且富有亲和力，这也表明钉钉要做谦逊的服务者姿态。2. 品牌心智的具象化表达向前同行，让进步发生品牌 Logo 是图形化的，什么样的图形能传达出“进步”的概念呢？带着这个问题，我们经历了无数次发散再聚焦的图形创意尝试后，最终得到的答案是：箭头符号“>”。箭头符号，它可以出现在一块指示牌上，指明方向；也可以出现在候鸟迁徙的队形中，帮助飞行节省体力；也可以是山峰的尖状山顶，不断冲出新高度。有方向感的、向前的、突破的，这些关键词正是在诠释「进步」的概念。众里寻她千百度，暮然回首，我们发现，这个箭头符号，它就隐藏在钉钉的原版 Logo 图形处（顶部和右侧线条构成的抽象三角符号）。新的 Logo 图形更加强化箭头的精准感，使其在视觉上有更加直观的表达，同时也进一步将“朝上的箭头”调整为“朝前的箭头”，向前的势能和方向感更加强烈。重心上，我们修正解决了原版 Logo“头重脚轻往后倒”的现象，视觉重心更加平衡。普惠开放，关注每一个组织和个体因为大家对钉钉 Logo 的识别大多数是来自翅膀闪电的图形，圆形的外框在某种程度上来说是装饰大于意义，新 Logo 在去除了圆形外框的限制后，显示尺寸是原图形的 1.5 倍，进一步强化了 Logo 图形的识别度和品牌记忆。当然，这也是在预示着钉钉不断破圈，提倡开放，以数字化普惠每一家企业的决心和态度。字体也是 Logo 的一部分，相比于原版字体的板正、严肃，新字体增加微倾斜角度，竖勾处做了弯曲弧度处理，使字体更有动态感和富有张力。结语从“让工作学习更简单”到“让进步发生”，从“效率工具”到“数字化普惠”，进步在发生，我们迎来了全新的钉钉，而此次品牌形象升级也只是我们的一个开始，接下来我们还会持续的探索并构建钉钉品牌视觉语言系统，以视觉传达让更多用户和生态伙伴认识钉钉的品牌主张，给用户和生态伙伴提供一个共同进步的平台氛围。设计师如何助力创业项目？来看钉钉教育的实战经验疫情期间，钉钉支持了全国14万所学校、600万名教师、1.3亿学生在线上课，相当于全国一半的学生，他们分布在全国30多个省份，从最发达的北上广深，到相对偏远的农村山区。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/dingding-logo-design
用户 感官 动态 动效在 UI 设计场景中的运用强化了感官层面的体验，也使得交互设计更加易于理解，通过动效辅助功能操作的理解度。近期在体验产品的过程中，观察到了一些微动效的优秀案例，分享出来和大家一起探讨。拖拽头像营造趣味性体验头像属于个人中心的标配，通常不会带有互动体验，只会在装饰性设计上面营造氛围。最近在体验即刻 APP 的时候，个人中心头像可以长按拖拽，拖拽过程伴随着震动感，释放后弹出表情符号。带有互动体验感的头像增加了个人中心的互动感，趣味性的设计带给用户更高的亲和力。动态形象提高关注度品牌利用人物形象代言产品或者服务比较常见，在一些局部功能或者服务模块也会结合人物形象，带给用户更强的亲和力。通常的做法是静态展示，动态形象相对较少。开言英语 APP 学习模块中，顶部“立即测评”区域的人物形象采用动态形式，虽然只是简单的手势指引，也比静态图片带来的关注度要高。利用动态形象提高模块的关注度，也使得设计更加生动有趣。动态空状态趣味性更强空状态从文案提示到情感化设计的演变，从细微之处带给用户更好的感官体验。为了提高产品的体验，各种状态提示设计也在不断优化创新，利用动态的形式提高趣味性也是一个可取的方向。COVES APP 在空状态界面利用带有动态的形象进行设计表达，使得原本枯燥无趣的界面变得生动有趣。提高了用户的关注度，也提升了设计的感官度。动态极光风按钮设计极光风效果设计是近些年在 UI 设计中较为流行的趋势，不仅可以丰富视觉表现，也能使得产品设计更加年轻化。被广泛运用于背景装饰、卡片式装饰、弹窗设计、图标设计、按钮设计等场景中。优酷 APP 在会员栏目中，将打卡按钮以动态极光风效果进行设计，提高了按钮的关注度。设计风格显得更加年轻化，动感的表达形式打破了按钮设计的常规表达，带给用户更高的感官体验。动态引导提高关注度针对新功能或者重点功能在设计的时候，都会进行引导式设计，以此提高用户的关注度。除了通过设计的视觉化增强和浮层提示以外，动态的引导设计也是不错的选择。优酷 APP 在用户主页为了提高用户发布视频的参与度，每次新进页面就会以动态形式弹出引导设计。提示用户“抓住你的创作灵感”，青春活泼的视觉风格和动效的双重强化，提高关注度的同时也增强了用户的感官体验。带有互动感的品牌墙设计品牌 LOGO 展示常见的形式都比较中规中矩，横向或者纵向均以排版整齐为主。最近发现一个比较新颖好玩的品牌墙展示，结合互动性营造趣味感的体验。开眼 APP 在品牌墙展示 LOGO 时，使用圆形带有动态的形式，类似于一堆气泡相互碰撞，还能拖拽进行互动。停留时 LOGO 会自动飘起来，漂浮到界面顶部，真实感和互动性较强。该设计形式不仅打破了常规，也带给用户十分有趣的互动体验。弹幕强化内容关注度弹幕出现在视频播放中相信大家已经很熟悉，可以增强观看视频的互动性，也能激发大家的话题参与度。弹幕的运用不局限于视频，还能用于增强内容的关注度。LOFTER APP 首页在话题栏目中，单个内容区域增加了弹幕设计，提高了内容的关注度和氛围感。弹幕设计也可以出现在社区中，营造社区的氛围感。自如 APP 在发现生活栏目顶部视觉区域也运用了弹幕设计，以此来提高自如社区的氛围感，吸引更多用户参与分享和评论。卡片式轮播的色彩变化为了提高用户的关注度和强化信息的对比度，在设计的时候都会在背景层和信息设计层强化，针对卡片式设计在背景层强化是一个不错的方向。MOO 音乐在主题电台栏目，针对横向滑动切换的卡片背景做了色彩变化。利用极光风效果处理的同时，滑动的时候背景也会进行变化，色彩变化过渡自然，表现形式新颖独特。动画引导效果更直观针对功能或者业务进行引导设计，有助于让用户更快的理解，便于操作。提高引导设计的关注度和理解度，降低学习成本是设计的目标。MOO 音乐在引导设计的时候采用动画形式表达，传达意思更加直观清晰。动画的形式更能吸引用户观看，达到更好的信息传达目的，也能提高产品的感官体验。动感的音频波动打造独特记忆点音乐带来的不只是听觉体验，也有视觉享受的一面，让用户沉浸在音乐的氛围中。MOO 音乐在播放界面设计中，底部配合音量的大小弹出音频波动条，带给用户视听双享受。音频波动条采用不同的元素进行设计，体现不同音乐的差异，带给用户独特的感官体验。差异化的设计表达也能打造独特的记忆点，让用户在众多的音乐产品中形成独特的记忆。小结本期感官体验日记主要总结了动效范围的内容，根据特定的主题范围去体验分析，也能提高自己发现设计细节的能力。从细微之处体现设计差异，带给用户更强的品牌记忆和感官体验。本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。超全面！腾讯出品的交互微动效设计指南本设计指南适用于UI界面中交互微动效，涵盖入场、出场动效，过渡动效和加载动效，在时间和缓动曲线的选择上提供了一些通用的设计建议，帮助设计师理清动效设计思路，提高设计效率。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/micro-motion-design
海报 网站 图形 大家好我是花生~ 今天向大家推荐一个专注于文字排版和抽象图形类的海报的设计灵感网站 Typo/graphic Posters。以纯文字和抽象图形为主体的海报是当下一种比较流行的海报设计风格，它摈弃了具象化的图像暗示，直接用文字排版搭配极简图形来传达信息，显得现代而理性，给人全新的视觉感受。海报设计中容易遇到的一个问题就是找不到合适图片素材，或者现有图片素材质量不佳的问题，这个时候用纯文字排版+抽象图形进行设计就是一个很好的解决办法。设计师可以根据海报主题自己设计一个简单抽象的图形，搭配文字排版，加上合适的配色就能形成一张元素完整且风格独特的海报。今天向大家推荐的网站 Typo/graphic Posters 就是专注分享展示文字排版+图形类型海报的网站，能为喜欢这种海报设计风格的设计师提供数量种类丰富且质量颇高的灵感参考。Typo/graphic PostersTypo/graphic Posters 网站成立于 2008 年，由巴西的独立设计工作室 Addd.Studio 创建并负责运营，旨在为激发灵感和促进设计交流提供一个良好的平台。Typo/graphic Posters 网站主页目前网站收集了来自全世界 42 国家的 283 名专业设计师的海报作品，这些作品都是经过运营方审查筛选的，无论是视觉设计质量还是海报的功能性都符合较高的标准。作为一个海报灵感网站，Typo/graphic Posters 提供了多种海报检索功能，除了一般的关键词搜索，我们可以根据网站顶部的色彩条，选择喜欢的颜色进行筛选：还可以根据网站提供的分类标签直接进行检索：Typo/graphic Posters 上已经聚集了非常多优秀的平面设计师，网站非常重视创作者的贡献，为每一位设计师建立了信息档案，进入后可以看见设计师的个人信息及全部作品。我在网站上看到了一张海报非常喜欢，它让人感觉非常轻松自由，进入详情页后了解到设计师是来自德国的 Paul Voggenreiter。通过海报详情页右侧的信息可以转到设计师个人档案主页进入他的档案后，发现他的作品都非常适合学习借鉴——海报文字排版比较规整，抽象图形设计也使比较简单的，他对图像进行改造运用的思路也很有创意，不会涉及到复杂的特效，但有新意的图形和排版能给人耳目一新的感觉。还有位于柏林的设计公司 neue gestaltung，他们的作品也都非常有创意。在为一场音乐会设计海报时，neue gestaltung 选择用乐谱中的各种符号拼成一组动物的头像，有猫、孔雀、猫头鹰、斑马、河马等，想象力相当丰富，让人印象深刻。这组设计获得了 2018 年的 D&AD 大奖。在为 Erlangen 剧院设计的一系列演出海报中，neue gestaltung 没有选择用演出的实景照片，而是为每个演出的节目设计了一个代表形象，而且设计的相当“潦草”——歪歪扭扭的线条，寥寥几笔勾勒成的轮廓，好像是小朋友拿着铅笔慢悠悠画出来的一样。主体文字信息非常少，就是演出日期加上节目名称，和简笔画般的图形排版在一起就是一副完整的海报了，一目了然得简单。但也许就是海报太简单了，让人不禁会盯着那简单的图形多看几眼，看着看着脑海中开始想：小小的老鼠怎么能把比它大那么多的熊举起来呢？那个带着尖帽子的人为什么有那么多条腿而且肚子上还破了一个大洞？那个跪着找自己掉落心脏的人怎么没有头？坦克的炮口怎么会唱歌？这也许就是设计师的本意吧，不用太多精巧复杂的东西，减少扰乱注意力的因素，用一个足够简单的版式，让观众的心思集中在具有深刻寓意的图形上，并不由之主地展开联想。在不知不觉中，吸引观众注意力、让设计与观众交流的目的就达成了。以上就是今天的分享，Typo/graphic Posters 上还有很多优秀的作品和设计师值得我们去了解，喜欢海报设计的你千万不要错过。「Typo/graphic Posters 官方 网站」： https://www.typographicposters.com/更多优质设计灵感网站：色彩控必看！堪比 Pinterest 的色彩灵感网站 Designspiration提到设计灵感网站，Pinterest、花瓣、Behance、Dribbble 这些大家都非常熟悉了。阅读文章 > 6个值得收藏的日系设计网站，快来加书签！（附3G素材）日本作为设计强国，有很多地方都值得我们学习，我个人也是非常偏爱日系风格的，不管是排版还是自己家里的装修，都非常喜欢日系。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/typo-graphic-posters
干货 合集 你可以 大家好，3月的第3波实用设计干货合集来了！这次的合集当中的设计工具和素材几乎全部都是免费的，其中甚至还包含 2 个专门推荐免费设计素材的网站平台和一个新的免费图库！如果你正在寻找素材，今天的合集一定不要错过：1、免费设计素材平台 https://designresources.io/谁会不喜欢免费的设计资源呢？这个名为 Design Resources 的网站汇集了大量 UI、UX 设计项目能用到的免费的设计资源，从设计系统到 UI Kit，从单独的某个网页模板到整套的网页设计素材，各种 APP 的界面设计源文件，甚至还有插画。这个网站提供的免费素材主要是 Figma、Adobe XD 格式的。2、专业设计师的 UI Kits 合集https://uikit.to/和前面推荐的那个不同，这个网站就非常集中地为你搜集了各种免费的 UI kit，这些工具包有的是给 APP 准备的，有的则是针对网页，身为 UI/UX 设计师的同学应该会更加偏爱这个网站所提供的素材。3、免费在线设计平台 Studiohttps://www.stickermule.com/studioStudio 所提供的是一个易用的在线设计工具，它的设计方式其实和 Canva 非常类似，就是基于模板来进行快速搭建，你可以在他的网站中找到大量现成的设计模板，在这些模板的帮助下，修改内容就能快速完成设计。这里的模板和国内的很多在线设计平台的视觉风格有明显的差异，不失为一个独特的补充。Studio 提供的模板类型非常多，从贴纸、包装到T恤、品牌、活动海报到社交媒体素材，不一而足。4、免费可商用图库 Vecteezyhttps://www.vecteezy.com/free-photos免费图库怎么都不够用，对嘛？这个名为 Vecteezy 的网站提供的图片素材是免费可商用的，在 Unspalsh 被收购后，这类完全免费可商用的图片素材还是非常有价值的！5、超级方便的SVG渐变工具https://meshedup.dev/渐变色是当下怎么用都都不会腻的一种视觉元素，这个名为 Meshed Up 的网站提供多种常见的渐变色和它们的变体，你可以直接复制它们的 SVG 代码或者文件，应用在你的网页或者 Figma 素材当中。比较有趣的地方在于，Meshed Up 还提供了在线的配色和字体、SVG 涂鸦的工具，可以结合起来使用，省很多事儿。6、完全免费的自定义头像生成工具https://cvbox.org/avatar这个风格化 Notion 头像设计工具其实是一个独立设计师自己搞出来的工具，他使用晚上和周末的时间，使用 React 来构建出这样一个工具，你可以借助它提供的组件来搭建一个符合你的性格和需求的小头像，它是完全免费的！7、完全免费的手绘和抽象元素素材https://www.streamlinehq.com/elements这个矢量素材合集非常不错，其中包含有抽象的手绘元素，有几何图形，你可以借助 平台自带的工具快速调整这些元素的形状、笔触，重新调整配色，它还有 Figma 插件，你可以使用插件更快调用这些素材。8、带有飞白的优雅手写字体 ChaletlinessChaletliness 是一款手写字体，字体笔触带有明显的飞白，字体本身的笔画走向一致性很强，作为一款兼具展示性和装饰性的字体，Chaletliness 有强烈的优雅和奢侈感，适合用来做视觉设计。这个字体是免费的，仅限个人使用，可以在文章开头结尾的百度云链接中获得。9、完全免费的简历模板这是一个包含深色和浅色两种模式的简历模板，简历中包含有多种不同的模块，方便不同职业不同经历的求职者按需编辑。这套简历模板需要使用 Figma 来进行编辑，完全免费，你可以在文章开头结尾的百度云链接中获取。往期干货：第一波！2022年3月精选实用设计干货合集大家好，3月的第1波实用设计干货合集来了！阅读文章 > 第二波！2022年3月精选实用设计干货合集大家好，3月的第2波实用设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 3月干货第三波13m8x1s 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-3-design-resources-vol3
团队 工具 设计师 前言最近这段时间，到处都是关于国产 UI 设计工具的讨论，我们的老大也免不了让我们去做了下调研，看看我们的国产设计工具现在做得怎么样了，哪个完成度比较高？有没有比较适合我们团队的？正好身边也有很多朋友在做比较，所以也把我们的结论分享出来给大家，如果有和我们一样需求的团队可以参考。在经过比较全面调研过后，我们给出的结论是：「即时设计」应该是很不错的选择，比较适合我们团队，虽然在一些细节上还值得更多的优化，在社区发展上也需要再加把劲，但无论是设计功能、团队协作还是本土化服务，都已经有了很不错的成果，而且迭代快，团队活跃度高，产品表现出了很强的生命力。即时设计官网： https://js.design下面，就把我们的报告，按照下面几个维度给大家简单总结下：对于设计师来说，创作体验是第一位的1. 设计功能完善度设计工具是重型生产力工具，设计师一旦选择，每天就要花大量的时间使用，功能的完善性一定是考察的首要部分。而「即时设计」的设计功能，基本已经完全覆盖了 Sketch，包括已经成为必备而不再是加分项的变体、自动布局这些高级功能，也和 Figma 保持一致，可以满足日常 UI 设计。此外，原型交互模块也已经具备足够高的可用性，虽然还不如 Principle 这种专一型工具强大，但已经涵盖了常用的交互事件，配合智能动画和交互式组件，完全可以产出带有交互动效的高保真视觉稿。2. 性能仍有进步空间性能是另外一项需要着重考察的点，整体对比下来，国产工具和 Figma 相比都还有一定差距，但相比 Sketch，即时设计的大文件性能应当是可以满足日常使用的了。具体到文件，多页面多画板，大概几万图层的一个项目，创作过程中基本只有在频繁缩放画布时会有短暂的加载卡顿，其余情况完全不会影响操作。但是遇到特别复杂的文件时，还是能够感知到掉帧和卡顿现象，有一定的可提升空间，不过因为每天都在迭代，持续使用下来，性能也一直在肉眼可见地提升中，情况比较乐观。3. 资源社区有特色「即时设计」的社区虽然开放时间不长，但发展得还算不错。大厂规范、组件库、图标库、插画等等资源，都保持着较高频率的更新，入驻的设计师也很多，相比 Figma，也有了更多更能满足国内设计师需求的中文资源，这是比较好的一点；但资源数量上确实还是差了 Figma 一大截，还需要继续努力呀！4. 插件设计师对于插件的使用需求很高，不管是使用 Sketch 和 Figma，都有大量的效率插件供我们选择，但这得益于开放插件生态后全球开发者的贡献，而对于国产工具来说，还是任重而道远的。相对来说，「即时设计」在这方面还不错，陆续上线了 20 多个官方插件，而且近期新插件的上线速度也有明显变快。可以看到，现有的插件已经满足了很多高频需求，并且已经和字由、iconfont、iconpark 这样的平台合作，看的出来国内的生态资源还是挺不错的。对于团队来说，协作效率是最重要的1. 设计协作交付这在整个产研工作中是很重要的环节，我们打造「风火轮」平台就是为了提升设计交付的效率。而「即时设计」不仅和同类产品一样可直接查看设计稿的参数标注、代码等内容，还额外做了一个研发模式。该模式能满足单位换算、平台切换、颜色统一定位、开发临时切图等特殊的需求，相当于内置了很多第三方交付平台的功能，交付功能更加易用。而且在线工具实时同步交付的特性无限放大了这一优势，不用像 Sketch 一样通过插件上传，对接起来会更高效。体验多角色协作： https://js.design/scene2. 设计资产管理对于设计团队来说，最重要的设计资产就是团队的设计规范和授权字体。「即时设计」支持「共享设计库」，和以往使用的资源库一致，团队通用的样式、组件，可以发布到共享设计库中，供所有团队成员在其他项目里复用、同步修改。同时也开放了「团队共享字体」，允许我们上传团队可用的字体并建立线上字体库，方便成员使用。3. 团队项目管理值得强调的一点，如果你所在的团队恰好不是特别擅长文件管理，那么「即时设计」工作台应该会成为你们的好帮手：进入「正在跟进」页面，所有正在进行的个人或团队文件一目了然；进入团队，每一个文件可以清楚地看到当前进度；想找到某个文件，既能根据合理的目录结构翻找，也可以直接搜索……而这些，都得益于「即时设计」独特的文件管理体系。对于国产工具来说，本土化服务是必须的1. 用户支持对于一个普通用户，使用 Figma 的时候，最困扰的一点就是有了问题，很难得到官方的帮助，只能手动检索问题或者找自发的用户群解决。而「即时设计」作为国产工具，在用户支持方面做的还是非常好的，官方社群活跃度高，用户反馈流程简单直接，包括创始人也会在每个群里和用户沟通，了解需求，解决问题，有着很浓厚的「共创」氛围。2. 文档和教程在教程方面，除了官方的工具文档，即时设计还为设计师整合了国内设计师的图文知识、视频教程等内容，一方面帮助设计师了解即时设计，提高工具使用的效率，一方面实现自身设计能力的提升。即时教程： https://js.design/courses3. 开放的迁移服务设计师更换工具最大的顾虑就是迁移和学习成本，在这一部分即时设计也比较开放：同时支持 Figma、Sketch 和 XD 文件导入，也可以将任意项目导出为 Sketch 文件，还可以将 Figma 文件一键转换为 Sketch 文件。另外，考虑到用户使用工具的习惯，即时设计也有提供「Sketch 适配模式」，可直接匹配 Sketch 快捷键和滚轮操作习惯，方便上手。4. 私有化部署如果要考虑到数据安全和私密性的话，私有化部署也是相对比较重要的一个考察维度。「即时设计」支持公有云数据隔离、私有云和本地部署三种方案，同时前后端分离，可以实现功能热更新，可以满足不同的企业需求。总结整体看下来，即时设计，或者说国内工具，在性能和插件生态上都还有一定的成长空间。但相对来说，从功能、性能、社区生态、团队协作、本土化服务这几个维度来看，即时设计不仅完成度够高，还有很多符合国内设计团队的创新，产品、开发、运营各个方面也都十分积极，应该会是一个很好的选择。即时设计官网：https://js.design更多即时设计评测：超实用！这款神器只用 6 招，帮你解决设计文件管理痛点！编辑推荐：无论是以往的本地 Sketch 文件管理，还是 Figma 的在线文件管理，都存在着一定的痛点，而「即时设计」在这方面，无疑是考虑到了更细致的角度，通过多项特色功能，为设计师提供了一种更为有效且易用的文件管理方案，一起来看下吧~即时设计官网： https://js.desig阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/jishi-design-5
张大湿
飞翔的企鹅
在路上
表哥
落霞与孤鹜
