收藏

收藏

收藏

收藏

收藏

收藏

转自：站酷

作者：火龙果_pitaya

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

移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。

接下来为大家分享精美的app UI设计案例：

蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。

--手机appUI设计--

嗨，朋友们，不知你是否曾遇到这样的处境，听到需求，大家再熟悉不过了，在产品设计的时候，什么是产品需求？什么是用户需求？什么是商业需求？到底怎么进行产品需求分析？

看到这一系列的问题是否一脸懵，一脸茫然，对需求分析和理解不够的透彻。今天，我为大家分享的是关于产品设计需求分析研究，希望可以对大家有所帮助，更好做好需求分析，理解需求分析。

需求到底是什么？

在工作中我们经常提及需求，谈及需求分析，但就一个简单的需求，我们真的了解吗？真的知道什么是真正的需求吗？天天被客户说你没有理解我的意思，你没有了解我的需求。那么什么是需求？百度百科中解释需求指人们在某一特定的时期内在各种可能的价格下愿意并且能够购买某个具体商品的需要。而关于需求也有人解释为需求是由个体在生理上或心理上感到某种欠缺而力求获得满足的一种内心状态，它是个体进行各种活动的基本动力。而产品是为了满足人们的需求而被生产出来的，因为需求的驱动，才会使得用户需要产品。因此需求，既不是功能，也不是产品，不能把功能和需求混为一谈。需求是用户面临的某一个问题，产品或者产品功能只是为了解决用户的需求的解决方案。

1. 需求类型介绍

那么产品的需求都有那些类型呢？

需求按照产品属性可以划分为：idea、新增、优化、Bugfix；按照产品职能可以划分为：功能类需求、运营类需求、数据类需求、设计类需求；按照产品价值划分为用户需求和商业需求；按照产品性质划分为显性需求和隐性需求。

2. 需求相关理论在产品设计中的应用

马斯洛需求层次理论（hierarchical theory of needs），马斯洛，可以说是我们需求理论界的祖师爷，他认为，人的需要由生理的需要、安全的需要、归属与爱的需要、尊重的需要、自我实现的需要五个等级构成。下面我们看看产品设计中的应用：生理需求方面应用、安全需求方面应用、社交需求方面应用、尊重需求方面应用和自我实现需求方面应用。

生理需求方面应用

生理需求即满足人类的最底层，最基本的生活需求，包括衣、食、住、行、用等。生理需求是推动人类生存的动力，只有生理需求得到满足，人们才会追求更高层次的需求。

比如：唯品会、饿了么、美团、百度地图、Wi-Fi 万能钥匙。

安全需求方面应用

安全需求即在满足人类的生理需求的情况下，满足人类的安全和社会保障，包括健康、社会秩序、法律、和平、医疗、教育等，人类需要安全感。

比如：支付宝、360、全民反诈、查悦社保、优健康。

社交需求方面应用

社交需求即归属与爱的需求，体现在个人渴望得到家庭、团体、朋友、同事的关怀爱护理解，包括友情、爱情、熟人社交和陌生人社交等的社交需要。

比如：微信、Soul、珍爱网、探探、陌陌。

尊重需求方面应用

尊重需求即较高级别的需求，满足前几种需求的前提下，用户开始关注高级需求，包括内部尊重和外部尊重。自尊和希望受到别人的尊重。

比如：朋友圈和抖音的点赞、评论，电脑开机助手

自我实现方面应用

自我实现需求即最高级别的需求，实现自己的理想抱负，实现自己的追求，成为伟大的或具有影响力的人物。在人生道路上自我实现的形式是不一样的，每个人都要创造机会去完善自己的能力，满足自我实现的需要。

比如：微博认证、知乎认证、网易云音乐会员、QQ 会员、抖音认证

圣经人性七宗罪（seven deadly sins），天主教称七罪宗，或称七大罪或七原罪，属于天主教教义中对人类恶行的分类。

最本质的需求是人类原始的本能欲望，在《圣经》中，人类有七宗罪：色欲（lust）、暴食（gluttony）、贪婪（greed）、懒惰（sloth）、愤怒（wrath）、嫉妒（envy）和傲慢（pride）。

一款好的产品，需要对人性做透彻的分析，才能完成其设计。

比如：快播、王者荣耀、拼多多、狼人杀、大众点评。

3. 需求层次的规律

需求是不变的，变得是满足需求的产品。从古至今，人类的需求几乎没有发生改变，如为了满足人类移动的更快的需求，历史上有马车、自行车、汽车、火车、飞机，互联网的产品则是，摩拜单车、哈罗单车、滴滴出行。

传统产品

互联网产品

因此，在进行产品设计中一定要：

• 把控需求来源
• 提高需求质量

需求如何进行获取？

聊了这么长的需求，那么需求到底如何进行获取？都有哪些渠道和方法呢？小浪郎看了相关的视频和书籍进行了一定的了解，只要路子野，就不会有悲伤！关于需求也有相关的获取渠道和方式。

1. 需求获取渠道

需求的获取渠道，包括内部渠道和外部渠道，通过多种渠道来获取用户需求。内部渠道包括产品、老板、同事和自己，外部渠道包括市场、用户、竞品和合作伙伴。

外部获取渠道

1.市场

产品设计需求会受到行业政策的调整而变化，如政策对顺风车业务的需求影响。

2. 用户

产品就是为了满足用户的需求而服务的，需要及时的了解我们的用户，了解我们的目标用户。

3. 竞品

知己知彼，方能百战百胜。在同领域的竞争对手，通常来说两者之间是相爱相杀的关系。我们既要了解直接竞品，又要了解间接竞品。如碎片化时间、场景相同、用户也相同、但需求不同的抖音与快手、微信读书与网易云音乐。

4. 合作伙伴

合作伙伴能够给企业带来资金资源、先进技术、管理经验，提升企业技术进步的核心竞争力和拓展国内外市场的能力，推动企业技术进步和产业升级的国内外先进企业之间的合作。

内部获取渠道

1.产品

通过用户使用产品时所产生的行为数据，来进行产品战略规划和设计，因为用户的行为即是用户的需求。

2.老板

产品设计在满足用户需求的同时必须兼顾企业的战略需求。而这方面需求通常是由老板或公司的高层来进行掌舵的。

3.同事

产品的开发流程，从产品规划到需求分析，从需求分析到产品设计，从产品设计到产品开发，从产品开发到产品测试运维等，涉及了很多的同事，他们对用户也有所理解，间接了解用户的需求。

4.自己

作为产品人，我们也应该成为产品的用户，成为产品的目标用户，这样才能不断为用户思考，为用户解决需求。

2. 需求获取方式

需求的获取方式，包括内部方式和外部方式，通过多种方式来获取用户需求。内部方式也同样包括产品、老板、同事和自己，外部方式包括市场、用户和竞品。

外部获取方式

1.市场

通过了解国家的法律法规、政策方针、了解市场的行业动态和数据报告。

2.用户

通过用户调研和用户反馈来进行了解用户的需求，从而为用户进行服务。常见的用户调研包括有：观察法、单人访谈法、焦点小组、问卷法、头脑风暴法、自我陈述法和实验法。常见的用户反馈包括有：论坛、贴吧、微博话题、Appstore 的产品评价等。

3.竞品

需要持续性的进行相关竞品分析，了解优势与劣势，了解相同与不同。查阅相关的竞品分析报告，进行快速了解。

内部获取方式

1.产品

通过一次次的数据埋点产生的用户行为数据，有效的用户行为数据分析，出具有业务价值的数据分析结论。

2.老板

及时与老板进行高效沟通，结合企业的战略定位与战略规划，明确产品的战略规划。

3.同事

与同事进行产品头脑风暴，打破常规，积极思考，畅所欲言，充分发表看法。

4.自己

作为产品人，我们要用心观察生活，使用更多的产品，体验更多的产品，总结产品经验与规律。

3. 需求记录

不仅我们需要了解需求，同时各种各样的需求也要规范的进行记录，我们通过需求卡片来进行需求记录，包括需求编号、需求类型、需求来源、需求内容、需求场景、记录时间、记录人员等。

需求分析怎么进行？

