魔扣论坛

魔扣源码论坛业务
查看: 1108|回复: 6

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

[复制链接]
  • TA的每日心情
    难过
    19 小时前
  • 签到天数: 2929 天

    [LV.Master]开坛老将

    7万

    主题

    227

    回帖

    27万

    积分

    管理员

    Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30

    魔扣币
    745005
    贡献
    157749
    威望
    32799

    最佳新人活跃会员热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2018-11-26 11:37:20 | 显示全部楼层 |阅读模式
    魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x
      今天我们就一起来仔细看看网页设计师们是如何通过对比、留白和布局来打造令人难忘的不对称设计。不对称的设计并不全是外部轮廓上的差异,它同样可以是内部结构上的不对称。举个例子,图库页面中,每张图都有缩略图,其中某个比其他的缩略图略大一点,这种差异会立刻吸引用户的注意力。总的来说,不对称设计非常适合于将用户的注意力吸引到特定的区域或者元素上,这是它的优势所在。
      接下来,我们仔细看看对比、间距和布局是如何创造出不对称的效果。
      可观察到的对比度
      当你将视野中的视觉干扰都移除了之后,你的用户会很快注意到那些细微的差异。这个时候,你可能会适当地增加一些效果,比如渐变的背景,甚至jQuery 动画。这样的效果能让页面中仅剩的一两个元素飞快地让人注意到。

    image05

      著名Mac平台设计软件Sketch的官方网站的设计就是个很好的例子,深色和浅色被容纳到一个统一的页面设计中来。在页头中,你会注意到两个按钮:深色的“免费试用”和浅色的“立刻购买”。有意思的是,两个按钮都是同样的大小,并且处于同一个水平面上,并且是同一色系。但是,“免费购买”的按钮被设计成为幽灵按钮,整体和深色背景几乎融为一体。
      这样一来,使用浅蓝色实底的“立刻购买”按钮和背景构成了鲜明的对比,相当的显眼。当你打开页面的时候,会一眼注意到购买按钮,这就是通过大量的留白和合理的对比营造出来的视觉引导。
      横向和纵向的留白让按钮和文本区分开来,而按钮色彩的差异对比是让其中一个按钮自然而然地凸显了出来。这种设计手法非常的使用,如果你再接着浏览,你会发现页脚也采用了相似的设计:

    image03-1

      在这种情况下,用户只能提交他们的电子邮件,或者选择放弃。
      Sketch 希望你在输入邮件地址之后尽快提交,所以提交按钮布置得同输入框非常近。根据Fitt定律,两个元素之间的距离越近,用户的浏览和切换速度越快。值得注意的是,提交按钮的色彩和之前的不对称设计保持着一致,让你非常容易注意到,勾引你去点击,而这也正是Sketch想要的。
      不对称设计让扫视页面的用户更容易注意到这些被精心设计得“突出”的元素。至于布局和留白的控制,你可以使用A/B测试来寻求最佳的比例。
      从Sketch 的官方网站上,可以学习到这些经验:
      ·对比并不只是色彩的对比,它同时也可以是网页上其他控件之间的大小对比、位置对比
      ·在不同的布局和情况下,留白可以特别显眼,也可以非常不显眼
      ·周围的元素的衬托对于其他的元素的可见性有着重要的作用
      ·对称与协调能制造和谐的观感,而不对称设计则能吸引用户注意力,两者的使用应当平衡。

    会员购买:>> 点击购买 << | 魔扣币购买:>> 点击购买 <<
    承接业务:服务器代维丨网站托管丨SEO
    联系客服:微信:morko-net | QQ:1367681973

    该用户从未签到

    1

    主题

    253

    回帖

    507

    积分

    高级魔扣

    Rank: 4

    魔扣币
    253
    贡献
    253
    威望
    0
    发表于 2018-11-26 16:43:37 来自手机 | 显示全部楼层
    网络里有一种浅浅的神秘,小屋里有一种深深的情谊,回帖里有一种淡淡的惦记,祝福里有一种浓浓的心意,真诚的友谊一定会随缘相聚,魔扣源码论坛是朋友就会牢牢记在心里,生活的蓝天就会无限的美丽!祝福你我亲爱的朋友!祝你周末快乐!

    该用户从未签到

    2

    主题

    247

    回帖

    497

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    248
    贡献
    248
    威望
    0
    发表于 2018-12-14 21:21:38 | 显示全部楼层
    感恩无私的分享与奉献 魔扣源码论坛是我心中的神!

    该用户从未签到

    2

    主题

    277

    回帖

    556

    积分

    高级魔扣

    Rank: 4

    魔扣币
    277
    贡献
    277
    威望
    0
    发表于 2019-11-18 11:07:21 | 显示全部楼层
    传说中的沙发???哇卡卡

    该用户从未签到

    0

    主题

    229

    回帖

    458

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    229
    贡献
    229
    威望
    0
    发表于 2020-1-13 09:53:36 来自手机 | 显示全部楼层
    感谢您美好的祝福!懂得欣赏的人,找到的是感觉;懂得知足的人,找到的是快乐;懂得珍惜的人,找到的是幸福;懂得关怀的人,找到的是朋友;懂得抓机遇的人,找到的是成功路;魔扣源码论坛真心祝愿朋您的人生梦想全部实现!

    该用户从未签到

    0

    主题

    261

    回帖

    522

    积分

    高级魔扣

    Rank: 4

    魔扣币
    261
    贡献
    261
    威望
    0
    发表于 2020-3-19 20:45:18 来自手机 | 显示全部楼层
    在时间的驿站,许一个心愿叫永远;在心灵的港湾,寄一份希望叫真挚。在这个网络的世界,魔扣源码论坛,我会用一份真正的友情和你一起渡过,我们的情谊将伴着真挚到永远。

    该用户从未签到

    4

    主题

    274

    回帖

    552

    积分

    高级魔扣

    Rank: 4

    魔扣币
    274
    贡献
    274
    威望
    0
    发表于 2020-4-15 10:14:45 来自手机 | 显示全部楼层
    我是个凑数的。。。
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    • 联系我们
    • 新浪微博 :
    • 在线客服 :魔扣科技 
    • 源码QQ群 :魔扣源码论坛官方总群
    • 联系邮箱 :charlin#morko.net
    • 微信扫一扫
    快速回复 返回顶部 返回列表