04 復古背景圖ins風紅色系(賽博朋克風格插畫-新年海報都有哪些風格)

在城市的高速發展中變遷，包容性極強。《命運歌姬》時裝設計打造脈沖織霓裳、高科技的幻想之美。賽博朋克（Cyberpunk）的核心概念就是“HighTech,LowLife”。一種反烏托邦科幻的悲觀主義哲學迷思，一種對人類未來科技生活暢想。高科技，低生活。消極的外表下，卻有一顆積極正義的核心。雖然世界很黑暗，但是光明和希望不滅。從cyberpunk延伸出來的藝術流派包括Vaporwave蒸汽波。作為一種藝術運動延伸出的音樂流派，多取材于80、90年代的日本funk音樂、都市流行樂，加強節奏部分，把原本的pop\funk\smooth改造成舞曲風格，聲效“做舊”。發展成影像類作品后逐漸完整。蒸汽波構建的時空堆砌著漢字與假名、光標與彈窗，甚至故意進行了Lo-Fi處理等。glitchart故障藝術的萌芽是在蒸汽波之后，glitch本意是“失靈”，短時脈沖波干擾，可以理解成一種自動或人為的bug。產生于電子成像時出人預料的圖像錯誤，它存在于數碼空間、機械或人為干擾故障中。其更多的是基于故障的呈現和審美創作。賽博朋克風在電影中最重要的體現則是在建筑中。建筑通常被認為是能夠體現出一定的城市風貌和生活狀態的物質。

插畫類圖標-圖標類型和風格總結

ui設計圖標類型有哪些

按功能分類可以分為

應用圖標,如搜狐,新浪,網易等網站的logo;

功能圖標,如各類音樂播放器的“開始”“暫停”“快進”圖標等;

按設計風格分類可分為

剪影圖標;

輕擬物圖標:在原來擬物圖標基礎上,減輕厚重質感,去除投影、漸變、紋理轉化成扁平化的圖標;

輕質感圖標:漸變/投影/不透明度等圖標,具有唯一性,細節更加豐富;

擬物化圖標:有形有色有樣式有質感的圖標;

疊加圖標;

以文字為主體的圖標,如支付寶,淘寶的圖標;

插畫圖標,通常是游戲應用,直接使用游戲中的角色、道具或畫面作為圖標。

圖標類型和風格總結

這篇文章來自優設網,主要是最近的工作中經常用到圖標,但是設計給到的圖標放到頁面中總是有點不協調,所以看到這篇文章想要收藏分享一下。

作者寫的還是很細致的,喜歡的可以關注他。鏈接地址在下面。

編者按:圖標類型千變萬化,實際上萬變不離「線性、面性、線面結合」3個方面,再結合「透明度、漸變、顏色疊加、質感、多維空間」等表達方式設計而成。本文將近6000字,一篇就可以了解全部設計風格!

圖標是UI設計中極為重要的一個環節,我們在做每個界面的設計幾乎都會涉及到圖標的表達,出色的圖標設計可以讓界面表達更加精致、有趣。

圖標的設計往往也體現著設計師的基本功,因此除了日常多畫提升對圖標造型的把控力外,我們也更需要了解和學習圖標設計的趨勢類型,從而幫助我們提高在設計中的效率。

基于自我學習的目的,平時在瀏覽一些設計網站時也會做相對應的收集。因此本文主要對于圖標設計的「類型、風格」進行了整理,以及自己對于每種圖標類型的思考。

圖標的類型劃分

設計網站上的圖標可以說是多種多樣,不同類型的圖標都有著獨特的魅力。例如,線性圖標簡潔輕量、面性圖標厚重直接,當然同一種類型的圖標也具有很多不同的表現形式。

因此基于本人對圖標的理解,大致劃分為三類:線性、面性、線面結合。結合三種基礎類型的表達方式可以創造出各式各樣的表現形式。

線性圖標

使用輕量的線條勾勒的圖標,整體感受也趨向于精致、細致而具有銳度感。不同的線條表現具有不同的視覺感受,細線輕量、直線硬朗、曲線柔美。

