app首页数据加载设计 你必须知道的网页设计知识

简单来说就是在用户看完自己喜欢的信息之后，继续吸引用户阅读其他信息或者返回频道。

底部页面原型

4. 广告

门户网站如何盈利？

广告是变现方式之一，网站广告一般由负责运营需求的设计师设计，但也可能由渠道设计师或产品设计师完成。网站上最常见的广告形式是横幅广告，横幅广告通常尺寸巨大，在网站上非常显眼，因此不一定是外部广告，也可能是内部活动、推荐信息等。

那么banner图片的尺寸是固定的吗？

答案是否定的。

Banner的宽度有两种，一种是全屏（1920PX）；一种是根据安全距离来全尺寸（1200px或者1000px）。

注意高度，一般以用户屏幕尺寸1920x1080px计算，加上浏览器本身、插件、底部toolbar的距离，留给网站的屏幕高度大概在900px左右，所以banner不能做的太高，否则第一屏信息显示不全。

您可能会说，然后让用户向下滚动。

但是，在网站访客中，第二屏触达的用户会比第一屏少。也就是说，很多用户点击之后可能会跳转或者关闭网站，所以第一屏的信息真的很重要，每一寸空间都是宝贵的。所以我们的banner不宜占用太大的面积，例如：ZCOOL.com的banner面积是1380x350px。

那么除了首页上巨大的横幅广告空间外，该网站还有哪些其他形式的广告？

（1）对联广告

我们经常在门户网站上看到，在网站的左右安全区外，有两条像“对联”一样随屏幕滚动的广告，通常横幅也会是广告内容，中间会弹出用HTML5技术或者Flash技术制作的弹窗广告。

这类广告一般都是组合售卖的，也就是说你一进网站就会被广告轰炸，忍不住注意到这个广告的存在，点击这类广告的时候还会有匹配的特殊页面等等，可见设计师需要配合的地方还是很多的。

对联广告

（2）信息流广告

信息流广告是埋在信息流中的广告形式，这种形式利用了格式塔原理，由于其形式与其他信息相同，用户会无意识地阅读广告内容。例如朋友圈、知乎、Facebook 都采用了信息流广告。信息流广告的效果很强，但会牺牲一定的用户体验。信息流广告的尺寸与信息流相同。

知乎APP信息流广告

以上简单介绍了网站广告常见的三种形式，如果我们在看需求的时候看到CPM、PV这样的字眼，它们分别代表什么意思呢？

他们是付费广告模式。

CPM是按照广告PV收费，CPS是按照用户消费收费，CPA是按照用户注册人数收费，CPC是按照用户点击次数收费，不同的收费模式也会设计采用不同的策略来提升广告的效果。

5. 页脚

在网站具体的页面设计中，底部会有一个区域，我们称之为页脚。一般页脚的颜色会比上面的内容区域要深一些，因为页脚中的信息在逻辑上是次要的，页脚区域的主要功能是版权声明、联系信息、友情链接、注册号等信息，在设计上一定要降级，并且页脚不要特别显眼。

技术原理

网页设计师在开始一个项目之前，一定要了解网页背后的技术原理。技术决定了哪些设计和交互是可行的，哪些是不可行的。同时，技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。

过去，网页前端工程师和设计师是一个岗位，叫网页美工。这个岗位需要在完成视觉设计后，将页面转为静态网页，交给下一个环节。随着分工越来越细，就出现了网页设计师和前端工程师两种岗位。然而，网页设计师不能不受技术限制地进行设计。

我们先来了解一下网站的基本存储原理。在电脑的C盘保存一张叫logo.jpg的图片，然后在浏览器中打开这个网址：C:logo.jpg

你看到了什么？

对，就是这张图，这就是网站的原理，网站的资源和文件都是存放在类似我们电脑的东西里面，也就是服务器，我们通过域名来调用网络上不同的页面和文件，如果服务器关闭了，网站就瘫痪了。

我们每次通过浏览器访问一个网站，输入一个网址，域名就会转发到一个IP地址，也就是服务器的门牌号，找到之后我们的浏览器就会从服务器下载网站代码，并将代码翻译成我们能看懂的界面，比如：文字，边框，表格等等其实都是代码的形式。

浏览器也会把网站所需要的图片、视频分别下载到缓存中，当我们通过表单输入我们的用户名和密码时，我们的信息就会上传到服务器，服务器处理完之后（比如登录成功的信息）再发送给我们的浏览器。

所以当我们访问一个网站的时候，我们的电脑和浏览器要通过网络和服务器进行多次“握手”，当然，多次的“握手”会拖慢加载速度，所以我们的智能浏览器会对已经下载过的资源进行缓存，避免浪费。

