APP改版筆記:圖形篇

FLY
1 評論 12351 瀏覽 42 收藏 13 分鐘

圖標(biāo)作為頁面中顯示最直接的設(shè)計元素之一,有著非常重要的傳播與提示作用。而圖標(biāo)風(fēng)格的設(shè)計,與產(chǎn)品屬性,設(shè)計理念,頁面風(fēng)格搭配等因素有很大的關(guān)系。

一、圖標(biāo)風(fēng)格

1. 面性圖標(biāo)

APP改版筆記--圖形篇

面性圖標(biāo),常見的樣式有元素輪廓圖形和統(tǒng)一化圖形兩種。 風(fēng)格上有:多色、漸變、不透明度、 微擬物等風(fēng)格。

2. 線性圖標(biāo)

APP改版筆記--圖形篇

線性圖標(biāo),常見的風(fēng)格有:漸變、斷點、粗描邊、雙色、高光、直角、點綴填充等樣式。

3. 線面混合圖標(biāo)

APP改版筆記--圖形篇

線面混合圖標(biāo),樣式更加豐富,細(xì)節(jié)更多。不透明度、漸變、多色、粗描邊等 可組合的形式也更多。

4. 插畫類圖標(biāo)

APP改版筆記--圖形篇

插畫類圖標(biāo)有非常豐富的細(xì)節(jié),復(fù)雜程度很高。但使用局限性也相對高,常用于節(jié)日活動更換圖標(biāo),或特定產(chǎn)品屬性的APP中使用。

可以選擇和搭配的圖標(biāo)種類有很多,但不能盲目使用,并不是圖標(biāo)做的足夠炫就是好的。使用時,要結(jié)合產(chǎn)品屬性,頁面的布局和風(fēng)格,選擇合適的圖標(biāo)。合適的出彩的圖標(biāo)可以在很短的時間吸引住人們的眼球,并且可以增加用戶使用時的舒適度,也有很好的辨識度以及傳播性。相反,不合適的圖標(biāo)在頁面中十分眨眼,影響用戶的體驗。

二、圖標(biāo)制作

圖標(biāo)制作的幾點要素:①形態(tài)、 ②配色、 ③規(guī)范、 ④趣味、 ⑤提示

1. 形態(tài)

以金融產(chǎn)品為例,為了突顯產(chǎn)品安全、效率等屬性,圖標(biāo)風(fēng)格應(yīng)該設(shè)計得穩(wěn)重,大氣、簡潔、精致。一來圖標(biāo)所表達(dá)的內(nèi)容清晰易懂,不需要用戶思考就可以識別;二來消除了新用戶開始使用時的不安情緒。

精致的設(shè)計可以提升整體頁面的品質(zhì),使得產(chǎn)品更加專業(yè)可信。細(xì)節(jié)的優(yōu)化可以使得產(chǎn)品在眾多競品中更加亮眼。當(dāng)設(shè)計精致得當(dāng)?shù)漠a(chǎn)品與設(shè)計粗糙的產(chǎn)品進(jìn)行視覺比對時,用戶的選擇不言自明。

常用的樣式大致分為兩種:純面性或線面結(jié)合。

線性圖標(biāo)標(biāo)簽切換時,由線性轉(zhuǎn)化為面性時變化細(xì)節(jié)更明顯,加上動效效果更豐富。面性圖標(biāo)給人的感覺更加有整體感,更加穩(wěn)重。

APP改版筆記--圖形篇

線性圖標(biāo)

APP改版筆記--圖形篇

面性圖標(biāo)

標(biāo)簽欄設(shè)計當(dāng)中,首頁位置的圖標(biāo)常用的有房屋標(biāo)志,或者是直接使用產(chǎn)品logo的樣式來進(jìn)行設(shè)計。

APP改版筆記--圖形篇

logo直接用作首頁圖標(biāo)

細(xì)節(jié)上,前面已經(jīng)通過分析“產(chǎn)品屬性”、提煉“LOGO特點”等方法得到了延伸圖形。這里的icon也可使用這種方法。

APP改版筆記--圖形篇

土豆視頻and天貓

2. 配色

上一篇中分享了選擇顏色的方法,這個時候便派上了用場。我們在標(biāo)簽欄中可以直接使用品牌主色,未選中的標(biāo)簽圖標(biāo)可以搭配灰色來使用。當(dāng)然,顏色的選擇也與產(chǎn)品屬性以及產(chǎn)品定位相關(guān)。比如:百度外賣首頁的icon,為了突顯科技與品質(zhì),選擇了線性紅黑兩色搭配。

APP改版筆記--圖形篇

鏈家and百度外賣

3. 規(guī)范

統(tǒng)一性,是圖標(biāo)設(shè)計中非常重要的一項內(nèi)容。拿方形、圓形等形狀來說,雖然都是在統(tǒng)一大小的框中進(jìn)行設(shè)計,但從視覺上給人的感覺卻不一樣大,這種情況時有發(fā)生。

APP改版筆記--圖形篇

這時候我們可以用輔助模板來進(jìn)行視覺約束,來輔助我們進(jìn)行設(shè)計。谷歌的material design設(shè)計規(guī)范中就為我們提供了這樣的模板,我們在設(shè)計圖標(biāo)時,在固定的框架內(nèi)制作即可。

APP改版筆記--圖形篇

4. 趣味

