本期特約作者：打火機(jī)，菜花，布萊恩，為大家一起分享他們的獨(dú)特見解。

 

關(guān)鍵字：創(chuàng)意、混維
　　所謂反 Box 布局，就是不再拘泥與傳統(tǒng)的 Box 布局模型，而是采用一種更有創(chuàng)意的的布局，為用戶帶來(lái)非常規(guī)的視覺體驗(yàn)。然而需要指出，這種創(chuàng)意布局需要非常注意易用性問(wèn)題，一種新的創(chuàng)意布局需要時(shí)間去慢慢成熟。

當(dāng)混維的概念進(jìn)入頁(yè)面
　　設(shè)計(jì)師刻意營(yíng)造出來(lái)的3D空間感被突如其來(lái)的圖片和文字打回2D的原形，著實(shí)讓用戶體驗(yàn)了一把錯(cuò)落的空間感帶來(lái)的快感。

[Page: ]

小細(xì)節(jié)成大效果
　　有時(shí)候，我們需要做的僅僅是處理好一個(gè)簡(jiǎn)單的小細(xì)節(jié)，這便讓整個(gè)畫面活了起來(lái)。。

　　上圖列表式的展示效果讓人眼前一亮，但是其真正的亮點(diǎn)在于上下邊框兩條并不起眼的不水平的線，微妙的透視關(guān)系讓用戶感覺到了這個(gè)頁(yè)面的空間感，配合 flash動(dòng)態(tài)效果使得這種看似呆板的布局變得調(diào)皮而生動(dòng)。

　　左圖是一個(gè)頁(yè)面的導(dǎo)航部分，簡(jiǎn)潔的大色塊和文字，乍一看并未覺得特別，但是設(shè)計(jì)師用了簡(jiǎn)單的透視關(guān)系，讓導(dǎo)航左邊的色塊向后延伸，便產(chǎn)生了奇特的空間感，內(nèi)容也由此變得有層次感，整個(gè)頁(yè)面的結(jié)構(gòu)也更加清晰，帶給用戶愉悅的體驗(yàn)。

[Page: ]

關(guān)鍵字：統(tǒng)一直觀
　　單頁(yè)布局是使用單一頁(yè)面展示站點(diǎn)的全部?jī)?nèi)容，這并不意味著站點(diǎn)內(nèi)容少，這個(gè)頁(yè)可能很復(fù)雜，包含了大量圖形和動(dòng)畫效果，加載的時(shí)間也會(huì)有些長(zhǎng)。比如，用戶點(diǎn)擊導(dǎo)航菜單后，該欄目下的新內(nèi)容會(huì)通過(guò)漸入漸出，滑入滑出等動(dòng)畫效果顯示出來(lái)，替換原來(lái)的內(nèi)容，而頁(yè)面其它部分始終保持不變。

[Page: ]

角色扮演游戲
　　單頁(yè)布局擅于扮演各種角色，用于場(chǎng)景表現(xiàn)實(shí)在是再適合不過(guò)了，直觀地將信息傳達(dá)給用戶。

 

關(guān)鍵字：視覺沖擊 前衛(wèi)
　　象巨型字體主導(dǎo)當(dāng)前 Web 設(shè)計(jì)一樣，巨型插圖風(fēng)格設(shè)計(jì)似乎也正流行起來(lái)，巨型插圖可以和巨型字體的結(jié)合使用，帶來(lái)更吸引人，更生動(dòng)的效果。另外，設(shè)計(jì)師們?cè)絹?lái)越喜歡使用那些色彩鮮艷的圖形提供背景，包含各種風(fēng)格，抽象畫，剪貼畫，剪貼簿，裝飾畫，懷舊，水彩，有機(jī)紋理以及照片背景等。

[Page: ]

潮流插畫
　　個(gè)性的插畫風(fēng)格和醒目的文字，猛烈地刺激著用戶的視覺。

[Page: ]

制造氛圍
　　這類表現(xiàn)形式似乎讓失去了激情的設(shè)計(jì)師們一下子找到了藝術(shù)家的感覺，復(fù)古風(fēng)、矢量插畫、照片拼貼、傳統(tǒng)藝術(shù)等各種風(fēng)格的圖案、元素在這里能夠發(fā)揮得淋漓盡致。
　　當(dāng)然，過(guò)于猛烈的視覺刺激可能讓用戶產(chǎn)生視覺疲勞，讓我們看看另外一種安靜的，舒服的表現(xiàn)方法。

