点击进入！网页设计基础知识全攻略（2万字干货长文）

前言

网页设想，是一个系统的、庞大的工程，我曾在《自学网页设想，需方法会的网站开辟流程》一文中，曾简要先容了网站的开辟流程，但这对想要进修入门网页设想的初学者来说，还是远远不够的。

现在天 @酷coo豆 想要和大师分享的这篇文章，可以帮助新手、或是内行设想师，更加周全的熟悉网页设想。看过本文后，我深切感遭到作者的专心良苦，其动身点与本专栏的定位非常相投，故此火烧眉毛的想和大师分享此文。

这篇文章的作者为：郗鉴，他的公众号为：西见，大师可以去关注一下哦。

目录简介

本文从网页设想的工作流程、网站品种、网站组成部分、技术道理、设想标准等维度，周全总结了网页设想的根本常识。接近两万字的干货，新手看完便可以入门了。

一、网页设想是什么？

网页设想也被称为 Web Design、网站设想、Website design、WUI 等。它的本质就是网站的图形界面设想。

虽然现在我们常利用移动端上的 APP 来获得资讯，可是明显基于小我电脑平台的网站上网方式陪伴我们的历史要比手机久很多：从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地；中国的网站高速成长了近三十年。

我是在小学起头去网吧「上网冲浪」的，那时的电脑屏幕很是小，分辨率只要800×600像素（对照一下，iPhone8的分辨率是750x1334px），网速也很慢，经常掉线大概加载失利。那时的网站性能和体验都欠好，而现在网站设想和曩昔已经有了庞大的变化：重视用户体验、重视页面动效、富媒体等设想让现在的网站体验并不比软件和手机 APP 差。加上小我电脑的提高，网站照旧是人机交互中很是重要的平台之一。

那末作为UI设想师我们就必须把握网站设想的标准和了解网站运转的道理，才能更好地把握这个平台。明天就向您好好说道一下网站必须晓得的那些事儿。

二、工作流程

首先让我们来看一下网站设想的工作流程吧，除了之前先容过的用户研讨、撰写产物需求文档、市场文档、做竞品调研等工作之外，与设想师亲近相关的网站项目流程可以分为原型图阶段、视觉稿阶段、设想标准阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。

每个阶段都需要设想师介入和领会，万万不要只在意视觉稿这个阶段，有很多前期与前期工作一样需要获得我们的重视。好，让我们一个一个来领会它们吧。

1. 原型图阶段

原型图阶段中设想师需要和产物司理相同需求，这时要留意，并不是产物司理向设想师下发需求，而是需要相互就自己擅长的方面停止相同。视觉方面具体显现也许设想师会有更好的方式，这时需要在设想之前与产物司理告竣分歧。

2. 视觉稿阶段

视觉稿阶段就是我们要按照原型图肯定的内容和大致版式完成网站的界面设想了，在设想网站的时辰，我们需要一些图像和灵感的素材。比如做天下杯专题时，我们除了收集很多素材之外，也可以设想一个「情感板」（Mood Board）。

简单讨情感板就是将一些与主题相关的材料和素材拼贴在一路，这样可以更好地指引我们全部需求的设想主题和大致感受。别的，很多网站的头部凡是需要主视觉来抓人眼球，这时能够会利用到需求方供给的明星照片、主题素材、LOGO、主视觉PSD等，那末用素材和这些需求方供给的材料停止夹杂并拼出让人感觉震动的头部视觉就是我们的方针了。

主视觉下面的信息排布更夸大公道性，这时也需要和产物司理相同从背景调取的图片尺寸、题目字段长度等，然后按照这些要求完成页面信息部分的设想。总之，设想进程中需要我们不竭思考和相同才可以完成一个比力棒的视觉稿。

3. 设想标准

当视觉稿通事后，很多设想师能够不会自动去做设想标准。实在每一个可迭代的产物都需要设想师来总结设想标准，设想标准就是一切页面中共性的工具，比如说字体分歧的巨细、图片的尺寸、按钮的款式等，这些共性也是用户拜候网站时会了解成牢固概念的凭据。

比如一样的分享功用假如采用两种截然分歧的款式就会让用户困惑。那末设想标准首要也是在约束设想师我们自己，在用户有限的记忆力中削减思考的本钱。同时，设想标准也可以保证同一个项目标分歧设想师都能输出一样气概的设想来。最初，设想标准对于设想师小我来说也是对项目影响的一个佐证，可以证实你的思考和你在项目中的职位。

所以我以为设想师应当自动去做设想标准和项目总结。设想标准若何去做？实在设想标准就是把首要页面的元素牢固成同一元素即可。具体来说一个产物的设想标准应当有：字体标准、主体色标准、图表标准、图片标准等分歧分类。

4. 切图

