先问一个问题：怎么样衡量一个设计好与不好？工作中实践越多次，越会发现华丽的设计稿并不是体现设计师专业能力的唯一标准。普通设计师和高级设计师区别在于，设计方案是否具备完整设计思路；设计对于业务有没有真正的价值体现；以及设计方案的推动落地的完整性到底有多少。设计越往后走，越考验产品思维，设计思维，以及设计推动能力。这是产品设计师需要关注的核心三要素。

设计师在工作中接到设计需求会不自觉的第一时间想着如何去进行视觉表达，视觉表达确实非常重要，也是公司对于设计师的核心价值的定位之一，但视觉表达只是其中设计专业本职工作中的一个环节。设计师还要应该能够站在产品、设计、技术等不同维度去思考设计方案的可行性。产品打磨-视觉呈现-落地执行，在这三个核心点里面设计师分别有不同的定位和价值所在。 

  一. 产品“双标”满足   

产品打磨包含产品规划，内容组成，界面布局，交互梳理等等…所有环节的工作是为了符合产品最终的目标。产品所有的能力会核心围绕两个点：1商业变现 2用户需求满足。这两个目标在产品执行的环节有时候会有一些冲突，在产品打磨阶段设计师通过怎样的方式，做到既满足产品商业目标又满足用户体验需求？可以按照以下几个步骤进行分析寻求切入点： 

这里用腾讯动漫付费模块举例说明： 项目背景是腾讯动漫产品要做付费体系升级设计，接到需求先有由产品源头一步步深入，逐步展开设计方案的规划。 

 01 产品目标确认  

通过对项目背景的解读和产品方案的深入了解，以及总结当前存在的一些问题，可以明确得到项目中产品核心目是什么。付费升级核心原因是付费转化低，用户付费意愿不够强烈。此次升级的核心目标是促进内容消费，提升付费率。 

 02 分析用户路径  

确认目标之后从哪个模块儿开始进行首要需要考虑的。对于现有现有功能的升级，建议核心从产品本身着手，可以根据用户行为分析，获取用户常规使用路径，找到用户使用场景下的核心目的，从而去挖掘用户在付费路径下的诉求点，根据诉求点找到付费升级的触点。这里我们罗列了用户阅读产品的路径。 

 03 观察用户核心需求是否被满足 

 用户在每个场景下都会有“痛点”和“痒点”。比如在阅读前，核心目是想快点看到漫画内容；阅读过程中，想要及时宣泄对漫画的故事情节的感受；阅读后，希望找到更多相关内容或者能够和内容有更多的互动。目前产品在这三个关键的路径节点都存在一些问题，阅读前对于付费缺乏正向引导，阅读过程中互相行为较少，阅读后没有更多延展内容可供消费等。 

 04 洞察设计切入点  

根据用户在阅读 “前 中 后” 关键路径的节点的不同情绪反馈，我们可以做出找到相应情感满足切入点，并且制定解决方案 

 05 制定设计方案  

将之前找到的设计情感切入点用交互和视觉的形式呈现出来，尽可能完整的表达清晰。下面展示是关于付费升级优化的完整视频DEMO。整个方案采用趣味情感化形式为核心设计思路，逐步去引导用户付费。让用户在趣味互动中完成产品的商业转化目标。 

https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html

 二. 设计呈现的“差异化”   

视觉呈现是设计师们都比较擅长的工作，但不同专业高度要求下方案最终呈现出的效果是完全不一样的。好的设计方案，需要在设计上做出明显的“差异化”，这里的差异化是指要区别于常规输出一般的水平。差异化的可以从多个点入手：

优质的设计美感：

美感是作为设计师首先需要培养的技能之一，也是在后续职业生涯的一直需要用到的技能。设计师被神职化的很大一个原因就是因为设计师的美感比一般人要好，有懂得欣赏美、鉴别美、以及创造美的能力。单一从视觉层面，设计作品是合格品还是精品，最终取决于画面的精美程度。项目不分大小，再小的一个项目都可以做出精致品质，这也是体现设计师专业度的核心衡量之一。

完整设计思路：

设计方案的完整性也能够很好的设计师专业度的差异化，几张图的设计稿和一个有完整设计思路的设计方案在品质上自然是明显差别的。设计师不光需要将设计呈现出来，更需要有严谨的设计思路并且表达出来让受众到你的设计想法。设计前期分析、中期执行、后期落地以及迭代优化，能够让设计师有意识的锻炼和提升自己的设计思维，对于设计师能力提升有必然的帮助。 

独特创意：

设计差异化呈现上，创意是一个非常好的切入点。行业大趋势的前提下，现在同类产品越来越趋于同质化，受众使用产品的时候都会有一些常规认知，关于功能的、交互操作的、内容组成的等等，淘宝和京东、大众和美团、甚至QQ音乐和网易音乐在产品使用体验上都有高度重合的地方，这些已经在用户心智中形成习以为常的认知感受。如果能够在用户的常规认知里，用创意手法呈现出超出他们预期的内容使其惊喜，产品设计就会有明显差异化体现。 

善用情感化：

具备美感的设计能让作品看起来有高级感，但更为高级且有效的是能够引起用户情感共鸣的设计。设计是主观的，对于设计每个人都有自己的想法，也正是因为主观的设计感受，能让设计在情感化打造方面可以有很多的尝试方向。能够引起受众主观情感上的共鸣和认同的设计，会形成产品的核心记忆点之一。设计师对于情感化设计往往会有一些误区，认为图形可爱，色彩羡慕，动效流畅且能够形成一套视觉体系，就能够算情感设计。真正的情感设计是需要从用户角度出发，挖掘用户的认知领域和喜欢，从而去进行符合用户情感诉求的呈现。 

三. 方案推动的效能管理 

 

设计方案输出只是整个产品生产流程中的一个核心环节，产品上线后体验如何最终取决于落地实现的程度。在方案落地支持过程中，效率协调和实现能力是保证设计方案贯彻一致执行的关键因素：

 协作  

产品设计师工作协调分为内部协作和外部协作。内部协作即设计师之间的沟通协同，主要内容是如何保持设计语言一致性，除了制定设计规范，还可以建立公共控件库，线上调用。控件库能够使设计师协作无学习成本，设计师输出设计稿效率也能够大大提升，同时保一致性。

外部协作主要是和下游的技术同事直接的工作对接，设计方案的交接方式以及开发获取信息的效率很关键。在开发接收设计方案的时候，尽能力降低获取成本以及理解成本。比如设计稿的标注，在标注上设计师一般会花很长时间，开发也需要逐步查看，偶尔还会有标注遗漏的地方。我们团队会直接采用插件，设计稿及时同步，并且开发可以自己随时查看每个元素的标注信息，便捷。

这里推荐两款协调软件：一款是InVision可以在sketch里进行控件协同调用，所有想用的元素直接源文件调用，不需要再问同事要源文件！另一款是Zeplin技术同学可以直接查看元素属性以及间距等，设计师解放双手不再需要标注！

官网链接： 

https://login.invisionapp.com/auth/sign-in   

https://zeplin.io/

实现能力   

专业技术之间的壁垒，也会成为设计方案实现的阻力。同样的界面，设计人员用设计软件实现，技术人员用逻辑代码实现，实现的方式和成本存在很大的差异性，所以往往设计师认为很简单的需求在开发层面的确非常难实现。当然，不是所有需求都是无解的，设计师在技术实现层面还是可以做一些事情：

01 方案前置沟通

设计一个新的功能的时候，如果有非常规的设计方案，可以提前和技术人员沟通实现的难易程度，让技术人员有前期预判和预演的时间。并且，可以将设计做成简易DEMO方便技术人员快速理解，避免双方存在信息不对等的情况。

02 搭建开发控件库

开发控件库和设计规范一样，是最基础但应用最为频繁的模块儿。开发控件库可以将最基础的元素形成固有规范，所有开发实现都用同一套规范，以确保实现的高度一致性，同时也能够提升实现效率和设计还原。设计可以辅助开发一起制定开发控件库，确保控件库和设计规格的一致性。

03 寻求技术语言共通性

尽量将设计方案转化为技术能够理解和复用的形式进行对接。除了静态设计稿的标注，设计和技术实现最大的难点在于动态交互的实现上，对于动态设计，将设计方案转换为代码文件交付给技术实现，这样能确保功能的正常实现同时减少后期设计还原性的偏差。

以上初步总结的关于产品设计师在设计过程中从前期产品规划到中期设计执行再到后期开发落地应该注意的一些核心点：

第一条，设计方案既要满足产品目标又同时要兼顾用户体验；

第二条，优秀的设计师，会保持设计方案的“差异化”；

第三条，设计师职责除了确保设计方案完整性，更重要的是推动设计方案的完整落地。

在产品设计过程中，设计师需要关注还有很多关键点，这里也欢迎大家一起补充交流，正是这些关键点，将设计师的思维逐步打开，使其成为一个具有全链路思维的设计人才。 

文章来源：UI中国

交互手势是用户操作的重要部分，交互手势的设计好坏非常影响用户体验，那么，交互手势的设计上对于容错性和逻辑性需要注意什么？

随着用户体验被愈发的重视，更多的 APP 偏向于使用多手势优化用户的操作流程，降低使用阻力。

点击某个确定的按钮的手势操作虽然被普遍使用并被用户熟知，但是增加更快捷的手势操作可以大大增大操作热区，提高操作效率，如下图。

然而，我们可以发现由于不同产品的设计师对于用户体验的理解不同、交互层面的思考不同，导致设计的交互手势也不同。

有时同一种操作在不同的 APP 中交互手势也是不统一的，这无疑增加了用户的学习成本和记忆成本。

举个例子，iOS 端的得到和有书的播放页的打开和关闭方式。

得到有两种方式打开和关闭页面，用户可以通过点击控件或上滑控件打开播放页，通过点击收起按钮或下拉页面关闭播放页。但是有书只有一种方式打开和关闭，用户只能通过点击控件打开播放页，通过点击返回图标关闭播放页。

这让习惯了使用得到的我去使用有书时，感觉非常别扭，每次都尝试用得到的手势去操作但是都失败了，失败后我下一次并没有记住仍然用手势去操作，如此反复令我相当沮丧。

容错性

容错性是一个很大的话题，今天我们仅仅在交互手势层面上讨论。

上面的例子中，有书并没有设计滑动手势去打开和关闭播放页，那么我以我的经验去进行的滑动滑操作在有书这个产品中就是错误的和不被产品识别的。但是这种手势又广泛存在于大量的音频播放 APP 中，如喜马拉雅、荔枝 FM 等。

一旦用户从这些 APP 迁移到了有书，本来养成的操作习惯在有书就失效了，用户就会感觉“这个 APP 很难用，用起来很不舒服”，进而可能放弃有书转而投向其他产品怀抱。

与手势设计类似，这也是为什么现在的同种类型的 APP 的信息架构设计越来越同质化，当我们打开淘宝、天猫、京东时我们有时感觉就像是同一个 APP ，本质上也是为了降低用户的迁移、记忆和学习成本。

如下图所示，提高手势的容错性对用户的意义。

很多优秀的产品考虑到了上述问题，设计了多手势来优化用户体验。

举个例子，在 APP Store 的首页点击一个推荐卡片后进入详情页，由于详情页是直接由卡片放大转场的，不同于传统的新页面右侧进入和从底部弹出。

在用户的使用习惯和认知中新页面如果从右侧进入就可以通过右滑返回，从底部弹出的话就可以下拉返回。因此，当用户面对卡片放大进入新页面这种全新交互时可能会疑惑如何返回，对此理解不同的用户可能会尝试右滑，也可能尝试下拉。

APP Store 的设计在此就有很好的容错性，用户可以通过三种方式返回首页，分别是、右滑返回、下拉返回和点击叉号返回，这不但降低了用户的记忆和学习成本，也便于不同习惯的用户使用。

针对不同的场景，手势的使用也会有不同。

一个很好的案例是知乎的评论：知乎的评论的关闭方式有三种，分别是下拉、右滑和点击叉号。

用户观看评论的场景有两种，第一种是只想看一下精选评论然后关闭，第二种是被评论吸引后一直往下看。当用户单手操作不方便点击叉号时，下拉对应的是第一种用户；右滑对应的是第二种用户，不管用户看了多少屏的评论，随时可以通过右滑关闭评论（因为用户翻阅了很多屏评论后需要下拉到第一条评论时，下拉关闭评论手势才会生效，所以第二种用户一般不使用下拉去关闭评论）。

