官网 用户 方式 项目背景如大家所知,企业的招聘方式基本固定为社招与校招两种,而社招渠道比较宽泛,如多个招聘平台的招聘信息、猎头寻人、人脉内推等,而校招的渠道却比较单向,基本都是在毕业季前,在大学内宣讲、学校内搭建招聘展位等,由于时间较固定且频率不高,所以 58 之前并未搭建校招官网。来自于《2021 年度企业招聘渠道效果与趋势调研报告》但是,由大易发布的《2021 年度企业招聘渠道效果与趋势调研报告》指出,相比 2018 年,企业搭建专属招聘官网的比例已经从 41.4%上升到了 80.2%,71.8%的企业建设私域渠道的目的是提升候选人体验,企业开始跳出以「hr 为中心」的视角,转向「以人才为中心」,时时刻刻照顾候选人的应聘体验。所以搭建 58 的校招官网也是势在必行。两分钟底层法则的应用英国形象大师罗伯特·庞德曾说,这是一个两分钟的世界,你只有一分钟向人们展示你是谁,还有另外一分钟让他们喜欢你,如何在短暂的时间,屏幕大小的空间里,吸引到与企业志同道合的人,是我们此次升级的设计标准。1. 静态背景降低动态场景下的焦虑感我们调研了几个拥有独立校招官网的大厂,信息架构逻辑大体一致,区别较大的就是头屏的展示方式是采用静态还是动态,然而这个也是我们项目内争执比较大的点,依据两分钟底层法则,动态视频的吸引力必定是大于静态的图片,而视频的加载时长的无法控制会很大程度的影响用户体验,现有某个大厂的头屏视频就是很明显的样例,在网络状况不佳的时候,头部的灰色背景带来了焦虑感。怎么弥补用户这几秒的焦虑呢?我们把不可控的几秒变成可控的温馨画面,在视频加载中头屏展示图片,加载完成后开始自动播放视频,这样头部视频的方案得以保留。2. 极致的交互体验形式通过竞品分析得知,为了保障信息的连贯性,首页大多都采用平铺的方式展示信息,在某个模块下会通过简单的交互展示更多的信息。虽然设计上模块鲜明,但是对于用户是一次性的信息输入,无法快速集中获取某个模块的信息,所以为了更好的做到信息架构分明,我们首页采用分屏+微动效的交互方式,每屏只向用户展示一个信息,做到沉浸式信息浏览,同时这种方式也在一定程度上提升了品质感,如特斯拉品牌官网也是采用同样的交互方式。分屏效果展示二级页面,则采用大图背景样式,内容在固定区域内滑动,增加官网高级感设计语言定义每个企业都有一个品牌宣传色,为了保持 58 的企业识别性,我们保留橘色为主色,同时橘色也可以更好地传递企业秉持的温暖的概念。其次,依据 90 后、00 后这些 z 时代背景下的用户喜好,他们更注重品质、时尚,惊喜,内容等,针对这些关键词,我们采用了如下设计方式:1. 复杂内容视觉化58 的业务体系是复杂且庞大的,按以前的滑屏的交互方式很难有一个整体且直观的感受,那如何在简化的同时更直观、更整体呢?我们采用了当前流行的 3D 立体方式,打造了 58 的业务矩阵空间,这是个可以无限拓展的空间,对于目标明确的求职者可以快速查看某个品牌的介绍。2. 加大视觉反差在福利模块,为了突出福利内容本身,大胆采用灰色背景图片,同时增加不同形状的小面积色块做视觉的调和及内容类型区分。在成长故事模块 hover 状态下,由原先的彩色照片变为橘色背景与黑白照片搭配,用户的视觉焦点可转为内容本身。点击后的故事详情页采用杂志式的排版,弹窗的样式减少用户的跳出感。3. 图片增加故事性为更加深入内容,我们单独拍摄了一套极具故事性的员工形象照,拉近用户与照片中人物的距离,增加用户的沉浸感,照片主要围绕氛围感、接地气、传染力展开拍摄。4. 标题化文案经调研点击率高的内容,在标题文案结构上都做了很好的设计,所以文案优化也是我们设计语言的一部分。在标题中准确提炼用户感兴趣的信息,并打造每个故事之间的差异性,从而抓住不同用户的味蕾。总结通过 2022 届校招季,我们收集了用户流程下的一些数据,首页-职位列表页-职位详情的 UV 得出流程漏斗下的转化率以及按钮点击转化率,与往年相比有了很大的提升。最后再提一下英国形象大师罗伯特·庞德的话:两分钟的世界,你只有一分钟向人们展示你是谁,还有另外一分钟让他们喜欢你。然而当下 VR 科技的快速发展及应用,部分大型企业已经在官网首屏采用 VR 技术展示公司及企业文化,未来的可能性还有更多可探索的空间,说不定不久后可以用裸眼 3D 效果,给用户更加趋于真实的感受呢。大厂实战!vivo官网APP首页改版设计过程复盘vivo 官网 APP是什么?阅读文章 > 欢迎关注「58UXD」的微信公众号:本篇来源:优设网原文地址:https://www.uisdc.com/58-website-upgrade
工作 效率 目标 前言相信大多数人无论在学习还是工作中都或多或少遇到过一些效率低下的情景:永远有画不完的图、开不完的会,自己的精力又十分有限,十分焦虑事情做不完怎么办明明有很多事情要做,却无法集中注意力,不断切换处理不同的事情,时间和精力在大量内耗中被消耗掉,实际的输出效率十分低下要做的事情越多拖延症越严重,面对繁多的任务不知如何下手,时间快速流逝,临近 deadline 的时候突然发现什么都没做设计资产繁多且混乱,想要找到某个东西的时候总是想不起在哪里……所有的这些,都会大大影响学习工作的效率,那么该怎样才能更高的效率处理这些问题呢?本文会从动力、规划和专注三个角度来破解这个难题。首先,万事的开头一定需要有一个内在的动力作为驱动,在有了动力之后还要对自己做的事情有详细的规划,做到有的放矢,最后,在落地执行的阶段要保持专注。效率来源于动力相信你一定有过“通宵达旦、乐此不疲”的愉快经历,比如一整晚打游戏上了十颗星、或者连续十个小时刷完了一部五十集的电视剧;当然也一定有过“心不在焉、味如嚼蜡”的痛苦经历,比如小时候被妈妈强迫练习钢琴时数着时间期待结束、或者在期末考试前夕为了不挂科被迫复习一上午才看了五页书。我们会发现,同样是长时间做一件事,当我们内在动力不同时,效率高低实是天壤之别。那么我们该如何获取工作的动力呢?1. 自主选择有研究表明,人类对掌控力的需求是一种生理需求,在面对选择时做决定可以直接证明自己拥有掌控力,并且极大的提升执行效率。人们渴望拥有选择的自由——哪怕所做的决定并不会带来任何好处。回顾前文提到的例子,无论是通宵打游戏还是连续十个小时刷完一部剧,自己拥有绝对的选择权,因此可以连续长时间保持一种十分高效的状态;而练习钢琴是在妈妈的强迫下做的、复习专业课是快要考试了,为了不挂科而在自己的强迫下做的,在这些事情上,自己的选择权都比较弱,于是效率往往比较低下,且可持续的时间也较短。由此可见,“拥有选择权并能自主做出决定”是获得动力的第一步。在工作中,我们就可以通过“把握选择权并做决定”的方式来获取工作动力。在我工作初期,为了避免反复修改设计稿,我曾经习惯于在做项目时输出多个方案,把能想到的方案全部罗列出来,并让更具有经验的前辈以及其他项目相关人帮助我来决定哪个方案才是最优解。诚然,对于一个新手来说,这样可以最大限度的减少出错,保证输出方案的质量。但一段时间后,我开始逐渐丧失输出方案的动力,因为我感觉输出多方案只是为了给决策人——而不是自己——提供多个选择而已。因此我输出方案的效率开始直线下滑,有时甚至会卡在“只有两个方案不够选”这样的问题上,为此自己也时常陷入苦恼之中。破解这个局面的灵感是在一次与前辈的交流中获得的。我开始尝试自己去做设计决策,自己从多个方案中选择自己认为最好的方案。于是,输出多方案这件事就从“给别人提供选项”变成了“帮自己推敲设计”,我也不再单纯为了“多个选项”输出多方案,而是在不断思考“当前的方案有什么问题,还能怎么去解决”的过程中输出更多的方案。这样的改变让我重新找到了设计的动力,思考更加主动、效率也得到了极大的提高。2. 学会放弃虽然通过“做决定”可以获取动力,但这并不意味着我们可以无脑“做决定”,向错误的方向走出一百步还不如停在原地不动。我们要尽量保证做的每个决定都是有意义的。为了做到这一点,可以尝试着在做每个决定的时候多问自己几次为什么,从而找到其背后的原因,同时也可以找到做决策的依据。当我还在上学时,发现有些“学神”的日常表现与普通人并无二致,他们有时也会逃课、也会不写作业,考试前也未见他们悬梁刺股,但是每次考试成绩却名列前茅。很多年后,我有幸认识了一位这样的“学神”朋友,姑且称其为 A 君,在与他交流后,才解开了我心中的疑惑。A 君给我讲了一个秘诀——学会放弃。在 A 君的心中,没有什么事情是不可以放弃的,包括上课、听讲、写作业、刷题,这些看起来都是获得好成绩必须要做的事情,其实都可以放弃。问题在于,如何选择该放弃哪些事情。A 君的做法是,当有一件事情需要去做时,首先会问自己一个问题——为什么要做这件事?比如,第二天有一节课要上,这时就要先问自己,为什么要上课呢?答案是因为上课可以从老师那里学到新的知识点。但是,获取新的知识点并不一定只能通过上课的形式,也可以通过看书、在网上找一些资料、甚至找其他前辈请教。那么问题就变成了“通过哪种形式掌握新知识点更加省时省力?”A 君说在他上学时,每个学期都会去买一本教师版的教材,上面会有一套比较完整的教案,他在预习时会先看一遍教案,如果自己能够掌握所有的知识点,那么第二天的课就会选择放弃。这就是为什么虽然他逃课了,但是还能取得好成绩的原因。有得就有失,有时有计划的放弃反而会提高整体效率。效率来源于规划只拥有动力还不足以让工作效率有质的提升,我们还需要对工作内容进行合理的规划,让工作变得井井有条。在开始工作之前先做一份工作计划,可以让工作的执行事半功倍。为了更好的制定工作规划,我会把长期的目标规划的更加系统,而把短期的规划尽量做到碎片化。1. 长期规划——让目标变得smart美国管理学大师德鲁克于 20 世纪 50 年代提出 smart 原则,在制定和考核绩效时须符合五项原则:具体的(Specific)、可衡量的(Measurable)、可达到的(Attainable)、与其他目标具有相关性的(Relevant)、具有明确的截止期限(Time-bound)。在进行长期目标的规划时,也可以参考这样的原则,让每个目标变得更加清晰。例如“提升产品的用户体验”可以是一个目标,但是不是一个好的目标,因为其不够具体、不易衡量、不易达到且不具有明确的截止期限。针对“不具体”的问题,我们可以对其进行一些更具体的拆分,例如“优化触区大小”、“优化转场动画”、“提供更加情感化的空页面插图”都可以成为具体的目标。针对“不可衡量”的问题,可以给目标添加上一些可量化的指标,例如“优化产品的 5 个一级页面中的触区大小”、“优化所有一级页面向二级页面跳转的转场动画”、“提供常见的 10 种空页面场景的情感化插图”。在确定目标-拆解目标的过程中,还要时刻注意目标的是否是可达成的。例如“优化产品中全部触区大小”这个目标,在不同的产品中工作量也是有着巨大差异的,如果优化对象是 QQ 这种体量庞大的产品,牵扯到的页面和业务团队甚至无法穷尽,“优化全部页面的触区大小”就是一个不可达成的任务,此时,我们就可以将目标修改为“优化全部一级页面的触区大小”,让目标变得具有可达成性。制定任务时,应该给任务设定一个截止期限,例如“一个月内优化全部一级页面的触区大小”,这里的“截止期限”实际上不一定是“完成期限”,而是一个回顾的时间点。到了截止期限,我们应该回顾该任务的完成情况,并对其进行进一步的处理,已完成的任务可以进行复盘、归档;未完成的任务可以进行进一步的规划。2. 短期规划——日程计划or任务池所有的长期目标都要依赖每日的具体执行才能得以实现,所以每日的日程规划也显得尤为重要。然而并不是制定一个日程规划表就一定可以按部就班的完成任务。相信绝大多数人应该都遇到过这样的情况,早上开始工作之前认认真真地制定了一份工作计划,精确到了每个小时需要完成什么样的工作,但是可能会因为各种各样的原因——临时加入的高优需求、临时的会议亦或同事向你咨询了几个问题——打乱了整个工作计划,到了晚上发现,规划好的事情只完成了一半。变化总比计划快,我们永远无法精确预判意外情况会消耗掉我们多少时间和精力。因此,与其做一份十分详尽的时间规划,倒不如建立一个任务池。todo 列表就是一个天然的任务池,把需要完成的事情记录下来,不要指定具体的完成期限,而是归类并标注优先级(可以参考前文阐述的 ROI 管理模式),尽量摆脱以时间为衡量尺度的任务规划方式,从而避免单纯因为赶 deadline 而优先完成 ROI 过低或者价值较低的任务,导致更加具有价值的任务被迫延期。每次规划仅聚焦于任务池中最需要完成的一两个任务,不必过分追求一个完整的计划表。当完成当前规划的任务后,再从任务池中找出需要继续完成的任务。“写 todo 列表”这件事也不必是一个固定日程,可以利用碎片化时间进行记录和整理,例如上班通勤的路上、完成一项任务后的短暂休息时间、在食堂排队的时间等等。总之,尽量降低“日程规划”这件事的形式化,随时随地管理自己的任务池,用极致碎片化的方式来管理任务池,可以让短期规划这件事情变得更加灵活且高效。效率来源于专注在衡量工作效率时,我们讨论的不只是对某一件事情的专注度,而是整个工作过程中的“综合专注度”。例如我们可能在攻克一个难点时十分专注,但是中途又被打断去快速处理了一些其他琐碎事物,然后再次回到之前的攻克难点的任务中。如果从单个任务的视角来看,无论是攻克难点的任务、还是处理琐碎事物,可能都保持了高度专注的状态,但是如果考虑到在多个任务中间来回切换而产生的内耗时,整体的效率并不见得很高,这种情况下“综合专注度”就不算高了。为了尽量提升“综合专注度”,我把日常任务分成三种类型:疑难型任务、紧急型任务和琐碎任务。三种任务需要的专注度不同,处理方式也不同。1. 疑难任务我把工作量大且需要高密度思考的任务归类为“疑难任务”。这类任务需要注意力高度集中,且需要大块时间集中处理。例如“以提升发布效率为目标重构整个发布编辑流程”就是一个疑难任务,该任务涉及到大量竞品的调研分析、超过十个页面的设计、繁多的交互分支路径的遍历。面对这类任务,最好的解决办法就是进入心流模式,利用整块的时间集中攻克。心流是心理学中的一个概念,指一种将个人精神力完全投注在某种活动上时所表现的心理状态,在这种状态下,可以获得最高的工作效率,但是通常这种状态下会呈现出一种抗拒中断的特性,只能专心处理某一项任务。因此心流状态十分适合用来处理疑难任务。为了进入心流状态,首先需要创造一个舒适的工作环境,包括但不限于一个舒适的工作姿势(如一套舒适的桌椅和随手可得的办公工具)、不易被干扰的环境(如带上一副降噪耳机并把手机调到勿扰模式)等等,总之就是尽量减少被打断心流状态的可能。不必强求自己一步进入新流状态,实际上也鲜有人可以做到这点,我们可以按照思考密度从低到高的方式来安排工作流程,让自己渐入佳境。在开始解决真正疑难的核心任务前,不妨做一些周边工作作为热身,例如遍历市面上的相关竞品,并一一截图,这并不需要太多复杂的思考,但是却可以帮助自己进入工作状态。在完成竞品的遍历后,就可以顺理成章的开始进行竞品的比对和分析,再过渡到设计方案的输出。“遍历竞品-分析竞品-输出方案”就是一个思考密度和专注程度逐步递增的过程,这样的工作流程会更加容易进入心流状态,并高效的解决疑难问题。2. 紧急任务工作里经常会遇到一类任务,提出的比较临时,例如老板提出的紧急需求、线上出现的严重 bug 或重大舆情等。这类任务往往重要性很高,需要在极短时间内响应,因此对于“综合专注度”会产生负向影响,我把这类任务归类为“紧急任务”。紧急任务往往会让人手足无措,这是因为当人从比较放松的状态突然进入到紧张状态时,注意力往往会本能的聚焦于某个最明显的事物或者平日养成的习惯中。例如在高速公路上正常行驶时,突然遇到前车紧急刹车,很多新手司机会出于本能的把刹车踏板踩到底并猛打方向避让前车,虽然这样的选择并不明智,但是人们会本能的把注意力聚焦在“减速、躲避”这件最为明显的任务上。如果是一位驾驶经验丰富的老司机在同样的紧急情况下,可能就会采取更优的处理方式——点刹、扶稳方向盘、尽量降低撞击伤害。这是因为他对于“前车急刹车”这样的紧急状况有充分的心理预案,所以遇到紧急情况的时候才不会手忙脚乱。同理,在工作中要想高效的处理紧急任务,最好的办法就是“有备无患”,把工作做在平时,在紧急情况出现时,可以用最快的速度做出最优的应对,从而尽量减少紧急情况对综合专注度的影响。我们可以通过预测/预想的方式,来提前做好准备,避免紧急情况出现时的手足无措。例如当我们做汇报方案/晋升答辩时,可以根据已有经验提前预想对方会挑战哪些问题,并思考该如何回答;做设计方案时,提前思考设计方案的优缺点以及上线后可能会遇到哪些问题,并做好预案。另外可以通过复盘已经出现过的紧急任务来总结经验,以备日后之需。我曾经遇到过一个十分临时的老板需求,要求在一个现有的页面基础上用十分钟快速做一些微调。但是我在处理这个任务的时候遇到了一个问题——一时间脑子一片空白,完全想不起这个页面的源文件在哪里,最终只好重新画了一整个页面,本来十分钟就可以完成的任务,实际上花费了半个小时才做完。在这件事情之后,我与其他同事一起,把负责项目的核心页面源文件进行了一次归档,日后再次遇到类似的问题,就可以十分高效的找到想要的源文件了。3. 琐碎任务工作中还会有大量的琐碎任务,这类任务复杂程度不高,工作量也不算大,也不是非常紧急,但是数量和种类繁多,互相之间又不耦合,我在处理这类任务时有三板斧:记录和归档、统筹规划、集中处理。记录和归档好记性不如烂笔头,为避免遗忘,遇到需要处理的琐碎任务一定要及时记录下来,这也会成为任务池的重要组成部分。最好选择一个可以多端协同的工具进行记录,确保自己在任何环境中都可以记录和整理。我日常会使用 notion 进行事项记录和规划。除了优秀的多端协作体验以外,notion 还有一个重要优点是可以用“面向对象”的方式进行数据整理。例如我会建立“相关人员”、“版本节奏”等等数据库,这些数据库可以独立管理和维护,而在需求管理时,可以在其中直接调用“相关人员”的数据来标注负责该需求的产品、设计师、开发等人员,也可以调用“版本节奏”来快速标注当前需求的时间节点信息,并且各个数据库中的数据也是实时联动和更新的。从任务管理模式到 ROI 管理模式有一种比较常见的一种工作模式——逐项完成手头的任务,这样的工作模式以任务本身为管理对象,因此我把它称为“任务管理模式”。但是在工作中,相比于海量的任务,无论是个人的时间精力还是团队的人力资源都会显得捉襟见肘,有时面对繁多的任务甚至会无从下手,这时就会出现一个棘手的问题——该如何进行工作任务的取舍?在商业领域,有一个名词叫做 ROI(Return on Investment),是指回报与投入的比值,直接反映了综合盈利能力。在日常工作和生活中,也可以引申这样的概念,通过一项任务的产出与投入的比值来衡量该任务的价值。前文中提到的学神 A 君在获取知识点时,是选择听课还是自学,其根本的决策依据就是 ROI。如果知识点简单,自学即可完全掌握时,听课就显得耗时耗力,ROI 较低,此时就选择逃课自学;反之如果知识点比较难,自学起来比上课还要更加耗时耗力,那么此时上课的 ROI 就更高,肯定要选择上课。这种工作方式有两个步骤:第一步是分析每项任务背后的价值点,并以此为依据对多项任务进行归类;第二步是根据 ROI 进行优先级的排序,然后做出取舍。这种以 ROI 为核心管理对象的工作方式,我称之为“ROI 管理模式”。在处理琐碎任务时,我们要有意识的从单纯的任务管理模式转向 ROI 管理模式。这就要求我们去思考每件事情背后的价值,并且把目光放在长期的收益上,而不是只关注短期收益。优先选择 ROI 高的任务,放弃 ROI 低的任务。集中处理每天单独规划一段时间用来集中处理琐碎任务,这样既可以保证琐碎任务有持续不断的被处理掉,又可以尽量减少频繁任务切换造成的内耗。我比较习惯于在早上以及下午开始工作之前的半个小时处理琐碎任务,恰好可以作为开始工作的热身活动。把日常的任务按照“疑难任务”、“紧急任务”、“琐碎任务”进行分类是我自己在工作中常常使用的分类方式,实际的分类方式也可能会因人而异,但是不变的核心思路是合理安排各项任务,最大限度的提升“综合专注度”,从而获得更高的工作效率。结语本文从动力、规划、专注三个方面探讨了一些提升设计效率的思路,实际上提升效率的手段不仅局限于本文讨论的范围,每个人面对的问题和状况都不尽相同,可以根据自己的实际情况总结出自己的“提效套路”,希望每位读到这里的读者都能有所收获。效率翻倍!24 个腾讯高手的私藏设计工具工欲善其事,必先利其器。阅读文章 > 欢迎关注作者微信公众号:「腾讯ISUX」本篇来源:优设网原文地址:https://www.uisdc.com/promote-efficiency
图像 图片 文本 大家好,我是和你们聊设计的花生~之前给大家推荐了 AI 图画生成器 Disco Difussion,它可以根据文本提示自动生成恢弘奇幻的艺术,非常适合作为艺术创作的灵感来源。堪比艺术家!被疯狂安利的 AI 插画神器 Disco Diffusion 有多强?大家好,我是和你们聊设计的花生~有关注「神器挖掘机」阿文(微博 @Simon_阿文 )的朋友,可能已经了解到他最近正在疯狂安利一款 AI 绘画神器——Disco Diffusion。阅读文章 > 那如果现在有一款新的 AI 图像工具,它可以根据你给出的「文本提示」,自动合成犹如照片般的真实场景,或者可以根据你给出的文字提示自动修改照片中的某个部分,而且毫无 PS 痕迹,你会怎么看呢?有关注阿文(微博 @Simon_阿文)的小伙伴可能已经知道,已经有人工智能可以实现上述功能了,而且生成速度极快,图片质量非常高。今天我要和大家介绍的,就是这样一个能根据语言描述,创建逼真的图像和艺术的人工智能系统 —— DALL·E 2。DALL·E 2 主要功能DALL·E 2 是由 OpenAI 公司研发的一款新的人工智能系统,它不仅可以更根据文本描述生成对应的逼真图像,还可以根据文本提示修改图像内容,以及根据给定的图像拓展生成多种主题风格一致的“变体”。1. 图像生成功能我们先来看一组图片:这些图片是不是看起来非常真实?如同用相机拍出来的一样。但其实,这些图片都是 DALL·E 2 根据给定的文本,通过模型渲染出来的,是完全的虚拟产物。这就是 DALL·E 2 最主要也是最擅长的功能——根据语句描述创建逼真的图像和艺术。以往我们想得到一个具体的场景,需要通过布景摄影或者绘画来实现,一些具有真实感的奇幻场景更少不了后期合成,而DALL·E 2让这一切都不再复杂。除了生成逼真的图像,DALL·E 2 也能根据提示生成具有不同艺术风格的图像:图片来源:DALL·E 2 官方 Instagram2. 图像修改功能除了根据文本描述提示生成图像,DALL·E 2 还可以根据给出的提示,修改现有图像。这种修改包括删除、增加、替换、重塑图片的任意部分,同时考虑阴影、反射和纹理等各方面影响,修改后的图像看不任何修改痕迹。图片来源:DALL·E 2 官网之前优设有给大家推荐过智能修图软件,可以能借助 AI 算法实现元素无痕去除。DALL·E 2 的技术则更上一层楼,可以直接添加或替换元素,这对设计师来说无疑是提高工作效率的利器。3秒无痕修图!在线黑科技修图神器 Magic Eraser大家好,我是和你们聊设计的花生~抠图和修图是每个设计师都必须花时间处理的日常工作,它们虽然难度不高,但需要处理的频次不低,所以很多时候我们都会借助智能工具来处理。阅读文章 > 3. 风格延展功能DALL·E 2 可以根据一张给定的图片,生成许多与之相关的“变体”。这些“变体”在主题与风格上与原图保持一致,在其他细节方面会自动生成很多变化。图片来源:DALL·E 2 官网DALL·E 2 的优点及不足不同于 Disco Difussion 的 CLIP+generator,DALL·E 2 开发了一种新的文本-图像生成方法,称为 unCLIP。unCLIP 让 DALL·E 2 无论是识别文本及图像准确程度还是图像生成速度上,都有了极大地提升。OpenAI 联合创始人 Aditya Ramesh 通过 Twitter 分享的 DALL·E 2 模型运作过程1. 极高的图像质量及精准度在 2021 年 1 月,OpenAI 公司就推出了 DALL·E 1,但那时生成出的图片质量较低,与提示文本的匹配度也只有 71.7%。一年后,新的 DALL·E 2 系统可以生成 4 倍于之前的高分辨率图像,匹配程度也上升至 88.8%,生成的图像更逼真准确。图片来源:DALL·E 2 官网通过深度学习,DALL·E 2 还能如人一样理解两个物体间的关系。当你输入文本“一只考拉骑着摩托车”时,DALL·E 2 能够明白「考拉」与「摩托车」之间的「骑」的动作关系,然后自动创作相应的图像。图片来源:DALL·E 2 官网2. 极快的图像生成速度平时我们需要找到一张符合主题的图片,少不了要去不同的网站搜索一番;要修改图片的某一部分,也需要手动用图片工具调整,所需的时间都不算少。而 DALL·E 2 能在或十几秒内,就生成与文本匹配的图像,一次性生成的图片数量有达到 10 张之多。删除、增加、替换、重塑图片的任意部分也不再需要人工一点点去修复,修复质量也更精准自然。Twitter 用户 @karenxcheng 发布的一段 DALL·E 2 测试视频,视频中由文本生成图片只需几秒。视频地址: https://twitter.com/karenxcheng/status/1513569345049280512DALL·E 2 的 unCLIP 模型使其生成的图像与文本提示的匹配度非常高,不像 Disco Diffusion 一样会错误理解文本描述,将水印或者把艺术家本人当成关联图像的一部分。但如果 DALL·E 2 的模型在训练过程中,学习到的图像与其关联标签是错误的,那么最终生成的图像结果就是错误的。比如,训练到的信息是:与图片 「飞机」关联的标签是 「车」,那么其在生成关于「车」的图片时,就会产生包含「飞机」的图片,并不像人一样能主动进行纠错。另外 DALL·E 2 在生成的多角度真实图像时,也会出现透视比例失真问题。DALL·E 2 的潜在机遇与风险DALL·E 2 功能如此强大迷人,想必大家都非常想亲自使用体验。但非常遗憾,DALL·E 2 的程序目前并不对公众开发,我们目前在网上看到的 DALL·E 2 相关信息,都是 DALL·E 2 官网、内部工作人员及少数特邀的相关行业专家发布出来的。如果想要使用 DALL·E 2,目前唯一的办法就是通过官网申请进入候补名单,等待官方的邀请。之所以采取这样谨慎的方式,是因为 OpenAI 公司深知 DALL·E 2 强大的图像生成和修改技术一旦开放使用,将会给社会的很多方面带来极大冲击和影响。从好的方面来说,DALL·E 2 的合理运用可以给教育、艺术创意、营销、设计、研究等领域的发展带来极大方便。人们可以借用 DALL·E 2 生成图像来解释抽象的原理或者概念;也可用 DALL·E 2 让脑海中复杂的、天马行空的想法与创意快速成型,并可以随时修改;甚至可以将 DALL·E 2 作为生产工具,成为艺术创作流程的一部分。推特网友 @benbarry 用 DALL·E 2 以「机器人画画」为主题,生成了 1000 张相关图像,这些图像已经被整理成一本书,分享在 「Internet Archive」 上共所有人免费下载阅读。但 DALL·E 2 也存在着被滥用的风险,比如用以生成血腥、暴力、露骨、低俗内容;伪造虚假的图像威胁诬告他人;或生成重大事件的虚假图像误导社会舆论等。为了避免此类问题,DALL·E 2 对系统模型进行了预训练过滤,所有暴力、露骨内容都从其训练数据中删除,以限制 DALL·E 2 生成相关图像的能力。但是这并不能完全杜绝相关内容的出现,一些间接的描述可以绕过 DALL·E 2 的过滤设置。下图是官方给出的一张示例,我们可以从中感受到人工智能被滥用的可怕后果。此外,DALL·E 2 也带有一些原生的限制。据官方介绍,DALL·E 2 在默认情况下生成的图像,都以白人和西方文化特征为主,比如涉及到“婚礼”时,会假定是西方婚礼传统,并默认为异性恋夫妇。而且存在一些“刻板印象”:涉及到 CEO,图像都是男性,而涉及到空姐、护士的概念时,形象都是女性等,这些都是 DALL·E 2 目前正在改进并需要不断完善的地方。总结DALL·E 2 通过文本提示进行图像生成及修改方面的功能非常强大,可以达到以假乱真的地步。它的出现,无疑会给艺术、营销、设计、研究相关行业带来革命性的改变,但同时也存在被滥用的风险,需要谨慎、有限制性地使用。DALL·E 2 程序目前没有对社会公众开放,想要体验功能的小伙伴,可以用进入 DALL·E 2 官网: https://openai.com/blog/dall-e/ 申请加入候补者名单。如果你非常幸运得到了 DALL·E 2 名额,记得一定要仔细阅读官方给出的 「政策声明」 ,里面详细说明了 DALL·E 2 及生成图像的使用规范,如 DALL·E 2 生成的图像不可被用于商业用途,生成的图像不能侵犯他人肖像权(包括公众人物),图像发布到网络上时需明确注释是使用人工智能生成的等等。参考资料:https://www.lesswrong.com/posts/r99tazGiLgzqFX7ka/playing-with-dall-e-2https://www.dezeen.com/2022/04/21/openai-dall-e-2-unseen-images-basic-text-technology/https://80.lv/articles/transforming-images-with-openai-dall-e-2/https://github.com/openai/dalle-2-preview/blob/main/system-card.mdhttps://weibo.com/1757693565/Lq4NV6ent?pagetype=profilefeed本篇来源:优设网原文地址:https://www.uisdc.com/dall%c2%b7e-2
用户 产品 场景 前言用户体验是用户对产品价值的整体感受,其中包括用户感受到的产品价值以及用户感受到的操作体验。不要让用户思考,这是每个设计师所追求的。这篇文章举了大量的例子,来跟大家一起进行产品细节洞察分析。感兴趣的朋友一起来看看吧。即刻圈子点赞-不同圈子,不同的点赞表达1. 使用场景在不同社区或不同话题下,给别人点赞的含义是不同的,如何更好地贴合用户感知。2. 设计思考设计目标:解决用户在浏览圈子时,通过符号快速感知当前是什么圈子,丰富的图案彩蛋给用户探索空间提升圈子活跃度。设计方案:即刻作为兴趣社区,圈子是一大特色,可以快速找到中意的圈子。为了增加趣味性以及产品特色,通过在点赞图标做不同尝试。把小手点赞用圈子同关联图案代替,例如:(街头摄影扫街组-相机代替点赞)、(一起听播客-头戴耳机代替点赞)、(不好笑便利店-反转的微笑代替点赞)等等。趣味性的同时,把不同圈子的含义也通过图标表达出来,给用户文字和图标双重理解,强化产品感知,形成品牌记忆。是一个细致的洞察点,值得学习。网易云音乐唱片彩蛋-神奇的老鹰飞出屏外1. 使用场景一些经典影视流传至今,并伴随用户点滴岁月,有时听一首歌会带来回忆与重温,如何给予用户更多情感与惊喜。2. 设计思考设计目标:解决听觉享受的单一模式,给用户视听双重享受,产生记忆点,用情感绑定用户粘性。设计方案:在听哈利波特主题曲(Hedwig’s Theme)1 分钟左右时,黑胶唱片中飞出一只老鹰,冲出画面。当我在听歌时,看到这一场景瞬间惊了一下,之后更多是温暖的感觉,让我对网易云音乐产生了一定听歌享受,不仅如此,还在评论区积极留言与互动,这些举动都为评论区增加了活跃度,间接提高产品 UGC 做贡献。网易蜗牛读书时间阅读- 通过限制阅读时间,给予用户阅读珍惜感1. 使用场景阅读收费会让人有读书持续性,控制阅读时长同样会让用户感到时间稀缺性从而提高阅读效率。2. 设计思考设计目标:解决 DAU 问题,通过 1 小时阅读打造产品特点,同时沉淀目标用户群体。设计方案:当打开 App 进入阅读页面时,后台自动从 60 分钟逐渐递减。当剩余 0 分钟时不可阅读书籍,并且底部有明确的时间显示,给用户一种时间宝贵的感受。从而提高阅读效率,专注阅读同时,用户对产品也会有更深的记忆点,间接提高用户活跃度,毕竟免费无限时长的书籍可能在手机里存放了 1 年都没有打开过。打造时间稀缺性,让用户产生强烈动机,用户更愿意读书,产品 DAU 提升一举两得。飞猪锁定状态 – 贴合场景,易于理解更易传播给用户强感知1. 使用场景每次购买车票都会出现出票中的弹窗,显示进度条状态,有时在进度条上做文章往往会产生更大的设计价值。2. 设计思考设计目标:降低出票过程的等待焦虑,结合业务给用户状态感知,从而产生品牌记忆提高使用黏性。设计方案:在出票弹窗中,用火车车身代替进度条展示。当进度增加,火车由左向右移动,车尾用行驶中的速度感表示,在弹窗页中火车在持续前进,贴合用户场景,相比单一进度条,此做法有效降低用户等待焦虑同时提升产品亮点,达到用户加深印象的作用。美团外卖点餐提醒- 多点食物时,温馨提醒避免铺张浪费1. 使用场景当点外卖时,有时会一不小心点了好多,吃不完也退不掉的情况。2. 设计思考设计目标:解决用户多点食物时无感知问题,提高点餐易用性,给予用户友好使用体验。设计方案:在商家点餐页面中,当重复点两份套餐或相同食物时,会在顶部呼出一个提示窗口,点餐请适量,环保又健康。虽然提示文案固定,但给予用户的是贴心的关心,情感化的背后,给用户更多是产品的温暖一面,弱化冷冰冰的感觉。酷狗音乐悬浮窗-强化运营,同时视觉降噪二者结合1. 使用场景常置的悬浮层时常会遮挡部分信息,再滑动浏览时会进行遮挡与干扰。2. 设计思考设计目标:解决频效问题,即强化运营浮窗又提高滑动浏览时的内容检索,提高浏览体验。设计方案:在有悬浮窗的页面,用户通过向上滑动页面,悬浮窗进行透明度显示,透出底部信息,增加页面浏览完整性。当停止后,悬浮窗显示,给予用户强感知。类似的做法还有滑动时悬浮窗划入屏外,只展示三分之一或更小的区域,来有效提升页面阅读统一性。酷狗音乐播放状态-歌名与歌词流畅切换,满足快捷预览需求1. 使用场景在悬浮层听歌时,往往想要一遍浏览内容一遍查看实时歌词,毕竟有的歌曲好听想要跟着哼唧但无奈看不到歌词的情况,但又想同时一心二用,浏览评论或查看其他内容。2. 设计思考设计目标:解决悬浮播放器查看实时歌词功能,提高听歌看歌词易用性。设计方案:当用户播放一首歌曲返回首页后,底部悬浮播放器会显示歌曲名称。用户想看实时歌词时,通过在悬浮区域向右滑动手势,能看到黑胶唱片向右移动的动画,并且歌名消失,出现歌词显示,同步人声位置,有种卡拉 OK 的感觉,让用户清晰锁定当前歌曲的歌词位置,提升查看体验。大数据行程码箭头缩放-实时动态,有效降低截屏展示风险1. 使用场景疫情防控,人人有责。为保障用户出行安全,避免截屏出行导致经过风险地区而不自知的情况,同时为预防二次传播提供保障。2. 设计思考设计目标:解决部分用户用截图侥幸过安检的心态,提高大数据行程码的专业权威性,避免风险提升用户安全保障。设计方案:在通信行程卡页面中,给予圆圈箭头缩放动画,相比静态图片,此方法更具实时性与动态性,在开发层面只需要写缩放区间,难度系数弱。但对于想要截屏抱有侥幸心理的用户增加了一层屏障。这种细小的设计细节,不就是为了更好服务用户做出的体验向改版点嘛。同时通过设计保障业务安全且可持续性。乐刻运动室温反馈- 问卷调查的良好反馈,降低面对面询问时用户的不良感受1. 使用场景健身房温度有时过冷或过热,原因在于室外突然降温而室内还是保持原有温度,身体温差大难以适应。店长线下统计人力物力成本,且很难覆盖到所有人,也有用户不想被人打扰,但又不好意思直接向店长反馈情况。2. 设计思考设计目标:解决室内温度用户满意度统计问题,提高统计效率,快捷调整室内温度,给用户良好训练环境。设计方案:乐刻健身房进门要通过 App 扫码开门,这就表示用户要进行训练必须使用 App。通过用户扫码开门后,呼出底部浮层,反馈当前室温是否适宜,并且有文字提示“匿名反馈,店长不会看到你的信息”给用户隐私保障。同时疫情期间降低面对面询问室温是否合适的风险,也减少用户尴尬回答的情况,是一个良好的用户体验向设计。结语设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。本期产品细节分析结束,我们下期再见!10个产品细节剖析,看看大厂是如何做设计的!前言作为一名 UI 设计师,要有一双洞察美的眼睛,挖掘产品中令人喜欢与贴心的地方,为自己后续的产品设计打造基础。阅读文章 > 欢迎关注作者微信公众号:草蓉三石本篇来源:优设网原文地址:https://www.uisdc.com/product-details-6
互联网 网站 公司 大家好,我是和你们聊设计的花生。Google、Twitter、Netflix、Pinterest、Producthunt 这些网站大家都肯定非常熟悉了,他们都是各自领域的翘楚,为我们享受丰富多彩的互联网生活提供了诸多便利。那这些知名互联网公司是如何一步步发展壮大的呢?感兴趣的话,就和我一起去「Museum of Websites」里看看吧~Museum of Websites「网站直达」 https://www.kapwing.com/museum-of-websitesMuseum of Websites 是一个展示知名互联网公司发展历史的网站,由美国公司 Kapwing 开发运营。Kapwing 是一家研发在线视频剪辑软件的互联网公司,为什么要开发这样一个网站呢?可能是因为爱吧 —— 至少网站首页上这样说的。Museum of Websites 界面十分简洁,规整成列着一些知名互联网公司的 Logo。点击进入就能够看到此公司的重要发展节点。像我们设计师非常熟悉的 Pinterest,通过 Museum of Websites 我们可以了解到,它是在 2010 年正式推出的,并且在很长时间内保持封闭测试的状态——内容对所有人可见,但只有受邀请的用户才能注册登入。而我们熟悉的红色大头钉 logo 并非一开始就有,Pinterest 在 2012 年才正式确定将红色的作为其标志色。也是从这一年开始,Pinterest 迅速发展壮大。还有流媒体播放平台巨头 Netflix,从《绝命毒师》《行尸走肉》《纸牌屋》,到《鱿鱼游戏》《华灯初上》,Netflix 自制或投资的高质量作品不计其数。但是通过 Museum of Websites,我们会发现 Netflix 在成立之初,提供的是 DVD 租赁服务,与其现在的主业务相去甚远。Netflix 在 2007 年推出线上流媒体服务,摆脱 DVD 直接通过网络为会员提供视频观看服务。而在 2013 年才推出了自制剧《纸牌屋》,一举爆红。Netflix 从此转型,正式走上原创影视制作的道路。Museum of Websites 会提供每一时期网站的主界面存档图片,在看这些互联网公司的发展史时,我们可以一窥设计风格的发展变化。比如 Logo 设计风格的变化,由原来带立体阴影的具象化图标,逐步往抽象扁平的方向演变,字体也以简约现代的无衬线体为主。还有网页设计,也是越来越简洁直观:如果你对网页设计发展史感兴趣的话,还可以看看另一个专门记录网页设计变化的网站 「Web Design Museum」 。「Web Design Museum」里保存了各种由过去程序员和设计师打造的网页和视觉设计,非常有趣。特别是里面的时间线功能,可以清晰的了解知名网站的网页设计风格发展史。这座网页设计博物馆,让我回到拨号才能上网冲浪的千禧年你还记得二十年前的互联网吗?阅读文章 > 总结除了我提到的 Pinterest 和 Netflix,Museum of Websites 里面还展示了 YouTube、Facebook、Airbnb、Reddit、Producthunt 等诸多知名互联网公司的发展史。那些重要的发展节点,在网站上只几句话就概括了,但背后的故事远没有这么简单。Netflix 如何扛过当时垄断行业的巨头 Blockbuster 的打压,一步步成为新的行业霸主;Twitter 如何力压同类产品,成为引爆新时代社交潮流的佼佼者;Producthunt 创始人如何从零开始,打造出世界上最大最专业的互联网产品交流展示平台等,都值得我们去做进一步的探索。互联网世界变化莫测,一切都有可能发生。不知道创建 Museum of Websites 网站的互联网公司 Kapwing,是否有机会在未来的某一天,将自己的公司也列入其中呢?收藏Museo这个网站,各大博物馆和美术馆的免费图片都在这里了!前几天介绍过「法国罗浮宫资料库提供 48 万张收藏艺术品图库免费下载」:[link https://www.uisdc.com/louvre-site-des-collections]其中还提到不少世界知名的美术馆、博物馆也都将馆藏数位化,即使在疫情期间无法出国一样可以透过网络搜阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/museum-of-websites
数据 图表 字体 上期给大家普及了可视化大屏设计的概况,从硬件、GIS 数据、三维建模、动效设计、图形技术、渲染引擎的技术架构等六个方向的总结。今天给大家分享可视化中 UI 设计相关知识的总结。可视化大屏设计快速入门指南,看这篇就够了!大家好,我是小六。阅读文章 > 可视化大屏 UI上文说到可视化设计是一个综合类交叉学科,同样在大屏 UI 设计中也是一个相对复杂的流程,我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑,推导设计方案。设计前:一定要对用户需求充分分析和理解,要知道大屏的展示场景及设计分辨率,大屏的拼接方法都要有一定的了解,最后是跟开发沟通下实现的工具与方法。设计中:构思布局,可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析,方便自己找参考。颜色上背景深色为主,为了更好地聚焦,数据可以采用亮色,有一定的对比关系,便于业务信息传达。字体上可以采用系统默认字体,数字采用特殊字体包的形式(这块根据实际需求,切记不要照搬)。图表选择恰当的展示形式,同时保证视觉上的统一(分清页面的主次关系,图表的展示切莫设计过度,容易造成抢主体)设计后:再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确,与技术同步沟通下技术的实现性。最后开发完成后,要拿演示 demo 去现场测试,看下整体展示效果,测试输出是否有问题,有无拉伸问题,拼接缝与内容有无穿插,及时与开发进行页面的校验工作,最终才算是设计完成。下面针对可视化设计中布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解。1. 布局通过硬件设备信息可以得到可视化的设计尺寸,基于尺寸新建设计画布后,第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达,都需要设计师对业务深入了解后才能用数据助力业务决策。常见的大屏布局:居中结构、左右结构两种常见的布局形式以常规的 16:9 模板为例,下面列举的一些常见的布局形式,供大家参考。居中结构异形超宽拼接屏幕。左右结构布局的原则一定要主次分明,根据业务需求抽取关键性的指标,提取主要信息。可以在纸上大概画一下,然后在软件里具体细化布局。避免次要信息的面积过大,喧宾夺主,影响整体的视觉效果。2. 风格提起可视化大屏,大家都会联想到:科技感、FUI、HUD 这些关键词,可以说可视化大屏跟科技、数据这两词是强关联的,风格上也基本是这一类方向。定义设计风格:一般会基于业务需求场景去定义几个设计关键词,根据关键词去找一些参考图,推导出贴合业务的设计风格。我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例,我们在做设计的时候,只需调整卡片和标题的装饰,就能够展现出不同的设计风格。3. 主视觉主视觉部分大致分为:地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。地球:粒子地球、地图贴图、地球模型。地图:第三方在线地图(百度、高德、腾讯、谷歌)基于地图开放平台进行个性化配置。或者通过地理位置数据建模:如全国和各个省份的轮廓模型。数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps大家好,我是灰色执照。阅读文章 > 智慧城市:GIS 参数化生成简模和重点楼宇定制化建模。行业类:多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。以下图片源于 DATAV主视觉是可视化设计中的一大难点,不光是设计落地的时候也会有需要注意的点,这里建议大家在做之前一定要充分跟开发沟通,确认好技术选型,方便后期输出跟开发更加高效的对接。4. 信息图表图表的设计原则是易理解、可实现,能够准确表达数据意图,给用户传达明确信息。8000 字深度长文!B端数据可视化设计指南(信息图表篇)在如今的工作中(尤其是 B 端)越来越多的会开始出现数据可视化的身影,对于一部分小伙伴来说这个概念是较为陌生的,面对这道无形之中提升的“门槛”我们常常会表现的手足无措。阅读文章 > 以下图片源于网络,如侵删上图通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图,选择对应的数据图表。比较两个及以上变量数据,一是基于分类不同的对比,二是基于时间维度的对比。常见的图表:条形图、柱状图、雷达图、玫瑰图、桑基图等联系两个及以上数据之间的相关性,随时间变化比较关联。常见的图表:散点图、气泡图、多级饼图、热力图、力导向图等。构成指标里的数据都由哪几部分组成、每部分占比如何。常见的图表:饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。分布指标里的数据主要集中在什么范围、表现出怎样的规律,想表达两个数据点之间数量的演变过程。常见的图表:阶梯折线图、面积图、直方图等。基于图表的类型可分为:饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。饼图适合展示分类的占比情况,不适合展示分类过多(超过 9 条数据)或者差别不明显的场景。线形图折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时,不适合使用折线图。同样,当折线的条数过多时不建议将多条线绘制在一张图上。柱状图柱状图提供了分类数据的可视化展示,基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组,例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。混合图折线图和堆叠柱状图的组合图表。同时显示两个坐标轴,用于展示两种不同类型的数据。适用于带有细分分类的累计数据大小以及与之相关的趋势数据,例如在过去十年全国三大产业的具体产值,以及 GDP 增长率。面积图面积图强调数量随时间而变化的程度,也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。散点图散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合,每个点都有一个变量的值决定水平轴上的位置,另一个变量的值决定垂直轴上的位置。通常用于显示和比较数值,不光可以显示趋势,还能显示数据集群的形状,以及在数据云团中各数据点的关系。极坐标图基于直角坐标系的径向变形(相当于把直角坐标卷起来)。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。关系图可以展示数据的占比情况,还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系。树图树图是一种流行的利用包含关系表达层次化数据的可视化方法,是研究多元目标问题的一般工具。 适合展示数据之间的层级关系,适合 6 条以上数据。桑基图一种特定类型的流程图,用于描述一组值到另一组值的流向,图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移,也帮助我们确定各部分流量在总体中的大概占比情况。漏斗图一种直观表现业务流程中转化情况的分析工具,总是开始于一个 100%的数量,结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节,进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析,比如流程流量分析、转化率分析。热力图将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布,适合做数据的预测统计,可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。其他图表词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比,可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小,同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况,不适合展示分类过多或者差别不明显的场景。5. 字体文字是可视化展示中最重要的构成要素之一,可视化大屏设计中字体的运用其实原理跟网页 app 的逻辑基本一致。在字体选择上会基于业务需求选择对应的字体,与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。大屏设计中,中文字体一般会采用浏览器默认字体(微软雅黑、思源黑体、苹方等)页面中标题会采用特殊字体处理,常用的字体有:优设标题黑、时尚中黑简体、方正正中黑体等。英文数字字体推荐:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。优设标题黑官方下载!优设首款免费可商用中文字体来啦!设计初衷这两年为了给读者更好的阅读体验,优设网/优优网的首屏 Banner 都有专人设计,为了让图片更有设计感和冲击感,每一张图我们都重新设计了字体。阅读文章 > 6. 规范建立规范的主要目的是:保证设计的一致性、提高开发效率和还原度、方便迭代 ,辅助设计和开发更好地完成设计的协作。可视化设计中规范一般会分为:色彩、文字、图表、标题控件等,跟网页端规范同理,这里就不一一赘述了。7. 动效大数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效能增加观感体验,凸显关键产品内容、强调功能信息关联,帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主,影响用户阅读,反而弱化了数据的展示。动效的设计原则动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类,用于突出产品核心功能和特点。界面信息按照一定的规律呈现,引导用户的视觉流向。好的大屏设计应该是数据展示模块最好动效不宜过多,要有一定的主次关系变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效要结合数据变化,考虑极端情况的展示效果,最终输出一套完整的动效方案。结语以上通过布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向总结的基本知识和事项,能帮助我们快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明,后面会陆续更新相关文章,感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议,我们一起前行。数据可视化大屏该如何设计?结合实战案例来教你!什么是数据可视化大屏每年的双十一,天猫都会在狂欢节中直播战绩。阅读文章 > 欢迎关注作者微信公众号:「小六可视化设计」本篇来源:优设网原文地址:https://www.uisdc.com/visual-design-guide-2
用户 画像 结论 去年我看了很多交互作品集,假如问我最怕在交互设计师或者 UI 设计师的作品集里看到哪个东西,那必然是这个叫“用户画像/Persona”的玩意,假如你的作品集里也有这个部分,并且和我下面这张图相似度超过 80%,建议看下去:2018 年 ux planet 有一篇爆文叫“用户体验的巨大泡沫:从 UX 到产品设计”,其中有句话尤为经典: “创意咨询”从业者(你可以理解成体验设计师)更好懂了:他们都读一样的书,说一样的话。Only Innovation Consultants are more predictable: all reading the same books, all saying the same predictable things.做“用户画像”就是体验设计师的标配。每个做交互的都会像一个跳大神的挥舞手里的符箓一样挥舞“用户画像”,然后会把它放在神龛里供起来。尽管谁也不知道这个“画像”到底是从哪来的,是谁归纳的、怎么归纳的、基于什么归纳的?但设计师或者设计部门仍然怀着一种朴素的期待,双手合十等待“用户画像”像符箓一样发挥一些神秘的功效,导致用户体验马上从无到有,稳中向好——至少让今年的汇报稳中向好。出现这样的问题,某种程度上也不能怪交互设计师,特别是刚入行的交互设计师。因为“用户画像”这个方法的愿景的确有道理、成果的确很吸引人、制作方法又的确极其含糊。我自己也或参与或主导过几场用户画像的制作,接下来我们细聊一下为什么做用户画像、以及怎么做更好。是什么和不是什么在说怎么做“用户画像”之前,我想先澄清一个横亘在许多人心头的疑惑点:在互联网公司,很多部门都会提“用户画像”,体验部门会提、产品部会提、商业分析/市场部也会提。实际上至少存在两种完全不同的“用户画像”概念,在设计部门我们使用的是作为设计推导工具的“用户画像”,而不是用户分层模型的“用户画像”。记住、消化这一点。“用户画像”或者“persona”在 80~90 年代由艾伦·库珀 Alan Cooper,AKA“交互设计之父”提出,他当时提倡“在设计中,完全不要采用「用户/user」这个概念,而采用「用户画像/persona」取而代之”。这句话用中文讲可能显得有点怪,可以理解为不要为抽象的使用者做设计,而要将抽象的诉求还原成具体的人,为具体的、可以激发共情的人做设计。这么做是为了:避免弹性用户。弹性用户 elastic users 也是库珀发明的概念,他认为假如众多设计者不能对用户形成一致的共识、脑子里面没画面感,那么就难免鸡同鸭讲,你说用户需要 A 功能,我说用户也需要 B 功能。如此一来“用户”的诉求就在不断被拉扯,最后导致设计没有边界、设计者各做各的。避免自我参照设计(Self-referential design),也就是“我要我觉得”。库珀认为设计师或者开发者不是用户,因此不应该以己度人、根据自己的诉求和技能水平假设用户的诉求和技能水平,最后设计出自嗨的产品。因此可以看出,库珀定义的、交互设计师嘴里的“用户画像”是一种为了提升共情、聚焦设计目标的设计工具,它最大的目的有三:1. 让设计师可以调动共情能力2. 让设计方案更有针对性3. 提升设计/开发部门之间的协作共识这三个目的都针对设计部门内部产出环节,在它们的作用下,用户画像提供了一种相对宏观的视角,可以帮助设计师直观的从感受上理解用户,辅佐设计师做出合理的设计决策,但:1. 其精确度、解释力都非常有限,这种作为传统设计工具的“用户画像”无法直接推导出、应用于推荐系统逻辑。2. 因为它是设计推导工具,它必须围绕着一个设计问题或者设计解决方案展开。设计师可以说只关注用户在这个问题上的相关行为:目标、动机、困惑等。而一切和问题解决无关的因素,比如一些人口统计学变量,都可以靠直觉或“经验”编一个,因为它们不对用户的行为产生关键性影响,也就不对设计方案产生影响。比如你正在做一个“个人中心”模块,用户是男是女、在湖南还是在广东,对这个模块的使用有影响吗?很难有。因此,作为设计工具的“用户画像”结论无法用于推广投放/营销这种非常受人口统计学因素(男女老幼)影响的领域。我们再展开讲讲推荐算法的“用户画像”与体验设计的“用户画像”之间的区别。做推荐算法的基本逻辑,是通过用户的特征、过往行为来推断用户的喜好、预测用户的行为,从而给他们合适的推荐;每个自然人都会有一个或多个标签或对应到一种画像。你会根据一些固定逻辑将用户分成不同的类型、打上不同的标签,比如这个用户只逛不买、最近 20 天看了同一款商品 20 次就是不下单,推测可能觉得贵,那这个用户就被打上了“价格敏感”的标记,系统则会根据这个标记匹配对应的广告:比如在开屏页推送团购广告,从而提升广告转化率。而设计说的人物画像,是从许许多多的自然人用户中抽象出一个具有行为共性的“虚拟人类”;自然人与最终的画像并不一定有完全的对应关系。比如我们访谈了 100 个用户,50 个用户觉得价格是购买商品的第一考虑因素,这 50 个用户中 38 个用户一般等打折最低才下单;20 个用户喜欢收藏优惠券;15 个觉得现在的产品对优惠信息展示不足。那么最后我们会将这 50 个用户目标一致的用户抽象成一个用户画像:他叫甄便宜,他每天收集优惠券、他一定会等最低价那天才会下单、他对现在的产品信息展示满意度一般。在现实中,这 50 个用户里可能没有一个人完全符合“甄便宜”的全部特征,也有可能有些人不仅符合这个用户画像,还符合其他的用户画像。用户画像的迷思既然用户画像这么好那么好,那我到底应该怎么做呢?——当你发出这一声疑问的时候,恭喜你找到了那个会让设计师顾左右而言他的问题点。即使是最近很火的、Google的coursera课,讲到这个部分的时候也会泛泛的建议你“做一些用户调研,或者至少做一些电话调研……然后开始把你的结论画成用户画像”。好在交互入门教科书:交互设计精髓 about face 里,库珀稍微透露了一些做用户画像的方法手段,具体分成以下几步:1. 分组:根据角色把用户分组2. 访谈:在每个组内部进行访谈,并且找到一些行为变量(一般指行为、态度、动机等)3. 映射:将找到的行为变量分成离散型的与连续型的,把连续型的变量画成单维度的轴(比如很不满意->很满意)并且将每个自然人受访用户放在这些轴上。4. 聚类:看看是不是有很多个自然人用户,在 6-8 个轴上的位置都很接近。这说明这 6-8 个轴代表的行为变量组成了用户画像之间的关键差异点。5. 优化:修修补补,往关键行为差异点的骨架上增添一些细节:年龄/性别/爱好/名字…据我自己的实际操作中,这个语焉不详的指南给我造成了很多困难,最大的困难莫过于以下两点:1. 映射的困难访谈法得出的结论天然的不适合做程度上的比较。比如当你询问第一个用户产品用起来怎么样时,他说“还行,还可以”,而另一个用户会说“就还行吧,过得去”。这两种反馈孰好孰坏?可能第一个用户的“还行吧”是不错的意思,但第二个用户的“还行吧”是一种礼貌客气的说法,其实他觉得不太行,只是当着我的面不好说出来。当你的设计组里有多个人同时在处理访谈数据时,问题就更多了。首先每个人对用户反馈的解读是不一样的。比如说这个人觉得“还行”是 4 分的意思,另一个完美主义者可能觉得“还行”必须代表 2 分不满意才对。其次访谈经验不太丰富的研究者,往往很难在遵循结构化访谈提纲、得到结构化的可比较结论的同时,还能挖掘出有价值的观点。最后大家一合计,发现用户 1 在 A 问题上表态了,用户 2 没在 A 问题上表态但在 C 问题上表态了,最后无法比较。本来作为设计工具的用户画像,其具体操作中就处处充满了研究者个人的偏好和不确定性,再加上不同研究者之间的认知差异,最后的结论就是大写的随缘,换一个体验小组来做可能会得出完全不一样的结论。2. 聚类的困难访谈的用户越多,聚类的工作越难——这么说吧,当你访谈的用户接近100个,纯手工聚类、寻找共性的工作就难得几乎逼近不可能了。然而100个用户是否能代表产品所有用户的普遍情况?看你的产品体量,但大概率是太少了。较少的访谈用户体量,虽然数据是好分析了,但代价则是对总体的代表性减弱了很多。一个无法体现大盘情况的研究,大概率无法获得业务方的支持。这也是为什么很多用户画像做好了以后就被静静放在某个团队文档里,用来证明“我们 UED 今年自驱型业务达标了”,而无法真正纳入使用。怎么做更好聊了那么多,接下来我们扣回标题,怎么做用户画像才能真正助力设计、至少征服你的面试官?以下有几个例子。1. 谨慎地评估你是否需要用户画像根据库珀自己写在 90 年代出版的《软件创新之路》里的说法,用户画像是“在(用户调研)的过程中发现的副产品”。(这本书英文叫“囚犯管理精神病院 inmates are running the asylum”,不知道为啥中文翻译得这么没意思)在我看来,用户画像只是一种成本比较高的、用聚类的思路+拟人化手段呈现你调研结果的形式,它依赖的底层依据仍然是访谈、问卷、数据分析结论。你不一定要选择用户画像作为呈现设计调研结论的方式。发展阶段比较早期,远没有形成稳定用户群体的产品不用做用户画像。你大概率没有精力去花费这么大的工作量访谈这么多用户、分析这么多质性研究结论,并且在这个阶段下花费如此之大的精力在用户画像上性价比极低。敏捷地、迅速地分析你能拿到手的早期反馈(比如翻翻微博评价或者简单做些访谈足矣)。没有迈入精细化运营的 B 端产品不用做用户画像。基于“角色”这个维度分析就足够了。当然你的产品更加精细化以后,可以基于角色这个骨架再去探索每个角色下不同的用户画像差异,并获得更细致的结论,比如 salesforce 就做了这件事(见: https://medium.com/salesforce-ux )最重要的是,假如你不太懂用户画像是什么,不要在作品集里放用户画像。不然询问起执行细节来非常之尴尬,用户调研是工具,不是装饰品。即使你只是简单的在设计稿之前写一些真正影响到你设计方案的问卷结论或者访谈结论,也比放一个包装精美但言之无物的“用户画像”强很多。2. 定性+定量结合上面讨论了很多库珀提供的纯访谈法的弊端,主要是分析上非常困难。为了避免这种情况发生,我也和我在其他厂的朋友聊了一会,最后总结出这么一套相对轻松一些的做法:先定性:小规模的半结构化甚至开放式访谈,从访谈结论中收集可能影响用户行为的因素(比如用户说“因为我年纪大了,有点看不清字,所以我打开你们的产品以后先根据一个红色按钮的位置猜测放大镜功能在哪里”,那么“年龄”可能是一个影响用户行为的因素)。在这一步不做任何提炼。再定量:收集好可能的用户因素后,将这些因素编辑成问卷问题并投放问卷,问卷选肢参考此前访谈结论。(比如询问用户“你的痛点是什么?”选肢则是定性访谈中用户提到的点+一个开放式选项。)使用定量的聚类工具分析:比较难解释所以我这里也不打算展开。简单来说,我们会比较问卷中每个人每道题的得分(比如从 1-5),从而推算出不同用户的相似性,从而根据不同的问卷答案,将用户聚类成组。这样做需要一些统计学基础,但好处是一次性解决了定性数据映射、聚类的困难,同时又保证了画像的代表性。最后使用定性数据填充细节:做完上一个步骤以后,基于库珀对用户画像的定义,我们需要对用户添加一些人格化的细节。这些细节,比如生活习惯、兴趣爱好,可以从之前的定性数据中抽取,或者补充追加一轮更有针对性的小规模访谈。3. 合理地呈现你的结论上文已经说过了,库珀也提到用户画像中有些细节,说得好听是靠“经验推断”,说的难听些是靠编的。你的报告中,哪些是具有坚实证据支撑的聚类结论、哪些是为了提升共情而填充进来的无伤大雅的小细节?研究者有义务向相关方陈述清楚。无论是在团队内协作或者是放在作品集里,用合理的篇幅展示研究方法、推导过程,最好有用户画像在具体场景和需求下的应用,是提升共识、降低不信任感的合理做法。超详细!从0到1构建用户画像的流程与方法总结用户画像作为一种设计工具,可以很好地帮助设计师跳出“为自己设计”的惯性思维,聚焦目标用户,发现核心价值,赋能产品。阅读文章 > 欢迎关注作者微信公众号:「白话说交互」本篇来源:优设网原文地址:https://www.uisdc.com/user-research-2
用户 产品 问卷 我去年做过一次关于敏捷开发的问卷,其中 2 个问题是:结果发现,很多用户先是选择「非常熟悉,团队使用标准的敏捷开发」,后面又选择「借鉴其理念」。这不是明显的前后矛盾吗?因为前期的用户调研,都只问了第一个问题,而没问第二个问题,导致对用户产生误判,高估了用户对敏捷开发的认知和接受能力。那么做用研时,有办法提高获取信息的有效性吗?虽然没有办法 100% 解决,但改善方法还是有的。如何提高问卷的有效性?我今天就整理出 5 个要点,给大家分享一下:问题要合理用词要实际标准要清晰条件要明确选项要全面1. 问题要合理上面这个问题,问题本身就错了。不建议直接问别人是否愿意付费购买,因为太难回答了。这就好比路边有个卖健身卡的,直接问你:“请问你愿意为运动健身而付费吗?”很多人不愿意付费,并不是发誓这辈子绝对不付费,而是暂时还发现产品对自己有足够的价值。在问卷上问这种问题,并不能带来什么有用的信息。于是我把这个问题改成了这样:结果选 A 的用户非常少,看来完全不想掏钱的人并不多,只是产品服务还没有达到期待。2. 用词要实际这道题的主要问题,是「吸引」这两个字。一般说「吸引」,是指你听说什么东西很好,然后主动去找来尝试。做用户访谈时发现,其实大部分用户,只是偶然发现了这个产品,然后就一直用了,整个过程并没有被「吸引」这件事。大部分用户可能会在脑子里主动把「吸引」改成其它说法才好作答,那么为什么不一开始就用词准确一些呢?而且选择 B 也不够实际,现在产品同质化严重,真正去货比三家的用户也不多,很少有人能发现其他产品没有的功能。例如可以改成这样:3. 标准要清晰这里的主要问题是对于熟练程度的标准不清晰,例如 B 和 C 以「主要功能」为参考依据,而 D 和 E 以「自己需要的功能 」为参考依据。「主要功能」和「自己需要的功能」分开来看都不是能够说清楚的,而且两者之间的关系可能是并列、包含、相交等等任何情况。如果一个高级用户可能需要的功能就已经超出产品的主要功能了,那么此时该如何选择?后来我把这道题改成了:使用统一的评判标准后,回答的精准性也能提高。4. 范围要明确看看下面这个问题:「目前」和「每年」结合起来,感觉像是在问今年的情况,担忧又明确。如果一名用户去年花了 99,今年没花钱,那么该怎么选?如果一名用户前年花了 299,去年没花钱,今年花了 99,又要怎么选?于是,你会发现很难通过这一道题准确了解用户的真实情况。比较简单明确一点,可以改成:3. 选项要全面如果一个用户每周使用 3 次,或者一个月使用一次,就不太好选了。选项不够全面,用户难以抉择,也会导致结果不精准。所以我改成这样:虽然也会有人上个月和这个月次数相差大的问题,但这种情况的几率不高,即便有也不需要太过在意,收集数据更需要的是精准性。总结不论是设计师还是产品经理,很多做产品的人,对用户太不了解,做个调研也问不到点子上。如果能只有真正站在用户的角度上去思考,和用户达到共情,又何愁做不好产品呢?设计师做调研问卷时,容易出现的5个问题我虽然不是什么问卷研究领域专家,但至少也对一些常见问题有点经验,所以这里给大家总结几点常见问题。阅读文章 > 欢迎关注作者的微信公众号:「体验进阶」本篇来源:优设网原文地址:https://www.uisdc.com/useless-questionnaire-questions
趋势 粗野 风格 上周我在《2022 设计趋势!正在悄然流行的「新粗野主义」风格》这篇文章里面提到了「趋势观察家」Michal Malewicz 所观察到的「新粗野主义」的流行。2022 设计趋势!正在悄然流行的「新粗野主义」风格每年你会在优设看到大量的设计趋势预测和总结类的文章,其中有的出自腾讯这样的头部公司,有的出自 Uxdesign.cc 和 Graphicmama 这样的知名设计博客,还有的则可能会出自行业内的知名设计师。阅读文章 > 无独有偶,设计师 Diego Salvatierra 还提出一种新的「Boxmoji」的设计趋势,而他所总结出的这种设计趋势,和 Michal Malewicz 所提出的「新粗野主义」风格有不少共通的地方。「boxmoji」有啥特征?所谓「Boxmoji」其实可以简单地拆分为2个元素「Box」和「Emoji」,也就是「盒子」和「表情符」:无处不在的表情符号。从按钮、菜单到欢迎信息上都是各种表情符号卡片、按钮甚至表情符号本身都带有加粗的阴影和轮廓除此之外,文本排版使用了更加返璞归真的样式,仿佛回到了最为古早的 Web 1.0 时代。就像上面这个名为 useWeb3 的网站的设计,使用了非常典型的「Boxmoji」设计元素。从这些特征上来看,「Boxmoji」设计风格和「新粗野主义」有很多相似相通的地方,最典型的是纯黑的硬阴影,在色彩的使用上,也刻意地做了「丑化」处理,而非追求视觉的协调度。下方的网站 Lumen Finance 就是这样做的:相比于如今我们见到的各种打磨到无比细腻的网站,「boxmoji」这种视觉风格有着一种消解严肃的小众美感,不再包装严实,而是在粗糙的线条和丰富有趣的表情符号的装饰下,显得更加具有亲和力。为什么「Boxmoji」会开始流行?「Boxmoji」这种风格有非常明确的设计来源。从根源上来说,使用范畴越来越广的 emoji 是主要因素。这种视觉语言的流行,直接体现在各种 APP 当中,比如海外的 Tiktok 在选择兴趣范畴的时候,emoji 就充当着图标的功能:在知名的效率软件 Notion 当中,emoji 也起到了重要的区分作用:emoji 在各种APP的设计中的高频度使用,很大程度是因为它已经是现代网络社交语言中不可或缺的组成部分。而促成「boxmoji」风格流行的最主要的因素,还是 web3 ,尤其是各种 NFT 相关的 Discord 社群。emoji 图标在各个 Discord 社群当中不仅会用作不同板块的标识,而且会在日常的公告、交流回复当中高频度地使用,来搭配文案,表达态度,提供反馈。而各个 NFT 相关的 web3 社群当中,这种使用 emoji 来表达态度也在过去的2年间随着 NFT 的热潮,而逐渐成为一种流行的表达方式。这种表达方式最初是反馈在了 web3 相关的网站上,比如在 web3 教育平台 Buildspace 网站上,就大量使用了各种emoji。随后,这些设计手法也在位于排头的科技公司的产品、网站当中出现。值得一提的是,同样来自 Figma 公司、国内用的相对比较少的 FigJam 当中,也采用了较为典型的 「Boxmoji」的设计风格:说到这里,就不得不提出最后一个问题了。是否要跟进这种风格?你可能已经注意到国内的「数字藏品」似乎在有意识地和「NFT」割席,但是web3 的大方向,以及年轻用户在 emoji 的使用趋势,是显而易见的。与其说 Boxmoji 是一种引领风向的风格,倒不如说它是当下互联网「语言体系」下自然产生的一种设计倾向。就像 Michal Malewicz 对于「新粗野主义」风格的预测一样,「Boxmoji」大概率不会像 10 年前扁平化设计一样颠覆一切成为主流,但是它符合很多用户和设计师的表达诉求,是一种值得关注的设计趋势。还是那句话,如果你正在寻找新的视觉风格,表达方式,不妨以此为切入点进行全新的尝试。这些设计趋势,同样值得关注:顶级字体公司蒙纳出品!2022年10大字体设计趋势蒙纳公司最近刚刚发布了 2022 字体设计趋势报告,这份报告对于视觉、LOGO、平面、字体/字库设计师有着相当的参考价值。阅读文章 > 重磅好文!2022 年值得设计师尝试的 9 个视觉设计方向在整个设计领域趋向于多元化的今天,已经很难出现某一个设计风格主导整个领域了,10年前拟物化全面倒向扁平化的盛况,大概率是不再会有了。阅读文章 > 参考来源:https://uxdesign.cc/boxmoji-the-new-aesthetic-6bc2aa8bb362本篇来源:优设网原文地址:https://www.uisdc.com/boxmoji
技术 原型 设计师 继续话题,“你好,沉浸式体验设计师”的第二与第三部分。曾在第一篇当中提到后两部分不做全译,因对我个人而言稍稍涉及敏感,相关部分跳过(上下文中有做注明)。一如既往,个人学习之用,独享翻译之过程而共享其结果,全部内容仅代表原文作者 Bruno Everling 之观点。为何 3D 将成为 UI 的未来!如何成为沉浸式体验设计师(上)疫情四起,仿佛回到两年前,而又觉甚于两年前。阅读文章 > AR 行业的过去、现在及未来在第一部分当中,我谈到了为什么沉浸式技术将成为 UI/UX 设计师新的前沿阵地,解释了 3D 界面相比于如今我们所习惯的 2D 模式来说为何更加贴近于人类的天性,以及这场即将到来的变革可能对设计师产生怎样的影响。那么 AR 技术何时才能足够成熟到可以被主流市场所接纳呢?如此复杂的技术并不易于预测,因为其中仍有一些严峻的技术挑战尚未得到解决。不过,如果你在关注行业中那些大玩家们近些年来取得的进展,那么你至少能大致预估到技术整体的走向。在第二部分中,我将和各位一起对当前 AR 行业的发展状况进行纵览,包括那些最大的参与者,以及他们各自的技术发展策略。1. 炒作周期结束如果你在过去十年当中关注过关于沉浸式技术的新闻,那么你也许会注意到,近些年里相关话题在公众当中的热度,相比于五年之前已经有所下降。伴随着成千上万科技博主与记者所宣扬的未来潜力,VR 最先跑完了一个炒作周期,而 AR 则紧随其后。在 Gartner 公司于 2018 年发布的新技术炒作周期曲线图当中,AR 正处于谷底的位置,而 VR 已经从曲线中消失了。从 2020 年起,这两项技术则不再出现在图表当中。https://www.gartner.com/smarterwithgartner那么这是否意味着沉浸式技术的失败呢?实际上恰恰相反,这个图表仅意味着炒作周期已经结束,人们开始将他们的希望、梦想或恐惧投射到下一个新技术上。有这样一句引言完美地概括了这一现象,虽然这句话的原始出处已无法考证,但人们通常认为它来自于未来学家 Roy Amara,因此它也被称作“阿玛拉定律”:“我们倾向于高估一项技术的短期效益,而低估其长期影响。”人类并不那么善于进行长远预测。任何开创性的新技术通常都能在公众当中形成两方面的剧烈反应:一部分人会过度兴奋并产生不切实际的幻想,而另一部分人则抱有轻视或恐惧的态度,并主张禁止该技术的发展。这两类反应都有问题。根据 Gartner 的炒作周期曲线图,沉浸式技术会缓慢地进入到所谓“生产力稳定期”。在这个时期,技术已经度过最猛烈的炒作阶段,并且在短期内无法再满足大众媒体的渴求,进而难以令他们继续保持兴趣。一些风投开始退身,很多受炒作的怂恿而立项的团队要么关张,要么转向其他领域。但仍会有一些人在坚持 100% 的投入;这些人在持续地创建和改进,因为他们理解这会是一场马拉松而非短跑冲刺。这些公司将成为大浪淘沙之后的胜利者。时间快进几年甚至几十年,这项技术将会成熟到超越曾经所有人的想象。下面,就让我们一起了解这样一些马拉松跑者,看看我们可以从他们身上学到些什么。英文原文在此处对多家公司的相关技术进行介绍与分析。如第一篇文章所预告,此类内容对于译者涉及敏感,因而不做翻译。有兴趣的朋友请根据文末链接阅读原文。—— C7210如何开启沉浸式体验设计师的职业之路当沉浸式技术成熟到能够被大众市场所接受时,势必有大量人员一拥而入;而从行业当前的发展状况来看,我们还有大约一到两年时间可以提前着手准备,例如熟悉 3D 相关技术,主动参与到全新设计范式的塑造当中。在后文中,我将谈及关于如何开始沉浸式体验设计师职业道路的潜在策略。我会分享一些我在过去五年里所收集的优质学习资源及工具,希望能帮助大家快速上手,并一起加入到这场变革的最前线。1. 关于移动 AR基于移动设备的 AR 可能难以代表 AR 技术的未来,但它仍是我们的最佳起点。听起来有些自相矛盾,我们来详细解释。正如我们在第一部分当中所说,数字化界面势必会向着与现实世界紧密结合的方向发展,而交互方式更贴近于我们自然天性的 AR 技术正是发展路径上的下一站。从很多方面来讲,AR 都是虚拟与现实得以真正融合的最后一块拼图。当然,我们距离那个阶段仍然很远;要实现其潜力的完全释放,以下这些先决条件必须得到满足:硬件方面:界面的输出方式需要离人眼更近,使得内容可以从手机屏幕的局限当中解放出来,并能呈现在我们的自然视野所能覆盖到的任何地方。此外,设备中的诸多传感元件也必须能持续扫描我们周边的环境,从而实现高度精准的环境感知能力。软件方面:数字化内容需要转换为 3D 形式,并能与现实世界无缝整合。取决于用户的输入,以及周围物理环境的状态,包括其他物体的相互作用、光照条件、物理定律、天气状况等方面的要素,3D 化内容应该能够动态地改变自身的外观、属性、及位置。虽然当前的移动 AR 在某些方面的表现还算像样,但它在体验上似乎很难全面达到上述这样理想的程度。要实现真正沉浸式的体验,类似 AR 眼镜这样的设备将成为必需。2. 为何设计师应该拥抱移动 AR来自 Patrick Schneider on Unsplash既然如此,为什么我仍推荐首先学习面向移动 AR 进行设计?因为我相信,作为一种过渡技术,移动 AR 在增强现实的发展史上仍有自己的一席之地;作为垫脚石,它能帮我们为了更加沉浸式的未来进行准备。正如现今的科技公司正在基于移动设备开发和验证 AR 所需的技术组件,作为设计师,我们同样可以将移动 AR 作为学习场地,从可用性的角度对新的界面范式进行试验。我能想到至少五个具体的理由来说明为什么移动 AR 可以完美地引导我们去学习“沉浸式体验设计师”所需掌握的必要技术:移动端界面是我们的主场。这方面我们早已掌握了来龙去脉。我们理解所有的规则及可能性,也包括局限。虽然关于移动 AR 我们还有一些新东西要学,但整体体验依然依附于移动设备的场景,遵从于通用的设计原则及交互模式。面向移动 AR,你确实需要以 3D 的方式进行设计,但又不完全是——因为界面的输入方式仍然发生在二维触屏上。入门门槛较低。任何拥有移动设备的人都可以创造出移动 AR 体验,无需昂贵的硬件便能生成原型进行测试。而对于真正意义上的 AR 体验(譬如以眼镜作为载体),你可能会需要非常昂贵的软硬件,包括相关的专业知识,来处理早期普遍存在的技术问题。设计工具足够成熟。在近几年里,我尝试过诸多 app 和工具,但发现要针对 AR 眼镜相关体验去设计原型几乎是不可能的事,特别是在对 3D 和游戏设计缺乏深入理解的情况下。相比于毫无经验而上手 Unity,面向移动 AR 的设计工具则相对容易学习很多。移动 AR 更容易融入人们的生活。手机 7 天 24 小时陪伴着我们,不离左右。当前社会对于手机的接纳度很高,而 AR 眼镜的情况则相反。这使得我们有机会可以去探索一些 AR 眼镜尚难覆盖到的用例,特别是在户外公共空间当中。测试更容易。任何拥有智能手机的人都可以帮你测试原型。相比之下,通过最新的 AR 设备进行测试的成本则过于高昂。希望以上这些可以使大家明白,目前而言,移动 AR 可能是设计师试水“沉浸式体验设计师”的最佳途径了。至于具体如何起步,我创建了一份“移动 AR 新手包”供大家参考,其中包括了近些年里令我感到有所收获的一系列优质资源。3. 移动 AR 新手包App先来看一些具有启发性的 app。熟悉移动 AR 的方式之一自然是尝试现有的 app,充分把玩。下面列出一些比较典型的,其中也包括一些不那么知名,但很具实验性质的 app。Ikea Place:第一批移动 AR app 的代表,也是具有真实用例场景的产品,提供了上乘的解决方案。Wanna Kicks:同样提供预览类的功能,具体用例聚焦于鞋类试穿和购买,实际体验非常惊艳。纽约时报 app:最早一批拥抱 AR 技术的新闻类产品。他们会为新闻故事提供相关 AR 功能,从而实现更深层的沉浸体验。无线电波的构造:非常早期的实验性 AR app,出自荷兰设计师 Richard Vijgen 之手。是付费 app,但非常值得尝试。Meisai:作者 Takayuki Watanabe 在其中探索着各种不同的 AR 滤镜与视觉效果,非常有趣。Qlone:也可以被看作是 3D 设计与原型工具,用来对现实物体进行 3D 扫描进而生成模型。阅读与学习资源此处内容对于译者涉及敏感,因而不做翻译。有兴趣的朋友请根据文末链接阅读原文。—— C72103D 设计与原型工具来自 Mehdi MeSSrro on Unsplash既要说,也要练,学新工具势在必行。也许最初令人生畏,但当你熟练之后,便会发现其中的乐趣。以下是一系列对于初学者来说较为友好的 3D 与原型工具供参考。Spline:对于初次体验 3D 是不错的选择,开发团队比较年轻,致力于让 3D 设计变得更简单。产品免费,易于使用,没有铺天盖地的复杂功能,输出快捷,恰到好处。Vectary:定位类似于 Spline,大体上在尝试打造 3D 设计领域的 Figma,聚焦于简单易用且易于协作的功能,既能引领你步入新领域,也能帮你在入门之后产出令人印象深刻的作品。Blender:当 Spline 和 Vectary 已经难以满足进一步的需求时,你可以继续进阶到 Blender。我甚至不大理解这款软件之所以免费的理由,因为它切实提供了创建专业 3D 模型及动画所需的一切功能。最初上手的难度相对较高,但他们提供的学习资源质量很棒,有助于你快速提升水平。Spark AR:最初由 Meta(Facebook)面向内部团队开发使用,而后面向公众发布。任何人都可以通过它来创建并发布他们自己的 AR 面具和滤镜。大体上讲,是这个产品开启了 Instagram 上全脸滤镜的热潮。虽然你可以通过这个软件制作非常复杂的东西,但他们在官网提供的教程还是可以帮助你非常便捷的创建自己的虚拟面具。Adobe Aero:你可以轻松地将预制或自制的 3D 模型拖放到书桌或房间地板上,并添加相应的交互行为,创建出简单的 AR 原型。Apple Reality Composer:Apple 自家的 AR 设计工具,定位类似于 Adobe Aero,如果你希望把玩一些 3D 内容,添加一些交互,创建一些简单的原型,那么这绝对是正确的工具。纸和笔:若干年前 WWDC 的这部视频罕见地展示了 Apple 的设计师制作 AR 原型的幕后故事。我非常惊讶于他们仅通过纸、笔、胶水等工具就能实现大量原型设计工作。你可以远离屏幕几个小时,通过制作实体化原型来演示和验证数字化体验,太棒了不是么。如何获取 3D 模型来自 Bradley Pelish on Unsplash有时候,基于他人创造并提供的 3D 模型来设计体验确实会令事情简单一些。前面提到的很多 3D 工具都会通过他们自己的库和平台为用户提供模型。如果这些仍然难以满足你的所需,那么不妨试试以下平台:Thangs:免费 3D 模型平台。质量水准不一,但你或许恰好能找到比较适合的。Sketchfab:付费平台,但整体水准明显更高。如果你需要质量过硬、细节出色的模型,不妨到这里一试。大致就是这样。希望这份清单,包括整个文章系列,都能为大家带来价值。英文原文:https://bruno-everling.medium.com原文作者:Bruno Everling译者:C7210AR|也许AR增强现实技术才是距离设计师最近的未来从科幻小说到电影,从动漫到现实世界,虚拟现实技术历经几十年的光阴,从一个构想,变成了现实世界中到处可以体验到的民用技术。阅读文章 > 欢迎关注作者的微信公众号:「Beforweb」本篇来源:优设网原文地址:https://www.uisdc.com/immersive-experience-designer-3
需求 设计师 用户 作为交互设计师,最常做的工作就是按照产品给的设计需求完成设计。设计需求要分轻重缓急。非重点需求可以减少投入,但对于重点的设计需求,设计师应该如何去处理呢?在大厂的这些年,我看到、亲历过三种类型的设计需求处理方法:第一类:完成任务,保证设计质量第二类:完善设计需求,提出改进意见第三类:用户+业务视角,发挥设计价值这三种方式,也可以理解为从低到高三个层级,侧面反映出设计师的专业能力和工作水准。完成任务,保证设计质量有些设计师会以「完成设计任务」为目标。在接到设计需求后,并不会做过多额外的动作,对着 PRD 即刻开工。虽然这类设计师在设计过程中遇到问题也会跟产品沟通,但他们始终对 PRD 给予充分「信任」,即使有质疑也不会做过多的争辩或反驳。设计成果:基本能够按时按量地完成设计需求;中规中矩,不会出大问题但也不会有惊喜;设计质量和设计评审结果主要依赖 PRD 的质量,设计稿有时会被前端和后端追问、质疑、或被要求补充交互细节。设计评审次数、后期细节问题讨论的次数,会视设计稿修改情况而增加。设计师以「完成需求」为目标的工作流程完善设计需求,提出改进意见以这种方式承接设计需求的设计师,在接到需求后,通常会先深入分析、了解功能,会查看同类的竞品情况;对于 PRD 建立自己的理解,并在设计稿中有所体现。在设计稿评审时,这类设计师会有理有据地表达自己的观点,尽量争取用设计优化后的方案替代 PRD 中的不足。设计成果:在保质保量的同时,增加一些专业的细节、通用的规范;使用设计思维和方法让产品的功能更加流畅、易用;评审的过程中可能会与产品经理产生争论,可由前端、后端、业务方等对方案进行评估和取舍。设计师以「优化、完善需求」为目标的工作流程从用户视角出发,发挥设计价值这种承接设计需求的方式更高级和专业。这类设计师不仅会深入分析 PRD 和竞品,在没有条件做用户调研时,也会把自己当成用户,使用用户视角来分析问题。在接到设计需求时,这类设计师会根据 PRD 做这么几件事情:1. 梳理用户的任务流程用户的「任务流程图」也就是用户在本次需求中会经历的关键步骤的流程概述。它可以帮助设计师理清楚设计需求(尤其是新项目)中的关键节点。这么做的好处是:(1)从全流程视角,更清晰地理解产品功能和用户使用方式,以便于对流程做优化;(2)对关键节点进行检查和补充,比如在节点处会有哪几种判断逻辑、是否要对用户进行引导等等,既可以减少体验断点,也是给 PRD 查缺补漏;(3)整理出明确的设计重点环节,设计发力更有侧重。用户任务流程示例2. 拆解产品 / 业务的核心诉求对于这类设计师来说,PRD 的内容只是「待办项」,不是最终「需求项」。比 PRD 更有价值的是产品 / 业务目标,PRD 对于实现产品需求和业务目标来说,并不一定就是最优解。从「业务需求」和「产品需求」推导出的「设计目标」对设计稿的产出更有指导意义,使设计师对产品需求和设计方案进行再定义。站在产品视角和用户视角,对 PRD 提出挑战和质疑,是这类设计师的工作常态。从用户、业务、产品需求推导出设计目标和策略3. 根据实现能力,提出多个方案对于不完全确定可以实现的设计方案,这类设计师会在设计稿中画出 2-3 个方案,在评审中保持开放的态度,多方协调确定最优解。设计成果:保质保量地产出令其他人信服的设计思考和最优方案;从用户立场出发,让产品体验更上一层楼;从产品 / 业务目标出发,用设计为业务主动赋能,尽可能地发挥设计的最大价值;前期思考得越全面,后期反复修改、评审设计稿的用时就越少,提高整体工作效率。设计师从「用户+业务视角」出发的工作流程以上这三种类型的设计需求处理方法,也可以看出一个设计师的综合素养和专业能力。而当你不断地使用高级的工作方法来承接设计需求,你的设计能力也会有所提升。你可以看看你在平时接需求、做需求处于哪种状态和层级。这些思路和经验,希望对你有启发。用4张大厂表格,帮你有效提升协作效率!刚来京东的时候,时常会被这些问题困扰:“在多人协作的需求处理中,如何明晰进程?阅读文章 > 欢迎关注作者微信公众号:「长弓小子」本篇来源:优设网原文地址:https://www.uisdc.com/deal-with-requirement
空间感 画面 构图 强烈的视觉冲击力对于平面设计来说是一个很重要的品质,而关于如何加强画面的视觉冲击力,有一个方法简单又有效,即加强画面的空间感。那么,有哪些可以加强画面空间感的具体操作方法呢?葱爷特地去收集了一大波此类作品,发现大部分空间感很强的设计,除了视觉冲击力强以外,画面的美观性也会不错,并且总结出了以下几个规律:空间感很强的画面常用以下这几类构图1. 发散构图比如以画面中心为发散原点向四周发散;或者以画面中任意一个地方作为原点呈扇形发散。其实这个原点就是透视关系中的消失点。2. 螺旋构图螺旋的图形来自于漩涡,即越靠近中心越小,越靠近中心越深,与发散构图类似,只不过构成元素行驶的轨迹不是直线,而是曲线。3. 仰视构图仰视构图可以得到一种很雄伟、很大气的效果,在森林里或者高楼大厦的下面使用这种构图,空间感会特别强。4. 俯视构图与俯视构图相反,这种使用从上往下看的视角,可以让画面显得很壮阔。5. 鱼眼镜头即模仿摄影中的广角鱼眼镜头,将整个画面进行扭曲,呈现出球形的效果,加上一些元素的远近对比,空间感会特别强。6. 景深镜头即画面中会有一个焦点元素,而位于该焦点前后的元素都做模糊处理,以此塑造出空间层次。当然,设计不等于摄影,所以仅仅是使用一个构图并不能保证画面会具有很强的空间感,还需要根据透视关系调整元素的大小和光影,即近大远小原则和近光源亮远光源暗的原则。空间感很强的画面用这3类场景1. 城市 CBD 中心区在高楼大厦林立的城市中心广场,无论使用仰视还是俯视的构图都可以得到空间感很强的效果。2. 街道或巷子在狭长的街道上或巷子里,两旁的建筑、树木或广告牌随着视线距离的由近及远,会呈现出非常明显的透视变化,故空间效果就会特别强。3. 大自然诸如山川、湖海、草原这种很辽阔的场景,如果使用俯视的广角镜头,那么视野就会很开阔,由近及远可以看到非常大的空间、非常多的元素,层次也会非常丰富,所以空间也会很强。以下这几类元素的运用可以有效加强画面的空间感1. 超强透视的人物或物体比如有些海报会使用透视效果很夸张的人物作为视觉主体,配合人物夸张的动作或面部表情,可以大大加强画面的视觉冲击力和吸引力。2. 超强透视的文字一些大字报画面,甚至不需要具体的场景以及过多其他元素,仅通过把主要文字放大,并进行透视扭曲就能得到空间感很强的画面。3. 超强透视的装饰元素合理的使用一些装饰元素也可以让画面的空间感更强,比如一些符合透视关系的色块、线条、云层(插画海报经常用)等等。结语看了这么多作品,现在知道怎么打造空间感了吧,这类型的海报视觉冲击力绝对是杠杠的,而且如果细节处理得好,美观性通常也会不错,赶紧去试试水吧。新手如何做好海报设计?试试网格这个神器!大家好我是花生~前几天有小伙伴在社群中讨论海报设计,提到了一个问题:虽然自己知道做海报的时候需要用网格,但是不知道网格的行列数量设置成多少比较好;也有小伙伴说自己用了网格,但是海报做出来还是不好看,不知道是哪里出了问题。阅读文章 > 欢迎关注作者的微信公众号:「葱爷」本篇来源:优设网原文地址:https://www.uisdc.com/poster-design-4
地图 文件 工具 大家好我是花生~勤勤恳恳挖掘效率神器的我最近又发现了不少好用的小工具,今天就继续为大家推荐其中不能错过的 5 款,它们分别是:一键查看!超好用的文件预览神器「Quicklook」高清精准!下载地图必备的官方网站「标准地图服务」一秒变好看!免费截图美化工具「FabPic」Photoshop 突然崩了怎么办?快试试网页版 PS「Photopea」轻量省心!电脑文件快速搜索神器「Everything」了解往期效率工具看这里这 5 款工具,让设计师工作效率提升 200%!(三)大家好,我是和你们聊设计的花生~上一期为大家分享的神器都用起来的了吗?阅读文章 > QuickLook「软件介绍」 https://github.com/QL-Win/QuickLook「程序下载」 https://github.com/QL-Win/QuickLook/releases/tag/3.7.1「插件下载」 https://github.com/QL-Win/QuickLook/wiki/Available-PluginsQuickLook 是一款免费开源的软件,安装后可通过「空格键」快速预览电脑上的各种文件,包括但不限于 psd、ai、zip、pdf、ppt 等必须通过特定软件打开的文件。QuickLook 支持的文件类型非常全面,而且操作便捷。点击「空格键」就能快速打开/关闭预览窗口,无需再打开多个程序查看,能大大节省我们查找文件内容的时间。QuickLook 的开发者还更新了不少插件,如文件夹预览插件、字体预览插件等,让预览文件更加方便。软件安装包和插件资源都已经为大家打包好了,下载链接在本文开头和结尾,有需要的小伙伴快去试试吧~另外今天推荐 QuickLook 仅适用于 Windows 系统,苹果电脑用户可以直接用使用 macOS Quick Look,二者功能是一样的。标准地图服务「网址」 http://bzdt.ch.mnr.gov.cn/index.html做设计时如何找到高清且标识准确的地图?用「标准地图服务」这个网站准没错。「标准地图服务」由自然资源部地图技术审查中心承办,站内地图由中国地图出版社、国家基础地理信息中心编制。网站提供的标准地图包括中国地图 249 幅,世界地图 79 幅和专题地图 10 幅,都是依据中国和世界各国国界线画法标准编制而成。地图下载提供 JPG、EPS 两种格式,尺寸从对开至 64 开都有。据网站提示,社会公众可以免费浏览、下载标准地图,直接使用标准地图时需要标注审图号。对地图内容编辑(包括放大、缩小和裁切)改动的,公开使用前需要送自然资源主管部门审核。如果需要 3D 样式的地图,大家可以用优设网文章作者「灰色执照」开发的三维地图的免费工具 NB Maps,具体内容可查看开发者本人文章:数据可视化神器!帮你一秒生成三维地图的免费工具NB Maps大家好,我是灰色执照。阅读文章 > FabPic「网址」 https://www.fabpic.app/FabPic 是一款便捷的截图美化工具。如果你觉得截图过于简陋不适合直接使用,可以用 FabPic 给截图加上统一的边框,让多张截图尺寸一致并具有统一的形式感。FabPic 支持为截图添加边框、阴影和背景,背景可以是纯色、渐变和图片,还可以修改边框的宽窄。软件由一位设计师独立开发,完全免费使用,美化完成后可点击下载保存或直接复制粘贴使用。Photopea「网址」 https://www.photopea.com/一直都在为大家推荐各种图片处理网站,今天推荐的网站「Photopea」肯定是设计师最熟悉的,我们先看看它的主界面:是不是很熟悉?没错,「Photopea」完完全全就是网页版的 Photoshop,不仅界面功能和 PS 一致,连快捷键都可以一样用。「Photopea」可以创建并打开 PSD 文件,支持导出的文件类型也非常多。虽然 PS 是每个设计师的必备软件,但应急时无需下载、打开网页就能使用的「Photopea」也是个不错的备用选择。Everything「网站」 https://www.voidtools.com/zh-cn/如果我们想在电脑上查找一个文件,但又不记得文件的位置,就只能选择从「此电脑」范围上查找。试过这种方式的小伙伴都知道,查找速度非常慢。如果用 Everything 搜索,就不用担心这个问题了。它能在几秒之内就帮你找到想要的文件,即使需要扫描的文件量很大,所需的时间也就一分多钟。除了按文件名搜索,Everything 还支持文件的内容搜素,并可以实时跟踪文件变化。Everything 程序大小不到 2M,在运行时占用的系统资源极少,是公认的 Windows 必备效率工具之一。感兴趣的话可以在网站首页的「支持」一栏了解更多使用技巧。以上就是为大家推荐的 5 款效率工具,希望对大家的工作有帮助。 如果你有想要解决的问题,但还没有找对应的工具,欢迎在评论区分享出来,说不定下一期就会有相应的推荐了~我是夏花生,我们下期见。 文件名 如何下载使用 文件大小 提取码 下载来源 quicklook安装包 插件93.03MB8866 点此复制 登录下载 本篇来源:优设网原文地址:https://www.uisdc.com/5-practical-software-2
图像 图片 程序 大家好,我是和你们聊设计的花生~有关注「神器挖掘机」阿文(微博 @Simon_阿文 )的朋友,可能已经了解到他最近正在疯狂安利一款 AI 绘画神器——Disco Diffusion。这款被阿文称作“用嘴就能画画”的神器,能通过输入的一段描述语句,自动渲染生成对应场景的图片。渲染结果质量非常高,高到不说是 AI 自动生成的话,你肯定会觉得是哪位绘画大神的作品。先来看看阿文第一次尝试的结果,输入关键词是“星空下的向日葵花海”,渲染时间很久,但是出来的效果也足以令人惊叹。(图片来源: @Simon_阿文 )之后阿文又尝试了中国画的水墨风格,Disco Diffusion 的表现仍然很好。图片来源: @Simon_阿文 ,关键词 ”a beautiful painting of Chinese Shanshui landscape, clouds, ink style, trending on artstation“在看到阿文的推荐后,微博上很多网友也开始尝试,并同样取得了不错的渲染结果。图片来源:微博 @MIGRAINER- ,关键词 ”Among planets, stars and galaxies, an armada of gigantic very long spaceships travels at light speed, detailed,artstation,Chris Foss“怎么样,是不是有点颠覆你对 AI 绘画的认知了?Disco Diffusion 自发布后,在外网引起了很多艺术家的关注。他们也使用 Disco Diffusion 进行各种尝试,也诞生了很多优质的渲染作品。图片来源: @cosmicWranglerZ ,关键词 ”A BOY TRAVELING WITH HIS CYBERNETIC PACKHORSE SELLING TECHNO ALCHEMY WARES“ 渲染结果,图片来源: @x1ao4 ,关键词 ”ancient Chinese village“可以看出 Disco Diffusion 自动渲染出的图片无论是色彩还是氛围都达到非常高的水平,充满魔幻色彩。作为一个 AI 程序,这一切是如何实现的呢?什么是 Disco Diffusion?Disco Diffusion 是在今年 2 月初开始流行的一个 AI 图像生成程序,它可以根据描述场景的关键词渲染出对应的图像,开发者是艺术家兼程序开发员 @Somnai_dreams 。这款程序的特点在于:它直接托管在谷歌的 Colaboratory 上的,即整个程序是直接在浏览器中编写和运行代码的。这也意味着使用 Disco Diffusion 对电脑配置没有要求,因为程序不需要被部署到本地。Github 地址 https://github.com/alembics/disco-diffusionDisco Diffusio 程序的首页Disco Diffusion 程序的首页不是我们熟悉的用户界面,而是一行行看起来很复杂代码——有点像没有外壳的机器,将线路零件直接呈现在用户面前了。这些代码就是 Disco Diffusion 整个程序运行下来的所需的全部代码,而且都已经按步骤分类好了。看起来很深奥,但真正需要我们动手修改参数的地方极少,跟随网站上的教学视频你可以很快就弄懂如何操作。需要用户修改参数的其中一部分,右边的界面还是简单易懂的Disco Diffusion 之所以有如此强大图像生成功能,倚仗的是背后强大的机器学习模型。这个模型并不是简单地将一堆图片生硬拼接,而是在基于关键词的基础上,AI 模型对图像进行一次次迭代渲染,直至机器判定渲染结果与给定的关键词匹配度最高,渲染结果才会最终确定。图片来源: 《How does CLIP Text-to-image generation work?》这也是为什么我们用 Disco Diffusion 渲染图像时,画面最开始都是模糊的噪点,而渲染时间越长,图片精度就越高。Disco Diffusion 的版权问题Disco Diffusion 的图片生成功能如此强大,那生成图片的功能可以直接免费商用吗?首先,Disco Diffusion 程序基于 MIT 开源协议,即这个程序供所有互联网用户免费使用,还可以复制、修改甚至出售。用 Disco Diffusion 渲染生成的图像,版权归图片创作者本人所有。Disco Diffusion 首页的「License」中表明程序基于遵循 MIT 开源协议那生成的图片可以直接拿来商用吗?这个问题需要谨慎对待。Disco Diffusion 如同一位具有极强模仿并融合画风能力的画手,人工需要很长时间很多精力才能完成的画作,它通过模型学习加机器渲染,就能用比人工少很多的时间实现。使用 Disco Diffusion 渲染的节气图,作者: 弈湘君但 Disco Diffusion 本质上只是通过算法不断去接近给出的关键词,或者是在几个关键词中取得一个平衡点,以达到文本规定下最大程度的“相似”。这些行为都是“模仿”——无论好坏,只要相似度够高就行了,远达不到人脑可以有意识进行取舍的程度。使用莫比斯风格渲染出的图,风格与原作者非常接近。(图片来源: @Simon_阿文 )如果你在给 Disco Diffusion 的关键词中,涉及到风格特别鲜明的艺术家或者商业作品,那么渲染生成的图像会呈现出非常相似的风格,这样自然就会涉及到侵权的问题了。阿文对 Disco Diffusion 图片是否可以商用的看法,图片来源 @Simon_阿文Disco Diffusion 能代替人工绘画吗?Disco Diffusion 可以轻易渲染出犹如专业艺术家创作的图画,是否意味着能够取代人工创作呢?我们看看专业艺术家是怎么看待这个问题的。Stijn Windig 是一位来自荷兰的艺术家,擅长概念设计,作品细节精致,场景恢弘。Stijn Windig 的部分作品(图片来源: Artstation )Disco Diffusion 开始流行后,Stijn Windig 也开始尝试将 Disco Diffusion 运用到自己的创作过程中。Stijn Windig 先用 Disco Diffusion 渲染生成各种图像,然后将图像导入 PS 放大,以此为基础在上面进行进一步的绘制。下面是他以这种方式创作的作品:Stijn Windig 在进行一系列的尝试之后,将作品分享到 Artstation 上并写到:……完善每幅渲染图像大约需要 1.5 小时。从Disco Diffusion中获取图像花费了更长的时间,尝试了不同的文本提示,直到我得到了一些看起来还比较像样的东西。Stijn Windig 还将自己的创作经验写成文章发布到自己的 Artstation 博客中,在文章中,Stijn Windig 说到:……首先,这东西(Disco Diffusion)的存在是有点疯狂的……它似乎能够轻易地生成史诗般恢弘的概念艺术。……当你下载图片后将其放大,并开始在上面作画,就会有一种超级失望的感觉,因为事实证明,尽管从远处看它是一个恢弘场景的图像,但实际上那里什么也没有。……一旦你开始想细化图像中某个不明确的部分,渲染图像就失去了其原有的氛围感了……在试图 “完善细化 “图像的过程中,我发现每一笔都不对劲,因为我可以看到图像变得更加明确,但却失去了原有的魅力。……当我第一次发现它时,我试着把它用在一个客户的项目上,这个项目的特点是环境中有很多建筑元素,我想,”Disco Diffusion能够帮助我快速完成这幅画”,但是结果并非如此。我发现渲染图像上的每一处都需要重新绘制,甚至每一个像素都得重新刻画。因为尽管它可能看起来像一个有城市的山地景观,但实际上没有正确的房屋、山垛、植被和其他东西,只有模糊的概括暗示。我在一幅本应一两天内就完成的图像上耗费了一个星期。如果是直接创作三维甚至是二维的图像,我就会更快……所以这就是 Disco Diffusion 的弱点:如果你想要一些有具体细节的事物,Disco Diffusion 是没有能力来生成一个细节精细的作品的(至少目前是没有)。它不擅长刻画具体细节。除此之外,它不擅长人物、动物、汽车、透视,或任何需要真正具体特征的东西……从文章中,我们可以看出,身为专业艺术家的 Stijn Windig 在经过多次实践后,认为 Disco Diffusion 并没有取代人工创作的能力,原因有以下几点:从 Disco Diffusion 中获取想要图像并不容易,需要花费大量时间去调试关键词。Disco Diffusion 没有刻画具体细节的能力,渲染出的图像乍看惊艳,如果仔细观察就会发现大部分都是模糊的概括暗示,不能达到商业水平的要求。如果想在渲染图像的基础上刻画细节,就相当于要把整个图重新画一遍,这样一个流程下来花耗费的时间精力,比直接手绘还要多。不过 Stijn Windig 还是对 Disco Diffusion 的未来发展持乐观态度,虽然直接利用 Disco Diffusion 渲染的图像进行商业创作的尝试失败了,但将它作为一种灵感参考生成器还是非常好的。……我发现它更适合作为一个创意生成器使用。给它一个提示,比如”晴天的幻想城市,王座游戏,巨大的城堡”,它将返回一些至少能激发想象力的东西,并可以用来在上面绘画,作为草图。Disco Diffusion 相关资源根据文本提示渲染出高质量图像的技术近年来发展迅速,除了我们今天谈到的 Disco Diffusion,类似的程序还有 Nightcafe Creator 和 Dream by wobom。1. 人工智能艺术生成器 NightCafe Creator「网站」 https://creator.nightcafe.studio/NightCafe Creator 是一款人工智能艺术生成器应用程序,可以根据你给出文本提示生成多种风格的艺术作品。创作完成后版权归创作者所有,并可以随心所欲地使用它们。NightCafe Creator 还支持将照片转换成各种风格的图片,使用这个功能要注意照片的版权问题。2. 人工智能艺术生成器 Dream by Wobom「网址」 https://www.wombo.art/Dream 是一款 ISO 应用程序,输入一个文本提示,选择一种艺术风格,就能在几秒钟内生成一副精美的图画。3. 欣赏更多用 Disco Diffusion 渲染出高质量的作品:「国内」 点击此处直达「国外」 点击此处直达「参考资料」https://ecency.com/hive-163521/@penderis/get-started-quickly-with-discohttps://www.youtube.com/watch?v=Dx2G940Pao8https://www.youtube.com/watch?v=-b7xKWeADHQhttps://www.artstation.com/blogs/stijn/B276/ai-sketches-with-vqgan-and-clip-for-concept-art想无损放大图片?试试这个在线神器「AI Image Upscaler」曾经遇到一个情境:对方要求的图片尺寸比我手上有的图片还要大张,而且还大了两三倍,但图片是采用位图格式,若非向量图直接放大就会出现失真、变形或模糊等问题,那要怎么解决呢?阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/disco-diffusion
画师 课程 喵喵 挖到宝了。在刚刚看到独立插画师 Xu 喵喵的画作的时候,脑子下意识跳出了《离骚》中描写「香草美人」的浪漫词句:制芰荷以为衣兮,集芙蓉以为裳。不吾知其亦已兮,苟余情其信芳。—屈原《离骚》Xu 喵喵确实几乎只绘制女性角色,但是她笔下的角色气质、意象、表达手法绝对不单调,比我最初想象中要丰富太多。这些女性角色,或烂熳,或优雅,或俏皮,或哀伤,或娴静,或可爱:花草藤蔓替代了华服,飞羽流云里蔓延着情绪和想象:你可以在色彩和元素中看到季节的流转:即使是留白里,都氤氲着唯美的云气:从青丝到白头,甚至你还能在画作中一窥画师的生死观:如果你也想想学习独立插画师 Xu 喵喵 的创作方法,在演示过程中一窥她绘画的秘诀,不要错过今天的课程:这门录播课程时长约 8.5 小时课程原价 129 元,活动价格 89 元,难得好课,不要错过!移动端微信扫描下方二维码购买,网页端右戳购买 https://pro.uisdc.com/detail/p_625477bae4b0812e178abe3c/6用「花鸟风月」来刻画女性形象的插画师也许已经不用我用太多的语言来描述,你已经感知到 Xu 喵喵 用植物和动物来表达女性特征的「笔力」了。和很多画师不同,Xu 喵喵 的作品当中融合了传统绘画的「意象」,又从现代艺术创作中汲取「想象力」的艺术手法,将「女性角色」这一选题之下,延伸出千变万化的创作。仅仅只是一台 iPad 一支笔,她就能让你看到到层峦叠嶂般的丰富作品。那么,她又会在这套课程中怎样教会你,她的创作方法呢?往下看。唯美意境,始于构思,成于刻画和很多插画课程一样,Xu 喵喵的这套插画课是从她的个人创作经历和风格成型入手的,不过她非常注重人体和动植物元素的刻画。所以在正式开始演示之前,Xu 喵喵会相对详细地为你拆开讲解灵感的获取,人物、动植物元素的唯美感塑造的技巧。课程案例在一段 iPad Procreate 的软件技巧分析之后,你会跟随着她的画笔,完整地学习上图的绘制过程,从中逐步了解她的绘画技法,从草稿的绘制,到线稿的描摹,元素的处理方式,色彩的附着,到最后完成的全部内容:这门录播课程时长约 8.5 小时课程原价 129 元,活动价格 89 元,难得好课,不要错过!移动端微信扫描下方二维码购买,网页端右戳购买 https://pro.uisdc.com/detail/p_625477bae4b0812e178abe3c/6下面是更多 Xu 喵喵 的插画作品:这门录播课程时长约 8.5 小时课程原价 129 元,活动价格 89 元,难得好课,不要错过!移动端微信扫描下方二维码购买,网页端右戳购买 https://pro.uisdc.com/detail/p_625477bae4b0812e178abe3c/6本篇来源:优设网原文地址:https://www.uisdc.com/xu-miaomiao
标题 视觉 都是 最近给一些小伙伴看图,发现很多问题都是出在主标题上,往往我们的问题是出在不知道如何做形式,主标题不丰富,以及做出很多过时的编排等等。今天这篇文章会从如何提高标题丰富度,以及编排标题时经常犯的错误这两大方向切入,希望大家有所收获。标题作为我们文字层级里的第一层级一定要承载起足够的形式,标题要具有三种明显的特性。在常规的商业设计中标题通常是信息中空间占比最大的(或者是最显眼的),字形最复杂的以及形式最丰富的。这是因为一旦标题过于单薄,下面所有的信息都无法深化设计,强行越过标题去强化别的信息是一种喧宾夺主的行为,会大大的混乱视觉秩序。大家肯定对空间占比最大这一点是有疑问的,例如我们经常会看到下面这种设计,他的标题占比就不大而且还挺好看的是为什么呢?我们刚才说除了占比最大还可以怎么样?位置最显眼对吧,这两个条件符合其中的一个就足以在画面中简单的区分出层级,这就像是买房子一样,要么占地方大,要么占地方好。我们开始进入正题,继续来说空间占比最大的话题,这里其实就是解决的信息阅读顺序的问题。正常的信息阅读顺序应该是主标题>副标题>营销点>符号化信息=小标题>阅读性信息>隐藏性信息。那么如何区分层级?大小是最简单的方法,除了大小,找一个显眼的位置这也是非常简单的方法,我们做设计平时就是要避免给自己找麻烦,能用简单的方法解决问题一定不要去绕个弯。例如这份设计,可以看到他的标题的位置是最明显的,明度差是最大的,而且标题的信息组比任何一个信息组都要大的多,这就是区分层级非常好的一份设计。通过结构拆分图我们可以发现,虽然这几个色块大小差不多,但是其中的信息组大小都和主标题差了一个档,一定要记住我们比的是信息的大小而不是色块的大小。这个设计也是一样的道理,通过放大主标题以及颜色区分,让人一眼就看到核心信息,他这里的标题还和主体结合成了一个视觉组,让这份设计的整体性以及视觉性都要比一般的设计好上很多。直接放大或者找个好位置在大部分商业设计中都是相当好的手法,放大不是直接拉大,也是有条件的,他必须具备一定的视觉性,视觉性这个东西要么是自身就有,要么是借助外力。自身就有指的是我们的字形就相对复杂,比如我们要给下图配一个主标题的字体,通过分析我知道要用一个无衬线体,那么对比下面两个字体你会选用哪个更为合适?显然我们会选择 B 选项,因为这个字体的内部结构相对丰富,视觉效果也要比 A 选项更好。这就同样解释了为什么同样的内容,有的使用简体明显没有繁体看起来效果好,这也是因为繁体的字形结构相较于简体更加丰富,但是简体的易读程度要比繁体好上好几个档次。字体设计除了可以优化标题的视觉性以外,同时也是在一定程度让其增加了文字的结构,使其可以支撑放大使用。如果继续增加视觉性继续放大标题,那么标题就可以作为画面的主体进行设计了。就像下面这个设计一样,不仅仅针对字体的形态肌理进行了设计,同时还在主体上组合了很多图形抬高视觉性,这种丰富程度作为主体是完全没有问题的。刚才说了这么多其实也不是绝对的,设计画面的 logo 大部分时候都会比主标题还要丰富,不过 logo 的占比都比较小,复杂也不会抢掉标题的戏。所以我们在说信息复杂度的时候通常不会把 logo 计算进来。给大家贴上这个图大家就明白了,视觉性会随着进度条的提升逐渐呈现出不同的作用,具体要应用到什么程度大家就按需要选择就可以。这里所谓的视觉性和识别度都是相对而言,要根据实际设计的风格,装饰元素以及设计主体来确定我们应该复杂到什么程度。不管如何,如果作为主标题或者主标题以下的内容一定要有识别度。所谓形式最丰富,也就是主标题存在的技巧手法是最多的,最常见的几种有大小、长短、明暗的对比,承载空间的添加,立体效果,变形路径,肌理添加等。下面我会给大家分别举例说明,避免大家平时做标题不知道从何下手。这个是最常用的,但是并不 low。做好基础的层级对比是我们刻画主标题的第一步,这就像玩游戏,主标题自己视觉性不足就要找一些帮手,合并在一起成为标题组提升视觉性。下图就分别使用了大小,长短,还有一小部分粗细的对比手法。它的组合形式也是非常值得我们学习的。在看这种东西的时候一定要看它的空间形态,脑袋里建立关于形态的意识才能做到看作品就吸收。例如这个编排模式,除了放在这样还能放在哪里?显然一些中心构图的设计就很适合。那么为什么呢?就是因为他的形态和重心都压在中心的部分,对齐模式也是更加适合中心构图,平时就要多这么分析。这种就显然更适合左右构图或者是对角构图的编排了。空间承载主要指的是通过内空间的造型承载主标题,用造型的丰富外轮廓来强化标题的视觉性。针对标题内空间也主要是两种表现形态,一种是单独服务于主标题的,一种是串联标题和主体的。下图就是典型的单独服务于标题的,这种内空间的优势是形态灵活多变,可以使用具象元素,同时所受的限制也是很少的。这种就是串联使用的了,最大优点就是能让设计看起来更加统一整体,同时还可以再次强调并且整合核心视觉区。这个也可以算是串联内空间的一种,只不过主要关联形式是指向性的,可能不像第一个那么明显。我们所有平面上看起来立体的效果,都是通过模仿我们人眼常见的光影规律做出的仿三维立体,只不过区别就是精细度的问题。精细度高的一般就是要用到合成技法或者三维渲染,优势是看起来逼真,效果细腻。第二种的优势就是使用门槛较低,表现形式比较多样,可以是平面的层叠式立体,这种方法也比较简单,用 PS 在笔画中间加点阴影就可以看起来很立体。这种块面状的也是可以的,甚至都不需要分出侧面和底面的明暗。还有这种层叠的伪立体,复制然后移动改色就能完成。但是第一层一定要丰富一些,例如他这里就给第一层加了些类似高光的白色,看起来效果就很完整。类似的立体手法还有很多这里没法一一列举,所列举的是我平时比较常用的,还有我个人觉得比较好用的,平时大家多注重积累总结,慢慢都能建立自己的”常用弹药库”。变形这种形式也是技法要求里面比较低的,变形路径大部分都是跟着主体本身的路径或者主体延伸的路径来做的,关于这部分的复杂用法以后会出专门的文章。肌理的添加往往意味着主标题本身已经足够完整,这个东西是一个加强性质,而不能作为拯救性质出现。就像下图,他哪怕不加这个肌理效果也是可以的,添加上肌理只是针对文字内部细节的丰富以及调性的匹配。在运动海报中的效果就更为明显,肌理添加上去后基本就是增加了点无衬线体的内部细节,匹配一下外部风格,整体调性也就没啥了。本期我们学习了标题构成的三大重要要素,也讨论了很多标题刻画的常用手法,大家可以积极尝试。看过文章后大家应该不会再犯关于标题的基础问题了。希望大家有所收获。有任何问题都可以扫下面的二维码加我好友,和我一起讨论交流设计。如果喜欢内容,可以收藏点赞,今天的文章就先到这里,我们下期再见。这么设计标题,客户直夸专业!据统计,标题是海报中阅读率最高的文案,所以标题设计至关重要,一个优秀的标题设计不仅要清晰易读,而且需要与画面和主题的调性保持高度统一。阅读文章 > 欢迎关注作者微信公众号:「视研设」本篇来源:优设网原文地址:https://www.uisdc.com/main-heading
直播间 用户 互动 直播长久以来一直是互联网行业最快速且强大的变现方式,在中国,直播行业起源于 2005 年,爆发于 2016 年,迄今为止尚不足 20 年,但期间已经经历语音到视频、多人交友转向个人秀场、PC 端到移动端 、网红秀场转向垂直精细化的生活领域等多个重大转变。目前网上有的对直播的分析,要不然过于宏观地讨论整体行业状况,要不然过于片面地介绍本品功能,实属王婆卖瓜自卖自夸,极少有文章深入地、横向地从体验层面去聊这些问题:如今我们看到的直播间为何是现在的模样?是什么影响了我们的直播体验?直播设计的发展是体验设计适应新兴技术与新兴需求场景的一个缩影,本期我们将从交互的角度,将直播起源与发展总结为 4 个阶段,从每个阶段都选取数款代表产品,深入分析其布局特征,带大家领略一下直播间的发展历史、浅谈一下直播在中国发展的这 17 年。直播起源中国直播行业起源于 2005 年,当时网络游戏盛行,CS、魔兽世界、红色警戒、大话西游等大型综合游戏霸占着网民们的娱乐生活,因游戏需要团队配合,互动的及时性非常重要,而传统的文字交流会影响到手指操作效率,进而影响游戏体验,所以用语音软件“开黑”便受到广大游戏玩家的追捧。这时一个语音交流平台应运而生:UT(UC talk)。UT 是新浪网推出的一款主要面对游戏玩家的即时语音通信产品,凭借着强大的语音通讯功能和最早进入市场的巨大优势,迅速在游戏玩家市场崛起并广受追捧,当年 WOW 的工会上流传着一句话“不能上 UT 的不要入会”,也从侧面反映了 UT 的“江湖地位”。玩家在 UT 上通过创建频道、加入频道来实现局内即时语音交流。同时 UT 也支持添加好友、在频道内使用文字、表情进行沟通。观察 UT 早年的界面,可以发现 UT 受当时盛行的文字通讯软件 QQ、MSN 影响颇深。产品虽打着“即时语音通讯”的称号,界面上却将大幅面积仍旧用于支持文字通讯功能。我们把早期 QQ、UT 与近年来常见的即时语音通讯工具的交互框架拉出对比,可以很容易发现这十几年来即时语音通讯工具的进步:现在的即时语音通讯工具将界面内大面积服务于语音通讯,及时展示当前发言人和在线语音用户的发言状态文字与表情通讯则作为辅助工作在角落中呈现无文字发言则不出现虽然调整音量与麦克风虽看似语音通讯的重要能力,但由于其为一次性操作,因而在如今的语音通讯页面中也不会直接平铺大面积呈现除 UT 外,03 到 08 年也诞生了许多其他语音平台,如聊聊、久聊、IS、爱聊、盛大 ET,如今仍是直播界扛把子之一的 YY 也是在这个时代出现的。语音平台的出现,让游戏更有社交性。久而久之,玩家也不再满足于单纯的开黑打游戏,平台内开始催生出许多娱乐玩法。同时,随着网络技术的进步,实时视频技术也得到了实现,人们不再满足于语音社交,互联网开始进入视频时代。直播诞生一开始,转型即时视频通讯的语音平台们还只是简单地在频道里增加视频区域,喜欢社交和表现自己的用户开启摄像头主持、聊天、唱歌,直到 9158 的出现。2005 年,9158 的创始人模仿韩国在线交友的“十人房”模式,一上线就将产品定位为“秀场”。9158 的名称也是取自“就约我吧”的谐音。所谓“秀场”,就是将个人秀搬网上,培养一批“主播”,他们通过视频的方式在互联网上展示自己的才艺,观众可以与主播进行互动,并花钱购买礼物对主播的表演进行“打赏”。9158 是最早将美女、异性交友等字眼带入互联用户视线中的线上聊天室,是直播行业最早的形态,多以聊天室和 K 歌为主。因其模式新颖加上内容多数打着“擦边球”,吸引了大量用户持续消费,赚得盆满钵满,9158 甚至在 2014 年抢先一步比当时同在杭州的阿里更早上市。在 9158 叱咤互联网的 2008 年,以“成为中国的 youtube”为愿景的视频门户网站六房间在金融危机的重创下无奈开始转型,同样在 2009 年推出“秀场”的产品,与 9158 模式相同,一大批擅长才艺的年轻主播在六房间展示自己,与粉丝互动,通过粉丝赠送虚拟物品如鲜花、跑车、飞机等获得盈利。而几乎是同一时间,获得了 IDG 融资的 9158 不知是因为资本的介入,还是为了解决长尾效应,从“秀场”的定位变成了“在线 KTV/聊天室”,从明星表演模式变成了房间内用户排队轮流上场表演娱乐。转型后的 9158 从此不必再去担心当家女主播被同竞争对手挖走后带走一批高 ARPU 值的用户。虽没有找到 9158 初始秀场的界面截图,但从六房间后续转型的秀场与 9158 在线 KTV 的功能截图中也能看出现在直播间的影子,例如当时的秀场框架上就已包含房间名称/直播昵称、视频内容区、聊天/送礼互动区、观众列表。这基本已经构成了当今所有直播间的要素,后续几年的直播发展都是在这样的直播间框架上进行更细致垂直的功能升级。当六间房已经在做直播的概念时,9158 依然按照房间的概念来运营。直播的好处是能容纳更多的人数,可以做到上万人在线,9158 相对六间房,略显封闭。因为每个房间的人数会有控制,也有上限。虽然 9158 在转型前后的概念上都还是多人视频社交房间,但直播间该有的产品能力一个不落:既有礼物区,也有大型道具跑道,可视为现如今礼物托盘和礼物特效的起源用户列表对应如今直播间的在线观众排麦、点歌、调音、文字输入等操作对应如今直播间的操作互动区公共聊天记录对应如今直播间的评论互动区当然也有一些从传统文字社交聊天室承袭下来与直播“水土不服”的个人聊天记录,已经在历史迭代中销声匿迹。无论是六间房的秀场,还是 9158 的在线 KTV,虽然当时已经主打即时视频能力,但还是将大面积给了房间内观众的公共互动区,除了受“多人社交”定位的影响外,也和当时流行的产品理念有关。当时业内盛行非付费用户数量多少会影响付费用户的付费意愿之说,因此产品会期望通过放大公共聊天区,做好普通用户的互动体验,吸引并促活更多非付费用户,以此让付费用户消费更有成就感,更愿意消费,转化更多付费用户。在 9158 与六间房均实现转型的那一年,YY 才刚在广州成立,直到 2011 年,YY 才开始涉足直播行业,但由于其雄厚的语音技术能力,很快在直播行业发展起来,与 9158、六方间一起并称当时直播行业的三巨头。YY 直播时期,PC 端直播间开始将主播画面作为直播间内最重要的内容去重新构建交互框架,主播生产的即时视频内容作为最重要的元素在直播间中间大面积展示,左侧为观众列表,右侧为评论互动区,对比一下现在的 PC 或平板版本的直播间,对信息的重要性排序基本没有大改动,只是对观众列表和评论互动做了更极致的精简和收起。“秀场”这块巨大的蛋糕很快就被资本市场相中了,秀场的蛋糕随着资本的介入被疯狂瓜分。2012 年-2014 年,酷狗繁星、酷我秀场、56 秀、网易 BOBO、炫舞、优酷来疯、爱奇艺奇秀等直播产品也迅速加入秀场的直播战局。同时,直播龙珠、熊猫 TV 也迅速进入游戏直播市场意图瓜分游戏直播版图。又因为主播是直播内容的核心,有很强的头部效应,各平台在争夺主播的过程中使得这份职业的薪资水涨船高。这段期间,PC 端直播需要面对竞争对手持续入局和耗费巨资抢占头部主播两大难题,竞争激烈至白热化。正当大家以为 PC 直播还有一场漫长的较量时,智能手机的普及和 4G 网络把直播的战场从 PC 端拉到了移动端。千播大战移动端的时代,直播门槛迅速又降低了一个台阶,原本至少需要一台电脑、麦克风、摄像头和一个适合且稳定的环境才能开启的直播,现在只要一只手机就能轻松实现。直播门槛的降低与资本的介入,迅速推动了直播行业的发展,一大批直播 app 如雨后春笋一般出现,被媒体渲染为千播大战。起初,移动端直播间内只有直播画面、弹幕/评论区和在线观众,值得一提的是,转移到移动端战场后,直播间多了「分享」,甚至「分享」高优于营收向的「送礼」更早出现在移动端直播间,猜测除了想在新战场迅速抢占市场份额外,还可能有以下几方面原因:1. PC 端习惯通过复制分享(复制网址、复制频道号,即使是现在 pc 端也习惯复制 qq 号而不像微信直接分享名片),而移动端没有复制网址一说,展示直播间号+复制,让被分享人再粘贴搜索,效率远不如单纯的「分享」高2. 战场转移到移动端后,因为手机随身携带,用户之间的线上关系比原本在 PC 端时更紧密,所以通过关系链获取用户比在 PC 端时更方便快捷(这或许也是分享裂变之说在移动端时代才大行其道的原因)3. PC 时代用户对内容的获取更多依赖主动行为(用搜索引擎搜索关键字),主动搜索已经能够获取大部分信息,转移到移动端后,由于或技术或竞争关系导致 app 之间有信息壁垒,用户无法靠搜索跨 app 获取信息,需要靠用户自发的人工搬运。此后的一段时间内,移动端直播间都是在“搬运”PC 端直播间的产品能力,如送礼、K 歌、美颜…当时移动端的交互尚在探索阶段,手机屏幕也没有现在这么大又长,因此右下角的操作黄金区还没有在业内达成共识,可以看出最开始底部的互动操作并没有很符合现在直播间的排布习惯,有些直播间甚至会把关闭放在右下角,而现在的直播间右下角基本都是送礼、点赞等一些强用户需求或强产品策略的操作。在其他 app 都适应手机开播而将直播画面占满手机屏幕、操作置于画面底部时,YY 及其专门负责游戏直播业务的虎牙直播却采用了完全不一样的直播间布局。虎牙直播因其专攻游戏直播的定位,独有直播画面多为横视频的特点,横视频适配竖屏幕时,会有较大的留白,这些留白区域正好可以用来填充原本在 PC 端就外露展示的一些功能(评论等)。虎牙直播、熊猫 TV 等游戏直播 app 和“秀场”直播 app 在搬运 PC 端直播到移动端时采用的方法正好是我们在日常需求中遇到首屏位置不够的两种常用处理思路:收起做入口和分 tab。除了搬运 PC 端能力外,移动端直播间也发展出了一些 PC 端没有的功能:由移动端特性衍生出的功能:例如因为直播间内功能越来越多,UI 和动效都越来越多且杂,为了不影响直播内容消费,移动端直播间比 PC 端多了清屏功能。PC 复古功能:如语音直播、语音聊天室、多人连麦,又由多人连麦发展出了帮助直播营收更上一层楼的直播 PK。礼物方面,结合在线观众围绕金主权益持续优化“榜一大哥”的看播体验,规划礼物价格梯队,对礼物托盘和礼物特效做规范。还有一些“时代的眼泪”,如频道直播间,现在已经鲜少看到这个能力了。由于直播盛行,且市场在朝“钱”发展的路上缺少国家和平台的监管,导致直播乱象丛生,长时间被冠以“低俗”的标签。国家网信办于 2016 年 11 月公布《互联网直播服务管理规定》,对直播平台资质、主播实名、内容审核等方面做了详尽的规定,又于 17 年 4 月下架了 18 款直播类应用。加上苹果强行收取 30%过路费,BAT 也开始入场直播领域,许多小平台因分不到流量、自身能力不足而被迫离开直播市场。千播大战最终以少数几家取得直播双许可证的 YY、虎牙、映客笑到最后告终,直播市场陷入一片惨淡。但是,在被称为中国直播元年的 2016 年,有几个种子悄悄地埋下了,不仅给几年后的直播行业带来了新东风,也改变了未来互联网的趋势:2016 年 9 月,一个叫 A.me 的 app 诞生了,三个月后改名为:抖音短视频;淘宝也在这一年开通了直播,某知名带货女主播成为平台首批主播。直播融入生活,多领域精细化发展虽然直播行业经历过众神打架的“千播大战”,连续几年处于互联网浪潮的浪尖上,但一直以来都只囿于“秀场”形式的才艺展示和电竞,并未深入到每个人的日常生活之中,长期无法破圈,直到电商直播的出现。最早做电商直播的并不是淘宝,而是蘑菇街这类导购平台。蘑菇街在当时作为最火的电商导购平台之一,每年能从淘宝拿到巨额佣金。淘宝决定不再扶持导购平台后,蘑菇街不得不转型走上自建电商的道路,在淘宝京东这样的巨头中夹缝求生的它抢先看中了直播,第一个把直播引入了电商。蘑菇街从入场直播领域到完成电商直播间建设(在直播间内提供完整的消费链路)仅仅用了 2 个月的时间。此后的电商直播间也再没有较大的改动了,大多用红或橙黄的购物袋和购物车代表商品列表入口,购物入口会在直播间内作为第一优先级的操作做动效强化,因为电商直播不需要依赖送礼盈利,且礼物特效会干扰商品的展示,有些专攻电商直播的平台甚至已经不在直播间内显示送礼入口,与传统秀场直播形态分道扬镳。19 年,李佳琦魔性洗脑的口头禅“OMG,买它!”突然爆火,因为这句 2019 最火流行语,李佳琦带领电商直播实现破圈,之前对直播了解仅限于“秀场”的人们这才发现直播的“新形式”。紧接着负债 6 亿元的罗永浩在抖音开启了自己的带货首秀,3 小时带货 1.1 亿元,让大家重新认识了直播在送礼体系之外的收益点。2020 年,在疫情影响下,直播带货、线上教育与线上会议全面爆火,直播行业迎来了新一阵东风。此外,2018-2019 年,抖音的爆火彻底改变了移动端用户的使用习惯。从 PC 端到移动端,互联网从业者们的设计思路一直都遵循“先推荐再消费”,而抖音激进地采用了“先消费再推荐”的思路,并取得了出色的成绩,从此互联网产品们纷纷踏上了“先消费再推荐”的设计之路。另一个改变用户习惯的设计是沉浸式无限流,抖音之前互联网产品的设计思路都是进入一个空间(可以理解为页面、直播间、具体功能流程),不符合预期就返回,再从上一级选择另一个空间进入,再返回,再选择…如此反复,抖音教育了用户用简单的下滑手势从一个空间迅速切换到下一个空间,无需经过任何中间页。当然这样的设计是非常大胆的,如果推荐不可靠很容易流失用户。为什么“先消费再推荐”能取得市场及用户的认可?理解起来也不难,早期 PC 端依赖搜索时,我们可以理解为需要用户做填空题,用户需要先思考自己想要的“关键字”,再填入搜索框,最后获取需要的内容。后来到了移动端,每个 app 都有一个固定的推荐首页,用户从做填空题变成了做选择题,从平台给的 ABCD 选项中选择自己更喜欢的消费内容。而“先消费再推荐”则是从选择题变成了对错题,我要,就留下来,不要就刷走。从填空题到选择题到对错题,一步步地帮用户减少了思考成本。手势交互也并不是 18、19 年才出现,早在智能手机普及的时候手势交互就被反复研究,只是多数产品急于从新功能中获取“数据收益”,不敢也不愿意教育用户使用更先进却更隐晦的交互方式。不得不佩服抖音对于“创新”的思路和胆魄。这两个使用习惯的改变对直播间交互的影响几乎是全行业统一的,现在几乎所有的直播间都可以通过下滑直接切换直播间(除了虎牙直播因为搬运功能时使用了 tab 而非入口,导致 tab 内滑动操作与直播间下滑互斥而无法实现),还有很大一部分平台也选择了进入即消费且在右上方提供更多直播选择的交互形式。除了电商直播这个超级风口,前几年因为在线教育的兴起,也有很多人投入了知识教育直播板块,付费直播教学也成为了直播重点垂直领域之一。如今人们早已对直播脱去了“低俗”的标签,也接受直播融入我们日常购物、教育、音乐、交友、追星…等生活诉求之中,甚至官媒也会在直播平台进行新闻报道了。直播已经做到了融入人们的日常生活,人人皆看直播,人人皆可直播。未来,直播还会覆盖到更多行业,也会越来越精细化、规范化。今天关于直播的分享就到这里,对于直播你有什么看法或见解?欢迎留言一起探讨如何做好直播的情感化设计?从5个方面掌握互动仪式链「互动仪式」一词最早来源于美国社会学家戈尔曼,是指一种表达意义性的程序化活动(大到国家在特殊节日举行的大型庆典,小到定期的家庭聚会、公司团建等活动)。阅读文章 > 欢迎关注作者微信公众号:「白话说交互」本篇来源:优设网原文地址:https://www.uisdc.com/broadcast-design
用户 性格 人物性格 在了解了人物性格语气的重要性以及在大厂中的应用场景之后,大家一定很关心,要如何在自己的业务中从 0 开始创建文案的人物性格语气呢?下面会结合在酷家乐云设计工具的实践,针对这部分内容做详细介绍。酷家乐云设计工具主要是针对内装设计师的设计工具。整个过程大致分为 5 个阶段:资料研究、小组研讨、确定人物性格关键词、丰富人物性格、绘制画像。上期回顾:华为高薪招聘的「UX文案设计」,4个方面帮你掌握基础!一、被忽视的 UX 文案在很多体验设计师的认知中,产品界面上的文案是设计中最细枝末节的事,往往会被忽视。阅读文章 > 1. 资料研究1. 研究内部资料,了解基调和方向工具产品文案的人物性格和语气一定是符合公司的战略定位、品牌形象和设计原则的,因此我们首先对公司现有的内部资料进行收集和研究,为工具产品文案的人物性格与语气确定一个基调和方向。研究的资料包括但不限于以下内容,包括公司战略书、品牌白皮书、设计价值观、设计原则、用户画像等等。阅读相关资料,分析资料中的关键词,在公司资料传递出的气质和价值观中,提取与人物性格语气相关的内容。在我们的资料研究中,有一些词是被反复提到的,且能反映一定人物性格的。比如权威、专业、引领、灵活友好、高效专注、冷静、秩序、简洁等等。2. 小组研讨设计小组举行研讨会,输出各自的人物理解设计师基于自己对产品的了解,以及通过对不同角色的同事、比如视觉、运营、客服的调研,提出工具产品人物性格的大致方向,进行分享讨论。我们理解的工具产品要具备以下的一些人物特征,包括沉着冷静、专业有经验、善解人意、自信的、随和的、理性的、靠谱的等。3. 性格关键词归纳总结,得出人物性格关键词基于以上两轮发散的思考之后,我们进行了一下收敛和聚合。将所有的关键词汇总在一起,对这些关键词进行分析和排查。首先,我们将这些词汇分为两大类。一类是描述性格的,比如善解人意、随和的、理性的、直接的等等。另一类则不是描述性格的,比如关注用户,更多的是一个人的表现,而非性格。再比如专业有经验,是指一个人的能力,而不是性格。性格描述的词汇里,我们进一步聚合细分,总共归为 3 类。灵活友好、随和的、善解人意为一类,理性为一类,直接坦率为一类。非性格描述的词汇里,我们主要看这些描述是否和前面的性格相关联,是否出现一些词汇,是前面的性格类词汇涵盖不了的,进而对性格类词汇进行一个校准。比如,专业、品质化、值得信赖等描述主要表示我们的产品是专业资深,有一定有话语权,这和性格描述的理性关联性很大。我们认为一个靠谱的、沉稳的、理性的人,他的能力一定是足够专业,表现出的特质一定是自信的,值得大家信赖,有一定权威性的。再比如,我们认为崇尚科技、科技感的东西在某种程度上和理性、冷静这种气质是相吻合的。依此类推,经过所有的分析后,我们发现性格描述下的 3 类词汇基本和非性格描述下的词汇是相关联的,满足这 3 类性格的人物是符合公司和品牌整体调性的。所以这 3 类性格将作为我们人物性格的考虑范围。最后我们将每一类性格进行一个关键词的总结,得出了善解人意、理性、直率三个关键词。4. 丰富人物性格细化性格关键词,让人物更好理解基于每种性格,为了更好的理解,我们详细描述这个人物是什么样的,不是什么样的,并给到一些例子描述。善解人意是什么?能够理解用户当下的心理状态,知道别人的需求是什么,然后说相应的话能够理解用户的困难,并帮助他们克服懂得聆听用户,给到用户反馈渠道,关心用户的反馈提供新的或更好的方法,帮助用户实现目标不是什么?置身事外,只是客观的描述事实,没有体谅用户的心情给人以压迫感或距离感具体表现:发生问题时,应告诉用户可行的解决方案,或产品为用户做了哪些挽救措施从用户视角描述价值多给用户支持和鼓励,不要命令、强迫用户,不要责怪用户使用贴近用户的用语,不使用过于专业、用户难以理解的表述,也尽量不创造新的概念或词汇理性是什么?能够聚焦关键信息,精炼表达能够控制情绪,克制表达逻辑清晰,表达严谨,前后一致不是什么?说话没有重点,所有细节都面面俱到采用情感化的表达方式强调或放大情绪具体表现:提供帮助用户实现目标的关键信息,不用把前因后果都解释一遍慎用“啦”、“哦”、“吧”、“吗”等矫饰的语气词,以及“!”、“?”等语气标点不说“可能”、“不确定”、“也许”这类似是而非的词,也不能说过于绝对的话,会影响严谨性直率是什么?不卑不亢,平等地和用户对话表达简单清晰,不绕弯子追求效率,为用户提供解决问题的最短路径不是什么?过度的关怀和讨好过于官方,没有提供有效帮助掩盖问题具体表现:说话平等直接,避免用”您“这类词,而是用你、我来进行对话在出现问题时,及时通知用户,无需遮遮掩掩在用户遇到问题时,坦诚客观描述事实,无需过多表达歉意5. 绘制画像将性格形象化,让人物更立体为了让大家更直观的理解我们的人物,方便在与各职能角色沟通时快速达成共识。我们收集了符合我们人物性格的一些画像打印出来,通过讨论投票的形式,选出最符合我们产品的人物画像。综上,一个 B 端工具 UX 文案的人物性格就完成了。人物性格建立之后,在不同的产品场景中,则会使用与该人物性格相匹配的语气与用户进行对话。接下来,会有实践篇详细介绍该人物画像如何用于指导我们的 UX 文案写作,敬请期待。文中的数据均已做模糊处理,非真实数据, 仅作为演示用途,对数据呈现不负相应责任。华为高薪招聘的「UX文案设计」,4个方面帮你掌握基础!一、被忽视的 UX 文案在很多体验设计师的认知中,产品界面上的文案是设计中最细枝末节的事,往往会被忽视。阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源:优设网原文地址:https://www.uisdc.com/3-ux-copywriting-tutorial
干货 工具 合集 大家好,这里是 4月的第2波实用设计干货合集!这次的合集当中我搜集了一些有意思的东西,包括国内开发者制作的素材管理工具、高质量的 3D 素材库、品牌素材管理工具 BaseSytles、UI/UX 设计工具推荐列表,甚至还有快捷键可视化设计工具。如果你正在寻找有趣的新设计工具,也许其中正好有你需要的:1、Mac 平台设计素材管理工具 Picseehttps://picsee.chitaner.com/相信很多同学都知道素材管理工具 Eagle,这个名为 Picsee 的工具可以在 Mac 平台上作为 Eagle 的替代品来使用。这款早在 2019 年就正式发布的工具,出自国内开发者之手,如今在图片素材的分类管理上已经相当完善了,其中功能还是很多的,比如基于色彩来重新组织素材、寻找类似的图片内容的功能、标签标注系统、备注和笔记系统等,最重要的是,它可以借助浏览器插件来抓取图片和视频素材,借助网盘来同步数据,也可以基于本地文件夹来管理和组织内容。目前 iOS 的版本也在开发中,想必之后可以打通移动端和桌面端。2、高质量免费3D素材库 3D Bayhttps://clouddevs.com/3dbay/page/canva如果你日常也使用 Canva 来制作图片物料的话,那么这个名为 3D Bay 的3D 素材库应该对你很有帮助,其中包含多个不同的系列、不同内容的3D素材,方便你直接从 Canva 当中调用来进行设计,最重要的是,它是完全免费的。3、在线图形设计平台 Snapiedhttps://www.snapied.com/这款名为 Snapied 的工具,为你在浏览器中直接进行平面设计提供了新的选择,借助内置的工具和模板,你能快速搞定视觉设计。Snapied 提供 2个月的免费试用,对于这类工具有兴趣的同学可以直接去官网注册试用。4、快捷键可视化设计工具 Kcapshttps://kcaps.app/Kcaps 绝对算是一个小众的工具,但是对于涉及到快捷键说明的设计项目而言,Kcaps 又是不可或缺的。这个小工具能够帮你快速生成视觉化的快捷键说明,而且有多种样式可以选择,在关键时刻帮你节省时间。5、高质量 Figma 3D 文件素材库https://www.bunchof.design/这是一个素材量正在不断增长的 3D 素材库,你可以在 Figma 当中直接调用这些 3D 的文件素材,搭建自己的场景,用来装饰甚至用作视觉主体。这套素材库非常专业,是收费的,但是提供免费的 Demo ,你可以下载来看看,再决定是否要为自己的设计项目或者团队购买。6、100+ UI/UX 设计工具推荐列表这是一份 PDF 文档,文档当中涵盖了超过 100 个 UI/UX 设计工具和平台的介绍,如果你对于当前各种 UI/UX 设计工具感兴趣,不妨下载这份文档,结合其中的介绍来探索和寻找你可能用得上的设计工具。在文章开头结尾的百度云链接中下载即可。7、可爱的卡通手写字体 HabaneroHabanero 是一款风格充满童趣的卡通风格字体,字体不仅有着相对俏皮的笔触变化,而且小写字母的字形设计也非常有意思。这款字体完全免费可商用的,在文章开头结尾的百度云链接中下载即可。往期干货:第一波!2022年3月精选实用设计干货合集大家好,3月的第1波实用设计干货合集来了!阅读文章 > 第二波!2022年3月精选实用设计干货合集大家好,3月的第2波实用设计干货合集来了!阅读文章 > 第三波!2022年3月精选实用设计干货合集大家好,3月的第3波实用设计干货合集来了!阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 4月干货第二波1.5mh7e2 点此复制 登录下载 本篇来源:优设网原文地址:https://www.uisdc.com/2022-4-design-resources-vol2
用户 心理 消费者 经济的发展造成的消费导向变化,具体表现为“以消费为目的”到“通过消费过更好的生活”。影响用户线上转化的维度看似很多。仔细的研究发现完全有规律可循。本文针对线上消费决策,以家庭服务产品举例,结合营销心理学,从洞察用户心理到回归使用场景,挖掘影响用户转化的关键决策因子,从而有效的提升用户转化率。浅谈消费行为与决策消费行为:消费行为是指消费者的需求心理、购买动机、消费意愿等方面心理的与现实表现的总和。消费决策:家庭或个人有关消费活动所作出的最后选择和决定。消费决策受到内在动力和外在动力共同影响。决策的外在动力:产品功能。满足功能需求和实际使用价值。决策的内在动力:消费者心理。从物质匮乏的时代到选择过剩,除了最基本的功能需求外,研究也表明了消费者更看重情感层面的价值。线上产品消费和线下购物归根结底都是通过建立外在和内在动力对用户展开说服和营销,具体可以分为两方面,对用户的:行为的引导心理的洞察那接下从这两个方面进行详细介绍:转化之宏观破局:消费者行为引导根据行为设计领域经典模型:福格行为模型,可以看出,任何一个行为的发生,都离不开三要素:动机、能力和触发器。动机越强,转化的可能性越大。当用户有足够的动机,并且具备能力,最后给予合适的触发。一个行为才能发生。假设把动机作为定量,那么用户行为的发生成本越高,路径越长,转化的阻碍越大。如何提高设计转化?先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 1. 更短的链路=更高效的转化俗语说“夜长梦多”, 牢牢抓住消费者的每一步心理活动,减少消费者思考的时间,直接让他行动起来是一种高效的手段。我们要考虑如何省去中间的步骤,加速消费者的购买决策。在关键流程的节点上,做相应的设计改造用户核心的问题:一是对服务内容的期待(内容不清晰,什么样的服务能给我提供什么价值);二是对信息填写的厌恶(信息填写意愿不高,内容较多,阻碍心理);三是对被骚扰的担忧(害怕打扰,担心损失);四是对是否靠谱存在质疑(没有看到相关的保障)。所以我们要考虑,什么利益诱导更具有吸引力,怎么减轻用户填写信息的厌恶,如何简化填写的流程,最后就是如何消除用户的担忧。结合福格行为模型,针对以上问题,对核心路径的关键节点进行改造:step1:增强动机在入口处,对模糊型服务诉求的用户进行决策信息的标签外露,如:钟点工,在调研用户的时候也发现,很多用户不清楚钟点工的服务范围,以为钟点工只=保洁,那么对于这种情况,在入口透传上需要给用户明确内容,加上“做饭+保洁”这样的标签,精准命中用户诉求,增强用户对服务的理解。将细分用户场景中高频搜索词进行入口曝光,也是命中用户,增强动机的有效方式。step2:降低阻碍具体分为两步:缩减填写项,后置填写流程。有效的缩短用户做决策的时间成本和难度成本。让用户先提交线索,再补充和优化需求。step3:连接转化优化按钮文案并增加图形示意,增加辅助文案。给予用户正向的引导,使触发器能与目标建立有效联系。转换之微观赋能:消费者心理洞察更短的链路如何保证更精细化的转化?如何保证线索转化的质量?数字化蓬勃发展的今天,人口红利减弱,流量红利殆尽,获客成本增加。如何实现更精细化的转化和运营,我们要挖掘更深的用户价值,从用户核心视角出发,回归用户场景。让用户感受到产品的价值。1. 互联网营销心理引导新一代用户更倾向于购买品牌,为品牌背后的精神价值和心理体验消费。事实上我们对一个产品的感受,30%来自功能、性能、感观,70%来自心理体验以及身份的认同,为了更好的让用户感受到产品的价值,全面提升线索质量,这里引出互联网的营销心理学模型—AIDTAS模型。AIDTAS 模型的前身是 AIDA 模型。AIDA 是消费者行为学领域很成熟的理论模型之一,由美国广告学家 E.S.刘易斯在 1898 年提出。随着互联网化的不断发展,AIDA 模型也随之衍化,并且增加了信任和分享。整个 AIDTAS 模型是指在消费者从接收到产品信息,到发生购物行为之间,动态式的引导其心理,并将其顺序模式化的一种法则。该模型分为 6 个阶段:1. 引起注意:受到吸引,我要看看。2. 产生兴趣:产品形态感知,想要了解。3. 点燃欲望:不错,想要,但是他好用吗?具体能干什么呢?4. 构建信任:这个品牌挺有实力的,可以信任。5. 购买行为:不错确定了,决策行动。6. 分享传播:商品体验真好,我要分享给朋友7. 这条链路紧扣消费者决策流程,链路断裂就意味着用户潜在的流失。上文提到的福格模型的应用属于形式操作的表现,为了驱动消费者高效转化。AIDTAS 营销心理模型是为了更好洞察用户心理,并占据消费者心智。2. 营销的本质,是迎合消费者的心理需求下面结合深入业务,详情看看如何实现精细化的转化?回归用户使用场景:精细化赋能家庭服务背景介绍:接下来简单回顾一下家庭服务的体系。三胎政策,人口老龄化压力,刺激了家服行业规模的大幅度增长。而我们家庭服务的业务主要的核心服务:保姆,月嫂,育儿嫂和钟点工。C 端作为承接用户流量与用户转化的核心渠道,为线下服务输送血液。想要精细化的转化,就要精细化地洞察用户决策点,具体怎么做呢?1. 从产品定位出发,抓住产品特征a. 家服产品本身的定位就是高价值,高卷入度产品。卷入度越高的产品,用户决策越是慎重,越难被转化。b. 客单价高,决策成本高。c. 服务周期长,服务人员入户服务,甚至有些类目,服务人员会与用户长期共同居住(例:住家育儿嫂,住家保姆)。d. 使用习惯模糊,家服的很多类目,例如保姆,育儿嫂。用户并没有建立明确的标准。2. 从用户的实际需求出发,避免自嗨在寻找用户痛点的时候,很容易陷入自嗨的情景。在实际调研中我们发现,同是家服的产品,找钟点工的用户更看重的是阿姨的快速匹配和性价比。转化的诱因是平台的高效匹配,价格优势等。找月嫂的用户,对价格的在意度远低于平台的专业性。而且更在意具体的服务内容以及月嫂的专业技能,地域,做饭口味等等。因此具体的设计策略还是要满足用户实际的需求。在透传决策点时要注意内容与用户需求匹配。3. 从用户特征出发,人群细分了解不同用户群体间的差异。在用户调研时发现,很多用户虽然产生了找寻服务的动机,但是不同用户的决策周期并不相同。例如:找做饭阿姨和钟点工的用户一周左右就可以决策。但是找月嫂的用户决策周期平均 2 个月。由于不同品类之间的决策门槛不一致,也是导致用户决策周期差异性的原因。尤其是母婴类服务的用户,购买的不仅是产品,还有身份认同、意见表达、自我价值。4. 洞察总结不同用户的心理特征虽然同样都属于家庭服务,但是根据消费心理倾向来划分:1. 母婴服务(月嫂,育儿嫂类型的服务)更偏向自尊心理、求实、安全心理倾向强的消费者,不仅追求商品使用价值,更注重身份认同和精神方面的满足。2. 老人陪护类型的服务更偏向于求实心理的消费者,在购买商品时,偏重于商品的实际效用和质量,比如使用方便,经济。3. 钟点工类型服务是求实与求廉心理的结合,这是一种“少花钱多办事“的心理动机,更倾向于服务本身高效经济实惠,能够快速匹配用户的需求。结合以上 4 点,进一步挖掘影响用户转化的关键决策因子,进行差异化的精细转化。需要注意的是:线上购物和线下购物不同的是,线下购物具有随意性,用户更自由,对于不懂的功能既可以看说明也可以直接询问导购,获得信息的渠道是多元的。那么线上购物呢?获取信息的渠道是单一的被动的,如何在短时间找到“勾子”,让用户快速的产生阅读欲望,进而建立信任,再其次打开心门,最终填写信息并完成转化?设计点落地和应用根据前面详细的分析,我们把用户需求拆解为两类:1. 对于解决生活刚需类型的消费,在设计策略上,我们应该突出优惠和服务的便利性。2. 对于追求品质生活类的消费,线上需要更多的服务引导,品牌氛围营造和品质技能内容的传递。差异点页面表达:针对这两种消费决策模式,对线上表达框架做了差异化的设计。效率型的用户我们把卡片收集器放在腰部以上,让用户可以在第一时间提交需求,直接转化。品质型表达框架通过品牌宣传,服务保障,服务内容等的步步引导,用户构建信任,最终实现转化。这两个框架也存在着共性,头部都需要对平台,品牌的整体形象传递,其次是信息保障感知的传递。对保障信息的传递是所有用户来到我们平台第一时间应该感知到的。在之前的 AB 版本中,控制其他变量,只增加头部的保障,转换率直接有了提升。说明不管是哪类型的用户,都非常关注保障信息的透传,这是我们与用户构建信任桥梁的重要一步。产品的附加值会改变产品在客户心中的价格认知。对客户来说,更好的服务、更快的响应速度、更放心的售后保障、更多的增值服务,都是产品的附加价值。这些附加值会改变客户对价格的认知,即使产品贵一点,客户也会觉得你“贵的有道理”。下面来看具体落地的例子:品质型框架表达。对月嫂品落地页进行改版设计,突出品牌氛围和产品溢价。强调场景的专属感,强化场景中的服务内容,给用户透传专业的品质。在详细页增加详细的服务场景,让用户明确我们的服务可提供的内容。产生品牌价值的正确联想。同时像月嫂服务的决策周期是最长的,用户往往会货比三家。专业详细的服务内容会给用户留下正确的记忆感知。之前的版本中,效率型框架并不适用于月嫂这种终身只用一次的服务类型。真实的线下调研中也佐证了这种推理。综上所述,对于不同类型的服务我们应该给予不同的设计策略。效率型服务:给予更高效的操作引导,产品的价值需要与用户的实际需求中所关注的价值高度匹配。品质型服务:产品的氛围也需要传递符合用户的结构认知和价值认同信号。结语虽然提升转化是我们的根本目标 ,但是品牌的价值和口碑同样重要。转变服务思维,提升自身价值,建立长期的口碑和价值才是长久转化的根本。挖掘品牌成长的潜力,触动消费者的情感,充分利用消费者的情感心理来提升品牌溢价。从3个方面学会大厂的设计转化方法论:延迟增强移动互联网的主流内容消费形态向短视频视听语言转变,通过设计提升转化是视频信息流广告所面临的挑战。阅读文章 > 欢迎关注「58UXD」的微信公众号:本篇来源:优设网原文地址:https://www.uisdc.com/improve-design-conversion-rate