酷站分享:奇思妙想網(wǎng)頁(yè)設(shè)計(jì)賞析

　　變化無(wú)端的奇思妙想，特立獨(dú)行的交互模式，獨(dú)樹(shù)一幟的設(shè)計(jì)手法，它們常常來(lái)自于設(shè)計(jì)師的靈光一閃。在設(shè)計(jì)項(xiàng)目中加入一點(diǎn)奇思，不僅能夠提升整體設(shè)計(jì)的意境，而且常常會(huì)獲得點(diǎn)鐵成金的奇效。

　　不論這個(gè)奇異的點(diǎn)子落腳在一個(gè)微小的元素上，還是貫徹到整體的設(shè)計(jì)里，這種專(zhuān)屬于腦洞的奇特魅力會(huì)自然地吸引這用戶(hù)。許多奇妙的設(shè)計(jì)常見(jiàn)于女性化和兒童化的設(shè)計(jì)，但是它們的作用不僅止于這兩個(gè)類(lèi)型。許多不同類(lèi)型的設(shè)計(jì)項(xiàng)目都能夠融入奇思妙想，不過(guò)近期這類(lèi)創(chuàng)意腦洞最容易同摩登復(fù)古設(shè)計(jì)風(fēng)的網(wǎng)頁(yè)結(jié)合起來(lái)使用。

　　說(shuō)一千道一萬(wàn)，我們不如看看設(shè)計(jì)師們都是怎么做的吧。

　　手寫(xiě)字體

　　相比于我們常用的襯線(xiàn)體和非襯線(xiàn)體，手寫(xiě)字體常常顯得更加真實(shí)，更加情緒化，相比之下也更加富有魅力，能夠?qū)⒄麄�(gè)設(shè)計(jì)的情感最大化。參考上面的Summer Fridays。

　　當(dāng)然，過(guò)猶不及。在使用手寫(xiě)字體的時(shí)候，有些老生常談的問(wèn)題值得注意：不要使用那些被用濫了的手寫(xiě)字體。為了效果最大化，越接近于手寫(xiě)效果的字體，越真實(shí)，效果就越好。而絕大多數(shù)的計(jì)算機(jī)設(shè)計(jì)的字體就正好缺乏這種真實(shí)性。所以，下面的幾個(gè)問(wèn)題值得你考慮：

　　·盡量挑選擁有多種樣式可替換的字體族。當(dāng)同一個(gè)字母使用多次又需要有細(xì)微差別的時(shí)候，可以通過(guò)替換同族不同樣式的字體來(lái)實(shí)現(xiàn)這種差異。

　　·不要大規(guī)模使用手寫(xiě)字體，盡量最低限度的使用確保效果最大化，比如只在標(biāo)題中使用。

　　·請(qǐng)務(wù)必保持風(fēng)格和基調(diào)的一致性。纖細(xì)的字體盡量和細(xì)體一起搭配使用，而粗體則盡量和粗體組合使用。

　　水彩畫(huà)

　　水彩畫(huà)屬于那種上手并不那么容易，但是用好了又特別贊的設(shè)計(jì)元素。它的使用方式很多，從背景到插畫(huà)都很不錯(cuò)，像上面的網(wǎng)站 Made of Sundays 就是很好的例子。

　　當(dāng)你使用水彩畫(huà)的時(shí)候，應(yīng)當(dāng)明確你的目的：拿它來(lái)干什么。想要充分用好它，要么盡可能讓界面全套的元素都沿用水彩元素，要么僅僅在較小的元素上使用水彩元素。

　　當(dāng)然，如果沒(méi)有其他對(duì)比強(qiáng)烈的視覺(jué)效果的時(shí)候，使用水彩元素也無(wú)傷大雅。如果你覺(jué)得水彩元素會(huì)喧賓奪主的話(huà)，不妨適當(dāng)?shù)氐�化它們�?/span>

　　插畫(huà)

　　沒(méi)有什么比漂亮精致的插畫(huà)更抓人眼球的了。插畫(huà)本身就是高識(shí)別度的設(shè)計(jì)元素，而你的設(shè)計(jì)則可以借此更好的被用戶(hù)所認(rèn)識(shí)。所以，一份設(shè)計(jì)優(yōu)秀的插畫(huà)能夠成為你的重要的“身份識(shí)別”。

　　你并不需要用大面積、整幅的插畫(huà)來(lái)證明什么，一個(gè)小的插畫(huà)，甚至是草圖就足夠了。Rachel’s Ginger Beer 這個(gè)頁(yè)面僅僅只是使用幾幅小的插畫(huà)，就很好的營(yíng)造出整體效果，展現(xiàn)出設(shè)計(jì)者的奇妙思路。

　　鮮艷的色彩

