作品集 几个 能力 每次做作品集，第一步准备大纲时，我就会开始纠结内容顺序。一般来说，大家的第一反应都是根据工作流程来梳理，例如从单个项目来看：需求分析竞品调研用户调研设计思路线框图高保真方案方案验证总结反思最开始的时候，我也是这么梳理的。但是等到做完后，就会发现这种按部就班梳理出的作品集，看起来平平无奇，重点不突出！那么什么才算是重点，又如何突出呢？更多作品集设计方法：年后想找工作？聊聊从小厂到大公司的作品集逆袭策略上次有观众老爷反馈这种对话的分享形式比较有趣，于是我掏出了盖泡面的手绘板子（8 年前买的，居然还能用）好，我就直接更新一版漫画升级版的设计分享，希望你给我点赞 ，不要不识好歹｀Д´本篇适用于设计新人，找工作中的小伙伴，最重要就是正在摸鱼的你。阅读文章 > 作品集审阅者认为什么才是重点？我们设身处地地想想，如果你来负责招聘，会是个什么情况？工作那么忙，还要抽空看几十上百份作品集，想想就不耐烦。所以看作品集的时候，多半会很讲究效率，能够一眼看出差异的，就不会看两眼。每看完份作品集，都最好在心中整理出几个要点：XX 能力不错，XX 又欠缺，XX 不清楚……这样就能快速确定是否匹配当前的岗位空缺了。几十页的作品集看下来，审阅者其实就是在寻找你的能力亮点和缺点。当然，缺点是需要修饰遮掩的，所以突出能力亮点就成了作品集的核心目标。这就是为什么不建议按照工作顺序整理作品集了，这样很难确保你的能力亮点被看到。小学语文老师就告诉我们，即便是日记也要主题鲜明，有起承转折，不能从起床开始到上床结束，那就跟流水账一样。作品集该用什么顺序来整理？我把双钻模型改了一下，用在这里刚刚好：其实作品集里的一个项目，就可以用双钻模型的思路去整理。如何用好设计双钻模型？来看 vivo 浏览器的实战案例！前言刚入职时，有本书叫《方寸指尖》对我影响比较大，主要讲述如何做好用户体验设计。阅读文章 > 把之前的 8 个步骤可以拆开成几个章节：发现主要问题需求分析竞品调研用户调研发现解决方案设计思路线框图高保真方案验证与总结方案验证总结反思这样你会发现，这三个章节都有了各自的明确目标：一、发现主要问题所有的调研分析，目的都是为了发现几个主要的问题。首先，不管是什么调研分析，完成后一定要发现问题，否则就白做了，没达到目的。其次，要发现的是几个问题，不是一个问题，也不是一堆问题！因为如果问题太多，就无法梳理出主题思路，还是一盘散沙。如果问题太多一定要缩减，要么挑选几个重点问题，要么把多个合并成几个有代表性的分类。数量上可以根据米勒法则，选取 3 - 7 个，避免造成认知负担。用超多案例，帮你认识无处不在的「米勒定律」今天给大家带来一个无处不在的定律，虽然它很常见，但它很安静。阅读文章 > 如果能做到这些，已经能超过 80% 的设计师了，因为我看过的大部分作品集，调研分析后，要么总结不出问题，要么就总结出一大堆问题没个重点。二、发现解决方案作品集上展示设计稿，一定不是为了展示你熬夜赶项目的劳苦功高，而是为了展示你的思路清晰的解决方案。大部分设计师的作品集，只是简单地按照页面顺序贴方案，方便附上一些可有可无的文字描述（这里是 Banner 加了个圆角、这里是金刚区用的是主题色…），完全看不出是解决方案！解决方案怎么展示？上一章节「发现主要问题」已经发现了几个主要问题，首先可以为它们就能够找到出设计思路。一个问题可能对应多种设计思路，需要从中分析找出最合适的设计策略，这就是文字解决方案。把这些文字解决方案图像化，就成了草图或线框图，也可以直接上高保真方案（视觉稿）。对于 UX 设计师来说，我建议直接用高保真方案，因为这样比较好理解。对于交互设计师来说，用高保真方案就不够真实，建议用精致一点的线框图/交互稿。其实完全没有必要把整个设计步骤都摆上去，一来是太多了审阅者看不下去，二是审阅者只对你的能力亮点感兴趣，而这些步骤并不能展示出能力。把解决方案展示清晰后，可以考虑把所有的稿件都摆上去晒一晒，但装饰大于功能，审阅者也不会细看。三、验证与总结这一章不是必要的，很多作品集没有也 OK。可以是数据、用户反馈或任何其它证据，主要是为了说明前两章做得不错，说明你的能力可以验证。同时也表达一下你的个人思考，体现真诚的态度。总结今天讲的东西，难度可能比较高，毕竟我看过的大部分作品集都做不到。但如果你真的能够理解并运用，想必作品集能够更上一层台阶，以同样的能力找到更好的工作机会。当然，如果你发现自己连这 8 个步骤都还没有做齐全，那还是先去把基本功做好再说吧。本篇来源：优设网原文地址：https://www.uisdc.com/works-collection-design
作业 老师 产品 导语： “安全感”一直是互联网领域经常探讨的话题。通过合理的设计，创造令人信服的体验，是确保产品成功的基石。对于教育产品来说，由于用户和使用场景的特殊性，安全感更是用户重要的核心诉求。笔者作为腾讯智慧校园-作业码的主设计师，参与了一系列关于教育产品的调研和设计探索，尝试总结了教育产品中有关安全感的设计经验和策略，希望为教育领域补充一些行业视角。更多安全感设计方法：研究数十个热门 APP后，我来教你如何「提高用户安全感」首先本篇文章不讨论任何关于产品运营策略和技术领域的内容，主要以案例为主，分享为用户营造安全感的体验设计思考，希望对你有帮助。阅读文章 > 一、什么是安全感首先了解一下什么是安全感：通常来讲，安全感属于个人内在的精神需求，是个体对可能出现的对身心危害的感知，或者是处事时的有力/无力感。安全感作为一项重要的心理学研究领域课题，最被人熟知的是亚伯拉罕马斯洛提出的需求层次理论模型，他将人类需求分为五个层次：生理需求、安全需求、社交需求、尊重需求和自我实现的需求，其中安全需求指人对安全、秩序、稳定及免除恐惧、威胁与痛苦的需求。那么教育产品的安全感是如何塑造的呢？二、如何提升教育产品的安全感随着教育领域快速往数字化、智能化发展，线上作业场景、课堂练习等新型教学方式逐渐被熟知和广泛运用，来辅助老师教学。为了让“安全感”更聚焦，笔者从可控制性、可信赖、可理解这几个方面着手，去分析如何打造教育产品的安全感。可控制，指的是让用户在操作过程中，感到对产品的可控性；可信赖，指的是学生对产品营造的氛围，在产生情感化信任，和老师对产品的专业度产生的信任；可理解，则指用户对产品界面的表达容易理解。1. 可控制为了让用户感受到可控制的操作体验，应提供信息透明化、即时性、可挽回、反馈清晰的交互体验。① 信息透明化教育产品通常区分老师端和学生端。因网络题目类型多样性，当老师布置作业时，会对布置新型作业类型产生迟疑。在设计中，直接给老师提供跳转到学生端的入口，两端信息透明化，则可以增加老师对产品的可操控感。「作业码老师」「一起作业老师」- 题目试做功能，老师可直接跳转到学生做题页面。② 信息即时性信息的即时性也是线上教育的一大优势。传统线下流程：从老师布置作业 - 学生提交作业 - 老师批改作业 - 学生看到成绩并修改作业 - 老师再次检查，整个流程时间跨度较长。改为线上流程后，系统直接批阅并给出结果和解析，不需老师再费时费力批阅，整个流程时间大大缩短。「作业码学生」- 提交作业场景，学生提交作业后，立即看到成绩和题目解析。③ 信息可挽回教育产品虽不像金融产品，发生错误就会造成巨大经济损失，但老师布置作业出错时，若能即时撤回重新布置或修改，则会让老师更放心去使用。对学生来说，交上去的作业在批改之前，仍然可以修改，这也是线上作业的一大亮点。「一起作业老师」- 撤回布置作业；「一起作业学生」- 修改已提交作业。④ 信息反馈清晰向用户反馈产品所处状态和进程，减少因信息缺失而产生的恐慌，也可提升用户的可控感。「作业码老师」- 布置作业结果反馈；「作业码学生」提交作业结果反馈。2. 可信赖让用户产生可信赖的感觉，需要让学生在心理上信赖产品营造的氛围，以及让老师信赖产品的专业度。① 氛围可信赖情感链接腾讯智慧校园和小盒系列产品都设计了班级“互动圈”，类似微信的朋友圈，让教育产品有了社交属性，建立了学生、家长、老师之间的联系，通过分享班级相关的内容和互动点赞回复，让用户产生对产品的依赖性，从而产生对产品的情感链接。「腾讯智慧校园」- 互动圈场景；「小盒老师」- 家校互动场景。情感化文案教育心理学发现，激励教育相比于打压教育更能给学生建立健康的身心和有安全感的学习氛围。同时政策方面，也要求学校多做“正向鼓励”， 例如不能透露具体的学生成绩排名，减少学生压力；不能出现带有强烈负面意味的插图、文案、或图示等。在作业码的设计中，会根据学生作业提交情况给出不同的激励文案。例如未完成时，文案提醒“加油！就快完成今天的作业了”；若没有交作业，也只是温和的提醒“快来补教作业吧”。「作业码学生」- 接收作业场景。情感化插图在作业码的设计中，学生收到作业结果后，不同的成绩会有不同的插图表现，若是好成绩则是正向鼓励插图；若得了不好的成绩，用摸摸头的插画表示鼓励。「作业码学生」- 接收成绩场景。模范鼓励在作业码设计中，并不展示班级排名，但是学生可以看到优秀作业，这对得优秀的学生是一种鼓励，没得优的学生也不会太沮丧，从而激发学习的动力。「作业码老师」「作业码学生」- 优秀作业展示。② 专业度可信赖在产品设计时如何来传达产品的专业度呢，我会从资源的专业度和数据的专业度两个方面来分析。资源专业度 - 从众心里在保证产品质量的前提下，为减少用户的决策成本，让用户对产品快速产生认同感，可利用设计将课程所承载的价值进行量化，使其价值更直观和易于理解，方法之一就是依据从众心理，透露使用人数。「一起作业老师」「小盒老师」- 从众推荐。资源专业度 - 资源权威很多产品会展示和突出品牌，来提升用户信任感，教育产品也不例外。“一起作业”利用品牌 cctv 背书，让用户很容易建立起对品牌的信任感。对于具体的课程和老师，也通过获奖经历、教师职级等来表示资源来源的权威性。「一起作业老师」- 品牌背书。数据专业度数据化是从线下转变到线上的最大亮点。以往老师只能手动记录或感性了解学生学习情况，这很依赖于老师是否负责、教学水平高低、所教学生人数多少等因素，由此带来了很多不确定性。数据给老师提供了更准确的学生学情，从而可帮助老师调整教学计划，提高教学水平，带来专业上的安全感。为了让老师更好的理解数据，一般采用数据可视化的方法将某段时间内的数据进行呈现。小盒系列产品设计中，在学生端可查看由数据生成的个人知识掌握情况图谱；在老师端可自动生成班级学情报告，内容覆盖正确率、学情该要、平均耗时、知识点掌握、最优同学等方面，给老师一个全面的学情分析。「小盒学生」「小盒老师」- 数据可视化。3. 可理解当用户对界面、操作可以理解时，会增强用户使用该产品的信心。① 与其他流行的互联网产品体验的一致性老师在布置作业过程中，会布置多种题目题型，每种题目类型选择多个题目，添加作业题目的流程并不是线性流程。那么如何让老师很好的理解这个流程，在这里我们借鉴了大家熟知的电商产品“购物车”的概念，可以让老师将多种题型自由选择加入“购物车”中，最后进行下单结账。「作业码老师」- 运用电商产品中常见“购物车”概念展示选择题目。② 与线下场景保持一致性在作业码的设计中，参考了学生线下常用的作业本的图案用作题目背景：如英语是四线格，数学和语文也是相应的练习本背景，让学生在更熟悉的场景下做题，提升安全感。「作业码学生」- 模拟线下练习册背景图。③ 状态区分明显用不同的形式(如颜色、按钮、插图等)表示不同的状态，让用户更容易聚焦视觉重点，区分不同状态，提升用户使用产品的信心。「作业码学生」- 收到作业状态区分：未开始做、做了一半、未完成时间截止。三、结语安全感是教育产品设计中重要的一环，是用户是否信任产品的决定性因素之一。通过打造产品安全感，可以让老师和学生更好的掌握操作流程，对产品产生信赖，更好的理解产品，从而增强用户使用产品的信心，提高用户满意度；企业也可以更好的满足政策需求，提升公司口碑信誉。教育产品中的设计策略，也同样可以应用到不同类型的产品中。可控制、可信赖和可理解作为设计通用原则，设计师在日常工作中也可以进行探索和尝试，运用设计原则去满足真正的用户需求，从而建立用户安全感。欢迎关注作者「腾讯CDC体验设计」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/education-product-security
世界观 角色 英雄 一、你可能遇到过这样的问题从事游戏世界观设计的过程中，有两个问题曾让我感到困扰。第一个问题，关于世界观工作本身。什么样的世界观才是好的世界观？世界观有没有评判标准，还是就是一个很主观的事情？第二个问题，关于世界观的传达。似乎我们辛辛苦苦做的世界观只有我们自己当个宝贝。玩家疯狂跳剧情也就罢了，项目组的同学们也并不想看那些冗长的设定……也许问题的根源在于，我们是否真正意识到了：我们在做的是游戏的世界观。听起来好像是一句废话，不过别急，我们一个一个问题来看。问题一：什么是好的世界观？说到好的世界观，我们能想到很多例子。曾经在和朋友交流中，提到过冰与火之歌的世界观很精彩，细节非常详实、给人一种历史的厚重感。托尔金为魔戒的中土世界创制了宏大的编年史，甚至编写了数套语言。他会认为，这样丰富、详实、逻辑严密的世界观是好的世界观。但也有很多朋友不太一样。例如——哈利波特，它有着天马行空的想象力，却又不失日常生活的细腻温情，但要说逻辑严密就大可不必了。还有更夸张的Rick&Morty，每一集都是让人大跌眼镜的展开。他们会认为，富有想象力、不断挑战认知边界才是好的世界观。也有人会喜欢充满了文化符号和背景隐喻，比如 EVA、魂系游戏，其内容建立在许多神话学和符号学的基础上，吸引了很多观众和玩家的考据和诠释。这样充满知识和考据乐趣的世界观也让许多人爱不释手。如果从这个角度思考，很容易变成各说各话，或者都喜欢都很好，并无法得出答案。其实问题的关键在于，我们很少会直接去评判世界观，世界观是手段而不是目的。真正带给我们体验的是世界观的载体：小说、动漫、电影、游戏，而世界观只是为这个体验服务的一部分。如果说好的世界观有一个共同点，即在于：他们都与作品的气质风格契合，符合作品想要传达的情绪。能否通过作品有效传达，才是评判世界观好坏的标准。常见世界观构建思路：故事和视觉既然世界观是作品的一部分，那么其构建思路也会基于作品属性而变化。早期的幻想作品以文学类为主，主要是科幻、奇幻小说。因此在构建世界观时，如何为故事矛盾服务就很关键。例如沙丘中各方势力的矛盾，乃至银河系的权力结构，很大程度上都是为了推进故事而进行的设计。类似霍尔兹曼护盾等复杂的设定，也是为了在宇宙背景下讲述一个中世纪家族权力斗争的故事而添加的。即使是从一个想法、点子出发的小说，最终也需要能够落在故事上，通过故事传达，这个世界观才生效。以《三体》为例，如果直接把黑暗森林理论摊开在你面前，你可能也会觉得有意思，但可能就没有那么牛逼了。因为三句话就说完了，能给你留下多深的印象呢？但是大刘在三体里面反复铺陈，把这个设定延展成故事后，感受就完全不一样了。罗辑在墓碑前向三体宣战的那一段情节，是我在所有幻想作品中看到过最燃的之一。正是这段情节将黑暗森林谜题的冲击力放大到了极致。随着科技的发展，影视类的传播媒介快速进步，视觉的重要性也不断增加。在商业化的影视作品中，比起故事，视觉带给人的冲击力更加直接也更加震撼，这也是影视相比于传统媒介的优势。因此，这一时期的很多世界观都会从视觉层面进行构建。例如环太平洋、阿凡达等。阿凡达中很多动植物的设计和故事并没有直接关联，更多是呈现潘多拉星球的幻想生态，配合当时独一无二的 3D 效果给观众创造视觉奇观。由于媒介性质的原因，并不是所有时候视觉出发的世界观设定都是可以和故事配合到位的，或者重心放在视觉效果上而对故事并不在意。于是我们也经常会在商业电影中看到“世界观很棒但是故事不行”这一类的评价。当然，从故事出发的构建世界观的幻想类电影也有不少，如诺兰的大部分作品都是从故事出发的，首先是基于讲故事的需要构建世界观，然后再考虑如何在视觉上做出特色。时间穿越题材的大部分作品也如此，基于故事去构建时间循环的规则。当同一个作品被小说和影视分别呈现的时候，就会很有趣。例如特德姜的《你一生的故事》与翻拍电影《降临》。原作是一个短篇小说，基于语言与人类意识为核心进行的世界观概念，来讲述女主角和女儿之间的故事。这样的世界观概念本身是比较难视觉化的，故事本身也比较难拆解成好莱坞的戏剧结构。因此电影在改变时将重点放在了外星人和外星飞船的视觉表达上，也是可以理解的，但整个故事就显得平庸了许多。这是两种不同世界观构建思路的差异，造成的水土不服。也许是出于视觉冲击力的考虑，八只桶被设计成了章鱼，也让很多原作粉感觉不满问题二：如何构建游戏世界观那么，我们构建游戏世界观的时候，应该从故事出发，还是视觉出发呢？毫无疑问，对游戏来说两者都很重要，但是以何者为主构建世界观的思路是不一样的，产生的结果也会不同。早期的单机 RPG，无论是 JRPG 还是国产三剑，都是以故事为核心来构建的。讲故事都是游戏本身的核心目的，玩法反而是居于其次的填充。到了 FF14 和最新的异度之刃 3，你仍然能很明显的感受到这样的制作思路。玩法推进一段时间，然后过一段剧情，然后继续玩法。这样设计的问题在于割裂感，剧情和玩法感觉是彼此独立的两个部分，游戏的核心是剧情，而玩法则成了填充剧情之间的部分。而随着画面和性能提升，游戏的细节越来越丰富真实、也给世界观传递提供了更多可能性和更高要求，这就使得美术概念在世界观设定中的重要性开始提升。早期像素时代很多设定其实不需要多细致，主要靠玩家脑补。但现在则是活生生的呈现在玩家面前。于是，游戏美术不再是设定集里玩家才能看到的、辅助想象的素材，而是成为了看得见摸得着的，游戏重要的一部分。最明显的例子就是《FF7》和《FF7RE》的对比了，除了高清化老婆以外，世界的很多细节也得到了呈现。这么看来，从故事或者视觉出发，似乎都有道理。但，我们好像漏掉了什么……小说以文字为主体，自然会选择故事作为世界观构建的核心。而影视区别于文学的关键即在于可视化，视觉是它的特色，也成了世界观构建的关键。正如我们前面所说，世界观是为产品服务的，是产品体验的一部分，这是好的世界观的评判标准。那么，游戏的体验是什么呢？是互动性和可玩性。具体形式可以千差万别，射击、动作格斗、体育竞技、剧情选择、数值养成，无论如何变化，都脱离不开交互和反馈，这是游戏的核心体验。二、从核心体验出发构建世界观世界观设计的出发点，是游戏的核心体验。围绕核心体验的内容要素，是世界观构建的支柱。之所以应该这么做，是因为：对大部分游戏而言，玩家是来玩游戏，而不是看剧情的。玩家在游戏中追求的、关注的、讨论的，是核心体验。围绕这部分体验去设计世界观、作为世界观表达的重心，自然也能更好地传达给玩家。而如果世界观是独立的一部分，和核心体验脱离，那对于大部分玩家来说相当于不存在，也无怪玩家会不感兴趣。当然，这并不是说美术和故事不重要，游戏世界观最终的理想呈现形态必然是美术、剧情、玩法的三位一体。但都重要不是方法，而是原则或者目标。方法意味着我们要从中理出逻辑和层次，才能形成思路。我们也常常能看到一些世界观制作的方法论是“列清单”式的，实际上这样的所谓方法论并不能给我们的实际工作提供帮助。我们大部分同学制作的游戏是非单机、长线运营的，这一点自不必说。而即使是单机、故事核心的游戏，这几年的发展趋势也是更加注重游戏体验的整体和沉浸，避免打断感。例如巫师 3、荒野大镖客 2 都是这一方面的佼佼者。故事与玩法在大世界中和谐统一，而不是彼此割裂。而世界观则需要通过整个游戏大世界中的各种元素来传达。还有一个很容易被我们忽视的群体——项目组的同事们。我们想要通过游戏去呈现世界观，需要大家的支持；项目体量越大，这一点难度越高，但也越重要。对于原创IP的世界观来说，一般的做法可能是抛出一个文档、让大家自己读，好一点的可能会进行宣讲。但这样的效果往往都是比较一般的。因为从教育学来说，你向对方传达一个新概念时，从已知到未知才是方便理解的。而如果我们扔一个世界观文档给大家，就是从未知到未知。游戏的核心体验，对于大部分同学都是已知的，从这一部分出发去进行传达，对于项目组的同学理解世界观会更有帮助。总结一下：文章开始提出了两个问题，而答案也很简单，既然世界观是游戏的一部分，我们就应该从游戏的核心体验出发，去建构世界观。传统的从美术或故事出发的世界观建构的问题在于，对于大部分游戏来说距离游戏的核心体验较远，最终导致世界观和核心体验割裂分离，最后不得不强加或妥协。这也是我们工作中会遇到的问题的根源。三、世界观构建的步骤围绕游戏核心体验构建世界观，分为以下几步：1. 找到支柱问自己几个问题：玩家为什么来玩这个游戏？玩家在游戏中最关注的元素是什么？玩家在这个过程中是如何获得乐趣的？这就是游戏的支柱。2. 梳理框架围绕支柱整理形成世界观的核心观念框架，有了整体的概念和方向。3. 强化支柱无论支柱是什么，他才是传达给玩家的终端，因此他本身是否足够精彩，决定了世界观的上限。4. 丰富概念围绕支柱和世界观框架进行概念延伸，形成丰富的概念集合。5. 整合串联概念整合、体系化，形成相对完整的世界观体系。这里只是简单列了一下构建的思路和每一步的要点，但具体怎么做、以及为什么要这么做，我想结合例子来进行展开。首先我们会聚焦在一组特定类型的游戏，即以角色为体验核心的游戏。这类游戏数量很庞大，卡牌养成、卡牌对战、有角色的多人竞技（LOL、守望先锋）等，都在此列。同时角色也是天然集合了玩法、故事和美术的载体，选择角色作为核心体验支柱是相对容易完成世界观构建的。四、以角色为支柱的世界观设计：英雄联盟英雄联盟的世界观并不是游戏上线就有的，而是先上车后补票，在游戏上线后经历了漫长的过程构建起来的。从一个注重玩法、几乎没有世界观内容的 IP，发展成了一套系统完整的世界观，并成功衍生出了《双城之战》这样一个破圈级别的动画作品。之所以选择英雄联盟作为详细介绍世界观构建思路的例子，是因为相比于一些研发期就完成世界观构建的游戏，更方便我们从外部观察和分析其世界观设计过程，拆分和总结也更加清晰。1. 找到支柱在进行 IP 和世界观构建初期，英雄联盟就很明确了游戏体验的支柱。在 MOBA 类型游戏中，英雄是玩家游玩操作的对象，也是游戏玩法丰富性的来源。新英雄的推出往往会成为玩家讨论和关注的热点，也是玩家跟随游戏长期游玩的动力。2. 梳理框架这一部分可能包括以下的过程：对现有英雄及玩家印象进行调研，确定英雄核心气质和性格方向。对英雄进行归类：根据画风、文化符号、种族形象等，将英雄划分大类，为此后不同大区域奠定基础。对各个分类进行进一步整理，形成初步的概念框架。回到 2009 年，英雄联盟初始有 19 个英雄。到 2009 年底增加到了 42 个，到 2010 年底增加到了 66 个。从英雄联盟的初始英雄来看，当时应该没有世界观体系，而是以玩法为中心设计，从形象角度尽量覆盖不同的角色类型。到 2009 年底，英雄联盟也延续了这样的英雄设计思路，大量更新了非人类的不同体型的英雄，扩展英雄剪影的差异度。这一时期上线的英雄包括冰晶凤凰、龙龟、阿木木、科加斯、布里茨等。从 2009 年下半年起到 2010 年，英雄联盟再次回到了以人类英雄为主的设计方向，并且开始在不同文化背景上进行拓展。标志性的是 2010 年盖伦上线，他的称号中带入了世界观概念——德玛西亚。德玛西亚作为英雄联盟早期的世界观概念，至今也仍然保持着强大的影响力。对英雄进行分类是一个不断尝试的过程，在多种不同的标准和维度中找到一个最合适的。例如，种族是一个常见的分类方法，从英雄联盟在 2009 年一段时间内的更新，以及早期对约德尔人的处理方式来看，这个选项是被考虑过的。但对以角色为支柱的游戏来说，种族并不是合适的方向，因为无论是 Moba 还是卡牌都会追求角色的差异化，而英雄联盟早期在这一点上的追求是很极致的。例如有了一个牛头人阿利斯塔，如果再出一个相同种族的就会让玩家有些审美疲劳，即使做出差异数量也不可能太多。最终英雄联盟选择的方向是文化背景，根据角色所呈现的文化符号进行分类。我们来尝试还原一下英雄联盟早期对英雄分类的过程：大家不用纠结表格中的具体分类结果，这个示意主要是为了说明以文化背景进行英雄分层的可行性。2010 年左右英雄联盟早期对世界观概念进行收拢时，很可能就是基于这样的思路。因为只统计到了 2011 年初，有几个体系英雄还比较少，例如死亡/冥界体系后来形成了暗影岛，而原始部落体系则是如今的以绪塔尔。而英雄较多的也进行了进一步细分，如欧洲古典、中世纪，被拆成了秩序和战争两个体系，分别对应德玛西亚和诺克萨斯。具体对应关系如下：因为我们是站在结果上反推看起来很容易，我想当英雄联盟开始构建世界观时绝不想我说的那么轻松，而是有大量需要不断试错、推倒重来，十分纠结和挣扎的过程，最后才形成了世界观的大致框架。3. 强化支柱在围绕支柱丰富概念之前，英雄联盟做了很关键的一步，是强化这些角色的设定。这一点在上文英雄联盟 IP 的分享中也有重点提到。既然角色将要作为世界观的支柱，这个支柱就得足够强壮，能够撑得起世界观。同时也得足够高大，因为他们决定了世界观的上限。这里的强化不是故事上的丰富，而是一种情绪符号的强化。重要的不是这个英雄的故事有多完整多合理，而在于让英雄本身足够具有冲击力。或者简而言之，以角色为支柱的世界观，需要以“角色自己就能成为 IP”为目标来进行打造，重点在于强化每个角色所具有的鲜明的符号意义和情绪价值。例如金克斯，在 2013 年推出就表现出了非常符号化有张力的反英雄形象，但是当时的 PV 是几乎完全没有叙事的，而是着力渲染这个角色的个性和张力。后续很长时间，官方也没有针对金克斯的故事进行进一步的补全，但金克斯在 Cos 和同人圈始终拥有着较高的人气。而故事的补完则等到了近十年后的双城之战。金克斯毕竟是 13 年的英雄，她已经是英雄联盟有了比较明确 IP 思路之后的产物了。而对于更早期的一些英雄，英雄联盟则是对其中一些相对平庸、缺乏特点的英雄，通过重做的方式进行从玩法机制到世界观、美术立绘、故事的全面更新。从这些英雄的前后对比，我们更容易看出英雄联盟 IP 在强化角色支柱中的设计思路。船长是一个例子，2009 年上线的船长是 LOL 最早的一批英雄之一，但是我们可以看到这个船长的立绘是相当普通的，提到大航海时代的船长，第一印象可能就是这个。没有抓人眼球的设计点也没有幻想元素。而船长的重做是英雄联盟世界观重构之后的初出茅庐，当时配合厄运小姐、卡牌、格雷福斯等几个角色的故事，通过焰浪之潮的大版本运营活动，对比尔吉沃特的世界观进行了全面翻新。新版的普朗克强化了阴险狠毒的气质，符合海洋之灾这个名号。故事上也强化了普朗克作为反派的凶残狠毒一面。而此前的船长并没有很鲜明的善恶指向。把一只手换成了机械手套，既符合焰浪之潮的故事，也增加了幻想度。这里需要说明的是，并不是老版的英雄联盟英雄设计的不好，而是不同时期有不同的设计方式。世界观是有成本的，除了项目的成本，还必然会提升玩家的认知成本。在早期以玩法为中心，需要大量铺开、大量引入玩家的情况下，一个贴合固有印象的形象会最大程度降低认知成本，进而降低玩家的理解门槛。而后期转向更稳定和长线的运营，则需要提升内容深度。所以这其实是一个产品层面的问题。随着世界观的逐渐完善，更多角色的设定也在世界观的反推和整合下进行了重新设计。例如莫德凯撒，从早期语焉不详的故事，到如今英雄联盟世界观的重要反派，其形象也相应进行了迭代。瑞兹则是承载了英雄联盟宇宙的核心概念——世界符文，他的英雄称号也从流浪法师修改为了符文法师。斯维因成为了诺克萨斯统领，是诺克萨斯的矛盾核心，而他的手臂也换成了魔法手来增加幻想度。这一步是在做世界观构建的时候很容易忽略掉的。以角色为支柱的世界观，角色首先需要足够出彩，才有下一步世界观传达的可能性。如果角色本身就平平无奇，世界观也很容易流于平庸。4. 丰富概念现在我们有了一堆各具特色的英雄，同时也有了一个世界观框架，但这还不够，距离世界观体系形成其实还差很远。英雄联盟各大势力的基础结构在 2010 年左右应该就已经形成了，但直到 2017 年才推出了宇宙站，正式确立了比较稳定的世界观体系。足以见得其中工作的难度。到了这一步，其实谁先谁后都没有那么重要，可以从世界观框架中推演出概念，也可以先设定英雄然后从英雄设定中申发出概念。但重要的是，两者需要结合。在从世界观框架构思概念时，要考虑如何将概念落到英雄上，是否有可行性。在角色支柱的游戏中，脱离角色而存在的世界观概念越少越好。而英雄也需要考虑能够承载哪些世界观概念，如果大量英雄游离在世界观概念体系之外，也会导致世界观传达的混乱。以德玛西亚为例，区域的概念框架为欧洲中世纪、王国、秩序，禁魔与魔法之间的矛盾为核心矛盾。因此区域的核心概念一方面是他的基本制度结构，包括君主制、贵族制、军队；另一方面是他的宗教性和道德审判对于多样性的迫害。这一组二元对立也体现在德玛西亚前史传说，即莫甘娜与凯尔的矛盾上。按照官方设定集《符文之地的故事》中提供的德玛西亚相关概念，大部分都可以通过这些英雄完成传达，核心概念中只有“搜魔人”是没有对应英雄承载的，也许可以期待未来有相关英雄。而英雄迭代也可以看到这些概念通过英雄传达的转变，例如赵信的原画迭代，从更具东方特色的形象转变为了德玛西亚标志性的白色装束。而加里奥则几乎算是换了个英雄，从外观都故事都重做了，如今承载了德玛西亚立国之本——禁魔石这个概念，成为德玛西亚概念体系中很重要的一环。老版的加里奥叫哨兵之殇，背景故事也完全重做了当然，如果两者真的出现不可兼得的情况，角色是更优先的，因为角色是游戏的核心体验及玩法的载体。对于一部分世界观暂时没法处理的基于角色的概念，也没必要非得统合进来，可以先放在一边。随着角色的增多，世界观概念可能也需要继续扩充，到时候也许就会出现将这些角色所承载的概念纳入到体系中的契机。例如千珏，狼和羊的核心理念无论是美术和故事都很有意思，但作为死亡主题的角色，其设计与暗影岛的死亡概念角色差异很大。于是从 2015 年上线至今已过去 7 年，千珏也仍然没有被纳入到体系中，故事相对独立，保持着暗黑童话故事的风格。5. 整合延伸经过前面 4 步工作，世界观的大部分内容都已经具备，但是将其整合成一个完整的体系仍需要不少工作。从空间上来说，各方势力的地理位置以及由此构建的地缘矛盾体系。这一部分很重要，前面的思考大多建立在各个区域分开构建的思路上，而现在则需要让他们成为一个整体。这里就需要构建他们之间的矛盾。英雄联盟使用了一个相对讨巧的方法，他们让军国主义体制的诺克萨斯四处入侵，通过战争将整个体系串联在一起。符文之地各区域的矛盾构成：这些矛盾大多都是由英雄作为载体来进行传达的，毕竟英雄是构成区域概念的核心载体，自然也就成为了矛盾的核心。例如德玛西亚嘉文四世、盖伦等对抗塞拉斯，以及目前处于漩涡中心的拉克丝；诺克萨斯斯维因一派对抗乐芙兰一派；比尔吉沃特船长归来找莎拉复仇，以及与崔斯特、格雷福斯的矛盾……等等。同时，英雄联盟也添加了几个可能存在的世界性矛盾威胁，预计将会成为未来推进世界的大版本事件。例如最近破败战争赛年中，光明哨兵对抗佛耶戈，就是暗影岛黑雾形成了世界性威胁。未来可能形成这个级别威胁的还有：莫德凯撒的亡灵军团、阿兹尔复兴恕瑞玛、暗裔、虚空等。此外，世界符文、星灵、龙王等高级别的存在，也随时可以激活，成为世界性矛盾的来源。从时间上的分配串联更为重要，这里有两个关键目标：需要让英雄能够覆盖整个世界观前史的时间段。换言之，如果我们把“时代”也当做概念的话，那么这个概念，也是需要英雄来承载的。需要让过去时代的英雄，能够有在这个时代复现的可能性，并且其中的逻辑要明确传达给玩家。因为，“当代”必然是后续 IP 故事发生的主舞台，过去的英雄彻底退场，也是对于英雄资源的一种浪费。于是，英雄联盟的前史时期，也是围绕英雄进行构建的。而为了实现英雄的重现，英雄联盟也采用了多种不同的机制。有本身就寿命很长的。大部分是神明，如弗雷尔卓德的奥恩、沃利贝尔，如铸星龙王、星灵及获得星灵赐福的人类。当然还有约德尔人，他们寿命很长，在每个势力都是祖宗级的角色。有些是因为特殊的机制而获得了更长的寿命，例如掌控了冥界的莫德凯撒，暗影岛被佛耶戈变成亡魂的一批角色，掌握了暗裔的法术而不会死去的弗拉基米尔等。有些是在历史上被消灭，但因为某些原因在这个时代重新复活的。最有名的当然是阿兹尔，因为希维尔的血脉而被重新唤醒，连带着放出来的还有泽拉斯和雷克顿。而暗裔被封印在了各种武器中，现在又因为各种机缘巧合重出江湖。还有丽桑卓在臻冰里面封冻了一批，虽然现在只出来一只纳尔，以后想要从这里面抠出几个英雄也是问题不大的，比如赛瑞尔达和阿瓦罗萨。诺克萨斯和祖安也用各种科技复活了一批生活在过去的角色，虽然变得奇形怪状，但毕竟也贯穿了不同的时代。通过英雄在时间上的排列和重现的设计，英雄联盟使得自己的整个世界观都可以围绕角色支柱展开，也通过英雄角色完成了世界观体系的完整构建。当然，文章为了讲解方便把这一步拆开来单独说，其实整个世界观的串联整合工作会和前面几步工作有较多重叠，可能从第二步、第三步就已经开始思考如何进行世界观概念的整合。不然真的等前面各个区域都已经设计完成后再考虑串联组合，恐怕难度也会增加不少。总结一下这一部分我们对英雄联盟 IP 设计的过程和思路进行了拆解，借此说明了我们围绕游戏核心体验支柱的世界观设计方法。由于近年来对游戏内容层面的重视度逐渐提升，很多游戏都面临着英雄联盟类似的情况，早期以玩法为核心，大获成功以后才转而丰富世界观内容。对于这些游戏来说英雄联盟的整个设计思路都是可以重点参考的。但对于很多项目处于研发期的同学，固然也可以从中获得不少经验，毕竟还是有些不同。我们接下来会从这个角度分析一下正向的世界观制作是如何进行的。五、研发期世界观构建思路运用：原神上文中对于世界观构建各步骤要做什么的拆分已经比较清楚，这部分会尽量精简对于这些内容的重复，着重于分析差异点。之所以选择原神，是因为原神也是一款以角色为核心体验（之一）的游戏，与英雄联盟两相比较，会更加便于大家理解。原神作为一款大世界游戏，世界观在研发期就已经构建完毕，比较完整了。关于它的构建思路，因为缺少内部信息，更多是我们通过游戏体验进行的拆解。尽管细节很可能存在出入，但从大思路而言，我想是比较明确的。1. 找到支柱原神项目极早期应该就明确了核心方向是大世界+卡牌。卡牌的核心体验是角色获取和养成，因此世界观构建的支柱是角色，这个没什么疑问。而大世界的核心体验是解谜和战斗，贯穿其中的是元素，因此元素也是原神世界观构建的支柱。因此，和英雄联盟不同，原神存在着两个支柱，而这两个支柱分别提供了世界观顶层和落地的构思思路。2. 梳理框架实际上，在大世界体验明确了元素的核心地位后，卡牌的设计也需要遵循元素体系。原神的角色战斗、养成材料、日常战斗等所有环节，都是脱离不开元素的。因此在顶层框架构建中，选择元素作为支柱，也是自然而然的想法。于是，原神在项目极早期就从元素出发对七国的基本特征和概念分配进行了规划。这种高度象征性概括的设计方法也是二次元常用的。当然，最终商业化和玩家长期体验都落在卡牌上，对于整个游戏而言，角色仍然是最重要的支柱。因此在顶层框架构建时也需要考虑如何将这些概念进一步落到角色上。既包括原则性的通过不同色系来体现角色的不同元素属性，也包括更加细致的七神代表了各个国家和各元素最核心的七名角色（虽然都没怎么干正事）。3. 强化支柱元素是贯穿的线，而角色才是承载内容的体。因此在构建世界观落地内容时，角色是更重要的支柱。在顶层框架已经比较确定的情况下，能否产出一批富有魅力能够吸引玩家的角色，对于卡牌游戏而言是关乎生死的。这也是强化支柱的意义。原神早期角色有部分角色是从角色自身风格多样性角度出发进行设计的，大部分二次元的经典角色都在原神早期角色中可以看到。经典二次元角色类型与原神角色对应（部分）：女仆——诺艾尔猫娘——迪奥娜眼镜娘——砂糖中二——菲谢尔萝莉——可莉大小姐——神里绫华元气少女——安柏、香菱此外，原神早期的部分角色也更注重角色自身矛盾的深挖，而非与世界观概念的关联。这也可能是角色与世界观双线推进有一些步调上难以协调的权宜之策。例如班尼特热爱冒险却自带不幸运体质，迪奥娜痛恨酒精却只要触碰就能酿出美酒，重云想要驱鬼却是纯阳之体。这些矛盾都很极端，实际上到现在也是缺乏世界观合理解释的，只能用“世界之大无奇不有”或“神的捉弄”这样的解释糊弄过去。之所以出现这个情况就是因为，在项目早期做出足够戏剧性的角色的优先级高于世界观的严整度。当然，后期也仍然会对这些角色的部分概念进行丰富，例如迪奥娜和猫尾酒馆、班尼特和冒险家协会等。4. 丰富概念如前所说，这一阶段的工作是从世界观顶层和角色设定双向延展，最后形成概念和角色完整交织的理想状态。例如琴，首先是蒙德顶层概念中骑士和其实精神，是琴这个角色承载的核心世界观，同时也是进一步设定的基础。因此琴团长是非常标准的骑士。而在角色设定的过程中，增加了更多关于西风骑士团、蒲公英骑士的概念。如西风骑士团在蒙德城市管理运行中，承担了怎样的职责，骑士团内部是如何组织的，等等。例如代理团长这个概念，就是从角色出发的。之所以琴是代理团长而不是团长，是因为这个设定可以降低角色的身份、拉近与玩家的距离，同时更具有不确定性和故事空间。在进一步丰富蒙德世界观概念，将其串联成体系时，这些从角色身上延伸出的概念也会构成世界观的一部分。例如蒲公英骑士、古恩希尔德家族，都是原神前史中的重要组成。下表对原神的主要角色进行了整理，大家可以综合看一下原神角色和概念的关联度，是如何做到“通过角色传达世界观概念”的。这里只统计了五星角色对应的概念，四星角色也是类似的，世界观的核心概念基本上都可以通过角色来传达。到了稻妻，角色和世界观之间的关联更加紧密。如雷电将军，从世界观框架角度确定了雷神、永恒等概念。而在人设角度则很复杂，首先设定了真和影双胞胎同为雷神，这样一体两面的设定。而现在则是影和雷电将军人偶的一体两面。这其中的矛盾和关系构成了雷电将军这个角色的故事内核，在稻妻主线中仅仅是稍有展开，其主要内容在暗线以及两章传说任务中。与钟离、温迪一样，雷电将军也贯穿了稻妻的历史，早期斩杀大蛇串联起了白夜国、海祇岛等概念，在地图上留下了无想刃狭间；斩杀雷鸟留下了雷音权现，后来被浅濑响解放导致了清籁岛如今被雷电笼罩。稻妻前史中的大部分角色都和雷电影有关，与之关联的概念包括五百年前的灾难以及雷樱的出现。而稻妻现状之中的锁国、眼狩令等概念也和雷电将军紧密关联。可见，七神作为区域最具代表性的角色，是如何串联起整个区域的概念的。而相比于钟离和温迪，影还有着成长空间，也在叙事上和前两者显著不同。除了英雄角色外，许多前史角色在暗线叙事中的戏份很重，其设定也达到了接近英雄角色的级别，给整个稻妻的历史增加了厚度。稻妻所有概念中没有英雄角色的，一个是勘定奉行柊家，一个是天狗一族。特别是天狗一族，在前史中笹百合的故事展开不充分，而天狗一族也还没有对应的角色形象。希望后续会补上一个天狗小姐姐。这里省去了整合串联一步，因为这一步仍是进行时，随着各个区域的完善和露出，世界性的危机和矛盾也会逐渐显露。目前原神各个区域还是相对独立的，主要在解决自己内部的矛盾。其世界性的矛盾结构目前仍不明显。构成世界性危机的除了至冬国的执行官和愚人众，还有就是过去坎瑞亚灾祸的真相。也许几年后才能来讨论这部分的设计吧。总结一下：对于角色支柱的游戏类型来说，在世界观概念构思时，应该重点关注概念是怎么通过角色传达给玩家的。而在角色设定时，也要考虑到这个角色能够承载哪些世界观概念。其实对于制作过二次元角色卡牌游戏的同学来说，这个设计思路并不新鲜，事实上大部分卡牌游戏都或多或少的天然就会选择这个设计思路。例如明日方舟，就是动物原型+文化背景+特殊概念的组合，以此来进行角色设计。之所以这样，是因为无论 Moba 还是卡牌，角色作为核心体验，是保持玩家在长线游戏体验种参与感和期待值的关键，因此角色必然要有足够的差异化和足够的新意。早期角色设计我们可以从一些固有概念中去直接抓，也可以做出几十个各具特色的角色，但这不是长久之计。引入世界观概念作为支撑，就会为角色设计提供更加丰富的土壤，也让玩家在接触新角色的同时，了解到世界观概念。六、方法推广：其他类型游戏如何构建世界观经过前面对于英雄联盟和原神世界观构建的拆解，如何基于游戏的核心体验构建世界观应该已经阐述的比较清楚了。但毕竟这两个都是角色核心的游戏，这个方法在其他类型的游戏上如何使用，这里会尝试做一下分析。当然也仅仅是举一些知名游戏作为例子，真的针对自己项目构建世界观，必然需要更加多的信息和深入细致的思考。1. 魔兽世界魔兽世界这样体量极其庞大的游戏，不同视角可能都会得出不同的核心体验。不过我觉得“部落和联盟”这个关键词可能会出现频率很高。几年前魔兽世界电影上线时，海报就是围绕着两大阵营对抗来做的，而当时也有很多玩家自发组成联盟和部落的群体前去怀旧。因为魔兽世界作为一款 MMO，其核心还是社交，通过组队玩法、公会等不同社交载体，形成为玩家间的社交网络。而形成社交的关键一个是强化社交需求，一个是强化玩家的自我身份认知。前者的实现方式是在战斗系统中设计玩家之间互相需要，即战法牧系统，让玩家需要组队配合完成战斗，也就是职业。而后者则是种族，一方面决定了玩家的外形，另一方面也在世界观层面提供给了玩家认同感。魔兽世界把两者拆分，种族和职业有一定对应关系，但不会有很大影响，这样一来，形成两大阵营的关键便是种族，而种族也成为了世界观构思的支柱。在创立一个新角色后，玩家前期的一段任务都是围绕自己种族的特殊剧情展开的。这段剧情给玩家介绍自己的身份。各个种族自己的主城，以及 NPC 的行为、对话，也可以进一步强化玩家的身份认知。但如果回过头来看，选择种族作为世界观支柱其实是有一定问题的，因为种族是纯世界观的内容，和玩法存在距离。这意味着更新新种族对玩家来说影响力没那么大。例如伴随熊猫人更新的武僧，世界观上和熊猫人有较强关联，但实际上很多种族都可以选择。这其中的割裂感在魔兽世界中是一直存在的。可能正是考虑到了这个问题，在很多国产 MMO 里，因为没有两大阵营对抗的顶层，所以其实并不需要把种族和职业拆分，而是绑定在一起，就成了武侠、仙侠游戏中的门派。这样做法的好处是玩法、外观和世界观都集中在了同一个核心体验上，减少玩家体验的割裂感。世界观设计也可以更加集中。总结一下，以社交为核心体验的游戏，玩家的关注点在于自身，世界观需要能够强化玩家自己的身份认同，因此选择种族、职业、门派等作为支柱比较合适。2. FF14说到 MMO，我们再来看一个神奇的存在。FF14 作为一个 MMO，社交也是它核心体验之一。但同时，他又有着非常独立、丰富的主线故事，每个版本玩家的体验是先花几十个小时玩通主线，然后再体验其他内容。这就使得他本质上是一个 MMO 的底子上，装载了一个单机剧情游戏（除了少量副本需要联机），大版本更新其实是这个单机游戏更新续作。因此 FF14 构建世界观的支柱并非社交，而是剧情。以 5.0 为例，之所以创建这样一个没有黑夜的世界，这个世界的核心矛盾，都是基于推进剧情的需要。从大的轴线上来看，是玩家作为光之战士和暗之战士这个身份的转换。这样的设计方法也使得，FF14 的剧情和游戏的其他体验几乎是完全独立的。这个问题在 FF14 上不是很明显，因为它继承了 FF 系列的世界观，继承了大量世界中的元素，使得即使故事和体验割裂，玩家仍然能体验到风格鲜明且相对完整的世界观，这也是我们大部分游戏不具备的的条件。这类游戏我理解为核心体验就是剧情，那么支柱就是故事，世界观为故事服务。这样的设计思路在过去的游戏设计中非常常见，也诞生了许多非常经典的作品（战神 4、美末 2 等等）。以单机游戏为主，长线运营的游戏很少以剧情为核心的（例如笔者曾经参与制作的《永远的 7 日之都》）。我更倾向于将他们视为适应特定游戏的特殊方法，而非普遍适用。3. 地平线 2地平线系列初始的世界观应该是从视觉出发的，核心概念是“原始部落与机械生物”，通过两者之间的矛盾产生了视觉冲击力。为了将这种视觉效果合理化，地平线 2 采用了后启示录的顶层世界观框架，解释了人类如何从现代文明中毁灭和新生。这一部分是没什么问题的，地平线的美术品质有口皆碑，故事的内核也很不错。而在丰富概念直到形成世界观体系的步骤上，地平线的做法本质上是故事核心的，尤其到了地平线 2 中，主线故事的任务流程和其他玩法及大世界体验差别很大。尤其是到了剧情后期不断增加的迁徙手段，让人觉得地平线 2 的游戏设计就是想让你先通关主线，再去体验大世界。而因为缺乏世界观的指引，故事的方向也出现了偏差，和大世界以及游戏的核心体验产生了割裂感。而实际上，地平线中玩家最核心的体验是战斗和成长的循环。通过与机械巨兽战斗，特别是通过射箭攻击特定部位获得掉落，然后利用这些掉落完成自身的成长升级。这是游戏的核心体验。再考虑到游戏视觉的出发点同样是机械生物，毫无疑问这是世界观的支柱，世界观应该围绕着这些机械生物展开，通过不断围绕不同机械生物丰富概念，来拓展世界观体系。没统计过，纯印象流：从地平线 1 到 2，宣传图中机械生物占比越来越小，埃洛伊的占比越来越大其实如果要给地平线系列的核心体验找一个参照的话，应该是怪物猎人，他们的内核是很相似的。而怪物猎人就很清楚什么才是他们世界观的支柱，应该把设计的重心放在什么上。光是不同怪物的自身特色和独特生态，就充满幻想度而十分有趣。而在地平线 2 中，机械野兽的概念在整个故事中都被弱化，被用一个整体的名词指称，怪物的生态也相比一代没有什么差别。并且机械兽的设计也显得有些偷懒，只是单纯的参照特定动物原型制作，没有太多惊喜。丰富游戏体验本身并没有问题，但要清楚最核心、最有特色、玩家因此会来玩的体验是什么，围绕着它去丰富才可以。世界观也同样如此。当然我这也是从纯技术角度从游戏出发的想法，并不是在说地平线 2 做得不好或者有问题。从产品的角度也许有市场调研玩家希望看到更多埃洛伊的故事而不是机械生物，产品的决策也会更加复杂。以战斗为核心体验的游戏有很多，除了怪物猎人，还有魂系、鬼泣、战神等等的 ARPG 游戏，不同游戏的核心体验都会存在差别，有的注重与怪物的交互和斗智斗勇，有的注重自身打出华丽的连招形成 combo，显然他们构建世界观的思路都会很不一样，需要针对每个游戏进行具体分析。4. 暗黑破坏神暗黑破坏神系列历史很悠久了，游戏的核心体验一直都是地牢探索+割草战斗+装备掉落。地牢探索是过程，装备掉落是追求，割草战斗是成长验证以及爽快感的来源。游戏的短线体验，通过主线剧情引导玩家探索地牢进行战斗，在主城进行成长。主线的流程并不长，很快就可以通关。但这时候游戏才刚刚开始，玩家后续通过副本刷刷刷追求更高级的装备、战力，通过 BD 去提升自己刷图的效率，获得更好的掉落。而暗黑破坏神 3 通过赛季制不断给玩家提供新的装备追求和 BD 玩法，大大延长了玩家的游戏体验周期。暗黑破坏神的基础世界观应该更多是从视觉角度出发进行的设定，这种偏黑暗、神秘、中世纪的风格和地牢探险的核心感受是匹配的。进一步世界观的细化主要是围绕剧情来进行设计，但在游戏前期仍然能和地牢体验进行结合。例如暗黑破坏神 3 中各个区域的设计，通过墓穴、遗迹、下水道等概念的构建，给玩家提供了风格迥异的地牢。尽管不是围绕核心体验进行的世界观建构，但情绪和风格上的统一和故事的强牵引，降低了割裂感。在后期玩家追求装备掉落的阶段，世界观的存在感就比较薄弱了。这一阶段的核心玩家大部分对于世界观并不太感兴趣，但世界观仍然是可以传达的。在这样的核心体验下，世界观的使命应该是从世界观的角度渲染装备的强力，辅助玩法体验进一步强化玩家对于装备的追求。暗黑中也有不少装备和武器有基于故事中的角色进行的包装，但总体来看，这些内容并没有达成很好的传递效果。考虑到装备追求占据了游戏生命周期的绝大部分，暗黑破坏神故事和世界观中装备的存在感是过于薄弱了，以至于很难想起故事中出现过什么强力装备，甚至比魔兽世界能想起的传奇武器还要少。这很大程度就来源于，并未把装备作为支柱来丰富概念，使得玩家在玩法体验和故事体验上处于互不相关的状态。按照从核心体验出发的设计方法，以地牢探索为支柱构建顶层框架，以装备为支柱丰富概念，可能是比较可行的暗黑破坏神的世界观设计思路。当然，这是我站在当下进行观察的想法，暗黑破坏神世界观设定的年代思路和目标会是很不一样的。更多还是以此为例来说明从游戏体验出发的思考方式。总结其实仔细思考一下的话，基于核心体验去构建世界观的游戏非常多。比如万智牌就是从卡牌设计基础的颜色体系出发进行概念延伸和拓展，形成了世界观体系。比如从宝可梦世界观构建的支柱，无疑是多种多样的宝可梦们。核心在于，世界观是游戏体验的一部分，也是游戏情绪传达的一部分。一个游戏最终传递给玩家的情绪应当是统一的，否则便会产生割裂感。而世界观想要达成这一步，最合理的方式就是围绕游戏的核心体验，找到内容设计的支柱，并以此构建世界观。理想的游戏世界观构建思路，是从游戏中生长出来，而不是强加于游戏。当然，重视支柱也并不意味着世界观的其他部分就不重要了，最终世界观成型还是会有角色、有故事、有场景、有自然生态、有人文历史。这是一个漫长而艰巨的工作，而在这个过程中是很有可能迷失方向，忘掉出发点的。支柱的意义在于让我们在做取舍和选择的时候，有一个明确的方向和参照物。这篇文章说了什么，及一点感想这张图是对本文内容的一些梳理，内容又多又杂，大家看完不容易，辛苦了。总而言之一句话，游戏世界观应该从游戏体验出发。前段时间也恰好看到过乐问的一个问题，感觉大家对于世界观工作的理解和想法都不太一样，也有很多同学可能存在一些迷茫。第一个问题是关于现在的环境，我觉得从游戏行业的大环境来看，对文案、世界观策划不算友好。当然这个不同公司、不同项目组差异很大，但文案就是包装一下，无关紧要的想法也确实并不少见。一方面是我国手游发展模式导致的结果，另一方面文案确实整个思考方式与其他策划或职能的同学不太一样，不尊重的根源是不理解。我相信在更加看重内容的大趋势下，文案、世界观的重要性会逐步被认知到，也会越来越得到尊重。这一点过去几年已经好转了很多。但环境是一回事，我们也应该扪心自问我们是否已经做到了极致。我也见过许多文案策划是比较少玩游戏的，或者只玩少数自己熟悉的品类，或者对游戏的体验深度不够，大量靠看视频云游戏。回到文章的开头，我们在做的是游戏世界观，游戏作为内容的载体，触达玩家的终端，是我们最需要熟悉、理解和把握的。文案不只是包装，这不仅仅是就文案在项目组定位而言的，也是文案、世界观策划们需要自己主动去推动和争取的，而这一部分一定需要我们强化对游戏的理解，能够深入理解项目的逻辑，然后从世界观的角度去整合游戏带给玩家的体验，通过游戏完成世界观的传达。第二个问题，如果真的在一个文案发挥空间很小的项目，怎么办。有的同学可能会觉得，因为我在王者世界项目组，有很多机会去做更多世界观的工作，站着说话不腰疼。而有的游戏品类天然给文案发挥的空间是比较小的，比如吃鸡、SLG 等等。（我几年前面试过某家 slg 公司，文案的笔试题是英译中和中译英）这些游戏玩家可能真的不怎么在意世界观。但如果制作人和主策划交给了我们相关的任务，那应当就是有他们的思考的。和他们聊清楚制作的方向和世界观、文案工作的定位，是很重要的。首先，我想现在越来越多的人都会意识到，世界观是有用的。现在已经不是以前那个手游像韭菜一样一茬一茬出的阶段了，游戏研发成本增加，相应的就对游戏的长线运营有了更高要求。而随着游戏时间的增强，玩家多多少少会对世界观有一定好奇。并且在面对同品类游戏的竞品时，对世界的认同也可能成为玩家留在游戏的理由，提升用户的粘性。因此作为世界观策划也要有信心，如果连我们自己都否定掉我们工作的意义，那还能咋办呢？其次，在这种情况下，其实更需要我们用本文中提到的从游戏体验出发的方法论。因为面对这些原本就对剧情不太感兴趣的玩家，在某个系统的犄角旮旯写十万字的世界观和人物传记，自然无人问津。世界观只有紧紧贴住核心体验和支柱展开，才有一点点可能被他们看到，引起他们的兴趣。作为游戏体验的一部分给到玩家时，即使很微小的努力也是有意义的。难度确实很大，但当自己用心的设计被玩家看到、感知到的时候，应该也会很有成就感吧。欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/gaming-world-view
用户 设计师 视觉 学习任何东西，最好都能重头开始，本文阅读时长大约 5 分钟。内容仅代表个人观点，欢迎各位探讨...我身边有不少的同事或朋友转型交互设计的经历，他们的原职位有些是产品经理、销售或设计师。而我本人也是一名交互设计从业者，在对交互设计的不断探索及日常工作经验的总结中，发现了一些交互设计中常见的误区。写到文章中分享给大家，希望能对即将步入交互设计领域的伙伴们有帮助！更多交互干货：大厂出品！写给UI设计师的交互自学指南编者按：本文从启蒙、基础、强化、进阶4个方面，列举了UI设计师学习交互的路径和方法。阅读文章 > 误区 1-交互设计门槛很高交互设计介于产品经理与 UI 设计师之间。是为了顺应时代发展划分出来的岗位需求，虽然已经出现了很多年，但目前来看，交互设计在一些中小型公司仍然是比较模糊的领域。甚至很多从业者把交互设计交给产品经理或 UI 设计师来实现。这种想法非常浅显，而且容易带来系列的体验问题。很多人在步入新领域的时候，都会寻找对应领域所需要的知识结构、能力模型...我和身边的朋友经常会聊到这些，试图从中总结出一个好的交互设计需要满足哪些特质。沟通能力、人机科学、心理学、认知科学...但很多初学者看到这些就放弃了，它给人一种学习曲线很陡峭的感觉。在我看来，交互设计师的专业程度很大一部分取决于对用户的了解深度，而非是专业知识。所以，对于初学者来说，只需要具备一个必要的入门特质——同理心（empathy），这是一种理解或者感受他人（用户）的能力。在生活中，如果你觉得自己是一个比较能站在对方角度思考的人，那么恭喜你，你已经具备交互设计师的特质了。但是同理心并不是一件很容易的事情，你需要它贯彻交互工作的始终，“以用户为中心进行设计”并不是一句slogan，始终站在用户角度思考问题，这非常重要！！！误区 2-交互设计工作是画原型图原型图和流程图是交互设计师的主要产出文档之一，但是交互设计需要做的不仅仅是产出这些文档，甚至很多时候，交互仅仅需要提供建议。UX 设计指的是设计用户体验的过程。核心的焦点在于设计用户行为，用户行为不仅仅体现在原型图上点击或滑动某个地方，而是尝试引导用户诱发或者推动响应。很多从业者错误的认为交互设计就是画原型图和流程图，这种想法往往会把注意力集中在用户要完成的任务上，而忽略了体验过程中是否有足够的关注。完整的用户行为，应该包括预知、反馈、返回三个阶段，交互之前有预知，交互之中有反馈，交互之后有返回，这三点支撑起交互基本的可用性。1. 交互之前有预知用户在使用产品进行交互前，是否能够清晰感知到需要的信息以及下一步的行为？《About Face 4 : 交互设计精髓》一书中提出，用户对于一件事情的心智是一个圆，我们设计出来的东西越趋于这个圆形，用户对设计就会越满意。所以在进行设计之前，多问自己一些问题。用户来这里的动机是什么？他们点击这个东西的时候会有什么预期？他们是否对未学习过的东西有一定了解?...2. 交互之中有反馈系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解。比如加载页面的设计中，我们会通过进度条或者场景插画的方式预知用户页面的进度，从而打消用户等待过程中的焦虑。3. 交互之后有返回可逆性是交互设计中重要的一环，用户不可能百分百的按照我们设计的路径去使用产品，事实上，用户常常会误触到某些功能，即使在线性的流程中，我们也应该让用户可以方便的退出，始终让用户保持可控的状态。比如微信聊天中的撤回功能，在发送错误信息后，可以通过长按这条消息或者表情，在选择框中操作撤回。举个例子，「饿了么」在选购商品的时候，交互前通过按钮置灰预知用户不可点击，交互中通过动效、Toast 给予用户操作反馈，交互后可通过外卖箱对已选商品进行删减或清空，保证产品可逆性。误区 3-用户的想法都是对的为了贯彻“以用户为中心”的设计原则，很多设计师会选择直接听取用户的设计建议，最终导致产品越做越复杂，最后造成体验上的损失。实际上，UX 是一项技能，而不是一种天赋。这意味着大部分用户是无法帮你进行设计的。而且当你面临未知的挑战时，不能一味听从用户的想法。你可以听取用户的意见，但不要他们说什么你就干什么。听听用户是怎么想的，看看他们是如何尝试完成某项操作的，了解他们是怎样在你的设计中迷失的，以及为什么会这样。然后，去寻找这些问题的解决方案。福特汽车创始人亨利福特说过一句名言：在汽车出现之前，去问顾客想要什么，他们可能会说：一匹更快的马。”如果我们一味的听取用户的想法，那我们只能在解决方案上做加法。如果要找到完美的解决办法，我们必须学会找到问题的本质。误区 4-交互不用考虑视觉这是交互设计师经常忽略的，把线框图当作速成且粗略的草图，或者把它当成设计的第一步，只展示流程如何运作，却忽略了是否能够更好的运作。交互设计师在组织框架时，除了保证逻辑清晰外，视觉也是构成体验的一部分。交互设计师虽然不直接负责视觉效果，但需要通过元素之间的结构关联和强弱对比，将有效的信息传递给下游。在必要的情况下，也可以通过 1-2 种颜色来表达你的想法～具体可以分为视觉重量、视觉关联两个方面：1. 视觉重量用户不可能像机器人一样把页面所呈现的内容都扫描一遍，如果你想要用户着重关注某些内容，你需要调整不同信息的视觉重量，以达到主、次、先、后的顺序。当你不断的使用排版来突出重要文字、用特定的颜色强调按钮，并且给重要内容以更多的视觉重量时，就创造出了视觉层级。用户的眼睛就可以从一个重要的地方跳到另一个重要的地方。交互设计师在传递技术文档时要体现出这一点。2. 视觉关联交互设计师除了注重逻辑关联外，视觉关联也是组织信息框架时重要的一点，在用户没有了解你的页面之前，会下意识的通过眼睛划分哪些信息都有什么关联，在设计中，我们通常将有关系的元素给予更强的亲密度、统一的样式，甚至通过卡片、色块的方式来划分关联。而且位置接近的元素关系越强。我们不需要像视觉设计师一样将原型图绘制的如此精细，但需要通过一定的处理方式体现出视觉的关联性。误区 5-我觉得这样做会更好设计师不用对 KPI 负责，但要直接对体验负责。交互设计师的工作中，自身代表的就是用户，任何时候都要避免一些主观的看法。不要你觉得，而是用户觉得。任何需求都离不开用户这一要素，不同的用户群体决定了设计上的不同策略。如果你想设计出用户满意的 UX，在工作中需要做的第一件事就是了解用户，并且持续这一过程。《用户体验设计-100 堂入门课》这本书中有个很有意思的观点，在了解用户之前，你需要先了解关于自己的两件事认清自己：你想要的东西对用户来说不重要你要知道什么东西对于用户而言不重要很多设计师刚开始能做到这一点，后来慢慢陷入设计自嗨，最终导致体验受损。交互设计师要始终意识到，出色的产品设计始于用户研究，上文说到，交互设计师的专业程度很大一部分取决于对用户的了解深度，如果你不知道如何着手了解，您可以尝试了解一些用户研究方法与工具，并把他用在工作的实践中，比如：桌面调研、用户访谈、焦点小组、用户画像、故事板等。误区 6-弹窗不能跳弹窗弹窗对很多人来说并不陌生，我们经常在各种网站和各种 APP 中看到。弹出式设计被评为“历史上最糟糕的设计体验”。所以”弹窗不能跳弹窗“这句话，如铁训般的规则深入人心。在体验设计的层面上，普遍的说法认为，一定程度上，多个弹窗会加重用户的心理负担。而且会造成用户迷失。那为什么会说弹窗不能跳弹窗是个误区呢？因为随着互联网业务深耕的发展要求，经常会遇到弹窗覆盖弹窗，浮层覆盖浮层的需求，如果我们只是以“弹窗不能跳弹窗”来否定需求，这并不是交互该做的。我们应该了解弹窗的底层体验逻辑，再探讨弹窗体验使用的合理性。1. 弹窗层级弹窗在层级上比操作界面更高一层，会聚焦视觉，所以弹窗覆盖弹窗的时候应该避免带给用户层级过深的感受，以此来降低带来的心理负担。比如弹窗覆盖时出现尺寸差异及较大的视觉差异。2. 弹窗承载弹窗的空间承载比页面要低，我见过不少的产品提出弹窗跳弹窗的需求，目的是为了希望用户在复杂操作后仍然可以留在原页面。实际上这是不对的。对于一些复杂的操作或者过载的信息，页面是比弹窗更加合适的载体，如果我们只是想用户做完这些回到原来的页面。只需要设计一个体验循环的闭环。3. 弹窗操作弹窗会聚焦行为，弹窗跳弹窗的情况只适用于线性的操作流程，线性的操作会使用户心理上有较强的预期，可以避免多个弹窗所带来的迷失感。所以，一切出发点都要围绕体验及感受的合理性，如果我们设计的交互流程呈线性，且满足弹窗的承载能力。那么完全通过一定的设计技巧实现弹窗跳弹窗的交互方式。误区 7-效率至上悖论效率至上，这句话本身没有什么错误，交互设计师应该重点关注效率。但我发现，很多人喜欢通过漏斗或者步骤来衡量一个流程的效率（用户之前用了几步，优化之后用了几步），甚至出现某些“规则”，一个流程尽量不要超过 3 步的说法。很多设计师为了所谓的“效率”而刻意缩短步骤，结果导致用户整体的使用时长增加。这就陷入了“效率至上”的悖论中。如何避免效率至上带来的“诅咒”？建议以下两点：1. 关注目的而非效率效率不是交互设计师唯一要做的事情，设计的本质是解决问题。如果我们的目的是为了设计出 XXX 保险的购买流程，我们应该思考用户在整个购买流程中的心理变化，如果像推销保险一样，上来就设计出一个购买页面，让用户去购买，用户一定会很排斥这种做法。必要的时候我们甚至可以分为 2 步，先着重介绍这个保险的好处，再试图让用户去购买。2. 状态清晰原则始终让用户保持清晰的头脑，席客定律提到过，人在面临选择越多的时候,所要消耗的时间成本越高。假如一个遥控器上面有 100 个按钮，我想使用者在看到时就已经崩溃了，而假设遥控器上只有 10 个按钮，使用者则会很快上手并开始熟练使用它。作为交互设计师，应该始终意识到这一点。无论我们设计的流程需要多少步骤，都应当始终保持状态清晰易懂。以上就是我总结的设计工作中常见的误区，如果你们也在日常工作中遇到各种各样的问题，欢迎大家评论区留言～本篇来源：优设网原文地址：https://www.uisdc.com/7-interactive-design-misunderstanding
菜单 全局 用户 你是否有过这样的体验，进入庞大且陌生的火车站后迷失方向：从哪里进站？在哪里安检？取票窗口在哪？这时你迫切需要一个准确的导视牌，帮助你在建筑空间中定位，并找到前进方向。在软件系统中用户也会面临类似的问题。带着目标进入系统后，用户会通过网页内散布着的信息气味，去寻觅目标功能入口，而提供这些信息和入口的便是导航系统。它解决了用户“我在哪”“到哪里去”的问题，并为用户提供移动方式即页面间跳转。本文将基于 B 端场景的全局导航展开，归纳总结相关概念并提出设计建议。更多B端导航设计干货：超详细！总监出品的B端设计规范指南（六）：导航栏从这篇开始，我们就要对 B 端一些常见的复杂组件进行解析了。阅读文章 > 一、为什么需要全局导航根据导航的触达范围，在 B 端设计中常使用的导航可分六种类型：其中全局导航联结了系统的所有板块，从系统整体为用户提供定位与导航，允许用户在系统浅层进行横向移动。全局导航是用户使用网站功能的第一触点，和首页内容一起塑造了用户对网站的第一印象。全局导航对用户体验的影响可以归纳为以下几点：呈现信息架构：构建用户对网站功能和内容的整体认知。提供关于当前位置的线索：帮助用户了解当前位置与可前进路径。提供可访问入口：帮助用户快速抵达目标页面。提供一致性的产品体验：全局导航通常是所有页面的共同元素，可以强化品牌形象。二、全局导航的基础样式1. 导航菜单的构成导航菜单由多个菜单项集合而成。容器：承载导航菜单内容的容器，容器颜色通常与页面背景色形成对比。选项内容：通过简短文本表述菜单选项选项，也可以采用图标+文本的形式。交互状态：normal、hover、press、disable，点击菜单热区后跳转至对应的页面。在页面浏览过程中，用户的浏览动线是从左上到右下进行扫视，因此全局导航普遍被放置在页面顶部，或者页面左侧，由此产生了常用的几种全局导航菜单范式。2. 水平导航菜单导航菜单放置于页面顶栏，横向水平延展。其中选项优先级从左到右递减。优点导航栏面积较小，有较大屏幕空间用于内容展示。页面简洁，选项数量有限，减轻用户的认知负载。在长页面中，导航上下布局与用户浏览方向一致（纵向滚动查看），沉浸感更强。缺点导航菜单间切换较为不便。若菜单选项名称过长、数量过多会受到横向尺寸限制。导航菜单横向排布，用户扫视效率低。适用于：导航菜单数量较少的场景；内容向下延展的长页面，如官网页面3. 垂直导航菜单导航菜单放置于页面左侧栏，纵向垂直延展。其中选项优先级从上到下递减。优点用户可以快速在导航菜单之间切换。充足的纵向空间可以容纳更多选项，选项过多时可以对一级导航进行分类。纵向排布的菜单内容，方便用户快速扫视并识别。缺点导航栏面积较大，用于内容展示的区域变小。视觉突出，浏览过程中打断感强。适用于：导航项较多、功能属性强的场景，如大部分 toB 网页。4. 混合式导航菜单同时使用水平导航菜单和垂直导航菜单。通常顶栏为一级导航，承载全局类目和功能；侧边栏为二级导航，提供具体网站架构和功能。优点外显一级、二级导航，提升网站结构可见性。可以容纳更多信息层级。充分利用屏幕空间，信息密度高 。缺点菜单面积较大，视觉复杂度高。用户浏览动线复杂，需要合理设计架构。适合量级大，复杂度高的的系统，如各种云服务后台。三、全局导航的拓展能力1. 弹出为了容纳更多的信息量级，hover 在一级导航下可以弹出二级菜单。顶部导航/侧边导航的不同弹出方式：当二级菜单内容过多时，也可以像各种云服务网站一样弹出站点地图。但需要对二级导航进行合理分类、规划，否则影响用户信息搜寻速度。2. 搜索当二级导航过多时，增加搜索功能可以帮助用户更快速触达入口。四、设计建议用户使用导航菜单是一个信息寻觅的过程，包括信号捕获、行为实施、反馈与评估等流程。在系统设计时需要注意全局导航的可用性，确保用户快速找到目标入口，提高系统使用效率。本环节将从导航使用体验出发，对全局导航的设计要点进行归纳总结。全局要有足够的视觉权重，默认折叠全局导航会使用户难以发现入口。一般默认侧边栏展开，不需要时收起。保持结构简洁，若导航层级过深（如三级导航及以上）可见性将大大降低。控制水平菜单选项数量，避免过长溢出，同时需要考虑未来业务的可拓展性。保证可读易于扫视。菜单选项名称保持辨识度，避免大量使用重复文本。准确映射内容，跳转页面的可预见性，采用易于理解和识别的名称/图标。五、小结全局导航是 B 端系统中不可或缺的一环，目前已经有非常成熟的设计解决方案。水平菜单和垂直菜单都很大程度上平衡了界面简洁和功能实用，在 B 端系统得到广泛应用。在系统设计前期，需要根据内容整体框架和页面布局，选择合适的导航菜单类型。在全局导航的具体设计中，则需要着重考虑提高菜单选项的可见性和用户使用效率。最后，用户的交互行为不仅依赖当下的界面外观和内容，还依赖用户的先验知识和使用经验，因此优秀的导航系统应该与用户的心智模型相匹配。欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/global-navigation-design
笔画 字体 粗细 本期推荐的是免费商用的卡通体，此类字体非常适合运用在可爱活泼、轻松休闲的设计中，会有不俗的表现力，常常能达到“画龙点睛”的效果。往期回顾：视觉设计师来收！免费商用字体推荐：圆体篇（12款已打包）圆体给予人圆润亲切的感觉，显得温润柔和、新颖活泼。阅读文章 > 整个字形向上倾斜，给人一种积极向上的感觉，而且横折和竖折的笔画都有弧线，没那么死板，无论是笔画结构，还是笔画粗细，都是灵活的，是一例轻松快乐风格的字体。字形笔画去除了折笔的弧形，换之以平直的笔画，竖弯钩转为竖折，同时弱化了钩笔画，省去了许多笔画末尾的小尾巴，显得更加直白可爱。整体形态采用了镂空的制作技巧，增强了字体的立体感。字体设计灵感来源于千图网 IP 千小兔的形象，将可爱的千小兔融入字体设计中，尽显年轻、活力与俏皮。适用于各类可爱、少女风的海报和店招场景。笔画粗细对比强烈，字形活泼，以拙为巧，趣味十足，充满童趣，让人觉得轻松愉悦。所有笔画以“圆润”为主，保留少量飞白，具有手写的韵味。在字形上淡化了棱角，笔画中间呈弧形外拓，将转弯的折角用平滑的曲线代替，部分笔画有规律的加粗，再结合圆润平滑的笔画，显得可爱个性，憨态可掬，轻松惬意。字体组合结构松散，重心不稳，字形偏长，起笔收笔锋利且粗细对比明显，笔画笨拙微带曲线感，具有诙谐幽默的效果。图片小可奶酪体字体笔画比较简单，都是中间宽两头窄的固定样式，笔画比较圆润，在转折处一笔形成的弧度，突出了手写感和趣味性。横竖笔画略带波浪，不完全平直，尽显俏皮可爱。字体笔画粗细排布均一合理，小字可读性较高。字体线条粗细适中，笔画随性，结构肆意洒脱，具有很好的识别性。猫啃什锦黑是一款可爱的马克笔手绘风格字体，其笔画活泼有趣萌萌哒，特别适合做可爱类、母婴类等海报的标题字体。仓耳非白是一款粗细对比明显、风格强烈、拥有 5 个字重的家族字体，结构方整，笔形简洁、利落，带有明显区别于其他字体的风格。Tips：如果安装后在 PS 或 AI 中找不到字体的话，请搜索「TsangerFeiBai」即可。字形结构灵活，选用粗细对比夸张的笔画，使字体更具视觉冲击力，搞怪的字型结构和出乎意料的空间调整让字体多了几分调皮可爱之气。笔画错落有致，打破了许多固有的排列模式，营造出天真烂漫的感受。欢迎关注作者的微信公众号：「艺海拾贝Design」 文件名 如何下载使用 文件大小 提取码 下载来源 免费卡通字体47.6MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/cartoon-font
项目 作品集 二手 最近不少同学在筹备作品集，而很多缺乏项目经验的毕业生，不知道怎么选择虚拟项目。我看了这么多份作品集，发现很多设计新人的虚拟项目容易出现的三种问题。如果你也要做虚拟项目，那么可以借这篇文章反思一下，自己有没有相关问题。更多虚拟项目干货：作品集没案例？看高手如何在3天内搞定一个虚拟项目！现在找实习越来越难，很多设计新人都苦于没有项目案例放作品集。阅读文章 > 一、天马行空，不接地气尤其是直接把学校的课题搬到作品集上时，很容易出现这样的项目：AR 互动游戏节水公益 APP图书馆服务设计这三个项目，你可能觉得挺好的呀，看起来不但有创意，还很有价值。可问题是，咱们是为了找工作而做的作品集，你确定自己能找到 AR 游戏、公益 APP、服务设计的工作吗？如果真的能力很强，这些项目做得特别好，那倒也不是问题。但是对于大部分人来说，设计能力一般般，又要挑战这种高难度项目的话……我只能劝一句：请接点底气吧！AR 这个领域确实是未来趋势，但目前产业并不成熟，能赚到钱的公司很少，能提供的岗位就更少了。这种岗位有限的热门领域，很多设计师会有兴趣尝试，竞争就更激烈了。你想试试不是不行，但得掂量一下自己的水平够不够得着。公益产品就更小众了，不赚钱的东西，基本只有政府或大厂会玩一玩。大厂是什么门槛，这个不用多说。再看政府这边，项目会外包给什么公司？公司会分给设计师多少钱？你自己思考一下……最后那个服务设计，虽然网上喊的声音很大，但是你去招聘网站搜一下关键词就知道行情了。二、不懂业务，用爱发电很多人在构思 C 端虚拟项目时，就简单的往自己想要的产品去想，完全不考虑业务和可实现性，最后弄出一个根本不合时宜的项目。例如做一个宠物 app，上来就把社区、商城……宏大版图加上去。但凡对行业和竞品了解一点，都知道现在做社交和电商有多难。毕竟已经有那么多成熟的产品了，为什么用户要来你这里？连这种基本问题都没有任何想法，还设计什么产品？如果你觉得，设计师只要考虑设计问题，不需要理解业务，那就大错特错了。如果你是纯 UI/视觉，确实只要把图画好就行。但如果是想做 UX/交互，就不可以对业务一无所知，因为你的方案，确实是能影响到业务的指标的。如果虚拟项目的业务模式完全不切实际，那么就没办法做出合理的设计方案，即便设计能力再强，最终的结果也会很糟糕。所以，如果你想做 C 端的虚拟项目，一定要把行业情况弄清楚，把市场上的竞品当作真正的竞争对手，这样才可能做出合理的方案。如果是 B 端项目，这方面的问题就小很多，但是还是难免下面的这种问题。三、闭门造车，自以为是有些虚拟项目方向选得不错，但是不认真做调研，导致后面越设计越偏，方案看起来问题一大堆。不要以为虚拟项目就不用做调研分析了，虚拟项目比真实项目更需要做调研分析！为啥？因为真实项目通常是领导、同事们已经调研分析过很多遍了的，交到你手上时，很多信息已经有了，你该做什么已经很清楚了。但是虚拟项目没人帮你，自己什么信息都没有，还不做调研不做分析，这跟闭门造车有什么区别？例如我之前看到有好几个学生的虚拟项目是校园二手货平台，这个确实是刚需，算是合理的项目方向。但还是很容易出现这样的问题：照着闲鱼抄，也不管校园内的二手货交易有何特点。这样能体现出什么能力呢？招聘方会觉得你只会抄作业，一点设计想法都没有。首页做得完全不像是二手货交易平台，还以为是学术交流网站。这个问题显然是闭门造车又思路不清晰造成的结果，不管是做竞品分析、用户访谈还是用户测试，都有希望尽早发现并解决。把线下集市、二手货交易柜、上门收货都计划好了，盘子铺得特别大。但凡是研究过行业和竞品，都应该想得到为什么别家很少有这么做的。所以，千万别以为虚拟项目就是自己想怎么做就怎么做，正是因为项目是虚拟的，所以反而更需要小心求证。总结一下建议先做职业规划，再选择虚拟项目。讲直白一点，就是根据招聘岗位来准备作品集，免得好不容易做完一个项目，发现根本找不到相关岗位的招聘。即便是虚拟项目，也要把产品的定位和业务模式想清楚，要符合当下的市场环境，不能光凭喜好选项目。最后，虚拟项目更需要做调研，因为自己本来就对行业不了解，如果还不积极收集信息，那么很容易偏离十万八千里。欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/design-of-virtual-projects
用户 功能 乘客 有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。关于这两种说法，众说纷纭，本期设计大侦探，就来全面拆解铁路 12306APP，一起来看看这个产品到底是如何设计的，用户体验如何。往期拆解：上线即爆火！3600字完整拆解微信键盘的产品设计微信键盘发布啦！阅读文章 > 一、导读1. 内容结构全文 9700 字，分为六个部分，分别是导读、产品画像、出行服务、内容服务、思考总结和后记，你可以通过下面的思维导图对本文内容快速的了解。2. 适合人群第一类，UI/交互设计师，可以跳出执行层，全方位体验 12306 的产品设计，多维度去思考和总结如何规避类似的陷阱；第二类，产品经理/运营，通过全面的产品设计拆解、体验反馈，获取产品设计参考；第三类，旅游及出行相关行业从业者，通过对 12306 的全面拆解，获取竞品设计参考。3. 分析模型第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于拆分和分析产品的功能价值。第二个，尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则，通过这十大原则，可以对 12306 的产品设计体验进行全面的校验和侦查。用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 第三个，设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、72 效应、席克定律等常见设计基础理论。万字干货！15个著名的设计心理学原理和应用深度解析！“除非有更好的选择，否则就遵从标准”你是否有在听别人说某某原理法则时一脸懵 B 的时候？阅读文章 > 二、产品画像1. 产品介绍铁路 12306 是中国铁路客户服务中心推出的官方手机购票应用软件，主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务，首个版本发布于 2012 年 10 月 16 日，根据易观千帆数据，截止到 2022 年 10 月，12306 月活跃用户人数 6,923.78 万。2. 用户画像铁路 12306 的用户群体主要以男性用户居多，占比 65.04%，女性占比 34.96%；从年龄分布看，以 24-30 岁的用户群体最多，占比 36.52%，31 到 35 岁的用户占比 24.23%，36 到 40 岁占比 20.27%，41 岁以及以上占比 10.30%；从用户消费能力看，中高消费者占比 33.48%，中等消费者占比 30.43%，高消费者占比 14.70%；从地域分布看，新一线城市用户最多，占比 27.93%，一线城市占比 19.93%，二线城市占比 19.00%，其中广州用户最多，其次为深圳、杭州和北京。3. 信息结构铁路 12306 的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买，其次还提供各种快捷功能入口和酒店预订等服务；「出行服务」主要为用户提供约车、酒店、订单等服务；「订单」是可查询和管理在 12306 的各种订单；「铁路会员」是 12306 的会员版块，提供车票兑换、会员活动等内容；用户中心提供个人资料管理、出行向导和常用功能等内容。4. 重要迭代记录根据七麦数据统计，铁路 12306 的 APP 首个版本发布于 2012 年 10 月 16 日，截止到 2023 年 1 月 12 日，APP 版本已经更新至 V5.6.3 版本，近一年版本更新次数为 5 次。版本重要迭代记录2021 年 9 月，发布 V5.4.0 版本，新增无障碍功能、老人及障碍人士购票更便捷，即爱心版；5. 产品生命周期作为中国铁路客户服务中心的官方购票平台，铁路 12306 距离首个版本发布时间已经过去 10 年。从易观千帆数据观察，截止到 2022 年 10 月，12306 月活跃用户人数 6,923.78 万，日均活跃人数 811.65 万。由于是国有企业运营，而且是垄断业务，12306 没有任何商业变现的压力，从产品发布时间和活跃用户人数看，目前处于产品生命周期的成熟期。6. 竞争图谱截止到 2022 年 10 月，易观千帆数据显示，铁路 12306APP 在苹果的 APP Store 应用市场 APP 总排名 71 位，旅游类排名第一，汽车火车船票预定类第一，月活跃用户人数几乎是其他 APP 的总和。三、出行服务作为 12306 最核心、最重要以及实现商业变现的服务，出行服务主要为用户提供火车票、飞机票的销售，其次还链接了众多第三方合作伙伴，为用户在出行的各种场景提供了便捷的服务。1. 票务「票务」是 12306 最核心的服务，主要为用户提供火车票、飞机票和汽车票的查询以及销售，其次 12306 还对三种产品进行了组合，推出了空铁联运、铁水联运这样的服务。① 火车票「火车票」就是为用户提供火车和动车的票务销售，用户输入出发站、终点站和时间以后，就可以进行查询，其次还支持对已购买的车票进行变更到站、改签和退票。1）售票售票页当用户输入目标站点以后，就进入了售票页。在这个页面，可以看到当天列车的所有车次，包括直达、中转、出发时间和剩余票数。在底部，有一个菜单栏，包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能，这主要是帮助用户快速寻找符合自己需求的车次，比如出发车站、出发时间等。体验陷阱这个页面的操作体验不太友好，底部的菜单栏不仅没有实现全屏手机设备的兼容，而且几乎和背景的元素贴合在一起，不够醒目，如果用户不注意，根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。订单页在用户选择好车次以后，就进入订单页。用户需要选择座位的系别，包括硬座、软座、二等座、一等座、特等座等。用户需要选择乘车人。添加乘车人的步骤比较简单，在输入用户的真实姓名、身份证号码和手机号码以后，即可添加成功。首次使用12306的用户需要进行身份核验，用户需要通过验证系统发送的核验信息才能添加成功。细节侦查「姓名」这里有一个非常友好的设计体验，那就是针对无法输入的生僻字、名字超过 30 个字符，以及外籍用户的极端情况都给出了详细的指导，针对用户可能出现的极端的情况给与及时的提示，这就是尼尔森十大原则中的容错原则，帮助用户从错误中恢复，将损失降到最低。在「选择乘车人」的右边，还有一个「选择受让人」的功能。这个功能有很高的学习成本，会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能，它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户，积分又可以抵消火车票款，从而实现抵扣。选择好乘车人以后，用户可以进行选座，就进入了提交订单、支付费用的环节。支付页订单生成后，用户需要在付款限定时间内支付火车票费用，否则订单将会取消。其次在支付页，也向用户推荐相关的保险服务，比如铁路乘意险，又分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险。「购买返程」其实一个非常便捷的功能，但12306设计的层级太深了，而且没有加上一键返回首页或订单页的按钮，用户如果想退回到订单页或首页，需要不断点击返回，操作路径实在太长。体验陷阱底部菜单设计了三个按钮，违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用，但是菜单栏的三个按钮权重设计得一样高，取消订单和购买返程这两个按钮，严重干扰了用户的选择，降低了操作效率。支付成功页当用户支付成功以后，「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务，非常便捷。不过内容的规划比较乱，体验稍差。候补下单「候补下单」是一个非常方便的功能，这个功能主要解决在当前车次没票的情况帮助乘客自动排队，如果有其他乘客退票，就自动抢票，非常贴心。这个功能也被誉为黄牛的终结者，帮助乘客自主排队。2）变更到站「变更到站」是指乘客可以更改目标站点，进入订单详情页后，点击「变更到站」按钮，点击底部的「立即变更到站」就可进入变更页面。在变更页面，乘客可以重新输入目标站点，然后再次进入车票售票页，选中需要变更的车次以后，进入订单页提交订单，变更成功。需要注意的是，变更到站只能办理一次。体验陷阱当用户点击「变更到站」的时候，如果不注意观察页面，根本感受不出原来需要在底部菜单栏进行操作，会让乘客陷入焦躁，不知道下一步从哪里进入。其次在变更到站页面，下半部分设计了很多快捷入口，比如车站大屏、约车、餐饮特产等，把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律，大大降低了用户的操作效率。3）改签「改签」是指用户可以更改出行的时间，改签的流程和「变更到站」相似，进入售票页后，选中需要变更的车次，进入订单页提交订单，改签成功。需要注意的是，车票改签只能办理一次，开车前 48 小时以上，退票费为票价 5%，24 小时至 48 小时之间为 10%，不足 24 小时为 20%。退票费最少 2 元起步。4）退票「退票」是指用户可以退掉已经购买的车票，退票流程比较简单，点击退票后，进入退票确认页，点击确认退票成功。需要注意是，距离开车前 8 天以上的不收退票费，其他的时段将会根据列车开车前的时间收取手续费，最高 20%。迭代建议在用户点击退票的时候，应该出现弹窗，再次提醒用户是否确认退票，这样能避免用户误操作。这就是尼尔森十大原则的容错原则，帮助用户从错误中恢复，将损失降到最低。5）购票后当乘客购买车票后，12306 的首页会加入一个行程的版块，向用户展示最近的行程详情，其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好，直观醒目地告诉乘客最近的行程信息，通过外部触发避免乘客忘记行程。行程页这个页面从上至下包含四个部分，头部是乘客详细的车次信息，比如出发时间、经停站、天气等；中间是车票信息，包含检票口、座位号、车次和乘车二维码等信息；接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务，比如餐饮预定、酒店预定等服务；底部是关于出发站、到达站的天气预报信息和优惠服务等信息。细节侦查行程页把乘客的出行拆分为 3 个场景，出行前服务（提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定）、车站/列车服务（提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航）和到达服务（遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航），这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。② 飞机票「飞机票」就是为用户提供飞机的票务销售，用户需要输入出发站、终点站和出发时间，如果携带孩子或者婴儿，还需要单独勾选。飞机票同样支持改签和退票。1）售票页售票页的内容非常简单，在头部，用户可以左右滑动选择时间，页面内容以 Feed 流向用户展示详细的航班信息，其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏，用户可以进行筛选设置，还可以根据价格高低和出发时间排序。2）选择舱位选中航班班次以后，进入到「选择舱位页」，在这个页面可以查看到航班的详细信息，比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级，比如经济舱、商务舱和头等舱，选中后，即可进入预订流程。拓展阅读为什么同一架飞机同一个经济舱飞机票价格不一样？这是因为一个飞机的不同舱位实际上是不同的产品，所以座位有不同的等级，故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。3）订单页在订单页，可以查看到订单的详细信息，包括收费说明、退改说明等，在用户添加乘客以后，就可以提交订单。这里需要注意一下，如果乘客携带孩子或婴儿，需要添加儿童出行人。体验陷阱当乘客勾选了「携带儿童或婴儿」的选项以后，在订单页准备支付的时候，系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加，或直接给出对应的功能跳转链接，这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则，不仅在用户犯错之前没有给出提示，犯错了还不给与指导，真的非常糟糕。③ 汽车票「汽车票」为用户提供客车的票务销售，用户输入出发站、终点站和时间以后，就可进入售票页。汽车票的订单流程非常简单，在选中客车车次以后，添加乘客支付费用后，订单即可生成。体验陷阱用户在选择「达到地」搜索框输入地名时候，应该提供模糊搜索，比如输入湖南的地名，应该为用户提示相关联的车站。④ 空铁联运空铁联运，顾名思义就是把飞机和高铁这两个产品组合在一起销售，支持用户一站式购买“飞机+高铁”的联运行程，只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下，为用户提供飞机+高铁的转运方案。这个功能对于乘客来说，支持一站式购买“飞机+高铁”车票，可以节省购票时间，非常友好。⑤ 铁水联运和空铁联运一样，这也是一个组合产品的销售，支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样，我们就不必重复。⑥ 雪具快运12306 还推出了一个雪具快运的服务，为广大旅客提供多种个性化雪具寄送产品服务，还支持随车办理或上门办理寄送服务，目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单，采用预约制，选中服务后，填写用户详细信息，支付成功后，订单生成。⑦ 小结作为 12306 最重要、最核心、最复杂的功能，从这个版块的内容拆解和实操体验来看，可以看出 12306 确实已经解决被誉为全世界最复杂的抢票算法逻辑（笔者通过实操测试，几乎都能买到票），特别是在春运这种会出现超过上亿用户抢票场景，真可谓非常不容易。不过从用户体验来看，非常一般，甚至有很多不合理的设计。2. 出行出行是 12360 结合了乘客在出行的场景中潜在产生的需求设计的服务，有结合车站商家的在线点餐，有结合当地地域特色的旅游服务，还有约车、保险、酒店等服务。这些服务，多数由第三方合作方提供。① 餐厅特产「餐厅特产」是一个为乘客提供在线点餐的服务，在乘客输入列车车次以后，就可以进行点餐，支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好，不仅解决乘客在乘车前的就餐问题，为车站的商家引流，还可以增加平台的变现方式。② 铁路游「铁路游」是 12306 结合旅游出行的场景，为乘客推出的一项旅游服务，包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好，但是版块目前设计得比较简单，内容也比较少。③ 约车「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求，用户在出行的前后都有用车服务。为乘客提供约车服务，不仅能增加变现方式，还能方便乘客出行。通过实操体验，约车主要由第三方合作方提供服务，比如曹操出行、T3 出行等公司，为乘客提供出租车、品质专车和商务车等车型。④ 保险保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险，在乘客购买铁路的订单页就会向乘客推荐，乘意险价格低，保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供，主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。⑤ 酒店酒店这个版块的内容相对夯实，不仅有新客大礼包这样的用户权益，还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员 VIP，包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员，相对其他版块而言，这个版块花了比较多的心思。⑥ 铁路商城铁路商城是 12360 以乡村振兴·帮扶推介为主题打造的一个商城，包含了帮扶专区、优选好物、兑换专区、今日特卖等内容，其次还支持企业集采，批量购买。⑦ 小结从这个版块，可以看出 12360 其实结合了用户吃穿住行的刚需场景设计了对应的服务，有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差，事实上可以参考像顺丰速运、智联招聘这些 APP，通过内置小程序的形式来设计，完全可以把这些版块让第三方单独设计和维护，同时还能为用户带来更好的体验。3. 会员铁路畅行会员是中国铁路统一对外会员服务品牌，开通畅行会员不需要花钱，畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等，主要包含积分权益，兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋，也没有太多价值的内容，可以看出 12306 在用户运营方面比较欠缺。4. 订单12306 的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达 12 种订单，从这些订单类型可以看出 12306 的服务特别多。体验陷阱这个设计实在太糟糕，严重违反了 72 效应。琳琅满目，花枝招展，让用户在这个页面几乎迷失。更糟糕的是，当你有一个非常重要的待支付订单，这个页面竟然没有角标提醒，最终你会因为这个糟糕的设计打乱自己的行程计划。四、内容服务内容服务是帮助产品实现用户留存和运营的版块，不过从 12306 的内容设计来看，整个产品的运营手段比较少，所以我把 12306 现有设计的功能拆分为便捷功能和向导功能。1. 便捷功能以下这七个功能，对用户而言，是非常便捷、友好的功能，可以帮助用户在出行的旅途中获取很多帮助。① 车站大屏「车站大屏」是一个非常贴心的功能，通过这个功能，可以为用户提供车站的实时列车信息，非常方便。大屏详情页可以拆分为三块内容，左上角可以切换全国各地的火车站，头部还有搜索框，为用户提供车次的查询，主体内容是当前车站向西的车次信息，包含发车时间、候车室、检票口和候车状态等。1）车次详情页进入列车的「车次详情页」，可以查看当前车次的完整信息，比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面，还提供了「关注列车」的功能（关注后并无关注数据，显得很鸡肋），以及直接预订当前车次的入口。2）车站详情页「车站详情页」就像一个站点的主页，为用户提供完整的车站信息查询。这个页面可以拆分为四块，头部可以切换其他站点，并提供当前车站的天气情况以及车站基础信息。金刚区位 8 个功能入口，包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间，底部是车站附近周边的酒店精选。迭代建议这个页面把车站当做一个主体，聚合了一个车站完整的功能，其实挺有创意，但页面隐藏得很深，如果不去拆解，几乎很难发现，很是可惜。我认为完全可以提高权重，升级为一级栏目，代替会员，或者和出行栏目进行整合升级。② 站内导航「站内导航」提供目标车站的 LBS 导航，对于乘客来说，到达一个陌生的站点，需要清晰的指引，这是一个非常便捷、温馨的功能，能帮乘客解决很多问题。不过这里有一个莫名其妙的设计，那就是进入这个功能之前，系统提示请摇“8”字校准手机，事实上这里是一个加载动画，但是画面和内容却误导了用户，我甚至每次进入都傻乎乎的摇动手机。③ 临时身份证临时身份证是一个非常重要的功能，12306 现在支持 APP 在线申请，极大方便了乘客的出行。申请流程也比较简单，填写个人信息，验证审核通过后，就可以生成电子证照使用。每个人每个月有 3 次申请临时乘车身份证机会。④ 遗失物品这是一个非常贴心的功能，如果你在乘车的过程中不小心丢失物品，可以通过这个功能登记，输入你的详细信息就能登记成功。⑤ 重点旅客这也是一个非常贴心的功能，主要为老年人、残疾人服务，通过填入你的信息，列车会根据你的情况提供优先进站、协助乘降等服务。⑥ 爱心版爱心版就是长辈版，专门为中老年用户设计的版本，在用户中心切换后就可进入爱心版。整个版本设计得非常简洁，操作步骤也比较简单，对中老年用户比较友好。⑦ 英文版英文版在用户中心的设置点击语言即可切换，整体的版本设计得直接简洁，用户体验不错。⑧ 小结从这个版块可以看出，一个产品如果以用户为中心去设计，是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能，过往我们只能提前出发去车站排队办理，但如今 12306 已经把这样的痛点解决，为用户节省了大量的时间。2. 向导功能以下 8 个功能，虽然属于出行向导，不过体验下来，感觉用户体验比较差，很多功能完全无法弄懂它的设计目的是什么，显得非常鸡肋。① 快捷退票「快捷退票」这个功能的设计，让人摸不着头脑。从操作流程看，首先需要输入用户的详细信息，包括姓名、身份证号码和手机，其次需要进行人脸核验，到了第三步还需要选择车票的日期车次，在最后的退票操作页面，用户点击退款后，没有和用户再次确认就直接退票。整个流程体验下来，非常糟糕。体验陷阱这个功能和订单页的退票感受不出来有何区别？如果用户要退款，不如直接去订单页进行退票，操作步骤简单，一目了然。其次不支持自动导入用户的购票信息实在太不方便，需要通过选择车票购买日期和车次，这个设计实在让人生气和愤怒（我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来，又再次重复前面两个步骤才到这个步骤）。② 联系方式这也是一个看不懂的功能，进入页面后，需要用户输入乘客的详细信息，但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同？更糟糕的是，当你把自己的电话号码、身份证信息填入后，系统会显示核验成功，然而当你再一次进入，页面内容还是和之前并无区别，你不知道自己是不是还要重新输一次？③ 时刻表「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息，但这个功能「车站大屏」几乎已经包含了，这个功能显得意义不大。④ 查票价这个功能非常鸡肋，因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息，相反在这个页面，根本无法看到价格，因为价格的字体大小只有 20px，乘客几乎很难注意到。⑤ 查代售点这个功能主要为用户提供全国各地火车票代售点的查询，不过在互联网技术发展到今天，火车票代售点越来越少了。从 12306 采集的信息来看，部分代售点缺少电话等关键信息，对用户来说，比较鸡肋。⑥ 起售时间这个功能为用户提供各车站每日的起售时间，属于一个低频功能，可以解决乘客某些极端场景的需求。不过在我体验下来，比如通过此功能查询 1 月 29 日的车票，显示北京站起售时间为 10:00，但是在火车售票版块，我也可以直接购买 1 月 29 日的车票，这让我比较疑惑这个功能的价值在哪里。⑦ 正晚点「正晚点」同样是一个鸡肋功能，而且还需要输入准确的车次才能进行查询，车站大屏已经完美可以取代这个功能。⑧ 列车状态「列车状态」比正晚点都还鸡肋，让人愤怒，因为你需要输入正确的出发地、到达地和出发时间，对了，还有正确的车次才能进行查询，这样的操作成本比下载 12360APP 都还麻烦。⑨ 小结从这个部分的内容拆解和操作体验来看，12360 的产品设计得不够细致和贴心，很多功能就像是硬生生塞进去一样，滥竽充数。其次从他们的产品迭代记录次数可以看出，近 1 年更新时间只有 5 次，也许每一次都是在做加法，没有想过做减法，所以导致这部分的功能显得鸡肋而且有很大缺陷。五、思考总结通过对铁路 12306 的全面拆解，接下来我将从内容层、功能层、体验层和视觉层进行总结。1. 内容层12306 整个产品的内容设计，用一句话总结，可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务，比如酒店、约车、点餐、商城等，甚至还有空铁联运、铁水联运这种多场景的组合售票方式，不过在实际的版块内容打造中，则显得比较空洞，体验一般。这个产品，可以说几乎没有创新点，这主要也是由于它是由国有企业设计运营，背景极其复杂，设计目标也飘忽不定。2. 功能层在 2015 年之前，铁路 12360 承担了被誉为历史上人口迁移最大的春运的抢票工作，那时候一票难求，春运去 12360 就像是一场噩梦。不过在经过多年的升级和优化以后，目前 12360 的购票效率非常高，经过笔者多次的测试和调研，目前通过 12360 购票已经不再是难事。而且还设计了候补抢票这样的功能，帮助用户解决买票痛点，可谓非常贴心、友好。3. 体验层铁路 12306 的用户体验，非常一般，我在这次的产品拆解中至少侦查出了 20 条体验陷阱，这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页，这完全就是把用户当成傻子一样看待，其次还有一堆数不清的鸡肋功能，对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦，更能减少我的焦虑。4. 视觉层作为一个 UI 设计师，在拆解 12306 的产品过程中，我对整个产品的设计感到绝望。首先，没有做到统一性，整个产品毫无设计规范，比如卡片的圆角、品牌色、版块间距根本不统一，这样的视觉体验一眼望去就非常糟糕；其次，图标、活动图、橱窗图以及详情页的设计毫无美感，满满的山寨 APP 风格，特别是订单页的 ICON，花花绿绿、琳琅满目，连最基础的统一都没有做到。六、后记作为一款国民级用户 APP，铁路 12306 仿佛陪伴了 80、90 后的青春。还记得 10 年前老家是黑龙江和河北的大学室友，每年春运开启之前就为了回家的火车票犯愁，不仅要去遥远的火车站排队，很多时候还可能空手而回，那便是最初对 12306 的记忆。如今十年过去了，12306 解决了亿万人的出行抢票需求，让我们在春运的路上，可以轻松购买一张回家的票。但下一个十年，我更希望 12360 的产品团队，可以重视用户体验设计，让我们不再掉入那些体验陷阱。参考文献：易观千帆-铁路 12360APP 数据分析七麦数据-铁路 12360APP 数据分析中国铁路 12306 官网尼尔森十大原则《设计的陷阱：用户体验设计案例透析》- 乔纳森·沙利亚特欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/12306-app
定义 组件 原则 更多设计规范的相关教程：案例实操！从零开始教你构建产品颜色规范前言这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。阅读文章 > 一、如何「理解」交互规范说起设计规范，大家应该都不陌生，一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用：产品设计：保障产品内不同模块的设计一致性，同时提高不同设计师间的设计、协作效率研发开发：通过定义的标准规范，提高流程、组件的复用率，提高整体开发效率用户使用：让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成，在全局原则的指导下，侧重不同的维度和内容分别展开规范的定义，最后再合到一起形成一份完整的设计规范。从用户体验要素来看，视觉主要是在「表现层」「框架层」进行规范的统一，主要包括：形、色、字、构、质、动 六个层面。而交互角度相对抽象，主要针对于产品的「结构层」「框架层」入手，定义统一的交互规范，指导页面、流程搭建和组件使用规则。包括：全局原则、页面布局、通用流程、标准组件、文案规范。整体维度呈“从抽象到具体的总分关系”，不仅对产品的各个维度都有具体的交互指导，而且不仅能保证长期使用，避免重复返工；同时也便于囊括后续的迭代内容。而这些内容，就是我们通常定义的交互规范，也是交互参与定义设计规范的发力点。有了对于基本认识和搭建框架之后，我们来详细聊聊如何定义交互规范具体内容。二、不同阶段应该定义哪些交互规范？产品有不同发展阶段，设计规范同样也有，不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多，保证投入产出比最大化；同时也要构建一个合理的规范迭代思路。产品探索初期：该阶段的产品核心目标是「验证产品或商业模型」，业务需求都是小步快跑、频繁迭代。产品处于从 0 到 1 的野蛮生长状态，存在着“先满足功能，再优化体验”的情况，导致该阶段的产品体验往往不太过关。搭建目的：通过定义原则，梳理关键页面和流程，搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断；从页面到流程，又能对应设计参照标准；同时业务可以在规定的框架下发展，不仅让产品体验的根基牢固，而且不会限制功能设计自由。搭建范围：「全局原则」「页面布局」「通用流程」产品稳定发展期：该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。虽然探索期定义了产品原则、布局和流程，但探索期产品的自由生长，会导致不少设计细节不一致，从而影响了产品整体的体验和效率。搭建目的：通过回溯整理过往设计，沉淀优化成完整的交互规范。再根据规范统一产品体验，进一步优化流程和效率， 让整个产品体验达到相对稳定的状态。搭建范围：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」三、如何「定义」交互规范1. 定义交互规范的原则与行业通用的设计规范（如 TDesign、AntDesign）“大而全”“通用”的特质不同，一般团队内构建的设计规范都是源于某一个产品或业务，主要的特点是“专精”。专注于「业务」本身，主要是「团队内成员使用」，追求的是投入产出比最大化。基于此背景，当我们在定义「交互规范」时，有三点原则：原则一：保持规范的业务性。设计规范既要贴合业务场景归纳完整，同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划，尽量富有前瞻性，这样定义的规范不仅能覆盖当前需要，同时后续也能更好地迭代。原则二：保持规范的专注性。有的放矢，明确内容优先级，避免盲目追求大而全和形式主义。对于优先级高（覆盖面广、复用率高）的关键内容重点描述；优先级低（逻辑简单、认知一致）的内容可简要描述，避免事无巨细降低效率。原则三：保持规范的生长性。设计规范不是一成不变，而是跟随业务发展不断迭代完善的，所以需要阶段性的回顾规范。遇到规范未能覆盖或无法指导设计的地方，及时修订同步团队，避免墨守成规，固步自封。最后，还有一点建议：在定义规范时，可以站在前人肩膀，适度参考行业设计规范，能复用用的直接参考，具有业务特性的再集合业务综合考虑，使整个规范制定效率更高，科学性、指导性更强。在找到自己当前所属的产品阶段、明确要建立哪些设计规范后，具体应该如何进行落地执行呢？建议从以下 4 个步骤入手。2. 第一步：定义规范分类如上文中提到，一个完整的交互规范分为：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度，但每个维度具体含有哪些内容，都是不一样的。仍然需要根据实际业务需要去定义，这样才能尽量保证没有遗漏，也更好为下一环节评估工作量。通用的做法有两种：方式一：整理业务场景下不同的页面、流程等，并进行抽象合并。「全局原则」「页面框架」和「通用流程」具有强业务导向，可以采用此方式。以「页面布局」为例，就需要将关键页面按统一颗粒度收集（按层级或按场景等）。方式二：参考行业通用规范的定义，先罗列完整，再根据产品实际业务需要进行增删改。「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀，可以采用此方式，例如下图组件的梳理。最后可产出如下图的规范分类和具体内容。（可以列的不是很全，后续补充具体部分内容时持续维护这张表。）3. 第二步：确定分工排期有了具体内容作为依据，便可以根据此进行排期分工。分工原则：推荐按规范分类进行分工，一个大的分类由一人负责，保证专注性。同时团队交互最好都能参与，保证后续对规范更好的沿用。排期原则：「定义规范」和「输出需求」两者经常要并行处理，此时提高效率，控制投入产出比就很重要了，我们需要明确优先级，先做什么后做什么。有 3 个思路可以综合参考：并行的思路：在定义完「全局原则」后，剩下的页面、流程、组件、文案都可考虑并行定义，彼此之间没有明确的依赖项。迭代的思路：近期有迭代的版本，如：即将改版的模块、反馈较多体验较差的模块，其中涉及到的页面框架、组件可优先定义。复用的思路：某些典型页面、典型流程、典型组件涉及面广，许多需求的设计都将借鉴参考，亦可优先抽象定义。4. 第三步：统一撰写原则设计规范是由不同的设计师一起合作完成，所以我们尽量在一开始，就需要统一规范的撰写和展现形式。以此提高后续合并的效率，同时又能保证其阅读体验，让其它使用者能够更好遵循。对此，我们定义了几个关键原则：目录完整：高效检索，快速让使用者找到需要的内容。原则清晰：抽象的内容往往含有许多概念和原则，需要让使用者先理解再参考，才能保证后续使用正确、举一反三多图少字：没有人喜欢看字，图片更容易吸收搭配案例：让使用者更好的代入场景，理解和使用规范。5. 第四步：定义具体规范 前面铺垫了许多流程性的内容，就像我们日常输出设计需求一样，大家或多或少在工作中都有遇到过。接下来，将重点聊聊，我们具体的内容应该如何定义。依然分成 5 个环节一一讲解。① 全局原则目标：明确影响整站各个模块、各个页面设计的原则和规范，指导我们后续各种规范的定义和设计。而全局原则也分两种，设计原则和业务原则两种。设计原则：每个完整的设计规范都需要包含的内容，如：设计价值观、设计准则。看似相对务虚的东西，实则影响后续整个设计方向。这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼。具体定义方式可参考：你为什么需要设计原则？https://zhuanlan.zhihu.com/p/246430795业务原则：源自实际业务本身产生的问题，行业内没有标准定义。需要具体问题具体分析，推导出具体目标，最后再统一制定规范解决业务问题。举一个实际的例子便于理解：全局 Z 轴定义明确问题：整站层级高度没有统一定义，导致不同控件间相互遮挡，没有统一规则。需要定义全局 Z 轴规范，统一不同场景、页面、组件的高度。梳理借鉴：统一梳理相关场景、页面、组件，明确需要定义的范围。再查找行业规范，有无参考借鉴。（如 Z 轴定义，可参考 Material Design）定义规范：最后通过最具代表性的场景进行展示全局原则没有维度高低之分，例如可能全局涉及到的「右键菜单」也能被定义成全局原则。不必盲从行业交互规范内庞大且抽象的原则。只要能够实际解决你业务的需要，能够覆盖整站各个部分，都可以纳为全局原则。② 页面框架目标：梳理整站所有关键页面，整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。页面框架的搭建一般由四个步骤组成：第一步，收集页面：根据早期定义的规范分类，收集展示所有相同层级的页面。这些在定义规范分类时，应该已收集完成。第二步，框架布局：提取共性，搭建框架和布局，明确页面大的区域划分和结构。（TDesign 布局详细指南）第三步，功能分区：基于框架布局，细化区域内具体的业务功能属性，如：导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容，同时也是最难定义的。主要原因如下：定义太细，担心缺乏前瞻性限制后续设计：定义越细灵活度就低，后续改动和限制性就越高。为避免这种问题，推荐在定义关键页面时，按输出设计稿的思路：整理「信息架构」定义「功能分区」，这样后续拓展性和前瞻性更高定义太粗，无法定义出明确的功能分区，担心缺乏实际指导意义：同一区域有些页面展示操作，有些展示导航。从规范角度好像不应该，但实际套在各个业务内却又合理。当遇到这种无法达成一致的情况时，建议就不定义具体的“功能分区”，避免因为盲目追求统一而限制实际设计。而可以采用“穷举举例”的方式，将该布局下可承载的内容均展示出来，既可以起到参考意义，又能供后续沿用达到统一的效果。第四步，加入案例：将刚刚定义的布局框架与功能分区，与实际案例完整结合，便于后续理解和沿用。③ 通用流程目标：梳理整站所有流程，对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。“可复用的流程”是指：在多个场景下，不改变其原有业务逻辑的情况下能够“既插既用”。例如：登录注册流程、扫码关注流程、分享流程等等。往往一个通用流程中，不同的步骤亦可以打散，重新拼装成不同的流程，以适配具体的场景使用。下面就举一个具体的例子：注册流程。一般完整的注册流程如下，通过不同的入口触发后进入，通过一定步骤后注册成功。当业务有了进一步需求，需要通过插件快捷登录时，步骤便可以重新组合，再适配具体的场景。对于设计师要做的，就是识别具体的通用流程有哪些，并将其给「步骤化」串联起来。当有新的需求来的时候，判断能直接复用，还是需要重新组装，亦或是新增步骤。而这样拼装的思维，恰好对应了研发搭建流程时的思路。通用流程对于他们就是将不同的步骤进行组合起来。当遇到不同场景时，再以搭积木的方式进行拼装。而具体的搭建步骤也是由两个步骤组成：1.第一步，收集流程；2.第二步，抽象步骤。具体方式上面已提到，就不过多赘述。④ 标准组件目标：将产品内使用过的组件整理成“标准组件”，统一定义规则，让后续设计和研发时能直接调取组件，提高设计和研发效率。其实行业中已经有很多通用组件，可以快速调用。但由于不同业务的复杂度不一样，也会生成自己独特的业务定制组件。同时，产品持续在迭代，也很难能抽出时间单独定义组件。故基于这个背景，结合“需求设计流程”和“组件整理流程”，有两种高效定义标准组件的方式。方式一：调用行业通用组件第一步，业务设计确定基本逻辑。第二步，挑选行业通用组件，增加业务规则。（一般开发在搭建产品初期时，便会选择一家行业组件进行使用，而组件也仅能在这家提供的组件中挑选）第三步，视觉根据全局视觉原则，设计新的样式。第四步，将交互规则、视觉样式合并，统一成标准组件。基础规则直接引用行业组件已定义的内容，场景规则按需补充。方式二：业务定制组件第一步，进行正常的业务设计。交互根据需求搭建原型，视觉设计具体样式。第二步，判断组件是否通用，是否可复用到其它场景。例如：分享对话框，不同的内容分享都能够用得到，像这种就是可抽象成标准组件的典型案例。第三步，定义标准组件规范。简单的组件展示具体样式即可，团队内设计师基本认知一致，无需重新学习。而复杂的组件为保证后续的正确复用，建议包括以下内容：1）更新日志：因为组件是变动最多的规范，需要明确具体的版本和改动点2）组件定义：简要介绍用途和使用规则，如对话框定义：必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。3）组件结构：介绍组件构成、功能分区、分区定义，详细展示不同分区内具体信息和对应规则。4）使用场景：详细区分多种场景下不同的使用方式，明确给予使用指导5）设计方案：备选，如果比较复杂的组件且涉及到流程中的关键环节，建议可以考虑复制一个完整的设计方案嵌入其中，便于团队成员理解沿用。第四步，跟研发沟通，封装成标准组件。这一步是非常关键也是重要的一步，这将大大提高我们后续的组件复用率，降低重复性走查的耗时。推荐使用 CoDesign-设计规范功能点击体验 CoDesign 小程序，上传「组件库」后能够按目录自动生成规范文档，同时将自动标注和切图，大大提高研发开发标准组件的效率。⑤ 文案规范目标：将产品内各个场景内文案进行整理，帮助业务更准确表达意图，让设计师更好沿用，同时让用户感受到一致的产品风格。文案就像“产品对用户说的话”，不同的人说话方式可能并不一样，没有绝对的对错。但清晰明了的语言表述，让用户更容易理解；符合产品气质的语气，能拉近产品与用户的距离；统一的文案描述，又能让用户在整站一致的语境下体验产品。需要定义的内容，包括但不限于以下 3 个部分：语言：语言是指我们通过什么样的规则来组合文字，让它形成一种惯用的表达方式。例如语句简洁明了，不过度修饰，避免重复描述，使用简洁清晰的语序，帮助用户快速理解；例如用词精准易懂，使用简单、易于用户理解的词汇，避免使用专业术语，或过于口语化的表述。单纯说规则可能太虚了，在实际定义规范时，还要如下图所示，加上实际案例示意避免误解。语气：语气是可以体现产品气质和风格，定义时要结合全局原则内的设计价值观，明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时：俏皮的文案可能是：网络开小差，请稍等一下而正经的文案可能是：网络异常，稍后重试。书写规则：主要包括常用词汇的书写方式，例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意，例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的，也是接地气的部分。具体使用指南：以上「语言」「语气」「书写规则」3 个部分，是构成全局文案的基础规范。如果有充足时间的团队，可以考虑再结合实际业务，分别定义不同场景和组件下具体的使用指南。如下图：最后再附上各个行业内定义文案规范例子，供大家参考：B 端产品文案指南：https://www.yuque.com/linyecx/dragonAntDesign 文案规范：https://ant.design/docs/spec/copywriting-cnClarity Design 文案规范：https://design.teambition.com/doc/introduction国家标点符号用法：http://www.moe.gov.cn/ewebeditor四、如何「推进」交互规范定义完交互规范，后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。1. 团队评审，达成一致规范的定义不是一个人的事情，而是一个团队事情，它将关系到每个后续每个人的设计产出。所以在制定规范期间，应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程，更是让团队达成一致、大家更深入了解如何使用规范的过程。注意，参与评审的人不止是设计师，当然也包括具体的业务开发，很多时候我们会得到新的思路和启发。2. 善用工具，沉淀规范规范搭建的过程中，有很多痛点：组件库需要多人参与维护和创建，容易造成冲突内容丢失；同时沉淀规范文档时，需要图片逐一复制、粘贴到文档内，更新时又要重复一遍这样的操作。而这些问题，使用 CoDesign 设计规范功能，就可以有效的解决提高效率。首先组件库支持多人同时维护，差量更新；其次组件库上传后，可以自动生成/更新规范文档，避免反复编写文档，整体提效；最后当组件库有新版本时，会自动提醒团队内其他成员进行更新，保障团队设计一致性。3. 运用规范，指导设计搭建规范的过程其实也是整体设计走查的过程，我们会发现有些设计可能有体验问题，或不符合规范。每当这个时候，我们就需要对这些设计进行标记。在规范定义完成之后，迭代排期优化线上的设计。而在实际设计使用过程中，可能又会发现规范无法满足的地方，此时又可以展开新一轮的提炼和总结，再反哺规范，形成正向循环促使设计和规范不断完善。五、写在最后在前言的时候就有提到「交互规范」只是整体规范中的一部分，最终是需要与视觉合并成一份统一的设计规范，指导后续具体的设计。具体的合并方式，在定义的章节内已有提到，就不再赘述。最后，我一直认为好的设计规范是提高设计效率，引导设计方向，而不是因为设计规范而局限了具体业务的设计，如果这样，还不如不去定义。欢迎关注作者「腾讯CDC体验设计」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/global-interactive-specification-formulation
字体 笔画 字形 设计师在进行设计时，标题常常会使用醒目、装饰性强、具有视觉冲击力的艺术字体，以便能快速吸引受众的注意。良好的标题字体能准确、快速的传达美感并表达设计的理念，本期推荐 28 款适合运用在标题的免费商用艺术字体。往期回顾：视觉设计师来收！免费商用字体推荐：卡通体篇（13款已打包）本期推荐的是免费商用的卡通体，此类字体非常适合运用在可爱活泼、轻松休闲的设计中，会有不俗的表现力，常常能达到“画龙点睛”的效果。阅读文章 > 字形方正，结构均匀，重心线比中心线稍高，字面偏大，笔画纤细，转角处都加上了小圆角，给人以亲切感。字体整体规整瘦长，看上去十分地清新雅致。字体笔划横平竖直，但并不锋利，作者给笔划末端所设计的圆角也让整款字体显得更加温润平和。是一款细长形字体，笔画纤细，没有弧线，简约时尚，富有节奏与灵气，具有很强的设计感和现代感。笔画修长、谦和、灵秀，撇和捺伸展流畅，模竖转折硬朗，工业设计感十足。偏傍部首做了像字标 LOGO 类似的变形，增加了变形的趣味。在简略了一些原字笔画的同时依然保持了很高的识别性。结构上选用了略扁的形态，在字形细节里，适当的圆角设计，“口”字形部件右上角的竖线设计，以及撇捺笔画的曲直对比设计，这些崭新的形态以及组合，都让这款字体具备了更多的独创性。由庞门正道以及字游空间创意工作室联合研发的免费商用字体。字形比较扁平、风格现代，字体方中带圆，简约时尚，设计的可塑性很强。字形笔画粗犷有力，用宽扁型的字面构建出厚重的字体形态，笔画细节上的修饰既增强了字体的设计感，又让字体多了一些小小的精致感。站酷高端黑的字形的长宽比采用了 10:7 的比例，字体趋于扁平，笔画简洁明朗，果断有力，字体形态表现出了独特的设计个性与创造性。整体字形结构方正有力，同时遵循笔画横细竖粗原则，达到视觉上的和谐，字体末梢采用切角设计干净利落丰富了字的形式。笔画清晰有力，棱角分明，字型饱满坚实、粗中有细，视觉上舒朗流畅、简洁优雅。由设计师卢帅与集合众多学员、设计讲师一起设计完成的一款免费商用字体。字体笔触粗实，字形厚重有力，是一款非常刚性，设计感很强的标题字体。由字体设计师胡晓波设计的免费字体，笔势节奏鲜明，字体形态表现出独特的设计个性和创造性。整体字形设计采用横细竖粗的设计风格，横线右端倾斜修饰，竖线右上角尖角修饰变形，整体视觉统一刚劲有力，结构严谨、规范、干净、整洁。数黑体字型饱满、体态中正，布白极具现代韵律，落笔厚实而简练；数黑在“图形感”和“书写感”当中权衡得当，使其能够正常阅读的前提下也不乏辨识度；特殊的笔画处理能够在字里行间流露出醒目、时尚和先锋的视觉感受。Tips：PS 或 AI 中找不到字体，请搜索名称「Alimama ShuHeiTi」即可。呈现向右倾斜 8的倾斜体，笔画横细竖粗，让字体整体和谐与平衡，并且在笔画适当部位进行倒角，来增加字体活力。还提取了传统书法中的笔锋之道，将藏锋、露锋，与现代设计手法相结合。Tips：PS 或 AI 中找不到字体，请搜索名称「DOUYU Font」即可。采用较大字面和粗壮的笔画来强化力量感。每个字体水平倾斜 8的设计，赋予了字体极强的速度感，为了让字体倾斜后也能保持稳固，设计师将整体字身设定宽扁。而起笔和弯钩上独具匠心的尖角设计，不仅突显了设计的几何感，而且方便后期进行修改。「优设标题黑」官网下载！「优设标题黑」请从优设官网下载，我们会将最新字体版本更新在此，大家记得收藏本页面。阅读文章 > 作为「优设标题黑」的兄弟版，在保留力量感的基础上，将 8倾斜去除，从斜体变为正体，减弱速度感，增加稳固的感受，同时将尖角改为圆角，让其更适用于温和的场景。优设标题圆开放下载！优设网出品的第4套免费可商用字体从「优设标题黑」发布至今已有两年多，在这款国民级字体发布后，优设马不停蹄，集结了团队的中坚设计师，继续发布了电商领域的宠儿「优设好身体」和另一个风格可爱的「优设字由棒棒体」。阅读文章 > 笔触浑厚有力，笔画曲折有度，字形个性鲜明，刚柔并济，直角与圆角的错落搭配使得字体婉转有度，落落大方，给人以遒劲有力、端正凝练的感受。字型偏瘦长重心提高，所有笔画使用直线，保留硬朗直来直去的稚气，学习了港台字型特征，使字体识别度高且具有复古、文艺感。字体结构扁平，笔画非常粗厚，同时带有明显的尖角，字体表现出非常高的稳定性和强有力的视觉表现，非常适合用于 logo 设计、标题、海报和包装等场合。字体具有典雅气质有非常有潮流感的风格化黑体作品，兼具了黑体的简洁和宋体的雅致特征， 整体字形方正，刚柔相济，优雅大方。Tips：PS 或 AI 中找不到字体，请搜索名称「WDCH」即可。站酷冠名的首款拥有家族字体（5 个字重）的公益字库。字形结合宋、黑二体的结构特点，将部分笔画转折处做圆角处理，方圆结合，厚重又不失灵动。仓耳与墨是一款包含 5 个字重的家族字体，强调厚重与力量，具有醒目、有力和前卫的特点。字体将篆刻的“刀意”融入其中，在笔形处理时模拟了类似篆刻的刀刻痕迹，同时为中和这种“尖锐”，在转折和“口”字结构上使用圆转角的处理方法，让整个字内方外圆。Tips：PS 或 AI 中找不到字体，请搜索名称「TsangerYuMo」即可。一款逆反差风格的创意字体。其笔画粗壮厚重，字型窄长，调性复古而不失现代感。笔画硬朗，力量感十足，竖勾的勾省略，更有利于视觉传播。字型比例 1:1，笔画粗度为 150pt，更适用于画面标题。字形偏扁，重心偏低。在保持字形辨识度的情况下，笔画尽可能的加粗，转折处改为圆角处理，极具有趣味性。乐字蒙黑体是“乐字”制作的一款美术标题字。它的整体字形偏长，字面结构饱满，有稳重中具备力量感的同时笔画结构蕴含乐趣在其中，使其多了一些生动活泼。欢迎关注作者的微信公众号：「艺海拾贝Design」 文件名 如何下载使用 文件大小 提取码 下载来源 免费艺术字42.1MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/art-font
需求 项目 原型 随着羊群人数的不断增加，使得大部分同事改成居家办公和线上会议。线上会议的特点不用提前抢会议，不用担心会议时长，顶着 40℃的高烧，听者需求评审会，也不知道烧了多久，睡了多久，会议开了多久....需求评审会经常被大家吐槽时间久，最终问题得不到解决似乎是无法破解的问题。我记录了最近几次 PM 组织的评审会过程，发现一些问题，并想到一些可以改变的方法。需求评审干货：需求太多怎么评审？来看京东内部的实战案例！面对功能优化类项目，如何做好需求分析？阅读文章 > 问题 1：开场一句话背景和模糊的收益介绍背景和收益必不可少，这是团队成员在初期达成目标一致的必要过程，并且通过说明相关成员能够认同该项目的价值和意义，通常一句话轻描淡写是不够的。建议：充分做好会前功课和线下沟通，保证会上快速达成一致老项目要介绍上一个版本历史数据分析结论或者用户反馈问题分析结论。新项要使用SWOT等分析方法，明确自身的竞争优势，市场规模等核心问题。竞品分析讲结论。不要挨个讲竞品，也不要讲字号和颜色等细枝末节问题（可以在需求文档中给予参考建议），注重战略层面和功能层面的差异介绍，以及那些适合自身与竞品之间的差异。本次要解决的问题，也就是具体我们要做什么。不需要复杂的论述，简单列出本次需求点，一目了然。清晰表述项目价值。讲明白本次优化能给项目带来多大的价值，以及是如何推导出来的，让团队成员信服。价值一定是可以衡量的，我们常听到项目的价值是提升用户体验，但实际既没有用户满意度等用户指标，也没有具体收益等业务指标，那这就是不可衡量，全靠感觉，项目后期对于方案的讨论分歧点会很多。不要一开始就甩锅给老板。很多PM在开会时功课做得不够，被问到一些无法回答的问题时直接说这是老板让做的，如果觉得需求有问题可以去找老板，这样的结果大家以后对于项目态度都会变成应付了事，PM自己的工作后续也很难推进。问题 2：上来就讲原型，陷入细节纷争PM 喜欢画原型喜欢讲原型应该是不争的事实，还有一些 PM 对原型的精美度要求还很高，于是需求确认前就找交互设计师按照自己设想完成交互设计，很多不完善、不合理的地方也很强硬的要按照自己的来。需求评审会上来讲原型很容易让团队成员陷入界面的细节争论不休，开发又会追问每个逻辑，评审会你一句我一句就乱套了，同这时通常设计也会与开发一边，表示出不满。建议：清晰且详细文字的描述产品逻辑及字段清晰表述产品中所有的字段、数据格式以及相应的逻辑。让开发能看懂所有功能逻辑、操作逻辑、展示逻辑，设计能看懂产品需要用户如何操作以及限制条件，通过文字能明白整体需求逻辑关系。尽量使用文字描述。我们发现当图和文字同时出现在文档中时，设计师和前端更偏向于看图，后端会细看文字描述的逻辑，这样到了打法阶段容易形成分歧，导致新的问题产生。产品画的原型会影响设计师的思考，造成设计师被带跑偏，甚至一些强硬的PM要求设计师按照原型来，这样一来设计师不想给自己找不痛快，就按照美工的标准应付完工，并没有发挥真正的价值。问题 3：需求评审开成技术评审很多时候在评审会上，开发人员会从能不能实现聊到怎么实现，然后聊到各服务端如何来配合，一聊起来就没完没了，线上会还可能随时就拉个新成员进入参与讨论，需求背景又要被重复。此时的需求还没有定论，占用大量会议时间讨论技术实现明显是不合适的，浪费大家宝贵的时间。建议：做好会议把控，控制问题讨论边界PM在会议中要起到把控的作用，会上不讨论技术实现方案，只讨论需求是否合理，技术可否实现，如果当时不能确定能否实现的，需要记录todo在规定的时间内反馈。对于一些不确定的技术问题，或可能存在争议的难点，最好在开会前就能和技术负责人了解清楚技术背景，做好功课，防止在评审会上被牵着鼻子走。问题 4：跑题跑题通常是不知不觉的，甚至全体参会人都享受其中，越聊越嗨，忘记了开会真正的目的。印象比较深的是一个方案要主管确认，主管从这个方案聊到了另一个项目，开发顺着另个项目聊到了项目进度和遇到的问题。整个评审会成为了另一个项目的汇报会，到最后也没确认当前方案。建议：明确会议目标，时刻关注会议方向PM会前要和主管确认好方案，以保证内部一致性，会上主管只要回复确认没问题即可。放下面子敢于说话。很多时候PM不太好意思打断大家的对话，这样就不能把跑题扼杀在摇篮里。总结一下，就是立足本职做好自己职责范围内的工作，承担好项目角色。如何组织一场高效的设计评审会？高手总结了这份模板！编者按：设计评审的目的和意义是什么？阅读文章 > 如何顺利通过设计评审会？我总结了3个注意事项！编者按：如何通过设计评审？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/review-meeting-efficiency
图标 用户 标签 今天和大伙分享一个非常不错的产品，那就是爱彼迎。爱彼迎（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
问卷 用户 目标 用户问卷是交互设计师工作中常用的设计工具。本文为你介绍一些接地气的实操经验，相信会让你的用户问卷更有效。更多问卷设计干货：如何设计高质量B端调研问卷？高手总结了8个步骤（附模板下载）编者按：B端设计的调研问卷该如何设计？阅读文章 > 一、问题围绕你的调研目标好的调研问卷如同好文章，是有「中心思想」的，也就是你的「调研目标」。调研目标决定了调研问题的内容和数量。你需要先把想要获取的数据和信息整理出来，并分出主次。目标内容不宜太多，通常 1-3 点。接下来再根据目标来设置问题。问题始终围绕着调研目标，不偏题，也不增加累赘内容。二、问题排列有逻辑，由浅到深问题的设置和排列要有逻辑。循序渐进，对于被调研用户来说更易阅读和理解，思路会更连贯，也不会太累。比如你可以尝试使用或结合以下排列方式：按照问题复杂度来排列，由简到难；按照问卷的填写方式来排列，单选 多选 填写；按照产品功能或操作流程来排列，从第一步到最后一步。三、隐私信息，非必要，不收集很多问卷在开篇的经典问题就是：您的年龄、性别、从事行业等等。要注意的是，这类信息要根据产品特征和调研目标来判断是否有必要收集，减少对于被调用户隐私的打探和要求。至于将这类问题放在问卷的开端还是结尾，你也可以权衡一下利弊：放在问卷开端：这类问题对于用户来说是最容易回答的简单问题，可以有效帮助用户进入问答状态。适用于问题比较复杂的问卷。放在问卷的结尾：这类问题与用户隐私相关，放在最后一定程度上会减少用户的安全顾虑。适用于问题比较简单的问卷。四、问卷用语要保持中立和客观问卷的语句尽量减少诱导性用词，尤其是避免使用表示观点的形容词。保持中立和客观，避免用你的观点来左右或影响用户的观点。举几个简单的例子：“您认为这个功能是否很难用？” 就不是个好问题，你可以使用 “如果您对这个功能评分（10100 分），您会打多少分？” 来代替。“您认为我们的产品与 XX 产品相比，优势有哪些？” 也不算是个好问题，可以将 “优势有哪些” 改为 “有哪些不同”。五、化繁为简在各个方面都要化繁为简，包括：问题要少：问题太多被调研者会失去耐心，做出的答案也不会有效；语言要精：尽量精减用词，减少用副词、形容词做不必要的描述；形式要轻：易于传播、触手可得。最好是在用户吃饭、通勤时用手机即可解决；用时要短：减少输入和操作的时间，尽量用选择代替输入填写，不要让被调用户填写太多字。六、发问卷前先做预测试当局者迷，旁观者清。长时间的投入在问卷的编写中，你对语言的敏感度会变得不稳定。问卷写好后可以先找同事或朋友做预测试，可以重点检查以下内容：问题的涵义和要求：有时你认为自己解释得很清楚的问题，对于他人来说可能并不好理解。语句的通顺性：语言是否流畅通顺，语法是否存在问题。标点和错别字：使用的标点符号和错别字都需要检查和校验。七、筛选有效的调研用户有条件的话可以对用户进行有针对性的筛选，可以根据问卷的主题、问题的类型和你想要达成的目标来进行用户选择，这样做可以减少后期对于干扰数据的清理难度。欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/7-questionnaire-design-skills
元素 画面 动画 近期完成一些视频制作，表现形式着重在 MG 动画和产品的运营宣传方向，在设计阶段遇到一些困惑，同时在摸索中不断扩充这方面的知识体系，通过工作中的实战，总结出来 4 步搞定视频设计的方法，分享出来，不知道你们是否喜欢呢？更多动效干货：让动效又快又好落地！5种动效输出格式优缺点分析Halo，这里是设计夹，今天为大家分享的是「动效格式」。阅读文章 > 一、概念动态设计是指在一定的时间范围内，静态图形连续的运动变化。英文名称 Motion Design，有的时候会使用 MotionGraphics 英文名称，一般引申为动态图形的设计。从呈现形式上可以划分为交互类动态设计和展示类动态设计，此次文章分享的设计方法，主要聚焦在展示类动态设计。二、动态设计的意义1. 设计特点动态设计具有的三大通用优点，对用户的影响力比较巨大。2. 为什么做动态设计我们之所以倾向动态设计是因为动态设计可以为产品和用户带来很多的优势，包含以下五类：三、如何进行动态设计近期一直在支持的产品宣传视频设计，均是通过以下思维模型进行设计呈现。1. 前期分析① 了解需求，收集素材首先了解需求、用户、产品、场景的信息，在初步了解后，可以从用户的预期目标，内容素材的设计方向以及动画的表现形式等维度收集核心关键词；同时确认文案，配音，音效，等视频元素是否添加，以便确认视频动画设计的节奏；② 汇总结论，归纳主题关键词通过信息收集阶段，提炼出以下设计目标和导向：使用场景：应用于可以支持视频的会场，互联网平台（如微信朋友圈，抖音）；设计目标：用户群为企业用户，希望通过视频，向用户阐述产品的功能特色，解决的问题，带动用户的兴趣，进一步了解和沟通，提升线索量，促成交易；设计导向：视频生动有趣，突出核心优势和价值点，清晰快捷传递；2. 提炼设计方向围绕核心关键词，视觉设计的可视化，通过情绪板输出设计可执行方向，包括品牌风格，动画节奏，画面元素，排版设计；动画节奏：以逐步引导深入的方式，展开视频的故事描述；品牌风格：京东云品牌的轻盈、微质感的浅色科技风格为基因进行设计；排版设计：以文本为主，图形为辅的画面设计；画面元素：运用互联网元素，比如鼠标，界面，穿插 2.5Dicon 和红黑双色扁平 icon 使用；3. 设计执行① 脚本一个丰富的成片效果，是通过多组分镜动态呈现。而分镜画面的前后关系，则是通过脚本布局搭建，在做脚本设计时，是按照以下思路进行；内容结构拆解比如这次的产品宣传视频，通过文案逻辑进行拆分，形成分镜画面的设计思路。首先根据文案逻辑划分为四大模块，然后围绕文案提炼出核心内容，视觉元素，动画节奏等，如以下分析结论：封面点题：点出所推产品，继承京东云品牌风格，强调产品视觉特征，使用几何元素构成标题核心，微质感背景烘托主题氛围；用户痛点：分析现有痛点，通过一些常用场景和用户共情。可以使用问号弹跳引导出搜索，输入问题寻找答案，凸显现有问题，面临的痛点，使用图形符号，互联网元素，进行视觉传达；总结问题：通过痛点分析，汇总出企业存在的问题。可以利用鼠标移动逐个收起，引导出产品解决方案的优势特征；解决方案：提出解决问题的方案，这是用户所需要的，也是视频中的重点。以展台+互联网界面的元素呈现，运用镜头的推拉转移，使用户的视线始终能够聚焦在所展示的内容；产品政策：落脚在产品的优惠政策，以及联系方式，运用收尾呼应的方式进行，迎合产品主题，呈现优惠方式和联系方式；脚本规划经过了画面思路的整理，这一步主要是梳理文案和画面的映射关系、画面视觉表现，以及动态效果的编排。根据设计思路和故事主题，以配音的时间线为索引，制定分镜脚本；分镜画面实现前期可以利用手绘方式，通过文字排版和元素设计的简单排布，将画面快速呈现；② 文案内容口播文案如果视频需要使用配音，前期就需要收集口播文案，根据口播文案的逻辑，定义分镜元素的时序；画面文案画面文案是需要依据视频的表现形式进行搭配，比如文本为主或图形为主的画面。文本为主：文字内容为主要表达形式，贯穿画面之中，此类表现形式是需要和需求方确定分镜画面的核心文案；图形为主：图形为主的分镜画面，可依据配音进行图形故事设计，文案则为辅助呈现，文案内容可依据画面给予自主发挥；③ 画面设计风格探索参照制定的设计目标和方向，以脚本框架为引导，进行静态画面的实现。也可出 1-2 个静态视觉和需求方沟通，如无问题，其他分镜效果依此完成。或者可以制作部分画面的动态效果，以便判断脚本最终呈现的视觉效果。画面调性风格：首先遵守品牌风格规范，传递品牌价值，强化品牌基因；其次要提炼产品视觉基因，营造差异性，比如在这次的视频中所运用的色系、画面元素的设计、文案的排版，均以品牌的视觉基因贯穿在各个画面中，并营造产品的个性。色系：依据京东云品牌风格调性，以及产品色系搭配，可以定义出以下色彩搭配规范：灰色：辅助色系，主要是进行氛围渲染、画面转场、视觉层级塑造中使用；白色：视频的主要基调，结合其他色系，营造科技风，轻量化实现，体现产品的温度；红色：产品个性的打造，重要元素使用，凸显层级，信息有力传递；内容设计图形设计：继承京东云的品牌基因，利用光影效果，使用 2.5D icon，结合线面双色 icon 进行图形设计，同时实现元素场景化，使画面更具有冲击力。文案排版：围绕核心主题，以故事传递内容的思路，进行文字的排版，运用卡片方式进行编排，便于在画面中对信息进行层级塑造，利于信息传递。④ 动画实现元素分层将画面元素进行分层拆解，依据画面的氛围场景，和元素的主次关系，进行拆分；核心内容的叙事性：核心内容是主题含义的传达，需要以动画的故事主线进行属性动画的制作；辅助元素的说明性：辅助元素是帮助用户理解产品，营造故事场景，串连分镜画面。比如流程模块的时间轴动态效果，通过逐步呈现的政策趋势，来说明政策演变的历史；背景元素的转场连接和氛围性：背景元素可以提炼出转场元素和背景氛围元素。转场元素：分镜画面之间建立层级，创建空间，流畅过渡，使内容有序呈现；背景氛围元素：提高画面的活跃度，渲染动画的风格氛围；动画编排在时序编排上可以利用入场、停留、延展、退场 4 个阶段进行元素动画的设计，这样可以保持元素动作的连贯性，元素之间的动态过渡流畅。入场：一般指元素进场，出现在用户视线中，信息逐步呈现在画面中。一般用于对用户视线的引导，内容的提前铺垫。可以使用纵深动画、镜头语言、生长动画、组合构建、多重迭代、抽象图形转换方式呈现。入场时机：利用配音语义的上下衔接的时机，进行入场动画设计，平滑过渡到对应的配音时间线上。配音的节奏快慢，决定了元素动画的节奏，所以在配音语速上，要贴合动画的整体节奏。动画速度：需要快速呈现，平均时长在 5-20 帧，画面元素分层越多，属性动画设计越多，整体画面的时间线则会更长。停留/延展动画：一般指元素在画面中需要延时停留的运动过程，帮助信息语义传递更准确。核心元素：加深用户对信息的理解，动态节奏连贯，不拖沓，时间线要保持足够长，便于用户快速浏览。在实现手法上根据故事场景进行设计；背景元素：主要用于烘托核心元素，增加画面氛围。可以使用循环背景、循环流光、粒子衬托、动态背景等动画效果实现。由于运动越快，越容易聚焦用户视线，因此作为背景元素的动画，在运动节奏上适当放慢，时间线拉长，循环使用；退场动画：一般指元素退出用户视线，过渡衔接下一个元素的运动过程。用户往往关注入场动画而忽略退场动画，因此退场动画的设计可以适当弱化，过渡引导到下一个动画就可以。可以使用硬切，抽象过渡，摇摆镜头，蒙板遮罩等动画效果实现。在节奏设计上最好卡点进行，动画形式可以根据下一入场元素的属性动画决定，也可根据整体节奏把握。元素动画实现关键帧：一般指元素在运动中的关键动作所处的那一帧。关键帧与关键帧之间的动画是软件自动补齐，这种帧可以叫做过渡帧或者中间帧。关键帧的时间和位置，往往决定了内容出场的次序，以及动画呈现的密度和节奏的快慢，在设计制作中，做属性动画参数设置时，需要关注入场动画的开始帧，以及退场动画的结束帧。属性动画：一般指元素的透明度、位置、大小、旋转、形状、颜色等属性进行的变化。参数的变化幅度，是根据帧速和时长进行制定，参数幅度越大，动效越明显，或同等参数下，时间短，速度快，时间长，速度慢。时长：从元素动画的开始关键帧到结束关键帧之间的时间线，称为时长。单位上可以用帧表达，也可以用时分秒表达。时长的设置根据动画风格，运动距离作为参照，一般一个常规的动态变化持续时间在 200-500ms 以内。运动曲线：变换的速率曲线，也就是动画中间帧的运动规律。物体的运动不是一直保持同等速度运转，所以在做元素的属性动画时，需要遵照物理世界的运动规律进行。根据元素的画面场景，采用适合的运动曲线，如入场先快后慢，退场先慢后快，弹跳曲线，则是应用在有弹跳物体的场景中。⑤ 剪辑合成剪辑：最终对分镜进行合成和剪辑，形成连贯的、有逻辑、有叙事的呈现，也可根据音效，配音做画面转场的处理；音效：根据动态节奏，还会搭配音效的辅助，提升整体的氛围和风格。⑥ 动画自查一般会从时间、运动，以及元素三个方向，结合物理世界的运动规律，结合用户视觉感知习惯进行画面走查。四、如何交付动画的交付实现，一般会有两种方式实现，代码落地和成片交付：1. 生成成片根据使用的场景的不同可以区分为 MP4 和 GIF 动画交付，可以应用在平台广告或者抖音快手等短视频平台上传播。2. 代码落地实现如涉及到动效的开发，有一部分需要代码语言实现。直接生成代码：利用软件转化成对应的代码格式，现在市场上通用的是 lottie 所生成的 json 进行；提供动效标注图：还有一部分无法直接转化为代码语言，这时候我们可以提供动效的标注图，通过研发实现，标注图规范一般包括，触发条件，对象、变化属性、曲线数值、持续时间等，可以参照以下模板给到具体属性参数；五、最后很高兴您阅读到这里，以上是我的一点思考，希望能给在看的你带来一些小思路。最后祝愿大家在工作中收获美好，困难少一点，开心多一些。欢迎关注作者微信公众号：「JDTDA」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design-2
文案 用户 产品 讲到 UX 文案，大家可能并不陌生：一个按钮、一个弹窗的文案填充，我们几乎每天都要与他接触。但即便如此，大家对他的态度通常是得过且过的：“文案嘛，有了就行，看得懂不出错就好，没什么值得注意的”。确实，作为设计师，我们关注交互流程、视觉呈现，但 UX 文案似乎从来不是我们的首要考虑；在很多时候，文案与我们的设计流程是分裂的：要不就是设计完成后再填入，要不甚至直接让产品经理来提供文案素材；文案撰写，好像从来没有被我们真正重视过。但 UX 文案真的只是一个无足轻重的辅助位吗？更多UX文案干货：4000字干货！9个方法帮你掌握UX文案写作相比美观的视觉设计，清晰的文案在界面呈现中同为重要，好的文案不止赋予产品更好的体验，也能够拉近用户与产品的距离，优化文案也常作为可用性测试后改良产品用户体验的落脚点。阅读文章 > 一、UX 文案的重要性首先，先抛结论，UX 文案并不是无足轻重，相反的，它是好的产品体验中不可或缺的一部分。并且随着时代的发展和新兴应用场景的涌现，它对于产品体验的重要性正直线拉升。在我们还将 UX 文案看作一个可有可无的流程时，一些先进的企业就有远见的意识到了它的重要性：早在 2017 年的 I/O 谷歌年度开发者大会上，三位职业 UX 文案作家就向我们展示了 UX 文案如何切实地为谷歌带来了产品数据的提升：在用户在搜索”酒店“相关内容时，谷歌将直白的文案 “预定房间” 改为了更贴合用户心智的 “查看房源情况”；这一小小的改动，带来了17%点击量提升。随着 UX 文案的价值不断的被发掘，在海外，已经有越来越多的团队将 UX 文案写作作为一个细分的的独立专业来看待。例如，在国际最大的旅游电子商务公司之一 Booking.com，曾在不到一年的时间里增加了 40 名 UX 文案岗位，达到了每 5 或 6 个设计师中就有一个 UX 文案设计师的夸张比例。二、 重新认识 UX 文案面对海外对于 UX 文案的重视度激增场面，我们心中可能不免疑惑：“不还是为页面配文而已吗？平常不起眼的工作，怎么现在就好像突然变特殊了呢？”。存在这样的误解，是因为我们对 UX 文案的认知还停留在过去，始终认为它仅仅是一个辅助位，最多起到“锦上添花”的作用，并不能真正影响核心用户体验的好坏。而实际上，与我们印象中的边缘形象不同，UX 文案（UX Writing），也叫内容设计（Content Design），所涉及的知识横跨体验设计、内容策略、用户调研，是一个多元的、完整的设计学科；旨在基于同理心与专业沟通技巧，通过合适的文字信息，在产品使用过程中为用户提供愉悦的体验，远不只是“为按钮填词”这么简单。而随着时代的发展，UX 文案的覆盖范围、呈现方式以及工作流程等都已经发生了巨大的变化；站在设计师的角度，我们希望通过以下几个方面介绍 UX 文案与过去相比发生了哪些变化，来帮助大家消除对 UX 文案的刻板印象，重新认识它在我们设计中扮演的角色，并学会运用它为用户呈现出更加优秀的产品体验。1. 从「文字」到「语言」首先，如今的 UX 文案有着比之前更广阔的范畴：过去关于文字，如今关于语言。以前，我们讲到 UX 文案，指代的可能只包含 APP 里的标题、按钮等静态文字；但如今，随着智能家居、智能车机等新兴领域对于语音交互能力展现出的强需求，以及类似喜马拉雅等播客产品的持续火热，UX 文案已经慢慢跳出了文字的范围，有了更广阔的发挥空间。想象一下，当你结束疲惫的一天回到家时，你的智能家居助手应该以怎样的语气向你问好？应该使用什么措辞能最精准地得知你的意图？这些动态的、无实体的语音内容，也逐渐成为 UX 写作要关注的重点内容。简单说，如今所有用户和产品产生交流的场景，都可以划分于 UX 写作的范畴。得益于科技的发展，UX 写作逐渐地更接近了自己最终的目标，慢慢跳出了静态页面的框架，得以真正的与用户产生有意义的、愉悦的语言的交流。2. 从「填充页面」到「主导页面」其次，UX 文案与过去最显著的不同之一是：不再仅是为页面填充文本，更多的是根据信息主导页面。以下面一个常见的对话框为例，仅有一个小小的对话框来承载超额的信息；如果根据之前的“填充页面”的观念，我们要做的其实很简单，就是根据行文规范删减、重新排列文字，试图把过量的内容塞进小小的容器。这样得到的结果在视觉上看起来可读了一些，但似乎也不尽人意。这就是典型的机械性的填充页面，信息的展现完全受制于已给页面的结构，实际上已经脱离了更好传递信息的初衷。如果我们调转思路，试着真正从传递信息本身出发，就能很明显的发现，原来的对话框最大的问题不是文字长短，而是信息过载---强迫用户在有限的空间里一次性确认两类信息：更改时间和通知参会人。而在我们上面的方案里，这个问题并没有被解决。当我们真正开始用信息主导页面，应该做的是将一页多个问题拆分为每页一个问题，分步响应用户，对冗杂的信息进行分解，以真正创造清晰有效的对话。如果体验没有达到理想的效果，通常需要改进的是整个设计，而不单单是文字。我们需要逐渐去理解的是，页面在根本上是信息传达的媒介，一昧的修改文本来适应页面，反而是本末倒置的做法。3. 从「单纯可用性」到「体现品牌声音」目前，UX 文案通常仅需要保证基本的功能可用性；即使是已经有文案规范的团队，更多的也是将其作为辅助位，保证文案“有一致性，不出错”即可；对于品牌形象、差异化的诉求则基本一笔带过。相较于 UX 文案，大家习惯用 Icon 的质感、品牌色的搭配等视觉的呈现去传递品牌声音，因为这样的效果简单直观，是可以直接被“看得见”的，这点无可厚非。但随着语音交互的兴起，以及近年来轰轰烈烈的品牌去色化趋势，单纯的利用纯视觉的呈现来塑造品牌形象变得没那么万能了，与此同时，UX 文案对于品牌形象的重要性也逐渐被发掘；我们发现，在很多时候，一句措辞得体的语音信息，或者是一句抓人眼球的标语（Slogan），就足以弥补视觉上品牌呈现的缺憾，甚至更能与用户产生共鸣。这就需要 UX 文案在保证基本的可用性的基础上，更要考虑什么才是真正适合自己品牌的声音。例如Google Earth 过去的一句经典的标语：“Hello, Earth”，这句标语完美的契合了Google Earth的品牌形象，它简洁正向，并且和产品名称之间有巧妙的双关，即代表了产品本身，也暗示了Google Earth带领用户去探索世界的功能定位。仔细观察苹果、谷歌的产品，你就会发现从他们的 UX 文案除了保证了基本的一致性和可用性外，偶尔会隐藏一些小巧思，这些小巧思与他们的品牌形象相互呼应，能让用户在产品使用中潜移默化地对其品牌形象、产品价值观形成认知，而这样与产品体验本身结合的认知构成往往更加坚固，比传统的广告宣传更容易让人信服与认可。三、 怎样做得更好，一些实用小 tips随着 UX 文案越来越广阔的范畴，我们过去熟悉的工作方法已经并不完全匹配如今 UX 文案的目标了；因为它包括的已经不仅是单纯的文字内容，更多的还有文案之间的层级结构、什么时候出现这段文字，以及这段文案向用户传递了什么情感等等，这已经超出简单的行文规则所涵盖的了。那么，我们怎么才能真的做好 UX 文案呢？我们根据以往的项目经验，总结出了除了通用行文规则之外，三个在关键节点上可以做到的几件小事，希望帮助大家能找到真正适合、高效的设计方法，并打造出优秀的 UX 文案。1. 流程——更早地加入首先，最基本也是最重要的：在流程上，永远要尽早的考虑文案问题。我们过去熟悉的设计步骤是：“先把产品设计好，将有文字的地方空出，最后再填充。”这样带来的问题是：关键的体验问题直到最后期才会被注意到，留给 UX 文案的发挥空间十分有限，能做的只是为糟糕的体验贴上掩饰的创可贴，并不能真正避免糟糕体验为用户带来的伤害。正如我们上面所说，UX 文案不仅仅是填充文字，它的核心是在产品与用户之间创造合适、愉悦的对话，所涵盖的内容几乎横跨产品体验的每个流程。因此，要想真正缔造好的 UX 文案，永远要尽早地参与到设计流程中，这样才能真正的找出体验的问题，并最大限度的发掘 UX 文案究竟可以为此做些什么，创造与用户真正有效的交流。2. 方法——模拟真实的对话其次，在我们着手输出 UX 文案时，请尽量在脑海中模拟真实的对话场景。这个方法来自于最近的全球开发者大会（WWDC22）上，苹果设计团队向大家分享的 UX 写作方法框架：“PACE”：Purpose（目的）、Anticipation（预判）、Context（环境）、Empathy（共情）。其中，在 Anticipation（预判）里提到了 “将 UX 文案想象成一种对话” 的概念，意思是在设计产品的过程中，应该把页面上的文字看作一个与用户的对话，而不只是一个静态的短语；这样能更好的帮助我们预判用户的诉求。想象在这样的场景：当你的用户在周末的晚上打开手机，开始调节明早起床的闹钟时间；你会怎么设计这里的 UX 文案呢？使用流程似乎很简单：打开闹钟 app，调节明早闹钟时间，确认设置完成。上述的交互没有问题，用户可以清晰的完成设置。但如果考虑到上面提到的 “想象成一种对话”，那这个流程就还有可改进的地方。因为在一段有效的对话中，交流应该是有来有往的：其中的角色应该有时在聆听，有时在发言；而不应该仅仅一方是单方面的输出（在上述的场景里，仅仅是用户一股脑的对闹钟 app 进行信息输出，闹钟 app 只是单纯的服从命令，这不是一个正常对话的模式）。让我们想象是自己在跟用户在交流，就能很容易地发现用户想传递的底层信息并不是 “我要调闹钟了 ”，而是 “好不容易到周末了，我明天要多睡一会”，能解读到这一层话外音，我们就成功利用“对话”预判了用户的目的。打开 ios 的起床闹钟试一下，你会发现它比我们的基础流程多了一个贴心的询问 ：“你要将此更改应用到这个定时中的所有周末吗？”；在这里，苹果实际上做了两层预判，第一层是预判绝大多数人的周末和工作日起床时间是不一样的，所以将复用的范围限定在了周末；第二层预判是在大多数情况下人们只能确认明天的起床时间，所以主选项是“仅更改下个闹钟”。简单的一个改动，就把机械性服从命令的程序，变为一个有智慧、思想的助手。如果我们在每次输出文案时，都能试着想象真实的对话并剖析，可能就能逐渐把一个“可用的产品“变成“贴心的朋友”，真正地走进用户的内心。3. 验证——大声地念出来！最后，如果你还是觉得心里没谱，不确定是否输出了合适的文案，有一条被苹果和谷歌共同推荐的验证方法，简单粗暴但有效，那就是 “大声将你的文案念出来”。就像我们刚刚反复强调的，UX 写作其实就是与用户创造有效的交谈，那么最简单的验证方法就是真正说出来，将它真正变成一段对话，然后再去聆听，最直观的感受到你的语言听起来是否自然不生硬？是否有一些不易察觉的重复或语法错误等等？大声地将你的文案念出来，如果能使你自己信服，相信也能使你的用户信服。结语最后，读到这里，相信你已经对于 UX 文案有了一个全新的认识，并对如何做好它有了基本的概念。其实在日常工作中，每个产品对于 UX 文案的要求可能不尽相同，但重要的是作为设计师，我们能意识到他逐渐攀升的重要性并真正对他加以关注。引用苹果开发者大会上的一句话：UX 写作其实就是始于对屏幕另一侧用户的好奇心，并真正怀着尊重和理解与其交流。只要能意识到这一点，相信大家都能呈现出真正有效的、令人愉悦的 UX 文案。参考文献「1」《Material‘s Communication Principles:Intro to UX Writing》by Alex Hays： https://codelabs.developers.google.com/codelabs/material-communication-guidance#0「2」《What Does a UX Writer Actually Do?》by Yuval Keshtcher: https://careerfoundry.com/en/blog/ux-design/ux-writing-what-does-a-ux-writer-actually-do/「3」《What is UX writing?》by Bobbie Wood: https://uxcontent.com/what-is-ux-writing/「4」Google I/O 2017《How Words Can Make Your Product Stand Out》: https://www.youtube.com/watch?v=DIGfwUt53nI&t=1163s「5」Apple WWDC 2022《Writing for interfaces》: https://www.youtube.com/watch?v=GRYJq0V1I_k&t=505s「6」Figma Config 2022《Working with UX Writers in Figma》: https://www.youtube.com/watch?v=pEpwOzPU1zY&t=535s欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/reintroduce-ux-writting
作者 设计师 类别 与PIXSO、优设一起，让创作变杰作过去一年，我们共同经历了太多变化创意行业，同样发生着翻天覆地的革新Pixso 作为一体化产品设计工具仍坚定地与设计师们结伴而行携手奔赴充满机遇的新时代让我们用希望的光，照亮脚下的路与 Pixso、优设一起，让创作变杰作越凛冽，越抖擞！越澎湃，越创作！ 点击体验新一代设计协作工具 榜单内容概览今年的榜单共分为三个子榜单：年度创作者榜、年度生产力榜、年度设计图书榜年度创作者榜：总结了优秀的设计团队、作者、讲师、热门文章与专题，还有十佳设计作品集和全年热门的行业新闻。年度生产力榜：汇总全年好用易用、口碑出众的软硬件产品。年度设计图书榜：精选设计工具、平面设计、产品交互、绘画艺术、设计理论等5大类型的实用设计图书。点击右侧链接查看完整榜单内容 优设2022年度榜单一、优设2022年度十大设计团队京东JellyDesign京东 设计团队Jelly Design由用户体验设计部及事业部设计团队共800+成员组成，团队专业领域涉及用户研究、交互设计、视觉设计以及前端开发，分布于北京、上海、深圳。ISUX腾讯 社交用户体验设计团队腾讯社交用户体验设计团队，负责腾讯社交网络业务的体验与服务设计，囊括用研、交互、视觉、品牌、多媒体、UI开发等，分布于深圳总部、上海及韩国首尔。58UXD58同城 用户体验设计中心58UXD负责公司全业务体验设计与用户研究的核心团队，为58同城全平台、商业平台、安居客、招才猫、58本地版等产品提供专业系统的用户研究、体验设计、品牌与视觉设计服务。百度MEUX百度 移动生态用户体验设计中心以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。腾讯设计族腾讯 设计团队汇聚腾讯全部设计团队，致力鹅厂用户体验设计。在腾讯设计族平台与您共启设计视野，实践设计价值，求索设计未来。Gtech UED佳应科技用户体验设计团队负责新加坡GTech Digital (佳应科技) 旗下B端产品的用户体验设计；与新加坡、印尼、马来的运营团队一起为全球品牌提供本地化产品设计，帮助全球品牌及中小企业搭建D2C服务能力，实现数字化转型。酷家乐UED群核科技用户体验设计酷家乐UED是由一群敢于表达态度来传递产品温度的UEDers组成，以不懈的努力去追求更优的用户体验。腾讯设计腾讯设计官方账号由腾讯设计团队共同组建而成，致力于对外分享腾讯公司级的设计方法论。VMIC UEDvivo 互联网中心用户体验设计团队互联网中心用户体验设计团队（VMIC UED），持续为用户打造惊喜体验极氪ZED极氪用户研究与体验设计部一个平等、多元且富有创造力的团队。我们秉承「致广大而尽精微」的宗旨，分享用户研究、体验设计等领域的实践与经验。二、优设2022年度十大作者彩云Sky设计语言的连接者致力于翻译国外高质量的设计类文章，以每周一篇的更新频率引入国外干货，坚持创作多年时间，内容输出既优质又高产！酸梅干超人体系化的专题创作者独立产出多个设计专题，内容涵盖B端设计和 UI 等领域，是知识体系化产出的杰出代表！大漠飞鹰CYSJUI设计自学指路明灯保姆级教程的创作者，从产品细节剖析到UI设计知识详解，在界面设计领域深耕细作，单篇5000字的干货含量，堪称UI自学路上的指明灯。黑马青年达于职场工于UI的跨界高手出身大厂的资深设计师，职场＆UI 双重跨界达人，上能帮助新人拨开迷雾，寻觅发展方向，下能探究产品细节，发现设计之美。CE青年B端设计领路人从事B端产品设计多年，擅长通过庖丁解牛般的精细刀法，拆解B端产品的整体结构，提取出干净利落的核心知识。设计史太浓鉴古知今的集大成者设计史科普第一人，善于用幽默风趣的形式，展现设计史的重要流派、人物和作品，为读者构建世界设计史的知识轮廓。葱爷视觉设计风向标从普通设计师成长为视觉总监的葱爷，总能敏感捕捉到每个视觉设计师的学习盲区和关心风向，及时送来视觉干货。邓海贝一位有编制的平面设计师作为大学副教授，能从严谨的大学课堂无缝过渡到生动的视觉教程，成为育人无数的设计师园丁，愿称为平面设计创作领域的科班代表。Clippp设计知识汪洋的拾贝人善于在浩如烟海的设计知识汪洋中，筛选出难以察觉但极为重要的细节和技巧，用简明扼要的语言，将核心干货娓娓道来。Andrew教科书级干货分享者专注于产出万字干货的设计行家，曾受邀为大厂分享创作经验。全面详尽的分享和贴心的资源打包，是让他脱颖而出的关键秘诀。优设2022年度新星夏花生她是 2022 冉冉升起的设计新星，以 160 多篇的高产速度，收获近 700 万的惊人阅读量，多次写出引爆人工智能绘画领域的热点内容，同时能精准捕捉设计师关注的问题并给出实用的解决思路，在平面设计教程创作领域亦有不凡建树。三、优设2022年度十大教程作者君小阳logo实战系列教程作者公众号“这logo怎么了”创办人，坚持每周更新，从实际logo案例中发掘底层逻辑，细细拆解制作步骤，堪称logo设计入门说明书。太阳鸽鸽AE动效教程作者7年动态设计经验，专精MG动画、图形特效、UI动效领域，分享潮流有趣的动效实例，用顶级的效果和清晰的教学分享动态设计干货。磊土视界视觉类入门教程作者分享PS、AI、AE等实操案例，擅长抓住设计新人的知识痛点，声音抚慰人心，教程清晰直白，干而不寡。做设计的小肥肥PS海报教程作者Adobe官方合作教程作者，以敏锐的观察力与惊人的想象力著称，作品饱含视觉冲击与细节，用诲人不倦的分享精神，持续产出PS视觉海报实战教程。野鹿志C4D教程作者不受限于常规的题材，坚持发掘C4D的尖端用法，教程案例夸张又不失美感，用视频配合图文，精确到每一步小操作。一六视觉PPT教程作者着重讲解PPT设计思维，层层递进，希望和大家一起靠PPT找到更多成长的 意义，告别碎片化学习。小九摄影ECP摄影教程作者专注于产品静物摄影、短视频技巧、器材体验。脑洞开阔，能从他的教程视频中感到无限的创意释放。兴趣设计师kBlender教程作者用Blender结合UI设计，分享新人也能看懂的建模渲染教程，过程详细，审美在线，对透明质感的把控炉火纯青。设计师团长视觉类教程作者优设训练营特级讲师，百万人气作者，条理清晰，教程延展性极强，知识点切入稳准狠，擅长光影与质感塑造。Asen-阿森手绘类教程作者以创作能力出色而闻名优设，无论是扁平风格、儿童插画，或者是质感满满的中国风插画，她都得心应手。不断从自己的速涂训练中总结并分享实用技巧。四、优设2022年度十大讲师梁述光优设大课堂手绘讲师安踏联名合作画师、百度特约插画师。他的《雷神山》系列插画收获千万曝光，创作的奥运人物插画，频频被运动员互动转发，被多家媒体争相报道。丁汀优设大课堂C4D讲师3D动态设计师，BIG6 STUDIO创始人，多家卫视指定合作设计师。辅助学员商业变现50W+，长期与小米、OPPO国内一线企业保持合作。BeardChicken 郁闷的鸡优设大课堂UI和动效讲师知名设计教程作者，Adobe公开课特邀讲师、影视后期设计师。从事互联网设计超十年，丰富一线商业项目经验，已助力许多设计师进入互联网企业。态爷优设大课堂手绘讲师他是央视合作插画师，电影分镜导演，长期与快手、抖音、蒙牛等众多品牌保持合作。如今作为老师，将自己的知识体系传授给更多的设计师。闫实优设私房课速涂讲师前完美世界高级原画师，墨麟集团主美术，拥有扎实稳固的科班美术基础，尤其擅长美式风格和光影速涂。杨洋优设平面实战营讲师优设训练营教研总监、优设字库项目主理人，7年教学经验，学员11000+。授课严肃认真，善于引导学员开拓自己独立思考做设计的能力。橙子优设商业插画实战营讲师优设训练营课研组长，腾讯供稿插画师，Adobe官方合作教程作者。6年教学经验，帮助学员整理绘画的思维逻辑，夯实基础，拓展风格类型。如如优设视觉设计实战营讲师优设特级讲师、MG动效设计师。授课细致入微，评讲作业时随时补充新知识点，被学员称为“举例狂魔”。张小哈优设私房课插画讲师跨界自由设计师&插画师，上海大悦城、新天地签约设计师，商业作品讨喜且卖座，艺术创作走心又有趣，曾出版绘本《创造力的形状》小毅优设 Blender 课程讲师曾负责京东大促级别的项目，落地多款上亿流量的项目。精于视觉设计和执行，拥有丰富的电商3D设计经验，曾多次与一加、VUE等合作电商营销项目。五、优设2022年度十大热门文章1. 人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器文章作者：夏花生 | 阅读量：36.9w人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器大家好，我是和你们聊设计的花生~有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。阅读文章 > 2. 堪比艺术家！被疯狂安利的 AI 插画神器 Disco Diffusion 有多强？文章作者：夏花生 | 阅读量：28.4w堪比艺术家！被疯狂安利的 AI 插画神器 Disco Diffusion 有多强？大家好，我是和你们聊设计的花生~有关注「神器挖掘机」阿文（微博 @Simon_阿文 ）的朋友，可能已经了解到他最近正在疯狂安利一款 AI 绘画神器——Disco Diffusion。阅读文章 > 3. 免费开放！人人都能轻松上手的AI绘画工具DreamStudio文章作者：夏花生 | 阅读量：16.1w免费开放！人人都能轻松上手的AI绘画工具DreamStudio大家好，我是和你们聊设计的花生~之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery，国产 AI 图像生成器 Tiamat，以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce阅读文章 > 4. 地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？文章作者：夏花生 | 阅读量：3.6w地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？大家好，这里是和你们聊设计的花生~前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。阅读文章 > 5. 从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势文章作者：水手 | 阅读量：12.1w从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。阅读文章 > 6. 腾讯出品！2022-2023 设计趋势报告：NFT 玩法应用篇文章作者：ISUX | 阅读量：2.7w腾讯出品！2022-2023 设计趋势报告：NFT 玩法应用篇背景从 2017 年萌芽到 2021 年爆发，NFT 在过去的一年内正在成为数字经济市场的“顶流”，从最初的区块链游戏项目、艺术品投资领域开始向外辐射到音乐、体育、时尚等各种形态的数字产品行业中，展现出未来对于互联网行业、金融市场甚至社会生态等领域的影响。阅读文章 > 7. 深扒！连拜登团队都在用的Figma是如何成长起来的？文章作者：陈子木 | 阅读量：4.1w深扒！连拜登团队都在用的Figma是如何成长起来的？相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿，经过多轮文章和视频的洗礼，这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。阅读文章 > 8. 免费可商用！优设鲨鱼菲特健康体来啦！文章作者：优设 | 阅读量：16.1w免费可商用！优设鲨鱼菲特健康体来啦！双 11 刚刚过去，作为电商设计师的你是不是已经开始准备双 12 的视觉稿了？阅读文章 > 9. 金三银四求职季，收下这篇5000字的上分秘籍文章作者：Cesare_玄漓 | 阅读量：9.6w金三银四求职季，收下这篇5000字的上分秘籍（附简历和作品集模板）考虑马上又要到新的一年为了让更多小伙伴能准备出更加惊艳作品集，这里我提供了一套简历和作品集的设计思路以及对应的模板，希望对大家有帮助~我们提供器与具，推崇创作思路发散，不鼓励照搬、抄袭、挪用。阅读文章 > 10. 设计师作品集封面万用套路！再送500+优秀案例打包！文章作者：Andrew | 阅读量： 4.9w设计师作品集封面万用套路！再送500+优秀案例打包！编者按：本文通过一个设计师作品集封面设计的实操案例，帮你掌握作品集封面设计，附赠500多张优秀案例打包，快来下载！阅读文章 > 六、优设2022年度设计专题1. 热门AI绘画神器大盘点本专题不仅详细介绍了市面上常见的AI绘画神器，而且还有AI填色工具、AI相关的资讯解读和AI绘画的实战案例，帮你快速熟悉AI绘画领域。2. 看故事，学设计本专题由「设计史太浓」出品，用幽默风趣的形式，展现了世界现代设计史上各个时期的重要流派、重要人物和重要作品，为读者构建出世界现代设计史的知识轮廓。3. 最新最全的设计资源打包下载精心挑选，贴心打包是本专题的原则。这儿不仅有超过1000款的笔刷，500套样机，还有很难找到的点线面素材、网页渐变背景、PPT 模板等等。是时候打开它们，高效补充你的素材弹药库了！4. HMI车载设计指南本专题从HMI设计的知识体系、竞品分析、语音设计到设计规范、可用性测试等，都提供了极为详尽的教程。每篇文章均是万字左右，看完这个专题，几乎等于看完一本书了。5. 产品出海趋势下的设计指南企业出海是未来两年的趋势之一，面对不同国家的宏观环境、风俗习惯和文化层面的差异，设计师需要转变以往的思路，做好产品的本土化设计。本专题从出海产品的调研方法、竞品分析、多语言设计等方面，结合大厂的实战案例，帮设计师掌握出海产品的设计方法。6. 优秀产品设计全方位拆解一个优秀的产品如何设计，遵循什么原则，有什么策略，是否可以用一个设计公式来描述它，从而让我们全面、结构化的方式去研究学习。这个系列将全方位帮你拆解市面上的优秀产品，帮你站在巨人的肩膀上学到更多。七、年度设计作品集1. 鲨鱼菲特差异化品牌体系打造 - 平面设计作者：造视品牌中心2. CHUAN设计作品合集 - 平面设计作者：CHUAN_BBDL3. Xc个人作品集 - 视觉设计作者：sᴜᴘᴇʀ_xᴄ4. 阿凡题作品集 - 产品设计作者：鹿喜喜5. 凌旬2022品牌设计合集 - 平面设计作者：凌旬6. 造视创意&水密码 差异化爆品打造 - 视觉设计作者：图层叔7. 银海的工作总结 - 视觉设计作者：GIfts8. 2022插画作品总结 - 视觉设计作者：Asen-阿森9. 2022 产品设计作品合集 - 产品设计作者：Miles10. 初见三国 - 视觉设计作者：一个土豆八、优设2022年度设计行业大事件1. Figma 开始制裁大陆企业，封停部分国内企业团队账号深扒！连拜登团队都在用的Figma是如何成长起来的？相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿，经过多轮文章和视频的洗礼，这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。阅读文章 > 2. 人工智能 AI 绘画工具爆火出圈，谷歌等知名科技公司纷纷入局人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器大家好，我是和你们聊设计的花生~有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。阅读文章 > 3. 人教版数学教材登上热搜，插画风格丑陋引发网友热议以前的中国插画有多优秀？打开这个网站你就知道了大家好，我是和你们聊设计的花生~最近关于人教版小学数学教材插画的事件受到广泛关注，想必大家也都有所了解。阅读文章 > 4. 微软 emoji 表情正式开源，1545 个表情开放下载，全部免费可商用推荐阅读：https://uiiiuiii.com/software/547412.html5. Adobe 旗下 Behance 网站限制大陆用户访问，国区账号无法登录Behance显示无权访问？别急，还有这些方法可以挽救！大家好，我是和你们聊设计的花生。阅读文章 > 6. 苹果全新一代手机 iPhone14 系列发布，带来全新的 iOS16 和灵动岛灵动岛和 iOS 16 实时活动设计规范来了！编者按：灵动岛和 iOS 实时活动推送界面的设计规范终于出来了，原文在这里，做设计和开发的同学记得看看。阅读文章 > 7. 设计软件巨头 Adobe 宣布，以 200 亿美元收购知名在线设计协作工具 Figma深扒Adobe 40年收购史！发现最出名的不仅仅是FigmaAdobe 收购 Figma 恐怕是昨天在设计圈中最大的新闻了吧？阅读文章 > 8. Google、Meta 发布最新的人工智能 AI 工具，用文字描述就能生成视频Google、Meta又放大招！用嘴做视频的时代也要来了大家好，这里是和你们聊设计的花生~近段时间 AI 工具发展势头越发迅猛，在为大家介绍过的 AI 模型中，DALLE·2 和 Midjourney 在文本生成图像的质量和精准度上有了大幅度优化提升，后起之秀 Stable Diffusion 则将 AI 模型的操作门槛降低到普通人都能轻阅读文章 > 9. 人工智能 AI 聊天机器人 ChatGPT 诞生！能力强大火爆科技圈地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？大家好，这里是和你们聊设计的花生~前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。阅读文章 > 10. 潘通正式发布 2023 年度流行色「非凡洋红 - Viva Magenta」来了！潘通2023年度流行色「非凡洋红」正式发布！每年12月初，潘通都会踩着点发布第二年的流行色。阅读文章 > 九、优设2022年度十大设计软件与网站1. 人工智能AI绘画工具功能特点：在线操作、自动生成、出图极快上榜理由：Midjourney、Disco Difussion等AI绘画工具，绝对是今年最有话题性的新产品，凭借高效的出图速度和超强的图片画面效果频频出圈，借助人工智能学习，让产出的作品兼具精确度与艺术性，未来的发展也更加让人期待。2. Blender功能特点：免费开源、功能全面、多平台适用上榜理由：Blender已经更新到3.4版本，引入了新的毛发系统，支持Cycles渲染器中的路径引导，能在相同时间下获得更好的渲染效果，几何节点调节也更加直观，同时增强了雕刻模式和UV工具，提高建模和贴图的效率和质量。3. Pixso功能特点：协同白板、原型设计、界面设计、团队协作上榜理由：作为一体化的产品设计工具，Pixso覆盖产品创意从诞生到落地的全流程，已成为国内众多头部互联网大厂设计协作工具。同时Pixso拥有优秀的渲染性能，高频操作场景下设计体验尤为出色，全方位提升产研设团队协作效率。4. 字由功能特点：字体筛选便捷、无需下载文件、一键应用字体上榜理由：字由整合超过3100款字体，包含免费商用及会员商用字体超过1200多种，涵盖中、西、日、韩等多种语言，无需下载字体文件，一键激活就能在PS、AI、sketch、WPS等设计、办公和视频剪辑软件中选择和使用字体，支持云字库，非常方便高效。5. NOMAD SCULPT功能特点：界面友好、上手便捷、轻松雕刻上榜理由：目前移动平板上最方便上手的建模雕刻软件，简洁友好的软件界面让你很快就能上手，功能直观操作方便，经过简单学习体验就能做出好玩的模型效果，配合手势与触控笔，让你所有的操作都是所见即所得。6. Mental Canvas功能特点：立体空间、无限画布、转场动画上榜理由：这也是今年画手圈非常爆火的软件之一，它可以把二维画面按照不同图层转换为3D空间场景，让其拥有立体空间感，通过图层的位置、角度以及摄像机的运动变化，可以获得非常有趣的动态效果，目前支持Win和iOS系统。7. Procreate功能特点：3D绘画、自定义笔刷、手势操控上榜理由：Procreate一如既往是设计生产力的代表软件，新一代的版本支持了3D绘画功能，自带超过200款的笔刷，加上丰富的色彩、编辑、图层等功能，配合手势以及画笔悬停的新功能，充分发挥设计师的创作自由度。8. 剪映专业版功能特点：操作简单、素材丰富、智能字幕上榜理由：剪映的界面布局非常简单，功能直观且丰富，内置多种转场、花字、音效、滤镜等效果，轻松实现充满创意的视频效果，智能字幕可以直接将语音转为文字字幕，还有自动抠像、曲线变速等功能，可以满足更多视频制作需求。9. MasterGo功能特点：界面设计、交互原型、团队协作上榜理由：作为线上协同的产品设计工具，许多互联网大厂如百度、阿里、网易、京东、商汤等都在使用，是获得最多团队真实复杂场景的协同工具。它支持多人同时编辑，规范管理设计资产，一个链接就能实现云端评审交付，为设计师提供稳定流畅的设计体验。10. ChatGPT功能特点：智能问答、信息全面、能力强大上榜理由：这是由OpenAI 研发的一款人工智能聊天机器人，它能回答关于生活、学习、工作等各方面的问题，可以根据聊天上下文进行互动交流，甚至可以完成文本翻译、写文案及代码等较高难度的任务，让AI工具上升到全新的高度。十、优设2022年度十大设计硬件与外设1. 七彩虹 iGame GeForce RTX 4080 / 4090功能特点：全景光线追踪、DLSS 3、AI加持、高效散热上榜理由：七彩虹发布全新RTX40系显卡，新的架构让光线追踪性能提升，图形处理画质更逼真，渲染更快速。AI驱动加持，低延迟等多项性能突破，让工作和游戏的体验变得更好，散热和功耗比也更得到进一步加强。2. 明基PD2705U设计显示器功能特点：屏幕均匀管控、专业设计模式、OSD控制器小热盘上榜理由：专为设计师打造的27寸4K色准显示器，屏幕显色准确一致，出厂单独校色，适合工作室使用，确保有效沟通。小热盘高效操作四大专业设计模式，兼容多种设计需求。接口功能丰富，轻松实现Type-C直连及65w反向供电，并兼顾多设备连接需求。3. PICO 4 VR 一体机功能特点：佩戴轻巧、空间定位、高清屏幕上榜理由：PICO 4采用前后平衡式设计，还有电动调节瞳距功能，让不同的人佩戴也同样舒适和方便，配备的LCD屏幕与光学透镜，能实现VR与MR双重效果，精准的手柄定位追踪能让游戏、运动的反馈更及时，使用体验更好。4. iPad Pro 2022功能特点：苹果M2芯片、P3视网膜屏、软件生态强大上榜理由：苹果全新的M2芯片提供强大的性能支持，用iPad可以随时随地进行手绘、动画以及3D创作，视网膜屏能出色还原亮度和色彩显示，让作品呈现真实舒适的观感。还有丰富的软件支持，让设计创作更加方便高效。5. 大疆 DJI Mini 3 带屏遥控器版功能特点：机身轻巧、续航持久、4K录制上榜理由：作为大疆的入门级无人机，轻巧的机身接近手机的重量和大小，支持4K60帧和1080P60帧的视频拍摄，搭配长续航电池最长可飞51分钟，带屏遥控器支持10公里图传，还有精准悬停、自动返航等非常方便的功能。6. Redmi AX5400 路由器功能特点：信号覆盖广、多设备连接稳定上榜理由：最新的WiFi6增强版技术，让路由器的网络传输更加快速，多台设备同时连接的传输效率和稳定性也变得更强，数据的上传下载量也更大，6个天线独立放大器增强了信号覆盖，无线网络信号也变得更好。7. 保友金豪B 2代人体工学椅功能特点：分区支撑、多档调节、腰脊保护上榜理由：腰背独立支撑的设计加上可调节的头枕，给整条脊椎舒服自然的承托感受，优质的面料和材质确保了长久的耐用性，靠背高度、扶手角度与高度、座深、座高、后仰角度等多项调节功能，不同身高也能坐的很舒服。8. 罗技 MX Master 3S 无线蓝牙鼠标功能特点：电磁滚轮、操控灵敏、按键自定义上榜理由：这款鼠标兼具颜值与性能，配对多台设备可以一键切换，电磁滚轮直接提升了中键的使用率，浏览网页、文档、PS画布的效率都大大提高，一次充电就能用满2个月，侧边的自定义键，也能快速执行更多常用操作。9. 极米H5投影仪功能特点：亮度清晰、色彩精准、性能出色上榜理由：极米自研的发光系统，还原电影本身的亮度与色彩，自动梯形校正可以适应不同房间布局，操作系统响应快速使用流畅，支持WiFi6，在线播放速度更快，延迟更低，自带哈曼卡顿音响，观影和音效体验都非常出色。10. AirPods Pro 2022功能特点：无线降噪、空间音频、续航持久上榜理由：新款AirPods Pro各项能力都有了提升，出色的降噪能力能让你在专心工作或通勤时不受外界打扰，新增的触控功能让音量调节更方便，增强的续航让使用时间更长，长途出行也不怕半路没电。十一、优设2022年度设计工具类图书1. 设计思维工具手册- 出版：清华大学出版社- 作者：付志勇、夏晴- 类别：设计方法、工具手册2. 这么设计能热卖：融入运营思维的电商设计进阶宝典- 出版：清华大学出版社- 作者：吴婷- 类别：电商设计3. “营”在设计：电商运营设计修炼手册- 出版：清华大学出版社- 作者：京东零售用户体验设计部-运营设计部- 类别：电商设计、运营设计4. 版式设计从入门到精通（第4版）- 出版：人民邮电出版社- 作者：胡卫军- 类别：版式设计、平面设计5. 高点击率：电商设计规律与实战教学- 出版：人民邮电出版社- 作者：李艳- 类别：电商设计6. 平面设计网格系统（经典版）- 出版：上海人民美术出版社- 作者：约瑟夫·米勒-布罗克曼[美]- 类别：平面设计十二、优设2022年度平面设计类图书1. 日本包装创意- 出版：gaatii光体- 作者：gaatii光体- 类别：包装设计2. 版式设计关键词：设计大师的方法与风格- 出版：后浪出版公司- 作者：史蒂文·海勒[美] 、盖尔·安德森[美]- 类别：版式设计3. 今日文字设计（全新增补版）- 出版：上海人民美术出版社- 作者：赫尔穆特·施密德[德]- 类别：字体设计4. 品牌设计全书- 出版：上海人民美术出版社- 作者：迈克尔·约翰逊[英]- 类别：品牌设计5. 零基础学导视设计- 出版：ACS艺力出版公司- 作者：ACS艺力出版公司- 类别：导视设计6. 日式字体设计及应用- 出版：ACS艺力出版公司- 作者：ACS艺力出版公司- 类别：字体设计十三、优设2022年度产品交互类图书1. UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战- 出版：清华大学出版社- 作者：付尧- 类别：UI设计、视觉设计2. 设计的思考：用户体验设计核心问答- 出版：清华大学出版社- 作者：周陟- 类别：产品设计3. 当代好设计的十大准则- 出版：ACS艺力出版公司- 作者：ACS艺力出版公司- 类别：工业设计4. About Face 4：交互设计精髓- 出版：电子工业出版社- 作者：艾伦·库伯[美]、罗伯特·莱曼[美]、戴维·克罗宁[美]、克里斯托弗·诺埃塞尔[美]- 类别：交互设计5. 破茧成蝶2：以产品为中心的设计革命- 出版：人民邮电出版社- 作者：刘津、孙睿- 类别：产品设计6. 点石成金：访客至上的Web和移动可用性设计秘笈- 出版：机械工业出版社- 作者：史蒂夫·克鲁格[美]- 类别：网页设计十四、优设2022年度绘画艺术类图书1. 大片幕后：创意摄影背后的实现过程- 出版：gaatii光体- 作者：gaatii光体- 类别：创意摄影2. 艺术的故事- 出版：后浪出版公司- 作者：E·H·贡布里希[英]- 类别：艺术史3. 这就是康定斯基- 出版：后浪出版公司- 作者：安娜贝尔·霍华德[英] 著、亚当·辛普森[英] 绘- 类别：艺术4. 商业插画设计思维魔方- 出版：人民邮电出版社- 作者：飞屋睿- 类别：插画设计5. 黄金时代插画课——跟12位传奇插画大师学奇趣构思与绘画技巧- 出版：上海人民美术出版社- 作者：斯蒂芬妮·普朗科特[美]、玛格德林·利夫西[美]- 类别：插画设计6. 商业插画绘制技法从入门到精通- 出版：人民邮电出版社- 作者：HoHo猴（侯婉矜）- 类别：插画设计十五、优设2022年度设计理论类图书1. 天才配色- 出版：gaatii光体- 作者：gaatii光体- 类别：色彩搭配2. 欧洲平面设计新浪潮- 出版：gaatii光体- 作者：gaatii光体- 类别：平面设计3. 关于设计的思考- 出版：后浪出版公司- 作者：保罗·兰德[美]- 类别：平面设计4. 视觉游戏：如何让你的设计讲故事- 出版：后浪出版公司- 作者：莫莉·邦[美]- 类别：视觉设计5. 阿明·霍夫曼的设计原则- 出版：上海人民美术出版社- 作者：阿明·霍夫曼[瑞士]- 类别：平面设计6. 好设计是这样想出来的- 出版：上海人民美术出版社- 作者：埃伦·勒普顿[美]- 类别：设计创意设计类图书出版社结语迈向新的一年愿我们能跨越每个坎坷，对未来多一些信心把每一次的 Ctrl+N，化作亲手实现的梦向不停创作的你致敬！点击右侧链接查看完整榜单 优设2022年度榜单本篇来源：优设网原文地址：https://www.uisdc.com/uisdc-2022-ranking
用户 数据 产品 在这个信息数据化时代，作为交互体验设计师的你一定遇到过这样的问题：在复杂的 B 端产品中，由于企业级用户的特殊性，很难获取产品落地后的数据，难以完成设计验证；可用性测试、用户访谈等测试工具成本过高，开展实施比较困难；刚刚完成上线的新产品，如何更快更好地收集用户数据和反馈……这些问题很常见。本文将为你介绍 3 种方法，告诉你当面临以上这些情况时，该怎样发现产品自身的问题以促进体验提升，又该怎样完成设计闭环。相信会对你有帮助。更多获取用户数据的方法：7个接地气的实战经验，帮你学会做用户问卷！用户问卷是交互设计师工作中常用的设计工具。阅读文章 > 一、数据的获取方法1. 在产品中增加反馈渠道要知道，用户反馈的复杂信息、使用疑惑和问题，在经过处理和提炼后也会变成有效数据。你可以在上线的产品中增加「用户反馈」入口，鼓励用户在使用产品的过程中直接反馈使用体验和意见，可以尝试以下方法：（1）主动引导用户进行反馈：在用户刚进入产品或完成某些关键性任务后，使用 banner 或悬浮按钮等方式，吸引用户反馈问题和感受。这种主动式引导不宜太频繁，形式要简单，并且要结合场景。例子 支付宝 App 在用户截图之后才弹出悬浮按钮，是因为产品推测用户在操作的过程中可能需要求助，这时的反馈往往是真实的有效数据，用户的填写意愿也会更强：（2）轻量级问卷投放：在产品中使用弹窗、链接等方式，选择合适的用户进行投放。由于是在产品内设置的轻量级问卷，所以要注意：明确调研目的，针对某个关键性的问题进行设置；问卷篇幅要短，简洁精炼，一次 3-5 个重点问题即可；进行分类投放，对不同的用户群进行区别和分类调研，避免混淆数据；填写形式简便，减少被调研用户的输入时长，尽量用选择代替输入；尽量结合场景，同用户反馈的引导一样，问卷也需要尽量结合产品的应用场景，调动用户的填写意愿，避免用户路径的打断。（3）利用社群触达用户：在产品中增加社群二维码，用户可以通过扫码进群交流，也可以利用社群定期推广一些活动，给用户一些反馈奖励，保持与用户近距离沟通。2. 产品内的数据监测在产品内部增加用户行为和数据的监测功能。很多大厂都有自己的数据监测平台，现在也有不少第三方数据监测平台和机构，可以提供数据埋点及用户行为监测服务。如果成本有限，设计师也可以求助开发利用一些代码和插件，在产品页面中的关键节点进行「埋点」的设置。这些「埋点」是对用户行为过程及结果的记录，即用户在什么时间做了什么样的事情。用户的所处位置、场景甚至是可能的心理预判，都可以被埋点记录下来，为产品交互提升和改进提供依据。3. 模拟用户操作行为设计师可以通过对用户行为的模拟，为自己设定一个需要完成的任务，测试产品的实际用法。不仅仅是设计师本人，其他的同事也同样可以被邀请来做模拟测试。在测试中需要注意：根据产品功能的不同类别有针对性的选择与用户类型相似的人进行模拟测试；设计师要有充分的共情能力，即使对产品已经有一定的了解，也要尝试猜想和假设用户的心理和可能会遇到的问题，模拟出用户所处的真实情景。例子 工业设计中经常会用到的共情设计方法，有时会借助一些模型和工具来模拟用户的感受和场景。下图为设计师模拟老年人手部关节退化，不能正常弯曲后的生活状态，以更好的为老年人做产品设计：二、关于数据的两个常见问题Q1：在面试和作品集中没有数据展示，是不是就不能证明设计价值？很多同学认为，面试官判定设计作品的价值时会以产品的数据作为依据。这个说法不是很准确。数据的展示是从一个侧面反映你设计成果的价值。但没有数据指标，并不代表你做出的设计不是好设计；另一方面，就算你拿出完美的数据，你的设计成果质量不高，数据是靠运营和商业模式跑出来的，也不一定能证明你的设计能力。因此我的建议是，能抓到数据就尽量去抓，抓不到数据也无妨，面试时实事求是的回答，再加上你对数据作用的认知和看法即可。你可以将重点放在设计的逻辑和理论支撑上。Q2：验证 B 端产品的设计价值，通常需要用到哪些数据指标？不同的产品，设计的发力点和其所解决的问题是不同的，所带来的设计价值就会不同，相对应的评价标准和数据指标也会有变化。更多数据分析术语和模型：这5组难理解、易混淆的数据指标，看完这篇就学会了！本文将设计师难理解易混淆的数据指标进行详细的讲解，方便大家了解并掌握。阅读文章 > 用6个章节，帮你掌握常见的数据指标和数据分析模型一文读懂设计师应该懂的数据指标和数据分析模型。阅读文章 > 欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/get-user-data
工具 文件 设计师 大家好，这里是和你们聊设计的花生~今天为大家带来设计师效率工具第 12 期，本期推荐的 5 个神器分别是：免费好用！在线文件批量重命名工具 Webrename办公神器！支持手机远程控制多设备的软件 ToDesk一键贴图！使用AI生成技术的的Blender 贴图插件 Dream Texture开源可编辑！100张高质量矢量人物插图素材包 GEE!ME安全便捷！帮你轻松去电脑内存的神器 微信清理工具2022.02这5款工具，让设计师工作效率提升 200%！（十一）大家好，这里是和你们聊设计的花生~ 最近又收集了好多超实用的效率工具，分享给大家，本期推荐的 5 个神器分别是： 打开即用！阅读文章 > 一、Webrename网站直达： https://webrename.cn/Webrename 是一款在线免费的文件批量重命名工具，无需安装登录，打开即用。网站支持按顺序、随机、替换、添加、截取等多种命名方式，文件上传后可以拖动排序，也可以随时手动修改文件名（点击文件名即可修改），适合小文件的大批量处理。使用方法：打开网站后，选择需要批量处理的文件上传（也可以直接拖入页面），然后设置命名规整，点击“开始重命名”按钮，工具将会开始重命名，并将所有文件打包到一个 Zip 文件后下载到本地。需要注意每种命名方式都是独立存在的，互不影响一旦切换文件会恢复至原命名。二、ToDesk网站直达： https://www.todesk.com/重装过电脑系统的小伙伴一定都对 ToDesk 非常熟悉,它是一款免费便捷的远程控制软件，我之前一直以为它只能在执行电脑对电脑的操作，最近才了解它还有手机 APP，可以用来远程控制手机、平板和电脑设备，操作起来也非常简单。打工人用来远程办公、传文件、关设备很方便，还可以用来帮助在家的父母完成一些他们不会的手机操作，有需要的小伙们可以试一试。使用方法：ToDesk 支持全平台设备，在自己和需要远程控制设备上安装后，按照软件提示操作即可，也可以在官方公众账号上看教程。Todesk 使用的是端到端加密的双码连接方式，自己用基本不会有风险。三、Dream Texture下载地址： https://github.com/carson-katri/dream-textures/ （文末有安装包）Dream Texture 是一位外国大神 Carson Katri 开发的 Blender 智能贴图插件，一经发布就受到很多 blender 大佬的推荐。通过简单的文本提示创建纹理、概念艺术、背景资产等，适合用来快速贴远景的模型或者转动角度不大的模型，出图效果很快，适合用来做概念设计。插件借助 AI 模型 Stable Diffusion 生成深度图，因此贴合效果比一般图片要好很多。Winds 和 MAC 的插件下载链接见文末，具体安装教程和使用方法 B 站有很多视频教学，在学 Blender 小伙伴不要错过呀~Dream Texture 的应用效果四、GEE!ME网站直达： https://geeme.vercel.app/ （需搭梯子，文末有下载好的打包文件）Figma 下载链接： https://www.figma.com/community/file/GEE!ME 是一个免费开源的矢量扁平人物素材包，包含 100 个卡通人物和 400 多个物体。素材质量非常高，可以用于 UI 设计、网页设计及插画中。支持 PNG 和 SVG2 种下载模式，这意味着我们还可以去对其进行后期编辑。文末有全部 SVG 格式文件的素材包可供下载，大家可以进入官方网站单独下载。五、微信清理工具 软件下载官网： http://pc354.com/blog/Article.asp?439.html （文末有安装包）这是一款专门用来清理微信 PC 端磁盘内存的工具，简单易用，清理效果也不错。可以针对不同微信账户清理，仅适用 Windows 系统。安装运行后软件会自动找到电脑里的微信文件夹，然后根据软件提示先选择微信账号（一般情况下是 wxis_ 开头的一串字符），然后就能看到具体的统计磁盘占用以及数据分类，包括：安全：缓存、自定义表情、收藏、一般警告：信息、图片、视频（聊天记录）危险：微信程序文件一般安全数据可以直接删掉，聊天记录类型的警告文件需要谨慎删除。可以设置仅删除 x 月前的 SNS、image 和 video 数据。以上就是第 12 期的设计师效率工具推荐，如果你正好需要那赶紧用起来吧~也欢迎大家在评论区分享自己觉得好用的效率工具。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友。有关本文或设计的问题可以在评论区提出，我会第一时间为回复。推荐阅读：2023年，让这20款AI工具帮你更高效地完成工作~2023年，让这20款AI工具帮你更高效的完成工作~大家好，这里是和你们聊设计的花生~2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。阅读文章 > 优设2022年度榜单发布！致敬你的每一次Ctrl+N与PIXSO、优设一起，让创作变杰作过去一年，我们共同经历了太多变化创意行业，同样发生着翻天覆地的革新Pixso 作为一体化产品设计工具仍坚定地与设计师们结伴而行携手奔赴充满机遇的新时代让我们用希望的光，照亮脚下的路与 Pixso、优设一起，让创作变杰作越凛冽，越抖擞！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 设计师效率工具第12期-附件下载3.5G8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-software-12
干货 合集 系统 大家好，这是 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
在路上
张大湿
落霞与孤鹜
表哥
飞翔的企鹅
