UED用戶體驗設(shè)計規(guī)范解讀

1、UED用戶體驗設(shè)計規(guī)范全局設(shè)定布局什么是布局？“布局”是指頁面內(nèi)容的尺寸、間距及位置。有效的布局對于幫助用戶快速找到他們想要的內(nèi)容至關(guān)重要，并可以在結(jié)構(gòu)外觀上令用戶感到舒服。如何設(shè)計有效的布局？· 具有清晰的視覺層次：布局應當讓頁面各元素之間的關(guān)系和重要性一目了然。你可以通過適當使用下列屬性來實現(xiàn)視覺層次焦點：指用戶首先關(guān)注的區(qū)域。形式上被賦予焦點屬性的UI元素一定要表達重要的內(nèi)容。視覺流：指用戶關(guān)注區(qū)域的順序?？梢愿鶕?jù)任務邏輯和用戶的瀏覽習慣來設(shè)計恰當?shù)囊曈X流。好的視覺流應該清晰、合理、順暢、自然。關(guān)聯(lián)：在邏輯上相關(guān)的UI元素應具有清晰的視覺關(guān)系。錯誤：邏輯上相關(guān)的UI元素在空間上

2、被分隔，且沒有明顯的視覺關(guān)聯(lián)。對齊：使頁面工整，信息呈現(xiàn)有序，便于用戶掃視。錯誤：沒有對齊影響了頁面效果且不便于用戶掃視。不要因為功能需要和對極限情況的顧慮而輕易犧牲掉頁面的視覺展現(xiàn)。強調(diào)：可以根據(jù)UI元素間的相對重要程度進行強調(diào)。· 針對用戶的閱讀模式來設(shè)計布局：大部分人的閱讀習慣是從左向右，至上而下。閱讀分為沉浸式閱讀（immersive reading）和掃視（scanning），前者的目的在于理解，后者在于定位。瀏覽網(wǎng)站時，用戶不會沉浸在UI本身，而是沉浸在他們的目標任務中，因此掃視是最常使用的閱讀模式。用戶只在確信必要時才仔細閱讀大量文本。針對掃視的布局設(shè)計可以適當強調(diào)主要

3、的UI元素，弱化次要的。包括：1. 將主UI元素放在掃視路徑上。2. 避免將重要信息放在左下角或者頁面底端或者需要滾動很多的控件上。3. 考慮使用漸進展開方式來隱藏次要的UI元素。4. 將任務相關(guān)的重要信息要直接表現(xiàn)在控件上。用戶更傾向于關(guān)注交互控件上的標簽，而不是輔助型的靜態(tài)文本。錯誤：用戶必須閱讀輔助型文本后才能明確“確定”按鈕的作用。正確：直接將按鈕的作用描述作為控件標簽，便于用戶理解。不要展示大段文本，去除不必要的文本。多文本時格式化展示。注：常規(guī)模式也存在例外。眼動議實驗指出，真實用戶的行為很沒有規(guī)律。此模式的目的在于幫助你做出更好的決定，而不是精準的描述用戶行為。· 合理

4、利用頁面空間1. 保持頁面的視覺平衡。避免擁擠和對空間的浪費。2. 確保關(guān)鍵數(shù)據(jù)沒有被截斷，除非數(shù)據(jù)特別長。錯誤:有效空間沒有被充分利用，從而導致多條關(guān)鍵數(shù)據(jù)被截斷。3. 控件的尺寸和間距恰當，沒有不必要的滾動。一個任務盡量在一屏內(nèi)完成。4. 實際情況中，我們用戶的頁面空間要小于屏幕分辨率，它會因各種因素而壓縮，如：非全屏操作（彈出窗口和對比瀏覽），瀏覽器本身及各種輔助欄對屏幕的占用等，設(shè)計中要考慮這些情況。· 不要讓布局本身成為突出的UI元素，保持視覺簡潔（visual simplicity）1. 減少內(nèi)容和展現(xiàn)上的嵌套層級。2. 減少控件不同尺寸的數(shù)量，例如，在界面上只使用一兩種