可能你会心生疑惑：“第一种用户也可以使用右滑来关闭评论呀”，确实可以，但是对于人的操作习惯来说，上下滑动会比左右滑动更方便。

还值得讨论的是苹果自 iPhone 6s 开始加入的新交互方式 3D Touch，它允许用户通过更大力度的重按呼出情景菜单快捷地使用高频功能而不用先打开 APP，对于追求效率的用户来说简直不要更方便，但是对于不支持 3D Touch 的机型则无法使用情景菜单。

因此，在生活中我发现这样的现象，很多使用惯了3D Touch 的用户换到无 3D Touch 的苹果机型后很不习惯，总是尝试去重按但是是无效的。

其实在很多安卓手机上也有情景菜单这一功能，它巧妙地将卸载也加到了情景菜单中，因此用户只需要通过长按就可以获得所有需要的功能，而不是像苹果那样长按是卸载而重按是情景菜单。

我猜测苹果为了适配所有机型，提高容错性，从今年的发布会的 iPhone 11 和iPhone 11 pro 开始，取消了 3D Touch，转而使用 Haptic Touch （有震动反馈的长按）代替。当你长按某个图标时，感受到震动后松开，即可呼出二级菜单；如果震动后仍不松开，则进入到卸载 APP 时的抖动状态，使得之后的即使不支持 3D Touch的机型可以使用便捷的情景菜单了。

对于不支持 3D Touch 的老款机型会不会在 iOS 13 更新后也可以使用 Haptic Touch 呢？

如果一致统一的话，容错性将大大提高，我们将拭目以待。

不仅仅是 iOS ，Android 的版本 Android 10经历了 6 个测试版迭代后正式发布，我们发现交互手势是 Android 10 的一个巨大亮点。Android 10 在第三版内测系统开始引入全局手势操作，用户启用后，屏幕底部便不会再出现虚拟按键和导航栏，只会剩下一个指示条，上滑返回主屏、侧滑返回上一层的操作逻辑也均和 iOS 保持一致。

这可能标志着安卓手机一直以来在国内各家厂商的各种创新手势的割裂生态中即将重归统一，并和 iOS 保持一致。

这种妥协将大大提高在用户使用一款新安卓手机时的容错性，同时降低了今后用户在两大系统之间的迁移成本。

逻辑性

再谈谈逻辑性，在交互手势的层面上，如果用户能够通过某个手势进行某个操作后，按照逻辑，用户也可以通过反向的手势或对应的手势进行逆向操作。

比如，在微信首页下拉调出小程序页面，之后可以通过上拉返回首页。点击加号呼出更多操作，再次点击加号收起更多操作。

如果违背了用户的心理模型和逻辑性，用户就会感觉到混乱和不适。

这里举一个反例， Uki 的个人主页可以通过点击或下拉底部的固定底板收起更多信息，但是收起后只能通过点击展开更多个人信息而不能上拉，不符合逻辑与用户的心理模型。

如下图所示，逻辑性对用户的意义。

有的时候，我们会发现为了提高容错性，我们会牺牲一部分逻辑性。

就像上文提到的知乎关闭评论弹出框，逻辑上它是从底部弹出的，但是不但能够下拉关闭还可以右滑关闭。尽管右滑关闭有些违背用户的心理模型，但是确实给用户带来了很多操作上的便捷。

如何设计

1. 是否需要加入多手势操作的考虑因素

我们需要考虑的因素包括使用频率、危险程度和特殊体验。

1. 使用频率：当一个功能的使用频率足够高时，我们加入多手势操作去提高用户操作效率才是有意义的。一个低频的功能的特殊手势操作很容易被用户遗忘。
2. 危险程度：如果一个操作不可撤销且存在危险性质，我们最好不要加入多手势操作。此时我们需要用户更加专注，如果加入多手势操作可能会增加误操作的概率。
3. 特殊体验：当我们需要加入特殊的模拟体验时，此时我们可以加入多手势操作。如探探左滑无感右滑喜欢，给用户带来的“翻牌子”感觉是点击操作无法替代的。QQ 阅读下拉拟物绳灯进行日间和夜间模式切换，这种存在我们记忆中的交互方式能够唤起我们的情感。

2. 评估所选手势的考虑因素

1）考虑不同平台的硬件系统和操作系统特性

由于硬件与操作系统差异，iOS 系统支持很多手势，但是安卓系统在手势支持方面就不如 iOS 丰富。

安卓硬件设备的差异比较大，不同安卓手机厂商会在安卓系统的基础上自定义系统的手势操作，因此对于手势的支持也有较大的差异。对于这种情况我们需要熟悉相应平台的规范，做到心中有数。

2）考虑所选的手势的学习成本和记忆成本，用户是否已经被教育

如下图所示，尽管设备支持的手势数量多不胜数，但是日常使用 APP 时，大部分用户习惯使用的手势很少，比如单击、双击、滑动、上拉、下拉、双指扩张和收缩等。除此之外的手势教育成本和学习成本很高。

一般比较通用的功能是没有必要在此处创新的，但是如果一些特殊的操作确实需要加入时，我们就需要考虑下面的问题。

a. 如果没有教育成熟，考虑加入教学或搭配简易的操作方式

对于我们需要加入的手势操作当前用户并未被教育成熟时，我们需要考虑加入手势教学，具体的手势教学类型下一部分会详细讨论。

然而，大部分情况下用户的记忆是短期的，教学内容可能会被快速遗忘，下次用户使用 APP 时仍然不会使用特殊手势。此时我们应该将一些比较难以记忆的手势操作搭配一个简单的手势操作。

比如 QQ 阅读的下拉拟物绳灯切换夜间模式的手势操作设计，其考虑到了有些用户在现实生活中并未见过拟物绳灯，并不知道是要进行下拉才能触发操作。因此，QQ 阅读贴心地搭配了一个简单的点击操作，用户通过点击绳灯也可以切换夜间模式，如下图。

b. 考虑所选手势是否可能导致冲突和误操作，如果导致了，考虑如何避免和折中

最常见的手势冲突情况就是 APP 的手势与操作系统的全局手势冲突。

解决方案有两个，一是避免设计与全局手势一致的手势操作，例如 iOS 的在屏幕边缘右滑返回、全面屏机型的底部上滑退出应用等全局手势操作；二是仍然设计与全局手势冲突的操作，但是将全局手势部分禁用或以其他的方式区分开。

如下图有书播放页的案例，由于进度条滑动控件过于靠左，导致使用 iOS 全局右滑返回手势时有时会产生误操作，即本来想要右滑返回却不小心滑动了进度条。

这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。

误操作指的是，我们设计的手势操作与 APP 内的其他操作或系统全局手势操作接近导致用户触发了非预期的操作。比如 iOS 端的知乎被吐槽的一个右滑返回手势操作，经过研究发现，由于 iOS 端的知乎在浏览回答的页面设计的右滑返回的热区过大，导致用户上滑浏览的时候如果手指的滑动角度变化幅度过大一不小心就触发了右滑返回，再次进入回答后又需要翻页很久才能找到之前离开的地方，很影响体验。

我觉得知乎可以减少热区，将热区调整为 iOS 全局的右滑返回区域即可，如下图所示。

当然，产品设计需要平衡与取舍，如果减少了热区是否会影响其他用户的体验还需要考虑和调研，两者并无绝对的对错

3. 让用户了解并使用新手势

当新手势无法直接让用户感知时，我们需要加入一些手势教学帮助用户快速上手使用。

1）手势教学方式

a. 浮层和动画引导使用静态或动态的手势图片或气泡示例告诉用户使用哪种手势进行操作

相比于静态，动态比静态更为直观和易学。

b. 内容隐喻通过微妙的视觉线索暗示用户此处可以通过某种手势进行操作

由于教学内容难免具有干扰性，对于高级用户来说是不必要的，但是对于初级用户又是必要的，因此以这种内容暗示的方式使教学极为轻量化，在低干扰的情况下使得用户学习了手势操作。

如下图，哔哩哔哩在打开第一篇文章时会平移显示下一篇文章的框架，暗示用户可以通过左右滑动切换文章。

再比如陌陌在打开点点功能时，会在用户进入页面的时候播放一个动画，暗示有很多卡片叠加在了一起，用户可以通过滑动切换卡片。

2）教学的出现时机

a. 操作前当产品中设计了不容易感知的新手势，在用户操作前，通过教学让用户了解和学习新的手势。

b. 错误操作后对于一些与用户的心理模型和习惯不一致的手势，提前预测用户可能输入的错误手势，在用户错误操作后进行提示，规范用户的操作方式。

如下图，由于知乎旧版本是通过左右滑动切换回答的，新版本调整为上下滑动后，需要纠正用户使用习惯。因此，当用户仍然使用左右滑动时，会出现浮层提示用户正确的手势进行教学。

结语

以上是日常思考和总结，有不恰当之处欢迎指出。希望本文在大家进行手势设计的过程中能够帮助做出合理的决策。

文章来源：人人都是产品经理 

历史上的每一次变革，都是从一小部分人的率先觉醒开始的。互联网时代的变革日新月异，更需要时刻洞察局势，未雨绸缪。

我们筹办了【蓝湖做东】的线下活动，邀请行业大咖们齐聚论道，碰撞智慧的花火，追寻潮流的轨迹。

本期嘉宾

（按发言顺序）

此外，感谢不愿透露姓名的神秘大咖们莅临现场！

话题背景

阿里巴巴集团在 2015 年首次提出“大中台、小前台”的战略，此后，腾讯、百度、京东、美团、滴滴等互联网巨头纷纷效仿，一时间“中台”引发互联网行业的刷屏热潮。

说到中台，不得不提到芬兰的游戏公司 Supercell ，仅有 300 名员工，却接连推出爆款游戏，成为当时全球最会赚钱的明星游戏公司，马云带队参观这家公司半年之后，阿里集团开始组建 " 大中台，小前台 " 的组织和业务体制。

2015 年年中，马云带领阿里巴巴集团高管，拜访了位于芬兰赫尔辛基的移动游戏公司 Supercell。

Supercell 当时号称是世界上最成功的移动游戏公司，Supercell 由 6 名资深游戏开发者在 2010 年创立，旗下拥有《部落冲突》、《皇室战争》、《海岛奇兵》和《卡通农场》这四款超级现象级产品。Supercell 是一家典型的以小团队模式进行游戏开发的公司，以 2 到 5 个员工、最多不超过 7 个员工组成独立的开发团队，称之为 Cell ( 细胞 ) ，这也是公司名字 Supercell （超级细胞）的由来。

团队自己决定做什么样的产品，然后最快时间推出产品公测版，看看游戏是否受用户欢迎。如果用户不欢迎，迅速放弃这个产品，再进行新的尝试，期间几乎没有管理角色的介入。团队研发的产品失败后，不但不会受到惩罚，甚至还会举办庆祝仪式，以庆祝他们从失败中学到了东西。

这种模式让 Supercell 公司成为了年税前利润 15 亿美金的游戏公司，2016 年 6 月，腾讯以 86 亿美元收购了员工数不超过 200 人的 Supercell 公司 84.3% 的股权，每一名员工人均贡献的估值超过 3.54 亿人民币。

Supercell 的成功很大原因就在于其的 " 部落 " 组织策略。在 supercell 仅有的 100 多人中，被分成若干个小前台组织，每个小组虽然人不多，但都包含了做一款游戏需要的所有人才。

本来就不大的公司被分成若干个小组，这样做的好处是可以快速决策，快速研发，快速把产品推向市场，而游戏引擎、服务器等后台基础则不需要操心。

Supercell 的模式给参加此次拜访的阿里高管们很大的震撼，在大家反复的心得交流和讨论中，一个非常重要的问题引起了很多人的反思：信息时代的公司架构到底应该是怎样的？

正是有了这次拜访才真正让阿里巴巴的领导层有了足够的决心要将组织架构进行调整，在此次拜访的半年后，阿里集团 CEO 逍遥子发出内部邮件，组织架构全面升级，建设整合阿里产品技术和数据能力的强大中台，组建 " 大中台，小前台 " 的组织和业务体制。

阿里中台

所谓的 " 中台 "，并不是阿里巴巴首先提出的词语，从字面意思上理解，中台是基于前台和后台之间。阿里通过多年不懈的努力，在业务的不断催化滋养下，将自己的技术和业务能力沉淀出一套综合能力平台，具备了对于前台业务变化及创新的快速响应能力。阿里人将 " 中台战略 " 形象地比喻成陆海空三军立体化协同作战。

