當用戶在蘋果應(yīng)用商店里尋找新應(yīng)用時，往往基于設(shè)計來考量是否購買。生活中，或許很多人告誡我們不要憑借封面去評判一本書；既然無法試用一款應(yīng)用，那么截圖成為我們評判一款應(yīng)用質(zhì)量好壞的重要依據(jù)。

設(shè)計iPhone應(yīng)用時，上述的兩個因素都至關(guān)重要。當然，首先你得花時間來構(gòu)建用戶體驗的實體，往往通過線框圖來實現(xiàn)。線框圖（wireframe）能對應(yīng)用創(chuàng)意進行簡單勾勒，專注于體驗部分，而忽略視覺效果。（更多內(nèi)容參考benefits of wireframing your designs）我喜歡用筆在紙上畫草圖，當然也有人喜歡用Illustrator或者是Balsamiq Mockups。

圖片來源：MOObileFrame

需要注意的是，工具無關(guān)緊要，不必糾結(jié)。你需要集中精力去規(guī)劃應(yīng)用的功能，使之更加融洽和諧；你需要考慮用戶第一次過來要如何呈現(xiàn)；你需要思考用戶的操作邏輯。畫按鈕，寫文字，尤其是竭力讓學(xué)習(xí)的過程更直觀。

只有開始時就注重風(fēng)格，你才能確信你的線框圖呈現(xiàn)的是一個清晰、易用的應(yīng)用設(shè)計方案。

2. 手指大小的點擊目標

這是提升應(yīng)用易用性最顯著的點：擴大每個按鈕的可點擊區(qū)域。你是為拇指設(shè)計的，不是精確點擊的鼠標箭頭。

蘋果推薦的元素最小可點操作區(qū)域為44x44px。這并不意味著按鈕需要很大?？牲c區(qū)域可以根據(jù)按鈕的視覺大小進行擴展，這樣可以消除用戶多次嘗試性點擊帶來的煩惱。得特別注意那些相互靠近的多個按鈕，額外的可點區(qū)域不能蓋住其他的按鈕。

3. 每個界面只有一個主要的目標點

應(yīng)用的一個界面，應(yīng)該聚焦于你想傳達的主要目的。例如，iPhone郵件應(yīng)用中的郵件列表界面，用戶的主要目的是瀏覽郵件。雖然存在撰寫郵件的第二操作，但是按鈕放置于角落，并不突出。

設(shè)計師的一個任務(wù)就是進行決策：哪些是最重要的，然后突出她。降低次要元素的視覺比重，讓主要操作更加明了。

閱讀以下文章，可以幫助你在應(yīng)用中創(chuàng)建優(yōu)秀的可視化層次結(jié)構(gòu)和優(yōu)先級：

• Working with Visual Weight in Your Designs
• Creating Focal Points in Your Web Design
• Using Power Structure and Gestalt for Visual Hierarchy
• The Art of Distinction in Web Design

4. 避免默認的按鈕風(fēng)格

iPhone中UIButtons控件的默認風(fēng)格可以被視為我的眼中釘（design pet peeves）。似乎所有的iOS默認控件都看起來不錯。

除非你的應(yīng)用風(fēng)格就是讓人不爽（不排除有），否則盡量避免使用默認的按鈕風(fēng)格。讓按鈕與UI相融合會讓你眼前一亮，同時讓你遠離蹩腳設(shè)計師的稱號。

你可以利用背景圖片來設(shè)置按鈕風(fēng)格，亦或是通過代碼重畫一個新按鈕。

有許多教程和資料幫助你創(chuàng)建更具吸引力的按鈕，如下：

• Designing Buttons in iOS 5
• UIButton Glossy

5. 為臃腫的信息提供額外的視圖

對于用戶來說，轉(zhuǎn)移到另外一個視圖（通過推送或視圖動畫）是很容易的事兒。所以當你嘗試在一個視圖里添加更多信息時，不妨做做減法，將其轉(zhuǎn)移到另外一個視圖。

iPhone里，你經(jīng)?？梢栽凇皠?chuàng)建”視圖里碰到這種使用場景。例如，新聯(lián)系人界面，選擇鈴聲（ringtone）時，你會進入新的Ringtones視圖，其中展示了可選擇的鈴聲列表。

點擊電話號碼的標簽，你可以設(shè)置標簽名。

通過添加額外的視圖，僅展示需要的信息，這樣可以避免用戶因大量視圖元素帶來的困惑。這種設(shè)計理念亦被稱為漸進式展開（progressive disclosure）。

譯者注：

首先這幾點可能很多實踐中的人已經(jīng)知曉，那么可以忽略。畢竟翻譯它的目的，主要是自我確認。

大家看后，請不要移花接木，這幾點僅限于iPhone，是否通用于Android或iPad，無法考量，至少我目前看來，有些點在iPad上不具其合理性。

另外，從作者推薦的資源和相關(guān)設(shè)計模式，可以發(fā)現(xiàn)，其實移動應(yīng)用設(shè)計中，還是借鑒了很多Web設(shè)計的方法和理念精髓。如漸進式展開（progressive disclosure）可參見10 UI Design Patterns You Should Be Paying Attention To（譯文：《10個值得你關(guān)注的UI設(shè)計模式》）。所以，在學(xué)習(xí)移動設(shè)計時，并不能一味地摒棄Web的設(shè)計模式和相關(guān)方法，雖然場景不同，但處理技巧可以互相借鑒和更迭。

來源：網(wǎng)絡(luò)