跨終端設計模式

發表於2013-04-26

來源:胡太狼,你在哪兒?

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

跨終端設計模式

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

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

跨終端設計模式

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

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

跨終端設計模式

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

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

跨終端設計模式

圖片摘自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)

跨終端設計模式

[ 對於螢幕共享式,與下文的「轉向式」有一些差別,功能性有點弱 ]  螢幕共享式,是指資訊過大時,一個螢幕可能無法承載足夠的顯示空間,需要多個螢幕相結合,才能完整滴呈現資訊。最常見的就是雙顯示器的應用場景。

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網站(德文)。

 

相關文章