一区不卡国产视频,小黄片免费视频在线观看,国产这里有精品99,国产成人精品自产久久亚洲精品,亚洲国产电影二区

品優(yōu)網(wǎng)絡(luò) 十六年(2003-2018)專注
細(xì)說網(wǎng)頁(yè)布局
日期:2014-12-27 作者:admin 來(lái)源: 瀏覽次數(shù):0 網(wǎng)友評(píng)論 0

企業(yè)網(wǎng)站推廣1

在網(wǎng)頁(yè)設(shè)計(jì)中我們都會(huì)講到網(wǎng)頁(yè)布局,我們經(jīng)常提到它,但你真正理解它的意思嗎?

    “布局”是指頁(yè)面內(nèi)容的尺寸、間距及位置。有效的布局對(duì)于幫助用戶快速找到他們想要的內(nèi)容至關(guān)重要,并可以在結(jié)構(gòu)外觀上令用戶感到舒服。

如何設(shè)計(jì)有效的布局?

  1.具有清晰的視覺層次。布局應(yīng)當(dāng)讓頁(yè)面各元素之間的關(guān)系和重要性一目了然。你可以通過適當(dāng)使用下列屬性來(lái)實(shí)現(xiàn)視覺層次:

    焦點(diǎn):指用戶首先關(guān)注的區(qū)域。形式上被賦予焦點(diǎn)屬性的UI元素一定要表達(dá)重要的內(nèi)容。

    視覺流:指用戶關(guān)注區(qū)域的順序??梢愿鶕?jù)任務(wù)邏輯和用戶的瀏覽習(xí)慣來(lái)設(shè)計(jì)恰當(dāng)?shù)囊曈X流。好的視覺流應(yīng)該清晰、合理、順暢、自然。

    關(guān)聯(lián):在邏輯上相關(guān)的UI元素應(yīng)具有清晰的視覺關(guān)系。

錯(cuò)誤:

邏輯上相關(guān)的UI元素在空間上被分隔,且沒有明顯的視覺關(guān)聯(lián)。

對(duì)齊:使頁(yè)面工整,信息呈現(xiàn)有序,便于用戶掃視。

錯(cuò)誤:

    沒有對(duì)齊影響了頁(yè)面效果且不便于用戶掃視。不要因?yàn)楣δ苄枰蛯?duì)更限情況的顧慮而輕易犧牲掉頁(yè)面的視覺展現(xiàn)。

    強(qiáng)調(diào):可以根據(jù)UI元素間的相對(duì)重要程度進(jìn)行強(qiáng)調(diào)。

  2.針對(duì)用戶的閱讀模式來(lái)設(shè)計(jì)布局。

大部分人的閱讀習(xí)慣是從左向右,至上而下。

閱讀分為沉浸式閱讀(immersive reading)和掃視(scanning),前者的目的在于理解,后者在于定位。

 

    瀏覽網(wǎng)站時(shí),用戶不會(huì)沉浸在UI本身,而是沉浸在他們的目標(biāo)任務(wù)中,因此掃視是更常使用的閱讀模式。用戶只在確信必要時(shí)才仔細(xì)閱讀大量文本。

    針對(duì)掃視的布局設(shè)計(jì)可以適當(dāng)強(qiáng)調(diào)主要的UI元素,弱化次要的。包括:

1)將主UI元素放在掃視路徑上。

2)避免將重要信息放在左下角或者頁(yè)面底端或者需要滾動(dòng)很多的控件上。

3)考慮使用漸進(jìn)展開方式來(lái)隱藏次要的UI元素。

4)將任務(wù)相關(guān)的重要信息要直接表現(xiàn)在控件上。用戶更傾向于關(guān)注交互控件上的標(biāo)簽,而不是輔助型的靜態(tài)文本。

錯(cuò)誤:

用戶必須閱讀輔助型文本后才能明確“確定”按鈕的作用。

正確:

直接將按鈕的作用描述作為控件標(biāo)簽,便于用戶理解。

5)不要展示大段文本,去除不必要的文本。多文本時(shí)格式化展示。

注:常規(guī)模式也存在例外。眼動(dòng)議實(shí)驗(yàn)指出,真實(shí)用戶的行為很沒有規(guī)律。此模式的目的在于幫助你做出更好的決定,而不是精準(zhǔn)的描述用戶行為。

3.合理利用頁(yè)面空間。

保持頁(yè)面的視覺平衡。避免擁擠和對(duì)空間的浪費(fèi)。

確保關(guān)鍵數(shù)據(jù)沒有被截?cái)?,除非?shù)據(jù)特別長(zhǎng)。

錯(cuò)誤:

    邏輯上相關(guān)的UI元素在空間上被分隔,且沒有明顯的視覺關(guān)聯(lián)。

    控件的尺寸和間距恰當(dāng),沒有不必要的滾動(dòng)。一個(gè)任務(wù)盡量在一屏內(nèi)完成。

    實(shí)際情況中,我們用戶的頁(yè)面空間要小于屏幕分辨率,它會(huì)因各種因素而壓縮,如:非全屏操作(彈出窗口和對(duì)比瀏覽),瀏覽器本身及各種輔助欄對(duì)屏幕的占用等,設(shè)計(jì)中要考慮這些情況。

 

