首頁

一些視覺知識(shí)點(diǎn)

純純

視覺空間、字體性格、顏色情緒三個(gè)大方面來談一下我對(duì)視覺知識(shí)的部分理解!目錄如下


1. 視覺空間

1.1 什么是空間感

空間感:空間感( sense of space)是指藝術(shù)形象通過一定手法引起的類似現(xiàn)實(shí)空間的審美感受。藝術(shù)家通過特定的瞬間造型和空間深度的追求,使人聯(lián)想到其活動(dòng)、生活的環(huán)境空間。在繪畫、攝攝影藝術(shù)中,形象存在于二維平面中,但通過構(gòu)圖、透視、線條走向、光影和色彩處理,使人感受到空間的整體性、立體性。

而在我理解總結(jié),空間感其實(shí)就是運(yùn)用各種手法,打造出畫面的空間縱深感,讓二維的畫面變成三維,從而提升畫面的品質(zhì)、細(xì)節(jié)、沖擊力。

1.2 空間感的優(yōu)點(diǎn)

我們以人物海報(bào)為例對(duì)比幾張圖,直觀感受一下:

無空間感:



有空間感:

我們直觀的可以看到,都是人物海報(bào),下面的兩張明顯更有品質(zhì)感。有空間感的圖,畫面會(huì)更高級(jí)。

那是因?yàn)榭臻g感會(huì)讓你的畫面更有層次,更靈動(dòng)和富有場景感。這就是空間感的有點(diǎn)。

1.3 如何打造空間感

空間感,其實(shí)就是打造畫面縱深,讓元素之間形成前后關(guān)系,那有哪些方法來打造畫面縱深呢?我們總結(jié)了5個(gè)方法來分享給大家:

1.3.1 構(gòu)圖

富有極強(qiáng)透視線的構(gòu)圖能很直觀地表現(xiàn)出空間感。

比如




這類

這類擁有很強(qiáng)透視的構(gòu)圖,不用做別的,光構(gòu)圖就能體現(xiàn)出很強(qiáng)的空間感了。

實(shí)際運(yùn)用中,我們還可以利用標(biāo)題文案排列出這種透視構(gòu)圖來打造空間感:


1.3.2 虛實(shí)

虛實(shí)分為:

1.輪廓虛實(shí)

2.顏色虛實(shí)

輪廓虛實(shí):兩個(gè)相同的元素,輪廓模糊的在空間上會(huì)感覺處于輪廓實(shí)的元素后方。



這是兩個(gè)元素,放到一起就會(huì)感覺上是在同一個(gè)平面上的。沒有虛實(shí)關(guān)系。

如果把其中一個(gè)圓的輪廓虛化:



是不是就會(huì)感覺出右邊的會(huì)在左邊的前面,拉出了前后的空間感。這就是我們的輪廓虛實(shí)了。

顏色虛實(shí):越貼近背景色的顏色,在空間上會(huì)感覺處于后方。



還是這兩個(gè)元素,如果把其中的一個(gè)顏色調(diào)成和背景貼近:



兩相比較,顏色更實(shí)的飛碟,會(huì)處于顏色較淺的飛碟前面。

1.3.3 大小

越大元素會(huì)感覺越近,越小的元素感覺越遠(yuǎn)。

在實(shí)際操作中我們一般可以利用不同元素來制作這個(gè)效果。

比如這是一堆元素,如果大小都差不多,就會(huì)感覺是平鋪在一起的,沒有空間關(guān)系。



如果調(diào)整它們的大小, 重新擺放,通過近大遠(yuǎn)小的原理,就可以很輕易地打造出元素之間的前后關(guān)系,從而營造出空間感了。



大小對(duì)比空間再其他畫面中的應(yīng)用:



1.3.4 明暗對(duì)比

除了虛實(shí)、大小之外,明暗也能對(duì)比出前后關(guān)系,從而營造空間感。



通過紋理層次的明暗對(duì)比,一明一暗的對(duì)比,也能拉出前后關(guān)系。從而營造空間感。



1.3.5 穿插

利用元素相互穿插產(chǎn)生的前后關(guān)系,也能營造出空間感。

這是1個(gè)元素和兩個(gè)圓的平鋪,沒有交集。



如果我給他們穿插重疊在一起:



那就能產(chǎn)生元素之后的疊壓前后關(guān)系,從而也能營造空間感。

利用在海報(bào)中:



以上這五種方式就是我們今天分享給大家的方法啦,

在視覺海報(bào)的打造中,基本都不是只靠其中一種方法去打造空間感,而是3種,甚至5種一起運(yùn)用,可以讓塑造的空間感的更有層次細(xì)節(jié)和沖擊力。

比如:輪廓虛實(shí)+顏色虛實(shí)+大小,或者:穿插+大小+明暗。

大家一定要靈活運(yùn)用,自由組合,以畫面最優(yōu)效果為目標(biāo)去做,不要局限在某一個(gè)框架里。

2. 字體性格

2.1 什么是字體的性格

字體也有字體的性格,不同的字體會(huì)呈現(xiàn)出不同的字體性格特征,比如高矮胖瘦、敏捷、邪惡、可愛、優(yōu)雅文藝等等等等。通過精準(zhǔn)地對(duì)字體的結(jié)構(gòu),筆畫粗細(xì),細(xì)節(jié)調(diào)整,字體效果等的處理表現(xiàn)字體的差異化,使字體的性格調(diào)性,與畫面內(nèi)容相匹配。

2.2 性格有哪些

2.2.1 力量感、沉穩(wěn)

特點(diǎn):橫細(xì)豎粗/留白少/重心偏下/轉(zhuǎn)折筆直



2.2.2 可愛

特點(diǎn):圓潤/不規(guī)則/擴(kuò)張



2.2.3 優(yōu)雅

弧度/纖細(xì)/重心偏高



2.2.4 活力

特點(diǎn):傾斜/筆畫延伸/筆畫干脆,轉(zhuǎn)折彎曲很少


2.3 字體設(shè)計(jì)實(shí)操

字體還有各種各樣的性格,比如魔幻、哥特、血腥、恐怖等等。

我們?cè)谧鲰?xiàng)目的時(shí)候,字體的感覺就一定要抓得準(zhǔn),符合整個(gè)畫面的調(diào)性:

比如這種歐式哥特的畫風(fēng), 字體就可以加一下哥特元素,點(diǎn)綴點(diǎn)玫瑰、藤條。



剛硬科技的畫風(fēng),字體筆畫就可以粗一些,添加點(diǎn)科技感和幾何圖形,營造超前科技的感覺:



植物自然的風(fēng)格筆畫就可以柔和一些,帶有弧度,把一些畫面元素圖形化點(diǎn)綴在上面:


2.3.1 字型特點(diǎn)的提取

具體實(shí)操怎么做的呢?我們今天就給大家分享一個(gè)案例,看看是怎么操作的:

這是一張視覺,我們要給他做一個(gè)主標(biāo)題,這個(gè)主標(biāo)題的字型特點(diǎn)應(yīng)該如何從圖里提取呢?


我們要提煉出三個(gè)點(diǎn)出來才能知道如何去做:


1.風(fēng)格

我們先分析這張圖,它的一個(gè)風(fēng)格是有點(diǎn)魔幻+復(fù)古,神話傳說加西域古代的一種史詩感。

我們可以找一些神話類史詩的類似的參考看看:



特征:

1.復(fù)古

2.重心高.

3.不用那么特別復(fù)古可用襯線體變形

2.特征

這個(gè)我們可以從人物身上去提取,人物有盔甲,我們可以把盔甲的特征提取出來:



3.配色

顏色也不是亂選的,一定要和圖能呼應(yīng)關(guān)聯(lián)起來,那顏色怎么選呢?其實(shí)畫面里已經(jīng)幫我們選好了配色。我們觀察一下畫面:



整體偏冷調(diào),墨綠色居多。,對(duì)比色有紅色和黃色。

那我們?yōu)榱送怀鲎煮w,又能和畫面呼應(yīng),那黃色就是再好不過的選擇了。

那到這我們的設(shè)計(jì)目標(biāo)就比較明確了:


2.3.2 字型設(shè)計(jì)

1.基礎(chǔ)字型:

雖然是往復(fù)古了去做,但也不是真做成甲骨文,還是結(jié)合一下使用場景,和識(shí)別度。參考中也有部分是使用宋體去變形的,所以我們可以先選一個(gè)宋體的字體出來當(dāng)做基礎(chǔ)字型。


為了保證識(shí)別度,我們可以只做部分復(fù)古。

這里我挑靈下面“火”字,因?yàn)檫@個(gè)字處在中間,比較顯目。



2.調(diào)整重心

參考復(fù)古類型的字體重心都會(huì)往上偏移,讓字體稍顯長一些。



3.加入特征

(1)鋒銳:默認(rèn)字體上有很多圓潤的地方,我們都改成尖銳的感覺。



把每一個(gè)筆畫都改掉:



(2)彎曲的尖角:

圖形提煉:


加入到字體當(dāng)中:



字型到這里就完成啦。

(3)字體轉(zhuǎn)折的厚度:

字型完成了,字體轉(zhuǎn)折的厚度我可以再字體效果上去做。在筆畫中間加一個(gè)層次,以明暗分隔開,以實(shí)現(xiàn)盔甲上這種轉(zhuǎn)折的厚度:



全部加上,看下完成效果:



結(jié)合到畫面中看下:


效果還是很不錯(cuò)的,整體風(fēng)格也比較統(tǒng)一。

這一塊就是關(guān)于字體性格的內(nèi)容,我們繼續(xù)往下看!

3. 顏色情緒

接下來我們來說下關(guān)于顏色情緒的問題!

配色感覺不對(duì)?顏色臟?配色不高級(jí)?

這些問題一直困擾著我們。應(yīng)該怎么配色呢?其實(shí)顏色也是有規(guī)律可循的,這篇文章就是帶給大家一些顏色方面的啟發(fā),讓你了解配色的底層邏輯,從而更明確快捷地配出想要的顏色。


3.1 飽和度到底在傳遞給我們一些什么

認(rèn)識(shí)色彩飽和度的情緒:

因?yàn)椴煌呐渖珪?huì)帶給觀者不同的情緒感受,只有在先了解不同顏色特性的基礎(chǔ)上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺,這種感覺對(duì)應(yīng)什么顏色?

只有搞懂了邏輯,在之后的工作中,才能為我們的配色方案指明方向,而不會(huì)一開始就被難住。

如果我想配一個(gè)積極熱鬧活潑的畫面,顏色怎么配呢? 如果想配一個(gè)溫柔恬靜小清新的畫面顏色又該如何選擇呢?他們都有什么特點(diǎn),為什么會(huì)這樣?往下看

