跨終端設計模式

>>>  技術話題—商業文明的嶄新時代  >>> 簡體     傳統

  數字化時代,摩爾定律不斷鞭笞著終端廠商們。在 2011 至 2012 年,眾多數字產品脫穎而出。尤其是 Android 系統的開放,吸引了更多投資者和創業者跳進這片紅海。從終端屏幕大小的角度看,數字產品大致分為四類:

 

unified_device_design

  圖片摘自 LUKEW(http://www.lukew.com/ff/entry.asp?1679

  1.  智能機(Smartphone)——2012 年是移動互聯網爆發的一年,而僅國內廠商 Android 手機第三季度出貨量達到了 6000 萬臺(數據來源)。那么,各廠商為了提高銷量,均在手機性能、屏幕大小等方面推陳出新。4 寸的,4.3 寸的,4.7 寸的,乃至 5.5 寸的,都有覆蓋。

tnav-mobile

  圖片摘自 LUKEW(http://www.lukew.com/ff/entry.asp?1649

  2.  平板(Tablet)——平板方面,iPad 占據了非常大的市場分額。谷歌的 Nexus 7、Nexus 10 以及亞馬遜的 Kindle Fire 也在開疆擴土。而三星也覬覦 10 寸平板市場很久, 并推出了旗艦產品 Galaxy Note 10。

tnav-tablet

圖片摘自 LUKEW(http://www.lukew.com/ff/entry.asp?1649)

  3.  PC/Laptop——PC 領域,出現了“超級本”的概念,而 Windows 8 的推出,讓 PC 洋溢著觸摸平板的氣息。比如聯想近期發布的 Thinkpad Tablet 2,作為第二代商務平板產品,確實給人帶來了全新的體驗。

tnav-convert

  圖片摘自 LUKEW(http://www.lukew.com/ff/entry.asp?1649

   4.  智能電視以及機頂盒——Apple TV、谷歌 TV 的推出,也讓“智能電視”逐漸進入了人們的視線。大屏幕加上體感、手勢等交互方式,將提供更多出彩的體驗。同時,機頂盒作為輔助設備,也受到了各大公司的追捧——小米盒子、樂視盒子均蓄勢待發。

小米盒子

  PS:未來還會出現諸如 Google Glass 這類第五屏甚至是第六屏。

  各終端特點及使用情境

  手機是高度私密性的設備,具有隨身、便攜、移動的特點。手機最基本的就是滿足交流溝通的需要,打電話、發短信、聊微信都屬于此范疇。同時,手機也填補了人們碎片化的時間,有興趣的可以看一下「移動時代的經濟學——碎片化應用」。手機的使用環境錯綜復雜:嘈雜的公交地鐵上,幾乎大家手里都揣著手機,看電子書、玩游戲、刷微博、聽音樂······都會找點事兒消遣,畢竟你看我我看你,多沒勁啊;悶悶的辦公室里,指不定誰的手機鈴聲驚擾了大家,時不時也會看一下手機,生怕錯過了什么信息;迷茫的旅游景點邊,有哪些旅游景點可以看啊,路線怎么走啊,手機成為了我們搜尋信息的入口。

  平板,最大的特點是娛樂性。屏幕大小與設備重量達到了很好的平衡,既沒有筆記本那么沉,也比手機更易操作且體驗更佳。而且,從數據反饋來看, 平板電腦的銷量在2-3 年內將超過 PC(數據來源)。iPad 最常用的使用情境是:某用戶蜷曲在沙發上,看著手里的 iPad 播放著視頻,極其放松的氛圍。當然,平板分為 iOS 和 Android 系列。相對來說,擁有 iPad 的用戶一定程度上具有一定的經濟實力,而 Android 平板產品線凌亂,從幾百到幾千不等都有覆蓋,體驗也層次不齊。

  PC 或 Laptop,因其強大的性能和多任務的特性,所以很大程度上用于辦公或家用,移動性相對較差。家用 PC 有一體化發展的趨勢,而 Laptop 則因為微軟推出的 Windows 8 出現了鍵盤+屏幕的組合設計——鍵盤和屏幕可以自有分離或組合,且屏幕可獨立承担平板的處理任務 。

  電視,作為傳統信息媒介,仍然承担了重要的信息入口作用。老年人是電視媒體的資深用戶群,每晚的看電視成了他們一天下來可以放松、消遣的時刻,而且電視是除報紙以外獲取信息的最主要渠道,并會主觀地認可主流電視媒體(如 CCTV、各大衛視)報道的一些信息——「他們」放個屁都是對的;青少年簡直就是看著電視長大的(于是有了「我是看 XXX 的節目長大的」),寒暑假必看,星期天偷著看,你不讓他看他偏要看,看到都是動漫卡通一類的,花季雨季的少男少女則會關注一些明星的動態和偶像劇(楊冪粉、張杰粉、李宇春粉······);中青年看電視就是沖著娛樂性去的,哪個節目有話題、夠有傳播力,就會受到關注,而且廣告也是主要影響這類有消費能力的人群。最近,智能電視的交互設計也是大家比較關注的一個熱點。

  四個屏幕各司其職,你能在任何一個屏幕上吸引住用戶,你就把握住了錢的脈搏;如果你能夠打通兩個以上屏幕的體驗并吸引用戶,那么你就能在移動互聯網時代掌握一定的主動權。用戶在多個終端上操作都有一些相同的目的:

  • 查找/發現(lookup/find):基于目前的位置或狀態,我想看看周圍附近的情況或是否有相關符合我預期的信息;
  • 編輯/創建(edit/create):我有一件很緊迫事情需要及時完成;
  • 登記/狀態(check in/status):我需要持續關注某件事情的狀態以便做出及時的反饋或調整;
  • 探索/游戲(explore/play):我有一些無聊,想通過一些事情來消遣打發時間,娛樂一下;

  多個屏幕終端之間操作切換大體可以分為兩種模式:間斷式(Sequential Usage)和同步式(Simultaneous Usage)。間斷式的操作模式,可以有如下理解:上班途中會使用手機打發時間,到了公司會使用電腦進入工作狀態,回家了會打開電視放松一下,這就是一個間斷式的過程;很多人在手機里隨便逛后遇到心儀的物品,往往會收藏,然后回到家或到公司后,在帶電腦上進行確認并完成商品購買(習慣使然,大多數會覺得在電腦上完成相關確認和支付會更安全更踏實一些)。同步式的狀態,顯而易見:我們看春節晚會的時候,必定會手里握著手機或平板,迫不及待地想看看微博里的各種吐槽。

  多終端的六個模式

  如何解決跨屏幕終端的產品體驗設計呢?總結有一下六個模式:

多屏幕終端

  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)

MSX_Multiscreen_Muster_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 中。

  這里需要特別討論微信的轉向式設計。微信提供了「微信網頁版」功能,如果用戶使用移動設備進行溝通略顯局促和低效的時候,可以通過掃描網頁版進行相關同步操作——其中,用戶賬號的識別是利用手機掃描網頁中的二維碼進行手機與服務端的驗證,完成跨終端連接任務。

  其他相關應用推薦:BumpAirDroid

  5.  互補式(Complementarity)

  互補,顧名思義,就是多終端通過相互的溝通和反饋,增加體驗的質量。互補模式最重要的應用場景就是控制(Control),例如通過 iPhone 應用來遠距離控制 Macbook 里的幻燈片,通過手機來遙控電視節目。

  這里介紹一款很有意思的產品「我愛電視」,主要完成的任務就是通過手機設備遙控電視節目。通過一個小型無線終端連接機頂盒,用戶可以在手機中瀏覽相關節目預告,遇到心儀的節目,可以點擊即可跳轉到該電視頻道。

  6.  同時性(Simultaneity)

  多終端屏幕的同時性,即通過并行的信息內容,構建一個即時性的氛圍或體驗。

  常見的使用場景如:觀看「我是歌手」節目時,邊觀看節目,大家都會實時刷一下微博觀察好友們對當前歌手表現評價;一些體育直播賽事,主播也會提示觀眾發送短信或在官方微博中留言評論參加抽獎活動,這也是一種很直接的同時性多終端互動。

  總體來說,第三點「屏幕共享式」和第六點「同時性」略弱之外,其他四點都極具可操作性。同時,第一點「一致性」的設計模式其實還只是一言以蔽之,如何在追求一致性的前提下,根據各設備的使用場景進行具體分析和差異化設計,這也是一很重要的命題。

  注:主要的模式分類參考了 www.multiscreen-experience.com 網站(德文)。

  相關資料:

  1.  跨終端體驗的完整性——Kentzhu

  2.  The New Multi-Screen World Study——Google

  3.  Designing for Context: The Multiscreen Ecosystem

  4.  淺談多終端屏幕特性

  5. Cross Device Design Patterns


www.hoowolf.net 2013-04-27 08:59:09

[新一篇] 效率低的日子怎么辦?

[舊一篇] 藍港王峰:我在網絡游戲行業十年從業記
回頂部
寫評論


評論集


暫無評論。

稱謂:

内容:

驗證:


返回列表