这可能是最全面最详细的网页设计基础系列了

 

回复【社群】加入设计学习交流群【三人行】回复【实习】加入【设计岗实习内推群】文章转载自公众号：西见ID：sekkui上篇中介绍的是网页设计的工作流程及网站分类在本篇中，我们继续来了解网站组成、网站技术原理

以及网页规范接 上 篇“网站组成部分”了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分吧网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。

所以我们在设计网站时要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品1首页访问一个网站时第一个我们触及的就是网站首页首页别名叫作Index或者Default，是索引和目录的意思在网站发展的前期阶段，网站并不是富媒体，而是类似于一本书一样：首页类似书籍的目录，需要查看哪个子网页就点击链接即可进入。

到了现在，网站首页仍然是引导用户进入不同区域的一个「目录」，这个目录除了导航功能外也要露出一部分内容给用户来吸引点击，露出的部分一定要有一个「更多」按钮来指引用户找到二级页面。

首页原型图2二级页面在逻辑上，首页是一级页面，从首页点击进入的页面均为二级页面二级页面之后还有三级页面等级别从点击的概率上来说，自然是越靠前访问量越高，页面层级越深越不容易被用户找到一般网站有三级页面，就是为了避免用户迷失。

为此还会在页面中加入面包屑导航面包屑导航就是在页面第一屏出现的诸如 首页 > 体育 > NBA频道 这样的超链接结构，方便用户理解自己在那里，并且点击可以回到其他页面。

二级页面原型图3底层页在网站结构中最后提供用户实质资讯的页面就是底层页比如，在门户网站首页或二级页面中我们点击感兴趣的标题后，在底层页中才会看到全部的资讯待用户阅读完底层页的信息后，可以顺势在左侧或右侧的侧栏寻找用户可能感兴趣的相关内容；在底侧可以看到网友的评论；底侧也会有分享按钮、赞功能等；如果侧栏用户转化率比较差，最底部还可以再次出现推荐相关资讯的功能。

总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。

底层页原型图4广告门户类网站如何盈利？广告是变现方法之一网站的广告一般由负责运营需求的设计师负责，但是也可能由频道设计师、产品侧设计师来完成1、在网站中常见到的广告图形式就是bannerbanner一般尺寸巨大，在网站之中非常显眼。

因此也不一定是外部广告，也有内部活动、推荐资讯等那么banner图的尺寸有固定吗？答案是没有Banner的宽度有两种，一种是满屏(1920PX)、一种是基于安全距离的满尺寸(1200px或1000px)。

高度要注意了：一般以1920x1080px为基准的用户屏幕，加上浏览器本身与插件和底部工具条等距离，留给网站的一屏高度大概为900px，所以banner不可以做得很高，否则第一屏信息会显示得不够你可能会说，那就让用户往下拉啊。

但是在网站的访问用户之中，第二屏触及到的用户比第一屏会少很多也就是很多用户可能点击网站后就会跳走或者关闭，那么第一屏的信息真的非常重要了，可谓是寸土寸金所以我们的banner不应该占据过大的区域比如站酷网的Banner区域为1380x350px。

那么除了首页巨大的banner广告位，网站还有哪些广告形式呢？2、对联广告在门户网站中我们经常会看到网站左右安全区域之外会有连个随屏幕滚动的像「对联」一样的广告，通常banner也会是一个广告内容，并且居中会弹出由HTML5技术或Flash技术制作出来的弹窗广告。

这种广告一般组合售卖，也就是说一进网站你就会被全面轰炸，无法不注意到这个广告的存在。这种广告点击进入还有配合的专题页等，可见需要设计师配合的地方非常多。

对联广告形式3、信息流广告信息流广告是埋在信息流中的一种广告形式这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样比如朋友圈、知乎、Facebook都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验。

信息流广告的尺寸与信息流相同

知乎APP中信息流中的广告以上从广告的形式上简单介绍了三种常见的网站广告形式，如果我们在阅读需求时看到了cpm、pv等单词是什么意思呢？他们是广告的收费模式cpm是指按照广告pv来收费，cps是指按照用户消费收费，cpa是指按照用户注册数收费，cpc是指按照用户点击付费。

针对不同的收费模式，在设计时也会采取不同策略来增强广告需要达到的目的5Footer在网站具体的页面设计中，底部会有一个区域我们称之为footer一般footer的颜色都会比上边内容区域要暗，因为footer的信息在逻辑的级别上是次要的。

footer区域的主要功能是版权声明、联系方式、友情链接、备案号等信息在设计时一定要降级处理，不要让footer变得特别明显“网站技术原理”网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。

同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节随着分工越来越细致，产生了网页设计师和前端工程师两个工种。

但是网页设计师不可以脱离技术局限天花乱坠地去设计下面让我们来了解网站的基本存储原理：在您的电脑C盘保存一个叫logo.jpg的图片，然后在浏览器打开这个网址：C:logo.jpg你看到了什么？对，就是这张图片。

