设计稿标注首屏线的确定始末
作者：云谦 来源：taobaoUED 发布时间：2011-03-30 12:36:00
这是内部的一个邮件记录，分享出来听下业内同行的声音。
事情是这样的..
==
先是 A 推荐了白鸦的推到内部群：
“设计师们一定要养成一个习惯：无论是原型设计还是视觉设计，一定要标注一下首屏线，明确首屏需要、可以显示到哪里。”
==
然后，B 觉得这点子不错，根据内部统计系统中的操作系统、浏览器分布和屏幕分辨率等数据，结合浏览器状态栏、任务栏等高度进行分析：
得出两条首屏线，分别为 580 和 710，对应不同的分辨率。
==
C 再从实际用户的角度出发，在某应用布点进行用户数据的收集，分析用户实际的分辨率和浏览器可见区域：
1. 分辨率
1) 1024×768, 1440×900, 1366×768, 1280×800 仍占了绝大多数
2) 分辨率总类非常多，除上面列出的之外，other 里包含了几十种分辨率
3) 800×600，1024×600 等 600 高度系列的已逐渐推出舞台
2. 用户可见区域高度
具体数据举例：
测试用户总数量为 261645)
1) viewport 高度低于等于 580 的有 116786 个人，占 44.64％
2) viewport 高度低于等于 720 的有 216227 个人，占 82.64％
3) viewport 高度低于等于 800 的有 241420 个人，占 92.27％
4) viewport 高度低于等于 900 的有 259174 个人，占 99.06％
==
接着，D 根据 C 的数据，生成浏览器可见区域的热区图
==
最后结论如下：
根据 D 的热点图，可以看到如果首屏高于 600 像素会有很多用户看不完整。所以请设计师以 600 像素高为首屏进行设计。
根据 C 的曲线图和 80/20 原则，首屏设为 710 像素可以照顾到 80％ 的用户。所以前端开发可考虑把 710 像素视为首屏，对首屏的资源进行优先加载。
各位，你们的意见呢?
0
投稿猜你喜欢
- asp分页，是学习使用asp编程经常遇到的问题，也算是一个经典的问题。本文介绍了一个asp分页源代码例子，希望对初学者有所帮助，本程序文件名
- 上传问题可以说是网络编程中经常遇到的，也是一个很重要的问题，我们不仅要实现上传文件，图片等基本功能，还有考虑到上传程序的安全性，本文介绍了一
- mro即 method resolution order (方法解释顺序)，主要用于在多继承时判断属性的路径(来自于哪个类)。在python
- 本文实例讲述了Python3实现的字典、列表和json对象互转功能。分享给大家供大家参考，具体如下：python3可以使用json模块操作j
1、爬取网页分析爬取的目标网址为：https://www.gushiwen.cn/在登陆界面需要做的工作有，获取验证码图片，并识别该验证码，- Python的集合set原理集合（set）是一个无序的不重复元素序列。可以使用大括号 { } 或者 set() 函数创建集合，注意：创建一个
- 我经常需要用Python与solr进行异步请求工作。这里有段代码阻塞在Solr http请求上， 直到第一个完成才会执行第二个请
- Python语言简洁明了，可以用较少的代码实现同样的功能。这其中Python的四个内置数据类型功不可没，他们即是list, tuple, d
- 我们学习编程，在学习的时候，会有想把有用的知识点保存下来，我们可以把知识点的内容爬下来转变成pdf格式，方便我们拿手机可以闲时翻看，是很方便
- 一同事反馈有一MySQL实例因为断电之后，启动不了。用了innodb_force_recovery=6也无效，于是前往查看。排查过程：最早的
- 前段时日微软（Microsoft）正式发布了.NET Core 2.0，在很多开发社区中反响不错。但还是有一些开发者发出了疑问，.NET C
- 以下是一些python的list和set的基本操作1. list的一些操作list = [1, 2, 3]list.append(5)pri
- 一、资料定义 ｄｄｌ（data definition language) 资料定语言是指对资料的格
- Selenium对网页的控制是基于各种前端元素的，在使用过程中，对于元素的定位是基础，只有准去抓取到对应元素才能进行后续的自动化控制，我在这
- update ：单表的更新不用说了，两者一样，主要说说多表的更新 O
- 删除一，你可以先把类型为varchar的字段该名，再加以个字段为要该为date的字段名相同，二，1，测试表create table TEST
- var obj=document.getElementById("txtUserID") var range=obj.c
- 前言在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问
- --相信大家肯定经常会把数据导入到数据库中，但是可能会有些记录行的所有列的数据是null，这为null的数据是我们不需要 --现在需要一个简
- 中文分词(Chinese Word Segmentation)，将中文语句切割成单独的词组。英文使用空格来分开每个单词的，而中文单独一个汉字