需求也有真伪，获取了需求，接下来我们需要进行需求分析，分析那些需求是真需求，那些需求是伪需求；哪些需要是必须要做的，哪些需求可以不用做；哪些需求先做，哪些需求后做；如何进行筛选需求等，常见的需求分析包括：需求筛选、需求透视、需求排序。

1. 需求筛选

初步进行需求筛选，包含有 4 个分析纬度，真实性、一致性、价值性和可行性。

真实性

需求是否是目标用户的真实需求，自己不要 YY 需求，同时也要对用户嘴上说的需求进行斟酌，需求是否真的存在。如用户说星巴克不好喝，但实际是因为太贵了，没钱。

一致性

是否符合产品定位？需求分覆盖面有多大？有多少目标用户有这种需求？这个需求有多大程度上的代表性？

价值性

需求能带来多少价值？（用户价值、企业价值）需求实现要多少成本？（人力、金钱、时间） 需求投入产出比如何？

可行性

需求按照目前现有的人力物力和财力能够实现，过滤掉企业能力范围以外的产品需求，但是我们可以和别的企业达成战略合作，求同存异，互利共赢。

2. 需求透视

需求透视就是从获取的表面需求中提炼出用户的本质需求。理解用户的本质需求，则有利于我们更好地提出产品需求。分析表面需求，本质需求和产品需求。

再来一个小案例。

有一天小浪郎和朋友去看电影，走在了街上突然发现没吃饭饿了，小浪郎想吃火锅，但由于要和他的朋友一起看电影，时间来不及，于是它们一起吃了山西刀削面，解决了吃饭问题，然后两人一起去看电影了。

那么上面小浪郎的用户描述需求是想吃火锅，但用户实际想要的只是没有吃饭，只要吃饭了就行，而他们的潜在需求有饮料、啤酒和水果等。

3. 需求排序

根据企业的战略定位、产品规划和用户需求，我们需要对记录的产品需求重要性进行优先级排序。具体而言，通过需求类型、需求频率、需求强度和需求逻辑来进行需求的优先级排序。

需求类型

依据 KANO 模型对需求做出的分类，考察需求的类型，包括基本型需求（痛点）、期望型需求（痒点）、兴奋型需求（兴奋点）。

如微信产品，用户的基本需求（痛点）是聊天，微信表情则为用户的痒点（期望型需求），没有表情包也照样聊天撕逼，而微信红包则是用户的兴奋点（兴奋型需求）

用户在单位时间内使用产品的次数即为需求的频率，频率越高，需求对用户越重要。如产品设计时，把高频率的功能放在一级，把低频率的产品功能放在二级甚至于三级等。

需求强度

需求的强度可以参考马斯洛需求层次理论，包括必要性、高频次和持续性。

需求逻辑

需求之间也存在着一定的逻辑关系，需求也有先后，先完成第一步需求，才能完成第二步需求。如微信视频，必须先有微信好友，才可进行微信好友视频。

需求不变，变得是适应需求的产品，把控需求来源，提高需求质量。

本篇文章为大家介绍了产品与需求、需求理论知识和应用、需求获取和分析研究，相信基于以上需求分析理论和方式方法，在以后大家对需求分析的处理能够有新思路，高效打造出一个有价值的优秀产品。希望能给到小伙伴建立自己的产品需求分析体系一些启发。

重要的事情说三遍：把控需求来源，提高需求质量；把控需求来源，提高需求质量；把控需求来源，提高需求质量。

文章来源：优设   作者：Hello_姚冰 

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

迪士尼的12条动画基本原则是传统动画中最有价值的原理之一。它出自Johnston和Frank的书《生命的幻觉》。虽然这些原理最初是为传统动画（例如角色动画）设计的，但在本文中，我们将探讨如何将其中的一些原理应用于UI动效上。

01-挤压和拉伸

在动画中，挤压和拉伸表示对象的重力，质量，弹性。当场景中的弹球撞击地面时会被挤压。在UI界面中，挤压和拉伸非常适合与按钮相结合。

例如，按钮的按下状态为挤压。通过控制挤压和拉伸，我们可以轻松地定义按钮的状态。除此之外，它还可以应用于界面上的所有的交互式元素。

应用于按钮上的挤压和拉伸

应用于侧边栏的挤压和拉伸

02-预备动作

预备动作为用户展示了即将发生的事情。就像奔跑开始时，我们的身体会先向后倾，然后才是加速跑，这就是预备动作。在UI动效中，悬停状态就是很好的例子。每当我们将鼠标悬停在元素上时，某些元素都会做出反应，表明它是可单击的，并且当您单击它时会发生某些事情。

悬停互动通常会告诉我们接下来有一个动作发生 

涉及水平滚动的界面通常会显示下一个元素的一部分，该元素会出现在滚动/滑动中

03-时间节奏

在传统动画中，时间由绘制的帧动画来控制。帧数越多，动画将越流畅和越慢。时间还可以表现对象的情绪和性格。

时间也是所有UI动效最基本的属性。定时和缓动功能在动效设计中起着重要的作用。漫长的过渡会使您的用户等待太久。另一方面，如果动画太快，用户可能会错过一些东西。通常，大多数界面动画在200到600毫秒之间。诸如悬停和反馈之类的交互约为300毫秒，而诸如过渡之类的复杂动作约为500毫秒。您可以参考Material Design，其中对每种类型的动画的持续时间都有很好的解释。

右侧的过渡会使用户等待太久

04-动画的缓入缓出

现实世界中的大多数对象都遵循缓动效果。换句话说，物体的运动并不突然。就像自由下落的物体会在运动过程中逐渐加速。

向UI元素添加缓动效果可以使它们看起来更生动自然。制定时间节奏和缓动标准可以让你建立一个高效的动效库。

右侧添加了缓动效果，所以看起来更自然

05-转场

转场，它包括如何将对象放置在场景中，如何以及何时进行每个动画等等。它将用户的注意力引向场景中最重要的对象。

对于UI界面，转场决定了元素的放置位置以及在发生交互时如何对元素进行排版。它将用户的注意力引向最关键的元素。

这是一个音乐类的APP，转场动画将歌曲封面和名称放大置顶，并让“喜欢”按钮单独出现，让用户一目了然

06-弧线运动

从高处抛出的球遵循了抛物线的路径——弧线会让事物更自然。在UI界面中，使用弧线运动会比使用直线运动更加的自然，要突出元素运动的路径时可以使用弧线。

弧线运动更加生动自然

07-辅助动画

在动画中，辅助动画用于强调场景中发生主要动作。例如，角色的头发在行走时的微妙移动，或者是面部表情的微妙变化。

在UI界面中，辅助动画可以使主要动作更加突出，这在向用户反馈信息时非常有帮助，所有微交互的作用均基于此原理。

辅助的例子动画让点赞效果更饱满

08-夸张

场景中的重要角色必须具有吸引力，通常会将某些动作进行夸大以引起更多关注。

在UI界面中，重要的交互作用也需要更夸张一些，以引起用户的注意。下图的设计就是一个很好的例子，悬浮的按钮在静态状态很显眼，因为它的颜色更重，并且悬浮在所有元素之上。当发生任何交互时，夸张的动画让它可以占据整个屏幕，使其吸引力更上一层楼。

占满全屏的夸张动画

夸张的支付按钮更吸引人的眼球

09-惯性与延时

试想，如果你坐在三轮车上，当车前进的时，身体会短暂后仰，然后也会随之前进，我们称之为延时。突然刹车时，又会由于惯性运动身体向前倾然后回来 。

在UI界面中，同样可以在元素静止之前添加惯性运动，以使它们感觉更自然。不同元素直接也可以添加延时效果，让动效更细腻~

窗口放大时添加了惯性效果

图像和文本添加了短暂的延时效果

文章来源：UI中国   作者：设计师深海

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

接下来为大家分享一下我收集到的案例：

--网站界面UI设计--

       数字信息时代,互联网和智能手机快速发展,促使界面设计成为热门行业。中国传统文化博大精深,蕴含多种多样的中国元素。本文立足中国传统文化和界面设计,从视觉和交互角度着手进行分析,通过论证中国元素在界面设计中的优秀表现,探讨如何使中国界面设计走在时代的前沿。

