“今天吃什么啊？”

“不知道啊，看看大众点评，哪家店比较靠前”

“一会去看什么电影？”

“我看豆瓣上，这部片子评分特别高，我们去看这个吧”

当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时，会发现当你面对的选择越多时却越不知道该如何做决定，或者当下做了决定后会一直思考做的这个决定是不是最好的，这恰恰是当代绝大部分用户在实际生活中面临的问题-选择困难。面对用户的选择需求各大平台都有自己的方式，帮助用户做决定的同时，引导用户购买目标产品，极大的降低了用户的选择成本，其中排行榜就是平台的常用套路。用户的选择成本是什么？排行榜为什么能够帮助用户降低选择成本？如果排行榜仅仅是用来降低用户的选择成本，为什么所有商家都对排行榜趋之若鹜？下面带你了解为什么人人都爱排行榜，及我们生活无处不在的“显性”“非显性”排行榜。你可能不知道是我们的生活正在被各种排行榜所支配！

排行榜的本质是一个没有感情的信息筛选机制，将所有相关的同类事物之间通过比较，从而反映出同类事物的客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可，比如我们买衣服会首选淘宝，电子类产品会首选京东，看电影会看豆瓣评分，这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选，由于锚定效应使得用户降低自己的选择成本，可以准确快速的做出选择。同时由于用户的从众心理或者羊群效应，也会对上榜主体产生强烈的品牌认可，为上榜主体带来更多的利益、强烈的荣誉感、甚至流量以及平台背书标签，比如：B站的百大up主，各个平台排行榜的销量冠军、朝阳地区必吃榜第一名，那么这一切背后的原理是什么？

一个完整的排行榜是由平台、上榜主体、用户三大组成部分，俗话说屁股决定脑袋，不同的定位决定了排行对三大组成部分不同的作用，当然背后的原理也不尽相同。

1.选择类排行榜-降低用户选择成本

在没有各种应用前，当我们决定购买什么东西或去哪家消费时，前期需要花费大量的人力、物力去搜集相关的信息进行整理集合，对比集合信息后才能做出决定，也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后，做出择优决策阶段发生的成本或费用都是用户付出的选择成本（前两个阶段发生的成本是交易费用，而不是选择成本）。在备选集的建立过程中，包含的选择越多，用户选择的难度就越大，选择成本就会越高。

选择性排行榜在备选集建立完成后，利用沉锚效应在用户心理建立潜意识的目标参照，帮助用户完成择优决策，降低用户的选择成本。（另一方面平台在帮助用户降低选择成本的同时，也影响着用户的最终选择，在接下来的平台侧方面会有详细的分析）。

比如说：当我需要买个耳机时，如果在没有各大应用的前提下，我需要通过找到我身边的耳机发烧友或数码电子方面方面的内行人对耳机进行了解，收集信息建立备选集，但由于京东在电子设备购物方面的权威性，我会优先查看京东的耳机类排行榜，也就是说京东帮助我完成了前期对于信息的搜集及备选集的建立，而用户出于对平台权威性的信任，根据平台给出的维度参照、品牌参照、价格、标签参照等信息，最终快速的完成自己的选择。整个过程就是用户在对锚的寻找，以及用户对信息确定性的寻找过程。

2.信息类排行榜-满足社交需求

在马斯洛需求中，当个人的生理需求和安全需求被满足时，与他人建立情感联系或关系成为人们最强烈的需求，即社交需求。社交又分为：为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如：QQ音乐新增的扑通社区、微博的明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。

无论是“功利社交”还是“共情社交”首先需要的是沟通，沟通的本质则是信息的流通，但当双方都没有可以沟通的信息时则社交不成立，而类似：微博热搜、今日头条、澎湃新闻等信息类排行榜，则给有社交需求的用户提供了可以展开话题相通的谈资。

在选择类排行榜中，提到的从众心理（又称羊群效应），是指人类由于对信息压力及规范压力，会希望融入到群体中寻求安全感的特性，即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感，会热衷于浏览此类排行榜来获取实时信息，融入群体生活。每天早上，在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件，在上班电梯或工作间隙讨论各自掌握的信息，及对事件的见解，甚至在与他人有相同的见解或之后，会对对方产生莫名的亲近感等等，这些都是在满足大众自己的社交需求。

3.分享类排行榜-自我确认需求

过年期间各家app纷纷都推出了自己的用户年度报告总结榜，不知道你有没有参与到其中，并把这些报告的截图分享到自己的朋友圈！在我们的日常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序，人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外，还需要清楚自身在大数据下的自我确认，通过各种各样自我测试类榜单，判断自身的能力、情绪、价值等等，来达到自我认同，否则就会感到焦虑不安。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解是“社会是舞台，人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程，我们想要呈现给观众怎样的形象，需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己，为了维持自身的平衡防止崩溃，人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己，让用户更加清楚的认知自己，同时通过分享，满足自我确认以及他人确认的需求。

我目前只总结出这三种类型的排行榜，如果有小伙伴想到其他类型欢迎在评论区提出，大家一起参与讨论。

无论哪种排行榜，用户信任的基础都来自对平台的信任，那么用户为什么信任平台？排行榜对平台意味着什么？背后原理是什么？下面我们来讨论排行中平台的影响及背后的原因。

对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性，选择成本是品牌经济学的核心，而用户对于排行的信任首先要建立在平台品牌的权威性下的结果。

1.平台权威性—用户侧

从我们记事起，我们对世界的认识来自我们的父母或老师，而这些教导我们什么是对、什么是错的长辈或老师，对当时刚来到这个世界的我们来说就是权威的化身。长大后我们对于权威的认可则更倾向于某一领域的专家，比如：医生、律师、教授等，认为处于权威地位的人在某一领域相对普通用户的判断更可靠，可以帮助普通用户节省研究这一领域问题的工作，做出更轻松的决定，虽然不一定是正确的。

搜索我们会第一时间想到百度，需要观看影视、书籍会想到豆瓣，想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性，形成品牌号召力，推动着用户做出需求决策。另一方面排行榜中也会说明数据来源，比如京东会在排行榜页面有明确的榜单说明，豆瓣根据平台数据更新，汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明，减少用户做出决定中的思考、猜测，获得用户的信任，增强平台的权威性。那对于平台来说权威性的建立意味着什么？

2.平台权威性—平台侧

• 影响用户的决策方向

平台权威性对用户来说意味着说服力和影响力，在减轻用户的决策压力的同时，也影响着用户做出平台所需的决策方向；

• 平台自带话题性

平台本身的权威性也会为平台承载的内容带来讨论的话题度，加大平台承载内容的传播范围。比如，每年苹果发布会都会带来范围极大的热度讨论，而app store内的热门推荐自带话题度和讨论热度。

• 输出口优化

排行榜作为内容输出口，在平台权威性的背书下，产品优化自身的价值，而平台也可以通过排行榜优化自身平台价值。

• 平台盈利

平台权威性下，可以通过多种方式达到盈利，比如苹果app store应用商店内的付费应用，百度的凤巢系统、微博热搜的第3、4位排名等。

3.平台权威性—广告告知

在平台完成建立权威性后，部分平台开始利用排行榜进行商业变现，比如百度、58的竞价排名等，现在大部分应用会使用明显的方式告知用户，防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”，淘宝、小红书推荐猜你喜欢的“广告”。

上榜主体作为整个排行榜的内容中心，由于排行榜自带的竞争机制、筛选机制，使得上榜用户会很乐于分享出去，比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。

由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度，以及各种潜在资源，比如：流量、资源、人脉、某一领域影响力、平台背书等等，这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感，比如bilibili不同粉丝量级会送出相对应的粉丝牌。

而平台方也利用上榜主体挖掘潜在的用户，为平台带来更多的新用户，加强平台权威性，形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量，带走平台用户的情况。比如去年和热闹的“巫师财经推出b站，签约西瓜视频”，各大平台也时不时会出现抢占流量up主的情况。

排行榜资源的建立

排行榜设计要达到用户攀比的效果，很重要的充分条件就是相同需求的好友基数足够大，这样才能构成排行榜设计成功的必要条件。