5、按鈕寬度。3. 采用輕量級的分組和分割方式，可以用布局本身和分隔符代替分組框。4. 使用盡量少的對齊線。· 選擇與頁面類型相匹配的版式在設(shè)計之初，應充分考慮頁面承載的內(nèi)容、功能和屬性，繼而選擇適合該頁面的版式。不合適的版式會造成用戶的閱讀困擾，降低任務的完成效率。標準和規(guī)范· 柵格化我們所說的柵格化是指在網(wǎng)頁設(shè)計工作中對柵格系統(tǒng)的建立和應用。網(wǎng)頁柵格系統(tǒng)來源于平面柵格系統(tǒng)，它以規(guī)則的網(wǎng)格陣列來指導和規(guī)范網(wǎng)頁中的版面布局以及信息分布。柵格化可以使信息呈現(xiàn)工整簡潔、美觀易讀，降低頁面開發(fā)和運維成本。它結(jié)構(gòu)變化相對靈活，擴展性強。· 以8px為橫向柵格單位以8px為橫向

6、柵格單位，頁面所有元素寬度都可以是2的倍數(shù)，包括圖片和版塊寬度，這樣可以加快頁面（特別是對于J-PEG圖片）的渲染速度（基于計算機內(nèi)部二進制的運算機制）。在阿里巴巴中文站中，布局間距的最小單位為8px，布局區(qū)塊采用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實現(xiàn)的柵格系統(tǒng):32px:適用于市場、社區(qū)等相關(guān)頁面24px:適用于旺鋪相關(guān)頁面· 頁面定寬自適應可以根據(jù)瀏覽器顯示情況自動調(diào)整頁面寬度，但是因為用戶水平方向的聚焦范圍有限，所以當頁面過寬時，用戶的瀏覽和操作成本會增加；而當頁面過窄時（如用戶同時開啟兩個瀏覽器對比查看商品搜索結(jié)果），自適應則會導致布局

7、變形和內(nèi)容錯亂。給頁面規(guī)定寬度可以避免這些問題。在綜合考慮當下主流分辨率情況、瀏覽器外觀對顯示空間的占用、人機工程學中對水平視角和聚焦范圍的規(guī)定以及8px單位等多種因素后，我們認為960px是一個相對更加合理的頁面寬度。在阿里巴巴中文網(wǎng)站中，推薦使用定寬960px的頁面，去除左右各4px的邊距，中間的可視寬度為952px。全局設(shè)定布局模版下載for axurefor psAxure 柵格模板使用說明：1. 新建項目文件，載入Axure柵格模板，選擇適合的柵格系統(tǒng)（32或24）。系統(tǒng)內(nèi)已附帶對應的柵格背景及常用版式。2. 載入PS柵格模板，選擇對應的柵格圖層（32或24）并拖動至設(shè)計稿圖層組之上

8、，校驗并調(diào)整尺寸精度。3. 保持柵格圖層可見，以psd格式交付。這樣便于前端開發(fā)工程師快速計算和準確定位，提高工作效率。PS柵格模板使用說明:1. 視覺設(shè)計師基于交互原型完成視覺設(shè)計稿，新建設(shè)計稿圖層組包含所有圖層。2. 在需要的版式的基礎(chǔ)上進行設(shè)計，形成具有柵格化布局的交互原型3. 保留柵格背景，無論是在展示原型還是在交付物中。這樣便于視覺設(shè)計工作的開展。代碼使用說明:grid-32柵格系統(tǒng)（適用于市場及社區(qū)相關(guān)頁面）， class：.layout-p32a241、grid-32柵格系統(tǒng)可構(gòu)建的布局大小(紅色部分為已選用的區(qū)塊大小)class =.grid-1.grid-2.grid-3.g

9、rid-4.grid-5.grid-6.grid-7.grid-8.grid-9.grid-10.grid-11.grid-12W(px) =3272112152192232272312352392432472class =.grid-13.grid-14.grid-15.grid-16.grid-17.grid-18.grid-19.grid-20.grid-21.grid-22.grid-23.grid-24W(px) =5125525926326727127527928328729129522、中文站基于grid-32的布局,使用與市場和社區(qū)的相關(guān)頁面：312px (.grid-8)31

