本節書摘來自異步社群《為ipad而設計:打造暢銷app》一書中的充分利用大尺寸觸摸屏,作者【英】chris stevens,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
充分利用大尺寸觸摸屏
為ipad而設計:打造暢銷app
當喬布斯聲稱ipad“神奇”的時候,并不僅僅因為他吃了很多twinkies泡芙(譯者注:twinkies是美國的泡芙品牌,2012年宣布破産,被hostess收購)。從根本上來說,ipad确實是個奇迹,因為它擁有多種形式的可塑性。我之前曾提到過“白闆”的概念,這裡面就蘊藏着ipad的神奇之處。在使用桌面計算機的時候,無可避免的事實是你正使用着一台計算機——你必須通過滑鼠和鍵盤與計算機進行互動。無論計算機螢幕上顯示的是什麼——文字處理軟體,或者是1965年的marshall amp(曆史上的“音箱之王”)圖檔——螢幕和你之間被鍵盤、滑鼠輸入裝置分隔開了。
然而,神奇之處在于:同樣的展示出現在ipad之上時,ipad似乎就變成了其螢幕上展示的東西,可以觸摸到所有能看到的東西。
探索360度的旋轉
在ipad所有令人既興奮又困惑的特性中,有一個最值得注意的特性經常被忽視了:ipad擁有縱向模式。全世界的計算機顯示器的寬度都比高度要長——這是衆所周知的橫向模式——大多數情況下,使用者基本上不能拿顯示器幹什麼。然而,和之前出現的iphone一樣,當使用者旋轉ipad,它會做出響應,引起螢幕自動旋轉,是以所有内容始終在合适的方向上顯示。這意味着ipad使用者可以根據他們所做任務的需要,快速地旋轉裝置以便更好地利用螢幕。
ipad這個貌似平凡無奇的特點,其實是它和你以往設計過的計算平台之間的根本差異。現在,作為全世界最流行的帶有縱向模式的電腦,ipad處在特立獨行的地位——它意味着設計者可以選擇建立的互動界面中縱向空間可以多于橫向空間。
ipad的360度旋轉幅度使得圖像元素也能響應方向的變化——依據使用者握持ipad的方式——改變形狀、位置以及開關切換。
關于這一點,蘋果的ipad郵件應用程式就是個很好的例子,如下圖所示,電子郵件管理器會根據ipad的握持方式展現出不同的界面。

