做手机网站别再只下载源码，这套设计规范能救命

很多老板找我聊项目，第一句话往往是：“我想做个手机网站，能直接下载源码吗？” 我通常不会直接给链接，而是反问：“你的模板网站是不是已经丑到让人想关页面了？” 这句话一出口，对方往往沉默，因为痛点被戳中了。

模板网站的问题不仅仅是“丑”，而是“不够用”。字体层级混乱、点击热区太小、加载慢得像蜗牛，用户拿着手机在地铁上刷两下就划走了。这时候，光靠【源码下载】解决不了根本问题。源码只是骨架，设计规范才是血肉。如果你没有一套清晰的设计系统，哪怕下载了再好的开源代码，最后做出来的东西也是一盘散沙。

今天不聊虚的，咱们从实战角度，拆解一下如何【做手机网站】时，建立一套真正能落地、能提升转化率的设计规范。这套方法，是我服务过几十家创业团队后总结出来的，专治各种“看着眼熟但就是不舒服”的界面。

从像素到感知：移动设计的原则与红线

在动手写一行CSS之前，你得明白手机和电脑的根本区别：屏幕小、单手操作、注意力碎片化。

原则一：拇指热区优先 用户90%的操作都在屏幕下半部分。导航栏、CTA按钮、主要交互元素，必须放在拇指自然弯曲能触达的区域。把关键按钮放在左上角？那是给鼠标用户看的，对手机用户来说，这就是反人类设计。

原则二：视觉层级即信息层级 手机端没有鼠标悬停提示（Hover），用户只能靠视觉强弱来判断重要性。标题、正文、辅助信息，必须有明显的字号、字重、颜色对比。如果用户在一屏内看不出哪是最重要的信息，你的设计规范就失败了。

原则三：间距是呼吸感，不是浪费 很多新手觉得手机屏幕小，恨不得把所有内容都塞进去。大错特错。移动端用户阅读速度快，密集的排版会带来巨大的视觉压力。适当的留白（Whitespace）能提升阅读效率，让用户感觉“透气”。

红线警示：

字体小于12px：在大多数安卓机上看不清，直接放弃。
点击区域小于44x44px：手指会误触，投诉率直线上升。
自动播放音视频：不仅费流量，还容易被用户反感屏蔽。

布局与间距：构建稳定的视觉骨架

有了原则，接下来是具体的数字。设计规范的核心，就是量化。不要凭感觉说“留白多一点”，要说“留白16px”。

1. 基础栅格与边距

建议采用8pt Grid（8像素网格系统）。所有的间距、尺寸，都是8的倍数：8、16、24、32、40、48...

页面左右边距：统一为16px或20px。不要一会儿15，一会儿20，视觉对齐会崩盘。
模块间间距：至少32px。
卡片内边距：16px。

2. 安全区域适配

iPhone X及以后机型有“刘海”和底部Home条。设计时必须预留Safe Area。

顶部导航栏高度：至少44px，但内容需避开顶部20-44px的安全区。
底部固定按钮：必须避开底部20-34px的安全区，否则在全面屏手机上，按钮会被遮挡或难以点击。

3. 响应式断点

虽然主要做手机网站，但也要考虑不同尺寸的安卓机。

Small Mobile (320px)：基础断点，单列布局。
Medium Mobile (375px)：iPhone标准，主流设计基准。
Large Mobile (414px)：大屏手机，可适当增加边距或展示更多列内容。

实战技巧： 在Figma或Sketch中，建立一套“间距变量”。比如spacing-sm: 8px, spacing-md: 16px, spacing-lg: 24px, spacing-xl: 32px。开发时直接引用变量，避免硬编码数字。这样后期修改全局间距时，只需改一处，全站生效。

色彩与字体：克制即高级

移动端色彩不是越多越好，而是越准越好。

1. 色彩系统

主色（Primary）：只选1个。用于品牌识别、主要按钮、关键链接。建议饱和度适中，避免在大面积背景下刺眼。
辅助色（Secondary）：1-2个。用于次要按钮、标签、图标背景。
中性色（Neutral）：占屏幕80%以上。包括背景色、文字色、分割线。
- 背景：#FFFFFF 或 #F7F8FA（浅灰，减少白屏刺眼感）。
- 主文字：#333333 或 #1F2937（深灰，比纯黑#000000更柔和）。
- 次文字：#6B7280（中灰）。
- 分割线：#E5E7EB（极浅灰）。
功能色：成功（绿）、警告（黄）、错误（红）。必须明确，不能混用。

2. 字体规范

