000蘇寧UED交互規(guī)范(第一講)

1、交互規(guī)范講解交互規(guī)范講解姓名：肖嘯秋姓名：肖嘯秋工號：工號：13076775 tel互規(guī)范講解交互規(guī)范講解框架框架組件組件元素元素其他其他1234框架框架交互規(guī)范講解交互規(guī)范講解框架框架組件組件元素元素其他其他1234框架框架框架框架標準頭部框架板式布局登錄注冊標準尾部SOP的標準頭部分為前臺和后臺全站尾部只有兩種“整尾”和“簡尾”界定進入登錄注冊界定進入登錄注冊“頁面頁面”和和“彈出窗口彈出窗口”的規(guī)則；登錄之后的著陸頁的規(guī)則；登錄之后的著陸頁;點擊點擊“退出退出”之之后的著陸頁后的著陸頁瀏覽型頁面寬度為瀏覽型頁面寬度為1200/1000px（寬窄兩版），（寬窄兩版

2、），操作型頁面寬度操作型頁面寬度1000px板式布局WHAT？什么是布局設計？網(wǎng)頁上，將圖片、文字、控件按照一定的 規(guī)律規(guī)律 進行排列組合設計的對象是（圖片、文字、控件）設計的目的是（有效的傳遞信息、滿足審美需求）1200PX寬版1000PX窄版（開放平臺）1200px布局，有效像素1190px，對應寬屏場景板式布局1000px布局，有效像素990px，對應窄屏場景一欄布局兩欄布局兩欄布局兩欄布局三欄布局三欄布局1190PX190PX990PX240PX940PX190PX990PX190PX690PX290PX240PX190PX740PX一欄布局兩欄布局兩欄布局兩欄布局兩欄布局三欄布局99

3、0PX790PX840PX740PX790PX190PX290PX490PX190PX140PX240PX190PX標準頭部開放平臺前臺標準頭部一定要標注是引用的是前臺還是后臺的標頭標準頭部開放平臺后臺標準頭部一定要標注是引用的是前臺還是后臺的標頭標準尾部開放平臺前臺標準頭部一定要標注是引用哪個平臺的尾部登陸注冊快速彈出窗口：快速彈出窗口：在瀏覽瀏覽/購物流程購物流程中，需要進行登錄的操作（如“我要曬單”） 登錄之后的著陸頁：登錄頁面成功后應跳轉到登錄之前的頁面（從A頁來落地到A頁） “退出”之后的著陸頁：用戶退出賬號后應跳轉至”登錄頁面“ 鏈接到頁面：鏈接到頁面：1.明確寫著“登錄、注冊登錄

4、、注冊”字樣的鏈接到頁面 2. “頂部工具條（如我的易購）頂部工具條（如我的易購）”及“首頁有快捷入口的功首頁有快捷入口的功能（如：首頁豆腐塊充值區(qū)域）能（如：首頁豆腐塊充值區(qū)域）”需要使用登錄功能鏈接到頁面。 框架框架組件組件元素元素其他其他1234組件組件交互規(guī)范講解交互規(guī)范講解框架框架組件組件輸入框單選框復選框列表框按鈕進度條標簽頁翻頁彈出框提示表格按鈕輸入框（輸入框（Text fields）輸入框用于顯示，輸入，或編輯文本和數(shù)值，根據(jù)功能需求，可以對框內(nèi)輸入內(nèi)容輸入框用于顯示，輸入，或編輯文本和數(shù)值，根據(jù)功能需求，可以對框內(nèi)輸入內(nèi)容進行限制。進行限制。輸入框分為輸入框分為3種類型，數(shù)據(jù)

5、輸入、格式化數(shù)據(jù)輸入、文本輸入，現(xiàn)有輸入框尺寸為種類型，數(shù)據(jù)輸入、格式化數(shù)據(jù)輸入、文本輸入，現(xiàn)有輸入框尺寸為22/26/30/36/40px（一般固定高度，長度根據(jù)字段長度來定）（一般固定高度，長度根據(jù)字段長度來定）輸入框（輸入框（Text fields）登錄框登錄框字號：字號：14px文字居左：文字居左：10px登錄登錄注冊注冊頁頁字號：字號：14px文字居左：文字居左：10px表單登錄注冊頁表單登錄注冊頁字號：字號：12px文字居左：文字居左：5px表單表單字號：字號：12px文字居左：文字居左：5px0/200多多行文本框行文本框字號：字號：12px文字居左：文字居左：5px輸入框（輸入

