資訊專(zhuān)欄INFORMATION COLUMN
摘要：本文將會(huì)分享如何在設(shè)計(jì)中使用漸變的實(shí)用技巧。年是扁平設(shè)計(jì)流行的元年。扁平設(shè)計(jì)中單一的顏色扼殺了設(shè)計(jì)的潛力，而漸變?yōu)闊o(wú)限可能打開(kāi)了大門(mén)。
簡(jiǎn)評(píng)： 漸變是通過(guò)兩種或多種不同的色彩來(lái)繪制一個(gè)元素，同時(shí)在顏色的交界處進(jìn)行衰減變化的一種設(shè)計(jì)。從擬物到扁平再到漸變，人們慢慢發(fā)現(xiàn)它能創(chuàng)造出從未有過(guò)的一種色彩感覺(jué) —— 獨(dú)特、現(xiàn)代和清爽。
很長(zhǎng)一段時(shí)間以來(lái)，設(shè)計(jì)界都不怎么待見(jiàn)「漸變」，這還得拜 90 年代的 PowerPoint 所賜，畢竟那時(shí)候的漸變是這樣的：
然而時(shí)過(guò)境遷，今天你打開(kāi) Dribbble 或者 Behance，可能會(huì)看到不少使用漸變的設(shè)計(jì)。本文將會(huì)分享如何在設(shè)計(jì)中使用「漸變」的實(shí)用技巧。
▎為什么我們突然愛(ài)上了漸變？想回答這個(gè)問(wèn)題，我們需要重返 2014。
2014 年是扁平設(shè)計(jì)流行的元年。這一年，Google 發(fā)布了 Material Design，Apple 也用扁平 UI 更新了 macOS。那年的扁平設(shè)計(jì)讓人感到興奮，特別是和擬物設(shè)計(jì)對(duì)比的時(shí)候。
但是扁平設(shè)計(jì)的局限性也是顯而易見(jiàn)的，其中最大的一個(gè)局限是 —— 設(shè)計(jì)師能夠使用的顏色和樣式大大減少，幾乎不到 15 種顏色可用于扁平設(shè)計(jì)。
由此，設(shè)計(jì)師們開(kāi)始嘗試「漸變」：
它給設(shè)計(jì)師帶來(lái)了更大的創(chuàng)作自由。扁平設(shè)計(jì)中單一的顏色扼殺了設(shè)計(jì)的潛力，而漸變?yōu)闊o(wú)限可能打開(kāi)了大門(mén)。通過(guò)混合顏色的手段，設(shè)計(jì)師們可以創(chuàng)造出更豐富的視覺(jué)樣式。
漸變還給設(shè)計(jì)引入了深度和維度，解決了扁平設(shè)計(jì)中一切都「太平」了的問(wèn)題。
▎漸變讓人驚喜比如說(shuō)，漸變能做出更大膽的表達(dá)。
漸變創(chuàng)造出了一種意想不到的效果，即使像應(yīng)用圖標(biāo)這樣微小的元素，也別有一番風(fēng)味：
又或者，漸變能突出某些元素。
一個(gè)好的用戶(hù)體驗(yàn)，往往能引導(dǎo)用戶(hù)完成產(chǎn)品流程，而精心的設(shè)計(jì)有助于讓用戶(hù)下意識(shí)地進(jìn)行下一步。比方說(shuō)讓頁(yè)面某些部分視覺(jué)效果更強(qiáng)烈，從而讓用戶(hù)更關(guān)注這部分。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/6961.html
這是這個(gè)系列的第二篇，第一篇這見(jiàn) 這里： 以下是這個(gè)系列的簡(jiǎn)潔 UI 的 7 條規(guī)則： 光來(lái)自天空 (Light comes from the sky) 黑白優(yōu)先 (Black and white first) 加倍你的空白 (Double your whitespace) 學(xué)習(xí)在圖像上疊加文本的方法 ( Learn the methods of overlaying text on image...
摘要：自定義名稱(chēng)縮放控制器可以使用中的動(dòng)畫(huà)設(shè)計(jì)更為華麗的效果。在和中必須使用，不然它們會(huì)同時(shí)生效，動(dòng)畫(huà)也會(huì)瞬間完成。先在標(biāo)簽內(nèi)加入，接著類(lèi)似自定義動(dòng)畫(huà)可以給命名。 文章鏈接：Vue.js基礎(chǔ)教程 開(kāi)發(fā)工具準(zhǔn)備： 根據(jù)個(gè)人喜歡選擇IDE，我使用的是WebStorm，推薦使用Atom和VSCode； 安裝git base和node.js； 安裝vue-cli，命令npm i -g @vue/...
閱讀 3563·2021-08-31 09:39
閱讀 1869·2019-08-30 13:14
閱讀 2932·2019-08-30 13:02
閱讀 2779·2019-08-29 13:22
閱讀 2357·2019-08-26 13:54
閱讀 779·2019-08-26 13:45
閱讀 1597·2019-08-26 11:00
閱讀 990·2019-08-26 10:58
