如何設計一枚APP圖示

來源:酷知科普網 1.39W

啟動圖示是每一個iOS中應用軟體的關鍵組成部分。 它能傳達給你應用程式的基礎資訊,並能夠給使用者帶來第一印象感受。 它是一個非常重要的軟體入口,能直接引導使用者下載並使用應用程式。它的重要性在這個智慧手機時代被大家所認知。

有過軟體啟動圖示的設計的設計師,經常會遇到這樣一個問題: 設計出的單枚軟體啟動圖示看起來很炫,但是放到電子市場上後,卻不太受使用者的喜愛,使用者點選率很低。

怎樣從視覺設計的層面,去提升app軟體啟動的圖示點選率呢?
其實,我們在設計軟體啟動圖示的過程中是有一定共性的設計方法的,這些能夠幫助我們提升圖示的點選率。

1. 運用視覺隱喻的同時,需要保證圖示的可識別性

如圖一,這裡很多圖示設計是沒有經過仔細思考而設計運用的。我們通過App商店去查詢,會發現有非常少的app圖示的設計是吸引眼球的。 例如, “繞口令”的搜尋,你會看到這樣的圖示分類:

如何設計一枚APP圖示

圖一的第一行第五個圖示,表現方式是將繞口令的英文文字寫在漸變的圖示背景色塊上,視覺效果表現很平,沒缺乏設計感。
為了吸引使用者去使用app軟體, 我們必須設計出吸引使用者眼球的圖示!
我們可以運用隱喻的設計表現手法,傳達給使用者“繞口令”的資訊,讓使用者看到圖示能夠感知、想象、理解圖示的意思。圖一右側被放大的圖示,在這幾種圖示設計中,比較吸引使用者去使用。它的設計採用的就是隱喻的視覺表現手法,讓使用者理解繞口的含義,再加上有趣的形象設計,讓使用者容易理解圖示的含義,這樣的精緻隱喻的圖示容易在第一時間吸引使用者的眼球,受使用者的喜愛。

如何設計一枚APP圖示 第2張

如圖二,這是星巴克的一款應用程式圖示設計。星巴克的標誌設計是非常好的,但是,星巴克的消費卡的app圖示設計中星巴克的標誌比較小, 在App Store上看這枚圖示設計,圈形的星巴克標誌是難以辨認的。其實設計時,應該放大星巴克的商標,提高標識的可識別。
因此,我們在使用視覺隱喻的手法去表現圖示的同時,需要確保圖示設計的識別性。

2.分析同類app圖示,整理設計思路注重圖示創新

我們在itunes裡搜尋效率軟體會發現很多相似的圖示。如圖三所示,這裡面哪些圖示會吸引使用者的眼球呢?過目之後,我們會發現,那些有層次設計感、和特定質感的精緻圖示會吸引使用者。
設計app圖示的另一種方法是增加圖示的層次感設計和質感表現。設計好圖示後,放在同類別app圖示中,去審視自己設計的圖示是否能夠抓住使用者的眼球。

如何設計一枚APP圖示 第3張

下面是圖三中的幾個能夠第一時間抓住使用者眼球的圖示:

如何設計一枚APP圖示 第4張

2Do -這個圖示就像一堆檔案有序處理的感覺。縫製的皮革質地和潔淨便條形成質感的對比,圖示整體質感表現細膩飽滿。

如何設計一枚APP圖示 第5張

Put Things Off -是一個很好設計。設計者經過仔細的思考,表現方式與眾不同,富有創造性和趣味性。圖示採用檔案箱子和“前進”的箭頭的視覺元素表現,表達事件處理的迅速效率的感覺;色彩上,運用了純度很高的鮮亮的色彩去設計,能夠抓住了使用者的眼球,讓使用者很快的理解了這款軟體的功能特性。

如何設計一枚APP圖示 第6張

Taska -圖示看起來像一堆辦公桌整齊地堆放在一個檔案。 視覺表現上沒有給人留下很深刻的印象,但是這個圖示畫的非常精緻,紙張的堆積效果表現出了圖示的層次感,背景木材紋理的效果表現提升了圖示設計的質感。

3. 運用軟體介面中的圖形元素,體現圖示設計的連續性

有一種設計方法,可以確保圖示的表現和軟體具有連續性。方法是啟動圖示的設計運用和應用程式介面圖形相匹配的設計元素。 Expenditure是一個很好圖示設計例子,非常準確地描述了跟蹤功能的應用程式。

如何設計一枚APP圖示 第7張

4.採用使用者好奇的圖形元素設計,抓住使用者的好奇心

用高雅的輪廓、優美的線條去表現一款瑜伽應用程式圖示。喚起使用者的好奇心,吸引使用者使用。

如何設計一枚APP圖示 第8張

5.突出品牌,抓住使用者眼球

如果你正在設計一個知名品牌的應用程式,請恰當使用它的品牌LOGO! 生活中,這些品牌標誌已經留給使用者很深刻的印象,非常容易從眾多app的圖示中勝出。因此,在設計知名品牌的app啟動圖示時,應該充分使用它的品牌LOGO。
不管你想設計成什麼,不要浪費了一個知名品牌的現有的元素!
例如,瀏覽幾個圖示,是很容易被辨認的:

如何設計一枚APP圖示 第9張

但是,圖示的設計中,如果你沒有突出知名品牌的元素,會是什麼樣子呢?如圖六的圖示設計,在圖七的眾多的app圖示介面中,圖六的這些圖示顯得很無力,無法與其他圖示競爭。

如何設計一枚APP圖示 第10張

如果,調整圖示設計的區域性,改進設計:

如何設計一枚APP圖示 第11張

我們把新的圖示放在介面中,試看效果:

如何設計一枚APP圖示 第12張

通過思考和實驗,調整設計,讓品牌特性抓住使用者的眼球。

6. 裝置測試預覽圖示的效果,微調色彩或亮度達到最佳效果

採用在裝置上測試你的圖示設計,是一個很好的方法。

Photoshop裡檢視或者iphone模擬器裡檢視效果是不夠的。圖示在實際裝置上的視覺效果和電腦上是不同的。 為什麼呢? 有幾個原因:
電腦顯示器的色彩和亮度與觸控式螢幕移動裝置不同。
並非所有的觸控式螢幕顯示器是一樣的。 例如, iPhone螢幕質量高於iPod觸控式螢幕的顯示質量。

因此,裝置測試是很有必要的。

7.多場景測試,保證圖示設計的上線質量。

如何設計一枚APP圖示 第13張

App的商店有:

itunes電腦商店;
iPhone 不同解析度的商店;
itouch 不同解析度的商店;
iPad平板電腦商店。

這意味著圖示的應用環境有多種,因此在圖示上線前,設計師需要在多種圖示的應用場景中進行設計測試。儘可能做到在多種商店場景下,在同類產品的使用者檢視介面,都能吸引使用者的眼球。

以上幾點app軟體圖示設計的方法你在設計時都用到了麼?沒用過的方法可以嘗試使用。
這些共性的圖示設計方法能夠幫助設計師控制圖示設計的效果和市場中的使用者體驗,能真正的從使用者的角度去設計一枚圖示,能提升你的app軟體的使用者體驗,從視覺設計的角度去提升軟體圖示的使用者點選率。

plus
譯文地址:u
熱門標籤