3.1.1 積極活力

我們先來看幾組圖片



用吸管工具提取一下它們的顏色觀察

我們可以看到這類海報(bào)視覺上都能給人一種熱鬧、動(dòng)感、活力的feel。

通過顏色提取,再觀察它們選色的位置,可以發(fā)現(xiàn)它們的的配色的純度和飽和度都非常高。

這是為什么呢?接下來我們降低飽和度看看會(huì)發(fā)生什么:



可以很明顯的感受到畫面中已經(jīng)失去了那種動(dòng)感、熱鬧和活力的感覺了,整體更趨于平穩(wěn)和安靜。

所以,高飽和度的配色會(huì)帶給觀者活力,動(dòng)感,熱鬧的情緒。常常應(yīng)用于一些電商、運(yùn)動(dòng)品牌的視覺項(xiàng)目中,用來渲染or打造年輕、活力、熱鬧、動(dòng)感等氛圍。

3.1.2 溫柔平靜

我們?cè)賮砜匆唤M:


這一類圖片就會(huì)給人一種文藝小清新的feel,這類配色和熱鬧、運(yùn)動(dòng)的感覺完全不同。

都是低飽和度高明度的顏色。所以,低飽和度的顏色會(huì)給人傳達(dá)平和、放松、舒適的心情。

3.1.3 輕松休閑


這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性,不過高,也不會(huì)過低。

其實(shí)原理就是在取色器里,



我們看同一張圖片,給我們的感覺:


高飽和度配色給人感覺沖擊力很強(qiáng),具有活力,對(duì)比非常強(qiáng)烈。

中飽和度畫面就弱了一級(jí),視覺沖擊力沒那么強(qiáng)。畫面會(huì)放松一些,適合傳遞休閑的感覺。

使用低飽和度的顏色時(shí),我們看到畫面更冷靜了,有些高級(jí)灰的感覺。

在以往的實(shí)際工作當(dāng)中,我也是先用飽和度來定畫面的大情緒基調(diào),只有大的感覺對(duì)了,后面才不會(huì)出大問題。比如像一些戰(zhàn)斗、pk、熱血類的banner,都用高飽和顏色:


我們可以來吸取他們的顏色看看:



基本都是靠右邊的顏色。

而像我在做下面這種類型的banner時(shí),就會(huì)使用到中飽和度的顏色,給人一種輕松休閑的感覺:



我們?cè)倏聪滤麄兊纳颍?



都是趨于中間的位置。

最后一種低飽和的顏色,像下面這種作品,就有一種文藝、清新的感覺:


再來看看他們的顏色色域



都是比較靠左的顏色。

用飽和度來定畫面的大基調(diào),還是非常好用的,可以說是屢試不爽,大家可以好好理解并且用起來!

總結(jié):



高純度,高飽和度的顏色,會(huì)讓人感覺激動(dòng)、積極、動(dòng)感、醒目、記憶深刻等特點(diǎn)感官,常常應(yīng)用于一些電商、運(yùn)動(dòng)品牌的視覺項(xiàng)目中,用來襯托年輕、活力、熱鬧、動(dòng)感等氛圍。



中飽和度的顏色飽和度和純度都適中,顯得中正平和,又不會(huì)有低飽和度那樣的“平緩“,想要視覺年輕一些,但又不想飽和度那么的強(qiáng)烈,可以嘗試選擇中度的顏色。


低飽和度的顏色,會(huì)給人平和,舒適的感受,常常會(huì)結(jié)合大量無彩色一起使用,讓畫面?zhèn)鬟f出簡約,自然,小清新文藝的感覺。


   

作者:菜心工作室      來源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

排版中的對(duì)比與對(duì)齊

純純

01. 對(duì)比原則

在版式設(shè)計(jì)中對(duì)比其實(shí)就是差異化。若兩個(gè)元素有所不同,那就讓他們截然不同,不要拖泥帶水。

比如我用兩個(gè)圓表達(dá)大小對(duì)比,那么下圖則是拖泥帶水的反面教材。



因?yàn)榇藞D中的大小對(duì)比并不明顯,看不出要強(qiáng)調(diào)哪個(gè)圓形,主次不明,對(duì)比含糊不清。



對(duì)比上圖,此圖大小對(duì)比明顯,更能夠有效的傳遞出重要信息,所以要用對(duì)比的話,就讓元素差異化強(qiáng)烈一些。



對(duì)比的分類


對(duì)比的分類有很多種,比如:


除了這些還有字體類型的對(duì)比、距離對(duì)比、虛實(shí)對(duì)比、遠(yuǎn)近對(duì)比等,可以說存在差異的地方就存在對(duì)比。而在版式設(shè)計(jì)上,我們要將這種對(duì)比最大化,以達(dá)到吸引眼球、方便閱讀的效果。



對(duì)比的作用


對(duì)比能簡化畫面,使版面主題更明確,更直觀。


運(yùn)用對(duì)比能使視覺沖擊力更大,更抓人眼球。


對(duì)比使版面層級(jí)清晰,能夠突出重點(diǎn),從而更有效的傳達(dá)信息。



對(duì)比的應(yīng)用


通常一個(gè)作品中不會(huì)只用一種對(duì)比,而是多種對(duì)比方式組合使用的。比如上面左圖用強(qiáng)烈的大小對(duì)比出標(biāo)題與正文的層級(jí),同時(shí)加入光影對(duì)比為主體打造立體感,更抓人眼球。右圖使用方向?qū)Ρ扰c位置對(duì)比使版面更活躍,更有視覺張力。



幾乎所有的作品都會(huì)用到對(duì)比原則,在設(shè)計(jì)中我們也要善用對(duì)比原則。



2. 對(duì)齊原則

對(duì)齊原則是讓版面中的元素有一種視覺上的聯(lián)系,以此來打造一種秩序感。



此版面中沒有運(yùn)用對(duì)齊原則,各元素間沒有聯(lián)系,凌亂而沒有秩序感。




使用了對(duì)齊原則之后,整個(gè)版面規(guī)整又美觀,建立了一種秩序感而更利于閱讀。



對(duì)齊的分類


左對(duì)齊:版面中的元素以左為基準(zhǔn)對(duì)齊。左對(duì)齊是最常見的對(duì)齊方式,簡潔大方,利于閱讀。



右對(duì)齊:版面中的元素以右為基準(zhǔn)對(duì)齊。相對(duì)于左對(duì)齊來說不太常見,給人一種人為干預(yù)的感覺,閱讀比率慢一些。



居中對(duì)齊:版面中的元素以中線為基準(zhǔn)對(duì)齊。居中對(duì)齊給人一種嚴(yán)肅與正式感。



兩端對(duì)齊:版面中的元素拉伸或縮放與同一元素兩端對(duì)齊。兩端對(duì)齊通常用于大段落文字編排中,利于閱讀。



頂對(duì)齊:與左對(duì)齊相似,版面中的元素以頂部為基準(zhǔn)對(duì)齊。



底對(duì)齊:版面中的元素以底部為基準(zhǔn)對(duì)齊。



軸線對(duì)齊:軸線對(duì)齊是以版面中心線為對(duì)齊基準(zhǔn),而不是元素的中線。


除了上圖的案例為軸線對(duì)齊外,下圖的這幾種也都是軸線對(duì)齊的形式。



軸線對(duì)齊能給人正式感,同時(shí)各個(gè)部分又富有變化,比較靈活。


對(duì)齊的作用


對(duì)齊的作用總結(jié)下來其實(shí)只有一點(diǎn),就是能夠使版面統(tǒng)一簡潔更有條理,能夠引導(dǎo)視覺流向。



案例1


這是一個(gè)同學(xué)的名片作品,給人感覺凌亂、沒有秩序,信息傳達(dá)也不清晰。那么問題出在哪兒呢?



首先,綠點(diǎn)部分的文字大小差不多,缺乏對(duì)比,導(dǎo)致層級(jí)關(guān)系不分明。



其次對(duì)齊方式不統(tǒng)一,沒有秩序感。


那我們運(yùn)用兩個(gè)原則修改后是什么樣子呢?



我們強(qiáng)調(diào)名片持有人的名字,將聯(lián)系方式等其余信息左對(duì)齊,LOGO與二維碼則置于右邊,是不是整潔規(guī)整了不少,信息的傳達(dá)性更強(qiáng)了。



同樣的,我們也可以將聯(lián)系方式與二維碼移到版面右邊,LOGO置于左下方,同樣很規(guī)整,簡潔美觀,利于傳播。


對(duì)齊與對(duì)比的組合會(huì)有多種變化,運(yùn)用好了會(huì)使版面規(guī)整美觀不少。


接下來看一下修改前后的對(duì)比圖。




案例2


這是某同學(xué)的周練的海報(bào)作品,可以看到她對(duì)齊是統(tǒng)一的左對(duì)齊,沒有問題。但是畫面中卻缺乏對(duì)比,主次感不強(qiáng)。另外圖片選擇也不美觀。


同個(gè)主題下,另外一個(gè)同學(xué)的作品:



這個(gè)同學(xué)的作業(yè)突出了主標(biāo)題,對(duì)比也非常明顯,其余的信息層級(jí)也有對(duì)比變化,視覺上比較豐富,統(tǒng)一的左對(duì)齊也非常有條理。



同樣的內(nèi)容與主題,對(duì)比與對(duì)齊原則應(yīng)用的好壞會(huì)直接影響版面的美觀性與易讀性。大多數(shù)情況下,對(duì)比與對(duì)齊是缺一不可的。


當(dāng)然版式設(shè)計(jì)中有四大基礎(chǔ)原則,「對(duì)比」、「對(duì)齊」、「組合」、「重復(fù)」,一般情況下這四個(gè)基礎(chǔ)原則都是組合使用的?!笇?duì)比」與「對(duì)齊」只是一部分,「組合」與「重復(fù)」我們以后再細(xì)說吧。

作者:大貓404     來源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

博博

Hi,我是彩云。咱們平時(shí)在做 UI 組件庫的時(shí)候,會(huì)遇到一個(gè)問題,定義了很多顏色但在團(tuán)隊(duì)合作的時(shí)候,卻依然還是會(huì)根據(jù)每個(gè)設(shè)計(jì)師自己的喜好來配色,很難將顏色規(guī)范很好的統(tǒng)一起來。這其中有一個(gè)很嚴(yán)重的問題就是對(duì)于顏色的命名和管理不夠清晰,那么今天這篇文章通過一個(gè)國外大廠真實(shí)的顏色組件升級(jí)案例,希望能幫你解決這個(gè)難題。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