• 同系同门资源导流

对于已有成功产品的公司，可以借助平台相互间的导流完成初试资源的搭建，比如：微信初期借助QQ好友流量，带来好友初期的爆发；抖音最初的活跃借助今日头条的流量输入。

• 自建用户体系

不断推送已关注好友的信息流，当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交，你要先有这个人联系方式才能要求好友，关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等，不断社区建设推送动态信息流和好友卡片推荐。

• 伪造

当应用建立初期，没有很多的资源和内容时，需要平台自行填充内容，使得排行榜信息量大，增加用户活跃，才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等，或是平台pgc发布推送的内容。

面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化，根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。

在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成，其他则根据不同产品类型及产品需求决定是否展示。

1.页面tab

在首页底部或顶部tab形式出现，多出现在以UGC或文字信息为核心的产品，以内容信息为主，常见以信息热度为主要功能的资讯、新闻类应用。比如：知乎、今日头条、36氪。

知乎热榜内容完全展开；36氪分为话题榜、人气榜，话题榜仅展示前5条，人气榜展示10条，仅在前5条有名次图标，在36氪热榜的中部还会出现收藏榜，综合榜。

而今日头条仅在整个页面的1/3处展示部分“头条热榜”，点击“查看更多”后，展开“头条热榜”及“今日关注”“北京热榜”，整个交互形式类似微博热搜。

2.图标入口

首页功能入口处明显排行榜图标，优先级较高，常见自带推荐属性，能够帮助用户快速选择，减少选择成本，比较依赖榜单的应用。比如：豆瓣、音乐类、腾讯动漫等应用。

其中豆瓣、网易云音乐由于各种类型的排行榜很多，在图标点击开后，在当前页面平铺不同维度榜单类型，用户进行点击跳转；腾讯动漫相对榜单类型较少，在左边侧边栏切换不同的榜单。

3.商品详情页榜单入口

用户查看商品详情时，可能会希望能够横向对比同类商品，才能最终决定购买那件商品。常见于电商类应用，比如：京东、拼多多、得物等。点击后进入不同的榜单页面，获取更多产品信息进行筛选。（淘宝的商品详情页没有排行榜，但在首页却存在隐形排行榜，在隐形排行榜模块会有详细说明）。

4.搜索-筛选（无明确搜索目的）

当用户没有明确搜索目的时，搜索框的下方，平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户，比如：微博热搜、淘宝热卖、抖音热榜等。

没有明显排名及规则，但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前，位置越靠前，在用户心目中的默认位置越靠前，比如淘宝的“有好货”、编辑精选等。

1.编辑推荐/小编推荐

在平台建立初期没有特别的内容供平台呈现，这时候就需要平台人工有目的的推荐一些内容，不同于“猜你喜欢”建立在用户的行为数据下，编辑推荐更多的平台希望用户看到的内容，一方面作为平台内容的输出口引导用户，另一方面内容是平台自己发布内容，也可以保证内容的高质量。

2.猜你喜欢/相关推荐

平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期，并且存在大量的平台用户使用数据，“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性，各大应用平台适用性强，一般出现在首页部分。

3.年度总结排行榜

朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜，这些其实是用户自己确定了解自己，且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓，清楚的认识自己。

4.TOP排行榜

不知道大家小时候看没看过《第10放映室》，那是我最早关于排行榜的印象，里面会有各种最佳动作片总结、最佳男配角总结等等，以香港电影偏多，是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐，这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜，从众多选择中选择出部分答案，给出理由，而用户只需在已被筛选过的内容中进行决定，节省选择成本，比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定，但可以迎合用户对确定性需求的各种盘点性质的排行榜，比如抖音的TOP榜哥就是盘点各种内容，人物。

5.搜索-筛选（有明确搜索目的）

相比其他排行榜，筛选后的内容已经体现了用户的具体需求，高效明确的给用户提供选项，引导用户快速选择。

排行榜一般由必需的榜单头部、上榜主体，及非必需的榜单规则、更新信息构成；而上榜主体由必需的主体信息、排序，以及非必需的推荐理由、排名变化、热度信息构成。

好的榜单能够快速吸引用户快速找到自己的需求点，引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部。

1.唯一性榜单头部

当排行榜在整个应用中有且只有一个时，通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出，增加平台的品牌权威性。

2.可复用性榜单头部

有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况，为了平台的统一性、降低后期的维护成本，一般会使用可复用的榜单头部，如豆瓣、京东、QQ音乐等。

得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配，但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案；马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式，通过更换文案底图达到适用不同主题；京东就相对比较简单，只是更换标题的文案达到多主题适配。

排行榜上榜主体由于不同的场景业务需求，一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式，其中主体信息及排序为排行榜必须信息，而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。

1.纯文字形式

纯文字的排行榜一般是以内容（或标题）加排名的形式出现，常见以信息为主的排行榜，比如微博、知乎、今日头条等以信息为主要关注点的应用，或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准，因此会在标题及排位外，增加各种突出热度信息的表现形式，如关注热度人数，或是“热”“新”“爆”等等表示热度的标签，如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化。

2.图文结合形式

相对于纯文字形式，图文结合的排行榜因为图片信息的增加，使整个榜单主体占居更多的空间也可以展示更多的产品信息，辅助用户进行选择。

• 图片形式

上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）。

• 左文右图VS左图右文

每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。

人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。

因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。

3.横排+列表表现形式

说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到）

榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；

信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。

排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

背景

在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。

「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。

为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

探索阶段-为谁在何时何地设计

用户声音｜不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。

通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：

案例收集｜发现问题，大胆假设

纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：

视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。

基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。

竞品分析｜寻找实践证据，谨慎验证

我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。

以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。

直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）

通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。

紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。

除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。

文字陷阱：中英文字高不等于字号

举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。

原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。

论文查阅｜寻找理论证据，谨慎验证

研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好

参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。

认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。

假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。

面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。

实践阶段-如何设计

通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。

基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。

如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。

下面以视觉、交互、信息三个层次解剖设计过程背后的思考。

视觉层｜高密度-克制的留白

眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

搜索动作在App中依靠搜索框来完成，好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性，但真正好的搜索框会在细节上为用户带来差异化的反馈，带来很暖很贴心的感觉。

1、搜索框结构分析 

从体验层面上看，一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为：

使用前-找到搜索框入口；使用中-点击输入内容；使用后-展示搜索结果。

其中使用中会涉及到跳转和输入两种不同的状态，在下面的文章里我会展开来分析。

2、搜索框的常见类型 

回想常用App的搜索框，好像它们的样式看起来差别并不是很大，但其实每个搜索框的细节都是经过精心设计的，下面总结了几种常见的搜索框类型。

搜索图标

页面上只提供一个放大镜图标，通常需要用户点击图标后才能跳转到搜索页面，例如小红书就将搜索图标放置在页面右上角。

基本搜索框

基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式，文字提示为搜索，简洁清晰。

文字提示类搜索框

和基本搜索框的唯一不同的地方在于，这类搜索框中的文字提示部分不再是搜索两个字，而是根据产品需求支持预置多组文字提示并在搜索框内循环展示。

▲ 在大众点评的顶部搜索框中，文字提示部分循环展示了三组不同的内容，引导用户快速检索到好吃和好玩的。

功能类搜索框

之所以叫做功能类搜索框，是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标，如扫码图标、拍照图标、语音图标等，赋予搜索框更多的功能属性。

▲ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标，点击之后可以快速扫描图书条码或二维码，快速识别书的内容，省去检索的麻烦。

▲ 淘宝搜索框的组成更复杂，除了支持扫码外还有相机图标，方便用户拍照识别商品。 

3、搜索框设计状态分析 

使用搜索框搜索的过程总体可以分为四部分：搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程，再考虑每个状态对应的交互细节及反馈，这样才能保持逻辑清晰。

搜索前-默认状态

位置

大多数搜索框出现在页面顶部，作为一个大的触摸目标更符合用户的认知习惯，更容易被用户发现和使用。

▲ 在苹果自带的地图应用中，搜索框放在页面中部偏下的位置，相比于顶部搜索框，这样的位置分布更方便用户单手操作。