橫向模式下,郵件應用程式在左側面闆中顯示收件箱中的郵件清單,目前選中郵件的内容則在右側面闆中顯示。但是如果将ipad旋轉180度,左側面闆就會消失不見,同時右側面闆會擴充至全屏。這使得ipad和印刷紙張看起來很相似,讓使用者可以更好地檢視郵件内容。更重要的是,它解決了一個非常實際的問題:設想一下如果在縱向模式下,郵件應用程式的左側面闆不消失會怎麼樣呢?資訊文本會變成很窄的一列,郵件中的嵌入圖檔元素則可能變得看不清楚,如下圖所示。
提示
如果想制作一個受歡迎的ipad應用,此應用應該對使用者握持ipad的變化做出響應。界面到底要如何變化取決于應用軟體的行為,但是如果無論ipad如何旋轉而應用都巋然不動,你很可能犯錯了。停下來想一想。橫向界面極少在切換到縱向模式時還能良好運作,這個道理在現實生活中的許多對象互動上同樣适用。
目前,隻有比較少的ipad遊戲界面會在ipad旋轉時改變外觀,可能是因為遊戲設計者往往習慣在确切、固定的螢幕格式上撰寫代碼。然而,許多頂級的遊戲确實會在ipad旋轉時調整自身的方向。
godfinger就是一個當使用者旋轉ipad時會調整方向的進階遊戲界面例子,可以在後面的插圖中看到它。該遊戲在橫向和縱向模式下都能玩,并且在這兩種狀态下看起來都很漂亮。godfinger的開發者ngmoko本來可以很輕松地堅持隻為該遊戲設計單一方向,但他們的遊戲很受歡迎的原因之一在于設計者注意到了這樣的細節,是以他們提供給玩家另一種選擇。并且伴随着界面的轉換,還有非常酷的過場效果。
其他應用,例如來自ustwo的granimator,當界面旋轉的時候,做出了非常細微的變化。granimator的菜單按鈕使用了在任何方向下都能被識别的圖示,隻有當這些按鈕被點選的時候,使用者才會察覺到菜單根據觀看者的視角調整了自身方向(檢視後面的示例圖檔)。當然,使用者不會有意識地察覺到菜單已經改變了,但是如果應用缺乏這個特性,他們是絕對會注意到的——就算是可能,也是很困難的——讓使用者在縱向狀态下去辨識菜單文字,他們很有可能要被迫将ipad還原到橫向。無論是在橫向還是在縱向界面模式下,granimator的主工作空間看起來是一樣的。然而,其菜單項會重新調整自身方向以便與目前的螢幕方向吻合。
上述僅僅是幾個開發者如何利用ipad 360度旋轉特性的例子,稍後還将在本書中近距離看看其他利用這一特性的方式。盡管要設計出能夠響應裝置旋轉的界面往往更加困難,但正是這種對細節的專注才能成就殺手級應用。
記住:人手不是滑鼠
我認為有兩大原則有助于創造出最棒的、最富有想象力、簡單易用的ipad互動應用。我會把這兩點傳授給你。下面開始吧。
不要在桌面計算機上進行ipad應用的初期界面布局,千萬不要、堅決不要、一定不要,好吧?
可以在桌面計算機上調整、潤色ipad應用設計,也可以在桌面計算機上通過photoshop為ipad的設計覆寫上發光玻璃或者木紋效果,但是絕對不要在桌面計算機上進行ipad應用的初期設計。下面會解釋為什麼。
如果一上來就用photoshop,最終會設計出适用于計算機滑鼠而不是手指的互動界面。這一點基本上是毋庸置疑的。你的設計會看起來很棒,陰影效果恰如其分,還可以輕微調整每一個像素讓它們有條不紊。當把這樣的設計作品呈現給老闆或者客戶的時候,會議室裡每個人都會對你贊不絕口,他們會把你設計的拷貝拿到公司裡到處炫耀,你會因為你絕妙的創造性而受到所有人的愛戴。
希望你不會這麼做。
實際上,後果會是這樣:你的互動設計會被編碼并釋出到公司的ipad上,你開始測試應用。現在,人人圍站着,困惑地瞪着你,他們在想為什麼那麼出色的界面設計在實際中怎麼會這麼難用。他們會把你轟到大街上并且燒掉你的辦公桌。
問題在于觸摸互動界面是個全新的怪獸,如果在桌面計算機上進行初期界面布局工作,那簡直就像盲人摸象。如果想開發出行之有效的觸摸互動界面,最好徒手在素描本上直接畫出來,或者使用手和ipad本身。要設計出确實出色的觸摸屏互動界面,需要能夠觸摸到自己的設計,反複觸摸,直到找到感覺。然後——并且隻有到那個時候——才可以轉移到photoshop美化設計,使之看起來很漂亮。記住:如果不觸摸自己的設計,那麼你的應用将會是以而遭罪。
然後是第二個規則:把所知道的關于界面設計的東西都忘幹淨吧。
剛開始做ipad界面設計的時候,很多設計者都遇到同一問題。那就是他們既有的界面設計概念會滲透到他們對ipad所做的設計上。但是,設計ipad界面和桌面計算機的界面是如此的大相徑庭,如果從來沒有做過wimp系統界面設計,在ipad的設計中反而占有巨大優勢。
當然,任何平台上的界面設計者都會有一套關于設計理念和經驗的寶貴工具集,但對ipad來說,最大的風險莫過于不用新穎的觀念去接觸它。想要制作能夠瘋狂熱賣的應用,在拿起ipad進行設計以前,忘記你自以為你知道的所有東西吧——就算這會讓你一開始時暈頭轉向。