我們花了幾個(gè)月的時(shí)間改進(jìn)了設(shè)計(jì)系統(tǒng) Cobalt 中顏色的處理方式。顏色是 UI 的基本元素:它們構(gòu)成視覺語言,幫助定義品牌,并被開發(fā)和設(shè)計(jì)師每天用在產(chǎn)品設(shè)計(jì)中。

但如果我們?cè)谑褂妙伾蠜]有明確的指導(dǎo)原則,顏色被團(tuán)隊(duì)中的設(shè)計(jì)師按喜好使用時(shí),將會(huì)導(dǎo)致產(chǎn)品看起來非?;靵y。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

我們 APP 中的不一致例子

接下來我會(huì)告訴你,我們是如何做好顏色規(guī)范以及在整個(gè)項(xiàng)目中面臨的挑戰(zhàn),正如你將看到的,這個(gè)項(xiàng)目并不像看上去那么簡單:

  • 如何通過 Getaround 在設(shè)計(jì)和技術(shù)方面管理顏色
  • 概述這個(gè)系統(tǒng)的局限性,并說明我們?nèi)绾胃倪M(jìn)它
  • 什么是語義顏色
  • 我們是如何實(shí)現(xiàn)它的,以及它帶來的優(yōu)勢!


我們之前在 Getaround 中如何管理顏色?


1. 在設(shè)計(jì)方面

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

和許多設(shè)計(jì)團(tuán)隊(duì)一樣,我們使用 Figma 作為我們的主要設(shè)計(jì)工具。我們的顏色被放在“基礎(chǔ)”庫中,可以在其中找到我們?cè)诋a(chǎn)品中使用的所有常見樣式,例如字體樣式、顏色、圖標(biāo)等。這個(gè)庫提供了我們每天使用的專用系統(tǒng)庫(iOS、Android、Web、電子郵件)。

顏色名稱過去是基于它們的外觀。例如:紫色顏色是我們的主要顏色,而石墨色是基本文本的常規(guī)顏色。

2. 在技術(shù)方面

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

在我們的 APP 中,曾經(jīng)會(huì)用相同的系統(tǒng)來管理顏色。此外,還有一些語義顏色,但僅限于 iOS,開發(fā)用的也不多。

我們?cè)谂f系統(tǒng)中面臨的限制


在使用這個(gè)系統(tǒng)時(shí),團(tuán)隊(duì)反復(fù)面臨同樣的問題:

  • 如何確保從一位設(shè)計(jì)師到另一位設(shè)計(jì)師以相同的方式使用顏色?
  • 如果沒有適當(dāng)?shù)闹笇?dǎo)原則,我們?nèi)绾未_保開發(fā)很好的還原?
  • 如果明天我們必須用全新的配色方案來改造我們的品牌,要怎么快速統(tǒng)一?

讓我們?cè)囍页鑫覀兪侨绾蜗萑脒@種境地的?

1)沒有明確的顏色使用規(guī)范

所有設(shè)計(jì)師都使用相同的色板,但自 2019 年 Getaround 品牌重塑以來,除了引入不一致之外,沒有明確關(guān)于如何使用它們的規(guī)范,所以設(shè)計(jì)師在選擇顏色時(shí)迷失了方向。

然后他們將開始建立自己的參考資料,每個(gè)設(shè)計(jì)師都有不同的配色想法。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

例如:設(shè)計(jì)師應(yīng)該在所有這些灰色陰影中為次級(jí)文本選擇哪種灰色?顏色命名在這里不是很有幫助

2)舊品牌的設(shè)計(jì)包袱

以前品牌的一些舊顏色仍在使用(按鈕上的藍(lán)色陰影,標(biāo)題……)。到現(xiàn)在也沒有真正的行動(dòng)計(jì)劃來迭代它們。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

舊驅(qū)動(dòng)器品牌


我們對(duì)新系統(tǒng)的設(shè)想


在 2021 年初,我們有機(jī)會(huì)為我們的 iOS 和 Android APP 來制定長期的 UI 規(guī)劃。

我們問自己“5 年后我們的 APP 會(huì)是什么樣的?”。我們會(huì)回顧,Getaround 品牌是如何成為我們視覺方法中心的。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

以上是我們品牌和設(shè)計(jì)團(tuán)隊(duì)在 2020 年完成的全面工作的一小部分

致力于設(shè)計(jì)系統(tǒng)的 Cobalt 團(tuán)隊(duì)借此機(jī)會(huì)重新考慮了顏色系統(tǒng)。然而,為了使這一目標(biāo)成為現(xiàn)實(shí),我們面臨著一些挑戰(zhàn):

1)制定指導(dǎo)原則

我們?nèi)绾未_保每個(gè)設(shè)計(jì)師都可以依賴易于理解和使用色彩系統(tǒng)?擁有一個(gè)簡單系統(tǒng)將加快使用速度。

2)顏色能通過可用性標(biāo)準(zhǔn)

我們?nèi)绾未_保從一開始就設(shè)計(jì)出易于使用的顏色?

3)易于維護(hù)并符合未來趨勢

我們?nèi)绾尾拍苁瓜到y(tǒng)易于維護(hù)并符合現(xiàn)在和未來的行業(yè)標(biāo)準(zhǔn)(例如:暗模式)


我們新的顏色系統(tǒng):語義顏色


在我們的探索階段,在 Figma 的共享環(huán)境中工作促使我們保存和記錄我們所做的設(shè)計(jì)決策。就像我們應(yīng)該如何命名我們的強(qiáng)調(diào)色:(主要?強(qiáng)調(diào)?)

我們還測試了 APP 界面在黑暗模式下的外觀,以及如何正確支持這一點(diǎn)。我們應(yīng)該創(chuàng)建一個(gè)單獨(dú)的調(diào)色板還是為每個(gè)組件都創(chuàng)建一個(gè)深色版本?我們開始與開發(fā)討論這個(gè)問題,以了解他們有什么解決方案來處理這些問題。

語義顏色的概念很快就被開發(fā)人員提出來,因?yàn)樗麄冎啦⑶液芎玫厥褂昧诉@個(gè)概念。但對(duì)于設(shè)計(jì)師來說,又要如何準(zhǔn)確理解呢?

1)什么是語義顏色?

語義指的是根據(jù)顏色的使用方式而不是色調(diào)來命名顏色的方法。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

例如,你可以將顏色命名為“成功”或“積極”,因?yàn)樗傅氖呛x,而不是“綠色”或“翡翠綠”。

甚至可以根據(jù)顏色在屏幕上的應(yīng)用方式來命名顏色,例如背景顏色、按鈕背景顏色、文本顏色、圖標(biāo)顏色等……

2)從基于外觀的配色方案到基于語義的配色方案

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

語義顏色并不新鮮,越來越多的產(chǎn)品開始采用這種方式來定義顏色。我們可以從下面一些大廠的顏色規(guī)范來學(xué)習(xí)

google: https://material.io/design/color/the-color-system.html#color-theme-creation

Apple: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color

Shopify: https://polaris.shopify.com/design/colors#navigation

Asana: https://asana.com/brand

顯然,這種顏色系統(tǒng)有很多優(yōu)點(diǎn)。因此,現(xiàn)在讓我解釋一下我們?nèi)绾卧趯?shí)踐中將這個(gè)概念應(yīng)用到我們的產(chǎn)品中。

3)深入研究語義顏色

我們的新顏色系統(tǒng)由兩部分組成:

  • 基礎(chǔ)色板
  • 語義顏色

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

基礎(chǔ)調(diào)色板

我們與品牌團(tuán)隊(duì)密切合作,他們定義了一個(gè)全新的品牌,我們?cè)诠ぷ鲿r(shí)會(huì)圍繞這個(gè)品牌考慮。

該品牌的每種顏色都采用多種色調(diào)進(jìn)行調(diào)整,以創(chuàng)造更大的靈活性,一次構(gòu)建成為基礎(chǔ)調(diào)色板。它代表可以在產(chǎn)品中顯示的所有可能顏色。團(tuán)隊(duì)可能不會(huì)全部使用它們,但他們會(huì)選擇在產(chǎn)品中效果最好的那些。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

基礎(chǔ)調(diào)色板

語義顏色,語義顏色建立在用作參考的基礎(chǔ)調(diào)色板之上。正如我之前解釋的,命名不再是指顏色的“外觀”(洋紅色、棕色、綠色……),而是指UI 元素它們被應(yīng)用于(文本、圖標(biāo)、按鈕、背景……)以及該元素的狀態(tài)(活動(dòng)、非活動(dòng)、成功……)。

請(qǐng)參閱此處的命名法和一些示例:

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

語義顏色結(jié)構(gòu)和示例

這意味著來自基礎(chǔ)調(diào)色板的顏色可以用于多種語義顏色:

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

這就是我們根據(jù)這個(gè)新原則重新調(diào)整顏色命名的方式:

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

我們通過設(shè)計(jì)師和開發(fā)進(jìn)行了內(nèi)部用戶測試,以確定命名語義顏色的最佳方式。

我們嘗試了很多不同的命名方法,發(fā)現(xiàn)過于詳細(xì)的命名系統(tǒng)對(duì)于我們的團(tuán)隊(duì)和產(chǎn)品的規(guī)模來說維護(hù)和使用太復(fù)雜了。我們決定做一些簡單的維護(hù),同時(shí)在命名方面有足夠的延展性。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!


語義顏色的好處


1)語義色彩嵌入設(shè)計(jì)原則

語義顏色側(cè)重于顏色的用途。它消除了設(shè)計(jì)師和開發(fā)對(duì)使用什么顏色的盲目猜測,因?yàn)橐曈X語言直接傳達(dá)了設(shè)計(jì)決策。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

例如:在這里,顏色命名使設(shè)計(jì)師更容易做出正確的選擇。在我們的原則中, *Accent* state 用于交互元素。

2)解鎖黑暗模式

語義顏色可以適應(yīng)不同的主題。語義顏色的名稱始終相同,但它的外觀可能會(huì)根據(jù)所選模式而改變。例如,語義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據(jù)用戶選擇的模式,將自動(dòng)顯示正確的顏色。這對(duì)我們的設(shè)計(jì)系統(tǒng)來說是一個(gè)真正的游戲規(guī)則改變者,因?yàn)樗鼘⑹顾用嫦蛭磥怼?

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

明暗模式下的語義顏色 Primary.Background

3)語義顏色高效靈活

如果我們將來要更新顏色,使用語義顏色也會(huì)變得更容易。假設(shè)我們想要將我們的主色更改為藍(lán)色。我們只需要將基礎(chǔ)調(diào)色板中的“紫色”更新為“藍(lán)色”。與該顏色相關(guān)的所有語義顏色也將神奇地更新。

另一種情況可能是更新特定 UI 元素的顏色,例如按鈕,而無需觸摸使用紫色顏色的其他元素。在這種情況下,我們只需要更新 ButtonBackground.Primary 顏色,非常簡單。

