百度移动互联最佳建站实践
显而易见，是否有适合移动端展现的网站，将成为企业在移动互联网蓝海营销有所斩获的第一个基础要件。虽然桌面版网站能在手机上浏览，但并不表示该网站非常适合使用移动设备进行浏览。移动网站专为移动设备的小型屏幕而设计，旨在满足移动用户的需求，吸引更多客户并获得更多转化。因此，拥有一个移动站是你进入移动互联时代的首选！
而移动站和PC站存在诸多的不同，应该如何创建一个体验好、转化高的移动页面呢？
产品所具有的功能需用来支持用户特定的需求，满足用户的需求，以用户为中心设计是最基本的原则。移动站也一样，需要反映用户的心理，与用户的操作经验一致，让他在使用时能够方便的找到需要的功能。
一致性
● 视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视觉上应该保持一致；否则，界面外观要予以区分。
● 按钮和图标的外表，同样包括他们的位置和使用的颜色。
● 一致的页面布局和颜色。
简洁易辨识
● 让控制变得是可以理解的，避免在标志，banners, 和but tons之间的混淆● 减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息● 简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆● 操作简单：减少冗余的操作步骤● 减少描述性语言，省略多余的文字。例：欢迎词和指示说明可以去掉● 让有用的内容更加突出● 让页面更简短
让网站容易“被扫描”
● 内容的可读性能够提高用户的忠诚度，让用户停留在站点上获得他们需要的内容。但是研究表明，很多用户并不是在读页面，而是在“扫描”，通过扫描标题、着重文字、强调的列表来获得信息。
减轻用户记忆负担
● 认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要及时准确；● 系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索取信息；● 合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法，为用户的任务提供直观易用的界面；● 有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说明自身可以如何使用的外观属性）。
能辨度原则
● 定义：文本视觉上的清晰度，通常依赖于所用字符的大小、字体、对比度、文本块和间距。
● 对比度：在浅色背景中使用黑色字体，或在黑色背景中使用浅色字体。文字和背景的对比度超过70%时，效果最佳。只要注意最低对比度，前景与背景颜色的结合通常不影响能辨度。图案背景和纹理背景会大幅度降低能辨度，因此应避免使用。
● 间距：合适的行间距可增强阅读的舒适性。
对齐原则
● 定义：组成部分的边缘沿着共同的列、栏排列，正文沿着共同的中心排列。
● 设计中的组成部分应该同一个或者更多的其他组成部分成一直线排列。对齐排列产生整齐划一、互相衔接的感觉，对齐还是引导人们完成设计的有效方法。
● 对齐方式：左对齐、右对齐、中间对齐。
临近原则
● 定义：通常认为紧挨一起的元素比远隔的元素关系更紧密。
● 在设计中体现相关性时，邻近是最有效的一种手段之一。邻近的优势通常要胜过与之匹敌的视觉提示（如相似）。
信噪比原则
● 定义：显示中相关信息与无关信息的比率。在设计中都想得到可能的最高的信-噪比。
● 所有的交流都涉及信息的形成、传送以及接收。在这一过程中的每一阶段，信息的形态-信号-被减弱，而无关的信息-噪音-得到添加。信息形态的转变会使信号减弱，从而减少了信息量。由于无用的信息削弱了有用的信息，噪音减少了信息的清晰度。好设计的目的是使信号最大化，而噪音最小化，从而产生一个高的信-噪比。
● 将信号最大化： 指更清晰的交流信息，尽可能不是信息减弱。如果没有有效地提供信息，如字迹不清楚，图形不合时宜，或者图标和标签模糊，则信号就会减弱。而提供的见解的信息就会提高信号的清晰度。简单的设计会带来最小的性能负载，会使人们更加集中注意力去理解信息所表达的意义。
● 将噪音最小化：指去除不必要的信息，而且使必要信息的表达言简意赅。每一条不必要的数据项、图形、线条或者符号都会转移人们对相关信息的注意力，认识到这一点非常重要。这类不必要的信息应该避免，抑或加以清除。必要信息的表达应尽可能最小化，但以不损害其作用为限。
● 在设计中要力求使信噪比达到最大。保持简洁的设计和仔细的选择设计策略可以增强信号。
渐次呈现原则
● 定义：一种处理复杂信息的策略。在特定的时间，只呈现必要的或需要的信息。
● 渐次呈现涉及到把信息分成许多层次，只呈现必要的或相关的信息。这主要是用来防止信息超载，运用于计算机用户界面、指南类材料和有形的空间的设计上。
● 渐次呈现可保持显示清爽而不拥挤，不会混淆、阻挠和误导用户处理复杂信息。比如：软件界面不太常用的控制器经常隐藏在对话框里，通过点击“更多”按钮来激活。
● 使用渐次呈现可以大大提高学习效率。
图标原则
● 定义：使用形象化图片提高对符号和控制装置的识别。
● 相似图标：是使用在视觉上与动作、物件或概念相似的图案。
● 体例图标：是使用作为例证的图像或使用通常能与动作、物件或概念产生联想的事物的图案。
● 象征图标：是使用比较抽象层次的动作、物体或概念的图案。
● 任意图标：是使用与动作、物体或概念很少或没有关系的图案。
模块原则
● 定义：一种把许多单元的信息组合成数量有限的单元或块、方便信息的处理和记忆的技巧。
● “块”这个术语指短期记忆中的一个单元的信息——一串字母、一个单词或者一组数字。组块之一技巧通过把信息编成几个小单元寻求解决短期记忆限制。短期记忆能够有效处理的“块”的最大数量是四加一或减一。
二、移动网站页面设计
PC屏幕和手机屏幕尺寸存在较大差别，交互方式也从鼠标控制变成了触屏操作，从而导致使用习惯存在诸多差异。常用的PC页面设计方案并不适用于手机屏幕。那么，设计手机页面时需注意哪些事项？常见的手机页面布局和模块又是怎样的呢？
一个标准的移动站应该包含首页、列表页和详情页三种类型，以满足企业的推广需求和用户的认知需要。页面类型及层级建议不超过3个，保证简单、高效的用户体验。
首页——根据你的推广需求选择首页类型
● 首页作为用户分流前到达的页面，要求能够汇集整个网站的大部分模块和功能，以保证不同需求的用户在着陆后都能找寻到自己想要的信息。
● 一般首页又可以分为“导航式”和“内容式”：“导航式”因其风格简洁，一般又可用作品牌宣传，起到快速传达品牌形象的作用；“内容式”因其丰富的内容，常用来快速传达广告主所想表达的信息。
列表页——用产品 / 服务构建你的列表页
● 列表页一般用于展现结构简单，并且重复度较高的内容，最常见于商家的产品/服务，形式也一般相对简单，用于满足展现多产品/服务的需求，根据商家产品/服务信息不同一般分为纯文字和图文两种最基本形式。
详情页——设置详情页让用户了解更多信息
● 详情页一般用作展示首页和列表页未显示完全的信息，以便满足用户了解详情的需求。
移动页面是由不同模块组成的，不同模块展现形式、功能作用在整个移动站中是有所不同的。
幻灯片/焦点图
● 利用多张焦点图组成的幻灯片，多用来展现能够体现品牌的信息，同时因图片有较强的注意吸引能力，一般出现在首屏，能取得较好的用户关注。
纯文字模块
● 纯文字模块一般用于呈现不能用图片或者其他多媒体信息展现的内容，并会根据显示信息内容设定不同的格式。
图文模块
● 图文模块用于展现可以用图片和文字两种形式内容的模块。
子链接
● 子链接模块是依附于纯文字/图文模块的辅助功能，用于告知用户点击之后的展现信息，提升模块整体的点击率。
页面导航
● 页面导航主要功能在于帮助用户更快到达目标页面，避免过于繁琐的点击行为，可以有效降低用户离开率，提升转化。
导航条
● 当一个页面上有多种不同类型信息的时候，需要通过导航条区分标识进行间隔。
工具栏
● 考虑到移动设备的特性，需要在页面上面设置转化的入口，工具条很好地解决了该问题，同时固定位置悬浮特性也很好地起到了提醒的作用。
优秀的交互方式能很有效地提升用户体验，一方面能够简化操作流程提升操作效率，另外对于产品功能易用性的提升也是较大的。
滑动切换图片
● 相比于自动切换和点击切换，滑动切换增强了用户操作的主动性、同时提升了切换的便捷性。
滑动切换页面
● 用户可以通过滑动进行页面之间的切换，节省用户寻址时间。
点击放大图片
● 点击缩略图放大图片，减少了操作流程，一定程度上减少了因页面跳转带来的用户流失。
页面区域点击
● 区域点击能较大提升用户点击的效率，减少用户因定位点击区域造成的效率损失。
点击加载更多
● 点击加载更多一方面减少单张页面的非必要信息，让页面变得简洁，同时能减少页面间的跳转，降低因网速等原因造成的用户流失。
着陆页内容用于向用户传递信息，达到宣传和引导的目的。清晰明了、重点突出的页面内容能吸引用户眼球、激起用户兴趣，起到更好的转化效果。在着陆页上，用户最关心哪些内容？如何传递最关键的信息呢？
一致性
●着陆页内容与关键字、广告文字的相关性，不仅保证广告与目标页面呼应和一致，更重要的能够提升潜在客户在着陆页上面的点击次数，减少客户流失。
可信度
●通过告知潜在客户公司名称、联系地址、客服电话等信息，能够有效地提升网站（公司）的可信度。
重要信息首屏显示
●具体产品信息尽量出现在网页的第1~2屏，避免与用户玩寻宝游戏。
不同行业有自己所特有的信息，消费者对于这些信息有不同的理解和认知，会进而影响到消费者决策（比如点击、拨打电话等），因此设置行业信息类别和优先级尤为重要。
医疗、教育等服务类行业
机构的基础信息
● 机构信息
● 机构环境
● 机构硬件条件
机构的服务相关信息
1.机构提供的服务
● 服务基本信息：名称、图片和价格等等
● 服务详细信息：目标人群、方案/技术等
● 成功案例信息：成功案例信息
● 用户评论信息：用户评论信息
● 用户常见问题：Q/A
2.机构提供的活动（打折、优惠等等）
机构的认证等优势信息
1.机构专家团队
● 专家基本信息：姓名、图片、职务等
● 专家详细信息：专家资质、专业领域等
2.机构资质等级
3.机构获得的荣誉
4.机构获得的认证
页面上可以促进咨询的设置
电话功能，短信功能，在线沟通，地图功能等。
机械、服装鞋帽等产品型行业
机构的基础信息
● 机构LOGO
● 机构名称
● 机构介绍
机构可提供的产品的相关信息
1.机构提供的产品
● 产品基本信息：名称、图片和价格等等
● 产品功能信息：参数、特征，功能等
● 产品优势信息：认证、荣誉等
● 产品其他信息：售后、配送、评论、问答等2.机构提供的活动（打折、优惠等等）机构的认证等优势信息1.技术实力/创新技术
● 相关的图片
● 相关的描述/说明
2.机构获得的荣誉、认证等
● 相关的图片
● 相关的说明/描述
页面上可以促进咨询的设置
电话功能，短信功能，在线沟通，地图功能等。
旅游票务等预订类行业
机构的基础信息
● 机构LOGO
● 机构名称
● 机构介绍
可提供的产品的相关信息
1.机构提供的服务（旅游）● 服务基本信息：路线名称、路线图片和路线价格等
● 服务其他信息：出发地点、行程安排、费用说明等
2.机构提供的服务（票务）
● 服务基本信息：票务名称、票务图片和票务价格等
● 服务其他信息：演出地点、演出时间、演出内容等机构的认证等优势信息
● 机构获得的荣誉、认证等● 相关的图片
● 相关的说明/描述页面上可以促进咨询的设置
电话功能，短信功能，在线沟通，地图功能等。
三、移动网站功能组件
移动站的功能，除了要满足企业的信息展示、用户注册、订单转化、咨询沟通等等需求，还要从用户使用习惯上去考虑用户转化的便捷性。增加商务组件，能够帮助您实现转化，增加统计监控工具，则能更好的为你监控数据。
手机上最直接的转化手段。在网页上设置电话或短信按钮，用户点击后会直接进行电话拨打和短信发送。相对于PC页面，降低了用户的操作成本，缩减了转化流程，会明显提升转化率。
除了电话和短信，在线咨询和留言板也是用户普遍使用的沟通手段。特别在医疗行业，用户希望通过更加隐秘的方式进行沟通，在线咨询是首选。客服人员可以使用在线咨询与用户直接沟通，获取订单；当客服不在线时，用户可以使用留言板提交问题和联系方式。
对于大多数希望引导客户到店消费的广告主，在页面上展示地图和优惠券是一个不错的选择。地理信息包括：地址、地图、交通方式等。优惠券则可将促销信息告知客户，促进消费。
在页面上添加一键分享到SNS的功能，可借助客户的推荐传播您的产品和品牌，实现SNS营销、口碑营销的效果。
四、移动网站页面性能优化
考虑到移动设备和移动互联网的特点，在进行移动网站的页面开发设计时，一个总的原则是考虑用户访问的效率，降低页面加载时间。
减少访问请求数
1、从设计实现层面简化页面，不要放太多的图片、复杂的表达、动画、视频等等。
2、资源合并及压缩：比如将背景图片、导航图片等等作为一张图片，这样只需一次请求，而不是多次。
3、静态资源（Css、Js、Image）懒加载。
4、异步执行inline脚本。
5、避免重复的资源请求。
6、缩小cooike。
7、设置连接方式为keep-alive。
8、减少DNS查询。
9、移动端可见区域是有限的，采用延迟加载方式。
10、开启服务器压缩（gzip方式）。
优化图片处理
1、图片走CDN。
2、少用动态gif图。
3、图片不适宜过多及过大。
4、零碎图片使用css Sprite技术一次性下载。
5、避免使用bmp图片。
6、图片压缩。
优化HTML
1、减少HTML标签，减少不必要的嵌套。
2、废弃table标签。
3、减少DOM深度。
4、压缩HTML，去掉注释，空格换行等信息。
优化JS
1、使用临时变量或者数组存储document.images及document.forms等集合数据。
2、慎用with语法。
3、使用AJAX缓存。
4、避免eval及Function语法。
5、避免使用inlineScript。
6、异步、底部加载js。
7、合并压缩js。
8、字符串连接使用数组的join方式。