編號10-01【web產品交互設計開發制作】編號10-01學習任務四、組件設計-網頁交互組件設計特征一、課程說明與要求1.課程說明UI設計組件就是用戶界面成套元件，是界面設計常用控件或元件。組件是具有標準規范和可復用場景的基本模塊。從字面上理解：“組”：設計元素的組合方式，“件”由不同的元件組成。本質上，組件化設計就是將UI界面合理地劃分為更小的，更易于管理的單元，并予以命名。只要是幾個元素的組合，都可以稱之為組件。卡片，頭像，導航欄都是經典的組件。但是，組件并非一定要視覺上看起來是成塊的。每種組件都有其特定的用法，根據場景和信息內容優先級來判斷如何使用才是正確的設計方法。下面我們可以在組件詳解中去了解組件的使用場景。在交互設計實踐方面，培養學生使用Ps工具繪制web產品交互設計中的一些常用組件。二、學情分析與課程導入1.學情分析本課程授課內容需要學生有一定的Ps軟件使用基礎，作為一門實踐性較強的課程，本節課針對學生對交互設計方面的知識普遍認知不強，或者碎片化、不系統，強調進行引導教學，融入市場多元化理念。另一方面，學生對新興的事物接受比較快，對所選擇的專業感興趣，獲取知識的主動性較強。2.課程導入我們學習UI組件設計的特征，那么什么是UI組件設計，組件都有哪些分類，在日常生活中我們通常見到的網站中的搜索、導航欄、都是交互組件設計的應用。下面我們針對組件的分類對其做一個詳細的講解三、理論知識講解（一）什么是UI設計組件UI即（UserInterface），用戶界面的簡稱；組件可以理解為是一個組合功能的控件；UI設計組件就是用戶界面成套元件。（二）組件規范的作用1.一致性與現實生活一致在界面中一致2.反饋用戶控制反饋編號10-02頁面反饋編號10-023.提高效率，減少成本簡化流程清晰明確幫助用戶識別4.組件設計的優勢首先，可以統一交互設計規則，減少用戶操作的迷惑感，提升產品的體驗。其次，減少制作組件控件的時間，不需要對組件重新下定義，提升設計效率，可將更多時間放在流程體驗和設計推動上。第三，可以有延續性，團隊即使有成員離開或者加入，通過設計規范和組件庫可以快速地接手和進行正常工作?！菊n后思考：第一，什么是UI設計組件；第二，規范組件的作用】（三）組件使用詳解……………………【難點】Web端設計組件根據用途，可以分為六大類反饋feedback：各種提示、提醒框等，如;toast（吐司）提示、對話框、氣泡提示等表單form：如：輸入框input、級聯選擇器、單選框、復選框等基礎basic：如：按鈕button、布局layout數據：包括：徽標數、上傳、進度條、加載導航：包括：導航菜單、面包屑、標簽頁、分頁、步驟條、下拉菜單、其他：包括：表格、列表、卡片等。1.反饋類feedback反饋類feedback：反饋就是用戶做了某項操作之后，系統給用戶的一個響應。（1）Toast提示用戶產生操作，出現toast提示；toast的消息提示分類一共有三種類型：成功、失類、常規。（2）Alert警告提示當用戶進行某些操作時，網站會出現對應的警告信息提示用戶。使用場景：當某個頁面需要向用戶顯示警告的信息時。編號10-03編號10-03（3）dialog對話框用于提示用戶當前操作，或是完成某個任務時需要的一些其他額外的信息。使用場景：用戶在進行重要操作時，需要進行二次確認；用于重要的反饋提示，讓用戶知道信息提示；彈出式，減少頁面的跳轉。（4）Notification通知提醒框使用場景：較為復雜的通知內容；帶有交互的通知，給出用戶下一步的行動點；系統主動推送。（5）tooltip氣泡提示使用場景：鼠標移入則立即顯示提示，移出則立即消失；展示鼠標hover（懸停）時的提示信息。編號10-04編號10-042.表單form表單在網頁中主要負責數據采集功能（1）input輸入框用于用戶文本輸入使用場景：用戶需要通過鼠標鍵盤輸入內容；輸入的文本通常置于輸入框（2）選擇器（框）Select當選項過多時，使用下拉菜單展示并選擇內容。使用場景：彈出一個下拉選項給用戶選擇操作（3）日期選擇器DatePicker使用場景：當用戶需要輸入一個日期，可以點擊標準輸入框，彈出日期面板進行選擇編號10-05編號10-05（4）時間選擇器

TimePicker使用場景：輸入或選擇日期的控件，當用戶需要輸入一個日期，可以點擊標準輸入框，彈出日期面板進行選擇。（5）Cascader級聯選擇使用場景：1、需要從一組相關聯的數據集合進行選擇2、從一組數據集合中進行選擇時，用多級分類進行分隔，方便選擇。3、比起Select組件，可以在同一個浮層中完成選擇，有較好的體驗。（6）計數器/數字輸入框

InputNumber使用場景：當需要獲取標準數值時。（7）單選框

Radio使用場景：用于在多個備選項中選中單個狀態。編號10-06（8）復選框

