习惯了一栏式的设计，将屏幕一分为二的设计常常会让用户感到更加新鲜。网页中并排的两栏呈现不同的信息，是分屏式设计的最典型特征，两边的信息可以包含相同类型的元素，可以呈现不同属性的媒体内容，比如一边是图片，一边是文本。

分屏式设计完美的解决了你需要同时呈现两个不同内容的需求，这种UI界面突出了这两项内容的对等地位，让用户自行浏览，或者作出选择。

你会发现，分屏式设计不仅仅是一种逐步流行的页面设计趋势，而且非常实际地解决了需要呈现同等重要内容、让用户选择的设计需求。这种呈现方式看起来原始，但是确实有着明显的优势：

·引起用户对于特定区域的注意力
·创造对比
·非常规式的布局

此外，分屏式设计和响应式框架能够很好的结合起来，这种类型的布局特别适合在桌面端大屏幕和平板电脑上使用，同时还能够在小屏幕上以上下堆叠式的方式呈现出来。

在今天之前，优设也曾预测过分屏式设计的流行：《查漏补缺！极有可能被低估的三种有趣的网页设计趋势》

分屏式设计的最佳选项

当你将屏幕划分为两块的时候，两个区域内的内容的重要性是同等的，这也意味着你可以在这个界面中传达双重重要的概念。处于两个对等区块的元素就像阴阳鱼一样，从视觉到功能上，同等重要，互为补充。

活力四射的配色和趣味十足的排版

得益于扁平化设计和Material Design 在设计领域的大范围普及，色彩和排版成为了目前设计的主要驱动力。鲜艳的色彩带来视觉刺激，而有趣的排版则让文本更有意思，两者的结合能带来颇为值得一看的设计。

色彩和排版的组合

图片和色块的组合

吸引用户注意行为召唤按钮

分屏式设计在视觉设计可以很有张力，这也意味着身为设计师的你同样可以合理地运用留白创造视觉焦点，将用户的注意力吸引到特定的元素上，这也是行为召唤（CTA）按钮的使用原理。

将屏幕视作一个卡片

分屏式设计本质上是从卡片式设计中延伸出来的，而遵循这一设计原理的网站通常都会将屏幕视作为一个卡片，每一屏都是一个容器，每个卡片都承载一个交互和一条信息。

屏幕的左边包含一个卡片，而右边则包含了一对卡片

分屏式设计是自由的，它所包含的左右两大块其实是还可以继续往下细分的，比如下面的Stikwood 这个网站就将右侧的部分划分为更小的区块，用来承载更多的内容，提供更多的信息入口。

小贴士：尽量让你的界面保持简单，即使要分割出更多区块，也尽量不要使用复杂的模式，否则UI界面会看起来很混乱。

构建视觉关联

虽然分屏设计模式让你可以在其中呈现截然不同的元素，但是两个信息容器之间还是有关系和关联的。创建关联的方式很多，色彩是最常用的一种构建联系的方式。通过“共享”最明显的色彩，让两个不同的屏产生联系，产生视觉流。如果这个色彩正好是品牌色的话，效果尤其明显：

Bump 使用品牌色来构建视觉流，让界面和用户产生联系

Marka 也采用了类似的技巧，色彩对比度更加强烈

另外一个值得一提的技巧，是让某个元素横跨两个区块（比如文本），让这个元素来作为两个区块的连接点：

除了文字，你还可以使用色彩叠加来连接两个部分：

这个分屏设计案例中，右侧的屏幕看起来像是左侧屏幕的延伸一样。

使用动效鼓励用户交互

动效越来越多的参与到我们的UI设计和交互中来，使用动效来鼓励用户但与到交互中是非常合理的设计策略。看看下面 Chekhow is Alive 这个网站的设计，设计师通过动效展示不同的角色，与你进行匹配。

结语

分屏式的页面设计非常有趣，功能也足够强大，不过你的内容是否适合用来这么展示？所以，在如此设计之前，建议先问自己几个问：

·分屏式设计是否和你的网站内容相匹配？是否有足够的布局来进行分屏式设计？
·你的用户是否会喜欢这样的布局？
·将用户的注意力一分为二是否合适？

普通应用在起初的三天里每天会流失77%的日活跃用户。

        你肯定不想你的公司发生这样的事情，为获得新用户而投入了众多资源，而大多数用户仅仅在首次访问之后便马上离开了。如何改善这种情况呢？即你需要通过创造完美的访问流程为用户留下非常棒的第一印象。

随着网络传输速度的提升，视频在网页中的应用越来越多，也越来越广泛，带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升，在移动端网页中使用视频也并不显得吃力。所以，今天我们常常能在不同的网页中看到各种不同功用的视频。

常言道一图胜千言，而视频比起图片所能承载的信息量更大。如果能够有效的使用视频，它对于用户的吸引力会非常明显——它可以更好的传递情绪，更加富有表现力，能让用户更容易“感受”到你想要传递的信息。不过，相比于其他元素，视频都比较“重”的媒体，使用的时候要谨慎。