样式

搜索前的状态除了前面讲的几种常见的搜索框样式外，有些产品会直接在搜索框增加“搜索”按钮。

▲ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮，相比于点击搜索框再点击键盘搜索内容推荐，直接点击按钮简化了搜索流程。

点击后-获取焦点

搜索框

点击搜索框后，框内的放大镜图标会消失，出现闪烁的光标引导用户输入，搜索框右侧会出现“取消”按钮。

▲ 点击大众点评的搜索框后，搜索页会出现三个选项，点击每一个选项，搜索框内的文字提示都会改变，有效帮助用户提升搜索准确度，虽然是很小的点但做的很用心。

键盘

点击搜索框后会弹起键盘，在不输入内容的情况下，点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。

搜索页

搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块，记录用户的搜索行为，推荐目标商品或服务，提高转化率。

▲ 豆瓣将最热门的内容都展现在搜索页中，包括实时更新的热门书影音榜单、热门小组、热门话题等，为用户提供有效的引导。

关于历史搜索我们还可以继续深入分析，思考这些记录怎么排序、最多显示几条记录……

▲ 网易云音乐的历史搜索最多可以保留10条，采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录，这会导致排在后面的历史记录不容易被用户快速发现。

▲ 淘宝的历史搜索可以容纳更多的数量，当搜索记录超过两行时会有一个小的展开按钮，点击按钮可以查看早期的记录，这样既能节省屏幕空间也能最大化容纳历史记录。

搜索中-输入内容

删除/取消

当开始输入内容时，在搜索框的右侧会出现删除图标，方便用户一键删除输入的内容，这里要注意区分删除和取消的区别。

▲ 在淘宝中点击“删除”图标，页面会返回到上一级也就是搜索页；

▲ 点击“取消”按钮，页面会直接返回到主页也就是搜索前的状态。

搜索提示

在用户输入内容时，产品会根据用户输入的内容提供相对应的搜索推荐，这是搜索框的必备的交互反馈。

通过合理的词条推荐能极大降低用户的思考时间，提高搜索效率，同时省去再次点击搜索按钮的流程，降低用户的操作步骤。

字数限制

目前我所知道的大多数App在搜索时都没有字数限制问题。

回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的，尽量不要约束用户的输入内容。无论用户输入多少内容，点击都可以完成基本的搜索操作，这样整个流程才完整。

▲ 在百度中输入过多字符时，会提示查询限制在38个汉字以内，多的字符会被忽略，虽然给出了提示但并未打断用户的操作流程，可以让用户继续完成搜索。

搜索后-展示结果

符合预期

搜索的理想状态是搜索到的结果符合用户的预期，满足用户的搜索需求，并把最吻合的搜索结果排在前面，为用户带来清晰的结果展示。

智能提示

智能提示是对用户输入内容上的一种提示或纠正，如果用户输入的内容有问题或不够标准，在搜索结果中会能给最贴切的搜索结果。

▲ 在淘宝中输入“shouji”或“souji”，淘宝会根据拼音给出“手机”的搜索结果，但仍保留原标签，方便用户再次点击搜索；输入“手ji”时，会直接给出“手机”标签，这种差异化的反馈能更好的为用户服务。

无结果提示

如果没有搜索到用户输入的内容，搜索页会显示一个空状态，提示用户没有搜索结果。关于空状态如何设计可以看我之前写的一篇文章——如何做好「空状态」设计？来看资深设计师的总结！详细分析了空状态的设计方法。

▲ 相比于直接显示搜索无结果的状态，拼多多的搜索结果首先会标明相关商品较少，然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

信息架构这篇是本人在现阶段觉得较难学习与阐述的知识点，网上关于信息架构的知识内容也是参差不齐。在学习与探究的过程中查阅了很多资料，反复修改多次，尽量用直白的语言结合实例来阐述信息架构。目录如下：

大家可以根据上述目录来进行选择性阅读，当然全文阅读也是极好的～

1.1 前言

这篇文章的起源，来源于最近看到的话题“B端设计师会被组件库取代吗？”。从表面上看，在组件库越来越完善的时代，很多页面设计依靠组件库就能够快速搭建。

那么在这种情况下，B端设计师存在的意义和价值到底体现在哪里呢？其实B端设计的重点并不在页面的视觉上，视觉只是作为设计师最终输出成果的一小部分。个人认为B端设计师工作重心体现在做「正确的设计」，比如以下几个方面：

1.这个设计能否完成对应的商业目标和产品目标；

2.我们的信息呈现是否合理以及能否解决当前需求；

3.用户能否在页面上快速找到想要的信息；

而想要弄清楚并解决上述这些问题，在众多的话题阐述之下，我发现其论述本质上都逃离不了「信息架构」这个概念。因此我认为设计师都需要对这个概念有充分的认知，这能够帮助我们做出正确且出色的设计。

1.2信息架构概念

关于信息架构的概念，在百科上面的定义大部分都比较晦涩难懂，比如维基百科和百度百科的解释：

相信大部分人都很难明白其中描述的意思。在这里换种思路，将信息架构拆分为信息与架构去理解。

信息指的是内容的载体，常见的文字、图像等都是信息；架构的含义则形容对应的组织和结构。那么信息架构就是将信息通过一定的形式组织起来，然后呈现出来。其本质就是研究信息的表达与传递。

通俗点讲，信息架构就是让用户可以更容易的理解我们的产品，让用户在使用我们的产品时可以更顺利、更自然。因此信息架构没有一个具体的呈现形式，它更多的是体现在产品设计的各方面。具体主要表现为组织系统、标签系统、导航系统和搜索系统。

为什么需要信息架构？我们都知道B端产品设计的核心是「降本提效」，在设计这一侧的可以将其理解为降低认知成本，提升使用效率。

降低认知成本需要我们更好的表达信息，让用户能看明白我们的产品能够做什么，如何用；提升使用效率需要提升信息的传递效率，让用户能够很容易的找到需要的功能；

而信息架构从本质上来讲也正是研究信息的表达和传递。因此我们需要通过它来帮助我们更好的完成B端产品设计。如果没有信息架构来作底层支撑，那么我们在页面上看到的可能就只有功能的堆叠，让产品陷入难以上手或者不知道怎么用的尴尬境地。

一个强大信息架构是产品质量的保证，是作为设计支撑点的骨架，它会减少可用性问题，提升整体导航行，创造对用户友好的体验。比如举一个工具层面的例子：

PS的工具栏堆叠在界面各个部分，而Figma的工具栏则集中在右侧且只出现当前需要的功能。很明显Figma在信息架构中的信息组织部分做得更为友好，PS则会显得逊色一些。这也是我们在学习PS的时候会显得比较吃力的原因之一。

可以说良好的信息架构是高效用户体验的基础。视觉元素，功能，交互和导航都是在信息架构的基础上构建的。因此想要做出体验好且合理的页面设计，我们就需要参与到信息架构这个过程中来，和产品一起完成对应架构的梳理。而不是只完成从原型到页面这个部分。

如果想要搭建一个好的建筑，我们需要知道其建造的目的，是按照什么样的结构搭建，内部有哪些系统，以及最后呈现的模样。

那么信息架构也同理，我们首先需要知道信息是为了什么目标服务，然后我们通过怎样的结构来组织这些信息，以及过程中会用到的信息元素，最后如何呈现它们。这都是我们在搭建信息架构中需要进行的必要步骤。如果某些环节没有做好或者没有了解透彻，那么在输出信息架构时往往会出现方向或者策略上的问题。接下来我们看看这些步骤是如何具体呈现的。

3.1 信息获取：先理解业务，再谈架构

B端行业对于业务理解的要求是比较高的，只有在理解业务的基础上，将业务需求转化为对应的设计目标，我们才能够输出合理的信息架构方案。

个人认为理解业务的基础，就是能够用一句话讲清楚当前设计的产品。这句话可以描述为：谁在什么地方想要完成什么目标。比如「用户想要不出门就能够吃到东西」，这就是外卖软件提供的产品服务。