下面给大家分享一些“国潮”界面

--bs界面UI设计--

2015年之后的中国互联网，人口红利、流量红利逐渐退场。2019年遭遇第一场资本寒冬，上半年投资总金额同比下降了58.5%。也在2019年，“精益创业”、“精益数据分析”、“增长黑客”等一系列数据思潮开始流行。而UX设计师作为半个产品经理，我们很容易将这股“数据热”迁移到自己身上：每个UX设计师都要学数据分析了吗？数据和设计是什么关系？天天盯数据会限制设计师的想象力吗？数据到底要怎么用？……

Preview

——————————

数据热

过往，设计师一般不会把“数据”挂在嘴边。我们提倡“以用户为中心，打磨极致用户体验”，较少考虑成本和商业效益。

通俗来说，就是产品经理负责“生意”，设计师负责“体验”。以“造鞋”为例子，产品经理做了市场调研，决定要生产儿童运动鞋，设计师负责设计“适合4-11岁的儿童在城市公园玩闹”的鞋子应该长什么样、穿着它跑跑跳跳是不是舒服的。但是设计师不需要担心运动鞋的销量，产品经理则要跟老板汇报销量业绩。

在红利消退、产品同质化严重和快速迭代的多重压力下，UX设计迎来了更高的挑战：仅凭主观判断“好不好用、好不好看”来打磨产品内在体验，不考虑产品的生存、增长和盈利，很难在行业立足。与此同时，随着数据采集工具的日渐成熟，数据以“客观”和“便捷”两大特点，帮助我们更快获得“设计的依据”。精益化设计是必然趋势，而“数据分析”是精益化设计的手段之一。

沿用“设计鞋”的案例，UX设计师要在自己所在领域思考：在设计调研的过程中，我们用什么数据指标来衡量这个儿童鞋好穿、好卖？在鞋进行批量生产前，我们有没有数据资源支持我们研究父母/小孩对鞋子外观的偏好、小孩运动时容易受到哪些物理伤害等等？如果有条件进行小范围的数据实验，我们如何设计数据实验来评估好穿好卖？

PART 01

——————————

数据的定义

“理解任何事物都需要先对它进行定义，这样才能够在头脑中清楚地知道正在讨论的是这个东西，而不是其他东西。”非常喜欢美国经济学家Thomas Sowell在《经济学的思维方式》里说的这句话。

如果我们对“数据”下定义，那么产品设计语境中的“数据”具体是什么？数据是怎么产生的？

从数据采集手段来看，互联网产品的数据来源主要有3个：二手资料数据、问卷调研数据和应用埋点数据。

1/ 二手资料数据

行业数据和竞品数据一般通过二手资料获得，包括商业交易数据、用户群的态度和意愿、用户舆论指数、竞品的用户规模和盈利状况等宏观数据。常用的搜索渠道有：百度指数、企鹅智酷、艾瑞、尼尔森、各大科技资讯平台等。

我们可以将这些理解为“市场数据”，在立项期对产品方向有一定指导意义，能快速了解市场概况，也能帮助产品思考差异化定位的问题。

以“腾讯文档为”项目为例，我们想提高腾讯文档用户创建文档的成功率，通过模板创建文档是关键路径之一。研究用户通过模板创建的路径时，想大概了解用户找模板时可能会在意什么。于是我们尝试使用百度指数搜索“模板”、“文档模板”、“PPT模板”、“Word模板”、“Excel模板”，从搜索量得知：PPT模板搜索量最高，符合我们的推测；Word模板内容中，简历、合同需求量较大，而部分用户只是想要好看的Word背景等等。虽然我们得到的有效信息不多，但我们能够通过二手资料的方式，快速了解用户需求的基本面。

2/ 问卷调研数据

问卷调研数据是通过向目标用户发放问卷获得的，侧重于收集人口学信息、用户自述的历史行为、主观态度或意愿，比如用户满意度调查、流失用户原因调查等。本质上是通过建立假设、再进行抽样统计的方法来得到用户口述的答案。也就是，问卷倾向于听用户说了什么、而看不见用户真正做了什么。严谨的问卷分析也会比对后台数据，校验用户说的和做的是否一致，以清洗无效数据。

3/ 应用埋点数据

较之于问卷调研数据，我们想看“用户做了什么”，则通过分析应用埋点数据获得。

“应用埋点数据”也叫“埋点数据”、“前端页面数据”，我们可以简单理解为“通过技术手段获得用户在应用内（网站、客户端、小程序等）的操作行为数据”。其背后原理是：用户和界面发生交互，系统需要向服务器发送请求和返回请求，把这些请求预埋一段计数代码，就能得到页面的曝光数据和用户的操作数据。

埋点需要产品经理或设计师做好数据指标的定义，跟开发工程师提前沟通，让开发工程师在代码中嵌入埋点。一个埋点由多个字段组成，规范地定义字段，有利于我们在数据平台搜索埋点更方便。当我们怀疑数据有效性时，也更方便排查埋点问题。

埋点类型可分为曝光埋点、操作埋点和时长埋点：

1. 曝光埋点可以捕捉页面被展示的次数，可以是针对整个页面，也可以是页面中的某个区域。即我们常说的PV、UV。

2. 操作埋点则是在用户对页面某个区域（按钮、卡片、提示条等）进行手势操作（点击、双击、长按、滑动等）时，进行打点记录。对应的，也称之为某个操作的PV、UV。

3. 时长埋点是通过标记以上两类埋点、并计算时间差获得的。比如，我们记录用户选取模板耗费的时长，可以通过离开页面的时间（t2）-进入页面的时间（t1）计算。而离开页面则用点击左上角返回按钮、点击具体模板等“离开”操作来核算。

基于以上3种原始数据，我们可以运算得出点击率、功能渗透率、人均点击次数、人均使用时长等具有对比价值的数据。

较之于二手资料和调研数据，埋点数据更加贴近用户的真实表现，作为反馈指标的灵敏度更高，可挖掘性更强，也能作为客观衡量指标引入到每一次产品迭代中。

设计师理解埋点的原理，有助于在数据采集环节跟数据开发更好地沟通，并提出合理的数据需求。另外，当我们拿到一组数据，也需要从根本原理上去判断数据的信度和效度，确保数据没有质量问题再进行下一步分析。

PART 02

——————————

数据之于设计

数据分析能力会在UX设计师的岗位招聘要求中被提及，但除了电商和广告行业的数据化设计知识体系较为成熟，其他领域还在探索。另外，相比于市场营销、产品经理、产品运营等职能，设计师的分析框架是相对晚熟的。

实际上，我们很难从招聘广告中归纳“具备数据分析能力的设计师”长什么样，但我们期望这样的设计师对数据的感知力强、分析逻辑清晰、数据经验丰富，对某个垂直领域的数据仪表盘了如指掌等等。

数据对UX设计有什么用？或者说，在设计链路的哪一个环节，数据和设计才能发生化学反应？

UX设计日常流程为：得到一个需求（需求评审/需求挖掘）——输出设计方案（设计决策）——验证设计方案（设计实验）。顺着这个流程，我们来看看数据在UX设计各阶段的作用。

1/ 需求评审：以提升最终业务数据为目标，评估需求的价值贡献和优先级

肖恩·凯利斯在《增长黑客》开篇就提到“仓筒组织”这个概念：职能组织有各自的KPI，但未必对最终的业务目标都有利。比如开发人力有限的情况下，产品经理想上线新功能，市场运营想搞推广活动，设计想做UI大改版做炫酷的动画——就像N匹马有N个方向，马车跑不快。

尤其是当产品进入成长期，我们会发现“能做的事情真的太多了”！不仅仅是来自老板和产品经理的需求，每天都有用户想教你做产品，刚刚竞争对手又上线了N个新功能等等。另外，当多个产品经理分管不同业务线，每个产品经理都会认为自己提的需求优先级最高。那么，ABCD这几个需求，哪个更值得即刻实现？

有目标导向和成本意识的设计师，不会拿到PRD就开始画稿，而是做需求评审。下次产品经理给你提需求，或者自己想要主动提案，不妨从下面几个问题开始思考效益。

如果这个新功能上线或对已有功能做这些优化点：

