网站筹划是甚么意思？详解网站筹划的绳尺、要点、流程及圭表类型

1、网站筹划是筹划程及甚么意思

网站筹划（英文：Web site design）是将网站运营案中的内容 、网站的甚意思详绳尺主题编制，和连络筹划师的解网熟谙经由过程艺术的手段默示出来，要能充分吸引访谒者的站筹寄看力，让访谒者产生发火视觉上的点流愉悦感，是圭表以在网页创作的时辰就必须将网站的集团筹划与网页筹划的相干事理严密连络起来。而网页建造但凡就是类型将网页筹划师所筹划出来的筹划稿 ，屈就W3C圭表类型用html（标准通用标识表记标帜言语下的网站一个独霸）将其建构成网页格式。

2、筹划程及网站筹划的甚意思详绳尺理念

不合的独霸对象（B端、C端）网站的解网筹划理念也有所分辨
 。B端产品一样往常架构宏壮且较定制化 ，站筹以营业为导向 。点流大年夜大年夜约有良多初级下场，圭表凹陷高效易用，招致易学性打扣头
。C端产品一样往常思虑尽除夜部分用户独霸处景和诉求，初级下场会绝对少点。凹陷易学性 。

1
、对B端处事用户来讲
，下场无缺/高效>好用

高效是经由过程筹划辅佐用户可以精准 、疾速的完成方针义务
 。在做B端产品时，因为独霸的场景相当宏壮
，同时选择性大年夜大年夜约良多，若安在宏壮独霸里面高效，这对筹划师来讲是一个挑衅。汲引高效可以从以下方面来措置 ：

(1) 、下场无缺 ：经由过程无缺的下场来担保高效 。

(2)、促进独犷悍路：优化用户独犷悍路
，尽大年夜大年夜约的少法度圭表类型的完成用户要完成的独犷悍路。

(3)、促进页面跳转 ：更少的页面跳转能添加界面的邻接性，促进用户的独霸和记忆担当，让用户完成义务更具有延续性
 。

2 、对C端处事用户来讲，易学/易用>下场无缺

易学/易用即贯穿连接了界面筹划复杂 、了然 、筹划了然
、易邃晓
，独霸复杂 ，经由过程界面元素的表意和界面供给的线索就可让用户了然的晓得其独霸编制。易学/易用的产品易于促进新用户和专家用户的差距，促进用户的认知成功，汲引用户体验。汲引易学易用可以从以下方面来措置 ：

(1)、安妥的带领：经由过程文字提示或浮层提示来陈述用户，使新用户对该产品/新增下场一览缺乏 。

(2)、场景指使 ：在照顾的场景下给以用户必定的指使让用户更了然的晓得下一步独霸标的方针
。

C端产品需求存眷用户的独霸时长、可否随便上手并顺利独霸。产品做得越好 ，用户越宁愿赞成为它花时分。但在B端市场，屈就才是产品的方针，因为B端产品的价值恰幸而于在尽大年夜大年夜约短的时额定抓住用户痛点，假定用户需求在你产品上破钞良多时分，那声明你的产品太难用了。

3、网站筹划的绳尺

1 、以用户为中心

在用户界面筹划中，筹划师要了然谁才是真实的独霸者。要可以站在用户的立场和角度来思虑筹划网页。用户是你终端产品的体验者，所以，在做筹划时 ，要屈就以用户为中心的绳尺。用户不会花太多时分在不合个网页 ，只需他找到本身所要的讯息，就会跳转到此外一个页面延续寻觅下一个信息 。网页筹划师要晓得 ，用户之间的不合很除夜 ，他们的独霸习惯和身手也各有不合 。不克不及知足全数人的期看，也别试图往知足全数人的期看 ，因为那是不成能的事
。要做的只能是让网站独霸愈加利便易独霸  ，要做到这点，必须体味用户的需求，方针和偏好和独霸习惯
。

2
、主题了了（设定网站氛围）

网站要营建甚么氛围黑色常次要的工作，也是筹划公司经常说的「筹划气焰」 ，网页UI筹划要表达出必定的意图和请求  ，有了了的主题，并屈就视觉心思规律和编制将主题传递给用户 ，使主题在安妥的气候里被用户邃晓和领受 ，从而知足其需求。这就请求网页UI筹划不单要纯真 、精练、了然和精准，还需求在凸显艺术性的同时经由过程视觉冲击力来闪现主题
。