网页设想师凡是不需要为前端工程师切图。由于前端工程师凡是需要把握 PS 软件技术。假如碰到特别情况需要我们切图时，我们可以利用诸如 Cutterman、Zeplin 等切图插件中的 Web 选项为前端切出网站所利用的图片。

5. 前端代码

前端工程师会用代码重构我们设想的页面，把图纸变成静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便领会网站能否是到达了我们要求的数据，也会停止埋点。埋点就是在页面代码里插入一些统计代码，方便我们以后肯定哪些页面拜候量高，哪些没有到达预期。在尔后实在还会有测试工程师介入来发现编译完的网站能否存在一些缝隙等。

6. 项目走查

网页设想完成后还需要设想师停止项目走查，来肯定网页复原度能否有题目。假如发现有和设想稿收支很大的，就需要要求前端工程师停止调剂。这个步调很是重要，由于网站的制品才是我们终极的输出，不要以为设想稿很标致而实现后的页面就不需要我们负责了。

三、网站品种

网站的分类按工具来分别可以分为 To C端和 To B端两种。To C端就是面向用户和消耗者，例如门户网站、企业网站、产物网站、电商网站、游戏网站、专题页面、视频网站、移动端H5 等，均是面向用户和消耗者的产物。由因而面向用户和消耗者，所以设想上一定要可以吸引人，而且以用户为中心斟酌体验设想。

而 To B端作为一个需求量很大的种别，实在常常被设想师所轻忽。什么是 To B端项目呢？比如电商网站供货商的背景、Dashboard、企业级OA、网站统计背景等，这些面向商家和专业人士的网站就是 To B 类网站项目了。这些项目标要求和 To C端网站的要求截然不同：To B 类项目最重要的是效力而不是体验，由于说白了我们在设想利用者工作的工具，我们在设想时必须首先要保证操纵者可以高效地完成他们所需要完成的工作。那末让我们来领会一下网站的分歧门类吧。

1. 门户网站

门户网站国内比力著名的有新浪、腾讯、网易、搜狐；国外比力著名的如 Naver、Llinternaute 等。我们可以看得出，门户网站都是大而全包含生活万象的。比如腾讯网就有消息、财经、视频、体育、文娱、时髦、汽车、房产、科技、游戏等分歧频道。

门户网站的门坎很高，必必要有薄弱的气力才可以建立起一个门户网站，而门户网站需要的设想师数目也惊人。首先门户网站需要产物偏向的界面设想师以迭代的方式保护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设想师来处置平常需求：比如巴黎古装周需要负责时髦频道的设想师来设想对应的专题、天下杯小组出线需要负责体育频道的设想师来设想对应的专题等。地球上的每一天都有大事发生，那末门户网站中的设想工作就不会少。

别的，具体对接频道的设想师也需要有一定擅长之处：比如对接体育频道的设想师最少应当熟悉足球篮球等体育项目、时髦频道的设想师要晓得各个大牌的设想气概、佛学频道的设想师需要晓得根基的佛学常识和隐讳、文化频道的设想师需要对传统文化有所浏览。所以根基上门户网站的设想师可以分为产物组和频道组两种。

2. 企业网站

每个企业都需要有一个网站来对外展现自己的才能、先容自己的产物等。现在打仗一个陌生的企业时，很多老百姓城市上网搜索一下其官方网站考证真伪。网站已经是中小企业的标配了。企业网站设想时凡是会有网站首页、公司先容、产物中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展现很多诸如公司情况、团队成员、企业文化等现实的照片，配合一些材料停止设想。

企业网站凡是也追求所谓「高端」、「大气」、「上档次」的气概，也就是为了到达让消耗者认同品牌这个要求。所以假如我们接到了企业网站的设想需求，无妨多去阅读参考一些加倍大牌的企业网站作为竞品来参考。

3. 产物网站

从苹果公司的 iPhone 先容页到小米手机8的先容页，我们会发现一种新颖的产物营销形式，就是产物网站。设想这类网站的内容主如果该产物的工艺、技术、设想、特点、机关、利用处景等。这样的产物页希望可以让用户有沉醉感，所以一般来说都是利用全屏结构，然后配合一些如视差转动等方式让我们感遭到这个产物的极致邃密。由于中国互联网和产物设想成长很快，所以产物类网站设想需求一定会越来越多。

4. 电商网站

电商设想师也属于网页设想师吗？是的。假如依照平台细分，无疑电商设想师地点的平台大部分属于网站。以淘宝、天猫为代表的电子商务成长得太快了，以致于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的贩子都起头在中国电商平台上开店肆了。

店肆实在自己属于平台自己的页面。可是为了增强每个店的本性，平台为商铺开通了一些页面自界说的装潢功用，比如宝贝详情、店肆排版、banner头图设想等。这样商铺有一定权限在平台规定的范围内利用图片和一部分css款式代码来装潢自己的店肆，电商设想应运而生。虽然带着枷锁舞蹈，可是有很多店肆由于设想精巧而能带动销售。那末电商设想师固然就变得很是重要了。

