iOS7協力廠商應用重設計的解決方案及案例參考

乍看上去,「為iOS7重設計」無非就是新的應用圖示、無邊框按鈕、與巡覽列配色相匹配的狀態列等等。不過如果你再深入挖掘一些,便會發現很多耀眼的地方都體現著iOS7的三大設計主題,即「依從、清晰、縱深」。

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

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

iOS7允許應用介面充分利用「邊到邊」的全屏空間。舉個例子,如果你的應用當中會顯示系統狀態列,那麼在iOS7下,你也許需要讓使用者透過狀態列看到它「後面」的模糊化的內容。類似的,如果你的應用會用到其他一些標準控制項,例如巡覽列、標籤欄、工具列、搜索欄、範圍欄(scope bar),那麼在iOS7當中,這些控制項背後的內容都可以模糊的呈現出來。如果你決定充分利用系統新特性來實現這些效果,那麼就要確保內容視圖的尺寸可以填滿整個螢幕,包括這些控制項背後的區域。更多細節可以參考iOS7介面設計規範當中的Bars一節。

案例
大量的iOS7應用都使用了半透明狀態列,能夠以模糊效果呈現底部的內容。Twitter的做法則相對保守,他們通過自訂控制項的方式製作了狀態列和巡覽列,使他們的顏色相配,並能呈現半透明效果。而其他一些應用,例如Instagram、Foodspotting和The New York Times等則打破了狀態列的邊界,通過新的佈局方式呈現全出血(full-bleed)效果的照片。

The New York Times在狀態列和巡覽列都使用了毛玻璃效果,並利用全屏空間來展示全出血效果的照片。



Twitter的狀態列與巡覽列顏色相配,並且都可以呈現半透明效果。

2.層與動效

iOS7 UI過渡指南推薦通過不同的層面來體現內容的層次,以增強介面物件之間的關聯性。當使用者在不同的層面之間切換時,要為其提供強化的動畫效果來進一步增強內容層次與深度的概念。

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

另外一個例子,Huffington Post應用通過一個單獨的層來呈現「全部分類(All Sections)」介面。雖然對話模式沒什麼問題,但以模糊效果從該層面底部透出的照片卻沒有什麼實際意義,反而會給使用者造成困惑。

關於動畫過渡效果,你可以在Luvocracy應用當中發現一些很有效的運用方式,例如其左側導航的模糊放大效果,以及展示產品頁照片時的彈跳效果等。另外,Flipboard在其封面上使用的視差動效也是個不錯的例子。

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

iOS7介面設計規範中的「為iOS7設計」一節建議設計師們移除介面中不必要的裝飾性元素,並充分利用留白:

「留白可以使重要的內容及功能更加突出。同時,留白還可以傳達出一種平靜和穩定的感覺,使應用看上去更加專注和高效。」

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

「一種關鍵的顏色——例如備忘錄應用中的黃色——可以突出重要資訊,並巧妙的暗示出元素的可交互性。同時,它也可以為應用帶來具有一致性的視覺主題。」

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

4.動態字體

動態字體可以針對任何字型大小的文字內容自動調整其字間距和行間距。如果你準備採用動態字體技術,那麼應用中的文字內容格式會隨著使用者在系統「設置」當中對字型大小的調整而自動回應變化。那些以文字閱讀為主的應用將會極大的受益于這項技術,例如新聞、文章、郵件、微博等等。對這類應用來說,採用動態字體技術就意味著使用者無需進行很多設置便能得到更具一致性的閱讀體驗。

案例
當前,採用動態字體技術的應用還不是很多。這裡有一個很簡單的原因:那些會受益于這項技術的應用當中,多數已經包含了字型大小調整方面的功能。不過這類訂制化的解決方案並不理想,因為這意味著使用者需要針對每個不同的應用來單獨設置最合適的字型大小。

採用了動態字體技術的The New York Times應用在大字型大小下的表現。

5.自動佈局</strong>

正如iOS7開發文檔中所介紹的,充分利用自動佈局技術的應用可以更加輕鬆的從iOS6過渡到iOS7適配,因為這些技術可以説明應用自動調整UI元素的尺寸。如果同時採用自動佈局及動態字體技術,那麼應用的介面元素也可以隨著字型大小的變化而回應式的調整,幫你實現諸如使用者在調小字型大小之後介面佈局自動從一列變為兩列的需求。

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

6.應用圖示和控制項圖示

iOS7在應用圖示方面有很多變化,詳情可以參考iOS7介面設計規範當中的圖示與圖形尺寸一節。其中,我們可以注意到的變化包括略微增大的圖示尺寸、新的黃金分割率網格、新的色彩配置、更加扁平的風格、曲線輪廓等等。此外,蘋果建議協力廠商應用的設計師們重新設計控制項當中的自訂按鈕圖示,使它們看上去更輕量,更貼近iOS7原生風格。