6、框（Text fields）必須執(zhí)行：1.如果需要填寫的數(shù)據(jù)有限制，需要設定好輸入框的長度或者可以輸入的字符類型 2.輸入框可以在未輸入時默認展示提示信息輸入框可以在未輸入時默認展示提示信息 輸入框（輸入框（Text fields）單選框（單選框（Radio）定義定義單選按鈕用于用戶選擇一組相關但是互斥的選項。用戶僅能在一組選項單選按鈕用于用戶選擇一組相關但是互斥的選項。用戶僅能在一組選項里選擇一個選項里選擇一個選項組成元素組成元素單選框（單選框（Radio）設計原則必須執(zhí)行：1.選項需要按照一定的邏輯順序排列 2.點擊選項內(nèi)容也應該觸發(fā)選擇（適當擴大點選區(qū)域）點擊選項內(nèi)容也應該觸發(fā)選擇（適當

7、擴大點選區(qū)域） 3.幾組單選項之間應有明確的間隔和歸屬關系幾組單選項之間應有明確的間隔和歸屬關系 4.選項一般為選項一般為2-9個，多余個，多余9個建議使用下拉列表，以節(jié)省頁面空間個建議使用下拉列表，以節(jié)省頁面空間 5.不要使用單選框來進行開關操作，應使用復選框。單選框為必選項，復選框不要使用單選框來進行開關操作，應使用復選框。單選框為必選項，復選框選擇的自由度更高選擇的自由度更高 單選框（單選框（Radio）單選單選框和字符之間的間隔框和字符之間的間隔要大于或者等于要大于或者等于5PX復選框（復選框（Checkbox ）定義復選框用于在一個或一組有清晰差別的選項中進行選擇，選項之間獨立，且不

8、相互影響組成元素組成元素復選框（復選框（Checkbox ）設計原則必須執(zhí)行：1.選項需要按照一定的邏輯順序排列 2.點擊選項內(nèi)容也應該觸發(fā)選擇（適當擴大點選區(qū)域） 3.當選項較多時，應為用戶提供全選的功能 列表框（列表框（Select）設計原則必須執(zhí)行：1.選項需要按照一定的邏輯順序排列（如數(shù)字排序，選項的級別大小等） 2.選項過多時，需要使用滾動條選項過多時，需要使用滾動條 列表框（列表框（Select）按鈕（按鈕（Button）定義定義按鈕，是基本輸入控件之一，一般為類似矩形的形狀，按鈕，是基本輸入控件之一，一般為類似矩形的形狀，并在視覺上呈現(xiàn)可以點擊的樣式。用戶通過點擊不同并在視覺上呈

9、現(xiàn)可以點擊的樣式。用戶通過點擊不同的按鈕，網(wǎng)站可以獲取用戶的目標并提供相應反饋的的按鈕，網(wǎng)站可以獲取用戶的目標并提供相應反饋的交互方式。本規(guī)范定義范圍的是用戶看起來像是按鈕交互方式。本規(guī)范定義范圍的是用戶看起來像是按鈕的功能，也包括前端的的功能，也包括前端的A標簽模擬按鈕。蘇寧易購按標簽模擬按鈕。蘇寧易購按鈕分為一級按鈕、二級按鈕、三級按鈕鈕分為一級按鈕、二級按鈕、三級按鈕 按鈕（按鈕（Button）前提條件前提條件1.用于觸發(fā)功能的控件用于觸發(fā)功能的控件2.個別亟需突出的跳轉鏈接個別亟需突出的跳轉鏈接設計原則設計原則（必須執(zhí)行）：1.按鈕被點擊后，如需用戶等待，則必須提按鈕被點擊后，如需用戶

