分割美学设计,一种新的设计方式中成网站建设

文章详情

分割美学设计,一种新的设计方式

发布时间：2017-07-21 来源：分割美学设计,一种新的设计方式

将一个屏幕分为两个部分的内容——这可能是现在出现的流行设计趋势之一。越来越多的网站设计正在使用包括并排放置的两个垂直或方形面板的设计模式。

这同时是一个具有高标准审美的趋势。外观对于用户来说是友好的，可以适应各种需求，并有助于引导用户。在未来几个月内，我们有可能会看到更多这样的设计。今天我们来看几个分屏幕设计的例子，并提供迷你的案例研究，找出如何充分利用这一设计趋势。

1.分屏设计的3种典型案例

首先，我们先来“脑洞大开”一下，想想为什么你会想把你的设计分成两半？如果你只是把问题提了出来，而没有看到结果，我也可能会质疑。但是，尝试分屏概念有一个很好的例子。

· 对于响应式框架网页设计来说，这是一个不错选择。因为在较大的屏幕上，设计是分裂的，但是当涉及较小的屏幕时，面板可以堆叠。

· 在动画和交互效果方面，它们可以轻松在上面工作，鼓励用户点击。看看上面用于“Chekhow is Alive”网站的游戏网页设计，这种设计让你通过点击查找你的角色（这很难不被吸引）。

· 两个对称的面板内容区可以轻松创建填充式设计的模块化轮廓，并组织块内的内容。卡式设计模式的扩展几乎是一个越来越受欢迎的趋势。

2.为信息的展示创建空间

一屏分割设计是创建内容和图像一起使用的具有挑战性的视觉主题的完美选择，如果你想为呼吁行动的操作创建更大的焦点，也可以采用这一设计趋势。做这项工作的窍门就是保证充足的空间，清晰的排版，并确保分割的风格（在这里的例子中，颜色叠加）可以补充图像。

BAO的网页设计在文字，导航和号召性用途的彩色块后面使用全屏主视觉图像。这种设计是很有意思的，因为它突破了我们已经习惯的一些模式，而且并没有混淆它们。例如，导航（汉堡包菜单）靠近屏幕的中心，主视觉图像只包含一点点的交互动效。

这些东西可以帮助吸引用户来到位于屏幕左侧的号召行动的版块。这个设计的特好处在于，每个屏幕几乎都有一个属于自己感觉的主页，所以可以让用户感觉每个不同的内容都是具有同等权重的，也是同样重要的（不过，这种方式并不适用于每一个项目）。

3.专注于行动

分屏式的网站设计也可以让人联想到打印项目。这对于简单的框架来说非常有效，包括针对用户的明确的行动呼吁。

在Tree That Gives这个网页设计案例中，该网站的目标是通过右下方简单的彩色按钮来鼓励用户捐赠。该图像仅作为访问页面的用户的“着陆点”，但所有重要的内容和信息都位于另一个面板中（这个网站的一半实际上可以独立于内容，但不会像现在在视觉上表现得那么有趣）。

4.大胆的颜色和排版

颜色和排版是所有趋势的驱动因素，这得益于平面和材料设计的重视。结合两者，你最终会有一个简单的视觉审美，但是它并不缺少趣味性和吸引力。

Baesman的网页设计已经通过分屏设计来做到了这一点。页面首先通过两个明亮，大胆的彩色面板直观的展现给用户。通过有趣的悬停状态“扩展”每个面板上的消息，让人感觉像是乞求用户进一步点击探索。字体的选择很简单，但是整体却能让你感觉到足够舒适。

通过点击和浏览该网站，你很容易就能看出，这种分屏概念几乎贯穿于整个网站设计，以帮助创造流程和组织感。尽管其余的设计并不像主页那样完美地分割，但是整个设计中的内容都被组织成面板，而且色彩也是明亮的。

5.创建“卡”

一屏分割设计真的是从卡片式设计衍生的另一流行设计趋势。这些网站中的许多网站包括屏幕一侧的互动，或者是一个容器之后的一个点击哲学，这是卡片式界面的特征。

可以考虑将分屏扩展为多个容器，以便从每个用户获得更多潜在的点击。Si le Soleil在整个网站设计上使用分屏幕，最大的区别是左面板是一个单独的“卡”，右面板包含一组卡。简单的悬停效果提示用户注意到这些元素中的每一个都是可点击的，并且将导致另一个动作。设计干净，组织良好，旨在让用户点击，这个目的就变得很明确了。

6.改变它

虽然我们迄今为止所看到的许多设计都集中在一个明显的左右分界线与元素之间的硬线上，但在实际的设计工作中并不总是如此。你也可以尝试使用其他方式在视觉上分割屏幕。

Warsaw Rising的网站设计简洁、美丽。通过一组文字是将同一个屏幕划分为两块，当是却没有明显表示的界限的“线”。每侧都有一张脸，通过类似地裁剪应用在屏幕上，显得完美无缺。滚动仅仅改变中间的文本，而不会影响屏幕中其他的元素。同时，黑白图像和黄色的流行“乐符”使其脱颖而出。整体设计像是一场高难度的戏剧，但是却不难导航和进入。

总结

一屏分割设计是我们将在未来几个月看到的比较经常在网页设计上使用的东西。这种模式是简单的，可用的，适用于许多不同的网站类型。

使其工作的窍门（而不是陷入“过度使用”的设计）在于——添加触动，使其成为你自己的。如果你在颜色的使用上需要大篇幅，那么你可以尝试使用这个趋势，考虑如何堆放元素或者只是想想如何使过渡的中心区别于其他的设计。但最重要的是——玩得开心！

上一篇：网页设计不合理,那是你不知道这几点
下一篇：网站字体的设计是提升风格的有效方式

最新网站建设案例

文章详情

分割美学设计,一种新的设计方式