今天無(wú)意之間在阿里巴巴論壇里面看到這篇文章，覺(jué)得對(duì)于設(shè)計(jì)師來(lái)說(shuō)很重要，特此分享！

大家都知道文件越大，用來(lái)下載和顯示頁(yè)面的時(shí)間就越長(zhǎng)。

不過(guò)請(qǐng)記住：文件總體積，指的是構(gòu)成Web頁(yè)面的所有文件，包括：HTML、外部CSS、外部JavaScript、圖像、聲音以及視頻在內(nèi)的文件的大小。在這些文件中，HTML、CSS、以及JavaScript文件只是文本文件，因此，常常相當(dāng)緊湊。而圖像、聲音，以及視頻文件通常都很大，存在下載問(wèn)題。

公共網(wǎng)站的頁(yè)面大小，從每頁(yè)小于20K到每頁(yè)大于100K（包括頁(yè)面的所有圖形文件）。究竟應(yīng)該有多大，即使是所謂的專(zhuān)家在這個(gè)問(wèn)題上，也普遍存在著分歧。如果你的網(wǎng)站需要專(zhuān)業(yè)品質(zhì)的圖形，那么就不可能遵守“20K定律”。但是，如果目標(biāo)受眾的Internet連接速度慢，或者目標(biāo)受眾的耐性有限，你就不得不放棄那令人難以抗拒的漂亮圖像，轉(zhuǎn)而遵守關(guān)于“20K定律”的限制。怎么樣為有限的文件體積做事先的規(guī)劃呢？

■把大部分的CSS和JavaScript文件放入外部文件。

只在網(wǎng)站第一次引用這些文件時(shí)，才進(jìn)行下載。之后，網(wǎng)站上任何頁(yè)面都可以重復(fù)使用這些文件，而無(wú)需再次下載。

■重復(fù)使用不同頁(yè)面的圖形、音頻和視頻。因?yàn)檫@些文件也是在第一次時(shí)，才進(jìn)行下載。

■不要使用不必要的圖形、動(dòng)畫(huà)或聲音。無(wú)論是出于實(shí)用性的考慮，還是為了增強(qiáng)網(wǎng)站的吸引力，每個(gè)文件都應(yīng)該有清楚的存在于網(wǎng)站上的理由。一個(gè)用于導(dǎo)航，大尺寸、具有吸引力的圖像映射，同時(shí)具備了實(shí)用和美觀兩種用途，就像待售產(chǎn)品的照片一樣。另一方面，應(yīng)該去掉那些只起到填充空白作用的圖形。

■在可能的情況下，使用小尺寸圖像，而不是大尺寸圖像。因?yàn)樵谄渌蛩叵嗤臈l件下，與大尺寸圖像相比，小尺寸圖像的下載速度更快。例如：你可能使用一個(gè)平鋪（重復(fù)）顯示在背景上的小尺寸圖像，代替單個(gè)的大尺寸背景圖像。

■盡量減少特殊導(dǎo)航按鈕，每個(gè)按鈕都具有獨(dú)特的措辭和翻轉(zhuǎn)效果，則需要下載100個(gè)不同的圖像。相反地，50個(gè)文本鏈接（具有CSS提供的翻轉(zhuǎn)效果），只需很小的下載代價(jià)。

做為技術(shù)出身的交互設(shè)計(jì)師，可以不斷探索新的技術(shù)帶來(lái)的變革(例如：html5)。無(wú)論何時(shí)，頁(yè)面打開(kāi)速度是給用戶(hù)的第一印象，也是提升用戶(hù)對(duì)網(wǎng)站滿(mǎn)意度的重要因素，并且前端代碼的優(yōu)化將會(huì)給用戶(hù)帶來(lái)舒適地操作體驗(yàn)！

用戶(hù)體驗(yàn)原則制定

在設(shè)計(jì)前我們要遵從一種通用性的用戶(hù)體驗(yàn)設(shè)計(jì)原則，在設(shè)計(jì)后我們要能總結(jié)歸納出只適合此產(chǎn)品的用戶(hù)體驗(yàn)規(guī)則。

概要一：設(shè)計(jì)前設(shè)計(jì)思路

1.以用戶(hù)為中心的設(shè)計(jì)：設(shè)計(jì)必須是滿(mǎn)足用戶(hù)需求的、可行的，其次才是可產(chǎn)生商業(yè)價(jià)值的。

2.操作入口明確：任何一個(gè)產(chǎn)品都要有明確、合理的入口。

3.不歧視特殊人群：色盲、肢體殘疾人士可以完成基本操作。

4.任務(wù)可被完成：任務(wù)在無(wú)外界影響下可以被完成。

5.問(wèn)題可被解決：用戶(hù)在任務(wù)中出現(xiàn)的問(wèn)題，在無(wú)外界影響下可以被解決。