4.不要讓布局本身成為突出的UI元素,保持視覺簡(jiǎn)潔(visual simplicity)。

    減少內(nèi)容和展現(xiàn)上的嵌套層級(jí)。

    減少控件不同尺寸的數(shù)量,例如,在界面上只使用一兩種按鈕寬度。

    采用輕量級(jí)的分組和分割方式,可以用布局本身和分隔符代替分組框。

    使用盡量少的對(duì)齊線。

5.選擇與頁(yè)面類型相匹配的版式。在設(shè)計(jì)之初,應(yīng)充分考慮頁(yè)面承載的內(nèi)容、功能和屬性,繼而選擇適合該頁(yè)面的版式。不合適的版式會(huì)造成用戶的閱讀困擾,降低任務(wù)的完成效率。

標(biāo)準(zhǔn)和規(guī)范:

1.柵格化:

我們所說的柵格化是指在網(wǎng)頁(yè)設(shè)計(jì)工作中對(duì)柵格系統(tǒng)的建立和應(yīng)用。網(wǎng)頁(yè)柵格系統(tǒng)來(lái)源于平面柵格系統(tǒng),它以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。

柵格化可以使信息呈現(xiàn)工整簡(jiǎn)潔、美觀易讀,降低頁(yè)面開發(fā)和運(yùn)維成本。它結(jié)構(gòu)變化相對(duì)靈活,擴(kuò)展性強(qiáng)。

2.以8px為橫向柵格單位:

以8px為橫向柵格單位,頁(yè)面所有元素寬度都可以是2的倍數(shù),包括圖片和版塊寬度,這樣可以在一定程度上加快頁(yè)面(特別是對(duì)于J-PEG圖片)的渲染速度(基于計(jì)算機(jī)內(nèi)部二進(jìn)制的運(yùn)算機(jī)制)。其在擴(kuò)展和兼容性上也有一定優(yōu)勢(shì)。

在阿里巴巴中文站中,布局間距的更小單位為8px,布局區(qū)塊采用32px(8px*4)和24(8px*3)兩種粒度單位,分別組成以下兩種可實(shí)現(xiàn)的柵格系統(tǒng):

32px:適用于市場(chǎng)、社區(qū)等相關(guān)頁(yè)面

24px:適用于旺鋪相關(guān)頁(yè)面

3.頁(yè)面定寬:

    自適應(yīng)可以根據(jù)瀏覽器顯示情況自動(dòng)調(diào)整頁(yè)面寬度,但是因?yàn)橛脩羲椒较虻木劢狗秶邢?,所以?dāng)頁(yè)面過寬時(shí),用戶的瀏覽和操作成本會(huì)增加;而當(dāng)頁(yè)面過窄時(shí)(如用戶同時(shí)開啟兩個(gè)瀏覽器對(duì)比查看商品搜索結(jié)果),自適應(yīng)則會(huì)導(dǎo)致布局變形和內(nèi)容錯(cuò)亂。給頁(yè)面規(guī)定寬度可以避免這些問題。

    在綜合考慮當(dāng)下主流分辨率情況、瀏覽器外觀對(duì)顯示空間的占用、人機(jī)工程學(xué)中對(duì)水平視角和聚焦范圍的規(guī)定以及8px單位等多種因素后,我們認(rèn)為960px是一個(gè)相對(duì)更加合理的頁(yè)面寬度。在阿里巴巴中文網(wǎng)站中,推薦使用定寬960px的頁(yè)面,去除左右各4px的邊距,中間的可視寬度為952px。

    只有考慮到以上這些因素,才能更好地進(jìn)行網(wǎng)頁(yè)設(shè)計(jì),那樣設(shè)計(jì)出的網(wǎng)頁(yè)也會(huì)更漂亮。網(wǎng)頁(yè)布局在網(wǎng)頁(yè)制作中是非常重要的一環(huán)。大家應(yīng)多了解它。

細(xì)說網(wǎng)頁(yè)布局,希望對(duì)您有用。

企業(yè)網(wǎng)站推廣2

查看更多寧波網(wǎng)站建設(shè)布局網(wǎng)頁(yè)

寧波網(wǎng)站建設(shè) (http://www.sdjianlida.com/) 版權(quán)與免責(zé)聲明
    1、凡本網(wǎng)注明“來(lái)源:寧波品優(yōu)網(wǎng)絡(luò)”字樣的所有作品,版權(quán)均屬于浙江省寧波海曙品優(yōu)網(wǎng)絡(luò)技術(shù)有限公司,如需轉(zhuǎn)載、摘編或利用其它方式使用上述作品,請(qǐng)與本網(wǎng)聯(lián)系。
    2、凡本網(wǎng)注明“來(lái)源:XXX(非寧波品優(yōu)網(wǎng)絡(luò))”的作品,均轉(zhuǎn)載自其它媒體,轉(zhuǎn)載目的在于傳遞更多信息,并不代表本網(wǎng)贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)。寧波網(wǎng)站建設(shè)的轉(zhuǎn)載僅為信息的廣泛傳播,如有侵權(quán)請(qǐng)及時(shí)告之刪除。
返回:寧波網(wǎng)站建設(shè)