　　沒(méi)有什么比鮮艷的色彩更能能營(yíng)造輕松愉悅的氛圍了。色彩本身就能讓用戶(hù)第一時(shí)間感受到，而大膽明亮的配色在情緒表達(dá)上也有著先天的優(yōu)勢(shì)，用戶(hù)能從中直接感受到有趣或者愉悅的情緒。

　　設(shè)計(jì)師的奇思妙想常常會(huì)用高飽和度的黃色、橙色和綠色來(lái)表現(xiàn)。實(shí)際上，即使是只使用這些色彩就已經(jīng)能夠達(dá)到效果了，并非必須使用高飽和度。

　　正在影響整個(gè)設(shè)計(jì)領(lǐng)域的扁平化設(shè)計(jì)和Material Design 為我們貢獻(xiàn)出許多奇妙的配色方案，如果你想調(diào)出不同凡響的配色方案，不妨從這里開(kāi)始：

　　·Flat UI Color Picker

　　·Material Design Color Palette Generator

　　線(xiàn)條和筆觸

　　想要讓你的設(shè)計(jì)顯得輕盈的另外一種手法的就是將細(xì)線(xiàn)和纖細(xì)的筆觸貫穿整個(gè)設(shè)計(jì)。從主視覺(jué)元素、圖片的邊緣到字體的筆畫(huà)都使用線(xiàn)條和細(xì)筆觸來(lái)表現(xiàn)，最關(guān)鍵的是，這些元素營(yíng)造出輕盈的感覺(jué)的同時(shí)，還擁有強(qiáng)大的包容性，承載你的奇妙構(gòu)思，加入更多自定義的、獨(dú)特的元素。

　　舉個(gè)最簡(jiǎn)單的例子，即使是纖細(xì)的元素貫穿始終，你依然可以使用一些不那么纖細(xì)的元素與之搭配，形成對(duì)比。看看Sonikpass 這個(gè)設(shè)計(jì)，它就很好的融入了一些相對(duì)厚重的字體(注意背景)，鮮亮的色彩和深沉的黑色文字、淺灰的背景形成了很好的對(duì)比，不單調(diào)也不繁復(fù)，陰陽(yáng)調(diào)和。

　　簡(jiǎn)單的動(dòng)效

　　雖然動(dòng)效主要是用來(lái)同用戶(hù)進(jìn)行交互、引導(dǎo)交互、呈現(xiàn)效果，但是也可以純是為了有趣而進(jìn)行設(shè)計(jì)。懸停特效、舞臺(tái)效果、跳動(dòng)、拉伸、擬物的運(yùn)動(dòng)等等等等，它們都能夠給用戶(hù)以情緒上的觸動(dòng)。

　　當(dāng)你要將一種獨(dú)特的想法注入到你的動(dòng)畫(huà)中的時(shí)候，務(wù)必記住它是要用來(lái)取悅用戶(hù)的。這也是為什么許多設(shè)計(jì)師在這么做的時(shí)候會(huì)選擇明亮的色彩或者結(jié)合有趣的插畫(huà)——用戶(hù)吃這一套。

　　Pharrell Williams 的網(wǎng)站就集成了許多不錯(cuò)的動(dòng)效，動(dòng)態(tài)磁貼式的布局，鮮艷的配色和各式各樣的懸停效果，它們不僅讓用戶(hù)讀取到更多的而內(nèi)容，而且更好的引導(dǎo)用戶(hù)去尋找他們想要的內(nèi)容。

　　有目的性的設(shè)計(jì)缺陷

　　通過(guò)設(shè)計(jì)來(lái)呈現(xiàn)完美和有目的性的設(shè)計(jì)出缺陷是同樣的道理。那些小瑕疵、小缺陷惹人注意，令人側(cè)目，是設(shè)計(jì)師故意為之，從而達(dá)到特定的目的。就像動(dòng)畫(huà)和電影中的各種致敬一樣，這些缺陷會(huì)成為你的優(yōu)勢(shì)。

　　這些缺陷可以以不同的形式存在于不同的地方：

　　·一條線(xiàn)比其他的線(xiàn)都要粗或者細(xì)

　　·文本中某幾個(gè)字和其他的字的字體明顯不同

　　·某個(gè)線(xiàn)條或者插畫(huà)和其他的部分明顯不對(duì)齊或者不一致

　　·明顯不匹配的元素相互混合

　　·不對(duì)稱(chēng)的圖形和不一致的比例

　　·現(xiàn)實(shí)的元素和幻想的元素相互混合搭配

　　結(jié)語(yǔ)

　　如果你拿不準(zhǔn)你的奇妙想法能否迎合用戶(hù)，那么就從小的元素開(kāi)始嘗試，一點(diǎn)一點(diǎn)嘗試中打磨這些元素。不要怕腦洞大，在這個(gè)時(shí)代想法很重要。有人習(xí)慣于平庸，不過(guò)更多的人在尋求不同，也許你的腦洞正好合用。