如果沒有該系統(tǒng),更新顏色將需要經(jīng)過大量 QA 以確保將更改應(yīng)用到任何地方。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

4)顏色組合指南

這個(gè)系統(tǒng)似乎很容易使用,但設(shè)計(jì)師仍然有一些問題:

  • 我什么時(shí)候可以使用正常文字顏色?
  • 我什么時(shí)候可以使用次級(jí)文本顏色?
  • 我什么時(shí)候可以使用可交互顏色?

為了幫助設(shè)計(jì)師選擇顏色,我們創(chuàng)建了一個(gè)交互式指南,列出了所有可能的顏色組合。

我們?cè)?figma 原型中創(chuàng)建了這個(gè)指導(dǎo)原則,每次更改設(shè)計(jì)系統(tǒng)顏色時(shí)都會(huì)更新該規(guī)范。它突出了允許的語義顏色組合,以最大限度地保持一致性。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

Figma 中內(nèi)置的語義色彩交互指南

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!


結(jié)果


采用這種新的顏色系統(tǒng)產(chǎn)生了一些變化:

1)我們從“Foundation”庫中提取顏色,并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開關(guān)功能輕松地將設(shè)計(jì)文件從 Light 切換到  Dark 模式。這也使庫更輕且更易于維護(hù)。

如何更好的統(tǒng)一顏色規(guī)范?這個(gè)方法正在成為新趨勢!

2)語義顏色已在我們的 iOS 和 Android 應(yīng)用程序上成功實(shí)現(xiàn),我們現(xiàn)在正在努力在我們網(wǎng)絡(luò)平臺(tái)上使用相同的系統(tǒng)。我們很快就會(huì)有一個(gè)集中的配色方案來處理所有系統(tǒng)上的顏色。


總結(jié)


總結(jié)下今天學(xué)到的內(nèi)容:

1)發(fā)現(xiàn)并準(zhǔn)確描述團(tuán)隊(duì)在使用顏色時(shí)遇到的問題

2)如何從提出設(shè)想,到以新的方式來定義顏色

3)如何通過語義化顏色來使得大家更方便的使用顏色,我們也可以在自己的組件庫中多使用語義化的顏色來進(jìn)行命名管理,這樣團(tuán)隊(duì)協(xié)作才會(huì)更加高效。

作者:彩云Sky1

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

博博

B 端產(chǎn)品主要是 Web 端產(chǎn)品,空間大、操作多,內(nèi)容相對(duì)復(fù)雜。需要通過頁面布局或者視覺設(shè)計(jì)表達(dá)出明確的邏輯關(guān)系,從設(shè)計(jì)角度降低用戶的學(xué)習(xí)成本。而用戶有固定的認(rèn)知規(guī)律。格式塔原理揭示了人類視覺的認(rèn)知是整體的:我們的視覺系統(tǒng)自動(dòng)對(duì)視覺輸入構(gòu)建結(jié)構(gòu),并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區(qū)域。

格式塔主要包括 7 個(gè)基本原則:

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

今天我們就來總結(jié)下,格式塔原理在 B 端產(chǎn)品中是如何應(yīng)用的?

接近性原則


我們先看 2 張截圖,分別是不同分辨率下的界面效果。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

可以明顯的感覺到高分辨率下,菜單列間距離較大,菜單的歸屬關(guān)系很清晰。而低分辨率下,菜單間的距離變小,特別是后面兩列的菜單會(huì)給人混在一起的感覺。這就是格式塔原理中的接近性原則,距離近的關(guān)聯(lián)親密,距離遠(yuǎn)的就各自獨(dú)立分組。

當(dāng)我們想要傳達(dá)給用戶層級(jí)關(guān)系時(shí),就需要善于利用接近性原則。例如表格上方的功能按鈕,通常我們將高頻、核心操作放置在左側(cè),低頻、輔助功能放置在右側(cè)。通過增大元素間的距離,達(dá)到功能分區(qū)的目的。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

相似性原則


相似性原則是通過顏色、尺寸、圖形等方面的共同屬性,實(shí)現(xiàn)信息的分組或者高可讀性。

例如在可視化圖表中,不同范圍值的指標(biāo)采用不同的背景色。通過背景色的差異,將同一范圍內(nèi)的數(shù)據(jù)形成視覺關(guān)聯(lián),提高用戶對(duì)信息的識(shí)別效率。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

通過圖形尺寸的相似性也可以構(gòu)建內(nèi)容分區(qū)。例如阿里云、騰訊云控制臺(tái)的首頁,都采用了雙列設(shè)計(jì),左側(cè)主要以高頻的業(yè)務(wù)功能信息為主,右側(cè)是輔助運(yùn)營信息。兩列尺寸寬度有明顯差異,用戶會(huì)將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內(nèi)容差異,并有效地突出業(yè)務(wù)信息。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

閉合性原則


IBM、蘋果的 Logo 設(shè)計(jì),無論是“用刀砍過”,還是被“偷咬了一口”,用戶仍然可以識(shí)別出完整圖形。這就是視覺閉合性原則的一種表現(xiàn)方式。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

在 UI 設(shè)計(jì)中,則會(huì)通過對(duì)齊方式,形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內(nèi)容空間。而微信公眾號(hào)則是平鋪背景色,內(nèi)容區(qū)借助標(biāo)題、卡片對(duì)齊形成視覺閉合空間,最終將頁面劃分為左側(cè)導(dǎo)航菜單和內(nèi)容區(qū)兩個(gè)空間。視覺表現(xiàn)上更輕量化。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

另外閉合性是需要元素之間相互輔助的,單獨(dú)的元素?zé)o法構(gòu)建出閉合空間。以下圖為例,雖然四個(gè)小的卡片做了間距分割,但是由于界面整體上是橫向分割的。我們會(huì)將 4 個(gè)卡片看作是整體元素去理解和認(rèn)知。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

連續(xù)性原則


用戶更習(xí)慣于從左到右的橫掃閱讀,因此連續(xù)性主要體現(xiàn)在橫向空間中。

下圖中,雖然左側(cè)的標(biāo)簽文字與右側(cè)的內(nèi)容信息有較為明顯的間距,高度尺寸差距也比較大。但是用戶不會(huì)將內(nèi)容看作是 4 個(gè)獨(dú)立的個(gè)體,而是理解為兩組信息。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

在某些場景中,如果信息平均分布,不會(huì)產(chǎn)生連續(xù)性的視覺感知。

例如下圖指標(biāo)監(jiān)控中,指標(biāo)都是采用小卡片,間距、尺寸較為統(tǒng)一。這種情況下用戶就很難對(duì)信息分組處理。在我看來這些指標(biāo)只是一個(gè)個(gè)的視覺散點(diǎn),沒有明確的視覺重點(diǎn)。用戶無法感知到內(nèi)在的邏輯性。用戶想要找到某個(gè)指標(biāo)時(shí),需要逐個(gè)檢索,花費(fèi)的成本更高。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

簡單對(duì)稱原則


通過上述很多圖片,我們可以看出頁面元素基本都是橫平豎直,中規(guī)中矩的元素和分割方式?;蛟S有些單調(diào)乏味,但是勝在簡單,不會(huì)帶來額外的視覺噪點(diǎn)。

特別是 B 端產(chǎn)品,基本看不到異形的存在,甚至全圓角矩形都很少見到。即使有異形,也只是作為視覺表現(xiàn)元素存在于內(nèi)容中,而不會(huì)作為空間的劃分邊界。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

主體與背景原則


主體與背景原則最典型的應(yīng)用就是蒙版彈窗。通過拉大主體與背景的差異性,凸顯彈窗信息。

當(dāng)我們需要著重表現(xiàn)內(nèi)容時(shí),同樣適用于主體與背景原則。例如登錄界面的設(shè)計(jì),會(huì)通過差異化的背景、陰影等方式,帶給用戶清晰的視覺層級(jí),適當(dāng)凸顯輸入框的主體地位。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

而 B 端內(nèi)容區(qū)是核心空間,基本都是采用純白背景,與頁面背景形成對(duì)比,從而占據(jù)信息的主體地位。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

共同命運(yùn)原則


共同命運(yùn)原則聽起來有點(diǎn)玄學(xué),指的是相同運(yùn)動(dòng)特征的元素會(huì)被認(rèn)為是同一組或者是具有相關(guān)性的內(nèi)容。運(yùn)動(dòng)的元素在 B 端產(chǎn)品中應(yīng)用很少,我沒有找到合適的案例解釋這個(gè)原理。

在移動(dòng)端產(chǎn)品中有些應(yīng)用案例。比如 iOS 系統(tǒng)中,桌面布局編輯態(tài)下抖動(dòng)的圖標(biāo),可以與靜態(tài)不可編輯的內(nèi)容形成隔離效果,視覺引導(dǎo)性更強(qiáng)。同樣今日頭條頻道編輯時(shí),也采用了抖動(dòng)效果。

如何在 B 端設(shè)計(jì)中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

總結(jié)


雖然 B 端產(chǎn)品沒有 C 端色彩豐富,表現(xiàn)力上沒那么炫酷。但是兩者對(duì)信息傳達(dá)的要求是一樣的,要求和諧、有序、層次分明,輔助傳達(dá)內(nèi)在的業(yè)務(wù)層信息。靈活地運(yùn)用格式塔原理將對(duì)產(chǎn)品的體驗(yàn)提升會(huì)有很大的幫助。

格式塔原理不僅限于視覺表現(xiàn),產(chǎn)品經(jīng)理或交互設(shè)計(jì)師在原型設(shè)計(jì)時(shí),也要重視格式塔原理,輔助設(shè)計(jì)方案表達(dá),提高團(tuán)隊(duì)間的協(xié)作效率。

今天的分享就到這里了。如果有更好的案例,歡迎評(píng)論區(qū)留言分享給大家~


作者:子牧先生

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



終于整理完了,這些圖標(biāo)庫也太好用了!

seo達(dá)人


首先先給大家推薦兩款sketch插件:Dapollo、Kitchen 3 

 

Dapollo

Dapollo插件是一款由螞蟻金服和Iconfont打造的設(shè)計(jì)插件集,這套插件包含了組件庫、頁面模板庫、色彩庫、圖標(biāo)庫等設(shè)計(jì)素材,而且質(zhì)量很高,最厲害的是支持設(shè)計(jì)稿一鍵導(dǎo)出前端代碼,能幫助開發(fā)效率提升和保證還原度。

里面集成iconfont的圖標(biāo)功能,親測在iconfont系統(tǒng)維護(hù)期間還可以使用,直接搜索拖拽使用即可。

圖片

