互联网从业者一名。
&&&|&Powered by
由于HTML5和微信内置浏览器的火爆，移动端H5网页越发流行。在设计制作移动端网页的时候，你是否疑惑，这种网站设计稿应该做成的多少屏宽，是否应该跟手机的分辨率一致，还是应该按照iPhone的分辨率来设计（注意H5网页区别于APP，APP的设计稿直接按照手机分辨率来设计）？那么对于现在2K屏幕的手机，应该如何制作设计稿和前端稿呢？
由于文章篇幅原因，结论先行：
1、像素是没有宽高的（不要被Photoshop中的像素格欺骗），它只代表一个采样的色值。
2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何意义，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有ppi的意义，被打印出来才可以描述这张图片有多高多宽。
3、平时制作H5页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个尺寸一是为了浏览方便（现在很多手机的屏宽达到1440px，用这个尺寸去模拟显然不现实），二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽应该向下兼容。
4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时，按照现在流行的做法，可以直接使用原型稿上的尺寸，也就是设计稿上的1/2。
5、一般情况下，H5页面设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上（网上有些文章说安全线是960px处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。推荐前端攻城狮使用，这里的图片压缩还是相当好用，可以节省用户不少带宽。
-------------------------------------------------------------------分割线---------------------------------------------------------------------
作为本次文章系列的“上”部，将解决一些基本概念：像素（pixel）、ppi、分辨率、物理像素（physical pixel）、CSS像素、设备独立像素（deviceindependent pixel）等等。
像素（pixel）（）
为图像显示的基本单位，表示“图像元素”之意。每个这样的信息元素不是一个点或者一个方块，而是一个抽象的采样。仔细处理的话，一幅图像中的像素可以在任何尺度上看起来都不像分离的点或者方块；但是在很多情况下，它们采用点或者方块显示。
这一段是出自维基百科的解释。其实很多会Photoshop的人都有一个误区：认为像素是一个宽高相等的小方块，并且的像素都是“那么大”，但是不知道这个宽高的具体数字。
像素是一个抽象概念，它是一个相对单位。
像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。
先可以跳过这个话题，介绍ppi概念，像素没有大小就好理解了。
PPI的复杂之处在于如果他所属的上下文环境不同，意义也会完全不一样。&当我们在谈论显示设备的PPI时，它代指的屏幕的像素密度；当我们在谈论和图片相关时，我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况。
PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图1
中的七张图，假设图片尺寸都为1x1寸，那么 PPI 分别为 1、2、5、10、20、50、100 。在同一物理尺寸内，随着像素数的增大，图像细节越多， PPI 增大，图像越清晰，像素所占空间相对越小。
因此，从讨论像素大小的角度来说，图①中各个方框像素的宽度（单位为英寸）分别为：1、1/2、1/5、1/10、1/20、1/50、1/100。像素在每个不同ppi下大小都不同，因此讨论像素的大小也就变得无意义了。像素是没有大小的。像素是一个抽象概念，它是一个相对单位。
像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。
在photoshop中分别建立两个文档：①800x600px，72ppi，②800x600px，300ppi。那么这两个文档在PS或者生成图片时，显示的视觉效果是完全一样的，因为宽高的像素点数是完全一样的，在设备上渲染出来的效果图是一致的。当你把文档②中的任意图层复制到文档①中，从视觉上发现图层不会变大或者缩小。只有把这两个文档作为图片1:1打印出来时，才会发现72ppi的图片要大于300ppi的图片（注意ppi的含义），前者宽（高）大约是后者的4.16（300/72）倍。
任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，ppi对于图片来说时没有任何意义的，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有他的意义。
分辨率泛指显示系统对细节的分辨能力。能显示图像都能叫显示系统，比如显示器，投影仪，照片。
分辨率常用的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（像素每英寸）。从单位来看，分辨率是一个比值，与物理单位的比值。
日常所说的“这张图片的尺寸（或分辨率）是100x100像素”，一般都是在描述数字图片，这样的描述只是说明了图片文件包含多少个像素。比如图1中的七张图，我们习惯于说，第1张图的分辨率是1x1像素，第5张图的分辨率是20x20像素，其实只是说明了图片的像素数而已。
Retina显示屏
这是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。
最先使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。
对比如下两幅图，可以清晰地看出是否 Retina 屏的显示差异：&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图2& iPhone 3GS
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图3& iPhone 4
两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是一样的，从上图可以看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提高了，但它不同于普通的电脑显示器那样为了显示更多的内容，而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例，&工作时显卡渲染出的个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的分辨率显示屏相同，但精细度是原来的4倍。
注意：在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说，&Retina&显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。
设备独立像素
为什么是“每四个一组”？而且要让这四个一组来显示“原来屏幕的一个像素”？这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”，可以被称作“设备独立像素”， device independent pixel ，或者 density-independentpixel ，它可以是系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。
“设备独立像素”也有人称为“CSS像素”，一种形象的说法，更倾向于表明与 CSS 中尺寸的对应。
设备独立像素与物理像素的对应关系，可以这样看：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图4
类似的每四个一组的对应关系，也许正是 Retina 显示技术所做的。
作为Web开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。
CSS像素有什么特别的地方？我们可以借用中的这个例子：
假设我们用PC浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。
但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。
吊诡的是此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。
CSS像素与屏幕像素1：1同样大小时：
&&&&&&&&&&&&&&&&图5
CSS像素(黑色边框)开始被拉伸，此时1个CSS像素大于1个屏幕像素
&&&&&&&&&&&&&&&&图6
也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的情况，在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。
从上面的例子可以看出，CSS像素从来都只是一个相对值。
设备像素比（DevicePixelRatio）
设备像素比=设备物理像素/设备独立像素
设备像素比在 js 中可以通过 devicePixelRatio 的参数取得（需要页面的 viewport 设置为 content=”width=device-width”&此处为前端布局知识，较为专业，笔者也只是意会，无法说清楚，请自行百度）
iPhone 4 的设备像素比为2，线长（横向、纵向、对角线）上的物理像素数与设备独立像素数的对应关系即为2。
根据这个对应关系，一般可以通过屏幕的物理分辨率和设备像素比确定设备独立像素数。
那么在我们做移动端网站时，将viewport设置了content=”width=device-width”，设备独立像素也就等于CSS像素。
历史问题屏宽320px
经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。
这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。笔者从其他文章中找到了一些答案。（原型图屏宽是320px是为了满足原型软件在1：1比例显示上适当，二是为了保证早期iphone320px屏宽的显示需求）
“其实这个属性值很有意思，字面意应该是 viewport 宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于 Apple ，因为早期 iPhone 的分辨率为 320px*480px ，大量为 iPhone 量身定制的网站都设置了 viewport:width=device-width ，并且按照宽度 320px 来设计制作，所以其他浏览器加入 viewport 支持时为了兼容性也将 device-width 定义为了 320px 。”
那么到了后来的iPhone4的屏幕是960x640px，几乎所有人都知道Retina显示屏，所有方向上的像素都成了原来的2倍。而设备独立像素的屏宽还是保持着320px。其它智能手机早期的分辨率基本上也使用了大致相同的屏幕尺寸与分辨率，因此才有了 320px 这个不约而同的约定。
当然，如果把 viewport 的 width 属性设置为一个定值，比如 320、 480、 700 等等，那 viewport 的宽度即为设定的宽度。此时，设备独立像素宽度，也即所设定的宽度，而物理像素与设备独立像素的比值，则不再是最初始的设备像素比值了（比如 iPhone 4 中的2）。
现在的智能手机屏幕尺吋多样，分辨率有很多种，相应地，设备像素比也不一致，有1、1.5、2、2.25、3等等，而在一般情况下（指 viewport 设置为 width=device-width 时）的设备独立像素宽度，也不再只是 320px 了，还有 360px 、 400px等等。&这是从&统计的大部分手机独立像素数据。&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&表1
若设备像素比是N，就表示该手机屏幕上的N个物理像素来显示一个CSS像素。
本文对已移动端网站涉及到的一些概念进行了较为基础的解释，在下一篇中，会介绍H5网页在做设计稿以及前端布局时的最为省力的方法。
参考文章↓
热度 ( 81 )
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
转载了此文字
转载了此文字
很喜欢此文字
很喜欢此文字
转载了此文字
推荐了此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
很喜欢此文字
很喜欢此文字
转载了此文字
很喜欢此文字
推荐了此文字
转载了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
推荐了此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
推荐了此文字
转载了此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
转载了此文字
转载了此文字
很喜欢此文字
转载了此文字
很喜欢此文字
转载了此文字
很喜欢此文字您的位置：
在PC上常出现的下拉菜单，在移动端上都是用什么交互来实现的
发布者: moke |
“在PC上常出现的下拉，在移动端上都是用什么交互来实现的”，将最近项目里碰到的情况总结一下。1. 层级设计，以iOS为代表iOS系统日历目前最常见的一种做法，外露设置名称和默认设置项，将全部设置内容放在下一层。节约垂直空间，不干扰当前界面其他内容。可以很好兼容单选、多选等多种情况。作为一个完整的界面，可以容纳的内容比较多。但增加一个层级，就意味着有进入和返回两步操作。尤其是返回大多在界面左上角，随着手机屏幕越来越大，采用这种方式又没有手势右滑返回还是挺难用的。我一直觉得，将层级设计用的风生水起的就是微信。基本上一级的四个tab都是层级的世界。2. 弹窗设计，以Android为代表Google日历选择项作为临时弹窗出现在界面中，单选的话，点一下弹框自动消失，多选的话点击完成消失。弹窗是一个在移动端上容易受鄙视的交互，但实际使用下来，google把它做得挺美挺实用的。 当只有较少如个位数的设置项时，实际操作体验比层级式的好很多，会很同意“一个弹框能搞定的事实在不需要再新起一个层级”。但这个交互目前看很少人采 用，Android的设计语言规范比起iOS还是弱势了许多。但当内容一旦多起来，这个小弹框就会有点不堪重负，还会出现弹窗上需要再弹窗的尴尬局面。3. 下拉菜单Google日历叠叠乐就是类似PC的下拉菜单，这样少见的设计，被发现于刚刚说google那个弹框上又有弹框的情况下。但再一次实际使用效果没想象中差，如果忽略它叠叠乐的感觉，和在移动端点击菜单的弹出菜单差不多。但总的来说，还是一个奇怪的操作。4. 嵌入式自动伸缩（这个名字不好起）不记得在哪看到的，用这个图意思一下……选项在当前层级界面展现，把其他内容往下挤，完成选择后自动收起。也是一个避免了进入新层级的交互。iOS里的时间选择器经常会用这种方法出现。坏处是对当前界面影响较大，进出场界面大幅变动。同时嵌入式给人不稳定不安全的感觉，好像一不小心碰了别处这些选项就消失了。尤其是选项较多还需要上下滑动的情况。我觉得这种方式使用于选择项很少，且当前层级内容本身也简洁的情况。5. 选择内容平铺出来好处当然是所需操作最少，只需要勾选一个操作，坏处也很明显，太占地儿。一般情况下很少见，除非本身这些选项就是核心内容的情况，比如调研问卷。没有截图废话：这些看上去很常见普通的交互，碰到案例的时候有时一时竟然想不起来。所以最近为了提高交互技能点，打算总结一些常见的交互方法。
魔客吧温馨提示：如果正在寻找登录界面模板，那么到魔客吧的
频道看看吧，这里有很多的登录界面模板哦！
本文地址：
文章标题：
最新分享资源拒绝访问 | www. | 百度云加速
请打开cookies.
此网站 (www.) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3d33afc842ef4cd8-ua98).
重新安装浏览器，或使用别的浏览器移动端手机网站页面制作的25个设计要点-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 移动端手机网站页面制作的25个设计要点
移动端手机网站页面制作的25个设计要点
时间：&&&文章来源：马海祥博客&&&访问次数：
如今，随着智能手机的普及，手机正迅速的成为人们最常用的上网方式，所以，移动网站也成为广大站长和设计师的首先目标。近日，来自谷歌公司和AnswerLab的研究人员主持了一场长达119小时的用户测试会议，他们每天都会让用户访问100个不同的移动网站，这些网站涉及的行业范围非常广泛（比如：零售行业，保险行业，或是新闻行业）。参与测试的用户会把自己的使用感觉实时告诉研究人员。
对于这次的测试研究，谷歌公司的研究人员针对移动网站总结出了25个网页制作设计要点，在此，我也借助马海祥博客的平台跟大家分享一些，希望能对大家有所帮助。
1、&行为召唤&内容要靠前或居中
对于移动用户来说，往往很容易忘记菜单选项，因此，你应该把自己最关键的&行为召唤&内容放置在一个醒目的位置上，这样用户就能轻松看到。所以，你需要让最重要的&行为召唤&内容占据到网站的主体部分上，用户就能够快速完成相关任务，另外，如果要继续执行下一个任务，你可以利用菜单选项标明，也可以把下个任务紧跟在第一个任务完成之后。在移动端，你的&行为召唤&内容应该和桌面终端不一样，所以你必须要&对号入座&，因地制宜。
马海祥博客提示：把你最重要的&行为召唤&内容放置在网站最突出的位置上面。
2、让菜单看起来既简洁又亲切
一个范围较广的菜单可能非常适用于桌面网站，但是移动用户可能没有足够的耐心来回滑动自己的手机，他们不喜欢在查看一长串菜单选项之后才找到自己想要的东西。那么，你需要想想看，如何在最少的菜单里面放上自己最需要的功能选项呢？举个例子，有一家大型零售商店，他们在自己的移动网站上优化产品类别菜单，和桌面菜单完全不同，让移动终端的菜单选项为用户提供了一个更加简短，更加清晰的产品列表。
马海祥博客提示：一个简短的菜单，搭配上清晰的类别选项，可以让移动访问者更加清晰的进行站点导航，不知道从何下手的博友可查看一下马海祥博客的《》相关介绍。
3、要让用户便于回到主页
当移动用户在你的网站上面导航浏览时，他们会希望可以快速回到之前的主页上面。马海祥博客在研究中发现，用户往往喜欢点击页面上的公司Logo，因为他们觉得这种方式可以直接回到主页上去，所以你的网站必须也要支持这个功能，否则，如果用户点击了Logo，却毫无反应，他们肯定会觉得非常失望。
马海祥博客提示：把网站上的公司Logo优化成一个导航按键，当用户点击之后可以导航回到主页。
4、别让促销广告抢了你网站的风头
促销活动和广告会影响你的网站内容，也会影响用户在网站上的体验。谷歌的研究人员让用户访问一家公司的移动网站，上面有一个巨大的横幅广告，这些用户无一不被这个广告吸引，而无心注意广告下面的导航按键，而这个导航按键反而能够为用户提供更多关于该公司的内容信息。
马海祥博客提示：确保促销广告不会影响网页的导航功能（具体可查看马海祥博客的《》相关介绍），而且要把广告和&行为召唤&内容彻底区分开。
5、保持搜索功能可见
如果用户需要寻找一些特殊信息，那么他们就会使用网站的搜索功能，因此，搜索必须是移动网站上最重要的功能之一，一般而言，用户希望能够在网站页面的顶部使用文本搜索功能，因为页面顶部位置最容易让人发现。
马海祥博客提示：把网站的搜索功能放在主页的顶部，可以用一个文本框显示搜索功能。
6、确保网站搜索结果符合用户预期
实际上，用户似乎并不讨厌一页一页的翻阅搜索结果，但是他们更加看重网站返回的搜索结果是否符合他们的预期，因此，你至少需要确保自己搜索结果的第一个显示页面能够精准的满足用户搜索要求。在移动终端上面，因为屏幕非常小，所以你需要提供一些智能搜索功能，比如帮助用户自动拼写，或是修正用户的错误拼写，等等。
马海祥博客提示：确保你的网站搜索功能可以返回有效的结果，另外需要完善智能搜索，提供自动拼写或错误拼写纠正等功能。
7、使用过滤功能提升网站搜索易用性
用户会使用搜索过滤功能，这样可以缩小搜索范围，返回的搜索结果也更精准。不过，你需要确保用户使用过滤搜索之后，不会一无所获。网站应该让用户知道一个过滤搜索功能可能会返回多少搜索结果，这样可以帮助用户避免一些问题。
马海祥博客提示：为用户提供过滤搜索服务，但是要确保不会返回空结果。
8、指导用户去访问较好的网站搜索结果
对于一个网站而言，用户有各种各样的类型，所以，在用户进行搜索的时候，可以先询问几个相关问题，这样可以确保他们的搜索结果与预期一致。举个例子，一家大型鞋子零售商在其移动网站上面提供了搜索服务，但是搜索前会询问用户的性别，以及脚的尺寸等问题。
马海祥博客提示：如果你希望缩小搜索返回结果的范围，那么可以提前询问用户一些相关问题，这样确保用户能看到符合自己预期的搜索结果。
9、不要一上来就让用户在网站上注册
如果你的移动网站一上来就让用户注册，那么体验一定非常糟糕。马海祥博客的研究人员发现，最让用户难以接受的就是必须注册之后才能访问网站内容。实际上，用户希望在提交个人信息之前就可以先浏览一下网站内容，至少需要了解一下这个网站能够为自己提供些什么东西。
马海祥博客提示：不要强迫用户注册一个账号，允许任何访问者浏览你的网站
10、让用户能以访客的身份在你的网站上购物
即便用户想在你的零售网站上购买商品，但其实，他们仍然不希望注册一个账户。用户会觉得，如果能够以访客的身份购买商品，那么真的是非常方便，简单，而且快捷。人们不太喜欢在网站购物时强制注册一个账号，而且，许多网站并没有告知用户注册账号对他们来说有什么好处。
马海祥博客提示：你可以在移动网站上面提供一个选项，让用户能以访客的身份进行购物。另外，如果你需要用户在网站上注册一个账号，那么可以明确的告诉他们注册账号会有什么好处。
11、使用已有信息，最大程度为用户提供便利
对于那些网站注册用户而言，你需要记住他们的偏好。而对于新用户而言，你可以提供一个他们习惯使用的第三方支付服务。马海祥对一些零售网站进行了调研，他们发现许多网站都提供了第三方支付服务，避免了最后买单时的不便，另外移动网站还可以根据注册用户的已有信息，提供预填物流地址信息功能。
马海祥博客提示：要利用好你手中掌握的信息，尽可能使用第三方支付服务，尽可能为用户提供便利
12、对于复杂任务，使用&点击拨打电话&功能
如果用户需要进入一个较为复杂或是较为敏感的任务时，你需要提供一个&点击拨打电话&的服务功能。举个例子，有一家提供金融服务的公司，他们的移动网站上就提供了这项功能，如果用户不想在移动端填写复杂的表格，可以立刻用自己的移动手机拨打电话，由人工坐席受理业务。
马海祥博客提示：当用户需要提供复杂信息时，你可以在网站突出位置上提供一个&点击拨打电话&功能，这样可以避免客户从&漏斗&里掉下，造成客户流失。
13、当用户更换不同的移动设备时，确保能够便捷的完成交易
用户可能会在不同的移动设备上访问你的移动网站，因为你需要提供一个简单的方法，让他们在不同设备上分享信息。比如一家招聘网站，当用户完成应聘之后，他们会发生一封电子邮件，这样用户在其他设备上也能访问自己的网站，这个我曾在马海祥博客的《》一文中跟大家做过详细的介绍，有兴趣的朋友可以看下。
马海祥博客提示：移动用户很可能会更换不同的设备，因此你可以通过社交分享，电子邮件，或是&存入购物车&等方法，让用户能够继续自己在网站上的体验。
14、信息输入时做到流线作业
如果网站能够预先判断出一些信息，用户体验就会非常棒。比如预先判断出用户所在的邮政编码，或是出生日期等等。在输入一些信息时，如果能够做到自动输入，那么体验将会更加流畅。相比而言，如果网站要求用户在小表格框内反复输入一些信息，让他们在手机键盘上频繁切换数字/字母模式，体验就会非常糟糕。
马海祥博客提示：如果你的网站需要输入数字时，可以为用户提供一个专门的数字键盘，当用户点击输入框时，自动弹出这个数字键盘。
15、为每一个任务选择最简单的输入方法
如果用户需要在有限的选择项内做选择时，最简单的方式就是点击选择，而不是使用文本输入，或是在下拉框内选择。如果要在许多选项中选择一个项目，传统的下拉框是最直接的。无论什么任务，你需要选择最简单的输入方法。
马海祥博客提示：如果需要在移动网站的表格上进行输入操作，那么可以选择下拉框和切换功能，在任何时候都要确保操作便于点击。
16、在需要选择日期的时候，提供一个可视化日历
当用户在移动网站上预定航班时，很难确定&下周的某一天&是几月几号，所以你需要提供一个可视化日历供用户勾选日期。这样用户就不需要离开你的网站，然后在打开手机上的日历App应用了。在选择开始和结束日期时，可以提供一个清晰的标签，以免用户把日期搞混淆。
马海祥博客提示：当需要选择输入日期时，你需要提供一个可视化日历，而且要有一个清晰的日期结构，这样可以保证用户不会中断使用体验。
17、通过标签和实时确认，第一时间解决输入错误
在你的表格框内，要有提示标签功能，而且在用户实际输入时，可以看见必要且准确的提示信息。马海祥就遇到过这样一个例子，用户曾经在一个电子邮件地址栏里面输入了自己的家庭住址，因为当时这一栏内的提示信息并不明确，只有一个&地址&标签。把提示信息放在输入框内也会存在问题，因为当用户点击准备输入时，提示信息就会消失掉，因此需要利用标签做提示。另外，如果用户在输入过程中，需要做到实时确认，否则一旦出错，就会反复提交，引起用户反感。
马海祥博客提示：使用清晰可见的标签，让用户知道自己的需要，实时验证输入错误，在最后正式提交信息之前帮助用户纠正。
18、设计高效的表格
你要确保自己设计的表格不会出现重复操作，只提供必输信息即可，另外你还需要利用自动填写功能。当用户在填写表格的时候，最好在屏幕顶部显示一个进度条，这样人们就可以知道自己的进展。如果表格过于复杂则会让人反感，相对而言，一个简单直接的表格会让人觉得很舒服。如果能搭配上自动填写功能，比如预输入用户的姓名和邮政编码，效果则会更好。
马海祥博客提示：尽量减少表格中的数字输入，尽可能提供自动填写功能，使用一个清晰的进度条。
19、针对移动终端，整体优化你的网站
如果你有一个专门针对移动终端的网站，那么当用户使用移动设备访问时，肯定比纯桌面网站要简单的多，这点毋庸置疑。但是最难受的，就是把移动和桌面两个网站版本都混合在一起，用户访问起来比全桌面网站还要困难。
马海祥博客提示：如果你网站页面都是针对移动终端进行设计，那么使用起来会很便捷。
20、不要让用户用手捏放屏幕，去放大或缩小图片
如果用户需要用手捏放屏幕，去放大或缩小图片时，有时会看不到一些重要信息或相关的&行为召唤&内容，这会让用户感到很失望。在设计网站的时候，你就应该注意到这一点，不要让用户去改变网站尺寸。有些网站会把捏放屏幕功能取消掉，如果你的网站设计的非常合理，用户根本不会注意到没有这个功能。
马海祥博客提示：如果用户放大某个网站图片时，有时可能会看不到一些&行为召唤&内容。在设计网站的时候，就要注意这一点。
21、你的产品图像需要支持大图显示
顾客想要看看自己买的产品。在零售网站上，用户希望可以看到分辨率更高的产品图片，这样可以看到更多细节，如果网站不支持产品大图显示，肯定会让用户觉得非常失望，关于这点我曾在马海祥博客的《》一文中跟大家做过详细的介绍，有兴趣的朋友可以看下。
马海祥博客提示：对于产品照片这些关键图片而言，需要提供高质量的特写图片。
22、告知用户在哪种屏幕方向上访问网站最舒服
用户往往会在一个固定的屏幕方向上访问网站，除非有提示告诉他们切换屏幕方向(比如在观看视频的时候)。你可以设计网站的时候就考虑到垂直和水平两种屏幕方向的浏览方式，并鼓励用户切换到最佳屏幕方向上。但是无论如何切换屏幕方向，你必须要确保一些重要的&行为召唤&内容能够清晰的显示在网站上面。
马海祥博客提示：你可以和用户交流一下最佳屏幕方向，但是要确保重要的&行为召唤&内容保持在醒目位置上。
23、让用户保持在单独一个浏览器窗口里访问你的网站
在智能手机上频繁切换窗口是一件非常麻烦的事儿，而且用户还有可能找不到如何回到你的网站上去。所以，要让用户在单独一个窗口里浏览你的网站。特别要提到的是，不要在新窗口打开&行为召唤&内容。
马海祥博客提示：要确保&行为召唤&内容在单独一个浏览器窗口里显示。
24、避免&全网站&标签
用户一旦看到&全王权&这个选项，就会觉得是不是&移动网站&是被压缩的精简版网站，最终纷纷选择点击进入&全网站&。即便是桌面网站和移动网站的内容一致，也会给用户造成误解，因此，你完全可以用&桌面网站&标签，代替&全网站&。
马海祥博客提示：要给用户一个简单的网站切换体验，用&桌面网站&标签，代替&全网站&标签。
25、你必须要清楚自己为什么需要用户的地址信息
用户一般都希望了解，为什么你会向他们要地理位置信息。比如某用户在一家旅游网站上面订其他城市的酒店，但是他就感到很奇怪，因为这个网站会要求该用户提供目前所在的地理位置信息。所以，你需要把网站上地理位置这一栏默认为空，然后让用户自己选择，或是为用户提供一个清晰的&行为召唤&操作，比如&在我附近查找&，等等。
马海祥博客提示：你必须要清楚自己为什么需要用户的地址信息，要了解这些信息是如何影响用户体验的，再根据不同的要求来设计移动网站（不明白的朋友可通过马海祥博客的《》来下载Google官方的白皮书来研究一下）。
另外，针对上述这25个要点，要全部进行一一改进的话，可能会比较多，也比较麻烦，对此谷歌公司用户体验研究员Jenny Gove特意总结了最重要的四点建议，分别如下：
1、 添加一个醒目的搜索条
如果你的移动网站还没有一个搜索条，那么真的需要赶紧添加一个了。&在移动终端上，人们希望能够快速找到自己需要的东西，因此我们发现，人们对搜索条的需求很大，而且最好能够放在主页上面。&Gove解释说道。
马海祥博客点评：当然啦，作为由谷歌发起的研究项目，推荐在网站醒目位置安装搜索条似乎并不让人感到意外。但实际上，谷歌公司发现，用户其实并不介意使用搜索条，因为这样可以让他们快速找到自己需要的信息。
2、 把大表格拆分成小块
马海祥发现，许多网站都会要求用户提供各种各样的信息，比如地址信息(寄送商品时需要)，信用卡号(支付买单时需要)，等等。而在填写这些信息的时候，网站往往都会提供一个长长的表格页面，上面有各种输入框，非常复杂。所以，如果能把这些表格拆分成更小，更容易理解的小块，效果可能会更好。
马海祥博客点评：最好能够显示表格填写的步骤，而且最好在填写时可以实时验证输入内容的正确性，比如用户在输入自己的邮政编码时，可以实时校验。
3、 允许用户匿名浏览
有些购物网站会要求用户必须注册或登录才能进行购买操作。而有些网站更夸张，必须注册或登录后才能进行浏览。这两种方式都是大错特错。
马海祥博客点评：如果你准备创建一个零售网站，如果用户没有注册帐号，那么完全可以为他们提供一个访客的身份。没错，商家都希望用户可以注册登录，但是他们完全可以在买单之后才进行操作。
4、 要支持设备之间的便捷切换
因为人们都是随时随地使用移动终端，因此很有可能在使用过程中被某件事情打断，然后转移到笔记本电脑上面工作去了。
Gove认为，最悲催的体验就是，当用户切换设备之后，无法继续自己之前的使用体验，如果让用户复制粘贴自己访问的URL，简直是太麻烦了。
最好的解决方案就是，移动网站可以提供一个快捷按键，然后自动把当前的链接，或访问内容发送到用户自己的邮箱里面，然后不管之后用户在什么设备上面登录，都可以继续自己的使用体验。
马海祥博客点评：谷歌通过用户研究，清晰的定位了构建移动网站存在的问题，虽然问题不少，但好在这些问题都能够被识别出来，而如果这些问题可以被人们写下来，就意味着，人们也有能力解决这些问题。
本文为原创文章，如想转载，请注明原文网址摘自于/wyzz/553.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
网络实名制是个长期以来争议不断的话题。一方面，当人们面对越来越多的网上低俗与不良信息、黑客与木马、网……
清明节又叫踏青节，在仲春与暮春之交，也就是冬至后的第108天。是中国传统节日，也是最重要的祭祀节日之一……
最近百度跟360的搜索引擎之争，也使得更多人开始关注搜索引擎了，回想搜索引擎的快速发展也就是近15年发生……
相信做个seo的，或者自己已经是站长的，都或多或少的对自己负责……
最近一直听到圈里的朋友抱怨说，自己辛辛苦苦写的文章，发表的前……
由于此次整理的SEO作弊方法大全的内容比较多，也比较全面，导致……
很多做SEO的朋友都会问，是不是网站收录越多网站关键字排名越好……
作为一名专业的SEO人员，我们很多的时候都在研究站点中有多少页……
最近，我明显发现访问马海祥seo博客的博友越来越多了，随之而来……
本月热点文章}