本文探究了如何讓設(shè)計(jì)師利用圖形元素和屏幕交互，制作出易識(shí)別又易操控的iPhone應(yīng)用。目的在于揭示iPhone應(yīng)用設(shè)計(jì)的普遍趨勢(shì)和設(shè)計(jì)方法——請(qǐng)注意，這些未必是設(shè)計(jì)和可用性中的最佳觀點(diǎn)。

1. 鏡像iPhone原生界面元素

“告訴他們你要告訴他們的，去告訴他們，然后告訴他們你告訴過(guò)他們。”（譯者：作者在表達(dá)她當(dāng)時(shí)的感受吧）在你的應(yīng)用中創(chuàng)建一套新的OS可能很有趣，但在移動(dòng)設(shè)備上處理時(shí)，人們只想簡(jiǎn)明扼要。簡(jiǎn)明扼要的意思是，設(shè)計(jì)師得遵循OS的流程，創(chuàng)建一個(gè)無(wú)說(shuō)明的應(yīng)用，給最終用戶去操作。鏡像出用戶熟悉的布局和界面元素可以節(jié)省時(shí)間和精力。所以這看起來(lái)是設(shè)計(jì)iPhone應(yīng)用時(shí)的一個(gè)便利途徑啊。

Facebook 

在新版Facebook 3.0中，你會(huì)發(fā)現(xiàn)這樣一個(gè)柵格布局，用戶可以通過(guò)左右滑動(dòng)屏幕進(jìn)入更多分類。因?yàn)樗R像了蘋(píng)果的原生界面，所以用戶根本不用再學(xué)如何使用。網(wǎng)頁(yè)設(shè)計(jì)中存在類似方法：用戶會(huì)預(yù)料到logo在左上角，導(dǎo)航也在上面，等等。Facebook把這它延續(xù)到了移動(dòng)應(yīng)用上，用大按鈕可以輕松的被識(shí)別和點(diǎn)擊。

Where 

Where使用了相同的概念，它允許用戶通過(guò)左右滑動(dòng)屏幕來(lái)獲取更多信息。

Tweetdeck

Tweetdeck是用戶界面設(shè)計(jì)中一個(gè)很好的例子。高亮顯示的最近更新多吸引注意力啊。此應(yīng)用能以歸類或標(biāo)簽列表形式，在新窗口中顯示更新。但不會(huì)替換掉一個(gè)已顯示的對(duì)話菜單，它可以作為跳轉(zhuǎn)到具體類目或清掉消息提醒的跳板。

#p#

2. 簡(jiǎn)化界面

也許簡(jiǎn)化用戶界面聽(tīng)起來(lái)像是個(gè)機(jī)械任務(wù)，但在用戶界面設(shè)計(jì)背后又隱藏著什么呢？答案很簡(jiǎn)單：就是用戶。用戶需要什么？什么令他們感到友好和模糊？你如何提供他們所需的東西，以便不用時(shí)刻去關(guān)注那些重要的信息？

提到在小空間內(nèi)展示大量核心功能，F(xiàn)acebook的第一版就做的非常到位。當(dāng)然，這里指的是展示所有信息和擁有直觀的界面。3.0與之相比，你會(huì)發(fā)現(xiàn)它使用“跳板”的方式來(lái)簡(jiǎn)化界面，既保持了直觀又維護(hù)了功能。

Flickr 

Flickr 對(duì)功能、視覺(jué)設(shè)計(jì)和小屏幕移動(dòng)設(shè)備顯示這三者間平衡上的處理同樣出色。試想之：Flickr的核心是什么？照片。它的用戶或許不希望看到又大又笨的導(dǎo)航；他們想要的是照片。Flickr已經(jīng)設(shè)法調(diào)整核心功能，去掉那些標(biāo)題和該死的導(dǎo)航。事實(shí)上，很多導(dǎo)航元素已經(jīng)在照片本身的交互上實(shí)現(xiàn)了。真是個(gè)既簡(jiǎn)單又聰明的辦法。

#p#

3. 模擬硬件界面

