UCD设计趋势:如何创建分割美学

将一个屏幕分为两个部分的内容——这可能是现在出现的流行设计趋势之一。越来越多的网站设计正在使用包括并排放置的两个垂直或方形面板的设计模式。这同时是一个具有高标准审美的趋势。外观对于用户来说是友好的,可以适应各种需求,并有助于引导用户。在未来几个月内,我们有可能会看到更多这样的设计。

今天小骨头带大家来看看几个分屏幕设计的例子,并提供迷你的案例研究,找出如何充分利用这一设计趋势。

1、请分屏设计的3种

请分屏设计的3种
首先,我们先来“脑洞大开”一下,想想为什么你会想把你的设计分成两半?如果你只是把问题提了出来,而没有看到结果,我也可能会质疑。但是,尝试分屏概念有一个很好的例子。对于响应式框架网页设计来说,这是一个不错选择。因为在较大的屏幕上,设计是分裂的,但是当涉及较小的屏幕时,面板可以堆叠。在动画和交互效果方面,它们可以轻松在上面工作,鼓励用户点击。卡式设计模式的扩展几乎是一个越来越受欢迎的趋势。

2、大胆的颜色和排版

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

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

3、为信息的展示创建空间


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

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

4、专注于行动

专注于行动
分屏式的网站设计也可以让人联想到打印项目。这对于简单的框架来说非常有效,包括针对用户的明确的行动呼吁。在Tree That Gives这个网页设计案例中,该网站的目标是通过右下方简单的彩色按钮来鼓励用户捐赠。

该图像仅作为访问页面的用户的“着陆点”,但所有重要的内容和信息都位于另一个面板中(这个网站的一半实际上可以独立于内容,但不会像现在在视觉上表现得那么有趣)。

5、创建“卡”


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

可以考虑将分屏扩展为多个容器,以便从每个用户获得更多潜在的点击。简单的悬停效果提示用户注意到这些元素中的每一个都是可点击的,并且将导致另一个动作。设计干净,组织良好,旨在让用户点击,这个目的就变得很明确了。

6、改变它


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

Warsaw Rising的网站设计简洁、美丽。滚动仅仅改变中间的文本,而不会影响屏幕中其他的元素。同时,黑白图像和黄色的流行“乐符”使其脱颖而出。整体设计像是一场高难度的戏剧,但是却不难导航和进入。

总结

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

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

哈尔滨IT培训选甲骨文华育兴业,目前Java开发培训、大数据培训、嵌入式培训、UI设计培训、游戏特效培训等课程招生火热进行中有想报名进行免费试听的同学可以点击右侧“在线咨询”进行了解哦!