网站优化

那些让人一见钟情的页面首屏,遵从着怎么的规划形式?

点击次数:    更新时间:2017/6/26 10:24:36  【打印此页】  【关闭

无论是APP仍是页面,榜首形象都很主要。再优异的内容,都需要首屏这个美丽的脸皮来招引用户驻留,才能被人注意到。在竞争激烈的数字商品领域,这是难以辩驳的严酷经历。这也引出了今日要讨论的话题:页面的首屏规划。


什么是首屏


比较于首屏,大家对于主页的概念会更了解一些。和传统的报纸职业相似,报纸榜首版被称为头版,因为报纸常常会折叠起来运送,当用户拿到报纸看到的是露出来的头版头条(Above the fold),这就像如今的主页和首屏之间的联络。用户翻开页面的榜首刻,还没开端翻滚页面的时分,所看到的即是首屏。


首屏要可以招引用户才行。


从内容视点上来说,首屏要包括要害的信息,一望而知。从规划上来看,首屏也是最合适表现规划构思的地方,许多优异的首屏规划都选用了简洁明了的规划,打磨出引人入胜的体会。首屏一般还承载着网站的导航模块,是全部站点规划和导航的要害。




这个在线漫画书店即是个优秀的典范。顶部的文字LOGO和主干导航都在同一水平线上,超人插画打破页头规划充满了力气感,在视觉上也十分抓人,一起作为认知度最广的超级英豪,它也十分合适作为首图而置顶。下面的漫画列表适可而止的露了个头,让访客意识到可以向下翻页。


首屏包括哪些有些


既然首屏是要害,所包括的元素也不会太少。最多见的是下面这些:


·根本的品牌标识:LOGO,品牌称号,Slogan,吉祥物等


·商品、效劳和主题的主要案牍


·网站种类连接


·交际媒体连接


·根本联络信息(电话电子邮件等)


·多语言切换按钮


·查找框


·订阅按钮


·商品、APP 下载/试用连接等


这并不是意味着一切的这些元素都应当呈如今首屏傍边,太多的模块会让首屏中的首图和标题的视觉分量被稀释,过多的信息会让用户难以聚集到真实主要的内容上。所以,首屏的规划常常需要规划师和推广人员通力合作,来作出最合理的挑选。


看看下面的几个事例,你应当能大约理解不一样类型的页面应当采纳怎么的战略。




Bjorn 是一个室内规划网站,网站的顶栏被制作成悬浮的,跟着页面的翻滚会一向会在顶部显现,左边是品牌LOGO,右侧是导航,多见的四个分类中 Product、Studio、Press 是作为常规导航而存在,但是Shop 则被制作成CTA按钮,比较之下更容易招引用户去点击。凭借很多的留白,规划师将LOGO、导航和首屏的案牍区分开来。




Event Agency是别的一个典范,在首屏规划上相对而言愈加独具匠心。全部首屏都是围绕着LOGO和品牌称号来规划的,左右平衡,各两个连接,布景的星河和远景的超大文本嵌套叠加,构成视觉主体。


首屏为何主要


首屏对于许多页面而言是至关主要的组成有些。


用户是怎么同页面进行互动的?用户研讨领域的前驱 Nielsen Norman Group 从前对于这一用户行为进行了深化的研讨,为规划师和可用性规划专家们供给了非常好的资料和规划根据。


简而言之,当大家访问某个网站的时分,尤其是初次访问网站的时分,他们一般不会特别细心的检查一切的内容,而是迅速的环视,找到可以招引他们注意力的信息,这些内容即是他们持续停留在这个网站上的理由。通过眼动测验和不一样试验,他们发现访问者的视觉阅读形式,可以归结为几种典型的形式。规划师 Steven Bradley 在自己的文章中,总结了这三种多见的形式:古腾堡式,Z图形式和F图形式。




对于信息构造层次并不那么清楚的页面,用户常常会运用古腾堡式的阅读形式,用户大规模环视页面内容,全部视野途径是一个大号的Z,其间最开端的两个视觉驻留点就在页头上。




Z图形式也不难理解,用户从上到下,视野沿着Z字形来回环视,用户会左右迅速环视,视野的起点首先是左上角,行跨顶部一栏到右上角,然后向下延伸。




F图形式,或许说是F式规划,咱们就愈加了解了。在Nielsen Norman Group 的研讨傍边,这种阅读形式最为典型:


·用户先会沿着水平方向阅读,优先阅读内容块的上部,这个时分的眼动构成了字母F 最上面一横。


·接下来视野会沿着屏幕左边向下笔直环视,寻找段落中能导致爱好点的内容,当他们发现导致他们爱好的内容之时,持续横向细心阅读,而一般这些内容对应的视野规模会比榜首次横向阅读的领域要更小一些,而这个视野轨迹则构成了字母F 中心的一横。


·接下来用户会将视野移到屏幕左边,持续向下阅读。


不论用户是遵从哪种形式来阅读,他们一般都会优先环视页面的顶部,从左上角到右上角这一栏的信息。所以,在页面顶部显现要害的信息是契合网站和用户双方的诉求的最优战略:读者可以迅速环视准确的信息,而网站显现的内容假如可以招引到他们,则可以留下用户。这即是为何UI和UX规划师乃至内容战略专家和推广专家都会倾向于这么规划。


在别的一篇对于首屏最佳实习的文章傍边,作者 Bogdan Sandu 说到的一点应当让每个规划师都紧记:“大家一般只会在短短的几秒钟内判别一个网站的本质,第二形象这种东西是不存在的。一个网站有必要满足抢眼才行,否则即是失利。”


别的值得思考的一点在于,导航的确可以很好的为用户呈现网站的根本结构和内容分类,这是网站体会的一个主要有些。不过许多构思解决方案会调整规划,选用愈加激进或许不一样的导航规划。每个网站的规划方案,都要根据需求和目标受众的不一样来进行调整,这是自然而然的。


可读性和视觉层次


首屏傍边,导航、LOGO和标题等元素的字体挑选细心考量,它们应当和布景构成杰出的对比度,确保可读性。用户最佳可以一望而知地获取其间的信息。


本文链接:http://www.yizheng.org.cn/news/news365.html
上一条:SEO引流窍门:内容+途径方是推行优化的主导    下一条:【官方说法】HTTPS站点如安在渠道提交数据