5. 游戏网站

游戏是一个庞大的产业，很多公司的支出泰半壁山河都来自游戏产业。那末除了游戏需要建造精巧之外，游戏的官网也必须设想精彩。不要忘记，每一个玩家都需要拜候你的游戏官网才能完成下载、充值、交际等重要操纵。

国外游戏网站比如暴雪文娱公司（https://www.blizzard.com）的官网设想得极为精彩，每个游戏的官网都是一个佳构。比如魔兽天下、星际争霸2等游戏官网，头部都是视觉冲击很是激烈的动画。然后网站界面的元素都带有游戏的气概，恍如登录这个网站你就在游戏当中了。

6. 专题页面

固然非论是电商还是门户网站，在节日城市需要设想师来设想一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日常常会有促销、专题报道等各式活动。专题设想生命周期很短，上线后根基过了流量的阿谁点就根基没用了。所以我们找不到前几年的618大概双11专题页面，由于过了特定的期间专题页面就置之不理了。

所以在那末短的生命周期怎样捉住人的眼球？固然不能利用现代主义设想那种性冷淡气概，而应当在头部只管刺激用户，用刺激对照强的色彩、复杂立体的外型、冲击感强的笔墨吸援用户来看。究竟每小我能够只会看一次，不能放过这个机遇。所以专题设想和产物设想正相反，专题设想必须刺激。

7. 视频网站

视频网站的拜候量惊人，而且用户的黏着度更高。很多视频网站除了采办版权之外还有很多 UGC 内容。多说几句，UGC（User Generated Content）是指用户发生的原创内容，很早之前 web1.0时代用户主如果单向阅读网站，web2.0提出的 UGC 概念就是说用户不但在阅读也会上传内容。那末视频网站为什么会火呢？首先要感激宽带的成长。在今年我们国内点击视频就立马可以播放了，而在几年前需要期待几分钟才可以加载够缓存。

视频网站的设想主如果要斟酌利用处景：视频是用户首要旁观的地区，所以视频地区首先要充足大，别的色彩应当以暗色为主，由于亮色会干扰到用户旁观视频。然后其他的地区图片比例应都为16:9的视频尺寸，方便前期编辑在背景增加。视频网站的设想师一样也可以分为产物组和运营组两个品种来处置产物偏向和运营偏向的分歧需求。

8. 移动端H5

你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等 H5 刷过屏吧？平常我们经常被这类好玩儿的 H5 刷屏。实在 H5 全称是 HTML5，并不是仅仅指移动端，而是网页前真个开辟说话，由于约定俗成的概念，我们现在经常把手机中的调集视频、动效、互动的这类营销形式称为 H5。实在它的本质是应用网页技术运转在手机阅读器或内置阅读器内的网页。

随着技术日新月异的成长，H5 显得越来越有传布代价和份量。微信、阅读器等平台级产物在手机端中火爆促进了依靠进口而传布的 H5 的成长。假如设想出色，你的项目能够会在朋友圈发抱病毒传布的结果。

移动端H5尺寸

设想移动端 H5 项目标时辰，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信大概阅读器导航地区。首要内容地区便可以自在设想了。一般H5的操纵是高低滑动。字体方面利用苹方字体，而且字号设备为24PX以上，衬着方式设备成锋利。英文则需要利用 SF-UI 取代。固然 H5可以挪用布景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开辟之外，实在还有一种方式可以无需代码天生简易版的 H5，就是经过 H5 工具天生。

今朝比力火的 H5 天生工具有：MAKA、iH5、兔展等，假如我们要自己天生而不是经过前端开辟，那末我们设想稿的尺寸需要设备为640x1008PX。这些工具较为简单，注册后将 PSD 上传即可对每个原件停止动效的设备了。可是假如需要复杂的动效和交互，还是需要前端工程师的配合。

9. 背景网站

背景网站又叫 Dashboard，中文翻译为仪表盘。其寄义就是有一大堆数据与统计信息。背景网站是 To B 范例，那末首先的需求就是能快速地显现给操纵者他需要把握的数据。可是数据很是死板，我们可以利用诸如「折线图」、「饼状图」、「曲线图」、「表格」等分歧方式来展现这些烦琐的数据，这类图形表达数据的方式也叫做数据可视化。

背景网站不需要出格心爱的插图以及卡通形象，最重要的是效力。所以假如您经常处置 To C 类的需求，接到了 To B 类的产物需求时一定要留意这一点。背景网站由于需要更大的画面，凡是会利用全屏式排版，也就是撑满全部画布。那假如小屏怎样办呢？前端会利用相对结构缩小各个元素，排版的位置也会用百分比来肯定。

10. CRM系统