1.線型圖標基礎分析及想法

粗細對比

粗細不同,圖標的力度和重量感就會有差異。粗線的圖標,視覺關注力來說會更加突出,但較于細線的圖標也會顯得粗壯、厚重。細線的圖標,精致、透氣、秀美。

但在設計時需要依據「整體的UI風格」來決定線的粗細,而并非單純的考慮圖標的關注度,反而更需要考慮圖標與界面整體的平衡感。

柔度對比

直角與圓角決定了外形的感知和風格的走向,如下圖對比中看出,圓角越大圖形越趨向于可愛柔美(如下右圖),圓角越小則越直接、硬朗和陽剛(如下左圖)。因此剛或柔或中間值完全取決于早期對于整體風格的定調。

繁簡對比

除了輕量化和簡潔之外,圖標的識別性也是極為重要。如下左圖,「過度簡潔」導致圖標失去該有的識別度而出現歧義,而下右圖的元素疊加使得圖標稍顯復雜。在繁與簡的平衡中,應該保持在不影響圖標識別度的情況下,最大限度的提升圖標的簡潔程度。

特征的識別度

保持圖標的特征美感

如下面的「心形」圖標,下左圖是我們具有普識性的圖標,與圓形組合之后依然保持著原有的形態美感。但我們不時也會看到第三種設計,整體外形雖然保持著愛心,但為了與整體風格「一致」強行對外輪廓進行切割,與原圖形在美感上則稍微有些出入,這也是我們需要思考的關鍵點。

組合型比例

組合型的比例會影響到圖標的精致程度,準確的「比例值」能讓整體的造型趨向平衡,更具有美感。如下圖案例嘗試了兩組不同比例的效果,這里以圖標窄邊作為「基準值」進行嘗試。當內形為外形的1:2時(下圖2),圖標的整體視覺效果較為平衡;當大于1:2并接近4:3時,圖標內部結構會顯得過于飽滿。而小于1:2并接近4:1時(下圖3)則會產生稀疏不緊湊的效果。(這里的比例只是案例需要,實際設計以最終的視覺感知為準)

2.線性類型拓展

極簡風格

整體風格極為簡約,沒有多余的線條,通過線條還原圖形的本質,外形「簡單」卻具有很強的識別性,在視覺感知上輕松、干凈。

極簡的風格圖標在于對圖形的把控,多一筆可能顯得復雜,少一筆可能影響識別程度。以上圖為例,圖標的組合元素保持在2個左右,整體較為干凈。

實際應用:Instagram、Airbnb、Facebook、Twitter

雙色

相較于「純色的圖標」更具表現力,細節上也會更加豐富,形態感知上多了一層變化。結合顏色的疊加、對比、互補提升了圖標的層次感和豐富度。

同色系:同為冷色系、暖色系或同一色系的表達形式。如下圖案例,以暗色為主色,亮色點綴提亮,使得圖標具有一種高光提亮的感覺。

另一組案例是亮色主色結合暗色,整體圖標效果還算可以,但較亮的顏色沒有應用在圖標的關鍵特征上,使得圖標第一眼的感知稍有減弱。

對比互補色:顏色跨度更大,層次更加分明。如下圖案例,紅色與藍色的撞色之后相比單色的圖標更加出彩和具有記憶點。

實際案例:騰訊動漫我的頁面

透明度變化

本質上與上面一種為一個類型的設計,通過透明度的疊加和變化,提升圖標的層次感和空間感,降低圖標的壓迫性。

實際案例:愛奇藝9宮格圖標

漸變層次疊加

漸變帶出了圖標的質感,結合「不同深度」或「不同飽和度」的變化,讓圖標更具有細節和層次。

黑白+品牌色

黑白色作為主色調,結合品牌色作為點綴色。與常規的黑白圖標相比,既產生了變化,同時兼顧了品牌色的透出。

實際案例:大眾點評攻略頁面圖標

線性漸變

