What 是什么

简介： 按钮组是把相关的动作组织成一组按钮的设计模式。按钮组的内部内容彼此水平或垂直对齐，并采用相似的视觉设计。如果超过三个或四个动作，往往会采取多个分组。

例子： 语雀编辑器的顶部工具栏

Why 为什么

按钮组可以让界面不言自明。在复杂的布局中，被精心安排过的按钮组会很容易被用户感知和使用。一方面，它们在界面上往往非常明显，用户能够一眼看到有这些功能可以进行相关操作。

大家所熟知的格式塔原则（Gestalt principles）也在这里起作用。彼此相邻的按钮往往暗示着这些按钮的功能相近，因此会让用户感觉到这一组按钮可以完成类似的功能。相对的，不同的按钮分组往往暗示着不同的功能类型，因此彼此间应该保持间距，或用不同的形状，或用分割线进行区分。

When 什么时候使用

如果你需要在界面上展示许多操作按钮，且需要确保它们随时在界面上可见。但同时，你又需要用图形化的方式组织它们，以使它们看起来不会特别散乱。

这些动作中有许多是彼此相似的 —— 它们有相似或互补的效果，比如，它们的功能语义相类似 —— 由此它们可以三五成组地放在一起。

按钮组可以用在对产品全局有效的操作上（例如「打开」和「选项」操作），或特定的一些通用操作（「保存」、「编辑」和「删除」），或特定的某些操作（例如布局的「对齐」、「分布」）。不同范围的操作不应当被到一个组中。

使用条件：

· 存在大量操作按钮；

· 希望用图形化的方式组织这些按钮；

· 操作按钮间存在功能相关性和差异性；

How 如何使用

这个模式的总结简单到像是一句废话：把相关的操作按钮分成一组。

但如果详细展开就会有更多的介绍。比如：

· 如果需要包含文本说明，尽量使用两个字或三个字的动词短语，不要使用专业术语。

· 不要把不同功能范围的按钮放在一个组，应当将它们分成不同的分组。

· 同一组的按钮应该有同样的视觉设计：边框、颜色、高度或宽度、图标风格、动态效果等。

· 在空间排布上，可以将它们并排起来作为横排放置，如果空间不太适用的话，也可以考虑一列纵列放置（例如Photoshop的左侧工具栏）。

· 如果某一个动作是核心动作，可以将其区别对待。例如网页表单中的“提交”按钮。核心动作是希望大部分用户都需要（或期待）执行的动作。让这个按钮拥有更加强烈的图形或视觉风格来让它在显得更为突出。

· 如果按钮足够多，而且它们都有小图标，你也可以把它们放在工具条或者像工具条那样的狭长条上，放置在页面的顶部。

通过使用按钮组可以避免界面上按钮或链接过于拥挤混乱，也可以避免一长串冗长的动作列表看起来毫无关联或区别。

通过这一模式，你可以创建一个较为清晰的元素层级结构：用户可以一眼看出哪些动作是彼此相关的，哪些是重要的。

Example 案例

案例一：Sketch 的顶部按钮工具区

用户需求：编辑设计文件中的对象

Sketch 也是个很典型的应用了按钮组的设计工具。Sketch顶部的按钮不少于15个， 有很多要理解和追查。 但是得益于精心的视觉和语义组织，界面按钮始终保持一定的可理解性。

案例二：macOS Finder

用户需求：按自己需求对文件进行显示修改和操作

这个案例显示了来自 macOS 的 Finder 窗口的顶部按钮组。 秉承其设计传统，按钮风格明显。 导航组是放置在左侧中的按钮组。 布局相关的按钮组放在了中间，文件操作相关的按钮组放在了右侧。这样的设计使得界面变得易于理解和使用。

案例三：WebStorm 顶部操作区

用户需求：项目执行相关操作

这个案例显示了 Webstorm 的顶部功能操作区。WebStorm 采用了按钮组的模式，将项目执行的相关操作和Git相关的操作聚合在一起，中间使用了分割线进行了区分。

文章来源：站酷  作者：Ant_Design

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

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

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

用户体验地图是什么 | WHAT

用户体验地图（Experience Maps）旨在通过描述用户历程和故事，使设计师、产品经理等项目成员更好地了解用户和洞察诉求。所以对于用户体验地图，我们可以将其定义为以下内容：

- 是一种描述用户故事的可视化工具；

- 是一种帮助设计师、产品经理等更好地了解用户的共创工具；

- 从用户视角出发，直观展现产品流程各个触点上用户的痛点、需求和情绪；

- 用户体验地图绘制的形式并不唯一，可以根据项目需求，增减内容。

通常在接触到需求之后，设计师就可以开始梳理现有流程、使用用户体验地图了。要注意的是：

- 需要梳理的功能不分大小，都可以使用；

- 做之前，务必要先调研和访谈用户使用产品的情况。

建议时长：

- 重要项目：120～180 分钟- 日常项目：60～120分钟

参与者：

- 必选：设计师、产品- 可选：研发、市场、其他

工具：

- 电脑或白板+便利贴

为什么需要用户体验地图 | WHY

需要发现和拆解产品现有问题，梳理用户流程时使用用户体验地图，可以在聚焦阶段，整合用户诉求和业务诉求，共创机会点，找出解决方案，通常在以下场景中使用：

- 新产品设计：需要对需求进行拆解和优先级排序；

- 产品优化：发现产品现有问题，洞察设计发力点。

由此可见，在设计过程中使用用户体验地图作为设计工具，有以下益处：

- 更好的以用户视角来看产品的体验；

- 通过共创，项目成员达成共识；

- 确认触点，作为我们的设计方向；

- 通过用户痛点找到机会点；

- 帮助梳理产品流程。

△ 用户体验地图共创现场

用户体验地图操作流程 | HOW

我们通常会将流程分成4 个阶段：定义原则和目的 —— 梳理阶段流程 —— 洞察痛点 —— 寻找机会点。

1. 定义原则和目的

首先要了解我们做用户体验地图的原因和目的，包括用户是谁、解决什么问题、用户的目标、产品的整体目标、限定条件等等，对用户群体、整个项目背景和共创任务目标有清晰、全面的认知。

2. 梳理阶段流程 

首先是划分阶段，将用户的行为拆分成几个大的阶段，在整理时要注意：

- 在整个产品的范围之内尽量把故事、流程讲完整；- 以广度优先，而非深度，不要过早的沉浸到细节中。

接下来我们要将主要阶段拆分成单个任务，并梳理具体的任务和触点，罗列出过程中的任务和各个触点，要做到事无巨细。

然后根据任务和触点，整理对应的用户疑问、用户感受/情绪。通过对用户的观察和访谈进行梳理，客观的描述事实，切勿自说自话或是将自己的情绪代入其中，也不要急于猜想与分析。

3. 洞察痛点

这一步需要我们汇总用户的痛点，并将痛点分级，洞察用户痛点背后的真实诉求。这个过程中可以先让大家在一定时间内写出自己的想法，每一条写在一张卡片上，做到先相互不干扰，之后再统一整理和总结。

4. 寻找机会点

通过上述总结，思考新的机会点、解决方案、优化整体流程，并对新流程下的功能做优先级排序。可以通过准备一些问题来刺激大家脑爆出更多的内容，比如：用户还有其他选择么？怎么做用户才能更爽？其他用户来到这里该怎么处理？等等。在这个阶段需要：

- 对内容进行对标、讨论，把公认的点保留下来，无用的点剔除出局；- 根据实际情况和项目成本、进度等条件，对新流程下的功能做优先级排序。

