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

Asos 使用了合适的照片尺寸，但字体却不够大。在小而亮的屏幕中看这些小字体实在是会令用户头疼：

6. 只使用高质量的网页素材

由于没有实体商品，所以你的照片、视频跟其他内容就是你呈现给用户的商品。因此，它们必须是高质量的，这样才能在用户浏览网页时，吸引他们的眼球，使其点击网页查看更多信息。

图片来源：Yoox

7. 设计手指友好操作的图标

如果你在设计一个手指操作友好的界面，那么你网页按钮的大小是要按恰当的尺寸设计的。

据 MIT 触击实验室研究结果显示，人们手指指头的平均大小在 10~14mm 之间，指尖的大小在 8~10mm 之间，所以 10mm X 10mm 大小的图标是最佳的最小尺寸图标。

图片来源：uxmag

还有重要的一点是，你要考虑可点击元素间的相对距离。如果按钮间靠得太近，手机用户可能会不时按错按钮。

为了处理这些错误并防止用户误操作，你必须确保按钮有恰当的尺寸和空间位置，这样才更好地适合手机用户操作。下图是手机网页中，按钮间最佳的最小距离。

8. 让用户探索完你的产品后，再让他们登入账户

如果在用户没有看到你的网页内容前，就要求他们登录或注册的话，会有非常高的交互成本，并且也违反了互惠原则。过早地要求用户注册，可以导致超过 85% 的用户流失。

Netflix 提供了一个月的免费使用，但用户只有登录账户才能浏览网页内容。

用户在登入个人信息前，通常会先浏览网站的内容，看看这个网站是干什么的（用户对于陌生的网站更会如此）。为了给用户提供一个无障碍浏览的体验，移动网页应该这样设计:

• 不登录状态下，可浏览网页信息
• 不登录状态下，可购买商品。
•  当用户需要浏览更多的内容时，要求用户登录，不然只能看到有限的内容。

想为提供更好的注册体验？在微信号 appsolution 后台回复「注册」可获取本文作者 Nick 和苹果年度十佳应用得主「方片收集」创始人的心得分享，以及知名协作沟通软件 Slack 的实例。

9. 告诉用户最适合的屏幕方向

如果网页有适配手机横屏与竖屏的浏览，那么要提醒用户切换成最佳的屏幕方向。因为除非你提示用户要旋转屏幕（比如弹出一个会话框），不然他们只会照常浏览网页。

图片来源：Google

10. 产品图片可放大

顾客总会想看要购买的商品照片。在网上商城，顾客总是希望浏览高清特写图片来了解商品（尤其是衣服）细节，不然用户便会感到不快。

用户要可通过双击图片或点击图片变焦按钮，轻松地放大商品照片来查看更多的细节。此外，图片放大的部分也应该是高分辨率的。

既包含有商品的概览图，也能让顾客自由地放大照片来查看商品的细节。图片来源：thinkwithGoogle

11. 在其他设备上能同步切换

并不是所有的用户都喜欢用手机来购买商品，他们中有部分人仅仅是用手机来搜索产品信息。

你得让用户能简便地在不同设备间保存或共享页面，这样才能收获更多的忠实用户。用户可以从智能手机转换到其他设备或浏览器来继续搜索、购买或预订商品。

1. 用户能够通过邮箱或社交媒介分享页面内容来征求购买意见。
2. 用户可以同步账户里愿望清单，收藏以及购物车里的内容。

MR.PORTER 提供了一系列的分享选项

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

在手机上，切换不同的窗口浏览网页是很麻烦的事，用户也会有更大的机率返回不到之前的网页。所以，尽量让用户只待在一个页面里，避免弹出新的窗口。此外，也要确保主操作按钮都在同一个窗口中。

附赠提示：避免出现「完整网页」的标签

（编辑：温州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!