自由造型的網(wǎng)頁外觀設(shè)計(jì)研究

鄧鐵橋

[摘要]隨著計(jì)算機(jī)技術(shù)的飛速發(fā)展,網(wǎng)頁設(shè)計(jì)風(fēng)格日趨多樣化和個(gè)性化,新的觀念、新的手法不斷涌現(xiàn)出來。根據(jù)主題表現(xiàn)的需要,某些追求豐富視覺效果、采用大量圖片文件的版面出現(xiàn)在我們的視野中,這些或動(dòng)或靜的圖片經(jīng)過靈活剪裁、合理布局創(chuàng)造出各種新穎的形式。其中較引人注目的是網(wǎng)頁外觀的自由造型設(shè)計(jì)。這種設(shè)計(jì)打破單一方形外框的格局,形態(tài)生動(dòng),特色鮮明,它的出現(xiàn),豐富了作品的視覺表現(xiàn)力,為網(wǎng)絡(luò)世界增添了多彩的一筆,值得我們?nèi)ド钊胙芯颗c探討。

[關(guān)鍵詞]網(wǎng)頁 外觀設(shè)計(jì) 虛擬 風(fēng)格

自由造型的外觀設(shè)計(jì)在手法上是善于突破傳統(tǒng)的,但這種突破并不天馬行空,技術(shù)要素與題材適應(yīng)的約束總貫穿于整個(gè)創(chuàng)作過程,在一定的限制條件下如何發(fā)揮美感與創(chuàng)意的強(qiáng)大感召力,這就需要我們?nèi)フJ(rèn)真思考了。以下,筆者將介紹幾種網(wǎng)頁外觀中自由造型的常見形式,分析它們整合與變化的手法,綜合其中的構(gòu)造規(guī)律,或許從中能給我們的創(chuàng)作帶來某些靈感與啟發(fā)。

一、仿物風(fēng)格

仿物風(fēng)格的外觀設(shè)計(jì)是將頁面的視覺元素,包括內(nèi)文、圖片、視頻等都安置在物件模型或模型組合中,常見的模型有包裝盒、電唱機(jī)、顯示器、臺(tái)歷等。這些設(shè)計(jì)巧妙地處理了外包裝與信息承載之間的關(guān)系,特別是在一些仿電器外觀的頁面中,設(shè)計(jì)師總喜歡巧妙地將網(wǎng)頁功能按鈕與模型結(jié)構(gòu)性按鈕結(jié)合起來,如調(diào)音臺(tái)刻度盤、手機(jī)按鍵等往往就是嵌藏網(wǎng)頁導(dǎo)航區(qū)域的玄機(jī)處,既人性化又富趣味性。仿物式外觀的模型大部分是帶立體效果的。這立體的表現(xiàn),一靠結(jié)構(gòu)的縱深度描繪,二靠光的合成,兩者的共同作用模擬出真實(shí)空間中的形體,從觀感上來講,一開始就能給瀏覽者貼近生活的可親印象,極具吸引性。立體物造型的外觀在制圖時(shí)是非常注重細(xì)節(jié)描繪的,形的刻畫、色彩的變化及質(zhì)感的處理時(shí)常都要照顧周全,可見,寫實(shí)能力從中起到非常重要的作用。另一方面,我們看到的立體模型是置身于一定虛擬環(huán)境的,背景的處理必然與非三維的效果有所不同,它不是簡(jiǎn)單的襯底,而是一個(gè)有空間關(guān)系的場(chǎng)景,光的作用下,場(chǎng)景本身可以顯現(xiàn)明暗變化,物體在其中也會(huì)投射影的效果,因此在設(shè)計(jì)中,我們要提高對(duì)它的重視程度,不可簡(jiǎn)單概念化地對(duì)待。此外,在接近平面的仿物模型中,較具代表性的是包裝盒風(fēng)格,它在結(jié)構(gòu)上完全仿造平攤的紙盒印刷稿,雖然布局特殊,但根據(jù)信息量大小能靈活調(diào)整盒子的塊面比例,而且有區(qū)域自然劃分的優(yōu)勢(shì),所以總體上一般都能保持大方整齊的特點(diǎn)。某些包裝盒式的設(shè)計(jì)在邊沿處還添加了輕微的光影,實(shí)實(shí)在在地增加了一些空間的感覺,這也是用以豐富畫面的一種簡(jiǎn)捷的手法,對(duì)此類造型偏平的物件表現(xiàn)顯得特別有效。

二、方框破形

