3/27/2013



除了遊戲 App,現在大多數的應用程式都內建了介面橫豎轉換的功能,這些應用程式通常會根據設備目前的擺置方向來決定呈現什麼樣的介面給使用者。而這個看似不起眼介面切換功能其實也內藏了不小學問,現在就讓我們來好好的研究一下吧!


在眾多應用程式當中,YouTube 官方的 App 是一個善加利用設備橫豎轉換介面的正面例子,YouTube App 預設的顯示方式為直立,在此模式下,影片視窗雖然較小,但畫面會額外提供影片描述、點閱率、上傳者資料…等附加資訊,而影片播放時,畫面會切換至橫向模式,在此模式中,播放中的影片不但會展開成全螢幕外,還會同時提供完整的播放控制按鈕給用戶使用。最後當影片播放完畢,畫面會自動切回附加訊息較多的直立模式,讓用戶可以快速的觀看相關訊息或是尋找下部影片。


但要特別注意的是,轉換模式若是設計不當,可能會造成用戶的困擾,拿《CardMunch》這款名片 App 為例,當設備轉為橫向時,原本以列表方式呈現的名片會轉變成圖片瀏覽模式,在此模式中用戶僅能瀏覽名片,沒辦法作任何編輯工作,所以假設用戶一開始是以橫向模式打開應用,在缺乏導引的情況下,他們可能沒辦法發現此應用的其他功能。


而目前常見的介面轉換模式有以下四種:

液態


最常看到的一種轉換方式,當設備方向轉換時,直接將螢幕上的元件等比縮放至合適的大小,《Pocket》和《Skype》都是很好的例子。



擴展


此模式中,介面會隨著設備的轉向,增加或減少畫面上出現的元件,拿 iPad 版的《IMDb》為例,在直立模式中必須點及特定按鈕才會跳出的演員列表,會直接顯示在橫向模式左側的導行列。



補充


在這種模式中,橫豎兩種介面雖然會有不同的樣式,但其顯示的資料卻相互互補。拿一些財經類應用為例,在直立模式下,資訊通常會以列表的方式呈現,但切換到橫向模式時,由於寬度變寬的關係,就可以利用統計圖表的方式展現數據或是額外新增補充說明。



延伸


在此模式中,第二顯示介面會延伸出一些不同功能,拿遙控型 App 為例,這類App 在直立模式下只提供基本的遙控功能,但若切換至橫向模式,除了原本的操控功能,系統還會將節目排程表列出來給用戶觀看。



轉換模式的種類既然有那麼多,那到底要如何為你的 App 挑選適當的轉換模式呢?


用戶的使用情境其實是個非常好的挑選依據,拿《The Betty Crocker Cookbook》這款食譜 App 為例,由於考量到在沒有作菜需求時,用戶大多是以直立模式來使用iPad,所以《The Betty Crocker Cookbook》在直立模式下所提供的食譜資訊就比較完整,目的就是方便用戶學習。不過當用戶想把 iPad帶進廚房邊看食譜邊烹飪時(因為廚房週邊配件的關係,這時iPad通常會是橫向放置),橫置介面就變成一個畫面只顯示一個步驟的教學模式,也就是上面介紹的第三種轉換方式(補充)。


介面橫豎轉換這個功能雖然看似不起眼,不過卻非常重要,因為這是一個提升用戶體驗的絕佳管道,想要開發出完美應用的開發者們,千萬別把這個問題忽略了。

【資料來源:smashingmagazine