怎么提高自己的網(wǎng)頁設(shè)計(jì)的排版設(shè)計(jì)？

時(shí)間：2024-02-14 13:00:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-02-14 13:00:02 來源：網(wǎng)站運(yùn)營

怎么提高自己的網(wǎng)頁設(shè)計(jì)的排版設(shè)計(jì)？：

我來給大家分享：兩本書，1篇文章，1個(gè)視頻，1套教程，幫你夯實(shí)網(wǎng)頁設(shè)計(jì)排版的基本功。

一、正確的創(chuàng)作思路

1、打草稿是必須的

吹牛還要打草稿，更何況你是做設(shè)計(jì)。在準(zhǔn)備上機(jī)制作之前，你最好先在草稿紙上，勾勒一下網(wǎng)頁的大致框架，以及交互結(jié)構(gòu)的線框圖，不然誰都是懵懂的。

2、在軟件中完善視覺

打開了軟件，就意味著你已胸有成竹，接下來，需要在軟件中去完善自己的想法。而不是打開軟件，等著靈感從天而降。這也是很多初學(xué)者，在剛開始學(xué)設(shè)計(jì)時(shí)，會(huì)踩到的坑。

3、靈感的來源

你得腦暴此次設(shè)計(jì)項(xiàng)目的關(guān)鍵詞，以及行業(yè)關(guān)鍵詞，然后帶著關(guān)鍵詞，去搜索借鑒同行、同類型的網(wǎng)頁設(shè)計(jì)的排版，或者視覺形式。然后，結(jié)合自身的業(yè)務(wù)、以及網(wǎng)頁內(nèi)容，規(guī)劃版面，完成交互線框稿的制作。

二、版式設(shè)計(jì)的輔助工具

1、善用柵格系統(tǒng)，控制全局版面

一般的網(wǎng)頁，「主體內(nèi)容區(qū)域」的寬度，通常都是固定的；而在豎向上，可以無限延伸。所以，我們就把網(wǎng)頁的「主體內(nèi)容區(qū)域」平分為多個(gè)柵格，主體區(qū)域內(nèi)的容器模塊，就以一個(gè)柵格為最小單位，這樣，我們對(duì)整個(gè)版面的控制就會(huì)變得更加輕松。

△畫布寬度：1920px，主體內(nèi)容區(qū)域?qū)挾龋?200px，共分為了12個(gè)柵格，一個(gè)柵格單位為：A。此時(shí)，我們?cè)谕献б曈X元素（矩形容器，文字、圖片等）時(shí)，就以A的為單位，在柵系統(tǒng)的約束下，我們就可以很好的規(guī)整版面，使其簡(jiǎn)潔而富有理性之美。

另外，我在網(wǎng)上找了一個(gè)利用柵格系統(tǒng)排版的網(wǎng)頁設(shè)計(jì)實(shí)例，大家請(qǐng)看視頻：

https://www.zhihu.com/video/988028739158151168

2、善用網(wǎng)格系統(tǒng)

柵格或網(wǎng)格系統(tǒng)，其實(shí)都是一個(gè)回事，英文翻譯Grid。但我個(gè)人更傾向于，把上面的這種豎向分割的形式叫做柵格系統(tǒng)，因?yàn)椋鼈兒瓦@和公路、花園變身的柵欄很相似。

接下來我要說的網(wǎng)格系統(tǒng)，則主要在應(yīng)用在印刷類平面設(shè)計(jì)里，因?yàn)橛∷⑽锪习婷娴拈L(zhǎng)與寬比例，或尺寸，通常都是固定的，所以劃分為網(wǎng)格的形式更適用，這種與高速公路的防護(hù)網(wǎng)很相似。

之前，我寫了一篇更為詳細(xì)的文章，里面詳細(xì)總結(jié)了如何利用網(wǎng)格系統(tǒng)來編排內(nèi)容，以及如何利用Photoshop快速生成網(wǎng)格，感興趣的朋友可以閱讀這篇文章。

3、善用四大經(jīng)典原則，創(chuàng)建富有節(jié)奏的版面設(shè)計(jì)

一個(gè)好的版式設(shè)計(jì)，一定是疏密有致，有大小對(duì)比，以及重復(fù)、對(duì)齊的關(guān)系蘊(yùn)含其中，這樣才能做到版面結(jié)構(gòu)的層次分明，給清晰而不紊亂的視覺影響，讀者才會(huì)有性質(zhì)閱讀下去。

1.親密原則：讓同一組信息相互親密，不同組的內(nèi)容相互疏遠(yuǎn)，這樣版面才會(huì)疏密有致。

2.對(duì)比原則：標(biāo)題與正文，要一大一小形成對(duì)比，這樣畫面才有節(jié)奏感可言。

3.對(duì)齊原則：多個(gè)視覺元素，要有一致的對(duì)齊參考線，這樣版面才不會(huì)凌亂。

4.重復(fù)原則：類似的視覺元素，可用重復(fù)套用一個(gè)的模板，讓版面有統(tǒng)一規(guī)律可循。

比如下面這張圖片，就完全運(yùn)用到了以上幾點(diǎn)，而且版面看起來非常規(guī)整，而不會(huì)凌亂。

排版設(shè)計(jì)，就是歸納梳理信息的過程，在《寫給大家看的設(shè)計(jì)書》一書中，對(duì)以上四點(diǎn)做了更為詳細(xì)的闡述，推薦設(shè)計(jì)初學(xué)者，可去閱讀參考。

三、通過練習(xí)，提高版式設(shè)計(jì)水平

掌握了上述的3套方法，相信大家在理論層面會(huì)有一個(gè)質(zhì)的突破。不過：實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，接下來，可通過一定的強(qiáng)化練習(xí)，來提高排版設(shè)計(jì)的實(shí)踐能力。

當(dāng)然，也不要局限于網(wǎng)頁設(shè)計(jì)，包括：名片、畫冊(cè)、海報(bào)類型的項(xiàng)目都可以涉獵，以此來掌握不同物料、尺寸大小的版式設(shè)計(jì)，這樣才能做到更全面的提高。

這里呢，就給大家推薦一個(gè)版式設(shè)計(jì)實(shí)例視頻教程，課程地址：http://t.cn/RNoULkC

https://www.zhihu.com/video/988083999528603648你在設(shè)計(jì)中，常常遇到的“沒有靈感”和“不知從何下手”的問題，在這套課程中，你將找到想要的解決辦法。授課老師為：文成武，CCTV品牌服務(wù)設(shè)計(jì)師，GDC平面設(shè)計(jì)在中國杭州站十佳設(shè)計(jì)師，朝宇創(chuàng)意設(shè)計(jì)總顧問，陜西省印刷協(xié)會(huì)會(huì)員。

望以上內(nèi)容，對(duì)大家有所幫助。

關(guān)于我

@酷coo豆，平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)站長(zhǎng)，對(duì)自學(xué)設(shè)計(jì)有著深刻的見解。樂于分享自學(xué)平面設(shè)計(jì)的相關(guān)書籍、教程、經(jīng)驗(yàn)等資源參考，希望和你一起進(jìn)步，歡迎訂閱我的專欄。

設(shè)計(jì)師必備收藏：100本人氣設(shè)計(jì)書單，重塑你對(duì)設(shè)計(jì)的認(rèn)知。