｜正向评估：如果做，能使哪些用户在什么场景受益？用户会因此使用、消费、甚至推荐我们的产品吗？

｜负向评估：如果不做，是否会造成用户口碑变差，甚至弃用我们的产品？

｜数据导向：预估这个需求对大盘数据（AARRR）有何贡献？如果无法在短期看到对大盘数据的直接提升，应该取什么样的数据指标来评估其价值（GSM模型）？

｜比对优先级：目前有ABCD四个需求，而人力资源有限，当下最应该解决哪个数据环节的问题？

我们以腾讯文档的Excel按行填写功能为例，阐述如何在需求评审阶段就思考数据效益。

一开始，我们只是从用户吐槽中了解到在手机端使用Excel录入信息的困扰：协作人之间容易窜行误删误改别人填写的行，甚至把创建人输入的表头信息都给删掉了。

我们模拟信息收集场景，摘出Excel移动端输入的体验节点，发现“在有限的屏幕内去处理表格信息，需要来回滚动/缩放表格，再回到自己的行再输入”这一点最容易发生错误，尤其在没有冻结首行的情况下。

我们有收集表功能，也支持表格转收集表，但是都依赖创建人主动去使用这个品类/这个功能。我们是否可以在创建人不干预的情况下，直接把来回滚动的表格输入变成纵向的表单输入？

以上都是从“感知”角度发现和分析问题，确认了“存在这么一个问题”，然后提出了一个可行的想法。往往这个时候，我们容易为之兴奋。

但是如果我们坚持更精益的投入产出比，我们应当评估“这是不是一个要优先解决的问题”，即评估收益：改变Excel移动端的输入体验，能带来什么收益？

首先，我们做正负向评估。

｜正向评估：如果做，用户可以在手机端更顺畅地录入信息，避免串行删改的错误。虽然这不足以吸引新用户使用我们的产品，但这个体验未在竞品实现，能形成差异化的记忆点，也许能带来好的口碑。

｜负向评估：如果不做，手机端的Excel输入体验跟其他竞品无差，用户倒不会因此流失，但是创建人会因为协作者的犯错苦恼，也许会因此转为采用“IM一对一沟通”来避免出错。

然后是设定数据目标：如果这个功能落到数据板上，能作何贡献？

｜数据导向：我们预期这个功能能够通过提升手机端的输入体验，来避免用户出错，降低创建人整理数据的负担，以提高用户留存（而非预期这是一个拉新功能）。并且，设计假设正确，应该能通过一些数据指标看到用户的行为变化。

最后，对比同期提出的几个产品需求，评估优先级。

｜比对优先级：假设Excel按行填写的需求是A（图中黄色点），同期有一个影响文档安全分享的需求B。如果我们按照正负向评估去考量优先级，将AB两个需求都放在象限图里，越外层越应该优先处理，那么我们就应该优先处理需求B。

以上是为了将思维可视化呈现给读者，实操时更重要的是数据意识和敏感度。图示仅供参考，用何种形式表达不重要。

掌握一套清晰的需求评审思路，才有话语权去讨论这个需求是做还是不做、即刻要做还是延后再做。这不仅仅是UX设计师需要具备的目标导向思维和需求分析能力，而是整个团队都应该建立的数据意识和工作流。这也适用于对设计师提案的自我审查，避免自娱自乐。

2/ 需求挖掘：数据作为产品健康度的体检指标，为设计圈定问题域

产品在不同的成长阶段关注的短期效益会有所不同。初创期，产品先要验证其假设的需求是不是用户真实需求、商业模式是否可行。当产品发展到一定的用户规模，我们可以通过对比关键数据指标，去判断现阶段是否符合预期。这就像我们去医院抽血做体检，血样指标可以反映我们当前是否健康。

如何检验产品健康度呢？我们首先关注宏观的数据转化是否符合预期，即AARRR。海盗指标这一套，想必大家耳熟能详。但对设计师来说，难点在于如何将宏观数据转化与具体的用户使用场景进行关联，进而落实到具体的设计任务。

以腾讯文档为例，在线文档的核心用户价值是“从创作到协作的多人多端无缝同步”，因此我们定义用户的关键路径是“创作→分享→协作”，即：

基于关键路径，我们继续下钻分析每一个环节，建立用于监控“转化质量”的行为漏斗。比如在“分享”这一步，落到APP里，这个行为漏斗是：

我们发现仅30%的创建人在分享文档前设置了非私密权限——这个数据并不符合我们的预期，因为这会导致创建人分享文档后，协作人无法直接查看或编辑文档。协作人需要进行权限申请，创建人则需要处理相应的权限申请通知或更改权限，从“申请权限”到“审批通过”的时间差降低了协作效率。

我们进一步去找关联的数据指标，来确认“这给用户造成了困扰”——“有多少用户在文档分享出去之后再返回来设置权限”‘、“一个创建者平均要处理多少次权限申请”等等。

通过小范围的用户测试，我们了解到“权限设置”是一个视觉盲区。于是，我们优化分享页的信息展示，来改善“用户看不见权限设置”这个问题。另外，当创建人在处理权限申请的通知时，提供修改权限的入口，以避免重复处理同一个文档的申请消息。

最终，我们将“分享前进行权限设置”的转化提高到80%——吹牛的，业务数据太敏感，无法以真实数据跟大家分享，本文的数字皆为脱敏数据。

这就像一个剥洋葱的过程。先找到产品的核心价值和对应的主路径，再拆解到对应的多个用户任务流，关注微观的某个环节转化是否有问题。利用数据诊断产品健康度，然后继续用数据或其他研究方法下钻，下钻到可以落地到设计点的层面。

3/ 设计决策：借鉴用户行为数据，对方案进行快速决策

2016年听了白木彰老师在杭州的一次现场分享，他对“Design”的理解非常透彻。“Sign”是“标志”，应该是大家最共通的常识，就像国旗是这个国家的sign。那“De”是什么？台下有人回答“重新定义”，而白木彰很自信地说：“不，这是一个否定词”。

对于UX来说，同理。每一次的设计都是一次否定，否定现有体验的合理性，否定现有的产品、服务或某一功能完全满足需求。反过来想，则是审问自己的设计方案：每一次的“否定”，真的更好吗？

这里举一个“小需求”为例：腾讯文档Excel的PC端右键菜单高度优化。笔者目前负责腾讯文档编辑模块的UX工作，日常就是很多这样的“小优化”，其实这更加考验数据敏感度和对“严谨”的坚持。

需求背景就是用户反馈“右键菜单太长了，小屏幕看不到菜单底部的内容”。

“展示问题”的解法有很多：

解法1/ 用UI手段，降低单个menu item的高度。

解法2/ 重新归类，通过折叠来缩短菜单。

解法3/ 当菜单无法完整展示，重新锚定其在屏幕的坐标。

对比竞品，确实有表格产品通过（2）去解决这个问题，但是我们捞数据发现：右键菜单中，插入行列是高频操作（红色部分），点击次数比其他功能高5～130倍，且人均点击量分别是3次和2次。我们决定不去对增加行列进行菜单折叠，因为这样做虽然我们解决了“菜单太高”的问题，但降低了点击效率。

接到某个需求的“A问题”，我们容易一叶障目。但是，会不会因为我们解决了A问题而引发B问题呢？数据帮助我们快速决策，避免B问题的出现。谨慎对待每一次小设计，因为每一次小设计都是一次否定。

4/ 设计实验：采用数据实验对设计方案进行择优或改进

大家对数据实验应该不陌生，常用的方法有AB测试和灰度测试，是一种控制变量的抽样实验方法。

AB测试是指通过抽取抽取等量用户样本进行AB两个设计方案的投放，对比两组数据，进行方案择优。这两个方案的差异要严格控制在“仅有一个因素的差异”。这跟我们初中做生物实验论证“一棵小树的生长需要阳光”的思路一样：两组等量的小树，一组有阳光，一组没有阳光，经历相同的时间后对比生长的平均高度差。水、空气、养分等其他条件要严格一致。因此大改版等“多变量”的设计并不适用于AB测试去印证。

