網(wǎng)頁設(shè)計范文10篇

網(wǎng)頁設(shè)計范文10篇

2024年，EthanMarcotte提出響應(yīng)式網(wǎng)頁設(shè)計(RWD，ResponsiveWebDesign)，其實，這并不是一項新技術(shù)，而是已有技術(shù)———媒介查詢(MediaQueries)、流式布局(FluidGrids)、自適應(yīng)圖片(ScalableImages)的有機組合。隨著技術(shù)標準的擴展，這三項技術(shù)(媒介查詢、流式布局、自適應(yīng)圖片)雖然仍是響應(yīng)式網(wǎng)頁設(shè)計的核心，但并不是全部。響應(yīng)式網(wǎng)頁設(shè)計無論從觀念還是技術(shù)都正在經(jīng)受著優(yōu)勝劣汰的進化過程。響應(yīng)式網(wǎng)頁設(shè)計，是指依據(jù)用戶的使用設(shè)備，使用情境以及使用行為來調(diào)整網(wǎng)頁的版式、內(nèi)容、功能和交互方式的設(shè)計方法。響應(yīng)式網(wǎng)頁設(shè)計為適應(yīng)多樣的掃瞄狀況而設(shè)計更流暢、更敏捷的頁面，達到良好設(shè)計實踐，為用戶供應(yīng)更優(yōu)化的體驗。

二、響應(yīng)式網(wǎng)頁設(shè)計的方法

