移动端网页设计12原则：如何做到移动端网页操作的无缝自然？.doc

《移动端网页设计12原则：如何做到移动端网页操作的无缝自然？.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、移动端网页设计12原则：如何做到移动端网页操作的无缝自然？　　根据国际数据公司（IDC）报告，2016年度全球智能手机总出货已达14亿7060万台。随着用手机的人增多，让网页在手机上的浏览体验更好，成为产品人越来越重要的课题。　　　　手机用户越来越希望能够便捷有效地在移动网页端处理事情。无论是购买商品，查看商品价格或是添加内容到邮件列表，网页操作的用户体验要尽可能地无缝自然。　　这篇文章将会根据移动端网页的设计要素和特别的用户需求，来讨论如何设计移动端网页。　　一个好的移动网页是怎么设计的？　　Google最近的研究表明，移动设备的用户更乐于再次访问适配

2、了移动设备的网页。这意味着，你的网页在移动端也同样要做到界面友好。但究竟怎样才能使移动端网页有良好的用户体验呢？　　实际上，有大量的重要细节需要你在设计移动网页的时候考虑。请看下图：　　　　移动设备用户将会注意到你们这些增强用户体验的设计并会为此感到愉悦的。图片来源：business2community如果你希望你的网页更好地适配移动设备，那么你必须解决网页在所有移动设备上的兼容性问题。　　以下是12条改进措施，你可以参照着来确保你的网页能适配移动设备，并给用户带来愉悦的体验。　　1.让整个网页都适合在移动端上浏览　　相比在移动端上直接操作桌面版网页，经

3、过适配的移动网页会大大方便用户的操作使用。举个例子，下图是手机端Domino披萨官网的两个版本，一个是桌面版网页，另一个是已适配手机端的网页。　　桌面版网页手机的小屏幕里显得窄而小，并且很难操作。经过对比，手机版的网页主要由方便操作的大按钮组成，显得简洁。　　　　如果你的网页适配了手机，你的网页在手机上将会更加地易用。以下是网页适配手机的3个小技巧。　　只允许垂直滚动。不应该通过水平滑动页面来查看主要内容。你要确保你的网页使用了相对应的宽度与位置值，图片缩放后也能正常显示。你还要把网页的主目录放在显目位置并剔除那些会干扰用户操作的元素。　　限制横栏按钮的

4、数量——最好是仅有一列的页面布局。　　　　图片来源：Google　　不要将桌面版的网页与手机版的网页互混。因为这样的网页会比桌面版的更加难用。　　2.将主操作按钮设计得更友好　　手机用户很容易忽视手机界面上的元素，所以主操作按钮要放在显要位置。手机页面的主操作按钮（Calls-To-ActionButtons）可能会跟桌面版的有所不同，所以你要从在用户的角度考虑，来决定你要把主操作按钮放在什么位置。　　　　主操作按钮要容易点击，且在页面中不要被其他的元素干扰。图片来源：constantcontact　　3.菜单栏要简短而中肯　　桌面版网页里有丰富的菜单栏

5、可能会很方便用户使用，但手机用户不会有耐心滑动长长的选项栏，找他们想要的东西。　　你需要考虑如何尽可能地减少菜单栏选项。例如，只留下主要产品的目录。根据「拇指原则」，尽量不要使用超过7条不同分类的条目。　　　　简短且区分明显的目录更方便用户操作　　还有，你的分类列表应该是符合你用户的需求的：　　它应该是根据用户的使用频率与给用户带来的价值来排列。　　它不应该使用晦涩难懂的措辞。菜单栏的设定需要具备商业素养，不然你会混淆菜单栏的类别。如使用文绉绉、比喻性的措辞可能会迷惑用户，致使更多用户离开。　　4.把搜索栏放在醒目的位置　　如果搜索是你网页里的一个主要的

6、功能，那么就把它放在网页的主要位置，因为这是让有明确目的的用户找到他们想要东西的最快途径。用户在查找特定消息时，通常会选择搜索。　　所以，搜索栏应该是放在手机用户一下子就能看到的地方。你可以把你的网页搜索栏放置在接近主页顶部的位置，并附上搜索说明文字。　　　　搜索栏要放在网页的显目位置（如屏幕顶部）就像MACY的网站　　5.不要让用户通过捏拉来缩放网页　　通过捏拉网页来查看文本或照片时，常常会使用户感到心累。如果用户不得不通过捏拉来查看网页，很可能会错过一些重要的细节信息。因此，你设计的网页应该是不需要调整大小才能使用的。　　ASOS使用了合适的照片尺寸

7、，但字体却不够大。在小而亮的屏幕中看这些小字体实在是会令用户头疼：　　　　6.只用高质量的网页素材　　由于没有实体商品，所以你的照片、视频跟其他内容就是你呈现给用户的商品。因此，它们必须是高质量的，这样才能在用户浏览网页时，吸引他们的眼球，使其点击网页查看更多信息。　　　　图片来源：Yoox　　7.设计手指友好操作的图标　　如果你在设计一个手指操作友好的界面，那么你网页按钮的大小是要按恰当的尺寸设计的。　　据MIT触击实验室研究结果显示，人们手指指头的平均大小在10~14mm之间，指尖的大小在8~10mm之间，所以10mmX10mm大小的图标是最佳的最小

8、尺寸图标。　　　　图片来源：uxmag　　还有重要的一点是，你要考虑可点击元素间