一个好的移动网页是怎么设计的?
Google 最近的研究表明,移动设备的用户更乐于再次访问适配了移动设备的网页。这意味着,你的网页在移动端也同样要做到界面友好。但究竟怎样才能使移动端网页有良好的用户体验呢?
实际上,有大量的重要细节需要你在制作移动网页的时候考虑。请看下图:
移动设备用户将会注意到你们这些增强用户体验的设计并会为此感到愉悦的。
如果你希望你的网页设计更好地适配移动设备,那么你必须解决网页在所有移动设备上的兼容性问题。以下是一些改进措施,你可以参照着来确保你的网页能适配移动设备,并给用户带来愉悦的体验。
1. 让你的整个网页设计都适合在移动端上浏览
相比在移动端上直接操作桌面版网页,经过适配的移动网页会大大方便用户的操作使用。举个例子,下图是手机端 Domino 披萨官网的两个版本,一个是桌面版网页,另一个是已适配手机端的网页。
桌面版网页手机的小屏幕里显得窄而小,并且很难操作。经过对比,手机版的网页主要由方便操作的大按钮组成,显得简洁。
如果你的网页适配了手机,你的网页在手机上将会更加地易用。以下是网页适配手机的 3 个小技巧。
只允许垂直滚动。不应该通过水平滑动页面来查看主要内容。你要确保你的网页使用了相对应的宽度与位置值,图片缩放后也能正常显示。你还要把网页的主目录放在显目位置并剔除那些会干扰用户操作的元素。
限制横栏按钮的数量——最好是仅有一列的页面布局。
不要将桌面版的网页与手机版的网页互混。因为这样的网页会比桌面版的更加难用。
2. 将主操作按钮设计得更友好
手机用户很容易忽视手机界面上的元素,所以主操作按钮要放在显要位置。手机页面的主操作按钮(Calls-To-Action Buttons)可能会跟桌面版的有所不同,所以你要从在用户的角度考虑,来决定你要把主操作按钮放在什么位置。
主操作按钮要容易点击,且在页面中不要被其他的元素干扰。拓展阅读:幽灵按钮精选案例
3. 菜单栏要简短而中肯
桌面版网页里有丰富的菜单栏可能会很方便用户使用,但手机用户不会有耐心滑动长长的选项栏,找他们想要的东西。
你需要考虑如何尽可能地减少菜单栏选项。例如,只留下主要产品的目录。根据「拇指原则」,尽量不要使用超过 7 条不同分类的条目。
简短且区分明显的目录更方便用户操作
还有,你的分类列表应该是符合你用户的需求的:
它应该是根据用户的使用频率与给用户带来的价值来排列。
它不应该使用晦涩难懂的措辞。菜单栏的设定需要具备商业素养,不然你会混淆菜单栏的类别。如使用文绉绉、比喻性的措辞可能会迷惑用户,致使更多用户离开。
拓展阅读:移动导航设计解析
4. 把搜索栏放在醒目的位置
如果搜索是你网页里的一个主要的功能,那么就把它放在网页的主要位置,因为这是让有明确目的的用户找到他们想要东西的最快途径。用户在查找特定消息时,通常会选择搜索。
所以,搜索栏应该是放在手机用户一下子就能看到的地方。你可以把你的网页搜索栏放置在接近主页顶部的位置,并附上搜索说明文字。
5. 设计好你的网页,不要让用户通过捏拉来缩放网页
通过捏拉网页来查看文本或照片时,常常会使用户感到心累。如果用户不得不通过捏拉来查看网页,很可能会错过一些重要的细节信息。因此,你设计的网页应该是不需要调整大小才能使用的。
下面的例子使用了合适的照片尺寸,但字体却不够大。在小而亮的屏幕中看这些小字体实在是会令用户头疼:
6、设计手指友好操作的图标
如果你在设计一个手指操作友好的界面,那么你网页按钮的大小是要按恰当的尺寸设计的。
据 MIT 触击实验室研究结果显示,人们手指指头的平均大小在 10~14mm 之间,指尖的大小在 8~10mm 之间,所以 10mm X 10mm 大小的图标是最佳的最小尺寸图标。
还有重要的一点是,你要考虑可点击元素间的相对距离。如果按钮间靠得太近,手机用户可能会不时按错按钮。
为了处理这些错误并防止用户误操作,你必须确保按钮有恰当的尺寸和空间位置,这样才更好地适合手机用户操作。下图是手机网页中,按钮间最佳的最小距离。
7、让用户探索完你的产品后,再让他们登入账户
如果在用户没有看到你的网页内容前,就要求他们登录或注册的话,会有非常高的交互成本,并且也违反了互惠原则。过早地要求用户注册,可以导致超过 85% 的用户流失。
用户在登入个人信息前,通常会先浏览w88的内容,看看这个w88是干什么的(用户对于陌生的w88更会如此)。为了给用户提供一个无障碍浏览的体验,移动网页应该这样设计:
8. 告诉用户最适合的屏幕方向
如果网页有适配手机横屏与竖屏的浏览,那么要提醒用户切换成最佳的屏幕方向。因为除非你提示用户要旋转屏幕(比如弹出一个会话框),不然他们只会照常浏览网页。
9、让用户在一个页面里操作
在手机上,切换不同的窗口浏览网页是很麻烦的事,用户也会有更大的机率返回不到之前的网页。所以,尽量让用户只待在一个页面里,避免弹出新的窗口。此外,也要确保主操作按钮都在同一个窗口中。
相关文章阅读: