橫豎屏切換中的介面設計與體驗提升

發表於2012-08-20

原文:beforeweb

眼下,智慧移動裝置內建的加速計的主要作用,就是根據裝置的定向方式來決定螢幕的顯示模式,也就是在橫屏或豎屏模式之間進行切換。這種功能使使用者通過簡單的動作就可以得到額外的佈局模式,期間不需要操作任何介面元素或實體按鈕。對於我們來說,這是一個提升產品使用者體驗的契機,但其中也不乏挑戰;我們要充分了解不同定向方式所涉及到的使用情境,並確保兩種體驗模式之間的差異不會給使用者帶來唐突的感覺。

幾乎所有型別的移動應用都能從顯示模式切換功能當中獲益。本文將圍繞著這一話題,為應用的設計師與開發者們介紹一些可以運用到實際工作中的基礎概念,同時還會幫助大家瞭解那些在實踐當中有可能遇到的挑戰以及相應的解決方案

通過裝置定向切換顯示模式

Youtube的移動應用是一個很典型的案例。在豎屏模式中,視訊視窗較小,但相關資訊比較豐富;而在橫屏模式下,視訊展開為全屏,並向使用者提供了更加全面的播放控制功能。當視訊播放結束後,介面模式會自動切換到豎屏狀態,籍此提示使用者調轉裝置並通過更全面的導航和資訊索引來瀏覽其他視訊。

橫豎屏切換中的介面設計與體驗提升

不過在有些時候,第二顯示模式也會給使用者帶來迷惑。以CardMunch為例(LinkedIn推出的名片掃描及瀏覽工具),其橫屏模式會將之前整個列表形式的介面改變成為“旋轉木馬”檢視。

橫豎屏切換中的介面設計與體驗提升

這個橫屏介面中缺少關於定向切換的視覺提示,而且其中幾乎沒有提供任何功能操作,使用者無法新增或編輯名片,只能瀏覽並進入詳情介面。特別是如果使用者在一開始就以橫屏方式開啟的應用,那麼在缺乏引導與提示的情況下,他們很有可能無法發現豎屏模式的介面及相應的內容與功能。

設計模式

裝置的定向方式被改變之後,應該以怎樣的方式呈現新的檢視呢?我們總結出了四種常見的設計模式。

液態

類似網頁設計中的液態佈局方式。按照新的顯示規格,對介面元素的位置及尺寸進行響應式的調整。具有代表性的產品案例包括Skype及Pocket應用。

橫豎屏切換中的介面設計與體驗提升

橫豎屏切換中的介面設計與體驗提升

擴充套件

在這種模式中,介面會根據螢幕定向方式的變化而增加或減少佈局元素(通常是導航)。例如IMDb的iPad應用會在橫評模式下增加一個左側導航列表,而在豎屏狀態時,使用者可以點選介面當中的“全部作品”展開這個列表。

橫豎屏切換中的介面設計與體驗提升

對於這類應用,其自身的內容與功能不應該隨著顯示模式的切換而增減——需要調整的是一些關鍵介面元素的呈現方式。不要讓使用者必須保持某種定向方式才能獲取特定的內容與功能。

互補

兩種顯示模式當中的內容形式可以是彼此互補和輔助的關係。以金融類的應用為例,在豎屏狀態下,資訊可以通過普通的資料列表形式呈現,而調轉螢幕之後,可以充分利用新的介面寬度,以統計圖表的形式展示資料。

橫豎屏切換中的介面設計與體驗提升

延伸

第二顯示模式可以作為預設狀態的功能延伸與強化。舉個簡單的例子,對於遙控器類的應用,豎屏狀態的預設介面中可以包含一些最基本的功能與頻道資訊;而在橫屏狀態下,使用者不僅能檢視到各頻道完整的節目排期,而且同樣可以在這個檢視當中執行頻道切換、設定錄影時間等操作。

橫豎屏切換中的介面設計與體驗提升

確定預設的定向方式

Above & Beyond是iPad上的一款互動式電子書。它擁有橫、豎兩種顯示模式,其中豎屏模式提供更大的、細節質量更高的作品檢視,不過只有在橫屏狀態時才會預設顯示“返回主選單”、“評論”一類的互動功能。

橫豎屏切換中的介面設計與體驗提升

然而對於iPad來說,豎屏才是其的預設定向方式。所以當使用者第一次在豎屏狀態下開啟應用時,系統會提示使用者通過點選螢幕來調出相關的功能——設計師在這一點上考慮的非常周全。

