创意 很多人 内容 本篇内容是借鉴参考的下半部分，因为上半部分的内容过长了，所以不得已分成了上下两章。下半部主要针对的是突破的技巧，我会把我自己总结的一些经验性的创意思路方法教给大家，如果熟练掌握这套思维，一些简单的，工作中常用的创意对于大家来说就完全不是问题，同时我们有了这个基础再去看别的作品的时候也会吸收到更多更实用的内容。上期回顾：不知道如何借鉴高手作品？收下这份平面设计保姆级教程！我知道很多人其实都有参考的习惯，但是经常进入参考的两大误区，最大误区就是从参考变成抄袭，这个是很多人的问题，经常性的抄袭会抹杀自己的创造能力，什么是创意？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/graphic-design-inspiration
用户 内容 商家 一个 SaaS 产品的后台是如何设计的？作为知识付费行业的头部 SaaS 服务商，从 2016 年诞生不到 7 年时间，小鹅通注册客户数已经超过 160 万，终端访问用户人数超过 7.8 亿，毫无疑问成为了国内知识付费规模最大的 SaaS 产品。为什么拆解小鹅通的后台？这是因为后台设计往往被多数产品、开发甚至老板忽略，他们甚至认为后台不需要设计，更不需要考虑用户体验，能把功能实现就可以交付。但我的观点恰巧相反，我认为一个 SaaS 产品设计最大的挑战和关键正是后台。它决定了运营者的工作效率和操作体验，即便你的功能再强大，如果用户不会用、不愿意使用，那么用户也不会续费，而续费，正如《SaaS 创业路线图》作者吴昊在他书中的观点——SaaS的本质，就是续费。设计大侦探的第一个B端产品拆解，选择了工作量最大、最繁杂的后台，阅读时间长，非常乏味，但如果你认真啃完，你对SaaS产品、后台设计、B端设计不会再陌生。都说良药苦口，这碗药，廖尔摩斯先干为敬。往期拆解：万字拆解！12306产品设计全方位深度解析有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。阅读文章 > 一、导读1. 内容结构小鹅通的后台拆解包含四个部分，分别为导读、产品画像、设计拆解和总结，内容篇幅超过 4 万字，阅读时间较长，所以拆分为 4 篇文章发布，建议收藏阅读。2. 适读人群第一类，产品经理/UI/交互设计师，通过对小鹅通后台产品的深度拆解，跳出执行层，培养后台设计的全局观，从功能价值、应用场景、业务流程和用户体验多维度去学习和思考一个头部 SaaS 产品的后台如何设计。第二类，SaaS 产品及知识付费从业者，获取一份专业、完整、有深度价值的 SaaS 竞品设计参考。3. 分析模型第一，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于分析产品的功能价值。用一篇文章，让你掌握能让用户快速增长的AARRR 模型AARRR模型因其掠夺式的增长方式也被称为海盗模型，是Dave McClure 2007提出的，核心就是AARRR漏斗模型，对应客户生命周期帮助大家更好地理解获客和维护客户的原理。阅读文章 > 第二，尼尔森十大原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计，这个原则主要用于诊断后台设计的用户体验。用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 第三，其他设计基础理论，包括费茨定律、格式塔原则、席克定律等，主要用于判断后台设计的易用性。4. 拆解步骤SaaS 产品的后台的设计不仅复杂，而且很多功能如果不亲自体验根本没法理解，所以针对小鹅通后台的拆解，我分为以下三个步骤进行第一，亲自上手实操体验操作。对每一个功能版块进行了全面的实操体验，弄清楚了才开始拆解，绝非走马观花。第二，结合官方帮助文档创作。在体验小鹅通产品的时候，有很多功能必须结合帮助文档才能理解，甚至由于权限和内容问题，部分功能没法体验，只能靠官网介绍来理解。针对每一个功能，严格按照「功能介绍-功能价值-使用场景-页面内容-核心功能-操作流程」的结构去描述，旨在让产品设计师看懂这个功能设计的价值和细节。第三，深入思考产品设计细节。在拆解完每一个功能，我都会加入自己的思考，主要分为细节侦查（值得我们学习的细节）、迭代建议（个人认为可以优化的地方）、设计思考（某个功能带给我的启发）、体验陷阱（用户体验糟糕地方）和体验小结（针对某个功能版块进行全面总结）。5. 阅读建议由于内容篇幅太长，强烈建议你可以申请小鹅通免费试用账号一边阅读一边体验，这样对整个后台的设计才更深有体会。二、产品画像1. 产品简介小鹅通是知识产品与用户服务的数字化工具，包含知识店铺、企业直播、企业培训、企微助手等多款产品，可以为有线上经营、商业变现、私域运营、用户服务等需求的企业，提供一站式技术服务，助力企业完成数字化升级。根据官方数据显示，截止到 2023 年 2 月，小鹅通注册客户数已经超过 160 万，终端访问用户人数超过 7.8 亿，是目前国内知识付费客户数量最多、规模最大的 SaaS 产品。2. 用户角色用户角色是指使用操作小鹅通后台的用户，主要分为运营者和店铺销售。① 运营者店铺的运营者主要负责店铺装修、商品管理、用户运营、数据分析、活动策划、拉新引流等工作内容，是小鹅通后台主要使用的用户群体。② 店铺销售店铺销售会通过企业微信和 CRM 工具使用小鹅通，不过他们主要通过企业微信的小鹅通应用进行工作，很少涉及后台操作。3. 信息结构从信息结构看，小鹅通后台主要包括店铺、圈子、直播、内容、商品、营销、交易、用户、CRM、企微、数据、应用、设置和服务 14 大版块（感谢探友@miki 对小鹅通后台信息结构的梳理）。三、设计拆解小鹅通的后台非常庞大，包括了店铺、圈子、直播、内容、商品、营销、交易、用户等 14 大版块，其中每一个版块又包含若干功能，体验起来非常繁杂，很容易陷入焦虑感。所以我按照一个知识店铺从 0 到 1 装修、添加内容、店铺推广和运营的步骤把小鹅通的后台拆分为 8 个服务，然后再对每个版块的内容进行详细拆解。1. 初始设置当我从官网开通小鹅通的知识店铺以后，进入到管理后台，面对如此繁杂的功能，我想做的第一件事，就是对我的店铺进行基础设置，我得让用户知道这个店铺叫什么名字。① 店铺设置「店铺设置」为商家提供了店铺的基本信息设置，比如店铺信息、品牌形象、用户账号设置等。「店铺信息」提供店铺名称、店铺管理员和主营类目的设置，非常基础。「用户账号设置」 提供在使用系统过程中的各种登录偏好设置，比如登录设备限制，可自定义学员使用同一账号在同一时间不同浏览器上同时登陆的情况「引导设置」提供了引导用户关注公众号、加入社群、收藏店铺、添加客服和添加手机号等功能，对新用户的首次访问至关重要。「功能配置」支持用户对商品销量、播放量/浏览量、评论审核、严禁词、视频播放器、商品评价、买家申请售后等功能进行设置，可以看出系统非常完整和灵活。迭代建议用户的短期记忆一般不会超过 5 秒，所以在体验「设置」这个栏目的时候，我就发现小鹅通的功能太过繁杂，这对新手商家的入门有很高的学习成本。这个栏目的内容其实可以拆分为基础设置、高级设置这样的阶梯式内容，有助于缓解新手用户的焦虑。② 员工管理「员工管理」是为商家提供新建员工、运营角色管理、员工权限设置的功能，这个栏目主要帮助商家管理自己的运营团队。③ 角色管理「角色管理」包含了系统默认的多个角色，比如高级管理员、普通管理员、财务、老师、课程顾问、教务专员、销售员等，并且可以对每个角色进行权限设置，另外系统也支持商家新增自定义角色，满足商家各种运营需求。④ 操作日志「操作日志」记录了整个系统管理员的登录和操作内容记录，日志系统作为一个后台系统必不可少的模块，它可以记录下系统所产生的所有行为，这有助于商家对系统运行监管，并且可实时监控员工在系统中的敏感操作，加强员工培训和管理。⑤ 消息推送「消息推送」是商家建立外部触发最好的方式，这个版块主要为商家提供各种场景的消息推送设置，小鹅通支持服务号代发、短信通知和 APP 推送通知三种类型。⑥ 体验小结在对「设置」模块的实操体验中，感受到小鹅通的功能非常强大，甚至功能多得有点让人透不过气，这对新手商家来说，会产生很多的焦虑和压力，我迫切需要一份最基础、最简洁的新手引导指南。这也突然让我想起了当我申请小鹅通体验账号时，客服专员向我多次提及给我做新手操作培训，但我都婉拒了，也许对于一个头部 SaaS 产品来说，客服专员的培训是客户体验过程中必不可少的一个环节，但是我认为好的设计，其实不需要太多的学习成本。2. 添加内容当我把店铺的基础信息设置好以后，接下来，就需要为我的知识店铺准备上架的内容了。我找到了「内容」这个模块，发现小鹅通支持的内容形式非常多，从视频、音频到图文专栏，把常见的内容形式都涵盖了。① 内容「内容」版块包含内容类型和互动工具两个部分，商家可以在「内容类型」选择自己要发布的形式发布内容，而「互动工具」则是帮助商家课程运营和学生管理的工具。内容类型小鹅通支持视频、音频、图文、电子书、AI 互动课、专栏、训练营和会员 7 种类型，几乎覆盖了常见的内容形式。1）视频「视频」是最常见的内容形式之一，商家可以把录制好的课程视频上传到这个栏目，就可以开始向学员销售。新建视频「视频」包含基本信息、课程内容、所属组合课、商品信息和状态设置五个部分。在「基本信息」，商家需要填入商品名称等基本信息；在「课程内容」，管理员可对视频的播放进行设置（比如课程未学完禁止拖动进度条和倍速播放等），还可以对内容设置保护（禁止文字防复制和开启防录屏跑马灯）。「所属组合课」是提供商品和其他内容（专栏、会员和训练营）关联，比如新添加的商品属于某个付费专栏，那么就可以关联，提升效率。在「商品信息」，可以设置商品的售卖方式，支持免费、付费、加密和指定学员。针对付费视频，还可以支持片段试看，提升付费转化。「状态设置」是指在添加完商品后，商家可选择立即上架、定时上架或暂不上架，比如商家在准备某个促销活动的时候，可以提前编辑商品，设置定时发布即可。视频管理「视频」添加成功后，在「视频」栏目页，可以查看商品的详情，对商品进行编辑，分享、下架、复制和删除等。「分享」是指商家可以把商品的链接、二维码等信息直接复制分享给好友，同时也起到了预览的作用，这是一个公用的组件，在其他商品和版块同样适用。视频详情页「视频详情页」主要分为课程设置、运营设置、学员列表和数据分析四块内容。「课程设置」就是对课程的相关信息进行设置，相当于对内容进行二次编辑。「运营设置」从四个解为一个通用的表单；「CRM分配」是指可以把浏览课程的学员自动分配给企业的CRM销售人员；「私域引流」是指可以引导用户扫码加群，提高课程服务质量和商家对学员的运营能力。在「学员列表」，可以查看当前购买商品的所有学员信息，包括购买时间、学习进度等信息，系统也支持商家手动添加可学习课程的学员。在「数据分析」栏目，可以查看商品的「学习效果」和「交易数据」，比如商品的订阅人数、学习人数、完课率、学习趋势图等，通过这个栏目，可以帮助商家对用户的学习进行深入的分析，提升运营效率。设计思考在初次添加店铺内容的时候，对很多功能板块都不熟悉，比如 CRM 分配、超级会员等，虽然能感受到小鹅通系统的强大，但对于刚入手的商家，则会产生很深的焦虑，不知道这些功能如何设置和使用，也无法感受到这些功能对店铺运营的帮助。音频「音频」也是一种常见的内容形式，可以设计讲书、广播等产品，用户可以在地铁、公交等场景收听。「音频」的新建流程、商品管理功能和「视频」相似，我们不再赘述。图文「图文」也是一种常见的内容形式，可以为学员提供付费阅读等类型产品，「图文」的新建流程、商品管理功能和「视频」相似，我们不再赘述。迭代建议付费阅读其实是知识创作者非常喜欢的方式，小鹅通虽然设计了这个功能，但前端的界面设计并没有根据图文内容传播的特点设计，所以用户体验并不理想，显得非常鸡肋。电子书「电子书」对于出版社等用户群体，是一个刚需功能。在上传电子书文件以后，系统可以自动解析书籍章节，轻松完成电子书在线管理和售卖。其次在店铺前端，用户可在手机端阅读，支持区域触摸翻页、章节试读、划线、书签、更换背景等功能，阅读体验非常友好。「电子书」的新建流程、商品管理功能和「视频」相似，我们不再赘述。AI 互动课随着近两年 AI 技术的发展，小鹅通也加入了 AI 互动课的内容形式。商家可以利用 AI 互动形式的课程内容，搭建具有沉浸式场景的课程学习形式，实现个性化、趣味性、强互动的授课形式，不过搭建成本相对较高，更适合于有特定需求的客户。新建流程「AI互动课」的新建流程分为三个步骤，分别是填写基本信息、制作课程内容和填写售卖信息。在「基本信息」，商家需要输入课程名称和详情页等信息。进入「课程内容」以后，左侧提供了内容组件（文字、图片、音频和视频）、题目组件（单选题、多选题、不定项、判断题和填空题）和其他组件（章节标题和附件），商家可以根据自己的需求加入组件进行设计。商家在填写售卖信息以后，就可以进行上架销售。专栏专栏「专栏」可以将多个单品课程打包成系列课销售，比如常见的付费专栏、连载小说、有声读物等。「专栏」建立后，进入详情页，可以在「目录管理」添加专栏商品，还可以对专栏的商品设置排序和设置试看。其他功能和「视频」相似，我们不再赘述。大专栏「大专栏」就是「专栏」的父级，可以将多个专栏进行打包，组合成专项学习专题，打造学员深度系统学习方案。训练营「训练营」相比「课程」，是一个动态的服务。商家根据某个学习主题，集中式、计划式、督学式地学习。「训练营」也是一种常见的引流手段，通过打卡、签到、学习，可以快速帮助商家进行传播拉新。新建训练营商家建立训练营以后，需要建立营期才能开始招生。营期的建立分为营期基础信息、营期课程和售卖信息三个步骤。在「营期基础信息」，需要设置开课信息，包括招生时间和开课时间；其次支持设置三种目录解锁模式，自由模式（无门槛自由学习）、闯关模式（完成任务才能继续学习）和日期解锁（每天只能学习一定数量的课程）。在「营期课程」，商家需要添加训练营的学习任务，可以加入店铺的课程内容，还可添加打卡、考试等助学工具，增强督学效果，提升用户活跃度。会员「会员」是商家可以打包特定商品内容（包括专栏和商品）进行销售，它的功能流程和「专栏」功能相似，在建立「会员」后，进入详情页的目录管理才能添加课程商品。这个功能可以帮助商家聚集一定量级的忠实粉丝，实现店铺的稳定收入。设计讨论不知道是不是语义的问题，我对「会员」这个功能有很多不理解，首先感觉和「专栏」很相似，其次和「超级会员」也有点傻傻分不清楚，所以在体验的过程中，花了很多时间去学习研究。体验小结从小鹅通支持的 7 种内容形式来看，它几乎覆盖了所有的知识付费内容，视频、音频、电子书、专栏，甚至还有 AI 互动课。这足以满足各种知识用户人群的内容要求，不管你是销售录播课、音频课还是文字专栏，小鹅通真正的实现了一分钟拥有自己的知识店铺。② 互动工具「互动工具」包含了打卡、考试、练习、作业本、题库、证书、表单、活动管理、随堂检测、测试活动和付费问答 11 种工具。打卡「打卡」是一个提升用户活跃度的运营工具，通过持续的打卡输出，不仅可以帮助学员养成一些比较好的行为习惯，还可以帮助商家提升用户付费转化。「打卡」分为日历打卡、作业打卡和闯关打卡三种形式。日历打卡「日历打卡」是以“天”为单位的打卡模式，学员需要每天在有效时段内提交打卡内容，比如每日英语学习打卡、早睡打卡等。a. 新建流程「日历打卡」的建立有两个步骤，分别是设置打卡信息和打卡介绍设置。在「设置打卡信息」，分为基本信息、打卡规则和其他设置三个内容。「基本信息」可以设置打卡的起止日期、打卡时段、提醒方式、每日打卡次数、可补打卡次数、参与条件和打卡规则等；「打卡规则」主要是设置用户打卡的内容类型和范本；「其他设置」可以帮助商家关联超级会员和指定商品文件。在「打卡介绍设置」步骤，需要添加打卡的封面图和详情页介绍，完成后打卡建立添加成功。细节侦查如果不是亲自新建一次「打卡」，你根本无法理解一个小小的「打卡」功能竟然会如此复杂，包含的场景和功能竟然会有这么多。b. 打卡详情页「打卡」建立以后，可以进入打卡的详情页，主要分为日记管理、任务管理、学员管理、分组管理、助教管理、激励设置、运营设置和数据分析 8 块内容。「日记管理」主要指用户在前端的日记打卡，老师可以根据学员的日记进行评论、置顶、加精和删除，还支持批量导出日记。「任务管理」是指给学员布置学习任务，帮助学员更好地学习。「学员管理」主要提供对打卡用户的管理，比如查看学生打卡详细资料和暂停打卡等。「分组管理」支持老师对打卡的学员进行分组，提高管理效率。「助教管理」支持老师添加助教，助教可以对学生打卡进行点评、删除和精选等操作。「激励设置」是指为了鼓励学生坚持打卡，老师可以设置证书、返学费和积分这样的形式来吸引学生参与（证书和积分我们在下面会单独讲解）。「返学费」是一个打卡活动中常见的营销方式，学员完成指定的任务就可以拿到打卡费用的返现，这样不仅可以筛选精准用户，也可以提高用户的打卡积极性。「运营配置」主要包含配置日签和邀请卡两个部分。「日签」是一种吸引用户传播的手段，通过个性化和精美的日签设计，不仅可以体现活动特色，还能激发学员的收藏欲望，最终吸引用户主动传播，拉新引流。「邀请卡」也主要是为了激发学生传播引流，不仅设计了精美的邀请卡片，还支持老师自定义设计，以及直接引流自私域社群。「数据分析」是对整个打卡的数据进行全面的分析统计，包括当天打卡人数、打卡次数、新增学员、点赞数、评论数、加精数等等，通过精准的数据分析，可以为商家运营方案提供支撑。作业打卡「作业打卡」是以布置“作业”的形式打卡，这种打卡方式可以加强教学质量的检验，让学生产生完成作业的紧迫感，督促学生进行学习。闯关打卡「闯关打卡」是以“关卡”作为单位的打卡模式，这种打卡形式由于自身具备游戏的挑战性，所以能够有效刺激学生为了拿到更好的成绩而努力打卡，从而提升用户参与度和积极性。考试「考试」是用来检测用户学习效果的学习工具，商家可以通过考试情况得到学习效果反馈，可根据考试反馈进行后续课程优化。新建考试「考试」的建立分为三个步骤，分别是设置考试信息、选择试卷和发布。「设置考试信息」又分为基本信息、信息采集、考试设置、题目分值和结果设置五个内容。「基本信息」需要填入考试的基本信息，选择需要关联的课程；在「考试设置」，老师可设置参考考试的时间、考试时长、考试次数等；在「结果设置」，可以选择考试完就展示成绩、题目和答案。在「选择试卷」步骤，可以创建新试卷，也可以从试卷库中选择已设置好的试卷，其次还可以设置考试通过分数的成绩。添加试卷以后，管理员可选择立即发布、定时发布以及开启微信服务号通知，帮助学生可及时获取考试的消息通知。考试管理在学生开始考试以后，后台会生成考试数据，商家可查看考试的详细情况，包括批阅、统计分析、老师管理、设置证书等。练习「练习」满足了商家售卖已有题库题目，为学员提供自主刷题练习工具的需求，而通过反复练习，可以提高学员学习效果，有助于提升用户的活跃度和留存率。新建练习「练习」的建立包含基本信息、练习设置、商品信息、私域引流和信息采集五个步骤。在「练习设置」，管理员需要关联题库，设置答题的出题顺序（包含随机和按顺序），题目数量和考试难度；「商品信息」可以设置「练习」是否付费，或需要参与关联课程才能学习；「私域引流」和「信息采集」是公共组件，我们在上文已经解读过，不再重复。练习管理学生开始练习以后，后台可查看学员的练习数据，包括练习参与人数、每道题目的正确率等，这些数据可以帮助商家及时调整运营方案，或针对性对学生进行讲解授课。作业本「作业本」主要帮助老师和学员在课程后续实现互动和答疑，不仅可以加强学生对知识的学习，帮助老师了解学员学习的状态，更能提升用户活跃度。新建流程管理员需要先建立一个「作业本」，这个流程比较简单，输入名称以后，选择关联课程，还支持关联「圈子」（一个用户运营的重要功能），老师布置的作业会在课堂互动和作业动态显示。「作业本」建立以后，管理员可以布置「作业」。「作业」分为手动布置（新建）和题库布置（从现有的题库中直接选择）。「手动布置」需要输入作业名称和作业内容，支持上传图片和音频，填写完成后，作业创建成功。题库「题库」需要配合作业、考试和练习场景使用，为这些工具提供数据支撑。题库「题库」支持添加单选题、多选题、不定项选择题、判断题、填空题、问答题和材料题等多种类型。添加也非常简单，管理员选择好题目类型以后，填入内容就能新建成功。「批量导入」是为管理员提供批量输入题目的工具，按照系统提供的输入范例格式，系统可以一键识别出题目，轻松录入。「Excel导入」也是一种常见的导入形式，不过需要按照系统标准的批量导入模版，才能实现批量导入。试卷库「试卷库」是题库中题目的组合，可以看作是「题库」的父级。管理员可按照自己的需要把题目手动或自动组合成试卷，在考试、作业等场景中就能及时调用，提升工作效率。「试卷库」的新建流程包括设置试卷信息和组卷两个步骤。在填写完试卷基础信息以后，在「组卷」步骤，可以选择「手动选题」和「系统抽题」。「手动选题」就是管理员从题库中逐一手动选择，准确率较高，而「系统抽题」则是系统根据管理员的题型设置随机抽题，具有随机性。证书「证书」可以为学生带来成就感，激励学生坚持完成任务，当学员通过考试、完成作业以后，管理员可以向学员颁发证书，最终提升用户活跃度。「证书」的建立包含基本信息、发放规则、证书样式、证书信息、发证信息和证书分享六个内容。在「基本信息」，管理员可选择证书类型，包括考试证书、打卡证书、圈子证书等，另外，证书需要关联对应的考试。在「证书样式」，系统提供了数十种系统样式，管理员可根据自己的偏好和品牌VI选择，其次也支持自定义样式，上传设计好的背景图片即可生成。在「证书信息」，管理员可以编辑证书标题、获奖文案等，还可以加入鼓励文案，吸引用户传播分享。在「发证信息」，可加入发证日期、证书编号和发证印章等，突出真实性。在「证书分享」，可以添加分享语和二维码，通过学生的分享，为商家拉新引流。表单「表单」是运营者用于发起问卷调研，自定义收集用户信息的社群功能。它可以帮助商家收集用户需求和反馈信息，通过对用户的调研分析，进一步设计和优化运营策略，从而为用户提供更精准的服务新建流程「表单」的建立分为三个步骤，分别是编辑表单、表单设置和表单发布。「编辑表单」分为三块内容，左边是组件和外观，管理员需要从这里选择内容，比如单选、文本框等。「组件」包含基础组件（单选、多选、下拉菜单、文本框等）、描述分割（文本描述、图片、分隔栏）和个人信息（姓名、性别、年龄等），「外观」可以设置表单底色、标题、选项内容字体大小和颜色。选中内容以后，中间为表单编辑区域，可以实现可视化编辑，包括调整顺序、删除等。右侧可以设置表单的字段和逻辑，包含基础设置、选项设置、逻辑显示规则等。在「表单设置」，可以设置用户提交的次数、回收方式（支持定量、定时回收）、微信分享信息和私域引流。在最后一步「表单发布」，需要关联对应的内容，比如相关视频、课程、专栏、圈子、训练营等内容，关联成功后，表单就可以发布。活动管理在店铺的运营中，举办线下活动必不可少，「活动管理」就是为了解决这个场景而设计。管理员可以使用「活动管理」功能组织线下活动，一站式完成线上发布活动信息、用户报名、收集报名用户信息、管理报名情况、现场签到等流程。发布活动「活动」的发布包含基本信息、票务设置、座位设置、报名信息设置和私域引流六个部分。在「基本信息」，管理员需要填入活动的名称、地点、时间、关联的课程等信息；在「票务设置」，可以添加免费票和收费票，设置票种的展示规则等；「座位设置」部分，还可以开启自动排座，活动座位由系统自行分配；在「报名信息设置」，管理员可以根据自己的需求灵活配置用户报名的信息，非常方便；「私域引流」可以帮助管理员在活动报名前后将潜在用户引流至商家的私域流量池。名单管理活动建立成功后，商家就可以发布活动，「名单管理」就是活动报名的详细数据，包含报名管理和签到管理。a. 报名管理「报名管理」主要包含了所有活动报名的数据管理，比如待审核、报名成功等，管理员可以在这个栏目查看报名用户的详细信息。b. 签到管理「签到管理」有两种形式，一种是用户自行扫码签到，系统会生成活动的二维码，管理员向用户展示扫码即可；另一种是商家主动扫码核销，工作人员进入票券核销页面以后，就可以对报名的用户进行扫码核销。随堂检测「随堂检测」是一个协助老师校验学生学习质量的辅助工具，它不仅可以提升学生对课堂知识的学习和巩固，还能有效防止学员挂机学习，提升学习效率。测试互动「测试互动」是一个通过设置轻量级的在线趣味测试，刺激用户活跃的社群玩法。运营者可根据用户特性设计测试题目，激发用户好奇心，活跃已沉淀的粉丝，增强学习过程的互动乐趣，同时可以设置根据测试结果给用户推荐课程。新建流程「测试互动」的新建包含了设置测试信息、添加题目和结果页设置三个步骤。在「设置测试信息」，运营者输入测试名称、简介和设置有效时间；在「添加题目」步骤，需要加入测试活动的题目，支持单选和多选；在「结果页」设置，需要设置测评结果，并可以向用户推荐指定的课程，进行付费转化。付费问答「付费问答」是一个为商家增加变现的工具，学生付费向老师提问，获取一对一答疑。「付费问答」需要先创建一个问答专区才能开启，有点像建立一个问答专栏。当用户在前端购买问答服务以后，运营者可以在手动邀请答主进行答疑。其次这个功能也设计得很完善，还支持设置用户围观价格和围观分成。体验小结在体验完这 11 个互动工具以后，我开始感受到小鹅通这个工具的魅力。从引流到激活、从留存到传播，这 11 个工具几乎能满足一个知识店铺运营多维度的需求。而让我最惊叹的是小鹅通产品的设计细节，比如一个普通的打卡功能，如果只是从前端体验看，你根本无法想象这些小功能的后台设置其实有这么复杂。而小鹅通为了降低商家的运营成本，几乎支持每一个功能版块自定义，给我最大震撼的就是「证书」这个功能，不仅提供多种证书设计样式，连证书内容的每一个字段，都可以在后台自行输入，无需任何加工，实在是太方便了。② 商品「商品」主要指实物商品和服务类商品的发布和管理，如果商家有周边商品，可以通过实物商品来上架，服务类商品则是指虚拟服务，比如 1V1 咨询、设计指导这样的虚拟服务。「商品」栏目的功能比较简单，我们就不过多赘述，大家可以亲自体验。欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/xiaoe-teach
人类 能力 内容 最近挺多同学问过我关于 AI 的看法：ChatGPT 以及很多 AI 生成插画和图片的工具和软件，不仅为我们带来了惊喜，也让我们感受到了不少担忧。AI 在设计领域被广泛应用后，真的会取代很多岗位吗？作为设计师，我们又该如何应对呢？chatGPT 使用教程：https://www.uisdc.com/group/497328.htmlAI绘画神器合集：https://www.uisdc.com/zt/ai-draw人工智能设计专题：https://www.uisdc.com/zt/ai-design一、AI 如何辅助设计工作以 ChatGPT 为例，它是由人工智能研究实验室 OpenAI 在 2022 年末发布的全新聊天机器人模型。作为体验设计师，你可以用它来做以下几个方面的工作：1. 用于解释设计的专业知识如果你对某个设计概念并不了解，可以使用 ChatGPT 做讲解。比如：UX 有哪些经典的设计和研究方法？什么是用户体验地图？什么是情感化设计？如果你需要向客户解释设计专业术语，ChatGPT 就可以用最简单的语言来解答复杂的设计专业概念，例如：向 6 岁的孩子解释什么是 Design Token：2. 用于提供通用的设计思路你可以获得基础的、通用的设计工作思路和方法，询问 ChatGPT 时可以添加与工作相关的更多背景，背景描述越详细，效果越佳。比如：如何为我产品的用户（输入用户特征）编写调查问卷？如何为客户设计某种风格的产品图标（输入用户需求）？如何完成设计师与开发在 Figma 上的工作交接：3. 用于搜索设计资源和数据你可以通过 ChatGPT 查找设计资源、信息渠道和公开的数据。比如：有哪些好用的设计系统或 UI 组件？某产品的主要功能和特点是什么？某国家用户使用手机银行的数据如何：4. 用于完成基础的设计分析在可以公开数据和信息的条件下，你可以通过 ChatGPT 对于数据和调研内容做基础的分析总结，比如：找出这些访谈中（输入用户访谈内容）的高频词汇？找找这些数据（输入用户数据）之间的相似性？将这些信息（输入信息内容）按照某种方式进行归类分组？二、应该如何看待 AIAI 能为设计师做的事远不止上述内容。但我个人认为，虽说 ChatGPT 可以超过很多智能聊天软件，其本质也还是一款聊天机器人；AI 插画和建模工具即使再好用，其本质也还是一款图像合成软件。分享给大家三个观点：1. 「有知识」不等于「有智慧」。到目前为止，人工智能和人类大脑的本质区别并不在于表象的内容生成，而在于对于生成内容的深层次认知、理解和感受，就像是躯体和灵魂的区别。以 ChatGPT 为例，强大的搜索功能和算法支持使得其看上去“无所不知”，并具备了一定的“创作”的能力，但其实它并不“理解”自己所写的文字背后的含义，也不会因此产生喜怒哀乐等情绪。举个例子，如果你对于 ChatGPT 给出的答案不满意，点击“重答”，它就会给出新的答案。这种答案的生成是依靠收集互联网上与答案相关的海量信息，依据算法做概率分析以确定最优解，并通过语言模型组合成流畅的语句。它是在根据大数据来“赌”你想要的回答。每一次“重答”都会有新的答案，都是一次概率判断和数据积累。其他 AI 图片生成小程序也和 ChatGPT 的“创作”能力类似，生产内容依赖于“搜索 + 拼接”，是将互联网上的海量图片信息内容打散后再重构，因此内容的可用性也仍有很大的进步空间。2. 人类和 AI 在「互相利用」。我们一直在期待 AI 可以为自己做更多的事情，现在 ChatGPT 可以帮助开发纠正代码、可以帮助你写一份报告，节省很多不必要的“无脑劳动”。在这个过程中 AI 也在“利用”人类：用户给出的每一条需求和使用反馈，都是在训练它生成可用性更高的内容。而且 AI 的学习速度比人类大脑高出好几个数量级，内容正确率的提升指日可待。现阶段，AI 和人类相互依存：没有人类的输出，AI 就没有输入，也就不会有输出；没有 AI 的输出，人类自己的输出和输入会困难和复杂得多。我们能够赋予 AI 超乎常人的计算能力，AI 则能够给予我们快捷便利的生活方式。人类和 AI 有着各自无法超越和替代的优势，现在是一种相对和谐的共生关系。3. 找准各自优势，应对变革。ChatGPT 让我们看到了 AI 技术的突破。虽说这种技术目前并不具备直接取代人类某些岗位的能力，但是随着其与各行各业深度融合，就会产生新的时代变革，届时也必然会产生岗位更迭。就和人类从农业时代进入到工业时代一样，大批的人会失业，但同时也有大量新的、符合时代需求的工作岗位被创造出来。AI 带来的时代变革有利有弊，但终究还是利大于弊，因为人类文明需要进步，时代发展也需要进步。对于以创造力和理解力为驱动的设计师来说，未来我们更需要：① 利用 AI 的优势，优化产品体验AI 对于信息的搜索、计算、存储、整合等能力是人类望尘莫及的。我们可以将这些能力应用在产品的体验设计中，比如：提升浏览器的搜索质量；优化智能客服的对话能力；完善智能机器人的陪伴聊天功能等等，结合 AI 的功能优势来创造更加优质的产品体验。② 找准自身的优势，用 AI 做延伸主动地思考、洞察、创新与决策等能力是我们人类设计师的优势所在。现阶段 AI 提供的只是基础性辅助，仍有很多工作无法完成，也仍需要我们对其结果进行检验和优化。我们要不断发挥人类特有的主观能动性，并时刻关注这些技术和行业的发展与变革，将技术作为我们自身能力的延伸，拓宽自身能力的边界。比起担心失业或焦虑被替代，更重要的是认清我们自己的优势所在，不断地修炼自己，厚积薄发。当时代变革到来时，你也依旧可以以不变应万变，游刃有余，来去自如。更多AI工具：ChatGPT发展势不可挡！盘点4个值得关注的AI语言文本工具大家好，这里是和你们聊设计的花生~这两天有关人工智能聊天机器人 ChatGPT 的新闻频频冲上微博热搜，并引起广大网友的热切关注和讨论。阅读文章 > * 本文图片来源：https://uxplanet.org/chatgpt-overview-what-it-can-do-for-the-ux-designer-843b9256bfcchttps://blog.prototypr.io/how-to-use-chatgpt-for-ui-ux-design-25-examples-f7772bea3e70欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/work-with-chatgpt
内容 设计师 的是 大家好，这里是和你们聊设计的花生~最近 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
用户 内容 场景 本文将以有驾导流体验升级的项目为例，分享导流增长探索的设计思路与实践经验。更多增长设计实战：增长设计实战！如何用一个公式提升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
内容 京东 助手 本文主要讲述了作者作为京东内容助手 APP 产品一号位以来，从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考，为读者朋友们提供参考和建议。往期京东案例回顾：大厂案例实战！京东微信购物2022年改版深度解读今年以来，京东购物小程序围绕“一键发现 万物好店”的产品心智，从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。阅读文章 > 一、为啥要写这个文章在正式开始叙事内容助手产品故事之前，作者想先讲讲自己在京东内容做产品的故事，我是从 2019 年 5 月加入京东的，2019 年 10 月开始做京东直播产品，期间历经前台频道、直播间、M 页、小程序和部分后台，然后横向转做京东视频、话题产品，基本上大半个京东内容的产品线我都当过产品，经历多，做的产品需求就多，期间遇到的问题和踩过的坑也就多，工作中的精彩案例和经典天坑，也许我写出来后能给大家带来些启发：每一个庞大完整的系统都是一步步成长起来的，里面每一个看似奇怪的设计或功能，背后可能都是一个让你忍不住骂出声的教训。有些前人犯过的错误，后面依然重复出现，不断有新人掉入同样的坑。基于此，我想把内容助手从想法到落地实现的故事都写出来。二、为什么是内容助手其实一开始，我们并没有想做一个完整的移动端内容创作平台，仅仅设想对标淘宝主播 APP，在手机端拥有一款京东内容自己掌握的、可以开播的 APP 就行。当时，新版主播操控台日趋成熟，移动端缺乏主播开播工具，而淘宝方面在移动端深耕已久。于是，产品同学们一合计，决定落地这么一个产品，取名叫“京东直播”APP。对外调研时，我们发现淘宝主播 APP 其实只有主播端能力，是个工具 APP 的定位，同时其又有专注做 C 端的淘宝直播 APP，大家想着可以将两类功能做在一个 APP 上，根据账号类型进行功能区分，这样就能实现一个 APP 既有 C 端又有 B 端的功能。移动端、可开播、看直播、能下单，这就是内容助手前身的定位雏形。基于京东一贯高效落地的传统，我们着手推进。就好比你打算修一栋房子，预算、工期、图纸、施工团队等都得挨个聊好。这里我们继续秉着“不重复造轮子”的原则，不断寻求合作方支持共建，比如登录注册、黄金流程、消息通知、客诉系统等。强调一下，第一次独立 0-1 做 APP，有一个靠谱的版本经理很重要，他能将 APP 从写 PRD 到最终应用市场上线的每个环节的注意事项跟你梳理清楚，避免不必要的坑。预期总是美好的，就像你在追女神时总是把结果想的很美好一样，你在追一个你想象中的人，而不是真实的她本身。做 APP 也一样，千万不要以为所有佐料都备好，就等着一锅烩了。变化总是随时出现，不变的是变化本身，要学会拥抱变化。高层得知我们在做一个类似于淘宝主播+淘宝直播的 APP 后，认为我们应该将注意力更多地放在 B 端生态建设上，C 端功能集中在京东 APP 其实足够了。于是乎，京东直播 APP 迎来了第一次定位大调整，也迎来了它的重命名——京东内容助手应运而生，专注做 B 端直播、视频、图文内容生产，是它的第二次定位。三、从登录说起：不要想当然“这是哪个傻 X 产品做的登录功能”，第一版 APP 上线不到两星期，作者就在客诉后台看到了用户的负面吐槽。内容助手 1.0.0 版本，我们直接接入了京东登录团队大而全的登录功能，包括：手机号一键登录、微信登录、手机验证码登录、账号密码登录、京东 APP 联合登录。这里有一个细节一定要说一下，登录功能我们整体复制照搬的京东 APP，我们想当然地认为给用户最快最省事的登录方式，就是最好的，结果招来谩骂。作者后来仔细了解了用户的登录场景，很多主播或达人都习惯在 PC 端使用达人账号密码来进行登录，并且使用的账号都不是跟自己常用手机号绑定的，或者说主播/达人有多个手机号，当在内容助手 APP 用手机号一键登录的时候，就会登录成它自有手机号的达人账号，影响其使用。作者记得当时还和我们另一位产品同事讨论过登录问题，其实当时我很坚持让视觉把登录做成默认的传统账号密码输入框的形式，并提供其他登录方式的切换选择，理由是 PC 端用户习惯了。当时那位产品同事给的意见是“现在市面上都是一键登录搞定，为什么还要做那么复杂的输入功能，对用户也不友好，一键登录多省事”，有些后悔当时自己没有坚持自己的选择。所以，有时候立场坚定一点也不是坏事。当初作者作为内容助手的产品一号位主导了整体的框架设计，不同的产品同学分别负责直播、视频、单品三大内容素材创作端的产品工作，各自在产品设计上积累不少经验教训。四、直播：要在 PC 基础上做减法，但不要强制替用户做决定内容助手在做主播端功能的时候，一贯秉持的原则就是：在满足需求的同时尽可能地把功能做到最简洁。与其他需求都是从 PC 主播操控台简化搬运到内容助手不同的是，创建直播间时支持一键复制直播间是在移动端的首创，极大方便了那些想要快速建好直播间而又不想每次去下载直播封面图，重新编辑文字的主播。负责主播端的产品同学在研究创建直播间的行为中发现，大部分主播都是日常使用同一张直播封面图，因为重新制图成本很高，直播间标题和简介也都是复用，基本就是把原直播间的开播时间修改下就创建了，这个时候要是能有一个像行云平台一键复制需求的功能来一键创建直播间，就完美了，因此该功能应运而生，上线后主播反馈效果不错，甚至可以夸张一点地说，尤其是那些想多开播作弊的主播用得更是勤快。相比于一键复制创建直播间，主播在内容助手开播时，摄像头的镜像问题算是一个槽点。当时负责直播创作的同事在观察了许多主播的直播视频后，发现他们在介绍商品时，镜头都会给比较多的商品特写，为保证他们在用内容助手开播时，商品能清晰正向地展示在观众面前，产品同学默认将特写画面进行了镜像翻转，保证商品特写画面始终正向展示在观众面前。虽然产品同学的出发点是好的，但是该功能上线后却遭到了非常多投诉，主播们认为强制给直播画面进行镜像对称，严重干扰了他们的直播，造成了直播质量的下降。后来，产品同学将是否镜像对称的选择权交还了主播。我们不能替用户做决定，更不能强制替他们做决定。五、视频：素材审核状态是一个大需求，产品应深入审核逻辑的制定视频创作上线一年之后，我们在客诉中发现，较多客诉一直在反映内容助手发布视频素材的审核状态和 PC 端不一致，具体表现为找不到之前的草稿，PC 端发布的草稿类视频，移动端找不到，为解决此问题，作者进行了视频审核状态的全流程梳理，结果发现历史积弊挺严重。一个素材的审核状态由两个字段决定，公域审核和私域审核两个字段共同决定该素材给用户展示成什么状态，另外，由于移动端发布视频交互流程和 PC 的不同，省去了草稿展示一步，导致了上文所说的很多用户投诉看不到 PC 端发布草稿的问题。作者经过对审核状态的对照梳理，并对照 PC 端的展示状态进行了对齐，同时，补充了投稿到公域的视频，但公域被拒审，仅私域通过的优化建议提示，解决了客诉问题。除此以外，一些在外人们看来不知道怎么定的指标，其实也是产品和研发同学们通过实验最终反复敲定的。如视频上传时长限制为 60s，是为了兼顾视频发布效率和用户体验，一方面尽可能地支持创作者能发布长一点的视频，另一方面又不想创作者在视频发布时等待太久，因此，结合京东发布的视频素材真实时长和实际发布体验，作者将内容助手视频素材的上传时长限制为 60s。六、单品：不要为了做而做产品同学自我批评，犯了主观主义的错误，当初考虑到内容助手已有直播和视频两类素材的创作能力，想着图文在移动端也得有，也没细致调研，大致问了下图文业务，自己想了想：“长图文相对依赖 PC 端的文本编辑，发布数量也少，单品类素材文字少，创作门槛低，日均生产量也不少，就把单品创作加到移动端上吧。”作者依葫芦画瓢给加上了，结果上线后日均生产几十篇，惨不忍睹，着实有些难堪。经过复盘，作者总结出失败原因：单品素材对商品图片的品质要求非常高，图片全部要抠成多张精致的白底图，做图是移动端最高的成本，达人在 PC 用 Photoshop 简单抠图就能制作完成发出去，无需先 PC 做图，再手机发布，多此一举。后续如想提高移动端单品发布数量，需要继续完善手机端一键抠白底图的功能，只有突破此瓶颈，单品创作才有救。因此，主观主义害死人，做事情还是要提前做好周密而细致的调研，没有调研就没有发言权。七、选品工具：APP 设计要扔下历史包袱电商环境下，不管是直播、视频还是单品素材，至少在京东这个内容生态体系下，创作者在创作前都绕不开商品选择这个过程。为了让创作者能在手机端高效完成选品，作者决定将选品工具从 PC 端搬运到内容助手。当作者踌躇满志地拿出设计好的方案进行评审时：官方推荐菜单去掉一级商品池，直接展示二级商品池及其商品，商品排行增加更多筛选项，商品搜索框支持全局搜索。研发同学直接一盆冷水浇过来“这个功能和 PC 端是保持一致的，接口都是同一套服务，如果拆开来做的话，时间会很久”，为了首先解决有无的问题，作者在和研发一番唇枪舌剑后选择暂时妥协，利用现有底层能力把选品工具的皮先搭起来，满足能用。不过，这个妥协的用户体验代价有些高，尤其是官方选品池的一二级商品池部分，很多账号登进去都会发现空的商品池，体验属实糟糕。为了能稍微好看下，作者将默认定位的顶部 Tab，改为了商品排行，不至于让用户一进来就看到空的选品池。这个问题只有等后续和内容开放平台一同将选品工具进行整体重构后解决。除了上述底层逻辑的改不动而外，不同内容素材在创作前使用选品工具的出发点和方式都是略有区别的，比如：直播更多是提前谈好了合作的商品清单，商家直接给 Excel，主播将表格上传操控台即可完成选品，而视频和单品类素材就需要一个个去筛选，哪些商品是新品，哪些佣金高，哪些相关的素材还比较少的等，因此选品工具在符合通用标准的情况下，还需要有针对性地照顾不同素材的选品场景。八、隐私合规：一个经常闪现但又不得不做的事情每逢重大时间节点或年中年底，工信部或网信办一般会有 APP 隐私整改的通知下发，并且总会在需求非常繁多的时间给出一个截止日期，要求在此之前完成全部合规整改。一般包含以下几项：1. 内容助手隐私政策文本修订每一次整改一般都要求对《京东内容助手隐私政策》文本进行调整，主要集中在：（1）APP 的核心功能及实现核心功能所需要采集的信息描述，如：当您注册、登录京东内容助手时，您需要像我们提供您准备使用的京东账号名、密码、您本人的手机号码，收集这些信息是为了帮助您完成注册。（2）APP 集成的第三方 SDK 清单的修订：新采集了哪些个人信息的字段，新增加了哪些 SDK，什么场景下采集用户的哪些个人信息，采集信息的频次是多少。需要根据研发排查的实际情况，对文本进行更新。（3）APP 请求用户的系统权限的整理：APP 在使用什么功能时需要用到用户手机的哪些权限，都需要列举清楚，不能存在“等”模糊字样，如：为了给用户提供创作视频的能力，用户在使用内容助手拍摄视频时，APP 需要请求用户手机的摄像头和麦克风权限。（4）隐私问题投诉渠道的创建和维护：需要创建一个供用户投诉隐私问题的邮箱、电话、收信地址。2. 用户个人信息收集情况的排查和整改（1）用户同意隐私协议之前，APP 不能存在任何采集用户“个人信息”的行为：这一条是隐私整改的红线，一旦发现必须立即整改，否则轻则被应用市场下架，重则被工信部或网信办通报批评，影响公司声誉。（2）APP 不能出现频繁自启动的行为。（3）有没有频繁请求手机权限，比如：麦克风、摄像头、地理位置权限等；APP 是否在用户拒绝开启权限后，频繁提示用户开启；APP 是否在用户不开启某些权限后，拒绝提供正常服务的情况。（4）用户不同意隐私协议后，按相关部门要求，仍然需要能使用 APP 的基础服务，不能直接退出 APP。（5）APP 需要有直接注销账号的渠道，且注销后不能影响该账号在京东其他 APP 的使用。九、发版工作：一个产品经理是如何既当产品又当项目的1. 版本节奏作者作为内容助手产品一号位，在 APP 正式上线运营后，兼顾起了版本经理的角色，工作上不仅需要规划 APP 未来的功能方向，还需要制定出具体的版本节奏，由于第一年上线以来，直播、视频等基础功能的建设需要经常发版，我们与研发、测试商议后确定每三周发一版，每次集成后，2-3 天线上回归时间，回归报告输出后分别提审 IOS 和安卓应用市场。这里有个小插曲，安卓端除了各大知名手机品牌的应用商店以外，属腾讯的应用宝算比较大的了，由于京东在 360 主体下没有全部完备的证件，腾讯又不承认公司签署的关联证明，因此京东内容助手在安卓端的发布只能放弃应用宝这块阵地，仅仅发到了百度、小米、华为、OPPO 四个应用商店。2. 提审资质应用市场提审必备的证件说明，这一段算是应用发版的干活，一个新的 APP 要想成功上架到手机应用市场，必须要遵循应用市场的证照要求，一般苹果应用商店是自己独立的一份要求，安卓各个应用商店之间要求比较趋同。这里我就以安卓小米应用商店为例：（1）应用商店注册账号公司主体营业执照（加盖公章）；（2）APP 主体公司营业执照（加盖公章）：（3）应用商店注册账号公司主体与 APP 主体公司的关联证明（加盖双方公司公章）；（4）ICP 备案截图（加盖公章）；（5）计算机软件著作等级证书。如果发布的 APP 还存在特殊的行业背景，需要按照要求补充对应资质，如 APP 涉及医疗经营资质的，需要补充其公司主体的证照。除公司主体层面的证照以外，部分安卓应用市场要求 APP 具备计算机软件著作登记证书，也就是 APP 在第一次发版之前，需要具备电子版的知识产权，这个联系我司的法律合规与知识产权部-知识产权组的对接同事按照要求完成申请即可，重点需要让客户端研发把全部源代码进行整理并形成文档，作为原材料提交审核。3. 上线公告每一次重大功能的更新，都需要广而告之，尤其是我们的使用方。因此，让视觉同学输出一份精美的公告图片必不可少，产品同学一方面需要发布公告邮件告知运营和事业部同学，另一方面需要督促对接运营一号位同学在微信公众号发布上线通知，广泛触达内容达人们。另外，每次 APP 发版后，需要及时配置 APP 内的更新弹窗，引导老用户们更新、尝鲜新的功能。结语前面说了很多内容助手的产品，最后，作者也来说说自己吧。相较于其他平台，在电商做产品，我们受不同业务影响的因素可能会更多，尤其是京东 APP 前台的一些强运营属性的模块。与之相比，京东内容助手算是一块产品同学可以较多自主规划和发挥的自留地了，产品同学可以自主规划并落地很多功能。做了一年多的内容助手主产品，作者自己总结了一些针对个人工作和成长的想法，也在这里给大家分享一下：要想向大目标走去，就得从小目标开始。没有十全十美的产品，都是从小处着手，一步步迭代出来，甚至是被用户边骂边改出来的。一万年太久，只争朝夕。产品同学要盯紧竞品，时刻关注用户需求，发现问题要快速定位原因，并高效落地，其实很多想法大家都能想到，关键看谁能快速行动起来。想到了，说出来，做下去。坚持自己的想法，别让各种信息扰乱你的思路。当我们有严密的论证和数据来支撑我们的想法时，一定要坚持，不要让外人的各种说辞干扰你的判断，在众说纷纭或者褒贬不一的场景下作出自己的决定，不是一件很酷和有成就感的事情吗，要相信自己。特别鸣谢内容产品部 肖楠、刘璞、吴姣灿、于洋平台营销设计部 安道旭 田诗琪欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/jd-content-authoring-assistant
页面 用户 内容 一、前言Notion 是一款融合笔记（Notes）、任务（Tasks）、知识库（Wiki ）以及数据库（Database）的 all-in-one 生产力工具，产品主要服务于互联网群体。2022 年，Notion 的用户规模目前已经达到 3000 万，付费用户达到 400 万。国外用户常用一个公式形容 Notion 是怎么 all-in-one 的：Notion = Google docs + Evernote + Trello + Confluence + Github + Wiki + Quip。同时，Notion 的产品风格也是走极简主义，有着“合而为一”的野心。如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下 Notion 的产品体验设计拆解。通过对 Notion 的体验设计拆解，为你提供一份文档类产品的解题宝典！更多产品拆解：上线即爆火！3600字完整拆解微信键盘的产品设计微信键盘发布啦！阅读文章 > 事先声明强烈建议使用电脑查看，用户体验更佳；为了让设计细节更容易被看到，用 Gif 来呈现展示；Gif 体积较大，请耐心查看。适合人群第一类，UI/UX 设计师，可以跳出执行层，去思考 Notion 的产品设计策略，提升产品分析能力；第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；第三类，文档产品从业者，通过全面的产品设计策略推导、用户需求分析，获取竞品分析参考。二、日常使用场景1. 工作区和基础概念左侧侧边栏。Notion 的侧边栏是导航系统，创建的所有页面和数据库都会出现在这里。可以将各个页面嵌套在一起，实现无限的组织层次。右侧编辑器。这是创建的所有内容的所在地，映入眼帘的是宛如白纸一样的画布，工作和生活就从这里开始。Workspace 工作区。在团队中，侧边栏的 **Workspace**标题下的任何页面都可以被看到，并且很可能被工作区的所有成员编辑（除非另有权限配置）。Teamspace 团队空间。团队空间可以配置开放式的还是封闭式的，有对应的不同权限的管理配置。Private 私人的。个人工作空间默认为保持页面的私密性，除非它们被明确地共享。Page 页面。Notion 的页面是无限层级的，一个页面能够添加多个页面，页面中的页面也可以继续添加页面。Block 区块。Notion 中的基本对象为 Block（区块），它可以是任何形式：表格、文本、网页、代码块、图片、视频、文件或者直接是一个 Page（页面）。2. Notion 由 Block 组成上图标出了不同类型的 Block（区块）。Notion 以 Block 为基本单位，围绕笔记文档、知识库、任务、轻量的数据库等方面来组织内容。在这张白纸上，包括文字、表格、视频、音频、网页、数据库等等，各种类型内容都可以看作「区块」。操作也非常简单，点击「+」或是输入“/”即可调用，随意将内容组织，并支持 Markdown 语法。Page（页面）上的任何内容，不管是文字、图片还是表格，都是一个 Block（区块）。每个页面都是各种 Block（区块）的排列组合。3. 新建工作区工作区的新建频率相对页面来讲是比较低的，因此新建工作区的入口相对较深，打开位于 Notion 窗口左上方的工作区切换器，会提供新建工作区的入口。尝试新建一个 Workspace，选择团队使用，会直接在根节点创建好几个对应的页面模板可以快捷使用。点击之后，又回批量生成很多模板页面，帮助用户快速上手，帮助用户轻松愉快的度过试用产品的 Day One。4. 新建页面点击侧边栏底部的**+ New Page 按钮来创建一个新的页面，这里新建的页面会默认出现在 Private 下。或者当你把鼠标悬停在侧边栏上的任意节点时，点击任何一个+**按钮，就会在对应的节点下新建页面。新建页面后，会默认出现一些快捷的操作，例如使用模板、导入、数据库等等，帮助用户快速地使用 Notion 强大的页面能力。如果自己尝试输入了一些文本，所有的模板提示和顶部的一些设置就会自动消失，映入眼帘的是宛如白纸一样的画布，工作和生活就从这里开始。5. 页面模板在产品体验中，对于初次上手的用户而言，模板是最好的选择。完全空白的 Notion 并不能解决用户的需求，得先搭建出各种工具，用户直接在工具里进行内容填充，才能满足用户的需求。所以，有了模板后，用户价值的探索路径缩短，减去了需要熟悉功能、自己动手搭建的负担，让用户能够迅速使用起来，并在持续使用的过程中不断熟悉产品各个功能，从而创建出属于自己的模板。在空白页面中点击「模板」，就会进入使用模板的流程。最近 Notion 也对使用模板的界面做了升级优化，记得之前选择模板的弹窗，侧边栏是在右边，左侧预览页面，这次把侧边栏放到了左边，在右边预览页面，「使用模板」的按钮位置也发生了变化。总的来讲会和用户在日常使用 Notion 得行为方式非常一致，都是在左边切换，右边看页面内容，减少用户的认知成本。使用模板的流程也非常短，在侧边栏切换模板的同时，就能在右边同步预览模板的内容，点击「使用模板」便能立刻将将模板内容应用到刚刚新建的页面中，使用上的体验也非常丝滑。所以，正是因为模板在产品策略与市场策略中的重要性：既能促进用户活跃，也能促进用户留存，Notion 才会将模板视作一个单独的模块，不断迭代更新。6. Database 数据表数据表帮助你在 Notion 中以各种方式组织信息--让你组织、分类、标记、过滤、搜索、查看和利用它来完成工作。下面是一个关于 Notion 数据表几种视图和常见的使用场景的介绍。Table 表格。表格形式，类似于 Airtable 表格，便于做数据统计。每一行都可以单独打开变成一个 Page，添加更多的内容。Board 看板。看板形式，类似于 Trello 看板，便于任务分配、分类。卡片中的选项可以完全由自己定义，看板的分组也可以用选项来改变。Timeline 时间轴。时间轴形式，时间轴视图，适合项目排期和计划.Calendar 日历。日历形式，便于查看时间相关的信息，可以在日历上按时间顺序查看任务。List 列表。列表形式，便于查看一部分关键性的信息，比如只显示名称和进度，来明确任务的进度。Gallery 画廊。便于查看多张卡片中的开头部分，可以在卡片开头添加一些概要内容。7. 工具栏大部分同学应该习惯了 Word 这种工具栏，包括其它很多的在线文档平台，也都保留了这种设计。而 Notion 的工具栏默认是隐藏的，在没有开始第一个字输入之前，页面顶部还会有少量的功能外露，当开始输入文本时，所有的多余功能都消失了，页面就是一片白色，功能区全部隐藏，需要点击或选中一些内容才能出现，看似更麻烦，但实则更高效。8. 浮动工具栏这种工具栏可以称为「浮动工具栏」，与传统的工具栏抛给你一堆选择不同，浮动工具栏是围绕内容服务的。你可以先书写内容，再使用浮动工具栏中的菜单设置格式。让设置就在你的光标旁边，移动距离更短，日积月累能省下不少时间。当然，直接记住 Markdown 快捷键是更好的选择。当鼠标选中文档内的已有内容时，界面会自动弹出浮动工具栏。可以针对选中的文本内容进行常规操作。例如加粗、斜体、删除线，或是将普通的正文文本转化为一二级标题，也可以针对选中的文本内容进行评论。9. 编辑工具① 「+」图标只要你把鼠标悬停在一个新的行上，左边的空白处就会出现「+」图标。点击它可以打开一个下拉面板，你可以从中选择想要使用的功能添加到页面中。② 「⋮⋮」图标每当你将鼠标悬停在一个新的行或内容块上时，「拖拽」图标就会出现在左边的空白处。点击它可以打开一个菜单，让你对该 Block 进行操作，例如删除、创建副本、转化成其他 Block 等。③ 「/」命令/ 命令是最简单的方法是向你的页面添加内容或应用上述的操作。输入/后跟任何类型的块来添加它。如/bullet 或/heading。一旦你输入/，就会弹出一个菜单，你基本上可以实时搜索你想要的东西，只要按 enter 就可以选择并使用它。10. 分享页面在分享页面的设置中，可以对不同的成员域做不同的权限配置。对于这些配置项，在鼠标悬停的时候会在弹出相应的图示截图和文字说明，告知用户进行了这项设置后会发生的变化，给予了用户清晰的配置界面。当用户准备点击右下方的「复制链接」时，还会再次出现 Tooltips 提示用户当前配置的分享权限说明，避免权限误操作引发的不符合用户预期的后果。三、体验亮点1. 左侧导航交互日常中常见的 B 端产品的导航栏一般都是要么展开，要么收起两种固定的交互模式，而 Notion 左侧导航非常灵活，尤其是导航栏收起状态时候，鼠标只要悬停到左侧区域，都可以将导航栏呼出，这时候通过导航栏切换到目标页面后，将鼠标移到页面内编辑内容时，悬浮的导航栏又回自动消失。在导航切换效率和页面内容浏览的沉浸感上有了非常好的权衡。2. 抽屉预览在数据表类型下打开页面，默认会通过侧边抽屉的方式打开，侧边打开方式可以自定义拖拽侧边抽屉的宽度。当抽屉拖动到一定宽度时，会自定将左侧的导航栏收起，再减小抽屉宽度时，侧边导航又回自动呼出。同时，侧边抽屉的交互方式并不是传统意义上的直接覆盖在当前页面的上方，在内容层级上会将下放的内容进行推拉，例如我们能够始终看到「新建」按钮，让用户在查看抽屉内容时，也能够灵活地操作后面的内容。3. 视图配置切换数据表有 6 种视图类型可以灵活切换，点击「新建视图」，切换的面板覆盖在内容上方，默认聚焦到「视图名称」的输入框中，在选择不同的视图类型时，能够直接预览到切换后的效果，并且能够设置不同的视图下，打开下一级页面默认的打开页面方式，整个使用体验上非常顺畅。4. 页面图标支持自定义给页面设置表情或图标。给予国际化和本地化的考虑，会有不同肤色的 emoji 配置，让不同肤色的用户能够用对应肤色的 emoji。对于一些只想加一个表情装饰，却有选择困难症的用户来说，还提供了一个「随机」的配置。更加智能的是，设置好的表情或图标也会在页面树中呈现，当用户的页面书中有较多内容时，可以高效地帮助用户对页面进行识别。5. 全局搜索点击「搜索」后，提前判断用户大概率要输入内容，会自动帮用户聚焦到搜索框当中。同时给出了几个非常高效的筛选项，能够帮助用户更精确地查找内容。底部提供了快捷键引导，这一点也是非常人性化，帮助不了解快捷键的用户能够迅速获取快捷键的用法，提高操作效率和体验。更令人惊喜的一点体验是当搜索的关键词没有匹配到时，会引导用户搜索已删除的页面，点击后会将搜索的关键词自动带入到垃圾箱中进行检索，提高了搜索能力的可用性。6. Block 工具栏悬停预览Block 工具栏中，鼠标悬停某个工具时，右边会出现对应工具的效果图和简单说明，能达到更好的引导目的，用户能够直接了解到这个 Block 是不是自己想要使用的，而不需要每次都一个一个插入试一下之后才知道，能够帮助用户更全面高效的了解 Notion 支持的能力，提高 Block 的使用效率。7. 即时修改和创建属性在使用数据库属性设置的时候，可以即时地对属性进行修改，使用检索可以快速使用属性，当检索的内容不在已经设定好的选项中时，会智能地提示用户可以创建一个新的属性。把属性配置的能力轻量化地外露出来，不再需要像传统的软件也痒属性配置有一个单独的属性配置面板。8. 图片尺寸调整图片支持宽高等比拉伸调整，常见的拉伸点实在图片的四个角，会容易引发的问题是当用户拖拽右上方拉伸点缩小图片时，因为图片在编辑器中的定位是固定的，会导致图片的缩放和鼠标指针没有跟随。Notion 的处理很好的解决了这个问题，拉伸点位于图片的左右两侧。同时图片的拉伸也会根据所处的 Block 来自动适应，例如图片位于折叠列表中时，由于图片约束了只能左对齐，所以只在右边有拉伸的手柄；而当图片位于普通的 Block 时，左右都能进行拉伸。9. 分栏交互Notion 中的分栏交互也非常智能，只需要点击并拖动你想放进另一列的文本或是其他类型的 Block (左边空白处的 **⋮⋮**符号是你的拖放手柄)⋮⋮，把它放到你想要的地方，就能够智能地变为分栏。想要改变分栏的宽度也非常灵活，只需要拖拽两栏中的竖线就可以智能的改变分栏的宽度。10. 弹出下拉面板时禁用页面滚动在很多中后台的系统中，经常容易发现的一个看似 BUG 的场景，就是打开了一个选择器 or 下拉菜单时，再往下滚动屏幕，下拉菜单的面板没有跟随滚动，看起来会有点像是 BUG。这个难题在 Notion 中有了一个非常巧妙的解法，在弹出下拉面板的时候，禁用页面的滚动能力。看似简单实则非常巧妙的解决了设计师在日常设计中经常遇到的难题。11. 折叠块正常情况下，Toggle list 下有内容时，箭头是深色的。当 Toggle list 的内容为空时箭头是灰色的。通过一个非常小的细节给予用户提醒，恰到好处。12. 页面为空时，图标是空心的页面内可以嵌入页面，如果嵌入的页面是有内容的，图标内也是会有几根横线；如果嵌入的页面没有内容，图标内部就是空的。通过一个小小的图标直接向用户传递是否有内容的关键信息，省去了用户需要去点进去页面才知道是否有内容的步骤。13. 拖拽小技巧框选文本 Block 可以直接拖拽到数据表中，并且会自动根据所框选的文本的 Block 的构成去自动转化为数据表中不同的行数据。批量变更 Block 类型时，非常高效。14. Block 链接文档中的每个 Block 都有一个专属的链接，复制这个链接发给其他人时，打开后会直接定位到对应的 Block，避免需要在一整篇文档中去找想要的关键词，非常灵活高效。15. @now 会实时更新Notion 还不容错过的一个实用小功能是利用「@」快速输入具体的时间戳，你可以把它用在日记里，或者是工作日志等。具体来说，假设今天是 17 号，当你在模板里用了「@Today」，无论你在多久之后利用这个模板创建新页面的时候，它只会显示「17 号」。而新的「@Today」则会动态更新，假设今天是 28 号，你用同个模板创建新页面的时候，会发现它变成了「28 号」，而非之前的「17 号」了。16. 任意空行都会快捷输入提示在所有的空段落前，都会有一个 Placeholder 提示用户输入「/」能够快速插入 Block，潜移默化的引导用户使用快捷键，起到了教育用户的作用，提高用户使用效率的同时也增强了用户对产品的粘性。17. Notion AI2022 年 11 月 16 日晚，Notion 发布了 Notion AI 测试版写作助手，来帮助用户写作、初稿整理以及记录创意点子，标志着 AIGC 发展进入一个新的阶段。申请了一下内测，已经排队到 16w 人了。四、体验槽点1. 没有固定位置的页面目录原生能力不支持页面目录，虽然支持目录 Block，但是插入的目录 Block，只能跟随页面内容显示，当页面内容往上滚动的时候，目录就会消失。这里右边还是通过第三方插件才实现了目录的能力。2. 没有原生的思维导图Notion 目前还不支持原生的思维导图，国内参考的竞品 Wolai、FlowUS 都已经能够支持思维导图了。目前仅能是通过一些第三方插件置入思维导图，整体的灵活性远不如原生的 Block 那样强大。3. 原生不支持中文目前对中文还不太友好，中文搜索不全面。12 月 14 日的时候，Notion 在 Twitter 上有发布了德语版本的支持，好奇的在下面留言啥时候支持中文，网友有趣的回答道 100 years。不过目前有一些第三方的汉化插件可以使用，这里分享给大家： https://zhuanlan.zhihu.com/p/397634631五、总结Notion 团队非常重视设计，创始人伊万说：“设计意味着这里的一切，Notion 的感觉对他们来说具有重要价值”。不仅如此，你在他们的网站会发现，好像全部都是用 Notion 创建的一样，有很强的认同感。从少数派到哔哩哔哩，从知乎到小红书，有大量的 Notion 用户每天都在分享自己的 Notion 使用经验。这导致关于 Notion 的文章和视频每天都在快速增长。PLG 的发展模式，要面对大量的 C 端用户，所以 Notion 必须要有非常好的产品体验。通过极致的产品体验，减少用户使用中的阻碍与疑惑，使整个产品在使用上更为顺畅，从而提高产品的易用性，减少在面向 C 端用户过程中的运营咨询，便于团队将咨询交付的精力集中 B 端用户的服务上，从而创造更大的商业价值。由于时间和篇幅有限，关于 Notion 的体验设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。世界杯专题！8500字全方位深度拆解懂球帝APP2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。阅读文章 > 6000字拆解！花费10个亿，抖音如何设计世界杯专题？作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。阅读文章 > 参考链接Notion 官网： https://www.notion.so/Notion 帮助文档： https://www.notion.so/helphttps://36kr.com/p/2025046266178056注：部分图示取自 Notion 官网感谢阅读，我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注和交流～本篇来源：优设网原文地址：https://www.uisdc.com/notion-design
用户 内容 品牌 一、项目背景威睿能源是吉利旗下，一家专业从事新能源汽车动力电池、电机电控驱动系统、充电系统、储能系统的研发、制造、销售与售后服务的新能源科技公司。旧版威睿官网存在框架不合理、内容混乱、无法实时维护和品牌感弱等问题。威睿能源希望与极氪用户体验中心（ZED）合作对其官网改版，让用户更加全面了解的公司的品牌和产品。更多极氪文章：未来趋势！如何用数字孪生打造汽车工厂大屏？今年上半年我国新能源汽车销量达到乘用车总销量 25 %，同比增长 1.2 倍。阅读文章 > 二、目标归纳经过与业务方的多次讨论和分析，我们对威睿官网的改版诉求达成共识：建立信赖。搭建全新的官网框架内容和设计，让用户更全面的了解公司向用户传递专业、安全、可信赖的感知；提供用户和企业的沟通渠道，减少获客成本，提高潜在客户的留存和转化；高效曝光。使品牌产品能够快速在线上曝光与迭代，提高公司产品热度，减少广告营销成本；建立可及时维护更新内容的管理后台，方便高效的自主操作即时发布；理念透传。提高威睿的品牌辨识度，传递高技术/高品质/高安全的品牌理念及价值观；建立品牌影响力，感知客户，服务客户，成就客户；在此基础上，我们从框架、内容、视觉三个维度制定设计目标和策略。重新制定清晰合理的框架结构，呈现直观有效的信息传达、探索一致新颖的设计语言。三、框架制定要让网站框架清晰合理就必须对用户的诉求进行分析，经过体量和角色两个维度研究，我们确定框架主要服务于寻找和决策长期合作为目的的大企业客户决策者。在与业务协调确认内容素材，同时结合核心用户的诉需求，根据重要度、关系、次序进行信息的归纳与分析后，确认整个网站的信息架构。对于核心的首页，我们依据营销中的引入、成长、成熟、转化模型。首屏通过企业品牌理念对用户视觉进行冲击，吸引用户继续浏览。再通过产品矩阵、技术实力、成功案例和行业背书让用户对威睿的能力实力全面了解产生信任。通过前三步层层递进的宣导使潜在客户产生初步合作意向后，最后自然给出联系方式完成转化。四、内容设计新能源工业产品技术规格复杂，如果按产品资料直接平铺，大量文字无处安放，用户阅读费力。所以搭建一个高效，可扩展的内容结构尤为重要。为此我们对内容进行排序，精简、合并产品页模块，减少因内容迭代导致的楼层堆栈。提升高价值信息的展示优先级，让用户更容易发现有利于转化的内容。通过小标签、数值的提炼等方式，为大量内容划分层次，提升用户获取或理解业务关键内容的效率。并且用规则的阵列布局，营造有序严谨的官网形象，同时也满足平台和各业务的发展和扩展需求。增加更丰富的信息纬度，过去以表格、图文呈现的技术信息，现在以图文视频动效等方式展示信息，提升用户对内容的视觉聚焦。五、视觉表现确定视觉风格之前，我们结合品牌调性、产品特色和用户需求，整理情绪版，得到 2 个设计关键词——秩序感、空间感。秩序感充满规律和条理，新能源工业产品属于高科技行业，而科技正是人类从自然中发现和研究出的规律秩序。界面的秩序感能带来视觉冲击和人们对科技产品实用美的欣赏。网页设计呈现用户的屏幕上是二维平面，如果能创作中具有立体感和深度感的视觉空间，突破平面信息传递的限制，更能从多维度体现威睿的品牌和产品实力。空间感正是塑造意境氛围强化呈现效果的关键。六、秩序感为了让使用不同屏幕的用户访问网站时都有舒适的界面效果，我们通过对不同断点下栅格的宽度、模块、元素进行调整，保证页面布局的一致性，以达到最佳的页面展示效果。框架布局是体系化视觉设计的起点，我们受包豪斯无装饰和极简理念的启发，采用模块化结构去排布图文信息，统一规整理性。字体板式可以帮助创建清晰的层级结构，组织信息，高效清晰的呈现设计和内容。形成一套规范体系，沿用与其他门户网站项目中，在视觉上达到统一和整体。色彩体系按照品牌书中的颜色指导进行的设计，主要使用了白色和浅灰作为主色调，运用在页面背景中，电光绿作为主识别色，沙黄作为点缀色。强调品牌特性，增强用户记忆。七、空间感采用精致极简、有层次和空间感的三维图形为主视觉元素，契合威睿电力技术研发制造公司高科技、品质强、可靠安全的特性，给用户传递科技感、未来感。从品牌 logo 中提取元素创造代表电力的能量魔方，加上 VRMET 的基座，表达威睿公司电池、电机、电控系统强有力的研发制造能力。以核心主图为视觉聚焦点，辅助代表能量传输的绿色输送轨道向其他代表电力系统的的模块连接，底部用错落有致的图形代表平台，包罗整个威睿生态产品。统一的材质刻画极简纯粹、轻盈剔透的视觉效果。我们制定出统一有序的 3D 模型栅格、空间角度、长宽比例，快速搭建简化的几何图形，通过对图形的有机组合形成新的图形元素。提升风格一致性和搭建效率。设计可复用的通用场景底座，在核心区域搭建代表模块语义的核心图形，快速形成主页面 banner。以此标准化的分层组合手法，可快速搭建多个子页面，高效且体系化。结合实际的场景和概念语意，快速创造对应的虚实结合的图形主体物，搭建丰富的 3D 素材库，复用性强、延展性强、提升设计效能。总结此次威睿官网升级不仅搭建了全新的网站，更是建立了全新的科技感强、高品质、安全稳定的品牌形象，助力威睿品牌行业影响力的提升。强大的三维动效能力，可搭建空间感强且可交互工厂实景，应用于官网、数字可视化大屏、线下空间场景等，共同助力威睿品牌成为行业标杆。欢迎访问全新改版后的威睿官网：https://www.vremt.com/关注极氪 ZED 公众号，了解新能源汽车行业的体验设计干货。本篇来源：优设网原文地址：https://www.uisdc.com/vremt-website-design
内容 年终总结 工作 2022 马上就要过去，又到了写年终总结的节点。那些跃升飞快的职场达人，早就掌握了年终总结开挂技能。如果你在年终总结中还有以下问题：不能让给上级留下清晰的印象；不清楚如何有效地组织和呈现一年的工作；不知道怎么能将年终总结写出彩；总结效率很低、输出过程很痛苦……那么这篇文章就是为你量身定做。你将获得一套年终总结的万能公式，它能帮助你高效地完成工作梳理，有条理、有重点、有亮点、有计划地完成总结输出。模板参考：不知道如何写年终总结？收下这份速成攻略（附实用模板）想必大家跟我一样最近都在忙着写年终总结，最近的公众号和知乎也各种给我推相关的文章，我挑了几篇读了一下，教了在下很多框架性的问题，虽然也很受用，但基本都是指导思想，具体怎么落地，从哪块动笔好像真没说明白，想来想去总觉着差点意思…阅读文章 > 一、年终总结的意义在落笔之前我们首先要明确：为什么要写年终总结？很多同学容易把总结这事儿当成负担，觉得平时也有周会和月会总结，为什么还要专门花大力气做年终总结呢？其实可以从两点看它的价值。对于我们自身，年终总结可以帮助我们复盘这一年都做了什么事情、有什么亮点与不足、有哪些成长等，为我们今后的进步指明方向。而上级通过你的总结，可以更清晰地了解我们的能力和对于团队的价值，也为日后升职加薪提供了依据。此外，如果你想获取某些方面的资源、获得领导的支持，年终总结也是一个非常不错的契机。对于团队，年终总结不仅能够系统性地向上级和团队成员展示你在这一年/半年内的工作内容，而且这些内容也能够在一定程度上反映你所在业务/项目的整体情况，比如所在阶段、核心项目、重点方向、未来计划等等。了解这些信息，对于团队后续的资源配置和工作重心都具有十分重要的意义。二、总结内容的准备总结输出的内核，是丰满充分的内容，也就是我们一年的工作产出。而一年产生的工作内容体量相对庞大，里面有大型的重点项目，也有工作琐事，有体现你创新能力的，也有体现你的协同组织能力的……如何把大体量又各有特点的内容高效有序地整理出来呢？可以使用「纵横整理法」。1. 「纵」罗列纵坐标是你做过所有事情的罗列，我们可以按照时间的维度去梳理做过的事情。大部分设计团队/设计师平时都有写周报/月报的要求/习惯，我们就可以直接在此基础上查缺补漏，可以节省很多时间。梳理完成后，把这些内容按照输出形式进行分类，如：项目、研究、活动、分享等。2. 「横」梳理横坐标是各个内容的属性标注，这一步对形成整体结构具有至关重要的作用。这里的属性包含但不限于以下这些：① 事件维度_基础信息包括事件本身的重要性、周期、上线/完成效果、突出亮点等。② 事件维度_参与信息包括你的参与程度、个人价值/贡献、运用了哪些设计方法等。③ 个人维度_能力提升看看哪些工作内容，让你的以下能力有明显的提升/突出的表现，包括：专业能力、沟通能力、创新能力、统筹组织能力、管理能力、影响力、人际关系（与合作部门形成融洽/高效的合作机制，有效避免/化解矛盾等）等。3. 「炼」提炼与归纳通过以上梳理，一年工作内容就以非常直观的方式展现在我们眼前了。因为年终总结需要在较短的时间内做到有效传达，所以我们必须要把精力放在「有价值」的内容上，这时候就需要我们提炼出高价值度的内容，过滤/弱化掉价值度没那么高的内容。上一步梳理工作内容属性，能帮助我们轻易地评估出哪些是高价值的（如重度参与的/设计价值体现度高的/能集中体现个人某些能力的项目 1、研究 1、活动 1、分享 1）以及价值度低的（如参与程度低的/各方面都表现平平的项目 3、活动 2）内容。其次，结合自己的角色对专业产出进行分类，确定需要总结汇报的项目都被分类进相应的版块；最后，对版块进行排序，可以以项目为主线体现多个维度的价值，也可以以业务目标/团队目标为主线，用不同的项目来体现。为了方便理解，我们以 2021 商业服务设计（半年）总结案例为例展开。首先，整体内容有一个大的分类，包括：服务生态搭建、设计研究、工具产研等。其次，每一个分类下面都罗列出了详细的工作项，同时又用色块重点标注出了价值度高也就是会重点展开的内容，这样既能展现出充足的工作量，又做到了有主次有重点。三、总结的思路与框架最后的总结输出，我们需要一个整体框架把这些内容进行组织和包装。对应开头讲的总结的意义，我们可以分成三个部分：取得的成绩以及经验、总结的教训及不足、未来的计划。1. 「成绩与经验」这部分内容延续上面提炼的结果，对每个项目进行细节阐述，如项目背景、分析的过程、设计的目标、解决的问题、设计的亮点、项目最终的价值等等；其次，项目结束后要主动收集相应的数据信息，以最具信度的形式，具象化设计的价值。另外，善于总结设计方法，对于重点项目能形成一套完整的设计解决方法论，可以复用给更多的设计师，为你的总结增加亮点。2. 「不足与教训」百科对于“工作总结”的定义：把一个时间段的工作进行一次全面系统的总检查、总评价、总分析、总研究，并分析成绩的不足，从而得出引以为戒的经验。也就是说，剖析不足也是总结的关键部分。这部分内容可以从两个方面展开：① 未达成的工作目标对标我们的 KPI 或 OKR，看看哪些工作目标没有完成。如果有未完成的内容，就需要说清楚现在进行到了什么程度，没有完成的原因是什么。② 未实现的个人目标设计之路是一条发展变化着的职业道路，它要求我们不断完善自己的个人能力模型，因此很多设计师都在会年初制定个人发展目标，年底审视自己和目标的差距。如果目标实现情况不理想，则需要分析差距在哪儿，具体原因是什么。最后，针对总结出的两方面不足，分析出改进的办法，并在下一步计划中明确具体的实施方案。3. 「未来计划」未来计划在整个总结中起到承上启下的关键作用，主要包括三个方面：① 前提：贴合公司发展目标和方向。公司的发展是个人发展的前提和保障，拥抱变化，紧跟大方向，个人的计划才有实现的可能。② 关键：要结合总结的成绩和不足，针对性地制定未来的计划。做得好的不骄傲，吸取经验做大做强。把重点放在暴露出短板上，正视它，补齐它。③ 细节：需列举这些目标下具体的操作方法和需要得到的支持。计划不能只写方向，要写具体的执行步骤和排期，最好有可量化的标准。比如你想在新的一年提升个人的团队影响力，那么计划可以这么写：未来半年完成至少 2 场大/中型分享+至少 2 篇专业发文+组织 1 场团队活动。四、小结想要有条理、有重点、有亮点、有计划地完成总结输出，只需要两步：第一步：通过「纵横总结法」高效有序地整理一年所做工作，并进行提炼和归纳。第二步：按照成绩（按照项目分类）+不足（对标工作和个人目标）+计划（有前提、有关键、有细节）的结构呈现总结内容。番外：所有的方法和思路都只是帮你规避基础的坑，让你的总结达到平均分，如果你想有一个更突出更出色的成果，那除此之外，你需要在每一步上以及内容上，整理出更让人印象深刻的设计成果或者思维方式，这个就来自于这一年你是否真的设计有果了。最后，祝你顺利完成年终总结，对未来更有把握和信心。更多年终总结的方法：设计师如何写好年终总结？我总结了4个维度！2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。阅读文章 > 因为我这样写设计总结，所以又被总监表扬了！！很多同学都苦恼，自己虽然专业方面还可以，但经常写不好总结，不善于表达，从而错失了很多机会。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/year-end-summary-4
工作 内容 项目 临近年终，我最近经常会收到大家关于述职报告和工作总结相关的问题。比如：“作为设计师，应该如何在述职报告中简短清晰的表述自己的工作内容 、设计产出和设计思考呢？我现在的情况是，对于工作内容和设计产出，目前只是贴出自己的设计稿和所做过的项目；再拿出项目中遇到的一些问题，写出自己对应的设计思考。但是写完后感觉又零散又混乱，请问有没有什么好的经验和写法呢？”我们每个人都会遇到向上级描述或总结自己工作内容的时刻。有时是以周或月为单位写报告，有时则是以季度或年为单位写总结。设计工作总结主要看的是两个方面：工作目标的进展和完成情况设计工作的方法和内容产出不同公司和团队对于设计师工作总结的要求也不尽相同。但我们都可以使用一套通用的总结思路作为基础。下文会为你介绍两个关键方法：“总分总” 和 “三步走”，不仅是对年度总结有效，对你的周报、月报也会有帮助。更多年终总结思路：设计师如何写好年终总结？我总结了4个维度！2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。阅读文章 > 一、采用“总分总”来搭结构“总分总”结构的优势不需要我多说，少年时期我们写作文也都是先总起全文，再分段描述，让读者可以在短时间内了解你的书写内容。“总分总”可以用在整体报告的结构上，也可以用在单个项目的总结上：1. 整体报告的 “总分总”在整个工作报告的结构上使用“总分总”的形式来呈现：总：先总述你本年度的工作内容分为哪几部分，以及整体工作的目标进展和完成情况（可以用你在年初制定的工作目标来衡量）。分：再以每个项目为单位，具体说明每一部分工作的进展、方式和完成情况。总：最后总述对于本年度整体工作的自我评价和经验积累，以及对明年的工作进行简要规划。2. 单个项目的“总分总”报告中的每一个项目的描述结构，也都可以用“总分总”的形式来呈现：总：先总述项目的重点工作内容，以及项目的目标进展和完成情况。分：再通过“设计策略”、“关键行动”、“最终结果”三步走，对项目做描述。总：最后总述对于该项目的自我思考和经验总结，做简要复盘。所以你的年度工作报告整体的框架结构如下：二、通过“三步走”来述内容我们刚刚在单个项目的“总分总”中提到过，具体描述你的每一个项目，这“三步走”依次是：设计策略：即针对项目目标制定的设计抓手、方法论和设计理念。关键行动：即项目的关键阶段和关键行动，以及使用的设计方法和工具；最终结果：即你的设计产出和所解决的问题，包括成果数据和设计反馈。由此我们也可以得到下面这张设计工作报告的框架结构图，你可以用这种结构方式来描述和梳理你的设计工作内容：三、经验和建议设计工作报告的内容展示建议也分享给你：1. 站在读者的角度思考汇报内容的优先级你的工作报告主要读者是你的老板。所以想想对方关心的是什么，想要通过你的汇报了解什么内容，这部分是重点内容，要优先重点展示。2. 工作成果的呈现要有可以衡量的指标你的设计成果在描述时尽可能都要带有衡量指标，让工作完成情况更加直观，这也是你工作成果的最直接体现。衡量内容可以分两个方面：衡量设计成果的质量：可以通过用户对于产品的使用反馈、产品的体验度量结果、你的合作方对你工作质量的评价等方面体现。衡量工作完成的进度：可以以你在年初确定的工作目标作为标准来衡量工作进度。比如你当前完成年度目标的 30%，进展顺利 / 不顺利，原因和解决方案分别是什么。3. 复杂的逻辑可以使用图片等方式呈现如果项目的设计推导过程或者采取的关键行动很繁杂，需要用大段的语言来解释，你也可以使用思维导图或者框架图进行呈现，让内容和逻辑更清晰。4. 设计原稿和工作量可以通过附件呈现如果你的总结中涉及到大段内容或想要体现你的工作量，这些具体内容可以使用附录文档或链接的形式呈现。如果你的老板有时间或感兴趣，可以自行下载阅读。这样可以最大程度保证总结报告的简要易读。更多总结思路：设计年终总结/汇报怎么写？送你一套超高效的万能公式！2022 马上就要过去，又到了写年终总结的节点。阅读文章 > 欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/summarize-ideas
卡片 内容 间距 卡片设计在 UI 中有非常多的优势，相关的文章我已经写过几篇了，结合往期文章可以更系统地学习卡片设计规范：新人设计师来收！卡片式设计基础入门指南（附超多案例）很多人对 APP 中的卡片设计习以为常，但对于卡片设计流行的原因、优点，以及如何做好卡片设计却可能不甚了解。阅读文章 > 做好这4个细节，帮你快速提升卡片设计效果！Hi，我是彩云。阅读文章 > 在做卡片设计时什么才是最重要的？这篇文章中我将会分享 8 个最关键的细节。在这之前，我们一起来对 UI 中的卡片设计基础做一个梳理，总结下一般在哪些场景适合用卡片设计。卡片是 UI 中的一个组件元素，能够创建清晰的视觉单元，让信息更具逻辑性。它通常包含：标题、描述、图片、按钮或者链接。基础卡片一、一般在哪些场景使用卡片设计？产品目录页面：大型电商网站诸如亚马逊、阿里、沃尔玛和 eBay 都使用了卡片设计做产品呈现。通常，一个产品卡片构成包括产品图片、标题、价格、折扣和行动按钮，可以通过点击这个行动按钮查看商品详情页面。Amazon (top) and Alibaba (bottom)eBay (top) and Walmart (bottom)内容网站：新闻文章、社交媒体平台会使用卡片组件这种比较聚焦的设计去呈现每个内容，这样用户可以快速扫描，阅读内容。Behance (top) and Dribbble (bottom)CNN (top) and BBC (bottom)仪表盘界面：仪表盘是一个非常好的例子，在其中能够很容易体现卡片设计的优势，它能把相关的信息在界面上组织到一起，帮助用户更容易的比较和分析数据信息。Mixpanel (top) and Dribbble (bottom)收集网站：浏览和探索大量的设计作品是一种有趣和吸引人的体验，就像 Pinterest，Unsplash 基于卡片布局，用大图封面的形式能够抓住用户的眼睛。这就是为什么在网页和手机体验中使用卡片浏览变得如此流行的原因。Pinterest (top) and Unsplash (bottom)协作工具：卡片是很灵活的组件，它可以将不同类型的信息和子元素组合在一起。例如，Figma、Miro、Framer 都用了卡片形式展示项目和文件。卡片设计干净、易于互动、实用，可以很容易地进行文件相关操作。Figma and Miro二、最佳实践讲卡片设计的文章相信已经很多了，但我想在这篇文章中着重讲一些容易被忽略的设计细节。我希望这些点可以帮你进一步优化卡片设计。1. 注意在卡片和背景之间设计合适的对比度为了从背景中更好的区分卡片，你可以给卡片增加一个外描边或者加一个浅浅的投影。彩云注：这里原作者放的例子我觉得没有特别好，但是她提到的这个细节确实是需要注意的，背景和卡片之间的颜色对比不要太小，不管是改颜色还是加描边或者投影，都是为了加大这种对比。比如下面彩云随便找的一个很优秀的卡片设计，就是用的多彩色加大了卡片与背景的对比，使得信息清晰可见。2. 努力维护好字体大小，避免使用太小的字号内容可读性由所选字体和字体大小决定。下面的例子中可以看出，两个卡片设计在样式上都差不多，但因为字体大小选的对，整个卡片在视觉上变得更平衡，对人眼来说更好，所以右边的卡片更容易识别。关于字号选择有一些经验可以分享给你，帮助你优化视觉层次。（彩云注：这里提到的尺寸应该多指 PC 端）标题，使用的字号会在 20px-96px 或者更大，取决于卡片的尺寸和具体内容副标题，字号会使用小于主标题 2px-10px，这样可以比较容易区分正文，字号最少 16px。在某些情况下，如果你使用某些本身字符就比较大的字体，则可以适当减少字号。例如，在谷歌规范（ https://material.io/design/typography/the-type-system.html#applying-the-type-scale ）中，两个正文文本的大小分别定义为 14px 和 16px按钮，它的字号不可以比正文的字号小。当需要展示多个选项时，对于主要按钮需要用到更突出的字体样式（加粗 Semi-bold/Bold），次级按钮使用略弱的字体样式（一般 Regular/Medium）尝试限制字体大小的数量，可以使用字体缩放插件，Figma 中的插件 Type scale（ https://www.figma.com/community/plugin/739825414752646970/Typescales ）或 Web tool for defining a type scale（ https://type-scale.com ）3. 对留白创建一个间距体系留白是 UI 各元素之间的空白区域，它们将创建视觉组，保持视觉层级。如果你想避免设计混乱，需要确保做好一致性，你需要定义好间距体系，这对开发来说也会非常有效，减少代码量，还原的更好。关于间距系统我也有一些经验选择一个基础单位，并用它来作为 UI 元素间距的倍数值。一般来说，基础单位是 4px（0.25rem）。不建议使用奇数比如 5px，这是因为设备中会有 1.5x 的 DPI，这个留白的缩放值会变成 7.5px 会导致像素模糊通过使用基础单位作为增量或乘法来定义间距值，减少间距值的数量，会让 UI 更简洁，例如它用来定义 Tailwind（ https://tailwindcss.com/docs/customizing-spacing ）这个产品留白规范Figma 进阶用法，修改“大移动”（具体设置方法见官方帮助文档 https://help.figma.com/hc/en-us/articles/4404575206295-Set-small-and-big-nudge-values ），从默认的 10px 改到 8px，这将会让你每次移动元素可以保持 8px 的数值（这是基础单位的 2x），只需要按住 shift+方向键即可。这会非常省时间4. 尽可能设计与内容布局相似的加载状态加载状态匹配即将加载的真实内容会减少用户对于加载内容的不确定性心态。下面的例子，你可以在右边看一个正确加载效果的设计，会更加符合用户的心理预期。一组加载状态的效果对比Figma and Vimeo5. 定义一个卡片的固定高度在实际项目中，你需要设计一个卡片元素，假定一个卡片是一行内容，另一个卡片是有 4 行文本内容。最好的解决方案是设计一个固定高度的卡片，在内容较少的卡片上使用留白，而在内容较多的卡片上使用文字截断。（彩云注：这样卡片在效果上更加一致。）6. 使用网格作为卡片设计的基础规范网格作为卡片的布局基础，有助于统一地安排内容，这就是为什么当涉及到卡片设计时它们是如此有用。当你需要时，可以使用网格将卡片的宽度扩展到需要的网格列数量，通常这样做，你可以找到一个合适的卡片宽度。当设计一个响应式布局时，应该为每个断点设计一个网格，设计相应的卡片大小。（彩云注：可能有些人不大理解断点的意思，它指的是从 PC 切换到平板，然后再切换手机，屏幕大小在变化，布局也会做相应的改变）(1) PC (2) 平板(3) 手机你可以在这 2 个网站学习到更多关于响应式设计的规范 Material Guidelines or Intuit Design System.当你在设计基于卡片，响应式布局时，你需要问自己几个问题：卡片内容在所有断点之间看起来一致吗?（台式机、平板电脑、手机）间距值是否一致？交互合理吗?它们会影响卡片的大小和卡片之间的间距吗?长标题有考虑吗?它们会如何影响卡片的内容?一些 Figma 设计卡片布局的建议：为卡片定义约束 constraints（ https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize ），以确定当你调整它们的大小时，布局中的卡片应该如何响应为卡片应用 auto-layout（ https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout ），使它自动调整大小根据里面的项目。在 Figma 上有教程（ https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/additional-tips/#using-constraints-with-layout-grids ）创建一个 8px 的网格可以让你在设计中精确地排列和调整 8px 增量单元的元素大小7. 创建不同内容的卡片设计如果你事先知道卡片可能有不同长度的内容，请确保在设计中涵盖这种情况。在不同内容转换过程中将帮助开发以正确的方式为卡片做好还原，避免破坏内容对齐。8. 为更好的用户体验定义卡片交互UI 交互是用户通过触摸屏、鼠标或键盘设备与 UI 元素交互时发生的操作，状态是在特定用户的交互中出现的视觉反馈。与许多其他 UI 元素(按钮、文本字段、下拉菜单等)一样，卡片的状态应该取决于使用上下文和定义的交互。对于特定的交互，卡片应该根据状态设置样式。最常见的卡片状态列表:默认：卡片处于正常状态，无任何用户交互悬停：当用户将鼠标光标(指针)放在卡片上时激活：如果卡片是可点击的，用户按下鼠标主按钮点击它，卡片的样式应该改变，以显示组件是激活的。这与按钮被按下的状态相同聚焦：当使用键盘或语音等输入法时，卡片会高亮显示。通常在网页上这种状态是用蓝色的，但你可以选择你自己的品牌色，只要确保颜色与背景颜色至少 3:1 的对比度选择：卡片被选择时的状态拖动:用户拖拽卡片时的状态总结卡片是 UI 中的常见组件，你可以在大多数网站和移动应用中找到它，它实在是太流行且实用了，所以一定要掌握好卡片设计并进行大量的练习。通过这些知识点的学习，我们可以使它们在视觉上更有吸引力，更有效，更容易访问。欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/8-card-design-methods
热点 内容 数据 大家好，这里是和你们聊设计的花生~现在很多设计师都选择在抖音等短视频平台上发布作品，打造个人品牌以实现流量变现，但不少有这种想法的设计师对创作什么内容、如何引流不太了解。今天就为大家推荐一款抖音官方出品的创作者工具「抖音热点宝」，它能帮助我们学会如何洞察热点趋势、优化创作内容、参与热门话题并获取官方流量扶持，是新手短视频创作者必备的神器。免费好用！自媒体时代设计师必备的5款Gif制作工具大家好，我是和你们聊设计的花生 ~身处自媒体时代，我们每个设计师都可以作为内容创作者在微博、小红书、知乎、朋友圈这些地方分享自己的经验和想法，而无论是写设计教程，还是制作表情包，Gif 动图都是一种极佳的信息传递媒介，它比静态图片更详细生动的展示步骤和细节，也比视频更轻便直观，因此应阅读文章 > 抖音热点宝网页端地址：https://douhot.douyin.com/手机端入口：进入抖音 - 点击右上角的搜索 - 输入“抖音热点宝”获取入口抖音热点宝是抖音官方推出的创作者工具。它汇集抖音每日3000+热点，支持热点分析、热点预测、数据观测、官方活动日历查询等功能，帮助创作者更直观全面的了解热点趋势。下面以手机端为例，为大家分享如何利用热点宝帮我们创作热门内容以及迅速吸引流量。在抖音手机客户端搜索“抖音热点宝”就会显示入口，点击banner进入热点宝的界面了。热点宝功能分区有三个：热点、观测和活动。「热点」展示的是分钟级别的上升热点榜单，可按类别和城市筛选，更快速定位优质的热点内容；「观测」展示的是分区的头部账号，我们可以选择监控其中一些账号或者作品的数据，作为自己优化内容的参考；「活动」展示的是官方活动日历，可以帮助创作者提前规划创作内容，并获取官方流量扶持。1）热点功能热点区内包含视频、图文、音乐、搜索、全站热点等分类，可以精准了解不同分区的用户都在关注哪些内容。点击标签进入对应的话题发表内容，对这个话题感兴趣的用户就能收到本条内容的推送和曝光，从而获取流量。如果想做平面设计方面的内容，可以先点开“话题榜”搜索平面设计，然后在“话题总榜”处将选项更换为“热度飙升话题榜”，时间选按自己的需要选“近3天”或“近7天”。设置好这些选项后，我们就能得到目前站内关注度最高的有关平面设计的话题排行。进入其中的话题可以看到话题的热度趋势、播放量趋势、点赞量趋势、作者画像和用户画像这些内容。点击“话题详情”可以参与发帖，这样制作的内容也能被精准推送给对平面设计感兴趣的用户，从而实现曝光和吸粉。2）观测功能“观测”功能非常适合刚开始做短视频内容的设计师。学会一项技能最好的方式就是先模仿，如果你现在对该创作什么内容、写什么样文案、以什么形式展现还比较迷茫，那就先找一些你觉得在设计领域做的比较好的账号，把它们作为学习的对象，分析这些账号的选题、文案、更新频率、时长、点赞收藏数据等方面的信息，作为自己创作内容的参考。抖音热点宝的“观测”功能通过一下几点协助我们做好数据分析工作：1. 观测指定账号数据。在搜索栏内输入你想观测的账号，可以看到该账号的点赞、涨粉、评论、分享、更新等数据信息，其作品的数据分析（如点赞最多或涨粉最多的作品），还有该账号粉丝画像和粉丝数据。2. 观测指定视频数据。如果你在刷抖音的时候看到一条很好的内容，可以通过分享功能复制其链接，然后复制到热点宝“ 观测-他人作品 ”中，就能获取该作品全部数据。3. 观测自己的作品。使用这个功能可以帮我们准确优化自己创作的内容，如果一个作品你花费了比较多的心思或者进行了新的尝试，可以将其置入观测中，实时关注数据变化。如果没有达到预想中的数据，就需要思考一下是哪方面的问题以及该如何调整优化了。3）活动功能“活动”内有抖音的官方活动日历，会在展示未来30天内的官方举办的主题活动，参与这些活动会有官方的流量扶持，对于刚入门的创作者来说是一个不错的引流方式。因为可以看到未来活动安排，有比较充足的时间准备内容，对新手非常友好。点击进入活动详情页后，“活动介绍”内会有关于投稿时间和内容形式的详细介绍，大家根据要求进行创作投稿即可。抖音热点宝的网页版与手机移动端的功能相同，而且多了"热点广场"功能，在里面可以看到实时的热点榜单和热词趋势。用网页端看榜单趋势及分析数据的体验比手机端更好，大家可以根据自己的实际情况结合使用。以上就是今天和大家分享的短视频内容创作神器「抖音热点宝」。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~「抖音热点宝」网页端地址：https://douhot.douyin.com/「抖音热点宝」手机端入口：进入抖音 - 点击右上角的搜索 - 输入“抖音热点宝”获取入口推荐阅读：清华出品！AI 神器 WantQuotes 让你的文案立马变高级大家好，我是和你聊设计的花生~前两天刚盘点完一波人工智能在图像生成方面的超强工具，又在微博上看到了清华大学推出的一款“据意查句”的 AI 工具，可以按照你想要的意思快速查找出相关的名言、诗句、俗语等 。阅读文章 > 写文案没灵感？这8款文案网站免费用！编者按：本文为大家收集了 8 款好用的文案网站神器，包括名言通、押韵助手、学句子、藏头诗生成器、朋友圈文案网站生成器、邻近词汇检索、彩虹屁生成器、句易网，让你写文案手到擒来。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/douhot-douyin
内容 瀑布 网格 编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。往期组件科普：UI组件应用指南！标题栏设计方式详解编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。阅读文章 > 一、组件介绍瀑布流 (Waterfall Layout)，又称瀑布流式布局，是信息流网格布局的一种视觉形式。顾名思义，这种布局形式既像瀑布一样无限向下倾泻，内容又如水一样没有固定样式。所以我们可以总结出瀑布流的两个最核心的时间特征：无限加载内容等宽不等高二、使用场景瀑布流因其视觉特征，多用在以多种比例图片/视频为主体的内容流中，最典型的例子莫过于花瓣、Pinterest，这类图片采集网站使用瀑布流可以更有效地利用页面空间并充分展示图片内容而不裁切，同时让用户的浏览体验更加沉浸，错落的图片也相对更容易形成有效的视觉引导，引导用户不断向下浏览。以及另外一类以小红书、淘宝为代表的强内容展示 APP，在布局内容时不约而同地使用瀑布流，其核心原因即在于其强视觉引导的特性。三、设计要点1. 列宽的制定逻辑对于等宽的网格列表来说，我们只需要去关注它们之间的间距是多少，这样更方便不同宽度设备的适配，网格会自动扣除间距并适配网格宽度，而不必设计师一一去定义。例如，我们只需定义两列网格的左右边距均为 20pt，间距 12pt。那么不管是在 12/13/14 的 390 宽度中，还是在 ProMax 的 428 宽度中，布局都会固定住这三个数值，并自动适配列宽，列宽的数值具体是多少，并不需要我们关注。这也正是两列网格通用的适配逻辑。2. 内容的布局瀑布流有三种内容布局形式。① 图片等高在图片等高的情况下，能造成网格高度错落的原因只有文案。文案的长短不一、是否有标签等因素，会造成每个网格中的文案部分出现高度差异，从而形成网格错落。但因为文案通常不会超过两行，这种高度的差值往往是固定且非常有限的，也就是说更容易在下方某些地方回归对齐。所以这种布局更容易把控视觉秩序，但会因为强制图片等比例导致内容的不完整，除非限制用户上传图片的比例。② 根据图片比例自由变化这是一种完全不限制图片比例的形式，网格的高度不仅由图片影响，也由文案影响。几乎不可能做到在下方某处重新对齐，所以视觉上往往更加混乱，偶尔会出现极长或极短的网格，导致视觉权重出现非意图的倾向。③ 根据有限图片比例变化这种形式的意思是说，在用户上传图片时就限制图片在有限的几种比例之内，所以尽管网格高度同样由图片和文案共同影响，但却将高度差值限制在了相对有限的范围内。现在大多数电商 APP 采用的便是这种布局形式。3. 内容的类型瀑布流发展至今，对于内容类型也有许多 App 根据实际项目需求做出了自己的探索。相较于单一的内容类型，因为内容构成更复杂、需求更多元，更多大型 App 会偏向选用多类型内容混合的形式掺进瀑布流里，在达到功能需求的同时，减轻单一性内容对用户浏览时的信息疲劳。具体来说，内容类型分成两个大类，主内容和运营内容。主内容主内容根据 App 类型的不同，包括但不限于图片、视频、动态、商品，主内容依然是瀑布流中占比最多的内容类型。在一个页面内可以使用一种主内容，也可以多种混合。在多种主内容混合时，设计形式上通常并不会有太大的区别，只会在同一设计框架下，增改该内容类型特有的信息。运营内容针对 App 不断扩大的运营需要，更多 App 会在瀑布流中插入运营内容。例如，淘宝会在瀑布流最开始的左上角放置一个小型的轮播组件，左上角则是主推的与拼多多抗衡的百亿补贴功能入口。以及马蜂窝，在顶部放置一个两列宽的轮播推荐位。这些都是很不错的根据自身需要改造瀑布流的实践。三、样式拓展1. 站酷站酷的瀑布流会在中途插入一组视觉上差异较大、与主内容类型相干性也较低的推荐设计师用户，因为站酷瀑布流内容类型较为单一，这么做可以用来调节单一内容类型对浏览造成的视觉压力。2. 马蜂窝马蜂窝的瀑布流样式差异化做得相当大，不管是纵向对比(与同页面其他卡片)还是横向对比(与其他 App 瀑布流)，设计都显得非常大胆前卫，所以马蜂窝的卡片样式有比较好的参考性。3. 其他瀑布流样式结尾瀑布流的组件就介绍到这，后续所有有关组件的介绍都会同步更新。欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/waterfall-layout
视觉 原则 内容 B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。格式塔主要包括 7 个基本原则：用超多案例，帮你学会经典格式塔理论的7个视觉原则格式塔理论为界面设计准则提供的相关的基础理论和原理支撑，一起来了解下吧！阅读文章 > 今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？接近性原则我们先看 2 张截图，分别是不同分辨率下的界面效果。可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。相似性原则相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。闭合性原则IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。连续性原则用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。简单对称原则通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。主体与背景原则主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。共同命运原则共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。总结虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。今天的分享就到这里了。如果有更好的案例，欢迎评论区留言分享给大家~近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/apply-gestalt-theory-to-product
内容 卡片 页面 微交互系列意在分析交互动效中更加细节的思考，探索微小设计中的更大可能性。本期主题是研究双列瀑布流的卡片内容浏览体验。我们关注到不同的双列瀑布流中，从卡片内容点击后到过渡为一个完整页面的动画在不同的 APP 中设计上有一些微妙的区别。而这些微妙的区别带来了不同的浏览体验。于是我尝试把不同的过渡动画进行了逐帧的分析，观察其中的细节差异，以及探寻背后的设计思考。方式一：滑入滑出滑入滑出是在交互中比较常用也是比较普通的形式，典型代表如淘宝的推荐内容，以及 B 站的视频内容等等：这类交互虽然比较常用，使用起来也并不会有太大的问题，不过既然我们今天抱着一种钻研的态度来看，那我们就要找到使用滑入滑出动画带来的问题 – 增加了用户的「反应时间」。什么是「反应时间」？用户完成点击后，到新页面进入的这段时间，是我们常规理解中动画的「过渡时间」。受到网速的影响，可能还会产生系统的「响应时间」及新内容的「加载时间」，这里我们抛开这些，假设响应和网速都处于最佳状况去做后续的探讨。那么在双列卡片内，用户被图片内容吸引，滑入新页面后，原来关注的图片大小和位置均发生了变化，用户的视觉焦点要重新在新页面寻找，然后再基于这个焦点开始浏览其他信息，这个过程称之为「反应时间」。举一个更便于理解的例子，这里的「反应时间」其实就是指你在玩打地鼠的时候，从地鼠出来到反应它在哪个洞的时间。而这样的时间，据研究通常在 200ms 左右（刺激源为单一刺激源，具体引用见文末参考）。这个数字代表了什么呢：当我们在打游戏的时候，延迟超过 100ms，就会有卡顿的感觉。所以滑入滑出动画所带来的近 200ms 的反应时间，在无形中影响到了用户在浏览页面时的体验感。方式二：容器变换容器变换是谷歌在 Material Design 的 Motion 章节中的一种动画定义。对比滑入滑出，容器变换能更好的引导用户的视线，在过渡的同时完成了用户的视线引导，大大缩减了用户的反应时间，提升体验的流畅感。对比上面的例子，就好像你在玩打地鼠的时候，地鼠的半个头已经冒出了洞口。在我们常用的产品中，诸如 Pinterst、小红书、大众点评的推荐内容都用了这种效果：良好的视线引导让过渡和反应同时发生那么如何做一个好的容器变换呢？Material Design 中把此动画打开的过程分为了 4 个部分：原始卡片淡入消失；新内容从卡片变为详情页面的容器大小变化；新内容从卡片变为详情页面后的位置调整的屏幕等宽，并置于屏幕顶部；新元素淡入出现。动画为 0.25 倍速播放但仔细追究，这个过程其实可以分为 5 个部分：原页面出现蒙层；原始卡片放大并淡入消失；新内容从卡片变为详情页面的容器大小变化；新内容从卡片变为详情页面后的位置调整的屏幕等宽，并置于屏幕顶部；新元素淡入出现。蒙层让原来卡片外的内容有了退出舞台的效果，过渡更加自然。关于这个动画，实际开发中可能会遇到一个问题，Material Design 中的设定非常理想化：所有内容都在本地已经被拉去。实际情况是由于网络条件的限制，详情页内更多的内容并不能实时被展现出来，为了让内容能更快展现，过渡更加顺滑，小红书的数据加载做了一些的预处理：每次加载拉取 10 条内容的信息；拉取的信息包括第一张图，标题，和内容；如果是视频，会拉取一定时间长度作为缓存，即可保证点开即播放；文字内容拉取一定长度，保证一屏内可完整阅读。小红书的预加载内容，图为弱网下的测试效果而对比双列瀑布流设计的鼻祖 Pinterest，在内容的预加载上则更加保守，只加载了标题和图片以及很少的描述内容：动画为 0.25 倍速播放总结来说就是为了让过渡更加顺畅，技术上尽可能的将很多内容提前读取到本地，从而让新内容能够在过渡动画的时候就可以展现出来。所以，要想做好一个好的容器变换，除了设计上做好动画的过渡设计，技术上还要考虑好信息的加载。前面讲的是容器变换动画打开的部分，接下来我们说说关闭动画的设计。同样对比滑入滑出，容器变换的关闭通过将页面缩放为卡片，很好的帮用户在返回原页面的时候，引导视线的定位，帮助用户找到之前浏览的断点，继续浏览原来没看完的内容。Material Design 中把此动画关闭的过程分为了 4 个部分：原内容淡出消失；页面变为卡片的大小变化；页面变为卡片的位置变化；原页面中的 UI 元素淡出消失。动画为 0.25 倍速播放而在小红书中，省略了第 4 步，直接从页面缩放回卡片：并且随着右滑的关闭首先还会先进行一部分的缩放效果来保证过渡更加顺滑：而在关闭过程中做的最细致的也是 Pinterest，在原来 Material Design 4 步的基础上，关闭过程中还做了两个优化：对返回后的页面还做了一个从大缩放到小的处理，和原来页面缩放的卡片动画进行了一个大小的呼应；让原页面在滑动返回的过程中就从页面缩放为图片，和整体页面的缩放融合的更加流畅；通过慢动作，可以清楚看到后面页面的元素被整体放大缩小，同时卡片变为图片其次，如果卡片是从中间或者屏幕偏下的位置被点击，在返回后卡片会贴到屏幕顶部，让下面更多的内容被呈现出来，持续吸引用户点击：右下角的内容点开返回后，到了屏幕上方总结从流畅度上来讲，一定是更加建议在双列瀑布流中使用容器变换的动画过渡。同时在设计过程中，注意过渡的细节和数据的处理，保证内容更加流畅。一个小小的内容过渡，也可以做很多精细的设计，从而提升用户的浏览体验。引用：Material Design – Motion：https://material.io/design/motion/the-motion-system.html#container-transform科学网：人机交互的控制及失误：https://wap.sciencenet.cn/blog-40841-1227701.html?mobile=1研究Material Design交互动态系统后，总结了这6个知识点！从设计的维度，动态设计可以分为交互动效和 Ae 动效，在这两方面个人都有相关落地项目。阅读文章 > 欢迎关注作者微信公众号：「Minus Lab减法实验室」本篇来源：优设网原文地址：https://www.uisdc.com/masonry-layouts-card
标签 用户 内容 Tabs 标签页又称选项卡（以下简称标签页），它是一种高效的屏幕空间利用手段，映射非常接近卡片的目录索引，用户可以基于索引标签，快速定位到目标中内容中去，这也是大多数用户来自现实世界的经验。在 Web 页面中，它的使用场景也较为简单，当页面的内容信息量较多，用标签页可以对其分类，一方面可以提升查找信息的效率，另一方面可以精简用户单次获取到的信息量，用户更能够专注于当前已显示的内容。本文从标签页的「基本原则」和「使用避免」两个维度，总结 10 个我们所要注意的一些规则和方法，如果遵循这些原则，它不仅能够快速、高效帮助用户完成任务，也会让我们设计的体验更好。由于 Tabs 标签页涉及到的端设备及内容较多，本文只讨论 Web 端内标签页的使用情况，不讨论浏览器级别的标签和导航标签设计等。基本原则1. 标签的文案应当是简短且高效的标签的文案应当简短，做到让用户快速识别标签的文案需要尽可能使用简短的、概括性强的关键词，如果使用较长的文案，那么对于用户阅读和区分这些信息都是一个不小的挑战。标签文案需要有明显的区分，避免用户产生歧义；在词语上优先使用名词而不是动词，因为动词让用户误以为这是可以行动的按钮。标签的文案应当做到高效展示标签的信息展示传达应当高效，比如不要让标签文案分开展示，如下图的标签页的状态和数量两组信息较为割裂，用户会做短暂思考关联下方内容的是状态还是数量。如果设计的样式与常规标准差异较大，用户就会产生疑惑，所以对于用户已形成的行为习惯，尽可能避免改变。2. 已选中的标签应当是唯一的且足够突出已选中的标签应当是唯一的标签页之间是相互独立且互斥的，一次只显示一个标签的内容信息，不会出现点击一个标签页，出现两个甚至更多标签的详细信息。一般默认选项为第一个标签页，而如果没有给到用户预选择的情况，也会让用户感觉困惑。同时关联的详细内容区域宽度应该是等同的，切换不同的标签，不要改变其内容宽度的大小。已选中的标签应当是足够突出确保已选中的标签页足够突出，让用户一眼就知道了当前选中了哪个选项卡，特别是当只有两个标签页的时候。可以通过字体大小、颜色、粗体等在增加已选中的视觉权重。3. 标签页版面延伸到内容区域，可加强标签与内容的关联性如果将选中卡片式标签页背景颜色和内容面板背景保持一致，就能够做到增强选项卡与内容之间的联系感。4. 标签页的位置和排序，应当基于人的阅读习惯位置：强调或需要引起用户的注意，请把它放至顶部因为人的阅读习惯是从左至右、从上到下的顺序浏览，所以相较于底部或左侧的标签页，顶部的标签页具有更强的视觉引导并引起用户的注意。相反如果用户不太关心，甚至很少切换这些标签页，可以考虑将它们放至底部。排序：重要的、使用频率高的标签应当放至前面如上所说，人的阅读视线从左到右，所以应当将重要的、使用频率高的或者按照逻辑顺序往前排，通常默认选项（一般为左侧第一个）是用户进入页面看到的第一个标签页，因此它的信息应当是最重要的、或者应当是用户使用频率最高的。以下是以京东关于商品详情的一个排序，用户看到的第一个标签页是关于商品的介绍，第二个标签页是商品的规格包装，第三个是该商品提供了哪些售后保障等等。使用避免1. 避免使用图标作为标签页文案在一些场景下，图标有时反而会让用户误解标签的信息，如果要用请全部添加，不要只针对部分标签选择使用图标。使用时仍需注意，将图标放至 tab 标签的左侧。2. 避免截断标签文案，并且让它们有足够的点击面积避免截断标签左侧的文案，减少的文本会阻碍用户对于信息的识别和理解完整的标签信息，可以帮助用户快速识别当前的位置。如图左侧标签内容的减少，会妨碍用户对于信息的理解，反而会降低标签的可识别度和操作切换的决策成本。标签页应当有足够的面积，避免让它们进入紧凑模式每个标签页都有层级引导的作用，需有一定面积来展示标签信息。比如像浏览器的标签页特别多时，会给用户使用带来两个问题，一是可点击区域非常小，精准点击较为困难；二是标签获取到的可用信息非常少，甚至有时只是一个图标，当然对于浏览器，我们完全可以重新打开一个新窗口，来解决这个问题。3. 避免数据为空，就不显示这个标签页一般情况下，如果将标签页作为数据信息分类展示时，即使该标签下没有数据，该标签也是需要显示的，否则用户就永远不会知道有这个标签页的存在。4. 避免标签页，在内容较少或者作为比较时使用避免将标签页用于很少的内容分类，因为会降低信息的展示效率标签页本就是为过多内容信息而采用的一种分类方式，如果一个 tab 下只有几段文字或者几组录入数据信息，可以考虑在一个页面内展示这些内容，不仅可以提高屏效，还可以减少操作上的切换成本。如下图，简单的三组数据信息，我们就可以将它们放在一个页面中，通过卡片来区分它们。避免将标签页用于比较不同类别的信息，因为它会增加用户的记忆负担因为用户通过切换标签页去比较这些信息时，短暂记住这些内容是一件非常困难的事情。所以对比不同类别之间的内容，可以考虑在一个页面展示，如下图就是苹果官网在一个页面显示的 Mac 机型比较，可以同时对比三款机型的信息。5. 避免嵌套标签页，如果使用请加大他们的层级关系避免在 web 页面中嵌套标签页，因为嵌套后层级较为复杂，可能会造成信息的混乱，用户记不住已访问过哪些标签页。如果有嵌套 tab，请在视觉上加大他们的层级关系，并且尽可能减少一级 tab 的数量。6. 避免复杂内容标签页，用户直接删除在表单中，如果删除该标签页后，会给用户造成工作负担，甚至会丢失一些数据，这时的删除操作需要给用户反馈提醒，给到用户二次确认是否删除；如果删除该页签后，对于用户几乎没有任何负担，或者再次输入的成本较小时，不建议使用二次确认，因为这时给用户带来的操作干扰远大于误操作成本。比如下图 Microsoft Excel，当标签页签有内容输入时，删除会需要用户二次确认，而当页面内容为空时删除不会给用户任何提醒。在具体的业务场景中，我们需要结合用户的删除频率、误操作成本以及删除组件的干扰三者之间找到一个相对平衡点。总结以上就是标签页在设计中我们所注意的一些事项，如果遵循这些用法，不但解决信息的堆积问题，也能够大幅提升页面的清晰和可用性。而如果我们发现用户很少去点击这些标签页、或者使用经常出错，就需要考虑这些标签页是否使用得当，或者违反了上述所说的一些基本用法。以上举例覆盖的场景不一定全面，不过我们最终的目的还是通过标签页这个组件，去引导用户将视觉聚焦于页面内容。参考文献：张亮《细节决定交互设计的成败》尼尔森诺曼，《Nielsen Norman Group》从3个方面，分析总结标签设计的体验细节！在移动端产品中，标签不是核心内容，甚至有点不起眼，但是谁都无法忽略它的存在。阅读文章 > 欢迎关注作者微信公众号：「小高杂谈」本篇来源：优设网原文地址：https://www.uisdc.com/how-to-use-tabs
操作 按钮 内容 上期我们小聊了一下弹窗的定义与使用的常见场景，本期我们来聊点实际的：弹窗的内容布局，本来本期想把常见的两种弹窗问题：弹窗的从属关系（弹窗叠弹窗）、弹窗的流程关系（连续弹窗）都讲一遍，但写完基本布局以后发现字数超了，所以弹窗这个话题从 2 期变成 3 期了。用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 弹窗的基本布局以车为例，假如我们把“车”这种物体身上的零部件分成两种：一种叫基本零件、另一种叫附件。基本零件（比如发动机）是所有车都必须要有的、没有它车就开不起来，甚至就不能叫车。而附件（比如座椅、天窗），这些东西可有可无，每一样车的配置可能都不太一样。比如车装上铲子就是铲车，装上车箱就是货车。在做规范时，做控件的逻辑和组装车是很类似的：控件的内容布局也有基本零件和附件。基本零件的差异决定了不同弹窗类型（这种差异是比较大的、场景性的差异）；而附件的差异则决定了同类型弹窗的扩展性（也就是你定义的这类型弹窗，极限状态下最多能支撑什么样的场景）。按上一篇文章从交互的角度讲讲弹窗（上）来讲，触达、信息展示、操作弹窗各自的基本零件可以画成这样：用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 也没多难画成这样了以后我们可以发现，就算是支持复杂场景的大弹窗，其实骨架结构也是简单的。以 JIRA 这个操作弹窗为例：真的很爱大弹窗接下来我们就按照弹窗的基本框架布局来一项项地拆解弹窗的基本零件与常见附件，复杂问题展开讲，简单问题就简单过：相对简单的：容器、标题、关闭方式比较复杂的：内容区、主操作按钮附件：渐进展示弹窗的容器容器也就是弹窗尺寸，虽然在做规范的时候弹窗尺寸一般是 UI 去定义的，但作为交互我们也需要思考一些事情：弹窗的尺寸需要和内容适配。正常情况下，弹窗应该是不需要纵向滚动的（当然横向滚动就更应该避免了）。假如你的弹窗尺寸需要滚动一下才能展示全信息，应该先考虑它是不是过小。大弹窗和全页面、不同尺寸弹窗之间，应该有明确的界限。交互需要去界定什么样的信息量是弹窗容纳的极限，超过这个“极限”那么弹窗这种控件就无法承载、需要使用其他的展示形式。弹窗的标题弹窗必有标题，能不能写清楚弹窗标题，算是区分合格交互设计师与还差点意思的交互设计师的试金石。其实这事情说复杂也不复杂，只有 2 个事情需要注意：（1）假如这个弹窗是由用户主动触发的，那么弹窗标题应该与用户触发弹窗的操作按钮同名，或者至少有相同的关键字。此时弹窗是用户操作后的反馈，用户需要通过弹窗的标题来确认自己是否进入了正确的模块、进行了正确的操作。（2）弹窗标题与内容区说明文字要各有分工。一般来讲，弹窗标题简单陈述问题、询问行为或者作出行为建议。内容区的说明文字展开来解释出现问题的原因，以及操作后的后果。当然文案，或者更时髦的说法：UX writing，是一门很大的学问，甚至可以支撑起一个职位。所以这里讲的两条规则只是最为基础的原则，不能涵盖所有的文案要求（比如你要是做国际化，那么标题和正文的首字母大小写、加句号不加句号都需要考虑）。另外，B 端的文案规范有时候也无法推广向 C 端营销类设计，因此本篇暂时不做更多讨论。这篇15万人阅读的文章可以帮你了解B端文案：阿里设计师出品！B端产品文案指南说明： 本文主要面向 B 类业务、简体中文语境，提供实操性指南； 行业内约定俗成的常用语建议沿用，可以不依照这里的建议； 本文所指的文案不包含营销推广类文案。阅读文章 > 弹窗的关闭方式作为一个非常底层的控件，弹窗（或者说窗体）应该兼顾大部分用户的不同习惯，来保持整个系统有比较好的可用性。因此，建议在右上角添加“x”作为关闭操作性弹窗的最短路径，并且佐以键控、点击遮罩等多种关闭方式；除非要求用户明确表态（比如要求同意协议）。当然，更便捷的关闭方式代表着更多的误触，如何平衡可用性和误触，就要根据具体场景具体分析了。内容区与主操作按钮这两个东西不能分开来讲，它们是弹窗设计里最复杂、最经常出体验问题的部分。理解了内容区与主操作的关系，才能真正理解弹窗的设计。1. 内容区与操作的层级关系做 B 端产品时，设计系统的稳定是非常重要的一件事。构成设计系统稳定的重要因素之一，就是控件的操作模式的稳定和一致性。这个部分属于设计中比较难以量化验证的地方，就算做得很好，也可能并不能从业务数据上找到特别正向的反馈；但要是做得不好，整个设计系统（至少是交互系统）的逻辑会很快地被复杂的业务摧毁崩溃。设计系统一旦不能自圆其说，那就没有系统可言了。因此为了避免这种情况，做交互还是需要定义一下控件的基本层级关系和逻辑。弹窗的底栏层级高于内容区：底部操作栏上的主操作按钮承载着全局操作，它的行为对弹窗整体生效、可能会导致弹窗关闭；而内容区的操作只对内容区生效，并不会导致弹窗关闭。这意味着做交互的时候，需要在样式上为全局按钮、内容区按钮作出区分，以免用户产生困惑。比如说假如我们是一个中学老师，现在正在新增一个班级列表，班级列表里有所有同学的名字：到此为止内容区与操作的关系都还是清晰的，但一旦我们为弹窗加入导航控件——tab，那有些人可能就搞不清楚了。首先我们在做弹窗的时候，要尽量降低弹窗的层级结构和内容复杂度，尽量把用户完成任务的关键信息一开始就展示出来，避免用户在弹窗里四处探索。但假如说因为任务的因素非得在弹窗上加 tab 的话，还是需要记住：属于弹窗内容区的 tab 的层级低于弹窗操作区。在 windows/mac 的应用程序中，这个问题可以被官方规范提供的 group box 组件解决——可以理解为把内容区从弹窗上“框”了起来，在视觉上创造出内容区和操作按钮之间的层级差异。但是由于当前互联网整体的设计趋势倾向于减少层级、扁平化，所以在日常做设计时往往不再能使用这种视觉上的处理方式，只能做交互的人自己心里清楚。还是以新增班级为例，假如存在一个按钮让我们按一下就能上传班级列表的 excel，但是 excel 里有些名字可以读取出来，有些名字包含特殊符号（比如，、…），需要人为修改一下，那么这个弹窗也许就会这么做：这个时候跳转到到“读取失败”tab，底部栏的主按钮仍然存在——即使你可以给表单设置一些提交限制，要求读取失败的项目没有被手动修改的时候，不允许点击“新增”按钮。反过来说，正因为弹窗的操作区层级比内容区高，并且 tab 是一个导航控件而非选择控件，因此 tab+弹窗的潜台词是“点击操作按钮后，所有 tab 中的内容都会被提交，即使有些内容当前没有展示出来”，而不是“只有选中的 tab 会生效”。因此，假如你需要让用户在弹窗上作出选择，就不要使用 tab 等导航控件，而可以选择单选框/多选框这种典型的选择控件（或者苹果的 segemented control 这样有点像导航的选择器）。比如说我们在新增班级弹窗上给用户提供了两个功能：手动新增或批量新增两者的内容区样式不一样，那么画出来则是：值得注意的是，这个层级关系只能应用在弹窗上，在网页全页面上往往存在层级高于操作按钮的全局导航。2. 内容区与操作的映射关系有的时候，弹窗会提供多种操作选项，并且每种操作选项都会有大段的说明文字。还是拿学校老师新增班级做例子：校园网新上线了一个功能叫“智能新增班级”，这个选项可以根据你的身份，自动检测你带的学生并填充到表格里，你只需要把他们对应的班级标注出来就好了，不需要一个个手动填写学生姓名，非常方便，所以推荐老师使用。但由于系统还不是很完善，因此只能检测到高中部和小学部的学生，带初中部学生的老师，还是需要手动新增班级。假如非要用弹窗来做新建方式的选择入口，并且还按照我们之前的弹窗基本结构来处理，那么有些人可能会做成：这个案例和诺曼《设计心理学》里那个炉灶与旋钮的案例不谋而合。这样设计的劣势是，用户从读完内容区的文字，到去操作区进行行为，需要在心里先做一个判断——我是高中小学部还是初中部的老师？然后再做一个映射——高中/小学部点这个“智能新增”、初中部点这个“手动新增”。一来一去反应时间就变长了、出错概率也更高。因此，我们可以在这个案例上增强文案与选择器的亲密性，让用户做出判断的瞬间就可以完成操作，无需再做一次映射：甚至，假如这个任务以效率为第一标准并且规范定义的比较宽松，我们还可以省略“下一步”按钮，直接将点击生效的热区放置在内容区上：同理，优化操作按钮的文案也能帮助用户消化内容区与操作按钮之间的映射关系。比如说这种再确认弹窗：习惯上来讲我们会将一个弹窗的积极操作（确认、提交、更改…）修改为与弹窗标题或内容区联系性更强、更符合场景的说法，比如说打印机的“打印”弹窗，操作按钮写作“打印”而不写作“确认”。这样做的好处也是帮助用户减少反应的时间。但另一方面，弹窗的消极操作（一般是取消或退出，注意消极/退出操作不等于破坏性操作，比如删除）的文案是不会修改的。这样做是为了让用户无论在什么场景下，都能感知到“取消”是一个无害的、不会造成严重后果的安全退出方式（和弹窗右上角的 x 一样）。3. 操作按钮与附件理想状态下操作按钮只有 2 个，但实际情况是多种多样的，所以有时候操作区也可能有超过 2 个按钮。我个人把 3 个操作按钮作为弹窗操作区的上限，假如超过 3 个按钮，那么就应该思考是不是去掉操作区，直接把按钮放在内容区里，以便帮助用户合理地判断自己应该按哪个按钮。当存在 3 个按钮时，按钮的摆放规则可以根据自己平台的特性决定，并没有通行的规则（但一般会将破坏性按钮放在主操作按钮的对侧）。假如弄不清楚用户的主要诉求，不用在多个按钮中非要选一个推荐操作。最常见的弹窗附件是“不再提示”按钮，选中后提交弹窗，则这个弹窗就在用户或者设备维度不再出现了。这个操作常规上用 checkbox 实现，并且放在弹窗内容区/操作区都可以接受。需要额外注意的有这么几点：（1）对于触达弹窗来说，点击“知道了”“立即开通”都能算是对弹窗的一种表态，因此选中“不再提示”以后，点击任何一个主要操作弹窗都应该不再展示。而相比之下，选中“不再提示”后又点击“x”就意味比较含糊了，考虑到一般“不再提示”选框都不做默认选中，因此这里选中很有可能是用户有强意愿，所以点“x”弹窗也不展示也说得过去。但对于操作弹窗来说，“取消”是全局性的消极操作。在任何情况下，用户点击“取消”的含义都是“放弃弹窗上的一切已完成操作并且退出弹窗”，所以这里只要用户点击了“取消”，无论是否选中“不再提示”，都应该视作选择未生效。虽然这样做在具体场景内有违背用户预期的可能，但为了全局交互规则的一致性，这样是更合理的。（2）有些人比较倾向于把“不再提示”做成操作按钮。我个人其实不太理解这种做法。假如这个弹窗具有用户价值，那么就持续弹好了，没必要设置“只弹一次”的限制；假如这个弹窗纯粹是商业化行为，那按钮文案写成“我知道了”，直接修改按钮的弹出逻辑即可，也没必要告诉用户错过这次机会以后就不提示了。欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/popup-design-2
表单 用户 内容 前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。表单设计看似很简单、实则很容易忽略用户体验，作为设计师，需要根据触发条件、使用场景将各元素进行灵活的调整，才能确保用户顺畅的完成表单任务，因此，设计出一个可用性非常好的表单非常有必要。本文将针对表单的设计准则及用户体验进行了总结，希望能够帮到大家。本期大纲认识表单表单结构及元素设计细节暂存及送出规则如何提升表单完成率常见误区及避坑指南总结认识表单1. 什么是表单？表单主要用来收集或呈现数据或特定字段等信息，属于信息采集工具，可运用到不同的场景模块中，例如常见的登录注册、调查问卷、个人信息页面。如何确定当前页面是不是表单页，主要看该页面是否发生信息采集而触发用户进行输入、选择、编辑等操作。2. 表单的交互状态完成表单内容需经过三个阶段，即交互前、交互中、交互后的三种状态。交互前：未发生任何操作，默认为初始化状态；交互中：光标插入即成为聚焦状态，占位符消失，随着内容的输入，输入框后面显示一键清除图标；交互后：输入完成光标离开，前端如验证内容有误会立即反馈，无误则回到正常输入后的状态。表单结构及元素设计细节1. 结构/框架首先，在视觉上，移动端表单不管所输入字段有多么少也不要在同一行添置多个表单，使用单列方式呈现，便于用户浏览和理解。如果存在关联性极强的前置条件可设计多列，如：输入手机号码之前要先选择国际电话区号，可将这两个字段纳入同一个（双列）表单项。其次，表单内容需先易后难，避免用户从一开始就产生逃避的想法，需根据内容的关联性循序渐进的引导用户完成。例如：添加地址，常见顺序是姓名、电话、地区、详细地址，如果一开始就让用户填写详细地址的话就不合理了（并不是不行），这等于在颠覆用户的认知，就算完成了表单内容多少也会有些“上头”。最后，当同一页面表单项过多时，需要根据类型、相似性或前后关系进行分组，以保持页面的节奏感，让用户在最短的时间内对整个页面内容有个大致的了解，从而能更轻松的完成表单。另外，将选填的内容尽量靠后，如果重要性较低，就直接去。2. 标签标签的作用是告知用户当前表单要输入什么内容，清晰简洁的表单能让用户更快速的理解。标签的长短决定着其对齐方式，通常标签字数在可控的情况下可使用左对齐；文本字数不可控但不是很多时可使用右对齐；字数不可控且标签长短不一、相差巨大就使用顶对齐（例如英文，大多数不可控，参差不齐）。3. 占位符占位符主要对标签进行描述或补充内容格式，它并非内容，而是在用户输入内容之前帮助其解决常见问题及误区，用以提升表单的完成效率。部分设计师喜欢将占位符和标签保持一致，实无必要，如果只是单纯的为了视觉上统一，使用通用提示「请输入/请选择」也很不错，或者在后面加上推荐性措辞，否则就直接留空。当光标插入时，尽量保留占位符，输入内容后再消失，方便用户在输入内容之前依然可通过占位符得到帮助。在这里需要说明一个误区，避免直接将占位符作为标签使用，如果只是针对登录页面，用户还可以理解，因为其内容比较大众化，账号+密码、额外再加个验证码，很容易理解。但其他类型的表单页面就容易让用户产生疑惑，输入内容时随着占位符的消失，容易忘记表单的内容属性，增加了用户的理解成本和使用难度。4. 输入能让用户选择的就不要让其码字输入，例如：输入手机号码，可让用户跳转到通讯录自行选择。尽量减少需输入的内容，通过已知信息预判并帮助用户自动录入，如：手机号码前要先输入国际区号，若产品主要服务于国内用户，系统自动录入“+86”，可节省用户的操作成本，降低表单的完成难度。在表单输入后，需在后面提供一键清除图标“ⓧ”，因为系统提供的删除功能只能单个文本清除。需对输入的内容设计规范格式，将同一组较长的内容加空格分段，便于浏览记忆。例如地址“广东省 深圳市 龙华区”、手机号码“138 888 88888”等。5. 键盘键盘是内容输入的必备组件，很多时候，产品会允许用户在系统输入法与第三方输入法之间自由切换，基于常规操作似乎没有什么问题，但站在用户体验角度，需要根据不同使用场景考虑是否需要开发内置键盘。如验证码、部分密码只需输入纯数字即可，这时调出内置的纯数字键盘可减少无关元素（字母/符号）的干扰；出于安全考虑，涉及财产相关的密码则需要打乱键盘的字母、数字顺序，虽然会增加用户的理解成本，但与财产的安全性相比，显然在可接受范围之内。6. 选项当表单项存在多个选项时，需根据选项的数量、长短设定不同的展示方式，如单/复选按钮、弹窗、页面跳转等。1）按钮：当选项不超过 6 条且单条选项在 4 个字左右的，可设计成按钮样式供用户选择；2）弹窗：选项较多时，使用操作栏弹窗展示；3）跳转页面：若选项太多且不可控，使用跳转页面的方式则体验更佳。7. 提示提示是用户在操作前对完成表单项可能存在疑惑，当占位符不足以说清楚时，会在标签后面增加一个提示图标，用户点击后通过弹窗或新的页面来查看详细的解释说明。8. 数据验证分为前端验证和后端验证，前端验证无需服务器传输数据，程序已写好的验证规则，光标离开即可验证（就像玩单机游戏），例如内容格式、长短、文本类型验证等；后端验证需要将表单内容传入后台数据库进行匹配，与数据不匹配将验证不通过，例如账号不存在、密码错误等。验证反馈需遵循就近原则，将错误提示显示在对应的表单项附近，便于用户及时修改。另外，不要将错误信息直接清除，可将对应信息或输入框用颜色区分（标红），让用户在原有基础上进行修改则效率更高，试想一下，你一口气输了 30 个数字，因为错了一个就得重复前面的操作次数是什么感受，请记住，把决定权永远留给用户。暂存及送出规则1. 暂存方式暂存是指已完成的表单内容还未提交至系统而需要离开当前页面，系统为避免用户重复完成表单内容而提供的预防措施。我们需要根据用户的实际使用场景来确定是否需要加入暂时存储功能，以给予不同的存储方式。笔者曾经碰到过这样一个问题，在微信某公众号中将一个超长表单完成一大半时，然后需切换到微信拿取几个信息，必须要回到对话列表（当时没有浮窗功能），无奈只能返回查看、并祈祷已输入的内容能够保留，结果…不出意外的给清空了。换个姿势再来，于是下载了对应的某 APP 去完成刚才已重复过的操作，当在微信中拿取信息后再回到某 APP 时，发现已被结束进程，&%￥#@……，卸载，拜拜。这些问题出现的原因有很多，可能是设备问题、也可能是自己的不良习惯，但作为设计师，虽然无法避免问题的出现，但需要给用户提供解决问题的措施。可能有人会说，这些小问题不在设计范畴，是程序控制的，用户习惯五花八门，即便提供预防措施也不一定能增加用户的忠诚度，笔者想说明的是“解决问题不一定能留住用户，但不解决问题一定留不住用户”。在部分较长的表单页面增加暂存功能，可一定程度的提升使用体验，基于场景的不同，我们对手动存储、自动存储、询问后存储三种方式进行解析，以确保选择合理的暂存方式。1）手动存储手动存储并非信息提交，指的是用户在完成表单中途有退出需求时所提供的暂存方案，其最常见的是页面右上角或末尾提供的“草稿箱”功能，存储后，下次可从草稿箱进入接着编辑。多用于 B 端或工具型应用，例如：我们需要发布投票、调查问卷、活动等，可事先设定好条件规则暂时保存至草稿箱，待需要时从草稿箱编辑或发布。2）自动存储对于填写内容超多的表单页面，数据自动存储非常有必要，当遭遇系统崩溃、网络故障、应用闪退等突发事件时，连手动存储的机会都没有，或许花费了很长时间才完成的内容又得重复一遍，真的很让人崩溃。如线上申请信用卡、贷款等复杂表单要求填写各种信息，可能需要来回获取且分多次完成，这时加入自动存储功能，体验一定会更好。3）离开时询问用户未将内容送出时返回/离开，会触发系统弹窗提示“是否保留内容？”，相当于手动存储的强提醒。我们在微信朋友圈编辑好内容、未发布离开时就有此提示。2. 送出方式在表单页面，会存在多种不同的操作按钮，如上一步、下一步、存草稿箱、提交等。这里讲到的送出是指通过下一步、保存、提交或确认等行为召唤按钮将表单内容提交至系统，并根据表单页内容的重要性、将按钮放在不同的操作位置，最常见的有固定页面右上角、固定设备底部和表单底部三种方式。1）固定页面右上角这是一种常见的提交形式，多用于内容较少的页面。当表单较为复杂、且需要认真填写时，为了不影响用户的注意力，也可能将送出按钮放在右上角以弱化视觉吸引力。2）固定设备底部方便用户随时点击，常用于内容重要性不是很高的表单页面，可能选填项多于必填项。这种设计方式有着较强的视觉吸引力，能降低用户的跳出率，促使其快速将表单内容送出。3）表单底部表单内容较长且重要性较高，需要完成绝大部分的必填项，下拉到最后一个表单项时才能看到送出按钮，能起到一定的引导作用。对于内容较少的表单，按钮最靠近内容，用户无需太大的视觉跳跃就能连贯地操作。行为召唤按钮的文案必须清晰简洁，能让用户快速明确按钮的功能和意图，不要让用户思考。如何提升表单完成率1. 用识别代替输入能用技术解决的问题就绝不留给用户，很多时候，用识别代替输入，能提升用户完成表单的效率及使用体验。例如身份证扫描自动识别录入个人信息、银行卡拍照识别卡号、系统自动定位等，都能帮用户省去很多不必要的操作。善用技术的力量，把所谓的麻烦留给技术，得到的回报并不仅仅是用户这一次的完成任务，可能是良性循环。2. 微交互让操作过程更有趣我相信，没有谁会在无聊的时候喜欢填写一些信息提交给产品（除非让 TA 领钱），用户是为了完成某项任务才被迫去完成表单的，所以在这个过程中适当给表单加入微交互，可以让交互过程变的更有趣，还能起到引导用户的作用。例如：B 站用户登录输入密码时，顶部的卡通人物会用双手捂住眼睛，给予用户安全的心理暗示。3. 提前告知必备材料，让用户有心理准备完成表单的主观意愿在于用户时，一般对操作结果会有一定的心理预期，那么应该在用户正式填写表单之前告知必备的材料。假如完成一个表单同时需要身份证、毕业证、银行卡等资料，用户总是被频繁中断、要去寻找这些资料，就会逐渐失去耐心，导致中途放弃的可能。提前告知用户可让其有一定的心理准备，从而接受程度会更高。4. 提前告知奖励，让用户有所期待完成表单的主观意愿在于产品时（与上面相反），为了更好的掌控主动权，部分潜在的风险、必备材料让用户过早知道，可能还没开始就已经放弃了。例如：获取线上理财产品额度时，没有谁会事先告诉你，一定要用身份证实名认证，即便这是必须的，产品也会先让用户提供一些重要性不是那么高的证明材料，然后再循序渐进的引导至重要证件的信息输入，当表单内容即将完成时，对后续的必备材料的接受度就会逐渐增高，毕竟谁都不喜欢在最后一步放弃。虽然不能过于明确用户的付出，但可在用户开始填写表单之前告知可能获得特权、奖励等，让用户有所期待。基于人性趋利、人心向利的弱点，产品可以通过福利、奖品的发放进行利益引用，吸引用户来完成以产品为主导的表单需求。（PS：这就是为什么推荐办理信用卡会带上几个拉杆箱、问卷调查会附带周边礼品赠送的原因）常见误区及避坑指南1. 减少不必要的表单项目PM 总是认为，每一个表单项都是必不可少的，殊不知每多一个选项，就会增加用户的时间成本和操作难度，可能导致用户流失。经过分析后发现并不是所有的表单项都必不可少，虽然有时出于特殊情况，但需要尽量去做到减少表单项。下图所示，身份证为必填项，出生日期完全可以使用技术从身份证号中提取；手机号、邮箱、微信、QQ 让用户填写不是目的，获取联系方式才是主要的，手机号码（必备）、微信（主流）完全能满足对用户联系方式的信息搜集，没必要设计一个既复杂又长的表单让用户全部完成。2. 将相互关联的表单项组合起来将关联性较强的信息组合起来形成一个表单项，不仅让用户输入的连贯性更强、有效节约界面空间资源的占用，还能让表单更有组织性、减少用户的认知负荷。例如时间/日期、区号/电话号码、省/市/区…等3. 隐藏不相关的信息如果用户打开表单时的第一感觉就是内容太多，会心生退意，隐藏不相关的信息、删减无用的字段，通过合理控制表单的复杂性能减少用户的心理负担，必要的信息在用户需要时出现，有效降低用户完成时的无关干扰。4. 合理的利用分页、分组如果隐藏、删减了很多内容后，表单依旧庞大，切记不要把所有表单项一次性全展示给用户，过长的表单感觉要花费很多时间才能完成，会导致用户不知所措、产生烦躁情绪而放弃填写。这时就需要将所有的表单项进行分组，有必要的话就分页展示。将超长表单分割多个小任务，分页呈现并显示操作进度，会让用户对整个表单形成清晰的预期。细心的设计师会发现，很多应用将登录页的手机号/验证码输入进行了分页，主要原因是点击获取验证码之后需等待接收短信，而等待的空档期会让用户产生效率缓慢的感觉，分页后在跳转页面时能掩盖小部分的等待时间，从某种意义上来讲，分页操作的流畅度会“高于”多信息同页面等待完成。将超长表单分组、分页虽能提升体验，但不能过于细化、刻意增加操作步骤，否则可能惹恼用户，遗留下来的将是一个全新的问题。5. 标签与输入框视觉关联接近性原则告诉我们，元素之间的相对距离会影响用户感知他们之间的关系，相互靠近的物体被认为比相互距离较远的物体更有关联性。同一组表单元素应该靠的更近，以体现内容的关联性，确保界面层级清晰，用户不会产生疑惑。6. 字数限制需实时提示单个表单项输入内容较多，需要实时提醒剩余可输入字数，避免用户一股脑的输入完成后才发现内容量已翻倍，就得重新组织语言重复输入，很不友好。这种情况常出现在备注、介绍等较长表单项。另外，在自定义注册账号、设置密码的较短表单项中也会碰到。7. 内容长度与输入区高度相适应重要的表单内容，不管内容多长都应该完整显示，例如个人简介、详细地址等表单项，如果仅仅因为内容过长就将后面的部分隐藏，可以说是非常不友好，用户甚至无法对已输入的信息进行完整的预览，不能确认信息的对错。请记住，如果从一开始就不想让用户输入太多信息，那就从程序上控制并给予对应的提示。表单输入区的宽度虽然是固定的，但可以通过自适应调整高度来确保信息内容的完整性，保持良好的使用体验。总结以上是笔者对表单设计的一点经验和总结，希望对大家有帮助。在设计表单时，需要用结构化的思维去思考分析，视觉只是整个体验的一小部分，如果只关注表面，也很容易将优秀的表单样式复制出来，但却无法理解背后的设计价值，毕竟设计都是先想好为什么，然后才开始做。很多时候，可能有人会认为一些很小的表单细节显得微不足道，就算能起到作用也只是对 1％、1‰甚至1‱的用户，杯水车薪。但是有没有想过，一个应用中可优化的点可能会有100个、1000个…。虽然有时候做的不是很好，但只要能比上一次好，那就毫不犹豫的换掉它。6000字干货！5个Web表单设计冷知识当我们设计 Web 表单时，往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题，但每每到细微之处，又会有无数疑问从细节中冒出来给我们的设计造成困扰。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/form-design-rules
测试题 作品集 内容 在今天的设计师求职中，招聘方提供测试题让求职者完成，已经逐渐成为常态。尤其是知名互联网团队和各家大厂，测试题内容、花样更是层出不穷。下面是我最近收集的一些测试题，大家可以简单看看内容：很多人会抱怨，测试题完全不知道怎么下手，不了解题目、行业，没有更具体的需求，参考案例找不到等……这就是面试题存在的意义，过滤掉不知道怎么解决问题的求职者。对于大厂来说，无论是校招还是中低端岗位社招，都会有大量的作品集投递，虽然可以通过作品集质量完成初筛，但是剩下的作品集到底能不能代表真实水准是打上问号的。包含的可能性如下：抄袭他人作品，但是经过自己的洗稿私下协商，直接借用朋友作品集投递倾吞团队设计成果，包装成个人输出找兼职枪手，花钱输出作品集网上购买以上架作品集让作者下架冒充作者直接发别人主页链接……这些全都是我们真实遇到的案例，有时候不能光抱怨大厂测试难度逐渐提高，部分滥竽充数的新人是没有任何诚信原则的，一直在刷新我们认知的底线。所以，测试题要具备测试求职者真实设计水平的能力。布置的题目一定要是非标准，开放式的，越开放就越没有标准答案，也就越难通过借鉴抄袭来完成，反映求职者真实的水平。并且测试题绝不会只考虑 UI 界面设计水平一项，一定还包括 —— 用设计解决问题的思路，产品思维和交互能力。所以只是按要求简单做个视觉稿，是远远不够的。那么应该怎么完成作品集输出，我用“用户 360 视图” 这个测试题案例来做个解释。测试题的第一步一定是先分析题目，理解题目要我们输出什么，我们简单翻译一下：“输出一个包含前面信息字段，以电商使用场景为基础的 ‘用户 360 视图’ 视觉界面，并提供相关思考和说明内容。”已经明确要求提供设计思路的话，那么完成测试题的方法，就绝对不是勉强把界面拼凑出来，然后看图说话写论文，这是编不出有效的结论的。对于这类测试题，完成的流程如下：第一步：确认问题整个流程中最关键的一环，我们必须要先确定要解决的 “问题” 是什么。原题目中给了充分的暗示，如实际应用场景的导购、客服环境。我们必须要去构思一个业务场景，在这个业务场景中为什么要使用这个页面，它存在的价值是什么。比如我们可以模拟在一个服装电商平台，用户在 IM 工具发起客服的时候，那么客服可以通过查看这个页面来了解客户偏好，推荐相关的其它产品，或引导加入店铺会员，企业官方微信号等。然后，在这个场景中，你是客服你是怎么使用这个页面的，你怎么打开它，查看的习惯是什么，最核心的数据有哪些。开放式场景就是没有限制死业务的场景，让你自己发挥构思。这些业务场景的构思，是没有绝对的对错的，只要它们听起来合理就可以。而构思这些内容，就是把问题给找出来，竖一个 “靶心”，后面输出其它内容，就是一个打靶的过程。缺少靶心的射击，就会变得毫无意义。第二步：构建方案这一步，就是根据上面确定的问题，来构建页面的框架和交互方法。在 B 端设计中，信息、模块的划分是框架设计中的重要一环，我称这个步骤为 “切糕环节“。要根据内容的重要性、交互方式在前期想好它们怎么排列。然后，再把问题中需要的字段信息逐一置入进去，并控制好文字信息的对比性。如果出现了一些特殊的交互形式，就需要把前后的步骤和操作结果全部做出来。比如，用户行为轨迹模块增加时间、类型筛选的操作。我们一定要确保框架和交互是能解决前面提出的各项问题，击中靶心的。如果时间充足，那么一套方案肯定是不够的，你可以根据不同的解决思路，输出多套原型和交互方案出来（符合真实项目场景）。第三步：完成项目输出视觉输出，就是后期相对次要的事情。不是说视觉就无关紧要，而是输出优秀的 B 端视觉界面这个要求太基础了，满足基本要求是天经地义的。B 端测试题的视觉要求，一定不是花里胡哨的追波风，这对解决业务问题不会有任何帮助。只要确保界面的整洁、清晰、干练即可，没有特殊的要求就不要过度设计徒增烦恼。好的到现在了，全部视觉内容输出以后，就直接打包 JPG 邮件发回去？这样肯定也是不行的，专业的设计师输出内容要有自己的严格要求和标准。我们肯定要适当把这些内容进行整合，展现自己的思考内容，解决方案，交互方案和视觉样式。所以，简单省事的方法，是可以用一个文档工具，把内容正常记录进去后导出 PDF 格式。另一种方法，就和正常作品集输出没有太大差异，直接通过布局排版的设计，合并成一份更完整的 PDF 文档导出。比如下面是某入职特斯拉学员的测试题（总共做了 30 页）。这么来看，测试题输出是一件很麻烦的事，但它确实成为有效筛选优质应聘者的方案。最后被选中的，必然是积极性最佳，设计思路最专业符合招聘需求的那些。强烈建议在遇到想去的公司的测试题时，用 200% 的积极性去准备。能不能入职另说，每一次测试题都是一个绝佳的练习题材，认真完成可以非常快的提升我们的相关能力。提前祝各位面试题百发百中～金三银四跳槽季，收下这份 2021 年作品集避坑指南新的一年我们聊聊如何做作品集。阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/job-search-test
用户 产品 内容 众所周知，无论是在用户群体、产品定位，还是使用场景等方面，B 端产品与 C 端产品都有比较明显的差异。但是两者的基本设计理念是趋同的，例如提高效率、降低学习成本等等。不过 C 端产品更加注重运营，所以设计师不单单要考虑设计侧的用户体验，还要顾及商业目标的达成。B 端产品重点在于提升用户效率，这本身就是体验目标之一，因此 B 端产品的设计策略更加纯粹。两者在具体的设计表现上还是存在一定的差异性。今天我们就来总结一下，主要包括 3 个方面：内容的差异化交互形式的差异化展现形式的差异化内容的差异化1. 图文结合 VS 数据表格C 端产品重运营，通过流量的转化获得收益。B 端产品重功能，通过功能定制向客户收费。C 端产品想要达到商业目标，获得充足的流量，必然要内容化。内容想要吸引用户就必须要足够丰富，所以 C 端产品基本是用图说话，而短视频和直播的兴起，进一步增强了对用户不同层次的感官刺激。总之 C 端产品需要让用户看得爽、玩得爽、逛得爽，不知不觉的沉浸在其中，并逐渐产生依赖感。B 端产品聚焦功能，更强调帮助用户解决问题，特别是中后台的管理系统，主要是帮助用户完成数据监控、统计和查询。因此页面中充斥着大量的图表、表格和数据信息。内容的差异也带来了体验方面的差异。图片相对数据或者文字更加直观感性、富有亲和力，更容易引发用户的阅读兴趣，精美的图片更容易引导用户建立对内容的好感。而 B 端产品则是客观反映数据信息内容，相对更加理性，不会带有太多的情感体验。2. 个性化与标准化C 端产品服务于个人，更加注重用户的个性化体验，例如千人千面推荐机制，定制化的兴趣范围设定等等，希望能够通过精准的内容推荐，获得用户、留住用户。C 端产品功能服务于整体的商业目标，今天主推 A 功能用来拉新，明天可能就强调 B 功能的运营活动。另外版本迭代也比较快，功能玩法变化较为频繁，内容也会做出相应的变化。例如天猫最近首页也在不断变化。B 端产品服务于组织，每个用户不再是单独的个体，而是组织中的角色，更强调业务流程和组织协同，因此需要建立标准化的流程，或者相对有限的个性化。另外复杂和高门槛的业务内容，更加强调设计的一致性，从而减少用户的学习成本。同时 B 端产品的信息架构、业务流程一旦确定了，不会轻易改变。避免打破用户已经形成的认知和行为习惯，对用户的使用造成不便。交互形式差异化C 端更强调便捷性，希望可以随时随地触达用户，更多的是移动端产品。B 端产品以工作办公为主，更多的应用在 PC 领域。因此两者在交互形式上有很大的区别。1. C 端：全面体验、兼顾商业C 端产品在保证用户体验的同时，更讲求商业价值。交互体验上我个人觉得主要讲求少操作、短路径、沉浸式。特别是电商平台，例如淘宝，虽然首页中增加了各种频道入口和商品分类，但是并不希望用户按部就班，逐级操作。因为用户行为路径越长，造成的用户流失也就越大。搜索功能被放置在页面头部位置，页面滚动时也常驻在顶部，方便用户快速查找产品。同时运营活动会通过弹窗、浮窗、悬浮按钮，前置广告资源位等形式增加曝光，缩短用户的操作路径，实现内容的快速直达。而为了增加内容对用户的吸引力，让用户沉浸其中，淘宝、拼多多等都专门打造了专属频道，主打短视频和图文。2. B 端：业务为主，效率至上B 端产品最主要的价值在于优化业务流程，提升用户操作效率。除了常见的基础交互形式，在细节设计上也越来越 C 端化了。通过监测用户行为，或者信息内容实现智能提醒。例如飞书文档在用户首次使用场景下删除内容时，会主动提示快捷键功能，帮助用户了解学习相关功能。而公众号壹伴插件会检测文章中的关键字，文章中出现“原文链接”时，而用户未进行选项设置时，会主动提示相关信息，避免用户遗忘。另外在 B 端产品中信息架构非常重要，用户主要是依据导航菜单按图索骥，首先定位到功能页面，再次查找相应表格，最终定位自己所需的内容。所以信息层级的优化，可以较好的减少用户的操作成本和记忆成本。视觉表现的差异化视觉设计层面，C 端产品的要求远高于 B 端产品。1. C 端：场景化、丰富性C 端视觉设计师要求越来越高，基础的设计技能不用说了，动效、C4D 建模都逐渐成为了设计师的必备技能。界面风格也是多种多样，酸性风格、赛博朋克等等，希望能够通过提高界面设计的丰富性，增强页面氛围，保证对用户足够的吸引力，例如大促会场页面的头图设计。2. B 端：简洁化、统一性作为工具型产品，帮助用户提高工作效率是 B 端产品设计的核心价值。因此 B 端产品中视觉元素强调简洁高效，除了色彩相对丰富的图表外，主体风格基本是灰白色调，再加点主题色点缀基本就可以了，过多的颜色和背景信息反而会影响核心内容的浏览。写在最后虽然在设计理念上，C 端和 B 端产品具有一定的相似性。但是受到各种因素的影响，有时候 B 端的产品经理对用户体验重视不足，更多强调产品功能的强大，考虑如何实现产品功能，很少考虑用户是否真正的需要此功能，以及在使用过程中的操作体验。所以 B 端交互设计师需要在业务分析基础上，积极寻找产品设计中的体验突破口，不断提升产品的用户体验。如何区别B端与C端的产品设计差异？我总结了26条对比！随着企业数字化转型，B 端产品越来越受到人们的重视，B 端产品也越来越丰富，越来越多的 C 端设计师转行到 B 端产品的设计上来。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/b-and-c-difference
落霞与孤鹜
表哥
飞翔的企鹅
在路上
张大湿