这种机制被称为“cookies”，浏览器会自动储存你访问过的网址、网站图片、视频、表单信息等。

基于鼠标的手势操作

1.基于鼠标的交互

在不久的将来，个人电脑可能会通过多点触控、语音交互等方式与我们进行交互，但目前网站设计最主流的交互方式仍然是鼠标和键盘。

我们来看看鼠标的构造吧！

鼠标的使用方式有四种：移动、左键单击、右键单击和拖动。我们在页面上的大部分操作都是通过单击鼠标左键来完成的，因此网页也是点击的艺术。右键通常会让人联想到右键菜单，但许多网站和网络应用程序也会为右键定制一些操作和交互。鼠标主要与超链接和按钮交互。

那么我们先来了解一下超链接的四种状态：（前端术语叫：超链接标签的四个CSS伪类）。

按钮和文本的不同状态

同样的链接样式也可以应用在图片、按钮、表格上，点击、鼠标悬停、鼠标按下都可以设计成不同的样式，让用户更容易通过鼠标感知到对象正在被按下，这种对用户的提示也叫“点击感”。

当然，按钮和链接稍有不同，除了正常和鼠标悬停状态外，按钮还有一种状态叫不可点击，这个状态会让按钮变灰，提示用户该功能因为条件不满足而无法点击。

2. 静态网页

了解了基本的技术背景和鼠标交互之后，我们来谈谈实质内容。

我们平时看到的网页都是静态网页，静态网页都是由HTML编写而成的，我们存放在服务器上的网页代码基本都是HTML格式的。

HTML 的全称是 HyperText Markup Language。“超文本”意味着这种语言既可以包含文本元素，又可以包含图像、链接、音乐等非文本元素。HTML 可能会让没有编程过的人很头疼，但它已经是所有编程代码中最简单的了。

不用紧张，你可以把它想象成摩尔密码，它是服务器与浏览器之间的秘密语言，浏览器会把这些秘密语言翻译成我们能看懂的颜色、链接。

那么如果我们用 HTML 编写文本，它会是什么样子？

模拟代码编译过程

没错，代码就是一点一点编译出来的，在网站的任意空白处，右键点击查看网页源代码，就可以看到网页的HTML代码。

HTML 是一个由国际组织 W3C 发布和维护的代码。W3C 成立于 1994 年，是一个国际中立的网站技术标准组织。W3C 发布过许多版本的 HTML，其中影响最为深远的是 HTML4，而 HTML5，也就是 H5，可以说是一个划时代的版本。

H5标签比较现代，可以播放视频，省去了Flash插件的麻烦。（Flash插件会带来系统漏洞、加载速度慢等问题。）同时H5对多平台的支持非常好，适合现在这个移动端为王的时代。

H5甚至可以变成游戏、WebApp（在网页上像本地程序一样运行的网站，比如Blue Lake）、多媒体等等。但由于IE等不支持HTML5特效的浏览器仍然占据了很大比例的用户，从而制约了HTML5的发展。

浏览器可以理解为一个代码阅读器，它对HTML5代码的翻译不好就会造成所谓的“兼容性”问题，比如在HTML5中可以通过代码给DIV添加阴影，但这个效果在部分浏览器中无法显示。

不难理解为什么有些程序员会身穿印有“我讨厌 IE”字样的 T 恤，每次网站项目完成后，测试工程师都会使用 Chrome、Safari、Firefox、Opera、IE、Edge 等浏览器来测试网站的兼容性，这通常会让前端工程师很头疼。

因为修改代码会影响整个系统，所以经常会出现这种情况，但有的情况就不行。不过，这个问题还是有一些解决办法的，比如减少对用户份额低的浏览器的支持，对难用的浏览器加载专门的适配代码等。

3. 其他前端语言

以HTML为骨架，加上图片、多媒体，网站可以发展得更快。但是服务器的消耗非常大，所有用户都需要反复从服务器下载代码和图片进行“握手”，而且很多HTML代码都是重复的，造成了资源的浪费。比如我的网站header全是黄色，链接全是蓝色，那么每个页面都会有这么几行代码。

这个问题很快就被一种全新的代码——CSS技术解决了。

CSS 是层叠样式表 (Cascading Style Sheets) 的缩写，可以理解为网站样式（颜色、大小、位置等样式信息）。也就是 CSS 与网站内容（文字、图片、链接等内容信息）完全分离。也就是 HTML 完全分离，一个网站可以下载一份 CSS，然后为不同的页面调用这份 CSS 的缓存，这样就节省了服务器资源。