CRM 即 Customer relationship management，翻译过来是客户治理治理系统。CRM 是企业对客户停止信息化治理的一种形式，用互联网技术实现对客户信息停止收集、治理、分析，对企业的销售、办事、售落后行监控。

常见的功用有员工日程治理、定单治理、发票治理等。我们在设想这类项目时一定要将信息按所属的逻辑关系分类，增强对照、对齐、反复、密切性的原则，使操纵者在利用的时辰感遭到便当。

11. SaaS

假如我们办事于为企业搭建 CRM、ERP 大概 OA 等系统的第三方公司，那末我们能够会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是办事。其他公司会来供给 SaaS 办事的公司定制系统，然后办事公司会为客户供给从办事器到设想一体化的办事。这里提到这个词是避免设想师误解它的界说。

12. 企业OA

企业OA，即(Office Automation)，也就是办公自动化系统。在六七十年月就兴起了一场利用电脑来改变传统办公方式的反动。在大型企业经常会面临职员众多、地域广袤、打点公司事件手续冗杂等题目，那末企业OA 可以很好地处理这方面的题目。经过企业OA 可以完成告假、调休、离职、查询公司规章制度、请示、报告等工作。这样削减了很多窗口本钱和员工的时候本钱，增强了公司处事效力。

互联网公司更是供给给员工除了企业OA 之外的交换功用，比如建立员工 BBS 和留言板等，在上面大师可以对公司提出倡议和定见。企业OA 一般出于平安和保密性的缘由，很多公司都加倍愿意自己开辟。设想师在设想此类项目时一样要以操纵者的体验和效力为重，让操纵者轻易可以找到在当前页面中最重要的功用。

四、网站组成部分

领会了网站的分歧种别后，让我们来看看组成一个网站需要哪些部分吧。网站是由分歧网页经过超链接毗连而成的，而分歧网页也是由分歧模块组成的。我们设想的是一个像蜘蛛网一样的收集，而不是一张海报。所以我们在设想网站时要分外斟酌从用户角度动身看到的网站，而不能孤登时把它设想成一个平面作品。

1. 首页

拜候一个网站时第一个我们触及的就是网站首页。首页别名叫作 Index 大概 Default，是索引和目录的意义。在网站成长的前期阶段，网站并不是富媒体，而是类似于一本书一样：首页类似书籍的目录，需要检察哪个子网页就点击链接即可进入。到了现在，网站首页照旧是指导用户进入分歧地区的一个「目录」，这个目录除了导航功用外也要暴露一部份内容给用户来吸引点击，暴露的部分一定要有一个「更多」按钮来指援用户找到二级页面。

2. 二级页面

在逻辑上，首页是一级页面，从首页点击进入的页面均为二级页面。二级页面以后还有三级页面品级别。从点击的几率上来说，自然是越靠前拜候量越高，页面层级越深越不轻易被用户找到。一般网站有三级页面，就是为了避免用户丢失。为此还会在页面中加入面包屑导航。面包屑导航就是在页面第一屏出现的诸如 首页 > 体育 > NBA频道，这样的超链接结构，方便用户了解自己在那里，而且点击可以回到其他页面。

3. 底层页

在网站结构中最初供给用户本色资讯的页面就是底层页。比如，在门户网站首页或二级页面中我们点击感爱好的题目后，在底层页中才会看到全数的资讯。待用户阅读完底层页的信息后可以顺势在左侧或右侧的侧栏寻觅用户能够感爱好的相关内容；在底侧可以看到网友的批评；底侧也会有分享按钮、赞功用等；假如侧栏用户转化率比力差，最底部还可以再次出现保举相关资讯的功用。总之，在用户阅读完自己喜好的资讯后，要继续吸援用户顺势阅读其他的资讯大概回到频道。

4. 广告

门户类网站若何盈利？广告是变现方式之一。网站的广告一般由负责运营需求的设想师负责，可是也能够由频道设想师、产物侧设想师来完成。在网站中常见到的广告图形式就是 banner。banner 一般尺寸庞大，在网站当中很是显眼。是以也纷歧定是内部广告，也有内部活动、保举资讯等。

那末 banner 图的尺寸有牢固吗？答案是没有。Banner 的宽度有两种，一种是满屏（1920PX）、一种是基于平安间隔的满尺寸（1200px或1000px）。高度要留意了：一般以1920x1080px为基准的用户屏幕，加上阅读器自己与插件和底部工具条等间隔，留给网站的一屏高度大要为900px，所以 banner 不成以做得很高，否则第一屏信息会显现得不够。你能够会说，那就让用户往下拉啊。可是在网站的拜候用户当中，第二屏触及到的用户比第一屏会少很多。也就是很多用户能够点击网站后就会跳走大概封闭，那末第一屏的信息真的很是重要了，可谓是寸土寸金。

所以我们的 banner 不应当占据过大的地区。比如站酷网的 Banner 地区为1380x350px。那末除了首页庞大的 banner 广告位，网站还有哪些广告形式呢？

