網(wǎng)頁(yè)設(shè)計(jì)找不到完美的色彩搭配?直接選擇單色吧!
也許你會(huì)認(rèn)為單色的網(wǎng)頁(yè)設(shè)計(jì)太過(guò)單調(diào),那么,就讓AnyForWeb用下面的案例打消你的疑慮。網(wǎng)頁(yè)不會(huì)因?yàn)樯识鵁o(wú)聊,用戶會(huì)通過(guò)色彩看到設(shè)計(jì)師的心。
1.你能想象一個(gè)網(wǎng)站的頁(yè)面只由純色塊和最普通線條組成嗎?第一個(gè)案例讓你大開(kāi)眼界。這樣的設(shè)計(jì)在技術(shù)上也許新手設(shè)計(jì)師就能輕易完成,設(shè)計(jì)想法也并不出跳,最簡(jiǎn)易的兩者組合在一起,卻表現(xiàn)出了令人意想不到的視覺(jué)效果。
2. Design Week Portland的網(wǎng)頁(yè)首屏也采用了單色的設(shè)計(jì)手法,頁(yè)面中只有大色塊,以及比較復(fù)古字體的文字。這個(gè)案例提示我們,如果要用不那么中規(guī)中矩的字體,背景盡量要選擇單一或模糊的圖片。
3.下面這個(gè)案例從嚴(yán)格意義上來(lái)說(shuō)并不屬于單一色的網(wǎng)頁(yè)設(shè)計(jì),只能稱之為背景單一色系。背景使用了高清的仿真圖片,涂鴉風(fēng)格的文字覆蓋在背景上方,讓整個(gè)界面看起來(lái)更加自由不羈,多了一些城市街頭的感覺(jué)。
4.大面積使用透明度極低的色塊作為網(wǎng)頁(yè)背景,會(huì)讓界面顯得更加自然清新。手繪風(fēng)的可愛(ài)字體設(shè)計(jì)讓網(wǎng)站加入了一些天真和童趣,與純色背景相得益彰。網(wǎng)站整體的顏色搭配也十分流暢。
5.灰白色系的背景讓網(wǎng)頁(yè)中心的TheSecret Door變得更加神秘,把頁(yè)面氣氛渲染到更深入的層次,增強(qiáng)了瀏覽者的點(diǎn)擊欲望。單色背景在這個(gè)案例中的主要作用在于烘托網(wǎng)站所要表達(dá)的心情和氛圍。
6.這個(gè)案例也并不算是一種典型的單色網(wǎng)頁(yè),但也許能為設(shè)計(jì)師們帶來(lái)一些靈感。背景來(lái)源于天空,良好的前端效果讓我們仿佛愜意的置身于云層之上,帶來(lái)一種前所未有、朦朦朧朧的獨(dú)特美感。
7. 這個(gè)可愛(ài)的全局扁平化網(wǎng)站由幾個(gè)分頁(yè)面組成,每個(gè)頁(yè)面都有不同的主色調(diào),但互相之間毫不沖突,仔細(xì)思考之后,會(huì)發(fā)現(xiàn)它們之間有著微妙的聯(lián)系。瀏覽時(shí),你也許不會(huì)吝嗇你的鼠標(biāo),想要點(diǎn)擊每一個(gè)圖標(biāo)按鈕。
8.大范圍使用橙色作為背景似乎顯得有些大膽,在視覺(jué)上,橙色給人一種過(guò)于鮮亮的印象。但在此案例中,設(shè)計(jì)師用黑色的加以搭配使用,讓網(wǎng)站看起來(lái)不那么突兀沖擊,反而多了一些年輕和活力。
9.這個(gè)網(wǎng)站的風(fēng)格只能用極簡(jiǎn)來(lái)形容了。灰白底色和文字,網(wǎng)頁(yè)中找不到任何多余的成分和元素。設(shè)計(jì)師很有心思的在背景中加入了紋理的設(shè)計(jì),讓整體看起來(lái)更加真實(shí)化,不那么單調(diào)。
10.與上一個(gè)的案例相反,設(shè)計(jì)師選用了略顯沉悶的黑色作為網(wǎng)頁(yè)背景色,但效果卻也不一般。如果白色給人一種純潔簡(jiǎn)單的感覺(jué),那么黑色就是與眾不同的代名詞了。感受一下。
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)單大氣的網(wǎng)站,不如就從開(kāi)始顏色入手吧。在五彩繽紛的眾網(wǎng)頁(yè)中,單色的設(shè)計(jì)反而能脫穎而出。
本文地址:http://m.pkvc.cn/tutorial/di2092.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