海陆空协同作战

他们将中台分为六类，分别对应不同兵种：

业务中台，提供重用服务，例如用户中心、订单中心之类的开箱即用可重用能力，为战场提供了空军支援能力，随叫随到，威力强大；
数据中台，提供数据分析能力，帮助从数据中学习改进，调整方向，为战场提供了海军支援能力；
算法中台，提供算法能力，帮助提供更加个性化的服务，增强用户体验，为战场提供了陆军支援能力，随机应变，所向披靡；
技术中台，提供自建系统部分的技术支撑能力，帮助解决基础设施，分布式数据库等底层技术问题，为前台特种兵提供了精良的武器装备；
研发中台，提供自建系统部分的管理和技术实践支撑能力，帮助快速搭建项目、管理进度、测试、持续集成、持续交付，是前台特种兵的训练基地；
组织中台，为项目提供投资管理、风险管理、资源调度等，是战场的指挥部，战争的大脑，指挥前线，调度后方。

2018 年双 11，阿里又一次实现了一次壮举，在 2135 亿的背后，在令人骄傲的战绩背后，缺少不了阿里中台铁军发挥的巨大力量。

（资料来源于 ZAKER）

活动现场

北京的院子驰名中外，坐落在北京孔庙旁边的一处小院尤其别致，相对封闭的院子中，坐落着透明的玻璃房子。四面围合却有开阔的视野，兼具隐秘性与舒适感。【蓝湖做东】首期聚会在这里悄然开始。

特邀嘉宾们纷至沓来，不约而同地坐到了向阳的落地窗前，伴随着初秋的清风和暖阳，一场以中台为主题的讨论，徐徐展开。

影响着行业的大咖们，是如何被中台影响的呢？让我们拭目以待。

服务过阿里大文娱的高级交互设计专家朱斌，离中台最近，他率先发言。

在阿里大文娱，我注意到整个内容行业的资源非常依赖于导演和演员。

如果没有流量明星或知名导演，那这个作品票房十有八

九都不好，所以可以看到中国的电影宣传几乎都是明星脸。而国外就截然不同，国外更加依赖于编辑和 IP。并且以一套极为成熟和的生产模式批量化创造出大量优质的影视作品。像流水线一样生产出不同风格的流量大片。

当内容成为商品的时候，如何判断一个内容的传播价值，就成为问题。

我们为此建立了一个团队，专门来研究注意力管理，让不同层次的用户第一时间看到内容就能进行一系列快速判断，而且这个判断还要符合人类的思维结构。

简单来说我们想用体验的方式去把复杂的内容和故事进行具象化，在第一时间让用户看到、看懂，并激发出观看的兴趣。

这个构思在运作的过程中面临很多问题。

比如，设计师们如何快速从影视作品中提取有效信息，如果有个片子 50 集，要判断它的价值，要看完 50 集吗？影视作品体量那么大，没有那么多设计师把所有内容都过一遍。

最终，我们提出了“中台”这个设想，我们试图找到一种即又符合逻辑，同时符合用户体验的方式。把内容进行体验层面的归类和细分，提取共有特性，预判用户在不同类别中的兴趣和喜好。进而提升内容平台的商业价值和分发效率。

商业行为的本质就是榨取剩余价值。

榨取剩余价值的基本条件，就是降本增效——用更少的时间、更少的人力成本，做出一样多的事情。我们使用蓝湖这样的工具就是为了提效，这也是各大企业争相构建中台的原因之一。

设计行业比较偏向创意，和其他行业的中台有所不同，在座各位都是各行各业的大咖，我想借此机会听听大家对中台的理解和运用，大家就自己所面临的问题找找解决方案。

聚美优品也正在构建“电商中台”，苏星就此阐述了自己的观点：

大家都认为聚美优品是一个电商企业，其实内部已经逐步转变成了一个类投行的企业，不仅收购一些颇具潜力的项目，也孵化内部的一些项目。

中台与每个公司的业务形态相关，如果公司是产品驱动的，它的中台搭建就会侧重于更的提供各种功能性服务；如果产品比较单一、功能比较单一、市场比较下沉、类目比较垂直的话，那中台的概念可能是一个伪命题。

聚美优品近年来致力于寻找新的经济增长点，这是老牌上市公司必然经历的一个阶段。所以，公司对具有创造力的岗位或团队给予很多的支持，但很多创意都是天马行空想出来的，当一个产品或项目到设计部门的时候，我们需要判断其成功的路径是什么。我理解的，这就是一个中台。如果是设计中台的话，它需要完成一个任务，保证效果。

中台可能是一个宏观的状态概念和一个微观的具体操作层面的重合，我所说的设计中台，更偏向于设计管理上的中台思维，它是一个驱动力，可以灵活地组建很多模块，然后不断去自由匹配，从而支持一些功能。

阿里大文娱的朱斌接过话题，补充了一些看法：

产品设计行业具有特殊性，如何把产品设计理念和产品设计原则，通过数据整合，与设计需求靠近，是个难题，也是阿里的中台一直在努力解决的问题。

关于中台，我想提出两个点：中台的特性，中台对产品设计行业是好是坏。

朱斌曾服务过的华为提出“让听得见炮火的人呼唤炮火”，这就是个人与中台之间配合的关系。这里“呼唤炮火”的人，就是产品设计师，他们奋战在一线，接触不同维度、不同领域的人，有特别强的洞察力，而提供“炮火”的就是中台能力。

阿里现在在做两件事，其一就是强大的设计格局，其二就是把所有设计职能进行了升级，把之前的视觉设计师、交互设计师和各种子类的设计师都统一成了三种类型：体验设计师、创意设计师、用户研究设计师。其中体验设计师大概占 60-70%，创意设计师占 20%，用户研究设计师大约 10%.

阿里的零售板块非常稳定，服务的几千万中小企业每天都会有海量的店铺、商品设计需求。所以体验设计团队制定了详尽的规范，而这些规范就是中台，设计师按照规范进行输出即可，甚至开了鹿班系统自动生产，这就相当于炮兵，指哪打哪，火力凶猛。

同时，我们会拓展第二曲线，通过创意设计师找方向。创意设计师的工作不一定能立即带来商业价值，但可以通过尝试，获取用户反馈的数据，由此做一些校准和拓展业务边界的工作。

所以中台能解决的问题，一定是稳定的，而创意相关的东西一定是变化的。所以，阿里提出“大中台、小前台”的战略。用中台去做效率实现盈利，用前台去做变化生成新的规范。

以我开篇提到的内容行业举例，时下流行的明星是随时变动的，但这些变化会产生一些规律，比如这些明星都有哪些共同特点，中台就能总结出这些变动的规律，整合出一套审美规范，当知道受众需要什么的时候，就可以根据中台提供的规范，由前台去寻找符合受众需求的内容。

这是一个相辅相成的过程，通过前台不断刺激用户去看新内容，后台可以通过反馈收集整合更多规范，再由这些规范支持前台更产出符合用户需求的内容。

阿里的设计中台大家都知道，就是鹿班智能设计平台，它是设计中台最有代表性的一个产品。鹿班诞生的背景，是由于电商平台得通过 Banner 做宣传，淘宝量级越做越大，设计师支撑不住巨大的需求，加上同类 Banner 转化率差别不大。

这就体现了需要做设计中台的几个前提：

其一，需求量特别大，不是靠人力能够解决的，或者靠人力解决的话，成本会特别高。

其二，设计质量要求不高，所要输出到的信息量较为固定。

其三，存在的生命周期特别短。像淘宝的推广，你每次打开都是不一样的东西。

有了这三个前提，就可以考虑做设计中台。

就此，又产生一个疑问，以前的那么多设计师是不是就没活干了？

并不是这样的。

阿里提出“重新定义设计”，设计师是构造一种秩序，这种秩序是机器没有办法自动获得的，它一定来自于设计师的经验、对用户的洞察、对品类的把控。最终，建立、优化中台的任务是由设计师来做的。

用我们的设计团队举例，中高级 UX 设计师在迅速增加，设计师的绝对数量没有大的增长。可以看出整个企业设计团队的能力是在提升的，对业务的支撑也会更有效，不必像以前需要上百上千个初级设计甚至外包团队来做这件事。这就是中台在规模化和频繁迭代上的优势和效益。

广联达印隽讲到什么性质的中台解决什么问题，以及中台的本质是什么：

阿里的鹿班，在内部和其他系统高度耦合，一张推广图从制作到分发，到上架到验证，系统和系统之间并无太多断层。

从使用者的角度来说，鹿班系统的最大收益方并不是设计师，而是商户，本质上是为了提高生产效率，用 AI 来淘汰量产撸图的低端设计师，但还是可以视做设计中台，毕竟这是一套“会做设计”，并且由设计师来提供机训内容的系统。

所以我们谈中台之前，还是先把中台的边界划清楚。

不能把技术中台、业务中台、数据中台、设计中台混为一谈。

中台概念在支付领域出现的比较早，以支付系统为例，资金管理、财务、风控，属于后台，即技术视角的底层服务。

渠道接入、交易、账户、收单网关等等，属于中台。

中台承担的是业务聚合和泛用，中台不能独立存在，脱离后台来谈中台是没有意义的。

（例图摘自网络）

对于设计师来说，切忌盲目跟风，中台概念的确很火，但仅针对一线大型团队。团队和产品体量没达到一定规模，底层系统都还没打磨清楚的团队，谈中台也为时过早。且设计团队如果还以界面和功能交互设计的执行工作为主，并没有足够深入业务和技术的话，也没有资格谈中后台设计。

至于设计中台，还是得先看企业业务是否已经处于良性发展期，且技术和业务也已经到了可以有中台的阶段，不然，脱离业务来谈设计中台，又是一纸空文。

所以，从这个视角来看，行业内真正可以算得上是设计中台的，除了阿里鹿班这个量级的系统之外，少之极少。

但是，除此之外，就没有别的形式的设计中台了呢？

我们其实可以换个视角看一下，比如，一个已经达到一定量级的设计团队，是否有意识的在管理自己的数字和数据资产呢？在什么系统里管理？这样的系统，是否可以视为设计视角中台？或只是一个工具？

设计部门需要基于系统的数字资产管理。大部分设计团队，并没有从系统视角，把一个设计体系运作所需要的对象管理起来。小到一个图标，一个文档，大到你的规范和原则和设计语言，都散落在各个零碎的内、外部系统中，甚至于设计师个人的硬盘里。

一个 Design DAM（ Digital Asset Management 设计数字资产管理） 系统或许可以成为一个企业的设计中台的一部分，而且这个中台是可以独立于部分业务而存在的，他能有效累积整个企业在生产过程中的所有客观过程，包括数据。

一个优秀的设计团队，需要具备数据验证和数据驱动能力，而用于分析和验证的数据，也应该是设计的数字资产的一部分。如果设计团队自己有能力的话，应该作为设计数字资产的一部分。那么这个数字资产可以是一个设计中台。换言之，数字资产是建立设计中台的一个重要核心。

蓝湖或许就像是一个 Design DAM 系统的雏形，当然，还有很长的路要走。

团队的方法论和知识库也需要一个系统性的沉淀。

企业需要的是依葫芦画瓢式的流程，还是化整为零的方法论库，根据实际项目情况合理的自由的组合运用。从管理视角来看，我们更希望看到的是系统性的管理，而不是完全依赖于人肉的主观。需要很清楚这些方法论的组合是以何种灵活的状态去支撑项目，以及输出的标准在哪里。

路漫漫，其修远兮。

自如网的贾洪涛对印隽的发言很赞同，但是关于“炮火”，他却有不同的见解：

关于任总“听见炮火的声音”来做决策，我的个人体会不一样，离炮火最近的人被炸死了，或者被炸残了，听得见炮声的人，也许不是第一线，而是第二线的人，他们才是最适合做决策的人。

我想做的是中台其中的一种，对内部的数据可视化。企业的相关数据能展现在所有员工面前，像淘宝双十一那样，一是激励团队，一是告诉团队产品的现状。

我们要做的第一步就是先用现有的数据，足够好、足够多的数据，展现给员工眼前，但同时也要考虑到，这些数据放出来，外部客户看到后会不会产生负面影响。

另外一个，项目的数据，如果让设计做清单是没有意义的，如果为了做得漂亮虚造数据，就更加没有意义，不是我想做的初衷。

