内容简述
需求梳理
1、确定好网站的核心模块，必须有的(不要贪多，从大范围想）：
公司介绍:企业的简介、发展历程、实力荣誉
产品展示：放产品分类，详情，核心卖点
售后服务：放服务承诺，客服入口，售后流程
当然，如果是新公司：
公司介绍
我们是做什么的？（一句话概括）
我们的优势和理念是什么？（1-2句）
我们能给客户带来什么？（一句）
配上公司的环境图/团队合照/办公场景
产品
产品图片
产品名称
一句话点亮
服务
咨询服务（客户有问题就处理）
售后服务（出现问题就解决）
质量/诚信保障（靠谱，负责）
2、定风格与客户
设计风格： 简洁大气（用白色背景、清晰字体、规整排版）
目标用户：成年人（内容专业、信息直观、不要花里胡哨）
3、网页的结构规划：
确定浏览顺序
Top导航栏👉Banner👉广告轮播👉公司简介👉产品展示👉视频展示👉售后服务👉底部导航
画图落地（含模块对应区域）
用PS/Figma/手绘都行
基础参数：打开PS，文件新建尺寸图纸（1920宽×3000高），分辨率和颜色模式就按照屏幕显示是的标准来就行，或者是分辨率调整到72，颜色模式为RGB。
网页的详细结构布局
顶部区域（固定入口）：
Top区：放置欢迎登陆/注册等基本信息栏 导航栏：位于Top区下方，用于页面跳转功能（Logo+首页/公司介绍/产品/服务/联系我们
主体区域（核心区，在页面占70％-75％）：
Banner区：尽量设计大面积展示区域(1张主图+一句核心slogan+1个行动按钮（比如【了解更多】
广告轮播：Banner下方放置可轮播的广告图展示产品（3-5张图，每张图对应一个产品或者活动的亮点）
公司介绍：展示品牌的历程，企业文化、门店分布，实力等（3-5行文字+1张公司环境/团队图
产品展示：包括列表，分类，推荐，详情入口（3-6个产品卡片，每个卡片＝图＋名称＋简短卖点
视频展示：用于播放产品介绍，品牌宣传，教程或案例视频（1个产品演示/品牌故事视频）
售后服务：中下方，客服入口，联系方式售后保障都放在底端，方便查看（3个服务承诺，比如24小时客服，全国联保）
底部区域：放置友情链接和版权信息等
友情链，公司地址等。
总之，内容逻辑就是先让客户了解公司的情况，再展示产品最后强调服务。
4、结构布局分析—绘制草图
有效的规划区域
标准尺寸：网页邮箱区域宽度为1920像素，高度可以根据区域的功能灵魂设置。
Top区高度：建议30像素，这块是专门放欢迎语的，联系方式之类的，要做的非常窄，保持简介，不能抢风头。
Top区设计
功能定位：放置欢迎语和基础信息
文案示例：“欢迎您来到（某地）”
文字规范：
字号：12号（精致点，不宜太大）
字体：常规字体 （最好是系统自带的，慎用艺术字）
颜色：白色（白底黑字太呆板，灰底白字显高级）
对齐方式：居中对齐（看起来舒服）
文案与字体设置
间距原则：最小4个像素，字不能贴的太紧，最少也要留四个像素的空隙，不然看得紧
推荐间距：12像素，这种算是最舒服的距离，相当于一个字的宽度。
设计哲学 ：适度用深色，别全用
登录注册模块设计
元素构成（内容）：两个按钮，一个写“登录”和“注册”两个功能入口
间距原则：12像素，字体对齐，排列整齐， 不要歪歪扭扭的。
导航区设计
高度规范：
常用范围在60-80像素，推荐70像素是较为舒服的高度，刚好能放下Logo和文字，看着不挤也不空旷。
适配原则：根据Logo尺寸动态调整高度（Logo大一点，导航栏就稍微加高；Logo小就矮一点。灵活调整。
颜色：颜色就用深灰色，不刺眼。
Logo的放置与居中
定位方法：严格居中对齐（logo不要偏左偏右，用参考辅助线卡位置，保证和旁边的文字和图标视觉平衡）。
设计要求：保持与导航栏其他元素的视觉平衡，不能让Logo显得太大或者太小，要和周围元素“看起来差不多重”。
调整技巧：用参考线卡准位置，保证和旁边的文字、图标视觉平衡。
导航文案调整
字号：16像素（常规导航文字大小）
颜色选择：深灰而非纯黑
间距控制：需要大于120像素的亲密距离，字与字之间要留够空，不能挤在一起，不然看着乱。
间距与亲密关系处理
亲密性原则：同一组的元素（比如导航文字）间距要小，不用组，例如导航和搜索栏，兼具要至少120像素，比如“首页”“产品”“论坛”这些字挨得近，而导航和下面的搜索栏就要离得远，这样就能一眼就能分清楚哪块是哪块。
视觉层次：靠间距大小来区分不同功能区，不用额外加框线，
搜索栏、购物车与个人中心布局
元素组成：搜索栏、购物车、个人中心三大功能模块
排列顺序：图标水平对齐，通常放在导航栏右侧，与登录/注册文字对齐，从左到右依次是搜索栏，购物车和个人中心
尺寸规范：建议与导航文字保持相同大小（16像素），看着会统一协调
分割线与亲密感营造
分割线颜色：用999灰黑，别用纯黑， 不要扎眼，让页面分区清晰又柔和
对齐要求：分割线要与整体页面严格居中，不能歪
设计效果 ：分清区域不破坏整体效果，让模块看起来更亲近，更规整。
班大图设计与冲击力营造
尺寸建议：建议1920×700像素（跟网页有效区同宽，高度700px，占满一屏）
设计要点：追求视觉冲击力，比如大图片，大标题，对比色，一眼抓住注意力。
操作技巧：按住Shift键可精确移动10像素单位，方便对齐和排版。
图层管理与整洁性
分组原则：Top区（最顶部栏）单独放一组，导航区单独放一组。
专业素养：图层整理得干净，能看出设计师的专业习惯，乱的图层会让人头大。
协作要求：图层结果清晰，团队里其他人改起来也方便，不会找不到东西。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