ofo、百度外賣、淘寶、優(yōu)酷、京東等APP在節(jié)日或是重要活動發(fā)布時,首頁版式以及重要的icon都進(jìn)行了更換。這不僅僅是為了迎合活動內(nèi)容或是節(jié)日的到來,更主要的是為了增加產(chǎn)品的趣味性,增加用戶粘度,讓用戶覺得產(chǎn)品有趣并且想繼續(xù)使用深挖功能。同時,也緩解了用戶長期使用此產(chǎn)品所產(chǎn)生的審美疲勞。

所以,找準(zhǔn)切入點,在合適的時機適當(dāng)更新頁面版式或icon,會起到不錯的效果,讓用戶眼前一亮。

APP改版筆記--圖形篇

ofo and 百度外賣

5. 提示

現(xiàn)在有越來越的產(chǎn)品都將重要信息或者是迫切需要讓用戶知道的內(nèi)容,做成浮動的氣泡形式,懸浮在標(biāo)簽欄之上?;蚴窃谙?、我的icon上添加“紅點”來進(jìn)行提示。

APP改版筆記--圖形篇

網(wǎng)易云音樂 and 京東金融

這么做的好處是搭配動效可以讓用戶在打開產(chǎn)品時第一時間看到,起到非常醒目的效果。同時,不占用首頁的面積,小巧靈活的解決了“提示”這一問題。

三、細(xì)節(jié)梳理

① 圖標(biāo)制作時,始終保持為矢量圖形,不能轉(zhuǎn)為智能對象或柵格化。

② 圖標(biāo)設(shè)計不能過于復(fù)雜,形狀簡潔易懂就好,適當(dāng)用“減法”。

③ 圖標(biāo)尺寸要為整數(shù),不能有小數(shù)的出現(xiàn)。

④ 圓角大小統(tǒng)一、描邊粗細(xì)統(tǒng)一、變化的角度統(tǒng)一。

⑤ 設(shè)計時要預(yù)留出足夠的可點擊區(qū)域的位置。

⑥ 產(chǎn)品中的icon風(fēng)格不要過多,三種是極限,配色要達(dá)到和諧。

⑦ 制作工具建議使用AI或者sketch,成稿確定后不要忘記將路徑變?yōu)樾螤睢?/p>

⑧ 使用PS或者AI設(shè)計時,可以調(diào)節(jié)網(wǎng)格線間隔方便設(shè)計。

⑨ 常用icon素材網(wǎng)站:https://icons8.com、http://www.iconfont.cn

四、延展圖形

延展圖形的應(yīng)用場景非常廣泛,線上的網(wǎng)站或是APP中的banner素材、icon下拉刷新等細(xì)節(jié),線下的海報易拉寶等都可以用到;延伸圖形并不僅僅是作為素材被使用,更有加強品牌認(rèn)知等功能,潛移默化中加強用戶對品牌的了解。

APP改版筆記--圖形篇

網(wǎng)易考拉

APP改版筆記--圖形篇

菜鳥 and QQ支付

1. 分析產(chǎn)品屬性

在理念和認(rèn)知上尋找品牌、產(chǎn)品的屬性特點。以金融APP為例,提到金融相關(guān)產(chǎn)品我們會想到什么?

結(jié)合上一篇分析出的品牌關(guān)鍵詞可以得出:安全、保險、金錢、供應(yīng)鏈等等。我們可以結(jié)合這些關(guān)鍵點分析出相關(guān)圖形。

(1)安全——盾牌、鎖

APP改版筆記--圖形篇

(2)保險——保險箱——矩形

APP改版筆記--圖形篇

(3)金融——金幣紙幣——矩形、圓形

APP改版筆記--圖形篇

(4)供應(yīng)鏈——融合、連接——鏈條、重疊

APP改版筆記--圖形篇

(5)專業(yè)性——醫(yī)療——六邊形

APP改版筆記--圖形篇

2. 觀察LOGO特點

視覺上觀察分析品牌logo,抓住其每一點細(xì)節(jié)與特點,并將它們作為“元素”提取出來,加以運用,這里以公司目前的主要產(chǎn)品logo為例。

APP改版筆記--圖形篇

3. 組合示例

(1)實物搭配

將選中的圖形,搭配人物或者物品作為展示,觀察哪種圖形更加合適,這種搭配可以運用在banner或線下物料等。

APP改版筆記--圖形篇

(2)帶入場景

將挑選出來的圖形進(jìn)行設(shè)計并帶入場景,去掉樣式重復(fù)、延展性差等圖形,選出最終品牌圖形。這一過程不僅可以找到適合的圖形,也可以根據(jù)設(shè)計的場景海報等作為后面運營設(shè)計方面的風(fēng)格參考,完善情緒板,對后期頁面等整體風(fēng)格有一個預(yù)期走向。

APP改版筆記--圖形篇

APP改版筆記--圖形篇

APP改版筆記--圖形篇

APP改版筆記--圖形篇

APP改版筆記--圖形篇

延展圖形的分析與建立使我們對產(chǎn)品的認(rèn)知更近了一步。同時,新的圖形方案也打開了我們的視野。使我們可以更多的去嘗試不同的風(fēng)格,去尋找更多優(yōu)秀的案例。慢慢的我們會發(fā)現(xiàn),即使是一些簡單的圖形,在正確的運用之后也會起到意想不到的效果。

 

作者:FLYXMF,微信公眾號:Fly Lab

本文由 @FLYXMF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

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

    回復(fù)