提到数据，服务过阿里的朱斌补充了自己的看法：

我这儿有两个故事。

第一个故事是回应贾总的想法。我有一个学妹，正在阿里做一个项目，叫做“数据之美”，就是做双十一的大屏和各种数据的可视化呈现。比如会通过各种设计的变化来展示数据增长的速度感、体量感。目前做的非常成功，今年也晋升到了更高的职位，足以说明数据可视化的重要性。

第二个是另一个维度的故事。有时候团队内考核 Review 时，每个细分的 KPI 都完成了，而且看描述都是超额完成，所有的数据都很好。但实际上公司的整体竞争状态却在下滑。

这两个故事告诉我，数据其实就是一个任人打扮的小姑娘，好的打扮会让数据更易读易懂，坏的打扮会让数据具有欺骗性。当讲到数据的时候一定需要非常严谨的算法，每一个冲锋陷阵的人都似乎赢了，但最后战争却是输的，这就需要全面的数据分析，只抓单个的数据，其实特别危险。

广联达印隽说得很对，数字资产管理看的是长线、看得是全局，而产品经理往往看的是当下，是短线。由此，我认为直接把数据动态跟设计动态捆绑在一起，是危险的，或者不能叫做中台。我们的解决方法就是求助于数据分析团队，一方面通过专家解读保证正确理解，另一方面我们也自建数据理解的能力，招募了数据方面的专家增加了一条体验数据支线。

很多人说数据像毒药，我认为，数据是解药。那些认为数据有毒的人，大约是没有真正分清楚哪些才是有效的数据。Netflix、字节跳动等很多新兴企业的成功告诉我们，通过数据的分析，做出的决策更有利于目标的达成，而基于平台层面的数据收集、分析、管理，也就是数字资产管理，正是中台能力构建的基石。

文章来源：UI中国

写在前面

过去几年中，我们的积极反应促使我们继续探索和分析主要设计领域的新趋势。尽管大多数趋势都是去年发生的变化，但到2020年，我们仍有一些新趋势值得追求。最重要的趋势是与技术有关的趋势，以及它们的发展趋势，以及它们如何影响设计领域。 

总体趋势

2020年的主要趋势动作设计与动画， 对于2020年，我们认为运动设计是主要趋势，因为我们在所有设计领域都遇到动画，从小的交互到徽标和UI，一切都在变化。动画内容正在进入现代世界，在现代世界中，书面内容没有以前那么吸引人。 动作设计正确实施后，可使广告系列的信息更快，更正确地传达给受众。

01. theQoos品牌插图由  闵庆  02  军团赛季 3由  尼克Scarcella   03.  溶剂-使大麻银行公开赛由  BluBlu工作室  04  云服务（动画图标）由  亚历山大Baleev  05.  病毒性肝炎由  昂布尔集体 ，  蒂博ZELLER ，  乔纳森Plesel  06 。  UXC_Design2020_Project研究通过  Donerzozo

目录

1. UI / UX

2.插图

3.动态图形

4.平面设计

5.基于技术的趋势 

6.包装

7.版式

8.趋势工具

1. UI / UX

1.1暗模式（Android Q和iOS 13）

暗模式是2020年的新趋势，Android引入了两种类型的暗模式，分别称为“强制暗模式”和“系统暗模式”。微软通过在其电子邮件应用程序中展示其暗模式击败了谷歌，但谷歌迅速推出了自己的针对Android 10的Gmail应用程序的暗版本模式。

有了介绍此更新的大公司，许多设计师将选择在他们的应用程序或站点中使用暗模式，因此希望在来年看到越来越多的暗模式。

1.2粗体颜色

在过去的两年（到2020年）中，强烈的色彩已成为重要的趋势。大胆的色彩丰富，明亮，甚至极富活力。它们可以是主要或次要颜色。 

01.  EMART UX / UI可再生的通过  加X，  李宝蓝 ，  Sabum卞 ，  熙荣，  尤金全度妍 ，  원 지 혜，  Bongho彩  02  NSH通过  索菲娅费多托娃   03.   埃尔多拉多赌场-移动Web UI，应用程序ü用  的Loredana PAPP-Dinea ，  Mihai Baldean ，  Milo主题  04.  mmcité+网站由  工作室9  兹林，帕维尔Valek  05.  自动哈克系列＃21-25由  安德烈福  06.  Flipd应用程序通过  ESTUDIO PUM

1.3 UI中的插图

多年来，插图一直是设计中最强劲的趋势之一。插图是对概念的直观解释，可以使用户更好地理解产品背后的思想。除了一些精美的插图使这一概念独具匠心外，它们还可以更快地传达信息。

01.  海妖重新设计，以  西尔Theyssens ，  安东尼科拉德  02  浮雕-医疗项目由  马丁Pankiewicz  葛尔若，  米沃什Pożarkowski  03.  abuk：图书封面设计有声书商店到  谢尔盖Valiukh，  Tubik工作室  04.我llustration系统GOL到  ESTUDIO PUM  05 。  智能家居的应用程序- IOS到  玛丽亚Osadcha  06.斯基林贸易（skilling.com） -   Loredana酒店PAPP-Dinea ，  米哈伊Baldean 

1.4讲故事

设计中的讲故事是关于帮助用户在平台上的旅程，从而使他的体验尽可能轻松和流畅（在UX设计中）。一个好的故事可以帮助用户更轻松地了解产品。为了讲述一个故事，我们可以使用一个特别创建的角色，将这个角色赋予他个性，我们创建一个故事和一个冲突，最终由我们的产品（UI设计）解决。这是产品设计中讲故事的基础。讲故事在UI和UX中都使用，并且基于相同的原理，但实现方式有所不同。

01.  余吴-旅行计划应用由  朱莉张庭  02.  UX / UI | 食品外卖应用由  康斯坦丁Seredkin  03.  COOC通过  cuneyt仙

1.5动画图形和微交互

正如我们所说，动态图形是今年的趋势，它在UI设计中也有很强的表现，它为插图增添了力量，使创意更易于吸收并保留在用户的记忆中。 

微交互在2018年成为第一流，但这一趋势值得在2020年关注。它们是UI设计中极其重要的趋势，这使基本应用程序/网站与非凡的应用程序/网站有所不同。微交互在使用户了解系统的工作原理并引导其获得更好的体验方面起着至关重要的作用。 

如果您是UI设计师，但尚未在工作中使用微交互，建议您这样做，因为到2020年，没有UI的任何UI设计都将是非常基本的。 

01.  UI / UX | 智能药房应用的   阿纳斯塔西娅中号，  谢尔盖Nikonenko UX   02.  气候与动物：灭绝危机网站UI / UX  由  丹尼尔·谭，  达芙妮龙  03  飞素食者由  帕特里夏赖纳斯  04.  UKRPOSHTA。乌克兰国家邮政局的移动应用程序，伊洛娜·金（  Ilona Kim）  05 .  Tagir Tikeev 的聋人报警应用程序

1.6用户界面中的视频

到2020年，信息必须非常快地到达用户手中，最好通过视频内容来完成。您选择通过动画或经典电影来解释产品，视频内容对于任何网站或应用程序都是必不可少的。

1.7功能

UI设计中的一个重要部分是功能，即，根据其目的和功能选择每个元素。许多人认为您必须在设计和功能之间进行选择，但是在新技术的帮助下，这两种技术可以很好地融合在一起并相互补充。设计负责引起对站点或应用程序的注意，其功能使体验变得更轻松。它使用户可以更快地找到信息。

01.斯基林贸易（skilling.com） -   Loredana酒店帕普用餐 ，  迈克尔Baldean 

1.8注意细节

在UI设计中，对细节的更多关注非常重要。从按钮，图标，加载到导航到细微的细节，都可以打造出非凡的设计。随着新技术的出现，我们在UI中必须注意的细节始终在变化。

在明年，我们将看到越来越少的按钮，以及更多基于手势的导航。例如，后退按钮（Android的导航常用）在Android 10中正式消失。

01.  FLYR的视觉形象和营销网站的  Ramotion 

02.  闹钟应用聋人通过  Tagir Tikeev

1.8渐变

几年来，我们一直在谈论设计中的渐变，这种趋势在2020年将继续保持强劲，因此值得一提。新鲜的色彩是成功渐变的完美选择。它们可以用于按钮，图标，插图，甚至用于排版。

01.  Wavecut - IOS应用程序通过  Eleken局  02.  抗忧郁症的应用程序-产品设计（UX / UI）由  安娜Arutiunian 

03.  保罗回肠-电影音乐作曲家，制作人，DJ，Perfomer  通过  的Loredana PAPP-Dinea ，  米哈伊Baldean ，  米洛主题  04.  ITEXIA通过  下一页局 ，  亚历克斯海鸥 ，  Jegor Walowski

2.插图

2.1角色设计

角色设计包括定义一个支持整个概念的角色。最重要的是，通过绘图，设计师向角色灌输了强烈的个性。您在应用程序或网站中遇到的虚拟助手是角色设计的一个很好的例子。

01.  新微小的事情•儿童图画书由  Vuon插图 ，  荣阮 ，  荣范  02  的Adobe X Createfulness由  迈特弗兰基，  马蒂厄Tarwane  03。 3D人物V2由  安东尼奥·佩蒂特Cwirko  04.  Malayali由  丹尼·何塞

2.2纹理

插图和纹理很好地结合在一起，可以创造出令人难忘的构图。从粒状纹理到预制的笔触，您可以找到许多想法来为插图添加纹理，也可以手动创建它们。浏览网络时，您可以找到许多可以在插图中使用的纹理，预制笔刷和工具。 

01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 饭 太稀

2.3平面插图

在过去的几年中，我们到处都可以看到平面插图。它们仍然处于趋势中，但现在有了一个新的组成部分：对每个元素应用细线。大多数艺术家都选择使用细的黑色笔触，但也可以将其上色，使其阴影比所涉及的对象暗。

01. BILLY KENNY -刚刚为音乐通过  桑戈BANG  02 Babelia - Lecturas对维拉诺由  米格尔·安赫尔Camprubí  03.  拳击猫-第一滴血由  Felms   04.  COUSCOUS STUDIO | 解释器VIDEO  由  哈立德abdelazi ž

2.4等轴测图

是的，等轴测图仍然在这里。它们主要可以在UI设计中找到。随着人们对加密货币的兴趣不断增加，这种趋势似乎已经生效，但是在2019年它已经发展了，现在我们在其他业务领域中发现了这一趋势。

01.  庞克市由  温祚_  02  FastCompany -等距号由  阿图尔Tenczynski  03和05.  抗体亚型由  马里奥·德•梅耶尔  04.  松弛插图由  京张 

2.5 3D

随着效率越来越高的软件和工具的出现，3d渲染已逐渐发生变化。3D插图非常受欢迎，因为与2D插图不同，它提供了更逼真的图像。

01. 游戏巴伊亚之家由  Miagui  02  天平 由  卡韦萨Patata工作室  03.  城堡毁灭者由  穆罕默德Chahin  04.  Eyoo家庭3D插图由  Baianat  05.  个人插图第1卷由  巴勃罗·马林 06.  一个人旅行通过  乱伊莱恩

2.6超大胆的色彩

大胆的颜色非常适合插图。它们营造出欢乐的氛围，使角色脱颖而出，并在图像背后展现故事。

01.  玛莎·希肖娃（Masha Shishova）摄于莫斯科的  STRTFD咖啡壁画  02. 作家- 利奥·夏目（  Leo Natsume）的移动互联网思想  03.  可口可乐圆罐插图由塔尼亚·雅库诺娃（  Tania Yakunova） 

3.动态图形

3.1 3D视频 

在2020年，无法想象没有3D设计的运动。设计的这个分支打开了一个世界的大门，在这个世界中，只有想象力是极限。我们可以在广告，电影，游戏，广告活动等中找到3d。

01.  庞克市由  温祚_ ，  视觉设计艺术的影响  

3.2视频+动画插图（混合媒体）

拍摄的视频，动画插图以及有时是静止的照片的结合可以产生非凡的效果。2d或3d插图可创建令人难忘的视频，从几行运动到3D真实人物甚至是现实生活中不存在的复杂视觉效果。

01.  Coppel /回到学校通过  大量工作室  02  PWR  由安娜·霍查，  Edvina元 

3.3 2D动画-说明性视频

