項(xiàng)目2 Web端“家居”網(wǎng)頁交互UI設(shè)計(jì)-備課筆記

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