　　如左下圖，整個(gè)畫面被背景的大圖氣氛所感染，大膽的留白簡(jiǎn)約而靜謐。簡(jiǎn)約設(shè)計(jì)在這里也能得到大膽的發(fā)揮。

[Page: ]

寫在后面的幾句話
　　看了這么多優(yōu)秀案例，可以看出未來(lái)web design發(fā)展不拘一格，呈多元化方向發(fā)展，沒(méi)有做不到，只有想不到，身邊的一支筆，一張紙，都可能觸發(fā)我們每個(gè)人的設(shè)計(jì)靈感。所以，當(dāng)我們?cè)诳嗫鄵项^的做需求的時(shí)候，不妨多看看一些好的設(shè)計(jì)作品，或者倒上一杯冰水，讓自己冷靜下來(lái)，跳出自己的慣性思維，更多的從生活中，來(lái)發(fā)掘出新的創(chuàng)意。
最后，還是那句話，希望這些優(yōu)秀作品，能夠?qū)δ觼?lái)下的工作、學(xué)習(xí)、人生觀、價(jià)值觀能有深刻影響。

[Page: ]

 在前邊的話
　　提到傳統(tǒng)的WUI設(shè)計(jì)，通常想到是品牌傳達(dá)、氛圍渲染、信息排版等純粹的視覺表現(xiàn)。然而隨著隨著諸如 jQuery， Mootools， Prototype 一類的 JavaScript 框架的崛起，視覺表現(xiàn)不再僅僅是靜態(tài)的Newspaper，適當(dāng)?shù)囊肷狭?、易用的?dòng)態(tài)效果正是當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)。下面主要結(jié)合實(shí)例與大家分享 jQuery tools的華麗應(yīng)用效果。

Scrollable image gallery
　　Apple.inc近期的幾款新產(chǎn)品首頁(yè)首屏內(nèi)容統(tǒng)一采用了具有沖擊力的產(chǎn)品大圖，當(dāng)我們點(diǎn)擊下方的縮略圖后可以發(fā)現(xiàn)，產(chǎn)品圖以流暢的滑動(dòng)視覺表現(xiàn)進(jìn)行切換。這有別于傳統(tǒng)站點(diǎn)設(shè)計(jì)中生硬的單幀切換，同時(shí)細(xì)膩的動(dòng)態(tài)效果與Apple時(shí)尚科技的品牌氣質(zhì)非常Match，也傳達(dá)出設(shè)計(jì)師對(duì)細(xì)節(jié)的完美追求。

http://www.apple.com/ipodnano/

[Page: ]

Tabs
　　Panic Coda的網(wǎng)頁(yè)設(shè)計(jì)的整體風(fēng)格非常清新，介紹部分同樣也運(yùn)用了jQuery技術(shù)，點(diǎn)擊tab輕盈的切換與清新風(fēng)格相映成趣。操作體驗(yàn)上同樣值得稱贊，不需要刷新頁(yè)面、不需要拖拉滾動(dòng)條、甚至不需要移動(dòng)鼠標(biāo)，只需要單擊 就可以完成全部信息的瀏覽。

http://www.panic.com/coda/
Tooltip
T　　oolTips是非常實(shí)用的臨時(shí)信息表現(xiàn)，之前我們只能使用windows默認(rèn)的小黃條。而現(xiàn)在無(wú)論是酷炫的DockStack風(fēng)格，還是清爽 light風(fēng)都可以配合頁(yè)面風(fēng)格與內(nèi)容的需求的設(shè)計(jì)任意表現(xiàn)。設(shè)計(jì)貼士：Tips中加入適當(dāng)?shù)年幱皶?huì)增強(qiáng)視覺沖擊力感，同時(shí)也能更好的把視覺重心轉(zhuǎn)移到當(dāng)前的信息上。

