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