全面了解网页设计

全面了解网页设计

1. 什么是网页设计？

网页设计又称为Web、网站设计、、WUI等，其实质是网站的平面设计。

进入21世纪，我们使用移动终端获取信息的频率比PC终端更高，但PC终端获取信息的历史却比移动终端长得多，从1987年第一封电子邮件发送到2000年美国纳斯达克上市的搜狐、新浪、网易，再到现在网站无处不在，中国的网站已经飞速发展了近30年，至今我们在PC终端上更多的是做办公、娱乐，现在的移动终端分辨率（分辨率）就是PC终端的通用设计分辨率。

PC端在发展的过程中，不仅不断提升网站性能、分辨率和硬件，还更加注重用户体验设计、页面交互的舒适度、页面动画等。

作为UI设计师，除了要掌握基本的网站设计规范、了解网站的运行原理外，在设计网页时，还需要有较高的审美能力和逻辑思维能力，合理安排动画和布局。

2. 工作流程

2.1 了解需求

了解用户需求（本产品的定位），撰写市场分析、用户研究、产品描述文档等需求文档。

2.2 原型设计

在原型阶段，设计师需要与产品经理沟通需求。需要注意的是，产品原型不仅仅是产品经理的工作范围，产品经理也不会向设计师下达设计要求，而是需要双方就各自的优势进行沟通。设计师在视觉方面可能有更好的呈现方式。此时需要在设计前与产品经理达成一致，而不是在产品原型制作完成后反复修改。

工具（Axure）

输出（原型）

交互式原型设计

2.3 视觉设计

基于原型进行视觉设计，确定信息功能优先级，重构页面布局排版，在保证信息功能不变的前提下进行设计，整理完善设计规范，用组件化的思维形成本产品的组件库。

组件库的建立（图示的组件库是作者近期做的电商产品的组件库）

建立的还不是很完善的组件库，主要因为自己刚开始设计的时候，知道有组件库，但是不知道怎么设计，所以放出来给大家参考。

设计标准是所有页面共有的东西，比如不同的字体大小、图片尺寸、按钮样式等。建立一个设计标准和可视化组件库。

2.4 切割和贴标

前期（PS 做视觉设计，Pixel Chef，或者PS导出） 中期（、XD等做视觉设计，上传到Blue Lake对接裁剪） 现阶段（Figma做视觉设计，开发等独立裁剪选择合适的）

PS/（蓝湖切图）

Figma（设计裁剪一体化）

2.5 前端开发

前端开发工程师的主要工作就是用代码把设计稿变成静态页面。

然后我们跟后端工程师调用数据接口，一个网站就可以上线了。为了方便网站开发后期的数据监控，在开发网页的时候会埋下“点”，方便后期了解网站数据，哪些流程有大量的用户流失。这样我们就可以对网站进行改版，提高用户体验。

2.6 后端开发

集中在三个部分，分别是平台设计、接口设计和功能实现。平台设计主要是构建后端支撑服务容器；接口设计主要是针对不同行业设计相应的功能接口。通常一个平台有多套接口，就像卫星导航平台有民用和军用两套接口；功能实现就是完成具体的业务逻辑实现

上传数据或信息管理PHP .net数据库开发与建立

2.7 项目演练

上线前、上线后进行软件自测试，主要分为“可视化走查”和“代码走查”。

设计师在视觉演练中的主要任务是检查视觉稿与开发出来的页面是否一致，如果不一致，就需要前端工程师进行调整。

在代码排查过程中，专业测试人员将审查并批准工程师的代码。开发人员应该有机会向其他人解释他们的代码。通常，即使是简单的代码解释也会帮助开发人员识别错误并设想出解决以前棘手问题的新方法。

2.8 输入

主要负责数据录入和后台上传。

2.9申请域名、空间审核、网络推广、网站维护、网站运营。

2.9.1 申请域名

通过向第三方服务商申请域名来解决互联网地址对应问题的方法；域名遵循先到先得的原则，每个域名都是唯一的，价格也不同；七类顶级域名按用途分类，并以不同的后缀结尾；域名代表互联网协议（IP）资源，例如用于访问的个人计算机、服务器计算机上托管的网站，或网站本身或通过互联网进行通信的任何其他服务。

2.9.2 线上推广

网站上线之后最重要的事情就是推广，因为推广可以给网站带来大量的访问量，而这些访问量就会产生点击权重，加速网站的收录和排名。

2.9.3 网站维护

网站维护，一个好的网站需要定期或者不定期的更新网站内容，才能不断的吸引更多的访客，增加流量。网站维护就是为了让你的网站能够长期稳定的运行。

2.9.4 网站运营

网站运营是指为了提高网站服务用户的效率而对网站进行后期运营和管理的一切活动；范围通常包括网站内容更新维护、网站服务器维护、网站流程优化、数据挖掘与分析、用户研究管理、网站营销策划等。网站运营的常见指标包括：PV、IP、注册用户、在线用户、网站跳出率、转化率、付费用户、在线时长、购买频率、ARPU值等。

3. 网页设计流程

3.1 绘制草图

3.2 修正细节

3.3 组织导航

3.4 丰富的字体

3.5 颜色风格

3.6 分类信息

与设计师紧密相关的工作流程

原型设计、视觉设计、裁剪与注释、前端开发、项目评审

3.网站分类

网站主要分为两种类型：TOC和TOB。

目录

TOC是面向用户、面向消费者的。比如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动H5等等，都是面向用户、面向消费者的产品。

