第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

那些让人一见钟情的网页首屏 遵循着怎样的设计模式?(2)

时间:2017-06-20 08:30来源:优设网 作者:跌名 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
接下来视线会沿着屏幕左侧向下垂直扫视,寻找段落中能引起兴趣点的内容,当他们发现引起他们兴趣的内容之时,继续横向仔细浏览,而通常这些内容对

  ·接下来视线会沿着屏幕左侧向下垂直扫视,寻找段落中能引起兴趣点的内容,当他们发现引起他们兴趣的内容之时,继续横向仔细浏览,而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些,而这个视线轨迹则构成了字母F 中间的一横。

  ·接下来用户会将视线移到屏幕左侧,继续向下浏览。

  不论用户是遵循哪种模式来阅读,他们通常都会优先扫视页面的顶部,从左上角到右上角这一栏的信息。所以,在页面顶部显示关键的信息是符合网站和用户双方的诉求的最优策略:读者可以快速扫视正确的信息,而网站显示的内容如果能够吸引到他们,则能够留下用户。这就是为什么UI和UX设计师甚至内容策略专家和营销专家都会倾向于这样设计。

  在另外一篇关于首屏最佳实践的文章当中,作者 Bogdan Sandu 提到的一点应该让每个设计师都牢记:“人们通常只会在短短的几秒钟内判断一个网站的素质,第二印象这种东西是不存在的。一个网站必须足够抢眼才行,否则就是失败。”

  另外值得考虑的一点在于,导航确实可以很好的为用户呈现网站的基本框架和内容分类,这是网站体验的一个重要部分。不过许多创意解决方案会调整布局,采用更加激进或者不同的导航设计。每个网站的设计方案,都要根据需求和目标受众的不同来进行调整,这是自然而然的。

  可读性和视觉层次

  首屏当中,导航、LOGO和标题等元素的字体选择仔细考量,它们应该和背景构成良好的对比度,确保可读性。用户最好能够一目了然地获取其中的信息。

201706191613439313

  在Daily Bugle magazine 这个电子杂志网站中,Daily Bugle 作为标题居中,延续自传统报纸设计的衬线体贯穿了整个网站的设计。居中的文字LOGO,分类导航和搜索框平均分布在左右。

201706191613442745

  The Big Landscape 这个网站在导航的设计上采用了突破栅格的不对称设计,左边是LOGO和三个链接,为了平衡整个设计,顶栏右边是搜索框和一个有颜色填充的按钮。这种设计不仅兼顾了视觉上的平衡,还让页头的可读性得到了保证。

  另外,还有一个值得注意的问题,当用户开始向下滚动翻页的时候,首屏顶部的页头要如何处理。有的网页会倾向于使用悬浮固定的导航,让用户随时可以点击导航跳转到其他的地方,或者进行搜索。有的网页则还是采取传统的策略,当然也有采用折中的设计,当用户滚动到首屏之后,导航缩小悬浮到顶上,或者变为菜单按钮,降低视觉重量,保留核心的元素和它们的可交互性。

  汉堡菜单

  首屏设计中,汉堡菜单是近年来非常流行的一个解决方案,将导航链接都隐藏在汉堡按钮菜单之后。

201706191613446645

  汉堡按钮通常放置在首屏,现在已经成为一个经典的交互元素。目前的用户也已经熟悉了它的存在,无需额外的解释,他们就知道在汉堡菜单中寻找链接和其他选项。汉堡菜单让整个页面更加简约,释放了空间,节省了布局元素,在不同的设备上的显示也更加统一。

201706191613451325

201706191613456161

  Ice Website 这个网站的概念设计就展示了汉堡菜单的一种常见用法。由于网站包含了大量的页面,设计师非常贴心的将汉堡按钮置于页面的左上角,当用户点击它的时候,会弹出导航选项。这样的设计极大程度的节省了页面空间,让整个设计都显得足够简约,也为页头省出了空间。在这个首屏当中,页头左侧是品牌LOGO和介绍,右侧是社交媒体帐号链接,视觉设计也和整个页面保持了一致。中间的留白让整个页头保持了视觉上的平衡。

201706191613459593

201706191613464117

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