动态 动画 格式 本文将从动态的交付文件、成像原理，以及如何高效的与开发团队沟通等角度来分析动态设计交付，旨在帮助与我们遇到类似问题的团队提供合适的解决方案。前言开始阅读之前，我想让大家先思考两个问题：你平时接触的动态设计需求多吗？碰到动态设计，你都是怎么跟开发团队进行沟通的？带着这两个问题，我们开始今天的主题讨论。首先在目前的体验设计中动态交付的方式主要包含文件式交付、参数式交付两种。文件交付主要是指通过提供动态格式文件的方式来达到预期效果，对于开发者来说，只需要针对性的兼容动态文件的格式及库就可以获得该格式的显示效果，根据不同需求还可以简单的控制动态的播放、入场、退场等基础操作；参数交付主要是对动态运动的文字表述，开发可以根据图文化的表述对动态进行代码还原。动态设计的交付方式就起点设计团队来说，在长期的项目迭代中，我们几乎测试了所有的主流动态图片格式。因此针对不同的格式有一些测评和看法，可以跟大家交流，这些格式有 GIF、WebP、APNG、Lottie、VAP、PAG，我们将结合实际情况，对这些格式做些简单的科普和性能比对。1. GIFGIF 对于互联网来说是一个传播率极高的古董级动态格式，它诞生于 1987 年，即使是最后一个版本也是在 1989 年了，在各大网站上浏览的动态广告、以及与生活息息相关的动态表情包几乎都是 GIF 格式。GIF 在我们使用的所有格式中是压缩效果是最差的，还因为是采用了 8 位色压缩，只能处理 256 种颜色，所以也是所有格式中显示效果最差的。即便如此，GIF 还是存在一些优点的，它较为广阔的传播性让其在各种环境下都有比较不错的兼容性，它的使用性能也是相对稳定的，同时兼容 Android、iOS、Web，并且可实现循环以及首尾帧控制。在起点读书中 GIF 的应用主要集中的 UGC 内容上，例如官方表情包、头像挂件展示等场景均有使用过 GIF 作为主要格式。点娘表情包2. WebPWebP 相对上面的 GIF 要年轻很多，它是谷歌在 2010 年发布，支持库是在 2018 年 4 月发布，我们也是在第一时间在产品中试用了该格式，并获得了不错的体验，截止目前，已有 95.77% 的浏览器支持该格式。WebP 目前支持有损和无损压缩以及动画和 alpha 透明度的图像格式（基于 VP8 视频格式）。WebP 通常比 JPEG、PNG 和 GIF 具有更好的压缩率，并且旨在取代它们。WebP 同时兼容 Android、iOS、Web，并且可实现循环以及首尾帧控制。通过千元机实机测试，WebP 也兼具了较高的稳定性，是比较不错的通用动态格式选择。为了让用户获得更好的视觉感官体验，因此在起点读书中例如挂件、动态卡牌的格式选择上，WebP 是绝佳的通用解决方案。起点头像挂件起点动态卡牌3. APNGAPNG 相对于 WebP 要早出生几年，是基于 PNG 格式扩展的一种动画格式，所以它保留了向下兼容 PNG 的特性，因此当解码器不支持 APNG 时，会默认展示第一帧图像；APNG 拥有 24 位图像和 8 位透明性，相比 GIF 拥有更高的显示效果。目前关于 APNG、WebP、GIF 的测评对比较多，GIF 自不必多说，它早已成了各大主流动态格式测评的计量单位，我们这里只谈 APNG、WebP，从压缩率上来说，APNG 优于 WebP；从兼容性上来说 WebP 的兼容性明显高于 APNG，谷歌从 Chrome 59 开始才支持 APNG，而 WebP 是谷歌的亲儿子，兼容性自不必说，目前安卓兼容无压力，iOS 中部分版本存在兼容问题，但考虑到 iOS 的高版本覆盖率，因此起点在动态格式上选择了 WebP。4. LottieLottie 是 Airbnb 开源的一个面向 iOS、Android、RN 的动画库，能分析 AE 导出的动画 json 文件，客户端通过引入 Lottie 的支持库来解析 json 文件，通过此方法原生 App 就可以像使用静态素材一样来实现出动画效果。一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）大家好，我是彩云。阅读文章 > 要使用 Lottie 需要先通过 bodymovin （AE 插件）将 AE 动画工程文件转换为 json 格式的描述文件。Lottie 负责解析动画的数据，包括动画大小，动画时长，帧率，用到的图片，字体，图层等等信息，最终精准地渲染出动画。Lottie 支持矢量（MG）动画，并最终效果通过解析渲染完成，因此具有比较高的兼容性，并且可以在极小的文件大小下，实现极佳的画质效果，同时兼容 Android、iOS、Web，是目前互联网产品中比较通用的解决方案；并且可以通过解析文件实现循环、首尾帧固定、图层颜色修改等操作。虽然 Lottie 很强大，但因为其实时渲染的特点，因此对内存和设备性能在碰到复杂文件消耗巨大，加上其在动态效果上的支持比较局限，所以 Lottie 仅能解决一些简单到中等的动画问题，对于例如直播间特效、打赏类动画来说，Lottie 则会显得力不从心。5. VAPVAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案，它可以播放带有 Alpha 通道的视频。是一种拟 WebP、APNG 的动画解决方案，与之相比具有压缩率高（素材更小）、硬件解码速度快的优点，比 Lottie 能实现更复杂的动画效果（比如粒子特效）；并且 VAP 可以将自定义的属性合并到动画中。VAP 简单点理解就是将 MP4 (H264) 文件的透明通道与原动画一起导出，然后通过解析合成形成透明动画的显示效果。这种方案占用内存小，性能高，文件体积小，支持效果全，是比较理想的特性动画解决方案。起点卡牌6. PAGPAG 是腾讯自主研发的一个开源项目，它同时支持「矢量预合成」导出和「BMP 预合成」导出两种方式。比Lottie还好用！腾讯新晋免费动效设计神器 PAG在终端 APP 中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。阅读文章 > 矢量预合成导出无法支持所有的 AE 特性，但相对来说还是比 Lottie 支持的格式要多的多，在理想情况下使用矢量预合成可以获得更好的性能和更小的动画文件。BMP 预合成导出模式支持所有 AE 特效，设计师只需要关注视觉效果本身即可，相应的会对设备性能产生一定消耗。BMP 预合成目前支持视频序列帧和位图序列帧两种导出的存储格式，它对位图做了简单的帧间压缩，可比传统的 PNG 序列文件小 50%。视频存储格式帧基于 H264 帧间压缩并补充了透明通道（类似 VAP 的解决方案），相比位图存储格式只有 10% ~ 25% 左右的文件大小。而且在目前的版本迭代中，PAG 还同时支持了「矢量预合成」和「BMP 预合成」混合导出，可以在文件导出效果、性能、体量上做到更优秀的表现。不过虽然 PAG 在效果和压缩上表现优越，但是在遇到大型动画或复杂特效后对设备性能的压力还是巨大的，而且目前仅支持 iOS、Android，Web 支持正在开发中。此时 VAP 可以作为 PAG 的平替。起点票赏目前在起点读书内的各类打赏投票场景，为了更好的展示效果，动效格式都会优先考虑 PAG。动态文件成像原理1. 透明通道序列帧简单来说就是 PNG 序列，但是也有比较高级的表现方法，就是通过帧间压缩来进行图片压缩，可以做到比普通的 PNG 整列更小的体积。2. 视频+透明通道上面也提到了，是将 mp4 视频与相应的 alpha 通道视频叠加后，就可以将原视频表现得带有透明效果。3. 矢量动画形成动画的物体、动作及时间都是通过代码来完成，也因为是纯代码动画，因此可以做到体量极小，性能也是极佳的。4. 图片「渲染」动画指通过 json 格式的描述文件，将指定图片赋予运动、时长、动作，最终通过解析渲染出描述中的动画效果的形式。5. 视频帧混合矢量指将「视频+透明通道」与「矢量动画」混合导出的动画表现形式，既保证了视频的全特效效果，又保留了矢量动画的最佳显示效果，并且没有增加动画文件体积。通过上面的一系列介绍，可以了解到我们在做动态文件交付时，需要综合考虑的因素就较多了，例如不同平台的特性、低版本兼容问题、动态库的适配性等。格式的选择不是一成不变了，为了让用户可以获得更好的互动体验，可以针对性地对不同端的动态格式进行变换。起点在漫长的迭代周期中，在不同版本时期引入过不同的动态文件格式，综合各项性能，目前选用了 PAG 作为我们的客户端主要使用格式，并且在 PAG 的开发过程中，我们也始终与其研发团队保持一定的沟通，帮助我们解决了不少技术难题，就目前来说 PAG 依然是强有力的动态交付解决方案。关于参数交付参数交付的核心在于沟通，而如何正确有效的与开发人员进行沟通就显得至关重要，我们通过下图可以看到一个典型案例。正确的阐述动态设计的关键信息才是有效交流，才能让开发更精准的还原你所要的效果。但现实往往是我们会碰到大量复杂动画，此时用语言来描述动画会显得特别疲软复杂，而如何将这些复杂语言进行图形化的传达，让表达更清晰，就显得至关重要。因此我们综合日常的一些工作经验，建立了图形分段式动态标注法，让动态一目了然。动态标注的本质就是将时间（时间节点）、地点（位置）、人物（物品）、通过「动作」进行呈现就是标注的基本结构了，当然也可以通过此方法来衍生出一些特需标注法。例如在一个复杂的动态设计需求中，涉及到的动画较多，有位移软转场动画、手势操作响应、操作反馈动画、随机动画等。为了让开发实现的效果达到设计预期，使用了图形化标注法，将时间轴、动作、曲线、运动轨迹等进行呈现。关于标注的详情信息，就不再进行详细文字描述了，感兴趣的可以通过大图进行详细了解。看到这里我想有些朋友会产生一些疑惑，为什么都 2022 年了，你还在做动态标注？目前行业中不是有很多动态输出的解决方案吗？Principle、ProtoPie、Origami、Cocos Creator 等等，这些不乏比较高效的解决方案，同时笔者也在设计中或多或少的使用过相关的软件来作为高效解决方案，但如果你想系统性的学习动态图形和动画设计那么 After Effects 是首选，强大的功能，能尽情实现你的动画创意。至于笔者会倾向为动态设计输出标注，有几点我觉得至关重要，一是强化在设计过程中对动态理论的掌握；二是对动态设计进行整理归档，方便为全局动态做统一形成规范；三是在开发过程中可以精准定位问题，并提高还原率，实际项目证明，有标注的动态还原在第一次交付走查时可达到 60%~80%的还原率。结语遇到动态设计需求时，在符合条件（例如实时反馈、聚焦动画、转场动画等）的情况下参数交付是最优的；而有些场景（例如重视觉效果呈现、复杂交互动画、动态展示等）优先使用文件交付。建议的解决方案排序是 PAG＞VAP＞Lottie＞WebP/APNG…，例如在 iOS 平台，所有的 PAG 文件播放都有比较不错的体验，因此我们更建议使用 PAG 交付，而在 Android 端 WebP 的稳定性更好，因此在 Android 更建议使用 WebP，当然在 Web 端依然可以使用 Lottie、WebP 作为平替。无论多简单的动态在需要开发实现时候，都建议进行标注落地，有效的标注可以减少不必要的沟通以及非必要的后期走查反复。关于制作工具，笔者无特殊偏好，常规的动态设计软件都会去接触，如果需要给到一些建议的有条件或想系统性学习动态的可以优先学习 AE，在 B 站上有很多教程，上手需要一点难度，但一劳永逸；如果只想学习并使用 UI 交互类动态，那么 Principle、ProtoPie 是不二选择，甚至 Figma 本身也是不错的解决方案；如果成为全栈设计师是你的梦想，那么 Origami 或许可以为你打开一扇门；如果你想在特效及 3D 动画上有所建树，那么我优先推荐 Blender 作为你的主力工具。最后送大家一首劝学（内卷）诗：三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。参考资料关于 WebP 格式： https://developers.google.com/speed/webpWebP 引文： https://caniuse.com/webpAPNG 制作： https://ezgif.com/apng-makerAPNG 引用： https://juejin.cn/post/6857678436304388104APNG 对比链接： http://littlesvr.ca/apng/gif_apng_webp3.htmlLottie 参考： https://cloud.tencent.com/developer/article/1005896VAP 地址： https://github.com/Tencent/vap/blob/master/Introduction.mdPAG 相关阅读推荐：https://mp.weixin.qq.com/s/a8-yOp8h5LiFGKSdLE_toAPAG 官网： https://pag.io/docs/pag-export.html用起点读书的实战案例，教你从AE制作到落地开发的方案导语动画可以辅助视觉制作焦点，引导注意力的方向，越来越为广大视觉设计师青睐。阅读文章 > 欢迎关注作者的微信公众号：「阅文体验设计YUX」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design-delivery
会员 用户 权益 付费会员对各大平台的都具有重要的意义，付费会员运营和设计需要从用户购买到续费全链路综合分析。付费会员对平台的重要性不言而喻，对于消费者来说，会员的身份也能为自身带来一定的价值体验。从用户购买到续费全链路来看，付费会员流程划分为 5 个节点，文章对各个节点进行了系统分析，并对付费会员的未来发展进行了展望，与大家分享。从京东 PLUS 会员到拼多多省钱月卡、从喜马拉雅 VIP 到马蜂窝金卡 VIP，各行各业的付费会员层出不穷；抑或是公众号打赏、今日头条付费圈子，各种付费机制也在全面开花。在用户增长红利放缓的大背景下，如何实现普通会员转化为付费会员，更好的盘活存量会员的价值，增强会员的忠诚度和粘性，是电商平台重点的发展方向。在这个过程中，需要根据不同阶段的用户心理和需求，打造极致的用户体验，助力付费会员的增长。付费会员的发展1. 付费会员是大势所趋京东作为中国电商平台付费会员“尝鲜者”，自 2015 年 10 月推出 PLUS 会员，目前会员数突破 1500 万。之后各大电商平台纷纷跟进。目前主流的电商平台都推出了自己的付费会员。例如唯品会、考拉海购、苏宁易购、网易严选、小红书、淘宝 88VIP 等。2017 年艾瑞咨询发布的《中国零售业付费会员消费洞察报告》中指出，零售业将迎来付费会员时代。消费者对于个性化、服务体验的需求不断提升，越来越多的消费者开始接受为好的商品和服务付出溢价。数据来源于艾瑞咨询2. 付费会员价值巨大2019 双 11 期间，京东 PLUS 会员们两组数据十分惊人：一位 PLUS 会员单笔消费 46.7 万元，成为京东单笔消费最高的一单；一位 PLUS 会员在 11.11 期间一共下了 246 个订单。这意味着他平均每天在京东下 10 个订单，已经成为名副其实的“爆单王”。京东 PLUS 会员业务负责人孟春慧表示，PLUS 会员体现出了高消费、高活跃、高忠诚的“三高特质”。例如 2019 双 11 期间，京东 PLUS 会员的人均消费达普通用户的 4 倍。总的来说，付费会员的价值有以下 5 个方面：筛选忠实用户，锁定高价值用户付费用户通常是平台的忠实用户和高频消费用户，对平台的价值更大；提高用户活跃，增强用户粘性用户投入成本（付费）后，为了赚回成本，将会把平台作为购物首选，用户消费频率也会增加；降低用户流失率用户付费后，有了一定的沉没成本，离开的成本也会增加；提高用户 ARPU 值用户活跃度提升后，通过各类运营活动和优质的服务体验，用户 ARPU 值也会相应的提升；为相关产品赋能导流对于淘宝、苏宁易购等具有生态体系的平台，付费会员可以赋能同一生态体系下的其他产品。例如淘宝 VIP、引入了旗下饿了么、飞猪相关权益，必然会带动相关产品的流量和转化；付费会员体验维度分析虽然越来越多的消费者开始追求商品和服务的品质，但是付费会员需要通过付费获取相应的价值体验，对于已经习惯了免费模式的消费者而言，还是有一定的挑战的。付费会员模式必须通过极致的服务体验和高性价比，才能对用户产生强烈的吸引力，从而实现较高用户增长和会员续费率。对于价值体验，我认为可以分解为 3 个维度：1. 身份价值主要是彰显付费会员的独特身份，需要从界面展示、商品特权等维度体现付费会员的尊享感和专属感；2. 权益价值付费会员对用户最大的吸引力是可以返利省钱，因此权益价值主要体现在省钱、运费券、会员价等方面；3. 服务价值服务价值更多的是增值权益的使用体验，让用户在整个会员生命周期中，充分享受各种权益带来的快捷和便利，真正做到“省时”、“省心”；付费会员全链路场景分析付费会员的体验需要关注用户的整个生命周期，而不单单是一两个独立的场景。从用户购买到续费的全链路来看，付费会员的流程可以划分为以下几个节点：在不同阶段，用户的需求和心智模型是不同的，只有从用户的实际场景出发，才能更好的为用户服务，提升全链路的用户体验。1. 付费前2018 年，京东大数据研究院发布了《京东 PLUS 会员价值体系研究报告》显示，京东 PLUS 会员的认知渠道主要集中在网站推送及朋友推荐，用户首次购买会员核心是受到较大优惠或免费体验刺激。《报告》显示，省钱是购买京东 PLUS 会员主要考虑因素，其次是服务体验和专属感，高性价比是持续付费的主要驱动。因此在付费前用户核心心智：付出的会员费是否划算；在用户体验设计上，设计策略需要紧紧围绕用户心智，营造“省钱”认知。大额消费返利对于苏宁，京东等家电、3C 电商平台，用户存在大额消费的场景。此时 2%返利或 10 倍返京豆的权益，可以让用户一次性赚回会员费。因此需要强化返利权益的认知，增强付费会员的吸引力。顺便说一下，苏宁易购返利权益名称原来是 2%返云钻，现在变成了最高 20 倍返云钻，应该也是在强化用户对省钱的认知。毕竟 2%和 20 倍给用户的感知差异还是很大的。“省钱”氛围营造普通用户对于自己的常用购物平台，潜意识里会主动了解付费会员权益是否划算。因此电商平台需要在商品页面、购物付款页面，主打“省钱”利益点，引导用户认知付费会员的价值。例如京东在商品详情页的 PLUS 会员开通引导。同时在付费会员介绍页面，需要通过省钱大数据、省钱计算器等，增强付费会员的权益感知。并结合实际的商品优惠，让用户感受到实际的优惠力度。例如京东的省钱攻略，通过实际的商品的优惠价格，带给用户更强烈的省钱认知。同时为了更好的激活存量普通用户，可以在普通会员中筛选等级较高的忠实粉丝，通过更低的开卡费用，激励普通用户转化为付费会员，降低付费会员的获客成本。例如苏宁易购 SUPER 会员，对于 V3、V4 会员会有价格上的优惠，激励普通会员的转化。联名卡激励通过异业合作，借助高频平台促进低频会员的售卖。搭售的模式，让普通用户更容易接受高频平台的会员，提高低频平台会员的转化率。同时搭售的模式提高了低频平台会员的性价比，让用户觉得更加的物超所值。目前各大平台都在开展异业合作。京东 1 月 8 日京东将推出 PLUS 会员年度盛典，带来“买 1 得 18”的超级联名卡等专属福利，可享受爱奇艺、携程、腾讯视频、酷狗音乐、微博、迅雷、学而思等众多会员权益。苏宁也加大了联名卡的投入，先后与腾讯视频、优酷视频、爱奇艺、芒果 TV，咪咕音乐等高频平台合作，推出了联名卡。双 11 期间，实现了新增 SUPER 会员超过百万，这其中联名卡会员功不可没。开卡福利为了让用户增强省钱认知，部分平台加强了开卡付费体验。例如考拉海购，通过“开卡福利”、“先享后付”的方式，降低了用户的转化门槛，增强了用户的“省钱”认知；部分平台采用了免费试用的方式，用户可以试用 30 天，并能够享受一定的权益。短时间的试用体验，促使用户尽可能的完成各项权益的体验，从而让用户更加深入的了解会员权益，增强用户的体验感知。2. 付费中通常对会员价格、权益等内容已经有了足够的认知，并做出了付费决策，用户才会进入付费流程。因此付费流程应当给用户最简单、最明确的交互体验，保证用户快速完成付费流程。在付费流程设计中需要注意以下要点：灵活性尽可能的多的支持多种支付方式。例如最常用的支付宝、微信等，减少用户因为支付方式的缺失放弃会员购买。简单的信息内容给出必要的关键信息，例如付费金额等，减少付费流程中的冗余信息。将复杂和详细的信息前置，避免在付费阶段，出现新的信息或者不一致的信息，导致付费流程中断。付费成功后的仪式感用户支付完成后，通过富有仪式感的界面展示，强化用户对身份的认知，给用户强烈的“买的值”的感觉。3. 付费后完成付费后，用户会获得付费会员的身份后，会直接进入付费会员频道页。第一次的“见面”印象至关重要，需要给用户强烈的尊享感和专属感；视觉呈现在头像标识、界面配色等方面给付费用户带来与众不同的专属感。例如淘宝 88VIP 会员与普通用户界面设计差异明显，展示了醒目的身份特征；沉浸式体验沉浸式的界面设计可以很好的增强页面的尊贵感；交互设计电商平台始终以转化为目标，用户在付费后，第一时间也会以购物为目的。因此在页面展示逻辑时，可以增加购物券和会员商品，激励用户转化。同时增加权益快捷导航，方便用户便捷使用和查看权益详情。4. 日常体验付费用户本身都是对商品和服务品质有较高追求的用户，加之已经付出费用（会员费），对服务的质量和体验要求会成倍放大。小的服务问题，都可能让用户产生不爽的感觉，继而影响用户后期续费。总的来说，在整个付费会员期间，需要帮助用户建立“买的值，用的爽”的体验认知。买的值主要是“省钱”感知，通过实在的返利记录，运费券权益等，让用户获得物超所值的体验，满足用户的基本的需求。另外专属的会员价商品、专享的购物券、会员日活动，都可以很好的让用户获得“买的值”的使用体验。用的爽主要增值权益带来的使用体验。例如专属的客户经理、退还无忧等软性服务体验，虽然用户不一定能一直使用，但是关键时刻带给用户的服务体验，可以提升用户对会员价值、甚至是平台的满意度。惊喜体验在既定的付费会员权益基础上，凭借平台优势，通过商品或者其他的形式给用户带来一些小惊喜，营造更好的服务体验。例如 2019 年京东专门推出了 PLUS 会员年度账单。让用户感受到了独特的专属体验。而苏宁易购凭借飞天茅台的专有供应平台优势，为 SUPER 会员提供了专享的抢购机会，虽然不是所有 SUPER 用户的消费需求，但是独特的身份特权带来了独一无二的尊享感和惊喜体验。5. 临期续费续费是付费会员的重要运营指标，较高的续费率可以很好的降低获客成本。续费更多的是依靠平时对会员的各项服务体验和运营活动。但是临期阶段的设计策略，可以强化用户对付费会员权益的感知，提升用户的续费概率。因此可以针对用户的关注点，做出相应的设计策略。主要有以下几个方面；关键权益数据的复盘和总结主要是省钱数据。用户希望了解在会员周期内，到底省了多少钱，有没有赚回会费等。另外可以通过权益使用数据，唤起用户的权益使用记忆，增强情感体验。例如退换无忧、专属客户经理等权益的使用情况；续费优惠激励目前多数电商平台，对于老用户采用一定的续费优惠，或者续费礼，进一步加强用户对产品性价比的认知，激励用户完成续费。未来发展1. 权益套餐制参考运营商套餐制，用户可以根据自己的消费习惯和使用体验，进行自我组合和定制。不同的权益套餐对应不同的会员费，满足不同用户的权益需求。2. 场景化服务随着 80、90、00 一代逐步成为线上消费主力军，家庭消费正逐渐成为新的重要场景。近期京东推出了“家庭号”的服务模式。付费会员也可以考虑通过建立家庭共同消费模式，丰富会员的消费场景和权益，提升用户体验。3. 专属感的打造目前各个平台付费会员体系中专属感，更多的是通过优惠券和会员价商品体现。在商品购买上，缺少会员专区和购买特权，如果能够打造出会员专享商品和商品专享购买特权，可以更好的增强用户的身份价值，营造付费会员的专属感。总结付费会员是一个体系化的产品，需要多部门协同合作。必须始终围绕用户的需求打造极致的用户体验，建立与普通用户差异化的“专属感”，才能真正的打动用户，获得用户的认可。同时付费会员需要时刻关注用户的场景变化，建立场景化的运营机制和权益体系，围绕省钱和转化的目标，打造简单的使用体验，才能最大化的吸引用户转化，从而实现用户的增长。让1500万人真香的KFC付费会员卡，有哪些值得学习的设计点？据悉，截至2019年12月31日，肯德基会员数量超过2.15亿，必胜客会员数量超过7000万，相比去年同比增长35%和33%。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/e-commerce-paid-membership-analysis
元素 在线 模型 这个 3D 元素可以转个方向换个颜色吗？当然可以！大家好我是花生~ 提起有关设计的小笑话，比较经典的肯定有那个“大象转身”，我看一次笑一次，笑过之后又有一些淡淡的无奈，毕竟受设计素材限制是每个设计师都遇到过的难题。比如大家手上肯定下载了很多 3D 元素资源，但是在实际运用起来的时候，却因元素的角度、颜色等不能契合设计要求而只得放弃。这是使用下载好的 3D 元素的局限，但好像也没有什么办法。最近我发现一个比较有意思的网站 VERTEX，它能在线编辑 3D 元素，随意调整 3D 元素方向，并修改颜色和材质，能很好的解决我们用 3D 素材时的那些问题。而且站内素材都是免费可商用的，今天就推荐给有需要的小伙伴。可在线编辑 3D 元素的网站 VERTEXVERTEX 是一个支持在线调整 3D 元素的网站，它的开发者是 Vlad Kluev，一名来自莫斯科的设计师和 JavaScript 开放人员，擅长的领域包括用户体验设计、JavaScript、3D、Cinema 4D、Sketch、Figma、Photoshop 等。VERTEX 是他个人开发的一个公益性网站，分享他自己创作的 3D 元素，并通过编程让站内的 3D 元素可以编辑。「高质量模型」VERTEX 内的 3D 元素种类还是比较多的，而且质量很高，模型都非常精致。「角度调整」VERTEX 站内的 3D 模型支持 360无限制角度调整，使用者可以按照自己的需要调整好角度后导出为 PNG。调整时选择坐标上对应的 X、Y、Z 轴拖动即可，坐标开关在画面左上角，需要观察调整结果时可以选择关闭坐标显示。「颜色材质修改」除了可以调整角度，VERTEX 站内的 3D 模型支持按不同部位进行颜色和材质修改。这样的好处就是，对于同一个模型，我们可以通过改变其颜色或者材质，得到数十种不同的渲染结果，大大提高了模型的使用效率。而且使用者也不用像之前那样担心自己的 3D 素材与别人的“撞衫”了。「导出」当角度和颜色都比较令自己满意后，就可以点击图片下方的「download」将模型导出。中间会有一个几秒的渲染过程，然后会自动下载保存为透明底的 PNG，尺寸为 2720*2720px。由于保存十分方便快速，大家可以为模型多调整几个颜色或者角度，一一保存下来，之后使用也会方便很多。元素使用效果清晰上面就是 VERTEX 网站的功能介绍，总结一下一共有三点：3D 模型种类丰富，质量极高支持在线调整元素角度、颜色和材质，实现“一模多用”渲染导出快，图片高清，免费可商用附上 VERTEX 官方网址： https://vertex.im/ ，赶快自己动手试一试吧。在此也感谢作者 Vlad Kluev 的创作和付出，网站内的模型也一直在持续更新，值得大家收藏并持续关注。如果有小伙伴对 3D 元素的需求比较大，但是又没有更多的时间学习专业的 3D 软件，可以尝试一下 MagicaCSG 这款轻量级的 3D 软件，它界面简单操作便捷，建模和渲染都十分迅速，且质量不错。上手极快，学会之后就能自己按需求制作各种 3D 小元素，对之后深入学习更专业 3D 软件也有帮助。MagicaCSG 使用教程见下方链接：免费用上手快！快来试试这款 3D 设计神器 MagicaCSG3D 元素在设计中的应用广泛，之前向大家推荐了很多免费的 3D 素材下载网站，但是实际应用起来还是有局限的。阅读文章 > 以上就是今天分享的全部内容，谢谢大家的浏览。优设一直致力于为设计师提供最实用的设计干货知识，也为大家推荐了很多提升设计效率的神器。为了更好地为设计师提供服务，我们新建了一个「优设-花生设计交流群」，由我主导运营。无论你是想找神器、找教程还是想解决设计路上疑问，都可以进群交流，优设与大家共同成长。进群方式见下图，等你哦~本篇来源：优设网原文地址：https://www.uisdc.com/vertex
小技巧 用户 编者按 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 8 个实用性很强的 UI 效果提升小技巧，是系列文章的十一篇，原文最早发布于 marcandrew.me 。在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 6 条实用的建议，一起来看看吧！1. 少用点色彩一样可以让视觉充满凝聚力在上方的两个设计范例当中，左边使用的配色明显不搭，右边则基于基础色微调明度和饱和度来进行配色，更加协调。如果你的设计项目可以让你在颜色选择方面有更多的自由，不要总是倾向于用花哨的彩虹色来包装它。如果你沿着彩虹系的配色走下去，你可能会很快发现你所选取的色彩总会在视觉上显得不那么协调。实际上，你只需要基础的色彩，然后基于这个颜色，借助微调明度和饱和度来拓展配色方案，就能够得到更加均匀、更加具有凝聚力和专业感的外观了，不需要闪亮的彩虹色和复杂的配色技巧，同样能够拿出好设计。当然，基于基础的颜色快速搭建出配色，我推荐这个网站：https://maketintsandshades.com。2.抓住用户的注意力的技巧在上面的两个设计范例当中， 一个菜单选项使用了简单的方形选框，另一个使用了彩色的背景。UI 可以是干净简约又直观的，但可用性和易用性更重要，不能以牺牲用户体验为代价。对于关键信息，UI元素需要有足够的对比度，以抓住用户的注意力。对于像选项菜单这样简单的东西，请确保用户在快速浏览的时候，能立刻注意到所选的项目。相比于小巧的选框，使用彩色的背景来进行区分，会更加直觉，也更容易被用户所识别出来。3. 使用细文本的时候加深颜色在上方的两个设计范例中，一个文本使用浅灰色，另一个则使用了更深的黑色。当涉及到长篇文本内容的时候，如果字体是普通粗细，使用可读性有所保障的某种灰色是目前多数设计师的选择，它相比于黑色更加优雅，不会显得对比过于强烈导致视觉感知上的突兀。但是当字体文本非常细的时候，灰色的可读性可能就存在问题了。这个时候，可以通过使文本变暗，让尽可能多的用户在阅读的时候不会出现可用性的问题。4. 让界面上最重要的元素更加突出在上面的两个设计范例当中，左边的一个视觉层次较差，右边的视觉层次则改善了很多。在做 UI 设计的时候，你总会希望用户的眼睛每次都能快速、高效地被关键的元素所吸引，并且只需付出最少的认知努力，不会觉得费劲。通过控制 字体大小、字重、颜色和布局等视觉层次，您可以轻松突出最重要的元素：重要的元素字体更大、字重更粗、颜色有差异、在排版的时候更加突出。5. 打消用户的顾虑，让用户放心点击下一步在上面的两个设计案例中， 一个仅仅只使用了CTA按钮，另一个则在此基础上，提供了额外的说明，打消了用户的顾虑。当用户在 UI 中需要进行重要操作的时候，尤其是面对某些带有号召性用语的按钮，请确保用户对于当前的局面有充分的了解，不会对接下来可能发生的事情一无所知。对于一些常见的、可能普遍存在于用户内心的顾虑，一定要提前考虑到，并提供说明。改善用户体验的每一步，都不要让用户在交互的历程中的任何环节产生质疑。6. 请对 CTA 元素的设计「更自私」一点在上方的两个设计范例当中，一个 CTA 按钮和其他元素使用了相同的颜色，另一个则做出了差异化，让CTA 按钮更突出。引导用户行为的 CTA 按钮必须是屏幕上最关键的元素之一，它理应得到最高的视觉优先级，换句话说，就是应该尽可能「自私」一点，将最吸引人注意力的颜色分配给它，让用户不会将它和其他的 UI 控件在优先级上出现混淆。当然，你也可以在尺寸、形状等方面更进一步设计，但 CTA 按钮应该保持一种突出的颜色，仅此一项，就可以规避掉绝大部分的问题。下面是往期的内容：第一波！快速提升 UI 设计效果的 9 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第二波！快速提升 UI 设计效果的 14 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第三波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第四波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第五波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第六波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第七波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第九波！快速提升 UI 设计效果的 7 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第十波！快速提升 UI 设计效果的 8 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/improve-ui-designs-faster-11
图标 系统 圆角 2021 年 6 月，微软发布了全新的 Windows 11 操作系统，采用了 Fluent Design 平台设计规范，视觉风格进行了大改版，更美观、更柔和、更现代。同时，设计上加入了毛玻璃模糊的材料效果、流畅的过渡动画和小元素动画。我体验一段时间后，有几个点感到挺惊喜的：大圆角、卡片、动效。因为这几点不太像我们脑海中固化的 Windows 系统方正设计风格，倒有点 Mac 系统味道了。其中，我发现了一些 UI 设计细节和亮点，觉得在桌面端产品风格上还是有参考价值的，所以和大家分享下。图标在系统图标方面，常规图标尺寸是 16px，描边粗细是 1px，矩形外圆角是 2px，线条末端是圆角，更加亲和，符合现代年轻用户的审美。在部分场景界面，系统图标采用了双色的设计风格，打破了界面的枯燥感，视觉层次更加丰富。图标风格上，还采用了轻拟物设计风格，加入了渐变、高光、阴影设计手法，图标配色和质感可以学习下。圆角Win 11 系统采用了两种圆角尺寸：4px 和 8px。8px 圆角用于顶级容器，比如应用程序窗口、弹出窗口和对话框。4px 用于页面内元素，比如按钮、搜索框等控件。从 4 点网格和 8 点网格取值，具有一定的专业性和统一性。布局在系统界面上，Win 11 使用了不同背景色来区分层次结构，主次清晰，可以将用户的注意力集中在最重要的内容上。一般分为两个层次：基础层和内容层。基础层是应用程序的基础，可以用灰色背景，位于底层，常用于导航、菜单等相关功能。内容层是主要信息呈现区域，一般为白色背景，可以是一张大卡片或者多个连续排列的小卡片。比如系统应用程序：Microsoft Store 主界面，大卡片通到窗口右侧和底部，使用起来还是挺舒服的。比如系统应用程序：设置，多个连续的小卡片。这种布局风格简洁、新颖，体验后，我觉得可用性挺高的。下拉菜单下拉菜单是很基础通用的控件，我特地截图查看了界面标注。连续的列表之间保留 4px 间距，这点挺好的，可以避免一种场景：导航菜单栏列表同时存在 selected 态和 hover 态，避免背景色黏在一起、圆角搭配不和谐的情况。还有，反馈框上下左右的空白处间距是 4px，不包含面板描边，视觉感官间距看起来比较和谐。下拉菜单也出了一种新的交互形式。点击功能下拉后，下拉菜单直接覆盖在功能上方，点击切换蛮爽的，不过从通用性维度需要再评估下。标签栏标签栏选中态和未选中态文字都是黑色系，选中线为蓝色，选中态也挺明显的，又不会很干扰主体内容，色彩噪音不会很大。动效界面的切换过渡动画、单个元素的反馈动画，我体验下来觉得挺惊喜、挺有趣的。特别是在单个图标的动画上，有些图标加入光影渐变变化感觉挺有质感的，连下拉箭头也有动画，真细致呀。系统应用程序 Microsoft Store，左侧导航图标也加入了动画，挺顺滑的。动画很有细节，运动前有起势准备动作，利用重力原理加入了形变，还加入一些修饰元素，丰富运动效果。深色模式该系统也推出了深色模式，相信桌面端产品适配深色模式将是个趋势。设计师如果早期能够把深色模式考虑进去，后面适配将大大降低各方成本。总结以上就是我体验 Windows 11 UI 后发现的细节和亮点总结。在规范层，图标风格、圆角、界面布局、下拉菜单、标签栏的定义都挺多细节可以挖掘打磨的，设计师也需要根据自身产品调性考虑该系统规范的可用性，不能盲目跟随。在动效层，设计师发挥的空间和价值挺大的，可以多做些创意。Windows 11全新设计语言如何引领设计新趋势 ？（附源文件下载）Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/windows-11-ui-design
鞋垫 品牌 网页 大家好我是花生，今天和大家分享点有意思的事儿。在这之前先问大家一个问题：如果让你给一款鞋垫设计一个网站，你会怎么做呢？如果一时间不知道从何下手的话，FWA（Favourite Website Awards）3 月 1 日的当日最佳项目，肯定会给一个让你耳目一新的答案。这个叫做「OH HAPPYS DAYS」的网站设计项目，以其出色的界面设计、流畅的使用体验以及别具一格的创意，在 2 天之内就得到 FWA 评审团高达 83 分的肯定。除此之外「OH HAPPYS DAYS」还获得了 CSSDesign Awards 网站 3 月 4 日的最佳项目奖以及 Awwwards 的提名奖。虽然从名字到设计界面都不会让人第一时间联想到鞋垫，但是「OH HAPPYS DAYS」的的确确就专门为鞋垫设计的网页，出人意料也正是网站以及品牌想要的得到效果。「OH HAPPYS DAYS」是为 CHRISTOU 1910 旗下新品牌 DAYS 设计的网站。CHRISTOU 1910 是 1910 年开始在雅典运营的家族企业，以专业研发生产矫正带、支撑器等医疗辅助器材发家。CHRISTOU 1910 官网主页2017 年 12 月，公司获得首轮融资，之后就开始稳步投资开发创新的运动、健康和保健产品，以期在后疫情时代将“自我保健”的消费理念传递给消费者，开拓更广泛的市场。DAYS 就是 CHRISTOU 1910 基于这个理念成立的全新潮流品牌，于 2022 年 2 月正式上线，主打产品是符合人体工学、呵护足部健康、材料环保可回收且外观设计创意十足的多款鞋垫。CHRISTOU 1910 官网中的 DAYS 品牌，非常年轻有活力为了树立好 DAYS 年轻、潮流、有活力的新形象，最广泛地提升 DAYS 的知名度，CHRISTOU 1910 在 DAYS 的品牌设计上投入了大量精力。他们邀请知名的设计工作室 Big Horror Athens (Greece)负责 DAYS 的品牌视觉设计，并量身打造了品牌网站「OH HAPPYS DAYS」。Big Horror Athens 是一家实力顶尖的创意数字设计工作室，在企业品牌设计和网页设计开发上经验丰富，他们负责的项目多次荣获 FWA、CSSDesign Awards、Awwwards 的奖项。Big Horror Athens 为 DAYS 的鞋垫设计了 5 款外观，每款有不同的颜色搭配，可以提供多样选择。配色上使用多种高明度高饱和度的颜色互相搭配，大胆抢眼；搭配闪电、波点、爱心、猎豹、摇滚手势等手绘涂鸦感十足的小元素，随性独特，非常能吸引追求个性和自我的年轻消费群体。在确定好 DAYS 系列鞋垫的视觉外观设计后，Big Horror Athens 联合巴塞罗那创意网页开发机构 No Matter，设计了品牌网站「OH HAPPYS DAYS」，为 DAYS 宣传其健康、潮流、年轻有活力的品牌理念提供了一个绝佳的平台。「OH HAPPYS DAYS」网站配色延续了鞋垫大胆鲜明的风格，使用了红、绿、黄、蓝等的大面积的撞色；字体使用的是线条干净利落的无衬线体，现代感十足；在装饰小元素和按钮样式上用的是扁平风，简单有趣，非常有亲和力。此外还色块、字体和小元素都设计了动效，使整个界面活力十足。网页功能简单明了，主要是右上角的 3 个按钮。「COMFY」和「FRESH」代表两个不同的系列，「SHOP」转到商店。网页向右滚动翻页，过渡非常丝滑，以一个向右走的小云朵进行视觉指引。每一页是一项鞋垫的功能或特色的介绍，且必然包含一种动态元素，丰富视觉感受，并引导浏览者视线到需要注意的地方。比较有意思的一点就是在呈现一个系列的多种产品时，网页并没有采用传统的列表，而是做成了了类似于“俄罗斯转盘”的形式，滚动一下就会转动到下一个产品，就像玩游戏一样。此时鼠标也会显示成一个眼睛的形状，暗示浏览者可以点击进去查看详情。总结「OH HAPPYS DAYS」无论是视觉呈现还是浏览体验，都完美地传达出健康、潮流、有活力的品牌理念，真让人有一种用上这款鞋垫走路都能轻快很多感觉。「OH HAPPYS DAYS」这个项目获得专业奖项，不但体现了 Big Horror Athens 高超的设计水平，也让 DAYS 这个品牌的知名度提升到一个新的层次，成就了设计项目中甲乙方的双赢。从网页项目中各种设计上的小心思足见设计师的热情与认真，设计理念和各种小细节都非常值得我们学习借鉴。以上就是今天的推荐。附上网址，对网页设计有兴趣的朋友可以多去探索感受一下。「OH HAPPYS DAYS 官网」 https://days.christou1910.com/en/「Big Horror Athens 官网」 https://www.bighorrorathens.com/如何高效地进行网页设计？重点关注这7个要素大家好，我是 Clippp。阅读文章 > 优设一直致力于为设计师提供最实用的设计干货知识，也为大家推荐了很多提升设计效率的神器。为了更好地为设计师提供服务，我们新建了一个「优设-花生设计交流群」，由我主导运营。无论你是想找神器、找教程还是想解决设计路上疑问，都可以进群交流，优设与大家共同成长。进群方式见下图，等你哦~本篇来源：优设网原文地址：https://www.uisdc.com/oh-happy-days
涂鸦 插画 潮流 说到当下最热门最受年轻人喜欢的插画风格，就不得不提到潮流涂鸦插画。它起源于现代涂鸦艺术，线条大胆粗放，用色鲜艳强烈，表达叛逆不羁、突破束缚的内涵，符合年轻人追求潮流与个性的心理。现在无论是电商宣传还是产品包装，我们都可以看见潮流涂鸦插画的运用；甚至化妆品和服饰品牌都推出联名款，就是为了能借此吸引更多年轻的消费力量。今天小光老师（微博@插画师小光sir）就为大家介绍潮流涂鸦风插画是如何发展兴起的，再结合自己创作的一幅潮流涂鸦插画，向大家详细展示绘制潮流涂鸦插画的方法。关于我：优设百万人气插画师 / 知名IP商业画师 / Wacom大赛评委 / 擅长IP形象、潮流插画、分镜设计、爆款漫画等。想看我更多作品可以关注我的小红书@插画师小光sir，微博@插画师小光sir，约稿商务合作加微信：guangsir6666往期文章：如何设计微信红包封面？从零开始教你定制微信红包封面关于我：优设百万人气插画师 / 知名IP商业画师 / Wacom大赛评委 / 擅长IP形象、潮流插画、分镜设计、爆款漫画等。阅读文章 > 虎年“hú”利！资深插画师手把手教你100%成功上架微信表情包农历虎年越来越近，家中挂起的条条腊肉，街边装饰的串串红灯笼，都让过年的氛围越来越浓，大家想放假的心情是不是也越来越迫不及待了呢？阅读文章 > 什么是涂鸦说到涂鸦，大家最先常想到应该就是艺术家在墙壁上的即兴创作，我们国内许多美院也有著名的涂鸦墙。涂鸦艺术的起源与发展涂鸦艺术起源于纽约的布朗克斯区。这个区域从上世纪60年代开始被黑人和来自北美洲的拉丁裔居民所占领，是一个当时非常出名的贫民区，那里的墙壁上布满社会底层年轻人为了宣泄心中不满或愤怒情绪而肆意喷涂的各种图案。开始这种形式的图案并没有明确的概念，更多的被认为是一种破坏艺术。后来这种潇洒不羁的行为艺术被越来越多的人接受并喜欢，涂鸦爱好者们开始深入的钻研涂鸦的字形和图案设计，使涂鸦的类型也来越丰富。这个过程中“涂鸦”（Graffiti）这个概念就渐渐形成了，传播得越来越广。涂鸦创作发展逐渐成熟，不再只追求情绪的宣泄和视觉的冲击。涂鸦爱好者们开始借涂鸦表达对偶像的崇拜和热爱、对社会现象的关注或对政治问题的讽刺。现代潮流涂鸦插画的代表涂鸦主要的介质为墙，但进入20世纪后期，涂鸦所创作的介质就不局限于墙了。其创作形式和内容更加多样化多元化，并且其一度成为前卫时尚的设计师的专利。现代涂鸦中，更多的潮流插画表现出的艺术形式，或是对比强烈波普风，或是后现代艺术的抽象流。著名潮流涂鸦艺术家乔恩·伯格曼就是代表人物之一，他的涂鸦的线条变化丰富、风格无拘无束，展现了独特而幽默的风格。而来自哥伦比亚的图形工作室Guacala Illustration Studio则将怪诞无厘头的怪物元素融入到潮流插画中，让人们对于创意形象有了新的理解。更为复杂的视觉冲击力来自Supersize Them的作品，从他作品的亿点点细节中我们可以仔细揣摩有趣的元素。IP潮流涂鸦插画的应用新兴的潮流涂鸦艺术正逐渐走入我们的生活，更具个性艺术形式的服装、鞋等受到更多消费者青睐，也就是我们所说的“潮牌”。在包装上，我们也经常看到潮流插画元素，特别是最近流行的国潮风，更是很多国产品牌下功夫进行个性定制的思路。而从中也诞生出许多著名潮流IP的联名款周边，也成为众多年轻人追捧的产品。这种潮流插画的创作形式非常多样化，可以抽象派的自由创作风格形象表现内涵；也够具象化通过多元素组合的巧妙构图。很多产品的宣传和电商品牌的专题页的设计，都喜欢这种富有创意、极具冲击力的创作形式。但元素过于抽象反而失去了生活化特点，所以我们看到许多创作形式更加有场景感和故事性，能直观的解读画面特色。潮流涂鸦插画非常强的包容性，使我们可以在保持自身创作风格作品的同时，融入更多的潮流与创意元素，帮助作品展现潮流风格。如何创作IP潮流涂鸦插画？上面为大家介绍了涂鸦艺术的起源发展及应用，帮助大家对这种潮流插画有一个深入全面的了解。虎年春节的时候，我也创作了一副结合涂鸦和中国传统文化的潮流作品「SPACEHu」系列，下面就将创作思路及过程分享给大家。Step-1 灵感构思 素材收集「SPACEHu」中“太空虎”的IP形象灵感最初来源于一个甲方的项目，比较扁平。虽然最后没有合作成功，但是“太空虎”这个形象我个人还是非常喜欢的。正好2022是壬寅虎年，自己也想想创作一套虎年主题插画系列，于是按自己的画风具象化“太空虎”这个形象，创作了这一套涂鸦风格的贺岁主题插画。创作初期，自己在脑海中构想出几个与新春及传统文化相关的元素，然后进行组合尝试。主要的构想框架就是老虎+太空宇航员+中国传统元素，而围绕中国传统元素想到的就是冰糖葫芦、吹糖这些传统民俗小吃，喜庆亲民，非常有年味。所以最后确定了冰糖葫芦、吹糖、油堆麻团、汤圆四个元素，与之前的“太空虎”形象结合创作。Step-2 构思草图+细化结合虎年的文案，设定了四字祝福语：虎年大吉、虎虎生威、虎星高照和虎气冲天，并在Pose动态上给与一定的互动。做草图构想这一步时潦草点也没关系，最关键的是确定动态和老虎造型，细节部分在完善线稿的时候再做优化。整个创作过程是用平板Procreate完成。在勾线细化环节，为了体现线条的随意性结合传统笔墨效果，采用了听盒笔刷+映卡笔刷。下图展示的是汤圆虎的勾线细化过程。Step-3 上色而在上色阶段，我常用的就是平铺色+暗面色正片叠底达到立体质感。但与我以前的创作风格不同的是，这次在上色质感上我采取类似水墨笔刷感的边缘去刻画，强调一些人为的粗糙感笔触，看起来比较杂乱，但刮痕的感觉很会使涂鸦风更带感。Step-4 排版设计在主体物上色完成后，加上喜庆的红色背景，并给主体形象外围加个换色描边会更好，类似贴纸的感觉。注这里不是单纯的加描边效果而是手绘描边，效果会更生动。最终的文字排版工作是用PS完成的。文字我采用传统的优设书华体，放在是四角形成稳定饱满的构图，也可以让主体的太空虎更突出。并提取了线稿作为底纹效果，使层次更加丰富。四个太空虎的形象完成后，我又把它们摆放在一起形成大图，做成了横版壁纸和手机屏保。并尝试运用红包样机，呈现更完整的效果。最后还将创作过程及成品做成了简短的贺岁小视频，在过年的时候发布在了自己的社交平台，效果不错。 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。关于如何创作IP形象和IP在互联网中的影响力，之后我会做2场免费公开课。直播亮点：1. 如何让一个IP火起来2. IP形象创作思路揭秘3. IP形象的延伸运用想看免费直播的添加微信即可进群也欢迎大家在社交平台关注我：本篇来源：优设网原文地址：https://www.uisdc.com/trendy-graffiti-illustration
游戏 模型 用户 最近两三年游戏化设计被聊的很多。但其实说来说去都是隔靴搔痒，大多数时候是挂个游戏化的名头，做的事情其实没有什么新意。所以我打算对市面上形形色色的说法做一波综述，我们来细细聊聊游戏化设计它究竟是个什么东西。流量密码游戏化游戏化这个概念不是什么新鲜东西，在国外 2003～2004 开始就起热度了，国内设计界在经历了支付宝的蚂蚁森林/拼多多的砍一刀等等影响力比较大的游戏化实践以后，基本也普及了这个概念做了很多相关研究。基于一个叫 Sebastian Deterding 的老哥在 Gamification: Designing for motivation 中做的总结，我将这些林林总总的“游戏化”文章分成以下这些类型：类型 1-拆解“游戏化”的构造这种文章旨在说明一个游戏化产品的构成逻辑，在解释“游戏化”这个概念框架的同时，一般也能够给到一些设计行为上的建议。不同的模型强调的东西有一些差异，比如比较常见的有：DMC 模型：强调玩家被一些内部驱动力引导把游戏的组成部分本质到表象分成三个层级：动力（dynatmics）、机制（mechanics）、组件（Components），这个模型比较强调玩家玩游戏的底层动机，也就是玩家为什么要开展游戏。这个模型思路类似我们设计师经常讲的原子化设计，认为游戏动力、机制可以决定游戏的外在形式，设计师优先思考游戏的动力和机制，然后再去挑选一个匹配的游戏形式。这个模型因为出现在《游戏化思维:改变未来商业的新力量》中，所以在国内有一定知名度。MDA 模型：强调游戏要有“好玩”、有感情把游戏的组成部分分成机制（Mechanics）动力（ Dynamics）和美学（Aesthetics) 三个层级，比较强调游戏的艺术表现力和感性的一面，把“游戏的乐趣”拆分成不同的类型分析的比较细致。从这个框架下思考问题，设计师需要意识到自己只能从机制-动力的层面去构建游戏，但用户是基于美学-动机层面去体验游戏乐趣的，因此设计师应该站在用户的视角去分析游戏的最终体验，然后去反向分析什么样的机制-动力能够带来这种体验。这个模型比较偏向传统游戏设计，放在产品游戏化的语境下其实不太好发挥。类型 2-解释“游戏化”起作用的原因这种文章主要想要研究“游戏化”为什么能够吸引人不断的去玩、这个现象背后有没有什么理论支撑或者比较成体系的解释。目前在学术界对“游戏化”的研究基本是这个路数。Computers in Human Behavior 去年的文章将这些论文分成了 3 个类型：基于情感动机相关理论的：心流理论、自我效能或自我决定论等等基于行为理论的：强化理论、技术接受模型等等基于学习相关理论的：认知负荷理论、社会学习理论等等行业内来讲，基于情感动机和行为理论的游戏化文章其实是最常见的，我猜大部分人在上面这一串理论里最熟悉的就是心流了。对比学术界，行业内比较偏好对设计有直接指导价值的模型，比如：用心流理论解释游戏化：强调达成高效专注的游戏体验这个理论挺对现在国内商业环境的胃口，所以应用的比较广。简单来说就是基于用户的能力，合理设置任务、适当引导注意力，并且给予即时反馈，从而去引导用户长时间、高强度、不吃不喝不停也不会累地去做一件事情。用上瘾模型解释游戏化：强调让用户不断的长期使用这个理论将玩家不断进行游戏的行为拆解成触发-行动-奖赏-投入-触发的循环，强调通过这 4 个步骤引导用户长期、不断的去做一件事情。和它有点类似的还有福格模型。如何提高设计转化？先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 值得注意的是，把上瘾放在心流理论的下面其实算是给它抬咖了。虽然上瘾模型是我们日常工作中今天听到的一个东西，但它只能算是一个带有很强行为主义色彩的“设计思路”，实际上并没有经过严谨的证据论证，因此距离正儿八经的理论还是有很长一段距离的。类型 3-教导设计师如何去做“游戏化”这种文章一般是提出一些设计方法或者设计流程，类似“6 步设计一个成功游戏化产品”这类型的。这种文章是我觉得比较没意思的那种“游戏化”文章，我至少看过 3-4 种不同的说法，比如：情景游戏设计：探寻（Chasing）、增强（Enhancing）和部署（Deploying）简单来说就是先（从日常生活中）找到一个有潜力的游戏化场景，然后对其中一些关键场景做适当的夸张处理，从而制作出一个游戏原型，然后不断的和玩家测试、迭代这个原型。这个方法强调观察和用户参与，本身是一个挺真诚没什么套路的、很经典的游戏设计方法。但问题是我们做产品游戏化的时候，往往需要面对一个没什么游戏化潜力的场景，比如填表单。它的规则是固定的、不可改变的，因此基本没有什么游戏化的弹性。所有“游戏化”的元素都得是外来的，而不能来自产品本身。比如说游戏设计师可以从做饭获得灵感，做出“胡闹厨房”，但产品设计师没法把填表单功能“游戏化”成“胡闹填表单”，我们只能做一个和填表单完全没关系的“表单种树”，填一张表单帮你种一棵树。游戏化设计 6 步法将“游戏化设计”分成 6 步：明确目标、划定行为、描述用户、制定活动周期、评估乐趣、部署实施这个设计方法里除了第 4 步“制定活动周期”和第 5 步“评估乐趣”比较有独创性，其他的步骤都和普通做产品设计那种双钻模型没啥大差异。如何用好设计双钻模型？来看 vivo 浏览器的实战案例！前言刚入职时，有本书叫《方寸指尖》对我影响比较大，主要讲述如何做好用户体验设计。阅读文章 > 第 4 步“制定活动周期”（device activity cycles）在讲，要去设置一个类似上瘾模型的“触发-行动-奖赏-投入-触发的行为循环”，同时还要让玩家在这个循环里保持循序渐进、螺旋上升。类似打怪-得奖励-打怪-升级第 5 步“评估乐趣”是建议设计师要回头看一下自己的游戏化产品是不是真的有意思，不能只套个游戏化的壳子做无聊的东西。以玩家为中心的设计流流程将“游戏化设计”分成 5 步：了解用户、了解任务、了解动机并制定激励手段、产出游戏机制、评估测量。和上面的游戏化 6 步法比，这个设计流程比较强调激励手段，并且也着重强调可以从外部激励/内部激励两方面去推动用户玩起来。这些设计方法类的文章虽然多，但是去掉片汤话，说来说去也离不开探索-设计-验证的大流程，只是和一般产品从开始-结束单箭头的行为路径不同，做游戏化产品需要设计一个合理的、有意思的行为循环，仅此而已。但何种行为循环是合理的？这些方法论往往没有很具体的讨论，而又回归到心流/上瘾/福格模型三件套里。对于游戏化设计的具体技巧，我推荐大家去看游戏设计领域的书，比如《游戏设计艺术》里，就对如何设计游戏的兴趣曲线做出了如下的建议：一开始要给用户一个快速的体验峰值（B 点），然后再让用户遇到困难、在困难中不断升级循序渐进。类型 4-介绍具体的游戏化手段或思路这种文章是最流行、产出内容最多的，一般以《某某产品游戏化是怎么做的》为标题，介绍的内容大差不差是 PBL（点数、徽章、排行榜）或者其他类似的东西。这些手段非常具体、抽象程度低，可以拿来即用，因此大部分“游戏化产品”会选择直接借鉴这些手段。市面上将这些游戏化的手段归类的比较全的，大致有以下两个模型：八角模型（的外圈）这个模型将游戏化手段通过两个轴：内在驱动和外在驱动、黑帽思维（驱动）和白帽思维（驱动），划分成四个象限。内在驱动关注游戏体验，外在驱动关注游戏成果；黑帽思维代表具有紧迫感的负向动力、白帽思维代表正面积极的正向动力。它还将 8 种不同的动机放在这四个象限内，进一步细分了不同的游戏化手段各自的动机。这个模型主要是在归纳用户玩游戏的不同动机，可以归类到类型 1-拆解“游戏化”构造分类中。之所以放在这里，是因为我个人觉得这个模型的复杂程度实在是太高了，并且比较倾向于解释，指导设计的能力不是很强，所以我们主要来看被八角模型归纳的游戏化动机与手段：创造使命感：可以为游戏写背景故事、开局就给主人公强力道具，或者将公益与游戏联系起来进步与成就感：可以给游戏增加成就点数系统、徽章等成就象征、进度条、排行榜…让玩家开动创造力：可以给游戏增加通关道具（类似马里奥里的蘑菇）、提供多种选项分支…强调拥有权：可以给游戏添加收集元素、虚拟形象…创造社会联系：可以给游戏增加社交系统，比如师徒系统，或者允许用户炫耀/展示道具强调稀缺感：让用户觉得离完成目标非常近、或者向用户持续展示需要付出一定代价才能获得东西，比如付费道具调动好奇心：增加彩蛋、随机奖励等利用玩家害怕损失的心理：比如设置限时奖励，或者让玩家有大量沉没成本（最后说一句，八角模型现在市面上有的翻译都挺烂的，假如大家想看，我可以把作者的文章翻译一下）游戏化策略卡这个工具相比八角模型，更加倾向于去解释“游戏化”作为一个外壳，如何能更好的服务被“游戏化”产品目标。策略 1：提供具有新奇交互形式的沉浸化体验，激发用户的正面感情建立世界观：虚拟形象、背景故事设置惊喜：增加彩蛋、为游戏添加随机性策略 2：任务支持，使用类游戏任务的交互，传递给用户知识帮助玩家适应任务难度：设置等级系统、分解目标、逐步上升的难度对目标、反馈、手段、结果进行包装修辞策略 3：提供情感化的说服性元素，从而驱动用户使用自我成就：奖励、点数、收集、限定时间、稀缺性、惩罚社会成就：竞争目标、排行榜、团队自我表达：允许用户自定义某些元素、或者做出选择；为用户建立个人档案或者徽章系统社会关系：允许用户之间的合作、交易、帮助等游戏化这个概念就像糖衣在工作中，其实游戏化这个概念最受人质疑的点是，它所有的思路，比如任务设计要循序渐进、比如要给予用户正面和及时的反馈…所有的一切都是体验设计中已知的工作方法，没有什么全新的概念或者没见过的方法。在这样的情况下，很多人会觉得我们为什么还需要游戏化设计这个“糖纸”，去包装这些我们已经在做的事情呢？我的看法是，尽管游戏化设计的技巧都是已知的，但在设计师日常工作中，因为各种各样的原因，我们总会倾向于忽略这些点或者把他们的优先级排得很低。比如人人都知道一个页面包含的信息量越少，信息越聚焦，越容易引导点击。但是实际工作中还得把页面按产品的意思填得满满的。游戏化设计给出了一个成套的解决方案，并且允诺了一个很吸引人的远景：按这套方案去做，你的产品也会像游戏一样令人欲罢不能。因此用游戏化的壳子去包装整个设计方案，能让人暂时跳脱出我们日常工作的常规思考路径，去用不那么严肃的、玩家视角的看法来做东西。我个人觉得这么做有它的价值。另一个方面来说，因为游戏化只是层“糖纸”，它包裹的产品内核还是原来的样子，因此游戏化也不是什么包治百病的万灵药。比如包装成抽奖的广告、包装成中奖的拉新促活活动，基本不是从用户体验的角度出发做的设计。与其说这样的设计是使用了游戏化的思路，不如说是“伪装成游戏的名字和视觉样式，起到误导用户的效果”，还是不要往自己脸上贴金了。4000字干货！做好游戏化设计的 8 类机制和52个元素给大家直接盘点一下常用的游戏化机制，及每类机制下面常用的游戏化元素。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/game-design-2
作品集 思路 简历 在面试前我们还需要准备一些可能会问到的问题和注意事项，自己要整理好思绪，不要在面试的时候说不上话，那场面就十分尴尬了，只有在做好充分准备的前提条件下才会有更大的机会被企业认可。那么今天我们就紧接着上一期所分享的内容，就面试相关问题收集并整理一份超完整面试攻略和大家继续探讨。往期篇：金三银四求职季，收下这篇5000字的上分秘籍（附简历和作品集模板）考虑马上又要到新的一年为了让更多小伙伴能准备出更加惊艳作品集，这里我提供了一套简历和作品集的设计思路以及对应的模板，希望对大家有帮助~我们提供器与具，推崇创作思路发散，不鼓励照搬、抄袭、挪用。阅读文章 > 我们提供器与具，推崇创作思路发散，不鼓励照搬、抄袭、挪用。好的内容虽好，但是不具备个人特性。每个人练习过程相同，但是结果不同。设计要动脑，才能获得更高价值，希望大家能够跟着思路借鉴学习，做出自己的风格。欢迎大家一起讨论练习，共同进步！ .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。面试了几十个设计师后，我总结的12个常见问题前情提要前段时间公司招人，招聘岗位为初级和中级的设计师，收到了大量的简历和作品集，通过简历筛选——作品集筛选——电话面试——设计终面，终于招到了合适的人选。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/the-interview-guide
用户 素材 产品 年底了，每次回顾自己，总想想说点什么，但又感觉好像没啥说的。感谢公司领导和客户的认可，让我很荣幸在今年获得两次晋升，并且还获得了年度优秀员工称号。今天就聊聊这一年我做了哪些事情，正好给自己做个年终总结，如有不足之处，请多提建议。点：产品触点数据提升去年下半年到今年上半年花了大力气输出并测试了很多素材，通过素材测试用户对于价值敏感度和价值感知的反馈，并对素材投放的数据详细的分析，得出较好的反馈，让我们知道什么样的素材表达方式可得到更高点击。部分数据分析截图1. 设计执行上怎么做的？品牌心智的表达，主要从两个方向去执行：品牌色的延伸&业务关键词精准表达品牌色的延伸能够让素材在界面中和谐统一，在外渠道中投放，暗藏品牌感知，让用户在进入前、后能够感受一致。业务关键词精准表达，举个例子，关键词：体验金——金币，福利——礼盒，在一些用户的认知中，关键词体验金不一定很明确，但是金币能够马上感知是和钱相关，福利同理，福利到具体的事物是什么？比较抽象，我们在制作素材过程中，将关键词福利转化成用户能够一眼感知的实物：礼盒。快速制作提效：关键词表达形式&主色延伸&精简组合&沉淀和复用关键词表达形式，比如说金币，我们说表达形式是很多，正视图的，侧视图的，单一金币，多金币组合，或者金币+宝箱组合…主色的延伸，主要强调色彩使用场景的契合，比如说金币，如果用一个蓝色的金币，绿色的金币，可能用户会误解，特定场景除外。素材组合形式也有很多种，在渠道素材投放中，在有限的空间，能够很明确的给用户传达这是什么，不宜过多素材堆叠，而是精简组合方式，主体元素放大，让用户一眼感知是什么。沉淀&复用，在素材制作完成后，很多同学习惯不整理，丢一边不管了。其实这些产出是一个非常大的灵感库，是可复用的素材集合，在很多场景中直接复用，在紧急需求的时候，不至于手忙脚乱。线：用户路径的优化梳理，更好引导用户今年做了几个较大的项目，有涉及到企业和个人的金融产品。不管什么产品，都认真梳理了产品的用户路径，为产品更好地提升转化而设计用户路径，每一个路径都奔着点击转化的目标去设计不同的路径策略。1. 设计执行上怎么做的？用户路径预设：构建 F 型视觉动线&提升视觉层级&优化用户路径F 型视觉动线，尼尔森于 2006 年通过报告形式提出的，构建 F 型视觉动线，符合用户阅读习惯，更好引导用户阅读和操作提升视觉层级，在产品市场页面，提升主推产品模块层级，凸显优势&高收益率引导用户点击。优化用户路径，在很多理财产品中，在市场页点击“购买”，会进入产品详情中去购买，但是这里我们优化了一个流程，跳过产品详情，直接进入购买流程，只需要用户继续即可买入成功。优化用户路径也有很多方式，比如我们在另外一个产品中，对于差额转入，我们提前预置金额，减少用户输入等等，这些都是在用户路径中的细节，提前预判用户接下来会做什么，了解用户，为用户做设计。营销场景的申购加持，促进申购转化：营销色刺激留下用户&利益型元素促点击在营销场景中，我们使用产品营销色红色吸引用户留下来，通过利益型元素红包、加息以及较高收益率等吸引刺激用户，最后在文案上“限时抢”营造紧张氛围，促使用户点击。以上都只是工作中点点滴滴的细节中一小部分，最终的数据挺好。当然也是离不开团队的产品、运营、交互、开发、以及设计等每一位同学的辛苦付出。面：实现整个产品数据提升和转化当单点触点点击率得到提升，进入到产品路径中，同样需要关注每一个触点和完整链路的整体数据，当某个数据不太理想，我们会立即做迭代方案。从全局的视角去把控整个产品链路数据提升，实现最终产品价值转化。个人 成长与待提升成长：经过项目的洗礼和经验沉淀，学会了怎样做正确的事情，怎样把事情做得更加深入，怎样把细碎的事情做完整。想做好产品其实挺不容易，每一个细节都需要打磨，每一个关键点都不能遗漏。另外，在做产品过程中一定要了解自己的用户，了解他们是什么样的，他们接下来会做什么，提前预判，提前预设方案。待提升：其实在项目过程中，很多时候加入了自己主观的想法和判断，觉得这样能更好，但是事实是：不要你觉得，要用户觉得，要通过测试或者更多方法验证“你觉得”是对的，只有这样才能真正说我们了解用户，真正为用户服务。不然就是为用户添堵。团队 提升与合作1. 工作流程标准化设计验收很多时候设计师真心不忍看开发同学的还原度，每次都很揪心。为避免扯皮，伤感情，我为团队明确验收流程和规范，严格输出验收文档，问题在工作群里沟通，避免私聊。另外每次都将验收文档传语雀工作文档中，工作内容公开透明，避免扯皮推诿，造成不必要麻烦。沟通技巧工作中做得最多的必须说沟通，不愿意表达，沟通不行，很多时候真的很费劲，也浪费大家时间。于是我整理了一份怎么把做 1 件事情表达清楚，到怎么确认的大概过程，给内部同学共享，特别对于沟通困难症的同学很有用呀~~由于是内部文件，只展示大纲思路，接下来的给大家自由发挥…高效素材搜集方法素材搜集方法，对于大部分设计师来说，都很简单，搜素材，谁不会，打开花瓣一顿搜，出来全是图……然而，素材搜索也有小窍门。刚好我梳理了大概的一个思路，适合刚入门的设计师或不知道怎么搜索高质量素材的设计师。因为文档图片比较长，这里就不贴图放进来了。这篇文章点赞破 10000 的话，下篇文章我就发出来，哈哈哈哈哈哈哈哈……2. 组件化设计思维助提效组件化思维，首先得有很多组件，组件怎么来？在最开始我接手这个事情的时候，我就在考虑日常运营需求繁重，我怎么做让效率更高，我不是鹿班，没有 1 秒 8000 张 banner 的能力。因为我们产品在运营里面的素材投放多为固定模板，需要做的就是 icon 素材的替换，数据收集，继续替换，每一期每一期迭代，直到去年 10 月份，这件事情我完完整整做了 1 年，这只是工作中的一小部分，积累了不下 1000 个不同表达方式的 icon，这就是我自己的一个庞大的灵感素材库。在很多场景都能够快速复用。而后来在日常运营中，相同的元素，直接拿来即用或者不同方式的组合复用，高效，快速，数据还不错，运营很开心，真是爽不胜爽！包括后来这件事情转交给其他同学，产出效率高，数据效果好。这是我以及整个团队都期望的事情。3. 优秀案例收集分享案例收集和学习能够提升大家的审美，能够给大家更多设计灵感，但是如果是无目的的搜集，无思考，不学习和分析，那么它就只是个图库。我对团队要求是，案例收集需结合我们自己的产品和业务，如 icon，支付宝腰封的素材设计方向，H5 的设计风格方向，金融产品 UI 设计方向，新客开户，活动弹窗，会员升级，卡券，游戏养成等等，去对应的搜集优秀案例给团队分享和学习，当我们需要竞品参考和灵感的时候，不至于漫无目的，手忙脚乱。以上只是日常收集案例的一部分，仅供参考4. 经验沉淀分享这一年，除了忙碌的工作，我们也组织了几次组内分享，一是增加团队同学的专业交流，二是让大家对工作有些自己的思考和总结。好了，忙忙碌碌，碌碌无为，唯命是从….又一年过去了，感觉这一年做的事情好多，但又觉得什么都没做。可能这就是别人说的最高境界：做又不做祝大家新的一年，2022，都有收获。设计师如何写好年终总结？我总结了4个维度！2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。阅读文章 > 欢迎关注作者微信公众号：「Two Young设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/design-summary-3
女性 作品 线条 宝马等大牌纷纷与她合作，只因这位插画师笔下的女性实在迷人。优雅却又强大有力，是 Kelly Anna 笔下的女性给人的第一印象。即使没有具象的五官，你也能从画中女性那干净利落、充满张力的身体线条上感知到她的蓬勃的生命力。Kelly Anna 是一位来自伦敦的艺术家。她做过时装插画师，在国际时装周的展览前排为模特作画；当过印刷设计师，为 Beyoncé 的穿着设计图案；现在则成为了一名独立艺术家，创作重点放在与体育运动相关的内容上，并一直坚持在作品中为女性赋能。Kelly Anna 和她在艺术项目“创作者驻留”里的创作Kelly Anna 为切尔西女足俱乐部创作的赛场横幅Kelly Anna 喜欢在作品中表达能量和运动，她作品中的女性形式和各种抽象形状非常夸张，借线条的张力来表达女性的力量。Kelly Anna 的父母都是拉丁舞者，她自己也曾是一名体操运动员，人体在舞蹈和运动中展现出的奇异的扭曲、精巧的平衡和蕴藏的爆发力都令她深深着迷，这些都深刻地影响着她的人体创作。直到现在，Kelly 也会时不时到舞蹈室去现场创作，这是她的灵感来源之一。Kelly Anna 作品中的女性大多是裸体，这对她来说意味着女性自信。在还是少女的时候，Kelly Anna 就对自己的身体线条不满意，觉得拥有丰满的臀部和胸部线条让自己“像妈妈一样”，并不是现代社会年轻女性想要的那种纤细轻盈的感觉，所以每次被别人提及身体的这些特征，都让 Kelly Anna 觉得非常不自在。但是随着社会阅历的增加和内心的成长，Kelly Anna 发现女性并一定要符合所谓的“主流”审美，女性的形式本来就该是多样的——优雅的，强大的、有活力的等等，充满各种可能性。所在她决定通过描绘曲线优美的女性形状来反驳这种“身体羞辱”，展现女性强壮有力的形象，也借此告诉年轻女性要自信——女性的形象有无限种可能性，你可以做任何自己想做的事情，不用在意别人所说的“完美”。成为一名母亲后，Kelly Anna 愈发感受到了女性内在力量的强大与无私。她创作了“ ReBirth”系列作品，以艺术家的角度审视成为母亲后的心态变化。ReBirth 系列以美丽大胆的色彩、夸张的线条形状展现女性与生俱来的包容和强大，作品中乳房、乳汁等母性元素被直白的呈现，体现了艺术家鼓励女性直视自我、自信要源自内心的态度。Kelly Ann 非常喜欢野兽派画家马蒂斯，作品风格也与其有相似之处：色彩绚烂浓烈，人物线条简练夸张，这使得她的画具有极强的装饰感，个人风格鲜明突出。加之 Kelly 的作品展现了女性健康、有力量的形象，并坚持表达女性要勇敢自信地去创造无数可能性的积极态度，使得宝马、H&M、ELLE、Lego、Penguin Books 等知名品牌都愿意与她的合作，借此传达自己品牌支持女性平等、自由、全面发展的态度。她的作品也经常以壁画、空间装饰的形式出现在各种建筑物上和展览中，向人们展示女性力量的澎湃与多彩。Kelly Anna 为帕丁顿广场创作的巨幅壁画“培育自然”为 H&M 创作的平面插画为企鹅图书《美丽的废墟》创作的封面和封底Kelly Anna 曾在采访中表示，希望人们在她的作品中感受到强大和澎湃的力量，忘记日常烦恼的束缚，勇敢的去创造一个有趣的世界。身为一位女性艺术家，Kelly 一直秉持自信勇敢的信念去工作和生活，也持续在作品中展示强大有力的女性形象，以鼓励和影响更多女性。希望 Kelly Anna 的经历和作品能带给你新的感受与启发，也祝每一位女性都能勇敢追求自我和梦想，成为那个美丽自信又强大的自己！「Kelly Anna 个人网站」 https://www.kellyannalondon.com/「Kelly Anna INS 主页」 https://www.instagram.com/kellyannalondon/这10个顶尖大神的作品，是我每日学习的源泉我将分为 C4D 和插画两部分来介绍一下，在 Behance 和 Dribbble 上，小哈关注的宝藏设计师。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/kelly-anna
玩家 神庙 引力 码下这篇文章的缘由是某日看到一个问题：“优秀的游戏新手教学是什么样的？”脑海中立刻浮现出《塞尔达传说：旷野之息》（下文简称“野吹”）。作为一款“跑出山洞，就给你整个世界”的开放世界游戏，承担新手教学任务的初始台地几乎没有做任何强制引导，纯靠地图设计让玩家自然而然被新目标吸引，同时循序渐进完成对游戏内容的认知——应用——强化认知——深度应用。并且充分考虑到如何在玩家“不走寻常路”的情况下，还能保持游戏体验的连贯性。为了尽可能捕捉细节，本文选择以最“笨拙”的方法——重走初始台地——来进行复盘分析。文章包含大量个人理解，难免会对一些设计点有所遗漏或者理解错误，还请包涵。开场动画，主角林克被塞尔达的声音唤醒。玩家首先看到的环境是一间暗室，有限的光源为冷色调蓝光，给予平静、安全的感受。本文涉及所有“引力”要素均以红圈标示进入自由操控状态后，面向场景里唯一的蓝光物体，这里是“引力”概念的第一次应用。所谓“引力”，是任天堂在 CEDEC2017 关于《塞尔达传说：旷野之息》场景设计开发演讲中提到的，贯穿于整款游戏的设计理念之一。简单来说，可以理解为非强制引导下所有能吸引玩家朝向特定方向/去往特定地点的具备吸引力的因素。小如地上的素材，中如怪物营地，大到高塔、神庙。在暗室环境下，玩家就像蚊虫一样具有了“趋光性”，被吸引来到操作台前。在刚才的操作台获得重要道具“希卡之石”后来到下一场景，通道两边有宝箱提供基础服装，两侧的发光体起指示路径作用。向前看到橙色操作台，用希卡之石进行互动后操作台被激活，变蓝。同时封锁的大门上出现蓝色印记，随后打开。橙色和蓝色作为对比色贯穿了整个游戏。在这里，玩家大概能感知出“橙色代表关闭的、待激活的。蓝色代表开启的、可互动的”。随着游戏推进，玩家还能感受到其他对应特质。本文涉及所有路径指示均以蓝色箭头标示，所有地形遮蔽均以黄框标示林克大步跑出苏醒神庙，大世界初见动画结束再次进入自由操控状态。此时玩家可以看到中距离上有神秘老人和篝火，远距离上有突出的建筑物，配合自然地形，就可以在没有任何强制引导的情况下大致规划出如图行进路线。这种以远近‘引力’自然串连起路径的设计方法将被无数次地应用于游戏中。同时请注意路径右侧连续的岩壁，在左侧为低海拔地区已经“曝光”的情况下遮掩右侧地图内容，直到中距离引力点处才放缓。这便是任天堂在 CEDEC2017 上分享的另一个贯穿游戏的设计理念——“大地图三角形法则”。以自然地形、植被、人造建筑等形成对地图内容的分割遮掩。选取的障碍物大部分为三角形，辅以梯形等其他形状。一方面控制视野范围内的引力数量避免“一眼看到底”破坏探索乐趣或者造成选择困难，另一方面可以反过来将引力藏在障碍物后形成“柳暗花明又一村”的惊喜。同时，大型地形如山峰还能起到延伸出不同探索路径的作用。但先别急往前走！回头一看，老任在开头就给爱扫清地图的探索型玩家准备了见面薄礼。两根树枝作为最开始能获取的「武器」构成引力（此处注意树枝同时具有的「木质」属性），石头的遮掩让玩家越发好奇“后面会有什么？”走过去一看——三朵海拉鲁蘑菇！这是玩家第一次获得「回复物」总计一颗半心的生命回复量对于初始生命值不过三颗心的玩家来说算得上不错的奖励了。“鼓励探索”可以说是塞尔达一直以来的系列传统。在本作开放式引导的背景下，这一理念让玩家在资源匮乏相对弱小的初期即便随处乱逛，也能获得“快速达成主线目标”以外的乐趣。回到正常前进方向，依然是配合引力点串连的路径。往前走。来到中距离引力点篝火老人前，上图所示场景、前方小池塘以及右侧怪物营地一起构成了个人认为初始台地上设计密度最大、最精彩的一块区域。先看路径，此处可以分出三条行进路线。首先是 1 号路线，前面提到的右侧高耸岩壁遮蔽到此处趋于平缓，由于第一次出现“树上的果实”作为引力，玩家在尝试爬树获得苹果后高度正好可以跃向右侧。其次是 2 号路线，由小地图可知 2 号路线是主线方向，暂且按下不表。最后是 3 号路线，由未点燃的柴堆+玩家正常最快能获得的「金属」武器斧头+突出的悬崖作为引力，将玩家引到池塘。先看 1 号路线——1 号路线可以称作挑战路线。玩家跳上高台后就会第一次观察到敌对生物波克布林，而且一下就是三只组队形成的怪物营地！此时有没有拿之前的伐木斧将直接决定战斗难度。如果身上只有树枝要怎么打这场硬仗呢？答案是随便就过了……开玩笑。通常来说玩家会在第一次接近中学习到敌对生物的警戒值机制，以及在被发现时通过拉远距离解除仇恨的迂回战术。营地周围提供了卧倒的树干作为玩家潜行的屏障，未惊动敌人的情况下波克布林的武器是斜放在树干上的，提前收缴武器也能大大降低战斗难度，同时也是玩家第一次面对/获得「长杆武器」和「盾牌」，初步学习控制交战距离利用手长优势战斗，以及在闪避不及时利用盾牌格挡伤害。假如玩家忽视了潜行条件选择正面硬怼，营地周围也有足量生命值回复物提供容错率，尤其是篝火上那块大大的烤肉（考虑到本作允许游戏暂停下回复状态，除非弹尽粮绝或者一击必杀否则玩家并不容易被打倒）。此外，本营地也是游戏中玩家第一次遇到烹饪点，旁边还有第一种「属性效果材料」暖暖草果。相比只能将食材烤制的篝火，烹饪锅允许玩家自由组合食材做成料理，进一步强化能力。顺带一提，波克布林使用长杆武器发动“大风车”式攻击很容易将自身武器点燃，如果玩家不小心挨了一下，大概就能在黑屏的同时顺便学习到“木质武器可被火点燃增加伤害”了……归纳一下，任天堂在这里融入的教学信息，可以分为三部分：第一部分：战斗前消解对方优势。比如利用地形潜行偷武器；第二部分：战斗中创造优势。这里又包括 1.夺取对方优势，例如拾取被打落的波克布林的长杆武器和盾牌使自身获得“远距离攻击”和“防御能力” 2.加强自身能力，例如点燃自己的武器增加伤害；第三部分：没有获取优势。那么就给玩家提供兜底保护，例如三十六计走为上计的仇恨解除，以及战斗区域足量补给品。比较可知，能察觉并利用这些信息的难度，一＞二＞三。对战斗难度的削减作用，一＞二＞三。教学信息的传达完全程度，一＜二？三。以为任天堂很好地平衡了“玩家水平”和“教学信息输入量”之间的矛盾。几乎所有游戏在设计教学环节时都会面对一个矛盾：说少了新玩家学不会，说多了老玩家嫌啰嗦，也要骂。而一款游戏总是要面对游戏经验千差万别的玩家。野吹的方案，是为一场战斗融入多种解法的同时，阶梯式地将信息传达给玩家。任天堂并没有因为开放世界玩家自由行动的特性而保守地将初期所经之地难度一视同仁地拉低，在为“不慎路过”的新玩家提供较强保障的同时埋下了丰富的进阶战斗技巧，无论是身经百战的老玩家还是灵光乍现的新手都可能学习到更多内容而不是死板地一概从零教起。之所以在营地周围布置第一种带有属性效果的材料，是为了和营地前方不远处的雪地低温环境相关联。由于本作设定主角在低温环境下会不断损失生命值，玩家必须解决“如何取暖”的问题才能探索新区域。任天堂为游戏中几乎所有问题提供了复数解法，此处的方案是“把具有暖和效果的食材做成料理”。在材料分布上，营地和雪山大门前各有一处，尤其雪山大门前利用色彩反差做了额外显眼提示让玩家几乎不可能错过。数量上也达到了总和十余个，为初次料理的玩家提供了试错空间——虽说如此，只要最简单地将一个暖暖草果投入锅中就能获得具有取暖效果的料理“火辣炒暖暖草果”，这也是为了低门槛地为玩家提供“成功利用料理系统”的成就感。如果想要延长效果时间呢？投入两个草果，持续时间就翻倍了。这里的食谱设计看似简单，其实体现了一个非常重要的原则——使行为反馈符合直觉。我们见过众多游戏的拟真仅仅停留在更精细外观，并没有在逻辑上实现对现实经验的还原。考虑到本作在塞尔达传说系列历史上——包括其登陆的 ns 主机本身都十分重视对没有那么多游戏经历的蓝海玩家的吸收，这点尤其重要。1 号路线告一段落。回到分叉点。假设玩家没有选择 1 号路线。本文将正常必然会做的共通线“与老人互动”与池塘方向的 3 号路线放在一起说。篝火旁有一个烤苹果，通过物品栏对比或者老人话语可得到提示：烤制的食材具有比生食更多的回复量。烤苹果的位置则提示了“把生食材放在篝火旁边即成烤品”的制作方法。玩家刚刚从旁边苹果树摘取的苹果立刻可以用于实践，强化对“烤制”这一技巧的掌握。老人身后有一根火把，此时玩家第一次具有传递火的能力（细心的玩家会发现举火把的时候体温升高，这也是雪山地区“如何取暖”的另一解法）。但显然火把本身攻击力和耐久都有限，火把一收起火就会熄灭。如何增强传递能力呢？前方的伐木斧和未点燃柴堆提供了思路。使用伐木斧伐木即可获得柴堆，前面刚被摘取苹果的果树得到了充分应用。往前走到悬崖边到达池塘区域。看起来有些刻意的水生植物圈和池塘中间的石中剑构成了规划路线的引力。玩家的落水位置如果正好位于圈中，就会第一次激活收集要素呀哈哈（我知道你其实叫克洛格但是……我都被叫塞尔达呢你就忍忍吧），鉴于“跳到圈正中”并不算在通常逻辑上能获得奖励的行为，呀哈哈的出现就有了更强的“鼓励尝试”效果。入水之后，玩家会发现游泳是消耗耐力的，同时水里有青蛙和鱼类可以捕捉。鉴于是玩家第一次入水，加上捕鱼往往需要冲刺靠近更消耗耐力，所以池塘设置了多个落脚点，包括中心岩石都被设计成了二层式，玩家可以在中间落脚恢复耐力。顺带一提，在池塘中心设置“石中剑”这种尤其引人注目的引力有两点考虑，其一是塞尔达系列经典要素传承；其二也是更重要的点在于吸引玩家下水捕鱼……至于为啥尽量让玩家在这就获得渔获，后面会提到。而当玩家捕到鱼后，又可以返回篝火再次应用“烤制食物”的知识。当然，反馈也不会让玩家失望。注意此处预留了一个需要后续解锁新能力才能互动的引力点，预留的理由也在后面说明。此外池塘区域有一个个人感觉有趣的问题：假如玩家从池塘最远点高处掉下来的话，依靠初始拥有的一圈耐力刚刚足够爬上悬崖，但却不够从落水点游到池塘中心落脚点。而从玩家心理看，尤其是对极限移动距离预估能力缺乏的初期，落水后的选择应该更倾向于游向眼前水平面的中心落脚点而非挑战垂直面的岩壁。为何没有设计成也能极限距离游到？当然本作对力竭溺水的惩罚相对较轻，只是损失一颗心生命值，可以理解为“你都从最远极限点下来了就交点学费吧”。但似乎追鱼追到忘乎所以而交学费的概率要大得多……3 号路线告一段落。终于轮到 2 号主线了（然而马上又会走歪）。除了基本不会错过的篝火老人，从这里开始假设玩家错过了池塘和怪物营地内容。那么这里就是玩家第一次遇见敌对生物。可以看到由于没有像怪物营地那样提供能力提升的条件，所以只是孤零零地出现了一只拿着树枝的波克布林，难度曲线遵循了传统的“从零开始”。向前走，再次进入路线选择。右侧“不务正业”路线包含的引力点明显多得多，包括怪物和可探索建筑。所以……第二次遇见敌对生物，这次波克布林手持波克布林棒，伤害略有提升。还是很克制的难度增加。此处的 3 号路线通向的是之前的怪物营地，远方雪地即为之前提到获得暖暖草果的雪地大门。如果玩家走这条路线，便是单只树枝怪单只木棒怪怪物营地的经典难度曲线，经过前面战斗玩家拾取了更好的波克布林棒作为武器，就不用靠树枝硬怼了。途中有一只背对玩家的波克布林，考验玩家是否掌握蹲下静步从后方偷袭的技巧，偷袭能造成大量伤害。如果玩家顺着 1 号路线进入神殿，可以拾得弓首次获得远程攻击能力。对于探索型玩家，还能经由神殿外墙梯子爬上神殿顶部找到更强的弓以及有一个隐藏呀哈哈。当然，在完成初始台地所有任务后玩家也会跟随指引回到这里。让我们退回到初见树枝波克布林的岔路口，选择往主线方向走。任天堂在这片区域横向布置了三个怪物聚集点，从近到远从易到难，非常精彩地进行了“利用环境提升战斗力”的教学，个人认为老人篝火区后又一精华。首先在直通主线任务的路上（注意右下小地图）布置两个明显独立的圆石作为引力吸引玩家前往。到达地点后，玩家就能发现利用落石进行战斗的方案，之前被废墟挡住（复习“大地图三角形法则”）的滚木也显露出来提供了同理第二套战斗方案。这堂课叫“直接利用自然物”。经过前一堂课，玩家在来到右方第二处怪物营地时一眼就能看出最佳战斗方案。但这次的手段略有不同，虽然同样是推落石头，但并不是用石头直接命中目标，而是利用石头的冲击力引爆怪物旁边的炸药桶。这里是玩家第一次接触「爆炸」特性，顺便学习了引爆方式之“强力撞击”。这堂课叫“利用自然物和制造物的连携效果”。当然也没忘给玩家准备一块大烤肉作为奖励。再向右来到最后一处考验。玩家第一次遇到怪物基地，强度比普通怪物营地还要高。玩家不但要第一次面对哨塔（考验玩家绕视野规划路线能力），还要第一次面对精英怪（估计不少玩家看到基地里跑出一只异色波克布林会有点懵，随后就被一招秒了）。通过在远处观察发现基地内有炸药桶可以利用，但没有巨石如何引爆？细心的玩家会注意到悬挂的油灯，答案就是贴近后爬上眼眶处利用弓箭射落油灯。这堂课叫“利用自身装备不依靠自然条件达成连携”。同时这也是玩家第一次遇到特殊宝箱，解锁条件为清掉所在地所有怪物，而奖励也很有意思——火箭。这是对玩家理解“用火引爆”方式的奖励，再遇到类似场景就不用依赖油灯了。当然老任在这里留了一手，往后能得到更进一步的能力强化——炸弹箭——就连摆好炸药桶都不需要了。可以看到，三堂课的设计从无需装备支持到需要装备支持，从直接触发到组合触发。玩家在第一处感知到了利用环境条件放大战斗力的可能性后，无论是出于功利考虑（减少受伤可能）还是感官享受（爆炸效果），必然希望这种能力最终能内化为自身能力，带着这种念头经历接下来的四神庙解锁了特殊能力，正反馈效果不言而喻。当然了，开放式引导教学必然要面对“辛苦设计的内容被错过”的可能，引力也好三角形法则也好包括其他一切设计技巧都只能说尽可能增加设计要素被玩家发现的概率。这是开放的必然代价。反过来，充分发挥玩家能动性的丰富感受，也是死板的线性教学无法带来的。我们再次假设玩家逃课了直奔主线任务点，激活了初始之塔。再次关注“蓝——橙”对比色在应用上的信息统一。玩家初次登塔拥有不受阻挡的视野可以全方位观察初始台地，此后可以随时返回这里规划路线。下塔后老人再次出现，交代了接下来通过四神庙的主线任务，指明最近一座神庙的方位，一如既往的引力引导不再赘述，风险厌恶的玩家也能选择从左侧绕路。由于接下来每座神庙都会赋予玩家新的能力，任天堂在这四座神庙内部及其周围区域都设计了严谨的循序渐进的教学，尤其是初期多次考察新获得能力的基础运用非常符合艾宾浩斯记忆曲线。重点以第一座神庙为例进行说明。玩家进入神庙，将希卡之石置于台座上获得第一种特殊能力：磁力。随后学习最基本的“利用磁力控制并移动物体”。第二处，学习“利用磁力破坏结构整体性”，同时展示“被磁力控制的物体对其它物体也具有作用力”，最简单的可用于推、拉。遇到敌对生物守护者，战斗难度不大。此处隐含考察玩家能否利用磁力控制磁块推倒石块砸向敌人造成伤害，或者将磁块悬停于敌人头顶再取消磁力使磁块自由落体砸向敌人也可。学习“磁力在战斗中的运用”。再向前，需要搬运铁板搭桥到达正常跳跃达不到的地方，学习“利用磁力创造地形”，同时有一个可利用磁力取得的宝箱作为奖励。最后用磁力推开大门通关神庙。回到地面，神庙旁有球状、长条状磁体各一，方块磁体两个，水底有两个宝箱可用磁力吸出。同时此处还有更复杂的磁力使用场景在如图所示路线尽头。这里包含两个考验，其一是利用磁力把沉底的铁球吸起放到树桩的洞里，和之前水生植物形成圆圈一样“刻意”的设计，奖励是发现又一呀哈哈。其二是想方法来到超出跳跃距离的台上获得两个宝箱。此时神庙旁的磁体就发挥作用了。玩家可以把两个方块磁体堆叠起来作为跳板，或者利用长条磁体搭坡。把神庙内的教学内容复习了一遍同时增加了些许难度。在神庙外额外布置“作业”一方面使玩家短时间内重复应用加深记忆，另一方面符合获得能力成长后渴望检验能力的心理。当然环境互动作为本作最大亮点之一其深度远不止于此，随着游戏进程玩家会发现越来越多的用法。鉴于初始台地毕竟只是“新手村”，让玩家在此掌握基础即可。初始台地四座神庙外无一例外都有可供玩家检验新能力的场景，往后玩家还会看到神庙门口可用炸弹爆破的碎石堆，可用时间停止能力积蓄动能轰飞的巨石，可通过冰柱生成重见天日的宝箱。剩余三座神庙的内部流程不再赘述。额外提一段路。在从炸弹神庙往时停神庙移动的途中，玩家第一次遇到蜂巢，用弓箭射落蜂巢可以吸引蜜蜂攻击波克布林。这可能是玩家第一次目睹怪物“常规外”的动作（波克布林被蜜蜂追的落荒而逃）。任天堂为本作怪物设计了非常丰富的互动动作，而不仅仅是休息/攻击来回切换的“经验包”。海拉鲁大陆上的一切都是生动存在着的。向前到达木屋，爱探索的玩家能在房顶发现一只呀哈哈。进屋阅读桌上的日记，包含一个小解谜：破解“火辣海陆煎烤”的所需食材，收集完成制作料理给老人可以获得防寒服（解决雪地区域取暖问题的第三种方案，也是最佳方案）。同时，在小屋外玩家第一次采集到精力蘑菇，可以制作增加耐力的药剂，在这里设置精力蘑菇的原因在于，马上玩家就需要爬山了。谜团答案是暖暖草果+兽肉/禽肉（陆）+海拉鲁鲈鱼（海）。其中暖暖草果屋里就有，兽肉虽然按一头推主线的路线还没遇到，但屋外分布着不少禽鸟，利用弓箭（万一没弓箭刚获得的炸弹就派上用场了）射杀即可。唯独鲈鱼要是前面没捕就得回头跑一趟了——这就是前面所说要尽可能吸引玩家在池塘就地捕鱼的原因。不过，还记得池塘边需要炸弹炸毁的特殊石头吗？那就是给予不得不回头的玩家的额外正反馈——抓个鱼顺便能拿个之前拿不到的宝箱，也就能接受了。继续向前，向上攀爬的过程中，玩家初次发现分布在岩壁上的速速蘑菇，分布位置和能拿来当歇脚点的小平台位置相符。玩家一边采蘑菇一边爬，有效缓解了攀爬过程中的单调。当然可能有玩家嫌爬得慢，这就是为什么要在这里安置速速蘑菇咯。回头就可以做加速药剂。完成四神庙挑战，老人再次出现指示玩家回到时光神殿。可以发现此前暗淡的神像发光，上前对话可以选择消耗试练通过证永久增加生命值或耐力的上限。玩家根据自身风格可以选择性“加点”。爬上神殿屋顶（之前拿弓的地方）再见老人，老人揭露其真实身份，最后赠与关键道具滑翔翼，玩家获得安全飞出初始台地的能力踏入广袤的海拉鲁大陆，至此新手教学阶段就结束了。总结一下，从大地图看，玩家如果紧跟主线移动，则主要活动轨迹集中在东部。北部森林以及南部雪山其实还有不少待发掘内容。从宝箱和呀哈哈分布图来看，在并非主线必经之地的区域都用更加密集的宝箱和呀哈哈构成了探索驱动力，图中还没包括错落分布的怪物营地。总体来看，无论玩家身处初始台地何处，都能有事可做，且乐于去做。必须再次强调的是，这对于选择了放弃对玩家行为的强制控制力，转向开放式引导的任天堂而言，实现这点尤其不易。如何做好游戏的新手引导设计？试试这个「认知负荷」理论！游戏引导设计的重要性1. 快餐文化背景下的玩家追求：在游戏初对玩家进行最有效引导，是游戏设计的重要环节。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/the-legend-of-zelda-design
页面 用户 产品 编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从电商产品页的用户体验和交互的角度入手，详细梳理了分页的设计要点，不同的方案的使用场景和优劣对比，结合实际的设计案例进行了演示和解读：许多电子商务网站正在摆脱传统的分页控件，转而选择交互成本更低的设计模式，比如无限滚动。那么是否应该采用这些模式吗？通常，这取决于页面的产品数量。传统的分页模式会将项目列表拆分为多个页面，每个页面包含特定数量的条目。要查看更多选项，用户必须通过翻页切换到下一页——通常通过单击或点击 屏幕顶部或底部的「下一页」 按钮。每个页面都有编号，用户可以通过点击相应的按钮来移动到特定编号的页面。在亚马逊列表页面的底部，有一排按钮，一个指向上一页的左向箭头、一系列数字按钮，然后是指向下一页的右向箭头。亚马逊的分页设计采用了传统的分页控件（在蓝绿色框中突出显示），这种控件对于这个平台丰富的产品而言，非常具有实用性。像亚马逊这样的大型零售平台确实应该坚持传统的分页控制设计，因为当购物者探索他们庞大的产品集时，这种机制提供了精确的控制。对于产品较少或加载性能良好的网站，可能能够简单地一次加载页面上的所有产品。但是，如果您的网站有产品数量较少的分支页面，你可以考虑使用「无限滚动」或使用「显示更多」 按钮作为传统分页控件的替代方案。无限滚动，动态加载有些电子商务网站会提供一个产品列表页面，当用户向下滚动页面时，页面会不断加载更多项目。 无限滚动 或 延迟加载（在用户滚动到页面底部时加载更多项目）可以很好地适用于具有以下特性的电商网站：产品数量相对较少（通常产品数量少于 40 个）有高质量的 过滤器 可以帮助用户缩小结果范围有明确 告知用户要现实的条目数量（比如 42 件物品）Christian Louboutin 网站上的一位客户注意到，每次她滚动到页面底部时，都会加载更多产品——也就是采用了无限加载的页面加载方式。她说她不介意，因为加载时间非常快。「只要它加载，就可以了。如果我滑动到底部，结果需要再花 30 秒加载下面的内容，我就会失去兴趣。不过这个节奏还好。而且我是一个非常果断的购物者。我只是盯着看东西，看看有什么吸引我的眼球。」虽然此解决方案可以很好地适用于包含有限数量产品的网站列表页，但在下面两个情况下（在以下部分中详细讨论），应避免使用无限滚动的技术：用户有需要访问网站页脚导航中的重要信息。当页面包含大量产品时，用户可能会迷失方向，并且不知道他们在产品列表中的位置。访问页脚导航因为一旦用户向下滚动到页面底部，新项目通常会自动添加，因此可能在有限的滚动下，到达页脚区域。使用无限滚动的网站经常让用户感到极度沮丧，因为每次他们试图导航到页脚时，页脚都会不断地被自动加载的新条目推离到更远的地方。当用户向下滚动 Louboutin 网站上的列表页面时，会自动加载更多产品，这会将页脚推到页面下方。这个就是不应该对有大量产品的页面使用无限加载的部分原因——当用户想要抵达页面底部的时候，不应该为此滚动 15 分钟，尤其是当页脚是为了访问诸如退款退货或者别的功能的时候。产品数量如果在单个页面上查看一个类别中的所有条目是不合理的，那么使用无限滚动的控件也是不合理的。Tory Burch 的网站没有提供传统的分页控件，而是在用户滚动时，自动让其他的产品加载到产品列表页面的下面。大多数情况下，产品加载速度足够快，以至于用户看不到加载指示器，还得等待产品加载完成。由于网站的产品数量有限，加载速度快，所以效果很好。一位在 Tory Burch 网站上购物的用户，赞赏产品列表总能完整显示在一个页面上，因此她可以简单地使用滚动，就浏览完所有可用的项目。「我喜欢可以滚动浏览所有内容的布局。有些网站会得一页一页地翻页。在这里，我可以非常轻松浏览完网站的所有商品。」Tory Burch 网站在一个产品列表页面上展示了一个类别中的所有产品。每个类别包含足够少的条目（此处为 69），以至于单个页面就足以承载。在实现无限滚动时，显示产品总数很重要 。Tory Burch 网站在产品列表顶部标识了产品总数，靠近页面左侧有过滤筛选的功能。不过，这个筛选结果的数字标识并不是很明显。Tory Burch 网站上的列表页左上角有过滤器和条目总数 ，只是这些信息很难发现。Ann Taylor 的网站采取了一种更引人注目的方法来显示产品总数。这个数字在用户滚动页面时，保持固定在页面上，并在长页面下方显示用户的当前位置——当用户进一步向下滚动页面时，深黑色边框的大小会延伸以标识进度。该指标帮助用户跟踪他们当前的位置，帮助他们了解已经查看了多少项目，以及还有多少项目有待查看。Ann Taylor 在产品列表右侧的页面上显示了可浏览的产品总数，并且借助它的黑色边框来作为进度指示器。无限滚动页面，通常会破坏标准浏览器右边的滚动进度条，因此用户不能依靠它来确定他们在页面上的位置。随着新条目被添加到列表的底部，页面被拉长，又会改变标准滚动指示器的位置。曾经位于中间的页面的部分，很快就会变成现在更长页面的前八分之一。最好增加一个自定义进度指示器，来高速用户当前的位置。「查看更多」按钮有些电商网站没有采用传统的分页模式或无限滚动，而是 在其列表页面的底部放置「查看更多」 按钮。例如，时尚服装零售商 Aritzia 的网站就使用了这种模式。Aritzia 的网站在其结果列表的末尾提供了一个「查看更多」的按钮（以蓝绿色框突出显示）。除了 「查看更多」之外，一些网站还使用了类似的标签，例如：展示更多加载更多查看更多产品与传统的分页相比，这种方法合乎逻辑，因为绝大多数用户无论如何都会线性地浏览产品列表。此外，与页码式的分页按钮相比，尺寸更大的 「查看更多」 按钮更容易点击。这种方法与无限滚动的本质区别在于，用户必须通过点击交互才能加载下一组产品，而不是让它们自动加载。因此，与无限滚动相比，「查看更多」 按钮允许用户直接查看站点页脚。「查看更多」按钮可能会更加流行，尤其是作为表率的谷歌开始在其移动端结果页面上使用它们来代替分页的机制。我们经常警示设计师 不要一味抄袭大公司的设计，但谷歌是搜索的结果页的一个特殊例外。纯粹是因为它们的使用非常广泛，它对于塑造用户的习惯和预期有着极大的影响。谷歌在其移动搜索结果页面上使用了 「查看更多」 按钮而不是分页。允许用户自己选择是否加载更多商品，对于移动端的购物者来说是特别好的，他们可能在网络流量有限制的情况下浏览页面，因此不一定想持续加载额外的产品内容。此外，如果用户未连接到 WiFi，那么在移动设备上的加载速度可能会比较慢。Lowes 的移动端页面向用户展示了一个「加载更多」的按钮，以查看其产品列表页面上的其他项目。这种设计帮助用户查看超出这个页面的内容，这种动态加载方式不仅兼顾到页面导航的需求，而且提升了浏览的效率，减少了信息传输的数据浪费。不过，这个网站未能显示这一类别中商品的总数 ，也没有说明已经查看了多少产品，也没有说明还要加载多少产品。没有这些信息，一些用户可能会犹豫是否要加载额外的项目，因为他们不知道何时会翻到达产品列表的末尾。Lowes 移动端网站的早期版本没有显示列表页面上可用项目的总数，这使用户很难确定他们需要加载多少内容才会查看所有选项。更新后的版本之一，是通过在产品列表页面（左）的顶部添加搜索结果数量。但是，它没有通知用户屏幕底部还有多少项目需要加载（右）。如果你的网站将采用 「查看更多」模式，请务必告知用户：列表中的项目总数已加载多少项目还有多少项目要加载Lululemon 的页面设计比 Home Depot 的效果更好，因为它提供了已显示的产品数量以及产品总数。Lululemon 在其移动端页面上使用了查看更多产品按钮，它还告诉用户他们目前正在查看的产品总数（查看 40 of 333 ）。当用户到达列表页面的末尾并且没有更多要加载的产品时，就只显示产品总数，就像 Lululemon 所做的那样，去掉「加载更多」的按钮。当无法加载更多产品时，Lululemon 的「查看更多」按钮消失了。标识用户的所在位置无论您选择「无限滚动」还是「查看更多」的设计模式， 请确保您的列表页面支持 Pogo Sticking 功能 —— 这个通常指的是用户在搜索页面中打开一个结果之后，感觉不满意又返回搜索结果页面，再查看其他的一种行为。这种行为和 SEO 、网站排名、内容推荐有非常紧密的关系。一些网站不支持这种操作，当用户在点击了列表中某个条目之后返回之前的列表页面时，他们必须向上或向下滚动才能重新找到他们当初所在的页面位置。传统分页模式可能偶尔会出现此问题，但在使用「无限滚动」或 「显示更多」模式的网站，这种问题会特别常见，且令人痛苦。尽管使用了「无限滚动」模式，但 Christian Louboutin 的移动端网站在点击了「后退」按钮后，用户能够回到最初在列表页面中所处的位置。当用户使用移动端设备浏览信息时，这一点尤其重要，因为在移动设备上打开新标签比在大屏幕上更麻烦。结语如果你的产品规模相对较小，「无限滚动」和「查看更多」 按钮可能会帮助您的用户更轻松地探索你的产品。请记住通过可用性测试来发现设计中的潜在问题——比如无法访问页脚或「 显示更多」 按钮难以被注意到。延伸阅读：尼尔森团队出品！让用户沉迷产品的3个心理要素编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从心理学和认知科学的角度入手，基于「自我决定论」重新梳理了驱动用户的3个核心心理需求，结合实际的设计案例进行了演示和解读：在 Nielsen Norman Group，我们倾向于说用户不是懒惰的，而是高效的。阅读文章 > 复杂网站的导航模式要怎么设计才合理舒适？我总结了7个方面！编者按：这篇来自nngroup 的文章探讨的是如今的现代电商类网站（以及其他复杂的网站中）导航设计的问题，对比了传统的导航模式和混合式导航的使用场景和实际优劣，为设计这类网站提供了一个相对完整的设计思路：具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表阅读文章 > 从 4 个角度，聊聊长尾效应是如何帮助产品进行提升的编者按：长尾效应不是一个陌生的词汇。阅读文章 > Facebook 被上亿人指责的背后，可能是因为坎贝尔定律编者按：从 KPI 到 北极星指标，设计和产品团队都非常着迷这种杀手级关键性指标。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/alternatives-pagination-listing-pages
游戏 设计师 界面 在设计类的相关行业中，游戏 UI 设计算是一个比较热门且备受年轻人喜爱的设计行业。想成为一名优秀游戏 UI 设计师，除了要具备熟练的软件操作能力和优秀的绘画能力之外，创意表达能力也非常重要，这是核心竞争力，创意表达能力越强，就能在专业领域走得越远。当然从入门到精通一切都得一步步来，需要项目的经验累积和时间沉淀。对初级游戏 UI 设计师来说，能按照定好的 UI 风格组拼出新的功能界面，是最基本也是最紧要的一项能力。所以设计师要多了解熟悉不同的游戏 UI 设计风格，并掌握对应的设计规律和技巧，这样也是为自主设计游戏 UI 界面打基础，是进阶高级游戏 UI 设计师的必经之路。要达到以上要求，需要设计师积累大量的游戏界面设计参考素材。那么如何快速准确的找到这样的设计参考资源呢？所谓有需求就会有供应，为了解决这个游戏 UI 设计师的共同难题 ，来自英国的 UI 设计师 Edd Coates 创建了一个能快速有效的搜集游戏界面设计参考资料，且免费开放使用的灵感网站——GAME UI database。GAME UI databas 主页GAME UI databas——游戏UI设计灵感网站和其他许多游戏 UI 设计师一样，Edd Coates 一直想有一种更快、更有效的方式来搜索游戏 UI 设计所需的参考资料。于是在 2020 年疫情期间，他创建了 GAME UI database，来帮助自己和同行业设计师更高效地工作。网站创建后受到广泛地支持和好评，被 Insomniac Games、Arkane Studios、Double Fine 等多家游戏开发公司引做专业参考工具，并于 2021 年 8 月在 Pocket Gamer 移动游戏大奖中获得了“BEST TOOLS PROVIDER”奖。这些都很好的证明了 GAME UI databas 功能的实用与强大。资源丰富，类型全面GAME UI databas 站内一共包含 920 款精品游戏，各类游戏界面参考共计 38000 多张，且参考图片都非常高清。在里面你可以找到游戏界面设计的所需各类资料:主界面和 HUD、地图页、引导教程页、物品及解锁页等等，可选的游戏平台包括电脑、手机/平板和掌机。这样丰富的资源量和专业的功能分类是其他一般的设计网站所不能比拟的。GAME UI databas 对站内参考资源按功能进行了细致的分类知名优质的电子游戏界面设计参考在站内都有，如艾尔登法环、动物之森、最终幻想、巫师、饥荒、上古卷轴、最后生还者、无主之地、蝙蝠侠：阿克哈姆、愤怒的小鸟、光之子、吃豆人等。在页面顶部的搜索框中输入游戏名称，进入对应的游戏项目页面就能看到相关的界面截图。近期大热的「艾尔登法环」的游戏界面也已被收录精准的按需搜索除了按游戏名称和功能对网站内的资源进行搜索，GAME UI databas 还提供了细致的分类索引，帮助设计者精准找到所需的类型。无论是按游戏类型、按主题、按界面风格，还是按材质、按视角、按元素，都可以直接点击对应标签实现快速筛选。站内还设有按关键词搜索，所有包含该词语的的页面都会被呈现。拓展运用虽然 GAME UI databas 主要针对的是游戏界面设计领域，但是一款优质的游戏在多个方面都是有设计借鉴意义的，很多游戏的 logo 设计、字体特效、美术风格、配色等同样出彩，对相关行业的设计师来说也是一项不错的灵感来源。多样的字体设计及字效这种可爱的游戏界面对喜欢扁平插画的小伙伴也是不错的参考总结如果是在花瓣、Pinterest 上搜索游戏 UI 设计参考资料，得出的结果往往零散且并不精确；设计师自己去下载游戏进行研究又过于耗时耗力。相比之下，资源丰富、类型全面，可快速进行精准搜索的 GAME UI databas 就好用很多，这种游戏 UI 设计领域的垂直搜索平台无疑是提升设计师工作效率的神器。附上官网地址，有需要的小伙伴赶快收藏吧~「GAME UI databas 官方网站」 https://www.gameuidatabase.com/index.php了解更多游戏 UI 设计资源：比花瓣还专业！200多款顶级游戏的UI和交互设计都在这里！很多时候，做设计需要找参考。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/game-ui-database
插画 课程 手绘 知乎有个 10 万多人关注的问题，叫「有哪些值得长期坚持下去的好习惯？」对设计师来说，画画肯定是最值得坚持且受益终身的那个习惯：越来越多大厂喜欢用个性化插画闪屏页；职场上招设计师都要求有手绘功底；几乎每个设计师都意识到了手绘的重要性。但画画这件事，往往起步于挑选 iPad，到了最关键的画画实战，却少有人能坚持下来。为什么画画难以坚持？对大部分非科班没系统学过插画的同学而言，不熟悉正确的绘画流程、不懂如何观察、快速打草稿、上色等，会在每个环节都耗费大量时间。既然画画这么难，那些非科班的人是如何偷偷成为插画高手的？来看看「iPad 速涂特训营」往期同学的反馈：学习过程轻松愉快，公式降低出错率，提高画画速度课程很好消化，对新手也相当友好课程超值，七巧板概论最有收获！这个让人感觉轻松愉快、对新手友好的画画方法，就是高级插画师都在用的「速涂」。不夸张的说，在我采访过的插画大触中，几乎所有人都学过速涂。因为这是一个能让你爱上画画，找回画画成就感，甚至画上瘾的练习方法。看石头老师的更新频率就知道他有多喜欢速涂：什么是速涂？简单说，速涂是插画师在短时间内，运用庖丁解牛般的分析手法，把复杂的画面层层解析，抓大放小，快速成稿的一种绘画练习方法。为什么能快速提高绘画能力？1. 时间短无需抽出整天的时间，一个多小时就能完成，无需手绘板，拿上 iPad 通勤时间也可以练习。2. 见效快一小时出稿，画完发朋友圈和微博，成就感满满，说不定还有机会破圈。从形体、配色到光影的全方位练习，不再局限于某个知识点，系统提高插画水平；3. 完整体系教学从建筑、植物、食物、光影细化到场景插画无一不包，囊括了插画的大部分绘制需求。但如果你完全没速涂基础，不知道从哪里开始练习的话，别急。4. 课程全新升级！加强版！由于上期有很多学员反馈，结课后希望有一个进阶/加强班：所以第四期课程我们做了全新的升级加强，分为两大阶段，前期针对训练，通过 5 大综合项目，帮你掌握从形体概括到光影的 5 项完整速涂能力，同时通过 4 组专项训练，针对性提高配色和造型水平。最关键的，这次新增 3 轮场景实战速涂项目，用综合性的训练，帮你彻底巩固前期的方法技巧。《36 天 iPad 速涂特训营》升级加强版来了！课程原价 599 元，最后一天特惠价 499 元之后立刻恢复原价！移动端扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_61f3623ce4b02b82584767f3/6从零基础到速涂达人的全方位拔高！在这门 iPad 速涂特训营里，你可以收获到的不止是可以实时问答的直播教学，典型作业的点评修改，更有超多的速涂干货，包括不限于：1. 六大插画实战案例手把手带练教学课程实战案例囊括了多种插画风格，绘制类型也从建筑、植物、食物、光影到场景，逐步提升手绘水平。2. 一套速涂练习的通用核心方法如何观察画面才能把握正确的画面层级？如何快速概括形体才能又快又准？短时间内怎么塑造光影，构建层次感？老师的总结的公式和方法特别容易上手，即时是非科班生也能做到心中有数：3. 四大速涂专项训练七巧板造型训练配色训练黑白两分叠加训练细化训练4. 新增 3 轮综合场景实战项目借助完整的速涂场景项目实战练习，帮你巩固前期学到的速涂技巧。5. 热门手绘软件 Procreate 快速上手指南以前没接触过 iPad，不会使用 Procreate 也不用担心，我们有单独一节课来讲解软件基础和核心操作。（注：Procreate 是付费软件，需自行购买）6. 老师私藏 iPad 绘画笔刷所有参加课程的同学都可以免费领取石头老师的私藏笔刷。7. 结课后免费加入速涂打卡社群，继续学习进步结课后大家可以参加闫实老师的打卡社群，与一帮热爱速涂的同学一起，不断提高绘画水平：更多的干货不一而足，直接看课程大纲最实在！课程原价 599 元，最后一天特惠价 499 元之后立刻恢复原价！移动端扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_61f3623ce4b02b82584767f3/6拟定这份大纲的闫实老师，很早就已经是 iPad 绘画圈的人气大咖了，他不仅是速涂的高手，也是高级原画师，手绘功底非常扎实，作品见真章：闫老师速涂作品学完课程能画成什么程度，看作业就知道了：学员作业篇幅有限暂不全部展示，想了解更多可以添加客服「uisdc003」想跟着闫实老师在 36 天内学会 iPad 速涂，养成每天画画的好习惯，现在就抓紧啦！课程原价 599 元，最后一天特惠价 499 元之后立刻恢复原价！移动端扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_61f3623ce4b02b82584767f3/6本篇来源：优设网原文地址：https://www.uisdc.com/quick-draw
物品 表单 用户 执行类产品中，信息录入是用户工作中最常见的场景之一，用户按照要求录入信息提交给系统，系统整合信息以完成执行结果。页面中，由属性控件和数据容器组成的实体是整个录入流程的载体，录入流程设计的关键是「信息编排」与「高封装度表单」。帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。录入流程设计关键「信息编排」：将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。每部分内容单独处理，但最终一起完成提交。通过适当的任务分割，可以降低用户出错率。「高封装度表单」：根据表单的结构关系判断、寻找共性的内容，将他们封装为一个卡片，也可以封装成一个组。主要的目的就是减少用户认知负担，提升操作/使用效率。案例：B端某仓网布局项目项目背景：物流侧因某些原因需经常搬仓，规划侧需知道搬仓对拆单率及耗材费用等影响。因此，上线搬仓模拟系统，辅助业务在线上模拟与评估搬仓方案，通过系统自动化测算搬仓前后的各项指标，决策出最优的搬仓方案。用户痛点：搬仓模拟流程复杂，录入数据繁多，用户线上录入搬仓物品的效率低下。设计目标：调研整理用户工作流程，通过整合任务场景，设计逻辑清晰操作简单的录入流程，优化搬仓路径下各物品集的操作及展示。1. 「信息编排」区分信息间层级关系-使用格式塔心理原则对项目、任务与物品集进行层级区分展示。整体逻辑为项目包含任务，任务包含物品集，一个完整的项目包含基本信息+任务。再根据信息关联性将每个信息点集合成信息组。并根据眼动原理设计最优浏览路径（F型动线）。近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 项目=A基本信息（项目名称与模拟时间）+B任务（最多5个任务，其中任务包含搬仓路径与搬仓物品；每个任务最多包含5个物品集，物品集包含搬仓物品维度与温层属性）2. 「高封装度表单」根据搬仓逻辑及表单结构关系（项目>任务>物品集）及每个结构下添加的内容的一致性（每个任务必须填写搬仓路径及物品集，每个物品集必须选择物品集维度及温层），将他们封装为一个卡片，每个卡片内的结构内容封装成一个组。除了嵌套逻辑，高封装度的表单还要注意组件选取，高封装度表单要保持组件选择及样式的一致性，整个封装组件要有可复用性，整个录入流程从视觉层到交互层给用户一致的体验，以此来减少用户认知负担，提升操作效率。最后以上就是「录入流程设计」的全部内容啦～后续会为大家分享关键信息密度提升设计、场景化设计等一系列的设计方法，希望能给正在从事或准备入局B端的的小伙伴带来启发，也希望跟大家一起探讨更多的B端设计方法。万字干货！超全面的B端设计指南：选择录入（一）在前两篇文章中，我们主要讲到 B 端产品最为重要的信息展示组件表格的设计思路，根据不同的场景对表格进行了答疑，同时部分读者与我反馈，想让我聊聊选择组件的一些内容，今天就来简单聊聊在「数据录入场景」中的一个小点：选择录入。阅读文章 > 万字干货！超全面的B端设计指南：选择录入（二）关于下拉选择器、日期选择的攻略耐心看完，你一定有所收获！阅读文章 > 原创内容，未经授权请勿转载！本篇来源：优设网原文地址：https://www.uisdc.com/input-process-design
鼠标 插件 一键 此教程主要讲的是 Figma 配上 windows 下效率神器 quicker 快速打造适合自己的插件中心，且更快速高效的使用 Figma，mac 端由于没有这款软件，请使用第三方工具如 figma ex 等插件中心吧。Figma+quicker 能做什么？鼠标一键快捷启动任何自己想要的启动的Figma插件（只需要鼠标一点，3秒快捷启动，速度快到飞起）鼠标一键打开Libraries鼠标一键创建组件（此方式很懒人，都不用移动鼠标，正常情况下创建组件需移动到顶部点击，可我连鼠标也不愿意挪动就想实现）鼠标一键在设计稿上打开原型界面（懒人方式，不动鼠标）鼠标一键实现任何Figma的快捷方式插件中心（自定义自己喜欢的插件快捷方式，悬浮在Figma工作页面或桌面的任何方式，想用的时候点一下快图标即可启动文字）更多…..（你能想得就是你能做的）能实现的功能演示1. 鼠标一键快捷启动任何自己想要的启动的 Figma 插件实现自定义自己常用的 Figma 插件，只需要轻轻一点即可使用！此处举三个快捷启动插件例子：Unsplash、ChineseFontPicker、ChineseFontPicker、Chinese Content Filling Assistant 这三款插件为例接下来的演示从头到尾没有使用键盘，也没有任何加速！快捷启动 Unsplash 插件快捷启动 ChineseFontPicker 插件快捷启动 Chinese Content Filling Assistant 插件2. 鼠标一键打开 Libraries3. 鼠标一键创建组件4. 鼠标一键在设计稿上打开原型界面5. 鼠标一键打开组件库 Comeponents6. 搭建适合自己的插件中心+快捷功能使用中心演示看完，再解释一遍，没用键盘输入，没有快进！说完接下来说说如何实现如何实现上述演示功能1. 了解 quicker 安装和使用qicker 官网： https://getquicker.net/第一步进入页面之后点击立即下载，然后安装好之后注册登录即可如果不想付费，可以使用体验账号进行体验，如果你觉得用的方便再付费。（不要说我是给这个软件推广的，我推荐码都没贴，自己体验用着方便再付费，我只安利高效快捷的 Figma 技巧）第二步登录注册好之后，打开 Figma，Figma 界面任意区域右键按住是按住！！超过 1 秒即可，这个可以自己设置的），quciker 的启动方式就是右键按住。当出现如下图中红色圈中的文字，「为“Figma”添加场景设置」（ps：我这里因为已经创建了，以网易有道词典为例子），点击这个文字即可2. 在 Figma 中使用 quciker选择你需要的动作链接，然后点击复制，到 quicker 中粘贴即可！下方 是我分享的几个动作链接快捷启动 Unsplash 插件动作： https://getquicker.net/Sharedaction?code=829ea9e9-fc5a-4d71-a7d6-08d9f66c4585启动 Chinese Content Filling Assistant 插件动作： https://getquicker.net/Sharedaction?code=8dafbae6-6a7b-4e80-a7af-08d9f66c4585&fromMyShare=true快捷启动 ChineseFontPicker 插件动作： https://getquicker.net/Sharedaction?code=db7a2a3f-4047-45a0-a7d7-08d9f66c4585&fromMyShare=true鼠标一键打开 Libraries 动作： https://getquicker.net/Sharedaction?code=d6ea5a95-f01e-4d2e-a7d5-08d9f66c4585&fromMyShare=true鼠标一键创建组件动作： https://getquicker.net/Sharedaction?code=555a49a7-7522-4f92-a7d8-08d9f66c4585鼠标一键打开组件库 Comeponents： https://getquicker.net/Sharedaction?code=d63dd2e5-7110-4ecc-a7b2-08d9f66c4585&fromMyShare=true搭建适合自己的插件中心+快捷功能使用中心动作： https://getquicker.net/Sharedaction?code=d6a48e4e-4afb-4346-6dee-08d887b8882d在 figma 中的 quicker 场景中的空白部分粘贴动作即可，具体操作请看下方的 gif具体讲一下插件中心怎么搭建搭建思路：利用分享的快捷功能（就是演示中可以悬浮的，可移动的，时常显示的 quicker 面板）利用这个动作，然后把自己想要设置的一键启动插件、一键打开 Libarary 这些动作复制到这个到这个面板上，然后使用的时候直接点击即可！具体可以看我下方的 Gif好了，今天的分享到这里就结束了，下一期文章继续讲这些快捷动作的思路（让每个人都能建立适合自己的 FIgma 插件中心）如果你觉得这个方法还不错的话或者需要更多的插件动作而您又不会设置，请关注我的公众号。写在最后的话：个人而言，搭建的时候确实有点摸不到头脑，但是熟悉之后绝对能极大提升你使用 Figma 的效率！所以，有兴趣的朋友一定要试试，不要怕麻烦！欢迎关注作者微信公众号：「欢娱设计」这 9 个效率逆天的 Figma 插件，用完回不去了！第二波插件推荐，都是我用过觉得还不错的，希望你们能喜欢！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/figma-quicker
用户 互动 形式 前言评论区是一个神奇的地方，它可以拉近用户间的关系，也能增强用户与产品的联系。那么好的评论区该如何设计？本篇文章将通过三个维度、九个考量点对评论区的设计进行拆解，希望能对大家有所帮助:-)评论区设计的三个维度&十个考量点从产品维度定义评论区类别当拿到构建评论区的需求时，别着急出方案，先看看自己的产品是什么类型、适合什么样的评论区；公众号的评论是被作者选择性地“晒”出，生鲜超市类 app 的评论区是只能看不能回——产品类型不同、其评论区类别也不一样，这里有三种评论区类型供大家选择：从产品维度看评论类别1. 单向评论区单向评论偏向于让用户发表自己的观点，重点在评论内容本身的浏览上，用户与用户之间不可互动。如应用商店、外卖 app 的内容详情页中，评论内容是用户后续行为——下载应用、下单外卖的影响因子之一；2. 双向评论区双向评论多应用于作者与用户之间的留言互动中。如公众号的文章留言区，用户发表观点、作者可选择性地进行回复。双向评论更强调作者、读者之间的关系，整个评论区（留言区）的互动性不强；3. 多向评论区多向评论区顾名思义，用户可以在评论区发表自己的看法、也可与他人进行交流互动，这在社交 app 上、新闻资讯 app 等较为常见；设计师需要根据自己的产品特性，在设计之前，先来选取最适合的评论区类型。“看评论”时的五个设计考量点在确定了评论区类别之后，就可以去设计用户“看评论”的体验了；这里可以通过以下五个考量点来分析： “用户看到了什么” ——关系着评论区内容元素、展示形式、排序方式的呈现； “用户怎么看到的”——同正文与评论区间跳转方式、以及一级二级评论的跳转方式有关。“看评论”时的五个设计考量点1. “看评论”之内容元素评论区内容元素主要分为两部分，评论区入口+信息展示：评论区入口——通常是评论icon、评论量数字、“评论“二字说明，设计师按照产品的调性直接设计即可；评论区信息展示——分为说明类信息（e.g.评论内容）和互动类信息（e.g.点赞、回复)；设计时需注意各类信息展示的位置，以确保信息看起来动线流畅、用户操作起来移动距离最小。“看评论”·评论区内容元素之信息展示2. “看评论”之评论展示形式app 评论区常用的大致有四类展示形式——主题式、平铺式、盖楼式、引用式，这些“XX式”是什么意思，又适合在什么场景下用呢？主题式：如下图，用户对正文内容发表的一级评论在上，他人的回复则折叠在下方；因为一级评论通常以热度的形式排列，所以“主题式”可使优质评论获得更多的曝光，更容易吸引其他用户查看、并参与讨论中去；平铺式：对于“平铺式”的展示形式来说，评论和评论回复都处于同一个层级上，视觉上没有明显的层级区分；以朋友圈为例，在熟人社交圈子中，大家评论回复的层级是相同的，朋友圈的用户可以通过时间的先后顺序直接浏览；旧版某乎的精选评论页也为“平铺式结构”，当用户对某条精选评论感兴趣、进去详情页浏览时，只要从上往上依次阅读即可；盖楼式：如同字面意思，评论区用户之前的互动内容像在盖楼一样，一层一层向下堆砌。应用盖楼式展示形式的典型例子就是某易新闻——用户可以按照楼层依次向下浏览，虽然看得时候比较清晰，但因“盖楼式”的结构比较复杂、所占面积较大，在移动端上屏效会相对较低，可能影响用户的阅读效率；引用式：从名称上大家可以理解，用户 B 回复用户 A 时，B 的回复内容下方会显示 A 的评论内容。“引用式”的好处时便于读者理解，但劣势同“盖楼式”一样，移动端使用该样式会影响用户的浏览效率，在 PC 端上会更为适用；主题式、平铺式、盖楼式、引用式..展示形式虽然多样，大家可以根据自己产品的需要来选取合适的展示形式。3. “看评论”之评论排序方式不仅评论区的展示形式有四种，评论内容的展示顺序也有四种排序方式：评论按时间正序排列：按时间正序排列意为内容按照发布的时间由旧至新排列，其排列方式符合用户阅读时的逻辑顺序，用户可以通过时间线将大家的讨论内容串联起来，方便阅读、减轻了认知负担；评论按时间倒序排列：与评论正序排列相反，倒序排列会将新评论在上、旧评论在下，更适用于强调内容时效性的场景中；评论按热门程度排列：大家常看到的“精选评论”便是按照热门程度排列的——后台会计算出各条评论的“热度值”，衡量维度通常有评论的点赞数、回复数、或负反馈数等等。为了避免马太效应，热门程度的排列公式中通常也引入“时间衰退因子”，这对强调时效性的资讯app来说比较重要；评论按混合式排列：混合式排列方式简单理解可为上方评论“按热度”——展示精选评论，下方评论“按时间”——展示最新评论；这样排序使得用户既可以感受到热评的趣味性、专业性，也更有意愿来参与大家的讨论。看完了这些，你的产品评论区适合什么样的排序方式呢？4. “看评论”之正文、评论区的查看方式分析讲完了用户“在评论区看到了什么”，那我们就再来讲讲用户“怎么看去看评论”。首先是正文与评论区间的跳转，通常会用以下四种方式来实现：“看评论”·正文、评论区的跳转方式锚点定位、跳转至评论区：这种是比较常见的交互形式——点击评论icon后，通过页面的锚点定位直接跳转至评论区；待用户浏览完评论区内容之后，用户可再次点击评论icon返回至正文位置；上滑页面，评论区跟随在正文后：很多资讯 app 的评论区都跟随在正文尾部，在浏览完正文后，用户通过上滑页面便可以看到评论。对于用户的行为路径来说，这种方式是符合用户先阅读、后查看讨论、参与讨论的逻辑，但为了营收与数据，正文、评论区之间会夹杂了相关推荐与广告，会对用户的正常浏览造成一定的干扰；手势滑动、进入下一级页面查看评论：以某讯新闻为例，用户可以左滑直接进入评论页浏览；手势交互的好处是便于用户操作，但也具有一些的小“缺点”，如滑动进入下一级页面的操作是否符合用户认知、滑动手势是否在所有场景下都会适用等；评论内容以弹层形式呈现：在用户点击评论 icon 后，评论区以弹层的形式弹出——这是大多数视频类app常选用的，也是本次vivo浏览器评论区优化所采取的跳转形式。从手机屏幕的空间利用上，“正文内容”处于二维的x、y轴上，评论区以弹层的形式在z轴空间里交互，提高了手机屏效；从用户操作上来说，弹层的使用提高了操作效率，同时因弹层交互的普适性，用户的学习成本也较低；从内容的底层逻辑上来讲，评论属于资讯详情的一部分，用户通过弹层来进行资讯的延伸阅读，这种分层交互也符合详情页浏览的逻辑结构。“看评论”·评论区以弹层形式呈现5. “看评论”之评论、回复间的跳转方式分析对于“用户怎么看评论”，除了“怎么查看评论区”，也还有“怎么查看评论与回复”；后者的查看方式整理后大概有下图三种：1）在原位置直接展开更多“回复”：以美版某乎为例，其优势是操作成本、浏览成本都很小，弊端则是会影响到用户阅读下一条评论（屏幕滑动距离更长）；2）在下一级页面里再展示完整的“回复”；3）以弹层的形式来进行“回复”的完整呈现。“看评论”·评论区展示形式之评论、回复间的跳转方式根据以上五小考量点，大家可以根据自家的评论区特点及现状，选取合适的方式方法去做用户看评论的设计体验。“评论互动”时的三个设计考量点当完成了“看评论”的设计分析，那下一步就需要进行评论区互动时的设计分析啦。大家可以通过以下三点来考量：功能支持、手势操作、评论输入。“功能支持”以大家各自的支持产品功能为准，本文就不再赘述；这里就为大家简单讲解一下后两点的分析。1. “评论互动”之手势操作分析下面是对在不同类型的产品中，用户进行单击、双击、长按、滑动等手势操作反馈的整理：单击评论区内容：不同类型的产品，单击评论区内容的操作反馈会有所不同。如社交类 app，除了“评论”，也有“转发”等其他与之同等重要的功能，所以点击该类型产品的评论区内容时，会弹出“更多功能”弹层以让用户选择功能的使用；对于新闻资讯类 app，评论区是用户交流想法的地方，所以当用户点击评论内容，弹出输入框和键盘会更符合当下的用户预期，便于用户的操作使用；双击评论区内容：在社交 appIG 中，双击点赞的交互手势在产品的各个模块是通用的，用户自然而然就会有评论区“双击可赞“的认知。然而其他产品中，“双击赞”可能并不具有通用性。如果大家要在自己产品中选用双击手势的交互，可能要注意引导用户学习噢~长按评论区内容：通常情况下，长按是去使用评论区的更多功能。如下图，用户长按评论区，可以进行复制、分享、负反馈、翻译等操作，以满足用户在评论区的期望型功能的使用；2. “评论互动”之评论输入分析发评论路径分为了输入的“前、中、后“三阶段，大家设计时需注意以下三点：“评论互动”·评论输入之三阶段输入前告知：评论框里的默认文案可以起到引导用户评论、提示评论用语等的作用。如“说点什么吧”，可以促使用户去发表看法；如“有爱评论，说点儿好听的~”，可以侧面提示用户要文明评论等。大家可以结合自身的产品调性、设计目标，选择适合自己的文案风格；输入时协同：评论输入时，设计师需要考虑到不同场景下用户的评论诉求，提供合适的功能以提升用户的操作效率、使用体验。如团购 app 发评论时，输入框会提供“环境”、“服务”、“菜品”等标签，既降低了用户评论过程中的难度，也使得评论多维度、更丰富。同时，评论输入时大家也要注意异常场景下的防错设计，比方说误操作、键盘收起时，用户的编辑记录要帮他留下来喔；输入后反馈：发送评论后，产品需要给予用户明确的反馈结果，常见的有 Toast 反馈、评论区跳转定位等。大家注意啦，做评论区跳转定位时要给文本背景一个颜色变化的提示噢，避免用户在茫茫字海中迷失～总结以上内容就是评论区设计时需要掌握的对产品类别、看评论、评论互动三大维度、总计九个设计考量点的阐述。设计师们可以酌情参考文章内容，通过在各个考量点的打磨、创新、组合，打造适合自家产品的“最佳评论区设计”。轻松3招搞定评论区设计风筝KK：评论区在 APP 中有着不可或缺的地位，评论区又主要分评论入口、评论展示、评论排序三个方面，不同属性的 APP 评论区侧重点又都不一样。阅读文章 > 欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/comment-section-design
星级 自己的 文章 背景介绍我是从测试被动转交互的（转岗原因不是这次的重点，就不在这里描述了），以前工作的公司是家小公司，没有所谓的交互设计岗位，所有我对交互设计一窍不通，以至于画了一段时间的线框图之后，依然没有找准个人定位，走了不少弯路，浪费了不少时间。所以写下这篇文章，总结了下自己这段时间的学习经历，同时也给想转交互设计的同学一点借鉴。曲折经历一开始，我以为自己干的是产品经理助理的活，什么功能调研、原型设计、需求文档编写…所以走的应该是产品经理的路，为了能快速成长，就看了产品经理的视频教程，又看了许多关于产品经理方面的书，比如《人人都是产品经理》、《商业产品经理》…可是看完之后只是了解了一点皮毛，并没有掌握所谓的产品经理技能（教程、书籍中提到的技能，商业思维、用户画像、竞品分析、数据分析等，并非一朝一夕练成的，需要大量的实践）。既然如此，那就想着先从最简单的画原型图入手吧，至少先把原型图画的好看一些。画了一段时间的图之后，感觉画图没有太多的技术含量，尤其在领导要求我们学习如何画图标之后，我又琢磨起了视觉设计常用工具的使用，比如 Adobe XD、PS、illustrator…还看了这些工具的使用教程（看完之后挫败感很强），后来使用 PS 绘制了几个简单的小图标，虽然顺利上线，但还是感觉视觉设计太难了（像我这种学习能力一般的人，没有人指导的话，想要出师太难了）。一番尝试之后，终于找准了自己的定位，原来我内心最想做的是交互设计。只是以前，我把交互设计岗位想的太简单了，以为交互设计师就是做做功能调研、画画线框图。其实不然，真正的交互设计需要掌握的东西很多，例如用户调研、需求分期、画流程图、可用性测试、数据分析…根据二八原则，原型设计最多占整个过程 20%的工作量，而前期的准备工作、后期的分析工作等至少占据 80%的工作。找准定位之后，我就开始朝着这个方向前进。为做好交互设计所做的工作1. 学习工具的使用对于 Axure 工具的使用，刚开始是公司同事给我简单的培训了 2 节课，学习的并不系统，所以为了更熟练的使用该工具，于是我找来了 Axure 的视频教程从头到尾看一遍，然后关上视频教程，把老师所教的知识点，自己动手重新画一遍（一遍记不住，就多画几遍）。Axure 对于交互设计师，就像画家的画板、画笔、颜料等工具，在画画之前，至少先把绘画要用的工具准备好，才能开展下一步的工作。交互设计无需掌握过多的工具，只要你能把 Axure 用的很溜，其他的工具只是锦上添花。2. 看交互设计相关书籍把别人推荐的交互设计相关书籍看一遍，比如《步步为营：交互设计四策略》、《简约至上：交互设计四策略》、《App 草图+流程图+交互原型设计教程》等，把这些书看一遍之后，虽然不能完全掌握，至少能把交互设计的基本知识、工作流程了解个大概。3. 看优设总结优设上关于“交互”的总结比较多（20 页，每页 30 篇，约 600 篇总结），如何在最短的时间内看完全部的总结呢？这里简单介绍下我的“学习五步法”：检视阅读筛选分类制定计划主题阅读总结（知识重组）。交互频道 https://www.uisdc.com/category/interaction首先，可以先花几个小时的时间把全部的文章浏览一遍，通过“检视阅读”（通过看文章标题、段落标题、重点标注内容）快速把文章浏览一遍，就能大致了解这篇文章讲述的内容。浏览之后，给每篇文章进行打分，从 1 星级到 5 星级，1 星级就是没有太多参考价值的，可以直接过滤掉；2 星级是有几处说的很不错的，可以过滤掉，也可以先保留下来；3 星级是大部分内容有参考价值的；4 星级就是需要阅读 2 遍以上的；5 星级就是需要反复阅读的。一番筛选之后，可以帮我们节省很多时间，提升阅读效率。然后把筛选出来的文章，根据内容进行分组（比如哪些是介绍组件的，哪些是介绍交互设计规范的，哪些是介绍交互设计原则的），并按照“星级、标题、关键词、参考链接”几个维度记录下来。把全部总结分类汇总之后，开始“制定计划”，比如一共有 360 篇文章（这里取 360 是为了方便计算），每篇文章花 10 分钟左右的时间，每天下班后有 2 小时的空闲时间，一天就能看 12 篇文章，那么制定一个 30 天的学习计划，就可以把精选的文章全部看完了。准备工作做好之后，就开始进入“主题阅读”阶段了，主题阅读就是根据你想了解的主题，精选出对应的文章，然后分析并对比这些文章中每个作者的观点、论证的过程，然后得出自己的结论。比如我们把介绍交互设计原则的文章筛选出来，然后进行分析对比，就能一次性了解交互设计需要掌握的全部设计原则、而不是看到一篇交互设计原则的文章，掌握一个交互设计原则。第五步的“总结（知识重组）”，其实是在第四步“详细阅读”之后自然而然的结果，看完之后，我们可以用自己的语言将这些知识表达出来，形成自己的知识结构，这样才能将知识转化为自己的。总结1. 找准定位，可以少走弯路；2. 熟练掌握“吃饭工具”Axure 的使用；3. 阅读相关书籍，了解交互设计师的基础知识、工作流程；4. 看优设总结，通过“学习五步法”，可以让我们站在巨人的肩膀上，快速掌握交互设计师所具备的知识。上万字干货！超全面的交互自学指南身边有些朋友想要学习交互设计，又怕平时工作琐碎学不好，问到我该如何学习和开展交互设计工作？阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 优设交互频道文章总结表800K2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/learn-interaction-design
作品集 项目 简历 考虑马上又要到新的一年为了让更多小伙伴能准备出更加惊艳作品集，这里我提供了一套简历和作品集的设计思路以及对应的模板，希望对大家有帮助~我们提供器与具，推崇创作思路发散，不鼓励照搬、抄袭、挪用。好的内容虽好，但是不具备个人特性。每个人练习过程相同，但是结果不同。设计要动脑，才能获得更高价值，希望大家能够跟着思路借鉴学习，做出自己的风格。欢迎大家一起讨论练习，共同进步！本次的分享会分为两部分，全程干货适用于准备求职的小伙伴：简历部分如何提高简历的通过率；简历如何吸引 HR 眼球（附简历模板下载）。作品集部分作品集设计框架模板和设计建议；作品集设计中的一些注意点。（附作品集模板及相关素材下载）。设计师千万不要选择花花绿绿五彩斑斓的模板，为了提高 HR 的用户体验，我建议可以用简洁一些的模板。这里我们提供了三套常规模板供大家参考：如果大家是自己制作或者选择的简历的话也要保证几个要点：整洁清晰：不用标新立异的简历模板，例如是一些有丰富水墨背景的简历模板，简历的每一部分要分割清晰，不要所有信息都揉到一起。字体最多用两种字体，不要用艺术字或者书法字体。用色简单：最好是使用单色或双色简历。一页原则：如果是实习或者学生简历尽可能一页，精简的简历更容易获得HR的青睐。可录入原则：简历上的内容要可以进行复制，方便HR记录或者录入到系统当中怎么填写简历才能获得更高的通过率呢？直接给答案：针对有意向的公司要做到针对性书写简历招聘帖一般包括两部分「岗位职责」和「岗位要求」其中「岗位职责」，里面都是工作内容，这些经历就是你要在简历中写出的工作内容。其中「岗位要求」，里面都是个人素质，你要在自我介绍的时候强调这些能力关键词。举个例子，这个招聘里写「岗位职责」是竞品分析、需求跟进、数据分析，那么你的简历以及作品集里也要体现这方面的内容，会大大提高通过率。好多人不知道面试 100%必答题自我介绍，要怎么介绍自己以及相关简历应该写什么，招聘贴里几乎都写满了参考答案，得分点都在里面。举个例子招聘要求里提到需要用户体验升级，那你就要在简历里工作内容有这些相关的体验设计升级，面试的时候如果再能提到相关要点就能给面试官的暴击伤害。简历填写的过程中要注意几点①个人信息：需要填写清楚自己的姓名，联系方式/微信号，邮箱，零经验和学生实力简历要写清楚求职意向。其中邮箱是为了后期发送 offer 时候需要用到的，如果异地投递需要补充说明所在地，让 Hr 判断是否适合异地招聘。②工作内容：工作经历优先书写顺序（从近到远）： 工作经历社会实习在校实习，不要写反了哦。介绍自己负责的内容并附上相关的成就数据反馈，主要工作内容不要和求职的岗位无关如：我在肯德基炸鸡翅，每次炸鸡块我都放六块，获得麦乐鸡侠成就。公式：负责内容+你的贡献+结果样例：在某民族之光企业负责 B 端后台项目，包含供应商后台、稽核后台等后台系统的设计项目输出和规范文档的搭建（负责内容），参与业务部门的用户调研、设计类相关类竞品视觉调研，视觉风格制定，视觉方案产生出，情感化插画设计，交互动效 Demo 设计，后台缺省页三维视觉效果升级渲染，推进 JS 等动效文件提高团队效率（你的贡献）有效降低用户工作时间，提高产品效率，获得 XXX 奖项，年度 XX，法拉利一台，我的董事长父亲亲自表扬嘉奖（结果）③项目经验：如果介绍项目经验可以使用这种公式：项目背景+项目任务/项目目标+你的行动+最后结果情境：项目背景情况并针对该背景团队或者领导制定了一个什么样的解决目标任务：针对该目标你得出什么样的解决策略和解决方案行动：具体是怎么执行设计方案来解决这个设计目标的结果：设计结果投放到市场上后得出了怎么样的数据反馈和用户反馈③如果要写自我评价就用：「核心能力」+「岗位匹配技能」什么三好学生，热情活泼，有责任感，吃苦耐劳，家里有五套房，我的父亲是市长这种自我评价可以不用写的。简历和作品集不是个人自传，不要把所有的内容都放到里面去。无经验/学生版自我介绍样例：本人在校期间学习了 figma，sketch，XD，C4D，AE，PS 等等设计相关软件，并荣获校级“铁猴子杯”12306 产品设计比赛一等奖，实习期间和项目团队参与了用户调研负责收集用户问卷，参与用户访谈，收集竞品等相关工作。参加内蒙古自治区科尔沁左翼后旗甘旗卡镇满斗村金葫芦杯产品设计大赛获专业组银奖④不管是简历还是作品集/邮箱主题的命名公式求职岗位+姓名+工作年限+个人优势（选填）命名，如 玄漓-8年-应聘UI设计师⑤可以注册正式一点谷歌邮箱或者163邮箱，如果用QQ邮箱名字一定修改一下，邮件相关要点：邮件中可以简单书写一下正文如：您好，我是 UI 设计师-玄漓我曾任职于 XXX 公司，负责 XXXX，获得 XXXX (填写个人优势)我在 Boss 直聘渠道了解到贵公司正在招聘 UI 设计师。我对此职位非常感兴趣。附件是我的简历和作品集。十分期待您的回复，谢谢。⑥没有任何工作经历和实习经历的同学，经验方面书写可以放在社团活动和参与的一些和设计相关的比赛上，突出自己的沟通能力，和执行能力，软件技能。记住要是和求职岗位相关，什么爬山游泳会七十二变般变化不用写哦。另外在校担任过学生会主席（or 类似岗位）的同学，这里请突出你的沟通能力和执行能力，而不是管理和协调能力。接下来就进入设计师最重要的作品集设计环节。毫不夸张的说，设计师可以不看学历，不看年龄，不看国籍，不看性别，但是一定要看作品集，话不多说接下来开始干货部分：作品集框架以及模板 sketch 文件已放到末尾素材包中，大家可以直接下载 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。「附上作品集设计思路讲解视频」作品内容建议是 50P 左右，页面数量不建议超过 80P，作品集尺寸建议每页 1280×720 或 1920×1080。10%左右的内容简单的介绍个人信息，70%介绍个人核关键能力和相关的项目20%~30%介绍个人核次要能力和相关的项目，最后 可以补充未来展望或者职业规划。工作多年的设计师，这时候你经验丰富，对设计的认知更深一些，所以在准备第一个项目时候，着重体现你的设计思考，但不是模板化的思考（例如现阶段各种用户画像、原型图等）。资深设计师需要有驱动的精神，更主动去解决产品问题，很多大厂在一些资深的岗位要求上都需要有业务分析和交互体验设计相关能力，所以资深岗位如果能融入一些更多维度的思考是很有必要的的。优秀的面试官甚至可以直接从封面判断一名设计师整体的设计能力，封面是你的所有作品最开始的第一印象，封面的在作品集里是非常重要的。作品集封面设计建议如果擅长或者插画、3D 设计技能可以展示到封面，体现自己能力同时拉开和其他面试者的差距；如果不擅长 3D 和插画，就需要在排版上下一些功夫，运用多种潮流设计手法，如液态、局部放大、光影、毛玻璃、排版需要符合当下潮流设计趋势；极致的简约和排版，高质量大气的图片（自己照片）叠加效果运用在封面设计中；需要注意封面风格不能和整体风格格格不入。其次是作品集所呈现的作品风格和包装风格，作为专业性的面试官可以快速从设计调性，能力模型了解是否匹配团队，比如团队中缺少三维设计的设计角色，当一个作品集中看到求职者三维能力，创意能力很强，那么很容易被锁定。或者团队中，品牌中调性是很年轻，潮，运用的设计技法比较新颖有趣的。如果你作品集风格或者作品符合这个公司调性，那么也很容易被面试官锁定。很多的面试官会直接打开你的作品集而不会同时打开你的简历，所以作品集开始最好做个简单的自我介绍，让面试官快速了解你的基础信息；不需要像简历上写的那么详细，写清楚个人信息，任职过的公司、个人擅长技能、工作年限，如果有获得荣誉或者比较知名项目也可以写进去。有照片且拍的很帅的的可以放一张生活照。作品集的第一个项目因为很大概率是你面试时要介绍的内容，所以这个项目必须是你比较熟悉并能体现你价值的。一定要放和你求职岗位强关联作品，其他弱关联作品、辅助关联作品的形式去进行排序，比如面试 UI 设计师，不要在前面过度展示电商或者平面设计等的作品。很多设计师都会在项目前加入自己的一些思考和分析页面，如何定义设计目标，设计策略是什么，设计价值是什么，设计流程和设计推导是哪些等等这些就是设计师需要以文字或者图片进行阐述的，目前市场需要我们要做一个会思考的设计师。这部分我提供了一些作品集模板和排版建议，大家可以根据自己分析内容进行选用~另外有两个要点：分析部分的篇幅不宜过长，分析的结果要能落地到项目的具体设计点上。项目部分要尽可能展示自己的一些能力和思维方式，大家可以根据框架展示负责项目的同时，表达出各方面的设计能力。作品集中的项目是否落地尤其的重要，这关系到你是否能很快上手做设计工作，面试官也可以快速了解你再项目价值，项目完整度，类型，项目中角色，项目中思考，项目中遇到问题如何解决问题，项目中协作，沟通等等。所以你在介绍项目的时候可以按介绍项目背景，前期市场/用户分析，针对目标提出的设计解决方案，市场数据反馈的思路介绍重点项目。如果没有真实应届用户的同学也可以针对一款产品，进行研究然后根据自己的理解进行重设计，作为自己的项目。在展示项目过程中，重要的页面尽可能选择正常角度摆放，让面试官能看清楚页面细节，不要选择奇怪的角度和复杂的样机影响面试官查看作品集。不重要的一些页面或者需要一笔带过的页面可以稍微有一些倾斜摆放，但是角度也不建议超过 30。作品集中体现自己非主要项目的时候可以简单介绍，一些已经介绍过的分析方法和技能不要重复介绍。另外可以在作品集中附带上自己的一些次要能力的介绍，用于丰富作品集同时，可以表现自己的个人爱好兴趣和对设计的喜爱。在保证本职业基础能力过关的情况下，一定要让自己多学习和研究一些其他技能，表现自己的学习能力和潜力，现在越来越多的企业都会附带会 c4d、动效优先考虑，原因是项目内部视觉设计人员在设计交接环节能不断层，能够互相解决问题，能站去影响和推动更多上下游环节的工作优化，产品的体验的升级。最后，我总结了一些包装的小技巧和一些常见误区。希望可以帮助大家把作品集的设计感都能提升一个档次。文字是组成作品集最基础的元素之一，中文其实我们用一些常规易读的字体就可以，比如兰亭黑体、苹方、阿里巴巴普惠体这些，个人建议使用苹方或者就阿里巴巴普惠体可以了，整个作品集的常规字体最好不要超过 3 种。作品集中可以增加一些小元素或者风格来贯穿整个作品集，例如目前比较流行的毛玻璃、多色融合、气泡。酸性素材，透明纸、三维小手、镭射图标等建议新手慎用（防止作品集同质化和排版杂乱，干扰作品展示）。作品集内容的展示上，切忌把所有的设计作品都往里面放，要挑选出自己最精品的作品和自己相对熟悉的作品放到作品集中，而不是把做过的所有作品全部放上去展示给面试官。也不能为了凑数放作品集，任何一张低质量作品都会让面试官直接关闭你的作品集。作品集中如果使用样机，要注意尽量使用 iPhoneX 以上的样机，尽量不要使用 iPhone6、iPhone8 等等老旧的样机，另外样机选择上也尽量选择正常角度，切忌选择斜面过大，面试官无法看清页面内容的角度除了封面以及目录、项目介绍等等页面以外，项目介绍过程中使用样机切忌不要使用面试官无法看清页面角度的样机，记住你不是在兜售手机，其次不要重要页面（通揽/概括类页面）上加频繁加塑料布。展示项目过程中要注意详略得当，已经介绍过的技能如用户调研、竞品分析、规范建立等等再后续的页面就就不用重复的展示了。作品在展示过程中请优先展示和求职岗位相符的优秀作品，比如求职岗位希望找 UI 相关工作，作品集开头就不要放太多电商相关的项目，另外第一个展示的作品和第一个展示的页面尤为重要，请确保第一个项目展示的行业自己求职岗位相同，且展示第一个页面也是自己最满意的作品。作品集或者设计项目中的配图代表着一个设计师的审美，所以你在作品集中给界面配图时，尽量要选择设计感更强的图，这样才能让界面整体上有更好的视觉效果，当然也能吸引面试官的注意。作品集制作完毕以后一般是导出 PDF 格式，大小在保证页面质量情况下当然越小越好，作品集大小尽量不要大于 50M，这样下载率会更高，传播率会更好。如何正确压缩你的作品集，来看看腾讯高级视觉设计师的经验大家好，我是彩云。阅读文章 > ]文中插画形象来自插画师 「一杯逗浆」 https://www.zcool.com.cn/u/14647194 插画使用已获作者授权。希望以上内容对大家接下来整理作品会有帮助~另面试相关经验包整理中~敬请期待~希望很多年后,你们也能帮助到更多热爱设计的人~靠着这份作品集+求职指南，你终于能和HR谈薪水了前言今天给大家带来一篇极其干货的全是重点的文章：我是如何挑选公司、如何投递简历、如何准备作品集、如何准备面试的。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 简历和作品集素材包290M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/job-search-guide-2
表哥
张大湿
落霞与孤鹜
飞翔的企鹅
在路上
