3.6 組件設(shè)計(jì)-網(wǎng)頁交互元素的合理歸類與模塊排序-備課筆記

編號12-01【web產(chǎn)品交互設(shè)計(jì)開發(fā)制作】編號12-01學(xué)習(xí)任務(wù)六、組件設(shè)計(jì)-網(wǎng)頁交互元素的合理歸類與模塊排序一、課程說明與要求1.課程說明本次課包括網(wǎng)頁元素的分類、界面的構(gòu)成基礎(chǔ)、模塊排序三大方面的內(nèi)容，界面基礎(chǔ)是：控件、布局、流程，也就是在交互稿上肉眼可見的部分。入門時(shí)先學(xué)界面基礎(chǔ)可以讓同學(xué)們快速體驗(yàn)到到交互設(shè)計(jì)的應(yīng)用，并建立一些興趣和信心。下面我們可以在設(shè)計(jì)的案例中去了解模塊排序布局的作用。在交互設(shè)計(jì)實(shí)踐方面，培養(yǎng)學(xué)生對交互流程的理解和思考能力，提高專業(yè)素質(zhì)。二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對象為藝術(shù)類學(xué)生，沒有接觸過交互設(shè)計(jì)方面的知識(shí)，或認(rèn)知不強(qiáng)，作為一門實(shí)踐性較強(qiáng)的課程，強(qiáng)調(diào)進(jìn)行引導(dǎo)教學(xué)，融入市場多元化理念。另一方面，學(xué)生對新興的事物接受比較快，有助于建立學(xué)習(xí)的興趣和信心，同時(shí)獲取知識(shí)的主動(dòng)性較強(qiáng)。2.課程導(dǎo)入我們學(xué)習(xí)網(wǎng)頁元素的合理歸類和排序布局，那么就會(huì)產(chǎn)生疑問，元素如何分類、依據(jù)什么排序布局，交互流程是如何設(shè)計(jì)的等等問題，實(shí)際在日常生活中我們通常見到的網(wǎng)站中的列表、加入購物車、都是依據(jù)排序布局理論、交互流程設(shè)計(jì)的步驟設(shè)計(jì)出來的。下面我們針對組件的分類對其做一個(gè)詳細(xì)的講解三、理論知識(shí)講解（一）網(wǎng)頁組成元素及歸類1.按基礎(chǔ)分類（1）基礎(chǔ)圖文內(nèi)容為：圖片加文字（2）多媒體（音視頻）編號12-02內(nèi)容為：文字+圖片+音頻+視頻等多種媒體格式編號12-022.按框架分類………………【舉例思政融入（感受電商助農(nóng)發(fā)展現(xiàn)狀及前景）】我們來看網(wǎng)頁案例，這個(gè)網(wǎng)頁屬于一個(gè)交易類電商平臺(tái)，電商營銷的模式幫助農(nóng)戶出售滯銷的農(nóng)產(chǎn)品，這種線上售賣的新營銷模式在短時(shí)間內(nèi)就很好的促進(jìn)了農(nóng)產(chǎn)品的銷售，幫助農(nóng)戶解決了滯銷問題，不僅給當(dāng)?shù)剞r(nóng)戶帶來了切實(shí)的收益，也助力了當(dāng)?shù)氐目沙掷m(xù)發(fā)展，《關(guān)于促進(jìn)農(nóng)村電子商務(wù)加快發(fā)展的指導(dǎo)意見》中明確提出了“鼓勵(lì)和支持開拓創(chuàng)新”措施，鼓勵(lì)地方、企業(yè)等因地制宜，積極探索農(nóng)村電子商務(wù)新模式。引導(dǎo)各類媒體加大農(nóng)村電子商務(wù)宣傳力度，發(fā)掘典型案例，推廣成功經(jīng)驗(yàn)。目前，電商助農(nóng)在應(yīng)用方面也日趨常態(tài)化，市場前景很大，在我們今后從事交互設(shè)計(jì)工作時(shí)也會(huì)接觸到這個(gè)領(lǐng)域。編號12-03下面我們來看它的構(gòu)成，包含頁頭，導(dǎo)航，主要內(nèi)容區(qū)域，頁腳和備案信息；編號12-03一般情況下，導(dǎo)航和logo是一塊，整體組成了頁頭。大多數(shù)整體可以分為三塊，頁頭、主體內(nèi)容區(qū)和頁腳?！净?dòng)，引導(dǎo)學(xué)生瀏覽不同的頁面，分析各頁面元素的構(gòu)成，教師做總結(jié)】再比如郵箱網(wǎng)站，我們可以看到，雖然它展示的內(nèi)容比較少，但是它也是包含了頁頭，導(dǎo)航，內(nèi)容區(qū)域，頁腳，頁面主要內(nèi)容區(qū)域沒有再細(xì)分，如果細(xì)分的話會(huì)分出更豐富的內(nèi)容；這就涉及到界面的布局，以后會(huì)單獨(dú)講解常用的布局有哪些，以上就是我們網(wǎng)頁設(shè)計(jì)之前需要了解的網(wǎng)頁組成元素及歸類的內(nèi)容。編號12-04編號12-04（二）Web交互設(shè)計(jì)界面的構(gòu)成基礎(chǔ)與模塊排序布局………【重點(diǎn)】Web交互設(shè)計(jì)界面的構(gòu)成基礎(chǔ)包含：控件、布局、流程。（1）控件控件是界面上最小的有效單元；如的“搜索框”、“單選按鈕”、“復(fù)選框”、“下拉框”。1）了解控件的交互流程：了解控件的交互流程，可以幫助我們更立體地了解一個(gè)控件。舉例：網(wǎng)頁的“登錄頁面”：用戶點(diǎn)擊用戶名文本框后，會(huì)出現(xiàn)光標(biāo)；輸入第一個(gè)字符后，會(huì)出現(xiàn)“清空按鈕”圖標(biāo)。輸入超過設(shè)定字符后，會(huì)有截?cái)嘈Ч??！边@就是一個(gè)控件的交互流程編號12-05編號12-05了解控件的交互流程，可以幫助我們更立體地了解一個(gè)控件。在實(shí)際的交互稿繪制中，也經(jīng)常會(huì)細(xì)致地描述某個(gè)控件的交互流程。想要學(xué)習(xí)每個(gè)控件的交互流程，比較簡單的方法就是找一些成熟的網(wǎng)頁產(chǎn)品試用，觀察每進(jìn)行一個(gè)動(dòng)作下一步會(huì)發(fā)生什么，然后臨摹下來。2）了解控件的屬性可以理解為可設(shè)置的參數(shù)舉例：“列表”可以定義的屬性有：排序規(guī)則、加載規(guī)則、刷新規(guī)則、適配規(guī)則、截?cái)嘁?guī)則等。比如圖中訂單列表，他的“排序規(guī)則”可以是按照首字母或數(shù)字排列的，也可以是按照時(shí)間先后順序排列的。編號12-06加載規(guī)則:比如我們可以設(shè)定單次加載100條，后續(xù)每次下拉加載30條編號12-06刷新規(guī)則:手動(dòng)或下拉加載刷新適配規(guī)則:左對齊，或者右邊適配截?cái)嘁?guī)則︰文字距離靠近右邊緣截?cái)囡@示等等。3）了解控件的使用舉例：當(dāng)用戶輸入手機(jī)號錯(cuò)誤的時(shí)候，需要給用戶一個(gè)錯(cuò)誤提示，提示方式所用的控件可以有很多種：行內(nèi)提示、toast(吐司提示)、氣泡提示（tooltip）、彈窗。同時(shí)區(qū)分各種提示的輕重級別體驗(yàn)。比如“彈窗”的缺點(diǎn)是打擾性很強(qiáng)，但優(yōu)點(diǎn)是可以承載大段文字，用戶關(guān)注度也更高。toast的打擾性很小，但只能放很短的文字,幾秒后就消失，用戶很容易忽略。具體要看設(shè)計(jì)師想要什么樣的效果，根據(jù)具體的用途選擇一個(gè)合適的方式。編號12-07（2）布局編號12-07布局就是把“控件”和“內(nèi)容”放到界面上合適的位置并賦予合適的視覺重量。在網(wǎng)頁端，布局設(shè)計(jì)是是設(shè)計(jì)基礎(chǔ)中重要的一部分。但在移動(dòng)端，布局設(shè)計(jì)相對沒有那么被看重。主要原因是移動(dòng)端的布局設(shè)計(jì)趨同性比較大，設(shè)計(jì)訴求和設(shè)計(jì)空間都相對較小。1）布局的基本理論常用的布局理論包括：格式塔原理、網(wǎng)格系統(tǒng)、7±2法則、席克定律、費(fèi)茨定律、奧卡姆剃刀原理、復(fù)雜度守恒定律等等；這些基本理論可以成為設(shè)計(jì)師的“標(biāo)尺”和“依據(jù)”，會(huì)融入在我們平時(shí)的設(shè)計(jì)工作中。2）布局設(shè)計(jì)的基本步驟布局設(shè)計(jì)簡單可以分為以下4個(gè)步驟：列舉：將界面中所需要的元素列舉出來，比如：商品圖片、商品標(biāo)題、價(jià)格、優(yōu)惠券、收藏、分享……歸類：將上述列舉的元素歸為幾類，每一類就是一個(gè)模塊。比如“收藏、購買、加入購物車”可以歸為“操作模塊”排序：將上面歸類好的模塊進(jìn)行排序，排序的依據(jù)一般是：用戶場景中的瀏覽順序、元素的重要性、業(yè)務(wù)期望調(diào)整：布局排布的影響因素很多，最后需要綜合其他因素對布局進(jìn)行調(diào)整。并對各元素的視覺重量進(jìn)行定義調(diào)整編號12-08編號12-08（3）流程流程設(shè)計(jì)的基本步驟是：1）確定“任務(wù)”；2）將“任務(wù)”拆成“動(dòng)作”；3）將“動(dòng)作”對應(yīng)成界面。功能的實(shí)現(xiàn)也是交互流程設(shè)計(jì)的體現(xiàn)；交互流程設(shè)計(jì)的基本步驟是：確定“任務(wù)”>將“任務(wù)”拆成“動(dòng)作”>將“動(dòng)作”對應(yīng)成界面。舉個(gè)例子，我們來看圖。比如我們做一個(gè)“購買”的功能，購買功能中有一個(gè)“添加購物車”的小功能。我們可以把“添加1件商品”看做是一個(gè)“任務(wù)”，用戶想要完成這個(gè)任務(wù)，就必須有一系列“動(dòng)作”。編號12-09編號12-09我們通過流程圖來表示下：我們看中一件商品、進(jìn)入到商品詳情頁面、選中要添加商品的顏色、尺碼等信息、加入到購物車、添加成功；這樣就通過系列動(dòng)作完成了一個(gè)任務(wù)；列出這些動(dòng)作后，我們再針對每個(gè)動(dòng)作（或多個(gè)動(dòng)作）設(shè)計(jì)相應(yīng)的界面，這就得到了交互流程。對于復(fù)雜的交互流程，需要在繪制界面前搭建“流程圖”，這樣可以讓我們思路更加清晰，表達(dá)更加清楚。四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：從網(wǎng)頁案例中找出網(wǎng)頁構(gòu)成的元素，并進(jìn)行模塊歸類任務(wù)2：利用手機(jī)電腦等工具，搜索網(wǎng)上的幾大門戶網(wǎng)站，并分析各個(gè)頁面的組成任務(wù)3：流程設(shè)計(jì)的步驟分析（二）實(shí)戰(zhàn)項(xiàng)目案例運(yùn)用所學(xué)的網(wǎng)頁界面的構(gòu)成基礎(chǔ)與模塊排序布局的應(yīng)用場景，嘗試使用流程圖或思維導(dǎo)圖描述出頁面流程設(shè)計(jì)的步驟，如完成添加到購物車的流程步驟?！倦y點(diǎn)】教師重點(diǎn)指導(dǎo)：排序布局設(shè)計(jì)的基本步驟【實(shí)訓(xùn)指導(dǎo)：學(xué)生初次接觸模塊排序布局的交互流程并進(jìn)行設(shè)計(jì)制作實(shí)踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生分析交互設(shè)計(jì)體驗(yàn)，指導(dǎo)學(xué)生完成流程設(shè)計(jì)步驟的繪制】編號12-10五、課堂總結(jié)編號12-10今天，我們主要學(xué)習(xí)了網(wǎng)頁組成的元素及歸類，以及交互界面的構(gòu)成基礎(chǔ)、模塊的排序布局等相關(guān)理論，也結(jié)合交互設(shè)計(jì)案例相關(guān)理論做了一些練習(xí)，想必同學(xué)們通過練習(xí)對網(wǎng)頁交互元素的歸類和布局排序有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對你所接觸到的相關(guān)作品或產(chǎn)品，用專業(yè)的眼光，分析界面構(gòu)成的控件、布局和流程在交互設(shè)計(jì)中的應(yīng)用，這樣有助于你們對知識(shí)點(diǎn)的更深入的理解。六、課后思考前面我們講到交互界面的構(gòu)成基礎(chǔ)：控件、布局、流程，對交互設(shè)計(jì)起到了很重要的作用，大家有必要深入了解一下。另外，請同學(xué)們從現(xiàn)實(shí)生活中