01 什么是用户画像（what）
02 B2B用户画像的特色（what）
03 为什么要构建B2B用户画像（why）
04 如何构建B2B用户画像（how）
05 B2B用户画像的传播与使用（how）
本文尝试通过what-why-how的结构，结合自己的工作做一些实践，和大家分享下B2B用户画像的整体概念框架以及构建方法。出于对我司数据的保密，无法直接分享给大家细粒度且对应的数据，所以分享过程中我会结合业界和其他前辈在网上分享的内容和数据作为案例，如有不足和错误之处，还望大家批评指正。
那在讲B2B用户画像之前，我想先来说说用户画像的概念，在看一些文章时发现有些作者混淆了用户画像的两种概念。可能很多人没有注意到，用户画像这个词包含了2种不同的含义，一种是User Persona，一种Use Profile。
User Persona是对一个用户群体的整体抽象。这一概念最早源于交互设计领域，是Alan Cooper在《About Face：交互设计精髓》一书中提到的研究用户的系统化方法。“赢在用户”这本书将其翻译为“人物角色”，目前业内使用“用户画像”这个术语。表达的意思一样，是真实用户的虚拟代表，是在深刻理解真实数据的基础上得出的一个的虚拟用户。
User Profile是对每一个个体的画像，是在产品用户量有一定规模以后进行的。利用用户的行为数据或者填报的资料进行的用户属性标签提取，更多被运营和数据分析师使用，它是各类描述用户数据的变量集合。在大数据时代，企业通过对海量数据信息进行清洗、聚类、分析，将数据抽象成标签，再利用这些标签将用户形象具体化的过程。
两类画像的对比如下图：
明确了两种画像的区别，那本文我们就重点谈谈User Persona类型的B2B用户画像（后续文中简称“用户画像”）。至于User Profile，比较适合用户体量大的产品，而B端产品除了头部企业，很难达到这个量级，无疑用User Persona更合适，本文就不再赘述。
不管是B2B还是B2C产品也好，不论是商业层面上（比如在资源有限情况下聚焦关键用户类型）、或是在产品层面上（更好理解用户想要什么，确定功能的范围和优先级），建立用户画像的本质都是为了辅助一些决策。
不同之处在于C端面向的是大量且分散的个人用户，用户画像的主要目的是把用户聚类，更好的了解不同类型用户的特点和偏好。而B端产品，面向的是企业级用户，满足的是企业的管理或经营需求，关注的是成本和效率。画像的目的是针对业务不同环节中、具有类似任务的用户进行更立体、丰富的需求整理和挖掘，往往和角色相关。
其决定了B2B用户画像的几个特点：
伊查克·爱迪思（IchakAdizes）提出了企业生命周期理论，企业的发展大致有初创期、成长期、成熟期和衰退期四个阶段。不同阶段的企业，其组织形态、关注点、管理方式等都会有所不同，产品需求侧重点不同，用户画像的方向和调研方式也会有不同。
初创期：产品立项阶段
这个阶段往往指的是公司刚成立，此时产品、企业文化尚未成形，处于客户积累阶段，较为关注引流。需要通过用户画像定位细分市场、产品模式及功能，这个阶段需做定性调研了解目标用户，初步形成用户画像为需求做底层支撑，这个阶段的用户画像颗粒度可以粗些，旨在帮助团队快速就“我们的用户是谁”达成共识。
成长期：产品运营中（已有数据积累）
这个时候产品已有demo或已上线迭代，产品处于完善、升级的阶段。可使用“数据挖掘+定量筛选+定性丰富”的方式，结合项目的已有数据，使用定量筛选用户，做大量微观且具体的用户调研，基于后台、第三方平台监控发现问题，定位问题关键及原因分析，优化产品功能及运营模式，再通过调研访谈了解具体的行为细节和态度。该阶段的用户画像可用来验证问题、完善或发现新的机会点。
成熟期：产品相对稳定
客户资源相对稳定，可能已有一定的规模，内部管理需求增长，市场地位趋于稳定，日常工作也大多以维护为主。且现有增长点已遇上了瓶颈，用户活跃将不可阻逆地缓慢下降，即使你做再多产品优化、烧钱运营都无法改变产品终将走向衰退的命运，时间问题。企业急于寻找突破口和新的增长点，用户画像又将被赋予新的使命：基于用户画像进行“新增长点”的分析，定性挖掘蓝海，再定量进行验证。
衰退期：产品活跃度快速下降
进入到这个阶段，说明产品没有成功转型。这时候再做用户画像的意义其实不大，如果一定要做，除了提高回流率、挖掘增长点外，可以定性了解原因，调整产品。
不同于C端产品的的用户单一性，B端产品的用户画像对应的不是一个个体，而是一个组织或机构，同时涵盖组织机构中不同的人员。产品面向的使用对象可能从普通员工到企业高层，覆盖销售、技术、行政人事部分等，基于工作场景不一样，对产品的需求可能也大相径庭。
以一个CRM系统为例，一个复杂的B端产品可能会涉及以下四种角色的用户：决策者、主要使用者、次要使用者、间接使用者。如下图所示：
决策者：下决策购买产品或服务的人，可能是业务线负责人，也可能是公司董事长、CEO，他们常常不是产品的使用者，使用频次低甚至完全不用，他们通常都是从公司的整体利益出发，更关注产品能否给公司业务带来帮助，降本还是提效了。其评价某个功能的好坏，往往与使用者的感受是相悖的，如钉钉的“DING一下”,他们并不太关注使用过程、体验，更关注产品的核心价值，将利益最大化。
满足决策者的需要是做好B端产品的前提，也是制作用户画像所要明确的方向；很多体验做的不好、难看的产品之所以也能在B端市场有一席之地，就是因为满足了企业的需要。比较理想的情况下，团队对目标客群有一定深入的研究，形成趋于标准化的产品，就能打动目标客户群的大部分决策者。
主要使用者：真正频繁使用产品的人，也是产品/设计师想要提升产品体验要瞄准的人群
他们可能更关注产品的具体使用，是不是易用，有没有帮助他们更便捷地完成工作，有没有提高他们的工作效率。主要使用者是最容易识别的，以CRM系统为例，如果没有销售日常在系统中录入客户数据，管理层就无法查看成单量、进度等他们所关注的信息。
次要使用者：使用产品频率相对主要使用者更低，用到的功能也比较少，只在某个中间流程涉及少量操作。如CRM系统中人事、财务会涉及到其中钱或出差的审批对他们而言，主要需求是能快速找到自己的任务并完成就可以了。
间接使用者：不直接使用产品但会被产品影响的人群，产品和设计师在设计过程如果有资源和精力能兼顾他们的需求和体验，那就太贴心了。如审计、政府人员，属于不紧急，非必要需求。
B端用户使用场景多和业务形态密切相关，产品通常要解决的是某类角色工作时发生的问题，所以不同于C端用户画像，从用户视角出发，关注用户个人的场景、诉求、痛点和情绪，核心是满足用户的需求，关注用户的年龄、性别、收入、个性、习惯、消费模式等标签。
但是在B端产品中，我们抛开了用户作为个人存在的标签，我们更关注用户所代表的角色，他的岗位职责是什么，它在工作场景中需要完成哪些任务，这些任务要做什么的，其岗位职责决定了它完成任务的目标、场景、使用什么工具去，需要跟其他角色配合吗等信息。
所以B2B画像更关注角色的分类、工作/使用场景、用户目标、操作链路、角色协同等信息，很难看到类似这个人是不是已婚，小孩多大这些不知道如何应用于产品设计的内容。而在一个C端产品用户画像上很少看到有哪些让他压力山大的KPI等信息。
仍然以CRM系统为例，其主要使用者-销售的目标就是用该系统录入商机、线索等，然后根据数据情况制定客户沟通回访计划等，聚焦的是该系统能否让他很好的履行了其岗位责任。和他这个人在哪个城市、已婚未婚等个人特性是无关的。
B2B产品面向的是企业用户，满足的是产业链中各企业的经营需求，这时B2B画像应该具备行业、客户属性这一维度；但是最终购买者、使用者都是企业中的某一角色，这决定了B2B画像还有角色这一维度。所以，小编认为，B2B用户画像是企业和多个核心角色共同构成的画像，建立B2B画像，需要客户（企业）画像和角色画像两部分的信息。
1）客户画像
客户画像指的是使用B端产品或服务的企业用户，具有行业特征、企业特征及角色特征。其的目标是促成销售，主要用来帮助销售/运营人员他们快速定位目标企业，帮助他们更好的认识我们客户是什么样的人，让他们的工作更有方向。
一个典型的客户色画像会包括：
基本信息：外在的标签，如所处行业、地域、人员规模、收入规模（年营业额）
业务模式：线下的实际业务流程-视行业而定，如商业模式（靠什么赚钱）、业务模式（业务怎么运作）
组织机构：自上而下都有哪些机构，彼此之间的关系。
关键角色：各个机构里有哪些岗位/工种，决策链上有哪些角色、谁才是有价值的关键角色，角色话语权。企业的关键决策人随企业大小而不同，一般中小型企业都是老板、合伙人等。而大型企业采购B端软件都是需要经过内部流程的，最终审核人是老板，但其中影响决策最大的往往是商务经理负责人。
2）角色画像
B端产品虽然面向企业，但是最终使用执行的还是人，这些执行层（终端使用者）也是产品的检验者。在企业决定购买产品之前，执行层没有话语权，但是在续费的时候，他们的话语权比重会开始显著提升。
因此在我们的产品设计阶段，会更关注执行层的角色画像。当我们讨论产品、需求、场景、用户体验的时候，往往需要将焦点聚集在这类人群上。
一个典型的角色画像会包括：
基本信息：如角色名称、照片、角色/工种、平台偏好、文化水平、办公场地、使用频次，角色名称以及照片是为了更有代入感的个人情况说明，但值得注意的是，这里的情况更多围绕职业情况展开，比如工作年限，工作职责，能力维度等，那些在C端中常见的家庭情况，几个孩子什么的统统不重要。
用户行为驱动：用户的工作目标、工作任务和考核指标，B端角色通常是企业员工，为了薪酬，有一般都会有结合任务而完成的考核指标，了解考核指标可以在设计过程中更明确知道哪些内容是用户最关注的东西；
使用场景：工作的时间、地点及工作内容是什么，使用场景是重要但容易被忽略的一个内容，尤其要搞清楚使用产品的场景有哪些、用户平时的工作流程是如何的、主要使用什么功能。可用一个真实、普遍、易懂的故事勾勒一下
使用期望：日常工作面临的挑战和痛点，期望获得的帮助。
角色画像和客户画像之间没有直接关系。因为目标不同，所以会有不同的用户细分：客户画像的目标是成销售，获取利益；角色画像是为了解决问题和为用户创造价值，进一步为公司创造价值。但是在刻画B2B用户画像时，如果只考虑执行者的话，没有客户画像作为指引、摸清决策者的特征与行为，你的产品功能或者体验设计上可能就会出现严重偏差，甚至方向错误。
产品和服务只是企业将价值传递给客户的一种工具和媒介，无论产品形态如何，其本质都是在解决客户的问题。如果没法满足客户的业务需求，基本上该产品对客户是没有价值的。客户画像作用贯穿产品生命全周期，产品/市场/销售较为关注，它的价值主要体现有三点：
对产品：明确为谁服务，快速的了解客户的需求和状况，确定产品功能设计，学会识别用户的解决方案和用户在场景下的诉求，不断迭代调整产品；
对市场/运营人员：建立对客户尽量全面的了解并基于客户画像确定营销内容、营销策略和渠道选择，使产品的服务对象更聚焦；
对销售人员：帮助销售进行客户筛选，找到有效客户，提高转化率，确定业务方向和销售打法。合理配置团队，完成KPI。
客户画像越早建立越好，但是务必注意控制深度和成本，因为不同阶段的企业其侧重点有所不同。在初创期，产品团队可以通过关注典型客户来积累定性数据，从而低成本搭建客户画像；而到了成长期和成熟期，在拥有大量客户数据的前提下，企业可以逐渐过渡到使用定性&定量相结合的方式来形成更为清晰的客户画像。
以前业界有种说法，做B端，能用是第一位，用户体验不重要。所以除了一些成规模的SaaS公司，设计师在B端几乎无用武之地，成了组件化的搬运工、工具人。所以大部分的企业在跑马圈地时期是不注重用户体验的，企业有客户画像，却未必有角色画像。
还说用户体验不重要的人，可以看看有赞CEO白鸦的公开说明。
图片来源于网络
2020年，疫情为企业级SaaS带来流量，在今年2月宣布延期复工后，钉钉搜索量激增数倍，无论中大型企业还是小微企业都纷纷加入了远程办公的行列，协同办公SaaS获得了大量的“试用客户”，加快了市场激活的进程，但接下来，流量转化和用户留存成为后疫情时代的核心关注点。
后疫情时代，对企业来说，改善产品用户体验，了解使用产品的终端用户，构建角色画像愈加重要。而角色画像作为产品和设计师比较关注的画像，有以下三点价值：
设计前：帮助确立设计目标、设计策略与准则
设计中：解决架构混乱问题，明确需求功能的合理性和优先级；解决需求争议问题和沟通问题，与团队成员就服务目标达成共识，
设计后：解决可用性测试问题，帮助我们锁定合适的测试用户；
总结一下就是角色画像是产品的根基，客户画像是产品的外延生命力的象征，两者相辅相成。
对于这个章节。我将以我所负责的一款企业产品为例，来讲述用户画像的创建过程。在这个项目中我们通过定性研究创建了用户画像，当然如果必要，大家也可以在后期再通过定量研究对得到的用户画像进行验证。
用户画像的创建可分为以下几个步骤：
B端用研和C端有一点不同，企业用户的使用场景基于业务，背景复杂、角色多样、使用工具特殊（如企业自有后台系统）等，导致无法在可用性实验室中切实地模拟出来，所以我们得接近用户、基于业务场景去了解用户。
小编大致总结了一下，B端用研有以下3大痛点：
信息获取难：B端产品主要针对用户工作和业务开展，一般都是强制使用产品不存在“挑剔”的选择空间，导致用户的反馈就非常少，信息的获取壁垒较高。“深度访谈”是最核心也是获取信息性价比最高的一种方法，但是出于对信息用途的不了解，对商业隐私、生意经验泄露的担忧，B端用户可能不愿意配合调研或不信任你。
业务复杂：缺乏行业经验，难以理解业务，这会让用研对象觉得你不专业，仿佛鸡同鸭讲、对牛谈琴。而且在不理解业务的情况下，设计师在访谈过程中会过于关注基础业务，无法进行更深层次的访谈，采集的信息并非用户的真正需求。
视角不同：设计师视角容易缺乏框架性思考，搞不清每个业务模块/功能的边界以及它们之间的关系，不能站在用户（决策者、使用者）的角度思考问题，以至于被用户牵着鼻子走，用户说什么就是什么，能和用户产生共鸣的部分极少。
俗话说“磨刀不误砍柴工”，针对以上三大痛点，项目伊始有必要进行一轮全面的桌面研究，帮助我们快速建立对行业的全局认知并了解业务，另一方面，也有助于我们更好地和用户进行沟通。
研究内容：
研究途径：
此处有2个注意点：
针对以上2三点，下文将依次展开说明。
1、如何筛选出目标用户？
Cooper指出，不能为超过3个以上的用户画像设计产品，这样容易产生需求冲。当有多个用户画像的时候,需要考虑用户画像的优先级。前面讲B2B画像特点的提到过，由于是企业产品，仅仅产品中一条业务线，角色也是多样的，所以在筛选目标用户时有一点尤其要注意：应识别出关键的用户画像。
以我公司的招聘业务为例，为了便于大家在宏观上确定什么样的企业是我们主要的目标用户，我们的做法是按企业类型定义了三个KA客户画像。由产品、市场、以及各组leader一起来完成用户画像的优先级排序工作。确定用户画像优先级时，我们可以主要从以下几个方面来考虑：
然后再找关键的角色画像，即角色画像中的决策者和主要使用者，次要使用者和间接使用者因时间、金钱的关系，现阶段不做考虑。我司产品的客户主要是劳动密集型企业，作用是帮助客户解决蓝领用工问题和发薪合规问题。以招聘业务线为例，想把这个产品卖给某企业，首先要打动该企业的HR总监，再说服CEO/董事长，再让招聘部员工-HR试用。
那么这条决策链上的关键人就包括了HR总监、CEO/董事长、HR。那在这个案例中，HR总监是决策链的关键人物，因为只有他认可之后，才会申请购买或在CEO面前夸这个产品。而HR是最终产品的使用者，虽然他们在企业购买产品前没有话语权，但是在续费阶段，他们的话语权最大。对于处于成长期的产品来说，我们现阶段的调研目标也是为了获取HR总监和HR两类角色的用户画像，每个角色访谈4～6人；
2、画像维度有哪些？
筛选出了目标用户，那画像维度有哪些呢？。以本案例为例，在本次用户画像的设计中，因我司产品处于优化迭代阶段，做用户画像的目的是了解用户的使用情况，比如各功能的使用频率、使用中遇到的问题，定位问题关键及原因分析，优化产品功能及运营模式，同时也希望通过了解用户的具体行为细节和态度，发现新的机会点。
对于企业，主要了解其企业规模、行业属性、业务流程、组织架构、机构里有哪些岗位/工种。这个信息主要由产品或销售采集，应该前置于角色画像。而我们第一步的业务研究中，很大一部分内容也来自于此。
对于决策者，主要向其了解企业管理、业务等方面的需求信息，对于本产品决策者关注的是营收增长、效率提高还是减少成本等方面的问题。
对于主要使用者，侧重了解用户特征、产品认知、使用场景与痛点，各功能的使用频率、使用中遇到的问题等
根据前面前文提到的的用户画像构成要素和自身业务情况，有选择性的摘取，最终梳理出本案的用户画像维度如下：
明确了调研对象后，就可以展开调研了。一般有三种方式：
定量和定性调研究虽各有优劣，但定量较为昂贵、费时，也需要有精通统计分析的认为协助，在B端调研方式中并不太实用。对大多数团队而言，定性是性价比最高、最合适的。它不仅提供了“用户是谁、他们想要什么”，还是基于数据、经济高效较为快捷的一种方式。
采用何种研究方法，主要根据企业生命周期、研究目的、项目时间和经费等进行综合考量，本案中我们选择深度访谈收集一手资料。
在明确目标与方法后，需要对整个研究进行细化，制定具体详实的执行计划并开始招募用户采集资料了。可通过前中后三个阶段性策略的来进行访谈。
1. 访谈前：搭建信任基础
在构建用户画像的step 1中，我们已经对业务和要访谈的用户角色有了一定的了解。只需在访谈时间的4-7天前，根据确定的画像维度来设计访谈大纲。设计大纲的目的是避免访谈过程中对话内容发散、混乱而无法收集到足够多的有效信息。
需要注意的是：大纲需要针对访谈的每一条需求，做到详细、缜密，同时要考虑用户对访谈题目的理解，可根据产品使用顺序，由易到难、客观到主观、概括到具体的顺序展开，比如产品功能的使用频率就可以作为一个客观问题放在问题的开始。且要考虑访谈的时间，因为访谈的时间不易过长，所以访谈提纲也不能过于冗长，典型的访谈大纲模板如下图所示：
并提前将访谈目的告知受访者，能让他们看到访谈的直接或间接价值（提高工作效率、降低成本等），也就能更好地建立双方的信任。因此，我们需要提前确认整个访谈的规划，并主动将相关信息告知受访者，包括访谈的时间、地点、方式、目的、流程，还有过程中可能涉及的问题、后续发放的奖品等。
2. 访谈中：表现专业特质
开场介绍
跟C端访谈一样，正式访谈开始之前的开场白非常重要！除了再次介绍自己（不管是什么岗位，此刻我就是用户研究员），说明这次访谈的目的，一定还要强调访谈的隐私性和数据安全性，毕竟他们面对的是真金白银的生意。
暖场
在正式访谈前，可以先和用户闲聊2~3分钟，通过一定的沟通活跃气氛，让用户更加放松，同时增强用户对我们信任。暖场和开场介绍可穿插进行，没有绝对的先后之分，在访谈者自我介绍完成之后，也可以让被访者进行自我介绍。
一般问题
一般问题是指一些比较基础性问题，用户不需要进行太多思考即可回答，比如“你最常用的功能是哪些”、“使用时间多长”。
深入问题
深入问题是用户行为和想法更加深入的探索，会更关注用户行为细节和行为背后的动机。一般在问这些问题时，访谈者需要不断地询问用户为什么，直到用户无法继续回答。深入问题是整个访谈的核心，也最容易挖掘到用户需求和痛点。
回顾与总结
每部分的访谈结束后可进行简单的小结。访谈者通过回顾访谈过程对用户的行为和态度进行客观阐述，一方便有助于访谈者梳理思路，另一方面让用户对访谈结果再次确认。
3. 访谈后：实现长线共赢
最好和访谈对象建立长期联系，尤其是一线业务人员。人和人面对面聊过后，会产生基本的信任感和好感，要借助访谈的机会，拉近和业务人员的距离。如果后续项目中遇到问题，想获取最真实的一线反馈，可以联系之前的访谈对象，寻求帮助。
1）根据角色对访谈对象分组
将用户访谈后得出的重点信息写在便利贴上（或Excel表中打印后切片），设计师需要根据产品用户角色不同，将受访的用户归类分组，如HR和HR总监。
2）找出行为变量
分组后，需要识别关键的行为变量，将调研到的用户与行为变量进行一一对应，并识别差异化行为模式。如下图所示
3）映射访谈对象与行为变量的关系
再将不同的角色间同类行为模式归纳（合并同类项），进行行为描述。此处需注意以行为变量为依据进行用户对应时，不必追求绝对的精准，只要相对能映射清楚即可。梳理完后，观察可发现某些用户群体聚集在几个行为变量上，它们构成了一个显著的行为模式，由此聚类出某个角色类型。依此类推，可以发现几个不同的行为模式。为保证全面，映射完最好遍历一下，检查是否有用户或变量的遗漏。
4）找出共性行为模式
完成映射后，寻找在变量轴上的对象群。梳理完后，如果一组对象聚集在多个不同的变量上，则可以代表一类角色存在显著的共性行为表现（通常每类角色会有2～3个共性行为）。共性行为能帮我们识别标准化产品需要满足的用户需求，而差异化行为可以根据企业需求做定制化服务，一个B端产品是不太可能满足所有用户的需求的。
一旦我们找到共性行为，就可以创造用户画像了。梳理出每类角色的行为、目标、痛点等维度特征，形成画像的基本框架。最后再完善用户画像，此时我们需要做的事情主要是：
最终客户画像呈现如下图
数据已脱敏，非真实数据
最终角色画像呈现如下图
数据已脱敏，非真实数据
用户画像作为一个强大的设计和交流工具，能够让利益相关人目标始终保持一致，它的价值在于传播与使用。举个例子，90年代，库珀将用户画像的描述做成一页纸贴在墙上，一个产品的一个用户画像做一页纸，这样设计团队成员每天走进办公室就能看到。
用户画像制作出来后，与整个项目团队共享定义的用户画像是很重要的，千万不要让他在共享文档里积灰或挂在墙上当摆设。你要做的是让用户画像从纸上跃起，走进你同事的心里，让他在每次讨论、每个决策时，自然、自发地被提起。所以用户画像的使用也是极其重要的，不然前面的工作都是无用之功。
所以，你可能需要：
向团队介绍用户画像。花点时间介绍研究的过程，展示照片给他们看，聊一聊画像的需求，期望，痛点，性格等。最好以故事性的方式进行引导，并长期地在会议里提到并讨论它
在你的用户故事中使用用户画像。“如果我是**业务招聘员，我想要快速识别出今天某门店招聘的人数和到岗的人数”。设计时，花点时间想象一下软件会被用户在工作中如何应用。
造访不同团队，介绍用户画像，包括它从何来，如何用。教他们怎么招募有代表性的用户进行测验，如何写用户情景来启发设计或作为可用性测试任务
总的来说，在你能力范围之类的地方，宣传用户画像的商业价值，提升大家的信任。毕竟用户画像可以帮助产研团队跳出自己的需求，了解真正使用产品的人的需求。当越来越多的团队使用用户画像，那么用户画像就会越来越像一个真实的用户，帮助团队从用户的角度出发去设计产品。
值得注意的一点是，用户画像并非一成不变的，很大程度上受环境和周期的影响，所以我们要定期回顾自己的用户画像，对他们进行一些更新，确保和现实一致性。市场变化和策略的变化可能会重新定义你的业务受众，也可能出现其他的细分，这也是重新调整用户画像的好机会，否则它们最终将失去生命力。希望你的用户画像也能始终对业务起到帮助，为体验助力。
文章来源：学UI网 作者：小纽扣
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户体验设计是一个动态领域，每年都会为我们带来新的趋势，最近十二个月也不例外。全球新冠病毒大流行和国家封锁使我们与数字世界和现实世界之间的互动方式发生了突然的变化。人们不仅开始在网上花费更多的时间；他们的思考方式和表现方式也发生了不同。
本文主要阐述2021用户体验的趋势，我们相信这将在新的一年里占据主导地位。查看一下您可以利用哪些趋势超越竞争对手并在人群中脱颖而出吧。
我们在2020年UX状态预测中讨论了语音用户界面（VUI）。如今年所示，语音指令仍然是UX设计中最热门的趋势之一。可以肯定地说，明年不应忽略它。
毫无疑问，到2021年，语音聊天机器人和虚拟助手将继续流行。用户在数字体验方面一直在寻求简单性和效率。市场需求，高期望值以及人工智能技术的迅速发展使品牌别无选择，只能在其产品中包含基于语音的功能。
已经有许多企业为广泛的VUI实施奠定了基础。例如，星巴克推出了一种名为My Starbucks Barista的基于AI的聊天机器人。其目标是通过允许用户通过语音命令购买自己喜欢的饮料来改善咖啡订购体验。
极简主义可能是当今视觉设计中最明显的趋势之一。用户正在体验越来越多的网站所有者想要传递的关键消息。Cookie弹出窗口，打折广告和各种通知旨在吸引和转化网站访问者，但它们也吸引了我们的注意力。这就是简约的以用户为中心的设计应运而生的地方。
但是，“极简主义”并不意味着“沉闷”或“原始”。意思是“优雅”和“高效”。尽管必须使用数量有限的颜色，设计元素和明亮的组合，但UX设计人员仍然有很大的发挥空间。此外，元素的功能最为重要，正确突出产品功能并传达正确信息的能力需要大量的创造力。相反，仅具有装饰目的的组件正逐渐失去其重要性。
内容，消息和导航的清晰度是UX设计的简约方法的另一个重要方面。信息过载对于大多数现代用户来说是一个痛苦，这意味着网站所有者应努力使自己的UX文字简洁明了。
负空间是用户体验设计的一种大趋势，它已经脱离了对简约UI的市场需求。简而言之，负空间是页面布局中对象周围（宏空间）或对象内部（微空间）的空白区域。它已经成为独立的设计元素，在视觉美学和用户体验优化中起着至关重要的作用。谷歌的主页，苹果的官方商店以及一些用Webflow创建的网站就是很好的例子。
留出一定的空间，在设计中添加“寂静的感觉”，必须是始终有意义的。否则，用户可以将其视为缺少信息。负空间的主要功能是整理网页，以吸引用户对关键对象和消息的注意。建立清晰的内容层次结构有助于UX设计人员将用户的注意力吸引到最重要的内容上。
负空间有时也称为“空白区域”或“留白区域”。所有这些术语都是可以互换的。当区域中没有元素时，您还可以在深色模式或任何其他颜色下使用此用户体验趋势。
在发生COVID-19大流行之后的在线体验将与我们习惯的在线体验不同。UX设计以相关方式反映了缺陷。为了使品牌的数字化形象更具关联性，设计师有意在版面设计中实现了一些“缺陷”。 它可以是任何东西，从手绘对象到构图或页面的不寻常元素。
通常，不完美的设计可以很好地证明品牌的身份并突出其独特性。但是，如果要应用这种UX趋势，则必须记住一个关键规则：必须保持平衡。如果你做得过多，那是行不通的。
中性风格是UI设计中其他两种大规模方法（拟态和平面设计）的组合，它们通常被认为彼此相对。拟态化是关于模仿现实世界中的物体以及我们与物体交互的方式。
几十年前，当需要使用超现实元素来创建直观且用户友好的UI时，它很流行。垃圾桶就是例子之一。另一方面，平面设计是一个更新的，简化的概念，围绕二维元素，极简主义和鲜艳的色彩。
同质性兼顾了两者的优点。它使用图形强度大的元素，阴影和渐变来使按钮和卡片类似于自然界中的对象，而不是精确地重新创建它们。中性风格不会将现实主义推到极致。取而代之的是，它努力实现浅色和微妙对比度的“柔和”外观。
在过去大约一年的时间里，同质化一直是UI / UX专业人员中讨论最多的主题之一。尽管仍然没有很多真正的数字产品的用户界面遵循这种方法，但许多设计人员对该概念感到兴奋。像Behance和Dribbble这样的专业平台已经包含了许多同态的例子。因此，我们有充分的理由相信，这一趋势最终将在2021年出现在我们的手机和笔记本电脑中。
视差效果和3D元素并不是UX设计中的全新内容。我们已经看到了如何在许多Web设计解决方案中实现它们。但是，我们仍然观察到这些用户体验趋势正在逐步普及。
首先，它的使用量显着增加。如今，3D元素和视差效果已不再是网络上奇特的事物。它们更为常见，特别是在代表着脱颖而出的时尚和电子商务品牌的网站和应用上。
另一种趋势是尝试在一个界面中结合视差效果和3D图形。使用视差滚动时，网页背景和前景元素以不同的速度移动。仅凭它就能产生深度感。通过为此添加3D对象，您可以创建一种真正的身临其境的体验，并将在用户的记忆中保留很长时间。
随着我们设备屏幕的变宽，UI / UX设计中出现了不对称趋势。通常，不对称是野兽派的一种属性，这是艺术和网页设计中与极简主义相反的一种风格。但是，如果与其他残酷的设计元素分开使用，它可以使您的网站看起来有趣，同时使它保持微妙和优雅。
不对称布局的UI / UX趋势通常与其他创造性的Web设计技术一起实现，例如破碎的网格，重叠的元素和分割的屏幕。您也可以将不对称性应用于排版。如果操作正确，它将使您的品牌信息更加引人注目和令人难忘。
但是，请务必记住，非对称设计并不意味着“随机放置的UI元素”。在布局上定位对象的不寻常方式应该引导用户的眼睛朝正确的方向前进，并帮助品牌强调重要信息。
今天，当我们在互联网上进入随机网站时，很可能会看到GIF，微型动画，动画插图或其他一些运动设计元素。动画在用户体验设计中仍然很流行，并且使用频率不断增长。
除了具有视觉吸引力之外，移动物体还可以改善用户参与度并简化导航。他们还可以为数字产品或服务注入生命，使它们更具个性。
如果要在用户界面设计中使用这种软件开发趋势，那么明智地执行此操作至关重要。漂浮在屏幕上没有特定目的的对象可能会使访问者感到困惑，从而促使他们甚至比计划的要早离开网页。动画元素也不应使用户界面不必要地复杂。它们始终必须是相关的，有价值的和平稳的。
信息体系结构是在页面上组织和构造不同内容的方式。它是以用户为中心的设计（UCD）的基本要素，旨在使用户的数字环境更加舒适。与用户研究和可用性测试一起，构建有效，有用且一致的信息体系结构是UCD流程的必不可少的阶段。
为了创建一个实用的信息体系结构，UX设计人员需要对产品的目标受众，其行为以及使用数字解决方案的原因有深入的了解。用户应该无需花费太多精力就能获得所需的结果。因此，在设计过程的线框阶段始终必须考虑用户的目标，清晰的导航和内容表示（包括盲点监视）。
我们创建此文章是为了让您在当今竞争异常激烈的数字世界中站稳脚跟。这里提到的所有UX趋势绝对可以改善几乎每个软件解决方案或网站的用户体验。即使用户期望很高，它们也可以使您的产品在视觉上对目标受众更具吸引力。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当我们设计师输出了精美的设计稿，然后附带了一个流畅的手势动画，交付给开发的时候，也期待着开发大佬搞出和自己预期一样体验流畅。但是等到实际体验的时候，却发现有一种说不出的闹心。
“这个感觉不好按...”
“划起来咋这么费劲呢？”
“怎么感觉动画怪怪的。”
当你正准备和开发一通友好探讨的时候，这个时候开发向你发起了一系列灵魂拷问：
“你这个左滑的手势，划多少才算触发？划多快才算触发？如果划了一半划回去算不算触发？如果我先点击后滑动算不算触发？松手之后的动画是多快的速度？什么速度曲线？要不要回弹效果？回弹阻尼系数是多少？”
这个时候你发现，自己提出的设计需求根本太天真了。
刚才的问题真实原因是，在做很多手势识别或者一些我们看起来日常的效果，其实是蕴含了很多复杂逻辑的。
这些复杂逻辑原本被封装在操作系统内，在系统内时可以随时调用。但是一旦脱离了操作系统，那手势的处理逻辑就会比较简陋，导致最终的体验不佳。
那这个时候也许你会想问，我们怎么会脱离操作系统呢？我们的手机不都是iOS和Android的吗？不都是操作系统吗？其实这里指的操作系统，是指操作系统的原生组件。这类组件只有在原生开发中才能被调用。
如今，很多App都使用前端语言来开发内部页面(HTML/CSS/JS)。随着Web混合开发，Flutter等跨端技术栈的出现，越来越多的团队开始拥抱这样的跨平台技术栈。在节约了开发成本的同时，随之而来的就是，在日常开发过程中，离纯原生组件越来越遥远。
在这样的背景下，研发团队的体验设计师需要自己来研究用户行为，手势、组件和动效，实现原生组件类似的复杂逻辑，才能最大程度的接近甚至超越原生组件的体验。
其实使用各个技术框架，也是有内置一些接口的。例如一些事件监听器 / 动效曲线等。这也是腾讯文档之前一直在使用的，但是会遇到一些问题。总结下来，主要有以下几个问题：
无法精确操作：用户的操作和操作反馈被自己的手指挡住，无法完成精确操作。
手势识别误触：同一热区支持了多个手势，可是用户的实操时的手势动作又没那么标准，导致用户误触其他手势。
手势触发费力：滑动费劲，需要滑动很长距离才能触发预期的动作。
动画不流畅：各个技术框架自带的动画曲线和插值器，良莠不齐，体验不统一且不够流畅。
对于原生组件，我们习以为常的系统控件和手势设计，里面蕴含的智慧远比我想象的更多。
举个简单的例子：iOS系统的首页，它可以支持横竖各个方向的滑动，并且在触发一个方向的手势之后，就无法再触发其他手势了。
但是其实有个问题，手指和平时演示的不太一样。
就是手指贴合上屏幕的时候，手指与屏幕的贴合面，并不是均匀向四周扩散的，而是向下的扩散更大一些。对于触摸中心点，在触摸的过程中，就会有向下的一个偏移。
如果直接识别，这个偏移直接被识别为向下滑动，那就会无法触发左右滑动的手势。
例如在iOS内的手势识别，有一个专门的接口来做识别：PanGestureRecognizer，这个接口会在10px内先判定手指移动的方向和距离，再对具体触发的手势来做定义。例如下图，虽然刚开始手指位置有些许下移，但是最终还是可以左滑判定成功。
所以你会发现，如果在iOS桌面上轻微的向左右滑动(10pt内)，桌面是不会有任何响应的。就是因为在10pt内，系统还无法确认手势的方向。
另外，系统还自带了很多手势反馈操作，包括回弹效果，甩出效果。里面的小逻辑设计需要非常精准。并且对于滑动的手势还带了回弹效果，看起来非常爽。
腾讯文档是基于Web / Flutter的应用，并且接管了很多原生系统的能力，包括排版能力、光标选区能力，拖动能力等。因此，很多基于Native开发能很简单解决的问题，在Web下就要重新打磨一套我们日常习以为常却逻辑复杂的组件。
由于腾讯文档是基于Web的的应用，接管了很多原生系统的能力，所以不能使用系统的Gesture Recognizer，也不能使用系统的选区光标能力。
如果是简单的使用前端的操作监听器，那会要求用户使用极其标准的手势操作才能触发，否则就会触发失败。因此需要设计更精准且适应性的规则，来包容用户不那么标准的实操手势。需要帮助用户在粗糙的实操手势下，猜测用户原图，并精准完成的操作。
可能你以为手势操作并不常用，其实并不是的。
一个单击，一个双击，其实本质上都是手势。
不过，很多人可能会认为，按说这些操作都有原生的监听器，不需要再去定义。但是其实如果不做一些进阶定义，就会出现操作不灵敏的问题。例如下面这个问题。
在很多安卓手机上，或者是我们自己的腾讯文档里，时常遇到一个问题：就是原本以为双击文本区域可以选中文字，可是却发现这个双击成了一个玄学事件。双击有时生效而有时不生效。
理想的双击大概是这样的，是需要2次有效的Tap事件：
这个Bug让我们来定位一下。让我们还原一下事情的经过：
哦！原来是因为双击的其中一稍微偏移了一下，拖动到了光标，导致系统判定是一次Tap一次Drag的行为，这样就没有办法触发双击行为了。
解决方法也很简单。把10px偏移距离内的滑动行为都判定为点击行为就可以了。从这里看，我们其实需要做的是，规范“点击”这个手势的定义。
因为原来的系统自带定义，容易造成误操作，而且手指贴上屏幕的时候，都会产生轻微位移，或者一不小心滑动了页面，或者不小心拖动了光标，导致手势识别的不灵敏。
原定义：“点击并在500ms内在原处松手”。
需重新定义为：“点击并在在500ms内，在10px以内处松手”。
另外，文档移动端也定义了一系列更进阶的手势的操作，在这样对手势的进阶定义后，操作可以被更精准和智能的判断。这些定义被写在了设计规范中，包括了单击 / 双击 / 长按 / 拖拽
腾讯文档的整个文本编辑区域都是使用Canvas实现的，由前端自主控制渲染。因此，选区光标就无法直接使用系统能力，需要设计师来设计一套选区光标，并且支持系统的各种选区光标的手势。
由于腾讯文档的光标选区是非常基础基础的编辑组件。这个组件在一般的产品中，都是直接复用的系统组件，但是在腾讯文档中，就需要重新去考虑光标组件。
首先有个需求，光标是可以在文本中快速拖动的。
经常会遇到拖动。无论是光标拖动，还是长按选中，我们都希望能清楚的看到光标的位置，所以我们在用户拖动光标和选区的时候，使被拖动的组件放大1.5倍，使用户可以看到拖动效果。
这就够了吗？不够的。
如果用户想要精准的控制光标，首先要让用户完整的看到光标。用户在拖动光标的时候，手指经常会不自觉的向下移动。这是为了让自己看清光标，这个时候，我们不应该把这个移动当做是把光标向下移动一行，光标本身不应该跟随向下，应该只在同一行，并且只响应左右移动。
但是当我向下拖更多距离的时候，光标就应该一直保持在手的上方，以确保用户可以精确操作。
同样，我们定义了长按后可以拖动选择的手势。在拖动的过程中，允许用户向下偏移一定的区域，来看清选区的具体边界位置。
手机端的光标选区，一个我们日常习以为常的光标，里面竟然有那么多小细节在里面，才能让光标变得好用。
当一个滑动手势被触发时，我应该如何判断这个手势已经被触发了呢？这个判断并非简单的横划竖划，而是针对的不同的场景，去做特殊的处理的。
案例1：向下滑动手势
例如说，一个非常简单的手势，半屏向下滑动关闭。我们通常来说我们的日常体验，会是一个对距离的判断，当手指拖动容器超过一定的距离，然后松手，就可以触发手势。
但是仅仅判断距离是不够的。因为手势是对现实世界的映射。很多时候用户希望滑动很短的距离，把东西“甩”出去。
如果仅仅判断距离，那就很难“甩”出去。这时候就还需要判定用户手指在离屏时的速度了。最后能达成一个比较轻松就能触发手势的结果。
案例2：左右切换相机
这是腾讯文档的文档扫描页面。上半屏是大面积的取景画面，底部是文档类型的选择。
因为取景页面可以点击对焦和测光，因此轻微的滑动不应该导致整个取景页面或者底部Tab的滑动，应当是当整个页面检测到一个比较大的滑动动作之后，才自动移动切换。
但是如果需要离手才能触发，如果用户划动的速度比较慢，整个体验也会随之变得过于拖沓。所以这里还加了一条逻辑：当手指滑动速度的加速度急剧减小时，不用松手也可以触发手势。这样的体验感会觉得流畅很多。
在腾讯文档中，点击、滑动、悬浮、长按等手势操作贯穿用户的使用过程，动画效果是所有交互操作的视觉反馈，也许它没有那么的「高逼格」，但它却是这台精密仪器运转不可缺少的“润滑剂”，流畅愉悦的动效能够让体验更美好。
但是由于腾讯文档起初是基于web混合开发，后面又加入了Flutter框架，这就导致多个平台、框架的动效逻辑混在一起，在这个背景下，设计师们就需要从多方面重新梳理并定义动画的基础规则。
自然流畅是腾讯文档内所有动效运行的基础原则。
由于腾讯文档是基于Web、flutter等多框架混合开发的应用，动画曲线又都是基于各自框架自带的贝塞尔曲线（cubic-bezier），这就经常导致一些同类型的手势操作，最后所呈现的动画效果却相差很多。并且原生的动画曲线，在实际使用上并没有达到很好的效果，只是能够比没有动画要强上一些。因此，确定一套统一、自然并且适合腾讯文档的动画曲线，是设计师优先要解决的问题。
为此我们根据动画使用的场景，定义了四种标准曲线。同时输出给开发同学，作为标准可调用的曲线。
缓动曲线应用的场景最为广泛，也是腾讯文档的默认曲线。相对于传统web端或者flutter框架内的默认曲线，腾讯文档的缓动曲线开始时会比较迅速，这样能给用户及时反馈、高效运行的感受；在运动快结束的阶段，为了避免快速反馈带来急躁的负面感受，曲线会更加平缓，进而使正在运动的元素吸引用户的注意力，并让用户能够有一定的思考时间，保证动画的合理性。
即减速曲线。运动元素在开始阶段时位移变化会很大，但是后面会越来越小。缓出曲线前期快速运动，不需要过多让用户留意，在结束的时候逐渐减慢速度，让用户关注到其新的状态，用户就可以提前切入到定位寻找的阶段，等动画停止后就可以立即进行操作。这种类型的曲线通常是用在元素进入界面时使用。
弹性曲线是一种基于阻尼弹性振荡的原理实现的复杂曲线，阻尼比决定了曲线具体动画感受，根绝阻尼比的不同，弹性曲线可以分为三种，分别是欠阻尼运动、临界阻尼运动及过阻尼运动。在腾讯文档中，通常只会使用到欠阻尼运动及临界阻尼运动。
弹性曲线却并不适合在所有的使用场景中，因为这种运动一般情况会需要相对多一些的时间来完成整个运动过程，让整个过程变得过于拖沓。同时过于活泼的弹性动画也会过分的吸引用户注意力，打断主进程的操作，影响效率。
时长是元素移动所需的时间，在创建自然流畅的动画中起着重要作用。如果动画太慢，会使用户感到卡顿和厌烦；但是如果速度太快，就会给人紧张急迫的感觉。因此动画的持续时间应该给与用户充分的反应时间，同时又不用过久等待为标准。
在移动端上，我们设定动画的持续时间在300-400ms。而在web端上，我们设定动画的持续时间在200-300ms内。具体的运动时长视具体动画而定，时长并不一成不变。
曲线是动效的灵魂，有时候你觉得平凡的动画，或许只需要简单地拨动那条运动曲线，就可以让这个动画瞬间变得充满灵气。尽管曲线可以解决大部分动效问题，但在动画的实际落地中，还是有一些问题，是它无法解决的。这就会涉及到动画更底层的渲染及逻辑。比如说在web端，前端动画卡顿与否其实是和动画本身实现性能有关系的，浏览器的屏幕刷新率都可能被代码拖慢。这也是腾讯文档在初期并没有在web端增加太多动画的原因，过多的动画效果其实意味着需要更多的性能资源倾斜到动画上。
在动画上除了希望提供自然流畅的积极体验，我们也希望继续深入，“让工具褪去冷冰的外壳，走进与智能隔空对话的新世界”。让体验更有情感，让用户更愉悦。
在待办事项上，优化前每当用户点击完成一项事项时，完成动画仅仅是机械的从未完成向完成图标的替换，反馈效果非常“高效”的完成了它的任务，但是这样就足够了么？不一定，当一项事项被列为待办时，就证明这件事对于用户来说是重要的。在现实中，当重要的事情完成时，我们都是欢欣的，就像心里在放烟花，完成待办时候的动画理应如此，让用户在完成的那一刻体验到“烟花”的绽放。
但是总有一些产品，或者是通用性的考虑，或者是一些历史原因，或者是一些成本考量，走上了非原生开发的路，这样的产品在未经打磨的情况下直接一把梭搞出来，的确会显得卡顿，或者难用。
这其中不仅需要工程师一点一滴的性能优化，这也对体验设计师对细节的把控提出了更高的要求。只有对用户的行为处处关照，才能无限接近最极致的体验。
文章来源：站酷 作者：腾讯ISUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近负责的新项目快上线了（感觉我好像一直在做 0-1），给大家总结了5个一定会遇到的新项目盲区及最新的解法，希望能帮助大家在交付开发前就顺利完成设计输出。
2020 年 4 月后，我们在设计 iOS 登录界面的时候都知道必须加上苹果官方强行要求的 Apple 账户登录按钮，但关于这个按钮的设计规范其实有比较硬性的规定，没有注意的话到了开发还原的时候就容易踩坑。
在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”，手机登录以及其他的第三方登录都会以更弱一点的视觉方式呈现。
苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的，其中就包含将其弱化为一个圆形的图标按钮，只是图标与圆形按钮的大小比例是官方固定的比例（这个大家直接下载官方提供的图标，它是自带留白的区域的，保持图标与高宽一致就符合要求了）。
而国外的 iOS 登录设计中通常没有那么多的第三方登录方式并存，主要的“Facebook”与手机登录通常会与 Apple 账户登录按钮同一级出现在界面中。
这个时候需要特别注意的是，苹果官方对于这种大按钮的限制主要在于 3 个部分：
剩下的按钮样式，比如颜色和描边也非常有限，只可以使用白色填充黑色描边与纯黑色底这 2 种。
想了解更多具体内容，可以参考官方贴：https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
还记的早几年做安卓项目的时候上架应用商店的启动图标输出还是和 iOS 差异不大的，基本就是尺寸换换。这次输出启动图标，被安卓的开发大大告知，安卓可以出这种带动效效果的启动图标了，它的原理和效果，如下图：
实现这个效果的设计配合输出也很简单，只需要整理一下的具体启动图标输出就可以：
1. 启动图标（前景，不带背景的）-108dp（324px）
当然以上仅针对纯色背景，可以与 logo 主体轻易分隔的启动图标。如果是混为一体的话就需要调整输出方式为以下：
想了解更多具体内容的铁汁，戳底下官方传送门：https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
这次新项目又遇到了开发中改稿的问题，大部分都因为全屏的背景图切图大小问题。
个别全屏视觉的界面，比如闪屏、登录页、音视频语音等等，我们通常设计时不考虑切图的大小问题就会比较放飞去设计。
但实际情况是一张全屏的花色 3 倍 png 切图基本都在 2M 左右，就算把压缩率提到 80%+（市面上大部分压缩软件的压缩率都很有限，比如大家常用的 tinypng、pp 鸭等），就算你重复压缩，也有至少 200 多 KB，远远超出开发 100k 以内的切图大小限制。
所以不得不要求我们在输出格式的时候抛弃 png 格式，启用 JPG。
不过实际设计时候我们可能仍然会遇到不能用 JPG，必须用 PNG 格式的情况（透明度蒙层），那么建议大家可以尝试以下 2 个小技巧：
最后不想屈服于样式限制的铁汁，一定记得提前输出格式大小康康会不会超标严重（尽量控制在 100k 以内），不然无法落地再好看也没有用咯。
目前关于移动端界面里个别小动效的导出比较主流的几种格式是：Gif、逐帧图、Lottie（Jason）、Webp、Apng。
Gif、逐帧、包括前几年流行的 Lottie 大家应该都比较熟悉了，这里稍微科普 2 个陌生一点的格式：
目前我觉得性价比最高的就是 webp，它的优势主要在于：
唯一的 2 个问题在于：
我度娘过一些导出 webp 的方式都不是很好用，问了我司的动效设计师，推荐一个比较简单靠谱的方式分享给大家：
1. 先从 AE 导出逐帧图（记得需要循环的动效做好循环）
不知道如何到逐帧图的看这里：渲染→渲染设置→格式→选择“PNG”序列→导出即可
2.下载 isparta
3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 格式（可选）
设计交付的协同平台现在市面上很多，很多大厂也有自己内部的协同平台来承载设计交付，俺们猪厂用的叫 dbox（非常滴不好用），在强推之下开始申请经费改用 Figma 了。之前为了更换协同平台，把交付的协同平台都做了一番调研，这里给大家直接看表格吧。
看完图大家就会发现除了 Figma 大家的使用情况不会差很多，差的主要还是钱。总的来说的建议就是，如果已经从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给开发搞定切图标注以及文件存档这2件事儿了。
如果还在用 sketch 和 XD 的铁汁，交付型的协同平台我个人比较推荐 Zeplin，虽然有的人会说它服务器在国外很卡，我觉得其实还好吧，同时 Zeplin 近几年还解决了 Win 系统适配的问题。
然后最后小吐槽下腾讯的 Xshow。一开始我觉得它是最香的，因为高清度、流畅度到美感几乎都比较完美。一直到我发现了它居然是个完全开放的交付协作平台，也就是别人知道你的账户 ID 之后就可以搜到你并看到你的所有项目文件，瞬间安全系数降为 0。作为一个明显对标企业级的协作平台这么疯狂的植入社交功能，到底是企鹅的社交基因太强大还是怎么肥四？
文章来源：优设网 作者：Nana的设计锦囊
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
国内互联网近几年发展迅速，在很多方面都超过了一些其他国家互联网的发展阶段。随着国内互联网产品竞争日趋激烈，很多企业都把目光投向了用户量庞大的海外市场。而疫情对于全球经济的影响更是加速了海外市场的数字化进程。据 Sensor Tower 数据显示，2020年Q1全球移动互联网应用下载量达336亿次，同比增长了20.3%。
产品出海的第一道屏障就是语言。但若想打造一款能够适应海外市场的产品，只完成不同语种的翻译是远远不够的。在产品设计的过程中，我们需要考虑两个方面：国际化与本土化。
国际化+本地化的策略，也就是“glocal—global+local”，指的是结合国际统一和地区差异。这种策略在统一的前提下，通过灵活配置保障地区的个性化体验，既能满足统一维护提升产品效率，也能保障当地用户的特殊诉求，是一种性价比很高的设计方案。
产品设计的国际化
产品的国际化，即全球化。国际化的通用设计能够为产品打造一个全球统一的形象与内核。
Chrome的不同地区首页功能与样式基本一致
一套通用的设计系统和设计规范，既可以帮助我们在产品的国际化设计中 树立产品调性，又可以保证操作的 一致性，同时提升设计的 高效性。阿里旗下面向东南亚市场的购物平台Lazada在开发之初，通过使用Fusion Design的设计系统，大大节省了设计的时间。在如此复杂的电商业务场景之下，整套产品的设计最终仅3靠个设计师就完成了。
设计系统对产品研发成本的影响
除此之外，一致的内核也能够帮助企业在全球范围内建立起统一的品牌形象，增强 品牌的识别度与知名度。
产品设计的本土化
想要让产品在某一个市场上站稳脚跟，对于本土化的思考是必不可少的。本土化的核心是 因地制宜，根据地区差异相应调整产品策略。
UC浏览器在不同地区的首页布局
为什么说本土化对于产品的出海非常重要？其原因并不难理解。Charles Eames说过，“Recognizing the need is the primary condition for design.” 任何设计的本质都脱离不开对需求和问题本身的理解。好的设计是在对需求、动机、心理、环境等相关因素有了充分了解之后所产出的解决方案。
针对海外设计研究的思维框架
在考虑产品的本土化时，我们需要关注到用户的需求是什么、是否仍然成立，用户的行为模式是什么样的，以及整个外在社会物质、精神环境等方面的状况。蚂蚁金服团队通过海外本土化设计实践，总结出了一套“环境-人-需求“的研究框架，列出了可以去调研的多个方面。
蚂蚁金服-“环境-人-需求”出海产品设计研究框架（做了小部分修改）
需求（价值）
首先，我们要做的第一步判断就是原来的 用户需求是否成立。产品在原市场想要解决的问题，是否在新的市场仍然存在，即我们的产品是否 有用？这个问题的答案决定了原先的产品是否对于该市场的用户是有 价值的。如果有价值，那么就可以深入探索如何让用户用起来；如果没有价值，那么就需要进一步判断是否要继续开拓这个市场，以及如果继续开拓这个市场，在原有的产品形态上，我们能否通过改造的手段让它符合在新市场的用户群中挖掘出来的、不一样的 新价值？达到了“有用”的标准，我们则需要开始考虑“ 好用”的问题。只有满足“好用”这一条件，产品才能够被用户用起来、从而真正在新市场落地。在实现“好用”的过程中，我们可以关注以下几个层面的影响因素：
生活形态、价值观
生活环境与社会环境会塑造当地用户的生活形态与习惯。下图分别是日本和北美地区的新闻资讯类App。同样是推送新闻资讯，两者在表现形式上却大相径庭。可以看出日本的新闻App布局紧凑、信息量大、页面坪效很高；而北美的新闻App则更注重突出重点内容，信息密度相对来说并不高。
日本-新闻资讯类App
北美-新闻资讯类App
这种差异的背后，其实是两地上班族生活形态的差异。日本城市小、人口密度大，上班族通勤大多会选择地铁。而北美地区面积大，大部分人会驾车上班。驾车的人双手需要长时间控制方向盘，同时开车也需要持续注意路况，只能在间隙中查看新闻内容；而乘坐地铁的人双手更加自由，也有较长的通勤时间需要消磨，故可以接受更多的信息，也能够接受更繁琐的操作。
北美（左）和日本（右）各自的生活形态
有时候，某个地区的用户长期习惯的操作模式，会与主流的操作模式有所差异。设计师junu在个人博客中讲述了他为Melon（一个韩国主流音乐播放器）进行体验优化的一段经历。他发现Melon当时的播放操作逻辑比较冗长，用户需要先点选列表中的多首乐曲，再点击底下的播放键，此时Melon会将用户所选歌曲自动生成一个列表并进行播放。这和当时Spotify等音乐播放器“点击即播放”的主流交互逻辑相比，要更复杂和麻烦，尤其是在用户只是想要立即听到某一首歌曲的时候。因此，junu 提议引入“点击=播放”的操作方式。但当他们设计出了这样的优化方案后，却发现在测试过程中老用户们对这样的交互方式感到陌生和沮丧。基于用户反馈，最终，他们采取了一个折中的方案，既保留了原先的复选框作为多选操作的区域，让用户仍然能够选择乐曲生成列表并且播放；同时又引入了点击单曲直接播放的操作。相比第一版优化方案，用户的接受程度有了明显提升。
Melon播放器的点选操作逻辑
设备环境
10年前，高端大屏幕手机在东南亚和非洲市场普及率并不高，因此产品出海时需要考虑当地常见的设备是什么，并作出相应的适配。近几年，随着市场经济的发展以及中国手机的成功出海，即使是东南亚和非州的发展中国家，高端移动设备的普及率也已经很高，这为设计师在考虑通用性的过程中减轻了不少负担。不过，在为每个地区的用户做产品设计时，仍然需要调研清楚当地设备的使用情况，比如什么样设备更流行、普及率更高；如果某一地区的设备不够发达，那么设计的操作也需要考虑到设备不同所造成的差异。
业态/监管
在不同的国家或者地区，各个行业的标准与制度也可能存在很大区别。例如财会软件行业中，在北美和英国占据了重要市场份额的Quickbooks、Xero等公司，却无法成功打入欧洲一些国家的市场。因为财会软件本身的功能、流程设计与当地的财务制度是紧密相关的。在这样的情况下，欧洲本土的企业显然会对当地的政策和制度更加熟悉，也更容易设计出符合当地企业与会计需求的财会产品。
2015年，Airbnb进入中国市场。在最初的市场调研和用户调研之后，针对本土化，他们所迈出的第一步就是根据中国的业态环境对产品的前10%和后10%做了改造。其中，产品的前10%指的是登录这一类用户开始使用产品所需要进行的步骤，而后10%指的则是支付等用户完成一个完整流程所需要进行的操作。因为当用户进入到产品主要链路中时，其功能流程基本相通（搜索地点、挑选房间、浏览信息等），不需要做过多的改变；但产品的前10%和后10%则决定了用户能不能把产品用起来并不遇到障碍。因此，针对登录的部分，爱彼迎将原先的Facebook等第三方登录替换成了微信与微博账号的登录；而在支付的部分，爱彼迎引入了支付宝与微信支付的方式，打破了中国本土用户进入产品和完成订单的壁垒。
Airbnb产品中国本土化的“前10%与后10%”策略
社会经济
社会经济环境的不同代表着社会阶层状况的不同，它会影响人们在消费时的行为方式。蚂蚁金服在调研菲律宾市场时发现，当地拥有银行账户的人口仅占了总人口的34%，同期中国拥有银行账户的人口则占了总人口的85%。而这34%的人基本上都是当地的富人及中产阶层。在贫富分化严重的菲律宾，大部分普通民众是没有银行账户的。这一人口学特征很大程度影响了蚂蚁金服电子钱包业务对菲律宾目标用户的描绘，继而影响了产品各个层面的设计。
文化/宗教
在各个文化/宗教里存在着不同的意象，也会有各自的表达方式与禁忌等等。在某个文化下表示友好的行为，在另一种文化下可能是一种冒犯。这些都是在设计时需要去注意的。除此之外，在不同的文化/宗教语境下，人们会有不同的行为模式与价值取向，这里我们会引入一个模型——霍夫斯泰德文化维度模式，来对这一问题进行更详细的解读。
霍夫斯泰德文化维度模式（Hofstede’s Model of Cultural Dimensions）
霍夫斯泰德文化维度模式是荷兰心理学家吉尔特·霍夫斯泰德提出的用来衡量不同国家文化差异的一个理论框架。它可以帮助我们对于不同文化群体的价值观有一个较为全面的了解，从而更明白该文化群体中人们的行为倾向。此理论总结了衡量各文化价值观的六个维度：
使用他们官方网站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查询到各个国家的文化维度指数，也可以选择不同的国家进行对比。
在为特定地区的用户设计产品时，我们可以以从这些维度去解读他们的行为倾向，并据此提出相应的解决方案或者设计方案。滴滴团队在开拓墨西哥市场时，根据墨西哥的文化维度指数在产品的本土化上制定了从功能到外观等不同层面上的设计策略。
墨西哥地区的文化特征指数
滴滴墨西哥的本土化设计策略
这类源于文化差异的设计差异并不少见。在淘宝等国内的电商平台上，“按照销量排序”是一个被高频使用的功能，消费者们认为什么产品买的人多，什么产品就更好。这样的观念也催生了一大批店家刷单的行为。但当在北美的电商平台亚马逊上，我们会发现并没有按销量排序这个选项。因为美国的用户相对来说个人主义更强、更相信自己的判断和选择，他们不认为他人推荐的就一定是好的。
国内外电商平台对比
在企业即时通讯工具行业，国内的主流产品，如企业微信、钉钉等，都选择了蓝色这一比较沉稳的颜色作为主色调，在产品功能的形态上也偏向于严肃。而海外的办公产品Slack，视觉色彩更加丰富；整体的产品定位也更加活泼欢乐，常常会有“不严肃”的表达，比如在界面多处都使用了emoji。这样的产品形态差异，其背后是两种文化在放纵（享乐）/克制（严肃）这一维度上的差异。
企业微信与slack的产品风格对比
内容本土化
除了功能框架上的设计需要考虑本土化外，产品中运营内容的本土化也是不可轻视的一环。Spotify Design 团队在《 Designing for Belonging: Why Image Localization Matters 》一文中，记录了他们对于内容本地化的一些经验和思考。同样，内容的翻译仅仅是本土化的第一步。在地区之间区别不大时，完成内容的翻译便能够满足其他地区的需求。如下图中 “浴室歌单（ Songs to sing in the shower）”的播放列表，列表上的文案一经翻译，就能够推送给德国、波兰、以色列、意大利等一众国家的用户。但当内容的阅读群体有着更显著的差异时，仅仅翻译是不够的。在看到这张图片的时候，其他人种比如亚洲人可能就不会产生很强的代入感，也会缺少对产品的一种归属感（这个产品并不是为”我“设计的）。
Spotify "Songs to sing in the shower" 歌单
下图展示的是Spotify另一个歌单—— “快乐时光（ Happy Hits)" 的封面在不同国家的呈现形式。可以看到，面对文化差异更大的群体时，Spotify在保持了统一的样式风格的基础上，针对每一个国家和地区都展示了当地人在他们的生活中“快乐”的样子。这种本地化内容更加贴近当地用户，也能够让用户产生更强的连结感与共感。
Spotify "Happy Hits" 歌单
结语
回到那句话 —— ”Recognizing the need is the primary condition for design.“ 产品的出海其实只是我们在设计中会遇到的一种场景，在这个特定场景下我们的设计思考与其他场景下是互通的。如果仅仅完成了翻译这一步，那我们就忽视了在新市场下另一群用户的特征、需求、使用情景、操作习惯等关键信息。无论是不是在为产品的出海而设计，我们始终应该保持对用户的好奇，让最终的设计实现我们期望达成的目标。
文章来源：UI中国 作者：酷家乐用户体验设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
迪士尼的12条动画基本原则是传统动画中最有价值的原理之一。它出自Johnston和Frank的书《生命的幻觉》。虽然这些原理最初是为传统动画（例如角色动画）设计的，但在本文中，我们将探讨如何将其中的一些原理应用于UI动效上。
在动画中，挤压和拉伸表示对象的重力，质量，弹性。当场景中的弹球撞击地面时会被挤压。在UI界面中，挤压和拉伸非常适合与按钮相结合。
例如，按钮的按下状态为挤压。通过控制挤压和拉伸，我们可以轻松地定义按钮的状态。除此之外，它还可以应用于界面上的所有的交互式元素。
应用于按钮上的挤压和拉伸
应用于侧边栏的挤压和拉伸
预备动作为用户展示了即将发生的事情。就像奔跑开始时，我们的身体会先向后倾，然后才是加速跑，这就是预备动作。在UI动效中，悬停状态就是很好的例子。每当我们将鼠标悬停在元素上时，某些元素都会做出反应，表明它是可单击的，并且当您单击它时会发生某些事情。
悬停互动通常会告诉我们接下来有一个动作发生
涉及水平滚动的界面通常会显示下一个元素的一部分，该元素会出现在滚动/滑动中
在传统动画中，时间由绘制的帧动画来控制。帧数越多，动画将越流畅和越慢。时间还可以表现对象的情绪和性格。
时间也是所有UI动效最基本的属性。定时和缓动功能在动效设计中起着重要的作用。漫长的过渡会使您的用户等待太久。另一方面，如果动画太快，用户可能会错过一些东西。通常，大多数界面动画在200到600毫秒之间。诸如悬停和反馈之类的交互约为300毫秒，而诸如过渡之类的复杂动作约为500毫秒。您可以参考Material Design，其中对每种类型的动画的持续时间都有很好的解释。
右侧的过渡会使用户等待太久
现实世界中的大多数对象都遵循缓动效果。换句话说，物体的运动并不突然。就像自由下落的物体会在运动过程中逐渐加速。
向UI元素添加缓动效果可以使它们看起来更生动自然。制定时间节奏和缓动标准可以让你建立一个高效的动效库。
右侧添加了缓动效果，所以看起来更自然
转场，它包括如何将对象放置在场景中，如何以及何时进行每个动画等等。它将用户的注意力引向场景中最重要的对象。
对于UI界面，转场决定了元素的放置位置以及在发生交互时如何对元素进行排版。它将用户的注意力引向最关键的元素。
这是一个音乐类的APP，转场动画将歌曲封面和名称放大置顶，并让“喜欢”按钮单独出现，让用户一目了然
从高处抛出的球遵循了抛物线的路径——弧线会让事物更自然。在UI界面中，使用弧线运动会比使用直线运动更加的自然，要突出元素运动的路径时可以使用弧线。
弧线运动更加生动自然
在动画中，辅助动画用于强调场景中发生主要动作。例如，角色的头发在行走时的微妙移动，或者是面部表情的微妙变化。
在UI界面中，辅助动画可以使主要动作更加突出，这在向用户反馈信息时非常有帮助，所有微交互的作用均基于此原理。
辅助的例子动画让点赞效果更饱满
场景中的重要角色必须具有吸引力，通常会将某些动作进行夸大以引起更多关注。
在UI界面中，重要的交互作用也需要更夸张一些，以引起用户的注意。下图的设计就是一个很好的例子，悬浮的按钮在静态状态很显眼，因为它的颜色更重，并且悬浮在所有元素之上。当发生任何交互时，夸张的动画让它可以占据整个屏幕，使其吸引力更上一层楼。
占满全屏的夸张动画
夸张的支付按钮更吸引人的眼球
试想，如果你坐在三轮车上，当车前进的时，身体会短暂后仰，然后也会随之前进，我们称之为延时。突然刹车时，又会由于惯性运动身体向前倾然后回来 。
在UI界面中，同样可以在元素静止之前添加惯性运动，以使它们感觉更自然。不同元素直接也可以添加延时效果，让动效更细腻~
窗口放大时添加了惯性效果
图像和文本添加了短暂的延时效果
文章来源：UI中国 作者：设计师深海
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：在一个团队里，成员之间“协同合作”是非常有必要的，比如一些岗位没办法完全理解设计师的想法，多沟通可以避免一些不必要的摩擦；在出现问题时，现在自己的环节找找问题，再进行沟通；本文作者分享了关于精准还原设计稿的环节，我们一起来看一下。
UI设计师作为展示产品形态的执行层，产品上线前走查视觉与交互还原是必经环节。
设计师可能都遇到过一个问题，作图时连一像素的分割线都纠结好几次，但是开发完的效果却不尽人意，UI验收不通过；然后前端这边委屈的想拿出藏在键盘下的四十米大刀找你来血拼。
我们经常会听到身边的设计师与开发哥的一些对话，关于对齐、大小、间距等设计还原问题经常会讨论很久；甚至有时会觉得，几个像素的间距是不是有必要这么纠结？
「还原」是指事物恢复到原来的状况或形状，互联网中的「设计还原」是说开发后实际界面和设计稿效果有偏差，进行设计校对。
一直以来，设计验收都不太受重视：
不同的项目类型还原度也不同：用户产品>B端产品>后台；对于用户产品最好是能做到像素级还原。
在这个快速发展、迭代、更新的时代，互联网产品的用户体验重视度越来越高，而其中的产品设计还原也成为了工作流中重要的一环。
我相信每一名UI设计师，心里应该都有一个前端能100%还原设计稿的梦想，毕竟那是我们艰苦奋斗的劳动成果。
而视觉还原的高低与否，则直接取决于设计——开发——测试这些环节的协作质量；不仅仅影响上线产品的用户体验，还影响着作为产品设计最后一环的工作质量。
经过走访UI/UX设计师、前端工程师和测试工程师的还原设计图的工作场景。
深究原因后，线上效果的失真率其实涉及到设计、前端开发、测试这三个环节，分析造成这种现象出现的原因大概有以下几点：
了解开发依据哪些规则还原设计稿，前期的准备工作是重中之重，设定好每一个细节规则，后期落地还原时才会将页面的失真率降到最低。
UI 设计中，设计规范是设计还原一个关键步骤；一个好的规范应该是高效的、简单易懂的。
设计规范通常可以把颜色、字体、组件等内容制定成规范，不仅仅保证视觉的一致性，也极大方便样式和组件的复用，后期的维护和开发；在规范的辅助下，开发在搭建全局共用控件时规则更加清晰明了，如按钮、行间距、字体大小、色值等等。
3.1.1 色彩规范
颜色是设计中最重要的元素，颜色的运用与搭配决定设计的品质感；在 UI 设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。
3.1.2 字体规范
文字是APP主要信息的表现，尤其是新闻阅读、社区APP等制定标准的设计规范和良好的排版方式，用户使用APP也觉得毫无疲劳感，这一点很重要。
不同的字体气质不一样，并且不同场景下带给人的感受也不一样；所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明；主要规范标准字的大小，标准字要注意跟上文的标准色进行组合，突出APP重要的信息和弱化次要的信息。
3.1.3 图标规范
在 UI 界面中，具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块，产品的每个页面中都有可能存在图标。
设计规范中，图标一般按照用途分为两类：应用图标、功能图标。
图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。
应用图标：各种应用程序的识别标志，在应用商店里下载的一些应用程序的标志。
功能图标：规范中最好标明图标格式与使用方式。比如 Web 设计，图片可以使用 iconfont 管理，可生成代码交付给前端开发；如果是原生 APP，那么需要标注图标导出格式与尺寸。
3.1.4 图片规范
图片作为界面设计的重要组成部分，需要标明尺寸规范，分为不同用途的种类。
3.1.5 控件规范
控件是指产品界面中可操作的部件，与组件是有一些区别的：控件翻译为 Control，组件翻译为 Component。
通俗的解释说法就是组件为多个元素组合而成，控件为单一元素组合而成。
常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。
3.1.5.1 按钮
按钮有 5 个状态：正常、点击、悬停、加载、禁用。
需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值；如果是图标按钮的话，除了上述参数值以外，还需要标注 icon 和按钮文本之间的间距，icon 图标的大小。
3.1.5.2 输入框
用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。
3.1.5.3 选择
选择可分为单选与多选，并且也有五种不同状态：未选择、已选中、未选悬停、已选失效、未选失效项，规范中需展示出所有效果状态。
3.1.5.4 进度条
用于向用户展示步骤的步数以及当前所处的进程。
3.1.6 缺省页
常用的 UI 组件（Component）：表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。
如果UI忽略规范，前端在不知道有可复用组件的情况下，很可能每一次都要手动书写代码；写的代码越多，遗漏掉细节和犯错的可能性越大，导致效率降低。
最关键的是——对于今后的迭代，前端又得一个页面一个页面修改。
3.2.1 组件的好处
统一性：
高效性：
延续性：
3.2.2 组件化的特点
3.2.3 组件化分类
我们根据当下现有的业务场景和对往后一段时期的业务发展方向进行规划，将组件库的组件类型分为通用组件和业务组件；一般业务组件库是不对外的，所以在Ant Design官网只能看到通用组件部分。
3.2.3.1 通用组件
指适用范围广，扩大频次高，可重复使用多个业务且不包含业务逻辑。某些导航栏，按钮，吐司，弹窗等。我们将通用组件细分为五个子类别：基础组件，导航，数据录入，数据展示，操作反馈。
2.3.2 业务组件
这类组件对比通用组件而言最大的特点就是包含了一系列业务属性，跟产品功能有重叠的关联性，因此影响到适用范围可能仅限于于1〜2个业务系统或特殊场景，且复使用频次不高。毕竟使用场景特殊也有限，放出参考意义不大。
2.3.3 组件化搭建流程场景
组件化的搭建在两种场景下进行：
1）产品立项前就开始组件化，在产品0到1之前，拥有一套组件和设计规范。设计师可以从以前项目的组件库和设计规范直接套用并修改，这样项目前期设计做起来更加方便且省时省力少挖坑。
2）产品经历过0到1后，产品趋于成熟，这个时候开始做组件化。组件化搭建最多会有六个步骤，分别为：梳理类目、场景走查、问题分析、方案设计、生成插件库、验证开发。
具体的组件化设计升级流程我总结成了下图：
当团队搭建完成组件化之后，接下来就是成员间的使用，这一过程有业务需求产生组件模板、组件模版形成页面、页面形成页面流程和页面流程形成用户体验。
组件库重建之初无法一应俱全，是需要后续设计师不断的维护与迭代的。
关于设计输出，现在很多像蓝湖、zeplin、Pxcooker这种标注软件把设计师从手动标注解救出来，往往把视觉稿在蓝湖一扔就完事，前端开发完界面视觉还原度还是不高。
因为标注软件只能负责生成元素的尺寸、样式，遇到复杂样式即使你反复衡量的一些像素，开发还是会漏掉——这样很有可能出现视觉灾难。
所以，一些复杂而又关键的页面我建议可以贴心的做些手动标注，主动告诉开发重要性和注意点。
我们现在工作中会有两种标注情景：
3.3.1 运营标注
因为很多数据是后台传输到前端，有图片、有文字，每个内容都需要给运营设置一个上传标准。
3.3.2 开发标注
开发标注是从设计稿落地成代码的主要参考，除了蓝湖提供的标注，我们还需要写一些重要部分设计说明，例如：模块区分、局部特殊设计（该内容根据自身产品而确定）。
3.3.2.1 常规手动标注
3.3.2.2 特殊模块/页面划分说明
复杂的表单设计，是很具有代表性的复杂页面，根据页面的布局进行原型化示例，帮助前端更好的搭建代码框架。
关于切图，切图之前应跟开发确定好输出的格式和尺寸，确定应该用 SVG，一倍图或是两倍图，SVG体量小渲染质量好，单色使时还能替换颜色；PNG则通常用在实景图，一倍图和二倍图则根据实际需要进行输出。
如果要做分层动画，那我们就涉及到分层切图，如果桌面端和手机端样式差别较大，那我们需要和开发沟通好如何实现，是否需要特殊切图；所有的特殊切图合特殊样式，我们都应该提前跟开发沟通好。
设计-开发这个环节的协作质量对视觉还原起着决定性的重要影响；但是，由于本身的工作性质，我们和开发之间沟通是个棘手又麻烦的历史遗留难题；设计师与开发鸡同鸭讲从而导致视觉还原度低下的局面，几乎每天都在上演。
俗话说“知己知彼百战百胜”，如果设计师能够了解一些基本的开发术语以及开发流程，就可以更好的打破沟通隔阂。
那网页设计稿的实现具体是怎样操作的呢？
步骤可以概括如下：
3.5.1 设计师的要了解的「盒子模型」
3.5.1.1 什么是盒子模型
在开发的工作流当中反复提到的盒子模型。虽然不需要完全了解前端是怎么通过代码来落地你的设计稿的，但你一定要知道什么是「盒子模型」。
「盒子模型」是前端的基础知识，在「盒子模型」理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
3.5.1.2 盒子模型的组成
每个元素都看成一个盒子，盒子模型是由 content（内容）、padding（内边距）、margin（外边距）和 border（边框）这 4 个属性组成的；此外，在盒子模型中，还有宽度 width 和高度 height 两大辅助性属性。
举一个真实界面示例，我们在浏览器中打开「开发者模式」可以看到网页的样式代码以及当前界面是如何通过「盒子模型」来布局的。
前端并不能简单的像UI画图时一样，随意地拖放一个可见元素到某一个位置；他们要通过把每一个元素装进一个「盒子」中，再去界面中定位它所处的位置。
3.5.1.3 了解盒子模型对于UI的好处
当你摸清了前端是如何布局实现你的设计稿后，你在作图的过程中就会开始懂得站在落地的角度思考问题，善用「盒子」，将界面中每一块布局「盒子化」。
我举一个示例，如果我们不使用「盒子」，当我们在做一个卡片时，前端并不知道UI是如何定义每一个元素的间距；比如，然后将这一个间距套用在他也不知道应该设置为多高的「盒子」当中。
所以UI在出稿时就带入「盒子模型」思维，合理地构思好每一块元素的布局，一方面可以帮助自己在输出页面时，布局更加合理；另一方面可以在前端落地时辅助前端准确还原。
优秀的设计离不开开发人员的落地支持，作为设计师，协同开发人员完成设计落地也是工作中重要的一环。
做好以下几点，站在开发人员的角度为他们“多想一步”，高质量的设计还原指日可待。
在进行设计还原的时候我更希望大家把设计评审的环节重视起来，之前也有详细的讲到过《如何进行设计评审》的，因为我认为评审对于设计还原的意义是把问题前置化。
通过设计评审可以把改版视觉变化最大的地方和开发说明清楚，这些改版布局框架改变都会增加开发工作量；这个环节把握好了，那基本都能实现出来，特殊情况除外，比如前期忽略了一些后台数据的问题。
有些细微的地方需要我们特别像开发说明，也加深他们的印象，在实现时候就减少出错；像开发走读的时候，只把关键核心点，规则讲清楚；我们前面每走一步，都是为了后面我们检视还原度的时候要轻松一些，开发也轻松一些，就比如前期基础没打好，后面深入很难。
设计师做好会议记录（记录问题及解决方案，以及达成的共识），并且在会议结束后以邮件形式发送前端们，抄送产品和运营，确保会议内容的传达到位；让设计师与前端工程师相关问题达成一致，提升工作效率。
在开发紧张环节中，即使我们前面所有工作都准备好了，也很难避免开发不找我沟通；这时候我们要积极回应他们，并且和他们一起处理问题。
比如某些难度大一点的页面，开发实现效果和设计稿差异不小；那么这时候，开发会截一张他们实现的效果图给你看，这时你就要仔细去找问题，不要一口咬定就是开发的原因；先沟通具体原因，然后找出解决办法，如果是标注出现问题，比如标注标死了，页面不灵活，适配局限性很大。
在视觉走查的时候我们可以把test环境下的页面和设计稿拿出来对比，走查头部、尾部等位置是否完整统一，按钮样式、反馈状态、报错等样式是否统一；是否有缺少的场景和状态，根据任务流程对场景和状态进行排查，保证设计的完整性。
这里给大家推荐两个视觉走查方法：
1）大家来找茬法
验收的时候，我们需要把开发实现后的效果截图，然后再去和设计稿做对比。
我们可以直接把截图放在设计图上方，降低透明度，大致比对下，就知道哪里不太对，然后再具体标注需要修改地方的参数。
2）页面重构走查
走查还原的时候，在Chrome浏览器的空白处右键点击检查，找到里面的Computed窗口，我们可以找到具体的文字、间距、投影等属性。
有时候一些比较细微的调整，我们可以双击具体的数值进行调整，调整到自己满意之后再给到具体的数值给开发；这样就不用在我们摇摆不定的情况下，造成双方的困扰
4.3.1 确保可用性
设计任务流程，进行设计走查，在移动App端，我们所设计的应用是建立在手指点击操作的基础上进行使用的。
我们的手指不像鼠标一样能够精确定位和响应，所以我们需要在设计的过程中确保可点击的区域能够较为明显的识别。
4.3.2 确保易读性
文本内容是大部分产品的重要组成部分，所以文本的排版是非常重要的（很多人说中文排版不好看，那是因为你不会用中文排版的方式去做排版）；确保文字清晰、易阅读是在文字处理上的必须保证的。
在众多设计原理中，格式塔原理一直被广泛应用，它可以很好的梳理界面信息结构、层级关系，从而提升设计的可读性；在自查过程中，我们可以通过格式塔原理检验页面中的元素是否符合标准。
4.3.3 反馈机制
当用户和产品需要交互时，会使用不同的模式反馈信息或结果，为用户在各个阶段提供必要、积极、及时的反馈，避免过度反馈，以免带来不必要的打扰。
常见的三种反馈信息如下，大家可以在此基础上自查是否有反馈、反馈是否传达清晰，是否对用户有即时的响应等细节
4.3.4 动效还原
动效这块是产品中比较高规格的一个存在，所以在使用的过程中一定要谨慎，不能随意加入多余的动效，导致在使用产品的过程中出现问题。
在我走查的经验多了以后，发现 最容易造成落地页面与设计稿视觉差异的，其实就是颜色与间距还有图标的视觉错觉。不要小看这两个细节元素，把控不好它们会让落地页面效果大打折扣。所以在进行页面还原的可以着重对比一下几点:
4.4.1 分割线
在验收的时候要特别注意分割线的问题，分割线是在所有屏幕上都是1px，但是很多程序员没有注意这个，或者说设计师在开发前没有特别说明；程序员就写成了1pt，因为pt是1x下的单位，px是实际单位。
所以在做分割线的是，单位需要是「px」，这样才能保证每个屏幕的分割线都是1像素。
下面主要以3个主要场景来分点解释分割线的标注：
4.4.2 投影
阴影作为一个重要的视觉元素，让主元素和其他元素从背景中“弹出”并拥有深度，更好地将信息层级呈现给用户。
常规投影与弥散阴影推荐使用css代码完美实现；特殊情况下还需提前与开发人员沟通权衡各种方式的利弊，选择适合项目产品的实现方式。
结合自己实际的工作经验和与开发人员沟通的心得，实现弥散投影的方法，可以通过两个方法实现：
1）切图对接开发人员
虽然切图可以解决这个问题，但是切图也有一些弊端，因为每个卡片都使用切图的话，会使开发的包变大，可能会出现加载慢、闪退等情况，这些体验也是很糟糕了；所以在这个过程中的一些问题务必要提前与开发人员及项目人员沟通好。
2）CSS代码实现
常规情况下，效果都比较好，但是也会遇到一些遇到异常情况，比如不规则形状，通常用代码也比较复杂，这个时候需要提前与开发人员沟通切图情况，避免后期一些问题。
在做设计的过程中，我们需要更好地理解下游的工作，达到一个高效的沟通。
不管是哪一种方法，没有对错之分，关键是要懂得“权衡利弊”，提前与开发人员沟通到位；只要是适合自己公司项目且能够高效还原设计稿的方法，都是值得一用的。
4.4.3 文字行高
文本间距也是影响落地效果的关键因素之一，文本间距指的是——纯文本与其他元素之间的间距。
UI出稿时应该注意 文本行高可能导致前端的测量误差，文本间距主要的原因是 sketch 与 ios 系统中字体的行高不同；最简单的解决方法是通过手动调整 sketch 中字体的行高，业界常用的行高是字体 size 的1.2或者1.4倍，实际这两个值都是够不准确的。
首先我们要理解什么是行高（line-height）。
我以 Sketch 为例，当我们设置了一个70px的文本，Sketch 会默认给我们设置文本为98px行高，文本的上下会包含一定的空白像素。
如果UI不设定行高规范，落地过程中就会出现以下问题：
行高的解决办法：
面对行高的问题，我一般会在设计的过程中，输出规范行高（可以是x倍行高，也可以是具体的行高值，如28px的多行文本行高为40px），和前端进行对接落地。
最简单的解决方法是通过手动调整 sketch 中字体的行高，业界常用的行高是字体 size 的1.2或者1.4倍，实际这两个值都是够不准确的。
最近看到了一个新的公式可以同步开发根据字号设置行高。
设字号为x，行高=x+2ceil（x/10），ceil（）的意思是向上取整数 L（行高） 比如：12 + 2 * ceil(12/10) = 16。
注意这里适用于单行行高，由于多行涉及到的排版问题不仅仅是行高带来的，有机会的话可以单独聊一下。
推荐DoraemonKit 是一个功能平台，能够让每一个 App 快速接入一些常用的或者你没有实现的一些辅助开发工具、测试效率工具、视觉辅助工具；而且能够完美在 Doraemon 面板中接入你已经实现的与业务紧密耦合的一些非通有的辅助工具；并搭配滴滴的dokit平台，让功能得到延伸，接入方便，便于扩展。
4.4.4 视觉重心修正
在设计上为了保证界面的视觉平衡，往往不是设计软件直接精准对齐，我们总是会通过调整间距、大小或者角度补齐一些负空间，让画面保持视觉平衡。
还有设计中通常向右箭头来表示模块入口，当我们把箭头和文字右对齐，箭头视觉上会更外突；这时候我们会往里面缩进1至2像素，但是切图完给完全不知情的前端后，设计师要主动讲解一下，或者写进规范里。
项目会有些需要展示logo的地方， 有的圆形、有的长方形、有的纯文字，尺寸差距比较悬殊。
这种情况下，我们需要给他限制一个高度，在这个高度以内，再根据logo本身的体量来调整图形的大小，处理好logo的视觉平衡。
特殊场景在设计过程中常常会被忽略，等到在现实中碰到才会意识到缺失异常状态会非常尴尬，所以大家在完成主流程设计后，一定也要考虑到特殊场景。
大家可以参照以下几种场景对设计进行自查优化调整：
1）网络异常
考虑到网络异常情况时，通常产品会通过异常状态页面或者交互反馈来告知用户当前的异常状态和如何解决问题（解决方案引导、刷新、toast）。
2）服务器异常
服务器异常状况较少出现，时间也较短，通常不提示具体原因，设计处理方式为在新页面展示缺省页，文案+插画的形式给予用户提示及重试引导。
3）空状态
空状态指的是页面中无内容，主要的几个情况，设计师需要根据不同的场景给出文案+插画的表现形式引导用户：
4）内容缺失
内容缺失展示效果的考虑，设定页面图片缺失的占位图。
5）加载页面的表达方
考虑网络加载或者数据加载的时候会等待几秒钟，通常产品会有一个简单页面的占位图形式来减轻用户在等待时的焦虑感；可以是loading，也可以是整体页面的刷新动效。
设计还原的时候最后还还看一下不同机型适配的问题。保证不同机型的界面呈现效果一致。
4.6.1 动态眼光
手机适配的时候很多设计师会遇到一个问题，就是在750*1335的屏幕上做的设计图；但是适配到640*1136的屏幕上就有元素放不下，所以设计师在出图时需要用动态的眼光去考虑问题。
知识点：在简单的界面中，由于本身界面的内容比较少，确定位置就会比较难，因为要考虑到不同的界面内容要怎么放才能保持视觉统一；这个时候可以先将界面中的信息分成不同的几个部分，先保证每个部分内的固定内容，再确定自适应的内容。
4.6.2 固定适配内容
在简单的界面中，由于本身界面的内容比较少，确定位置就会比较难，因为要考虑到不同的界面内容要怎么放才能保持视觉统一；这个时候可以先将界面中的信息分成不同的几个部分，先保证每个部分内的固定内容，再确定自适应的内容。
4.6.2.1 图标或按钮
4.6.2.2 搜索框
4.6.2.3 Y轴间距
一般来说，Y轴的间如果在相近的组件里，都会是固定的，不会有变化。
4.6.2.4 图片
像这种图片的列表或者，十字纵横的头像或文字，大小都是固定的，变得会是间距或者数量，如下图所示：
对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。
4.6.3 自适配内容
自适配内容也给大家梳理出来。
4.6.3.1 文字弹性适配
文字流指在多行文字的情况下，文字数量变化会影像页面布局和元素大小，如下图所示：
文字弹性适配一般涉及的是宽度适配，宽度适配普遍使用的是间距适配，即定好左右页边距，中间弹性拉伸。
当文字左右两边有内容的时候，我们需要标明文字可显示的范围，也就是说它最多能显示几个字——这种方式可以做到较好的适配，也是做快速常用的适配方法。
4.6.3.2 banner
这里说的图片是指banner或者feed流里的图片，适配的方法大多都是自适应，界面中的元素间距和数量不变，元素尺寸进行等比缩放，比较适用于固定比例；但尺寸随屏幕宽度变化的元素，如下图所示：
对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。
假设视觉还原上真的出了问题，首先要寻找原因，是自己没做到位？还是对方没理解你的想法？
我感觉可以按照以下几个方法去做：
设计团队内部先弄明白改版的意义，画好标注色值、像素的示意图和文档，做好产品原型等任何能让对方不需纠结，直接可以上手的工作。
做好前期的准备工作，尽可能的多做思考，完善设计稿；尤其是边界情况，把自己的问题留给自己，这样可能产生的设计还原问题就会大幅减少。
多向开发同学请教，即便遇到技术确实难以实现的情况，不要逃避或者过于固执，了解具体原因，不断累积自己的技术知识；自己的专业、努力是赢得程序员尊重的前提，赢得他们的尊重你才能顺利开展工作。
这是一个比较复杂而且需要长期努力的话题，每个公司都会有其实际情况存在，团队越大，情况越复杂。
设计师团队或者个人的话语权如果很弱，确实会面对十分被动的处境；首先需要说明的是，话语权是赢得的，而不是赋予的；想要改善被动的局面，要认清所处的环境，问题的症结，调整定位，并付出努力；只有证明了设计确实能够解决问题，甚至驱动商业价值，才会逐步提升话语权。
完成一项任务时最重要的是团队的思维模式是否统一，设计师在乎用户体验，工程师只在乎开发成本，那问题没办法达成一致是很正常的。
想要让大家认同你的看法，就要在平常不断的潜移默化影响别人；比如没事多跟公司其他人聊产品、聊体验、聊感受，慢慢给他们灌输体验的重要性。
只要你的话题有趣，人有趣，没有人会拒绝跟你聊；时间长了，整个团队的思路就会有所转变。
设计师自己可以先按优先级去排布还原顺序，看这1像素是否对当前产品重要性。
在搞清楚产品进度、优先级的情况下，记录所有还原问题，自己标记优先级，整理完毕后一次性给他，再跟程序员解决方案和时间；也可以与开发同学共同摸索一套双方都能接受的清单模式，标明问题，修改建议，重要层级，根据实际情况详细说明或者简要说明，能够当面沟通更佳。
良好的团队合作氛围是有效的润滑剂；好的合作关系如同一条战壕里的战友，哪怕多年后回想起来，也应该是一起冲锋陷阵的光辉岁月。
设计师应该认识到自己在整个项目流程中的位置，不卑不亢，把麻烦留给自己，不要推卸责任或者互相推诿，逐步打造自己的声誉和气场。
一个优质的项目落地是各部门协同合作的成果，就像我们玩游戏，后期高质量的输出也需要前期优秀的辅助来打铺垫。
在“协同作战”的基础上，灵活运用规范、标注和走查的方法来主动推动项目的进行；不仅可以让设计稿得到最大程度的还原，也可以提升我们协作能力和对环节的把控能力。
任何问题只要多交流，会避免很多阻塞情况；出于设计师的角度当然都希望每一张视觉稿得到100%的还原；因为用户只看你上线效果，但是往往排期紧张需要一些取舍，我希望能在有限的时间内做到最好。
在后期视觉验收的时候，我们可以换位思考，把自己当做程序员，站在他们的角度去思考问题；怎么样的验收方式会更方便开发修改，减少重复返工的次数，情愿验收标注的时候多花10分钟，也要把修改意见写详细，帮开发节省时间，反过来也帮我们自己减少了二次验收的成本。
文章来源：人人都是产品经理 作者：郝小七
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
产品设计的过程虽然需要天马行空，但是最终也要落地。设计是为人服务的，因此也要充分的考虑到“人性”。下面，本文作者为我们分享了如何通过设计让用户体验到自由、尊严和幸福。
人的所有体验上的感受，最终都可以追溯到人对自由的渴望，以及在自由基础上对尊严和幸福的追求，这些都指向人性的深处，所以不了解人性就不可能做出好的体验设计。
下面我就分别来说一下如何通过设计来让人感受到自由的体验，尊严的体验和幸福的体验。
提到体验其实暗指这是人类专属的一种感受，它直指人的本质所向即自由，这也是人与动物的一种本质区别，自由是一个纯粹的哲学概念，它无法被直接明确定义解释，但我们可以从邓晓芒先生提出的自由三个特性，来对自由有个更深入认知。
人对自由的追求就是人的根本人性所在，所有精神追求最终都可以追溯和被自由所解释。体验到自由的时候，人就愉快，体验到不自由的时候，人就难受。体验中的一切感受，最终都可以还原为对自由不同程度的体验。
比如哈雷·曼宁等人将客户对体验的定位分为 3 个不同的层级，称之为“客户体验金字塔”（见下图，自绘）。由低往高分别是∶需求满足，容易性，愉悦性。其核心体验都可以归结为不同类型的自由。
客户的需求得到满足，其目的得到实现，这是感受到动机的自由（不受需求的束缚了，可以设定目标、实现目标）;客户感到容易，无需大费周章，这是感受到行为的自由（操作自由，时间自由的掌控）; 客户感到愉悦、感到满意，这是感受到精神的自由（内心情感得到满足）。
自由的力量也可以在日常生活中得到发挥和应用，比如现在家长们苦恼的小孩玩手机游戏沉迷问题，你可以给他设定每日强制必须完成的游戏目标，比如每天必须通10关获得10个游戏道具和一万个金币，不完成不许做其它任何事情，孩子就会对游戏越来越厌烦，背后的原因就是他失去了目标自由和行动自由，感受不到自由的游戏带来的愉悦了。
还有为什么孩子不爱阅读收录进语文课本里面的文章？
那是因为一般语文课本的文章都有课后题要求必须完成，还会强制要求背诵某某段落，孩子在翻开课本学习这些文章时，就已经意识到接下来将面对枯燥乏味的课后题，这影响了他对文章的兴趣，他感受不到自由而只有限制和约束。
如果你领他到一个书店，告诉他说：“我们今天需要完成购买一本文学类书并带回去读完，但选哪一本，如何读完你自己来定，你现在去翻看能让你读进去的书吧”。我想这个孩子因为获得了动机自由和精神自由，自主选出了能给自己带来精神愉悦的文字，他是会将此书读完读透的。
体验到自由，就是体验到他的自由意志没有受到外在的限制而只受到自己的限制，这是体验的最基本层面。
著名交互设计专家理查德·布坎南教授指出∶“所有设计背后的理念都是人类的尊严。交互设计的原料是我们服务大众的‘目的和渴望’，我们赋予其形式和体验。我们的设计都是为人类的尊严而设计”。
按照他的观点，那做设计的人就很有必要先搞清楚什么是人类的尊严？为人类尊严而设计从何做起？
让顾客体验尊严，并非一件容易之事。并不是对顾客有歧视、谩骂等侮辱性的行为或语言才算损害顾客尊严，需要对尊严有深入的理解。
德国哲学家罗伯特·施佩曼（Robert Spaemann）这样说∶“只要人活着，就其种差来说，我们需能够且必须指望他同意向善。然而这种同意向善只可能发生在自由之中。不仅仅这种对同意向善的指望，而且对同意向善能够得以发生的自由空间的允诺，都是对人的尊严的敬重的奠基性行为。”
这段话可以理解为我们必须指望人们同意向善，而且要允许人们自由地同意向善。既不假定他会做恶，也不能强迫他同意行善。允许人自由，相信人会同意行善，是尊敬人的尊严的最起码行为。
在我们的文化中一直有“你不仁，我不义”，“以其人之道反治其人之身”等一些言语在一直流传，这些都是以人的表现来决定我们尊重其尊严的程度，即对人的尊严采取一种有条件的尊敬，而不是无条件的尊敬。
其实只要是人，都要尊敬其尊严。在这种文化背景下让人们真正去理解尊严并不容易，但如果你真正想创造优秀的用户体验，这一关必须要过，并且在语言和行为动作两个方面做出相应的行动。
先举一个生活中常见的例子，当你逛街进入到一些店里后，会不会经常见到如下提示语“请不要随意触摸商品”，“店内设有探头，请自重”，“钱物当面点清，离店概不负责”，诸如此类的语言。
这就是在字面上尊重，在内容上却把受众设定为已犯错误状态，不尊重你的顾客的一种做法。这么做与懂不懂语言学无关，而与对人性的了解、对人的尊严的理解密切相关。
我们用什么样的语言和客户打交道，我们就在客户心中创造什么样的形象。
20世纪80年代中国内地企业开始导入CIS设计（企业识别系统设计）。
CIS系统包括 MI（理念识别）、BI（行为识别）、VI（视觉识别），其中理念识别就是树立企业的价值观，行为识别包含员工接待客户时应遵守的行为规范，员工在按照这些语言和行为的外在规范来对待客户的过程中，可以逐步提升内在的职业道德意识。
视觉识别最为人熟知，VI是一个严密而完整的符号系统，它的特点在于展示清晰的“视觉力”结构，从而准确地传达独特的企业形象，通过差异性面貌的展现，从而达成企业认识、识别的目的。
当时企业把CIS视为营销利器，开始在战略层面思考企业和员工在客户心中的形象问题了。这就为今天的“以用户为中心”、注重“用户体验”、强调“用户思维”这些理念的实行奠定了基础。
比起早期CIS系统中行为准则的口号化和粗放型，现在的企业准则更加关注体验细节和可操作性，在用语上达到了”语言工程设计”的层次，在行为上达到了”行为设计”的层次。其核心都指向企业的道德水平的提升，从而为客户体验尊严开辟了切实的路径。
需特别强调一下，虽然我们尊敬人尊严所使用的语言和动作做不到完全的真诚，总是包含着虚伪和假象，但使用这些语言和动作总比不使用它们要好，总比损害人的尊严的语言和动作要好。
正是在包含着虚伪和假象的真诚中，我们才有可能逐步减少虚伪和假象，朝着纯粹的真诚不断靠近。
语言和动作是对心灵的训练，当我们能持续地说出善良的话、持续地做出善良的动作，我们的心灵也就离真诚不远了。切不可因为做不到完全的真诚，就在语言和行为上对自己降低要求甚至没要求。
幸福这个话题在生活中一直被人们反复提及，它的价值意义也是毋庸置疑的，幸福的感觉是让人感受人的本质力量的重要确证，所以每个人都需要也该拥有幸福感。关于幸福和价值，经济学家张维迎曾有如下论述：
“人行动的最终目的是什么呢？简单说，就是生活得幸福！幸福是人行动的最终目的，意味着其它目的都只是实现幸福的手段，而幸福本身不能是任何其它目的的手段，为了其它目的而牺牲幸福都是非理性的。因为人的最终目的是幸福，因此任何物品和行动的价值，最终都来自它们对幸福这个终极目的所做的贡献。如果一件物品或一个行动能增加人的幸福感，我们就说它是有价值的。”
其实幸福不仅是经济学会关注的问题，更是设计学科所要关注的问题。只不过商家通常是把产品、服务当作使用户幸福的基础手段，设计成为手段的手段，而不了解真正创造幸福的方法。只有在深入了解人性的前提下去做好设计，幸福感才会提供给到用户。
幸福只能是建立在人人幸福的基础上。这个人人，包括自己，也包括别人。
这对我们的固有观念是一个挑战，传统观念中，我们虽然反对”把自己的幸福建立在别人痛苦的基础上”，但却肯定和鼓励把自己的幸福建立在自己痛苦的基础上。我们文化中重视“痛苦”的价值。
比如“梅花香自苦寒来”，“学海无涯苦作舟”，“吃得苦中苦方为人上人”“要想人前显贵，就得背后受罪”等等，一直在强调“苦尽甘来”的价值理念。
这种价值观看起来很励志，但实际上苦只是某事事物的副产品，苦本身完全没有价值，苦不可能转化为人的内在能量，这些错误的认知该被今天人们摒弃，苦就更不是通往幸福体验的正确方向。
因为首先幸福没到来之前，人所受的苦就是直接的痛苦体验，只能够损害人的健康和情绪，这是明显的不幸福感觉；其次，如果认为幸福必须是通过痛苦换来，那么不用自己的痛苦去换，而用别人的痛苦换，则是最有利的方式了，这就自然地引向“把自己的幸福建立在自己痛苦的基础上”这条路。
而这条路只会导致更多的不幸，而不是幸福。最核心的是“苦”不是将来能换取“乐”的债权，更不是修行资源，尤其是对心智不成熟的人更不是好东西，苦是对人的伤害。
我们应该尽可能别让人吃苦，记住，只有成功能带来更大的成功！这是心理学上已被证实的胜利者效应。
其实我们只能用幸福交换幸福。这种交换，实际上是激发和共鸣，交换的双方都不会减少幸福，而是确证了彼此的幸福，是对幸福体验的共鸣。以现在的幸福，激发起未来的幸福；以自己幸福，激发起别人的幸福。
这就意味着，对客户体验来说，要想使用户体验到幸福，产品和服务提供商也首先要有幸福感。不能认为“辛苦我一个，幸福千万人”，而要树立“我是幸福的，也要把幸福传递给千万人”的观念。
设计师、提供商、企业员工要以自己的幸福感所创造的幸福氛围作为必要条件，激起用户、消费者、客户的幸福共鸣，这就是“真正让人体验幸福”的法门。
理解这一方法的企业可以说是少之又少，大部分企业都走在误区，它们可以做到全心全意为客户服务，但认为只有牺牲员工的幸福感，才能促进客户的幸福感，正如当下很多公司员工过劳问题严重。
这使它们从根本上就不可能为用户创造出幸福体验，核心是因为企业的文化和价值观出了问题。
我们一起看一个这方面做的优秀的例子——迪士尼乐园，迪士尼自身的使命，确立的就是使人们快乐。
一旦你来到迪士尼，或者走进其中的一个场馆和设施，你就能观察和感受迪士尼乐园里面散发出来幸福的气氛。这依托于企业内部正确的态度，配以培训和鼓励的支持，然后再结合对这种气氛价值足够的重视。
同时也离不开塑造迪斯尼每一名工作人员的幸福感，由此才营造出的幸福氛围。营造幸福氛围的承诺就是他们创造幸福体验的秘诀，即使所有人现在都知道了这个秘诀，很多企业也是不可能做到的。
原因很简单就是大多数企业主张的企业价值观里就根本不涉及幸福的价值。要想做到让企业的顾客用户体验到幸福，就要对企业的价值观进行重新设计，确保企业的价值主张里要包含“基于幸福的价值”的观点。
首先要清楚对幸福的追求是普遍的，所有业务活动的本质基础是使每一个个体幸福。并且要保障业务活动中交互的双方都是幸福的，业务中的一方不幸福，另一也不会幸福。
业务活动的最终目标是为了改善业务活动中所有相关者（顾客、雇员和股东）的幸福，每一个体的幸福都如此重要，应当把幸福作为组织价值观的核心概念。这样才能保障你的业务会给客户带来真正的幸福体验和好口碑。
伟大哲学家马克思曾说过∶“人的本质客观展开的丰富性、主体感性的产生与发展，依靠着有音乐感的耳朵、能感受形式美的眼睛，那些能成为人的享受的感觉，即确证自己是人的本质力量的感觉。”
人体验幸福，从哲学上说，就是在体验人的本质上的丰富性。在体验的交互中，人的感觉不断发展和丰富，人的本质力量不断地得到确证，进而感觉到人所应有也配有的幸福感。
要想真正做出好的体验设计，必须看见和重视人性：对人自由的追求是人性的根本所在；对人始终都要以恰当的语言和行为使其体验到尊严；将幸福建立在人人幸福的基础上。
关注和尊重人性是做好当下一切设计的基础和根本，因为体验经济时代的设计都要以人为本，服务于人。
文章来源：人人都是产品经理 作者：洪沣
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
信息有各种形式，图、文、视频、音频等，而承载信息的形式也多种多样。
本文意将信息容器进行整理归纳，以总结出一些经验规律。
信息容器是承载信息的载体，位于内容层。要理解信息容器的概念，首先要理解界面中的层级关系。一个界面除了竖直方向和水平方向维度，还有纵深维度。
从底层（远离用户）到顶层（靠近用户），基本上可以分为以下几层：
背景层
信息层
全局操作层（各种常驻于屏幕的bar、悬浮按钮等）
浮出层（模态类型的浮出层还需要有蒙版进行隔断）
本文要讨论的“信息容器”，指的是信息层上，装载信息的载体。信息的类型多种多样，可以是文字、图片、视频、各种操作控件等。
常见的信息容器主要有2大类：列表和卡片。
在整理案例的时候，我不禁产生了一个疑问，到底什么是列表，什么是卡片？如何界定和区分两者？这个问题乍一听有点无厘头，列表不就是列表吗，多个布局一致的狭长单元组合在一起，就形成了列表。那么什么是卡片呢？和屏幕两侧保持一定间距，带圆角的就是卡片吗？
我们不妨先看看下图案例：
为什么类似的布局形式，上图中，图1给人感觉是列表，图2给人感觉是卡片，图3既像列表又像卡片？
从内容层面来说，包含的信息类型有：文字、图标/图片、按钮。几乎没有太大区别。
是什么导致我们观感上的不同呢？
电商案例也许可以给出答案。
从电商产品的商品列表页中可以看到，用户可以自主选择两种不同的商品展示模式：列表模式和卡片模式。
这两种模式几乎可以对应“列表”和“卡片”两种信息容器样式。完全一致的信息量：主图、标题信息、价格信息、辅助信息，相似的展示效率（一屏展示约4.5个商品），不同的信息容器展示形式给人不同的感觉。
单纯从信息层面或者视觉层面都不能界定列表和卡片，如果多维度叠加限定又太繁琐，因此本文给出的列表和卡片直接的区别界定是：可以自主定位关键线索，规划视觉浏览动线。如果视觉浏览大方向是竖直的，那么就归入列表范畴，浏览动线不是竖直而是折线的，都算在卡片范畴。
除了上面说的，最常见的两类信息容器：列表和卡片之外，还有另外两种形式，分别是：无容器和复合容器。
这些容器具体有哪些特点，我们一一来看。
列表的定义：将结构一致的信息单元在竖直方向上铺陈下去，形成的信息集合。
不同场景要呈现的信息侧重不同。
举例几种常见的列表形式：
用户/消息列表
图文列表
功能列表
“卡片型”列表
用户/消息列表的内容结构很清晰，头像+身份+内容提要+辅助信息。
图片天然地比文字更具有吸引力，视觉上的优先级排序是头像＞身份＞内容提要＞辅助信息。
当然用户可以很方便地选择关注的对象是图片还是文字，这体现了列表的优越性，浏览动线竖直，可以方便用户根据自己想要的索引快速定位。
这里值得讨论的是头像用方形还是圆形的问题，相信大家都想到过这个问题，同样是社交产品，qq是圆头，微信是方头，这里边有什么原因呢？
本文尝试分析一下，仅是个人意见，欢迎讨论。
按照理论，圆头亲切的形状感知更加适合轻松基调的产品，方头严谨的形状感知更加适合严肃基调的产品。这解释了电商类型产品（淘宝、京东）的信息通知一般都是圆头的，匹配轻松愉悦的网购体验，而金融类产品（支付宝）多是方头。对于同是熟人社交类产品的微信和qq来说，qq用户层年龄偏低，属性相对更加活跃，更加轻松的圆头可能更适合此类用户。
以iOS为例，当用户向左滑动列表时，呼出针对该列表单元的操作。具体列表对应具体操作，操作项数量不同。
方案A：
优点：操作底板宽度适应文案，不会出现空间局促的现象。
缺点：当文案字段长时，列表被推出屏幕外的内容较多，当用户操作分心时，可能会忘记正在操作的对象，虽然这种情况极少发生。
方案B：
优点：操作底板固定，文案折行规则明确，既不会造空间拥挤，被挤出屏幕外的列表区域可控。
方案C：
优点：搭配图标，视觉更丰富。
缺点：图标占据了一定高度，导致文案无法折行，列表被推出屏幕外的内容较多，与方案A类似。
综上，个人认为方案B是最合理的，对于文案长度的宽容度高，即便文案较长，也可以保证视觉和谐，并保留较多列表内容。
在用色策略上，使用的是为大众所接受的“语义色”，一些具体的颜色在长期经验积累中形成了固定的语义。
当用户触发了带有一定破坏性的操作时，需要用户进行二次确认。
并不是所有情况都需要二次确认，二次确认的样式也有多种。
同样都是模态视图，要表达的信息也相似，都是要求用户进行选择，为什么有些产品选择将对话框居中，有些产品选择将对话框放在底部？这里涉及到关于模态视图的相关知识点，本篇文章旨在讨论信息层面的内容，模态视图涉及到了浮出层的内容，将在下篇文章中进行详细探讨。本篇文章不做过多延展。
信息流产品一般是由图片+重点文案+标签（可有可无）构成。
不同性质的产品想要突出的重点不同，根据内容的重要性权重来分配视觉占比。
从上方几个例子中我们可以看到：
在图文比例从左到右依次提升；
图文布局案例1-3使用了左文右图的方式，案例4-7使用了左图右文的方式。
搞清楚如何图文布局和设置图文比例，就基本解决了资讯流页面最关键的问题。
资讯列表或称feed流，主要根据用户喜好定向推送内容。除了从用户日常浏览、搜索等行为中提取用户喜好信息，用户主动反馈的信息精度更高，用户不惜花费更多操作成本来提示产品，对内容不感兴趣。
从视觉上说：
1、提交反馈的入口（小而浅的icon）都不明显，有些产品用“更多”来提示用户，有些产品用更加负面的“关闭”来提示用户。当用户对内容产生较为强烈的反感时，才会注意到屏蔽入口。常规浏览时，该图标不会影响用户注意力。
2、反馈形式采用模态对话框，用户需要选择具体操作，是屏蔽内容或作者、还是举报或不感兴趣。
3、对话框是否有指向性：从表意明确的角度上来说，带有箭头的气泡更有利于用户定位对象。
从交互上说：
反馈入口热区较小，容易误触，大多数情况下，用户不会注意和点击该图标，用户是以浏览为主要行为。
列表索引一般还是定位文字为主要形式，不同用户的认知水平不同，图标表意始终是一大难点，多用为辅助记忆或单纯提升视觉美观。图标虽然是体现设计风格的重点，但是在具体情境下，如设置页，用户更加在意快速找到自己要找的内容，多度的图标样式，实际上会折损用户的检索效率。
一般功能页面或放置许多功能，常常会超过十几项，这种情境下，检索效率低下是一个痛点。
如何提高检索效率？—— 分组
分组给用户提供了认知线索，根据格式塔原则，用户总是倾向于把距离近的、样式统一的元素归位同类。
毫无分组显然对于检索是不利的，用户需要逐一浏览，该情况适用于列表项无法分组时，如果有分组条件，务必分组，帮用户节约筛选成本。
UI界面中，列表的分割方式常见的有以下3种：
线条分割
块面分割
间距分割
在我们的固有观念里，大圆角，不通栏，有投影的形象就是卡片。
这种样式也越来越盛行，许多产品尝试将列表也用“卡片化”进行包装。
虽然是相当细节的点，但是精细化处理之后的结果就立刻会与批量化处理的结果拉开差距。
产品级的风格统一来源于点滴细节。
卡片的类型繁多：单列大卡片、泳道、内容流（两列网格、瀑布流）、宫格
从内容展示效率上来讲，单张大卡片就占据占据屏幕（刘海屏）超出一半的高度，用户需要不断滑动屏幕浏览下方内容，操作成本较高。大卡片形式对内容本身，如图片的质量要求很高。这种模式常见于图片社区或垂类电商产品，图片社区（如躺平）本身较为小众、即便是UGC（用户产生内容）单元，用户上传的图片素材平均水平也较高，垂类电商（如Nike）图片品质由编辑控制，质量高且稳定。以上类型产品不以量吸引用户，用户往往更加在意内容本身是否优质。用户没有带着明确的目标，心智更加类似于浏览杂志。产品提供什么内容，就进行浏览。从上方案例可见，除了微信读书之外的3款产品首页都没有突出搜索功能，而是以信息流呈现为主。
与列表分割一致，卡片也有对应分割方式。
大卡片占据屏幕面积大，理论上大卡片的内容质量是经审查的。部分产品不存在大卡片容器的交互，点击卡片直接进入详情页。部分产品通过比较低调的方式向用户收集对于内容的意见。如微信读书长按卡片，可以选择不再显示该卡片内容，产品收集反馈，对于用户喜好的描述可以进一步具象准确。长按不是一个高频手势，用户触发该手势往往是试探性的，代表用户确实对于内容有意见要传达。躺平使用了简约三小点样式的“更多”图标来收纳不常用的收藏和举报操作。
何为泳道？顾名思义，常见的滑动手势是上下方向滑动，但有时也会出现横向滑动的情况。一系列对象在一条横向轨道内左右滑动，该类型的形式组合在一起，就好比泳道赛道一般。
可以横向滑动以查看内容的呈现形式，称为“泳道”。泳道可以有多种形式。
停止位置随机：
内容与手势相关度高，比较自由，但停止位置随机，不能保证停下后用户能完美看到当前卡片的所有信息，需要用户微调卡片位置。
停止位置固定：
根据用户滑动速率，模拟物理惯性和摩擦，判断最终展示哪张卡片，并将卡片呈现在屏幕中部，确保卡片上的信息都可以读取。这种交互更加合理，给滑动设置卡点，类似banner效果。
双列卡片可以看成是大卡片（单列）的另一种表现形式。这种形式更加提高了空间利用率，对于单一信息展示更加克制。平衡了效率和效果，是电商、图片社区、视频等产品类型的首选表现手法。
双列卡片可以细分为两大类：
卡片流（对齐）、瀑布流
卡片对齐：
优点：规整统一，视觉动线清晰，浏览舒适。
缺点：对主图尺寸要求高，确定的比例会对商品展示有一定局限。
瀑布流：
优点：图片尺寸宽容度高，满足一定比值区间即可。保证商品的展示完整度。错落的布局容易形成节奏。
缺点：不容易进行比较，若要进行图片间的对比，比较困难，视觉动线混乱。
两列式的卡片布局需要注意内容层与背景层的区分。
大多数产品的背景层是浅灰色，内容层是白色，色差可以建立区分。部分产品背景层是白色，或者说取消了背景层的概念，那么要建立卡片之间的区分，就需要通过间距或者卡片加底色的方式。
个性化推荐模块对电商产品尤其重要，准确地将用户可能感兴趣的产品推荐出去，可以减少用户的搜索、筛选步骤，提升购买效率和愉悦感，从而提升用户对产品的评价。因此，不断收集用户的喜好相当重要，尽管各种算法已经让产品显得越来越智能，但依旧要给用户留下提建议的入口。
上文介绍了资讯类产品中，用户如何给出对于具体信息的反馈，电商类产品原理也大同小异。
从功能上来说，淘宝、闲鱼、京东，都是通过用户手势（点击图标或长按卡片或两者皆可）来呼出选项，用户通过选择来表达意见，从而使推送更精准。
从视觉上来说，淘宝和闲鱼的反馈形式类似，都是在卡片上添加一个黑色半透明蒙版，将有限的选项竖直码放在卡片上，类似小型模态的概念（但是这里不同于严格的模态视图，没有限定用户必须要做出选择，用户可以直接划走）。而京东的逻辑不同，使用了传统阻断性模态视图的处理方式，将下方卡片用蒙版遮挡，希望用户专注于选择。
从阻断感上说，京东的阻断干是最强的，将用户从原本的浏览行为中提取出来，请用户严肃地做出对于当前商品的反馈。这样收集信息的效率更高。由于选项是盛放在带有指向性的小气泡之上，针对性足够，且延展性好，气泡的高宽都可以调整，而淘宝和闲鱼的处理方式，在极端情况下，如选项超过5项时，所有内容放在卡片之上，空间就很紧凑。
这类操作比较隐晦，可点击按钮很不明显，长按手势也不常用。同样是当用户有明确反馈需求时，才会寻找反馈入口，一般情况下，用户不会注意到。以用户常态下的浏览行为为最优先。
闲鱼的交互做的很细致，蒙版出现采用了水波的形式，用户抱着要吐槽的心态，这种精致有巧思的小动效在一定程度上可以缓和用户的烦躁的心理。
除了电商类产品，部分视频类产品长按卡片也会呼出对应效果。
案例1和案例2，长按卡片，都是出现视频片段的预览。效果类似iOS的3Dtouch，在相册中按压具体照片即可预览。而案例3，点击“更多”图标，呼出操作。然而选项只有1项，不符合逻辑，单一的选项无法构成“选择”，这会让人有点摸不着头脑。
如果把界面看作是一张大网格，不同的内容占据着不同位置、不同面积的页面区域。
除了我们已经熟悉的“有序”布置，如从上到下依次排列内容（大卡片），或者从左往右依次排列内容（泳道），还有更加灵活多变的排布方式可供选择。
布局的本质是分配界面面积，用以盛放内容，同时运用面积对比进行突出。除了面积对比的方式外，还有其他方式可以突出关键内容。
无内容的呈现形式比较简单：内容直接置于背景层之上。减少视觉负担，内容为主，形式为辅。
复合容器是指超过一种的容器形式的组合，如卡片中包含列表、卡片中包含泳道等。
不同的信息容器组合在一起，搭建一个分工明确的界面。界面中不同的信息需要套用合适的形式去呈现。有层级就有对比，对比越大，层次拉得越开，重点就越突出。
建立对比的策略：
色彩对比、面积对比、样式对比、Z轴高度对比、静态动态对比
文章来源：站酷 作者：doo_W
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计到了瓶颈时候需要打破瓶颈的好方法就是否定，否定自己之前做的一切东西开始去探索学习新的设计方向与用户体验。
AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书，提出了从5个要素自下而上的建设用户体验；从最早这本书针对web端的设计到现在移动互联的app设计，因为其超强的普适性和实战指导性被广为流传为UX设计中经典的项目创建与研究的方法论。
2008年，当你宅在宿舍玩游戏，发现已经很晚了，你打开饿了么APP，点了一个蛋炒饭，半个小时后就有人把饭给你送到宿舍。你禁不住说道“Aha，原来在这个APP中可以足不出户就能吃到身边的美食！”
2015年，当你在学校散步，发现有很多辆小黄车，然后下载一个APP就可以将车子骑走，你会禁不住说道“Aha，原来共享单车可以这么便宜就随便骑呀！”
好的产品一定是企业服务能力的体现，要保证每一个产品功能都能落地实施，否则产品只是镜花水月。没有能力去支撑的产品都是耍流氓。因此要基于企业的发展布点规划，每一个我们做出的核心决定，都应该建立在我们确切了解的基础上。
但一个好的软件之初应该去怎么思考未来设计的方向呢？通过5w1h指导我们更加全面的考虑问题并高效解决问题。
弗洛伊德认为，如果将人的整个意识比喻成一座冰山的话，那么浮出睡眠的部分属于意识的范围，淹没在水下的那片深不可测的部分属于意识的范围，而链接意识和无意识的那层面属于前意识的状态，这就是著名的“冰山理论”。
无意识设计是深泽直人提出的理论，是指通过有意识的设计实现无意识的行为。无意识并不是真的没有意识，而是人们知道自己需要某些东西，但还没有意识到到底需要什么。
以商场购物流程为例把握整体环节
用户体验顾名思义就是“用户使用产品时的心理感受”。用户体验可能来自产品给用户留下的第一印象，也可能来自用户长期以来感受到的正面或者负面影响。理想的用户体验是用户感到高兴、满足、骄傲甚至是爱上这款产品。
通过问卷调查等方式对用户进行调研，收集用户对产品的反馈，分析用户认为本产品中最有价值的功能点是什么？做了什么关键动作才认识到产品有这个功能点的？收集汇总产品的一些关键功能点之后进行分析，思考产品想要解决用户最大的痛点是什么？产品是如何解决这一痛点的？竞品是如何解决这一痛点的？我们与他们的解决方式有什么不同？如何让用户认识到产品的价值等。
通过上面用户超市购物逻辑的分析/发现/了解/反思，可以精确的了解到当前电商软件设计中的分类/购物车/购物卷/配送等功能的设计应用的必要性。
战略层中明确了用户需求和产品目标后，范围层就要确定做哪些功能、提供什么内容来实现产品目标。
上图可看同样的购物app首页功能却有着极大的不同，拼多多与京东还是以传统的电商页面为主，而得物（毒）却以一种展示形式呈现出来。为什么得物要以展示性功能进行首页的展示，而京东和拼多多要以商品为主去展示整体功能呢？
在我看来因为面对用户整体的不同，整体功能和展现内容也有不同的展现，如计划需求型的商品有固定的需求或者确定的购物计划才去进行需求型购买。而对于潮牌的用户群体是因为在购物现场见到某种产品或某些营业推广、广告宣传，提示或激起顾客尚未满足的消 费需求，从而引起消费欲望决定购买，其实这是购物现场刺激的结果，是的一种刺激冲动型消费。
好的产品设计是顺势而为，而不是重新定义用户体验，更全面地了解用户画像，可以帮助我们作出更有方向，更符合用户需求。
在设计主要的页面的时候需要问自己几个问题，功能导向是否符合产品目标？核心功能板块是否缺失？页面布局是否一致等问题。
通过观察以上的功能但是却又有很大的不同，在拼多多首页的设计以产品为主，而得物app却以用户分享页面为主；拼多多设计风格为一种较为“接地气”的页面，得物app却以一种“高端时尚”的页面。
为什么要以这两种风格去设计这两款软件呢，同样是国内大的电商平台，为什么一个风格高端时尚一个“低端混乱”？
模拟用户的行为，当一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。在以用户画像进行分析，当一个60岁的叔叔，晚上5点准备为一家人去做晚饭之前，去给家人买菜。他是更喜欢去高端的专卖店去买还是去一个脏乱的菜市场去买菜呢？结果显而易见在会更加倾向于市场，因为市场给人最直观的印象就是价格便宜，能以最便宜的价格去买到自己想要的物品。
再进行一个用户画像进行分析，一个00后的潮男，他要为自己买一款好看的球鞋，他的购买路径是什么呢？首先他需要去了解什么样的什么品牌款式的鞋才是最时尚的，其次他会选着一个最专业的品牌专卖店或者大的电商平台去进行购买，因为这样能给他最大的品牌保障。
通过以上这两点才能更加诠释一个产品的设计方向和最佳的用户体验。
根据尼尔森F模型，我们可以得出几个心理暗示：
用户快速扫视时，具体的文字并不重要
多用小标题、短句引起阅读者注意
将重要的内容放在最上边
其实，拇指操作热图最早是由设计师Steven Hoober于2011年的书《Designing Mobile Interface》中使用，其中的绿色部分被他称为“单手握持时拇指触摸最舒适的区域”。这些区域的测量是通过1333份观测分析总结出来的，这些分析数据还表明，49%的用户习惯于单手握持手机，用拇指操控屏幕，而用另外一只手做其他的事情。同样是基于当年的这些报告，还获取了以下信息：
36%的用户会双手环抱手机，用其中一只手的拇指操控屏幕
15%的用户会用双手握持手机并用两手的拇指操控屏幕，其中90%的用户操作时习惯屏幕竖着，而10%的用户偏向于横屏操作。
结合触屏拇指热区和推导模型，将高频操作放在最容易点击位置，降低用户使用成本，提升用户体验。
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们是否能够在最求大小一致、圆角一致、线宽一致、视觉一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验，当这种需求得到满足时，人们会产生愉悦、喜爱、幸福的情感。延伸到APP设计中，在产品加入情感化设计可以成为用户之间的感情的传递桥梁，增加用户对产品的好感度。情感化设计不是轰轰烈烈，有的时候仅仅是一个icon，一个图片一句话。情感化设计让产品变得有温度，让用户获得愉悦的使用体验，这些简单的细节设计充满了积极的情绪。它满足产品的功能性和易用性的同事追求更高层次的目标。
情感化设计在空白页设计中发挥着巨大的作用，他通过设计手段来减轻用户在看到一个毫无内容的页面时产生的挫败感。
Tabs是APP设计中最常见的控件之一，它帮助界面进行快速的信息分类导航。在视觉表现形式上，Tabs和标签栏同样也分为选中状态和未选中状态，一个好的Tabs既要有设计感又符合产品特性。在一个APP中有许多的界面，每一个界面又有许多的元素，那些同类的元素应保持统一的设计样式。通常个人中心的人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延展使用。或者独特的产品外观、logo、ip形象，也可以作为视觉符号的一种，延续到其他的界面中。这样这个界面就被统一的设计元素联系起来了，给用户始终如一的一致感，增加了极强的品牌效应。并将这种情感投射到产品，从而提升用户对产品的认同感和忠诚度。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉符号作为Tab选中状态，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
作为中国最大线上购物平台之一的天猫，其品牌最显著的特征就是那只大脑袋小身体的黑猫，而它的“猫头”也成为天猫每一次品牌推广的必要元素。其中最受瞩目的就是“猫头”
联合营销海报的设计，已成为天猫与大品牌一起联合营销的传统项目，通过设计创意淋淋尽职地表达出厂商的品牌精神和各自倡导的生活方式。
从品牌图形中提取具有鲜明特征的形状作为设计语言，也是一种设计风格的最好表现。
文章来源：站酷 文章作者：大峰_Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务蓝蓝设计的小编 http://www.lanlanwork.com