iOS 7第三方應(yīng)用重設(shè)計的解決方案及案例參考

0 評論 2163 瀏覽 0 收藏 17 分鐘

乍看上去,“為iOS7重設(shè)計”無非就是新的應(yīng)用圖標、無邊框按鈕、與導(dǎo)航欄配色相匹配的狀態(tài)欄等等。不過如果你再深入挖掘一些,便會發(fā)現(xiàn)很多耀眼的地方都體現(xiàn)著iOS7的三大設(shè)計主題,即“依從、清晰、縱深”。

對于某些應(yīng)用來說,這些改變帶來了設(shè)計上的極大改善,而另外一些則甚至比從前還要糟糕,不僅可用性被破壞,而且品牌識別效應(yīng)也大打折扣。本文會圍繞著iOS7 UI過渡指南當中提出的一些關(guān)鍵性的設(shè)計解決方案,介紹一些比較有代表性的應(yīng)用案例。如果你正計劃著升級自己的產(chǎn)品,或是以iOS7風(fēng)格為準繩從零開始設(shè)計應(yīng)用,那么這些例子可能會幫你更好的起步。

1.全屏布局與半透明UI元素

iOS7允許應(yīng)用界面充分利用“邊到邊”的全屏空間。舉個例子,如果你的應(yīng)用當中會顯示系統(tǒng)狀態(tài)欄,那么在iOS7下,你也許需要讓用戶透過狀態(tài)欄看到它“后面”的模糊化的內(nèi)容。類似的,如果你的應(yīng)用會用到其他一些標準控件,例如導(dǎo)航欄、標簽欄、工具欄、搜索欄、范圍欄(scope bar),那么在iOS7當中,這些控件背后的內(nèi)容都可以模糊的呈現(xiàn)出來。如果你決定充分利用系統(tǒng)新特性來實現(xiàn)這些效果,那么就要確保內(nèi)容視圖的尺寸可以填滿整個屏幕,包括這些控件背后的區(qū)域。更多細節(jié)可以參考iOS7界面設(shè)計規(guī)范當中的Bars一節(jié)。

案例

大量的iOS7應(yīng)用都使用了半透明狀態(tài)欄,能夠以模糊效果呈現(xiàn)底部的內(nèi)容。Twitter的做法則相對保守,他們通過自定義控件的方式制作了狀態(tài)欄和導(dǎo)航欄,使他們的顏色相配,并能呈現(xiàn)半透明效果。而其他一些應(yīng)用,例如Instagram、Foodspotting和The New York Times等則打破了狀態(tài)欄的邊界,通過新的布局方式呈現(xiàn)全出血(full-bleed)效果的照片。

 

The New York Times在狀態(tài)欄和導(dǎo)航欄都使用了毛玻璃效果,并利用全屏空間來展示全出血效果的照片。

Twitter的狀態(tài)欄與導(dǎo)航欄顏色相配,并且都可以呈現(xiàn)半透明效果。

2.層與動效

iOS7 UI過渡指南推薦通過不同的層面來體現(xiàn)內(nèi)容的層次,以增強界面對象之間的關(guān)聯(lián)性。當用戶在不同的層面之間切換時,要為其提供強化的動畫效果來進一步增強內(nèi)容層次與深度的概念。

案例

在iOS7中,層面在很多時候被用來展示那些位于圖片之上的文字,例如Yahoo!新聞中的照片,以及musicXmatch當中專輯的呈現(xiàn)方式。此外,層面還可以用來為用戶提供某些快速訪問的功能,例如iOS7自身的通知中心和控制中心。

 

另外一個例子,Huffington Post應(yīng)用通過一個單獨的層來呈現(xiàn)“全部分類(All Sections)”界面。雖然交互方式?jīng)]什么問題,但以模糊效果從該層面底部透出的照片卻沒有什么實際意義,反而會給用戶造成困惑。

 

關(guān)于動畫過渡效果,你可以在Luvocracy應(yīng)用當中發(fā)現(xiàn)一些很有效的運用方式,例如其左側(cè)導(dǎo)航的模糊放大效果,以及展示產(chǎn)品頁照片時的彈跳效果等。另外,F(xiàn)lipboard在其封面上使用的視差動效也是個不錯的例子。

 

3.負空間(留白)與配色

iOS7界面設(shè)計規(guī)范中的“為iOS7設(shè)計”一節(jié)建議設(shè)計師們移除界面中不必要的裝飾性元素,并充分利用留白:

“留白可以使重要的內(nèi)容及功能更加突出。同時,留白還可以傳達出一種平靜和穩(wěn)定的感覺,使應(yīng)用看上去更加專注和高效。”

此外,他們還建議通過配色來簡化UI:

“一種關(guān)鍵的顏色——例如備忘錄應(yīng)用中的黃色——可以突出重要信息,并巧妙的暗示出元素的可交互性。同時,它也可以為應(yīng)用帶來具有一致性的視覺主題?!?/p>

案例