另外由于网站需要一些交互效果，比如点击效果、菜单效果等，前端工程师就需要使用JavaScript代码来配合，JavaScript是一种比较简短而强大的语言，对于构建一些基于浏览器的效果非常方便。

所以现在主流的网站配置都是HTML5+CSS3+JS代码的组合，当然为了兼容那些低端浏览器，也可能使用HTML4+CSS+JS的封装，这个要看我们主要目标用户群用什么浏览器了。

当然我不是要求你们学HTML、CSS、JS代码然后去做前端开发，因为现代互联网公司里已经有专业的前端工程师了，我们了解这些主要是为了了解前端工程师的工作，以便更好的配合他们。

主流形式：HTML+CSS+JS

4.动态网页

了解静态网页还不够，现在我们来谈谈如何让网站动态化。动态网页并不是说有疯狂炫酷的动画，而是随着时间、内容、数据库的调用，动态网页会生成动态网页。

比如你今天看到的新闻网站肯定和昨天的新闻不一样，但是网站首页的HTML代码是不需要手动修改的，而是编辑通过后台录入新闻、上传图片，编辑的上传过程都会录入到数据库中，而动态网页就是调用数据库内容展示给用户的一种形式。

动态网页会随时从数据库里取出信息来提供给用户，而且对用户来说，静态网页和动态网页看上去没什么区别。最愚蠢的判断方法就是看URL的结尾。静态网页以html或htm结尾，而动态网页采用了先进的网页编程技术，以Asp、Php、Jsp等结尾。

Asp、Php、Jsp、Aspx、Cgi都是针对动态网页的语言，当然为了提高网站的效率，有时候也会采用伪静态结构，结尾和静态网页一样，但实际上在用户访问之前就会调用数据库。

同时动态网页的URL会有一个特点，包含符号，现在最流行的动态语言是Php，比较早但是现在已经不常用的是Asp和Cgi，最安全的是Jsp，所以很多银行都是采用JSP编写的。

了解了这些之后，我们基本上就明白了网站是如何运作的。

主流的后台编译语言：PHP ASP JSP CGI

5.雪碧

我们在网站上经常会看到动画，那么动画实现的原则一般如下：

那么类似Google主页涂鸦的动画是如何实现的呢？

这种技术叫做：Sprite。CSS Sprite 即 CSS 精灵，又称为 CSS 精灵，是一种 CSS 图片合并技术。它调用的图片是支持多级透明度的 PNG 格式，然后以并排的方式进行动画处理。

比如一个卡通人物动画每帧的宽度是100px，那么就把它的动作1、动作2、动作3、动作4并排放在一张400px宽的PNG图片中。然后代码在100px宽的一帧中调用这张PNG图片作为背景图，我们就看到了动作1。然后一秒钟之后，代码会悄悄移动100px，我们就会看到动作2。因为速度很快，所以我们看到的是一个连续的动画。

Sprites 也有自己的缺点，如果帧数太大，会消耗很多内存，所以帧数一定要保持较少，如果你的动作设计成 12 帧，那么我建议你尽量删掉 2、4、6、8、10，保留一半的动作。

雪碧

6.视差滚动

视差滚动是一种利用不同移动速率来实现空间感的设计效果。例如，密尔沃基警察局的网站就大量使用了视差滚动效果。

实现原理是通过代码决定网页的滚动，滚动时页面中三层图片的移动速度和位移距离是不同的，从而形成一种类似于我们在物理现实中看到的空间感的视觉体验。

视差滚动不是什么高科技技术，如果您的网站适合做视差滚动，请大胆设计，并向前端工程师提出您的要求，我相信前端工程师可以满足您的要求，我们需要准备的是不同运动速率的分层静态PSD文件。

密尔沃基警察局网站 (milwaukeepolicenews.com) 使用视差滚动效果

网页设计标准

最后，说了这么多网站设计原则和构成要素，我们最后要说一下网站设计的规范。网站设计并没有特定的平台限定风格，也没有必须设计的系统级导航栏和工具栏，因此网站设计比较灵活，但过于灵活也会让我们的设计师无所适从。

接下来给大家介绍网站设计的规范app首页数据加载设计，大家在工作的时候可以参考一下。注意在设计之前一定要和前端沟通好我们使用的尺寸、字体、交互等，这样有助于避免后期产生误解。

1.画板大小

因为网页大小和用户的屏幕有关，而用户屏幕种类难以统计，所以我们的设计稿只能考虑主流用户的分辨率，其他分辨率通过适配解决。

