手机刷网页也畅快，背后有这 12 个设计原则

手机刷网页也畅快，背后有这12个设计原则

前言:根据IDC的报告，2016年全球智能机总交付量已达14.706亿台。随着使用手机的人越来越多，让网页在手机上感觉更强，已经成为商品人越来越关键的研究课题。

本文由AppSo(微信号appsolution)分享，将告诉你移动网页设计的12个标准。

手机用户越来越期待在移动web端方便、快捷、合理地解决事情。无论是购买商品、查看商品价格，还是在邮件存档中添加内容，网页 *** 作的用户体验都要尽可能做到无缝拼接。

本文将根据手机网页的设计要素和用户的特殊需求来探讨如何设计手机网页。

一个好的挪动网页是怎么设计的？

谷歌最近的研究表明，移动终端的用户更善于再次浏览与移动终端兼容的网页。这意味着你的网页在手机上也应该是友好的。但是到底怎么才能让移动网页有一个好的用户体验呢？

其实有很多关键点是你在设计手机网页时必须时刻考虑的。可以看看下面这张图:

图片:商业2社区

移动终端用户可能会注意到这种改善用户体验的设计，并为此感到高兴。

如果你想让你的网页更兼容移动终端，那么你必须处理好网页在所有移动终端上的兼容性。这里有12条纠正措施，你可以参考，确保你的网页兼容移动终端，给用户愉悦的感觉。

1.给你的全部网页都合适在手机端上访问

与在手机上直接 *** 作pc网页相比，兼容的手机网页将极大地方便用户的 *** 作和应用。比如下图是达美乐披萨官网在移动端的两个版本号，一个是pc端的网页，一个是兼容手机顶部的网页。

pc网络电话上的小显示屏看起来又窄又小，很难 *** 作。相比之下，安卓版手机的网页由大按钮组成， *** 作方便，看起来比较简洁。

如果你的网页兼容手机，你的网页在手机上可能更实用。这里有3个关于网络兼容手机的提示。

只允许垂直翻转。不要按照级别拖动网页来查询具体内容。你需要确保你的网页应用了相应的总宽度和位置值，图像缩放后信息还能正常显示。还应该把网页的主目录放在显眼的地方，去掉会影响用户 *** 作的元素。

限制小蓝按钮的总数——最好是只有一列的页面布局。

图片出处：Google

没必要把pc上的网页和安卓版手机上的网页混在一起。因为这样的网页会比pc端的更难用。

2.将主 *** 作按钮设计得更友善

手机用户非常容易忽略手机页面上的元素，所以主 *** 作按钮要放在显著的位置。手机界面的行动号召按钮很可能与pc上的不同，所以你需要从用户的角度决定你需要把行动号召按钮放在哪里。(微信号appsolution后台管理回复“按钮”获取app按钮设计手册)

主按钮要容易点击，不一定要受网页中其他元素的影响。图像:持续接触

3.工具栏要简洁明了而合理

pc网页中有丰富多彩的工具栏，很可能是为了方便用户应用。但是，手机上的用户要有耐心拖动细长的选择项找到自己想要的物品，并不容易。

你需要考虑如何最小化工具栏选项。比如只剩下重点商品的档案目录。根据“拇指标准”，不需要尽可能应用7个以上的不同类别。

简洁明了的文件目录更方便用户 *** 作。

是的，您的分类目录应该满足您的用户的要求:

应该按照用户应用的频率和对用户产生的使用价值来排序。

它不应该使用难懂的术语。工具栏设置必须具有商业服务质量，否则会混淆工具栏的类型。例如，优雅的描述性术语的应用很可能欺骗用户，导致大量用户离开。

4.把搜索栏放到显眼的部位

如果检索是你的网页中的一个关键功能，那就把它放在网页的关键部分，因为对于有既定目的的用户来说，这是一种更快找到自己想要的物品的方式。当用户搜索特殊信息时，他们通常会选择搜索。

所以搜索栏应该是用户放到手机上就能立刻看到的区域。你可以把你的网页搜索栏放在靠近主页顶部的地方，并附上搜索指示文字。

搜索栏应该像梅西百货的网站一样放在网页的突出部分(比如显示屏的顶部)。

5.设计你要的网页，不必让用户根据捏拉到放缩网页

用户根据捏网页搜索文字或照片时，往往会感到身心疲惫。如果用户别无选择，只能按捏来查询网页，很可能会漏掉一些关键的信息内容。所以你设计的网页应该不用调整大小就可以应用。

