注:設(shè)計師大部分時間,就是在排布點線面在版面中的大小比例及位置關(guān)系,設(shè)計師可以在不理解文案內(nèi)容的情況下,依然能通過這些法則來將文字和圖片進行合理的布局。而本文要談的正是點、線、面在版式設(shè)計中的作用。
本篇文章將深入剖析版式設(shè)計的基本構(gòu)成單位,點、線、面。
我們將點線面稱為設(shè)計三元素,一個文字或者標(biāo)點,我們可以抽象成一個點,一行文字可以抽象成一條線,那么一段文字就是一個面,一張圖片也可以被看做是一個面。
其實我們設(shè)計師大部分時間,就是在排布點線面在版面中的大小比例及位置關(guān)系。換句話說,我們可以在不理解文案內(nèi)容的情況下,依然能夠通過形式美法則將文字和圖片進行合理的布局。
筆者在外企擔(dān)任視覺設(shè)計師的時候,經(jīng)常面對各個國家和地區(qū)的設(shè)計需求。母語是英語的我們還能看懂文字的意思,但是像德國、俄羅斯、日本這些國家的語言我們也看不懂,那看不懂就不設(shè)計了嗎?
肯定不能,通常文案編輯會在word中標(biāo)明哪段文字是大標(biāo)題,并進行加粗加大字號顯示,哪些是正文已經(jīng)在哪換行都會標(biāo)注清楚,所以你只需要按照版式規(guī)律進行設(shè)計就OK。這種情況就是把文字和圖片抽象成點線面了,你實際排的就是點線面的位置關(guān)系了。
那么點線面在版式設(shè)計中的作用是什么呢?
點,可以聚焦我們的視線?梢宰屓藗儼炎⒁饬劢乖谖覀兿胫攸c表達的信息上面。比如:APP啟動頁面中的LOGO,這些都可以看做是一個點,讓我們只關(guān)注這個品牌并留下印象,排除其他的信息干擾,這也是減法法則的運用,少即是多!
下圖中只有一個點,我們的視覺焦點會不自覺的落在這個點上,所以點可以起到聚焦視覺的作用。那么在實際設(shè)計中有哪些經(jīng)典案例呢?
各位看官請繼續(xù)往下看:
天貓APP開屏頁面中心位置只有一個天貓的LOGO,實際就是起到聚焦用戶的眼球,從而加深對品牌的認(rèn)知和記憶。有的同學(xué)可能會覺得天貓這樣的億級用戶量產(chǎn)品,怎么可能浪費這么大的banner位卻只放一個logo呢?
因為天貓這個品牌更需要人們記!
當(dāng)頁面當(dāng)中有兩個點并列存在的時候,情況又不一樣了。我們的視覺焦點會在兩個點之間進行反復(fù)的游離,很難獲取到視覺焦點,所以這里又涉及到了一個奇數(shù)法則。
奇數(shù)法則就是在版式設(shè)計中,一個區(qū)塊內(nèi)的元素應(yīng)最好是奇數(shù)個數(shù)。這樣一直會有一個視覺中心可以獲取我們的焦點,從而讓視覺保持平衡。
看到這里,很多視覺設(shè)計師可能會恍然大悟,原來視覺還有這么多的講究和原理。那么在實際設(shè)計中,有哪些經(jīng)典案例呢?
一般多數(shù)APP底部標(biāo)簽導(dǎo)航和頂部標(biāo)簽導(dǎo)航,都應(yīng)該是奇數(shù)排列才符合視覺規(guī)律。
參考下圖APP頁面頂部標(biāo)簽及底部導(dǎo)航標(biāo)簽個數(shù):