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

Youtube的移動應用是一個很典型的案例。在豎屏模式中，視頻窗口較小，但相關信息比較豐富；而在橫屏模式下，視頻展開為全屏，并向用戶提供了更加全面的播放控制功能。當視頻播放結束后，界面模式會自動切換到豎屏狀態，籍此提示用戶調轉設備并通過更全面的導航和信息索引來瀏覽其他視頻。

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

這個橫屏界面中缺少關于定向切換的視覺提示，橫豎屏切換中的界面設計與體驗提升,而且其中幾乎沒有提供任何功能操作，用戶無法添加或編輯名片，只能瀏覽并進入詳情界面。特別是如果用戶在一開始就以橫屏方式打開的應用，那么在缺乏引導與提示的情況下，他們很有可能無法發現豎屏模式的界面及相應的內容與功能。

設計模式
設備的定向方式被改變之后，應該以怎樣的方式呈現新的視圖呢？我們總結出了四種常見的設計模式。

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

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

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

互補
兩種顯示模式當中的內容形式可以是彼此互補和輔助的關系。以金融類的應用為例，在豎屏狀態下，信息可以通過普通的數據列表形式呈現，而調轉屏幕之后，可以充分利用新的界面寬度，以統計圖表的形式展示數據。

延伸
第二顯示模式可以作為默認狀態的功能延伸與強化。舉個簡單的例子，對于遙控器類的應用，豎屏狀態的默認界面中可以包含一些最基本的功能與頻道信息；而在橫屏狀態下，用戶不僅能查看到各頻道完整的節目排期，而且同樣可以在這個視圖當中執行頻道切換、設定錄像時間等操作。

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

然而對于iPad來說，豎屏才是其的默認定向方式。所以當用戶第一次在豎屏狀態下打開應用時，系統會提示用戶通過點擊屏幕來調出相關的功能——設計師在這一點上考慮的非常周全。

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

文章名稱：橫豎屏切換中的界面設計與體驗提升
當前鏈接：http://m.kartarina.com/news47/162897.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、定制網站、網站制作、云服務器、網站建設、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