随着大屏幕高清分辨率的普及，我们在打游戏、看电影、浏览美图时，总希望屏幕越大越好，这种视角上广度与深度的享受以及和沉浸式、聚焦的体验，是在小屏幕上完全给予不了的。

图中可以看出5.5英寸以上屏幕可以称Phablet，7英寸以上就是Tablet。这次案例以Tablet设备为主，Phablet设备为辅进行体验设计。

@薛斯塔 ：交互设计师和产品经理的协作问题是产品设计中的一个老大难，我在工作中经常会听到同行对产品经理们的血泪控诉。作为交互设计师，学会和团队中不同的角色协作是我们的专业能力之一，如何沟通、影响乃至于推动自己的设计方案进行实施是每一位设计师需要去磨练的，这不仅仅是那份执着，更是一种技巧。

下面进入译文。

在互联网行业，交互设计师还是一个相对比较新的职位。因此，在工作中我们常常见到产品经理过多介入交互设计师的工作，甚至有的团队直接让产品经理来做交互设计的工作，这是为什么呢？实际上，在互联网发展的早期，这确实是同一个人的工作！产品经理的职能之一就是支持和协助部署交互设计方案，以确保产品的方案可行性。随着互联网的成熟发展和工作职位的细分，交互设计师这个被细分出来的角色被定位出来设计产品的交互方案是威胁到了产品经理的工作范畴。

因此，在日常工作中，产品经理和交互设计师这对冤家是一直在暗中脚力的，交互设计师的方案每每遭到产品经理的质疑甚至是无视，这其中有专业能力层面的合理分歧，当然也夹杂着一些主观层面的感受之争，最终导致的是产品经理经常性的忽视来自体验设计团队的一些方案建议。那么，我们如何才能改善两者之间的合作关系，从而使两者能够客观的协作制定合理的体验设计方案呢？

今天腾讯的@余盼Designer 从色彩构成、色彩联想、情感化设计、秋冬流行色和案例分析等6个方面聊聊色彩在设计中的应用。

@凌霜设计 （Frog Design交互生）： 作为一名交互设计师，如何更好地与项目里的其他人合作？如何更好地利用大家的时间？团队经理用画图的方式跟我解释了一下，有些问题并没有直接的答案，但是我觉得解释的方式很有趣，我凭着记忆把它们重新画了一下，和大家聊聊合作的问题。

今天和我的经理聊了一下最近工作上发生的事：上周做了什么，这周和下周准备要做什么。刚刚结束了设计阶段（Design Sprint）1，和客户开了远程会议，收到了许多的反馈意见，各个方面的都有。

现在项目正处于一种（我觉得）特别尴尬的阶段：视觉设计师只出了初步的几个概念图，程序员还在准备框架，尚未开始写代码，但是根据原先的计划，这周就要开始开发了。作为交互设计师，一方面留着一大堆反馈意见还没有反映到线框图中，另一方面设计阶段2的任务已经要来了。虽然还没有开始设计，但从可能的流程上来看，任务量巨大，是一个特别复杂的系统，不光是设计一个新的交互方式，还是新的工作方式和商业模式，心里真没底。

我把自己的困惑告诉了经理：作为一名交互设计师，如何更好地与项目里的其他人合作？如何更好地利用大家的时间？他用了画图的方式跟我解释了一下，有些问题并没有直接的答案，但是我觉得解释的方式很有趣，我凭着记忆把它们重新画了一下，和大家聊聊合作的问题。

什么是敏捷开发（Agile）

先说一下总体的合作方式，我们用的是敏捷开发（Agile）的方式。维基百科上是这么解释的：

敏捷软件开发（英语：Agile software development），又称敏捷开发，是一种从1990年代开始逐渐引起广泛关注的一些新型软件开发方法，是一种应对快速变化的需求的一种软件开发能力。它们的具体名称、理念、过程、术语都不尽相同，相对于“非敏捷”，更强调程序员团队与业务专家之间的紧密协作、面对面的沟通（认为比书面的文档更有效）、频繁交付新的软件版本、紧凑而自我组织型的团队、能够很好地适应需求变化的代码编写和团队组织方法，也更注重软件开发过程中人的作用。

如果把这种方法简单视觉化一下，就如下图：

长滚动页面和无限滚动式的网页已经彻底流行开来了，甚至可以说它已经脱离趋势，成为了一种常规的设计，它们的流行并不是巧合。当用户向下滚动的时候页面的时候，所需要的内容与信息会自然的呈现出来，在此过程中通常不会涉及到额外的、多余的交互。

长滚动式的页面有着如下的优势：

·更为精简的导航
·更容易呈现故事，拥有吸引用户的潜质
·与移动端设备的良好兼容性

iOS从07年第一代iPhone发布时的iPhone OS，已发展到今天的iOS10，这些年来，iOS从最初的一个简单、粗糙的ROM，发展成现在手机ROM中体验标杆的操作系统。设计风格走过了拟物化，扁平化，今年已发布的iOS10，设计风格也开始偏向卡片式风格，随着新的交互方式3D Touch的加入，开始脱离单调的扁平化设计，卡片式风格让设计语言更加符合用户的操作认知（卡片式的内容，对人有更强的按压操作暗示）。