巧用不对称设计打造有趣的网站页面

当一个元素在设计上使用不对称的空间设计技巧时，与其他周围的元素相比，它看起来能更加的突出或者说特别，在视觉上它可能看起来会更加活跃，如果你正在考虑在你的网页设计中添加一个链接/按钮，而它刚好需要比其他相同的元素获得更多的关注（或者简单一点说，它是所有元素里面最重要的），这将是特别有用的。
今天，创新互联专业网站制作通过案例，我们将仔细观察通过对比度、间距和图层这些常见的设计技巧所表现的不对称性。我们将考虑可观察的对比度，以及空间的不同使用是如何引起用户的注意的。
不对称并不总是与边框，填充或沟槽的外部关系关联。
不对称也可以涉及图像缩放或文本对齐方式等内部关系。例如，图片集可能显示5个缩略图，其中位于中间的可以略大于其他的缩略图，这样就分清了主次，是中间的那张图在网页设计上主要负责用于捕获用户的注意。不对称对于将注意力引导到页面上特定区域或页面中的特定元素是非常好用的一个技巧。
在apple-mac的介绍网页设计中你可以很清楚的找到这种不对称布局
而且，正如我们在免费电子书Web UI Design for the Human Eye中所描述的那样——有时不对称就只是为了不对称是很有用的。
我们来看看如何通过对比度，间距和图层来表示不对称性。
1.可观察对比度
通过消除干扰，你可以做到“强制”用户只关注你想让他们立即看到的内容。
怎么做呢？
你可以将主要的设计效果应用于这些对于你来说重要的区域里，如使用背景渐变甚至是jQuery动画。这些效果可以用于一个或两个元素，使它们脱颖而出。
当你在欣赏Sketch的网站设计时你可以参考很多不对称的设计方法尤其是在按钮方面
对于这一条来说，我最喜欢的例子之一是Sketch by Bohemian Coding的主页。你可以看到，在它的网页设计上混合了深色和浅色的颜色搭配，它们原本可能是冲突的，但是在这个设计上却没有，它们将对比度混合成一个统一的布局。
在它的标题部分，你会注意到有两个按钮：一个用于免费试用，另一个则用于购买。两个按钮都是蓝色的并且占用相同的空间。然而，免费试用按钮使用了通常被称为“幽灵按钮”的“空”背景。通过分层放置在深色背景上面，看起来免费试用按钮似乎落后于背景。
相反，购买按钮因为使用浅蓝色背景和白色文字，使得它在黑暗的背景下显得异常突出和抢眼。当你的眼睛在标题上面快速浏览的时候，很明显，购买按钮几乎是立即就能吸引你的注意。这是由颜色引起的，也是由元素之间添加的空白空间引起的。

使用垂直或水平的空白空间，可以使按钮与标题文本分离开。由于一个按钮比另一个按钮更亮，使它的空间感更强从而避免了其他元素的干扰，它自然而然地就捕获了用户的注意力。

你可以在同一个网站的底部看到类似的按钮样式：
你会注意到Sketch的网页设计在很多元素的应用和设计上都带有不对称基因
在这种情况下，用户只能选择提交电子邮件或保留信息。

由于Sketch想要在用户输入信息后能尽快提交电子邮件，因此输入字段和提交按钮之间的距离更加紧密。 这利用了菲茨定律，因为你减小了距离（和大小保持固定），会加快你在元素之间移动所花费的时间，这样就能减少你再次考虑是否有必要性的时间了，这是一种策略。

最后，请注意，与“提交”按钮相比，输入栏的不对称尺寸也会吸引你的眼睛到页面的那一部分，这正是Sketch所需要的。
为了在某些页面元素上吸引用户的注意力，你可以使用空白的空间。要通过实验以发现最有效的方法，你可以尝试使用不同的A / B测试方法对不同的间距值进行测试。
以下是Sketch的网站上收集的一般注意事项：
· 对比度并不总是指颜色。 它还可以指与页面上的其他元素的空间，大小和位置的对比元素；
· 取决于上下文，空白空间可能是明显的或不显眼的；
· 周围元素在其他元素的自然可见度中发挥重要作用；
· 对称创造记忆和和谐，而不对称则引起注意。 相应地平衡。
2.空间利用注意
你可以在Procreate的网页设计上找到一个稍微不同的示例，这是iPad介绍其数字绘图和绘画工具。通过屏蔽页面中的其他不相关的元素，你会注意到整个页站设计的布局是黑色的，并且具有超大的页面元素。
Ipad的网页设计在空间的应用上通过使用大背景来制造不对称
这种网站设计像我们展示了如何在非常大的页面上将焦点吸引到单个元素或者捉我们想给客户看的主要内容。正如上面的案例一样，你可以看到插图，演示绘画和功能说明都占有自己的部分。
在空间的利用上，白色空间分隔文本和视觉内容。设计在使用颜色来区分文本标题（较高的对比度）和一般页面文本（较低的对比度），这个特别值得注意。
不对称空间格局在不同的网页设计上表现也可能不尽相同
通过将页面分割成几个部分，你将创建一个自然的内容层次结构，然后将这些部分用独特的风格（全屏幕背景，超大型排版，应用图例等）分割，这些部分将变得更加明显。
不过，请记住，并不是所有的网站设计都可以从这种大格局的样式中受益，但这似乎是设计师们非常受欢迎的趋势。当你应用适当时，它会使你的整体网页设计看起来很棒。
3.交替布局
表面上，交替的内容可能看起来并不会给你产生多少好感，因为这么做意味着你需要强迫读者的注意力跟着你变化的布局跳转。但是，正是由于内容间隔得如此之好，使得读取Z-Pattern比你先想象中要容易得多。
这种模式还迫使访客停留在底部，因为设计不应该是填鸭式的展示信息。当然，这种模式唯一可能适用的场景，是通过以雅致的白色空间来雕刻出浏览路径的方式。
看看上面的Wunderlist的APP网页设计，我们可以看到在白色空间中出现的这种不对称模式。认真考虑和应用不对称间距，使其看起来很恰到好处，而不是激怒你的用户。
我们可以从Wunderlist使用间距的设计模式中学到很多东西：
· 仅在你期望访客注意页面中的某些区域时使用，因为不对称应该是有其目的；
· 重复图案中的不对称性使其变为对称性；
· 文本或图形之间的空间格局也将显示为一个较大的图案；

· 白色空间应该使浏览内容更容易，更可预测。

本文来自创新互联品牌网站建设网站设计制作公司-创新互联
标签：成都网页设计,做网站公司, 企业网页制作, 专业网站制作

本文题目：巧用不对称设计打造有趣的网站页面
当前路径：/news42/167642.html

成都网站建设公司_创新互联，为您提供电子商务、网站策划、静态网站、软件开发、微信小程序、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联