動(dòng)效設(shè)計(jì)，是 UI 設(shè)計(jì)當(dāng)中不可或缺的一環(huán)。大家對(duì)動(dòng)效的認(rèn)知也從最初認(rèn)為動(dòng)效只是為了美觀酷炫，到逐漸理解了動(dòng)效對(duì)于提升用戶體驗(yàn)和產(chǎn)品需求的重要作用。而導(dǎo)致這種認(rèn)知的轉(zhuǎn)變，相當(dāng)一部分原因是因?yàn)橛布阅艿陌l(fā)展和動(dòng)效輸出方式的優(yōu)化。
因?yàn)閯?dòng)效實(shí)現(xiàn)的過程就是設(shè)計(jì)師和開發(fā)之間互相博弈的過程。設(shè)計(jì)師可能通過 AE 或者其他工具做出炫酷的效果，和開發(fā)對(duì)接就懵了。要么無法實(shí)現(xiàn)，要么極其復(fù)雜。畢竟開發(fā)工程師要通過代碼把動(dòng)效實(shí)現(xiàn)出來，設(shè)計(jì)師得用開發(fā)所能理解的語(yǔ)言來描述。就如同你能完美地解出一道數(shù)學(xué)題一樣，讓你把解題思路教給別人，你可能就沒那么順暢了。一方面取決于你的表述能力，而更重要的是對(duì)方的理解能力。過去所廣泛采用的通過動(dòng)效標(biāo)注輸出給開發(fā)的方式，都存在還原度的問題。很多時(shí)候還原度達(dá)到 80% 可能都算比較好的了。
而今天要說到的 Lottie 不僅可以 100% 還原動(dòng)效，而且無需動(dòng)效標(biāo)注。直接通過 AE 輸出動(dòng)效文件給開發(fā)。開發(fā)人員直接調(diào)用，然后完美還原。
Lottie 是 Airbnb 開源的一個(gè)動(dòng)畫渲染庫(kù)，同時(shí)支持 Android、iOS、React Native 平臺(tái)。Lottie 支持渲染播放 AE 動(dòng)畫。通過 AE 插件 bodymovie 導(dǎo)出 json 文件作為動(dòng)畫數(shù)據(jù)。
Lottie 可以應(yīng)用在 UI 設(shè)計(jì)的很多場(chǎng)景中。以下舉出幾個(gè)常用例子。
1. 動(dòng)態(tài)啟動(dòng)頁(yè)
2. 動(dòng)態(tài)圖標(biāo)/按鈕
3. 空頁(yè)面
以上僅列舉了部分常用案例，其實(shí) Lottie 的應(yīng)用場(chǎng)景遠(yuǎn)不止這些。在 APP 的多個(gè)模塊中都可以運(yùn)用，那么我們要如何將 Lottie 運(yùn)用在自己的工作項(xiàng)目中呢？那就要了解 Lottie 的原理了。
前面已經(jīng)提過 Lottie 是 Airbnb 開源的一個(gè)動(dòng)畫渲染庫(kù)。我們可以理解為它是一個(gè)多功能的視頻播放器，開發(fā)人員需要將這個(gè)播放器部署到相應(yīng)的環(huán)境中。然后設(shè)計(jì)人員提供視頻（動(dòng)效文件）給開發(fā)人員，讓開發(fā)人員按照要求播放視頻文件，即可完成動(dòng)效的應(yīng)用。
假設(shè)該按鈕動(dòng)效一共10幀，整個(gè)按鈕切換分為兩部分，第一部分：從菜單切換到關(guān)閉（1-10幀）；第二部分：從關(guān)閉切換到菜單（10-1）。我們可以讓開發(fā)通過以下控制方式，完成我們想要的效果。
按鈕動(dòng)效默認(rèn)顯示第1幀（菜單狀態(tài)），點(diǎn)擊按鈕以后開始播放動(dòng)效，動(dòng)效播放到第10幀的時(shí)候停止，并停在第10幀（關(guān)閉狀態(tài)）。當(dāng)按鈕為關(guān)閉狀態(tài)（第10幀）時(shí)，點(diǎn)擊按鈕以后動(dòng)效從第10幀倒放到第1幀（關(guān)閉狀態(tài)），并停在第1幀（菜單狀態(tài)）。
通過以上方式就完成了對(duì)一個(gè)動(dòng)效按鈕的控制。而日常工作中我們可以靈活地運(yùn)用多種控制方式。
首先動(dòng)效的觸發(fā)，可以是一次交互事件，比如點(diǎn)擊、滑動(dòng)；也可以是監(jiān)聽到了廣播，比如網(wǎng)絡(luò)異常等。而觸發(fā)以后的動(dòng)效控制也多種多樣，可以從開始播放到結(jié)束，也可以進(jìn)行倒放；可以循環(huán)播放某一段動(dòng)效；也可以從某一幀播放到另一幀，或者某一個(gè)時(shí)間點(diǎn)播放到另一個(gè)時(shí)間點(diǎn)；更多的控制方式需要大家在工作中慢慢挖掘。
Lottie雖然能夠滿足多種場(chǎng)景需要，但是并非支持所有的 AE 效果。設(shè)計(jì)制作時(shí)，需要考慮該效果是否支持。否則，會(huì)導(dǎo)致出錯(cuò)或者所用效果無法生效。
上圖為 Lottie 支持的主要 AE 屬性，此處有刪減掉部分不常用的屬性。可以打開以下鏈接查看完整版http://airbnb.io/lottie/#/supported-features
需要注意的是文檔中雖然說支持漸變，但是會(huì)出錯(cuò)，所以大家在使用矢量圖形時(shí)，請(qǐng)勿使用漸變效果。關(guān)于漸變效果的修復(fù)后續(xù)文章會(huì)提到，官網(wǎng)以后也會(huì)修復(fù)相關(guān)問題，但是沒有確切時(shí)間。
通過上圖我們可以了解到，Lottie 支持的 AE 屬性基本包含以下幾類：
（原文章來源于：https://www.uisdc.com/lottie-dynamic-design-guide）
禁用繼承屬性inheritAttrs和$attrs的使用
Index.html:
<div id="app">
<test-input
v-bind:class="class1"
v-bind:style="{fontSize:17+'px'}"
v-bind:test1='test1'
test2="test2"
placeholder="placeholder test3"
></test-input>
</div>
Index.js:
Vue.component('test-input', {
inheritAttrs: false,
template: <label ><br /> <p v-bind="$attrs">測(cè)試</p><br /> <input v-bind="$attrs"><br /> </label>
})
new Vue({
el:'#app',
data:{
class1:'class1note',
test1:'test1note',
test2:'test2note',
},
})
頁(yè)面結(jié)果：
當(dāng)將屬性修改為：inheritAttrs: true,的時(shí)候
頁(yè)面的結(jié)果：
包含了所有的屬性：
最后總結(jié)：
當(dāng)inheritAttrs的屬性值為true（不寫該行屬性的結(jié)果同true，也就是inheritAttrs默認(rèn)為true），組件的根元素會(huì)自動(dòng)繼承所有的屬性！當(dāng)為false的時(shí)候，根元素只會(huì)繼承注冊(cè)的屬性，自建的屬性不會(huì)繼承??！
attrs:它包含了父組件所有的自建屬性！可以通過v?kind=“ attrs:它包含了父組件所有的自建屬性！可以通過v-kind=“attrs:它包含了父組件所有的自建屬性！可以通過v?kind=“attrs”將所有自建屬性賦給想要的元素上??！
在涉及體驗(yàn)細(xì)節(jié)的小需求上，避免所有的不周到，方才是周到
其中，個(gè)人認(rèn)為，最為核心的是第二點(diǎn)：多體驗(yàn)原型或產(chǎn)品，直到自己覺得周到為止。
文章來源：站酷
自從做設(shè)計(jì)以來經(jīng)常會(huì)看到一些很高大上的理論，例如：格式塔法則、網(wǎng)格系統(tǒng)、黃金分割法等等，這些詞語(yǔ)給人第一印象就是很高大上，很難學(xué)會(huì)，也有很多設(shè)計(jì)師看到這些理論就被嚇到，認(rèn)為自己學(xué)不會(huì)，也不想學(xué)，因?yàn)槔碚撝R(shí)確實(shí)是學(xué)起來很枯燥。對(duì)于初學(xué)者的設(shè)計(jì)師來說，這些理論可以在短時(shí)間不用學(xué)太多，但是對(duì)已經(jīng)工作幾年的設(shè)計(jì)師來說，這些設(shè)計(jì)理論知識(shí)也是必不可少的。
只有掌握設(shè)計(jì)中必要的設(shè)計(jì)知識(shí)，才能讓自己的設(shè)計(jì)眼界、技能得到提升。就我個(gè)人而言，我在設(shè)計(jì)初期也是很反感這些所謂的理論知識(shí)，對(duì)于我來說簡(jiǎn)單通俗的教學(xué)才是最容易讓人接受的，理論太深?yuàn)W，我真的無法從中體會(huì)到真正的奧秘。但是，越到后面，我越喜歡研究那些設(shè)計(jì)理論知識(shí)，因?yàn)槲以絹碓蕉媚切├碚摰闹匾?，?duì)我的設(shè)計(jì)也有很大的幫助。所以今天我采用通俗易懂的方法，教大家去理解和掌握這些高大上的設(shè)計(jì)理論知識(shí)。
今天主要分享我們經(jīng)常聽到的黃金分割構(gòu)圖法。
黃金分割構(gòu)圖法：是一種由古希臘人發(fā)明的幾何學(xué)公式，遵循這一規(guī)則的構(gòu)圖形式被認(rèn)為是「和諧」的，在欣賞一件形象作品時(shí)這一規(guī)則的意義在于提供了一條被合理分割的幾何線段。
黃金分割構(gòu)圖法的基本理論來自于黃金比例 ── 1 : 1.618。
黃金分割構(gòu)圖法運(yùn)用到海報(bào)設(shè)計(jì)、畫冊(cè)設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、繪畫、服裝設(shè)計(jì)、logo 設(shè)計(jì)、電視電影、建筑等等領(lǐng)域。在攝影中也經(jīng)常會(huì)引入黃金分割比例，可以讓照片感覺更自然、舒適，更能吸引觀賞者，給人一種賞心悅目的視覺感受。
我們先賞析一些運(yùn)用黃金分割法的優(yōu)秀案例，通過賞析能讓我們體會(huì)到它的美和重要性。
1. 在海報(bào)中的應(yīng)用
從上面的 2 張人物海報(bào)案例中，可以看出都利用了黃金分割螺旋法的技巧，當(dāng)整張圖作為背景時(shí)，我們不知道圖片主題位置的掌控時(shí)，就可以采用黃金分割法的原則。對(duì)于人物，可以根據(jù)想要突出的人物某一部位，直接采用這種分割方法快速找到版面位置
下面2張海報(bào)是通過圖形和文字的結(jié)合，主題文字排版的位置也都剛剛好是黃金分割的編排，帶給人一種美的、舒適的畫面感，圖片和文字在版面的比例剛好是 1 : 0.618。
2. 在網(wǎng)頁(yè)中的應(yīng)用
上面 2 個(gè)網(wǎng)頁(yè)都采用了黃金分割的原則，大體將版面分為圖片區(qū)+文案區(qū)，比例為 1 : 0.618。上面同時(shí)采用了網(wǎng)格重疊的形式，而下面的就是最基本的黃金分割比例。版面的編排整體給人一種呼吸感、有序的、層次分明的視覺感受，并且瀏覽的順序也是井井有條，如下圖閱讀順序指引：
3. 在繪畫上的應(yīng)用
像我們看熟悉的名畫「蒙娜麗莎」、「維納斯的誕生」等也符合黃金分割的比例。黃金分割比例也在這些作品上經(jīng)過了歷史認(rèn)證，利用黃金分割布局，讓畫面更耐看、更精致。
4. 在攝影上的應(yīng)用
在攝影中也經(jīng)常會(huì)引入黃金分割比例，可以讓照片感覺更自然、舒適，更能吸引觀賞者，給人一種賞心悅目的視覺感受。使用黃金分割的攝影可以制造出一種空曠、寂靜的視覺效果，也可以制造出一種特寫鏡頭的效果。不知道怎么拍照好看，學(xué)會(huì)這一招你的攝影立馬高大上。
5. 在建筑上的應(yīng)用
在建筑設(shè)計(jì)中的運(yùn)用也有很多案例，例如上面的金字塔和泰姬陵的多處布局都能看出黃金分割，第三張中國(guó)古建筑也都運(yùn)用了黃金分割構(gòu)圖。自古以來很多文化建筑都采用了這個(gè)構(gòu)圖，讓建筑看起來更加美觀、耐看、精致。
了解了螺旋黃金分割法的用途和好處，我們最主要的是需要知道怎么來畫這個(gè)螺旋黃金圖。
1. 新建畫布
2. 畫正方形
這里畫正方形是最關(guān)鍵的一步，我們只要知道螺旋黃金圖的比例就可以很快的畫出來。
螺旋黃金圖比例為：13 : 8 : 5 : 3 : 2 : 1
只要知道螺旋黃金圖的比例我們就可以開始畫正方形了，簡(jiǎn)單的正方形不用我多說吧。我們按 10 倍的比例來畫圖，簡(jiǎn)單的意思就是前面的螺旋黃金圖比例都乘 10，變?yōu)?130 : 80 : 50 : 30 : 20 : 10，再根據(jù)這個(gè)數(shù)字畫出 6 個(gè)正方形。
正方形畫好后按照這個(gè)轉(zhuǎn)圈的順序排好即可。
3. 畫圓弧線
正方形畫好后，畫圓弧線，可以通過畫正圓得到。
圓弧線為正圓的四分之一，圓的半徑為每個(gè)不同正方形的邊長(zhǎng)，通過不同大小的正方形畫出不同大小的圓弧即可。
開始畫圓?。阂源笳叫蔚挠蚁陆菫閳A心畫正圓，注意相切位置，畫好后刪除多余的錨點(diǎn)。
△ 圓心位置
△ 相切位置
△ 刪除多余錨點(diǎn)
△ 圓弧畫完后
到了這一步基本也就出現(xiàn)我們想要的螺旋黃金圖，最后只需要將我們的正方形改成描邊的模式即可。
△ 最終圖形
這里展示一下第二種方法：
螺旋黃金比1 : 1.618在畫面中怎么看？
說了這么多，沒有實(shí)際的操作案例你們是不是也很頭痛，到底拿到這個(gè)技巧怎么去使用呢？在我這里例舉一個(gè)橫版和一個(gè)豎版的案例。
找素材
這里找來幾張圖片，因?yàn)槭亲龇治霭咐?，所以我就選擇我自己喜歡的圖，我選擇的是圖1。
圖片調(diào)整
圖片確定后，我們就需要把圖放到我們的畫布中。
但是問題來了，一般我們的設(shè)計(jì)尺寸基本是不會(huì)和找到的素材是一樣大的，我們到底要怎樣放大圖片呢？圖片中哪些元素可以忽略，哪些需要重視？螺旋黃金分割法就可以用上了。
利用我們的螺旋黃金分割圖，放在我們的版面中。接下來就放大我們的素材圖片，分析圖片結(jié)構(gòu)。圖片上方都是天空，左邊是海和天空，只有右下比較復(fù)雜，有人和零碎的石頭，所以我們這里圖片就以人為畫面中的焦點(diǎn)，那么我們的螺旋圖就需要改變一下位置。
調(diào)整圖片大小和位置，將圖片中的人物放在螺旋圖的焦點(diǎn)位置，這樣我們的版面就快速地確定了視覺焦點(diǎn)。
文字排版
將文字排版在畫布中，再根據(jù)文字豎排的樣式，和人閱讀的習(xí)慣，調(diào)整圖的方向和文字位置，使人看向主題文字，給人一種指引的方向。
總結(jié)：主要利用螺旋黃金分割法調(diào)整圖片的位置焦點(diǎn)，使畫面中心達(dá)到舒適耐看和精致的視覺效果。
標(biāo)記分析圖：
這個(gè)案例我就不做太多的講解，因?yàn)楹芎?jiǎn)單，直接利用螺旋黃金分割構(gòu)圖的方法，將版面按1 : 0.618的比例劃分，然后在這個(gè)比例畫布中排版文案和圖片。
圖片位置排版
素材選擇上面的圖2，這里就做一張豎版的海報(bào)。
將素材圖放在畫布中，準(zhǔn)備好我們的螺旋黃金分割圖，也放在畫布中。根據(jù)圖片本身的特點(diǎn)，人物只有上半身，所以將圖片放在底部最為合適。至于人物應(yīng)該靠中間還是靠邊，我們同可以根據(jù)圖片人物本身的姿勢(shì)判斷，根據(jù)人物是微抬頭向上看，角度約 30 度，所以選擇將人物靠邊。
再就是人物具體位置的掌控，我們同樣和上面的案例一樣直接利用螺旋黃金分割圖做參考位置選擇，所以就很快找到合適的位置，如上面右圖。
填充背景和文案
我們將背景顏色填充為天空統(tǒng)一的色彩，建立網(wǎng)格，將文案排版在畫布中，上面主要是海報(bào)中的主要文案及主題文案，文案和圖片的總體比例為1 : 0.618，遵循我們的黃金法則。
根據(jù)圖片的氣質(zhì)，圖片中的色彩和人物都屬于文藝氣質(zhì)，清新、寂靜、雅致的感覺，所以我們這里可以選襯線體宋體，結(jié)合韓文來體現(xiàn)整體的氣質(zhì)。
效果展示
最后看看海報(bào)效果吧，主要講解螺旋黃金分割圖的使用，所以排版方面講解的比較簡(jiǎn)單，以及主題文字都采用最簡(jiǎn)單粗暴的字體，沒有過多的修飾。
文章分享了螺旋黃金分割構(gòu)圖的用途，很廣泛，包含海報(bào)設(shè)計(jì)、畫冊(cè)設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、繪畫、服裝設(shè)計(jì)、logo設(shè)計(jì)、電視電影、建筑、攝影等等領(lǐng)域，以及分享了黃金分割圖形的畫法，3 個(gè)簡(jiǎn)單的案例實(shí)操，利用黃金分割構(gòu)圖來幫助我們構(gòu)圖和排版，最有利于我們對(duì)圖片焦點(diǎn)位置的選擇和排版分布的掌控。
文章來源：優(yōu)設(shè)
在做項(xiàng)目做產(chǎn)品的過程中，作為互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師的我們，經(jīng)常會(huì)接到來自 PM/領(lǐng)導(dǎo)/業(yè)務(wù)方等等的各種需求。有的時(shí)候，哪怕一個(gè)小功能、次次次級(jí)頁(yè)面都會(huì)爭(zhēng)得不可開交。這個(gè)時(shí)候怎么辦呢？到底應(yīng)該聽誰(shuí)的呢？哪個(gè)需求優(yōu)先級(jí)高？哪種呈現(xiàn)方法是更靠譜的呢？
今天我們就來聊聊一個(gè)非常實(shí)用的需求分級(jí)方法 — KANO模型。
KANO 模型是東京理工大學(xué)教授狩野紀(jì)昭（Noriaki Kano）發(fā)明的對(duì)用戶需求分類和排序的工具。通過分析用戶對(duì)產(chǎn)品功能的滿意程度，對(duì)產(chǎn)品功能進(jìn)行分級(jí)，從而確定產(chǎn)品實(shí)現(xiàn)過程中的優(yōu)先級(jí)。
KANO 模型是一個(gè)典型的定性分析模型，一般不直接用來測(cè)量用戶的滿意度，常用于識(shí)別用戶對(duì)新功能的接受度。幫助企業(yè)了解不同層次的用戶需求，找出顧客和企業(yè)的接觸點(diǎn)，挖掘出讓顧客滿意至關(guān)重要的因素。
在 KANO 模型中，根據(jù)不同類型的需求與用戶滿意度之間的關(guān)系，可將影響用戶滿意度的因素分為五類：基本型需求、期望型需求、興奮型需求、無差異需求、反向型需求。
興奮型需求
所謂暗處，用戶意想不到的，需要挖掘/洞察。若不提供此需求，用戶滿意度不會(huì)降低；若提供此需求，用戶滿意度會(huì)有很大的提升。
當(dāng)用戶對(duì)一些產(chǎn)品或服務(wù)沒有表達(dá)出明確的需求時(shí)，企業(yè)提供給顧客一些完全出乎意料的產(chǎn)品屬性或服務(wù)行為，使用戶產(chǎn)生驚喜，用戶就會(huì)非常滿意，從而提高用戶忠誠(chéng)度。
這類需求往往是代表顧客的潛在需求，企業(yè)的做法就是去尋找發(fā)掘這樣的需求，領(lǐng)先對(duì)手。
期望型需求
所謂癢處。當(dāng)提供此需求，用戶滿意度會(huì)提升；當(dāng)不提供此需求，用戶滿意度會(huì)降低。
它是處于成長(zhǎng)期的需求，客戶、競(jìng)爭(zhēng)對(duì)手和企業(yè)自身都關(guān)注的需求，也是體現(xiàn)競(jìng)爭(zhēng)能力的需求。
對(duì)于這類需求，企業(yè)的做法應(yīng)該是注重提高這方面的質(zhì)量，力爭(zhēng)超過競(jìng)爭(zhēng)對(duì)手。
基本型需求
所謂痛點(diǎn)。對(duì)于用戶而言，這些需求是必須滿足的，理所當(dāng)然的。當(dāng)不提供此需求，用戶滿意度會(huì)大幅降低，但優(yōu)化此需求，用戶滿意度不會(huì)得到顯著提升。
對(duì)于這類需求，是核心需求，也是產(chǎn)品必做功能，企業(yè)的做法應(yīng)該是注重不要在這方面減分，需要企業(yè)不斷調(diào)查和了解用戶需求，并通過合適的方法在產(chǎn)品中體現(xiàn)這些要求。
無差異需求
用戶根本不在意的需求，對(duì)用戶體驗(yàn)毫無影響。
無論提供或不提供此需求，用戶滿意度都不會(huì)有改變。對(duì)于這類需求，企業(yè)的做法應(yīng)該是盡量避免。
反向型需求
用戶根本都沒有此需求，提供后用戶滿意度反而下降。
總而言之，我們做產(chǎn)品設(shè)計(jì)時(shí)，需要盡量避免無差異型需求、反向型需求，至少做好基本型需求、期望型需求，如果可以的話再努力挖掘興奮型需求。
KANO 模型分析方法主要是通過標(biāo)準(zhǔn)化問卷進(jìn)行調(diào)研，根據(jù)調(diào)研結(jié)果對(duì)各因素屬性歸類，解決需求屬性的定位問題，以提高用戶滿意度。
1. 明確目的
做之前，必須明白調(diào)研的目的是什么，是否合適用 KANO 模型解決，為什么要用 KANO 模型解決。
例如：企業(yè)為賣家開發(fā)的 CRM 工具，隨著賣家客戶的不斷增長(zhǎng)，CRM 系統(tǒng)中需引入一些新的功能滿足其管理需求。而我們作為產(chǎn)品開發(fā)設(shè)計(jì)者，需要知道這些功能哪些是基本功能，哪些是增值功能，功能的優(yōu)先級(jí)又該如何排列等等。
KANO 模型就可以幫助我們很好的貼和業(yè)務(wù)需求，從具備程度和滿意程度這兩個(gè)維度出發(fā)，將 CRM 中新增的功能進(jìn)行區(qū)分和排序，從而知道：哪些功能是一定要有，否則會(huì)直接影響用戶體驗(yàn)的（基礎(chǔ)屬性、期望屬性）；哪些功能是沒有時(shí)不會(huì)造成負(fù)向影響，擁有時(shí)會(huì)給用戶帶來驚喜的（興奮屬性）；哪些功能是可有可無，具備與否對(duì)用戶都不會(huì)有大影響的（無差異因素）。
2. 設(shè)計(jì)問卷
此問卷調(diào)查表劃分維度有兩個(gè)：提供時(shí)的滿意程度、不提供時(shí)的滿意程度。而滿意程度被劃分為 5 級(jí)（非常滿意、滿意、一般、不滿意、很不滿意），因?yàn)槿说臐M意程度往往是漸變的，而不是突變的。
滿意程度的文案可根據(jù)實(shí)際問題靈活修改，如使用（非常喜歡、理應(yīng)如此、無所謂、勉強(qiáng)接受、很不喜歡 或者 非常有用、挺實(shí)用、無所謂、不實(shí)用、很不實(shí)用 ）更加形象的描述。
例如：在「通訊錄」中，是否需要直接提供「撥打電話」的按鈕？問卷設(shè)置正反兩題：
如果我們?cè)凇竿ㄓ嶄洝沟目蛻袅斜碇?，提供「撥打電話」的按鈕，你的感受是：
A.非常喜歡 B.理應(yīng)如此 C.無所謂 D.勉強(qiáng)接受 E.很不喜歡
如果我們?cè)凇竿ㄓ嶄洝沟目蛻袅斜碇?，沒有提供「撥打電話」的按鈕，你的感受是：
A.非常喜歡 B.理應(yīng)如此 C.無所謂 D.勉強(qiáng)接受 E.很不喜歡
為了更加形象且一目了然，我們可以如下設(shè)計(jì)。填問卷的人只需要在空白處打勾打叉就好了，非常方便。
設(shè)計(jì)問卷的過程中，有幾點(diǎn)要注意：
例如：
3. 清洗數(shù)據(jù)
在收集所有問卷之后，注意清洗掉個(gè)別的明顯胡亂回答的個(gè)例。如全部問題都選擇「我很喜歡」或「很不喜歡」的，這種回答毫無參考價(jià)值。
4. 整理分類
為了能夠?qū)⑿枨髤^(qū)分為基本型需求、期望型需求和興奮需求，需按照正向和負(fù)向問題的回答對(duì)屬性進(jìn)行分類，具體分類對(duì)照下表。
當(dāng)正向問題的回答是「我喜歡」，負(fù)向問題的回答是「我不喜歡」，那么 KANO 評(píng)價(jià)表中，這項(xiàng)功能特性就為「O」，即期望型。
如果將用戶正負(fù)向問題的回答結(jié)合后，為「M」或「A」，則該功能被分為基本型需求或興奮型需求。
其中，R 表示用戶不需要這種功能，甚至對(duì)該功能有反感；I 類表示無差異需求，用戶對(duì)這一功能無所謂。
Q 表示有疑問的結(jié)果，一般不會(huì)出現(xiàn)這個(gè)結(jié)果（除非這個(gè)問題的問法不合理，或者是用戶沒有很好的理解問題，或者是用戶在填寫問題答案時(shí)出現(xiàn)錯(cuò)誤）。
簡(jiǎn)單來說就是：
A：興奮型；O：期望型；M：必備型；I：無差異型；R：反向型；Q：可疑結(jié)果
注意：以上對(duì)照表只是的最常見的一種歸類方式。實(shí)際操作中，可因人而異，因產(chǎn)品、公司、地域而異（尤其是關(guān)于「R」和「O」的定義），因?yàn)闈M意度本身就難以衡量。
判斷 KANO 屬性
記錄所有合理的數(shù)據(jù)，計(jì)算出各項(xiàng)占比，填寫在下面的對(duì)照表里面。
從上表中不難看出，「通訊錄中「撥打電話」「這個(gè)功能在 6 個(gè)維度上均可能有得分，將相同維度的比例相加后，可得到6 個(gè)屬性維度的占比總和。 總和最大的一個(gè)屬性維度，便是該功能的屬性歸屬。
可看出「在通訊錄中提供 ‘撥打電話’ 功能屬于興奮型需求。即說明沒有這個(gè)功能，用戶不會(huì)有強(qiáng)烈的負(fù)面情緒，但是有了這個(gè)功能，會(huì)讓用戶感受到滿意和驚喜。
如果你只判斷這一個(gè)需求，那么進(jìn)行到這一步就可以到此為止了。如果涉及到多個(gè)需求的排序分級(jí)，你還需進(jìn)行下一步。
計(jì)算 better-worse系數(shù)
Better-worse 系數(shù)，表示某功能可以增加滿意或者消除不喜歡的影響程度。
Better，可以解讀為增加后的滿意系數(shù)。Better 的數(shù)值通常為正，代表如果產(chǎn)品提供某種功能或服務(wù)，用戶滿意度會(huì)提升。正值越大/越接近 1，則表示用戶滿意度提升的效果會(huì)越強(qiáng)，滿意度上升的越快。
Worse，可以叫做消除后的不滿意系數(shù)。Worse 的數(shù)值通常為負(fù)，代表產(chǎn)品如果不提供某種功能或服務(wù)，用戶的滿意度會(huì)降低。其負(fù)值越大/越接近 -1，則表示對(duì)用戶不滿意度的影響最大，滿意度降低的影響效果越強(qiáng)，下降的越快。
因此，根據(jù) better-worse 系數(shù)，對(duì)兩者系數(shù)絕對(duì)分值較高的項(xiàng)目應(yīng)當(dāng)優(yōu)先實(shí)施。
其計(jì)算公式如下：
結(jié)果產(chǎn)出
例如：某產(chǎn)品希望優(yōu)化 5 項(xiàng)功能，但是不知道哪些是用戶需要的。通過 KANO 調(diào)研分析，可以分別計(jì)算出 5 項(xiàng)功能的better-worse 系數(shù)。
根據(jù) 5 項(xiàng)功能的 better-worse 系數(shù)值，將散點(diǎn)圖劃分為四個(gè)象限，以確立需求優(yōu)先級(jí)。
在實(shí)際項(xiàng)目中：
結(jié)論：
根據(jù) KANO 模型計(jì)算出的 better-worse 系數(shù)值，說明該產(chǎn)品先滿足功能 5 和 4，再優(yōu)化功能 2，最后滿足功能 1。而功能 3對(duì)用戶來說有或者沒有都無所謂，屬無差異型需求，并沒有必要花大力氣去實(shí)現(xiàn)。
KANO 模型定義了三個(gè)層次的需求：基本型需求、期望型需求和興奮型需求。
根據(jù) KANO 模型建立產(chǎn)品需求分析優(yōu)先級(jí)，運(yùn)用到產(chǎn)品設(shè)計(jì)中就是要抓住用戶的核心需求，解決用戶痛點(diǎn)（基本型需求），抓住用戶癢點(diǎn)（期望型需求）。在確保這兩者都解決的前提下，再給用戶一些 high 點(diǎn)（興奮型需求）。
嚴(yán)格來說，KANO 模型并不是一個(gè)測(cè)量用戶滿意度的模型，而是對(duì)用戶需求的分類，通常在滿意度評(píng)價(jià)工作前期作為輔助研究的 典型定性分析模型。
KANO 模型的目的是通過對(duì)用戶的不同需求進(jìn)行區(qū)分處理，了解不同層次的用戶需求，幫助企業(yè)找出提高產(chǎn)品用戶滿意度的切入點(diǎn)，或者識(shí)別出使用戶滿意至關(guān)重要的因素。
但需求會(huì)因人而異，會(huì)因文化差異而不同； 也會(huì)隨著時(shí)間變化。可能前段時(shí)間的期望型需求，甚至興奮型需求，到如今已變成了基礎(chǔ)型需求。所以作為產(chǎn)品設(shè)計(jì)者，我們應(yīng)該持續(xù)調(diào)研需求，對(duì)產(chǎn)品進(jìn)行迭代優(yōu)化。
重分組介紹
語(yǔ)法：<?for-each-group: BASE-GROUP;GROUPING-ELEMENT?>
用法：重分組可以把XML數(shù)據(jù)做重新分組，這樣數(shù)據(jù)的展示就不一定必須按照XML數(shù)據(jù)的結(jié)構(gòu)顯示。例如原來的XML數(shù)據(jù)結(jié)構(gòu)是CD類別->CD信息（名稱，年份，國(guó)家，價(jià)格），我們可以用重分組功能按CD年份->CD國(guó)家來顯示.
重分組應(yīng)用
1 按照和XML數(shù)據(jù)不同的結(jié)構(gòu)顯示數(shù)據(jù)
XML數(shù)據(jù)格式如下：
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
。。。。。
</CATALOG>
報(bào)表打算按照國(guó)家和年份重新分組，用到的重分組如下：
<?for-each-group:CD;COUNTRY?>
<?for-each:current-group();YEAR?>
1
2
這里的current-group()表示當(dāng)前COUNTRY組下的子分組
2 顯示PIVOT報(bào)表
XML數(shù)據(jù)如下：
<ROWSET>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2005</YEAR>
<QUARTER>Q1</QUARTER>
<SALES>1000</SALES>
</RESULTS>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2005</YEAR>
<QUARTER>Q2</QUARTER>
<SALES>2000</SALES>
</RESULTS>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2004</YEAR>
<QUARTER>Q1</QUARTER>
<SALES>3000</SALES>
</RESULTS>
。。。。
</ROWSET>
如果想按年份生成PIVOT表，可以用如下TAG實(shí)現(xiàn)：
<?for-each-group@column:RESULTS;YEAR?>
<?YEAR?>
<?end for-each-group?>
<?for-each-group:RESULTS;INDUSTRY?>
<?for-each-group@cell:current-group();YEAR?>
<?sum(current-group()//SALES)?>
<?end for-each-group?>
<?end for-each-group?>
這里的@cell是給每個(gè)組生成一個(gè)CELL
vue中關(guān)于插槽的文檔說明很短，語(yǔ)言又寫的很凝練，再加上其和methods，data，computed等常用選項(xiàng)使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開發(fā)者容易產(chǎn)生“算了吧，回頭再學(xué)，反正已經(jīng)可以寫基礎(chǔ)組件了”，于是就關(guān)閉了vue說明文檔。
實(shí)際上，插槽的概念很簡(jiǎn)單，下面通過分三部分來講。這個(gè)部分也是按照vue說明文檔的順序來寫的。
進(jìn)入三部分之前，先讓還沒接觸過插槽的同學(xué)對(duì)什么是插槽有一個(gè)簡(jiǎn)單的概念：插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實(shí)際上，一個(gè)slot最核心的兩個(gè)問題這里就點(diǎn)出來了，是顯示不顯示和怎樣顯示。
由于插槽是一塊模板，所以，對(duì)于任何一個(gè)組件，從模板種類的角度來分，其實(shí)都可以分為非插槽模板和插槽模板兩大類。
非插槽模板指的是html模板，指的是‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制；插槽模板是slot，它是一個(gè)空殼子，因?yàn)樗@示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定，slot寫在組件template的哪塊，父組件傳過來的模板將來就顯示在哪塊。
首先是單個(gè)插槽，單個(gè)插槽是vue的官方叫法，但是其實(shí)也可以叫它默認(rèn)插槽，或者與具名插槽相對(duì)，我們可以叫它匿名插槽。因?yàn)樗挥迷O(shè)置name屬性。
單個(gè)插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個(gè)組件中只能有一個(gè)該類插槽。相對(duì)應(yīng)的，具名插槽就可以有很多個(gè)，只要名字（name屬性）不同就可以了。
下面通過一個(gè)例子來展示。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<child>
-
<div class="tmpl">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
<h3>這里是子組件</h3>
-
<slot></slot>
-
</div>
-
</template>
在這個(gè)例子里，因?yàn)楦附M件在<child></child>里面寫了html模板，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說，子組件的匿名插槽被使用了，是被下面這塊模板使用了。
-
<div class="tmpl">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
最終的渲染結(jié)果如圖所示：
-
-
注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍(lán)色填充。
匿名插槽沒有name屬性，所以是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個(gè)組件中出現(xiàn)N次。出現(xiàn)在不同的位置。下面的例子，就是一個(gè)有兩個(gè)具名插槽和單個(gè)插槽的組件，這三個(gè)插槽被父組件用同一套css樣式顯示了出來，不同的是內(nèi)容上略有區(qū)別。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<child>
-
<div class="tmpl" slot="up">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
-
<div class="tmpl" slot="down">
-
<span>菜單-1</span>
-
<span>菜單-2</span>
-
<span>菜單-3</span>
-
<span>菜單-4</span>
-
<span>菜單-5</span>
-
<span>菜單-6</span>
-
</div>
-
<div class="tmpl">
-
<span>菜單->1</span>
-
<span>菜單->2</span>
-
<span>菜單->3</span>
-
<span>菜單->4</span>
-
<span>菜單->5</span>
-
<span>菜單->6</span>
-
</div>
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
// 具名插槽
-
<slot name="up"></slot>
-
<h3>這里是子組件</h3>
-
// 具名插槽
-
<slot name="down"></slot>
-
// 匿名插槽
-
<slot></slot>
-
</div>
-
</template>
顯示結(jié)果如圖：
可以看到，父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽。沒有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名插槽。
最后，就是我們的作用域插槽。這個(gè)稍微難理解一點(diǎn)。官方叫它作用域插槽，實(shí)際上，對(duì)比前面兩種插槽，我們可以叫它帶數(shù)據(jù)的插槽。什么意思呢，就是前面兩種，都是在組件的template里面寫
-
匿名插槽
-
<slot></slot>
-
具名插槽
-
<slot name="up"></slot>
但是作用域插槽要求，在slot上面綁定數(shù)據(jù)。也就是你得寫成大概下面這個(gè)樣子。
-
<slot name="up" :data="data"></slot>
-
export default {
-
data: function(){
-
return {
-
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
-
}
-
},
-
}
我們前面說了，插槽最后顯示不顯示是看父組件有沒有在child下面寫模板，像下面那樣。
-
<child>
-
html模板
-
</child>
寫了，插槽就總得在瀏覽器上顯示點(diǎn)東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。
OK，我們說有html模板的情況，就是父組件會(huì)往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的html+css共同決定，但是這套樣式里面的內(nèi)容呢？
正因?yàn)樽饔糜虿宀劢壎艘惶讛?shù)據(jù)，父組件可以拿來用。于是，情況就變成了這樣：樣式父組件說了算，但內(nèi)容可以顯示子組件插槽綁定的。
我們?cè)賮韺?duì)比，作用域插槽和單個(gè)插槽和具名插槽的區(qū)別，因?yàn)閱蝹€(gè)插槽和具名插槽不綁定數(shù)據(jù)，所以父組件是提供的模板要既包括樣式由包括內(nèi)容的，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父組件自己提供的內(nèi)容；而作用域插槽，父組件只需要提供一套樣式（在確實(shí)用作用域插槽綁定的數(shù)據(jù)的前提下）。
下面的例子，你就能看到，父組件提供了三種樣式(分別是flex、ul、直接顯示)，都沒有提供數(shù)據(jù)，數(shù)據(jù)使用的都是子組件插槽自己綁定的那個(gè)人名數(shù)組。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<!--第一次使用：用flex展示數(shù)據(jù)-->
-
<child>
-
<template slot-scope="user">
-
<div class="tmpl">
-
<span v-for="item in user.data">{{item}}</span>
-
</div>
-
</template>
-
-
</child>
-
-
<!--第二次使用：用列表展示數(shù)據(jù)-->
-
<child>
-
<template slot-scope="user">
-
<ul>
-
<li v-for="item in user.data">{{item}}</li>
-
</ul>
-
</template>
-
-
</child>
-
-
<!--第三次使用：直接顯示數(shù)據(jù)-->
-
<child>
-
<template slot-scope="user">
-
{{user.data}}
-
</template>
-
-
</child>
-
-
<!--第四次使用：不使用其提供的數(shù)據(jù), 作用域插槽退變成匿名插槽-->
-
<child>
-
我就是模板
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
-
<h3>這里是子組件</h3>
-
// 作用域插槽
-
<slot :data="data"></slot>
-
</div>
-
</template>
-
-
export default {
-
data: function(){
-
return {
-
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
-
}
-
}
-
}
結(jié)果如圖所示：
以上三個(gè)demo就放在GitHub了，有需要的可以去取。使用非常方便，是基于vue-cli搭建工程。
https://github.com/cunzaizhuyi/vue-slot-demo
hexo pc機(jī)上的配置 (一切操作都是在git bash)
安裝git
安裝nodejs
安裝hexo
備注：用 npm 安裝話經(jīng)常出現(xiàn)卡住而導(dǎo)致無法正常安裝，解決辦法就是修改 npm 的安裝源，
這里選擇淘寶 NPM 鏡像，這是一個(gè)完整 npmjs.org 鏡像，你可以用此代替官方版本，同步頻
率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步。
npm config set registry https://registry.npm.taobao.org
創(chuàng)建 你的Hexo 目錄
mkdir "your hexo dir name"
//創(chuàng)建一個(gè)自定義的hexo目錄，比如我就在用戶根目錄創(chuàng)建了一個(gè)myhexo文件夾（macOS）
cd "your hexo dir name" //進(jìn)入到剛剛創(chuàng)建的目錄
安裝 hexo-cli
npm install -g hexo-cli
初始化該文件夾
hexo init
安裝hexo的擴(kuò)展插件
npm install
等執(zhí)行成功以后安裝兩個(gè)插件， hexo-deployer-git 和 hexo-server ,這倆插件的作用分別是使用Git自動(dòng)部署，和本地簡(jiǎn)單的服務(wù)器。
npm install hexo-deployer-git --save
npm install hexo-server --save
到這里hexo的本地搭建已經(jīng)基本結(jié)束了。
打開hexo
hexo g
hexo server
git用戶
創(chuàng)建以用于提交
git config --global user.name "yourname"
git config --global user.email "youremail
生成ssh公鑰密鑰
cd ~/.ssh
ssh-keygen -t rsa -C "你的email"
-----------------------------------------------------------------------------------------------------------------
linux (ubuntu + 阿里云) 服務(wù)器上的配置
安裝nginx
切換至root用戶
sudo su root
apt-get install nginx
查看nginx版本
nginx -v
啟動(dòng)nginx
service nginx start
可以查看nginx的端口號(hào)
ps -aux | grep nginx
啟動(dòng)后，在網(wǎng)頁(yè)重輸入ip地址，即可看到nginx的歡迎頁(yè)面。至此nginx安裝成功
cd /etc/nginx
vim sites-available/default
因?yàn)槲覀兪悄胣ginx做 Web 服務(wù)器，所以我們需要安裝部署好nginx,我們可以專門為hexo創(chuàng)建一個(gè)部署目錄，比如我創(chuàng)建了/home/xufushen/hexo文件夾，并把nginx的配置文件nginx.conf中的部署目錄改為/home/xufushen/hexo，配置文件在/etc/nginx/conf里；同樣可以使用默認(rèn)目錄，nginx的默認(rèn)目錄為/var/www/html.
安裝node.js
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
apt-get install -y nodejs
安裝git
apt-get install -y git
創(chuàng)建一個(gè)git用戶
sudo adduser git
雖說現(xiàn)在的倉(cāng)庫(kù)只有我們自己在使用，新建一個(gè) git 用戶顯得不是很有必要，但是為了安全起見，還是建議使用單獨(dú)的 git 用戶來專門運(yùn)行 git 服務(wù)
添加證書登入
mkdir .ssh
mkdir authorized_keys
剛在在本地創(chuàng)建或者已經(jīng)擁有的公鑰，也就是 ~/.ssh/id_rsa.pub 文件里的內(nèi)容添加到服務(wù)器的 /home/git/.ssh/authorized_keys 文件中，如上所說，添加公鑰之后可以防止每次 push 都輸入密碼。 (使用Xftp軟件直接將文件拖入)
初始化 Git 倉(cāng)庫(kù)
可以將git倉(cāng)庫(kù)放到自定義位置，我是將其放在 /xufushen/blog/ 目錄下的
sudo mkdir /xufushen/blog/
cd /xufushen/blog/
git init --bare blog.git
使用 --bare 參數(shù)，Git 就會(huì)創(chuàng)建一個(gè)裸倉(cāng)庫(kù)，裸倉(cāng)庫(kù)沒有工作區(qū)，我們不會(huì)在裸倉(cāng)庫(kù)上進(jìn)行操作，它只為共享而存在。
配置 git hooks
我們這里要使用的是 post-receive 的 hook，這個(gè) hook 會(huì)在整個(gè) git 操作過程完結(jié)以后被運(yùn)行.關(guān)于hooks的內(nèi)容詳情點(diǎn)擊這里
在 blog.git/hooks 目錄下新建一個(gè) post-receive 文件
cd /var/repo/blog.git/hooks
編輯這個(gè)文件
vim post-receive
設(shè)置這個(gè)文件的可執(zhí)行權(quán)限
chmod +x post-receive
改變 blog.git 目錄的擁有者為 xufushen 用戶
chown -R xufushen:gxufushenit blog.git
禁用 xufushen 用戶的 shell 登錄權(quán)限
出于安全考慮，我們要讓 xufushen 用戶不能通過 shell 登錄?？梢跃庉?/etc/passwd 來實(shí)現(xiàn)
vim /etc/passwd
#將
git:x:1001:1001:,,,:/home/git:/bin/bash
#改成
git:x:1001:1001:,,,:/home/git:/usr/bin/git-shell
這樣 xufushen 用戶可以通過 ssh 正常使用 git，但是無法登錄 shell。 至此，服務(wù)器環(huán)境的搭建已經(jīng)基本結(jié)束。
配置本地_config.yml文件,完成自動(dòng)化部署
配置 hexo 的 deploy
修改 hexo 目錄下的 _config.yml 找到 deploy, 修改為：
deploy:
ype: git
repo: xufushen@47.100.184.175:/home/xufushen/blog/blog.git
branch: master
repo的地址為你自己的地址以及 git 倉(cāng)庫(kù)目錄
使用hexo blog
新建文章：
hexo new "post name"
生成 & 部署：
hexo clean && hexo g && hexo d
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在搭建的過程遇到的問題
連到服務(wù)器后無法連接到repository
這是因?yàn)槟阍趧?chuàng)建blog.git與hexo文件時(shí)要把的歸屬用戶與用戶組更改為創(chuàng)建的用戶
UML類圖幾種關(guān)系的總結(jié)，泛化 = 實(shí)現(xiàn) > 組合 > 聚合 > 關(guān)聯(lián) > 依賴
在UML類圖中，常見的有以下幾種關(guān)系: 泛化（Generalization）, 實(shí)現(xiàn)（Realization），關(guān)聯(lián)（Association)，聚合（Aggregation），組合(Composition)，依賴(Dependency)
泛化（Generalization）
【泛化關(guān)系】：是一種繼承關(guān)系，表示一般與特殊的關(guān)系，它指定了子類如何特化父類的所有特征和行為。例如：老虎是動(dòng)物的一種，即有老虎的特性也有動(dòng)物的共性。
【箭頭指向】：帶三角箭頭的實(shí)線，箭頭指向父類
實(shí)現(xiàn)（Realization）
【實(shí)現(xiàn)關(guān)系】：在這里插入圖片描述是一種類與接口的關(guān)系，表示類是接口所有特征和行為的實(shí)現(xiàn).
【箭頭指向】：帶三角箭頭的虛線，箭頭指向接口
關(guān)聯(lián)（Association)
【關(guān)聯(lián)關(guān)系】：是一種擁有的關(guān)系，它使一個(gè)類知道另一個(gè)類的屬性和方法；如：老師與學(xué)生，丈夫與妻子關(guān)聯(lián)可以是雙向的，也可以是單向的。雙向的關(guān)聯(lián)可以有兩個(gè)箭頭或者沒有箭頭，單向的關(guān)聯(lián)有一個(gè)箭頭。
【代碼體現(xiàn)】：成員變量
【箭頭及指向】：帶普通箭頭的實(shí)心線，指向被擁有者
上圖中，老師與學(xué)生是雙向關(guān)聯(lián)，老師有多名學(xué)生，學(xué)生也可能有多名老師。但學(xué)生與某課程間的關(guān)系為單向關(guān)聯(lián)，一名學(xué)生可能要上多門課程，課程是個(gè)抽象的東西他不擁有學(xué)生。
聚合（Aggregation）
【聚合關(guān)系】：是整體與部分的關(guān)系，且部分可以離開整體而單獨(dú)存在。如車和輪胎是整體和部分的關(guān)系，輪胎離開車仍然可以存在。
聚合關(guān)系是關(guān)聯(lián)關(guān)系的一種，是強(qiáng)的關(guān)聯(lián)關(guān)系；關(guān)聯(lián)和聚合在語(yǔ)法上無法區(qū)分，必須考察具體的邏輯關(guān)系。
【代碼體現(xiàn)】：成員變量
【箭頭及指向】：帶空心菱形的實(shí)心線，菱形指向整體
小技巧：空心菱形表示聚合，好聚好散，所以生命周期可以不同。
組合(Composition)
【組合關(guān)系】：是整體與部分的關(guān)系，但部分不能離開整體而單獨(dú)存在。如公司和部門是整體和部分的關(guān)系，沒有公司就不存在部門。
組合關(guān)系是關(guān)聯(lián)關(guān)系的一種，是比聚合關(guān)系還要強(qiáng)的關(guān)系，它要求普通的聚合關(guān)系中代表整體的對(duì)象負(fù)責(zé)代表部分的對(duì)象的生命周期。
【代碼體現(xiàn)】：成員變量
【箭頭及指向】：帶實(shí)心菱形的實(shí)線，菱形指向整體
依賴(Dependency)
【依賴關(guān)系】：是一種使用的關(guān)系，即一個(gè)類的實(shí)現(xiàn)需要另一個(gè)類的協(xié)助，所以要盡量不使用雙向的互相依賴.
【代碼表現(xiàn)】：局部變量、方法的參數(shù)或者對(duì)靜態(tài)方法的調(diào)用
【箭頭及指向】：帶箭頭的虛線，指向被使用者
各種關(guān)系的強(qiáng)弱順序：
泛化 = 實(shí)現(xiàn) > 組合 > 聚合 > 關(guān)聯(lián) > 依賴
下面這張UML圖，比較形象地展示了各種類圖關(guān)系：
本篇文章將分享 Web 端系統(tǒng)布局，從基本布局初識(shí)、網(wǎng)格、布局模塊到柵格進(jìn)行完整鏈路內(nèi)容整合，以簡(jiǎn)單易懂的案例與大家進(jìn)行探討。
在以往的學(xué)習(xí)過程中，我發(fā)現(xiàn)市面上大部分文章對(duì)于 Web 端系統(tǒng)布局內(nèi)容講的比較籠統(tǒng)，一般提及較多的是網(wǎng)頁(yè)柵格相關(guān)的內(nèi)容，但是一些關(guān)聯(lián)性和原子結(jié)構(gòu)等相關(guān)內(nèi)容較少。比如，了解布局時(shí)應(yīng)該需要了解哪些方法論？什么是網(wǎng)格？網(wǎng)格與柵格之間是什么關(guān)系？柵格與布局之間是什么關(guān)系等。我會(huì)從這些缺失出發(fā)，結(jié)合工作經(jīng)驗(yàn)與實(shí)際案例為大家進(jìn)行分享。
用戶在操作系統(tǒng)時(shí)所看到的頁(yè)面框架其實(shí)就是系統(tǒng)布局，它是一個(gè)產(chǎn)品最外層的框架結(jié)構(gòu)，一般包含了頂部導(dǎo)航、側(cè)邊導(dǎo)航欄、面包屑、圖文、卡片、內(nèi)容等元素。
對(duì)于設(shè)計(jì)師而言，想要了解一個(gè)中臺(tái)，首先要了解它的系統(tǒng)布局，系統(tǒng)布局是頁(yè)面設(shè)計(jì)的基礎(chǔ)，它與頁(yè)面的關(guān)系，就如同建筑與地基的關(guān)系。日常完成需求時(shí)，UI 界面反復(fù)的調(diào)試頁(yè)面寬度與卡片比例會(huì)占用我們大量的時(shí)間。為了提高工作效率，并且把更多的時(shí)間放在業(yè)務(wù)、視覺創(chuàng)新等方面，我們就應(yīng)該需要一套完整的布局規(guī)范。
對(duì)整個(gè)公司產(chǎn)品體系而言，內(nèi)部員工與普通用戶使用的操作系統(tǒng)達(dá)到幾十甚至上百個(gè)，單一的頁(yè)面布局滿足不了各個(gè)子項(xiàng)目的使用場(chǎng)景。所以我們從前期的布局框架設(shè)計(jì)調(diào)研到產(chǎn)品業(yè)務(wù)的特性，定義了中臺(tái)界面的幾大類型，并且在我們的設(shè)計(jì)規(guī)范中定義了幾大類型系統(tǒng)布局方式，根據(jù)其布局方式定制好柵格，方便日后在各個(gè)業(yè)務(wù)場(chǎng)景中使用，從而能夠保持一致性、并且可擴(kuò)展，方便快速迭代和維護(hù)。
視覺層次
對(duì)于中臺(tái)的 UI 設(shè)計(jì)師們而言，良好的理性思維相對(duì)比感性的視覺思維更加重要，因?yàn)樵?UI 設(shè)計(jì)師設(shè)計(jì)頁(yè)面時(shí)需要把很多互不相關(guān)的元素有秩序的組織在一起，正確引導(dǎo)用戶操作與使用。亨利·亞當(dāng)斯（Henry Adams）曾經(jīng)說過：「混沌是自然法則，秩序是人類的夢(mèng)想」。人們總是喜歡秩序，因?yàn)橹刃蚩梢宰屖虑樽兊酶菀桌斫?。這同樣適用于數(shù)字產(chǎn)品的用戶界面，當(dāng) UI 元素被有序組合和結(jié)構(gòu)化時(shí)，人們可以輕松的使用應(yīng)用程序和網(wǎng)站，并對(duì)產(chǎn)品感到滿意，所以設(shè)計(jì)頁(yè)面時(shí)需要結(jié)合視覺層次理論。視覺層次理論是設(shè)計(jì)過程的核心方法之一。最初是建立在格式塔原理的基礎(chǔ)上，它觀察到了用戶對(duì)相互關(guān)聯(lián)元素的視覺感知，并展示了人們?nèi)绾螌⒁曈X元素歸為一類。那么什么是視覺層次呢？官方概括：視覺層次結(jié)構(gòu)致力于一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品的內(nèi)容，以便用戶可以理解每個(gè)元素的重要性級(jí)別。它可以組織頁(yè)面內(nèi)容，以便大腦可以根據(jù)物理差異例如：大小，顏色，對(duì)比度，樣式等區(qū)分對(duì)象。
蘋果的設(shè)計(jì)一直以來都是引領(lǐng)著設(shè)計(jì)趨勢(shì)，其設(shè)計(jì)被國(guó)內(nèi)外用戶所認(rèn)可，所以就以蘋果官網(wǎng)作為案例。其中，字重對(duì)比：蘋果官網(wǎng)在字重上給人眼前一亮的感覺，它采用 Medium+Bold 的字重使得標(biāo)題與詳情內(nèi)容產(chǎn)生強(qiáng)烈的大小對(duì)比，用戶進(jìn)入官網(wǎng)的第一眼便能了解核心內(nèi)容。顏色對(duì)比：在顏色上使用黑色背景承托產(chǎn)品和內(nèi)容，強(qiáng)烈的黑白對(duì)比增強(qiáng)了信息傳播中的識(shí)別度和對(duì)比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁(yè)面層次感更加的豐富。如下圖：
格式塔理論
往往用戶打開頁(yè)面進(jìn)行閱讀或者操作界面時(shí)視覺的第一感受是產(chǎn)品的整體效果，而并不會(huì)感知到一些較細(xì)節(jié)的元素。往宏觀來講當(dāng)人們感知到一個(gè)物體由許多元素組成的復(fù)雜對(duì)象時(shí)，人們會(huì)采用有意識(shí)或無意識(shí)的方法將這些部分安排到整個(gè)組織的系統(tǒng)中，而不只是簡(jiǎn)單的元素級(jí)。它適用于不同級(jí)別的感知，但是視覺部分似乎是設(shè)計(jì)師設(shè)計(jì)界面時(shí)最能體現(xiàn)價(jià)值的部分，這其實(shí)就是格式塔理論，格式塔（Gestalt）這個(gè)術(shù)語(yǔ)來自德語(yǔ)單詞 Gestalt，中文翻譯為「形狀，形式」。
格式塔心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka）的一句話可以捕捉到這一運(yùn)動(dòng)背后的基本思想：「整體不是元素基因的總和」。官網(wǎng)概括：「在心理現(xiàn)象中，人們對(duì)客觀對(duì)象的感受源于整體關(guān)系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個(gè)統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割」。格式塔理論中元素之知見的原則分別為臨近，相似，連續(xù)，封閉和連接。
在我們的現(xiàn)實(shí)生活中有很多自然規(guī)律都遵守了格式塔原則，比如說每到秋天，北方的嚴(yán)寒氣候不再適合大雁生存，這時(shí)候大雁便會(huì)飛往較暖和的南方，當(dāng)人們看到天空正在南飛的大雁隊(duì)伍，它們組織鏈接得十分嚴(yán)密，并且群體在往同一個(gè)方向移動(dòng)，所以隊(duì)伍的形狀在我們的大腦中將它們視為一個(gè)群組的一部分，產(chǎn)生人字形或一字形的圖形。
信息框架
剛剛我們也介紹了視覺層級(jí)結(jié)構(gòu)和格式塔理論，接下來簡(jiǎn)單介紹一下信息框架，它也是在系統(tǒng)布局中需要考慮的內(nèi)容。信息框架是將信息內(nèi)容進(jìn)行組織分層，一個(gè)產(chǎn)品的信息框架取決于其特有的業(yè)務(wù)，他與業(yè)務(wù)強(qiáng)相關(guān)并且需要了解用戶群體目標(biāo)。根據(jù)業(yè)務(wù)和用戶目標(biāo)將內(nèi)容組織搭建信息框架，形成系統(tǒng)布局的骨架，方便用戶在瀏覽或操作頁(yè)面時(shí)能夠快速找到重點(diǎn)內(nèi)容，提升用戶使用效率。我們用今日頭條 Web 端和飛書 Web 端兩個(gè)線上產(chǎn)品作為案例分析吧，今日頭條和飛書屬于兩種完全不同類型的產(chǎn)品，那么其信息架構(gòu)也完全不同。
今日頭條屬于門戶類新聞客戶端，主要是生產(chǎn)內(nèi)容展現(xiàn)給用戶，首先進(jìn)入到產(chǎn)品映入眼簾的是無窮式的信息流，它不需要用戶登錄/注冊(cè)作為身份門檻，而是直觀的把內(nèi)容展示給用戶，推送用戶感興趣的內(nèi)容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗(yàn)即可，目的是方便第一時(shí)間抓取用戶、吸引用戶達(dá)到留住用戶的目的。當(dāng)用戶產(chǎn)生興趣以后想要進(jìn)入下一步操作如：點(diǎn)贊、評(píng)論時(shí)才會(huì)彈出登錄/注冊(cè)，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來。從產(chǎn)品業(yè)務(wù)屬性來看，今日頭條的布局把重要的內(nèi)容放入中間，并且占有整個(gè)布局的一半大小，其次放在內(nèi)容兩側(cè)；
飛書屬于工具協(xié)作類產(chǎn)品，用戶第一次打開產(chǎn)品需要注冊(cè)才能使用。與新聞閱讀類產(chǎn)品不同的是工具類型產(chǎn)品用戶目的比較明確，所以首頁(yè)做成一個(gè)功能介紹頁(yè)面，作用是引導(dǎo)用戶了解產(chǎn)品核心功能從而轉(zhuǎn)化成產(chǎn)品的用戶。當(dāng)然功能介紹頁(yè)也是一個(gè)網(wǎng)站的門面，首頁(yè)想要出彩，不僅需要在布局上做的合理還需要考慮網(wǎng)站的色彩、插圖等元素的統(tǒng)一性。在設(shè)計(jì)網(wǎng)站時(shí)，首頁(yè)的功能介紹頁(yè)一定要充分突出自身產(chǎn)品特色，強(qiáng)調(diào)出自身產(chǎn)品的優(yōu)勢(shì)和亮點(diǎn)，如飛書首頁(yè)主要是想突出其產(chǎn)品能夠提高工作效率，所以直接把「在飛書，享」slogan 這句話放在了首頁(yè)的第一屏，輔助文案詳細(xì)的介紹了產(chǎn)品的核心功能，直接抓住用戶的痛點(diǎn)。用戶完成注冊(cè)以后，進(jìn)入到功能頁(yè)面，如右下圖可以看出，其系統(tǒng)布局的模塊分成三份，占面積最大的模塊屬于產(chǎn)品最核心的部分也就是聊天窗口，較重要部分是聯(lián)系人部分，最小區(qū)域是功能 Tab 部分。
小結(jié)
所以對(duì)于設(shè)計(jì)師而言，在設(shè)計(jì)頁(yè)面時(shí)必須熟練掌握一些基本設(shè)計(jì)基礎(chǔ)知識(shí)，并且將這些知識(shí)靈活運(yùn)用到實(shí)際的工作當(dāng)中。比如設(shè)計(jì)師在搭建系統(tǒng)布局時(shí)需要熟知頁(yè)面視覺層次、格式塔理論、信息框架等知識(shí)才可創(chuàng)建合理的布局基礎(chǔ)。當(dāng)然布局框架只是整個(gè)產(chǎn)品的基礎(chǔ)骨架，在骨架確定之后，設(shè)計(jì)師才可進(jìn)行下一步的設(shè)計(jì)，如統(tǒng)一的視覺表達(dá)元素，清晰的功能操作，流暢的交互表達(dá)。
系統(tǒng)布局規(guī)范，需要通過統(tǒng)一的設(shè)計(jì)元素和間距規(guī)范去引導(dǎo)使用者們（使用規(guī)范的設(shè)計(jì)師）跨平臺(tái)使用并且能夠適配不同屏幕尺寸，目的是達(dá)到一致性，可適配、可控性原則。
一致性：對(duì)于界面來講，界面中的元素和結(jié)構(gòu)需要保持一致性，如：在使用布局時(shí)應(yīng)當(dāng)使用一致的網(wǎng)格，基準(zhǔn)線和填充，在使用設(shè)計(jì)元素時(shí)配色、圖標(biāo)、文本等需保持一致。
可適配：布局是可自適應(yīng)的，根據(jù)用戶在不同的設(shè)計(jì)環(huán)境下能夠通過交互動(dòng)效、界面樣式有效作出適配反應(yīng)。用戶操作后需給出即時(shí)反應(yīng)。
可控性：當(dāng)用戶看到界面時(shí)應(yīng)直觀有效傳遞內(nèi)容，如界面中模塊區(qū)域明確、內(nèi)容組織明確、表意明確都能使得用戶快速理解。界面需要簡(jiǎn)單直白，讓用戶快速識(shí)別，減少用戶記憶負(fù)擔(dān)。
在設(shè)計(jì)過程中，為了減少設(shè)計(jì)師們的日常溝通和理解成本，在設(shè)計(jì)內(nèi)部我們統(tǒng)一了一套設(shè)計(jì)畫板尺寸為 1280。經(jīng)過我們官方調(diào)研得出在中臺(tái)系統(tǒng)中用戶使用的電腦屏幕主流分辨率分別為：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最為保險(xiǎn)的的一個(gè)尺寸，在設(shè)計(jì)頁(yè)面時(shí)設(shè)計(jì)師如果能夠在 1280 尺寸下，縮小寬度或拉升頁(yè)面寬度都能保證沒有遮擋或擠壓?jiǎn)栴}，那么設(shè)計(jì)是合理的。在我們的規(guī)范中頁(yè)面再小于 1280 時(shí)需要吊起系統(tǒng)的橫向滾動(dòng)條。在中臺(tái)系統(tǒng)中考慮到用戶效率問題很少做響應(yīng)式，所以常規(guī)情況下設(shè)計(jì)師會(huì)限定界面的一個(gè)最小值。如果設(shè)計(jì)師把畫板設(shè)置為 1440 或者 1366 時(shí)可能會(huì)存在其在畫板中頁(yè)面大小正好合適，但是頁(yè)面上線以后縮小瀏覽器可能會(huì)發(fā)生遮擋或擠壓的情況。所以我們建議設(shè)計(jì)師們使用 1280 寬度畫板畫圖。
首先先分析一下界面框架，我們將頁(yè)面的用戶操作行為進(jìn)行層級(jí)區(qū)分。我們至下而上將元素進(jìn)行層級(jí)分層，目的是把用戶界面模塊化。界面可分成背景區(qū)域、內(nèi)容層、全局控制層、內(nèi)容彈層，每一層都具備獨(dú)特性，將界面中所有的信息層級(jí)提取分類并且按結(jié)構(gòu)屬性分層，目的是能夠使得頁(yè)面視覺和交互邏輯符合用戶的習(xí)慣認(rèn)知。之前我們有提到過視覺層次、格式塔理論和信息框架，設(shè)計(jì)師在創(chuàng)建這一步的時(shí)候可以用來指導(dǎo)搭建一套合理的頁(yè)面信息層級(jí)，一個(gè)內(nèi)容模塊都屬于一個(gè)容器，容器可以承載各種內(nèi)容元素。
背景層
背景層樣式固定，在界面中永遠(yuǎn)置于界面底部，并且一般會(huì)給予背景層中性色，作用是方便突出內(nèi)容層和全局控制層。
內(nèi)容層
視圖結(jié)構(gòu)中最核心和復(fù)雜的一層，他與業(yè)務(wù)強(qiáng)相關(guān)，內(nèi)容層的容器承載了業(yè)務(wù)場(chǎng)景的用戶需要獲取的核心信息以及輔助核心任務(wù)的操作。容器承載了內(nèi)容，從 Material Design 中的 Elevation（海拔）概念中可以了解到，它屬于第二層級(jí)內(nèi)容，基本布局結(jié)構(gòu)有平行結(jié)構(gòu)或者父子結(jié)構(gòu)。如下圖卡片屬于容器，卡片中承載了數(shù)據(jù)圖表等內(nèi)容，整個(gè)卡片+內(nèi)容就屬于內(nèi)容層。
全局控制層
全局控制層我們定義他在內(nèi)容層之上，屬于頁(yè)面第三層級(jí)內(nèi)容，一般在業(yè)務(wù)場(chǎng)景中對(duì)整個(gè)網(wǎng)站的控制以及導(dǎo)航功能如：Header menu、Sidebar menu 組件，如下圖中 Header menu 浮在內(nèi)容層之上。
內(nèi)容彈層
當(dāng)前任務(wù)或者內(nèi)容相關(guān)的臨時(shí)出現(xiàn)層，優(yōu)先級(jí)高于內(nèi)容層，一般承載當(dāng)前需要臨時(shí)處理的任務(wù)或者需要進(jìn)行內(nèi)容補(bǔ)充說明等功能。如：Modal（Dialog 各個(gè)平臺(tái)叫法不一致）、Tooltip、Popover、Notification 等組件 。其中 Modal 是以滑出或者彈出的形式展現(xiàn)給用戶。Modal 它包括兩種類型，一種是模態(tài)內(nèi)容層不可操控，被蒙版遮罩禁用，比如在業(yè)務(wù)中需要較為聚焦的分支流程操作時(shí)使用。另一種是非模態(tài)，吊起彈出層后不印象內(nèi)容層操作。當(dāng)然，Tooltip、Popover、Notification 都屬于非模態(tài)，反饋較輕，不干擾用戶使用界面。如下圖的頁(yè)面中的內(nèi)容彈層使用了 Popover，在次頁(yè)面它的功能就是加以補(bǔ)充說明。
隨著科技高速發(fā)展，屏幕分辨率也越來越多樣化對(duì)于 UI/UX 設(shè)計(jì)師來講必須熟練的基本知識(shí)方便日常工作所需。首先我們先了解一下屏幕中的一些單位。
在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導(dǎo)致開發(fā)實(shí)現(xiàn)稿的視覺不符合設(shè)計(jì)師心理預(yù)期，比如：相同像素尺寸的 UI 元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見尺寸）下，低密度顯示器的像素個(gè)數(shù)明顯小于高密度顯示器的像素個(gè)數(shù)。
其實(shí)像素是與密度沒有關(guān)聯(lián)，我們簡(jiǎn)稱密度為 DP (讀作 DIP，英文全稱 Density-independent pixel )，它是可縮放的靈活單位，可在任何屏幕下現(xiàn)實(shí)相同的尺寸，如圖顯示，紅色網(wǎng)格為像素密度，被放大內(nèi)容為 UI 元素物理尺寸。
所以我們可以得出，DP 可以自適應(yīng)屏幕的密度，不管屏幕密度怎么變化，實(shí)際顯示的物理尺寸相同，DP 可以保證物理尺寸的一致性，所以 DP 是目前比較適合 UI 設(shè)計(jì)的單位。當(dāng)屏幕的密度為 160 的一個(gè)物理像素時(shí)，1PD=1PX。要計(jì)算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。
關(guān)于網(wǎng)格
網(wǎng)格線(Grid Line)，網(wǎng)格線又稱布局分割線，它是構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線。一般在布局中它們是由行網(wǎng)格線和列網(wǎng)格線組成。如下圖是模擬網(wǎng)格做了一個(gè)示意，其中橘黃色兩根線分別是行網(wǎng)格線和列網(wǎng)格線。
網(wǎng)格軌道(Grid Track)，兩個(gè)相鄰網(wǎng)格線之間的空間。你可以把它們想像成網(wǎng)格的行或列。如下圖橘黃色的行網(wǎng)格線和列網(wǎng)格線之間的空間既是網(wǎng)格軌道。
網(wǎng)格單元格(Grid Cell)，兩個(gè)相鄰的行網(wǎng)格線和兩個(gè)相鄰的列網(wǎng)格線之間的空間屬于網(wǎng)格單元格。這是網(wǎng)格系統(tǒng)的一個(gè)「單元」。如下圖橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格單元格。
網(wǎng)格區(qū)域(Grid Area)，由單個(gè)或多個(gè)網(wǎng)格單元格組成，它是可以用來擺放頁(yè)面元素。如下圖所示，橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格區(qū)域。
網(wǎng)格設(shè)置
在設(shè)計(jì)界面時(shí)可以通過網(wǎng)格定制能夠使界面更加有序、整齊、規(guī)范，網(wǎng)格的主要用途之一是保持設(shè)計(jì)元素對(duì)齊和排序。通過建立一個(gè)網(wǎng)格系統(tǒng)，設(shè)計(jì)師可以為自己創(chuàng)建一個(gè)結(jié)構(gòu)來適配不同的屏幕寬度。
在我制定的規(guī)范中一般會(huì)把網(wǎng)格的基數(shù)設(shè)置為 4，它不僅符合偶數(shù)的思路同時(shí)也能夠匹配多數(shù)主流的顯示設(shè)備，如中臺(tái)系統(tǒng)的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過設(shè)置網(wǎng)格規(guī)范幫助設(shè)計(jì)師快速搭建頁(yè)面，使用有律可循的布局空間的設(shè)計(jì)給到開發(fā)減少溝通成本。下圖所示設(shè)計(jì)布局網(wǎng)格由三個(gè)元素組成：列寬，間距，邊距。
在 Sketch 中設(shè)置網(wǎng)格，在菜單欄中找「視圖」-「畫布」-「網(wǎng)格設(shè)置」-彈出浮層可設(shè)置網(wǎng)格大小，網(wǎng)格設(shè)置的基數(shù)設(shè)置成4，之后在設(shè)計(jì)界面時(shí)可按照網(wǎng)格基礎(chǔ)的倍數(shù)作為組件的大小和頁(yè)面元素間距分割，如下圖：
我們放大頁(yè)面局部大家可以看到，把網(wǎng)格基數(shù)設(shè)置成 4，每個(gè)網(wǎng)格單元格為 4*4 大小。同理，如果把網(wǎng)格基數(shù)設(shè)置成 8 以后，每個(gè)網(wǎng)格單元格大小為 8*8 大小。
界面框架內(nèi)系統(tǒng)布局是頁(yè)面所有模塊的組合方式，我們定義一個(gè)頁(yè)面框架中基礎(chǔ)模塊和內(nèi)容模塊的數(shù)量最好不超過 3 個(gè)。經(jīng)過調(diào)研和歸納總結(jié)出 3 大布局類型，分別是上下布局、左右布局、T 字型布局。
上下布局布局是 Web 端運(yùn)用最廣泛的布局方式之一，頁(yè)面內(nèi)容區(qū)以 feed 流形式展現(xiàn)，一般用在 Web 端官網(wǎng)首頁(yè)。設(shè)計(jì)師普遍做法是對(duì)兩邊留白區(qū)域?yàn)閮?nèi)容區(qū)并進(jìn)行最小值的定義，一般定義值為 1200 較多（具體寬度要設(shè)計(jì)師如何設(shè)置柵格，后面會(huì)講到如何設(shè)置柵格），當(dāng)留白區(qū)域到達(dá)極小超過極限值之后需要對(duì)中間的內(nèi)容區(qū)域進(jìn)行動(dòng)態(tài)縮放或遮擋，此邏輯需設(shè)計(jì)師根據(jù)業(yè)務(wù)所需而定。也有少部分設(shè)計(jì)師會(huì)設(shè)計(jì)成全屏布局，內(nèi)容隨瀏覽器寬度自適應(yīng)。
其優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰簡(jiǎn)單，強(qiáng)突出內(nèi)容區(qū)，但缺點(diǎn)是布局的規(guī)矩呆板，變化少。設(shè)計(jì)師如果不注意合理的視覺元素和色彩細(xì)節(jié)變化，用戶很容易感覺到乏味，此布局適用于層級(jí)較為簡(jiǎn)單頁(yè)面。
巨量引擎（Ocean Engine）是字節(jié)跳動(dòng)旗下的營(yíng)銷服務(wù)品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu 激萌、輕顏、穿山甲等產(chǎn)品的營(yíng)銷能力，為全球廣告主提供綜合的數(shù)字營(yíng)銷解決方案。我在設(shè)計(jì)此官網(wǎng)時(shí)正是采用了上下布局作為頁(yè)面布局，頂部導(dǎo)航整合了所有子頁(yè)面的內(nèi)容，導(dǎo)航下方為主要內(nèi)容區(qū)并且內(nèi)容定寬，當(dāng)時(shí)采用此布局原因第一是因?yàn)榇喂倬W(wǎng)層級(jí)較簡(jiǎn)單只有三個(gè)層級(jí)內(nèi)容，第二是官網(wǎng)更需要的是突出內(nèi)容區(qū)，所有頁(yè)面使用次布局更為合適。
設(shè)計(jì)師在設(shè)計(jì)重內(nèi)容，輕導(dǎo)航類型網(wǎng)站是常用左右布局作為基礎(chǔ)框架進(jìn)行頁(yè)面設(shè)計(jì)。此布局把系統(tǒng)頁(yè)面分為兩大模塊，其中設(shè)計(jì)師常見的做法是將左側(cè)設(shè)置成導(dǎo)航欄模塊并且固定，常常用來控制全局內(nèi)容。而右側(cè)區(qū)域設(shè)置成工作區(qū)域或內(nèi)容區(qū)，內(nèi)容區(qū)可進(jìn)行動(dòng)態(tài)縮放。
下圖為飛書溝通窗口截圖，由于關(guān)系到內(nèi)部信息保密性我把內(nèi)容進(jìn)行了模糊，從外觀結(jié)構(gòu)上看還是能大致了解飛書結(jié)構(gòu)是采用了左右布局，整個(gè)布局結(jié)構(gòu)清晰有理也是符合左右布局特點(diǎn)。從交互體驗(yàn)分析左側(cè)屬于導(dǎo)航區(qū)，它承載了不同功能并且固定。飛書屬于即時(shí)溝通產(chǎn)品設(shè)計(jì)師考慮到瀏覽器窗口有限所以對(duì)導(dǎo)航設(shè)計(jì)成較小模塊，而右邊為聊天窗口對(duì)于業(yè)務(wù)屬性分析它更為重要，所以模塊較大。其導(dǎo)航欄固定，內(nèi)容區(qū)可進(jìn)行動(dòng)態(tài)縮放。
T 字型布局常用在 Web 端的中臺(tái)系統(tǒng)中，因?yàn)橹信_(tái)系統(tǒng)業(yè)務(wù)結(jié)構(gòu)復(fù)雜、層級(jí)多，而 T 字型布局能夠解決復(fù)雜結(jié)構(gòu)的問題。使用此結(jié)構(gòu)能夠把頁(yè)面結(jié)構(gòu)清晰化，主次更加分明。設(shè)計(jì)師常常的做法是將頂部作為一級(jí)導(dǎo)航欄方便控制全局，二左邊設(shè)計(jì)成是二級(jí)導(dǎo)航并且固定導(dǎo)航欄固定，右邊的內(nèi)區(qū)域可進(jìn)行動(dòng)態(tài)縮放（一般會(huì)把其設(shè)計(jì)成柵格動(dòng)態(tài)區(qū)域），內(nèi)容隨瀏覽器寬度自適應(yīng)。
下圖是 Material Design 設(shè)計(jì)文檔，首先簡(jiǎn)單介紹一下 Material Design，它是由谷歌的設(shè)計(jì)團(tuán)隊(duì)創(chuàng)建的一種語(yǔ)言，宗旨是幫助設(shè)計(jì)師們創(chuàng)建易用性和實(shí)用性較強(qiáng)的網(wǎng)站和應(yīng)用程序，其設(shè)計(jì)理念是將現(xiàn)實(shí)中的物理學(xué)帶入進(jìn)設(shè)計(jì)中。Material Design 設(shè)計(jì)文檔中的結(jié)構(gòu)使用了 T 字型布局作為基礎(chǔ)布局。頁(yè)面分為了三個(gè)模塊，其中頂部導(dǎo)航作為頁(yè)面一級(jí)內(nèi)容進(jìn)行全局控制，接下來左邊為側(cè)邊導(dǎo)航作為二級(jí)內(nèi)容控制頁(yè)面，右邊是內(nèi)容區(qū)滿足用戶使用瀏覽。從放眼望去整個(gè)頁(yè)面架構(gòu)清晰明了。
以上為 Web 最常見的三大布局，但是需要大家在實(shí)際的工作中靈活運(yùn)用。設(shè)計(jì)師在日常工作中可能會(huì)遇到更為特殊的業(yè)務(wù)場(chǎng)景，設(shè)計(jì)師可以通過整理基礎(chǔ)模塊然后分析其業(yè)務(wù)的信息框架，將模塊進(jìn)行相互組合、嵌套歸納可以總結(jié)出更多的 Web端布局框架并落地到業(yè)務(wù)中。
剛剛在定義布局模塊中已經(jīng)分析過了三大布局類型，接下要分享的是 UI 設(shè)計(jì)師更為關(guān)注內(nèi)容「網(wǎng)頁(yè)柵格」。網(wǎng)頁(yè)柵格也是設(shè)計(jì)師口中常常提及的柵格系統(tǒng)。其實(shí)網(wǎng)頁(yè)柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來，它延續(xù)了平面設(shè)計(jì)的方法與風(fēng)格，在網(wǎng)頁(yè)中使用柵格能夠使得網(wǎng)頁(yè)信息展現(xiàn)更加清晰明了、美觀易讀。
首先網(wǎng)頁(yè)柵格系統(tǒng)基本由是柵格總寬度/頁(yè)面總寬度（W）、一個(gè)柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個(gè)單元的寬度（A）、外邊距（M）組成。
1. 列寬
一個(gè)柵格的寬度（a），我們稱之為列寬，一個(gè)列寬包涵了N個(gè)網(wǎng)格單元格（Grid Cell）我們也可以把它看成一個(gè)網(wǎng)格區(qū)域(Grid Area)，在上面我們已經(jīng)講到過網(wǎng)格的內(nèi)容，主要目的正是為柵格做鋪墊。其中我把一個(gè)網(wǎng)格單元格設(shè)置為4（原因在網(wǎng)格中也解釋過，如果忘記的同學(xué)可以爬樓看下）。由此可見列寬非固定值，這樣可以使內(nèi)容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。
2. 水槽
柵格與柵格之間的間隙（i），我們稱之為水槽，一個(gè)水槽寬度大于等于1個(gè)網(wǎng)格單元（Grid Cell）。在柵格中水槽為一個(gè)定值，寬度可以是N個(gè)網(wǎng)格單元，如網(wǎng)格單元格設(shè)置成4，那么水槽可以是4、8、12、16…N*4。
3. 柵格單元
1個(gè)列寬+1個(gè)水槽寬度即一個(gè)單元的寬度，一個(gè)柵格總寬是由N個(gè)柵格單元組成，次寬度不固定，由屏幕尺寸決定。
4. 柵格總寬
列寬+水槽再成以N即是一個(gè)柵格的總寬，公式為：W=(A*n)-i。
5. 柵格設(shè)置
經(jīng)過調(diào)研我們得出常見的柵格分為 12 列柵格系統(tǒng)和 24 列柵格系統(tǒng)。其中 12 列柵格系統(tǒng)在流行的前端開發(fā)開源工具庫(kù)Bootstrap 與 Foundation 中廣泛使用，適用于業(yè)務(wù)信息分組較少、業(yè)務(wù)結(jié)構(gòu)較簡(jiǎn)，單個(gè)盒子內(nèi)信息體積較大的中后臺(tái)頁(yè)面設(shè)計(jì)。24 等分的柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的中后臺(tái)頁(yè)面設(shè)計(jì)；相對(duì) 12 柵格系統(tǒng)，24 柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場(chǎng)景。如下圖分別是 12 柵格系統(tǒng)（左）和 24 柵格系統(tǒng)（右）。
6. 小結(jié)
在柵格系統(tǒng)結(jié)合布局結(jié)構(gòu)和網(wǎng)格做了我做了一些知識(shí)結(jié)合，其實(shí)前面所講的網(wǎng)格版塊和布局版塊都是為柵格做一個(gè)鋪墊，利于同學(xué)們更加深入的了解網(wǎng)格、布局、柵格三者的關(guān)系。
系統(tǒng)布局只是網(wǎng)頁(yè)中的基礎(chǔ)部分，但也是核心內(nèi)容，一個(gè)產(chǎn)品布局需要根據(jù)其業(yè)務(wù)屬性決定。布局搭的好相當(dāng)?shù)鼗虻煤?，但是同時(shí)在對(duì)美感的追求之上，還應(yīng)當(dāng)結(jié)合可用性來看待設(shè)計(jì)。在實(shí)際的工作中肯定還會(huì)遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限制而是啟發(fā)，大家可根據(jù)此次分享內(nèi)容能夠進(jìn)行舉一反三利用到實(shí)際的工作當(dāng)中。
文章來源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn