首頁

圖標(biāo)篇 | 圖標(biāo)設(shè)計必備的基礎(chǔ)知識

ui設(shè)計分享達(dá)人

前言


做好圖標(biāo)設(shè)計是一個入門級UI設(shè)計師的必備技能之一,圖標(biāo)是界面中非常重要的組成部分,在實際的工作中,即便是一些工作多年且有一定經(jīng)驗的設(shè)計師,也很難保證自己設(shè)計的圖標(biāo)有多么完美。不同位置的圖標(biāo)在界面中所起到的作用不同、風(fēng)格也不同、其設(shè)計思路更是有所區(qū)別,例如金剛區(qū)、分類、標(biāo)簽欄、服務(wù)工具等。

用圖標(biāo)準(zhǔn)確的表達(dá)出實際含義,僅僅學(xué)其「形」是不夠的,需要對圖標(biāo)有較為全面、系統(tǒng)的認(rèn)識,了解圖標(biāo)的相關(guān)概念、正確的繪制方法及處理好一系列的細(xì)節(jié),本篇文章將介紹圖標(biāo)設(shè)計的具體方法及要點,幫你規(guī)避掉一些常見的問題,讓圖標(biāo)設(shè)計有理有據(jù)。





本期大綱


一、圖標(biāo)的定義

二、常見的圖標(biāo)風(fēng)格

三、性格與氣質(zhì)

四、設(shè)計規(guī)范與流程

五、常見問題及注意事項

六、圖標(biāo)資源

七、總結(jié)





一、圖標(biāo)的定義


1 什么是圖標(biāo)?

圖標(biāo)是一種具有高度概括性的圖形化標(biāo)識,在界面中與文案相互支撐、搭配使用,隱晦或直白的表達(dá)內(nèi)容的具體含義、屬性特征、形象氣質(zhì)等豐富的視覺信息。

從概念上來講,圖標(biāo)可分為廣義、狹義兩種,廣義指的是現(xiàn)實世界中的圖形符號、且有明確指向的含義,而狹義的圖標(biāo)指的設(shè)備界面中的符號,這些設(shè)備泛指承載互聯(lián)網(wǎng)產(chǎn)品的載體,如手機(jī)、電腦、iPad...等。在UI設(shè)計中主要具是針對狹義的概念。

圖標(biāo)設(shè)計是一門學(xué)問,在我們的認(rèn)知中,通常將圖標(biāo)理解為某個概念的抽象圖形,通過設(shè)計清晰易懂的圖形傳達(dá)出比文字更高效率的信息,同時提升界面的美觀程度。想要將圖標(biāo)設(shè)計的更加出色,則需要頻繁練習(xí)、不斷試錯、持續(xù)探究并嘗試新的風(fēng)格,所以很值得我們花費大量的時間去鉆研練習(xí)。


2 圖標(biāo)的基本特征

一個界面是由文字、圖標(biāo)、幾何圖形、圖片(音頻、視頻)組成,從UI設(shè)計師的角度,相對來說,其他三種元素大多運用到的是排版技巧,而圖標(biāo)則是需要繪制、創(chuàng)作的元素,在沒有圖標(biāo)的情況下,純文字也可以代替,可為什么貴還要費力費時的設(shè)計圖標(biāo)呢?原因主要有兩點:

首先,圖標(biāo)作為一種圖形符號的存在,跟文字的復(fù)雜程度相比,在識別效率上有著先天的優(yōu)勢,因文字需根據(jù)語種、長短的不同,所占用的界面空間資源就不同,在文字較多的情況下,大大減低了用戶瀏覽速度及信息傳達(dá)的效率,固圖標(biāo)將文字信息進(jìn)行了濃縮。好的圖標(biāo)不僅易于識別、效率更高,且讓界面更加簡潔,所以我們常見的圖文結(jié)合界面,絕大多數(shù)都是圖標(biāo)在上、文字在下,或者圖標(biāo)在左、文字在右,這些設(shè)計足以說明圖標(biāo)視覺傳達(dá)的優(yōu)先級高于文字。

其次,不同風(fēng)格、樣式的圖標(biāo)能讓界面看起來更美觀,提高用戶的視覺舒適度。設(shè)想一下,如果界面沒有任何圖標(biāo)的點綴,即便用戶也能使用,但看多來多少都有些枯燥無味,全部用文字來理解內(nèi)容還容易引起視覺疲勞。





二、常見的圖標(biāo)風(fēng)格


1 扁平風(fēng)格

扁平風(fēng)格圖標(biāo)主要是由形狀的描邊、填充進(jìn)行各種組合搭配來表達(dá)不同的含義,并通過不同的色彩體現(xiàn)出不同的視覺效果,最常見配色有以下幾種:

◇ 單色:簡潔、清晰視覺效果,常見于基礎(chǔ)功能圖標(biāo)。例如:B端功能入口,移動端個人中心、二/三級頁面的工具欄等,也有很多app的金剛區(qū)利用底色塊襯托反白的圖標(biāo)。

◇ 雙色:是很常見的功能性圖標(biāo),至少由兩個以上的元素組成,在單色的基礎(chǔ)上加以色彩點綴,讓本身就不是很突出的元素不再單調(diào),如果融入品牌色,能提升整個界面品牌調(diào)性,適用場景跟單色圖標(biāo)相比則范圍更廣。

◇ 多色:至少由三種或以上的形狀、顏色組合而成,常用于金剛區(qū)、產(chǎn)品分類列表、定制化菜單等。

◇ 漸變:漸變色的圖標(biāo)顯得較年輕化,可以是單元素的漸變或多元素的漸變組合,能映射出一種活潑、熱烈的氛圍。例如:視頻、直播等娛樂類型的APP,或車載UI等。

◇ 不透明度:調(diào)整圖標(biāo)中某個元素的不透明度,可在不變換色系的情況下豐富配色細(xì)節(jié),還能與底色融合的更加細(xì)膩,解決多色漸變視覺跳躍的問題。

另外,在UI界面中,扁平化風(fēng)格圖標(biāo)使用最多的當(dāng)屬線性、面性、線面結(jié)合這三種類型。


1)線性

線性圖標(biāo)主要是通過線條描邊勾勒出來的圖形,在界面中的尺寸普遍偏小,其線條不能過于復(fù)雜,否則將會影響辨識度,看似不多的簡單線條搭配不同的色彩,則有很大的調(diào)整空間。


2)面性

面性圖標(biāo)主要通過剪影的形式來制作抽象的形體,相比線性圖標(biāo)則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設(shè)計感,以達(dá)到多種視覺表現(xiàn)的效果。


3)線面結(jié)合

線面結(jié)合的圖標(biāo)既有線段或輪廓、又有填充的色塊,相比純線/面性單一樣式的圖標(biāo)則細(xì)節(jié)更加豐富,如果把控到位,會有更好的視覺效果及信息傳達(dá)的效率,也不失趣味性。


2 擬物化風(fēng)格

擬物風(fēng)格的圖標(biāo)主要通過細(xì)節(jié)和光影、根據(jù)現(xiàn)實世界中的物品塑形打造出圖形立體效果,非常考驗設(shè)計師的造型繪制、技法表現(xiàn)能力。這種風(fēng)格的圖標(biāo)有著極強(qiáng)的代入感,能讓用戶快速領(lǐng)會圖標(biāo)所傳達(dá)出的意圖及氣質(zhì)。

因為擬物化圖標(biāo)信息元素的高復(fù)雜度及突出的視覺效果非常搶眼,在頁面中頻繁出現(xiàn)會成為干擾其他信息的存在,游戲類應(yīng)用中使用的非常普遍(不過多贅述)。在其他類型的應(yīng)用中,大部分出現(xiàn)在營銷類型的界面,例如專題頁、成就榜、會員中心等。


3 輕質(zhì)感風(fēng)格

跟擬物化圖標(biāo)相比,輕質(zhì)感就不會有太多復(fù)雜的元素,主要通過各種色彩漸變、發(fā)光、投影等圖層樣式體現(xiàn)出非常柔和的立體感,整體風(fēng)格偏年輕化,給人輕盈、簡潔及精致的感覺。在設(shè)計過程中,請使用干凈且和諧的配色,主要使用在界面較大區(qū)域的位置。


4 磨砂玻璃風(fēng)格

不僅僅是頁面背景有毛玻璃風(fēng)格,圖標(biāo)的毛玻璃風(fēng)格也很出彩,主要通過背景模糊、疊加、剪切圖層來實現(xiàn)(網(wǎng)上很多教程)。輕量漸變搭配毛玻璃的朦朧感,可以體現(xiàn)出圖標(biāo)的質(zhì)感與神秘感。

除上述這幾種風(fēng)格的圖標(biāo)之外,還有例如2.5D、3D、像素風(fēng)、新擬態(tài)...等,但在UI設(shè)計中并不常用,就不一一舉例說明了。





三、性格與氣質(zhì)


1 性格走向(描邊/拐角)

力量型:粗線條、直角拐點,給人一種力量、狂野的感覺,常用于體育、健身、機(jī)械類型的產(chǎn)品;

可愛型:粗線條、圓角設(shè)計,看起來活潑可愛,給人舒適、飽滿的感覺,在兒童、教育類產(chǎn)品中很常見;

嚴(yán)謹(jǐn)型:細(xì)線條、直角拐點,看起來工整、嚴(yán)謹(jǐn),中規(guī)中矩,適合政府、法律類型的產(chǎn)品;

精致型:細(xì)線條、圓潤的拐角,柔和、干凈、纖細(xì)且精致的感覺,很適合極簡風(fēng)格的設(shè)計,在藝術(shù)、金融、珠寶等奢華類產(chǎn)品中比較常見。


2 動態(tài)效果

如果想要突出金剛區(qū)、工具列表中的某個功能入口,將圖標(biāo)設(shè)計成動態(tài)效果,既能保持整體圖標(biāo)風(fēng)格的統(tǒng)一、又能單獨突出功能的重要性,起到強(qiáng)調(diào)的作用,用來吸引用戶的注意力,引導(dǎo)用戶操作,提升其點擊率。切記動效圖標(biāo)不能過多,當(dāng)什么都突出了等于什么都沒有突出。

其次,在年輕化、娛樂類型的產(chǎn)品Tab欄中的圖標(biāo)切換時,加入動態(tài)效果,可起到畫龍點睛的作用,還能通過動效表達(dá)出不同的情緒,降低切換時的枯燥感,好的Tab動效能傳達(dá)出整個產(chǎn)品的氣質(zhì)。

最后,如果有類似運營或短期內(nèi)的活動,需要吸引用戶注意但又不適合固定在界面中的某個位置,這時可以設(shè)計一個動態(tài)圖標(biāo)懸浮在設(shè)備某個位置(注意用戶體驗及交互原則),既不過多的占用頁面資源,還能同時顯示在多個界面,一舉多得。

(動效圖標(biāo):@墨染ART 授權(quán))





四、設(shè)計規(guī)范與流程


遵循圖標(biāo)設(shè)計規(guī)范有利于設(shè)計師之間的合作及接下來的設(shè)計,以及產(chǎn)品整體圖標(biāo)風(fēng)格的統(tǒng)一性,起到約束的作用,即便在更換設(shè)計師的情況下,也不至于出現(xiàn)較大的問題。在制定合理的設(shè)計規(guī)范前需要先了解圖標(biāo)到底有哪些規(guī)范,應(yīng)從哪些方面入手,以便接下來的圖標(biāo)設(shè)計順利進(jìn)行。


1 網(wǎng)格尺寸比例

為了保持圖標(biāo)元素的平衡,尺寸大小需要保持一致,通常我們會建立基礎(chǔ)網(wǎng)格尺寸進(jìn)行圖標(biāo)的繪制,常見的網(wǎng)格尺寸有16、24、36、48、64、128、512、1024,這些網(wǎng)格尺寸并非固定,也會根據(jù)設(shè)計中的特殊尺寸而變化。

一個圖標(biāo)系統(tǒng)包括網(wǎng)格尺寸和圖標(biāo)元素兩部分,設(shè)定好網(wǎng)格尺寸后,就需要用keyline來約束圖標(biāo)形狀的長、寬比例了。最終設(shè)計的圖標(biāo)大小并不是跟隨網(wǎng)格尺寸,而是根據(jù)不同的形狀占比受制于圖標(biāo)keyline,最終形成統(tǒng)一的視覺大小。

從上圖中可以看出,相同尺寸的圖標(biāo)在真實的視覺中相差很大,這就好比一個100像素的圓形、跟100像素的方形相比,站在邏輯角度,大小是相同的,但在視覺上,一定是方形顯得更大。所以我們常說的圖標(biāo)大小相同,并非真實尺寸,而是視覺感受。


2 圖標(biāo)keyline

為保持圖標(biāo)視覺上的一致性和平衡感,需要先繪制keyline用來指導(dǎo)、規(guī)范圖標(biāo)設(shè)計。keyline由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成,網(wǎng)格的大小需保持4的倍數(shù),便于不同尺寸的圖標(biāo)都能適配,可使用24*24px的網(wǎng)格尺寸為基準(zhǔn),其他尺寸的圖標(biāo)可通過增加倍數(shù)以此類推,如48*48px、72*72px......

下圖是以24px尺寸的網(wǎng)格參考基準(zhǔn)示例(出血為2px):


3 確定圖標(biāo)風(fēng)格

根據(jù)產(chǎn)品屬性及目標(biāo)用戶并結(jié)合應(yīng)用場景,找到最符合自身產(chǎn)品性格、氣質(zhì)的圖標(biāo)設(shè)計風(fēng)格,例如健身應(yīng)用屬力量、粗礦類型,圓角、曲線適合女性產(chǎn)品等,在前面的「性格與氣質(zhì)」中有舉例說明。


4 圖標(biāo)繪制

經(jīng)過圖標(biāo)風(fēng)格的確定,圖標(biāo)細(xì)節(jié)便是接下來繪制過程的核心部分,對線性圖標(biāo)來說,注重的是線條的粗心,而面性圖標(biāo)則注重各小圖形之間的距離,所以在繪制時,需要保持線條、間距的統(tǒng)一,方便后期的圖標(biāo)更新迭代。


1)線性描邊粗細(xì)

我們以iOS@2x為基準(zhǔn)(避免@1x的3px描邊變成1.5px,小數(shù)點),可適配最2px、3px、4px最常用的描邊粗細(xì),4px視覺較重,用于優(yōu)先級較高區(qū)域的功能性圖標(biāo),2px看起來會顯得更加精致,在設(shè)計中,還需根據(jù)產(chǎn)品的行業(yè)屬性及調(diào)性來確定描邊的粗細(xì),并統(tǒng)一起來。