10、2px (.grid-8)312px (.grid-8)632px (.grid-16)312px (.grid-8)232px (.grid-6)232px (.grid-6)232px (.grid-6)232px (.grid-6)712px (.grid-18)232px (.grid-6)352px (.grid-9)352px (.grid-9)232px (.grid-6)232px (.grid-6)472px (.grid-12)232px (.grid-6)472px (.grid-12)472px (.grid-12)152px (.grid-4)792px (.grid

11、-20)152px (.grid-4)552px (.grid-14)232px (.grid-6)3、grid-32柵格系統(tǒng)代碼示例-注意：使用時必須包含 樣式文件兩欄式/ 兩欄式demo:/ 'import css file url:< div class='layout-p32a24' >< div class='grid-16' >632px(.grid-16)< /div>< div class='grid-8' 'grid-fixed' >312px(.grid-

12、8)< /div>< /div >三欄式/ 三欄式demo:/ 'import css file url:< div class='layout-p32a24' >< div class='grid-8' >312px(.grid-8)< /div>< div class='grid-8' >312px(.grid-8)< /div>< div class='grid-8' 'grid-fixed' >312px

13、(.grid-8)< /div>< /div >grid-24柵格系統(tǒng)（適用于旺鋪相關(guān)頁面）， class：.layout-p24a301、grid-24柵格系統(tǒng)可構(gòu)建的布局大小(紅色部分為已選用的區(qū)塊大小)class =.grid-1.grid-2.grid-3.grid-4.grid-5.grid-6.grid-7.grid-8.grid-9.grid-10.grid-11.grid-12.grid-13.grid-14.grid-15W(px) =245688120152184216248280312344376408440472class =.grid-16.g

14、rid-17.grid-18.grid-19.grid-20.grid-21.grid-22.grid-23.grid-24.grid-25.grid-26.grid-27.grid-28.grid-29.grid-30W(px) =5045365686006326646967287607928248568889209522、中文站基于grid-24的布局系統(tǒng)，適用于旺鋪相關(guān)頁面：184px (.grid-6)760px (.grid-24)760px (.grid-24)184px (.grid-6)376px (.grid-12)568px (.grid-18)568px (.grid-1

15、8)376px (.grid-12)472px (.grid-15)472px (.grid-15)184px (.grid-6)184px (.grid-6)568px (.grid-18)184px (.grid-6)568px (.grid-18)184px (.grid-6)568px (.grid-18)184px (.grid-6)184px (.grid-6)184px (.grid-6)376px (.grid-12)376px (.grid-12)376px (.grid-12)376px (.grid-12)184px (.grid-6)3、grid-24柵格系統(tǒng)代碼示例-

16、注意：使用時必須包含 樣式文件兩欄式/ 兩欄式demo:/ 'import css file url:< div class='layout-p24a30' >< div class='grid-6' >184px(.grid-6)< /div>< div class='grid-24' 'grid-fixed' >760px(.grid-24)< /div>< /div >三欄式/ 三欄式demo:/ 'import css file url

17、:< div class='layout-p24a30' >< div class='grid-8' >312px(.grid-8)< /div>< div class='grid-8' >312px(.grid-8)< /div>< div class='grid-8' 'grid-fixed' >312px(.grid-8)< /div>< /div >全局設(shè)定字體什么是字體？“字體”是指字型（typeface），大

18、?。╯ize）及輔助屬性的總體描述。如何正確的使用字體？· 1. 選擇合適的字型：在阿里巴巴中文站中，采用兩種中文字型和一種英文（含數(shù)字）字型：中文字型：宋體 應用于一般文字。黑體 應用于標題或需要引起注意的文字。不宜大量排布。英文字型：Tahoma / Helvetica / Arial。（優(yōu)先級從左到右，具體顯示由用戶系統(tǒng)支持情況而定）注1：字型分為襯線與非襯線兩種（襯線又稱字角，是指在字體筆劃末端的小轉(zhuǎn)角）。在傳統(tǒng)文本印刷中，正文文本多采用襯線字型，因為襯線能便于識別印刷油墨不明顯的情況，并且使文字看起來更加典雅和正式；但在網(wǎng)頁UI中，由于對清晰外觀的需求以及計算機顯示器的低分