这就是网站的原理：网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器我们通过域名来调取网中不同的页面和文件，如果服务器关机了那么网站也就瘫痪了每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个IP地址，这个IP地址就是服务器所在的门牌号码。

找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如文字、边框、表格等实际上都是代码的形式浏览器还会把网站中所需要的图片、视频等单独下载到缓存里当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完(比如登陆成功这个信息)然后再下发给我们的浏览器。

所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次「握手」当然老「握手」会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费这个机制就是「cookies」：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。

基于鼠标的手势操作1基于鼠标的交互在不久的未来，个人电脑可能通过多点触控、语音交互等方式与我们交互，但目前网站设计最主流的交互方式还是鼠标和键盘来让我们看看鼠标有什么结构吧！我们对鼠标的使用无外乎移动、左键、右键、拖拽四种方式。

我们在页面中的大部分操作都是通过鼠标左键点击完成的，所以网页也是点击的艺术右键一般会唤起右键菜单，但是很多网站与网页应用程序也会将右键自定义设计一些操作和交互与鼠标发生交互的主要是超链接与按钮那么让我们来了解一下超链接的四个状态吧(前端术语是：超链接标签的CSS四个伪类)。

按钮与文字的不同状态Link是指超链接正常的时候的状态一般超链接需要与普通文字区别开来，比如换一种颜色或者加下划线当然下划线还有一个作用就是方便弱视群体区分超链接与普通文字Link默认都是蓝色的(色值：#72ACE3)，但是为了增强网站的品牌性我们也可以把链接颜色更换成另一种颜色。

总之一定要在形式上与普通文字产生差别才可以Visited是超链接被点击以后的状态比如新浪网新闻非常多，所以点击完一个新闻后用户可能不知道自己看过没看过这条新闻了所以新浪网使用了Visited属性，点击后的新闻颜色就不一样了，方便用户区别自己哪些新闻还没有浏览。

Hover：是超链接鼠标经过状态这个状态是连接中最为重要的状态其实不只超链接，按钮和图片以及视频等一切可交互的元素都应该设置Hover属性，也就是鼠标悬停时的状态一般来说变换颜色和放大是Hover状态的基本方式。

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的缓存，那么就节省了服务器资源。

另外，由于网站需要一些交互效果，比如点击特效和菜单特效等，那么需要前端工程师使用Javas cript代码来配合Javas cript是一种比较短小精悍的语言，构建一些基于浏览器的特效非常顺手所以目前主流的网站配置是HTML5+CSS3+JS代码的组合，当然为了兼容那些低端浏览器也可能使用HTML4+CSS+JS的套餐。

这取决于我们的主要目标用户群在使用什么样的浏览器当然，我讲这些并不是要求您去学习HTML、CSS、JS代码然后进行前端开发，因为在现代互联网公司里已经有专业的前端工程师了我们了解这些主要是要理解前端工程师的工作以便更好地配合他们。

主流形式：HTML + CSS + JS4动态网页了解完静态网页还不够，现在让我们谈谈网站如何动起来动态网页不是说它有狂拽酷炫的动画，而是动态网页会随着时间、内容和数据库的调用而产生动态的网页比如今天看到的新闻网站和昨天的新闻肯定不一样了，可是网站首页的HTML代码并不需要人去手工修改，而是让小编通过后台录入新闻、上传图片就好了。

小编上传后台的过程就会输入数据库，而动态网页又是调取数据库内容显示给用户的一种形式动态网页会随时调取数据库中的信息给用户，而对用户来说似乎静态网页和动态网页长得都是一样的那么最傻瓜的判断方式是看网址结尾，。

静态网页结尾是html或htm，而动态网页由于使用了高级网页编程技术，结尾则是Asp、Php、Jsp等Asp、Php、Jsp、Aspx、Cgi都是动态网页的语言，当然有的时候为了让网站效率提升也会使用伪静态结构，结尾和静态网页就一致了，但是实际上是会在用户访问前调取一遍数据库的。

同时动态网页的网址会有一个特点，含有？符号动态语言目前最火的是Php，较早而现在比较少见的是Asp、Cgi，最安全的是Jsp，所以很多银行采用JSP编译了解完这些，我们基本就弄清楚网站的运行原理了

 主流后台编译语言：PHP ASP JSP CGI5雪碧图我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：第一，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然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。

在线压缩工具Tinypng网站4按钮按钮的风格在过去的十几年发生了很大的变化，由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，现在更流行的是扁平风格如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做。

幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。

不同时代下不同的按钮风格5表单在网站设计中我们经常需要使用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等这些都是系统级的控件，一般是直接调用系统设计的但是系统设计有时不能满足我们的要求：系统内置的表单高度不够，点击起来不舒服；不符合网站整体设计的品牌感等。

那么我们可以通过CSS给这些表单增加样式，包括颜色、大小、内外边距等。所以我们遇到涉及到表单的需求时也可以进行自定义设计。

表单不同风格的设计 UIDE Kit  by Mateusz Dembek6栅格我们把整体宽度定义为W然后整个宽度分成多个等分单元A每个单元A中有元素a和间距i所以他们之间的关系就是 (A×n)-i=W。

当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。

 比如如果网页宽度是1000px，我们可以使用：20列每列40px和10像素间隔20列每列30px和20像素间隔25列每列30px和10像素间隔25列每列20px和20像素间隔如果网页宽度是990px，我们可以使用：

11列每列80px和10像素间隔18列每列35px和20像素间隔25列每列45px和10像素间隔33列每列20px和10像素间隔如果网页宽度是980px，我们可以使用：14列每列60px和10像素间隔14列每列50px和20像素间隔

28列每列25px和10像素间隔栅格系统具体有以下优势：能大大提高网页的规范性在栅格系统下，页面中所有组件的尺寸都是有规律的另外，基于栅格进行设计，可以让整个网站各个页面的布局保持一致，这能增加页面的相似度，提升用户体验。

网站的栅格化会使网站看起来更有秩序感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去浏览时体验都非常好。

这就需要我们为了用户体验而进行网站的自适应或响应式布局了响应式与自适应的原理是相似的，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的css1、自适应网站自适应网站的设计稿是一致的，但是设计稿需要考虑屏幕变小时的变化方式。

比如一个网站的内容有5个区块和4个间距，那么如果宽度缩小成900时需要如何变化，这就是自适应布局比如站酷网、Dribbble等网站都采用了自适应布局2、响应式网站响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的CSS样式。

比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的CSS样式对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿)但这三套设计稿的内容是一致的)。

