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

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

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

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

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

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

分屏式设计的最佳选项

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

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

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

色彩和排版的组合

图片和色块的组合

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

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

将屏幕视作一个卡片

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

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

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

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

构建视觉关联

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

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

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

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

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

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

使用动效鼓励用户交互

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

结语

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

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

@飞屋睿UIdesign ：插画具有辅助文字叙事的功能，在书籍、杂志等平面中已然并不罕见，然而由于过去WEB技术发展的原因，网页设计中运用插画的情况却不多见，随着技术提升，插画越来越被网页设计师重视。今天这篇好文总结了网页设计中常见的4种个性插画风格，涨姿势来。

兄弟篇：《趋势丨全方位科普平面设计中的时尚复古风格》

由于优秀的摄影作品可遇不可求，而且并不一定会遇上合适自己使用的样式。专门请了摄影师来拍照如果不集齐适合的模特、布景、道具、灯光……也许结果都未必理想。因此，可以看到，依靠摄影作品作为设计素材是非常受限的，成本相对也高。所以，一个逆向的做法就是依靠插画。我们也许都知道，绘画并不是再现事物原来的样子，而是重新将你眼中的事物表达出来。也许，你表达的笨拙、可爱、轻松、沉重、怪诞……这些个性化十足的表达就成就了插画一眼即可辨识的独特风格。插画对网页设计个性的塑造可谓是功不可没的。况且，插画的成本也比摄影来得更低，效率也许更高，而又比摄影作品更灵活。假如你想要表达出一个虚拟的场景，摄影作品都需要后期合成，而插画却能立即将幻想变为笔下的实在。因此，这也是我大力提倡插画配图的原因。

网页的插画其实无须一定要细节毕现，往往它传递的是一种价值、理念主张，而非具备叙事的规模。

图标是设计项目中几乎必不可少的一个组成部分，但是在图标的具体使用上，讲究并不少。 如果你曾仔细浏览优设的网站，应该已经看过不少图标设计的实战案例。

1、强化视觉

白无常：许多设计师都习惯的把精力放在视觉元素的效果上，而忽视了视觉元素之间的位置关系。如果对设计的构图没有了解，即便是精彩的画面效果也发挥不了作用，甚至会误解了传播的信息。

设计构图的作用

构图过程是设计师从混乱的视觉元素中找到条理性，帮助观者在各个视觉元素之间建立联系，从而有助于他们阅读。设计的构图的作用是为了加强视觉的张力增加设计的趣味性，吸引并引导着观者的注意力。

编者按：Banner 是我们最常聊到的设计元素，它是一个网页的招牌，是用户最容易看到的视觉元素。今天，我们来聊聊Banner中的急先锋，网页首图，它的设计之道。

网页设计师都明白，网页对于用户的第一印象是非常重要的，而网页给用户的第一印象很大程度上取决于网页的视觉设计。现在的网页虽然多种多样，但是出于视觉化设计的目的，大多会使用大图背景，或者超大尺寸的Banner。当用户一打开网页的时候，映入用户眼帘的Banner ，是影响视觉设计的关键因素，它有个专门的术语是 Hero image，我们通常称之为首图。所以，网页首图的设计需要特别用心的。

网页首图不仅仅是一张漂亮的图片，它还应该是强大的视觉传达工具。谈情怀不如讲套路，今天的文章，我们就通过一系列最佳实践来为你展示首图设计的一些设计“套路”。

编者按：从「我的电脑」-「电脑」到现在的「这台电脑」，人称视角的转换会带来什么体验差异呢？这篇文章从3个角度讨论了这个有趣的话题。

如今我们每个人手机里都下载了各式各样的App，每天花费大量的时间去使用和维护，你不仅享受App带来的各种服务和乐趣，还通过它们创建和管理自己的文件内容。

你在互联网上留下大量的记录或内容，是否有想过这些内容是否是“属于”你的？

而越来越多的App开始提供定制化的、拟人化的服务，你和App之间的互动关系有没有变得更像真人之间的交流？

这篇文章讨论了一些有趣的问题：

1）一个产品在其用户界面上应该提供什么样的人称视角？

2）其功能服务和用户之间，是一种怎样的关联？

3）我的收藏 | 你的收藏 | 收藏 | 这三个不同的词组，真的会带来什么体验差异吗？

这篇文章也许并没有给出明确的答案或实践指南，但这个问题却是我们在设计产品及界面时值得一想的。

编者按：做设计久了，设计师很少能够真正站在用户的角度看待网站和APP。今天的文章，我们来聊聊普通用户眼里的设计细节~

设计师对于自己的网站以及APP产品的视角，和用户往往非常的不一样。设计师看到的常常是设计趋势，排版，细节，但是普通用户的关注点则完全不同。

我们应该迎合用户，如果连对的东西都不能坚持，产出物的最终目标就会发生偏离，甚至完全无效。 ——@冯铁

用户更在意的是他们能否快速理解他们的交互对象。至于APP或者网站是如何运作运作的，它们是否让人愉悦，往往被用户所忽略。这是一个相当残酷的现实。

编者按：又是一篇关于扁平化设计的文章，与优设之前的诸多文章不同，今天的文章带有阶段性的总结的性质，文章源自著名设计工作室 Tubik Studio，多图预警~

著名的艺术家 Edgar Degas 曾经说过，艺术并不是你所看到的东西，而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受，在这一点上，它和艺术是共通的。作为目前设计的大趋势，扁平化设计，无疑也具备着同样的特征。

扁平化设计

现如今的扁平化设计并不是单纯的一种风格，而是涵盖了诸多常见风格、具备多种不同目标或任务的一个设计集合体。目前扁平化设计被广泛应用于数字设计领域，并且常常通简约或者极简的视觉表达方式结合起来运用，由于移动端设计风格的演变历程的原因，扁平化设计常常被视作为拟物化设计的对立面。扁平化设计在过去的几年当中经历了积极而快速的发展，目前正“入侵”着越来越多的平面设计领域。今天的扁平化设计已经成了网页和UI设计中的主流设计方向，甚至可以说是我们日常生活中不可或缺的部分，并且开始影响我们生活中的日常决策，并且具备解决各种问题的潜力。

图标是设计项目中几乎必不可少的一个组成部分，但是在图标的具体使用上，讲究并不少。 如果你曾仔细浏览优设的网站，应该已经看过不少图标设计的实战案例。

1、强化视觉

并不是所有的图片都能给用户带来惊艳的感觉，很多时候，图片也不足以撑起整个设计的视觉和形式感。

图标设计是界面设计最重要的组成部分之一，作为UI视觉设计师，这项技能已经是我们必须要掌握的基本技能，那图标设计要遵循什么样的原则呢？这5个图标设计方法都是我实战后总结的，适合新手进阶学习。