第二章Web端“家居”交互UI設(shè)計

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

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

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

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

…………費(fèi)茨定律（Fitts’Law）在設(shè)計中的應(yīng)用2、不管我們操作移動了多遠(yuǎn)，鼠標(biāo)最終會停在屏幕的邊緣，并定位到按鈕或菜單的上面。頁面布局設(shè)計的基本理論

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

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

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

界面尺寸設(shè)計規(guī)范2、安全尺寸在設(shè)計和實現(xiàn)PC端網(wǎng)頁時，我們通常選用1200px寬度作為安全區(qū)域的設(shè)計標(biāo)準(zhǔn)。

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

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

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

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

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

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

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

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

布局

Layout

使用場景：頂部-側(cè)邊布局-通欄布局，多用于應(yīng)用型的網(wǎng)站側(cè)邊欄布局，采用側(cè)邊欄的頁面，多用于展示類網(wǎng)站組件使用詳解-數(shù)據(jù)標(biāo)記/徽標(biāo)數(shù)

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

Upload通過點(diǎn)擊或者拖拽上傳文件使用場景：當(dāng)需要上傳一個或一些文件時；當(dāng)需要展現(xiàn)上傳的進(jìn)度時；當(dāng)需要使用拖拽交互時；組件使用詳解-數(shù)據(jù)進(jìn)度條

Progress

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

Loading使用場景：加載數(shù)據(jù)時顯示動效組件使用詳解-導(dǎo)航導(dǎo)航菜單NavMenu

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

…………組件使用詳解-導(dǎo)航面包屑

Breadcrumb

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

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

Table

其他other使用場景：展示多條結(jié)構(gòu)類似的數(shù)據(jù)；當(dāng)有大量結(jié)構(gòu)化的數(shù)據(jù)需要展現(xiàn)時；當(dāng)需要對數(shù)據(jù)進(jìn)行排序、搜索、分頁等復(fù)雜行為時。

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

list

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

組件使用詳解-其他卡片

Card

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

…………設(shè)計“家居”網(wǎng)頁首頁確定頁面風(fēng)格

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

…………設(shè)計“家居”網(wǎng)頁首頁確定網(wǎng)頁設(shè)計類型

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

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

…………設(shè)計“家居”網(wǎng)頁首頁設(shè)計規(guī)范

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

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

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

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

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