用户 场景 地图 在日常的工作中，大家或多或少都听过/用过用户体验地图，简单的说，用户体验地图是梳理用户场景和体验问题的一种工具，那在用户研究中，什么时候/阶段适合用体验地图？使用体验地图的价值是什么？体验地图又是如何构建的呢？该篇文章将会结合两个具体案例为大家逐一解答，文章分为上篇和下篇，上篇主要是介绍用户体验地图的定义、使用场景与价值，下篇会拆解用户体验地图的构成与构建流程。 文章主要以我的经验为主，不是教科书和绝对，希望能带给大家答案/启发～也欢迎互相交流～“用户体验地图（上篇）概念介绍与使用价值”中主要为大家介绍了用户体验地图的定义界定、使用价值和适用场景，下篇我们进入到“实操”阶段，具体看一下用户体验地图的构成、各部分的意义、以及是如何一步步构建出来的～还没有看过上篇可先看，先理解概念再进行实操～用户体验地图设计指南（上）：概念介绍与使用价值在日常的工作中，大家或多或少都听过/用过用户体验地图，简单的说，用户体验地图是梳理用户场景和体验问题的一种工具，那在用户研究中，什么时候/阶段适合用体验地图？阅读文章 > 一、用户体验地图包含哪些内容？如果问你体验地图包含哪些内容你会如何回答？用户画像、用户场景、情绪体验、用户痛点等……综合来看，体验地图包含一部分必要内容：即场景、行为、痛点/需求、机会点，也包含一部分可灵活使用的内容：用户画像、用户阶段、触点、情绪体验、用户诉求、标杆，灵活部分我们可以根据项目需要将各有利于我们理解用户的内容加到体验地图里。另外从信息来源的角度看，地图中包含的内容一部分来源于调查（即用户调研），一部分来源于洞察，也就是我们拿到用户调研信息进行梳理后，由用户研究员、设计师、产品等不同角色洞察提炼的内容。结合上篇中的全包用户体验地图具体拆解一下各部分构成的内容与意义：阶段：用户完成目标大致分成几个阶段，能够更有条理性的去拆分场景、防止丢场景场景：用户完成目标经历的各个场景，在阶段下进一步拆分，需要注意：1）是场景，不是我们的产品功能模块（有可能一个场景涉及到多个功能模块） ；2）不一定是按从早到晚的时间顺序发生的，场景间是前后、转移的关系（比如咨询沟通、量房、出设计是用户在前期确定公司时会多次经历的场景，而不是一次就确定下来）行为：与场景对应，描述的是该场景下用户是怎么做的，用于理解用户行为的原因、问题点。需要注意：1）关注动作是否有一定顺序，有顺序按照顺序描述；2）描述出用户接触到了什么触点（产品、渠道、人等）触点：用户在完成目标过程中接触了什么、与什么发生了交互，一方面能够得到目前满足需求的触点是什么、另一方面之后我们的机会点也可以拆到触点中去落地。触点可以分为移动/数字触点、物理触点、人际触点三类，我们在互联网产品项目中可重点关注移动触点，即手机、电脑、不同的 app 等情绪：用户在各场景下的体验情绪，让用户体验与业务建立更强烈的“共鸣”。而对情绪的描述可以是感性的描述（如开心、迷茫、吃惊、担忧，引发反思“我们的产品为什么让用户有这种感受？”），也可以是高低的描述，采用类似于可用性问题优先级计算或用户评分等方式将用户的情绪高低量化绘制曲线。标杆：若存在标杆产品/服务可对比，可对应看标杆做了什么解决的用户的什么痛点、对用户情绪拉升的影响。痛点/需求：描述用户的痛点或需求，从行为顺序上、在各触点上梳理清晰，让归纳有依据。诉求：在某一场景下或多个场景下用户的核心诉求、想取得的核心价值点是什么，从行为、痛点/需求中提炼洞察而来，帮助我们在设计机会中抓住“核心目标”（比如我们提炼出用户的核心诉求是“省心”，那围绕省心我们可以做哪些满足用户？通过诉求扩大我们的机会点思考范围）机会点：结合用户痛点/需求、标杆、诉求，对于我们的启发。可以结合触点或不同利益方区分机会点的针对性。二、用户体验地图的构建流程如果把用户体验地图当作一个调研方法，它的构建分为 4 步，分别是明确目标与用户、确认场景、开展调研、洞察绘制。但在最初的时候我提到用户体验地图是方法也是工具，如果已经有了足够的调研素材可以直接进入第 4 步洞察绘制。接下来以 XX 平台的商家直播体验地图为例讲述构建流程项目背景：XX 平台为了给商家提供更好的直播带货体验，在商家后台上线了直播中控台功能，但目前版本仅是结合经验与竞品做法聚合了“我们认为商家需要的直播相关的功能”，并不确定是否命中商家的直播需求、且想明确迭代方向，因此开展了该项目。明确目标与用户确认项目目标是梳理用户体验地图：中控台已有部分功能，在调研中既要关注用户对已有功能的体验情况，也要关注用户的潜在需求，挖掘更多的产品机会点，因此从实际直播场景入手，梳理直播体验地图理解用户真实场景与需求；区分目标用户群体差异：考虑不同使用经验与不同商家类型的差异，一方面寻找老用户与新用户，另一方面需覆盖不同类型与不同品类的商家，因此需包含作者型、商家型直播达人，包含服饰、母婴、食品、珠宝等不同经营类目的商家。确认场景明确目标用户后，需先从内部梳理用户场景，场景将作为研究大纲主线，辅助撰写访谈提纲，在调研中更有条理性的去访谈、观察、验证用户的使用流程（需要注意梳理的是用户场景、而不是产品模块）。如果这个阶段场景不全/顺序不对没关系，我们在后续调研中动态调整。（比如图中绿色字场景均是调研中增加）梳理方法：走查产品功能、模拟用户使用场景梳理技巧：从大到小—广度优先，其次深度（比如前面提到的先阶段再场景）开展调研调研方法选择：获取用户体验信息的方法不仅是用户访谈，在访谈的基础上叠加观察、共创，能更深入的去挖掘；同时还可以加入情绪打分衡量用户在不同场景下的情绪高低。访谈+观察：更适合有产品载体的体验过程，如进行已有产品改进、0.5-1 产品创新时。让用户在真实场景中操作产品/体验服务，观察用户行为，鼓励用户随时分享自己的感受（遇到的问题、觉得好的地方等），在用户阶段性完成几个场景或完全结束后，进行深入访谈；访谈+共创：更适合聚合多触点的体验过程或更偏服务的体验过程，如进行产品增长研究、0-1 产品创新时。将多个同类用户聚在一起，在过程中引入大白纸、便利贴、问题提示卡、刺激物等工具，互相激发、提高讨论效率；提纲设计与执行：遵循两个原则：一是“场景的”，在整个访谈中多问用户怎么做的、为什么这样做；二是“总分总的”，由整体流程深入到各场景中后再看整体（如先让用户回忆整个流程、关注用户的核心场景，再分场景询问用户的行为、原因、痛点与需求，最后统一回忆确认、查漏补缺）洞察绘制在调研结束后，就正式进入到了信息整体分析阶段了～在信息整理前需要明确两个问题～需要做几张图？看不同类型用户的场景差异与需求差异，场景不同的用户必须分开绘制，若场景相似、行为也相似，仅是需求有差异，可以在一张图中单独指出 ；场景主线怎么确定？场景并不是“自然时间顺序（从早到晚）”，是“行为顺序”，且并不是所有行为都是线性顺序，可以是局部线性、前后循环。目标是让场景全面且有组织逻辑（如直播体验地图，直播前的设置优惠、投放广告并没有很明确的前后发生顺序，但需保证是属于直播前的；直播中的多个场景是重复/交替出现，不需要写多遍）弄清楚几张图、场景主线之后就可以正式整理信息了～正式绘制包含 5 个步骤：① 创建用户角色当不同用户群体场景、需求差异较大时，需分角色理解用户并创建用户角色/画像。用户角色主要包括用户特征、产品使用习惯、产品目标：用户特征：对需求有影响的特征，如在工作中的角色（运营、客服、管理等），如较突出的人口学特征（老人、宝妈等）产品使用习惯：使用产品的场景、频率、主要使用的功能产品目标：使用产品主要达成的目标/主要诉求需要注意：用户角色并不是一个被访者形成的，而是抽离同类被访者的共性特征虚拟出的角色（可以以一个很典型的人为主，补充其他特征）② 体验流程梳理建议先使用表格梳理体验地图，按照格式列好横轴与纵轴维度，以文字的形式汇总同一类用户的调研信息到对应位置，然后处理每个位置的重复信息、合并同样的行为、需求、痛点，向上总结。而且有时候输出表格版本的用户体验地图也能够满足内部需要了～需要注意：尽量保留“原汁原味”的信息，比如用户的原声表达、有多少用户有这样的需求等，让信息保持丰满、建立同理心。③ 需求评级判断体验地图中需求的高低可以从用户角度和业务角度去综合判断：用户角度： 一是需求对用户任务的影响度，即需求是否在体验的核心链路上、用户是否有其他方式满足该需求，在核心链路且无法通过其他方式满足的需求优先级高；二是需求频次：该需求被提到的频次。（可参考可用性问题评级标准）；业务角度：满足该需求对产品目标的影响，比如产品目标是提升商家 GMV，直接影响 GMV 的需求优先级高。④ 机会点洞察调研中思考的机会点：主参与调研过程的人可以先产出自己思考的机会点，但可能会存在难落地、局限性；与业务不同角色工作坊，共创机会点：组织产品、运营、设计不同角色，用研将调研发现作为输入，帮大家理解用户需求，利用体验地图的框架、便利贴等工具共同讨论机会点，更加全面、可落地。⑤ 可视化一般情况下表格版本的用户体验地图可供内部/小范围内的结论同步与分享，也可以进一步可视化便于没有参加构建的同学能快速、重点获取主要信息，也便于更大范围的分享与沉淀。这里为大家提供 2 个来源于网络的用户体验地图可视化：看完上下篇，你觉得你能自己开始做用户体验地图了吗？可以操练起来试一试～希望对你有帮助，如果有问题可以随时交流最后我想说，用户体验地图是一种方法/工具，目的是更好地理解用户行为与需求，因此有时候项目发起的目的并不是梳理用户体验地图，但也可以基于调研发现去梳理，做为呈现调研结果的工具，更好地理解用户。而且对用户体验地图的应用，是可以去创新、去发挥的，结合我们不同的调研方法、其他工具，融入到体验地图中，未尝不可？欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/user-experience-map-4
用户 内容 场景 本文将以有驾导流体验升级的项目为例，分享导流增长探索的设计思路与实践经验。更多增长设计实战：增长设计实战！如何用一个公式提升5倍转化率？设计师如何提高转化率？阅读文章 > 写在前面端到端导流是指在产品矩阵体系内引导优质产品的用户使用另外一款产品，带来使用量的提升，从而实现用户规模提升的一种增长手段。随业务快速增长，有驾从百度汽车频道衍伸出了有驾小程序、M 站、PC 站以及 APP 等多纬度的产品矩阵，依托各端流量实现矩阵产品间的导流，逐步积累用户规模，是有驾目前获客渠道中占比最高的方式。本文将以有驾导流体验升级的项目为例，分享导流增长探索的设计思路与实践经验。一、为什么要做导流1. 导流的目的对于业务本身而言，随着移动互联网流量红利期的结束，获取新用户的成本越来越高，不管是新产品还是成熟型产品，都需要通过导流的手段来持续扩充新用户。其次，对于有驾产品生态而言，需要各端产品间的相互联动，协同发挥优势，实现流量价值最大化。2. 导流的优势成本低，相较于投放、活动等渠道流量获取方式，矩阵导流成本低；高意向，用户购车意向明确更容易实现商业转化；可共享，用户数据及行为关联互通。二、如何做好导流设计1. 问题分析通过梳理核心场景的 4 种导流条，发现各个场景导流形式各异，用户缺乏统一认知，导流引导语单一内容吸引力弱。在用户在浏览页面时，点击功能入口或想要继续查看更多内容，需要下载 APP 才能继续阻碍用户浏览：缺乏统一认知：视觉表达形式不成体系，用户感知不够；内容吸引力弱：内容单一缺乏吸引力，用户没有点击欲望；阻碍用户浏览：打断用户正常使用功能，影响用户体验。从导流链路的用户行为来看，整个流程下载路径过长，发现用户流失较大的转化点：从小程序落地页到下载页：在进入小程序浏览页面时，用户没有注意到导流条就滑走了；点击导流条进入下载页：点击导流条会先调起导流弹窗，点击确认后再进入到下载页，用户未选择下载就退出了。2. 明确设计方向针对导流现状缺乏统一认知，内容吸引力弱、阻碍用户浏览、下载路径过长的问题，我们搭建了一个完整的导流链路图，根据用户增长模型，把用户生命周期各节点的用户行为与产品触点一一罗列出来，找到增长路径的设计机会点。通过以上的问题分析，如何建立用户和产品的链接，保障友好的体验，是本次导流升级要解决的问题。根据用户关键行为，我们可以将整个导流链路拆分为 3 个阶段来挖掘主要机会点：下载前：兴趣激发导流吸引，建立用户稳定认知；下载中：强化用户转化动机，刺激用户完成下载；下载后：保障还原体验畅通，提升首次使用体验。下面将分别介绍导流下载前阶段的设计落地实践，以及下载中、下载后阶段的延伸设计思考。三、下载前1. 强化触点吸引是否能成功引起用户注意，是转化开始的第一步，统一的视觉风格和满足用户诉求的内容，有利于增强导流条的吸引力。① 收敛导流条类型针对「阻碍用户浏览」打断用户正常使用功能、用户没有跳转预期的体验问题，下线了阻断式和截断式两种体验不友好的导流类型，将原来 4 种导流类型收敛为 2 种，仅保留通用导流条和功能延展导流条，基于这 2 种导流形态进行深入的设计探索。② 建立通用视觉标准针对「缺乏统一认知」视觉表达形式不成体系、用户感知不够的视觉问题，建立了通用导流条标准化规范。统一视觉形态，优化为页面内通栏嵌入式，同时融入品牌色强化用户感知，根据页面布局制定了不同的展示规则。上线后，内嵌导流条在展现受限的情况下，导流转化数据与改版前基本持平，为了进一步提升导流的点击效果，开始探索场景化定制提转的设计方向。③ 定制场景化内容针对「内容吸引力弱」内容单一缺乏吸引力、用户没有点击欲望的内容问题，在通用标准化形态的基础上，根据不同场景用户诉求点，丰富导流内容。分别从内容定制、按钮文案优化、以及氛围强化 3 个方向验证对转化的影响。内容定制：丰富导流利益点、场景化内容更能激发用户兴趣，促进转化达成；按钮文案：转化按钮文案导向性明确、内容与导流利益点匹配，可以助力按钮转化提升；氛围强化：导流样式上适度弱化氛围、样式更倾向于原生功能，有助于提升导流条点击。2. 拓展场景扩量复利通用标准导流条的成功经验，应用到功能延展类导流条中继续验证有效性，从产品价值点出发，挖掘高流量场景的机会点从而带来转化增量。① 价值传递根据小程序和 APP 两端各自的不同点，分别从功能差异及体验差异两个方向进行优化。APP 特有功能：APP 完善的功能体验可以更好满足用户诉求，例如参配浏览场景下，引导用户体验搜索及横屏查看的高频功能，对于导流转化有正向帮助；各端体验差异：小程序和 APP 两端体验存在差异，例如图片浏览场景下，APP 清晰流畅的浏览体验及放大全屏查看图片的交互体验，能够刺激用户转化。② 价值延续当用户完成核心内容消费后，是否可以引导用户去 APP 继续浏览更多相关内容，进而引导用户下载呢？服务透传：平台服务内容传递，例如在内容落地页文末增加品牌广告导流条，帮助用户建立品牌认知；相关推荐：引导相关内容消费，例如在文章或视频页增加相关推荐导流条，引导用户浏览更多相似内容。四、下载中当用户通过导流条进入到下载流程时，还有哪些手段可以刺激用户激活减少流失呢？强化下载动机：下载页前置 APP 落地页内容，例如将通用下载页优化为场景化下载页，给用户超前产品体验吸引转化；减少用户流失：缩短链路简化流程，例如可在下载中间页完成应用下载，同时退出下载页时增加挽留。五、下载后当用户在应用商店下载完成后，我们还能做哪些提升首次启动 APP 的体验呢？还原链路畅通：提升场景还原成功率，减少频繁提示信息干扰；建立用户心智：引导新用户探索功能，根据用户兴趣推荐适合的内容。以上内容是下载中和下载后阶段导流优化方向的一些延伸设计思考，为大家提供可以继续探索的方向。写在最后总结一下本篇文章关于导流的体验设计要点：全链路洞察，对导流链路进行拆解，通过盘点导流链路的用户行为，明确每个节点的设计方向；降低广告干扰性，减少用户浏览过程中的阻断感，适度弱化广告氛围；用户的视角引导，让用户专注于产品本身传递的价值，引领用户完成对产品的探索从而完成下载激活。希望以上的设计思考，可以带给大家一些启发。欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/diversion-design-2
组件 场景 业务 在 B 类业务里，服务多产品、多角色、体验复杂，设计师该如何做好体验标准化，保障基础体验一致性？下面我将从实战案例同大家分享。更多B端设计干货：B端设计太复杂？掌握这三步帮你理清设计思路！写在最前B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。阅读文章 > 一、业务背景以我们 CCO 体验设计团队为例，主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加，设计面临严峻挑战。业务多：30 多个产品应用角色多：覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户 6 大类用户群体。体验复杂：设计师需兼顾用户和客户两个视角。从组织上，85% 设计师纵向支撑业务，15% 设计师横向做标准化，反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。二、标准化怎么做核心通过页面梳理、抽象、分发、衡量，保障基础体验一致性。三、案例实战以数据可视化场景为例，讲述如何做标准化。1. 业务现状共有 11 个应用，涉及 89 个页面。2. 问题体验不一致：各个工作台页面架构、组件、样式野蛮生长，缺少规范导致体验不统一。低效：部分场景缺失，组件重复建设，大量定制；沟通协同内耗大，成本高。3. 策略体验统一：框架、组件、样式。提效：代码化、工具、交付机制。4. 体验统一包括框架、组件、样式。① 框架现有页面收集用户场景分析：页面归类：结合用户看数内容（例：概览、分析、详情）和交互形态（例：平铺、下钻），对页面进行归类。通过统计高频复用形态，确定典型布局。② 组件页面结构分析组件的收敛，需要先对页面分析，确定模块层内容。例：模块包含页头、筛选、图表、表格。模块层分类横向收集全部业务，将模块层分类。细分模块扩展形态，放到对应的篓子里。模块专项治理接下来，需要对每一个模块进行专项治理。比如图表模块，再拆再抽象成指标、图表、单选、多选 4 类场景。场景里再对主体和变体（也就是扩展形态）分类。③ 样式确定优化内容围绕视觉凌乱，要做的便是完善设计语言。设计师需要结合自身技术底层，补充缺失规范。例如布局、色板、字体、动效。确定组件范围通过统计高频复用组件，确定需要梳理的组件范围。布局图例位置：线上有 9 种，通过从业务场景按阅读顺序划分，最终收敛成 2 种。组件高度：真实线上情况，只能看 2 个指标，高度规范缺失。需要根据用户分辨率调研，提炼典型分辨率。比如用户是 win 系统，包含菜单栏、任务栏等默认高度，再减去本身页面页头等默认高度，得到 3 档。确定组件建议默认行高 240px。轴标签旋转角度：现状有顺/逆时针两种，通过分析标签类型，结合阅读顺序、轴与标签亲密度，确定默认角度为顺时针。色板通过场景梳理，确定不同组件使用的色板类型及缺失色板。补充语义色板：从业务里抽象 2 类场景，指标和柱/饼/环场景，定义颜色。例如带正面语义，用绿色，比如升、已到岗、正常。带负面语义，用红色，比如降、旷工、失败。字体结合自身业务场景问题，从场景、版权、风格、识别、极值共 5 个维度选择字体。举例场景一，纵向数据场景里，将市面上数据竞品用到的字体都横向铺开尝试，做排除法。比如 din 没版权，苹方非等宽字体，普惠 102 识别性弱。举例场景二，在核心数据呈现中，helvetica 品牌风格弱，普惠在 1 亿以上极值过宽。最终我们根据自身业务场景特征，用普惠和普惠 102，运用在对应场景里。并同前端提炼规则。动效首先，需要确定动效价值，明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。通过动效场景链路分析，确定优化范围。加载动效：围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路，输出方案。比如这里共梳理 17 种组件类型，抽象成 9 类，包括点、线、面、饼、环、柱、文本、图标、词云，再进行组合产出方案。出场动效：通过业务分析、提炼场景、优化效果。比如这里共提炼 3 类场景，有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。浏览动效：通过提炼场景，来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下，围绕点击感知弱、重点不突出、缺少悬停态来优化效果。沉淀速度参数：将优化动效场景的速度参数，同前端约定规则沉淀组件库。5. 提效包含代码化提效、工具提效、机制提效。整体思路从设计组内到技术产研的提效过程。提效面向用户依次是：组件设计师、业务设计师、前端、产品。搭建目前还在进行中，这里主要从交付-工具-代码化来分析。交付内容业务设计师：sketch/figma 物料 (样式、组件、区块、模板、规则 )业务设计师：kitchen 工具（样式、组件、区块、模板）组件工程师：组件规范/组件官网交付机制新需求：通过评估复用性、抽象、内审、沉淀物料。现有业务：通过页面梳理归类、抽象、内审、沉淀物料。6. 衡量从物理到行为层，包括样式、组件、框架、组件交互 共 4 个维度。通过一致性评分衡量标准化覆盖的好坏。四、总结回归课程，在 B 类业务里，服务多个产品、多用户角色、体验复杂的场景下，在定制化+标准化团队阵型里，标准化实质解决的问题是保障 60 分基础体验一致性。总结：B 端体验标准化包括物料的产出、交付以及衡量标准。产出：包括框架、组件、样式的收敛来梳理、抽象页面。交付：面向 2 类用户群体，业务设计，需交付物料和工具。组件工程师，代码化需提供组件规范，组件线上化需助力组件官网的建设。衡量：一致性评分包括样式、组件、框架及组件交互。欢迎关注作者的微信公众号：「AlibabaDesign」本篇来源：优设网原文地址：https://www.uisdc.com/experience-standardization
时间 用户 场景 “时间戳”即时间信息的展示方式，它是一个在 UX 设计中经常出现，又容易被忽视的元素。许多人都以为时间戳仅仅向用户传递时间信息，其实它也会对业务带来重要影响。同时时间戳的设计非常灵活，在不同场景和状态下都有差异化设计。那么这其中有什么规律可循呢？本文将结合 58 相关产品的实践向读者阐述时间戳控件的设计方法。更多时间设计干货：如何设计「时间显示」更专业？来看大厂总结的方法！背景“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。阅读文章 > 一、时间戳类型时间戳的类型分为绝对时间和相对时间两种，二者覆盖了全部的时间戳场景，其中绝对时间强调“准确性”，而相对时间强调“即时性”。绝对时间和相对时间的差异1. 绝对时间绝对时间是指事件发生的确切时间，目标为用户提供精确的日期和时间，强调事件的准确性。它由“日期（年月日）+时间（时分秒）”的格式组成，既包含时间点也包含时间段，如：“下午 2:00 开会”、“2022 年 11 月 1 日～2022 年 12 月 1 日放假”等。优势是时间信息传达精准，给用户以确定性，强化对时间信息的感知；缺点是会导致文本过长浪费空间。绝对时间的常用的展示方式有以下 4 种：“2007 年 2 月 6 日” 和 “2007-02-06” 是公历日期标准格式，用“-”分割时个位数需要加“0”。“2007/02/06” 在不同国家有着不同的展示顺序，在设计时需要谨慎使用。“2007.02.06” 使用英文句号做分割，容易与英文字段混淆造成误解，建议尽量少用。我们建议平台使用统一的展示方式，以保证统一性同时提升用户感知。2. 相对时间相对时间是指事件发生的时间与现在所处时间的差值，目标是提供相对的模糊时间，向用户强调事件发生的即时性。它大多数由“日期（年月日）/时间（时分秒）+定语”的格式组成，如：“帖子发布于 2 天前”、“会员 30 天后到期”等。使用场景多用于：倒计时、即时性资讯、通知推送等。优势是用户的理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是相较于绝对时间不够精确。设计时首先要注意单位换算。试想一下随着时间的增加，单位前的数字会不断增长导致字段所占空间越来越大，以至于浪费空间并增加阅读成本。因此时间单位需要随着时间推移而变化，尽可能使用简短的字段描述相对时间，如将“48 小时前”简称为“2 天前”，将“712 天前”简称为“2 年前”。其次要关注时间取整。由于相对时间只提供及时性的模糊时间，因此为了降低用户理解成本并节省空间，我们可以将相对时间戳做取整处理，如将“1 小时 15 分钟前”取整为“1 小时前”。相对时间戳的设计注意「单位换算」和「时间取整」二、时间戳颗粒度绝对时间戳是由“日期+时间”组成的，在不同场景中设计师会使用不同的颗粒度来设计时间戳。「日期＋时间」的组合1. 粗颗粒度精确到“日”的时间戳，作为时间维度的 Tips 应用在各种设计组件中，向用户传达最基础的时间信息。2. 中等颗粒度精确到“分”的时间戳，常用于精确事件的时间展示，有 2 种展现形式：动态日期：以“XX 12:00”的格式出现，多用于时效性强的场景，如聊天信息和新闻资讯。根据时间发生的日期和当日距离有差异化：前一天发生，可写作“昨天”；一周内发生可以写周几，如“周二 12:00”；超过一周内发生可以写日月，如“2 月 6 日 12:00”；超过一年内发生可以加上年，如“2022 年 2 月 6 日 12:00”。固定日期：以“2022 年 2 月 6 日 12:00”的格式出现，应用于关键时间节点的展示场景，相比较上一种方式更正式且传达的确定感更强。中等颗粒度的格式差异3. 细颗粒度精确到“秒”的时间戳，应用于金融交易场景，如交易记录、订单记录等。举例：58 到家 App 的订单模块，用户在查看订单记录时，给他们传达强烈的确定感，从而产生安全感并提升对平台信任。58到家APP的订单模块倒计时的设计也会精确到秒，并被广泛应用在各类运营活动上。如下图，58 到家的运营活动，用户看到时间一分一秒地流逝对心理造成压力，从而产生激励作用，增强消费欲望。限时运营活动的倒计时三、时间戳应用场景为了能更好地使用时间戳，我们还需要知道它在不同场景下的作用。1. 重要内容在设计中作为重要的内容要素使用，来强调关键的时间节点。如运营活动，该场景下时间戳对于活动内容的传达有重要影响，甚至关系到用户能否顺利完成活动任务，如用户能否在规定时间内完成抽奖获得礼物，或能否按时观看直播。因此在设计中需要增强这部分的优先级和视觉表现力。运营活动中的时间要素2. 行为标记记录用户的关键行为。在用户进行某个动作后打上时间的标记。很多关键操作都存在可追溯性，包括付款、修改内容、创建产出物等。因此设计时间戳为的是让用户能够在查找相关信息时，实现快速定位。以下图的 B 端产品为例，我们在「智慧营销平台」和「云效 2.0」使用了时间戳引导，方便用户以时间维度查看操作行为。B端场景下标记用户的操作行为3. Tips 信息用户在浏览产品内容时，时间戳作为该条内容的附属信息，起到补充说明的作用。该场景下时间戳的优先级较低，需要弱化处理。根据内容的差异性可以选择不同的类型和颗粒度，如下图中的收到消息时间使用绝对时间展示从而强调准确性，而 Feed 流中帖子的时效性更强，可以不提供精确时间，故使用相对时间展示。时间戳Tips 信息最后不难看出时间戳是一个可灵活运用的设计元素，需要设计师选择合适的类型、格式和颗粒度，并与应用场景紧密贴合，保证用户有良好的体验和感知。它不仅承担着传递时间信息的任务，也可以给业务带来价值，像在 B 端场景下利用时间戳帮助用户追溯操作行为，或在 C 端场景下利用倒计时产生紧迫，感刺激用户消费，从而提升订单转化。时间戳虽然常见，但它的关注度却不高，许多设计师都是凭主观感觉设计，因此我们从一个理性的视角去梳理时间戳的设计方法，希望这篇文章能帮到你。欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/time-stamp-design
组件 复用 场景 在上一篇文章中，我们通过实例讲述了构建和维护组件库的一些方法和思路：组件库设计指南（一）：组件库的诞生编者按：组件库该如何构建？阅读文章 > 在聊到关于持续维护组件的意义时，我们说到，组件在保证合理性的同时，还需要满足复用性、易用性，以便更好地服务于日常的设计需求。所以在组件维护过程中我们不可避免的需要考虑复用性和易用性二者之间的平衡。此时我们需要思考“如何使一个组件在满足多业务场景需求的同时，又能保证其易用性？一、关于复用性复用性是指组件具备一定的可配置属性以适用不同场景的能力。适应的场景越多，组件的复用性就越高。「可配置」主要体现在以下方面：支持通过替换内容，样式，尺寸等操作改变其状态，以适应不同的场景；支持局部元素展示隐藏，例如商品卡片的标题、说明、标签、价格等可根据接口数据控制展示逻辑；支持多种布局和排列方式，例如商品卡片的左图右文排列、上图下文排列；我们在上一篇文章中的提到的基础样式或组件，例如文字(字号、颜色、对齐方式)、颜色、图标等即是可配置属性，通过这些基础样式预设的变量，来满足各场景的需求。组件的内部元素的可控性越高，其适用的场景就越宽泛。为了满足不同场景的需求，设计师在调用组件时往往需要通过“覆盖层”设置其嵌套逻辑和样式选取，整个过程中所产生的思考与操作成本较高。但相应地，正因为「组件」高度整合了多个可配置属性和变量，组件库的整体规模会相对容易把控，结构也会相对清晰。二、关于易用性易用性是指组件对于使用者的友好程度，即组件的设计能够符合使用者的认知及需求，使用者能通过较低的学习成本、快速上手使用。我们通常需要从以下 4 个指标来度量组件是否易用：结构清晰：组件所包含的所有组成元素是否可视；便利检索：指在文档内查找组件的难易程度，通常与组件命名相关；即拖即用：单一组件用于业务设计所花费的成本；帮助可视：是否容易获取组件使用的提示和帮助。组件内部元素的可控性越低，其适用的场景就越单一。对于使用者来说，可以快速地检索、发现所需样式，并能快速完成调用，也更易于组件的认知和记忆。但要满足多样化的设计需求，所需「组件」的数量需要足够多，组件库的整体规模相对较大，后期更新和维护成本更高。总的来说复用性和易用性是优秀组件必不可少的特性，二者缺一不可，但任何一个极端都不利于构建高效实用的组件库，设计师需要明确组件库的目标并制定规划，针对每一个图标、按钮、组件、模块，考虑如何实现复用性和易用性的平衡。下面将以“Gtech UI Kit (Mob)”组件库当中的实例，来简单阐述我们对于二者平衡的思考，以及我们是如何做的。二、以商品卡片(网格布局)为例以电商 PLP 页面（商品列表）中常见的商品卡片为例，我们知道在列表中每个商品最终呈现在用户面前的内容取决于商家后台的配置。对于承载内容的组件来说，我们在维护时需要结合业务需求考虑诸多问题：例如自适应场景、商品名称的长短限制、卡片内容的布局和排列方式等等...1. 拆解 - 从业务出发，拆解组件的表达结构和所需元素如果对商品卡片进行拆解，最基础的商品卡片通常包含：背景、图片、名称、标签和价格等元素。图片通常以 1:1 的比例展示，无论在什么屏幕宽度下，均保持比例一致；商品名称通常不会超过两行，需要考虑自动布局以适应不同的文本长度和屏幕宽度；标签行通常展示 1-3 个不等，甚至没有的情况，标签组件中需预设足够多的样式支持；价格通常会展示折前价和折后价对比，或仅展示最终售价。当某一组件拆解到足够细分的时候，可拆解出多个可配置属性（即基础样式和组件）可以形成多种组合。依照这些组合，我们可以开始创建组件的工作。2. 组合 - 通用的组件的布局及可配置属性的搭建母组件建立商品卡片的基本结构和内容排列：网格布局以上图下文为主，将所有的元素设置成合适的大小，除图片外的其他内容均以名称、标签、价格的顺序自上而下展示，另外，建议标签和价格元素各自合并成组，以方便后续进行自动布局；选择所有元素，创建为组件；对于网格布局的商品卡片，我们除了一系列的自动布局和尺寸的设置外，需要注意的是新建一个空对象容器、将图片放置其中，以方便固定比例。以上我们就完成了满足上述需求的商品组件，我拆解了一下结构，如下图：按照上述操作，我们完成了一个基础商品组件的创建，我们通常称之为“复用组件”，通过复用组件我们在需求设计时可以根据实际业务场景进行替换图片、替换文字内容、增删元素或者拖拽拉伸均等操作。3. 精细化 - 从多维度，多场景输出子组件的方案和组合精细化是根据实际情况对复用组件进行细分管理，通过对可配置属性的替换，输出多个样式组合即“子组件”；子组件一般根据使用频次和属性分类展示在组件库文档内，以供使用者浏览、使用；如果需要调整某一子组件时，只需进行独立调整，无需改动复用组件，且其他子组件也不会受其影响。这种管理方式的优点诸多不一一赘述，但需要在前期整理、理解和细化时需要花费一点精力。三、思路在整个过程中，我们前期将目标进行拆解细分，中期整合多个属性变量创建可复用组件，最后通过精细化管理，尽可能的在单一组件目录下展示多个样式组合，并通过不同的菜单对其布局、类型、状态等属性进行分类，使之在使用环节能够易于检索、识别、并即拖即用，快速上手。以上是我在整理组件时的思路，抛砖引玉，仅供参考。在实际维护的过程中需要考量不同属性和变量的使用频率。并不是组件整合的属性和变量越多越好，兼容越多的属性和变量往往意味着组件的复杂度越高，对于各个场景的调整成本也越高，反而会增加额外的操作和认知成本，就舍本逐末了。再举个例子，如果设计能够在需求阶段就得知后台配置的商品名称有字数限制的情况的话，我们在创建商品卡片时，可以直接以最极端的场景考虑即可，这样也能减少试错成本，提高维护效率。所以也请大家注意，要结合业务需求和日常工作习惯，找到最适合自己的组件整理维护方案。四、易用性在前，复用性在后实际上，无论何种事物，复杂的逻辑往往是隐藏在看不见的地方，就如同我们日常接触的应用程序一样，展现在用户面前的永远是优秀的界面和体验设计，而其背后往往是开发者无数行代码交织形成的复杂逻辑。组件也是如此：在整理和维护组件的环节，我们需要考虑多种组合场景，衡量这些场景的使用频率，整合出一个或多个高度复用性高的组件，并以此精细化足够多的可供快速使用的子组件。而对于使用环节，我们希望设计师和开发者可以通过浏览设计文档、网页等方式查看所有子组件选项和使用帮助，并能快速选择业务所需的组件，减轻改造组件的成本，以实现更有效率的设计和封装工作。最后，不要盲目追求兼容性和复杂度，适合即是最好。更多组件设计干货：6000字干货！如何用 Figma 搭建系统组件库？组件库是一个强大的提效工具，对于设计师和开发来说有了统一的标准，输出的效率也会大大提高。阅读文章 > 用一篇文章，从零开始帮你用好 Figma 的组件库功能对于设计系统，我们最熟悉和常用的应该就是设计组件了，即 UI kits，包括输入框、按钮、文字、链接、下拉菜单等等。阅读文章 > 欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/guide-to-the-design-of-component-library-2
场景 用户 需求 在产品设计中，我们经常会听到这些声音，“这个设计没有考虑用户的使用场景” “用户行为和场景不匹配”…… 每个人都有说到“场景”一词，但好像我们对于“场景”的理解又不太一样，那么场景到底是指什么呢？理解它又能够帮助到我们做什么？基于场景化的设计又当如何做呢？本文通过以下四个范畴，简要阐述一些场景化设计的一些概念，以帮助我们更好去理解它。更深入的场景化设计干货：万字干货！九大章节帮你掌握场景化设计思维编者按：本文从《无界面交互》一书说起，总结了场景化设计思维的知识点，帮读者掌握场景化设计。阅读文章 > 一、什么是场景化设计1. 什么是场景了解场景化设计前，我们先理解什么是场景，在实际生活中以及各类词条中，对于场景的定义会有些区别。百度百科，场景是电影或戏剧等艺术作品的场面，泛指人、空间、时间和事件构成的情境。梁宁《产品思维 30 讲》，将场景分为两个部分，“场”是时间+空间，“景”是情境和互动，当用户停留在空间的时间里，有情景并让用户产生互动，就是场景。书籍《About Face 4 交互设计精髓》场景是利用故事情节或者情境的叙述，通过叙事的手段方法设计用户目标的交互过程。不难发现，这里对于场景的描述都提到了人、空间，时间，以及要做的事情，大家一下就能联想到了 4w1h 分析法，简单描述就是谁（who），在什么时间（when），什么地点（where），通过什么行为（how），要做什么事件（what），这就组成了一个具体情境，也是我们经常讨论的用户场景，我们也可以简单称之为场景五要素。举个例子：小明早上起来后就去洗手台刷牙，人物小明，时间在早上，地点在洗手台，行为是用牙刷刷牙，目的是清洁口腔，这就是一个完整的场景。2. 什么是场景化设计有了对场景的定义，那么就不难理解什么是场景化设计了。场景化设计就是结合我们的产品需求，通过场景化的思考方式，即场景五要素，针对不同的场景结合需求制定不同的设计目标。二、场景五要素设计案例分析场景不是凭空猜测想象的，它需要有上述提到的 5 个要素中至少 2 个以上才能构成一个情境，下面我们分别从人（who）、时间（when）、地点（where）、行为（how）和目的（what）5 个要素在一些设计案例中的运用。1. 人（who）① 千人千面我们经常听到的千人千面，实质就是针对不同的用户画像，提供精准化的内容，比如头条新闻、微博推荐等，都是结合算法针对不同的用户提供个性化的内容。② RFM 模型基于用户分层，就是将人这个群体要素进行拆解分组，针对不同价值的用户，实现精准的营销策略，从而实现最大的 ROI。③ 为中间用户设计也是基于用户分层，通过用户群体对于系统使用的熟悉情况，从而把用户划分为新手、中间用户和专家，这么做的目的便于我们会把注意力集中在中间用户群体上。因为每个人接触产品时都是新手，但他们很快就会进入到中间用户，所以在产品设计中，我们需要做到既不迎合新手，也不迎合专家，而是把大部分工作和精力放在永久的中间用户上。2. 时间（when）时间也会有不同的类别，比如固定的时间点，或者周期性时间段。饿了么会根据不同时间点，推荐符合该时间的食物，比如在上午、下午、傍晚和深夜推荐的食物都会有一些差异。3. 地点（where）《春秋》写到，橘生淮南则为橘，生于淮北则为枳，说的就是地点会影响最终事物的性质和结果。举个例子，美团会根据用户切换不同城市地点，结合当地提供的服务，智能推送用户可能会用到的功能。当你在上海，猜你可能会需要疫情相关的服务；当你在齐齐哈尔、海拉尔区，猜你可能在旅游，需要查路线；当你在西藏日喀则，那就没有服务了。当然上述举例只是一个狭义的地点，在一些软件设计中，“地点”也有可能是不同硬件的区别，比如用户用安卓手机和 pc 电脑之间的区别。4. 行为（how）行为是用户通过一系列手段，能够达到他们目的工具或方法。行为的手段有很多，我们拿界面设计举例，《交互设计精髓》有一个理论，界面的设计呈现，应当是无限接近用户的心理模型，而不能基于实现模型（也就是开发逻辑）。当表现模型与用户心理模型无限接近，用户的行为也就会越顺畅，能够通过已有认知或习惯完成这个目标；反之，用户操作行为可能卡在了某个节点，或者没有完成自己的目的。所以当设计越接近用户的认知和预期，用户则会感觉容易理解，从而用户行为也符合我们的预判。举例说明，假设我们需要用奶油做一个苹果，希望用户愿意拿起它并愿意吃，应当怎么做呢？我们肯定会在形状、颜色以及气味，让它尽可能和真实场景的苹果更无限接近，这才符合用户对它的期待，最后用户才会愿意拿起并送入到自己的口中。5. 目的（what）在产品设计中，我们也称之为痛点或者爽点。它是一种需要，简单说就是要明白用户要什么。举个例子，因为最近疫情封控，我们需要做一款帮助大家做菜的产品，下面拿我和我老板做饭过程举例说明。我老板的做法过程，第一，我要吃什么，甜的辣的；第二，我需要哪些食材；第三，配上精美的盘子，美美地拍上一张照片。我的做饭流程，第一，冰箱里有什么，什么菜快坏了；第二，这些菜大概组合能够烧出一道什么菜；第三，用一个大盘子盛，这样可以少洗一个碗。简单看我们好像都是为做一顿菜，但目的完全是不一样的。我老板除了要吃上自己喜欢的菜，还有一点精社交的需要；而我嫌做菜麻烦，吃饭就是简单对付，填饱肚子就可以了。所以说同样是做一顿饭菜，两个人的目的（痛点）是完全不一样的，而如果到我们设计出来的产品，没有对用户目的做详尽的了解，最后出来的产品和用户的行为之间可能就是南辕北辙。三、场景化在产品设计中的价值有了上述对场景化的设计案例分析，我们发现场景更多思考的是用户需求。但是我们在做产品时，我们也会有产品需求，即我们要什么。通过对需求是否贴合用户场景，不仅可以帮助我们洞察需求，梳理核心价值点；还能帮助我们理解用户，提升产品体验。1. 洞察需求，梳理核心价值点梳理需求：初期的需求往往比较抽象，以功能为导向，这时候我们可以通过场景化的方法，深刻地理解需求，梳理并挖掘产品的新机会和新功能点。辨别真伪：通过场景化的思考，可以帮助我们筛选哪些是真需求，哪些是伪需求。主次矛盾：理清这些需求的强弱和先后，用户痛点的优先级，先解决和后解决哪些问题。2. 理解用户，提升使用体验① 理解需求上述提到，需求和场景紧密结合的，不存在没有场景的需求，所以设计前一定要先分析需求的价值及合理性，同时对场景作进一步细化和拆解，以便能够输出更加合理的设计方案。② 了解用户如果不了解用户的场景，单纯的纠结于界面设计，就像是盲人摸象，很容易陷入自己的胡乱揣测，导致设计出来的方案不一定符合用户的使用场景。③ 与用户共情把自己变成用户，站在用户立场考虑问题的思维方式。特别是 B 端产品，企业采购产品是为了提高组织关系的效率，产品功能往往强大且复杂，设计师在面对众多的业务需求，会很容易陷入到产品的逻辑规则中，而忽略用户使用过程中的感受。四、如何进行场景化设计理解了什么是场景化设计后，以及场景化设计的价值点后，我们再来看看场景化设计我们又当如何做。通过大量的产品设计实践中，我整理了常用的场景化设计设计步骤，如下 ：1. 列举场景场景梳理的过程中，我们抓大放小，找到核心场景，并描述出用户的主行为路径。然后再对其进行分类细化。便于理解，我们拿小明想要通过某电商平台购买一包虾条举例，主要流程：搜索挑选购买配送评价。当然以上只是大场景，拿第一个搜索场景细化举例，小明（who）在下班（when）回地铁的路上（where），拿起手机点开某拼夕夕 app（how），输入虾条关键词搜索（what）。重点是要通过场景化思考，描述出场景各要素之间的关系，是谁（who）、在什么时间（when）、什么地点（where）、通过什么行为（how）、做了哪些事件（what）。通过对用户场景的描述，将停留在我们脑海中抽象的信息提炼并具体化，更加直观的知道用户在各个场景的状态，发现我们在此之前想不到的一些细节，帮助我们真正了解用户痛点。关于真实场景的获得：以上只是一个简单的购物需求，它与我们日常生活息息相关，一般可以通过模拟或者访谈得到。但也有一些场景不是我们坐在办公室就能想象到的，比如拿 WMS 仓储系统来说，不到现场查看，设计师可能就体会不到现场环境的嘈杂和混乱，所以就不能够再用常规意义的办公环境来设计你的系统。有时为获得更真实的用户信息，躬身入局是一种比较好的做法，到真实现场观察和了解用户，也就是我们所说的田野调查。2. 通过场景挖掘机会点有了上面对场景的列举和描述外，这一步骤就是针对这些细化的场景进行分析和预判，并发现其中的机会点。通过场景化去挖掘机会点，一般有两种方法：基于当前场景寻找机会点通过对上一个场景分析，再结合当前场景预判行为，寻找机会点① 基于当前场景寻找机会点我们拿搜索场景举例，所有的电商平台在搜索输入时，都会提供关键词自动搜索内容展示。好处是可以通过输入的关键词，帮助用户进行整个词语的联想，方便用户直接点击，来提升搜索效率；另一方面也能够给用户提供更多的搜索方向。② 通过对上一个场景分析，再结合当前场景预判用户行为，寻找机会点比如拼多多的关键词自动纠错，在输入“下调”或“xiatiao”时，点击搜索后会将关键词已进行中文转译处理，并提示告知用户转译后的搜索结果，这样避免了用户重新输入再搜索，大大提升了搜索效率。再比如如果用户搜索了虾条没有下单，并且关闭了 app。那么等到用户再次打开 app 的时候，搜索输入框默认显示上一次与虾条相关的内容，一方面可以引起用户的注意，另一方面用户如果需要再搜索，可以快速触发，从而降低输入成本。3. 制定设计策略在制定设计策略前，我们需要考虑达成什么设计目标，只有明确了设计目标后，才可以理性分析存在的机会点，思考选择什么策略去解决。举例说明，我们想要提升淘宝搜索输入框的活跃度，通过用户体验地图（设计策略）在用户搜索中，增加热搜榜、XX 促销……再通过上线做 A/Btest （设计策略）看结果数据。最终我们发现，可以通过增加搜索推荐区域，针对那些不知道搜什么的用户、或者想要随大流的用户，通过一些热搜词汇来可以提升输入框的活跃度。常用的设计策略有很多，比如要分析用户场景或目标，就可以选择卡诺模型、用户体验地图、RFM 模型等；要提升用户活跃指标，可以采用福格行为模型、海盗 AARRR 模型，或者广告界常提到的 AIDA 模型等。用一篇文章，让你掌握能让用户快速增长的AARRR 模型AARRR模型因其掠夺式的增长方式也被称为海盗模型，是Dave McClure 2007提出的，核心就是AARRR漏斗模型，对应客户生命周期帮助大家更好地理解获客和维护客户的原理。阅读文章 > 不管我们采用任何一种设计策略作为指导时，都要先评估其是否合理、合适，确保选择的设计策略与设计目标是一致的。当然在使用过程中，我们也仍需对这些通用的设计策略进行适当的修正修改，使其和我们的业务更匹配。4. 效果验证效果验证就是需要通过一些度量指标，验证我们设计的结果如何，比如上述搜索举例，验证的指标就是搜索效率是否得到了提升。效果验证的度量指标需要结合我们的设计目标，上线后的方案这些指标是否提升或者降低了，是否和我们预判的行为一致。指标标的设立也和产品的特性有关，比如 B 端的产品常常关注效率等指标，是否缩短了操作流程，降低了用户认知等；C 端产品更加商业化，通常会用一些市场化指标，比如用户增长、转化率、GMV 等。五、结语回顾本文，不能发现，场景化设计实质是一种思维方式，它需要我们考虑清楚人、时间、地点和外部环境的关系，在这个关系下，用户会怎么想，以及他会做出什么样的行为。孙子兵法里说：水因地而制流，兵因敌而制胜。如果我们在设计时，也能够因地（场景）制宜，再通过制定合理的设计策略来引导用户，那么最终的设计目标也将会事半功倍。参考文献：Alan Cooper《About Face 4：交互设计精髓》梁宁《产品思维 30 讲》阿里巴巴《U 一点·料 2》本篇来源：优设网原文地址：https://www.uisdc.com/scene-based-design
设计师 用户 场景 编者按：本文从启蒙、基础、强化、进阶4个方面，列举了UI设计师学习交互的路径和方法。交互自学干货：网易设计师：自学交互最应该关注的 4 个核心知识点网易UEDC - 杨倩 ：对于非交互设计的同学，要怎么去学习交互设计呢？阅读文章 > 一、为什么 UI 设计师要懂交互？近几年的互联网市场，有不少公司提出了“全链路设计师”、“用户体验设计师”的说法，合并交互与 UI 岗，一时间众说纷纭：有人说是高要求，有人则说这是一场变相的“人力压缩”。其实，设计师作为一个高度复合型的岗位，虽有 UI、交互、产品设计等细分，但无论是哪个细分岗位，都需要对业务、场景、用户、技术实现有所掌握，才能给出最佳的设计方案。高度竞争的市场环境下，单纯的“美化产品原型稿”，早已丧失了获得高回报工作的可能性。因此，才会对设计师的要求越来越趋于综合化。放眼如今的 UI 设计师招聘描述：用户体验、交互可行性、数据分析……这些曾属于交互设计师的职责，已普遍的出现在UI设计师的必备技能中。至此，我们可以危言耸听地说一句：“单一的 UI 设计已经逐渐满足不了互联网市场的需求”；但也正因为如此，我们才要丰富起自己的武器库，去创作更大的价值……二、UI 设计师该如何学习交互呢？1. 启蒙篇：站在用户的角度上思考问题笔者曾经也是一位 UI 设计师，在工作中由于项目从 C 端逐渐偏向 B 端，工作重心也就需要从视觉倾向于产品逻辑、交互体验上了。岗位名称从“UI 设计师”到“用户体验设计师”再到“交互设计师”。这其中最大的转变就是：将自己从“站在画面美观的角度上”思考问题，转变为“站在用户的角度上”去思考问题（也许我之前是个不懂设计的美工）。举个简单的例子，之前做一个叉车工使用的 PDA 把枪界面：现场实施人员给我带来一个小需求，为避免叉车工在操作的时候误触，需要把底部的操作按钮向上移；我在上移了 16px 之后依然被要求不够，“继续上移，再上移！”站在设计规范的角度上，我与实施人员几番 battle 之下……他发给我一张现场叉车工人的手的照片，我这才明白这么做的理由：长期的重活导致他们的手骨节粗大；再加上在搬货途中使用 PDA 的抖动性增强，使他们的操作误区比普通人大了许多。在了解用户与场景之后，再看向那个 PDA 界面操作按钮下大片的空白，瞬间显得合理了……2. 基础篇：如何画出合理的界面？首先，笔者建议大家可以结合自身项目，从基础层面开始学习，由小至大、由简入繁。一来，是因为项目流程中原本岗位配合本就严丝合缝，要么是已有交互、要么是产品经理产出交互原型稿，可能并不会给你很大的试错空间；二来，则是因为各位分析过大场景的能力可能不足，直接上手反倒容易短期内没有产出，影响学习的情绪……基础内容主要包括三个部分：工具、控件、设计原则① 工具这里会有很多 UI 童鞋问的一个问题就是：我需要学习 Axure 软件吗？个人建议：Axure 可以但没必要, 反正我现在没用到。各位既然能够画出精美的高保真效果图，那么低保真的交互稿还画不出来吗？工具如何并不重要，如今用 Sketch、Figma 画原型的交互设计师很多，而且这样更方便与视觉同学之间的产出物转化。所以大家倒不必将过多的时间精力放在软件上，别让软件成为学习路上的第一个拦路虎。② 控件IOS、Android、MacOS、Windows 各端、各平台的设计规范&控件是设计的基础，无论你是 UI 还是交互，都应该熟练使用各个平台、系统的组件使用场景。只是 UI 与交互的侧重点可能不一样, 很多 UI 设计师过分注重组件的样式，而忽略了它们的用户使用场景。所以组件究竟该如何学习？a. 熟记组件的使用场景这个组件在什么情况下会用到？只有熟记使用场景，才能在需求到手时，快速实现功能。这些内容在各组件共享平台的使用指南中都有详细介绍，以 element 为例：基础用法、相似组件区别都有标明（如下图）。b. 各端组件不要混用不同端的同种功能组件会有很大的操作区别，比如：滥用移动端与 PC 端之间的组件，就会影响到用户的体验。以加载方式为例：web 端常见的分页加载就不适合出现在移动端，移动端主打的轻量化操作体验，多以滚动&点击的方式触发加载。③ 设计原则如何画出一张合理的界面布局？那么你一定离不开交互设计的七大定律。对于交互设计七大定律，想必大家多多少少都有了解：格式塔原理、72 法则、席克定律、费茨定律、奥卡姆剃刀原理、复杂性守恒定律等。交互设计七大法则！新手必看的超多案例编辑导语：怎么样才能让设计出来的产品更加美观，更加符合大众审美呢？阅读文章 > 以上定律的详细定义，笔者在此就不一一摘抄了，想要知道的童鞋可以上网搜一搜。下面我具体只讲我是如何学习这些定律的，那就是：多看案例！看得多了，自然就会用了。以费茨定律举例：带入这个定律去看下面的实际方案：详情页面“返回”按钮究竟摆在哪里，比较合适呢？我们选取了几个 App 详情页面的查看，最常见的两个样式，左上角 VS 左下角，那么哪个方案操作更便捷呢？带入用户手指操作的场景，如果是双手操作，那么两个方案区别不大；但如果是单手操作，通过单手拇指触屏的操作热力图来看，左上角的返回按钮属于“难触及区域”，而左下角则是“操作便捷区域”，带入费茨定律，我们就能得出左下角的返回按钮操作更快捷！温馨提示：其实这些交互的定律就如同我们 UI 的设计规则一样，可以在做设计的时候去参考，却不能照本宣科，脱离实际场景。以免出现笔者前文中“一味追求规范，而忽略用户痛点”的教训。3. 强化篇：如何做出好用的功能？一个好用功能的前提，得是一个能用的功能。所以我们要先让流程闭环，功能跑起来；然后再做优化，逐步完善……① 先做出一个能用的功能：流程闭环我们在做每一个版本需求时，产品经理都会给到一条功能的业务流程，而这条业务流程是没有办法直接转化成页面的。设计师们需要将“业务流程”转化为“用户操作步骤”，再转化为“界面”。举一个最经典的审批流程的例子：业务流程大家都很熟悉：发起-审批-结束；其中包括了两类用户：发起人&审批人。以发起人为例，向下拆分他的用户操作步骤；再从操作步骤中推导出界面（如下图）：② 让功能变的好用：深挖用户场景当闭环的操作流程已经搭建完成，我们就需要考虑，如何让它变得更加好用了。这一环节我们需要深度挖掘用户场景：弄清楚“谁？在什么情况下？要做什么？”，然后与用户共情，带入场景去思考问题……继续以发起审批为例：在这一过程中，审批发起人（用户）+在提交了审批之后（场景）+想要知道审批的结果（目标）。带入用户的角度，去思考这个场景下，他们的心理活动，他们会有什么想法？再以此为需求，逐步完善我们的功能：这里可能又有童鞋发问了：我没有这么强的共情能力，想不到这么多用户的可能性怎么办？那么，交互设计师的核心技巧：用户调研、可用性测试、数据埋点、竞品分析……就可以了解一下了！通过这些方法，就能又快、又准的帮你做出一个好用的功能。4. 进阶篇：设计赋能业务（绩效加分项）“赋能业务”是设计师工作中最重要的一点，相信这个词在大家的绩效汇报中经常看到。如果说不懂“用户体验”的 UI 只是一个画图机器的话，那么不懂“赋能业务”的交互则是一个画原型图的机器。① 如何赋能业务？首先要弄清你的业务目标是什么？然后再围绕着业务目标去细化拆分：思考自身设计，拆分设计任务了解项目组其他岗位成员的拆分任务，找准发力点，向下拆分举个例子，一个证件审核后台的案例：审核后台的客服人力不足，导致工单积压，用户频频电话投诉催办。业务方要求在一个月内，在不增加客服人员编制的情况下，将催办类投诉工单降低 80%！收到这个业务目标后，项目组内全体成员都在针对业务目标思考方案、制定各自的任务：第一步，设计师团队从设计出发，拆分设计任务：去调研客服人员审核流程，做操作步骤精简提效；再去调研投诉用户的心理，增加审核进度反馈功能，缓解用户焦躁情绪；然而，这些体验层级的优化虽有奏效，却很难担起降低 80%投诉率的大额目标。第二步，理清团队其他岗位的任务内容及策略，向下拆分：通过沟通，大数据团队针对该目标提出了通过 OCR 识别技术（光学字符识别技术：通过扫描将印刷文字转为图片，再利用文字识别技术转化为可使用的文字输入），智能审核证件的方案。然而却因为 OCR 识别错误率太高，导致近一半的工单仍然需要人工审核。那么此时，设计师就可以在提升 OCR 识别成功率的目标下，向下拆分自己的设计目标了。去调研 OCR 识别率低的基础情况：除去技术层面的问题，用户上传照片不规范、倾斜、反光、重要信息未拍全等都会导致识别失败。那么对于这些问题，上传审核步骤的指引优化就是关键所在！最后，团队一起实现了降低 80%投诉率的大目标，而设计师在项目过程中，既解决了用户遇到的问题、又解决了团队遇到的问题，做到了真正的赋能业务！尾声漫长的文章终于接近尾声了……最后一句临别赠言送给大家（也是笔者在学习交互的时候，一位老师送给我的）：不必太过死磕各个岗位的工作范围，没有哪个行业内的专家能够给交互、视觉、以及任何一份岗位的工作范围去下定义。百度百科上能搜到的所有针对岗位的描述，也都只是包括但不限于。所以，不必被他人设限，也不必给自己设限……总而言之一句话，学习和提升是自己的事情，预祝各位成功！欢迎关注「网易UEDC」公众号：本篇来源：优设网原文地址：https://www.uisdc.com/self-study-of-interaction-design
用户 产品 场景 前言用户体验是用户对产品价值的整体感受，其中包括用户感受到的产品价值以及用户感受到的操作体验。不要让用户思考，这是每个设计师所追求的。这篇文章举了大量的例子，来跟大家一起进行产品细节洞察分析。感兴趣的朋友一起来看看吧。即刻圈子点赞-不同圈子，不同的点赞表达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
场景 技术 分辨率 大家好，我是和你们聊设计花生~3D 建模是当下设计热门，大家熟知的 C4D、blender 等 3D 软件都是通过先在三维空间中建模，然后设置参数进行渲染的方式构建 3D 场景。渲染内容元素越复杂、尺寸越大、精度越高，所需的渲染时间也越长，而且对电脑硬件的要求也不低。但是前不久，英伟达（NVIDIA）在其官网上发布了一篇文章，表明其研究团队已经开发出一个可以实现快速渲染 3D 场景的模型 Instant NeRF。「文章链接」 https://blogs.nvidia.com/blog/2022/03/25/instant-nerf-research-3d-ai文章表示，Instant NeRF 模型可以在几分钟内对数张静态照片以构建 3D 场景为基础进行训练学习，然后在几十毫秒内渲染出该 3D 场景的图像。英伟达还在文章内放上了一段视频，以可视化的方式展示了 Instant NeRF 的运作方式——以逆向渲染的方式，模拟光线在现实世界中的运作 ，以实现用数张从不同角度拍摄的2D图像来重构一个逼真的3D场景。如果我们看到一张图片，大脑很容易就能通过空间想象判断一个物体的空间体积、位置、颜色等信息。就如通过一个人物的三视图，我们便能构建出一个完整的立体人物形象。图片来源: 优设文章《出海产品如何从零搭建 IP 插画库？让大厂高手教你！》作者：腾讯设计但是这对人工智能来说并非易事。就以往来说，即使我们给出多个角度的图片，人工智能也无法像人脑那样自动推算空白角度的细节，因此也无法自动构建出完整的 3D 场景。这也是为什么现在的 3D 场景都是由建模开始的——先把所有的造型细节构建好，才能实现后期多角度场景渲染。来源：Artstation-Merve Kaplan那 Instant NeRF 是如何实现仅依靠数张不同角度有图片，在几秒的时间内渲染出完整逼真的 3D 场景的呢？通过文章内容，我们可以了解 Instant NeRF 技术的实现，主要依靠 2 点：NeRF，即神经辐射场。 用过函数分析预测 2D 镜头中的颜色和光强度，并渲染完成的 3D 场景多分辨率哈希网格编码技术，将 NeRF 模型的训练学习时间由数小时缩短为几分钟，渲染时间更是缩短至毫秒。什么是 NeRF（神经辐射场）技术Instant NeRF 技术并非英伟达全新研发，其中的 NeRF（神经辐射场）技术早在 2020 年提出了。NeRF 由加州大学伯克利分校、谷歌研究院和加州大学圣地亚哥分校的研究人员共同开发的，旨在使用神经网络，将输入的二维图像集合，渲染输出位逼真三维场景。用 NeRF 技术将图片转为 3D 场景具体步骤为：先将一个连续的场景，描述为一个 5D 矢量值函数，包括一个 3D 位置（x；y；z）和 2D 观察方向（θ；Φ）。将这个5D函数输入模型后，输出为一个发射的颜色C=（r；g；b）和体积密度（α）。然后使用体积渲染技术，将输出的颜色与密度数据合成为 RGB 图像。渲染函数是可微分的，所以可以通过最小化合成图像和真实图像之间的残差，实现优化场景表示，最终形成完整了 3D 场景。通过 NeRF 技术，可以实现利用多张不同角度 2D 照片构建逼真完整的 3D 场景，与实景拍摄几乎无异。在此基础上，无论是想固定视角查看不同光照角度效果：具有复杂遮挡的场景：还是将虚拟对象插入具有明显遮挡效果的现实世界场景中，都是可以实现的。NeRF 甚至能渲染出对真实对象进行 360视图捕获的效果，而且无需绿幕等背景隔离或掩蔽。开发人员还在继续深入对进行 NeRF 开发扩展，以实现在任意光照条件下从新的视角对场景进行渲染。NeRF 技术的出现无疑是激动人心的。根据可视化的复杂性和分辨率，用传统方法创建一个三维场景需要几个小时甚至更长时间。将人工智能带入画面会加快事情的进展——省去前期建模的工作，极大地提高了3D捕捉的效率和便利性。我们已经知道，NeRF 是通过 5D 数据输入-模型运算学习- 输出 RGBσ数据-体积渲染的步骤，来形成完整3D场景。早期的 NeRF 模型在几分钟内就能渲染出没有伪影的清晰场景，但在模型训练学习这一步，由于要处理大量数据，且可能需要进行结构修改，例如修剪、拆分或合并等步骤，模型训练过程非常耗费资源和时间，需要十几小时甚至一天。然而，英伟达的却通过一种名为多分辨率的哈希网格编码技术，却将这一步所需的时间缩短了几个量级——由原来的十几小时缩短为几分钟。多分辨率哈希编码技术多分辨率哈希编码技术，是由来自英伟达的 Thomas Müller、Alex Evans、Christoph Schied 和 Alexander Keller 组成的研究小组创造的一种新的输入编码方法。“我们通过一种通用的新输入编码来降低成本，该编码允许在不牺牲质量的情况下使用更小的网络，从而显着减少浮点和内存访问操作的数量：一个小型神经网络，由可训练的多分辨率哈希表增强通过随机梯度下降优化其值的特征向量。多分辨率结构允许网络消除哈希冲突的歧义，从而形成一个简单的架构，在现代 GPU 上并行化是微不足道的。——多分辨率哈希编码技术研究小组多分辨率哈希编码技术原理涉及很多计算机专业术语和知识，但是如果你对哈希算法有所了解，知道哈希算法的特征之一：无论大的数据，通过哈希算法都能将其转换为固定长度的哈希值。我们就能对多分辨率哈希编码技术的逻辑有一个大致的了解。多分辨率哈希编码技术的总体思路，就是通过减少所使用的参数编码技术所需的参数数量，并使数据结构本身更易于 GPU 处理，从而进行神经网络训练明显更快。无论输入 Instant NeRF 的数据大小如何，通过希哈编码技术先将数据转换为唯一对应的索引值。在知道检索数据的索引值的前提下，在执行训练操作时，不需要对数据结构进行结构更新，模型处理速度就能提升很多。不同编码的重建质量演示。可以看出使用哈希表编码方式的(d)和(e)的训练时间分别为 1 分 40 秒和 1 分 45 秒，比其他编码方式的训练速度提高了 8 倍以上。且在可训练参数总数相同的情况下，(e)比(d)质量更高，但训练时间不会增加。此外，哈希编码技术会自动优先考虑“具有最重要精细尺度细节的稀疏区域”。这样就不用将时间和计算资源花费在空白空间或细节较少的空间上。例如，图像中具有较粗糙细节的区域不会在不必要的精细分辨率上重复查询，从而提高训练和渲染的效率和速度。多分辨率哈希编码技术让 Instant NeRF 模型只需要几秒钟就能对几十张静止的照片进行训练，再加上它们的拍摄角度的数据，然后可以在几十毫秒内渲染出结果的 3D 场景。相比 NeRF 之前数小时的训练学习时间，Instant NeRF 的进步无疑是惊人的。新的多分辨率哈希编码算法将时间缩短到 5 秒，不仅可以训练场景，还可以提供实时渲染总结英伟达研究团队将自己研发的多分辨率哈希编码技术和 NeRF 模型结合，使 Instant NeRF 成为首批将超快的神经网络训练和快速渲染相结合的模型之一。它能几分钟内处理图像并在“几十毫秒”内生成完整的 3D 场景，极大地提高了 3D 捕捉和分享的速度、便利性和范围。且多分辨率哈希编码技术经过优化后，Instant NeRF 可以在单个英伟达 GPU 上进行训练并高速运行，而且渲染结果质量极高。英伟达的研究人员表示，Instant NeRF 有多种应用：帮助自动驾驶系统了解现实世界物体的大小体积，用来训练自动驾驶汽车；用于为虚拟世界创建化身，为“元宇宙”的构建提供技术支撑；还可用于建筑和娱乐业，以快速生成真实环境的数字表现，创作者可在此基础上进行修改和构建以上这些都只是 Instant NeRF 目前应用的一小部分。Instant NeRF 的 3D 场景构建逻辑完全不同于现在传统的 3D 软件，在应用方面有很大的不同。随着元宇宙和人工智能的深入发展，相信 Instant NeRF 的应用价值会不断替提升，技术的迭代升级也会不断深入拓展。「参考资料」https://blogs.nvidia.com/blog/2022/03/25/instant-nerf-research-3d-ai/https://www.matthewtancik.com/nerfhttps://finance.sina.com.cn/wm/2020-04-10/doc-iirczymi5502874.shtmlhttps://nvlabs.github.io/instant-ngp/https://www.dpreview.com/news/3150421614https://www.bilibili.com/video/BV1pq4y1M7qqhttps://en.wikipedia.org/wiki/Hash_function更多设计资讯2022 设计趋势！正在悄然流行的「新粗野主义」风格每年你会在优设看到大量的设计趋势预测和总结类的文章，其中有的出自腾讯这样的头部公司，有的出自 Uxdesign.cc 和 Graphicmama 这样的知名设计博客，还有的则可能会出自行业内的知名设计师。阅读文章 > 天价头像是如何诞生的？写给设计师的 NFT 超全入门指南注：本文仅仅为 NFT 科普，不建议设计师参与。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/nvidia-instant-nerf
用户 场景 方案 背景VR 全景为家具行业零售场景带来革命性的变化，在交互式展示和营销体验这两个方面带来了突出的市场机会。相比传统的静态效果图，在谈单阶段有全景图工具的介入，带来了明显的客户留店时长增加、线上传播获客提升以及所见即所得签单率提高等商家营销价值。对设计师来说，借助全景图能够更好地为自己的客户展现设计方案，衬托方案的品质，注解方案的细节，让整个浏览过程的体验感受更加舒适沉浸。业务变化我们在跟更多商家的密切合作过程中，也承接了越来越多的全景图工具需求。而在之前的界面框架基础上进行堆积，整个界面变得臃肿不堪；商家们希望借助全景图工具能够打造更好的营销体验，增加获客率和成交率，方案设计师们对于如何利用交互式展示的形式，更好地展现方案效果提出了挑战。借此契机，由设计侧发起了此次体验改版项目。设计目标具体分析问题之后发现，①商家的诉求是能够通过全景图充分传递设计意图，提高营销谈单的效率；②用户也就是全景图的浏览者的诉求是能够快速获取方案信息，便于决策；③业务的诉求是能够有拓展性更高的框架来承载后续的新增功能，同时提高产品的访问深度。从而推导出了三个设计目标:用户侧：提升用户浏览效率商家侧：提升营销互动体验产品侧：提升产品框架可拓展性和品质感提升用户浏览效率设计策略：拆分全景图信息类型，在导览内和场景内分别进行优化用户在浏览方案时，主要有两类信息需要用户关注：空间物理信息：整屋信息，视角所在房间信息设计辅助信息：商品信息，家具信息，材料信息，品牌、联系方式等。将浏览效率的提升拆分到空间信息和设计信息的传递效率的提升，即在辅助浏览者能够快速理解整个空间的信息的同时，让方案设计者的设计意图可以充分传递给浏览者。1. 导览内空间信息传递单张全景图的技术本身即可以满足用户环视单空间的需求，但是在多空间的场景，需要全局视角将不同空间的全景联系在一起，此时导览的全局概览就变的意义重大。用户理解空间之间的关系，需要知道自己所在房间位置、所在位置和全局的关系。2D 的平面图导览和 3D 场景中的位置标识应有明确清晰的映射关系，并且突出用户重点关注项。此时经常出现的场景是在一个房间内渲染了多张全景图的情况，即一个空间内有多个渲染锚点。移动端和 PC 端的交互处理需要做区分。PC 端可以用鼠标精确操作，所以锚点直接平铺在户型图上方便用户切换，若是重叠严重，支持用户拖拽展开，方便用户点选切换。移动端精确操作困难，在有限区域内显示锚点只会干扰用户视线，故可跳转到三维户型，用滑动模型，点击选择切换对象。2. 场景内空间信息传递在方案场景内，用户是以第一人称的漫游视角环视单个空间信息的，此时，场景热点就是为用户跳转不同空间全景图而存在的引导媒介，也是在全景图中点击量最高的热点，如何让他们能够不突兀地显示在三维场景中，自然地引导用户进行点击是优化的方向。选用立体的形态更能让场景热点的存在贴合三维的场景。拉近空间名称与标志的距离，在多个带房间名称的场景热点距离较近重叠时，更好地识别定位关系。3. 场景内设计辅助信息传递设计师通常会对方案做出额外的补充说明，而这些说明需要满足几个前提：关注度区分，可识别性和有序性关注度区分：希望用户在浏览方案时对不同类型的信息的关注度是不同的，比如商品是需要用户重点关注的对象， 文字多会用于补充说明, 不需要用户重点关注。设计侧通过动效、颜色、细节丰富度等不同维度综合考虑，区分热点的重要程度，从而引导用户的视线。可识别性：不同于普通界面元素，全景图在底图非固定的前提下，要保证在亮暗两色上的可识别性，所以在样式上有一定的限制和原则需要遵守。信息有序一致：作为辅助标注不能喧宾夺主，打破用户浏览的沉浸感。所以标注虽然种类繁多，但需要按照体量，在有限样式中增加，保证信息的有序性和一致性提升设计师营销谈单效率设计策略：分层增加场景互动性，增加访问深度谈单成功的前提是用户充分了解方案，全景图工具提供在单间商品内，多件商品之间，多个风格间和多个方案间等多个维度提供互动形式, 提高用户跟场景方案的互动，增加了对方案的整体访问深度。用户可以更了解商品细节，同时有更多对比选择余地，方便快速决策；设计师可以纵向增加方案丰富程度，提高谈单成交可能性。提升产品框架可拓展性和品质感设计思路：细分用户行为场景，整合场景诉求点随着功能的不断增加，现有高权益版本含功能 30+个，如何提高框架的可拓展性，在界面上合理地布局，需要分场景来分析前置条件。定位场景跟浏览场景互斥，当用户将注意力放在查看方案的时候，是顾不上看功能列表的。因此将“看方案”和“找功能”的场景区分开，共用同一块区域，从而优化信息排布。但同时“用功能”的场景要求所见即所得，需要在操作功能开关的时候，及时浏览到是否在界面上生效，要求场景和功能能同时被用户关注到。以上条件决定了界面特征：在主界面「看方案」，尽量减少操作按钮占用界面的空间，让用户有足够的空间沉浸浏览方案内容，所以需要制定一定规则对现有功能进行整合收纳，同时为后续可能增加功能留出拓展空间。功能列表可以遮盖界面，因为不会同时看方案，但是因为部分功能需要及时预览生效结果，所以遮盖区域需要限制，不能是全屏。1. 框架拓展性提升-功能分类整合收纳同类功能，如热点开关，放在下级菜单中进行统一管理根据频率决定分区，将高频按钮外露，低频使用的功能在「工具箱」中收起；工具箱在有限区域内可滑屏查看。保证商家信息展示优先级2. 风格品质提升-风格探索关键词：未来、空间、延展，借鉴 HMI 设计风格 —— 微型仪表盘、斜切角动态效果 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。结语全景图去年也在展厅等细分领域得到了商业化的落地。我们在设计的时候也会结合更多的因素进行考量，比如不同于家居空间的小巧，展厅等商业空间商品的展示需求会更加密集，在这种情况下，如何结合空间特性，借助前端技术进行巧妙的呈现等，也非常值得思考发散。新领域引入了更多不确定因素，在其间探索更需要设计师把握商业和体验的平衡，我们也会针对特定的课题进行更深入的探讨。文中的数据均已做模糊处理, 非真实数据，仅作为演示用途, 对数据呈现不负相应责任。想着手设计 VR 应用？给你这份实操性极强设计指南！编者按：虚拟现实类的APP 要怎么设计？阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源：优设网原文地址：https://www.uisdc.com/vr-tool-design
颜色 场景 对比度 我们在贝壳新装修业务的设计中，针对“投影”这一特殊情境进行了一系列场景化体验设计的实践。当初次面对这一特殊场景的设计时，真的是瞬间头皮发麻，不知道从何下手。因为投影场景比较特殊，业界内也少有参考，需要我们从 0 到 1，探索出一套严谨、合理的设计规范。那么，设计师怎么才能做好这类创新场景的体验设计呢？这需要我们深入线下考察真实的情境，洞察使用者的情况（人）、周围的环境（地）、使用者办事的流程、以及行为的动线（事）等。只有透析线下场景，接地气的解决使用者痛点，才能打造出真正满足需求的体验。图 1 场景化体验三要素为什么要做投影场景设计？说到“无线投影场景”，大家应该都不陌生。没错，就是会议室里播放“劈劈踢”的无线投屏场景。首先来明确一下设计要面临的挑战点：使用场景是什么样的？使用者是谁？现存问题是什么？1. 使用场景是怎样的？在贝壳新装修的业务中，有一个核心使用场景：装修管家要定期向管理者汇报装修工地的进展和问题。他们需要在会议室里，把 PC 中台系统的数据管理界面，通过无线投影呈现在幕布上，装修管家边看边向管理者汇报。图 2 投影设计核心使用场景2. 使用者是谁？业务管理者与装修管家就是这一场景的使用者。装修管家在整个装修流程中负责对工长、设计师、主材厂家等团队人员的协调工作，确保项目进度的正常进行，以及定期巡查工地现场，上报工程进度及现场问题。业务管理者主要负责管理管家、制定施工管理流程，对于装修过程中出现的各类问题提供解决方案。管家需要通过幕布上的内容呈现，突出重点，提高效率，准确且又快速的完成汇报。管理者需要通过观看投影幕布，再结合管家口述的汇报内容，快速的抓住重点，并能直观的总览整体情况。图 3 管家/管理者诉求3. 现存问题是什么？图 4 改版前投影展示效果上面这张配图，就是在会议过程中记录下来的投屏效果。大家可以明显的看出很多问题，比如：字号偏小：在投影场景下，由于用户的观看距离和屏幕尺寸都被大幅放大，导致文字视觉效果偏小，PC 中台系统常用的 14 号字不再适用。颜色看不清：由于无线投影仪会损失一部分清晰度，所以对颜色的识别度较低。灰度文字看不清，导致文字层级区分失效；背景色看不清，导致界面分区设计失效；斑马行看不清，导致 table 信息定位困难。界面信息冗杂：对管家来说，无法快速找到正在汇报的施工单、汇报重点信息在 table 中不突出；对管理者来说，不知道应该关注哪些工地、缺乏数据总览。因此，基于装修管家向管理者汇报的使用场景，结合使用者的特点和痛点、以及现存的问题，我们展开本次投影场景的设计研究，从实际场景出发，来解决使用问题。致力于为使用者提供看的清晰、看的高效的使用体验。如何解决这些问题？我们在 PC 中台系统中，根据实际使用需求和投影场景特点，定制设计了一个新的页面，同时满足投影和 PC 的使用。并建立了一套匹配该场景的新规范，为后续此类场景的设计提供依据。针对“字号偏小、颜色看不清”的问题，我们在表现层中进行了设计规范的探索。针对“界面信息冗余”的问题，我们从结构层和框架层梳理了界面的信息结构，既能符合管家的汇报逻辑，实现汇报提效。也能令管理者快速的了解汇报内容，并抓住重点、实现信息总览。我们从字号、颜色、信息架构三个方面进行具体介绍。图 5 解决现存问题的 3 个优化方向1. 字号我们在为电脑和手机外的电子信息载体做设计时，可能会经常面临无案例可参考的局面。这个时候我们可以跳出常规思维，想一想在这个场景下最常用的产品是什么。即使它不是常规的互联网产品，同样也能为我们提供参考。切入点经过一波调研，投影场景下字号的定义，以投影场景中的成熟产品 PowerPoint 为切入点，我们找到了投影最小字号的计算公式。图 6 投影场景最小字号计算公式当我最初看到这个公式时，也非常迷惑，不知道该如何使用，因此先去尝试理解它的原理。就像下面的图片表示的一样，投影最小字号等于电脑端常用字号与会议室的观看比例、电脑观看比例、显示器大小比例几个参数的乘积。图 7 计算公式原理其中，显示器屏幕系数、投影幕布屏幕系数可以参考下表：图 8 系数参考表数据测量在确定了公式后，我们进行相应的数据的测量。首先，测得“会议厅长”的数据为 7 米图 9 会议厅长数据测量测得眼睛距离电脑显示器的“观察距离”为 0.5 米图 10 观察距离数据测量其次，调查明确了“投影幕布尺寸”为 120 英寸、“显示器尺寸”为 14 英寸。然后，根据“投影幕布比例 4：3”、“显示器屏幕比例 16：9”的比例关系，对照上文屏幕系数参考表，得到“投影幕布屏幕系数”为 1、“显示器屏幕系数为 0.79”。最后，我们再将测量的数据代入公式计算。图 11 数据代入公式计算结论在电脑显示器尺寸 14 英寸 16：9、投影幕布尺寸 120 英寸 4：3 的情况下：会议室厅长为 6 米时，投影最小字号为 16px；会议室厅长为 7 米时，投影最小字号为 18px；会议室厅长为 8 米时，投影最小字号为 20px；在这要里特别注意的是，上述公式推导出来的理论值是最小字号，这并不代表我们在最小字号以上可以无限放大。在保证能看清内容的情况下，字号的选择以较小为优，以保持克制的原则。2. 颜色要解决投影场景下颜色看不清的问题，我首先思考这样两个点：满足什么条件的颜色才能被看清？看清与看不清的边界在哪里？有了能看清的范围，明确了看清与看不清的边界后，我们如何选择使用的颜色？概括来讲就是两个问题：如何检验颜色的可读性？如何定义颜色的值？带着这两个问题，我们继续进行下一步的探索研究。如何检验颜色的可读性「WCAG 标准」WCAG（Web Content Accessibility Guidelines ）内容无障碍指南，定义了如何使残疾人士更方便地使用 Web 内容的方法，遵循这些建议也可让普通用户更容易访问辨别看到的内容。该标准发布自 W3C（万维网联盟）。W3C 是 Web 技术领域最具权威和影响力的国际中立技术标准机构，发布过 200 多项 Web 技术标准和实施指南，一直指导着 Web 领域的发展。图 12 WCAG 标准Web Content Accessibility Guidelines (WCAG) 2.0 中有明确指出：AAA 级别中：普通文本与背景色要符合至少 7:1 的对比度。AA 级别中：普通文本与背景色要符合至少 4.5:1 的对比度。WCAG 标准则可作为检验文字颜色可读性的依据。我们使用的文本颜色与背景色之间的对比度，只要满足上述 WCAG 标准的建议，就能确保被清晰识别。那么问题来了：如何得到对比度值呢？「WebAIM 工具」今天跟大家推荐一个能得到文本与背景色对比度值的小工具：WebAIM。百度搜索：color contrast。第一条就可以找到。图 13 百度搜索 color contrast使用这个小工具很简单，在 “Foreground Color(前景色)” 中输入文字颜色，“Background Color(背景色)”中输入背景色，即可在 “Contrast Ratio”中得到对比度值。图 14 小工具 WebAIM通过这个工具得到的“对比度”值，再参照 WCAG 标准，即可判断文字颜色能否被看清。「结论」通过上述 WCAG 标准，我们得知，普通 PC/移动端产品设计中：主要文本与背景色对比度要至少达到 7:1 AAA 级别对比度；次要文本与背景色对比度要至少达到 4.5:1 AA 级别对比度；而在投影场景设计中，情况又有所不同。无线投影仪损失一定的清晰度，造成对颜色的识别度较低，且投影场景设计的字号已由 14 调整至 18。针对投影场景的特殊情况，设计团队参考 WCAG 标准，并反复的进行了尝试，得出如下结论：投影场景产品设计中：正文文本、标题和背景色之间应保持在 7：1 以上的 AAA 级对比度。次文本、辅助色文本与背景色之间应保持在 3：1 以上的 AA 级对比度。界面分区的灰色色块、背景色、tab 色应保持 1.1：1 以上的对比度。因此，通过上述检验文本可读性的结论，再结合 webAIM 小工具得到的对比度值，如此就解决了如何检验文本可读性的问题。如何定义颜色的值「色彩模式」一直以来，设计师们常用的颜色以 RGB 模式，十六进制颜色码为主。但大家有没有想过，十六进制颜色码，在调整颜色时是没有预期的，老司机们也难以通过“#FFB6C1”这几个字母和数字的组合，辨别出它究竟是个什么颜色。而且还很难记忆。图 15 RGB 模式/十六进制颜色码因此，我们弃用 RGB 模式，而采用 HSB 色彩模型进行颜色的定义。图 16 HSB 色彩模型H：色度用于调整颜色，范围在 0-360之间。S：饱和度是指颜色的强度或纯度，范围在 0%～100%之间。B：亮度是颜色的明暗程度，范围在 0%～100%之间。该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队之间的沟通。「定义颜色」因为黑色系文字颜色 H 和 S 的值都为 0，我们通过 B 值来选择需要的颜色。将 B 值由 0-90 的 10 个代表颜色依次列出，根据前文所述的文字颜色检验标准，B 值 0-50 是满足对比度要求可用的，而 B 值 60-90 的则不可用。图 17 颜色枚举B 值 0-50 的颜色中，B 值为 0 的被首先弃用，B 值为 0 的颜色即纯黑色。自然界中几乎没有纯黑颜色的东西，因此在设计中使用这种颜色给人的感觉不真实，视觉上也太亮。因此，我们选择 B10 的颜色作为主文本色，用于版块标题、tab 名称、表格文字等主要内容。为了保持对比和文本层级，次文本色，跳过 B20 的颜色，选择 B30 的颜色，用于提示、面包屑等辅助文字信息。同理，B50 的颜色，则用于占位文本色、失效色。图 18 颜色选择3. 信息架构在解决了表现层看不清的问题后，这一部分，我们结合实际需求，从框架层、结构层来解决界面信息架构的优化问题，并进行了优化池的梳理：图 19 优化池梳理「最终效果展示」优化前：图 20 优化前效果图优化后：增加了数据指标总览图 21 优化后-数据指标总览按照管家汇报内容进行信息分区划分图 22 优化后-信息分区划分将列表信息按照重要程度进行排序、使用红黄灯标签聚焦重点工地图 23 优化后-红黄灯聚焦重点工地优化后的设计，既符合管家的汇报逻辑，又满足了管理者的关注重点，同时也彻底解决了看不清的问题。总结在实际工作中，我们不止一次面对这种定制化、针对性的场景体验设计需求，除了投影场景的设计外，在面向老龄用户群体进行包容性设计、以及特殊智能硬件设计的时候，以上研究也具有借鉴意义。场景化体验设计研究给我们的启发在于：要想让设计更好的服务于业务、产品、助力问题的解决，必须深入了解实际情境、真正的去关心使用者，并且不断进行尝试、研究和探索。滴滴设计专家：如何把场景化融入到产品设计中？场景化已是耳熟能详的词，主要说在特定时刻，基于特定使用情景和用户特性而进行的定制化设计。阅读文章 > 参考文献：杨臻《PPT 要你好看》欢迎关注作者微信公众号：「贝壳KEDC」本篇来源：优设网原文地址：https://www.uisdc.com/scenario-experience-design
弹性 场景 弹簧 动效是设计师的一个主要发力点，界面里加入动效，可以增加趣味性和引导性。从业务层面来看，设计师首先要积累这方面的技能经验，到了实际项目中才有发挥的空间，较大程度地给业务赋能。所以，我结合常用的界面动效场景，输出了不少练习作品，对一些细节技巧有点感悟，和大家分享下。大纲如下：弹簧原则有质感的形变动效有节奏感的缓动曲线符合生活场景错位运动打造层次感图形变化，路径重组一些动效练习弹簧原则我们生活中的弹簧，一边固定，另一边用手拉伸后放开，它会经历多次来回弹动后才静止。这种运动过程可以延伸到我们的动效设计中，弹动次数不宜太多，容易造成反馈不及时的问题。我一般设置三次弹动，想了些口诀：上下上、大小大。比如一个元素缩放比例从 0%到 100%，我们可以看下常规运动和弹性运动的对比。果然，模拟的弹簧弹性运动更自然舒适。有质感的形变动效弹性运动离不开生活场景，一个柔软的小球，下落碰到地面会产生挤压，弹起时候会产生拉伸，看起来很 Q 弹。当我看到这个运动时，动效思维瞬间发散开了。比如工具栏的图标，常规想法可能就是元素在中心点从小到大进行弹性运动。不过，我们利用小球形变运动原理，可以做出一些差异化的设计，可以看下对比。个人比较喜欢形变的弹性运动，更耐看。有节奏感的缓动曲线循环的加载运动，使用普通缓动曲线（逐渐加快逐渐变慢）会稍微有点呆板，这时候我们可以使用强调型的缓动曲线（快速加快逐渐变慢），可以看下对比。符合生活场景动效结合生活场景，可以设计出一些有创意性的动画。大拇指点赞，我们习惯先收起大拇指，然后再点赞；有个细节，我们手也是会跟着运动的。结合这个运动过程设计点赞动效，我们再加一点修饰来加强点赞感知，俏皮的效果就出来了。错位运动打造层次感为了丰富动画效果和层次感，我常用的技巧就是元素错位运动，可以是方向的错位，也可以是时间上的错位。比如金山知识库官网的头图动效，就有运用到方向错位原则，元素朝不同方向运动，营造空间纵深感。图形变化，路径重组图形变化动效在界面中也是可以用到的，路径重组就是我运用的一个方法。难点在于元素的连贯性和流畅性，多练就好了，看下效果。一些动效练习动手能力对于设计师来说是很重要的，可以学习技能、创意点、细节处理等，才能更好更快地运用到业务上。近期我输出了一些 UI 动效练习，也尝试了断线图标的设计风格，看看吧。总结以上就是我在动效设计中常运用到的小技巧和相关练习作品，在思维和技能上真的成长了很多。不过，动效方面还有很大的提升空间，继续学习去了！比Lottie还好用！腾讯新晋免费动效设计神器 PAG在终端 APP 中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/6-dynamic-effect-skills
科技 风格 场景 各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。整个合辑一共有 10 篇文章，分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章，详细的讲一讲可视化大屏设计的知识点。往期回顾：超全面的数据可视化设计指南：字体篇前言读者朋友们大家好呀！阅读文章 > 超全面的数据可视化设计指南：设备篇各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。阅读文章 > 风格篇主要包含：常用风格 > 风格解析 > 风格选择 > 风格应用。本篇文章将会从风格分类入手，进行风格解析，总结可视化设计的风格，选择风格并应用到场景，教大家如何选择合适的风格应用到商业可视化项目中。画面中的动效 GIF 图会比较大，请大家耐心等候加载～总结了商业项目中遇到的一些可视化案例以及科幻可视化风格，大体的将其分为三个大类：传统风格、HUD 风格、FUI 风格。传统酷炫风格传统狭义上的数据可视化, 更多是纯图形去代表数据，通过图形去展示数据，直观的展示所需要表现的指标。数据可视化也有很多分类, 不过也许你也懒得了解了。比如，网站后台分析，可以说是可视化分析报表类的，例如百度统计，谷歌统计等等；比如，面对 B 端后台的数据可视化，国内做的最好的无非就是 antdesign，element；我们此处说的是基于 G 端的数据可视化大屏，G 端数据可视化从本质上来说是注重直接解决问题，通过直观的展示数据图表去了解各个指标的详细数值；也有甚者比较注重视觉效果，要酷炫，心理学家说, 人脑 70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。国内传统可视化对于此处的接受程度确实不一样。B 端和 G 端的用户，对于可视化风格的接受程度确实是不太一样的，B 端对于前沿技术以及可视化表现会有一定的接受能力，但是 G 端更多注重于界面酷炫，功能反而不是很重要了，这多少有点本末倒置的感觉。在传统可视化面前，页面的杂糅程度较强，彷佛是由一块块图表堆砌而成，比较注重色彩的运用，多色搭配，色彩一般具有特质。一般大多数可视化可以看到共同的点就是：配色/布局/构图，机械而又重复，彷佛一个流水线生产出来的。当然，现如今新基建乃是主流，人群对可视化大屏的认知和审美也在逐渐提升，设计师在以后的工作中还需要取长补短，多吸收一些好的东西去丰富我们具有中国特色的数据可视化大屏设计。HUD 风格平视显示器(Head Up Display)，以下简称 HUD，是运用在航空器的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要要的重要资讯。平视显示器最早出现在军用飞机上，降低飞行员需要低头查看仪表的频率，避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。因为 HUD 的方便性以及能够提高飞行安全，民航机也纷纷跟进安装，汽车也开始安装，在一些游戏用户界面，很多地方都会采用 HUD 的风格，比如射击类，格斗类，动作类游戏等等（赛博朋克，堡垒之夜，绝地求生）。在设计的细节当中使用大量的图形元素，并辅以一定的装饰元素，主要以点线为主装饰，排版版式参考价值较强。HUD 相比较于传统和 FUI 来说，更贴合我们的日常设计，对于图形的展示也更加的有意义，所以透析 HUD 风格，对于提升可视化设计水平有很大的帮助。FUI 风格相对于当前流行的扁平化设计，FUI 可谓是在 Ul 设计中独树一帜，设计风格十分鲜明，极具未来感和科技感。FUI 是一个非常有趣的 Ul 设计领域，是我们在日常现实生活之中天法探索的用户界面设计方式。在我们的日常工作中，通常日常设计很难有机会为宇宙飞船、时间旅行设备，或者感知型人工智能和外星人使用的用户界面做设计。FUI 使设计师有机会去突破现有的用户体验和用户界面的限制，探索一个新的领域。通过虚幻界面设计我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用，地图可以采用全息投影技术、人与智能硬件的环境交互等等。虚幻界面设计甚至可以是新的发明，它们可以作为一种概念的验证它们可以启发我们，提出问题，探索什么可行，什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样，虚幻用户界面可以激励人们为未来创造技术。FUI 的图形装饰元素可以说是极其丰富，形式感很强。在设计的细节当中使用大量的“异形”的图形元素，并辅以一定的装饰元素，但是一定程度上对于设计中繁琐的需求，需求层次上寻找设计灵感没有太多帮助。常用在科幻电影以及概念游戏等领域，落地较难。升华：如何培养出自己的可视化设计风格如何培养和完善自己的可视化设计风格呢？其实这个问题有点狭隘，不同客户不同使用场景我们可能风格都会不太一样，但是唯一我们不会变的是我们对于组件图表的理解，图表图形的展示形式。传统风格：多种色彩FUI 风格：科技图形HUD 风格：版式排版一个合格的可视化设计师，对于任何可以参考的页面，都可以迅速领略到可以应用的部分页面和展示形式，多吸收知识，提升自己，这就是取其精华，去其糟粕的正确解答吧！所以要将现有风格结合，完善设计理念，提升视觉技法，这才是当下比较重要的。最近由于工作中的一个项目，对自己充满了怀疑，究竟什么叫科技感？不同的应用场景，科技感是否还依旧有效？同展示条件下不同应用场景，又会有什么样的差异？究竟是什么样子的设计，才能被“甲方爸爸”认定为科技感十足，并且很酷炫呢？从酷炫科技感出发，总结了以下四个方面去解析科技感风格。科技感的界面有哪些特征？同展示条件下不同应用场景，又会有什么样的差异？三维的表现形式，是否真的跟科技感成正比？面对段落文本需求，列表需求等如何把页面做出科技感？1. 科技感的界面有哪些特征？相信很多可视化设计师听到最多的一句话：要酷炫，要科技感！每每听到这句话我都会变得非常暴躁。究竟是酷炫科技感代表可视化？还是数据可视才是可视化的内核？每每遇到这种令人糟心的问题，我想的是如何通过自己的专业知识去解释，可是我发现根本解释不清楚，也无法令甲方客户信服，甚至和同为乙方的总包也无法达成统一战线。那么我们应该如何去做呢，又应该如何去解释科技感这个抽象的概念呢？配色提到科技感色系一般我们想到的就是蓝色系（科技蓝），但是很多人可能走进了一个误区，科技感的专属色彩并不是只有蓝色，而且一些蓝色确实让我们有审美疲劳的感觉。如图，就是我们比较常见的传统可视化设计，一眼看去满屏都是蓝色，具有中国特色的蓝色科技感。正如所有人都公认的党建题材为红色加黄色，那么科技感真的只有蓝色专属吗？党建题材都是红色专属吗？由此可见，红色并不是党建题材的专属色彩，存在即合理，也并没有说党建可视化一定要做成红色的。制约的因素有很多：项目背景，项目需求，设计提案，专业认知等等，可视化大屏归根结底还是做的是服务设计，因此服务好客户，得到客户的认可，就能体现设计的价值。但是在设计稿中可以发现，界面运用到了一些党建色彩的元素，也是通过这种方式去展示，这也是设计师需要注意的一点。传统科技蓝风格可视化其他科技蓝风格可视化橘色科技感风格可视化由此我们可以推断，配色是塑造科技感界面的一个比较重要的因素。色彩的选择需要根据实际所运用到的场景，比如安全行业，蓝绿色会比较好一点；比如公安行业，传统蓝色就比较合适；比如卫星地图，用蓝色就不合适；根据不同的业务范畴以及不同的应用场景去确定配色，这才是我们要做的。蓝色并不是科技感的专有属性，任何一种颜色都是可以塑造科技感的感觉的。比如适合用绿色的场景做的界面，没有做好看，那只能怪自己学艺不精，跟配色无关。不排斥蓝色，但是讨厌到处都是用蓝色，上来就是用蓝色。背景说到背景这是一个影响科技感非常重要的因素，一张超神比比皆是，一张超鬼也是随处可见，究竟什么样的背景才是一个优秀的可视化界面所具备的？不是画面发光，有闪光点，宇宙或者银河那种图；也不是科技点线，带渐变的线条（混合工具做出来的那种）看起来就特别复杂；也不是那种亮度超过画面任何一个元素的图。科技感的背景所起到的作用应该是衬托画面，而不是在画面中比较跳，抢视觉，一大坨发光或者复杂的图形，只会起到反作用。一个好的背景一定是不影响视觉的同时，衬托画面和主视觉，如果整个页面分黑白灰三层，那么背景一定是黑的那一层，这样的画面效果才会好。图形图形应该是以上指标中，最令人可以接受对科技感风格诠释的一种，科技感的图形到底有哪些特征，我们又该如何去做呢？通过以上案例我们可以发现，所谓图形表现科技感，最大的特征就是点线面应用的多元化，通过一种或者多种规律将点线面组合起来，线条粗细长短不一，点大小不等。在使用图形进行点缀搭配时，切不可过于花哨，从而抢了主要内容的风头。不规则图形，点线装饰，色彩，外发光，都是图形诠释科技感的方式。此处可能会出现一些三维样式的图形，特殊的视角以及不常见的设计都会增加科技感的元素，但是也不是所有的三维都可以比二维更有科技感的。我最近做的就是甲方客户一直觉得：三维元素太少了，科技感不够。我就纳闷了，到底什么才是科技感？难道科技感只能用三维的来表示了？只能说一定条件下，三维是优于二维展示的，但这也不是绝对的。如果你的场景主视觉本身就是二维范畴的，何必要要求组件三维展示。下图的二维科技感表现上肯定是超过三维地球的，至少我是这么认为的。动效动效应该是最能体现科技感的方式了，通过动态演示组件，通过动效展示界面，远远比静态页面要合理的多。动效主要是通过：位移、旋转、透明度（闪烁）、缩放等方式去制作，形成独特的动画节奏。最常用的科技动画：粒子动画，线条动画，辉光，剪切路径，偏移字符等等。可以发现科技感动效一般都伴随着极快的闪烁动画，动画的节奏也是比较偏快，再通过出现动画，字符偏移，剪切路径等演示组件的形成过程。2. 同展示条件下不同应用场景，会有怎样的差异？可能大家没有遇到过这种情况，比如在三维建筑可视化中，科技感本身就依赖于场景的表现，但是不知道大家有没有试过，将三维建筑可视化换成二维 GIS 之后，我们如何去使画面表现的更具科技感呢？图一，图二，图三分别就是替换不同的场景，那么我们来看看这些场景为什么不适合原本的之前的科技感风格呢，我们一起思考一下~以上三张图可以看出，图一的飞机可视化是画面的原稿，后两张是在同一种设计面板，替换了不用的主视觉场景，由此可以看出不同主视觉场景可能对应不同的风格 UI 组件，没有通用的组件，如果想完美表达一些面板组件，那么需要取设计不同风格的主视觉场景才可以。大家可能会觉得科技感只针对于一些特殊的场景，或者说是深色场景，比如一些实景地图和卫星地图又该如何去表现科技感的元素呢？那么如果是浅色可视化我们又该如何去做科技感呢？科技感风格应用于不同的场景，那么表现科技感的方式也是有很大的不同的。3. 三维的表现形式，是否真的跟科技感提升成正比？其实这本身就是一个伪命题，三维表现对画面的冲击力是非常强的，对于画面视觉效果的提升有很大的帮助。不过是否所有的三维就是最合适的呢，这个也确实有待商榷。不过能肯定的是，一定程度上，三维一定会比二维更加具有冲击，更加具有科技感。首先必须要确定的是，此处三维一定是科技感点线组成或者说是线描类型的三维主体，而不是实景以及仿真的主体，当然并不是绝对的，此处针对大多数场景下。可以通过以上图片看出，科技感一定伴随的是大量的点线装饰，画面主体一定是最突出的地方。而不是有时候遇到的是：GIS 地图就是很普通的样式，可编辑性不是很强，样式也比较老旧，对设计就会造成大量的困扰。在主视觉没有完美表现的时候，就不要强求说把两边去做好看，主视觉不好看，那么图表做的特别华丽也只是让主视觉更掉分。其实最正确的表现就是二维表现加上三维场景展示，两者相辅相成，对于画面的展示才是最好的。通过下面这组案例可以发现，二维表现加上三维场景才是最优解。4. 面对段落文本列表需求时如何把页面做出科技感？很多同学对于文字需求如何制作科技感有很多的疑问，通过最近的作图，总结出四种关于文字排版科技感的展示，总结起来其实就那么几点：装饰，图形，字体，版式，表现形式…其实对于数据可视化设计科技感的研究，不仅需要了解表现层，更需要上升到业务层。一些特定的图形或者装饰，对于画面的丰富程度一定是有帮助的。讲了这么多，不知道对大家理解科技感是否有帮助，如何提升画面科技感，是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中，多多酷炫，多多科技感！！！1. 根据场景-了解展示需求场景是什么？是人物、时间、地点三要素所组成的特定关系。在某某时间（when），某某地点（where），特定类型的用户（who），干了某某事情（what）。因此我们要确定的是，根据这四个“W”去确定整体业务框架的基础构成，这对于设计风格的初步意向确认有着很积极的意义。who：王局长when：领导人会议时where：公安局what：新基建建设 数字化转型事项在领导人会试上，公安局王局长提议通过了关于新基建，数字化转型的各种措施。面对这一场景，有以下几个问题。受众是谁？需要干什么事情？谁去干？数字化转型怎么做？怎么实现？需要用到的技术？展示风格？重功能？还是重展示？在有了这些的前提下，对于我们设计风格的选择就有了很强的指导意义，比如王局长比较喜欢多色搭配，科技感强的风格，主要为了配合展示汇报，那么就可以通过这一些需求，初步制定风格为效果酷炫的展示类大屏，但是主视觉的展示形式还是要根据其他的具体情况去进一步确认。2. 根据含义-确立设计方向在面对一些特有的项目时，一般客户会给出一些参考术语：“3 个一带”，“2 个方针”，“八大成果”“三山，两水，百林，千田”……面对这种问题，能做的就是理解其包含的真实意义，究竟需要展示哪方面的，了解清楚项目的背景需求，结合客户所说的一些关键字段，剖析以上的内容可以发现，客户通过一些方针和方法，对“山水林田”进行治理，取得了一些阶段性成果。因此展示的内容可以确定为智慧治理，或者智慧生态方向的，然后就可以根据项目背景的内容去选择可以应用的具体的一些方案了。3. 根据需求-明确设计内容因在到了需求分析的阶段，可以根据客户提供的大量的资料和业务需求，去明确的设计方向，究竟是需要展示哪些内容？可以提供的数据有哪些？展示条件（硬件设施）是否具备？想要的效果有哪些？比如客户需要查看到山水林田的各个改进措施的效果，以及改进前后的效果对比。说到这单纯的二维 GIS 和影像已经不太好满足了，那么可以将场景风格定位到三维展示，需要实际 1:1 建模，至于是通过 WEBGL，UE，UNITY 就看各自的团队擅长的方向了。场景大体风格确定，那么展示面板需求根据场景去搭建就可以了，这样一个完整的风格选择过程就算初步走通了，具体的验证环节，可以在一次次会议中再去进行交流和修改即可。二维 GIS（深浅）、卫星影像优点展示容易，风格切换皮肤多，可编辑性高，开发难度低，地图资源较多，适合快速搭建可视化大屏模版，开 源内容较多，前端开发直接调用样式即可。缺点展示形式较普通，地图风格样式不出彩，设计效果也会打很多折扣，很难与同行拉开差距。难点开发过程中可能需要基于高德 API 以及一些平台，对封装地图进行二次开发，没有 GIS 开发经验的前端，会比较困难。网址https://lbs.amap.com/product/mapstyle#/ Mapbox，高德 API，百度 API，超图，天地图等等。以高德 API 为例矢量地图、省市区块优点展示灵活，可下载 svg 矢量区块，并可下载 json 文件直接交付开发，可下钻到县级，可编辑性高，一般会结合二维 GIS 来展示，有插件可以直接绘制全国地图。缺点不够立体，可选样式比较少，画面主视觉容易空洞导致画面效果不强。难点开发对于设计图的一些效果还原比较困难，例如发光，渐变等等。只能做一些比较基础属性的修改，对于效果还原可能达不到 80%以上。网址http://datav.aliyun.com/tools/atlas/以 DATAV 地图下载器为例矢量地图模型、省市区块优点展示效果好，三维场景，有立体效果，材质贴图不同效果会完全不一样，可编辑性较强，相比较二维更推荐这种表现形式。缺点三维范畴，不会三维知识的小伙伴会比较难，此处会涉及到三维软件合并挤压，展 UV，漫射贴图，QGIS 制作高度贴图，PS 制作法线贴图等等知识点。难点对于不懂三维的小伙伴比较困难，涉及知识点较多，容易一知半解。教程https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA （原作者已授权）3D 地图建模及贴图的制作获取方法三维模型、城市建模优点展示形式新颖，展示效果非常好，三维表现往往让人耳目一新，对于可视化的展示可以说是所见即所得，深得客户喜爱。缺点开发难度高，专业性人才比较少，懂三维的设计也是非常的少，对于三维知识以及引擎开发知识需要比较熟悉才行。难点人才稀缺，入门难，做好更难，教程自学难度有点大，例如 cityengine 程序化建模，houdini 程序化建模等等。教程https://space.bilibili.com/21247145?from=search&seid=10582171815506234319cityengine 程序化建模知识图谱、数据中台等优点主视觉效果强，特殊场景的处理能够很完美的讲清逻辑，对于图形化的理解有很强的意义。缺点逻辑复杂，难懂，比较抽象，专业难度高，对业务理解能力需要很强。难点逻辑处理比较难，设计效果比较难以想象，设计容易偏离主题，比如数据中台，是一个非常虚幻的东西，很难讲清楚处理逻辑和过程。网址https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html以知识图谱为例知识点总结可视化风格三大分类以及对于图形的应用（传统、HUD、FUI）；如何培养自己的数据可视化设计风格（色彩+图形+板式）；影响科技感风格的四大影响因素（配色，图形，背景，动效）；设计风格的选择以及确定思路（根据场景、含义、需求）；可视化风格的应用以及拓展（各种主视觉的应用优缺难点）。讲了这么多，不知道对大家理解科技感是否有帮助，如何提升画面科技感，是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中，多多酷炫，多多科技感！！！不知道大家有没有一种错觉，突然有一段时间，某个时候发现自己突然不会做设计了，啥也想不明白了，莫名的有点浮躁，做什么都不能专心。其实很简单，总的来说就是，你即将突破现有的设计水准，如果能想明白，解决掉问题，你的审美以及设计水平都会有很大的进步。这就是别人口中的，突然就会了，知道怎么做了，其实无非就是积累够了，需要升入下一个等级了~本篇来源：优设网原文地址：https://www.uisdc.com/visual-design-style
干货 场景 合集 大家好，2022 年第3波设计干货合集来了！这一波的设计干货算是比较有意思的，可以直接在 Figma 当中编辑生成 3D 场景插画的工具，潮流范十足的角色构建工具，让色彩系统更容易编辑和运用的神器，还有特别好玩的极简主义插画编辑工具，具体的，请往下看：1、在 Figma 当中直接生成3D场景https://drawkit.com/3d-builder使用这个名为 Drawkit 3D builder 的工具， 你可以在 Figma 当中快速匹配并构建 3D 场景。这个插件当中包含 6 个不同类型的元素，400 多个不同的场景图像，并且每个场景和元素都可以进行编辑，你可以通过这种多样的排列组合，来实现完全符合你的需求的独特的 3D 场景。2、功能超多的 mac 截图和修图工具Shottrhttps://shottr.cc/这是一个 macOS 上的截图工具，Shottr 可以说是一个进阶的截图工具，除了进行像素级的截图控制之外，它还能够将截图中特定的部分去掉，多种多样的标记方式，内置像素标尺，还能放大部分元素，可以说是非常全能了。值得一提的是，Shottr 还专门针对 M1芯片版本的 Mac 进行了优化，可以安心安装！3、潮流风 3D 场景角色构建工具https://homies.craftwork.design/这是 3D 角色场景插画构建工具，其中内置 78 个物品，10个独特角色，10个矢量背景和15个场景模板，你需要做的是从这些当中选取角色，修改场景，自由地组合成你想要的样子。这项插画场景构建工具是付费的，不过有免费版，免费版包含1个角色、5 个物品 和一个背景，但是你可以使用这些基础的元素构建出一整个故事场景！具体可以戳进去看看。4、风格独特制作精细的图标合集https://flat-icons.com/bundle/Flat Icons Lifetime Bundle 2.0 是一套包含接近3万个图标的大合集，这套图标合集是收费的——但是有免费版本供你下载。这项图标服务有意思的地方在于，它内置了 23 种不同的风格样式，非常精美，有专门的 Web 应用，也有 Figma 和 XD 插件，付费之后，还会享受后续的持续更新。5、超方便的 Figma 色彩模式编辑插件https://www.token-master.com/当你在 Figma 当中编辑色彩模式的时候，工作量可能会很大，而这个名为 Token Master 的插件可以帮你更快编辑设计系统中的 Design Token，快速创建色彩模式，一键生成深色模式，等等，让你的色彩编辑和管理更加轻松。6、极具视觉张力的弥散渐变生成器https://meshy.uxie.io/和之前推荐过的各种渐变生成工具不一样，这个弥散渐变工具生成的渐变效果是带有漂亮的弥散效果的，你可以选取其中包含的色彩，套用不同的渐变模板，最后可以导出 PNG 格式的高清图片。7、极简主义涂鸦图形编辑器https://minimator.app/这可是一个少见但是足够有趣的图形编辑器了，绝对够极简——你在 Minimator 当中只能绘制互相垂直的直线以及四分之一圆弧，你能使用这3种元素绘制出什么样的图形和插画？这个编辑器直接在浏览器中就能打开，最好使用平板来绘画，想必会非常好玩。8、免费化妆品和包的展示样机这是一套包含 6 个 PSD 文件和图片的样机，主要是用来展示化妆品和奢侈品包这类产品的设计的样机，这个样机素材是完全免费可商用的，具体可以在文章开头和结尾的百度云链接中获取。9、拥有漂亮衬线的优雅字体Austen Aesthetic Serif Font 是一款有着优雅衬线和笔触的英文字体，字体本身的笔触变化就非常的独特，而连笔的笔触则将这种优雅提升到了一个更高的程度。这款免费的字体仅供个人使用，可以在文章开头和结尾的百度云链接中获取。往期干货推荐：第一波！2022年1月精选实用设计干货合集大家好，2022 年第一波设计干货合集来了！阅读文章 > 第二波！2022年1月精选实用设计干货合集大家好，2022 年第2波设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 1月干货第三波100m8yxm 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-1-design-resources-vol3
落霞与孤鹜
表哥
飞翔的企鹅
在路上
张大湿
