您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 瀏覽設(shè)計(jì)教程

不可忽視的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)之一--對(duì)齊

無(wú)論你是否意識(shí)到,對(duì)齊都是大部分Web設(shè)計(jì)中必不可缺少的部分;它作用于幕后,是一個(gè)隱藏設(shè)計(jì)元素。它起初可能只是一個(gè)PSD文件,也可能是設(shè)計(jì)模版中不可缺少的部分,是Web設(shè)計(jì)的主干。你的網(wǎng)站可能有一套布局(或網(wǎng)格),作為主要的框架,以支持網(wǎng)站的外觀、體驗(yàn)、導(dǎo)航、工具欄、頁(yè)眉、頁(yè)腳等。

作為高效設(shè)計(jì)原則,“對(duì)齊”可以幫助我們對(duì)“元素如何在頁(yè)面中布局”做出明確的決定。利用戰(zhàn)略層上的布局,可以設(shè)計(jì)出更強(qiáng)大、更吸引人的作品;利用網(wǎng)格系統(tǒng),可以為每個(gè)元素的定位提供標(biāo)準(zhǔn)的指導(dǎo)。沒(méi)有對(duì)齊策略,我們就會(huì)隨意安放元素,與其他相似元素產(chǎn)生很小甚至不會(huì)產(chǎn)生聯(lián)系。沒(méi)有對(duì)齊,網(wǎng)站的外觀及體驗(yàn)就會(huì)變得雜亂無(wú)章。

對(duì)齊策略已遠(yuǎn)遠(yuǎn)超越了對(duì)齊、浮動(dòng)屬性及文本和圖片的對(duì)齊方式,它還包含其他的因素,比如用戶的交互、信息架構(gòu)、網(wǎng)格及Web設(shè)計(jì)元素的組織。

關(guān)于Web設(shè)計(jì)中的對(duì)齊,你是如何做決策的?

最主要的考慮因素包括對(duì)典型用戶交互方式的分析,如眼動(dòng)追蹤測(cè)試。針對(duì)“用戶如何瀏覽網(wǎng)頁(yè)”的多項(xiàng)研究已開(kāi)展,內(nèi)容包含眼睛是如何瀏覽頁(yè)面的,從開(kāi)頭到結(jié)束的掃描路徑是什么,用戶如何決定跳轉(zhuǎn)到的位置及下次點(diǎn)擊位置等。Charles O’Connell在Usability.gov上發(fā)起的討論(如圖1)介紹了眼動(dòng)追蹤測(cè)試的含義。從這些研究可以看出,它的要點(diǎn)之一是大部分用戶會(huì)沿著“F”形狀的“熱點(diǎn)圖”來(lái)掃描頁(yè)面內(nèi)容,即從頂部開(kāi)始(正如頭條往往比圖片更吸引眼球),僅掃描幾個(gè)詞后,便沿頁(yè)面的左側(cè)掃描并尋找更多有吸引力的內(nèi)容,并在幾秒內(nèi)做出點(diǎn)擊動(dòng)作。

不可忽視的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)之一--對(duì)齊

圖1

同時(shí)還要注意信息架構(gòu)(IA),包括整體概念模型、設(shè)計(jì)計(jì)劃、架構(gòu)及組織方式。該過(guò)程可以描繪出網(wǎng)站的層級(jí)結(jié)構(gòu)、核心導(dǎo)航、標(biāo)準(zhǔn)、規(guī)范、分類標(biāo)簽、可用性,用頁(yè)面線框圖、站點(diǎn)設(shè)計(jì)圖解、原型圖來(lái)代替詳細(xì)的設(shè)計(jì)模式。圖2展示了一個(gè)簡(jiǎn)單網(wǎng)站的信息架構(gòu)概念模型,它提供了開(kāi)發(fā)流的起點(diǎn),最終對(duì)主要元素進(jìn)行對(duì)齊設(shè)置,以滿足動(dòng)態(tài)網(wǎng)站模型。

不可忽視的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)之一--對(duì)齊

 

圖2

利用對(duì)齊,如何創(chuàng)建引人注目的網(wǎng)站?

對(duì)齊原則帶來(lái)了條理,而條理體現(xiàn)了協(xié)調(diào),所有的元素平衡合理地安排在Web頁(yè)面中。以有序的方式組織頁(yè)面元素,從而構(gòu)建成功的產(chǎn)品并健康的發(fā)展。