对联广告

在门户网站中我们经常会看到网站左右平安地区之外会有个随屏幕转动的像「对联」一样的广告，凡是 banner 也会是一个广告内容，而且居中会弹出由 HTML5 技术或 Flash 技术建造出来的弹窗广告。这类广告一般组合售卖，也就是说一进网站你就会被周全轰炸，没法不留意到这个广告的存在。这类广告点击进入还有配合的专题页等，可见需要设想师配合的地方很是多。

信息流广告

信息流广告是埋在信息流中的一种广告形式。这类形式操纵了格式塔道理，用户会不自觉地阅读起广告的内容，缘由是由于它的形式和其他信息一样。比如朋友圈、知乎、Facebook 都采用了信息流广告，信息流广告的结果很是强，可是会牺牲一定的用户体验。信息流广告的尺寸与信息流不异。

以上从广告的形式上简单先容了三种常见的网站广告形式，假如我们在阅读需求时看到了 cpm、pv 等单词是什么意义呢？他们是广告的免费形式。cpm 是指依照广告 pv 来免费，cps 是指依照用户消耗免费，cpa 是指依照用户注册数免费，cpc 是指依照用户点击付费。针对分歧的免费形式，在设想时也会采纳分歧战略来增强广告需要到达的目标。

5. Footer

在网站具体的页面设想中，底部会有一个地区我们称之为 footer。一般 footer 的色彩城市比上边内容地区要暗，由于 footer 的信息在逻辑的级别上是主要的。footer 地区的首要功用是版权声明、联系方式、友谊链接、备案号等信息。在设想时一定要升级处置，不要让 footer 变得出格明显。

五、技术道理

网页设想师在做项目之前必须领会网页背后的技术道理，技术决议了哪些设想和交互是可以实现的、哪些是不成以的。同时技术道理也决议了我们需要若何配合前端工程师来完成一些复杂的交互。实在在曩昔网页前端工程师和设想师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设想后把页面做成静态网页交给下面的环节。随着合作越来越细致，发生了网页设想师和前端工程师两个工种。可是网页设想师不成以离开技术范围口不择言地去设想。下面让我们来领会网站的根基存储道理：

在您的电脑 C盘保存一个叫 logo.jpg 的图片，然后在阅读器翻开这个网址：C:\logo.jpg 你看到了什么？对，就是这张图片。这就是网站的道理：网站的资本和文件存储在一个类似我们电脑的工具里，那就是办事器。我们经过域名来调取网平分歧的页面和文件，假如办事器关机了那末网站也就瘫痪了。每次当我们经过阅读器拜候网站时，敲击一个网址，这时这个域名会转向一个 IP地址，这个 IP地址就是办事器地点的门商标码。找到了今后，我们的阅读器会从办事器高低载网站的代码并把代码翻译成我们能看懂的界面，比如笔墨、边框、表格等现实上都是代码的形式。阅读器还会把网站中所需要的图片、视频等零丁下载到缓存里。当我们经过表单输入用户名和密码时，我们的信息就会上传到办事器中，办事器处置完（比如登录成功这个信息）然后再下发给我们的阅读器。

所以平常我们拜候网站时，我们的电脑和阅读器要经过互联网与办事器停止屡次「握手」。固然老「握手」会形成加载速度变慢，因而我们聪明的阅读器会把已经下载过的资本缓存下来，避免浪费。这个机制就是「cookies」：阅读器会自动存储你拜候过的网址、网站图片、视频、表单信息等。

1. 基于鼠标的交互

在未几的未来，小我电脑能够经过量点触控、语音交互等方式与我们交互，但今朝网站设想最支流的交互方式还是鼠标和键盘。来让我们看看鼠标有什么结构吧！我们对鼠标的利用无外乎移动、左键、右键、拖拽四种方式。我们在页面中的大部分操纵都是经过鼠标左键点击完成的，所以网页也是点击的艺术。右键一般会唤起右键菜单，可是很多网站与网页利用法式也会将右键自界说设想一些操纵和交互。与鼠标发生交互的主如果超链接与按钮。那末让我们来领会一下超链接的四个状态吧（前端术语是：超链接标签的 CSS 四个伪类）。

Link

Link 是指超链接一般的时辰的状态。一般超链接需要与普通笔墨区分开来，比如换一种色彩大概加下划线。固然下划线还有一个感化就是方便弱视群体区分超链接与普通笔墨。Link 默许都是蓝色的（色值：#72ACE3），可是为了增强网站的品牌性我们也可以把链接色彩更换成另一种色彩。总之一定要在形式上与普通笔墨发生不同才可以。

Visited

Visited 是超链接被点击今后的状态。比如新浪网消息很是多，所以点击完一个消息后用户能够不晓得自己看过没看过这条消息了。所以新浪网利用了 Visited 属性，点击后的消息色彩就纷歧样了，方便用户区分自己哪些消息还没有阅读。