2)面性正負(fù)形間距

面性圖標(biāo)需要確保每個單獨的形狀之間有足夠的間距,以24px大小的形狀為例,其間距不能小于1px,以此類推,雖然未規(guī)定上限,但間距也不宜太大,否則無法相互組合關(guān)聯(lián),以實際視覺的舒適度為準(zhǔn)。


5 創(chuàng)意提取

根據(jù)行業(yè)類型及風(fēng)格進(jìn)行創(chuàng)意設(shè)計,如線性統(tǒng)一斷點、融入品牌基因、單個元素傾斜、節(jié)日氛圍烘托、修飾元素等,為圖標(biāo)塑造靈魂或傳遞更多信息而進(jìn)行的二次創(chuàng)作。





五、常見問題及注意事項


1 識別性

圖標(biāo)存在的意義,主要是為了快速傳遞信息,不能讓其成了無用的裝飾品。隨著互聯(lián)網(wǎng)的普及、時間的積累,人們對一些線上圖標(biāo)信息的隱喻已根深蒂固,早就形成了慣性思維,所以我們設(shè)計的圖標(biāo)必須要符合用戶的認(rèn)知,能讓用戶快速理解,即便出現(xiàn)個別特殊情況,也要用文字清楚的標(biāo)注說明,否則一旦讓用戶產(chǎn)生疑惑,圖標(biāo)就起了負(fù)面作用,在很大程度上影響使用體驗。符合認(rèn)知的圖標(biāo)能讓用戶下意識的理解且接近心理預(yù)期,減少學(xué)習(xí)成本,提升使用效率。


2 簡潔美觀

圖標(biāo)是將現(xiàn)實世界中的事件/事務(wù)用抽象的圖形表現(xiàn)出來,如果過于追求完美而設(shè)計的太復(fù)雜,還不如直接上圖片來的快,所以不能過于展現(xiàn)真實物品的細(xì)節(jié),最終設(shè)計出正確而不失真的圖標(biāo)尤為重要,這樣既能用于傳遞信息,又便于用戶快速且清晰感知。


3 視覺對齊

為確保視覺平衡,異形元素在使用系統(tǒng)自動對齊后,會有一定的偏差,需手動微調(diào)進(jìn)行視覺對齊。


4 保持一致

針對大型項目,要想整個家族的圖標(biāo)更加和諧,保持相同的樣式及設(shè)計原則著實不易,尤其是在多人完成設(shè)計的情況下,事先有一個清晰的設(shè)計原則和規(guī)范是必不可少的。圖標(biāo)都有著對應(yīng)的視覺重量,例如描邊粗細(xì)、填充模式、繁簡程度等屬性,需要做的就是控制好這些關(guān)鍵因素,讓整體看起來視覺重量相同且能相互關(guān)聯(lián)組合到一起,保持所有圖標(biāo)的一致性。


5 最小間隙

單個圖標(biāo)的各元素之間要有呼吸感,需要適當(dāng)?shù)牧舭?,如果描邊過大,整個條看起來感覺像糊成一團(tuán)或臃腫不堪,如果存在類似問題,可通過減小描邊值或降低圖標(biāo)的復(fù)雜程度來解決。


6 使用2的倍數(shù)

以偶數(shù)為單位的設(shè)計便于數(shù)據(jù)的計算(2的倍數(shù)),例如正負(fù)形間距、描邊值等,在iOS@2x設(shè)計下,@1x也不會出現(xiàn)小數(shù)點。在移動端設(shè)計中,最小的圖標(biāo)為24px,可被2、3、4、6、8、12整除,也是可以被整除最多的數(shù)值,因此,可靈活的等比縮放。


7 延展性

即便做好了前面的一切,圖標(biāo)設(shè)計工作也并未完成,需要做的是持續(xù)測試圖標(biāo)的可用性,做好后續(xù)的完善與優(yōu)化,沒有最好、只有更好,以確保上線后的效果和后續(xù)的迭代。





六、圖標(biāo)資源庫


阿里巴巴矢量圖標(biāo)庫:https://www.iconfont.cn/,90%以上常見的矢量圖標(biāo)下載;


飛書官方圖標(biāo)庫:https://iconpark.oceanengine.com/official,海量資源可在線修改,調(diào)整描邊、填充、單/雙/多色、端點后下載SVG格式圖標(biāo)。

雖然上述圖標(biāo)資源基本能滿足我們的日常設(shè)計所需,但僅僅只能是作為參考而已,一味的圖方便、投機(jī)取巧只會毀了自己的動手、創(chuàng)新能力。





七、結(jié)語


圖標(biāo)設(shè)計是一個非常龐大的版塊,且有很多個分支,例如:金剛區(qū)、標(biāo)簽欄、應(yīng)用圖標(biāo)...等,每個分支都有自己的一套設(shè)計法則,我們需要在不斷的學(xué)習(xí)與創(chuàng)新中獲得更多經(jīng)驗。一篇文章不足以道出圖標(biāo)設(shè)計的精髓,但可以在不斷沉淀、相互探討、持續(xù)的學(xué)習(xí)中一起進(jìn)步。

下篇「圖片」文章再見。

原文地址:站酷
作者:飛鷹Article

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

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

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

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




按鈕篇 | 做好設(shè)計細(xì)節(jié),你需要了解這些!

ui設(shè)計分享達(dá)人

前言


說起按鈕,很多做設(shè)計的小伙伴是熟悉的不能再熟悉了,它是我們在設(shè)計界面時最常用、最重要的組件之一,也是易被忽略的元素之一,所以在設(shè)計之前,做好對按鈕組件的認(rèn)識、了解非常有必要。

從我們有記憶認(rèn)知開始,按鈕就時刻在和我們打交道,墻上的電燈開關(guān)、電視機(jī)的調(diào)節(jié)按鈕、遙控器的按鈕等等,這些物理按鈕不僅僅是當(dāng)下UI按鈕組件的前身,且不會消失,依然會有很多非數(shù)字化的產(chǎn)品及機(jī)器設(shè)備在持續(xù)延用,不管如何演變,基本不會脫離實物參考。按鈕最吸引我們的莫過于通過簡單觸摸就能輕松滿足自己的行為需求,按鈕設(shè)計的直觀性及易用性會影響著人們完成一件事情的意愿及效率。

在UI設(shè)計中,如何完美的避開問題、把按鈕設(shè)計的更好,是每個設(shè)計師需要深思的問題。按鈕設(shè)計的好壞,將直接關(guān)系著用戶引流、觸發(fā)行動、產(chǎn)品轉(zhuǎn)化率等至關(guān)重要的問題。另外,精致的按鈕也會讓整個頁面的視覺提升檔次。本篇文章將對按鈕作出解析,介紹在設(shè)計按鈕時需要著重考慮的因素及設(shè)計標(biāo)準(zhǔn),并將理論付諸于實踐。





分享目錄


一、按鈕的作用

二、按鈕的類型

三、按鈕的狀態(tài)

四、按鈕的大小及風(fēng)格

五、常見誤區(qū)及避坑指南

六、總結(jié)





一、按鈕的作用


1. 什么是按鈕

在UI設(shè)計中,按鈕是一個明確指示交互行為動作的組件,主要用于觸發(fā)某一個即時操作,很多時候,我們需要采取下一步行動或返回到上一步,都要通過按鈕(部分場景可用手勢交互)來完成。

在視覺層面,按鈕的組成看起來很簡單,由一個底色塊/線框加上一組文案即可組成,但真正要將按鈕設(shè)計好,僅停留在視覺層面并不嚴(yán)謹(jǐn),其大小、位置、色值、文案...等每一個細(xì)節(jié)的處理都關(guān)系著用戶的操作體驗,下面的這幾種情況大家肯定有碰到過:


2 按鈕有什么用

通常,我們在設(shè)計按鈕之前,需要詳細(xì)理解按鈕所存在的意義,哪里該加、哪里不該加、為什么要加,主要從以下幾點來體現(xiàn)按鈕的作用:


2.1 功能性操作

這種按鈕很常見,比如展開、收起、下拉、加減等,按鈕視覺較弱,重點強(qiáng)調(diào)該頁面的功能,突出主體信息,在操作之后會發(fā)生一些交互變化,這類按鈕主要起到功能形態(tài)的作用。

2.2 明確引導(dǎo)下一步操作

當(dāng)用戶完成一個頁面的內(nèi)容填充或信息確認(rèn),就會失去視覺焦點,而下一步按鈕就會聚焦視覺重心,通過文案告知用戶下一步該怎么做,常見的有保存、下一步、支付、確定...等。

另外,用戶需要完成某個任務(wù),但同一個任務(wù)流程的信息、種類較多,這時就會通過分步驟、分頁的方式,并在每個步驟的末尾增加一個能起到上下銜接作用的按鈕,明確引導(dǎo)用戶進(jìn)入下一步操作,以此來提升用戶完成整個任務(wù)的成功率。

2.3 培養(yǎng)行為習(xí)慣

如果在操作某個按鈕之后得到了一定的利益,且能持續(xù)為用戶帶來價值,那么不妨將這個按鈕設(shè)計的更醒目,并在同等級但不同的地方保持視覺的統(tǒng)一,持續(xù)培養(yǎng)用戶點擊習(xí)慣,當(dāng)用戶下次再看到類似這種按鈕時,慣性思維就會引導(dǎo)點擊。


3 按鈕的組成

在大部分的認(rèn)知中,最常見的按鈕就是一個底色塊加上一句文案就完成了,殊不知一個好的按鈕需要經(jīng)過很多細(xì)節(jié)的把控,才能發(fā)揮出按鈕的最大作用。例如文案的長短/邊距、容器的大小/圓角、填充色的主/次之分...等,下面我們來看看一個按鈕到底是由哪些屬性、元素組成。

◇ 圓角:傳達(dá)出按鈕的氣質(zhì),決定用戶的視覺感受,最常見的為小圓角,也有較為嚴(yán)謹(jǐn)、力量型的全直角、卡通可愛、年輕化風(fēng)格的全圓角。

◇ 圖標(biāo):用于按鈕含義的圖形化抽象表達(dá),例如加載中、編輯;

◇ 容器:整個按鈕的載體,容納文案、圖標(biāo)等元素;

◇ 邊框:確定按鈕的邊界,常用于次級按鈕描邊;

◇ 文案:用文字表達(dá)按鈕的含義,精簡文案;

◇ 背景:表達(dá)按鈕的當(dāng)前狀態(tài),對按鈕合理的使用主體色能有效傳播品牌氣質(zhì);

◇ 投影:讓按鈕具有層次感,配合漸變背景能體現(xiàn)出微質(zhì)感的效果。





二、按鈕的類型


1 功能類型

按照功能屬性分類,可將按鈕類型分為流程控制和功能選項操作。

流程控制:常見的傳統(tǒng)按鈕,如支付、下一步、確定、保存等,容器承載著圖標(biāo)、圖標(biāo)+文案、文案。

功能選項:開關(guān)/加減控件、標(biāo)簽欄/分類、狀態(tài)切換等,操作之后只針對當(dāng)前頁面做出屬性的調(diào)整,不涉及流程的變化。


2 視覺樣式(橫向)

視覺樣式有所區(qū)別,在不同的頁面可能存在同等級的權(quán)重。

常規(guī)按鈕:最常見的按鈕,當(dāng)同一個頁面出現(xiàn)多個常規(guī)按鈕時,會有主次之分;

虛線按鈕:常用于添加、上傳等操作;

文本按鈕:僅用文字作為觸發(fā)點,部分會用主色、右側(cè)箭頭、下劃線等方式突出。


3 層級分類(縱向)

高權(quán)重:帶有填充色的主操作按鈕,當(dāng)同一個頁面存在多個按鈕,只允許存在一個高權(quán)重(主操作)按鈕;

中權(quán)重:帶邊框輪廓的概述按鈕,同一頁面可存在多個中權(quán)重的按鈕;

低權(quán)重:純文本按鈕,以及淺色填充+淺色文字的按鈕,同一頁面可存在多個低權(quán)重按鈕。





三、按鈕的狀態(tài)


在設(shè)計按鈕時,為了體現(xiàn)按鈕不同的具體含義,以及后續(xù)設(shè)計、開發(fā)的統(tǒng)一性,明確按鈕交互樣式是設(shè)計過程中不可缺少的重要組成部分。設(shè)計師需要在不干擾界面視覺的前提下,對每個按鈕的樣式、狀態(tài)有清晰的定義,與其他元素、布局區(qū)分開來,以確保按鈕的可供性。常見的狀態(tài)主要有以下幾種:

◇ 待激活狀態(tài):需要完成一定的操作、或有一個以上必要的前置條件后才允許交互;

◇ 正常狀態(tài):按鈕的正常顯示狀態(tài),可進(jìn)行交互操作;

◇ 點擊狀態(tài):觸碰效果,表示按鈕正在進(jìn)行交互且未結(jié)束,會在正常狀態(tài)的基礎(chǔ)上增加一個純黑色不且透明度為10%的蒙層,交互完成后,即會引發(fā)此按鈕的真實作用;

◇ 加載狀態(tài):產(chǎn)生交互后沒有立即執(zhí)行、或系統(tǒng)需要一定的時間才能執(zhí)行完成;

◇ 禁用狀態(tài):系統(tǒng)默認(rèn)暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能使用。





四、按鈕的大小及風(fēng)格


1 按鈕的尺寸

在PC端設(shè)計按鈕時,因為鼠標(biāo)的精準(zhǔn)點擊,我們通常會將按鈕設(shè)計的小一些,同時也能讓整個界面看起來更加細(xì)膩,只要不影響操作,36px~48px范圍內(nèi)的按鈕是比較常見的。但移動端的按鈕設(shè)計,我們要更多的考慮到物理尺寸,即手指(指尖)在操作時需占用的實際范圍。

iOS的設(shè)計規(guī)范中,將按鈕的最小點擊區(qū)域規(guī)定為44pt,一旦小于這個數(shù)值,操作時就會出現(xiàn)精準(zhǔn)度較低的情況,導(dǎo)致操作失誤或無效。

在實際的iOS界面中,很多應(yīng)用在設(shè)計按鈕時并未嚴(yán)格遵循最小44pt的這個標(biāo)準(zhǔn),例如很多一、二級界面的次級功能入口,有些連30pt都不到,也并未對用戶造成多大的影響,可能是對應(yīng)的功能權(quán)重、用戶點擊頻率都非常低的原因,還有一部分文字按鈕,其本身永遠(yuǎn)都不可能達(dá)到最小的觸控標(biāo)準(zhǔn)(觸控?zé)釁^(qū)加大即可),所以關(guān)于按鈕的尺寸大小并非規(guī)定的很死板。