不少應(yīng)用程序打破了傳統(tǒng)iPhone界面的操作，利用它獨(dú)特的手指手勢(shì)進(jìn)行控制。它們中一些是用戶熟悉的硬件界面，光鮮亮麗的外表不禁讓人回味起那種第一次點(diǎn)擊的新鮮感。但應(yīng)用程序不會(huì)因?yàn)槟阃娴亩喽兣K。

Convertbot 

Convertbot的輪盤(pán)讓我們想起小學(xué)時(shí)候，不同的是它更具特色、更新穎、更有創(chuàng)意。

Little Snapper 

Little Snapper模擬的就是一臺(tái)普通數(shù)碼單反的旋鈕。

Where To? 

這個(gè)應(yīng)用看起來(lái)像是屬于奔馳車的。豪華的皮革、磨砂的按鈕：上乘的技術(shù)。我們可以想象，每個(gè)按鈕按下去都那么結(jié)實(shí)，都那么有力道。

#p#

4. 豐富、漂亮的列表視圖

當(dāng)你對(duì)列表設(shè)計(jì)的最新趨勢(shì)感到興奮時(shí)，你已經(jīng)被確診為一位“geek designer”了。人們遇到一個(gè)列表時(shí)會(huì)做些什么？當(dāng)然，只是略讀。那怎樣把人們決定什么有趣變得更輕松？沒(méi)錯(cuò)，更多的視覺(jué)暗示！

基本上，用戶通過(guò)尋找下一步的快照，來(lái)決定是否需要了解更多。而又大又漂亮的按鈕就是途徑之一。通過(guò)色彩、圖標(biāo)和排版讓人感覺(jué)這個(gè)大按鈕背后隱藏著好多信息。

Delivery Status Touch 

看看Delivery Status是怎樣通過(guò)不同顏色的大按鈕來(lái)區(qū)分不同品牌的。并用良好的排版建立起信息層次。

Be Happy Now 

Be Happy Now的大按鈕通過(guò)柔和的色彩體系與明亮清晰的字體傳達(dá)“be happy”的主旨。

Next Read 

Next Read這個(gè)應(yīng)用允許在朋友間分享圖書(shū)。在這里所有書(shū)都是關(guān)于時(shí)下某一特定話題的，包括書(shū)名、封面、評(píng)分以及評(píng)論數(shù)。注意看每個(gè)導(dǎo)航選項(xiàng)的間隙和留白，它讓這個(gè)區(qū)域更容易被點(diǎn)擊。

Nike 

Nike為女性開(kāi)發(fā)了這個(gè)應(yīng)用，精致的視覺(jué)元素和插畫(huà)都很符合它的品牌。在設(shè)計(jì)上打破了傳統(tǒng)界面的束縛，充分表達(dá)了品牌，不讓用戶為如何使用它而感到困惑。

Borange 

Borange是一款“社交情況”的應(yīng)用，它可以幫你統(tǒng)籌與朋友們的約會(huì)。列表展示了很多信息：要一起出行的朋友，本地會(huì)議，并可以形象的表示哪個(gè)朋友有空。

#p#

5. 分層的界面

一些應(yīng)用把界面設(shè)計(jì)成層，利用iPhone本身獨(dú)有的特性讓其固定，或垂直、水平滾動(dòng)。這種方法有幾個(gè)好處：

  1. 減少了必要的傳統(tǒng)導(dǎo)航元素?cái)?shù)量（即更少的按鈕有助于避免界面混亂）

  2. 為用戶獲取信息提供了快速通道

  3. 有更多屏幕空間承載有用信息

Tweetie 

Tweetie利用層把具體信息傳遞給你每位Twitter好友。你看，所有信息都裝在這一個(gè)屏幕里！

Barnes & Noble 

Barnes & Noble讓你可以快速的通過(guò)上面的層進(jìn)入新商品，通過(guò)下面的層切換到更多分類。

USA Today 

USA Today在它的圖片一欄中對(duì)層做了細(xì)微改變：利用滑動(dòng)面板顯示信息區(qū)塊。盡管第一眼看上去很亂，但能很容易跳過(guò)它。最有趣的部分在于，在每個(gè)面板里，都可以通過(guò)左右滑動(dòng)來(lái)查看更多圖片。

myPantone 