大改版则通过灰度测试或拆分变量去做AB测试来确保效果。灰度测试是指如果软件要在不久的将来推出一个全新的功能，或者做一次比较重大的改版的话，要先进行一个小范围的尝试工作，然后再慢慢放量，直到这个全新的功能覆盖到所有用户。也就是说在全量发布的黑白之间有一个灰，所以这种方法也通常被称为灰度测试。

设计师需要观察综合的数据指标，以腾讯文档为例常规的指标有：PV、UV、人均点击次数、功能渗透率、使用该功能的留存率等等。另外是多渠道收集用户反馈，包括腾讯文档的“吐个槽”社区、微博搜索关键词、随访身边的用户朋友等。

Conclusion

——————————

结语

数据化设计不是对“精心打磨体验”的否定。恰恰相反，对设计工匠来说，数据分析能力是一种新的“打磨工具”，提倡在设计实施和决策过程中更科学和客观。UX和数据的关系，就像我们期望鞋子被量产之前能够有数据佐证“这款鞋好看好穿好卖”，而不是否定“好看又好穿的鞋子能带来更好的销量”。

文章来源：站酷   作者：腾讯ISUX

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

编辑导语：在一个团队里，成员之间“协同合作”是非常有必要的，比如一些岗位没办法完全理解设计师的想法，多沟通可以避免一些不必要的摩擦；在出现问题时，现在自己的环节找找问题，再进行沟通；本文作者分享了关于精准还原设计稿的环节，我们一起来看一下。

UI设计师作为展示产品形态的执行层，产品上线前走查视觉与交互还原是必经环节。

设计师可能都遇到过一个问题，作图时连一像素的分割线都纠结好几次，但是开发完的效果却不尽人意，UI验收不通过；然后前端这边委屈的想拿出藏在键盘下的四十米大刀找你来血拼。

我们经常会听到身边的设计师与开发哥的一些对话，关于对齐、大小、间距等设计还原问题经常会讨论很久；甚至有时会觉得，几个像素的间距是不是有必要这么纠结？

01 了解设计还原

1.1 设计还原到底是什么

「还原」是指事物恢复到原来的状况或形状，互联网中的「设计还原」是说开发后实际界面和设计稿效果有偏差，进行设计校对。

1.2 设计还原的现状

一直以来，设计验收都不太受重视：

1. 设计师习惯于把时间用在雕琢设计稿上，而忽略掉后期的设计验收；
2. 对自己和合作的程序员极其自信，认为对方能知道到自己所有的点，会完全按照设计稿来。

不同的项目类型还原度也不同：用户产品>B端产品>后台；对于用户产品最好是能做到像素级还原。

1.3 设计还原的意义

在这个快速发展、迭代、更新的时代，互联网产品的用户体验重视度越来越高，而其中的产品设计还原也成为了工作流中重要的一环。

我相信每一名UI设计师，心里应该都有一个前端能100%还原设计稿的梦想，毕竟那是我们艰苦奋斗的劳动成果。

而视觉还原的高低与否，则直接取决于设计——开发——测试这些环节的协作质量；不仅仅影响上线产品的用户体验，还影响着作为产品设计最后一环的工作质量。

02 影响设计还原的因素

经过走访UI/UX设计师、前端工程师和测试工程师的还原设计图的工作场景。

深究原因后，线上效果的失真率其实涉及到设计、前端开发、测试这三个环节，分析造成这种现象出现的原因大概有以下几点：

2.1 从UI设计上来说：视觉处理不规范

• 自由发挥，把界面UI设计当作画布任意挥洒，完全不考虑实现的难度；
• 标注图不全，没有详尽的对接文档和设计规范；
• 沟通不到位，评审时没有将设计思路和易错点交代清楚
• 没有考虑设计稿扩展性和前端代码的逻辑，反复修改，增加FE工作量。

2.2 从前端开发来说：没有理解设计逻辑

• 时间紧任务重，没办法一张一张看标注图；
• 直男思维，想怎么写就怎么写，反正最后要上线，细不细致都一样；
• 不知道如何解决，内向不肯和UI沟通找到解决方案。

2.3 从测试走查来说：交付走查不细致

• 测试混乱，测功能时提UIbug；
• 测试页面还原时，提UIbug不细致，用“请参照UI设计稿”概括一切问题。

03 精准还原的前提

了解开发依据哪些规则还原设计稿，前期的准备工作是重中之重，设定好每一个细节规则，后期落地还原时才会将页面的失真率降到最低。

3.1 视觉规范

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 缺省页

• 空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。
• 无网络状态：在没有连接到网络时的提示页面。
• 404&505页面：发生未知错误时的页面。

3.2 组件规范

常用的 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后，产品趋于成熟，这个时候开始做组件化。组件化搭建最多会有六个步骤，分别为：梳理类目、场景走查、问题分析、方案设计、生成插件库、验证开发。

具体的组件化设计升级流程我总结成了下图：

当团队搭建完成组件化之后，接下来就是成员间的使用，这一过程有业务需求产生组件模板、组件模版形成页面、页面形成页面流程和页面流程形成用户体验。

组件库重建之初无法一应俱全，是需要后续设计师不断的维护与迭代的。

3.3 详尽标注

关于设计输出，现在很多像蓝湖、zeplin、Pxcooker这种标注软件把设计师从手动标注解救出来，往往把视觉稿在蓝湖一扔就完事，前端开发完界面视觉还原度还是不高。

因为标注软件只能负责生成元素的尺寸、样式，遇到复杂样式即使你反复衡量的一些像素，开发还是会漏掉——这样很有可能出现视觉灾难。

所以，一些复杂而又关键的页面我建议可以贴心的做些手动标注，主动告诉开发重要性和注意点。

我们现在工作中会有两种标注情景：

3.3.1 运营标注

因为很多数据是后台传输到前端，有图片、有文字，每个内容都需要给运营设置一个上传标准。

3.3.2 开发标注

开发标注是从设计稿落地成代码的主要参考，除了蓝湖提供的标注，我们还需要写一些重要部分设计说明，例如：模块区分、局部特殊设计（该内容根据自身产品而确定）。

3.3.2.1 常规手动标注

3.3.2.2 特殊模块/页面划分说明

复杂的表单设计，是很具有代表性的复杂页面，根据页面的布局进行原型化示例，帮助前端更好的搭建代码框架。

3.4 同步切图逻辑

关于切图，切图之前应跟开发确定好输出的格式和尺寸，确定应该用 SVG，一倍图或是两倍图，SVG体量小渲染质量好，单色使时还能替换颜色；PNG则通常用在实景图，一倍图和二倍图则根据实际需要进行输出。

如果要做分层动画，那我们就涉及到分层切图，如果桌面端和手机端样式差别较大，那我们需要和开发沟通好如何实现，是否需要特殊切图；所有的特殊切图合特殊样式，我们都应该提前跟开发沟通好。

3.5 了解开发思维

设计-开发这个环节的协作质量对视觉还原起着决定性的重要影响；但是，由于本身的工作性质，我们和开发之间沟通是个棘手又麻烦的历史遗留难题；设计师与开发鸡同鸭讲从而导致视觉还原度低下的局面，几乎每天都在上演。

俗话说“知己知彼百战百胜”，如果设计师能够了解一些基本的开发术语以及开发流程，就可以更好的打破沟通隔阂。

那网页设计稿的实现具体是怎样操作的呢？

步骤可以概括如下：

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在出稿时就带入「盒子模型」思维，合理地构思好每一块元素的布局，一方面可以帮助自己在输出页面时，布局更加合理；另一方面可以在前端落地时辅助前端准确还原。

04 精准还原的落地方法

优秀的设计离不开开发人员的落地支持，作为设计师，协同开发人员完成设计落地也是工作中重要的一环。

做好以下几点，站在开发人员的角度为他们“多想一步”，高质量的设计还原指日可待。

4.1 设计宣讲

在进行设计还原的时候我更希望大家把设计评审的环节重视起来，之前也有详细的讲到过《如何进行设计评审》的，因为我认为评审对于设计还原的意义是把问题前置化。

通过设计评审可以把改版视觉变化最大的地方和开发说明清楚，这些改版布局框架改变都会增加开发工作量；这个环节把握好了，那基本都能实现出来，特殊情况除外，比如前期忽略了一些后台数据的问题。

