交互成本是用户在与网站交互中必须执行以达到其目标所需的精力（无论是精神上还是物理上）。
理想情况下，我们希望用户访问网站并在他们眼前找到他们正在寻找的答案。这将意味着零交互成本，并且是检验可用性的里程碑。
不幸的是，由于大多数站点和应用程序都提供了用户可能想要做的许多事情，因此很少能达到零交互成本。大多数时候，用户必须四处浏览，阅读，可能滚动，找到有希望的链接，单击它，等待页面加载，然后重新进行整个过程。有时，一个新窗口可能会在现有窗口的顶部弹出，在这种情况下，用户必须将注意力转移到新窗口上，也许还需要回头看旧窗口以将信息集成到两个窗口中。在其他情况下，用户可能需要记住一页上的信息，然后将其应用于另一页。所有这些动作都需要认知努力并弥补了交互成本。
可用站点将实现各种用户目标所需的交互成本降至最低。也就是说，它们最小化：
阅读
滚动
环顾四周以查找相关信息
理解提供的信息
单击或触摸（不会出错）
打字
页面加载和等待时间
注意开关
内存负载-用户必须记住的信息才能完成其任务
这些用户动作对总交互成本的贡献不同。它们的相对重要性可能取决于用户-例如，阅读障碍的用户阅读时间可能比点击周围的时间困难，而操作障碍的用户可能会觉得点击困难。它们还取决于设备-连接到高速网络的台式机上的页面加载可能微不足道，但是如果蜂窝网络覆盖较慢，则移动设备上的页面加载可能会花费很长时间。
许多可用性准则都解决了使交互成本的各个组成部分最小化的问题。例如，网络写作规则通过推荐要点和简短的要点句子和段落来降低阅读成本。
让我们举一个简单的例子。假设我们要查找“仪式”一词的来源。我们将使用Dictionary iPhone应用程序执行此任务。我们将忽略在手机上查找应用程序所涉及的成本，并且在启动Dictionary应用程序后立即开始分析。
启动应用程序后出现的第一件事是启动屏幕。
在这一点上，交互成本包括等待几秒钟，以使启动屏幕消失并为应用程序的第一个可操作屏幕腾出空间：
在此页面上，互动成本来自定位搜索框。幸运的是，搜索框非常显眼地位于页面顶部，因此我们可以放心地认为，用户只需很少的精力就可以找到它。找到后，用户需要触摸搜索框以将输入焦点移到搜索字段中。搜索框是一个相当大且易于触摸的目标，因此交互成本也可能会降至最低。
接下来，用户必须编辑搜索查询。
当输入焦点在搜索字段中移动时，自动建议的词将自动显示。
用户必须查看自动建议并确定它们不相关，然后清除当前查询。他们可以通过按右侧的灰色x按钮（如果他们熟悉iOS规则）来执行此操作，也可以通过按触摸屏上的Delete键来逐个清除字符。
删除后，用户将开始输入目标词“仪式”。当他们开始输入内容时，关联词会显示在下方。用户可以检查关联词并决定是否要继续键入或停止并选择关联词。
选择（或键入）单词“ ceremony”后，用户必须按Search进入结果页面。他们需要等待片刻才能显示新页面：
用户必须推断Origin可能包含有关单词来源的信息。（对于大多数用户而言，这是一个简单的推论，因此认知成本很低；但是，如果改用“词源”一词，则某些用户可能会在阅读和理解其含义时遇到更多麻烦；因此，“来源”是更好的选择，因为它降低了交互成本。）
让我们总结一下交互成本的各个组成部分，以找到“仪式”一词的由来：
等待启动页面
搜索
输入几个字符
扫描自动提示列表，以查看所需单词是否在其中
如果否，请输入更多字符并在上一步中重复
如果是，请通过点击选择所需的单词
找到搜索框，然后点击将输入焦点移至该搜索框
阅读搜索框中显示的查询和自动建议
决定查询不相关
删除搜索框中显示的查询
键入或选择自动建议
点击搜索
等待结果页面
在结果页面上找到相关的词源信息
向下滚动页面并扫描内容以查找词源信息
找到标签并阅读
请注意，右侧还有更多隐藏的标签
推断词源可能是隐藏的标签之一
注意到滑动会向右暴露内容
向右滑动
阅读Origin并将该单词与目标联系起来，以找到单词的来源
点击词源
了解“仪式”一词的来源
如您所见，一个相当简单而轻松的过程需要很多步骤和子步骤；他们每个人都会产生互动费用。对于某些人而言，交互成本微不足道-例如，记住人们向右滑动即可显示更多内容，因此交互成本非常低，因为人们在移动设备或Web上已经多次遇到水平滚动。可以优化其他步骤以最小化交互成本；因此，在搜索框中使用灰色的小x按钮可以大大降低删除显示在搜索框中的查询的成本。同样，将按钮调大可以帮助点击目标。选项卡的位置和外观设计会影响人们找到选项卡的速度。（当然，选项卡本身的选择与使用其他方式来构造内容的方式也会影响用于在结果页上查找相关信息的位置的交互成本。）
请注意，对于前面各节中的某些步骤，用户可以有多种选择。例如，他们可以按灰色的x按钮删除当前字符串，也可以多次使用Delete键。或者，他们可以从自动建议列表中选择建议，也可以在最后输入字符串。
人们如何决定采取哪种行动？答案在于预期效用的概念：
预期效用=预期收益–预期交互成本
用户尝试最大化一项操作的预期效用：换句话说，他们权衡了每个操作的收益和成本，然后选择收益与成本之间最佳平衡的方案。
当有几种方法可以实现具有相似利益的相同目标时，用户通常倾向于选择使估计的交互成本最小的操作。
例如，许多人可能不会在自动提示列表中向下滚动以找到“仪式”一词，而是可能会再键入一个（或几个）字符，直到可见“仪式”一词为止，因为向下滚动小列表和扫描列表中的正确单词比击中一个甚至几个字符的成本更高。
这种类型的想法也普遍适用于站点级别。如果看起来真的很难在任何给定站点上实现其目标，则除非与初始站点进行交互的收益确实很高，否则大多数用户只会以较低的估计交互成本转移到另一个站点。举个例子，如果用户真的想购买Apple电脑，他们可能会坚持使用Apple的网站，因为他们不太可能在其他地方购买。在这种情况下，用户的动机确实很高，因此他们可能愿意忍受很高的交互成本。但是，如果用户要购买烧烤架，则可能不在乎是否从Home Depot或Lowe's或其他站点购买，并且会离开互动成本高的站点。
营销和品牌推广通常会增加与特定网站或品牌互动的用户动机和预期收益；可用性可以降低交互成本。两种方法最终都解决了增加使用站点或软件的预期效用的问题。
交互成本是可用性的直接度量。实际上，该概念早在人机交互时就被引入，以评估软件系统的可用性。所有的可用性启发将用户的交互成本降至最低。
从长远来看，快速评估设计的交互成本可以节省大量资金，因为它可以很好地衡量用户界面的难易程度。它也可以用作设计备选方案之间的比较工具：通常，将交互成本最小化的方案具有更大的成功机会。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“今天吃什么啊？”
“不知道啊，看看大众点评，哪家店比较靠前”
“一会去看什么电影？”
“我看豆瓣上，这部片子评分特别高，我们去看这个吧”
当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时，面对的选择越多却越不知道如何做决定，或者当下做了决定觉会一直思考做的这个决定是不是最好的，选择困难变成了大众病。面对用户的选择需求各大平台都有自己的方式，帮助用户做决定的同时，引导用户购买目标产品，极大的降低了用户的选择成本，其中排行榜就是平台的常用套路。用户的选择成本是什么？排行榜为什么能够帮助用户降低选择成本？排行榜仅仅是用来降低用户的选择成本，为什么商家对排行榜也趋之若鹜？下面带你了解为什么人人都爱排行榜，及我们生活无处不在的“显性”“非显性”排行榜。你可能都不知道，我们的生活正在被各种排行榜所支配！
排行榜的本质是一个没有感情的信息筛选机制，某一相关的同类事物之间通过比较，反映同类事物客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可，比如我们买衣服会首选淘宝，电子类产品会首选京东，看电影会看豆瓣评分，这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选，由于锚定效应降低用户自己的选择成本，准备快速的做出选择。同时由于用户的从众心理或者羊群效应，也会对上榜主体产生强烈的品牌认可，为上榜主体带来更多的利益、强烈的荣誉感、甚至流量和平台背书标签，比如：B站的百大up主，各个平台排行榜的销量冠军、朝阳地区必吃榜第一名。那这一切背后的原理是什么？
一个完整的排行榜需要平台、上榜主体、用户三大组成部分，俗话说屁股决定脑袋，不同的定位决定了排行对三大组成部分不同的作用，当然背后的原理也不尽相同。
在没有各种应用前，当我们决定购买什么东西或去哪家消费，前期需要花费大量的人力、物力，搜集相关的信息进行整理集合后，对比集合信息后才能做出决定，也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后，做出择优决策阶段发生的成本或费用都是用户付出的选择成本（前两个阶段发生的成本是交易费用，而不是选择成本）。在备选集的建立过程中，包含的选择越多，用户选择的难度就越大，选择成本就会越高。
选择性排行榜在备选集建立完成后，利用沉锚效应在用户心理建立潜意识的目标参照，帮助用户完成择优决策，降低用户的选择成本。（另一方面平台在帮助降低选择成本的同时，也会影响这用户的最终选择，在接下来的平台侧方面会有详细的分析）
比如说：当我需要买个耳机时，如果在没有各大应用的前提下，我需要找到我身边的耳机发烧友或数码电子方面方面的内行人，收集信息建立备选集，但由于京东在电子设备方面的权威性，我会优先查看京东的耳机类排行榜，也就是说京东完成了前期的信息搜集及备选集建立，而用户出于对平台权威性的信任，根据平台给出的维度参照、品牌参照、价格、标签参照等信息，最终快速的完成自己的选择。整个过程就是用户在对锚的寻找，以及用户对信息确定性的寻找过程。
在马斯洛需求中，当个人的生理需求和安全需求被满足时，与他人建立情感联系或关系成为人们最强烈的需求，即社交需求。社交又分为：为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如：QQ音乐新增的扑通社区、微博明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。
无论是“功利社交”还是“共情社交”首先需要的是沟通，沟通的本质则是信息的流通，但当双方都没有可以沟通的信息时则社交不成立，而类似：微博热搜、今日头条、澎湃新闻等信息类排行榜，则给有社交需求的用户提供了相通的谈资。
在选择类排行榜中，提到的从众心理（又称羊群效应），是指人类由于对信息压力及规范压力，会希望融入到群体中寻求安全感的特性，即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感，会热衷于浏览此类排行榜来获取实时信息，融入群体生活。每天早上，在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件，在上班电梯或工作间隙讨论各自掌握的信息，及对事件的见解，甚至在与他人有相同的见解或之后，会对对方产生莫名的亲近感，满足自己的社交需求。
过年期间各家app纷纷推出自己的用户年度报告总结榜，不知道你有没有参与到其中，并分享到自己的朋友圈。在我们的平常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序，人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外，还需要了解自身在大数据下的自我确认，通过各种各样的榜单，判断自身的能力、情绪、价值等，来达到自我认同，否则就会感到焦虑不安。
加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解“社会是舞台，人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程，我们想要呈现给观众怎样的形象，需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己，为了维持自身的平衡防止崩溃，人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己，让用户更加清楚的认知自己，同时通过分享，满足自我确认以及他人确认的需求。
我目前只总结出这三种类型的排行榜，如果有小伙伴想到其他类型欢迎在评论区提出，一起参与讨论。
无论哪种排行榜，用户信任的基础都来自对平台的信任，那么用户为什么信任平台？排行榜对平台意味着什么？背后原理是什么？
对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性，选择成本是品牌经济学的核心，而用户对于排行的信任首先要建立在平台品牌的权威性下。
从我们记事起，我们对世界的认识来自自己的父母或老师，而这些教导我们什么是对、错，对当时的我们来说是权威的化身。长大后我们对于权威的认可更倾向于某一领域的专家，比如：医生、律师、教授等。认为处于权威地位的人在某一领域相对普通用户的判断更可靠，可以帮助普通用户节省研究问题的工作，做出更轻松的决定，虽然不一定是正确的。
搜索我们会第一时间想到百度，影视、书籍会想到豆瓣，想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性，形成品牌号召力，推动用户做出需求决策。另一方面排行榜中也会说明数据来源，比如京东会在排行榜页面有明确的榜单说明，豆瓣根据平台数据更新，汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明，减少用户做出决定中的思考、猜测，获得用户的信任，增强平台的权威性。那对于平台来说权威性的建立意味着什么？
平台权威性意味着说服力和影响力，在减轻用户的决策压力的同时，影响用户做出平台所需的决策方向；
每年苹果发布会都会带来范围极大的热度讨论，而app store内的热门推荐自带话题度和讨论热度
排行榜作为内容输出口，在平台权威性的背书下，产品优化自身的价值，而平台也可以通过排行榜优化自身平台价值
平台权威性下，可以通过多种方式达到盈利，比如苹果app store应用商店内的付费应用，百度的凤巢系统、微博热搜的第3、4位排名等。
在平台完成建立权威性开始利用排行榜进行商业变现时，比如百度、58的竞价排名，现在大部分应用会使用明显的方式告知用户，防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”，淘宝、小红书推荐猜你喜欢的“广告”。
上榜主体作为整个排行榜的内容中心，由于排行榜自带的竞争机制、筛选机制，使得用户会很乐于分享出去，比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。
由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度，以及各种潜在资源，比如：流量、资源、人脉、某一领域影响力、平台背书等等，这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感，比如bilibili不同粉丝量级会送出相对应的粉丝牌。
而平台方也利用上榜主体挖掘潜在的用户，为平台带来更多的新用户，加强平台权威性，形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量，带走平台用户的情况。比如去年和热闹的“巫师财经推出b站，签约西瓜视频”，各大平台也时不时会出现抢占流量up主的情况。
排行榜设计要达到用户攀比的效果，很重要的充分条件就是相同需求的好友基数足够大，这样才能构成排行榜设计成功的必要条件。
对于已有成功产品的公司，可以借助平台相互间的导流完成初试资源的搭建，比如：微信初期借助QQ好友流量，带来好友初期的爆发；抖音最初的活跃借助今日头条的流量输入。
不断推送已关注好友的信息流，当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交，你要先有这个人联系方式才能要求好友，关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等，不断社区建设推送动态信息流和好友卡片推荐。
当应用建立初期，没有很多的资源和内容时，需要平台自行填充内容，使得排行榜信息量大，增加用户活跃，才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等，或是平台pgc发布推送的内容。
面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化，根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。
在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成，其他则根据不同产品类型及产品需求决定是否展示。
在首页底部或顶部tab形式出现，多出现在以UGC或文字信息为核心的产品，以内容信息为主，常见以信息热度为主要功能的资讯、新闻类应用。比如：知乎、今日头条、36氪。
知乎热榜内容完全展开；36氪分为话题榜、人气榜，话题榜仅展示前5条，人气榜展示10条，仅在前5条有名次图标，在36氪热榜的中部还会出现收藏榜，综合榜。
而今日头条仅在整个页面的1/3处展示部分“头条热榜”，点击“查看更多”后，展开“头条热榜”及“今日关注”“北京热榜”，整个交互形式类似微博热搜。
首页功能入口处明显排行榜图标，优先级较高，常见自带推荐属性，能够帮助用户快速选择，减少选择成本，比较依赖榜单的应用。比如：豆瓣、音乐类、腾讯动漫等应用。
其中豆瓣、网易云音乐由于各种类型的排行榜很多，在图标点击开后，在当前页面平铺不同维度榜单类型，用户进行点击跳转；腾讯动漫相对榜单类型较少，在左边侧边栏切换不同的榜单。
用户查看商品详情时，可能会希望能够横向对比同类商品，才能最终决定购买那件商品。常见于电商类应用，比如：京东、拼多多、得物等。点击后进入不同的榜单页面，获取更多产品信息进行筛选。（淘宝的商品详情页没有排行榜，但在首页却存在隐形排行榜，在隐形排行榜模块会有详细说明）
当用户没有明确搜索目的时，搜索框的下方，平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户，比如：微博热搜、淘宝热卖、抖音热榜等。
没有明显排名及规则，但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前，位置越靠前，在用户心目中的默认位置越靠前，比如淘宝的“有好货”、编辑精选等。
在平台建立初期没有特别的内容供平台呈现，这时候就需要平台人工有目的的推荐一些内容，不同于“猜你喜欢”建立在用户的行为数据下，编辑推荐更多的平台希望用户看到的内容，一方面作为平台内容的输出口引导用户，另一方面内容是平台自己发布内容，也可以保证内容的高质量。
平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期，并且存在大量的平台用户使用数据，“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性，各大应用平台适用性强，一般出现在首页部分。
朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜，这些其实是用户自己确定了解自己，且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓，清楚的认识自己。
不知道大家小时候看没看过《第10放映室》，那是我最早关于排行榜的印象，里面会有各种最佳动作片总结、最佳男配角总结等等，以香港电影偏多，是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐，这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜，从众多选择中选择出部分答案，给出理由，而用户只需在已被筛选过的内容中进行决定，节省选择成本，比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定，但可以迎合用户对确定性需求的各种盘点性质的排行榜，比如抖音的TOP榜哥就是盘点各种内容，人物。
相比其他排行榜，筛选后的内容已经体现了用户的具体需求，高效明确的给用户提供选项，引导用户快速选择。
排行榜一般由必需的榜单头部、上榜主体，及非必需的榜单规则、更新信息构成；而上榜主体由必需的主体信息、排序，以及非必需的推荐理由、排名变化、热度信息构成。
好的榜单能够快速吸引用户快速找到自己的需求点，引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部。
当排行榜在整个应用中有且只有一个时，通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出，增加平台的品牌权威性。
有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况，为了平台的统一性、降低后期的维护成本，一般会使用可复用的榜单头部，如豆瓣、京东、QQ音乐等。
得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配，但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案；马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式，通过更换文案底图达到适用不同主题；京东就相对比较简单，只是更换标题的文案达到多主题适配。
排行榜上榜主体由于不同的场景业务需求，一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式，其中主体信息及排序为排行榜必须信息，而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。
纯文字的排行榜一般是以内容（或标题）加排名的形式出现，常见以信息为主的排行榜，比如微博、知乎、今日头条等以信息为主要关注点的应用，或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准，因此会在标题及排位外，增加各种突出热度信息的表现形式，如关注热度人数，或是“热”“新”“爆”等等表示热度的标签，如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化。
相对于纯文字形式，图文结合的排行榜因为图片信息的增加，使整个榜单主体占居更多的空间也可以展示更多的产品信息，辅助用户进行选择。
上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）
每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。
人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。
因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。
说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播全站榜中有看到）
榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；
信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。
排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。
文章来源：站酷 作者：9号自习室
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户的体验感对于一个产品来说，是至关重要的。一个好的产品能够充分照顾到用户的感受，从而拥有大批的忠实用户。用户体验地图是帮助产品设计者站在用户维度思考体验优化，提升用户体验的重要工具。
那么，应该如何打造用户体验地图及如何落地呢？我们在本文给出了解答。（本文对用户调研、用户行为路径、使用场景等也做出了详细解析）
它以可视化的形式，来表现一个用户使用产品或接受服务的体验情况，来发现用户在整个体验过程中的问题点与情绪点，从中提取出产品的优化点。
对于1-∞的产品来说，用户体验地图是用户增长策略的一部分，是产品优化的重要工具。
用户体验地图一般由以下几个部分组成：
用户体验地图的组成部分大同小异，可以根据自身分析内容增加或简化。小伙伴可以保存这张空白模板，直接拿去填内容哦~
我们给出了简洁明了的回答：
背靠着中国铁路总局，12306在基础票务预订服务上有着得天独厚的优势，但基于用户日益增加的多样化需求，以及越来越多的用户愿意为优质体验买单，竞争激烈的OTA们日益精进，与官方12306形成鲜明对比，本次优化就围绕12306流失最多的年轻用户群体展开。
本文以12306为例，主要针对购票流程（核心功能），提升交互易用性和用户体验，演示用户体验地图如何落地。首先我们来看一下用户体验地图的原型模板。
（上图建议保存）
根据地图原型的ABC区域，分别对应着A区的用户特征与需求，B区是用户行为、思考、情绪，以及C区的总结分析。A区+B区得出C区，A和B都基于用户，所以，了解用户——是梳理用户使用问题的基础和第一步。
经过我们团队的经验总结，得到绘制前的流程步骤如下图，下文会拆分步骤一一讲解。
体验地图的“用户”不是主观脑补出来的，而是通过定性调研和基于数据支撑所得出的，所以收集用户的信息是十分必要的。
以下我们通过用户群体数据和问卷调研数据（包括用户画像）来确定用户模型。
本文根据以上数据，仅锁定一线城市的主要用户群体，也就是高线年轻人群的购票流程优化。
笼统的“对某类用户使用产品的情况调研”是无法提供有价值的调研内容的，调研目的一定是颗粒度可细化的存在。
12306平台的下单耗时长，年轻用户流失率上升，对官方软件槽点颇多，品牌影响较为负面。本次调研，主要针对年轻用户在平台的购票路径，分析该用户群体，在下单过程中的操作节点与关注点，探索用户流失与差评的原因。
我们把社会属性相关的样本数据按不同维度归类，划分用户人群。比如按年龄、行业、职位等维度的典型特征，可以将12306APP的主要用户划分为：在校学生、企业白领、自由职业。
再加以问卷结果描述，得到了高线年轻产品使用者的虚拟画像。
在列问卷内容时，要注意12306是火车购票工具类软件，用户目的明确——刚性需求，所以问卷无需过多挖掘需求，而是锁定调研目的，研究APP体验本身，精准投放颗粒度较细的具体问题。如下：
团队花了2天时间，总共发了335份问卷，回收率80%，拿到了268份。图表较多就不详细展示过程了，重在方法。
根据统计结果，我们最终总结出了下列重点问卷结论：
把这些痛点、满意点，包括用户实际接触的界面或功能模块，都归纳记录下来，方便后续将这些痛点进行优化改进。
保存以上部分的相关数据和结论，我们已经了解了用户（进入角色），接下来要确定用户体验场景了（模拟人生）。
在做使用场景前，先通过产品设计者视角梳理出产品目前的用户行为路径，这个步骤的主要目的是找出复杂节点，降低操作成本。
它需要我们对操作流程进行拆解，将一个流程拆解成几个阶段，阶段又可以拆解成具体的操作节点。这样一来，我们可以分析每个动作节点存在的必要性。
根据上图的4步法，第一步——我们在确认主流程的情况下，罗列所有操作节点：
一定不能怕麻烦，用户所有的动作节点都要罗列。
然后我们要找出复杂的操作节点，也就是可以优化用户操作的节点，当然也不能主观地“我觉得”，用交互量化的方法可以快速帮助我们找到问题点：
1. 把每个操作交互定一个数值，即为操作成本。越是高阶越是隐藏的交互手势越复杂，所谓的“交互成本”也越高。这里我们规则为：
2. 通过简单的加减计算，就可以直观地看到复杂节点在哪里。
3. 通过计算，我们能够直观地看到用户操作最繁杂的部分集中于“选择站点城市”“车次查询”“选择乘车人”这三个操作流程中。此时，重新审视这几项繁杂操作节点，让用户在更少的步骤内完成操作是我们的目标，能一次点击完成的操作绝不让用户点击两次。
4.降低操作成本，可以从2个方面入手优化：对于复杂的节点，降低操作难度，用简单的操作替换复杂的；对于可有可无的节点，大胆地删除，减少操作步骤。
（由于精力有限，这块内容暂时不过多展开，因为还涉及很多知识点，以后慢慢讲解。当然，感兴趣的同学也可以自行查找资料，或在文章下方评论交流哦~）
明确了目标用户后，接下来需要我们发挥共情能力，代入用户视角走查产品。
从“带着需求”来（我要买车票），到“完成目标”（买到票）走的核心场景路径，梳理出来粗颗粒度的故事场景 。
【举个栗子】：
场景的梳理，先从颗粒度大的骨干场景出发，举个栗子：假如我们起床到公司这个场景，可以回想一下，在整个过程中我们经历了哪些大的阶段？
——经历了：起床—洗漱—出门—路上—到达。
基于大的阶段，我们可以继续拆分出颗粒度较小的二级故事场景，比如“洗漱”还可以拆解：换衣服—刷牙—洗脸—梳头。
拿到实例中，12306的购票流程是：查询车次—筛选车次—填写乘车信息—提交订单付款—买到票了
切忌在使用场景时流程颗粒度过细，忽略用户使用目的。
【加餐知识点】
这里先讲解一下，场景设计主要分为2类：一是挖掘需求，挖掘用户使用目的及动机；二是研究需求，在已有需求上深入研究和优化。
12306是从1-∞的出行工具类产品，用户的使用目的非常明确——买车票，因此使用场景一定是围绕【研究需求】展开。
运用4W1H场景分析法，我们得到用户使用场景：
在已经了解用户和确认了用户使用场景的基础上，根据以上得到的结论和机会点等资料，开始绘制用户体验地图。
文章开头拆解的组成内容还记得吗？
现在召集团队不同岗位的人员，共同努力填补网格空白处。最好从上到下从左到右开始，不用强求全部填满，因为用户体验地图并不是一锤定音的，它是不断分析和反复更新迭代的。
我们得到了用户体验地图成品：
用户体验地图是产品用户增长的策略工具之一，绘制完成后根据地图针对用户体验情绪与机会点探索解决方案。
绘制好体验地图后，工作并没有结束，还有2项重要的工作：
优化机会点：展开头脑风暴，讨论是否能有最佳方案，来满足用户的目标，提升用户满意度、优化体验
安排后续工作：按照情绪曲线、机会点价值大小，梳理优先级，安排后续工作
然后根据用户体验地图，按照用户情绪的低（解决痛点）、高（放大爽点）、中（思考分析），分别探索优化。
把所有问题点按照上述分类，首先解决用户情绪最焦虑的痛点问题，其次思考是否能把情绪高点继续优化到极致，让用户更嗨，而用户情绪平缓的地方，要研究分析，继续思考优化空间。
· 中转功能操作繁琐，推荐方案不够智能——减少交互步骤+增加智能方案推荐
· 视觉层级冗杂、票价信息不直观——F型分析法优化+增加票价显示
· 列表页排序算法升级（与产品开发相关，不做案例展示）
我们增加了智能方案推荐，并把中转车次与直达车次划在同一页面，优先展示直达车次。极大地增加了用户操作的易用性，可直观对比，减少页面跳转和加载等待时间。
通过多稿权重对比，在信息层级、功能突显和视觉样式中，择优选择了最终稿。
复杂节点降低操作成本，切换动效能直观看出阅读效率和易用性的提高。
通过F型视觉模型和十字交叉法梳理了信息层级，极大的提高了阅读效率。
日期选择由展开点按切换改为滑动切换，提高屏幕利用率的同时，更方便用户操作。
——情感化设计，魅力型功能，让嗨点更嗨。
情绪中线以下，都有优化空间。比如，
添加乘车人操作重复、耽误抢票——默认常用已选+页内抽屉拉起
筛选功能视觉较弱、触点易错——增加视觉识别与触点面积
……
这是一部分可以不断思考打磨的空间，虽然紧要程度低于用户情绪低点，但是花时间将产品从满足80%的用户到满足99%的用户，即使在大多数人看来是一种性价比很低的行为，但却是提升用户体验的绝佳方式。这也是大厂产品体验良好的原因。
文章有点长，感谢阅读。下面概括了一些文中的方法论知识点，方便读者回顾。
市面上有很多关于产品体验地图的文章，但多数是基于已有产品的劣势去直接绘制地图，绘制地图并不是目的，绘制好体验地图之后怎么分析优化才是目的，用户体验地图本身只是一个可视化工具。我们努力去剖析过程、记录方法论，希望初学者能够知其然并知其所以然。
文章来源：站酷 作者：挖设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com