Hover

Hover 是超链接鼠标经过状态。这个状态是毗连中最为重要的状态。实在不但超链接，按钮和图片以及视频等一切可交互的元素都应当设备 Hover 属性，也就是鼠标悬停时的状态。一般来说变更色彩和放大是 Hover 状态的根基方式。

Active

Active 是指超链接的激活状态。点击后超链接可以经过 CSS 加载一个状态。

一样的链接款式也可以利用在图片、按钮、表单之上。点击、鼠标悬停、鼠标按下都可以设想成份歧的款式，方便用户经过鼠标感知这个物体是被我按下去的，这类给用户的暗示我们也叫做「点击感」。固然按钮会和链接稍有分歧，按钮除了具有一般和鼠标悬停等状态，还有一种状态叫不成点击。这类状态将按钮置灰，提醒用户这个功用由于条件不满足不成以点击。好了，您可以举出几个点击感 Web 设想的例子吗？

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（在网页上如当地法式一样工作的网站，比如蓝湖等）、多媒体等多种形式。

可是由于 IE阅读器这类不支持 HTML5 结果的阅读器在用户中占比还很高，所以形成了 HTML5 成长的制约。阅读器可以了解为一个代码阅读器，由于它对 HTML5 代码的翻译工作欠好就会形成所谓「兼容性」的题目。比如 HTML5 中可以经过代码给一个 DIV增加投影，那末在某些阅读器中就显现不了这个结果。

不难了解为什么有法式员会穿着 i hate IE 字样的T恤了吧。在每次做完一个网站项目时，测试工程师城市用 Chrome、Safari、Firefox、Opera、IE、Edge 等多个阅读器测试网站的兼容性，这时凡是让前端工程师很是头疼。由于代码动一发牵满身，经常这个好了阿谁又不可了。可是针对这类题目也有一些处理计划，比如削减对用户占比不高阅读器的支持、对欠好搞的阅读器零丁加载特定的适配代码等。道高一尺魔高一丈呀。

3. 别的前端说话

有了 HTML 这个骨架，加上图片和多媒体后，网站的成长速度就更快了。可是办事器的消耗很大：一切用户都需要反复地来办事器下载代码和图片等资本停止「握手」，而且很多 HTML 代码都是反复的，形成了资本的浪费。比如，假如我网站的头部都是黄色的、链接都是蓝色的，那末每个页面城市烦琐这几句代码。这个题目没多久就被一种崭新的代码处理了：CSS技术。

CSS 是层叠款式表的意义：我们可以了解为现在把网站的款式（色彩、巨细、位置等款式信息）也就是 CSS 和网站的内容（笔墨、图片、链接等内容信息）也就是 HTML 完全分隔，而且一个网站可以下载一份 CSS 然后分歧页面都调取这份 CSS 的缓存，那末就节省了办事器资本。

别的，由于网站需要一些交互结果，比如点击殊效和菜单殊效等，那末需要前端工程师利用 Java script 代码来配合。Java script 是一种比力短小精悍的说话，构建一些基于阅读器的殊效很是随手。所以今朝支流的网站设置是 HTML5+CSS3+JS 代码的组合，固然为了兼容那些低端阅读器也能够利用 HTML4+CSS+JS 的套餐。这取决于我们的首要方针用户群在利用什么样的阅读器。

固然，我讲这些并不是要求您去进修HTML、CSS、JS 代码然落后行前端开辟，由于在现代互联网公司里已经有专业的前端工程师了。我们领会这些主如果要了解前端工程师的工作以便更好地配合他们。

4. 静态网页

领会完静态网页还不够，现在让我们谈谈网站若何动起来。静态网页不是说它有狂拽酷炫的动画，而是静态网页会随着时候、内容和数据库的挪用而发活泼态的网页。

比现在天看到的消息网站和昨天的消息必定纷歧样了，可是网站首页的 HTML 代码并不需要人去手工点窜，而是让小编通事背景录入消息、上传图片就行了。小编上传背景的进程就会输入数据库，而静态网页又是调取数据库内容显现给用户的一种形式。静态网页会随时调取数据库中的信息给用户，而对用户来说似乎静态网页和静态网页长得都是一样的。

那末最傻瓜的判定方式是看网址结尾，静态网页结尾是 html 或 htm，而静态网页由于利用了高级网页编程技术，结尾则是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是静态网页的说话，固然有的时辰为了让网站效力提升也会利用伪静态结构，结尾和静态网页就分歧了，可是现实上是会在用户拜候前调取一遍数据库的。

同时静态网页的网址会有一个特点，含有？标记。静态说话今朝最火的是 Php，较早而现在比力少见的是 Asp、Cgi，最平安的是 Jsp，所以很多银行采用 JSP 编译。领会完这些，我们根基就弄清楚网站的运转道理了。