Checkbox編號10-06使用場景：在一組可選項中進行多項選擇時（9）Switch開關使用場景：表示兩種相互對立的狀態間的切換，通常用在觸發「開/關」。樹選擇

TreeSelect使用場景：可選擇的數據結構是一個樹形結構時，可以使用TreeSelect。3.基礎basic（1）Button按鈕使用場景：標記了一個操作命令，響應用戶點擊行為，觸發相應的業務邏輯。（2）布局

Layout

使用場景：頂部-側邊布局-通欄布局，多用于應用型的網站編號10-07側邊欄布局，采用側邊欄的頁面，多用于展示類網站編號10-074.數據data（1）標記/徽標數

Badge使用場景：一般出現在通知圖標或頭像的右上角，用于顯示需要處理的消息條數，通過醒目視覺形式吸引用戶處理。（2）上傳

Upload使用場景：當需要上傳一個或一些文件時；當需要展現上傳的進度時；當需要使用拖拽交互時；（3）進度條

Progress使用場景：在操作需要較長時間才能完成時，為用戶顯示該操作的當前進度和狀態。（4）加載

Loading使用場景：加載數據時顯示動效編號10-08編號10-085.導航navigation（1）導航菜單NavMenu使用場景：一般分為頂部導航和側邊導航；頂部導航提供全局性的菜單分類和功能，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度。側邊導航提供多級結構來收納和排列網站架構，可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；（2）面包屑

Breadcrumb

使用場景：1、當系統擁有超過兩級以上的層級結構時；2、當需要告知用戶“你在哪里”時；3、當需要向上導航的功能時。（3）標簽頁

Tabs使用場景：卡片式的頁簽，提供可關閉的樣式，常用于容器頂部。標準線條式頁簽，用于容器內部的主功能切換，這是最常用的Tabs。編號10-09（4）分頁

Pagination編號10-09使用場景：當數據量過多時，使用分頁分解數據。當加載/渲染所有數據將花費很多時間時；可切換頁碼瀏覽數據。（5）步驟條

Steps使用場景：當任務復雜或者存在先后關系時，將其分解成一系列步驟，從而簡化任務。（6）下拉菜單

Dropdown使用場景：當頁面上的操作命令過多時，點擊或移入觸點，會出現一個下拉菜單；可在列表中進行選擇，并執行相應的命令。6.其他other（1）表格

Table使用場景：展示多條結構類似的數據；當有大量結構化的數據需要展現時；當需要對數據進行排序、搜索、分頁等復雜行為時。編號10-10編號10-10（2）列表

list

使用場景：最基礎的列表展示，可承載文字、列表、圖片、段落；常用于后臺數據展示頁面

（3）卡片

Card使用場景：最基礎的卡片容器，可承載文字、列表、圖片、段落，常用于后臺概覽頁面。（四）了解Photoshop文件如何存儲web格式……………【重點】1.保存web所用格式web格式是專門用于網頁瀏覽的一種圖片格式，體積比普通圖片要更小，為了確保圖片無卡頓地清晰顯現，考慮它的品質和大小是很必要的。2.如何用Photoshop保存網頁格式PS擁有非常好的方法來為網頁優化圖片，在ps中，選擇文件>存儲為web格式或者使用快捷鍵ctrl+alt+shift+s；“存儲為Web所用格式”可以將圖像保存成基于網頁設計優化過的格式，包括圖像質量、圖像分辨率、瀏覽器兼容性和文件大小。編號10-11而“另存為”對話框則不具有這么多優化的選擇，并且往往會保存成較大的圖像。編號10-11四、實踐技能訓練（一）布置訓練任務任務1：從web產品中找出交互設計組件任務2：嘗試使用PS制作交互組件（二）實戰項目案例運用所學的UI交互設計組件的應用場景，嘗試使用PS制作常用交互設計組件基礎類中的按鈕及幾種常用狀態（即：默認狀態、鼠標懸停狀態、點擊狀態、不可點擊狀態）的制作或設計。………【思政融入（感受中國風元素的魅力，弘揚文化自信）】………【難點】中國風致力于弘揚中國傳統文化和國學，古風以民族風為源，我們以國風元素為主導，來制作按鈕組件，中國風圖片和中國風素材廣泛應用于文化領地，為平面設計、網頁、建筑、攝影等賦予新的靈魂，并為產品帶來新的生命力。教師重點指導：軟件的基本操作及按鈕組件使用狀態的區別?！緦嵱栔笇В簩W生初次接觸UI設計組件并進行設計制作實踐，教師應多引導，幫助學生分析交互設計體驗，指導學生完成組件設計的初稿繪制】五、課堂總結今天，我們主要學習了什么是UI是設計組件、組件規范的作用以及組件的分類和詳解，并了解了如何存儲為網頁格式等相關理論，也結合交互設計案例相關理論做了一些練習，想必同學們通過練習對UI設計組件有了一定的了解和掌握。希望同學們課后繼續對大家所接觸到的相關作品或產品，用專業的眼光，分析UI設計組件在交互設計中的應用，這樣有助于你們對知識點的更深入的理解。六、課后思考編號10-12前面我們講到了設計組件的作用和優勢，