19、辨率，非襯線字型則是更好的選擇。注2：對計算機顯示器來說，宋體在14px大小及以下，可以看成是非襯線字型。· 2. 注意文字的大小和行高：增強文字與周圍元素的對比（包括大小對比等多種對比方式）可以使文字本身更加突出、更加易于識別；適當增加文字的大小（擴大可視與操作面積），可以更方便用戶進行閱讀與點擊。但文字不是越大越好，要考慮頁面的整體布局以及單位面積的信息顯示效率。在阿里巴巴中文站中，盡量不使用超過20px的文字。若必須超過20px，則需采用抗鋸齒處理；如果該文字是按鈕標簽，則應當與按鈕背景一起做成圖片。阿里巴巴中文站中常見的字體大小及其主要的應用場景如下表：文字大小應用場景12p

20、x信息結(jié)構(gòu)中層次較低的內(nèi)容當頁面單位面積信息顯示效率較高時14px信息結(jié)構(gòu)中層次較高的內(nèi)容(導航、索引、標題等)需要被強調(diào)的重要信息或控件標簽閱讀型頁面中段落文本的正文16px新聞頭條和焦點信息對用戶來說最重要或最值得關(guān)注的關(guān)鍵信息20px閱讀型頁面中段落文本的標題關(guān)鍵任務中主按鈕的標簽(可以文字也可以圖片化)設(shè)計軟件中常提到的文字大小單位有三種，分別是像素（px）、點（point）、字號，它們的數(shù)值對應關(guān)系如下（以網(wǎng)站常見的字體大小為例）像素（px）點（point）字號129小五1410.5五號1612小四2015小三行高是指文本所在行上下邊界之間的距離。通常情況下，行高大于字體高度。注：常

21、規(guī)模式也存在例外。眼動議實驗指出，真實用戶的行為很沒有規(guī)律。此模式的目的在于幫助你做出更好的決定，而不是精準的描述用戶行為。增加段落本文的行高可以擴大行與行之間的距離，從而增強橫向瀏覽的引導；但行高不宜過大，過大會浪費屏幕空間降低顯示效率。在阿里巴巴中文站中，推薦使用的行高是文字高度的150%和180%。手動排布的文本列表也建議采用此比例。常用于段落和列表文本的文字大小是12px和14px，他們對應的兩種行高數(shù)值如下表：文字大小行高150% 行高180%12px18px22px14px21px26px· 3. 恰當?shù)膽幂o助屬性：粗體：用于控件標簽和重要文字，以使文本突出易讀。保守使

22、用能增加對比，將用戶的注意力吸引到那些必須閱讀的文本上。使用過多會削弱其作用。斜體：不使用。粗斜體：不使用。下劃線：只限于連接。盡量不要在鏈接以外的地方使用下劃線。鼠標指針：I字型鼠標指針表明該文本是可以選中的，而常規(guī)鼠標指針則表明文本不能被選中。插入符：插入符是閃爍的豎直線，在文本具有輸入焦點時表明可選擇或可編輯文本的插入/選擇位置。文字顏色：淺灰色表示該文本是禁用的。特殊色，尤其是藍色，表示該文本是連接。背景色：淺灰色可暗示文本的只讀性，但一般情況下不推薦使用。全局設(shè)定顏色設(shè)計理念有效使用顏色能夠使用戶界面更加高效。顏色可以幫助用戶瞬間理解特定的含義。顏色也能夠使網(wǎng)站界面看起來更加美觀和精

23、致。顏色是如何被使用的顏色通常在用戶界面中用于表達：含義：信息的含義可以通過顏色來表達。例如，紅色表示發(fā)生問題或錯誤，黃色表示注意或警告，綠色表示良好。狀態(tài)：對象的狀態(tài)可以通過顏色來指示。例如網(wǎng)頁上的鏈接使用藍色表示未訪問，紫色表示已訪問。區(qū)別：人們認為具有相同顏色的條目之間具有某種聯(lián)系，因此顏色編碼是區(qū)別對象的有效方式。強調(diào)：顏色可以用于引起用戶的關(guān)注。設(shè)計指南不要將顏色用作主要的溝通方式,而是作為輔助方式對要表達的意思進行視覺加強。盡可能選擇合適的顏色，這么做能夠始終尊重用戶的色彩偏好。根據(jù)用途選擇顏色前景色與背景色保證清晰可辨。信息結(jié)構(gòu)及產(chǎn)品主色系色盤1.核心色彩 #ff730

