Web官网设计知识
时间：2023-10-04 09:06:01 | 来源：网站运营
时间：2023-10-04 09:06:01 来源：网站运营
Web官网设计知识：
一、前言
网页设计（Web design），本质就是网站的图形界面设计，根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能的策划；精美的网站设计，作为企业对外宣传物料的一种，对于提升企业的互联网品牌形象至关重要。
二、我们日常生活中，更多接触的是偏移动端的设计，这是为什么呢？web端和移动端的区别是什么？
（1）因为在我们日常生活中，手持设备更加方便，移动端设备的用户比重相对网页端用户多很多，所以
移动端的设计是强功能导向的设计，包含实用功能的内容。而网页端更偏向于品牌介绍，引导用户进入移动端。
（2）
移动端的功能众多，无法全部复制到网页端；如果要将移动端的功能复制到网页端，
成本会很高，同时
很多需要授权的功能，在网页端是无法拿到数据的（例如：麦克风、相册等），都是需要移动端扫码获取权限，所以网页端就无从推进。
三、常见网页的分类；
1：网页类型分为TO B和TO C；
TO C网页包含了：门户网站（网易、腾讯网等）、企业网站（苹果、联想等）、产品网站、电商网站（淘宝、京东等）、专题页面、视频网站和移动端H5；
TO B网站包含了：网站后台、ERP系统（企业管理系统）、Saas（服务公司定制系统）和企业OA（办公自动化系统）；
网页类型
2：TO B和TO C网页类型各具有什么特点？
TO C的网页的功能目的：建立品牌形象、介绍宣传；C端的网页更加强调视觉的主次性，因为功能模块多，所以会将视觉焦点引导到主要的功能上；
TO B的网页的功能目的：数据分析，对网站前台信息进行管理；B端的网页更强调交互的易用性，来提升用户的使用效率。
四、网页的布局和网页规范；（以企业官网为例）
1：企业官网的功能目的？
企业官网主要是用来流量分发、建立信任和增加认知；
2：企业官网的基础结构是什么样的？
企业官网一般包含：导航条、banner、特性介绍、专业案例和footer等版块。导航条尺寸：50-100px；banner尺寸：350-600px；特性介绍的作用是让用户建立信任，专业案例用来增加用户的认知，footer版块主要用来放置版权声明、联系方式、友情链接备案号等次要信息。
3：网页的布局需要注意什么？
网页设计时，可以在sketch中设置栅格，用来简化布局和间距；一般栅格的总款和列数12-24之间；具体情况在工作中灵活运用。五、网页的网页规范；（以企业官网为例）
1：网页中的网页尺寸和安全视距；
主流的设计软件中暗示了主流的尺寸；网页常见的主流的设计尺寸：1366x768px、1920x1080px和1440x1024px；工作中具体使用哪个尺寸设计，需要根据用户群体来确定。
一般网页设计中，需要有主视觉安全区域，主视觉安全区域宽度：1200px，网页旁边的导航以及悬浮弹窗在1440px以内；
需要注意的是，在进行网页设计的时候，屏幕的高度要减掉浏览器的高度：180px;2：网页层级；（1）网页的布局层级，从上到下，由强到弱；（2）网页的文字层级，根据移动端的一维分析法来拆分；
（3）网页中的常见字体？windows系统常用：微软雅黑、宋体、Arial； MAC电脑常用：苹方、宋体和Jelvetical；根据网页的风格可以增加特殊的字体包。网页中字体层级≥2，最小的字号：12px。文字的间距一般为字体的1.5-2倍。
（4）网页排版布局应该注意的地方？通过颜色、间距对比展现出网页相同版块的亲密性；亲密性可以对不同模块引导数据流向，降低理解的成本。
（5）网页中的常用图片比例？网页中常用的图片比例：16：9、1：1和3：4；图片可以压缩，减少服务器的资源耗费，常用的图片压缩网站（Tinypng)。
3：网页的配色以及状态提示；
（1）网页端的配色风格；
网页中的配色相对移动端比较克制
；配色风格需要根据情绪色彩和业务属性去设定；比如：蓝色代表安全、科技和可靠，一般用于工具类大数据平台；橙黄色代表热情、活力和快乐，一般多用于购物平台（如：淘宝）；
（2）网页中的配色方法；
a:一堆色值：记忆成本难、沟通成本高；
b:一个色值，通过改变不透明度，提高效率；（3）网页中的状态提示；红色一般表示提交失败、绿色表示成功；这个结合了生活中的红绿灯原理，红灯停（不予通过）、绿灯行（可通过），黄色可以起到警示作用。
在线咨询
