移動應用的視覺美學 – 談三款擁有高收入的應用產品
移動應用的視覺美學 – 談三款擁有高收入的應用產品-移動閱讀二維碼

當前,智能手機的占有率仍在以前所未有的速度飆升,移動應用市場也在造就著下一代的“科技百萬富翁”。蘋果的App Store當中的應用數量已經超過68萬個,并且正在以平均每天375個的速度繼續增長著。

市場的巨大是毋庸置疑的,到處都有很棒的機會。不過一個顯而易見的問題在于:成功的移動應用是由什么造就的?

這個問題的答案通常包括創新的概念、才華橫溢的設計、堅實而高效的開發等等。其中,“視覺美學”這個要素通??梢詫卯a品的成功以及品牌的塑造起到巨大的推動作用。在本文中,我們將以App Store當中三款擁有高收入的應用為例,來看看他們在視覺設計方面都有哪些獨到之處。

搗蛋豬(Bad Piggies)

Rovio的這款游戲在進入市場之前就已經注定要取得成功了。作為“憤怒的小鳥”的前傳,同時仰仗著各種媒體的大肆宣傳,搗蛋豬一登場便迅速的飛起來了。

從一些傳聞還有個人的觀察來看,這些小豬甚至比小鳥們更受歡迎。我(英文原文作者)的外甥一直糾纏著要我解釋為什么那些壞小鳥總是想殺掉這些可愛的小豬。

Rovio對這些自然了如指掌。實際上,仔細看看這款游戲,你會發現自己難以在它身上找到太多與“憤怒的小鳥”之間的關聯。

圖標:

啟動畫面:

在這些對品牌有著重要識別作用的圖標和圖片身上,你幾乎看不出這款游戲與憤怒的小鳥之間的關聯。這很明顯的體現出了Rivio對單獨建立Bad Piggies游戲及玩具品牌的意圖與信心。

進入游戲,到處是“豬元素”,尤其是logo里的兩個字母“i”,上面的“點”都被換成了豬鼻子,很搞笑,很討人歡喜,就這樣讓用戶在不知不覺中對“豬”的品牌形象產生了深刻的印象。

游戲界面中滿眼都是綠色,在視覺上與憤鳥那標志性的紅色形成了巨大的差異。對于視覺設計師們來說,這也是基于同一種色相,通過明度和彩度的變化在圖像中打造層次和景深的良好范例。

細節當中的視覺處理方式同樣為用戶帶來了印象深刻的良好體驗。小豬的視線會隨著你的手指而改變方向,還有在滾下斜坡時開心的表情、歡慶勝利時的方式等等。

從Bad Piggies當中學到的

  • 給你的品牌留些喘息的空間;通過獨特而良好的體驗塑造品牌形象。(推薦閱讀:iOS用戶體驗的差異化與策略)
  • 通過明度和彩度的變化在圖像中打造層次和景深。
  • 在游戲中,角色的個性非常重要。細節當中的處理方式可以幫你塑造出非常討人喜歡的形象。Rovio是這方面的一個典范,從憤怒的小鳥,到搗蛋豬,到Amazing Alex,每個角色形象都是相當獨特、容易識別的。
  • 對于以角色為中心的游戲應用,要將角色形象優先放在各種圖形素材當中,包括應用圖標、啟動畫面等。這對于形象的建立及品牌的塑造起著重要的作用。

DMD Panorama

DMD Panorama是一款非常流行的相機應用,它能幫你通過iPhone或iPad輕松拍攝全景照片。這款應用是由黎巴嫩的一家名叫Dermandar的公司打造的,目前已經被下載超過400萬次了。我們一起來仔細看看。

圖標:

圖標在外觀上與多數的相機應用類似,可以說,并沒有對其自身品牌或特色功能起到很突出的介紹與描述作用(例如Rovio那樣在圖標正中放一只搗蛋豬),但它的細節做的確實非常漂亮非常到位,與其他多數同類圖標相比,可以更好的吸引用戶的目光。

確實,對于照片或視頻攝制類的應用來說,約定俗成的做法就是設計一個高分辨率的栩栩如生的相機形象作為應用圖標,這至少是一種比較安全的設計思路。通常,圖標中的相機形象都是人們所熟悉的,甚至是一些比較粗笨或復古的,其目的都是吸引用戶的注意力,盡量多的體現產品功能特征。

DMD Panorama并沒有將太多用于品牌識別的視覺元素融入到應用當中,用戶唯一能見到的就是在啟動畫面當中的一閃而過的公司名稱。在這之后,他們留給用戶的就只有專注而投入的產品功能體驗了。

而且與其他同類應用相比,DMD Panorama給人的感覺確實是極其簡潔的。主界面當中只有少量必要的操作與相關信息。