不過對於Andorid以及Windows 8的平板,以及BlackBerry的Playbook來說,它們的預設定向方式是橫屏。那麼在這些裝置中,介面顯示模式的策略及相關引導提示就需要發生相應的變化了——我們要確保預設顯示模式當中的內容與功能符合目標裝置自身預設定向方式的特點。

理解應用的上下文環境

上下文使用環境是移動應用使用者體驗設計當中的關鍵組成要素,在考慮螢幕定向及顯示模式切換的相關問題時,這方面的因素也會起到重要的影響作用。

以目前日漸流行的食譜類應用為例,很多硬體廠商甚至為這些應用打造了相關的壁掛或桌面支架,使使用者能夠更方便的在廚房當中使用。

橫豎屏切換中的介面設計與體驗提升

而我們也可以根據這類應用在不同的使用情景中的需求用例來建立具有差異性的顯示模式。以The Betty Crocker Cookbook為例,當使用者在相對安定的狀態下希望閱讀和學習食譜時,他可以使用豎屏模式;此時介面中會展示完整的烹飪及食譜資訊,同時還包括最終效果圖以及相關的功能元素。如果使用者希望在廚房一邊烹飪一邊進行參考,那麼橫屏模式就更加適用了。在這種狀態下,每一步的操作指導都會佔據一屏的篇幅,字號更大,便於在短時間內識別;利用內建攝像頭,應用還可以識別特定的肢體動作,使用者無需觸控螢幕,只要在攝像頭前揮揮手,操作指導就會自動翻頁。

橫豎屏切換中的介面設計與體驗提升

引導使用者在不同的顯示模式之間切換

通過調轉螢幕來切換顯示模式,從某種程度上講這種互動方式並不符合直覺。如果介面中沒有任何視覺引導和提示,使用者很有可能錯過另外一種顯示模式及相應的功能體驗。以iPhone自帶的計算器應用為例,如果使用者不知道它還能提供橫屏模式,那就會錯失掉那些高階計算功能。

通過視覺元素對使用者進行提示與引導,這可以使產品的體驗更加符合直覺(相關閱讀:具有引導性的移動應用介面設計模式)。我們來看一些可以用來提示使用者進行顯示模式切換的設計思路。

標題欄

通過標題欄作為提示,這種方式主要運用在第二顯示模式當中。仍使用之前的遙控器應用作為例子,如果使用者以橫屏狀態開啟了應用,他將看到一個固定顯示在左側的標題欄,其中的標題文字方向會暗示他將螢幕調轉過來進行閱讀,從而發現豎屏模式。

切換按鈕

與標準的分享按鈕類似,我們也可以使用能夠被普遍認知的圖示按鈕提示使用者手動切換橫豎屏顯示模式。

橫豎屏切換中的介面設計與體驗提升

兩種顯示模式當中都要包含這個切換按鈕。使用者點選之後,顯示模式自動切換,雖然接下來使用者未必會真正調轉裝置進行檢視,但他們通過這種方式瞭解了應用所提供的兩種顯示模式,將來會逐漸的在需要的時候自行調轉裝置,不再需要按鈕的輔助。所以該按鈕即可以觸發切換功能,同時也可以作為視覺提示。

橫豎屏切換中的介面設計與體驗提升

切換圖示也未必要以標準按鈕的形式出現:

橫豎屏切換中的介面設計與體驗提升

需要注意的是,這種方式有它自身的風險,在介面中新增某種非標準的、持續存在的輔助性元素,這本身是具有一定爭議的。不過這種方式的簡單有效也是顯而易見的。所以也希望各位設計師們能夠從這點出發,擴充套件思路,結合產品的實際情況進行實踐

拖拽把手

使用把手形式的控制元件來提示使用者通過拖拽展開第二檢視模式,如果使用者直接調轉裝置的話,第二檢視模式也會自動展開,類似捲簾的效果。帶有方向的動畫過渡效果可以使使用者對兩種檢視模式的層疊關係產生深刻的印象。

橫豎屏切換中的介面設計與體驗提升

總結

我們習慣於將這些“額外”的顯示模式作為應用主要介面模式的附屬物,其主要原因也許就在於很多使用者根本不瞭解它們的存在。通過一定的視覺提示,引導使用者發現這些同樣是經過精心考慮和打造的介面模式,我們就能使應用針對不同的使用情境發揮更大的價值,從而有效提升產品的友好性及體驗滿意度。

 

相關文章