如何为过程提效 ｜TIPS

在实际的工作过程中，因为项目时间都非常紧张，绘制这样一个完整的用户体验地图比较耗费时间，所以推荐大家几个提效的技巧，既可以减少时间浪费，也可以提高共创质量：

1. 事前

充分做好用户调研，提前准备好用户地图模板，可以在开始之前的一到两天发给参会人员，让所有人对产品有一个整体梳理和思考，有助于提高大家的产出质量。

2. 事中

如果是优化的产品，可以将设计稿 demo 或者线上产品截图打印出来，这样可以增强大家的代入感，有利于想法的输出。

3. 事后

整理电子版体验地图，需要跟随产品的演进进行更新，上传到项目共享空间随时查看。

文章来源：站酷  作者：Ant_Design

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

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

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

文章来源：站酷  作者：甜西瓜汁



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

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

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

本文算是一篇产品分享文吧，主要科普一下消费向内容在KillTime方面都是怎么玩的。

Part I - 消费向产品及其发展科普

大家看上面那句英文，我用的是“Spend Oriented”，Spend这个词本身是一个偏中性的词，不光有花钱的意思。“消费”一词其实如果大家去查它的原始定义是指“利用社会产品来满足人们各种需要的过程”今天在这里说到的其实是“用户在上面消费内容”的app产品，这个内容可能是图文，可能是流媒体。也就是说，今天讲的app都和“Kill Time”有关。

那我们不妨先来看下面三页ppt：

1.消费向产品的演变：

我大概把今天要讲的消费向产品分为四类，第一类游戏略过就还剩三类：

a.图文Feed类app产品：

这一类产品其实是经历了从门户到app的演变的，早期互联网时代，所有的图文内容都在门户网站上，这时候的门户网站比如新浪搜狐网易，他们其实是内容为中心，用户围着内容转，用户会自己去挑选甄别自己想消费的内容进行消费。

然后从门户到app的过程中，最开始比如搜狐新闻app他其实是一个从门户到app的纯移植，他的本质没有变化，还是以内容为中心，用户围着内容转，不过后来随着移动互联网的发展，因为移动端的特性是“高频多次”，他就不像门户我只能上班的时候坐在电脑面前看，移动端的特性决定了我无论拉屎还是乘车，随时随地打开都可以看，那这个时候如果还是内容为中心，用户每次进来都需要进行一个很长时间的甄选内容的过程，真正消费内容的时间就相应的会被压缩，这时候就有了整个新闻移动端app产品从“内容为中心”到“用户为中心”的转型。第一次有了用户中心的概念，比如有了账号系统，用户可以收藏点赞（Mark）一些的自己感兴趣的内容，然后通过用户的点赞阅读点击行为进行推送和订阅：

除了新闻门户之外，还有一类图文产品就是兴趣聚合，最开始大家会发现都是一个产品主公一个方向，大家想看什么内容就去相应的地方：比如天涯猫扑就是一个讲故事和段子社区，榕树下主攻青年文学，虎扑是体育相关。大家在自己垂直的领域发展，互相也不怎么干涉。但是这些UGC平台的本质还是生产者，是人，随着每个平台都有自己的大V出现之后，网易推出了博客，这是一个以人为中心的分发结构的产品，除了以人为中心的分发结构外，百度心里想，不是之前的门户都很垂直么，那我是不是可以建一个平台，让各种兴趣在我这里以”吧“的形式聚合？于是就有了一个兴趣内容聚合平台”贴吧“，然后随着发展，大家发现博客这种东西用户消费成本太高了，一个大V一篇文章好几千字，生产内容也费尽，用户看着也费尽，那不如就做一个微型博客更多的让人发声就好了，于是有了微博。

△.既然说到这个了，在这里多扯远一点，其实互联网发展的进程都是这样，绕不开平台和垂直，大家想想五六年前的电商产品是不是一个道理，当年只有淘宝一家是平台，其他的，比如京东主攻家电，一号店是零食，聚美是化妆品，美丽说蘑菇街则是衣服（蘑菇街主打职场美丽说主打校园）

b.泛娱乐类类产品 & c.工具类产品：

泛娱乐类产品我这个框子画的很大，大概最初的原型是为了解决我们“听歌”和”看视频“的需求，然后最开始的几大门户大家都知道优酷土豆、腾讯视频、爱奇艺、搜狐视频、乐视等等。最开始那几年互联网基础建设不行嘛，科技也没发展到位，所以那时候视频清晰度都好低，而且下载率非常高，大家一般消费内容会采用”在家wifi先下好然后再看“这样的办法，但是随着基础设施的加固，大家发现流量好便宜，这时候在15年才开始有网红直播这一块的业务出来（游戏直播是很早就有的哈），我个人会认为催生网红直播产品的归因是科技进步流量不花钱了。随着网红直播类兴起的另一类产品就是短视频类，我个人认为短视频产品的出现本质归因除了流量不花钱了之外，更多的是解决之前门户视频网站内容消费成本过高的问题，众所周知，现在人越来越懒了，一集电视剧40分钟，很难坐得住不分心的看完，所以现在视频app出了倍速播放。这本质的原因是用户消费内容的High点（达到满足的点）越来越高了。

再说听歌这条线的演变，最开始听歌，然后唱吧、全民K歌，国外的Starmaker等等出来做了唱歌app，这时候的app本质是一个工具，但是用户UGC内容的时候沉淀了很多作品在这些工具app里，所以这一类产品就开始做去工具化，变成了一半社交一半工具的产物。另外K歌产品火了之后，才有的FM类产品，因为都是消费音频和音频直播嘛有共性在这里就不展开了。最后就是这类音频产品不满足只做音频，所以就开始做视频了，这就导致你现在打开全民K歌或者唱吧或者国外的好多app，你会发现只要是娱乐产品都有短视频的原因。

2.消费向产品的核心目标：

GNT是一个罗振宇2016年年终演讲时候提出的词，我们假设平均每个人每天8点到家到晚上12点的时间是可支配时间，那中国网民每年新增数量（今年是1000w）已经稳定在和出生数量一样了，所以我们认为网名总数不太会有啥变化，比如之前我用三个小时在优酷腾讯爱奇艺上看电视剧，一个小时听网易云音乐，现在我大概只用一个小时看电视剧其他三个小时都在刷抖音，这时候，大家会发现消费向产品的决战维度就不是自身的垂直领域了，之前我们会认为视频门户哪家片源优质哪家就牛逼，现在不是的，现在的产品除了垂直比较之外更多的竞争是在时间维度的较量，这是为什么抖音这种产品突然一下很火的原因，我稍后会着重说抖音这里就先略过了。

3.为了占用更多的用户时间，设计师可以发力的点：

内容源是否优质（这里的”优质“指的是内容和用户的March值）其实是用户是否消费的最大的一个指标，因为内容源和用户的March值主要反映在下面的前两个问题中：

给用户展示什么内容？

这些内容的优先级是怎样的？

这两个问题一般我们设计师并不能控制，关于什么时间什么环境下给用户展现什么内容，往往跟用户历史行为和算法有关，如果大家看了头条的算法公开课大家会知道头条的推荐算法其实是有三大类（内容维度、用户侧特征、环境特征）几千万个向量特征去控制的，如果不是纯算法推荐也会有运营去干预内容的露出，所以这部分其实设计师可以干预的比较少，我们真正可以干预的东西是后两个问题：

如何让用户迅速找到自己感兴趣的内容进行消费？

——这就涉及到内容源呈现方式的抉择问题。