響應(yīng)式網(wǎng)頁設(shè)計是以用戶為中心的設(shè)計，關(guān)注特定情境下的用戶體驗，它既要適應(yīng)設(shè)備的功能和限制又要適應(yīng)用戶的使用環(huán)境。響應(yīng)式網(wǎng)頁設(shè)計的方法主要包括以下幾個方面。(一)移動優(yōu)先(MobileFirst)在網(wǎng)站策劃與制作的初步階段，響應(yīng)式技術(shù)比常規(guī)方法費時耗力。一般來講，開發(fā)人員需要了解用戶設(shè)備及不同使用情境，優(yōu)先從移動端開頭設(shè)計，從創(chuàng)建具有肯定可用性的基本體驗開頭，滿意用戶簡潔、順暢的情境需求。然后，漸進增加，布局顯示內(nèi)容，提高圖片質(zhì)素，增加必要的服務(wù)，供應(yīng)恰當(dāng)?shù)慕换?，制造更豐富的體驗。移動優(yōu)先采納漸進增加(ProgressiveEnhance-ment)原則，而非早期網(wǎng)站設(shè)計提倡的優(yōu)雅降級(GracefulDegradation)原則。移動優(yōu)先既可以為不支持媒介查詢的移動設(shè)備供應(yīng)適合的布局，聚焦當(dāng)下最重要的事，也可以降低CSS代碼簡單性，削減冗余代碼。(二)媒介查詢(MediaQueries)媒介查詢是指依據(jù)用戶特定情境，查詢設(shè)備各種屬性來布局樣式和內(nèi)容。測試的屬性包括:設(shè)備屏幕寬高(device-width，device-height);視窗顯示區(qū)域的寬高(width，height)，例如掃瞄器窗口的大小;屏幕方向媒體特性打算一個設(shè)備是處于橫屏還是豎屏，即設(shè)備處于垂直或水平的狀態(tài)(orienta-tion)，寬長比例等特性(aspect－ratio);設(shè)備屏幕辨別率(resolution)，每平方英寸像素數(shù)(ppi)，一般的屏幕為163ppi，視網(wǎng)膜(Retina)屏為326ppi。這些屬性可以通過“與或非”等規(guī)律運算符形成簡單的表達式，以此推斷是否為特定目標設(shè)備類型，從而加載特別樣式、調(diào)整頁面布局、供應(yīng)適合的功能和交互。(三)流式布局(FluidLayouts)傳統(tǒng)的固定寬度(FixedWidth)布局以像素為單位，是網(wǎng)頁布局中最常見的方法，它簡潔粗暴地固定了頁面的寬度，使用戶在不同設(shè)備上掃瞄相同的頁面。屏幕較大時，頁面兩側(cè)消失大片的空白區(qū)域未加利用;屏幕較小時，頁面內(nèi)容位置不變，用戶只能不斷地通過手指滑動進行掃瞄和界面交互。流淌寬度(FluidWidth)布局的單位是百分比。流淌布局依據(jù)掃瞄器窗口寬度自動調(diào)整頁面布局，不會消失水平滾動條。大屏幕時，頁面兩側(cè)不會消失固定布局中的大面積空白;小屏幕時，內(nèi)容也不會擠成一團難以閱讀。彈性寬度(ElasticWidth)布局以“em”為單位，隨著文本大小的轉(zhuǎn)變，容器的寬度也等比例地轉(zhuǎn)變，將容器調(diào)整到合適的寬度。由于行寬過短，眼睛往復(fù)跳動掃視會破壞閱讀節(jié)奏;而行寬過長，簡單造成持續(xù)行進閱讀失誤。為了提高文本的可讀性，盡量使每行的中文字符個數(shù)介于25～45之間，英文字符個數(shù)介于45～70之間。網(wǎng)格布局(GridLayouts)可以使信息展現(xiàn)得有序、和諧，間距均衡、布局工整的頁面提高了可讀性，添加或更新內(nèi)容時也更加簡單。網(wǎng)格布局多采納8列、10列、12列、16列，由于12可以被2、3、4、6整除，因此它是最常用的網(wǎng)格布局列數(shù)。混合布局(HybridLayouts)則結(jié)合上述兩種及以上的布局方法。相對固定布局，其他布局更具敏捷性，但每種方法都各有優(yōu)勢和缺點。目前，響應(yīng)式網(wǎng)頁設(shè)計較常用的流式布局方法是利用CSS表格屬性(display:table-cell)混合內(nèi)容列為流淌寬度，側(cè)邊列為固定寬度的方法。頁面布局采納內(nèi)容優(yōu)先(ContentFirst)原則，即權(quán)衡如:圖片、視頻、文本、廣告等不同內(nèi)容的重要性來打算網(wǎng)格的編排。(四)文本單位(SizingFont)設(shè)計師常用像素(px)來設(shè)置文本大小，不同的設(shè)備屏幕具有不同的長寬尺寸和像素密度，這就造成了以像素為單位的文本可能在這臺設(shè)備上顯示的效果不錯，在另一臺設(shè)備上看起來太大或太小。并且，由于像素的精確掌握，不同的文本大小需要分別逐一設(shè)置，調(diào)整時也更繁瑣。在響應(yīng)式網(wǎng)頁設(shè)計中默認文本大小(em)的比例和百分比(%)卻具有更好的可訪問性和敏捷性?！癳m”可以進行跨掃瞄器縮放，1em相當(dāng)于當(dāng)前默認文本大小，指定了默認文本大小以后，調(diào)整默認基準或倍數(shù)，其余的文本就會自動按比例進行縮放，從而簡化了維護?！?”和“em”類似，文本尺寸也可以按比例縮放，兩者在技術(shù)上沒有太大區(qū)分，且都是隨父級容器級聯(lián)的，只是“em”在語意上作為默認文本大小的比例設(shè)置更簡單理解。另外，還有一種更具敏捷性的單位“rem”(rootem)，其設(shè)置的大小只與HTML元素有關(guān)，避開了在嵌套元素中產(chǎn)生的級聯(lián)問題。但是，目前“rem”雖然在桌面設(shè)備掃瞄器的支持較好，在移動平臺卻沒有得到廣泛的支持。(五)自適應(yīng)圖片和視頻(ScalableImages＆Vidoes-)很多網(wǎng)站在小屏幕設(shè)備上實行簡潔的方法來處理圖片:方法一，設(shè)置圖片的CSS的display屬性為none，從視覺上隱蔽圖片;方法二，通過媒介查詢簡潔地掌握縮放圖片的比例。采納這兩種方式的圖片依舊會被根據(jù)原始文件量下載，既沒有節(jié)約流量也沒有節(jié)約下載時間，因此都是不行取的。目前最優(yōu)的方法是在加載頁面之后，根據(jù)頁面布局確定加載哪張圖片。依據(jù)圖片容器在不同設(shè)備上的寬度設(shè)置斷點，通過媒介查詢?yōu)椴煌瑪帱c供應(yīng)不同的圖片，假如圖片等比縮放的藝術(shù)效果不夠好，則需要視覺設(shè)計師為其單獨切割畫面以保證藝術(shù)感染力。對于Retina高辨別率屏幕，需要創(chuàng)建較大面積和文件量的圖片，達到細致清楚的顯示效果，而不需要在小屏幕低質(zhì)素的設(shè)備上加載這樣大的圖片?？缮炜s矢量圖形(SVG，ScalableVectorGraphics)，可以自如縮放而不失真、文件量也不會增大，是將來屏幕顯示矢量圖形的抱負解決方案。視頻的處理與圖片不同，在小屏幕中可以只供應(yīng)一個視頻鏈接來提高頁面的加載速度;在大屏幕中則根據(jù)布局需要成比例縮放，關(guān)鍵是視頻的容器要設(shè)置與視頻的長寬比例全都，這樣，視頻才能夠隨著容器的變化而成比例調(diào)整。(六)導(dǎo)航方式(NavigationMode)不論在哪種設(shè)備中，導(dǎo)航都是引導(dǎo)用戶交互的重要元素，其可訪問性和易用性是至關(guān)重要的，尤其在小屏幕中如何布局導(dǎo)航成為影響用戶體驗的重要課題。最簡潔的方式是任導(dǎo)航我流淌堆疊下來，雖然直觀整齊，但卻占用了屏幕的珍貴空間，把主要內(nèi)容信息擠了下去。其次種方法是把導(dǎo)航轉(zhuǎn)化為下拉列表，節(jié)約空間，但不夠直觀，許多用戶還不能把原本用于表單中的組件和導(dǎo)航我結(jié)合起來，另外，目前大多數(shù)設(shè)備都不支持下拉列表的樣式化。第三種方法則是先隱蔽導(dǎo)航，然后通過單擊一個形象化的按鈕來綻開導(dǎo)航我，節(jié)約了屏幕空間，相對于下拉列表也比較簡單理解，但增加了一個單擊的操作步驟。