結合漸變的顏色,豐富了整個圖標的視覺表達,并提升了圖標的視覺沖擊力和設計感。案例結合黑白背景作為嘗試,白底:粗線比細線的視覺效果相對較好,漸變也能較為清晰地被表達;黑底:細線比粗線的視覺效果顯示得更加精致和具有銳度感。

實際案例:網易考拉、NAVER

一筆成形

此類圖標在視覺表達上具有較高的線性流暢度和設計感,關注點在于整組圖標的「開口起始點」設定上需保持一致。例如,「從左到右」或「從右到左」形成一體化的連貫線條,開口起始點不一致會影響整組圖標的一致性,應用在頁面時也會顯得雜亂。

斷點圖標

與上一種較為類似,但沒有連貫度的要求。在線形圖標基礎上面,尋找一個缺口來打破「全包邊圖標」的沉悶感,使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統一的方向及大小,另外需要控制開口個數避免過多導致圖標外形過于零碎。

實際案例:騰訊體育、京東

面性圖標

面性圖標比線性圖標更能表達出圖標的力量感和重量感,比線性圖標會更加容易吸引用戶目光。在識別度上,面性圖標更加依賴于外輪廓的清晰度,因此在設計時對于外形的打磨是重中之重,清晰的外輪廓可以幫助提高識別度。

1.面型圖標基礎分析及想法

輪廓對比

輪廓的差異會體現出不同的氣質,如下圖的左邊和右邊的區別,一個氣質較為直接硬朗,另一個則較為柔美可愛。流暢的外形可以讓面形圖標的整體更加簡潔、規整,如下圖中間的圖標在輪廓的處理上則顯得比較碎,整體外輪廓造型的連貫度有所欠缺。

鏤空對比

適當的鏤空除了補充了圖形的識別度之外,還提升了面性圖標的設計細節。另外需要控制好鏤空部分與整體的外形比例,過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊,鏤空過小對圖標的辨識度并沒有多大作用,沒有鏤空則少了一些透氣感。

形體對比

形態上的差異也會具有不一樣的視覺感知。以「星」和「心」為案例,單獨形體與組合之后的形體相比視覺感知更直觀些,而組合形的圖標相對會精致一些,多了一些層次。在日常設計中的經驗是:越小的圖標形體應該越簡單,因此建議單體出現較好;若圖標的尺寸足夠大時可采用組合型的設計,補充圖標的細節。

繁簡對比

設計面性圖標時,對于多余細節的管理也很重要。隨著細節的增加,塊面切割過多,會使得整體圖標變得過于零碎(如下右圖)。保持簡約的設計提高圖標的識別度,在關鍵的特征細節上做補充(如下中間圖的相機閃光燈)。

2.面性圖標類型拓展

面性圖標在設計時也可以結合各種不同的表達方式,來提升圖標的質感和創意,而非只是簡單的填充顏色。

單色面+點綴色

整體的外形使用統一的顏色,結合圖標的屬性感知使用不同的顏色進行點綴,通過點綴色提亮了圖標的視覺效果,達到既統一又具有差異化。

多彩雙色

通過對比色、鄰近色的搭配來營造整體的圖標氛圍,提升了圖標的層次和豐富度,雙色的表達也增添了圖形的趣味性。在日常使用的APP中極為常見,簡單且容易出效果。

微質感漸變

微弱的漸變提升了圖標的質感。漸變的方向會影響整體圖標的視覺效果,因此可以根據不同設計的需要進行調整。如下圖案例:

實際案例:全民K歌

透明度/灰度變化

透明度/灰度的變化,讓原來單色的圖標變得更加具有層次感和空間感,設計細節更加豐富,降低了單色面性圖標的厚重感。

實際案例:企鵝FM我的頁面

透明度變化+漸變

漸變的設計提升了面性圖標的質感,從顏色上具有一定的豐富度。在漸變的基礎上對組合型做透明度差異化,使得圖標具有了層次感。

透明疊加的圖標+漸變的背景

此類圖標常常被應用在UI界面中的列表或者頂部入口的位置。

實際案例:全民K歌點歌頁面

顏色疊

很赞哦!（161）