3.4 組件設(shè)計-網(wǎng)頁交互組件設(shè)計特征-備課筆記

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

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

InputNumber使用場景：當(dāng)需要獲取標(biāo)準(zhǔn)數(shù)值時。（7）單選框

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

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

TreeSelect使用場景：可選擇的數(shù)據(jù)結(jié)構(gòu)是一個樹形結(jié)構(gòu)時，可以使用TreeSelect。3.基礎(chǔ)basic（1）Button按鈕使用場景：標(biāo)記了一個操作命令，響應(yīng)用戶點擊行為，觸發(fā)相應(yīng)的業(yè)務(wù)邏輯。（2）布局

Layout

使用場景：頂部-側(cè)邊布局-通欄布局，多用于應(yīng)用型的網(wǎng)站編號10-07側(cè)邊欄布局，采用側(cè)邊欄的頁面，多用于展示類網(wǎng)站編號10-074.數(shù)據(jù)data（1）標(biāo)記/徽標(biāo)數(shù)

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

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

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

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

Breadcrumb

使用場景：1、當(dāng)系統(tǒng)擁有超過兩級以上的層級結(jié)構(gòu)時；2、當(dāng)需要告知用戶“你在哪里”時；3、當(dāng)需要向上導(dǎo)航的功能時。（3）標(biāo)簽頁

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

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

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

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

Table使用場景：展示多條結(jié)構(gòu)類似的數(shù)據(jù)；當(dāng)有大量結(jié)構(gòu)化的數(shù)據(jù)需要展現(xiàn)時；當(dāng)需要對數(shù)據(jù)進行排序、搜索、分頁等復(fù)雜行為時。編號10-10編號10-10（2）列表

list

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

（3）卡片

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