iPad應(yīng)用程序UI設(shè)計(jì)的五大要素
原創(chuàng)【51CTO譯文】我們介紹過(guò)如何在iPad上的進(jìn)行游戲設(shè)計(jì)，iPad的應(yīng)用程序UI設(shè)計(jì)非常出色。但是，你如何讓你的應(yīng)用融入iPad的風(fēng)格中呢？本文為http://mobile.tutsplus.com上一篇點(diǎn)擊非常高的文章《Top 5 Tips for Designing iPad Apps》，探討的五大要素有望幫助你設(shè)計(jì)出令人著迷的iPad應(yīng)用程序。
以下全部譯文：
1、自定義用戶界面完全可以，但要把它做好。
身為一名設(shè)計(jì)人員，我顯然完全贊同自定義用戶界面，但也明白在設(shè)計(jì)時(shí)很快就會(huì)偏離軌道!如果你想設(shè)計(jì)一個(gè)自定義用戶界面，就要關(guān)注以下幾個(gè)方面：
◆提供立即讓人沉浸于其中的體驗(yàn)
Flipboard就是一個(gè)典例，這個(gè)應(yīng)用程序毫無(wú)傳統(tǒng)的導(dǎo)航設(shè)計(jì)，而是完全讓你沉浸在使用體驗(yàn)中。你不會(huì)為沒有傳統(tǒng)的導(dǎo)航而感到惋惜，因?yàn)槟阒苯舆M(jìn)入內(nèi)容。
◆多少的探索才算多?
自定義界面讓你可以通過(guò)所謂的分層布局(layered layout)來(lái)做許多很酷的事情，這時(shí)候布局的各個(gè)部分彼此獨(dú)立滾動(dòng)。在一些情況下，只有用戶明白了這幾個(gè)層各自是如何移動(dòng)的，所有內(nèi)容才顯露給用戶。所以，你要回答的問題是：你把多少內(nèi)容交給用戶去探索、去發(fā)現(xiàn)?
在Cool Hunting應(yīng)用程序中，用戶可以通過(guò)單指滑動(dòng)操作，左右滑動(dòng)頂部圖像，那樣可以顯示更多的圖像;如果你不單指滑動(dòng)，不知道原來(lái)還有圖像在那里。至于上下滾動(dòng)的文章區(qū)域，用戶可以通過(guò)單指滑動(dòng)操作，上下滑動(dòng)文本，但頂部圖像未必能夠這樣。
有什么解決辦法嗎?不斷嘗試。你問我花了多長(zhǎng)時(shí)間才摸索出了通過(guò)單指滑動(dòng)操作，左右滑動(dòng)頂部圖像，可以顯示更多圖像?大概嘗試了一分鐘后吧。結(jié)果呢?我實(shí)際上驚喜地發(fā)現(xiàn)這個(gè)看圖功能，并不怪設(shè)計(jì)人員沒有把這個(gè)功能做得明顯些。
多個(gè)瀏覽選項(xiàng)
CNN應(yīng)用程序有一項(xiàng)很酷的特性，那就是能夠按住手指，并滑過(guò)底部的新聞報(bào)道，就可以預(yù)覽新聞報(bào)道標(biāo)題。太棒了!這使用戶不用老是按“返回”鍵，即可瀏覽所有報(bào)道。
2、指示說(shuō)明盡量少些。
從設(shè)計(jì)的角度來(lái)看，iPad酷就酷在你有機(jī)會(huì)成為離經(jīng)叛道的人。用戶們?cè)诤敛华q豫地接受不使用“標(biāo)準(zhǔn)”導(dǎo)航操縱方式的應(yīng)用程序。訣竅在于設(shè)計(jì)出頗有吸引力的用戶體驗(yàn)，又讓用戶可以輕松地操縱應(yīng)用程序。
你在嘗試采用“另類的”布局時(shí)，要考慮的首要方面之一就是：
盡量讓用戶不需要“幫助”。
這就意味著沒有幫助按鈕，沒有問號(hào)，沒有“i”信息按鈕。這一切統(tǒng)統(tǒng)都沒有。一種深思熟慮的設(shè)計(jì)不需要這些多余的信息(很多讀者看到這里可能不同意了)。
稍安毋躁，這并不意味著你不能給予“提示”。提示應(yīng)該是微妙的、與上下文相關(guān)的指點(diǎn);那樣當(dāng)用戶在考慮下一步該怎么做時(shí)，能夠給予一點(diǎn)幫助。
3、要考慮到方向會(huì)改變布局。
將設(shè)計(jì)的應(yīng)用程序從縱向模式轉(zhuǎn)換成橫向模式(或者反過(guò)來(lái))很麻煩。這簡(jiǎn)直好比是設(shè)計(jì)一個(gè)全新的應(yīng)用程序，至少?gòu)牟季值慕嵌葋?lái)看是這樣。這方面要記住的關(guān)鍵一點(diǎn)就是，不要改變用戶體驗(yàn)!
比如說(shuō)，不是許多應(yīng)用程都像Note Taker應(yīng)用程序這樣能夠在這兩種模式之間輕松自如地轉(zhuǎn)換，這個(gè)應(yīng)用程序幾乎做到了精確匹配：
Cool Hunting應(yīng)用程序是一個(gè)更常見的例子，它表明了基于內(nèi)容的應(yīng)用程序如何從網(wǎng)格視圖轉(zhuǎn)變成列表視圖。它并沒有顯著改變用戶與應(yīng)用程序的交互方式：
4、別忘了動(dòng)態(tài)內(nèi)容會(huì)影響設(shè)計(jì)!
在裝入動(dòng)態(tài)內(nèi)容的應(yīng)用程序中，你總是一定要留意每當(dāng)打開應(yīng)用程序時(shí)，動(dòng)態(tài)內(nèi)容可能會(huì)怎樣改變用戶的體驗(yàn)。CNN應(yīng)用程序就是一個(gè)典例，它表明了兩點(diǎn)：
◆凌亂的界面
◆很好的英雄圖像
界面自己是不會(huì)隨機(jī)應(yīng)變的。界面看起來(lái)與新聞報(bào)道一樣混亂，圖像彼此緊挨著，新聞標(biāo)題實(shí)際上很難看到。你在處理動(dòng)態(tài)內(nèi)容裝入時(shí)，要給它一些充分伸展的空間。你從來(lái)不知道界面內(nèi)容每天會(huì)有怎樣的不同，所以應(yīng)該從文案/圖像的角度來(lái)考慮絕對(duì)***值，以便為可能要出現(xiàn)在界面上的任何一種內(nèi)容留出足夠空間。
另外就是英雄圖像。我不確信下面屏幕上的界面是不是純屬巧合，但你的眼睛肯定被紅色的英雄圖像所吸引。第二大關(guān)注的是那位女性的紅色上衣。想一想動(dòng)態(tài)裝入的圖像可能會(huì)引起用戶的眼球出現(xiàn)怎樣的移動(dòng)。
有什么解決辦法嗎?創(chuàng)建吸引注意力的圖形內(nèi)容，覆蓋裝入到應(yīng)用程序中的任何圖像。CNN試圖用“頭條報(bào)道”通欄標(biāo)題來(lái)達(dá)到這種效果，但通欄標(biāo)題彈出來(lái)后還是蓋不住大大的英雄圖像。
5、深入用戶的內(nèi)心。
這對(duì)任何開發(fā)人員、設(shè)計(jì)人員、甚至用戶界面專家來(lái)說(shuō)都是最困難的任務(wù)之一!但是它對(duì)iPad應(yīng)用程序來(lái)說(shuō)又顯得特別重要;因?yàn)閷?duì)iPad應(yīng)用程序而言，用戶界面不是很標(biāo)準(zhǔn)化。預(yù)測(cè)用戶的下一步操作可能困難重重，不過(guò)我倒是有個(gè)訣竅，對(duì)各位讀者可能大有幫助。
我們假設(shè)你設(shè)計(jì)了一款應(yīng)用程序，可以幫助人們找到有猴子的動(dòng)物園。你測(cè)試了用例場(chǎng)景，甚至知道你的目標(biāo)受眾確確實(shí)實(shí)喜愛猴子。下一步就是，根據(jù)這些用戶會(huì)如何與應(yīng)用程序交互、找到喜愛的猴子，繪制場(chǎng)景和線框。
你繪制好了線框，并把線框添加到墻壁上。它看起來(lái)確實(shí)很好。一切都沒問題——你覺得“我完成了!”。下面告訴你這個(gè)寶貴的要點(diǎn)。
兩天內(nèi)不要去碰這個(gè)想法!
說(shuō)真的，不要去碰它，不要去想它，不要通過(guò)郵件來(lái)表述。從你的詞匯表中刪掉“猴子”這個(gè)字眼。OK，這是有那么一點(diǎn)愚;但問題是，除非你有了全新的眼光，否則就無(wú)法深入用戶的內(nèi)心。
而我們根本不會(huì)有什么全新的眼光，但我自己在設(shè)計(jì)應(yīng)用程序時(shí)發(fā)現(xiàn)：如果暫時(shí)放下手頭的設(shè)計(jì)項(xiàng)目，把注意力放到其他事情上，能夠讓我更快地繞過(guò)思路上的障礙，站在用戶的角度來(lái)看待應(yīng)用程序。
【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請(qǐng)注明原文出處、作者及51CTO譯者！】
【編輯推薦】
