先了解規則,再尋求創新 – 關于iOS應用界面自定義
先了解規則,再尋求創新 – 關于iOS應用界面自定義-移動閱讀二維碼

剛剛在微博中傲嬌的贊許了一下iOS 6當中圖標形式的Action Sheet。我真心不愿意用九宮格這三個字,好傻。地圖用誰家的,能不能用漢語調戲Siri,這類問題我個人來講不是很關注了,沒多大需求;倒是這些交互模式當中的小改變更讓我覺得驚喜。

這些改變體現出的設計原則依然是我們耳熟能詳的那些:針對移動設備特定的使用情境,減少用戶對于文字的閱讀量(文字按鈕的文案)、減小UI元素的排布密集度(文字按鈕縱向排布的方式)、充分利用用戶對常規應用圖標的辨識和記憶能力(郵件 、信息、微博)等等blahblah…iOS Human Interface Guidelines擺在那里,有多少設計師能真正把它吃透呢?不想代表任何人,至少我覺得自己遠遠沒有達到那樣的程度。

Xcode正在更新,不知所謂的“SDKs for OS X 10.8 Moutain Lion and iOS 6”當中是否包含制作新模式Action Sheet的方式,希望可以嘍;就算不會去做iOS 6 only的應用,看到這樣的變化及相應的原生制作方法一點點出現,也是一件非常開心的事。

蠻巧的這個話題與今次選定要做的小譯文契合在了一起,多棒的一天。原文當中的一些鋪墊就不做過來了,大意是作者的一些朋友把iPhone應用設計想的太簡單,把過多的精力放在了業務、市場一類事情上面,卻忽略了設備自身屬性所導致的交互模式方面的一些特定問題,致使產品自身在細節設計當中具有硬傷blahblah…我們跳過前戲吧,想必看過日本動作片的同學是可以理解的。那么大家都可以理解嘍。進入正文。

說實話,iPhone的屏幕尺寸限制為設計師們帶來的問題還是蠻多的,這也是iOS人機界面設計規范(Human Interface Guidelines,HIG)存在的目的之一(相關閱讀:iOS人機界面設計規范縱覽)。很多同學都知道,要使自己的應用產品在市場上脫穎而出,很重要的一點就是個性化的設計模式,包括交互模型及UI視覺風格等(推薦閱讀:iOS交互模型與創新的產品概念)。不過這里面有個很簡單的道理:與藝術創作類似,要做到突破和改變,我們必須首先了解既有規則及局限,在這個基礎上進行再創造。

接下來,我們將對幾個具有“突破”色彩的設計方案進行分析。

點擊(觸擊)區域

HIG中指出,界面當中可點擊元素的最小尺寸為44像素見方。不過要記得“可點擊區域”這個概念,它的大小未必與操作對象的物理尺寸相同,這個區域可以包含操作對象及其周圍的一部分空間。

CNN的應用界面當中有一個很細小的導航條,從視覺呈現的角度來看,其高度只有32像素。雖然看上去有悖于規范,但實際上,它的可點擊區域包含了導航元素下面的一部分空間,以確保用戶可以準確的點擊到這些尺寸很小的分類標題。因此,當內容區當中的文章條目(“One teacher…”)滾動到如下圖所示的位置時,里面所包含的圖片和標題其實是無法被點擊的。這種方式不會帶來問題,因為處于這個位置的內容通常是用戶所略過的,或是即將進入視線的。

而Muslim Pro在這方面的突破就差強人意了。界面中用來調整字號的按鈕明顯很小,大約只有21像素的樣子,而且它并沒有把可點擊區域擴展出去。這就使得用戶必須很精確的操作才能點擊到。在移動應用的典型使用情境中,這并不是很容易做到的;而且過小的按鈕放在右側,更加容易被手指完全遮擋住,致使用戶無法準確定位。

導航

底部標簽欄(Tab Bar)是Apple為應用提供的一種能夠在全局層面上組織子任務、視圖界面或功能模式的導航機制。標簽欄始終固定在界面底部,其中最多包含5個導航元素;當然對于iPad來說這個數字更加靈活一些。

上一個版本的Daily Burn使用了常規的標簽欄作為常用功能的導航,不過在最近的更新中,他們將最重要的四個功能直接列在了主界面當中,而將其他次要功能入口集合到了一個獨立的導航界面中,并使用了唯一一個”More”按鈕替代了原來的標簽欄。用戶點擊這個按鈕之后,導航界面展開。

我個人來講更喜歡新版本中的方式,因為用戶可以在短時間內將注意力集中在首屏里的四個主要功能上。

而Muslim Pro當中的標簽欄高度差不多是標準規格的兩倍,不過當用戶點擊其中的導航元素或是界面主內容區域的時候,它是會自動收起的。誠然,保持標簽欄的持續可見才是比較理想的情況,不過在這種較為特殊的用法當中,收起標簽欄是更加合理的做法,前提是為用戶提供某種清晰易行的展開方法。

