用户 系统 软件 今天和大家聊聊我对「SaaS」和「SaaS 用户体验」价值思考及设计实践总结分享，本文从如下三个方面展开：如何理解 SaaS 和传统软件的差别重新认识 B 端用户体验的价值SaaS 用户体验设计体系实践思考。更多SaaS产品设计干货：想找B端产品分析？盘点30家免费可试用的SaaS产品前几天写过一篇国外可免费试用的 B 端后台，感觉数量不够多。阅读文章 > 一、SaaS 的本质是什么SaaS，英文全称 Software as a Service，意思为软件即服务。是通过网络提供软件服务，可以理解为一种软件交付模式，因为交付模式的不同也决定了和传统软件的差别。在 Saas 之前传统软件需要购买后本地化部署，两者最大的区别在于，卖软件是将软件作为一个软件实体卖给客户了；而卖 SaaS 软件的所有权还在厂商所有，提供的是“软件服务”。Saas 模式的提出者是 Salesforce 创始人——马克·贝尼奥夫(Marc Benioff) 在98年的时候提出。有两个原因促使马克·贝尼奥夫思考并提出Saas：传统软件部署实施交付的失败率非常高；软件的售卖价格非常高，很多中型、中小企业有需求但无法承担高昂的费用。基于以上两个痛点及当时的现状卖软件给企业造成的影响，已经形成了恶性循环，市场受到严重的阻碍（据 Gartner 高德纳公司（美国咨询公司）的调查研究曾表明：在所有 CRM 项目中大约 55%没有达到软件用户的完整交付和预期目的，通俗的说是实施失败。）从卖软件变成卖服务，其中的技术方式的改变、交易模式的改变，促成了软件时代的变革，对于传统软件公司来说，是一次大革命。原来卖软件给客户，一次性（或者分几次）收到钱了；改为卖服务后，这笔钱就不能在短周期内一次性收了，现行的 SaaS 模式通常是按照用户的使用年费来收取。两者差别在于，软件商需要先主动改变可以短期的一次性高收入，从短期收入向长期收入的转变；所以 SaaS 是长期主义的事情。失败的 Saas 生意会出现一个问题：把长期生意做成了短期不可持续的生意；而短期生意带来的就是经营成本的剧增，导致生意不可持续。所以，Saas 模式决定了需要客户长期使用你的产品，才可以长期可持续赚钱，也就是通常意义上的客户终身价值（LTV）。那如何做到客户长期使用，其实只有一种方式：长期为客户创造价值，做到帮客户成功（帮助客户的业务成功），从而持续续约。吴昊老师，在《SaaS 创业路线图》中的讲到：SaaS 的本质是续费。这个观点我比较赞同，SaaS 的经营本质在于可持续。二、从新认识 B 端用户体验那么，决定 SaaS 的成功因素是什么呢？我认为决定性因素有三个方面：产品强大且灵活、用户体验优质、服务的有效支持。产品强大和服务的有效支持不言而喻，具体我们来聊聊用户体验的价值。传统软件在一次交付实施后，客户付 80%的钱，剩下的 20%能不能收回来就不那么重要。但 SaaS 模式，客户每年进行续费，若产品使用及用户体验满意度低，带来的影响和后果可能是客户终止续费。因此，和传统软件相比 SaaS 的用户体验的价值就更为重要，它直接影响 SaaS 的续费和流失。相信“用户体验”这个词大家应该非常熟悉，接下来我们重新认识什么是用户体验。官方的定义是：用户在使用产品过程中建立起来的一种主观感受。“用户体验”这一概念是唐纳德·诺曼（Donald Norman）在 20 世纪 90 年代中期提出的。产品大神俞军老师说过用户体验的本质是“用户最小成本满足需求”。基于俞军老师的定义、我的理解和思考，我认为是帮助产品和用户：最小成本满足需求，同时创造「美·好」体验。怎么理解，因为用户体验是满足商业目标的一种行为手段，我们来看下用户体验的需要考虑的双边关系，就比较好理解了。如下图：左边是用户最小成本满足需求，右边是我们企业最高效的服务用户。企业的本质就是创造商业价值，商业价值来源于用户价值，同时考虑实现商业价值的效果和效率。我们常常会听到“投入产出比”或者叫“投资回报率”；对于商业行为中的一环用户体验也如此。所以，用户体验的核心的就是：平衡用户最小成本满足需求，及企业最小成本服务用户。完成价值交换同时，满足持续性。由此，可以看出在 SaaS 的产品设计中，用户体验其实承担着一个比较重要的责任，因为它关系到成本的边际和规模化的影响，一头是产品一头是用户。那么作为产品体验设计师，我们需要具备一定成本意识，做好“成本管控的设计”，更本质来说设计过程中我们应该：把复杂留给自己，把简单留给用户。因为我们在设计的过程中把握产品的交互方式、使用流程，在用户认知和效率层面有较强的把控空间，充分做到的以“用户体验”出发；那后续销售、交付、客户成功的全链路服务过程的学习效率和服务效率会呈指数级上升。产品设计，应该把复杂留给自己、把简单留给用户。关于用户体验，就不得不介绍一下“ 用户体验要素”模型，个人认为这是所有产品经理和设计师可以贯穿整个职业生涯中都需要经常性、反复对照思考的设计模型。用户体验设计的价值远不止于让产品的视觉、颜值提升，设计更大的价值在于深入业务、洞察用户，帮助业务梳理产品信息架构、任务流程、交互体验。构建系统的用户使用方式和工作模式，从而达成用户目标；通过达成用户目标完成价值交换、以此完成商业交易达成商业目标。三、 SaaS 如何进行用户体验设计回顾 Saas 的商业模式，Saas 的商业模式决定我们提供的这个服务不是靠人海战术，因为 Saas 软件即服务的含义是所提供的软件就等于提供自助化的服务，应该提供的是自助服务、开箱即用、开箱易用的服务。那么 Saas 服务设计策略上，应该从降低系统使用门槛和提升用户的自主化服务两维度出发，根据这两个核心维度，我们构建了每刻 SaaS 产品体验的设计策略模型。第一，设计“系统服务自动化”，这里的服务是功能使用的操作，符合“低认知、易上手”，那么从设计整个体系 需要遵守“易发现、低认知、高效率、有温度”的设计原则展开，以用户使用行为出发设计符合用户心智认知的功能形态和交互流程。第二，设计“系统帮助自助化”，什么意思在全系统中构建帮助引导的自助化体系，用户需要帮助的时候提供人性化的引导帮助，我们从发现的维度、认知的维度，系统认知的维度，综合考虑用户系统的帮助引导。设计原则，是指导我们做正确设计的方针。设计原则的建立基于对用户使用体验全流程的基础上，以每刻报销的设计原则，围绕用户旅程、认知及行为出发构建。当用户接触系统从看出发，看见系统界面、发现操作入口；（发现）带着操作任务用户进入系统、看见导航、看见文字、看见按钮，都需要理解认知；（认知）用户从何开始、如何操作，在完成整个业务事项的过程需要进行填写、选择、交互过程就产生了生产效率问题；（操作）当出现误操作或系统出错时，需要系统纠错提醒、容错的设计、帮助及引导，当完成整个业务事项后，用户产生一种的情绪感受，这个感受即是印象、评价、口碑。（感受）紧紧围绕产品业务、用户处理特性业务的基础上，以终为始，回归到用户、业务、系统进行思考归纳的产物。设计策略，是指导我们如何进行做正确的设计。在 SaaS 产品分类上，常见的 SaaS 产品主要分为 3 类，行业 SaaS、职能 SaaS 和通用 SaaS。每刻报销产品从核心业务来说是职能类 Saas，从提升财务人员报销的发票审批、费用审核等效率展开，但报销的来源又源于普通员工的业务报销，业务报销发生又和所在行业的费用发生行为特征有一定相关性，所以是结合职能和行业 Saas 的属性，从用户体验的设计上需要考虑不同角色用户对于系统的业务理解、功能交织使用的不同诉求，这个设计过程探索研究是相对比较有难度的，以后有机会可以展开聊。下图是每刻系统经过 6 年过程中统计的问题分布，分布比率呈现：认知问题 60%，效率问题 30%、情感问题 10%。关于帮助引导我们在访谈客户调研发现，企业服务虽然客户已经用了好几年我们的系统，但财务部门还是经常性会碰到新入职员工的系统使用问题，甚至财务部门来新人时 以前系统发生的使用问题会从新出现一遍，所以企业服务有一个现象，客户是老客户，但新用户不断增加，新人一旦增加第一个遇到的问题就是认知问题，也辅证了我们对于 Saas 系统认知问题是用户体验的第一大问题。帮助体系建立可以从系统层面体系化有效降低用户使用的认知成本，围绕用户角色的核心业务操作使用流程、洞察用户旅程上的疑惑和障碍点。用户首次进入系统要建立介绍和引导，足够简单、降低陌生感，来减少人力咨询回复的投入。相比人，系统的自助化和自动化的服务，更具有复用性和规模效应。本文小结SaaS 的商业模式，按年使用账号来收费和传统软件的付费模式区别非常大，因为需要先主动放弃自己本来可以唾手可得的收入，从短期收入向长期收入的转变。在 SaaS 模式的时代，商业模式决定其必须关注客户成功、客户持续续费、LTV 客户长期价值。SaaS 的产品更需要重视用户体验，用户体验的优劣决定其产品的长期发展，SaaS 的用户体验设计则关注用户使用认知和行为效率，以及系统服务自主化设计和系统帮助自动化设计，用户体验将在产品成长期后半程，逐渐成为 SaaS 商业模式不可或缺的产品竞争力。以上，对 SaaS 及 SaaS 用户体验设计实践和价值思考，希望这篇文章对同行的你有所帮助和启发。本篇来源：优设网原文地址：https://www.uisdc.com/saas-ux-design
员工 系统 人力资源 B 端产品，在我们平时沟通交流过程当中，经常会提到这个词，但是对于 B 端产品的具体划分，其实也会不尽相同。比如对视觉、交互的要求都会比较高的 项目协同类产品；也会有对业务、交互要求更高的垂直业务型产品，又或者是按照管理模式，可以分为：管人与管货。不同的产品，对于 业务、页面模式 上都会有明显的差异，之前有加过我们交流群的同学应该都知道，我们进群的时候会问这么一个问题：“想进群还要考一考你，CRM、HRM、ERP、UEX，哪一个不是 B 端产品的简称？”其中有不少同学回答为 HRM，证明大家对于这类型产品并不了解，今天我们就来聊聊 人力资源系管理系统。更多B端产品解析：B端设计师收藏！5个章节深度解析客户关系管理CRM产品编者按：B端设计师如果想了解客户关系管理CRM产品，这篇堪称保姆级教程了。阅读文章 > 一、定义丨明确其产品含义HRM 系统的全称为人力资源管理系统，是 Human Resource Management 的缩写，主要作用是帮助企业管理和维护其人力资源。从产品类型上看，HRM 产品是属于垂直业务型产品，也就是说 任意行业的 人力资源相关部门 都可以使用这个产品，来跟踪员工的个人信息、工作历史和薪资情况，并可用于实施人力资源策略、管理员工培训和监控员工绩效以及处理员工福利和薪酬问题等工作。目前 HRM 系统在国内的地位其实非常的高，根据市场研究公司 Technavio 的数据，国内 HRM 的市场规模会比 CRM 更高，年规模将来到 41.2 亿美元，同时艾瑞数据也做了推测，因此在整个 B 端 行业当中是非常重要的一部分，并且这个产品几乎在每一个公司都会用到，所以相对来说比我们之前讲到的 CRM 要更为普及。二、作用丨了解产品的主要作用同样想要了解 HRM 系统，我们必须了解它带来的作用有哪些？首先关于人力资源管理系统，主要针对的用户群体为 中大型企业，而初创型企业一般使用较少，主要原因有二：初创型企业因为 规模较小，很少有具备完整的人力资源部门，因此购买使用类似软件的需求场景少。多数软件会具备基础的人力资源管理模块，因此不需要专业复杂的系统来进行管理。比如 悟空 CRM 里面就会包含有 HRM 系统来进行管理，对于他们来说基本的功能就已经足够。那对于中大型企业来说，HRM 系统究竟能够为其带来哪些价值，我们就来了解一下它究竟有什么作用。1. 提高 HR 工作效率很多人都会觉得 HR 工作非常简单，无外乎就是 招人+面试，但是我身边的 HR 朋友都会给我抱怨每天忙得团团转，他们给我分享 HR 的工作主要负责 五个方面：招聘、培训、薪酬福利、绩效、员工关系优化。通常在企业之间的大大小小的事情可能都需要 HR 参与，比如隔壁设计部一位设计师，对自己的薪酬不太满意，需要和你沟通；一位非常优秀的骨干人才需要离职，你需要努力留住；今年所有员工的绩效评估，你需要进行跟进。因此你会发现在 HR 的日常工作当中，存在大量重复性的工作（比如：工薪酬管理、培训计划制定、绩效评估报告）系统的出现能够让这些 HR 更专注于策略性的配置工作，重复的部分交给系统来进行完成，进而提高工作效率。此外，HRM 系统还能够提供数据支持，帮助 HR 制定合理有效的人力资源管理政策，从而提高工作效率。2. 人力资源优化人力资源优化通常是指提高员工的能力和素质，进而提升工作效率和质量，来帮助企业更好地管理人力资源（简单来说就是帮助企业，用更少的钱白嫖更多的生产资源）最近节后你是不是一直在 996 的疯狂加班？那你可以想想是不是因为 HRM 系统在背后捣鬼~对于 HRM 系统来说，优化人力资源可以通过以下几种方式：按照特定周期对企业员工进行能力评估，进而判断员工的能力与素质是否达标。比如很多公司都会在每一季度进行工作汇报，并且每年进行一次年终总结，这些都是在判断员工能力是否达标。优化企业的培训与发展机制，正向帮助员工提高自己的工作技能与水平。比如举办一些 用户体验设计 相关的分享大会，开展行业内的设计交流。开展合理的绩效考核，能够帮助员工更好地了解自己的工作表现。比如年末的绩效考核，使用 OKR、KPI 等考核标准来展开进而实现人力资源优化。企业员工的合理的优化、关于人力资源的优化，你会发现在各个方式都能够在系统当中寻找到对应功能来去体现。3. 人才梯队建设人才梯队建设是指对员工的绩效管理、培训与发展、晋升机制等方面的管理，以培养企业内部的高素质人才。让企业能够搭建出一支 有序、高效 的人才梯队。通过人才梯队建设，企业可以有效地提升员工的专业技能和综合能力，增强员工的工作积极性和创造力，简单来说就是让员工能够对未来充满憧憬。比如在 BAT 等多个大厂当中，大家都会有相应的职级标准以及晋升机制，这就是一个典型的人才梯队。三、专业词汇丨打破行业瓶颈专业词汇指的是在一个行业当中，必定会存在这个行业相关的行业术语，因此我们通过专业词汇的整理，能够快速掌握这个行业的专业知识，了解行业的具体动向。Offer：Offer 通常指的是招聘企业向求职者提供的工作机会。在 HRM 系统中，管理人员可能会利用 Offer 来记录和管理招聘信息，包括职位描述、工作地点、工资待遇、福利待遇等。Offer 可以用来帮助企业更好地管理招聘信息，并帮助求职者了解招聘企业提供的工作机会。HC：Headcount 组织或团队内雇员的数量。也可以用来代指组织或团队的人力规划（招聘）目标。补休：通常指的是补偿性休假，即超过正常工作时间而没有额外报酬的加班时间。通常会将这部分时间作为额外的休假时间提供给员工，以便员工可以休息和恢复体力。在 HRM 系统中，补休可能会被记录在员工的工作记录中，以便管理人员更好地管理员工的休假情况。COE：HR-COE（Center of Expertise），人力资源领域专家，指精通某一领域的人力资源专家，主要为业务单元提供人力资源方面的专业咨询。职责包括制定和设计制度、流程和方案，提供全球方案标准，并进行管理；与 HRBP 合作推广新方案并实施；在专业领域对 HRBP 提供技术支持等。定员：定员指根据企业既定的产品方向和生产规模，在一定时期内和一定的技术、组织条件下，规定企业应配备的各类人员的数量标准。激励：把以人为本，充分考虑人性发展的要求，尽最大可能去调动和发挥人们的积极性、主动性与创造性，从而极大地提高生产效率的管理方法定额：是指在一定的生产、技术、组织条件下，采用科学的方法和具体的计量形式，对生产过程中劳动者的劳动消耗量所规定的限额。常见的有时间定额、产量定额、看管定额、人员定额、服务定额、工作定额等。人才：是指在 HRM 系统中，具有专业知识、技能和经验，并能够为企业的发展和增长做出贡献的员工。通常情况下，人才指的是拥有特定技能或专业知识的员工，这些技能或知识对于企业来说是非常重要的。在 HRM 系统中，人才可能会被管理人员特别关注，并会给予他们更多的培训和支持，以帮助他们在企业中发挥更大的作用。人力资源保障成本：是保障人力资源在暂时或长期丧失使用价值时的生存权而必须支付的费用，它包括劳动事故保障，健康保障，退休养老保障，失业保障等。OKR：OKR 是指目标与关键结果，是一种组织目标管理方法，常用于企业管理和员工绩效考核。在 OKR 中，目标（Objectives）指的是企业或员工的长期愿景和意图，而关键结果（Key Results）则是帮助实现目标的具体衡量标准。OKR 通常会在 HRM 系统中用来记录企业或员工的目标和关键结果，并用于管理人员对员工绩效进行考核。花名册：花名册通常指的是组织或公司中员工的姓名和联系方式的一种列表，这种列表通常用于记录和管理员工的信息。在 HRM 系统中，花名册可能包括员工的姓名、联系方式、工作岗位、工作时间、休假情况等信息。管理人员可以通过花名册来查看和管理员工的信息，帮助他们更好地管理员工。四、产品流程丨了解产品的主要业务核心因为 HRM 系统主要围绕人力资源展开的，因此整体的流程主要是与这部分相关。主要流程分为：人力资源规划、人员招聘、面试选拔、入职、员工培训、薪酬福利、员工考核、员工离职。人力资源规划：HR 会根据企业的发展计划，去指定人力资源的规划安排，同时设定人力资源招聘和培训的目标。通常人力资源规划会着眼于企业的战略发展，同时对现有的人力状况进行分析，从而对组织规划、制度规划、人员规划、费用规划去制定合适的目标。人员招聘：根据企业的需求去发布招聘需求。并通过 HRM 系统发布招聘信息，将招聘信息分发到各个平台当中（Boss 直聘、拉勾、猎聘等平台），收集应聘者的简历与作品集并进行筛选。这也是 HRM 系统当中非常重要的能力，因为他是所有功能的入口，因此会格外重视。面试选拔：通过各大招聘平台收集到应聘者的作品集和简历过后，进行筛选与面试来对人员进行选拔，一般细致的流程分为：初筛、用人部门筛选、面试（3-5 轮）、发送 Offer，通常人员的选拔是一个 HR 非常重要的考核指标，因此在行业当中会存在很多 HR 为了他的 KPI 而进行面试的情况。人员选拔需要注重外部的协同，因为求职者需要参与线上面试、测试题、线下面试 等多个阶段，需要考虑清楚如何与多个软件进行协同，优化整体体验。员工入职与培训：通过 HRM 系统来安排员工的入职，通常入职需要与新员工签订劳动合同，并安排培训和工作安排，帮助新员工适应新的工作环境。发放薪酬与福利：使用 HRM 系统管理员工的薪酬和福利，包括工资、奖金、福利等。员工考核：员工考核是指公司按照一定的标准，采用科学的方法，衡量与评定员工完成岗位职责任务的能力与效果的管理方法，其主要目的是为了让员工更好的工作，为公司服务。员工离职：使用 HRM 系统处理员工的离职手续，包括离职证明、结算工资等。当然，作为 HRM 系统要涉及到的功能远不止这些，它所要面对的内容非常之多，比如招聘信息的发布页面、OKR 员工的目标对齐，因此我们上述讲到的，更多是 HRM 的核心场景所推导的。五、核心页面丨帮助你更快上手设计在 HRM 系统当中，同样会存在很多员工高频使用，同时设计起来也是非常困难的页面。我们就通过真实的截图，来带领大家理解一下这些核心页面在设计的过程当中需要注意哪些细节，这样能够保证大家在之后接触到类似的页面以后，不会犯迷糊~1. 职位发布职位发布作为 HRM 系统当中的核心，其实在系统当中的地位十分的高。而在基础的招聘信息当中，针对职位一共有：25 个字段（不包含特定情况存在的自定义字段），这些字段信息在各个系统当中基本相同。HRM 系统的职位发布，主要是在系统内部进行发布。而我们在日常求职时，通常不会在这些平台，而是在招聘网站上，因此各个 HRM 系统都会将职位信息，通过各种方法同步到不同的平台当中。以 鑫招聘 为例，发布完职位信息过后，我们就可以通过浏览器插件，将职位信息同步到不同的渠道当中，进行快速发布，这样更为省时省力。同样在飞书招聘里，它们也能够通过浏览器插件的形式，快速上线各个平台的招聘信息，进而减少 HR 的工作量。因此会发现这是一个重要功能，而我们要去关注的就是在不同的平台表单信息是如何去做的映射关系，我们需要将其标注清楚。2. 面试安排面试目前存在线上面试与线下面试两种方式，而在 HRM 系统当中，你会发现目前大多数产品推荐的都是以线上面试为主，因为疫情再加上线上面试成本较低，因此这种方式逐渐变成了行业主流。对于线上面试而言，我们需要解决的就是 笔试、视频、面评 等几个环节的线上体验，就需要我们集成：视频会议、在线文档、IM 以及问卷系统，因此在这里面做的最好的便是飞书招聘。首先我能够在一个页面当中做到视频面试、简历查看、面评填写，同时通过飞书妙记的能力，实现面试记录的快速新建，这样减轻面试过后再去回顾面试内容的痛苦。飞书招聘的优势主要也体现在集成工具上，因此协同起来效率更高。（这是我用 3 年飞书的一个经验）3. 考核制度考核制度一定就会说到 OKR 以及 360 环评，前者主要是一个任务目标管理工具，后者主要是做绩效考核的一种方式，这部分在 HRM 系统里面都是非常重要的页面。首先是 OKR，我就只展示页面了， 因为大多数的 OKR 工具都是大同小异，基本的交互模式就是 左侧为人员的列表，中部为 目标呈现，右侧是信息内容以及协同 内容。相对较为固定。如果感兴趣我们后续再给大家讲讲 OKR 产品的设计特点。360 环评则更为简单，其实可以简单的把它理解为是一个问卷系统，只是说我们会有不同的评价规则，进而来对员工进行考核。因此我们可以参考大多数的问卷软件，只是需要单独调研 360 环评的具体配置规则即可。4. 工作台对于很多 HR 来说，工作台页面其实非常重要。因为 HR 的大部分工作都是在协同，一方面联系今天需要参与面试的候选人，另一方面需要通知参与的面试官，同时还要筛选简历、发放 Offer，这些都需要通过工作台来实现，因此在工作台页面里面，你会发现都是关键的数据以及关键的信息安排。总结其实 HRM 行业一直以来，给我的感觉就是非常的神秘，因为在行业当中是非常重要的产品类型，但是你几乎没有途径体验到与之相关的产品，这也就造成大家对这类型的产品了解并不多。同时 HRM 本身是非常注重协同，无论是公司内部的链接还是外部人员的协同，也就造成 HRM 行业对设计师的要求非常的高。当然我对于这个行业的了解仅限于我自己的阅读以及身处这个行业同学们的资料辅助，如果你也身处这个行业，不妨在评论区说说自己的看法。下个 B 端产品我们来聊聊 WMS，下期见~本篇来源：优设网原文地址：https://www.uisdc.com/hrm-design
网格 系统 定义 过去，我们一直在使用 8 点网格系统，它帮助我们在 UI 界面中，或者一致性上做了有力的贡献。但是今天我想说 8 点网格系统其实并非最完美的，我们可以选择 4 点网格系统，他灵活性更强，今天文章和大家一起来分享下 4 点网格系统的未来。关于8点网格：如何用「8点网格」来规范你的设计？看这篇好文！8点网格流行有一段时间了，我最早知道这种设计方式是在看了谷歌的Material Design设计规范之后开始认识的。阅读文章 > 一、为什么是 4 点网格系统在谷歌的 Materials Design 设计系统中，就一直在倡导 8 点网格系统，使用 8 网格可以更好的帮助 UI 设计师完成界面设计，同时在一致性与多平台适配的效果会更好。Materials Design 8PX 网格Google 同时也使用了 4 点网格系统，这就会导致很多人分不清到底使用 4 还是 8 去定义 UI 界面的网格系统？Materials Design 4PX 网格目前我看到很多设计师，绝大部分都是单独基于 8 去定义，而较少将其合并使用，这就会导致很多场景下，我们定义出来的间距、组件等使用时候要么有些场景间距过大，最终呈现结果也不是很理想。所以，如果都要去使用，那就需要设计师分清楚 4 和 8 如何去定义及使用场景，这就会有些麻烦。IBM 2PX 网格如今，我们可以完全抛弃 8 点网格系统，而直接使用 4 点网格。因为 IBM 已经提前给我们铺好路了，IBM 使用 2 点网格系统覆盖他们软件 UI 界面的一致性，最终呈现结果依然不输 8 网格，毕竟他们都是 8 的倍数，但是设计细节会更容易满足。二、4 点网格的优势首先要说明一点，8 点网格和 4 点网格系统都没有对错，如今推荐大家使用 4 点网格系统，是有一定道理的，下面我们先看看这张图。基于 8 去定义网格系统数字 8、16、24、32、40、48、56、64；基于 4 去定义网格系统数字 4、8、12、16、20、24、32、40、48从上面可以看出，基于 8 定义的网格系统，其实存在一些细节的间距是没有的，这样我们在定义一些较小的组件时候是很难满足的。比如下面这个案例：左边按钮使用 8px 网格系统定义的间距 24，右边使用 4px 网格系统定义的 20，相对来说，间距节奏感会更好。可能有人会说，两个看起来差不多，但如果是追求极致的细节感，两个间距相差 4px 已经是非常大了。所以如果使用 4px 网格他的面会更广，也能覆盖 8px 网格的数值。三、4 点网格系统的应用使用“4 的增量”来定义页面上元素的大小和间距，简称为 4 点网格系统。任何定义的高度或宽度都应能被 4 整除，包括布局间距、组件与元素间距、组件大小等。4 点网格系统相较之前 8 网格系统的优势大很多，比如以前只能在 8 和 16 选择，那么如果使用 4 网格可以选择 12px 的间距。当然如果能被 8 整除的也可以被 4 整除，相对来说 4 的空间与灵活性会更大。如果没有使用网格系统去定义 UI 界面中的板式，就会导致各个设计师之间各自去定义，最终界面呈现出很糟糕的效果。如何定义 4px 网格系统？这个很简单，他和定义 8px 网格系统思路一样，比如 4 网格系统，我们可以基于 4 的增量去定义。下面看这张图。4px 网格系统写到最后，4px 网格系统的灵活与兼容性大于 8px 网格系统，在未来的 UI 界面设计中，大家可以使用起来吧。欢迎关注作者的微信公众号：功夫体验设计本篇来源：优设网原文地址：https://www.uisdc.com/4-point-grid-system
干货 合集 系统 大家好，这是 2023 年第二期干货素材合集！终于有一个不错的基于 AI 的 LOGO 生成工具了，这一期合集还有优秀网站设计参考范例，有专业的 Figma 设计系统筛选工具，此外还有 UI/UX 设计师可能非常需要的 UX 流程库，另外，本次合集还有2个付费工具，但是它俩实在是非常实用，希望能够帮有需求的同学节省时间和精力！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第一波！2023年1月精选实用设计干货合集大家好，这是 2023 年第一期干货素材合集！阅读文章 > 下面我们具体看看这一期的干货：1、基于 AI 的 LOGO 生成服务https://stockimg.ai/there-is-a-logo-for-thatStockimg.ai 提供的 AI 生成图片的服务是收费的，但是作为这个 AI 的副产品，Logo 生成服务目前还处于早期阶段，并且目前是免费的，对于 AI 生成 LOGO 有需求的同学可以收藏一下，虽然它生成的 LOGO 可能还不完美，但是即使以此为基础进行下一步设计，也省去了很多前期工作。2、精心挑选的网页设计项目灵感网站https://uxui.monster/这个名为 UXUI 的网站搜集整理了 700+ 素质极高的完整网站设计案例，这些案例并非是自动抓取而是手工筛选的。 UXUI 将所有的网站按照功能和配色进行了分类，如果你正在寻找特定类别或者特定配色的设计，可以直接在侧边栏快速筛选。另外，每个网站范例的页面当中，也被打上了标签，你也可以在页面中点击标签，看看有哪些同类的设计。3、色彩丰富有趣的开源多彩渐变https://gradienta.io/这个多彩渐变的网站提供的渐变素材并不仅仅是图片素材，每张渐变素材都有对应的 CSS 代码，而且这些 CSS 代码可以一键复制，而对应的图片素材也可以选择不同的分辨率 ，可选的格式有 JPG、PNG 和 SVG，而且清晰度也都超高。4、高质量付费 Lottie 动画平台https://drawer.design/Drawer 的这个平台是为初创公司、设计师和开发者所精心准备的，全部都是素质超高的 Lottie 动画，灵动自然的动画效果，比 Gif 小 600% 的文件大小，更流畅的效果，这些都是他们敢卖上价格的原因。对于预算充足的团队和设计师而言，Drawer 所准备的这些 Lottie 动画应该是能值回票价的。5、Figma 可用的专业设计系统大合集https://www.designsystemsforfigma.com/如果你正在使用 Figma 设计，寻找一套适合你需求的设计系统，那么这个专门为 Figma 整理设计系统的网站就可以发挥作用了！网站搜集了绝大多数支持 Figma 的设计系统，并且给每个设计系统打上了属性标签，支持的平台和编程语言、是否支持深色模式等，你可以借此快速筛选出符合你当前项目的设计系统。6、超全面的 UX 用户流程和界面库https://uxarchive.com/和其他的 UI 界面库有所不同，UX Archive 是一个面对用户体验设计的素材库，虽然它主要的采集来源仅仅只是 181 个 APP，但是它所采集的界面是围绕着用户交互流程来进行的，11万个界面组成了总计1195 个用户流程，所采集的流程比起单独的 UI 界面更值得参考，如果你是 UI/UX 设计师，应该会更需要这样的参考。7 、给插画师的人物姿态绘制 APPhttps://galshir.com/pose/如果你是一个需要经常绘制角色和人物场景的插画师，那么这个付费 APP 可能能够帮你省去大量的前期工作。这个APP 预设了大量的角色动作，并且能够针对角色细节进行调整，并且能够调整角度，方便你后续的绘制。POSE 目前正在半价打折，虽然总体不便宜，但是对于有需求的同学而言，这个投入应该是值得的。本篇来源：优设网原文地址：https://www.uisdc.com/2023-1-design-resources-vol2
产品 组件 系统 前言本文总结了在工作过程中可能面临的疑惑与问题，并结合自身经历输出相关设计经验，希望能够帮助新人设计师快速上手 B 端设计。首先，作为一名新人，在接触 B 端设计的时候应该怎么样才能快速上手呢。我们可以从：了解 B 端的基础知识、了解组件的用法、体验优秀产品这三个方面去快速了解 B 端设计知识。一、了解 B 端基础知识1. 什么是 B 端产品B 端产品的使用对象是企业，组织；目的是帮助企业，组织解决某一类经营管理相关的问题，进而帮助企业提高收入，提升效率，降低成本，控制风险。B 端产品更讲究严谨的流程设计、贴近现实的场景面积、低风险、高效率、数据精准；B 端产品的用户无法决定自己使用的软件，决策权在为软件付费的人手中（例如：公司高层，老板等等）。2. B 端产品的价值B 端产品的价值在于：集中管理（举个例子：公司通过要求销售人员将客户信息录入后台系统，避免因为销售人员的离职导致客户的流失），降本增效（可以规范化，集中化管理销售人员的行为）3. B 端产品的分类我们常见的产品有：SaaS，PasS，IaaS，SCRM，ERP，OA 等等，但我们可以根据产品针对的服务对象去进行分类，我们可以分为四个方向：专业领域产品，行业解决方案，办公协同系统，运营管理平台专业领域产品：是针对企业的某类工作场景所使用的 B 端产品，常说的 SCRM（销售自动化平台）、ERP、HRM（人力资源管理）都是专业领域产品的范畴。一家公司可以拥有多个专业领域产品，例如公司拥有一个 OA 系统的同时，销售的同事还可以拥有 SCRM 系统。行业解决方案：围绕某一个行业进行的，针对行业所需要的功能进行拓展，能满足行业的使用需求即可。办公协同系统（OA 系统）：针对公司内部协同办公使用，例如我们常见的钉钉，飞书，企业微信都属于办公协同系统（OA 系统）运营管理平台：针对客户端运营活动或者具体内容展示，对推送目标人群进行管理。例如火山引擎，极光推送等等同时，我们可以根据产品交付方式进行分类，可分为：Saas，Paas，Iaas，定制化产品；引用 IBM 架构师 Barron 用披萨作为比喻来具象化这些交付方式的形式：定制化产品：服务于大型企业功能定制设计；需要什么特殊口味/形状的披萨都可以找餐厅定制。标准化产品（SaaS）：把开发、管理、部署都交给第三方，客户选择功能的权力较低；他人直接制作好完整的披萨，不需要你的参与，你只需要把他卖出去，最多在包装一下印上自己的 logo 就好。配置化产品（PaaS）：开发者只需要关心业务逻辑，不需要关注底层，客户选择功能的权力较高；除了基础设施，他人还提供披萨饼皮，你只需要把自己的配料放上然后让他去帮你烤熟即可，也就是说你只需要设计好披萨的味道（海鲜口味或者意式披萨），他人提供平台服务帮你把设计完成。基础服务产品（IaaS）：是云服务的最底层，主要提供一些基础资源，用户需要自己控制底层去完成业务逻辑；他人提供厨房炉子这些基础设施，让你来烤这些披萨。除了去了解关于 B 端的一些基础知识以外，如果想要更高效的去完成工作，设计师们通常都会去深入了解通用组件的使用方法。二、了解组件用法花时间去了解组件的使用是非常有必要的。组件作为我们设计当中的基础单位，等于说我们了解了组件的使用，就知道 B 端设计的基础原理。目前市面上已经有很多开源并且很成熟的组件，并且每一个设计系统里面都有对应的设计资源的分享、设计组件的解析、以及设计原则的确定，可以通过参考这些深入学习。1. Ant DesignAnt Design 是蚂蚁集团的设计语言，目的是为了提供完善的设计指引、最佳实践、设计资源和设计工具，来帮助设计者快速产出高质量产品原型。2. Element UIElement UI 是 一套基于 VUE2.0 的桌面端组件库，Element UI 提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。3. Arco DesignArco Design 是字节跳动出品的企业级设计系统，对于新手入门有一定的参考价值。字节跳动全新发布！ArcoDesign 设计系统正式开源https://v.youku.com/v_show/id_XNTgxNjA2OTQwNA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5~AArcoDesign 是什么？阅读文章 > 通过了解成熟的组件，我们可以比较局部的去了解 B 端设计控件的使用方式。所有的产品在控件与控件、控件与页面、页面与页面之间都会存在一定的联系，所以设计师们为了提升自己，经常会去体验市面上比较优秀的产品。三、体验优秀产品B 端和 C 端一样都可以通过临摹去了解现有的设计模式，参照市面上优秀产品做设计对于新手入门而言是快速提升的途径之一。通过临摹，你能够确定阅读的具体宽度与内容，让你对整个产品的页面布局有了初步的认知。关于临摹哪些页面，本人有一些小的建议。通用的典型页面可以临摹 Ant design pro 和 Arco design pro 里的页面作为参考进行设计；涉及到行业领域进行设计的话，可以参照一些优秀的竞品进行设计，例如运营管理平台，可以参照 神策智能运营 进行设计；更多竞品查找方法：B端设计师如何体系化了解业务？4个步骤快速搞定！前言接触 B 端设计的小伙伴会发现，很多业务具有角色多，业务场景复杂，功能链路长等特点，所以在工作中会经常遇到以下几个问题： 突然被调配到新业务，拿到一个不熟悉的业务或者新产品，不知如何开展工作？阅读文章 > 写在最后以上几种方式只是新手快速上手的小窍门，在工作中 B 端的设计也不仅仅是套组件和抄界面；移动端和电脑端的交互方式还是有所不同的，所以如果想要得到提升还是需要通过阅读相关书籍，主动了解基础的设计模式，了解业务场景、角色使用场景等等，从而优化用户操作路径，让 B 端系统的体验得到真正的提升。欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/beginners-guide
用户 权限 系统 导语不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但数据表明用户在面临授权请求时会非常谨慎地判断。那作为设计师，我们如何通过用户体验设计影响用户的 App 授权行为，以提高用户的授权可能性呢？授权相关设计细节分析：简单的微信授权登录，没想到设计细节如此惊艳！现在很多网站产品和 APP 产品都不再固执地建立自己的用户账户体系，而是使用了微信授权登录的方式来降低获取新用户的门槛，这一方式对产品方和用户来说都有很多好处，例如让注册时操作成本更低，用户也不需要记录各个平台的不同账号等等，但是这种登录方式也带来了一些隐私方面的问题。阅读文章 > 一、背景介绍相信大家都遇到过这个令人头疼的场景，当我们下载一个新的 App 并尝试使用时，扑面而来的是接二连三的授权弹窗，请求我们给 App 授予各种权限。若我们不授予权限，很多功能都无法正常使用。这是因为不论是 iOS 系统还是 Android 系统，手机系统厂商都设计了一套授权机制。手机系统厂商之所以设计授权机制，是出于两方面的考虑：一方面是为了符合隐私法规的要求，保护用户的信息及隐私。例如我国于 2021 年 11 月 1 日起正式施行的《个人信息保护法》中规定“App 不应以非正当合理的方式强迫捆绑和收集用户个人信息，如因用户不同意收集非必要个人信息或打开非必要权限，App 拒绝提供业务功能“。另一方面是出于用户体验的考量，例如 iOS10 以后的系统都会在用户使用 App 前询问用户 “是否允许使用移动数据”，这一定程度上避免了用户的数据流量被无端消耗。但是 App 想要顺利地拿到用户权限并没有那么容易。根据 2020 年国家网络安全宣传周组委会回收的 32 万份“App 安全意识保护公众调查问卷“结果显示，88.5%的受访者对于 App 申请手机权限会进行理性分析，谨慎授予权限。当 App 无法顺利地拿到用户的权限，则可能无法给用户提供优质的使用体验；用户使用体验的不佳最终会导致用户的流失。但是 App 的授权设计被很多产品开发及设计师忽略，很多 App 在用户首次使用时就连续弹出 n 个授权弹窗，这很有可能让用户在 3s 内放弃这个 App。因此如何通过用户体验设计提高用户对 app 进行授权的可能性，对于一款 App 来说，是极其重要的。不同的手机系统有不同的授权流程，本文的研究范围将集中在市场占有率最高的 iOS 系统和 Android 系统上。下文会先介绍 App 授权的基本信息，然后再介绍如何为一款 App 设计优秀的授权体验，提高用户的授权可能性。二、App 授权基本信息1. 权限列表在 iOS 系统和 Android 系统中，需要用户授予的权限是具有一定差异性的，详细的权限列表见图 1。iOS 系统将权限分为用户隐私权限和系统权限，这两类权限都需要用户授权。两者的区别体现在授权弹窗上：用户隐私权限允许 App 开发者在弹窗中添加简短的自定义提示语；而系统权限不允许 App 开发者添加自定义提示语，只能使用系统固定的提示语。常见的用户隐私权限主要包括定位服务、通讯录、日历、照片、蓝牙共享、麦克风、语音识别、相机等，而系统权限主要包括无线网络与蜂窝、通知、VPN、键盘。Android 系统将权限分为危险权限和普通权限，其中危险权限需要用户授权，而普通权限不需要用户授权。常见的危险权限包括：定位服务、通讯录、日历、麦克风、相机、存储。在 iOS 系统中经常需要用户授权的无线网络与蜂窝、通知、照片权限在 Android 系统中属于普通权限，不需要用户授权。2. 授权流程&授权弹窗那 iOS 系统和 Android 系统的这些权限都是如何让用户进行授权的呢？两个系统分别设计了一套授权流程让用户进行授权操作，用户只需要在用于授权的模态弹窗上点击一下就可以选择是否授权，这样简化了用户的授权步骤。若用户同意授权，则可以正常使用相关功能；若用户拒绝授权，则无法正常使用相关功能。下图呈现了 iOS 和 Android 系统授权弹窗的基本样式，主要包含授权标题、授权提示语、和授权操作按钮。两个系统的授权弹窗差异主要体现在授权弹窗提示语和授权弹窗弹出次数两个方面：在授权弹窗提示语方面，iOS 用户隐私权限的授权弹窗是允许 App 开发者在弹窗中添加简短的自定义提示语，但是 iOS 的系统权限授权弹窗和 Android 的授权弹窗都不可以自定义提示语。授权弹窗弹出次数与用户拒绝授权后的流程相关。iOS 系统的授权弹窗只会出现一次，若用户第一次没有同意授权，则用户只能在系统设置模块自行打开权限开关。而 Android 系统的授权弹窗只要用户未勾选“不再询问”就可以反复出现，若用户第一次没有同意授权，则下一次进入该场景时，App 依然会弹出系统授权弹窗请求用户授权。3. 预授权（pre-permission）正如上文提及的，由于 iOS 系统的授权弹窗只会出现一次，若用户第一次没有同意授权，则下次只能在系统设置界面自行打开权限开关。尽管从 iOS 8 开始，App 已经可以在界面中将用户直接引导到系统设置界面进行授权，但操作成本依然很高。此外，由于 iOS 系统的用户隐私授权弹窗只能添加简短的提示语，iOS 的系统权限的授权弹窗和 Android 的授权弹窗不可以自定义提示语，有些用户很难理解为什么需要授权。为了解决拒绝后再次授权操作成本高和用户理解成本高这两个问题，出现了预授权（pre-permission）的概念。预授权是先弹出自定义的授权界面，让用户做出选择。如果用户同意，则弹出系统授权弹窗；如果用户不同意，则不弹出系统授权弹窗。虽然对于用户来说，在体验路径上多了一个步骤，但是给用户多保留了一次通过系统授权弹窗进行授权的机会，相当于降低了用户的试错成本。关于哪些权限适合设计预授权，下文会进行分析阐述。三、App 授权设计那在了解了 App 授权基本信息后，我们该如何为一款 App 设计好的授权体验，提高用户的授权可能性呢？在这里可以运用 material design 授权模型和 CREATE 行为漏斗模型进行授权设计。1. 第一步：确定 App 在 IOS 和 Android 系统上分别需要哪些权限首先，产品经理和技术人员需要罗列出 App 在 iOS 系统和 Android 系统中哪些权限需要用户授予。在这一步要遵循的原则是：不要向用户获取非必要的权限。2. 第二步：利用 Material Design 的授权模型对权限进行分类，设定授权时机并判断是否需要预授权在明确了要向用户获取什么权限后，设计师可以利用 material design 中的授权模型对权限进行分类，设定每个权限请求的时机，并判断是否需要预授权教育。谷歌的 material design 设计规范是从两个维度考虑授权设计：权限重要性和权限明确度，基于这两个维度将授权场景分为了四类。虽然这是 Android 系统的授权模型，但同样适用于 IOS 系统。① 预先请求授权（Ask up-front）重要性高且容易理解的权限可以在用户第一次打开 App 时就请求授权，因为如果用户能轻松理解该权限的使用目的和重要性，那么预先通过系统授权弹窗上进行授权对用户而言是最快捷的授权方式。例如 iOS 的无线网络和蜂窝数据权限就属于该类别，因为用户知道若不授予权限，无法正常使用很多功能。定位权限在打车 App 中也属于该类别，因为打车前定位是用户的共识，所以打车 App 可以预先请求用户授予定位权限。但是对于有些权限而言，在用户第一次打开 App 时就请求授权是很容易被拒绝的，如：通知权限。因为用户对应用的信任感在一开始是最低的，而且在一开始缺乏使用场景，用户并不清楚权限的使用目的。② 在使用场景中请求授权（Ask in context）用户容易理解但重要程度不是非常高的权限适合在使用场景中直接向用户请求授权，如通讯录、麦克风、相机权限。因为在使用场景中请求授权时，用户对权限的使用目的有预期，同意授权的可能性更高。例如：在需要上传图片的场景中，请求用户的相册权限，用户一般都愿意授予。③ 预先教育后请求授权（Educate up-front）重要但不容易理解的权限可以在用户第一次打开 App 时，对用户进行教育后再请求授权，如：通知权限和通讯录权限，它们都属于用户敏感权限。如果通知权限和通讯录权限对一款 App 而言非常重要，建议设计师可以设计预授权页面对用户进行教育，再请求用户进行授权。④ 在使用场景中先教育再请求授权（Educate in context）重要程度不算高而且用户不容易理解的权限适合在在使用场景中先教育用户再请求，例如：非通讯软件的通知权限，因为用户开启通知权限时会顾虑有消息干扰。那需要教育的这两类权限该用什么方式教育呢？由于系统授权弹窗的自定义提示语有字数限制，所以可以使用预授权的方式进行教育。使用预授权方式进行教育的权限主要有以下特征：用户觉得可能会被打扰的权限，如：通知权限；用户觉得很涉及隐私的权限，如：通讯录权限、定位权限；若设计师希望对某些权限进行详细的说明，也开始采用预授权的方式进行教育，例如：相机、麦克风等权限。总的来说，授权时机可以分为两类：第一次打开 App 时授权、在使用场景中授权。从是否需要教育的维度来看，分为直接通过系统授权框授权、通过预授权的方式先教育再授权。但是同一个权限在不同的 App 中可能会属于不同的区间，所以设计师在分类时，需要根据 App 的功能特点具体考虑。3. 第三步：着眼于单个权限，基于 CREATE 行为漏斗模型设计预授权弹窗和系统授权弹窗那在确定了合适的授权时机和是否需要预授权之后，设计师要把注意力放在单个权限的授权弹窗设计上。想要成功地说服用户授权，那设计师应着眼于人们产生授权行为的心理动机，从用户心理出发进行设计，让设计影响用户的行为。这里可以运用到一个模型----CREATE 行为漏斗模型，用来挖掘用户同意授权的整个心路历程。① 什么是 CREATE 行为漏斗模型（CREATE Action Funnel）CREATE 行为漏斗模型是 Stephen Wendel 博士在《Designing for Behavior Change: Applying Psychology and Behavioral Economics》一书提出的概念。这个模型展示的是人们决定做出某种行为所经历的路径，从接收提醒（Cue）到第一反应（Reaction）到分析评估（Evaluation）到检查能力（Ability Check）到判断时间压力（Time Pressure），最终决定是否采取行动（Experience）。② 运用 CREATE 行为漏斗模型设计CREATE 行为漏斗模型在用户授权行为上的运用如下：Cue：屏幕上弹出授权弹窗，用户接收到授权提醒Reaction：用户会凭直觉做出反应，在瞬间决定是否授予权限Evaluation：用户会有意识地评估授予权限的利弊Ability Check：用户会评估自己是否有能力完成授权操作Time Pressure：用户会判断授权是否紧急，是该立即授权还是可以稍后授权如果我们想通过设计达到说服用户授权的目的，那我们需要减少用户在行为漏斗的每个阶段所遇到的阻碍，在每个阶段推动用户授权。下文会从预授权弹窗的设计和系统授权弹窗的设计两个方面分别阐述。预授权界面的设计阶段一：用户接收提醒（Cue）首先，在用户接收到授权提醒时，要让用户明确地感知到 App 在请求用户授权，这样才会开始后续的思考。那如何设计预授权弹窗才能让用户有强烈的感知呢？强化提示的力度，并移除容易让用户分心的元素：（1）在视觉上采用容易吸引用户注意力的色彩、字体、插图等；（2）全屏形式会比半屏或弹窗形式的提醒更明显，同时可以降低多余元素带来的信息噪音，让用户聚焦授权提醒上；用清晰的文字提示用户 App 想要请求授权。阶段二：用户做出第一反应（Reaction）当用户看见授权提醒的瞬间，直觉会告诉用户想不想授权。而用户的直觉取决于该任务是否让用户感到愉快或让用户觉得重要。设计的界面要引发用户正向的感受，让用户觉得授予权限是正确的选择。提示语要措辞清晰且语气诚恳，避免用户的习惯性拒绝。阶段三：用户分析评估（Evaluation）在用户在做出直觉判断后，会有意识地分析授权的利弊。那在该阶段，授权弹窗要让用户明白同意授权更有利。例如，若用户得知授予通讯录权限后才可以添加通讯录的朋友，他们同意授权的可能性较大。那设计如何该影响该阶段呢？通过提示语强调同意授权的好处，说明拒绝授权的后果，例如提示语中可以说明“App 要获取这个权限的目的是什么，如果拒绝授权的后果是什么”。通过提示语打消用户的顾虑。例如关于通知的预授权弹窗中可以明确说明：开启通知后不会打扰用户。提示语可以通过社会认可强化用户的信任度，例如表示很多人都同意授权。在界面上限制操作选项的数量，避免提供过多的选项干扰用户的分析。阶段四：用户检查能力（Ability Check）如果用户评估后发现同意授权更有利后，他们会想了解如何操作才能授权，要克服多少阻碍。那此时该如何设计呢？授权界面需要明确地告知用户该如何授权，例如通过清晰的提示语、插画，或播放一小段简单的动画，展示如何授权。授权界面上要降低授权操作的难度，例如将同意授权的按钮设置为默认按钮，放在用户容易触达的位置。尽量让授权操作与系统授权弹窗的操作一致，例如系统授权弹窗上的“同意”一般居右，预授权界面上也可以采用一致的按钮设计。阶段五：判断时间压力（Time Pressure）在用户明确了授权对自己有利而且自己有授权的能力后，用户会判断授权任务是否紧迫。那在设计上，我们可以利用人们的损失规避心理。通过提示语告知用户选择稍后授权需要付出更多的精力，操作会更繁琐。通过提示语告知用户立即授权的好处更多。预授权界面的设计原则总结：1. 采用全屏的设计形式会比半屏或弹窗形式的提醒更明显，降低多余元素带来的信息噪音，让用户聚焦于授权提醒2. 在视觉上采用容易吸引用户注意力的色彩、字号、插图等强化提示力度3. 请求授权的提示语文案需要清晰、语气诚恳，结构可以如下：（1）App 要获取这个权限的目的是什么；（2）拒绝授权的后果是什么，如：无法使用功能；（3）打消用户顾虑，如：请求通讯录权限时说明不会侵犯隐私，用户可以随时关闭；请求通知权限时说明我们不会打扰用户；（4）强调立即授权比稍后授权更有好处，例如：稍后授权会付出更多精力4. 降低授权操作的难度：（1）在界面上限制操作按钮的数量（2）尽量让授权操作与系统授权弹窗的操作一致，例如：将同意授权的按钮设置为默认按钮，放在用户容易触达的位置，如左右布局的右侧，或者上下布局的上方。5. 利用插画、动画、或简单文字明确告知用户授权的操作方式6. 利用插画、文字等强化用户的信任度，表示很多人都同意授权系统授权弹窗的设计IOS 和 Android 的系统授权弹窗并不允许用户进行过多的设计，只有 IOS 用户隐私权限的授权弹窗允许在弹窗中添加简短的自定义提示语，弹窗的样式并不能做太多设计。设计师能影响的主要是 CREATE 行为漏斗的分析评估阶段（Evaluation）。考虑到提示语的字数限制，系统弹窗的提示语结构可以设计为：说明授权好处或者说明拒绝授权的后果，例如：如果不授予权限，您将不能使用什么功能。涉及到有些用户比较敏感的权限（如定位权限、通讯录权限），可以在授权弹窗中说明权限的使用目的后，再添加打消用户顾虑的语句，如下图中写的“App 彻底关闭时不会收集您的位置信息”。4. 第四步: 设计授权被拒绝后的交互流程即便设计师按照上述方式进行了授权设计，提高了用户的授权可能性，但依然会出现用户拒绝授权的情况。那我们如何设计用户拒绝授权后的交互流程，以改善用户稍后授权的交互体验呢？① 预授权被拒若用户在预授权界面拒绝授权，并不会触发系统授权弹窗的流程。当用户再次进入使用场景时，可以重新出现预授权界面，让用户决定是否授权。或者在权限的相关使用场景中设计文字提醒，提示用户进行授权。② 系统授权弹窗被拒iOS 系统的系统授权弹窗被拒如果用户在 iOS 系统授权弹窗中拒绝授权，系统授权弹窗不会再次出现。但设计师可以在用户点击“拒绝授权”后设计明显的“未开启授权”的提示，提示用户若想使用相关功能就得打开该权限，并给用户提供一个设置权限的按钮。用户点击该按钮后，可以快速跳转到设置模块的授权页面，减少用户的操作步骤。未授权提示的样式可以设计为弹窗，也可以设计为全屏。若权限重要性高，那可以将提示设计为全屏，强化用户的感知。下图展示了腾讯视频的案例：当用户拒绝网络权限后，下次进入 App 时，会弹出未授权网络权限的弹窗，并在弹窗中提供了快速跳转设置权限的按钮。Android 系统的系统授权弹窗被拒由于 Android 系统的授权弹窗只要用户未勾选“不再询问”就可以反复出现，若用户第一次没有同意授权，只需要在用户拒绝授权后，弹出一个轻量级弹窗提示用户未开启授权即可。用户下一次进入该场景时，App 依然会弹出授权弹窗请求用户授权。总结总的来说，不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但是数据表明用户在面临授权请求时会非常谨慎地判断。因此，通过提高用户体验设计提高用户的 App 授权可能性是非常有必要研究的方向。虽然 iOS 系统和 Android 系统的权限列表具有差异性，授权流程和授权弹窗的设计上也有差异性。但是对于设计师而言，为 iOS 和 Android 系统的 App 设计优秀的授权体验的方式是大同小异的。设计流程总结如下：第一步：确定 App 在 iOS 系统和 Android 系统上分别需要哪些权限第二步：从整体考虑，利用 material design 中的授权模型对权限进行分类，设定授权时机，并判断是否需要预授权第三步：着眼于单个权限，基于 CREATE 行为漏斗模型设计预授权弹窗和系统授权弹窗第四步：设计授权被拒绝后的交互流程授权设计过程中所遵循的设计原则总结如下：绝对不获取没必要的权限强化授权提示从利他角度设计授权弹窗的提示语，打消用户顾虑，提高用户信任度降低授权操作的难度，包括为用户拒绝授权后的再次授权提供快速跳转欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/app-authorized-design
字段 系统 组件 选择对于 B 端系统来说究竟意味着什么？如果将下图两个组件摆在设计师面前，它们唯一的差别便是 一个有着右侧的下拉箭头、一个右侧没有下拉箭头。当听到了这种解释时，我也就只能摇摇头，一方面感觉很多设计师的基础薄弱，同时又觉得需要和咱们读者来讲讲，关于选择这一大类，对于我们设计师究竟有什么意义？首先，选择类的组件对于我们来说已经非常常见，比如简单的：单选框、复选框，难一点的：级联选择、层级选择、树形选择，这些都是我们选择类组件的一个大的范围。同样的输入也是，输入通常会包含有 输入框、网址输入、特定规则输入 等多种输入方式，这些都是我们输入类组件的一个大的范围。那先来了解一下选择和输入当中的差别。往期B端设计干货：5000字干货！超全面的B端设计指南：消息通知消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？阅读文章 > 一、生活当中 输入与选择 的差别想要理解 输入与选择 的差别，我们先来理解生活当中关于输入选择的差别。举一个生活当中的例子，图片当中的这个物体是什么？我相信大家给我的回答一定不会相同。比如：有的人可能会说是它是苹果；而有些人则会说是红苹果、红富士、大苹果 等等...也就导致虽然大家说的都是苹果相关的词汇，但是这些词语往往都会存在细微的差别。那假设同样一张图片，我们提问的方式是，图片当中的物体是下列四个选项当中的哪一个？A.香蕉 B.苹果 C.西瓜 D.火龙果这时候你会发现，得到的结果大多数都是选择的「B.苹果」而上面讲到的便是我们输入和选择的一个差异，从结果上来看我们就会发现 输入要更难一些、选择则会更加的容易。这就像我们在学生时代做的卷子，选择题往往还能动动笔，而到了填空题完全就是一头雾水。二、实际项目当中的例子这种情况，在日常的工作当中，有非常多的例子，比如在一个 CRM 系统当中，我们会有一个叫做客户类型的字段。假设最开始把它设定输入框，这时候销售将二次购买的客户录入系统当中，那不同的销售录入出来的结果完全不同。销售 A：二次客户销售 B：复购客户销售 C：老客户而数据在整个系统当中非常重要，因为我们录入数据的最终目的都是在各个地方使用数据。比如在数据分析页面、数据筛选页面，由于出现了上诉提到的混乱的结果，系统的数据无法正常使用，在管理上就会出现很多问题。假设把客户类型的字段换做是选择，那这些数据就能够正常使用，并且能够在系统当中我们就能够合理的在各个页面当中利用。三、输入与选择的定义通过上面两个例子，我们会发现输入与选择的意义是完全不同的。我们就来看看，输入与选择究竟存在什么定义上的差别。1. 录入方式上的差异输入就是提供给用户进行无规则的信息录入，也就是用户想输入什么就可以进行填写。而在输入的过程当中，通常都是通过键盘的方式进行进行的数据提交，这也就意味着输入的难度较大。选择则是系统预设好的条件提供给用户进行规则的录入，并且在组件的展示当中，都是以鼠标点击的方式来进行的信息录入，它的难度更低，但是选择在系统当中是预设好的情况，也就意味着需要提前预设。如果是一个灵活的 B 端系统，就一定需要在管理后台对于预设的系统进行配置，否则整个系统就缺乏灵活性。这就是在 飞书 的管理后台系统当中，我们需要单独的配置一些自定义的信息，其中就可以定义选择录入的选项。当然为了保证系统的灵活性，我们还会为组件去设定一些小心思，就是选择录入时，底部会有自定义选择项的功能，这就叫能够保证用户都有自己想要的选项。2. 字段属性上的差异关于两个字段，其实在字段属性上也会存在不同。首先是输入类型的字段，在整个系统当中，主要针对的是：名称、手机号、地址、邮箱 等，系统本身无法规则化的字段，这时候只能采取输入的形式。而选择字段，主要是针对的字段是：类型、属性、状态 等，用户能够快速选择的字段，两者在字段设定上存在差异，因此并不相同。四、选择与输入的作用关于作用，问大家这样一个问题，你们认为在 B 端系统当中是输入更多，还是选择更多？我想看完文章过后大家都会觉得输入的限制过多、过于麻烦，因此输入在整个 B 端系统里 录入难度高、规则复杂，只会使用在少数位置来进行使用。同样的逻辑选择则会更为高频使用。字段，其实是涉及到 前台、后台的页面信息，也就造成关于字段的影响，我们不能单纯从表单一个页面来进行看待。而表单、表格、详情页本身是一个整体，这些字段的差别，会影响到后面的页面的展示。比如在表格页面当中，会什么要采取 搜索 而非 筛选？其实这就是在表单页面当中，如果选择了输入，那在检索的时候一定是 搜索的方式。那如果是选择，那在检索的时候一定是 筛选的方式。那在其他页面呢？详情页？这个咱们就不多说了。这其实就是字段的对应关系，在整个系统当中是一个链接的整体，我们在去看待组件的时候，要关注的并不只是组件的样式，而更应该在乎的是组件背后之间的关系。如果觉得文章还不错，也别忘了点赞转发~我们下篇文章，再聊~欢迎关注作者的微信公众号： CE青年Youthce本篇来源：优设网原文地址：https://www.uisdc.com/select-field
系统 汽车 华为 近期因为工作调度，有时间去对车载 HMI 历史进行研究。文章主要从车载中控的诞生开始讲起，涉及最新的各大品牌车载 HMI 演变路线。汽车作为代步工具距今已有 130 多年的历史。目前，在视觉范围内如此关注车载 HMI 的历史也只是近十年的事情，因为在过去，人们最注重的还是汽车技术的发展。但随着以交通安全为主的自动驾驶技术的不断发展，智能设计和交互设计的重要性才逐渐显现出来。首先来科普一下 HMI （Human Machine Interface）的定义：在汽车领域的交互体验设计（Interation Disign），既然说到人机界面，我们先来看看作为交互设计的车载系统是如何演变的。进阶教程：6000字干货！四大章节掌握HMI车载设计指南（进阶篇）HMI车载设计成为当今的热门行业，本文通过HMI车载交互设计基础、需求分析的要点、创新的交互形式和视觉设计四大章节，帮你掌握HMI车载设计。阅读文章 > 一、车载中控系统的演变1. 以机械按钮为主的车载系统诞生一般来讲，我们把车载中控系统分成两部分，一部分是与汽车驾驶直接相关的汽车驾驶系统，另一部分是与驾驶不直接相关的各类娱乐系统等。存在两者之间的有车载导航系统和各种与地理相关的功能系统，他们与驾驶操作本身没有关联。但汽车作为交通工具，现代人已经越来越离不开电子导航系统。这些车载系统最开始应用到汽车上时的交互载体是按键和表盘。 接下来看看它们都是如何被加入到汽车上来的。① 汽车驾驶系统1886 年，卡尔·本茨获得燃气汽车第一项专利。世界上第一台汽车，除了三个车轮和一张简易沙发外，似乎看不到任何称得上内饰的设计，那会儿对于这样一台新兴的事物来说，它能开动就已经不错了。真正的车载系统的诞生，应该从汽车界的老大哥福特 T 型车开始讲起。亨利·福特在 1908 年发明了 T 型车，还没有中控台面板的概念，仪表分布于车内外各个地方，所有的机械结构均裸露在外，甚至挡杆和手刹都被设计在车门外。除此之外，亨利·福特赢得的另一场胜利是 与乔治·B·塞尔登的专利战。从未制造过汽车的塞尔登拥有“公路发动机”的专利，所有美国汽车制造商都以此为基础向塞尔登支付专利费。福特推翻了塞尔登的专利并打开了美国汽车市场以制造廉价汽车。换句话来说，今天我们普通老百姓能开上家用汽车，是托福特老爷子的福气。② 汽车娱乐系统1910 年，爱立信创始人拉什·马格拉斯·爱立信（Lars Magnus Ericsson）驱车在瑞典街道行驶，他将车停在路边，然后，他的妻子则拿出两个长杆，分别将它们钩在电话线上。爱立信则给电话机插上手柄，然后从运营商处获得信号，在车里进行通话。这便算是最早的车载电话。时间来到 1922 年，雪佛兰与西屋公司合作，打造出了第一款搭载收音机的汽车。这在当时引起极大轰动，导致雪佛兰销量节节攀升。不过，车载收音机刚诞生的时候，也是遭受了很多的质疑，人们觉得它会影响司机的驾驶，甚至当时美国还出台了相应的法律来制约它。后来雪佛兰重新设计收音机的操作逻辑，消除了美国政府的顾虑的同时，也实现了汽车领域早期的“盲操作”。1930 年的意大利，一款名为：Iter Avto 的自动导航系统出现了，屏幕只有 5-7 寸的大小，在那个年代，没有人造卫星，甚至连电脑也还没有发明，更不会有语音提示了，它只是将纸质的路线地图，卷进一个小盒子，随着车辆的行驶自动展开。从当时的角度来看，这套导航系统相当神奇，这或许就是车载导航的雏形。直到今天，这项技术呢，仍然运用于汽车拉力赛中，只不过它换了个名字，叫“路书”。早在 1986 年，别克公司就展现出了惊人的远见。在别克 Riviera 上搭载了第一个触控中控屏，这个搭载 GCC 的系统的 3*4 英寸触控屏，不仅能调节空调温度和收音机，还能显示车辆故障诊断、剩余燃油量和里程信息。另外 80 年代盛行的车载电话也在这时被蓝牙所取代，伴随着空调系统、音响系统的完善，再加上车辆控制的功能越来越多，豪华品牌的中控台终于被各种按键排满，这样不仅看起来不够美观，使用起来也非常繁琐，甚至影响到了行车中的安全性，怎样简化中控，成为一个问题。2. 车载系统跨入有屏时代—以中控屏作为信息交互枢纽① 跨入有屏时代的关键节点2000 年之后，车载中控屏随着 GPS 和电子后视镜技术的出现，以及当时苹果和三星推出的智能手机，这一次人们对这个新技术已经做好了准备，彻底跨入有屏时代，有屏的意义是什么呢？互联网传奇人物，凯文凯利曾经预言到：汽车将成第四空间，车机将成为继电视、电脑、手机后的第四块屏。关键节点一，宝马为 2001 款宝马 7 系引入 iDrive 系统，其（非触摸式）中央显示屏的位置较高，紧邻仪表板，通过一个可以四向控制的主按键与几个快捷键，将 700 多项功能整合其中，大大的简化了中控台实体按键。随后各豪华品牌竞相推出类似的系统，随后实体按键与屏幕的组合占据了中控台的主要位置。关键节点二，2012 年，特斯拉 Model S 的 17 寸中控竖屏横空出世，正如乔布斯当年推出 iPhone4 般惊艳，这可是在那些传统车型上从来没见过的新鲜玩意儿，它的出现让实体按键全部失去意义，标志着汽车内饰正式迈向一个新的时代。② 车载中控屏的演变路线随着自动驾驶的发展，通过观察各个品牌动向，我们可以预见未来汽车将朝着两个不同的方向发展。一方面，汽车会依旧保留驾驶乐趣的体验，让驾驶者能够自主控制，“驾驶”将成为现代人的一种娱乐方式而得以保留；另一方面，汽车会作为一个高度智能的交通工具，为人类提供安全、高效的运输功能，人们用汽车从 A 点到 B 点，在途中可以完全沉浸在自己的世界里，做自己想做的事，这点类似于航天飞船的全自动驾驶系统。车载中控屏会根据汽车的发展方向去发展，归纳总结一下近年来座舱屏幕的演变路线，主要有四大主线和其他支线：主线一：传统派一一仪表屏和娱乐屏分列布置，均为小横屏;主线二：双联屏派一一仪表屏和娱乐屏并列布置，均为横屏;主线三：大竖屏派一一仪表屏和娱乐屏分列布置，娱乐屏是大竖屏;主线四：大电视派一一仪表屏和娱乐屏分列布置，娱乐屏是大横屏;支线一：由双联屏派衍生出的多连屏派;支线二：旋转派。传统派顾名思义，传统派就是传统的车内屏幕布局方式。也是绝大多数传统汽油汽车的屏幕布局形式，传统汽车主要卖点在于驾驶乐趣，那么车载中控大屏完全就是一个多余的设备，车载中控小屏也仅显示极少的必要信息，车载中控大屏对于提升驾驶乐趣毫无用处，从现在的各类超级跑车、小钢炮、硬派越野上，都能得到佐证。值得注意的是，类似奥迪的三块屏，下面一块屏幕其实是开关的替代，因此我个人仍然把它归为传统派。目前，仍在使用传统派布局的主流车企有：大众、丰田、本田、日产、马自达、奥迪...等双联屏派仪表屏和娱乐屏并列布置。真双连屏的创始者是 2013 年上市的上一代奔驰 S 级，并且当上一代奔驰的内饰语言得到广泛认可后，双联屏这一浪潮也对过内外车企产生了不小的影响。很多的自主品牌开始偏向于采用奔驰的双联屏设计，就像在今年上市的长安 UNI-T 不仅外观吸睛，内饰采用液晶仪表盘和中控大屏组成的双屏联动也是科技感满满。此外，小鹏 P7、奔腾 T99 运动版等自主车型也都采用了双联屏的设计。而国外车企方面，通用、宝马.....也对双联屏爱不释手。双联屏的主要优势在于两点，一是视觉冲击力强、二是有科技感但在实际使用方面，双联屏也有两个非常大的缺点。一是双联屏布局下的中控屏一般都是 14：1 的比例，很扁，这就导致在导航界面下能够显示的前方路线非常有限。二是双联屏的中控屏位置其实是比较高比较深的，这就导致驾驶员在触摸操作时手的触及性并不好，经常需要向前移动身体，对驾驶安全有一定的影响。而奔驰在使用双联屏的时候，其实中控屏是不能触摸的，都是依靠方向盘开关，或者下中控区域的触控面板来控制中控屏的内容。所以说这方面，虽然国内的车企在智能座舱方面的整体实力都要强于海外企业，但是也暴露了部分国内车企在人机工程的 Know-how 方面有很长的一段路要走。也正是基于以上两点原因，我个人预计后续采用双联屏设计的车企可能会越来越少，目前看来，短期内可能只有宝马在坚守。大竖屏仪表屏和娱乐屏分列布置，娱乐屏是大竖屏。大竖屏的开拓者毫无疑问是 2012 年上市的特斯拉 Mode S。此后无论是造车新势力（蔚来、小鹏），还是积极拥抱变化的传统势力（沃尔沃 XC90、荣威 RX5）都不约而同的选择了大竖屏。从体验上来说，大竖屏的优势在于：面积比之前的所有类型的屏幕都大，可同时显示的内容多；导航的布局非常好；驾驶员触摸较为方便，开关进展的体验较好；因此我个人认为，正是基于上诉这些原因，奔驰才在最新一代的奔驰 S 上抛弃了双联屏而采用了大竖屏。与此同时，国内某些车型则是走了一些完全相反的道路....当然了，大竖屏也并不是完美，比如：大竖屏整体的布置位置较低，经常需要驾驶员低头；播放视频时，大竖屏的利用率较低；目前，仍然在坚持使用大竖屏的代表车企是蔚来，其新一代 NT2.0 平台仍然在使用与旧版 NT2.0 平台相同的屏幕布局。大横屏仪表屏和娱乐屏分列布置，娱乐屏是大横屏。与大竖屏一样，大横屏流派的开创者仍然是特斯拉（要不怎么说特斯拉在电动车领域的地位高呢）。在我个人看来，特斯拉从大竖屏转变为大电视的原因主要是因为其在 Modle 3 和 Modle Y 上取消了仪表盘，需要依靠大电视的左侧区域显示驾驶信息。与此同时，大电视的布局虽然是横屏，但由于其面积大，在导航界面的显示体验总体也比较好，并且播放视频的利用率很高。有人问，为什么新款 SX 并没有取消仪表屏，不再采用竖屏？答案是竖屏并不利于车载软件适配。况且新款 SX 的车载娱乐系统算力高达 10 Tops，足以游玩一些 3A 大作。既然如此，中控屏做成像电脑显示屏那样的大横屏也是情理之中——总不可能有人觉得用竖屏、窄屏、小屏或不规则屏玩游戏会感觉到舒服吧？总体来看，四条主流路线中，对于电动汽车，我个人认为大电视其实当前的最佳布局，燃油车的最佳布局则是大竖屏。多联屏在多联屏流派中，影响最大的当属是理想 One 了。一般来说，典型的多联屏是在双联屏的基础上再增加一个副驾屏，有的车型还会怎加一块开关屏，从而组成一套完整的前排座舱交互系统。增加的副驾屏可以照顾副驾驶的娱乐需求，而增加的开关屏则可以解决触摸不便的问题。但是双联屏遗留的对地图界面不友好的问题仍然没有能够解决，此外，多联屏最大的缺点就是贵。相比之下，奔驰 EQS 的多联屏则是另外一种形态，更像是把仪表、大电视和副驾驶屏做成一体，解决了副驾驶的美观问题。如果说，上一代奔驰 S 级的内饰是燃油车时代的美学巅峰，那么，EQS 自一出场就拥有这种底气，相信 EQS 的内饰也将成为大学汽车设计专业课堂上的模版典范。旋转派最后咱们来说说我个人眼里另类——比亚迪旋转屏在到底是横屏好用还是竖屏好用这件事上，或许不同的人会有不同的答案，但比亚迪把单选题做成了多选题。我可以转，你爱用哪种模式就用哪种模式。但是，这不代表旋转屏就是完美的。为了保证两种模式均不遮挡空调出风口，比亚迪只能把出风口布置在非常靠下的地方，导致空调吹脸效果受到很大影响。二、新科技：HUD 抬头显示器1. HUD 的诞生：从航空领域到汽车行业HUD（Heads Up Display）抬头显示系统，作为一种综合电子显示设备，可以将车辆的信息，如车速、油耗、发动机转速、导航等，投影到前挡风玻璃上或其他显示介质上，供驾驶者查看，从而减少驾驶者因低头或视线转移而带来的安全隐患。HUD 起源于航空领域, 1988 年通用汽车首次将 HUD 应用在汽车领域。2003 年，宝马成为欧洲车企中第一家配备 HUD 的公司，此后多家整车厂，如奔驰、奥迪、丰田、本田等，也开始推出装配 HUD 的车型。随着 2020 年奔驰新 S 级推出业界首款量产 AR-HUD（增强现实型抬头显示系统），整个 HUD 市场再次按下加速键。2. HUD 的发展现状：W-HUD 为市场主流，AR-HUD 初露锋芒车载 HUD 经历三代升级，成像质量不断优化，信息量持续增加，科技感大幅增强。目前市场上 W-HUD 为主流，AR-HUD 加速落地量产。第一代为 C-HUD（Combiner HUD），组合式抬头显示系统。C-HUD 采用半透明树脂板作为显示介质，具有安装便利的优点，但是成像区域小、显示信息少，由于 C-HUD 是以配件的形式加装在车辆上，在发生事故时容易对驾驶员造成二次伤害。第二代 W-HUD（Windshield HUD）风挡式抬头显示系统，是目前应用最广泛的 HUD，已经实现量产。W-HUD 利用光学反射将行车信息投射到汽车前挡风玻璃上。W-HUD 较 C-HUD 显示范围更大、投影距离更远。第三代 AR-HUD（Augmented Reality HUD）增强现实抬头显示系统，是一种全新的抬头显示技术，和传统的 W-HUD 相比，AR-HUD 投影范围大、信息量多，可以更好地结合 ADAS 采集到的数据，进行场景融合，通过数字图像与真实场景的叠加，增强 HUD 的实用性和科技感。接触过 AR 成像技术的读者可能知道，目前行业主流的 AR 成像技术普遍存在重影眩晕、画面较小、强光倒灌难以看清的小问题，市面上做的比较好的 AR-HUD 是是奔驰和华为。虽说市面上的 AR-HUD 仍显鸡肋，但随着以交通安全为目的自动驾驶得以普及，HUD 就会变得更加可有可无。毕竟如果不用依靠表面上的显示信息，在无需花费全部的注意力的情况下，系统就能在无形之中助力驾驶，对驾驶人来说是更理想的选项。三、汽车大脑：车载操作系统在汽车智能化时代，汽车的动力、内饰与机械性能不再是评估汽车好坏的核心标准，取而代之的是汽车大脑车载操作系统。根据佐思汽研公布的报告，广义上的汽车操作系统分为四类，分别是手机映射系统、ROM 型汽车操作系统、定制型汽车操作系统以及基础汽车操作系统。1. 手机映射系统——Android Auto、CarPlay很容易理解，就是打开手机，通过有线、无线连接车载大屏，将手机中的地图、音乐、社交、语音软件投射到汽车大屏中，可以满足用户多样化需求。车主们常用的 CarPlay、Carlife、Hicar 都属于这一类。在目前已知的车载系统中，手机映射普及率相对较高，只要有汽车大屏与无线功能的汽车，几乎都可以使用手机映射系统。2. ROM 型汽车操作系统——小鹏与蔚来以及宝马、奔驰等通常情况下，像在手机操作系统中的小米 MIUI 一样，在基础操作系统的平台上定制 UI 与个性化功能。造车新势力中的小鹏与蔚来，以及宝马、奔驰等国际品牌，纷纷选择该思路。汽车底层操作系统主要有 QNX、Linux、安卓以及阿里巴巴旗下的 AliOS。这些操作系统包含系统内核、底层驱动等底层组件，等同于手机操作系统中的 iOS、安卓。3. 深度定制车载操作系统——小度车载 OS如今，不少汽车系统还可以深度定制，修改系统内核、实现座舱系统以及自动驾驶平台等。小度车载 OS 就属于深度定制车载操作系统。手机除了屏幕就没有更多显示终端，可汽车不一样，有电池组、发动机、车窗、车门、方向盘等诸多组件，所以需要深度定制。4. 国产车载系统，群雄纷起从基础功能上来看，汽车操作系统其实只有三类，分别是基础系统、定制系统与深度定制系统。在这三大类别中，有许多国产操作系统存在。它们仿效鸿蒙系统，试图在车载系统中打出一片天。① AliOS十年前，中国三大互联网公司百度、阿里巴巴、腾讯作为这波汽车操作系统国产化浪潮中的领头羊，其中最早开始研究的当属阿里巴巴，AliOS 的历史最早可追溯到 2011 年。那时候，鸿蒙系统尚未诞生，苹果 iOS 系统、安卓系统与 Windows Phone 在手机操作系统领域三分天下。阿里巴巴抱着打破垄断的念头，毅然进入该领域，推出 YunOS 操作系统。只可惜由于系统使用人数过低，以及与安卓系统的抄袭纠纷，最终被迫放弃开发。一个失败的手机操作系统，该如何处理研发团队？阿里巴巴想到的法子是转型，向整个物联网领域扩展，把汽车视作了一个重要的物联网切入点。于是在 2016 年，阿里巴巴与上汽集团合作成立了新公司斑马智行，而 YunOS 也摇身一变改名 AliOS，开始在汽车操作系统中大展拳脚。② 小度车载 OS与 AliOS 离奇的身世相比，百度旗下的小度车载 OS 诞生历程相对简单。从五六年前开始，百度就不满足于搜索业务，全力进军 AI 相关产业，而智能汽车正是 AI 重要的落地场景。百度 Apollo 是向汽车行业及自动驾驶领域的合作伙伴提供的软件平台。小度车载 OS，就是智能车联开放平台（Apollo ）的外在形式。囊括了几百家生态合作伙伴，支持上千个车载小程序，智能语音助手连接万物，百度的车载系统在底层系统并未做多少改变，核心在于定制化服务以及个性化交互。③ 腾讯车载小程序腾讯小程序是一套跨 OS、云端轻量化的车载应用开发框架，基于微信小程序的基础，能够让 300 万量级的微信小程序生态以更低成本、更快速地上车。简单来说，腾讯希望通过自己海量的小程序优势，通过数量优势战胜对手，在车载系统领域打造全新的超级 App。④ 华为 HiCar阿里、百度、腾讯，切入方式不同，带来的车载系统生态也各有特色。然而，它们并不是最有希望取得成功的国产车载操作系统。因为，华为也来了。华为觊觎智能汽车市场多年，一开始华为推出了手机映射系统 HiCar，HUAWEI HiCar 将移动设备和汽车连接起来，把手机的应用和服务延展到汽车，实现手机为核心的全场景体验，给消费者创造智慧出行体验。据介绍，华为 HiCar 运用了很多鸿蒙系统的设计元素，某种程度上可以理解为鸿蒙的初级形态。华为鸿蒙车机的主界面由多个卡片式小组件构成，显示的是推荐使用的应用程序与场景。至于鸿蒙系统广为传播的分布式能力，华为支持车机与智慧家庭联动。在车上轻轻一点，家中的智能家居产品也会随之运动。在原理上，华为鸿蒙车载系统基于 Linux 核心打造，属于定制型车载系统。不过，随着华为与长安和宁德时代共同打造的阿维塔推出，华为鸿蒙系统正在朝着深度定制系统迈进。接下来，拥有智能座舱、与自动驾驶系统联动的鸿蒙系统或许会给我们带来惊喜。四、6 大车载系统开源地址Android Auto：https://developers.google.com/cars/design/android-autoios Carplay：https://developer.apple.com/design/human-interface-guidelinesApollo (设计系统暂未开源)：https://developer.apollo.auto/document_cn.htmlAliOS：https://miniapp.alios.cn/index#/document腾讯车载小场景：https://cloud.tencent.com/developer/article/1377214华为车机： https://developer.huawei.com/consumer/cn/doc/distribution最后我想说，从阿里到华为，他们已经向世界证明了中国制造。当前全球汽车产业目前已进入产品价值被重新定义的全新阶段，各种类型的车载系统方案暂时也无法评估优劣。但随着自动驾驶技术的不断发展，以人为本的用户体验成为决定产品成败的关键因素，如何让消费者感受到与众不同的体验成为产品开发工作中的重中之重。车载设计万字干货！从零开始帮你学会 HMI 可用性测试前言这篇文章针对车载行业的可用性测试，我们做一下深入探讨，前面几篇跟下来的读者也都知道我写作的节奏，前面会深入讲解该主题的基础内容，并结合一些我工作中实际案例给予大家去了解，后半部分以实践案例为主，将前面基础知识融入进来，结合案例进行剖析可用性测试，这次文章大纲分为三大内容：可用性基础阅读文章 > 车载设计万字干货！帮你掌握 HMI 设计的知识体系这是我第一篇HMI系列的文章，对于车载的热爱，我的想法就是多去分享一些行业知识，接下来让我们一起追光吧 ～拓展阅读：阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/hmi-design-history
苹果 系统 功能 前言：本次文章核心内容是放在这次升级 Carplay 车载系统的讲解，并回顾一下老版本系统的升级内容，以及从我的角度去说一下体验方面的感受，还有对未来 Carplay 系统的一些想法建议。更多车载设计干货：6000字干货！四大章节掌握HMI车载设计指南（进阶篇）HMI车载设计成为当今的热门行业，本文通过HMI车载交互设计基础、需求分析的要点、创新的交互形式和视觉设计四大章节，帮你掌握HMI车载设计。阅读文章 > 一、苹果 Carpaly 车载系统发展史先简单的介绍一下苹果 Carplay 的发展过程，2013 年苹果正式宣布 iOS in the Car 计划，就是想在车内装载 iOS 车载系统。2014 将“iOS in the Car”更名为现在的系统名称“Apple Carplay”，同年在日内瓦汽车展上，苹果和合作伙伴一起将搭载 Carplay 新车型亮相，之后就开始陆续和多家知名车企进行合作。在 2016 年的 WWDC 开发者大会上发布了 CarPlay 车载系统，成为了苹果内置地图和 siri 的搭档。2018 年开发者大会上宣布支持第三方的导航，有国内的百度、高德，国外的 Waze、Google Maps。最后再到今年在美国当地时间 6 月 6 号，苹果举办了 2022 年 WWDC 发布会，中间有三分多钟的时间，全部留给了新版的 Carplay 车载系统，这次升级的内容比较多。但让人遗憾的是在 WWDC 发布会的现场还是没有见到苹果汽车 iCar 的身影。二、同类型的产品介绍苹果 Carpaly 车载系统是属于第三方的系统，是装载各大主机车厂的车内系统。同为此类产品的还有谷歌车载系统的“Android Automotive OS”简称：AAOS 和 “Android Auto”，国内的话就是百度“CarLife”。目前市场上比较火的就是这几家企业。最后加入进来的博世也推出的mySPIN车机系统，1. 谷歌车载系统“Android Auto”or“AAOS”区别大家肯定分不清这两到底有什么区别呢？这一块内容不属于设计师工作范畴，因为他们车载系统设计是相同的，只是编译代码之间的区别。先简单通俗给大家区分一下，一个是通过手机投屏到汽车中控屏幕中，另外一个是直接植入车载的原生系统，AAOS 可以根据车厂的需求定制化设计。首先“Android Auto”不是 OS，他是集成在 Android OS 里的功能，是通过 USB、WI-FI 将安卓手机连接到 Android Auto 的车机上后，Android Auto 可以自动加载支持 Auto 模式下的 app 图像投屏到车机屏幕上。这个和苹果 carplay 实质上是一样投屏模式。而“AAOS”归属于 AOSP 项目，代码也是在“Android OS”当中，在编译的时候选择 automotive 的编译 target 即可生成车载机使用的 AAOS。这个车载系统可以在 Google 应用商店里下载 Android app。用户可以直接在中控台上安装为汽车优化的版本，这样就可以替代手机上的 app。2. 国内第三方“CarLife”国内比较火的第三方车载应用有百度的“CarLife”，CarLife 车载系统是国内首个跨平台车联网解决方案。百度的 CarLife 是第一个实现同时支持苹果和安卓手机的技术。同样是车机互联方案，CarLife 和 Carplay 最大的区别就是 CarLife 只是手机系统上运行的一个 app 程序，无法做到系统级别的权限，所以稍微繁琐的连接操作、不通手机的兼容性不一样，这些都让 CarLife 的用户体验和 Carplay 相差巨大。三、苹果 Carplay 市场规模在苹果 2022 年 WWDC 发布会中苹果汽车体验工程的高级经理 Emily Schubert 公布了一组很有冲击力的数据“98%”and“79%”，在美国本土有 98%的汽车支持苹果的 Carplay 系统。更加令人瞠目结舌的是下一组数据：经过调研全美有超过“79%”的购车用户只会购买带有苹果“Carplay”系统的车。从侧面我们可以看出，如果汽车厂商拒绝了 Carplay 的话，那后果就是可能会损失近 8 成的汽车购买消费人群。对于我们国内苹果手机市场差不多有 25%的份额，所以能用上 Carplay 功能的车主在一款车型中最多也就是 1/4，我们国内车载系统对比于欧美的话还是更符合我们国内市场的，并且在智能化和技术上都是领先于他们的，所以 Carplay 系统在国内份额估计不会很高。四、回顾 Carlpay 升级迭代让我们回顾一下苹果 Carplay 车机系统升级迭代的过程吧。1. iOS12 支持第三方地图软件在一开始 Carplay 系统导航只支持苹果原生自带的地图，相比其他第三方导航软件，苹果自带导航的体验欠缺。在 iOS12 后，变化最明显的就是可以支持第三方导航软件了，我们国内的高德、百度地图都可以介入进来了，从而提高了用户体验度。2. iOS13 分屏显示在 iOS12Carplay 车机系统中，车机界面和手机界面是会同步显示 app 界面的，比如车机系统正在运行地图导航，如果我想听音乐，就要在手机中打开音乐软件，但是 Carplay 车载屏幕就会切换成 app 显示的音乐内容，就不会在显示导航了。所以在 iOS13 中，Carplay 就解决掉了强制切换的问题，iOS13Carplay 新系统就可以将在导航的基础上，打开音乐软件 app，导航页面不会再消失掉，可以同时存在，这样的话大大的增加了车载系统的灵活性。iOS13 更新分支还有车载的仪表盘，新增的 Carpaly 车载仪表盘，在页面当中显示导航、音乐、电台和日历，这样可以直接浏览地图，但是在 iOS13 的时候左侧导航的卡片只能支持苹果原生的地图，无法支持第三方地图软件。新增的日历应用，这个是这次唯一的一个全新应用，从车机的 UI 和功能上来看，Carpaly 的日历更像一个简易版，因为这里只能提供即将需要处理的事务，没办法查看以前的事情或者是新建一个事件，所以是一个简易版的日历应用，你点击一个事件后可以查看这个事件的详情信息内容，有开始和结束的时间，如果设有地点的话，也会显示地理位置信息，并且点击之后可以直接跳转到地图当中，直接导航到目的地。在后续 iOS13.4OTA 迭代当中，对于 Carplay 最受欢迎的改进就是分屏功能开放给了第三方导航软件地图。后续的更新就是屏幕可以显示第三方地图应用，实时查看地图导航信息并且还可以和音乐同屏展出，用户可以边听音乐边查看导航内容，解决了用户双重需求并进的问题。3. iOS14 车钥匙+换壁纸+绑定车牌功能苹果手机和汽车之间连接又更近了一步，升级 iOS14 后，我们可以通过 iPhone 完全的替代我们车钥匙，通过苹果手机解锁车门，还可以启动自己的车辆，不过只支持当时发布的宝马 5 系的一款车型，所以你要不要考虑换一辆汽车呢？最早使用过 Carplay 车载系统的人肯定都吐槽过他的背景，要么是白色要么就是黑色，虽然车载的 UI 还是不错的，但总是用这种单色的壁纸，长时间肯定会引起我们视觉疲劳，所以在 iOS 版本上，Carplay 做出一个决定，新增 5 张原生的壁纸，但是还是不能自定义壁纸。这次更新最后一个内容就是，可以支持绑定车牌了，手机端输入车牌和动力类别，设置完成之后，地图就可以为你规避一些禁行、限行路段。还有专门为电车车主提供专属的规划路线，帮助电车的车主更好的选择较多充电桩的路线，但是这个功能当时还没上线。4. iOS15 增加自带壁纸、增加驾驶专注模式、苹果地图模式切换在这次更新之后，在设置中壁纸这个模块大幅增加，现在一共有 11 种壁纸可以选择。但依旧是只能使用原生自带的壁纸，并不可以支持自定义壁纸。这个更新最重要的功能点就是驾驶专注模式，我们在设置中找到“驾驶”专注模式，并把它打开后，这样可以限制在驾驶过程中收到的通知，仅允许个人收藏中的来电，这个功能大大的提高了用户安全驾驶，给这个功能点个赞。关于驾驶专注模式可在手机里设置，设置选择允许通知的联系人的电话，选择自动回复的对象以及回复的内容。Siri 可以播报你的消息。此功能还可与 AirPods 配合使用，Siri 可以在其中通过 AirPods 耳机阅读文本消息。驾驶员不再需要一边驾驶，一边看手机。最后一个更新内容就是苹果地图，苹果自带的地图也随着 iOS 更新一直迭代，在 iOS15 中苹果地图可以切换 3D 和 2D 模式。从以往的更新内容来看，Carplay 系统在不断的优化，我们也相信苹果的车载系统会越来越开放，也越来越好用便捷。五、Carplay 系统升级内容1. 为所有屏幕提供内容，统一体验用一句通俗易懂的话来讲就是“从单一走向整体”。原先只能支持中控屏幕投屏，但是其车内设施控制都无法支持，所以体验还是比较单一的。而这次 Carplay 的更新最直观的变化就是，从原先一个应用变成一个车机的完整的系统，从而掌握了整体的车机界面设计和体验权利，带来的好处就是可以更好的完善整套车机的用户体验，这次车机整体升级而言，给用户带来了在交互界面设计、个性化定制显示、功能体验这三方面提升。从屏幕上看差异化，之前只有手机投屏中控屏幕，而现在 carplay 可以支持车内所有屏幕了，从单屏幕升级到三连屏＋中控屏幕。我们从图标到小组件再到整个车机界面来看，Carplay 车机设计风格还是继续延续 iOS 极简扁平化。2. 从“单一功能”到“多功能”发展UI 界面设计的功能终究只是表现层，但这次全新 Carplay 从原先中控转变成可以控制空调、收音机等，提高了与整车硬件更深度整合，原先调节空调需要先关闭 Carplay，在原有的车控中调节温度，但新的 CarPlay 界面可依直接调节空调等车辆功能，并且还取代了原有汽车的仪表屏，形成了一个三连长屏。我觉得现在的智能汽车不仅仅就这些功能，比如还有辅助驾驶、不同场景切换模式、智能座舱等等，因为获取汽车权限这个问题可能会制约和车企的一个合作。苹果公司的眼光肯定是致力于长远的打算，所以苹果做车载系统的同时，也在制造属于自己的汽车。3. iPhone 小组件加入，丰富车载系统新版本的 Carplay 车载系统继承了 iOS 手机系统的小组件功能，将丰富的小组件，可以在各个屏幕上展示，有两大优点：丰富的信息+高度自定义。虽然现在车机的仪表都可以通过方向盘进行切换信息卡片内容，但是可以完全自定义，根据自己需要进行编辑，这个功能点还是对于科技爱好者们，蛮有吸引力的。iPhone 中的小组件可以显示在仪表盘或者是中控屏幕上，目前新版 Carplay 支持的小组件有天气、车辆信息、日程、时间、音乐和家庭等......4. 替换原有车辆仪表盘，多样化仪表设计全新的 Carplay 将支持仪表的显示，仪表盘内可以显示车速（km/h）、最高转速（rpm）、油位、温度等信息，仪表盘的 UI 风格还可以定制化，根据自己的喜好设置成不同 UI 主题风格、背景和布局内容，也可以直接在仪表盘上查看天气、音乐、电话、导航、车辆信息等。总结一下苹果发布会上的 Carplay 看上去虽然视觉上还是蛮不错的，因为苹果的设计风格一直都很在线，但是车载系统的设计不仅仅止于好看，这个观点我一直都会跟大家讲到，如果苹果只是想通过视觉和功能方面来考虑做智能座舱的话，那肯定是不行的。其实我们国内很多车企有一种怪病，视觉确实很重要，但是他不能大于体验，这里不是想抨击他们，实事求实讲话。我们应该深层次的去了解用户的需求，而不是项目老大说什么就是什么。最后我们必须承认，新版的 Carplay 系统，能够实现的功能实际上和车企自主研发的车机操作系统还是有不小差距的，比如 TESLA 车机系统可以控制车辆的加速、转向、方向盘等的调整，总之在没有造出自己车辆之前就肯定会和原生车厂系统有着差距的。六、苹果造车发展进程Carplay 作为一个车载娱乐还是可以的，现在车机系统新版本加入了一些简单的车控，调节温度、查看车辆信息等等，屏幕也变多了，看起来还是非常不错的，但是我觉得这个不是苹果公司最终形态，他们肯定会进一步扩张汽车领域的地位。我想说的是 Carplay 最欠缺的，就是不能很好的于其他车企车子进行深度的整合，所以苹果急需自己造出属于自己的智能汽车，这也是我对他非常期待的。前一阵子海外媒体爆出了苹果新车的渲染图，刚爆出的时候大家都不相信自己的眼睛，完全不相信以苹果工业设计的能力是不可能做成这样子的，希望最终发布前还是修改修改吧，实在不行咱用第一稿别用这个版本。苹果在新能源车领域已经相对较晚了，如果想弯道超车已经有点困难了，但不是也没有可能的，那就需要他拿出杀手锏，让用户为他买单，而不是卖情怀。这是一位英国一家公司的设计师基于苹果公司在汽车领域申请的专利，最后绘制出了苹果汽车 3D 模型。首先是取消了 A 柱和 B 柱，而且前后挡风玻璃与车身顶部玻璃连接在了一起，被很多国内人喷的不轻，因为这个车辆一点都不安全，没有支柱的保护全玻璃设计，并且有网友提出如果如果玻璃坏了一点，是不是要整个更换？以苹果的调性估计换一块车辆的玻璃不得十几万啊，毕竟这个车都要卖到 10W 美金了。在外观而言，前脸和很多汽车都是一样，贯穿式的 LED 灯，LED 灯下面的前格栅加入了台式机电脑主机的外观设计，有点牵强了，但是在工业设计延续上做的蛮好的。车的尾部亮点不是很多，贯穿式尾灯+鸭尾设计，内饰方面一看就知道满满的科技感，要说最大的亮点就是前面这块三联屏幕。新车还采用了对开门的设计，并且前排的座椅是可以向后进行旋转的，形成一个小型的会客区，非常符合自动驾驶的初衷。这组网传设计图，并非是苹果官方发布的，也未得到苹果官方的承认，但这位设计师让我们提前看到了关于苹果汽车的可能性，我想的是苹果想颠覆传统汽车的设计不是没可能的，毕竟在设计领域里，很多都是以苹果为标杆的。文章中如有不足之处，欢迎补充交流，我们下期见。本篇来源：优设网原文地址：https://www.uisdc.com/carplay-design
超市 用户 系统 零售服务创新是经济改革与创新转型的重中之重，特别是依托于大数据、云计算、物联网、移动终端，来重构消费场景、优化市场供给、提升流通效率，以新技术、新业态、新模式，来推动传统产业生产、管理和营销模式的变革。而新零售是以互联网技术为基础、大数据为导向，将线上、线下和物流供应链结合的新型零售模式。新零售超市作为与用户互动的体验场景，服务创新并未随着技术环境的创新而改变，线上线下以及物流体验还不够完善。在此背景下，超市购物服务系统设计成为了重要的研究切入课题。相关学者认为应该将新信息技术、服务设计理念与超市相连接，并分析了在新的背景下，国内超市设施及服务存在的诸多问题，探讨了当代新信息技术、服务设计理念及用户体验带来的新机遇，提出了在当代超市服务系统创新中服务流程的系统构建、设施服务与新信息技术的整合、基于新用户价值创造的服务模式。也有相关学者认为可以以互联网技术为基础，运用先进技术手段，改造升级商品的生产、流通与销售模式，从而重塑产业结构和生态圈，打造深度融合线上、线下和物流的新型零售模式。服务设计作为一种创新体验设计方法和实践的模式，以用户生活体验为中心，通过有效地计划、组织服务中所涉及的人、物、场等相关因素，创造服务价值，为新零售驱动下超市购物服务创新的发展带来新的思路。新零售驱动下的超市及超市服务现状2016 年 10 月，阿里巴巴集团董事局主席马云在云栖大会上提出“新零售”的概念 。根据阿里研究院预测，我国电子商务交易额到 2020 年将占到全社会零售总额的 20%左右，这意味着有即时性、体验感的线下零售门店将不会被纯电商网络零售所替代。新零售由传统零售发展而来，再次激活传统实体零售，针对传统实体零售的弊病寻找出路，重构人、物、场，以实现消费者生活体验场景化。2017 年被称为新零售元年，部分线下零售企业通过自建电商平台与移动布局零售生态链等手段加快创新转型，积极开拓线上渠道，调整商业结构，创新服务方式，丰富体验业态。伴随着居民消费力、购买力的日益上升，消费主体个性化需求逐渐明显，依托技术升级，国内外零售商纷纷在新零售的风口落地，如国外典型代表亚马逊 Amazon Go，国内典型代表缤果盒子、永辉超级物种、阿里盒马鲜生等。目前超市是我国线下零售业的主要力量，但现有的超市服务流程、细节以及提供的服务还有很多不足，不够完善，与以用户生活体验为中心的服务设计理念还不够契合，与消费者日益提升的购买力和多样化需求存在一定差距。因此要通过服务设计思维来协调利益相关者、环境、物品以及整个服务系统的关系，让用户在超市能够拥有更好的服务体验。新零售驱动下的超市购物服务创新设计案例分析新零售首先把所有场景数据通过新一代的信息技术和人工智能技术进行数据化，与原有的数据进行融合打通，使得数据维度极大丰富，360地掌握用户画像。只有对用户拥有充分立体认识后，才能更加了解用户，从而使用户服务持久化。阿里巴巴集团引领的新零售，启动零售全生态布局，打通线上淘宝、天猫、1688 与线下百货、盒马鲜生的数据驱动，做到以消费者为中心。盒马鲜生作为线下进行新零售转型的典范，就是通过对消费场景的打造和与线上的融合使得线下零售得以重构，从而满足消费者日益提升的购买力和多样化的需求，提升服务效率，降低行业成本，创造更多价值。目前，市场上最具代表性的新零售超市有盒马鲜生、Amazon Go、超级物种，三者具体情况介绍见表 1。Tab.1 Typical cases of some new retail supermarket services表 1：部分新零售超市服务典型案例情况从服务设计视角分析我国超市购物系统服务设计是一个从系统性和过程性入手的全新、完整、跨学科的综合性领域。以用户需求为中心，帮助提高现有的服务并创造新的服务，令用户觉得该服务更加有用、好用、满意，而且对组织者来说也更加高效。在服务设计流程中，对于依托于服务的商业性活动来说，客户消费的过程即是产品被生产的过程，整个服务流程都需要服务的提供者和接受者共同参与，不同场景的不同设计与方法都会分别使服务提供者和接受者产生不同感受，从而直接影响服务产品系统性的设计。新零售驱动下的超市目前面临的，不仅是实现按需生产，发展柔性定制，优化消费结构的问题，还是升级消费体验以用户为中心的服务设计改良的问题，因此在这个响应零售创新转型的新契机下，运用服务设计思维与方法催生新型超市服务模式并形成零售新生态，对于未来的发展有着重要的意义。用户是服务设计的目标，也是服务设计的核心。新零售驱动下的超市用户需求进一步发生了变化，从“买到便宜的”到“买到优质的”，从买“商品”到买“服务”，从满足生活基本需求到生活中方方面面的精致化升级，因此研究用户是服务设计流程中的重要环节。以下是超市用户群体特征、需求分析：1. 目标购物者目标购物者是指具有明确的消费目的的消费者。目标购物者的特征表现为有明确的购物目标，有主见，经验丰富，理智。购物过程平稳，在购物过程中冲动购物行为较少，一般持有购物清单，按计划购物，不易引发冲动消费。他们的目标需求为希望能尽早地进入超市购买所需的商品，同时在购买完毕后能尽早地离开。2. 探索购物者探索购物者是指不仅具有明确的消费目的，而且对新鲜商品或环境具有好奇心的购物者。探索购物者的特征表现为有明确的购物目标，并且喜欢探索发现更多有趣的物品。购物过程中有适当的冲动消费。他们的目标需求为在购物目标完成的同时可以获得更多有趣的商品。3. 悠闲购物者悠闲购物者是指没有明确消费目的的消费者。悠闲购物者的特征表现为没有明确购物目标，购物时具有较强的随机性，在购物过程中常常因为偶发因素而进行消费，如广告、亲朋推荐等。在购物过程中对新鲜事物比较敏感，易引发冲动消费。他们的目标需求为闲逛，“凭着感觉走”，享受通过多方面的消费服务来获得个人满足感。用户旅程地图从超市服务全局出发，明确用户所处的目标群体，创建适合典型用户的消费场景，并对目标用户在不同的消费服务场景中的不同服务接触点的行为、态度和情绪进行分析，了解以用户为中心的需求，解读用户痛点，优化用户情绪感受，定义超市服务系统的优化方向和设计的机会点。超市服务系统用户旅程地图见图 1：图 1 超市服务系统用户旅程地图服务蓝图用户旅程地图以数据可视化的方式表述用户经历的故事，从初次接触，形成契约，再进入到一个长期合作关系，包括分析用户在购物前，购物中以及购物后的各个阶段里做什么、想什么和感受什么。然而偏向于以体验为中心的用户旅程地图，所包含的购物流程细节较少，其更多展示的是关于用户购物体验方面的信息。而服务蓝图则能通过可视化的展示形式，关注服务实施过程中的触点，偏向于以流程为中心。它包括了后台和前台的服务流程以及支撑行为，超市服务系统的服务蓝图见图 2：图 2：超市服务系统服务蓝图基于服务设计思维的新零售超市购物系统设计创新策略新零售超市购物服务系统只有融合多领域的服务系统才能有效地推动市场经济，线上、线下及物流深度融合的新零售驱动下的超市购物服务经济，从社会可持续发展角度出发，通过政府政策引导，以及社会情境、资源环境，文化因素等的影响，实现新的商业价值。为新零售驱动下的超市购物服务系统的完善与发展，提供新的服务模式思路。1. 以用户为中心的竞争态势个性化服务服务设计的重点在于提供的产品和服务体验的总和，关注人与人、人与事物、人与系统、系统与系统之间的价值与本质，而这种价值与本质就是以用户体验为中心的需求。由于日益增长的消费需求变得越来越个性化、多样化，消费场景成为新零售模式的目标，而实体零售的消费服务模式更应集购物、餐饮、娱乐等体验于一体，在一定环境中营造出消费个性化和场景化的氛围。在新零售驱动下的超市购物服务系统中，以消费者运营为核心的全域营销，通过互联网技术的运用，打通消费者的消费倾向、嗜好、品牌忠诚度及分享反馈的力度，构建商业闭环。真正实现消费方式逆向牵引生产方式，提升门店消费体验，为场景变现提供强大助力，为竞争态势下的用户提供更好的个性化服务。2. 数据技术信息的可视优化新零售是数据驱动的零售形态，数据的挖掘对产品服务信息有着良好的帮助，可以借助大数据时代的技术，提高用户超市购物的服务体验。将大数据技术应用在新零售驱动下的超市购物中，通过建立大量数据模型筛选用户消费数据信息，来进一步了解用户的个性化需求。如超市在线评价数据的收集应用，可以方便用户在购物社交方面对有效信息进行选择与判断，从而优化用户的购物体验，提升超市的购物服务价值。3. 消费需求的情感化品牌塑造服务设计的目的是更好地为人服务，而情感是人类的主旋律。消费产品的品牌形象在消费者情感与购买行为中起到连接作用，促进用户消费性行为的产生，让消费者在产品购买、消费、服务等每一个环节都能感受到品牌带来的美好体验，从而形成对品牌的信任感，因此产品品牌形象的树立，对于消费者的购物体验至关重要。消费者从接触一个品牌开始到最后消费的全过程，包含查找、对比、下单、体验与反馈几个阶段，超市应该在这些关键点全程保持与消费者的零距离接触。通过消费者购物全过程的数据，来及时互动、掌握消费者消费情绪的变化，完善与之对应的产品情感化品牌，优化消费者购物体验。4. 去中心化的消费场景重构新零售的核心是线上线下与物流相结合。伴随着互联网爆发式的发展，年轻一代的消费观在垂直领域呈现出了娱乐化、虚拟化、专业化以及碎片化的消费趋势，去中心化的消费氛围和资本助推，共同催生了各类创新的新零售模式。重构去中心化的消费场景目的是为了回归零售的本质，消费者所购买的商品将来自于各种消费场景，而不再是单一的超市门店，门店不再只是逛街的地方，更是让消费者体验到更优质服务的场所，促进消费者由商品消费向服务消费转型。构建无处不在的消费场景，丰富消费者购买商品和接受服务的渠道，为消费者提供全渠道、全天候、线上与线下无缝衔接的服务场景，促进服务升级。新零售超市服务系统优化设计实践1. 服务系统模型构建为用户带来一定的服务价值是构建服务系统的主张，服务创新则是服务系统的提供方核心竞争力的所在。以服务设计理论和服务视角下的超市系统构建创新设计策略为指导，以用户需求为中心，提升用户体验，构建新零售驱动下超市服务系统模型。新零售超市服务系统包括：超市、产品供应商、用户、用户的家、工作人员、小程序、大数据云平台和信号服务商等 8 个部分内容。新零售超市服务系统模型见图 3：图 3：新零售超市服务系统构成2. 服务实践方案用户可以通过嗨购（HIGH GO）小程序来提升购物体验，通过语音语义和 GPS（定位导航）指令，来帮助用户生成、分享购物单，提升停车服务、一站式导购、线上专属推荐和拼团等购物体验服务。产品结构图是综合展示产品信息和功能逻辑的图表，简单地说，产品结构图就是产品原型的简化表达。嗨购小程序总体功能分为拍照、发现、语音/文字输入、购物单和我的。嗨购产品结构功能见图 4：图 4：嗨购小程序结构功能图拍照包括 VR、扫码、通用、相册和翻译。用户可以通过拍照功能来识别手写的购物单，通过扫码查看相应商品的价格等信息，也可通过翻译来临时翻译进口的商品信息等，同时，还可通过 VR 功能为儿童带来水果和蔬菜故事的讲解。发现包括专属推荐（为你精选、限时特价、爆款直降和已抢）和正在拼团（新鲜水果、蔬菜豆品、肉蛋水产、乳品烘焙、零售酒水、粮油调味、熟食面点和优质冻货）两个功能。通过用户的消费数据来为用户进行精准的推送，提升用户的体验，降低信息推广的成本，提升信息有效转化率。语音/文字输入用户可以通过语音来生成购物清单，也可查询商品信息、超市停车位等，同时还可快速生成导购地图，降低目标购物者的购物时间。购物单包括购物单的生成、编辑、分享以及添加购物车。用户通过购物单的辅助，可以有效地提升购物效率。我的即个人中心，包括钱包、优惠券、收藏、会员、购物车、订单、地址、停车、服务中心和设置。用户可以通过登录来绑定个人信息，如绑定会员卡，从而更加方便快捷地辅助购物行为。HIGH GO 小程序的色彩扮演的角色仅次于其功能，不同色彩给人不同的心理感受，它能够帮助用户查看和理解小程序的内容，了解操作，影响用户的行为，色彩的选择要结合用户的使用场景。超市购物系统属于服务类，要考虑用户的心理需求，颜色相对表现活泼，不能过于太沉闷，要让用户在使用时感到愉悦。最终新零售超市服务实践配色视觉方案见图 5：图 5：新零售超市服务实践方案结语新零售驱动下的超市购物体验服务创新，为优化消费者购物的场景体验提供了理论支撑。本文从服务设计的方法和思维方式出发，对现有超市服务进行调研，并简要分析了影响用户消费体验的关键因素。虽然超市购物服务系统创新策略为超市行业的发展提供了一些思考和启示，但是由于超市服务对象具有差异化，服务的内容具有广泛性和不确定性，如用户的心理因素等对购物体验的影响，所以还需要对超市购物服务系统进行讨论研究，这也将成为新零售超市购物服务系统设计的研究重点。用58的实战案例，帮你认识一次完整的服务设计流程业务：“我们不是有线下店吗，我们想对门店装修进行一次升级。阅读文章 > 参考文献：[1] 王宝义. “新零售”的本质、成因及实践动向[J].中国流通经济,2017(7):3—11.[2] 张凌浩,倪鸣,贾丽丽.以系统创新为导向的超市服务设计策略研究[J].包装工程,2014,35(12):66—69.[3] 胡瑜杰.新零售背景下农产品流通现代化升级路径探析[J].商业经济研究,2018(11):131—133.[4] Moritz S. Service design: Practical access to an evolving field[J]. 3rd edition. Cologne, Germany: Köln International School of Design, 2005, 1—61.[5] 何人可,胡莹. 服务设计概念衍生阶段的设计模式与策略研究[J]. 设计,2015(1):40—49.[6] 赵树梅,徐晓红. “新零售”的含义、模式及发展路径[J]. 中国流通经济,2017,31(5):12—20.[7] XIN Xiang-yang.Strategic Positioning of Experience Design[C].UCAN,2017.[8] 王国胜.服务设计与创新[M]. 中国建筑工业出版社, 2015.[9] 徐鑫亮,于泽卉,孟蕊. 新媒体环境下消费者互动、品牌情感与购买行为——基于互动仪式链理论的分析[J]. 商业研究,2018(7):24—32.[10] 付心仪,刘世霞,徐迎庆. 信息可视化的发展与思考[J]. 装饰,2017(4):16-19[11] 蔡丹红,龚春杨. 互联网时代传统产业品牌融合创新的路径探究[J]. 企业管理,2016(1):116—118.[12] 商务部流通产业促进中心. 《走进零售新时代——深度解读新零售》报告[EB/OL].(2017-09-11)[2018-11-02].http://www.mofcom.gov.cn/article/shangwubangzhu/201709/20170902641772.shtml本篇来源：优设网原文地址：https://www.uisdc.com/supermarket-shopping-service-system
颜色 语义 系统 Hi，我是彩云。咱们平时在做 UI 组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。但如果我们在使用颜色上没有明确的指导原则，颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱。我们 APP 中的不一致例子接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：如何通过 Getaround 在设计和技术方面管理颜色概述这个系统的局限性，并说明我们如何改进它什么是语义颜色我们是如何实现它的，以及它带来的优势！我们之前在 Getaround 中如何管理颜色？1. 在设计方面和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件）。颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。2. 在技术方面在我们的 APP 中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多。我们在旧系统中面临的限制在使用这个系统时，团队反复面临同样的问题：如何确保从一位设计师到另一位设计师以相同的方式使用颜色？如果没有适当的指导原则，我们如何确保开发很好的还原？如果明天我们必须用全新的配色方案来改造我们的品牌，要怎么快速统一？让我们试着找出我们是如何陷入这种境地的？1）没有明确的颜色使用规范所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助2）旧品牌的设计包袱以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……）。到现在也没有真正的行动计划来迭代它们。旧驱动器品牌我们对新系统的设想在 2021 年初，我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。我们问自己“5 年后我们的 APP 会是什么样的？”。我们会回顾，Getaround 品牌是如何成为我们视觉方法中心的。以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而，为了使这一目标成为现实，我们面临着一些挑战：1）制定指导原则我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。2）颜色能通过可用性标准我们如何确保从一开始就设计出易于使用的颜色？3）易于维护并符合未来趋势我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）我们新的颜色系统：语义颜色在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）我们还测试了 APP 界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？1）什么是语义颜色？语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿”。甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……2）从基于外观的配色方案到基于语义的配色方案语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习google： https://material.io/design/color/the-color-system.html#color-theme-creationApple： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/colorShopify： https://polaris.shopify.com/design/colors#navigationAsana： https://asana.com/brand显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。3）深入研究语义颜色我们的新颜色系统由两部分组成：基础色板语义颜色基础调色板我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。基础调色板语义颜色，语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。请参阅此处的命名法和一些示例：语义颜色结构和示例这意味着来自基础调色板的颜色可以用于多种语义颜色：这就是我们根据这个新原则重新调整颜色命名的方式：我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。语义颜色的好处1）语义色彩嵌入设计原则语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中， *Accent* state 用于交互元素。2）解锁黑暗模式语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。明暗模式下的语义颜色 Primary.Background3）语义颜色高效灵活如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单。如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。4）颜色组合指南这个系统似乎很容易使用，但设计师仍然有一些问题：我什么时候可以使用正常文字颜色？我什么时候可以使用次级文本颜色？我什么时候可以使用可交互颜色？为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。我们在 figma 原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。Figma 中内置的语义色彩交互指南结果采用这种新的颜色系统产生了一些变化：1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到 Dark 模式。这也使库更轻且更易于维护。2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。总结总结下今天学到的内容：1）发现并准确描述团队在使用颜色时遇到的问题2）如何从提出设想，到以新的方式来定义颜色3）如何通过语义化颜色来使得大家更方便的使用颜色，我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理，这样团队协作才会更加高效。超详细！凤凰新闻「暗黑模式适配落地」全方位复盘凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配，本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/colors-standard
栅格 系统 尺寸 前言随着硬件技术和互联网的不断发展，市面上出现了更多的设备尺寸，这就要求我们设计的产品要适配到更多尺寸，而通过栅格系统可以跨屏幕的适配到不同的设备，极大提升设计效率。主流的企业级系统中都应用了栅格系统，但只重应用轻解释，很多时候在直接面对结论和各家不同的名词时，一时不知道如何下手。本文旨在通过查漏补缺的形式讲述 B 端产品设计过程中应用的栅格知识，并快速构建一套栅格系统应用于项目中。什么是栅格系统1. 栅格系统的由来栅格系统 “grid systems” 也称之为网格系统，是运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。因为规律高效的适配的特性，栅格系统被逐渐应用到网页设计中。2. 栅格系统的定义网页栅格系统是从平面栅格系统中发展而来，网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。合理的栅格系统可以通过调整布局网格以满足产品和各种设备尺寸的需求。栅格系统的好处1. 加强设计一致从页面美观的角度，栅格可以有效地保证设计的一致性、让页面富有节奏和韵律。2. 增加决策效率对于较大的团队，在日常工作中常常需要多个设计师协作完成，这时候就需要一套统一的标准来对设计师进行约束和高效协同，通过栅格系统不仅可以提高设计师的决策效率，亦可以规范设计质量。3. 降低解释成本和前端伙伴进行协作的过程中，我们发现通过一致的有迹可循的设计规律，比如有规律的间距和布局可以极大的提高前端伙伴的开发效率。通过栅格系统可以加强协作效率，降低解释成本。如何在 B 端产品中创建栅格1. 选择画布尺寸目前 PC 端主流的设备尺寸是 1920X1080、1366X768、1440X900、1280X720、1024X768，其中占比最大的设备尺寸为 1920X1080，但并不意味着我们要以此为设计尺寸。我们认为，如果将较大的屏幕尺寸定义为基础的设计尺寸，虽然可以在设计稿中呈现更多的内容，但向较小屏幕尺寸适配时会出现显示不完整的情况。因此我们建议以较小的屏幕尺寸为设计尺寸，同时向大尺寸进行适配。作为 B 端设计师，我们的受众相对比较固定，比如企业内部员工会统一派发笔记本；学校等事业单位也会统一采买设备。通常我们可以对内部设备进行调研，选择现有用户使用较多的设备进行设计。这样可以更加接近用户真实的使用场景。对于 SaaS 类产品而言，其用户设备比较广泛，我们也可以选择 Ant Design 推荐的设计尺寸 1440X900（近些年来随着屏幕尺寸的增加，Ant Design 也将设计尺寸改为 1440X900，同时主字号调整为 14PX ）。我们根据公司内部的调研选择了 1280X720 为基础设计尺寸，同时选择 12PX 的字体 ，最接近用户的真实使用场景。2. 确定栅格区域我们将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区。通常我们对内容区域进行栅格化。Web 端的布局通常包括上下布局、左右布局、T 字形布局。建议按照业务场景的不同灵活地选择布局形式。3. 网格设置我们发现现在主流的网格单元的尺寸为 8 PX， 如 Ant design、Zan design、Arco.design 均选择 8PX 作为最小的网格尺寸。因为目前主流的显示屏横向和竖向都可以被 8 整除，可以做到完美适配。但所有的设计都不是绝对的，我们在选择最小的栅格单元时，也可以根据业务需要选择 4PX 作为最小的网格单位。4. 栅格计算PC 端常见的栅格有 12 栅格和 24 栅格，栅格分的数量越多可以承载更复杂的内容结构，展示更详细的信息。国内较为主流的企业级设计系统 Ant Design、Element 均采用 24 栅格。12 栅格将页面分为 12 份，在流行的前端开发工具库 Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计。24 栅格将页面分为 24 份，变化更加灵活，适用于业务信息量大场景复杂的后台产品。通常我们看到的各家系统对于栅格的名词各有不同，新手往往会迷失在这些名词中，其实虽然名词略有不同，但总体表达的意义和划分原则是一致的，大可不必在这些名词中纠结，这里我们对名词作一些解释。columncolumn（小列）以 24 栅格为例就有 24 个 column，它可以随着屏幕尺寸的不同，在一定的范围内进行动态变化。guttergutter（水渠）以 24 栅格为例就有 23 个 gutter，水渠的大小我们设置为固定数值 16PX，这里需要注意 gutter 值可以根据项目需要的视觉节奏而定。栅格大小栅格大小为 24 个 column + 23 个 gutter，以 1280X720 PX 的设计尺寸为例，左侧的导航固定尺寸为 208PX，我们减去 2 个页边距 2 X( 16X2 ）PX，减去 23 个 gutter （23X16) PX，再除以 24，最后我们得到了一个 column 的宽度为 26PX。小困惑：这个时候你可能会发现这个数字除不尽，个人建议这块有两个解决方案，1. 建议这边用刚才算出来的数字取一个整数去倒推我们的唯一变量左边导航的大小。2. 栅格的目的是为了让我们的设计更加合理便于和前端合作，直接取整数个人来说是可以接受的。注意事项1. 尽量保证偶数思维尽量保证偶数思维，所有的数值保持偶数思维，可以在放大缩小时保证页面不失真。2. 字段元素的起始点必须落在 column 上字段元素必须要落在 column 上，不要将字段元素的起始点落在水渠中。这样就违背了栅格的目的。3. 可以让父级容器对齐栅格，子元素可以不落在栅格上很多时候我们发现如果一味的将元素与栅格对齐，可能会导致我们设计美观度降低。这时候我们需要把整个元素想象成为一个更大容器，运用盒子的原理，只需要把父级元素和栅格对齐即可。栅格的应用关于栅格的适配和应用是通过对栅格制定不同的响应策略，来更好的支持和适配业务场景。通常有三种适配策略：固定栅格、动态栅格和混合栅格。1. 固定栅格固定栅格就是 column 和 gutte 的大小固定，只是栅格的数量发生变化。以内容区域展示卡片为例，首先我们会根据主流屏幕尺寸和业务呈现需求，确定设置几个断点值，随着设备尺寸的变化，展示卡片数量也随之变化，但卡片的尺寸是固定不变的。固定栅格很明确的缺点是它在未到达断点的临界值时，页面会出现空白，视觉呈现上，可能会显得不协调。比较常见的应用是对于筛选模块的响应，以拼多多商户后台为例，将输入框设定为固定大小，然后设置 1612px 为断点值，当小于设备屏幕宽度小于 1612px 时则显示 3 列输入框，当屏幕宽度大于 1612px 时则显示 4 列输入框。（因为业务需求拼多多屏幕设置最小值，即小于固定尺寸出现横线滚动条，所以我们能看到拼多多的筛选模块有 3 – 4 列输入框）。拼多多固定栅格的适配展示2. 流动栅格流动栅格和固定栅格的区别是它的元素大小会发生变化。以内容区域展示卡片为例，随着设备屏幕的大小变化，展示卡片数量也随之变化，但在未到达下一个断点之前，卡片会通过百分比缩放填充屏幕。流动栅格的优势在于它可以在屏幕上填充屏幕，拥有较好的显示效果，适用于仪表盘、视频列表和以卡片形式展示的图片、文字等。以 YouTube 的展示为例，视频列数会随着屏幕尺寸的变化而变化，当未到达断点值时，视频卡片的大小会发生变化并始终填充满屏幕。YouTube 流动栅格的适配展示3. 混合栅格混合栅格就是在我们的后台产品中将左侧的导航栏固定，对左侧的全局控制区域进行固定栅格。对右侧的内容区域进行流动栅格的处理方式。总结1. 有理可依了解基础的栅格知识可以帮助我们更加规范的展开设计工作，让设计更加有理有据。2. 充分沟通栅格系统需要和前端伙伴协作，在开展新的设计工作时可以和前端伙伴进行沟通，如果是一个已有的系统，可能已经有比较成熟的栅格解决方案，就不必耗费资源去重新设置。如果是一个全新的系统，可以根据业务场景制定栅格规则，通过和前端沟通可以了解当前的技术资源情况，选择合适的解决方案。对于商业设计而言，不应该一味的追求美，也不应该一味的追求商业，应该懂得平衡两者之间的关系。在做设计执行的时候，需要思考企业利益和设计体验的关系。注意活学活用最重要的是解决实际问题，同时也要把实现成本、技术资源等考虑进去。感谢你的阅读。参考：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01https://arco.design/docs/spec/gridB端设计指南：栅格的定义和使用方法在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。阅读文章 > 欢迎关注作者微信公众号：「求职帮er」本篇来源：优设网原文地址：https://www.uisdc.com/build-b-end-grid-system
组件 产品 系统 最近互联网行业迎来很多波动，企业在裁员的同时，也带来设计趋势的变化。造成了越来越多的 C 端 UI 设计师想要来淌 B 端体验交互设计这趟浑水，出现了很多设计师在观望，想要入局？但又不知道，应该如何学习？这里推荐五个快速学习的方法，能够让你理解 B 端设计入门知识。阅读书籍虽然读书在很多时候会被嘲笑为效率低、内容过时。再加上 B 端设计，放眼望去国内真正值得阅读的书籍其实并不多。其原因主要是在国内，界面设计的传播，很大程度上是源自移动互联网的普及，也就造成了我们对于桌面端的设计理解非常欠缺。这时候不妨把视野放大，去看看国外的设计书籍。这里推荐几本较为经典的书籍，能够帮助大家快速入局。《决胜 B 端》虽然这本书主要是为产品经理写的一本书，但是里面的很多内容也同样适用于 B 端设计师。谁叫 B 端设计师就是半个产品经理呢？建议大家可以去阅读这本书的前五章，书中讲清楚了关于 B 端与 C 端的差异，同时你可以站在设计的角度，去思考他们之间存在的差异《WEB 界面设计》虽然这本书的 “年事” 已高，但是也不妨碍它里面的内容值得大家去阅读。正因为国内桌面交互设计书籍的欠缺。也就导致了我们只能够多去看一些国外书籍。当然里面的案例是非常久远的，需要小伙伴们根据书中内容，结合自身产品去思考对比。《WEB 表单设计》表单是 B 端产品当中非常重要的一个环节。如果做过比较系统的小伙伴就会知道。一个系统当中如果不包含任何的数据，他就如同人们只有外面的躯壳。而没有灵魂。大家可以想一想，你再去试用一个低端产品的时候，你根本不知道这款产品的用途究竟是什么。因此在低端系统当中，表单的设计非常重要。如果你设计好了表单，也就意味着你的系统已经非常成熟。因此他可以认真的阅读这本书。去了解表单背后设计的逻辑。他不光是简单的信息排列组合。里面会涉及到不同字段的真正的用途。上面这些书籍就不做过多的介绍，都是一些经典好书，看名字就知道它究竟是用来做什么的。组件用法在你阅读上面的基础书籍过后，便可以深入了解 B 端产品的组件设计。因为从原子设计的理论来看，B 端产品就是由原子、分子、组织、模板、页面所组成，而组件作为我们设计当中的基础单位，等于说我们了解了组件的使用，就知道 B 端设计的基础原理。在组件的设计过程当中，我们可以通过目前较为成熟的设计系统去窥探一二，这也是建议很多零基础的小伙伴需要去认真阅读的内容。这里建议初学者可以多看国内较为出名的三款设计系统：Ant Design、Element、Arco Design从设计师视角，聊聊 Ant Design 设计体系的建设Ant Design 设计体系本文的主题叫做 Invisible Design System，隐形的设计体系，主要是想和大家分享，我们对可见的设计体系背后隐形的设计规则的思考，以及如何通过设计工程化的方式，让这些复杂的规则可用而不可见。阅读文章 > 字节跳动全新发布！ArcoDesign 设计系统正式开源https://v.youku.com/v_show/id_XNTgxNjA2OTQwNA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5~AArcoDesign 是什么？阅读文章 > 并且在每一个设计系统里面都有对应的设计资源的分享、设计组件的解析、以及设计原则的确定，能够让你了解到在之后的工作当中，我们究竟需要去做哪些设计相关的事情。当然，很多人在了解设计系统时，其实是较为茫然的，你可以通过这样两种方法，去对设计系统进行简单分析：对比法：在阅读不同设计系统之间的设计组件规范时，通常你会感到非常的迷茫，比如在设计原则上，很多小伙伴不清楚多个设计系统之间的差异，当你对某一类型的规范产生疑惑时，这时候可以打开各大设计系统，去对比他们之间存在的差异，这样你的理解会更加的深刻。思考法：思考为什么他们之间会存在差异，是服务对象不同？还是产品规模差异？对于他们的差异，一定要知其所以然。不然简单的对比只是一个笑话。当然并不是了解了组件，就会知道应该如何设计，还记得我们刚才说的原子设计？我们还需要了解具体组件，如何在页面当中进行使用。组件落地当你了解完组件过后，你对整体的设计就有了初步认识，但真实的工作当中，你会发现组件只是设计当中一小部分，除了组件之外，我们还需要去理解整个组件在页面当中存在的意义，这样你才能够对组件有一个全方位的认知。建议大家可以将每一个组件进行截图，然后在真实落地的产品当中，去寻找一到两个案例。试着通过页面的分析，让你理解到在这个产品当中，组件究竟存在于哪些页面当中，它为什么要这样设计？如果让你去设计会有其他的设计结果吗？通过组件的页面分析，能够让你快速理解在真实的工作当中，这个组件究竟是如何使用，你可以考虑一下如果是你，你会怎么去做。页面临摹页面临摹，一定是设计师再熟悉不过的一种方法。通过临摹，你能够确定阅读的具体宽度与内容，让你对整个产品的页面布局有初步的认知。就像移动端设计一样，我们 B 端产品的页面布局也会存在一些固定的设计模式，通常情况下 B 端产品不要去标新立异，所以了解页面的设计模式就显得尤为重要。关于临摹哪些产品的页面，我这里也会有一定的建议，可以尝试：“Coding、飞蛾” 两款研发管理的工具产品。关于两款产品的截图，已经为大家提供了截图版本，感兴趣的小伙伴可以附件下载 “测试产品截图” 。前后台推导其实在我看来，很多 C 端转型 B 端的设计师，缺乏的是对于 B 端产品的理解。分享一个案例：大家对站酷这个网站应该非常熟悉吧？假设现在让你去设计站酷的后台文章管理系统，如果是你，你会怎么做？在对课程的授课当中，其实就会发现，很多人能够合理的运用各种各样的组件，但是在组件的选择当中，往往缺乏前后台关联的思路。因为对于一个 B 端产品来说，系统当中每一个字段信息都会有在系统当中存在的意义。而我们 B 端设计，真正目的不在于将几个信息联合、分组。如果你不明白这些信息出现的前后关系，对于系统而言，是不具备任何价值的。由此我们可以通过前台页面，尝试着分析后台产品的具体内容，这样能够帮助你进行很多联动的思考，让你的设计不会在评审时受到多方面的质疑。最后说说虽然目前网络上信息非常的多，但是很多刚入行的同学切忌好高骛远，先要了解基础的设计模式才好为后续的设计铺路，关于基础的 B 端设计，后面还会给大家带来一系列的分享，也希望小伙伴们能够利用好有限的资源去更好的学习。我是 CE 青年，一个 2B 行业 的 2 B 设计师从6个层面，帮新手快速入门B端设计系统什么是设计系统？阅读文章 > 欢迎关注作者的微信公众号：CE青年交互设计 文件名 如何下载使用 文件大小 提取码 下载来源 测试产品截图34.3MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/tob-design-getting-started
系统 原子 体系 什么是设计系统？配图取自文章《以B端产品为例，帮你深入浅出掌握「设计系统」》设计系统 = 设计价值观和原则+设计规范+场景定义+工具包设计系统是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产，是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案，能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发！为什么要构建设计系统？问题 1:随着业务的拓展，产品和项目数量不断增加，发展中期设计和交互上不一致性的问题浮出水面，需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验，以满足用户预期并向其传达统一的品牌认知。问题 2:无统一的设计规范和交互原则，没有统一的 UI 组件库和代码库，各团队设计和前端需花费大量资源陷入低质量沟通协作和重复造轮子，拖慢产品和项目设计和开发节奏。问题 3：产品项目数量 vs 产品设计师，人员配比严重不足的情况下，团队的设计师们无法从杂/乱/急的日常需求中剥离出来，影响构建产品壁垒的质量和速度。设计系统的价值产品侧：保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候，可以保证产品团队使用同一份设计规范快速完成产品原型设计。设计侧：把设计师逐渐从不必要、重复性劳动中解放出来，节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘，如果每个设计师都具备产品用研、交互、组件化等一条龙能力，才能体现 tob 产品设计师的价值，才不会被别人称作是拖拽组件的“工具人”。开发侧：形成开发资产，可以提升研发效率，降低维护成本。开发工程师无需再重复开发同一个组件，只需要去组件库里调用即可，配合业务逻辑，高效完成界面开发。做到开箱即用。测试侧：标准化的设计规范，是测试人员最喜欢看到的。1 是 1，2 是 2 的设计准则，提升了测试效率。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试人员只要测到不居右，就可以给产品提优化建议了。主流设计系统-他山之石可以攻玉！无需犹豫，直接基于现有的优秀的开源设计系统。设计系统的打造不必从 0-1 构建， 例如：Ant Design 业界优秀的开源设计系统，我们完全可以站在前人的肩膀，最终生产出符合达观品牌、业务特性的设计系统。阿里 Ant design：https://ant.design/docs/spec/introduce-cn阿里的 teambition： https://design.teambition.com/华为 devui： https://devui.design/design-cn/design-value饿了么 elemnt： https://element.eleme.io/#/zh-CN有赞： https://design.youzan.com/index.html字节跳动 Semi Design： https://semi.design/zh-CN/字节跳动 Arco Design： https://arco.design/Material Design：https://material.io/Lightning Design System： https://www.lightningdesignsystem.com/Microsoft fluent： https://www.microsoft.com/design/fluent/#/eva.design： https://eva.design/Atlassian design： https://atlassian.design/以原子理论构建设计系统1. 原子理论设计介绍首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost 提出的，他从化学元素周期表中得到启发，发现在化学世界中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。根据他的理论，设计体系主要包含 5 个层面：原子、分子、组织、模板、页面。原子理论设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个概念哦～2. 原子层(Atoms)：原子是物质的基础组成部分，是构成设计系统的最基础元素。在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、间距、阴影等。简单概述下来就五个字：色、形、质、构、质；3. 分子(Molecules)层在界面中，分子就像是一个由 UI 元素组成的相对简单的组织。如：按钮、弹窗、搜索框等。以按钮为例，它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联组合成一个分子，图标和文字互相配合传达意义，颜色定义了按钮的特性，间距为按钮定义了一个尺寸和规范。4. 组织(Organisms)层分子+原子组合成更复杂和可扩展性的模块，这个称之为组织（区块组件），如：列表操作区块、列表展示区块、表单区块、数据统计卡片区块。以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。5. 模板(Templates)层由原子+分子+组织构成的更复杂更具拓展性的模块，如：分组表单页、页面级表单、详情页、列表页、异常页、dashborad。本质就是线框图，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构，页面中的信息是占位作用，而不是页面的最终内容。6. 页面(Pages)层带业务逻辑的场景案例如：标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板；页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的带交互逻辑的「视觉稿」即为高保真原型图，将占位符替换为有代表性的真实内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。关于设计系统的常见认知误区误区 1：设计体系就是设计规范或者组件库吗？许多人认为设计系统就是单个代码库、组件库、设计规范，但实际上他们不是一个层次的东西，准确来说设计体系包含设计规范，组件库也是建立在设计体系内的，组件库是记录和共享设计模式的工具，就是设计体系工具化和表现层的部分；误区 2：设计体系的存在扼制了组织内创造力，会替代掉设计师？抛出这个问题，是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点，我个人是很难认同这个的，对 design system 的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合，需要调动整个团队的想象力和创造力，最终达到一个统一共识才有可能被实施和执行；好的设计系统可以通过流程和机制促进创造力的，而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来，当然也不能过度依赖过往的沉淀资产，把自己定位为设计系统的创造者，而不是使用的工具人，不断的创造和贡献好的解决方案被整个组织采用，就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师，反而是一个企业内部尊重设计师价值的开始！是企业对设计文化的认可！误区 3：设计系统是一劳永逸的吗？设计体系是动态的，永远是随着组织需求和用户需求而变化的，一切说自己已经完成了设计体系的建设的人都是错误的，都是将静态的设计规范曲解成了设计体系。误区 4：设计系统由少数人员生产，我们负责用就行了？正确管理机制：少数人负责管理，多数人参与贡献；避免你做、我用模式，这种生产消费模式非常内卷；避免如：我一个设计师为啥要用你的规范；这规范做的太垃圾用处不大，我才不用，用你做的规范；我苦逼做业务，你晋升拿结果的负面心态；设计系统也不是简单的靠少数的人 1-2 个月用爱发电就能完成的，设计系统是一群人，对一种做设计文化的认可，每个与之相关的人都应该是设计体系的贡献者与布道者！需要克服的潜在难题当然设计体系也容易出现一些缺点，这些问题需要设计体系的构建者们去摸索去克服；产品业务复杂性提升，提升建设难度难以控制创造与控制间的平衡复用与定制间的平衡，刻意追求复用率而容易丢失整体观，为特定业务目标服务时不如灵活集中化式方法等资源问题，容易被当成是辅助项目而缺乏预算等资源….缺乏良性有效的组件库更新迭代机制，虎头蛇尾….收益短期不明显，搭建体系的长期收益难以被组织短期内察觉；尽管有一系列潜在的问题，但总的来说设计体系带来的收益是大于这些投入的，总的来说方向是没错的，下一个关键问题是：我们如何去建立一个更优秀的设计体系。今天就跟大家分享到这了，一点拙见，设计系统的话题这个我们分三期跟大家进行交流，如有兴趣，铁子们可以加个关注B端两大设计系统哪家强？来看这篇超全面的对比！编辑导语：有效地利用 B 端设计系统，产品设计师将可以更高效地做出更好的交互设计。阅读文章 > 欢迎关注作者微信公众号：「IM UED」本篇来源：优设网原文地址：https://www.uisdc.com/b-end-design-system
图标 系统 圆角 2021 年 6 月，微软发布了全新的 Windows 11 操作系统，采用了 Fluent Design 平台设计规范，视觉风格进行了大改版，更美观、更柔和、更现代。同时，设计上加入了毛玻璃模糊的材料效果、流畅的过渡动画和小元素动画。我体验一段时间后，有几个点感到挺惊喜的：大圆角、卡片、动效。因为这几点不太像我们脑海中固化的 Windows 系统方正设计风格，倒有点 Mac 系统味道了。其中，我发现了一些 UI 设计细节和亮点，觉得在桌面端产品风格上还是有参考价值的，所以和大家分享下。图标在系统图标方面，常规图标尺寸是 16px，描边粗细是 1px，矩形外圆角是 2px，线条末端是圆角，更加亲和，符合现代年轻用户的审美。在部分场景界面，系统图标采用了双色的设计风格，打破了界面的枯燥感，视觉层次更加丰富。图标风格上，还采用了轻拟物设计风格，加入了渐变、高光、阴影设计手法，图标配色和质感可以学习下。圆角Win 11 系统采用了两种圆角尺寸：4px 和 8px。8px 圆角用于顶级容器，比如应用程序窗口、弹出窗口和对话框。4px 用于页面内元素，比如按钮、搜索框等控件。从 4 点网格和 8 点网格取值，具有一定的专业性和统一性。布局在系统界面上，Win 11 使用了不同背景色来区分层次结构，主次清晰，可以将用户的注意力集中在最重要的内容上。一般分为两个层次：基础层和内容层。基础层是应用程序的基础，可以用灰色背景，位于底层，常用于导航、菜单等相关功能。内容层是主要信息呈现区域，一般为白色背景，可以是一张大卡片或者多个连续排列的小卡片。比如系统应用程序：Microsoft Store 主界面，大卡片通到窗口右侧和底部，使用起来还是挺舒服的。比如系统应用程序：设置，多个连续的小卡片。这种布局风格简洁、新颖，体验后，我觉得可用性挺高的。下拉菜单下拉菜单是很基础通用的控件，我特地截图查看了界面标注。连续的列表之间保留 4px 间距，这点挺好的，可以避免一种场景：导航菜单栏列表同时存在 selected 态和 hover 态，避免背景色黏在一起、圆角搭配不和谐的情况。还有，反馈框上下左右的空白处间距是 4px，不包含面板描边，视觉感官间距看起来比较和谐。下拉菜单也出了一种新的交互形式。点击功能下拉后，下拉菜单直接覆盖在功能上方，点击切换蛮爽的，不过从通用性维度需要再评估下。标签栏标签栏选中态和未选中态文字都是黑色系，选中线为蓝色，选中态也挺明显的，又不会很干扰主体内容，色彩噪音不会很大。动效界面的切换过渡动画、单个元素的反馈动画，我体验下来觉得挺惊喜、挺有趣的。特别是在单个图标的动画上，有些图标加入光影渐变变化感觉挺有质感的，连下拉箭头也有动画，真细致呀。系统应用程序 Microsoft Store，左侧导航图标也加入了动画，挺顺滑的。动画很有细节，运动前有起势准备动作，利用重力原理加入了形变，还加入一些修饰元素，丰富运动效果。深色模式该系统也推出了深色模式，相信桌面端产品适配深色模式将是个趋势。设计师如果早期能够把深色模式考虑进去，后面适配将大大降低各方成本。总结以上就是我体验 Windows 11 UI 后发现的细节和亮点总结。在规范层，图标风格、圆角、界面布局、下拉菜单、标签栏的定义都挺多细节可以挖掘打磨的，设计师也需要根据自身产品调性考虑该系统规范的可用性，不能盲目跟随。在动效层，设计师发挥的空间和价值挺大的，可以多做些创意。Windows 11全新设计语言如何引领设计新趋势 ？（附源文件下载）Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/windows-11-ui-design
系统 保罗 品牌 当今很多设计公司类型都是从广告公司分拆出来的，其中包括包装设计、导视设计、活动策划、营销策划等等，本次我们要聊其中一个子类，就是品牌设计公司。品牌设计在过去只属于广告公司其中一项服务而已，一般都是发现品牌水平妨碍了广告发挥才“顺便”做一下，直到后来市场的需求逐渐增强，VI 系统被逐渐完善，这个模块才独立出来。这种增强与完善有着本质原因，就是商业竞争的不断升级。美国公共电视网的 VIS 设计过去有好产品是最重要的，因为市场总的存量不多，能快速做到广而告之大家就会蜂拥而至，后来产品不但越来越多，而且品质功能越来越不相上下，那么品牌的作用就突显出来，因为品牌的建立会带来信任背书及光环效应。广义的品牌设计不能直接跟 VI 设计画上等号，因为还有策划的部分，有战略与营销层面的考虑，而且发展到如今流派与理论繁多，中西方因地制宜，国内也各执一词，甚至相互矛盾，仍然是一个不断发展中的系统。本次跟大家探讨的品牌设计主要指视觉层面的 VI 系统，VI 的英文原文是 VisualIdentity，直接翻译是“视觉规范”的意思。美孚石油的 vi 设计这个系统放置到企业中，也有另一个称呼叫“Corporate Identity”,就是俗称的 CI，由日本国家后来拓展而来，我们后面会有所介绍，但在日常操作中其实用得比较少。VI 系统本身如果要追溯，要从 1907 年德国设计师彼得·贝伦斯（Peter Behrens）承接电器公司 AEG 的项目谈起。彼得·贝伦斯历史渊源“视觉规范”的核心其实是系统性，情况如同一位明星去登台，如果只设计了发型，服装、配饰、道具跟背景都不予考虑的话就是一个翻车现场，一个完美的表演应该是方方面面都有和谐统一的设计与部署，这就是 VI 系统的基本原理。一个产品或者一个组织拥有商标（印记、徽章）是一个难以追溯源头的事情，可以说有了族群跟商业活动之后就有了，但拥有一个系统按历史公认事实就是彼得·贝伦斯（故事详见《设计大师启示录》）为 AEG 设计的企业形象。我做了世界第一套VI：顶尖设计师彼得·贝伦斯大师列传系列：[link https://www.uisdc.com/less-is-more-mies-2][link https://www.uisdc.com/bauhaus-originator-walter-gropius][link https://www.uis阅读文章 > 贝伦斯为 AEG 设计的 VI 系统当时贝伦斯为 AEG 提供了真正的“全案设计”，从企业 logo 到视觉规范，从产品设计到厂房设计，从包装设计到广告设计，这些设计具有严谨性、统一性及识别性。贝伦斯为 AEG 设计的一系列产品如此一来极大提升了 AEG 电器的市场竞争力，因为当时没有任何一家企业有意识这样玩，AEG 公司因为形象的完善得以快速进入消费者记忆，创造难以量化的商业价值。贝伦斯为 AEG 设计的厂房可惜这样的探索很快被一战的爆发所打断，镜头一晃就去到二战之后的欧美。当时以美国为首的欧美国家经济发展迅速，诞生了不少跨国公司，折射到设计界就出现了几个方面的大变化，比如国际主义风格的出现，广告公司的发展与细分，再者就是 VI 系统的再一次发展。聊保罗兰德（Paul rand）的故事时，我们谈过他曾在 1956 年为 IBM 设计企业形象就属于发展中的一个案例。只出一稿，绝不修改：聊聊顶尖设计师保罗兰德的故事上一回我们讲到了国际主义开始在平面设计领域中称霸，这种风格以包豪斯现代主义为 DNA，然后在瑞士地区成型，最后被美国地区发扬光大继而推广到全球。阅读文章 > 保罗兰德为 IBM 设计的视觉系统本次我们继续以案例方式跟大家回顾 VI 发展的历史，在此之前，跟大家说清楚两个概念。其一是 VI 系统的应用不局限于商业组织，比如每一届的奥运有 VI 系统，城市会有 VI 系统，政府也会有 VI 系统等，但最终目的都会落在识别、记忆跟效益上。香港的城市视觉识别系统其二就是这个 “系统与规范”到底包括什么，这方面大家能在百度百科或者学院教材中找到说法，但因为史太浓本身经营品牌设计公司，所以希望从市场经验角度谈一谈。这种经验角度存在一个特点，就是未必人人同意，前面我们就谈过，品牌设计目前还是随着市场变化在发展，所以百家争鸣，比如国内知名的华与华公司就认为 logo 不需要释义，辅助图形是多余之类。VI 系统包含什么一般而言 VI 系统分两大部分，其一是基础部分，这个部分主要是 logo 图形，色彩跟字体的使用规范。远麦刘斌品牌设计案例设计好的 logo 图形不能变是最基本的（动态 logo 除外，这是另一个话题），其次就是最小应用尺寸规范、logo 元素的组合规范，比如图形跟公司名称的组合，图形与 slogan 的组合，这些都是需要设计好并固定下来。以往 logo 标准制图在数码时代其实有点多余了，那种设置是为手工制作标志实物而考虑，但看如今很多公司都保留其实有点可笑。远麦刘斌品牌设计案例颜色规范主要是主色跟辅助色的运用，色彩的主次管理非常关键，所以一般而言都会落实在 VI 手册上，标注具体色彩数值，跟 logo 组合的背景色深浅比例等，不能随意改变。字体规范是指企业往后物料使用的标准字体，如果公司比较豪横会专门开发设计一款字体自己用，比如淘宝，但大部分其实都会购买一款合适字体或者直接使用免费字体。基于以上三个规范，VI 设计师会为企业设计好基本应用物料，比如名片、PPT 模板、工作服、基本办公室导视、信封、杯子一类，这些物件都是各应所需，并非一定要，所以有企业良心的设计公司都会进行具体了解，而不是为了多收费一股脑的为客户设计。远麦刘斌品牌设计案例基础部分大致如此，有时候企业会需要设计辅助图形跟吉祥物（IP），主要目的是丰富形象视觉元素，其中有利有弊，比如增加宣传成本，这方面篇幅有限就不展开了，我们谈第二大的部分，就是应用。远麦刘斌品牌设计案例-吉祥物VI 的应用部分主要是广告营销、展览、包装等模块的设计规范，大家注意“规范”这个词，意思是针对具体物料做一个规范出来，日后相同物料或者类似物料按此规范设计。远麦刘斌品牌设计案例-画册这也是很多客户会误会的地方，比如画册规范，客户误以为是将画册设计完，其实主要是画册版式与品牌视觉元素的结合应用。而且不同行业的差异很大，比如房地产跟餐饮就很不一样，餐饮没有楼书，而房地产没有菜单等，要具体问题具体分析。远麦刘斌品牌设计案例-餐饮行业比较通用的一般有画册、网站、海报、工业包装等，但按我们的实践经验看来，这些部分逐渐变得鸡肋，就是这些规范最后放置到 VI 手册后因为各种因素能严格执行的非常少，或者完全按规范设计出来的效果非常不理想。所以这部分物料一般而言应该直接做应用层面设计，史太浓也一直有个观点，就是 VI 手册其实是给美工去看为主的，比如一些物料制作商，真正掌握了设计系统的人心中有乾坤，手中有度量，都是根据实际市场目的进行发挥。远麦刘斌品牌设计案例-空间应用从历史故事中也能发现，VI 做得特别成功的公司往往都有一位长期合作的设计师或者一间长期合作的公司。IBM 是个例子，长期跟保罗合作，其次还有意大利的奥里维蒂打字机公司（Olivetti Corporation）。平托里为奥里维蒂设计的视觉系统其品牌主创设计师奥瓦尼·平托里（GiovanniPintori）为公司服务了长达 31 年，这个公司出色的 VI 系统设计也写进了历史。“动态”VI接下来我们谈一个比较特别的案例，就是美国哥伦比亚广播公司（the Columbia Broadcasting System）在 1951 年设计的 VI 系统，该公司我们后面简称 CBS。CBS 的 logo 设计操刀 CBS 公司 VI 系统的设计师名为威廉·戈登（William Golden），在公司工作了 20 年之久，后来是因为急病突然去世，年仅 48 岁，当时已经做到 CBS 创意总监。威廉为 CBS 设计的标志是一个完全扁平化的简约眼睛，眼珠子处放置公司名字，前面谈及的图形、颜色、字体相关基础规范都有，但有一点很特别，就是这个 logo 图形的背景可以随意改变。CBS 创意总监威廉·戈登[/caption]比如最初的设计是将眼睛放置于一个圆框中，背景是真实的天空摄影图像，有种超现实主义风格的气质，创意点是基于电视广播的信号传播光波是分布在大自然中的。这样的设计获得 CBS 高层的肯定，在大众传播层面也容易理解，所以受到普遍的欢迎。但是 CBS 当时的总裁佛兰克·斯坦顿（Frank Stanton）提出了一个更高的诉求，就是作为广播电视企业当时的领头羊，CBS 的形象应该是进取与发展的，所以是否有更加创新的表现手法。CBS 总裁佛兰克·斯坦顿于是大家经过一番头脑风暴，戈登提出 logo 背景可以改变这样的方案，除了常用印刷品上的 logo 是固定平面之外，在不同主题场合或者节日可以改变 logo 的背景。于是标志中的眼睛是核心要素，而视觉变化则是不断与持续的，达到统一与变化的效果。CBS 可变化背景的 logo如此一来 CBS 作为企业形象不但让人感觉新颖而且很灵活，关键是这样的手法跟电视广播行业很贴切，电视就是动感的媒体，所以 VI 形象的动态变化设计可谓神来之笔，此案例得以载入史册。我们也从中得出一个好设计的基本公式，就是：优秀设计师+有要求的甲方。如今这样的手法仍然有品牌效仿，比如德国宝马汽车。宝马在 2020 年 3 月正式启用新 logo，将过去金属质感的黑白蓝 logo 改为白蓝镂空的形式，更加简约与扁平，而且经常运用在动态变化的动画背景中，我们在宝马的官网与公众号均可看到示例。宝马新 logo 背景可以是动画官方给出的说法是显得更加纯净与开放，确实也更加呼应新能源电动汽车这样的变革。所以很多如今看来新式的设计其实都可以从历史中找到一些对照。日本人的精耕细作VI 系统的发展高峰集中于 20 世纪 50-60 年代，忽如一夜春风来，千树万树梨花开，各种大小型企业都纷纷着手建立自己的品牌形象。我们多次谈及的保罗·兰德就是其中一位关键人物，设计出一系列非常具有国际影响的企业形象，除了之前谈过的 IBM，还有 1960 年设计的西屋电器及 1965 年设计的美国广播电视公司（ABC）等。保罗设计的西屋电器视觉系统这套从欧美成熟起来的设计体系在 70 年代传到日本，被日本人继续精耕细作，在视觉体系的基础上再延展出所谓的 BI，英文原文为“Behavior Identity“，即”行为规范系统“，类似一个对内组织、管理及培训的规范。然后又再延展出“理念识别规范“，英文原文”Mind identity”,简称 MI，类似企业经营的宗旨与方针这样的系统，越来越复杂，但是已经超出了设计师能力范围，所以有点本末倒置。日本更加复杂的企业识别设计不管如何，任何系统都是由人建立再由人打破，我们时刻要坚持的原则就是应需而变，因为时代变化越来越快，不能局限于教条主义，这样才能真正为甲方切实解决问题，提供价值。今天的故事讲到这里，感谢各位，下期再会！为什么你的设计没有品牌感？收下这份近两万字的品牌设计指南品牌是一个比较抽象的词，那是因为一提到品牌，每个人都会对品牌拥有自己的见解。阅读文章 > 欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/brand-vi-design-history
会员 系统 该怎么 越来越多的产品引入会员系统，如何做好一个会员系统，是当下设计师需要解答的一个命题。会员体系分析1. 会员系统的定义：会员的本质是建立用户分层，便于形成用户的差异化营销，通过这种差异化的营销达到以下四种目的：提高用户留存率（增加用户粘性）；提升用户价值；得到会费收益；建立流量桥梁；2. 用户分层：将全体用户细分为会员用户和普通用户目的：筛选出高价值用户（高留存+消费力强），精细化运营手段：收会员费，建立用户层之间的壁垒结果：用户自发分层，愿意掏钱的那批人成为会员用户原则：给会员用户提供卓越的服务，给普通用户提供好用的服务（反例：某网盘限速机制，约等于强卖会员，严重伤害普通用户的使用体验）3. 会员机制对用户的价值价格优势：会员专享低价（电商产品有会员专享价、外卖产品有会员红包）资源优势：增值内容（影视、音乐版权）体验优势：更好的服务（更快响应、专属客服、无广告等）心理优势：身份认同（尊贵感标识，与普通用户形成差异。对社交、游戏尤其关键）4. 会员机制对产品的价值短期价值：通过收取会员费，提高营收长期价值：增加用户粘性、巩固并提升市场占比5. 会员系统如何增加用户粘性？体验角度：更好的服务、专属福利心理层面：身份认同、沉没成本（已经花了会员费，越多使用越合算，不然就亏了）界面拆解UI 界面设计环节，一般的会员体系会涉及到的界面、视觉元素有：会员触点/前置曝光会员中心会员身份等级1. 会员触点/前置曝光所有将用户引导至会员中心页面的入口都可以算作会员触点，触点越多，用户被引入会员中心的可能性越大。但触点也不是越多越好，过多触点会引起用户反感，将触点置于合适位置，能更自然高效地提高转化率。个人中心：露出会员板块，通常是视觉强调中心。个人中心是曝光率较高的页面，其中整合了许多重要和必要功能入口。利用个人中心页面，可以很好增加会员信息的曝光。该方式也是最常见且最通用的触点形式，不局限于产品类型。内容卡点：体验完免费部分之后，会员内容收费，触点卡于两者之间。增加用户沉没成本：用户已经在早期投入大量时间和精力阅读免费内容；利用用户好奇心：有前文做铺垫，用户行至卡点处，对剩余内容的好奇远超过一般内容；需求明确（制造问题）：用户开会员就是为了解决剩余内容无法观看这一具体问题，用户总是倾向于解决问题而不是在原有基础上提高要求。会员专区：建立专享感，将会员内容与普通内容进行区隔。将付费内容集中在一个区块内，制造差异化，不论是内容质量或者商品价位，本质都是让用户形成会员价值很高的感觉。会员频道常见于电商产品，同样是起到区分内容，建立壁垒的作用。底部提示使用较为轻量的底部提示，引导用户关注会员信息。该视觉样式还常被用作登录提醒。小 banner见缝插针式的视觉提示，占用流量最大的首页空间，此时文案的利益刺激尤其重要。会员专页使用一个底部 tab 的权重来承载会员相关信息，可见会员体系的重要性。2. 会员中心会员中心是展示会员权益，以吸引用户开通会员的页面。是用户全面了解会员相关信息的窗口，氛围营造、权益展示、行动点突出，是设计会员中心需要考虑的要点。会员中心的常见页面结构不同产品有不同的会员中心布局，有差异性也有共性。氛围感、套餐选择（多套餐情况）、行动点、会员权益，是多数会员中心页面共有的模块，模块之间位置并不固定。本质上越重要的模块，应该被分配越醒目的视觉表达方式。通过调整位置、面积、视觉对比度等，都可以调整不同模块之间的权重，达到产品想要呈现的优先级效果。会员中心_氛围感打造氛围感的方式多样，常见的有以下几种方式：会员中心_套餐选择部分产品不存在套餐选择，只有一种套餐，如盒马。在用户体系中，将用户分为两层，用户会员与非用户会员。部分产品在会员中又进一步分类，推出了多种会员套餐。常见套餐以时间区分，如包月会员、季度会员、包年会员、连续包年会员等。除此之外，也有以权限范围为区分，如百度网盘的会员 VIP 和超级会员 SVIP，超级会员享受更多特权。还有垂类会员，如视频产品中单独开辟出体育分类，对应设立专门的体育 VIP 卡。上方案例中的套餐选择均以卡片的样式展示，除了该种方式，还有可以以列表形式展示。列表形式的好处在于，套餐在垂直方向铺开，延展性强，当套餐数量改变时，不会影响展示效率，而卡片式的展示形式会造成部分套餐被挤出屏幕，用户需要左右滑动才能浏览全部，交互成本略高。同时，卡片式套餐需要点击选中套餐，再点击行动点，才能触发支付，而列表式模型，直接点击对应套餐项上的按钮即可呼出支付，交互更加简洁。多套餐模型下，产品往往会重点突出一到两项套餐，从商业层面讲，通常希望用户选择价格更高的套餐，从体验层面讲，将附加值最高的套餐用角标突出，辅助用户决策。会员中心_行动点行动点是一个页面中最醒目的元素，往往是由按钮充当。按钮的点击数据也可以直接反映页面的设计是否合理。对于会员中心页面来说，提升关键性按钮点击，往往是改版的目标和方向。最常见的行动点布局方式有 4 种：购买按钮常驻于底部工具栏购买按钮紧邻套餐选择模块，位于页面中部页面同时有多个购买按钮界面始终存在一个购买按钮符合一般操作习惯，关键行动点常驻于页面底部，已经被普遍接受。购买按钮紧邻套餐选择模块，从操作的角度上来说，更加合理，套餐选择完毕之后，购买按钮含义类似“确定”，两个步骤紧密相关，符合格式塔的远近亲疏原则。同时，页面中心相比于页面底部更加容易视觉聚焦，用户能更加容易注意到。这也解释了，为什么居中的对话框常用于警示，需要引起用户高度关注，而底部半弹窗往往承载不那么关键的内容，一般承载无破坏性的操作。购买按钮意味着支付入口，头部卡片上增加支付入口，不妨通过数据观察，测试不同位置的点击效果如何。随着页面上划，界面中第一个行动点（页面中部）被推出视图，此时底部工具栏浮出，保证页面不管在何位置，始终可见至少一个行动点，让用户随时可以进行支付。会员中心_权益会员权益是决定用户是否购买会员的重要因素。有些权益相当实在，如会员折扣、专属红包等，而有些权益的诱惑力相对较弱，不同的权益强度决定了不同的视觉呈现方式。会员权益细节介绍会员权益从交互上，可分为两类，可点击和不可点击。不可点击的权益往往在会员中心页面是以宫格图标的形式呈现。而可点击的权益，往往内容详实，需要更多的空间来解释和说明权益的具体内容。从视觉形式上，也可以分为两类：弹窗呈现子页面呈现3. 会员身份等级除了购买会员之外，部分产品引入了“身份等级”的概念来将用户进行分层。划分的维度可以是用户的活跃度、裂变能力等，可以依此，设计一系列的会员任务。会员身份等级机制利用了用户的攀比、自我实现等心理，进一步增加用户与产品之间的粘性。会员身份等级一般集中在 4-7 个之间，其中梯度理论上呈递增趋势。作为设计师，需要将低等级到高等级这种“越来越高端”的氛围烘托出来。不同类型的产品有自己的特色和局限，金融类产品在整体视觉属性上趋于稳定内敛，而娱乐性强的产品则在视觉上限制较少。随着梯度的增加，设计难度也在增加，如何在不同等级之间拉开合适的视觉感知差距，是一个难点。如上图中的“黑金会员”和“黑金 PLUS 会员”在视觉上比较雷同，差异较小。当静态视觉发挥空间有限时，可以考虑加入动态元素，增加区分。徽章系统与会员等级的本质一样，徽章系统将用户分层，制造不同的用户群，拥有更多、更高级徽章的用户对于产品来说，自然是价值更高的用户，这类用户是产品需要重点关注的对象。他们是产品的深度体验者，他们的意见反馈相比于普通用户更加准确和反映问题。小结随着产品本身的日渐成熟，越来越多的产品选择加入会员体系。会员体系无论对产品的短期或者长期利益都至关重要，从短期来讲，直接增加营收，从长期规划来讲，对于增加用户粘性、提高市场份额也有着重要意义。作为设计师，如何把用户对于会员期待的“价值感”、“尊享感”用体验的形式呈现出来，至关重要。会员体系涉及到的相关设计细节很多，小到一个会员标签，大到一级页面，其中的设计细节更是不胜枚举。将庞大的概念不断拆解为一个个细小的可控的模块，加以分析和总结，始终是沉淀设计经验的方法之一。高大上的观念理论，需要一个个见微知著的细节支撑。感谢阅读，欢迎讨论。本篇来源：优设网原文地址：https://www.uisdc.com/member-center
淘宝 免费试用 系统 2019年国内专业的试客系统基于微软ASP.NET(C# NET4.0)+MSSQL架构开发，性能与安全性先天就比PHP语言好很多，系统主要活动类型：免费试用、折扣试用、红包试用、拍A发B等众多模式（支持淘宝、天猫、阿里、京东、拼多多、蘑姑街等，支持定制满足你的一切需求），另附带收藏/流量优化，推广联盟(可支持N级提成)、安全认证体系、微信公众号集成、交流论坛、帮助中心、招商等子模块，系统默认内置20多项增值服务，为商家提升商品曝光率和销量。免费试用体验营销是未来新零售+新营销非常重要的营销方式，前景可观，主要您想在电商领域上开创一片属于自己的电商事业，那么本系统将是您首选创业项目之一。
电子商城 程序 系统 S-CMS电子商城系统(双语带手机版)以php+mysql进行开发，网站安装简单、快捷。程序特色：一、使搜索引擎更加容易抓取和索引二、提供更多的功能，提高用户的友好体验三、可用性的提高，提高用户的友好体验使用方法：将文件上传至PHP空间或服务器，运行http://你的域名/install.php进行安装。只需两步即可安装完成，为了保证网站安全，请修改默认后台路径及数据库名称。S-CMS电子商城系统系统(含微信小程序)v3.0 bulid20190402更新说明：1.新增：新闻分类新增了开启或关闭投稿的功能2.修复：修复由于用户设置后台目录是大小写不一致导致的读取文件路径错误的问题3.新增：微信小程序支持设置独立标题，可不在与网站标题一致S-CMS电子商城系统系统(含微信小程序)v3.0 bulid20190409更新说明：1.新增：加入回收站功能，所有误删除的数据均可在回收站内进行恢复2.优化：用户登录后台和导入模板数据时自动备份数据，防止误操作损坏网站数据3.优化：后台富文本编辑器改为Ueditor，功能更加强大S-CMS电子商城系统系统(含微信小程序)v3.0 bulid20190416更新说明：1.新增：新增页面防复制功能，可以保护网页内容防止文字被复制和图片被保存2.新增：当管理员登录IP有变动时，需要二次验证邮箱，保障后台数据安全3.新增：取消图形验证码，改为拖动滑块验证，增加了人机验证的安全性同时减少出错概率S-CMS电子商城系统系统(含微信小程序)v3.0 bulid20190507更新说明：1.新增：支持编辑器上传图片加水印及同步到OSS云储存2.新增：产品和新闻分类按钮启用click点击，采用a链接，对搜索引擎更加友好3.新增：新增MIP（即移动端网页加速技术）模板，可以有效的提高网站的搜索引擎排名
张大湿
在路上
落霞与孤鹜
飞翔的企鹅
表哥