10、等待，則必須提供反饋供反饋 （反饋方式有多種情況:變換按鈕狀態(tài) / 鼠標指針 / 瀏覽器狀態(tài)欄 / 頁面頂部提示區(qū)?？筛鶕?jù)情況采用不同的反饋方式。 如果命令需要額外信息才能成功完成，其標簽應當以省略號結尾。）2.至少提供至少提供 默認狀態(tài)默認狀態(tài) 和和 懸浮狀態(tài)懸浮狀態(tài) 按鈕（按鈕（Button）按鈕（按鈕（Button）大按鈕，承擔主要操作任務大按鈕，承擔主要操作任務 高度高度:40px 字號字號:20px 中按鈕，承擔次要操作中按鈕，承擔次要操作任務任務 高度高度:36px 字號字號:16px 中按鈕，承擔次要操作中按鈕，承擔次要操作任務任務 高度高度:36px 字號字號:16px 中按鈕

11、，承擔次要操作中按鈕，承擔次要操作任務任務 高度高度:30px 字號字號:16px 中按鈕，承擔次要操作中按鈕，承擔次要操作任務任務 高度高度:30px 字號字號:16px 按鈕（按鈕（Button）中中按鈕，承擔主要操作任務按鈕，承擔主要操作任務 高度高度:26px 字號字號:14px 中按鈕，承擔次要操作中按鈕，承擔次要操作任務任務 高度高度:26px 字號字號:14px 小按鈕小按鈕，承擔次要操作，承擔次要操作任務任務 高度高度:22px 字號字號:12px 小按鈕小按鈕，承擔次要操作，承擔次要操作任務任務 高度高度:22px 字號字號:12px 進度條進度條 （Progress Bar

12、）定義定義為用戶提供的進度反饋信息，用于表示操作正在進行中為用戶提供的進度反饋信息，用于表示操作正在進行中(非確定性進度提示非確定性進度提示)，顯示完成的進度比例，顯示完成的進度比例(確定性進度提示確定性進度提示)。進度圖示（必須）：根據(jù)完成的比例顯示，體現(xiàn)操作的具體進度進度圖示（必須）：根據(jù)完成的比例顯示，體現(xiàn)操作的具體進度 進度圖示（必須）：用靜態(tài)圖片表示預加載內(nèi)容，為進度圖示（必須）：用靜態(tài)圖片表示預加載內(nèi)容，為自動加載自動加載進度條進度條 （Progress Bar）進度圖示（必須）：用持續(xù)不斷的動畫（進度圖示（必須）：用持續(xù)不斷的動畫（gif）來表示數(shù)據(jù)加載，或操作正在進行中）來表示

13、數(shù)據(jù)加載，或操作正在進行中 進度條進度條 （Progress Bar）進度條進度條 （Progress Bar）設計設計原則原則（必須執(zhí)行）（必須執(zhí)行）：1.等待時間多于等待時間多于 2 秒的操作秒的操作,需要用進度條表示需要用進度條表示 2.操作后請求數(shù)據(jù)，當頁面刷新需要使用進度條操作后請求數(shù)據(jù)，當頁面刷新需要使用進度條 注：注：在一些重要的操作按鈕后，請用菊花表示加載中 確定進度的進度條確定進度的進度條進度條進度條 （Progress Bar）進度條進度條 （Progress Bar）非確定進度的進度條，點擊操作后加載非確定進度的進度條，點擊操作后加載標簽頁（標簽頁（Tab）定義定義Mod

14、ule Tabs(也稱選項卡，后文中簡稱也稱選項卡，后文中簡稱Tab) 是一個常見的交互元素，是一個常見的交互元素，將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。用戶通過鼠標點擊或移到內(nèi)容區(qū)所對應的標簽有其中一層是可見的。用戶通過鼠標點擊或移到內(nèi)容區(qū)所對應的標簽上，來請求顯示該層內(nèi)容區(qū)。上，來請求顯示該層內(nèi)容區(qū)。 前提前提條件條件1.有大量信息需要在有限的版面中展示有大量信息需要在有限的版面中展示2、各個、各個Tab之間應該是平級關系之間應該是平級關系3、各個、各個Tab之間有明顯聯(lián)系，否則考慮分別放

15、置之間有明顯聯(lián)系，否則考慮分別放置 1.Tab之間不屬于互斥信息（互斥信息采用下拉列表之間不屬于互斥信息（互斥信息采用下拉列表/單選框）單選框）2.Tab之間不屬于從屬關系信息之間不屬于從屬關系信息3.Tab之間不屬于任務多個步驟（步驟關系請采用分步導航）之間不屬于任務多個步驟（步驟關系請采用分步導航）標簽頁（標簽頁（Tab）設計設計原則原則（必須執(zhí)行）（必須執(zhí)行）：1.Tab標題和內(nèi)容需有明顯的對應關系標題和內(nèi)容需有明顯的對應關系 2.標簽的個數(shù)不應該超過標簽的個數(shù)不應該超過7個（超過建議用下拉列表）個（超過建議用下拉列表） 3.標簽的嵌套不超過兩層（否則用戶會看不過來），并且標簽的嵌套不超