如何尽可能的降低用户消费内容时的交互成本？

——这就涉及到两个问题，一是从交互上让用户尽可能沉浸消费，二是交叉推广和分流的问题。

Part 2 - 消费向内容的主流呈现形式：Feed Flow

△.谁能告诉我一下Feed Flow（我们工作中所说的”Feed流“中文怎么翻译？Orz...）

1.RSS vs Facebook's New Feed

如果大家是一个早期互联网民，一定听说过RSS的概念:

RSS (Really Simple Syndication简易信息聚合协议)是一种的工具，使得用户可以在客户端借助于支持RSS的聚合工具软件，在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。举个栗子：如下图所示，小张在pc时代，每天会定时打开华尔街日报网，ChinaDaily，王老三的博客看里面的内容，但是每天都打开三个网站让小张觉得很烦，这时候借助RSS工具，他可以把三个（支持RSS协议的）内容源聚合到一个第三方的RSS工具上，这样他就不用每天反复打开三个网站了，除了获取这三个网站的陈旧内容之外，这三个网站每天的更新内容也会被实时呈现在这个RSS中：

一个RSS聚合工具内，每一个单条内容源，就称为Feed（取的是滋养的意思，就是源源不断的满足用户消费需求的含义），那早期的Feed序列大家也看到了是从RSS衍生出来的概念，Feed流的排序也是用户定义的，比如可以按照Timeline排序，或者是按照用户自定义Tag聚合，或者是按照interest标签（收藏，喜欢，点赞都属于泛意义上的interest），那大家就明白了，RSS里的Feed流本质上是一个用户自定的，关于内容收集的工具而已。

到了2006年，我们的爸爸Facebook开始做社交，因为Facebook是人和人的关系聚合，其实当时Facebook就借用了Feed的概念，创造出了以“关注Follow”为核心的新型Feed，在书上（我忘记是哪本书了）把它称为Facebook‘s New Feed，它其实有三个特征：

1、内容源从URL到人的状态（其实本质也是一个一个URL序列）。

2、不仅仅是Timeline的基础排序，更多的指标参与进来决定内容排序

3、订阅内容中夹杂费非订阅内容（参考微博），让用户永远刷不完没有尽头的消费

上图是RSS和Feed的对比。

到了今天，其实几乎市面上所有消费向产品（新闻类、微博、Instagram、Snapchat、短视频、等等），都在Facebook New Feed的基础上进行了改进，所以今天我们把这种New Feed更习惯的叫做Feed，大家可以去PM社区之类的搜Feed能发现一堆文章可以阅读，在这里就不赘述了。

Part 3 - 匹配、分发与消费

知道Feed的概念能方便我们理解接下去的问题，还记得接下去是什么问题吗？

1、如何让用户迅速找到自己感兴趣的内容进行消费？

——这就涉及到内容源呈现方式的抉择问题。

2、如何尽可能的降低用户消费内容时的交互成本？

——这就涉及到两个问题，一是从交互上让用户尽可能沉浸消费，二是交叉推广和分流的问题。

1.先分发，再消费的app模型：

我们不妨先来看主流的Feed分流的两种模式：

一种是微博这样的关注序列插入非关注序列（推荐、广告等），另一种就是关注序列浏览完用户拉不出新Feed的时候有个分流按钮提示，别小瞧这个小提示，往往能带来每天5-7%（我自己的工作经验数据）的新模块引流。

再说用户迅速找到自己感兴趣的内容进行消费的问题，这里就涉及到内容源的呈现方式。我之前唱吧的那篇文章举过这样一个例子：

唱吧7.0到8.6的三次改版牺牲了展示效率（从7到5）HighLight了文字信息，是因为我们发现图片信息不足以让用户做兴趣判断，大家看下图就明白了：

快手的图片本身就是内容的简略呈现形式，大家可以基本通过图片来得知里面的内容大概是什么，如果遇到用户难以判断的，快手在用户上传视频的时候鼓励用户打字说明，比如大家能看到图中的红字，就是说明视频内容的。这样的话，用户通过图片能清晰得到点击之后的内容预期，比较符合用户心智。大家再来看唱吧，大家会发现图一图二图三都是漂亮的小姐姐，这个就没办法告知用户里面的内容究竟是啥样的，那支撑用户点击进去的除了颜值之外，更多的可能是歌名，和这个人的歌手等级，收听量这样的数据才能支撑用户点击。唱吧这么改之后我印象中模块CTR是有明显的提升的，但是具体数据我离职太久忘记了...

所以其实内容源的呈现方式本质上和内容相关，这里的UI应该以“如何让用户迅速找到自己感兴趣的内容”为核心设计目标去设计，具体问题具体分析咯~

再来说常见的消费向内容的交互模式，最常见的就是Push&Back的模式：

所谓Push&Back就是用户一次点击进到详情页消费内容，看完之后再点击返回回到Feed列表，然后继续在列表里寻找下一个想要消费的内容的模式，比如下图：

传统的Push&Back交互成本太高，用户看完之后需要点击返回，然后浏览内容列表选择自己想看的，然后再次点击进入。这种就是很难达到沉浸式消费，用户跳出率和关闭率都比较高。

于是有了另一种模式就是让用户不跳出，直接挨个在当前Feed下的内容：

举个例子就是知乎的“下一个回答”点击按钮和下拉交互，以及微博的视频关灯流：

这种模式使得用户在消费内容的时候交互极其便捷，轻轻滑动或者一次点击就可以消费下一个内容，大大增加了沉浸的消费体验：

关于如何尽可能的降低用户消费内容时的交互成本这个问题，上面这一种办法，其实还有另一种，就是所谓的交叉推广，大家看下面这个图，前两张是头条Feed，后三张是陌陌：

头条点击一个视频后，下面会给你推和这个视频相关的一些视频（可能是内容维度相同都是做饭的，可能是用户侧特征相同都是美女做饭，可能是环境特征相同都是教你明天中秋节怎么做月饼）让你去观看（而且你发现没头条iOS版本和抖音iOS版本都是默认隐藏statusbar的，你看不到当下几点了，为的就是让你一直看下去...）。

陌陌这款产品就更有意思了，比如我点击第二个入口（右1）进去，这时候有个上下滑动切换的交互，app的指示意是：“切换到下一个主播”，那按照常理来说，我松手之后，应该消费的是第三个入口（左2）的内容没错吧？但是你会发现事实并不是这样，它其实跳转到了一个全新的Feed序列，所以交叉推广的概念如下图所示：

2.直接消费的app模型：

上面我们讲的都是先分发再消费的模型，它一定要有一个内容承载的Feed页，然后用户根据自己兴趣去选择性的消费内容。那本着：“降低用户消费内容时的交互成本”这个思路，有没有可能去掉分发这个步骤，不要内容承载页，直接上来就让用户消费呢？这就是大家熟悉的抖音：

Musical.ly（后改名Muse然后被抖音抄然后被抖音收购）这款app创造了一种直接消费内容的产品模型，这种模型有什么特征呢？

1、交互成本最低，打开即消费，一次上下滑动即分流，左右滑动（或一次点击）即分流，极强的沉浸性。

2、依靠算法把很多Feed序列整合成了一个无穷尽的Feed，完全依赖算法和用户行为数据、短视频数据判断展示优先级。

我们不妨来对比一下“先分发再消费”和“直接消费”的两种产品吧：