有些细微的地方需要我们特别像开发说明，也加深他们的印象，在实现时候就减少出错；像开发走读的时候，只把关键核心点，规则讲清楚；我们前面每走一步，都是为了后面我们检视还原度的时候要轻松一些，开发也轻松一些，就比如前期基础没打好，后面深入很难。

设计师做好会议记录（记录问题及解决方案，以及达成的共识），并且在会议结束后以邮件形式发送前端们，抄送产品和运营，确保会议内容的传达到位；让设计师与前端工程师相关问题达成一致，提升工作效率。

在开发紧张环节中，即使我们前面所有工作都准备好了，也很难避免开发不找我沟通；这时候我们要积极回应他们，并且和他们一起处理问题。

比如某些难度大一点的页面，开发实现效果和设计稿差异不小；那么这时候，开发会截一张他们实现的效果图给你看，这时你就要仔细去找问题，不要一口咬定就是开发的原因；先沟通具体原因，然后找出解决办法，如果是标注出现问题，比如标注标死了，页面不灵活，适配局限性很大。

4.2 视觉走查

在视觉走查的时候我们可以把test环境下的页面和设计稿拿出来对比，走查头部、尾部等位置是否完整统一，按钮样式、反馈状态、报错等样式是否统一；是否有缺少的场景和状态，根据任务流程对场景和状态进行排查，保证设计的完整性。

这里给大家推荐两个视觉走查方法：

1）大家来找茬法

验收的时候，我们需要把开发实现后的效果截图，然后再去和设计稿做对比。

我们可以直接把截图放在设计图上方，降低透明度，大致比对下，就知道哪里不太对，然后再具体标注需要修改地方的参数。

2）页面重构走查

走查还原的时候，在Chrome浏览器的空白处右键点击检查，找到里面的Computed窗口，我们可以找到具体的文字、间距、投影等属性。

有时候一些比较细微的调整，我们可以双击具体的数值进行调整，调整到自己满意之后再给到具体的数值给开发；这样就不用在我们摇摆不定的情况下，造成双方的困扰

4.3 交互反馈

4.3.1 确保可用性

设计任务流程，进行设计走查，在移动App端，我们所设计的应用是建立在手指点击操作的基础上进行使用的。

我们的手指不像鼠标一样能够精确定位和响应，所以我们需要在设计的过程中确保可点击的区域能够较为明显的识别。

4.3.2 确保易读性

文本内容是大部分产品的重要组成部分，所以文本的排版是非常重要的（很多人说中文排版不好看，那是因为你不会用中文排版的方式去做排版）；确保文字清晰、易阅读是在文字处理上的必须保证的。

在众多设计原理中，格式塔原理一直被广泛应用，它可以很好的梳理界面信息结构、层级关系，从而提升设计的可读性；在自查过程中，我们可以通过格式塔原理检验页面中的元素是否符合标准。

4.3.3 反馈机制

当用户和产品需要交互时，会使用不同的模式反馈信息或结果，为用户在各个阶段提供必要、积极、及时的反馈，避免过度反馈，以免带来不必要的打扰。

常见的三种反馈信息如下，大家可以在此基础上自查是否有反馈、反馈是否传达清晰，是否对用户有即时的响应等细节

• 提示信息：如警告、通知，常见形式 Alert、Badge、Popover；
• 过程反馈：加载状态、录入反馈、确认弹窗；
• 结果反馈：全局提示、对话框反馈；

4.3.4 动效还原

动效这块是产品中比较高规格的一个存在，所以在使用的过程中一定要谨慎，不能随意加入多余的动效，导致在使用产品的过程中出现问题。

4.4 观察敏感点

在我走查的经验多了以后，发现 最容易造成落地页面与设计稿视觉差异的，其实就是颜色与间距还有图标的视觉错觉。不要小看这两个细节元素，把控不好它们会让落地页面效果大打折扣。所以在进行页面还原的可以着重对比一下几点:

4.4.1 分割线

在验收的时候要特别注意分割线的问题，分割线是在所有屏幕上都是1px，但是很多程序员没有注意这个，或者说设计师在开发前没有特别说明；程序员就写成了1pt，因为pt是1x下的单位，px是实际单位。

所以在做分割线的是，单位需要是「px」，这样才能保证每个屏幕的分割线都是1像素。

下面主要以3个主要场景来分点解释分割线的标注：

• 列表流；
• feed流；
• 内容块之间。

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的视觉平衡。

4.5 考虑特殊场景

特殊场景在设计过程中常常会被忽略，等到在现实中碰到才会意识到缺失异常状态会非常尴尬，所以大家在完成主流程设计后，一定也要考虑到特殊场景。

大家可以参照以下几种场景对设计进行自查优化调整：

1）网络异常

考虑到网络异常情况时，通常产品会通过异常状态页面或者交互反馈来告知用户当前的异常状态和如何解决问题（解决方案引导、刷新、toast）。

2）服务器异常

服务器异常状况较少出现，时间也较短，通常不提示具体原因，设计处理方式为在新页面展示缺省页，文案+插画的形式给予用户提示及重试引导。

3）空状态

空状态指的是页面中无内容，主要的几个情况，设计师需要根据不同的场景给出文案+插画的表现形式引导用户：

• 无权限，针对的是某些需要权限开启后才能获取内容的页面；
• 搜索无结果，对应搜索无相应结果的空状态提示；
• 内容为空，如初始状态、内容被清空后的状态。

4）内容缺失

内容缺失展示效果的考虑，设定页面图片缺失的占位图。

5）加载页面的表达方

考虑网络加载或者数据加载的时候会等待几秒钟，通常产品会有一个简单页面的占位图形式来减轻用户在等待时的焦虑感；可以是loading，也可以是整体页面的刷新动效。

4.6 关注机型适配问题

设计还原的时候最后还还看一下不同机型适配的问题。保证不同机型的界面呈现效果一致。

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流里的图片，适配的方法大多都是自适应，界面中的元素间距和数量不变，元素尺寸进行等比缩放，比较适用于固定比例；但尺寸随屏幕宽度变化的元素，如下图所示：

对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。

05 设计还原的思考

假设视觉还原上真的出了问题，首先要寻找原因，是自己没做到位？还是对方没理解你的想法？

我感觉可以按照以下几个方法去做：

5.1 提升设计输出质量

设计团队内部先弄明白改版的意义，画好标注色值、像素的示意图和文档，做好产品原型等任何能让对方不需纠结，直接可以上手的工作。

做好前期的准备工作，尽可能的多做思考，完善设计稿；尤其是边界情况，把自己的问题留给自己，这样可能产生的设计还原问题就会大幅减少。

多向开发同学请教，即便遇到技术确实难以实现的情况，不要逃避或者过于固执，了解具体原因，不断累积自己的技术知识；自己的专业、努力是赢得程序员尊重的前提，赢得他们的尊重你才能顺利开展工作。

5.2 提高设计师话语权

这是一个比较复杂而且需要长期努力的话题，每个公司都会有其实际情况存在，团队越大，情况越复杂。

设计师团队或者个人的话语权如果很弱，确实会面对十分被动的处境；首先需要说明的是，话语权是赢得的，而不是赋予的；想要改善被动的局面，要认清所处的环境，问题的症结，调整定位，并付出努力；只有证明了设计确实能够解决问题，甚至驱动商业价值，才会逐步提升话语权。

5.3 灌输用户体验的重要性

完成一项任务时最重要的是团队的思维模式是否统一，设计师在乎用户体验，工程师只在乎开发成本，那问题没办法达成一致是很正常的。

想要让大家认同你的看法，就要在平常不断的潜移默化影响别人；比如没事多跟公司其他人聊产品、聊体验、聊感受，慢慢给他们灌输体验的重要性。

只要你的话题有趣，人有趣，没有人会拒绝跟你聊；时间长了，整个团队的思路就会有所转变。

5.4 按照进度和优先级优化

设计师自己可以先按优先级去排布还原顺序，看这1像素是否对当前产品重要性。

在搞清楚产品进度、优先级的情况下，记录所有还原问题，自己标记优先级，整理完毕后一次性给他，再跟程序员解决方案和时间；也可以与开发同学共同摸索一套双方都能接受的清单模式，标明问题，修改建议，重要层级，根据实际情况详细说明或者简要说明，能够当面沟通更佳。

