移动应用跨终端设计模式
程序员文章站
2022-03-03 18:25:19
...
数字化时代，摩尔定律不断鞭笞着终端厂商们。在 2011至2012 年，众多数字产品脱颖而出。尤其是Android系统的开放，吸引了更多投资者和创业者跳进这片红海。
一、数字终端分类
从终端屏幕大小的角度看，数字产品大致分为四类：
1. 智能机（Smartphone）
2012年是移动互联网爆发的一年，而仅国内厂商Android手机第三季度出货量达到了6000万台（数据来源）。那么，各厂商为了提高销量，均在手机性能、屏幕大小等方面推陈出新。4寸的，4.3寸的，4.7寸的，乃至5.5寸的，都有覆盖。
2. 平板（Tablet）
平板方面，iPad占据了非常大的市场分额。谷歌的Nexus 7、Nexus 10以及亚马逊的Kindle Fire也在开疆扩土。而三星也觊觎10寸平板市场很久， 并推出了旗舰产品Galaxy Note 10。
3. PC/Laptop
PC领域，出现了“超级本”的概念，而Windows 8的推出，让PC洋溢着触摸平板的气息。比如联想近期发布的Thinkpad Tablet 2，作为第二代商务平板产品，确实给人带来了全新的体验。
4. 智能电视以及机顶盒
Apple TV、谷歌TV的推出，也让“智能电视”逐渐进入了人们的视线。大屏幕加上体感、手势等交互方式，将提供更多出彩的体验。同时，机顶盒作为辅助设备，也受到了各大公司的追捧——小米盒子、乐视盒子均蓄势待发。
PS：未来还会出现诸如Google Glass这类第五屏甚至是第六屏。
二、各终端特点及使用情境
1. 手机是高度私密性的设备，具有随身、便携、移动的特点。
手机最基本的就是满足交流沟通的需要，打电话、发短信、聊微信都属于此范畴。同时，手机也填补了人们碎片化的时间，有兴趣的可以看一下「移动时代的经济学——碎片化应用」。手机的使用环境错综复杂：嘈杂的公交地铁上，几乎大家手里都揣着手机，看电子书、玩游戏、刷微博、听音乐••••••都会找点事儿消遣，毕竟你看我我看你，多没劲啊；闷闷的办公室里，指不定谁的手机铃声惊扰了大家，时不时也会看一下手机，生怕错过了什么信息；迷茫的旅游景点边，有哪些旅游景点可以看啊，路线怎么走啊，手机成为了我们搜寻信息的入口。
2. 平板，最大的特点是娱乐性。
屏幕大小与设备重量达到了很好的平衡，既没有笔记本那么沉，也比手机更易操作且体验更佳。而且，从数据反馈来看， 平板电脑的销量在2-3年内将超过PC（数据来源）。iPad最常用的使用情境是：某用户蜷曲在沙发上，看着手里的iPad播放着视频，极其放松的氛围。当然，平板分为iOS和Android系列。相对来说，拥有iPad的用户一定程度上具有一定的经济实力，而Android平板产品线凌乱，从几百到几千不等都有覆盖，体验也层次不齐。
3. PC或Laptop，因其强大的性能和多任务的特性，所以很大程度上用于办公或家用，移动性相对较差。
家用PC有一体化发展的趋势，而Laptop则因为微软推出的Windows 8出现了键盘+屏幕的组合设计——键盘和屏幕可以自有分离或组合，且屏幕可独立承担平板的处理任务 。
4. 电视，作为传统信息媒介，仍然承担了重要的信息入口作用。
老年人是电视媒体的资深用户群，每晚的看电视成了他们一天下来可以放松、消遣的时刻，而且电视是除报纸以外获取信息的最主要渠道，并会主观地认可主流电视媒体（如CCTV、各大卫视）报道的一些信息——「他们」放个屁都是对的；青少年简直就是看着电视长大的（于是有了「我是看XXX的节目长大的」），寒暑假必看，星期天偷着看，你不让他看他偏要看，看到都是动漫卡通一类的，花季雨季的少男少女则会关注一些明星的动态和偶像剧（杨幂粉、张杰粉、李宇春粉••••••）；中青年看电视就是冲着娱乐性去的，哪个节目有话题、够有传播力，就会受到关注，而且广告也是主要影响这类有消费能力的人群。最近，智能电视的交互设计也是大家比较关注的一个热点。
四个屏幕各司其职，你能在任何一个屏幕上吸引住用户，你就把握住了钱的脉搏；如果你能够打通两个以上屏幕的体验并吸引用户，那么你就能在移动互联网时代掌握一定的主动权。用户在多个终端上操作都有一些相同的目的：
三、多终端的六个模式
如何解决跨屏幕终端的产品体验设计呢？总结有一下六个模式：
1. 一致性（Coherence）
一致性，即一系列的信息在多个屏幕设备中，虽然各个设备上都结合设备的特性进行了信息结构的重组排列、功能平衡和取舍，但总体信息和表达的主题是趋于一致的。例如，美图秀秀作为一款图片处理软件，拥有PC版、iPhone/Android/Windows Phone 8版、iPad版等。虽然移动设备的功能没有PC版的功能全面（屏幕空间、用户需求聚焦），但是总体操作处理逻辑都趋于一致：打开图片→处理图片→保存、分享图片。
如何在多个终端间保持一致性？一般，在PC中产品本身会以客户端应用或可浏览的网页内容形式存在；在移动终端中，通常也会有Web App、Native App以及响应式网页设计（Responsive Web Design）。Web App，通常基于HTML 5技术进行应用的构建，特点是灵活、迭代快且适配成本低，但是稳定性和体验相对受限，无法充分利用移动操作系统的相关特性（例如Gmail、新浪微博、淘宝都是Web App设计的案例）；Native App，能够充分利用移动设备的相关设备和系统信息，体验和交互都非常棒，但是更新周期厂、适配和维护成本高。Facebook曾经主打Web App，但是消息推送等没办法很及时，也没有缓存等，让用户很恼火，自从上了Native App后，体验才得以提升。当然，也有Native App与Web App相结合的案例，例如「豆瓣阅读」的移动应用都是以原生独立应用形式存在的，但是内部的图书内容信息部分都是采用的Web方案解决的。
而响应式网页设计是目前比较流行的网页设计思想。主要是通过模块化的内容设计，让网页内容能够根据设备屏幕大小进行响应适配显示。例如，对于啪啪分享出来的一段语音对话Web页面，能够在PC浏览器和手机浏览器中都能够很好地显示出来，就属于此设计范畴。推荐阅读：「什么是响应式Web设计？怎样进行？」、「响应式Web设计」。
2. 同步式（Syncronization）
现在很多用户已经拥有多个终端设备，当在多个设备之间切换时，用户希望不会存在信息鸿沟。设备能够为用户保持数据同步与管理，用户在不同的时间或空间跨平台浏览操作时能够保持信息完整和同步。例如，浏览twitter，即使在不同设备上浏览，也能够提醒用户最后浏览的内容；观看网络视频时，从PC切换到手机，也能够同步浏览历史或追剧信息。另外还有一些云同步功能，例如iCloud、Dropbox、金山云盘等都是为了解决信息同步的问题而产生的产品解决方案。
3. 屏幕共享式（Screen Sharing）
[ 对于屏幕共享式，与下文的「转向式」有一些差别，功能性有点弱 ] 屏幕共享式，是指信息过大时，一个屏幕可能无法承载足够的显示空间，需要多个屏幕相结合，才能完整滴呈现信息。最常见的就是双显示器的应用场景。
4. 转向式（Device Shifting）
有些场景中，用户希望通过多个终端辅助其完成任务，但同时各设备本身也具备随时更改信息，不出现信息丢失或中断的现象。例如，老罗在演示锤子系统的时候，希望手中的手机涉及任何交互操作都能投射到会场大屏幕中。这些都归结于一点，如何实现信息的推送（Push）。
技术条件分为有线和无线，有线有USB线、HDMI接口线的有线传输，无线有WIFI、NFC、Android Beam和Apple Airplay等技术方案。其中，例如豌豆荚、360手机助手，能够利用WIFI进行PC对手机的应用安装管理（条件是PC和手机均处于同一个WIFI网络），多看利用WIFI将图书从电脑中传输到iPad或手机客户端中，非常方便。而Airplay或Android Beam都属于视频推送技术方案，例如优酷、爱奇艺等iPad视频应用中都有Airplay功能，这样就能够将视频实时投射到Apple TV中。
这里需要特别讨论微信的转向式设计。微信提供了「微信网页版」功能，如果用户使用移动设备进行沟通略显局促和低效的时候，可以通过扫描网页版进行相关同步操作——其中，用户账号的识别是利用手机扫描网页中的二维码进行手机与服务端的验证，完成跨终端连接任务。
其他相关应用推荐：Bump、AirDroid
5. 互补式（Complementarity）
互补，顾名思义，就是多终端通过相互的沟通和反馈，增加体验的质量。互补模式最重要的应用场景就是控制（Control），例如通过iPhone应用来远距离控制Macbook里的幻灯片，通过手机来遥控电视节目。
这里介绍一款很有意思的产品「我爱电视」，主要完成的任务就是通过手机设备遥控电视节目。通过一个小型无线终端连接机顶盒，用户可以在手机中浏览相关节目预告，遇到心仪的节目，可以点击即可跳转到该电视频道。
6. 同时性（Simultaneity）
多终端屏幕的同时性，即通过并行的信息内容，构建一个即时性的氛围或体验。
常见的使用场景如：观看「我是歌手」节目时，边观看节目，大家都会实时刷一下微博观察好友们对当前歌手表现评价；一些体育直播赛事，主播也会提示观众发送短信或在官方微博中留言评论参加抽奖活动，这也是一种很直接的同时性多终端互动。
总体来说，第三点「屏幕共享式」和第六点「同时性」略弱之外，其他四点都极具可操作性。同时，第一点「一致性」的设计模式其实还只是一言以蔽之，如何在追求一致性的前提下，根据各设备的使用场景进行具体分析和差异化设计，这也是一很重要的命题。
注：主要的模式分类参考了www.multiscreen-experience.com网站（德文）。
相关资料：
一、数字终端分类
从终端屏幕大小的角度看，数字产品大致分为四类：
1. 智能机（Smartphone）
2012年是移动互联网爆发的一年，而仅国内厂商Android手机第三季度出货量达到了6000万台（数据来源）。那么，各厂商为了提高销量，均在手机性能、屏幕大小等方面推陈出新。4寸的，4.3寸的，4.7寸的，乃至5.5寸的，都有覆盖。
2. 平板（Tablet）
平板方面，iPad占据了非常大的市场分额。谷歌的Nexus 7、Nexus 10以及亚马逊的Kindle Fire也在开疆扩土。而三星也觊觎10寸平板市场很久， 并推出了旗舰产品Galaxy Note 10。
3. PC/Laptop
PC领域，出现了“超级本”的概念，而Windows 8的推出，让PC洋溢着触摸平板的气息。比如联想近期发布的Thinkpad Tablet 2，作为第二代商务平板产品，确实给人带来了全新的体验。
4. 智能电视以及机顶盒
Apple TV、谷歌TV的推出，也让“智能电视”逐渐进入了人们的视线。大屏幕加上体感、手势等交互方式，将提供更多出彩的体验。同时，机顶盒作为辅助设备，也受到了各大公司的追捧——小米盒子、乐视盒子均蓄势待发。
PS：未来还会出现诸如Google Glass这类第五屏甚至是第六屏。
二、各终端特点及使用情境
1. 手机是高度私密性的设备，具有随身、便携、移动的特点。
手机最基本的就是满足交流沟通的需要，打电话、发短信、聊微信都属于此范畴。同时，手机也填补了人们碎片化的时间，有兴趣的可以看一下「移动时代的经济学——碎片化应用」。手机的使用环境错综复杂：嘈杂的公交地铁上，几乎大家手里都揣着手机，看电子书、玩游戏、刷微博、听音乐••••••都会找点事儿消遣，毕竟你看我我看你，多没劲啊；闷闷的办公室里，指不定谁的手机铃声惊扰了大家，时不时也会看一下手机，生怕错过了什么信息；迷茫的旅游景点边，有哪些旅游景点可以看啊，路线怎么走啊，手机成为了我们搜寻信息的入口。
2. 平板，最大的特点是娱乐性。
屏幕大小与设备重量达到了很好的平衡，既没有笔记本那么沉，也比手机更易操作且体验更佳。而且，从数据反馈来看， 平板电脑的销量在2-3年内将超过PC（数据来源）。iPad最常用的使用情境是：某用户蜷曲在沙发上，看着手里的iPad播放着视频，极其放松的氛围。当然，平板分为iOS和Android系列。相对来说，拥有iPad的用户一定程度上具有一定的经济实力，而Android平板产品线凌乱，从几百到几千不等都有覆盖，体验也层次不齐。
3. PC或Laptop，因其强大的性能和多任务的特性，所以很大程度上用于办公或家用，移动性相对较差。
家用PC有一体化发展的趋势，而Laptop则因为微软推出的Windows 8出现了键盘+屏幕的组合设计——键盘和屏幕可以自有分离或组合，且屏幕可独立承担平板的处理任务 。
4. 电视，作为传统信息媒介，仍然承担了重要的信息入口作用。
老年人是电视媒体的资深用户群，每晚的看电视成了他们一天下来可以放松、消遣的时刻，而且电视是除报纸以外获取信息的最主要渠道，并会主观地认可主流电视媒体（如CCTV、各大卫视）报道的一些信息——「他们」放个屁都是对的；青少年简直就是看着电视长大的（于是有了「我是看XXX的节目长大的」），寒暑假必看，星期天偷着看，你不让他看他偏要看，看到都是动漫卡通一类的，花季雨季的少男少女则会关注一些明星的动态和偶像剧（杨幂粉、张杰粉、李宇春粉••••••）；中青年看电视就是冲着娱乐性去的，哪个节目有话题、够有传播力，就会受到关注，而且广告也是主要影响这类有消费能力的人群。最近，智能电视的交互设计也是大家比较关注的一个热点。
四个屏幕各司其职，你能在任何一个屏幕上吸引住用户，你就把握住了钱的脉搏；如果你能够打通两个以上屏幕的体验并吸引用户，那么你就能在移动互联网时代掌握一定的主动权。用户在多个终端上操作都有一些相同的目的：
- 查找/发现（lookup/find）：基于目前的位置或状态，我想看看周围附近的情况或是否有相关符合我预期的信息；
- 编辑/创建（edit/create）：我有一件很紧迫事情需要及时完成；
- 登记/状态（check in/status）：我需要持续关注某件事情的状态以便做出及时的反馈或调整；
- 探索/游戏（explore/play）：我有一些无聊，想通过一些事情来消遣打发时间，娱乐一下；
三、多终端的六个模式
如何解决跨屏幕终端的产品体验设计呢？总结有一下六个模式：
1. 一致性（Coherence）
一致性，即一系列的信息在多个屏幕设备中，虽然各个设备上都结合设备的特性进行了信息结构的重组排列、功能平衡和取舍，但总体信息和表达的主题是趋于一致的。例如，美图秀秀作为一款图片处理软件，拥有PC版、iPhone/Android/Windows Phone 8版、iPad版等。虽然移动设备的功能没有PC版的功能全面（屏幕空间、用户需求聚焦），但是总体操作处理逻辑都趋于一致：打开图片→处理图片→保存、分享图片。
如何在多个终端间保持一致性？一般，在PC中产品本身会以客户端应用或可浏览的网页内容形式存在；在移动终端中，通常也会有Web App、Native App以及响应式网页设计（Responsive Web Design）。Web App，通常基于HTML 5技术进行应用的构建，特点是灵活、迭代快且适配成本低，但是稳定性和体验相对受限，无法充分利用移动操作系统的相关特性（例如Gmail、新浪微博、淘宝都是Web App设计的案例）；Native App，能够充分利用移动设备的相关设备和系统信息，体验和交互都非常棒，但是更新周期厂、适配和维护成本高。Facebook曾经主打Web App，但是消息推送等没办法很及时，也没有缓存等，让用户很恼火，自从上了Native App后，体验才得以提升。当然，也有Native App与Web App相结合的案例，例如「豆瓣阅读」的移动应用都是以原生独立应用形式存在的，但是内部的图书内容信息部分都是采用的Web方案解决的。
而响应式网页设计是目前比较流行的网页设计思想。主要是通过模块化的内容设计，让网页内容能够根据设备屏幕大小进行响应适配显示。例如，对于啪啪分享出来的一段语音对话Web页面，能够在PC浏览器和手机浏览器中都能够很好地显示出来，就属于此设计范畴。推荐阅读：「什么是响应式Web设计？怎样进行？」、「响应式Web设计」。
2. 同步式（Syncronization）
现在很多用户已经拥有多个终端设备，当在多个设备之间切换时，用户希望不会存在信息鸿沟。设备能够为用户保持数据同步与管理，用户在不同的时间或空间跨平台浏览操作时能够保持信息完整和同步。例如，浏览twitter，即使在不同设备上浏览，也能够提醒用户最后浏览的内容；观看网络视频时，从PC切换到手机，也能够同步浏览历史或追剧信息。另外还有一些云同步功能，例如iCloud、Dropbox、金山云盘等都是为了解决信息同步的问题而产生的产品解决方案。
3. 屏幕共享式（Screen Sharing）
[ 对于屏幕共享式，与下文的「转向式」有一些差别，功能性有点弱 ] 屏幕共享式，是指信息过大时，一个屏幕可能无法承载足够的显示空间，需要多个屏幕相结合，才能完整滴呈现信息。最常见的就是双显示器的应用场景。
4. 转向式（Device Shifting）
有些场景中，用户希望通过多个终端辅助其完成任务，但同时各设备本身也具备随时更改信息，不出现信息丢失或中断的现象。例如，老罗在演示锤子系统的时候，希望手中的手机涉及任何交互操作都能投射到会场大屏幕中。这些都归结于一点，如何实现信息的推送（Push）。
技术条件分为有线和无线，有线有USB线、HDMI接口线的有线传输，无线有WIFI、NFC、Android Beam和Apple Airplay等技术方案。其中，例如豌豆荚、360手机助手，能够利用WIFI进行PC对手机的应用安装管理（条件是PC和手机均处于同一个WIFI网络），多看利用WIFI将图书从电脑中传输到iPad或手机客户端中，非常方便。而Airplay或Android Beam都属于视频推送技术方案，例如优酷、爱奇艺等iPad视频应用中都有Airplay功能，这样就能够将视频实时投射到Apple TV中。
这里需要特别讨论微信的转向式设计。微信提供了「微信网页版」功能，如果用户使用移动设备进行沟通略显局促和低效的时候，可以通过扫描网页版进行相关同步操作——其中，用户账号的识别是利用手机扫描网页中的二维码进行手机与服务端的验证，完成跨终端连接任务。
其他相关应用推荐：Bump、AirDroid
5. 互补式（Complementarity）
互补，顾名思义，就是多终端通过相互的沟通和反馈，增加体验的质量。互补模式最重要的应用场景就是控制（Control），例如通过iPhone应用来远距离控制Macbook里的幻灯片，通过手机来遥控电视节目。
这里介绍一款很有意思的产品「我爱电视」，主要完成的任务就是通过手机设备遥控电视节目。通过一个小型无线终端连接机顶盒，用户可以在手机中浏览相关节目预告，遇到心仪的节目，可以点击即可跳转到该电视频道。
6. 同时性（Simultaneity）
多终端屏幕的同时性，即通过并行的信息内容，构建一个即时性的氛围或体验。
常见的使用场景如：观看「我是歌手」节目时，边观看节目，大家都会实时刷一下微博观察好友们对当前歌手表现评价；一些体育直播赛事，主播也会提示观众发送短信或在官方微博中留言评论参加抽奖活动，这也是一种很直接的同时性多终端互动。
总体来说，第三点「屏幕共享式」和第六点「同时性」略弱之外，其他四点都极具可操作性。同时，第一点「一致性」的设计模式其实还只是一言以蔽之，如何在追求一致性的前提下，根据各设备的使用场景进行具体分析和差异化设计，这也是一很重要的命题。
注：主要的模式分类参考了www.multiscreen-experience.com网站（德文）。
相关资料：
下一篇： 卤猪蹄上色红亮的技巧有哪些