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

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

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

01 1024x652 - reprinted, design - 移动适配:如何布局手机网站设计内容

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

1、网站内容组织

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

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

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

16038358 - reprinted, design - 移动适配:如何布局手机网站设计内容

2、表格设计

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

垂直对齐

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

预测性文字

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

减少字段

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

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

3、网站菜单

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

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

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

(转载自站酷,原文可读性过差,重新整理翻译)

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注