項目2 Web端“家居”網頁交互UI設計-備課筆記

項目二：Web端“家居”網頁交互UI設計一、課程說明與要求1.課程性質與考核方式說明教師首先自我介紹。然后說明本課為考查課，平時成績和期末成績各占總成績的50%，平時成績主要通過平時作業(yè)（作品）的形式評定，還要兼顧考核出勤、學習態(tài)度、課堂表現(xiàn)等因素；期末考試是在課程的最后兩次課采取限時命題創(chuàng)作的形式，全面考核課程知識的綜合運用。2.課程說明《數(shù)字媒體交互設計》共分為網頁交互設計、App交互設計、VR交互設計三方面的內容。本課程是以理論為基礎的實踐導向型課程,所傳達的課程內容圍繞“以人為本”的設計原則，重點講述人機交互的基本概念和重要意義以及發(fā)展歷程、軟件系統(tǒng)的人機交互設計原則和方法、網絡系統(tǒng)的人機交互設計原則和方法、移動端應用人機交互技術、人機交互開發(fā)工具與環(huán)境等理論內容；簡要介紹人機交互的認知心理學、計算機硬件的人機交互設計、人機交互技術的發(fā)展趨勢,并培養(yǎng)學生利用交互設計工具制作做實際交互作品原型的能力。3.組織簽到及建立班級課程微信群組織學生使用學習通進行簽到。然后使用微信面對面建群，說明本群作為課程的相關通知發(fā)布、知識答疑和作品交流使用，同時歡迎同學們及時在群里反饋對課程教學方面的意見和學習感想，提醒老師及時調整適合同學們的授課方式。4.工具材料準備說明本課的實踐技能訓練階段，需要同學在手機或者是計算機中下載好行業(yè)需求分析文檔，教師將所需準備資料發(fā)到微信群中。資料類型與名稱備注行業(yè)需求分析報告文檔每個小組一份二、學情分析與課程導入1.學情分析本課程授課對象為藝術專業(yè)學生，是在藝術專業(yè)中設立的一門邏輯思維較強的設計類課程，需要學生在學習過程中，對美術設計與邏輯設計內容進行一定程度上的融通。作為一門實踐性較強的課程，針對學生對當前市場應用需求普遍認知不強，或有較多偏差的情況，強調進行引導教學，融入市場多元化理念。另一方面，學生對未來的市場應用有信心，對所選擇的專業(yè)感興趣，獲取知識的主動性較強。2.課程導入本項目主要介紹Web端交互UI設計的相關理論知識，包括交互元素的設計規(guī)范、Web端UI設計的類型及Web端常用的交互組件及示例分析，著重講解網頁布局設計，通過常見的布局設計理論及分析，對于“為什么要這樣進行設計”的問題，可以讓讀者從本項目中找到答案。三、理論知識講解（一）Web端“家居”網頁交互UI項目背景分析隨著中國互聯(lián)網的發(fā)展，人們的生活方式發(fā)生了巨大的改變，一些行業(yè)正在面臨著被顛覆的危機。比如傳統(tǒng)的家裝行業(yè)，“游擊隊”式的小裝修隊曾經是裝修市場的主力軍，而今一站式家裝網站的概念已經出現(xiàn)。一個功能完善的，操作簡單的一站式家裝網站是非常有市場的，它可以讓客戶更快的完成從商務咨詢到裝飾風格的選定，省去裝修過程中的煩瑣的步驟。本項目以網頁端為開發(fā)環(huán)境，項目主要的的前臺功能包括：裝修知識查詢、產品中心、預約裝修、售后通道等。可以讓有裝修需求的用戶通過瀏覽網頁獲取裝修信息，通過網頁了解裝修流程以及從設計、選材到驗收、配飾等方面通過互聯(lián)網進行高效的溝通。（二）交互UI布局設計1.格式塔原理格式塔（Gestalt）心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理，其中最基礎的發(fā)現(xiàn)是人類視覺是整體的。我們的視覺系統(tǒng)自動對視覺輸入構建結構，并在神經系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域，如圖2-1所示，體現(xiàn)了格式塔原理的封閉性，我們的視覺系統(tǒng)自動嘗試將敞開的圖形關閉起來，從而將其感知為完整的物體；“形狀”和“圖形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。2.網格系統(tǒng)網格系統(tǒng)（GriD.systems），也叫“柵格系統(tǒng)”，網頁系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來，以規(guī)則的網格陣列來指導和規(guī)范網頁中的版面布局以及信息分布，如圖2-3所示。3.費茨定律費茨定律（Fitts’Law）是由保羅·費茨（PaulM.Fitts）博士，在對人類操作過程中的運動特征、運動時間、運動范圍和運動準確性進行研究之后1954年提出的，該定律被用來預測從任意一點到目標中心位置所需時間的數(shù)學模型，在人機交互（Human-ComputerInteraction，簡寫HCI）和設計領域的影響卻最為廣泛和深遠，如圖2-8所示。4.席克定律席克定律（Hick’sLaw）指的是一個人面臨的選擇越多，所需要作出決定的時間就越長。席克定律多應用于軟件/網站界面的菜單及子菜單的設計中，在移動設備中也比較適用，如圖2-12所示。設計中給用戶盡量少的選擇，減輕用戶的決策成本。圖2-12席克定律（Hick’sLaw）的應用5.7±2法則1956年喬治米勒（GeorgeA.Miller）對短時記憶能力進行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項信息塊，在記憶了5-9項信息后人類的頭腦就開始出錯。與席克定律類似，神奇數(shù)字7±2法則也經常被應用在移動應用交互設計上，應用的選項卡不會超過5個。6.復雜守恒定律復雜守恒定律（Lawofconservationofcomplexity），由Tesler'sLaw于1984年提出，也稱泰斯勒定律（Tesler'sLaw）。該定律認為每一個過程都有其固有的復雜性，存在一個臨界點，超過了這個點過程就不能再簡化了，只能將固有的復雜性從一個地方移動到另外一個地方，如圖2-16所示。7.奧卡姆剃刀定律奧卡姆剃刀定律（Occam'sRazor），是由14世紀邏輯學家奧卡姆威廉（WilliamofOccam）提出，這個原理稱為“如無必要，勿增實體”，又被稱作“簡單有效原理”。不必要的元素會導致設計效率的降低，并且會增加不可預期的后果。在設計中我們可以去掉不必要的干擾元素，這樣頁面會比較純粹、簡潔。（三）基本元素1.界面尺寸在設計和實現(xiàn)PC端網頁時，我們通常選用1200px寬度作為安全區(qū)域的設計標準。這主要取決于目前市面上的設備的主流分辨率為1920px×1080px，我們的產品最終要供用戶查看，那么需要兼顧大部分用戶的屏幕分辨率，查詢當前計算機屏幕分辨率的使用情況可得出主流屏幕的最小寬度為1280px。由于考慮到左右兩側可能還會放置廣告位以及返回頂部按鈕等，因此原型寬度最好小于1280px。以1920px寬度作為設計標準，在整個頁面中，網頁的安全區(qū)域則為1200px。換句話說，我們只要保證網頁的實際內容展示區(qū)域控制在1200px這個范圍內，就能保證整個頁面在不同尺寸的瀏覽器訪問時能夠完整的顯示出所有的內容。2.文字網頁文字設計規(guī)范包含字體、字號、字間距及段間距等設計。（1）字體設計的原則是：可辨識性和易讀性網頁的文字設計是系統(tǒng)默認的字體：宋體、微軟黑體、蘋果系統(tǒng)黑體，英文則建議使用Arial無襯線字體。（2）常用的字號大小有以下幾種12px是應用于網頁的最小字體，適用于非突出性的日期，版權等注釋性內容。14px則適用于非突出性的普通正文內容。16px、18px或者20px適用于突出性的標題內容。（3）字體間距：相鄰兩個文字的間距，除了特殊的需求之外，可以使用默認數(shù)值的間距。行間距：推薦以字體大小的1.5—2倍作為參考。段間距：推薦以字體大小的2—2.5倍作為參考。比如當選用14px的字體時，行間距：21—28px；段間距：28px—35px。（4）字體顏色：主文字顏色，建議使用公司品牌的VI顏色，可提高公司網站與公司VI之間的關聯(lián)，增加可辨識性和記憶性。正文字體顏色，選用易讀性的深灰色，建議選用#333333到#666666之間的顏色。輔助性、注釋類的文字，則可以選用#999999之類的比較淺的顏色。3.色彩色彩搭配使用統(tǒng)一性配色原則，設計時要使用256Web安全色，在PS中選擇RGB/8位，其他模式的色域很寬、顏色范圍很廣，在不同顯示屏會有失色現(xiàn)象；通?；顒訉ｎ}頁可以不按這個規(guī)范執(zhí)行。設計時盡量保持色相一致，會給人頁面一致化的感受，顏色盡量不要超過3種，主色、輔色、點綴色，特殊情況可以稍微偏離主色，或使用鄰近色。（四）網頁和網頁交互UI組件的分類1.網頁設計的分類網頁設計其實就是一個網站的設計，也就是說我們的一個網站包含各個頁面，那么對于設計首先想到的是布局以及布局是否合理，將直接影響到用戶的閱讀體驗及訪問時間。網頁設計的分類大概分以下幾種：（1）綜合資訊類（2）企業(yè)品牌類（3）交易類（4）社區(qū)論壇類（5）辦公及政府機構類（6）互動游戲類（7）有償資訊類（8）功能類（9）綜合類2.網頁交互UI組件的分類UI設計組件就是用戶界面成套元件，是界面設計常用控件或元件。Web端設計組件根據用途，可以分為六大類：反饋類feedback：各種提示、提醒框表單類form：輸入框input、級聯(lián)選擇器、單選框、復選框等基礎類basic：按鈕Button、布局layout等數(shù)據類data：徽標數(shù)、上傳、進度條、加載等導航類navigation：導航菜單、面包屑、下拉菜單等其他類other：表格、列表、卡片等網頁和網頁交互UI組件的分類網頁設計其實就是一個網站的設計，也就是說我們的一個網站包含各個頁面，那么對于設計首先想到的是布局以及布局是否合理，將直接影響到用戶的閱讀體驗及訪問時間。網頁設計的分類大概分以下幾種：網站的首頁，可以統(tǒng)覽網站的主要內容，并提供通往各個頁面的鏈接，下面我們以“家居”網頁首頁為例對頁面進行設計分析。1.確定頁面風格2.確定網頁設計類型3.設計版式類型4.設計規(guī)范5.布局設計導航菜單組件，通常導航位于頁面頂部或者側邊區(qū)域的，在輪播圖片上邊或下邊的一排水平導航按鈕，它起著鏈接站點或者軟件內的各個頁面的作用；以及包含用戶登錄、注冊、個人中心等信息。我們先新建一個圖層組，命名為導航或簡寫nav，我們先確定首個文字在頁面中的位置，，字號按照網頁文字設計規(guī)范，正文或一級標題字號為14-16，顏色不要用純黑，顏色亮度40%，然后等間距復制后面的導航菜單文字。接下來我們制作搜索欄，同樣在參考圖中用選區(qū)的方法確定長寬比等位置信息，然后在我們新建的畫布中使用工具欄中的矩形工具繪制；如圖2-68所示。我們設置矩形寬380px，高56px，無填充，描邊1px，倒角設置5px，如圖2-69所示。再將搜索框里的“搜索圖標”，置入進來，放到合適的位置，如圖2-70所示。這樣，就完成了我們的導航菜單組件UI的制作，如圖2-71所示。我們制作好的頁面如何與原型設計工具進行銜接，這就需要我們對設計完成的頁面進行切圖以及標注和存儲。接下來，首先我們對制作好的首頁進行切圖，文字及矩形工具等是不需要切圖的，圖片、logo以及圖標需要進行切圖，我們如果使用手動切圖的方法，對于頁面需要切圖量很大時，效率比較低，時間成本高；我們使用Cutterman插件來進行切圖，點擊“窗口>擴展功能>Cutterman”打開切圖工具面板，我們選中要切圖的層，設定“輸出文件夾”后，選擇“Web端>png格式”，點擊“導出選中圖層”就可以一鍵輸出切好的圖，如圖2-72所示。我們依次將需要的logo、圖標、圖片等元素，使用插件導出設置好的輸出文件夾就可以了，如圖2-73所示。但對于有些圖片，比如導出的文件信息比較大，我們可以使用“文件”導出“存儲為Web所用格式”進行優(yōu)化，我們可以設置存儲格式為jpeg或png，對顏色數(shù)，圖像大小等信息進行優(yōu)化，在不失真的情況下，選擇最佳性價比，設置后點擊存儲。對文字、矩形框等沒有切圖的圖層元素進行標注，比如字號、字間距、字體顏色、矩形框的透明度、倒角數(shù)值等信息，為后續(xù)的原型工具設計提供參考。四、實踐技能訓練（一）布置訓練任務設計并制作Web端“家居”網頁交互UI項目五、課堂總結通過項目我們對網頁布局設計的理論有了一定的掌握，這些理論是從用戶的行為邏輯中總結出來的，掌握這些設計理論能讓我們迅速有效的完成自己的網頁交互設計，我們可以依據這些理論和設計規(guī)范，按照功能需求直接調用規(guī)范中的標準交互組件。同時我們通過常見的網頁UI設計類型及應用場景分析