5. 雪碧图

我们经常看到网站中会有动画，那末动画实现的道理一般有以下这么几个：第一，HTML5 视频播放；这类方式弱点就是不兼容低端阅读器。第二，Flash Player 播放器播放；这类方式的弱点是Flash平安性很低而且效力慢。第三，动画利用 Gif 格式；这类方式的题目是动画长度不够，而且这个格式仅仅支持通明和不通明两级属性。

那末像 Google 首页 Doodle 的动画是怎样实现的呢？这类技术叫做：雪碧图。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精灵，它是一种 CSS 图像合并技术。它自己挪用的图片是支持多级通明的 PNG 格式，然后把动画并排排列出来。比如一个卡通人物的动画每帧宽度是100px，那末就把它的行动1 行动2 行动3 行动4 并排放在一张宽度是400px的 PNG 图片里。然后代码在一个100px的宽度框子内布景图挪用这张 png，我们就看到了行动1，然后过一秒钟代码会静静移动100px我们就看到了行动2。由于速度很快就让我们看到了持续动画。雪碧图也有本身的弱点：假如帧数太多，会消耗很大的内存。所以帧数一定要控制少。假如你的行动设想了12帧，那末我倡议你可以试试将2、4、6、8、10删除，保存一半的行动。

6. 视差转动

视差转动是一种活动速度纷歧样的设想结果，用以实现空间感。比如密尔沃基差人局官网就大量应用了视差转动结果。实在现道理是，代码判定网页转动，转动时页面中三层图片活动速度和位移间隔分歧。这样给人酿成的视觉体验恍如是我们在物理现实中看到的空间感一样。视差转动已经不是什么高新技术，假如你的网站比力合适视差转动，请大胆设想并和前端工程师提需求，相信前端工程师可以满足你的要求。我们需要预备的就是活动速度分歧的分层静态 PSD 文件。

△ 应用了视差转动结果的密尔沃基差人局官网（milwaukeepolicenews.com）

六、网页设想标准

终究，履历太长篇大论网站的道理与组成部分后，我们要谈谈网站设想的标准了。网站设想并无具体平台限制的气概，也没有必必要设想的系统级导航栏和工具栏。所以网站设想加倍灵活，但是由于太灵活也会让我们的设想师无从动手。那末接下来我将先容网站设想的标准，在您工作的时辰可以参考。留意，在设想之前一定要和前端相同我们利用的尺寸、字体、交互等，这样有助于前期不会有误解。

1. 画板尺寸

由于网页尺寸与用户屏幕相关，而用户屏幕的品种难以统计。所以我们的设想稿只能首要顾及支流用户的分辨率，其他分辨率用适配的方式来处理。在最新版 Photoshop 网站 Web 预设尺寸给了我们一些启迪：常见尺寸（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、衬着方式挑选无。稍大一些的字体利用微软雅黑、巨细为14-20px、衬着方式挑选 Windows Lcd 或锋利。别的，英文和数字需利用 Arial字体，衬着方式挑选无。

3. 图片标准

网站设想中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片巨细没有牢固要求，但整数和偶数为佳。主如果斟酌到一些适配的题目。作为内容出现的图片一定需要有先容信息和排序信息。图片的格式有很多，比如支持多级通明的 png 格式、图片文件很小的 jpg 格式、支持通明/不通明而且支持动画的 gif 格式等。在保证图像清楚度地情况下文件巨细越小越好，若何让网页利用的图片更小呢？

第一种方式，给法式员切图的时辰我们可以适当缩小图片文件的巨细。比如 Photoshop 中存储为 web 所用格式就会比快速存储文件更小。

第二种方式，可以尝试利用例如 Tinypng、智图等工具再次紧缩图片。这些工具会把图片中的过剩信息删除而且紧缩，而图像质量不受损失。

第三种方式，Google 研发了一种 Webp 格式，它的图片紧缩体积大约只要 JPEG 的2/3，能节省大量的办事器宽带资本。比如 Facebook、Ebay 还有我们设想师常用的站酷图片存储都是利用了 Webp 图片格式。

第四种方式，阅读器和办事器握手时需要下载网页所挪用的图片资本，那末假如一个网站有一百张图片的话，阅读器和办事器就得握一百次。第一会花费办事器资本，第二拜候速度就会慢一些。所之前端工程师们有一种做法，就是把网页中所利用的图片拼成一大张 png。然后每个挪用图片的元素都挪用这张图片然后别离位移一点儿，显现的那块地区移动到一大张图片中所需要的阿谁图像。

4. 按钮

按钮的气概在曩昔的十几年发生了很大的变化，由一路头的「斜面与浮雕」气概过渡到前面的「拟物气概」，现在更风行的是扁平气概。假如按钮在一张图片中，为了不影响图片的美妙性，会去掉添补只保存边框，这类设想方式叫做鬼魂按钮。留意在设想按钮时记得同时设想好按钮的鼠标悬停、按下状态。