3 、视觉美不美不雅不雅不雅不雅不雅不雅

视觉美不美不雅不雅不雅不雅不雅不雅是网页UI筹划最根本的绳尺 。网页UI筹划中内容的主次与轻重
、筹划的真假与繁简
 、形体的大年夜小和配色等都是构成视觉美不美不雅不雅不雅不雅不雅不雅的次要要素 。还可以连络动画等多媒体编制使网页的视觉冲击力默示得更无力度 ，幻想下场展示给用户一个视觉美不美不雅不雅不雅不雅不雅不雅、独霸利便的网页界面。

4、 KISS(Keep It Simple And Stupid)绳尺

复杂易独霸 ，这也是网页筹划根本也是次要的绳尺。要让用户感应感染本身是在独霸软件 ，而不是感应感染被软件独霸 。谨记网页的可独霸性
 ，用户的习惯和身手各不不异
，他们不是网页筹划师，真实不懂你们筹划这个网页的事理和独霸编制 。并且尽除夜数的用户 ，对电脑的独霸经验是很初级的 ，只需略微宏壮一点的独霸就会让他们感应感染很辛苦，所以网页筹划师需求寄看的是，促进独霸，加重用户的担当
，让独霸愈加复杂。

5
 、齐截性绳尺

齐截的筹划筹划 ，可让用户对网站的笼统有深切的记忆；齐截的导航筹划，可让用户灵敏而又有效的进进到网页中找到本身所需求的信息；齐截的独霸筹划，可让用户疾速学会全数网站的各类下场独霸 。破坏这一绳尺，会误导用户，并且让网页显的混乱无章  ，给人留下不好的印象 。当然，网站筹划的齐截性真实不虞味着原封不动 ，有的网页在不合栏目独霸不合的气焰，或跟着时分的推移不竭的改版网站，会给用户带来别致的感应感染 。

6、集团性绳尺

网站UI筹划的集团性包含内容上和编制上两方面 ，网页的内容主假定指Logo、文字 、图象和动画等
，编制是指集团版式和不合内容的筹划编制  。在筹划网页时
，朴实页面各构成部分的特点要素是构成集团性的经常独霸编制。朴实剂体性更无益于用户单方面数会，并给人集团不合的美感 。

7 、网页筹划的公允性绳尺

担保页面筹划平均：次要表示在栏目与栏目
，色块与色块，图片与文字之间的搭配调和问题。次要的信息要刺目 ：分清主次，次要的信息放置中心的职位 。

公允的色彩搭配：色彩对人的视觉和除夜脑感官冲击力是极除夜的，公允独霸色彩，完成内容与编制的调和。一个屏幕的色采品种要少于7种 ，次要信息的对象拔取刺目标色彩等 。

图文并茂 ：一个网页有过量的图象将会降低这个网页的信息量，过量的文字则会显得活泼无赌气，志向的图文并茂才调彼此衬托，使得网页变得活泼活泼又使得页面有丰富的内容
。

8、适配性绳尺

用户将独霸各类设备（从智好手机到台式机）、不雅不雅不雅不雅鉴赏器访谒您的网站。 是以，网站在不合的屏幕尺寸、不雅不雅不雅不雅鉴赏器上切确展示黑色常次要的，务必在多个不雅不雅不雅不雅鉴赏器上搜检您的网站，以确保实足正常展示
。

4、网站筹划的要点

1、担保网站的导航筹划了然流畅

在网站筹划中，导航黑色常次要的，因为导航就比如指南针标的方针标，指援引户往想往的中心，用户经由过程网站的导航筹划能灵敏捕获到重点和有效信息，这对进步用户的体验度特别很是无益 。导航的筹划要让用户了然的晓得本身所处的职位 ，即便处于迷损掉落踪落丛林中，也能了然的晓得标的方针 ，导航筹划的按钮当然占据的比例小，可是其在网站中的感染是不容忽视的。

2、网页图片的筹划和色采搭配