2D动画专注于创建故事和角色，并在创作过程中使用矢量。当您想要广告系列或产品的说明性视频时，2D可能是理想的选择。在一个总是忙碌而又没有时间阅读的世界中，说明性视频对于任何网站都是必不可少的。

01.  Freelive  由  工作室Infografika ，  谢尔盖·萨多斯基 ，  阿纳斯塔西娅Alterka ，  Arsentiy Lesnik宾馆 ，  尤里·阿姆斯特朗 ，  阿林好，  乔治VALD ，马克西姆Tleubaev  

3.4动画徽标

您已经了解到动画是2020年的“必备”，为了保持竞争力，我们还必须将它们集成到徽标设计中。许多公司已开始对其徽标进行动画处理，以引起人们的注意。这也是徽标设计的主要趋势。

01.  杯茶由  维多利亚伍  02 - 07.  运动野兽✕Logomachine。动画标志的  运动设计学院，  维克托Villamarin的，  波格丹·杜米特留，  Logomachine .NET ，  亚历山大·库兹涅佐夫，  扎克李，  丹尼斯Siurin ，  斯坦尼斯拉夫·马尔琴科，  莉扎薇塔Tsareva ，  Supremus Levenus ，  安东·福明，  埃米尔Khafizov ，  胆碱哈达           

3.5混合动画2D和3D集成

这一趋势不是一个新趋势，但绝对值得一提。混合动画就是使用为此创建的特定软件将2D与3D结合在一起。 

4.平面设计

4.1平面设计中的3D 

尽管2d垄断了设计的这一分支，但3d可以为最终概念添加额外的内容。3d渲染可以采用插图，动画或字体的形式。

01.  画像由  费尔南多·多明格斯Cózar  02.  NASA | 太空时代的  工作室-JQΔ   03.  美国宇航局X BBC | 不自然世界的  工作室，JQΔ

4.2双色

精益求精的概念可以完美描述这一趋势，设计师在其中创造出大胆的元素，并带有优雅的手感和强烈的对比。这种趋势是创建更易于访问的打印的理想选择，因为某些打印技术如果颜色更多，则价格会更高。

01.  冬季公开赛'18由  Kinoto Studio，  Romina Rios，  Luc Geoffroy  02 Synticate©由  斯捷潘索洛德科夫   03.  TIGER在博物馆由  de_form工作室，  诺拉demeczky ，  的Eniko DERI  04.  刻字系列IX由  拉斐尔·塞拉

4.3光学感知艺术

欧普艺术作品是抽象的，有许多知名的黑白作品。通常，它们给观看者留下动感，隐藏的图像，闪烁和振动的图案或肿胀或翘曲的印象。（来源：wikipedia.org）。

这种趋势给人以动静的印象，但是以一种静态的方式。如果要实现在印刷海报中移动图形的想法，这是最合适的方法。

01 02  东京电影节共混物由  梅赛德斯巴桑 ，  的Adobe住  03.  海报-第一卷由  Xtian米勒

4.4平面设计中的插图

插图在设计的所有领域都非常重要，因此我们在图形设计中也可以找到它们。2D插图在现在已经非常流行了几年，并且即使在2020年，也将继续成为设计师的最爱。 

01.  GOOSE赫尔-海报由  Ewelina鹅  02  CAT酒吧和舞厅/ 2019至  kissmiklos，  Eszter萨拉 

4.5动画海报

动画无处不在，我们在设计的各个领域都可以找到它们，当然它们也存在于数字海报中。动画可以将2D与3D混合在一起，效果令人着迷。

01  节地铁地铁由  Bzoing，  维吉尼贝达德  02.  失败的Windows由  皮埃尔Kleinhouse，  辖Zivony 

4.6复古合成波

复古合成波是一种在80年代出现的趋势，但一旦好莱坞开始发行该十年的电影后便开始重新出现。随着《陌生人事物》系列的成功，这一潮流再次开始流行。

01.  鸡尾酒和梦想通过  Gjorgji Despodov  02.  CINEMAX由  杰森巴尔巴  03.奇怪的事情（Netflix.com）

4.7瑞士设计，达达主义，包豪斯

20世纪最重要的图形设计运动始终是最好的设计师的灵感来源。这些样式值得一提，因为它们始终是的，遵循它们所施加的规则几乎不可能在设计中犯错误。总的来说，这些运动强调版式，无衬线字体（Helvetica于1957年在包豪斯舞台上创建），几何形状，简单的线条，体积和颜色。

01.  瑞士海报01（版式方面）由  Mehman Mammedov  02.  黄视VOL.3通过  维奥莱纳齐名

4.8大的不间断彩色空间 

大型，不间断的色彩空间将在明年成为非常流行的趋势。它们与大胆的字体搭配使用，可以在图形设计，产品设计以及ui中找到。

01.  Synticate©由  斯捷潘索洛德科夫  02  Havaianas人字品牌内容由  约翰Vernizzi  03.  Kekkilä-BVB的  Kurppa Hosk

4.9超极简主义

极简主义的设计仅使用必需品，非常有限的调色板和简单的形状来打造令人难忘的身份。放弃多余的元素，使所有设计项目都有目的。要创建超极简主义的设计，您需要使用尽可能多的白色/负空间，简单的配色方案和一些基本的几何形状。

01.  Heim杂志，第3页，  Sasha Yaguza撰写  02.  Andrei Gheorghe- DADA-通过  moodley品牌标识发布

5.基于技术的趋势

技术通过智能设备和崭新的理念正在彻底改变我们的生活。这些新技术使设计师已经开发出进入当前趋势的新功能。人工智能，机器学习，虚拟现实和增强现实正在影响设计师的思维方式和创作方式。

5.1增强现实的移动应用

随着苹果和谷歌推出自己的AR开发平台ARKit和ARCore，很明显，整个世界将面向增强现实技术。 

许多大品牌已经在其应用程序中采用了这项技术，而那些尚未采用这种技术的公司必须认真考虑如何使用户在这种新现实中与之交互。

有一些AR交互可用于创建直观的应用程序。第一个是将应用程序固定在手机屏幕上时。另一个是AR UI与用户周围的环境相关联时。最常用的互动方式之一

是当UI与对象相关并通过扫描特定项目触发时。该动作将数字动画连接到特殊的“标记”。 

有关更具体的AI规则，请阅读Apple指南，以提供“将真实的虚拟对象与现实世界无缝融合的沉浸式，引人入胜的体验”。

5.2 AI，ML，聊天机器人和虚拟助手

聊天机器人是一种 通过听觉或文本方法 进行  对话的  软件。[1]  此类程序通常旨在令人信服地模拟人类作为对话伴侣的行为，尽管截至2019年，它们仍远远不能通过  图灵测试。[2]  资料来源：维基百科

人们还不习惯与AI对话，因此设计师（和开发人员）的工作很大一部分是使流程简单并建立信任。他们需要帮助人们了解系统可以做什么以及如何使用它。

使用AIML（人工智能标记语言）设计和编写脚本聊天机器人，是出色的UX设计人员的魔力可以发挥作用的地方。

大多数使用聊天机器人的公司都选择说明助手来为AI做鬼脸。以下是一些在其UI设计中使用聊天机器人的品牌：Spotify，星巴克，万事达卡，丝芙兰，Lyft，必胜客。

5.3 VR

大多数人将VR与游戏行业联系在一起是有充分理由的，但是随着所有大型科技公司开发VR套件和应用程序，我们可以肯定地说，我们将发现使用和享受这项技术的新方法。VR已经用于教育，医疗保健，旅游，房地产或建筑。 

5.4语音用户界面（VUI）

语音用户界面（VUI）使用语音识别  来理解语音命令和问题，通常是文本到语音以播放答复，从而  使语音与计算机的人机交互成为可能  。语音命令设备（VCD）是受语音用户界面控制的设备。资料来源：维基百科 

去年，使用互联网连接的设备的人中有40％每月至少使用一次语音助手，与去年相比，这一数字增加了10％。

6.产品设计

6.1包装中的图案

在过饱和的包装市场中，很难创造出可以脱颖而出的新产品，因此设计师要回到根源并创造出使产品在拥挤的零售货架上脱颖而出的样式。几何，花卉，浪漫或单色图案是任何产品包装的大胆选择。

01.  飞行山羊咖啡由  妮可LaFave    02.  VITA SPA皮肤  由  DWYW   03.  巧克力包装设计由  算术   04.  100手绘无缝的图案和形状   的  Arseny Samolevsky

6.2包装插图

插图一直是包装设计中的重要元素。通过他们，我们可以讲述一个故事，使目标受众可以更好地理解该概念背后的历史。平面插图已经存在了数十年，并且很可能会一直处于流行趋势。

01. 布里格斯原件由  熙宰金  02  天鹅绒咖啡杯  由  安东Malishev，  呵呵卡罗拉  03.  废物不包括厨房-品牌打造的  尝试和真正的DESIG ň04  家，甜蜜的寿司儿童  通过  精明的机构，  马里亚纳星火  05.  Cerveza塔Maleante通过  Antonay 

6.3留白

极简主义是设计的基本原则，而今天它又是新事物。它放弃了设计中不需要的所有内容，并用负空间代替了它。这种趋势将功能带到了最前沿，并专注于简洁的设计，使版式脱颖而出。

01.  香味精油 由Y u型简林，  黄恶嗯-祥  ，  智泰莲 02.  重塑品牌理念，为BodriPincészet由  克里斯托夫Gáthi

6.4单色和两种颜色

首先，在调色板中仅使用1或2个色调似乎有些限制，但它们可以创建非常强烈的视觉识别感。仅使用一种或两种颜色，就可以保持简约的外观，放弃所有多余的东西。结果是精美，高雅的产品令人赏心悦目。

01. Zerbet冰糕由  才林贾尔斯  02.  贝利啤酒  由  埃德大厅 悉尼，  叶卡捷琳娜Leontyeva ，  波阿斯孙

6.5大胆的颜色

大胆的颜色和渐变仍然是非常强烈的趋势，这种趋势将在2020年持续。使用这些颜色，您可以创建令人难忘的产品。

01.  极简主义和享乐主义：Fabula Branding 重新设计了  千年品牌

02  纹身商城  通过  Openmint工作室，  叶卡捷琳娜Teterkino ，  烟，  叶戈尔Kumachov 

03.  Organic  by  Larissa Kendrik 和  加布里埃尔· 沙茨曼

04.  VIZOU -老花眼镜  的  工作室开头语，  阿克塞尔杜马克 

05.  包装的调味开心果由  米拉Katagarova

6.6注意细节（受新艺术风格启发）

注重细节的包装比以往任何时候都更受欢迎。设计师选择这种趋势是因为它赋予了产品真实性。这种趋势使我们以现代方式思考经典。 

01.  HYWILDE由  查德·迈克尔·工作室  02  AMSTEL KARGO IPA通过  卡帕罗设计船员

03.  大岛咖啡烘焙-咖啡咬伤的  农场设计

6.7包装中的讲故事

到2020年，品牌将不得不重新考虑其产品和包装。品牌必须讲述一个故事，以帮助客户体验产品的本质。这可以通过为包装创建视觉和叙述身份来实现。

01.  喙接通过  骨干品牌推广   02.  Colorea用t  骨干品牌

7.版式

7.1粗体印刷

粗体印刷术是设计中的重要趋势，它取代了图像作为主要元素。勇敢的排版可以在网页设计和图形设计中发挥作用。

01.  埃里克·林格（Eirik Lyng），作者：  埃里克· 赫斯特雷（ErikHerrström）；  02.  包豪斯（Bauhaus_100）（x3），作者：  BunkerType（JesúsMorentin）

03.  UCCA当代艺术中心北京由  布鲁斯·莫设计（BMD）  ，耶勒马雷夏尔 

7.2小写

越来越多的应用程序使用完全小写的文本，非常易于阅读，并且完美地融入了简约和现代的设计中。在明年，我们绝对必须关注这一趋势。

01.  Autea品牌和网页设计由  米哈尔Markiewicz  02  山大食品公司 CI由  臣藤田/ tegusu公司 03.  Aquality品牌的  哈坎Fidan的

7.3自定义字体 

尽管自定义字体没有什么新意，但我们将看到这种趋势越来越多地出现在设计中，尤其是在徽标和海报中。这种做法在大品牌中更常见，因为生产专用字体可能会非常昂贵，但是设计人员可以对现有字体进行少量调整，结果可能会非常独特。 

