如何利用攝影三分法優(yōu)化網(wǎng)頁設(shè)計?
對于攝影師來說,分三步走的取景布局法是一個非常熟悉的概念。雖然是一個引人入勝的概念,但是在設(shè)計網(wǎng)頁的時候,幾乎沒有人會拿三分法來舉例。當(dāng)然,這并不意味著不可能,但這種跨范疇的事情很少被人注意到。
所以,在今天的文章中,我就來講解一下三點(diǎn)法,分享一些將其運(yùn)用到網(wǎng)頁設(shè)計中的技巧和經(jīng)驗(yàn)。但是二分法不一定適合所有人,推廣設(shè)計和設(shè)計過程的技巧和方法有很多。但是三分法作為一種基本的布局規(guī)則,它本身肯定是值得學(xué)習(xí)的,在網(wǎng)頁設(shè)計中也是相當(dāng)適用的。
為什么是三分?
也許你會問,為什么一定要拿三分?這個奇怪的設(shè)定是從哪里來的?幸運(yùn)的是,我可以很高興的告訴你,這個東西和數(shù)學(xué)定理或者復(fù)雜的邏輯推理沒有任何關(guān)系,也沒有太多必要過分深究這個東西的來歷。
三分法只來源于傳統(tǒng)藝術(shù),目前在攝影中特別使用??v向和橫向,整個布局分為9個平均區(qū)塊,橫向和縱向有2個邊界。三分法規(guī)定,為了盡可能地吸引觀看者的注意力,視覺重心或者最吸引人的東西,應(yīng)該盡可能地靠近四條線的交點(diǎn)。
你可以在WDD的這篇文章中找到一個很好的例子。在很多情況下,非對稱布局可以讓所有頁面都更有趣,但這并不意味著非對稱布局應(yīng)該一直使用,因?yàn)樵谀承┑胤?,對稱布局會更有趣,而此時,三點(diǎn)法則意義不大。
攝影時,最富于幻想的目的是以一種奇特的視角捕捉一些有吸引力的場景,而不對稱的布局使得視野中的某些元素比其他元素更為突出,而這些突出的元素通常會壓在前面提到的四個交點(diǎn)上。
那么,回到網(wǎng)頁設(shè)計的問題,三部曲法和網(wǎng)頁設(shè)計是如何結(jié)合在一起的?就像攝影中三分法下的布局可以吸引觀眾一樣,符合三分法的網(wǎng)頁也可以讓讀者更加關(guān)注聚焦的內(nèi)容。
知道三等分 的網(wǎng)格
四行四重點(diǎn)九塊,是三分法下的網(wǎng)格框架。很多網(wǎng)站的首頁設(shè)計都是符合F型布局或者Z型布局的,用戶已經(jīng)習(xí)慣了這種閱讀方式。通常視覺起點(diǎn)在左上角,是設(shè)計師首先要注意的區(qū)塊。
這意味著左上角的交叉點(diǎn)應(yīng)該與頁面的一些主要內(nèi)容重疊。沒有必要在路口放置鏈接或者圖片(當(dāng)然不是必不可少的),更像是一個標(biāo)志,用來區(qū)分布局的一個主要節(jié)點(diǎn)。例如,頁面標(biāo)題的起點(diǎn)可以與其重疊,所有標(biāo)題與第一條水平線齊平,然后橫幅圖形等放置在標(biāo)題下方。
值得注意的是,三分法分析網(wǎng)頁設(shè)計的應(yīng)用,更多的是用戶體驗(yàn)設(shè)計的概念,而不是一個完整的設(shè)計準(zhǔn)則。所以,如果要用這個概念來分析網(wǎng)頁設(shè)計,建議在閱讀器中打開網(wǎng)頁后,對截圖進(jìn)行分析和處理。完整的網(wǎng)頁太長,用戶總是基于屏幕閱讀,而不是一次看整個頁面,不需要應(yīng)用所有頁面,截圖就夠了。如果設(shè)計還在原型階段,建議參照屏幕比例截取分析。
所以你要從用戶的閱讀習(xí)慣出發(fā),結(jié)合三點(diǎn)法進(jìn)行分析優(yōu)化。用戶在閱讀網(wǎng)頁時,會下意識地注意到問題的癥結(jié)所在,準(zhǔn)確地運(yùn)用三點(diǎn)法設(shè)計頁面。你會發(fā)現(xiàn)這個3×3的格子可以幫你帶來很有啟發(fā)性的設(shè)計。
小調(diào)整而不是重新設(shè)計
在你知道如何應(yīng)用三分法的網(wǎng)格之后,你需要明確更重要的一點(diǎn):三分法帶來的不是無懈可擊的網(wǎng)頁設(shè)計框架,而是對現(xiàn)有設(shè)計進(jìn)行微調(diào)的布局測試框架。
可以幫你設(shè)計網(wǎng)頁的免費(fèi)網(wǎng)格系統(tǒng)太多了,比如960GS,但是基于三分法的九格網(wǎng)格系統(tǒng)可以幫你稍微調(diào)整一下網(wǎng)頁的布局,比如調(diào)整導(dǎo)航欄的高度,把Logo移近或移遠(yuǎn)。
好在這種測試方法非常適用簡單,而且不選擇軟件。截圖分析后可以在PS里畫一條虛線。GIMP等開源免費(fèi)軟件也能輕松幫到你。如果出了什么問題,可以直接在屏幕上畫一個九宮格來分析...(據(jù)說盲狙擊手在一開始玩CS的時候就用了這么蠢的方法~)反正能幫你搭建九宮格分析的工具,能幫你找到準(zhǔn)確的設(shè)計方向。
完成初稿,用三點(diǎn)法測試,然后進(jìn)入下一步。隨著時間的推移,你會更清楚地知道如何將視覺元素放在正確的位置。
處置的對稱性
有時候,在頁面中恰當(dāng)?shù)貞?yīng)用對稱元素是相當(dāng)有用的。但是如果網(wǎng)頁設(shè)計中處處使用對稱設(shè)計,那就太盲目了。事實(shí)上,在藝術(shù)和攝影領(lǐng)域,不對稱布局的應(yīng)用仍然占據(jù)主流,因?yàn)樗南鄬Τ叽绾秃线m的距離而更加令人愉悅,這也證明了不平衡的視覺設(shè)計更能吸引我們的注意力。
其實(shí)布局設(shè)計也有類似的原則和規(guī)范。例如,當(dāng)您在頁面頂部應(yīng)用一個大橫幅圖形時,它通常占據(jù)頁面高度的大約2/3。同樣,標(biāo)題和文本的字體大小需要比較,讀者自然會注意到更大的橫幅圖形、標(biāo)題和副標(biāo)題。尺寸對比是一方面,另一方面要考慮圖片和文字在頁面上的位置。三分法的簡單應(yīng)用并不能保證構(gòu)圖的豐滿。把九宮格放在頁面上,適當(dāng)調(diào)整頁面上元素的位置和中心,會好很多。
三等分法的優(yōu)點(diǎn)是可以兼容非對稱布局,也可以用來優(yōu)化對稱布局。兩種布局巧妙搭配,借助三點(diǎn)法突出頁面重點(diǎn),同時也控制頁面平衡,可以訓(xùn)練出優(yōu)秀的網(wǎng)頁。
最后的想法
大部分藝術(shù)情境沒有固定的規(guī)則,但是有規(guī)則可以參考,設(shè)計也是在這些規(guī)則的基礎(chǔ)上不斷完善的。像類似三等分一樣控制規(guī)律,明白這個規(guī)律的目標(biāo),深刻理解即使不是刻意應(yīng)用,也自然會在你的設(shè)計中展現(xiàn)出來,類似于第二本能。這個時候,你就有打破規(guī)則的潛力了!
設(shè)計和藝術(shù)雖然有基本的區(qū)別,但并不是對立的。誠然,按照規(guī)則,你可以設(shè)計出更符合人們口味的作品,但打破規(guī)則,充滿個性和藝術(shù)感的設(shè)計作品,給人的印象并不深刻。
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設(shè)計風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機(jī)端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
網(wǎng)站建設(shè)流程之確定網(wǎng)站主題
網(wǎng)站建設(shè)是一個非常復(fù)雜的過程,它涉及很多種技術(shù)。除了技術(shù)之外,還有很多...
2015-12-31 -
獲得高質(zhì)量描文本的方法
讓這些描文本達(dá)到最好的效果。一篇好的博文可以被推薦到首頁,博客當(dāng)然是最...
2012-06-19 -
尚品中國項目驗(yàn)收流程
“PMS項目管理系統(tǒng)”是尚品中國在北京網(wǎng)站制作行業(yè)率先推出的信息管理平...
2018-01-18 -
seo網(wǎng)站優(yōu)化之廣泛多樣化成功非偶然
北京網(wǎng)站建設(shè)公司尚品中國:搜索引擎越來越重視用戶體驗(yàn)已經(jīng)是個趨勢,但是...
2012-02-15 -
企業(yè)營銷型網(wǎng)站建設(shè)的策略和優(yōu)勢
企業(yè)營銷型網(wǎng)站建設(shè)的策略和優(yōu)勢有哪些?1、企業(yè)官網(wǎng)自動適配各終端企業(yè)形...
2015-03-31 -
網(wǎng)站建設(shè)對企業(yè)的影響有多大?
現(xiàn)在一些企業(yè)也面臨著同樣的問題:在這個新領(lǐng)域,他們不知道如何利用互聯(lián)網(wǎng)...
2020-11-04
預(yù)約專業(yè)咨詢顧問溝通!
免責(zé)聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。
2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com