方框破形的手法,以四方外形為基礎(chǔ),加上一定的形體剪切或配以圖片進(jìn)行調(diào)整與修飾,使得外輪廓克服單一的四直線加四直角的組合局限,在細(xì)節(jié)上作形的突破,但整體上仍保留方塊的影響。事實(shí)上,它屬于整體歸一而局部變化的處理,作為變化的部分既要發(fā)揮破形的作用,在平淡中尋得新奇意趣,也要注意整體效果的維護(hù),切忌零碎散亂。方框破形的方法很多,其中用得比較多的有:圖的穿插、按鈕的特殊設(shè)計(jì)、邊緣機(jī)理。是以圖片作為突破點(diǎn),沖出方形框造出特異的外形,作破形的圖片在處理的時(shí)候,經(jīng)常是摳去背景來使用,以局部外形的不規(guī)則對(duì)比原直線直角營(yíng)造的整齊與嚴(yán)謹(jǐn)。在這里,被突出的圖片是視覺的焦點(diǎn)部位,所以對(duì)其所占比例、呼應(yīng)關(guān)系等要求都比較高,否則容易有粗糙牽強(qiáng)的感覺。按鈕的特殊設(shè)計(jì),是將處于布局邊緣的按鈕作為變化的對(duì)象,單個(gè)按鈕的形狀可方可圓,又可不規(guī)則地成形,至于成組的按鈕根據(jù)不同的需要,排列上既可呈散點(diǎn)式,也可呈規(guī)律式,它們?cè)诜叫慰蜻吘壣系扔谑且粋€(gè)天窗,面積不大但十分生動(dòng)靈氣,自身精致化的同時(shí)又豐富了大外形。邊緣機(jī)理,是在方框邊緣添加機(jī)理效果的手法,將堅(jiān)挺鋒利的直線以非規(guī)則的紋理或筆觸進(jìn)行改造,原本平滑的外形變得或凸或凹,凹凸幅度相對(duì)大的部分也可以起到一定程度的變形作用。我們常見的邊緣機(jī)理有水濺、碎紙、火烤、干筆觸等,它們各有特色,用法靈活,有方便調(diào)整的優(yōu)點(diǎn)。

三、邊框虛化

邊框的虛化,并不等于沒有邊框,有時(shí)只是潛藏起來而已。內(nèi)容只占據(jù)了瀏覽器3/5的份額,沒有占滿所有的空間。從內(nèi)容的擺放位置看,人的視覺習(xí)慣帶領(lǐng)著我們從菜單的右側(cè)末端垂直往下形成邊線,而主形象下端因?yàn)闆]有具體內(nèi)容,所以也可認(rèn)為是到了頁面的邊緣了。因此,我們判斷有效的頁面編排是緊貼左上方對(duì)齊,往下往右2/3處以外的空余部分則屬于背景。由于瀏覽器背景是白色,具體畫面的底也沒有作色彩的區(qū)別處理,因此視覺上連成一片,網(wǎng)頁的邊呈虛化的狀態(tài),它并不出現(xiàn)在畫面,但可以讓觀眾感覺到它的存在。這種隱藏了外邊緣的頁面設(shè)計(jì)在實(shí)際應(yīng)用中并不少見,其特點(diǎn)是頁面有效范圍不充滿瀏覽器,內(nèi)容大多居中或往上往左對(duì)齊,與背景間沒有明確的界線,根據(jù)位置處于邊緣處的各種元素其位置的視覺引導(dǎo),可聯(lián)結(jié)成虛擬的外輪廓。這種虛化邊框的處理與滿屏的編排在表面效果上似有雷同,但本質(zhì)區(qū)別在于考慮構(gòu)圖時(shí)的版面范圍不同,一個(gè)只占瀏覽器的局部面積,一個(gè)則布滿整個(gè)圖面,它們的空白區(qū)域擔(dān)任著不同的版面職能,頁面各元素的呼應(yīng)關(guān)系也不一樣,因此,我們不能簡(jiǎn)單地把這兩種布局方法等同起來。其實(shí),邊框虛化的處理手法是網(wǎng)頁特殊技術(shù)條件下的產(chǎn)物,讓屏幕在不同分辨率設(shè)置下瀏覽起來不會(huì)產(chǎn)生太大差異,但若使用不當(dāng)容易造成排版不完整的感覺,因此,我們?cè)谠O(shè)計(jì)的時(shí)候,應(yīng)該看實(shí)際采取靈活的資源配置手法,不可牽強(qiáng)附會(huì)過于僵化。

在自由造型網(wǎng)頁外觀中,除了以上三種常見形式外,其實(shí)還有很多有特點(diǎn)的類型,如半開放式、外形傾斜式等,它們?cè)谠O(shè)計(jì)上沒有固定的模式,但新意往往隱藏在不經(jīng)意的細(xì)節(jié)變化中。這就需要我們仔細(xì)觀察、善于發(fā)現(xiàn)與學(xué)習(xí),才能領(lǐng)悟其中的奧妙,掌握其中的技巧。

四、結(jié)語

網(wǎng)頁外觀相當(dāng)于網(wǎng)絡(luò)的一張面孔,前衛(wèi)、浪漫還是方正、嚴(yán)謹(jǐn),都一一體現(xiàn)于此,自由造型生動(dòng)展現(xiàn)了設(shè)計(jì)師的過人智慧,也淋漓盡致地發(fā)揮了網(wǎng)絡(luò)在信息傳遞中的強(qiáng)大作用。眾所周知,當(dāng)今的網(wǎng)絡(luò)技術(shù)正以高速不斷更新和進(jìn)步,隨之也推動(dòng)了藝術(shù)手法的創(chuàng)新與發(fā)展,可實(shí)現(xiàn)的媒體效果也隨之增多,未來的網(wǎng)頁外觀造型必然會(huì)以更豐富多彩的形式展示于眾,開放的心態(tài)、善于學(xué)習(xí)與創(chuàng)新的精神是時(shí)代對(duì)我們的要求,更多更炫目的視覺精彩正翻開著網(wǎng)絡(luò)世界的新篇章。

參考文獻(xiàn):

[1]王令中.視覺藝術(shù)心理[M].人民美術(shù)出版社,2006.

[2](美)魯?shù)婪?阿恩海姆.藝術(shù)與視覺[M].中國(guó)社會(huì)科學(xué)出版社,1984.

[3]藍(lán)先琳.平面構(gòu)成[M].中國(guó)輕工業(yè)出版社,2005.