插件獲?。汉笈_(tái)回復(fù)“Dapollo”自助領(lǐng)取

 

Kitchen 3

kitchen3集成了Ant Design、Creek Design、Rex Design L 等設(shè)計(jì)系統(tǒng)的圖標(biāo)資源可以在圖標(biāo)面板中快速拖拽對(duì)應(yīng)設(shè)計(jì)系統(tǒng)中的圖標(biāo)。iconfont升級(jí)期間可以作為臨時(shí)性的備選方案使用。

圖片

Kitchen 支持圖標(biāo)的一鍵替換!只要是從Kitchen 中拖出的圖標(biāo),就可以點(diǎn)擊其他 icon 直接替換,演示如下:

圖片

同時(shí)集成了iconfot上的圖標(biāo)資產(chǎn)(iconfont維護(hù)期間,暫時(shí)不能使用),可以直接選擇自己項(xiàng)目中的圖標(biāo)資產(chǎn):

圖片

更多介紹請(qǐng)查看往期文章設(shè)計(jì)師必看|這款設(shè)計(jì)神器讓你效率提高十倍!

后臺(tái)回復(fù)“Kitchen3”自助領(lǐng)取插件包

 

下面推薦幾個(gè)圖標(biāo)備用網(wǎng)站,大家按需領(lǐng)?。?/span>

1、https://iconpark.oceanengine.com/official

圖片

字節(jié)跳動(dòng)的官網(wǎng)圖標(biāo)庫,可自定義大小和線寬,就是圖標(biāo)資源相對(duì)iconfont較少。

2、https://icons8.com/animated-icons

圖片

icons8內(nèi)置了3700 多個(gè)動(dòng)畫圖標(biāo),全部以 JSON 格式提供Lottie、GIF 和 After Effects 格式,可直接下載源文件,不過企業(yè)商用需要授權(quán)收費(fèi)的。

3、https://www.flaticon.com/

圖片

線性、面性、插畫類圖標(biāo)資源提供PNG、SVG、EPS、PSD 和 CSS 格式,會(huì)有付費(fèi)內(nèi)容。

4、https://iconmonstr.com/

圖片

iconmonstr – 免費(fèi)的、巨大的、不斷增長的簡單圖標(biāo)來源,由來自德國的資深設(shè)計(jì)師 Alexander Kahlkopf 創(chuàng)立,擁有超過 20 年的圖標(biāo)設(shè)計(jì)專業(yè)經(jīng)驗(yàn)。

5、https://ikonate.com/

圖片

與字節(jié)圖標(biāo)庫類似,可自定義圖標(biāo)大小、線寬、顏色,缺點(diǎn)就是資源相對(duì)較少。

6、https://remixicon.com/

圖片

Remix Icon 是一組為設(shè)計(jì)師和開發(fā)人員精心打造的開源中性風(fēng)格系統(tǒng)符號(hào)。所有圖標(biāo)均可免費(fèi)用于個(gè)人和商業(yè)用途。

7、https://feathericons.com/

圖片

國外免費(fèi)開源圖標(biāo)庫

8、https://akveo.github.io/eva-icons/#/

圖片

va Icons 包含480多個(gè)精美的開源圖標(biāo),用于常見的操作和項(xiàng)目。在桌面上下載我們的套件,以便在您的 Web、iOS 和 Android 數(shù)字產(chǎn)品中使用它們。

9、https://heroicons.dev/

圖片

麻省理工學(xué)院授權(quán)的圖標(biāo),可直接在Figma上打開。

10、https://3dicons.co/?utm_source=appinn.com

圖片

制作精美的開源 3D 圖標(biāo)在CC0 下100% 免費(fèi)用于商業(yè)和個(gè)人用途與任何設(shè)計(jì)工具一起使用。里面圖標(biāo)內(nèi)容挺豐富,大家可以多點(diǎn)點(diǎn)看下。

以上網(wǎng)站地址也更新在圖象官網(wǎng)上了,大家可以自取鏈接地址:https://www.tuuux.com/design/toollist

圖片

以上給大家分享了兩款sketch插件和10個(gè)圖標(biāo)資源站基本能夠滿足大家的需求,希望能夠幫助你在工作中提高效率。

 

原文地址:小六可視化設(shè)計(jì)(公眾號(hào))
作者:小六
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》終于整理完了,這些圖標(biāo)庫也太好用了!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



B類新品場景設(shè)計(jì)

seo達(dá)人


大總管默默 APP設(shè)計(jì)  46瀏覽 

圖片
前序背景

整個(gè)電商導(dǎo)購模式伴隨著著人群與場景的精細(xì)分層,從傳統(tǒng)的商品貨架式延伸至更具多元化的場景導(dǎo)購式,如“聚劃算”、“百億補(bǔ)貼”、“有好貨”等。

 

圖片
什么是 B類買家場景

基于1688平臺(tái)商家和貨源情況,結(jié)合對(duì)買家人群的洞察,我們發(fā)現(xiàn)B類買家來平臺(tái)的核心訴求是“找商機(jī)、找供給、好服務(wù)”,商機(jī)尋找是B類買家建立新采購關(guān)系的主要?jiǎng)訖C(jī)。B類買家場景本質(zhì)就是圍繞某一類買家找商機(jī)訴求,聚合對(duì)應(yīng)不同屬性特征商品及服務(wù),幫助買家高效找挑建立新的采購關(guān)系。

圖片

以“找新”場景為例,簡單介紹一下我們的設(shè)計(jì)思路

 

圖片
新品場景設(shè)計(jì)案例

B&C買家的找新差異

新品消費(fèi)崛起通常C端以新品體驗(yàn)價(jià)、限量抽取、試用等模塊來打造新品頻道的心智;而與C類消費(fèi)者“滿足個(gè)人喜好、看重個(gè)人體驗(yàn)”有所不同,B類買家“找新品”的行為背后其實(shí)是一個(gè)商機(jī)發(fā)現(xiàn)與判斷的過程;

圖片

現(xiàn)狀

首先依靠數(shù)據(jù)分析得到平臺(tái)找新買家的三大身份占比,對(duì)他們的生意特點(diǎn)、拿貨特征、服務(wù)訴求進(jìn)行分析,結(jié)合定向的調(diào)研走訪,梳理出核心關(guān)鍵問題,主要集中在“找挑效率低、決策參考少、新品找不到”;

因此我們制定了設(shè)計(jì)方向:通過直播的方式,以“新品首發(fā)”欄目打造新品心智;圍繞人群個(gè)性化差異,進(jìn)行商機(jī)新品賣點(diǎn)表達(dá)并在鏈路中透出,助力買家提升找挑新品效率。

頻道場景搭建

從場景心智設(shè)計(jì)開始,以2個(gè)核心維度展開:1.了解用戶行為特征;2.心智框架構(gòu)建;

1、用戶的行為特征

 針對(duì)商品賣點(diǎn)信息比較少,無法判斷哪個(gè)商品好賣的問題,思考如何基于買家動(dòng)線做有效的設(shè)計(jì)表達(dá)方案更好的引導(dǎo)決策。我們?nèi)シ中袠I(yè)進(jìn)行廠貨內(nèi)容維度拆解定義,從行業(yè)貨盤分類、賣點(diǎn)分類到核心特征提取,多維度抽取關(guān)鍵要素?;谡緝?nèi)外用戶觸點(diǎn)和進(jìn)貨渠道的差異做不同的表達(dá)方式,通過視頻動(dòng)態(tài)化引流吸引用戶注意產(chǎn)生認(rèn)知,通過圖文做高效的決策判斷。

圖片

下圖是一個(gè)典型的買家畫像(如圖)

圖片

不同類型的買家對(duì)新品的定義和需求不同,對(duì)進(jìn)貨渠道、商品特征、商家要求也存在差異。買家在新關(guān)系中拿貨選擇較謹(jǐn)慎,提升貨盤匹配度、建立對(duì)商家的認(rèn)知信任、降低拿貨決策成本成為當(dāng)前首要解決的問題。

2、心智框架的構(gòu)建

基于對(duì)買家找新訴求關(guān)鍵信息抽煉,設(shè)計(jì)內(nèi)容瀏覽路徑,與用戶進(jìn)行認(rèn)知匹配,加深用戶對(duì)于場景心智的認(rèn)知;

進(jìn)行以下三個(gè)設(shè)計(jì)方向?qū)嵤?

圖片

01.入口有感知

通過渠道上新、新趨勢與線下模式相匹配,讓買家快速了解頻道定位,滿足強(qiáng)發(fā)現(xiàn)性買家需求;

圖片

02.內(nèi)容有認(rèn)知

通過強(qiáng)化服務(wù)及貨盤映射,滿足買家低門檻快速測款需求,以流行風(fēng)格、渠道牛商、趨勢新品等主題內(nèi)容高效聚合,加深買家對(duì)于場景心智的認(rèn)知;

  • 找新拿樣階段下服務(wù)訴求被滿足:起批門檻低、小單拿樣;發(fā)貨退貨有保障、快速測款;
  • 與自身線下找新習(xí)慣相匹配:下線檔口、貨盤風(fēng)格映射、平臺(tái)趨勢參考;

圖片

03.導(dǎo)購有效率

對(duì)于B類買家來說,選新品更多側(cè)重對(duì)未來商機(jī)確定性的投資;新品在前期普遍銷量較低,無法單以銷量熱度做為決策條件;圍繞商品生命周期、貨盤特征拆解商機(jī)關(guān)鍵決策點(diǎn)在鏈路中透傳,提升買家導(dǎo)購決策效率;

a 商機(jī)因子拆解 – 以動(dòng)態(tài)封面、商機(jī)表達(dá)助力找挑效率

  • 初期:款不確定,基于商家硬實(shí)力,以商選品,快速捕捉商機(jī);如:十三行檔口、青島即墨產(chǎn)業(yè)帶商家;
  • 發(fā)展上升期:風(fēng)向標(biāo)、商機(jī)熱度逐步增多,具有流行新元素;如:新材質(zhì)、新圖案、新工藝;
  • 爆發(fā)熱賣期:下游市場熱度升高、消費(fèi)數(shù)據(jù)初步形成,以款找商,選更優(yōu)供給 ;如:同款更低價(jià)、服務(wù)更確定;

圖片

圖片

b 動(dòng)線設(shè)計(jì) – 不同階段環(huán)節(jié)下的拆解表達(dá)

圖片

 

寫在最后

在打造新品場景中,除了剛剛所提到的場景的搭建、賣點(diǎn)的表達(dá),同時(shí)我還對(duì)商家做了研究和分析,了解商家線下發(fā)新的渠道和方式,以及不愿意把新品發(fā)布在平臺(tái)的原因;我們通過“直播首發(fā)”集中上新,同時(shí)以工具、數(shù)據(jù)的方式幫助商家更好的對(duì)商品進(jìn)行表達(dá),增強(qiáng)播后一定周期內(nèi)商品轉(zhuǎn)化和新關(guān)系建立的效果感知,從而提升商家新品上行的意愿度。