虽然看上去这句话很简单，但其中包括了三个要素：用户、场景和目标。因此我们在分析和梳理业务的过程中首先要弄清楚的就是这三个要素。

3.1.1用户：分清购买者与使用者

用户永远是排在第一位的，也是我们首先需要弄清楚的。在B端设计中，本质上可以分为两类角色：客户和用户。比如我们常用的钉钉或企业微信，购买客户是企业，实际用户是员工。

对于企业：「我想要有一款软件可以更好的管理员工」

对于员工：「我想要这款软件能够更好地提高工作效率」

客户决定了我们产品的购买（部分情况下也兼顾使用），而用户则决定了后续产品的复购率。因此在业务理解中，我们需要弄清楚当前产品所处的服务阶段，比如初期为了打开市场肯定更倾向于客户，而中后期为了提高产品的使用体验又会偏向于用户。

因此我们首先需要弄清楚的就是当前产品是为哪些「目标用户」服务，这也就决定了我们在设计信息架构时对应的不同侧重点。

3.1.2场景：需求源于场景

场景是指需求产生的某种条件，这个条件包括但不限于环境、时间、地点、空间等，只有上述条件满足，这个需求才能成立。这里可以把场景理解为产生该问题的原因。

比如当用户提出「她需要一件衣服」，那么我们就需要弄清楚用户为什么需要添加衣服，是她感冒了自身觉得冷还是因为外界环境冷。这两种场景涉及到的解决方案是完全不一样的。

在平日的工作中我们可以通过以下两种方式来更好的了解业务场景：

1.通过业务方文档进行业务背景的初步理解。业务文档中一般都会包括需求背景，我们可以通过文档进行初步了解。

2.通过业务沟通进一步加深业务背景的理解。由于很多B端业务离设计师本身的生活比较远。因此对于需求背景中不理解或者比较模糊的部分，我们可以通过与业务方或产品多次沟通来挖掘最底层的背景。

毕竟需求背景是理解业务的重要步骤，我们只有知道需求产生的原因，才能够针对性的给出解决方案。

3.1.3目标：业务目标和设计目标

目标决定了我们的产品最终的方向。我们首先接触到的一般都是业务目标，而我们要做的就是将业务目标转化为我们此次的设计目标。

A.业务目标

业务目标就是此次业务想要解决的实际问题，它通常是一个宏观上的描述。比如打车软件的业务目标简单概括来讲就是让用户能够更快速地打到车，减少等待焦虑。我们一般通过文档或者沟通来了解该目标。

B.设计目标

设计目标是我们基于业务目标而给出的设计策略，是一种更具体的实现方式。比如我们要让用户快速的打到车，那么这个时候我们的设计目标就是通过将用户位置和司机位置进行快速匹配，并通过超时补贴红包的方案来降低用户焦虑。从而实现业务目标。而这一过程涉及到的信息点就有：司机位置、乘客位置、等车时间、补贴金额等元素，并需要思考它们之间的关系和呈现方式。

可以发现从业务目标转化到设计目标这个过程，实际上就是在确定功能和信息点的过程。这样才能让我们更好地设计信息架构。

3.2信息架构核心：信息组织

从前文可以看出我们会在整体设计过程中出现很多的信息元素。如果不经过对应的组织和处理，直接堆叠在一起，那么信息含义会比较乱且难以调用。比如下方：

而右侧图片信息的组织过程可以理解为通过将零散的数据信息进行分类，再以某种结构化的形式将它们重新组合排布的过程，直白一点就是先分类，再结构化呈现。我用一张图来表明这个过程：

那么这个过程中「信息组织」和「结构呈现」到底应该怎么做，也就是接下来要讲的组织方式和结构类型。

3.2.1组织方式：模糊分类和精确分类

组织方式可以分为精确分类和模糊分类。精确分类就是我们会利用物体本身物理属性来进行分类，比如位置、字母表、时间、类别、层级等方式进行组织。一些工具类应用例如滴答清单内容信息都是按照时间来进行组织的：

而模糊分类则是按照更为主观的逻辑对信息进行分类, 如主题、任务、用户、隐喻等来进行归类，比如我们常用的APP商城是按照不同的主题类别来进行区分的。

但在很多时候，产品倾向于将两种组织方式结合起来形成复合型组织方式，从而能够使我们的整体组织形式更符合用户的使用习惯。比如蓝湖的信息组织，其中既包含了模糊分类（按使用类型等分类），也包含了精确分类（按上传文件时间等）。

其实在大部分B端产品中，大都按照模糊分类来进行处理，比如按照任务、流程等方式。而精确分类更多用于在页面内的局部信息模块，比如创建时间和文件大小等。

归根结底，我们分类方式的选择需要结合我们前面提到的用户、场景和目标，这样才能让我们的分类更具说服力。

3.2.2组织结构：选择合适的结构类型

当信息按照分类维度组织后，我们接下来就是把整体信息进行结构化，这样才可以将信息整体连接起来并呈现出来。一般分为以下四种组织方式：

A.层级结构（最重要的结构）

这是信息架构中最为常见的结构，也是比较符合用户认知的结构。有时也称为「树状结构」。以子父节点的形式一层一层延展。

层级结构的优势就在于可以承载复杂的多层级内容，通过层级递进的方式将复杂的多层级拆解得更简洁。

但我们需要把控好内容的广度和深度，广度指的是在层级结构中每一层的数目，最好控制在7个以内。如果广度太宽意味着每个页面会给用户展示太多的信息，增加寻找内容的负担。深度为纵向结构，建议一般3层，最多不超过5层。过深的层级会让用户点击很多次，且不容易被用户发现。比如飞书的基本信息架构也是主要以层级结构来进行的。

B.矩阵结构（多维度结构）

矩阵结构是各个节点都相互连接的一种信息架构方式，通俗来讲就是用户既可以通过多个维度去触达同一信息，也可以从单个维度连接多种信息。

这种结构其实就更类似于我们在做相关功能时：比如当你进入电影全屏时想要退出时，既可以通过点击按钮退出，还可以通过键盘的Esc返回到，通过多点触达同一操作。

又比如我们的联系人功能，我们既可以通过输入数字拨打电话，也可以查找联系人进行拨打，还可以查询电话记录进行回拨。

矩阵结构最重要的意义在于给用户提供多种路径，使用户能够在不同路径中寻找各自想要的东西。

C.自然结构（随机性）

自然结构不遵循任何一致的模式，节点都是被逐一连接起来的。

自然结构一般都具有随机性和不确定性。这种更倾向于泛娱乐化的C端应用。比如我们常见视频网站的在推荐流都是应用的自然结构。比如打开B站等视频平台，你很难猜到刚进入看到的是什么。

但一般自然结构不会单独存在，比如B站在自然结构中也绑定了层级结构来进行层级上的划分。

D.线性结构（单一性）

线性结构是非常单一的一个结构，整体是一层一层向下递进。比较强调先后顺序的一种结构。

这种结构通常用于我们常见的软件安装程序等，也可以用于部分功能结构，比如网站的视频发布，一般都是经过上传-编辑-发布这三个步骤来依次进行。

大家可以发现在进行信息架构时，我们在很多情况下可能会运用多种组织结构方式，我们需要根据对应的用户决策场景来考虑让最适合的几种方式相结合。但最终目的都是为了让用户能够更快速的获取信息。

3.2.3注意事项：关注用户心智模型

在信息的组织过程中，我们需要注意用户的心智模型。比如当我们看到红点就知道有新信息通知，看到下拉箭头就知道可以展开。这是互联网产品在无形中给用户建立的底层习惯认知。用户目前对于普遍产品的一些基础布局、功能名称和交互逻辑都形成了一定的习惯，这都属于用户的心智模型的内容。

因此我们在组织信息时尽可能不要去打破用户常见的心智模型，否则必然会导致用户的不习惯。我们常见的「扫一扫」功能，微信、支付宝和QQ会隐藏在「+」号里面。而微博和抖音却分别放置在了「我的」和「搜索」里面。

