[设计干货]不对称设计打造有趣的网站页面

在绝大多数现象下，不对称的计划元素能从其他的元素中锋芒毕露。这些不对称的计划看起来更赋有生机，假定其间包括有按钮、控件或许联接的话，它们普通能取得比其他部位更多的重视。

今日咱们就一同来细心看看页面计划师们是如何通过比照、留白和计划来创造令人难忘的不对称计划。不对称的计划并不满是外部归纳上的差异，它相同可所以内部构造上的不对称。举个比方，图库页面中，每张图都有缩略图，其间某个比其他的缩略图略大一点，这种差异会立刻招援用户的留心力。总的来说，不对称计划十分适合于将用户的留心力招引到特定的区域或许元素上，这是它的优势地址。

接下来，创新互联教您细心看看比照、间隔和计划是如何创造出不对称的作用。

可察看到的比照度

当你将视界中的视觉干扰都移除了今后，你的用户会很快留心到那些纤细的差异。这个时分，你可能会恰本地增加一些作用，比方突变的布景，以致jQuery 动画。这么的作用能让页面中仅剩的一两个元素飞快地让人留心到。

知名Mac途径计划软件Sketch的官方网站的计划便是个极好的比方，深色和淡色被包容到一个一致的页面计划中来。在页头中，你会留心到两个按钮：深色的“免费试用”和淡色的“立刻收购”。有意义的是，两个按钮都是相同的大小，并且处于同一个程度面上，并且是同一色系。但是，“免费收购”的按钮被计划成为鬼魂按钮，整体和深色布景几乎融为一体。

这么一来，运用浅蓝色实底的“立刻收购”按钮和布景构成了显着的比照，恰当的显眼。当你翻开页面的时分，会一眼留心到收购按钮，这便是通过许多的留白和合理的比照建筑出来的视觉引导。

横向和纵向的留白让按钮和文本辨别开来，而按钮色彩的差异比照是让其间一个按钮自但是然地凸显了出来。这种计划方法十分的运用，假定你再接着阅读，你会发现页脚也选用了相似的计划：

在这种情况下，用户只能提交他们的电子邮件，或许选择丢掉。

Sketch 希冀你在输入邮件地址今后从速提交，所以提交按钮安置得同输入框十分近。依据Fitt规矩，两个元素之间的间隔越近，用户的阅读和切换速度越快。值得留心的是，提交按钮的色彩和之前的不对称计划坚持着分歧，让你十分简略留心到，蛊惑你去点击，而这也恰是Sketch想要的。

不对称计划让环顾页面的用户更简略留心到这些被精心计划得“超卓”的元素。至于计划和留白的控制，你能够运用A/B查验来寻求最好的份额。

从Sketch 的官方网站上，能够学习到这些履历：

·比照并不只仅色彩的比照，它一同也可所以页面上其他控件之间的大小比照、方位比照

·在不相同的计划和情况下，留白能够分外显眼，也能够十分不显眼

·附近的元素的烘托关于其他的元素的可见性有着首要的作用

·对称与谐和能制作谐和的观感，而不对称计划则能招援用户留心力，两者的运用应当均衡。

留白引导留心力

iPad 途径上的绘图东西 Procreate 的官方网站便是一个不太相同的案例。简略环顾一下这个页面，页面整体选用的暗色彩配色，整体计划并不杂乱，运用的页面元素标准恰当大。

计划师在这个超大的页面上运用单个元历来展现如何绘画。屏幕截图、绘画Demo和功用引见都各自占有着不相同的区块，留白则将文字内容和视觉信息切开开来。在文本色彩的运用上，计划师也恰当的用心：页头的有些运用了强比照的配色，而正文有些则运用了比照相对较弱的配色。

通过将页面划分为不相同的区块，页面自然地划分出不相同的层次，每个有些都有着不相同的款式(全屏布景、超大字体排版、截图展现等)，这么就使得各个区块显得更加独立。

但是请必须记住，这种计划方法并不适合全部网站，但是它确实曾经在计划师圈子里面逐步盛行起来，成为了一种计划趋向。假定计划和实行都很到位的话，看起来却是恰当的不错。

交换式计划

乍一看，内容和图画摆布交换式的计划可能会让用户感到腻烦，但是假定控制好区块之间的间隔，能够消弭Z字型环顾阅读的不适感。

这种款式会推进访客按照他们自己的节拍来阅读，因为这种计划方法打断了信息的连续性，但是让用户成为了阅读节拍的掌控者。

Wunderlist页面就运用了非对称式的留白，合理的留白计划让计划显得诙谐而不单调。通过Wunderlist 的计划，咱们能够总结一下这种计划方法：

·不对称计划的首要妄图是引导用户重视页面特定的区域

·不对称计划的重复运用能创造出对称式的计划

·图文之间的空地控制好了也能够成为一种方法

·规矩的留白能让内容阅读更简略，并且具有预期性。

不对称设​计打造有趣的网站页面，你学会了么？

名称栏目：[设计干货]不对称设计打造有趣的网站页面
网页URL：https://www.cdcxhl.com/news26/161326.html

成都网站建设公司_创新互联，为您提供移动网站建设、App设计、Google、网页设计公司、虚拟主机、网站建设

广告

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