設(shè)備的轉(zhuǎn)向設(shè)計(jì)：從縱向到橫向

我們智能設(shè)備中的內(nèi)嵌加速器通常根據(jù)設(shè)備的方向來(lái)對(duì)準(zhǔn)屏幕，換言之，就是縱向與橫向模式間的互相切換。這一特點(diǎn)為我們創(chuàng)造了機(jī)會(huì)，來(lái)制出更好的用戶體驗(yàn)——只需輕輕轉(zhuǎn)動(dòng)設(shè)備，無(wú)需點(diǎn)任何按鈕，就出現(xiàn)了一個(gè)新版面。

然而，設(shè)備不同方向的設(shè)計(jì)面臨著各種挑戰(zhàn)，要求思路縝密，確保用戶不會(huì)感到唐突，轉(zhuǎn)換于無(wú)形。要做到這些，就要理解與該功能相關(guān)的整體環(huán)境關(guān)系。

不同方向的設(shè)計(jì)對(duì)手機(jī)或平板電腦來(lái)說(shuō)都是加分的。此文意在為設(shè)計(jì)師們和開發(fā)人員們提供一些有關(guān)設(shè)備方向的基礎(chǔ)概念，希望有助大家的工作。我們也會(huì)呈現(xiàn)一些設(shè)備不同方向設(shè)計(jì)所面對(duì)的挑戰(zhàn)以及解決方案。

視設(shè)備方向?yàn)槎?jí)顯示畫面

YouTube 的手機(jī)應(yīng)用是一個(gè)有關(guān)設(shè)備方向設(shè)計(jì)的出色案例?？v向模式在界面中展現(xiàn)了豐富的功能，方便用戶搜索視頻以及管理賬戶。橫向模式則提供了全屏觀賞模式，并帶有回放等控制，令用戶的觀看體驗(yàn)最優(yōu)化。當(dāng)視屏播放完畢后，自動(dòng)轉(zhuǎn)換為縱向模式，促使用戶快速轉(zhuǎn)回設(shè)備，瀏覽更多視頻資源。

然而，方向轉(zhuǎn)換所帶來(lái)的第二界面也可能使用戶感到迷惑。例如，CardMunch(領(lǐng)英的名片應(yīng)用)，用戶可以通過手機(jī)自帶相機(jī)拍下名片，轉(zhuǎn)換成信息錄入通訊錄。當(dāng)轉(zhuǎn)為橫向模式時(shí)，CardMunch界面忽然變?yōu)榱怂幸雅臄z名片的轉(zhuǎn)盤式相冊(cè)。

YouTube 縱向和橫向手機(jī)界面

這個(gè)界面在方向轉(zhuǎn)換上缺乏視覺線索和控制度。用戶無(wú)法編輯或添加名片，因此，轉(zhuǎn)盤界面就更令人摸不著頭腦了，尤其當(dāng)用戶是在橫向模式的情況下打開應(yīng)用的時(shí)候。橫向模式缺乏視覺線索的另一弊端就是用戶很可能放棄轉(zhuǎn)動(dòng)設(shè)備的念頭，因而造成了他們無(wú)法發(fā)現(xiàn)應(yīng)用的其它功能。

領(lǐng)英的CardMunch在第二界面中缺乏視覺線索

方向設(shè)計(jì)的分類

為了幫助UX專業(yè)人士和開發(fā)人員，我將設(shè)備方向設(shè)計(jì)總結(jié)為四大主要分類。

流暢類

界面設(shè)計(jì)單純根據(jù)新方向的尺寸進(jìn)行版面的相應(yīng)變化。

在 Skype 的手機(jī)應(yīng)用中，在豎版轉(zhuǎn)為橫版時(shí)，圖標(biāo)在屏幕中的位置有了變化。

Pocket 的手機(jī)界面：相同版式，不同寬度。

延展類

這類界面根據(jù)選定方向的屏幕尺寸，添加或減去版面元素。例如，IMDb 的 iPad 界面利用橫向模式更寬的屏幕尺寸，在左側(cè)添加了全部影片目錄。該列表在縱向模式中也可通過點(diǎn)擊屏幕中部右側(cè)的“所有影片目錄”按鈕顯示。

IMDb 的 iPad 應(yīng)用

在任何方向中提供視覺元素和功能都能為用戶帶來(lái)很大的便捷。當(dāng)然，最重要的一點(diǎn)是，要避免強(qiáng)制用戶在某一特定方向模式下使用，尤其當(dāng)所需功能并未能在默認(rèn)方向中出現(xiàn)時(shí)。

互補(bǔ)類

這類界面在轉(zhuǎn)換方向時(shí)，可以觸發(fā)含有相關(guān)補(bǔ)充信息的輔助屏幕。我們就以金融手機(jī)應(yīng)用為例，它默認(rèn)顯示為縱向模式，在轉(zhuǎn)換為橫向模式時(shí)，會(huì)出現(xiàn)補(bǔ)充的視覺圖表。通過方向的轉(zhuǎn)換，可以補(bǔ)充另一界面中的同類或補(bǔ)充數(shù)據(jù)。

有關(guān)互補(bǔ)類的界面設(shè)計(jì)案例

延續(xù)類

類似 YouTube，延續(xù)類設(shè)計(jì)可以讓用戶只需輕松轉(zhuǎn)換設(shè)備方向，就能獲得二級(jí)界面。譬如我們?cè)谑褂弥悄苁謾C(jī)來(lái)遠(yuǎn)程遙控智能電視時(shí)，將設(shè)備轉(zhuǎn)動(dòng)至橫向界面時(shí)就能看到所有的節(jié)目預(yù)報(bào)，同時(shí)仍然保有頻道轉(zhuǎn)換、瀏覽節(jié)目以及預(yù)錄劇集等功能。

智能遙控和節(jié)目預(yù)告案例

慎重考慮默認(rèn)方向

Above & Beyond是一款展示美國(guó)漫畫家John Kascht生活和作品的iPad互動(dòng)電子書應(yīng)用。精美的畫作有橫向和縱向兩種展示模式。然而，橫向模式中顯示的某些重要互動(dòng)元素卻不在縱向頁(yè)面中顯示，包括回到主菜單的方式。iPad 的默認(rèn)方向是縱向，因此，只在橫向模式中包含互動(dòng)體驗(yàn)會(huì)令用戶感到迷惑。

Above & Beyond 的一個(gè)頁(yè)面。默認(rèn)縱向模式中沒有互動(dòng)元素。

縱向模式展示了作品的細(xì)節(jié)，電子書的互動(dòng)操作指示在應(yīng)用啟示時(shí)有顯示，那么可以考慮在用戶輕擊屏幕的情況下出現(xiàn)菜單。大部分智能手機(jī)以及 iPad 的默認(rèn)方向都是縱向，而安卓、Window 8 平板電腦和黑莓 Playbook 的默認(rèn)方向則是橫向。為避免混淆，要記住應(yīng)用的首選方向應(yīng)與設(shè)備的默認(rèn)模式和功能相符，而不是相反。

理解前后關(guān)聯(lián)

在為智能設(shè)備設(shè)計(jì)應(yīng)用時(shí)，應(yīng)考慮使用環(huán)境和前后關(guān)聯(lián)，尤其是在設(shè)計(jì)設(shè)備的不同方向上。案例分析：互動(dòng)菜譜越來(lái)越流行，硬件配件制造商已經(jīng)配備在廚房中使用 iPad 的輔助設(shè)備，washable stylus 就是一款適合做菜時(shí)使用的產(chǎn)品。

我們完全可以利用菜譜應(yīng)用的不同方向來(lái)創(chuàng)造更佳的用戶體驗(yàn)。在iPad 的縱向模式中，用戶可以翻頁(yè)瀏覽書本，也可以閱讀某一道菜的詳細(xì)做法和所需材料。當(dāng)設(shè)備旋轉(zhuǎn)為橫向時(shí)，界面就會(huì)呈現(xiàn)為做菜模式，包含大按鈕以及分步說(shuō)明。做菜模式會(huì)防止屏幕暗去，而且用戶只需在鏡頭前揮手就可以進(jìn)行翻頁(yè)，完美解決了弄臟屏幕的問題。

The Betty Crocker Cookbook iPad 做菜模式界面案例

理解用戶在廚房中以及做菜時(shí)使用iPad菜譜的情況，可以令互動(dòng)電子書的功能更貼切。加入設(shè)備轉(zhuǎn)向的考量可以提高用戶體驗(yàn)質(zhì)量。

轉(zhuǎn)向的視覺線索

通過設(shè)備轉(zhuǎn)向而出現(xiàn)的輔助界面或額外功能有時(shí)候是違反直覺的。如果缺乏視覺線索，用戶可能完全無(wú)法領(lǐng)會(huì)某一方向界面中的所有額外功能。有關(guān)此點(diǎn)的經(jīng)典案例就是iPhone自帶的計(jì)算器，Salon 曾發(fā)文“如何將 iPhone 的計(jì)算器變?yōu)橐粋€(gè)科學(xué)計(jì)算器”，特別介紹許多用戶都不知曉的功能。

在設(shè)備轉(zhuǎn)向設(shè)計(jì)中，視覺線索可以增添“可查找性”，更符合用戶的直覺體驗(yàn)，轉(zhuǎn)換于無(wú)形。以下我們一起來(lái)看幾個(gè)有關(guān)設(shè)備轉(zhuǎn)向中視覺線索的案例。