这样会导致用户难以发现该功能。因为用户接触新的信息时，会以最初接触的局部信息为依据展开并形成初步认知，而用户认知中的信息组织逻辑和实际信息的吻合度越高, 他在进一步查看或寻找信息的过程中体验会更顺畅, 反之, 若一开始形成的认知与实际信息的差异过大, 在后期的信息搜寻过程中则容易遇到困难。而这个吻合程度其实就是用户心智模型。

虽然建议在一定程度上遵循用户心智，但并不是说绝对遵循。对于用户不熟知的场景或者某些专业术语，我们需要通过灵活有效的提示（比如标记注释等）来引导用户就可以了。比如我们刚才提出的抖音扫一扫，它的应用场景其实是用于抖音官网后台登录，且在后台登录时已经给出了对应提示，那么这样的设计也是合理的。

3.3信息架构支撑：标签、导航和搜索

当经过上面的信息组织，其实我们已经能够归纳出一个大体的信息架构框架。但在信息组织之外，我们还需要关注以下三点：标签、导航和搜索。这对于信息架构的完整性也有非常重要的意义。

3.3.1 标签系统：让信息识别更通用

标签系统，通俗来讲就是要我们对当前整个系统信息节点的命名，从而让信息的呈现更容易识别。拿个最简单的例子来进行说明：

可以看到左侧和右侧关于卫生间的信息标示，可能左边你能一眼区分，右边可能就需要反应半天才能猜出到底代表什么含义了。

这其实就是关于我们的信息命名是否能够被大多数用户所接受的场景，也就是我们标签作用所起的作用。标签可以分为图片和文字标签，都需要考虑用户对该信息命名的认知程度，也就是前面提到的心智模型。那么如何能够更好的去定义标签名称呢，这里需要注意2个方面：

A.优先选用被行业广泛接受的词或图标

在进行标签定义的时候，尽量选择已经被用户所熟知的词语，比如「工作台」「通讯录」等已经被运用得非常熟练，对于类似功能就直接以该形式命名，比如我们的设计软件中，很多图标和功能名称都是通用的：

这样做能够很大程度减少用户的学习成本。因此在B端设计中我们也需要注意到我们所在的行业，哪些名词已经达成了共识，就无需再造新名词。

B.不确定的词语可以参考竞品或调研来决策

当某类功能或场景的标签难以确定时，我们就可以尝试去找一下竞品是否有类似功能，或者找该行业的领头羊（比如聊天工具的巨头微信），那么在进行标签定义的时候，可以参考它的命名体系。因为它已经替我们教育了一部分用户，会间接降低学习成本。

如果某些标签在上述过程中还是无法确定，那么我们结合自己经验或者与咨询业务相关人员来进行讨论，在必要时候可以在标签旁边添加注释来进一步说明。

3.3.2 导航系统：让用户不迷路

导航系统其实应该是大家比较熟知的一个系统了。就像使用导航系统来规划行程一样，导航系统都会存在于每个网站中。比如我们常见的侧边导航、顶部导航等。

因为网上关于导航系统已经有很多资料的讲解了，在这里阐述下四类导航的含义：

1.全局导航：位于页面最上层的导航，用户几乎在页面的每个地方都可以看见，是最高层级的导航系统；

2.局部导航：位于最高导航的下级子类导航，子类导航并不是必须的导航，根据场景进行取舍；

3.情景式导航：通过点击文字链接进行跳转的导航，比如在个人资料里面植入其它网站的链接地址；

4.辅助导航：这里包括网站地图，网站索引，网站指南等辅助类型的导航。

辅助导航的网站指南包括新手引导和演示教程等。现阶段更巧妙的功能引导，是当用户在进行某些功能的操作时及时进行提示，这样不仅达到了为用户引导的效果，还减少了一连串的新手引导对于用户的打扰。比如figma在进行组件更新后，只有当你调用组件功能时，才会及时进行提醒。

3.3.3 搜索系统：让用户轻松找信息

搜索，是我们平日最常用的查找信息的功能，它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要，但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索时需要考虑下列三点：

1:内容复杂度：当前页面承载的内容复杂度如果较少，对于简单内容页面往往不需要搜索；

2:内容性质：当前页面的性质是偏向于用户浏览还是查找，根据用户行为来决定是否需要搜索；

3.搜索场景：如果搜索场景很简单，考虑是否只用筛选或分类就能够解决问题；反之如果搜索内容很复杂，我们还可以搜索结合筛选来更好的查找信息；

上述3点决定了我们是否需要考虑搜索功能。而关于搜索的其他细节点，比如搜索规则和搜索结果等，在这里不做进一步的阐述。在这篇文章中更重要的是弄清楚我们何时需要搜索功能。

3.4信息架构表达：视觉化你的架构

我们通过上述方法已经知道如何梳理信息架构了，那么我们应该如何呈现它呢。这部分其实也是很多资料中比较模糊的点。

在学习的过程中，发现部分资料认为信息架构就是单纯的指思维导图，但实际上信息架构并不能单纯只用思维导图就能够完全表示。

因为信息架构包含了很多部分的内容。只能说思维导图可以是信息架构的一种表现形式，其可以帮助我们在思考阶段梳理整体产品的信息构成。

这里抛出一个很有意思的观点，那就是「功能结构图」和「信息架构图」到底什么关系，这里用两张图示例：

可以看到，功能结构图更多体现的形式是功能阐述，一般形式为名词+动词，比如头像设置；而信息架构图重点呈现的应该都为信息元素，一般为名词，比如头像图片。

但在大多数时候我们看到的产品架构图，其实更偏向于功能结构图和信息架构图的结合。因为在很多时候阐述信息构成时需要依赖功能进行辅助说明。

因此这篇文章讲述的信息架构更偏向于基于产品的整体架构。其实信息架构对于呈现形式并没有特别的限制，只要能够帮助你清晰表达产品整体结构就行。《信息架构：超越web设计》第4版中其实也并没有对表现形式这一块进行严苛的定义，其用「显示信息元素间的关系——站点地图」的说法概括了信息架构的呈现形式，其表达如下：

可以看到其表达形式包括思维导图和流程图等形式：思维导图的优势是能够总览全局信息，查看信息的深度和广度，而流程图的优势则更能够表达整体的逻辑关系。

因此信息架构的呈现需要根据你的产品场景选择合适的视觉框架表达。不必让形式限制了我们的发挥，而是应该形式追随于我们的架构表达。其只是一个信息梳理结构的说明结果（类似于中间态），我们需要借助它来更好的阐述思路与沟通想法。

3.5信息架构之后：让信息具像化

在输出信息架构之后，其实这里想聊一聊页面的呈现。因为当梳理好大的框架后，剩余的页面细节其实都需要通过原型图来进行体现。这个过程是从框架到页面的阶段，其实对于设计师来说也是很重要的部分。在这里根据自己的理解列出了以下几方面的注意点：

A.页面能够让用户看懂

这其实就是涉及到我们的信息组织和标签系统。如果当我们的某个页面不能让用户第一时间获取到该页面表达的信息，反思一下是在哪个方面做得不好。是标签系统含义模糊呢，还是信息的组织分类方式不对。从页面呈现倒推信息架构。

综合来说就是设计时的排列要考虑用户的心智模型（比如网页的常规排版和通用名词定义等），对于某些难以理解的地方给予用户帮助和解释。虽然B端产品想要完全避免学习成本是不可能的，但我们可以尽量减少其学习成本。

B.考虑用户的视觉动线

当我们在进行信息排列时，这时需要思考的就是用户的视觉动线，也就是我们常说的视觉浏览「F模型」和「Z模型」。对于不同的信息流来说，采用不同的动线模型能够让用户更好地查找信息。

F模型和Z模型的使用区分其实就是在使用场景上，对于内容页面来说F模型会更为合适（比如文章或者搜索结果），适合文本类的内容。但对于非文本的页面，则更适合用Z模型，Z型模式的设计跟踪了人眼扫描页面时的路线——从左到右，从上到下，能够更好引导用户的视线。

C.掌控好适度的信息层级

B端由于在视觉的发挥空间不多，那么相对来说保持良好的信息层级能够让整体的体验变得更为良好。