总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力9适配的规范手机方面：适配手机页面时，我们一般以iPhone为画布标准原因是iPhone相对显示比较清晰，并且要求较高而且用户占有量也很高。

在适配时我们一般以750x1334px尺寸为主，然后将网站导航改变为手机APP常常使用的汉堡包+抽屉式导航的形式同时网站里的按钮也需要变为手机APP中我们看到的左右几乎满屏的按钮，并且每个按钮要大于88PX，方便手指的点击。

字体方面，我们要把网站的字体全部改为苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利英文则需要使用SF-UI代替也就是将网站改变成一个类APP的手机网页，这样才可以保证手机用户体验良好如果用户使用安卓手机，那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

iPad：iPad的尺寸为1024x768、2048x1536px等，无论怎么变基本与电脑屏幕尺寸类似所以在iPad上浏览网页是基本舒适的因此，很多网站并没有专门为iPad做适配，如果我们希望iPad用户用的更爽，可以从文字大小(24PX以上)、按钮大小(88PX左右以及以上)、交互形式(抽屉式导航、导航不随屏幕滚动)等方式入手。

不同设备的注意事项【总结】无论您面对的项目是To C的还是To B的网站产品，我们都应该首先确立设计风格 > 寻找设计素材 > 建立情绪板 > 完成视觉稿 > 切图标注 > 建立视觉规范 > 进行项目走查。

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

做网站时可以建立栅格以更好地进行自适应和响应式布局，我们也要为超链接和按钮设计不同的相应鼠标的状态；另外我们也可以多多尝试在网站设计中加入视差滚动、雪碧图动画等好玩的交互如果设计手机端的页面，可以按照750X1334PX尺寸设计。

字体使用苹方 24PX以上 锐利英文字体使用SF UI按钮和点击区域需要大于88PX方便手指点击并且头部需要预留出微信或浏览器的导航区域

以上网页设计基础知识全攻略上篇+下篇希望能帮助小伙伴们更全面的认识网页设计虽然不是所有技能我们都要熟练掌握但至少，作为设计领域内的学习者/从业者我们得多知道一些，不是吗？如果你还有需要补充或者对其中有疑问的

欢迎在下方留言区提出如果遇到学习或职业提升中遇到问题还可以私戳小A长按下方二维码添加「小A君」为好友记得备注【你的小可爱】哦

【AAA设计师】往期好文推荐• 《设计史：平面设计的起源与发展》• 《新手必看！互联网设计师全面解析(热门职位、团队分工)》• 《零基础怎么学设计？5个阶段帮你理清成长路径(附学习资源)》• 《非专业怎么学设计？这6大方向看你更适合哪类(附学习资源下载)

》• 《设计盘点｜免费送你这17本经典设计书，就现在！》• 《腾讯设计师：如何从零开始建立设计规范？》

免责声明：本站所有信息均搜集自互联网，并不代表本站观点，本站不对其真实合法性负责。如有信息侵犯了您的权益，请告知，本站将立刻处理。联系QQ：1640731186