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