對(duì)于B類導(dǎo)購場景的設(shè)計(jì)我們還在不斷的探索,在B端的場景下,圍繞用戶多類型角色、多階段需求以及成熟的下線模式去做特征的洞察和映射,以設(shè)計(jì)的手段解決改善問題;B端的設(shè)計(jì)師除了要懂設(shè)計(jì)本身,還要擁有業(yè)務(wù)、商業(yè)的思維,盡可能走進(jìn)了解你的用戶,也許在這里我們很少有推陳出新的大動(dòng)作,但每一個(gè)設(shè)計(jì)小點(diǎn)的背后都藏著對(duì)用戶訴求不斷分析拆解的努力。

感謝閱讀

文中設(shè)計(jì)稿僅做DEMO演示用,具體以實(shí)際線上為準(zhǔn)

 

原文地址:AlibabaDesign(公眾號(hào))

作者:CBU設(shè)計(jì)部

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》B類新品場景設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



LOGO設(shè)計(jì)

seo達(dá)人


圖片

底板類型,只是眾多創(chuàng)意方法的其中一種。
這種類型的優(yōu)點(diǎn)是效果氛圍豐富, 自身的風(fēng)格調(diào)性比較明確。常常用在大型活動(dòng)主文案、或是比較復(fù)雜的畫面中,能很好地串聯(lián)元素跟文字之間的聯(lián)系。

這種類型都有什么要點(diǎn)和制作方法呢?等我依次給大家分享

 

特點(diǎn)

我們先來看一些同類型作品的樣例:

圖片

1.底托

很清晰的一點(diǎn),這種風(fēng)格最主要的一點(diǎn)就是有一個(gè)經(jīng)過設(shè)計(jì)的字體底托以讓字體清晰,不受畫面其他元素影響。

2.重量感

字體厚度、底托厚度、高光、陰影

3.主題感

主題感很強(qiáng),這種方法設(shè)計(jì)出來的字體往往會(huì)有很強(qiáng)的主題傾向性。也就是風(fēng)格指向。不用看見搭配的畫面 也能知道傳達(dá)的是個(gè)什么樣的氛圍。

圖片

 

主題感怎么找?

1.分析需求

第一步我們要做的就是分析需求,提取關(guān)鍵詞,明確設(shè)計(jì)目標(biāo),我們才能順利地往后執(zhí)行。

我們看看這個(gè)需求,首先,這是一個(gè)漫畫LOGO需求。我們應(yīng)該先了解故事劇情并收集整體一些畫面風(fēng)格,從這些畫面中提取可以提煉視覺元素的關(guān)鍵點(diǎn)出來:

圖片

觀察漫畫內(nèi)容,我一共提取出了下面6個(gè)關(guān)鍵詞:

圖片

然后把他們轉(zhuǎn)化提煉成視覺元素。

2.提煉視覺元素

我們挨個(gè)關(guān)鍵詞提取視覺元素,

比如科技感:

圖片

科技感的特征一般由科技線條構(gòu)成。

裝甲:

圖片

這個(gè)漫畫里就有,直接仿造畫風(fēng)就可以。

燈光:

圖片

能量:可以做成類似能量護(hù)盾,或者閃電的樣式。

圖片

以上就是我們視覺元素的提煉了。接下來就是具體的執(zhí)行。

 

執(zhí)行

底板類型的我們第一要做的當(dāng)然是底板了,我想到的是可以用機(jī)甲的元素做底板,把文字承托在上面。

1.制作底板

底板要注意兩個(gè)點(diǎn)

(1)排版

我們可以先做一個(gè)大概的排版

圖片

要注意底板不要太大也不要太小,字體在底板上占80%左右的面積比較合適。

(2)造型

造型這里也是比較重要的,我們可以多觀察漫畫里的視覺元素來做。比如我這里是參考的戰(zhàn)機(jī):

圖片

它整體的一個(gè)機(jī)翼造型還是蠻酷的,我們大概秒回一個(gè)剪影出來

圖片

還是蠻帥的。
放上字體看看比列結(jié)構(gòu),跟著排版調(diào)整一下:

圖片

注意控制占比在80%左右。

(3)層次

底板如果只有一層的話,就會(huì)顯得有點(diǎn)單調(diào),層次不夠。也就做不出厚度來。

參考了下底板類型的層次是怎么做的,總結(jié)了三種出來:

厚度增加層次:

圖片

做出字體的厚度和,底板的厚度來增加層次感,比較穩(wěn)定厚重。

元素穿插點(diǎn)綴增加層次感:

圖片

刻畫一些貫穿前后空間的元素, 可以增加層次感和統(tǒng)一性。

層次堆疊:

圖片

這種就比較直觀,就是一層一層的去堆疊累積,以增加層次感。

我們可以結(jié)合起來使用:

所以我們可以在不變動(dòng)大型的情況劃分一下,劃分些大的層次出來。

圖片

圖片

這樣就豐富多了,其他的一些厚度啊之類的,可以在上色的時(shí)候再添加。

(4)配色
我同樣參考下樣例:

圖片

總結(jié)幾個(gè)點(diǎn):

1.底板顏色要和字體形成對(duì)比,才能凸顯文字。

2.一般底板使用暗色。文案使用亮色,或白色。第四個(gè)那種使用同色系的可能就有點(diǎn)區(qū)分不開,字體不夠突出。

方向:

字體:使用白色

底板:暗色

白色好說,暗色怎么找呢?檢查了一遍視覺參考,發(fā)現(xiàn)有一個(gè)飛船顏色挺好的。

圖片

剛好又是暗藍(lán)色,這不是符合我們的要求嗎?

用到底板上看看:

圖片

感覺不錯(cuò)?。?

(5)刻畫細(xì)節(jié):

把我們提煉的視覺元素拿出來用上

圖片

飛船上的線路縫隙,手掌上圓形的燈。

添加下看看:

圖片

精致多了。

這里要注意添加細(xì)節(jié)的兩個(gè)目的:

1.讓我們的元素象形意義更明確,簡單說就是畫啥像啥。讓人一眼能看出來你這個(gè)是什么。

2.層次,有凸起的地方(燈光,厚度),有凹陷的地方(比如縫隙,線路)。增加細(xì)節(jié)上的層次感。

 

2.文字制作

1.結(jié)構(gòu)

圖片

我們看下現(xiàn)在的效果,如果直接放文字就會(huì)顯得很薄,字體壓不住底部。輕飄飄的感覺,我們上面總結(jié)的參考中都會(huì)給字體增加厚度來壓住底部,我們可以試試,給文字再增一層底板,來增加厚度:

圖片

是不是就整體多了?
所以字體結(jié)構(gòu),分了字體本身和字體底板兩部分來組成。

2.字型

字型肯定是要做的,但因?yàn)樽煮w設(shè)計(jì)單獨(dú)一個(gè)門類,我這里就不細(xì)講了。
我們參考一些比較英朗科技感的參考來做就可以,展示一下:

圖片

3.細(xì)節(jié)

提取科技線的元素:

圖片

添加到字體表面刻畫出科技感:

圖片

4.一個(gè)亮點(diǎn)

在字體上提取一個(gè)筆畫,做特殊效果,使其與別的筆畫有明顯的視覺差異:

圖片

這里我是把“靈”字中間那一橫提取出來做了發(fā)光燈燈光的效果,使之成為一個(gè)視覺亮點(diǎn)。

 

3.添加特效

最后我們把字體放上去,整體加上一些前面提煉出來的閃電能量類的效果:

圖片

圖片

這樣我們的logo就制作完成了。

 

總結(jié)

當(dāng)我們要做某一種類型視覺的時(shí)候,不要光看表面的東西。好看或者不好看,什么也學(xué)不到??梢钥偨Y(jié)提煉他們的特點(diǎn)出來去深挖研究,理解里面深層次的邏輯,這樣我們才能進(jìn)步得快。

然后要去學(xué)習(xí)挖掘提煉某一種類型視覺元素,把他們?nèi)诤蠎?yīng)用到我們的項(xiàng)目中去。把控好每一處細(xì)節(jié),才能出優(yōu)秀的作品。

希望對(duì)大家能有所幫助和啟發(fā),謝謝。

 

原文地址:菜心設(shè)計(jì)鋪 (公眾號(hào))

作者:慢熱

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》LOGO設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




設(shè)計(jì)師突破瓶頸的四大狠招,專治止步不前

seo達(dá)人



設(shè)計(jì)是一個(gè)看上去有點(diǎn)難,實(shí)際做起來更難的行業(yè),一件作品看起來平平無奇,可你真要做起來還不一定有人家的好,又或者你覺得別人的作品只是比你的好一點(diǎn)點(diǎn)而已,但你不要小看這一點(diǎn)點(diǎn),想要跨越這一點(diǎn)點(diǎn),你也許需要付出一兩年的努力,甚至是更久,因?yàn)樵O(shè)計(jì)師的瓶頸期非常多,很多設(shè)計(jì)師在兩三年期間都沒有任何長進(jìn)也是很正常的事情。不進(jìn)則退,在這個(gè)競爭激烈的行業(yè)里,我們要盡量縮短自己的瓶頸期。蔥爺本篇文章給大家推薦四個(gè)突破瓶頸的辦法,希望對(duì)你有用。

 

01.刻意練習(xí)基礎(chǔ)技能

大部分設(shè)計(jì)師做不出好的設(shè)計(jì)作品主題是因?yàn)榛A(chǔ)不夠扎實(shí),其實(shí)這也正常,大學(xué)里安排的課程太多,學(xué)生也認(rèn)識(shí)不到基礎(chǔ)的重要性,不會(huì)好好學(xué),或者會(huì)嚴(yán)重偏科,所以很設(shè)計(jì)師都沒利用好這個(gè)打基礎(chǔ)的絕佳時(shí)間段,包括我自己。而非科班出身的設(shè)計(jì)師問題會(huì)更嚴(yán)重一些。所以,針對(duì)基礎(chǔ)的技能進(jìn)行刻意練習(xí)很有必要,特別是自己明顯的短板。

 

平面設(shè)計(jì)師的基礎(chǔ)技能主要有這么幾個(gè):圖形設(shè)計(jì)、字體設(shè)計(jì)、版式設(shè)計(jì)、色彩搭配。那么要怎樣進(jìn)行刻意練習(xí)呢?