費茨定律告訴我們「目標(biāo)尺寸越大,移動至目標(biāo)所花費的時間就越短」,所以,在滿足手指觸控范圍的同時,還要根據(jù)所對應(yīng)功能的權(quán)重占比來適當(dāng)調(diào)節(jié)按鈕的大小。不難理解,當(dāng)某個元素的尺寸越大就越吸引眼球,就更容易被視覺捕捉到,也更容易被「點擊」,精準(zhǔn)度被降低的同時,也減少了用戶的操作成本。

我們以8像素柵格系統(tǒng)、iOS的2倍圖為例,較為常見的有:小型-64px、中型-80~88px、大型-98px、超大型-隨機(jī)這四種按鈕。


2 按鈕的風(fēng)格

在UI設(shè)計中,幾乎每個頁面都存在按鈕,樣式、種類也有很多,但設(shè)計風(fēng)格常見的也就幾種,例如扁平化、微質(zhì)感、擬物化、新擬態(tài)(概念)...


2.1 扁平化按鈕

通常在容器中填充一個純色即可,沒有多余的視覺干擾,操作簡便,這種類型的按鈕一般在應(yīng)用中用的最多。例如:工具型應(yīng)用、B端應(yīng)用等。

2.2 微質(zhì)感按鈕

相比扁平化,填充漸變色再加上淺淺的投影,不僅能保持信息內(nèi)容的簡潔、讓用戶產(chǎn)生更強(qiáng)的操作欲望,還能讓頁面具有品質(zhì)感,更加耐看。例如:年輕化應(yīng)用、娛樂類應(yīng)用、兒童應(yīng)用等。

2.3 擬物化按鈕

大多設(shè)計的很立體,3D質(zhì)感、屬性樣式豐富多彩,參考現(xiàn)實世界中的事務(wù)或攝取應(yīng)用場景中的某些元素,使其更加逼真,有較強(qiáng)的代入感。例如:游戲類應(yīng)用、H5專題、運營banner等。

2.4 新擬態(tài)按鈕

2021年風(fēng)靡一時,幾乎無人不知,但要想落地卻不太現(xiàn)實,實用性不強(qiáng),也只能在飛機(jī)稿中出出風(fēng)頭,隨著時間的流逝,逐漸銷聲匿跡,不知哪天會不會經(jīng)改良后再次面世(當(dāng)初扁平化問世,也是幾經(jīng)波折,經(jīng)多年改良才逐漸被大眾所接受)。目前只有少數(shù)工具類應(yīng)用使用了新擬態(tài),例如:計算器、AI設(shè)備控制、有道云筆記等。





五、常見誤區(qū)及避坑指南


1 主/次操作層級分明

當(dāng)同一個頁面出現(xiàn)多個按鈕時,只允許存在一個主操作按鈕,其他不做特別設(shè)定。當(dāng)然,如果次要操作較多,也不益過多的出現(xiàn)次級按鈕,可根據(jù)權(quán)重降級處理,以小圖標(biāo)或文字按鈕的方式呈現(xiàn)。


2. 統(tǒng)一樣式

主/次操作按鈕要統(tǒng)一樣式,用戶需操作時,盡可能的減少其思考及選擇時間,按鈕應(yīng)該迎合用戶固有認(rèn)知及慣性思維,節(jié)省時間成本,提高操作效率。


3. 圓角值

在大多數(shù)界面設(shè)計中,我們通常所見到按鈕還是小圓角和全圓角居多,也有部分按鈕完全直角,需要根據(jù)產(chǎn)品的行業(yè)屬性與氣質(zhì)來選擇最合適的圓角類型。不管如何,盡量避免大圓角(卡片除外)按鈕,不方不圓、不倫不類的,顯的不夠成熟也不好看。


3.1 小圓角

小圓角按鈕的圓角值通常控制在高度的1/5、1/6,兒童類型的應(yīng)用也有1/4(較大)的,并非絕對值。如果習(xí)慣使用8像素網(wǎng)格,根據(jù)按鈕的尺寸大小,直接將圓角值固定在8px、16px、24px(較大)這幾個數(shù)值,能減少設(shè)計組件的數(shù)量,也利于開發(fā)做組件封裝后續(xù)調(diào)用。

3.2 全圓角

全圓角按鈕的圓角值固定為高度的1/2,或者在軟件的圓角設(shè)置中直接將數(shù)值拉到極限。

3.3 直角

不設(shè)圓角值,在PC端較為常見,也有部分較為嚴(yán)謹(jǐn)?shù)囊苿佣藨?yīng)用使用直角按鈕。


4. 按鈕中的文字

按鈕中的文字要便于用戶理解,不能過于陌生或繞口,用戶碰到不易理解的信息會產(chǎn)生困惑,甚至誤導(dǎo)用戶導(dǎo)致操作失誤從而造成損失。除此之外,文字還需要精簡,不能過多或折行且能合理的引導(dǎo)用戶完成操作。

上圖的文案歧義就很明顯,自以為聰明的設(shè)計師想要挽留用戶,刻意將主次按鈕樣式對換,希望用戶操作不成功,那么用戶在需要取消訂單時就疑惑了,到底是點擊「確定」還是主操作按鈕「取消」才能取消成功呢?或許稍加思考,用戶也能反應(yīng)過來,但無疑增加了選擇難度、思考時間及操作成本。



5. 文字與按鈕比例

按鈕中的文字太大或太小都會影響用戶對信息接收的效率,大小比例需要適中。文字太大會感覺很擁擠(跟大家衣服買小了感覺一樣),沒有呼吸感,要給文字四周留下足夠的空間,同時文字太小會顯得小氣,看起來也會比較吃力,不利于信息接收。


6. 按鈕與其他組件的區(qū)分

設(shè)計好按鈕組件之后,頁面中的其他組件或元素要與按鈕有很明顯的區(qū)別,避免讓用戶產(chǎn)生不必要的誤解。


7. 彈窗主/次按鈕的位置

在彈窗中,主按鈕是在左?還是在右?這是一個爭論不休的問題,那么不爭了,在移動端的彈窗設(shè)計中,主按鈕靠右就行了,不一定絕對正確,但絕對不是錯的。根據(jù)調(diào)查數(shù)據(jù)顯示,單手使用右手操作手機(jī)的用戶比左手操作手機(jī)的用戶量高,且用戶也有一定的意識,左側(cè)為上一步、右側(cè)為下一步,頂部左側(cè)為返回,右側(cè)為保存或確定。


8. 無障礙設(shè)計

可訪問性是按鈕設(shè)計最重要目標(biāo)之一,不僅要樣式統(tǒng)一,還應(yīng)符合用戶的認(rèn)知,讓用戶能快速知曉這個元素能否點擊?點擊之后會發(fā)生什么?甚至有種似曾相識的感覺。如果將按鈕樣式設(shè)計的與用戶認(rèn)知有較大的偏差,不易于用戶理解。


9. 減少使用禁用按鈕

在表單設(shè)計中,大部分都需要用戶完成一定任務(wù)之后才能正常操作下一步按鈕,在完成之前,需少用禁用按鈕,在前面有講到「待激活狀態(tài)」,即在按鈕中填充淺淺的主體色等待用戶完成任務(wù)激活。

通常系統(tǒng)默認(rèn)不允許操作或存在時間限制會用到填充為灰色的禁用按鈕,即便如此,也要盡量讓系統(tǒng)將其隱藏,萬不得已的情況下需要在按鈕附近說明情況,以免使用不當(dāng)引起用戶的負(fù)面情緒。


10. 投影的使用

在給按鈕添加投影時,選擇灰色或純黑色加調(diào)整不同明度即可滿足基本效果,但如果想要更好的視覺體驗,可以基于按鈕本身的色值來調(diào)整,讓投影效果看起來更舒適,跟頁面更搭。另外,切勿過度使用投影,寧缺毋濫,若按鈕的投影太深,看起來粗糙臟亂,還不如不用,顏色較淺的按鈕盡量不使用投影,否則可能會影響按鈕的識別度,讓這個頁面看起來不夠清爽。





六、總結(jié)


對于設(shè)計師來說,按鈕作為設(shè)計組件之一,有很多細(xì)節(jié)容易被忽略,我們需要對每一個細(xì)小的元素進(jìn)行深入思考,如論任何大小組件,都需要做到精益求精,才能給用戶帶來更好的使用體驗。

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

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

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

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

2022年標(biāo)志設(shè)計趨勢:標(biāo)志的未來

ui設(shè)計分享達(dá)人

2021年,標(biāo)志設(shè)計師朝著更大膽、更具創(chuàng)新性的設(shè)計邁出了一大步。與平面設(shè)計趨勢類似,品牌推廣大量采用軟循環(huán)動畫和鮮艷的配色方案。它還開辟了實驗排版,鼓勵創(chuàng)造性思維重新審視標(biāo)志設(shè)計。

2022年的標(biāo)志設(shè)計趨勢很可能會延續(xù)這一大趨勢,我們希望看到上述美學(xué)在全球范圍內(nèi)得到重塑。您會看到設(shè)計師同樣選擇極簡主義和卡通標(biāo)志、3D 和平面標(biāo)志、花卉和文字標(biāo)志。我們認(rèn)為2021年是創(chuàng)作自由的一年。然而,看起來在2022年,我們將看到它真正的肆無忌憚。

1) 簡單的幾何圖形和基本形狀

2) 高大的標(biāo)志

3) 飽和顏色和漸變

4) 象征主義和極簡主義代替現(xiàn)實主義

5) 涂鴉和草圖

6) 粗體字標(biāo)標(biāo)志

7) 無襯線標(biāo)志

8) 花藝和微妙的裝飾

9) 黑白標(biāo)志

10) 3D與平面樣式

簡單的幾何圖形和基本形狀

在2022年,擁有基于復(fù)雜圖形的標(biāo)志幾乎會很少見。此類標(biāo)志通常難以記住,客戶可能會很難發(fā)現(xiàn)在品牌與其圖形表示之間的聯(lián)系。對于尋求加強(qiáng)存在感和提高品牌知名度的大企業(yè)來說,這可能是一個巨大的問題。因此,公司傾向于拒絕此類標(biāo)志,而傾向于使用一些基本的東西。

基本的幾何形狀是各種三角形、圓形、正方形、點和線,它們使標(biāo)志設(shè)計成為簡單的圖像。作為優(yōu)化,建議設(shè)計師使用充滿活力或獨特的配色方案?;蛘呦喾矗袚Q到黑白,將這種極簡效果發(fā)揮到極致。最后,還有負(fù)空間,這是另一種采用簡單幾何形狀并保持視覺趣味的好方法。

高大的標(biāo)志

雖然2022年的大多數(shù)標(biāo)志設(shè)計趨勢與我們兩年、三年或五年前曾經(jīng)擁有的一切產(chǎn)生共鳴,但高大的標(biāo)志就像一口新鮮空氣和創(chuàng)造力。反對過度使用的三角形、方形和圓形標(biāo)志。正如我們從多個Behance項目中看到的那樣,它們的美學(xué)非常適合尋求領(lǐng)先的時尚公司、精品店、創(chuàng)意工作室和大品牌。

高大的標(biāo)志部分借鑒了裝飾藝術(shù)風(fēng)格,它們特別喜歡優(yōu)雅的垂直框架。高大的標(biāo)志同樣具有波西米亞風(fēng)美學(xué)和現(xiàn)代幾何元素。事實上,這種標(biāo)志設(shè)計趨勢的根源并不那么重要。真正重要的是新的形狀讓設(shè)計師想出了新的標(biāo)志創(chuàng)意,所以在這里我們希望他們以不同的方式處理字體和圖形元素。

飽和顏色和漸變

實踐表明,標(biāo)志的顏色工作和色彩的選擇是一個非常個人化的故事,通常很難跟蹤全球趨勢或與特定顏色相關(guān)的任何標(biāo)志趨勢。有人更喜歡黑白標(biāo)志。有人會選擇現(xiàn)在特別流行的單色、裸色或大地色。然而,如果我們看看大品牌,我們將能夠在標(biāo)志設(shè)計中使用生動、飽和的顏色來定義一個巨大的趨勢。

對標(biāo)志設(shè)計中顏色的興趣已經(jīng)發(fā)展到這樣的程度,創(chuàng)作者不僅要增加飽和度,還要選擇純粹、生動的解決方案,同時盡可能地簡化標(biāo)志。太多的細(xì)節(jié)和顏色會造成混亂的外觀,因此選擇其中一個至關(guān)重要——在極簡主義時代,選擇很明確。然而,我們不禁強(qiáng)調(diào)鮮艷的色彩很難處理——尤其是糖果色。它們可以使品牌標(biāo)識看起來廉價甚至業(yè)余。因此,當(dāng)您關(guān)注這一標(biāo)志設(shè)計趨勢時,重要的是要取得平衡——否則您將面臨使用可疑標(biāo)志的風(fēng)險。

象征主義和極簡主義代替現(xiàn)實主義

有多種與簡化標(biāo)志和極簡主義相關(guān)的標(biāo)志趨勢——這可能是最能說明問題的。我們每個人都將標(biāo)志創(chuàng)建為一件真正的藝術(shù)品。動物、花卉、神話和生物——在標(biāo)志內(nèi),它們展示了精湛的技藝和對細(xì)節(jié)的迷人關(guān)注。誠然,這樣的標(biāo)志確實看起來很引人注目,但從響應(yīng)式設(shè)計的角度來看,它們失去了其他類型的標(biāo)志。

您可能還記得響應(yīng)式標(biāo)志,這個術(shù)語是在大約4年前引入的。這些是可以適應(yīng)不同屏幕尺寸或其他媒體的標(biāo)志。為此,設(shè)計人員可以刪除字標(biāo)、簡化或隱藏標(biāo)志。今天幾乎沒有人認(rèn)為響應(yīng)式標(biāo)志是一種獨立的現(xiàn)象或趨勢。相反,響應(yīng)性是標(biāo)志的自然特征,象征主義和極簡主義的運動正好證明了這一點。

涂鴉和草圖

2022年,草圖和涂鴉將作為圖形設(shè)計趨勢回歸,因此它們作為單獨的標(biāo)志設(shè)計趨勢出現(xiàn)。其復(fù)興的關(guān)鍵是人們對設(shè)計師個人品牌方法的興趣增加。顯然,沒有什么比以獨特風(fēng)格繪制的快速草圖、卡通人物和形狀更好的了。