“先分发再消费”类的产品，由于有一个内容承载页，用户可以选择性的点击消费，比较尊重用户。而抖音这类产品呢，直接把内容强制用户消费，本质上是带有一定胁迫性质的。直接让用户消费内容的比如抖音类产品，不给用户自主选择的机会，胁迫用户消费产品提供的内容，如果内容足够优质的话会有奇效，如果内容差强人意，戳不中用户的High点，则有可能适得其反。

我认为抖音这种直接让用户消费内容的产品模型本身是一把双刃剑。

大家玩了这么多app应该也能发现了，市面上壳子抄抖音的产品现在特别多，大家会发现只有抖音好看，别的都是看一两个就看不下去了想关掉，这里的原因就是因为用户被胁迫消费你提供的内容。

我们假设你是一家内容实在不怎么行的app，如果强行用抖音的模式，你第一个内容是一坨屎，用户吃了一半滑动跳过了，这时候他发现第二个内容还是一坨屎要给他吃，用户意愿会下降得特别厉害，甚至一两个视频过后就直接关掉了。但是如果是先分发的模型，里面都是一堆屎，但是我告诉你了，第一坨屎是草莓味的，第二坨屎是橘子味的，这时候用户自己想消费哪一坨内容是他自己的点击选择，和你无关，你app设计者不用承担胁迫用户消费的风险，自然用户对自己选择的内容的容忍度也会高一些，可能不会看一两个就关掉了，没准儿会看四五个。这样是不是浏览时长就增加了？

给大家讲一个理论性的东西吧，抖音内容的理想时间模型（名字是我自己随便取的）：如下图所示

我们假设理想状况下这个用户没别的事不会被中途打断，只要想刷可以一直刷一辈子抖音，然后我们来研究内容质量和用户浏览时长的关系：我们假设，每一个个体用户都有一条平均匹配线Marchline（这个匹配可能是内容维度的比如我喜欢看dota不喜欢看lol，喜欢科普不喜欢鸡汤等等），内容只要比匹配线高，对于我们的心智就是一个正向刺激（Positive）。

我们假设每个视频都是15s，大家会发现你们每天打开抖音的第一条视频总是很优质（其实抖音最初冷启动的时候准备的视频都是1500-3000一条买的优质脚本之类的，花了几千万呢，所以这些优质视频源奠定了第一波龙湖留存），如果第一个视频总是很优质，用户很喜欢，那心智就会上升，是一个正反馈，然后第二个视频如果也很精彩，那就会把用户推向high点，如果这时候第三个视频一下子推了一个特别烂的或者没算准给用户推了一个用户不是很中意的，理论上用户交互成本很低，可能只看了一半划过就行了，但是如果连续两三次都给用户推了很烂的内容，那用户的负向刺激（Negative）越来越多，一半两到三次就退出了。

在这里面有一个我总结的思考就是，用户的Marchline其实是浮动的：

Marchline(new) = Marchline(old) + △Willing

用户每次打开app到关闭app的过程中正负向刺激的向量和。

所以本质上抖音这种点开即消费的短视频设计方法，是对自家内容极度自信之后的产物，记住抖音模型是把双刃剑，如果你不是对自家内容那么自信或者不愿意花钱来砸内容，就尽量不要用抖音这种交互，很容易塞用户一嘴屎得不偿失！

3.一边消费一边分发的app模型：

上文已经讲过了快手（先分发再消费）和抖音（直接消费）两种产品模型。

他们各有利弊，但是在最近半年，热爱创新的产品设计师们在短视频领域让我见到了眼前一亮的第三种模式，就是Instagram的旗下的IGTV（入口在Ins的右上角，也是一个独立的IGTV app），它采用的是一种创新的一边消费一边分发的模式，可以说这个创新是很亮眼了，大家有空可以去下载体验一下：

这款产品默认打开是图1所示，后边的视频是在播放的，这就满足了直接消费，但是下面有一个推荐列表可以滑动选择，满足了分发，然后如果需要沉浸的观看某个视频，手指在图1上下滑就会变成图二，这就变成了一个完全沉浸式的抖音，和抖音的区别是抖音采用上下切换，IGTV采用左右切换，它最绝的地方是把消费属性做到了极致，甚至在搜索或者在发评论的时候，后面的视频也依然在播放。

这就很好的解了交互效率和分发的问题，大胆预测IGTV的交互模式是明年短视频、视频直播、视频社交抄的重点。（其实现在已经看到Azer之类的产品在大量采用这种交互了)

总结一下吧，其实设计的本身在解决问题，只不过随着时间的推进，大家的认知层次会逐渐升高，最初我们认为快手这种分发效率过低，于是抖音出来了之后大家都抄抖音，但是别的app没有抖音这么好的内容，于是取了折中有了我个人认为更合适的IGTV这种交互模型。

其实今天这篇文章想要阐述的一个思想是“目标导向的设计”，我们为了解决一个又一个的问题，在不断解决问题的过程中交互一次一次的微创新，微创新到一定量就会变成一个大的创新。每次看到很多有创新的产品都会感觉到欣喜，作为设计师大家也可以多看一些app产品，大量的试用不同的app产品，然后归类总结一下，相信也会有所收获。

文章来源：站酷   作者：Seany

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

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

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

市面上大量出现同质化产品、设计，就是因为大家都在按照现有的，常用的模版在设计，现在其实比早两年会好很多，很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。

例如下面的案例，这是一个电瓶车电池租赁的一个产品。

从美观角度，左侧的界面更加简洁信息也有规律，有美观的banner和看起来让人有点击欲望的大按钮以及“令人觉得很热门”的热门租赁板块。当我不放出右侧的对比图时，大家在第一反应中，有多少人可以重启自己的视角，还是说已经被这个页面所拉入到不可自拔的漩涡中去了呢？

如果让你盯着第一个界面进行改版，我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来，或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的，即便将错误路径3改成了路径2，你以然还是在错误的路径上，本质没变。所以为什么我们说要做正确的事而不是正确的做事。

交互不仅仅能够让产品好用的，也要让产品走对方向。

另外，UI也是交互的一部分，属于看的懂。好用可以分为看得懂，学的快，用的会，交互体现在人们日常所接触到的大部分媒介，并且与之产生联系。例如一把水壶，水壶的设计形式首先通过视觉让你感知这是一个水壶，如果把水壶的外形做成一个马桶，你觉得它还是一个水壶吗，这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作，例如装水、倒水。而用的会就是这个水壶更多的附加功能，例如烧水、定时、调温等等。

1.交互设计中媒介与人的关系

1.1顺应

交互的媒介是不可缺少的，大家是否去研究过为什么古代人们撰写文字是从上至下，从右往左而现代人的习惯是从左右的？古代受限于工具、媒介，竹简是主流的记录文字信息的媒介， 有人会说竹简可以从做往右写不是非要从上往下啊，但是大家可以看到人们是如何打开进行阅读的，如果是横着阅读但是打开是上下展开就会非常不自然了。

所以在当时人们为了适应非常有限的工具资源，改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑，那基本也就凉凉了。

从2g到5g时代的发展，除了生活方式发生翻天覆地的变化外，我们所接触到的媒介也发生了变化，从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步，让人们对信息的获取更加方便快捷。除了内容，外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化，从当初的搬砖按键手机到支持ar等新技术的超智能化手机，改变了我们的认知也改变了我们的生活方式。

1.2迁移

平台迁移的交互成本，很多同学可能都玩过moba类游戏-dota，这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制，键盘用来控制技能的释放和其他快捷物品的使用，都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标，这是端游中基本的交互行为与操作。

