網(wǎng)頁設(shè)計的概念
網(wǎng)頁設(shè)計（web design，又稱為Web UI design，WUI design，WUI），是根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。
網(wǎng)頁設(shè)計一般分為三種大類：功能型網(wǎng)頁設(shè)計（服務(wù)網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁設(shè)計（品牌形象站）、信息型網(wǎng)頁設(shè)計（門戶站）。設(shè)計網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計方案。
網(wǎng)頁設(shè)計的工作目標(biāo)，是通過使用更合理的顏色、字體、圖片、樣式進(jìn)行頁面設(shè)計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網(wǎng)頁設(shè)計甚至?xí)紤]到通過聲光、交互等來實(shí)現(xiàn)更好的視聽感受。
網(wǎng)頁設(shè)計主要以Adobe產(chǎn)品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。
制作網(wǎng)頁時，我們通常選用的分辨率是72像素/英寸，使用的畫布尺寸1920px*1080px。但是并不代表我們可以在整個畫布上作圖。
網(wǎng)頁的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設(shè)計的空間也不相同。
左右布局，靈活性強(qiáng)， UI的限制小,左邊通欄為導(dǎo)航欄，寬度沒有具體的限制，可根據(jù)實(shí)際情況調(diào)整； 右側(cè)為內(nèi)容版塊范圍，是網(wǎng)站內(nèi)容的展示區(qū)域。
居中布局，中間的部分為有效的顯示局域，用于網(wǎng)站內(nèi)容的展示；換句話說，兩邊均為留白，沒有實(shí)際用途，只是為了適配而存在。
字體設(shè)計的總原則是：可辨識性和易讀性，并且不能使用一些有版權(quán)的字體。 網(wǎng)頁的文字設(shè)計是系統(tǒng)默認(rèn)的字體：宋體、黑體，英文則建議使用arial無襯線字體 常用的字號大小有以下幾種：?
12px是應(yīng)用于網(wǎng)頁的最小字體，適用于非突出性的日期，版權(quán)等注釋性內(nèi)容。?
14px 則適用于非突出性的普通正文內(nèi)容。?
16px、18px或者20px 適用于突出性的標(biāo)題內(nèi)容。?
網(wǎng)頁設(shè)計也可能需要其他大小字號，要根據(jù)具體情況而定。
相鄰兩個文字的間距，其實(shí)不需要太過介意，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距。
行間距，推薦以字體大小的1.5—2倍作為參考； 段間距，推薦以字體大小的2—2.5倍作為參考。 即，當(dāng)選用14px的字體時，行間距：21—28px；段間距：28px—35px。
主文字顏色，建議使用公司品牌的VI顏色，可提高公司網(wǎng)站與公司VI之間的關(guān)聯(lián)，增加可辨識性和記憶性。 正文字體顏色，保險起見，選用易讀性的深灰色，建議選用 #333333到#666666 之間的顏色。 輔助性的，注釋類的文字，則可以選用#999999之類的比較淺的顏色。 如果，你對顏色駕馭能力比較強(qiáng)，你也可以選用偏公司VI顏色的深色，作為正文字體顏色或者輔助性文字顏色。 例如公司的品牌色是藍(lán)色，那么，正文字體就可以選用偏藍(lán)的深色。 這樣處理之后，文字就帶有了環(huán)境色，網(wǎng)站整體色調(diào)將更加和諧。
做網(wǎng)頁設(shè)計時，你還要特別注意網(wǎng)頁的首屏內(nèi)容，在構(gòu)圖和內(nèi)容呈現(xiàn)上，首屏模塊的設(shè)計至關(guān)重要。用戶打開一個網(wǎng)站，首先展現(xiàn)在眼前的就是網(wǎng)站的第一屏內(nèi)容，如果首屏設(shè)計的比較精彩，能夠第一眼吸引住客戶。
另外，是關(guān)于圖片尺寸的問題。 需要全屏顯示的圖片，寬度尺寸一般來說設(shè)計為1920px。 但是值得注意的是，圖片內(nèi)容的有效范圍不能超過網(wǎng)頁內(nèi)容的有效范圍，即控制在1200px以內(nèi)。避免遇到小屏幕設(shè)備時，內(nèi)容顯示不全，而造成信息的遺漏的情況。
響應(yīng)式設(shè)計指的是不同設(shè)備、屏幕、分辨率、操作方式（鼠標(biāo)、鍵盤、觸摸），保證信息在不同環(huán)境下表現(xiàn)一致，保證可交互可操作。
由于頁面的寬度發(fā)生了變化，進(jìn)而信息展現(xiàn)也改變了就是響應(yīng)式設(shè)計。直到最后在手機(jī)屏幕上的顯示圖片信息變成了一列。
對頁面進(jìn)行響應(yīng)式的設(shè)計實(shí)現(xiàn)，需要對相同內(nèi)容進(jìn)行不同寬度的布局設(shè)計，有兩種方式：桌面優(yōu)先（從桌面端開始向下設(shè)計）；移動優(yōu)先（從移動端向上設(shè)計）； 無論基于哪種模式的設(shè)計，要兼容所有設(shè)備，布局響應(yīng)時不可避免地需要對模塊布局做一些變化（當(dāng)頁面寬度發(fā)生變化的尺寸范圍就是臨界點(diǎn)的概念。所以做響應(yīng)式設(shè)計時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應(yīng)清晰的一個臨界點(diǎn)，制定了臨界點(diǎn)之后就知道，當(dāng)屏幕的寬度范圍位于哪一個點(diǎn)的時候，我們的頁面信息該如何展示。）
我們通過JS獲取設(shè)備的屏幕寬度，來改變網(wǎng)頁的布局，這一過程我們可以稱之為布局響應(yīng)屏幕。1、布局不變，即頁面中整體模塊布局不發(fā)生變化 ? ? ? ? ? ? ? ? ?
2、布局改變，即頁面中的整體模塊布局發(fā)生變化
很多時候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能時保持簡單輕巧，而且同一臨界點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為臨界點(diǎn)）保持統(tǒng)一邏輯。否則頁面實(shí)現(xiàn)得太過復(fù)雜，也會影響整體體驗和頁面性能。
微信公眾平臺
