2014-09-21 分類: 網(wǎng)站建設(shè)
三分法在網(wǎng)頁設(shè)計(jì)中的應(yīng)用
這是并不總是在網(wǎng)站設(shè)計(jì)領(lǐng)域討論的熱點(diǎn)。攝影師可能是熟悉的照片組成的三分法則。但界面設(shè)計(jì)師如何使用第三條規(guī)則去創(chuàng)造有趣的數(shù)字設(shè)計(jì)的嗎?
在這篇文章中我想解釋三分法和共享應(yīng)用規(guī)則到網(wǎng)站布局的一些技巧。不是每個(gè)人都會(huì)發(fā)現(xiàn)這很有幫助,它往往是更好的堅(jiān)持一個(gè)團(tuán)的加速過程。然而,三分法是這樣的一個(gè)基本概念,它確實(shí)值得學(xué)習(xí)一下它是如何工作以及如何適用于網(wǎng)站的布局。
為什么分?jǐn)?shù)嗎?
你可能會(huì)問自己,為什么3分是個(gè)好主意嗎?而這甚至是打哪來的呢?你會(huì)很高興知道沒有很多涉及到數(shù)學(xué)–至少不是絕對的實(shí)際應(yīng)用。我們可以坐在神奇的數(shù)學(xué)俱樂部的圈和說話斐波那契數(shù)列但那不是真的有必要。
三分法來源于傳統(tǒng)藝術(shù),尤其是攝影,其中一件作品可以分為9個(gè)連廣場。這是有兩個(gè)垂直和水平線穿過的作文。該規(guī)則規(guī)定,醒目的物品應(yīng)該排隊(duì)在這些線的交叉點(diǎn)為最有影響力的結(jié)果。
你可以找到一個(gè)很好的例子這個(gè)帖子的主題。這就是藝術(shù)真正成為附庸風(fēng)雅的由于不對稱的想法通常比對稱更有趣。但有時(shí)有點(diǎn)對稱的照片可以很有趣,–規(guī)則的三分之一,這是一小部分。
理想的目標(biāo)是在一個(gè)獨(dú)特的方式,注意到照片中的某些部分抓住的東西。你想要的不平等因?yàn)檫@迫使一些元素顯得比別人更重要(即使只是巧妙的攝影)。
現(xiàn)在我們到網(wǎng)站設(shè)計(jì)的問題。嗯,沒有問得像一個(gè)問題…怎么三分法不涉及到網(wǎng)頁設(shè)計(jì)?這是你會(huì)注意到一張照片的某些相同的方式,你也可以讓人把注意力集中在一個(gè)網(wǎng)站的重要組成部分。
了解網(wǎng)格
這種技術(shù)可分成9個(gè)方塊4關(guān)鍵的交叉點(diǎn)。大多數(shù)用戶都知道掃描網(wǎng)站在F或Z型。所以眼睛將按照從上到下的字母F或Z模式。一個(gè)網(wǎng)站的左上角是抓住注意力的選地區(qū)之一。
線框網(wǎng)格網(wǎng)站組合概念
這也意味著左上方的交叉點(diǎn)應(yīng)該落在或靠近頁面的一個(gè)重要組成部分。交叉點(diǎn)不需要上一個(gè)鏈接或圖片(雖然也可以)。它應(yīng)該更像一個(gè)標(biāo)記來區(qū)分布局的重要部分。例如,網(wǎng)頁的標(biāo)題可能會(huì)使附近的第一水平線和下面這個(gè)你可能有一個(gè)照片幻燈片。
如果你嘗試這種技術(shù),我想推薦你的瀏覽器的倍以上截圖。如果你只有一個(gè)樣機(jī)設(shè)計(jì)作物的一個(gè)典型的顯示器和使用作為一個(gè)截圖的精確尺寸。完整的網(wǎng)站原型并不提供最有用的結(jié)果,因?yàn)樗麄兺人麄兊膶挕M瑫r(shí)三分法是UX的概念,不是一個(gè)完整的設(shè)計(jì)原則。
當(dāng)用戶第一次登陸你的網(wǎng)頁,他們只看到位于褶皺的界面元素。利用這個(gè)原理來分析帆布和確定頁面的部分,自然會(huì)引起注意。正確的使用它,你會(huì)發(fā)現(xiàn)3×3網(wǎng)格是一個(gè)愉快的啟發(fā)性的經(jīng)驗(yàn)。
使調(diào)整設(shè)計(jì)
既然我們了解這個(gè)規(guī)則在網(wǎng)頁設(shè)計(jì)中的使用我想做一個(gè)很重要的一點(diǎn)。三是規(guī)則不應(yīng)該是一個(gè)無可挑剔的設(shè)計(jì)網(wǎng)格結(jié)構(gòu)建筑。相反,使用它作為一個(gè)工具進(jìn)行測試或調(diào)整現(xiàn)有的設(shè)計(jì)。
有自由的網(wǎng)格系統(tǒng)可以幫助你很多計(jì)劃全面布局線框或模型,從零開始。三分法則應(yīng)該表現(xiàn)得更像一個(gè)指導(dǎo)原則時(shí)檢查出的設(shè)計(jì)。你可以選擇調(diào)整導(dǎo)航欄是高或低,移動(dòng)標(biāo)志接近或遠(yuǎn)離路口。
值得慶幸的是,你幾乎可以與任何軟件測試這一思想。Photoshop是我的偏好,甚至免費(fèi)的替代品如GIMP有足夠的功能來創(chuàng)建一個(gè)頂級(jí)的設(shè)計(jì)截圖的一個(gè)簡單的網(wǎng)格。這肯定是更好的只是創(chuàng)造一些第一–任何你行進(jìn)在正確的方向的一個(gè)項(xiàng)目。
一旦你有了一個(gè)初稿,然后測試了三分法則??吹皆叵陆担鼈兿嘟坏牡胤巾?。隨著時(shí)間的推移,你會(huì)開始注意到其他網(wǎng)站上的效果,它會(huì)幫助你認(rèn)識(shí)到你自己的設(shè)計(jì)實(shí)現(xiàn)相同的功能。
處理對稱性
在一些情況下,對稱的頁面元素可以是有用的。但如果這是規(guī)則的話,藝術(shù)將是相當(dāng)乏味。事實(shí)上,不對稱是繪畫和攝影,照片顯示出比天空更土地很常見,或比另一側(cè)的物體拉近??磥聿黄胶獾@不正是吸引了我們的注意力。
當(dāng)它來設(shè)計(jì)你可能認(rèn)為這非常相似原理。如果網(wǎng)頁標(biāo)題使用一個(gè)大的英雄形象,這可能占2 / 3的整個(gè)網(wǎng)格。同樣你可以放超大的頁眉文本小字幕文本對比效應(yīng)。這個(gè)設(shè)計(jì)寓意說標(biāo)題文本是非常重要的,應(yīng)該是公認(rèn)的第一–如果它足夠有趣,讀者也可以考慮次級(jí)文本。
最后的思考
與大多數(shù)藝術(shù)形式表達(dá)真的沒有規(guī)則。規(guī)則是人仍掌握工藝,這當(dāng)然也適用于網(wǎng)頁設(shè)計(jì)中的三分法很有用。一旦你完全理解本“規(guī)則”會(huì)出現(xiàn)在你的潛意識(shí)的工作。這是當(dāng)你開始接近掌握,通常都是圍繞這一點(diǎn)的時(shí)候,所有的規(guī)則成為第二天性。然后你就可以開始打破規(guī)則的目的!
我希望這篇文章可以澄清一些常見的使用在網(wǎng)頁設(shè)計(jì)中三分法則。記住,你不需要如果他們不幫助你的手藝十分接口遵循這些指導(dǎo)方針。然而很多設(shè)計(jì)師發(fā)現(xiàn)成功與這三分法則的方法,所以它的價(jià)值在你自己的工作流測試。
當(dāng)前題目:三分法在網(wǎng)頁設(shè)計(jì)中的應(yīng)用
標(biāo)題鏈接:http://m.rwnh.cn/news38/20338.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站收錄、軟件開發(fā)、定制網(wǎng)站、定制開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容