网站基础知识全攻略：为使用者打造优质流畅的资讯平台

随著移动端装置的广泛普及与深入应用，大众早已习惯透过智慧手机和平板电脑来获取各类资讯。然而，这并不意味著我们可以忽视PC端网站的设计与最佳化。毕竟，仍有一部分使用者习惯使用PC来访问网站，确保PC端网站的优质体验同样至关重要。

因此，在著手网站视觉呈现之前，我们需深入掌握网站设计的基础知识，以构建一个为使用者提供更优质、流畅的资讯平台。

一、掌握网站设计的工作流程

网站专案流程大致可分为以下几个阶段：原型图设计、视觉稿设计、设计规范制定、切图准备、前端程式码开发、专案走查。尽管多数设计师更关注视觉稿设计阶段，但网页制作的前期与后期工作同样不容忽视，具体包括：

原型图阶段：设计师需与产品经理紧密沟通，明确需求，以确保视觉效果的最佳化呈现。

视觉稿阶段：根据原型图确定的内容与版式，完成网站介面的整体设计。

设计规范阶段：视觉稿透过后，设计师需总结设计规范，明确所有页面上的共性元素，如字型大小、图片尺寸、按钮样式等。

切图阶段：虽然网页设计师通常无需为前端设计师切图，但在特殊情况下，仍需为前端提供所需的图片资源。

前端程式码阶段：前端设计师透过程式码重构设计页面，并与后端程式设计师对接，调取资料介面。设计师与程式设计师会共同对网站进行埋点，以监控网站是否达到预期的资料指标。

专案走查阶段：网页制作完成后，设计师需进行走查，确保网页还原度符合预期。如有出入，需与前端设计师协商调整。

二、了解网站设计的型别

网站设计按对象可分为To C（面向使用者和消费者）和To B（面向商家或企业）两大类。以下是常见的设计型别：

▌  To C 网站设计型别：

入口网站：提供综合性的网际网路资讯资源与服务，如新闻、天气、股票、体育等实时资讯，以及搜寻引擎、邮箱、即时通讯等线上服务。设计上强调资讯的聚合与分类，便于使用者快速找到所需内容。

企业网站：主要用于介绍和宣传企业本身，内容涵盖企业介绍、产品介绍、技术服务等。设计上追求高阶、大气、上档次的风格，以提升品牌形象。

产品网站：专注于展示特定产品的工艺、技术、设计、特点、构造、使用场景等。设计上常采用全屏布局，配合视差滚动等方式，营造沉浸式体验。

网上商店：提供线上购物平台，支援商品展示、购物车、线上支付等功能。设计上注重使用者体验，包括商品搜寻、筛选、比较、评价等功能的便捷性，以及购物流程的顺畅性。

专题页面：针对特定主题或事件设计的页面，如节日促销、新品释出等。设计上强调视觉冲击力和互动性，以吸引使用者关注并参与。

影片网站：提供影片播放、分享、评论等服务。设计上考虑使用者的使用场景，如影片区域要足够大，颜色以暗色为主以减少干扰，同时提供相关影片推荐、点赞等功能。

移动端H5：运用网页技术，在手机浏览器或内建浏览器内展示的网页，常用于营销活动。设计上注重创意和互动性，以吸引使用者分享和传播。

▌ To B 网站设计型别：

后台网站（Dashboard）：透过资料视觉化方式快速展示操作者所需的资料。设计上注重效率，无需过多装饰元素。通常采用全屏式排版，小屏时则按比例缩小各元素。

CRM系统：企业用于客户资讯化管理的系统。设计上需将资讯按逻辑关系分类，加强对比、对齐、重复、亲密性原则，提升使用者体验。

企业OA：出于安全和保密性考虑，许多公司选择自行开发。设计上需以使用者体验和效率为重，让使用者能够轻松找到当前页面中最重要的功能。

三、了解网站设计的组成部分

首页：使用者访问网站时首先接触的页面，相当于书籍的目录，引导使用者进入不同区域。首页设计需包含导航设计和部分内容展示，以吸引使用者点选进入二级页面。