標(biāo)題欄

將頂部標(biāo)題欄在任一方向中都鎖定于默認(rèn)位置，這個(gè)微妙的線索會(huì)讓用戶轉(zhuǎn)動(dòng)脖子(或設(shè)備)來(lái)看看標(biāo)題欄上寫的是什么。這是轉(zhuǎn)向模式作為第二顯示界面的必要手段，它有助提醒用戶查看額外功能。

注解：此法并未讓默認(rèn)方向(縱向)的附加界面富有自釋性。有關(guān)此點(diǎn)，大家可以關(guān)注一下 coach marks，它是一個(gè)介紹應(yīng)用通過方向轉(zhuǎn)換出現(xiàn)第二界面的教程。

轉(zhuǎn)換開關(guān)

一如全球通用的或蘋果廣為人知的分享按鈕，以下也展示了一個(gè)設(shè)備方向轉(zhuǎn)換的標(biāo)準(zhǔn)按鈕。

這個(gè)圖標(biāo)應(yīng)長(zhǎng)期在界面中顯示，并用作設(shè)備方向間轉(zhuǎn)換的開關(guān)。有了這個(gè)開關(guān)，用戶無(wú)需轉(zhuǎn)動(dòng)設(shè)備即可看見第二界面，但它的功能其實(shí)是逐漸引導(dǎo)用戶通過旋轉(zhuǎn)設(shè)備來(lái)查看第二界面，從而不再使用開關(guān)按鈕。當(dāng)設(shè)備轉(zhuǎn)回默認(rèn)方向時(shí)，界面也會(huì)自動(dòng)調(diào)整。簡(jiǎn)而言之，這個(gè)圖標(biāo)起到的是一個(gè)視覺提醒作用，讓用戶知道還有更多功能。最終達(dá)到的效果是用戶無(wú)需這個(gè)開關(guān)，而是通過旋轉(zhuǎn)設(shè)備來(lái)轉(zhuǎn)換界面方向。

以下是一些開關(guān)按鈕案例：

開關(guān)按鈕在標(biāo)題欄

如果方向圖標(biāo)被標(biāo)準(zhǔn)化，它將具有自釋性，并起到視覺線索的功能。下方是一個(gè)開關(guān)圖標(biāo)出現(xiàn)在三角形角落的案例。

方向開關(guān)在三角形角落

注解：這個(gè)設(shè)備轉(zhuǎn)向圖標(biāo)并不是一個(gè)成熟的想法，它在 UI 控制上是否過剩仍受爭(zhēng)議。然而，在我看來(lái)，這個(gè)想法簡(jiǎn)單有效，可以讓設(shè)計(jì)師們更放開手去運(yùn)用設(shè)備方向轉(zhuǎn)換來(lái)延伸應(yīng)用的功能性。(主頁(yè)君案：當(dāng)然，現(xiàn)在大家已經(jīng)不用再過分煩惱這個(gè)方面了，轉(zhuǎn)動(dòng)設(shè)備已經(jīng)成為大家的習(xí)慣，不過該解決問題的思考模式仍然值得參考。)

抽屜式

這個(gè)想法是指用戶可以通過輕擊活滑動(dòng)屏幕來(lái)查看第二界面，就好比打開抽屜的感覺。轉(zhuǎn)動(dòng)設(shè)備會(huì)自動(dòng)打開抽屜，好像拉開窗簾一般。如果設(shè)計(jì)師們使用動(dòng)畫來(lái)模擬打開或關(guān)上抽屜，可以令用戶對(duì)方向轉(zhuǎn)換所顯示的新數(shù)據(jù)印象更深刻。

抽屜式控制

結(jié)論

設(shè)備方向轉(zhuǎn)換的設(shè)計(jì)已不新鮮。例如，當(dāng)手機(jī)轉(zhuǎn)換到橫向模式時(shí)，會(huì)有更大的鍵盤，平板電腦的郵箱應(yīng)用的管理界面也會(huì)出現(xiàn)更多細(xì)節(jié)。然而，設(shè)備的轉(zhuǎn)向設(shè)計(jì)仍多被視為主要界面的次級(jí)模式，用戶常常不知道轉(zhuǎn)換的可能，而只停留在主界面，二級(jí)界面從而不為人所知。如果添加一些簡(jiǎn)單的視覺線索，UX 專業(yè)人士可以利用設(shè)備轉(zhuǎn)向界面來(lái)提升產(chǎn)品功能，更重要的，是提升用戶體驗(yàn)。

原文來(lái)源：SMASHING MAGZINE