我们在做移动端网站的时候，常常会听到一些说法，比如原型稿屏宽做320px，设计稿则按2倍来做，搞成640px。其实，这事儿有点历史遗留的痕迹。为什么要这样做呢？因为当我们设置了viewport的content为“width=device-width”，设备的独立像素（device-independent pixels）就等同于CSS像素了。简单来说，就是设计稿的分辨率和设备的实际屏幕尺寸保持一致，能够让页面展现更加精准。
不过，话说回来，移动设备五花八门，屏幕尺寸跟分辨率也挺复杂的，所以不能一概而论。这也是为什么设计稿要灵活处理，才能兼顾不同设备。比如iPhone的屏幕下，屏幕的dpr（Device Pixel Ratio，设备像素比）统一是整数，这给开发者省了不少麻烦，而安卓设备就相对多样化，得好好兼容。总之，设计稿尺寸不能太死板，得适当考虑主流机型的差异。
菜单简单明了
嗯，大家都懂，手机屏幕空间有限，菜单不能像PC网站那样复杂。搞太多层级或者大条菜单，用户往往会一脸懵，或者干脆懒得点。做成简洁且抓重点的菜单，给用户快速找到想要的内容，超加分！
设计短小精悍的表单
让用户填写的表单要尽可能短，贴心设计很重要。手机打字累，尽量少让用户敲键盘。比如登录页，减少输入字段，甚至支持一键登录，体验马上提升。
减少误点，文字要大点
手机的点触范围有限，链接别太挤，文字大小适中，用户点击才不会手滑。这样用户体验一好，跳出率自然下降。
做好移动端和PC端的无缝切换
SEO角度很重要：确保手机端和PC端都可以顺利跳转。网页要有明确的导航或提示链接，让用户说走就走，搜索引擎也能轻松抓取两端内容，蜘蛛爬起来超级嗨。
写好头部meta标签
哇，这点细节可是不能忽视！合理设置viewport，避免缩放异常。还有内容快速呈现，别让用户白白等待，谁都不爱等。页面反应够快，用户就愿意多留。
兼容主流设备
如前面提到的，安卓和iOS的屏幕和分辨率都不太一样，设计时得包容。举个例子，iPhone dpr大多是整数，比如2或者3，这给像素准确定义有帮助；安卓设备就五花八门，大家需要更灵活地布局，能做到各设备都美滋滋的展示，那才牛逼。
编码和技术细节考虑
移动端网站和PC端完全不一样，手机屏幕小，手指点触是关键，减小超链接数量，布局更友好才行。
总之，移动端网页设计和SEO的结合，靠的就是把用户体验做到极致，同时保证内容搜索引擎吃得下，才是真正的好网页。
移动端设计稿为什么要用2倍分辨率？
哈哈，这其实是个历史遗留的小习惯啦！用2倍分辨率主要是为了适应高分屏，保证画面清晰不模糊。换句话说，就是让设计稿更“精细”，在设备上看起来更“靓”。不过现在技术进步了，其实可以灵活调整，别死守2倍。设计稿尺寸只是个参考，关键是适配设备的实际屏幕尺寸和dpr。
怎么保证移动端和PC端网页无缝切换？
哦，这个挺重要的！你要在网页上放个明显的按钮或者链接，告诉用户“想看电脑版么？点这儿切换”，反过来也一样。这样既方便用户，又让搜索引擎蜘蛛能轻松识别页面关系。还有就是html代码中得分别做适配，手机蜘蛛访问时要默认给移动版内容，PC蜘蛛就给PC版。
为啥iPhone的屏幕dpr比较“规矩”？
嘿嘿，苹果就是这么贴心！他们设计的dpr基本是2和3这种整数，目的就是帮开发者省心。整数比率让矢量图、图片适配起来贼方便。相比之下，安卓设备就五花八门，乱七八糟的比例多，开发者得多操心了。
移动端网页设计中哪些细节最影响用户体验？
添加评论