网站页面布局设计规范.docxVIP

网站页面布局设计规范

我做网页设计相关工作快十年了，接过从企业官网到电商平台大大小小几十个项目，最深的感触就是：很多从业者做设计的时候，总把精力放在好看的动效、精致的图片上，却偏偏忽略了最基础的布局规范。最后做出来的页面要么花里胡哨用户找不到想要的内容，要么换个设备打开就乱成一团，改来改去耽误了时间也影响了用户体验。其实一套清晰统一的网站页面布局设计规范，不仅能让设计、开发的效率翻倍，更能给用户稳定一致的浏览感受，帮用户快速完成浏览、转化的目标，这才是网页布局真正的核心价值。接下来我就结合自己这些年的实践经验，从底层设计原则、功能模块规范、多终端适配规则、体验优化要求几个维度，梳理出完整可落地的设计规范，给大家做参考。

1网站页面布局设计的核心基本原则

做任何设计都要先定底层规则，布局规范也不例外，所有具体的模块设计都要围绕这几个基本原则展开，不然很容易偏离方向。

1.1一致性原则

一致性是布局规范的核心，说白了就是整个网站所有页面的布局逻辑、视觉规则要统一。大到导航栏、logo、页脚的位置，小到模块间距、按钮圆角、文字行高，所有页面都要遵守同一个规则，不能随意改动。我刚工作那会遇到过一个客户，为了在产品页放更多内容，硬生生把顶部导航改成了侧边悬浮，首页又保持原来的顶部导航，结果内部测试的时候，好几个测试人员点进产品页后半天找不到返回首页的入口，差点误了项目上线。还有很多新手设