第二章Web端“家居”交互UI設計

Web端“家居”交互UI設計交互UI設計知識要點“家居”網頁交互UI項目背景分析交互UI布局設計交互UI基礎元素設定交互UI設計類型分析項目實施-Web端“家居”網頁交互UI設計“家居”網頁交互UI項目背景分析重點掌握第一部分頁面布局設計的基本理論

隨著中國互聯(lián)網的發(fā)展，人們的生活方式發(fā)生了巨大的改變，一些行業(yè)正在面臨著被顛覆的危機。比如傳統(tǒng)的家裝行業(yè)，“游擊隊”式的小裝修隊曾經是裝修市場的主力軍，而今一站式家裝網站的概念已經出現。一個功能完善的，操作簡單的一站式家裝網站是非常有市場的，它可以讓客戶更快的完成從商務咨詢到裝飾風格的選定，省去裝修過程中的煩瑣的步驟。

本項目以網頁端為開發(fā)環(huán)境，項目主要的的前臺功能包括：裝修知識查詢、產品中心、預約裝修、售后通道等?？梢宰層醒b修需求的用戶通過瀏覽網頁獲取裝修信息，通過網頁了解裝修流程以及從設計、選材到驗收、配飾等方面通過互聯(lián)網進行高效的溝通。交互UI布局設計重點掌握第二部分頁面布局設計的基本理論格式塔原理格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。其中最基礎的發(fā)現是人類視覺是整體的；“形狀”和“圖形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。頁面布局設計的基本理論網格系統(tǒng)網格系統(tǒng)（gridsystems），也叫“柵格系統(tǒng)”。網頁系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來，以規(guī)則的網格陣列來指導和規(guī)范網頁中的版面布局以及信息分布。基礎概念網格（Gird）：柵格系統(tǒng)的最小原子單位列、水槽（Column、Gutter）柵格總寬（Container）邊距（Margin）盒子/區(qū)域頁面布局設計的基本理論網格：柵格系統(tǒng)的最小原子單位柵格是由一系列規(guī)律的小網格組成的網格系統(tǒng)，網格構成頁面的最小單位。通常，在網頁設計中經常使用8作為柵格的最小步進單位。頁面布局設計的基本理論列、水槽（Column、Gutter）列（Column）：列是柵格的數量單位，通常設定柵格數量說的就是列的數量槽（Gutter）：頁面內容的間距，槽的數值越大，頁面留白越多，視覺效果越松散；槽通常設為定值。頁面布局設計的基本理論柵格寬度（Container）頁面柵格系統(tǒng)的總寬度。邊距（Margin）柵格外邊距，與屏寬保持一定的安全距離。頁面布局設計的基本理論盒子/區(qū)域建立好基礎柵格之后，一塊內容通常會占用幾個欄和列的寬度，我們把這個區(qū)域理解為內容盒子，用于承載一個區(qū)域的內容。頁面布局設計的基本理論如何搭建柵格系統(tǒng)1、確定屏幕尺寸，確定安全范圍2、確定關鍵數據：列的數量、水槽的寬度頁面布局設計的基本理論如何搭建柵格系統(tǒng)假設內容區(qū)寬度為W（Weight），列寬為C（Column），列數為n，槽為定寬G，可以得出：W=C*n。由于槽不可以放置內容，可見內容區(qū)為：W=C*n-G。舉例：我們?yōu)橐粋€屏寬1440的項目劃分柵格，首先確定內容區(qū)寬度為1440，24列，槽為定值16；那么可以得出列寬60，欄為48。內容區(qū)從水槽開始到水槽結束頁面布局設計的基本理論網格系統(tǒng)的應用1、橫向劃分頁面布局設計的基本理論網格系統(tǒng)的應用2、縱向劃分頁面布局設計的基本理論費茨定律（Fitts’Law）費茨定律是由保羅·費茨（PaulM.Fitts）博士，在對人類操作過程中的運動特征、運動時間、運動范圍和運動準確性進行研究之后1954年提出的；該定律被用來預測從任意一點到目標中心位置所需時間的數學模型，在人機交互（HCI）和設計領域的影響卻最為廣泛和深遠。

…………費茨定律（Fitts’Law）在設計中的應用1、按鈕等可點擊區(qū)域在合理的范圍之內越大越容易點擊。頁面布局設計的基本理論