Asos应用了合适的照片大小，但是字体样式不够大。在又小又亮的显示屏上看到这种小字体，真的让用户很头疼:

6.只应用高品质的网页素材图片

因为没有实体线产品，你的照片、视频等内容都是你展示给用户的产品。因此，它们必须是高质量的，这样当用户访问网页时，才能吸引他们的注意力，使他们点击网页查看信息内容。

图片:Yoox

7.设计手指头友善 *** 作的标志

如果你一直在设计一个手指友好的页面，你的网页按钮的大小应该根据适当的规格来设计。

根据麻省理工触摸实验室的科研数据，每个人手指的平均尺寸在10-14mm之间，指尖的尺寸在8-10mm之间，因此，10mmX10mm的标志是最好的最小规格标志。

图片出处：uxmag

另一个要点是，您需要考虑可点击元素之间的相对间距。如果按钮靠得太近，手机用户很可能会频繁按错按钮。

为了更好的解决这个问题，避免用户误 *** 作，你必须保证按键有合适的规格和室内空位置，这样才能更好的适合用户在手机上的 *** 作。下图是手机上网页面中按钮的最佳最小间距。

8.让用户探寻完你的商品后，再让她们登陆帐户

如果要求用户登录或者申请注册后才能看到你的网页内容，会有非常高的交互成本，也违背了互惠互利的标准。强制要求用户申请注册，可以造成85%以上的用户流出。

网飞展示了一个月的免费试用，但用户只能通过登录才能访问网络内容。

在登录私人信息之前，用户通常会先访问网站的内容，看看这个网站是做什么的(尤其是对于不熟悉的网站)。为了更好地向用户展示无障碍访问的感觉，移动网页应设计如下:

无需登录，即可访问网页的信息内容。

不用登录就可以购买商品。

当用户必须访问大量内容时，他们需要登录，否则只能看到有限的内容。

想表现出更强烈的申请注册的感觉？在微信号appsolution的后台管理回复“申请注册”中，可以获得文章作者Nick与今年iPhone十大应用获奖者“方膜集”创始人的经验分享，以及其著名合作通讯软件Slack的案例。

9.告知用户最合适的显示屏方位

如果网页具有兼容手机横屏和硬屏的access，那么应该提示用户切换到最佳显示方向。除非你提醒用户旋转屏幕(比如d出一个对话框)，否则他们会一直访问网页。

图片来源:谷歌

10.商品图片可变大

消费者会喜欢看到他们想买的产品的照片。在网上商城系统上，消费者一直期待着访问超清特写照片，以把握产品(尤其是衣服和裤子)的关键点，否则用户会感到不愉快。

用户可以通过双击鼠标照片或点击图片的对焦按钮点击关键点进行查看，轻松放大产品照片。除此之外，图片放大的部分也应该是高像素的。

包括产品概述，或者允许消费者随意放大照片查看产品重点。图片:thinkwithGoogle

11.在别的机器设备可以同歩转换

并不是所有的用户都喜欢用手机购买商品，只是有一部分用户只是用手机搜索商品信息。

你要允许用户在不同机器之间简单的存储或者共享资源网页，这样你才能获得大量的忠实用户。用户可以从智能机转换到其他机器或计算机浏览器，再次检索、购买或订购产品。

用户可以根据电子邮件或社交媒体分享网页的内容来征求购买建议。

用户可以查看他们的愿望清单、个人收藏以及购物车中的内容。

波特先生提出了一系列分享选择。

12.让用户在一个网页页面里 *** 作

在手机上，切换不同的对话框访问网页非常不方便，用户会有较大概率无法返回之前的网页。所以尽可能让用户只停留在一个网页，防止更新后的对话框d出。此外，确保主要 *** 作按钮都在同一个对话框中。

附提醒:防止“详情页”的logo

当页面浏览量看到“详情页”这个选项时，会觉得移动网页是流线型的，然后会转换成详情页版本。

用“桌面”代替“详细”可以减少这种认知偏差。用户可以方便快捷地在不同版本号的网页之间切换，将“整篇文章”改为“桌面/pc”，方便清晰地表达两者的详细感受。

小结

和其他基本的设计原则一样，上面的详细提示只是一个开始。你需要能够始终如一地应用这种方法来生产最好的产品。你需要记住，设计不仅仅是为了设计师本身，也是为了用户。

你的设计要在增加用户学习和培训成本的前提下，考虑用户的要求。

创作者|NickBabich，前端工程师，关心UI和UX。

文章授权翻译自:移动网站设计原理。

译员|谢敏欣

文章由让手机更强大的AppSo中文翻译出品，微信号appsolution。