案例
幾乎所有的iOS7應用都重新設計了它們的應用圖示,因為這一點在iOS7 UI過渡規範當中是有明確要求的。然而,只有一部分應用依照iOS7風格重新設計了它們的按鈕圖示。有些應用只是很勉強的做了些改變,特別是那些曾經為了突出品牌效應而自訂設計過圖示的應用。這裡也有一個時間的問題,也許所有的應用最終都會在它們看上去開始落伍的時候升級它們的圖示設計,否則就可能被使用者嘲笑「哦,那個應用看上去太iOS6了!”。

Shazam面向iOS7重新設計了他們的圖示。

Ted應用同樣重新設計了標籤欄上的按鈕圖示。

7.無邊框按鈕

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

案例
無邊框按鈕已經在iOS7應用當中被廣泛使用了,因為這個改變的成本及其造成的影響都不大。當用在巡覽列當中時,它們是很明顯的可交互元素;然而,當出現在主要文字內容附近時,有些無邊框按鈕看上去只是樣式特殊的文字而已。造成這種情況的原因之一,就是對於無邊框按鈕來說,每個應用都有自己的「關鍵色」,例如Foodspotting的綠色,或是Opentable的紅色。

Foodspotting裡的一些無邊框按鈕在使用者看來並不具備交互性。

Snapguide應用巡覽列上的無邊框按鈕。

8.其它視圖和UI控制項

iOS7當中包含大量的標準控制項升級,例如日期選擇器、添加連絡人按鈕、詳情展開按鈕、資訊按鈕、頁碼控制器、選擇器、進度條、刷新控制器、分段控制器、滑塊、計步器、切換、文本域等。例如動作表單、警告框、模態視圖一類的臨時性視圖也在視覺呈現方式上發生了變化。對這些控制項進行升級不會對應用產生重大的影響,因為它們的基本構成方式和對話模式並沒有發生根本性的變化。更多詳情可以參考iOS7介面設計規範當中的Controls一節。

案例
大量的應用都開始使用iOS7風格的新標準控制項,因為這類升級是完全「免費」的,無需代碼方面的變動。這其中有一點值得提及,就是標準的切換控制項在啟動狀態時的顏色是可以自訂的。雖然看上去沒太大所謂,但這點細節可以使你的應用介面看上去更具一致性。另外一點受歡迎的變化就是新的清單結構,它可以延伸到介面邊緣,給使用者帶來更多的可點擊空間。

Luvocracy的註冊介面使用了新的iOS7清單控制項。

Luvocracy將切換控制項的啟動狀態定制為紅色。

Foodspotting當中的切換控制項在啟動狀態時為綠色。

9.手勢

在iOS7裡,使用者可以從介面底部向上滑動,來展開控制中心。類似的,如果使用者希望訪問通知中心,他們可以從介面頂端向下滑動。那些使用了類似手勢命令的應用可能需要重新考慮相關功能的觸發方式,以避免和這些系統手勢產生衝突。

案例

不幸的是,即使在手勢操作上與iOS7沒有明顯的衝突,應用也有可能受到這些系統級手勢的影響。例如在The New York Times當中,使用者在向上滾屏流覽內容時有可能不小心觸發控制中心的展開。而有些應用改變了它們從前的導航風格,以避免與系統手勢產生衝突。舉個例子,新版本的Facebook應用在主屏使用標籤欄作為導航,很可能是為了避免與系統級的右滑回退手勢產生衝突?雖然蘋果在手勢操作方面的改變是值得讚賞的,但實現方式上也有一定的弊端。

 

 

Facebook重回標籤欄導航的時代。

10.系統改進

除了以上所說的這些在應用內部可能產生的改變以外,系統級的變化也可能影響協力廠商應用,這當中值得注意的一點就是包含了Airdrop功能的分享表單(Share Sheet),以及多工機制。如果你的應用已經整合了系統原生的分享表單,那麼在iOS7當中它們會自動更新到新的版本。同樣,曾經僅限於內置應用的多工功能現在有了更廣泛的運用範圍,這也意味著內容的下載和更新可以在後臺自動執行了。

案例
我們已經可以在很多應用當中看到包含了Airdrop功能的分享表單了,不過更多的應用仍在使用舊版的動作表單,或是自訂的解決方案。你不能指責他們,畢竟新的分享表單在實現方式上還是有一定複雜度的。

對於多工來說,當前有很多新聞或照片媒體類的應用都已經開始使用這方面的功能來實現後臺的上傳或下載。幸運的是,如果相關功能產生了性能方面的問題,使用者可以在系統的「設置」當中手動關閉多工功能,不過我懷疑有多少人有能力準確的發現這方面的問題。

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

Albumatic仍在使用簡單的動作表單。

來源:HTTP://beforweb.com/node/257

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.