…………費茨定律（Fitts’Law）在設計中的應用2、不管我們操作移動了多遠，鼠標最終會停在屏幕的邊緣，并定位到按鈕或菜單的上面。頁面布局設計的基本理論

…………費茨定律（Fitts’Law）在設計中的應用3、出現在用戶正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快。頁面布局設計的基本理論頁面布局設計的基本理論?？硕桑℉ick’sLaw）?？硕芍傅氖牵阂粋€人面臨的選擇越多，所需要作出決定的時間就越長。

?？硕桑℉ick'sLaw）在設計中的應用設計中給用戶盡量少的選擇，減輕用戶的決策成本。頁面布局設計的基本理論頁面布局設計的基本理論7±2法則1956年喬治米勒對短時記憶能力進行了定量研究，他發(fā)現人類頭腦最好的狀態(tài)能記憶含有7（±2）項信息塊，在記憶了5-9項信息后人類的頭腦就開始出錯。7±2法則在設計中的應用1、PC端導航或選項卡盡量不要超過9個，應用的選項卡不會超過5個。頁面布局設計的基本理論7±2法則在設計中的應用2、如果導航或選項卡內容很多，可以用一個層級結構來展示各段及其子段，并注意其深廣度的平衡。頁面布局設計的基本理論7±2法則在設計中的應用3、把大塊整段的信息分割成各個小段，并顯著標記每個信息段和子段，以便清晰的確認各自的內容。頁面布局設計的基本理論頁面布局設計的基本理論Tesler’sLaw泰思勒定律（復雜性守恒定律）由LarryTesler于1984年提出，也稱泰斯勒定律（Tesler’sLaw）。該定律認為每一個過程都有其固有的復雜性，存在一個臨界點，超過了這個點過程就不能再簡化了，只能將固有的復雜性從一個地方移動到另外一個地方。頁面布局設計的基本理論復雜度守恒定律對于設計的價值每個應用程序都具有其內在的、無法簡化的復雜度，只能設法調整、平衡。這一觀點主要被應用在交互設計領域。頁面布局設計的基本理論奧卡姆剃刀原理（Occam’sRazor）奧卡姆剃刀定律又稱「奧康的剃刀」，它是由14世紀邏輯學家奧卡姆威廉提出。這個原理稱為「如無必要，勿增實體」，即「簡單有效原理」。奧卡姆剃刀原理在設計中的應用方法1、只放置必要的東西頁面布局設計的基本理論奧卡姆剃刀原理在設計中的應用方法2、減少點擊次數頁面布局設計的基本理論奧卡姆剃刀原理在設計中的應用方法3、減少段落個數頁面布局設計的基本理論奧卡姆剃刀原理在設計中的應用方法4、“外婆”規(guī)則頁面布局設計的基本理論奧卡姆剃刀原理在設計中的應用方法5、給予更少的選項頁面布局設計的基本理論版式設計常見類型與分析重點掌握版式設計

版式設計是指設計人員根據設計主題和視覺需求，在預先設定好的有限版面內，運用造型要素和形式原則，根據特定主題與內容的需要，將文字、圖片（圖形）及色彩等視覺傳達信息要素進行有組織、有目的的組合排列的設計行為與過程。實際上，它不僅是一種技能，更實現了技術與藝術的統(tǒng)一。版式設計的范圍，涉及到刊物、畫冊、和網頁頁面等平面設計各個領域。Web界面常見的版式設計類型常見的web界面版式設計類型國字型布局匡字型布局三字型布局川字型布局海報型布局標題文本型布局綜合型布局Web界面常見的版式設計類型國字型布局常見的web界面版式設計類型匡字型布局三字型布局川字型布局海報型布局標題文本型布局綜合型布局Web界面常見的版式設計類型國字型布局常見的web界面版式設計類型匡字型布局三字型布局川字型布局海報型布局標題文本型布局綜合型布局Web界面常見的版式設計類型國字型布局常見的web界面版式設計類型匡字型布局三字型布局川字型布局海報型布局標題文本型布局綜合型布局Web界面常見的版式設計類型國字型布局常見的web界面版式設計類型匡字型布局三字型布局川字型布局海報型布局標題文本型布局綜合型布局Web界面常見的版式設計類型國字型布局常見的web界面版式設計類型匡字型布局三字型布局川字型布局海報型布局標題文本型布局綜合型布局Web界面常見的版式設計類型國字型布局常見的web界面版式設計類型匡字型布局三字型布局川字型布局海報型布局標題文本型布局綜合型布局交互UI基礎元素設定難度：一般了解第三部分設計規(guī)范1、網頁尺寸1920px安全尺寸1200px*800px