5.5 加强团队建设

良好的团队合作氛围是有效的润滑剂；好的合作关系如同一条战壕里的战友，哪怕多年后回想起来，也应该是一起冲锋陷阵的光辉岁月。

设计师应该认识到自己在整个项目流程中的位置，不卑不亢，把麻烦留给自己，不要推卸责任或者互相推诿，逐步打造自己的声誉和气场。

06 结语

一个优质的项目落地是各部门协同合作的成果，就像我们玩游戏，后期高质量的输出也需要前期优秀的辅助来打铺垫。

在“协同作战”的基础上，灵活运用规范、标注和走查的方法来主动推动项目的进行；不仅可以让设计稿得到最大程度的还原，也可以提升我们协作能力和对环节的把控能力。

任何问题只要多交流，会避免很多阻塞情况；出于设计师的角度当然都希望每一张视觉稿得到100%的还原；因为用户只看你上线效果，但是往往排期紧张需要一些取舍，我希望能在有限的时间内做到最好。

在后期视觉验收的时候，我们可以换位思考，把自己当做程序员，站在他们的角度去思考问题；怎么样的验收方式会更方便开发修改，减少重复返工的次数，情愿验收标注的时候多花10分钟，也要把修改意见写详细，帮开发节省时间，反过来也帮我们自己减少了二次验收的成本。

文章来源：人人都是产品经理     作者：郝小七

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

什么是分类

简单地讲，分类就是按照种类、等级或性质分别归类。

分类的特点

1、共同性：

某种事物无论是按什么分类，只要是属于同一种分类，就一定有一个共同的属性，而这个属性就是分类的依据。

假如手机是指“移动便携性的通讯设备”，那么小米手机、华为手机、苹果手机等，虽然系统不同、性能配置不同、外观设计不同，但是都可以归类到手机，因为它们都具备“移动便携性的通讯设备”这一共同属性。

再举个很简单的例子，苹果、梨子、芒果都可以划分为水果，因为他们具备“多汁且主要味觉为甜味和酸味，可食用”的属性（定义来自百度百科），这些属性是归属于这个分类的必要条件。基于这个分类，我们比较容易判断得出，生菜不是水果，因为虽然具备可食用性，但是不具备“多汁且主要味觉为甜味和酸味”。

2、组织性：

分类可以把杂乱的事物变得规整，把凌乱的信息按照某些维度划分，使事物更加清晰。

前两年风风火火的垃圾分类，就是一个例子。生活中所有物品废弃后都可以成为垃圾，如果不进行垃圾分类，处理成本高且污染环境。而垃圾分类，就是将垃圾按一定规定或标准将垃圾分类储存、投放和搬运。

既然分类是按照某种方式进行组织，那我们需要明确了解，分类方式必须让用户易于理解。所以，分类本身是否合理，很大程度上取决于人们能否容易理解分类。

“简单的组织模式具有清晰的界限——是非分明。这样，用户才能明确知道到哪里去找自己想要的东西。因此，要多找一些用户，询问他们的分类标准。如果众口不一，或者根本就难以回答，你就有麻烦了。”

垃圾分类很火还有一个原因，因为用户经常不知道什么物品属于什么垃圾，这就对垃圾分类产生很大的阻力，网上一时间有了很多识别物品垃圾分类的产品功能。

我之前使用三星手机，每次想要在设置里面寻找某功能，都很让人烦躁，因为手机设置里定义的某功能的分类方式，与我们的认知并不一致，这就会造成寻找时及其低效的情况，同时也会引起强烈不满，这意味着，如果你忘了某事物的具体名称，而分类方式与心理模型所认知的分类方式不一致，你就极难找到。（不过三星很有意思的一点是，尽管在设置的分类项里找不到，但是往往能在设置项下方的推荐查找处找到相应功能，这就很魔幻。）

3、高效性：

分类本身就是将混乱的事物进行归类，这带来一个很明显优点，就是便于用户查找，只要用户明确某事物属于哪一分类，便能相对轻松地找到。

比如我们想要寻找某款好用的修图软件，但是不知道具体名称，想要在应用商店的众多应用里，寻找某款应用，比较常用的方式就是搜索或者分类。

分类可以将应用按不同用途进行划分，比如视频、拍摄、工具、社交等。通过这些分类，可以很大程度上缩小我们的寻找范围，这就是分类的高效性。

4、对比性：

分类还有隐藏属性，就是对比性。许多用户使用分类时，也会喜欢进行对比。

还是以修图软件为例子，你想要某款修图软件，于是你通过分类，找到了一批修图软件，而你本身并不知道什么软件好。分类将相同属性的软件聚合到一起，一定程度上可以帮助你基于某种维度进行对比，正好可以让你更轻松地对比哪款软件更适合你。

5、全面性：

分类是否合理，还需要看分类本身是否足够全面。理论上，我们通过分类划分事物，则分类需要可以将这些食物完全囊括。如果分类本身无法囊括这些事物，就会造成用户寻找时的盲区，证明这种分类方式本身不合理。

假如用户去逛淘宝，想要找某物品，但是翻了很多分类，仍然找不到，这时大概率就不会再通过分类进行寻找了，而这种糟糕的体验，也会让用户对这个产品的分类变得很失望。

6、多样性：

刚才说到，同一分类是围绕同一个属性的。但是，同一个事物，本身可以有很多种分类方式。而我们需要保证的是，事物在同一分类里的具有唯一性。

一首歌，如果按照语言体系维度进行划分，一般可以划分为华语、英语、日语等。还可以按照流派维度来划分，一般可以划分为电子、轻音乐、摇滚、说唱等。

我们对事物的认识方式是立体的，事物可以被按照不同维度进行不同分类也就不足为怪了。同一个事物，甚至同一个人，是可以有多种分类方式的。

设计分类功能

说完分类的许多属性，我们聊聊在互联网产品中，用户会在什么场景下使用分类？我们又该如何设计分类功能？

1、分类的使用场景

首先，用户会在什么场景下使用分类？从产品层面，分类是便于人们查找某事物的一种方式，因为相对比较清晰、高效。

这里有个很关键的点，就是“查找”。也就是说，分类的使用场景，偏向于人们有相对明确的目的。用户的行为路径是有主动的查找需求。

互联网产品，查找某事物，最常见的方式是搜索，浏览，分类。而这几种方式都有不同点，分类侧重于“属性”区分。

大部分用户使用分类时，行为特点是相对主动的。此时用户未必有十分明确的目标，但大致知道想要什么。比如你想和朋友聚餐，不知道具体吃什么，这时候你打开了大众点评，你只知道要吃中餐，这时你可以在中餐的分类里去找适合你的店。

用户的目标如果十分清晰，则更适合直接搜索，因为这比起分类查找的路径更短也更高效。

总结一下，我们要设计分类功能，需要从用户的角度来观察分类这件事情。：

· 用户主要的行为模式：人找内容。

· 有目标但不够明确。

2、如何设计分类功能

a、分类的层级

我们需要先了解分类的细分层级，分类的层级大部分不超过 4 层，但会因不同产品的定义不同而有所区别。

一般来说，第一层是颗粒度相对较大的，接下来会层层在上一层的基础上细化。

以京东的分类为例：

第一层：奢侈品，箱包，手机等；

第二层：手机包含：热门品牌、手机类型、运营商、手机配件；

第三层：热门品牌包含：苹果、华为、OPPO、VIVO、小米等；

第四层：苹果手机包含：iPhone 12、iPhone 11等；

最少的层级是两层，比如垃圾分类：

第一层：可回收垃圾、干垃圾、湿垃圾、有害垃圾；

第二层：具体的垃圾物品。

就体验层面而言，建议分类层级避免超过 3、4 层，尽管本身可能会提升细分度，便于用户查找。但由于分类方式本身必须与用户的理解相契合，如果太多层分类，用户需要思考目标内容在哪一分类。经过几层判断后，才能找到目标内容，这对于用户的理解成本是比较高的。

此外，太多层级不利于用户在不够熟悉分类方式时快速了解某分类下的具体事物。如果用户对分类的划分方式理解错误，就需要返回继续查找，效率低、使用门槛高。

