18年沉淀高端建站经验
为企业持续赋能品牌新价值
同一个网站,电脑端做得再讲究,手机上一字号小、二按钮挤和三导航深,访客三秒就走。移动网站设计的成败集中在七个细节上,逐个给出参数和改法。
正文不小于 15px,关键信息 16px 起步,辅助小字也别低于 12px。手机屏小,字号一缩再缩是移动设计最常见的错误,宁可内容少一截,也别让访客眯眼看。
手指点击的误差比鼠标大,按钮和可点图标的触控区域按 44px 见方设计,视觉上可以小,点击热区不能小。相邻两个可点元素之间留出 8px 以上间距,避免误触。
电脑端三四层的栏目树搬到手机上就是灾难,移动端导航保留两层以内,第三层以后的内容用标签页或筛选器解决。返回路径要清楚,每个页面都能一步回到首页。
| 细节 | 参数建议 | 常见错误 |
|---|---|---|
| 正文字号 | 15px 以上 | 沿用电脑端 12px |
| 触控热区 | 44px 见方 | 按钮视觉小热区也小 |
| 导航层级 | 两层以内 | 整棵栏目树搬上来 |
| 表单字段 | 3-4 个必填 | 电脑端表单直接复用 |
| 图片宽度 | 统一全宽 | 大小不一参差排列 |
| 弹窗 | 能不弹就不弹 | 进站先弹三层广告 |
| 横屏溢出 | 禁止横向滚动 | 宽表格撑破版面 |
移动端的排版参数怎么定,相关的方法在 target="_blank"这篇里更细,值得对照着读。参数定对,这七个细节大半就自然达标了。