16、過兩層（否則用戶會看不過來），并且在視覺上顯示出明顯的層級關系在視覺上顯示出明顯的層級關系 4.每個標簽頁的大小需保持一致每個標簽頁的大小需保持一致,防止跳動防止跳動 5.對于標簽內(nèi)容，按鈕只針對當前標簽信息有效對于標簽內(nèi)容，按鈕只針對當前標簽信息有效標簽頁（標簽頁（Tab）標簽頁風格指引標簽頁風格指引 高度高度24px 文字對齊：水平居中文字對齊：水平居中/垂直居中垂直居中 標簽頁（標簽頁（Tab）翻頁（翻頁（Page Navigation）定義定義翻頁的出現(xiàn)是為了在有限的空間內(nèi)展示更多的同屬性翻頁的出現(xiàn)是為了在有限的空間內(nèi)展示更多的同屬性的信息的信息(如郵件如郵件,聊天記錄聊天記錄),通常

17、這些信息是按照通常這些信息是按照 某種某種物理規(guī)則排序的物理規(guī)則排序的,翻頁則提供按順序瀏覽這些信息的翻頁則提供按順序瀏覽這些信息的路徑。路徑。 翻頁（翻頁（Page Navigation）前提條件前提條件1.大量同類型信息需要在有限的版面中展示大量同類型信息需要在有限的版面中展示 設計設計原則原則(必須執(zhí)行必須執(zhí)行)：1.如無特殊原因，應固定展示如無特殊原因，應固定展示 第一頁第一頁 和和 最后一頁最后一頁 的數(shù)字鏈的數(shù)字鏈接接 2.采用采用 的方案的方案 3.當前頁需明確表示不可點擊的含義當前頁需明確表示不可點擊的含義 翻頁（翻頁（Page Navigation）彈出窗口（彈出窗口（Win

18、dows）定義定義“彈出窗口彈出窗口”讓用戶執(zhí)行命令、向用戶提問、向用戶提供讓用戶執(zhí)行命令、向用戶提問、向用戶提供信息或進度反饋的輔助獨占元素。信息或進度反饋的輔助獨占元素。彈出窗口分為彈出窗口分為3種類型，提示型彈出窗、判斷型彈出窗、輸種類型，提示型彈出窗、判斷型彈出窗、輸入型彈出框，彈出窗尺寸為入型彈出框，彈出窗尺寸為“450X200”“800X500”像素像素之間之間本規(guī)范中本規(guī)范中彈出窗彈出窗特指特指模態(tài)彈出窗模態(tài)彈出窗，屬打斷性較強的操，屬打斷性較強的操作，請慎重使用作，請慎重使用彈出窗口（彈出窗口（Windows）組成元素：組成元素：彈出窗口（彈出窗口（Windows）設計設計原則

19、原則(必須執(zhí)行必須執(zhí)行)：1.需提供遮罩、標題、關閉的功能需提供遮罩、標題、關閉的功能 2.位置固定居中于瀏覽器當前屏幕位置固定居中于瀏覽器當前屏幕 3.尺寸應大于尺寸應大于450 x200像素，小于像素，小于800 x500像素像素 4.禁止連續(xù)使用對話框打斷用戶禁止連續(xù)使用對話框打斷用戶 5.本規(guī)范中本規(guī)范中彈出窗彈出窗特指特指模態(tài)彈出窗模態(tài)彈出窗，屬打斷性較強的操，屬打斷性較強的操作，請慎重使用作，請慎重使用提示（提示（Tips）定義定義提示，為一種反饋機制，用以向用戶提供信息，幫助用戶了提示，為一種反饋機制，用以向用戶提供信息，幫助用戶了解系統(tǒng)狀態(tài)，進而引導用戶操作。（向用戶提供反饋）