二级页面：网站层级一般不超过三级，以避免过于复杂影响搜寻引擎爬行和使用者体验。二级页面及以下需加入面包屑导航，方便使用者了解自己的位置并返回其他页面。

底层页：提供使用者实质资讯的页面，需设计推荐相关资讯板块等，以吸引使用者继续阅读或返回上一层级。

广告：网站盈利的重要方式之一，包括Banner、对联广告、资讯流广告等。设计师需根据广告型别和位置进行合理设计，确保广告效果与使用者体验的平衡。

Footer：网页底部的区域，颜色通常较暗且逻辑级别较低。设计时需酌情降级处理，避免过于显眼。

四、了解网页制作技术的原理

网页制作技术原理决定了哪些设计和互动可以实现，以及网页设计师如何与前端设计师协作完成复杂的互动效果。

基于滑鼠的互动：主要包括超连结与按钮的互动状态，如Link（正常状态）、Visited（已点选状态）、Hover（滑鼠经过状态）、Active（启用状态）。按钮还具备「不可点选」状态，以提示使用者当前条件不满足。

静态网页：由HTML编译而成，储存在伺服器上的网页程式码基本为HTML格式。HTML语言简单易懂，但仅使用HTML会导致伺服器损耗较大。CSS技术的出现解决了这一问题，透过将网站样式与内容分离，节省伺服器资源。JavaScript程式码则可配合HTML和CSS使用，构建浏览器特效。

动态网页：随时间、内容和资料库呼叫而动态生成的网页，程式码形式主要包括Asp、Php、Jsp等。为提升网站效率，有时会使用伪静态结构。

动画：实现动画的原理包括HTML5影片播放、Flash Player播放器播放、Gif格式、CSS Sprite等。每种方式都有其优缺点，设计师需根据需求选择合适的动画方式。 视差滚动：利用程式码判定网页滚动，使页面元素运动速率和位移距离不同，实现空间感。

五、了解网页设计的规范

在设计之前，网页设计师需与前端设计师沟通网页所需的尺寸、字型、互动等，以避免后续误会。

网页尺寸：需考虑使用者萤幕的多样性，设计稿主要顾及主流使用者的解析度，其他解析度透过适配方式解决。

文字规范：文字在浏览器上的渲染与系统和浏览器有关。尽管设计师可能使用Apple Mac设计网页，但需确保网页设计效果与Windows系统显示一致。字号大小一般选用12-20px，以确保中文文字的清晰显示和适配性。

图片规范：网页设计中图片常用比例包括4:3、16:9、1:1等。具体图片大小无固定要求，但整数和偶数为佳。

按钮：按钮风格经历了从「斜面与浮雕」到「拟物风格」再到「扁平风格」的演变。如按钮在图片中，为不影响图片美观性，可去掉填充并保留边框。

表单：表单控制元件一般直接呼叫系统设计，如无法满足要求，可透过CSS增加表单样式。

栅格：栅格系统能大大提高网页的规范性，使页面所有元件的尺寸都有规律。基于栅格进行设计，可保持整个网站各个页面的布局一致，提升使用者体验。

自适应与响应式网站：随著移动端浏览网站的使用者增多，网站需进行自适应或响应式布局。自适应网站的设计稿一致，但需考虑萤幕变小时的变化方式；响应式网站则需设计不同版本的设计稿，根据不同装置提供不同的CSS样式。

无论是To C还是To B网站，在设计网页时都应遵循上述步骤，建立视觉规范，并尝试在网站设计中加入互动设计，以提升使用者操作体验的流畅性。网站制作完成后，别忘了对网站专案进行走查，找出并解决网站上的BUG。

香港网页提供一站式数码营商方案服务，包括、网页设计、网络推广、网页管理与寄存、系统开发及其它增值服务，全方位满足客户的业务需要，欢迎随时联络我们，香港网页是您开拓网路商机的最佳伙伴。

联络电话: 852-3749 9734

电邮地址: info@hkweb.com.hk

网址: https://hkweb.com.hk