視覺(jué)引導(dǎo)番外篇——如何搭建視覺(jué)骨架？

關(guān)于網(wǎng)站規(guī)劃中的視覺(jué)引導(dǎo)真的很重要，想要做一個(gè)能招引用戶(hù)眼球的網(wǎng)站，你真得在這上面花功夫，否則你的網(wǎng)站規(guī)劃出來(lái)也軟塌塌沒(méi)“骨感”。
網(wǎng)頁(yè)規(guī)劃也有所謂的支撐其視覺(jué)效果的骨架，這個(gè)骨架在前期的網(wǎng)頁(yè)規(guī)劃的視覺(jué)上是非常明顯的。

跟著網(wǎng)頁(yè)規(guī)劃的發(fā)展，其骨架也慢慢漸隱，但它仍然發(fā)揮著支撐起整個(gè)視野結(jié)構(gòu)。這兒，有人會(huì)與柵格體系聯(lián)系起來(lái)。網(wǎng)頁(yè)的柵格體系更多發(fā)揮的是對(duì)齊元素的效果，而骨架的功用會(huì)更加籠統(tǒng)。
頁(yè)面規(guī)劃的骨架，針對(duì)的是每一頁(yè)面的骨架。每一個(gè)網(wǎng)站都會(huì)有不同的頁(yè)面，咱們會(huì)把頁(yè)面分級(jí)為主頁(yè)——二級(jí)頁(yè)面——三級(jí)頁(yè)面。一般來(lái)說(shuō)，主頁(yè)運(yùn)用一個(gè)骨架，二級(jí)頁(yè)面、三級(jí)頁(yè)面也分別有一個(gè)骨架。主頁(yè)的骨架有時(shí)還會(huì)依據(jù)分屏展現(xiàn)的不同展現(xiàn)不同的骨架款式。但不管有多少改變，一個(gè)網(wǎng)站的諸多頁(yè)面的骨架之間，都會(huì)存在一種內(nèi)涵的視覺(jué)一致。
主頁(yè)的視覺(jué)骨架尤其重要，由于主頁(yè)承擔(dān)著網(wǎng)頁(yè)的第一印象，還主導(dǎo)著整個(gè)網(wǎng)站的風(fēng)格方向，因而確認(rèn)好主頁(yè)的視覺(jué)骨架，是規(guī)劃開(kāi)始最難清晰的問(wèn)題。很多網(wǎng)頁(yè)規(guī)劃師在規(guī)劃開(kāi)始所消耗最多時(shí)間，用于實(shí)驗(yàn)各種頁(yè)面版式的類(lèi)型以期最完美的效果展現(xiàn)，而事實(shí)上，最完美其實(shí)是個(gè)偽出題，在有限的時(shí)間內(nèi)，你需求做得便是找好自己的表達(dá)目標(biāo)，每個(gè)頁(yè)面設(shè)置好一個(gè)視覺(jué)焦點(diǎn)，依據(jù)焦點(diǎn)來(lái)表達(dá)你的重點(diǎn)內(nèi)容。換句話說(shuō)，你最希望用戶(hù)了解什么？這個(gè)問(wèn)題的答案應(yīng)該是要無(wú)比清晰的在大腦中隨同規(guī)劃全過(guò)程。
十字準(zhǔn)星式：瞄準(zhǔn)等待
人的視野總是集中在頁(yè)面中心，因而將焦點(diǎn)設(shè)置在中心方位最迎合視野的做法。例如將網(wǎng)站的簡(jiǎn)介放置于頁(yè)面中心，為了讓頁(yè)面更豐厚，能夠添加大圖的背景加強(qiáng)表達(dá)的維度。十字線條通過(guò)的地方便是視野引導(dǎo)的途徑，因而需求在線條的方位放上重要的元素。中心的方位其實(shí)也是一個(gè)等待點(diǎn)，瞄準(zhǔn)視覺(jué)等待點(diǎn)，對(duì)規(guī)劃師來(lái)說(shuō)最大的便利便是省力。

不管網(wǎng)頁(yè)的導(dǎo)航等其他元素放置于頁(yè)面的哪個(gè)方位（盡量環(huán)繞線條通過(guò)的方向），這兩個(gè)頁(yè)面都是歸于十字準(zhǔn)星型的骨架結(jié)構(gòu)，焦點(diǎn)一直位于正中，導(dǎo)航不管居于哪里，都?xì)w于次要的視覺(jué)地位。