01.  Think8全球研究院通过  勃洛克设计  02  ZINEZŐ//设计周期由  芭芭拉·卡托纳 ，  媒体与设计系埃格尔  03.  式设计'19通过  TRÜF创意  04.  Cako字体由  维奥莱纳齐名

7.4动力学排版

就像我们说的那样，动画在设计中无处不在，因此在排版中也很常见。动态字体使用小的和简单的交互作用来移动和移动屏幕上的字体。这种简单的技术可以处理文本并创建最终产品，该产品保留在查看器的内存中。

01和02.  Grafika  ，  Gimmick Studio设计  。03＆04.  增强现实与动作排版，作者：  Alex Slobzheninov

7.5堆叠字体 

堆叠文本可能是一种现代化的解决方案，可以吸引您注意基本信息。我们可以在网页设计，应用程序设计和图形设计中看到这种趋势。

01.  L'嗡通过  Atipus巴塞罗那  02  期刊由  杰玛马奥尼  03.  海报收藏| VOL.8由  罗马发表  04. SMLXL由  梅丽莎Baillache，  垫新郎，  杰森·利特尔

8.趋势工具

8.1 Adobe Spark

Adobe Spark是Adobe Systems  开发的  用于移动和Web的媒体创建应用程序的集成套件  。[1]  它包含三个独立的设计应用程序：  Spark Page，  Spark Post和  Spark Video。（来源：WIkipedia） 

他的免费Adobe Spark Web应用程序可与Spark Page，Spark Post和Spark Video  iOS移动应用程序同步  ，从而使用户可以从任何设备创建，编辑和共享其视觉故事。

[3]  这三个设计应用程序允许用户创建和设计可用于企业，教育，社交媒体营销人员等的视觉内容。[4]  Spark Gallery突出显示了使用该应用程序的人们所做的不同项目。使用这三个应用程序时，用户可以导入图片或搜索图片。

8.2繁殖

 Procreate是 由Savage Interactive针对iOS开发和发布的   用于  数字绘画的  光栅图形编辑器 应用程序。针对iPad的艺术可能性而设计  ，并且适合从初学者到专业人士的艺术家。

 它提供130多种逼真的画笔，多层，  混合模式，  蒙版，   过程视频的4K分辨率导出  ，  自动保存以及许多其他经典和原始的  数字艺术  工具。除光栅图形外，该软件的编辑和渲染文本和矢量图形能力有限  。（来源：Wikipedia）Procreate是2018年App Store上最畅销的应用程序。

8.3 Adobe XD

Adobe XD是  由Adobe Inc开发和发布的   用于  Web应用程序  和  移动应用程序的基于矢量的 用户体验设计工具。它适用于  macOS  和  Windows，尽管有适用于iOS  和  Android的版本   可帮助直接在移动设备上预览工作结果。XD支持  网站线框图，并创建简单的交互式点击型原型。（来源：维基百科）

作者授权

总结

每一年每一个时间段都会有新的趋势，学会的辩证的眼光去看待便是最大的智慧。世界一直都在变，趋势也是。保持学习和探索的心不变就是对自己热爱的事情最好的回应，念念不忘，必有回响。共勉！

文章来源：站酷-木七翻译整理

作为交互设计师，你一定经常苦恼你的界面该怎么达到「简约而不简单」，该通过什么样的形式、功能、才能让用户获取「更好的体验」。

真正的简单并不意味着最少化，朴素的设计仍然具有自身的特征和个性。简单的特征和个性应该是源自你使用的方式，所要表现的产品，以及用户执行的任务。交互式设计 4 策略告诉你如何通过简化设计获得更好的用户体验。

交互式设计的简约 4 策略：删除、组织、隐藏、转移。

上述4策略既适用于简化功能，也适用于简化内容。而且无论项目大小，是整个网站还是一个页面，这4个策略都同样适用。你可以根据要解决的问题从中选择正确的策略。

删除

删除杂乱的特性可以让设计师专注于把有限的重要问题解决好，而且也有助于用户心无旁骛的完成自己的目标。

组织

组织往往是简化设计最快捷的方式。

隐藏

隐藏部分功能是一种低成本的简约方案，但是，哪些功能该隐藏呢？

转移

把合适的功能转移到合适的设备上。

用一句话来总结交互式 4 策略：

删除不必要的，组织要提供的，隐藏非核心的，转移可转移的。

运用恰当了一定可以使你的设计更出彩。

对于以上内容想了解更详细的读者可以阅读

在手机app应用中各种格式的弹窗效果相信大家都看过，也可能反感过某些弹窗，本文就来谈谈关于app弹窗设计以及弹窗的适用情景。

一. 弹窗的定义

1. 弹窗作用

弹窗是为了让用户回应，需要用户与之交互的窗口。

非模态弹窗一般被设计成用来告诉用户信息内容，而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。

2. 模态弹窗

会打断用户的操作行为，强制用户必须进行操作，否则不可以进行其他操作。

（Alerts／dialog，Actionbar，Popover）

3. 非模态弹窗

不会影响用户操作，用户可以不与回应，通常有时间限制，出现一段时间就会自动消失。

（Toast/HUD，Snackbar）

二. 弹窗分类

以下将以各类弹窗的含义、作用、适用来进行浅析。

1. Alerts/Dialog：警告框与对话框

含义：英文意为警告、对话，跟弹窗属性非常吻合，就是紧急状况，打扰用户的行为。

剖析：iOS中警告框称之为Alerts，作用是用来传达重要信息，并伴随着需要用户进行操作。

iOS规范中，警告框包含的元素如下：标题（必选）、描述信息（可选）、输入框（可选）、按钮（必选）。

必须包含标题、包含一个或多个按钮。

Android规范中，弹窗交互按钮需结合实际情况，不用「是/否」原则进行设计。

作用：告知用户当前发生的状况，让用户主动选择回应。

适用：重要性较高的操作时，如退出、删除、清空等。

2. Actionbar（Sheets、Acitivity View）：操作栏、操作列表、活动视图

含义：英译为工具栏、操作栏。

剖析：当用户激发一个操作的时候，出现此窗口。

一般会给用户提供更多的功能选择，一般可采用官方控件。

一般都设计有一个默认的「取消」按钮，点击取消可以关闭弹窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用户触发、包含两个或以上的按钮。

△ 以上为今日头条、iOS系统相册

作用：操作列表提供一系列在当前情景下可以完成当前任务的操作，而这样的形式不会永久占用页面UI的空间。

适用：如分享功能。

3. Popover/Popup：浮出框/浮层弹窗

含义：英意为弹出窗口，浮动于顶层窗口，气泡。

△ 以上为微博、qq、微信

剖析：当用户点击某个控件或者某个区域时浮出的半透明或者不透明的弹窗窗口。

不会对用户所在位置进行跳转。

作用：可以在当前页面进行更多的操作行为，显示/隐藏页面中的折叠信息。

适用：首页位置呈现一些常用操作的快捷入口。

4. Toast/HUD：提示框（iOS没有Toast，只有HUD）

含义：Toast也被称为吐司提示，Toast是安卓系统的一个控件名词，现也应用于iOS系统中。

剖析：提示框属于一种轻量级的弹窗反馈形式，常以小弹框的形式出现，持续1-2秒自动消失，可以出现在屏幕任意位置，但是建议同一款产品尽量使用相同位置，让用户产生统一认知，成为习惯。

提示信息能给予用户及时反馈，确保用户知晓自己所处的状态，并可以做出相应的措施。

iOS用户更习惯于在顶部感知反馈信息，不干扰用户浏览主体内容。Toast出现在屏幕顶部不会遮挡主体内容。（如花瓣、有道云笔记）

Android正统的规范中Toast：

• 出现在屏幕底部。
• 只能放文字不能带图标，文字要精简不宜太长。
• 不是模态的，可以通过Toast对其他控件进行操作。
• 短时间后会自动消失。
• 不能对Toast进行交互。
• 优先适用于系统提示，不能手动操作让Toast主动消失。

△ 以上为今日头条、微博、即刻

HUD与Toast的区别：

• HUD只出现在屏幕的中央，Toast则在底部。
• HUD可以包含icon，Toast只能纯文字。
• HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明。
• HUD中内容可以变化（如调节音量时），Toast中内容不可变化。

△ iOS音量调节

优点：

• 占用屏幕空间小。
• 不会打断用户操作。
• 使用简单，适用范围广。

缺点：

• 出现时间短，在碎片化时代注意力不集中容易错过Toast提示。
• 遮盖其他控件，但不能对Toast进行交互。

适用：提示不需要的反馈信息，如刷新后的成功状态。

5. Snackbar：底部弹窗

Android特有的交互形式，在Google的MD规范中，将Toast和Snackbars归为一类。有些时候也有应用在iOS系统中，也可以理解为加强版的Toast。

含义：英译为快餐、小吃。

剖析：Snackbars与toast一样是从屏幕底部向上出现，但是Snackbar不同的是可以经过用户进行其他操作而消失。

适用：较多适用于撤销操作。

三. 总结

通过分析和了解弹窗的类别、适用范围，才能更好的在设计中进行优化与改变。用户体验设计的重点，是一步步了解用户，然后设计出适合用户体验，满足用户心理需求的产品。把握好弹框设计规范，避免弹框设计的误区，能更好的帮助你完善产品。

但是，没有十全十美的产品，所以要根据设计趋势与用户需求不断地进行更新迭代，通过用户反馈，不断地改良产品体验，才是做出优秀产品的前提。

Sandy现任阿里影业—淘票票体验设计专家，2015年加入阿里巴巴，深耕B端行业产品，服务于电影产业链中的投资、宣发等角色。2017年起接触C端用户产品，推行价值导向和问题导向。2019年开始实践线上线下全链路设计。

 

活动笔记：

阿里影业的服务涉及的面很广，涉及到b端与c端全流程的体验服务，包括面对片方的制作和宣发、发行、乃至面向用户的售卖与放映，在每个节点都有涉及。而淘票票，经历了四年的产品迭代，以一年一个版本的速度的进行优化。15年的理念是做一个好用的购票工具，16年新增了营销，17年加强营销，18年新赛道探索。到了2019年，改版应该进行新的思考：怎样做？做什么？怎么做？做对了吗？

此次淘票票9.0版本是根据用户现有的习惯与市场的变化，由设计师发起的一次自下而上推进的改版。以下是淘票票9.0的设计策略与设计目标：

1. 内容设计赋能
   新服务，扩展观影决策节点，帮助用户发现好电影。
2. 购票流程体验打磨
   新体验，解读用户行为，体验走查，打磨核心购票链路体验。
3. 年轻化
   新用户，关注用户群体的变化，搜索年轻用户群的品牌认知，提升年轻用户满意度。

接下来将对三点设计策略进行逐一的讲解。

 

1. 新服务—内容的赋能

根据内容类型和场景进行划分，结合内容特点和用户喜好，打造全场景运营，例如提供影讯、通稿、片单、榜单、热点、解读、文章和活动等等多元化内容。通过提供不同的内容展现给用户，将内容进行解构、把触达的场景进行细化、优化设计的表达，从而达到帮助用户可以更好的理解电影的目的。

 

2. 新体验—打磨购票流程的体验设计

设计前，首先应当熟知两种设计思维导向：

• A.当设计目标是帮助企业完成商业目标时，是以价值为导向。
• B.当设计目标是为了提升用户体验，则是以思维为导向、问题为导向。

而这次9.0淘票票改版采用的是以问题为导向，期间经历了五个流程：

2.1 找问题

首先出去找问题，找问题的方法有很多，如：用户研究、定性、定量、业务数据和体验走查，收集业务、用户、客满不同视角的疑似问题。

• 会通过支付宝、淘宝、百度糯米来比较价格高低，对比价格需要反复推出
• 进入不同的影院和场次，不太方便
• 希望看过的电影能够产生一些纪念价值
• 不清楚80元和40元的座位有什么区别
• 不明确片尾是否有彩蛋
• 购票平台的评分对自己没有参考价值
• 电影院的地址、停车场是否免费等信息不够准确
• 买完票到取票之间，需要反复确认订单信息、分享订单信息，但是订单入口
• 藏得有些深
• …

2.2 看现象

找完问题之后，基于数据的支撑，去看用户有哪些习惯的变化，看到目前的现象后再进行数据解读。

• 影院页和选座页返回率高
• 越来越多的用户购买当日的电影票
• 多数用户选择更短的买票路径
• 大多数用户去过的电影院在3家以内
• …

