网页首屏设计

2024-01-05 18:48
文章标签 网页 设计 首屏

本文主要是介绍网页首屏设计,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.什么是首屏?

 ”首屏”就是指网页视图呈现给访客的第一屏幕,在不需要滚动条的前提下可观看的浏览面积。

2.为什么需要注意”首屏”设计

设计的效果需要媒介来支撑,杂志的设计需要考虑纸张的大小,修订及读者的阅读习惯。而网页设计同样需要媒介:显示器.

显示器的大小直接关系到访客的阅读体验,访客大都数在一个陌生网页停留的时间不会太长,如果短时间内没有能够将文案想表达的重要内容第一时间呈现出来,那么就很有可能重要内容被忽略,效果也就大打折扣。

3.第一屏的设计标准是什么?

下图为2011年度 Internet 用户屏幕分辨率实时统计报告:

一般情况下我们以占有比率最多的显示器分辨率为参考,原则上向下兼容,高度在768像素。
在768像素的高度基础上,还需要减去浏览器的界面高度和系统任务管理器的高度。

下图以界面所占最大的火狐浏览器和win7的任务管理器为例:

图中可看出,第一屏的大众高度差不多是572PX*,*我们在制作专题或邮件的时候,以572px为参考,尽量把重要内容放到572px高度以内。

4.案例
下面为具体的案例:
图一为不考虑”第一屏”的设计稿: 

1280*800的笔记本为标准,网页所呈现给访客的真实情况为:

从图中可知,banner下面的文本内容包括我们希望访客点击的链接没能够在第一屏中显示,访客不清楚下面还有内容,就很有可能直接忽略了。

下图是修改后的文稿:

再以1280*800的笔记本为标准,网页所呈现给访客的真实情况为:

网页虽然没有能够在显示器中完全显示,但溢流的文本链接呈现在第一屏上,起到了提示作用,访客自然就会知道下面还有更多内容。

在大家所熟悉的大型网站首页,第一屏的高度不需要考虑太多,基本上内容都很紧密,重要内容第一屏优先即可。但像专题、批量邮件这种内容不多又陌生的页面时,第一屏的框架就需要特别注意,因为这直接关系着页面宣传的实际效果。

当我们在完成一个设计工作时,花点时间从用户的角度想想,会有意想不到的收获。

这篇关于网页首屏设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/573814

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

MyBatis设计SQL返回布尔值(Boolean)的常见方法

《MyBatis设计SQL返回布尔值(Boolean)的常见方法》这篇文章主要为大家详细介绍了MyBatis设计SQL返回布尔值(Boolean)的几种常见方法,文中的示例代码讲解详细,感兴趣的小伙伴... 目录方案一:使用COUNT查询存在性(推荐)方案二:条件表达式直接返回布尔方案三:存在性检查(EXI

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,以便在文档、邮件或

一文教你Python如何快速精准抓取网页数据

《一文教你Python如何快速精准抓取网页数据》这篇文章主要为大家详细介绍了如何利用Python实现快速精准抓取网页数据,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录1. 准备工作2. 基础爬虫实现3. 高级功能扩展3.1 抓取文章详情3.2 保存数据到文件4. 完整示例

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系