24、0 H：27 S：100 B：100 橙ff7300位于色盤紅和黃之間，色彩明亮，代表了繁榮、快樂、激情。每個產(chǎn)品都必須體現(xiàn)#ff7300的色彩元素2.品牌相關(guān)適用：此色條可用在需要體現(xiàn)阿里品牌和核心業(yè)務相關(guān)的設(shè)計中規(guī)范：左側(cè)兩列適合文字/廣告/推廣頁面的色彩運用，不建議作為產(chǎn)品背景色的大面積使用； 從第三列往右的淺色區(qū)域可以作為產(chǎn)品背景色的運用3.中立色彩適用：所有產(chǎn)品都可運用，具體文字顏色使用規(guī)則請參照“顏色使用方法”規(guī)范：除上述灰色外，不應適用其它灰色4.頁面用色體系規(guī)范：各產(chǎn)品在體現(xiàn)自身產(chǎn)品色系的基礎(chǔ)上,必須有一定面積的橙色搭配,以體現(xiàn)阿里個性色彩搭配推薦全局設(shè)定顏色 顏色示

25、例使用說明對應class名基本鏈接色#003278最基本鏈接顏色color-base, color-base-h可擴展鏈接色1#666666網(wǎng)頁設(shè)計的趨勢，可試驗性使用該顏色，體現(xiàn)沉穩(wěn)、大氣color-extend1, color-extend1-h可擴展鏈接色2#0066cc建議應用于互動型產(chǎn)品color-extend2, color-extend2-h輔助說明色1#999999應用于時間、ID、筆名、數(shù)字等的輔助性說明color-assist1, color-assist1-h輔助說明色2#c1c1c1功能同上，視頁面實際情況選擇深淺有差異的灰色color-assist2, color-a

26、ssist2-h強調(diào)色、鏈接hover色#ff7300用于對文本的強調(diào)；任何鏈接的hover顏色均統(tǒng)一為#ff7300color-emp, color-emp-h正文色#000000用于閱讀型頁面中段落文本的正文，如資訊detailcolor-sub, color-sub-h注1：原則上請設(shè)計師優(yōu)先考慮上述文本鏈接色，可以節(jié)省前端開發(fā)成本。如無法滿足該頁面色彩設(shè)計需求，可采用與該頁面或區(qū)塊主體的近似色作為文本鏈接色，前端配合重新書寫CSS。注2：顏色對應的css有兩種，如color-assist2和color-assist2-h。兩者區(qū)別在于在對a鏈接使用顏色時前者不改變原頁面設(shè)置的hover

27、顏色屬性（比如目前首頁的ff7300保持不變），而后者將hover狀態(tài)時的a鏈接的顏色也改成自身的顏色（此時鼠標hover是鏈接顏色不變）全局設(shè)定文案&語氣什么是文案&語氣？這里所說的“文案”是顯示在用戶界面上的文本，包括控件標簽以及用于向用戶提供詳細說明或解釋的靜態(tài)文本。“語氣”是用戶界面?zhèn)鬟_給用戶的一種態(tài)度，是為了給用戶（閱讀者）某種特定的回應或情感而設(shè)計的。好的語氣所體現(xiàn)的個性能夠促使用戶積極參與界面交互，反之則會使用戶感到反感。在阿里巴巴中文站中，以準確的、清晰、簡潔、鼓勵式的、關(guān)注用戶的文案語氣方式與用戶進行個人和任務層面的溝通。不要使用隨意的、有歧義的、重復的文案，

28、不要使用居高臨下的或傲慢的語氣。避免極端的“機器式”語言和“推銷式”語言。如何設(shè)計好文案和語氣？1.表意準確。選用含義明確的字詞，避免讓用戶產(chǎn)生混淆，避免歧義。如果信息在技術(shù)上是準確的，用戶則會覺得安心。如果信息不準確，則會破壞用戶在該任務中的體驗，而且，用戶會對從那里得來的任何其他文本信息都沒有信心。2.清晰、簡潔。為用戶的掃視習慣設(shè)計文本，控制句子長度，避免重復，不要過度溝通。簡明扼要的句子（和段落）不但節(jié)約了屏幕空間，而且是表示某概念或操作“非常重要”的最有效的手段。盡你所能進行評判和優(yōu)化，使句子更加緊湊，但不至于讓人覺得唐突或不友善。3.易于理解。盡可能使用簡短平實的字詞，避免那些你不