不管是原型图还是视觉，整体的视觉层级要体现得更为清晰。按理说最好的视觉层级控制在三级左右。如果发现视觉层级过多，需要考虑是不是因为信息架构设计时纵向层级过深，通过调整架构的形式来更好的呈现信息。以及对同页面的信息进行重要程度分级。

当我们做完或者听别人阐述对应的信息架构时，该如何评判呢，到底怎样的信息架构才算优秀呢。个人认为可以从3方面去进行判断：

业务层：

1.设计目标合理：能平衡商业目标和用户的目标，保证客户和用户都有较为良好的体验；

2.核心任务目标：能够让用户顺利完成产品的核心任务，需要通过用户测试来进行验证

结构层：

1.平衡广度和深度：在进行功能使用时不会隐藏的太深而找不到，是否有冗余步骤

2.保证拓展性：当前信息架构在面对未来新增或者删减信息时能够稳定拓展

体验层：

1.保证易读性：用户不经过介绍，通过页面信息呈现能够看懂该产品是用来做什么的

2.保证易查找性：用户在需要某个功能时能否快捷的找到，是否有多种查找方法（比如搜索或筛选）

合理的信息架构需要具备以上条件，我们需要在做设计呈现时也尽量保证以上条件。但在很多情况下其实并不能完全满足，这个时候我们需要根据业务目标的重要性来选择某些点进行满足。

梳理一下整体文章的架构，其实是按照「是什么-为什么-怎么做」的形式来进行拆分的：

这篇文章想要表达的观点，不是让设计师独立去梳理整体信息架构，而是让设计师拥有信息架构意识，了解其是如何进行并产生的。这样你在看到整体架构时，有足够的理论支撑去判断它的好坏，并通过自己的理论认知去理解和改进不好的地方。

当我们对信息架构有足够的认知时，我们在设计页面时才能有合理的思考方向，做出「正确的设计」，避免成为无情的作图机器。信息架构作为产品交互视觉最底层的支撑，只有骨架搭好，对于用户的使用体验才能够有本质上的提升。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

按钮的点击率低，用户在放置按钮的页面上花费了大量时间，这可能是由于按钮不直观和混乱。

我们将从用户体验的角度详细解释直观且易于用户理解的按钮，例如内容中按钮的排列、按钮的形状以及基于内容的配色方案。

什么是用户友好按钮？

您拥有的按钮越多，做出决定所需的时间就越长。用户使用每个按钮以确定需要哪个按钮来实现目标。对按钮的不确定性会导致对按钮不做任何操作。

为防止出现这种情况，请直观地确定每个操作的优先级。用户一旦知道哪些按钮对其任务很重要，就可以立即采取行动。

1. 按视觉扫描模式排列按钮

应用程序中最常见的错误就是按与用户自然扫描模式不同的顺序排列按钮。优先级最高的按钮放在最前面，以便用户首先注意到它。然而，通过视觉加权，用户会以任何顺序注意到按钮。

按钮的顺序不是为了提高可见度，而是为了提高效率。首先放置高优先级按钮会使扫描方向从上到下颠倒，从而破坏视线的自然流动。

它不是强制用户重新扫描按钮，而是允许用户在单向扫描中执行高优先级操作。这允许用户在做出决定之前依次扫描按钮所需的所有信息。

将最高优先级的动作放在底部使其成为视觉阻力最小的路径，并且可以快速轻松地点击。此外，底部位置是手指最容易触及的位置，进一步提高了效率。

2. 使用形状区分按钮和文本

应用程序中的另一个常见错误是使用文本来表示按钮。设计师使用文本按钮来表明它们的优先级低于其他操作。但是，这对于操作按钮来说是不合适的选择。文本看起来不像按钮。通过使用文本按钮，用户可以忽略操作而只看到主要操作。

文本按钮也会使得用户对内容是按钮还是信息而引起混淆。这种不确定性会导致这些按钮被跳过。

文本按钮不仅令人困惑，而且还是难以点击的小目标。将文本标签放置在按钮形状内可以更轻松地调用操作并点击它。

按钮形状是抑制优先级低于文本按钮的操作的好方法。使用户更容易识别以他们喜欢的方式实现目标的所有选项。

3. 为渐进式动作添加颜色

高优先级操作是最容易看到的。此操作与用户的目标直接相关。如果您不确定其余的操作，请考虑哪些操作将用户推向目标，哪些操作正在远离目标。

在上面的例子中，“结帐”是优先的，这是用户达到目标的一个动作。但是，尚不清楚“查看购物车”或“继续购物”操作是否具有中等优先级。

“查看购物车”操作允许用户查看他们添加到购物车中的产品，这会促进结帐。“继续购物”操作将用户从结账返回到产品页面。

通过查看每个操作，很明显“查看购物车”具有中等优先级，而“继续购物”具有低优先级。

按钮颜色从文本颜色中脱颖而出并吸引用户的注意力，因此它是显示渐进式动作的有效方式。如果按钮颜色与文字颜色相同，则信号不是很强。为渐进式动作添加不同的颜色意味着用户应该采取的动作。

如果您为每个渐进式动作使用相同的颜色，则用户无法确定哪个具有更高的优先级。此外，为每种颜色使用不同的颜色只会使用户感到困惑，并且不会理解不同的颜色。并且，您还会在每个按钮上感受到相同的视觉重量。

设计的诀窍是使用相同的色调，但改变中等优先级动作的饱和度和亮度，使其看起来比高优先级动作更亮。现在按钮权重不冲突，很明显哪个突出。

对比以增强对比度。主要按钮使用深色背景上的浅色文字，次要按钮使用浅色背景上的深色文字。这为高优先级操作提供了更亮的文本标签和最佳对比度。

4. 改变标签上文字的粗细

到目前为止，应用这些技术足以区分优先级，但您还可以做更多的事情。按钮越直观，用户就越不需要考虑它。

对每个标签上的文本使用相同的粗体可以赋予该文本相同的强调量。因此，建议根据优先级分别强调每个标签的文本。更改文本的粗细，使高优先级按钮最厚重，低优先级按钮相对单薄。这样，当用户阅读文本标签时，文本的权重表示优先级。

在上面的例子中，“结账”标签比其他标签更厚更亮。“查看购物车”标签为半粗体，“继续购物”标签为中等。因此，文本标签反映了每个动作的视觉权重。“查看购物车”标签上指示“3件商品”的文字没有加粗，因为它是补充信息，并不代表所执行的操作。

5. 为高优先级操作提供图标

最后一种技术是让色盲用户可以访问您的按钮。色盲用户无法通过颜色区分重量差异。因此，我们需要的东西是不是颜色作为一个视觉线索。

为高优先级操作添加图标将进一步强调它以使其脱颖而出。用户浏览时，用户通常关注视觉元素而不是文本。该图标将使所有用户更加关注高优先级操作。

用户仍然可以通过移除颜色和标签来识别结账按钮。

总结

如果用户在操作屏幕上花费大量时间，或者点击率较低，可能就是按钮设计的不直观。在这种情况下，可以使用这些技术来增强按钮显示并有利于突显优先级。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

当你在一个既定的服务领域工作，但想要进行革新时

1.详细研究当前的用户体验

分析当前的服务体验，解读用户旅程中涉及到的行为，接触点，出现的痛点。构建现有的体验旅程图可以捕捉到服务体验的全貌，立即发现需要重新设计的关键问题，促进组织内部的一致性。对于这种复杂的服务，根据分析结果建立服务蓝图也大有好处，可以捕捉到流程中的关键问题还有不同接触点的关系中的重要方面。

建议：
自己进行尝试，能够有效地发现细节，涵盖分析中的所有步骤。

2.分析服务构建

体验和过程只是服务的一部分：在分析现有服务时，我们也要考虑底层系统是如何搭建组件和动态结构的。只有对系统进行全面理解，我们才能发现连接缺失，精力和资源的潜在浪费和重复。创建一个系统地图有助于让团队成员明确这些问题，讨论潜在的改善机会。

建议：
我们需要将系统中的所有行为者联系在一起，全面理解系统过程，减少重复，弥补差距。

3.设定具体的目标，指导设想