既然是针对用户、针对消费者，那么设计就必须要有吸引力，体验设计也要以用户为中心。

托比

TOB端是需求量很大的一个类别。

电商网站供应商的后台、企业级OA、网站统计后台等面向商家和职场人士的网站都是TOB网站项目，这些项目的要求和TOC网站有很大不同：TOB项目最重要的是效率，而不是体验，也就是我们在为用户设计工具的时候，首先要保证运维人员能够高效的完成自己需要做的工作。

3.1 TOC 侧

3.1.1 门户

国内比较知名的门户网站有新浪、腾讯、网易、搜狐等；国外比较知名的门户网站有Naver等。

门户网站的特点就是大而全，整个网站需要有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同的频道。

对于设计师的数量和能力的要求也较高，每个不同的品类都需要不同的设计师负责，并且需要对该品类有一定的了解和兴趣。

3.1.2 专题网站

无论是电子商务网站还是门户网站，都需要设计一些特殊的页面来增加曝光率，提高转化率。

国内外各种大型节日可以是如：五一节、母亲节、植树节等。还有特定主题类别如：防护、野餐、户外运动等。

在专题页的设计上，由于专题页的上线周期较短，需要在短时间内获得较大的曝光和转化，所以需要在设计中加入更多显眼、有温暖感的元素，才能在短时间内吸引用户的注意力，完成转化。

3.1.3 视频网站

该视频网站流量和用户粘性惊人，主要内容为版权+用户原创视频。

随着带宽的飞速发展，视频网站也得到了快速的发展，我们现在可以在几分钟内下载一部电影，并且不影响带宽。

在视频网站的设计上，更多的考虑用户的使用场景，力图满足用户在不同场景下使用产品的舒适度。

3.1.4 移动H5

H5代表HTML5，并不单指移动端，而是指网页的前端开发语言。由于概念上的约定俗成，我们现在常常把手机端结合视频、动画、互动等营销形式称之为H5。其实它的本质就是利用网页技术将网页运行在手机浏览器或者内置浏览器中。

随着科技的快速发展，H5似乎具有越来越大的传播价值和分量。

微信、手机浏览器等平台级产品的火爆，推动了依托门户进行传播的H5的发展，如果设计得好，你的项目可能在朋友圈产生病毒式传播的效果。

3.1.5 产品网站

产品网站的布局一般以大屏幕全屏展示为主，给用户带来身临其境的浏览体验。

设计主要展示产品的工艺、技术、设计、功能、结构、使用场景等。

3.1.6 公司网站

每个公司都需要一个网站来展示其能力、介绍其产品等。

网站已经是中小企业的标配，企业网站在设计的时候，一般会有几个模块，比如首页、公司介绍、产品中心、公司团队、在线商城、联系我们等，企业网站会展示很多公司环境、团队成员、企业文化等实景照片，也会设计一些信息。

企业网站通常追求所谓的“高端”、“隆重”、“高档”的风格，也就是达到让消费者对品牌产生认同的要求。

3.1.7 游戏网站

游戏给企业带来的收益无疑是巨大的，在获得收益的同时，还能获得数据。游戏除了需要制作精良的游戏，官网也必须设计精美。别忘了，每一个玩家都需要访问你的游戏官网，才能完成下载、充值、社交等重要操作。国外的游戏网站比如暴雪娱乐（）的官网设计得极其精美，每款游戏的官网都是精品。比如魔兽世界、星际争霸2等游戏的官网，在中都有视觉冲击力非常强的动画，然后网站界面的元素都是游戏的风格，当你登录这个网站的时候仿佛你就在游戏中一样。

3.1.8 电子商务网站

电商设计师是网页设计师的一个分支，由于电商的快速发展，电商设计师需要设计产品详情页、首页、网页布局、简单的CSS样式等。

3.2 托比

3.2.1 网站后端

后端网站又叫，翻译成中文就是仪表盘，它的含义就是里面有大量的数据和统计信息。

3.2.2 ERP系统

“ERP系统（）是企业资源计划的缩写，是集物资资源管理、人力资源管理、财务资源管理、信息资源管理于一体的企业管理软件。目前市面上比较常见的ERP产品有SAP、用友UFERP、金蝶ERP K/3等。”

3.2.3 SaaS系统

SaaS 是（-as-a-），意思是软件是一种服务。其他公司会找提供 SaaS 服务的公司来定制系统，然后服务公司再为客户提供从服务器到设计的一体化服务。

3.2.4 企业OA

企业OA，即（ ），也是办公自动化系统。

大型企业往往面临员工数量多、地域广阔、公司事务办理流程冗长等问题，企业OA可以很好的解决这些问题，通过企业OA可以完成请假、调假、辞职、查看公司规章制度、请示汇报等工作，减少了很多窗口成本和员工的时间成本，提升了公司的效率。

4. 网站组成

1.基础知识（设计规范）

1.1 文档标准

尺寸：内宽

色彩模式：RGB

分辨率：72

内宽（1000 至 1200）的四舍五入值

1.2 字体使用指南

总原则：提高文字的辨识度和页面的可读性。切记不要随意加粗。

默认的中文字体为：松体微软雅黑或者华文西黑等。

默认的英文字体是： ，Arial，（无衬线）

, Times New Roman（衬线）

文字字体 14px

导航字体 16/18/20

下标字体 12px

2.内容构成（展示的内容为作者最新的电商项目）