图标 是一个 彩蛋 Hi，我是彩云。最近在研究竞品时发现了一个动效非常丝滑，设计非常新潮的 APP，叫 Zenly，里面还埋了很多彩蛋设计，把体验设计做到了极致。严格来说，Zenly 不算是一个新 APP，上线的时间还比较早，但这次 5.0 大版本更新后，设计风格更加新潮大胆，它们不是在追随趋势，而是在引领趋势。我想作为一个视觉设计师，对这种风格新潮的应用趋势，是必须加以关注并研究的，所以今天就跟随彩云的视角对这款应用做一个赏析吧。实际上它上一个版本的设计也非常优秀，所以我会把更新前后的设计变化也做一个介绍。这次会重点介绍 5.0 更新的内容，因为升级后的风格更加有自己的个性了。更多改版案例复盘：大厂实战！vivo官网APP首页改版设计过程复盘vivo 官网 APP是什么？阅读文章 > 如何系统化进行设计改版？用一个实战案例教会你！项目背景当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版。阅读文章 > 视觉设计这次大版本更新，在风格上改变很彻底，几乎是截然不同的设计风格了，从 APP 图标到界面里的功能图标、背景、图形、颜色都做了很大的改变。1. 扁平多彩的图标和界面应用主图标除了冰棍造型保持延续外，整体效果从清新可爱到暗黑潮酷，有了一个非常大的变化。在上一个版本中 UI 风格中规中矩，设计团队好像是在犹抱琵琶半遮面，压抑着内心情绪一样，而到了这个版本，就彻底放飞自我了。关于主图标还有一个小彩蛋的设计就是当你完成了它的一些任务后，可以解锁更多的主图标效果，算是给了用户更多的个性化体验。我目前已经解锁了 2 个图标了。其实这个应用还藏了不少彩蛋设计，后面会讲到。这里做的好的地方之一是，主图标的风格跟内部界面保持了很好的一致性，从图标就能感受到内部界面的风格特点。5.0 版本的图标风格化更加明显，用到了非常大胆的渐变色，具有很强的风格特点。2. 多重渐变颜色APP 中的颜色体系也是跟随整体调性做了巨大改变。在上一个版本中，主要以白色加一些微渐变颜色为主，而到了最新 5.0 版本，主色调改为了暗色系。在这种颜色氛围下，很适合增加一些比较酷炫的渐变色，这在 APP 中几乎随处可见，包括图标、背景、图案、按钮、文字等等。3. 超大字体上一个版本中字体字号相对还比较常规，而到了这个版本，字号设计变得非常大，几乎是到了比较夸张的地步。单纯从字号上来看，在其他 APP 中就不太常见，也算是一个记忆点了。只是个人觉得有点大的过分了些，美观度没有太好。4. 3D 质感表情表情设计也算是 Zenly 的一大特色之一了。在上一版中的质感，整体来说是比较偏清爽可爱的，虽然也有一定的 3D 质感，但总体来说做的都比较弱。而到了这个版本，3D 质感做的特别强，且颜色细节做的特别多，仿佛到了舞厅那种感觉，把潮酷风拉满了。（上一个版本使用语音还会有一个同步的表情跟随你一起说话，但到这个版本去掉了，有点可惜）而且它这里的表情不仅仅是设计上做的炫酷，还是有声音的，当你给好友头像发表情的时候，会有相应的表情配音，表情音其实是蛮少见的。结合声音，也算是它的一个设计亮点了，值得学习。带上耳机，可以感受表情音效，做的非常好动效设计动效设计可以说是 Zenly 中的一大亮点了，它的动效无处不在，且丝滑无比，是一个非常值得参考学习的地方。其实，动效设计现在越来越被重视，尤其在 UI 行业内卷到这种程度的时候，丝滑的动效越来越会影响用户的使用体验。在大厂，老板们对动效的要求也越来越高，大家都在追求极致丝滑的感觉，这个 APP 就是被推荐的参考之一。Zenly 被 Snapchat 收购后，动效体系的打通可能也是一个重要因素，母公司 Snapchat 的动效也是极其优秀。我自己体验下来，感觉它们做的这些动效有一个很关键的地方在于，动效的风格节奏和弹性度做得非常好。整个 Snapchat 动效体系都是以 Q 弹为特征，Zenly 延续了这种动效风格，动效风格也是品牌的一部分，在这里得到了很好的应用。我们可以从这款应用中学到动效应该用在哪些地方，以及这些动画的节奏和动态曲线等等。1. 融入品牌感的动效设计在添加好友这里有一个地球的酷炫动效，跟应用的核心功能有一个很强的结合，让这个动效有了更多价值。添加按钮的确认动效也做了 Z 轴上的旋转，虽然是一个细节设计，但也与整体的 3D 风格保持了统一。2. 符合物理规律的动态设计动效设计要想给用户带来自然流畅的感觉，符合物理运动规律是一个很重要的点，像这里的冰棍弹起的动态效果就好像很多冰棍凑到一块儿，因为很光滑加上冲击力比较大，被高速弹起然后由于重力下落直至静止后，再出现一个点赞的动效，整体看下来就很自然。因为在 Zenly 中，冰棍就是代表了一个个用户，所以动效元素也融入了品牌元素，每一个元素的运用都是有意义的。3. Q 弹的动效设计在 Zenly 中有大量的动态元素，甚至包括了很多文字内容。比如在注册环节，文字是一串串错位出现，然后又同时增加了明显的回弹效果，整体看下来显得非常 Q 弹，符合它们年轻的品牌个性。在回弹设计中也用了一些迪士尼动画 12 原则中的形变规律，对动态图标做了夸张的设计，让动画有趣又真实。比如在首页中的小房子图标，大家仔细看这个图标的扭动，是由一个预备动作+挤压变形+旋转组合而成的，这样就能让这个动画变得更加生动有趣。4. 呼吸感的动效设计在核心功能路径上，Zenly 把动效做得更加极致。因为整个应用的核心玩法是基于定位来的，所以 Zenly 把定位图标做了非常夸张的设计，用到了多种动态效果进行叠加，用了略快的呼吸节奏不断给用户反馈当前的位置。5. 充满生机的动效设计在 Zenly 中做的特别好的一点就是对于反馈的设计，几乎没有哪一个地方是完全静止的，让整个应用充满了生机和活力。就算当前页面本不会有动态变化，也会将你做的手势交互尽可能的给你一些动态反馈。在游戏中，及时反馈是一个非常核心的设计，可以说游戏就是靠不断的给玩家反馈让人沉迷其中的，在 Zenly 中这一点也得到了运用。比如在这个地图页面，你用手滑动侧面，也会给你反馈，而且跟随力度大小，反馈的形态也会有相应的动态变化，值得我们学习。再比如这里的卡片和信息提示，在你拖动的时候都会给到你即时的反馈，这种反馈对用户来说是非常友好的，可以算是一种惊喜体验。6. 动态分享背景在分享的时候可以预览不同的分享模板，并且背景上添加了动感的文字，显得动感十足。在一些背景设计上，如果期望能动态生成背景，文字可能是一个很好的方式，又一个学习点。7. 抖动与活力的反馈设计抖动也是 Zenly 的一大特点，会在很多关键路径上给用户即时的触感反馈。看，又讲到了反馈机制，大量的反馈让应用有了更多活力。玩法设计1. 解锁模式应用中模仿了很多游戏的做法，利用上瘾机制，让用户通过一个个小任务去解锁更的体验玩法。万字读书笔记！产品设计宝典《上瘾》全面解读！（上）为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？阅读文章 > 万字读书笔记！产品设计宝典《上瘾》全面解读（下）《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。阅读文章 > 2. 表情连续发射在地图上，点击好友头像可以连续对他发射表情，这个表情还可以累积计数，是一个让用户很有点击欲望的设计，每个表情还有完全不同的配音，我就经常喜欢连击这些表情。对方收到这些表情时，如果数量比较多，会直接在他屏幕上爆开，是一个蛮有意思的设计。3. 地图标记地图标记应该是它的一个核心玩法设计之一了，它会根据你在某个对方停留的时长以及时间段，判断你是在家还是在公司。这也就是为什么它不断的提醒你要把手机定位功能改为始终允许，不然它的很多设计就没法正常玩耍了。4. 彩蛋设计在应用中还预埋了不少彩蛋设计，在一定的条件下会触发，给用户创造惊喜感。不同距离的导航提示也有做区别设计。我们可能会对附近的定位提示习以为常，但当在定位距离很远的地方，比如我在深圳，如果搜索美国的话，要想去到那边的话，规划的路线提示会出现飞机动效，出乎意料。再比如在上一个版本中，当你在地面上的缩放比例已经是很小时，双击或者双手持续放大，会出现裂缝到地心，且每次触发后看到的地心场景居然还是不一样的，当时发现这个彩蛋的时候简直惊讶到我了。只可惜在新版本中，这个彩蛋设计被去掉了，我猜可能是这个彩蛋埋的太深了，用的人过少所以就去掉了，设计最终还是要服务于用户。总结最后总结一下，这款应用非常值得设计师朋友们体验学习，设计风格上做的非常大胆和新潮，尤其是动效设计上做的非常体系化，体验起来非常丝滑。如果你平时也有体验产品的习惯，那么这个 APP 一定不要错过了，也欢迎你在体验过程中把你觉得比较惊喜的地方留言和大家一起分享吧。欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/zenly-5-0
产品 设计师 用户 这是体验设计扫盲的最后一篇，来讲讲体验设计的缺点和局限性在哪。往期回顾：基础全扫盲！用大白话帮你掌握用户体验设计（一）今天再来继续一个比较现实的话题 —— 用户体验是什么？阅读文章 > 基础全扫盲！用大白话帮你掌握用户体验设计（二）相信很多同学在上一篇有留意到，体验设计中包含了以用户体验为中心增加和修改产品功能的目标，既然都从用户分析到产品原型输出，界面输出一条龙全套完成了，那还要产品经理做什么？阅读文章 > 之所以单独写一篇，是因为长期以来搜索体验设计基本是一连串的赞美和重要性强调，完全脱离事物的真实发展现状。所以适当泼一盆冷水，让想要投入这个领域的同学能具备更正确的认识，不会把持不切实际的期待，认不清自己的职业定位，从而在入行伊始备受打击。第一个问题，就是直击灵魂的核心问题，体验设计在整个产品的发展中占据什么样的地位。今天我们已经适应在网上看到任何有关产品的分析还是产品团队自己的声明，都会反复强调 “用户体验” 的重要性，听起来是不错，体验差的产品谁会想用呢？但前面我们提过，体验是一个非常宽泛的命题，是用户使用产品前后积累下来的感受。除了产品基本的交互、界面这些可视内容外，还包含了一大堆其它的因素。比如一个电商产品，产品体验一定涉及到商品种类、价格、防伪、物流和售后。如果商品本身价格比其它平台高，出现各种假货，客服态度极差，那么它不管 UI 还是交互做的再好，用户体验也是上不去的。在这个场景下，核心体验几乎都和体验设计师关系不大。最有代表性的产品就是拼 XX 了，它的设计、交互、功能只能在所有你听说过的电商产品里垫底，即使小米有品、造作、考拉、严选这些二三梯队的产品也比不过。但是它成功了，成为和淘宝、京东竞争的巨头。那么体验设计师在这中间发挥了什么样的作用？再比如音乐类产品，产品最重要的功能，必然是歌曲的丰富性和时效性对吧。如果进去搜索歌手或歌曲，大半是找不到的，那界面和交互做得再好，又有什么意义呢？正因为如此，我最喜欢的虾米音乐才沦落到今日坟头草都三米高的结局，体验设计能挽救它的败局嘛？在互联网历史中还有非常多产品本身设计和交互非常优秀的行业老二老三，但……举这些例子，并不是单纯为了打击大家的热情，而是要客观认识体验设计的价值，就不能把它抬得太高。一款可以成功的产品，它成功的核心原因大多和体验设计师可以负责的工作是无关的，是由产品经理或背后的管理团队决定的。他们决定了产品是否具备成功的可能性，而体验设计的作用，就是缩短成功的速度，以及和功能基本相同的竞品竞争中处于优势地位。所以，多数项目场景中，体验设计的权重是低于产品、市场、技术的，这是由行业特性决定的，只要自己作为用户的角度去审视一下就可以得出结论了。那么就不存在用户体验对产品起到决定性影响的行业嘛？当然不是，在我看来，工具类产品就是主要由用户体验支撑的行业。比如笔记应用，番茄应用，代办清单，思维导图，资源管理等。大家功能都差不多，但是赢得用户推荐和真金白银支持的，只能是产品本身在体验上打磨到远超竞争对手的地步。比如我在用的 AppStore 获奖和编辑精选应用 Things，作为一个非常简单的待办清单工具，它的 MacOS 买断价格是 328，iOS 买断 68。还有我最喜欢的 Markdown 文本工具 Ulysses，非常简洁，没有太多花哨的功能，但是售价 ￥293/年（一直涨价，想骂脏话）。工具行业是最 Old School 的行业，也是 UI、交互、体验最佳的实践场所。奈何受限于国内比较畸形的软件消费观念，这类产品的市场暂时还太小，容纳不了大量的体验设计师进入。既然我们知道体验设计在多数产品中的权重并不是最高的，那么推导下来，产品决策中体验设计优先级不高也就成为了必然。摆在体验设计面前的真正问题，就是我们的工作建议、产出往往无法得到有效的落实，就是因为优先级太低，团队资源有限的情况下往往会选择其它的建议和选项。除此之外，就是体验设计的整体流程太长成本太高，从前期确定问题，到展开用研，分析，输出，往往要耗费大量的人力物力。主要的障碍就是做研究通常是需要充分的样本量的，如果每次用研都是十个八个用户的访谈、问卷、测试，分析的报告能拿得出手嘛？就是想要做大范围数据测试，那么数据埋点和统计建模也需要开发团队做出大量的准备。尤其是听起来很简单的 A/B Test、灰度测试，需要一整套开发框架来支撑，对于中小团队而言是一种非常沉重的负担。即使前面这些工作全都克服障碍去落实了，还要应对一个最致命的问题 —— 研究实验不一定会有结果。大学有做过复杂实验的同学，应该知道不管怎么设计整体流程，总会因为各种没办法控制的变量或外部影响，导致最终的实验结果是没有价值的。体验设计作为社科，不可能脱离这种规律，所以不管你有多努力或者多专业，也会有不少的试验结果是错误的，更不可能推导出有效的结论。所以严谨的团队，在采纳体验设计结论或者建议前，要经过大量的审核，再次确认实验流程合理，数据来源有效，结论推导符合逻辑。这直接导致大厂的体验设计团队每次要写几十上百页的 PPT，事无巨细的回顾一遍。即使前后的实验流程，结论推断都是合理的，但也不代表分析的推论最终要被接受。比如你是微信的体验设计师，经过大量的研究和分析都论证了应该增加语音播放的进度控制、iOS 要支持双开、电脑端无需扫码、社交群支持 2000 人。但最终小龙哥就是不同意。至于为什么不同意……体验设计的工作最终能有效推动，被认真采纳，并产出价值，处于一个并不高的比率。日常工作的大多数时间，就是接受任务或自己找活干，做了一堆研究输出了一堆的报告供决策者采纳。这定位很像古代的谋士，为主公献策，自己没有统率权，你可以巧舌如簧来施加影响力，但最终三军该如何调动，还是主公说了算。而新手体验设计师很难看清楚和认清自己的定位，往往会忍不住过度干预决策，就是 “手伸得太长”、“管得太宽” 的表现，引起团队内部的争吵和内耗。所以，再来完善一遍体验设计师的职能：通过用研和分析，来提供提升用户体验的设计方案让团队负责人做出更合理的决策。PS：仔细想想和有关部门、大型企业的经济学家岗位很类似……最后，再谈谈体验设计的未来发展和做一些不负责任的预测。我越来越感觉，体验设计的工作内容和性质，对产品是有意义也有价值的，但体验设计师这个岗位，却不一定那么重要或纯粹。除了团队在运作中体验的权重和决策优先级以外，问题依旧集中在体验设计本身所需的技能和知识点上。我们知道它是一个广而宽的行业，远没有开发或平面、3D 的深度，意味着它的学习门槛并不高，成为其它职业的必修内容是完全没问题的。比如现在产品经理入门培训，体验和用研已经成为必备的学习模块，在产品初期针对用户做访谈、调研和分析数据是要亲自下场的。而在 UI 端，纯粹的界面设计师越来越难发展，如果走纯视觉路线就是拓展平面能力、插画能力、3D 能力。而如果想走项目路线的，那么体验和交互就成为必须深耕的对象，掌握相关技能也成为非常迫切的目标。至于独立的交互设计师……仔细想想就会明白，如果一个岗位上下游的职业都具备自己专业的能力，那话语权要如何获得，不可替代性又在哪边。这会进入一个非常尴尬的境地。并且一个产品团队中，需要做决策、评审的角色越多，团队协作流程就越低效，因为要相互说服对方接受自己的方案，是一个特别容易内耗的过程。我们会发现，往往和程序员开会不容易就专业问题引出一系列的争吵，而在产品、体验、交互、设计上，却很容易陷入谁都说服不了谁的困境。借用著名经济学家施蒂格勒（G. J. Stigler）的一句话来解释：如果你说自己是个物理学家，听者会回应：“物理学我不懂。”于是不再说下去。但如果你说自己是个经济学家，听者会回应：“经济学吗？我不懂，但我认为……”跟着滔滔不绝。在未来，随着产品团队成员基础培训内容越来越专业，初级专业人才越来越丰富的情况下，减少具体角色，合并对应职能才是顺应趋势的。再存在一个只会做体验设计，且只做体验设计的岗位，是不符合沟通和效率需要的。而这部分职能大多应该由 UI 设计师来分担，UX + UI 合并成一个岗位才是符合现实世界发展需要的。这样，即保证设计师本身有更宏观的思考分析能力、交互素养，又具备产品和开发都不能直接替代的视觉设计能力。体验、交互、视觉一体化在我看来是未来的发展方向，司职单一领域的发展会越走越窄。其实在今天的大厂招聘 JD 中，这个趋势也越来越明显了。不管是 UX 设计师、UI 设计师、产品设计师，技能要求往往是全部覆盖的，只是职业名称一样而已。所以不用再对这种情况感到惊讶，它们会逐步成为常态。关于体验的认识和扫盲就解析到这边，之后有精力的话，再额外增延续写下去用研和相关分析的具体介绍和学习了。我们下篇再贱~欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/user-experience-design-interpretation-3
图片 格式 在线 上次写了「 Compress JPEG 免费图片压缩服务，支持四种格式单次可处理 20 张 」文章后意外发现这家公司还有提供另一个很好用的免费 SVG 转档工具「 SVG Converter 」，主要是针对 SVG 格式进行转档、转换格式和优化处理，大家都知道 SVG 是目前网页上经常会遇到的格式，因为是向量图特性无论放大缩小都不会影响到图片画质，而且在计算机屏幕呈现相当好的效果。完全免费！可批量压缩图片的在线神器「Compress JPEG」我很习惯在写文章插入图片前先对屏幕截图进行压缩，让图片容量更小、开启速度更快，更重要的是几乎不会影响画质，以前我都使用 TinyPNG 这个相片压缩工具，只要将图片拖曳到网站就能快速处理，后来就选择以 Imagify 自动从 WordPress 媒体库对图片压缩和优化（免费版每月只能处理阅读文章 > SVG 格式非常适合使用于网站的标志、图标或是一些没有大量细节的图片，用户可以在编辑器中直接修改 SVG 参数，或是在网页原始码透过 SVG 程序代码来加载图片，不过它的缺点是一般的相片编辑器可能不支持这种格式，因此在某些情况使用者可能会想将 SVG 转为 PNG、JPG、EPS 等常用图片格式，如果你有类似需求，或是想将图片转为 SVG 文件，都可以在 SVG Converter 做到。SVG Converter 主要提供两大类的 SVG 转档工具：PNG 转 SVG、JPG 转 SVG、EPS 转 SVG、PDF 转 SVG，或是将 SVG 转 PNG、SVG 转 JPG、SVG 转 EPS、SVG 转 PDF，也就是 SVG 在不同格式间互相转换功能，除此之外，网站也提供 SVG 优化功能，可以在压缩文件时不降低质量。SVG Converter网站链接：https://svgconverter.com/zh/使用教学开启 SVG Converter 网站后会切换为适合用户的语言，从右上角可切换不同语系，这项服务有提供中文界面，操作上非常简单，主要的功能选项从上方的列表选择。SVG Converter 提供各种 SVG 转文件其他格式或将图片格式转为 SVG 功能，网站有特别标示所有上传的数据会在一小时后自动删除。举例来说我选择将 SVG 转为 PNG 的转换器，操作方式很简单，只要把 SVG 拖曳到网站即可，就和其他的在线转档工具差不多，或是点选「上传文件」找到要转换的文件。转换后点选图片底下的「下载」按钮就能保存文件，若是转换的文件数量较多，也能点选「下载所有」将全部的结果打包一次下载。除此之外，SVG Converter 也有提供把 PNG、JPG、EPS、PDF 转换为 SVG 格式的功能，基本上操作的方式都是一样的，找到对应的转换功能，将文件拖曳到网页中就能直接转换，完全不用额外下载或安装软件，非常好用。转换后一样点选图片底下的「下载」将它保存即可，图片数量较多也可一次打包下载。最后再介绍 SVG Converter 另一个功能「SVG 优化」，依照说明，这个功能可以对 SVG 格式进行压缩、优化，将 SVG 容量变小但又不会影响到图片质量，操作方式跟转档工具一样，只要打开网页然后把 SVG 图片拖曳到网站就能进行自动化处理。值得一试的三个理由：SVG Converter 在线转档服务将 SVG 转换为各种常见图片格式；也支持 PNG、JPG、EPS、PDF 转档为 SVG 格式；透过 SVG 优化工具将文件上传压缩以获得更小的文件免费！支持超过 100 种格式的图片格式转换神器「Pixelied」Pixelied 是一家提供相片编辑器的服务商，旗下有个「Free Image Converter」的图片格式转换工具，让使用者通过浏览器进行在线批次编辑，而且不用担心降低照片画质，也无需下载或安装任何应用程序，提供最快速、免费且易于使用的图片转文件功能，这项服务支持各种常见图片格式包括阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/svg-converter
数字 用户 信息 前言1. 数字人服务分类随着元宇宙概念的大热，作为基础建设元素的数字人在去年出现了井喷式的爆发。但实际上数字人并非近几年的产物，如果从世界上第一位虚拟歌姬林明美算起的话，数字人已经产生了近 40 年。这些年来，各界对于数字人的定义和分类尚没有统一的共识。从广义上来讲，任何以数字形式存在且具有类人外观和行为的数字化资产都可划为数字人范畴。依照此类定义，我们尝试将市面上的数字人服务进行归类。从下图可以看出，数字人依照应用形态大致可以分为三类。除了由来已久的 IP 型数字人以外，市场中还出现了以完成服务为目标的业务型数字人，以及以真人为原型强调替身属性的分身型数字人。从5个方面，帮你了解什么是虚拟数字人大家好，我是 Clippp。阅读文章 > 像洛天依、AYAYI 这类虚拟偶像和博主可划入到 IP 分类中，此类方向更关注数字人个人特性以及世界观的塑造，通常会采用 3D 高保真风格和手 K 或高精动作捕捉来确保整体形象的质量。而虚拟分身型则是以现实世界中的真实人类作为原型，为其在数字世界中赋予新生命。像 Travis 与堡垒之夜合作，在游戏世界举办虚拟演唱会就是此类虚拟人的一种应用。伴随着元宇宙概念的流行，相信定位在分身赛道的产品会致力于形象制作成本的进一步降低，从而让虚拟分身能力成为新数字时代公民的基础配备。而笔者所在团队打造的数字人则是第三种–业务型数字人。与前两类不同，业务型数字人通常使用 AI 驱动来完成人机交互。面对此类型数字人，如何发挥其拟人性的优势，打造真实的服务体验是本次设计的核心要点。接下来我们将在以下篇幅中介绍业务型数字人的设计实践。2. 数字人带来的体验变革“数字人”作为信息载体 服务趋向透明化传统的交互方式将界面中不同的元素，通过最优信息组合与层级堆叠，来承载用户与计算机之间的交流，如同翻译一样让双方彼此理解。但这样固定行为路径的信息结构，对于用户来说需要适应和学习，丧失了一部分自主能动性。诺曼（Don Norman）曾提出“无界面的界面”，界面设计追求透明性，以将对人机互动的干扰降到最低。所以从本质上来看，界面是以一个“具体对象”的身份出现的，既连接又分隔人与机器，以最自然的方式牵引与反馈信息与服务。而数字人正是界面服务本身的载体，让用户脱离界面本身的屏障，用更原始自然的方式面对界面，通过自然对话牵引服务。界面成为关系的动态空间 信息流动在“人”与“数字人”之间当系统的对话由“数字人”来进行承接后，界面的价值变成了推进“数字人”与“人”之间的互动，建立连结。我们发现相比较传统的线性交互逻辑，数字人的界面信息更偏向根据当前环境与用户状态的动态推送，除反馈当前对话结果外，也会根据场景中用户不断变化的多维信息为用户进行引导与推荐，同时为了保证服务场景的真实性，也需要与当前的交互环境无缝衔接，就此可见，界面不止是任务效率工具，同时也模仿人与人之间关系构建的方式，建立了人与机器互动的人文情怀。以线下银行客服为例的设计实践1. 项目背景用户与客户价值双驱动 为虚拟客服落地提供势能在探寻数字人产品落地场景的过程中，我们发现，需要将数字人的核心特性在特定领域中发挥核心价值，才能在市场中落地生长。因此低成本高转化的线下银行虚拟人客服，成为撬动金融行业的首选落地场景。就客户价值而言，线下服务场景每天有大量人工客服机械回答同样的问题，企业要为这些重复劳动支付巨额人力成本。且服务人员素质、知识储备参差不齐，现场表现不稳定，迫切需要低成本高质量的服务工具。虚拟人本身作为信息载体，保留人与人面对面沟通方式的同时，大大提升了沟通效率与服务稳定性，且平台灵活的配置能力可支持业务实时更新，省去大量人工培训成本，成为企业信息人工服务的新触点。就用户价值而言，角色身份上，面容亲和衣着职业的客服人员更能获取用户信任，引发用户交互兴趣。互动形态上，虚拟人打破了传统界面交互框架，将人作为信息交互对象，让服务有了具体“身份”，更易上手，信息获取更自然，让信息化程度不高的用户也可以摆脱设备恐惧，实现零门槛交互。2. 场景关系构建打破设备隔阂 让 “职业形象” 等候在 “ 职业场景 ”大屏设备仅仅作为承载数字人的媒介，我们希望界面在具体场景中 “隐身”，让数字人真实站立在场景中，获得用户亲和信任感，专注与她面对面沟通，不感到违和与侵扰。为达成这个目标，我们需要探究以下几个问题：如何塑造金融客服的职业形象如何营造自然真实的对话场景A.如何塑造金融客服的职业形象塑造数字人的形象，我们一般会从人格特质与职业特质两个方向分别对数字人的外表、情绪动作进行综合考量：① 外表维度即构建数字人的脸型五官、发型、妆容服饰。对于业务型数字人，我们需要从人格特质与职业特质两方面来思考他需要拥有什么样的面容、五官特征以及服饰要素。人格特质：银行客服需要表现出聪明专业的职业特点，同时又具备与人亲和的性格。参考相关面相心理学研究，浓眉大眼、脸型略尖的外表会给人聪明的印象，而嘴角上扬、眼型略弯，脸型棱角不凸显的外表会更亲和讨喜，在模特的选择上我们也尽量靠近这些特点。职业特质：偏分扎发是银行客服常见的职业发型，妆容不易过浓，显得干练有精神又平实亲和。在衣着的选择上，除职业工服外，为保障不同银行品牌的服务通用性，我们在工服上添加了品牌露出位，透传客户品牌形象。② 情绪动作维度即构建数字人情绪动作的选型与表现。因业务型数字人主要承载效率型任务，我们在情绪动作的选型上弱化了数字人人格特质的表现，更偏向于职业特质的表现。职业特质：为体现数字人职业特性，我们观察了线下银行客服的标准职业动作，选择了双手交叉于上腹部，丁字步站立的默认站位体现职业素养，同时减少无意义的动作设计，利用数字人的动作表情传达有效信息，如点头表示聆听，挥手表示内容推荐与指引，动作表现上选择幅度小、中性、自然的动作，以在表现鲜活灵动的同时不过分侵扰用户注意力。B.如何营造自然真实的对话场景为了能让用户在真实的线下场景有效且愉悦的体验服务，我们观察了线下银行的服务链路与空间设计，思考数字人全链路的进店服务体验，就以下两方面进行了思考与拆解：① 舒适安全的社交距离为了让数字人真实存在于场景中，与用户建立舒适安全的沟通，我们需要探究合适的人物身高与大小以保障用户与虚拟人之间距离适中交互自然。以 2019 年中国人平均身高作为参照，将 168cm 作为数字人实际身高，以便与用户建立平等沟通的视角。通常人与人在进行一般社交活动时，会保持 1.2m 左右的礼貌距离，在大屏的使用场景中，用户与屏幕需保持 50cm 左右的操作距离，根据成像原理我们发现数字人的实际身高需要进行适当缩放才可以真实模拟礼貌社交距离。我们采用真人模拟的测量方式，让 2 位 168cm 身高的同事面对面站立保持 1.2m 距离来进行大小观测，将真人模拟感受到的变化移植到虚拟人的大小调整上，做出相对舒适安全的社交距离。② 高效流畅的场景体验关于线下场景体验的拆解，我们主要思考两个方面，一是如何让大屏界面能够完美融入线下场景，数字人能够真正站立在场景里；二是拆解从用户进店到服务结束全链路体验，区分近远场的不同诉求精细打磨体验。场景模拟。关于数字人背景的设计，我们模拟了真实的线下客服场景，设立咨询柜台，本次方案中考虑到后续适用不同品牌银行接入，在品牌透出的视觉元素区位均可快速配置与替换。近远场体验拆解。Endsley 提出的三层情境意识（SA）模型，为信息处理提供了较为成熟的方法论，该理论分为三层：1.对当前情境中成分的感知；2.对当前情境的综合理解；3.规划预测该情境的未来情况。将情景理论与远近场相结合可将用户认知与设计要素做如下拆解：远场：建立认知，引导靠近根据上述的情境意识的三层模型，在情景获取阶段，重点在于为用户提供明确的元素，帮助用户快速建立有效认知。界面中所传递的信息包括：动态的、模拟真实身高且身着职业装的真人数字人，模拟银行前台的柜台，银行 logo 以及“空闲中，欢迎咨询” 的状态字样；进入情境解释阶段，对上述的元素进行整合诠释，用户能够明确建立起“智能的、可咨询、可信赖、可使用”的认知，此时结合用户咨询业务的需求内因，能够激发体验冲动；到情境反馈与预测阶段，用户会预测能够与数字人进行互动，解决需求，因此主动靠近，由远场转为近场。近场：建立关系，引导行为银行柜台使用人群数字化程度不高，交互方式上尽量符合用户自然对话的惯性认知，实现新手的无感过渡，降低学习成本与认知负荷。我们在具体交互方式的构建上，总结出以下交互设计思路供参考：主动服务当用户进入与数字人的交互区域，大屏自动通过图像人脸识别获取用户信息，数字人进入服务状态，主动说话并推出服务卡片，让用户能够快速建立服务认知，聚焦任务操作。指引明确触屏用户天然习惯点击操作，在信息输入方式上，对于不同类型的任务需要引导用户使用 GUI 操作还是语音输入表达诉求，强调：“试试说 ” 与 “选择” 的引导差异。同时在交互中的每一个状态下，都需要让用户明确我现在可以做什么，如何做，可以获取什么结果。要求数字人与用户交互的每一个节点明晰，引导通俗易懂，操作简单。渐进式引导为减少用户理解成本，我们在信息与操作的引导上采用单一路径，用户只需要跟随虚拟人的逐步引导，傻瓜式操作即可流畅完成服务。分支处理在一问一答的语音交互中，有很多潜在分支需要处理才可以还原自然体验。比如用户在服务进行中长时间未给出明确操作，至少会有两种情况：1.我们认为用户可能存在困惑，虚拟人会主动引导用户进行限定内容选择或聚焦提出问题。2.本身反馈内容较复杂冗长用户未操作则可能是还在消化信息，虚拟人需要延长等待时长等等。3. 交互式数字人大屏的设计要点A.交互式大屏的功能分区交互式大屏有自己独有的特性，本质上是一块超大触屏，但从交互方式与信息焦点两方面与传统触屏差异很大。在交互方式上，从手指的点按变成的整个手臂的移动，点触以多指拍按与扫动为主。在信息焦点上，用户曲臂操作屏幕，距离大屏的距离在 0.5m 左右，平视可接收的信息焦点有限，更多信息需要转动眼球或头部，那么用户的视线需要被引导与定位，信息需要按区块划分优先级，让用户更舒适流畅的获取信息。最佳操作区的设定我们根据人因工程学，确定出大屏的最佳交互区域最佳可视区，来展示核心卡片信息。以 55 寸大屏，1.68m 平均身高用户来进行方案探索。依照人体站立不屈膝，右侧大臂可旋转横向和纵向角度计算出最佳交互区域。根据最佳交互区，我们可以将核心交互卡片放置于此，次级交互放置于外沿，边缘区域不适合放置操作内容。最佳可视区的设定垂直可视区域：在用户保持站立时，最大视区为视平线以上 50 和视平线以下 70。视平线以上 25 至视平线以下 30 范围内为最佳眼睛转动区，能够以放松的状态识别信息，所以展示内容的最佳垂直视角在标准视线以上 25 至以下 30。水平可视区域：双眼区域大约在左右 60 以内，观察超出左右 60 的物体时，则需要集中精力才能识别物象，因此核心内容区域在左右 60 视角内较为合理。根据最佳垂直视角与水平视角的人因特点，结合头部小幅度垂直向下 15 转动扩大视角，我们计算得到 3 个可视区的划分，核心可视区展示主要对话流信息；次级可视区展示次要的状态信息，如收音反馈状态；最大可视区内尽量不放置信息。基于对交互区和可视区的计算测量，在页面布局中，我们将信息卡片最大程度的置于有效视区和次级交互区的重叠区域，用户可以最舒适的状态进行阅读和操作；将结束服务按钮放置在次级交互区外延，减少对核心内容的注意力分散；将音波引导动画放在次级可视区，通过色彩与动态变化对用户进行引导。B.交互式大屏的视觉设计文字清晰易读考虑大屏的尺度与真实的使用场景，界面中内容也需要相应的放大以适配大屏体验。在金融产品场景下，界面中最主要呈现的内容是文本信息，所以设计中要充分考虑文字的辨识度。合理运用字阶与对比度，能够有效提高信息的可读性，通过对比多种字号在不同距离下（远场、近场）的测试效果，对字体进行了标准化定义，阅读舒适的字号应不小于 36px，辅助说明的文字可降至 24px。除了字号大小，合理的对比度也对文本的易读性起到至关重要的作用，参考 WCAG（Web 内容无障碍指南）中对比度的不同级别建议，考虑公共的使用场景及部分中老年使用人群，因此将常规信息对比度设定为 7:1 以上，辅助信息不低于 4.5:1。视觉焦点一致用户在浏览内容需要头部有上下小幅度转动，为了让用户形成相对稳定的阅读模式，减少视线的跳跃感，我们将内容区的信息展示设定为用户输入和客服回答相对应的两条内容，且将它们的位置固定展示，这样用户在每次阅读信息时，视觉焦点可以保持由同一位置开始。数智人合理展示数智人作为服务温度与情感连接的对象，信息的展示要尽可能避免对数智人面部的遮挡，我们将信息的最大显示区顶部设定在数字人下颌向下 10cm 处，确保数字人能够较为舒适的呈现在用户面前，当页面发生滚动时内容与数智人的展示也较为合理。但也存在有大量信息展示的需求，为了满足高密度信息的有效传达，针对图片内容进行弹窗式扩展展示，在该场景下，将弹窗高度设计为完全遮挡数字人的方式，避免卡片高度跟随内容变化而遮挡部分数字人面部的情况出现。次级可视区信息强化用户对于次级可视区的信息获取效率有所降低，且该区域对于颜色和动态的获取更为敏感。因此想要提升该区域信息的传达效率，可通过强对比颜色及增加动态的方式进行强化。本次设计中语音输入的引导信息放置在次级可视区，因此通过采用大面积深色蒙层，强化收音区信息有效露出，较为明显的状态切换，能够从视觉上让用户对语音输入的引导高效获取。关于未来思考在数字人未来场景的应用中，会越来越趋向于实时的自然交互。计算机视觉、语音语义理解等 AI 服务能力日益精进成熟，多模态信息输入使得数字人的感知能力逐渐增强，我们在复杂信息的拆解与应用上，需要从用户作为人本身的需求与高效完成任务两方面出发，深度思考数据加工与应用逻辑。在交互反馈上，数字人与 GUI 的配合方式也是值得研究的方向，对不同的应用场景，在“人”与“ GUI ”的信息通道选择侧重会有很大差异，比如娱乐场景更偏向于人本身的情感化表现，而任务场景更侧重于信息高效传达。对于虚拟人本身生动性的表现上，也应该更多的考虑虚拟人相貌、情绪、动作、表情在人物世界观、生命感、人格化、业务属性等方面的映射与表现，真正实现人与“人”的连接。对于以上方向我们也都在探索的路上，期待 AI 与人类能日益共生共荣，共创未来。欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/digital-human-design
控件 用户 操作 问题起源这篇文章讨论的话题来自于我自己工作中一个长久存在的疑惑。我们用一个例子开场：你运营着一个视频网站，这个网站会给付费高级用户提供 3 种权益：跳过广告、免费音乐会员、积分折扣。那么你将会员权益页设计成这样：这个时候就有一个充满疑惑的用户站出来了：这个页面的意思是说“我作为一个高级会员，同时享有 3 个权益，只是这个页面展示不下了，所以我只能通过切换页面的形式查看我的 3 个权益”，还是说“优质大会员可以按下对应的按钮，从 3 个权益里挑选一个享受”？转换成我们设计的语言来说，也就是“这到底是一个 tab，还是一组互斥的按钮？”为什么我们要把这两个东西做得那么像？它们应该长这么像吗？tab 和按钮、单选框、菜单之间到底有什么关系？这些问题虽然听起来基础，但深究纵横 50 年来控件的发展史，是一个很值得研究品味的小细节。更多控件知识可以看这个专题 https://www.uisdc.com/zt/interactive-control信息与行为，事物与事件tab 和按钮，信息展示控件和选择器之间的差异，根本上来说是“信息”与“行为”、“事物”（thing）和“事件”（event）之间的差异。前者独立于用户的意图和行为之外客观存在，即使用户永远不去看、不去使用这些东西，它们仍然存在。而“事件”则需要事物加上人的操作行为才能完成。就比如说房间里有一箱子苹果，这是一个客观事实，苹果也是一样“事物”。而人中午肚子饿了，走过去拿起一个苹果吃了，那么“食用苹果”就是一个事件，这个流程需要“苹果”这个事物，也需要人拿起来咀嚼、吞咽的动作，这两个要素共同组成了“食用苹果”这个事实。在现实生活中“事物”和“事件”完全是两个不同的概念，不会有人把这两个事情混淆。“事物”就好像名词，而“事件”就是包含动词的主谓宾短语，前者看得见、摸得着，能够被稳定观测，而后者不一定。比如要是有人告诉你“桌上有一个苹果”，那么你一扭头就看得见苹果的确在桌上，因此这个事实是确凿无误的；但假如有小朋友跟你告状“报告老师，小明刚才打我”，就不那么容易取证。然而在人机交互中，“动作”和“行为”逐渐区分得不是那么清晰。命令行时代人机交互发展之初，“信息”与“行为”、“事物”和“事件”可以很容易地区分。在用户还得使用命令行操作电脑的时代，查看某个客观存在的事物、进行一项行为，共用了一个动作：输入指令。用户需要使用这样的方式来告诉机器我想去看什么、做什么，因此用户可以阅读文本，从语句字面意思判断事物和事件、信息和行为。从一开始的案例来讲，比如用户想要查看所有权益，就输入“查看权益”，看看打印出来的权益都有什么。假如系统要求用户选择某个权益，则用户输入权益代表的编号或者权益名字。但命令行界面这种交互形式毕竟效率太低，也并不利于形成用户对于系统完整稳健的心智模型，因此随着电脑作为家用生产力工具的地位不断提升、新的操作设备“鼠标”的普及，图形化用户界面（GUI）应运而生。在命令行向图形化用户界面过渡的阶段，两种新的交互样式首先出现：菜单和输入框。早期的菜单与输入框的样式非常粗糙，与传统命令行界面差异很小，因此计算机从业者早期只能展示字符而无法展示图形，所以只能把利用菜单、文本输入框作为主要交互形式的计算机带点嘲讽地称为“荧光屏打字机”（Glass Teletypes）。在这个阶段，“菜单”仅仅是一个简陋的，有别于主屏幕的展示容器，甚至我们今天熟悉的“对话框”（dialog box），也可以被理解为菜单的一种变体。至于菜单上究竟是放“行为”还是“信息”、“事物”还是“事件”根本就无所谓，因为用户仍然以类命令行时代的交互方式，也就是用阅读文本的方式来理解事物。图形化界面时代图形化用户界面极大地改变了用户和电脑交互的方式。鼠标的普及让用户界面的元素更多、结构更加复杂，用户体验和心理学的研究成果也孕育、催生出了许多新的交互样式。其中就包含了一个对当今控件形态影响巨大的概念：渐进展示（progressive disclosure）。一般认为 Xerox 公司 1981 年的 Xerox Star 是最先在图形化界面中使用选择器/tab 的产品，虽然这个电脑商业成绩不咋地，但在用户界面方面做出了很多贡献。在这个用户界面中，设计师为了让用户不需要像命令行界面时代一样不停地通过打字、记忆命令短语来与计算机交互，因此决定采用以下策略：将高频使用的项目全部展示给用户，无需打字，只要在选项中选择即可：这个策略催生了选择器组件将暂时不需要使用和展示的信息收起来，只在用户点击按钮时再渐进展示：这个策略催生了 tabXerox Star 时代的控件样式非常粗糙，不管是 tab、开关还是多选器，都以按钮的样式呈现，因此某个选项到底是什么意思、具体怎么用，依然依赖阅读文案来判断。比如用户看到“对齐方式：左对齐/右对齐/居中对齐”，就应该能理解是在 3 个对齐方式中选择一个，而看到“展示：字符/段落”，就应该理解是在选择展示和字符有关的设置项，还是和段落有关的设置项。而为什么 tab、选择器成为了我们今天看见的样子？这又不得不提鼠标的普及让一种全新的交互形式：直接操作（direct manipulation）进入了交互设计师的视野。按今天的说法，直接操作一般指“直接对对象进行操作”，比如用鼠标直接以拖动的形式进行文件排序、放大缩小、位置移动等操作。相比菜单、文本输入框，这种操作形式更快速、反馈更充足、更符合直觉。比如我们现在非常熟悉的“把某个文件拖动到回收站”这个操作，就是直接操作的一个经典案例。虽然直接操作今天看来是理所当然的，小学生都知道怎么把文件拖到废纸篓。但 80 年代用户图形化界面诞生之初，用户对家用电脑根本没什么概念，更不要提鼠标拖动这种高端操作了。那么，设计师要如何教育用户学会使用直接操作这种新的交互形式？这个答案是：引入隐喻（metaphor）。简单来讲，隐喻即为“用直接或间接的方式，说明 A 和 B 很像、A 具有 B 的特性，或者可以用操作 B 的方式操作 A”。将用户完全不熟悉的人机交互概念用日常生活中的事物表述出来，就能使其将自己的生活经验移植/应用到人机交互中，从而降低学习成本、使用户通过直觉也能辨别出某个功能该怎么用。比如上面提到的“将文件移入废纸篓”，就是一个非常出色的、不言而喻的隐喻：因此，当设计师发现使用隐喻是行之有效的用户教育形式时，隐喻就成了当时流行的设计思路。顺着这个思路越走越远，最终诞生了像 mircosoft bob 这样类似游戏界面的浮夸系统样式，我放出来给各位嘲笑两下。话说回来，使用隐喻这股风潮也影响了控件的样式设计。比如 1988 年苹果开发的一个可视化编程软件 Fabrik，就采用了现实生活中“文件夹上的标签”作为隐喻来设计 tab，此举暗示用户可以快速地在不同页面中跳转，就像现实生活中根据文件夹标签来翻找文件夹中的文件一样。此时我们可以发现，Fabrik 使用隐喻的“tab 选项卡”和 Xerox Star 纯按钮图形化的“tab 选项卡”在样式上开始存在差别。用户无法再从文字上去理解这个控件的交互方式，而需要从图形上去分辨，动用自己日常生活的经验。因此从这个角度上来说，不同样式的控件映射不同的现实物体，不同的现实物体应该对应着不同的交互方式。比如“单项选择”radio button 使用的隐喻，就是收音机按钮。这种按钮按下去一个其他的按钮就会都弹起来，所以每次只能选中 1。而“多项选择”check box 使用的隐喻则是纸质调查表/备忘录上的打勾格子，因此可以选择多个。“按收音机按钮”和“在备忘录上打钩”，都是动态的“事件”，而只有“文件夹里的分页标签”是静态的“事物”，这种隐喻性质之间的差异让人对于 tab 和单选框用途差异作出直觉性的判断。因此因此尽管在 80～90 年代没有引起充分讨论，但系统设计中，一般会把 tab 用作静态页面的导航，而将单选框/多选框用作动态选择行为。以 Apple II（1986 或 1987）为例：相比之下，“菜单”作为最古老的交互控件形式，它的常见样式（下拉菜单）在隐喻流行起来之前就基本固定，可以算为人机交互虚拟环境下一种原生的概念，所以菜单的使用场景反而不受隐喻、不受现实生活中物体的特性影响。它结构简单、有大量空间来写说明文案，因此作为控件的实用性很强，放“静态信息”也没问题，放“动作”也行，有点像一个“收纳抽屉”。混乱的 90 年代～千禧年90 年代到 00 年代计算机/网络行业发展的势头有目共睹，使用场景的不断增长使得页面的复杂性指数级提升。因此交互设计师也就需要去不断地思考控件之间的层级关系、差异、适用的场景等等。这个时代各个大厂制定过许多关于“行为”与“信息”之间的规则，然后又一一将它们推翻。我们仍然以微软 windows 和苹果作为案例，看看他们的尝试。Windows 很快注意到了“行为”和“信息”之间的差异。在 html 那种蓝色带下划线的超链接按钮样式流行起来以后，windows 认为这种按钮看起来“安全、没有破坏力”，“不太严肃”，容易让用户联想起网页超链接那种页面之间的跳转。所以在 windows 7 的规范手册中，指导设计师应该尽量采用带边框、有阴影的按钮样式来承载“行为”。然而另一方面，windows 7 对于 tab/单选框的定位是模糊的。它允许使用选项卡 tab 来替代单选操作，只有被选中的 tab 下的修改才会生效。允许 tab 和单选操作进行互换在业界也有一些反对声音，比如说写 2000 年《GUI 设计禁忌》的 Jeff Johnson 就认为 tab 最好是只作为导航使用，而非选择器，因为这样做混淆了“信息展示”与“行为选择”的差异。最后，文字型按钮的出现，使得用户逐渐分不清什么是“tab”，什么不是“tab”。windows7 时代也出现了纵向排列的 tab。很不巧，windows 的另一个控件 wizard 有着长得很像纵向 tab 的侧边栏。这个侧边栏综合排列了信息导航、功能快捷操作等多种类型的入口。因此“tab”或者类“tab”的组件使用场景被进一步拉扯、拓宽。相比 windows，mac 的做法更加讨巧。mac OS 有单选框，但是他们也同时包含了非常类似 xerox star 原始样式的选项卡视图（tab view）与分段控件（segmented control）。两者虽然看起来一模一样，但从规范的角度上来说，前者负责信息展示，后者负责在单选、甚至多选的动作操作，可以说是非常掩耳盗铃，总体倾向于不区分“选择器”和“选项卡 tab”样式。mac 的这种控件既不使用隐喻，甚者有时也不写文案，要求用户通过控件出现的位置和上下文来判断其用途。之所以苹果敢应用这种简洁中带着些许豪横的设计思路，我个人认为主要是因为其产品比较大众化、场景没那么复杂。扁平化时代与隐喻失效经过了 00 年代控件的发展，10 年以后有两件事情极大地影响了用户的心智。iOS7 带起来的扁平化设计风潮，使得控件整体样式往极简、轻量的方向突飞猛进。原来不同控件的形状、色彩差异很大，用户不容易弄混按钮、单选框和 tab，但在扁平化设计的思路下，所有控件都用方块甚至文字本身来代表，这样做无疑削弱了控件的可识别性。其次我们上文说过，隐喻的运作方式是让用户将生活中常见事物与控件做类比。然而时过境迁，当用户生活中常见的事物已经飞速变化，老旧的隐喻就会失效。文件夹选项卡、收音机按钮……这些东西早就是老黄历了，假如“隐喻”需要事先解释才能让用户理解，那么它就不再能起作用。因此对于很多年纪很小的新用户来说，用选项卡 tab 承载行为操作并没有什么不妥当——毕竟今天文件夹都不太常见了。我们到底该怎么做？先说结论：不要制造没必要的规矩对于绝大多数场景比较简单的产品，菜单/单选/tab 不区分也无所谓对于复杂工具型/企业级产品，无论是移动端还是 PC/Web，最好区分操作/信息展示控件，严格区分单选和 tab 的样式。首先第一条：不要制造不必要的规矩。这条其实有点违背交互设计师的天性，我们天生就受不了含含糊糊的灰色地带。但控件的运用中，贴合场景比遵守某条据说行业通用的“规矩”要重要很多。比如说我听有些设计师的分享里提到他们会比较严格的要求作为导航控件的 tab 上不能放操作，而菜单才是操作的聚合。后半句话我们已经在上文论证过了，没有的事，菜单从诞生之初就放啥都行。对于前半句话我想出示一个案例：这张截图来自淘宝的千牛商家工作台里，这是一个给淘宝卖家的商家后台，它把“发布宝贝”操作露出放在纵向导航（姑且也叫 tab 吧）上。这显然是一个高频操作。在这个案例里，你可以说它还有其他的布局方式和解法，但是要说因为把操作放在 tab 上就能导致多么严重的用户体验问题或者多么严重的控件定义问题，那也大可不必如此夸张。对于大多数 C 端产品，不区分单选/tab，或者在一些定制化程度比较高的页面中用 tab 替代单选是可以接受的。其一是因为无数产品长时间的验证说明，用户在这些比较放松、简单的场景下并没有那么纠结控件样式。其二是因为 C 端产品的“信息”和“行为”其实没有现实生活中那么分明，往往处于比较暧昧，你中有我我中有你的情况中。以“定酒店”为例，“查看酒店的信息”是信息展示，“订酒店”则是动作流程，但用户从哪一步开始转“查看”为“动作”的呢？不一定。最后的最后，工具型/企业级产品不能应用 C 端产品的设计逻辑。复杂场景下（比如 tab 有嵌套关系，比如既有 tab 又有选择器）依然能让用户准确无误地理解控件的意图和交互形式，是交互设计时必须思考的问题。比如在 windows 新的 fluent 规范中，已经绝口不提 tab 和单选框之间的互换关系，tab 被定义为纯粹的导航控件，样式也保持了和单选/多选的差异。开关、复选框和单选组件如何区别应用？看完这篇保证会！在 web 表单设计中，我们会经常遇到在开关、单选、复选框三个组件的选择使用上纠结，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义....我们发现使用 Switch 开关、Radio 单选和 Checkbox 复选这三个组件好像也都是可以的，阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/components
合集 干货 工具 五月第三波设计干货合集来了！这次的合集当中，很多工具和素材是相辅相承的，比如图片压缩、格式转换、去除图片背景、移除图片内容的几款工具可以搭配在一起使用，给 Figma 的开源图标合集、Web UI 设计系统和框架以及高素质的 Lottie 动画素材库也可以搭配到一起使用。当然，前2期合集里也有宝藏：第一波！2022年5月精选实用设计干货合集五一假期结束了，给大家贡献一波设计干货吧！阅读文章 > 第二波！2022年5月精选实用设计干货合集五月的第二波设计干货合集紧跟着就来了！阅读文章 > 下面我们具体看看这一期的干货：1、免费 Figma 和 XD UI 设计资源https://webui.design/这个网站提供的功能还是非常直接的，它完全是针对 Figma 和 Adobe XD 这样的软件提供专业而全面的 UI 设计和开发框架，这些框架涵盖了很多不同的类型，但是并不包含移动端 UI ，而是以网页和 web app 为主。这个网站提供的 web UI 素材多数是免费的，有这类需求的设计师同学可以收藏一下。2、免费在线情绪板 Visualisthttps://set.visualistapp.com/很多设计师同学做设计的时候还是会用一下情绪板来着，这个名为 Visualist 的工具可以帮你在几分钟以内，快速梳理出情绪板，这个工具可以一键删除其中图片背景，并且帮你进行自动梳理，通过这种方式，帮你快速地整理出设计的思路和想法。3、免费 Figma 开源图标合集https://www.figma.com/community/plugin/1074084347757622122/Iconduck这个图标合集当中包含 150 个开源合集的合集，总计包含有超过 120 000+ 免费可用的图标，你所需要做的就是安装这个插件，然后就可以调用其中超过 12 万个图标。其中的图标合集大都是超大图标合集，你可以很轻松地找到你的项目可用的全套图标。4、在线图片压缩和转换工具https://www.optimizeimages.com/这个在线的图片格式转换和压缩工具，已经非常贴合如今的设计需求了，它除了可以帮你针对 jpeg、png、svg 和 gif 这类常见格式进行批量压缩优化、添加水印，还能批量抓取网站的图片素材，高效地转化 WebP 和 AVIF 这类更为高效的格式。5、超强的免费背景去除工具https://clipdrop.co/remove-background随着之前很多图片背景移除工具相继收费，很多同学都在找优质的替代品，这个 ClipDrop 出品的背景移除工具就是不错的选择。一方面，这个工具可以处理高达 5000x5000px 这样的大尺寸图片，另一方面，它在抠图的时候精准度也超过很多市面上的竞品。正在找抠图工具的同学赶紧去试试吧。6、图片内容移除工具 Photoroomhttps://www.photoroom.com/tools/remove-object-from-photo/很大程度上，这个工具提供的元素去除功能，可以和上面的背景移除工具在功能上进行互补，上传你需要处理的图片，然后简单的擦除你想要移除的元素，它可以在强大的 AI 的协助下，帮你干掉它，并且保持整个图片的自然合理，值得试试哦。7、高品质 Lottie 动画素材库https://creattie.com/如果你日常设计的时候会需要高素质的动画素材，那么这个素材库一定要收藏一下，这个素材库提供大量的 Lottie 动画素材，以及很多不错的矢量图。如果你不确定它是否值得付费，素材平台还提供了免费试用，你可以先尝试着用用来判断一下。8、肌理超强的笔刷字体BrichBrick 是一款典型的展示性的英文字体，字体笔触肌理感相当强，用来做 Banner 和海报设计是特别合适的。这款免费字体是仅限个人使用的的版本，具体可以在文章开头和结尾的百度云链接中获取。9、免费矢量形状素材小合集这是一组矢量素材合集，其中包含 15 个 3D 立体风（实际是2D）的几何立体线框和 40 个平面矢量素材，这些充满秩序感的矢量素材都是以 PSD 格式存在，仅限个人使用，可以在文章开头和结尾的百度云链接中下载获取。10、免费的 Instagram 展示样机老实国内设计师对于用到 Instagram 样机的场合似乎并不会太多，但是这套样机素材稍加处理其实是可以应用到其他的 APP 展示上，倒是不失为一个不错的展示模板，感兴趣的同学可以在文章开头结尾的百度云链接中获取，值得注意的是，这个免费样机仅限个人使用。OK，以上就是这一期的设计干货合集，希望里面有你需要的素材！ 文件名 如何下载使用 文件大小 提取码 下载来源 5月干货第三波234Mamue 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-5-design-resources-vol3
首页 官网 后台 B 端产品一直都有不能即下即用的问题，所以今天分享下之前收集的国外可以直接试用的 14 个 SaaS 产品。这只是第一篇，后面会整理更多可试用的 B 端后台，大家可以收藏跟进后续文章。提醒下大家记得提前注册好国外邮箱，gmail 或者 google 邮箱都可，以下产品还是需要邮箱注册使用的。想做B端还不懂什么是SAAS？一篇最专业的扫盲科普（下）有了解和学习 B 端的同学必然都听说过 SAAS 这个词，这在 B 端行业是个非常重要的产品形式和分支。阅读文章 > 想做B端还不懂什么是SAAS？一篇最专业的扫盲科普（上）有了解和学习 B 端的同学必然都听说过 SAAS 这个词，这在 B 端行业是个非常重要的产品形式和分支。阅读文章 > SurveyMonkey（调查问卷平台）SurveyMonkey 是一种在线调查工具，可帮助进行问卷设计、数据分析和展示。可以随时编辑、修改或查询问卷调查结果。涵盖多种类型的 Q/A 模组，内建的题库模组设计包括单选题、复选题、填空题、下拉选单和评分量表等，可供使用者编制不同题型的题组。官网首页后台首页官网： https://zh.surveymonkey.com/SaaS 公司类型：B2B、B2CHubSpot（CRM 后台系统）HubSpot 是一家自媒体营销软件公司，其专注于 CRM、社交媒体营销、内容管理、网站分析和 SEO 的一体化服务平台。前期使用核心产品快速积累了大量客户，之后一直在挖掘这些客户让产品给客户创造新价值，建立了强大的 SaaS 商业模型平台。官网首页后台首页官网： https://www.hubspot.com/SaaS 公司类型：B2B、B2CShopify（电商平台）Shopify 是一站式 SaaS 的电商服务平台，为电商卖家提供搭建网店的技术和模版，管理全渠道的营销、售卖、支付、物流等服务。官网首页后台首页官网： https://zh.shopify.com/SaaS 公司类型：B2CSlack（聊天工具）Slack 是一种协作和聊天工具，其中功能包括聊天、群组管理、多种工具聚合、办公文件工具等一系列企业工作所需的内容。官网首页后台首页官网： https://slack.com/intl/zh-hk/SaaS 公司类型：B2BSalesforce（CRM 后台系统）Salesforce，一家客户关系管理(CRM) 软件服务提供商，总部设于美国旧金山，可提供随需应用的客户关系管理平台。官网首页后台首页官网： https://www.salesforce.com/SaaS 公司类型：B2BJira（OA 系统）Atlassian 提供的产品（例如 Trello 和 Confluence）可以改善软件开发、团队协作、项目管理和代码质量。官网首页后台首页官网： https://www.atlassian.com/zhSaaS 公司类型：B2BMailChimp（网站创建）MailChimp 是一家营销软件公司，拥有三大产品。其主要产品 MailChimp 是一个电子邮件营销平台 ，可让您安排自动电子邮件并跟踪其结果。除此之外，也可以创立自己的网站，用于售卖商品、日程安排等等。官网首页后台首页官网： https://mailchimp.com/SaaS 公司类型：B2B、B2CWix（网站创建）Wix 是一种网站创建工具，是提供给几乎没有网络开发经验的用户，用于更快创建自己的网站使用。官网首页后台首页官网： https://www.wix.com/SaaS 公司类型：B2B、B2CElastic NV（可视化数据展示）Elastic NV 是一个数据分析平台，可帮助用户使用搜索功能以不同方式探索数据。官网首页后台首页官网： https://www.elastic.co/cn/SaaS 公司类型：B2B、B2CSnowflake（可视化数据展示）Snowflake 是一种数据云，可为企业提供可视化数据的能力。Snowflake 在 2020 年的同比增长率为 273%。官网首页后台首页官网： https://www.snowflake.com/Saas 公司类型：B2BCanva（设计工具）Canva 提供的软件允许几乎任何人使用该平台的拖放功能创建精美的设计。官网首页后台首页官网： https://www.canva.cn/SaaS 公司类型：B2B、B2CMiro（协作工具）为办公团队提供在线协作白板工具，支持多人在线协作，可用于制作思维导图、看板、可视化表格、流程图等。官网首页后台首页官网： https://www.miro.com/SaaS 公司类型：B2B、B2CTerllo（协作工具）Atlassian 公司提供的产品，使用看板、卡片和清单来管理团队的项目或者任务。官网首页后台首页官网： https://trello.com/SaaS 公司类型：B2B、B2CInvision（协作工具）美国版蓝狐，Invision 是一款交互原型设计工具，并逐渐发展成为一种基于产品的沟通、协作平台。官网首页后台首页官网： www.invisionapp.com/SaaS 公司类型：B2B、B2C欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/14-saas-products
产品 行业 业务 在我们日常的沟通当中，很多时候大家都会将自己的产品，以“B 端产品” 这样宽泛、含糊的方式进行阐述。但是 B 端产品由于服务对象不同、发展方向差异，也就导致产品本身就会有很多不同的分类。今天就和大家分享 B 端产品的四种分类，以及对于设计师而言，这些分类会给我们设计落地、职业选择造成哪些影响？往期回顾：B端设计指南：从 4 个方面帮你掌握「审批」的知识点一直以来，业务都是 B 端逃不开的话题，你可以在许多文章当中看到我们的改版方向是因为业务需求、设计的思路是因为业务需求。阅读文章 > B端设计指南：网页布局方式科普栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。阅读文章 > B端设计指南：栅格的定义和使用方法在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。阅读文章 > B端设计指南：6800字干货帮你掌握快捷键设计前言键盘，在很多人的眼中，就是一个信息录入的硬件设备。阅读文章 > 垂直业务型产品垂直业务型产品是针对企业垂直独立的业务需求所设计出来的 B 端产品。这类产品的出现，主要是围绕某一个复杂业务场景，去解决这个场景当中企业经营、管理的实际问题。比如以 CRM 为例：CRM 的全称客户关系管理系统因为它是客户关系管理系统，而使用这类产品的主要角色就是销售员工，他们在进行商品售卖（特别是交易周期较长的商品时）需要销售人员通过 CRM 进行管理客户。而作为企业为什么要使用 CRM 产品？其实是因为企业本身会有较强的管理需求，我希望能够通过 CRM 去监督每一个销售人员究竟是否认真完成工作，是否合理合规高效的与客户进行跟进沟通，因此可以通过 CRM 满足企业的管理需求。但“销售”这类角色往往非常特殊，它存在于各行各业，比如楼下提供保险业务的销售人员、楼上在线培训的销售人员、自己公司 B 端产品本身的业务销售人员。而大多数 CRM 产品考虑的不是针对每一个行业单独去制作一款 CRM，因为销售团队在使用的过程当中，就会存在很多共性，产品便可以通过共性去抽象一个针对多行业的客户关系管理系统。垂直业务型通常属于 B 端产品当中难度较高的产品类型，因为不同的业务，往往作为设计师需要了解的不是简单的这个页面长什么样，而是这个业务下，员工应该怎么用，怎么用才是更为合理的，而在很多招聘信息当中，就会发现企业更喜欢去招聘有过类似经验的设计师。当然作为设计师，如果选择进入一家垂直业务性产品的企业，应该更多的去阅读行业相关的书籍，比如想要做好 CRM 产品，你必须了解什么样的销售人员，具备什么能力，才是一名资深的销售。通过了解行业人员的具体使用细则才能更好落地设计。行业属性型产品行业属性型产品是针对某个行业定制的一系列，从上至下、从内到外的产品功能。这类产品主要是围绕一个具体的行业去构建整个产品的解决方案，目的是这个行业的商家，在使用了这款产品过后，就能够解决它目前经营过程当中的问题。比如以在线教育行业为例，小鹅通应该就是在线教育行业的头部产品，去观察它的产品功能模块你会发现它会涵盖课程详情的内容管理、学员知识付费的交易管理、对产品进行营销的 Marketing、成功付费学员的客户关系管理，而这些功能模块在其他产品当中都可以单独拿出来，当做一个大型的 B 端系统的功能。行业属性型产品更多是以这个行业当中需要用到的产品出发，考虑就不再是单一的老师角色，而是一个课程培训行业所涉及到的所有工具，都希望能够通过行业属性型产品去解决。在设计上，行业属性型产品不会过于复杂，功能都会相对比较简单，因为对于这些商家而言，不需要过于复杂的系统，只要你能够满足它的日常工作即可。比如小鹅通，就是属于在线教育行业的产品，它与纷享销客当中的客户管理就会存在明显差异，无论是从功能还是界面的复杂程度来说，都完全不一样。可以看到筛选、视图、表格操作，等多方面的交互、产品规划，都会有明显的差异。协同办公型产品协同办公型产品是通过软件实现工作协同、办公自动化，让企业高效运转的产品。大多数情况下，企业内部的办公管理没有太多个性化诉求，因此会购买成熟的办公协同产品：比如飞书、企微、钉钉、泛微目前较为常见的协同办公产品包含：在线文档、OA 办公自动化、IM、在线会议、项目管理、研发管理等产品。协同办公产品，在企业当中通常只会有一款软件。比如在一家企业 使用了企业微信，就等于它会去使用腾讯会议、腾讯文档、tapd 等多款关联性的产品。在设计层面上，协同办公型产品是最接近 C 端产品的特性，因为他的使用人群很多，并且使用的角色也复杂多样，因此在产品设计上，对于 视觉交互往往有着更高的要求。运营管理型产品运营管理主要分为运营与管理两个系统。运营是针对自己本身就有 一款产品 A（不限于 C 端 B 端） ，为了满足产品 A日常界面的展示与维护，需要专业的运营类后台系统所支撑。比如淘宝、抖音、小红书，这些产品，他们都会有自己的内容审核 、广告投放等多个后台系统。运营的主要目的就是审核，日常的数据资料维护，比如以 sspai 为例，在少数派的网站当中，有作者进行投稿，因此必然会存在对应的运营人员进行内容审核，同时少数派还会有会员、商品购买，因此能够推断出少数派的运营后台一定会包含类似成员管理、会员管理，订单管理等前台系统已经拥有的功能，来执行网站后续的运营工作。而管理则是针对系统当中的商户、用户、租户的“信息资料”进行管理。主要会涉及到：商户的门店信息：饿了么的商家服务后台，商家可以进入到系统里面去配置门店的具体信息、售卖的菜品、对应的活动等等，而饿了么就是通过这样一个平台能够规范商家在系统当中的行为，能够对他们进行有效的监管。租户功能的开通：租户主要针对的是 SaaS 产品，也就是购买 SaaS 产品的客户，而我作为产品提供方，想要对每一个客户进行管理，就会有一个租户平台进行管理。比如在我们一个租户管理系统当中，为了让客户成功对每位租户的信息进行快速操作，在设计上并没有优先去考虑设计原则，而更多是将操作外置，让信息快速传递的同时，能够快速操作。同时使用的客户因为都需要进行上岗培训，这样简单的操作也能让他们更容易理解。用户信息的分析：对所有在平台的数据进行分析管理。比如在 B 站当中，就会存在大量的用户，一旦有人发言出现问题，或者言语行为过于暴力，那一定会有系统来管理这样的特殊情况。而用户给到的数据我们还能够对其进行更为细致的分析。最后其实一款 B 端产品并不是固定在某一个类型当中，更多是随着市场的不断发展进行变化，因此要去理解的是这个软件背后的业务诉求、推导他们的功能模块，盯着一款产品“发呆”（其实就是去想想，多理解），当然这对于 B 端产品的类型，有什么自己的想法也可以在评论区发表自己的看法～全面了解 B 端产品设计：如何理解需求？在上一篇《全面了解 B 端产品设计：基础扫盲篇》内容中，我们已经知道，B 端的设计难点不在于精美的外观和复杂的设计，而是要符合产品的实际需求，并有效提升业务运营的效率。阅读文章 > 欢迎关注作者的微信公众号： CE青年Youthce本篇来源：优设网原文地址：https://www.uisdc.com/b-product-type
方案 列表 页面 项目背景智行 App 的“智慧出行”功能，作为一种全新的出行方案查询方式，致力于提供用户全面的出行方案推荐。以往的方案查询，用户需要预先想好具体的出行方式，才能开始操作。但这种搜索路径，并不是最简便的。我们希望直接给到用户所有的交通方案，并提供对比与出行建议。也正是因此，我们需要设计一个更全面的方案列表页面。设计目标之前的页面效率非常低，为了让用户在同一个页面中，就可以完成方案的“浏览”、“切换”、“对比”。我们制定了以下三个设计目标：1. 提高对比效率最初的版本存在的问题：1）不同的方案类型纵向罗列，露出数量依赖屏幕高度；2）“查看更多”的列表与主列表需要反复跳转；3）不同方案之间距离远，全靠记忆力。这都是我们需要解决的问题。2. 加强操作提示切换列表的操作，不可避免地会使用到“Tab”这种交互语言。而常见的 Tab 形式大多存在点击感知不高的问题，是需要解决的核心问题。3. 页面轻量化OTA 方案列表本身就是一个文字信息量巨大的页面。不同类型的方案之间，关键信息也不一致。混合之后如何进行统一化设计，也是个很大的考验。设计历程整体项目经历了两次大的改版，我们分别对交互形式与视觉样式做了升级。交互形式探索为了加强对比效率，将不同类型的方案列表放入同一个页面。我们主要做了以下几种交互的探索。1. 「双列表」的探索不可否认的是，双列表在「横向对比」上有独特的优势。但缺点也是十分明显的：页面信息过于密集，容易造成视觉疲劳；也很难兼容三种以上的方式对比。2. 「横向 Tab 栏」的探索这种形式用户的「认知度高」，但切实存在点击感知不强的缺点。我们分析了一下其中的原因，认为是：视线方向与手势方向不一致的结果。如果阅读视线和滑动操作都是纵向的，会如何呢？3. 「纵向 Tab 栏」的探索细想一下自己使用以下应用时，是不是很自然的使用了切换。但如果我们采用了同样的结构，又迎来了新的问题：如何在纵向 Tab 空间中，放下复杂的交通信息？我们使用了新的图形化语言，并完成了第一次改版。至此，交互形式确认。初步方案上线后，整体页面的转化率获得了极大的提升。之后我们又进一步做了视觉的整体优化。视觉降噪处理验证了交互样式的成功后，我们希望让页面更加轻量化。1. 视线重心转移原页面头部的色彩比重非常大，但头部的信息与功能并不重要。我们的期望，是用户将视线集中在不同的方案 Tab 上。于是对页面做了初步的降噪处理，并增加了明显的操作提示。2. 继续简化 Tab 栏先前 Tab 虽然清晰，但形式过于整体，像行程说明，反而缺少了可以点击的感觉。在样式简化的同时，我们进一步压缩宽度，也统一高度。使得 Tab 区域整体更“整齐划一”。3. 方案卡片的重构方案卡片是用户对比的视觉主体。我们做了以下调整：1. 使用智行数字体增强辨识度2. 适配不同 Tab 下的关键信息3. 中转方案图形化整体效果至此，整体的改版告一段落。我们来看下最终的效果。项目总结项目上线后在数据上取得了很好的效果。就单页面的转化率来说，基本做到了和常见的火车列表页与机票列表页持平。在出行高峰、需求旺盛的时期甚至更好。之后智慧出行还会在方案的智能推荐上，为我们的用户带去更好的功能与体验。愿我们的努力为你带来更好的体验。感谢阅读~列表流、卡片流、瀑布流、Feed流，你能分清吗？可以讲解下列表流、瀑布流、卡片流、Feed 流这几个词的含义与区分么？阅读文章 > 欢迎扫码关注公众号：「智行 ZXD 设计中心」本篇来源：优设网原文地址：https://www.uisdc.com/zhixing-list-design
产品 功能 画布 整个产品的生命周期，竞品分析都一直相伴，早在《孙子兵法.谋攻》就有，“知己知彼，百战不殆；不知彼而知己，一胜负；不知彼不知己，每战必败。” 竞品分析已是我们产品设计的一项必备技能，但在竞品分析时，也常陷入各种误区：流于表面，缺乏深度和广度，结论无参考价值过于主观，只收集对自己有利的信息乱套模板，交作业平时没有跟踪记录，要做分析了无从下手分析方法太多，不知道用哪个如何总结提炼出最有效的关键信息、为后续的业务决策/设计工作带来较大参考价值，仍然值得我们不断去思考。竞品分析流程1. 明确目标2. 选择竞品3. 确定分析维度4. 收集资料5. 信息整理分析6. 总结报告8 种常用的竞品分析方法结合工作经验，我总结了 8 种常用的方法，根据适用场景我们一起用起来吧~1. 评分比较法难度指数：适用场景：用户体验设计评估、$APPEALE 要素评估是用评分的方式对竞品做出评价，以找出自身产品的优势和劣势。这种方法通常给出 1~5 分的区间，根据产品中的某一个方面或某个点的表现情况进行评估～注意事项：1）最好请多个目标用户评分，并加权平均，避免带入个人偏见2）使用评分比较法时要给出参考标准，例如尼尔森十大可用性原则、android 和 ios 两大移动平台的设计原则等用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 2. YSE/NO 法难度指数：适用场景：横向比较产品功能、特性等通过对比产品与竞品的功能，可以全方位了解竞品的功能分布，为自己产品的功能规范做参考。通过与竞品的功能一一对比，有的话就在表格上对应位置打勾，不存在就空着或打叉，符号可自定义。注意事项：1）产品功能比较复杂的，还要拆解成 2 级功能/3 级功能/4 级功能…2）功能多不一定是优势，甚至，大而全可能是劣势3）“竞品有的功能我也要有”这一点需要根据具体情况而定，你的用户不一定喜欢3. 矩阵分析法难度指数：适用场景：了解产品定位、竞争优势、市场机会以四维矩阵的方式分析自己的产品与竞品的定位、特色或优势，从而明确自己产品的竞争优势;也可以帮助我们判断现有的产品是否需要重新定位，并帮助我们重新找到合理的定位。也可以梳理清楚市场中存在的空白点。这种方法需要确定 2 个关键竞争要素，分别来做为 XY 轴，根据竞品在关键竞争要素的表现而放到对应的位置，从而思考自己产品的定位。注意事项：1）矩阵是一个模型，帮助我们抓重点、把握关键，也意味着会舍弃一些次要因素2）矩阵空白区代表竞争相对较弱，但也需要看你的用户是否需要或感兴趣4. 功能拆解法难度指数：适用场景：深入全面地了解竞品功能、预估开发成本周期、探索新需求功能拆解可以按菜单导航拆解、按使用流程拆解、按交互操作拆解、看版本更新记录拆解。注意事项：1）功能拆解时要拆解充分，不要遗漏，特别是一些隐藏操作的功能，如长按、拖动等2）可以通过穷举法检查拆解结果5. 竞品画布难度指数：适用场景：低成本快速验证竞品分析思路、新手快速上手竞品画布是一个简易的模板，通过一页纸的内容覆盖做竞品分析的 6 个步骤，引导分析者更规范的做竞品分析。注意事项：1）分析的目标要明确2）选择竞品时先发散再收敛，最后聚焦到 3 个左右的竞品做重点分析3）分析维度取决于目标，并写出选择该维度的理由6. 精益画布难度指数：适用场景：产品商业模式规划、商业模式分析精益画布出自于《精益创业实战》一书，更侧重于产品层面的商业模式。通过精益画布可以帮助产品经理更全面的思考、决策，从系统、商业的角度来规划产品、分析产品，建立产品的全局观。注意事项：1）按 1~9 的顺序填写会更有逻辑2）填写时需要关注多边用户的不同需求3）不要把假设当真，精益画布上填写的内容都是你的假设，未经过市场验证7. PEST 分析法难度指数：适用场景：预测市场、宏观环境分析PEST 分析法是对宏观环境进行分析，以便找到机会，认清威胁与挑战。所谓 PEST，P 是政治(Polotics)，E 是经济(Economy）, S 是社会(Society），T 是技术(Technology)。这种方法就是将这 4 个元素分别写在 4 个格子中，并罗列出这 4 个元素相关联的与产品有关的环境因素，最后投票选出 3~5 个点子作为 PEST 分析的结果。注意事项：1）除了 PEST 的分析框架，还有其他宏观环境的分析框架，如 PESTLE（增加了法律、环境）、DEPEST（增加了人口统计学、生态学）。可根据产品特性来选择最合适的2）宏观环境随时都会发生变化，PEST 的分析也要及时更新8. SWOT 分析法难度指数：适用场景：企业战略分析、竞争对手分析SWOT 分析法是将对企业内外部条件各方面内容进行综合和概括，进而分析它的优劣势、面临的机会和威胁。通过 SWOT 分析，可以帮助企业把资源和行动聚集在自己的强项和有最多机会的地方；并让企业的战略变得明朗。这种方法先分析产品相对于竞品的优势（S）、劣势（W），再分析产品面临的外部机会（O）与威胁（T），将外部机会和威胁与产品内部的优势劣势进行匹配，形成竞争策略与行动计划的方案。注意事项：1）优势与劣势是内部因素，机会与威胁是外部因素2）优势与劣势一定是跟竞品比较后得出的，必须客观3）所列出的要素要与此次分析的目标相关，每种要素的数量最好控制在 5 个以内温馨小贴士1. 有明确的目标有明确目标是竞品分析的基础，关系到后面整个流程到分析方向的正确，不会跑偏。竞品分析做的好不好，主要就是取决于能不能达到竞品分析的目标，解决了该问题。在制定目标到时候，还不宜把目标设定的过大，导致支线过多，时间过长，结论过散，不便后期的策略制定。2. 长期观察记录任何竞品分析都不可能是静态的/一次性的，整个市场在变动，产品在不停的迭代发展，你的分析也应该⻓期保持更新。推荐 2 个小方法动态跟踪：团队组织每周/月对竞品的改变进行记录，并与团队进行共晒，随时了解竞品的变化。版本库：对竞品的每个大版本变化进行截图保存，整理成文档，找到竞品各版本的发展规律，从而推测竞品下一步的行动计划和策略。3. 新产品的分析要全面无论你是新接手一个产品，还是做一个全新的产品，都建议你可以对其竞品做一个全面的分析，这样可以让你无论是从公司战略层面、用户需求还是产品结构、用户体验上都不会有大的偏颇，能提出合适的解决方案。分析的内容大致有：1. 商业背景（公司背景、融资、公司信息、盈利模式、产品数据…）2. 用户路径（主流程）3. 产品分析（核心路径、核心功能、设计细节…）4. 视觉分析（形、色、字、质、构、设计亮点）5. 用户评价最后，分享迈克尔·波特的一句话 “如果你所做的一切都与你的竞争对手本质上是一样的，那么你就不太可能成功。”参考文献：《有效竞品分析》–张在旺竞品分析别乱套模板！我总结了这4个关键点竞品分析，成本低又容易实施，可能是大家日常工作中最常见的调研分析方法了。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/competitive-analysis-guide
蝙蝠 图标 椭圆 编者按：这篇文章来自英国资深设计师 Dmitry Novikov，他是著名 Mac 管理类工具 CleanMyMac X 背后的视觉和体验设计师，他将设计的过程和想法发布到他自己的 Behance 当中：CleanMyMac 可能是 Mac 平台上最常用的 APP 之一，你之前可能在很多地方听到或者看到过这个产品。很幸运我有机会能和 MacPaw 团队合作，共同完成产品的设计。在这个过程中，我受益良多。一方面，作为一个系统管理和优化工具，MacPaw 的团队有着超强的执行力和开发能力，这使得他们是非常好的合作对象。另一方面，CleanMyMac X 内部包含有很多不同的功能组件，它们需要以各种各样的方式协同合作，这对我而言也是一个新鲜的设计过程。我注意到，当我们使用造型不完美的对象更加令人愉悦。无菌的空间和完美的物品，甚至可能会让人产生失真感和排斥感，我们会非常小心，害怕会破坏这种完美的状态。制作一个被调教到完美的界面并不容易，不过想要赋予界面以自然感，则是更高的挑战。由于这个应用当中大量的地方需要用到超椭圆，而这些元素最终都是要转化成为代码的，而这才是整个项目中最无法忽略的一项挑战。注释：超椭圆，又因 Gabriel Lamé 而被命名为 Lamé 曲线，是一种类似椭圆的封闭曲线，保留了半长轴和半短轴的几何特征，并围绕它们对称，但整体形状不同。在笛卡尔坐标系中，曲线上所有点 ( x , y ) 的集合满足方程：其中n、a和b是正数，竖线 | | 数字周围表示数字的绝对值。让整个应用的主界面具有自我描述性是非常重要的，各个分支应用的图标和名称理应清晰地传达含义，并不完全对称的「Scan」扫描按钮超出了 UI 界面的范畴，可以快速的吸引用户的注意力。CleanMyMac X 专注于 3 个核心要素：清理、保护和速度。在设计过程中，我们为每个模块设计了大量的图标，有趣的的是，有很多图标和 UI 元素是半透明的，结合动画来呈现的时候，这些图标元素有清晰的淡入淡出的效果，这些超大的图标有一部分是和插画师 Alexander Ageev 合作来完成的。在设计过程中，我还为各个不同的模块使用了不同的渐变背景，来方便用户对于不同的模块予以区分。同时，我们还创建了许多极具创新性的产品原型，并将它们落地到实际的产品当中去，比如可视化地帮你查看 Mac 存储空间的「空间透镜」功能：此外，还考虑到日常使用场景，我还增加了一个位于顶部菜单栏的快速下拉菜单，方便用户无需打开程序直接调用功能：得益于团队协作和强大的开发能力，CleanMyMac X 获得了 iF 和 2020 年红点奖。延伸阅读：960 万张图只选一张！Netflix 的海量封面图是怎么设计出来的？前几年，基于深度学习的设计系统「鹿班」问世，关于 AI 驱动型的工具是否会革掉设计师的命的讨论甚嚣尘上，如今这个场景依然历历在目。阅读文章 > 深扒！连拜登团队都在用的Figma是如何成长起来的？相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿，经过多轮文章和视频的洗礼，这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。阅读文章 > 电影设计美学！封神的诺兰版《蝙蝠侠》里，导演亲手捏出了蝙蝠车诺兰的蝙蝠侠三部曲中的蝙蝠车 Tumbler 可能是蝙蝠车历史上最没蝙蝠特征的蝙蝠车。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/cleanmymac-x-design
组件 状态 用户 大家好，我是 Clippp，今天为大家分享的是「组件设计」。现在有很多成熟的组件库，能为设计的规范性带来更大的便利。但作为设计师，不仅仅需要了解每个组件的样子、用在哪些地方，更需要清楚地知道组件的本质，即组件的形状、行为、状态等内在属性和设计细节，才能更深层地掌握组件设计。组件的五种属性想要全面了解并学习组件，首先要搞清楚组件具备的属性：作用：定义组件的用途和作用，明白组件用来做什么的。形状：不同形状的组件对产品、对用户分别有哪些作用。行为：通过用户点击或触摸等动作定义交互行为。状态：定义并告知用户当前的状态。语境：根据组件所属的场景考虑组件不同的用途。1. 形状通过形状的差异，我们能快速辨别不同类型的组件。在设计中，通常采用「文字与图形」相结合的形式来定义组件的形状。在设计组件时，要将形状、颜色、图标和文字等视觉元素组合在一起，并合理安排组件的层级结构。例如一个点赞按钮的设计，看起来很简单，但是如果我们结合不同的使用场景和吸引用户注意力的程度去考虑，一个点赞的组件就可以分为下面 6 种甚至更多的形状。所以在设计时，要充分地考虑使用场景和诉求，并对组件的形状有清晰的认知，在接下来的设计中需要哪种形状的组件直接对号入座，整个设计过程就会变得很明确。2. 行为行为和交互逻辑以及业务逻辑相关，会告诉用户操作后的结果。用来告知用户触发组件时的即时反馈，或者组件当前处于什么状态。3. 状态通过组件状态的变化可以告诉用户当前在进行哪一步操作，有助于用户了解组件当前的情况。常见的组件状态包括：正常状态、聚焦状态、悬停状态、激活状态、加载状态、禁用状态。正常状态(Normal)：是组件最常规的状态，也是设计师首先设计的状态，表示这是用户可以交互的元素。聚焦状态(Focus)：多用在电脑端中，表示元素已被选中。比如在填写表单时，点击键盘上的 tab 键，电脑的光标会切换到下一栏，下一栏的输入框出现聚焦状态。悬停状态(Hover)：当鼠标悬停在元素上时，元素会有状态的上的变化。另外，在移动端和 Pad 端上的组件不需要悬停状态。激活状态 (Active)：点击组件时，组件的颜色会变深，同时还会出现内阴影等效果。加载状态(Loading)：表示当前数据仍在加载中，需要等待。禁用状态(Disabled)：组件置灰状态，告知用户当前条件不满足，无法使用。4. 语境组件的用法跟随场景或环境会发生变化。即使是同一个的组件，在不同的使用场景中也可以有不同的使用方法。所有的设计元素都是相对的，它们会根据组件的排版位置、一起使用的其他组件元素以及用户的使用目的等来定义组件的用途。固定/可变：定义大小是可变还是固定。窄/宽：根据空间的宽度定义用途。层级结构：即使是相同的功能也需要根据层级结构定义组件的用法。浮动：定义组件是基于可访问性浮动还是基于滚动移动。组件的三种类型组件的类型大致可以分为三类：导航类（用于导航信息的组件）、输入类（用户输入信息时使用的组件）、信息类（用于向用户传递信息的组件）。1. 导航类组件作为导航提示或者展示信的组件，包括卡片、列表、网格、轮播、选项卡、菜单栏等组件。卡片：容纳信息最常见的方式。列表：用于对同一属性的信息进行排序，以便于识别。网格列表：用于在两列中显示卡片或信息单元。轮播：用于水平滚动而不是垂直滚动。选项卡：用于显示具有不同类型的信息。菜单：用于显示难以用选项卡显示的大量复杂层次结构。2. 输入类组件用于输入信息或做出选择的组件。现在很多组件库中的输入类组件形状都很相似，这样设计的原因是考虑到用户的使用习惯，避免使用让用户感到陌生的组件。复选框：当选择多个元素时使用单选按钮：当只能选择几个元素中的一个时使用文本字段：当用户输入文本信息时使用下拉菜单：打开菜单查看各种信息时使用按钮：用于在各种场景下输入有关用户决策的信息切换开关：用于打开/关闭特定状态3. 信息类组件用来传递信息的组件，根据要输入的信息类型来传达用户的选择。常用的信息类组件包括：指导文字：用于提供指导信息。工具提示：用于展示文字无法传达的内容。吐司提示：轻量级的提示，在提示过后通常会自动消失。警告：用来向用户传达需要清楚了解的重要信息。弹窗：向用户传达需要做出选择的内容。用户引导：用于传达用户不熟悉的页面内容。最后以上就是组件的属性和类型的解析，希望通过这些内容能帮助你对组件有更多的认识和思考。「组件系列」的其他文章，近期也会不断更新，欢迎大家关注如何构建维护设计组件库？我总结了这6个方法！原文引自 medium 上的一篇文章 Keeping Things Organized。阅读文章 > 欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/component-design-details
插画 画师 人物 本文推荐了 10个 Q 版风格的插画师，想学这类风格的设计师可以多关注下。往期回顾：这5个顶尖插画师的线稿作品，是我每日学习的源泉！关注优秀插画师，学习借鉴其绘画技巧是插画进阶必不可少的过程。阅读文章 > 这 5 位优秀的扁平风插画艺术家，是我每日学习的源泉！大家好，我是和你们聊设计的花生~之前有和大家聊到矢量扁平风插画在设计领域的应用越来越广泛，并且逐渐规范化，这表明这种插画风格将成为一种稳定的应用风格。阅读文章 > 注：文章推荐的插画师大部分来自 Instagram，访问需要搭梯子。cysketchhttps://instagram.com/cysketch店铺类，空间类的插画居多，是一种饱和度偏高的灰调色彩。光影的处理非常棒。dumplingcrystalhttps://instagram.com/dumplingcrystal人物居多，会搭配些植物，场景比较简单。画面色彩基本为暖色系，画人物植物可以参考哦～周小馋https://weibo.com/u/1239351665萌系画风，Q版人物居多，会搭配一点小动物，小场景。色彩暖灰调居多。想学这类Q萌插画的，可以关注我今晚的免费公开课哦，会有实操案例：报名请扫描下方二维码入群 ：phoebdrawshttps://instagram.com/phoebdraws人物植物场景都有～还有很多超可爱的简笔小物件。是一种暖紫灰调的色彩。etti_x.xhttps://instagram.com/etti_x.x专门画Q版小人的，有各种动作和表情，也会搭配一些小场景。nang_nang_studiohttps://instagram.com/nang_nang_studio专门画小猫咪的，有超多猫咪的动作可以学习～shikarunekohttps://instagram.com/shikaruneko也是以猫咪为主角的插画博主，暖暖灰调棕色系～lobomaravilhahttps://instagram.com/lobomaravilha以女孩为主，搭配可爱的场景，色彩也很美丽～allegraphichttps://instagram.com/allegraphic扁平化风格的人物插画，色块和线条的结合。浓郁的高饱和紫色系色彩。tinysnailshttps://instagram.com/tinysnails剪纸风的感觉，人物和动物都有。dango_lingohttps://instagram.com/dango_lingo可可爱爱的小熊，还有很多的周边贴纸。本篇来源：优设网原文地址：https://www.uisdc.com/10-illustrator
视觉 原则 内容 B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。格式塔主要包括 7 个基本原则：用超多案例，帮你学会经典格式塔理论的7个视觉原则格式塔理论为界面设计准则提供的相关的基础理论和原理支撑，一起来了解下吧！阅读文章 > 今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？接近性原则我们先看 2 张截图，分别是不同分辨率下的界面效果。可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。相似性原则相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。闭合性原则IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。连续性原则用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。简单对称原则通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。主体与背景原则主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。共同命运原则共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。总结虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。今天的分享就到这里了。如果有更好的案例，欢迎评论区留言分享给大家~近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/apply-gestalt-theory-to-product
图标 风格 质感 金刚区作为产品功能架构重要的组成部分，是设计师重点发挥的区域，也是风格切换最为活跃的。而金刚区图标是最重要的表现对象，设计师在图标设计上面耗费心力，出现了丰富多样的视觉表现风格。体验了众多产品之后，黑马哥为大家精选了金刚区图标设计最突出的 10 个风格，通过这些案例带给大家感官体验层面的更多灵感启发。晶白风格的扁平突破晶白风格是通过白色质感来实现的，通过对图标元素进行透明度变化、投影、内阴影、外发光等进行设计，使得更有层次感。相较于扁平化的图标设计来说，晶白风格更有层次感和质感，作为金刚区图标设计运用非常普遍。除了通过白色不透明度渐变来实现以外，也会随着背景或者环境色的变化融入色彩渲染，呈现出更丰富的设计细节。晶白风格图标就是通过两端白色渐变，配合两端颜色不透明度来进行深浅控制，也可以通过内阴影和外发光等来增强质感。众多设计软件都可以实现，灵活性非常高。磨砂玻璃质感的运用磨砂玻璃质感的设计表现是近些年较为流行的设计趋势，被广泛运用到视觉设计的众多领域。在 UI 场景中作为视觉感强化被普遍应用，其中在图标设计上的表现尤为突出，呈现出了众多的优秀案例。金刚区作为产品架构中的重要组成部分，也是更新较为活跃的部分，对于视觉感的要求非常重要。磨砂玻璃质感的图标很多产品都会阶段性使用，也是因为这一类风格具有典型的特点和视觉张力，能够形成比较大的视觉差异，带给用户不错的感官体验。磨砂玻璃质感图标可以通过 Sketch、Figma 等软件的背景模糊功能实现；如果是 PS 和 AI 等没有背景模糊功能的软件，则可以通过模糊度结合剪切蒙版来实现。实现的方法很多，大家可以多多尝试，这是一类比较容易掌握的图标风格。强化图标微质感的深入图标设计从写实到扁平，再到微质感，都在不同的时期进行改变，通过风格的优化避免用户的视觉疲劳。写实类图标视觉疲劳度较大，在年轻化的趋势中显得过于繁琐，而介于写实和扁平之间的微质感被深入探索。微质感的深入可以使得图标风格突出，质感和层次感强化了图标的立体空间感，在整个界面中可以形成视觉差异。可以体现出模块的重要性，也是图标设计感体现的一种方向。通过渐变色、不透明度渐变、投影、内阴影等形成层次变化和光影效果，多图层刻画来强化图标质感和层次感。2.5D 风格的巧妙结合2.5D 也称之为伪三维，在前两年非常流行，作为插画风格延伸出来的，当时 2.5D 插画被普遍运用到众多领域。把一个独立元素作为原子，通过原子的数量分布形成 2.5D 场景。将 2.5D 风格结合到图标设计中，可以使得图标更容易形成立体感，设计师不会受制于透视基础的薄弱。无论是 C 端还是 B 端场景中的金刚区图标都比较适合，很容易基于简单的立体造型上设计出丰富的变化。比如结合玻璃质感、微动效或者其他设计趋势均可，设计的驾驭度很高。2.5D 风格的图标很容易掌握，只要绘制好基础原子部分，就可以演变形成各式各样的 2.5D 造型。可以通过 AI 软件的 3D 功能轻松绘制，大部分场景都是基于立方体、圆柱体等基础造型进行变形。三维的立体感强化三维类的图标设计相较于 2.5D 风格来说，空间感和透视角度更加深入，光影的变化更加丰富。图标设计中的三维立体感强化，对于设计师的要求更高，掌握一个三维软件需要一定的学习成本。随着 C4D 等三维软件的走热，掀起了一股学习热潮，被运用到金刚区图标设计中，带来的视觉效果也是非常不错的。较强的空间立体感和光影效果，在界面中的视觉呈现尤为突出，也能带给用户更好的感官体验。插画风格的简化融入随着用户对于感官体验的升级，风格特征的差异化体验至关重要，而插画风格的融入可以提升图标设计的特征感。插画风格运用到图标设计中，需要做简化处理，可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中，不仅可以使得图标具备差异化的视觉效果，也能烘托出整体设计的质量。通常矢量风格的插画类图标比较常用，由于图标占比限制，不合适表现特别繁琐的插画风格。可以是微场景的插画表现，或者是局部元素的插画表达，这一类图标风格将会在未来被广泛运用，以此来提高图标设计的视觉差异化表达。立足于品牌的图标设计立足于品牌做设计，这是设计师需要深入探索的方向，而金刚区图标设计亦是如此。品牌基因融入到图标设计中，可以辅助突出产品的品牌感，也能形成设计表达的差异化。品牌基因化的图标设计具备一定的特征性，也是视觉差异化的一种形式。通常的做法有将品牌色全部融入图标中，或者品牌色作为图标配色点缀；也可以提取品牌 LOGO 辅助图形形成基因图形，融入到图标造型设计中；也有结合吉祥物来突出品牌感的，融入吉祥物造型、局部图形、轮廓图形等；如果图形角度无法提炼，也有提取品牌文化、服务特征、用户群体特征、行业特征等，从中提炼关联性的图形融入图标设计中，以此来强化品牌感。品牌作为设计的思考起点，不仅可以输出差异化的设计作品，也能串联起整个项目设计的规范。造型叠加丰富色彩搭配如果觉得质感一类图标表现力比较繁琐，但是又不想只是简单的线性或者面性图标，造型叠加和配色叠加形成的图标风格算是介于两者之间的存在。通过图形之间叠加丰富图标造型，叠加部分配色的调节丰富图标色彩搭配，形成的图标风格比较年轻化。视觉效果也是深受年轻用户的喜欢，带来不错的感官体验。这一类风格的图标可以通过布尔运算设计图形部分，颜色的叠加效果可以通过图层样式实现，也有一些是图形分割之后进行分别着色的。通常叠加部分的颜色会往更深的方向延伸，大家可以尝试不同的形式去进行配色，选择符合主题的图标配色效果。动效图标强化局部差异微动效运用到图标设计中尤为普及，特别是在金刚区模块，可以作为突出功能的强化。动效图标已经成为一种独特的表现力，相较于静态来说更有吸引力，也能带给用户更加趣味性的感官体验。在金刚区模块中，动效图标通常是用于区别特殊功能，或者需要重点突出的服务或者主题活动等。不改变整体图标的风格，只是动态和静态的区分，需要个别做动效，形成表现力的差异才能达到重点突出的目的。作为设计师来说，动效也是需要掌握的基础技能，可以提高我们的设计表现力，也能将交互动作表达得更清楚。大厂出品！10个值得学习的微动效案例设计动效在 UI 设计场景中的运用强化了感官层面的体验，也使得交互设计更加易于理解，通过动效辅助功能操作的理解度。阅读文章 > 主题化图标风格普及随着情感化设计的普及，金刚区图标在特定主题节日也会进行氛围强化，主题化图标设计越来越多。比如在春节、中秋节、国庆节、端午节等场景中，根据主题设计图标更能体现我们是有温度的产品。可以是主题元素的融入，或者主题氛围感的渲染，要嘛就是主题文案的融入，形式已经是非常丰富了。虽然不同节日主题效果各有差异，不过这一类主题化的图标设计，已经成为非常普及的风格特征。除了节日主题以外，根据运营需求也会进行主题化强化，众多自定义主题活动也会结合到金刚区图标设计中。这一类视觉表现力比重较大，视觉感统一性较强，带来的视觉张力和感官体验都非常不错。小结金刚区在产品中就像百变金刚一样，随着众多因素而变化，是更新迭代较为活跃的。图标设计的风格也是丰富多样，本文仅是抛砖引玉，总结了 10 个较为流行的图标设计风格或者趋势。希望这些案例总结可以加深大家对于金刚区图标的风格认知，大家也要继续体验探索，总结出更多风格特征，强化我们的图标设计能力。研究微软 Fluent 图标规范后，我总结了这9个知识点！最近我在学习使用 Figma，会在社区查找一些大厂的设计系统文件学习，看到一篇微软 Fluent 系统图标规范文档，还挺详细的。阅读文章 > 6大章节！图标设计基础知识全方位入门指南前言做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/icon-design-6
链接 图表 地图 大家好，我是小六。今天给大家分享在做可视化设计中常用的网站。欢迎小伙伴收藏转发！可视化平台和供应商以下是国内相对比较成熟的平台及可视化供应商，排名不分先后，大家没灵感的时候可以去他们官网去找案例参考1. 数字冰雹网站链接：http://makeie9perfect.digihail.com/case/casesummary.html国内做可视化比较早的一家公司，有十多年可视化经验，积累了大量成熟案例，不过官网只能看缩略图，可以关注他家公众号会有一些案例的视频参考。2. 阿里 Datav网站链接：https://datav.aliyun.com/portal/graphics-engine阿里云可视化平台，把可视化中常用的效果集成为组件库，基于平台拖拖拽拽就能实现不错的效果，涵盖大量行业模板，没灵感的时候可以去参考。3. 光启元网站链接：https://asset.raykite.com/resource/all国内比较好的可视化平台了，里面效果都非常不错，大家可以点击看看里面的模板案例，是个不错的学习通道。4. 图扑软件网站链接：https://www.hightopo.com/demos/index.html国内比较早的做可视化的公司，积累了丰富的案例资源，大家可以访问上面网址去查看相关案例，也是非常不错的找灵感的方法。5. 优诺科技网站链接：https://store.thingjs.com/?t=projects涵盖了一些智慧城市。智慧园区、智慧工厂等案例资源，感兴趣的小伙伴可以去看看。地图资源类1. DATAV 地图选择器网站链接：https://datav.aliyun.com/tools/atlas/index.html可以下载国内任意省市区县的矢量地图下载器，可以基于右侧选项配置按需下载。2. amcharts 地图下载器网站链接：https://www.amcharts.com/svg-maps/?map=worldRussiaSplitWithAntarctica可以下载国外各个国家及世界地图的的矢量地图下载器。3. OopenSstreetMap网站链接：https://www.openstreetmap.org/export#map=15/39.9198/116.4611可以基于浏览器可视区域下载对应的地图高程数据，用 Blender 生成城市模型。4. BIGEMAP 高清地图资源下载站网站链接：http://www.bigemap.com/source/全国各省、市、县、乡镇地图高清卫星地图、电子地图、地形图下载。5. 标准地图服务网站链接：http://bzdt.ch.mnr.gov.cn/标准地图依据中国和世界各国国界线画法标准编制而成，可用于新闻宣传用图、书刊报纸插图、广告展示背景图、工艺品设计底图等，也可作为编制公开版地图的参考底图。社会公众可以免费浏览、下载标准地图，直接使用标准地图时需要标注审图号。目前发布的标准地图包括：中国地图 249 幅，世界地图 79 幅，专题地图 10 幅。可视化图表库1. Echarts 图表库网站链接：https://echarts.apache.org/examples/zh/index.htmlECharts 是一款基于 JavaScript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。2. MAKEAPIE 图表库网站链接：https://www.makeapie.cn/echarts基本涵盖了大多数前端图表效果，样式有点丑，大家可以参照下前端基于三方组件库可实现的程度。3. Highcharts 图表库网站链接：https://www.highcharts.com.cn/demo/highcharts/grid-light线图、饼图、面积图、柱形图、混合图、动态交互图等等各种图表集合4. 花火数图网站链接：https://hanabi.data-viz.cn/templates?lang=zh-CN每个图表都会有详细的解释说明和使用场景，从数据出发，根据要表达的内容故事来选择合适的图表。5. 图之典网站链接：http://tuzhidian.com/简单易用的图表词典，为你的学习和工作提供科学的可视化建议。每个图表都会有详细的定义、用法、案例。3D 模型类1. 魔顿网站链接：http://www.modown.cn/archives/category/c4dmodelC4D 素材集合站。包含：模型、贴图、插件、软件等，资源分为免费和付费资源大家可按需下载。2. 爱给网站链接：https://www.aigei.com/s免费的模型下载站，部分需要 VIP。3. vjshi 素材网站链接：https://www.vjshi.com/3Dmoxing.html专业的视频素材交易平台，里面大部分资源都收费，包含视频为主，会有 ae、pr、模型等源文件，是个不错的效果参考站。4. vectary 在线建模网站链接：https://www.vectary.com/Vectary 一款无需下载软件，即可在线实现 3D 建模设计神器，提供免费场景、模型和材质库，无需从头开始或花费很长时间建造模型，加快 3D 设计速度。一个挺有意思的网站。5. FREE3D网站链接：https://free3d.com/TF3DM 拥有 15000+三维模型，各种格式的 BLENDER、OBJ、3DS、C4D、MAX、MAYA等，可以完全免费下载。今天的分享就到这了，后面会陆续更新在工作中比较常用的一些网站资源，敬请期待！可视化神器第二弹！一秒生成三维饼图的免费工具NB PIE大家好，我是灰色执照~ 很开心又和大家见面了。阅读文章 > 欢迎关注作者微信公众号：「小六可视化设计」本篇来源：优设网原文地址：https://www.uisdc.com/visual-web-2
素材 网站 格式 大家好，我是和你们聊设计的花生~今天为大家推荐一个免费开源的素材网站 SVG Silh，上面有非常多高质量的剪影及写实线条风的素材，而且提供 SVG 的下载格式，方便我们在设计中进行再次编辑，一起来看看吧~「网站直达」 https://svgsilh.com/ ，网站首页看起来比较简单，但是素材非常实用。SVG Silh 上有大量矢量剪影素材，种类齐全，数量丰富。设计中常用的人物、动物、节日、建筑、边框、勋章等素材都有提供。网站给出的素材分类非常细致，我们也可以通过顶端的搜索框进行相关搜索。网站素材的一大亮点就是有很多高质量的写实线条风素材，尤其是动物和植物类的。这类素材适合用在海报或者包装中作为装饰，在国内的网站上下载都是需付费的，但是在 SVG Silh 上不仅能免费下载，还提供可编辑的 SVG 格式。素材详情页 SVG Silh 内有各种格式的下载链接SVG Silh 上的素材提供 SVG 和透明底 PNG 两种格式。SVG 格式下载后可以拖进 Ai 中再次编辑，PNG 格式有 512px 和 1024px 两种有尺寸（宽度）。素材详情页内有各种格式的下载连接SVG Silh 还有一个功能就是，可以通过网站首页顶部的颜色块，直接修改站内所有素材的颜色，下载后直接使用。通过色块将网站内素材的颜色都改成了绿色以上就是今天的推荐，再为大家总结一下 SVG Silh 素材网站的优点：海量矢量素材，种类丰富类型齐全高质量写实线条风素材，海报、包装设计必备提供 SVG 及 PNG 两种格式下载，还可预设素材颜色想获得更多免费的素材资源，可以看这里免费可商用！图标、插画和图库应有尽有的素材站「Reshot」本文要推荐的「Reshot」是一个整合、收录三大类型素材免费图库，网站提供超过 40000 个 SVG 免费图标、超过 1500 个插图素材和超过 25000 张相片，这个网站最大特色是素材都能实时下载并适用于商业用途，无需付费，使用时也不用标记出处来源。阅读文章 > 免费可商用！超过 500 个线性图标打包下载的「Lineicons」Lineicons 是一套收录超过 5000 种图标的合集，主要设计风格为手工制作线条图标，适合使用于各种现代化用户界面，例如网页、桌面软件等等，对于设计师或开发项目来说非常有用。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/svg-silh
音效 都有 网站 今天要介绍的「効果音ラボ」（Sound Effect Lab）是一个日本免费音效素材网站，提供各种有趣的效果音让使用者在线预览播放、免费下载！从网站分类会看到各种效果类型，像是游戏战斗音效、表演或动画、人声、生活中会出现的声音、交通工具、环境音、操作系统按键声音和动植物大自然声音，虽然是日文网站，操作上并不会太困难，也可搭配浏览器的网页翻译功能使用。网站中收录的所有音效素材都是由网站管理员录制，有些配音员只有录制人声部分，音效的版权归属仍属于网站，每个音效都有网页播放预览功能，也都有标题和简短说明，需要时只要点选后方的下载按钮就能保存 Mp3 格式。至于最重要的使用规范，从「効果音ラボ」下载的音效在使用时无需向站方取得授权，不用标示出处来源，音效可提供个人、企业或公共机构免费使用，亦可修改、编辑或是转换为其他格式，但要注意的是禁止将音效使用在成人作品、违反公共秩序或犯罪行为，也不可将音效再次提供给其他人下载，如果是使用在影片制作（例如 YouTube 影片）也没问题。効果音ラボ（Sound Effect Lab）网站链接：https://soundeffect-lab.info/使用教学打开 Sound Effect Lab 网站，从上方选单点选要浏览的音效素材分类，其实网站对于效果音的分类相当清楚易懂，单从汉字来看也大略可以猜到是什么样的音效类型。每个音效类别都有各种声音标题和简单介绍，像是表演的各种乐器声音，也有动画或游戏出现的卡通式音效，点选标题左侧「播放」可直接在浏览器试听。另一个人声的音效分类，会依照不同的角色、年龄设定，录制一些像是 RPG 游戏会说的话，每个类别都有标示声优，听起来很热血很有趣，不过只有日文发音，大家可以去听听看。生活中会出现的各种环境音，也可以在「効果音ラボ」找到，如果不知道每个标题代表的意思，很简单只要点选播放就好，直接用听的最简单。当你找到想用的音效时，点选后方的「DL」就能将素材下载为 Mp3 格式保存。值得一试的三个理由：1. 「効果音ラボ」是一个日本免费音效网站，提供各种效果音素材下载2. 每个音效都有网页播放预览功能，点选就能下载为 Mp3 格式3. 不用标示出处来源，音效可提供个人、企业或公共机构免费使用免费可商用！提供超多风格音乐/音效素材下载的「Sampld」本文要介绍的「Sampld」是一个免费下载、分享高音质免版权音乐音效平台，开发者考虑到当今社群媒体、短影片流行（像是 TikTok、Instagram 和 YouTube），希望提供让每个人都能轻松搜索并下载优质音乐素材的网站，以便在制作影片时作为背景音乐使用。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/sound-effect-lab
网页设计 互联网 美国 20 世纪末到 21 世纪开始，宣传品牌与产品的阵地不再局限于印刷品，电视、电台及现场活动，而是出现了网站，网站可以链接更多陌生人，而且没有时空限制。1997 年的谷歌网站美国最火的设计风格只要有人将资料放到网上，远在日本的一名中学生都可以去学习了解，所以也打破了过去信息差的优势。本回我们要跟大家聊聊网页设计的发展，但在展开内容前，要搞清楚一个问题，就是网页设计属于平面设计吗？国内早在差不多 20 年前，建站公司就开始独立存在，所以这个问题蛮有争议，尤其是 UI 设计也很成熟之后，大家更愿意认为此学科是独立的。中国建于 1994 年的第一个网页，主要对外沟通平面设计的定义不管怎么粉饰，简单而言就是：以某种目的，将文字、图像、图形安排在一起。网页设计也是如此，唯一区别是网页具有动态，但这种动态属于若干个静态设定的切换关系，其关键帧也是平面设计。2003 年时候的淘宝网我在国内蛮早就从事网页设计工作，早年甚至可以自己独立完成网站，除了页面设计，还包括套 ASP 程序（Active Server Pages 动态服务器页面），用 table 布局前端等，当然这些技术如今早已过时。12 年前史太浓独立完成的网站因此这段历史我就是参与者之一，所以本回不仅是对搜集资料的剪裁分析，还会结合不少自身经历体验跟大家分享。首先我们来简单回顾下互联网的发展与网页设计的演变。国际互联网络与超级媒体互联网发展到如今已经像空气一样存在，断网已经如同缺氧那么严重，而互联网的诞生最初跟两件事情相关。第一件大家也许比较熟悉，就是在 20 世纪 50 年代末美国国防部高级研究项目总署（the United States Department of Defense，Advanced ResearchProjects Agency，简称 ARPA）成立了。美国国防部高级研究项目总署 logo其成立的根本原因是冷战背景下，苏联不但先于美国在 1957 年将卫星送上太空，而且世界第一枚多级远程弹道火箭发射也试验成功，因此苏联宣称可以将核弹送往地球任何地区。这对美国而言实在太吓人，所以 ARPA 是一个专门研究国防技术的“事业部”，聚合美国当时最牛的几百位科学家，研究如何将最先进技术应用到美国国防。人类第一个卫星由苏联在 1957 年发射由于这些科学家当时分散于全国各地，因为如此厉害的科学家肯定本身有重要事务，而不是放着随传随到，因此大伙无法专门聚在一起专门干这事，而是远程协作，所以就需要一个有效的远程沟通工具。这个工具不能只局限于语言声音，还要做到资源共享，更关键的是要高效安全，信息不可被盗取，当时负责研究此事的人是麻省理工科学家约翰·利克利德(John Licklider)。麻省理工科学家约翰·利克利德 此处省略一堆过程与专业技术术语，反正如此这般，利克利德因为 ARPA 组织这个沟通交接需求无意中发明出“国际互联网网络”（the World Wide Web）。互联网时代开启事后证明，国不国防是一回事，这才是他们最伟大的发明。这种技术能做到资源共享与防止盗取的一个重要原因是可以将信息分解成“数据包”，将他们发送到目的地后可以重新组装，也就是“分组路由”的雏形。大家了解到这个程度就可以了，再往深里说意义不大，况且我也说不清楚，而时间很快去到 1987 年，这是第二件事情，这一年苹果电脑公司向外界报道了一款可在网络上寻找资料的软件，名为“超级文件”（Hypertext）。苹果 1987 年的“超级文件”软件比如在电脑上打“设计史太浓”就可以将当时整个网络与此相关的文字内容集中起来（当时网络上的内容其实非常有限），等于是谷歌百度的前身了。后来这个软件进化为“超级媒体”（Hypermedia），除了可以检索文字，还可以找到图形、声音、电影及电视图像。苹果软件“超级媒体”软件再然后，苹果公司将这种技术跟日本索尼公司发明的 CD-ROM（compact disc read only memory，于 1982 年发明）进行结合，变成“互动光盘”，这种光盘就等于是如今网站的鼻祖版本了。在大致容量 600MGB 的 CD 中，苹果公司的工作人员往里面塞进了文字、图形、动画，而且形成一个复杂的索引架构。CD-ROM 中的互动界面 这样一来就形成一个灵活且可互动的内容库，大家可以根据需要选取想看的部分，有首页、二级栏目、三级栏目、内容详情页等。在此过程中还发明设计出一些后来常见的网站架构逻辑，比如“平行文本”、“多层”“矩阵”“网络系统”等，这里作很简单的介绍：平行文本就是可以在看一篇文字时候可一边看到它相关的摘要跟缩写，这等于如今的鼠标经过效果。网页中的“鼠标经过”效果多层就是看一个内容的时候可以看到其它相关部分，等于如今网站中的“相关推荐”。网页中的“相关推荐”效果矩阵就是将资料布局到一个网格中方便大家查询，等于现在的产品系统，新闻系统一类。网页中的“产品系统”效果网络系统就是可以联系外部信息，其实就等于友情链接一类了。当时间去到 1991 年，美国政府开始投入资金将“互联网”引入公共学校，而经过 6 年，世界上就有 3000 万个网络用户，2000 年左右，美国就有三分之一的家庭实现了联网。有流量就有商机，于是就有人将“互动光盘”这样的呈现方式搬到互联网上变成网站，变成一种宣传展示的渠道，不亦乐乎。90 年代可口可乐的官网所以最初的“互动光盘”设计其实就等于第一代网页设计。网页设计的高速发展1994 年时候，中国有个人因为公务出差去美国见证过互联网的神奇，回国之后辞职，在 1998 年创立了一个如今市值 1.8 万亿的公司—阿里巴巴，这人就是马云。阿里巴巴早期的网页设计样式20 世纪 90 年代恰好是网站建设数量急剧暴增的时候，充满了商机，大家可以理解为近几年短视频暴增一样，根据回顾统计，在 1997 年时候仅仅一年美国本土就新增了 80 万个新网页。所以用“网页”一词是因为最初蛮多网站都是静态，网站后台是后来慢慢才发展形成。1997 年时候的麦当劳网站设计但网页设计最初的暴增还没有直接为平面设计师创造岗位，因为第一代网页设计师其实大部分由程序员转型而来。后来不断发展竞争升级才将程序、前端、网页设计及推广优化这样的岗位分来，以便有更专业的表现。我在 2010 年时候开始从事网页设计，恰好是一个将网站建设不同岗位独立出来的时代。当时我所在公司中企动力属于国内最大型建站公司，大部分老同事都曾经是程序前端设计甚至推广这样一条龙为客户提供服务。史太浓在 2010 年前后的网页设计他们本质上就是从一名开发人员入行，所以他们会从实现效果端来规划设计，跟后来网页设计岗独立后完全不同。蛮多网页设计师其实根本不管程序实现问题，也因此产生出更多更好的视觉效果，反推程序开发与前端制作的进步。当时在公司经常见到的就是网页设计跟前端或者开发同事“干架”，争论要点就是很多效果程序根本做不出来。史太浓在 2010 年前后的网页设计这样的事情其实一直在全世界发生，所以网站制作技术也是以飞一般的速度在发展。比如我刚刚学会 Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起来，而程序开发端则是 asp 到 asp·net 到 php 到 java 等不同开发语言在不断进化。史太浓在 2010 年前后的网页设计这样的变化结果就是不断优化网页设计的表现效果。那时候我们往往在掌握一门自认为很牛的必杀技后不到两年就也许会过时，最典型例子莫过于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因为人才稀缺，收入可以是我们的 2-3 倍，那时候最流行就是用 flash 做所谓的“体验馆”。全 Flash 网站“体验馆”的大致效果就是能在网站场景中做一些换部件，换颜色，或者点击指引箭头切换画面等操作。印象中当时有一个奢侈品平台站就是纯 flash 网站，开发制作费用高达 300 多万。但好景不长，因为智能手机的崛起与 4G 通信技术的发展，互联网的主阵地慢慢往移动端迁移，而智能手机中的浏览器是明确不支持 flash 组件的。所以很快 flash 就跌落神坛，而我们这一代网页设计从业者可以说见证了全过程。全 Flash 网站当时身边就有同事因为精通 flash 被挖去甲方企业开发纯 flash 的眼镜商城，据说后来项目就没发展起来。说到商城，网页设计还有一个重要的主题变化，就是从企业网站到平台网站到电子商城再到手机网站，App 应用，公众号，小程序这样的不断切换。到了移动端其实网页设计就被“UI 设计”（User Interface 用户界面）这样更专业化的称谓取代。史太浓 2013 年前后的 UI 设计因为革命性的屏幕触摸技术的诞生，很多网站本身就可以通过触屏控制，所以从定义上来说，UI 设计可以说包含了网页设计。史太浓 2013 年前后的网页设计随着移动互联网的不断发展其实也拔高了 UI 设计门槛，因为要考虑很多交互体验问题与技术规格标准，有点像当时乌尔姆学院做产品设计那一套，有很多理科属性的知识融入进来。所以网页设计经过仅仅 30 年的发展，就走向细分领域的拆解，分裂出企业网站设计（偏向品牌与广告）、电商设计（偏向营销）跟移动端设计（偏向交互体验）。史太浓 2018 年前后的电商网站设计但不管如何，这个过程中平面设计的本质属性仍然没变，只是要解决的问题更多元化，更具体了。根据历史纪录，美国的设计师杰西卡·哈芳德（JessicaHelfand）是较早以平面设计师身份参与到网页设计中的，比如 90 年代她为美国“发现频道”设计了网站。美国“发现频道”90 年代的网站哈芳德生于 1960 年，目前还活跃于设计圈，她也许是最有资格感叹互联网设计形式剧烈变化的人之一。杰西卡·哈芳德本期内容没有谈及太多具体人物及作品，因为在有限篇幅里本期内容已经高度浓缩，更多是在给大家整理一个框架。关于网页设计发展的经历，也欢迎大家根据自己的体会参与到讨论中，说出你们的故事。本期故事讲到这里，感谢各位，下期再会！如何高效地进行网页设计？重点关注这7个要素大家好，我是 Clippp。阅读文章 > 欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/web-design-history
链接 网站 地图 大家好，我是小六。今天继续给大家分享收藏的网站合集。欢迎小伙伴收藏转发！上期回顾：想快速搞定可视化设计？这20个精选神器收好了！大家好，我是小六。阅读文章 > 三维可视化库绘制库整理了7个基于 web 开发的三维可视化绘制库1. Three.js网站链接：https://threejs.org/Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。网站上有好多 demo 案例大家有时间可以研究下，算是基于 web 实现的天花板效果了。2. Babylon网站链接：https://www.babylonjs.com/community/Babylon 是由开发人员、创作者和艺术家组成的开放、充满活力的社区不断突破 Web 3D 的可能性。虽然官网有点丑，但是里面有大量的三维案例大家可以了解下具体实现的效果。3. Cclayg网站链接：http://examples.claygl.xyz/ClayGL 是一个 WebGL 图形库，用于构建可伸缩的 Web3D 应用程序。里面大量官方示例可以看下效果。4. LumaGL网站链接：https://luma.gl/examples网站略微有些慢，里面也是一些三维的案例。大家有时间可以自取研究下。5. Mars3D网站链接：https://mars3d.cn/example.htmlMars3D 是一款基于 WebGL 技术实现的三维客户端开发平台，支持轻量级高效能 GIS 开发，可快速接入与使用多种 GIS 数据和三维模型，呈现三维空间的可视化。里面有大量类似样例，可以让开发研究下具体实现效果。6. Mapv网站链接：https://maptalks.org/一个用于集成 2D/3D 地图的开源 javascript 库。7. Cesium网站链接：https://cesium.com/use-cases/CesiumJS 是一个开源的 JavaScript 库，用于创建世界级的 3D 球体和地图地图平台大家用过百度、高德、腾讯地图平台的应该都知道平台内地图的参数调整都有一定局限性，只能通过他们提供的选项进行调整，有的地图不可配置就很难受。今天给大家整理了下国外的一些地图平台，有的配置项会多一些相对可控，缺点就是国内楼宇数据没有国内地图的全，大家需要的自取。1. Mapbox网站链接：https://www.mapbox.com/gallery/基于矢量渲染与 webgl 技术，交互、可定制的前端框架。里面有好多的地图样式，可控性较高，缺点就是国内街景视图楼宇的数据较少。2. Snazzy Maps网站链接：https://snazzymaps.com/Snazzy Maps 是一个面向网页设计师和开发者的谷歌地图的不同风格的资源库。地图样式比较丰富，配置项也挺多，大家有时间可以对比下区别。3. OpenLayers网站链接：https://openlayers.org/en/latest/examples/专为 Web GIS 提供的 JavaScript 类库包，用于实现标准格式发布的地图数据访问，可以进去看看样例。4. Mapv网站链接：http://mapv.baidu.com/examples/#baidu-map-point-heatmap-time.htmlMapv 是基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。可视化应用搜集了一些好玩的可视化应用平台站，大家可以点点看看。1. Nullscool Earth网站链接：https://earth.nullschool.net/#current/wind/surface/level该站会计算的风，气候，海洋等气候趋势，数据每隔三小时更新一次。2. Windy网站链接：https://www.windy.com/?37.751,-97.822,5,i:pressure该站统计了全球的实时气候情况，会有气象雷达、卫星云图、风、气压、温度、降水、湿度、PM2.5 等等好多图层展示项配置，大家可以研究研究。3. 地理空间数据云网站链接：http://www.gscloud.cn/home#page1/4全球免费数据，持续更新，国产高分辨率遥感数据，一站尽得。下载:LANDSAT、SENTINEL、MODIS、DEM、NOAA、LUCC…4. WebGL 理论基础网站链接：https://webglfundamentals.org/webgl/lessons/zh_cn/这有一系列教程，从 WebGL 的基本理论讲起。它们不像大多数其他教程那样改编自旧的 OpenGL 文章。它们去旧迎新，丢弃一些过时的思想，让你彻底了解 WebGL 的工作原理。可视化神器第二弹！一秒生成三维饼图的免费工具NB PIE大家好，我是灰色执照~ 很开心又和大家见面了。阅读文章 > 欢迎关注作者微信公众号：「小六可视化设计」本篇来源：优设网原文地址：https://www.uisdc.com/visual-web
飞翔的企鹅
张大湿
在路上
落霞与孤鹜
表哥