在开始构思之前，花些时间来思考系统和体验的分析结果，并通过重新设计确定自己达到的关键目标。目标可以是横向的（比如 “优化整个旅程中的信息流”），也可以是非常具体的（比如 “入职：从填写表格到热情的欢迎会”）。最重要的是，我们首先要详细了解现状，才能设定目标，制定正确的方法，同时意识到急需解决的潜在局限性和障碍。

建议：
我们也可以将期待体验设定为目标旅程，为体验中的每一步设定一个具体目标。

4.创造新点子和解决办法

提出新的想法，解决旅程中所有已知痛点或系统中的差距，以及抓住有趣的机会。这些想法包括既稍微改进一些特定功能，也可以影响整个服务模式的宽泛概念。在这个阶段，不要限制自己的想法数量，更不用考虑可行性：捕捉每一个想法，与其他团队成员分享，并在彼此的思考之上建立一个新想法。

建议：
快速构思是一种头脑风暴的练习，团队中的每个人都写下他们心中的每一个想法，然后再进行小组讨论。

5.确定最有可能实现的概念

收集所有想法，确定下一步的行动计划。如果项目很简单，我们可以简单地将所有的想法整合成一个重新设计方案，逐步发展。在其他情况下，你可能最终得到50多个想法，对当前的服务体验进行创新，但显然我们不能诉诸于每个想法，那么……从哪着手呢？我们可以建立一个评估矩阵，确定标准，分析每个概念（例如，对用户的价值，实施成本，独特性等），并对它们进行相应的评分。这样我们就可以筛选出最有可能实现的想法，创造较大的价值（这些想法可能是最先开发的）。简略的概念可以很好地改善部分服务，但不会产生较大的影响（容易实现的目标）；而较复杂的概念从长远来看会对服务体验产生更积极影响，但需要投入大量的时间和精力。

建议：
我们需要考虑的最核心内容是新概念给用户和组织带来的价值，而不是实施的可行性或复杂性-但这可以根据具体环境而改变。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

文章定位：

好的产品能为用户带来高效的解决方案，在迭代升级中实现用户价值。

以下文章主要探讨设计师 如何从用户角度出发打造产品体验，通过设计帮助产品带来高溢价。

01、用户思维

用户思维最基本就是 围绕用户 去设计，帮助他们 解决实际问题。

Q：为什么要围绕用户做设计？

A：想将自己产品打造成为好产品，最终留住用户。

Q：什么是好产品？

A：“让产品自然生长，不要去碰用户，不要去打扰他们，让他们自然形成一种互动关系”。不要强塞东西给用户，切切实实的在用户需要的时候能快速给到他们价值，解决某个问题，或满足他们的情感，情绪。

即：帮助用户解决实际问题，并提供解决该问题的优秀设计。

所以设计师产出设计方案前需思考的是：

1. 解决什么实际问题？

2. 应该提供怎样的设计？

02、确定用户面临的问题点

解决哪些实际问题是每个案子的核心，在该阶段设计师常容易陷入误区

如：我要做 一个…东西、我要怎么怎么做……下意识的就去研究怎么做，而不是首要思考具体解决什么问题，该误区到后期往往会造成设计偏离。

为了避免该情况，首要需确定问题，并将问题清晰表述出来，表述的越清晰解决起来就越容易。

那我们应该怎么去确定这个问题呢？

– 利用同理性图谱构建用户认知

好的设计需要与用户心智相符合，贴合用户当时情境下的诉求。

为了让优化方案更有依据，在发现问题的时候，需要从用户视角出发，结合当前产品的页面去分析是否符合当前用户的诉求。

——可以采用 同理心图谱 的方式：

从 说了什么、做了什么、想了什么、感觉到什么 四个维度去勾勒用户真实的想法感受。

以下以优化案为例：

在实际优化案中，可结合需改版页面按照四个维度走一遍，可让设计师更了解当前页面帮助用户做什么，后续有哪些优化方向。

如：QQ支付页面整体流程优化设计

① 用户需给好友发红包，在输入完红包金额点击支付时，向上滑出了支付面板，用户看到这个面板时候，其心理活动可能是怎样的呢？

② 用户想要更换支付方式，点击更换后看到下方页面，用户对该页面的的感受会是怎样的呢？

③ 用户输入密码后，以为马上就成功了，却发现卡里没钱了，这时候用户更加迫切的是什么呢？

通过以上这样 【移情】的方式，使我们更能了解用户，在没有用户访谈的情况下对他们的 愿望、需求、诉求点 有个概念，当有了这个 共鸣 在后续就可以将这个共鸣变成一个有着明确优化方向的 问题陈述。

– 自问自答式推理逐渐确定问题

在挖掘用户需求点过程中，可以采用不断询问不断回答的方式，将自己脑子里想的直接写出来，通过这样的方式构建自己思考的逻辑。

如：“在下单页转化率太低 > 在下单页用户无法快速验证信息 > 在下单页重点信息不集中，其余信息太显眼 >…..”

在这个过程其实就是刨根问底的过程，在反复的试错过程中也会离真相更近。

类似下面这张Julie Zhuo的自我审视图：

03、问题陈述（POV）

– 什么是问题陈述

通过陈述句将产品当前状态（问题）和期望状态（目标）的差距描述出来。POV有助于我们强调用户痛点，保证自己将重点始终放在用户身上。

– 问题陈述怎么写

那怎么陈述才能更好的将问题及规划表达好呢？以下有两个方式：

• 基于用户角度来说：我看QQ群里抢红包很热闹，我也想快速参与进去，但是轮到我发的时候，我因为我不是非常熟悉整个流程，导致我反应慢了，这让群里的人以为我故意这么慢才发，影响大家氛围，这让我有点沮丧。

• 基于用户研究来说（4W）：我们的初中生因为特别活跃，喜欢在群里踊跃发言参与活动，所以一旦群里有好玩的消息总是想第一时间参与进去。我们的解决方案应该 为他们 提供快速能够完成红包发送的链路与方式，不扫他们的兴。

以上两种陈述方式都是针对同一个问题，只是表述方式不同。所以只要你足够专注用户，理解他们需要什么以及为什么需要，就可以快速构建你后续的设计方案。

– 问题陈述注意点

① 用户与他们的需求是问题陈述的核心，避免：我们应该怎么做、产品应该…作为开头。

② 保持陈述的宽泛性，不要过早抛出细致的解决方案、技术限制等内容，避免团队发散受限。

③ 专注一点，不要让用户的需求和目标过于宽泛，导致自己很难找到一个合适解决方案。所以不要视图在一个问题陈述中解决太多用户需求，一次解决一个就很好了。

04、如何打磨设计方案

在经过问题陈述我们对要解决的问题了然于胸，在解决方案上，设计师需要考虑 易用性、易理解性、及着力提升用户任务效率，给用户一个更好的体验。面对不同的项目，可考虑以下几点：

– 结构简洁，重点突出

例1：

该例子非常能体现出 诉求 与 解决方案 的契合。

首先工作人员唯一的目的性就是 筛查 有问题的人，所以在众多人中需 快速判断，这个转化到设计上解决方式：

通过大面积的 色块直观反馈；

通过实时的 滚动时间+滚动背景反馈真实性；

在结合下方核酸与疫苗辅助判断，整体非常贴合实际诉求，重点突出，有节奏感。

例2：

通过体验核心信息，将内容合理布局，重点突出，操作划分明确，有助于信息获取与确定。

– 管理复杂（满足不同诉求）

人的认知资源有限，天生不善于处理复杂信息，所以在面对复杂信息时设计师需将复杂的内容以一定秩序逻辑管理，分而治之，减少用户的选择，让正确的行为变得自然和明显。

例1：

在58二手车页面的改版中，可以看出在面对不同用户诉求的情况下在 模块化结构 与 坪效 找到了平衡：

顶部按钮直接 分流 不同目的用户；

中间模块展示用户 最关心的维度：价格、品牌、车类型；

下方 透出推荐内容 吸引用户往下逛。

– 注重情感化

情感化不一定都是很精美的插画、动效等表现层面上的，有时候 贴心的记录、舒缓的内容、小游戏…… 也可以起到 情绪调节 的作用，提高用户看到复杂信息的 忍耐度。

