注册账号 | 忘记密码
落霞与孤鹜
其实在今年 WWDC 之前，苹果设计大奖的提名名单就已经对外公布了，只不过最终的颁奖结果是直到 WWDC 之后才公布。这8款APP，为什么能荣获2020年苹果设计大奖？苹果设计大奖（Apple Design Awards）可以说是每年 WWDC 的压轴项目了，这个奖项会表彰过去一年当中，最具有创新精神、拥有卓越设计、善用技术并且独具匠心的优秀 APP。阅读文章 > 和往年的评奖模式不同，这次的奖项的选择标准也比较具有「人文主义」的特质，其实这也是在 App 的数量爆炸式增长之后的必然结果。这次的苹果设计大奖一共设计了六个奖项，「兼容并蓄」奖，「乐趣横生」奖，「优越互动」奖，「社会影响」奖，「视觉图像」奖，「创新思维」奖，每个奖项下面，都设有 2 个获奖 APP。这些获奖的 APP 本身的过人之处是值得学习的，因为它们可能是接下来 APP 在设计、开发上的发展方向。如果你是 UI/UX/产品设计师，那么这些产品都是特别值得研究的对象。1、兼容并蓄奖：支持和包容的艺术苹果最近几年对于包容性的追求可以说是非常突出，这不仅体现在这一奖项上——在跨平台的兼容和融合上，苹果正在大跨步前进，甚至连最新的设计规范 HIG 也不再进行 iOS、iPadOS、macOS 和 watchOS 的区分了，而全新的 HIG 中，设计的包容性也被赋予了极高的优先级，在整个规范的开头优先提出。当然，这个我们后续单开一篇文章聊。这次荣获兼容并蓄奖的两个 APP ，一个是咱们非常熟悉的绘图工具 Procreate，一个是有着强烈多元化元素的游戏，Wylde Flowers，两个不同的 APP，从不同的角度给用户提供了「支持」。Procreate 本身是市场占有率越来越高的创作工具，但是能够让它获奖的真正原因，是因为它在 iPad 这个平台上深挖更多贴合需求的功能，更好服务于「表达」这个需求。「通过震颤与动作过滤、App 内置的辅助触控菜单、反馈音、色觉辨认障碍设置等新增的辅助功能，这款 App 增强了对旁白和动态字体的支持，赋能更多艺术家去创作、交流、表达自己。」Wylde Flowers 这个游戏则不同，它是一个极具代表性的具有 LGBTQ IA+ 元素的游戏，它的游戏性并不差，但是它更优秀的地方在于将身份认知和包容精神加入到整体的设计中：「……随着情节的发展，故事渐渐纳入更多年龄、文化和性取向的视角，你将会发现游戏最终传达的，是一个更具意义的深刻故事。」2、乐趣横生奖：愉悦和着迷的秘诀想要给用户带来「愉悦」从来都不是一件轻松容易的事情，如何能够恰到好处的让人感到舒服，获得成就感，找到乐趣，这可能是用户体验设计中的「艺术」。这次获得乐趣横生奖的两个 APP 分别是（Not Boring）Habits 和解谜游戏 Overboard！，这两个 APP 在探索「愉悦」这条道路上，选择了不同的方向，但是效果同样不俗。我们用过太多培养习惯的 APP，但是少有能成功的。而 (Not Boring) Habits 走出了一条截然不同的道路——结合科学研究，通过优秀的设计和合理的机制，让习惯的塑造不再痛苦。它的设计者最初是为了给自家闺女培养习惯，基于此摸索出一套行之有效的习惯培养机制，然后有了这款 APP。「醒目的设计、活泼的触感反馈和精妙的游戏化操作让培养习惯的过程变成了一场穿山越岭、激动人心的冒险之旅，为你带来富有艺术感的别样体验。」Overboard! 给人带来愉悦感的方式，依靠的是「叙事」。借助优秀的剧情设置和交互，让对白和故事发挥效果，在解谜和发现中，给玩家足够的乐趣。「在这款明快讨喜的罪案游戏里，你要与毫无戒心的船员机智交谈，争取摆脱嫌疑、远走高飞。引人入胜的叙事设计、搞笑冷峻的对话和精彩的多重结局，让这个案件值得反复体验。」3、优越互动奖：轻松交互的技巧交互始终是移动端设计的核心。优质的交互从来都是讲究润物细无声的「隐形」，是易懂易用的「自然」，更是贴合平台本身场景和特质的「定制」，在交互上突出的产品无疑都是「高情商」的产品。这次获得优越互动奖的两款产品分别是音乐游戏 A Musical Story 和运动 APP Slopes，两者在特殊设定和需求之下，做到了细腻而贴合的交互，非常惊艳。A Musical Story 通过精致而极简的动画、创新的节奏游戏玩法机制，将交互的价值最大化呈现在玩家面前，把移动端的音乐游戏拉升到一个全新的高度。优质的音乐和独特但是足够舒适的交互浑然一体，是这款游戏获奖的主要原因。Slopes 则截然不同，它面对的是单板和双板滑雪领域的用户，非常的垂直。它的设计师深刻洞悉着这些用户的需求，非常充分地运用手机内置的 GPS 和传感器来记录运动数据，同时，合理地加入社交功能，加强了滑雪爱好者之间的交流和产品本身的粘度。「丰富海量的数据库在内，直观友好的界面导览于外，Slopes向我们展示了用心设计的 App 能如何提升用户体验的绝佳范例。」4、社会影响奖：关注热门社会议题苹果一直都非常关注热门的社会议题，关注少数群体，借助产品和设计来对社会和用户生活产生积极影响，而这些关注社会议题并且做出了独特贡献的产品，也会受到这一奖项的青睐。这次获得社会影响奖的是关注自然的游戏 Gibbon: Beyond the Trees 和关于独立女性的应用 Rebel Girls。在 Gibbon 这个游戏中，用户将会以一只长臂猿的身份在丛林中自由穿梭，游戏在剧情设计上，加入了很多环保的因素，以一种巧妙的换位思考的方式，让用户重新审视自然生态、环境保护的问题，借此对于当下的环境危机感同身受。Rebel Girls 则不同，这个 APP 借助音频和原创插画来呈现影响历史的知名女性人物的故事。「这些女性来自各行各业，文化背景与所处时代也迥然相异。围绕故事和 App 界面专门打造的语音讲解和插画皆由世界各地的女性及非二元性别艺术家精心呈现。」5、视觉图像奖：视觉美感的力量美学从来都是充满力量的，精致细腻的图像，独到考究的 UI 设计、自然而充满质感的动画，这些透过视觉传递给用户最直观的信息，也是作为 APP 最能打动人的力量之一。这次获得视觉图像奖的应用分别是摄影 APP Halide Mark II 和 Gameloft 出品的游戏 LEGO® Star Wars™: Castaways。作为一款摄影APP，Halide Mark II 深深抓住了摄影爱好者的眼睛和心，交互上通过精心打磨，将各种小工具打磨到跟手而自然的程度，同时让手机摄影模拟出胶片机的摄影质感，让每个摄影师都可以创作出美感十足的摄影作品。「每一项手势操作都会让摄影老手们倍感亲切，同时也让初识对焦与曝光设置的新人顺利上手。这款精美的 iPhone 相机如今又推出了专为 iPad 设计的版本，进一步帮助你创作令人惊艳的摄影佳作。」而 Gameloft 和乐高联手打造的这个星战游戏，将 Gameloft 所擅长的游戏性、星战的优秀的故事性和乐高趣味十足的可玩性三大优势结合到一起，制造出大片级别的视觉质感。「游戏以一颗荒废星球为舞台，制作精良的环境与流畅的动画会让你立即沉浸在动作、谜题与舞蹈派对组成的精彩世界里。海量自定义选项与形形色色的角色在等待着你持续探索这场冒险。」6、创新思维奖：好点子永远出彩这个创新思维奖就是留给那些，能够把苹果给到的开发和设计工具给玩儿出花来的优秀开发者、设计师和团队。创新性的想法，总能四两拨千斤。这次获得创新思维奖的主要有2个，一个是漫威游戏 MARVEL Future Revolution，另一个 则是音频 APP Odio。MARVEL Future Revolution 充分地借力苹果的 Metal 平台来驱动游戏，将漫威宇宙中丰富的角色、激烈的打斗和开放的世界观给结合到一起，把 Metal 本身的优势彻底发挥出来，让每一分性能都用来驱动整个游戏，提供更为优质的画质和交互体验，整个漫威宇宙被清晰而极富动感地呈现在每个玩家面前。Odio 这个 APP 则选择了苹果「空间音频」这一独特的技术作为切入点，将它和专业的声场技术结合起来，把其他场景下的声音效果真实而细腻地投放到用户的耳中。「你可通过迷人的圆形界面调整混音来自定义声场，每一个声场都伴有极具未来感的动画，随着音频的节奏同步变幻。这款 App 将音画体验带入了新的境界。」更重要的事情如果你关注过往年的苹果设计大奖，你会注意到它通常是一个现场颁奖的活动，但是受限于疫情，今年依然只能在线上举办。往年的颁奖典礼上，主持人会口述每一款 APP 的获奖缘由，而改成线上颁奖之后，除了图文的获奖评述之外，苹果使用了视频混剪来呈现每个 APP 幕后设计师和开发者的灵感来源，构思时的想法，完成过程中的体验，以及完成之后的感悟。对于一个优秀的 APP，当我们下载下来，体验一把，很容易发现一些「硬性」设计元素，配色，交互，流程，用户体验的打磨等等，但是这些都是「硬性」的特征。APP 背后，设计出发点、设计者和开发者的心路历程、他们的感悟，是「软性」的因素。这些同样非常重要，甚至可能比「硬性」的部分更难以获得，毕竟配色、交互甚至游戏的逻辑都是清晰且有迹可循的东西，是可以习的的东西。但是你不一定会因为孩子的坏习惯而想到用一个 APP 来有效矫正它，或者是在一个特定的多元文化背景下，催生出用趣味、可视化的方式来将中文常用字教给英文用户，毕竟这是一个很明显不符合常规并且吃力不讨好的「笨办法」，这些「笨」的部分，可能是这些 APP 能够获奖的关键之一。本篇来源：优设网原文地址：https://www.uisdc.com/apple-design-awards-2022
飞翔的企鹅
发展不到 5 年，平均月活跃用户人数 87.65 万，每日人均使用时长 4.87 小时，两年前就有业内人士透露月营收超过 3 亿，猿辅导旗下针对在线英语启蒙教育的小斑马，从出生就仿佛蕴藏着巨大的魅力。这样的产品，到底是如何设计的，有什么值得我们学习的地方，本期「设计大侦探」全面拆解斑马，为大家一探究竟。拓展阅读8000字干货！在线启蒙教育的产品设计公式（附竞品分析模型工具）我在阅读曲卉《硅谷增长黑客实战笔记》一书中描述增长模型的时候，读到了一个对我影响很大的例子。阅读文章 > 产品画像1. 产品介绍「斑马 APP」前身为「斑马 AI 课」，是猿辅导旗下一款针对 2-8 岁儿童启蒙教育的产品，内容体系由国内外名校毕业的硕博领衔独立研发，通过完善的分龄体系和专业有趣的数字内容，培养全方位能力，专注实现全面发展，课程体系包含了英语、阅读、思维、音乐和写字等课程，目前产品已经迭代到 V5.16.1 版本。2. 产品生命周期斑马 APP 诞生于 2017 年，至今已发展 5 年，目前已经慢慢进入成熟期。斑马的盈利能力很强，月营收在 2020 年就已经突破 3 亿，当下的业务焦点除了用户活跃度和商业变现，还在探索更多的业务模式。从 2022 年 3 月份产品运营数据（数据来自易观千帆），斑马月活跃人数为 87.65 万，人均使用时长 4.78 小时。3. 商业模式斑马是一个主要针对 2-8 岁的儿童的综合学科学习平台，课程内容丰富，包含英语、阅读和思维等，目标用户群是以 24-35 岁的年轻妈妈，消费力水平较高，主要分布在新一线及二三线城市。斑马主要依靠系统课程盈利，其次还有绘本、周边等变现业务。斑马的课程模式以小班制为主，40-60 人为一个小班，呈阶梯式学习，有效拉长用户生命周期，增加用户终身消费价值。4. 用户画像斑马的核心用户人群以女性为主，年龄在 24-35 岁之间，消费能力非常强，文化水平较高，主要分布在新一线城市、二线城市和三线城市，其中广东、山东、浙江、江苏和四川用户数最多。5. 功能架构设计拆解根据增长模型，我把斑马的功能分为三大类，分别是学习服务，主要实现商业变现；内容服务，主要实现用户留存；营销服务，主要帮助产品传播拉新。1. 学习服务课程功能价值斑马是一个综合学科学习平台，不仅有英语，还有思维、阅读、美术、写字和音乐等，其中科学和编程分别引流至猿辅导旗下其他教学产品。其次根据儿童年龄划分为 S1-S5 个级别，呈阶梯式学习，拉长用户终身消费价值。课程划分为体验版和系统版，体验版主要用于新用户激活，用户购买后才能正式开始系统版的学习。而系统版是斑马的正式课程，斑马的正式课程以班为单位，一般为 40-60 人，需要达到一定的报名人数以后才会正式开课。每个班有班主任，开学前还有开学仪式，家长会等，体系非常完善。课程是面向用户销售的产品，是斑马商业变现的主要来源。策略推导① 首页新用户进入APP后，斑马主要通过信任状和互惠来激活用户。金刚区展示了斑马的品牌介绍，瓷片区通过直播为新用户赠送福利，吸引用户快速激活。付费用户进入APP后，金刚区加入了推荐有礼和组队领礼两个营销活动，主要通过礼品激发用户拉新引流；瓷片区的内容为动态更新，目的是可以推送不同主题的内容，比如周周分享，课程直播，礼物兑换等，有效提升产品运营的灵活度。首页内容设计简单直接，主要分为体验版和系统版课程内容，体验版单价低，主要用于新用户、新课程的激活，而系统版是斑马的正式课程，以班为单位，需要达到一定的报名人数以后才会正式开课。② 体验版详情页体验课程有时间限制，通过赠送英语启蒙礼盒礼品，吸引用户，其次利用限购，增加稀缺性，有效提升用户购买率。用户评价可有效通过口碑效应打消用户顾虑，建立用户信任感。学习详情是对体验课程的介绍，对斑马的课程模式、课程优势、课程内容、管理模式进行了全面的讲解，让用户对斑马有全面的了解。详情页底部展示赠品和品牌介绍，互惠营销首尾呼应，从而让用户快速下单。③ 系统版详情页系统版的赠品不仅颜值高，而且礼品丰富，提供了学习机、汉语拼音认读机、智能学习礼包、绘画盒子、保温杯等多项选择，对孩子妈妈的吸引力非常大。向用户介绍斑马课程的学习体系，根据年龄划分为S1-S5个级别，呈阶梯式学习，这和传统启蒙教育模式相比，不仅提升了用户终身消费价值，还拉长了用户生命周期，这让平台可以利用用户基数探索更多的商业模式。学习功能价值用户购买系统版课程以后，需要等待课程的开班时间，开班后会有非常正式的开班仪式。课程的学习和上学一样，每周一个主题，周一到周五每天更新，以情景互动、游戏化的教学动画形式吸引小朋友，每一节课程会拆分为几个阶段，降低小朋友学习的行动成本。当小朋友学习完以后，会自动生成学习报告，鼓励用户分享传播，为产品拉新引流。学习的内容决定了新用户是否会购买系统版课程，以及老用户的课程续费率，而学习的体验设计决定了小朋友能否简单、轻松、愉快的使用。策略推导① 引导页头部可切换用户购买的课程，方便查找；目录是所有系统课程的汇总，比如 S2 级别的用户需要去查找 S1 的课程，这里就是课程的入口。右上角可以进入作品墙和专题，这两个内容主要是提高用户活跃度。课程根据时间以列表 Feed 流展示，方便用户查找。② 上课目录页。课程划分为不同的小节，这可以把学习时间分割，降低行动成本，让小朋友可以轻松开始学习。以阅读课程为例，先从一个趣味性的故事开始，激发小朋友的兴趣，再通过听、说、读、练的步骤，让小朋友加深对课程的理解，最后生成学习报告。学习页。学习页以游戏化的教学动画展现，斑马为每个课程设计了不同的卡通人物IP，这可以有效拉近和小朋友的距离，培养和小朋友的感情，如八斗、百夫子、Zara等卡通人物。通过设置斑马币（可兑换礼品）的酬赏，有效激发小朋友认真学习，只有完全回答正确才能获得3颗星，而单节课累计的积分决定了本节课程的学习评分，形成了一个可量化的指标，帮助家长可对小朋友单次课程的学习做出评估。结束页。当小朋友学习完以后，系统会自动生成一个学习报告。头部为课程的评分，满分为3颗星。当小朋友学完后，系统会对作业进行点评（有人工和班主任），和用户建立高频的互动，提供有温度的服务。报告页的底部数据看板设计得很巧妙，展示了小朋友累计学习的课程、练习，这可以极大提高家长分享的欲望，从而拉新引流。其次作品也可以发布到社区作品墙，小朋友们可以相互观看其他同学的作品，提高用户活跃度，激发学习和传播欲望。③ 课后作品墙。当小朋友学习完以后，可以发布作品到社区的「作品墙」，这有效提升用户的课后活跃度。其次作品墙还有丰富多变的老师打卡学习挑战，对小朋友来说，这极大丰富了学习的乐趣，培养用户忠诚度。奖状墙。用户每学习 3 个单元，斑马都会给小朋友颁发一个荣誉证书，系统课程学完以后，还会颁发毕业证书，家长还可以填写实物信息，领取实物奖状，这增加了品牌的温度，极大提高了用户口碑。学习周报。「学习周报」把小朋友每周的学习成果通过数据化展示，不仅可以一目了然查看本周的学习成果，而且能提升用户的传播欲望，其次对家长来说，这就像一个孩子当周的学习数据看板，对孩子的学习有清晰直观的了解。周末游乐场。「周末游乐场」就是娱乐小游戏，在每周末会以课程的形式的发布，儿童可以通过精美的小游戏一边学习一边娱乐，不仅可以劳逸结合，还可以提升用户活跃度。专题。「专题」的设计，就像是为课程增加了无限多变的属性，目前斑马会根据不同的节假日推出专题（3-5 节课，有免费和付费两种模式），小朋友可进行系统的学习，目标性强，也能让小朋友学以致用。2. 内容服务绘本斑马的绘本出品质量非常高，不仅和多家全球领先的儿童书籍出版公司合作，而且结合当下的时事热点进行全新的创作，比如以冬奥主题的相关系列绘本。「绘本」不仅可以提高用户活跃度，培养用户对产品的忠诚度，其次也是斑马对商业变现的新探索，目前绘本已经分为免费和 VIP 付费两种模式。绘本的设计，主要根据不同的主题进行划分，不仅可以让孩子找到自己感兴趣的主题内容，还可以增加功能属性。儿童阅读过的绘本会有系统记录，方便儿童查找，体验非常友好。视频看世界「看世界」是斑马的原创栏目，内容题材丰富，有美食、旅游、科学、运动等，核心的卖点是通过英语课程的几位国外老师以英语视频讲解的形式带着小朋友边看边学，既能增强英语语感，也能增长小朋友的见识。其次视频的策划、出品都非常优质，这不仅可以提高用户留存率，还能引流传播，在腾讯视频等视频网站都能查看部分视频，极大提高了斑马 AI 的知名度和曝光度。3D 儿歌「3D 儿歌」目前制作了 33 首，数量相对较少，但视频的出品非常优质，由国内外知名音乐学院顶尖制作人员参与制作，以斑马品牌形象 Zara 为主，对世界经典儿歌进行重新创作，目前在腾讯视频等视频网站都能查看，极大提高了斑马 AI 的知名度，还能为产品拉新引流。娱乐斑马拍① 功能价值「斑马拍」非常有趣，就像抖音一样，以短视频为主，官方会发布一些儿歌、活动挑战的模板，小朋友和父母还可以一起录制，极大增加了学习的趣味性，提高用户活跃度。未来斑马拍的发展空间非常大，也许会慢慢形成一个儿童学习+娱乐的 UGC 视频社区。② 策略推导右上角的挑战图标醒目，吸引用户可快速进入官方的用户挑战活动，点击头像则进入自己的主页。右边的头像暂不支持访问其他用户主页，但可访问官方栏目主页，比如八斗的宝藏世界、斑马百宝箱等。用户可把视频分享给微信好友和朋友圈，为产品分享传播。左下角为该视频所关联的课程，点击后可查看当节课程所有小朋友录制的课程，这可以利用从众效应引导小朋友录制视频，提高用户活跃度和学习的趣味性。右下角点击拍同款以后，小朋友就可以开始跟着视频的模板进行录制，让一款学习产品充满了娱乐性，多变又好玩。斑马速算「斑马速算」是一个思维课程练习的小游戏，小朋友以游戏闯关的形式学习算法，目前板块还比较单薄，没有太多内容。斑马背古诗「斑马背古诗」的设计目前比较简单，玩法也比较单一，小朋友可以跟读，可以背诵，练习结束后可以分享作品。音频有声故事「有声故事」属于会员 VIP 权益之一，主要以中文为主，结合国内经典名著及童话故事进行二次创作和改编，家长可以利用有声故事哄孩子睡觉，或降低孩子使用屏幕时间，保护眼睛。FM「FM 广播」分为英文和中文两大类，内容主要取材自系统课程，小朋友可根据课程搜索对应的音频。直播随着用户习惯的改变，「直播」将会成为斑马在产品运营的重要方式。目前斑马的直播内容已经从新用户激活、老用户复购扩展到「斑马大讲堂」、「斑马育儿说」这样的特色栏目，主要以邀请业界的教育专家作为嘉宾，对用户做主题内容直播，不仅可以提高用户留存率，新用户激活变现，还可以帮助产品分享传播。3. 营销服务推荐有礼「推荐有礼」玩法非常简单，用户可直接分享给好友或分享朋友圈海报，好友扫码或购买课程后，用户均可获得平台的奖励。假如好友购买了系统课程，直接返现 200 元。推荐有礼充分了利用口碑营销，引导用户邀请好友获取钻石，在页面底部，通过精美的兑换礼品展示，进一步引导用户分享。周周分享「周周分享」每周一期，用户通过分享海报到朋友圈，保留 2 小时以后，凭截图在 APP 上传，审核通过后可获得 500 斑马币，如果好友最终报名课程，则会获得更丰厚的福利。组队领礼「组队领礼」是一个新用户拉新的活动，门槛低，只需邀满 2 人，但是好友必须是斑马非注册用户，组队成功后，队伍的三个用户均能领取斑马的随机礼品。这个活动充分利用互惠原则，通过赠送免费的小礼品引导老用户拉新，新用户激活。斑马商城「斑马商城」就是积分商城，小朋友通过每天课程的学习，积累的斑马币，可以在商城进行礼品兑换。斑马的周边产品颜值非常高，对小朋友和年轻妈妈都非常有吸引力，通过这样的酬赏，又能倒逼小朋友坚持认真学习。另外斑马也提供了更多的周边产品在官方淘宝店直接销售，如教具、玩具、文具等。礼品卡当用户报名了课程的体验版或系统版以后，平台会向用户赠送礼品卡，礼品卡又可以赠送给好友，从而引导用户进行传播分享，获取更多的新用户。总结结合《在线英语启蒙教育产品设计竞品分析模型工具》，我从三个维度对斑马产品设计进行总结。1. 课程内容斑马作为一个多学科学习平台，其实已经从英语拓展到阅读、思维、美术等系统课程。课程内容以趣味互动为核心理念，由国内外名校拥有丰富教学经验和科研成果的的硕博领衔独立研发。其次根据儿童年龄划分为 S1-S5 个级别，呈阶梯式学习，有效拉长用户终身消费价值。斑马的上课模式以小班制、学期制为主，开班前有开学典礼，开始上课后，班主任全程跟踪孩子情况，监测效果，定期电话回访，为用户提供精细化的运营。其次通过对上课流程的拆解，斑马的学习流程用户体验也非常友好，不仅把课程划分为不同的小任务，利用趣味化的沉浸式动画教学，还充分考虑了家长、小朋友的学习用户习惯，从激活、留存、变现到传播，都设计了非常丰富的功能。2. 内容服务斑马不仅为每套课程创作了个性鲜明的 IP 角色，其次围绕这些 IP 角色打造了精彩丰富的内容。绘本、看世界、3D 儿歌、有声故事、斑马拍等栏目内容，都主要以 Zara、八斗等 IP 角色进行创作。这不仅可以让用户牢牢记住这些 IP 角色，提高用户忠诚度，其次更能培养用户的情景触发，产生条件反射。其次斑马的内容服务丰富多变，传播形式丰富多样，不仅打造了斑马看世界、3D 儿歌这样的高品质内容栏目，还通过斑马拍这样有趣好玩的短视频来链接用户，不仅仅是提高用户活跃度，而是让小朋友和家长都参与进来，未来斑马的产品定位不会只局限于一款学习产品，而会探索更多的可能性。另外斑马已经开始通过直播创办很多特色栏目，这将会成为斑马在未来最重要的运营和营销方式，而且将会有更大的商业想象空间。3. 营销服务斑马的营销服务设计得非常丰富，从用户购买前后的所有环节，都把口碑推荐的模式设计到里面。体验课作为引流产品，让用户免费尝鲜，精美的周边礼品又能快速俘获年轻妈妈的心。当用户购买后，可以领取礼品卡送给好友，还能邀请好友组队领礼。其次斑马的周边设计模式，非常值得借鉴。这些周边产品，颜值极高，制作精良，牢牢抓住了年轻妈妈的心，这不仅让这个群体产生了强烈的购买欲望，其次通过实物产品的传播和推荐，更能赢取新用户的信任，大大降低拓客成本，实现新用户增长。参考文献易观千帆 – 斑马 APP 数据分析斑马 AI：启蒙英语 APP 竞品分析（偏运营）案例分析：『斑马 AI 课』app 的增长之路欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/banma-app-design
在路上
又到了晋升季，很多人已经抓耳挠腮地准备材料了。前几天被 HR 同学布置了个作业，说能不能从评委视角给同学们一些“材料准备”和“答辩表达”的方法和建议。想了下，反正写都写了，正好也跟大家分享下吧，看对你们有没有些帮助。快夸我贴心。相关阅读：一年2次晋升，荣获年度优秀员工，我都做了什么？年底了，每次回顾自己，总想想说点什么，但又感觉好像没啥说的。阅读文章 > 晋升材料准备很多同学准备材料时容易踩个坑，就是仅从“我”的视角出发，比如：“我想讲什么”，“我觉得不错的都要放进去”等。而不站到听众（评委）视角看问题。大家要知道材料准备的核心目的是：辅助评委做决策（是否通过）。要把题答到“点”上，才能得分，需要有针对性的准备。评委在评审过程中往往有几个疑问点，需要通过材料来高效获取：比如：TA 是谁，过往履历怎么样，有什么亮点？哪个团队的，做过什么项目？做地怎么样，符合职级标准吗？基于以上问题，帮大家整了个表，可以参考一波（表格洗了下同事花酱的稿，哈哈）：标“注释”的属于常见痛点，跟大家展开聊聊：注释 1: 说清自己在项目中的角色定位有些项目是多人协同完成，所以大家在答辩时，对方案的阐述极为相似，包括：背景、目标、背后思考和结论。而对“自己在项目中角色定位”缺乏介绍。评委每天评审很多场，听到重复且角色定位模糊的介绍时，对大家都是不利的，也无法辅助评委做出准确的决策。大家需要清晰的交代好自己角色，着重讲你在你的职责范围内重点做了什么，不抢功不推诿，客观陈述事实。注释 2: 结果要客观，数据经得起推敲和深问很多同学看到别人材料上放了数据结论，感觉自己也都要有，不管合不合适，都放上。这种操作是有很大风险会被评委挑战。关于“数据”结论，大家核心要放的是通过你的设计方案，所带来的正向收益。比如，在没有其它变量的背景下，仅对设计方案进行的优化，辅助业务带来的数据结果。而不是介绍项目整体的数据结论。补充：这里并不是说整体数据不重要，而是里面角色和影响因素太多，并不能证明你的能力。晋升答辩表达除了材料准备外，晋升答辩中的“表达”也非常重要。“表达”就是话从嘴巴说出来，被别人的耳朵听进去的过程。你“表”出来的内容，有多少能“达”到别人的大脑里才是最关键的，这个环节有几个建议：a. 结构—要清晰人们对于平铺直叙，没有逻辑的表达往往缺乏耐心，尤其是对于连续评审多场答辩的评委。因此，大家在表达上要尽量结构化，避免胡子眉毛一把抓的表达，有一些比较常用的方法，比如：金字塔原理，STAR 法则。自己提前闷头练练吧，说再多也没用了。b.节奏—要舒适过快过慢的表达节奏，都会让评委在接受信息时不够舒适，获取信息不够高效。之前评审时，有见过语速过快的，全程非常着急，像是在被人追杀；还有语速非常慢的，像慢速播放的 siri 语音。演讲的节奏和音乐类似，也有这样三个要素：重复，强调，停顿。同时，大家也可以用口语化的表达，来构成前后呼应，给评委流出思考和理解的时间，帮助他们找到你讲话的重点。建议大家答辩前，自己多用手机录音练一练，听一听，调整下自己的节奏和语速。c. 状态 —别紧张有很多同学属于窝里横，平常支棱的很厉害，一到答辩时怂了，手脚冰凉满头大汗的，恨不得掐着人中才能讲完。克服紧张的办法，不是排斥紧张，而是接受它，有时候你越告诉自己不紧张，越紧张地厉害。分享 2 个克服紧张的小妙招：物理放松法：闭上眼睛，紧绷肌肉，然后放松，再紧绷，再放松，重复 5-10 次。这时候你的身体就会误以为放松了，心理也会随着放松。对，学着欺骗自己的肉体。积极暗示：答辩前一个小时，就不要临时抱佛脚了，倒不如放一段舒缓的音乐，让自己放松下来，因为听音乐可以增加我们身体多巴胺和催产素的分泌，来缓解焦虑。同时闭上眼睛脑补自己答辩超常发挥。心理学研究证明：当我们大脑想象一个场景的时候，身体就会误以为我们自己经历了这个场景，就会产生一种熟悉感和轻松感。通过这些方式，把紧张焦虑的情绪降低到合适的范围，有助于大家超常发挥。总结一下以上，是跟大家分享的答辩材料和表达的方法。如果晋升通过了，就在下一个阶段继续打怪升级，不要飘，接受更高的要求和在下一把尺子（标准）下可能不那么优秀的自己；如果晋升没通过，总结经验，继续“潜着”，先“勿用”，等待时机成熟再战，别因为一次不通过要死要活的，怀疑自己，怀疑制度的，没啥意义且浪费时间。积极主动的面对一切结果，才是我们需要修炼的终极课题，哈哈哈，虽然鸡汤味儿有点重，但确实是这么个道理。好了，今天就聊到这，散会。欢迎关注微信公众号：「大牙的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/promotion-reply
表哥
有很多同学面试都遇到过这样一个问题（包括我）：如果你做的设计开发说实现不了，你会怎么办？这是一个直接反映设计师在自己领域业务水平的问题，也是 UI 设计工作中最常遇到的阻力之一，是设计师和前端程序员的主要矛盾来源。开发沟通指南6000 字干货！写给设计师的开发沟通指南前言“这个做不了、很难做的啊、我没时间啊、改这个有什么意义吗？阅读文章 > 这一篇，我就要从几个维度来讲讲，在真实项目环境中，开发说设计不出来的话，我们应该怎么办。想要解决开发做不了的问题首先要了解他们做不了的原因。在正常的团队协作中，正式进入前端开发阶段前，有需求评审、交互评审和视觉评审。需求评审即产品经理的工作产出评审，告知团队这个阶段要实现的功能有哪些。而交互和视觉评审，则是设计师交付给团队，产品怎么操作，界面长什么样的过程。这个过程不一定是要在会议室中一群人看设计师演示交互原型或 PPT，只要是设计没有完全定稿针对它的讨论都可以算是评审过程。开发会告诉你设计稿实现不了，就是在这个阶段中发生的，那为什么他们会在这个阶段说实现不了呢？主要原因有四个：技术上有难度，实现不了时间不够充裕，来不及做单纯看你不爽，对人不对事看破职场沉浮，一心躺平针对第一点，稍微有点经验的程序员都不会在看到设计稿后判断不了自己能不能实现，不会把设计稿拿回去代码写到一半，再跑回来和你说实现不了。这里的不能实现包含三种情况，第一种是技术上真没办法实现，比如使用了一些非常复杂的 3D 着色器、渲染效果。第二种是开发的能力有限，以他目前的水平做不出来。尤其是小公司中的初级前端群体，因为经验和技术能力不足，往往复杂点的效果就不知道怎么下手，所以自然实现不出来。第三种，就是为了实现这个效果的代价过大，觉得完全没有必要，这是最常见的情况。比如团队已经使用某开源框架做前端了，结果你设计稿效果和官方组件南辕北辙，为了和你的设计效果保持一致，得花费几倍的时间精力。可能设计新人会觉得奇怪，程序员还原设计稿效果不是天经地义的嘛？但程序员的思考方式是不一样的，程序写代码的第一目标必然是 “功能实现”。所以他们分配给界面样式的时间和精力是不多的，如果视觉稿需要让他们投入过多的精力，影响到功能的实现，那么他们肯定优先选择功能而不是视觉效果。多数 B 端项目中程序员的时间都是不够用的，所以也导致复杂的视觉效果基本都会被他们驳回。这就关联到第二点，时间不够充裕的问题。因为时间紧迫，一些开发成本过高的视觉效果，即使程序员认可你的设计方案，也想这么输出，但是根本没有充裕时间完成，所以只能拒绝。再到第三点，程序员就是对你有意见，只要设计稿稍微复杂，就算做的了也有时间但就是不想和你配合，也会想方设法找理由给借口说做不了。同事发展到这个地步并不少见，根据我多年的经验和观察，除了少数心理健康有待商榷的程序员以外，这种情况多数由设计师的不专业行为长期积累而引发的，被对接程序员嫌弃……最后一点，就是和你对接的前端看破滚滚红尘，参透职场的真理，认清剥削的真相，选择躺平了……躺平了……平了……了……这和上一点类似都是消极对待工作，只是这次他没针对你了，而是针对项目团队在座的各位。这种程序员高频出现在国企或其它大型企业中，有比较长的工作年限，得过且过没有任何的工作热情了。或者是已经打定主意要离职，已经抱着你们爱咋咋滴和我已经没关系的心态了。以上就是程序员会讲开发实现不出来的主要原因。想要解决实现不了的问题，肯定要先定位出实现不了的原因属于上面哪一类，然后才能对症下药。第 1：技术实现不了的解决方案如果是技术上的困难导致无法实现，那么设计师修改方案是必须的。但改动前，要尽量和程序员询问技术实现不了的原理，再针对性的做出调整。比如我们之前做过的一个筛选面板优化，增加了右下角 “查询” 按钮，需要每次筛选完成后点 “查询” 才能刷新筛选结果，而不是像京东这些网站的筛选项一样点击后立刻刷新。这是因为开发做不到结果秒出，一般项目的后端数据库搭建非常简陋，检索效率极低，每次查询请求到输出结果需要数秒到数十秒不等。所以，增加查询按钮多一个操作步骤反而是效率更高的做法。还有特别常见的情况，就是设计师自己辛辛苦苦画了花里胡哨的图表、可视内容，还加上各种酷炫的动画和特效，但是开发做出来和设计稿完全不一致。这就是因为一般开发掌握的图形技术往往非常有限，或者使用的引擎本身也不具备实现相关模型、效果的渲染。这需要设计师和程序员进一步确认可以实现的效果特征有哪些，支持什么程度的模型，可以应用哪种着色器、光源，再根据这些特性重新优化设计方案。解决技术实现上的难度，就是找出问题在交互的步骤上还是视觉上（动画也算），然后围绕这个方向和开发进一步商议出可以实现的方案，再动手去修改。第 2：时间不够充裕，来不及做时间来不及也是非常常见的情况，尤其在设计师设计出非常多全新的样式和细节时。多数项目都会使用类似 Ant、Element、Tdesign 之类的开源前端框架，如果你制定了大量新组建或修改了原有组件的样式或细节，那么调整起来是非常耗时的，即使是一些看似简单的微小改动。因为成熟的大型开源项目，每一个元素的样式、逻辑都作用了大量的代码，这些代码又分布在不同的样式表或者脚本中。往往做一点小改动，就会发生莫名其妙的 BUG，这种情况就要倒逼程序员去检查和理解与它关联的所有代码信息。即使成功把这个细节改好了，保不准其它关联到的元素会出现问题，引发一连串的连锁反应……所以通常在前端时间不足的情况下，最简单的解决办法就是减少新样式的使用，尽可能使用框架自带样式或者过去开发的原有样式。这不是说每次迭代时间紧迫设计师永远不思进取，对所有设计 Ctrl+C/V 就结束了，而是要做权重评估，哪些样式的改动不仅重要性不高而且花费的时间特别多，哪些是非常必要且无法忽视的更新。之后，就是要和开发进行讨价还价的时候，放弃一部分次要的样式，集中精力来处理一些重要的内容。要有目的性的把整体视觉样式迭代拆分成多个版本来完成，每个版本见缝插针，而不是一口吃成胖子指望前端工程师进行 007 强行军。第 3：单纯和你有矛盾，不想做你的需求产品、设计、程序员之间如果有矛盾，一般不会是一天两天产生的，而是长期积累下来的。如果关系已经恶化到不能调和，那么需求的执行只能依靠公司规章，或者同对方上级沟通强行推进（也可能推不动）。如果关系还有挽回的余地，你又想顺利推进设计落地，那只有主动低头示好一条路能走了。因为设计和开发是没有从属关系的，只能晓之以情动之以礼，强势的压迫只会获得相反的结果。提升自己的专业能力，沟通能力，全局观，站在别人角度思考做出有效的让步，才能长期维护协作关系的紧密性。第 4：看破职场沉浮，一心躺平这种情况接近无解，当一个员工选择彻底躺平，就已经放弃追求和责任感。除非你们的私交非常好可以站在基友、朋友的角度上做感化，否则只能全部改成最简单的方案。如果和你对接的前端都已经躺了，而你又是个有追求的设计，那给你们唯一的建议：跳槽……上面的建议，与其说是解决方案，不如说是如何 “妥协” 的方案。这是一种无奈的客观要求，任何行业的设计，都是一个针对理想方案和现实情况进行妥协的过程。强如苹果，也在极度追求轻薄后重新增加了笔记本的厚度和散热模块尺寸（变成砖头）。固然我们可以用圆滑的处事方法和职场生存技巧处理样式实现不了的问题，但一个真正有职业精神和追求的设计师，会在项目初期就做好开发可行性的研究判断，而不是等到设计都输出完了再做调整。让可以遇见的问题扼杀在摇篮中，项目的推进效率才会更高，留给视觉交互的开发时间才会更多。想要尽量避免开发做不了的问题，就要满足下面的条件：掌握基础的前端技术逻辑前期进行开发可行性评估培养和开发团队的协作默契掌握前端技术逻辑这个观点以往的分享已经讲烂了，但还是不能不提，没有任何前端技术认识是绝对没办法判断设计的可行性的。拓展阅读设计师学前端有用吗？来看腾讯设计师的分析！凡事编程类课程广告找上门来，我都会立马拒绝，以为我真心不鼓励设计师盲目学习代码，包括前端。阅读文章 > 掌握 HTML + CSS 认识静态页面的布局，是唯一要涉及到需要自己上手做练习的地方，这个我们过去录制过对应的教学，顶多一周就能掌握。其它的部分，就是理解 JS 或 React、VUE 是什么，前端语言的基本认识和功能实现逻辑，还有诸如响应式、API、封装、异步等术语的意思。除了 JS 建议花一周时间看一些入门教程，其它的专业术语学习，就是在工作中碰到什么百度什么，全都有非常基础的科普扫盲。第二，就是在每次项目前期，将你认为可能会遇到的技术问题提前和开发商议。比如特殊的业务组件的复杂交互方法，界面框架响应式的变更，特殊动效的动画形式，图表的自定样式等等。掌握越多的前端知识，可以发现的问题就越精准。在构思设计方案的阶段觉得有开发难度，又拿捏不准的地方就一定要提前和开发通气，排除掉不合理的，确定出具体的实现方向。这可以避免很多没必要的问题，以及建立开发在界面实现方向工作量的预期，这点非常重要。因为设计稿没拿出来之前，对前端开发来说就是盲盒，很可能会收到一份意想不到的 “大礼”。只要预期可以建立，项目进度又不是非常迫切的话，专业的前端都是愿意尽量配合设计师实现一些更优或者更有挑战的效果。在过去，我和不同团队的前端工程师都会预留一部分的时间，进行特殊的效果尝试，尝试不同的技术方案和可能性，即使他们最终不一定能落地，但这可以非常好的提升各自的专业水平和眼界。有效的前期沟通也是专业性和获得话语权的关键操作，因为沟通意味着协商，协商意味着尊重，对技术人员尊重的缺失就是后面会被针对的主要问题之一（另一个是菜）。试想一下，你们的老板还是运营、市场人员，不咨询你的意见也不管你的能力范围，指定要下面这些效果的 Banner 还是 H5，你会怎么想？能满足前面两点，就能追求第三点，培养和开发团队的默契了。优秀的产品团队产品、设计、开发都要有一定的协作默契，这样可以减少很多不必要的沟通成本。默契是多方面的，包括了解双方的工作流程，每个阶段要做什么，怎么配合。另一方面，是了解对方的技术水平，擅长哪个方面，做出正确的评估，交付对应的成果。这是在半年到一年以内可以实现的目标，当你了解对接的前端工程师主要熟悉哪些技术栈、框架，技术水平、工作投入程度，你就会对怎么沟通，提供给对方什么样的设计内容有更深入的见解。虽然我们不能确保每次项目中所有界面技术问题全能在前期完美解决，但我们的目标就是尽可能减少到项目后期开发说 “做不出来”，再浪费时间在争吵谁听谁的问题上。理解完前面的内容，就可以进入最后的重点。针对面试中开发说 “实现不了” 的回复框架：找出原因：开发说实现不了，我首先要和对方确认并判断实现不了的原因是什么，是技术上的难点还是时间不够，而不是无理由强行推进自己的设计方案。解决方案：如果是技术上的问题，我会和程序员商量解决方案再做调整，来适应落地需要。如果是时间不够，那么我就会评估相关内容的优先级，放弃一些低优先级的设计需求留到后面版本再实现，集中精力在核心需求的开发上。提前避免：当然，除此之外我会尽力避免在设计完以后才知道实现不了。第一是我会积极掌握前端的相关技术内容，具备技术难度的初级评估能力。第二是我会在每次动手设计前，通过一些基础原型和程序员做更具体的开发可行性评估，提前调整不合理的方案。第三，我会在长期的研发过程中培养和前端团队的默契，尽可能提升设计落地的效率，从而预留出更多时间来实现更好的用户体验或视觉效果。这类问题主要考察的就是设计师针对项目实施的态度，是只在意你自己的想法，还是把团队产出放到个人喜好之上。以及你的团队协作潜力，一个缺乏协作精神的设计师，越有优秀的设计能力或者吹毛求疵的态度，越是项目研发中的负资产。所以，上面的回复框架大家可以根据自己的理解修改，或加入过去实际经历过的案例做说明，让它更有说服力！本次的分享就到这里，如果还有一些遇到不知道如何回答的面试问题，也可以发到下方留言中。我们下篇再贱～欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/designer-developer-communication
Hi，我是彩云。平时看了不少作品集，会发现不少同学本来作品还可以的，却在展示上没做好很可惜。作为大厂的面试官，我可以告诉大家的是，视觉设计师的作品集在展示上非常重要，因为它是你专业能力的外在呈现。道理谁都懂，但还是不知道怎么做？找优质的参考很有必要。今天彩云就帮大家拆解了一些 behance 首页作品的展示套路，共有 7 点技巧，如果大家能学会并用到作品集中，相信定能加分不少。之前也有专门写过一篇文章《Behance 首页推荐的作品集为什么这么高级？我们能从中学到什么？》仔细分析了一些学习的点，今天主要会把这些优质的参考给到大家，简单直接。上期回顾从 Behance 首页推荐的作品集里，我学会了这5个高级技巧！Hi，我是彩云。阅读文章 > 话不多说，下面我会从 7 个方面，拆解首页作品展示的秘密：错开对齐如果你对自己的排版不是太自信，又担心排版太死板，错开展示是一个很容易上手的技巧。只需要把界面稍微错开一下，展示效果就会好很多。下面就是一些 Behance 大佬用这种手法做的展示效果，可以从背景、作品摆放比例、留白、间距和错开幅度上进行研究学习。增加层次感为了增加展示细节，丰富层次是一个非常好用的展示技巧。如果你的作品界面在视觉上比较寡淡，那么把一些界面元素提取出来，利用投影加多层次感，视觉效果上就可以很快得到提升。这个技巧在执行上也比较简单，关键要注意投影的大小和颜色，千万别做的太重。出界设计有时候，一些界面元素确实视觉效果好的元素太少，比如很多 B 端表格的界面，用这种方法可以增加画面中的图片率，将本来隐藏在界面外的图片进行出界展示，更多利用图片提升画面的设计感。甚至可以将 banner 图中的元素进行出界，增加设计感。倾斜设计倾斜设计，也是一个提升设计感的常用技巧。先在正视角度下摆好，利用技巧 1 错开一下界面，然后整体旋转一个角度就能很好的提升画面表现力，增加设计感。但要注意用这个方法的时候，要保证界面元素的清晰度，不要出现锯齿。倾斜后也可以适当增加一些圆点点缀把一些 UI 组件斜角后，结合层次感设计技巧倾斜设计+出界+底部方块装饰倾斜设计后，增加一些半透明的装饰层次设计3D 厚度设计现在 3D 设计非常流行，把自己做的界面增加一定的厚度然后结合倾斜设计，也能快速提升界面的设计感。但因带有倾斜，很容易出现锯齿。我有一个常用的小技巧是做的时候可以把图做大一倍，然后再缩小放到作品集中，就能提升清晰度。例如我要做一份 1920×1080 的 PPT，那么我就会先做一个 2x 尺寸，也就是 3840×2160 然后再缩小，会比你直接做 1x 尺寸的图要清晰很多。把界面增加 3D 厚度后，再稍微加一些比较轻量的 3D 装饰元素，常用的有小球、方块等 3D 元素能让画面效果更好。增加底图设计这个技巧要注意让界面与背景图自然融合，关键在于需要找到一张非常好的图片，考验选图的能力，存在一定的风险。如果你对这种包装方式不大放心的话，建议你谨慎使用。比如这张图，细节点在于界面左边浅色配上底图中左边的白，右边深色界面搭配右边深色的山体颜色，看起来就很和谐。下面这张图用了一个跟界面中配图同一个调性的图片，为了防止干扰界面，还加了一点高斯模糊，效果也非常不错。这张图的底图用了一些比较具有设计感的图形，整体比较简洁高级常用的一些底图元素还有圆形，点等等用一些插画元素作为底图也是非常不错的套用样机来展示前面提到的很多实用技巧，能看到都是不需要用样机的，我自己更倾向于不用手机模型来展示，即使要用也是比较轻量的那种。有看过不少同学的作品集，其中的样机用的太过了，不知道的还以为你成了卖手机的作品集。这也是我放到最后一条来说的原因，我更推荐你在不使用样机的情况下把自己的作品展示做好。当然，如果用样机也没什么大问题，原则还是为作品服务的，保证清晰度，不抢作品本身的视觉就 OK。用上了样机，它就成了你作品的一部分，要保证样机是最新的，且质量要高。关于样机的话，彩云之前也帮大家找了一些非常高质量的样机资源，需要的话可以点击下面的文章看看内容，并找到获取方式下载使用。2021年全网最新最好的样机资源被我找到了！免费打包！俗话说的好：“样机用的好，过稿过的早”，想来有段时间没有给大家分享样机了。阅读文章 > 总结好了，以上就是彩云分析的 Behance 首页作品的展示秘密，当然并非完全囊括，只是这些技巧非常实用，学会的话，马上就能用到自己的作品集中去。复盘一遍上面提到的 7 个小技巧：错开对齐增加层次感出界设计倾斜设计3D 厚度设计增加底图套用样机希望这篇文章能给你启发，如果有帮助的话，欢迎转发分享。欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/behance-recommend-portfolio-2
随着体验设计的持续发展，行业内各领域的体验设计质量都有了很大的提升，并且各个竞品之间的差距越来越小。而更高的界面细节设计质量不仅是各个大厂产品体验设计的追求，也是我们拉开竞品差距的关键一环。我们平时可能阅读了很多理论知识文章，但往往在实际工作中却较少运用。学习掌握理论基础知识固然是很重要的，但在设计执行时掌握设计技巧也更能提升工作的效率和质量。那么在设计执行层遇到问题有没有一些立竿见影的解决方案呢？本篇文章分别从视觉创意的角度分析，希望可以帮助你遇到问题时另辟蹊径，延伸更好的设计思路。拓展阅读重磅好文！2022 年值得设计师尝试的 9 个视觉设计方向在整个设计领域趋向于多元化的今天，已经很难出现某一个设计风格主导整个领域了，10年前拟物化全面倒向扁平化的盛况，大概率是不再会有了。阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/visual-design-details
张大湿
哈喽大家好，这里是和大家一起进步的南清音~今天推荐大家几款设计师玩的小游戏，让大家在玩的同时也可以学到设计知识！拓展阅读：920 款游戏、38000多张高清参考图免费提供！游戏灵感神站 GAME UI Databas在设计类的相关行业中，游戏 UI 设计算是一个比较热门且备受年轻人喜爱的设计行业。阅读文章 > Kern Type「网站链接」 https://type.method.acKern Type 是一款调整文字间距的小游戏，可以提升设计师对文字排版的敏感度。网站会给出一组间距混乱的词语，设计师根据自己的视觉将字母调整为均衡的间距，完成后点击 Done 可以查看自己的调整是否到位并获得相应的评分，还是非常有意思的。除此之外，Kern Type 能展示字体笔画的轮廓细节，并提供字体名称、设计者和设计年代的相关信息，对我们拓展西文字体的知识也有帮助。Color「网站链接」 https://color.method.acColor 是一个测试对颜色感知能力的小游戏，通过颜色搭配来提升自己对配色的敏感度。网站有 5 种模式：色调、饱和度、互补色、三色、四色，越到后面越难。设计师要根据它给出的颜色找到相对应的颜色，全部通关的话，就说明你有很好的色感！操作方法十分的简单，你只需要拉动鼠标在规定时间内选出正确的颜色即可得分，十分考验眼力！怎么样，要来接受挑战吗！Bezier「网站链接」 https://bezier.method.acBezier 是一款帮助设计师掌握钢笔工具的小游戏，设计师需要根据指定的形状轮廓，绘制出对应的形状曲线，在这个过程中就能逐渐提升对曲线锚点角度的控制能力并熟悉一些快捷键。绘制结束后，你可以看到自己绘制的锚点数量以及标准绘制需要的锚点数量，如果数量不一致，网站会提示你再试一次或者跳到下一个。Supremo「网站链接」 https://www.supremo.co.uk/designers-eyeSupremo 是一款通过视觉判断中心点的小游戏，设计师如果想锻炼自己的眼力，可以来试一试。Supremo 会生成 10 款带小黑点的随机图形，只需通过选择代表 “是 “的笑脸表情符号或代表 “否 “的粑粑符号，来猜测小黑点是否在每个形状的中心。猜出正确的答案就能得到一分，从而进入下一关。错了一个问题，它会给你扔一坨粑粑。是不是燃起了挑战的欲望！Loxapp「网站链接」 http://game.ioxapp.com/eye-test/game.htmlLoxapp 是一款测试色感的小游戏，你需要在 60 秒内，从相似的色块中找出颜色不同的一个，越往后色块的差别会越小，需要的识别时间就越长，会一直到你看不出到底哪一个方块是颜色不同的，非常具有挑战性。今天给大家推荐的小游戏就是这些啦~我们下次再见！本篇来源：优设网原文地址：https://www.uisdc.com/5-design-game
“以用户为中心的设计（user-centered design）”概念因 Norman 1986 年出版的《以用户为中心的系统设计：人机交互的新观点》一书而广为流行。上世纪 90 年代以 IDEO 为代表的设计咨询公司将“用户研究”介入到产品创新的流程中来，逐渐演变为一种理解用户，将用户的目标、需求与商业宗旨相匹配的理想方法，适用于产品创新的各个阶段。云巢过往实践看来，用户研究不但有助于提升产品创新的精准度，还能给企业的发展战略带来重要的价值支撑。通过这篇文章，您将会了解到 Designest 如何基于用户洞察协同企业解决不同层次的创新问题。企业不同发展阶段三种典型创新诉求企业发展大致会经历四个阶段：萌芽期、成长期、扩张期与成熟期。处在不同发展阶段的企业，会面临不同维度与程度的发展阻力。有人可能会问，实现哪个阶段的跨越是最难的呢？现实告诉我们，都一样难。萌芽期的企业需要产品创新来撬动市场；成长期的企业面临产品的升级改造或更新换代；扩张期的企业需要不断提出创新概念满足自身发展需要；成熟期的企业需要发现新商机来实现自己的“第二曲线”。三种典型的创新诉求云巢从 2017 年筹建研究与策略部门以来，一直将以上创新问题的本质锁定在对用户未被满足的需求上。经过 5 年的发展，团队已熟练掌握了将用户的“线上行为数据洞察”和“线下场景行为研究”相结合的作业模式。并以此作为定量与定性研究的两个手段，逐步完善出“数据洞察+用户研究”的双驱动模型，将三种典型的创新诉求由浅入深对应出三种不同的研究方法，以痛点挖掘及体验升级解决产品的更新换代；透过生活变迁，捕捉需求变化来创造新的生活方式模型；以用户体验视角提出产品布局概念，挖掘适合企业新的商业机会。用户研究触达的三个层次实现三种创新的必要实施路径1. 从萌芽期到成长期优化现有产品，快速进入市场，积累核心用户从无到有，由小到大。在初创企业解决了生存问题后，有的企业会在这个阶段急于摸索下一个新方向，并在这个事情上烧掉大量的资金。事实上，企业成功打造一个产品，不等于可以再做好一个产品，更不等于可以同时运营两个产品。开拓新产品的试错的成本是很高的。此阶段，核心是解决节流发展的问题，力求实现手头资源的最大化利用。此时，专注于优化现有产品，实现现有产品的迭代升级，是最不容易出错的选项。用研对于明确产品的优化方向有重要的意义。任务有了明确的方向，才能省时省力。不仅如此，在优化后的产品投入市场前，用研还能为其提供低成本的成果检验，预估正式上市时的市场反馈。在积累了核心客户的一致好口碑后，产品才算初步收获成功。有了这一过程，核心团队才算完整经历了产品打造的周期。此时，可以把成功的经验打包复制，服务于新产品的打造。在此时期，用户研究所解答的问题：产品的体验是否存在改进空间？应该从何进行改进？问题处理的优先级如何？改进的效果消费者是否满意？优化现有产品的一般实施路径：1. 产品体验历程分析在进行优化产品的服务中，调研团队通常会借助产品体验历程的分析方法，让用户模拟重现特定任务、使用特定产品，快速得到同类产品急需优化的问题，无论是因产品本身的设计缺陷、还是因用户的行为习惯而引发的体验低谷，都可以清晰暴露，在以用户体验为中心的设计过程中，提供原始依据（此方法仅适用于体验触点较多的产品）。产品体验历研究框架2. 需求优先级划分，提出优化机会点与设计概念在众多改进需求中，调研团队会以用户需求优先级作为创新最主要的依据，但同时也会考虑现阶段企业竞争的需要以及技术储备的能力，锁定创新机会点。3. 产品打样，可用性测试为了确保新设计不会衍生出新的问题，可用性测试变得非常关键，从概念创意、到外观造型、再到使用方式，多次重复的检测，最终得到无限接近用户预期、符合现阶段市场需求和企业现阶段发展需要的设计。优化产品体验案例：携手九牧集团，重构智能浴室柜Designest 携手九牧集团，针对 Z 世代年轻家庭，对传统浴室柜进行新体验的探索，挖掘消费在进阶体验功能上的更多需求，提出智能集成概念。最终伴以借鉴跨界行业优点的差异化设计，荣获 2021 年 iF 奖。九牧卫浴柜非常注重用户场景化体验的连贯性，Designest 深入地了解用户在洗漱中的痛点及需求，针对智能拥戴群体及精致生活的人群提供功能整合化设计。整合浴室行为的连贯需求，提升场景体验的一体感2. 从成长期到扩张期快速引流，创造爆品，抢占心智从大到强，在企业完成了积小胜为大胜后，若希望实现新发展阶段的跨越，需要从复制成功经验的循环中，转向破旧立新的新姿态，打造出圈爆品，进一步抢占消费者心智。此时，核心是解决竞争力的问题。此阶段，企业需要集中精力打造 —— 在市场上存在感强，具有一定壁垒，能支撑品牌走高的产品。这时候，打造创新概念产品，是不少企业为品牌引流的优先策略。用研对于明确创新方向、达成团队共识、敲定创新决策，具有催化作用。一方面，用研能为概念创新带来发散性的新鲜灵感，另一方面，用研还能有助于精准地定位有市场价值的创新方向，让新物种能在百花齐放的新消费市场中绽放异彩。在此时期，用户研究所解答的问题：新生活方式催生哪些未被满足的需求？新的需求是否有新的创新机会点？目标消费者对新概念产品的评价与消费意愿？概念产品创新的一般实施路径：1. 竞品与行业趋势分析调研团队在项目初期对目标行业进行趋势收集与分析，深入了解趋势，捕捉机会方向，总结创新机会洞察。对行业进行分析，了解当下行业的领先企业都在做什么。同时需要对竞品有充分的分析，在各类竞争产品中寻找突破方向。2. 用户生活方式研究明确了机会点后，调研团队会通过用户访谈对机会进行验证，了解用户和产品密切相关的生活方式，挖掘用户决策的心理依据。同时以场景为出发点，与用户进行参与式设计，观察用户对于产品使用的真实过程，挖掘可能的产品概念机会。生活方式研究分析模型3. 提出创新概念调研中的情境，目标，动机，行为和态度可以为创新提供素材。在调研中团队会进行详细的记录，并在调研结束后进行分析。分析通过亲和图等方式进行归类和总结，提炼有价值的信息并转化为设计要点指导接下来的概念设计工作。4. 创新产品设计设计概念明确后，进入创新产品设计的阶段。在该阶段调研团队可能邀请设计师与企业内部人员进行共创工作坊，共同探究设计概念的可行性与可能性。在工作坊的过程中，通过主题聚焦、机会发散和概念探讨等方式进行共创，最终得出具有高度共识的产品策略。提出创新概念案例：顺应生活方式变革，定义家居新物种Designest 携手皮阿诺，针对新一代年轻家庭的小户型居住空间，对客餐厅进行重新设计，把健身房搬到家庭里，并且能够很好的收纳起来，使得用户能够自由切换运动场景和正常生活。G-Wall/绅纳-健身柜横空出世，打破了固定式格局的陈旧理念，惊讶了行业，最终斩获 2021 年 iF 奖。Designest 洞察到 90 后的居室不再是以往的五室同堂，小规模家庭释放了更多空间，对空间有更多的想象力，结合团队多年来对年轻一代生活方式变迁的观察，提出场景融合式客厅，应对未来多变复杂的客厅生活，而健身柜，仅仅是该创新理念的冰山一角。一面墙秒变健身房，全球首创的家居智能运动解决方案3. 从扩张期到成熟期拓展生态布局，寻找第二曲线从强到久。发展到此阶段的企业已经具备了一定的品牌影响力，并完成了与资本市场的初步对接。但若想发展第二曲线，仍然需要不断去开拓新的潜力市场，因此，我们常常会看到有成功企业去涉足一些看似不沾边儿的业务，这其实是它们在为自身买保险，以防止被颠覆。对于这个阶段而言，核心是开拓新赛道，形成行稳致远的产品生态。此阶段，企业开拓新商机需要有更宏大的规划，需要聚焦更长远的未来。用研对于预测未来用户的需求与喜好，把握行业未来风向，具有显著的意义。它的实施，将有助于管理者合理地规划企业的未来走向。在此时期，用户研究所解答的问题：预测未来 3-5 年用户的生活方式将发生怎样的变迁？新生活方式催生哪些未被满足的需求？新的需求是否催生新的赛道和市场？开拓新商机的一般实施路径：1. 竞争格局分析行业的竞争格局，它影响着行业能否为企业提供稳定的生存环境。在明确企业所具备的条件后，调研团队通过电商数据了解市场集中度，帮助企业选择赛道，并进一步指导目标行业及品类的选择。同时，该工作还能透过消费者线上消费的行为与交易数据，获得宏观生活方式趋势迁移后所影响的消费需求变化。作为 Alibaba 战略合作伙伴，运用天猫平台数据定义趋势赛道2. 生活方式趋势研究另一个关键的研究动作，是针对特定用户群体，进行全场景的生活方式研究，关注发生在他们身上的，有关生活理念、价值观、生活方式、行为模式等的变化，捕捉下一个因社会生活方式转变而诞生的新风口。在选定目标行业及相应品类后，调研团队的另一个关键的研究动作，是针对特定用户群体，进行全场景的生活方式研究，关注发生在他们身上的，有关生活理念、价值观、生活方式、行为模式等的变化，捕捉下一个因社会生活方式转变而诞生的新风口。场景深度洞察框架3. 提出战略规划以实现企业的目标愿景为目的，团队将提出对企业经营策略的建议。根据项目目标的不同，最终研究结果的呈现方式也会相应做出适配，包括但不限于赛道选择、品牌升级、产品线规划等类型的成果。发现新商机案例：携手立白集团，探索生态发展战略立白高端洗涤品牌 Kispa 委托 Designest 负责其全新智能产品线规划及设计。借助 Kispa 高端及智慧的品牌定位，我们提出更加符合现代家居卫生清洁的便捷轻智能解决方案给消费者。其中，专为家庭高频的洗手场景研发出的智能感应洗手机悦泡 K-7，突破行业首创泡腾片式洗手剂，并荣获 2018Red Dot 顶级设计大奖。Designest 关注时代变迁，年轻家庭在餐厨清洁方面与老一辈存在本质需求差异，迎合在智能化家居生活上的强烈憧憬，以无接触、省事省心、超速清洁为核心，规划全新轻智能清洁产品线。同时，有感于传统洗手液产品在生产制造、运输、使用过程中资源浪费和环境污染，Designest 专为家庭高频的洗手场景设计的一款智能起泡洗手机，采用泡腾状洗涤剂的全新概念，有效减少生产运输过程中碳排放和传统洗手液塑料包装的过度使用。Designest 关注不同世代家庭的餐厨清洁需求变迁商业竞争终将回归用户价值企业的成功离不开用户的认可，设计更应该重视用户的价值。在这个体验至上的时代，聆听用户的声音，是每一个企业都需要注入到团队基因里的一项本领。云巢创新咨询机构一直致力于解决企业不同发展阶段的创新问题，追求把“产品创新&品牌价值”整合到企业发展战略中去，通过对市场机会挖掘、真实用户的洞察并输出切实可行的策略赋能于企业，最终通过设计创新的手段助力企业获得商业成功，以及在其内部可持续地推动组织变革。让我们一起携手，在大变局的时代拥抱变化！万字干货！大厂最爱的用户研究方法全方位科普导读：这篇长文主要讲述了用户画像与用户体验地图在实际应用中的作用、差异、流程、实用技巧和关联。阅读文章 > 欢迎关注作者微信公众号：「云巢创新咨询」本篇来源：优设网原文地址：https://www.uisdc.com/typical-innovation-methods
大家好，我是和你们聊设计的花生~地图是平面设计中常会运用到的一种元素，但之前有小伙伴在社群中反应，找到的地图素材都是花花绿绿的图片，不符合自己的设计风格。那今天就为大家推荐几个超实用的地图资源下载网站，可以免费下载可编辑的矢量地图素材，还会向大家推荐一些优化地图呈现方式的思路，一起来看看吧~更多可视化设计资源：想快速搞定可视化设计？这20个精选神器收好了！大家好，我是小六。阅读文章 > 可视化设计神器第二弹！15个精选神器都在这！大家好，我是小六。阅读文章 > 5 个实用地图资源网站1. 标准地图服务「网站直达」 http://bzdt.ch.mnr.gov.cn/标准地图网站由自然资源部地图技术审查中心承办的，上面的地图文件绝对正确精准。除了我们最熟悉的中国地图和世界地图，网站还提供各省（市、区）的标准地图。下载的地图提供 EPS 格式，这意味着我们可以对于进行后期编辑，比如提取矢量轮廓文件、修改颜色等。标准地图网站还有国家版图知识，里面对如何识别「问题地图」有详细说明，非常实用。2. 百度/高德个性化地图编辑服务「百度地图开放平台」 https://lbsyun.baidu.com/index.php?title=open/custom「高德开放平台」 https://geohub.amap.com/mapstyle/index在平面设计中运用地图的时候，一个常见的问题就是地图的颜色与设计风格不匹配，以及地图上的标注信息过多，没有办法突出重点。这个时候用百度地图开放平台或高德开放平台能很好的帮助我们解决这些问题。在开放平台内，我们可以对区域内的地图元素、文字标注的颜色/样式进行修改，并选择是否显示某种地图元素和文字标注。百度地图的个性化编辑界面开放平台上提供预设的地图模板，具有多种不同提供风格的配色。并可以提取上图片配色，对地图进行重新上色。高德开放平台的地图模板与根据图片提取配色功能使用这类开放平台需要一个简单的个人身份认证，通过后就能正常使用了。3. DataV.GeoAtlas（ 阿里云可视化地图平台）「网站直达」 http://datav.aliyun.com/portal/school/atlas/area_selector「使用指南」 https://www.yuque.com/datav/datav-cool/ssq6nk?spm=a2crr.b71357980DataV.GeoAtlas 是一款专业的地理工具，能进行范围选择、便捷生成、层级生成，并进行相应的范围框选和标注。对平面设计师来说很好用的一点就是可以快速选择某区域的轮廓地图并下载 SVG 格式，再自己进行后期编辑。4. 地图便民查询服务「网站直达」 https://map.bmcx.com/hubeisheng__map/提供带详细标注的卫星地图，可以作为标注地图信息的参考。5. 城市道路线性地图 Anvaka(需梯子)「网站直达」 https://anvaka.github.io/city-roads/Anvaka 是一个免费开源的线性道路提取网站，地图资源取自 Openstreet。输入你想要的地区，网站就能呈现其线性地图的样式。可以对地图进行颜色编辑，并提供高分辨的 PNG 和 SVG 的下载格式。更多使用可视化工具可视化设计神器第二弹！15个精选神器都在这！大家好，我是小六。阅读文章 > 想快速搞定可视化设计？这20个精选神器收好了！大家好，我是小六。阅读文章 > 可视化地图工具/教程1. 三维地图免费工具 NB Maps「工具直达」 https://nbcharts.com/map/map.phpNB Map 是大神灰色执照开发的一款三维地图的工具，可以随意调节地图颜色、板块高度、旋转不同的角度等。调整完成后，可以下载透明背景的 PNG 格式，也可以点击动画按钮后录制成视频，而且这一切都是免费的。NB Maps 工具详细介绍数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps大家好，我是灰色执照。阅读文章 > 2. 免费教程教程一：设计思路教程！手把手教你打造酷炫的可视化地图「直达」 https://uiiiuiii.com/other/1212493172.html「内容重点」列举了 7 种地图可视化的常见表现形式，以及制作可视化地图的注意事项。教程二：大厂的设计师怎么做可视化地图？「直达」 https://uiiiuiii.com/illustrator/1212434300.html「内容重点」详细展示了如何在 Ai 中对矢量地图素材进行特殊效果处理。插画类地图插画类地图也是一种常见的地图呈现模式，在与旅游、展览类相关的设计中运用极广。插画类地图可以大致分为两类，一类是手绘地图插画，另一种则是矢量插画地图。相比来说，矢量插画地图上手难度低很多。我们可以将真实地图垫底作为参考，用矢量线条和形状确定道路样式，建筑、植被、人物等地图元素可以利用一些免费的图标/插画资源，加上配色就能形成一副完整的地图了。比如之前像大家推荐过的 Openmoji 免费图标网站，上面人物、植物、建筑、动物、交通工具元素一应俱全，且风格一致，可以直接用来搭配一副完整的地图插画。关于 emoji，你必须知道这个全能网站Hello Everyone~ 我是花生。阅读文章 > 更多插画类地图免费可用资源：任天堂设计师出品！700+免费可商用的粗点像素风素材打包下载！《超级玛丽》《魂斗罗》《坦克大战》《吃豆人》，还记得这些在那个时代给我们带来无限欢乐的像素风电子游戏吗？阅读文章 > 免费可商用！图标、插画和图库应有尽有的素材站「Reshot」本文要推荐的「Reshot」是一个整合、收录三大类型素材免费图库，网站提供超过 40000 个 SVG 免费图标、超过 1500 个插图素材和超过 25000 张相片，这个网站最大特色是素材都能实时下载并适用于商业用途，无需付费，使用时也不用标记出处来源。阅读文章 > 以上就是今天的分享，希望对大家的设计有帮助。如果你还有关于设计的疑问，欢迎加入优设官方设计交流群（入群二维码见下方 Banner），与优设设计总监和其他热爱设计的小伙伴一起交流学习。我是花生，我们下期见~本篇来源：优设网原文地址：https://www.uisdc.com/maps-resource
需求分析原则设计本质上是我们看待世界的一种思维方法，其目的是为了解决问题。在实践中，我们总要知道，我们要为谁，在什么环境或条件下，解决什么问题，如何解决？其分析的结果，直接影响到解决方案的好与坏，成或败。司空图有言：“超以象外，得其圜中”。意思大概是说，要「越过事物表象，得其核心要义」，即透过现象看本质。亦正如柳冠中老师在演讲中所说：“现象之外才是核心，设计真正的功夫是在设计之外。”在实际工作中，我们能接触到的只是事物所呈现出来的表面特征，而触发这一结果的原因，或事物背后所隐藏的目的却不那么显而易见，这就需要我们从现象出发，从结果出发，一步步地分析现象，探寻现象背后的原因。5000字超干货！写给设计师的需求沟通完全指南设计师真实 emo 事件帅帅是毕业没多久的设计师，做设计总是充满激情与冲劲儿，这天他将反复修改的稿子终于交付出去了，想着终于结束了，但是没过一会，群里的产品在“内部讨论”后直接@他，要求他修改设计稿，竟然改回到了先前的稿子，他直接 emo~帅帅：啊，我他*不做了，一直阅读文章 > 例如：用户要一个杯子，我们就要知道用户想要造杯子背后的目的、原因，是蓄水？饮水？还是送礼？先谋事，再造物。先确定目标，再寻找路径和方法。需求分析方法那么如何得知用户在谋什么事？如何探知现象背后的原因？现象背后潜藏的目的或动机？这就需要我们结合用户当时的处境（什么地点？什么时间？），其所扮演的角色，所表现出的行为出发，一步步探寻。同样拿“我想要一个杯子”举例，在接到这个需求之后，应结合用户当时的处境，分析用户所处的场景、所扮演的角色，所表现出的行为，由此探知到用户需求背后的目的/动机。1. 角色即用户的身份、角色，可以是个体用户，也可以是一个组织团体，如学校、企业、政府部门。2. 场景包含具体的时间、地点。3. 行为即用户具体做了什么事情，比如：个体用户所做的事情可通过具体的行为、语言表现出来，在前期调研访谈的时候，我们要重点关注用户的行为动作，这是因为个体用户不总是言行一致，有时候其口中所说的可能跟真实情况会有偏差，这并不是用户可以说谎，而是有些时候，用户对自己可能并非十分了解。组织团体，比如企业用户我们要观察的就应该是群体的行为，他们所做的事情通过具体的业务流程表现出来，为这类用户服务，我们就要与其内部的关键角色多做接触，对企业内部组织架构、业务情况有所了解。同样拿“我想要一个杯子”举例，在接到这个需求之后，应结合用户当时的处境，分析用户所处的场景、所扮演的角色，所表现出的行为，由此探知到用户需求背后的目的/动机。方案设计经过对特定的角色、场景、行为进行分析后，了解到事情的本质，有了目标，有了动机，我们再进行具体的方案设计。在“我想要一个杯子”的案例中，基于用户目标的不同，我们的解决方案不尽相同，可以是茶壶、水塘，可以是吸管、勺子…很多时候，我们接到一个需求之后，浪费了大量时间进行方案设计，忽略了事情背后的目的、原因，导致最终设计结果并不理想。方案评估前面我们发散了那么多方案，最后，要建立合适的分析维度，比如方案的新颖度，产品目标的契合度…，筛选出最佳方案，评估维度太少其结果有失精准，太多则消耗时间，尽可能控制在3～5个。但无论这个评估维度如何，方案的评估本着一个原则：投入成本要与所产生的收益成正比。毕竟，企业不是福利院，获取商业利益才是其目的，每个老板都希望用最小的投入成本实现最大化效益。需求案例分析我想要一匹更快的马。比如，用户会告诉我们：我想要一批更快的马。这时候，如果我们直接给用户一匹马，不见得能达到用户预期。这是因为我们忽略用户需求背后的动机，即他为什么“需要一匹更快的马”？他是要达成什么样的目标？是出于什么原因？在不同场景下、由不同身份角色的人提出，因目标不同，解决方案亦大有不同。场景一赛马场，决赛前，赛马选手：我想要一匹更快的马。目的赢得比赛制约因素比赛规则（是否可更换比赛工具）路面情况双方马速双方驭马技术双方比赛策略解决方案从比赛规则出发：是否可更换比赛工具，如羚羊、猎豹、汽车…从路面情况出发：清理自己的路面，给对方跑道设置障碍…从双方的马出发：偷走对方的好马，断对方马腿…从双方驭马技术出发：害对方迟到，下蒙汗药…从双方比赛策略出发：田忌赛马以上仅是思考问题的角度，在现实竞技中，我们还是要遵循相应的道德规则。经典案例“田忌赛马”，孙膑即是从比赛策略出发，通过：田忌：差马对方：好马田忌：中马对方：差马田忌：好马对方：中马在双方马力对比不大的情况下，三局两胜，来帮田忌赢得比赛的。这个方案，对时间、精力、资金的消耗都最少，效益还是很可观的，不得不佩服我们孙同学的脑袋瓜啊！场景二偏远地区，通讯员：我想要一匹更快的马。目的更快地传递信息分析只要信息能过去，其目的就达到了解决方案更快的传输工具，或者通讯设备：根据距离远近、地理环境等情况的情况，提供传输工具：飞鸽、风筝、弓箭、船只、汽车…改善当地的通讯环境，提供更好的通信设备：电话、电子邮件、邮箱…方案评估最后，经过评估，结合技术、人力投入成本与最终所产生的效益，若距离较近，我们的选择可以是弓箭…场景三草原等偏远地区，普通人，日常出行：我想要一匹更快的马。目的节约出行时间解决方案更快的交通工具、让他人代劳更快的交通工具，如：汽车、高铁、飞机…他人代劳，如：仆从、外卖、物流、快递…方案评估略总结需求分析的过程，实质上是透过现象看本质，再进行方案设计得出最佳设计方案的过程。很多时候，我们接到一个需求之后，浪费了大量时间进行方案设计，忽略了事情背后的目的、原因，导致最终设计结果并不理想。其完整的需求分析过程如下图所示：8000字干货！写给设计师的需求分析指南在工作中，我们会经常与产品经理对接需求、理解需求，站在交互设计师角度，我想分享如何分析需求，如何解决正确的问题。阅读文章 > 欢迎关注作者微信公众号：「小观者大设计」本篇来源：优设网原文地址：https://www.uisdc.com/requirements-analysis
随着 UI 设计对情感化和差异化的追逐，插画已经逐步影响了 UI 设计趋势。插画已经不局限于运营视觉范围的运用，在 UI 场景中也逐渐普及，作为背景视觉感强化、图标风格差异体现、功能或者业务配图强化等等。黑马哥结合常用的热门产品，梳理了一些插画在 UI 场景中的案例，希望可以让大家对插画影响 UI 趋势有一定的感知。不会插画的试试这个：不会插画没关系，用这个免费插件帮你快速搞定！Hi，我是彩云。阅读文章 > 呈现独具一格的 Banner 设计插画运用到 Banner 设计中非常普及，不仅可以带来个性化的视觉风格，也可以避免运用图片带来的版权风险。因为插画有着丰富多样的风格，运用到设计中也会呈现风格多样的效果，插画也比较容易统一视觉规范，很多成熟的设计团队都会制定插画规范系统，满足项目各类场景的运用。作为视觉设计师来说掌握插画的能力已经成为基本岗位需求，很多公司对于 UI 设计师也有同样要求，这也是提高产品设计视觉感的一个方向。突出图标设计的风格差异随着用户对于感官体验的升级，图标风格特征的差异化体验至关重要，而插画风格的融入可以提升图标设计的特征感。插画风格运用到图标设计中，需要做简化处理，可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中，不仅可以使得图标具备差异化的视觉效果，也能烘托出整体设计的质量。强化区域背景的风格感插画可以作为栏目区域背景来使用，以此增加该栏目的风格感和视觉感。相较于摄影图片来说，插画具备风格特征，可控性较强，能够满足更多氛围感的营造。突出个人中心的情感化个人中心的设计之前大部分采用单调的白色或者品牌色作为背景，近些年一些产品开始使用插画背景来增强情感化设计。有的产品还根据天气变化、节日主题、白天/夜间等场景设计不同的插画风格，带来的视觉感较强，也能吸引用户的关注度，提高用户对产品的感官体验。强化空状态的情感化设计空状态由单纯的文字提示演变到图文结合，感官层面越来越被重视。利用图形结合、IP 形象结合、小场景插画结合等，还有结合动效设计的案例，带来的设计体验感也是非常不错的。瓷片区的视觉感强化插画风格被运用到视觉表现层面案例较多，特别是在瓷片区的发挥，呈现出了风格多样的优秀案例。可以使用全场景插画作为背景设计，也可以使用小场景插画作为局部强化，还有使用部分插画元素作为点缀设计，视觉表现力丰富多样。活动封面设计体现统一感将插画形式作为活动或者服务栏目的封面设计，相较于其他形式来说风格统一性更强，也能更好的进行设计延展。就算使用不同风格的插画来进行封面设计，只要在配色风格上面把控好，也能做到有效的视觉感统一，对于设计师来说把控性很强。增强专题活动头部视觉感插画形式运用到专题页设计中案例非常多，相较于合成图片来说，插画的风格感和驾驭度更灵活。插画形式带来的情感化体验更佳，通常被运用到专题页头部区域来增强视觉感，也有延伸到整个背景层设计中的案例。根据特定活动主题创作插画对于设计师来说更容易，找到符合主题的摄影图片是很难的，自己拍摄成本又会比较大，插画形式是最经济实用的设计解决方案。插画形式提高栏目品质感插画形式可以作为一些代表成就感的配图设计，以此来提高该栏目的品质感。比如在打卡点亮城市成就的设计中，不同城市的邮票采用插画形式来表达，不仅可以展示出各城市的风格，也能做到视觉风格的统一。精美的插画提高了品质感，吸引了用户的参与度，带来的感官体验也是非常棒的。体现主题化的风格感在主界面的设计中，不仅要体现出功能的操作体验，也要通过视觉的强化来吸引用户的关注度。一些产品在主界面设计中以插画作为背景来强化，结合动态的表达趣味性更佳，带来的关注度也是不错的。插画形式结合到功能模块中，带给用户情感共鸣和操作的体验度。插画形式的引导页设计插画被运用到引导页设计中是相当普及的，也是非常有利于进行设计发挥的。插画元素表达的可控性可以满足引导页主题创意的需求，通常以轮廓束缚为主，满屏插画较少。基于焦点和轮廓造型进行插画元素装饰，对于插画基础薄弱的设计师更易上手。插画形式的闪屏设计闪屏和启动页采用插画的形式也是可取的，启动页设计通常和引导页表现类似，不过运用品牌展示的相对多一些。闪屏分为广告形式和主题展示形式，闪屏广告形式比较多，一些节庆主题和特殊纪念日活动，也会以精美插画的形式表达，更容易表达主题和与用户产生共鸣感。小结插画作为设计师需要掌握的基础技能，被逐步运用到各类设计场景中，也影响了 UI 设计的趋势走向。随着产品设计感官体验的不断升级，风格化和差异化的设计才能满足更多用户的感官需求，而风格多样的插画形式首当其冲。希望这些插画结合 UI 场景的案例可以作为抛砖引玉，让大家重视插画在 UI 设计中的表现力，不断加强并掌握插画设计的能力。10个理由告诉你，为什么插画在UI设计中这么火在过去几年当中，插画开始以一种坚挺的姿势，站在设计趋势的最前列。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/illustrations-ui-trend
产品文档/交互方案里往往需要对某个功能的产生逻辑、交互方式等进行说明。比如一个 Loading：加载前/中/后的状态该如何显示？展示范围是多少？先出文字还是图片?不写明白、有忽略的话，开发就会按照自己的想法去做、甚至不做（谁让你没写）。因此趁此盘点一些常见的交互机制，算是一个小总结吧。包括：删除、中断、显示、加载、排序、刷新、缓存、推送（push）开发相关的干货看这里 6000 字干货！写给设计师的开发沟通指南前言“这个做不了、很难做的啊、我没时间啊、改这个有什么意义吗？阅读文章 > 删除机制删除逻辑是怎样的？无法找回：是否需要二次确认设计、以及展示删除后的结果可以找回：是否需要展示如何找回的说明？删除对象：是单个、批量还是全部？删除方式：手动删除：点击删除还是滑动删除？自动删除：何时开始？是否展示剩余的时间删除状态：包删除成功提示、删除失败提示、删除过久的提示中断机制数据的处理是怎样的？信息/逻辑是否会发什么变化、是否自动保存进度/记录、是否影响后续链路里的逻辑处理中断方式：有意、无意中断的处理都是怎样的？中断程度：后台继续运行还是彻底退出后台？软/硬件变化时的处理：包括耳机的连接与切断、电话的来电与挂断、网络的中断与恢复显示机制显示是否有边界值？包括最小值、最大值、到达特定阈值显示是否有时效性？内容过期时怎么显示？到达某个阈值时怎么显示？内容不存在的显示？其他考虑点：显示格式：如日期时间的数据格式：2022.05.01 2022-05-01显示分辨率：各种分辨率下如何显示，最大，最小考虑极致情况显示样式：是否对齐组件？需要统一？是否有差异化设计加载机制加载前中后该如何显示？包括默认状态的显示、初始状态的显示、加载中的显示、加载过长的显示、加载成功的显示、加载失败的显示、加载为空的显示等等。加载方式：手动加载还是自动加载？优先加载哪些内容（文本或图片）？加载范围：展示数量是多少？一次性全量展示还是分页加载展示？推送（push）机制push 机制：推送内容说明、全量用户还是局部用户、推送的时间/周期/次数等都是怎样的？push 交互：跳转：原页面删除、无法进入、push 过期时该如何处理？返回：返回到哪里？退出机制当期操作进度、记录是否保存？是否需要展示退出说明、原因？退出程度：是当前页面、某段流程、退出后台运行、杀死后台、还是手机关机？排序机制默认排序是怎样的？正序还是倒序？哪个选项优先排序维度是怎样的？按时间/销量/质量/数量/评分/信用等等排序刷新机制是手动刷新：如下拉刷新、点击刷新还是自动刷新：何时开始刷新？是否提前告知用户？是否提前自动保存操作记录缓存机制缓存机制是怎样的？包括缓存对象、数量、范围缓存位置是哪？手机本地、服务端缓存的清理是怎样的？自动清除还是手动清除好了，以上就是一些常见的交互机制，希望在你输出交互方案、产品为文档时有所帮助，避免漏掉一些内容，减少和开发的相爱相杀。欢迎关注作者的微信公众号：「和出此严」本篇来源：优设网原文地址：https://www.uisdc.com/9-interaction-mechanism
最近在帮小姐妹看房子的装修设计风格，其中关于厨房开放式与封闭式的风格衍生出了一些跨文化产品的设计思考。小姐姐家是小户型，若选择开放式厨房能使空间最大化，扩大视觉空间，但同时又将面临客厅中的油烟问题。开放式厨房在西方的使用率更高，这是因为中国传统的烹饪操作产生的油烟远高于西方的烹饪操作，即使有油烟机，但面对明火下的煎炒烹炸，不可避免还是会有油烟的困扰，在油烟机没有根本性解决问题时，开放式厨房对中国的大多数家庭来说还不是最好的选择。这里涉及到一个因素，中西方饮食的差异。而中西饮食文化的差异对厨具也必然产生影响，例如洗碗机，西方人洗碗机的使用频率普遍高于中国人，且是每家必备的产品。但在八九十年代传入中国的时候却出现了“水土不服”，给大家留下了洗碗机洗不干净的印象。其实是因为中西方烹饪的方式不同，所用的餐具也不一样。西方的餐具大多是扁平的盘和碟，而中国人习惯用碗盘，碗口深，对于碗中凹槽内的油腻食物残渣，很可能水流冲洗不干净。但经过数十年的产品迭代，已经有了中式的洗碗机，问题得以解决。从文化的角度上去看这些工业产品的设计，其实是很有意思的，不同文化之间的碰撞与交融赋予了产品设计的独特性。不管是实物类产品的设计，还是服务类产品的设计，只有以人为中心，以文化为核心，理解目标地区的文化作出针对性的设计，才能使自己的产品更容易被目标用户所接受，我认为这是跨文化设计的重要意义。所以，跨文化产品的设计，了解他国文化是第一要素。因地域文化的不同，有些看起来逻辑性非常强的产品设计并不能满足其他地区的用户需求，也不存在囊括所有问题的单一解决方案，大多数公司采取的是“国际化”+“本地化”的战略方案，保证多元文化下的统一，单一文化下的个性。接下来我会分三步分享跨文化设计的思路：了解文化因素下的差异有哪些？如何去寻找和分析这些差异？跨文化的设计原则和设计系统？往期文章回顾：7000字干货！东南亚本地化产品设计差异：泰国篇泰国是东南亚的第二大经济体，仅次于印尼。阅读文章 > 7000字干货！东南亚本地化产品设计差异：印尼篇印尼是东南亚人口最多的一个国家，人口超过 2.65 亿（还是 2019 年末的数据，现在应该近 3 亿），其中 30 岁以下人口占比超过 50%。阅读文章 > 如何做东南亚的本地化产品设计？来看阿里设计师的系统总结这几年，出海东南亚一直是热门话题，不少国内企业斥巨资出海东南亚。阅读文章 > 文化因素下的差异这里引入 Leong 和 Clark 的文化理论，他们针对文化对象的研究制订了一个简单的框架，认为文化产品的层次应分为三个级别，由浅入深即为：外在层次“有形的、物质的”，中间层次“行为的、习俗的”，内在层次“无形的、精神的”。后经文献研究，徐启贤老师对文化空间层次进行详细区分和讲解，增加了文化产品属性列表。林荣泰老师又在此基础上进行完善，将文化层次从形态、行为、精神 三个角度出发，提出文化产品的具体属性。我按照自己的理解，对以上进行总结和思考。从文化层面上看，可分为文化理念、用户行为、视觉偏好的差异；若由文化层面转换成产品设计层面，对应的是价值观、功能与交互和界面外观的偏好。1. 文化理念（价值观）差异文化受到多方因素的影响，例如地理、经济、社会政治等因素，不同文化背景下成长的人，必然形成价值观的差异。例如中国的集体主义文化和西方的个人主义文化，中国人更注重关系的维系，强调以群体为中心；西方则是个人本位原则，提倡“自我依赖”的观念。2. 用户行为（功能与交互）差异不同的文化背景下，用户的生活习惯、行为模式也各不相同。例如我们中国独有的春节红包文化，演变成现在的电子红包。在我们传统的春节习俗中，人们收红包和发红包都是为了讨个吉利，意在祈福。现在发红包已然成为烘托气氛、强化关系的一种仪式，但不管是在什么场景，以什么形式，红包在我们中国人心中都代表着祝福和好运，它是我们中国独有的一种文化，所以在中国的社交 APP 上能看到发红包的这个功能，而西方国家没有。3. 视觉偏好（用户界面）差异同样，不同颜色在不同国家所代表的意义也完全不同，在中国的文化背景里，红色代表着吉祥喜庆。例如活动页面要突出热闹，通常都会使用大面积的红色来营造活动氛围；又如画红包元素时，大家都会使用红色，而不是蓝色，绿色。分析文化差异的方法通过建立文化地图，分析和提炼出不同国家之间的差异与共性，为后续的设计提供方向。第一步：建立文化地图这里可以借助 hofstede 的文化维度理论，先建立起一个宏观的文化框架，按照里面的 6 个维度把目标用户的文化与我们国家的文化放一起对比，再通过一些文献和资料去补充里面的细节，从整体观到细节观，分析他国文化与我国文化的差异和共性。hofstede 的文化维度理论是当今文化差异研究领域最具影响力的理论之一，有六个维度：权利距离、个人主义/集体主义、男性化与女性化、不确定性的规避、长期取向与短期取向、自身放纵与克制。比如，中国和美国在权利与距离维度中的差异。中国 80 分，属于高权利距离国家，美国 40 分，属于低权力距离国家。儒家思想是我们中国传统的道德观念，我们从小被教育要听从父母和老师的话，尊重父母、长辈是家庭中的基本美德。在美国，大部分人都信奉基督教，《圣经》中传达的思想是人人生而平等，家长会要求孩子尽早独立，家庭成员之间的相处方式不必取决于年龄。通过这些维度的对比，我们能将抽象的文化形象化，有一个全局的文化视角。（说明：这里的分数高低并不是指好坏，而是指文化的差异）第二步：分析文化差异与文化特色，提取设计要素当建立起文化框架后，再从宗教、历史、地理、风土人情、生活方式等方面，分析其他国家与我们国家的具体差异之处，再提取出对应的视觉要素。比如印尼，在宗教上信仰的是伊斯兰教，有 87%的人是穆斯林，伊斯兰教规定禁止把狗当作宠物养在家中，也不允许把狗当做儿童的玩伴，因为会对儿童的健康不利，所以在做印尼的设计时，要避免使用狗的元素。再如印尼当地的斋月节，斋月是印尼最最重要的节日，在这个期间做活动海报时，可以多运用伊斯兰教的一些元素，例如：斋月的斋灯，月亮，以及伊斯兰教寺庙的尖塔、穹顶和几何纹理的装饰等等，都可以融入到设计中，贴近本土文化，更容易获得当地人的喜爱和认可。值得注意的是，建立文化地图不仅仅是研究文化差异，更多的要思考的是从文化与设计相关联的角度上去看文化差异和文化冲突给设计所带来的影响。3. 跨文化设计原则在跨文化设计中，又可分为面向单一文化的设计和面向多元文化的设计，不同场景的侧重点也不一样。如果是面向单一文化的设计，比如只做印尼的本地化设计，那么只需研究当地的文化特色，避开文化禁忌，产品设计符合当地的文化偏好即可。如果是面向多元文化，就需要对多种文化进行分析和总结，寻找文化共同点进行设计的突破，使产品能被不同文化圈的用户群体所接受。这里分享两个设计原则，文化包容性设计与文化规避设计。A. 文化包容性设计英国标准协会(2005)将包容性设计定义为: 主流产品或服务的设计能为尽可能多的人群所方便使用，无需特别的适应或特殊的设计。它通常是通过满足一般排除在产品使用范围之外的群体的特殊需求，从而增加更好的用户使用体验。当把它引入到跨文化产品设计中时，我们可以转换为：最大化的满足目标群体的需求，当出现多个文化元素时，需要充分考虑到文化的差异并寻找共性，分析并提取最合适最有价值的设计元素，进行更深层次的综合性设计。例如，代表“奶制品”的图标，中国常见的是牛奶，西方常见的是牛奶和奶酪。在设计时，要尽量使用通用的设计元素，保证不同国家的用户都能理解图标的含义。B. 文化规避性设计不管是面向单一文化还是多元文化，都需要对目标群体做文化规避方面的研究，避免出现文化禁忌。比如印尼是穆斯林国家，我们就要避免使用猪和狗的图像，以免引起用户的不适。又如，“点赞”的图标，在中国和西方国家，竖大拇指是表示正向的评价，表示好的意思。但在伊朗、阿富汗地区，是一种挑衅的行为。了解并掌握目标群体的偏好和禁忌，可以避免因文化认知差异而带来的设计误差。跨文化设计系统再分条细说，关于文化差异和文化冲突下，设计系统需要注意的事情。如果从设计形式层面上看，可分为文字、图像、颜色、版式四部分。A. 文字在进行语言本地化时，需要注意以下几点。语言翻译很多时候为了省时省力，会直接采用机译，但是在一些重要场景的页面，建议还是找 local 进行翻译和做后期的项目文案检查，避免机译后出现用户看不懂的迷之场景。语言适配在国际化设计中，要确保语言本地化后依然有舒适的阅读体验和页面展示效果。比如英文翻译成泰文后，原先是一行的英文，翻译成泰语后可能会需要换行。同时也要注意换行后的行间距，泰语的书写方式比较特殊，如果行距太近，可能会掩盖上下行的元音字符，因此，需要留出足够的空间来提高可读性。区域格式区域设置中，需要注意不同地区的日期/时间格式、数字格式、货币格式、名字格式和地址格式。文字字体避免使用没有开源和系统不匹配的字体，比如有些字体适用于泰语、印尼语和马来语，但是不适用于越南语。B. 图像图片和图标的应用中，要注意到不同地区的文化和宗教差异。图标隐喻国际化设计，尽量采用各大平台通用的图标设计，避免小众文化的设计元素。本地化设计，可以在设计元素中融入当地的文化特色，更容易获得当地人的喜爱。图标或图片的文化禁忌避免使用和当地文化不匹配的元素，以免引起人们的不适。面向多元文化时，避免使用宗教和谨慎使用手势相关的内容、标志、符号等。图文分离建议不要将文字直接嵌入图片或视频媒体中，需要分别以较小的个体进行存储，便于多语言场景下的替换。C. 颜色不同国家的人有不同的色彩偏好，文化倾向与喜好也会影响到对界面设计的接受程度。色彩偏好如果是面向单一国家，可以考虑使用当地人喜爱的颜色作产品主色。如果是面向多国家，尽量采用各个国家都容易接受的色彩。色彩隐喻对于指数的上升和下降，红色和绿色在不同国家所代表的意义也不一样。例如中国的股票市场，红色代表升，是利好的。绿色代表跌；在美国，红色代表下降，绿色代表升。色彩禁忌不同颜色在不同的文化背景下所代表的意义完全不同，需要避免在某些场景使用当地人的禁忌颜色。例如泰国人在日常生活中忌讳使用红笔签名, 只有人去世后才可以用红笔在死者的棺材上写上其姓氏，因此，不要在海报中出现名字用红色的字体。D. 版式不同国家的语言差异，也会造成版式上的设计差异。排版布局在空间上，中文的展示效率要高于英文。例如下图中的 filter 页面，中文的页面使用宫格形式，内容能够在第一屏全部展示出来，操作也无须跳转页面，直接就能在当前的弹窗内进行操作；英文的页面则采用 list 形式，可能要 2 屏才能展示完全部的信息，操作需要跳转页面。把右图的中文翻译成英文，字数可能会变长，如果仍然使用宫格排版，页面会比较拥挤，而且有的文字是一行，有的是两行，排版上会显得不整齐；如果把左图的英文翻译成中文，使用列表布局，又会显得比较空，空间使用率不高且操作不高效。因此，语言的差异也会引起设计样式和交互的差异。排版顺序中文和英文的语言环境中，我们的阅读方式都是从左到右的顺序，所有的排版顺序也是从左往右。但是在中东地区有一些国家与我们的阅读习惯是相反的，例如使用阿拉伯语和希伯来语的国家，他们的阅读习惯是从右到左，内容排版顺序也是从右往左。阅读习惯的差异同样也会造成交互上的差异，例如，阿拉伯语的信息布局中，就不适合从左到右的 Z 型浏览模式，因为在他们的语言环境中，重要的内容基本放在右侧。又如，在箭头的交互上，左箭头是代表进行下一步，右箭头代表回退。那么，我们在做信息框架的设计时，要思考的是在不同的语言环境中，我们的普适性的设计法则是否还奏效？是否应该有一些相对应的调整以适配当地的语言环境和文化？这些都是在设计前期需要深思的事情。对了，说到这里。补充一个有趣的小知识：阿拉伯文字是从右往左写，但是阿拉伯数字为什么是从左往右呢？我找了一些资料，感兴趣的同学可查看下方的链接。阿拉伯文字从右往左写，但是阿拉伯数字为什么从左到右写？https://en.wikipedia.org/wiki/Hindu%E2%80%93Arabic_numeral_system好了，以上就是我这次的分享~ 希望对做出海设计的同学能有一些帮助 欢迎关注作者微信公众号：「8点的四月」本篇来源：优设网原文地址：https://www.uisdc.com/cross-cultural-product-design
通过图片压缩工具可以大幅缩小图片文件的容量大小，使用的技术不外乎是降低画质，做到使用者肉眼几乎看不出差异的「无损压缩」，如果想要让图片变得更小一些，也能把质量降低或是调整图片尺寸，在网页使用的图片经过压缩后，用户开启更快更有效率，也有助于节省容量和传输流量。之前介绍过的免费图片压缩服务 Squoosh 来自 Google 实验室，只要打开网页、将图片拖曳进去就能自动处理；还有我很喜欢的 TinyPNG、TinyJPG 也都非常好用。这款桌面版图片压缩工具 Squoosh，没网也能免费用！我以前经常使用 TinyJPG 压缩图片，可以有效减少文件大小，还能维持图片画质，后来在网站开启 Jetpack CDN 直接替换图片网址就有整合加速、分流和压缩图片效果。阅读文章 > 经典图片压缩神器 TinyPNG 出中文版了！单次免费处理 20 张！曾经有一段时期我很喜欢 TinyPNG 在线图片压缩工具，只要将 PNG 图片拖曳到网站，它会自动远程对图片压缩、优化，将图片档案大幅缩小，但又不会影响画质（也就是无损压缩），后来也推出 TinyJPG 支持 JPG 格式，还有 WordPress 适用的外挂功能「Compress JP阅读文章 > 本文要介绍「Shrink.media」是一个全新的免费图片压缩服务，只要打开网页、拖曳图片或把图片网址贴上就能处理。Shrink.media 提供的压缩技术主要是降低图片质量、调整尺寸大小，预设会降低 50% 画质、缩小 75% 图片尺寸，使用者可拖曳进行调整，比较压缩后的图片与原图差异，这项服务的优点是加速网页加载速度、减少带宽使用率，也能改善使用者的使用体验，网站管理者可善加利用。Shrink.media网站链接：https://www.shrink.media/使用教学开启 Shrink.media 网站后点选「Upload Image」选择要压缩处理的图片，或是以快捷键贴上图片网址，支持 PNG、JPEG、JPG、WEBP 格式，分辨率最大 5000 x 5000 像素，容量不超过 25 MB。如果想测试一下 Shrink.media 功能，网站也有提供四张示例图片，点选后就能进行测试。默认情况下图片质量会降低 50%，图片尺寸会缩小 75%，可以看出压缩前后的图片差异，包括预览、前后容量比较、节省容量和压缩前后的图片分辨率变化。我建议画质不用降低太多（大约 80% 左右），虽然图片可能不会因此减肥很多，但可保留质量，也看不出差异变化，至于图片分辨率可依照用户的需求进行调整，如果坚持不要调整图片大小，就把下面的选项调整为 100% 就能维持原始尺寸。完成后点选「Download」下载、保存图片。值得一试的三个理由：Shrink.media 图片压缩工具，提供个人用户免费使用支持 PNG、JPEG、JPG、WEBP 格式，最大不超过 5000 x 5000 像素可调整图片质量和分辨率大小，藉此设定不同的压缩率完全免费！可批量压缩图片的在线神器「Compress JPEG」我很习惯在写文章插入图片前先对屏幕截图进行压缩，让图片容量更小、开启速度更快，更重要的是几乎不会影响画质，以前我都使用 TinyPNG 这个相片压缩工具，只要将图片拖曳到网站就能快速处理，后来就选择以 Imagify 自动从 WordPress 媒体库对图片压缩和优化（免费版每月只能处理阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/shrink-media
如果你也关注影视，最近真的太容易被《爱死机》第三季给刷屏了。光怪陆离的想象在9部截然不同的动画短片中完整地泼洒开来，死亡与情感，生命和技术，现在和未来，每一部作品都足以给你一些奇思或是启迪。在第三季的9部作品中，讨论度最高的作品应该是最后一部作品《Jibaro》，这个灵感源自于海妖塞壬，但是又糅合了各种不同文化下的民间传说的故事，借由 Mielgo 标志性的视觉风格呈现了出来。同类文章推荐：《蝙蝠侠》电影设计美学的源头，竟然都始于蝙蝠战车！你也许看过很多蝙蝠侠的故事，漫画，剧集，电影，在所有的故事当中，蝙蝠侠这个角色的出现，都会从那个小巷开始：一次莽撞的抢劫，手枪枪响，珍珠项链散落满地，死亡，尖叫，惊恐，失神，然后一个名为蝙蝠侠的角色由此诞生。阅读文章 > 超人气的蝙蝠战车是如何创造出来的？揭秘背后设计稿！相比于诺兰前传三部曲的「写实感」，扎克·施耐德的这3部 DC 电影似乎排名并没有那么靠前，甚至口碑也没有那么的神，但是在美术风格、视觉设计上，口碑是无可撼动的。阅读文章 > 电影设计美学！封神的诺兰版《蝙蝠侠》里，导演亲手捏出了蝙蝠车诺兰的蝙蝠侠三部曲中的蝙蝠车 Tumbler 可能是蝙蝠车历史上最没蝙蝠特征的蝙蝠车。阅读文章 > 1、《爱死机》第三季压轴之作你会注意到，多数人在谈及《爱死机》第三季的时候，多数时候都会配上《Jibaro》中，湖中妖女从水面探出半张脸的经典场景。太惊艳了。你会在公众号和各种视频解说中看到形形色色的解说，截至目前，我认为在故事背景上挖掘足够深也足够好的，是 up主「大聪看电影」的这个视频，他在挖掘「Jibaro」这一词背后文化演变过程后的解读非常深入，如果你对于影片中的元素、隐喻和意义感兴趣，不妨看看这个视频： .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。对于这部融合了不同地域、不同文化民间传说的动画短片，全程没有一句对白，在表达上充满了模糊行，着赋予了影片极大的解读空间。导演和艺术指导 Alberto Mielgo 非常巧妙地将地域文化背后的叙事和人际关系中的隐喻结合到了一起，在接受访谈的时候，他非常坦诚地表达了他对于这种叙事的想法：「我喜欢那种不知道谁是好人谁是坏人的感觉……我更多想要表达的，不是所有的事情都必须关于拯救世界，或者讲述一位英雄的心路历程。」在接受 Screen Rant 访谈的时候，Mielgo 揭秘了这部影片背后的制作细节：影片中经验的湖妖舞蹈并非动作捕捉，而是借助多机位摄影拍摄编舞 Sara Silkins 的舞蹈动作，然后在 3D 建模角色和手工绘制细节的基础上，使用关键帧动画制作而成！女妖身上的珠宝配饰，在舞蹈动作下的飞舞效果结合湖中环境的流体变化，为3D渲染提出了极高的要求，这使得团队的技术人员痛苦不已，但是效果也相当惊艳。Mielgo 希望观影者对于这部作品有自己的结论，因为他不打算提供解释，这样每个观影者都会有自己的解读，并且随着观影次数的增加，理解方式会有所变化。因为《Jibaro》， Mielgo 的名字出圈了。但实际上，此前他的视觉风格所主导的影视作品，已经在中文互联网上引起了起码3次大范围的讨论了。2、其实这个艺术家已经出圈好几次了我们当中的多数人，第一次注意到他的存在，是《爱死机》第一季中的《The Witness》：第二次则是《蜘蛛侠：平行宇宙》，即使索尼并没有过多针对 Alberto Mielgo 进行宣传。当他借助动画短片《皆为爱》斩获得2022年最佳动画短片大奖的时候，Alberto Mielgo，大家终于对于这个男人的名字，有了相对深刻的印象。这一次的《Jibaro》，则以压轴作品的身份，成为《爱死机》第三季在大众口碑上的压仓石。3、值得关注的宝藏艺术家和插画师Mielgo 正正经经是一位宝藏艺术家、动画师和导演，但是如果你仔细审视他的成长和职业经历，你会发现他的角色身份是如此的多元而丰富——他对于叙事、文本、音乐编曲、影视制作都有着非常扎实的经验。1979年 Mielgo 出生于西班牙并且在这里长大，和很多热爱艺术充满想象力的年轻人一样，他选择了离开故土，在亚洲和欧洲不同的国家工作和学习，去过伦敦、巴黎、柏林、东京，并且最终选择在洛杉矶这个以好莱坞而闻名世界的城市深耕自己的事业。2005之前，他就以艺术家的身份参与到蒂姆波顿的定格动画《僵尸新娘》当中，在这部电影当中，他仅仅只是负责绘制故事板的插画师：看到这里，你大概还觉得这些事情，很多艺术家……或者说插画师都能做到，往下看，你会知道什么叫强无敌。在 2009 年发布的节奏音乐游戏《披头士：摇滚乐队》当中，Mielgo 则和动画师 Robert Valley 共同完成开场和结尾部分的过长动画，与此同时，他将自己独特的视觉风格融入到其中：2010 年，Mielgo 以概念设计师的身份参与到《哈利·波特与死亡圣器》（上+下）系列当中，按照 Mielgo 的说法，他在剧本尚未完成的时候，根据小说中几页内容「快速勾勒出一些场景的概念插画，缩略图和想法」，这些拥有强烈色彩对比的概念场景，让哈利波特的艺术团队兴奋无比，并且其中很多设计最后都落地到电影了当中：到了 2012 年至 2013 年期间，Mielgo 以制片和艺术指导的身份主导了迪士尼旗下知名 IP 《创战记：起义》，而正是这部作品，为 Mielgo 一口气连续斩获了艾美奖和安妮奖。80年代的《创战记》本身就有着超越时代的独特视觉特色，而 Mielgo 为 《创战记：起义》则将这种从未出现于动画中的强烈视觉肌理，引入到动画领域当中，赋予《创》系列以新生：而 Mielgo 受聘于索尼参与动画《蜘蛛侠多元宇宙》这一动画的幕后，则和很多人想象的不一样。Mielgo 被索尼招募来作为「视觉顾问」的时候，这部动画长片还没有影子，他需要带领团队完成一个蜘蛛侠主题的小短片，这个短片被成为「测试动画」，没有更具体的名称。最初的时候，他一个人坐拥2楼整层办公楼的办公室，独自探索世界观、视觉风格、角色呈现、摄影角度等各种可能性。当上面的第一张图出来的时候，索尼这边有权限看到的人都震惊不已。然后索尼非常开明地让 Mielgo 招募他喜欢的艺术家和过去的合作伙伴，进入这个 2 楼的办公室，一同继续完善这个小短片。在制作过程中，索尼不仅给了 Mielgo 一套蜘蛛侠服装，而且他和团队成员会前去纽约的大街小巷，在不同的高楼上用不同的角度取景，并且在此基础上，绘制插画，最终完成了三到四个小场景下的动画短片。但是最终由于技术和风格上的差异，索尼和 Mielgo 在电影开始制作之前分道扬镳。但是最后在动画电影制作的过程中，Mielgo 所定义的视觉风格在很大程度上，赋予了这部电影以独特的气质，成为了这部作品最终成功的重要基石。即使索尼在各个场合都鲜有提及 Alberto Mielgo 为这部动画电影所做出的贡献。此后，Mielgo 为 Netflix 的动画影集《爱死机》第一季所制作的短片《The Witness》，为他一口气夺得了 3 个艾美奖和 1 个安妮奖。对于这部作品，Mielgo 称之为「迄今为止最私人的一部影片」。而帮助 Mielgo 一口气拿到奥斯卡的《皆为爱》的英文原名《The Windshield Wiper》直译应为「雨刷器」，则是他「关于爱情和人际关系的一个非常个人的特殊愿景」，他将自己不同阶段所遭遇的「插曲」整合到一起，围绕着「爱」这个主题，将关系中不同状态的瞬间抓住，呈现在我们的眼前。在这部动画短片中，Mielgo 一如既往地使用了关键帧动画来呈现，在技术上则多借助了粉彩来强化瞬间光影的肌理：当我在 Alberto Mielgo 的个人网站 上浏览的过程中，已经不知道多少次被他的作品冲击到。上面的截图只是他作品中很少的一部分，他为《看门狗》制作的短片同样精彩：他制作的短片 GENTRIFICATION 、Reel 、Philips 每一个都值得你反反复复地欣赏。你真的很容易在 Mielgo 身上找到很多足够个人，又特别值得咂摸的想法和特质。4、关于 Alberto Mielgo ，一点个人想法Mielgo 曾经多次在访谈中提到，他是「一个自学成才的艺术家」并且在摸索中「找到一种适合自己的风格」。如果你是插画师，你大抵也能在 Mielgo 的个人网站 和作品集当中，看到他的成长历程，作品风格和表达方式随着时间推移的演变，这比起单独凝视某一作品来得更有趣，也更有价值。与此同时，他也多次强调过他偏爱「非语言化的电影呈现方式」，倾向于在影片中让叙述者自然地呈现故事，将想象和解读的空间留给观影者，这种强调「叙事」而非「结果」的视听语言是高级而聪明的做法。这种方式和这个急于求成而武断的时代背道而驰。我们对于「艺术源自生活」的说法非常熟悉，但是真有多少人会深入地去如此地执行呢？在创作《皆为爱》的时候，其中几乎所有的场景都来自于 Mielgo 过去十几年在世界各地工作生活的真实场景、所见所闻，这种长时间的记录、琢磨、反刍是塑造一部伟大作品的基础，这是实打实的「来自生活的艺术」。Mielgo 对于技术的态度也非常有趣。当大家都集中与流体渲染的惊艳、角色舞蹈动作的灵活呈现方式的时候，他却一再强调技术是服务于叙事的，当表达需要更强技术之时，痛苦的攻坚是必要的组成部分。所以，作为一个 个性强烈的个人艺术家，他和索尼的冲突让他「出圈出名」的时机延后了，但是最终，依然能够倚靠优秀的作品，一次又一次用奇观冲破日常，用无言的叙事制造想象的宏大空间。「我喜欢动画胜过任何艺术，因为它包含所有艺术。」最后的最后这份豆瓣网友「库华图 」所翻译的访谈非常值得学习插画的同学们来学习一下：https://movie.douban.com/review/14417654/其他参考来源：http://www.albertomielgo.com/https://movie.douban.com/celebrity/1412970/https://www.imdb.com/name/nm2856960/https://en.wikipedia.org/wiki/Alberto_Mielgohttps://screenrant.com/love-death-robots-vol-3-alberto-mielgo/https://www.youtube.com/watch?v=iDl2GFVSTPkhttps://www.youtube.com/watch?v=tEVA-t2GMfUhttps://www.youtube.com/watch?v=o0H_HnAAfDo本篇来源：优设网原文地址：https://www.uisdc.com/alberto-mielgo-jibaro
大家好，我是和你聊设计的花生~之前向大家介绍了 PCCS（日本色彩研究所配色体系），它是目前全世界最常用的色彩体系之一，能帮助我们了解色彩要如何使用才更方便，以及如何搭配色彩才更和谐更好看。之前的两篇文章向大家介绍了 PCCS 体系内的 24 个色相、17 个明度色阶、9 个纯度等级和 12 类色调。PCCS 的前两期内容：配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 配色找不到感觉？这个PCCS色彩体系帮你从根本上解决（二）色彩明度与纯度的 4 种类型配色，你知道吗？阅读文章 > 今天继续为大家讲解色彩性能方面的知识，主要包括色彩的前进行与后退性、色彩的收缩性和膨胀性、色彩的轻重和色彩的视觉认知 4 个方面：色彩的前进性与后退性放置在相同距离上的色彩，给人的空间远近感是不同的。看起来比实际距离更近的称为前进色，反之称为后退色。一般认为暖色（红、黄、橙）为前进色，冷色（蓝、紫）为后退色。色彩的前进性与后退性被认为与色彩波长有关，感兴趣的小伙伴可以另做拓展了解。除色相外，明度对视觉距离也有影响。明亮的颜色看起来比浓暗的颜色更近一些。色彩的前进性与后退性在设计中的运用，最常见的就是促销类信息的标注。海报或者 Banner 中打折促销的重点信息，都会用以黄、红的颜色强调呈现，给人一种视觉冲击感。色彩的膨胀性与收缩性在同等色彩面积的条件下，看起来比实际面积更大的色彩被称为膨胀色，更小的为收缩色。如果说色彩的前进与后退是视觉进深的概念，那么色彩的膨胀与收缩则与视觉的感性面积有关。色彩的膨胀性与收缩性有以下几个规律：同样面积，暖色比冷色看起来更大一些；同样面积，明亮的颜色比暗灰的颜色面积显得更大一些；与色彩相对明度有关，同一种颜色，其“背景色”明度越高，就会显得其颜色本身面积越小。色彩的收缩性的膨胀性在现实生活中的应用也有非常广泛，最经典的就是穿黑色衣服比穿白色衣服更加显瘦。色彩的轻重影响色彩轻重感最主要的因素是色彩的明度。明度高的色彩让人感觉轻松愉悦，明度低的色彩让人感觉很沉重坚实。有实验表明，同样体积的盒子，黑色看起来比白色要重 1.8 倍。相比来说，色相对色彩的轻重几乎没有影响；色彩饱和度对色彩轻重的影响有限，远不及色彩的明度那样觉有具有决定性作用。将色彩的轻重的概念延伸到海报设计中，能帮助我们更准确地表现出不同主题所需的不同调性。如下图，同样都是甜品类的海报，整体色调的不同让甜品展现出完全不同的特性。色彩的视觉认知性色彩的视觉认知性的优良直接决定一幅作品是否清晰可辨。背景为黑色时，明度最亮的白色视觉认知性最好；背景为白色时，明度最暗的黑色视觉认知性最高。彩色也是同理。黄色的色相明度最高，其次是两侧的黄绿色与橙色，依次顺沿，离黄色越远明度越低，直到紫蓝色时明度最暗。视觉主体与背景的明度差决定视觉认知性的高低，我们需要注意色彩本身带有的明度与背景的明度差是否足够大。以上就是 PCCS 理论第三期的内容，希望对大家的设计有帮助。之后我会继续为大家带来「色彩对比」与「色彩同化」的相关知识，喜欢的小伙伴记得点赞收藏哦~如果你有关于文章内容或者设计方面的疑问，欢迎在评论区提出。也欢迎大家加入优设官方的设计交流群，与优设主编、设计总监及其他热爱设计的小伙伴一起交流~（入群二维码见下方 Banner）本篇来源：优设网原文地址：https://www.uisdc.com/practical-color-ordinate-system-3
大家好，我是和你们一起聊设计花生~ 又到了为大家推荐设计师效率工具的时候啦，今天的 5 款神器分别是：简单好用！免费的 Webp 图片格式转换器「Anyweb」超专业！Web3 及 NFT 知识公益科普网页「我的第一个 NFT」自动配色！免费 CSS 彩色渐变生成器「Color Space」效果丝滑！可变字体在线预览神器「Font Gauntlet」极致压缩！国产免费在线压缩神器「Docmall」错过上期的小伙伴看这里这 5 款工具，让设计师工作效率提升 200%！（五）大家好，我是努力为设计师寻找效率工具的花生~今天继续为大家推荐的 5 款能有效提升工作效率的神器，它们分别是： 无损压缩！阅读文章 > Anyweb「网站直达」 https://anywebp.com/Webp 格式的图片无法直接导入 Ps 或者 Ai 中，非常不方便，这时候就可以用 Anyweb 将图片格式转换。Anyweb 可以将 Webp 转换为 JPG/PNG/IOC，并支持一键批量转换。功能免费，而且是在线网站，打开即用，非常方便。使用方法：点击花朵图标上传图片，并在「输出」处设置需要的格式，图片上传成功后点击右侧的开始，转换成功后会自动弹出下载窗口。免费！支持超过 100 种格式的图片格式转换神器「Pixelied」Pixelied 是一家提供相片编辑器的服务商，旗下有个「Free Image Converter」的图片格式转换工具，让使用者通过浏览器进行在线批次编辑，而且不用担心降低照片画质，也无需下载或安装任何应用程序，提供最快速、免费且易于使用的图片转文件功能，这项服务支持各种常见图片格式包括阅读文章 > 我的第一个 NFT「网站直达」 https://myfirstnft.info/「我的第一个 NFT」是由 NFT 爱好者创建的一个公益性科普网页，里面有关于区块链、NFT、以太币、DYOR 等概念的详细解释，还有手把手教你创建一个自己的以太坊钱包及铸造一个自己的 NFT 头像的教程。除了以上的概念和教程，「我的第一个 NFT」还有关于 Web3 和 NFT 相关的安全规则的科普，如果你对 NFT 和 Web3 感兴趣想做进一步的了解，那么里面的内容一定不要错过。天价头像是如何诞生的？写给设计师的 NFT 超全入门指南注：本文仅仅为 NFT 科普，不建议设计师参与。阅读文章 > Color Space「网站直达」 https://mycolor.space/?hex=%23845EC2&sub=1Color Space 是一个非常灵活的彩色渐变生成器，功能包括：根据给定的颜色生成多种配色色板，提供颜色代码；生成二色及三色渐变，可更改渐变方向，并提供 CSS 代码。如果你对色彩搭配没有把握，可先在调色板中生成色板，然后选取其中 2-3 中颜色生成有颜色渐变。1000种渐变模板！快收下这款免费网格渐变神器 MESH·Y之前已经和大家分享过很多做渐变的网站，可以非常方便的提取好看的渐变配色。阅读文章 > Font Gauntlet「网站直达」 https://www.fontgauntlet.com可变字体已经成为字体设计的新趋势，Font Gauntlet 则是一款专业的可变字体预览工具，在其中可以预览可变字体字重、宽度、光学尺寸、倾斜度等的变化。我们还能在网页内添加多个标签页，对比不同设置下的字体样式。从本地上传的动态字体文件还可以通过其转换为单独的静态字体文件。免费可商用！免费西文可变字体 LL Changer 打包下载因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。阅读文章 > Docmall「网站直达」 https://docsmall.com/Docmall 是一款国产的免费图片压缩神器，支持图片压缩、GIF 压缩、PDF 压缩、PDF 合并、PDF 压分割，免费使用。图片压缩后精度仍能保持在一个较好的水平，而大小却能压缩很多。相比一下国外的压缩工具，Docmall 的服务器位于国内，图片上传下载的速度和稳定性都非常好。以上就是今天的推荐，希望对提升大家的工作效率有帮助。我是花生，下期见~这 5 款工具，让设计师工作效率提升 200%！（四）大家好我是花生~勤勤恳恳挖掘效率神器的我最近又发现了不少好用的小工具，今天就继续为大家推荐其中不能错过的 5 款，它们分别是： 一键查看！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-software-4
不知道大家平时会通过什么方式对行业有趋势性的了解，我本人有一个小习惯，就是定期地去看一下岗位招聘信息，倒也不是为了跑路，而是可以从大环境的岗位招聘信息中了解到一些有效信息，比如这个岗位大多数的工作内容都是什么样的（对比下自己所在的地方，是不是过卷了），岗位要求是什么样的（有没有什么普遍要求的能力，我没有经验需要在下次工作中去补充弥补的），薪资水平如何（需不需要考虑和领导沟通沟通）…而交互设计中，有一项工作内容/岗位要求常年挂在招聘信息内，却很少能在作品集里有具体的呈现——用户研究。如果你现在马上拿起手机去看看几个大厂的交互招聘信息，基本上每 5 条招聘信息里有 4 条都能找到以下内容/要求：工作内容“发起和参与用户研究，根据用研结果对设计方案进行优化；负责产品的可用性测试和评估提出改进方案，持续优化产品的用户体验”“参与用户研究，根据用户研究结论对设计方案进行优化，持续改进产品体验”（岗位要求）“掌握基本的用研方法，具备基本的数据分析，视觉设计判断能力”“掌握常规用研方法，定期参与或主导用研活动”与其等到要应聘了才追悔莫及，不如在日常需求过程中寻找合适的时机熟练地使用起用研这项工具。本篇文章我们就来聊聊，日常需求中如何见缝插针地融入用研，丰富经历。实际工作中常见的用户研究方法有：用户访谈、问卷、可用性测试，其中用户访谈还分为线上和线下、深度访谈和拦访，这几种方法的具体释义随便搜一下都有，这里就不赘述了。简单分享几个适合推动团队去用研的时机和方式，亲测有效！想要做好用户调研，你要学会这九种定量用户研究的方法当你需要关于自己产品的用户体验数据时，然而，你却不知道从哪里获取？阅读文章 > 问卷1. 适合用问卷的时机问卷的用法有很多，专业用研人员更多是运用他们去度量产品体验，将定性问题定量化，例如字节的多数团队每双月都会有问卷调研评估用户对产品的体验评分，通过逐个双月对比来判断哪些功能是本双月应重点优化的，哪些上个双月优化成果不错。但是这种大体量重复性高的问卷工作对于一个交互打工人来说太难推进了，更多依赖团队意识。这里想分享是一个日常小需求中适合将问卷运用起来的案例。举个例子，比如你的业务是电商直播，上线购物入口后发现效果没达到预期，因此需要对入口做优化修改：这种优化需求无非就是在规范内做有限的排列组合，换个位置 x 换个图标（或文案）x 换个颜色，对产品的定位、直播间的布局不会有影响，但是组合方式又较多，每个都做实验会造成资源浪费，每个方案都和产品扯皮一次能扯到地老天荒，这种时候就很适合做问卷，你主动向产运提出，一般都不会受到反对。2. 简单的问卷方式把你能想到的，符合产品规范和调性的方案设计出来，交给运营让运营在用户群里发放问卷，并问几句为什么。最后把社区调研的结论输出成一篇文档，包含关键结论、具体的问卷结果饼状图、用户反馈总结与部分原文，以及后续 Todo。一份简单又有实际成效的用研就成型了，真实工作场景中用时在 13 个工作日之间，也不会影响需求上线节奏。访谈1. 适合做访谈的时机还是以电商直播为例，如果此时你的设计方案已经是最合理的，比放任何地方、任何样式的数据都要好，但是业务整体指标就是上不去，这个时候已经不是看数据能解决的了，就需要去通过用户访谈来了解背后的原因了。用户访谈是比较复杂的用研工具，所以一般在产品停滞某个阶段较久，无法单纯地从数据分析和需求臆想解决现阶段问题的时候，团队内会主动发起、使用。如果你发现你的产品正处于这个阶段，适当地推动一下，会比在其他时候更容易申请到资源实施落地。2. 设计访谈大纲在访谈之前，我们如何准备访谈的问题呢？需要要先明白调研的目的是什么？如果以电商直播这个例子来说，我们不明白为什么用户不在我们平台直播间购买商品，所以我们需要用户对我们现有产品的使用情况做反馈。这时候用户旅程地图就起到了作用，我们会把用户在直播间购买商品的行为进行拆分，例如可以分为：浏览直播流——进入直播观看解说——想要购买——完成购买，如下图所示：在每个阶段我们都可以进行一些假设和提问，来具体化评估产品表现。例如，我们在浏览直播广场时，我们可能做出如下假设：A、推荐的直播间不准确，用户不感兴趣；B、瀑布流布局虽然效率高，但有效信息过少，不如沉浸式消费体验好；C、用户购买行为对象是商品而不是直播间，应按商品维度进行推荐…做出了这些假设之后，我们就可以根据这些假设来设计访谈问题，例如“你现在刷一下我们的直播广场，看一下有没有你感兴趣的直播间”。在这里想强调的是，实际用户访谈的时候我们一定要进行追问，所以在设计访谈问题的时候需要根据用户的几个不同表现设计不同的追问。例如当用户在访谈过程中有刷到感兴趣的直播间了，你可以追问“你大概刷几个直播间能遇到一个感兴趣的直播间呢”（量化推荐准确度），“你感兴趣的直播间都是哪些，为什么感兴趣”（强化推荐准确性），如果访谈过程中没有刷到感兴趣的直播间，那么你可以追问“如果现在出现一个什么样的直播间你会想要点进去呢”（了解产品没满足到用户的地方），然后根据用户的回答进一步追问“为什么”，基本就能得到用户期望补充的推荐维度或产品能力。以此类推继续对其他阶段做出假设、设计问题与追问，一份用户访谈大纲就可以成型了。我喜欢按如下的表格来输出访谈大纲，可以供大家参考一下：之所以在访谈大纲里把假设缩略了，是因为工作中大家的假设不一，但关注点是一致的，输出文档的时候可以用更简洁但大家都能看懂的方式来表达，这不代表建立假设这一步可以跳过，建立假设是思考的过程。写完访谈大纲后我们还需要检查一下问题提纲里有没有什么问题是不合适的，比如以下几点建议大家在设计问题时都要避免：在访谈问题中出现行业专用黑话例如“转化”、“操作”、“流量”，这些黑话的出现只会让用户紧张自己是不是水平不够，不够格被访谈，然后为了避免被看出来一通瞎说，如果希望用户能在一个放松状态里给出真实的反馈，请将这些黑话都改成日常词汇，如“进入到”、“点哪里”；让用户预测未来的行为例如“假如上线某功能，你会用吗？”，用户的预测不能准确地反映他们未来真实的行为，如果你想验证某些未上线的功能，最好的方法是制作可交互原型做可用性测试结合访谈；让用户脱离场景讨论操作细节例如“你有什么好建议？你觉得怎么解决比较好”，用户无法准确回忆每个操作步骤，更好的做法是让用户直接演示给你，而不是询问看法；让用户对没见过或没用过的概念进行想象或评价例如“假如和主播申请连线的时候可以填写连线申请，你觉得怎么样”，用户不是设计师，无法准确表达他们想要什么，而且在这种场景下用户都会给面子地说会用啊，很好啊，这类问题属于无效问题；3. 寻找访谈对象访谈提纲有了，访谈对象如何寻找？上述我们的例子其实默认了访谈的对象是全体用户，实际访谈时我们可能会对访谈对象有不一样的要求。例如，如果我们通过对比发现，和竞品相比我们在 18～23 岁这个年龄段的男性用户有比较大的缺失，所以我们建立的访谈目标是，了解 18～23 岁的男性用户为什么不来我们直播间购买商品，那我们就可以确定访谈对象为：性别男年龄 18～23流失用户和低活用户我们需要再定义一下流失用户和围观用户的行为标签，方便测试同学筛选，例如，流失用户可以定义为购买过 1 次且 3 个月内再无购买行为的用户、围观用户可以定义为过去 3 个月看过电商直播但是没有过购买行为的用户。细化下来我们应该给测试同学筛选的用户对象就为：性别男年龄 18～23购买过 1 次且 3 个月内再无购买行为、过去 3 个月看过电商直播但是没有过购买行为的用户如果我们的目标是全体用户，也是需要进行一些筛选的，一般还是需要进行用户分层，然后按照实际使用的用户分布来确定每个分层需要访谈多少对象，例如我们的产品中，0~18 岁用户占 20%、18~35 岁用户占 17%，35 岁以上用户占 63%，那么如果我们的资金和人力只够访谈 10 个人，我们就需要找 2 个 0~18 岁的用户，2 个 18~30 岁的用户和 6 个 35 岁以上的用户（其他维度的筛选方式也是如此）才能得到比较准确的用研结论。一般我们需要筛选比实际访谈人数要多的用户群，然后通过发放问卷的方式了解访谈意愿。发放的意向问卷里一般包括以下信息：产品使用情况及态度性别、年龄、职业等基本信息是否愿意到线下访谈回收问卷后筛选合适的访谈对象，就可以联系受访者确定访谈时间了。4. 访谈现场与访谈记录访谈至少需要 2 个人进行，一个提问，一个记录，如果有观察室或者线上会议的话，其他团队成员可以通过去观察室或者线上接入来旁听。访谈期间尽量将用户的原话和行为直接记录，不做判断加工，等所有访谈结束后再梳理总结。通常我们会把访谈记录直接补充到访谈提纲旁，在访谈记录前还需要对受访者的一些基本信息作备注。实际的访谈可以根据受访者的反馈做一些调整和补充，比如受访者虽然不常使用我们的产品，但使用别的竞品，就可以问为什么更常用别的竞品，是否有什么我们缺失的功能。访谈前，为了让受访者放松，也为了先拉近距离，可以进行简单的聊天，然后再以“我们的访谈仅供研究使用，不会侵犯你的个人隐私，访谈过程中遇到什么问题都欢迎随时提出来，不是你的问题是我们产品的问题”开头，然后正式进入访谈。访谈结束后是需要给予受访者报酬或小礼品的，这一步一般是由用研或运营同学来实际执行，在采访末尾我们也可以顺带提一下，给受访者一个好心情。5. 输出访谈报告所有访谈结束后要趁着记忆清晰及时梳理输出报告。报告的展现一般以一句话介绍背景，访谈关键结论，关键结论具体阐述（小结），后续 Todo，最后再附上访谈大纲与访谈记录就可以了。继续以上述例子示意，文档结构大致如下：好啦，今天的干货分享就先到这里，如果你也有什么实用的用研小技巧，欢迎后台留言和我一起探讨～如何做好B端用户研究？我总结了这4个方面！用户研究是产品设计中很关键的一项，它在整个流程中发挥着关键的影响。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/user-research-enrich-project
即将要迎来一波 618 大促活动，在这里分享一个故事化思维帮助大家去避免同质化，做出有差异性的活动主 KV～前言双十一等大促活动即将来临，这时会有大量的活动页面产出，这些活动会因为赶工期或者是市面上大促风的泛滥，导致电商活动高度同质化。作为一名设计师我们如何去提升活动的转化率？所以本期，我们来聊聊在同质化的背景下如何通过故事化思维做好活动设计。全文主要分为三大模块：故事化思维是什么如何构建故事化的场景活动画面的呈现什么是故事化思维在谈论如何将故事思维运用到设计中之前，我们要先定义一下什么是故事思维。 《故事：惊人力量的背后科学》给故事下了一个定义：故事就是关于主人公战胜困难，去实现目标的描述。讲故事要以人为中心的描述视角并将个人情感融入进去，所以讲故事是最容易让人接受的表达方式，讲好一个故事能够：能够很好的与用户建立关联、打动用户。能够引人注意，能够吸引我们的好奇心，能够让我们看清楚其中的意义，并参与进去。能够引导对方做出相应调整，讲一个故事会比你讲道理的成效好很多。关于故事化思维：为什么优秀的设计师都是讲故事的高手？网易UEDC – 方耀：自然化让人脑更容易接受通过故事这种形式所传达的信息。阅读文章 > ]如何构建故事化的场景这里以 WPS618 超级会员狂欢购活动作为案例来聊聊如何将故事化思维运用在活动中。在 618 的时候 WPS 也推出了电商促销活动，产品期望通过促销折扣的形式回馈于用户，带动一波拉新促活和提高超级会员购买率的营收值。我们当时尝试用故事化去打破固化思维，让画面有温度有情感，这次尝试得到了相关方的认可，整体数据有了不错的提升。我们是通过以下四个步骤将活动赋予了故事化思维：了解用户、定义主题、明确故事内容、丰富情节。1. 了解用户人群核心用户群体主要在 20-29 岁属于 90 后年轻有活力的新生代白领。通过桌面研究了解到，新生代白领的特征是：活力积极、喜欢新鲜事物、有想法、爱自由、胆大爱冒险等，所以在画面表达人物的时候可以更有张力，画面更有想象力和活力。2. 主题定义这次活动主题是：「超级会员买一年送半年」，“oh~又是促销感的文案”，在视觉上没有指向性，有些不知所措，无法从文案上提取到关键词，那怎么拆解才能构成一个故事呢？首先一个故事是由什么人、什么地点、什么时间、什么事情所组成的。根据 4W，我们初步得知：新生代白领参与盛夏 618 送福利的线上活动。但是这段描述像是简陋生硬的流水账，无法体会到人物的行动以及情绪，无法形成一个完整的故事，那我们如何讲述一个完整的故事呢？3. 明确故事内容首先需要明确的是每一个故事都有开头、中间、结尾。那我们如何去找到故事的全貌，这里可以运用到 HOW 法则。HOW 翻译过来是如何、怎样。这件事情是怎样发展的，有个过程会贯穿着一件事情的起点和终点，HOW 法则是在描述这件事情从起点到终点的过程。再来文案是超级会员买一年送半年，提炼动词“送”去构建故事，那谁送、怎么送、接受者是谁？谁是 WPS，接受者是新生代白领，那接受者的心情是怎样的，他是如何收到礼物的？一般人们接收到礼物的心情肯定是喜悦开心的，尤其是媷羊毛的时候，情绪会被放大化，会非常想要抢到这个礼物，有一种迫切的心理。那关于怎么送，肯定是以光速飞到用户面前。因此我们所得到的故事是 WPS 为新生代白领置办了一场盛夏狂欢活动，礼物以光速飞到了用户手中。4. 丰富情节当我们需要去丰富情节时，可以用头脑风暴对一些关键词进行衍生，再挑选出可以丰富情节的关键词组成一个有情感色彩的故事。经过大脑发散思考，和结合人群整个画面大体的故事已经有啦！所想表达的故事是：办公界大佬 WPS 在晴空万里的一天，带着他的小伙伴（超级会员、稻壳会员、普通会员）做了一场回馈用户的活动，新生代白领听到消息后都情绪高涨纷纷穿过时光隧道来领取礼品。活动画面的呈现1. 风格调性确定a.首先需要调研市面上成功案例的活动风格，再根据活动想要营造出来的氛围，去选择画面的风格，这样才能与常规的大促风做出明显的差异化；经过商讨分析，选择放射性的透视构图与质感风插画相结合 —— 放射性的透视构图前后纵深感强，能够让画面更有营销的冲击感，质感风插画增加画面的细节和丰富度。b.建立双图库，这一步主要是通过前面分析的故事化场景和用户人群特征，在现实图库与插画风格图库中找到相应对的画面元素作为参考，让画面兼具真实性与想象力，对后期的刻画细节也是很有帮助的。从以下图库中，我们可以发现人物动作都非常有张力并且表情都是非常有感染力，画面上有一定的发射性和速度感，颜色也较为丰富，我们可以沿着这个思路进行画面的创作。2. 创作过程a.草图线稿根据构思好的思路进入创作阶段，绘制完成后与相关方对稿，达成一致后再进入到上色阶段。b.画面配色在配色环节，需要明确活动想要表达出的情感诉求和选择与用户有情感共鸣的颜色（每个颜色都有它所代表的含义），有助于通过画面将情感更好的传递给用户。c.最终画面呈现3. 数据验证活动上线后，同比去年活动效果整体数据都有了不错的提升，说明故事化思维适用于活动设计中，不仅可以帮助我们突破同质化的重围，还可以提升转化率。总结通过 WPS618 案例，说明讲一个故事会比你单单说卖点更容易让用户接受，让用户产生共情，从而促成下单的行为。这里我们来总结一下，运用了哪些故事化思维在设计流程中：用户为中心的视角，去了解用户人群和用户情感每个故事都有开头、中间、结尾，明确故事内容，丰富故事情节其实，这里所讲的故事化思维不仅可以运用到设计中，也可以运用在日常的工作中。比如：营销人会讲品牌故事；管理者会讲商业故事；投资人会讲资本回报的故事，企业上市、宣传策划、塑造品牌等都需要讲好故事才会让用户更容易记住你。所以我们可以尝试带着故事化思维去解决生活和工作中遇到的问题。欢迎关注作者微信公众号：「CED设计团队」本篇来源：优设网原文地址：https://www.uisdc.com/618-wps-design
“凭什么说你的方案有效果？”“讲了一堆你觉得，有客观依据么？”是不是很想有理有据的把数据分析甩出来？行！那今天就来介绍设计的数据分析思路，为你的方案增添 10 分说服力！从这 6 个方面，帮你快速入门数据分析！作为一枚设计小萌新，对上述场景，是否似曾相识呢？阅读文章 > 设计为什么要会数据分析？产品给的报告不能用吗？谁不想摸鱼呢？可真的用不上呀！产品或运营的数据报表多是从本职业影响的范畴出发，去分析产品策略、渠道投放、运营手段等对整体大盘的影响。给出的数据要么和设计无甚相关，例如渠道的投入产出比，要么更偏向整体效果，无法探究设计方案的作用，例如参与人数、整体留存等。这样的数据，无法论证设计方案的影响效果，也就无法形成有效沉淀。所以，数据分析，还是要自己做！这样叫做“会设计数据分析”吗？如果你知道哪些设计会影响最终数据指标，知道如何拆解成与设计相匹配的小指标，会通过数据看出问题或机会，那么这就叫会设计数据分析。简单点，如果你曾被以下问题困扰过，那么下面的内容可要看仔细了~我是根据产品目标来做设计的，但我没办法证明方案是怎么影响总指标的？收到数据图表，但看不出这和我的设计有什么关系？得到一组多维数据，可怎么看结论都只有比大小？设计的数据分析如何做？本篇文章将遵从数据分析的三大步骤“拆解—埋点—分析”，从设计视角进行讲解和案例探讨。Step1：数据拆分问题：我是根据产品目标来做设计的，但我没办法证明方案是怎么影响总指标的？诊断：除了总目标，不知道还能如何验证。属于数据拆分的问题。怎么拆？拆分数据是大化小的过程，宗旨是可以将终点数据拆分成过程数据、细节数据。以下为两个基础拆分思路：1）构成法「适用范围」有多维平行影响因素构成的数据，通常有固定公式的都属于该类。「案例」商品交易总额 GMV、用户终身价值 LTV 等。2）行为路径法「适用范围」总指标是“后置数据”，会受到一系列的“前置因素”影响。「案例」用户留存。在实际使用中，“构成法”和“行为路径法”通常是交叉叠加使用的。例如，为电商的年终大促做活动设计，总指标为 GMV（商品交易总额）。第一步：通过“GMV=点击 UV*转化率*平均客单价”的一般公式，可拆出 3 个二级指标——“SKU点击UV”、“转化率”、“平均客单价”。但这3个指标并不能直接指向设计，需要继续拆分。第二步：“SKU 点击 UV”对照用户行为，即用户“进入活动页面—看到页面上的‘商品橱窗’—点击陈列的SKU”。依照该行动顺序，可以找到对应的设计模块。“进入活动页面”转化为“活动入口点击率”；“看到页面上的商品橱窗”转化为“模块曝光率”；“点击陈列的SKU”转化为“模块的SKU点击率”。到此，指标已拆分至与设计直接相关的数据，我们可以通过数据的表现，发现设计效果是否达到预期。如果不满足于问题的发现，还想继续探讨如何设计效果更好，则需要通过对影响因素进行拆分，例如影响 SKU 点击的设计因素有位置、大小、动效、商品信息等等，通过 AB 测试的方式，来找到设计更优的解法。概括模型以上思路可以概括为：UJM+OSM 模型。该模型非常通用，和做设计的思路一致，会设计就会拆数据。应用思考案例：一款雇主招聘产品，为有更好的招聘效果，鼓励雇主在活动期间多查看简历、与应聘方沟通。那么“招聘效果”可以用哪些数据表示呢？实际案例更为复杂多元，以上仅为大致的思考思路，并不代表标准答案。Step2：数据埋点问题：收到数据图表，但看不出这和我的设计有什么关系？诊断：没有办法对应数据和方案的关系。属于数据埋点的问题。怎么设置埋点数据？1）页面行为转化法设置埋点的目标，是在设计方案中找到可以表达你所需指标的数据。是用户在页面上的行为形成了数据，我们需要做的是确认哪些行为可以表达数据，然后对行为进行统计。接上个例子，“模块的 SKU 点击率”=模块的 UV 点击数/模块展示 UV，因此埋点数据是“模块的 UV 点击数”和“模块展示 UV”。概括这里归纳一些通用数据供参考。以上数据收到后还需进行分析，才能发现目标。仅仅展示这些数据并不能叫做数据分析哦~Step3：数据分析问题：得到一组多维数据，可怎么看结论都只有比大小？诊断：缺乏关联分析思维。属于数据分析的问题。通过数据埋点得到多个单一数据，对单一数据进行不同角度的计算，再结合设计得出的结论，就是数据分析。如果对数据具备充足的设想，这一步仅仅是简单的计算和推理工作。但在实际中，往往会因为前期的思考不足，拿到数据后只会比大小。如何找到分析角度？分析就是找特征，以及造成特征的原因。因此，大小只是表象，大小必须和其他因素关联才是分析。以最常见的“比大小的思路”为起点，横纵拓展思路：案例应用应用案例：C 端招聘-留存数据分析一款面对求职者的招聘产品，在节日期间开展活动，活动目标是通过任务奖励，引导用户产生和求职相关的行为。已有数据：其他数据：活动整体次留、产品次留。依照上述思路：1）比大小A 同期比较：抽取以上数据并制作新表，观察可得以下三点。Q1. 两类用户中哪类的次留表现更好？（人群性）从整体数据看，“完成任务的用户”相比仅“参与的用户”，次留率明显更高。Q2. 两类用户与活动整体留存相比表现如何？（事件性）活动整体次留率为 8%，“参与任务用户”和“完成任务用户”次留均高于整体次留。说明与任务相关的用户次留表现更好。Q3. 两类用户与产品整体留存相比表现如何？（事件性）活动期间整体产品的次留率为 25%，通过数据可知：“参与 3 个任务及以上”、“完成 1 个任务及以上”的用户，可达或超越平台次留数据。而这两部分用户占比活动用户数量极少，也侧面印证了活动次留低于产品同期次留的结论。说明该活动的内容或策略未达用户预期，可能是活动目标与用户使用产品的目标不一致，也可能是奖励吸引力不足。B 不同期比较：Q1. 当前活动数据对比往期相同数据，是否有变化？（时间性）方法参考以上，此处不再举例。2）看趋势A 从参与任务数、完成任务数视角看：Q1. 任务数与留存提升幅度之间有什么发现？从留存提升效率看，“参与 2 个任务”到“参与 3 个任务”，留存提升最快（17.75%），其次是“参与 3 个任务”到“参与 4 个任务”（12.1%）；考虑到“完成所有任务”（7 个任务）的基数过小，排除“完成 6 个任务”到“完成 7 个任务”外，“完成 2 个任务”到“完成 3 个任务”，留存提升最快（24.26%），其次是“完成 1 个任务”到“完成 2 个任务”（17.64%）。因此，尽量让用户从“参与 2 个任务”提升到 3 到 4 个、从“完成 1 个任务”提升成 2 到 3 个，对提升留存效率最高。B 从日期来看：Q1. 两类用户留存变化与活动留存有什么关系？以“完成 1 个任务的用户”留存为例，看转化与留存的关系：“用户活动次留”与“完成 1 个任务的用户次留”随时间变化趋势相近。说明转化与留存存在一定的正相关关系。Q2. 活动期间，次留如何变化？次留随时间呈现缓慢下降趋势，但基本维持在 7-8%之间。结合该活动过程中无其他事件或策略来中途拉升留存，判断 3 周的活动对用户的留存效果相对稳定。同理，如果在长期次留走势中发现有突然下降或提升的点，可以参考该时间段内是否有其他事件发生，这是一种寻找留存和事件关系的方式。3）看分布Q1. 参与、完成任务人数分布占比有何特点？对后续策略有何启发？从参与不同任务数的人数分布看，参与 1 个任务的占比最高，达 39.00%，远高于其他参与任务数。从完成不同任务数的人数分布看，完成 1、2 个任务占比最多，二者相加占比达 67.67%。结合“任务数与留存提升幅度”的结论推理可得：如想整体活动的留存率提升，需要关注占比较大的“参与 1 个任务的用户”、“完成 1、2 个任务的用户”。且这两部分人群占比大，针对其进行专门设计，可以有效影响活动整体的留存。Q2. 转化与次留随时间如何变化？有何发现？此处转化指完成任务。根据趋势图可看出：完成 1-3 个任务的用户，次留随时间有所变化，但稳定；完成 4-6 个任务的用户，次留随时间变化有明显下降趋势，尤其是活动开启一周后；完成 7 个任务（全部任务）的用户，次留基本不随时间产生变化。以此可得，“完成 1-3 个任务的用户”和“完成全部任务的用户”，在当前无任何中途拉升次留的情况下，再次访问的意愿基本不变。但完成 4-6 个任务的用户，则需要在活动开启一周后采取其他留存措施来帮助稳定留存。总结以上就是设计数据分析的基本思路，希望可以帮助大家建立基本的分析意识，面对数据不再迷茫。不过，对数据的敏感度并非一朝一夕可以形成，今后也需要大家在具体案例中有意识的练习哦~欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/data-and-design
广告
08-04 22:43 1137
02-19 17:41 663
落霞与孤鹜
飞翔的企鹅
在路上
表哥
张大湿
