@飛屋睿UIdesign?：不想讓你的設(shè)計(jì)看上去軟塌塌的無骨感？重要的是摸清它的骨骼！網(wǎng)頁設(shè)計(jì)也有所謂的支撐其視覺效果的骨架，這個(gè)骨架在早期的網(wǎng)頁設(shè)計(jì)的視覺上是非常明顯的。盡管隨著網(wǎng)頁設(shè)計(jì)的發(fā)展，其骨架慢慢漸隱，但行家自有解剖眼光，看出內(nèi)在的門道，一起來學(xué)習(xí)。

網(wǎng)頁構(gòu)圖技巧：

1. 《基礎(chǔ)小科普！聊聊兩種最常見的網(wǎng)頁布局設(shè)計(jì)模式》
2. 《跨領(lǐng)域技巧！如何利用6個(gè)攝影構(gòu)圖法搞定設(shè)計(jì)布局？》

設(shè)計(jì)的骨架：視覺解剖

1983年蘋果官網(wǎng)的首頁設(shè)計(jì)，可以清晰的看到這種矩形塊狀的整形切割。

隨著網(wǎng)頁設(shè)計(jì)的發(fā)展，其骨架也慢慢漸隱，但它依然發(fā)揮著支撐起整個(gè)視線框架。這里，有人會(huì)與柵格系統(tǒng)聯(lián)系起來。網(wǎng)頁的柵格系統(tǒng)更多發(fā)揮的是對(duì)齊元素的作用，而骨架的功能會(huì)更加籠統(tǒng)。

頁面設(shè)計(jì)的骨架，針對(duì)的是每一頁面的骨架。每一個(gè)網(wǎng)站都會(huì)有不同的頁面，我們會(huì)把頁面分級(jí)為首頁——二級(jí)頁面——三級(jí)頁面。通常來說，首頁運(yùn)用一個(gè)骨架，二級(jí)頁面、三級(jí)頁面也分別有一個(gè)骨架。首頁的骨架有時(shí)還會(huì)根據(jù)分屏展示的不同展示不同的骨架樣式。但無論有多少變化，一個(gè)網(wǎng)站的諸多頁面的骨架之間，都會(huì)存在一種內(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)站的簡(jiǎn)介放置于頁面中心，為了讓頁面更豐富，可以增加大圖的背景加強(qiáng)表達(dá)的維度。十字線條經(jīng)過的地方即是視線引導(dǎo)的路徑，因此需要在線條的位置放上重要的元素。中心的位置其實(shí)也是一個(gè)期待點(diǎn)，瞄準(zhǔn)視覺期待點(diǎn)，對(duì)設(shè)計(jì)師來說最大的便利就是省力。

無論網(wǎng)頁的導(dǎo)航等其他元素放置于頁面的哪個(gè)位置（盡量圍繞線條經(jīng)過的方向），這兩個(gè)頁面都是屬于十字準(zhǔn)星型的骨架結(jié)構(gòu)，焦點(diǎn)始終位于正中，導(dǎo)航無論居于哪里，都屬于次要的視覺地位。

正中的地位帶來絕對(duì)的穩(wěn)定感，它也是設(shè)計(jì)師最容易做到的表達(dá)。這種骨架結(jié)構(gòu)，相對(duì)比較穩(wěn)定，因此在需要在細(xì)節(jié)上營造一些驚喜，來打破這種相對(duì)靜止的版式。

垂直雙欄式：雙面一體

將一個(gè)網(wǎng)頁分成兩欄并不意味著均分，它們是按照垂直方向形成了兩列的不同布局。常見的的確是平均分配的表現(xiàn)情況，網(wǎng)頁的焦點(diǎn)內(nèi)容可以選擇任一側(cè)，另一側(cè)作為補(bǔ)充。簡(jiǎn)稱雙面一體是因?yàn)椋悴荒苤圃靸蓚€(gè)焦點(diǎn)，分兩個(gè)部分，它們也應(yīng)該共同營造一個(gè)焦點(diǎn)。

雙欄式的頁面設(shè)計(jì)表現(xiàn)比較靈活，通常會(huì)有一偏倚輕重這，樣就能確立好視覺焦點(diǎn)，形成對(duì)比，制造情景沖突。視覺重點(diǎn)在某一側(cè)，利用背景色的不同加強(qiáng)視覺重量的對(duì)比。

兩列縮略圖垂直排列，讓版式活躍起來的方法就是增加某一處高度的不同，強(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)格通常比較傾向古典懷舊，它傳遞出一種相對(duì)嚴(yán)格的秩序之美。

相對(duì)有些錯(cuò)落變換的網(wǎng)格，更具現(xiàn)代風(fēng)格，規(guī)則與反規(guī)則的交錯(cuò)。

動(dòng)感傾斜式：墜落的騙局

傾斜的線條容易形成動(dòng)感的張力，利用這一點(diǎn)所形成的視覺骨架就能很好表現(xiàn)與“運(yùn)動(dòng)”“沖擊力”等動(dòng)感較強(qiáng)的內(nèi)容頁面。

斜向的頁面所制造的墜落式的沖擊力應(yīng)該和配圖樣式相關(guān)，因此對(duì)慎選斜向的配圖非常重要，尤其是當(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è)頁面，也會(huì)因?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í)還是那句“飽讀詩書氣自華”。

「本月最值得閱讀收藏的完美像素使用手冊(cè)」

1. 《值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之原理篇》
2. 《中文版來了！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之細(xì)節(jié)篇》
3. 《第三集！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之易用性篇》
4. 《第四集！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之軟件技巧篇》
5. 《最終版！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之軟件技巧篇》

原文地址：ifeiwu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com