为了让图片在网页中做出好的展示，可以考验考验独霸GIF动图 ，静态页面的展示尽大年夜大年夜约膨胀图片 ，但前提是不改削图片的外形，多么进步了网站加载页面的速度。网页筹划的色采搭配也是很次要的，网页不要孤单采取一种色彩，一样往常都是采取一种主色彩外加两种赞助色彩 ，网站的页面看上往要调和温馨
 ，精练
，有些网站经常独霸各类色采 ，使得网站看上往就像五彩烂漫的画板一样，没有重点没有特点，这让用户看上往感应感染很不专业。

3、整洁有序的排版

在网站筹划中，排版也是相当次要 ，比如用户离开一个排版整洁有序的网站和离开一个排版很乱的网站用户的体验和容貌外形是不一样的。在网页中，要确保文字的字体字号贯穿连接齐截
，网页筹划的按钮尽大年夜大年夜约吻合用户的不雅不雅不雅不雅鉴赏习惯。

4、网站文字编排

网站不是图就是文，图片就是一张图 ，但文字没那么复杂，文字需求编排，需求寄看的事项：文字字距
、行距 、字体大年夜小、文字字数 、问题色彩  、靠左靠右靠中 
、标点标识表记标帜 、换行字数、文字段落留白、编排齐截性…，光是文字编排得好，就会有好的筹划展示 ，文字多的网站更理应正视文字编排 。

有些网站文章每行的字数都很宽，中文字数都超出50个字以上 ，字数超出人类的可视角，看完一行要换到下一行会对禁尽 ，这就是契合人类不雅不雅不雅不雅鉴赏的筹划，独霸单行在45～55个中文换行是较随便不雅不雅不雅不雅鉴赏的换行字数。

文章的行距太挤，会难以不雅不雅不雅不雅鉴赏，最好的行距是字高的30%~50%之间。字体大年夜小的独霸也不是越除夜越好，字号过除夜有粗拙感 ，文字大年夜小理应要按照网站特点当令的微调通用的字体。

5
 、不雅不雅不雅不雅鉴赏器的兼容性

如今市场上 ，各类不雅不雅不雅不雅鉴赏器有良多，每个用户对不雅不雅不雅不雅鉴赏器都有本身的偏好，所以对网页的筹划请求对经常独霸的一些不雅不雅不雅不雅鉴赏器兼容，比如经常独霸的IE不雅不雅不雅不雅鉴赏器，360不雅不雅不雅不雅鉴赏器  ，搜狗不雅不雅不雅不雅鉴赏器等这些经常独霸的不雅不雅不雅不雅鉴赏器，网站筹划起码对这些经常独霸不雅不雅不雅不雅鉴赏器兼容
。

6、对搜刮引擎亲善

如今良多网站的流量客户有除夜部分都是经由过程搜刮引擎而来的，所以网站的筹划要对搜刮引擎亲善 ，网站的栏目筹划复杂了然了然，网页没有太多的flash动画，多媒体下场
，所以网站需求随时举办优化，多么无益于搜刮引擎的蜘蛛的抓取和蒲伏。让网站的关头词掉落踪掉落踪好的排名
。

5
、网站筹划流程

1
 、需求调研

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

2
、聚积材料

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

3 、断定网站主题

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

4 、筹划筹算

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

5、主题元素构建

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

6、选择配色筹划和字体

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

7、独霸筹划对象完成

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

8 、回响与改削筹划筹划

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

6、网站筹划圭表类型（PC网站）

1  、网站页面尺寸

建造网页时我们选用的分辨率是 72 像素/英寸，独霸的画布尺寸 1920px * 1080px。但真实不代表我们可以在全数画布上作图
。网页的筹划次要有两种 ：居中筹划和放置筹划。筹划不一样使筹划的空间也不不异。

2、网页文字

网页中字体也是无益用圭表类型的，我们这里思虑主流的 PC 端屏幕尺寸（1920px*1080px分辨率） 。

网页字体筹划圭表类型

(1)、字体

中文建议独霸微软雅黑 ，英文建议独霸arial，最多独霸三种混搭
，优先独霸各独霸琐细默许的字体，假定指定其他字体，要寄看版权问题。

(2)、字号

