兰亭妙微ui设计公司分享：很多新手做网页设计，直接上手画页面，却忽略画布尺寸、导航选型、屏幕适配这些底层问题，最终设计稿交付开发后，出现页面错位、首屏信息被遮挡、不同设备体验差异巨大等问题。本文从画布与内容区、导航模式选型、布局与屏幕适配三大模块，拆解 PC 网站设计的关键实操要点。
一、画布与内容区：选对基准尺寸，算准真实首屏
在完成用户调研之后，正式设计的第一步，就是确定画布大小，画布基准要参考市场主流设备的分辨率分布。
根据 2021 年 PC 分辨率统计数据，1920×1080是市场占有率最高的分辨率，占比 40.75%；1920×1080、1366×768、1440×900 三者合计占比达到 62.75%。
设计选型小提示：遵循小屏适配大屏优于大屏适配小屏 的兼容原则，B 端项目可以选用 1440×900作为设计画布，阿里、Material Design 的 B 端规范均采用该尺寸。 如果产品面向特定人群，可直接以用户实际设备为准，例如企业内部办公系统，员工普遍使用 1366×768 笔记本，则直接以此作为画布标准。
首屏高度，不能直接照搬屏幕分辨率
网页运行在浏览器当中，系统 UI、浏览器控件都会挤占可视区域的高度，直接用屏幕分辨率当做首屏高度，会导致核心内容被遮挡。
- 系统占用高度：Windows 任务栏、Mac 程序坞、系统菜单栏，都会消耗屏幕垂直空间。
- 浏览器占用高度：页签栏、地址栏、书签栏共同占用可视高度。 主流浏览器控件高度参考：
- Chrome：页签栏 40px + 地址栏 46px + 书签栏 34px，合计 120px
- Safari：页签栏 28px + 地址栏 52px，合计 80px
真实可视首屏高度计算公式： 严格版：屏幕分辨率高度 − 浏览器控件高度 − 系统 UI 占用高度 简易版：屏幕分辨率高度 − 浏览器控件高度
设计时以此划定首屏线，把最重要的业务信息放置在首屏可视范围内。
二、导航模式选型：左导航 VS 顶导航，任务场景决定方案
PC 网页最主流的两种导航形式：左侧导航、顶部导航。
早在 2004 年，学者 JR Kingsburg 就针对三级菜单导航做可用性实验，对比 8 种导航组合，在完成明确任务的场景下，一级导航放置在侧边，用户操作效率更高，选择错误、操作犹豫的情况更少。
两种导航优劣势解析
左侧导航（侧导航） 优势：
- 垂直排布，换行 + 缩进可以清晰展示多层级菜单；
- 二级菜单常驻展示，不需要 hover 触发，用户对整体菜单结构一目了然，完成指定任务效率高。 劣势：会占用页面横向空间，压缩内容展示区域。 适用场景：任务驱动型网站，后台管理系统、邮箱、票务预订系统，代表产品：QQ 邮箱、公众号后台、携程后台模块。
顶部导航 优势：横向排布，几乎不占用横向空间，最大化释放内容展示区域。 劣势：二级菜单依赖 hover 悬浮唤起，鼠标移开菜单就消失，多层级导航的阅读、理解成本更高。 适用场景：内容消费型网站，资讯、图片、视频平台，代表产品：花瓣、知乎、爱奇艺。
同一个网站不同模块，也会混合使用两种导航：以百度为例，搜索浏览页面使用顶导航，给内容让出空间；进入个人中心，需要修改资料、管理收藏等明确操作，切换为左侧导航，提升功能查找效率。 很多综合网站会采用混合方案：顶导航承载登录、全局搜索这类通用能力，左侧导航承载细分业务菜单。
三、布局与适配：看懂 3 种适配方案，对齐开发预期
基础参数参考：
- 侧导航宽度：常用
200+8n的数值区间，208‑272px 都属于行业常见范围； - 顶部导航高度浮动较大，36‑80px，根据业务、视觉风格自由选择。
不同分辨率对应有安全内容宽度区间，设计时需要参考安全宽度，再结合栅格系统、适配策略确定最终内容区大小。
PC 网页一共 3 种主流适配实现方案，设计阶段就需要和前端对齐方案，避免后期返工：
1. 固定宽度布局
页面整体设定固定 px 宽度，无论大屏小屏，页面尺寸不会变化。 优点：设计还原简单，开发成本低； 缺点：兼容性差。小屏幕下会出现横向滚动条，大屏幕两侧留出大量空白。
2. 自适应布局（Responsive layout）
不改变页面整体模块排布结构，将 px 单位替换为百分比、rem，页面元素会跟随屏幕等比缩放，布局结构保持不变。 大多基于栅格系统实现，栅格由列（Column）、间距（gutter）、外边距（margin）组成，移动端设计规范，很多也是栅格体系的简化版本。
3. 响应式布局（Adaptive layout）
依靠 CSS 媒体查询@media，针对不同屏幕断点编写多套样式，屏幕尺寸变化时，不仅元素大小改变，模块排布结构也会发生变化，大屏、小屏呈现不一样的页面结构。 优点：各尺寸体验最优； 缺点：需要维护多套代码，开发工作量大。 实操中，通常结合栅格系统 + 屏幕断点共同实现。
协作建议：设计输出前，提前与开发确认适配方案，约定最大、最小适配屏幕边界，搭建统一的栅格规范，大幅降低沟通成本，减少还原偏差。
总结
从零设计 PC 网站，不要直接陷入视觉细节：
- 画布先定基准，结合市场分辨率，计算真实可视首屏，保证核心信息可见；
- 导航看业务场景：任务型优先左侧导航，内容消费优先顶部导航；
- 适配提前对齐开发，分清固定宽度、自适应、响应式的差异，用栅格规范约束内容区。