2022-06-24 分類: 網(wǎng)站建設(shè)
設(shè)計(jì)的骨架:視覺解剖
1983年蘋果官網(wǎng)的首頁設(shè)計(jì),可以清晰的看到這種矩形塊狀的整形切割。
隨著網(wǎng)頁設(shè)計(jì)的發(fā)展,其骨架也慢慢漸隱,但它依然發(fā)揮著支撐起整個(gè)視線框架。這里,有人會與柵格系統(tǒng)聯(lián)系起來。網(wǎng)頁的柵格系統(tǒng)更多發(fā)揮的是對齊元素的作用,而骨架的功能會更加籠統(tǒng)。
頁面設(shè)計(jì)的骨架,針對的是每一頁面的骨架。每一個(gè)網(wǎng)站都會有不同的頁面,我們會把頁面分級為首頁——二級頁面——三級頁面。通常來說,首頁運(yùn)用一個(gè)骨架,二級頁面、三級頁面也分別有一個(gè)骨架。首頁的骨架有時(shí)還會根據(jù)分屏展示的不同展示不同的骨架樣式。但無論有多少變化,一個(gè)網(wǎng)站的諸多頁面的骨架之間,都會存在一種內(nèi)在的視覺統(tǒng)一。
首頁的視覺骨架尤其重要,因?yàn)槭醉摮袚?dān)著網(wǎng)頁的第一印象,還主導(dǎo)著整個(gè)網(wǎng)站的風(fēng)格方向,因此確定好首頁的視覺骨架,是設(shè)計(jì)最初最難明確的問題。很多設(shè)計(jì)師在設(shè)計(jì)最初所耗費(fèi)最多時(shí)間,用于實(shí)驗(yàn)各種頁面版式的類型以期最好的效果展現(xiàn),而事實(shí)上,最好其實(shí)是個(gè)偽命題,在有限的時(shí)間內(nèi),你需要做得就是找好自己的表達(dá)目標(biāo),每個(gè)頁面設(shè)置好一個(gè)視覺焦點(diǎn),根據(jù)焦點(diǎn)來表達(dá)你的重點(diǎn)內(nèi)容。換句話說,你最希望用戶了解什么?這個(gè)問題的答案應(yīng)該是要無比清晰的在大腦中伴隨設(shè)計(jì)全過程。
十字準(zhǔn)星式:瞄準(zhǔn)期待
人的視線總是集中在頁面中心,因此將焦點(diǎn)設(shè)置在中心位置最迎合視線的做法。例如將網(wǎng)站的簡介放置于頁面中心,為了讓頁面更豐富,可以增加大圖的背景加強(qiáng)表達(dá)的維度。十字線條經(jīng)過的地方即是視線引導(dǎo)的路徑,因此需要在線條的位置放上重要的元素。中心的位置其實(shí)也是一個(gè)期待點(diǎn),瞄準(zhǔn)視覺期待點(diǎn),對設(shè)計(jì)師來說大的便利就是省力。
無論網(wǎng)頁的導(dǎo)航等其他元素放置于頁面的哪個(gè)位置(盡量圍繞線條經(jīng)過的方向),這兩個(gè)頁面都是屬于十字準(zhǔn)星型的骨架結(jié)構(gòu),焦點(diǎn)始終位于正中,導(dǎo)航無論居于哪里,都屬于次要的視覺地位。
正中的地位帶來絕對的穩(wěn)定感,它也是設(shè)計(jì)師最容易做到的表達(dá)。這種骨架結(jié)構(gòu),相對比較穩(wěn)定,因此在需要在細(xì)節(jié)上營造一些驚喜,來打破這種相對靜止的版式。
垂直雙欄式:雙面一體
將一個(gè)網(wǎng)頁分成兩欄并不意味著均分,它們是按照垂直方向形成了兩列的不同布局。常見的的確是平均分配的表現(xiàn)情況,網(wǎng)頁的焦點(diǎn)內(nèi)容可以選擇任一側(cè),另一側(cè)作為補(bǔ)充。簡稱雙面一體是因?yàn)?,你不能制造兩個(gè)焦點(diǎn),分兩個(gè)部分,它們也應(yīng)該共同營造一個(gè)焦點(diǎn)。
雙欄式的頁面設(shè)計(jì)表現(xiàn)比較靈活,通常會有一偏倚輕重這,樣就能確立好視覺焦點(diǎn),形成對比,制造情景沖突。視覺重點(diǎn)在某一側(cè),利用背景色的不同加強(qiáng)視覺重量的對比。
兩列縮略圖垂直排列,讓版式活躍起來的方法就是增加某一處高度的不同,強(qiáng)調(diào)一點(diǎn)細(xì)微的變化。
網(wǎng)格式:有序與無序
這種骨架樣式通常是基于某一個(gè)網(wǎng)格而搭建內(nèi)容,網(wǎng)格的表現(xiàn)形式多樣,每個(gè)網(wǎng)格都用以展示不同的內(nèi)容,可以是比較規(guī)范的網(wǎng)格,也可以是錯(cuò)落有致……雖說每個(gè)網(wǎng)頁都可以基于網(wǎng)格而設(shè)計(jì),但是網(wǎng)頁的表現(xiàn)未必要嚴(yán)格遵循網(wǎng)格本身。
規(guī)范的網(wǎng)格通常比較傾向古典懷舊,它傳遞出一種相對嚴(yán)格的秩序之美。
動(dòng)感傾斜式:墜落的騙局
傾斜的線條容易形成動(dòng)感的張力,利用這一點(diǎn)所形成的視覺骨架就能很好表現(xiàn)與“運(yùn)動(dòng)”“沖擊力”等動(dòng)感較強(qiáng)的內(nèi)容頁面。
斜向的頁面所制造的墜落式的沖擊力應(yīng)該和配圖樣式相關(guān),因此對慎選斜向的配圖非常重要,尤其是當(dāng)大部分圖片其實(shí)都只適合正向方向的展示。
這些所謂的骨架原理在于隱藏于表層下方的最基地的視覺結(jié)構(gòu),事實(shí)上,其他的元素通常并不嚴(yán)格局限于某個(gè)區(qū)域,這就讓頂層的枝葉更加豐富。
在我們著手進(jìn)行頁面設(shè)計(jì)前,確定好一個(gè)視覺骨架的方向至關(guān)重要,這讓我們并不依賴于運(yùn)氣去“撞”到某個(gè)好的表達(dá),并且你也不需要單獨(dú)設(shè)定某個(gè)固定的骨架,還可以兩兩并用,一個(gè)網(wǎng)站有多個(gè)頁面,多個(gè)頁面都可以擁有不同的布局。同一個(gè)頁面,也會因?yàn)閮?nèi)容的不同采用不同的視覺結(jié)構(gòu)表達(dá)。
下面這一個(gè)網(wǎng)頁里的多個(gè)頁面,每個(gè)頁面都根據(jù)不同的焦點(diǎn)表現(xiàn)形態(tài)選擇了不同的布局,骨骼總是為內(nèi)容而服務(wù)的。
后記
始終要承認(rèn)的是,內(nèi)容應(yīng)該是高于形式的,設(shè)計(jì)時(shí)的任何視覺骨架都是為內(nèi)容而服務(wù)的,因此內(nèi)容可以以任何外在的形式來表現(xiàn)。說了半天,盡管我們都在講“顏值”,其實(shí)還是那句“飽讀詩書氣自華”。
分享題目:一起來學(xué)學(xué)網(wǎng)頁設(shè)計(jì)中的視覺解剖
文章路徑:http://m.rwnh.cn/news13/171113.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、建站公司、網(wǎng)站制作、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容