? 選擇一個(gè)自己最需提升的技能,比如你目前的主要工作就是排版,而你的版式又很弱,那你就優(yōu)先對(duì)版式設(shè)計(jì)進(jìn)行刻意練習(xí);如果你的工作是海報(bào)設(shè)計(jì)、廣告設(shè)計(jì)、包裝設(shè)計(jì)這種考驗(yàn)綜合能力的工作,那你就選擇自己最薄弱的環(huán)節(jié)去提升。

? 買一些該類的書籍、找一些該類的文章來看,并且要收集、賞析巨量的作品,最好是每天都看點(diǎn)此類的作品。

? 每天都花一點(diǎn)時(shí)間做練習(xí),如果想要提升色彩搭配,可以每天搜集幾張圖片并提取出它的配色,還可以每天用顏色來表現(xiàn)一個(gè)主題,比如春、夏、秋、冬、喜、怒、哀、樂、酸、甜、苦、辣等等。

圖片 

? 把自己每天的工作內(nèi)容或成果分享到朋友圈、微博或者是微信群里,也可以是某個(gè)人,這么做既可以適當(dāng)給自己增加一點(diǎn)打卡的壓力,也有可能收到一點(diǎn)反饋。

? 什么時(shí)候可以暫停呢?首先,這項(xiàng)技能已經(jīng)基本可以滿足你的工作所需,客戶或上級(jí)幾乎不會(huì)再挑你這一方面的毛病。其次,你自己覺得已經(jīng)有很大進(jìn)步,套路和方法基本掌握,短時(shí)間很難再有提升,這時(shí)你就可以暫停去提升其他技能了。

 

02.學(xué)習(xí)新技能

對(duì)于基礎(chǔ)還不錯(cuò)的設(shè)計(jì)師,特別是一些老鳥,最有效的突破瓶頸的方式就是學(xué)習(xí)一項(xiàng)新技能,比如3D、插畫、合成或是動(dòng)效,最好是選擇一個(gè)你在工作中能最常用到的技能, 比如電商設(shè)計(jì)師可以優(yōu)先選擇3D或合成,品牌設(shè)計(jì)師可以優(yōu)先選擇插畫。

圖片

這些都是比較主流、比較實(shí)用但是大部分設(shè)計(jì)師都不具備的技能,這些技能可以大大豐富設(shè)計(jì)的表現(xiàn)手段,能給你的設(shè)計(jì)作品帶來完全不一的感覺,算是橫向提升了自己,這種方式比縱向提升自己更快,效果更明顯。

 
 

03.進(jìn)一個(gè)好的團(tuán)隊(duì)

大家都知道環(huán)境對(duì)學(xué)習(xí)的重要性,另外,很多人都應(yīng)該聽過“跟對(duì)人,做對(duì)事”這句話,而加入一個(gè)好的團(tuán)隊(duì)實(shí)際上就是找到了一個(gè)好的環(huán)境,以及跟對(duì)了人。曾經(jīng)就有朋友跟我說過,在某家公司待了一年,感覺比在上家待了兩年學(xué)到的東西還要多。

當(dāng)然,好與不好是相對(duì)的,我們沒法都一下擠到頭部的公司里去,畢竟面試者與公司是一個(gè)相互選擇的關(guān)系。但是對(duì)于想突破瓶頸的你來說,一個(gè)理想的設(shè)計(jì)團(tuán)隊(duì)?wèi)?yīng)該要有一些基本的要求,我自己是這么認(rèn)為的:

? 團(tuán)隊(duì)中一定要有水平比你高比較多的設(shè)計(jì)師,比如主管或總監(jiān);有高人指點(diǎn)比你自己摸索要進(jìn)步快很多。

? 該公司的設(shè)計(jì)出品不能低于行業(yè)平均水平,公司整體水平不行,你想你能行嗎?

? 公司老板是認(rèn)可設(shè)計(jì)的價(jià)值的,乙方基本都能滿足這一點(diǎn),但是很多甲方老板都覺得設(shè)計(jì)可有可無,或者覺得設(shè)計(jì)要有,但是好與壞不重要,有就可以了,這樣的公司對(duì)設(shè)計(jì)的要求基本上是只求快不求質(zhì),能做出啥好作品。

 

04.用營銷思維做設(shè)計(jì)

很多人說設(shè)計(jì)是技術(shù)活,其實(shí)這句話只對(duì)了一半,因?yàn)樵O(shè)計(jì)師確實(shí)需要懂一些技術(shù),比如設(shè)計(jì)軟件,你也可以把設(shè)計(jì)的基礎(chǔ)技能看成是技術(shù)活,就像手藝人一樣,設(shè)計(jì)確實(shí)有熟能生巧的成分。但是僅僅懂一些技術(shù)很難做出真正優(yōu)秀的設(shè)計(jì)作品,縱觀那些真正優(yōu)秀的商業(yè)案例,通常會(huì)有消費(fèi)者洞察、品牌思維、營銷思維在里面,設(shè)計(jì)的形式、圖形、文案、編排都是有邏輯、有目的的,而不僅僅是從美觀、藝術(shù)的角度去考慮。

圖片 

當(dāng)你學(xué)會(huì)站在更高、更廣的角度去思考設(shè)計(jì)、去做設(shè)計(jì)時(shí),你的設(shè)計(jì)能力就得到升華。

 

 

圖片 

古人有云:“活到老,學(xué)到老”、“學(xué)無止境”,不管你做哪個(gè)行業(yè),學(xué)習(xí)都是一件需要持續(xù)做的事情,這哪是什么內(nèi)卷???這明明就是老祖宗留下來的文化。

 

原文地址:蔥爺(公眾號(hào))

作者:蔥爺

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》設(shè)計(jì)師突破瓶頸的四大狠招,專治止步不前

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




UI設(shè)計(jì)細(xì)節(jié)分析

seo達(dá)人


正文

產(chǎn)品設(shè)計(jì)做到極致的時(shí)候,發(fā)揮的空間就會(huì)深入到細(xì)微之處的功能,看著簡單的功能,也會(huì)被設(shè)計(jì)師腦洞大開。不僅帶給用戶更好的使用體驗(yàn),也通過趣味性和差異化的表現(xiàn)方式,帶來不一樣的感官體驗(yàn)。

為了提高大家對(duì)于細(xì)節(jié)設(shè)計(jì)的靈感,今天黑馬哥為大家整理了一些細(xì)微之處的優(yōu)秀設(shè)計(jì)方案,希望可以帶給大家更多設(shè)計(jì)思維。

 

 

一、個(gè)性化的 UI 設(shè)計(jì)風(fēng)格

隨著用戶群體的年輕化趨勢,產(chǎn)品 UI 視覺層也在嘗試更多年輕化的風(fēng)格,更獨(dú)特的視覺風(fēng)格才能增加年輕用戶的好感度。最近體驗(yàn)到皮玩 APP,描邊風(fēng)的設(shè)計(jì)手法和青春活潑的配色,整體的界面設(shè)計(jì)帶來獨(dú)特的視覺風(fēng)格,讓人眼前一亮。

通過描邊可以中和色彩之間的排斥感,也能強(qiáng)化風(fēng)格特征,是色彩構(gòu)成中較為常用的手法。被運(yùn)用到 UI 設(shè)計(jì)的表現(xiàn)中,帶來的風(fēng)格感也是獨(dú)特新穎的,將成為一種風(fēng)格趨勢被延續(xù)。

圖片

 

 

二、視覺區(qū)域的業(yè)務(wù)動(dòng)態(tài)演繹

強(qiáng)化主界面視覺感通常會(huì)在頂部區(qū)域進(jìn)行,通過品牌色、插畫、IP 形象配圖等形式居多,再配合動(dòng)效形式效果更佳。在每平每屋 APP 首頁中,頂部區(qū)域通過動(dòng)畫形式演繹業(yè)務(wù)屬性,不僅增強(qiáng)了該區(qū)域的視覺感,達(dá)到吸引用戶關(guān)注的目的;也將產(chǎn)品的業(yè)務(wù)屬性表達(dá)出來,加深用戶的記憶點(diǎn)。

圖片

 

 

三、增強(qiáng)操作體驗(yàn)的情感氛圍

通過愛奇藝 APP 在端午節(jié)期間觀看視頻時(shí),單擊或者雙擊屏幕則會(huì)出現(xiàn)歡快舞動(dòng)的粽子形象,營造出節(jié)日氛圍。情感化的設(shè)計(jì)增強(qiáng)了操作體驗(yàn)度,趣味性的設(shè)計(jì)也營造出更好的感官體驗(yàn)。

 

 

四、帶給你美食誘惑的下拉刷新

麥當(dāng)勞在麥麥商城欄目的下拉刷新設(shè)計(jì)中,采用漢堡形象結(jié)合層級(jí)動(dòng)效進(jìn)行表達(dá),讓人眼前一亮。動(dòng)效拉長的漢堡不僅體現(xiàn)出份量感,激發(fā)用戶的食欲;漢堡形象就十分麥當(dāng)勞,展現(xiàn)出品牌關(guān)聯(lián)性。

源圖像

 

 

五、刷新狀態(tài)下的趣味化 IP 形象

IP 形象結(jié)合到刷新設(shè)計(jì)中的案例非常多,不僅可以帶來情感化的體驗(yàn),也能增加功能操作的趣味性。半次元在下拉刷新時(shí)不僅結(jié)合 IP 形象,還通過下拉的程度將形象拉長,最后再配合表情和動(dòng)態(tài)營造出趣味性。

 

 

六、滾動(dòng)的 3D 元素強(qiáng)化視覺感

隨著三維設(shè)計(jì)的流行,在 UI 場景中也掀起了流行趨勢,出現(xiàn)在視覺強(qiáng)化、圖標(biāo)設(shè)計(jì)、按鈕設(shè)計(jì)等元素中。吃貨筆記 APP 將 3D 元素的圖標(biāo)作為登錄界面背景設(shè)計(jì),配合滾動(dòng)的動(dòng)畫表達(dá),帶來了非常驚艷的視覺效果。強(qiáng)化視覺感和青春潮流的風(fēng)格,可以將用戶的關(guān)注度轉(zhuǎn)移,降低對(duì)于功能操作的排斥感,也提高了產(chǎn)品設(shè)計(jì)的感官體驗(yàn)。

圖片

 

 

七、積分兌換的可視化表達(dá)

積分兌換是增加用戶粘性的慣用形式,如何提高積分活動(dòng)的參與度是設(shè)計(jì)重點(diǎn)。麥當(dāng)勞 APP 將積分兌換模擬真實(shí)用餐場景,不同積分值對(duì)應(yīng)不同套餐,交互形式簡單易懂??梢暬脑O(shè)計(jì)表達(dá)增加用戶的理解度,實(shí)物照片增加美食誘惑,吸引用戶參與積分活動(dòng),用戶體驗(yàn)度較好。

 

 

