为啥别人的网页看着就专业，你的总像拼凑？
上周帮朋友改网站，发现导航字体一会儿14px一会儿18px，按钮颜色比彩虹还花哨——设计规范不统一，再好的内容也像地摊货！咱今儿就掰扯明白，网页UI设计到底有哪些必须遵守的规矩。
网页尺寸怎么选最合适？
刚入行的小王把设计稿做成满屏1920px，结果用户用笔记本打开只看到半拉页面！有效可视区才是黄金地段：
| 类型 | 推荐尺寸 | 使用场景 |
|---|---|---|
| 企业官网 | 1200px宽度 | 适合图文展示 |
| 电商平台 | 1400px宽度 | 商品多列布局 |
| 后台系统 | 1000px宽度 | 表单密集区域 |
划重点：首屏高度控制在700-750px，就像饭店的临街橱窗，得把最诱人的菜品摆在这个区域。前两天帮餐饮店改版，把招牌菜挪到首屏上半部，咨询量直接涨了40%！
字体用多大才不瞎眼？
见过最离谱的网站，正文用10px字号，看得人眼珠子都要瞪出来！字号选择有门道：
- 导航文字：16-18px（好比路牌，要清晰醒目）
- 正文内容：14px起步（像书本排版，保证阅读舒适）
- 标题文字：22-30px（堪比报纸头条，瞬间抓眼球）
举个反面教材：某教育平台把课程价格用12px灰色显示，结果80%用户压根没注意到优惠信息。改成18px亮橙色后，订单量噌噌涨！
颜色搭配怎么不出错？
老李的非遗手作网站用了大红大紫的撞色，看着像乡镇KTV海报...颜色规范三步走：
- 主色调：直接扒LOGO颜色（品牌色要占60%以上）
- 辅助色：选主色的邻近色（比如蓝色配浅蓝/深蓝）
- 警示色：红色只用在删除/警告按钮
去年帮奶茶品牌改版，把随机渐变更改为品牌粉+奶白双色搭配，用户停留时长直接翻倍。记住：颜色越克制，品牌越高级！
图标按钮有哪些潜规则？
见过最反人类的设计——垃圾箱图标放在保存按钮旁边！交互规范要牢记：
- 按钮三态：默认/悬浮/点击必须区分明显
- 图标语义：
- ✔️ 表示完成 ❌ 表示关闭
- ⬇️ 必须有下拉菜单 ➡️ 默认收起状态
- 热区大小：移动端按钮不小于72×72px（拇指友好设计）
上周改版时发现，某政务网站的表单提交按钮居然用灰色！换成政务蓝后，表单提交率从23%飙升到68%，颜色心理学诚不我欺！
布局怎么排才能留住用户？
小王把产品详情页做成满屏文字，用户进来3秒就闪退...布局秘籍在这里：
| 一栏式 | 两栏式 | 三栏式 | |
|---|---|---|---|
| 优点 | 视觉冲击强 | 导航内容分离 | 信息量大 |
| 缺点 | 展示内容少 | 需精心设计 | 容易杂乱 |
| 适用 | 品牌官网 | 电商/博客 | 门户网站 |
划重点：重要内容放F型视觉路径上！就像超市把促销品摆在入口右手边，人类浏览网页习惯从左到右、从上到下扫描。
图片处理有哪些隐藏考点？
见过最离谱的案例——产品图带其他平台水印！图片规范三大铁律：
- 尺寸统一：同板块图片比例必须一致（比如全部4:3）
- 文字留白：图片与文字间距≥16px（喘气空间不能省）
- 高清无水印：分辨率至少72ppi，大小不超过500KB
去年帮家具网整改，把杂乱的图片尺寸统一为16:9，加入10px留白，用户咨询量直接涨了55%。记住：整齐比花样更重要！
干了八年网页设计，见过太多"我觉得好看"的翻车案例。上个月帮健身房改版，老板非要加七彩渐变动效，结果用户投诉"眼花想吐"...最后还是改用品牌绿+运动图标，转化率反而提升37%。要我说啊，设计规范不是束缚，而是帮你少走弯路的导航仪。下次开工前，先把这篇规范贴在电脑边上，保准客户挑不出毛病！