在现在非常火热并且模式和dota相似度很高的王者荣耀手游中，我们看到了，如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动，右手拇指来控制技能的释放，在这里大家要注意，在端游中技能的释放是可以非常精准的，并且可以指向性释放在某一个角色中，但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能，但是在手游中我们无法做到选中某一个技能再点击到某一个角色上，所以手游中只能进行非指向性的预判技能释放。

同样在端游和手游的吃鸡游戏中，端游键盘控制人物移动，鼠标控制射击与视角，但是在手游中控制射击与视角就需要2个手指来完成非常不方便，也很影响射击的精度，但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备，专门用来给多余的手指进行射击操作。

另外，大家如果做b端的同学应该也深有感触，平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事，因为在网页端我们有大量的空间和更自由的控件形式去承载信息，比如联动的左侧标签导航和顶部联动的标签导航，在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航，但是页面显示实在有限，很多的信息完全无法在一个界面中呈现，所以要么将页面进行左右滑动，要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。

web端的工具和网页通常都会有撤销操作，按CMD（ctrl）+Z大部分都可进行撤销上一步操作，但是在移动端我们无法通过特定、或者统一的手势进行撤销，所以很多时候在表单输入的时候会有一键删除图标，却无法进行撤销。所以我在想是不是可以在用户一键删除信息后，删除按钮变为撤销按钮，有待考量。

2.交互认知的盲区

到底什么是交互设计，这个问题其实是比较复杂的，也是我一直在思考的问题。所以也翻阅了很多文献，尝试做更多的案例来解释。交互设计的概念真的挺多的，光网上能够找到的定义就不下5种，这些对交互设计的定义中，比较频繁出现的是行为、场景、用户等词汇，交互设计到底设计的是用户的行为，还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情，我觉得可能还是没有能够解释清楚交互设计的本质。

中国历史文字的演变，它并不是一个模仿的过程，而是一个从底层对文化、自由、精神、环境、人的深刻理解而发生的一种进化过程。但现在其实很多的交互形式都是来源于一些大流量产品的模仿，更多的是担心用户成本过高而妥协为满足用户预期。

2.1信息不对称

事实上，为什么我们讲不清楚什么是交互设计，其实UI设计也一样，她绝不可能单纯的指代用工具绘制出用户界面，其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语

例如“你可以意思一下”，单就这句话，我们大概知道最关键的是“意思”二字，包含了特别多的含义，含义需要通过语境、使用场景来区分，说者的“意思”是想告诉听者什么呢？没人知道，是一口气干完一瓶酒，还是喝一口？还是送一点礼还是？应付一下？

当然这句话中的“可以”也很有讲究，加上“可以”说明你也能选择不“意思”，是不是觉得这7个字让我们整一句话都活了起来，说者与听者如果不在一个境中，听着就压根不知道说者的具体表达含义。

同样的，在设计领域，很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。 说出来自己都要笑出声，还有什么五彩斑斓的黑等等。就比如呼吸感这样的词，这个词听起来比较抽象，让听者都有点不太好意思追问什么是呼吸感，其实你问了，说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸，但设计者觉得现在刚好，所以本身就没有一个标准，更多的就是主观的感受，让你不得不接受这个建议的原因是因为两者的身份。

我们用我们能够讲述的语言去描绘我们不懂的事物，再例如设计师和开发还原只会说往左移动10px，而不会说给这个view加上padding left 10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识，设计师通常喜欢描述从左到右或者从上到下，但是在开发的语音认知理，他需要知道的是空间坐标，并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识，开发也尽可能的去补充设计背景。

在这里，交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通，所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。

再举个例子，不知道大家有没有编辑过问卷或者做过用户访谈，很多时候是不是觉得收集到的信息无效、无用，其实很多的原因是因为我们和用户对于这些问题压根不在一个频道，比如：你的问卷问的是，您喝酒的频率是多少，选项有：从不、偶尔、经常，在用户的眼里偶尔可能是1年喝一次，而我们觉得差不多1个月喝一次算偶尔，再比如访谈的时候问用户这个问题：您觉得您喜欢下面哪个页面的风格？用户：“什么是风格？”

所以交互设计师有一个能力久显得很重要了：让万物都可与之对话的能力，对话需要什么，是语言。

3.交互语言的浅见

我们都知道，语言是我们沟通的根本，语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言，不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等，例如在模型手办中有分线、渗线、勾线、补土等，这也都是在特顶专业领域中的一些术语，但这些并不是语言，只是在某个领域中大家总结出来便于沟通的文字符号。

所以我们再回到上方看一下定义，首先语言是由词汇所组成，词汇是由符号做组成，大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法，但这些都仅仅只是规范，而并不是语言。语言拥有更强的普适性和通用性。

那么我所认为的语言他首先包含了能够组成词汇的符号，这些符号大概就是指：点、线、面、体、色彩由这些点线面体可以组成的词汇有：按钮、文字、图标、图片等。但是光有词汇不行，在汉语中有12种词类：名词、动词、形容词，在由句子组成的词汇中包含了不同的成分：主、谓、宾、定、状、补...这里不过多叙述。

语言很重要的一点它具有语境，语言的运用包含了看听读写4个方面，看和听指的是输入，读和写指的是输出，那么交互设计语言中，也包含输入和输出两种属性，例如输入指的是由不同“词汇”组成的“句子”，比如由标题、箭头、色块组成的一个itme，是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。

这里的控件虽然有两个属性，但是还需要语境来帮助我们理解，一个是它本身所能够输出的默认状态的，比如点击之后的跳转页面，另外他也可以具备产品赋予的自定义属性，例如底部滑出picker。

还有，在汉语中“去买两个桃子吧”，这里的“两”肯能是虚数也可能是实数，但是在交互设计中，我们如何表示点击1下和两下或者是多次呢，一般单击的属性通常可以有一些特性的符号属性所表示出来，例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等，那么双击的话可以用双箭头来表示吗，当然不可以，双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。

那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思，并且有用的。这会让更多信息不对称的情况消失，不仅仅是设计师，在产品团队中大家都能够有一套共性的交互语言系统，无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中，大多都是多种元素的拼合，给出常用的、可复用的控件、组件，但是大家依然还是无法从语言角度去创新，这就导致了很难会有新的、有用的交互形式的出现，比如很多搜索控件都是承载在顶部导航栏中，那么在做规范的时候也只能在这个组件上去微调，殊不知搜索这个控件的“语境”并不单单只能在页面顶部，例如高德地图做的就很好。这样一来，这个组件的常规规范形式就能和很多产品区分开来了，当然要视产品形态不同。

4.业务背景与交互形态

4.1不同业务背景下的信息组织

市面上有许多的新零售电商产品，页面中的信息流也是大同小异，但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式，但是我们要知道，30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示，但是3000个就不行了，很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。

所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中，首屏基本上都是呈现这样的策略，从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局，从基本上能够满足一个大量sku电商产品的所有需求，但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢？

从交互角度入手，那么既然我们无法做到大而全，那么我们至少可以做到精准、限时，让用户上瘾的策略，上瘾模型这边不再赘述。所以类似云集在首屏的策略可以概括为整合搜索与banner、分流入口、cta、营销瓷片以及以时间为纬度展示的大图信息流。重点在于可随意控制的营销工具，以及时间轴的商品推荐，让有限的资源呈现更多的形式变化以及让用户有时间概念，每天固定时间来进行活跃。

4.2营销工具化

通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性，并且在后台工具中灵活控制，同时除了日常的营销目的之外，在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。

4.2.1更加灵活的控制方式

4.2.2多样的营销结构

