您所在的位置: 首页>行业资讯>山东网页布局中的不对称留住用户

山东网页布局中的不对称留住用户

发表于:2021-09-26 阅读:0 关键词: 网页 布局 中的 不对称 留住 用户 今天 我们 起来 仔细 行业新闻
今天,我们将仔细研究网页设计师如何使用对比度,空白和布局来创建令人难忘的不对称设计。 不对称设计不仅是外形上的差异,还可能是内部结构上的不对称。 例如,在图库页面上,每张图片都有一个缩略图,其中一张略大于其他缩略图。 这种差异将立即引起用户的注意。 通常,非对称设计非常适合吸引用户对特定区域或元素的关注,这是其优势。 接下来,让我们仔细看看对比度,间距和布局如何产生非对称效果。 可观察的对比 从视野中消除所有视觉干扰后,您的用户将很快注意到这些细微的差异。 此时,您可以适当地添加一些效果,例如渐变背景,甚至是jQuery动画。 这种效果使页面上仅剩的一个或两个元素迅速醒目。 image05 至 著名的Mac平台设计软件Sketch的官方网站设计就是一个很好的例子。 深色和浅色采用统一的页面设计。 在标题中,您会注意到两个按钮:黑色的“免费试用”和浅色的“立即购买”。 有趣的是,两个按钮的大小相同,级别相同且颜色相同。 但是,“免费购买”按钮被设计为“鬼影”按钮,整体几乎与深色背景融为一体。 这样,淡蓝色的“立即购买”按钮和背景形成了鲜明的对比,非常醒目。 当您打开页面时,您会发现购买按钮一目了然。 这是由大量空白和合理的对比度创建的视觉指南。 水平和垂直空白将按钮与文本分开,并且按钮颜色的对比度使其中一个按钮自然醒目。 这种设计方法非常有用。 如果继续浏览,将会发现页脚也使用类似的设计: 图03-1 至 在这种情况下,用户您只能提交他们的电子邮件或选择放弃。 Sketch希望您在输入电子邮件地址后尽快提交,因此“提交”按钮的位置非常靠近输入框。 根据菲特定律,两个元素之间的距离越近,用户浏览和切换的速度就越快。 值得注意的是,提交按钮的颜色与以前的不对称设计一致,这使您很容易注意到并引诱您单击,这正是Sketch想要的。 非对称设计使扫描页面的用户更容易注意到这些经过精心设计的“杰出”元素。 至于布局和空白的控制,可以使用A / B测试来找到最佳比率。 从Sketch的官方网站上,您可以学习以下经验: ·对比度不仅是颜色的比较,还可以是网页上其他控件之间大小和位置的比较 ·在不同的布局和情况下,空白可能特别显眼或非常不显眼 ·周围元素在其他元素的可见性中起着重要作用 ·对称和协调可以创造出和谐的外观,而非对称设计则可以吸引用户的注意力。 两者的使用应保持平衡。 至