http://flowplayer.org/tools/demos/tooltip/any-html.html
Overlay
　　在現(xiàn)代WebUI設(shè)計(jì)中，浮動(dòng)層是一種非常有效的UI概念，可以用來(lái)顯示產(chǎn)品細(xì)節(jié)、不再需要刷新整個(gè)頁(yè)面。Apple配合整體的頁(yè)面風(fēng)格采用白色系，設(shè)計(jì)手法很簡(jiǎn)潔，并沒(méi)有多余的元素，界面中最重要的操作“關(guān)閉”按鈕使用了白色的反色醒目的置于界面中，看得出對(duì)細(xì)節(jié)設(shè)計(jì)的考究，對(duì)每個(gè)細(xì)節(jié)都注入人性的關(guān)懷。

http://www.apple.com/macosx/what-is-macosx/dock-and-finder.html
　　Palm的浮層設(shè)計(jì)在黑色80%透明度的背景色疊加下，使浮出層與點(diǎn)擊前的內(nèi)容保持一定的聯(lián)系，同時(shí)又能很好的將目光f　　ocus在當(dāng)前信息中。內(nèi)容區(qū)采用了無(wú)邊框的設(shè)計(jì)配以柔和的陰影產(chǎn)生了細(xì)膩的層次感，操作區(qū)設(shè)計(jì)同樣非常簡(jiǎn)潔，所有的元素與手法綜合起來(lái)傳達(dá)出低調(diào)的高品質(zhì)感。

http://www.palm.com/us/products/phones/pre/index.html
　　目前這些效果已經(jīng)成熟的應(yīng)用于國(guó)際知名站點(diǎn)中，不但以很炫的方式展示了產(chǎn)品，同時(shí)很優(yōu)雅的提升了網(wǎng)站的易用性，從而間接增強(qiáng)了用戶的品牌好感度。實(shí)現(xiàn)它們并不需要大量的代碼和流量，精巧的JS文件只有 5.72 Kb，現(xiàn)在只需要通過(guò)與前臺(tái)工程師簡(jiǎn)單的溝通就能實(shí)現(xiàn)?？煸谀愕南乱淮蜽UI設(shè)計(jì)中嘗試引入這些效果吧
More Resources:
http://flowplayer.org/tools/demos/index.html

　　在現(xiàn)代設(shè)計(jì)領(lǐng)域中，插畫設(shè)計(jì)可以說(shuō)是最具有表現(xiàn)意味的，它與繪畫藝術(shù)有著親近的血緣關(guān)系。插畫藝術(shù)的許多表現(xiàn)技法都是借鑒了繪畫藝術(shù)的表現(xiàn)技法。插畫藝術(shù)與繪畫藝術(shù)的聯(lián)姻使得前者無(wú)論是在表現(xiàn)技法多樣性的探求，或是在設(shè)計(jì)主題表現(xiàn)的深度和廣度方面，都有著長(zhǎng)足的進(jìn)展，展示出更加獨(dú)特的藝術(shù)魅力，從而更具表現(xiàn)力。從某種意義上講，繪畫藝術(shù)成了基礎(chǔ)學(xué)科，插畫成了應(yīng)用學(xué)科。
　　網(wǎng)路上常充滿了各式各樣地商業(yè)信息，插畫設(shè)計(jì)已成為現(xiàn)實(shí)社會(huì)不可替代的藝術(shù)形式。其中插畫特有的那份活潑、輕松、親切、個(gè)性感覺，是其他表現(xiàn)手法無(wú)法代替的。若插畫在網(wǎng)站設(shè)計(jì)中，把握不當(dāng)就會(huì)被人認(rèn)為“非”主流、低齡、亂等毛病。這里整理一下自己收集一些較出色的網(wǎng)站，看看國(guó)外的大師們是如何找到一條可以兩者結(jié)合的道路。希望帶給你同我一些建設(shè)性的建議。

[Page: ]

插畫式Banner：
　　左圖：Top區(qū)域用色彩明快，線條簡(jiǎn)練的插畫吸引視線，頁(yè)面主題采取簡(jiǎn)潔色塊。這種插畫和網(wǎng)站的最基本組合方式，很適合應(yīng)用到一些活動(dòng)頁(yè)面當(dāng)中。
右圖：同樣Top區(qū)域運(yùn)用插畫作為頭部，帶來(lái)不少的眼球注意。但在頁(yè)面內(nèi)容區(qū)，顏色的對(duì)比，造成一種反差效果。在個(gè)性、活潑感強(qiáng)的廣告、活動(dòng)即可使用此法。