字族：系统默认字体（-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...）是性能最优解。不要随便引入Web Font，除非品牌需求极强。
字号阶梯：
- H1 (页面大标题)：24px, 字重 700
- H2 (模块标题)：20px, 字重 600
- H3 (卡片标题)：18px, 字重 600
- Body (正文)：16px, 字重 400 (推荐16px，防止iOS缩放)
- Caption (辅助文字)：14px, 字重 400
- Micro (极小字)：12px, 字重 400 (仅用于版权、备注)
行高：正文1.5-1.6倍，标题1.2-1.3倍。

避坑指南： 很多团队喜欢用渐变色做按钮，但在低端安卓机上，渐变渲染性能差，且容易显得廉价。建议用纯色，搭配阴影或边框来表达层次。

组件设计：一致性是用户体验的基石

组件是设计的原子。做手机网站，最怕的就是“同一个东西，页面A和页面B长得不一样”。

1. 按钮（Button）

主要按钮：填充主色，白字，圆角8px，高度48px（符合拇指操作）。
次要按钮：边框主色，主色文字，透明背景。
危险按钮：红色填充，用于删除等破坏性操作。
禁用状态：透明度50%，不可点击。
加载状态：必须设计Loading状态，避免用户重复点击。

2. 卡片（Card）

圆角：8px或12px。
阴影：轻微阴影（box-shadow: 0 2px 4px rgba(0,0,0,0.05)），避免厚重。
内边距：16px。
内容结构：图片/图标 -> 标题 -> 描述 -> 操作区。

3. 表单（Form）

标签位置：建议标签在输入框上方（Label on top），而不是左侧。手机端左侧标签会压缩输入框宽度。
输入框高度：48px，便于点击。
错误提示：即时显示，红色文字+图标，位置在输入框下方。
键盘适配：输入邮箱时，键盘应显示@符号；输入数字时，应显示数字键盘。这是前端开发必须配合设计规范实现的细节。

4. 图标（Icon）

风格统一：线性或面性，不能混用。
尺寸：24x24px 或 32x32px。
对齐：图标与文字垂直居中对齐。

GitHub 开源参考： 如果你想找高质量的移动端组件库参考，可以去 GitHub 搜索 Ant Design Mobile 或 Vant UI。这些开源仓库不仅提供了组件代码，更重要的是它们背后有一套完整的设计Token（设计变量）体系。研究它们的源码结构，比你自己从头摸索要快得多。例如，Vant 的设计规范文档里，详细定义了每个组件的状态、尺寸、颜色变量，这就是我们所说的“可复用的设计规范”。

前端实现：从设计稿到代码的最后一公里

设计规范再好，代码实现不到位，也是白搭。这里给出一段符合上述规范的CSS基础样式，你可以直接作为项目的base.css或tokens.css参考。

:root {/* 色彩变量 */--color-primary: #3B82F6;--color-primary-hover: #2563EB;--color-text-main: #1F2937;--color-text-secondary: #6B7280;--color-bg-page: #F7F8FA;--color-border: #E5E7EB;/* 间距变量 (8pt Grid) */--spacing-xs: 8px;--spacing-sm: 16px;--spacing-md: 24px;--spacing-lg: 32px;/* 字体变量 */--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-h1: 24px;--font-size-h2: 20px;--font-size-body: 16px;--font-size-caption: 14px;/* 圆角与阴影 */--radius-md: 8px;--shadow-card: 0 2px 4px rgba(0,0,0,0.05);
}body {font-family: var(--font-family-base);font-size: var(--font-size-body);color: var(--color-text-main);background-color: var(--color-bg-page);margin: 0;padding: 0;line-height: 1.5;-webkit-font-smoothing: antialiased;
}/* 通用容器：处理左右边距和安全区域 */
.container {padding-left: var(--spacing-sm);padding-right: var(--spacing-sm);padding-top: env(safe-area-inset-top, 0);padding-bottom: env(safe-area-inset-bottom, 0);
}/* 主要按钮组件 */
.btn-primary {display: inline-flex;align-items: center;justify-content: center;height: 48px;padding: 0 var(--spacing-md);background-color: var(--color-primary);color: #FFFFFF;font-size: var(--font-size-body);font-weight: 600;border: none;border-radius: var(--radius-md);cursor: pointer;transition: background-color 0.2s ease;width: 100%; /* 移动端按钮通常撑满 */
}.btn-primary:hover {background-color: var(--color-primary-hover);
}.btn-primary:active {transform: scale(0.98);
}/* 卡片组件 */
.card {background-color: #FFFFFF;border-radius: var(--radius-md);padding: var(--spacing-sm);box-shadow: var(--shadow-card);margin-bottom: var(--spacing-md);
}.card-title {font-size: var(--font-size-h2);font-weight: 600;margin: 0 0 var(--spacing-xs) 0;
}.card-desc {font-size: var(--font-size-caption);color: var(--color-text-secondary);margin: 0;
}

部署与优化建议：