最后总结一下，我认为交互设计也包含了视觉，所以我们在决定用什么样的设计形式之前需要考虑更多，入业务、用户价值等等，从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。

二、为什么UI配色那么难

不管是做UI设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但其实都是有讲究的。本文不会给大家重复讲解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，这些大家都可以从某度中直接搜到。我今天要给大家分享的是人们是如何认识色彩，并且在产品设计中使用的。

1.人类对色彩感知的原理

大家都知道，对于不同的颜色，我们对其的感知是不同的，有人觉得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那这是什么原因呢？首先我们要知道我们眼睛内存在两种感光细胞：视锥细胞和视杆细胞，视杆细胞能够感知光线强弱但无法感知颜色，而视锥细胞却相反，视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞，而视杆细胞却用的少，更多的是在黑暗的环境中使用的多。

视锥细胞的三种类型分别是低频、中频和高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感，它的范围包含的比较广，特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。

大家在平时生活中都能看到，在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识，因为这些非常醒目。更容易被红视锥细胞感知到，但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。

1.1人对色彩边缘的对比更加敏感

我们来做个实验，如下图，大家觉得在中间的灰色块是纯色还是渐变色，可能很多同学看上去都会觉得是个渐变色，但其实它就是一个纯色，不信的同学可以自己在工具中尝试一下。

但如果你把这个色块拿出来后，不在这个环境中直接进行边缘对比，那就不会出现渐变的情况了。那光说原理，我们也来看一下在产品设计中需要注意的地方，因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置，这样就会造成边缘视觉的对比，本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。

如果你想要让两个颜色接近的元素具有识别度，那么最好将这两个元素进行重叠摆放而不是分开摆放。另外，如果是卡片样式的设计，背景色一定不要过于灰暗也不要过于浅白，过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比，显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。

还有，为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理，因为文字和背景叠加产生的轮廓只是文字的轮廓，在我们的第一印象中只是一种符号，当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击，但依然还是不够明显，所以为了强化可点击这个感觉，我们才用了线框、背景色、箭头等方式。

2.色彩在UI设计中的作用

1.加深品牌印象与品牌感

一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，所以例如闲鱼、马蜂窝等，主色都采用了黄色，黄色具有非常活泼、有趣、好玩的特性，无论是线上还是线下都使用了这个品牌黄色，从每一个线上元素的主色，到线下包装的印刷色。

但一定要注意的是，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的，所以在线上的界面用起来会非常不和谐，和整体偏浅色、轻的风格对比起来太强烈，引起不适。

而且线上觉得还OK的颜色，由于印刷的原理，实物也会更加偏低饱和和偏暗。

2.引导用户视觉凹增加易读性

我们在上一篇十万个为什么文章里提到了人们如何阅读信息，提到了一个视觉凹的概念。所以在界面中，什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品，使用了高亮色来引导用户视觉。

当然色彩的运用也会讲整个页面的层级凸显出来，而不单纯的用中性色来区分层级。

3.区分信息交互的状态

同样是上两张图，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样，“展开”使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。

所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱

另外，UI设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面，当前板块标签和正在播放剧集的激活状态。

4.营造氛围传递热度

色彩除了上方所述的字段中的不同使用，在图片和整体氛围营造中也起了很大的作用，目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造

3.在UI设计中色彩运用的坑与技巧

1.色彩的正反两面

在色彩的心理学上，大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面，可以看下方多种色彩的描述。

然而其实很多的产品使用的色彩和我们所认知的会有一些差别，比如咖啡品牌的主色选择，在我们常规人之中，咖啡应该是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色

在瑞幸刚出来的时候，很多人其实不太习惯把这个蓝色和咖啡结合起来，但是为了塑造品牌差异化，瑞幸一直将“蓝色”作为品牌的主基调，“小蓝杯”这一称呼不但让消费者感到亲切，也在众多的咖啡中有了属于自己的记忆点。在这支广告片中，主基调同样是使用蓝色，不但符合了当下消费者的视觉偏好，也在为用户留下记忆点之后，也让用户在看到蓝色时自然而然的想到瑞幸咖啡。

2.颜色的禁忌用法

但凡各位使用了这样的配色，保证各位过不了试用期，相信我。所以大家千万要避开。

1.高饱和度的色彩

会让人产生“幻觉”！让人产生视觉疲劳，例如我将饿了么这个界面的色调调整一下大家看一下，不亮瞎算我输。

2.灰部使用过多的配色

为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的

3.没有规律且过多的配色

让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点，所以我们常用的方法是6、3、1的色彩配比。

4.荧光色

荧光色绝对不可以使用在UI界面中，尤其是主色。会让你瞬间失明！

5.太轻柔的颜色

在很多dribbble的飞机稿中，经常能看到这样的配色和练习。无论是在练习中还是实际项目中，这样的界面也完全无法让用户看到想看的信息，没有重点且轻飘飘的感觉。

6.现在很火的新拟物化设计

说真的，这样的风格确实耳目一新，但个人觉得可能不会成为主流。因为它就和第五种一样：信息可识别性很差。就不说色弱的人群，就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调，这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知，原则是轻量化却又需要那么多阴影，这样就有点自相矛盾的感觉。

为了营造这样的“新拟物”的轻量氛围，还不得不在整个界面中简化大部分元素，能不加文字就不能加文字，说的好听叫做使用了奥卡姆剃刀原则，有一句话一直非常影响我做设计：“设计是需要被简化的，但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。

7.不要将对抗色重叠

例如下方，两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼

4.正确的UI配色方法

定义主色

首先我们必须要说，色彩肯定是需要结合产品和用户的定位去指定和提炼的，所以前期会需要去做一些研究例如用户画像，品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”，从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑，并且对市面上的app进行总结，我们发现大部分的产品色，简单来讲在我们HSB模式中去色都在一个固定的范围，就像这样。

在上文中也说到用色比例的631法则，所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎，其实辅助色没有非常明显的1种或者两种，都是多色的辅助色方案，都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略，一个主色搭配多个辅色，如果有其他独立的板块可能需要重新定义专属的配色策略。

定义中性色

其次再定义中性色，比如字体和线条以及背景色。字体是为了让信息有对比，显示层级，那么通常给2-3种层级即可，至少2种，至多3种。在选择3个层次的中性色文字是，给大家一个建议：标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50，默认文字不要大于80，大家可以去尝试一下，且中性色不得使用纯黑。

文章来源：站酷 作者：应骏



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

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

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

工作中我们经常会接到一些信息卡片的设计需求，在早期很长一段时间里都困扰着我。和大多数刚入门的小白一样，当接触到这类需求的时候，下意识就是打开自己的的Eagle，找合适的参考，去借鉴排版布局。但是其实最后只知道参考这样做好看，对于作者的设计思路并不清楚。后面我尝试去总结其中的规律，也得出了自己的一些设计思路。

02 这里讲的信息卡片是什么？

让我们先看下各类App中，一些比较不错的信息卡片长什么样：

03 一个信息卡片包含什么内容？

• 图片

• 图标

• 文字

• 标签

• 按钮

• 布局

1【图片 】

图片理解很简单，就是该卡片想表达的信息主体，可以是商品、风景、插画等，PGC内容图片通常由运营把控，UGC内容为用户自行上传。虽然上线后实际上传的图片，对于设计来说没有太多关系，但在设计稿中还是需要严格控制图片质量。（一定程度上也能提高过稿率）

图片挑选需要注意如下：

• 高清无码

• 主体突出且简洁

• 配图与文字信息相关联

• 多图片情况下，视线保持同一水平线或同一角度

2【 图标 】

