一、前言
網(wǎng)頁設(shè)計(jì)（Web design），本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)，根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能的策劃；精美的網(wǎng)站設(shè)計(jì)，作為企業(yè)對(duì)外宣傳物料的一種，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。
二、我們?nèi)粘Ｉ钪校嘟佑|的是偏移動(dòng)端的設(shè)計(jì)，這是為什么呢？web端和移動(dòng)端的區(qū)別是什么？
（1）因?yàn)樵谖覀內(nèi)粘Ｉ钪校殖衷O(shè)備更加方便，移動(dòng)端設(shè)備的用戶比重相對(duì)網(wǎng)頁端用戶多很多，所以移動(dòng)端的設(shè)計(jì)是強(qiáng)功能導(dǎo)向的設(shè)計(jì)，包含實(shí)用功能的內(nèi)容。而網(wǎng)頁端更偏向于品牌介紹，引導(dǎo)用戶進(jìn)入移動(dòng)端。
（2）移動(dòng)端的功能眾多，無法全部復(fù)制到網(wǎng)頁端；如果要將移動(dòng)端的功能復(fù)制到網(wǎng)頁端，成本會(huì)很高，同時(shí)很多需要授權(quán)的功能，在網(wǎng)頁端是無法拿到數(shù)據(jù)的（例如：麥克風(fēng)、相冊(cè)等），都是需要移動(dòng)端掃碼獲取權(quán)限，所以網(wǎng)頁端就無從推進(jìn)。
三、常見網(wǎng)頁的分類；
1：網(wǎng)頁類型分為TO B和TO C；
TO C網(wǎng)頁包含了：門戶網(wǎng)站（網(wǎng)易、騰訊網(wǎng)等）、企業(yè)網(wǎng)站（蘋果、聯(lián)想等）、產(chǎn)品網(wǎng)站、電商網(wǎng)站（淘寶、京東等）、專題頁面、視頻網(wǎng)站和移動(dòng)端H5；
TO B網(wǎng)站包含了：網(wǎng)站后臺(tái)、ERP系統(tǒng)（企業(yè)管理系統(tǒng)）、Saas（服務(wù)公司定制系統(tǒng)）和企業(yè)OA（辦公自動(dòng)化系統(tǒng)）；
2：TO B和TO C網(wǎng)頁類型各具有什么特點(diǎn)？
TO C的網(wǎng)頁的功能目的：建立品牌形象、介紹宣傳；C端的網(wǎng)頁更加強(qiáng)調(diào)視覺的主次性，因?yàn)楣δ苣K多，所以會(huì)將視覺焦點(diǎn)引導(dǎo)到主要的功能上；
TO B的網(wǎng)頁的功能目的：數(shù)據(jù)分析，對(duì)網(wǎng)站前臺(tái)信息進(jìn)行管理；B端的網(wǎng)頁更強(qiáng)調(diào)交互的易用性，來提升用戶的使用效率。
四、網(wǎng)頁的布局和網(wǎng)頁規(guī)范；（以企業(yè)官網(wǎng)為例）
1：企業(yè)官網(wǎng)的功能目的？
企業(yè)官網(wǎng)主要是用來流量分發(fā)、建立信任和增加認(rèn)知；
2：企業(yè)官網(wǎng)的基礎(chǔ)結(jié)構(gòu)是什么樣的？
企業(yè)官網(wǎng)一般包含：導(dǎo)航條、banner、特性介紹、專業(yè)案例和footer等版塊。
導(dǎo)航條尺寸：50-100px；banner尺寸：350-600px；特性介紹的作用是讓用戶建立信任，專業(yè)案例用來增加用戶的認(rèn)知，footer版塊主要用來放置版權(quán)聲明、聯(lián)系方式、友情鏈接備案號(hào)等次要信息。
3：網(wǎng)頁的布局需要注意什么？
網(wǎng)頁設(shè)計(jì)時(shí)，可以在sketch中設(shè)置柵格，用來簡(jiǎn)化布局和間距；一般柵格的總款和列數(shù)12-24之間；具體情況在工作中靈活運(yùn)用。
五、網(wǎng)頁的網(wǎng)頁規(guī)范；（以企業(yè)官網(wǎng)為例）
1：網(wǎng)頁中的網(wǎng)頁尺寸和安全視距；
主流的設(shè)計(jì)軟件中暗示了主流的尺寸；網(wǎng)頁常見的主流的設(shè)計(jì)尺寸：1366x768px、1920x1080px和1440x1024px；工作中具體使用哪個(gè)尺寸設(shè)計(jì)，需要根據(jù)用戶群體來確定。
一般網(wǎng)頁設(shè)計(jì)中，需要有主視覺安全區(qū)域，主視覺安全區(qū)域?qū)挾龋?200px，網(wǎng)頁旁邊的導(dǎo)航以及懸浮彈窗在1440px以內(nèi)；
需要注意的是，在進(jìn)行網(wǎng)頁設(shè)計(jì)的時(shí)候，屏幕的高度要減掉瀏覽器的高度：180px;
2：網(wǎng)頁層級(jí)；
（1）網(wǎng)頁的布局層級(jí)，從上到下，由強(qiáng)到弱；
（2）網(wǎng)頁的文字層級(jí)，根據(jù)移動(dòng)端的一維分析法來拆分；
（3）網(wǎng)頁中的常見字體？
windows系統(tǒng)常用：微軟雅黑、宋體、Arial； MAC電腦常用：蘋方、宋體和Jelvetical；根據(jù)網(wǎng)頁的風(fēng)格可以增加特殊的字體包。網(wǎng)頁中字體層級(jí)≥2，最小的字號(hào)：12px。文字的間距一般為字體的1.5-2倍。
（4）網(wǎng)頁排版布局應(yīng)該注意的地方？
通過顏色、間距對(duì)比展現(xiàn)出網(wǎng)頁相同版塊的親密性；親密性可以對(duì)不同模塊引導(dǎo)數(shù)據(jù)流向，降低理解的成本。
（5）網(wǎng)頁中的常用圖片比例？
網(wǎng)頁中常用的圖片比例：16：9、1：1和3：4；圖片可以壓縮，減少服務(wù)器的資源耗費(fèi)，常用的圖片壓縮網(wǎng)站（Tinypng)。
3：網(wǎng)頁的配色以及狀態(tài)提示；
（1）網(wǎng)頁端的配色風(fēng)格；
網(wǎng)頁中的配色相對(duì)移動(dòng)端比較克制；配色風(fēng)格需要根據(jù)情緒色彩和業(yè)務(wù)屬性去設(shè)定；
比如：藍(lán)色代表安全、科技和可靠，一般用于工具類大數(shù)據(jù)平臺(tái)；橙黃色代表熱情、活力和快樂，一般多用于購物平臺(tái)（如：淘寶）；
（2）網(wǎng)頁中的配色方法；
a:一堆色值：記憶成本難、溝通成本高；
b:一個(gè)色值，通過改變不透明度，提高效率；
（3）網(wǎng)頁中的狀態(tài)提示；
紅色一般表示提交失敗、綠色表示成功；這個(gè)結(jié)合了生活中的紅綠燈原理，紅燈停（不予通過）、綠燈行（可通過），黃色可以起到警示作用。