因此,要為標(biāo)志設(shè)計中的更多涂鴉以及企業(yè)品牌中草率的卡通標(biāo)志和快速繪制的吉祥物做好準(zhǔn)備。以快速和樸實的方式制作的手繪標(biāo)志也受到歡迎,我們已經(jīng)看到以這種方式書寫品牌名稱的項目和團(tuán)隊。

粗體字標(biāo)標(biāo)志

如果我們考慮2021年的標(biāo)志設(shè)計趨勢,粗體字標(biāo)志將是最好的例子。于2020年底推出的實驗排版項目專注于不常見的幾何解決方案。難怪品牌和標(biāo)志設(shè)計師不能忽視這種大規(guī)模的圖形設(shè)計創(chuàng)新——在這里,我們在標(biāo)志設(shè)計方面有了一個全新的方向。

許多跨國公司選擇字標(biāo)標(biāo)志。例如H&M、可口可樂、Zara、谷歌、Visa等品牌。然而,幾乎沒有人認(rèn)真考慮使用實驗字體進(jìn)行品牌重塑。這就是為什么此類文字商標(biāo)標(biāo)志主要在獨立工作室、小型企業(yè)、精品店、沙龍和個人創(chuàng)作者中傳播。也許,這些大膽標(biāo)志的特征是其吸引力的另一個關(guān)鍵。您可以將它們視為那些知道要注意什么的鑒賞家的標(biāo)志——或者那些想要感受品牌美學(xué)的人。

無襯線標(biāo)志

雖然使用大膽的實驗排版并不是每個人的趨勢,但無襯線字體是每個人都知道和理解的。自從設(shè)計師拒絕花哨的腳本和襯線字體而支持無襯線字體以來,已經(jīng)有一段時間了。但由于存在普遍趨勢,我們可以說它仍然是2021年的標(biāo)志設(shè)計趨勢——順便說一下,這得到了我們上面寫的極簡主義和基本幾何形狀的流行的支持。

拒絕花哨字體的動機(jī)非常簡單——使用無襯線字體要容易得多。使它們適應(yīng)不同的屏幕和畫布尺寸并不復(fù)雜,因此它們更適合響應(yīng)式標(biāo)志。有趣的是,幾年前,我們觀察到了一個相反的過程:許多公司從無襯線字體切換到襯線字體,因為復(fù)古設(shè)計非常流行。今天,隨著復(fù)古狂熱慢慢釋放出來,健康的實用主義出現(xiàn)了,無襯線字體再次相關(guān)。

花藝和微妙的裝飾

我已經(jīng)不知道設(shè)計師和產(chǎn)品創(chuàng)造者用極簡主義制作了一系列標(biāo)志多少年了。與此同時,許多小企業(yè)繼續(xù)選擇和使用它們,所以這些標(biāo)志不會退縮——就好像它們剛剛出現(xiàn)在市場上一樣。所以請放心,它們將與您共存數(shù)個季節(jié),同時還會定期推出新款式,例如2022年風(fēng)靡一時的Boho。

也許,這種標(biāo)志設(shè)計趨勢是最流行的。優(yōu)雅的線條看起來令人著迷,因此使用它們的誘惑很大。2019年如此,2022年依舊如此。 事實上,這種微妙的視覺風(fēng)格并不僅僅集中在花藝上。有很多日常用品:從家具到文具和衣服。重要的是這些標(biāo)志模板是如何制作的!

黑白標(biāo)志

隨著我們繼續(xù)從各個方面學(xué)習(xí)了解極簡主義,讓我們在這個市場中傳遞2022年的另一個自信趨勢:黑白標(biāo)志。實際上,將黑白色調(diào)視為一種趨勢是很奇怪的,因為它是一種經(jīng)典的解決方案,并且它的存在與時間和風(fēng)格的變化無關(guān)。所以,我們需要讓您注意到對此類標(biāo)志的興趣是日益增加的,其中最重要的例子是GoDaddy的重新設(shè)計之一。他們逐漸簡化了他們的標(biāo)志,現(xiàn)在他們似乎到達(dá)了最后階段——帶有帶有無襯線字體和保留標(biāo)志的黑白標(biāo)志。

黑白標(biāo)志的最佳之處在于它們令人難以置信的風(fēng)格靈活性,這使得它們在品牌設(shè)計師中流行起來。它們完美地適應(yīng)了品牌的審美,因此可以將它們用于字體、裝飾元素和幾何形狀的各種實驗。極簡主義、創(chuàng)造性的排版、花卉、象征主義、原始幾何——一切都與黑白標(biāo)志相得益彰。

3D與平面樣式

3D是2021年最有前途的圖形設(shè)計趨勢之一。隨著技術(shù)的發(fā)展,這種圖形變得如此龐大,以至于我們永遠(yuǎn)無法預(yù)見。甚至可以在直觀的在Spline或 Procreate的最新更新中進(jìn)行高質(zhì)量3D對象的制作。圖像質(zhì)量也得到了發(fā)展。

然而,在標(biāo)志設(shè)計中,情況頗有爭議。設(shè)計師將平面樣式的 logo 轉(zhuǎn)換為3D,反之亦然,力求使 logo 風(fēng)格更加生動和簡潔——后者對于舊版本的3D和假3D尤為典型。出于同樣的原因,他們付出了很多努力來探索類似于3D的方向——等距藝術(shù)。它允許在視錯覺、鮮艷的色彩、漸變、陰影和形狀的幫助下獲得大量圖像??赡芩雌饋肀?D更適用于標(biāo)志設(shè)計——但時間會證明公司和客戶會習(xí)慣什么。

最后

顯然,2022年和2021年的標(biāo)志設(shè)計趨勢沒有明確的界限。大多數(shù)處于巔峰的趨勢已經(jīng)伴隨我們很長一段時間了。

但是,我們可以肯定地說,例如之前非常受歡迎的故障風(fēng)格,不太可能成為本季標(biāo)志設(shè)計的主角。在過去的幾年里已經(jīng)有很多這樣的事情。動畫標(biāo)志也是如此,這是2021年最有希望的標(biāo)志趨勢之一。動畫本身繼續(xù)引起人們的興趣,這是展示品牌的一種成功技術(shù)——但不幸的是,它并沒有被證明是可行的。

最后,3D的命運也沒有確定,我們還不能說3D或扁平風(fēng)格的標(biāo)志設(shè)計是否會成為一種趨勢。我們已經(jīng)寫過,設(shè)計師的立場是模棱兩可的,一個方向和另一個方向都有品牌重塑。


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

文章來源:站酷 作者:對啊設(shè)計君
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

儀表盤設(shè)計的 7 個階段

資深UI設(shè)計者

你知道儀表盤應(yīng)該如何被設(shè)計,才能更符合用戶需求、滿足用戶的使用期待嗎?過于復(fù)雜的儀表盤設(shè)計可能是不可取的,在進(jìn)行儀表盤設(shè)計前,你需要做好相應(yīng)的規(guī)劃和設(shè)計策略。本篇文章里,作者總結(jié)了儀表盤設(shè)計的七個階段,一起來看一下。

一個看起來很酷炫的儀表盤可能有很多功能但實際上,它通常只是一個閃亮的玩具,而不是一個有用的工具。這些儀表盤類似于多臂機(jī)器人,能隨機(jī)拖拽數(shù)據(jù)并將這些數(shù)據(jù)分門別類地整理在一起,讓你目瞪口呆。

就像魔術(shù)師玩紙牌戲法一樣,它看起來令人印象深刻,但它的大腦和巧奪天工的手法一樣好。

([1] Widget:全稱Web widget是一種Web2.0 的衍生物,它好像是一個小型的應(yīng)用程式,是一小塊可以在任意一個基于HTML的網(wǎng)頁上執(zhí)行代碼構(gòu)成的小部件。)

玩這個儀表盤機(jī)器人一開始可能很有趣,但最終會讓客戶失望,因為它沒有達(dá)到用戶的期望值。為什么會發(fā)生這種情況呢?設(shè)計一個工具而不是一個很快就會被丟棄的玩具的訣竅是什么呢?

一、構(gòu)想儀表板:核心大腦 Conceiving the dashboard: the brain

讓我們深入剖析儀表盤設(shè)計。

儀表盤是由客戶、設(shè)計師和開發(fā)人員共同設(shè)計的,他們每個人通過合作做出一定的貢獻(xiàn),并且所有的基礎(chǔ)功能在一開始就確定了(或者他們沒標(biāo)明)。

一個有思考能力的人是從胚胎發(fā)育而來的。腦細(xì)胞和神經(jīng)細(xì)胞是最先形成的,隨后是身體的其他細(xì)胞,而這正是任何可行項目被創(chuàng)建的方式。

第一個階段是最重要的。如果你在這個階段遺漏了什么,那么任何奇特的設(shè)計都無法挽救。因為在這一階段你正在為儀表盤的長期發(fā)展奠定基礎(chǔ)?!拔覟槭裁幢辉O(shè)計出來?誰需要我?”如果儀表盤會說話的,它一定會問這些問題。你能回答這些問題嗎?

  • 儀表盤將如何促進(jìn)公司目標(biāo)的達(dá)成?
  • 什么樣的結(jié)構(gòu)、功能和視覺效果能讓儀表盤執(zhí)行它的任務(wù)?
  • 哪種設(shè)計最適合你的目標(biāo)受眾?

這些問題的答案將構(gòu)成你設(shè)計理念的基礎(chǔ)(現(xiàn)在你可以告訴你的儀表盤存在的意義了)。

儀表盤設(shè)計的 7 個階段

網(wǎng)頁Perls儀表盤設(shè)計

1)儀表盤的“智能”是其實現(xiàn)目標(biāo)的能力。

有些人認(rèn)為只有分析類儀表盤才需要智能性能,而可操作的儀表板只需要可讀性,實際上這個想法是錯的。比方說,你有一個用于激勵員工的操作類儀表盤,用戶的注意力應(yīng)該放在比較結(jié)果,然而設(shè)計師會讓其在視覺效果上更加突出。

2)儀表盤上沒有瑣碎的細(xì)節(jié)。儀表盤上需要展示足夠的信息使用戶來做決定。設(shè)計師的職責(zé)是幫助用戶,而不是通過一系列很酷的小微件來幫助用戶解決難題。任何不是出于這個目的設(shè)計的都會阻礙用戶使用。

3)從項目的初始階段到最終階段,設(shè)計師必須關(guān)注公司的目標(biāo)、儀表盤的目標(biāo),和用戶的目標(biāo)。否則儀表盤將永遠(yuǎn)無法運行。

儀表盤設(shè)計的 7 個階段

儀表盤設(shè)計:Clover

二、數(shù)據(jù)及關(guān)鍵績效指標(biāo)的選擇:這屬于血液循環(huán)系統(tǒng) Data & KPI selection: the circulatory system

儀表盤的數(shù)據(jù)就像是身體內(nèi)的循環(huán)血液。我們必須了解它們來自哪里,它們在被用戶需要時是如何被處理的,以及它們該如何被可視化。

理所當(dāng)然地,設(shè)計師需要了解指標(biāo)的目的,顯然,這將幫助他們選擇合適的微件,但不僅僅只有這些。

舉個例子,一個客戶想在屏幕上看到許多不同的讀數(shù)。你(作為設(shè)計師)并不需要從屏幕上去除任何東西來清理儀表盤的展示空間;但你可以做的是突出最重要的東西,并在視覺上淡化次要的內(nèi)容。

然而,要做到這一點,你必須得知道哪個指標(biāo)是最重要的且哪個是次要的。

儀表盤設(shè)計的 7 個階段

儀表盤設(shè)計:Bidding Car

最重要的一系列指標(biāo)有助于實現(xiàn)目標(biāo),且能幫助控制流程(或者產(chǎn)品),例如:

  • 它們展示實際的成功率;
  • 它們影響產(chǎn)品被感知的方式;
  • 它們激勵創(chuàng)建該儀表盤的團(tuán)隊。

指標(biāo)的選擇還需要了解受眾。用戶應(yīng)該看到哪個 KPI以及他們認(rèn)為最容易理解的視覺表現(xiàn)形式?

人們喜歡對應(yīng)他們目標(biāo)的一系列數(shù)字。

儀表盤設(shè)計的 7 個階段

儀表盤設(shè)計:Panch

三、儀表盤的結(jié)構(gòu):這類似于骨頭 Dashboard structure: the skeleton

想象一下,你進(jìn)入一家酒店房間,看到一張床、一面桌椅、一個鏡子和一個衣柜,就算不打開壁櫥,你也能猜到里面有什么,吹風(fēng)機(jī)、拖鞋、浴巾就放在你所認(rèn)為的地方——有人已經(jīng)保證了這些。

一個好的儀表盤設(shè)計就如同那個房間:它是干凈、整潔且可被預(yù)知的。你可以立即看到所有必需品,并且直觀地知道剩下的東西會在哪里。設(shè)計師們有他們自己的工具來確保儀表盤設(shè)計的整潔性。

1. 層級

首先,你需要理清思路,在發(fā)揮創(chuàng)意之前,要對所有數(shù)據(jù)進(jìn)行排序,將其分類并充分理解優(yōu)先級等等,確定用戶可以立即看見的關(guān)鍵指標(biāo)數(shù)據(jù)

1)視覺層級必須反應(yīng)信息層級。

設(shè)計師可以通過微件的大小及位置來表現(xiàn)數(shù)據(jù)的層級權(quán)重。如果你的用戶是從左往右閱讀的,那么關(guān)鍵信息必須放在左上角,而相關(guān)性最弱的信息放在底部右下角。

對數(shù)據(jù)重要性的排序方法取決于儀表盤的設(shè)計用途。重要的是根據(jù)信息的優(yōu)先級構(gòu)造信息并搭建邏輯鏈路。

2)將信息面板視為一個故事,而不是一系列的數(shù)據(jù)點。

2. 網(wǎng)格

網(wǎng)格對于創(chuàng)建頁面的總體布局排序、協(xié)調(diào)和對齊元素非常有用。

儀表盤設(shè)計的 7 個階段

3. 信息模塊

系統(tǒng)的模塊類似于一個住宅中的功能分區(qū):臥室用來睡眠,餐廳用來吃飯之類,每個區(qū)域有其功能。你的舒適性取決于它們放置的位置有多方便。