图标的出现有以下几类：品牌特定logo、特殊字段图形化（如性别、定位、点赞、VIP、关闭等等，将字段图形化后可以减少该组件内的文本信息，方便设计排版的同时提升整体阅读体验）、氛围点缀（主要在于丰富卡片，提升设计感来吸引用户注意）

图标设计需要注意如下：

• 清晰度：品牌图标避免过小，导致难以分辨。

• 识别度：字段图形化后一定需要确保拥有足够的识别度，尽量在大众认知范围内。比如“+”可以代表添加和关注、“x”代表关闭，“大拇指”和“爱心”代表点赞、“皇冠”代表VIP等等。

• 风格一致：氛围点缀图标在配色上，需要保证与产品调性一致，或在色彩情绪上，与该模块传递的感受一致。还有一些细节，比如线性图标描边粗细，圆头还是方头端点，这类尽量保持一致（当然也可根据情况演变新的风格，但注意风格种类不宜过多）

3【 文字 】

文字信息处理需要注意如下：

• 对比：需明确页面信息权重，突出重点，便于有效传递信息。移动端常见对比方式：特殊字体对比、字号差对比、色彩对比、修饰元素（点线面）点缀对比。重点需要注意，避免在一个卡片中，采用过多不同大小字号和颜色去表现信息层级，尽量使层级精简与规范。

• 对齐：保证卡片内信息之间存在某种视觉联系，信息结构清晰。对齐方式分类：左对齐（符合左到右的阅读习惯，阅读体验最佳）、右对齐（阅读类文本比较少见，一般是为了将分好组的信息填充卡片四角）、居中对齐（居中传递严肃、正式感，在移动端中较少见，适合信息较少的情况下使用）

• 亲密性：将信息通过留白、分割线、色块等方式来成组划分，避免信息散乱。

4【 标签 】

标签处理需要注意如下：

• 视觉层级：一个卡片内可能出现不同类型的标签，比如同时有活动通知、优惠信息、产品关键词，这个时候就需要了解各类信息重要层级，正确选择标签形式（异型、色块、描边），帮助用户快速抓住产品重点。

• 极限场景：标签内字段不宜过长，需要考虑最大宽度，进行合理布局。（牵扯到屏效比）

• 呼吸感：合理定义标签内部文字与底板的上下左右间距，避免拥挤。

• 设计感：标签多数是带有活动属性，在设计手法上可以尝试破型设计，还可以尝试加入一些小图标、纹理，一方面营造活动氛围，提升产品品质感。一方面图标具有一定语义，可辅助用户识别。（适合单个特殊标签添加，而不是一类标签，因为多个一样的标签配上图标同时展示太乱）

• 对比度：在色块标签中需要重点注意，通常色块标签又分以下3类：有彩色底板+白色文字、带不透明度的有色彩底板+有彩色文字、消色底板+消色文字，在挑选颜色时需注意文字与底板对比足够清晰，减少阅读障碍。

5【 按钮 】

按钮和标签在处理上很相似，可参照标签。

6【 布局 】

信息布局需要注意如下：

• 拓展性：卡片中字段的长短对布局的影响较大，字段较长且多的情况下需要的占用的空间更多，所以常见是上下布局。

• 屏效比：上述拓展性与屏效比的关联紧密，在卡片中，为了保证一行文字最大显示，通常文字都是单独一行，避免左右存在元素占用文字横向空间。但单独一行就意味着增加了卡片高度，虽然单个卡片内文字显示多了，但整个一屏中展示内容变少。为了便于理解上面这段话，这里我们可以看到淘宝这个案例，淘宝的推荐卡片中信息很多，在遇到文案很长的情况下，为了平衡上面讲的这个问题，使用到了如下较少见的布局方式。

• 合理性：在列表式左右布局中，是选择左文右图，还是左图右文。这需要看产品类型，在新闻资讯类产品中常见是左文右图，而在美食、电商类产品中是左图右文。再有在信息布局上也应符合人眼左到右，上到下的阅读习惯。

04 如何做好一个信息卡片？

• 明确产品类型

• 明确应用场景

• 了解目标用户

• 划分信息权重

• 同类信息归组

• 增强信息对比

• 设计细节表现

• 确定最终布局

1【 明确产品类型 】

产品类型不同主要对布局产生影响。

• 以文字为主的产品，比如前面讲到的新闻资讯类，通常采用左文右图的布局。

• 以图片为主的产品，比如美食、电商类，通常采用左图右文或上图下文。 

原因：新闻资讯类，吸引用户产生点击的并不是因为图片，而是具体的标题，通过标题用户才能了解更多关于该卡片的信息。而美食、电商类产品则相反，这类产品图片比文字更吸引人。

2【 明确应用场景 】

卡片式：在卡片式中图片是设计的重中之重。这是因为人是视觉动物，在卡片式设计中使用高质量的图片能瞬间抓住用户的眼球。卡片式设计实现了图文的完美结合，能给用户呈现良好的视觉效果。

应用场景：

• 图片为主，需要利用图片给用户带来良好的视觉冲击，提升浏览过程中的趣味性，从而吸引用户长时间浏览。

• 适合随机推荐的内容，不适合进行查找。

• 丰富内容展示，适合元素较多情况，可以让各种形式的元素保持井然有序。

列表式：信息集合一般是简单的图文组合（小图+标题）或纯文本信息。由于列表垂直排列每一行内容，相对卡片式，在同样大的屏幕中可以展示更多内容，可供用户阅读信息更多，新闻类和数据类应用更青睞于这种设计。

• 信息直白，用户无需点击查看，即能尽可能了解内容信息，适合快速查找。

• 文本重要程度高于图片，需要靠标题吸引用户点击。

• 小屏幕应用场景。

目标受众的属性，对信息权重的划分影响很大，比如对价格敏感的用户，优惠信息的视觉层级就需要抬高。为了便于理解下面的案例，这里我定义的就是对价格敏感性用户。

4【 划分信息层级 】

定义了目标用户后，将卡片内所有元素罗列出来，并借助四象限分析的方法，对各个元素的权重进行划分。

5【 同类信息分组 】

将同类信息分组，便于后面确定元素之间的亲密性关系。

6【 增强信息对比 】

前面我们借助四象限，将信息重要程度进行了划分。接下来对元素之间亲密性和对比进行处理，设计用户浏览视线，在该过程中对案例中的元素进行如下处理：

• 图片：这里图片及比例保持不变

• 图标：将原版会员图标+字段的方式更改为图标，原因有两个：1、会员图标+字段的方式占用了较多的横向空间，导致标题字段信息展示减少，同时还导致用户在阅读完标题后，阅读下一行内容时视觉错行严重（会员图标+字段过长导致）。2、由于会员图标代表会员内容，这是绝大对数产品对用户有过的教育，所以这里重设了会员图标并单独展示。

• 字体：对标题字体进行加粗，（16pt，Medium），价格字体加大加粗（24pt，Medium），划线价加粗（12pt，Medium），按钮文字&活动标签文字（14pt，Medium）精简其他辅助信息层级（12pt，Regular）

• 标签：优惠信息标签由0.5pt改为1pt，提升视觉层级。活动标签为色块降低不透明度+有彩色文字。

• 按钮：由于标签为描边样式，为了拉开差异，突出按钮，所以将按钮改为实心色块。

做完上面这些后，可能大部分人觉得到这就可以了，但其实我们还可以再增加设计细节，这也是你与其他设计师拉开差距的地方。

7【 设计细节表现 】

