手机端网站设计与PC计算机端的差别与设计要点

今天我们分享一个很常见却很重要的问题：手机端网站设计与PC计算机端的差别，尤其在屏幕上，尺寸差了好几倍，设计师都知道这一件事情，但常常没有做好，以下就来分享造成这种现象的问题与解决之法。

差别一：视觉浏览比例不同

在设计工作进行时，PC计算机端页面在PS中实时浏览的视觉效果，基本上就可以对应其完成上线后的实时效果，

计算机上视觉浏览比例和上线比例近乎1 : 1

而手机端页面在PS里实时看到的效果与真正在APP中展示的会有很大差距

计算机上视觉浏览比例和手机比例1 : ？

如图所示，左边是以计算机端方式显示于手机上，文字几乎无法阅读，右边则是正确的手机端显示效果。

差别二：信息的传达更难掌握

正常人在操作手机的时候，眼睛与手机的距离大概会有20公分左右，再加上制作时的视觉感受与上线后，在视觉比例上也会有一定差距，所以这就导致手机端，如何将画面中的信息准确、清晰的传达给用户，变得更加难掌握。  

设计要点一：内容识别性

将需要表达的信息通过图文并茂的方式，向用户准确无误的传达，向用户传递信息才是核心。 这也是很多设计师在做手机端页面的一个通病，仍然按照PC计算机端设计方式进行，忽略了在手机上实际的效果呈现，这样的作品会让设计工作大打折扣，事倍功半。

设计要点二：内容流畅度：

很多人在做页面设计时，往往只关注局部而忽略整体，导致内容流畅度缺点，无法激起用户继续阅读的兴趣。这也直接或间接的影响了用户在页面上的停留时间，对于内容传播也起到了很大的阻碍，商业价值也会随之降低。举例来说，曾经一度非常流行的滚动视差网站设计，虽然在PC计算机端上的效果非常的亮眼，但是来到手机上就会变得非常的不顺手，这不仅是鼠标与触控习惯的差异，也是计算机性能与手机的差异所造成的。

设计要点三：验证设计

我们一直鼓励网站设计师，不要只使用计算机的仿真工具，仿真手机端的使用情形，而是实际拿出你身边的手机，测试你所制作的网站与网站。尤其是Apple手机与Android手机有时些微的差异，就会造成用户浏览的问题。一部分的问题出在于Html5的支持上，有时你预期图片应该会出现的渐层效果，计算机上有出现，在手机上却无法出现，或是原本应该隐藏的信息，在手机端上无故跳出，这些错误臭虫若没有经过实际验证，光靠模拟工具是抓不到的。