网页设计中的不对称设计都有哪些？

2020-11-26 16:09:42 阅读（151） 评论（0）

编者按：在网页设计过程中，对称与不对称似乎是一种选择。和谐与不对称的差异是创造良好设计的必要手段。但对称通常用得很好，但不对称并不是每个人都熟练使用的。在今天的文章中，让我们简要谈谈网页设计中的不对称设计~在绝大多数情况下，不对称的设计元素可以从其他元素中脱颖而出。如果这些不对称的设计包含按钮、控件或链接，它们通常会比其他部分得到更多的关注。今天，让我们仔细看看网页设计师是如何通过比较、空白和布局创造令人难忘的不对称设计的。不对称的设计不全是外部轮廓的差异，也可以是内部结构的不对称。例如，在图库页面中，每张图都有缩略图，其中一张略大于其它缩略图，这种差异会立即吸引用户的注意。一般来说，不对称设计非常适合将用户的注意力吸引到特定的区域或元素上，这是它的优势。接下来，让我们仔细看看比较、间距和布局是如何产生不对称的效果的。当你去除视觉中的视觉干扰时，你的用户很快就会注意到这些细微的差异。在这个时候，你可能会适当地添加一些效果，比如渐变背景，甚至jquery动画。这种效果可以让页面上只剩下一两个元素很快被注意到。著名Mac平台设计软件Sketch官方网站的设计就是一个很好的例子，深色和浅色被容纳到统一的页面设计中。在页面上，你会注意到两个按钮：深色“免费试用”和浅色“立即购买”。有趣的是，两个按钮大小相同，在同一水平面上，颜色系统相同。然而，“免费购买”的按钮被设计成幽灵按钮，几乎与深色背景融为一体。这样，浅蓝色底部的“立即购买”按钮与背景形成鲜明对比，相当显眼。当你打开页面时，你会一眼就注意到购买按钮，这是通过大量的空白和合理的比较创造的视觉指导。水平和垂直的空白区分了按钮和文本，而按钮颜色的差异对比使其中一个按钮自然而然地凸显出来。这种设计技术非常有用。如果你继续浏览，你会发现页脚也采用了类似的设计：在这种情况下，用户只能提交他们的电子邮件或选择放弃。Sketch希望您在输入电子邮件地址后尽快提交，因此提交按钮与输入框非常接近。根据Fitt定律，两个元素之间的距离越近，用户的浏览和切换速度就越快。值得注意的是，提交按钮的颜色与之前的不对称设计一致，这让你很容易注意到并引诱你点击，这正是Sketch想要的。不对称的设计使扫描页面的用户更容易注意到这些精心设计的“突出”元素。至于布局和空白控制，您可以使用A/B测试来找到最佳比例。从Sketch的官方网站上可以学到这些经验:对比不仅仅是颜色的对比，更是网页上其他控件之间的大小和位置的对比。在不同的布局和情况下，空白可以特别显眼，也可以非常不显眼。周围元素的衬托对其他元素的可见性起着重要作用。对称和协调可以创造和谐的印象。两者的使用应平衡。Procreate的官方网站，留白引导注意力iPad平台上的绘图工具，是一个不同的案例。Procreate的官方网站是一个不同的案例，留白引导注意力iPad平台上的绘图工具。简单扫描一下这个页面。页面整体采用深色配色，整体布局不复杂，页面元素尺寸相当大。在这个超大的页面上，设计师使用单个元素来展示如何绘画。屏幕截图、绘画Demo和功能介绍都占据了不同的块，留白将文本内容和视觉信息分开。在使用文本颜色时，设计师也非常小心：页面部分使用强对比配色，文本部分使用相对较弱的对比配色。通过将页面划分为不同的块，页面自然划分为不同的层次，每个部分都有不同的风格（全屏幕背景、大字体排版、截图显示等），使每个块看起来更加独立。但请记住，这种设计技术并不适合所有网站，但它已经逐渐在设计师圈中流行起来，成为一种设计趋势。假如设计和执行都很到位，看起来还是挺不错的。乍一看，内容和图片的交替布局可能会让用户感到无聊，但如果区块之间的间距得到很好的控制，Z型扫描可以消除阅读的不适。这种方式促使访问者按照自己的节奏阅读，因为这种布局打断了信息的连续性，但使用户成为阅读节奏的控制者。Wunderlist页面采用不对称留白，合理的留白设计使布局有趣而不单调。通过Wunderlist的布局，我们可以总结这种设计模式：·不对称设计的主要目的是引导用户关注页面的特定区域·不对称设计的重复使用可以创建对称设计·图形之间的间隙控制也可以成为一种模式，定期空白可以使内容浏览更简单和预期。

内容来源:网络，以上内容来源于网络，不代表本站观点，如有侵权，请联系删除。

上一条：设计师的文件夹整理方案。下一条：献上一份超级详细的设计指南：排版、视觉和 UI设计

商标/知识产权

网站服务

CRM/销售管理

ERP/智慧办公

财税人力

安全/技术支持

其他应用

商标版权

小程序

网页设计中的不对称设计都有哪些？

推荐阅读

猜你喜欢

分类

最新文章