八、個(gè)性化的界面布局設(shè)計(jì)

隨著產(chǎn)品設(shè)計(jì)越來越成熟且豐富多樣,在 UI 布局層面也不斷突破常規(guī)束縛,呈現(xiàn)出更大膽的設(shè)計(jì)解決方案。PODO 漫畫啟動(dòng)頁過度到首頁時(shí),布局做到自然過渡且風(fēng)格特異,打破常規(guī)的界面布局給人眼前一亮的體驗(yàn)。在瀏覽過程中不僅有視差感的體驗(yàn),動(dòng)效的結(jié)合也增加了設(shè)計(jì)的關(guān)注度。

圖片

 

 

九、3D 實(shí)景增強(qiáng)購物體驗(yàn)度

如今的生活方式已經(jīng)是足不出戶就可以滿足購物需求,眾多產(chǎn)品為了提高購物的真實(shí)感和體驗(yàn)度,利用 3D 實(shí)景逛店提高場景代入感。屋顏 APP 利用 3D 實(shí)景打造了線上體驗(yàn)館,虛擬空間體驗(yàn)過程中點(diǎn)擊家居產(chǎn)品即可進(jìn)一步了解商品信息。場景感的體驗(yàn)館讓商品展示更有代入感,也打造了不一樣的購物場景,帶給用戶更好的使用體驗(yàn)。

圖片

 

 

十、情感化的步驟設(shè)計(jì)

針對(duì)步驟或者流程設(shè)計(jì),除了簡單易懂的描述方式以外,通過配圖/圖形等來輔助用戶理解,往往可以使得傳遞效率事半功倍。每平每屋 APP 在展示裝修步驟的設(shè)計(jì)中,通過 IP 形象結(jié)合場景來表達(dá)不同步驟的場景感,不僅讓步驟信息更易理解,也使得單調(diào)的步驟變得更有趣味性,帶給用戶的感官體驗(yàn)也是非常不錯(cuò)的。

圖片

 

小結(jié)

越是簡單的設(shè)計(jì)越容易被人忽略,看著簡單做起來卻難以突破,想要做出差異化的設(shè)計(jì),就要從細(xì)微之處探索不一樣的表現(xiàn)形式。體驗(yàn)和分析優(yōu)秀的設(shè)計(jì),是為了提高我們的設(shè)計(jì)感知能力和積累解決設(shè)計(jì)問題的靈感。

希望今天為大家分享的設(shè)計(jì)案例可以帶給大家更多靈感,描述內(nèi)容僅代表個(gè)人觀點(diǎn),不足之處大家互相彌補(bǔ)。

 
 

原文地址:黑馬家族(公眾號(hào))

作者:黑馬青年

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》看著簡單,老司機(jī)做出來就完全不一樣(UI設(shè)計(jì)細(xì)節(jié)分析)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



探秘|QQ社交形象年度盤點(diǎn)設(shè)計(jì)密碼

seo達(dá)人



圖片

 

概述

每年年底,QQ都會(huì)迎來一年一度的年終盤點(diǎn)活動(dòng),幫助用戶實(shí)現(xiàn)QQ社交記憶回溯。通過生成用戶專屬的社交形象,拉近用戶和QQ之間的距離,體現(xiàn)品牌溫度。

 

一、設(shè)計(jì)目標(biāo)

年度盤點(diǎn)活動(dòng)不同于主題運(yùn)營活動(dòng),是對(duì)QQ用戶年度高光時(shí)刻的總結(jié)。在活動(dòng)設(shè)計(jì)目標(biāo)的設(shè)立上,我們希望塑造QQ溫暖品牌形象的同時(shí)清晰展示QQ用戶年度的社交記憶點(diǎn),通過創(chuàng)造用戶記憶點(diǎn),激發(fā)用戶分享。

圖片

 

二、創(chuàng)意構(gòu)思

我們從QQ用戶熟知的社交行為、場景出發(fā),進(jìn)行視覺元素延展。將用戶的瀏覽過程喻作QQ社交記憶的探索歷程。通過QQ元素等場景映射,喚醒用戶的社交記憶,最終形成用戶專屬的社交形象。

圖片

 

三、風(fēng)格設(shè)定

基于活動(dòng)的目標(biāo)我們衍生出以下設(shè)計(jì)關(guān)鍵詞(見下圖),簡潔有品質(zhì)是本次活動(dòng)視覺風(fēng)格的核心傳達(dá)目標(biāo)。

圖片

1、色彩

為凸顯回憶感知以及透傳QQ品牌。在色彩的選擇上我們使柔和的藍(lán)黃漸變色系,背景色系就像天空會(huì)跟隨活動(dòng)節(jié)奏、故事內(nèi)容而動(dòng)態(tài)變化,利用色彩變化傳達(dá)時(shí)光回溯的氛圍感知。

圖片

2、質(zhì)感

考慮到整體的風(fēng)格設(shè)定偏潔凈明快的感受,我們多以玻璃、半透明3s,啞光三類材質(zhì)為主。選擇透光性強(qiáng)與色彩融合度高的材質(zhì)搭配使用,讓畫面更具輕盈、簡約的品質(zhì)感。

圖片

 

四、視覺表現(xiàn)

1、信息傳達(dá)

年終盤點(diǎn)活動(dòng)與主題運(yùn)營活動(dòng)不同,繁冗的氛圍傳達(dá)并不等同清晰的信息傳達(dá),在活動(dòng)的設(shè)計(jì)上,我們希望一頁只講述一件事,弱化裝飾,突出主體內(nèi)容。

圖片

2、品牌透傳

場景內(nèi)我們?nèi)诤狭薗Q品牌調(diào)性的元素,如聊天aio、消息氣泡,QQ空間等,加強(qiáng)用戶代入感。

 

圖片

3、動(dòng)效編排

我們根據(jù)頁面場景的展示內(nèi)容類型,進(jìn)行動(dòng)畫節(jié)奏上的編排。保持信息傳遞的效率,并在需要氛圍強(qiáng)化的環(huán)節(jié)增強(qiáng)動(dòng)畫吸引力。營造靈動(dòng)的內(nèi)容瀏覽體驗(yàn),提升動(dòng)畫張力。

圖片

在動(dòng)畫的運(yùn)動(dòng)樣式上,我們提煉出映射QQ社交場景的動(dòng)態(tài)設(shè)計(jì)語言。通過模擬聊天氣泡出現(xiàn)、新消息通知彈出、空間訪客踩一踩等社交場景中的動(dòng)畫形式,透傳QQ品牌調(diào)性,增強(qiáng)動(dòng)畫表現(xiàn)力。

圖片

圖片

 

五、激發(fā)分享欲

從設(shè)計(jì)層面,如何激發(fā)用戶的分享欲?在本次活動(dòng)分享中用戶的專屬社交形象扮演著重要的角色,接下來我們將介紹影響社交形象品質(zhì)的三大設(shè)計(jì)因素。

 

圖片

1、形象設(shè)定

我們選用QQ作為社交形象主體,根據(jù)用戶不同的社交屬性去賦予其色彩、材質(zhì)的變化。在初步的生成方案上,我們嘗試挖掘更多的組合可能性,從QQ圍巾、嘴巴等部件進(jìn)行材質(zhì)變化。但三維的部件設(shè)計(jì)、審核成本高且組合起來多種情況形象差異性小。

圖片

圖片

為此我們降本提效精簡了生成邏輯,在鵝身上視覺強(qiáng)感知的場域進(jìn)行差異化設(shè)計(jì)。

圖片

2、構(gòu)成規(guī)則

我們將社交關(guān)鍵詞分為三大階級(jí)并衍生出社交形象構(gòu)成的梯度規(guī)則。從社交小白到社交天花板,不同強(qiáng)弱的社交屬性決定著鵝身的變化。例如低階的材質(zhì)表現(xiàn)使用的是石膏、木紋,形容人們?cè)谏缃簧夏驹G、寡言少語,而高階的鵝身質(zhì)感、色彩,圖案表現(xiàn)更加豐富。 

圖片

圖片

3、隱藏款埋入

在QQ形象設(shè)計(jì)上,我們根據(jù)不同的社交關(guān)鍵詞進(jìn)行了不一樣的設(shè)計(jì),包括樣式、材質(zhì)、顏色等,這些不一樣的設(shè)計(jì)在隱藏款上尤為突出。

圖片

例如針對(duì)社交關(guān)鍵詞“一呼百應(yīng)KOL“,此社交關(guān)鍵詞形容的是人氣高,是眾人的焦點(diǎn),為了體現(xiàn)這種超高人氣,QQ形象通體采用透明材質(zhì),并在內(nèi)部放置了很多不同的體現(xiàn)開心的黃臉表情。

圖片

圖片

在隱藏款“自帶光環(huán)的主角”的設(shè)計(jì)上,我們希望傳遞出受人矚目的光感,結(jié)合我們的生活,光線經(jīng)過玻璃后,通過不斷折射反射,能很好的傳遞出多彩和絢麗感覺,所以這款QQ形象通體采用了玻璃材質(zhì),強(qiáng)化和傳遞出受人矚目的主角光環(huán)。

圖片

圖片

隱藏款之外,其他更多QQ形象我們也會(huì)根據(jù)社交關(guān)鍵詞進(jìn)行不一樣的設(shè)計(jì)。

 圖片

圖片

圖片

 

六、形象展示

  • 金屬鵝 Metal Q

圖片

  • 玻璃鵝 Glass Q

圖片

  • 樹脂鵝 Resin Q

圖片

圖片

圖片

圖片

 

七、形象延展應(yīng)用

除此之外,我們?cè)诖汗?jié)賀卡活動(dòng)中還復(fù)用了部分鵝身形象,并為虎年設(shè)計(jì)了專屬的虎紋迷彩鵝。期待后續(xù)在運(yùn)營活動(dòng)中嘗試更多的個(gè)性化QQ形象,刷新IP,升華品牌。

圖片

 

結(jié)語

在當(dāng)今社會(huì)強(qiáng)調(diào)本我的趨勢下,活動(dòng)千人千面的屬性越發(fā)重要。將經(jīng)典的QQ形象與用戶社交特征相結(jié)合,傳遞具備獨(dú)特性、品質(zhì)感的品牌視覺表現(xiàn),更能拉近QQ與用戶的距離。我們相信在未來的年終盤點(diǎn)活動(dòng)中,QQ會(huì)帶給大家更多的驚喜,敬請(qǐng)期待吧!

圖片

 

原文地址:騰訊ISUX

作者:ISUX設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》探秘|QQ社交形象年度盤點(diǎn)設(shè)計(jì)密碼

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



日歷

鏈接

個(gè)人資料

存檔