圖3所示的簡(jiǎn)單布局以左側(cè)頂部的Logo開(kāi)始,頁(yè)眉和導(dǎo)航區(qū)域位于右側(cè)區(qū)域,并與之水平對(duì)齊;Banner圖位于導(dǎo)航的下方。左側(cè)欄與Logo位于一列,一直延伸到頁(yè)腳的上方。主內(nèi)容區(qū)與Banner圖和頁(yè)眉左對(duì)齊。右側(cè)欄占據(jù)了剩余空間,與頁(yè)眉/導(dǎo)航及Banner圖的右邊緣垂直對(duì)齊。頁(yè)腳橫跨頁(yè)面的整個(gè)寬度。

不可忽視的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)之一--對(duì)齊

圖3

注意,Logo、左側(cè)欄、內(nèi)容區(qū)、右側(cè)欄及頁(yè)腳部分的文字均為左對(duì)齊,導(dǎo)航及Banner圖區(qū)域?yàn)榫又袑?duì)齊。

這僅僅是一個(gè)舉例,來(lái)說(shuō)明如何清晰地布局網(wǎng)格系統(tǒng)中的頁(yè)面元素。

網(wǎng)格系統(tǒng)

一些網(wǎng)格系統(tǒng)及模版可以指導(dǎo)我們布局Web設(shè)計(jì)元素。下文列舉了兩個(gè)此類系統(tǒng),你可以修改其中各種設(shè)置,如列、排版,并以CSS和HTML格式進(jìn)行保存,從而快速提供原型,或整合入現(xiàn)存的開(kāi)發(fā)環(huán)境中。

由Web開(kāi)發(fā)者Rasmus Schultz提供的Grid Designer 是一個(gè)在線工具,它默認(rèn)提供4列,寬分別為174px,總寬度為800px,其中每列間有20px的間隙,頁(yè)面兩側(cè)分別有22px的留白。在該案例中,默認(rèn)的排版樣式為Veranda:段落內(nèi)文字大小為10px,行高為1;標(biāo)題采用默認(rèn)字體,大小為16px,行高為2。如圖4。

不可忽視的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)之一--對(duì)齊

圖4

960 Grid由Web設(shè)計(jì)師Nathan Smith設(shè)計(jì),也就是之前圖趣給大家講的網(wǎng)頁(yè)設(shè)計(jì)的柵格化系統(tǒng)。它提供了一個(gè)系統(tǒng),通過(guò)常用維度來(lái)分割寬為960px的頁(yè)面來(lái)流程化Web開(kāi)發(fā)。它提供了兩種選擇:12列和16列,每一種選擇即可單獨(dú)使用也可混合使用。12列網(wǎng)格將寬均衡地分割成12列(每列寬為60px),而16列網(wǎng)格則分割為16列(每列寬40px),每列左右兩側(cè)具有10px的間隙,各網(wǎng)格最外側(cè)均留出20px的空白。

不可忽視的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)之一--對(duì)齊

圖5

響應(yīng)式對(duì)齊

針對(duì)響應(yīng)式Web設(shè)計(jì),W3C已推出了CSS彈性框布局模塊(CSS Flexible Box Layout Module)工作草案,簡(jiǎn)稱“Flexbox”。Editors Draf于2012年8月13日進(jìn)行了更新,它描述了CSS框模塊的規(guī)范,以優(yōu)化用戶界面的設(shè)計(jì)。在強(qiáng)性布局模塊中,彈性容器中的子元素可被定位于任何位置,可“彈性”變換大小,即可以增大充滿未用空間,也可縮放以避免溢出,可很容易地對(duì)子元素進(jìn)行水平和垂直對(duì)齊。這些框的嵌套(如水平中的垂直嵌套、垂直中的水平嵌套)可用來(lái)構(gòu)建兩種維度的布局。圖5是來(lái)自Editors Draf的一個(gè)插圖。

 

不可忽視的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)之一--對(duì)齊

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/tutorial1207.html
網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按鈕設(shè)計(jì)
清新風(fēng)格頁(yè)面設(shè)計(jì)與實(shí)現(xiàn)
圖趣網(wǎng)微信
建議反饋
×