一個糟糕的布局不能靠翻新和布置家具來挽救,因此與之相類似的,信息模塊的布局需要被提前考慮。信息模塊幫助你展示內(nèi)容的層次結(jié)構(gòu),且?guī)椭愀鶕?jù)數(shù)據(jù)內(nèi)容的重要性、相關(guān)性和邏輯連接對內(nèi)容進(jìn)行分組。每個模塊應(yīng)該在給定過程中執(zhí)行特定的目的。

儀表盤設(shè)計的 7 個階段

儀表盤設(shè)計的 7 個階段

4. 連續(xù)性和接近性

如果你在去往廚房的路上需要穿過一個有兩扇門的走廊,那么這是一個糟糕的室內(nèi)布局。相互關(guān)聯(lián)的進(jìn)程則會假定在邏輯上也具有相似性。如果一個模塊的進(jìn)程需要來自另一個模塊的數(shù)據(jù),那么數(shù)據(jù)的布局就需要有近似性。

這一點必須事先考慮,這樣用戶就不需要在晦澀難懂的信息海里挖掘他們需要的信息。所有相關(guān)的信息應(yīng)依據(jù)相似性,從最重要到最不重要性來進(jìn)行分組和定位。

5. 分離模塊

沒有人需要一個與臥室相連的廚房。為了將兩個區(qū)塊分開,你需要留白或者負(fù)空間。你一定要在一開始就考慮到:將負(fù)空間視為視覺平衡所需要的設(shè)計元素組合。

儀表盤設(shè)計的 7 個階段

儀表盤設(shè)計:Wingle

四、功能:這就類似于身體的肌肉部分 Functions: the muscles

功能和工具的數(shù)量取決于儀表盤的用途和其用戶的主要目標(biāo)。為了自由地移動,人類需要兩條腿,狗需要四條腿,而蜘蛛需要八條腿。一個擁有太多功能的儀表盤就像一條有著六條腿的狗一樣優(yōu)秀,但這有點讓人毛骨悚然。

不要在控制面板上放太多工具,只需要在最表層放置用戶必需品就好。太多的可用工具會讓用戶困惑且被嚇退,因為這會讓儀表盤看起來很復(fù)雜。個性化總是比定制要好。

儀表盤設(shè)計的 7 個階段

儀表盤設(shè)計:Band

五、微件:重要的器官 Widgets: thevital organs

如果屏幕上有超過 5~7 個的小微件,人們則會難以理解其內(nèi)容。所以我們(設(shè)計師)的工作是讓相關(guān)數(shù)據(jù)可以被訪問但數(shù)量保持一定,不過多,這樣就能使用戶能在數(shù)秒中理解他們看到的內(nèi)容。視覺可視化的工具包括:

  • 表格
  • 圖形
  • 圖表
  • 卡片
  • 指標(biāo)
  • 地圖
  • 圖片
  • 分組
  • 過濾器
  • 列表
  • 資料結(jié)構(gòu)

儀表盤設(shè)計的 7 個階段

儀表盤數(shù)據(jù)微件的選擇取決于你儀表盤的目的和你的受眾。請思考以下問題:

  • 哪一種微件最能展示特定的 KPI(關(guān)鍵績效指標(biāo))?
  • 用戶需要最先在儀表盤上看到什么?
  • 哪一種微件將會是用戶最容易理解的?
  • 什么可以幫助用戶更快地找到他們需要的東西?

請選擇容易理解和可讀的微件。這里有一個讓人困惑的與最易理解的微件對比示例:?????????

儀表盤設(shè)計的 7 個階段

請考慮什么是主要的目標(biāo)來吸引用戶的注意力。

例如,如果你的首要任務(wù)是業(yè)績目標(biāo),則應(yīng)使用數(shù)字;如果你需要比較數(shù)值,則應(yīng)使用折線圖或者柱狀圖;如果是為了激勵團(tuán)隊,則應(yīng)使用具有亮點突出的排行榜。

