2013-05-13 分類(lèi): 網(wǎng)站建設(shè)
排版是網(wǎng)站設(shè)計(jì)中最基本的知識(shí),作為專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)師,如果沒(méi)有很好地掌握排版設(shè)計(jì)技巧,你的界面設(shè)計(jì)可能就會(huì)經(jīng)常出現(xiàn)時(shí)好時(shí)壞的情況。排版設(shè)計(jì)需要注意什么?留意以下排版設(shè)計(jì)的四大黃金原則,你也能讓排版能力長(zhǎng)期達(dá)到穩(wěn)定水平!
成都網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則
原則一:視覺(jué)焦點(diǎn)
視覺(jué)焦點(diǎn)是界面中占主導(dǎo)地位的視覺(jué)元素,也是用戶(hù)進(jìn)入網(wǎng)站時(shí)第一眼就能看到的設(shè)計(jì)元素。若網(wǎng)頁(yè)信息層次感不強(qiáng),沒(méi)有主次之分,用戶(hù)會(huì)對(duì)網(wǎng)站存在疑惑,甚至誤解。因此,必須確保關(guān)鍵元素清晰直接,才能讓整個(gè)用戶(hù)操作過(guò)程更加流暢。
網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則" alt="成都網(wǎng)站設(shè)計(jì)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則" style="width: 600px; height: 450px;"/>
正面例子:界面通過(guò)黑色Button強(qiáng)調(diào)重要的信息,關(guān)鍵元素則采用高亮小圖標(biāo)顯示,直接吸引用戶(hù)的注意力。
成都網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則" alt="成都網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則" style="width: 600px; height: 450px;"/>
反面例子:左面界面的所有元素采用同一色系,看起來(lái)所有信息都很重要,沒(méi)有明確的視覺(jué)指引;右面整個(gè)界面的顏色太多,顯得非常輕浮。
原則二:層次結(jié)構(gòu)
建立視覺(jué)層次結(jié)構(gòu),能讓用戶(hù)明確知道頁(yè)面的關(guān)鍵要素和其他元素之間的關(guān)系,并且能快速完成當(dāng)前任務(wù),同時(shí)也符合用戶(hù)的閱讀習(xí)慣。所以突出界面的層級(jí)關(guān)系,可通過(guò)顏色、大小,明暗對(duì)比。
成都網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則" alt="成都網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則" style="width: 600px; height: 450px;"/>
正面例子:頁(yè)面的圖片是吸引用戶(hù)注意力的關(guān)鍵,因此視覺(jué)重量會(huì)比其他元素要大,里面的文字則利用明暗區(qū)分層級(jí)關(guān)系。
原則三:視覺(jué)重量
要衡量頁(yè)面的重量,可通過(guò)大小、對(duì)比、顏色、留白、形狀、位置等方式進(jìn)行調(diào)整。那么在界面中如何把握視覺(jué)重量的比例?看看以下的例子。
成都網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則" alt="成都網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則" style="width: 600px; height: 450px;"/>
雖然與白色相比,藍(lán)紫色會(huì)更具吸引力,但在左圖中,我們卻發(fā)現(xiàn)中間白色的logo更為吸引,這是因?yàn)榱舭祝車(chē)鷽](méi)有任何元素干擾。再看看右圖,界面雖然有很多元素,但最吸引人的依然是藍(lán)紫色的按鈕,這是因?yàn)榕c界面的其他顏色相比,藍(lán)紫色更為搶眼,因而成為視覺(jué)焦點(diǎn)。
原則四:視覺(jué)方向
如果說(shuō)視覺(jué)重量能第一時(shí)間將用戶(hù)的視線帶到特定重要的位置,那么視覺(jué)方向其實(shí)引導(dǎo)用戶(hù)快速完成任務(wù)和達(dá)到預(yù)期目標(biāo)。
正面例子:左邊圖標(biāo)和右邊列表形成一個(gè)Z字結(jié)構(gòu),引導(dǎo)用戶(hù)將視線從左到右移動(dòng),非常符合用戶(hù)的傳統(tǒng)閱讀習(xí)慣。
要形成視覺(jué)方向就需要「線」,這條線是無(wú)形的,但可通過(guò)對(duì)齊、相同形狀元素等形成軸來(lái)進(jìn)行。
簡(jiǎn)單來(lái)說(shuō),用戶(hù)能否順利在頁(yè)面中完成操作,靠的就是視覺(jué)方向的指引,這就需要我們通過(guò)對(duì)視覺(jué)焦點(diǎn)、層次結(jié)構(gòu)、視覺(jué)重量這三方面的調(diào)整才能實(shí)現(xiàn)
網(wǎng)頁(yè)名稱(chēng):成都網(wǎng)站建設(shè)技巧:網(wǎng)站排版設(shè)計(jì)的四大黃金原則
標(biāo)題路徑:http://m.2m8n56k.cn/news/7340.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容