天津 重庆 南京 成都 济南 义乌 广州 佛山 贵阳 西安

网页首屏,遵循着怎样的设计模式

发布时间:2022年3月30日责任编辑:林小花

什么是首屏

相比于首屏,大家对于首页的概念会更熟悉一些。和传统的报纸行业类似,报纸第一版被称为头版,由于报纸常常会折叠起来运输,当用户拿到报纸看到的是露出来的头版头条(Above the fold),这就像如今的首页和首屏之间的关系。用户打开网页的第一刻,还没开始滚动页面的时候,所看到的就是首屏。

首屏要能够吸引用户才行。

从内容角度上来说,首屏要涵盖关键的信息,一目了然。从设计上来看,首屏也是最适合发挥设计创意的地方,许多优质的首屏设计都采用了简洁明了的布局,打磨出引人入胜的体验。首屏通常还承载着网站的导航模块,是整个站点布局和导航的关键。

这个在线漫画书店就是个优秀的范例。顶部的文字LOGO和主干导航都在同一水平线上,超人插画突破页头布局充满了力量感,在视觉上也非常抓人,同时作为认知度最广的超级英雄,它也非常适合作为首图而置顶。下面的漫画列表恰到好处的露了个头,让访客意识到能够向下翻页。

首屏包含哪些部分

既然首屏是关键,所包含的元素也不会太少。最常见的是下面这些:

·基本的品牌标识:LOGO,品牌名称,Slogan,吉祥物等·产品、服务和主题的主要文案·网站类别链接·社交媒体链接·基本联系信息(电话电子邮件等)·多语言切换按钮·搜索框·订阅按钮·产品、APP 下载/试用链接等

这并不是意味着所有的这些元素都应该呈现在首屏当中,太多的模块会让首屏中的首图和标题的视觉重量被稀释,过多的信息会让用户难以聚焦到真正重要的内容上。所以,首屏的设计常常需要设计师和营销人员通力合作,来作出最合理的选择。

网站的顶栏被制作成悬浮的,随着页面的滚动会一直会在顶部显示,左侧是品牌LOGO,右侧是导航,常见的四个分类中 Product、Studio、Press 是作为常规导航而存在,但是Shop 则被制作成CTA按钮,相比之下更容易吸引用户去点击。借助大量的留白,设计师将LOGO、导航和首屏的文案划分开来。

在首屏设计上相对而言更加别具一格。整个首屏都是围绕着LOGO和品牌名称来设计的,左右平衡,各两个链接,背景的星河和前景的超大文本嵌套叠加,构成视觉主体。

首屏为何重要

首屏对于许多网页而言是至关重要的组成部分。

用户是如何同网页进行互动的?

简而言之,当人们访问某个网站的时候,尤其是初次访问网站的时候,他们通常不会特别仔细的查看所有的内容,而是快速的扫视,找到能够吸引他们注意力的信息,这些内容就是他们继续停留在这个网站上的理由。通过眼动测试和不同实验,发现访问者的视觉浏览模式,可以归结为几种典型的模式。

可读性和视觉层次

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

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

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

悬浮固定导航

悬浮式的导航栏也是时下流行的一个趋势,它为用户提供了持续的可供交互的导航服务,这对于越来越长的页面设计而言,是个相当合理的补充。

双层菜单

导航还可以设计为双层的,已经有不少网站有了这样的尝试。

这个网站就使用了双层的导航设计,上层导航中承载的是LOGO和社交媒体帐号、搜索和购物车以及汉堡菜单,而第二层导航则是交互的核心区域:产品目录、销售地点、新闻和特别优惠等。整个设计视觉层次清晰,为整个用户体验打足了基础。

结语

对于网页而言,首屏是关键。页头的导航和首图、文案共同组成了这个关键的区域,多种因素共同作用于用户,用心的设计才能让用户一见钟情,不是么?

你可能错过的 好文  关 注公众号后 ↓


1. 回复 “ PS ” ,看PS【干货·教程 大合集】

2. 回复 “ 初阶 ”, 这里有【UI初级设计师必读专题】

3. 回复 “ 规范 ”, 创意虽无限,设计却需要遵循一定的规范原则

4. 回复 “ 交互 ”,  交互专题

5. 回复 “ 扁平化 ”, 扁平化,没有out,来,小创君带你飞

6. 回复 “ 配色 ”, 杂乱无章的配色,我受够了

7. 回复 “ 进阶 ”, 在2.0之后更进一步吧设计狮

8. 回复 “ 微课 ”, 看看小创君给大家的创想者学院公开课

9. 回复 “ 字体 ”, 这里有字体、有banner等干货

10. 回复 “ 任意 ”, 查看更多。

获取|更多

微信ID:sz-chuangxiangz长按二维码,小创君带你飞

创想者学院位于深圳美丽的大运

网站简介 联系方式 隐私政策 投诉及建议 发展历程 垃圾信息处理邮箱tousu572@163.com
icp备案号 浙ICP备10048612号 不良信息举报平台 互联网安全管理备案 Copyright 2021 www.100jianzhan.com All Rights Reserved