然而,很多應(yīng)用要么忽視了這條建議,要么執(zhí)行的有些過頭。無論出于怎樣的原因,大量應(yīng)用當中充斥著過多的留白,而顏色卻過于稀疏微弱。這種風(fēng)格對于蘋果來說也許是不錯的,因為它們具有明顯的iOS7風(fēng)格,但對于應(yīng)用本身來說也許會產(chǎn)生負面效應(yīng),因為這種平淡的設(shè)計風(fēng)格可能會稀釋掉產(chǎn)品的品牌識別效應(yīng)。在大量淺色風(fēng)格的應(yīng)用當中,例如Snapguide這樣配色豐富的應(yīng)用也許能給用戶帶來更多驚喜,使其更受歡迎。

 

4.動態(tài)字體

動態(tài)字體可以針對任何字號的文字內(nèi)容自動調(diào)整其字間距和行間距。如果你準備采用動態(tài)字體技術(shù),那么應(yīng)用中的文字內(nèi)容格式會隨著用戶在系統(tǒng)“設(shè)置”當中對字號的調(diào)整而自動響應(yīng)變化。那些以文字閱讀為主的應(yīng)用將會極大的受益于這項技術(shù),例如新聞、文章、郵件、微博等等。對這類應(yīng)用來說,采用動態(tài)字體技術(shù)就意味著用戶無需進行很多設(shè)置便能得到更具一致性的閱讀體驗。

案例

當前,采用動態(tài)字體技術(shù)的應(yīng)用還不是很多。這里有一個很簡單的原因:那些會受益于這項技術(shù)的應(yīng)用當中,多數(shù)已經(jīng)包含了字號調(diào)整方面的功能。不過這類訂制化的解決方案并不理想,因為這意味著用戶需要針對每個不同的應(yīng)用來單獨設(shè)置最合適的字號。

采用了動態(tài)字體技術(shù)的The New York Times應(yīng)用在大字號下的表現(xiàn)。

5.自動布局

正如iOS7開發(fā)文檔中所介紹的,充分利用自動布局技術(shù)的應(yīng)用可以更加輕松的從iOS6過渡到iOS7適配,因為這些技術(shù)可以幫助應(yīng)用自動調(diào)整UI元素的尺寸。如果同時采用自動布局及動態(tài)字體技術(shù),那么應(yīng)用的界面元素也可以隨著字號的變化而響應(yīng)式的調(diào)整,幫你實現(xiàn)諸如用戶在調(diào)小字號之后界面布局自動從一列變?yōu)閮闪械男枨蟆?/p>

案例

當人們采用動態(tài)布局技術(shù)來解決從iOS6向iOS7過渡的問題時,從表面看來似乎難以發(fā)現(xiàn)什么明顯的變化。而另一方面,如果同時使用動態(tài)字體技術(shù),那么變化會更容易被發(fā)現(xiàn)。我的意思是,目前我還沒找到這方面的實際案例;如果你發(fā)現(xiàn)了一些,不妨分享給大家。

6.應(yīng)用圖標和控件圖標

iOS7在應(yīng)用圖標方面有很多變化,詳情可以參考iOS7界面設(shè)計規(guī)范當中的圖標與圖形尺寸一節(jié)。其中,我們可以注意到的變化包括略微增大的圖標尺寸、新的黃金分割率網(wǎng)格、新的配色方案、更加扁平的風(fēng)格、曲線輪廓等等。此外,蘋果建議第三方應(yīng)用的設(shè)計師們重新設(shè)計控件當中的自定義按鈕圖標,使它們看上去更輕量,更貼近iOS7原生風(fēng)格。

案例

幾乎所有的iOS7應(yīng)用都重新設(shè)計了它們的應(yīng)用圖標,因為這一點在iOS7 UI過渡規(guī)范當中是有明確要求的。然而,只有一部分應(yīng)用依照iOS7風(fēng)格重新設(shè)計了它們的按鈕圖標。有些應(yīng)用只是很勉強的做了些改變,特別是那些曾經(jīng)為了突出品牌效應(yīng)而自定義設(shè)計過圖標的應(yīng)用。這里也有一個時間的問題,也許所有的應(yīng)用最終都會在它們看上去開始落伍的時候升級它們的圖標設(shè)計,否則就可能被用戶嘲笑“哦,那個應(yīng)用看上去太iOS6了!”。

Shazam面向iOS7重新設(shè)計了他們的圖標。

Ted應(yīng)用同樣重新設(shè)計了標簽欄上的按鈕圖標。

7.無邊框按鈕

蘋果建議僅在非常必要的時候為按鈕添加邊框或背景。這里的基本原理是,用戶通常都知道在各種控件欄和動作表單、警告框中的元素是可以交互的,因此邊框并不是必需的。而iOS7 UI過渡指南當中也提到一些例外情況,例如內(nèi)置的“時鐘”應(yīng)用當中用來啟動計時的圓形按鈕,或是iTunes當中帶有邊框的“購買”按鈕。