界面尺寸設計規(guī)范2、安全尺寸在設計和實現PC端網頁時，我們通常選用1200px寬度作為安全區(qū)域的設計標準。

界面尺寸設計規(guī)范2、文字選擇正文宋體居多、思源；英文：Arial；Tacoma；Veranda；消除鋸齒的方式為：WindowsLCD行間距盡量保持在1.5-2倍的距離字體顏色不要純黑（#000000）文字設計文字顏色#333333#666666#999999#cccccc標題文字正文文字次要文字提示性文字（用于組件或提示框文字）字號16-1812-14,14居多12，英文10行間距16號文字，行間距24-3214號文字，行間距21-2812號文字，行間距18-24設計規(guī)范3、統(tǒng)一性配色盡量保持色相一致要有主色調除圖片外，盡量不要超過3種顏色色彩搭配交互UI設計類型分析難度：一般了解第四部分1.綜合資訊類網頁設計的分類2.企業(yè)品牌類3.交易類設計分類4.社區(qū)類Ps-網頁設計分類和設計規(guī)范5.辦公及政府機構類6.互動游戲類設計分類7.有償資訊類Ps-網頁設計分類和設計規(guī)范8.功能類9.綜合類設計分類網頁交互UI組件的分類難度：一般了解第五部分

組件使用詳解Web端設計組件根據用途，可以分為六大類反饋feedback

：Toast提示、Alert警告提示、dialog對話框、Notification通知提醒框、tooltip氣泡提示表單form：輸入框input、選擇器（框）Select、日期選擇器DatePicker、時間選擇器TimePicker、級聯(lián)選擇器（組件）Cascader、計數器/數字輸入框InputNumber、單選框（組件）Radio、復選框Checkbox、開關Switch、樹選擇TreeSelect基礎basic：按鈕Button、布局Layout數據data:標記/徽標數Badge、上傳Upload、進度條Progress、加載Loading導航navigation

:導航菜單NavMenu、面包屑Breadcrumb、標簽頁Tabs、分頁Pagination、步驟條Steps、下拉菜單Dropdown其他other：表格Table、列表list、卡片Card組件使用詳解-反饋Toast提示反饋類feedback：反饋就是用戶做了某項操作之后，系統(tǒng)給用戶的一個響應。用戶產生操作，出現toast提示；toast的消息提示分類一共有三種類型：成功、失類、常規(guī)。組件樣式有兩種：可點擊操作使其消失、不可點擊操作使其消失。組件使用詳解-反饋tooltip氣泡提示使用場景：鼠標移入則立即顯示提示，移出則立即消失；展示鼠標hover（懸停）時的提示信息。組件使用詳解-表單input輸入框表單form表單在網頁中主要負責數據采集功能用于用戶文本輸入使用場景：用戶需要通過鼠標鍵盤輸入內容；輸入的文本通常置于輸入框輸入框組件存在的狀態(tài)有：初始、激活、報錯、完成和禁用。組件使用詳解-表單Cascader級聯(lián)選擇使用場景：1、需要從一組相關聯(lián)的數據集合進行選擇2、從一組數據集合中進行選擇時，用多級分類進行分隔，方便選擇。3、比起Select組件，可以在同一個浮層中完成選擇，有較好的體驗。組件使用詳解-表單單選框

Radio使用場景：用于在多個備選項中選中單個狀態(tài)。和Select選擇器

的區(qū)別是，單選框

所有選項默認可見，方便用戶在比較中選擇，但選項不宜過多。組件使用詳解-表單復選框

Checkbox使用場景：在一組可選項中進行多項選擇時；組件使用詳解-基礎Button按鈕基礎basic使用場景：標記了一個操作命令，響應用戶點擊行為，觸發(fā)相應的業(yè)務邏輯。在設計中，基本有五種按鈕類型：主要按鈕、默認按鈕、線性按鈕、文本按鈕、鏈接按鈕四種狀態(tài)屬性危險、幽靈、禁用、加載中…………組件使用詳解-基礎

布局

Layout

使用場景：頂部-側邊布局-通欄布局，多用于應用型的網站側邊欄布局，采用側邊欄的頁面，多用于展示類網站組件使用詳解-數據標記/徽標數

Badge數據data使用場景：一般出現在通知圖標或頭像的右上角，用于顯示需要處理的消息條數，通過醒目視覺形式吸引用戶處理。組件使用詳解-數據上傳

Upload通過點擊或者拖拽上傳文件使用場景：當需要上傳一個或一些文件時；當需要展現上傳的進度時；當需要使用拖拽交互時；組件使用詳解-數據進度條

Progress

使用場景：在操作需要較長時間才能完成時，為用戶顯示該操作的當前進度和狀態(tài)。當一個操作會打斷當前界面，或者需要在后臺運行，且耗時可能超過2秒時；當需要顯示一個操作完成的百分比時。組件使用詳解-數據加載

Loading使用場景：加載數據時顯示動效組件使用詳解-導航導航菜單NavMenu

導航navigation使用場景：一般分為頂部導航和側邊導航；頂部導航提供全局性的菜單分類和功能，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度。側邊導航提供多級結構來收納和排列網站架構，可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；

…………組件使用詳解-導航面包屑

Breadcrumb

使用場景：1、當系統(tǒng)擁有超過兩級以上的層級結構時；2、當需要告知用戶“你在哪里”時；3、當需要向上導航的功能時。組件使用詳解-導航下拉菜單

Dropdown使用場景：當頁面上的操作命令過多時，點擊或移入觸點，會出現一個下拉菜單；可在列表中進行選擇，并執(zhí)行相應的命令。組件使用詳解-其他表格

Table

其他other使用場景：展示多條結構類似的數據；當有大量結構化的數據需要展現時；當需要對數據進行排序、搜索、分頁等復雜行為時。

…………組件使用詳解-其他列表

list

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

組件使用詳解-其他卡片

Card

使用場景：最基礎的卡片容器，可承載文字、列表、圖片、段落，常用于后臺概覽頁面。項目實施-Web端“家居”網頁交互UI設計難度：一般了解第六部分

…………設計“家居”網頁首頁確定頁面風格

網站的首頁，可以統(tǒng)覽網站的主要內容，并提供通往各個頁面的鏈接，下面我們以“家居”網頁首頁為例對頁面進行設計分析。1.確定頁面風格網頁設計越來越趨向簡約自然的設計風格，去除繁雜裝飾，如今已經成為一股潮流，簡約的網頁設計風格，主要圍繞兩個點：一個是視覺上看起來簡單自然，另一個是體現功能的優(yōu)化。本著統(tǒng)一性配色的設計規(guī)范，在配色上采用了橙、灰、白為主色調，為了更簡單明了的突出主體，提供更舒適的感官感受，我們對“家居”網頁首頁采用全屏網頁設計，利用精心挑選設計的背景加上合理的頁面布局，增強視覺沖擊力，來吸引瀏覽者的注意。通常頁面內的文字內容不會特別多，少量文字加上以圖片展示為主的合理排版將會變得更加吸引人，如圖所示。

…………設計“家居”網頁首頁確定網頁設計類型

作為一款Web端“家居”網頁，我們將其定位為企業(yè)品牌類網頁，以展示為主，體現企業(yè)品牌理念，對創(chuàng)意、美工、內容的組織策劃等的要求較高；利用多媒體交互技術、視頻、動態(tài)網頁等技術，達到品牌營銷傳播的目的。

版式上，我們采用綜合型布局，涵蓋幾種版式設計類型的綜合運用，布局比較靈活。首先將網頁整體橫向分割為三部分，類似三字型版式，可以讓瀏覽者快速找到目標，如圖所示。在Banner處，我們設計為滿屏展示，類似海報型版式設計，很多企業(yè)官網都會采用這種布局類型，簡單大氣的感覺，同時首屏也可以播放視頻。設計版式類型

…………設計“家居”網頁首頁設計規(guī)范

網頁尺寸上，根據百度流量研究院的統(tǒng)計，我們采用主流的顯示分辨率1920px×1080px的尺寸進行界面設計，便于適配及通用。文字參考網頁文字規(guī)范，采用16px-20px，突出標題內容，14px作為正文，12px作為非突出性的文字或用戶注釋等內容；字體顏色采用易讀性的深灰色，色號在#333333到#666666之間的顏色；字體行間距采用字體大小的1.5-2倍為參考

…………設計“家居”網頁首頁布局設計（1）進行首頁布局設計時，我們要知道首頁設計包括的內容區(qū)域有：頁頭部分：客戶的logo和標語；主要告訴用戶這是什么網站，它是做什么的。品牌理念(Tagline)：最有價值的位置之一是靠近logo的地方，當我們看到一個和客戶企業(yè)logo相關聯(lián)的短語時，就知道這是口號，然后我們會把它當作整個網站的描述。口號是一條精煉的語句，刻畫了整個企業(yè)。主頁：是要給網站提供服務的概貌：既要包括內容，也就是能在這里找到什么；也要包括功能，即“我能做什么”。搜索：大多數網站需要在主頁上設置一個顯示突出的搜索框。它是一個站內給用戶直接到達目的地的通道，起到了一個引導用戶走向的作用。主體：內容區(qū)域，是展示部分的主體，以展示為主.頁腳部分：這部分包含一些版權信息、友情鏈接，聯(lián)系方式、備案信息等；通常頁頭和頁腳是整個站點通用的部分.

…………設計“家居”網頁首頁布局設計（2）搭建格柵系統(tǒng)首先，確定屏幕尺寸，確定安全范圍。當我開始著手設計頁面時，首先應考慮在多大的尺寸范圍內做設計，也就是確定格柵區(qū)域的寬度范圍，我們采用主流分辨率確定界面的寬度為1920px，以布局“全屏”為例進行設計，格柵區(qū)域的寬度=響應式區(qū)域-頁邊距×2，由于我們采用全屏設計，所以，格柵的區(qū)域寬度=響應式區(qū)域其次，確定關鍵數據，也就是列的數量和水槽的寬度。常見的柵格系統(tǒng)通常被劃分為12柵格或24柵格。劃分的格子越多，承載的內容越精細，但也容易顯得瑣碎。在一些商業(yè)網站、門戶網站通常劃分成12柵格，我們以12格柵為例進行頁面設計，根據內容區(qū)寬度為W（Weight），列寬為C（Column），列數為n，槽為定寬G，可以得出：W=C*n的計算公式，由于槽不可以放置內容，可見內容區(qū)為：W=C*n-G，以屏寬1920px的項目劃分柵格，滿屏設計內容區(qū)域寬度為1920px，格柵12列，槽為定值24px，那么可以得出列寬為160px、欄為136px，

根據場景將格柵區(qū)域劃分成3等分，內容區(qū)域從水槽開始到水槽結束1920寬/12列=160；160列寬-24槽=136，根據場景將格柵區(qū)域劃分成3等分，內容區(qū)域從水槽開始到水槽結束這樣，一個基本的網頁格柵系統(tǒng)就搭建完成了。

…………設計“家居”網頁首頁布局設計（3）布局設計-相似性原則布局設計依據格式塔原理的相似性原則，即內容相似的物體看起來歸為一組，使不具有相似特征的元素更像一個整體，如圖。（4）布局設計-對稱性原則無論距離遠近，對稱元素都會被認為屬于一體，給我們一種堅固和有序的感覺。我們的眼睛尋求這些屬性以及秩序和穩(wěn)定，因此對稱對快速有效地傳遞信息非常有用。對稱感覺很舒服，幫助我們專注于重要的事情，對稱原則通常用于“產品展示，列表，導航，Banner和任何內容豐富的頁面”，如圖。以上，應用我們所講的設計規(guī)范、布局設計理論，以及格柵系統(tǒng)的搭建，就完成了Web端“家居”首頁頁面的設計工作?！O計“家居”網頁交互UI導航菜單組件導航菜單組件，通常導航位于頁面頂部或者側邊區(qū)域的，在輪播圖片上邊或下邊的一排水平導航按鈕，它起著鏈接站點或者軟件內的各個頁面的作用；以及包含用戶登錄、注冊、個人中心等信息。我們先新建一個圖層組，命名為導航或簡寫nav，我們先確定首個文字在頁面中的位置，，字號按照網頁文字設計規(guī)范，正文或一級標題字號為14-16，顏色不要用純黑，顏色亮度40%，然后等間距復制后面的導航菜單文字，如圖接下來我們制作搜索欄，同樣在參考圖中用選區(qū)