整站文字字号大年夜小在12px ~ 36px 区间，要独霸偶数字号 。正文字号大年夜小建议在12px ~ 18px 之间，12px 合用于日期 、版权等诠释性内容；14px 合用于非凹陷性的深化正文内容；16px 或 18px 合用于凹陷性的问题内容 。导航栏字体 ：14px ~ 18px 区间。层次的分辨
，可以改削字体色彩或加粗来闪现。

(3)、间距

相邻两个文字的间距，真实不须要过分介怀
，除出格的需求以外，都可独霸默许数值的间距。行间距但凡为字体大年夜小的 1.5 ~ 2 倍
，段间距但凡为字体大年夜小的 2 ~ 2.5 倍
。

(4)、色彩

编缉墨色彩
，建议独霸公司品牌的 VI（视觉辨认 Visual Identity）色彩，可进步公司网站与公司 VI 之间的联络相干 ，添加可辨识性和记忆性。正文字体色彩可在#000000 ~ #666666 之间的色彩
，赞助性、诠释类的文字可用#999999 等斗劲浅的色彩。

3、网页留白

(1) 、8倍数绳尺

独霸 8 的倍数来端方页面中元素（按钮、输进框
、图片等）的尺寸及各自间距的大年夜小 。即任何需求自定义的长
、宽 ，margin  和 padding 都理应是 8 的倍数。

良多人当然邃晓要用绳尺束厄狭隘尺寸 ，但仍是会产生发火疑问
，为甚么是 8 ，不是 6 、10 或其他数字
？

据统计 ，独霸中布景琐细的用户的主流分辨率次要为 1920、1440 和 1366 ，个系实足还存在 1280 的展示设备
。主流的屏幕尺寸除夜部分都是 8 的整数倍数。即便某些屏幕边长像素不是 8 的倍数，在筹划中还是可以尽大年夜大年夜约做到自定义元素的长 、marging
，和 padding 都是 8 的倍数来贯穿连接筹划的齐截性 。

(2) 
、间距齐截性

田字形筹划时，中心十字间距要齐截。凹凸 、放置要对称不合
。出格气候下，「竖」可以比「横」宽（契合中国传统美学） 。

(3) 、组件留白

表格的外边间距用 16px ，其他组件 8px。

4 、色彩圭表类型

(1)、色彩特点

不合行业一样往常有本身行业的色采
。比如：金融行业网站一样往常白色或金黄色，环保行业网站除夜多快活喜悦爱好绿色  ，企业展示网站普及用蓝色 ，具体也参考企业VI手册。

(2)、布景物

布景物一样往常采取平平素雅的色采，阻拦采取宏壮的图片作为布景物 ，同时布景物要与文字的色采比照凶悍一些 。

(3)、色采数量

一样往常独霸在 3 ~ 4 种色采以内，经由过程调剂色采的各类属性来产生发火改削。经常独霸的网页筹划配色：同色系、邻近色 、近似色、中差色 、比照色。

5、图片圭表类型

图片是网页筹划中不成贫窭的元素 ，它于文字和色采并称为网页三除夜言语。网站筹划中的图片经常独霸4（宽） ：3（高）、16（宽）
：9（高） 、1:1等比例。具体图片大年夜小没有结实请求 ，但整数和偶数为佳 。主假定思虑到一些适配的问题 
。作为内容展示的图片必定需求有引见信息和排序信息。图片的格式有良多 ，比如支撑多级通明的 png 格式、图片文件很小的 jpg 格式、支撑通明/不通明并且支撑动画的 gif 格式等 。

7 、不合圭表类型网站筹划的特点

1、营销型网站培养汲引

企业营销型网站培养汲引是如今中国良多企业都斗劲快活喜悦爱好的一种网站培养汲引筹划，出格遭到了中小型企业的快活喜悦爱好，这些企业品牌驰名度不是很高 ，没有雄厚的资金亲善力在群集前程行全方位的宣传奉行，所以建造网页次要仍是以发卖产品为次要方针，这类网站培养汲引次要内容是产品  ，经由过程对产品的群集包装 ，打造群集营销的氛围 ，掉落踪掉落踪用户的信赖度，并且抵达奉行和发卖的方针 。此类网站特点是征询量较多 ，所以设备24小时可联络的客服出格次要，客户及时体味到本身需求的信息，公司能及时为客户解答才调掉落踪掉落踪客户的好感。