5. 表单

在网站设想中我们经常需要利用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等。这些都是系统级的控件，通常为间接挪用系统设想的。可是系统设想偶然不能满足我们的要求：系统内置的表单高度不够，点击起来不舒服；不合适网站整体设想的品牌感等。那末我们可以经过 CSS 给这些表单增加款式，包括色彩、巨细、内外边距等。所以我们碰到触及到表单的需求时也可以停止自界说设想。

6. 栅格

我们把整体宽度界说为 W。然后全部宽度分红多个等分单元 A。每个单元 A 中有元素 a 和间距 i。所以他们之间的关系就是 (A×n)-i=W。固然每个利用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密水平了。以后，我们将过量内容的栅格和另一个栅格相加获得更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个结构很是科学的设想了。 比如：

栅格系统具体有以下上风：能大猛进步网页的标准性。在栅格系统下，页面中一切组件的尺寸都是有纪律的。别的，基于栅格停止设想，可以让全部网站各个页面的结构连结分歧。这能增加页面的类似度，提升用户体验。

7. 适配Retina屏幕

2012年苹果公布了 Retina Macbook Pro，Retina 屏幕的电脑占有量越来越高了。Retina 屏幕简单地说就是屏幕密度是传统屏幕的两倍，具有更大地清楚度。甚至可以满足我们视网膜最高的识别度，所以也叫视网膜屏幕。

这类屏幕下我们设想的平安间隔大约为1000像素的网站就显得很是粗糙了。所以假如我们现在 Retina 屏幕下显现一个400X300PX的地区，现实上我们需要供给给前端一张800X600PX的切图才行，由于 Retina 屏幕一个点顶曩昔两个像素。那末我们的用户是视网膜屏占比更多的用户，比如设想师群体，那怎样兼顾高清屏幕和普通屏幕呢？

首先我们需要以视网膜屏幕巨细完成设想稿，倡议是传统设想稿的两倍。以后切出两套切图（非 Retina 屏幕用户假如也加载双倍巨细的资本会很慢），普通的切图命名为如logo.jpg，Retina切图命名为logo@2x.jpg。前端用代码来识别，假如屏幕是 Retina 就加载双倍尺寸，不是则加载普通尺寸。前端可以利用 Retina.js（https://retinajs.com/）供给的技术停止识别。

8. 自顺应与响应式网站

我们看到有些网站利用电脑端大概手机端甚至 iPad 去阅读时体验都很是好。这就需要我们为了用户体验而停止网站的自顺应或响应式结构了。响应式与自顺应的道理是类似的，都是经过代码检测装备屏幕宽度，按照分歧的装备加载分歧的 css。

自顺应网站

自顺应网站的设想稿是分歧的，可是设想稿需要斟酌屏幕变小时的变化方式。比如一个网站的内容有5个区块和4个间距，那末假如宽度缩小成900时需要若何变化，这就是自顺应结构。比如站酷网、Dribbble 等网站都采用了自顺应结构。

响应式网站

响应式网站则需要设想分歧版本的设想稿，然后按照分歧的装备供给分歧的 CSS 款式。比如判定你装备的宽度是750px，那末网站就晓得你利用了手机来拜候，就会给你导入一份手机才有的款式；假如是电脑的宽度就给你导入电脑的 CSS 款式。对于设想师来说，自顺应需要斟酌网站在分歧装备宽度下的整除与排版；响应式则需要设想电脑、平板、手机等最少三套设想稿（但这三套设想稿的内容是分歧的）。总之，自顺应和响应式都是网站为了用户体验所顺应阅读装备而做出的尽力。

适配的标准

手机方面：适配手机页面时，我们一般以 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、无和微软雅黑 14-20、Windows LCD。Banner 只管满屏，可是图片需要依照4:3或16:9等比例来设想。做网站时可以建立栅格以更好地停止自顺应和响应式结构，我们也要为超链接和按钮设想分歧的响应鼠标的状态；别的我们也可以多多尝试在网站设想中加入视差转动、雪碧图动画等好玩的交互。

假如设想手机真个页面，可以依照750X1334PX尺寸设想。字体利用苹方24PX以上、锋利。英笔墨体利用SF UI。按钮和点击地区需要大于88PX方便手指导击。而且头部需要预留出微信或阅读器的导航地区。

关于本专栏

平面设想进修日志（公众号：followdesign）是一个高质量设想教程、书籍、经历分享进修平台。热衷于为自学平面设想的同学，供给快速入门的资本参考。会聚保举国内优异设想导师、及相关优良平面视频教程，让自学有路可循，长大加倍高效。

我是「平面设想进修日志网」站长 @酷coo豆，

感激你的关注与支持！