為什么“好看”我加上引號(hào)呢，因?yàn)楹每催@個(gè)詞太主觀，不同的人，審美不同，對(duì)好看的理解也不一樣，也沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)來衡量。

　　所以，沒辦法給出一個(gè)準(zhǔn)確的定義。

　　但是對(duì)網(wǎng)站卻有是有一系列的標(biāo)準(zhǔn)和要求的，例如用戶體驗(yàn)、視覺、功能性及技術(shù)實(shí)現(xiàn)，綜合性很強(qiáng)。

　　我也只能拋磚引玉，簡(jiǎn)單分享一個(gè)網(wǎng)站從規(guī)劃到上線的全過程。

　?、裨陂_始建立一個(gè)網(wǎng)站之前，首先要明確的目標(biāo)與受眾

　　1、明確定義網(wǎng)站的目標(biāo)：明確建立網(wǎng)站的目的，例如展示作品、銷售產(chǎn)品、提供資訊或者是用戶互動(dòng)。

　　2、了解目標(biāo)受眾：分析網(wǎng)站用戶的興趣、使用習(xí)慣、文化背景、用戶年齡等信息

　　3、分析同行業(yè)競(jìng)品，研究同行網(wǎng)站的優(yōu)點(diǎn)和不足，找到差異化競(jìng)爭(zhēng)點(diǎn)。

　　目標(biāo)與受眾確定之后，就要開始規(guī)劃網(wǎng)站結(jié)構(gòu)。

　?、蛞?guī)劃網(wǎng)站結(jié)構(gòu)

　　1.首先是信息架構(gòu)：

　　確定主要頁面（首頁、關(guān)于我們、聯(lián)系方式、資訊/博客、隱私條款等）

　　設(shè)計(jì)導(dǎo)航結(jié)構(gòu)（設(shè)計(jì)清晰的導(dǎo)航菜單，方便用戶快速找到所需內(nèi)容）

　　【可以通過樹狀結(jié)構(gòu)或者是思維導(dǎo)圖的方式，規(guī)劃頁面層級(jí)】

　　2.其次基于營(yíng)銷考慮：

　　在設(shè)計(jì)網(wǎng)站時(shí)，還要考慮到用戶旅程，模擬用戶進(jìn)入網(wǎng)站到完成目標(biāo)的完整路徑。根據(jù)用戶旅程，來優(yōu)化網(wǎng)站交互，減少操作復(fù)雜性。

　　在信息架構(gòu)階段，還需要考慮到是否采用響應(yīng)式設(shè)計(jì)，確保網(wǎng)站在多設(shè)備下都能完整良好顯示。在設(shè)計(jì)上，優(yōu)先考慮移動(dòng)設(shè)計(jì)，設(shè)計(jì)好小屏幕布局，再拓展到大屏幕。以我們行業(yè)來舉例，完成以上內(nèi)容，就完成了WordPress的搭建、菜單的設(shè)置。

　?、筮M(jìn)行視覺設(shè)計(jì)

　　這也是出問題最多的地方

　　視覺設(shè)計(jì)主要有四點(diǎn)：

　　一、色彩搭配

　　二、字體選擇

　　三、網(wǎng)站布局

　　四、視覺元素

　　下面我們?cè)敿?xì)說明

　　一、色彩搭配

　　1、首先確定色調(diào)（根據(jù)目標(biāo)受眾來選擇色調(diào)），一般使用1-2種主色調(diào)，2-3中輔助色，保持色彩對(duì)比度方便用戶閱讀。

　　2、參考品牌色及行業(yè)風(fēng)格（例如科技商務(wù)行業(yè)一般使用藍(lán)色、時(shí)尚行業(yè)一般采用黑白色）

　　二、字體選擇

　　1、選擇2-3種字體（采用襯線體和無襯線體搭配）

　　2、確保字體大小統(tǒng)一（例如標(biāo)題小三、正文16px、行距1.5倍等）

　　3、如出現(xiàn)中文，推薦使用思源字體

　　字體選擇原則：提升可讀性

　　三、網(wǎng)站布局

　　1、采用網(wǎng)格系統(tǒng)（960.gs）

　　2、保持頁面內(nèi)容對(duì)齊

　　3、增加留白，避免頁面過于擁擠，突出重點(diǎn)內(nèi)容

　　4、遵循F型或Z型閱讀模式，引導(dǎo)用戶視線

　　四、視覺元素

　　1、使用高質(zhì)量圖片或視頻，優(yōu)化加載速度（WebP格式）

　　2、添加微交互（頁面過渡變化動(dòng)畫、鼠標(biāo)移動(dòng)點(diǎn)擊動(dòng)畫）

　　3、保持一致性（圖標(biāo)、按鈕、圖像風(fēng)險(xiǎn)、面包屑導(dǎo)航、字體所有風(fēng)格統(tǒng)一）