选择手机版还是电脑版网页设计?一个好的手机版网页是怎麽设计的

智慧型手机的出现，让互联网用户对手机的依赖程度呈上升趋势。而事实上，早於几年前，PC端流量就已经开始出现断崖式下滑。时至今日，移动端流量已占互联网总流量的大头，亦因此手机版网页设计成为众多企业品牌设计中最重要的环节之一。

网页设计技巧

从We Are Social所提出的「Digital 2020 reports：Share Of Web Traffic By Device」中，我们可以看到手机装置流量占总体的53.3%;次之为PC装置占总体44%的流量;第三则是平板电脑占总体2.7%的流量。有趣的是，这三种装置中只有手机装置的流量是有增加，其余都是下降，这意味用户的浏览行为已逐渐往手机装置上移动。

一个好的手机版网页是怎麽设计的?

根据Google的研究表明：移动设备用户更乐於再次访问适配移动设备网页。即设计手机版网页时，需保持良好的用户体验。

具体怎样做?在实际操作中，我们需要考虑大量重要细节，才能让网页更好地适配移动设备，并为用户提供愉悦的操作体验，这包括：

手机版网页设计技巧 ①：保证网页适合在移动端上浏览

网页设计技巧

受手机荧屏尺寸影响，如果直接将PC端网站直接变为移动版，网站在手机的小荧屏里显得窄而小，并且大大影响用户的操作使用。

可见，相比在手机上直接操作PC版网站，经过适配的手机版网页将会更加易用。以下是网页适配手机设备的小技巧：

☑ 只允许垂直滚动，不应通过水平滑动页面查看主要内容;

☑ 确保网页使用相对应的宽度与位置值，图片缩放後仍能正常显示;

☑ 网页的主目录应放在显眼位置并剔除那些会干扰用户操作的元素;

☑ 限制横栏按钮数量，最好仅有一列的页面布局;

☑ 不要将PC版网页与手机版网页互混。

手机版网页设计技巧 ②：将主操作按钮设计得更友好

网页设计技巧

手机用户容易忽视手机界面上的元素，所以我们需要从用户的角度考虑，决定主操作按钮放在什麽位置，才能吸引用户的注意力。

手机版网页设计技巧 ③：菜单栏要简短扼要

网页设计技巧

手机荧屏小，加上大多手机用户并不会有耐心滑动长长的选项，选择想要的内容。

在设计菜单栏时，我们除了考虑尽可能将菜单栏选项做到简短且区分明显，以方便用户操作外，还应该根据用户使用频率及价值体验来排列，并避免使用晦涩难懂的措辞混淆用户。

手机版网页设计技巧 ④：将搜索栏放在醒目位置

网页设计技巧

如果搜索是手机网页的主要功能之一，那就要将它放在网页的主要位置，让有明显目的的用户一下子看到并最快速度找到想要的内容。

我们可以尝试将网页搜索栏放置在接近主页顶部位置，并附加搜索说明文字。

手机版网页设计技巧 ⑤：避免用户通过推拉来缩放网页

网页设计技巧

让网页需要通过推拉才能查看文件或照片，不仅会让用户感到心累，还有可能让他们错过一些重要的细节信息。

因此，手机版网页设计必须确保页面不需要调整大小也能正常使用。

手机版网页设计技巧 ⑥：使用高质量网页素材

网页设计技巧

由於用户没法透过手机看到商品的真实情况，因此有关商品的照片、视频和其他内容必须高质量，才能在用户浏览网页时吸引他们的眼球，并使其点击页面获得更多转换。

手机版网页设计技巧 ⑦：设计对手指友好的图标

网页设计技巧

根据MIT触击实验时结果显示，人类手指指头的平均大小在10-14mm之间，指尖大小在8-10mm之间，所以手机版网页的图标控制在10mm×10mm左右最佳。另外，还要考虑可点击元素间的相对距离，放置用户误操作。

手机版网页设计技巧 ⑧：让用户浏览完网页再登录账户

网页设计技巧

过早要求用户注册或登录，将导致超过85%的用户流失。

通常用户在登入个人信息前，都会先浏览网站内容再决定。为给用户提供一个无障碍浏览的体验，手机版网页可尝试这样设计：

☑ 不登录状态下，可浏览网页信息;

☑ 不登录状态下，可购买商品;

☑ 当用户需要浏览更多内容时，需登入个人信息，否则只能看到有限内容。

手机版网页设计技巧 ⑨：告诉用户最适合的屏幕方向

网页设计技巧

如果网页既可横屏浏览，又可竖屏浏览，建议提醒用户切换成最佳的荧屏方向，否则他们会按照习惯浏览网页，导致观感大受影响。

手机版网页设计技巧 ⑩：产品图片可放大

网页设计技巧

用户在购买产品前，总是希望能通过浏览高清图片来了解商品的细节。

因此，我们除了提供相关功能让用户轻松放大图片查看更多细节外，还要保证图片放大後能保持高分辨率，不然用户可能会感到不快。

手机版网页设计技巧 ⑪：确保网页能在其他设备上同步切换

网页设计技巧

并不是所有用户都喜欢用手机购买商品，他们亦有可能只是用手机搜索产品信息，再转用电脑购买。

让用户能轻松地在不同设备间保存或共享页面，并确保他们能从智能手机转换到其他设备或浏览器时能继续浏览、搜索，甚至购买，有机会收获更多忠实用户。

既然手机版网页那麽流行，是不是可以放弃电脑版网站设计?

虽然近年使用手机浏览网页的用户越来越多，但回到开头内容，我们可以看到，仍然有44%的用户使用电脑进行互联网操作。简单来说，企业同时兼顾手机版和电脑版网站，除了能凸显品牌专业度，也能够尽可能扩大你的客户漏斗入口。

但要同时开放两个版本网站，不仅要浪费更多人力、物力以及时间的成本，而且对SEO优化也并不友好。那麽，有什麽方案可以解决这个问题呢?

响应式网页设计，是解决网站兼容问题的最佳解决方案

随着互联网技术的发展，用户不仅可以使用手机、平板以及电脑上网，甚至是电视、投影仪等智慧型家电同样可满足用户上网需求。这意味着，在未来，上网装置将会越来越多元化，网站设计的尺寸和画面版本将会更新得愈来愈频繁。然而，企业并不太可能会将更多资源投放到开发和维护各种版本网站。

因此，响应式网页设计便是最适合的解决方案。

什麽是响应式网页设计?响应式网页设计(Responsive Web Design，RWD)，指透过响应式网页设计技术能使网站兼容不同型号的终端设备，能因应用户正在浏览的荧屏大小自动改变为合适的尺寸，以给用户提供轻松流畅的浏览体验。

如果你想减低网站开发和维护成本，同时又希望网站能兼容电脑、手机、平板等终端设备。欢迎直接联系我们，我们将为你打造一个服务完整且适应性高的品牌网站，这样你就不用再考虑到底将网站开发重心放在电脑版网页还是手机版网页;更不需要因为手机浏览成为主流趋势，而大费周章建立一个手机版网页。