见过太多手机站，一眼就能看出是电脑版硬缩的：横向三栏挤成三细条，横幅banner上的文案小到要眯眼。问题出在设计思路上，电脑是横着看的，手机是竖着刷的，动线完全两回事。手机网站建设的竖屏视觉，不是把宽度改窄，而是把整条阅读路径重新铺一遍。
竖屏的阅读动线是一条直线
电脑屏幕上，人的视线走Z字形，从左上到右上再扫下来，所以电脑站可以左右分栏、内容交错。手机屏幕窄，视线基本是从上往下一条直线，这条直线上每一屏只能承载一个重点。落到设计上就是：单列布局为主，一屏说一件事，重要的东西放在直线的前段。两个内容并排的小卡片，看着省空间，实际上每个都被压得看不清，不如竖着各占一屏来得清爽。判断一屏有没有贪多，就看这屏能不能用一句话概括，概括不了就是超载了。宁可多排一屏，也别把两件事挤进一屏里。
竖屏排版的几个实操技巧
- 图片按竖构图裁切，横图裁成4比3以内，别用超宽横幅
- 标题控制在十二个字以内，长了换行就散
- 按钮做成通栏或大半通栏，宽按钮比小方按钮好点得多
- 相邻内容之间留够空隙，靠留白分区而不是靠线框
- 视频竖屏拍摄，横屏视频在手机上只占一小条
这些技巧没有一条费钱，全是意识问题。尤其图片这条，很多企业站的banner还是按1920宽的电脑稿切的，缩到手机上，字和图的比例全乱。竖屏时代的素材就该按竖屏出，设计稿从源头按750宽的竖版画，比事后调整省事得多。一句话总结，手机网站建设的竖屏视觉就是顺着拇指的方向摆内容，别让客户的手指迁就你的版式。
上线前自己单手滑一遍
验收竖屏体验有个最简单的办法：左手拿手机，拇指从屏幕底部往上滑，从头滑到尾。全程不用缩放、不用横屏、重点内容都在拇指自然经过的位置，就算合格。哪里想停顿了一下、哪里看不清、哪里差点点到旁边的东西，都记下来。这个动作一分钟能测完一个页面，比任何评审会都直观。测的时候把网络切到流量再滑一遍，图多的页面在弱网下最先露馅。设计师坐电脑前排的版，永远要拿真拇指来校准。
建议：给设计提需求时直接要求按竖屏出稿，别接受电脑稿缩放的交付方式；上线前自己按单手滑屏法把核心页面全测一遍，有看不过去的就让比格网络这类重视移动端视觉的团队按竖屏规范重调，这一轮调完，客户看着舒服，询盘才会顺手。