正中的地位帶來(lái)絕對(duì)的穩(wěn)定感，它也是規(guī)劃師最容易做到的表達(dá)。這種骨架結(jié)構(gòu)，相比照較穩(wěn)定，因而在需求在細(xì)節(jié)上營(yíng)建一些驚喜，來(lái)打破這種相對(duì)靜止的版式。

筆直雙欄式：雙面一體
將一個(gè)網(wǎng)頁(yè)分紅兩欄并不意味著均分，它們是依照筆直方向構(gòu)成了兩列的不同布局。常見(jiàn)的的確是平均分配的體現(xiàn)情況，網(wǎng)頁(yè)的焦點(diǎn)內(nèi)容能夠挑選任一側(cè)，另一側(cè)作為彌補(bǔ)。簡(jiǎn)稱(chēng)雙面一體是由于，你不能制作兩個(gè)焦點(diǎn)，分兩個(gè)部分，它們也應(yīng)該一起營(yíng)建一個(gè)焦點(diǎn)。

雙欄式的頁(yè)面規(guī)劃體現(xiàn)比較靈活，一般會(huì)有一偏倚輕重這，樣就能確立好視覺(jué)焦點(diǎn)，構(gòu)成比照，制作情形抵觸。視覺(jué)重點(diǎn)在某一側(cè)，使用背景色的不同加強(qiáng)視覺(jué)分量的比照。

兩列縮略圖筆直排列，讓版式活躍起來(lái)的方法便是添加某一處高度的不同，強(qiáng)調(diào)一點(diǎn)細(xì)微的改變。

網(wǎng)格式：有序與無(wú)序
這種骨架款式一般是依據(jù)某一個(gè)網(wǎng)格而搭建內(nèi)容，網(wǎng)格的體現(xiàn)方式多樣，每個(gè)網(wǎng)格都用以展現(xiàn)不同的內(nèi)容，能夠是比較標(biāo)準(zhǔn)的網(wǎng)格，也能夠是參差有致……雖然每個(gè)網(wǎng)頁(yè)都能夠依據(jù)網(wǎng)格而規(guī)劃，可是網(wǎng)頁(yè)的體現(xiàn)未必要嚴(yán)格遵循網(wǎng)格自身。
標(biāo)準(zhǔn)的網(wǎng)格一般比較傾向古典懷舊，它傳遞出一種相對(duì)嚴(yán)格的次序之美。

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

動(dòng)感歪斜式：墜落的騙局
歪斜的線條容易構(gòu)成動(dòng)感的張力，使用這一點(diǎn)所構(gòu)成的視覺(jué)骨架就能很好體現(xiàn)與“運(yùn)動(dòng)”“沖擊力”等動(dòng)感較強(qiáng)的內(nèi)容頁(yè)面。

斜向的頁(yè)面所制作的墜落式的沖擊力應(yīng)該和配圖款式相關(guān)，因而對(duì)慎選斜向的配圖非常重要，尤其是當(dāng)大部分圖片其實(shí)都只適合正向方向的展現(xiàn)。
這些所謂的骨架原理在于躲藏于表層下方的最基地的視覺(jué)結(jié)構(gòu)，事實(shí)上，其他的元素一般并不嚴(yán)格局限于某個(gè)區(qū)域，這就讓頂層的枝葉更加豐厚。
在咱們著手進(jìn)行頁(yè)面規(guī)劃前，確認(rèn)好一個(gè)視覺(jué)骨架的方向至關(guān)重要，這讓咱們并不依賴(lài)于命運(yùn)去“撞”到某個(gè)好的表達(dá)，并且你也不需求單獨(dú)設(shè)定某個(gè)固定的骨架，還能夠兩兩并用，一個(gè)網(wǎng)站有多個(gè)頁(yè)面，多個(gè)頁(yè)面都能夠擁有不同的布局。同一個(gè)頁(yè)面，也會(huì)由于內(nèi)容的不同選用不同的視覺(jué)結(jié)構(gòu)表達(dá)。
下面這一個(gè)網(wǎng)頁(yè)里的多個(gè)頁(yè)面，每個(gè)頁(yè)面都依據(jù)不同的焦點(diǎn)體現(xiàn)形狀挑選了不同的布局，骨骼總是為內(nèi)容而服務(wù)的。

跋文
一直要供認(rèn)的是，內(nèi)容應(yīng)該是高于方式的，規(guī)劃時(shí)的任何視覺(jué)骨架都是為內(nèi)容而服務(wù)的，因而內(nèi)容能夠以任何外在的方式來(lái)體現(xiàn)。說(shuō)了半天，盡管咱們都在講“顏值”，其實(shí)仍是那句“飽讀詩(shī)書(shū)氣自華”。