20、解系統(tǒng)狀態(tài)，進而引導用戶操作。（向用戶提供反饋）提示有兩種類型：信息提示，操作類提示（對話框提示、提提示有兩種類型：信息提示，操作類提示（對話框提示、提示區(qū)域提示、就地提示、靜態(tài)文本提示）示區(qū)域提示、就地提示、靜態(tài)文本提示）提示（提示（Tips）組成元素：組成元素：提示（提示（Tips）設計設計原則原則(必須執(zhí)行必須執(zhí)行)：1.盡量使用提示區(qū)（盡量使用提示區(qū)（Tips Area）提示。不打斷用戶的操作）提示。不打斷用戶的操作,保持高效性。保持高效性。 2.不要同時提供多種提示，用戶會看不過來不要同時提供多種提示，用戶會看不過來,誤導操作。（例外：可以誤導操作。（例外：可以允許出現(xiàn)多個就地提示允

21、許出現(xiàn)多個就地提示,或者就地提示搭配提示區(qū)提示）或者就地提示搭配提示區(qū)提示） 3.降低用戶操作錯誤提示的嚴重性降低用戶操作錯誤提示的嚴重性,減少對用戶的恐嚇減少對用戶的恐嚇 4.即時顯示即時顯示 一旦發(fā)現(xiàn)問題或者特殊情況的產(chǎn)品一旦發(fā)現(xiàn)問題或者特殊情況的產(chǎn)品,提示應馬上顯示提示應馬上顯示,如需如需要加載時間要加載時間,也必須要用進度條來進行反饋也必須要用進度條來進行反饋 5.信息提示信息提示ICON使用，請參考元素使用，請參考元素icon 6.隱藏型信息提示采用系統(tǒng)默認樣式，內(nèi)容為補充解釋說明（如首頁隱藏型信息提示采用系統(tǒng)默認樣式，內(nèi)容為補充解釋說明（如首頁上所有商品或廣告鼠標移上去顯示的上所有

22、商品或廣告鼠標移上去顯示的tips）提示（提示（Tips）提示（提示（Tips）提示（提示（Tips）表格（表格（Table）定義定義提供對信息的列表式展示，用戶可以通過單選和多選的方式，提供對信息的列表式展示，用戶可以通過單選和多選的方式，實現(xiàn)信息的多種邏輯排序，管理并操作列表項實現(xiàn)信息的多種邏輯排序，管理并操作列表項表格（表格（Table）組成元素：組成元素：表格（表格（Table）設計設計原則原則（必須執(zhí)行）（必須執(zhí)行）：1.表格必須含有標題表格必須含有標題 2.商品名稱等可變長度字符串左對齊商品名稱等可變長度字符串左對齊 3.日期等固定長度居中、狀態(tài)等較短字符串居中對齊日期等固定長度居

23、中、狀態(tài)等較短字符串居中對齊 4.數(shù)量、價格等可比較字符串右對齊數(shù)量、價格等可比較字符串右對齊 5.合并列的單元格頂部對齊合并列的單元格頂部對齊 6.翻頁組件和表身垂直滾動條不能同時使用翻頁組件和表身垂直滾動條不能同時使用 表格（表格（Table）表格（表格（Table）分步導航（分步導航（Step Navigation）定義定義用于向用戶展示完成一項操作所需的具體步驟以及當前所處的用于向用戶展示完成一項操作所需的具體步驟以及當前所處的步驟。（此類導航屬于操作步驟類導航）步驟。（此類導航屬于操作步驟類導航）設計設計原則原則（必須執(zhí)行）（必須執(zhí)行）：1.分布導航的步驟總體分為三類，走過的，當前的，未走過的分布導航的步驟總體分為三類，走過的，當前的，未走過的。2.視覺上突出強調當前的，已完成狀態(tài)次要，未完成的狀態(tài)最弱視覺上突出強調當前的，已完成狀態(tài)次要，未完成的狀態(tài)最弱3.導航標簽在形制上應當具有明顯的順序指向性，如：使用箭頭，尖角導航標簽在形制上應當具有明顯的順序指向性，如：使用箭頭，尖角矩形等形狀，使用字母數(shù)字標號等矩形等形狀，使用字母數(shù)字標號等 4.分步導航適用于用戶操作步驟大于分步導航適用于用戶操作步驟大于3步小于步小于9步（依據(jù)步（依據(jù)“72