IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

手机端官网设计:适配还是不适配,这是个问题

Catherine • 2017-05-31 05:32 • 交互设计

Pc端使用平台:手机端使用平台:红米2增强版 自带浏览器 MIUI6.6.2.0(KHJCNCF)|稳定版

文章目录[隐藏]

  • 文档说明
  • 手机端网页适配形式
    • 2.1. 无适配
    • 2.2. 极简适配
    • 2.3. 适配
  • 手机端网页适配的一些想法
    • 3.1. 产品定位
    • 3.2. 内容选择
    • 3.3. 页面布局
    • 3.4. 交互动作映射
  • 小结

手机端官网设计:适配还是不适配,这是个问题

文档说明

Pc端使用平台:

  • QQ浏览器9.0(2315)
  • Chromium43.0.2357.124
  • IE9.0.8112.16421

手机端使用平台:

红米2增强版 自带浏览器 MIUI6.6.2.0(KHJCNCF)|稳定版

手机端网页适配形式

在手机端访问产品的官网,大概会有以下几种形式:

  • 无适配。无适配不仅仅是布局和内容没有做适配,交互动作也没有做适配。原本为pc端设计的网页在手机端往往会缩小,然后变形,大部分操作会失效。
  • 极简适配。极简适配就是又想做适配,又因为其他种种原因,所以对内容进行删减直到剩下最后一个页面,用一个页面去呈现最基本的产品介绍以及下载按钮。
  • 适配。做了适配的官网会在手机端有良好的表现。当然,Pc端的官网有时候体量太大,在适配到手机端的时候会有删减。

下面可以先看看这三种情况大概是什么样子。

2.1. 无适配

手机端官网设计:适配还是不适配,这是个问题

QQ浏览器官网

以上是QQ浏览器的官网(browser.qq.com),可以看到,在手机端,内容被挤压到中间偏左的地方,已经变形了。同时,在pc端时,网页的操作是“鼠标滚轮滚动切换页面”,映射到手机端应该就是“滑动页面切换页面”,但是交互动作也失效了。

原因:

QQ浏览器没有做适配的原因非常简单:这是一个pc产品的官网。用户用手机访问该官网的场景几乎不存在,所以不做适配也无可厚非。

只是,即使不适配,那么是否有更好的方式去避免这种问题。既然手机端访问pc产品官网可能性极小,同时体验这么差,能否尝试强制跳转到手机版的官网呢?这样子或许会更好吧。

手机端官网设计:适配还是不适配,这是个问题

kingroot官网

以上是kingroot的官网(www.kingroot.net),可以看到,该页面的变形和QQ浏览器的官网很相似。都是内容的错位以及交互动作的失效。

原因:

Kingroot官网没有做适配的原因可能和QQ浏览器有点类似,但是又不尽相同。虽然可能同是出于访问量极少的原因,但是不同的是,手机端下载的渠道几乎都是应用分发平台,用户去官网下载的概率比较小。所以,评估一下产出和收益,就不做了吧。

2.2. 极简适配

手机端官网设计:适配还是不适配,这是个问题

腾讯手机管家官网

以上是腾讯手机管家的官网(m.qq.com),可以看到,手机管家的手机端和pc端完全不是同一个东西,pc端的内容大而全,手机端只保留最基本的产品宣传介绍的东西。

原因:

1) 定位不同;

腾讯手机管家这么做得原因,可能是出于产品定位的考虑,即:pc端和手机端的官网定位不同。

PC端官网的定位可能更多以“平台”为主,所以我们可以看到,官网上面宣传的内容相对比较少,更大的篇幅是让位给了其他各种功能,比如说首页就可以看到的:“WiFi开放平台”、“号码公众平台”、“恶意线索举报”以及“在线查毒”。

手机端的官网定位以“产品介绍”为主,所以页面只要把腾讯手机管家的亮点秀出来、然后附上下载链接即可。

2) 手机网速慢;

同时,手机端本身有访问网速慢。所以需要对展示的内容进行重新筛选,因此会删除大量用户需要的信息。

3) 手机屏幕比较小;

最后保留下来的信息需要考虑页面大小的问题,剩下的信息需要重新排版以符合手机端的显示效果。

4) 手机端访问量小;

访问量小只是一个补充的因素,因为访问量小,所以即使删减信息也没有关系,毕竟影响的范围小。

手机端官网设计:适配还是不适配,这是个问题

360极客版官网

以上就是360极客版的官网(http://geek.360.cn),从图片可以看到,PC端和移动端的区别除了在页面布局上的区别外,更大的区别实际上是信息架构的区别。PC端的信息架构更加复杂,而手机端只保留了最基本的“产品宣传”以及“下载”功能。同时,在PC端首页的图片变成了手机端的文字(详情请访问该网页)。

原因:

360极客版的官网并没有定位的问题,更多的是出于对手机端适配的考虑。

1) 手机网速慢;