29、會在平日里使用的字詞。不要發(fā)明新詞或給普通的詞賦予另類的含義（特殊的宣傳需求除外）。避免使用方言和俚語。避免極端的“機器式”的語言和“推銷式”的語言。4.保持一致性。包括稱謂、專用名詞、數(shù)據(jù)格式和標點規(guī)則等。統(tǒng)一的術(shù)語能夠幫助更好的學習和理解技術(shù)概念。不一致的術(shù)語則會迫使用戶去研究不同的用詞與操作是否表示的是同一種含義；統(tǒng)一的語法可以幫助設(shè)定用戶的期望，培養(yǎng)用戶閱讀和理解習慣；在同類描述中，需要使用平行的語法結(jié)構(gòu)，如“音樂”和“視頻”，“收聽”和“觀看”，而不要使用“音樂”和“觀看”。5.尊重、支持、鼓勵。界面語言應當傳達的是界面使用戶能夠做什么，而不是界面允許用戶做什么。用戶絕不應感到被牽就

30、、被責備或被脅迫。不要使用居高臨下或傲慢的語氣。在任何情況下都不應責備用戶。當且僅當對用戶來說出現(xiàn)非常嚴重的問題時，才在錯誤信息中使用“抱歉（對不起）”字樣，如果問題發(fā)生在正常的功能執(zhí)行過程中（例如，用戶需要等待頁面下載），則無須道歉。產(chǎn)品文案規(guī)范短語詞組：1.描述性短語：目的：指示并引導用戶；類型：經(jīng)常用于標簽、導航、版塊標題、菜單、類目、字段定義和產(chǎn)品名稱；文案要求：準確：即能揭示功用；精練：一般由2-6個漢字組成。最多不能超過6個漢字基本結(jié)構(gòu)：常使用名詞，短語結(jié)構(gòu)名詞。示例：2.動作性短語：目的：引導用戶產(chǎn)生某種行為；類型：常用于BUTTON或鏈接動作引導; 文案要求：動作性強；準確：揭

31、示功用；精練：一般用2-4個漢字；基本結(jié)構(gòu)：動詞或動賓結(jié)構(gòu)短語；示例：句子：1.引導類句子：目的：引導用戶產(chǎn)生某種行為；類型：常使用祈使句，用“請”字開頭;文案要求：簡潔，目的性強，“請”后面直接加某種動作基本結(jié)構(gòu)：“請”+動詞+名詞。示例：2.描述類句子：目的：補充說明；類型：產(chǎn)生某種行為的利益點描述; 文案要求：用一句話直接說明最直接的利益點示例：3.通知類句子：目的：向用戶告知有關(guān)事項和情況；基本結(jié)構(gòu)：標題+正文,標題：一般使用“重要通知”或“重要提醒”；正文：事由+通告事項+落款；文案要求：語言平實簡潔，目的性強，一般不要超過兩行文字，如果有很多意思要表述，用分行斷句的形式示例：4.提

32、示類句子：目的：提示用戶操作成功或失?。换窘Y(jié)構(gòu)：禮貌用語+正文+動作禮貌用語：一般使用“您好”、“對不起”或“恭喜”等；正文：操作結(jié)果，直接告知用戶成功or失敗；文案要求：尊重用戶，直接提示，目的性強，盡量一句話說明白。示例：常見問題及舉例1.錯字、別字：· 登陸/登錄： 正確用法登錄登陸渡過海洋或江河登上陸地。比喻商品打入某地市場。如：這種新型空調(diào)已經(jīng)在上海市場登陸登錄登記。注冊。電子計算機網(wǎng)絡(luò)用語，指進入要訪問的站點。· 帳戶/賬戶：正確用法賬戶一次漢語語法修訂中將“帳戶”這個用法給取消了。最新版的現(xiàn)代漢語詞典（它反映國家的語言文字政策）在“帳”的釋義里注明：同“賬”。 但不在“帳”下收列與“賬”有關(guān)的詞。 就是說， “帳”也可用作“賬”字的通假字，你還可以用“帳戶” ，但推薦使用“賬戶” · 預定/預訂、訂單/定單、制定/制訂：正確用法完全確定用“定”，不確定可修改用“訂”意思基本相同，但在法律文本上有差別。 定意為定下來，不會輕易改動，訂為雖然成形，但可能有待改動2.文