網(wǎng)站細(xì)節(jié)，插畫元素運(yùn)用：
　　左圖：在網(wǎng)站小細(xì)節(jié)運(yùn)用插畫元素，既簡(jiǎn)練又有力，細(xì)節(jié)的奢華。
　　右圖：同樣是細(xì)節(jié)運(yùn)用了插畫元素，卻給用戶帶來(lái)的是一陣輕松親切的感覺。

 全站式插畫：
　　整站都用插畫貫穿的在韓國(guó)和日本應(yīng)用較頻繁，無(wú)論大小網(wǎng)站，都喜歡用上一兩個(gè)卡通元素。而這基本成為日韓兩地網(wǎng)站的一大特色。我們平時(shí)在活動(dòng)和廣告都可以應(yīng)用。同時(shí)左圖中的動(dòng)勢(shì)設(shè)計(jì)，有引領(lǐng)觀賞者走入主題之感。

http://www.pictoplasmaconference.com/colourme.html
　　與日韓一樣愛用插畫的歐美國(guó)家，也很喜歡使用全站式的插畫。但歐美會(huì)更著重于顏色鮮明的對(duì)比，和大量使用實(shí)物、3D技術(shù)作為輔助劑。

http://web4t.oneforyouoneforme.ca/indexFlash.html
　　“線條”是繪畫最基本的表現(xiàn)手法，這個(gè)網(wǎng)站除了簡(jiǎn)潔的線條感外，特別的地方還在于是藍(lán)色和白色兩快區(qū)域是可以同時(shí)有兩個(gè)鼠標(biāo)在操作。為單純的線條營(yíng)造了科技感。

http://www.tracychapman.com/
　　這個(gè)網(wǎng)站咋眼看是一幅白底黑線的黑白插畫。當(dāng)你進(jìn)入頁(yè)面后，你很快就發(fā)現(xiàn)右上角有一塊色條，你可以用上面的顏色任意添加到畫面的物品中，可以讓用戶重溫一把兒時(shí)玩填色游戲的樂(lè)趣。

http://quakequizsf.org/
　　一個(gè)關(guān)于地震常識(shí)的網(wǎng)站，這種手繪的風(fēng)格讓人易于去接受枯燥的知識(shí)。節(jié)制的顏色運(yùn)用、規(guī)整的線條，還有誰(shuí)敢說(shuō)它低齡呢？

http://watchmenmotioncomic.com/
　　這個(gè)網(wǎng)站中，隨著鼠標(biāo)的移動(dòng)，插畫呈現(xiàn)3D轉(zhuǎn)動(dòng)效果，即觀賞畫面的角度改變。原來(lái)在單純的畫面中，只要加如小小3D技術(shù)，網(wǎng)站也可以很有型。

http://www.knutselwereld.nl/
還有一些…

左:http://14-7.com/http://14-7.com/
中:http://cardboard.theupsstore.com/
右:http://ecodazoo.com/
　　以上幾個(gè)網(wǎng)站均是插畫、實(shí)物、3D的結(jié)合。這種結(jié)合方式在歐美設(shè)計(jì)師手下很熟練地把玩著。盡管歐美插畫的創(chuàng)作媒材多變且多元，但有一共同點(diǎn)就是透過(guò)這些媒材的使用將可塑造一畫面的氣氛與情感，從而傳達(dá)出作品的意象。意即，一媒材的使用可看出創(chuàng)作者如何營(yíng)造與詮釋文本或創(chuàng)作者本身所欲表達(dá)的概念。

　　現(xiàn)在帶有插畫的網(wǎng)站多以線條、實(shí)物、3D卡通……為主，還有更多的插畫風(fēng)格等著我們?nèi)L試，找出更多插畫與網(wǎng)站關(guān)系紐帶，設(shè)計(jì)出屬于我們自己風(fēng)格的網(wǎng)站，同時(shí)我們創(chuàng)作的插畫風(fēng)格符合產(chǎn)品的品牌風(fēng)格。。