当然也不能盲目追求尽可能短的分类层级。两个层级可能无法满足查找需求，因为内容量庞大，所以还需要更多的过滤，需要依据产品类型而定。

由于目前许多产品都发展到相对成熟的状态，所以设计分类功能时，一般不需要对分类方式再进行划分，主要原因是相同类型的产品，分类方式大同小异。用户的理解习惯上，对于某事物的分类也有基本的认知。现在设计分类功能，主要是对页面交互及视觉层级进行重新设计和调整。

b、如何根据产品设计分类

我们会梳理常见的分类交互框架，从分类入口、页面布局等层面可以看到产品中分类功能的定位强弱。这里列举的分类形式，会根据产品的主功能进行阐述。比如电商类就是商品分类、旅游类就是地点分类等。

• 侧边导航型分类

以京东 App 为例，京东把分类功能作为一个主要的页面模块。分类 tab 占据了 App 的第 2 个底部 tab。

使用京东的用户，购买的目的性相对较强，京东主打的就是自营正品和快递速度，商品与淘宝相比会少很多，但依然很全。用户习惯上，“逛”的属性没有淘宝那么强。首页以功能区+信息流为主，偏向于商品分发+逛信息流，而分类功能则主要满足相对明确目的用户需求。

京东分类页左侧为一级分类，右侧为二、三级分类。侧边导航将分类竖排的最大优点是能够充分利用屏幕空间，提升分类类型的展示效率。适用于分类类型多、分类层级多的场景。右侧页面信息灵活性较高，可以配置运营位，如放置运营 Banner ，且支持左右滑动 Banner 。下方一般放置二、三级分类。

右侧页面滑动时，顶部有辅助查找二、三级分类的导航分类标签，便于用户快速查找：

切换一级分类：这种框架切换分类的方式主要有两种：1、点击左侧导航栏进行切换；2、向上滑动右侧页面进行切换。用户习惯上，第 1 种方式会更高效，而第 2 种切换方式会更自然，更符合手势操作。

以【推荐分类】为例，右侧【常用分类、专场推荐、热门分类】都是归属于【推荐分类】的。为了便于用户更好区分页面分类层级，页面向上滑动时，通常会设计继续上拉切换的提示。目的是提醒用户，该部分已经滑动到底了，继续上滑会切换到下一部分，明确区分不同分类。

上滑的另外一种模式，以宜家为例，宜家聚焦于家居用品，分类类目没有大型电商 App 那么多。左侧是一级导航【灯具照明、装饰品等】，右侧分类标题与左侧导航一一对应，并且分类之间无明确的页面分隔区分，所以滑动时无需设计切换到下一部分的提示。

以上讲的，右侧页面均是二、三级分类入口，并不是具体的。分类层级或类型少的情况下，右侧可以尝试放置具体内容，比如华为应用市场的处理形式。

需要注意：

1、左侧导航占据了屏幕纵向的固定位置，从而缩减了页面宽度。

2、由于层级多，左右侧均是分类入口，用户无法在页面直接看到具体商品/内容。在电商产品上，用户容易区分不同分类类目下是什么商品。但可能在某些 App 上，用户未必清晰所要寻找的内容在哪一分类类目下，可能造成用户流失。

3、如果没有具体的内容呈现，对于内容、商品等分发效率也存在影响。

• 顶部 Tab 型分类

顶部导航型的优点是将多级分类与具体内容结合在一个页面，可通过点击或者滑动切换不同分类，将触达具体内容的路径尽可能减少，提升具体内容的曝光。

以掌阅 App 为例：最高层为一级分类，可滑动。第二层是二级分类，更精准分类挑选。第三层导航偏向于筛选。第四层为具体内容，用户无需通过页面跳转就能查看。这种设计特点很明显：内容曝光 > 分类效率。由于一级分类不多，可以通过左右滑动查看，避免浪费页面空间。二级分类类型多，采用折叠的形式将分类收起，点击可以展开更多二级分类。

显而易见的，多层分类在顶部排列，视觉效果并不佳。默认状态下，占用页面顶部的空间。这种结构，在设计时为了能够节省页面空间，二、三级导航会伴随用户向上滑动的手势折叠，提升内容的曝光效率。用户在滑动场景下，会更聚焦于页面具体内容而非导航，所以折叠的设计比较巧妙。

这种设计由于具体内容曝光的效率高，受到许多产品的青睐，适合于资讯类、内容类等产品。比如微博首页，微博侧重于内容的主动推荐，所以将分类弱化为一行导航栏，页面主体为具体内容推荐。用户浏览的内容有相对固定的倾向，比如会喜欢看综艺、社会、美妆等内容，并没有很强的寻找不同分类的诉求。

若用户想要设置常用的分类频道，可点击【+】展开，查看常用频道。由于频道比较多，而横滑 Tab 左右滑动的效率较低，所以微博选择了展示部分常用频道。如果用户想查看更多频道，还能在展开的页面里进行配置。这种设计为分类功能的设计带来了更多自定义性。

知乎的处理逻辑与微博一致：

淘宝的分类相比于一般电商类的产品，会比较特别，常见的电商类产品的分类模式和上面介绍的京东 App 比较相似。但淘宝已经往全面信息流化的方向发展，为了推动用户在淘宝中“逛街”，甚至连分类都已经往信息流化的方向发展。

淘宝的分类功能正在弱化，不像京东、苏宁占据着底部第 2 个 tab 的位置，而是在首屏功能区的最后一位。点击后，也不再是常规的侧边导航，而是强化商品外显。

淘宝分类页除了上方的一、二级分类，下方都是商品推荐，向上滑动就是瀑布流，增强商品而弱化分类效率。

如果用户想看其他分类，可以通过左右滑动切换。如果希望查看更多分类，需点开旁边的”更多“按钮，通过”更多“按钮进入的页面，侧重于高效展示分类。淘宝有信心这么做，一部分原因可能基于对算法推荐的信心，我发现不同手机看到的分类顺序并不一致。

• 聚焦型分类

以 B 站为例，B 站的分区页面的设计形式为展示番剧、国剧、放映等所有一级导航，而将细分层级隐藏到下一级页面。

这种设计方式适合一级分类类型很多，且重点在于高效呈现这些分类类型的场景。二级页面聚焦于具体的内容，可以避免将一、二级分类堆叠在一个页面，满足用户对查找分类的效率的要求，避免过载的信息量使页面变得复杂。但显而易见的，这种结构不利于用户在当前页面直接看到下一层级内容。

App store 整体逻辑与 B 站一致，区别在于排列方式为列表型排列。

vivo 应用商店也是聚焦型分类，但是会把二级分类呈现出来，与侧边导航型分类很相似，区别在于这里是整列表滑动。

• 筛选型分类

前面讲到，分类是具有多种维度的。以“好好住”为例，有居室、面积、风格、预算、特色等维度。

上面“好好住”的几个维度之间，没有上下层级之分，均属于同一层级，所以层级是并列而非递进的，这种情况更适合采用筛选的处理形式。同样的，由于顶部筛选类型多，占据过多的页面空间，当页面上滑后，筛选可折叠以节省页面空间，同时更聚焦与具体内容。

结语

设计分类功能，要先明确分类的维度，以及用户是否容易理解，避免造成与用户认知习惯相冲突从而影响功能使用的情况。

整体上，通过分类功能找目标内容的路径应该避免太长，因为这会影响到内容曝光效率及用户对分类之下的具体内容的感知。

分类本身是一种信息组织与呈现方式，设计时需要对产品信息本身有足够理解，才能有针对性地思考交互框架。分类功能的交互框架多样，每种都有优点和缺点，需要根据产品定位及诉求（优先展示分类，还是优先展示具体内容）采用适合的交互形式。

需要注意的是，有的产品的主功能甚至没有很明确的分类，比如淘票票，定位是买电影票，而人们看的电影具有很强的时效性，能不能看到电影几乎完全取决于电影何时上映，重点更侧重于向用户推荐最近的电影。

以上分析了分类功能、罗列了比较常见的分类功能设计形式，希望能帮助到各位。

文章来源：站酷   作者：热风_

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