界面底部只有三個按鈕,包括“相冊”、“攝制”以及最主要的用于啟動攝制功能的“開始”按鈕。

相冊界面當中也只是一些必要的導航及操作項:

值得一提的是,底部標簽欄和頂部的按鈕當中主要采用的仍是iOS原生的圖標。DMD Panorama的設計師們并沒打算重新發明輪子。這些用戶所熟悉的、早已建立起相關行為預期的圖標正是他們所需要的。(推薦閱讀:先了解規則,再尋求創新 – 關于iOS應用界面自定義)

每張照片底部都有一個藍色的工具欄,里面包括照片標題,還有用于分享、添加位置信息、編輯標題的操作。

相冊界面的背景圖案,在明暗漸變以及紋理等方面的處理也很細致到位,看上去就像是真正的相冊那樣。

從DMD Panorama當中學到的

  • 打造精致漂亮的、符合產品類型及定位的圖標。(推薦閱讀:將產品再移動應用市場中推向成功的十點建議)
  • 不要重新發明輪子,使用用戶熟悉的圖標及交互模式,不要為了“定制化”而定制化。
  • 體驗高于品牌。不要讓品牌方面的信息干擾功能及內容。

Maps+

蘋果自家地圖的事就不多說了,搞到Tim Cook也親自出來道歉。很多地圖應用借機跳了出來,希望在用戶尋找蘋果地圖的替代品的時候能夠脫穎而出。

Maps+算是免費地圖應用當中的佼佼者了,它基于Google地圖,同時融入了很多自家的特色。

圖標:

說實話,當我嘗試Maps+的時候,并非在尋找地圖應用,只是它的排名很靠前,而且圖標相當漂亮出彩,讓我一眼就看到了。圖標當中的形象是大家所熟悉的指南針,很準確的表達出了自身功能類型,而且比較獨到的是,Maps+的設計師將指南針造型與代表地標位置的水滴形狀完美的結合了起來。另外,紅色的背景雖然很搶眼,但在這個圖標當中卻又顯得很和諧。非常棒的圖標設計,在我看來。

Maps+也是“最小化設計”的實踐者(推薦閱讀:最小化可用性設計)。沒有過分的品牌宣傳,沒有夸張的啟動畫面,用戶直接被引領到主界面,這里只有地圖以及右下角的小按鈕。

點擊這個按鈕,會彈出一個菜單,里面包括了Maps+提供的各種功能及設置。

在這個菜單中,用戶可以創建提醒、查找路線、標注位置、基于地理位置發推、對應用進行設置等等。每個選項后面的標準“i”按鈕當中包含了關于該選項的說明信息,即使選項自身的圖標及標題其實已經可以準確清晰的描述自身的含義了。

另外值得一提的是,點擊菜單右上角的編輯按鈕,用戶還可以將常用的操作直接拖放到主界面的四個邊角,進一步增強了便捷性。這種基于最小化的理念、同時提供良好擴展性的交互及UI設計思路可以給用戶帶來平滑而具有張力的良好體驗。

15-customize-user-experience-maps-plus-success-mobile-iphone-app-aesthetics-ui-design-grossing.jpg

Maps+的免費版本相當于試用,當功能的使用次數超過了限制之后,應用會彈出提示,提醒用戶通過付費來解鎖限制,但也可以繼續試用。

App Store里的地圖應用有很多,不過像Maps+這樣優秀的卻不大多見。Maps+并沒有為了打造強大的功能而增大界面及體驗的復雜度,他們始終堅持幫助用戶將全部注意力放在地圖上。從UI元素到圖標設計,甚至到付費引導,Maps+從整體上為用戶帶來了精良的產品體驗。

從Maps+當中學到的

  • 少即是多。不是所有的應用都需要視覺效果強烈的圖形方案。有時,讓核心功能直接站出來講話是最好的。
  • 在圖標設計上加大投入力度。
  • 信奉最小化的設計理念。
  • 在適當的情況下,允許用戶根據自己的習慣定制操作和體驗。
  • 優秀的設計是符合直覺的。如果你必須解釋每個按鈕的含義,那么也許需要重新考慮設計方案的合理性了。
  • 優秀的設計本身就是具有粘性的,它可以將不同的界面元素有機的整合起來,為用戶帶來愉悅的滿足感。

總結

打造一款成功的應用需要多方面的努力(推薦閱讀:將產品在移動應用市場中推向成功的十點建議),其中設計工作的重要性是毋庸置疑的??陀^的講,設計優秀的應用總會比功能強大但設計慘烈的產品更讓人喜愛。多觀察那些優秀應用的設計方案,吸收它們身上的精華,改進它們的不足,這是非常有效的實踐方式。

本文鏈接:http://www.casaleticia.com/mobile-application-of-visual-aesthetics.html
本文標簽: , , , , , , , ,