网页筹划是甚么意思 ？详解网页筹划的流程、筹划及圭表类型

1 、网页筹划是筹划筹划甚么意思

网页筹划（英文 ：Web Design ，又称为Web UI design）是甚意思详屈就企业希看向不雅不雅不雅不雅鉴赏者传递的信息（包含产品
、处事
、解网及圭理念 、页筹文明），流程举办网站下场运营，表类然掉落踪队行的网页页面筹划丑化工作。作为企业对外宣传物料的筹划筹划个中一种 ，超卓的甚意思详网页筹划  ，对汲引企业的解网及圭互联网品牌笼统相当次要 。

2、页筹网页筹划的流程流程

1、需求调研

需求屈就消费者的表类需求 、市场的网页外形、企业本身的气候等举办综合分化 ，当根本需求体味完成后 ，筹划师搜检近似的网站并存眷他们的筹划 ，接上往与客户构和可否可独霸相干网站作为示例 。

2 、聚积材料

经由过程和与网站相干人员的干戈 、交换断定网站需求的模块，并将这些模块在文档中闪现，群集网页筹划相干图片、文字、视频等材料 。

3 、断定网站主题

计整洁个网页，最次要的是选择好网页的主题内容，一样往常都是选择本身所需求的内容来举办筹划
。需求寄看的是：所选择的筹划主题必定要有本身的特点 ，可以从浩瀚网页中崭露头角。

4 、筹划筹算

在选择好网页主题后，就需求最早筹算网页中的筹划了。需求了然的是 ：屈就网页主题了了筹算方针 ，公允设置网页的筹划。这个中 ，还需求寄看网页中内容的设置，要单方面连络主题和页面具体内容筹算筹划 。

5、主题元素构建

网页筹划师经常添加主题元历来丰富网站并使其成熟。比如 ，动画让网站愈加活泼 ，对用户体验有很好的影响 ，添加对平台的信赖。

6、选择配色筹划和字体

该配色筹划要用在刀刃上编译 。但凡 ，筹划师会寄看布景理应具有的色彩、按钮的色彩和其他元素。排版应与配色筹划相婚配 。不然，实足看起来都像是字体和色彩的混搭
。字体理应是可读的并且不是很不往常。

7、独霸筹划对象完成

以页面超卓化筹划为方针 ，独霸PS
、AI等软件 ，调剂，独霸更公允的色彩 、字体、图片 、格式举办页面筹划丑化。

8、回响与改削筹划筹划

屈就用户回响 ，举办页面筹划调剂，以抵达最优终局。

3、罕有的网页筹划筹划

1
、"国"字型

也可以称为"同"字型
，是一些除夜型网站所快活喜悦爱好的圭表类型，即最上面是网站的问题和横幅告白条 ，接上往就是网站的次要内容，放置放置一些两小条内容，中心是次要部分，与放置一同列举幻想下场，最上面是网站的一些根本信息、联络编制、版权声明等 。这类筹划是我们在网上见到的差不多最多的一种筹划圭表类型。

2、拐角型

这类筹划与上一种真实只是编制上的分辨，理论上是很邻近的，上面是问题及告白横幅，接上往的右边是一窄列链接等，右列是很宽的正文，上面也是一些网站的赞助信息。在这类圭表类型中，一种很罕有的圭表类型是最上面是问题及告白，右边是导航链接。

3、问题正文型

这类圭表类型即最上面是问题或近似的一些对象，上面是正文，比如一些文章页面或注册页面等就是这类类。

4、封面型

这类圭表类型根本上是出一些网站的首页，除夜部分为一些超卓的立体筹划连络一些小的动画，放上几个复杂的链接或仅是一个"进进"的链接甚至直接在首页的图片上做链接而没有任何提示。这类圭表类型除夜部分是企业网站和小我主页，假定说措置的好，会给人带来赏心雅不雅不雅不雅不雅不雅不雅的感应感染 。

5 、"T"筹划筹划

所谓"T"筹划筹划 ，就是指网页上边和右边相连络 ，页面顶部为横条网站标识表记标帜和告白条，左下方为主菜单 ，左面展示内容，这是网页筹划顶用得最普及的一种筹划编制 。在理论筹划中还可以改削"T"筹划筹划的编制
，如放置两栏式筹划 ，一半是正文，此外一半是笼统的图片 、导航。或正文不等两栏式安插，经由过程布景物分辨 ，分袂放置图片和文字等
。