案例

無邊框按鈕已經(jīng)在iOS7應(yīng)用當中被廣泛使用了,因為這個改變的成本及其造成的影響都不大。當用在導(dǎo)航欄當中時,它們是很明顯的可交互元素;然而,當出現(xiàn)在主要文字內(nèi)容附近時,有些無邊框按鈕看上去只是樣式特殊的文字而已。造成這種情況的原因之一,就是對于無邊框按鈕來說,每個應(yīng)用都有自己的“關(guān)鍵色”,例如Foodspotting的綠色,或是Opentable的紅色。

Foodspotting里的一些無邊框按鈕在用戶看來并不具備交互性。

Snapguide應(yīng)用導(dǎo)航欄上的無邊框按鈕。

8.其它視圖和UI控件

iOS7當中包含大量的標準控件升級,例如日期選擇器、添加聯(lián)系人按鈕、詳情展開按鈕、信息按鈕、頁碼控制器、選擇器、進度條、刷新控制器、分段控制器、滑塊、計步器、切換、文本域等。例如動作表單、警告框、模態(tài)視圖一類的臨時性視圖也在視覺呈現(xiàn)方式上發(fā)生了變化。對這些控件進行升級不會對應(yīng)用產(chǎn)生重大的影響,因為它們的基本構(gòu)成方式和交互方式并沒有發(fā)生根本性的變化。更多詳情可以參考iOS7界面設(shè)計規(guī)范當中的Controls一節(jié)。

案例

大量的應(yīng)用都開始使用iOS7風(fēng)格的新標準控件,因為這類升級是完全“免費”的,無需代碼方面的變動。這其中有一點值得提及,就是標準的切換控件在激活狀態(tài)時的顏色是可以自定義的。雖然看上去沒太大所謂,但這點細節(jié)可以使你的應(yīng)用界面看上去更具一致性。另外一點受歡迎的變化就是新的列表結(jié)構(gòu),它可以延伸到界面邊緣,給用戶帶來更多的可點擊空間。

Foodspotting當中的切換控件在激活狀態(tài)時為綠色。

9.手勢

在iOS7里,用戶可以從界面底部向上滑動,來展開控制中心。類似的,如果用戶希望訪問通知中心,他們可以從界面頂端向下滑動。那些使用了類似手勢命令的應(yīng)用可能需要重新考慮相關(guān)功能的觸發(fā)方式,以避免和這些系統(tǒng)手勢產(chǎn)生沖突。

案例

不幸的是,即使在手勢操作上與iOS7沒有明顯的沖突,應(yīng)用也有可能受到這些系統(tǒng)級手勢的影響。例如在The New York Times當中,用戶在向上滾屏瀏覽內(nèi)容時有可能不小心觸發(fā)控制中心的展開。而有些應(yīng)用改變了它們從前的導(dǎo)航風(fēng)格,以避免與系統(tǒng)手勢產(chǎn)生沖突。舉個例子,新版本的Facebook應(yīng)用在主屏使用標簽欄作為導(dǎo)航,很可能是為了避免與系統(tǒng)級的右滑回退手勢產(chǎn)生沖突?雖然蘋果在手勢操作方面的改變是值得贊賞的,但實現(xiàn)方式上也有一定的弊端。

 

Facebook重回標簽欄導(dǎo)航的時代。

10.系統(tǒng)改進

除了以上所說的這些在應(yīng)用內(nèi)部可能產(chǎn)生的改變以外,系統(tǒng)級的變化也可能影響第三方應(yīng)用,這當中值得注意的一點就是包含了Airdrop功能的分享表單(Share Sheet),以及多任務(wù)機制。如果你的應(yīng)用已經(jīng)整合了系統(tǒng)原生的分享表單,那么在iOS7當中它們會自動更新到新的版本。同樣,曾經(jīng)僅限于內(nèi)置應(yīng)用的多任務(wù)功能現(xiàn)在有了更廣泛的運用范圍,這也意味著內(nèi)容的下載和更新可以在后臺自動執(zhí)行了。

案例

我們已經(jīng)可以在很多應(yīng)用當中看到包含了Airdrop功能的分享表單了,不過更多的應(yīng)用仍在使用舊版的動作表單,或是自定義的解決方案。你不能指責(zé)他們,畢竟新的分享表單在實現(xiàn)方式上還是有一定復(fù)雜度的。

對于多任務(wù)來說,當前有很多新聞或照片媒體類的應(yīng)用都已經(jīng)開始使用這方面的功能來實現(xiàn)后臺的上傳或下載。幸運的是,如果相關(guān)功能產(chǎn)生了性能方面的問題,用戶可以在系統(tǒng)的“設(shè)置”當中手動關(guān)閉多任務(wù)功能,不過我懷疑有多少人有能力準確的發(fā)現(xiàn)這方面的問題。

The New York Times使用了新的分享表單,包括Airdrop功能。

來源:CocoaChina

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!