您的位置：
如何让网页在手机上的浏览体验更好
发布者: moke |
手机用户越来越希望能够便捷有效地在移动网页端处理事情。无论是购买商品，查看商品价格或是添加内容到邮件列表，网页操作的用户体验要尽可能地无缝自然。这篇文章将会根据移动端网页的设计要素和特别的用户需求，来讨论如何设计移动端模板。一个好的移动网页是怎么设计的？Google 最近的研究表明，移动设备的用户更乐于再次访问适配了移动设备的网页。这意味着，你的网页在移动端也同样要做到界面友好。但究竟怎样才能使移动端网页有良好的用户体验呢？实际上，有大量的重要细节需要你在设计移动网页的时候考虑。请看下图：移动设备用户将会注意到你们这些增强用户体验的设计并会为此感到愉悦的。图片来源：business2community如果你希望你的网页更好地适配移动设备，那么你必须解决网页在所有移动设备上的兼容性问题。以下是 12 条改进措施，你可以参照着来确保你的网页能适配移动设备，并给用户带来愉悦的体验。1. 让整个网页都适合在移动端上浏览相比在移动端上直接操作桌面版网页，经过适配的移动网页会大大方便用户的操作使用。举个例子，下图是手机端 &Domino 披萨官网的两个版本，一个是桌面版网页，另一个是已适配手机端的网页。桌面版网页手机的小屏幕里显得窄而小，并且很难操作。经过对比，手机版的网页主要由方便操作的大按钮组成，显得简洁。如果你的网页适配了手机，你的网页在手机上将会更加地易用。以下是网页适配手机的 3 个小技巧。只允许垂直滚动。不应该通过水平滑动页面来查看主要内容。你要确保你的网页使用了相对应的宽度与位置值，图片缩放后也能正常显示。你还要把网页的主目录放在显目位置并剔除那些会干扰用户操作的元素。限制横栏按钮的数量——最好是仅有一列的页面布局。图片来源：Google不要将桌面版的网页与手机版的网页互混。因为这样的网页会比桌面版的更加难用。2. 将主操作按钮设计得更友好手机用户很容易忽视手机界面上的元素，所以主操作按钮要放在显要位置。手机页面的主操作按钮（Calls-To-Action Buttons）可能会跟桌面版的有所不同，所以你要从在用户的角度考虑，来决定你要把主操作按钮放在什么位置。主操作按钮要容易点击，且在页面中不要被其他的元素干扰。图片来源：constantcontact3. 菜单栏要简短而中肯桌面版网页里有丰富的菜单栏可能会很方便用户使用，但手机用户不会有耐心滑动长长的选项栏，找他们想要的东西。你需要考虑如何尽可能地减少菜单栏选项。例如，只留下主要产品的目录。根据「拇指原则」，尽量不要使用超过 7 条不同分类的条目。简短且区分明显的目录更方便用户操作还有，你的分类列表应该是符合你用户的需求的：它应该是根据用户的使用频率与给用户带来的价值来排列。它不应该使用晦涩难懂的措辞。菜单栏的设定需要具备商业素养，不然你会混淆菜单栏的类别。如使用文绉绉、比喻性的措辞可能会迷惑用户，致使更多用户离开。4. 把搜索栏放在醒目的位置如果搜索是你网页里的一个主要的功能，那么就把它放在网页的主要位置，因为这是让有明确目的的用户找到他们想要东西的最快途径。用户在查找特定消息时，通常会选择搜索。所以，搜索栏应该是放在手机用户一下子就能看到的地方。你可以把你的网页搜索栏放置在接近主页顶部的位置，并附上搜索说明文字。搜索栏要放在网页的显目位置（如屏幕顶部）就像 MACY 的网站5. 不要让用户通过捏拉来缩放网页通过捏拉网页来查看文本或照片时，常常会使用户感到心累。如果用户不得不通过捏拉来查看网页，很可能会错过一些重要的细节信息。因此，你设计的网页应该是不需要调整大小才能使用的。ASOS 使用了合适的照片尺寸，但字体却不够大。在小而亮的屏幕中看这些小字体实在是会令用户头疼：6. 只用高质量的网页素材由于没有实体商品，所以你的照片、视频跟其他内容就是你呈现给用户的商品。因此，它们必须是高质量的，这样才能在用户浏览网页时，吸引他们的眼球，使其点击网页查看更多信息。图片来源：Yoox7. 设计手指友好操作的图标如果你在设计一个手指操作友好的界面，那么你网页按钮的大小是要按恰当的尺寸设计的。据 MIT 触击实验室研究结果显示，人们手指指头的平均大小在 10~14mm 之间，指尖的大小在 8~10mm 之间，所以 10mm X 10mm 大小的图标是最佳的最小尺寸图标。图片来源：uxmag还有重要的一点是，你要考虑可点击元素间的相对距离。如果按钮间靠得太近，手机用户可能会不时按错按钮。为了处理这些错误并防止用户误操作，你必须确保按钮有恰当的尺寸和空间位置，这样才更好地适合手机用户操作。下图是手机网页中，按钮间最佳的最小距离。8. 让用户探索完你的产品后，再让他们登录账户如果在用户没有看到你的网页内容前，就要求他们登录或注册的话，会有非常高的交互成本，并且也违反了互惠原则。过早地要求用户注册，可以导致超过 85% 的用户流失。Netflix 提供了一个月的免费使用，但用户只有登录账户才能浏览网页内容。用户在登入个人信息前，通常会先浏览网站的内容，看看这个网站是干什么的（用户对于陌生的网站更会如此）。为了给用户提供一个无障碍浏览的体验，移动网页应该这样设计:不登录状态下，可浏览网页信息不登录状态下，可购买商品。当用户需要浏览更多的内容时，要求用户登录，不然只能看到有限的内容。想为提供更好的注册体验？在微信号 appsolution 后台回复「注册」可获取本文作者 Nick 和苹果年度十佳应用得主「方片收集」创始人的心得分享，以及知名协作沟通软件 Slack 的实例。9. 告诉用户最适合的屏幕方向如果网页有适配手机横屏与竖屏的浏览，那么要提醒用户切换成最佳的屏幕方向。因为除非你提示用户要旋转屏幕（比如弹出一个会话框），不然他们只会照常浏览网页。图片来源：Google10. 产品图片可放大顾客总会想看要购买的商品照片。在网上商城，顾客总是希望浏览高清特写图片来了解商品（尤其是衣服）细节，不然用户便会感到不快。用户要可通过双击图片或点击图片变焦按钮，轻松地放大商品照片来查看更多的细节。此外，图片放大的部分也应该是高分辨率的。既包含有商品的概览图，也能让顾客自由地放大照片来查看商品的细节。图片来源：thinkwithGoogle11. 在其他设备上能同步切换并不是所有的用户都喜欢用手机来购买商品，他们中有部分人仅仅是用手机来搜索产品信息。你得让用户能简便地在不同设备间保存或共享页面，这样才能收获更多的忠实用户。用户可以从智能手机转换到其他设备或浏览器来继续搜索、购买或预订商品。用户能够通过邮箱或社交媒介分享页面内容来征求购买意见。用户可以同步账户里愿望清单，收藏以及购物车里的内容。MR.PORTER 提供了一系列的分享选项12. 让用户在一个页面里操作在手机上，切换不同的窗口浏览网页是很麻烦的事，用户也会有更大的机率返回不到之前的网页。所以，尽量让用户只待在一个页面里，避免弹出新的窗口。此外，也要确保主操作按钮都在同一个窗口中。附赠提示：避免出现「完整网页」的标签当访客看见「完整网页」的选项时，他们会认为移动端网页是精简版的，转而会去切换成完整网页版。使用「桌面」代替「完整」可以减少这些认知偏差。让用户能够在不同版本网页间便捷切换，且把「完整版」替换成「桌面/电脑端」，以便清楚地表达两者都能带来完整的体验。总结就像其他的设计原理一样，以上详细的小技巧仅仅是一个开始。你要能融会贯通地使用这些技巧，来产出最好的产品。你要记住，设计不仅仅是为设计师本人设计，更是为用户设计的。你的设计要在不增加用户学习成本的前提下满足用户的需求。
魔客吧温馨提示：如果正在寻找登录界面模板，那么到魔客吧的
频道看看吧，这里有很多的登录界面模板哦！
本文地址：
文章标题：
最新分享资源
01020304050607电脑版安全中心网页
您的手机端可以绑定最多3个QQ号码。第一步：请选用准备绑定的QQ帐号登录QQ安全中心，进入QQ安全中(手机令牌)页面，点击【立即绑定】。再选择【继续绑定】。第二步：打开QQ安全中心(手机令牌)，在【菜单】栏中点击【查看序列号】根据网页提示完成step1和step2的操作，点击【绑定】。看到确认信息后，您的新QQ就绑定成功了。
很多玩家吐槽，每次上游戏或者登陆QQ都需要打开手机查看动态码，感觉好麻烦，于是乎就想qq安全中心会不会有电脑版，这样的话就能省去打开手机的时间，也能帮手机省省电量。但是小编要告诉大家的是， qq安全中心和盛大的G家游戏助手一样，都不支持电脑版应用，因为这款APP是直接绑定您的手机电话SIM卡的，所以换做电脑上app...
好友辅助的时候会把那个网页的地址链接发到好友的邮箱，打开好友邮箱点击链接进入输入回执编号就可以了。如果没有收到邮件也可以直接登录QQ安全中心进行辅助。好友辅助申诉地址：http://aq.qq.com/。注：目前最多可邀请7个好友辅助申诉。
在本经验页面底部打开“陌陌网页版登录”官方链接网址。在登录界面，输入陌陌号、邮箱或手机号，然后输入密码和验证码，最后点击“登录”按钮登录陌陌网页版。点击“我的帐号”可以查看您的帐号是否处于正常状态，您会看到这样的他提示：“你的账号当前状态正常，使用该账号可以在任何一台正常状态的设备的陌陌客户端上正常...
在新浪微博的管理中心进行查看，具体步骤如下：1、登陆微博 2、点击右上角的小人头按钮。如下图 3、点击管理中心按钮，如下图 4、根据需要查看相关的数据统计即可
QQ浏览器网页版怎么开启安全认证?QQ浏览器是一款浏览快速、稳定的浏览器，有着很牛叉兼容性。在日常使用用，有时候会浏览到一些不良网站。为了保证电脑和个人信息的安全，我们会开启一些保护措施。避免由于泄露信息而造成的影响，使用QQ浏览器的朋友可以开启安全认证开启方法，给你的浏览器增加一层防护墙。那么QQ浏览器...
1)电脑登录：QQ邮箱网页版需用QQ安全中心扫描二维码登录。2)手机登录：需下载最新版QQ邮箱手机客户端(支持Android、iOS)，并使用密保手机短信验证。验证过的手机将会保存下来，下次登录邮箱将无需验证。您可以在QQ安全中心的邮箱设备锁中删除已验证过的设备。温馨提醒：老版本QQ邮箱手机客户端将无法使用，请尽快升级到新...
2、然后需要你安装QQ安全中心V1.5版(目前仅支持安卓版，看来没个安卓机真木法混呀，再打开该应用选择“安全扫一扫”功能，扫描网页上出现的二维码图片。第一次使用的话，接着还需要你在手机上设置想要登录的QQ号码。3、扫描成功后，最后选择“确认登录”就一切OK了，网络通畅的话，当前网页会自动刷新，你刚刚在手机选择的...
手机客户端 打开手机唯品会，点击左上角的‘三’图标，然后就找到‘个人中心’啦。网页版唯品会 唯品会网页版上没有“个人中心”哦，网页版上点击自己的头像进入就是“个人中心”的内容啦。
QQ安全中心恢复好友怎么使用 1)首先打开【QQ安全中心】，接着点击【恢复好友】;(如下图)2)最后点击【立即恢复】即可。(如下图)药品服务许可证(京)-经营- 请使用者仔细阅读优酷、、、、和Copyright(C)2018 优酷 youku.com 版权所有不良信息举报电话:怎么在电脑上查看手机版网页怎么在电脑上查看手机版网页百度经验百家号有些时候电脑版网页功能有限，或者我们习惯看手机版网页，那么怎么办呢？下面小编教大家几招。直接百度“wap浏览器”即可，有些可以用有些不可以用，还需大家自行判断，这里提供一个可以用的供大家参考比如Geny.motion，靠.谱助手之类的Geny.motion安装就太麻烦了（需要安装Java开发工具SDK，以及虚拟机virtual.box），不过确实比较强大，想试的朋友可以试试。有些浏览器有预设，有些需要手动添加。改为Android或者iPhone或者BlackBerry（黑莓）都可以。网页空白处（不要在链接或者图片上）点击右键，选择“审查元素”，在“select model”中改为任意一种手机模式均可。这是修改后的画面，比较小，可以点击右侧的“+”放大，点击另一个红框处切换横屏竖屏。本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。百度经验百家号最近更新：简介:解决你所有的生活难题作者最新文章相关文章