移动适配：如何布局手机网站设计内容

现在大多数用户的上网习惯变成了手机为主，因此形成了新的设备使用形式：PC多用于办公，手机多用于娱乐。

世界万物相生相克，有问题就要想办法解决。于是响应式网站的概念被提出，并广受认可。响应式网站通过对浏览器或设备的识别，而自动改版网站的布局，从而实现最佳的浏览体验。这一理念彻底解决了多终端网站浏览的问题。

我们设计手机网站设计的时候，需要注意以下三点：

1、网站内容组织

手机网站设计的最复杂的元素之一就是内容的重新组织。因为手机用户的需求与PC端的用户大致相同，但是又有所不同，因为他们浏览网站的行为，会随着他们的设备的改变而改变。

当设计手机网站页面时，首先应该考虑网站内容如何满足手机用户的浏览需求。网站内容应该正题呈现高度大于宽度的垂直结构，以达到对移动设备的最佳适应。

另一方面就是要考虑，什么内容要优先显示，什么内容要弱化。手机用户浏览网站与PC用户会有很大的不同，所以我要考虑这些手机用户的需求，而不简单的从PC网站复制过来并进行缩放。

2、表格设计

作为网络营销人员，我们需要花费大量时间优化我们的网络表单，以实现最大的转化。设计的优化程度，将直接决定用户填写表格的效果和意愿。对于手机用户，我们必须专门针对设计手机端专用的表单。

垂直对齐

垂直对齐的页面适用于移动端。原理很简单，如果用户需要在手机上水平滑动，那必然会带来极差的体验。所以保证表单垂直，是手机适配的较佳选择。

预测性文字

通过只能联想具有潜在输入可能性的字段，提供预测性选项来帮助用户输入是很不错的选择。这样可以减少用户的输入错误，降低用户输入的时间成本。比如，用户输入某一街道的名称时，在输入一半即可自动完成联想。

减少字段

在移动设备上填写表单通常是一个麻烦的工作，所以要通过减少字段数量以让表单尽可能简单。为了实现这一点，您应该考虑哪些信息是完成交易真正必要的。有关用户的其他信息可能对您的公司很方便，但不应以消费转化率为代价。

字段数量需要遵循一个总原则：越少越好。你可以采用将多个字段整合成一个的办法，来减少字段，比如将姓氏和名称合并，将性别和姓名合并（提供点选，选择男/女）等。

3、网站菜单

菜单或者说导航的样式，是PC设备和移动设备之间的主要区别。在桌面上，大菜单通常有具有许多类别和子类别的。这种类型的设置非常适合大屏幕的情况，因为可以读取这些菜单中的文本，并且可以轻松点击链接进入想要的界面。

但是同样的方法不适用于移动端，因为屏幕相对很小，所以移动菜单应该考虑到这些事情。这意味着手机端更应该采用单级菜单，并尽可能采用垂直布局。

总之，PC电脑网站人们的视觉是从左往右，而手机移动端用户的视觉是从上而下，只要把握了这样的原则，就可以为设计一套不错的的手机网站提供不错的思路。

（转载自站酷，原文可读性过差，重新整理翻译）