選擇一個不合適的部件或默認(rèn)的小部件模板可能會混淆用戶或?qū)е滤麄冋`解數(shù)據(jù)。最好的解決方案總是分析和測試的結(jié)果。

儀表盤設(shè)計的 7 個階段

最好的小部件設(shè)計是簡約的并且易于閱讀的。

例如,一個 3D 圖可能看起來令人印象深刻,但它占用了用戶太多的注意力,最終證明它會分散用戶的注意力。漸變、過度使用顏色和太多細(xì)節(jié)也同樣會造成困擾。

六、視覺設(shè)計:通用技巧 Visual design: general tips

我們已經(jīng)構(gòu)建了儀表盤的大腦和身體。最后需要構(gòu)建的是儀表盤的皮膚——最表面的一層。這可以根據(jù)好的經(jīng)典設(shè)計的基本原則來完成,但這里仍然有些細(xì)節(jié)需要具體說明。

1. 簡約性

一個儀表盤應(yīng)該跟你喜歡的工作桌面一樣干凈:它只有必需的文件和工具,沒有任何干擾項。

儀表盤設(shè)計的 7 個階段

儀表盤設(shè)計:MEMO

2. 配色板

儀表盤的顏色選擇必須服務(wù)于一個目的:盡可能清晰地呈現(xiàn)信息。你的配色板越大,就越難清晰地展示信息。所以不要在儀表盤上使用過多顏色。盡可能用相同顏色的深淺色或者不同的色相。

儀表盤設(shè)計的 7 個階段

首選,你需要選擇一個基礎(chǔ)色,然后選擇一個輔助色。每個顏色都必須有特定的用途。一個顏色可以用來結(jié)合/組合元素,另一種顏色可以用來強(qiáng)調(diào)元素。顏色還經(jīng)常用來展示一個元素是主動的還是被動的。避免使用可能具有負(fù)面含義的顏色。

例如在下面的例子中,紅色看上去像展示一些不好且不受歡迎的數(shù)據(jù):

儀表盤設(shè)計的 7 個階段

如果儀表盤提供可定制的顏色,請確保所有的可選顏色看上去都不錯。Aodbe Color CC 是一個用來選擇配色的優(yōu)秀工具。

3. 強(qiáng)調(diào)

語義的強(qiáng)調(diào)之處應(yīng)和視覺的強(qiáng)調(diào)之處一一對應(yīng)。你可以使用顏色(對比、亮度)、形狀、大小、負(fù)空間等等來強(qiáng)調(diào)元素。

4. 可讀性和數(shù)字格式

這是確保視覺上清晰清楚的一切:干凈的布局,視覺層級,突出重點,對比鮮明的元素,適當(dāng)?shù)淖煮w,且這些字體也必須具有對比性和易讀性。

高精度的數(shù)字格式是難以讓人理解的。最好的辦法是將任何數(shù)字四舍五入,并減少較長的數(shù)字。

七、適應(yīng)性 Adaptability

在實踐過程中,當(dāng)桌面版本是用戶的優(yōu)先選擇時,則應(yīng)該優(yōu)先構(gòu)建網(wǎng)頁版,然后創(chuàng)建移動端的。如果你的目標(biāo)受眾主要使用移動端版本,則應(yīng)首先著眼于構(gòu)建移動端的儀表盤。然后再創(chuàng)建桌面端的。

儀表盤設(shè)計的 7 個階段

儀表盤設(shè)計:Snap

八、結(jié)論 In conclusion

設(shè)計一個優(yōu)先的儀表盤并不容易。我們將其創(chuàng)建過程類比作人類發(fā)展,因為它是記住重要東西和展示工作的連續(xù)階段的好方法。當(dāng)你在開發(fā)你的儀表盤,請不斷地自我提問:是否一切各就其位、各司其職?是否有多余的部分嗎(需要去掉)?各部位協(xié)作時工作正常嗎?用戶會喜歡這樣的結(jié)果嗎?這(功能)會有用嗎?

如你所見,視覺設(shè)計實際上是設(shè)計師最后需要擔(dān)心的事。如果你什么都沒有漏過,你的儀表盤將對你的用戶產(chǎn)生有價值的幫助,而不只是一個玩具。

本文翻譯已獲得作者的正式授權(quán)(授權(quán)截圖如下)

儀表盤設(shè)計的 7 個階段


文章來源:人人都是產(chǎn)品經(jīng)理   作者:TCC翻譯情報局


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

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

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


 


毛玻璃圖標(biāo)的設(shè)計教程

lanlanwork


1. 一定要注意識別度

其實我一直不敢使用毛玻璃效果的原因,就是害怕有識別度問題,其實網(wǎng)上現(xiàn)在有很多毛玻璃圖標(biāo):

圖片

做概念稿練習(xí)練習(xí)還好,如果真的落地肯定不行,太影響識別了。

為了不影響識別,我們可以有兩個做法。

其一:就是毛玻璃的透明度別太低,像騰訊視頻這種:

圖片

這樣不影響我們識別圖形的輪廓。

其二,我們可以把圖標(biāo)主圖形用顏色填充,毛玻璃的面積只是很小一部分,起到輔助作用即可,比如像喜馬拉雅這種:

圖片

這樣整體的識別度也不會太受影響。

以上就是關(guān)于不影響識別的小方法。

 

2. 技法

毛玻璃圖標(biāo)大部分一共分三層,填充層、玻璃層,模糊層(模糊層是嵌入到玻璃層的)。

其中最重要的一個關(guān)鍵點就是,玻璃層其實是假的,并不是透明的,而是100%的填充色。

舉個最簡單的例子,我們先畫一個深藍(lán)色的填充層:

圖片

然后加一個玻璃層,這個玻璃層不是透明的,而是100%填充色:

圖片

那有同學(xué)就會問了,毛玻璃效果怎么產(chǎn)生呢?其實就是把下面的深藍(lán)色圓復(fù)制一個進(jìn)入到前面的玻璃層:

圖片

有人又會問,這也沒效果啊,對,因為復(fù)制進(jìn)入玻璃層的圓形和后面的原型位置一摸一樣,如果不做改變,就看不出變化,所以我們先來模糊下:

圖片

區(qū)分的還是不夠開,我們再降低透明度:

圖片

這效果就立馬出來了。

所以從技法層面來說,并不是很難,主要是要注意識別度和整體的設(shè)計感。(當(dāng)然,這只是我個人制作的方法,可能別人也有其他的方式)。

 

3. 底色

前幾天在群里看到一位星友問,說為什么他做的效果是第二個,而不是第一個那種透透的毛玻璃感覺:

圖片

其實我在最開始做毛玻璃效果的時候和她遇到了一樣的問題,這個問題產(chǎn)生的原因就是因為底色,現(xiàn)在的底色是黑色,一個玻璃放在黑色上面,透出來的顏色肯定是深灰色,而不是淺白色(除非你這塊毛玻璃本來就是白色的)。

我在之前的一次練習(xí)時,做一個黑金配的的毛玻璃效果,最開始就做成了這個樣子:

圖片

總感覺有點奇怪,其實就是因為在黑色背景上,玻璃層的顏色用了白色,感覺沒透過去,就感覺怪怪的,后來我把玻璃層的顏色變成深灰色:

圖片

這樣看起來就好多了。

制作的原理和剛才說的是一樣的,先把大形畫完:

圖片

然后前面整一個玻璃層,選一個深灰色:

圖片

然后把下面的形狀復(fù)制一個剪切到玻璃層中:

圖片

現(xiàn)在看不出效果是因為玻璃層里面的圖形和后面的圖形位置是一摸一樣的,這時候我們把玻璃層的圖形模糊:

圖片

現(xiàn)在已經(jīng)差不多區(qū)分出來了,如果想要更明顯的區(qū)分,可以把透明度再降低一點:

圖片

也還ok,當(dāng)然,我覺得加不加透明度,還是看具體效果調(diào)整就可以了!

再強(qiáng)調(diào)下,大家在做毛玻璃的時候一定要注意背景色哦,不然可能就會看起來很奇怪。

 

總結(jié)

好了,以上就是我個人對于毛玻璃效果的一點總結(jié),我個人還是比較喜歡一組毛玻璃圖標(biāo)是多色的,如果是一個顏色,比如這種:

圖片

相對來說沒那么耐看,如果是多色的:

圖片

就會耐看很多,希望給大家一點啟發(fā),下期見,默默扔!

 

原文地址:菜心設(shè)計鋪(公眾號)
作者:菜心設(shè)計鋪
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》好慘,我竟然被批評了,問我為什么不安排教程?我怕了

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

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

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

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

B端圖標(biāo)如何設(shè)計和應(yīng)用

資深UI設(shè)計者


1.1 圖標(biāo)的主要類型


理解圖標(biāo),首先關(guān)注的是圖標(biāo)本身的類型,在整個 UI 體系中,圖標(biāo)基本就分成3個大類:



工具圖標(biāo):包含一定產(chǎn)品功能隱喻的簡化抽象圖形,代替文字節(jié)省界面空間,方便用戶理解

裝飾圖標(biāo):主要目的是用來裝飾界面的視覺元素,樣式大于功能,常用于節(jié)日活動中

啟動圖標(biāo):產(chǎn)品的啟動圖標(biāo),即用來在系統(tǒng)中打開該產(chǎn)品的圖形按鈕,基本以自身 LOGO 為主


在 B 端項目中,應(yīng)用最廣泛的必然是工具圖標(biāo),而裝飾、啟動圖標(biāo)卻鮮有露面機(jī)會。但出現(xiàn)的少,不代表沒有,解釋工具圖標(biāo)前,我們先優(yōu)先講解下裝飾和啟動圖標(biāo)在什么情況下會出現(xiàn)。


其中,SAAS 類服務(wù)就有很多會重點強(qiáng)調(diào)品牌、情感化設(shè)計的案例,例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標(biāo)提升界面的質(zhì)感。



啟動圖標(biāo)則會應(yīng)用在一些比較大型的項目里,當(dāng)項目出現(xiàn)了很多下級功能模塊或類似插件的體系時,就會采取使用應(yīng)用圖標(biāo)的方式作為入口。


比如 Figma 也是一個 B 端工具,它的插件列表中就可以看見不同的啟動圖標(biāo)。還有類似 Slack、Invision、Teambition 等產(chǎn)品,一個龐大的產(chǎn)品生態(tài)就必然會衍生出強(qiáng)化不同子產(chǎn)品身份的需求,就自然而然會用到啟動圖標(biāo)了。



最后,就是我們熟知的工具圖標(biāo)了,前兩種圖標(biāo),在前期畫不好不要緊,畢竟這類規(guī)格的產(chǎn)品會有經(jīng)驗更豐富的設(shè)計或總監(jiān)坐鎮(zhèn),新手當(dāng)個切圖仔即可……


但是工具圖標(biāo),重要性就不言而喻了,B 端項目對工具圖標(biāo)的需求非常大,幾乎每個組件中都會包含圖標(biāo)。



雖然今天網(wǎng)上有非常豐富的圖標(biāo)素材庫,但在形式各異的 B 端項目里依舊是供不應(yīng)求的,各種行業(yè)特有的功能、實物、隱喻,只能設(shè)計師自己完成。


B 端設(shè)計師在圖標(biāo)設(shè)計領(lǐng)域的主要工作,就是確定圖標(biāo)樣式、設(shè)計圖標(biāo)、導(dǎo)出切圖。下面的分享我們也會主要圍繞工具圖標(biāo)展開。


1.2 B端工具圖標(biāo)的風(fēng)格


工具圖標(biāo)的應(yīng)用主要包含兩個部分,線性圖標(biāo)和面性圖標(biāo)。



這里再提圖標(biāo)風(fēng)格,不是把以前的知識點重新講一遍,而是要強(qiáng)調(diào) B 端圖標(biāo)的特殊性。和 C 端相比,B 端圖標(biāo)的實用屬性更高,并不需要過多凸顯本身的視覺風(fēng)格。


所以,工具圖標(biāo)中,使用大量漸變、插畫、投影的類型都要排除掉,它們對 99.9% 的項目都只會造成體驗的負(fù)影響,不要被網(wǎng)上的追波風(fēng)飛機(jī)稿給帶偏。



適合 B 端項目的工具圖標(biāo)只要應(yīng)用最基礎(chǔ)的線性和面形風(fēng)格即可,一定要劃分出差異,應(yīng)該只包含圓潤、纖細(xì)、尖銳這幾種。



很多人好奇線性和面形圖標(biāo)在 B 端設(shè)計中有什么使用上的差異呢?答案是沒有差異。


線性和面形的使用,純粹看設(shè)計師在當(dāng)前場景判斷哪個合適用哪個,只要保證對應(yīng)圖標(biāo)風(fēng)格統(tǒng)一即可。


不過如果遇到一些比較特殊的情況,比如要表現(xiàn)各類設(shè)備的復(fù)雜圖標(biāo),那用線性的做法還是相對合適和簡單一點。



1.3 圖標(biāo)的統(tǒng)一性規(guī)范


對 B 端設(shè)計來講,獨立設(shè)計圖標(biāo)的步驟是必不可少的,應(yīng)該掌握的圖標(biāo)規(guī)范還是必須要懂的。


我們雖然沒有 C 端那么多風(fēng)格和技法的拖累,但想畫好 B 端圖標(biāo)卻多出了其它難點,那就是一個頁面中出現(xiàn)的圖標(biāo)實在是太多了。



這就引發(fā)了我們要講的第一個規(guī)范要點 —— “統(tǒng)一性”,所有同規(guī)格類型圖標(biāo)具有一致性的特征,這些特征包含了:

  • 粗細(xì)一致:首先使用統(tǒng)一的描邊、線段粗細(xì)參數(shù)

  • 圓角一致:使用一致的圓角數(shù)值,不要一下尖角一下圓角

  • 透視一致:使用接近的透視角度,不要有的側(cè)視有的正視圖

  • 大小一致:視覺的大小保持一致,有均衡的大小感受


如果不能保證統(tǒng)一性的基本要求,那么整個頁面看起來就會非常的廉價、業(yè)余。很多新手處理 B 端項目就是應(yīng)用了多套素材庫圖標(biāo),它們的細(xì)節(jié)完全不一樣,統(tǒng)一性當(dāng)然無從談起。


而讓整套圖標(biāo)保持統(tǒng)一性,是相當(dāng)有難度的,其中最難的一點,就是如何讓一套圖標(biāo)的大小均衡。雖然我們要對每套圖標(biāo)確定一個固定的尺寸,但不代表圖標(biāo)實際圖形的長寬數(shù)值是完全一致的。


幾何圖形對視覺有一定的欺騙性,有不同的大小體驗,比如下方案例(魷魚游戲亂入?):



所以,基于這樣的特性,每個圖標(biāo)本身都包含了兩層屬性,圖標(biāo)的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實際占地大小,是透明白的,排版的時候以這個尺寸作為實際的邊緣來測量。



而視覺尺寸,則是在占位尺寸下圖標(biāo)圖形的實際大小,這個大小是帶給我們實際視覺感受的部分。一套圖標(biāo)的不同圖形必然視覺尺寸是各不相同的,我們用占位尺寸包裹它們來方便我們進(jìn)行統(tǒng)一的應(yīng)用。



所以,使用成熟的圖標(biāo)素材必然會發(fā)現(xiàn)圖形周邊還會有透明的空白區(qū)域。當(dāng)然,不同的素材,這個留白也是有區(qū)別的,下一個小節(jié)就會解釋。


最后要聲明一點,一套項目中可以包含多個規(guī)格(2-5個)的工具圖標(biāo),比如導(dǎo)航用的圖標(biāo)比普通工具圖標(biāo)更復(fù)雜一點,設(shè)計師只要保證每種規(guī)格保持的統(tǒng)一性即可。


1.4 圖標(biāo)的柵格系統(tǒng)


圖標(biāo)越多,大小的控制越困難,所以專業(yè)的圖標(biāo)庫繪制就必然會應(yīng)用圖標(biāo)的柵格系統(tǒng)進(jìn)行輔助。


在 Ant 的體系中,一個基于柵格的圖標(biāo)實際包含3層,背景層、格線層、圖形層。



背景層,即圖標(biāo)展位尺寸,需要先確定出這個元素的大小,然后才是里面的繪制區(qū)域。通常,柵格系統(tǒng)會為邊緣預(yù)留 1-4 像素的內(nèi)邊距(出血位),正所謂四周留一線,日后好相見。


格線層,則是使用的柵格線段,也是最重要的部分。格線層通常由 4 個基本圖形構(gòu)成,包含正方形、圓形、水平長方形、垂直長方形。


這四個圖形的長寬大小不一,原因是為了對應(yīng)幾何圖形視覺尺寸不同的特征。把它們并列排列,就可以發(fā)現(xiàn)它們的視覺大小非常接近。



這些格線的作用,就是提前幫我們確定好視覺比例,幫助我們快速繪制相同圖形類型的圖標(biāo)。



但是,不是完美符合這四個圖形要求的圖標(biāo)該怎么辦,總不能格線把所有輪廓都給你實現(xiàn)出來吧?


格線的另一層作用,也就是最重要的作用,其實是一個用來做測量的工具,而不是輪廓依據(jù)。在幾何視覺差中,最基礎(chǔ)的大小原理是占用面積越大的圖形,尺寸感受越大。所以,長寬一致的正方形大于圓形,圓大于三角形。


所以當(dāng)我們繪制的非常規(guī)圖形,和類似格線進(jìn)行對比時,長寬缺少的一側(cè),就要由另一側(cè)增加數(shù)值來填補它的面積。


比如下圖 Ant 官方的電腦圖標(biāo),它的寬是橫向矩形,但是中間區(qū)域面積較小,所以增加了高度進(jìn)行平衡。



再看一些其它的案例



這一步?jīng)]有固定的參數(shù)使用技巧,設(shè)計師需要將完成的圖標(biāo)置入到其它圖標(biāo)旁邊進(jìn)行調(diào)試,確保尺寸是合適的。

格線只是一個圖標(biāo)大小設(shè)置的參考工具,一切以最終效果為標(biāo)準(zhǔn)。





理解完圖標(biāo)的基本規(guī)范,就到圖標(biāo)的使用邏輯了,解決一些常見的設(shè)置誤區(qū)。


2.1 圖標(biāo)應(yīng)該做多大

圖標(biāo)該做多大的,這是目前被問到最多的問題。本來應(yīng)該是非常簡單的一件事,但很多工作多年的設(shè)計師也搞不清楚。


仔細(xì)捋了捋,罪魁禍?zhǔn)拙褪?AntDesign 這套規(guī)范中對圖標(biāo)畫布的解釋了。



要重點強(qiáng)調(diào),Ant 設(shè)計圖標(biāo)的意圖,和一般項目的是完全不同的。Ant 作為一套龐大的開源項目,它的圖標(biāo)核心特征之一就是 —— 適應(yīng)性。


這些圖標(biāo)要被應(yīng)用到各種不同的設(shè)備、顯示器、系統(tǒng)中,圖標(biāo)尺寸會用多大,在幾倍圖環(huán)境顯示全都是不確定的。所以圖標(biāo)一開始按越大的規(guī)格完成,后續(xù)實際應(yīng)用中的縮放、匹配也就越容易,適應(yīng)性越高。


但是,在我們自己的項目中,這種做法是完全沒有必要的,1024 圖標(biāo)的負(fù)面影響包含:

  • 像素數(shù)過多使得數(shù)值的制定難度大大提升,不管是元素尺寸還是描邊粗細(xì)

  • 矢量圖形源文件進(jìn)行縮放很容易發(fā)生錯位,提前輪廓化會破壞源文件

  • 縮放圖標(biāo)后描邊的數(shù)值往往會出現(xiàn)非整數(shù)和 0.5 的狀態(tài),虛邊問題嚴(yán)重


在常規(guī)項目里,一套項目是可以包含不同尺寸和規(guī)格的圖標(biāo)的,而不是我們做一套相同風(fēng)格的圖標(biāo)在整個應(yīng)用中無差別使用。


這也意味著,每個圖標(biāo)在產(chǎn)品中的使用場景通常只有一個尺寸,不需要去面臨縮放的情況。即使需要縮放,也只是這套圖標(biāo)中的少數(shù)幾個需要,或者相對特殊的項目。


所以,圖標(biāo)尺寸設(shè)定,就是根據(jù)當(dāng)前位置合適的尺寸來制定??梢允褂盟夭脑谝呀?jīng)設(shè)計好的布局中嘗試多大的數(shù)值合適,然后創(chuàng)建同樣的數(shù)值即可(盡量以4的倍數(shù)為標(biāo)準(zhǔn))。



2.2 素材的正確使用方法


我們知道圖標(biāo)的素材非常豐富,不管是 Iconfont、IconPark 還是 Iconsearch 等網(wǎng)站,都提供了海量的素材。但是只要稍微專業(yè)點的項目,往往素材庫都滿足不了,部分規(guī)格的圖標(biāo)還是需要我們自己重新繪制。


所以說圖標(biāo)素材就完全沒用了嗎?當(dāng)然不是。


圖標(biāo)的正確用法是作為一種快速試錯的參照物,它可以幫助我們實現(xiàn):

  • 參考圖標(biāo)的具體尺寸在哪個數(shù)值最合理

  • 參考當(dāng)前場景使用面性還是線性的風(fēng)格更合理

  • 參考圖標(biāo)的設(shè)計風(fēng)格是圓還是尖銳更合理

  • 參考相關(guān)隱喻的圖形樣式哪種更合理


在項目的界面設(shè)計階段,我們一向建議優(yōu)先使用外部的素材,尤其是 IconPark 這種比較統(tǒng)一,還可以快速調(diào)節(jié)圖標(biāo)樣式的工具網(wǎng)站。



這個過程即使素材找不到和寓意一致的也沒關(guān)系,用相近的圖標(biāo)替代就可以。等到頁面布局基本完成以后,最后再集中精力對需要繪制的圖標(biāo)重畫一遍(甚至是在開發(fā)階段繪制)。


通過別人的圖標(biāo)來快速匹配尺寸、風(fēng)格、樣式,會幫助我們節(jié)省非常多的時間,也有助于我們設(shè)計出更專業(yè)、美觀的圖標(biāo)。


另外,就是針對項目一些偏小尺寸的通用圖標(biāo),就可以比較放心的應(yīng)用素材,例如翻頁的左右、更多、下拉、搜索等等。



2.3 圖標(biāo)的色彩和狀態(tài)


圖標(biāo)的尺寸、樣式都確定了,最后就是關(guān)于圖標(biāo)的色彩和不同狀態(tài)的制定了。


前面講過,B 端項目對圖標(biāo)的裝飾屬性沒有那么迫切,所以正常情況下,太花哨的圖標(biāo)是要盡量避免的。彩色、漸變色、投影,都不應(yīng)該在這個情況下胡亂使用。


常規(guī)的圖標(biāo)只要使用中性色即可,而需要特別對待的圖標(biāo),色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。


當(dāng)然,如果項目涉及到一些特殊的工具圖標(biāo),類似工廠、工業(yè)領(lǐng)域表達(dá)實體設(shè)備的擬物圖標(biāo),可以打破這個原則。但是,同樣避免這套擬物圖標(biāo)的每個圖標(biāo)用色不同,盡量只使用 3 種以內(nèi)的顏色完成擬物的填色。



同時色彩的使用還有一個重要的意義就是對圖標(biāo)不同狀態(tài)的呈現(xiàn),部分圖標(biāo)會承擔(dān)按鈕的功能,包含默認(rèn)、選中兩個基本狀態(tài)。


普通權(quán)重的圖標(biāo),未選中狀態(tài)可以在默認(rèn)色彩基礎(chǔ)上使用透明度來實現(xiàn)。



高權(quán)重的圖標(biāo),則可以在選中的狀態(tài)替換色彩,或者更改圖標(biāo)的類型,將原本的線性更改成面形并填充色彩制造反差。





完成所有圖標(biāo)的設(shè)計以后,最后一步就是切圖和導(dǎo)出了,這決定你的圖標(biāo)能不能被正確運用到線上項目中。


3.1 圖標(biāo)的收納和命名


在一套專業(yè)的 B 端項目中,已經(jīng)設(shè)計好的圖標(biāo)是設(shè)計規(guī)范的 “資產(chǎn)” 內(nèi)容之一。圖標(biāo)的文件不能散落在項目的各個界面里,而是在規(guī)范頁面中有統(tǒng)一的整理和收納。



這種做法的流程是,先在軟件的規(guī)范庫中創(chuàng)建對應(yīng)的圖標(biāo)組件( Symbol / Compoent ),然后再在具體頁面中應(yīng)用,方便后續(xù)的統(tǒng)一管理和修改。


而在這個過程中,我們也需要對圖標(biāo)有正確的命名方法,來確保團(tuán)隊調(diào)用、檢索圖標(biāo)的效率。通常,我的圖標(biāo)命名規(guī)范如下:

尺寸 / 類型 / 圖標(biāo)名-狀態(tài)


示例:

48px/導(dǎo)航圖標(biāo)/表盤頁-默認(rèn)

24px/一般圖標(biāo)/搜索-默認(rèn)


“/” 號的引用主要是方便軟件中對組件層級進(jìn)行劃分,而我調(diào)用圖標(biāo)的規(guī)則勢必是先從尺寸開始,再選擇對應(yīng)規(guī)格,最后類型和狀態(tài)。


提前命名也是方便后續(xù)我們切圖和導(dǎo)出,但要提及一點,圖標(biāo)的命名不要追求英文化,因為我們的詞匯量不可能實現(xiàn)正式的英文命名規(guī)則,只會寫一堆大家都看不懂的單詞。


而開發(fā)在使用我們的圖標(biāo)切圖時,也不會用我們之前取的命名,會根據(jù)自己的命名習(xí)慣重新命一遍,寫個讓他能看懂的名字遠(yuǎn)比用亂七八糟的英文強(qiáng)。


3.2 圖標(biāo)的切圖格式


接下來,就要解釋切圖的規(guī)則了。很多沒有經(jīng)驗的設(shè)計師切圖就只是隨手加個切片,然后上傳藍(lán)湖發(fā)給開發(fā)自生自滅了,這是一個非常不合理的操作。


再或者,強(qiáng)行使用 Fonticon 格式,而不管實際情況如何,造成最后實現(xiàn)效果完全不同步或?qū)崿F(xiàn)不了。


切圖是通過前端調(diào)用并在瀏覽器中進(jìn)行顯示的圖形,而要被瀏覽器正常顯示,就有必要了解適合使用的切圖格式。


圖片的格式包含位圖和矢量兩種,位圖是通過記錄像素色值的圖形格式,假設(shè)一張圖是 100*100 像素,那么記錄 1W 個像素點的色彩,所以無法支持無損縮放。而矢量則是通過記錄點線面的坐標(biāo)繪制出顯示圖形的格式,可以支持自由縮放。


理論上,矢量格式是最佳的圖標(biāo)切圖格式,但是它的限制同樣有很多,例如:

  • 無法記錄漸變色

  • 導(dǎo)出輪廓容易有錯誤

  • 無法記錄擬物圖形

  • 無法記錄投影元素


前面說過,普通項目中同一圖標(biāo)是很少出現(xiàn)一會兒大一會兒小的需求,所以矢量最大的特征無損縮放,往往就不需要我們?nèi)タ紤]。矢量格式切圖的主要出發(fā)點是用來應(yīng)對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題,而不是網(wǎng)頁端的基本使用。



當(dāng)一套項目中出現(xiàn)了矢量格式無法覆蓋的圖標(biāo)時,那么即用矢量切圖,又用位圖,就會顯得非常的混亂。只有類似 LOGO 等圖形元素,才需要考慮 SVG 格式,而不是一看到圖標(biāo)就上。


所以,最適合切圖的格式就是位圖的 PNG 格式,一方面它是無損的,另一方面它支持透明背景,在切圖應(yīng)用上可以完美和設(shè)計稿結(jié)合,而這是其它大多數(shù)位圖格式不具備的特征。


當(dāng)每次項目完成以后,并不需要通過藍(lán)湖來實現(xiàn)切圖的導(dǎo)出,如果切圖文件分散在各個項目頁面里,那么一定會有很多圖標(biāo)被遺漏,尤其是圖標(biāo)的不同狀態(tài)切圖。


所以,最理想的切圖形式,就是將所有圖標(biāo)完成整理和命名以后,一起框選,然后導(dǎo)出成 PNG 格式,再同步給程序員即可。






以上就是關(guān)于 B 端圖標(biāo)應(yīng)用的所有知識點了。后續(xù)會將這些內(nèi)容進(jìn)行分拆,更新到原子核系列課程中去,會有更細(xì)節(jié)的案例說明。

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

文章來源:站酷 作者:酸梅干超人
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


如何選擇合適的圖標(biāo)?來看這份圖標(biāo)類型和風(fēng)格匯總

ui設(shè)計分享達(dá)人

常見的分類是簡單的線性分類,缺少立體化的圖標(biāo)分類思維。文章通過梳理來幫助大家對不同類型及風(fēng)格的圖標(biāo)有一個體系化的認(rèn)知。


大家好,我是Clippp??吹胶玫膱D標(biāo)我們會習(xí)慣性地截圖保存,但隨著收集的圖標(biāo)越來越多,會發(fā)現(xiàn)對圖標(biāo)的分類會變得越來越混亂…做設(shè)計時也不清楚到底該參考或運用哪種風(fēng)格最合適。來看看如何解決這些問題!

一、定義圖標(biāo)類型

對圖標(biāo)進(jìn)行分類時,普遍會遇到的問題是一個圖標(biāo)有多種風(fēng)格。例如下面這個水滴圖標(biāo),樣式很簡單,但可以劃分到多個類別中。

面對這樣的問題,推薦使用系統(tǒng)性的結(jié)構(gòu)來劃分圖標(biāo)類別: 
  • 首先將圖標(biāo)按尺寸大小分為兩類;

  • 繼續(xù)細(xì)分對應(yīng)的面性、線性、線面結(jié)合、扁平、擬物化等類型;

  • 最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。

利用這種結(jié)構(gòu)層級,可以明確定義圖標(biāo)類別。

二、圖標(biāo)尺寸

圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來很酷,但把它縮小到16px,這些酷炫的效果都無法呈現(xiàn)出來。

在對圖標(biāo)歸類時,首先要考慮圖標(biāo)用在什么位置需要多大尺寸。這里將圖標(biāo)分為兩大類: 
  • 大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo),例如App啟動圖標(biāo)或代表品牌形象; 
  • 小尺寸圖標(biāo)用作UI控件,起到引導(dǎo)功能或裝飾目的。

三、圖標(biāo)類型

確定圖標(biāo)尺寸后,進(jìn)一步細(xì)分圖標(biāo)類型: 
面性圖標(biāo) 
線性圖標(biāo) 
線面結(jié)合圖標(biāo) 
扁平化圖標(biāo) 
擬物化圖標(biāo) 


利用這種簡單的分類方式就能避免圖標(biāo)發(fā)生重疊。另外擬物化這種細(xì)膩的風(fēng)格不適用于小尺寸圖標(biāo)中,所以在小圖標(biāo)分類中沒有展示。

四、圖標(biāo)組成


圖標(biāo)尺寸越小,展示的細(xì)節(jié)越有限。相比于大圖標(biāo),小圖標(biāo)的尺寸有一定局限性,圖標(biāo)組成包括 標(biāo)準(zhǔn)和容器兩種。 


大圖標(biāo)利用尺寸上的優(yōu)勢能展示更多內(nèi)容,分為多種組成形式。

五、小尺寸圖標(biāo)樣式


簡單的圖像可以更具包容性。圖標(biāo)的尺寸越小,越考驗設(shè)計師傳達(dá)信息的能力。 

1.面性圖標(biāo)

1.1標(biāo)準(zhǔn)面性圖標(biāo)

面性圖標(biāo)易識別,適合應(yīng)用在小尺寸圖標(biāo)中。 
關(guān)鍵點:
確保圖標(biāo)有清晰的邊緣,避免羽化; 
圖標(biāo)復(fù)雜程度隨著尺寸變小而靈活調(diào)整。 

1.2帶有背景色的面性圖標(biāo)

彩色背景為簡約設(shè)計帶來了更多可能。通過這個技巧使面性圖標(biāo)更友好,更具吸引力。 
關(guān)鍵點:
為背景選擇4-12種顏色。 
考慮圖標(biāo)是淺色還是深色,是否適用于所有背景色。 
在彩色背景上使用白色圖標(biāo)比黑色效果更好。 

2.線性圖標(biāo)

2.1標(biāo)準(zhǔn)線性圖標(biāo)

線性圖標(biāo)因為簡潔性和現(xiàn)代性而受到用戶的歡迎。隨著屏顯越來越清晰,我們可以更加大膽地使用線性圖標(biāo)。 
關(guān)鍵點:
確保輪廓像素清晰。 
越簡單越好。 
追求更簡單的細(xì)節(jié)。 

2.2雙色線性圖標(biāo)

設(shè)計小尺寸圖標(biāo)時,必須放棄細(xì)節(jié)并強(qiáng)調(diào)簡單的形狀。但當(dāng)使用一種顏色效果不太理想時,可以考慮添加一些顏色。 
關(guān)鍵點:
使用兩種搭配和諧的顏色。 
考慮將一種顏色用于主要形狀,另一種顏色用于細(xì)節(jié)。 
少即是多。 
使用粗線條。 

3.線面結(jié)合圖標(biāo)

線面結(jié)合擁有更多細(xì)節(jié),提升用戶的愉悅感。 
關(guān)鍵點:
最好使用深色而不是純黑色描邊。 
限制圖標(biāo)的顏色種類。 
避免過多細(xì)節(jié)。 

 4.扁平化圖標(biāo) 

扁平化圖標(biāo)既簡單又巧妙,表達(dá)品牌形象的同時具有豐富的內(nèi)涵。 
關(guān)鍵點:
避免在<20px的尺寸中使用此圖標(biāo)樣式。 
選擇2-3種顏色,可以一起使用。 
一種顏色為主色,另一種顏色應(yīng)為高光/細(xì)節(jié)色。 

六、大尺寸圖標(biāo)樣式

大尺寸圖標(biāo)在界面中使用較少,更多用于產(chǎn)品標(biāo)識或品牌宣傳。 

 1.線性圖標(biāo) 

1.1標(biāo)準(zhǔn)線性圖標(biāo)

在設(shè)計任何圖標(biāo)前,都可以先創(chuàng)建一個線性輪廓,確保形狀看起來足夠美觀后再添加顏色。 
關(guān)鍵點:
這類圖標(biāo)最容易制作。 
避免出現(xiàn)輪廓羽化。 
線條粗細(xì)要一致。 
不要害怕添加細(xì)節(jié)。 

1.2漸變線性圖標(biāo)

添加一些漸變能讓原本單一的線性圖標(biāo)賦予更多的個性。 
關(guān)鍵點:
在小尺寸圖標(biāo)中添加漸變會降低圖標(biāo)的可視性。 
選擇漸變時,首先考慮鄰近色。 
線條越粗,漸變越明顯。 
線條細(xì)節(jié)越多,漸變越明顯。 

1.3等距線性圖標(biāo)

2.5D圖標(biāo)做起來會花費很多時間,但效果會很好。在設(shè)計汽車、房屋、家具等實體產(chǎn)品時,建議優(yōu)先使用2.5D圖標(biāo)。 
關(guān)鍵點:
同一組圖標(biāo)要使用相同的等軸測網(wǎng)格。 
2.5D等軸圖標(biāo)很復(fù)雜,在較小的尺寸下會失去作用。 
如果可以,讓所有圖標(biāo)都朝向同一個方向。 

1.4手繪線性圖標(biāo)

隨著設(shè)計趨勢向簡約化、扁平化發(fā)展,很多設(shè)計師喪失了手繪圖標(biāo)的能力。實際上手繪圖標(biāo)讓品牌更真實甚至更有趣。 
關(guān)鍵點:
手繪圖標(biāo)掃描后,再用數(shù)字方式重新繪制,這樣可以保證線條粗細(xì)一致。 
盡量讓所有的線條保持相同的顏色,這會使文件更小。 

1.5斷線圖標(biāo)

標(biāo)準(zhǔn)的線性圖標(biāo)看起來可能會很單調(diào),而簡單靈活的斷線處理能為圖標(biāo)增加更多個性。 
關(guān)鍵點:
斷線粗細(xì)應(yīng)該相同。 
圖標(biāo)的中斷次數(shù)盡可能保持一致。 

1.6雙色線性圖標(biāo)

關(guān)鍵點:
確保兩種顏色具有相同的對比度,否則可能會導(dǎo)致用戶看不清其中一種顏色,因此無法識別完整的圖標(biāo)。例如左下角的淺綠色對于視力弱的用戶來說就很不友好。 

2.線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)可以看作是添加顏色后的線性圖標(biāo)。線面結(jié)合具有很強(qiáng)的輪廓,讓圖標(biāo)能夠清晰可見。 
2.1標(biāo)準(zhǔn)線面結(jié)合圖標(biāo)

關(guān)鍵點:
使用有限的顏色和統(tǒng)一的線條風(fēng)格,使圖標(biāo)具有品牌性。 
使用線條和點來添加更多細(xì)節(jié)。 
避免使用純黑色描邊。 

2.2帶有背景色的線面結(jié)合圖標(biāo)

關(guān)鍵點:
描邊斷開時,圖標(biāo)效果很更好。 
避免在小尺寸時使用。 
使用有限的調(diào)色板。 
考慮使用較淺的描邊/背景色。 
考慮在圖標(biāo)下方添加一條水平線,使圖形具有相同的位置(中間的圖標(biāo)示例) 

2.3錯位線面結(jié)合圖標(biāo)

當(dāng)填充色與描邊錯位時,顏色移到右邊圖標(biāo)左上角留出高光,帶來一種清新的感覺。 
關(guān)鍵點:
考慮使用斷線描邊。 
使用有限的調(diào)色板。 
確保描邊和填充色簡單且一致。 

2.4色塊圖標(biāo)

這種風(fēng)格的圖標(biāo)的特點在于并不依賴于顏色,僅將其用于裝飾。 
關(guān)鍵點:
選擇有限的調(diào)色板。 
先關(guān)注輪廓再關(guān)注顏色,顏色僅用于裝飾。 
避免形狀色和背景色過于相似,降低可見度。 

2.4單色線面結(jié)合圖標(biāo)

關(guān)鍵點:
避免使用暖色調(diào)尤其是紅色,會讓用戶感到壓抑。 
首先確定合適的描邊顏色,再考慮填充色。 

 3.扁平化圖標(biāo) 

扁平化圖標(biāo)通常沒有描邊,主要使用形狀和顏色來完成組合搭配。簡潔、友好和適當(dāng)?shù)募?xì)節(jié),讓這類圖標(biāo)非常具有吸引力。 
3.1標(biāo)準(zhǔn)扁平化圖標(biāo)

關(guān)鍵點:
使用柔和的調(diào)色板,避免明亮的顏色。 
分清簡化和添加細(xì)節(jié)之間的界限。 

3.2帶有容器的扁平化圖標(biāo)

嘗試讓圖形打破容器,帶來動態(tài)的感覺。 
關(guān)鍵點:
嘗試讓圖形從容器中凸出來,以增加深度。 
因為在容器中,可以添加更多的細(xì)節(jié)而不用擔(dān)心圖形變得混亂。 
嘗試使用正方形、橢圓形或與品牌相關(guān)的容器形狀。 

3.3等距圖標(biāo)

關(guān)鍵點:
保持所有圖標(biāo)朝向同一方向。 
選擇恰當(dāng)?shù)恼{(diào)色板能讓圖標(biāo)看起來更一致。 
避免小尺寸使用。 

3.4半陰影扁平圖標(biāo)

半陰影圖標(biāo)是在扁平圖標(biāo)的基礎(chǔ)上添加半色調(diào)陰影,得到更具個性的圖標(biāo)。 
關(guān)鍵點:
小尺寸圖標(biāo)不起作用。 
使用有限的調(diào)色板。 
確保所有的圖標(biāo)色調(diào)相似。 

3.5長陰影扁平圖標(biāo)

當(dāng)圖標(biāo)位于容器中時,可以考慮添加長陰影,主要包括純色陰影和漸變陰影兩種類型。 
關(guān)鍵點:
使容器具有相同的顏色或類似的色調(diào)。 
只在大尺寸圖標(biāo)中使用。 
將半陰影與長陰影組合使用效果更好。 

 4.擬物化圖標(biāo) 

擬物化圖標(biāo)實際上已經(jīng)包含了大部分的樣式,例如它們是立體的,有豐富的漸變和陰影。 

這種風(fēng)格的圖標(biāo)看起來與現(xiàn)實生活中的圖標(biāo)盡可能類似,讓用戶感到更舒適。 
關(guān)鍵點:
考慮添加底部陰影。 
使光源來自同一方向。 
確保圖標(biāo)都朝向相同的方向。 
目前絕大多數(shù)界面不在有這種風(fēng)格的圖標(biāo),可以考慮使用3D建模來實現(xiàn)這種效果。 

總結(jié)

希望大家能對圖標(biāo)的分類及設(shè)計有更全面深入的認(rèn)識,從而構(gòu)建一套完整的圖標(biāo)思維體系。

文章來源:站酷  作者:Clippp
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


一個ICON設(shè)計過程的價值挖掘

資深UI設(shè)計者

每一個設(shè)計需求的背后都必然有其商業(yè)邏輯在里面,所以在拿到設(shè)計需求后,嘗試多去問幾個為什么。有什么樣的商業(yè)目標(biāo)?為什么做這個功能?用戶是誰...當(dāng)你琢磨清楚這些之后,并以此為出發(fā)點的設(shè)計方案,必然是有據(jù)可依、有說服力的,多角度的參與產(chǎn)品設(shè)計也更能體現(xiàn)設(shè)計師的價值、培養(yǎng)全局觀。


商業(yè)目標(biāo)是個大方向,有了目標(biāo)就會產(chǎn)生解決方案(需求),當(dāng)然方案可能不只是一種類型(可能是APP、網(wǎng)站、宣傳H5或宣傳海報等),設(shè)計師負(fù)責(zé)的去做的可能只是其中的一種。


以我參與過的冬奧會某冰雪 APP TAB 欄的 ICON 風(fēng)格設(shè)計為例:


01

業(yè)務(wù)溝通,商業(yè)目標(biāo)分析,明確設(shè)計目標(biāo)


這個階段一定要多去溝通、溝通、再溝通,如果是產(chǎn)品公司,那么需要去和產(chǎn)品、研發(fā)、市場等多部門溝通;如果是外包項目,那么就需要和客戶多次溝通。退而求其次,也要和負(fù)責(zé)該項目的直屬領(lǐng)導(dǎo)多去溝通,以求更精準(zhǔn)的了解商業(yè)目標(biāo),最終明確設(shè)計目標(biāo),從而為接下來的設(shè)計創(chuàng)意設(shè)計指明方向。



該項目為二次設(shè)計外包項目,著手出圖之前,我和該項目負(fù)責(zé)人、項目小組成員多次深入的討論了甲方為了什么目的去做?從而確認(rèn)了商業(yè)目標(biāo):“傳播冰雪文化,激發(fā)人們對冬季運動的興趣和熱情”。


這是個大方向,接下來去考慮用什么形式承載,可能是常見的APP、網(wǎng)站、小程序...(這個形式還需要考慮下目標(biāo)用戶的使用習(xí)慣)。以及更具體的有哪些內(nèi)容分類、個性化主題設(shè)計、互動形式等。


最終,該項目負(fù)責(zé)人決定采取安全策略(作為項目負(fù)責(zé)人,對投入產(chǎn)出比等全局性因素的考量是極其重要的),先做一款內(nèi)容型APP,內(nèi)容分類借鑒、提煉幾款A(yù)PP的精華,暫不考慮獨創(chuàng)功能。


雖然有時候結(jié)果未必和自己期待的一致,但積極去參與的過程是應(yīng)該的。。



知曉了商業(yè)目標(biāo)和產(chǎn)品內(nèi)容,接下來就有方向了。我將設(shè)計目標(biāo)定為:將設(shè)計與“水凝化冰、冰積成雪”的物理現(xiàn)象相結(jié)合,體現(xiàn)冰雪主旨,烘托冬季競技氛圍。



02

創(chuàng)意分析,設(shè)計推演


這個階段重點在于說服力,或許關(guān)系到客戶是否買單。由于是內(nèi)容型產(chǎn)品,內(nèi)容結(jié)構(gòu)上和其它APP并無太大區(qū)別,那么客戶會不會想:你們是不是抄了一個軟件,改了改就發(fā)給我了。。基于此,我在設(shè)計創(chuàng)意推演前,做了內(nèi)容分類由來的分析。


人類接受信息的三種方式:視覺、聽覺、觸覺,對用戶傳達(dá)冰雪文化采用這三種手段,規(guī)劃APP內(nèi)容,視覺:圖文資訊、視覺畫面;聽覺:音視頻、直播;觸覺:榜單、互動等。



借用“水凝化冰,冰積成雪”物理現(xiàn)象,結(jié)合基因創(chuàng)意法,對 ICON 進(jìn)行設(shè)計推演,緊扣冰雪主旨。



通過品牌LOGO取色法,提煉 ICON 配色。



03

設(shè)計執(zhí)行


到了這個階段,基本的設(shè)計思路應(yīng)該是比較清晰了,剩下的細(xì)節(jié)打磨就可以自由發(fā)揮了。



至此,一個ICON的設(shè)計已完成。該過程的最大價值在于:幫助項目理清了整個項目的核心價值、創(chuàng)意思路與設(shè)計提案思路,甚至可以由此推測到未來產(chǎn)品的功能規(guī)劃方向,當(dāng)然最重要的是協(xié)助項目負(fù)責(zé)人成功拿下了項目。




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

文章來源:站酷   作者:空白思維

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

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

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


這6種類型的菜單圖標(biāo)和用法

資深UI設(shè)計者

一個簡單的漢堡菜單就可以包括多種不同的樣式,可能有的樣式甚至沒有官方的名稱,但因為樣式的差異在功能上這些菜單也會出現(xiàn)差異性。

我們可以通過分析這些樣式,來思考不同的樣式代表著怎樣的設(shè)計含義和設(shè)計目的,不能因為簡單常見而忽視了功能的內(nèi)核。

漢堡菜單

這6種類型的菜單圖標(biāo)和用法,這篇全總結(jié)了!

關(guān)鍵詞:橫條、多個菜單選項

這個圖標(biāo)的樣式簡潔易懂,通常位于網(wǎng)頁和 App 的上下角,用來告知用戶這個按鈕之外還有更多內(nèi)容可以探索。

當(dāng)產(chǎn)品有多個菜單選項時,考慮使用漢堡圖標(biāo)來顯示,但盡可能避免在桌面視圖中使用。

垂直三點式菜單

這6種類型的菜單圖標(biāo)和用法,這篇全總結(jié)了!

關(guān)鍵詞:垂直、內(nèi)嵌菜單

通常位于屏幕或窗口的右上角或頂部,是用于打開帶有附加選項的圖標(biāo),打開的內(nèi)容往往是一個較小的內(nèi)嵌菜單而不是整個全新的頁面。

水平三點式菜單

這6種類型的菜單圖標(biāo)和用法,這篇全總結(jié)了!

關(guān)鍵詞:水平、內(nèi)嵌菜單、web

水平三點式菜單同樣常位于屏幕或窗口的右上角,用于打開菜單或顯示相關(guān)項的操作。

因為圖標(biāo)樣式是水平的,所以更容易在 web 上或者在表格等水平方向中使用。

九宮格菜單

這6種類型的菜單圖標(biāo)和用法,這篇全總結(jié)了!

關(guān)鍵詞:子分類、子功能

九宮格菜單通常用于打開同一產(chǎn)品中包含不同子產(chǎn)品或子功能,可以在它們之間快速切換,此圖標(biāo)常位于產(chǎn)品主頁的右上角。

過濾式菜單

這6種類型的菜單圖標(biāo)和用法,這篇全總結(jié)了!

關(guān)鍵詞:過濾、排序

過濾式菜單由三行不同長度的線段水平疊放而成,是最廣泛使用的過濾符號。可以將過濾式菜單與“排序方式”選項結(jié)合使用,或者與全局過濾器結(jié)合使用。

漢堡菜單變體

這6種類型的菜單圖標(biāo)和用法,這篇全總結(jié)了!

關(guān)鍵詞:樣式特殊、時尚感更強(qiáng)

作為漢堡圖標(biāo)的替代品,與顯示列表菜單的目的相同嗎,但是這些樣式我們平常見的可能會比較少,更常用在充滿現(xiàn)代感、時尚感和藝術(shù)感的網(wǎng)站上。

這6種類型的菜單圖標(biāo)和用法,這篇全總結(jié)了!

最后

不同的樣式可能代表著截然不同的設(shè)計目的,常思考這些小而精的細(xì)節(jié),是保證產(chǎn)品體驗提升的關(guān)鍵。

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

文章來源:優(yōu)設(shè)   作者:Clip設(shè)計夾

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

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

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



版式設(shè)計沒思維?這樣做讓你事半功倍!

周周


再過幾天就又雙叒叕到「雙十一」了,身邊的許多朋友已經(jīng)開始忙著囤優(yōu)惠券,找鏈接了,而做為「設(shè)計“獅”」的我卻還在連夜趕著各大品牌和公司的「宣傳海報」,整天埋在做圖—改圖—再做圖的循環(huán)中,不知道各位設(shè)計大大們最近的生活是不是也跟我一樣呢。

版式設(shè)計沒思維?這樣做讓你事半功倍!

好了,在開始今天的干貨分享之前,我想先請大家一起來看幾張海報:

版式設(shè)計沒思維?這樣做讓你事半功倍!

看完之后,大家有沒發(fā)現(xiàn)這幾張海報有什么特點呢?

沒錯,他們的共同之處就在于,雖有通篇的文字,但畫面依舊充滿著空間結(jié)構(gòu)感、層次感,而輔助圖形的運用更是起到了點睛之筆的作用,給人眼前一亮的感覺。想必有的小伙伴肯定在思考,這是為什么呢?

版式設(shè)計,對,就是「版式設(shè)計」。

相信大家都曾有過,熬了一整晚,好不容易設(shè)計出幾個畫面的元素,結(jié)果看著一大堆的文字和圖片,心中頓時思緒萬千,腦海中卻一片茫然,折騰來折騰去,還是不知道該如何排版才好的經(jīng)歷。

版式設(shè)計沒思維?這樣做讓你事半功倍!

在當(dāng)今這個高速發(fā)展的時代,無論是紙質(zhì)媒體還是新媒體,信息的傳播都離不開版式設(shè)計,一副好的版式設(shè)計作品,可以在有限的頁面內(nèi),以最快速、最直接、最有效的方式傳遞出核心的內(nèi)容和信息,并讓讀者和受眾留下深刻而良好的印象。

所以,今天我就給大家分享一些版式設(shè)計知識,希望可以帶給你些許靈感,幫助你早日做出爆款的設(shè)計作品~

曾在一本版式設(shè)計書上看到其對板式設(shè)計是這樣定義的:“版式設(shè)計既版面編排,就是把特定的視覺信息要素,根據(jù)主題表達(dá)的要求在特定的版面上進(jìn)行的一種編輯和安排?!?/span>

即排版并不是指簡單的「東拼西湊」,而是需要經(jīng)過合理化的對照排列整合,以此傳遞出高效的信息和特性差異的畫面。

對比與突出

對比又稱為「對照」,即把具有明顯差異和矛盾的視覺元素配置在一起,碰撞出特性差異的現(xiàn)象,從而使主題更加的突出,視覺效果更加跳躍。具體又分為大小對比、粗細(xì)對比、虛實對比、主次對比等。通過利用不同方向、大小、粗細(xì)的字體重新排列整合,以突顯出畫面的主次信息,正如下面的幾張海報。

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖一:大小對比

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖二:虛實對比

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖三:主次對比

字體的協(xié)調(diào)與統(tǒng)一

文字作為「語言符號」,無論在何種視覺媒體中都直接影響版式的視覺效果,在提高作品訴求力的同時也賦予了版面審美的價值觀。在選用字體時,我們應(yīng)當(dāng)依據(jù)設(shè)計風(fēng)格來決定,不同風(fēng)格的作品,選擇不同的字體形式。而協(xié)調(diào)則是指畫面內(nèi)在的東西,元素、字體配合得適度和恰當(dāng)。即說明他們內(nèi)在相似的東西或狀態(tài),以達(dá)到畫面相統(tǒng)一的風(fēng)格。

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖四:風(fēng)格統(tǒng)一

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖五:顏色統(tǒng)一

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖六:元素統(tǒng)一

構(gòu)成與比例分配

版式設(shè)計有很多種的構(gòu)成方式和方法,一切美的東西皆有規(guī)律,三分法、白銀比例、黃金比例就是其中的代表。

三分法(1:2)即「井字構(gòu)圖法」,是日常生活中最常見的一種構(gòu)圖手法,通過將視覺重心或者最吸引人的東西靠近四條線的相交處,使「畫面和諧」的同時,也達(dá)到了「突顯主體」的目的。

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖七:三分法

白銀比例(1:1.414),也是在排版設(shè)計中最為常見的比例,給人一種「安穩(wěn)恬靜」,「愜意」的感覺。

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖八:白銀比例

相對于其他比例而言,黃金比例(1:1.618)則顯得更加突出,正如它的名字,常常給人一種「恰到好處」、「自然」的感覺、無論是在LOGO設(shè)計中、還是排版設(shè)計、抑或是攝影中,靈活的運用黃金比例,都能夠帶來不錯的效果。

版式設(shè)計沒思維?這樣做讓你事半功倍!

△ 圖九:黃金比例

怎么樣,看完之后,有沒有找到一些靈感呢


文章來源:優(yōu)設(shè)網(wǎng)    作者:藝海拾貝Design


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




日歷

鏈接

個人資料

存檔