這兩個例子當中所用到的方法,其目的都是為了解決過多的導航元素給標準標簽欄帶來的問題。不過坦誠的講,這類做法都像是在為網站當中過于龐大的頂級導航又增加了一層上級結構,而不是從信息結果本身入手進行優化,使內容可以被用戶更加容易的訪問到。這些做法在很多時候是可行的,但未必是最優的方案。

更多關于交互元素尺寸及內容導航方面的討論,可以參考我們之前的文章“又是為了觸屏移動設備而設計”。

模態界面及相關任務

“使模態界面中的任務流程盡量簡短與集約。不要讓用戶在模態界面當中感到像是進入了一個獨立的迷你應用。在模態界面中嵌套樹狀信息結構的時候一定要保持謹慎,因為這很有可能導致用戶迷失方向。如果必須在其中創建次級界面,以呈現下級信息結構或操作任務,那么要確保給用戶提供一條單一的、明晰的路徑,以避免造成循環。

- iOS Human Interface Guidelines – User Experience Guidelines

我們總是傾向于讓模態視圖界面或彈窗承載上太多的選項、設置或功能任務,試圖通過這種方式來降低應用自身的復雜度,簡化導航機制。

來看一個例子。NightStand是一款以音樂作為鈴聲的鬧鐘應用,基本功能還是不錯的,主界面也很簡單直白,但其設置界面(彈出的模態界面)卻相當復雜。我們通過下面的圖例來了解一下將一首歌曲設置為鬧鐘鈴聲所需要的步驟:

即使信息結構和功能確實難以被進一步有效的優化,將這類由如此多的步驟所組成的重要設置操作放到模態界面當中也是有問題的??纯催@樣的流程,幾乎繁瑣到讓人痛苦的地步,更何況這些流程是放在模態界面之中的,用戶很有可能在其中某個環節就失去方向感。

超越標準控件

我們通常能見到兩種“突破”的方式:創建自己的控件,替代Apple提供的標準界面元素;或是以不符合規范的方式使用Apple的原生控件。

CraigsPro是一款以圖文形式瀏覽本地分類信息(Craigslist)的應用,本該是非常有用的一個工具。不過正如我們在上圖當中看到的,這款應用的界面中,幾乎所有的元素看上去都是可點擊的,而且其外觀的自定義程度是很高的;可以說,有些過于高了。Apple在設計規范當中很明確的提出,如果要對標準控件進行自定義,那么你的解決方案必須遵從一定的原則:

如果可能的話,您應該在導航欄,工具欄和標簽欄中使用系統提供的按鈕和圖標。iPhone OS提供了各式各樣的標準按鈕和圖標,用戶看到它們就會聯想到內置應用程序所支持的標準任務和模式。如果您的應用程序支持一些標準功能(比如刷新內容區視圖或刪除一項),或者會顯示不同的數據子集(比如聯系人或書簽),一定要使用系統提供的相應按鈕或圖標來表示它們。

當然,并不是應用程序所執行的每個任務都是一個標準功能。如果您的應用程序支持一些用戶需要頻繁執行的自定義任務,您需要創建自定義的圖標,用于在工具欄或導航欄中代表這些任務。在您為圖標創建美術圖案之前,您需要花些時間想想該圖標應該傳達些什么信息。當您考慮設計的時候,請以這樣的圖標為目標:

  • 簡明扼要。太多的細節會使圖標顯得雜亂或是難以理解。
  • 不會被誤認為是系統提供的圖標。用戶應該能夠一眼就將您的自定義圖標與標準圖標區分開。
  • 易于理解且廣為接受。請盡力創建一個能夠被大多數用戶正確理解,不會令任何用戶反感的符號。

- iPhone人機界面指南 – 創建自定義圖標和圖像

在自定義控件方面做既大膽又成功的應用也有不少,他們會使用到很多定制化的控件與交互模式,但相關的設計原則并沒有悖離Apple在人機界面指南當中提出的基本規則。規則有它存在的道理,基于正確的框架進行的定制化改造才是真正可用可行的。

本文當中提到的這幾點只是整個“自定義”話題當中的一小部分,更多的設計原則和擴展思路還有待我們通過Human Interface Guidelines以及不同的實戰項目加以摸索。最后有幾點小建議與大家分享:

  • 在打破規則尋求創新之前,多花些時間全面深入的學習Apple提供的界面設計指南。
  • 多看看、多用用那些在定制化方面做的非常成功的產品,考慮怎樣在自己的應用中實現最合理的差異化策略(推薦閱讀:iOS用戶體驗的差異化與策略)。
  • 與同行多做交流,看看他們在這方面有怎樣的經驗心得。
  • 在設計階段使用原型做好可用性測試(推薦閱讀:產品早期的原型設計與用戶測試)。
本文鏈接:http://www.casaleticia.com/about-ios-app-interface-custom.html
本文標簽: , , , ,