由于案例不同，增加细节的方式不同，所以需要具体案例具体分析。在本次案例中，我通过新增图标设计以达到丰富卡片细节的作用。在活动标签中新增小喇叭图标，来增强活动氛围、增强信息视觉上的互动性、增强代入感。在按钮中新增时钟图标，配合预约文案，让用户预知操作后可能的结果，并且提升按钮视觉层级、提升点击欲望。

8【 确定最终布局 】

在布局中主要考虑两个点：

1、合理性&拓展性

由于该卡片的应用场景为推荐列表，所以这里保持原有的上下布局，遵从人眼阅读习惯。

2、屏效比

• 借助这个方式，使图文内容过渡顺畅，阅读体验更佳。

• 尽可能减少了标签对产品图的遮挡。

• 压缩卡片高度，最终达到提升屏效的目的。

Q1: 3张设计稿中活动标签为什么进行修改？

答：稿1到稿2，活动标签样式修改，位置调整，对应不同的用户，对于价格敏感性用户，显然稿2更能刺激他们点击。稿2到稿3，对标签样式再次进行加强。稿3到稿4，考虑该应用场景是在推荐列表中，为了避免出现多个同类型活动的卡片，导致过乱，所以修改了设计样式。

Q2:在稿3到稿4中优惠标签这一排内容，和预约按钮这一排内容，上下调整的原因是什么？

答：1、将文字区域看做一块完整的矩形区域，稿3整体看起来更完整，而稿2像是右下缺了一个角。2、在信息阅读顺序设计上，稿3的处理是优先让用户看到优惠相关信息，更加迎合价格敏感性用户的需求。

Q3:你认为最终稿还有优化空间吗？

答：这个案例，是我截图与我司相关App的。我认为如果可以，还需要再了解目标用户画像，了解用户真正在意的信息是那些，这些都会对最终方案产生影响，也只有知道这些才能得出最合适的哪个方案。这里我定义的是对价格敏感的用户，基于这类用户来说，我认为最终方案是合适的

文章来源：站酷 作者：幺零三

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

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

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

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 7 条实用的建议，一起来看看吧！

用户体验

首先，我们先来了解什么是用户体验

从字面上来说，用户体验就是用户在使用产品过程中对产品的直观感受以及评价

这种感受非常的主观，但又很容易影响别人对产品的判断。这就是为什么某宝商家一直求好评，而某团骑手会为了好评跟用户“大动干戈”的原因了

名词解释

• UI——User Interface，本意是“⽤户界面”，但现在这个词已经被拟人化了，即把那些做用户界面的设计师们叫做UI

• UE——User Experience，本意是“⽤户体验”，现在也变成了一个职业名词，是指那些做用户调研的研究员，比如用户画像、产品分析、竞品分析等。有些公司把“交互设计师”也叫做UE，严格来说UE和交互是两个职位，不过现在很多UE除了做用户调研也会画交互原型，所以混在一起也不奇怪了

• IxD——InteractionDesigner，本意为“交互设计”，也就是交互设计师，现在也常常用UX（User Experience）来表示交互设计，用来跟UI进行区分。简单来说就是帮产品画原型的，实际上这个职位非常的关键，产品希望表达的逻辑，各个界面的跳转与关联关系，以及产品的可用性与易用性，都体现在交互上

• UED——User Experience Design，本意为“⽤户体验设计”，现在常常表示用户体验设计团队，基本上大一点的互联网公司都有自己的UED团队，甚至大的部门都有自己的UED团队

UED工作领域

UED团队要做的事情可多了，通常来来说主要坐下面的事情： 

• 用户研究

• 产品分析

• 交互设计

• 产品设计

• 视觉设计

• 品牌设计

• 插画设计

简而言之，UED是以用户需求为目标而进行的设计的团队，通过团队的经验与设计能力给出设计方案，是帮助公司进行产品策划的主力之一

用户体验五要素

说到用户体验，就不得不提用户体验五要素了

现在我们所谈论的用户体验的概念，其实最早出自一本叫《用户体验要素》的一本书

《用户体验要素》--作者Jesse James Garrett，是美国用户体验咨询公司Adaptive Path的创始人之一

这本书出的其实比较早，英文版在2001年就出了，国内常见的是2010年出版的中文版第2版，书里的概念在互联网设计界广为流传，非常值得阅读

当设计师在设计或重构产品，却不知从何开始时，这时我们可以参考用户体验五要素

用户体验五要素是一种产品分析与设计的方法论，他向教科书一样指导我们从0到1设计一款产品。同时它涵盖了一个产品从想法到落地的整个流程，这正是我们学习它的重要原因

用户体验五要素由战略层、范围层、结构层、交互层、表现层等5个层级构成，由下而上像个金字塔的结构一样，战略层则是底部最坚定的根基，产品的起源也源自该层

1.战略层

这是五要素的最底层，一般是公司负责人与产品总监、市场总监等高层之间的讨论范围层。这一层主要是确定产品目标以及用户需求。比如：

• 公司要做什么

• 面向什么样的用户

• 什么样的解决方案

• 公司的产品特色是什么

• 竞争对手有什么

• 将来的收益怎么样

值得一提的是用户画像需要在这一层定义出来。我们可以招募一些用户进行访谈，然后为用户分组，并结合用户的需求确定我们的产品目标

2.范围层

战略决定范围，这一层主要针对战略层的需求进行更细致的分析，定义需求是什么，提出解决方案，同时要定要好需求的优先级

3.结构层

根据前两层思考产品的信息架构，规划任务流程，简单来说这一层主要是产品PRD的输出

4.框架层

页面的具体功能摆放，信息布局，这一层主要是交互设计，输出低保真原型

5.表现层

页面最终给用户呈现的视觉效果，这一层主要是视觉设计，输出高保真视觉稿

模拟案例

作为设计师的你，接到了一个饼干公司的设计需求，公司希望你能帮他完成从产品到包装一系列的设计，你该怎么去做呢？

我们用用户体验五要素来整理设计思路：

-战略层

• 先了解这家公司的产品需求和用户需求

• 产品需求：公司是个小型食品加工厂，主营是面包和饼干，有实体店也有网店，今年准备在圣诞节推出一款圣诞饼干

• 用户需求：用户画像是20-35岁的女性，喜欢看剧，喜欢网购，对可爱的东西没有抵抗力。今年上映的一部电影叫《饼干侠》（虚拟）票房火爆，用户都想买到剧中同款的饼干

• 公司目标：希望圣诞前后一个月内盈利50w

-范围层

• 分析需求：公司是做一款圣诞饼干，了解到《饼干侠》的原型是出自美国卡芙食品的一款饼干，并把它确定为竞品并展开分析

• 设计方案：列出一系列设计清单，包括品牌logo重新设计，食品包装、网店圣诞装饰、广告宣传图等，给这些设计需求确定好优先级

-结构层

• 信息架构：进一步细化已列出的设计方案，输出文档或者设计规范，比如《品牌手册》《食品包装标准》等

• 交互流程：进一步的用户画像与分析，收集市场同类型品牌调性，通过试用的方式整理出饼干的分类属性，如口味、分量、包装材质等

-框架层

• 从这里可以开始整体的、低保真的设计了，可以出一些比较具体的设计方案，目的是快速跟需求方进行评审，为后续的视觉设计作准备

-表现层

• 经过前面反复的沟通与评审，开始高保真的视觉设计，从产品包装到广告图到物料，这里就是设计师们展示商品颜值，提升其商业价值的时刻到了

• 最终产品上市

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

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

结合营销管理后台系统案例，详细聊聊B端设计规范建立过程