– 场景化设计（预判你的预判）

多考虑用户使用场景，挖掘一些场景是可以通过我们的设计 帮助用户多走一步，帮他们排除障碍，减少负担。

例1：

打车软件在特定时间点自动浮出目的地，以及截图后立刻打开微信聊天窗，图片自动在对话框中浮出的方式都是通过用户的行为预判了用户下一步的行为，

例2：

用户输入密码后下意识认为操作成功，但却被告知失败，对用户而言是一次打击，若这时直接前置化用户后续可能会的操作，将条路径重新接上，可以让整个过程更加高效。

所以在具体设计方案上，设计师需要不断的去思考打磨设计方案，让自己的设计：

① 显而易见的，让用户体验后觉得「没错，就应该是这样」；

② 有价值的，它为用户解决实际的问题；

③ 与用户的心理模型相符，它不意味着更多的设计。

05、验证体系

验证方式有很多，目前市场上有几大比较成熟的体验度量体系，针对不同的关注点进行 定性+定量 检测。

除去性能表现外，主要都是围绕用户行为数据及使用感受来进行度量

在行为数据上，主要关注：访问频率、留存率、页面访问次数…

在用户感受上，主要关注：满意度、用户评价、推荐度…

– 设计师怎么确定自己设计方案的验证指标

对于设计师而言，不需要做的这么全面，我们只需要针对我们 具体优化页面、场景 找到可以直接验证的指标即可。

例：

在上述的发红包支付页面的优化设计中，由于主要优化的方向是为了让用户更聚焦，提升整体支付体验，所以基于这个目的，我们可以以 整体的支付成功率 来验证大致优化效果；

其次，可以从 每个触点的转化漏斗、和 各页面停留时长 上分析具体页面改版效果。

– 面向真实用户验证设计

除去行为数据上的验证，用户真实反馈同样重要，我们可以采用用户调研的方式了解用户对产品体验的反馈，主要可以从下面三个方面执行：

① 可用性测试：可针对核心优化的功能点设定测评任务，来观察用户的完成情况，如：如果你余额不足，你会怎么做？

② 满意度测试：采用界面可用性问卷调研，可以采用SUS问卷收集反馈

③ 推荐度测试：通过NPS量表来衡量，通过将分值划分为：0~6分为贬损者，7~8分为被动者，分值高于8分为推荐者，带入计算公式（NPS值=推荐者% – 贬损者%）算出推荐度数值，数值越高，说明用户满意度越好，用户的推荐意向越高。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

编辑导读：产品经理不是在写需求文档，就是在写需求文档的路上。尽管写需求文档是一个基础功，但是如何写好，以及B端和C端写需求文档有什么区别，值得我们深究。本文作者对此进行了分析，与你分享。

接上两篇内容《B端原型绘制入门》和《快速入手甲方项目》的最后内容，这两篇一个是原型一个业务，现在继续说一下落地，也就是需求文档怎么写。昨天上午刚交付了最近负责的小程序前后端文档，加起来快2W字，最终开发也签字确认了，趁着热乎跟大家分享一下。

一、需求文档模板到底能不能套着写？

市面上的文档模板太多了，直接可以搜到的，各种教学，各种视频都在讲，你一个新人怎么能不会写文档，所以这里面的水分，相信付过费的才能知道。

模板是可以套的，比如说公司内不是没有模板，那我能不按他模板写自己写吗，一般情况下不能，在写文档之前大家要明白一个事实，就是你现在到底在公司承担的是什么角色，是团队的冲锋还是后勤补给。这里不涉及到职位，是什么角色大家自己掂量着判断，如果是后勤部队，那你写的文档只写了核心业务，基本跳转，剩下的部门写的没那么专业，是没问题的。至于模板上什么页面响应了，硬件支持了，你不写一点问题没有，删掉就可以了。但如果你是团队的冲锋，你要负责团队和开发部门的对接，需要向不懂网络老板汇报，这时候就需要搞明白所做的东西需要哪些支持了，总不能项目做完，没有环境支持，该买设备买设备，该买服务器买服务器，都要考虑到。

还要注意一点就是模板归模板，不能死套，举个例子，比如模板上让你写了产品功能，需求描述，功能介绍，没说贴图的事，某个页面存在六个面包屑，每个页面都有几个业务，你能不贴图像写作文一样描述需求吗，是不行的，复杂的业务记着贴图描述。

所以那些简历造假的，找到的工作能力不配职位的，这才是他们头疼的问题。

二、C端文档和B端文档的区别

先说结论：

C端重跳转，页面状态，分享路径等

B端重业务逻辑，数据的输入输出，约束条件等

这次正好负责了前后端的文档撰写，能更好根据自己这一段的经验来描述，有一个很大的感受就是前后端是有很大关联的，举个例子，前端的用户分为两种，一种是VIP，一种是普通用户，在前端我需要给VIP账号更好的体验，让他能干更多的事有更多的权利，这句话很明显是一句没有经过处理的需求描述，那转化成产品需求应该是什么呢，“普通用户拥有的权限为XX，XX，VIP用户拥有的权限为XX,XX,XX,XX，未登录时默认展示全部，当用户登录后，进行展示内容分层”，这是产品需求，也是经过梳理后的业务需求，这句话需要写在前端的文档里，那我现在怎么去描述后端的这部分？大家可以做个小思考。

经过这样的前后端梳理，是很有趣的，而且能有一个全局的思考，不会随便说一些奇怪的需求，见识的多了，也就理智了，这句话也适用于生活。再举个例子，拿之前很火的一个传统行业提出的需求“手机屏幕能跟随手机壳变色”来说，如果这个人懂基本的技术实现方式，数据库，一些业务边际他就不会提出这个，当然这个也有点夸张，但我相信大家还是有遇到过这样的人。

三、具体应该注意什么，怎么写？

先说基本的，什么项目背景，角色，阅读对象等乱七八糟的写不写，这取决与你们公司的流程，是产研一家，还是人家根本不知道你这些东西，如果不知道你就要好好写了，如果天天在一块探讨业务，那还写个屁，还有最后面的功能性需求，例如页面响应，拓展需求，易用需求等，上面说过了你要不是冲锋陷阵的，就不用写，你也不会写，只需要把基本核心业务，基本流程写清楚，原型上做好跳转就行了，这一步也不是像我说的那么简单，是需要锻炼和总结的，而且当面临大型程序时是很容易出错的，这就需要之前的总结了。

中间的最重要，也就是菜单/页面描述，需求描述这些，我有个习惯，在文档写之前先把这部分的目录写好，也就是页面结构序号先写上，这样后期会比较清晰，然后就是把写好的描述标题，依次按页面粘到结构上就可以开写了。

页面/模块描述不要瞎写，该页面/模块主要实现什么业务就写上什么，如果实在没有，只是展示，那就写XX信息展示，这块优先写业务，其次操作。

数据排序/来源，有就写没有就不写，来源不知道的就自己搞清楚，如果有来源别忘了搞清楚输出，排序一般为倒序，特殊情况自己考虑

页面描述，优先写清楚所有跳转，跳转涉及到的业务也清楚，判断，业务流程，操作，按钮，各种权限，字段都要考虑到，这就是基本的文档撰写，建议不知道的不要不写，如果现在在团队里有人带，建议都问清楚，这对后续业务理解有很大帮助

字段描述，这块可以比作开发的基本工作手册，这里有一个容易犯的错误就是，画原型的时候咱们会把所有文字处理好，是肯定不会换行和省略号的一般，但如果用户就是要瞎写，或者标题就是特别长怎么办，再或者你花了登录页，什么约束都没写，用户设置密码五个1，这写问题后续是不是很可能出现问题？所以文档这块内容要描述清楚，文字多的一行放不下了怎么处理，上传的地方限制的数量，大小，让输手机号，用户输一堆密码该怎么限制，这些都是基本的，要描述清楚，就算你不懂什么格式，限制，那就写“不允许换行，多的做适应性处理”，那开发也可以自由发挥，就怕没有写到，而开发也没有注意，那后续就很可能出现问题。