网页设计的流程、布局及规范分别是什么?

网页设计(英文：Web Design，又称为Web UI design)是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化)，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。下面跟小编一起去看下网页设计的流程、布局及规范分别是什么?

网页设计的流程

1、需求调研

需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，当基本需求了解完成后，设计师查看类似的网站并关注他们的设计，接下来与客户讨论是否可以使用相关网站作为示例。

2、搜集材料

通过和与网站相关人员的接触、交流确定网站需要的模块，并将这些模块在文档中体现，收集网页设计相关图片、文字、视频等资料。

3、确定网站主题

设计一个网页，最重要的是选择好网页的主题内容，一般都是选择自己所需要的内容来进行设计。需要注意的是：所选择的设计主题一定要有自己的特色，能够从众多网页中脱颖而出。

4、结构规划

在选择好网页主题后，就需要开始规划网页中的结构了。需要清楚的是：根据网页主题明确规划目标，合理设置网页的结构。这其中，还需要注意网页中内容的设置，要全面结合主题和页面具体内容规划结构。

5、主题元素构建

网页设计师经常添加主题元素来丰富网站并使其成熟。例如，动画让网站更加生动，对用户体验有很好的影响，增加对平台的信任。

6、选择配色方案和字体

该配色方案要用在刀刃上编译。通常，设计师会注意背景应该具有的颜色、按钮的颜色和其他元素。排版应与配色方案相匹配。否则，一切看起来都像是字体和颜色的混搭。字体应该是可读的并且不是很不寻常。

7、使用设计工具实现

以页面精美化设计为目标，使用PS、AI等软件，调整，使用更合理的颜色、字体、图片、样式进行页面设计美化。

8、反馈与修改设计方案

根据用户反馈，进行页面设计调整，以达到最优效果。

常见的网页设计布局

1、"国"字型

也可以称为"同"字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

2、拐角型

这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3、标题正文型

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4、封面型

这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个"进入"的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

5、"T"结构布局

所谓"T"结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变"T"结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。

这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

6、"口"型布局

这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。

这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。

7、"三"型布局

这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。

8、对称对比布局

顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。

9、POP布局

POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。

网页设计的规范

在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等，这样有助于后期不会有误会。

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 的手机网页，这样才可以保证手机用户体验良好。如果用户使用安卓手机，那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

网页设计注意事项

1、设计风格要新颖

网页设计风格要不落俗套，要重点突出一个"新"字，这个原则要求我们在设计网站内容时不能照抄别人的内容，要结合自身的实际情况创作出一个独一无二的网站。选材要尽量做到"少"而"精",又必须突出"新"，如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。

2、色彩与品牌VI相符

网页设计的色彩运用倾向于少而精，少代表了整体页面的颜色使用，千万不要做得花里胡哨;精代表了在配色的时候尽可能的协调，可根据客户LOGO或确定的主色调，再搭配一种、两种色彩即可，一定要让整体页面看起来舒服。

3、 网页风格要统一

你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个"很专业"的印象。

4、整体页面的层次感

用户的眼睛喜欢有秩序的设计，如头部包含导航和LOGO，特定内容使用lightbox，三列分栏，页脚。它有助于在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩价值和线性透视三原则和其他艺术指导。在网页设计中，没有特别奉行的准则，但以直观的方式组织内容是一条很好的经验规则。

5、注意实用性

做网站设计的时候，flash动画是很重要的一部分，但是要注意尽量少用，小企业的网站设计，因为用户来网站是为了寻找他们所使用的产品和服务的有用信息。

6、使网站具有交互功能

一个静态网页始终给人一种呆板的感觉，缺少一种活力和生气。最好在网站上提供一些回答问题的工具以及其他具有交互性能的设计，使得访问者能从网站上获得交互的信息，从而使访问者有一种参与网络建设的新鲜感和成就感。

7、考虑浏览器的兼容性

当然IE所占的市场份额越来越大，但是我们仍然需要考虑到firefox以及google chrome这些浏览器用户。设计风格的考虑，如色彩的搭配，图形、线条的使用等等。要时刻为用户着想，必须最少在几种不同类型的浏览器下测试网站，看看兼容性如何。

8、SEO优化布局

在网页设计时对网站优化进行考虑，对网站运营时要优化的关键词考虑在内，同时再使用字体设计时考虑到网页制作的H1、H2、H3标签等细节优化，使网上上线后符合搜索引擎的搜索规则。

网页设计常用工具

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 导出、线框以及可重复使用的符号。

5、Adobe XD

adobe家打造的一款集页面设计和交互原型为一体的设计工具，支持多人在线实时协作功能。另外在兼容性上优势最大，能跟全家桶产品进行联动;但是在资源和功能这两方面相对于前面两款就比较弱势了。

6、Canva

Canva是一款免费的设计工具。它不能被认为是一个成熟的网页设计软件，但你可以使用Canva创建有趣和有吸引力的设计来支持你的网页模板。它非常适合构建可以添加到Web设计中的图像。

它配备了数百个模板，使您的工作更轻松。如果您没有任何设计技能，可以使用Canva中的模板，轻松地为您的Web模板构建具有专业外观的图像。

网页设计常见问题

1、没有遵循网页设计基本原则

在移动终端网页设计环节要积极体现精简原则，在页面设计中要尽量做到重点突出、精简，这样的设计才能更好的满足用户的个性化要求，提升网页浏览的便捷性和画面感，给用户带来不同的视觉体验。然而，当前在移动终端网页设计的过程中相关人员没有严格按照标准流程进行设计，设计重点不突出，不够精简，手机屏幕尺寸偏大，这给用户造成了诸多不便，网页浏览起来不方便，网页相应内容不够简明扼要。

2、自动弹窗设计不够合理

用户在网页浏览的过程中，网页自动弹窗，用户等待时间过长，从而导致了流量消耗过多，这使得用户的满意度降低，不利于移动终端网页设计工作的更好发展。

3、对目标终端屏幕特征掌握不够

在移动终端网页设计的过程中相关人员一定要积极了解目标终端屏幕特征。然而在实际工作中，设计人员却没有做到这点，对目标终端屏幕特征的了解不够，页面渲染效果受到浏览器像素宽度的影响。多数用户都经常使用竖屏手机，而平板电脑是横屏使用的，因此，实际设计中由于没有考虑到这点，导致了用户页面的渲染效果受到了一定影响，对分辨率范围的划分不够合理，没有考虑到移动终端不同，相应的屏幕分辨率就会不同。

在网页设计中，色彩的搭配、文字的变化、图片的处理等是设计过程必须考虑的，但设计师在网页设计时不要忽略了SEO的一些细节，从而进一步提升网页设计的用户体验度。