手机端本身有访问网速慢。所以需要对展示的内容进行重新筛选,因此会删除大量用户需要的信息。

2) 手机屏幕比较小;

最后保留下来的信息需要考虑页面大小的问题,剩下的信息需要重新排版以符合手机端的显示效果。

3) 手机端访问量小;

访问量小只是一个补充的因素,因为访问量小,所以即使删减信息也没有关系,毕竟影响的范围小。

2.3. 适配

说明:“适配”和“极简适配”区别只是信息的不同。“适配”保留的信息会更多,“极简适配”保留的信息较少,两者并没有什么明显的界限。至于信息保留的多少,应该以产品的定位为准。

手机端官网设计:适配还是不适配,这是个问题

猎豹清理大师官网

以上猎豹清理大师的官网(http://cn.cmcm.com/cleanmaster/)。可以看到,两者在信息架构上没有区别,同时,对内容进行了重新排布以适应手机端的屏幕。更重要的是,猎豹清理大师的官网有对交互动作进行了适配。在PC端,首页的内容是滚动鼠标滚轮一次,页面切换一次。在手机端映射为,每滑动一次屏幕,屏幕切换一次。在这点上,PC端和手机端体验非常一致。

原因:

1) 手机网速慢;

手机端本身有访问网速慢。但是在页面信息本来就不多的情况下,内容可以根据产品定位进行取舍。

2) 手机屏幕比较小;

保留下来的信息需要考虑页面大小的问题,剩下的信息需要重新排版以符合手机端的显示效果。

3) 精益求精;

即使手机端访问的量少,也需要为每一个用户提供最满意的体验。

手机端网页适配的一些想法

是否进行适配,以及怎么适配,可以参考以下的一些点。

3.1. 产品定位

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

PC端的官网暂时就定位为两种:产品介绍类和平台类。

可以这么说,每个产品的官网在初期都是产品介绍类,因为这时候,官网的作用更多的是以介绍宣传为主,可能附带有下载的功能。

随着产品的成长,用户人数增加,可能每个产品或多或少都有做平台的野性,对于一些有条件的产品,其官网会逐渐演变成平台类的官网,这时候,官网的宣传作用就处于较低的地位,更多时候,官网是提供服务的入口。

两种不同类型的PC官网在做手机端适配的问题,考虑的问题都是一样的,就是,手机端的官网的定位如何。一般而言,手机端由于屏幕以及网络的原因,做成平台类的不太现实。但是,手机端的官网依旧可以保留必要的功能入口。

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

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

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

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

3.2. 内容选择

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

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

针对这些元素,我个人给出的建议如下(有不同意见的欢迎在评论处拍砖):

手机端官网设计:适配还是不适配,这是个问题

内容选择方式

3.3. 页面布局

在对网页上的一些布局进行适配的时候,可以考虑用以下的原则。

3.3.1. 简化

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

手机端官网设计:适配还是不适配,这是个问题

www.axt.es

以上是网站http://www.axt.es/#/works在pc端和手机端的对比图,可以看到,在pc端时,品牌logo旁边还有一句宣传语,但是在手机版的时候已经精简掉了。

手机端官网设计:适配还是不适配,这是个问题

tympanus.net

以上是网站http://tympanus.net/Blueprints/FullWidthTabs/在pc端和手机端的对比图,可以看到,在pc端时,tab栏是图案加文字的形式,但是在手机版的时候已经被简化到只剩下图案。需要注意到的是,如果简化掉的是图案而不是文字的话,手机端是容纳不下那么多的tab栏目的。

3.3.2. 重组

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

手机端官网设计:适配还是不适配,这是个问题

猎豹清理大师官网

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

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

手机端官网设计:适配还是不适配,这是个问题

布局适配示意图

3.3.3. 隐藏

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

手机端官网设计:适配还是不适配,这是个问题

futureofwebdesign.com

以上是https://futureofwebdesign.com/london-2013/在手机和电影的对比图。pc端的导航tab在手机端被隐藏起来了,变成了侧边栏,这样就可以把主要的区域用于内容的展示。

3.4. 交互动作映射

在确定好手机端网页内容以及页面布局之后,需要考虑交互动作的适配。下面是我总结的一些交互动作在PC端和手机端的映射,仅供参考。

手机端官网设计:适配还是不适配,这是个问题

交互动作映射

小结

官网是否在手机端进行适配,除了产品本身的环境(PC端还是手机端)之外,还要考虑成本和收益的问题。不过总归,适配能给用户更好的体验。

而适配,可以从三个维度:内容、布局和交互方式三种去适配。

如果只是考虑在PC端网页大小的适配的话,只考虑布局就足够了。

 