Photoshop最新版本中的网页预设尺寸给了我们一些启发：常见尺寸（1366x768px）、大型网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13（2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些都是主流尺寸，如果我们做网站的话，建议按照1920x1080px这个主流分辨率来设计。

所以我们通常为每个屏幕设计一个网站，其宽度为 1920px，高度为 900px 左右。

为什么是900px？

因为1080还要减去浏览器头部和底部的高度，大概是900px左右。内容安全区域是1200px（或者1000px/1400px），用这个尺寸设计比较标准。当然在设计网页之前需要告知前端设计尺寸，因为适配方式和后续配合他们更有发言权。

您网站的尺寸规格

2. 文本标准

我们都知道网站上的文字都是前端工程师在代码里改写的，这个文字在浏览器上的渲染跟系统、浏览器都有关系，比如在苹果电脑上看到的文字效果跟在 Windows 电脑上看到的文字效果就不一样，苹果会把文字渲染出来，而 Windows 上的文字几乎都是像素颗粒。

从用户占比上看，Windows用户无疑是主流，所以即使我们使用苹果电脑来设计网页，设计出来的网页也应该与Windows显示一致，否则我们设计出很漂亮的图案之后，程序员是没办法把它恢复成我们设计时的样子的。

另外字体的大小也很重要，网页的显示面积决定了文字不能太大，在网站设计中，我们的文字大小一般在12-20像素左右。

为什么不能小于12px？

因为汉字如果小于12个像素，就无法容纳复杂的笔画，而奇数字又难以表达和适应，这就意味着我们必须使用偶数字号进行设计。

总结一下，文字最好用宋体，字号12px，渲染模式None，稍大一点的字体可以用微软雅黑，字号14-20px，渲染模式Windows Lcd或者Sharp，另外英文和数字最好用Arial字体，渲染模式None。

网站字体标准

3. 图像标准

网站设计中图片经常会使用4（宽）：3（高）、16（宽）：9（高）、1：1等比例，具体图片大小没有固定要求，但最好是整数、偶数app首页数据加载设计，主要考虑到一些适配问题。作为内容出现的图片必须有介绍信息和排序信息。

图片的格式有很多种，比如支持多级透明度的png格式，图片文件非常小的jpg格式，支持透明/不透明以及动画的gif格式等等，在保证图片清晰度的前提下，文件体积越小越好，那么如何才能让网页上使用的图片体积更小呢？

因此前端工程师有办法把网页中用到的图片组合成一张大的png，然后每个调用图片的元素都调用这张图并且稍微平移一点，显示的区域就移动到大图中需要的图像上了。

在线压缩工具 Tinypng 网站

4. 按钮

按钮的样式在这十年间变化很大，从最初的“斜面浮雕”样式，到后来的“写实风格”，现在扁平化风格更受欢迎。如果按钮在图片中，为了不影响图片的美观，会去掉padding，只保留border，这种设计方式就叫幽灵按钮。设计按钮的时候，记得同时设计按钮的鼠标悬停和按下状态。

不同时代的不同按钮样式

5. 表格

在网站设计中，我们经常需要用到一些输入框、下拉菜单、弹出窗口、单​​选按钮、复选框、编辑器等，这些都是系统级控件，一般都是由系统设计直接调用的，但是系统设计有时候不能满足我们的要求，系统内置的形式不够高级，点击起来不舒服，也不符合网站整体设计的品牌感。

然后我们就可以通过CSS来给这些表格添加样式，包括颜色，大小，内外边距等等，这样当我们遇到涉及表格的需求的时候，我们也可以进行定制化的设计。

Mateusz Dembek 提供的不同风格的表单设计 UIDE Kit

6. 网格

我们定义整体的宽度为W，然后将整个宽度分成多个相等的单元A，每个单元A有一个元素a和一个间距i。所以它们之间的关系是(A×n)-i=W。

当然，每个应用的大小可以划分成多个网格，这取决于我们内容布局的密度。之后我们将内容过多的网格添加到另一个网格中，以获得更大的布局空间，其他元素则必须留在自己的网格中，这样就完成了一个非常科学的布局设计。

例如：如果网页宽度为1000px，我们可以使用：

假如网页宽度为990px​​，我们可以使用：

假如网页宽度为980px，我们可以使用：

网格系统具有以下具体的优点，可以大大提高网页的标准化程度。

在网格系统下，页面上所有组件的尺寸都是规则的，而且基于网格进行设计可以使整个网站各个页面的布局保持一致，从而增加页面的相似度，提升用户体验。

网站的网格化将使网站看起来更加有序

7.适配Retina屏幕

2012年，苹果发布了Retina Macbook Pro，Retina屏幕的电脑份额开始上升。简单来说，Retina屏幕的屏幕密度是传统屏幕的两倍，清晰度更高，甚至可以满足我们视网膜的最高识别度，所以又被称为视网膜屏幕。

我们设计的网站在安全距离大概是1000像素左右的情况下，在这种屏幕下会显得很粗糙。所以如果在Retina屏幕上显示一个400X300PX的区域，我们其实需要给前端提供一个800X600PX的切图，因为Retina屏幕上一个点是高出顶部两个像素的。

所以我们的用户视网膜屏幕占比比较高，比如设计师，怎么才能兼顾高清屏和普通屏呢？

首先我们需要在Retina屏幕的尺寸下完成设计稿，建议是传统设计稿的2倍大小。然后切出两套切图（非Retina屏幕用户如果也加载双倍大小的资源会比较慢）。普通切图命名为logo.jpg，Retina切图命名为logo@2x.jpg。前端通过代码识别，如果屏幕是Retina就加载双倍大小，否则就加载普通大小。前端可以使用Retina.js()提供的技术进行识别。

8. 自适应和响应式网站

我们看到有些网站在使用电脑、手机甚至 iPad 浏览时，体验都非常好，这就需要我们为了用户体验，把网站做成自适应或者响应式的。响应式和自适应的原理差不多，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的 CSS。

（1）自适应网站

自适应网站的设计稿是一致的，但是设计稿需要考虑当屏幕变小时会如何变化。比如一个网站有5个区块，4个间距，当宽度缩小到900时应该如何变化？这就是自适应布局。例如：Zcool.com、Dribbble等网站都采用了自适应布局。：

（2）响应式网站

响应式网站需要设计不同版本的设计，然后根据不同的设备提供不同的CSS样式。比如你的设备宽度是750px，网站就知道你是用手机访问的，就会为你导入手机独有的样式。如果宽度是电脑，就会为你导入电脑的CSS样式。

对于设计师来说，适应性需要考虑网站在不同设备宽度下的分割和布局；响应性则要求为电脑、平板、手机设计至少三套设计稿（但这三套设计稿的内容是一样的）。

简而言之，自适应和响应都是网站为了让用户体验适应浏览设备而做出的努力。

9.适配规范

手机端：在适配移动端页面时，我们一般会以iPhone作为画布标准，原因是iPhone的显示效果比较清晰，要求也比较高，另外用户基数也高，适配时一般会以750x1334px作为主尺寸，然后将网站导航改为移动端APP常用的汉堡+抽屉导航形式。

同时网站上的按钮也需要改为像我们在手机APP中看到的那种几乎占满左右屏幕的按钮，并且每个按钮要大于88PX，以方便手指点击。字体方面，我们需要将网站上的字体全部改为萍方字体，并且将字号设置为24PX以上，渲染模式设置为锐利。英文需要改用SF-UI。

也就是把网站改成APP一样的手机网页，这样才能保证良好的移动用户体验，如果用户使用安卓手机，那么前端代码会在设计稿的设计基础上，适当增加图片和间距，以适配安卓屏幕。

iPad：iPad 的尺寸有 1024×768、2048x1536px 等，不管怎么变，基本和电脑屏幕尺寸差不多，所以在 iPad 上浏览网页基本还是比较舒服的。所以很多网站并没有专门针对 iPad 进行适配。如果想让 iPad 用户用起来更舒服，可以从文字大小（24PX 以上）、按钮大小（88PX 左右及以上）、交互形式（抽屉导航，导航不随屏幕滚动）等方面入手。

不同设备的注意事项

总结

不管你面临的项目是To C还是To B网站产品，我们都应该先确定设计风格>寻找设计素材>创建情绪板>完成视觉稿>抠图标注>建立视觉规范>进行项目走查。

如果是设计一般网站页面，可以按照1920 X 1080px的尺寸来设计，每屏高度900px，字体采用宋体12px None和微软雅黑14-20 Windows LCD，banner尽量全屏，但图片需要按照4:3或者16:9的比例来设计。

在制作网站时，可以创建网格以实现更好的自适应和响应式布局。我们还需要为超链接和按钮设计不同的对应鼠标状态。此外，我们还可以尝试在网站设计中加入视差滚动、精灵动画等有趣的交互。

如果设计移动端页面，可以按照750X1334PX尺寸设计，字体使用24PX或更大，英文字体使用SF UI，按钮和点击区域大于88PX，方便手指点击，头部保留微信或浏览器的导航区域。