2.3 定位问题

基于使用场景和使用效率，进一步定位问题所在。

2.4 分析原因

分析出症结，以便推进最终的解题环节。

• 症结1：平台服务与用户决策心理脱节
  现有的流程是线状的：选影片-选影院-选场次-选座-下单。但是用户实际的心理决策是网状的，用户可能在选时间的时候考虑影评好不好，会在选场次的时候考虑价格是不是合理的。
  
• 症结2：认知过载
  理想状态是在传达信息后，在用户感知、接收和决策后，希望得到用户方的正反馈，但是现实往往是用户认为认知负担过重，反馈失效的情况。其中信息传达、颜色的设置最直观的感受是“乱”。决策流程上最直观的感受是“打扰”，提醒用户是否确定要买某时候的票、提醒用户确定退出选座页不保留刚才选的座位，所有的提示的设计，都是采用一种打扰的方式进行询问的。
  

 

2.5 解题

解题1：场景化探索。

以解决问题为目标，达到优化用户体验的目的，对场景进行预判、探索，把场景分为三个典型的场景：

• 典型场景1：短时决策–例如距离开场时间较短，对价格不敏感，希望找到距离合适的影院，快速完成购票决定。
• 典型场景2：追求体验–对影厅的要求较高，希望找到放映效果最好的影厅。
• 典型场景3：价格敏感–找到符合自己价格预期的影院。

解决：针对第一种场景，选坐页可以快速找到选场次的功能，淘票票提供常去影院、附近影院的选择，减少用户决策时间。针对第二种场景，部分观影者不知道价格更高的IMAX厅、杜比厅的观影效果，价格比普通厅贵了50块钱，那么这个钱值在哪？淘票票使用视觉映射和科普的手段，例如当点击进入杜比厅后，下拉可以呼出信息，了解相关的影厅，给予科普；而且界面设计不同，更贵的影厅视觉效果好，界面上也提供用户更强的视觉冲击。

 

解题2：用户视角信息重构，进行信息降噪，减少认知负担

认知负担=信息呈现类型x信息量

以上公式可以看出，假设设认知负担为定值，当信息量增多的时候，需要减少信息呈现类型，适当进行信息降噪与信息结构化。降噪是把想要突出的信息更加突出；信息结构化是把同类型的信息以结构化的呈现出来，让用户自然对信息产生亲密性。

对于信息传达，改变之前比较打扰的提示弹窗，现在淘票票会把所有信息都放在页面中，用一种更轻量的方式提示用户，不再打扰用户。信息重构则是把需要用户确认的信息放在最头部，例如退票、改票，其次界面罗列的是优惠信息，最后才是影城卡营销和卖小食的信息区域。新旧改版对比图很好呈现出淘票票有效减少认知负担所做的优化。

 

3. 新用户—提升年轻用户群对品牌认知

基于调研，淘票票的用户群体趋近年轻化。改版中所制作情绪版、图标、元素、字号、空间结构等视觉语言，注重和品牌元素的结合，产生出新的视觉语言与品牌形象，从而更加贴近年轻人的心理与喜好。

 

4. 体验度量

根据heart模型进行设置，选出适合9.0版本的衡量维度：S，T，A。以体验目标出发，符合业务目标进行探索。不一样的体验目标使用不一样的度量方法。对于内容而言，需要衡量的是用户的接受度，用户需要看到它，接受它，并且需要知道用户是否觉得有用。而对于核心购票流程，该流程则是比较偏向工具，度量方式则是任务完成度、完成任务时所花费的时长、信息有没有被有效的传达给用户等来衡量的。最后对于视觉方向，用户的想法会比较主观，通过满意度和推荐度来衡量。

 

 

 

现场问答：

提问者1：观影者通常会在朋友圈、豆瓣和推荐来决定要看的影片，基本不会在淘票票上寻找值得看的影片，为什么淘票票会做这方面的探索？为什么要做内容决策这件事？

回答：从想看电影到下单的过程哪个地方淘票票是没有做好的、做到的，根据定性调研，发现一半以上用户都不会在淘票票上进行决策。但是淘票票还是希望尝试一下，希望用户可以在淘票票上完成完整的购票观影体验。从数据显示，用户心智还是不好但是有一些提升。而且豆瓣经历了10年从pc到app，保留了用户的历史等数据，没有办法让用户直接转到淘票票进行观影决策，这也不是淘票票希望看到的。淘票票也希望可以和竞品和合作方去提升观影决策，达到共赢的目的。

 

提问者2：淘票票改版之后，有一个衡量它的改版效果S、T、A的度，有没有考虑要做NPS？

回答：淘票票一直有在做，从这次改版之后来，淘票票所有用户群指标提升了应该有五个百分点，然后年轻用户的百分点在八个以上。NPS是一个非常关键的衡量用户满意度的指标。

追问：NPS是不是适合淘票票这个产品？还是适合于所以互联网产品？

回答：NPS在集团内它的重视度是很高，基本上阿里系所有的产品都会有指标。

 

提问者3：我之前是淘票票的用户，曾经用过淘票票做观影决策，看下面的电影评价，结果发现电影评价是虚高的，就是说其实电影没有那么好，但是评论会倾向性的选择一个好的评论放在下面，经过这次经验之后，就再也不用淘票票作为观影决策了。想了解现在淘票票的评论机制，它是怎么个呈现的方式？是不是会优先选择就是比较好的评论放在首评？或者是有一些什么样的计算方式？另一方面对于现在的评论失真的这种情况，有没有想到一些改进的措施？是最近有没有做过一些改版之类的，就是关于这种内容方面的？除了刚才讲的那些界面，视觉方面的，想了解内容方面有没有一些提升？

回答：第一点，用户群的不同。对于影评这个来决策，淘票票可能跟豆瓣用户群有非常大的差异，豆瓣是影迷聚集地，爱电影这帮人的一个粉丝聚集地，圈子比较小，想要进入这个圈子有一定的成本。但是像淘票票它服务的是大众场景，服务的有外卖小哥，也有大城市去打工的用户，也有三四线在国企里那种的员工，淘票票服务的用户是大众的，所以对于评分虚高这件事，不是说它好或者不好，也就是不能单纯的绝对说好还是不好，可能大众的心智就是这样的。用户不像一个资深影迷，看到速度与激情会认为是大烂片，可能反而觉得好，非常值得去看。第二点，关于这种影评的一个分发策略涉及到产品策略，不是很方便讲。但是淘票票在这方面一直有优化的，并且现在也是在持续优化，希望影评可以真正为用户去提供这个观影决策。第三点，淘票票的用户其实不只是c端用户，它还有还有影院还有片方，但是水军应该不会有，至少淘票票平台是非常不鼓励这种情况，而且会有一定的反作弊、返水的机制。

 

提问者4：因为是以设计推动的一次改版，想了解一下推动的过程？第一就是因为平时改版都是产品的来做的，那这一次由设计来去推动的话，那设计跟产品之间的这个协作关系是什么样的？然后改版历时半年，是淘票票的设计历程中是常态吗？如果不是的话，平常的这个改版的节奏是什么样的？

回答：第一点，设计要不断的去跟产品、运营沟通，去跟不同角色沟通，沟通可能是最重要的一点。当所有人都达成共识了，确实有这样的问题需要改，那全部门所有人就会去团结，去把这个事情搞出来。搞出来之后再去向上一层一层的去向上汇报。汇报的可能要经过很多轮，不断有反馈的意见下来，因为本身视角输入的也不够全，接受到的声音也没有上游接触的多，所以团队会去接受意见，然后重新的进行。一轮review下来大概三四个月的时间，然后再去跟开发团队沟通为什么要去升级设计语言，怎么样去帮开发提效？怎么在下一次10.0改版的时候更容易。第二点，团队第一次历时半年进行改版，之前没有停下脚步来去深耕用户体验，所以有一些坑或者一些弯路。平常的改版中基本上是两周发一个版本，非常小步快跑的。对于设计如何跟产品团队去协作？刚刚也有讲过，达成共识之后，然后把这个事儿做起来，提需求、进版本，从需求池里评估需求优先级进版本。交互设计跟产品经理这个角色没有绝对的一个边界，可能都是去不断的去触碰，只要去配合合作的好，把这个产品去做出来，不用管处在一个什么样的一个岗位。

 

提问者5：最开始的时候有问到淘票票和猫眼之间的一些对比，想了解在改版完之后和平时的工作中，是怎么会去了解和竞品？怎么去比较？有没有一些关注的量化的一些指标？

回答：不管服务于什么样的产品，都会做竞品调研。会关注市场的变化、竞品的变化。对于设计团队来说，其实主要的是关注的是用户行为、功能和视觉界面。包括上了哪些个新的功能？在不同的渠道是怎么样去运作的？运营思维是什么样子的？淘票票团队有在研究竞品，有在做竞品的一个分析，衡量的指标也主要是满意度、推荐度，因为没有办法去看竞品的数据，只能通过用户反馈去看竞品跟淘票票的差距。

 文章来源:uxren

有些产品经理会陷入这种误区——需求评审做完了，自己就可以放羊不管了。而本文则认为需求评审完，产品经理还要做这六件事。

需求评审完，产品经理还要干的6件事

1. 确认需求评审的遗留问题并同步各方

2. 制定详细&责任到人的项目计划

3. 完成文案设计

4. 按照项目计划，协同各方，往前推进，关键环节必须与各方确认。关键环节包括：

• 1）交互评审
• 2）视觉评审
• 3）推进联调进度
• 4）推进测试进度
• 5）项目showcase
• 6）项目发布

5. 准备项目review

6. 开始下个需求的方案设计和需求文档准备

这六件事具体怎么做？

产品经理A：需求终于评审完了。有种放飞的感觉，可以休假，去浪了！

产品经理B：你说真的吗？为什么我评审完，还一直在被开发、测试、法务、财务穷追不舍？

产品经理C：你说真的吗？为什么我评审完，从来都是我在穷追不舍开发、测试、法务、财务？

产品经理D：你们开玩笑的吧？就我这么惨！我不但要紧追不舍开发、法务、测试、法务、财务，还要被老板、被客户穷追不舍。

产品经理A、B、C：哥们，来讲讲，最喜欢听惨兮兮的故事了。你的伤痛最能抚平我的内心。

产品经理D：好吧。需求评审只讲清楚了产品的骨架、细节，让各方开始投资源。评审完，产品经理还有一堆事要推进，没法放羊。

要跟的事情主要有下面6件：

1. 确认需求评审的遗留问题并同步各方

需求评审总有一些遗留问题要进一步确认，而后同步给各方。我不是圣人，有时候有些问题或者细节没想到，评审的时候，大家提出来了，得赶快明确。

有时候需求评审中还有很大的bug没想到，必须快速解决，要在开发没动工前，都捋顺。要不然变成需求变更，或者上线后被推倒重来，欲哭无泪。

我这种求生欲这么强，也没人罩着的，必须狠命把需求做到95分以上。100分也不太敢说，毕竟众口难调。

2. 制定详细&责任到人的项目计划

产品经理还得身兼项目管理，项目管理从来都是事有轻重、事无巨细，难以假手他人。虽然我会尽可能调动大家的积极性，让大家自驱管理项目，但还得牵扯不少精力。

项目管理的关键点：明确项目计划、关键节点、每个关键节点的负责人、验收方案。

比如什么时候交互评审、视觉评审、联调、showcase、发布？分别是谁主要牵头负责，哪些人需要参与。

为了防止项目延期，每个节点都还得提前赶。真是操碎了心。

3. 完成文案设计

文案从来不是随便写写。文案是和客户交流的重要途径，整几个客户看不懂的文案上去，后面客户咨询搞死人！

文案设计除了客户视角之外，也不是自己想怎么写就怎么写，还要和法务、客服团队沟通。因为文案被客户投诉的案例，又不是没有。

还有啊，我的产品有3种语言，简体中文、繁体中文、英文，虽然每种语言有专门的文案设计师，但得跟他们说清楚，也要花不少时间、精力。

当然，也有很多产品经理，不管文案这种小事。可我觉得文案体现了产品经理最基本的素养，是产品的底子。

4. 按照项目计划，协同各方，往前推进，关键环节必须确认

关键环节有6个：

1）交互评审

一般来说会由交互设计师发起，开发、测试、法务、财务都要参与。

这样能保证大家在说同一件事情，避免我要的是头牛，结果开发给了头驴。