多么的筹划有其固有的益处，因为人的寄看力次要在右下角 ，所以企业想要宣布给用户的信 ，除夜都能被用户以最除夜大年夜大年夜约性掉落踪掉落踪，并且很利便
，其次是页面筹划了然 ，主次邃晓 、易于独霸
。偏向偏向是端方机械 ，假定细节色采上不寄看 ，很随便让人"看之无味"
。

6
、"口"型筹划

这是一个笼统的说法，指页面凹凸各有一个告白条 ，右边是主菜单 ，右边是友情链接等 
，中心是次要内容 。

这类筹划的益处是页面充分 、内容丰富、信息量除夜 ，是综合性网站经常独霸的版式，出格的中心是顶部中心的一排小图标起到了活泼氛围的感染
。偏向偏向是页面拥堵，不足矫捷 。也有将四边空出
，只用中心的窗口型筹划，比如网易壁纸站独霸多帧编制 ，只需页面中心部分可以动弹，界面近似游戏界面 。独霸此类版式的有***游戏文娱性网站。

7、"三"型筹划

这类筹划多用于国外网站，国际用得不多。其特点是页面上横向两条色块，将页面集团豆割为4个部分 ，色块中除夜多放告白条。

8、对称比照筹划

看文生义，它指采取放置或凹凸对称的筹划
，一半深色，一半淡色，一样往常用于筹划型网站。其益处是视觉冲击力强，偏向偏向是将两部分无机地连络斗劲艰苦。

9
、POP筹划

POP源自告白术语，指页面筹划像一张宣传海报 ，以一张超卓图片作为页面的筹划中心。经常独霸于时髦类网站，益处不问可知 ：斑斓吸惹人，偏向偏向是速度慢。

4 、网页筹划的圭表类型

在筹划之前必定要和前端类似我们独霸的尺寸
、字体 、交互等 ，多么有助于后期不会有曲解。

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 格式等 。

4、按钮筹划

按钮的气焰在畴昔的十几年产生发火了很除夜的改削，由一最早的「斜面与浮雕」气焰过渡到后背的「拟物气焰」，如今更风行的是扁平气焰。假定按钮在一张图片中，为了不影响图片的美不美不雅不雅不雅不雅不雅不雅性 ，会往损掉落踪落加添只保管边框 ，这类筹划编制叫做鬼魂按钮。寄看在筹划按钮时记得同时筹划好按钮的鼠标悬停 、按下外形 。

5、表单

在网站筹划中经常需求独霸一些输进框、下拉菜单、弹窗、单选框
、复选框 、编辑器等 。这些都是琐细级的控件，但凡为直接调用琐细筹划的 。可是琐细筹划有时不克不及知足我们的请求：琐细内置的表单高度不足，点击起来不温馨；不契合网站集团筹划的品牌感等
。那么可以经由过程 CSS 给这些表单添加格式，包含色彩、大年夜小、表里边距等
 。所以碰着触及到表单的需求时也可以举办自定义筹划。

6、自适应与照顾式网站

有些网站独霸电脑端或手机端甚至 iPad 往不雅不雅不雅不雅鉴赏时体验都特别很是好。这就需求为了用户体验而举办网站的自适应或照顾式筹划了 。照顾式与自适应的事理是近似的
，都是经由过程代码检测设备屏幕宽度
，屈就不合的设备加载不合的 css
。

(1)、自适应网站

自适应网站的筹划稿是齐截的
，可是筹划稿需求思虑屏幕变小时的改削编制。比如一个网站的内容有5个区块和4个间距 ，那么假定宽度促进成900时需求若何改削
，这就是自适应筹划 。

(2)、照顾式网站

照顾式网站则需求筹划不合版本的筹划稿，然后屈就不合的设备供给不合的 CSS 格式
。比如剖断你设备的宽度是750px，那么网站就晓得你独霸了手机来访谒，就会给你导进一份手机才有的格式；假定是电脑的宽度就给你导进电脑的 CSS 格式
。对筹划师来讲，自适应需求思虑网站在不合设备宽度下的整除与排版；照顾式则需求筹划电脑、平板、手机等起码三套筹划稿（但这三套筹划稿的内容是齐截的） 。总之 ，自适应和照顾式都是网站为了用户体验所适应不雅不雅不雅不雅鉴赏设备而做出的戮力 
。

(3)、适配的圭表类型

