首页>>建站知识>>建站问答

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

点击次数:8   发布时间:2022-02-24

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


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


在设计工作进行时,PC计算机端页面在设计软件中,已经可以进行实时预览的效果,基本上就可以对应其完成上线后的实时效果,


计算机上视觉浏览比例和软件上设计比例近乎1 : 1,没有什么差别


但手机端页面在计算机端的设计软件中,与真正在手机营幕中显示的会有很大差距,


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


所幸近年设计工具大幅进化,许多设计工具如Adobe XD与Figma都能正确的显示出手机端设计画面与计算机端设计画面,这样的问题近年已经减少许多。 

viewport.png

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


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


这是个难以解决的问题,因为手机的尺寸不可能因为新的技术而改变,网站设计如何与网站内容、网站功能妥协,取得平衡呢?


设计要点一:内容识别性


将需要表达的信息通过图文并茂的方式,向用户准确无误的传达,向用户传递信息才是核心。 


这也是很多设计师在做手机端页面的一个通病,仍然按照PC计算机端设计方式进行,忽略了在手机上实际的效果呈现,这样的作品会让设计工作大打折扣,事倍功半。


设计要点二:内容流畅度


很多人在做页面设计时,往往只关注局部而忽略整体,导致内容流畅度缺点,无法激起用户继续阅读的兴趣。这也直接或间接的影响了用户在页面上的停留时间,对于内容传播也起到了很大的阻碍,商业价值也会随之降低。


举例来说,曾经一度非常流行的滚动视差网站设计,虽然在PC计算机端上的效果非常的亮眼,但是来到手机上就会变得非常的不顺手,这不仅是鼠标与触控习惯的差异,也是计算机性能与手机的差异所造成的。


设计要点三:验证设计


我们一直鼓励网站设计师,不要只使用计算机的仿真工具,仿真手机端的使用情形,而是实际拿出你身边的手机,测试你所制作的网站与网站。尤其是Apple手机与Android手机有时些微的差异,就会造成用户浏览的问题。


一部分的问题出在于Html5的支持上,有时你预期图片应该会出现的渐层效果,计算机上有出现,在手机上却无法出现,或是原本应该隐藏的信息,在手机端上无故跳出,这些错误臭虫若没有经过实际验证,光靠模拟工具是抓不到的。


联系我们

公司: 深圳市迅当网络科技有限公司

联系人: 荣先生

QQ: 97532866

手机: 15919993369

公司地址: 深圳龙华观澜松元大布头路333号F栋

联系我们
  • 联系人: 荣先生
  • QQ: 97532866
  • 手机: 15919993369
  • 公司地址: 深圳龙华观澜松元大布头路333号F栋
Copyright © 2016-2021 https://www.xundang.com 深圳市迅当网络科技有限公司 版权所有粤ICP备16022386号
扫描二维码! 关闭
二维码