如果设计师项目参与度低，交互评审还得我自己上。哪里缺人，我就得到哪补坑。

2）视觉评审

一般来说，交互和视觉评审会一起。

有时候项目很复杂，或者交互、视觉分工明确，那就得分开了。

通常由视觉设计师发起。同样，如果视觉设计师参与度低的话，我还是得补坑。

3）推进联调进度

联调是很容易扯皮的环节，大家来自不同域、不同职能团队，各有各的小九九，所以得盯着，避免联调成为坑王。

4）推进测试进度

进入到测试就意味着开发的七七八八了，当然有时候为了压缩项目周期，开发、测试会阶段性并行。

除了测试进度，还得关注测试发现的问题，可能开发还得返工，也可能会发现需求评审中大家都没有注意到的问题，得及时补救。

5）showcase

Showcase，说白了就是项目验收。

验收前，得先列出来要验收哪些内容，主流程、分支流程、逆向流程、重大关键节点。Showcase，也有可能发现新的问题，但基本上要避免在showcase环节发现重大问题，不然就得重大需求变更了。

showcase有时候由测试主导，有时候没资源，我得自己上。

6）项目发布

如果一路顺利，就该发布项目了。

项目发布计划虽然也是之前就定好的，但要考虑的方方面面也还挺多的，可以看之前的文章《项目发布要考虑的因素》。

总而言之，要和各方沟通好，要保证项目顺利发布呦。

5. 准备项目review

项目终于上线了，可我得天天得看客户反馈，看数据，跟客户聊，跟业务聊，准备复盘review。

产品狗似乎永远都在准备复盘、复盘中、复盘后反思的路上。

6. 开始下个需求的方案设计和需求文档

项目通常是并行的。在需求评审完后，我已经开始下一个需求的研究、设计了。

开发资源从上一个需求释放出来的时候，产品经理肯定得把下一个需求方案设计好，开始新的需求评审，妥妥的做好资源衔接。资源一旦释放出来，下次想要资源，难上加难啊。

产品也需要持续迭代，让客户感受到，我们的产品在成长、进步，给人希望。

文章来源：人人都是产品经理

目录页主要出现在一些篇幅比较长的书籍（画册）中，其位置一般被安排在扉页之后，目录虽然不是正文，却概括了一本书的所有内容，具有便于读者快速了解及查阅书本内容的作用，所以，即使说目录页是一本书中最重要的页面也不为过。

既然如此，那么目录页的设计自然也是十分重要，于是乎，葱爷整理了 8 个很不错的目录设计技巧分享给大家。

直线排版

直线在目录设计中的作用主要有以下三个。

1. 连接

即把每节内容的标题与其对应的页码连起来，这是比较常规的一种做法，可以使目录更加清晰，重复排列的线条会形成统一、规整的美感。采用这种排版方式时，标题与页码一般会设置成两端对齐，这样的效果更加整洁、清晰。

2. 创造形式

对于一些文字内容比较少的目录页，如果像上面的例子一样排列会显得比较单调和小气，所以可以借助直线来增加其趣味性和张力。由于内容不多，所以即使不严格对齐也不会影响阅读。

3. 信息区隔

比如在下图的例子中，直线起到了两个信息区隔的作用，一是区隔页码与大标题；二是使七个大章节的内容独立开来。

加图片

这种形式也适合内容比较少的目录页，当有了图片后，目录页似乎也变成了一个内页版面，更加丰富、饱满。图片在目录设计中主要有两个用法。

1. 概括章节的主要内容

其功能与标题一样，所以如果要使用这种方式，那么就需要为目录中的每个大标题都搭配对应的图片。

2. 装饰

这里的图片不是与标题一一对应的，其目的是为了消除纯文字目录的单调感，使版面更丰富、更好看。

格子排版

即将目录中的元素（页码、标题、图片）用表格的形式来排列，这么做也可以使信息更加清晰，更有秩序。由于这种做法在目录设计中并不常见，所以显得很特别。

大页码

页码或者序号是目录页必不可少的元素，章节细分比较多的目录都会标明页码，而分类比较少的目录一般会采用序列号，用来区分几个大板块。把页码或序号拉大并使用笔画比较粗的字体，除了可以使其更明了、醒目以外，还可以增加版面的大小对比，提升设计感。

把页码裁切一下，会更有设计感。

分栏排版

即把文字信息竖向等分成两份或两份以上，适用于文字比较多的版面，所以如果目录页的内容比较多时也适合分栏排版。由于每一栏的内容都严格对齐，且页码比较大，所以栏与栏之间即使错位排列也不会影响阅读。

除了文字还可以用图片来分栏。

轴排版

即把目录信息沿着某条轴排列，这种形式在目录设计中也比较少见，适用于内容比较少的目录页。轴的形式一般为竖轴和横轴，排列的形式通常为错位排版。

上图并不是以线为轴，而是以图片和色块为轴。

网格排版

我们都知道网格系统是画册设计的常用工具，可以有效组织版面信息，使其更有序、更整洁，所以内容比较多的目录页也可以用网格系统来排版，为了避免单调和无趣，通常会加入图片元素。

留白

如果目录的文字比较少，版面就容易显得很空、很单调，常见的做法是增加图片或者把文字拉大，其实主动保留大量空白也是一种解决办法，比如把内容集中排列在版面的顶部、底部、左下角、右下角等位置，留出其他位置的空白。这么处理的版面虽然有一种不平衡感，但动感和设计感更强，大面积的留白还可以适当缓解眼睛的疲劳。

总结

无论做什么设计我们都要以它的最终目的为设计准则，由于目录是为了方便浏览和查阅书本内容，所以设计时一定要注意视觉的整洁与信息的清晰，所以可以发现对齐和统一是最常被用到的两个技巧。

如果经常听评片会，许多朋友会听过这样一句话：「这样拍会显得画面更有张力……」就摄影而言，我们认为张力，是让一幅摄影作品在视觉上出效果的重要「内力」。此外「张力」还被广泛应用在点评一段演唱，一幅画，一次表演……我们都似乎能感受「张力」的意境，却又似乎不能参透它的意思。

如何理解「张力」？如何借此来提高我们的摄影感悟？下面我就试着做个粗浅的分析吧。

追根溯源：「张力」到底是什么？

关于「张力」有很多略显深奥的解释。我认为下面这种解释较为通俗，同时与摄影有一些关联：

互补物、相反物和对立物之间的冲突或摩擦。……一般而论，凡是存在着对立而又相互联系的力量、冲动或意义的地方，都存在着张力。（转引自杨果〈隐藏的视点：中西「张力」范畴再辨〉，《江汉学术》，2013年10月）

尽管这段话不是针对摄影，甚至不是针对视觉艺术而写的，但是却很好的解释了张力一词。「张力」（tension）由「内涵」（intension）和「外延」（extension）二词而来。其实它在物理学上的意思便是其在美学上的意义的绝佳比喻。

那么我们便可以粗浅感受一下「张力」在一张照片（或者说任何一种视觉艺术）中表达的是什么了：它通常表示了一幅照片对立而又统一的相互作用，这种作用通常产生紧张感、拉扯感，产生一种繁复的韵味。力的暗示、不平衡、断裂、突发等效果都属于张力范畴。

举个极其通俗的例子，如果我要用图片表达「跨栏」。

这张「没有张力」，因为常规、平衡、稳定：

这张「有张力」，因为夸张，不平衡：

当我们在谈论「张力」的时候，我们在谈论什么？

当我们说一张照片的「张力」的时候，更多表达的是照片给我们带来的主观感受。通常情况下，一张「有张力」的照片背后蕴含着以下的特质。

1. 拉扯感

即我们可以感觉到「力量的存在」，似乎被某种力量拉扯着。哇，这是再直白不过的张力了。

以拍街头行人为例，「奔跑」「转向」或其他肢体较为夸张的动作和表情通常能让我们体会到力量。人的潜意识总是会倾向于，试着让一些看起来没有达到稳态的东西趋向于达到稳态，夸张的动作同时也暗示着那些行人「将要跨出下一步」「将要转过去」「将会拉扯肌肉」等等。

△ 韩松 / 摄 iPhone 7p， 莫斯科。奔跑的人。

△ 韩松 / 摄 iPhone 6， 马尔丁，孩子的表情较为夸张，能感受到肌肉的拉扯，画面感染力较强。

△ 韩松 / 摄 iPhone 6， 马尔丁。同样是人物照，这张就画面张力略显单薄。

而另一种拉扯感来自所拍摄的元素的形态本身。例如夕阳下被拉长的影子，具有纵深感的空间，夸张尖锐的几何形态等。它们都会让我们有被拖拽、被虹吸、被缠绕等感觉。

△ 韩松 / 摄 iPhone 7p， 布达佩斯。影子。

2. 冲突

制造各种对比与冲突。

例如强烈的色相对比，阴影和高光的高调对比等等。这无疑用画面的色彩击中我们的眼球。

再如一切能造成冲击力的题材冲突：如抽象和具象，虚幻和真实，细腻与粗糙，动态与静态等等。

△ 韩松 / 摄 iPhone 6， 香港。红衣人物和绿色墙面的「撞色」。

△ 韩松 / 摄 iPhone 6， 里斯本。行人和影子。

3. 构图

夸张的构图也能产生张力。

斜线的构图通常更有张力，因为它夸张而强烈。但斜线的构图是需要磨练的，有时候「为了斜线而斜线」会显得矫揉造作（之前的文章我建议大家先从摆正，拍平开始）。

△ 谭凌飞 / 摄 iPhone 6， 萨尔茨堡。斜射的影子让不起眼的场景有了张力。

极度不遵从「三分法」「对称」「平衡」等原则，而又在某种意义上很精妙地构图，有时候也能造成张力。这种构图的本质是打破了平衡感，扰动了我们潜意识里的平衡球。元素的极大和极小的对比，大量留白和极度撑满，以及一些「莫名其妙」的夸张形式，都有可能成为视觉张力的发力点。

△ 韩松 / 摄 iPhone 6s， 北京。

△ 韩松 / 摄 iPhone 7p， 日本高松。「极大」的场景和「极小」的人物，拉开了比例。

△ 韩松 / 摄 iPhone 7p， 巴黎。雕塑和观众的比例和颜色对比形成张力，然而他们的动作又有一些联系。

怎样拍有张力？

1. 手机外置广角或鱼眼镜头

手机定焦镜头较为平和，如果加上外置的广角或鱼眼镜头能够拍一些较有冲击力的照片。广角顾名思义是有很宽广的视角，能够近距离将比较宽的场景元素都拉扯在一起，让斜线、曲线都更为夸张。

2. 勇敢面对那些「不舒服」的素材吧

其实本质还是在于不平衡。拥挤、窥视、抖动、不稳定的、转瞬即逝，这些东西都不太舒服，但又常常因此形成视觉上的动感。拥挤人群中的一瞥，从奇特角度的窥探人物的活动、快速运动的骑车的人，匆匆而过的行人汽车等等，让我们感到有「丝毫不安」，却也预示着「这不是稳态」，是矛盾而拉扯着的。

△ 韩松 / 摄 iPhone 7p， 布拉格。拥挤的人群。

△ 韩松 / 摄 iPhone 7p， 日本奈良。透过吃草的鹿看后面的鹿。

△ 谭凌飞/ 摄 iPhone 6s， 巴黎。差点被遮住的铁塔。

3. 不平衡的构图

自不多说。对角线、夸张的引导线，螺旋线，撑满画面的构图。那些找不到几何中心而又精妙的构图。

△ 韩松 / 摄 iPhone 7p， 日本。螺旋线。

4. 拍摄运动物体

跑步的人，快走的人，跳跃的人，快速通过的车。

△ 韩松 / 摄 iPhone 6s， 伊斯坦布尔。撑伞的人走过。

△ 韩松 / 摄 iPhone 7p， 莫斯科。拉手风琴的人与匆匆而过的行人。

5. 后期

通过调高饱和度等参数强化色相的对比等等。

△ 韩松 / 摄 iPhone 7p， 日本。后期调高了些饱和度，强化了人物和背景的颜色对比。

不得不承认，张力还是一个比较抽象的概念，我们从来不会以「张力」为目的去拍一张照片，更多的时候，我们是无意识地被「有张力」的场景所吸引，也具有从一堆原片中甄选出「有张力的照片」的能力。重要的是会在取景框中通过构图的运用来制造张力的可能性。

文章来源：优设