手机方面 ：适配手机页面时，我们一样往常以 iPhone 为画布标准
。启事是 iPhone 绝对展示斗劲了然 ，并且请求较高。并且用户占据量也很高。在适配时我们一样往常以750x1334px尺寸为主，然后将网站导航改削成手机 APP 经常独霸的汉堡包+抽屉式导航的编制。同时网站里的按钮也需求变成手机 APP 中我们看到的放置几近满屏的按钮 ，并且每个按钮要除夜于88PX，利便手指的点击。字体方面 ，我们要把网站的字体全数改成苹方字体，并且字号设置为24PX以上 ，衬着编制设置成锋利 。英文则需求独霸 SF-UI 庖代。也就是将网站改削成一个类 APP 的手机网页，多么才可以担保手机用户体验出色。假定用户独霸安卓手机
，那么前端代码则会基于筹划稿的筹划过度加除夜图片与间距来适应安卓屏幕 。

5
、网页筹划寄看事项

1、筹划气焰要别致

网页筹划气焰要不落窠臼，要重点凹陷一个"新"字 ，这个绳尺请求我们在筹划网站内容时不克不及照抄别人的内容，要连络本身的理论气候创作出一个并世无双的网站。选材要尽大年夜大年夜约做到"少"而"精",又必须凹陷"新"
 ，如能对立天天更新的话,我信赖多么的网页必定会遭到大年夜师的迎接
。

2 、色采与品牌VI契合

网页筹划的色采独霸偏向于少而精 ，少代表了集团页面的色彩独霸，切切不要做得花狸狐哨；精代表了在配色的时辰尽大年夜大年夜约的调和，可屈就客户LOGO或断定的主色彩，再搭配一种、两种色采便可，必定要让集团页面看起来温馨。

3 
、 网页气焰要不合

你网页上全数的图象、文字，包含像布景物华、分辨线、字体
、问题
、注脚甚么的，要不合气焰 ，贯穿全站 。多么子读者看起来温馨 、顺畅，会对你的网站留下一个"很专业"的印象。

4 、集团页面的层次感

用户的眼睛快活喜悦爱好有次序递次递次递次的筹划 ，如头部包含导航和LOGO，特定内容独霸lightbox，三列分栏 ，页脚
。它有助于在心里构冒昧要的信息 ，并带领用户寄看在你想让他寄看的中心
。在传统艺术中
，熟手在行们被经历色采价值和线性透视三绳尺和其他艺术带领。在网页筹划中 ，没有出格奉行的绳尺 ，但以直不美不雅不雅不雅不雅不雅不雅的编制构造内容是一条很好的经验轨则。

5
 、寄看合用性

做网站筹划的时辰，flash动画是很次要的一部分 ，可是要寄看尽大年夜大年夜约罕用，小企业的网站筹划 ，因为用户来网站是为了寻觅他们所独霸的产品和处事的有效信息。

6、使网站具有交互下场

一个静态网页不竭给人一种机械的感应感染 ，贫窭一种活力和赌气。最幸而网站上供给一些答复问题标对象和其他具有交互功用的筹划 ，使得访谒者能从网站上掉落踪掉落踪交互的信息，从而使访谒者有一种介入群集培养汲引的别致感和下场感 。

7 、思虑不雅不雅不雅不雅鉴赏器的兼容性

当然IE所占的市场份额愈来愈除夜，可是我们还是需求思虑到firefox和谷歌 chrome这些不雅不雅不雅不雅鉴赏器用户
。筹划气焰的思虑，如色采的搭配，图形 、线条的独霸等等。要时辰为用户着想，必须起码在几种不合圭表类型的不雅不雅不雅不雅鉴赏器下测试网站，看看兼容性若何。

8、SEO优化筹划

在网页筹划时对网站优化举办思虑，对网站运营时要优化的关头词思虑在内 ，同时再独霸字体筹划时思虑到网页建造的H1、H2、H3标签等细节优化，使网上上线后契合搜刮引擎的搜刮轨则 。

6 、网页筹划经常独霸对象

1
、Adobe Photoshop

Adobe Photoshop是一种精细的网页筹划对象 。它有良多选项来成立和编辑您的Web模板。它合用于图象，您可感应您的网页筹划成立图形。经由过程无量的色彩和渐变选项，可以建造出最好的模板筹划
。它为您供给了一个空白的画布，让您的想象力活泼 。您可以屈就本身的编制附加图象 ，挪动元素，绘制框，裁剪边沿和编辑模板 。它合用于图层，这使您的工作特别很是复杂 。您可以展示/湮没图层以有效治理Web筹划元素。

2 、Sketch

Sketch是合用于Mac设备的网页筹划软件。它是专注于成立Web模板和筹划的专业对象
。它合用于矢量图象，是以您将掉落踪掉落踪最好
，最高分辨率的下场。对象栏和选项特别很是复杂 。Sketch供给了成立和治理Web筹划项方针无缺矫捷性。它具有镜像下场
，准予在多种设备（如手机或平板电脑）上测试您的网页筹划模板 ，可以100％断定您的网页筹划将若安在不合的屏幕尺寸上展示 。

3、Figma

Figma是一个多用户网页筹划软件。它准予您与筹划团队联络以独霸不异的Web模板。它是与客户共享项目并在模板筹划前程行及时变换的智能对象。Figma将网页筹划汲引到一个全新的程度 ，它的编辑面板中包含字体，色彩和其他设置。用于成立图标或无缺的Web模板时，对象和选项特别很是棒。

4 、Adobe Illustrator

Adobe Illustrator 供给了一个完竣的像素级筹划气候，您可以在个中成立矫捷且流畅的 Web 元素。它为您供给了成立清爽脆落的 Web 筹划所需的实足 ，包含矢量图形 、照顾式媒体图标、可伸缩组件
、CSS 生成、SVG 导出 、线框和可几回独霸的标识表记标帜 。

Adobe Illustrator

5、Adobe XD

adobe家打造的一款集页面筹划和交互原型为一体的筹划对象 ，支撑多人在线及时协作下场。此内涵兼容性凹凸风最除夜 ，能跟全家桶产品举办联动；可是在成本和下场这两方面绝对后面两款就斗劲弱势了
 。

6 、Canva

Canva是一款免费的筹划对象
。它不克不及被认为是一个成熟的网页筹划软件，但你可独霸Canva成立诙调和有吸引力的筹划来支撑你的网页模板
。它特别很是契合构建可以添加到Web筹划中的图象。

它设备了数百个模板，使您的工作更轻松
。假定您没有任何筹划技能
，可独霸Canva中的模板，轻松地为您的Web模板构建具有专业外不美不雅不雅不雅不雅不雅不雅的图象。

7、网页筹划罕有问题

1、没有屈就网页筹划根本绳尺

在挪动终端网页筹划环节要积极闪现精简绳尺  ，在页面筹划中要尽大年夜大年夜约做到重点凹陷、精简，多么的筹划才调更好的知足用户的赋性化请求，汲引网页不雅不雅不雅不雅鉴赏的便捷性和画面感 ，给用户带来不合的视觉体验。可是 ，往后在挪动终端网页筹划的过程中相干人员没有严格屈就标准流程举办筹划，筹划重点不凹陷，不足精简，手机屏幕尺寸偏除夜，这给用户构成了诸多利便，网页不雅不雅不雅不雅鉴赏起来利便当，网页照顾内容不足长篇大年夜大年夜论。

2、主动弹窗筹划不足公允

用户在网页不雅不雅不雅不雅鉴赏的过程中，网页主动弹窗 ，用户等待时分太长，从而招致了流量破钞过量，这使得用户的知足度降低，倒运于挪动终端网页筹划工作的更好展开。

3
、对方针终端屏幕特点掌控不足

在挪动终端网页筹划的过程中相干人员必定要积极体味方针终端屏幕特点 。可是在理论工作中，筹划人员却没有做到这点，对方针终端屏幕特点的体味不足，页面衬着终局遭到不雅不雅不雅不雅鉴赏器像素宽度的影响。除夜都用户都经常独霸竖屏手机，而平板电脑是横屏独霸的，是以，理论筹划中因为没有思虑到这点，招致了用户页面的衬着终局遭到了必定影响，对分辨带局限的区分不足公允，没有思虑到挪动终端不合，照顾的屏幕分辨率就会不合。

8、网页筹划 vs. 网站斥地

这是两个严密相干但不合的定见 ，经常被同化：

复杂来讲 ：

筹划师决意按钮是圆的仍是方的
，是甚么色彩 ，放在何处 。

斥地者编写代码让这个按钮在被点击时
，真正奉行“提交”或“采办”的下场 。

总结

优化猩SEO ：在网页筹划中，色采的搭配、文字的改削、图片的措置等是筹划过程必须思虑的，但筹划师在网页筹划时不要忽视了SEO的一些细节，从而进一步汲引网页筹划的用户体验度。

参考链接：

网页筹划（网站技能）_百度百科

https://baike.百度.com/item/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/235026

近两万字的干货！多是最单方面的网页筹划根本常识全攻略 - 优设网

https://www.uisdc.com/web-design-basics-raiders

改削于2025-09-28