氛围 兔年 用户 随着开工响声结束了兔年春节，相信兔年都会给我们带来好运和惊喜，让我们一起来努力和期待吧！在这个移动互联网时代中，相信手机也是伴随我们跨年的物件，而各类应用软件也为我们的兔年春节增添了许多乐趣。作为 UI 设计师，我们通过自己的创意让用户感受到不一样的兔年氛围，下面黑马哥带大家一起回忆一下。通过一些 APP 线上案例分析，看看 UI 设计师是如何营造兔年春节氛围感的。更多氛围感设计案例：如何营造氛围感？来看QQ游戏中心的实战案例！QQ 游戏中心作为服务于 QQ 玩家的平台，致力于为游戏玩家发现好游戏和提供游戏相关服务，如何在为玩家提供好游戏推荐同时，为他们提供好游戏相关服务，是我们需要探寻的设计平衡点。阅读文章 > 一、应用图标小空间里的氛围感应用图标的氛围感是提高用户打开产品的关键，作为春节氛围感的营造来说，是最容易让用户感知到的。在这个方寸内的小空间里面，也是设计师发挥创意脑洞的形式。通过兔年春节发生变化的一些应用软件分析，众多案例都在配色、文案、图形营造等方面进行设计发挥，也有结合 IP 形象装扮和营销活动主题等形式，增强用户对产品的情感化认知。二、顶部视觉区域背景营造作为应用软件的主界面来说，顶部视觉区域也是设计师发挥的一方空间。在氛围感的表现中也是非常利于发挥的，经常在一些节日庆典和主题活动时进行设计表现。结合春节元素和喜感的红色氛围营造，给软件带来了新春情感化，作为兔年春节来说，小兔子的元素也会被充分展现。除了兔子元素以外，也有运用灯笼、烟花、祥云等元素点缀，达到营造背景氛围的目的。三、营造图标设计氛围春节期间在图标设计上面营造氛围感是最为常见的，也最容易吸引用户的关注度。重点在金刚区图标和底部标签栏图标设计进行发挥，结合配色、节日元素和造型等方面进行设计，达到营造氛围的目的。图标风格多样和灵活多变的特性，无论是结合传统文化还是其他多样化表达，都非常利于设计发挥。除了在春节氛围中便于发挥以外，在其他主题活动中也是重点表达的形式。四、异形广告中的氛围和元素异形广告相较于中规中矩的矩形束缚来说融合性更强，更容易让界面上下的内容过度更自然。近些年异形广告穿插在界面中非常普遍，特别是在营造氛围层面效果也是十分突出的。由于特殊造型的设计发挥，便于设计师结合各类元素，营造贴合的界面氛围和强化视觉感。五、氛围浓厚的闪屏广告闪屏广告算是春节期间最常见的表达方式，无论是情感化的闪屏设计，还是结合营销广告表达，这里都是最容易出现在用户视野中的。闪屏广告的主题营造非常多，众多产品都会结合，创意发挥也是层出不穷。六、引导页中的风格氛围化引导页相对来说曝光度会比较低一些，大部分情况还是初次使用或者更新时出现，如果恰逢春节期间发生版本迭代也可以尝试营造氛围。可以在元素造型不变的情况下改变配色风格，也能起到营造氛围的作用。七、弹窗设计的氛围点缀在用户浏览内容或者操作功能时，弹窗可以辅助操作和理解，也可以作为温馨提示或者信息传递等。在春节期间为了渲染氛围，也会结合主题元素进行氛围点缀，带给用户更加情感化的感官体验。八、异形弹窗营造新春氛围在一些营销活动的配合中，弹窗通常会打破边界的束缚，异形弹窗更能吸引用户关注。也能更容易结合主题元素营造氛围感，特殊的造型更利于设计发挥，界面内的融合度也相对较高。通常结合兔子 IP 形象、红包和春节元素等，以质感风和 3D 建模形式表达居多。九、丰富界面背景氛围感丰富整个界面背景相对较少，也有产品会在部分界面或者界面局部卡片等场景中进行表现。氛围感的营造可以带给用户有温度的体验感，也能将春节氛围重点突出。十、沉浸式体验的活动氛围感沉浸式的体验能够吸引用户的参与感，比如春节期间的红包雨，融入到整个界面的设计中，以趣味性的形式满足用户心理。在不隔断与界面之间的联系，降低活动对用户的干扰，进而提高氛围感和参与度。比如高德地图在春节期间设计了放烟花的体验，用户可以在定位的任何地方点击燃放烟花，新添春节的氛围。将这一传统文化搬到了线上云端，也是提高体验度的不错形式。十一、营造氛围的专题页设计春节氛围感在各类营销活动中表现度是最高的，随着近些年新的技术和视觉表现力的提升，在视觉感的强化层面也是十分出色。无论是运用三维化还是插画风，带来的视觉张力都是非常棒的，今年各大产品呈现出来的设计感视觉表现力都非常不错。十二、互动性体验的活动设计随着视觉表现力的提升，提高用户对于活动的参与度要往游戏化和互动性等方面探索。比如抖音在兔年春节期间的活动设计，游戏化的互动体验增加了活动的娱乐性，用户的参与度也是可想而知的。也有通过自定义角色装扮的形式带来互动性的玩法，在氛围感十足的场景中送祝福，无论是娱乐性还是感官体验层面都非常不错。小结本文主要是对春节期间的一些设计案例进行了回忆，体验、分析和总结了一些优秀的设计点，希望可以作为日后灵感的来源。描述属于主观意识，不足之处大家选择性吸收，我们互相进步。本篇来源：优设网原文地址：https://www.uisdc.com/create-festive-atmosphere
人工智能 工具 干货 大家好，这是 2023 年 2 月的第 2 波干货！考虑到今天是情人节，今天的第一个工具是一个可以生成情人节贺卡的人工智能服务，还没想好今天要如何表达爱意的朋友可以先生成一张带有情诗的卡片送给Ta！此外，今天的合集当中还有超好用的像素风插画 APP、人工智能纹理和3D模型生成工具、人工智能工具大合集，还有有帮你集中注意力的效率工具三件套等等。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第一波！2023年2月精选实用设计干货合集大家好，这是 2023 年 2 月的第 1 波干货！阅读文章 > 下面我们具体看看这一期的干货：1、人工智能情人节贺卡生成工具https://venngage.com/tools/valentines-day-card-maker你看，人工智能在关键的时候还能发挥特别的作用。这个服务可以借助人工智能生成情人节贺卡，在 GPT-3 的支持之下，可以生成完全为你定制的情诗和符合你需求的整体设计。动作快一点，现在生成还来得及！2、人工智能工具大全 ToolScouthttps://toolscout.ai/如果你想关注最快最新的人工智能工具，那么 ToolScout 这个网站可以帮你节省相当多的时间，作为一个展示 AI 工具的平台， ToolScout 每天更新最新的 AI 工具，并且他们还致力于为 AI 工具的开发者、合作者和投资者提供连接，如果这里有你所在的团队想要和其中某些 AI 工具的开发者合作，也可以透过 ToolScout 进行沟通。3、iPad 平台复古像素风绘图工具https://resprite.fengeon.com/对于很多插画师而言，在iPad 上画插画已经是相当自然的事情，那么复古有趣的像素画是不是也可以这样呢？Resprite 这个 APP 就是为了解决这个问题而出现的，它不仅能像 Procreate 一样绘制插画（只不过是像素风的），还能制作动画效果，功能齐全！4、人工智能纹理和3D素材生成工具https://www.kaedim3d.com/这个名为 Kaedim 的平台借助机器学习算法，可以自动将 2D 的图片转化为高素质的 3D 素材，并且现在还能根据原本图片生成对应的表面贴图材质，将 3D 建模、表面材质和后期处理过程中最耗时的部分，使用人工智能来解决，让生成内容的速度提高 10 倍，协作内容创作者更快创作，并且降低 3D 内容产出的效率。5、超快速的线上视频和动画创建工具https://jitter.video/Jitter 是一个为动态设计而生的工具，你可以将它理解为动态设计领域的 Figma，它可以轻松为网站、APP、社交媒体等不同场合设计合理的动画和动效。Jitter 本身内置了大量的动画预设，而且加入了从 Figma 引入设计的功能，支持更多导出格式，并且增加了提升了设计效率的功能。此外，Jitter 在 2023 年也向行业内其他设计软件看齐，针对 UI 进行了优化改造，加入了更强的团队协作功能，添加了无限画布、自定义预设等更加深度定制化的功能。6、编辑 Lottie 动画超方便的编辑器https://lottiefiles.com/lottie-editor这是全新的 Lottie 编辑器，哪怕你没有动画设计和编辑的经验，也可以轻松上手，帮你创建和生成动画，添加交互，增删图层，无需下载本地软件，直接在浏览器中就可以进行设计，之后生成的动画可以应用在设计项目之中，也可以直接发布到社交平台上，相当方便。7、帮你集中注意力的效率工具三件套https://lofi-life.vercel.app/（梯子访问）这真的是一个复古又好玩的效率网站，网站的主界面是一组可选的音乐+白噪音，你可以按照你的需求给自己定制白噪音或者背景音乐，右上角有待办事项和番茄时钟，让你沉浸式地工作的同时，更好的管理事务，并且专注处理手头的关键的工作。网站的创建者也正是因为有这样的需求，干脆做了这个网站帮助自己专心写代码。提高3倍效率！能落地的AI绘画&设计系统课来了！如何快速入门AI绘画和AI设计？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/2023-2-design-resources-vol2
思源 黑体 字体 经常做安卓端设计的朋友应该经常被一个问题困扰，那就是思源黑体的行高特别高，而且文字整体偏下。这会导致在 UI 设计软件中使用居中操作后，视觉上总是偏下的。但是这一问题 Adobe 官方一直未曾解决，甚至不认为这是问题。思源黑体和更多黑体字下载：视觉设计师来收！免费商用字体推荐：黑体篇（13款已打包）“黑体”结构清晰、简洁有力的字形风格能使版面显得庄重醒目并富有现代感。阅读文章 > 作为一名从业多年的非著名视觉设计师，这种事情是不能忍的。如下图所示，虽然按钮文本在布局中是居中的，但是因为行高的存在，以及思源黑体文本本身偏下的问题，此时文本整体是偏下的。当前因为硬件平台以及软件适配等原因。不同公司对行高的定义是不同的，有 1.4 倍、1.5 倍，以及一些更复杂的计算方式。而思源黑体因为整体偏下以及原本默认行高偏高，自定义行高后在 figma 和 MasterGo 等设计软件中，字体显示更加离谱，完全失去了平衡。那究竟有什么好的解决方案呢？关于这个问题我跟国内多家设计软件提了建议，但是目前还没有人着手优化。于是便自己寻找各种解决方案，终于功夫不负有心人。让我发现了一款基于思源黑体优化的字体——梦源黑体。此字体为免费开源可商用：https://github.com/Pal3love/dream-han-cjk为啥叫梦源黑体呢？是因为此字体是一位叫做梦回琼华的软件开发工程师在思源黑体可变版的基础上修改的。梦源黑体将可变版思源字体的大量中间字重实例化为传统单字重字体，合并了重叠的曲线轮廓，在保证最大兼容性的前提下，提供更加细腻、丰富的字重选择。此外，本项目修复了思源系列广泛存在的 Adobe 行高过大问题。本系列字体的其他功能（如字形、竖排、kerning、多语言、异体字、曲线精度等）与思源系列保持完全一致，未做任何修改。（引自作者原文： https://zhuanlan.zhihu.com/p/480219182 ）通过下图，我们可以发现在相同字号和行高的前提下，思源黑体、梦源黑体和苹方三款字体的文字布局，苹方始终可以保持居中位置，梦源黑体在一般常用字号大小时表现优异，能够保持居中。在字体过大的时候会出现一点偏下，在使用 64 号字时，上下间距约相差 3px，完全可以满足日常使用了。而思源黑体就显得惨不忍睹了，基本 10 号字以上就会出现明显偏下；既然梦源黑体能够解决思源黑体存在的问题，那么直接替换是不是就可以了呢？理论上是可行的，但是还会存在一些问题，因为梦源黑体的原作者是基于可变版思源黑体来优化的，其字重有 27 个之多。而思源黑体标准版则只有 7 种，从细到粗分别是 ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy；所以要想使用梦源黑体，就需要和标准版的思源黑体字重一一对应，通过对比筛选出其对应关系为：ExtraLight=W1、Light=W6、Normal=W12、Regular=W13、Medium=W17、Bold=W22、Heavy=W27；所以如果你只是想解决字体行高和不居中的问题使用上述字体字重即可，在 UI 设计软件中也可以自定义行高，文本会使用保持上下居中；而笔者作为强迫症，又对梦源黑体进行了如下修改，首先将字体名称和字重从梦源黑体改为了对应的思源黑体及字重。同时针对针对 Android 端中文使用思源黑体，英文使用 Robto 字体，排版时需要来回切换两种字体的问题，将思源黑体中 95 个英文字符替换为了 Roboto 字体。使用修改后的字体你能够得到的效果如下：因为此款字体是基于思源黑体可变版优化的，所以和思源黑体标准版字形和字重有细微差异，请知悉，同时本人已联系原作者，希望不久后基于标准版思源黑体优化的版本能够和大家见面。相信此款字体能够解决广大设计师在工作中的一些困扰，最后向梦源黑体的作者致敬（有条件的朋友可以去 github 给作者点一个免费的小心心）。有需要的小伙伴可以附件下载梦源黑体原版以及经过本人改造过的思源黑体文件。（仅做交流使用，不作任何商业用途）欢迎关注作者微信公众号：「动效研究社」 文件名 如何下载使用 文件大小 提取码 下载来源 思源黑体优化版376.05MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/dream-han-sans-serif
页面 用户 信息 前言在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。有的时候流程和业务都不在话下，但是到了具体的页面设计就会捉襟见肘。如何引导用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。在一二线城市，相信很多人都去过宜家，有媒体统计过：宜家的迷宫式动线设计创造了 60%的冲动购物。宜家的动线设计将用户与各类商品区进行了有效的串联，在刻意设计的路线上，商家填满了各类家用商品，用户在从入口到出口的路上，使高冲动购物率成为了可能。从动线展示图中我们可以看到，一条“清晰明了”的曲线引导用户前进，同时还会提供一些捷径供用户穿梭，这像极了页面中的友好链接，帮助快速抵达目的地。在整个宜家商场的设计中我们可以看到，这条清晰明了但实际不存在的线带给了商家巨大的收益，这个设计表达中，离不开实际存在的悬挂路标、小地图、地面标识、醒目的商品名称、价签和特意设计的商品堆积，当然还有一些消费者手册等。这与我们的页面设计有着异曲同工之妙，将商场的商品陈设和页面中的信息组织放在一起我们可以发现，都在向消费者或用户传递一种建议和方向。所以，在页面设计我更愿意称之为页面框架或者页面信息设计，就是将该页面的内容信息通过一定的框架组织起来，然后呈现出来，实际上就是在与用户沟通交流，使得页面易学易用。有一个成语是“明修栈道，暗渡陈仓”，而我们要做的是“暗修栈道，明渡陈仓”，所谓的栈道就是设计师所搭建的页面框架。经过设计师的合理分析和设计，使用看不见的设计手段和看得见的表现方式，给予用户明确的“提示”，帮助用户迅速的完成任务。往期干货：B端干货！4个章节帮你掌握筛选功能设计面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。阅读文章 > 如何进行页面框架设计前面对页面框架设计有了一定的了解，那么怎样才能设计出好的页面，应该运用什么方法，采用什么流程。在《信息架构-超越 Web 设计》一书中，作者将“如何做”阐述为：设计相应的信息颗粒度和组合方式，为用户创造他们所熟悉的环境。根据日常的工作经历，将“如何做”这个过程分成了以下四个步骤。1. 了解业务在着手进行整体页面设计之前，必要的设计工作就是进行切实的业务分析，了解我们要做什么，为了什么做。在辛向阳的交互设计五要素中强调了，交互设计的对象是行为，他们之间的联系可以概括为：用户在某个场景下通过某种媒介产生行为，最后达成了他的目标。那么如何让用户产生更有利于目标实现的行为，在设计之前先了解一下这些业务要素。① 用户简单来说就是使用我们平台的人。在一些 B 端产品中用户会分很多的角色，比如管理角色和普通角色，每个角色的诉求也是不一样的。管理者：我希望能够看到团队中所有人的工作进度。普通员工：我希望能快速的完成自己的任务。这两种角色的诉求都是用户需求，分析阶段需要做好用户分层，在后面的目标拆解中就可以获得更明确的方向。② 场景对于用户提出的反馈或者意见，要切实考虑应用场景，辨别用户提供的是需求还是方案。比如上个月用户提到一个需求，希望在某某页面中，复制粘贴就可以上传图片，某某平台就是这么做的。接到这个反馈，我的第一反应就是你在“教我做设计？”（开玩笑），首先他的这个方案我们目前是不具备的，然后这个设计确实很方便，但是目前团队没有时间做这个。找到特定的用户聊过之后，他表示当前只能点击或者拖拽上传，截图的文件需要本地保存后才能上传，很不方便。我向她提供了我们目前平台要实施的方案：1、可以直接在描述的富文本中编辑保存；2、可以在下个迭代将要实现的备注中直接粘贴上传附件。听了我的解释后，他表示这两个方案都可以，不需要页面的随意上传了。所以在真实的项目中，要找到真实的需求场景，而不是被用户牵着鼻子走。具体如何去了解我们的用户场景，除了业务或者产品经理的阐述和解释，另外我们在前期进行竞品分析的时候也是不错的时机，因为在相似业务场景中，不同平台之间的表现方式不会出现太大差异，相当于设计思考前置，由方案倒推了需求。不过还是建议以具体业务具体分析为主，毕竟每个公司的工作方式是不同的。③ 目标对于设计师而言，目标就是这次设计的目的是什么、解决什么问题、创造什么价值，利用某些设计策略手段，对未来一段时间内所要达成的预期结果。设计的目标是要依附于业务，忠实于用户。一个平台的每次升级侧重点不一样，但是业务和体验是要同时考虑到的。业务提出了今年我们要在去年的基础上，提升用户满意度 15%那么设计就应该去分析低满意度背后的原因是什么，用户为什么打了低分，这可能会涉及到任务流程、页面布局、组件使用等问题。当我们确定好影响满意度的因素之后，可以对其中一个因素提出设计目标：缩短用户完成某个任务的时间 20%，以此来聚焦用户操作流程的低效问题。设计目标是在了解业务和用户之后所得到的一个共赢产物，也是将抽象的业务信息转化为具体的设计要素的过程。④ 媒介用户产生交互行为的最大媒介就是我们的页面，细化一下颗粒度，就会落到我们每一个页面组件上面。而组件并非是简单的平铺，而是要做的设计目标的指导下，选择合适的组件和表现方式，使用户看到页面时，快速的产生恰当的行为。⑤ 行为在界面中中用户主要的操作动作无外乎：点击、悬浮、滑动、拖拽，应考虑怎样的触发形式能使用户最低成本、最顺畅地完成行为。当然行为并不是孤立存在的，它需要多个动作和媒介，以及视觉行动等共同构成。而如何让用户产生恰当的行为，需要功能信息显性化的设计。2. 组织信息组织信息是页面设计的重要组成部分，我们看到的页面信息都是整齐的，每个整齐的背后又暗含了特殊的组织关系。对于业务分析或者需求文档所得到的业务信息需要设计师进行下一步的精加工，首先要了解当前所处页面的主要功能是什么，其次是明确功能信息并进行相应的分析，获得可以搬运罗列的功能块。《佐藤可士和的超整理术》对信息组织的策略有着非常专业的建议，作者从中提炼出以下处理方式。① 明确信息通过业务了解，明确当前页面将要进行哪些操作或者应该具备哪些功能点。以上图所展示的简单需求为例。从当前页面中我们可以看到，这是一个任务管理的模块页面。在任务管理中，要支持用户创建三类任务，创建结束后还要支持信息的浏览、查找和编辑。而这些信息的来源就是上面我们分析的业务场景，这只是经过整理之后的。② 罗列信息明确了业务信息之后，相对应的我们要将我们页面布局所需要的核心元素剥离出来，比如创建数据，就可以剥离成一个创建按钮。对于刚才的信息我们可以简单的罗列如下：创建 A、创建 B、创建 C、修改、删除、标题、筛选状态、关键词筛选、数据列表③ 导入观点，确定关系确定信息元素之间的关系是为了在页面中更好的划分和取用，方便在后面页面布局中给相关信息找到恰当的位置。以刚才的需求为例，在罗列的过程中大概也能找到信息之间的关系。可以分为三类：操作、筛选和数据展示。如果我们对个别的信息再进行赋予观点，还能出现新的关系。如果从业务使用频率进行观点导入，那么任务 A、B、C 的使用频率依次降低，最后可以确定的优先级关系就是创建 A>B>C。在任务页面中，创建类的操作优先级要明显高于编辑类，所以“创建”>“编辑”。操作和筛选作为数据产生和查找的工具，需要放在更显眼的位置以更容易被发现。以上是对展示页面的简单信息进行的处理，对于一些表单页面我们也可以采用相应的策略。通过信息的属性维度可以大体分类，如果信息量很大，那么信息的层级关系就会展现出来，方便页面布局中采取相对应的设计方式。针对信息的关系，我们可以确定信息的先后顺序、页面位置以及颜色等样式的使用。当然组织信息的最后产物还是虚拟的，我们输出的信息关系无外乎，比如信息组、信息架构、优先级等。组织信息是继了解业务之后的信息处理和清洗的步骤，也是业务场景以及设计目标的应用，可以为后面页面布局提供更有针对性的建议。另外，我们还可以了解一些常规的信息组织方式。④ 常见的组织方式常见的组织方式可以分为精确分类和模糊分类。精确分类将信息分成定义明确和互斥的区域，采取的是客观态度。如果用户通过已知的明确信息，可以迅速的找到相应的位置，并且这种分类方式好维护。字母顺序、时间顺序、地理位置等都属于精确分类。比如 App 中的城市选择，就是采取的字母分类，用户可以根据目标城市的首字母，迅速定位到相应的位置。模糊分类将信息分成不精确定义的种类，采取的是主观态度。受困于人的主观性和分类标准的模糊性，因此很难设计和维护。但是在一些场景中，模糊分类却更重要和有用。主题、任务、受众、隐喻导向等属于模糊分类。上面操作按钮的分类就是采用了任务导向，将按钮分成了创建和编辑两个部分。京东商城的左侧商品分类采用的就是模糊分类。混合方案是在 B 端产品中常见的方式，能灵活的处理页面信息，应对不同用户和信息的场景差异。在 Ant design 的典型页面中，左侧菜单采用了模糊分类（主题），而表格信息采用的是精准分类（时间倒序）。3. 组件选择组件的选择是信息可视化的第一步，是为信息寻找相应容器载体的过程。① 导航导航存在的作用是任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式。常见的导航可分为：全局导航：属于常驻导航，基本平台的每个页面会存在，常见的组件形式有侧边、顶部、弹出式、下拉等。页内导航：根据当前业务场景所配置的导航，常见的组件有页头、Tree 树型控件、锚点、回到顶部、走马灯等。返回导航：常见的组件有面包屑、返回按钮等。友好导航：不在该模块的信息架构规范内，用户可以通过点击跳到其他页面查看，比如操作日志中的超链接。其他导航：常见的有步骤条、分页器等。② 标签标签通常是向用户显示组织系统和导航系统最明显的方式，例如全站导航系统相匹配的文字标签：主页、搜索等。标签分文字标签和图形标签：文字标签涉及到页面中所有功能的文案命名，例如标题、导航、按钮、链接、索引词、提示等，这是用户理解信息最直接的方式，所以文字标签的选择要常见并且易于理解，选择行业中的通用用法。比如在协同工具的领域，一些最主要业务单元的命名，无外乎项目、需求、任务、缺陷、迭代等，即使是新出现的平台，也会默认去遵循这个行业命名。因为在业务的发展过程中，这些标签已经成为了协同领域中相互共识的点，如果为了强差异化，反而会增加用户教育的成本，降低平台的使用效率。图形标签在页面设计中，作为文字标签的补充，会更形象的传达信息。主要应用的地方的是图标。图形的使用也是要易于理解，不要让形式凌驾于功能之上，不能给用户带来思考成本。在 Iconfont 上搜索“返回”，检索的结果都是相似的箭头，即使有设计师会做一些样式调整，但是都离不开箭头这个符号，因为这已经形成了深刻的用户心智。还有图文类的软件，我们可以看到他们上面展示的文字和标签都是相似的，大家都在做一些微调，但是都在遵循最初 Office 给用户形成的符号认知。所以针对新的平台产品，除了调研用户对标签的使用习惯之外，还可以参考竞品的使用现状，这属于行业的隐形共享资源。③ 搜索搜索系统是用户快速寻找信息的工具，搜索系统的使用要根据页面信息的内容量和场景要求进行配置选择。常见的组件可以分为：输入类筛选：输入类筛选需要用户输入一定的文本关键词，筛选出对应的数据；选择类筛选：选择器类筛选可以是单选或者多选，用户点击选择待选项即可；平铺类筛选：平铺类筛选是将所有的待选项铺出来，方便用户直观选择；分页筛选：分页 Tabs 类似于平铺类筛选，都是将待选项平铺出来；高级筛选：高级筛选的判断关系较多，一般会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、等于、不等于等）、筛选值和添加。具体的筛选类型的特点和使用场景，已经在上次的文章中有所阐述，详情可点击查看：B端干货！4个章节帮你掌握筛选功能设计面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。阅读文章 > 以上是阐述了对页面结构设计影响较大的三类组件，像按钮、选择器等颗粒度的组件，可以到大厂的设计网站查看详细的使用说明，这里不再描述。4. 页面布局页面布局是页面设计的最后一步，是功能信息布局的关键，是为用户搭建易于发现的流程节点。① 选载体首先根据当前的业务的场景特点，先选择信息的承载方式。目前有三种方式：页面、对话框、抽屉页面：信息承载量最大，适合信息浏览、数量级较大的创建和展示；对话框：信息承载量小于页面，流程中断性较强，适合轻量级的信息创建、处理和展示；抽屉：信息承载量大于对话框，小于页面，流程中断性较弱。在具体的使用过程中：如果信息量较大，有组合方式比较复杂的信息创建和展示，考虑使用页面；如果信息与触发页面有较强的关联性，考虑使用抽屉；如果信息与触发页面有较弱的关联性，需要聚焦当前任务，考虑使用对话框或页面。② 分区域在确定好使用的承载方式之后，要对基本的大块信息区域进行划分。首页要确定的是导航的位置，导航代表了用户当前所处的位置和能去的位置。因此要放在非常显眼且稳定的地方。以一开始展示的需求页面为例，根据 F 型视觉动线理论顶部和左侧用户关注点较多和稳定性较强的地方。在大厂的典型页面中我们也可以看到相应的实践。顶部和左侧相比，扩展性较弱，为方便后面业务扩展，将导航区域选在了左侧。其次是操作、筛选和数据展示区，根据前面组织信息的结论，操作和筛选要放在比数据展示更容易发现的固定位置，根据 F 模型，放在信息展示区的顶部。这样基本的页面区域就划分好了：导航区、操作筛选区、数据展示区。按照本文的阐述，选载体和分区域略显啰嗦，在实际的工作中，往往导航等框架组件的选择与分区域同时进行，所以，我们一般可以从以下方面迅速开始：如果是老平台，只是做部分功能扩展，需要按照原来的页面框架设计进行新的功能设计，保持界面的一致性。如果是新的页面，可以参考竞品的页面，因为他们的处理方式已经经过市场和用户的检验，具有一定的可靠性。参考各大厂规范的典型页面，这些页面是他们内部设计师经过多次讨论才上线对外，应用场景上具有一定的广泛性和通用性，并且用户对这类页面可能会更熟悉。3. 调布局在划分好区域之后，需要对页面中的组件布局进行调整。比如前面的我们所确定的按钮关系，在页面中，为创建类和编辑类的按钮分别选择了填充和线框按钮，当前按钮数量太多，页面空间受限，可以对按钮进行组织收起，根据使用频率高低进行相应的排序。同时筛选和操作是两类信息且优先级有差异，可以区分更明显一些，同时页面中的右侧有视觉空白，可以将筛选类组件右对齐。在 B 端产品中常见的表单页面中，根据 Ant design 的复杂度模型，从页面信息的复杂度和关联性维度上，对相应的组合容器进行划分，方便设计师准确匹配，快速呈现出用户更容易理解和查找的内容模块布局。其中步骤分组一般用在创建页面，Tab 分组一般用在展示页面。在具体的组件布局中，还需要考虑组件的对齐方式、尺寸、位置等，这些都需要根据当前的业务特点、页面空间大小、浏览效率等进行实际判断决策。如果说页面空间有限，但是业务字段又非常多，在很多的后台软件中，我们会发现做左对齐的方式比较常见，因为在一屏内它的信息承载量是最大的，屏效比最高。4. 建议① 设计理论的应用设计理论和原则是前人在实践的基础上总结出来的规律和方法，虽然设计趋势会发生变化，但是信息的传递原理短期内是相对稳定的。通过理论的应用，引导用户关注页面架构的焦点，就可以达到信息传递的目的。1）视觉动线理论F 型视觉动线模型是尼尔森于 2006 年提出的，模型中指出，用户常用习惯方式是：扫描。在信息浏览过程中，遵循最省力的路径来浏览内容，直至找到想要的信息，因此前几行左侧内容看得多，而右侧内容和页面靠后部分便看得少，通常情况下便形成大体的 F 型。Z 型视觉动线模型也是尼尔森对用户的浏览习惯进行研究后得出的结论，一般会用在门户类、文字类网站，Z 布局应用很简单，将重要的信息元素放到 Z 形上面，用户扫描过程中会沿着这条路径获取信息。但是 Z 形也有弱点，用户很容易会受其他显眼的元素吸引，所以在布局的时候，要控制好这些元素。2）交互设计四策略删除将产品中可有可无或者没有使用频率的功能删除，使用户能聚焦在核心流程上，减少信息干扰和产品维护成本。在具体的设计中，还包括不必要的装饰元素，比如分割，空间分割和线分割保留一种方式即可，叠加使用反而耗费产品的简洁感，给用户增加视觉负担。分类面对种类和数量众多的功能，为了能让用户更迅速的定位到目的位置，可以将信息分类组织，使页面更清晰。刚才上面的操作关系就是分类的一种，面对一一摆开的按钮，用户难免会有选择延迟，快速定位后可以有效加快选择。还有产品中的一些状态、标签、颜色等，合理的分类组织，设定边界，再次复用可保持产品的一致性。隐藏将高频的功能和信息适时适地的展示，其他的则进行合理隐藏，也是为了页面聚焦，减少视觉负担，保持页面简洁。像表格中的操作按钮，一般情况下都会将用户将会使用的两个高频按钮放在外面，其他的放在更多中；另外，按钮的使用还有一定的引导性，比如从平台角度讲，希望用户的数据越来越多，所以不是很希望用户删除或注销，所以这类按钮都会放在架构设计的末端。转移一般情况下是将复杂进行转移，将用户的重复或复杂操作，交给后台处理，增加任务处理效率。3）格式塔心理学格式塔心理学源于视知觉，通过对视觉元素形式、图形的研究，帮助人们产生某种视觉倾向，从而快速的辨别。在这里主要说一下这四个原则：接近性原则：在人们的视觉感受中，会习惯于将彼此接近的元素看成一个整体。元素之间的距离越小，说明彼此的关系越近，当然，这个原则也是反过来用，如果想让人感受到两个元素不是一个整体或类别，那么把他们的距离拉大即可。购物 APP 的卡片浏览模式，图片下的标签与图片的距离差异，可以让人轻易的区分出，图片和标签的整体关系。我们在划分区域的时候，一般内容区中导航区、数据展示和操作可以通过距离来划分，使页面归类感更强，提高信息获取效率。相似性原则：人们的视觉判断中，可以轻易的将相似的元素归为一类，面对数量众多的元素，可以根据样式分成若干组合。比如形状、大小、颜色、方向等都是视觉判断的维度。与亲密性有一定的相似，但是亲密性强调的是位置，相似性强调的是内容。在美团 APP 的首页中，根据图形的样式，我们可以清晰的分辨出首页的金刚区和内容卡片区。闭合性原则：人们的视觉会主动将不完整的图形补全，形成一个完整的整体。人类的感知是完整的、闭合的。IBM 的 logo 是闭合原则应用的经典案例，虽然中间有条形的切割，但是不影响人们识别出这是字母 IBM。主体与背景原则：当两个元素重叠在一起，顶部偏小或者明显的元素往往会被人们认为是主体，会将底部元素当作背景。比如对话框的使用，利用前后重叠的空间感，突出对话框的主体地位，从而清晰的向用户传递信息。2. 遵循用户习惯在产品调研前期，我们需要对用户习惯有全面的认识，比如当前用户日常常用的软件是什么，基本的工作流程，具有什么业务习惯。这些采集信息将会在具体的页面布局中给我们带来非常大的指导作用。如果说设计之初对用户是未知的或者刻意差异化，那么用户使用和理解平台有可能会带来额外的成本。遵循用户习惯，简单来说，就是让用户一眼就能知道平台应该怎么用，不需要思考就能理解平台所提供图形和语言。当然，对于一些复杂的流程，还需要建立恰当的帮助系统。这是一些通用的流程和模版参考，在实际设计过程中，可能会反复的斟酌和考虑，对前面的一些内容再做出调整，这是无法避免的，比如有些设计师会在布局中选择组件，这些都是根据个人情况快速实践的，并没有标准答案。以上是作者自己根据日常的工作经历复盘整理，如果有其他的补充分享，欢迎一起交流。参考：https://ant.design/docs/spec/form-page-cnhttps://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeawhttps://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ本篇来源：优设网原文地址：https://www.uisdc.com/page-design
作品集 项目 样机 前言我们今天讲一下如何整理自己的作品集，好多人呢辛辛苦苦工作一年了，完了之后发现没有什么拿的出手的东西，今天做一点需求，明天做一点需求，做的东西零零散散的，发现没有什么可提取出来的，最后到总结的时候抓头挠腮的。更多作品集设计方法：作品集有很多虚拟项目，为什么还是求职失败？最近不少同学在筹备作品集，而很多缺乏项目经验的毕业生，不知道怎么选择虚拟项目。阅读文章 > 一、你对作品集了解多少1. 作品集初衷首先要明白做作品集是为了什么，你是为了总结你近 2 年的设计项目，还是为了找工作，我相信大部分人都是为了找工作才做作品集，一个好的作品集能够直观的体现设计师的个人能力，能够为设计师带来实质性的价值，而作品集也是为了帮助企业筛选出合适的人才，所以现在应该清楚了吧，作品集不单单是一堆项目堆砌起来就是一栋房子，而是要堆砌出能住、能看的房子。2. 作品集而不是秀品集为什么这么说呢，因为现在好多设计师的作品集说是为了面试，而半路做着做着就跑偏了，首先内容上在梳理项目的时候全部都放进去，也不管重要不重要，还有的是看别人放了一堆理论方法，自己也要放，也不管会不会用没用过，这些你虽然发到平台上大家会觉得你好厉害，但真到面试的时候面试官问你怎么办呢，能回答上一二三吗？第二方面是视觉，好多的 UI 作品集里页面展示没几张，视觉装饰元素特别丰富，这样就导致你的核心内容浏览起来收到了干扰，还是那个问题，你发到平台大家觉得你的作品很炫酷，但面试官的感受我们还是要考虑一下，毕竟划水看作品集和工作需要看作品集侧重点不一样。3. 瞄准才有可能打到靶心这里的意思是可以有针对性的去作品集，因为每个公司要求的不一样，有的公司是社交类产品，有的是金融类，或者有的是 b 端 c 端这种要求，如果你的项目很丰富，类目很多，那在做作品集的时候就可以同一个模板换不同的设计项目，然后点对点的投递，这样你的面试几率大一些。需要注意的是作品集里一定要写自己的个人介绍，而不是全是项目图片，一般在招聘平台投递作品集的时候对方都是些 HR，而不是专业的设计人员，他们筛选的流程是按照你的学历、经历这些点去筛，如果你的作品集里没放个人信息，hr 接到一个未知的作品集很容易 pass 掉。二、作品集制作流程其实非常简单，4 个步骤教你整理作品。1. 收集大家平常在工作中都会写日报周报和季报，或者一些 OKR，像这些其实都是我们可以利用的一个点，我们就可以把这些东西一点一点的去抽取出来，日报抽取出来组成周报，周报组成月报以此类推，从小到大提进行项目提取，当然这个前提是大家在工作中要有个复盘的习惯，否则在总结的时候发现还要临阵磨枪的去做作品集。2. 归类针对你抽取出来的这些项目，去进行一个归类，一般会分为 3 个维度，即产品基建、业务赋能、体验优化产品基建：0-1 的项目，所有数据没有参照业务赋能：对于一些功能上的优化，通过设计的手段帮助业务达成目标，例如通过优化页面背景，增加了用户停留时长体验升级：完整度较高的一些项目，例如整个产品 1.0-2.0，或者核心页面优化升级3. 筛选我们对项目进行归类之后，就需要进行筛选，因为并不是所有的项目都适合放进作品集里，我们要把重要的筛选出来，那么什么是重要的，我们通过 4 个象限去评估，即重要度、完整度、产品价值、用户价值；筛选完成后还需要我们进行加工一下设计，因为工作中的设计稿很大一部分都是带有产品或者其他人的思考在里面，这时候我们放作品集里可能展现不出我们的价值，所以建议还是稍微优化下后在进行包装。4. 风格作品集风格要提前确定，这个和我们做页面是一样的，如果后期在改是很麻烦的事情，例如风格定义沉稳专业亦或者是卡通可爱，当然建议还是跟你的核心项目风格保持一直，这样能够从头到尾贯穿下来，让面试官看着更加流畅我们平常会做一些项目的时候，会进行一个小复盘，做一个项目复盘一个项目，但是每一个项目复盘的风格是不一样的，有些人呢，做作品集就会省事，他就把不同的项目的复盘去拼装起来，这样的话，你在整理成作品集的时候，你会发现每一个项目跳脱太大了，我看上面一个项目的时候，风格是这样的，我看下一个项目的时候，风格忽然说又变了，这样你看你整个作品集的时候是来回是比较跳的，所以说我们这一块一定要在做的时候要统一风格，好了，按照这四步自己的作品集基本有一个雏形了三、制作过程注意事项1. 内容排序作品集中的项目排序也很重要，不同的项目顺序达到的结果不一样，我们可以从以下 2 个维度去拆。① 招聘方要求像开始说的，不同招聘方要求不同，我们投的时候避免海投而是针对性的去投，例如某公司要求具有社交项目经验的设计师，那刚好作品集里有社交项目，这时候就可以把该项目的排序放在第一位，这样不管是 hr 还是面试官看到你的作品集时都会多看几眼，毕竟有相关行业设计经验。② 项目价值我们如果不按照点对点的投递方式的话，就可以筛选自己的项目内容，按照价值的维度去排序，建议优先级是项目价值：因为越重要越能说出价值，在面试时才能更流畅的阐述清楚，另一方面也能体现设计能力；项目完整度：项目内容完整度较高，例如改版优化，0-1 构建等等这种能体现你的综合能力2. 分类我们在制作作品集时千万不要一股脑全部都放进去，一定要分清楚你要找什么工作，例如你要找 UI 或者交互岗，尽量别放一些运营设计相关的内容，或者是少放，放一些能体现你的设计技法的运营图，全放进作品集会让面试官觉得你做的东西不够精。其次我们在分类的时候一定要把维度梳理清楚，例如 APP 设计、网站设计、自驱设计等等，让人觉得你是一个有规划的人，面试官看的时候也会轻松很多，直接就可以跳到他需要的设计去看，如果分不清面试官可能就会懒得去找，直接关掉，毕竟人家时间是宝贵的。3. 包装避免重复：现在很多的设计作品集不管是交互还是 UI，新手们都放了一堆样机，放样机没问题但是我们也要去筛选出合适的样机，选择样机的时候要选择那些重复度低、机型高的样机，我见过很多设计师的样机都是被人用过无数次了；与时俱进：样机一定不要使用老旧的，现在手机都出到 14 了，样机还在用苹果 8 这种情况，这样的样机做出来的作品集质量也高不起来；样机数量：我们在使用的时候一定要控制数量，我之前接到过作品集，一个项目里全是样机，甚至在设计说明部分也使用各种样机，样机是为了让页面更美观，而设计说明是阐述设计价值。最新的样机打包：新鲜出炉！iPhone 14官方展示样机素材打包下载iPhone 14 刚刚发布，苹果官方就发布了展示样机素材，涵盖了iPhone 14、iPhone 14 Plus、iPhone 14 Pro、iPhone 14 Pro Max 四款新机型和新的配色，样机包括PSD和PNG两种格式，我们已经打包好了，想用的抓紧下载哟。阅读文章 > 4. 尺寸我们作品集尺寸选择也是尤为重要，切记不要像网站一样做成连体的展示尺寸，面试官看的时候基本都是放大后用键盘控制页数去看，如果我们单页高度很高就会严重影响观看体验，这里推荐尺寸 960*540、1920*1080、3840*21605. 导出导出作品集建议两种方式一种 PDF 一种 PPT，PDF 是最常见的投递形式，不管在任何系统上都可以无障碍打开，而 PPT 是为了作品集中动效做准备，有的设计师作品集中可能放了 GIF，但是 PDF 不支持动画播放，所以有需求的设计师可以导出 2 份，当然也可以附上个人网站的链（一般内推渠道无法使用）。欢迎关注作者微信公众号：「防脱发药水」本篇来源：优设网原文地址：https://www.uisdc.com/designer-work-collection
用户 社交 产品 一、前言在设计工作中，竞品分析是很常见的一种调研方式，多看多体验产品可以帮我们拓宽更多的设计思路和眼界，而不仅仅是靠凭空想象和“我感觉是这样…”来做判断搞方案，本文简单分享自己在体验产品过程中的理解和思考。更多产品细节：10个产品细节剖析，看看高手是如何做设计的！作为 UI 设计师来说，体验总结是必不可少的日常习惯，灵感的来源离不开对优秀设计的探索。阅读文章 > 二、社交产品赛道此次分享聚焦在陌生人社交赛道，围绕“发现-连接-破冰”的陌生人引力公式来拆解分析一些社交 app 是以怎样的方案来帮助用户完成这个社交行为链。（来自 ISUX 发布过的陌生人引力公式）1. 探探：上传照片场景化使用场景：探探以颜值社交为核心，主要玩法是刷卡式社交，比较依赖于用户照片，所以在整个产品体验流程中都会不时的引导用户上传照片这一行为；例如在浏览照片、编辑资料、特权奖励的流程中都采取了不同方式进行引导。设计思考：探探将上传照片的场景具像化，在编辑资料的照片模块，使用最好看的旅行照、独一无二的才艺、我的宠物和生活照等文案，这样的设计可以引导用户上传不同类型的照片来丰富个人画像和人设，建立吸引力，以及用户之间的共同点和联系；还能暗示一些不好意思或不想上传人像自拍照的用户上传一些生活照，丰富产品的用户照片池。2. 探探：资料百分比完成度使用场景：在资料编辑界面，探探将待完善的个人资料信息分模块标明完成度百分比，奖励用户完成 100%时可以提升曝光。设计思考：这种完成度百分比的方式通常在一些电商运营活动中会出现，探探把这种百分比的方式运用到资料编辑的不同信息模块下，这样做可以分散用户完善资料的压力（就像大目标拆成小目标一样，小目标更容易去实现和行动）3. CP：标签生成个人介绍动态使用场景：在新用户初次进入 CP 时，会让用户选择一些个人标签，选择完成后，会将个人标签自动生成一段自我介绍作为动态发布。设计思考：这个是我在体验中觉得非常 nice 的一个功能，通过提取用户标签形成个人介绍动态，不至于新用户和不喜欢发动态的用户主页光秃秃一片，而且对比纯标签来说，一段口语化的文字表达更有亲和力和交流感，吸引其他陌生人产生兴趣打招呼。（我在 soul 中深有体会，因为在 soul 没有发布任何动态，好几次都会被问主页怎么什么都没有～）4. umi 星球：录制声音词卡选择umi 这个产品目前还没有太大用户量，是一个初创产品，但是产品的差异性和设计感很好，值得借鉴。使用场景：在录制自己的声音时，umi 会有一些词卡选择，用户可以根据词卡内容来录制声音。设计思考：现在很多陌生人社交 App 中都不止局限在文字上的形象展示，用户通过录制声音可以更加丰富的展现自己；声音的表达一是音色氛围、二是语音内容；umi 在内容上提供了词卡，照顾到用户可能会不知道录制什么的茫然，根据产品目标群体选取的都是一些挺符合年轻人审美的句子，像经典影视台词、情感文字、文学作品，比较文艺有意思，不会那么土味和 low～ 渲染产品充满艺术感和年轻的调性。我觉得同类的产品是可以借鉴一下思路的。5. umi 星球：随机昵称使用场景：在新用户注册时，umi 可以随机生成昵称让用户选择。设计思考：不知道大家有没有这种感受，就是每次下载一个新的 app 注册时，想名字都好累，脑子一片空白，特别是有一些产品还不让名字重复，就要反复的尝试替换；在umi里可以选择系统随机提供的名称，整个注册流程更快、降低用户操作成本，不容易在这个阶段导致用户流失；而且提供的名字都是一些挺有意思的名字哈哈哈，让用户比较能接受，例如“天炉座5688”“仙女座1277”…想起来自己体验过的一个社交产品忘了叫什么名字了，自动起名“土豪的猎豹”外加一个大黄狗搞笑表情包头像（拴 Q，一进直播间都喊欢迎猎豹哥哥哈哈哈)，说真的头像和昵称在虚拟世界还蛮有存在感的，在大家都不认识的情况下不自觉地会有把头像和昵称当成是对方形象的这种心理暗示；没有绝对说哪种类型是好的，只是采取自动生成头像和昵称的方案最好根据品牌调性来设计。6. cp：互动任务排序使用场景：产品的定位是主打线上转线下的恋爱社交；双方互相欣赏后自动变成七天 cp，开启 cp 空间，可以打卡完成任务增加亲密度。设计亮点：cp 空间的任务排序和任务内容设计很有意思，从关系角度来说是“陌生人-破冰-好感-确定关系-热恋”的流程来排序的，循序渐进的拉近两个陌生人之间距离，促进关系的建立。从恋爱场景的角度是“线上-线下-线上”的流程，契合产品线上转下恋爱的定位。从用户心理层面进行任务内容设计，例如刚开始先做几个用户成本比较低的小任务破冰，然后就是互看照片（前边的几个小任务也可以说是为看照片做个铺垫，看照片我觉得挺真实正常的，换位思考一下，在不了解的情况下，现在线上交友选择性多，大家很难在不知道对方是什么样子的情况下付出那么多的时间成本陪聊进一步突破），照片互看后的任务内容设计围绕关系升温逐渐转线下确定恋爱关系…优化方向：cp 空间的任务打卡方式过于单一，只能通过发动态来完成，缺少仪式感，促使用户做任务的动力稍显薄弱，可以适当的增加一些有意思的玩法和视觉效果，除了能促进用户活跃度以外，从业务角度来说有可能开辟更多的付费渠道。cp 空间在对话框里的呈现太像系统通知，可以增加一些对话感，强调人与人的互动；例如通过修改任务邀请文案“xx 邀请你一起…”、“xxx想和你一起cp…”；或者通过一些动效来增加趣味性和cp氛围。7. Soul：酒馆猜拳社交破冰使用场景：用户在聊天过程中，可以通过酒馆猜拳来问答式聊天，完成社交破冰。设计思考：Soul 主打灵魂、兴趣三观社交，所以用户互相聊天了解的过程是很重要的，而在与陌生人联系上后，却不知道怎么聊天，容易陷入无话说、尴尬、以及不舒服的盘问式对话。酒馆猜拳是我使用过程中觉得体验的还不错的破冰玩法，双方 souler 通过猜拳你来我往的互问互答，在答题的过程中逐渐放开自己，延伸捕捉出更多的话题，降低交流门槛，到后面可能不需要猜拳问答，也能有很好的聊天氛围。优化方向：这种破冰方式在其他的一些社交应用中也有看到过类似的，soul 做的更加细致一些，但我认为还有一些能优化的点就是：一将提问的问题归个类，这样可以更快的找到目标问题，而不用反复刷新问题，找好半天，没有合适的问题，让对面一直等着，当然这一块 soul 这么做也有可能是想减少用户操作路径和层级吧。8. Soul：亲密度标识建立关系使用场景：soul 在跟对方聊天达到一定时间后，会出现的一个“soulmate"标识，互动的时间越久，这个标识就会依次点亮，表示两人已经建立了关系亲密度。在“cp”、“qq”中也有这样的亲密度标识运用。设计思考：soul 的亲密度标识采取字母”soulmate“，一是很好的与品牌元素进行结合；二是通过亲密度点亮，能表明自己付出了更多的时间成本，跟对方的聊天比其他陌生人更久有更多话题，以这种方式可以一定程度上拉近两个陌生人之间的关系。我觉得这种亲密度标识在陌生人社交、情侣、crush、闺蜜这些关系中的用户会比较适用。9. 探探：趣味测试+发送话题使用场景：在聊天场景中，探探提供真相测试玩法，邀请对方一起做测趣味测试或接受对方的测试邀请，可以根据测试结果查看双方的匹配度，根据测试内容还可以提取相关话题发送给对方，是一个社交破冰的玩法设计思考：探探的这个趣味测试玩法，兼顾趣味性和社交性；我体验比较好的一点是所有问题的测试结果以一种更舒适友好的表达方式来表达，不会觉得某一个答案就是不好的而违心去选择，这会让用户没有压力的选择真实的内心答案完成“真相测试”；其次就是在测试结果页将问题和选择自动生成一段文案，用户可以发送给对方来展开聊天互动。对于有些内敛或不太会表达的用户来说，这样子的破冰更加自然和容易接受，以此降低用户破冰心理压力。三、结语陌生人社交产品下又有不少细分赛道，像这两年出现比较多的的语音派对交友、虚拟社交，可以单独进行分析；因为我目前的工作是在社交赛道，平时会比较多看和分析这类产品（其他类型也会看），后续会继续更新日常产品体验和设计思考，今天的分享就先到这里了。[link ]本篇来源：优设网原文地址：https://www.uisdc.com/social-app-design
内容 设计师 的是 大家好，这里是和你们聊设计的花生~最近 ChatGPT 真的太火了，每天都会在网上刷到关于它的各种讨论，身边的同事也已经在用它处理一些文字工作，不知道大家有没有用起来呢？最近我在网上看很多大神分享的 ChatGPT 使用教程，发现自己之前对 ChatGPT 的认识太肤浅了，试过后更是感觉打开了新世界的大门，今天就和大家分享其中 6 种我觉得对设计师非常有帮助的 ChatGPT 使用思路。关于 ChatGPT 的详细介绍：地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？大家好，这里是和你们聊设计的花生~前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。阅读文章 > 一、个人助理想必不少小伙伴都已经试过这种用法了，用 ChatGPT 来处理写邮件、写微博或者小红书的文案这类文字工作非常方便，还可以用来写工作周报和年度总结的大纲。最近还出现了一款专门生成工作周报的程序，无需注册直接使用，给一句话就能生成一份内容详细格式工整的周报，简直是打工人必备利器。周报生成器： https://weeklyreport.avemaria.fun/zh（暂时下线）其实我们还可以让 ChatGPT 按预算推荐电脑设备，或者写一份条理清晰、内容详实简历。它还能陪你玩一些简单的游戏，甚至扮演你喜欢的动漫/电影角色和你对话互动，以后不愁摸鱼时间会无聊了。二、学习导师在学习设计知识以及设计软件的过程中，我们往往会有关于某个概念的疑问，或者在使用软件的过程中遇到障碍，这个时候就可以将问题描述给 ChatGPT，让它直接给出解决方案或思路。比如一些理论性的知识，以 ChatGPT 可以写论文的水平来说，回答关于艺术史、设计史、大师作品或生平的各种问题肯定不在话下。我们还可以通过对话的方式和它讨论在设计中遇到的疑惑，能得到出非常专业的解答。这里推荐大家看一下艺术博主@尤勇画画 和 ChatGPT 有关色彩的讨论，内容非常有深度，从这方面看来 ChatGPT 足够作为设计师或插画师的学习导师。微博原文： https://weibo.com/1658239147/Msmk05vAC在用 PS、AI、AE、C4D、Blender 等设计软件时遇到的问题，也可以让 ChatGPT 给你提供解决思路。我问了它关于 Blender 中玻璃材质渲染效果很暗的原因和解决方法，它提供的“ 调整环境贴图”的思路帮助我很快速的解决了这个问题。我还让试过 ChatGPT 提供海报设计思路。当我指定海报风格为国际主义时，它给出的使用简约色彩、无衬线字体、抽象几何形状及保持版面干净整洁等建议都是非常准确的，还提醒设计者注意设计的包容性。进一步追问如何才能找到简约的配色时，它也提供了使用配色网站、借鉴自然配色、关注经典配色和保持配色的一致性等建议，都非常实用。三、辅助 AI 绘画现在不少艺术家都在用 AI 绘画工具帮助自己快速将脑中的创意和想法转化为概念图像，而在 ChatGPT 发布之后这个过程变得更加简单流畅。艺术家可以直接告诉 ChatGPT 自己想要什么样的画面内容，让 ChatGPT 生成英文描述并润色成更容易被 AI 绘画工具识别的提示词（Prompt），然后复制到 Midjourney、Stable Diffusion 或 Dalle 2 等 AI 绘画工具中，就能快速得到不错的生成效果图。这在一定程度上节省了艺术家自己学习输出提示词的时间，让创意参考的生成速度更快。还有一个好处就是如果艺术家一时间想不到好的点，可以简单描述想要的场景或感觉，让 ChatGPT 给出人物形象、元素、配色、构图、光影等具体内容建议，在此基础上一步步修改完善自己的提示词。问得越多，ChatGPT 能给出内容就越详细丰富，这比传统的自己找参考图效率要高很多。游戏制作人@soulframe 利用 ChatGPT + Midjourney 生成的游戏角色概念图，来源： https://m.weibo.cn/status了解有关 AI 绘画工具的内容：手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结AI画画，无疑是当下最火热的话题之一。阅读文章 > 四、用于 UI/UX 设计一名国外的 UI 设计师 Thalion 在他的文章中分享了利用 ChatGPT 进行 UI 设计的 25 个例子，其中包括获取线框布局的建议、对应用进行可用性测试、寻找高质量的系统套件或 UI 工具包、验证用户旅程地图、编写设计系统文档、获取设计研究数据等，非常全面的展示了 ChatGPT 能如何帮助 UI 设计师提升工作效率。感兴趣的小伙伴可以戳下面的链接阅读原文：原文链接：如何使用 chatGPT 进行 UI / UX 设计：25 个示例ChatGPT 撰写设计系统文档五、写 Blender 脚本我们都知道 ChatGPT 可以写代码，因此它也可以帮助不会编程的设计师写 Blender 脚本，从而完成批量建模、添加材质、立体打光等操作。下图截取自国外设计师 Kaiwan Shaban 在 YouTube 上分享的一个视频，视频中他展示自己是如何利用 ChatGPT 写的脚本在 Blender 中迅速创建了 300 个随机立方体。内容来源：How I made this Artwork using ChatGPT | Blender Tutorial - YouTubeYouTube 上有非常多相关教程，大家可以用关键词“ Blender+ChatGPT ”进行搜索。 下面推荐 B 站上的 2 个搬运教程，方便大家先做了解：使用ChatGPT创建blender脚本： https://www.bilibili.com/video/BV1fs4y1Y7XM在Blender中使用ChatGPT的5种方法： https://www.bilibili.com/video/BV1DG4y1F7TQ六、学习外语之前为大家介绍过 ChatGPT 有不错翻译功能， 如果你想在外网上发表英语内容但担心用语不对，可以直接用中文告诉 ChatGPT 你想表达的内容，让它帮你翻译润色。而除了及时翻译，B 站上还有 Up 主分享如何利用 ChatGPT 完成高效率的自定义英语学习。首先是 UP 主@刘放斋 分享的利用 ChatGPT 高效学习外语词汇和写作，包括英语/法语/德语/西语/日语。因为单词放在语境下会更易于理解和记忆，所以我们以 3-10 个单词为一组，命令 ChatGPT 根据它们生成 100 - 200 词左右的小短文/小故事，方便我们可以一次性记住多个单词。且这样生成的内容是准确、富有逻辑且符合母语者使用习惯的，比在单词软件上一页页背例句更有趣。教程直达： https://www.bilibili.com/video/BV18d4y1p7M4ChatGPT 根据给定内容生成的短文另一位 Up 主 @法笑宝 则提供了一种用 ChatGPT 练习英语口语的方法。具体操作方法先为 Chrome 浏览器中安装同一款名为 voice control for ChatGPT 的插件，然后借助输入法的语音输入，告诉它需要进行一对一对话的模拟雅思考试，就能开始和 ChatGPT 进行口语对话了。大家可以进视频感受一下整个对话过程，非常丝滑完美，想提升口语水平的小伙伴可以试试。教程直达： https://www.bilibili.com/video/BV1iy4y1Q7Fh以上就是今天为设计师们推荐的 6 种 ChatGPT 使用思路，希望对大家的学习工作有帮助。需要注意的是 ChatGPT 目前并没有联网，了解的事情也仅限于 2021 年之前，所以在信息时效性方面有缺陷。而且在问 ChatGPT 比较专业的问题时，得到答案后最好自己再溯源验证一下真伪，因为在之前使用过程中 ChatGPT 存在“编造答案”的情况。不过有一个好消息是基于 OpenAI 的新版 Bing 搜索引擎已经发布了，有部分用户已经体验过了。新版 Bing 用的是 GPT-3.5 模型，比 ChatGPT 的 3.0 更加先进强大。用户依旧可以用对话的方式了解信息，联网的 Bing 可以反馈互联网上最新的资讯信息，并在提供答案的同时给出信息来源，这样就更方便用户自行了解更多信息及验证信息的真伪。新版Bing的使用界面 ，图片来源： https://m.thepaper.cn/newsDetail_forward_21895565想要使用 ChatGPT 或者体验新版 Bing，可以戳下面的链接了解。如果你也有关于 ChatGPT 的好用法，欢迎在评论区和大家分享。喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐设计干货知识 ~新版 Bing 内测申请链接： https://www.microsoft.com/zh-cn/edge推荐阅读：ChatGPT发展势不可挡！盘点4个值得关注的AI语言文本工具大家好，这里是和你们聊设计的花生~这两天有关人工智能聊天机器人 ChatGPT 的新闻频频冲上微博热搜，并引起广大网友的热切关注和讨论。阅读文章 > AI绘画如何应用到实战？来看腾讯高手的案例！前言：当我们谈论画作，会醉心于印象派光影斑斓的色彩，会惊叹于国风文人画如诗如歌的构图，会震撼于画师笔下一个又一个充满想象力和创造力的世界；而当我们提及 AI，脑海中浮现的是前沿深奥的大数据云计算，是冰冷严谨的逻辑思维能力。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/6-chatgpt-use-methods
产品 用户 业务 俞军老师曾说：“用户是需求的集合。”需求的诱导因素是复杂的，需求的表达形式也是各异的。B 端产品与 C 端产品显然面向不同的人群，满足于不同的需求，简单来说，B 端产品多从角色视角出发考虑需求，服务于企业或组织，偏向于满足降本提效与资源整合的诉求，而 C 端产品多从用户视角出发考虑需求，服务于个人或消费者，偏向于满足市场发展与体验升级的诉求。本篇文章希望能够帮助大家更形象地理解 B 端与 C 端的区别以及如何上手 B 端调研。一、B 端与 C 端的区别在了解差异前，首先要明确 B 端与 C 端的定义：B 全称是 Business，即商业，多指企业用户，使用的是具有业务管理思想的数字化工具，常见的 B 端产品有 ERP、OA、CRM、Slack、Notion 等。C 全称是 Customer，即消费者，多指个人用户，使用的是能够满足某一群体需求的客户端，常见的 C 端产品有例如京东、微信、抖音、微博等。在日常工作与生活中，我们都离不开使用 B 端与 C 端的产品。洗漱时，我们打开“网易云”听最近喜欢的音乐；出门时，我们打开“百度地图”查看路况并叫车；工作时，我们登录 Outlook、京 me、JoySpace 与营销中心等办公工具，进行邮件查收、业务沟通、会议记录与活动发布；下班后，我们在“美团外卖”挑选晚餐并下单，B 端与 C 端的产品就这样穿插在我们的生活与成长里，那它们在产品定位上到底有什么差异呢？目标用户的不同C 端面向个人用户，服务于在不同生活场景下的每一个人。C 端产品拥有更宽泛的受众群体，每一个核心功能都在解决大多数人的诉求，这也意味着，它需要更细致的用户画像，比如年龄、地域、收入、文化、职业、喜好等等。B 端则面向企业用户，服务于在不同经营场景下的每一个“企业”，企业可以是商家，可以是团队，可以是组织。B 端产品拥有更垂直但复杂的受众群体，它不需要收集这类人在性别、年龄与地区等维度的差异，转而关注这类人所属角色之间的差异。“营销中心”是京东内各业务方开展京东营销活动时的中心化工作平台，一个典型的 B 端产品。我们在调研过程中会通过岗位/负责品类/工作年限明确用户所属的群体角色，比如是运营还是营销，负责的品类是图书还是汽车，至于用户年龄多大、哪里出生与性格怎样并不会影响对产品需求的判断。使用场景的不同C 端产品的使用场景具有极高的自由度，它会出现在各式各样的状态下，甚至在同一时间里或一个任务下可以使用多个产品，比如在在外出旅游的晚上，打开“腾讯视频”追着最近爆火的综艺，打开“轻颜相机”美化下白天拍摄的相片，再去到“微信”发一条旅游主题的朋友圈。使用场景的碎片化与任务的随机性，使得 C 端产品需要始终注重体验的提升。B 端产品的使用场景则不同，用户是为了工作，工作包含特定的任务，任务具有明确的动线，因此用户需要长时间与沉浸式的使用，使得 B 端产品需要具备严谨高效的操作流程与简单清晰的页面设计，为了更准、更快、更好地解决问题。核心诉求的不同C 端产品对于开发者而言，核心诉求是拉新、留存、转化，通过对用户需求的挖掘，迭代优化出有价值的产品，大多 C 端产品最终目的为了盈利；但对于用户而言，核心诉求是满足自我情绪，通过“微信”与父母视频，满足思念的情绪，春节期间在“京东”购买新衣，满足能在春节收到货的期待。B 端产品的核心诉求是基于业务规范，让业务流转效率更高，员工学习成本更低。相比于 C 端对用户体验的极致化追求，B 端产品的需求更易受到业务形态或是企业战略的影响。更多B端和C端的差异对比：如何区别B端与C端的产品设计差异？我总结了26条对比！随着企业数字化转型，B 端产品越来越受到人们的重视，B 端产品也越来越丰富，越来越多的 C 端设计师转行到 B 端产品的设计上来。阅读文章 > 固然 B 端与 C 端存在各种维度的差异，看似 C 端产品对用户体验更为重视，但无论是 B 端还是 C 端，实际的使用者都“人”，C 端产品需要考虑商业价值与用户体验的平衡，B 端产品亦是，精准地洞察用户的需求，对企业效率的提升也大有裨益，但新人小白如何快速上手 B 端调研呢？二、B 端调研的小经验入职京东的第一个完整的项目是《通天塔用户体验研究》，通天塔是京东旗下一个快速搭建活动页面的平台，我们在京东看到的活动落地页大多是依赖于通天塔的能力。在调研过程中，作为新人的我，踩了很多的“坑”，也总结出些许经验，希望与大家分享，欢迎大家的批评指正。全面理解业务C 端产品是个体导向的，个体的偏好不影响他人的偏好，个体的痛点也未必是他人的痛点。但 B 端产品中的各方是广泛关联的，所以个体的偏好与痛点并不是随机的，也不是完全独立自主决定的，而是受到整个业务场景的影响。因此，在思考 B 端产品体验的时候，不应该仅仅思考其中某个个体的体验，还应思考他所处的业务场景。“模板组件不丰富”是关于通天塔的一个最高频反馈，也是产品侧希望优化的重点方向。作为新手研究员的我们应该避免在访谈时问出“您需要什么样子的模板？”，并草率地给出“进一步丰富模板组件”的建议，而是需要把侧重点放到对业务场景的分析以及业务需求的梳理上。比如，“您的岗位职责是什么？”、“在页面搭建过程中主要负责的任务有哪些？”、“参与搭建的页面展示在前端的哪些位置？”、“希望通过活动页面达到什么业务效果？”、“重点关注哪些维度的效果数据？”、“负责的是什么品类？”、“这个品类有什么特性？”、“品类特性期望在页面中以什么形式展示？”等等，以此，我们会更清楚当前用户的业务范围以及这类角色的业务诉求，更好地站在业务的视角出发提出更有针对性的优化建议，找到真正被需要的“丰富性模板”。总之，调研过程中需时刻牢记业务目标，最大限度地为企业赋能，避免在细节中“钻牛角尖”。深度熟悉产品在入职京东前，我在京东购买过各类商品，参与过各类活动，在没有系统性的学习下，我也可以熟练使用各项基础功能。但在第一次接触“通天塔”时，我遇到了许多问题，比如“我不知道素材组是什么以及如何绑定”，“在没有素材组 ID 可用于测试时，也不知道如何去其他系统里创建素材组”，我意识到 B 端产品远比 C 端产品难上手。在对产品不熟练时，直接去邀约用户执行访谈显然是低效的，因为“你对用户的调研”会变成“用户对你的授课”。所以在调研执行前，能够熟练使用 B 端产品是必要的，特别是用户日常高频使用的功能，减少调研时的“讨教”与因功能盲点造成的理解偏差。此外，即使研究员已经可以熟练使用产品，在执行过程中，用户的“实操”仍比“口述”更有效，引导用户直观地展示操作动线，会更容易地挖掘卡点与痛点，也能减少研究员在操作任务上的理解成本。拓宽竞品分析的边界竞品，可以理解为一个参照物，观对手，明优劣。C 端的竞品是清晰好找的，比如京东的竞品有淘宝与拼多多等，抖音的竞品有快手等，爱奇艺的竞品有腾讯视频与优酷视频等，但通天塔的竞品是什么？大家会说自然是各大友商旗下搭建页面的工具，但这类产品往往是企业自行开发，供于内部员工与商家使用，作为一名个人用户，是难以获得权限进行走查的。此外，B 端产品往往是服务于特定企业，具有个性化需求，难以从市场中获取相关信息。所以应该如何进行竞品分析呢？首先要敢于申请账号，想要全方位走查 B 端产品定需要足够的权限，但不能因此就放弃尝试。从申请一个账号开始，会发现部分 B 端产品并没有非常严格的使用界限。我在调研过程中，百度搜索了许多竞品，部分页面搭建的产品其实是同时面向 C 端与 B 端的，初次注册的个人账号虽缺少对一些高级功能的使用权限，但也足以给到一些启迪。其次，受访者的信息是重要的。在执行访谈的过程中，不要忽略询问受访者对竞品的态度，因为有些受访者有使用过相关竞品的经验或目前仍在多个渠道中负责搭建页面，他们对竞品能力的熟悉度与可提供信息的价值性要远大于个人走查所能带来的。以上就是个人对 B 端的理解以及在 B 端调研时沉淀的小经验，作为新手研究员，仍有许多不足之处，欢迎大家批评指正。欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/business-investigate
用户 情感 产品 我们每个人，都会与身边的服务或产品建立起某种情感上的联系，首先我们通过以下 3 个小故事来理解一下。一、3个故事故事一：爱购物的女人你有没有发现这样的一个现象：身边大多数女性会买回很多不一定会穿用的东西，这是为什么呢？那是因为他们购物的过程中，已经享受了购物过程带给她情感上的快乐，比如享受了试穿、被他人服务、被他人赞美的过程。故事二：给美女主播打赏的工人据相关数据调查，很多人会拿出个人工资的 80%给女主播打赏，为什么呢？那是因为他们在直播当中喜欢与美貌女主播互动，在这过程中能够带给他情感上的满足感。故事三：购买保健品的老人另外还有一个现象，很多老人宁可省吃俭用也要买很多无用的保健品放家里，也不一定会吃，因为保健品能给老人情感上的安全感。以上三个故事向我们表明：商家在面对个人消费者的时候，通过满足人情感需求的方式，让人感受到幸福快乐或避免恐惧忧伤，从而达到赚钱的目的。同样，我们产品的目的也是服务于人，也需要满足用户情感上的需求。美事是 58 沟通协作的办公管理平台，作为一款 B 端的工具型产品，相比 C 端产品在设计上会更理性和更严谨些，但给产品注入更好的情感设计，是任何产品都需要考虑的，因为它不但可以增加用户在体验上的愉悦感，也能向用户传达它的品牌价值。那什么是情感化设计呢？唐纳德·诺曼在他的设计心理学提出：情感化设计是指以人与物的情感交流为目的的创作行为活动，旨在引起用户注意、诱发情感反应以提高执行特定行为的可能性设计。简单理解是：它是一种顺应或唤起用户内心情感的设计方法，旨在让用户产生积极的用户体验和行为。更多情感化设计干货：17个优秀设计案例，帮你快速了解情感化设计情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。阅读文章 > 二、前期分析1. 项目背景&目标基于美事 6.0 全新升级之后，产品界面的还有部分品牌视觉不统一、基础体验待优化的问题，于是我们启动了以“情感化”为设计方向，打造更精致的品牌视觉体验，来增加用户对美事新品牌的认知以及提升产品的基础体验。2. 应用场景梳理首先我们对市面产品可以做情感化的设计场景进行了大致梳理，包括：缺省页、操作反馈、引导浮层、表情包、闪屏、皮肤、生日弹窗、登陆页面、loading、下拉刷新等。由于 B 端产品和 C 端产品在各方面都存在较大的差异，B 端产品使用情感化的前提必须是在不影响产品本身的功能性与可用性的基础上，之后才能去考虑怎么从情感化的角度去优化这个产品。3. 建立情感化设计模型诺曼根据人类心理特征，将情感化设计分为：本能层、行为层、反思层，我们通过这三个层次，结合设计手段及用户心理搭建一套情感化设计模型。首先在本能层，通过感官的传递，在视觉上呈现给用户的感受是美观的、愉悦的，唤起用户对产品的喜爱；其次在行为层，通过简洁易用的互动模式，引导用户完成他的操作目的，建立起用户与产品直接的情感关联；最后在反思层，在本能层与行为层的共同作用下，通过运营设计手段来加强用户对产品的情感连接，并带来情感上的共鸣，以此来赢得用户对产品的认同。4. 关键词提取结合情感设计理论和我们的目标，进行提取了 4 个关键词，分别是愉悦性、趣味性、品牌化、情感共鸣。三、6个技巧接下来我们会通过围绕 4 个关键词及结合情感化设计模型，将情感化设计完美的应用到产品当中。1. 品牌符号化，传达品牌印记在本能层上，我们希望传达给用户的视觉感受是轻松、愉悦的，因此在设计启动页的过程中，先通过赋予美事 logo 更多的含义，以 logo 图形+内容的组合的方式来诠释美事产品的特点，来提升用户对美事品牌的感知；另外画面做轻量化处理，既能让用户的视觉更聚焦，也更能突出品牌来加深印象。2. 创意图形与文字，增加用户愉悦感插画和文字都是传达信息的重要手段，同时也是情绪的重要载体。因此在美事缺省页设计的时候，我们采用了创意的插画表达形式，再结合风趣幽默的文字，当用户遇到阻碍时，通过增加产品的流畅性和愉悦性能很好的减少用户不良情绪。这种良好的情感化设计，不仅能帮产品更好的传达品牌，还能引发用户的情感共鸣，为用户带来更愉悦的体验。3. 沟通互动，拉近用户情感美事作为沟通工具，表情包是用户沟通中最常用的表达方式，也更容易唤起用户的情感，并能有效的缓和或带动气氛，拉近用户之间的距离。4. 注重仪式感，创造氛围与意境反思层次的设计，在于更高层次地满足用户的精神需求，为了让用户感受到更多人文关怀，因此我们在新员工入职、生日、司龄的时候，会送上祝福和礼品，营造温暖舒心的工作氛围，向用户传递品牌温度。在职天数场景也都能加深品牌对用户的情感触达，让用户感到温暖。5. 打造设计周边，渗透品牌文化通过对美事表情包元素的提取，设计创意的礼品周边，既能有效渗透美事的品牌文化，还能大大提升用户对于产品的好感度。6. 情感运营，加强用户粘性年底通过盘点用户数据，为用户营造一个个性化、情感化、有温度的视觉感受，打造一份具有仪式感的专属年度报告，易拉近用户间与产品的距离。另外在可通过制造些话题，形成一定范围内的传播效应。总结到尾声，简单做个总结：在整个项目过程，我们从用户角度出发并关注用户情感的多样性，洞察更多用户的真实诉求，从而不断优化我们的产品体验设计。为了给用户提供更愉悦的体验，我们思考如何更好的将情感化设计应用到产品当中，简单来说可以分为以下三个步骤：首先明确项目的目标。这点非常重要，这能让我们在后面的设计过程中不跑偏方向。然后梳理情感化设计的应用场景。根据自身产品的需求，可以对应用场景做个优先级，慢慢迭代设计。最后通过符合或 IP 融合到设计创意并贯穿整个产品的设计中。拟人化的 IP 传达的信息，更容易引起用户共鸣。以上是我想跟大家分享的有关情感化设计的一些思考，希望能给大家带来些启发，也借此与大家一起共同探索、学习成长，欢迎大家在评论区留言。最后感谢大家的阅读。欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/emotional-design-skills
用户 莫奈 图表 一、前言莫奈是一款主要服务京东内部用户的数据可视化平台，它以容器的形式将京东城市各种与智慧城市建设及运营相关的能力聚合，并以可视化的形式面向客户呈现。作为京东莫奈的设计负责人，过去三年一直负责莫奈可视化平台的用户体验设计工作，由于本人日常设计主要以智慧城市、数据可视化大屏为主，所以我既是莫奈的设计负责人也是莫奈的深度使用者或者说专家用户。在长期使用莫奈的过程中，本人梳理了大量与视觉、体验相关的问题，这些问题，部分在产品日常迭代中得到了优化，但是也有相当一部分解决起来具有一定的难度和成本；与此同时，作为用户体验设计师，我日常与业务方、客户方以及用户接触紧密，所以在与大量用户沟通后，也从用户侧收集了不少使用体验相关的问题。我对以上两个渠道的问题整体梳理汇总，并与产品侧讨论沟通后，大家认为这些问题比较严重的影响了用户使用莫奈的效率，降低了莫奈对业务侧赋能的质量，提高了客户使用莫奈的成本。所以我们必须规划出一个产品迭代的周期，针对莫奈体验问题，进行一次密集的优化和革新，这便是本次莫奈体验升级改版的基础背景和原因。 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。本篇文章写作的主要目的，是想将本人在这次改版设计中用到的一些方法、流程和经验与大家做次交流和分享，希望能为同行在类似的改版设计中提供一定的借鉴和参考。京东往期案例复盘：让购物简单快乐！京东 APP 11.0 深度解读：视觉篇在 APP11.0 深度解读系列的第一篇文章中，剖析了基于生态进行体系化大改版的解读与思考，本文将聚焦于视觉设计，阐明我们对此版本的设计主张与思路，在各个场景是如何外化以辅助达成改版目标的。阅读文章 > 二、体验升级流程实际上，在梳理出整个体验升级流程之前，通过与产品负责人的多次沟通，我们事实上已经对体验升级这个需求达成了共识，而流程图解决的是做什么、怎么做的问题。下图展示的这套体验升级流程较为通用，大多数产品的体验升级都可参考下面的流程执行。这套流程的主要作用有两个，一是通过它可以更直观的跟产品负责人、开发负责人等关键角色沟通，让大家对体验升级这件事儿有整体且全面的了解，方便大家评估工时、预估成本和安排排期；另一方面也能够使我自己的工作推进的更加有节奏有条理，避免工作内容长时间停滞在某一个环节而影响整体进度。三、改版背景及产品简介基于 STAR 法则，背景概况部分向大家介绍莫奈体验升级的必要性。在企业中，想要推动一个需求顺利执行，那一定是需求上下游以及相关方的利益都得到了体现和满足。莫奈此次升级，从体验设计师角度来讲，我们作为用户的代言人，在了解到用户大量反馈和建议后，有责任将用户的声音转化为需求，并推进落地为产品的一部分；从产品团队来讲，莫奈想要不断发展，持续为客户和业务方带来显著的效率提升、明显的成本下降，也必须对过去老旧的产品架构做一次深度的革新和优化；从前端工程师、研发同学的角度看，以往不合理的底层代码设计，使产品在性能、稳定性等方面留有大量隐患，因此在日常迭代工作之外，研发同学总要消耗部分精力去维护那部分不稳定的存在，从而导致研发同学人效比低、开发体验差；从上级 Leader 来看，公司的核心经营理念是“成本、效率、体验”，但成本的降低、效率的提升、体验的优化都依赖于强悍的技术和优秀的产品，而莫奈此次体验升级正是践行公司核心理念的有效尝试，综上，此次体验升级于多方有益，符合部门整体利益，所以大家很快达成共识。四、莫奈典型用户场景梳理通常我们说用户体验时，用户是一个群体的概念，而这个群体如上图所示，可以被进一步细分为多种角色，理想情况是每一类角色的体验都被满足，但现实执行中我们必须要有策略和取舍。所以要想产品有好的体验，首先我们要知道用户群体中不同角色对产品的使用情况如何，并找到对产品依赖度强使用频次高的那部分用户和场景，然后针对他们以及他们使用的场景做高优先级的优化。从莫奈典型用户使用场景可以归纳出：首先，莫奈的主要使用者为各个项目的产品经理及开发工程师，其中设计师也有相当大的使用强度，这三类用户他们直接使用莫奈，并把莫奈作为解决数据可视化场景构建相关需求的主要工具和方案，所以，以上三类用户，我们将其称之为莫奈的核心用户。核心用户使用莫奈产出的作品，经由上下游同事传达和部署给业务方及客户后，莫奈的商业价值便得以体现。其次，每类用户使用莫奈不同功能模块的频次不同。从使用场景中我们也发现，莫奈的使用具有上下游的关联性，核心用户处于流程的下游，中上游的用户虽不是核心用户，但他们因为更接近客户和业务，往往具有比核心用户更高的决策权。因此我们优先让核心用户体验提升并不意味着放弃上游的体验，而是资源有限的情况下我们的工作必须有取舍有重点。实际上我们是通过建立核心用户的声量和口碑来向上游用户传达莫奈的价值和特色，通过核心用户使用莫奈交付的结果来证明莫奈的可靠。与此同时，我们也通过对内外的宣讲和培训，持续接收上游用户的反馈，并在迭代中持续优化。五、体验痛点分析-用户调研知道了核心用户是谁，那么核心用户的体验痛点是什么呢？虽然在日常的交流沟通中我们已经获取了不少用户反馈、收集了相当的问题建议，但作为体验升级的系统性工作，为了更全面的了解用户体验痛点，我们还是设计了一次完整的用户调研活动。本次调研主要采用线上问卷调研、线下访谈+用户行为观察的方式进行。线上问卷采用京东良研问卷系统，除了面向核心用户推送，我们还面向莫奈主流用户及边缘用户推送了问卷内容，因此，问卷调研整体覆盖较为全面。线下访谈除了邀请部分核心用户，我们也从问卷系统中筛选了部分反馈问题多且愿意参加线下访谈的用户参与。线上线下均包含内外部用户，以期获得更加客观真实的反馈。用户调研的核心目标是充分收集用户反馈，并将反馈结果量化及系统化，量化后的结果可做为设计侧推动产品执行体验优化的关键依据，也可以作为后续验证优化结果的对照项。六、体验痛点分析-问卷设计本次问卷设计我们参考了 PSSUQ 整体可用性量表，并结合本次调研目标做了部分调整。PSSUQ 整体可用性量表可以从系统易用性、信息质量、界面质量三个方面将体验结果量化，然后通过与行业基本经验值比较，既可以知道用户对莫奈在以上三项的满意度，也可对莫奈当前整体体验结果有一个全局的概况性评价。同时根据三个方向的评分也可以更细致的指导后续的设计优化方向，为设计决策提供更多科学可信的依据。PSSUQ 整体可用性量表作为一个通用模版，其内容比较固定，为避免多次打扰用户，提升问卷调研效率，我在 PSSUQ 的基础上添加了少量关键信息甄别、用户反馈积极性识别类问题，从而使问卷内容更加符合本次调研目标。七、体验痛点分析-问卷调研问卷设计好之后，接下来就是问卷发放以及结果分析了。PSSUQ 量表内每个问题均有 8 个选项，「1-7」是对该项描述的认可程度，得分越低代表用户对该项描述越认可；「NA」代表用户对该项描述无法评价。本次调研通过京东良研发放线上问卷 100 份，共收到有效问卷反馈 87 份（大于 PSSUQ 所需的最少样本数量：20），说明问卷结果具有较好的可信度，其结果值得进一步研究。通过整理和统计问卷数据，可以得出以下结论：内外部用户在系统易用性、信息质量、界面质量三个维度对莫奈均不满意对比行业经验值（均值），莫奈系统总体体验质量与行业同类产品存在明显差距莫奈用户群体整体积极性较高，具有较强的沟通及反馈意愿整体评分结果与日常同相关同学的沟通结果一致，以上评分结果也反映出此次体验升级的紧迫性，作为由设计驱动的改版设计，设计侧面临较大压力。八、体验痛点分析-亲和图在设计问卷的环节我也提到过我们的问卷在 PSSUQ 量表的基础上针对本次调研目标做了部分调整和优化，而线上问卷最后两个选项以问答题的形式向被调研用户提供了对莫奈各方面建议的反馈渠道，通过问答项我们收集到用户反馈的各类问题 80 多条，我们采用亲和图对这些反馈做整理，亲和图顾名思义，它可以使具有类似特征和关联属性的问题更加临近，从而将零散的问题被归类，方便从杂乱的问题中找到规律，并通过比较不同类型问题的占比，更直观的了解用户反馈的问题主要集中在那些方向。如下图所示，产品的反应速度及稳定性、模板和组件丰富度是用户反馈问题最集中的两项，前者影响用户最基础的使用体验，后者决定产品能多大程度上便捷的服务用户。良好的稳定性和反应速度可以让用户专注于任务本身，而使用模板能最快速的产出作品，降低新手的使用门槛，丰富的组件能够满足用户在各类复杂场景下的业务需求，减少组件二开成本，提高交付效率。针对这两个大的问题点，首先，对于那些能够在当前产品日常迭代中优化的点，我整理后会以需求的方式向产品团队提出，并在日常迭代中逐步优化；然后，对于那些需要“伤筋动骨”做底层优化以及长期运营沉淀才能有效改善的问题，我们会进一步向用户收集和完善相关信息，并将相关问题梳理到本次改版任务中，做系统的解决和处理。九、体验痛点分析-线下用户访谈在「05、体验痛点分析-用户调研部分」已经介绍了本次参与访谈的用户来源，但在实际执行时，我们也邀请了部分在线上问卷反馈中描述模糊不清、难以理解，需要面对面交流或者演示才能理解的问题的用户。访谈先通过与用户简短的沟通了解用户的岗位/职业以及使用莫奈的主要场景、频次、设备等，然后通过给用户设置一到两个简单的任务，观察用户在完成任务过程中的行为、表情、语气等，以了解莫奈在一些典型使用场景下的易用性及可用性。比如，对于视觉设计师：请在画布中添加一个条形图，并将条形图的颜色修改为绿色、激活纵轴辅助线、修改辅助线为虚线样式....；对于开发工程师：请在画布中添加一个环形图，并使用 json 为环形图添加一组动态数据....。之后，在用户完成基础任务后，我们还会针对用户关心的问题进行更细致的沟通，了解用户更细致的反馈。对于用户反馈的问题，我们整理后会在公司内部的需求及研发管理系统“行云”中以需求的方式提交给产品团队并同步添加反馈问题的用户为该需求的关注者，后续，当该需求的状态有任何更新时，问题反馈者都能及时收到更新。如此，受访者反馈的问题从需求提交到需求最终提测验收，都能在线跟踪并闭环。这样做既是我们团队的责任，也可以增进用户对莫奈的信任，并期望活跃用户后续能继续为莫奈提供建议和反馈。十、体验问题汇总-用户体验金子塔通过线上问卷调研及线下访谈，我们已充分了解了用户心声，接下来我们通过用户体验 5 要素模型，将各类问题进一步归纳并按照产品建设的上下游协作关系，把每一个具体的问题汇总给对应的角色，并由对应的角色产出具体的解决方案，然后通过线下会议同步各自方案并对方案进行评审和沟通，由此，关于体验升级的所有事项及具体任务便可周密安排，之后便是资源投入、推进升级工作具体执行。从用户体验 5 要素，分析「盒马鲜生」是如何收获百万好评的！前几天我去盒马鲜生凑热闹逛了一会，体验了一下盒马的商品品类、用户动线、展柜分布和设计、APP交互、品牌设计等方面。阅读文章 > 用户体验 5 要素模型，从产品的战略层出发，层层递进直到表现层，把影响用户体验最根本的因素分层并可视化，借助这一模型可以让大家对“用户体验”这个概念有更好的理解，并能促成大家在更大的层面上达成共识。以往谈到用户体验，大家首先想到的是界面是否好看、交互是否流畅，然而一些对用户体验也有着重要影响但“不可见、不直观”的因素却往往被忽视，尤其对开发侧同学更是如此，他们鲜有意识到产品的目标、内容以及性能等这类的因素，也是构成用户体验的重要部分。对于莫奈这样一款长期维护持续迭代的产品来说，好的用户体验并不能以“毕其功于一役”的方式来实现，而是要通过持续不断的改进和优化才能持续满足并提升用户体验，所以借助用户体验 5 要素等模型，我们引导产品及研发团队更好的理解用户体验，这样不仅能帮助设计师在本次体验升级改版工作中与大家高效协作，也非常益于之后日常产品迭代的沟通与协作。十一、体验问题汇总-体验升级方向上一步，我们通过用户体验金字塔将体验问题汇总并划分给了不同的角色，之后各个负责人产出解决方案并与大家评审和沟通，而体验升级方向正是基于大家对各类方案一致沟通后达成的共识和结果，体验升级方向以设计为主导，同时兼顾产品和研发的部分目标，我们用 5 个短句将五个升级方向概括，每个方向尽量解决一个维度的问题，比如“界面视觉质量提升”解决表现层的问题、“信息层级优化”解决框架层的问题。体验升级方向作为对体验升级结果的导向，将指导后续设计动作的展开。十二、策略制定-设计目标确定基于体验升级方向，接下来就要制定具体的设计策略，来实现体验升级方向中要达成的结果。设计策略制定第一步先确定设计目标，我们将设计目标拆解为三个方向，每个方向通过两个关键词定义。设计目标主要分为视角与交互两个方向，同时兼顾产品侧“易拓展、易维护”的需求。实际设计中，视觉与交互并非独自分开进行，在设计开始的阶段，需要先定义设计风格等基础设计要素，之后视觉便可在此基础之上全面展开，此时视觉设计要考虑交互的效果，交互设计也需要斟酌设计的展现。十三、设计执行-视觉风格定义对于设计目标中关键词所代表的那些抽象概念，每个人的认知可能都不一样，但是搜索引擎和大数据推荐的算法，可以告诉我们普通大众对那些关键词所表现出来的意象是如何认知的，之后我们便可从符合大家普遍认知的视觉素材中，提取出符合关键词所表达出的意象的设计要素，之后通过在设计中应用这些设计要素，就能把关键词定义的抽象的设计概念转化为具象的认知，我把这个过程称之为“抽象概念的可视化”。而“情绪版”是我完成上述工作的主要工具。我们使用搜索引擎以及 AI 推荐的关联算法，针对“科技和高效”这两个视觉目标的关键词收集了海量的音视频设计素材，把这些素材集合在一个画布上形成“情绪版”，然后通过归纳这些素材共有的特点/要素，就能将体现“科技、高效”这两个概念的所有设计要素剥离出来，并通过简洁的文字加以描述和归纳。此后，我们通过在视觉设计执行的过程中应用这些设计要素，通过合理的搭配和组织，将这些设计要素融入到莫奈新的设计语言，如此，产品最终便可在视觉上呈现出与视觉目标关键词定义的一致的视觉和心理感受。十四、视觉风格定义中的 7 要素基于情绪版提炼出的设计要素其实已经足够具体，但是如何将这些要素应用在设计中，我们还需要进一步归纳。我个人一直以来习惯从形、色、字、质、构、动、音 7 个维度分析一个设计作品的设计风格，就如同人体是由肌肉、骨骼构成的一样，以上 7 个维度也是构成一个设计作品的“经、骨、肉”。所以，我认为对于一个设计作品，尤其是 UI 设计作品，以上 7 个维度基本能够完全概况它的风格，所以当我要为自己的产品做风格设定时，我也是从这 7 个维度出发来为每个维度定义具体的风格和策略。这种细分维度然后定义风格的方式有多种优势，其中最明显的是它能够将我们风格定义的设计工作条理化，避免反复尝试和摸索造成的大量返工和思绪混乱，比如，如果我对质感的定义有偏差，不符合情绪版中提取出来的设计要素的特点，这时候我只需要对“质感”这个维度的风格进行优化和调整，而不需要推翻整个 7 要素重新再来。这种设计方式让我的设计更加理性，也让后续设计执行的工作更加的有条理和舒适，从设计风格落地的角度来讲，这种方式我个人认为是最能够忠于情绪版所归纳出的设计感受的方法。十五、视觉改版：造形演绎对于产品界面的造形设计，一方面依照情绪版中提取的设计要素“透视、空间感、异构造形”来考虑，另一方面我也结合莫奈的产品 Logo 做了适当的抽象和演绎；两者结合最终确定了当前莫奈的造形设计。首先，产品左侧主导航采用了具有一定透视角度的异形设计；产品顶部标题区域也采用了相同的设计思路：左侧为品牌 Logo 设计了一个容器，Logo 在其中容纳放置；Logo 右侧收起的区域预留了常用公告、跑马灯的设计，方便产品把日常重要信息同步给用户；最右侧呈现用户个人中心、空间管理、使用帮助等菜单项。对于这种异形的设计，用户是否能够接受，在设计开始时我存在一定的疑虑，因此在设计初稿定稿后我们邀请了部分用户做了测试，大部分用户认为新的设计有创意具有鲜明的特点，也有部分用户认为透视的设计看着较为怪异，尤其是左侧主导航的文字在添加透视效果后识别性存在一定的问题。因此针对用户反馈我优化了透视的角度，从多个透视数值中选择了一个即能展示透视的设计效果、又不至于透视过大导致文本图标等变形严重而不易识别的角度，其次，我还配合开发同学对导航透视文本和图标的渲染做了一些优化，从而使其具有更好的识别性和清晰度。在以上两项优化完成后，新的用户测试表明大家对该设计的满意度有很好的提升。十六、视觉改版：色彩搭配莫奈在改版之前就已经有自己的品牌色，新的色彩升级围绕“科技与高效”两个关键词，结合情绪版提取的设计要素，将原有品牌色做了细微的调整。首先蓝色饱和度增加，绿色调整色相使其偏向蓝色的一端并增加亮度。如此，当两个颜色搭配使用时，蓝色作为主色调体现科技、可靠的视觉和心理感受；绿色作为点缀色和强调色，体现活力、高效与创新。蓝绿对比强烈，具有很好的场景适应性和品牌特色。十七、视觉改版：字体选取字体作为 UI 界面中最常见的元素以及作为信息呈现的主要载体，字体的使用对产品的易用性和视觉表现有着非常重要的影响。结合体验升级方向中定义的“增强品牌特色”的目标以及情绪版中提取的非衬线的设计要素，对于字体的设计风格，我将其归纳为"定制化、品牌性和非衬线"。为了实现字体风格的设计目标，我选取了两款京东品牌的定制字体“京东朗正体”及“京东正黑体”。京东朗正体经过多次迭代，目前具有丰富的字重和独特的品牌特色，将该字体用于莫奈的品牌 Logo，可以很好的体现京东的品牌特色并体现出与其它产品差异化的字体设计。京东正黑体主要用于莫奈产品中的数字、拼音、英语、数值符号四个场景，该字体也是京东金融 APP 的系统数字字体，其最大的特点是等宽、简洁、紧凑具有很好的识别性与易读性，并且该字体有较小的字符宽度，所以当其用于大屏编辑器时，能够在相同的空间下容纳比其它字体更多的字符，而这个特点对于“寸土寸金”的属性面板尤为重要。此外，该字体在作为数字字体使用时，其小数点、千分符等也具有很强的特色，具有不错的辨识度与个性。而产品中的中文字体 Mac 与 Windows 系统有不同的方案。在 Windows 下，由于系统自带的微软雅黑当字号小于 14pt 时，字符在水平方向上存在明显“参差不齐”的现象，加之该字体很少更新，没有针对当前高像素密度、高分辨率的屏幕特点做相关的适配优化，所以在高分屏下，其字体边缘会有明显的锯齿。之前在用户调研中，有用户反馈字体模糊不清、识别困难也是上述原因造成，所以 Windows 系统下莫奈界面字体选取了思源黑体，思源黑体是 Adobe 与 Google 联合开发的开源字体，其字重丰富、字形简洁、现代，能够很好的适应 PC 与移动端的显示，也能适应当前已渐趋主流的高分屏，所以使用该字体能够给用户带来不错的信息呈现。除此之外，思源黑体的字形特点与 MacOS 系统下的苹方字体相似，因而使用思源黑体在一定程度上也能够保证用户在不同平台使用莫奈时体验的一致性。十八、视觉改版：质感表现质感的呈现主要通过色彩、透明度的变化、毛玻璃效果的模拟来实现，色彩与透明度的变化搭配毛玻璃效果使用，可以呈现科技、轻盈的质感。十九、视觉改版：结构设计结构设计主要目标是组件化及原子化，莫奈最核心页面是大屏场景编辑器，该页面承载着可视化大屏由 0 到 1 构建所需的大多数功能，也是莫奈产品日常迭代维护投入资源和成本最集中的模块。以往编辑器的界面设计虽然也有不错的设计规范，但是并没有按照原子化、组件化的思路来考虑各类组件组合使用时的搭配问题，因此基于以往的设计规范，大屏编辑器页面的产品需求总是需要 UI 产出设计稿研发才能开发，且由于没有系统的梳理过编辑器页面各种组件的类型，所以部分组件在同一页面的不同位置存在不同的形态；还有一些组件，在具体页面中的使用并不符合该组件的功能和用途，存在错用乱用的情形，由此造成编辑器的界面设计、开发和维护都具有较高的成本。新的改版设计，在设计之初就联合产品对编辑器内的各个模块所包含的各类组件进行了梳理，通过将各个模块的组件罗列出来，然后重新梳理组合、去重、合并之后，我们就可以知道当前编辑器界面总共有哪些类型的组件，以及每类组件用在何处，而组件原子化后也通过间距规范、使用场景示例等方式解决了如何用的问题。原子化的组件，精简了组件的数量，同时每个组件也针对自身功能和用途的特点进行了优化，在此过程中也考虑了组件搭配、组合使用的适配和呈现问题。比如，针对颜色选择组件，我们默认以十六进制展示颜色色值，并在色值后以百分比显示该颜色的透明度，我们还在色值后面增加了色值预览的小色块，这样的设计兼顾了开发与设计同学使用莫奈的场景。对于开发同学，他们在代码中习惯使用十六进制色值，而设计师更习惯于 RGBA 或 HSLA 的调色模式，因此，虽然十六进制的色值也能包含透明度信息，但我们依然在颜色后面增加了百分比及小色块，已帮助设计同学确认颜色的正确性，此外我们还通过色彩显示模式切换、自动输入校正等手段，确保不管用户输入的颜色采用何种方式，最终属性栏都是按照用户设置的模式以统一的格式呈现。而诸如此类优化，在本次体验升级中不胜枚举。二十、视觉改版：动效设计莫奈的动效设计主要有两类，一类是用于页面视觉效果营造的氛围类点缀动效，另一类是用于功能及信息传递的交互类动效。两类动效都通过“节奏感、轻盈”的设计风格，传递科技、高效的视觉感受。在本次动效交付中，为了保证动效的清晰度与流畅感、并减少动效的体积和提升动效加载速度，动效文件均采用 Json 代码的形式交付前端，该类动效由浏览器在网页端实时渲染，具有矢量动画的特点，能适应多种设备及屏幕分辨率，具有优秀的前端呈现效果。首页科技感流光氛围动效页面及大屏加载 Loading 动画二十一、设计执行-典型页面效果1. 产品登录页2. 产品首页-我的可视化页面3. 我的可视化页面改版前后对比4. 大屏模板页面5. 可视化场景编辑器页面6. 可视化场景编辑器页面改版前后对比7. 产品主要 ICON 设计二十二、交互优化：图表属性配置优化针对视觉层面设计优化后，接下来针对莫奈典型的用户使用场景以及之前线上问卷、线下访谈中用户反馈问题比较集中的一些场景进行交互层面的优化，我们交互优化的目标是“简单、流畅”。首先进行交互优化的是各类图表的属性及配置项设置相关的交互优化。莫奈作为一款可视化场景搭建平台，为用户提供了各类型的图表，每个图表均具有“样式、数据、交互”三大类配置属性，这三大属性，从图表看起来是什么样、图表展现了什么数据、图表可以与用户进行那些互动三个维度解决了图表在数据可视化呈现中最基础的需求。由于图表在数据可视化呈现中频繁使用，所以与图表配置相关的操作自然也是相当高频和常用。当前版本下，图表配置项主要问题有两个：一个是图表配置项层级过深，用户需多次点击才能对某一内容进行修改；第二是批量对多个图表的相同属性进行修改在当前版本不可用，导致用户图表配置成本高。针对用户最关心最影响体验的两个交互问题，我的优化方案如下。优化图表配置项层级过深，用户需要多次点击才能对某一个内容进行修改的问题要解决问题，首先要知道问题从何而来。经过深入与产品、研发同学及部分用户访谈沟通后，我发现当前导致图表配置项层级过深主要有两个原因，分别是产品规划与设计展现。具体来讲，产品层面有三个问题：① 产品对于当前图表配置项的结构梳理是以程序的逻辑来呈现，而非以用户的视角来归纳。举个栗子，在当前版本如果用户要修改柱状图某个柱子的颜色，操作路劲如下：样式>数据系列>系列名称>形状设置>颜色设置。而这一路径为何如此设计？因为颜色这个属性的后端代码就是这样的结构。这一路劲把用户最易理解、最直观的属性名放到了路劲的末位，而在它之前呈现的内容、名词其实都有一定的理解难度，尤其对于新手更是如此！用户想要更改颜色，Ta 首先需要知道什么是数据系列、其次还要了解形状设置可能包含哪些属性等，正因具有一定的门槛且不直观，所以用户初次进行上述设置时往往需要在样式一级菜单下点击多个属性、反复尝试确认，才能最终完成颜色修改的设置，这样一个使用的流程自然会给用户“层级过深”的感受② 图表配置结构存在冗余、不够精简。还是上面那个栗子，用户修改颜色需要触达第 5 级。但是这种细致的分层分级的结构设计是必要的么？答案是并不是！因为只有用户关注的才是有用的，产品应该提供用户想要的内容而不是强塞给用户产品具有的所有的功能，所以我们没有必要把图表在后端具有的所有属性都罗列出来，适当的对配置项做些精简，合并一些同类的属性、然后通过“更多”按钮隐藏一些对图表呈现无关紧要的内容，如此，图表配置项便能瘦身，用户使用起来也更轻松。③ 图表配置项的各个属性，在属性列表的排序没有遵循用户使用的频次和习惯。排列在前面的属性并非用户最常用的那些，因此用户要在列表中从上而下的“翻找”，这种使用过程中的顿挫感，一方面影响了用户使用产品的效率，另一方面也加深了用户“层级过深”的感受。知道了问题从何而来，那么解决问题便也变的简单。首先，我们联合产品经理，对莫奈已有的 60 多个各类图表组件，逐个进行了配置项的梳理，当所有图表的配置项都以思维导图的形式呈现时，他们的共同点、同类项便一目了然。此时，之前存在的“图表配置结构存在冗余、不够精简”的问题便可解决。而对于先前存在的 01 与 03 问题点，在上述梳理工作完成后有了一定的优化和改善空间，但仍然存在一些不确定的因素影响设计和产品的决策。比如、“属性列表中，哪些属性是用户最常用的”，类似这样的问题我们通过访谈几个用户并不能得到可靠的结论，对此，一方面我们通过为配置项区域增加数据埋点，分析用户对各个配置项使用的频次来为后续的持续优化提供决策支持，另一方面我们也参考、调研了同类产品中一些用户量较大、设计质量较高的产品来进行当前有限的优化。配置项层级过深的另一个原因，是属性配置列表的结构及布局设计存在“深层级、空间利用率底”的特点。如下图，左侧图片示意了旧版莫奈的配置列表设计结构。可以看到旧版设计完全采用树结构的形式将各项自上而下排列，并且采用每级向右缩进一个字符的形式来做层级的区分，旧版的设计基准尺寸为 1440PX，属性配置栏本身较窄，而逐级缩进的策略更是导致信息展示困难；其次，树状的结构在展开层级较多时，部分一级属性会被挤到一屏之外，用户需要频繁滚动鼠标滚轮才能看全信息，综上，旧的设计策略也给了用户“层级深”的直观感受和交互体验。新版设计首先增加了配置属性栏的宽度，让其能够在横向上展示更多信息；其次，新版设计，将提炼后的一级属性标签固定在属性配置列表左侧。相较于之前，这样的设计始终能够让用户清晰的看到所有一级属性，用户可以随时在各类属性中切换，并且右侧属性内容的滚动也不会影响一级属性的位置，如此就给了用户很好的全局观和使用的便利性与确定性。最后，新版设计采用分隔线与色块结合的方式来表达属性列表内的层级关系，去掉逐级缩进后，配置列表在视觉上更加整齐一致、且空间利用率也有了进一步的提升。优化“批量对多个图表的相同属性进行修改在当前版本不可用，导致用户图表配置成本高”的交互问题在数据可视化场景搭建过程中，用户对多个图表的相同属性进行统一修改、一次性调整的需求非常迫切和刚需。比如当前可视化大屏中有 N 个图表，此时，用户想要将其中 6 个图表的横轴颜色调整为相同的绿色，在用户的视角下，此时的操作应该是先选中 6 个想要调整的图表，然后找到横轴颜色设置项，之后统一调整色彩。但莫奈当前的版本，如果用户按照上述流程操作，看到的将是下图左侧的示例：图表多选之后，对齐、坐标等基础项仍然可用，而与属性相关的其它设置并没有被聚合并呈现，在此情况下，用户想要完成最初的目标就只能 6 个图表逐个依次调整！显然，这样的操作并不符合用户预期，它使用户的操作效率大大降低。上述问题是一个体验相关的问题，同时也是一个强技术相关的问题，我们想要让多个图表的同类项聚合显示，首先要能在底层对各个图表的配置项有十分清晰的梳理，好在我们解决第一个问题：“配置项层级过深”时，已经完成了对 60 多个图表的细致分析，有了这项工作的基础，当前面临的问题便不那么棘手。如右侧示例：当用户多选图表时，图表的同类项会被聚合，并以用户视角的理解，将属性类别进行分类，这样的分类打破了传统的按照图表固有属性排列的惯例，而是把图表固有属性整合归纳到用户易于理解的类目下，如此，用户多选图表之后便能够便捷的对图表的各类属性进行统一的调整和修改，而这样的操作是符合用户习惯和预期的。二十二、新建大屏交互流程优化新建大屏作为创建数据可视化场景的第一步，它的易用与否直接给了用户最直观的对莫奈的第一感受。对于新建大屏的交互优化主要有三个方面：创建流程、模板预览与模板展示。创建流程优化：首先，旧版的创建流程：新建可视化>选择模板>大屏命名>创建成功。 这一流程中“大屏命名”是没有必要的，因为用户在新建可视化大屏时可能存在多种需求的可能性，也许用户只是想看看创建完成后内部编辑器是什么样，或许用户有实际项目，但当前项目名称也并未确认，所以在此时添加一个不可跳过的步骤着实让人不爽，况且大屏创建成功之后在多个位置有多种方式都能便捷的修改大屏名称，因此，更快速的进入编辑器开始设计创作才是用户创建可视化最根本的目标，所以，拿掉“命名流程”，显然可以让整个交互的过程更加流畅。模板预览与模板展示优化：原有的设计，当用户点击创建大屏按钮后，会在页面底部拉起一个小的抽屉，抽屉内包含一个空白模板以及有限多个其它内容模板，而在如此狭小的区域展示这么多内容，不管是从交互效率还是视觉效果上看，都显得格外的拘谨和难受。新的设计首先是全屏铺开，尽可能充分的利用页面空间。在模板展示及预览方面，我设计了列表展示与缩略图分布展示两种方式，并添加了分类标签和搜索按钮，此外还联合产品增加了模板收藏功能，这样用户可以把自己喜欢的、常用的模板收藏，方便之后更快速的使用模板预览方面，在两种布局模式下，用户鼠标滑过模板缩略图时，模板均会以较大的视图动态呈现模板内容。在列表模式下，模板预览窗口固定在页面右侧区域；缩略图分布的模式下，预览窗口根据鼠标指针的位置激活。当用户选中某个模板时，点击底部创建按钮即刻进入大屏编辑器界面，此时用户便可基于模板内容进一步完成自己的定制化设计。二十三、全局搜索交互优化如今移动端各类产品已经给用户养成了算法推荐+自主搜索的产品使用习惯，这种习惯当前也逐步从移动端往 PC 端转化。搜索能从海量信息中最快速的找到用户关心的内容，因而提高搜索功能的易用性，能明显提高用户使用莫奈的效率。以往的搜索功能按照不同模块和场景分布在不同位置，用户需要先找到对应模块才能进行搜索，降低了搜索的便捷性和易用性。新的设计在保留之前搜索能力的基础上，新增全局搜索，用户在一个位置即可完成对组件（优先展示当前画板内组件）、属性、帮助等内容的搜索和查找，进一步提升搜索的效率。二十四、图层管理交互优化一个数据可视化场景，通常是由 N 个数据图表与其它数据要素一起构成的多个页面来呈现和展示的。这些页面内包含大量的元素，而对这些元素的管理主要通过大屏编辑器页面左侧的图层管理面板来实现。一般我们对图层管理的手段主要有三种：命名、分组和查找。给组件命名是一个耗时且麻烦的行为，我们在做用户调研时发现，大部分用户都没有给组件规范命名的习惯，大多数情况下，组件在图层面板列表内都是以默认名称或者默认名称+1、2、3 的形式存在。这导致了当页面组件较多时，通过组件命名来查找组件其实相当困难，所以自动生成缩略图的形式相比让用户耗费大量时间为图层命名更能改善用户体验。缩略图以快照方式保存当前组件最新状态截图，从而帮助用户更快速的将图层组件与页面上的内容对应起来。新的设计，图层成组后也取消了缩进字符的效果，我采用给成组对象设计更明显的分组示意图标以及为组内列表添加深色色块的方式，完成了成组对象与列表内其他要素区分的需求，新的设计使成组对象更易查找和识别。此外，我们还增加了对图层列表的搜索功能，帮助用户快速定位名称已知的设计元素。二十五、经验总结此次体验升级是设计主导推动，产品与研发紧密配合的结果。体验设计师作为最接近用户的群体，是产品与用户沟通的桥梁。时刻关注用户心声，并能将用户细碎的吐槽和各类反馈转化为体验痛点、制定对应的优化策略是体验设计师的基本功。而对于设计和产品本身是否热爱，也是设计能否不断精进、体验是否能够不断提升的关键。好的设计不仅服务了产品、帮助了用户、同时也成就了设计师本身。本人为莫奈提供设计支持的三年多时间，在没有 KPI 要求和外部压力的情况下，通过公司内部需求管理系统“行云”，为莫奈提交 231 个体验优化建议；以线下线上的形式面向莫奈产品及研发团队进行了 20 多次专业分享。正是日常这些积极主动且持续的努力，使我本人与莫奈产品团队建立了非常友好紧密的联系，这也为推动本次体验升级改版提供了巨大的助力。我认为作为体验设计师，我们不仅要对用户有同理心，为用户创造愉悦舒适的感受，同时也要对身边的同事、职场中的合作伙伴有相似的同理心和换位思考的意识，体验关乎人、环境与生活，尝试在生活中磨炼自己创造好的体验的能力，并将其应用到体验设计师的职业工作中，我相信，倘若如此实践，必能在职业和生活中都获得有不错的成就。好的产品，必然是持续关注用户诉求，不断迭代发展的产品，好的体验设计也必然是陪伴产品不断优化、持续精进的设计，复盘的意义不仅是沉淀过去的经验，更是为未来更好的体验蓄能。此次分享如能为大家带来那怕一点点的启发，本人便倍感荣幸、开心至极！ 期望大家能够与我有更多交流，么么哒~~欢迎关注作者的微信公众号：「BYMD」本篇来源：优设网原文地址：https://www.uisdc.com/jd-monet-user-experience-upgrade-design
对话框 用户 模态 对话框是一种重要的交互方式，主要用于完成信息传递。对话框很常见，但并不见得每一个设计师都可以百分百地弄明白对话框这个概念。这篇文章是对「对话框」的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。更多交互方式：6000字干货！3个优秀交互设计师应该具备的边界感引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。阅读文章 > 一、了解对话框1. 对话框定义对话框是叠加在应用主窗口上的弹出式的窗口。对话框以对话的方式让用户参与进来，在对话中它给出消息或要求输入。当用户完成消息的阅读或者作出选择后，可以取消或者接受该对话框，之后，这个对话框便消失了，把应用的主窗口交还给用户。关于对话框的概念，以下是百度百科的解释：对话框越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作 。2. 对话框分类按照对话框的交互方式，可将其分为「模态对话框」和「非模态对话框」。我们可以把他们看作是两个小家族，模态家族的人比较强硬，而非模态家族的人相对温柔一点。两个家族的主要区别：是否强制用户对其进行回应。模态对话框：是位于浏览器的主页面核心区域，需要用户对它做出相应交互，模态才会消失。而对话框会因为自身的吸引程度、停留时间、信息量承载多少被划分为多种对话框类型进行区分，常见的对话框分别为：普通对话框、内嵌表单对话框、分步表单对话框、文件选择对话框、复杂信息展示对话框。① 何时使用模态对话框在重要的警告时使用，避免出现严重问题、或修正已出现的问题。例如：用户录入信息后未保存就要关闭时，弹出模态对话框提示用户保存。在需要用户输入信息或进行某操作，才能继续当前流程的时候使用。例如：在使用 Canva 资源网站时，点击“上传”会弹出模态化的登录/注册窗口，引导登录/注册后使用。用来将复杂流程拆分成简单步骤。例如：Teambition-分步骤的模态对话框式创建项目。用来获取信息，该信息可大大减轻用户的后续操作/精力。例如：在转账场景中，如果先复制一个账号，打开手机银行 APP（以招商银行或平安口袋银行为例），系统会通过模式对话框询问用户是否向这个账号转账，这样的设计做到了预判用户行为，节省用户后面的操作成本。非模态对话框：与模态完全相反，它更加温和，不会强制打断用户正在进行的现有流程，对用户的干扰比较小。通常这类对话框只会在屏幕上短暂停留，几秒就会消失，也因此用户容易忽略它们的存在。因此非模态对话框不适合展示重要信息、不能承载大量文案，常见的类型有：通知提醒、全局提示、警告提示、气泡卡片、文字提示。② 何时使用非模态对话框在获取与当前流程不必要信息的时候使用。例如：平安口袋银行和平安数字口袋采用气泡卡片展示更多功能或引导用户登录。不打断重要流程中使用。例如：在平安口袋银行 APP 中购买理财时，如果遇到疑问的话，不会弹出框提示让客户咨询投顾，而且采用气泡框形式提示，不打断用户购买。简单来说，两者的优缺点见下表：二、对话框常见应用场景从前面讲到的定义来看，对话框最主要的目的是：传递信息。那么从目标导向的角度来看对话框，对话框要传递的信息的常见应用场景主要有以下五种：1. 属性对话框属性对话框是向用户呈现或让用户改变所选对象的属性或者设置。一般来说，在属性对话框中，用户可以修改当前的选择，也可以设置应用程序的全局属性。该对话框适用于非频繁操作和或仅需要设置一次的属性，属性对话框常见在一些设置、详情中。例如：Windows 11 系统的设置界面，可设置系统的全局属性。2. 功能对话框功能对话框通常从菜单中打开，是最常见的模态对话框，只控制单一功能，如打印、文件上传/导入、插入对象或拼写检查。该对话框不仅允许用户启动一个动作，而且也允许用户设置动作的细节，属于模态对话框。例如：浏览器的打印功能，会弹出模态化的打印窗口，用户可设置打印的细节。例如：飞书的文档导入功能，使用模态化对话框，引导用户选择文件类型或进行批量导入操作。3. 进度对话框进度对话框是由应用程序启动的，而不是由用户请求而启动的。它们向用户表明当前应用正在忙于某些内部功能，其他功能的处理能力可能会降低。每个进度对话框都应该向用户清晰地展现如下信息：一个耗时的进程正在进行现在一切正常该进行还有多长时间才能完成还有多少事情或项目没有做完用户如何才能取消该操作，或重获控制权例如：使用 Axure 软件导出 html 文件时的进度提示，既提醒用户当前 Axure 正在运行，又告知用户当前文件导出进度。例如：使用 Sketch 软件导出文件时的进度提示4. 通知对话框通知对话框将一些重要信息报告给用户。来源可以是一些触发的事件，也可以是其他用户的通知。常见的有通知中心对话框，处理完成某个操作的告知等等。例如：花瓣的通知提醒例如：脉脉的隐私政策阅读提示和汽车之家的开启通知提示，均采用模态对话框方式5. 公告对话框公告对话框，和进度对话框一样，由应用程序直接启动，不是由用户请求发起的。公告对话框有三种：错误、警告、确认。这种对话框通常不会要求用户填写什么，只会询问你“真的要进行吗？”或者告诉你一件事情。所以在这种对话框上，一般只会有只有[取消]和[确认]，或者[OK]。属性、功能、进度对话框，是用户主动请求的--它们为用户服务。但是，应用程序发起的公告对话框--它们为应用程序服务，常常会牺牲用户利益。由于公告对话框比较常见且常常牺牲用户利益，那么我们怎么把这些讨厌且无用的公告对话框直接铲除掉，换成更加友好、能给用户带来真正帮助的交互方式呢？接下来我们来一起看看怎么让公告对话框“名声鹊起”。三、怎么让公告对话框“名声鹊起”我们可以从应用本身和对话框本身着手提供友好的交互方式，减少公告对话框的出现频率。1. 应用方面解决用户错误的方法不是指责用户，让用户再认真一些，或者给他们更多的指导练习，而应该优化应用设计，让犯错变得困难。① 让应用变“聪明”，减少用户犯错使用有界控件。比如验证码输入框、数字键盘等示例：登录蓝湖时的短信验证码输入框示例：转账时输入金额的数字键盘，金额大小的位数提示；平安口袋银行的身份证号专属键盘提高可见性，用户可自主纠错示例：输错密码是一个很难避免的错误场景，语雀密码登录支持可见密码，一来是考虑安全问题，二来在用户输错的场景下可以打开眼睛，即可见密码，减少出现错误频率。具备预判思维，在容易出错的地方提供更方便的功能示例：在支付宝聊天窗输入一串数字，支付宝发现这个问题后，提供了识别后直接转账的功能，预判了用户的惯性，减少错误发生Zoom 拉会前预设值在加入会议室的界面，提前选择是否在进入会议房间后“不自动连接语音”和“保持摄像头关闭”，有效避免忘记闭麦或者忘记关摄像头就直接加入了线上会议的意外尴尬让操作可“复原”，提供撤销功能在很多破坏性的操作都会二次进行提醒，让用户确认操作，比如说删除操作。在删除之前都会询问用户“你真的要删除吗？”想一想……你在看到这些提示的时候，是不是眼疾手快地按下那个「确认」按钮？这种对话框在没有容错处理时，非常容易被我们这种无脑按「确认」的用户酿成大错。比如我“手贱”只是试试这个删除，然后就把某个表几千条辛苦写了一个月的数据删掉了，由此可见系统的容错处理有多么重要。示例：Windows 系统在早期的时候，删除文件时会让用户进行二次确认，但这是完全没必要的，因为删除文件不是真正的删除，还会在回收站里面。Mac 系统：在回收站删除文件将是永久性删除，此时的确认对话框才是对用户有用的。2. 对话框设计方面从对话框本身的设计优化出发，我们可以对话框的使用场景和文案方面着手进行优化设计。① 对话框使用场景其实什么时候使用对话框、是否使用取决于你要给用户展示的信息是否重要。例如你在手机上买了一张电影票，支付失败的结果如果用 toast 展示就会容易被用户忽视。那么等到用户到了电影院才发现自己购买失败，那么用户极有可能当场卸载你的产品。模态弹框会打断用户当前操作流程，所以「使用对话框要克制」。总原则是：能在界面展示就不用弹框，能用非模态弹框的就不要用模态弹框。总之，重要的信息优先考虑使用对话框。具体的使用原则有：弹框使用尽量克制。文字需要精简，使用行为召唤动词。注意区分复杂任务和轻量任务，选择对应的弹框类型。反馈要及时。可使用引导帮助选择。② 清晰且友好的文案如果非要使用对话框，那么请使用友好尊重用户的方式。当我们说到人与人之间的交流时，语言是重要的媒介，而用户与产品之间同样如此。在设计过程中应始终努力设计出有效的提示性文案，但是, 一定是有比没有要好吗？个人认为也是不必要的，糟糕的提示性文案甚至会破坏产品中最好的用户体验。例如以下几种情况：含糊不清过于啰嗦无意义，产生误导无同理心因此糟糕的提示文案设计会误导用户在产品中采取不必要的操作, 从而使他们感到生气和困惑，甚至可能会破坏品牌对用户的忠诚度，产生本末倒置的结果， 也给用户带来不佳体验。所以，语言是使产品更加人性化的主要因素。产品的文案则充当了语言的角色，它可以使用户参与其中，影响他们的情绪，并把这种人机的功能性关系转化成人类的个人情感体验。而这种用户的情感体验才能够真正的彰显品牌个性，从而与其他产品区分开来。错误提示设计三步法尽可能准确地描述问题和哪里出错了，简明易懂。提出建设性意见，解决问题，保持流程前进不中断。如果此时问题还不能解决，告诉用户可以做些什么来帮助他们，以及他们可以向谁求助。不要责怪他们，礼貌的对待用户，在报错中加入情感。总结对话框可以成为帮助用户完成目标的有用助手，而不是让他们在每一步操守挫败的可怕绊脚石。通过保持对话框的可管理性，并且只有在他们的功能真的属于另一个房间的情况下才调用他们，你将很好地维持用户的工作流状态，保证他们会成功完成任务，并且满怀感激。本篇来源：优设网原文地址：https://www.uisdc.com/dialog-box-design
素材 网站 也有 大家好，这里是和你们聊设计的花生~ 又是一年开工时，在这里祝大家开工大吉工作顺利~今天为大家推荐一个超棒的绘画参考网站 PixelSquid，里面包含 20 多万个 3D 素材，涉及人物、动植物、武器、汽车、建筑、家具、艺术品等各个方面，且素材可以 360任意旋转，使用它可以帮助我们轻松找到准确的绘画参考角度。往期推荐：Creative Fabrica！下载10w+高质量字体与矢量装饰素材的宝藏网站大家好，这里是你们聊设计的花生。阅读文章 > PixelSquid网站直达： https://plugin.pixelsquid.com/PixelSquid 是国外知名商业图库 ShutterStock 开发的一个 3D 素材库，里面收录了 20 多万个可以 360 度旋转的实体对象，包含建筑、文化艺术品、人物、动植物、武器、食品饮料、服饰、装饰、家具、工业设计等 21 个类型。素材涉及面广泛，建模质量高，可以任意定位到不同角度，是绘画必备的参考网站之一。建筑类素材（部分）：人物类素材（部分）：家具类素材（部分）：动植物类素材（部分）：武器类素材（部分）：在网站内我们可以直接输入关键词搜索所需的素材，网站右上角也有“Categories(类别)”版块，可按分类目录查找素材。点击卡片可以进入素材的详情页，进入后 3D 素材有一个加载过程，加载完成后使用鼠标点击素材并拖动，可以旋转查看素材的任意角度。素材底部有注释标签，点击后可跳转至同类素材，右侧也有同类素材推荐，点击后可迅速跳转至相关详情页。网站提供 3D 素材的 PNG（2048*2048px）和分层 PSD 文件下载，但大部分需要付费订阅，价格也比较贵。没有订阅的话下载的文件有水印，且不可商用。如果仅作为绘画参考，我感觉直接在网站上浏览调整，然后使用截图工具将视角固定下来就足够了，大家可以根据自己的实际需要选择使用方法。除了根据分类目录，网站还有一个“Collections（收藏）”版块，里面收录了 90 多个不同主题的精选系列，如纸质书本、约会、贸易、健身、烹饪、玩具、运输、旅游、节日、赛博朋克、季节、太空、医学、音乐等。每个系列都包含上百个与该主题相关的 3D 元素，省去我们逐个查找的功夫，非常便捷。PixelSquid内的精选系列“太空”主题系列网站也有提供部分免费素材，这种资源在其卡片左上角有蓝色的“Free”标签，下载素材前需要注册登录。（免费版块直达： https://www.pixelsquid.com/png/free ）PixelSquid 内的免费素材以上就是今天为大家推荐的绘画参考素材网站 PixelSquid，里面包含 20 多万个可以 360任意旋转角度的 3D 素材，可以帮助我们快速找到合适的参考角度。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：视觉设计师来收！免费商用字体推荐：卡通体篇（13款已打包）本期推荐的是免费商用的卡通体，此类字体非常适合运用在可爱活泼、轻松休闲的设计中，会有不俗的表现力，常常能达到“画龙点睛”的效果。阅读文章 > 画面单一/杂乱怎么破？高手总结了10个实用设计技巧！画面太单一亦或是太杂乱，是做平面版式设计时绕不开的话题。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/pixelsquid
人工智能 工具 你可以 大家好，这是 2023 年 1 月的第 4 波干货！想必很多设计师同学都已经回到岗位开工了吧？那么这些新的设计工具和素材，就有用武之地了！过了个年，新的图标字体图库倒是没增加，新的人工智能设计工具倒是多了一堆，更加细分的功能，更加突出的效果，从网页到移动 APP 都覆盖了，这个数量增长甚至催生了专门搜集整理人工智能工具的网站。今天的文章开头就是过年期间新崛起的 AI 工具，相当带劲。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第三波！2023年1月精选实用设计干货合集大家新年好！阅读文章 > 下面我们具体看看这一期的干货：1、人工智能演示文稿生成工具https://glimmerai.tech/人工智能P图早就不是新鲜事儿，现在你也可以使用 AI 做演示文稿了！这个名为 Glimmerai 的工具就可以帮到你，你所需要做的就是尽可能详细描述你的需求，这样 AI 才能尽可能贴近你的目标，等 AI 生成之后演示文稿之后，你可以进一步使用文本指令或者语音指令，来进一步细化。GlimmerAi 使用的是目前最热门的 GPT-3 和 DALL E2 来生成，目前这项服务依然处于 Beta 阶段，可以免费试用，有需求的同学可以上手体验一下。2、人工智能网站UX文案重写工具https://www.usesuperflow.com/rewrite-chatgpt和上面的 GlimmerAi 类似，Superflow Rewrite 同样是一个基于人工智能、但是更加深入细分的工具，它瞄准了工作量同样巨大且磨人的网站 UX 文案这个分野，相比于形形色色的 AI 文案写作工具，它干脆帮你直接在网站内优化 UX 文案，只要你在网站上加入 Superflow JS 的标签，就可以接入 AI，它会根据已有的训练数据，帮你将 UX 文案优化到最佳，提供更好的 SEO 效果，在 UX 文案的层面上，提供更好的转化率和用户参与度。目前 Superflow Rewrite 提供 3 个月的免费试用，如果你是网站开发者，可以尝试一下。3、人工智能移动端内容创建辅助工具https://piggy.to/magic正如同 Piggy Magic 的创始人 Shaul Olmert 所说的，咱们不能将内容创建的工作完全托付给人工智能，但是人工智能能够成为很好的内容创作的辅助工具。Piggy Magic 就是在这样的想法下诞生的，你可以直接将你想要创建内容的主题直接输入 Piggy，它会直接生成易于在移动端屏幕上浏览的多媒体图文内容，文章、帖子、邀请函、简单的演示文稿都行，随后你可以在 Piggy 的 APP 上进行调整和修改。将精力集中在想法上，将基础的版面和内容交给 AI 吧。4、汇总 200+ 精选的优质人工智能资源https://aidesignresource.com/如果上面的基于人工智能的工具里，正好没有你所需要的，不妨打开这个名为 Ai Desiger Source 的网站，它从目前乌泱泱的 AI 工具当中精选出素质较为过硬的、实用性较强的 200 多个，并且根据功能分门别类，你可以在这里快速筛选出可能你需要的 AI 工具！我已经收藏了！5、将 Figma 设计直接转为 WordPress 网站https://yotako.io/WordPress 有着极高的自定义自由度，但是第三方的主题也很难一次到位满足实际需求。而 Yotako 提供的这个免费服务干脆从设计端入手，你可以将你在 Figma 中设计完成的页面以主题的形式直接导入到 WordPress 当中，并且随时更新。当然，Yotako 所提供的服务实际更加深入，如果你还未曾拥有域名和实际网站，Yotako 还能帮你搞定网站相关的域名服务、托管、设置、日常管理等多数工作内容，而你唯一需要操心的就是设计。有需求的同学有必要了解一下！6、直接在网页上进行团队协作的插件https://donenote.com/DoneNote 是一个针对性和实用性很强的插件，它让你可以直接在网页上做笔记、标注、评论、分享的 Chrome 插件，如果你的团队需要针对自家的网站页面或者产品进行讨论或者迭代，直接在页面上标注讨论就完事了，极大地提升整个团队的工作效率。DoneNote 的基础服务是完全免费的，你可以先试用体验一下。7、在线 Notion 封面制作工具https://notioncovergenerator.com/app现在使用 Notion 做笔记、知识管理、流程和项目管理的同学特别多，为每个 Notion 页面设计一个漂亮的、贴合的封面图倒也是不小的需求，这个在线的小工具就是专门干这个的，尺寸都是算好的，填好你要的文本内容，选好字体，一键下载，还能预览在桌面端和移动端上的效果，简单快速不用开 PS，省心多了。本篇来源：优设网原文地址：https://www.uisdc.com/2023-1-design-resources-vol4
用户 书架 起点 起点读书的用户数在今年迎来了 5 年来最大的增长。随着网文行业成熟，用户构成与行为模式也在迭代，下半年我们对起点的书架页进行了一次改版，探寻适合新阶段的最优解。—— Yanni、FANYI关于书架从现实中厚重典雅的书架、早年 app 常见的木质拟物 UI 书架，到今天起点 app 的书架，书架始终是读者保存与组织书籍的地方。但不同的是，网文的书架，注意力在不断更新的文本和推荐的内容，书架更像一个订阅源的集合。起点书架提供了列表和图墙两种陈列模式，单行列表模式被 90%用户使用，因为列表模式展示了更丰富的作品更新信息。往期案例：用起点读书的实战案例，教你从AE制作到落地开发的方案导语动画可以辅助视觉制作焦点，引导注意力的方向，越来越为广大视觉设计师青睐。阅读文章 > 一、背景随着行业成熟，书架功能累积带来可用性的挑战。尤其是今年，起点用户量大幅增长，用户内部开始有细分的需求，我们也时常听到不同的声音。起点承担了培育精品内容的职责，平台上追更用户更多。在书架这个重要路径，互动和召回能力有精细打磨的空间。2016 年（左）～2022 年的起点读书书架二、挑战新的起点 — 探寻新的最优解用户与业务的的诉求交缝，我们迎来了一次产研协同的改版机会。作为体验设计师，我们希望提高核心功能的满意度，让不同用户获得简洁高效的使用体验；同时，作为网文行业的设计师，我们也希望设计用户合理路径，重构有助内容业务健康发展的功能形态。三、洞察用户直觉认知的书架，是一个非常 简洁 的页面，这也是我们收到的持续的诉求和期待，然而事实并非如此。1. 来自书友的洞察起点的用户研究员和设计师合作，访谈了书架深度用户，其中包括部分担任作品运营官的专业网文用户。同时我们测试了现有的起点 app 和改进方案初稿，希望了解他们遇到的挑战和见解。我的地盘被挤占书架是起点流量最集中的页面，除了书籍列表，还有关联留存和福利的签到、阅读时长，以及承担孵化作品职能的导读。这些功能争夺注意力，并让用户感到属于自己的空间被挤占。自动使人焦虑网文作品生命周期的变化，如更新、下架使作品在列表中的排序变动，让用户感到不稳定和焦虑。不同场景，对书架功能的期待动态变化同一页面承载多个用户场景：日常追更时-书架是「床头柜」，用户只关注自己在看的两三本书，功能越简单越好；书荒时-书架变成自己维护的一个「书城」，找书的地方，希望一秒钟把养肥的书翻出来，依赖排序、筛选等功能，工具属性变强。用户分群，形成不同需求部分用户习惯保持书架只有少量书，而有些则会添加上千本。普通用户会出于对作品的支持成为作品运营官。分群用户养成了不同的书架使用习惯。网文阅读时间长、平台经验越久的用户，对书架要求越高。这看起来像少部分专业用户的烦恼，但对于起点来说，核心用户正是阅读沉浸度高，书龄近 5 年的资深网文读者。设计无法消除复杂性，而是将复杂性放在合适的位置。2. 深入现状3421 份 用户问卷展现了更详细的用户特征和行为差异：书架不同作品数用户的常用功能与难用功能书籍量 与高付费、高活跃、网文阅读历史久正相关，是 资深网文用户 的一个特征；书架常用功能 TOP3 签到、推荐票、书详情 ，其中 两个是单书功能卡的快捷操作；书籍量超过 500 本的用户对管理需求显著更高，对已有功能批量管理、排序、筛选的不满程度远超其他用户；书架作品数多的用户常用互动功能，也更易书荒，导读使用率和接受度都更高。除了阅读书籍，书架还是支持运营作品的重要节点。这个发现让我们感到兴奋，它也揭示了重塑更优路径的机会。四、设计方案1. 重新定义信息布局① 弱化导读侵占感新版本每日导读和书列表分区更明确，书列表展示区域更大，满足用户对于「我的地盘」拥有感的期待。② 围绕行为组织功能排序、管理、筛选等功能聚合为管理操作栏，方便快速找书。低管理需求的用户也可以选择自主关闭，保持书架简洁；③ 隐藏高级功能筛选是典型的深度用户需求。新版在原来的筛选功能基础上做了分级。点击筛选，快捷操作栏展示高频条件；再次点击更多才会展开更专业的多维筛选。④ 符合直觉的排序为什么加的书会乱窜？—— 访谈原声用户在日常追更和主动使用排序功能找书时，对排序功能持不同的预期。我们明确两种场景，重构了排序规则。追更场景：日常使用、刷新、自动同步——混合排序；例如，用户使用更新时间排序，数据刷新时更新的书往自动往前排；同时假如用户刚阅读过一本书，其也会自动往前排。主动找书场景：手动切换排序——仅使用排序维度重排。2. 提供高效工具一个分组里 795 本书，书太多了管理一次好几个小时。—— 访谈原声起点超过 3 万起点用户书架里有 2000 本以上的书。我们希望书架不止可以愉悦追订，也可以完成高效的管理。管理功能在书架上占据更重要的位置，批量管理应当拥有更好的操作体验。用户对于管理的诉求各不相同，但他们普遍会保持一套自己分组的逻辑，譬如按身份、按粉丝值、按养肥、按状态等。① 支持组别间快速切换旧版本的书架在进行分组管理时，需要频繁进入分组再退出分组，反复查看作品所处位置，这一点极大增加了用户管理分组的成本。新版本增加了分组快速切换的能力。用户在进行批量管理时无需多次重复操作，滑动浏览过程中会收起分组更专注选择。② 全部作品——支持跨组别管理考虑到用户可能存在多个组作品同时处理的情况，我们增加了全部作品列表，用户可以无视当前分组状况对指定作品进行操作；同时考虑到用户作品数量可能较多，可选择临时勾选按书名排序，实现快速查阅。③ 快速多选操作细节上，增加手势滑动快速多选及快速全选分组，提高操作效率。3. 加强人与书的连接追订模式由起点首创，天然更容易形成读者对特定作者的黏附，开启了网文产业化运作。出于对后续情节稳定获取的需求，读者又形成了「养书」的模式，先把新书加入书架，稳定更新到一定字数再去「宰书」。用户对追更提醒有诉求，单每章提醒略显频繁，积攒的字数太多又会使用户觉得难以追平，感到压力。① 完善追更能力阅读路径上，增加轻量的追更功能触达。每天第一次阅读书籍返回书架时，在书籍上方提供快捷开启提示作品更新过程，完善对更新章数、字数 按节点 提醒的能力「养肥」作品提醒。开启更新提醒后，如作品未读内容超过设定节点，展示「已养肥」标签，便于在合适的时机跟上更新进度。② 互动「月票机制」建立了读者和作者的强互动关系。同时围绕一本作品建立的书友值和书友圈，进一步加强了起点内部的情感凝结。这些互动让正版阅读生态活跃而有生命力。单书功能卡是书架的一个特色功能，除了承载管理操作，也是跳转书友圈、投票打赏的快捷入口。新版本对单书功能卡的互动、管理、票赏功能做了更明确的分区，同时高频票赏功能保留在底部符合习惯的位置。4. 重新审视行业范式对于书架中的「分组」，4 本书封宫格排列是一种行业范式。用户反馈「很难从列表里一眼识别出分组，有两个原因。一是起点资深用户囤书数量大；二是网封风格特点：起点书封系统覆盖了 70%的新书，相比单本定制的出版书封，网封的色块、疏密的对比更弱。4 本宫格形式有它的优点，露出书封多，少于 4 本时有数量的隐喻，但显然这些在图版率较大的图墙模式体现更明显一些。缩小书封比例、增大了图与留白空间的对比可以改善识别，列表模式下书封尺寸小，效果也比较有限，这个区域更像书和组的「logo」。我们引入了文件夹的形式，通过 颜色辅助 识别，配合组内置顶功能，可以曲线 自定义 分组的封面。5. 每一本好书，都是新的起点符号是文化的抽象体现。什么样的视觉符号可以传递 网文印象 ？网文是开阔而喧哗的大众文本，我们选择了「江湖」这个意向。江湖是天下，是生生不息的江河湖海，又是庄子所言与庙堂相对，广阔逍遥的适性之处。书架背景上，柔和的抽象图形描绘了辽远的山河图景，朦胧变化的极光色营造「织梦」感，几抹文字笔画「点」飘散其中，勾勒文学超越平凡生活的浪漫想象。起点今年提出了新的品牌主张 “让好书生生不息” ，缺省态、本地书的封面等细节露出品牌意象，传递起点的愿景。五、结语身为内容行业的设计师是幸运的，中国网络文学正在成为具有时代意义的文化现象。刚刚落幕的起点读书「网文填坑节」吸引了超 7000 万用户参加。网络文学的意义已不仅是创造了多少传统文学标准下的「经典作品」，也在于带动了无数普通人参与了这场盛大的文学实践。希望通过起点设计师的努力, 给每一个用户带来简单、愉悦的阅读体验，共同见证更多自由书写、深刻共鸣与恒久感动。让起点继续陪伴作者和读者，走好每一步。欢迎关注作者的微信公众号：「阅文体验设计YUX」本篇来源：优设网原文地址：https://www.uisdc.com/starting-point-reading-bookshelf
布局 元素 项目 写在前面近年来，三星、华为等手机厂商陆续发布 Galaxy Fold、Mate X 等折叠屏手机。其普及速度似乎超过了人们的想象。2021 年 12 月 2 日，根据屏幕机构 DSCC 公布的一份最新研究报告指出：2022年第三季度，折叠屏手机的总出货量环比增加了 215%、同比更是暴涨 480%。折叠屏手机从折叠的方式和角度可以分为：内折叠、外折叠、X 轴折叠、Y 轴折叠等，目前这四个方向均已落地在各大产品中。其中最常见的使用状态有折叠状态和展开状态。折叠屏展开下屏幕变宽，给用户带来了更高效的信息展示和更加沉浸的浏览体验。从曲面到大屏再到折叠屏，这一概念的想法已经成为现实，屏幕宽窄的变化给体验设计也带来新的挑战，为了保证不同宽度下的使用品质，我们采用了响应式布局的设计策略来解决适配问题。本次笔者将从最常见的 X 轴折叠的方式（以华为手机 Mate X 为例），对响应式布局技术进行探索。折叠屏设计指南：Material Design 折叠屏设计指南：完结篇本文为 Material Design 折叠屏设计指南中文版译文第三篇，超多干货建议收藏。阅读文章 > 二、什么是响应式布局形容响应式布局最贴切的一句话为“Content is like water”，即:“如果将屏幕看作容器，那么内容就像水一样。”通俗来说，「响应式布局」就是一套代码、一种设计语言同时兼容所有尺寸及终端，由一个网站转变成多个网站。在以前，响应式布局更多用在 PC Web 上，随着平板、大屏手机等等移动设备的普及，响应式布局越来越多地运用在移动互联网来解决多端浏览体验。二、响应式布局策略简单地说，页面设计可拆解为“基础元素(文字、图标等等)”、“页面布局(元素的组织形式)”、“信息架构 (页面之间的跳转关系)”3 个环节。在适配时，页面各元素粗暴地等比放大并不能保证不同屏幕尺寸下的浏览体验。为了建立科学可复用的适配体系，我们将从这三个环节分别解决适配问题。1. 基础元素基础元素包括文字、图标、按钮、图片素材等。我们通过观察发现，在展开态和折叠态下用户的浏览距离没有明显的变化，因此要避免展开时元素太大影响体验，在适配时用相同的大小比例即可。在特殊场景比如大段文本类页面时可以适当放大 1.2 倍比例。2. 页面布局常用的适配方式有拉伸布局、相对缩放、扩展布局、挪移布局等：拉伸布局各元素的显示宽度不是固定值，而是通过相对参照物的方式来确定其位置，当布局的显示大小发生变化时，元素的显示宽度随之发生改变。相对缩放布局内元素的显示大小不是固定值（比例锁定），而是通过相对参照物的方式来确定其宽或者高的参数，当布局的显示大小发生变化时，元素的大小随之发生改变。扩展布局当组件内元素横向布局，元素间的距离固定时，布局可显示元素的数量可随着显示宽度的改变而发生变化。利用屏幕的宽度优势，将相同属性的布局组件横向并列同时排布。挪移布局布局内的元素根据屏幕的宽度来选择是上下排布还是左右排布。3. 信息架构前面提到的 2 点是对于单个页面的适配策略，在展开时，屏幕尺寸的增加也为信息架构的调整带来更多可能。例如社交软件主页，在折叠态时需点击某个聊天列表跳转进入对话详情，但是在展开态时会适配成“好友列表+对话详情”的形式来体现层级关系三、项目实战了解完通用的适配策略后，我们以平安集团个金业务线 “任意门”产品为案例，和大家分享是如何把这些理论知识运用到实际项目，并且推动项目落地上线的。1. 团队内部宣讲与价值说明由于本次项目会用到大量资源，我们在推动前，首先与业务方，主管，开发等内部成员组织了一次宣讲会，会上阐述本次项目要解决的问题和价值说明，得到大家认可后，一起决定去做本次项目。这一步是最关键也是起初就要做的，设计师往往自己先埋头做完设计然后再推动，但结果经常会很难推或者推不动，殊不知达成团队意识的统一是在执行前更重要。2. 适配体系建设在内部获得认可后接下来就是设计师进行具体方案设计了。由于任意门业务复杂，为了便于团队协作、保证体验一致性以及后期维护，我们结合前文提到的理论知识，建立了关于任意门的响应式适配体系：制定全局删格系统为了页面设计在不同屏幕宽度时的一致性和规整性，我们先制定了一套同时适用于宽屏和窄屏的删格系统。在制定删格系统时，需要考虑列数和水槽间隔以及安全边距。我们在本案例中利用等分列数，在折叠态使用 4 列，在展开态使用 8 列等分，另外水槽间隔为 8pt、安全边距 20pt。统一基础元素适配规则前文提到通过测试发现用户在展开态和折叠态下浏览距离没有明显的变化；另外也从实际考虑任意门业务复杂，二三级页众多，点对点修改成本高，为了团队提效，我们在适配时采用「文字、按钮等基础元素大小没有变化」这一策略进行标准化适配。建立模版组件库对于经常用到的组件，我们针对展开态建立了标准的组件库，以便于开发和后续设计同学延展。以金融行业经常用的产品卡片为例，我们发现在不同链路中都会有此类卡片的展示，通过对使用场景的梳理和分析，制定了统一的组件，团队内部直接挪用即可。再以常见的资源位为例，我们分别对 1 张、2 张、3 张的情况都制定了对应适配规则，在其他业务场景上直接复用即可拆分排期和保障机制输出完设计稿。最后就是开发落地了。由于版本迭代周期短，我们决定对项目进行拆分排期。本次项目是由设计师发起的，因此也承担了项目管理的角色。我们制作了项目周期表方便后续管理。同时，建立了「方案评审-开发-设计验收」保障机制，保证最后落地效果。通过以上策略，我们既可以快速地批量进行输出，又能保证体验一致性。五、写在最后在实际项目迭代中开发资源相当紧张，我们通过响应式适配策略既解决了折叠屏不同状态下的用户体验，又相对节约了人力成本。作为本次项目的发起者，设计师也获得了团队内部认可和好评。也在此感谢产整个团队的全力支持，在追求体验的路上没有尽头。参考文献《华为折叠屏应用开发指导》https://developer.huawei.com/consumer/cn/doc/90101本篇来源：优设网原文地址：https://www.uisdc.com/folding-screen-adapter
指标 业务 机制 秉承 58 同城“用户第一”的核心价值观，设计团队建立以基础体验指标为评估标准、发掘体验问题的评估机制，并借助内外部业务专家视角，对 58 同城各产品的重点场景进行评估，优化业务场景，从而提升各业务线的体验，而这一套评测机制就是 QMD。QMD 始于 2020 年第三季度，历时 4 个季度，支持了 10+业务线的体验优化。但随着业务的高速发展，原有机制已经无法满足业务现阶段发展的要求。为了更好地支持业务的变化，在 2022 年上半年，58UXD 体验管理 QMD 项目组发起了体验评估机制的迭代与实践。我们将通过干货满满的三篇连载文章，分别从「指标模型」「评估机制」「组织实践」来全方位的分享体验评估机制的升级经验，欢迎大家的持续关注和探讨。本篇为大家介绍：我们如何为不同业务设计贴合业务目标的、灵活易落地的体验评估的指标。其他量化模型：如何清晰量化设计价值？试试这个超实用的GSSM模型！编者按：本文通过实战案例，帮你掌握一个能量化设计价值的GSSM模型。阅读文章 > 一、QMD 是什么作为产品的业务方、设计师时常会陷入体验量化的困境：“不清楚产品在行业内的体验水平”、“无法量化设计师贡献的价值”。于是，团队在 2 年前首次推出了 QMD1.0 体验评估机制。一方面能帮助团队从全局的视角去观察用户和洞察业务，让产品持续地提升体验，另一方面在组织内部带来了提升设计品质的驱动机制和文化。QMD 的全称为：Quality Measure Driven。从其命名可以看出，这套机制分为三大部分：质量目标（Quality）：是让设计师从体验设计的品质目标入手，将本品、竞品作为评估对象，这样以来能够定位本品、竞品之间的「差异」；度量指标（Measure）：以基础体验指标为评估标准的度量体验，并借助内外部业务专家、设计专家的视角，对 58 同城各产品的重点场景进行评估设计的「品质」；驱动机制（Driven）：通过驱动机制，解决自身问题，驱动追齐竞品，帮助设计师了解如何「提升」评估结果。自 QMD 推出以来，帮助各个业务线提升体验水平、赶超竞品，持续为核心业务线带来体验价值。二、评估机制的问题为了更好地赋能业务，我们定期对业务方、设计师等不同角色的进行深度的访谈，得到了大量的反馈：产品会不重视输出的问题、体验问题优先级低、遇到分数的波动难解释、评估专家个体存在差异、结论的责任边界模糊...等等一系列问题。为此，我们发起了 QMD3.0 迭代项目。通过对收集的问题进行归类，我们可以概括为两类：问题难推动落地、评估结论信服度低。于是先试着从现有的测评体系查找分析“难落地”原因，而“信服度低”将通过第二篇文章详细阐述。旧版 QMD 为我们从“界面”“操作”“一致性”三个维度带来了 10 个评估指标，但其制定的核心依据是“体验设计”。回顾旧版 QMD 所推动的内容，其出发点还是以“用户体验”为中心。基于这个出发点，收集了大量的用户体验类的问题，然而缺乏对业务价值的考量，这些问题找不到带给业务的价值。另外在评估方式上我们选择采用设计专家的启发式评估，让专家代入用户真实使用体验，在测评范畴上也未对业务价值的高低进行筛选。这就不难看出，我们之前难落地的根本原因：现有指标体系不契合业务价值。所以，对于新版评估体系的指标的预期，首当其冲地要将「业务价值」纳入进来，以「用户体验」和「业务价值」交叉重合的部分作为评估的出发点。与之对应的，我们评估的范围，也需要调整为仅测量 “高价值”部分，这样以来，指标覆盖的范畴就能实现从“大而全”到“精细化”的转变。至此，我们也确定了评估指标的设计方向——高度契合业务的价值。三、指标模型的迭代要想设计契合业务价值的指标体系，第一步是找到现有指标模型和业务价值的偏差在哪里？我们通过对业务价值的拆解分析得到三大偏差点。针对偏差点逐一提出指标升级的方向：契合业务目标、契合体验诉求、契合优先级 。1. 契合业务目标体验评估指标的制定，行之有效的方法就是利用 GSM 模型，通过对业务目标的拆解，来推导出能解释目标的关键指标。回到设计师日常的设计思路，其实就是从业务的核心目标出发拆解，得到各个场景要达成什么样的设计目标，再拆分用户体验层面的目标有哪些。新版 QMD 也是如此，通过对核心业务目标拆解，各个场景的用户体验设计目标就是评估指标，换句话说：平时我们怎么设计的，QMD 就怎么去拆解评估。2. 评估指标契合另一方面，随着业务的不断发展，58 同城覆盖的业务类型也千差万别：创新型、平台型、业务型等多种业务方向类型。而不同业务又处于引入期、发展期、成熟期、衰退期等不同的产品生命周期。为了得到灵活、能够契合不同业务的指标体系，我们针对指标构成和指标描述也做了调整。首先是指标构成，以往 QMD 针对所有的业务采用固定的指标构成。可想而之，很难满足各类业务差异化诉求。而新版的指标构成在原固定指标的基础上，以自选基础指标和自定义指标的组合方式，更加灵活地适配不同的业务。如图，58 同城某高速发展中的业务，其对于体验的诉求存在差异，剔除了“美观度”“品牌”“共鸣”等指标，但是结合产品特性，增加了“真实性”（即，能感知平台所提供的职位信息及内容真实·可信·有保障）的自定义指标。其次是指标描述，同一基础指标，我们也会和业务设计师、产品经理，共同定义指标的描述。不同业务在可控的范围内可以进行不同的描述调整。如图，同样的“共鸣”指标，在 A 业务增加了：价值感相关的个性化描述，在 B 业务增加了：保障感、时效感相关的个性化描述。使指标释义贴近我们业务的具体情况。3. 评估优先级契合第三，为了满足业务不同场景的重要程度，我们为这套模型引入了指标权重的概念。首先根据对业务总指标的影响大小给业务场景赋予权重，然后再通过场景中各指标的重要程度来赋予权重，通过调整场景&指标的权重，就能得到适配各类型业务的灵活指标。4. 验证指标设计合理性反思过去的评估机制，通过「制定指标-实施评估-输出结论」，虽然也能够对产品进行评估，但是缺少了对于指标设计合理性的关注。为此在指标模型的设计中，我们也增加了防错的机制，通过观测优化效果，形成「确定指标-实施评估-观测效果-验证指标」的完整闭环，在实践的过程中反复调整，确保了指标设计的合理性。小结最后总结一下指标的设计过程：首先发现&分析问题，找到“难推动落地”的根本原因——指标设计不契合业务诉求。针对核心根本问题。我们从“评估目标”、“评估指标”、“指标优先级”三大方面入手，设计出契合业务目标的指标体系。最后还增加了指标设计的验证机制，来确保指标模型的合理性。至此，QMD3.0，关于指标模型的升级就告一段落。我们发现在构建指标模型的过程中，“没有最好，只有最适合”，所以一切的出发点就是以契合业务目标的前提下，找到最适合业务的指标，以持续稳定地评估产品体验，进而帮助业务的落地问题。而体验评估机制不仅是切实帮助业务提升体验的工具，更是我们设计团队立足体验管理的重要构成。未来我们也将继续秉承“用户第一”的价值观，持续为用户带来更好的产品使用体验。预告一下如果说建立科学、易落地的指标模型是 QMD 评估机制的根本，那么可靠、高效的评估机制则是推动 QMD 落地实践的重要前提。接下来王楠将带来《设计师必备体验评估设计指南（机制篇）》，为大家深度讲解如何建立人人可信赖的评估机制。欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/qmd
你想 用户 对象 平常在日常的工作中，经常会发现小伙伴们对于一些属于会有混用的情况，比如“登录”和“登陆”、“稍候”和“稍后”、“预定”和“预订”……虽然有些术语之间只有一字之差，但其用法天差地别。今天笔者整理了一些产品设计中常用的易混淆术语与大家分享，希望能给各位在工作中带来一些参考和帮助。往期分享：产品设计中如何正确运用标点符号？5个章节帮你掌握！一、前言标点符号，是辅助文字记录语言的符号，是书面语的有机组成部分，在产品设计中使用合适的标点可以表达语句的停顿、语气及词语的特定性质，帮助使用者有效表达思想感情和理解语境。阅读文章 > 一、登录 vs 登陆登录和登陆是混用率较高的一组词汇。首先，登录是一个信息名词，在英文中的表达为 login，是指进入操作系统或应用程序（通常在远程计算机上）的过程。我们平时用到的扫码登录、密码登录、验证码登录其实是用户登录的不同途径。为什么我们需要登录呢？登录的核心目标是为了完成用户身份验证，建立和用户之间的唯一关联性，也就是如何证明“你”是“你”。而验证用户身份无非是为了两个权限的控制：“读”和“写”。“读“是用户自己获得和自己个人相关的信息的权限控制，”写“是把用户的行为、用户和网站的交互内容记录下来的权限控制。只有核实了“你”是“你”，才能把和你有关的读取和写入数据库的权限开放给你本人。而登陆呢，在英文中表达为 land，我们经常听到的“诺曼底登陆”，“台风即将登陆”，在狭义上是指到达多个地方（多指陆地），也可以作为军事用语，表示由空中或水域成功着陆，后来也引申为商品等打进市场。这个词并非是计算机专用术语，但你说为啥还有这么多网站在登录界面使用“登陆”按钮呢，唔，这个锅拼音输入法可不背。因此，如果你想表示“进入网站”，应使用“登录”，如果你想表示某产品功能即将上线，应使用“登陆”，两者不可混用。二、删除 vs 移除来看下面两个场景：① 你在商家后台创建了一个“双十一大促”营销活动，这时候因为某些原因导致该活动无法进行，你想把该活动删掉，请问在活动列表里，你应该用“删除活动”还是“移除活动”？② 你在商家后台创建了一个“双十一大促”营销活动，并且在这个营销活动里添加了很多活动商品，但是因为误操作，你不小心多添加了一款商品，你想把该商品从列表中拿走，你应该用“删除商品”还是“移除商品”？从字面意思上理解，两个词汇的差别在“删”和“移”，删除是“永久性”地去除操作对象，操作对象一般在系统中不再存在。而移除是“暂时性”地移走操作对象，操作对象在当前项目中不再显示，但仍存在于系统中。也许你会纠结，用户真的能理解“删除”和“移除”之间的区别吗？我们并不希望设计师一板一眼地只能在这两个词汇中二选一，所有术语的使用应该贴近用户心智，让用户了解当下语境并引导其做出正确的决策才是我们的最终目的。在企业微信里，如果你想把成员从群聊中移走，系统使用的是“移出群聊”而不是“移除客户”，而在通讯录里，如果你不希望和某人联系，就可以使用“删除客户”将其永久删除。从场景上看，“移出群聊”在语义上理解是从当前群里移走，但本身用户并没有被删除，更强调操作的临时性，从使用者的角度出发，是不是比「移除客户」更人话？三、新建 vs 添加站在巨人的肩膀上，我们来看看苹果是怎么做的。当你想在系统中建一个新的文件夹，苹果用的是“新建文件夹”，当你想把已有的图片同步到“照片”，系统使用的是“添加到‘照片’”。两者看起来意思差不多，如果改成“添加文件夹”“新建到‘照片’”似乎也没多大差别，那么两者区别在哪呢？首先，新建是一个计算机专用术语，指电脑中可以存贮文件的工具，比较常规的用法是使用“新建”的文件夹来存储同类型的文件，而这个过程通常是从 0 到 1，需要你手动配置，而“添加”其实就是增加，更强调把已有对象（通常为在对象列表中选择已有的对象）移动至一个新的集合里。我们在 Sketch 里也可以找到相同的用法，添加组件库是从本地已有的组件库集合中选择其中一个并添至 Sketch 的组件库里，而新建主要用在创建一个新的画板。前者强调增加，后者强调从无到有的搭建过程。因此，如果你想表达从无到有地创建一个对象，这个过程里需要一系列的输入或者配置，可以使用“新建”，如“新建图层”“新建商品”，如果你想强调在某个集合中添入已有对象，可以使用“添加”，如“添加联系人”“添加银行卡”。四、稍后 vs 稍候平时打电话打不通的时候，你可能会听到手机里的语音提示“你有一个电话正在通话中，请稍 hou 再拨”。请问这里应该用“稍候”还是“稍后”？从字面意思理解，虽然两者都有让人等待的意思，但其实还是会有严格的使用用法。后，表示后面，稍后本身是一个副词，一般后面会跟着其他的词语，如“系统加载失败，请稍后重试”，意思是系统出现了数据加载失败，需要你等一下再重新操作一下，一般界面中会出现“刷新”这样的动词操作。候，是一个动词，表示等候，稍候也就是稍微等一等，一般可用于单独使用，如“系统加载中，请稍候...”，意思是系统正在处理数据结果，请稍微等待一下（用英文来说就是 wait a moment）。因此，“请稍候”一般可以作为一个完整祈使句来单独使用，而“请稍后”需搭配动词使用才有完整意义。五、预订 vs 预定“预订”和“预定”的区别在于“订”和“定”，订可以表示订阅、订购，而“定”则表示决定、约定。预订，指事先订约购买东西。一般用在生活中订购物品等事情上，比如预订酒店、预订飞机票等，通常需要提前预付一定的金钱。预定，指预确定，事前规定、决定或约定。比如预定婚期、预定时间。两者最大的差别在于关涉的对象不同，预订关涉钱款交易，而预定则与时间、计划、方案、目标、地点等相联系。因此，如果你想要确定的事物与钱款交易相关，可以使用“预订”，而如果想强调计划好的事物不会轻易变卦，可以使用“预定”。写在最后看到这里，也许会有人说，有些词汇本来就意思相似，用错了对于用户也没多大影响啊？你看，在登录界面使用“登录”或是“登陆”按钮，用户都能理解这是什么意思，有必要这么“咬文嚼字”吗？这里引用伟大的乔帮主说的话：设计是人造产品的根本灵魂。如果连我们的“根本灵魂”都腐坏了，又怎么做得出好的，甚至伟大的产品呢？作为保障产品体验的责任人，如果连错别字这样的基础知识都掌握不扎实，谈何设计更优秀的产品体验？你在工作中还有遇到其他容易混淆的术语吗？欢迎在评论区留言，大家一起讨论。本篇来源：优设网原文地址：https://www.uisdc.com/terminology-science
用户 内容 场景 本文将以有驾导流体验升级的项目为例，分享导流增长探索的设计思路与实践经验。更多增长设计实战：增长设计实战！如何用一个公式提升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
美国 工业设计 设计师 现代设计发展中，有个非常知名的指导原则由美国建筑设计师路易斯·沙利文（Louis Sullivan）提出来，那就是：“Form follows function”——形式追随功能。晚年惨淡的摩天大楼之父：顶尖建筑设计师路易斯·沙利文在过去的故事里，史太浓经常提到一句设计哲学：“形式追随功能”（Form follows function），并且在我自身设计工作中，一直信奉此话。阅读文章 > 路易斯·沙利文一战之后大发战争财的美国，将制造武器的技术转向工业生产，可谓降维打击，立马让经济急速发展。于是讲究实用主义的美国人很快将沙利文这个指导原则演变为“形式追随市场”，设计样式以市场喜好为硬性指标，这个阶段我们在装饰艺术运动的篇章当中有所阐述。用一篇文章，帮你了解装饰艺术风格上一回我们谈到苏联的“构成主义“（Constructivism）平面风格，这是一场以人民为名义发起的运动，具有社会主义与功能主义特色，然而无法否认的是同时也有固化的形式主义。阅读文章 > 这种暴富形态的发展，造成了不健康的经济模式，大致 10 年左右，也就是 1927 年美国出现经济衰退，并且越演越烈，继而在 1929 年发生著名的“华尔街股票崩盘事件”。美国一下子进入了“大萧条”时代。大萧条时期的美国在此期间美国股市暴跌，大批企业破产，失业人数暴增，银行倒闭，生产持续下降。美国进入了空前的经济大危机中，这个情况直到 1933 年罗斯福总统上台才出现转机。罗斯福政府实行了有效的经济新政策，首先对宏观经济进行干预，继而建立社会福利制度，再由政府层面推行基建项目，才让经济危机得到有效缓解，把美国带到另一个经济高速发展阶段。罗斯福总统现代设计也在这个大背景之中获得高速发展。一、工业设计师的诞生罗斯福上台的 1933 年也是德国包豪斯被迫解散的同一年，大部分包豪斯优秀师生以不同途径陆续移民到美国。恰好参与了经济新政之后的美国发展，他们主要参与领域在教育、建筑与家具。而美国本土设计师则基于美国工业生产优势孕育出一个此前没有，或者说尚未规范的行业，就是工业设计。工业设计师这样的称谓也第一次产生，好比 2010 年前后随着移动互联网的发展才产生的 UI 设计师一样。战后蓬勃发展的美国工业美国经济的快速发展让社会产生了数量庞大的中产阶层，形成一个巨大消费市场。而工业设计发展与中产阶层形成的市场关系密不可分，这个市场特点是：个性化用品及可以表现社会身份的物品比单纯讲究功能的产品更受欢迎。同时时尚与潮流被放在一个重要位置，这种诉求大大推动了设计发展。美国家庭的日常生活企业界全力以赴开发新式生产手段，开发新型材料，比方合金与塑料，而设计师则采用这些手段及材料来设计新产品。这个时候国际主义也基于德国包豪斯的现代主义在美国呼之欲出，这两种主义在形式上非常接近，几乎一致，区别在于彼此意识形态不同。典型的国际主义风格建筑现代主义是兼容且民主的，国际主义则是独断与商业的。美国第一代工业设计师其实在 1920 年代前后就不系统的出现，那是一战之后开始从事工业设计的人。工业设计的定义其实可以狭义的理解为“工业化产品设计”，这是一个比较开放性的概念，比方包含交通工具、电器、厨具、餐具、工艺品等。时钟产品的设计这些美国工业设计先驱跟欧洲过来的设计师完全不同，欧洲设计师普遍是建筑设计出身，有严谨的设计训练与明确设计观念。而美国的工业设计师大部分出身背景不同，多数从广告设计、橱窗设计、插图设计甚至舞台设计转行而来。而动机则因为商业竞争，需要更多优秀的产品、包装及品牌方面的设计工作室提供服务，所以这批设计师大部分都是多面手，几乎全能，将企业的设计需求一手包办。风扇产品的设计他们将设计视为一门生意，并没有太多理论及所谓的设计哲学。其中最成功的设计师是雷蒙罗维（Raymond Loewy），甚至因为对工业设计行业的贡献而登上《时代》杂志。《时代杂志》封面上的雷蒙罗维及其设计作品他的设计几乎渗透当时美国人生活的方方面面，是一位明星般人物的设计师，我们后面也会对其作简单的介绍。流线型设计运动在“装饰艺术运动”的篇章内容里我们曾经谈及过“流线型设计运动”，这个运动其实跟美国工业发展有密切关联，可以视为一个独立的美学思潮。而历史上有很多研究者习惯将其归纳到装饰艺术运动中，称作“运动中的装饰艺术”（Art Doco on Motion）。装饰艺术中结合流线型风格的产品这个运动诞生于 1920 年代，在美国风行了近 20 年，细节上有装饰艺术运动中的精致装饰感，造型上则贴近现代主义，重视简洁与流畅性。主要特征是展示出一种空气动力学概念，大量使用流畅曲线，有明显的速度感与未来感。流线型运动中的产品设计流线型运动首先起源自对交通工具的设计探索，当汽车产业开始蓬勃发展的时候就有人开始考虑造型与运动速度的关系。所以这种外观形式首先基于功能考虑，也就是前面谈到的“形式追随功能”的一种体现。根据考证，这种样式的设计首先出现在 1914 年的意大利，当时设计师马柯·里克瑅（Marco Ricotti）设计出一款像水滴造型的概念车，名为 40/60HP，成为典型流线型设计。意大利 40/60HP 概念车被美国设计师参照后拉开了该运动的序幕，任何设计概念一但被美国相中就会被其庞大商业市场的运用而充分放大。流线型风格很快在美国走红，首先在飞机与汽车设计上得到充分试验，当时美国三大汽车集团——克莱斯勒、通用、福特都纷纷推出流行型风格汽车。美国流线型运动中的汽车产品到后期这些汽车的流线造型已经走向一种浮夸与不切实际，现在回顾看来，感觉就像来自外星球，因为汽车跟飞机之间共用了很多设计动机与元素。但其中也不乏一些经典设计，比方克莱斯勒汽车公司 1934 年推出的“气流”（Airflow）轿车。克莱斯勒设计的“气流”轿车整体考虑更充分，造型前卫之余兼容了舒适性及安全性，成为一种主流风格，一些故事背景发生于美国的 20 世纪 20 到 40 年代的好莱坞电影，会看到大量汽车都是这类设计。随着市场热烈反应，这种风格慢慢蔓延到一些压根不存在空气动力学需求的产品上，比方家具、餐具、文具、吸尘器，收音机，水壶，台灯等。流线型运动风格的产品设计因此演变成一种形式主义商业设计运动，加速了运动的消亡。二、工业设计的先驱美国的第一代工业设计师有些共同特点，就是习惯于集团式工作，善于商业谈判，并且有强大的市场洞察能力，这些都跟美国发达的商业环境有直接关系。前面谈过的雷蒙罗维也是将商业设计运作得最成功的人，其公司在最大的时候拥有超过 200 名专职设计师。在设计汽车的雷蒙罗维而且公司所有设计项目都要署上他的名字，这种方式备受争议，这其实属于雷蒙罗维一种商业运作方式，通过这样达到大幅提升个人名声的目的，继而推动业务。而且他对设计师非常不错，待遇是业内最高的，所以大家并无怨言。雷蒙罗维的设计公司因此雷蒙罗维的公司完成了从可口可乐标志（包括经典瓶身）到铁路公司火车头，甚至太空站的设计，其业务范围之广令人叹为观止。最经典的 1957 年版本由雷蒙罗维完成尤其在 1930 年代雷蒙罗维公司设计了大量美国交通工具，所以也成为流线型运动的主要推动人之一。雷蒙罗维公司设计的大巴其公司设计收费高昂但客户仍然络绎不绝，跟其善于打造个人形象密切相关，这点很值得如今的设计师学习。1980 年代时候雷蒙罗维的设计公司成为全球经济实力最强、收益最高、规模最大的独立公司，没有之一。善于形象推广的雷蒙罗维除了雷蒙罗维之外，美国工业设计还有一位重要人物，可以说是开山鼻祖，那就是 1927 年在美国开设第一家工业设计事务所的沃尔特·提格（Walter Dorwin Teague）。沃尔特·提格当时整个美国都还不明确工业设计概念的时候，他就首先在自己的服务范围上明确印上“工业设计”字样。这个词未必是他创造的，但首先被其正式运用。提格的公司其实属于综合性设计公司，从建筑设计到工业设计再到平面设计都能承接，但市场需求决定公司发展，工业设计后来看看成为其公司的主营业务。提格设计的收音机提格设计出不少当时在美国广泛流行的产品，比方 1934 年的“蓝鸟收音机”（Bluebird Radio），1936 年的“斯巴顿收音机”（Sparton Table Radio）及 1937 年的“子弹相机”（Bullet Camera）等等。蓝鸟收音机提格在美国工业设计行业具有举足轻重的地位，是“美国工业设计师协会”的发起人，同时担任了首任主席。因此提格合作的客户也是美国一些相当成熟，知名度高的大型企业，比如柯达摄影器材公司，福特汽车、美国钢铁公司及波音公司等。提格设计的台灯提格非常重视与客户的长期合作关系，并且也善于保持这种关系，所以跟大部分客户的合作都十分深入，达成共赢。比方为柯达公司设计出“荣华柯达”（Vanity Kodak）系列相机，通过造型与配色升级将相机从功能用具变成一种时尚用品，受到女性消费者的强烈欢迎，大获成功。“荣华柯达”系列相机随后此产品多次升级，均有不俗的市场表现。又比方 1946 年跟波音公司正式“联姻”之后，设计出著名的“凌云巡航者”客机（Stratocruiser’sCyclograph Company）座舱。飞机的座舱设计是难度极高的，要考虑安全性，舒适性及与飞机功能的结合。提格设计的波音客机座舱提格公司出色的完成了任务，这种合作一直延续到提格去世（1960 年）都没有中断，持续合作了 60 多年，参与了波音 707、737、747 及 777 等机型的机舱设计，成为一时佳话。本期分享到此结束，感谢各位，下期再会！欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/streamlined-design-campaign
评分 指标 测量 秉承 58 同城“用户第一”的核心价值观，设计团队建立以基础体验指标为评估标准、发掘体验问题的评估机制，并借助内外部业务专家视角，对 58 同城各产品的重点场景进行评估，优化业务场景，从而提升各业务线的体验，而这一套评测机制就是 QMD。在上一篇《设计师必备体验评估设计指南（指标篇）》中提到，目前 QMD 存在的两个难点，分别是：问题难推动落地、评估结论信服度低。针对目前难点，今年我们项目组对测评体系再次升级，推出了全新的 QMD3.0。设计师如何做好体验量化？收下大厂的QMD评测机制（指标篇）秉承 58 同城“用户第一”的核心价值观，设计团队建立以基础体验指标为评估标准、发掘体验问题的评估机制，并借助内外部业务专家视角，对 58 同城各产品的重点场景进行评估，优化业务场景，从而提升各业务线的体验，而这一套评测机制就是 QMD。阅读文章 > 我们将通过干货满满的三篇连载文章，分别从「指标模型」「评估机制」「组织实践」来全方位的分享体验评估机制的升级经验，欢迎大家的持续关注和探讨。本篇为大家介绍：围绕提高 QMD 主观评价的可信度，通过信度检验，管控测评流程，建立人人可信赖的测评机制。一、信服度低的原因想要建立人人可信赖的测评机制，需要我们解决目前“结论信服低”这一难点。在讨论结论信服度的问题，我们需要知道 QMD 到底属于什么类型的测评；按照测评变量的不同，我们可以讲测评分类两大类，主观性测量和客观性测量；举个例子，主观性测量类似简答、论述题，客观性测量类似单选、判断题；而 QMD 是邀请专家对特定业务场景，根据特定指标进行量化评估，其评分会因为其评分专家的主观判断影响，因此我们的 QMD 就是属于主观性测量。这就导致在评分过程中，因为评分者的知识结构（也就是对世界的认知、经验等）、判断水平（也就是对评分标准的认知和理解）、个人偏好（对设计风格、操作习惯偏好等）的不同，使评分者的评分存在差异。因此亟需通过某种技术手段，去控制测量误差，提高主观变量测量的精确性，而这一技术手段就是下文将要提到的评分者信度。二、检验信服度的手段1. 什么是信度在了解评分者信度之前，我们需要知道什么是信度。信度是指测量结果的一致性程度，亦称可靠性程度，它衡量的指标是：对同一对象测量得到的结果是否一致。举个例子，当你拿杆秤去测量 10 斤的西瓜，过一个月之后，再去测量一个 10 斤的西瓜，它还是 10 斤，说明这个秤就是可信的，这就是信度；而这个西瓜是 10 斤，测量出来也是 10 斤，说明这个秤是有效的，这就是效度。2. 什么是评分者信度而评分者信度就是信度的一部分，其实评分者信度是若干个评分者对同一组测试结果评分的一致性程度，他关注的是不同组间评分者之间的共同差异的分析指标，也就是说侧重处理评分者组间差异的一般趋势，主要目的是为了测量不同评分者对同一样本是否给出同一正确的分数指标，因此为检验 QMD 中各专家评分是否一致，选择了评分者信度作为分数的检验指标。测量评分者信度的统计指标及方法很多，那我们需要如何选择适合 QMD 的统计指标呢？在根据 QMD 不同的测量特点、数据类型、评分人数等，我们 QMD 选择的测量方式是组间相关系数（ICC），也就是通过方差分析来计算总体变异多大程度上属于总体的特征。3. 如何分析评分者信度选定测量方法后，具体怎么执行呢？就是万能的 SPSS 软件，按照：Analyze—Scale— Reliability Analysis 步骤得来，根据分析结果可以得知 ，本次分析的评分者评分信度是否一致，举个例子，在针对某个业务线进行QMD评估，对6位专家的评分进行评分者信度分析，结果表明，ICC=0.9704>0.75，p
张大湿
在路上
落霞与孤鹜
飞翔的企鹅
表哥