2
、企业官网类

企业官网一样往常包含首页 、产品或处事引见 、团队引见
、关于我们等
。企业培养汲引官网的方针非论是宣传企业笼统仍是引见产品处事 ，都应将网站斥中心案得高端除夜气 、契合企业文明和价值不美不雅不雅不雅不雅不雅不雅
，让消费者认同企业和产品 。

3 、电商商城类

平台为每个店展供给了结实的模板，在模板内店展可以举办自定义装潢，此时，网站斥中心案师若何阐扬主不美不雅不雅不雅不雅不雅不雅能动性 ，为店展吸引更多流量、促进跟多生意显得尤其次要。

4、视频类网站

爱奇艺
、腾讯视频、优酷都属于视频类网站斥地。跟着挪动群集的展开 ，视频类网站斥地的用户数量不竭添加，用户黏性极高 ，此类网站在筹划建造时不美旁不雅不雅不雅不雅不雅不雅区域要充分除夜，布景物华尽大年夜大年夜约选择暗色，以阻拦亮色安慰眼睛影响不美旁不雅不雅不雅不雅不雅不雅体验。

5 、产品类网站

企业为了孤单宣传某类产品而专门培养汲引的网站斥地。此类网站能愈加具体地引见产品功用优势 
、添加用户体验感，阐释产品极邃密的一面 。

6 
、门户类网站

门户类网站斥地的特点是除夜而全，搜聚万象，新浪、搜狐
、网易等都属于门户类网站，门户类网站的门槛极高，对网站斥中心案建造程度的请求也愈加邃密全。

8、网站筹划寄看事项

1、导航菜单忌用图片、flash

导航菜零丁霸图片、flash当然比纯文本来得雅不雅不雅不雅不雅不雅不雅一些，可是搜刮引擎真实不熟谙你的图片和flash。假定你非要独霸斑斓的图片来做导航的话，可独霸布景更调的编制 。建议做一个导航菜单链接的xml文提交到搜刮引擎 。

2、不适外埠独霸图片

为了网页美不美不雅不雅不雅不雅不雅不雅，经常会四处贴满图片，多么做是禁尽确的 ，与内容有关的图片能少就少吧 。我们可以把这些图片做成容器的布景
。

3 、内容里出格字体的独霸

楷体很斑斓，草书也不减色于宋体 。可是不是是全数人的电脑都拆卸有这些字体 。假定独霸这些出格字体的话 ，在别人的电脑里看到的网页将会是不堪进目。

4、在理论意义的特效

阻拦独霸夸耀的身手，这些特效对你的网页没有任何理论意义。

5
、用户难以掉落踪掉落踪本身想要的内容

假定一个用户访谒你的网站跟走进迷宫一样，会有甚么下场 ？传闻过3次点击轨则吗?对小型网站，在你的主页上 ，没有任何一条信息，需求点击次数超出3次的。对除夜型网站，独霸导航和对象条来改进独霸 。

6、色彩搭配偏向 ，网页难于不雅不雅不雅不雅鉴赏

如无需求，你理应对立独霸白色的布景和黑色的文本 ，此外还理应对立独霸通用字体。

7、不留空白

寄看留空白。不要用图象、文本和不须要的动画gifs来布满网页，即便有充分的空间  ，在筹划时也理应阻拦独霸。

9 、网站筹划经常独霸对象

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模板构建具有专业外不美不雅不雅不雅不雅不雅不雅的图象。

10 、网站筹划与网页筹划的分辨

网页筹划：更侧重于单个页面的视觉和筹划筹划
 。

网站筹划：具有更强的集团性和琐细性，思虑全数网站的筹划、各个页面之间的相干、齐截的品牌体验和宏壮的下场逻辑
。可以说，网站筹划包含了网页筹划。

末尾总结

优化猩SEO：网站筹划在国际展开已有20多年，良多企业也建有公司的品牌网站 ，但良多企业在网站培养汲引方面仅是完成了网站宣布罢了，网站筹划无缺没有闪现出公司的互联网笼统，高质量的网站筹划在国际另有很长的路要走。

改削于2026-01-05