本文由 @yqqyzy 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31052/

logoMaterial designPSUIWEB交互产品产品经理兼容性设计场景官网设计客户端适配用户移动端网页设计设计转载
赞 (0)
CatherineCatherine
0
生成海报
APP常用导航总结
上一篇 2017-05-31
数据可视化:如何为数据寻找适合的配色
下一篇 2017-05-31

相关推荐

  • 写给新手的情感化UI设计简明指南 交互设计

    写给新手的情感化UI设计简明指南

    “仔细看这个情感色轮,你会发现,距离中心越远,情感的强度越弱,但是在进行色彩的设计之时,几乎没人探讨这个问题。我们在做设计的时候,常常会探讨如何传递或者影响基本的情绪,但是我们从未探讨过用户的情绪是否会被强化或者逐步减淡。”

    2017-05-17
  • 未来的汽车用户界面将会让人惊叹 交互设计

    未来的汽车用户界面将会让人惊叹

    如果有一天让你来设计汽车?未来的汽车会是什么样的呢?

    2017-05-12
  • 新手转向资深的必经之路——交互文件命名的最详细规范(下) 交互设计

    新手转向资深的必经之路——交互文件命名的最详细规范(下)

    接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范(上)》继续整理文件命名的规范继续,今天来讲讲Sketch的Artboard(画板)命名和Layer(图层)命名、Symbol(组件)的命名、导出图片的处理方式。Sophia的tips:真正的高手,细节都做的很好!

    2017-05-01
  • 微信热点

    产品思维~02·用户体验与结婚教练

    今天继续分享《得到》app梁宁的大师课程产品思维30讲,感兴趣可以下载《得到》app继续关注,在文后会附上《得到》app的下载方式。其实梁老师真的很幽默也很形象,来用结婚教练的例子来类比产品的用户体验,同样的结婚也好,创业找合伙人也罢,都是非常重要的长期关系,改变一个人那是非常难的一件事情,那么如何去观察和判断一个人就显得尤为重要。如果没有受过专业训练,那么眼睛看到的很可能是不真实的,你的感觉以及情绪很容易被某个点所牵制,而且在你没有强...

    2018-04-26
  • 交互设计

    5分钟交互设计指南系列:对话框

    框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图,一般会要求用户作出反应。对话框可以分为模态对话框 (modal dialogs) 和非模态对话框 (modeless dialogs)。

    2017-10-31
  • 【交互面试】阿里巴巴交互设计实习生笔试题汇总 交互设计

    【交互面试】阿里巴巴交互设计实习生笔试题汇总

    阿里巴巴交互设计实习生笔试题 1 在线测试,测试时间 180 分钟 【自我介绍-20 分】简要的自我介绍(学校、学历、专业、个性、独特亮点等),并上传你的简历和作品。(将附件上传到无密码的网盘中,建议使用酷盘,并…

    2015-07-30
  • 微信热点

    用通俗的方式告诉你什么是「交互设计」

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-11
  • 复杂性和用户体验[译]

    每一个交互设计师应该都怀有一颗追求简单的心——轻盈的操作,简易的流程,干净的界面。每每提及复杂性,必然会想到其对立面——简单。所谓简单,就是要去除不必要的干扰,让用户直达目标。优秀的产品关注简约而非复杂…

    交互设计 2015-07-22
  • 微信热点

    饿了么 UED 又搞事情啦!

    近日,据保洁阿姨匿名举报,在上海饿了么总部的榴莲酥会议室内,有人在工作时间聚众搞事情……据说场面隆重,气氛活跃,不堪入目。本台记者 @孟小雨 迅速赶往了现场。-----据调查,这次始作俑者是作为宇宙霹雳无敌超级吃货公司饿了么中最有逼格+设计感的团队—— UED 部门。在这个辞旧迎新、恭喜发财、还不放假的时刻,该部门秘密召开了第一届 UED 年度颁奖典礼!记者被大会的美食吸引,潜入该组织内部,随即被惊呆了。说到颁奖会,你以为是这样的?领导...

    2018-02-25
  • 微信热点

    seeds对话未来丨李斌:重新定义用户体验

    对话未来丨seeds系列分享会seeds, 由蔚来原创打造,是一个分享有趣观点、新知与灵感的讲堂,它寓意着每一个思想的火花都像一颗种子,被灵感浇灌后,汇成大树。2015年3月seeds诞生,从一个面向蔚来全球员工的内部讲演平台,发展到不断吸引各行各业的主讲人,并且在蔚来App公开直播的产品。到目前为止,seeds 已举办了13场演讲。今年,seeds会走进我们各个城市的蔚来中心,成为常设活动。我们也欢迎各位用户成为seeds的主讲人。4...

    2018-05-03
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress