将普遍存在的人性用户心理规律运用于设计，增加设计的温度。
近来对用户心理比较感兴趣，去看相关设计资料的时候发现相关内容重复性较高，多方搜集资料结合自己的一些分析总结出一篇补充。
定律是钥匙，在遇到让我们上瘾，持续付出或获得情感的APP，多去想一想它背后洞察了哪些人性及心理，能不能为我们的后续的设计吸收。
最后想说，设计师的价值不仅仅在视觉，好的设计必是好用好看好懂用户的。跨领域学习补充自己的视野，多思多想，掌握钥匙，开启用户不同的心门。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）。
左文右图VS左图右文
每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。
人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。
因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。
说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到）
榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；
信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。
排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
信息架构这篇是本人在现阶段觉得较难学习与阐述的知识点，网上关于信息架构的知识内容也是参差不齐。在学习与探究的过程中查阅了很多资料，反复修改多次，尽量用直白的语言结合实例来阐述信息架构。目录如下：
大家可以根据上述目录来进行选择性阅读，当然全文阅读也是极好的～
这篇文章的起源，来源于最近看到的话题“B端设计师会被组件库取代吗？”。从表面上看，在组件库越来越完善的时代，很多页面设计依靠组件库就能够快速搭建。
那么在这种情况下，B端设计师存在的意义和价值到底体现在哪里呢？其实B端设计的重点并不在页面的视觉上，视觉只是作为设计师最终输出成果的一小部分。个人认为B端设计师工作重心体现在做「正确的设计」，比如以下几个方面：
1.这个设计能否完成对应的商业目标和产品目标；
2.我们的信息呈现是否合理以及能否解决当前需求；
3.用户能否在页面上快速找到想要的信息；
而想要弄清楚并解决上述这些问题，在众多的话题阐述之下，我发现其论述本质上都逃离不了「信息架构」这个概念。因此我认为设计师都需要对这个概念有充分的认知，这能够帮助我们做出正确且出色的设计。
关于信息架构的概念，在百科上面的定义大部分都比较晦涩难懂，比如维基百科和百度百科的解释：
相信大部分人都很难明白其中描述的意思。在这里换种思路，将信息架构拆分为信息与架构去理解。
信息指的是内容的载体，常见的文字、图像等都是信息；架构的含义则形容对应的组织和结构。那么信息架构就是将信息通过一定的形式组织起来，然后呈现出来。其本质就是研究信息的表达与传递。
通俗点讲，信息架构就是让用户可以更容易的理解我们的产品，让用户在使用我们的产品时可以更顺利、更自然。因此信息架构没有一个具体的呈现形式，它更多的是体现在产品设计的各方面。具体主要表现为组织系统、标签系统、导航系统和搜索系统。
为什么需要信息架构？我们都知道B端产品设计的核心是「降本提效」，在设计这一侧的可以将其理解为降低认知成本，提升使用效率。
降低认知成本需要我们更好的表达信息，让用户能看明白我们的产品能够做什么，如何用；提升使用效率需要提升信息的传递效率，让用户能够很容易的找到需要的功能；
而信息架构从本质上来讲也正是研究信息的表达和传递。因此我们需要通过它来帮助我们更好的完成B端产品设计。如果没有信息架构来作底层支撑，那么我们在页面上看到的可能就只有功能的堆叠，让产品陷入难以上手或者不知道怎么用的尴尬境地。
一个强大信息架构是产品质量的保证，是作为设计支撑点的骨架，它会减少可用性问题，提升整体导航行，创造对用户友好的体验。比如举一个工具层面的例子：
PS的工具栏堆叠在界面各个部分，而Figma的工具栏则集中在右侧且只出现当前需要的功能。很明显Figma在信息架构中的信息组织部分做得更为友好，PS则会显得逊色一些。这也是我们在学习PS的时候会显得比较吃力的原因之一。
可以说良好的信息架构是高效用户体验的基础。视觉元素，功能，交互和导航都是在信息架构的基础上构建的。因此想要做出体验好且合理的页面设计，我们就需要参与到信息架构这个过程中来，和产品一起完成对应架构的梳理。而不是只完成从原型到页面这个部分。
如果想要搭建一个好的建筑，我们需要知道其建造的目的，是按照什么样的结构搭建，内部有哪些系统，以及最后呈现的模样。
那么信息架构也同理，我们首先需要知道信息是为了什么目标服务，然后我们通过怎样的结构来组织这些信息，以及过程中会用到的信息元素，最后如何呈现它们。这都是我们在搭建信息架构中需要进行的必要步骤。如果某些环节没有做好或者没有了解透彻，那么在输出信息架构时往往会出现方向或者策略上的问题。接下来我们看看这些步骤是如何具体呈现的。
B端行业对于业务理解的要求是比较高的，只有在理解业务的基础上，将业务需求转化为对应的设计目标，我们才能够输出合理的信息架构方案。
个人认为理解业务的基础，就是能够用一句话讲清楚当前设计的产品。这句话可以描述为：谁在什么地方想要完成什么目标。比如「用户想要不出门就能够吃到东西」，这就是外卖软件提供的产品服务。
虽然看上去这句话很简单，但其中包括了三个要素：用户、场景和目标。因此我们在分析和梳理业务的过程中首先要弄清楚的就是这三个要素。
用户永远是排在第一位的，也是我们首先需要弄清楚的。在B端设计中，本质上可以分为两类角色：客户和用户。比如我们常用的钉钉或企业微信，购买客户是企业，实际用户是员工。
对于企业：「我想要有一款软件可以更好的管理员工」
对于员工：「我想要这款软件能够更好地提高工作效率」
客户决定了我们产品的购买（部分情况下也兼顾使用），而用户则决定了后续产品的复购率。因此在业务理解中，我们需要弄清楚当前产品所处的服务阶段，比如初期为了打开市场肯定更倾向于客户，而中后期为了提高产品的使用体验又会偏向于用户。
因此我们首先需要弄清楚的就是当前产品是为哪些「目标用户」服务，这也就决定了我们在设计信息架构时对应的不同侧重点。
场景是指需求产生的某种条件，这个条件包括但不限于环境、时间、地点、空间等，只有上述条件满足，这个需求才能成立。这里可以把场景理解为产生该问题的原因。
比如当用户提出「她需要一件衣服」，那么我们就需要弄清楚用户为什么需要添加衣服，是她感冒了自身觉得冷还是因为外界环境冷。这两种场景涉及到的解决方案是完全不一样的。
在平日的工作中我们可以通过以下两种方式来更好的了解业务场景：
1.通过业务方文档进行业务背景的初步理解。业务文档中一般都会包括需求背景，我们可以通过文档进行初步了解。
2.通过业务沟通进一步加深业务背景的理解。由于很多B端业务离设计师本身的生活比较远。因此对于需求背景中不理解或者比较模糊的部分，我们可以通过与业务方或产品多次沟通来挖掘最底层的背景。
毕竟需求背景是理解业务的重要步骤，我们只有知道需求产生的原因，才能够针对性的给出解决方案。
目标决定了我们的产品最终的方向。我们首先接触到的一般都是业务目标，而我们要做的就是将业务目标转化为我们此次的设计目标。
A.业务目标
业务目标就是此次业务想要解决的实际问题，它通常是一个宏观上的描述。比如打车软件的业务目标简单概括来讲就是让用户能够更快速地打到车，减少等待焦虑。我们一般通过文档或者沟通来了解该目标。
B.设计目标
设计目标是我们基于业务目标而给出的设计策略，是一种更具体的实现方式。比如我们要让用户快速的打到车，那么这个时候我们的设计目标就是通过将用户位置和司机位置进行快速匹配，并通过超时补贴红包的方案来降低用户焦虑。从而实现业务目标。而这一过程涉及到的信息点就有：司机位置、乘客位置、等车时间、补贴金额等元素，并需要思考它们之间的关系和呈现方式。
可以发现从业务目标转化到设计目标这个过程，实际上就是在确定功能和信息点的过程。这样才能让我们更好地设计信息架构。
从前文可以看出我们会在整体设计过程中出现很多的信息元素。如果不经过对应的组织和处理，直接堆叠在一起，那么信息含义会比较乱且难以调用。比如下方：
而右侧图片信息的组织过程可以理解为通过将零散的数据信息进行分类，再以某种结构化的形式将它们重新组合排布的过程，直白一点就是先分类，再结构化呈现。我用一张图来表明这个过程：
那么这个过程中「信息组织」和「结构呈现」到底应该怎么做，也就是接下来要讲的组织方式和结构类型。
组织方式可以分为精确分类和模糊分类。精确分类就是我们会利用物体本身物理属性来进行分类，比如位置、字母表、时间、类别、层级等方式进行组织。一些工具类应用例如滴答清单内容信息都是按照时间来进行组织的：
而模糊分类则是按照更为主观的逻辑对信息进行分类, 如主题、任务、用户、隐喻等来进行归类，比如我们常用的APP商城是按照不同的主题类别来进行区分的。
但在很多时候，产品倾向于将两种组织方式结合起来形成复合型组织方式，从而能够使我们的整体组织形式更符合用户的使用习惯。比如蓝湖的信息组织，其中既包含了模糊分类（按使用类型等分类），也包含了精确分类（按上传文件时间等）。
其实在大部分B端产品中，大都按照模糊分类来进行处理，比如按照任务、流程等方式。而精确分类更多用于在页面内的局部信息模块，比如创建时间和文件大小等。
归根结底，我们分类方式的选择需要结合我们前面提到的用户、场景和目标，这样才能让我们的分类更具说服力。
当信息按照分类维度组织后，我们接下来就是把整体信息进行结构化，这样才可以将信息整体连接起来并呈现出来。一般分为以下四种组织方式：
A.层级结构（最重要的结构）
这是信息架构中最为常见的结构，也是比较符合用户认知的结构。有时也称为「树状结构」。以子父节点的形式一层一层延展。
层级结构的优势就在于可以承载复杂的多层级内容，通过层级递进的方式将复杂的多层级拆解得更简洁。
但我们需要把控好内容的广度和深度，广度指的是在层级结构中每一层的数目，最好控制在7个以内。如果广度太宽意味着每个页面会给用户展示太多的信息，增加寻找内容的负担。深度为纵向结构，建议一般3层，最多不超过5层。过深的层级会让用户点击很多次，且不容易被用户发现。比如飞书的基本信息架构也是主要以层级结构来进行的。
B.矩阵结构（多维度结构）
矩阵结构是各个节点都相互连接的一种信息架构方式，通俗来讲就是用户既可以通过多个维度去触达同一信息，也可以从单个维度连接多种信息。
这种结构其实就更类似于我们在做相关功能时：比如当你进入电影全屏时想要退出时，既可以通过点击按钮退出，还可以通过键盘的Esc返回到，通过多点触达同一操作。
又比如我们的联系人功能，我们既可以通过输入数字拨打电话，也可以查找联系人进行拨打，还可以查询电话记录进行回拨。
矩阵结构最重要的意义在于给用户提供多种路径，使用户能够在不同路径中寻找各自想要的东西。
C.自然结构（随机性）
自然结构不遵循任何一致的模式，节点都是被逐一连接起来的。
自然结构一般都具有随机性和不确定性。这种更倾向于泛娱乐化的C端应用。比如我们常见视频网站的在推荐流都是应用的自然结构。比如打开B站等视频平台，你很难猜到刚进入看到的是什么。
但一般自然结构不会单独存在，比如B站在自然结构中也绑定了层级结构来进行层级上的划分。
D.线性结构（单一性）
线性结构是非常单一的一个结构，整体是一层一层向下递进。比较强调先后顺序的一种结构。
这种结构通常用于我们常见的软件安装程序等，也可以用于部分功能结构，比如网站的视频发布，一般都是经过上传-编辑-发布这三个步骤来依次进行。
大家可以发现在进行信息架构时，我们在很多情况下可能会运用多种组织结构方式，我们需要根据对应的用户决策场景来考虑让最适合的几种方式相结合。但最终目的都是为了让用户能够更快速的获取信息。
在信息的组织过程中，我们需要注意用户的心智模型。比如当我们看到红点就知道有新信息通知，看到下拉箭头就知道可以展开。这是互联网产品在无形中给用户建立的底层习惯认知。用户目前对于普遍产品的一些基础布局、功能名称和交互逻辑都形成了一定的习惯，这都属于用户的心智模型的内容。
因此我们在组织信息时尽可能不要去打破用户常见的心智模型，否则必然会导致用户的不习惯。我们常见的「扫一扫」功能，微信、支付宝和QQ会隐藏在「+」号里面。而微博和抖音却分别放置在了「我的」和「搜索」里面。
这样会导致用户难以发现该功能。因为用户接触新的信息时，会以最初接触的局部信息为依据展开并形成初步认知，而用户认知中的信息组织逻辑和实际信息的吻合度越高, 他在进一步查看或寻找信息的过程中体验会更顺畅, 反之, 若一开始形成的认知与实际信息的差异过大, 在后期的信息搜寻过程中则容易遇到困难。而这个吻合程度其实就是用户心智模型。
虽然建议在一定程度上遵循用户心智，但并不是说绝对遵循。对于用户不熟知的场景或者某些专业术语，我们需要通过灵活有效的提示（比如标记注释等）来引导用户就可以了。比如我们刚才提出的抖音扫一扫，它的应用场景其实是用于抖音官网后台登录，且在后台登录时已经给出了对应提示，那么这样的设计也是合理的。
当经过上面的信息组织，其实我们已经能够归纳出一个大体的信息架构框架。但在信息组织之外，我们还需要关注以下三点：标签、导航和搜索。这对于信息架构的完整性也有非常重要的意义。
标签系统，通俗来讲就是要我们对当前整个系统信息节点的命名，从而让信息的呈现更容易识别。拿个最简单的例子来进行说明：
可以看到左侧和右侧关于卫生间的信息标示，可能左边你能一眼区分，右边可能就需要反应半天才能猜出到底代表什么含义了。
这其实就是关于我们的信息命名是否能够被大多数用户所接受的场景，也就是我们标签作用所起的作用。标签可以分为图片和文字标签，都需要考虑用户对该信息命名的认知程度，也就是前面提到的心智模型。那么如何能够更好的去定义标签名称呢，这里需要注意2个方面：
A.优先选用被行业广泛接受的词或图标
在进行标签定义的时候，尽量选择已经被用户所熟知的词语，比如「工作台」「通讯录」等已经被运用得非常熟练，对于类似功能就直接以该形式命名，比如我们的设计软件中，很多图标和功能名称都是通用的：
这样做能够很大程度减少用户的学习成本。因此在B端设计中我们也需要注意到我们所在的行业，哪些名词已经达成了共识，就无需再造新名词。
B.不确定的词语可以参考竞品或调研来决策
当某类功能或场景的标签难以确定时，我们就可以尝试去找一下竞品是否有类似功能，或者找该行业的领头羊（比如聊天工具的巨头微信），那么在进行标签定义的时候，可以参考它的命名体系。因为它已经替我们教育了一部分用户，会间接降低学习成本。
如果某些标签在上述过程中还是无法确定，那么我们结合自己经验或者与咨询业务相关人员来进行讨论，在必要时候可以在标签旁边添加注释来进一步说明。
导航系统其实应该是大家比较熟知的一个系统了。就像使用导航系统来规划行程一样，导航系统都会存在于每个网站中。比如我们常见的侧边导航、顶部导航等。
因为网上关于导航系统已经有很多资料的讲解了，在这里阐述下四类导航的含义：
1.全局导航：位于页面最上层的导航，用户几乎在页面的每个地方都可以看见，是最高层级的导航系统；
2.局部导航：位于最高导航的下级子类导航，子类导航并不是必须的导航，根据场景进行取舍；
3.情景式导航：通过点击文字链接进行跳转的导航，比如在个人资料里面植入其它网站的链接地址；
4.辅助导航：这里包括网站地图，网站索引，网站指南等辅助类型的导航。
辅助导航的网站指南包括新手引导和演示教程等。现阶段更巧妙的功能引导，是当用户在进行某些功能的操作时及时进行提示，这样不仅达到了为用户引导的效果，还减少了一连串的新手引导对于用户的打扰。比如figma在进行组件更新后，只有当你调用组件功能时，才会及时进行提醒。
搜索，是我们平日最常用的查找信息的功能，它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要，但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索时需要考虑下列三点：
1:内容复杂度：当前页面承载的内容复杂度如果较少，对于简单内容页面往往不需要搜索；
2:内容性质：当前页面的性质是偏向于用户浏览还是查找，根据用户行为来决定是否需要搜索；
3.搜索场景：如果搜索场景很简单，考虑是否只用筛选或分类就能够解决问题；反之如果搜索内容很复杂，我们还可以搜索结合筛选来更好的查找信息；
上述3点决定了我们是否需要考虑搜索功能。而关于搜索的其他细节点，比如搜索规则和搜索结果等，在这里不做进一步的阐述。在这篇文章中更重要的是弄清楚我们何时需要搜索功能。
我们通过上述方法已经知道如何梳理信息架构了，那么我们应该如何呈现它呢。这部分其实也是很多资料中比较模糊的点。
在学习的过程中，发现部分资料认为信息架构就是单纯的指思维导图，但实际上信息架构并不能单纯只用思维导图就能够完全表示。
因为信息架构包含了很多部分的内容。只能说思维导图可以是信息架构的一种表现形式，其可以帮助我们在思考阶段梳理整体产品的信息构成。
这里抛出一个很有意思的观点，那就是「功能结构图」和「信息架构图」到底什么关系，这里用两张图示例：
可以看到，功能结构图更多体现的形式是功能阐述，一般形式为名词+动词，比如头像设置；而信息架构图重点呈现的应该都为信息元素，一般为名词，比如头像图片。
但在大多数时候我们看到的产品架构图，其实更偏向于功能结构图和信息架构图的结合。因为在很多时候阐述信息构成时需要依赖功能进行辅助说明。
因此这篇文章讲述的信息架构更偏向于基于产品的整体架构。其实信息架构对于呈现形式并没有特别的限制，只要能够帮助你清晰表达产品整体结构就行。《信息架构：超越web设计》第4版中其实也并没有对表现形式这一块进行严苛的定义，其用「显示信息元素间的关系——站点地图」的说法概括了信息架构的呈现形式，其表达如下：
可以看到其表达形式包括思维导图和流程图等形式：思维导图的优势是能够总览全局信息，查看信息的深度和广度，而流程图的优势则更能够表达整体的逻辑关系。
因此信息架构的呈现需要根据你的产品场景选择合适的视觉框架表达。不必让形式限制了我们的发挥，而是应该形式追随于我们的架构表达。其只是一个信息梳理结构的说明结果（类似于中间态），我们需要借助它来更好的阐述思路与沟通想法。
在输出信息架构之后，其实这里想聊一聊页面的呈现。因为当梳理好大的框架后，剩余的页面细节其实都需要通过原型图来进行体现。这个过程是从框架到页面的阶段，其实对于设计师来说也是很重要的部分。在这里根据自己的理解列出了以下几方面的注意点：
A.页面能够让用户看懂
这其实就是涉及到我们的信息组织和标签系统。如果当我们的某个页面不能让用户第一时间获取到该页面表达的信息，反思一下是在哪个方面做得不好。是标签系统含义模糊呢，还是信息的组织分类方式不对。从页面呈现倒推信息架构。
综合来说就是设计时的排列要考虑用户的心智模型（比如网页的常规排版和通用名词定义等），对于某些难以理解的地方给予用户帮助和解释。虽然B端产品想要完全避免学习成本是不可能的，但我们可以尽量减少其学习成本。
B.考虑用户的视觉动线
当我们在进行信息排列时，这时需要思考的就是用户的视觉动线，也就是我们常说的视觉浏览「F模型」和「Z模型」。对于不同的信息流来说，采用不同的动线模型能够让用户更好地查找信息。
F模型和Z模型的使用区分其实就是在使用场景上，对于内容页面来说F模型会更为合适（比如文章或者搜索结果），适合文本类的内容。但对于非文本的页面，则更适合用Z模型，Z型模式的设计跟踪了人眼扫描页面时的路线——从左到右，从上到下，能够更好引导用户的视线。
C.掌控好适度的信息层级
B端由于在视觉的发挥空间不多，那么相对来说保持良好的信息层级能够让整体的体验变得更为良好。
不管是原型图还是视觉，整体的视觉层级要体现得更为清晰。按理说最好的视觉层级控制在三级左右。如果发现视觉层级过多，需要考虑是不是因为信息架构设计时纵向层级过深，通过调整架构的形式来更好的呈现信息。以及对同页面的信息进行重要程度分级。
当我们做完或者听别人阐述对应的信息架构时，该如何评判呢，到底怎样的信息架构才算优秀呢。个人认为可以从3方面去进行判断：
业务层：
1.设计目标合理：能平衡商业目标和用户的目标，保证客户和用户都有较为良好的体验；
2.核心任务目标：能够让用户顺利完成产品的核心任务，需要通过用户测试来进行验证
结构层：
1.平衡广度和深度：在进行功能使用时不会隐藏的太深而找不到，是否有冗余步骤
2.保证拓展性：当前信息架构在面对未来新增或者删减信息时能够稳定拓展
体验层：
1.保证易读性：用户不经过介绍，通过页面信息呈现能够看懂该产品是用来做什么的
2.保证易查找性：用户在需要某个功能时能否快捷的找到，是否有多种查找方法（比如搜索或筛选）
合理的信息架构需要具备以上条件，我们需要在做设计呈现时也尽量保证以上条件。但在很多情况下其实并不能完全满足，这个时候我们需要根据业务目标的重要性来选择某些点进行满足。
梳理一下整体文章的架构，其实是按照「是什么-为什么-怎么做」的形式来进行拆分的：
这篇文章想要表达的观点，不是让设计师独立去梳理整体信息架构，而是让设计师拥有信息架构意识，了解其是如何进行并产生的。这样你在看到整体架构时，有足够的理论支撑去判断它的好坏，并通过自己的理论认知去理解和改进不好的地方。
当我们对信息架构有足够的认知时，我们在设计页面时才能有合理的思考方向，做出「正确的设计」，避免成为无情的作图机器。信息架构作为产品交互视觉最底层的支撑，只有骨架搭好，对于用户的使用体验才能够有本质上的提升。
注：文章中不可避免会存在不足之处，如果对文章中内容有更好建议，欢迎随时交流。
参考资料：
《web信息架构》第四版
《信息焦虑》
《用户体验要素》
《信息架构设计》
「从设计前/设计中阶段，了解信息架构知识点」
「互联网产品如何搭建信息架构」
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：站酷 作者：进击的M
明确和理解问题就是要看透这个问题的本质是什么，明确要解决这个问题可以用到的资源都有哪些。
理解问题的重要步骤：1.问题痛点梳理；2.产品功能流程图梳理；3、用户画像分析；4.数据分析（热力分析、留存分析、事件流分析）
拆分问题就是问题痛点的出现核心问题，拆分问题涉及的维度的关联性拓展有哪些。
拆分问题的重要步骤：1.用户的核心行为路径分析；2.功能头脑风暴；3.解决方案的探讨
【背景】
配送的打印功能主要服务于行政管理人员，每天对配送模块的订单和司机管理，进行打印操作，打印前会频繁配置不同打印需求
【现有问题】
1、满足功能上，体验上缺乏引导，导致用户学习成本较高；
2、历史包袱，随着功能需求不停迭代，功能层级划分混乱，导致用户操作理解时间成本较高；
【前期准备】
理解问题模块—问题的梳理：
交互上：操作复杂，交互组件错误使用，体验感差，难用
功能上：功能臃肿，层级划分混乱，难理解
【理解问题模块—功能流程图梳理】
【解决问题模块—数据分析（热力分析、留存分析、事件流分析）】
1.热力分析（GIO）
配置的需求基本上30天数据反馈可以看出，没必要进行“配置页”为主路径。
这里可得出：是否存在每次打印设置的需求，为以后的交互迭代提供快捷配置的可能性。
2.拆分问题—用户的核心行为路径分析：
主路径：查看列表——批量打印——打印完毕（80%）
特殊：查看列表——批量打印——设置模版——打印完毕（20%）
3.拆分问题—解决方案的探讨：【核心：以人为中心 解决问题】
交互上：操作复杂，体验感差，难用
功能上：功能臃肿，层级划分混乱，难理解
【功能层：功能梳理重组】
【交互层：信息关联】
1.交互关联性更强，现在是联级反馈，解决点击一级内容不知道二级内容的编辑的可视区域；
2.功能信息更直观，布局界面可看出功能逻辑，勾选后及时反馈，解决经常忘记勾选打印的选项；
【方案输出】
方案一：配置页的构想，假设在设置模块有单独承载打印配置的区块，而当前对话框的勾选内容是便捷选项，如需要更深设置，需跳转到打印配置区块
方案二：列表的打印功能添加，全局设置，与当前对话框选择设置进行协助配置，如：列表全局的打印功能设置“不再弹出窗口”设置，点击当前的对话框，是直接打印操作
【可用性测试】
采用行为观察法。
【迭代成果】
迭代前 迭代后
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一些有用的建议和工具帮助你与患者、医生、医院管理人员和其他医疗保健利益相关者一起进行设计。
近年来，医疗保健组织开始使用“设计师”方法进行创新，以提高患者和护理人员在设计和提供医疗服务的参与度。然而，将设计方法引入医疗部门也是困难重重：思维方式的差异可能导致双方关系紧张，同时我们仍需要提供更多的证据，证明设计实践会给医疗保健部门带来更多的价值。
1.调整所有人的目标
在处理服务设计项目时，无论是参与式还是共创式，我们需要从一开始确保所有利益相关者的目标和期望一致，以促进合作顺利有效，产生有意义的成果。
所以我们可以用到Expectation Map或者the Alignment Canvas这两个工具可以帮助理解人类的愿景和优先排序，从而使团队对项目的理解同步起来。
这两个工具在项目初期调整成员目标，构想用户对服务的期待，建立同理心，全面地呈现了不同的观点。
这个工具包提供的帆布是个简单的表格，帮助确定每个涉众的价值和目标，突出公共点和交叉点，利用不同角色不同价值的可视化卡片填充画布。
建议
-每个利益相关者可以从卡片中选择自己的价值观或添加价值观，讨论相同点和冲突点，制定共同目标。
-如果项目涉及三个以上的利益相关者，可以采用相同的概念模型来反映所有价值观和共同点。
2.了解项目生态系统
医疗服务中有各类行为者，行为者之间以及行为者与用户之间存在特殊的关系。因此，我们必须清楚当前设计服务的影响人，以及影响程度。
使用利益相关者地图反映不同行为者的角色和责任，以便更清楚地了解你正在设计的服务生态系统。
利益相关者地图不仅有助于可视化服务系统和用户体验中的不同利益相关者，还可以可视化相关者与主要用户的互动程度。这个模版将医疗领域的利益相关者分为三类：医疗经营者，辅助人员和大型病人群体。
建议
-将代表主要用户或利益相关者的行为者卡片放在中心位置。
-将行为者卡片按照利益相关者群体进行分类，并将卡片放在画布的相应区域。
-将那些与主要利益相关者互动程度较高的行为者放在内圈；除了医疗系统外，还要考虑的更广阔的生态系统。
3.反应不同的用户类型
研究项目背景，收集服务生态系统中人们的行为、动机和特点等第一手资料。构建角色有助于更好地了解设计医疗服务中的病人和医生（或其他医疗经营者）的需求、习惯和态度。
为了更好地促进这一阶段的分析，工具包中的角色模板记录了病人和医生简历上的一些具体的医疗信息，如疾病类型和医疗知识。
建议
-对于病人角色，首先选择病人和疾病类型。
-对于医生角色，首先选择医生简历，记录痛点。
-利用卡片，选择与角色互动的环境和行为者，喜欢的互动渠道，价值观和经历的情感。
4.分析经历 构想更好的服务流程
我们都清楚，用户旅程是一个强大的工具，能够绘制服务体验，包括现有服务和待设计的服务。
我们也可以与病人或医疗行业的其他利益相关者共同绘制用户旅程，建立对用户体验的理解。
你也可以直接与利益相关者合作，确定具体痛点和在服务中可能造成摩擦的其他因素。
这套工具所建议的医疗旅程图可以用来分析病人和/或医疗操作者的体验并进行可视化，涉及到体验的所有成分：角色，行为，方式以及在接受或执行医疗服务时所经历的感情变化。
建议
-写出用户旅程地图需要的人物简历。
-卡片用为触发材料，促进病人和医疗相关人员分享经验，讲述故事。
-选择每个动作所经历的情绪，并将其垂直投射在相应的动作上。
-患者的用户旅程可以按照整个治疗过程绘制，有助于理解不同医疗步骤之间和相关部门之间的交叉点，以及可能出现的问题，形成一个全面的体验观。
5.通过评估 确定想法的优先性
在建立背景框架，分析了观点和体验之后，我们开始设计解决方案。让不同的利益相关者参与概念生成，方便作出改变或促进相关方接受新服务。
一旦确定了解决方案，接下来就要挑选最有潜力或最合适的解决方案，这项任务也十分困难，尤其是在复杂的环境中，比如与医疗有关的环境中。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在生活中，有一些规则是你绝对不能打破的，如果你打破了，将会付出惨痛的代价。在用户界面设计中，也有一些必须遵守的规则。它们被称为“启发式”或提高用户界面可用性的一般原则。这些是经过了长时间测试的可重复的模式，可以帮助用户更好地浏览界面。一个良好的设计一定会考虑到以下原则，一个不那么好的设计总是会缺少其中的一个或多个原则，那么作为一个UI设计师，为什么要忽略这些原则让你的用户如此头疼呢？
该系统应在合理的时间内通过适当的反馈使用户了解正在发生的事情。
你要不断地给你的用户展示适当的信息、提示和背景，使他们在任何时候都知道他们在系统中的位置。这可以让用户感觉自己处于控制之中，知道下一步该做什么。这个项目被添加到购物车了吗？编辑的内容被保存了吗？这个过程需要多长时间？我的订单的状态是什么？现在正在发生什么？不断地为用户回答这样的问题，不要让他们猜测或蒙在鼓里。
2.将系统与现实世界相匹配
你设计的系统应该使用用户熟悉的语言，使用用户熟悉的单词、短语和概念，而不是使用专业地术语。你要遵循现实世界的惯例，使信息以自然和逻辑的顺序出现。
使用熟悉的词语和语言，不要让措辞过于复杂。屏幕上的单词或图标的含义应该对目标受众清晰易懂。人们还带有心理模型和经验，可以让他们解释图标。
技术的最大进步之一是图形用户界面的出现。在图形用户界面之前，计算机屏幕上只有晦涩难懂的文字命令，每当你想执行一个动作时都要记住并重复。然后，一切都改变了。屏幕上显示的是文件夹和文件的小图像以及一个手形光标。这些都是人们能够立即理解的视觉符号。不需要解释，因为它引用了现实世界的心理模型。
3.一致性和标准
用户不应怀疑不同的词语、情况或行动是否意味着同样的事情。
有两种类型的一致性：内部和外部。内部一致性是指你的网站或应用程序中的模式要一致。这很简单，比如在所有的页面上保持相同颜色的链接，或者在每个屏幕上对相同的概念使用相同的图标，比如HOME。外部一致性是指大多数人使用的其他软件和系统中的惯例，如购物车。大多数人都熟悉购物车的使用方式。你不需要重新发明什么东西。如果你这样做，你可能会让你的用户更难学会你的购物车如何工作。保持一致，为用户节省不必要的混乱。
4.用户控制&自由
用户经常会错误地选择系统功能，并且需要一个明确的“紧急出口”提示才能离开不需要的状态，并且无需通过扩展对话就能支持撤销和重做。
始终为用户提供一条出路。不要强迫用户执行他们不需要的功能，或者把他们引向死胡同。例如，如果你正在设计一个结账流程，如果用户愿意，就让他们继续购物。如果他们试图在一个应用程序上执行一个动作，当他们在最后一刻不确定是否要继续时，就让用户取消。
5.错误预防
比起错误提示信息更好的是一个精心的设计，它可以从一开始就防止问题的发生。要么消除容易出错的条件，要么检查这些条件，并在用户承诺行动之前向他们提供一个确认选项。
当系统操作到很关键的一步时，如删除文件或向1000个收件人发送电子邮件，要确保用户知道他们将做一些重大的事情。向他们展示确认对话或提供额外的信息，清楚地定义在行动之后将发生什么。这将防止他们在不确定自己的行动时进一步行动。这也将为他们省去大量的遗憾。
6.利用识别而减少回忆
通过使对象、行动和选项可见，尽量减少用户的记忆负荷。用户不应该记住从对话的一个部分到另一个部分的信息。在适当的时候，系统的使用说明应该是可见的或容易检索的。
作为UI设计师，我们的目标之一是减少用户的认知负荷。记忆以两种方式工作：识别和回忆。识别是指你立即熟悉的东西。比如一个人的脸。你看着一个朋友的脸，你马上就知道你以前见过他们。回忆的作用则不同。它是你必须从记忆中检索出来的东西，比如一个人的名字。回忆通常需要更多的时间和工作，因为你的大脑必须处理更多的信息来破译它所看到的东西。
另一方面，识别是即时的。我们希望在我们的用户界面上具有更多的识别，而减少回忆。实践这个原则的一个很好的例子是使用普遍可识别的按钮和图标来表示功能，例如用房子表示 "家"，用铅笔表示 "编辑"。如果你必须为你的用户界面设计新的图标，而大多数人以前从未见过这些图标，那么请使用文本描述符来澄清并减少认知的负担。
7.使用的灵活性和效率
新手用户看不到的加速器通常可以加速深度用户的交互，这样系统就可以同时满足没有经验和有经验的用户的需求。允许用户定制频繁的操作。
当某些任务在你的应用或系统中反复出现时，你可能想让用户更有效地进行互动。例如，使用滑动手势来保存或删除移动应用程序上列表中的项目。删除一个项目的正常方式是打开一个项目，然后按下删除按钮。专业的方式（也是更有效的方式）是通过简单的滑动并立即从列表中删除项目。
8.极简主义的设计和审美
对话不应包含不相关或很少需要的信息。对话中每一个额外的信息单元都会与相关的信息单元竞争，并降低它们的相对可见度。
当为艺术而设计时，如果我们走巴洛克风格，可以用人工制品、纹理和图像填满屏幕。但是当为交互而设计时，我们的目标是降低信噪比。这样做会使我们的界面对用户来说更容易理解。你可以应用这个原则，把屏幕上显示的内容减少到最低限度，不管是图像还是文字，这样用户就可以专注于手头的工作而不会分心。
9.帮助用户识别、诊断和恢复错误
错误信息应该用简单的语言表达，精确地指出问题，并建设性地提出解决方案。
错误会发生，那是不可避免的。用户遇到错误后发生什么是UI设计师的责任。因此，我们应设计可以理解的错误页面和提醒来帮助用户，并提供解决问题的选项或方案。例如，让我们来看看无处不在的404页面。作为设计者，我们知道错误的404页面意味着什么，但用户一般都不知道。为了帮助用户，我们必须把404翻译成简单的语言，加入一些文案，使其清楚地知道刚刚发生了什么，比如 "对不起，我们找不到你要找的页面。这里有一些具有类似内容的页面建议......"。
10.帮助&文件
尽管系统不需要说明就能使用的话会更好，但可能还是有必要提供帮助和说明。任何这样的信息都应该易于搜索，集中在用户的任务上，列出要执行的具体步骤，而且不要太多。
始终让人们能便捷地获得帮助，把帮助放在顶栏或主导航区的显要位置。当用户遇到问题而不能轻易找到解决方案时，他们必须被引导到一个可以解决问题的地方。这可以采取FAQ页面的形式，用一个搜索框提供可能的建议和答案。在没有答案的情况下，系统必须有一个选项，可以通过支持在线询问或电子邮件或电话，直接与支持部门联系以获得额外的帮助。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：站酷 作者：磨刀modao
文章大纲：
1. 淘宝为什么不淘了
2. 淘宝的基础内容设施
3. 淘宝没有种草经济
4. 让人逛下去的产品设计
5. 逛逛和小红书的设计区别
6. 写在最后
淘宝成立于2003年5月，当时最早的slogan是：“淘你喜欢”，这句话的主体是以平台角度出发，对用户说的，意思是让用户来平台选购商品。
随后2005年，slogan变成了“淘我喜欢”，主体从平台转变成了用户，意思是让用户自主选择来平台购物。
在最近的2021年，淘宝的slogan变为了“太好逛了吧”。代表性的是淘宝app打开的启动图从玲琅满目的商品图，换成了新的slogan：
图：淘宝启动页变化
图：淘宝的slogan变化
淘，又有“筛选”的意思，而筛选行为是要对某具体目标进行的，不可能凭空筛选，这个目标产生的过程，就是我们常说的“用户需求”。
“用户需求”的产生一般分为两种：有目的的需求和无目的的需求。
有目的的需求：需求产生的过程有户外广告、朋友推荐等。以这种方式产生的需求，用户会带着明确目标，这时用户直接打开软件，通过搜索，直接缩小商品范围，更快触达目标商品，在这种场景下，用户明显没有“逛”的心情。
无目的的需求：当用户在没有明确目标的情况下打开软件时，用户购物意向都是比较模糊的，没有明确选择区间。此时，如何让用户产生购买欲望，是产品设计时必须要重点思考的。
图：需求产生的类型
我们都知道，淘宝最开始的定位是“淘”，主打的是以导购型社区为目标，主要解决“用户来平台需要买什么”的问题，也就是有目的的消费需求。
针对这类用户，最简单的思路就是“让用户买到想要的东西”，基于这一思路，淘宝推出了“千人千面”的算法机制。
随着淘宝算法越来越精准，用户购买越来越效率，导致很多用户对于淘宝的使用心智固定在了购物平台，而不是内容消费平台。
但是算法是有一定的滞后性的，只有在用户产生数据后才能够进行精准推荐。（这个数据可以是在淘宝平台产生的，也可以是在其他平台产生的，比如说通过搜狗输入法输入了某个商品名）
所以单纯的靠精准的算法推荐，并不能解决用户的潜在需求。
图：不同需求类型的解决方案
在淘宝店铺的运营中，有一项重要的指标叫UV价值，指的是平均每个客户在店铺的销售额，数字越高说明访客的转化率越高，转化高就代表最终的GMV会高。
而根据淘宝的数据统计，店铺粉丝级别越高，对店铺的粘性越强，UV价值也就越高。最终反映在淘宝数据上就是GMV高，既利于平台，也利于商家。
粉丝的积累需要流量，而淘宝店铺的流量来源一般分为：淘宝站内、淘宝站外，其中有包括淘宝推广、搜索竞价、淘宝客、直通车等方式，但这些流量通常是不稳定的，免费流量自不用说，付费流量的投入成本也对店铺的资金有一定要求。
所以店铺需要把这些吸引的流量，转化成店铺的粉丝。
举个例子，在很多电商平台上，店铺会有自己的引流款，这些商品不是为了毛利。只是起到为店铺引流的作用。
因为对于平台的店铺来说，持续不断且稳定的流量增长，不仅可以推动销售的稳定增长，也利于长期的发展方向。
图：淘宝流量来源
早在2015年，当时淘宝内部孵化淘宝头条，分享优质的消费类资讯内容，当时淘头条的MAU（月活跃用户）过亿。但随着视频内容的崛起，图文形式逐渐走下坡路，淘宝看准了直播带货的赛道，开始逐渐布局淘宝直播的内容形式。期间也相继加入了微淘、有好货、买家秀、好物点评团等内容形式。
但是这些内容一直分散在淘宝各个功能模块中，没有形成一个整体的社区化。
图：淘宝的内容矩阵
其中最成功的应该就属淘宝直播了，根据淘宝直播2021年度报告：2020年淘宝直播带来的GMV超过人民币4000亿元。
但是，直播的内容形式注定是以主播自上而下中心化的，用户是跟着主播走的，一旦主播下播以后，这些观众也会失去购买目标。
并且由于直播属于一对多的形式，越大的主播，观众越多，这时候主播和观众的互动率是很低的，久而久之，用户的互动积极性也会受打压。
图：以主播为中心化的淘宝直播
除了淘宝直播，近年来另一个改动比较大的应该就是微淘的出现了，在逛逛出现之前，一直占据底部栏的二号位，它的内容形式主要以店铺上新、直播、福利为主。
这也是淘宝在店铺私域流量运营上做的一次尝试，目的是为了让用户更容易和店铺产生连接。但是实际上，由于微淘的内容形式之间关联性不大，业务场景混乱，一些刚起步的商家也没有资源拓展多业务场景，导致内容质量参差不齐，影响转化。
淘宝做微淘中做内容的目的是为了让用户有东西可以逛，但是逛内容就代表着用户购买需求不明确，这又与营销场景相冲突（营销场景是为了让用户快速下单完成购买），所以微淘也一直被诟病转化率低。
图：微淘主要的三个问题
后来在2020年年底的时候，淘宝迎来了另一个比较大的改版，猜你喜欢变成了纵向的信息流，点击猜你喜欢进入的是一个流量的中转站。比如说点击一件衣服，下面全是衣服的推荐。
新版猜你喜欢的特点很明显，牺牲转化率，增加用户使用时长。在实际点击进入信息流中，用户总感觉下面有新的内容，这时候用户的心态普遍是浮躁的，会使用很短，甚至一两秒的时间决定是否深入了解产品。如果不喜欢，就会滑到下一个产品，无形中增加了用户在平台的停留时长。
据淘宝官方数据表示，此次猜你喜欢的大改版，淘宝用户的点击率和用户时长都提升了20%。
图：猜你喜欢改版，通过牺牲转化来提高使用时长
逛逛是以UGC内容形式为主的种草平台，顾名思义，就是消费者在无聊的时候，可以到处逛逛。
如果说信息流是纵向的内容推荐，那么逛逛就是通过大数据，横向的推荐内容，最终向商品引流。丰富的内容为其他消费者带来沉浸式购物体验，类比线下商圈，就是逛着逛着就把东西买了。
AISAS模型是一种用户决策分析模型，由电通公司（日本第一大广告公司）提出，是消费者行为学领域很成熟的理论模型之一。
AISAS模式将消费者从产生需求到最终完成购买的路径分成了五个阶段，既Attention（注意） - Interest（兴趣） - Search（搜索） - Action（行动） - Share（分享）。其中消费者在注意商品并产生兴趣之后的信息搜集（Search），以及产生购买行动之后的信息分享（Share），是当下互联网消费时代尤其重要的两个阶段。
搜索就是当用户对某商品产生兴趣之后，消费者会通过线上或者线下渠道来收集相关产品的信息，比如说评价、打分等。分享是在购买路径完成后，用户自发向身边人推荐商品的阶段，也就是口碑裂变，当然也有可能变成商品吐槽大会。
但是，在前文也提到了，搜索是在有明确对某个商品产生兴趣之后才会产生的动作，整个消费路径是单向进程的，缺少信息的互动与交换，用户很难有效辨别信息真伪，用户与商家依然存在信任问题，最终的购买壁垒依然存在。
图：AISAS消费模型的流程
随后，DCCI（互联网数据中心）在AISAS的基础上，提出了新的SICAS行为消费模型：
既 Sense（品牌与用户相互感知） - Interest&Interactive（产生兴趣并形成互动） - Connect&Communicate（建立联系并交互沟通） - Action（行动） - Share（分享）。
Sense，感知：品牌（商家） - 用户相互感知，通过多触点，在商家个用户之间建立感知，对用户来说，关注、分享、订阅、推送等，都是有效的感知行为，而商家要做的，就是想办法，通过什么样的方式或内容，让用户有效使用他们的感知行为（分享、点赞、订阅等行为）。
Interest&Interactive，产生兴趣和互动。在产生兴趣上，随着用户对传统的广告曝光和广告产生的印象的敏感度在降低，理解并响应用户的需求正在成为关键。站在用户的角度，观察用户真正想要的内容，衡量内容的指标不再是广告的传播率、曝光率，而是变成了点击率、点赞数、好评度等。
Connect&Communication，建立连接和产生沟通。在用户产生兴趣之后，通过平台提供的服务：客服，问大家，好评团等形式，完成用户信任的积累，帮助用户完成购买决策。
剩下的Action（购买行动）和Share（体验分享）与AISAS模式一样，就不展开说了。
图：SICAS消费模型的流程，以及和AISAS消费模型的区别
综上，SICAS模式前三点的核心观点是建立联系，也就是互动，这也与时下流行的种草经济不谋而合。
种草行为本质上是人与人之间的一种互动关系，互动天然的容易产生强关系链，而强关系也意味着情感联结和信任，最终会形成社群关系。随着越来越多拥有相同消费偏好的用户聚拢，用户消费习惯逐渐圈层化，在各垂直的消费圈层中得到身份认同感。
在这种社群氛围的烘托下，用户更容易表现出高表达欲和参与度，既用户不仅是内容的消费者，同时也会发展为内容的生产者。
图：逛逛想打造的种草生态
综上结合淘宝的问题以及消费模式的转变，我们可以得出淘宝近期疯狂改版的思路：
图：淘宝改版思路
在了解上述淘宝自身的问题和新消费类型带来的冲击后，可以总结淘宝最近经常改版的战略可以分为两个方向：转化的归转化，内容的归内容。
淘宝第一个改版是将原来的微淘升级为了订阅，并且放在首页上的tab，与推荐并列。此次改版，最大的改变就是拆分了店铺运营的内容，让不擅长做内容的商家可以专注自家的店铺运营。
图：首页专注商品转化，逛逛专注内容消费
新版订阅的精选一栏中：包括上新、买家、评测等，这些内容一起构成商家和粉丝的互动模式，吸引新客快速转粉，同时也增加了老客户的黏性。
在之前微淘的版本，用户需要点击微淘-点击店铺-点击订阅，升级后的订阅路径变成了左滑进入订阅页面-直接订阅店铺。点击直播可以直接进入直播间
更短的触达路径加上私域流量的运营，优化之前微淘转化率低的问题。
图：路径图，直接进入直播间，直接订阅店铺
图：提高直播入口权重
另一个重要改版是“买家秀”社区升级成为“逛逛”，为了弱化逛逛的购物属性，强化社区氛围，逛逛在产品的商业化设计上十分克制，主要围绕引导用户进行内容消费和互动为目的进行设计。
在内容分发形式上，分为了以平台推荐为主的“发现流”和以社交关系链主导的“关注流”，更加注重内容垂直和精细化。
图：逛逛的内容分类
逛逛的发现模块与小红书类似，都属于种草型内容社区。内容主要以穿搭、彩妆等淘宝擅长的领域为主。
页面的布局形式和首页的商品流一样，以双列信息流呈现，和单列相比，一方面，给用户提供多样化的选择，承载不同的内容形式（短视频、图文），延长用户在平台的停留时长，同时也为其他内容引流，模拟更真实的线下“逛街”体验。
另一方面，和首页注重转化率的算法机制不同，影响发现流推荐算法的因素除了本身的内容质量，还会受到用户浏览行为的影响，比如浏览内容时产生的关注、收藏、点赞、评论等互动行为。
图：表现内容互动率的互动指标
逛逛相比首页推荐，去中心化的机制也更加明显，举例来说，小米官方店的号，粉丝量达到了千万级，但是内容的互动率很低，点赞评论甚至不超过个位数。
个人认为是因为品牌天然的自带营销属性，用户在看到品牌账号时，很容易形成品牌注册账号是为了卖产品给我的刻板印象。
这也反映了逛逛的流量重点落在消费者的内容上，以消费者视角为突破口，摆脱和商品相关的品牌属性，注重普通用户对商品的真实评价，而不是围绕IP账号产生的内容消费。
图：小米账号和个人账号互动率对比
在用户路径的引导上，发现页并不支持点击头像进入用户主页，只能先点击进入内容详情页然后才可以进行关注等操作，即先看内容，再关注人。
图：更关注内容转化率
另外一个人关注流的动态则加强调社交关系的转化，因为是经过用户主动“关注”过后筛选出来的内容，是内容生产者和内容消费者相互选择的关系，所以在产品设计上以单列大图为展现形式，帮助用户消费内容。为了防止让用户感受到广告的营销感，产品设计上特地强调了分享、点赞、收藏、评论等按钮，弱化商品链接。
和其他的社区一样，关注信息流中也会推荐一些“你可能感兴趣的人”，但不同的是，用户无法直接关注推荐的博主，需要先“查看TA”，进入博主的个人页后才可以进行关注操作，这样的目的主要是为了让用户了解达人的领域内容之后，再决定是否关注，这样的关注更加有效，粘性更强。
图：“关注流”视觉设计的思路
“逛逛”的内容形式很好地弥补了淘宝缺乏用户导购的问题（俗称种草），依托KOL产出的优质内容，与消费者产生情感上的价值链接，创造出用户的潜在需求。
这次改版之后，很多人说这是小红书。关注、发现、垂直分类栏，都和小红书很相似。
淘宝和小红书对内容的分发模式是不同，小红书默认分类栏处于收起状态，只有主动下拉的时候太会出现，由此可以看出小红书对自己的内容推荐还是比较有信心的，由于一开始就是做内容起家，所以对自身平台用户的喜好是有所了解的。
但是淘宝是一个电商起家的平台，在内容方面，缺乏对用户的偏好判断，所以逛逛的导航栏下方，会加入了“官方话题栏目”和“官方出品的内容”，利用精选话题引导社区内容的方向，一定程度上也可以通过话题数据了解平台用户的偏好。
图：小红书比淘宝更懂用户喜欢什么内容
小红书等平台不光有购物种草，还有学习、音乐、科普等内容也相对成熟。和淘宝转型社区内容一样，小红书也在进行图文、视频向直播内容扩展的战略方向。所以我们会发现，在小红书的编辑内容上，视频和直播是强露出的，且不支持位置更换。
再来看逛逛的内容，以穿搭、彩妆为首的消费品内容，这些都是淘宝擅长的领域，容易产出优质内容，反过来说，这些内容最终也都是可以在淘宝上可以消费到的，最终还是以平台商品转化为目的。
图：内容形式对平台战略的影响
小红书在内容消费形式上，比逛逛更加注重互动：首页瀑布流点击进入二级的内容页后，可以直观的看到博主全部的文本简介，以及下方的用户评论内容，用户消费的不光是图文本身的内容，也是其他用户评论产生的内容，更容易产生社交关系链。
逛逛则更注重内容本身的消费效率：产品设计上使用沉浸式的下滑体验，用户点击产品图后，进入的是同系列产品的瀑布流，如果想要查看评论的话，需要点击评论icon进行二次跳转，此时用户会一直专注于内容的消费，容易忽略其他用户评价等内容。
图：提高互动率的产品设计
此次淘宝做内容社区的优势之处在于，淘宝将社交关系融入到了商品的消费链路中，消费者通过商品体验、测评、种草等方式，和平台产生互动，建立联系。
而淘宝最不缺的就是商品，并且拥有8亿多的消费者，和其他平台相比，更容易产生垂直领域的优质内容和专业的KOL，但是要想经营一个优质社群，除了需要一批优质的内容创造者，还需要考虑后续涌现的用户是否会对现有社群模式产生冲击。（比如知乎开放用户注册后，导致内容注水的现象）
因为淘宝本身相当于一个巨型供货方，大大缩短了带货变现的路径和难度，不同于小红书这类平台，它们最开始是没有带货模式的，常常需要通过接推广给其他商品引流来变现。
过短的变现路径必然会吸引一些用户或者机构抱着获利的心态涌入社群，这种逐利的心态，也有可能会影响专业KOL的创作心态。
文章来源：站酷 作者：抓马桥分桥
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：知果日记
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
预判设计（Anticipatory Design）是一种能够引导用户、缩短用户行为路径的有效设计手段。使用预判设计方法设计的交互界面，在交互和视觉上的表现总是比用户更远一步。而且这些交互表现是在用户没有作出行动触发的情况下进行的。
预判设计的本质上是一种基于数据收集所做的用户习惯研究和智能推送的设计模式。UX 设计师 Joelvan Bodegraven 曾说过：“Anticipatory Design 是围绕机器学习、预测和用户预期的综合性设计模式。”
好的预判设计可以做到以下几点：
在用户初次体验某种功能时起到引导作用，避免用户产生疑问和不知所措
提前判断出用户的下一步行为，利用合理手段和方法，缩短行为路径
让用户感受到惊喜和关怀，对产品上瘾，产生好感和依赖感
预判设计的主体是用户行为，从用户的视角出发，建立在整个产品的交互里路程和功能框架上，对用户的行为深刻洞察后进行细节的改进。
我们可以从三个维度探索用户行为预判的方法：
从「人」的维度来看，就是预判用户的需求和行为，方法有以下几种：
对用户即将做出的动作做出反馈，且适当突出反馈效果，帮助用户更轻易的看到想要的结果。
Apple 的 magic keyboard 在 iPad 上的鼠标效果，当鼠标圆点靠近功能热区时，系统预判用户需要点击按键，于是会产生自动吸附的 hover 效果。
Mac 上的鼠标效果也做的很用心，当用户在一段时间内不断的摇晃鼠标时，系统判断用户可能是需要找到鼠标，因此会放大鼠标箭头的大小，提示用户鼠标的位置。
通过预测用户下一步的行为，对用户进行直接引导，缩短用户的行为路径，减少操作步骤。
得到 App 预判用户的截图行为的下一步是分享，因此在截图后，可以点击「分享」直接分享到其他平台。
微信会在用户截图之后打开微信对话窗口点击「+」时，显示用户刚刚保存的、可能要发送的图片。
微信朋友圈会在用户再次打开时提示用户直接「跳到还没看的位置」，帮助用户快速定位之前离开的位置。
通过对用户的历史行为数据进行分析，对产品的功能和内容进行优化，符合用户的个性化需求，创造优质体验。
淘宝等电商平台会跟据用户之前浏览过的商品进行推荐，大众点评也会根据用户的饮食喜好进行美食推荐。
Google 翻译里，用户在第二次点击发音按钮时，读音播放的速度会明显比第一次缓慢，因为系统预判用户可能在第一次播放时没有听清，所以才需要播放第二次。
从「时间」的维度来看，是指在特定时间对用户的行为进行预判和推荐，方法有以下几种：
对快要过期/马上到来/必须被使用的功能、信息做及时的提醒，避免用户忘记/逾期/迟到等。
外卖平台会在中饭晚饭前后给出红包/优惠推送、生鲜电商平台会在优惠劵快要过期时给出提醒，行程类产品会在飞机/火车快出发时给出行程通知。
在特殊的时间给用户适当的提醒（包括隐私提醒、天气提醒等），借助节日、活动等时机部分开放功能的限制，让用户觉得自己时刻被关注、被惦记，拉近与用户之间的关系。
美团外卖针对用户所在区域，提前推送天气变化，提醒用户提前下单，以免天气影响用餐时间。
七夕节到来，微信将原本最高 200 元的红包金额调整到了 520 元，是一个惊喜又有人文关怀的产品细节。
从「空间」的维度来看，是指在特定空间或者当地点切换时，对用户的行为进行预判，与用户产生合情合理的交互：
大众点评会在用户切换城市时给用户恰当的提示。
使用支付宝刷地铁站出站的概念页面设计，清晰的展示了出站口的地点信息。
预判设计（Anticipatory Design）的主体是用户行为，从用户的视角出发，建立在整个产品的交互里路程和功能框架上，对用户的行为深刻洞察后进行细节的改进。其设计原则有：
从用户使用的流程出发，减少用户不必要的成本消耗，优化和缩短交互的路径。
思考用户行为背后的逻辑和原因，做产品功能上的优化和调整。
做体验设计改进时不能急功近利或显得过于生硬，要注意力度和用户心智的平衡关系。
预判设计应该使用户在界面的操作过程中感觉到自然，所以大部分预判设计是根据用户喜好量身定制的个性化设计。
最后，记住：用户在实际使用中不应该真正“看到”预判设计，但应该能够感觉到它的存在，并为之感到愉悦。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。
我非常理解这些读者的痛点，因为我在日常的工作中，也经常遇到一些难题。比如同样是滑动，但是些许参数的变化就会导致体验的天差地别，应该如何进行选择。再比如与开发同学沟通过程中如何准确描述自己想要的效果，让最后的结果不至于与自己的预期不一致。这些难题也促使我大量思考，大量体验各种产品的手势操作，希望能够从中总结出规律，让手势的设计与落地能够有理有据。现在经过一段时间的积累，我认为我在这方面可以讲一些能够帮助大家的内容了。不足之处，希望大家指正。今天给大家带来专栏的第一篇《交互手势全解析之位移类手势》。
手势作为图形界面与用户之间沟通的方式之一，在便携电子设备上大量应用。与实体按键相比，它有着纯粹的简洁性和无尽的创造性，手指的个数变化、不同变量的组合能够创造出无数的操控方式。
位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势，本篇文章主要讲解单指操作的位移类手势，多指的位移类手势（如捏合）将放到后续文章中讲解。
一谈到位移类手势，大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而，当我们想仔细谈论他们三者之间的区别时，大部分设计师可能无法准确地描述。为了能够准确描述三者的区别，我们在这里引入三个维度的概念，它们分别是控制方式、稳定化效果、以及阈值类型，这三者的不同的变化组合可以创造不同的位移类手势，拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时，不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势，因为这三个维度的变化就会产生不同的变种，而且不同变种在体验上也存在很大差别，若不分场景随意使用，很容易就影响用户体验。那接下来我们首先了解一下这三个维度。
第一个维度是控制方式，它分为绝对控制和相对控制，也可以通俗的表达为跟手和不跟手，区别如下。
绝对控制/跟手：施加控制的一方（后文简称施控物）的某个属性变化与被施加控制的一方（后文简称受控物）的某个属性变化是对应的。
相对控制/不跟手：施控物的某个属性变化与受控物的某个属性变化不是对应的。
比如在网易云音乐的播放页，左右滑动黑胶时，手指是施控物，黑胶是受控物，手指的横向位置变化和黑胶的横向位置变化是对应的，即绝对控制。上滑调出评论页时，评论页的位置和手指的位置没有对应关系，手指的上滑仅仅控制评论页是否出现，即相对控制。
与相对控制相比，绝对控制允许用户去操控受控物的属性变化过程，因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑，手指的横向位置与书籍封面的变化过程对应，模拟现实生活中慢慢合上书的感觉，如下图。
但是在有些场景，为了避免混乱，属性变化过程是不适合被用户绝对控制的，此时我们应采取相对控制的方案。比如 iOS 的相机中，左右滑动切换拍摄模式，由于前后不同模式之间的页面框架变化较大，切换时会有过多元素的属性变化，如果使用绝对控制就会导致切换拖沓且混乱，使用相对控制就能避免这个问题。
定义
当我们使用手势控制某个受控物时，由于手势的某个属性（如手指位移）达到阈值，进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」，或者也可以称为「吸附」。
稳定化效果能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。
是否有稳定化效果是区别轻扫与另外两个手势即甩动和拖拽的重要维度，当某个位移类手势有稳定化效果，我们就将其称作轻扫。
以滑动切换抖音视频为例，当手指上滑的位移距离和释放速度其中的某一项属性达到阈值后，下一条视频会往上移动一个固定的距离然后进入稳定状态，而不会出现停留在不完整的中间状态，如下图所示。
在 iOS 端的微信消息页左滑某条消息后会出现更多操作按钮，按钮会在手指滑动的距离达到阈值并松开后稳定在一个固定的大小，而不会停在类似下图左所示的混乱的中间状态。
在多内容选择的场景中，如果滑动与选中是绑定的话，一般需要使用稳定化效果。例如在 iOS 相机里选择滤镜时，滑动滤镜选项不但能够控制滤镜选项的位置，并且会自动选中一个位于中间位置的滤镜，位置的稳定化避免了被选中选项的不明确。
如果滑动与选中是分开的，比如美图秀秀的滤镜选项需要先滑动后选中，这种情况下稳定化效果不是必要的。
与效率的关系
不同的稳定化规则带给用户的体验差异是非常大的，最明显的差异是在效率方面。我们使用稳定化效果的强弱来理解，稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。
比如在比较常见的 banner 切换功能中（下图左），无论手指位移和释放速度的值有多高，banner 只能切换并稳定到下一个，不能够一次切换多个 banner。而在网易云音乐的首页排行榜中，一次滑动能够切换多个内容卡片，我们可以说前者的稳定化效果比后者强。
拖拽和甩动虽然没有稳定化效果，但是也存在效率的高低。我们可以将其与轻扫放在一起做对比，如下图所示，拖拽、稳定化效果强的轻扫、稳定化效果弱的轻扫、甩动它们切换效率依次增加。
那么我们决定添加稳定化效果后，如何选择强弱程度呢？选择没有绝对的对错，整体来说主要考虑两点，业务诉求和用户诉求。例如在常见的 banner 切换中，banner 的总数量一般不会很多，业务的诉求是希望尽可能曝光每一个 banner，使感兴趣的用户进行消费，因此这里比较适合做稳定化效果强的轻扫。在云音乐的排行榜案例里，不同用户感兴趣的榜单是不同的，稳定化效果弱的轻扫可以方便用户单次滑动切换多个，快速切换到自己感兴趣的榜单的大概位置。
百度 App 的表情面板原本是左右轻扫浏览表情，在一次改版中改为了上下甩动浏览。主要目的之一就是为了提高浏览效率、降低非首屏表情的曝光难度。
微信视频号的改版是一个典型的案例，旧版的微信视频号的视频流并不是类似抖音那样的全屏化形式和轻扫手势（下图右），而是占据屏幕尺寸三分之一到二分之一之间的卡片形式（下图左），并且使用甩动而非轻扫。视频号问世初期优质内容匮乏，社交推荐算法不完善，贸然模仿抖音式的全屏化形式和轻扫手势的话，会导致用户浏览到劣质视频时负面感受被增强且切换效率变低，反之卡片形式加甩动手势给予了用户更自由的选择空间，提高了用户的切换效率，降低了负面体验。等到如今时机成熟，再从卡片形式和甩动手势换成全屏化形式和轻扫手势就势在必行了。
在某些场景，用户需要先通过高效的方式选择特定区域的内容，然后进入聚焦状态进行内容浏览和慢速的切换，此时我们需要设计两种切换效率不同的手势应对前后场景的变化。如下图，在 iOS 的照片 App 中，先使用切换效率较高的甩动进行粗略切换找到目标图片大概位置，点击进入大图模式时使用切换效率较低的轻扫进行精确切换查看。
触发时机
触发稳定化的时机可以分为释放前和释放后，不同的时机带给用户的体验也不同。释放前稳定化指的是用户使用手指滑动屏幕时，手指位移达到阈值后，手指无需离开屏幕，稳定化即可被触发。如下图左，iOS 的相机滑动切换滤镜使用的就是释放前稳定化。释放后稳定化指的是用户使用手指滑动屏幕时，手指位移或释放速度达到阈值后，手指必须离开屏幕，稳定化才能被触发。如下图右，常见的 banner 切换。
释放前稳定化可以避免拖沓，增加切换效率，但是缺点是无法反悔回退且缺乏掌控感。反之，释放后稳定化可以反悔回退，掌控感强，但是缺点是比释放前稳定化拖沓了一些。
阈值是能够触发变化的最小值。比如当水的温度达到 100 度时就开始变成水蒸气，100 度就是一个阈值，温度是阈值类型。在手指与屏幕的交互中，手指在屏幕上的某个停留时间、位移、释放速度、点击次数等都可以成为一个阈值类型，达到相应阈值后就可以触发相应的变化，常见的变化有受控物的位置、大小、不透明度等，理论上变化可以是任意的。
在位移类手势中，通常会用到的阈值类型有手指位移和释放速度，手指位移是用户在手指触摸屏幕时的位置与之后某个时间手指位于屏幕的位置之间的距离，释放速度是用户的手指在屏幕表面进行位移后离开屏幕那一瞬间的速度。
市面上的 App 暂时不存在仅通过释放速度判定而与手指位移无关的阈值判定方式，因为其不太符合常识。因此我们在设计位移类手势时，能够选择的阈值判定方式常见的有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。
当我们设计手势时，就需要考虑两者的区别。由于 ① 比 ② 增加了释放速度带来的额外移动距离，因此 ① 的主要优点是高效。但是由于我们无法预判释放速度带给受控物的移动距离长短，所以相对应的缺点就是易误操作和不精确。②就恰恰相反，由于不存在释放速度造成的不确定因素，它的优点是不易误操作和精确，缺点是低效。
甩动和拖拽之间的区别就在于阈值判定方式，甩动是 ① ，拖拽是 ② 。如下图，当在微信消息列表找相应的消息时，用户的诉求就是能够快速找到特定消息的位置，对特定消息的出现在屏幕的位置也没有特定要求，只要能够被手指点击到即可，因此选用甩动较为合适，但是对于调节音量、亮度这一类的操作，滑动的范围有限，因此用户对效率没有特别的要求，但是对于滑块位置的精确度有要求，因此选用拖拽是更为恰当的。
再举一个反例，在 Steam 移动端横滑首页的泳道卡片时（下图左），使用的手势是拖拽而不是甩动，浏览起来特别低效。更适合的做法应为甩动，会更符合此场景下的快速浏览的诉求，如下图右的豆瓣。
对于轻扫来说，使用哪种阈值判定方式有多种情况（如下图所示）。在本文中，根据阈值类型、稳定化效果以及控制方式的不同我将把轻扫分为 A-E 共 5 类（A-E 的命名方式仅存在于本文章，因此在向其他人传达时，尽量使用在后文我介绍的手势描述而不是类别名称，以便于对方理解。）。后续会为大家仔细举例讲解，大家现在仅了解一下即可。
当我们在刷抖音视频时使用的手势就是轻扫，是否滑动到下一条视频进行播放的判定方式是① 判定手指位移和释放速度满足任意一个即可，对应的手势类别是上面表格中的轻扫A。如下图所示，在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向位移大于半个屏幕高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离但是手指离开屏幕时保留一个速度从而切换到下一个视频。大部分情况下用户都会使用判定释放速度的方式，因为既省力又便捷。
如果将阈值判定方式改为 ②仅判定手指位移，对应的手势类别是上面表格中的轻扫 B，并且位移的阈值设置得比较大的话，给用户带来的负面体验可能将是非常大的。比如下图中打开美图秀秀的短视频评论浮层后，想要下滑收起时，App 仅判定手指位移，而且这个位移阈值设置得比较大，对于希望通过快速滑动一小段距离收起浮层的用户来说体验很差。即使由于开发资源有限我们只能做到仅判定手指位移，我们也可以通过减少手指位移的阈值来降低负面体验。
但是某些场景下，②仅判定手指位移是更加合适的。比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页。这样处理的原因是在微信消息列表页，上下滑动浏览微信消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值的话，用户可能就极易在下滑消息列表时误操作，无意间打开小程序选择页。
因此，对于位移类手势，选用哪种阈值判断方式要依据用户使用场景和诉求，不能想当然地设计。
了解完三个基础维度后，我们再将其进行组合，从特定手势的角度更全面地理解它们的差异和使用场景。三个维度的排列组合能够生成十余种位移类手势，我列举出了常见的 7 类，如下图所示，这 7 类基本涵盖了 95% 以上的场景，我将一一举例说明。由于施控物控制受控物改变的属性一般都为位置，因此接下来在描述下面手势的定义时我都以受控物的位置变化进行举例。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，无论释放时手指是否仍有速度，受控物都会立即停止移动。（下图的动态演示由 Principle 制作，观看会有些不太直观）
特点
精确度高但效率低。由于阈值类型仅判定手指位移且没有稳定化效果，拖拽适用于对操作精度要求高，对效率要求低的功能。
案例
在 iOS 设置中调节亮度时，在有限范围内，手指左右拖拽可以控制亮度变化。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指仍有速度，受控物将移动一段距离后才慢慢停止，移动的距离与释放速度呈正相关。若释放时手指速度为 0，则受控物立即停止移动。
特点
精确度低但效率高。由于阈值类型判定释放速度和手指位移，甩动适用于需要快速浏览较多内容的场景，如滚动浏览列表。
案例
在微信的消息列表页，使用甩动手势控制列表上下移动，若释放时仍有速度，列表将仍移动一段距离后才慢慢停止。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时的速度和手指位移有任意一个达到阈值，受控物将稳定在一个新位置。若释放速度和手指位移没有任何一个达到阈值，受控物将回到原位置。
特点
由于轻扫拥有稳定化效果，因此它能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。接下来讲解的其他轻扫类型都有这一特性，就不一一赘述了。轻扫 A 与接下来要讲解的轻扫 B-E 的最大不同之处在于轻扫 A 的阈值类型为「释放速度和手指位移」，这让轻扫 A 与轻扫 B-E 有两点不同，一是轻扫 A 可以通过释放速度的快慢去控制内容的切换数量的多少，更加高效，二是轻扫 A 可以通过用手指在屏幕滑动很短的距离但离开屏幕时保留一个速度来切换内容，因此更加省力。
案例
在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向移动大概半个视频高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离并且手指离开屏幕时保留一个速度从而切换到下一个视频。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指位移达到阈值，受控物将稳定在一个新位置。若释放时手指位移没有达到阈值，受控物将回到原位置。
特点
轻扫 B 与轻扫 A 相比唯一的区别是阈值类型减少了释放速度的判定方式，这提高了触发切换的难度，使操作成本变高，但是在某些场景下，这也降低了误操作的概率。如下拉刷新等。
案例
比如想要在微信中下拉打开小程序选择页，就只能通过手指位移达到一个特定的阈值才能够触发，无论怎么用力滑动去增加释放速度都无法打开小程序选择页，这样处理的原因是在消息列表页上下滑动浏览消息是一个高频操作，如果释放速度也能作为打开小程序页面的阈值判定方式，用户可能就极易在下滑消息列表时误操作，无意间打开小程序页面。
因此，当页面已存在一个滑动操作的情况下，还存在另外一个方向相同的滑动操作且仅会在边界情况下才能触发时，为了避免误操作，会将后者的手势设计为轻扫 B。
上文提到，轻扫 A 的阈值类型为判定「释放速度和手指位移」，轻扫 B 的阈值类型为仅判定「手指位移」，由于前者的实现成本比后者高，导致本应适合做成轻扫 A 的功能有时只能妥协做成轻扫 B，比如之前提到过的美图秀秀的短视频评论浮层案例，但我们也可以通过减少手指位移的阈值来降低负面体验，后文会讲解如何与开发同学沟通。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是受控物并不随着手指的控制而同步移动，仅当释放时手指位移达到阈值时，受控物才开始移动并稳定在一个新位置。若释放时手指位移没有达到阈值，受控物位置则一直保持不变。
特点
上文讲到过释放后稳定化和相对控制的缺点，释放后稳定化比较拖沓，相对控制让用户缺乏掌控感。两者如果应用到了同一个手势（即轻扫 C ），就会导致用户在滑动屏幕时得不到任何反馈，用户会疑惑是否因为自己操作不当或是设备出现故障。只有当用户手指离开屏幕后才会发现触发了操作，整体的交互流程给用户一种滞后与延迟的感觉。
因此轻扫 C 与其他类别的轻扫相比存在劣势，但是它也存在很多的 App 的 H5 页面中，我的猜测是由于 H5 对于判定释放速度和绝对控制这两个维度与客户端相比难度大很多，因此只能退而求其次选择轻扫 C 这个较差的方案，实际上在同样的应用场景中用轻扫 A 替换轻扫 C 可以带来更好的体验。
案例
下图左是 QQ 的个性装扮的 H5 页面，卡片的切换使用的就是轻扫 C，如果能够优化为轻扫 A 体验会更好，比如下图右的音街首页卡片的设计。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是手指位移达到阈值前受控物并不随着手指的移动而移动。若手指位移达到阈值，无需手指释放，受控物将开始移动并稳定在一个新位置。若手指位移没有达到阈值，无论是否释放，受控物位置则一直保持不变。
特点
相对控制的方式降低了用户的掌控感，释放前稳定化减少了操作的拖沓感。使用此手势的场景是在多个对象之间切换时，我们不希望用户过于自由地操控对象之间的属性变化过程，并且牺牲掌控感从而增加单次的切换效率。
案例
比如 iOS 的相机中，左右滑动切换拍摄模式时，由于前后不同模式之间的页面框架变化较大，切换时会有不同元素的属性变化，如果使用绝对控制和释放后稳定化就会导致切换混乱且拖沓，使用相对控制和释放前稳定化就能避免这个问题。
特殊说明
上文我们讲到，通过轻扫手势 A-D 对受控物的绝对/相对控制都是存在于稳定化前，受控物一旦稳定化，就脱离了手指的控制，需要手指离开屏幕后再次接触屏幕开始下一次控制。
轻扫 E 的不同之处在于它可以在受控物稳定化后，仍然控制受控物朝着下一个节点稳定化，在每个节点之间切换时能够明显感觉到分段感，如下图案例所示。
由于轻扫 E 相对于轻扫 A-D 的特殊性，控制方式中的绝对控制和相对控制无法覆盖这个特殊现象，因此我们使用「多段相对控制」来命名轻扫 E 的这种特殊的控制方式。
定义
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，若手指位移达到阈值，无需手指释放，受控物就稳定在了一个新位置，但是此时手指还是仍然可以操控受控物继续移动的，并且继续移动过程中如果手指位移达到阈值将会到达下一个稳定化状态。
特点
轻扫 E 适用于需要在多个对象之间快速切换和确认的场景，它的使用感觉很接近拖拽。如下图所示，我们可以这样理解，当被切换的对象数量接近于无穷大同时每个对象之间的距离接近无穷小时，轻扫 E 就可以视为拖拽。
案例
iOS 相机人像模式切换打光方式、微信的通讯录滑动字母索引导航，它们都使用轻扫 E 来满足多个对象之间快速切换和确认的需求。
了解完上述的维度和常用手势后，我们在脑中就可以形成一个思考框架。当我们要针对一个功能设计位移类手势时，就可以从阈值类型、稳定化效果以及控制方式这三个维度思考。接下来我用一个我参与过的实际项目作为案例给大家讲解一下思考过程。
本案例是网易云音乐陌生人版一起听中的一个功能，一起听的双方在听歌过程中会收到彼此共同信息，比如听歌口味相似度、是否同城、都喜欢哪些歌手等，目的是为了增加可玩性和互动性、降低退出率，鼓励用户互相了解、提高一起听过程中的社交体验。
为了营造仪式感和避免信息过载，共同信息的展示方式设计为了一次只能看一条，进入浮层后默认展示最新的一条，可以通过滑动查看上一条。因此为了避免出现两条同时占据展示区域的混乱状态（如下图左），我们为其添加了释放后稳定化效果（如下图右），同时为了方便用户可以快速浏览旧的共同信息，这里使用的稳定化效果是较弱的，用户可以通过滑动一次切换多个共同信息。
由于需要满足用户快速浏览旧的共同信息的诉求，阈值类型选用了「判定手指位移和释放速度满足任意一个即可」，用户可以通过控制释放速度进而控制信息的切换数量。控制方式则选择了掌控感强的绝对控制。最后的结果如下图所示。综合三个维度进行归类，此手势为稳定化效果较弱的轻扫 A。
位移类手势的方向一般为上下或左右，但并不是一定要完全垂直或水平才能够触发手势。当上下滑动和左右滑动同时存在于一个页面时，默认会有一个容错角度，比如上滑时手指滑动方向只要左右偏移不超过 45° 都会被判定为上滑，如下图所示。
但是有时开发同学出现失误，导致容错角度没有均分，例如下图中触发上滑和下滑的角度极小，导致用户在上下滑动时非常容易误操作为左滑和右滑。
云音乐也曾有过类似的遗留问题，iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌（如下图 A，现已修复），安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏（如下图 B ）。
因此，在验收阶段，除了上述的三个维度外，角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下，最好要切换不同的手持方式分别体验一次，因为有些问题只有在特定的手持方式下才能够被发现。（下图素材来源于网络，侵删）
客户端的角度判定方式实际上是一个比较复杂的过程，上述的内容是简化的版本。后续将延展为一篇独立文章给大家仔细聊一聊。
上文讲到，基础的三个维度即阈值类型、稳定化效果和控制方式决定了手势的类别，是设计阶段一定要定义清楚的。但是除此之外，设计一个手势需要定义的细节非常多。比如受控物的移动是否有速度曲线？手指位移与受控物之间的位移的比率是多少呢？这些都是开发阶段不得不面对的。幸运的是，安卓和 iOS 有系统封装好的一套系统组件可以调用，操作系统自行解决了刚才讲到的细节问题，但是 H5 框架下是无法调用系统组件的，手势的各种细节都需要前端开发人员自己编写，难度较大，大部分情况只能实现一些比较简陋的效果，这也是为什么在很多 H5 框架下的界面滑动的体验比较差的原因。
由于信息不对称，与开发的沟通过程中，很容易出现理解偏差。比较常见的错误有：将甩动误解为轻扫 A，将轻扫 A 误解为轻扫 B 或甩动。如果造成效果达不到预期的情况，很多设计师不知道如何让开发同学修改，只能说“这个手势不丝滑，优化一下”，开发同学也是一头雾水，不知道往哪个方向优化。如果我们能够直接说出“阈值判定方式现在只有手指的位移，需要释放时的速度也能够触发跳转；这个位移的阈值太高了，滑动时很难触发跳转，需要把阈值改为 16pt ”类似这样准确的描述，就能够大大降低沟通成本，顺利验收。为了避免沟通出现问题，下面我将日常经验总结出现希望能够帮助到大家。
首先，一旦涉及到位移类手势，除了必要的文字描述外（可参考上述的手势定义的描述），最好给开发体验 demo 或者其他 App 上类似的效果，否则很容易产生理解偏差。各种 App 上的类似效果大家可以用本文的每个手势的案例给开发同学展示，但是 App 可能会更新，案例可能在未来某个时间就找不到了，所以我用 Principle 做了一个简易的基础 demo 集合，和我上述介绍的手势是对应的，大家可以拿着这个 demo 给开发同学演示大概的效果，也可以在这个 demo 源文件修改。
拖拽和甩动由于需要定义的细节参数都被操作系统提前封装好了，不需要我们给到额外的标注。但是对于轻扫，我们需要将细节定义清晰，下面将详细讲解。
1. 阈值类型
上文讲到，阈值类型一般有两种：① 判定手指位移和释放速度满足任意一个即可；② 仅判定手指位移。①的开发成本高于②。
如果我们选用轻扫的阈值类型是①，开发同学编写代码需要两个参数的阈值，分别是手指位移和释放速度。手指位移阈值一般默认为受控物的1/2，例如下图的全屏短视频和 Banner 。
当然我们也可以自定义一个阈值，比如 100pt、受控物高度的 1/6 等，没有特别的需要的话使用默认值即可而且也不用给开发同学特殊说明，但是如果有特殊需要想要修改默认值，就要告知开发同学你自定义的手指位移阈值。对于释放速度阈值，通常默认就非常的小，几乎是大于 0 即可触发，一般情况下使用默认值即可。
在本应该选用①的场景中，如果由于技术成本原因不得不选用②，需要注意的是由于缺少了释放速度的判定，手指位移的阈值我们需要设置得小一些方便用户触发，否则就会出现上文中美图秀秀浮层的那样的体验问题。经过我的实验，手指位移阈值一般定为 16pt 是比较适中的，既不会太容易误操作也不会难以触发。
2. 稳定化效果
轻扫是一定存在稳定化效果的，关键在于告知开发是释放前稳定化还是释放后稳定化。从开发的角度讲，系统会监测用户的行为，用户在使用滑动时会有按下（down）、移动（move）、抬起（up）三个行为，释放前稳定化是在移动阶段判断阈值并触发操作、释放后稳定化是在抬起后判断阈值并触发操作，开发成本几乎没有区别。
上文提到过稳定化效果强弱的概念。稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。首先，我们需要确定单次滑动允许切换多个还是只允许切换一个，如果允许切换多个，开发同学会设定一个控制切换难度的系数，而只允许切换一个的话就不存在这个系数。通常我们也不需要修改这个默认系数，但如果想让操作更加难或容易触发，可以告知开发同学修改这个系数。
3. 控制方式
绝对控制比相对控制的开发成本高，如果开发资源并不是很紧张，需要绝对控制的场景就不要退而求其次使用相对控制。涉及到轻扫手势一定要告知开发同学控制方式，否则很可能被视为相对控制处理。
通过本文的学习，我们不但可以在开发工作进行前与开发同学高效沟通，保证开发工作的顺利进行，也可以对自家移动端产品的现有手势进行逐一排查发现问题点进行记录，并且找到合适解决方案，然后用准确的语言描述给开发同学。下图是我在进行手势排查后输出的表格，挑选出一些有代表性的案例给大家作参考，开发同学可以通过它快速明确问题，理解解决方案。
本篇文章的归纳总结是通过日常积累和思考得来，希望能够帮助大家在设计与沟通层面解决实际问题，如果有任何疏漏和不严谨的地方，希望大家能够指出，后续的更新会将专栏不断完善，交互手势系列暂定的后续更新计划如下。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：设成于思
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com