簡(jiǎn)化你的網(wǎng)頁(yè)設(shè)計(jì)

本教程教你如何簡(jiǎn)化網(wǎng)頁(yè)設(shè)計(jì)，以提高網(wǎng)頁(yè)設(shè)計(jì)的“效力”，同時(shí)節(jié)省設(shè)計(jì)和維護(hù)的時(shí)間。涉及到提高網(wǎng)頁(yè)內(nèi)容的可讀性、簡(jiǎn)化界面設(shè)計(jì)、優(yōu)化代碼、降低維護(hù)需求等。

在設(shè)計(jì)領(lǐng)域中，很多人都認(rèn)同應(yīng)該簡(jiǎn)化設(shè)計(jì)，以便讓相應(yīng)的工作更好發(fā)揮作用，設(shè)計(jì)只是增強(qiáng)視覺(jué)的手段。

隨著網(wǎng)站建設(shè)技術(shù)的發(fā)展，在網(wǎng)頁(yè)中實(shí)現(xiàn)復(fù)雜的功能不再是難事，網(wǎng)頁(yè)中功能越來(lái)愈多，因此要在用戶(hù)的瀏覽體驗(yàn)和網(wǎng)頁(yè)設(shè)計(jì)的美觀性中取得一個(gè)平衡點(diǎn)就顯得非常重要。

網(wǎng)頁(yè)設(shè)計(jì)的簡(jiǎn)化法

不同人對(duì)網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)化法會(huì)有不同的定義。一個(gè)簡(jiǎn)單的定義是將復(fù)雜的東西濃縮簡(jiǎn)化成簡(jiǎn)單的東西，當(dāng)然在簡(jiǎn)化的同時(shí)，不能丟掉有價(jià)值的東西?？偠灾?，如果你的網(wǎng)頁(yè)設(shè)計(jì)很臃腫龐大，最好去精簡(jiǎn)它。

在具體的網(wǎng)頁(yè)設(shè)計(jì)中，可能是將網(wǎng)站分成幾個(gè)部分，并使它們模塊化。將復(fù)雜的東西分成幾個(gè)模塊，可以方便地組織這些內(nèi)容并使后期的維護(hù)工作更加輕松。

簡(jiǎn)化網(wǎng)頁(yè)設(shè)計(jì)意味著精簡(jiǎn)網(wǎng)頁(yè)，把網(wǎng)頁(yè)最重要的東西保留下來(lái)，這不僅方便用戶(hù)獲取最重要的內(nèi)容，也可以讓我們清楚自身的產(chǎn)品，以便制定相應(yīng)的計(jì)劃。在實(shí)踐中，這樣還節(jié)省了時(shí)間和金錢(qián)。

關(guān)于用戶(hù)體驗(yàn)

我們會(huì)花很多時(shí)間去策劃網(wǎng)站相應(yīng)功能，做出用戶(hù)需要或者可能需要的各種功能，但是有時(shí)候往往事與愿違，最終網(wǎng)頁(yè)設(shè)計(jì)變得臃腫龐大。

網(wǎng)頁(yè)設(shè)計(jì)時(shí)，應(yīng)該只提供給用戶(hù)最需要的功能，如果花很多時(shí)間在一些沒(méi)什么人用得到的功能、內(nèi)容上，開(kāi)發(fā)一些僅僅是潛在需要的功能，這樣用戶(hù)的體驗(yàn)會(huì)很糟糕。

簡(jiǎn)化網(wǎng)頁(yè)設(shè)計(jì)的方法

在網(wǎng)頁(yè)設(shè)計(jì)中，要簡(jiǎn)化三個(gè)主要的地方

1. 網(wǎng)頁(yè)內(nèi)容
2. 代碼
3. 設(shè)計(jì)

不論你在精簡(jiǎn)網(wǎng)頁(yè)內(nèi)容、代碼還是網(wǎng)頁(yè)的設(shè)計(jì)時(shí)，記住一個(gè)關(guān)鍵點(diǎn)：保留下來(lái)的東西一定要確保對(duì)用戶(hù)來(lái)說(shuō)是最重要啊。

用戶(hù)不喜歡在瀏覽網(wǎng)頁(yè)中，被混淆或者感覺(jué)到對(duì)網(wǎng)頁(yè)失去控制。讓他們把更多的時(shí)間花在閱讀主要內(nèi)容上，界面設(shè)計(jì)上要讓他們方便找到自己需要的東西。