我們何嘗不希望色卡少一點(diǎn)？上面的拾色器就是一個(gè)層，你可以通過(guò)色彩范圍、類別來(lái)取色，也可以通過(guò)滾動(dòng)打開(kāi)/關(guān)閉細(xì)節(jié)窗口。

#p#

6. 在列表中使用圖標(biāo)

在小屏幕上，圖標(biāo)可給應(yīng)用的可用性和導(dǎo)航性帶來(lái)巨大提升。讓我們通過(guò)幾個(gè)應(yīng)用的例子看看它的優(yōu)勢(shì)。

iStudiez

這個(gè)應(yīng)用利用各種不同的教學(xué)用具圖標(biāo)，清晰地表達(dá)了應(yīng)用的目的。通過(guò)這些具象的暗示，學(xué)生瞄一眼就知道今天發(fā)生了什么。

Top Floor 

Top Floor利用簡(jiǎn)單易識(shí)別的圖標(biāo)，快速引導(dǎo)用戶進(jìn)入他們選擇的類別。

New York Times

應(yīng)用可以讓你想做什么就做什么，是不是很不可思議哦？對(duì)于一個(gè)像紐約時(shí)報(bào)樣的應(yīng)用，用戶必然有他喜歡的章節(jié)。你猜怎么著？紐約時(shí)報(bào)這樣做：它讓你自定義標(biāo)簽欄，把你喜歡的章節(jié)都加進(jìn)來(lái)。拖動(dòng)一個(gè)圖標(biāo)到標(biāo)簽欄即可。不過(guò)這樣做也不是十全十美，在視覺(jué)呈現(xiàn)上打了折扣。

Filemaker

另一個(gè)漂亮圖片的案例，說(shuō)它好是因?yàn)閳D標(biāo)的使用上不混亂、不混淆。設(shè)計(jì)師永遠(yuǎn)不要為了使用圖標(biāo)而使用圖標(biāo)。作為設(shè)計(jì)師，我們希望圖標(biāo)能夠盡可能的反應(yīng)出用戶所選的內(nèi)容。Filemaker，干的漂亮。

#p#

7. 插圖的使用

依賴圖形的應(yīng)用程序越來(lái)越受歡迎，因?yàn)殚_(kāi)發(fā)者試圖讓她們的應(yīng)用與眾不同。偶爾奏效，但不經(jīng)常。越是傳統(tǒng)的設(shè)計(jì)就越可能存在可用性問(wèn)題。在推出一個(gè)“有創(chuàng)意”界面的產(chǎn)品前一定要進(jìn)行可用性測(cè)試。

SugarSync 

這個(gè)界面可以輕松地走遵循傳統(tǒng)列表視圖的路線。但設(shè)計(jì)師沒(méi)有這么做，而是通過(guò)一個(gè)漩渦將視覺(jué)連接在一起來(lái)傳達(dá)這個(gè)應(yīng)用。這很不尋常，同時(shí)需要花點(diǎn)時(shí)間來(lái)適應(yīng)它。

Mom Maps 

另一個(gè)使用插圖取得成功的例子，它將很多概念都融入了這個(gè)應(yīng)用。

#p#

8. 使用手勢(shì)

經(jīng)典的線性導(dǎo)航看上去很枯燥：一個(gè)按鈕連一個(gè)按鈕，來(lái)表現(xiàn)一堆東西的列表，或表現(xiàn)這樣那樣的交互。事實(shí)并非如此壯觀，只是比喻一下。在公共事業(yè)的應(yīng)用上使用有創(chuàng)意的交互可能性很大。

Mover 

Mover列舉了如何使用手勢(shì)來(lái)分享聯(lián)系方式、照片和書(shū)簽。打開(kāi)兩個(gè)設(shè)備，把文件從這個(gè)共享到那個(gè)里。

ABC Animals 

這個(gè)應(yīng)用寓教于樂(lè)。用手指在屏幕上書(shū)寫(xiě)字母是另一個(gè)通過(guò)觸摸iPhone控制的例子。

All Recipes 

此應(yīng)用可以讓你通過(guò)手勢(shì)來(lái)混合眾多元素，作為你的美餐。