6.簡(jiǎn)潔自然，清晰易懂：用簡(jiǎn)潔、自然、用戶(hù)可理解的形式表達(dá)信息。

7.突出重點(diǎn)，一目了然：用戶(hù)的第一關(guān)注，將是設(shè)計(jì)中要表達(dá)的重點(diǎn)信息。

8.導(dǎo)航明晰、有效：導(dǎo)航明確清晰、有效，分類(lèi)彼此獨(dú)立、完全窮盡。

9.避免迷路：任何位置都能明確“我在那里？這里有什么？從這里能去哪里？”。

10.深廣度平衡：?jiǎn)蝹€(gè)頁(yè)面上可見(jiàn)菜單項(xiàng)的數(shù)目與層級(jí)結(jié)構(gòu)中級(jí)別的數(shù)目平衡。

11.習(xí)慣延續(xù)，必要延伸：用戶(hù)的操作習(xí)慣必須延續(xù)，在用戶(hù)可接受的范圍之內(nèi)適當(dāng)延伸與引導(dǎo)。

12.符合用戶(hù)心智模型：用戶(hù)對(duì)功能的預(yù)期與實(shí)際操作的結(jié)果保持一致。

13.操作一致性：相同類(lèi)型的命令或操作產(chǎn)生同樣的效果。

14.及時(shí)、有效、友好：第一時(shí)間針對(duì)用戶(hù)的操作作出有效、友好的反應(yīng)。

15.避免出錯(cuò)：針對(duì)用戶(hù)可能出現(xiàn)的錯(cuò)誤，通過(guò)系統(tǒng)來(lái)避免錯(cuò)誤的發(fā)生。

16.一次點(diǎn)擊：盡可能減少完成任務(wù)所需要的操作次數(shù)。

17.別讓我思考：用戶(hù)的第一反應(yīng)所產(chǎn)生的操作正確、有效。

18.最小記憶負(fù)擔(dān)：避免用戶(hù)需要記憶5條以上的數(shù)據(jù)。

19.最簡(jiǎn)化：幫助信息精簡(jiǎn)，準(zhǔn)確描述，段落不超過(guò)3段，句子不超過(guò)30字。

20.適時(shí)幫助：當(dāng)用戶(hù)需要幫助的時(shí)候才提供幫助。

21.二倍、一個(gè)：方案設(shè)計(jì)數(shù)量增加兩倍或減少到單位數(shù)量時(shí)，仍可適用該設(shè)計(jì)方案。

22.以簡(jiǎn)化繁：盡量使用簡(jiǎn)單、原生的交互方式解決復(fù)雜的用戶(hù)交互行為。

23.符合柵格：頁(yè)面布局符合柵格系統(tǒng)標(biāo)準(zhǔn)。

24.符合標(biāo)準(zhǔn)設(shè)計(jì)模式：交互控件符合DPL設(shè)計(jì)模式標(biāo)準(zhǔn)。

概要二：設(shè)計(jì)后體驗(yàn)原則

1.啟發(fā)式交互：讓創(chuàng)新的界面具有教學(xué)功能。

2.速度第一：頁(yè)面打開(kāi)速度的重要意義已經(jīng)超過(guò)了某些頁(yè)面的普通功能。

3.即時(shí)有效：控件的反饋應(yīng)該是即時(shí)的，而不是讓用戶(hù)去無(wú)限等待。

4.少即是多：操作起來(lái)足夠的簡(jiǎn)單快速，頁(yè)面功能也很強(qiáng)大。

5.個(gè)性化操作：滿(mǎn)足交易型用戶(hù)的口味，也可以同時(shí)滿(mǎn)足瀏覽型用戶(hù)的操作習(xí)慣。

6.可發(fā)現(xiàn)性：讓一切應(yīng)該在那時(shí)間看到的元素，一目了然吧。

7.簡(jiǎn)潔性：應(yīng)用程序足夠的干凈，什么時(shí)候該出現(xiàn)，什么時(shí)候該消失，不給用戶(hù)帶來(lái)困擾。

8.差異化：這里的差異化指的是讓用戶(hù)能很容易辯識(shí)相同緯度的元素之間的差異，例如相關(guān)搜索的展示方式。

其實(shí)，在設(shè)計(jì)前，我們會(huì)參考大量的通用性設(shè)計(jì)原則；在設(shè)計(jì)后，我們才會(huì)發(fā)現(xiàn)：對(duì)于項(xiàng)目有針對(duì)意義的原則也就很少的幾條。這個(gè)時(shí)候需要靠設(shè)計(jì)師自己的邏輯歸納能力，把最重要最迫切的用戶(hù)體驗(yàn)設(shè)計(jì)原則抽象出來(lái)。所以請(qǐng)大家務(wù)必清楚這些。