今天分享一个很常见却很重要的问题:手机版的网页设计和PC电脑的区别，尤其是在屏幕上，在尺寸上差了好几倍。设计师都知道这个东西，但往往做不好。下面分享一下造成这种现象的问题和解决方法。
区别一:视觉浏览比例不同
在设计工作进行的时候，PC端页面已经可以有设计软件中实时预览的效果，基本对应的是在线完成后的实时效果。
电脑上的视觉浏览比例和软件上的设计比例没有区别。
但是电脑端的设计软件里手机端的页面和手机屏幕上实际显示的会有很大差距。
如图，左边是电脑模式下在手机上显示，文字几乎不可读，右边是手机的正确显示效果。
(图片来源：Google Developer)
(来源:谷歌开发者)
好在这几年设计工具有了很大的发展，很多设计工具，比如Adobe XD，Figma，都可以正确显示手机设计图像和电脑设计图像。这几年这样的问题减少了很多。[div][div]
区别二:更难掌握信息的传递
正常人在操作手机时，眼睛与手机的距离会在20cm左右。此外，制作时的视觉感受和线上的视觉感受在视觉比例上会有一定的差距，因此在手机上如何准确清晰地将屏幕中的信息传达给用户变得更加难以把握。[div]
[/div]
这是一个很难解决的问题，因为手机的尺寸不能因为新技术而改变。网页设计如何与网站内容和网站功能妥协达到平衡？
[div][div]
设计点1:内容识别
把需要准确表达的信息用插图、图片的方式传达给用户，把信息传达给用户，是核心。[div][div]
这也是很多在手机上做页面的设计师的通病。他们还是沿用PC的设计方法，忽略了在手机上的实际效果。这样的作品会大大减少设计工作量，事半功倍。
设计点2:内容流畅性
很多人在设计页面时，往往只关注局部而忽略整体，导致内容流畅性的缺点，无法引起用户继续阅读的兴趣。这也直接或间接地影响了用户在页面的停留时间，也阻碍了内容的传播，商业价值也会降低。
比如曾经非常流行的滚动视差网页设计，虽然在PC上效果很亮，但是到了手机上就会变得非常不方便。这不仅是鼠标和触摸习惯的区别，也是电脑性能和手机的区别。
设计点3:验证设计
我们一直鼓励网页设计师不仅要用电脑模拟工具来模拟手机的使用情况，还要真的拿出你的手机来测试你的网站和网页。特别是有时候苹果手机和安卓手机的细微差别会造成用户的浏览问题。
部分问题在于对Html5的支持。有时候，你期待本该出现在电脑上，却没有出现在手机上的图片的渐变效果，或者本该隐藏的信息无缘无故在手机上跳出来。没有实际的验证，这些bug bugs光靠模拟工具是抓不到的。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/86651.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