三、響應(yīng)式網(wǎng)頁設(shè)計的特點

響應(yīng)式網(wǎng)頁設(shè)計是為了讓掃瞄者使用不同設(shè)備時獲得全都的用戶體驗而開發(fā)的，不只是針對移動設(shè)備。在互聯(lián)網(wǎng)產(chǎn)品、技術(shù)和標準不斷進展的過程中，響應(yīng)式網(wǎng)頁設(shè)計也是不斷進化的，只有了解其利弊，才能更好地為用戶服務(wù)。首先，響應(yīng)式網(wǎng)頁設(shè)計操作敏捷，可以針對某個頁面調(diào)整，而不必影響網(wǎng)站中的其他頁面;其次，響應(yīng)式網(wǎng)頁設(shè)計適應(yīng)性強，相對傳統(tǒng)方法更簡單調(diào)整以適應(yīng)層出不窮的新設(shè)備;再次，響應(yīng)式網(wǎng)頁設(shè)計雖然在規(guī)劃階段有些耗時費勁，但從長遠看，卻可以節(jié)約產(chǎn)品整體的開發(fā)維護成本，節(jié)省時間;最終，響應(yīng)式網(wǎng)頁設(shè)計可以促使產(chǎn)品在不同設(shè)備上保持視覺體驗的統(tǒng)一性，維護品牌體驗的全都性。響應(yīng)式網(wǎng)頁設(shè)計并非總是最合適的方法。有的網(wǎng)絡(luò)服務(wù)商需要為大屏幕、固定位置用戶和小屏幕、移動用戶供應(yīng)的內(nèi)容差別特別大，兩者的生命周期不同，動態(tài)效果和交互體驗不同，以及移動定位、傳感器和大數(shù)據(jù)帶來的諸多因素，設(shè)計師就需要為不同用戶的不同使用情境分別設(shè)計網(wǎng)站，然后通過媒介查詢自動定位到適合的站點。

四、結(jié)語

響應(yīng)式網(wǎng)頁設(shè)計從媒介查詢、流式布局、自適應(yīng)圖