< 對攝影師而言,取景布局三分法是十分熟悉的概念。只管它是十分惹人入勝的概念,然而在進行網頁設計的時候,多少乎不人會拿三分法來說事兒。當然,這并不象征著不可能,只是這種跨范疇的事件很少被留神到罷了。
所以,在今天的文章里我想說明一下三分法,并且分享一些將其應用到網頁設計時的技能跟教訓。不過三分法并不一定適合所有人,究竟晉升設計跟設計流程的技能跟方法有很多。不過作為一項基本的排版布局規矩,三分法自身是絕對值得學習的,并且在網頁設計中也頗為實用。
為何三分?
興許你會問,為什么一定要三分呢?這種奇怪的設定到底是從何而來?還好,我可能很愉快地告訴你這玩意跟數學定理抑或龐雜的邏輯推理都不關聯,也不太多的必要在這個貨色的來源上適度深究。
三分法僅僅是來自于傳統藝術,目前在攝影中應用得尤其多??v橫三分,全部布局被分為9個均勻的區塊,橫向縱向各有2條分界線。三分法劃定,為了盡可能吸引觀者的留神力,視覺重心或者吸惹人的貨色應當盡量湊近四條線相交處。
你可能在WDD的這篇文章中找到絕佳的實例。很多時候非對稱的布局經常能讓全部頁面更加富有生趣,然而這并不象征著著任何時候都得用非對稱布局,因為在有的場合,對稱布局會更有意思,而在這個時候,三分法令意思并不大。
攝影的時候,幻想的目標是一奇特的視角捕獲到一些能吸惹人的場景,而非對稱的布局使得視線中的一些元素比其余的更加凸起,而這些凸起的元素通常壓在之前所說的四個交點上。
那么從新回到網頁設計的問題上,三分法跟網頁設計到底是如何結合到一起的呢?正如同攝影時三分法下的布局可能吸引觀者一樣,合乎三分法的網頁也一樣能讓瀏覽者更加關注焦點內容。網站設計要能充分吸引訪問者的注意力,讓訪問者產生視覺上的愉悅感。因此在網頁創作的時候就必須將網站的整體設計與網頁設計的相關原理緊密結合起來。
理解三分法的柵格
四條線,四個焦點,九個區塊,這就是三分法下的柵格框架。很多網站的頁設計都合乎F式布局或者Z式布局,用戶也已經習慣了這樣的瀏覽方法,通常視覺的出發點都是左上角,這也是設計師須要關注的個區塊。
這也就象征著,左上方的交點處應當與頁面的某個重要內容相重疊。交點處并不是非要放置鏈接或者圖片(當然非要放也并非不可),它更像是一個標記,用以辨別布局的一個重要節點。比方頁面題目的起始點可能與之重疊,全部題目與橫向條線相齊平,而后在題目下放置Banner圖之類的內容。
值得留神的是,利用三分法來剖析網頁設計更多的是一個用戶閉會設計上的概念,而非一項完全的設計準則。所以,假如你想借助這一律念來剖析網頁設計的話,倡導將網頁在瀏覽器中打開之后截圖剖析處理,完全的網頁太長,而且用戶瀏覽永遠是基于屏幕而非一次看完全個頁面,所以也不必要利用全部頁面,截圖足以。假如設計尚處于原型階段,那么倡導參考屏幕比例來截取剖析。
所以,你應當從用戶的瀏覽習慣出發,結合三分法來進行剖析優化。當用戶瀏覽網頁的時候會下意識留神到要害部位,正確的利用三分法來設計頁面,你會發明這種3×3的柵格能幫你帶來極具啟發性的設計。
小調劑而非重設計
理解三分法的柵格的應用方法之后,你還須要明白更重要的一點:三分法帶來的并非是一個無可抉剔的網頁設計架構,而是一個用來微調現有設計的布局測試框架。
有太多的免費的柵格體系可能幫你設計網頁,比方960GS之類的,然而三分法的九宮格柵格體系是一個幫你微調全部網頁布局的,比方調劑導航欄的高度,把Logo挪近一點或者遠一點。
值得慶幸的是,這種測試方法很實用,并且很簡單,也不挑軟件。你可能截圖之后在PS里面畫虛線來剖析,諸如GIMP這樣的開源免費軟件也可能輕松幫你搞定,再不濟你還可能直接用記號筆在屏幕上畫一個九宮格來剖析嘛……(話說當初打CS的時候盲狙也用過這等笨辦法~)反正能幫你構建出九宮格剖析的工具都能帶你走向正確的設計方向。
實現初稿,用三分法測試,而后走向下一步。隨著時光的推移,你會更加明白如何將視覺元素置于對的處所。
處理對稱性
有的時候,在頁面中恰當天時用對稱性的元素還是頗為有用的。不過假如在設計中哪哪兒都用對稱式設計的話,這也不免太瞎了點。事實上,在藝術跟攝影范疇,非對稱式布局的應用還是盤踞主流的,大小絕對,遠近適宜,更加令人賞心悅目,這也證明非均衡的視覺設計更能吸引咱們的留神力。
切實在版式設計中,也有類似的準則跟標準。網站設計要能充分吸引訪問者的注意力,讓訪問者產生視覺上的愉悅感。因此在網頁創作的時候就必須將網站的整體設計與網頁設計的相關原理緊密結合起來。比方,當你在頁面頂部利用大Banner圖的時候,它通常會盤踞頁面大略2/3的高,類似的,題目跟解釋的字體大小也須要大小對比,讀者會天然而然地留神到更大的Banner圖、題目跟副題目。大小對比是一方面,另外一方面還須要考慮頁面上圖片跟文字的位置。簡單的利用三分法并不能確保構圖的飽滿,將九宮格置于頁面上,恰當地調劑頁面的元素的位置跟中心之后,會好不少。
三分法的上風在于它可能兼容非對稱式布局,也可能用來優化對稱式布局。兩種布局機動搭配,借助三分法來凸起頁面重點,也控制頁面均衡,如此才干調教出優良的網頁。
后的思考
絕大多數的藝術情勢切實并不固定的規矩,然而有法則可能參考,設計也恰是基于這些法則而一直進步。控制類似三分法這樣的法則,理解這個法則的目標所在,深刻理解,即便不刻意去應用,它也會從你的設計中天然而然地展示出來,形同第二本能。這個時候,你就具備了攻破規矩的潛力了!
誠然說設計跟藝術有著基本的差別,然而兩者并非對破的關聯。誠然依著規矩可能設計出更合乎民眾口味的作品,然而攻破規矩,充斥個性跟藝術感的設計作品又何嘗不會令人印象深刻呢?
http://www.yinzhangg.com/
>