图标 用户 标签 今天和大伙分享一个非常不错的产品，那就是爱彼迎。爱彼迎（Airbnb）是一个出租住宿民宿的网站，提供短期出租房屋或房间，让旅行者通过网站或手机发掘和预订世界各地的独特房源，为近年来共享经济发展的代表之一。我第一次用爱彼迎产品的时候，发现爱彼迎用户体验、设计都非常的不错，给人感受专业、舒适、信任带有设计追求的产品。虽然爱彼迎今年已经退出中国市场，聚焦出境游业务，但是爱彼迎的产品体验有很多点值得学习，今天我将从 12 个维度进行分析。往期产品拆解：文档类产品解题宝典！24个细节全面拆解Notion一、前言Notion 是一款融合笔记（Notes）、任务（Tasks）、知识库（Wiki ）以及数据库（Database）的 all-in-one 生产力工具，产品主要服务于互联网群体。阅读文章 > 一、品牌理念从这张图我们清楚看出爱彼迎符号融入了人、地点和爱的品牌愿景。爱彼迎说任何人都可以画出的心形，超越了语言和文化，颂扬了爱彼迎的热情好客精神，而热情好客的新调色板则反映了人们的开放心态。爱彼迎的品牌色红色更好的传达了爱、热情好客品牌理念。二、品牌符号我从 App Store 找到最新的爱彼迎的 logo，发现爱彼迎的颜色有所变化，偏向粉一些的红色，更具有活力的颜色。爱彼迎的 logo 好看是有原因的，我发现图标是由三角形区域中设计的，导致图标给人的感觉很稳，同时利用简洁的线条进行图形绘制，非常不错的符号。例如日本三菱的 logo，也类似这种设计形式，虽然是三个菱形组成，但是都是在一个三角形下进行设计，显得非常的稳。同时我发现跟名字也有关联，菱字和菱形的关联。非常的经典、克制、耐看，从小就很喜欢这个 logo。三、启动页每一个 app 都有启动页，而爱彼迎用浅灰色的 logo 作为启动页。感受最深就是这个 App 没有广告，保持最纯粹的页面。四、首页设计爱彼迎首页目标非常的明确，顶部卡片利用大投影使得视觉层级是最高的，同时配上红色大按钮“搜索房源”的描述来提高用户的点击效率。五、卡片设计爱彼迎卡片设计非常有细节，banner 的比例是 3:2，用户的头像在图的右方，做了一个破形处理，让户主和图片关联起来，非常有创新的布局，让平庸的界面更加设计感，同时大部分用户都是右手操作，头像在右下角，在操作的热区，体验会更佳。六、标签细节爱彼迎标签一样很有细节，重要的标签颜色和普通不一样，重要标签是棕色色值而普通标签只是浅灰色，有个层级的对比。标签的左右安全距离保持一致，当字数有变化的时候，标签感受和规范是一致的。七、透明细节爱彼迎评分标签背景是带一点透明度的，如果用纯色会突兀，而有透明度显得界面通透、清新。右上角爱心图标白色描边+黑色透明+微投影，为了更好兼容白色图片和黑色图片。八、布局细节爱彼迎首页下滑有一个探索全球奇屋，全屏都是美丽的民宿，采用瀑布流的设计布局，图片之间错开展示，自适应的高度设计，头部大 banner，下面配上小图，具有节奏感。左上角按钮大小高宽的点击区域大于 88px(基于 2 倍图）体验非常的好。九、沉浸式体验点击进入民宿，主图铺满 3/4 的手机界面，用户可以进行左右滑动查看民宿图片细节，用户还可以上下切换名宿，整体给用户沉浸的感受。当用户点击喜欢的按钮，界面的背景色黑色变成彩色背景，给用户明显的感知。我发现这些介绍页面可以翻译成中文，也可以显示原文（葡萄牙语）对应各国国家爱彼迎又做了对应的翻译处理，作为用户是非常的友好，能完全看的懂，满足国际化设计。十、弥散色彩爱彼迎有几处用了弥散的色彩，例如选择感兴趣的民宿，背景会加入一些弥散色彩做一些设计区分。个人中心也会在背景上用品牌色作为弥散色彩进行设计，让页面更加丰富。弥散光设计！网易阿里大厂都在用的刷屏级新设计风这阵子不是有一种设计流行风悄悄刮了起来嘛！阅读文章 > 十一、图标设计发现爱彼迎的图标都是灰色线性图标，同时每一个风格的民宿会专门赋予一种图标，保证了图标的一致性。线性图标的优点是简洁、高效，减少对内容的视觉干扰，能给用户带来极致的感受。想绘制线性图标，这里有 6 个前辈为你踩过的坑我们作为 UI 设计师，一开始入门接触最多的就是图标，而现在很多设计师都钟爱线性图标，导致很多新手设计师也跟随主流的脚步选择线性图标去设计，但是线性图标是不是真的像我们看起来那么简单呢？阅读文章 > 十二、字体设计仔细的人会发现，爱彼迎专门为自己的 APP 设计了数字字体和英文字体 airbnb-cereal-font，字体比较时尚、粗壮，特别应用在标题、评分、价格重要信息上具有很好的识别性。字体也可以给产品提高品牌性，形成差异化。总结品牌符号可融入企业的愿景和理念。品牌色的选择好的话，可以达成差异化。为 APP 打造一款数字字体和英文字体可以提高产品的品牌性。破形的设计还可以运用在 APP 的布局中，会有创新性的效果。整个 APP 的图标风格需要保持一致，这样用户的感受是一致的。图片的清晰、美观、高雅可以给整个 APP 提高美感，这个需要根据 APP 的定位来确定。感谢大家阅读～～ 关注黄小伟设计，分享好的设计。本篇来源：优设网原文地址：https://www.uisdc.com/airbnb-design-2
干货 合集 系统 大家好，这是 2023 年第二期干货素材合集！终于有一个不错的基于 AI 的 LOGO 生成工具了，这一期合集还有优秀网站设计参考范例，有专业的 Figma 设计系统筛选工具，此外还有 UI/UX 设计师可能非常需要的 UX 流程库，另外，本次合集还有2个付费工具，但是它俩实在是非常实用，希望能够帮有需求的同学节省时间和精力！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第一波！2023年1月精选实用设计干货合集大家好，这是 2023 年第一期干货素材合集！阅读文章 > 下面我们具体看看这一期的干货：1、基于 AI 的 LOGO 生成服务https://stockimg.ai/there-is-a-logo-for-thatStockimg.ai 提供的 AI 生成图片的服务是收费的，但是作为这个 AI 的副产品，Logo 生成服务目前还处于早期阶段，并且目前是免费的，对于 AI 生成 LOGO 有需求的同学可以收藏一下，虽然它生成的 LOGO 可能还不完美，但是即使以此为基础进行下一步设计，也省去了很多前期工作。2、精心挑选的网页设计项目灵感网站https://uxui.monster/这个名为 UXUI 的网站搜集整理了 700+ 素质极高的完整网站设计案例，这些案例并非是自动抓取而是手工筛选的。 UXUI 将所有的网站按照功能和配色进行了分类，如果你正在寻找特定类别或者特定配色的设计，可以直接在侧边栏快速筛选。另外，每个网站范例的页面当中，也被打上了标签，你也可以在页面中点击标签，看看有哪些同类的设计。3、色彩丰富有趣的开源多彩渐变https://gradienta.io/这个多彩渐变的网站提供的渐变素材并不仅仅是图片素材，每张渐变素材都有对应的 CSS 代码，而且这些 CSS 代码可以一键复制，而对应的图片素材也可以选择不同的分辨率 ，可选的格式有 JPG、PNG 和 SVG，而且清晰度也都超高。4、高质量付费 Lottie 动画平台https://drawer.design/Drawer 的这个平台是为初创公司、设计师和开发者所精心准备的，全部都是素质超高的 Lottie 动画，灵动自然的动画效果，比 Gif 小 600% 的文件大小，更流畅的效果，这些都是他们敢卖上价格的原因。对于预算充足的团队和设计师而言，Drawer 所准备的这些 Lottie 动画应该是能值回票价的。5、Figma 可用的专业设计系统大合集https://www.designsystemsforfigma.com/如果你正在使用 Figma 设计，寻找一套适合你需求的设计系统，那么这个专门为 Figma 整理设计系统的网站就可以发挥作用了！网站搜集了绝大多数支持 Figma 的设计系统，并且给每个设计系统打上了属性标签，支持的平台和编程语言、是否支持深色模式等，你可以借此快速筛选出符合你当前项目的设计系统。6、超全面的 UX 用户流程和界面库https://uxarchive.com/和其他的 UI 界面库有所不同，UX Archive 是一个面对用户体验设计的素材库，虽然它主要的采集来源仅仅只是 181 个 APP，但是它所采集的界面是围绕着用户交互流程来进行的，11万个界面组成了总计1195 个用户流程，所采集的流程比起单独的 UI 界面更值得参考，如果你是 UI/UX 设计师，应该会更需要这样的参考。7 、给插画师的人物姿态绘制 APPhttps://galshir.com/pose/如果你是一个需要经常绘制角色和人物场景的插画师，那么这个付费 APP 可能能够帮你省去大量的前期工作。这个APP 预设了大量的角色动作，并且能够针对角色细节进行调整，并且能够调整角度，方便你后续的绘制。POSE 目前正在半价打折，虽然总体不便宜，但是对于有需求的同学而言，这个投入应该是值得的。本篇来源：优设网原文地址：https://www.uisdc.com/2023-1-design-resources-vol2
层级 平面设计 文章 画面太单一亦或是太杂乱，是做平面版式设计时绕不开的话题。而这个难题归根到底是画面层级处理的问题，今天就来简单探讨一下~类似的平面设计干货：如何处理好文案和图片之间的层级关系，看这篇文章就够啦！今天继续为大家带来新一期的《拍一张照片，就是一幅海报》系列文章，重点跟大家讲一下如何处理好文案和图片之间的层级关系。阅读文章 > 超吸睛的动态平面设计，五个章节帮你掌握！好奇心总在驱使着人类进步，从二维到五维空间，从登陆月球到地球以外 930 亿光年的宇宙空间探索，人类的进步永不止步。阅读文章 > 平面设计课堂！超多案例总结的Banner设计指南：标题篇关于小黑盒的 Banner 设计，我们对非设计专业的同学有 4 点基本的视觉要求：安全区、图片清晰、Logo 规范、同一活动下各资源位视觉的统一。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/visual-single-messy
用户 情感 产品 情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。相关的概念你可以看这篇：关于情感化设计，这篇干货带你快速入门这个知识点！小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱颖而出。阅读文章 > 接下来，我们就从案例中分析，作为设计师该如何在这三个层次中做好情感化设计。一、本能层 —— 感官刺激对于本能层，设计师可以在符合功能需求的前提下，尽力给用户带来听觉、视觉、触觉的感官刺激，促成用户与产品的 “一见钟情”。作为一款国民级应用，支付宝出行功能下的每个 icon 都做得很用心，小动画让交互更有趣：Airbnb 在北美登录界面的长按钮，按钮的颜色会随着鼠标移动而产生变化，让交互感受更加深刻：语雀 App 在生成长图进行分享和转发时，有不同的卡片样式可以选择，图案随机像开盲盒一样，促成用户尝试分享：在淘宝搜索商品，可以看到页面右下角的“花瓣图标”，点开后是拼接图效果来展示商品。每个小图可以是视频，也可以左右滑动翻页，视觉展示效果明显，挑选商品也更加方便：在互联网时代，表达哀悼也有了新的方式，很多产品都使用首屏去色黑白化，来缅怀领导人的离去：二、行为层 —— 细节引导对于行为层，设计师需要对用户的行为进行预判和引导，利用细节处理打动用户，让用户对产品产生信任感和依赖感。使用 “微信读书” 在读到一本书的 50% 的时候，页面顶部会显示剩余阅读量，并会根据你之前的阅读速度估算剩余时间，鼓励你继续读：高德地图利用树木和楼高的数据，配合天气太阳角度的计算，在夏天时为选择骑行的用户提供有林荫和楼阴的“清凉导航路线”：在一些车辆限行的城市，高德地图增加了“添加限行日提醒”功能，根据不同城市有定制化的规定。在添加车牌号时，键盘默认开启大写字母和数字组合，方便用户输入：微信的搜索推荐，会用一些小脚标来吸引用户点击，比如“互联网精英都在看”，应该是根据文章阅读的用户画像来做的精准推荐：美团外卖在用户给订单打差评时，会自动开启匿名开关，保护用户的隐私：钉钉会在你长时间（约 3-4 小时）未读某人发的单聊消息时，再次发出通知提示，避免你错过重要消息：微信群聊天，大家通常都会设置“消息免打扰”，但也很可能会错过很多重要信息。微信可以在群聊设置中选择关注的群成员，这样这几个被你关注的群成员在说话时候，你就可以接到通知提醒：三、反思层 —— 认知共鸣对于反思层，设计师要调动用户最深层的记忆和感知，将视觉效果、产品功能和用户认知紧密结合，形成用户对于产品和品牌的深刻认知。英雄联盟的微信广告植入别具一格，将游戏用语、社群平台和用户很好的连接到一起，你只要发送 “亚索，听我口令…” 这段口令，就会唤起动画效果和小程序：饿了么的搜索推荐，使用滚动条状态，并配有古灵精怪的形容词，还会有 IP 形象不断的加词加戏：网易云音乐的播客功能，在切换主题内容时使用的是模仿老式收音机调频的方式，有趣的是，你能感觉到手机随着滑动调频而产生明显的震动感：花小猪 App 为了缓解用户等待平台派单时的焦虑感，将等待进程设计成红包进度条样式的样式，等的时间越长红包越大，让用户舍不得离开：Google 浏览器首页的 Logo 涂鸦变体经常会和实际事件相呼应，比如在某年的月食日时曾使用过的涂鸦小动画，点击后则会跳转到与月食知识相关的百科页面：欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/emotional-design-2
案例 用户 操作 时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速，很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在交互设计中帮助用户「同时做几件事」的设计方法，以及其对应的优秀案例：分割屏幕的布局更容易再续操作忽略非重要操作希望会为你带来更多的设计灵感。往期回顾：17个优秀设计案例，帮你快速了解情感化设计情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。阅读文章 > 一、分割屏幕的布局通过将屏幕的布局进行分割处理，可同时呈现多项内容，让用户自由选择任务主次，同时处理多项任务。分屏设计很常见，但其中的体验细节却依旧值得研究和优化。案例 1 微信在 Pad 端的分屏布局考虑得很周到，看微信视频时支持分屏功能，还能够调整屏幕分割的尺寸比例。最小的分屏尺寸做成了手机尺寸，体验顺畅，看视频、接微信两不误：案例 2 bilibili 在移动端的视频通过小窗模式可以不间断播放，不仅可以在 App 内或外呈现小窗模式，正在播的视频，在被临时打断退出视频后，还可以用音频的方式继续播放：案例 3 微信的新功能，在你阅读文章时依旧能看到朋友发来的微信消息，可以直接在当前页面回复消息，避免你在看文章时阅读不了微信消息。你还可以将信息“标记未读”，一会儿再做处理：案例 4 微信视频号改版后，点击视频号下方的博主名称和头像，下方弹窗会弹出该博主的主页和其他视频，而当前正在播放的视频会渐渐呈现小屏播放，视频内容不会被遮挡，既不影响观看，也不影响用户探索该博主的其他视频内容：案例 5 在微信订阅号中展示的视频内容可以通过划到右下角变成小窗播放音频，既可以听内容，也不影响你继续浏览订阅号的其他内容：二、更容易再续操作产品可以让操作更容易被用户管理和掌控，在被打断后很容易被用户重新再续，给用户足够的掌控感。在一些特殊情况下，几件事可以交替、穿插地处理，同时进行。案例 1 钉钉的移动端浮窗功能，向右滑动退出正在操作的页面时，就会出现添加浮窗区域，用于收录未做完的操作。同时显示出已添加浮窗的内容数量，最多添加 5 个：案例 2 微信的浮窗功能也可以帮助用户更快捷地收录未及时阅读的内容，在打开时还可以定位到上次中断阅读的位置。用户不再需要整块的大量的时间来阅读长篇文章，可以更合理地掌控阅读节奏：案例 3 微信读书 App 会在你跳读到其他章节时，在页面下方显示“返回原进度”的按钮，方便你在跳读后回来继续阅读：案例 4 网易 163 邮箱侧重于为你呈现工作的多线程。每点开一封邮件，页面上方会增加一个类似浏览器标签页的 Tab，你可以通过它们查看自己的工作和阅读轨迹。当你在写邮件时，同时又收到了其他的新邮件，去查看新邮件之后，可以通过 Tab 直接回到邮件编辑页面，继续编写刚才的邮件：案例 5 使用钉钉发起会议邀请，如果中途退出，系统帮助你自动保存。再发起会议邀请时也会给出上次操作的提示，帮你续写内容：三、忽略非重要操作用户可以选择忽略或隐藏并不重要的、正在进程中的任务，将更多的时间用在其他事情而非无法控制的等待上。案例 1 iOS 系统中，当你在不同 App 之间传递文件时，如果文件过大，弹窗的“取消”按钮会在几秒钟之后变成“隐藏”，用户点击后可以继续做其他操作，并不妨碍后台的文件传输。案例 2 微信在接收超大文件时，增加了“发送给朋友”的选项，你不必等待文件在自己这边下载完成后再发送，可以直接发送源文件给对方，同时下载：案例 3 微信拨打语音的界面，在等待好友接听的过程中，你可以看到对方朋友圈的动态，缓解无聊的等待，也为即将进行的语音聊天提供了话题：欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/13-product-design-details-2
设计师 工作 工具 编者按：相比于其他的具体的趋势报告，来自 UXdesign.cc 的这篇报告更像是一篇针对 2022 年的反思和总结。编辑部从 1000 多篇设计文章当中洞察到 2022 年的变化，针对企业、设计师技能、执行力、社交媒体、web3 、人工智能等关键因素和热门主题，进行了犀利的总结，毫不客气地指出问题。2023 年，UX 行业的整体氛围即将改变。在设计领域当中，有时占据主导地位的某种趋势可能会突然过时。经过了长达3年的疫情洗礼，设计、技术、用户行为和社会风向一直在酝酿着变化。作为设计师，与其从一个趋势跟风追逐下一个趋势，不如批判性地审视一下这个行业，重新思考要走的路。这篇文章是 UX Collection 发布的第九篇《用户体验现状》报告，基于 2022 年的 1000 多篇文章，对用户体验行业进行的批判性反思。先睹为快！2023年值得关注的10大平面设计流行趋势大家好，这里是和你们聊设计的花生~一转眼 2022 年就只剩最后一个月了，除了总结今年的收获，也是时候了解一下未来的设计新趋势了。阅读文章 > 1、UX：全世界上最热门的烂摊子在许多设计团队连续几年不切实际地快速「增长」之后，裁员如同幽灵一样困住了所有人。没有一个企业是安全的。我们在 2022 年看到了大大小小的公司都在裁员，包括 Facebook、Better.com 、Coinbase 和 Twitter （特别复杂）。上市公司在 2022 年遭受重创，而私营企业同样受到了严重波及。企业估值下降，相应的设计职位也不像之前那么稳定。在组织内部，企业业务战略的频繁变化，也会导致团队裁员。随着不确定的增加，设计师的工作也开始变得琐碎而难以界定。在团队内部，经理和负责人们发现团队内部的疏离情绪开始增长（这是一种被称为「安静退出」的趋势），并且他们自身也会类似的感受。在这种情绪氛围下，产品本身也会变得更加商品化，而设计师也会越来越怀念当初为了创意和好设计殚精竭虑的历史阶段。虽然很多人对于经济复苏充满乐观情绪，但是更多的人开始正在为最坏的情况未雨绸缪，努力学习，为应对经济衰退而做准备。2、企业：相比拯救世界，拯救自己更重要当预算紧张的时候，投资设计的理由就更加不充分了。在 2022 年年初，企业还在不遗余力地留住人才。但是随着时间推移，这些企业开始调整福利政策——取消津贴，调整远程工作政策，削减预算，然后是裁员。企业开始以最不受欢迎的方式来提高生产力、降低成本。最重要的是，一些公司干脆禁止员工在工作场所讨论政治议题，并且撤回多元化人才计划。在设计领域，「增长设计师」成为了新崛起的角色——专注于获取新客户并带来即时收入的设计师——这表明企业和公司对于投资回报率更加务实。许多被设置为以用户为中心的 UX 职位，也在工作中，被公司要求不惜一切代价提升利润。坐在冷板凳上多年的设计师，如今开始被要求「分摊成本」了。3、设计能力：企业需要通才设计师员工数量的减少，意味着公司需要更多的通才设计师，同时也要求领导者亲历亲为。随着许多公司决定减少招聘甚至裁员，企业的招聘负责人更倾向于考虑能身兼多职的应聘者，而不是仅仅只专精一项的人。虽然空缺的职位正在减少，但是新人的数量却是逐年增加的——这意味着入门级的设计师之间，有着更加激烈的竞争，这也使得新人更难找到第一份工作。设计院校所教授的内容和实际设计工作之间的差距，比以往任何时候都要大。想要获得工作职位的设计师需要更加快速完成更多的工作，并且不会有太多犯错的余地。企业高层，则期望更多管理者回到务实的职位上，这一趋势完全没有放缓的迹象。公司无法承受能言善辩但是无法交付的团队领导。由于明年的经济形势不明朗，团队可能仍然处于分散状态，公司领导者需要持续关注团队内的倦怠问题，并且跟踪内部有辞职倾向的员工。4、执行力：比讨论更重要的是行动太多的循环对话和决策不足，正在破坏设计的正常运行。是时候重新考虑合作的方式了——专注于让项目推进，让事情发生。一个会议紧接着另外一个会议，每个人都有意见，但是没人有真正的决策权。从技术上来讲，会议开完，待办事项上的条目可以划掉了，但是依然充满了不安感——因为团队仅仅只是在按时完成任务，而不是真正向着愿景前进。如果我们尽量少关注彼此的状态更新，而将注意力集中在工作内容本身呢？现在是时候降低对于「执行」的偏见了。如果你不同意团队的决策，那么请提出替代方案。如果团队决策卡住了，那么重新创建一个决策框架。有时候你是缝缝补补的修理工，有的时候，需要你来掌舵开车。我们时常会害怕因为跳过某些步骤出现问题，认为这样会破坏整体的设计价值，但是如果不将项目往前推进，会更加糟糕。一旦我们开始交付，项目的会变的逐渐清晰，每天交付一些内容，确保协作不仅仅是分享意见和想法，而是真正开始创建一些东西。5、社交媒体：算法驱动的影响力社交媒体上的意见领袖正在影响设计师们的想法。现在是社交媒体算法驱动设计的时代。很多设计师如今都都倾向于通过在社交媒体上分享知识和想法，借此来建立影响力，但是越来越多拥有影响力的人享受到甜头，不再追求更好的设计和更优的技艺。在社交媒体发展的早期，我们能够选择关注谁不关注谁。但是现在则不同，算法会掌控我们看到的内容，我们无论是在 TikTok、Twitter 还是 Instagram 、 LinkedIn 上看到的内容均是如此。当用户无法找到他们真正感兴趣的帐号的时候，平台会优先推送给他们最两极分化的内容和用户、最简短和最规范的帖子。可是，当某个内容足够简单、用户参与度足够高的时候，我们很容易忘记它背后真正的起源、历史和背景，留下的仅仅只有情绪和结论；新手设计师更有可能从 Instagram 推荐的 UX 领域头部帐号那里听来 UX 法则，而很少通过实际的案例和研究来获取知识。算法推荐的帖子和内容都是被精挑细选过的，但是这些缺乏细节的内容，又破坏了获得真正知识的契机。UX 作为一门以「为什么」为核心、需要充分了解用户背景而闻名的学科，我们想要学好它，如今要非常谨慎地关注我们获得信息的来源。6、web3 ：寻找可供栖居的未来web2 试图让技术感觉起来更加人性化，但是 web3 试图让技术看起来更加……技术化。如果说 web2 的公司在信息传播的时候，始终是围绕着以人为本（以客户为中心、不要作恶等）的视觉叙事，那么 web3 公司则代表了一个全新的转变。在这些公司企业的网站，没有女性角色站在草地上吃着沙拉大笑的场景，也没有扁平风格的角色插画，web3 相关的网站上不再展示产品如何帮助我们适应生活，而是将视角聚焦于令人兴奋的、有待探索的新宇宙。许多 web3 项目都有着漂亮的霓虹色、抽象的形状和科幻风的视觉特效，它们在向过去色调不饱和的单调设计宣战，并且宣告一个有待探索的未来正在前方。视觉叙事风格的转变大概 10 年一个周期，因此设计领域正在快速远离 web2 的企业风扁平化设计，就不足为奇了。web3 的全新抽象式设计并没有提醒我们当前世界的问题，也无从解决当下的这些问题，但是展现出了一个可供逃离的抽象世界，让我们从当前的危机中分心出来。web3 更像是在强调「逃离当下的世界比起修复它更容易」。7、人工智能：无法回避的客观现实人工智能正在以一种比我们接受能力更快的速度进入我们的工作流程。在过去几十年当中，自动化的机器人减少了制造业对于体力劳动者的依赖，提高了整个行业的效率。在如今的第四次工业革命当中，人工智能也可能会降低设计领域对于创造工作者的依赖（人工智能生成的图片甚至赢得了设计比赛）。创意产业正处于技术革新的边缘。人工智能已经可以越来越好地替代我们完成日常的工作，尽管设计师在接纳人工智能和阻止人工智能两者间存在分歧。起码对于 AI 辅助文案而言，UX 设计师是既兴奋又害怕，同时他们也在寻找对 AI 系统建立信任的办法。我们还能看到，已经有人开始将 Unsplash 的图库替换成了 Dall-E 、 Midjouney 以及 Stable Diffusion 的 AI 生成图库。此外，设计师还在测试基于 AI 的协作模型，并且创建了 Figma 插件来协助用户更快完成各种日常工作。当我们面对新兴的事物时候，我们最好保持开放的心态：我们希望自己擅长已知的技能，但是我们可能同样擅长处理某些未知的事物。2022年的AI绘画神器回顾 https://www.uisdc.com/zt/ai-draw8、设计工具：让工具服务于设计更重要设计工具正在不断发展和前进，让我们花费更少时间探索功能，这样我们拥有更多的时间和对的人一起协作。Figma 基于浏览器来开发，以协作为中心的设计理念，彻底颠覆了整个设计行业。他们投资建立的设计社区，让设计师受众建立了有效的联系。设计师们对于 2000 美元的设计会议入场券不感兴趣（Adobe Max），免费在线的简短分享更加吸引他们的关注（Figma 社区），Adobe 用 200 亿美元收购 Figma 恰恰印证了这一点。Figma 这样的设计工具被移交到大型企业的同时，它也为其他的设计工具指明了前进的道路。今天，越来越多的设计师正在遵循开源协议，来提供更加自由开放的设计，改进开发和设计流程，并且增强 AI 在设计领域当中的应用。Adobe 收购 Figma 给我们最大的教训是，设计工具不仅仅是绘图工具。当工具让开道路的时候，真正的设计才会发生，设计师们需要在交流、评论中完善，需要实时看到彼此，共同创造。2022 年的这次收购已经证明设计工具应该也是对话工具。9、个人努力：停下来思考一下再前进把自己逼得太紧，对自己的伤害会更大。如果我们想要更长久地待在设计领域，那么我们是时候重新调整我们的工作和事业的优先级了。很多设计师总会不断推着自己的前进，我们中的许多人都将空余时间花在创建业余项目、接私单、在初创公司兼职、在线分享内容以及向他人证明自己。在工作场合，又会不断推进自己的职业生涯、争取晋升机会、赢得领导青睐、在谈判桌上争取所有利益。设计师总会将雇主的增长和我们自身的增长混为一谈。我们总是忘记时间，燃尽了自己。为了解决这个问题，我们应当适时和工作脱钩，重新思考我们对于工作的真正期望。我们需要时间、空间和能量，来帮助我们按照自己期望的方式成长。我们需要从创造的冲动中，捋出帮助我们进步的想法，将自我维护视作为同等重要的事情，或者说比工作更重要。我们需要找到工作的意义，同样也需要在工作以外找到意义。从长远来看，人生和自我的一致性要更重要。无论今天的情况如何，我们明天都需要为自己而活。喝水，善待自己，忠于自己所珍视的事物。努力工作，但是在此之前，先留给自己一分钟来审视前进的道路。10、不确定性：这是唯一确定的事情2022 整年跌宕起伏的变化给我们上了生动的一课。这一年年头以 web3 （以及 NFT、DAO、DEX、DeFi 等）的疯狂承诺开局，最后以充满不确定性的市场收缩和裁员收尾。大众对于加密货币的信心正在萎缩，元宇宙如今更像是一个昂贵的笑话，而 web3 初创公司正试图将难以想象的「产品」强塞给用户。我们希望在进入 2023 年的时候，大家都已经做好准备迎接挑战。挑战出现在我们身周的事物（各种炒作、奇怪的流行语、不断膨胀的兴奋情绪等），同时也挑战我们自身。我们应该质疑我们的工作方式、质疑我们之前所看重的事物，以及我们曾经所认为的「正确的设计方式」。在不断变化的、动荡的时代，不确定性是唯一确定的东西。氛围正在发生变化，随之而来的是被重塑的现实——更重要的是，这是我们重塑自身的机会。更多趋势报告：高手在用什么软件做设计？收下这份2022年UX设计工具报告编者按：UXtools 每年都会针对流行的设计工具进行统计，从而了解设计师是如何使用设计工具，以及哪些设计工具在过去的一年里又占据主流了，以此从侧面了解目前UX设计行业的现状。阅读文章 > 2023 包装设计十大关键趋势！顶尖平台Pentawards重磅出品！大家好，这里是和你们聊设计的花生~近日，世界顶尖包装设计平台及设计大赛 Pentawards 发布了 2022-2023 趋势报告。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/uxdesign-trends-2023
合集 干货 网站 大家好，这是 2023 年第一期干货素材合集！这期干货合集对于 UI 和 UX 设计师可能会更有吸引力，深色模式网站范例合集、SaaS 着陆页设计合集还有真实产品 UI 界面设计图库，这些都是 UI 和 UX 设计师日常设计的时候会用得上的好东西，另外，这次我还找到了设计工具快捷键合集网站以及一个全新的图片清晰度提升服务，不过我个人最喜欢的，还是搜索垂直网络社区的搜索引擎和顶尖图库图片搜索引擎。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第四波！2022年12月精选实用设计干货合集大家好，这有可能是 2022 年最后一期干货素材合集了！阅读文章 > 下面我们具体看看这一期的干货：1、基于 AI 的图片清晰度提升服务https://letsenhance.io/Let’s Enhance 是一个基于机器学习的照片清晰度提升服务，它可以在不损失照片素质的前提之下，最高将图片放大 16 倍，同时还可以借助算法提升照片的锐度，算法还能够帮你针对效果不好的照片修复细节，处理欠曝和过曝等光线问题。Let‘s Enhance 提供免费试用，对于高清图片有需求的可以尝试订阅他们的服务。2、深色模式网站设计范例合集https://www.darkmodedesign.com/如今绝大多的 APP 都已经适配了深色模式，很多新的网站也开始有针对性地设计深色模式了。这些深色模式的网站大都在配色和设计上更为克制，并且支持在深色模式和浅色模式之间切换，有很多值得学习的地方。这个名为 Darkmodedesign 的网站是由设计师 Cai Cardenas 所创建，网站也都是由他亲手挑选，有需求的同学可以收藏一下。3、垂直网络社区搜索引擎https://thehiveindex.com/现在很多资源、内容和技巧都需要去网络社区当中寻找，虽然 Reddit 这种百度贴吧式的社区里啥主题都有，但是真正细分而精准的社区相反不是那么容易找到。这个名为 Hive Index 的网站就专门搜集整合了这些垂直的小型社区，其中仅设计社区就搜集了70个。如果你正想寻找某些小型的专业的社区，不妨用这个网站来搜索一下。4、SaaS 着陆设计大合集https://saaslandingpage.com/SaaS 类的产品和服务在页面设计上有很多相通的地方，这个网站汇集了全球范围内最顶级的 SaaS 服务的着陆页设计，给你作为参考。即使你本身所设计的并不是 SaaS 类的网站，也可以从这些素质极高的网站中汲取一些设计灵感。5、顶尖图库素材搜索引擎https://www.everypixel.com/Everypixel 是一个图库聚合搜索引擎，它直接连接了 50 多个目前最顶级的图库，你可以透过它直接搜索搜索这些图库当中的图片，不过，EveryPixel 使用神经网络算法，将过时的图片和优质的图片区分开来，它还支持以图搜图，内置丰富的筛选功能，还支持付费图片在线比价，甚至可以按照作者来搜索。6、设计工具快捷键合集https://shortcuts.design/虽然有的同学可能会直接买个带快捷键列表的鼠标垫来方便查询，但是鼠标垫不可能摆满所有设计工具的快捷键。这个名为 Design Shortcuts 的网站将目前绝大多数的主流设计工具的快捷键都梳理总结了下来，在快捷键这件事情上，可能会比鼠标垫要实用一点。7、真实产品的 UI 界面设计图库https://designvault.io/做 UI 和 UX 的同学对于这类 UI 素材库应该还是有较强需求的，Design Vault 将常见的 APP 全部都截图，然后按照功能和界面属性进行了详细的分类，打开网站首页之后，你可以直接从各个界面控件和功能页面的分类进去查看不同 APP 的设计，也可以直接浏览刚刚被收录的最新 APP 的设计。本篇来源：优设网原文地址：https://www.uisdc.com/2023-1-design-resources-vol1
干货 样机 这是 大家好，这是 12 月的第 3 波设计干货合集！这次合集里有移动端 AI 图片生成服务，有基于 AI 的独特节日贺卡生成服务，此外还有独特的抽象 3D 图形素材，有针对特定事件和功能的在线网站搭建工具，以及高素质的 Macbook Pro 样机。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第二波！2022年12月精选实用设计干货合集大家好，这是 12 月的第 2 波设计干货合集！阅读文章 > 下面我们具体看看这一期的干货：1、Linear 式设计风格网站合集https://www.linears.art/Linear 是一个在设计和细节上都非常考究的设计和开发平台，它提供了一套苹果式的设计美学体系，而采用了 Linear 式设计风格的网站和产品则被称为 Linears，这个名为 Linears.art 的网站就专门搜集了采用这一设计风格的网站和 APP，如果你也偏好 Linear 的设计风格，那么这里的内容都是颇为不错的灵感来源。2、移动端 AI 图片生成 APP DRAIhttps://apps.apple.com/us/app/drai-ai-image-generator/id1643729769DRAI 同样是基于咱们熟悉的 Stable Diffusion 开发而来的应用，不过它被制作成 iOS 平台的应用。使用它来生成数字艺术品的方法很简单，你可以给予一个简单的描述之后，选择你偏好的风格；你也可以上传一张照片，然后告诉它你希望基于这种照片进行哪些修改。DRAI 提供的玩法很自由，你可以通过排列组合创造出很多有趣的作品。堪比艺术家！被疯狂安利的 AI 插画神器 Disco Diffusion 有多强？大家好，我是和你们聊设计的花生~有关注「神器挖掘机」阿文（微博 @Simon_阿文 ）的朋友，可能已经了解到他最近正在疯狂安利一款 AI 绘画神器——Disco Diffusion。阅读文章 > 3、AI 生成独特节日贺卡的服务https://designstripe.com/ai-cards这是 Designstripe 出品的一款工具，在人工智能的帮助下，将你的需求和描述转化为一组有着独特插画的贺卡，你需要做的就是紧跟着流程填写内容，就能生成专属贺卡。4、包含独特纹理的抽象3D形状素材https://bloom.craftwork.design/Bloom 是一个包含 450+ 抽象 3D 元素的大合集，这些 抽象 3D 元素大都被设计的非常风格化，规整而充满调性，你可以轻松地把它应用到不同的场合，而且无论是静态还是动态，用起来效果都颇为不错。这套素材有专门的 Figma 库 和 Blender 库，方便你在设计的时候直接调用。整套素材是收费的，但是提供免费试用的小样。5、免费的在线网站搭建工具 Flyahhttps://www.flyah.co/如今的建站工具也做的越来越智能，越来越方便了。很多工具为了提供尽可能多的功能，会提供大量的模板和无意义的插件，甚至定价策略都看得人头疼，而 Flyah 则不同，它保留了简单易用的拖拽是编辑功能，但是大胆地选择了以事件为中心的页面设计，内置的模板也基本上是为了服务不同事件而设置的，设计有格调，功能够集中，感兴趣的同学可以上手试试。6、高素质 Macbook Pro Figma 样机https://macbook-mockups.wannathis.one/这是一套素质超高的 Macbook Pro 样机，这波样机超级有格调，整套样机是付费的，但是对于特定的品牌和项目而言，应该是值得的。这套样机可以直接在 Figma 当中编辑，同时还有免费的 Demo 下载试用。7、免费创建高素质图表的工具https://www.image-charts.com/如果你需要创建漂亮又规整的图表，那么使用 Image Charts 2.0 可以相当轻松的做到这一点，不过它能做到的还不只是这些，它还可以通过自定义的 API 和 Zapier 以及 Make 集成到一起，让你的数据图表可以和任何数据源集成到一起，也能让你的图表动态的嵌入到网站、邮件等不同的场合。本篇来源：优设网原文地址：https://www.uisdc.com/2022-12-design-resources-vol3
平面设计 作品 网站 大家好，这里是和你们聊设计的花生~今天给大家推荐一个收录了自 1880 年至今 140 年间平面设计海报的宝藏网站「Design Reviewed」 ，通过它既可以了解平面设计发展历史，也能从不同时期的作品中获得创作灵感，一起来看看吧~往期回顾：创意满满！超7000张海报的灵感网站Typo/graphic Posters大家好我是花生~ 今天向大家推荐一个专注于文字排版和抽象图形类的海报的设计灵感网站 Typo/graphic Posters。阅读文章 > Design Reviewed官网直达： https://designreviewed.com/官方推特： https://twitter.com/DesignReviewed官方 Instagram： https://www.instagram.com/designreviewed/Design Reviewed 是英国平面设计师 Matt Lamont 创办的个人公益网站。出于对平面设计的热爱，十几年来 Matt Lamont 一直在自费收集不同时期的平面设计资料并将它们数字化 ，致力于以此方式保存平面设计的历史，并记录上个世纪庞大视觉文化，于是便有了 Design Reviewed 这个网站。网站收录了 1880 年之今 140 年间的平面设计作品。点击网站顶部的“archive（档案）”选项，可以以每 10 年一辑的间隔查看这些作品，其中以 1950-2000 年间的作品最为丰富。按年代一一看下来可以清楚的感受到不同年代之前设计风格的变化，非常有意思。Design Reviewed 内收藏的不同年代的作品（部分）除了按年代筛选，网站内的作品还按用途进行划分，如书籍、杂志、邮票、包装标签、海报、唱片等，还有现在非常少见的、充满年代感的火柴盒包装。单击进入作品的详情页可以看到作品的高清大图，以及它的设计日期、出处、设计者、尺寸等详细信息。从这些作品中我们不仅可以看到平面设计的风格变化，也能在一定程度上感受到不同年代插画风格的发展史。看完了作品，我们还可以看看站内的采访及 Matt Lamont 对特定作品或书籍的解读。非常推荐看看他和其他优秀设计师的对谈，从中我们可以了解设计师的成长历程、受到了什么样的影响、以及一些具有借鉴意义的设计经验，对设计师本身的发展具有启发意义。Design Reviewed 收录的采访内容（部分）以上就是今天为大家推荐的平面设计灵感网站 Design Reviewed，它的特色在于：收录了 1880 年代-2020 年代 140 年间的平面设计作品，帮助我们了解平面设计发展历史站内资料都是高清大图，类型风格多样，可以获取源源不断的设计灵感官网直达： https://designreviewed.com/官方推特： https://twitter.com/DesignReviewed （需搭梯子）官方 Instagram： https://www.instagram.com/designreviewed/ （需搭梯子）Design Reviewed 的官方推特和 Instagram 每天会同步更新多张网站内作品，喜欢从媒体中获取设计灵感的小伙伴可以顺手关注一下~喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~本篇来源：优设网原文地址：https://www.uisdc.com/design-reviewed
用户 也能 插画 作为 UI 设计师来说，体验总结是必不可少的日常习惯，灵感的来源离不开对优秀设计的探索。本期黑马哥选择了最近发现的一些不错的设计案例，希望这些优秀的案例可以带给大家更多设计思考，强化我们的设计感知能力。往期回顾：10个产品细节剖析，看看高手是如何做设计的！产品设计做到极致的时候，发挥的空间就会深入到细微之处的功能，看着简单的功能，也会被设计师脑洞大开。阅读文章 > 一、个性化的性别选择设计完善信息对于产品来说是提升体验的关键，一些产品在初始状态会引导用户去完善，比如昵称、头像、性别、年龄等基础信息的采集。如何提高用户的设置兴趣，降低完善信息的排斥感，需要设计师进行反复推敲。最近在体验 FLAG APP 的时候，在性别选择界面设计上区别于以往体验过的产品，将性别的可视化进行了更为情感化的强化。出色的设计让用户眼前一亮，精美的插画提高了整体设计的感官体验。该案例提供了性别选择差异化的表现，是提高常规信息界面设计视觉感的不错思路。二、情感化的用户等级设计用户等级是增加黏性的关键，也能通过等级带给会员更多的增值服务，激发用户的参与度。在使用海马体照相馆 APP 的时候，个人中心在顶部视觉区域会直接显示用户等级，配合情感化的人物插画特别突出。通过左右滑动可以查看不同的等级，等级名称和对应的人物形象插画也会针对性的设计，不仅强化了用户体验，不错的视觉感也能吸引用户的关注度。三、精美的插画助你释放压力插画在产品设计中的曝光度越来越高，风格多样化直接影响产品风格，也能增强情感化体验。全靠插画撑起整个产品的案例是什么样子呢？最近发现了这么一款产品。Wild Journey 是一款解压的白噪音 APP，内置了许多大自然的声音，让用户体验到荒野的空旷、森林的静谧、大海的波涛。整个设计全是精美的矢量插画作品，带给用户赏心悦目的感官体验。来这里释放自己的压力，放松身心。四、趋势化的引导页设计引导页设计是最容易呈现风格趋势的，利于设计师进行创意发挥。无论是想要发挥插画技能、建模能力或者动效表现，引导页都能提供发挥的场景。最近在体验嘀嗒出行的时候，发现全新升级的 9.0 版本，引导页设计风格也是让人耳目一新。利用了趋势感的插画风格和视觉表现风格（玻璃质感风）相结合，画面清新自然，带给用户非常好的视觉感官体验。五、可视化表现提高用户理解度可视化设计逐步成为信息传递的趋势，利用图形化的形式更利于用户理解，相较于枯燥的文字化呈现来说阅读理解的效率更高。Keep 在产品设计的时候，有效的将一些数据的表达和内容的普及以可视化的图形进行展示，不仅提高了界面设计的感官体验，也能有利于用户对于内容的理解。提高界面设计的视觉感也能让用户更为关注，图形可视化已经逐步成为产品设计解决方案中的趋势。六、个性化的主题皮肤设置个性化的定制设计可以让用户感受到产品的温度，根据自己的喜好选择主题化呈现。成熟的产品都会在个性化设置上面提升体验度，特别是在主题皮肤的定制上面，提供了更多的风格让用户选择。Keep 在将主题皮肤设置定义为选择运动伙伴，不仅提供了不同的 IP 形象和主题皮肤，俏皮可爱的动态延展也传递了情感化的体验。多种风格的设计满足了不同用户的喜好需求，还为不同的主题定义了拟人化的角色和身份，视觉感和体验度都非常的到位。七、提高参与度的签到设计签到设计可以提高用户黏性，让用户在参与的同时获得礼品或者增值服务，签到也成为了众多产品的标配功能。对于设计师来说，如何通过设计提高用户签到的参与度，是需要不断探索的设计思考。最近在使用天天跳绳时，发现其签到设计的视觉表达直观醒目，大大的提高了用户对于签到的理解和参与度。将签到后解锁的勋章、经验、装扮和礼品等直观的结合到签到界面中，不仅风格协调统一，视觉风格也符合运动场景感。看到这个界面成功吸引了我的签到欲望，签到操作简单，整体的体验度都做得非常不错。八、情感化的个人中心设计个人中心作为主界面之一来说，设计的体验度是至关重要的。为了满足用户的喜好需求，个性化的设置也是层出不穷，功能布局、头像装扮、主题皮肤等都呈现出了众多的优秀设计方案。天天跳绳是个人经常使用的一款运动辅助工具，记录小孩跳绳也是非常便利的工具。个人中心顶部视觉区域的人偶形象增强了界面设计的感官度，人偶的动态体现出用户的运动状态，可以进行自定义的设置来满足自己的情感表达。可以设置人偶的装扮、旋转角度、动作等，人性化的功能设置提高了自定义的体验度，强化了用户情感化的使用体验。九、结果导向的设计表达以图标/图形/图片等设计辅助信息的传递很常见，通常都是根据信息的文案来进行设计表达。如果放弃本身文案信息传递的意思，选择结果导向的设计表达，也能带来不一样的设计反思。最近在体验 One More 的时候，动作库的列表设计中便选择了结果导向的思路。如果是常规的设计解决方案，会根据列表主题内容来设计配图，这样也能辅助对于内容的理解。但是 One More 选择了完成该项目得到的锻炼部位为设计思路，虽然不能辅助项目信息的传递，但是这个设计表达更能让用户理解完成的结果，参与度也能得到提升。可视化的设计替代了文字的表达，提高了用户对项目的理解度，进而转化更高的参与度。十、新颖的轮播 Banner 设计轮播 Banner 图对于设计发挥来说，除了在本身的创意和视觉表达层面以外，产品结构和功能层面也是设计师需要探索的方向。极有家 APP 在产品的体验设计层面做得非常不错，针对轮播 Banner 位置也是做了新颖的创新。在 Banner 图上设计了不同商品的引导标签，方便用户在感受整体家装效果图的同时可以选择场景中的商品，也能对场景中的商品价值有个清晰的认知。轮播的形式结合了待轮播图的预览和风格名称，增加了待轮播图的曝光度，整个样式表达上面视觉感也非常不错，是一个比较新颖的设计解决方案。小结体验、记录和总结是为了提高我们对于优秀设计解决方案的理解，也能强化我们的设计思路和灵感。对于设计的理解阐述属于个人见解，不足之处欢迎大家留言补充，我们互相进步。欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/10-ui-ux-design
自己的 团队 机会 或许是因为这世界太过变化莫测，或许是出于与生俱来的一种危机感和求生欲，在我的 15 年的设计职业生涯中，我很少感到稳定和安逸。即便偶尔会有一段时间放松下来觉得吃吃老本也无妨，但往往很快就会发现，自己又被某种力量甩在了后面，不得已，还得再努力跑起来才能追上。本文现身说法，结合自己的经历聊一下在设计师的职业生涯中，经常会遇到的几种职业转型。主要包括专业方向上的转型、专家转管理的转型、经理到总监的转型。之所以把职场晋升称之为“转型”，是因为晋升只是一个表面现象，而真正实现角色上的转变，则需要一个漫长的进化过程。同时，本文也可以解答一个之前几次被问到的问题，那就是我是如何从一个设计小美工，不断成长为一名互联网上市公司的设计总监的。当然，写这个文章并不是觉得自己多了不起，只是觉得一路辛酸可以分享，并希望本文能对你有所帮助，哪怕只是一点。往期回顾：猎聘设计总监：4步帮你做好职业生涯自我规划如果你有午睡的习惯，你会发现如果中午不趴那么一会儿，一下午的脑子都是不清醒的。阅读文章 > 第一次转型：专业方向转型，想清楚了就大胆去做这次转型，让我找到了自己明确的职业方向，并且获得了 BAT 的工作机会。在初入职场的时候，每个人都不太可能一下就进入到一个特别合适自己的角色。再加上大部分人缺少规划，所以步入社会的第一份工作，在很大程度上可能只是出于某种偶然。所以在工作几年之后，当你开始考虑自己要不要进行专业方向上的转型的时候，大概率是因为你的确、确实需要这次转型。但在专业方向转型中往往意味着要放弃很多东西，要面对一些新的不确定性，这个没有什么好讲的，就很简单：自己为自己做决定，然后大胆去做。我曾经建议团队里一个主要做运营设计的同学转做 UX（主要是因为他自身的能力特点以及当时团队的需要），虽然一开始他非常不确定，但后来他还是选择接受，并且转型也颇为成功。我之所以这样建议和操作是因为我自身就经历过这样的转型，并且也目睹过之前的同事或早或晚的成功的完成了这样的转型。他真正去做的时候其实也并没有一开始想象的那么难，如果真的有什么难点，那就难在转型时的取舍选择上。在参加工作 4-5 年左右的时候，我产生了一个想要从视觉设计师转型交互设计师的想法。然后不断地在知乎查资料、看了当时能找到的大部分设计书之后，更加坚定了自己的想法和决定。我当时的理由主要有这么几个：交互设计比视觉设计更能接触到业务核心的问题，我想要在更上游一点的地方做事情；当时移动互联网正在蓬勃发展，交互设计人才比较稀缺；我对纯视觉方向的 UI 设计的价值产生了些许怀疑，终日像素化地调整 UI 细节、与开发同学核对验收，有时候会觉得有点无聊；我感觉成为一名交互设计师，是非常酷的事情；在产生这个明确想法之后的一年时间里，我自学相关知识并在工作中找机会胜任交互设计的相关工作内容，然后凭借一个设计竞赛的获奖作品，拿到了百度资深交互设计师的 offer。虽然现在回顾起来觉得这是一个非常明确的方向，但当时的我也比较困惑该如何取舍。一是自己感性上非常喜欢的图形设计方向，二是自己理性上比较看好的用户体验设计方向。我知道需要做一个明确的选择，因为时间精力有限，要把事情做好，就需要在放弃中做选择。促使我最终选择走上交互设计师道路的是我当时在 HP 的一个项目经历。当时 BU 要做一个企业级的创新产品，但团队里面当时没有产品经理的角色，只有项目经理、开发负责人、设计负责人，基于前两年跟程序员们天天泡在一起的协作关系，我在这个项目里承担了约 50%的产品经理的工作。当我从 0 到 1 的思考一个产品的时候，我得到了一个全新的看待工作、看待设计、看待问题的角度。同时我觉得，只有经历了那样一段把长时间把自己榨干、并不得不迅速吸收各种信息，从而逼迫自己快速成长的时期，才有可能真正理解自己的存在方式应该如何，并且应该如何做进一步的选择。第二次转型：专家转 Leader，角色转变并非一蹴而就这次转型让我放下自己的天真，来到更为残酷的职场环境中。和很多想进大厂的人一样，刚到百度的设计团队的时候，我抱着一种“求学”的心态。但后知后觉，其实公司不是学校，公司里并没有什么人在做学问、做研究。相对于专业领域的讨论，大家更关心业务问题如何解决，跨部门如何协作，以及如何避免踩坑和背锅。所以大厂待几年，专业谈不上有多少精进，扯皮的功力倒是提升不少。关于走专家路线还是管理路线的问题，从当下的互联网设计环境以及职业发展的现实角度来讲，选择带人转管理是相对更容易的一条路，是一个相对更安全更保守的职业选择。但什么时候转呢？是越早转管理待人越好吗？怎么转呢？团队内部没啥机会给我怎么办？我从能力、动机、机会三个方面分别展开一下：1. 能力能力是基础，首先你得具备能力才会获得机会。只有你已经具备成为 leader 的能力，你才会获得成为 leader 的机会。这是很简单的道理，但是有人就是想不明白，自己不做任何准备，干等着。如果你想成为一名设计 leader，那就看一下成为一名 leader 需要具备的能力有哪些，自己还差在哪里。比如项目管理能力、设计指导能力、设计决策能力、沟通协作能力、抗压能力、与不同的人打交道的能力、对一整块业务设计工作的把控能力等等。抓住实现转型前的临界状态，去提前锻炼自己。比如说，如果自己所在的团队人员数量比较少或者没有实际条件让你去带一个小团队，那可以先创造机会从“导师（mentor）”这个角色入手。新入职同学的试用期导师、设计实习生导师，等等。这样的角色可以让提前进入设计 leader 的“实习”状态，同时也会提前锻炼自己的设计指导能力、沟通协作能力等。同时，还要与自己的直属上级建立良性的信任关系，扩大自己在设计团队内的影响力，积累自己的能量的同时，通过专业分享，独立负责重点多人项目等形式释放自己的能量、扩大自己的影响力。2. 动机你为什么想要转管理，做设计 team leader/manager？是因为会获得更高的工资、更高的职位？这可能也无可厚非，但从公司的角度来看，这个问题的最佳答案是你可以承担更大的责任，为公司解决更多的问题，为老板分忧解难。只有这样，才有足够的理由让一个人成为一个组长、干部，带领一个小 team 更好地前进。说实话，我自己本来是不想转管理的，但设计专家这样的角色在国内大部分团队中都会有些许尴尬。设计专家的职级与 leader 一样高，薪资也差不多，但专家所负责的业务宽带较小，如果一个人都不带的话，动手做执行的时候会面临“挑活儿”的问题。一方面，设计专家觉得自己不适合再做一些比较简单基础的设计工作了，另外一方面，团队内可能不太可能一直有很多重点项目只给设计专家来做。所以我想，很多团队还是处理不好这种设计专家资源在团队中的定位和使用的问题。不得不转 leader 的原因还有，我想要解决更大的问题，不光是眼前几个页面的交互问题，我想要提升整个产品的设计水准，运用设计思维让业务可以得到更好的发展。这样的动机和目标，专家岗是无法实现的，因为组织的关系，如果自己没有在一个团队 leader 这样的信息节点上，很多事情只能道听途说，业务上的很多信息自己也很难拿到。到头来，可能还是只是一个抱着砖头的大头兵。3. 机会机会的出现，接近于玄学。虽然我们不知道什么时候机会可以准时出现，但我们可以为机会的出现做好充分的准备。在我晋升完 P7 一年，并下决心转管理之后，我去找我当时的老板当面聊了一下。他当时所负责的团队已经有 40 多名设计师了，我想他可以为我留意一些发展机会。当时聊的时间非常短，我记得可能也就十来分钟的时间。他当时没有任何表态，但那次聊完的一个月后，他打电话跟我说，有一个 9 个人的小团队需要有人来带，问我是不是有意愿。回忆一下我当时跟他聊的十分钟里，我主动说了这几句话。第一句：一起共事挺长时间了，您觉得我的工作做的如何？第二句：在过去的两年时间里，我的能力有所提升，比如我做了 XX 事情。看起来，你也是认可的。第三句：我想我有能力可以承担更多的责任，帮你解决更多的问题，希望你帮我留意一下机会。第一句和第二句讲能力和贡献，第三句讲动机，站在对方的角度，把自己的诉求描述清楚。点到为止，不给老板压力。以上说的是内部晋升机会的主动争取，如果内部实在没机会了，就只能 transfer 或者跳槽。通过跳槽实现管理转型，也需要谨慎。很多人通过跳槽实现了自己的管理转型，比如“大跳小”的方式。自己在大公司是不带人的设计师，想要有新的职业发展，所以跳槽到更小规模的公司。这种“大跳小”的跳槽方式，看上去是一种晋升，但实际上是一种平跳。因为实际上是在拿自己的大厂资历做了一次变现，或者说是等价交换。所以在“大跳小”换机会的时候，一定要非常谨慎。因为这样的机会，一个人一生也没有几次。所以，一是不要着急把自己的大厂经历变现，选公司要看清楚；二是要看好时机，不要太早，也不要太晚。我看到过不少同事，变现太早，后续发展乏力。就是在大厂刚混了一两年，还是个 P5/P6，就着急出来，这就挺不值的。或者呢，也有些同事在大厂呆的太久，呆到六七年以上了，后期真的很难出得来。前面讲的是先具备能力、动机，然后在努力获得机会的情况。而现实场景中，还有很多人是先获得机会，其次再补充能力。就是虽然自己还不太行，但机会来了，就上了。这种情况也非常常见，只是有人能意识到自己能力不足，有人意识不到罢了。同时，即便你顺利得到了 team leader 或设计经理的职位，但并不代表，你就已经是一个合格的、出色的 team leader 或设计经理了。真正得到这个职位之后，还需要经历大概 0.5 年到 2 年不等的转型期。这个转型期的长短取决于每个人的积累与管理天赋。所以我对转型中的设计 leader 有两点建议：① 重视专业积累如果自己的专业能力和工作经验有了充分的积累，专家转 leader 在操作难度上是非常自然的，反之将会困难重重。如果自己在专业上没有话语权，不能成为一个小型业务环境里的那个设计专家，那么也很难建立领导力，自然带团队也带不起来。虽然不是每一个设计师都希望自己的 leader 是个球队教练，但几乎每一个设计师在成长期都希望身边有个专业上厉害的人带一带自己。如果说我在职业发展上有什么优势的话，那只能说得益于我在专家岗上逗留纠结的时间足够长，自身专业能力的积累足够过硬。这一点，才使得我可以在设计序列这个天花板比较低的小世界里生存更久的时间。② 管理目标，管理时间，管理项目，但不要试图管理设计师多“带”，少“管”。思考大家是不是服你，某某是不是对你有意见，这样的问题非常无聊并且是在浪费时间。也许你已经可以决定下属的绩效和去留，但请不要那么急切的认为自己已经完成了“管理者”的转型，实现了阶层跃迁（这类的想法就非常可怕）。带队不超过 10 个人，其实很难谈得上团队管理。设计 leader 的主要任务还是带领团队一起做出更好的设计，这个角色首先是多个设计师中的核心责任承担者，所以还是需要把注意力集中在事情上，管理好团队的阶段工作目标与执行计划，管理好大家的时间和日常安排，管理好重点项目的协作与推进，然后再多关注一下每位小伙伴的个人发展，自然而然团队也就带好了。第三次转型：从经理到总监，二级管理者的转型这次转型让我跨过了“35 岁”职业危机，获得了更为宽广的设计视野。你是否在以设计总监作为自己的职业目标？但如果没有做过设计总监，那么如何获得一份设计总监的工作呢？除非你是业内大咖，影响力爆表，否则如果没有带过 30 人以上设计团队的经验，应该不会有公司会冒风险让你去空降做管理。所以大部分人迈上这个台阶的第一步，大都还是通过内部晋升。这种类型的晋升机会，只有可能会在以下 3 种条件下出现。一是公司业务发展迅速，设计团队的规模也得到了快速发展。比如从 10 人快速发展到 30-50 人，然后趋于稳定。在这样的过程中，10 人团队时的设计 Leader，就获得了直接的晋升机会。二是一个团队的设计负责人突然离职，职位空缺。这时公司会考虑选择外部招聘，还是内部晋升，还是找其他人（比如产品负责人、运营负责人）代管设计团队。通常外部招聘的可能性更大。三是公司本来有几个小的设计团队，隶属于不同的业务，随着公司的发展以及对设计认知的提升，以及公司整体组织架构的科学性，会考虑把分散的小团队整合成一个大的设计团队。这时候就需要一位设计负责人来整体负责。我遇到的是第三种。说实话，这三种情况都是小概率事件，中国也没有那么多个中大型的设计团队，再加上总监级的设计人才跳槽换工作的频率也比较低，所以总体上也没有那么机会出来。能够得到那次晋升机会，得益于一次述职汇报。当初我从百度出来跳槽到 Z 公司，拿到的虽然是设计总监的 title，但只是在 Z 公司的一个子业务管理一个小型的设计团队，不到 15 个人。后来公司安排那段时间新入职的总监级员工给公司高层做一次述职汇报。当然，CEO 也会参加。遇到这样的汇报机会，有谁不会认真准备呢？况且自己还是一个那么容易上场昏的人。我认真准备了汇报材料，还为当天的汇报写了逐字稿。虽然 PPT 没有做地很精美，但我对如何从公司的角度思考自己的设计工作，这方面想了很多。后来汇报就挺成功的，几个月之后，公司进行组织架构调整，老板问我是否愿意带领更多的设计师，把公司的设计做地更系统一些。因为上次听过我的汇报，觉得我的设计思维比较成熟。我接受了。但后面的事情，我也并没有想到。当你真的得到了公司的设计负责人的 title 之后，挑战才刚刚开始而已。工作内容和工作带宽一下变得很大，每天要处理很多不同的信息。公司对你的要求也在一夜之间提高了一倍。但没有人也没有时间给你机会让你慢慢成长。也就是说，职位虽然到了，但能力没有很快跟上。很多之前没有遇到过的问题涌上来，等着你做决策。设计团队的设计师们每天都在看你，下一步会做什么，可以带着大家做什么。不夸张地说，在获得晋升之后的几个月内，我一直处在一种诚惶诚恐的状态中。我没有办法特别清楚地知道，我该怎么调整自己的工作状态。我每天都在反思，我是不是在以一种正确的方式在工作。我是不是看起来只是一个带着更多人的大 leader，而没有为整个设计团队负责，主动去做一些事情？设计流程的优化、设计资产的沉淀、设计师的晋升与招聘、日常设计项目的评审与抓放，现在想起来，因为经验不足，可能当时做的很多决定都不够果断，有一些决策也未必完全正确。但至少问心无愧，在那个时间，我做了自己应该做的事情，尽可能的扮演好自己的角色。成为一名更好的设计管理者，也是有方法的。宝洁公司一度被称为职场人的黄埔军校，宝洁内部有一套自己的人才培养体系，其中面向管理人才的一门基础课程，叫做 5E 领导力。领导力不等同于管理。有了领导力，团队的管理往往水到渠成，没有领导力，团队的管理只能是无米之炊。5E 领导力模型分为 Envision（高瞻远瞩）、Engage（全情投入）、Energize（鼓舞士气）、Enable（授人以渔）、Execute（卓越执行），这五个方面概括了成为一名优秀的领导者需要具备哪些特质。5E 领导力是每个二级管理者（或者高管），都需要按照其要求不断提升自己的基础模型。有时我也用 5E 领导力模型来要求我团队里的 leader，相信这会对他们的下一步成长有所帮助。最后，我想说成为设计管理者，不是设计师职业生涯的唯一出口，也不是设计师所谓“迈向成功”的必备路径。设计师的事业成功，不应该通过职场头衔的高低来衡量，而应该始终以作品说话，取得设计师应该取得的在设计领域内的成就。如果过分执着于职级与薪资，醉心于职场宫斗权谋，只会让自己逐渐变得堕落和腐朽，最终难逃出局的命运。如果你觉得自己有能力带领一个设计团队，如果你正在带领一个设计团队，无论大小，应该努力让团队因你而不同，让设计工作因你而不同。在设计方面成为那个能量最大的人，并且分享自己的能量、动力、理念、视野、经验、知识给团队，带领大家一起前进。共勉。感恩在 15 年职业生涯中遇到的每一个人。欢迎关注作者微信公众号：「柴林的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/designer-career-planning-2
工具 干货 视频剪辑 大家好，这有可能是 2022 年最后一期干货素材合集了！这期合集和往期一样扎实，有如同电影一样屏幕录制的录屏软件，有专业处理截图的实用工具，有完全自定义 SVG 背景的小工具，也有基于人工智能的视频剪辑和头像生成工具，不过我最喜欢的还是免费设计素材搜索引擎和无限可视化画布。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第三波！2022年12月精选实用设计干货合集大家好，这是 12 月的第 3 波设计干货合集！阅读文章 > 下面我们具体看看这一期的干货：1、基于人工智能的视频剪辑工具https://www.descript.com/也许你对视频剪辑并不熟悉，但是对于编辑文档应该不会那么陌生，所以这个名为 Descript 的视频剪辑工具，你应该可以较快上手。Descript 的操作逻辑和传统的视频剪辑工具有所不同，它更接近于是文档编辑的交互方式。基于OpenAI 的 Descript 会将视频中的文本内容识别出来，软件会自动识别句子和段落，你可以像编辑 PPT 一样增删内容，调整内容布局，同时它还可以免费访问大量的第三方素材，方便你剪辑。Descript 的基础套餐是免费的，感兴趣的同学可以上手试试看。2、无限可视化画布工具https://obsidian.md/canvasObsidian Canvas 是一个全新的脑图和白板工具，它提供一个近乎无限的空间来供你梳理和呈现想法，你可以轻松地将图像、文本、链接、视频、音频、PDF 文档等各种类型的素材直接嵌入进去，进行交互式地标注，你甚至可以让画布和画布互相嵌套，让所有内容之间的关系全部可视化地呈现出来。3、免费设计素材搜索引擎https://mrfreetools.com/如你所见，Mr.Freetools 就是一个免费工具合集网站，不过由于收录的各种工具太多，所以你可以根据自己的需求直接在站内搜索关键词，网站会匹配出最可能帮到你的各种设计工具和素材。值得一提的是，网站本身有非常明确的分类，你也可以根据分类来筛选。4、SVG 渐变完全定义工具https://www.magicpattern.design/tools/mesh-gradients这是一个自定义灵活度极高的一款 SVG 渐变生成器，除了完全自定义配色之外，还可以编辑其中的噪点、弥散效果、对比度、明度等各种参数。这个 SVG 生成工具是 MagicPattern 工具箱内诸多工具之一，你可以探索一下整套工具箱中其他的功能。5、超强的动态录制剪辑工具https://www.screen.studio/是否担心基于屏幕录制的视频内容会显得很单调？如果你使用 Screen Studio 就不会有这样的问题，这个录制工具和传统录制工具最大的不同在于它会如同电影动画一样，来处理你的录制过程，它会让镜头跟随着的你的光标移动，如同电影转场一样自然调整画面，动态模糊的效果会给你处理的相当自然和谐。6、人工智能游戏风头像生成工具https://www.heropack.me/Heropack 是一个灵感来自于游戏的 AI 生成头像的付费服务，和很多其他同类的服务不同，它完全专注于将用户头像风格游戏化，它有针对性地将用户头像结合深度学习生成各种经典游戏的风格，而这种高度定制化的服务，也是它收费的原因。如果你真的对于某个游戏极度拥有情怀，那么可能这项服务可能会正好贴合你的需求。7、简约且足够有格调的截图工具https://wrap.so/Wrap 是一个非常强大的浏览器扩展插件，它可以轻松捕获截图，并且生成相当精美效果。在这个插件的协助之下，你可以在极短的时间内，快速调整截图的边界效果，选择背景颜色和效果，优化阴影效果，调整纵横比，力争让整个截图以最舒适好看的效果呈现出来。本篇来源：优设网原文地址：https://www.uisdc.com/2022-12-design-resources-vol4
用户 品牌 页面 Hey，亲爱的小伙伴，你期待的旅行是什么样的？很高兴在 22 年末，智行 10.0 带着轻快的步伐与大家见面啦！新年新面貌，全新智行希望为小伙伴来年的旅途提供更优质服务，增添一份好心情。下面就来看看，智行 10.0 的构思与成果吧～更多改版案例：如何让图标更吸引人？复盘智行 Tab 图标设计过程OMG！阅读文章 > 智行，作为一站式旅游出行平台，已覆盖火车、机票、汽车票、酒店等业务。近年来，更是以亲民的价格吸引了越来越多的年轻用户，其中 90 后及 00 后占比高达 75.2%。前期调研中我们发现，与核心用户年轻化趋势形成反差的是，智行的界面风格调性更多被评价为“商务”、“严肃”。因此，褪去旧壳，以崭新活力之姿拥抱年轻群体是智行 10.0 需要探索的方向。项目初期，为使改版的感情调性更贴近用户出游场景，我们在团队内部及用户渠道收集了大量关于“旅行”的联想关键词，其中包括：愉悦、轻松、有趣、探索...等等。这些美好的词汇，描绘了大家对未知旅程的期待与憧憬。由此，我们提出「旅行，是对自由与快乐的向往」作为 10.0 升级的主线。我们希望通过 10.0 升级，提升体验及服务品质同时，打破工具类产品较为沉闷的使用感受，挖掘旅行中快乐的情绪内核，以轻盈有趣的设计传递“快乐旅行，自由出发”的生活态度，做有价值有温度的 OTA 产品。以此，我们确立 10.0 的设计目标：轻盈有序 · 打造高效预订体验情感传递 · 旅程的贴心陪伴者品牌外化 · 构建品牌记忆点一、轻盈有序 · 打造高效预订体验1. 全新 10.0 框架 更轻量智行始终致力于让用户订得高效、订得安心。然而扩充的业务场景和功能，使页面结构不堪重负，密集的信息和堆叠的模块影响了用户的预订体验。10.0 全新框架语言，希望通过有效的视重引导及清晰的页面展示，降低操作费力度，打造高效预订流程。“轻”头部色彩 操作更聚焦色彩是影响视重的重要因素。10.0 的升级中，我们将框架语言的背板色由品牌重色调整为明亮通透的浅色，有效将视重由头部转移至高频操作区，为用户营造专注沉浸的下单体验。同时，轻量的头部使页面更具呼吸感，缓解旧版“沉闷”、“商务”的视觉感受。“轻”信息展示 预订更友好清晰的信息展示可有效降低预订流程中的操作难度及决策成本。我们对页面信息进行分类重组，通过字号大小间距等手段扩大信息层级，凸显关键决策信息。并在有限的页面空间内，精简信息，降低信息密度，增加透气感，提升阅读友好度。2. 全新首页 让营销变有趣首页是获悉智行业务种类和流量分发的第一道关卡，业务入口的清晰展示对用户查找和后续转化极为关键。新版首页在使用 10.0 框架的基础上，用重色光感色块衬托智行四大业务入口，增强点击感。同时我们将业务线入口作为营销载体，融入动效，使营销活动的曝光更立体有趣，为各业务线导流及增长起到了正向的作用。二、情感传递 · 旅程的贴心陪伴者我们希望智行 10.0，不仅好用而且好玩，传递正向情绪价值，与用户共情，成为旅途中的贴心伙伴。我们通过 IP 植入、可视化以及创意的视觉唤新等手段一改智行往日“严肃”的形象，为用户提供更温馨友好的服务。1. IP“小智” 陪你环游世界智行 IP“小智”自诞生以来，机智可爱的形象圈粉无数。在 10.0 的升级中，我们将它融入更多页面流程，增加情感触点，提升智行的品牌亲和力。我们结合业务场景的同时，为“小智”量身打造了俏皮活泼的动作，塑造和饱满了它的性格特点，使其焕发生命跃然纸上。下单助手，高效操作有“我”指引下拉刷新，一票在手，极速出行空态场景，有“我”不再无聊2. 全新视觉语言 营造愉悦氛围视觉语言是传递产品调性的关键要素，围绕着“轻松愉悦出行”的基调及年轻的客群特征，我们对 10.0 的整体视觉进行了唤新。明快的色彩天空是纯澈与美好的汇集，正如旅行中探索快乐的本心。我们从中寻找灵感，从智行品牌蓝延伸出“纯净蓝”，并将其作为背景色融入核心流程页面中，营造蓝天白云阳光暖煦的视觉氛围。同时，我们提高了辅助色的明度和饱和度，让页面配色更活泼。圆润的图形我们用简洁流畅的外形结合大圆角，使图形在视觉呈现上更灵动 Q 弹。叠色的表现形式起到 1+1>2 的效果，使图形更丰富多彩～轻盈的插画插画用简约的造型风格，聚焦核心功能点的传达。视觉上以灵动的线条，搭配轻盈的高明度渐变，展现 10.0 年轻活力的品牌调性。3. 3D 现实映射 服务贴心友好调研中我们发现，预订流程中，用户面对复杂功能场景，时常存在这样的烦恼：功能说明长，读得脑壳疼看了半天不理解，迷迷糊糊下了单我是出行新手，那么多专业词看不懂呀...常说“字不如表，表不如图”，图像在传递信息效率和容量上都是文字的数百倍。10.0 的升级中，我们希望通过有效的可视化手段替代单薄苍白的文字表达，将信息化繁为简，提升智行服务的品质感及友好度。我们结合功能为用户搭建 3D 场景，通过营造真实的环境氛围，将现实映射运用到功能表达中，调动用户真实生活中的常规心理认知。同时结合生动的动画，将冗长复杂的功能说明以更直观友好的方式呈现。4. 趣味动效 转角遇到“小惊喜”旅行是快乐地出发，我们在下单流程中埋藏了许多有趣的彩蛋动效，为用户即将到来的旅程增添不期而遇的“小惊喜”。三、品牌外化 · 构建品牌记忆点1. 打造全新 UI 品牌符号品牌符号有利于品牌价值观的外化输出，为产品带来记忆点，同时高辨识度的符号能降低用户对品牌的认知成本，增加信任感和忠诚度。由此，我们结合业务属性及视觉创意打造了智行全新 UI 品牌符号～符号的由来创意上我们选取智行最具代表的火车业务为基点，从产品 logo 出发，衍生出抽象的火车造型。以光感的主题色渐变，增强呼吸感和透亮度。让符号“动”起来为了更生动地展现火车迎面驶来的速度感，我们将符号“动”了起来，穿梭如风的动态不仅象征抢票的高效性，也为原本静态的页面带来一丝小调皮。我们将其应用到了底 bar、一级页面切换等众多核心页面中。写在最后智行 10.0，从探索、落地、验证到上线，历时 10 个月。比心每一位设计师为之付出的努力。同时很开心，我们收获了用户对此次升级的认可和喜爱。随疫情的逐步放开，旅游业也将稳步复苏。正如开篇所说：「旅行，是对自由与快乐的向往」智行期待未来与你相伴，共同探索未知的世界，欣赏旅途的风景。2023 年，和智行一起，向快乐出发～本篇来源：优设网原文地址：https://www.uisdc.com/zhixing-10-0
偏差 偏见 认知 编者按：这篇文章来自资深产品设计师 Steffan Morris Hernandez，他将用户调研和用户体验设计中常出现的 10种认知偏差梳理出来，文章中他还设计了 10 张示意图，方便读者理解：了解认知偏差，不仅对于用户体验研究和设计很重要，对于日常生活同样非常有用。很大程度上，认知偏见已经渗透到我们日常的判断和思维当中，而这种主观认知上的错位会「扭曲现实」。在我参与 UX 训练营期间，我开始深入了解不同类型的认知偏见，阅读过 Erika Hall 的《Just Enough Research》和大量的 NNGroup 的论文之后，我又梳理了一些在 UX 研究和设计当中，经常会碰到的认知偏差，并且结合一些视觉设计说明，方便大家理解。这7种广泛存在的认知偏差，影响了我们太多的决策现如今心理学和行为学已经是 UX 和产品设计领域当中诸多理论的来源和实践的依据，它们是 UI/UX设计师和产品设计师的必修课。阅读文章 > 如何利用「认知偏差」达成设计目标？来看大厂的实战案例！前言在近两年的电商相关设计实践中，积累和运用了一些关于改变用户认知和引导用户行为的心理学手段，例如心理账户、损失厌恶、社会认同等等。阅读文章 > 1、抽样偏差当没有选择正确的目标人群的时候，就会出现抽样偏差。举个例子，你正在设计一个 APP，帮助事物不耐受的用户记录膳食情况。这个时候，通常会选择3个需求比较旺盛的用户群体，成年男性（20-30岁）、成年女性（20-30岁）以及青少年男性和女性（15-19岁），将他们作为你的食物不耐受的目标样本。但是，如果你的采样对象仅仅只有成年的男性和女性，那么会自然产生抽样偏差，所计算出来的结果也不具有代表性。2、赞助商偏见赞助商偏见指的是，调研或者研究会偏向赞助商和组织方的目标和利益，研究结果也会更偏向赞助商想要的结果。赞助商是否给调研者和研究者提供交通工具或者和车马费，是否给他们提供经济奖励，是否提供额外的食物、饮料折扣，这些都会产生赞助商偏差。尽管调研者和研究者可能会试图尽量客观，但是这些赞助和奖励可能会让他们的评估结果偏向赞助方。Erika Hall 在 《Just Enough Research》当中曾经指出，可以将组织目标尽量替换成不带偏向的一般描述来降低影响3、错误共识偏见错误共识偏见一般指的是，一个人假设其他人跟他拥有相同的理念、想法，在特定的情况下会做出相似的决策和行为。比如初创公司正在设计一款 APP，但是并没有调研过终端用户的真实需求，仅仅是根据自身对于需求的臆测来推进，那么最终的结果可能是灾难性的，因为实际用户对于产品的需求可能和初创公司的假设截然不同，关于这种偏见的影响和应对，可以参考 NNGroup 的这篇文章：https ://www.nngroup.com/videos/false-consensus-effect/通过调研不同的终端用户，提升调研结果的有效性，可以降低这方面的偏见。通过多种方法、多种来源来降低信息源和观点的单一性，借助多来源多方法来提升内容和分析的可信度。4、面试官偏见面试官偏见是一种比较特殊，但是很容易出现的认知偏见，是我在参加训练营做访谈的时候发现的情况。作为面试官，始终保持中立的态度，是一项需要耐心和持续练习的技能。避免出现特定的倾向，避免出现引导性语句，尽量让受访者自己来探索问题，这一点非常关键。在采访过程中，面试官需要在面对受访者的时候表情始终维持中性，因为在特定的时候点头、摇头或者微笑，都可能会微妙地影响受访者。5、知识诅咒知识诅咒偏见，指的是假定一个人假定其他人对于某个领域的知识和他的理解水平相同。在UX调研和访谈的时候，降低这种偏见是极为重要的，因为困难的技术语言对于很多普通用户而言只会带来困惑，并且会直接影响到实际的调研。在访谈期间，以类似新手的方式和普通用户进行交流，可能是更加有益的，这可能会让用户更好地展开表达，因为调研者自身具备的专业知识和语汇会给用户带来障碍。6、确认偏差确认偏差可能是最常见的一种认知偏差，它指的是人会选择性的回忆、搜集有利的细节和证据，忽略不利的或者矛盾的资讯，来支持自己已有的想法或者假定的趋势。你在社交媒体和各种聊天室里面，最容易看到这一点，相同相似的用户群体里面更容易进行类似的表达，但是相应的，不同群体之间的想法两极分化也更加严重。如果有确认偏差的调研者有着明确的偏向和目标，那么在调研过程中，他如果发现和自己预期相反的证据，他可能会选择性忽略或者弱化它们的影响，这种情况后续反馈到产品和设计当中的时候，会导致最终产品或者服务无法将用户的需求和利益最大化。7、设计偏差在 UX 调研当中，设计偏差也是相当重要的一个存在。通常，设计调研方案的时候，如何构建会影响到后续的分析，并反馈到产品里面，如果有重要的影响因素一开始被忽略了，那么可能在后续的产品中逐步被放大，影响不断加深，而这种所导致的结果，就算是设计偏差。8、霍桑效应霍桑效应本身非常有趣，是一种心理学上的实验者效应，是指当被观察者知道自己成为被观察对象之后，会有改变行为倾向的反应。你在学校的时候，被老师注意到之前和之后，你的行为是否会有所不同？这种霍桑效应在 UX 设计和用户调研的时候，同样是存在的。被你观察的对象会注意到你的存在，他们的行为会更加「注意」，而在做访谈的时候，他们给予你的回应，也同样如此。所以为了降低这方面的影响，调研者和观察者要尽量融入环境，并且尽量鼓励参与者表现得好像周围没有人一样。9、社会期望偏差人们本能的会倾向于融入环境，融入集体，避免被拒绝和被讨厌。在调研和访谈期间，受访者会倾向于撒谎，并不会说出他们真实的想法，会尽量说调研者想要听的话，以避免显得不合时宜或者尴尬。为了解决这个问题，研究人员应该加强研究的保密性，努力促使参与者尽量诚实的回答问题，这也是为什么观察行为研究，会比访谈更有助于减少社会期望偏差，而参与者也可能会更加自然地表现。10、近因偏差近因偏差指的是人类倾向于对最近的经历给予更高的权重和价值。以考试为例，如果你在最近一次的考试中成绩不佳，但是此前的7次考试成就都颇为不错，那么你可能对于最近这次糟糕的考试记忆犹新，对于即将到来的考试感到信心不足。在 UX 调研当中，如果调研人员一直关注最新的发现，而不是宏观地审视所有的发现，那么可能就会出现近因偏差。结语如果你对于认知偏差类的知识感兴趣，那么你还可以查看下面的文章：https://xd.adobe.com/ideas/process/user-research/how-to-overcome-cognitive-bias-in-ux-research/https://www.nngroup.com/topic/psychology-and-ux/本篇来源：优设网原文地址：https://www.uisdc.com/10-ux-research-cognitive-bias
插件 下载地址 设计师 序言咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？设计提速的秘诀就在于 Figma 中功能各异的插件。但当打开 Figma 插件库，海量插件让人头晕眼花，究竟哪一款才是最适合你的呢？为此 QQ 设计师在日常工作中反复实验，终于找到了这些宝藏插件，让 UI 设计领域的你成为高效的设计师。更多Figma插件推荐：全是高频神器！B端设计师常用的 7 款 Figma 插件最近打开 Figma，点击我的插件，发现我已经安装了这么多插件...我究竟要用哪一个插件？阅读文章 > 一、Skale-缩放能力增强工具很多设计师在从 Sketch 转换使用 Figma 的时候，找不到对应 Sketch 里的缩放功能。此时你就需要 Skale，这是一款热门好用的缩放插件，可以设置元素缩放中心，缩放比例或者缩放到特定的宽度、高度（包括该对象的所有属性也会随之缩放）。下载地址： https://www.figma.com/community/plugin/808289809557716614/skale二、To Path-路径上创建图形和文字经常做平面的设计师会遇到的一个问题，Figma 内要如何在创建曲线的文字呢？你不妨可以使用 To Path 插件，它的功能是可以按照指定的路径来变换图形和文字。下载地址： https://www.figma.com/community/plugin/751576264585242935/To-Path三、Morph-快速创建特殊效果Morph 可以在 Figma 内快速创建一些特殊视觉效果，如浮雕，霓虹灯，抖音故障效果，倒影，玻璃等。可以帮助设计师快速进行一些风格化的尝试和探索。下载地址： https://www.figma.com/community/plugin/906950256777348534/Morph四、Mesh Gradient-网格渐变工具当我们需要多种颜色混合渐变的效果时，Mesh Gradient 的作用是可以在 Figma 内以网格的形式编辑渐变，你可以编辑、拖动、填充这些网格点，做出极光的效果。下载地址： https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient五、Webgradients-配色灵感工具做设计非常常用的一个方法就是多去尝试，当我们在做某个界面的时候不知道配色该如何处理的时候，可以使用 Webgradients 插件内置的多种高级配色，或许你的灵感就此诞生。下载地址： https://www.figma.com/community/plugin/802147585857776440/Webgradients六、Auto Layout Styles-自动布局管理相比 Sketch，Figma 在 Auto layou 方面极大的提升了设计灵活度。而 Auto Layout Styles 插件可以很好的管理或者单独对某几个元素配置 Auto Layout，设计师可以在插件内设置好布局关系并进行命名，然后应用到设计中。还可以对已经设置好的布局样式进行修改，Auto Layout Styles 会同步到所有调用过这个布局样式的元素中。下载地址： https://www.figma.com/community/plugin/939173063111899081/Auto-Layout-Styles七、Batch Styler-批量修改文本和颜色样式大家在工作中经常会需要去修改大量样式，这时候你就可以使用 Batch Styler 插件，它的主要提效点在于可以批量修改颜色属性样式，批量更改排版样式，批量删除、重命名样式。下载地址： https://www.figma.com/community/plugin/818203235789864127/Batch-Styler八、Styler-快速创建样式当需要批量创建样式的时候，手动逐个去创建并不是有效的做法，而 Styler 插件可以快速批量创建样式（包括文本，颜色，效果等），它可以基于图层属性批量创建、修改或更新样式，当设计师在搭建组件库样式的时候，Styler 可以大大提高工作效率。下载地址： https://www.figma.com/community/plugin/820660579767995949/Styler九、Design System Organizer-管理设计系统设计师在 Figma 内搭建组件库时，Design System Organizer 插件可以更方便设计师创建，管理和修改组件库。超级提效实用的功能包含：1.像文件管理器一般管理组件内容2.项目在类别树之间拖拽移动3.文件之前批量转移样式4.批量重新链接实例和样式。下载地址： https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer十、Breakpoints-响应式断点插件在 Figma 内，当需要展示界面因为拉伸拖拽而发生响应变化的效果时，使用口头描述和各种静态界面标注并不是最优解，使用 Breakpoints 插件，可以做一些响应式动态布局的效果，并共享动画原型。即使团队其他设计师没有安装这个插件，也可以在拉伸界面时预览到动态布局。下载地址： https://www.figma.com/community/plugin/824289601590456356/Breakpoints十一、Themer-UI 界面主题管理同时设计深色模式和浅色模式的视觉稿会耗费设计师不必要的精力，Themer 的主要功能包括一键切换样式，主题管理，团队共享主题。能够从团队库中的已发布的组件创建和交换主题。将其作用于颜色、文本和效果样式的替换。设计师使用 Themer 可以一键切换成深色模式和浅色模式的设计稿，避免无效的适配模式工作。下载地址： https://www.figma.com/community/plugin/731176732337510831/Themer十二、Motion-关键帧动画当需要在做界面的动画时，很多设计师会问，Figma 要如何导入 AE？其实未必要导入 AE 才能做动画。Motion 插件的作用是可以直接在 Figma 内完成关键帧动画设计，将大部分图层属性创建成关键帧动画，避免设计师做动画时需要不停切换设计工具，在 Figma 内就可以轻松愉快的完成静态和动态的设计稿。下载地址： https://www.figma.com/community/plugin/889777319208467032/Motion十三、LottieFiles-导入和浏览 Lottie 资源在 Figma 内使用 LottieFiles 可以将自己的 dotLottie（.lottie）和 Lottie JSON（.json）文件导入 Figma 作为 gif 动画或高质量的 svg 图层，且可以访问和预览免费 Lottie 动画库内的资源，意味着有时候设计师甚至不需要使用其他设计软件来配合展示 UI 动画。下载地址： https://www.figma.com/community/plugin/809860933081065308/LottieFiles结语设计工具与设计师是相辅相成的。所有的设计工具本身都有局限，但合理利用插件可以放大工具的价值，为设计提效，让设计师有更多的时间去思考设计方案本身。你在设计中是否也遇到过一些宝藏插件呢？欢迎在评论区分享给我们，大家一起做最高效的设计师~保姆级教程！最容易上手的 Figma 操作指南！如果你是从零开始了解Figma，或是从平面切换到UI，或者（像我一样）从Sketch切换，那不妨一起来学习！阅读文章 > 第一波！我希望能早点知道的 11 个 Figma 技巧编者按：这篇文章来自资深 UI设计师 Danny Sapio，他总结了日常设计过程中，使用 Figma 的一些非常快速的设计技巧，希望能帮到大家：Figma 这款设计工具进步真的超级快，在 Sketch 当中很多进阶的、复杂的功能，在 Figma 当中实现起来像呼吸一样简单。阅读文章 > 欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/13-figma-plugins
合集 人工智能 干货 大家好，这是 12 月的第 2 波设计干货合集！这次的合集当中有大家正需要的圣诞节设计素材合集，有专门处理假 PNG 文件的工具，还有素质颇为不错的免费图标和免费波纹素材生成工具，此外，还有人工智能 LOGO 和视频生成工具，可能是你之前完全没用过的好东西！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第一波！2022年12月精选实用设计干货合集大家好，这是 12 月的第 1 波设计干货合集！阅读文章 > 下面我们具体看看这一期的干货：1、圣诞设计素材大合集https://iconscout.com/pages/christmas-design-assets看来 IconScout 逢年过节都要出一波针对性的素材，眼瞅着圣诞节就快来了，它又推出了圣诞特辑。这次的合集当中，包括超过 65000 款图标、矢量插画、3D插图、 Lottie 动画素材，这当中相当一部分是免费的，正在愁圣诞节促销页面缺素材的同学一定要看看。2、文本转视频内容人工智能平台https://elai.io/从根本上来来说，Elai 所提供的功能并不复杂，它可以将你所准备好的文本转化为为带有真人念白的视频内容，而背景当中还能像制作 PPT 一样同期生成文本和其他类型的内容。Elai 会事先采集不同的角色形象和他们的声音，借助人工智能将他们合成到你的视频里。目前这项服务是收费的，不过提供免费试用，有需求的同学可以试试。3、人工智能高素质 LOGO 生成工具https://makelogoai.com/最终还是走到了这一步： 使用人工智能来生成 LOGO。这个名为 Make Logo Ai 的服务，可以根据你的需求来生成素质颇为不错的 LOGO，你需要描述你的公司或者产品的名称，然后人工智能会根据你所提供的这些特质，生成对应的 LOGO。这项服务同样提供免费试用。4、假透明 PNG 文件消除工具https://unfakepng.com/你是不是也曾碰到过这样的情况：在网上下载一个看起来半透明效果的 PNG 文件，结果发现背景并不是透明，而是伪装成「半透明效果」的马赛克效果。别担心，用 unfake.png 可以帮你去除掉这些马赛克，将图片变成真正意义上的透明 png，真的是业界良心啊！5、高素质无缝纹理图案生成插件https://www.figma.com/community/plugin/1138854718618193875/Noise-%26-Texture生成无缝的纹理素材对于绝大多数的用户而言可能都是非常有用的，如果你正好是 Figma 用户，那么这个视觉设计的时候经常会用到的插件可能对你会非常有用——你只需要选中涂层，选择生成纹理或者渐变，然后调整即可，你不需要纠结于肌理无法拼接完美的问题。6、免费高素质图标合集 Futiconshttps://futicons.com/非常简单直给的一套免费图标合集，素质过硬，品类丰富，但是最重要的是， 整体的风格非常的未来主义，涵盖了虚拟现实、星际旅行、人工智能等各种新潮科幻时尚的图标，某种意义上它可以作为我们已有的很多图标的补充。此外，他们还接受定制服务，你所需要做的，就是点击 Get Custom Icons 按钮，发送邮件给他们官方即可。7、抽象波纹背景素材生成工具https://fffuel.co/aaabstract/依然是在线素材生成平台 fffuel 出品的新功能，aaabstract 能够在线生成漂亮的波纹背景效果。当你打开它的时候，你会看到不断变化的波纹，你可以控制其中波纹的复杂度、失真度和混色的效果，有深色和浅色两种选择，确定了大概效果之后，就可以一键保存了！本篇来源：优设网原文地址：https://www.uisdc.com/2022-12-design-resources-vol2
评价 用户 商品 大家好，这里是 TCC 翻译情报局，我是李泽慧。评价是电商网站不可或缺的重要组成部分，巧妙合理的评价模块设计可以帮助用户快速决策，有效提升平台下单转化率。作者通过对比多家热门电商平台的评价模块设计，总结出 10 条小技巧，并且附上了优秀和糟糕的设计案例方便理解，文章内容通俗易懂，案例丰富，一起来学习一下吧！线上用户依赖评价进行购买决策。一起来学习10个体验设计小技巧，看看如何活用用户评论来提升下单转化率吧。更多转化小技巧：增长设计实战！如何用一个公式提升5倍转化率？设计师如何提高转化率？阅读文章 > 做购买决策时，用户将在线评论视为有效的产品信息获取来源。在线场景下，用户不能亲临现场触摸或试用产品，浏览评论就成为帮助用户在下单前了解产品真实使用体验的渠道。但是如果评论的呈现不符合人们的使用习惯和预期，用户可能很难找到能解答自身疑惑的评论，因此不能判断产品是否满足自身的需要从而放弃购买。目前，有浏览评论习惯的用户较之以往正在增加，根据 2021 年的研究所示，超过 99.9%的用户表示他们在线购物时会至少偶尔看下评论，2018 年时，这个用户占比为 97%。2020 年另一个研究显示，当用户可以在商品详情页了解商品评分和评论时，购买转化率是没有提供此类功能产品的 120.3%。在浏览过大量电商网站后，我总结了利用用户评论提升下单转化和用户满意度的 10 个体验设计技巧，并附上了 优秀和糟糕的设计案例对比。浏览过的电商网站包括：亚马逊、Anthropologie、Ann Taylor、Asos、阿迪达斯、百思买（Best Buy）、好士多（Costco）、易趣（eBay）、家得宝（Home Depot）、Kohl’s、Karmaloop、H&M、宜家、L.L.Bean、梅西百货、耐克、Overstock、丝芙兰、塔吉特（Target）、Vitacost、沃尔玛一、提升高评分商品的可见性排序是有效且用户友好的工具，可以提升进入商品列表的几率同时反馈搜索数据。排序或筛选评分最高和最热的产品可以帮助用户在具有相似功能的产品之间评估出大多数用户认为最好的一款，从而帮助做出购买决策。我测评的网站中许多都允许用户通过最高评分、平均分或星级筛选商品，然而，几乎所有网站对筛选结果的排序都不太讲究，评价量少但都是五星评价的商品展示优先级高于评价量多但是混合了正负评的商品。比起这样，排序逻辑更应该考虑平均分和总评论数，这样可以避免让许多只有一个五星评价的商品优先于有许多用户评论的产品展示。优秀案例：Kohl’s 可以通过高评论量和星级筛选产品，这些功能让用户在购物时可以优先浏览评分高的商品。优秀案例：Kohl’s 的产品列表可以按评分高低筛选评价。糟糕案例：Target 让用户可以筛选平均分筛选商品，但是首页顶部展示的很多商品只有一个五星评价，同一星级但有更多评价的商品排序随机，这让用户可能错过热度更高更可靠的商品。糟糕案例：Target 通过平均分排序，同一五星等级中，只有一个评价的商品排在有更多评价的商品前面。二、在商品列表页展示评分当用户不能亲自评估产品质量时，他们就得依赖评分来找到高质量商品。评分应直接包含在产品列表中，特别是如果用户不熟悉网站售卖的产品类型时。几乎所有我测评的网站都在产品列表中展示了评分。当一个商品没有任何评价时就不展示评分或者显示评价数为 0。优秀案例：当产品有评分时就会展示在列表页中。未决策的用户或对商品领域不熟悉的用户可以从评分获取帮助。优秀案例：易趣在商品列表页展示用户评分。糟糕案例：H&M 在商品列表页没有展示评分，评论在商品详情的下面，除非用户滚动至详情页底部，否则很难看到它们。糟糕案例：H&M 在商品列表页没有展示评分。三、在星评旁标注评价数量当多个商品评分接近时（比如都是 4.5 星），看评价数量可以帮助用户推测哪个商品甚至是同件商品的不同颜色或口味更受欢迎。将星级与评价量结合，帮助区分评分近似的商品可以提升用户体验，比如 Vitacost 就是这么做的。优秀案例：Vitacost 将评分与评价量结合展示，帮助评估商品的热度。截图展示了两件评分相近的商品，但用户仍可以通过评价量判断哪个更受欢迎。优秀案例：Vitacost 将评分与评价量结合展示在商品列表中。糟糕案例：Ann Taylor 只有星级没有评价量，这就很难区分哪件商品有更多评价更受欢迎。糟糕案例：Ann Taylor 的商品列表中没有在星级旁显示评价量。四、将评分展示在价格附近在商品详情页，产品名称、评分、价格和操作按钮通常放置在页面上部，以确保可见性。在大多数电商网站上，可以在价格信息附近找到评分，通常展示在价格上方和产品名称下方，评价和其他详细信息，如买家秀等在页面更靠下的位置。沃尔玛的商品详情页中就将评分放在价格上方。但是 Costco 则把用户评论放在另一个 tab 下，这可能使用户做决策时无法及时看到评价。优秀案例：沃尔玛将评分直接展示在价格上方。糟糕案例：Costco 把评价放在后面的 tab 中，影响了评价的可见性。糟糕案例：Costco 的商品详情页中，用户评价在后面的 tab 中展示。五、给评价展示区提供快捷跳转方式将星评做成一个快捷入口，引导用户去看完整评价内容。大多数电商网站都用下划线标注评价数量表示可点击态，我见过两种交互形式用以导航至用户评价：跳转至页面下方的模块或打开一个侧边栏。不管是哪一种，在星评增加一个快捷入口，可以提供更简便的操作体验，并提升评价模块的浏览率。优秀案例：Overstock 的星评内容是可点击的，点击跳转至评论区。糟糕案例：Karmaloop 的评价数（查看一条评价）是可点击的，但点击后不是跳转至评论区，而是常见问题，这与入口文案相矛盾。糟糕案例：Karmaloop 商品详情页的星评内容是可点击的，但没有引导至正确的落地页。六、展示评价总览评价总览是对所有评价的总结，汇总了所有优点缺点。它通常位于商品详情页的用户评论的上方。根据我浏览过的网站，这一部分设计形式最多样。一些网站仅展示评分分布，另外一些像沃尔玛这样的店铺，会基于算法显示最有用和最无用的评价。L.L.Bean 则在评论总览下方展示用户尺码准确度反馈。所有成功的评论总览都用清晰的标签简洁地总结了用户评论，并附上链接方便用户了解更多。优秀案例：亚马逊对每件商品展示评价总览。在评分旁边附上了标签方便理解。每个评价标签点选后都可以筛选出相关评价。此外它还拆解出“商品质量”、“易清洁度”等商品特征的评分情况予以展示。优秀案例：亚马逊在商品详情页展示了评价总览。优秀案例：L.L. Bean 在评价总览下方展示用户对商品尺码的反馈。优秀案例：L.L. Bean 在商品详情页的评论总览下方展示了“用户尺码反馈”。糟糕案例：梅西百货对每件商品展示了评分总览并且为方便理解展示了标签，但遗憾的是标签不可点击，阻碍了用户进一步了解评价详情。糟糕案例：梅西百货商品详情页呈现的标签是不可点击的。七、增加针对评价的搜索、筛选、排序功能在商品评价中查找关心的信息可能很困难，特别是当产品的特性和规格很多样时。丝芙兰使用关键词过滤器（如粉底产品的肤质和肤色）轻松查找相关评价。另一方面，阿迪达斯将评价中最常提到的关键词做成筛选器。这样一来用户无需浏览所有评论就可以快速决定产品是否满足他们的需求，从而节约了用户时间提高了决策效率。优秀案例：丝芙兰将关键词（如粉底产品的肤质肤色）做成了评价筛选器。优秀案例：阿迪达斯将评价中最常提到的关键词做成筛选器。糟糕案例：Asos 让用户很难找到自己关注的评价，因为它没有筛选器，而需要通过点击评价总览或自行搜索关键词来查看。糟糕案例：Asos 评论区没有提供便捷的方法找到相关评价。八、展示用户上传的图片和视频专业的产品图片显示了产品在恰当光线下的最佳角度。它们虽然增加了产品的吸引力，但并没有显示产品在真实环境中的尺寸或外观。用户上传的图片和视频则可以呈现商品在真实环境中的样子。比如在美妆和服饰品类上，用户可以看到产品在其他人身上的效果，因为产品模特可能无法代表用户自身的体型、性别或肤色。优秀案例：家得宝的评论区展示了买家秀，以帮助用户更好了解产品在现实中的样子。优秀案例：亚马逊支持用户上传视频评价糟糕案例：宜家不支持用户上传图片和视频，无法展示产品在家中的样子。大部分宜家家具需要一定技巧进行组装，因为不支持图片和视频评价，宜家失去了让其他用户记录组装过程来指导动手能力弱的用户的机会。九、提供评价人相关信息在产品评论中有时很难找到相关信息，特别是当产品的特性和规格非常多的时候。L.L Bean 就展示了评价人相关信息，比如购买商品选项、评价日期、购买地、评价排名和购买认证等信息。优秀案例：L.L.Bean 展示了评价者相关信息，包括他们购买的商品规格、评价日期、购买地点、评价排名和购买认证。优秀案例：L.L.Bean 在用户评价详情中展示评论者相关信息。糟糕案例：耐克既没有展示评价者相关信息，也没有用户名，反而展示的是一串毫无意义的字符串。十、支持针对评价有用度投票和评论支持其他用户或卖家对评价进行投票和评论，可以提升平台评价的可信度。当评价被标记为有用，对于用户来说是来自之前购买者的可信信息输入。优秀案例：Target 支持卖家回复用户评价。卖家可以帮助解释潜在的疑惑，或者跟进问题并提供解决方案。糟糕案例：Anthropologie 不支持标记无用评价，并且也没有回复评价的功能。小结有效地展示用户评论可以帮助用户做出更明智的决策，通过评价获得转化激励，这已被证明会带来正向影响。以上这些建议是基于一些最热门的电商网站和我自身的观察，但需要注意它们不是固定的规则，且只是构建成功电商网站的一小部分。除了这些建议之外，设计优秀的用户评论区还需要基于用户反馈、目标和任务，因为每个网站都有独特的需求和待解决的问题。另外，持续衡量评价功能并不断迭代是很重要的。如果你有其他构建优秀用户评论区的方法，可以评论在下方。更多转化技巧和方法：如何让电商设计转化率更高？5个心理学技巧帮你轻松搞定！编者按：电商设计中如何快速提高转化率？阅读文章 > 转化率翻5倍！资深设计师需要学会的「分层设计」今天为大家带来一个关于到家精选服务下单转化的项目总结。阅读文章 > 欢迎关注作者微信公众号：「TCC翻译情报局」本篇来源：优设网原文地址：https://www.uisdc.com/10-user-evaluation-design
设计师 组件 功能 上期推荐了一波Figma插件，这期分享10个提高效率的实用技巧~提高200%的效率！13个腾讯设计师常用的Figma插件序言咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？阅读文章 > 一、快捷键面板｜宝典大全相信很多设计师一定看过一些快捷键操作，但是实际操作起来总是让人摸不着头脑。其实 Figma 提供了一个非常方便的功能，按"Ctrl + Shift + ?" 即可打开快捷键面板查看所有快捷键，有锦囊在手再也不用求助他人啦~二、快速填充｜“嘭嘭嘭”地填充多张图片遇到多个占位符的情况，有多少小伙伴还在一张张重复填充内容-选择图片-浏览并选择……在不使用插件的情况下，其实只要按下“Ctrl + Shift + K”选中多张图片或动图，就可以依次填充进去。三、自动布局｜界面布局的魔法想一下平常工作中遇到的高频但低效的场景，例如“做页面时删除一张图片则其它模块都需要微调好麻烦啊”、“过方案想看不同间距的样式但是一个个调整太浪费时间了”，用 Figma 的自动布局功能就可以解决这些问题，通过搭配使用等距排列、自适应变化等，你就可以完成一个调整细节就会自动影响整个界面的魔法。1. 关于自动布局使用键盘快捷键“Shift+A”即可为一个框架或选择的对象添加自动布局，同时，在右侧边栏会新增一块功能区域，你可以在里面控制自动布局框架的流动方式（选择垂直方向或水平方向的布局）、快速调节对象之间的间距。值得一提的是，自动布局非常好用的一点就是可以“套娃”，嵌套自动布局框架可以组合玩出非常多的花样，比如同个画框内同时存在垂直和水平方向的布局方向等。2. 响应式变化固定大小（fixed content）顾名思义就是“敌变我不变”，不跟随容器任何调整而变化，例如表单里面的头像和 icon；但如果是人为“天降大手”去对元素本身进行调整的话，元素依然会变化。适应内容 (hug contents) 用英文更好理解一些，去“拥抱”变化的内部，当内部是一个只能设计师调整尺寸(即固定大小)的容器，那么外部就会跟随内部发生变化。常用于容器内部包含文本段落，那么整个容器都会跟随文本变化而自适应容器大小。填充容器 (fill container)，即“填满”变化的容器，当容器是一个只能设计师操作尺寸(即固定大小)的容器，那么内部元素就会跟随容器发生变化。但值得注意的是，适应内容和填充容器只可选其一。例如表单长度根据昵称长短变化后，就不能再让表单长度去控制内部变化的适应，禁止套娃。3. 绝对位置很多设计师会遇到元素插入到在自动布局中，会按照自动布局关系自动进行排列，很难灵活调整位置，这时候你就可以绝对位置功能，使项目在自动布局中不占空间，自由定位。4. 负间距以前用 Auto Layout 的处理堆叠效果的内容非常复杂，在今年 Config 2022 功能更新后带来了负间距的功能，通过拖拽间距参数为负数即可完成堆叠的效果，效率翻倍！四、组件技巧｜组件库“瘦身”1. 变体当设计师创建组件库时，运用变体来管理组件的多种类型、尺寸、状态等，优化设计系统的层级关系，那么组件库就会极速瘦身，由原来各个形态的样式变为一个。设计师在调用时也可以更加快速地使用变体组件灵活调整为自己所需要的组件，而无需去逐个查阅组件库。2. 布尔属性布尔属性的作用在于够从设计面板中切换组件内部图层的可见性，设计师可以在着在组件中添加可切换可见性的元素，而无需对图层进行修改。设置后，在设计面板上有用于该图层的显示或隐藏的开关。3. 交换实例属性交换实例属性的作用是使用后不再需要深入图层面板，查找图层来交换实例。例如设计师可以从设计面板的属性中直接完成图标替换。五、交互原型｜实现界面可操作性Figma 最值得称赞的功能之一就是它的可交互原型，当所需页面和交互逻辑都排列好后，就可以像连线游戏一样，将页面串联起来，完成一个可上手操作的 app 啦！Figma 贴心地预置了常见操作触点、运动曲线、运动时间等。有了这些，你就不需要再切换不同的设计软件啦。下面给大家介绍原型动画中的一些关键功能。1. 触发器/交互行为触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。2. 智能动画利用 Figma 内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab 的平移、选择器的滑动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择合适的动画曲线让你的动画更具表现力。3. 弹性动画Config 2022 的更新中，Figma 为设计师专门提供了在原型转换中的弹性动画。自带物理属性的弹性动画，让你更容易设计出更流畅、更自然的界面原型。六、Figma Tokens｜设计变量管理者推荐一款叫做“Figma Tokens”的插件，其强大之处在于可以通过可视化以及编码的方式创建并管理各种 tokens，且可以在 Token 之间做一些引用关系或是算法，让各个 Token 串联起来，甚至可以一键导出 json 给你的开发同事。下面来具体安利几个非常厉害的小技巧。1. 别名Figma Tokens 里一个非常好用的功能，你可以用这个功能对使用不同 token 名称，但却用了同一个色值的 token 做引用关系。这样，当你改动你的原始色板的时候，其他被引用的 token 都会随之发生变化。2. 使用数学在构建类型比例或间距比例时需要考虑到比例可能是有关联性的。在 Figma tokens 中，你可以引用已有的一个 token，并使用它进行一些数学运算。例如，你希望 borderWith.medium 引用 borderWith.small，但将其值乘以 2。那么，你可以将以下内容写为 token 的值: ({borderWith.small} * 2)。3. 创建渐变 tokenFigma 本身没有办法做到制作渐变色 token 时引用现有的纯色 token。但是在这个插件当中，设计师可以自由度更高的使用多个已有的纯色 token 作为被引用者。七、小组件｜Figma 工作流拓展前阵子 Figma 更新了一个小功能，FigmaWidgets，说是小功能，但其实一点也不小。利用小组件，你可以在 Figma 内做到很多之前意想不到的事情，比如上传 pdf，添加录音，计时器等等，而且是属于开放式的，所有人都可以参与到小组件的创作并上传至社区，想必不远的未来，这一功能一定会大放异彩。比如近期很火的一直跟随在画面中心的像素小人，或许你可以用它来搭建一个像素风的小游戏。使用小组件进行表态和投票。在 figma 内上传 pdf 等等等等。八、历史版本｜创作时间轴回溯不知道你是否也遇到过这样的问题，当你发现误删了某些元素，一直按“Ctrl + Z”也无法回退，其实你不必重新再做一遍这个元素，你只需要打开历史版本，找到存在该元素的版本，从该版本中复制这个元素回来就 OK 啦。九、FigJam｜灵感爆发集合地ios16 上新了共同编辑备忘录，而 Figma 早早就提供了一个丰富的协作编辑功能：FigJam。使用 FigJam 可以和你需要和你沟通的产品同学快速进行线上沟通，可以使用便利贴快捷记录下你们的灵感，并用一个大大的贴纸表示你对他的想法的赞同，更有非常多丰富的互动玩法，快快去发掘吧。十、Spotlight｜聚焦所有人视线问：设计师在阐述需求的时候，如何聚拢所有人的目光？秘诀就在你头像的下方的“Spotlight”按钮，点击后，可聚焦所有处于当前界面用户的视线跟随你移动。你在设计中是否也遇到过一些提效妙招呢？欢迎在评论区分享给我们，大家一起成为高效的设计师吧！2020年，一定要试试这 17 款超给力的 Figma 插件在世界范围内，Figma 已经作为主流的原型和数字设计软件而存在，和 Adobe XD 和 Sketch 相比，Figma 作为在线工具，有着更强的实时协同功能。阅读文章 > 全是高频神器！B端设计师常用的 7 款 Figma 插件最近打开 Figma，点击我的插件，发现我已经安装了这么多插件...我究竟要用哪一个插件？阅读文章 > 欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/10-figma-skills
世界杯 足球 用户 作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。根据国际足联主席因凡蒂诺预测，2022 年的卡塔尔世界杯赛事将会吸引到全球超过五十亿人观看，这一人数占全球总人数的比重超过 60%。以往球迷们观看世界杯，更多是通过电视或者央视频、优酷这种传统的互联网视频平台，而在 2022 年这个冬天，抖音花费 10 亿巨资，成为了国内首个获得世界杯直播版权的短视频平台。作为拥有 6 亿日活的抖音，将会如何跨界设计世界杯专题，让亿万球迷能在抖音享受四年一次的足球盛宴，本期设计大侦探，就来全面拆解抖音世界杯专题。往期拆解：世界杯专题！8500字全方位深度拆解懂球帝APP2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。阅读文章 > 一、栏目入口抖音世界杯的入口在抖音头部一级导航栏最左边，和周边、关注、商城以及推荐并列。世界杯的栏目首页从上至下主要分为 5 个部分，分别是轮播（当日热门赛事以及活动）、金刚区（包含赛程、积分榜、有奖预测和我的主队入口）、比赛直播（当日赛事）、名嘴聊球（签约足球大咖）、赛事热点（热点头条资讯）、热门球星（入驻足球巨星）、世界杯好物（周边商城和抖音生活服务）、重磅热播（抖音自制节目）、大家都在拍（平台用户自创视频）和视频信息流（世界杯专题相关视频）。二、内容策划抖音在内容策划方面，几乎把前央视解说团队都邀请过来了，比如黄健翔、段暄、刘建宏这些家喻户晓的的足球主持人，都在抖音单独负责至少一款足球综艺栏目。除了解说团队，抖音还邀请了众多跨界娱乐综艺大咖，为球迷一口气送上 8 个原创足球综艺节目。从这个版块可以看出，抖音对此次世界杯的重视度之高，就像卡塔尔为了举办世界杯投资 2200 亿美元一样，劣势可以用金钱弥补。1. 内容专题① 观赛指南「观赛指南」是指在一场比赛开打之前，各方媒体对这场比赛进行的赛事分析和预测。足球这项运动，由于充满了竞技性，一场焦点比赛，从赛前到比赛，再到比赛后，都充满了无数话题。而观赛指南，可以为球迷提供完整的比赛情报和指南，为比赛做预热。分组解析「分组解析」是针对世界杯的 8 个小组（世界杯有 32 支参赛球队，分为 8 个小组，每个小组 4 支球队，前两名可以晋级到淘汰赛）进行出线形势分析。作为四年举办一次的比赛，对于每支球队来说，都是非常宝贵的机会，所以关于小组的出线分析也往往是世界杯的热门话题之一。从内容设计看，抖音的分组解析包含了专家预测（名嘴大咖）、小组赛程、历史数据（历史对战记录）、热门球员（小组热门球星）和热门动态（相关的足球资讯）五个内容。赛程解读「赛程解读」就是针对单场比赛进行解读，包含比赛前瞻（专业的足球分析）、专家点评（世界杯专家团，含金量高）、网友热议（精选网友的高质量分析）、近 5 场战绩、球队名单、球员 PK（核心球员）、积分榜以及相关的最新足球资讯。从这个栏目的内容策划看，由于缺少足彩竞彩和有深度的内容，显得中规中矩，稍显严谨，欠缺互动。② 比赛日报「比赛日报」就是根据每天结束的比赛生成当天所有比赛的战报，这个页面包含了直播回放、图文战报、视频集锦、赛况详情、技术统计和积分榜等内容，球迷也可以切换不同的比赛查看当场比赛详细的战报。直播回放「直播回放」对于体育赛事来说非常重要，比如像深夜场的比赛，大部分球迷都很难熬夜观看，这个时候只能通过直播回放来观看比赛。抖音的「直播回放」提供了全场录播回放、全场集锦（分长集锦和短集锦）、球星集锦和精彩时刻集锦，可以满足不同用户的观看需求。③ 热议话题当一场比赛结束以后，话题讨论的热度将会达到最高值，比如阿根廷输给沙特的比赛，全网球迷都在心疼梅西。抖音在「热议话题」的内容设计上，不仅有独立的图文专题页还有白岩松的「白说世界杯」短视频栏目，给球迷带来全方位的内容解读。2. 视频节目① DOU 来世界杯「DOU 来世界杯」是抖音官方自制的视频节目，这个节目合计 29 期，每天更新 1 期，内容非常丰富，包含比赛复盘、每日看点、球星球队故事和赛事预测等。从栏目定位看，这个栏目直接对标曾经央视体育最知名的《天下足球》栏目，更是邀请了主持多年《天下足球》的主持人段暄亲自负责，这不仅可以确保内容质量，还可以帮助抖音赢取众多 80、90 后球迷的好感（国内 80%的 80、90 后球迷都是看着《天下足球》长大的），既卖专业，也卖情怀，一举两得。② 宏哥侃球「宏哥侃球」是资深体育解说员刘建宏独家打造的足球直播综艺，合计 12 期。刘建宏和段暄一样，是央视体育另一个王牌节目《足球之夜》的制片人和主持人，甚至是第一位获得“金话筒奖”的体育节目主持人。从内容定位看，这个栏目主要以刘建宏通过邀约足球名宿和名人明星聊天的形式，为球迷带来不同角度的比赛解读和话题讨论。从嘉宾阵容看，不仅邀请了李明、徐亮、徐云龙这些足球大咖，还邀请了苏醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可谓群星熠熠。③ 黄健翔谈「黄健翔谈」是前央视主持人黄健翔的个人脱口秀节目，合计 24 期。从内容定位看，这个栏目主要是黄健翔针对每日比赛进行看点分析，讲述队伍、球员之间的渊源与故事，专业性较强，差异化低。④ 依然范志毅「依然范志毅」是前国足名宿范志毅打造的直播节目。从内容定位看，这个栏目集合了脱口秀、电竞 PK、国际球星挑战等娱乐内容，其次还会邀请 02 年世界杯国足的众多足球大咖一起聊球。范志毅作为前国足名宿，不仅知名度高，近年来在社交媒体平台也以独特的“范式辣评”成为了众多网友崇拜的偶像，话题热度非常高。⑤ 懂球大会「懂球大会」是以段暄、黄健翔和刘建宏为常驻嘉宾，搭配各路懂球大咖赛前或赛后连线的足球直播节目。从内容定位看，这个节目主打前央视解说铁三角的卖点，再邀请其他足球嘉宾围绕每期的热门话题以直播火热开“吵”的形式为球迷们打造一款直播时代的另类足球节目。⑥ 黄家足球班「黄家足球班」 是黄健翔联手德云社打造的直播节目，合计 12 期。从内容定位看，这个节目把足球的专业性稀释，加入了相声的元素，从而拓宽用户人群，让大众都能看得懂，看得进去，感受到足球的乐趣。⑦ 大咖侃球「大咖侃球」由抖音官方出品。从内容定位看，这个节目主要以邀请体育、文化、财经、商业等领域的名人大咖，围绕世界杯开展泛人文社会热点话题讨的论，旨在打造一个专业又具有趣味性、互动性的世界杯抖音脱口秀。不过这个节目话题宽度太广，目标用户不精准。⑧ Hi！足球少年「Hi！足球少年」是世界杯官方赞助商海信独家打造的一款足球少年选秀节目，通过节目选拔足球热忱最突出的 4 名少年奔赴卡塔尔。这个节目邀请了李明、米卢等国足退役名将，还有柳岩、梁汉文这些娱乐明星，从嘉宾阵容看，这个节目以娱乐选秀为主，目前 8 期节目已全部更新结束。三、比赛数据历时 29 天的世界杯，将会进行 64 场比赛，最终决出冠军、MVP 和金靴奖等。随着互联网泛娱乐的发展，相比过往大家主要通过电视观看比赛这样静态的形式，现在的足球比赛不仅拥有丰富的直播形式，而且每个平台都有自己独特的看球文化。1. 直播间抖音的比赛直播间，功能非常丰富，主要包含六个内容，分别是直播、聊天、阵容、赛况、看点和预测。「直播」就像视频弹幕一样，大家可以畅所欲言的一边看球一边聊天。在底部的聊天窗口，点击「分享」后，不仅可以保存本场比赛即时生成的精彩瞬间，还能邀请好友一起观看比赛直播，互动非常强。「聊天」这个功能，充分利用了抖音的社交属性，通过邀请好有，可以像建立群组一样快速创建一个直播聊天群，非常便捷。这个功能就像一个VIP包厢，为用户提供了一个相对私密的空间，满足不同用户的需求。「阵容」是指当场比赛的出场人员统计，包含首发阵容、球员统计和替补球员等信息，点击球员头像以后，可查看球员当场比赛的数据，包含进球、射门、传球成功率等，非常全面。「赛况」是指当场比赛的详细战况，包含各种技术统计，比如控球率、射门数、传球成功率等。「看点」就是把一场比赛的精彩时刻快速生成GIF，不仅可以作为当场比赛的赛况回放，也降低了用户传播的行动成本，吸引用户分享传播。「预测」就是竞彩，球迷可以通过金币预测当场比赛的胜平负、两队总进球数以及其他话题。① 播放器「播放器」的功能非常丰富，除了弹幕、倍速、视频画质和电视投屏这样的常见功能，抖音还支持多种类型的解说和视角方式。比如同一场比赛可以切换不同的主持人（央视主持人、退役运动员还有粤语主持），还支持球星、无障碍字幕、现场原声、战术机位、场馆全景等四种视角方式，观看体验非常丰富。2. 数据作为一项体育运动，比赛数据的统计分析至关重要。球迷需要查询世界杯的详细赛程、积分榜、射手榜、球队和球员的详细数据。① 赛程「赛程」主要为球迷提供世界杯的详细比赛赛程，用户可以直接预约比赛直播。当球迷预约后，抖音会一键生成比赛海报吸引用户传播，设计得非常巧妙。其次抖音的设计团队非常用心，相比其他产品的「赛程」栏目，他们会用一句简短的话来描述每场比赛的结果或前瞻，让「赛程」这个冰冷的栏目加入了温度。② 积分榜「积分榜」主要为球迷们提供 8 个小组的积分排行详细，包含胜平负场次、进失球数和小组积分。③ 晋级图「晋级图」主要为淘汰赛服务，当小组赛结束以后，每个小组的前两名会进入淘汰赛，球迷可以通过这个图俯瞰世界杯的晋级明细路径。④ 射手榜「射手榜」主要针对球员个人，统计的数据非常全面，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。球员主页「球员主页」就是足球运动员的详情落地页，主要包含六个部分，分别是基础资料（姓名、年龄、身高、体重、位置、身价、效力俱乐部等）、精彩集锦、球员单场表现、球员累计数据、球员赛程和球员百科。⑤ 球队榜「球队榜」和「射手榜」一样，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。球队主页「球队主页」就是参赛球队的详情落地页，主要包含六个部分，分别是基础资料（世界排名、总身价、平均年龄、历届最佳成绩等）、精彩集锦、球队单场表现、球队累计数据、球队赛程、热门球星、球队阵容、历史数据和球队百科。3. 互动从 2014 年开始，世界杯就成了一个全民狂欢的盛宴，可谓全民参与，全民娱乐。由于受政策限制，抖音没有足彩版块，而是通过虚拟金币的形式设计了有奖预测和世界杯乐园、足球答人等游戏。其次为了鼓励用户参与到世界杯的盛宴中，抖音还设计了一套世界杯特效，提升用户的参与度。① 有奖预测「有奖预测」其实就是足球竞彩。足球竞彩作为支撑足球运动发展的重要支柱，也是全民世界杯的主要动力之一。由于国家政策等原因，抖音使用了虚拟的金球币用来作为竞彩的筹码，增加娱乐性。「有奖预测」的页面设计比较简单，头部为用户的钱包（金币和红包数量），主视觉为当前比赛的对阵双方，右上角是活动规则和预测记录，右下角是赚金钱币和预测榜。预测的内容主要是比赛的胜平负、总进球数以及其他根据当前比赛设计的竞彩内容，比如梅西会不会进球，比赛会不会出现头球等。整个预测页面的内容，相对而言比较简单，主要以提升用户参与度和用户拉新为目的。当用户确认预测后，抖音设计了一个用户拉新的功能，只要邀请好友助力就可以获得10万金币，如果是一个新用户，则可以获得3倍奖励。钱包「钱包」的内容主要分为三块，头部是数据板，包含金球币数量、现金金额（金球币可以兑换成现金，提现到自己的银行卡）、奖品数量、优惠券数量和抖音成就（类似勋章）；中间是「金球币抽奖」，用户可以使用金球币进行抽奖，奖品包含足球、优惠券等周边商品；底部是「公益版块」，用户可以使用金球币购买足球等方式助力贫困地区的乡村学校捐建足球场。预测榜抖音统计了全站预测榜的球迷，分为全国榜、本地榜和朋友榜。榜单的设计，能增加球迷的攀比心理，提升用户活跃度。金币游戏世界杯乐园「世界杯乐园」是一款足球游戏，玩法比较简单，用户通过体力可以让角色不断前进获取福利。而用户获取体力的方式需要做任务、看比赛以及邀请好友。足球答人「足球答人」是一款问答竞技类型足球游戏。这款游戏设计得非常有创意，三人随机组队，通过答题的形式模拟足球比赛在线 PK。第一个回答正确的用户会有模拟进球的画面，吸引球迷抢答，其次模拟世界杯的赛制，胜利后可以晋级下一轮，最终决出冠军，非常有趣。② 我的主队每个球迷都有自己喜欢的球队，这支球队就称为「主队」，比如一个喜欢阿根廷的球迷就会把阿根廷看作自己的主队。这种带有鲜明爱恨的元素，也是足球这项运动的魅力之一。用户进入「我的主队」以后，需要设置自己的主队，选定后，将会展示主队的赛况、比赛数据和视频集锦。用户如果更换主队，还需要消耗金币，可见抖音产品团队对球迷的研究足够透彻。通过建立「主队」，不仅可以增加用户的黏度，还能建立关系链接，提升用户的留存率。③ 世界杯好物燃情好物「燃情好物」就是向球迷销售世界杯相关的周边商品，比如世界杯吉祥物、钥匙扣、手办、纪念品等物品。吃喝玩乐世界杯独有的文化就是喝着啤酒看比赛，所以「吃喝玩乐」这个版块接入了抖音的「生活服务」，球迷可以在抖音购买夜宵、小吃、奶茶等，非常方便。④ 大家都在拍为了鼓励用户参与到世界杯的狂欢中，抖音为世界杯专门设计了一套视频特效，用户可以选择喜欢的特效录制，提升用户参与度。四、总结思考1. 商业层作为一个短视频平台，抖音为什么舍得花费巨资打造世界杯栏目，通过此次对抖音世界杯专题的拆解，我认为这是一次对针对 80、90 后群体的二次拉新和激活。从抖音重金邀请前央视主持人阵容看，抖音正在尝试通过世界杯这样能激发球迷情怀的载体把那些边缘用户重新拉回来。「DOU 来世界杯」不仅直接对标央视体育曾经最知名的《天下足球》栏目，甚至连主持人都不变，既卖内容，更卖情怀。像笔者这样以前每周只会打开几次抖音的用户，通过此次世界杯的直播，变成了日均使用超过 6 个小时的重度用户，这在以前简直不敢想象。当然，和四年前的优酷等互联网视频平台面临的情况一样，当世界杯硝烟散完以后，抖音又如何通过高质量的内容留住这部分用户群体，是一个问题。2. 内容层在过去，多数用户对抖音的印象是一个内容质量低劣、靠娱乐搞笑博眼球的短视频平台，但从此次世界杯的内容策划看，抖音不仅诚意十足，一口气推出 8 档原创足球直播节目，更是邀请了众多体育名嘴、知名运动员和跨界嘉宾输出高质量的内容。这对广大球迷来说，实在太过瘾了，已经很久没有这样的足球盛宴。而且相比过去传统的图文时代，加入了短视频传播媒介的世界杯，给了亿万球迷全新的看球体验，切换不同的解说风格、直播视角，在抖音直播间邀上几个好友，就可以一边聊天，一边看球，这样的看球体验，太爽了。3. 体验层抖音产品设计团队对世界杯专题的设计，无论是视觉、交互还是产品体验，都非常用心。比如在「赛程」页面，通过一句简短的赛况描述，不仅丰富了设计形式，还传递了设计的温度（其他的体育产品相比，「赛程」页面更像一个冰冷的机器，除了播报数据，没有任何情感）。还有像「足球答人」这样的游戏，完全以模拟世界杯晋级赛制的形式设计，在我首次试玩的时候，就开始为了“进球”进行“抢答”，最终拿下比赛冠军。这样让用户尖叫的设计，真的让人爱不释手。参考文献：当抖音进军世界杯，TikTok 挖了 NBA 墙角终于，我们都能在抖音看世界杯直播了“抖”来世界杯：流量盛筵，意义几何？欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/douyin-world-cup-features
表哥
飞翔的企鹅
在路上
张大湿
落霞与孤鹜
