售前咨询 售后咨询
当前位置: 上海网站设计 > 建站知识 > 建站教程

移动端官网应如何适配?

网站编辑:小润 | 发表时间:2019-02-02 20:24:06

今天,我们就来说说,PC端和移动端应该如何适配更为合适。

1. 产品定位

所有的产品在设计的时候都离不开定位的问题,网站的设计也一样。特别是在PC端网页已经存在的情况下,定位的问题更加要思考清楚。

手机端官网的定位更多的是考虑其与PC端怎么样配合工作。

最理想的状况是“分工合作”。比如说:手机端可以快捷获取到手机号等个人信息、有丰富传感器、可以随时随地推送通知;PC端有足够的空间展示信息、键盘鼠标输入非常便捷。发挥两个平台不同的优势去设计。然而,这只是理想状况,目前还没有发现此类网页设计。

最省力的状况是“照搬全抄”。即两个平台的网页信息架构相同,改变的只有页面布局以及交互方式,比如猎豹清理大师的网页。这种情况很好地保证了体验的一致性,但是只适合信息架构比较小的网页,所以在大部分情况下可能不适用。

最明智的状况是“因地制宜”。即结合以上两种,既允许两个平台有功能的重叠,也保证有各自的特色。不过,鉴于是官网的设计,所以更多情况下,手机端的网页只是PC端网页的一个mini版。

2. 内容选择

网页中,文字是常见的元素。初次之外,还会有诸如图片、视频、音乐、程序或者链接等超文本的元素。

对于这些内容是否要呈现在手机端的网页,可以进行如下的思考:

针对这些元素,上海网站建设(润壤)给出的建议如下:

3. 简化

简化,删繁就简,把一些重复表达的东西精简掉。

4. 重组

重组,重新组合。主要是针对页面的内容部分,重新组合,以适应页面。

猎豹清理大师官网

以上猎豹清理大师的官网。重组之前可以先对页面显示的内容进行分块,比如上图,pc端的内容可以分成两块。分块之后,原本两个方块的布局是一左一右,在手机端的时候就可以变成一上一下。

更多的时候,pc网页可能同时在横向会有很多方块。这时候可以通过页面的宽度调整横向排列的方块的数量。如下图:

5. 隐藏

某些导航栏的tab栏可以考虑使用Material design的汉堡菜单,将导航收起来,把更多的位置留给内容展示。

不过总归,适配只为了能给用户更好的体验~.~

关键字:
官方微信
上海市长宁区宣化路300号华宁国际广场中区7层
+021-8031 0607
+135 8590 1130