網(wǎng)站的質(zhì)量比數(shù)量更為重要，擁有100個(gè)功能還不如一兩個(gè)非常實(shí)用的功能。

1.簡(jiǎn)化網(wǎng)頁(yè)內(nèi)容

簡(jiǎn)化網(wǎng)頁(yè)內(nèi)容有很多方法，最簡(jiǎn)單實(shí)用就是像用戶(hù)一樣去閱讀，減少字?jǐn)?shù)、去掉不相關(guān)的內(nèi)容、并刪掉一些專(zhuān)業(yè)術(shù)語(yǔ)和沒(méi)有什么價(jià)值的內(nèi)容。

• 追求網(wǎng)頁(yè)內(nèi)容的質(zhì)量而不是數(shù)量
• 用簡(jiǎn)潔明了的話(huà)去描述
• 避免專(zhuān)業(yè)術(shù)語(yǔ)和技術(shù)性語(yǔ)言
• 從用戶(hù)的角度來(lái)書(shū)寫(xiě)內(nèi)容
• 適當(dāng)使用一些圖片來(lái)減少文字?jǐn)?shù)量
• 使用標(biāo)題來(lái)組織文字內(nèi)容
• 用列表方式（list）來(lái)使文字更容易閱讀

當(dāng)然網(wǎng)頁(yè)的內(nèi)容不僅僅包括文字，也包含圖像或者一些視覺(jué)效果的圖片。使用圖片更重要的是，這些圖片可以幫助你傳達(dá)相應(yīng)信息，減少相應(yīng)的文字描述，因此在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，要適當(dāng)精簡(jiǎn)掉一些沒(méi)有實(shí)際內(nèi)容、只是為了視覺(jué)美觀的圖片。

2.簡(jiǎn)化網(wǎng)頁(yè)代碼

簡(jiǎn)化網(wǎng)頁(yè)的代碼涉及到了建設(shè)網(wǎng)站的技術(shù)問(wèn)題，簡(jiǎn)化代碼也可以提高網(wǎng)站的訪問(wèn)速度。

簡(jiǎn)化網(wǎng)頁(yè)代碼一方面是簡(jiǎn)化代碼的書(shū)寫(xiě)方式，這需要程序員良好的書(shū)寫(xiě)習(xí)慣和清晰的思路。

另一方面是選擇相應(yīng)的代碼，例如一個(gè)鼠標(biāo)懸停的效果，如果可以用css來(lái)實(shí)現(xiàn)，就沒(méi)有必要使用Flash或者Javascript。

• 開(kāi)發(fā)之前做好周密的計(jì)劃
• 頻繁測(cè)試代碼并減少代碼的冗余
• 選擇可以用最少代碼實(shí)現(xiàn)功能的方法
• 花些時(shí)間做些測(cè)試實(shí)驗(yàn)，看是否能精簡(jiǎn)結(jié)構(gòu)
• 用精簡(jiǎn)工具來(lái)減少代碼文件的尺寸
• 如果可以盡量用原始代碼而非插件（如JS的jquery）

3.簡(jiǎn)化網(wǎng)頁(yè)設(shè)計(jì)

簡(jiǎn)化網(wǎng)頁(yè)設(shè)計(jì)可以從網(wǎng)頁(yè)的簡(jiǎn)潔性、可讀性和網(wǎng)頁(yè)要突出的重點(diǎn)來(lái)入手。

我們應(yīng)該適當(dāng)去掉一些沒(méi)有必要的設(shè)計(jì)元素，至少做到整個(gè)網(wǎng)頁(yè)設(shè)計(jì)不會(huì)去干擾用戶(hù)的閱讀。

• 一般而言，如果你懷疑某些網(wǎng)頁(yè)上設(shè)計(jì)元素是否有必要，那你就可以去掉它。
• 設(shè)計(jì)上，減少用戶(hù)找到需要的內(nèi)容的鼠標(biāo)移動(dòng)和點(diǎn)擊
• 留出一些空白，避免網(wǎng)頁(yè)設(shè)計(jì)過(guò)于臃腫
• 不要使用一些不需要的底紋或者小組件
• 去掉一些設(shè)計(jì)元素以精簡(jiǎn)掉不相關(guān)的內(nèi)容