如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

表單設(shè)計(jì)可以說是設(shè)計(jì)界一個(gè)老生常談的話題，針對(duì)它的重要性自不必多言。本文結(jié)合自身經(jīng)驗(yàn)和所看所學(xué)所得總結(jié)，希望能幫助到大家。

從「因子（構(gòu)成要件）」的角度，將表單逐一拆分，從而能夠全面的看待。

如下，大卸八塊，一一道來：

• 結(jié)構(gòu)
• 標(biāo)簽
• 輸入字段
• 占位符
• 幫助
• 操作
• 驗(yàn)證
• 反饋

一、結(jié)構(gòu) Structure

字段的順序、節(jié)奏、外觀和組織。

1. 只問所需

必要而不是全部，簡(jiǎn)化表單，或許是優(yōu)化表單的最大建議。簡(jiǎn)化的辦法之一就是追溯每個(gè)字段為什么需要，是否是當(dāng)前最相關(guān)的信息，如果它是可選的，最好不要顯示。

2. 有理排序

先問什么，再問什么，前后字段根據(jù)相關(guān)性循循漸進(jìn)。

3. 從易到難

從用戶相對(duì)無抵觸的信息開始逐漸到隱私的信息，而不是一開始就讓用戶萌生退意。

4. 組織相關(guān)

在繁多字段的情況下，將相關(guān)字段按照順序進(jìn)行分類組合，并通過增加一些額外的空間或者主標(biāo)題將它們分成語義組，增加了頁面呼吸和節(jié)奏感，從而幫助用戶更加輕松完成表單。

5. 單列呈現(xiàn)

單列，只需眼睛沿著自然的方向從上至下，便于用戶理解操作。多列，眼睛需要按照「之」形進(jìn)行瀏覽，從而增加瀏覽和理解認(rèn)知的時(shí)間。

當(dāng)然單列呈現(xiàn)還是多列，并非絕對(duì)，需根據(jù)頁面空間，表單內(nèi)容及性質(zhì)共同決定。

6. 提高對(duì)比度

提高顏色的對(duì)比度，你的用戶群體可不是高清屏，飛行員。

二、標(biāo)簽 label

標(biāo)簽告訴用戶需要輸入什么。

1. 名詞標(biāo)簽

名詞具有很好的描述性且簡(jiǎn)潔明了。常用的字段可以使用大家熟悉的圖標(biāo)代替文本。

2. 標(biāo)簽位置

左對(duì)齊、右對(duì)齊、頂部對(duì)齊、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽和浮動(dòng)標(biāo)簽。

多數(shù)情況下，謹(jǐn)慎使用內(nèi)聯(lián)標(biāo)簽，在用戶輸入后，內(nèi)聯(lián)標(biāo)簽會(huì)消失，用戶無法判斷輸入的內(nèi)容是否符合，當(dāng)然在用戶熟悉且簡(jiǎn)單的字段下可采用（例如登錄中只有賬號(hào)和密碼）。針對(duì)以上問題，你可以采用內(nèi)聯(lián)浮動(dòng)標(biāo)簽解決內(nèi)聯(lián)標(biāo)簽在輸入后標(biāo)簽消失的弊端。

三、輸入字段 Input

承載用戶輸入的區(qū)域。

1. 自動(dòng)對(duì)焦（PC端）

進(jìn)行表單頁面，自動(dòng)對(duì)焦第一個(gè)輸入字段可以引導(dǎo)用戶開始進(jìn)行輸入。

2. 提供默認(rèn)值

可根據(jù)已知信息，幫助用戶預(yù)判內(nèi)容。例如可以通過 IP 檢測(cè)出用戶的地理位置。

3. 保存輸入的數(shù)據(jù)

記住用戶已經(jīng)填寫的內(nèi)容，以防萬一（例如頁面刷新），從而避免用戶需要再次輸入而放棄。

4. 字段約束

為有要求的字段設(shè)置限制。例如，最大字符數(shù)，電話中數(shù)字、字母符號(hào)等要求，從而有效的避免臟數(shù)據(jù)。

5. 格式化（掩碼）輸入

提供輸入格式，幫助用戶理解所填內(nèi)容且減少錯(cuò)誤發(fā)生。常用于手機(jī)號(hào)碼、日期、銀行卡和郵編等。

6. 匹配鍵盤（移動(dòng)端）

提供合適的鍵盤，幫助用戶快速完成。

7. 區(qū)分可填

如上所述，盡量避免可填字段。如果不可避免，應(yīng)該做明確區(qū)分。根據(jù)經(jīng)驗(yàn)，可填和必填的數(shù)量少的做標(biāo)記說明。

常規(guī)做法：必填，使用「*」星號(hào)符；可填，使用「（選填）」。

四、占位符 Placeholder

標(biāo)簽的額外描述，幫助用戶了解可輸入的數(shù)據(jù)類型和格式提示。

1. 顏色區(qū)分

它是內(nèi)容提示，而不是內(nèi)容。

2. 不是所有輸入框都需要占位符

占位符是對(duì)輸入內(nèi)容有特殊要求的提示或提醒，也可理解為對(duì)標(biāo)簽的補(bǔ)充，并不是所有的輸入框都需要占位符。

3. 輸入后消失

不要在鼠標(biāo)鍵入后消失，而是在輸入內(nèi)容后消失，這樣可以在用戶還未輸入的時(shí)候，依然幫助到用戶。

如果提示特別復(fù)雜或者重要，請(qǐng)使用幫助，它會(huì)一直顯示在那里。

五、幫助提示 Tips

說明要求，解釋原因，甚至幫助回憶。

1. 三種方式

常駐、按需提供、偶爾需要。

2. 給予解釋

當(dāng)前需要用戶填寫相對(duì)隱私的信息時(shí)，請(qǐng)給予解釋這么做的原因及目的。

六、操作 Submit

對(duì)當(dāng)前用戶輸入數(shù)據(jù)的提交等動(dòng)作。

1. 區(qū)分主次

主操作，是我們期望用戶的使用途徑，應(yīng)該在視覺上與次操作做出明顯的區(qū)分，以突顯號(hào)召用戶點(diǎn)擊。

2. 合理放置

合理放置操作的位置，可根據(jù)表單的排列方式合理擺放，避免居中。例如表單采用的是頂部對(duì)齊，你可以將操作與輸入字段左對(duì)齊，這樣用戶在完成輸入的時(shí)候，輕松地看到操作按鈕。

3. 準(zhǔn)確命名

清晰可預(yù)測(cè)。應(yīng)該準(zhǔn)確地描述用戶點(diǎn)擊按鈕后會(huì)發(fā)生什么。

4. 行動(dòng)號(hào)召

按鈕應(yīng)始終帶有強(qiáng)烈的動(dòng)詞，鼓勵(lì)用戶行動(dòng)。

為了給用戶提供足夠的上下文，在按鈕上使用「動(dòng)詞」 +「名詞」格式，除了保存，關(guān)閉，取消或確定等常用操作。

5. 禁用操作

在未完成必填字段，禁用操作按鈕，通過直觀的視覺上告訴用戶是否完成了要求，并在恰當(dāng)?shù)臅r(shí)刻（表單填寫完成，按鈕被激活）將用戶的視線吸引到按鈕上。

七、驗(yàn)證 Required

對(duì)用戶輸入數(shù)據(jù)的驗(yàn)證反饋。

1. 前端驗(yàn)證和后端驗(yàn)證

前端驗(yàn)證不需要服務(wù)器上傳驗(yàn)證的數(shù)據(jù)，就可以判斷，例如手機(jī)格式等；但是要記住在用戶輸入后才進(jìn)行驗(yàn)證，為空不驗(yàn)證；

后端驗(yàn)證，例如手機(jī)注冊(cè)輸入效驗(yàn)碼，通過后才注冊(cè)成功，需要通過服務(wù)器判斷，才知道用戶輸入的是否正確。

2. 錯(cuò)在哪里，顯示在哪里

就近原則，方便用戶發(fā)現(xiàn)并修改操作。

3. 結(jié)合顏色、圖標(biāo)和文字

我們不僅僅需要視覺上的區(qū)別（請(qǐng)考慮色盲用戶），還需要文字說明并告知原因和解決辦法，而不是簡(jiǎn)單的「輸入錯(cuò)誤」。

4. 請(qǐng)勿清除

錯(cuò)誤的字段，請(qǐng)勿在鍵入后直接清除，請(qǐng)給用戶在此基礎(chǔ)上修改的機(jī)會(huì)，記住用戶才是決定者。

八、反饋 Feedback

對(duì)用戶行為的反饋，告知當(dāng)前狀態(tài)。

1. 操作前：光標(biāo)狀態(tài)

鼠標(biāo)在屏幕上的映射，我們稱之為光標(biāo)（指針），它會(huì)隨著操作對(duì)象及系統(tǒng)狀態(tài)而呈現(xiàn)出不同形狀，讓用戶對(duì)操作的行為及結(jié)果有預(yù)先的心理感知。

2. 操作中：操作反饋

如 default，disabled，hover，fouce，pressed，active，error，success 等。例如輸入框的懸停和鍵入的視覺反饋，從而幫助用戶聚焦。

3. 操作后：按鈕加載

呈現(xiàn)按鈕的加載過程，而不是禁止不動(dòng)，用戶會(huì)以為系統(tǒng)沒有執(zhí)行操作，從而進(jìn)行多次點(diǎn)擊，呈現(xiàn)加載并禁止用戶的后續(xù)點(diǎn)擊操作。

總結(jié)

以上便是對(duì)表單設(shè)計(jì)的一些總結(jié)，更多的是提供一種分析問題的框架，從結(jié)構(gòu)化的思維分析設(shè)計(jì)問題，從而能夠全面的認(rèn)識(shí)一個(gè)事物并進(jìn)行了解掌握，愿對(duì)你有所幫助。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

關(guān)于什么是好設(shè)計(jì)的問題的答案，定義了設(shè)計(jì)師。

“有什么好處，Phaedrus，還有什么不好 - 需要我們讓任何人告訴我們這些事情嗎？” Robert M. Pirsig，Zen和摩托車維修藝術(shù)：對(duì)價(jià)值觀的探討

上周，我的一位英雄（@johnmaeda）發(fā)推文說“設(shè)計(jì)一直是關(guān)于膚淺和實(shí)質(zhì)的?！蔽艺J(rèn)為這是一個(gè)很好的引用。出于某種原因，我們需要時(shí)刻提醒我們，設(shè)計(jì)不僅僅是花哨的造型。但為什么？為什么物質(zhì)需要防御？如果你看看像Dribbble這樣的網(wǎng)站，設(shè)計(jì)的表面看起來真的很吸引人。膚淺的品質(zhì)不需要解釋。但這不是設(shè)計(jì)。在他的“ 設(shè)計(jì)形狀”一書中，交互設(shè)計(jì)師Frank Chimero正確地說“如果我們留在表面并且不深入研究為什么我們不是真正的設(shè)計(jì)”。如果問為什么是設(shè)計(jì)的本質(zhì)，設(shè)計(jì)真的是哲學(xué)的一個(gè)分支。

清晰思考

目前我們有一位來自馬斯特里赫特大學(xué)的教授，他們?cè)谖覀兊脑O(shè)計(jì)工作室中。他正在研究野外設(shè)計(jì)師，就像人類學(xué)家在非洲研究一個(gè)不知名的部落一樣。他研究的主題之一是設(shè)計(jì)過程。我總是覺得這是一個(gè)有趣的話題，這就是我對(duì)Chimero的書的原因：它從設(shè)計(jì)師的角度講述了設(shè)計(jì)過程。他的內(nèi)部人士認(rèn)為這是一場(chǎng)認(rèn)可的盛宴。關(guān)于他對(duì)設(shè)計(jì)過程的描述最讓我困惑的是清晰思考的想法。奇美羅對(duì)他的工作方式有一個(gè)有趣的描述：他只是“出現(xiàn)”并讓“語境說出它需要的東西”。他說“設(shè)計(jì)師的工作就是找出一種方法讓問題表明它是真實(shí)的自我，這樣他才能回應(yīng)已經(jīng)出現(xiàn)的真相。

設(shè)計(jì)師通過詢問原因來工作。問為什么“更高水平的研究，一個(gè)調(diào)查所使用的動(dòng)機(jī)和思維過程，以便它們可以應(yīng)用于我們自己的情況?！睘槭裁纯雌饋砀睢?/span>它將目前的解決方案與用戶的需求相結(jié)合，以設(shè)想更好的解決方案。

哲學(xué)

當(dāng)我們開始問為什么并開始思考真理時(shí)，我們就進(jìn)入了哲學(xué)領(lǐng)域。我一直將設(shè)計(jì)（和其他藝術(shù)）視為哲學(xué)的視覺形式。比傳統(tǒng)哲學(xué)更精細(xì)的一個(gè)，因?yàn)樗粌H通過文字而且通過圖像進(jìn)行思考。有些人可能會(huì)稱這種特殊形式的哲學(xué)設(shè)計(jì)思維。當(dāng)我們將設(shè)計(jì)定義為哲學(xué)的一個(gè)分支時(shí)，下一步就是質(zhì)疑這個(gè)世界上一些偉大的思想家，看看他們對(duì)設(shè)計(jì)的看法。對(duì)我來說，Martin Heidegger有兩個(gè)哲學(xué)文本定義了良好的設(shè)計(jì)。

關(guān)于您的客戶和互聯(lián)網(wǎng)的真相

第一部是Der Ursprung des Kunstwerkes（藝術(shù)作品的起源），其中海德格爾思考什么使藝術(shù)品成為藝術(shù)品。簡(jiǎn)而言之，他認(rèn)為，為了使藝術(shù)作品成為一件好作品，它必須揭示我們存在的真相。他用梵高的一雙農(nóng)夫鞋作為例子。這幅畫是一件藝術(shù)品，因?yàn)樗蛭覀冋故玖诵?，農(nóng)業(yè)，生活的真相，也展示了梵高繪畫時(shí)的繪畫媒介和藝術(shù)現(xiàn)狀。它很漂亮，根據(jù)海德格爾的說法，美麗是表達(dá)真相的最好方式。

如果我們將網(wǎng)頁設(shè)計(jì)視為一門藝術(shù)，我們可以將海德格爾的藝術(shù)思想轉(zhuǎn)化為網(wǎng)站，并得出一個(gè)有用的網(wǎng)站定義。首先（和Chimero在他的書中所說的相似），一個(gè)好的網(wǎng)站揭示了用戶與您為其建立網(wǎng)站的組織的互動(dòng)的真相。當(dāng)然，美麗很重要，因?yàn)樗钦嫦嗾故咀约旱淖罴逊绞健?/span>Beauty以直接方式連接到用戶。它比單詞更快更有效。但海德格爾增加了另一個(gè)重要方面。一件好的藝術(shù)品，即一個(gè)網(wǎng)站也定義了媒體，即互聯(lián)網(wǎng)。因此，良好網(wǎng)站的問題與互聯(lián)網(wǎng)的問題緊密相關(guān)。一個(gè)好的網(wǎng)站向我們展示了互聯(lián)網(wǎng)是什么或可以是什么。

與媒體的深層聯(lián)系

因此，與您正在設(shè)計(jì)的介質(zhì)建立深層連接至關(guān)重要。這是海德格爾第二篇文章的主題，它定義了良好的設(shè)計(jì)。在他的文本Bauen，wohnen，denken（建筑，生活，思考）他說，在你建造之前，你首先必須學(xué)會(huì)生活。在這篇關(guān)于建筑的文章中，他將設(shè)計(jì)與對(duì)人類基本條件的理解聯(lián)系起來。他敦促設(shè)計(jì)師與他們的主題聯(lián)系，實(shí)現(xiàn)他們的主題，而不是以抽象的方式看待它。對(duì)于建筑師來說，很容易愛上圖紙，抽象概念和模型。但是如果沒有與你設(shè)計(jì)的生活有真正的聯(lián)系，它就會(huì)變得毫無用處。就像建筑一樣，互聯(lián)網(wǎng)也是人類的基本需求。我們將互聯(lián)網(wǎng)視為能夠讓您做新事物的東西。但是人們只想做他們一直做的事情。 人們的經(jīng)驗(yàn)和廣泛的興趣促進(jìn)了設(shè)計(jì)師的理解和想象力。

通過哲學(xué)分析生活 - 問為什么 - 是良好設(shè)計(jì)的基礎(chǔ)。哲學(xué)是生活與設(shè)計(jì)之間缺失的紐帶。

一個(gè)好網(wǎng)站的定義

就像藝術(shù)一樣，設(shè)計(jì)一直需要定義。我認(rèn)為好的設(shè)計(jì)問題的答案定義了設(shè)計(jì)師。所以：
- 設(shè)計(jì)就是問為什么（所以它基本上是哲學(xué)）
- 網(wǎng)頁設(shè)計(jì)的目的是找到關(guān)于客戶，用戶和互聯(lián)網(wǎng)
的真相 - 真相最好通過美容傳達(dá)
- 找到關(guān)于你的媒介的真相必須與之建立深厚的聯(lián)系

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

有了這篇文章，你就不用在其他地方學(xué)習(xí)基本的動(dòng)效設(shè)計(jì)規(guī)則了。

動(dòng)效的持續(xù)時(shí)長(zhǎng)和速度

當(dāng)元素的位置和狀態(tài)發(fā)生改變的時(shí)候，動(dòng)效的速度應(yīng)該足夠慢，維持足夠長(zhǎng)的時(shí)間，讓用戶能夠注意到變化，但是同時(shí)，又不能慢到需要用戶去等待。

大量的研究表明，動(dòng)效的最佳持續(xù)時(shí)長(zhǎng)是200毫秒到500毫秒之間。這個(gè)研究數(shù)字是基于人腦的認(rèn)知方式和信息消化速度得出來的。任何低于100毫秒的動(dòng)效對(duì)于人的眼睛而言，幾乎都是瞬間，很難被識(shí)別出來。而超過1秒的動(dòng)效會(huì)讓人有遲滯感。

△ 界面中動(dòng)效持續(xù)時(shí)長(zhǎng)

在手機(jī)這樣的移動(dòng)端設(shè)備上，按照 Material Design 的建議，動(dòng)效時(shí)長(zhǎng)應(yīng)該控制在200~300毫秒之間，在平板電腦上，這個(gè)時(shí)長(zhǎng)應(yīng)該延長(zhǎng)大概30%，也就是說，時(shí)長(zhǎng)應(yīng)該在400~450毫秒之間。原因很簡(jiǎn)單，屏幕尺寸越大，元素在發(fā)生位移的時(shí)候，跨越的距離越長(zhǎng)，速度一定的情況下，時(shí)長(zhǎng)自然越長(zhǎng)。相應(yīng)的，在可穿戴設(shè)備的小屏幕上，這個(gè)時(shí)長(zhǎng)應(yīng)該縮短30%，在150~200毫秒之間。

△ 移動(dòng)端設(shè)備的屏幕尺寸影響動(dòng)畫的持續(xù)時(shí)長(zhǎng)

網(wǎng)頁動(dòng)效的處理方式也不一樣。由于我們習(xí)慣在瀏覽器中直接打開網(wǎng)頁，考慮到瀏覽器性能和大家的使用習(xí)慣，用戶對(duì)于瀏覽器中動(dòng)效變化速率的預(yù)期還是比較快的。相比于移動(dòng)端中的動(dòng)效速度，網(wǎng)頁中的速度會(huì)快上一倍，換句話說，就是動(dòng)效的持續(xù)時(shí)長(zhǎng)應(yīng)該在150~200毫秒之間。如果持續(xù)時(shí)間太長(zhǎng)，用戶會(huì)忍不住覺得網(wǎng)頁卡住了。

不過，如果你的網(wǎng)頁中所用的動(dòng)效并非功能性的，而是裝飾用的，或者用來吸引用戶的注意力，那么請(qǐng)忘記這個(gè)規(guī)則，在這種情況下，動(dòng)效可以更長(zhǎng)。

更大的屏幕=更慢的動(dòng)效？絕不是如此！

請(qǐng)務(wù)必記住，無論是在什么平臺(tái)上，動(dòng)效的持續(xù)時(shí)長(zhǎng)絕不是單純?nèi)Q于屏幕尺寸和運(yùn)動(dòng)距離，還取決于平臺(tái)特征、元素大小、功能設(shè)定等等。較小的元素或者較小的變化，相應(yīng)的動(dòng)效應(yīng)該更快一點(diǎn)。因此，大而復(fù)雜的元素動(dòng)效持續(xù)時(shí)間更長(zhǎng)，看起來也更舒服一點(diǎn)。

大小相同的元素，在移動(dòng)的時(shí)候，移動(dòng)距離最短的元素，是停止下來的。

與較大的元素相比，較小的元素運(yùn)動(dòng)速度應(yīng)該更慢，因?yàn)橄嗤囊苿?dòng)距離，對(duì)于小元素而言，位移距離和自身大小比例倍數(shù)更大，相對(duì)偏移更遠(yuǎn)。

△ 動(dòng)效的持續(xù)時(shí)長(zhǎng)還和元素大小、運(yùn)動(dòng)距離有關(guān)

動(dòng)效的運(yùn)動(dòng)規(guī)律要符合物理規(guī)律，當(dāng)元素運(yùn)動(dòng)到邊界，發(fā)生碰撞的時(shí)候，碰撞的「能量」最終是要均勻分?jǐn)傁聛淼?，而彈跳的在多?shù)情況下是不適合的，僅在特殊情況下適合使用。

△ 避免使用彈跳，它會(huì)分散用戶的注意力

元素的運(yùn)動(dòng)過程應(yīng)該是清晰的，盡量不要在運(yùn)動(dòng)中使用模糊的效果（是的，說的就是 AE 的模糊動(dòng)效愛好者們），模糊的動(dòng)效不適合在 UI界面中使用。

△ 不要在動(dòng)效中使用模糊效果

列表項(xiàng)（新聞列表、郵件列表等）所使用的動(dòng)效，在實(shí)際運(yùn)動(dòng)的過程中，項(xiàng)和項(xiàng)之間應(yīng)該有輕微的延遲，元素之間的延遲應(yīng)該控制在20~25毫秒之間，如果持續(xù)時(shí)間再長(zhǎng)，可能會(huì)給人一種遲滯的觀感。

△ 列表項(xiàng)之間的延遲應(yīng)該在20~25毫秒

緩動(dòng)

緩動(dòng)指的是物體在物理規(guī)則下，漸進(jìn)加速或減速的現(xiàn)象。在動(dòng)效中加入緩動(dòng)的效果能夠讓運(yùn)動(dòng)顯得更加自然，這是運(yùn)動(dòng)的基本原則之一。對(duì)于緩動(dòng)，迪士尼的兩位關(guān)鍵性的動(dòng)畫大師 Ollie Johnston 和 Frank Thomas 在他們的著作《The Illusion of Life: Disney Animation》中有過非常詳盡的描述。

為了不讓動(dòng)效看起來機(jī)械或者人工痕跡太明顯，元素的運(yùn)動(dòng)應(yīng)該有漸進(jìn)加速和漸進(jìn)減速的特征，就像物理世界當(dāng)中其他的物體這樣。

勻速直線運(yùn)動(dòng)

不受任何物理力量的影響，勻速直線運(yùn)動(dòng)看起來是非常不自然的，尤其是對(duì)于人眼而言。

所有用來設(shè)計(jì)動(dòng)畫的應(yīng)用都會(huì)使用坐標(biāo)軸和曲線來闡述動(dòng)效的運(yùn)動(dòng)特征，我將嘗試闡述它們的含義，以及如何使用。坐標(biāo)軸的 X軸是實(shí)現(xiàn)，而 Y軸則表示的唯一，換句話來說，如同我們?cè)诔踔形锢碇兴鶎W(xué)到的，坐標(biāo)軸上的線條描述的是速度和加速度的特征。下面所示的直線，表示速度是均勻的，也就是勻速直線運(yùn)動(dòng)，物體在相同時(shí)間內(nèi)運(yùn)動(dòng)的距離是不變的。

△ 勻速直線運(yùn)動(dòng)的座標(biāo)圖

均勻的變化通常只會(huì)用在色彩的改變或者透明的改變上，一般來說，我們也可以讓背景元素均勻運(yùn)動(dòng)，而前景元素保持不變，來呈現(xiàn)它的狀態(tài)，就像上圖一樣。

緩動(dòng)加速曲線

通過曲線我們可以看到，物體開始時(shí)候的初速度比較低，運(yùn)動(dòng)緩慢，隨后速度逐漸增加，這意味著物體在加速運(yùn)動(dòng)。

△ 加速曲線

當(dāng)物體加速飛出屏幕的時(shí)候，可以使用這種加速曲線，比如界面中被用戶使用滑動(dòng)手勢(shì)甩出去的卡片。但是請(qǐng)記住，只有當(dāng)運(yùn)動(dòng)對(duì)象需要完全離開界面的時(shí)候才會(huì)這么使用，如果它還需要再回來的話，則不行。

△ 以加速運(yùn)動(dòng)將卡片扔出屏幕

動(dòng)畫曲線有助于正確傳達(dá)訊息，甚至表達(dá)情緒和感覺。在下面的案例當(dāng)中，我們可以看每個(gè)元素的運(yùn)動(dòng)位移是完全一樣的，所消耗的總時(shí)長(zhǎng)也是一樣的，但是運(yùn)動(dòng)的速率變化是不同的，這一點(diǎn)也體現(xiàn)在曲線上，所表現(xiàn)出來的情緒也不同。當(dāng)然，通過調(diào)整曲線，你能夠讓物體的運(yùn)動(dòng)軌跡盡可能接近現(xiàn)實(shí)世界。

緩動(dòng)減速曲線

當(dāng)元素從屏幕外運(yùn)動(dòng)到屏幕內(nèi)的時(shí)候，動(dòng)效應(yīng)該遵循這類曲線的運(yùn)動(dòng)特征。從全速進(jìn)入屏幕開始，速度降低，直到完全停止。

△ 減速曲線

減速曲線可以適用于多種不同的 UI控件和元素，包括從屏幕外進(jìn)入屏幕內(nèi)的的卡片、條目等。

△ 減速曲線案例

緩動(dòng)標(biāo)準(zhǔn)曲線

在這種曲線之下，物體從靜止開始加速，到達(dá)速度最高點(diǎn)之后開始減速直到靜止。這種類型的元素在 UI界面中最為常見，每當(dāng)你不知道要在動(dòng)效中使用哪種運(yùn)動(dòng)方式的時(shí)候，可以試試標(biāo)準(zhǔn)曲線。

△ 標(biāo)準(zhǔn)曲線

根據(jù) Material Design 的規(guī)范，最好使用不那么對(duì)稱的增速和減速的過程，讓動(dòng)效看起來更加真實(shí)。同時(shí)大家會(huì)更加在意運(yùn)動(dòng)的結(jié)果，曲線的末端，也就是運(yùn)動(dòng)結(jié)束的過程最好進(jìn)行適當(dāng)?shù)膹?qiáng)調(diào)，換句話說就是減速過程持續(xù)的時(shí)長(zhǎng)最好超過開始加速的時(shí)長(zhǎng)，用戶將會(huì)更加清楚地觀察到運(yùn)動(dòng)的最終結(jié)果，從而更好地明白運(yùn)動(dòng)的終止?fàn)顟B(tài)。

△ 對(duì)稱和非對(duì)稱運(yùn)動(dòng)的差異

當(dāng)元素從屏幕的一個(gè)位置移動(dòng)到另外一個(gè)位置的時(shí)候，最好使用這種標(biāo)準(zhǔn)的緩動(dòng)曲線，這個(gè)過程中，盡量不要讓動(dòng)畫效果引人注意，不要使用戲劇化的效果。

△ 卡片元素從屏幕上運(yùn)動(dòng)的時(shí)候，不對(duì)稱的緩動(dòng)曲線

當(dāng)元素從屏幕上消失的時(shí)候，采用了相同的不對(duì)稱緩動(dòng)曲線，用戶同樣可以通過滑動(dòng)回到之前的位置。這個(gè)環(huán)節(jié)使用了抽屜式導(dǎo)航控件。

△ 抽屜式導(dǎo)航隨著緩動(dòng)曲線從屏幕上隱藏

從這些案例當(dāng)中，可以看出許多動(dòng)效的初學(xué)者對(duì)于運(yùn)動(dòng)規(guī)則的了解還不足。比如下面的這個(gè)動(dòng)效，元素隨著減速曲線出現(xiàn)，然后使用標(biāo)準(zhǔn)緩動(dòng)曲線消失。根據(jù) Material Design 的標(biāo)準(zhǔn)，新出現(xiàn)的元素持續(xù)的時(shí)間應(yīng)該更長(zhǎng)，因?yàn)樾枰嗟淖⒁饬Α?

△ 導(dǎo)航菜單的出現(xiàn)和消失

貝賽爾曲線函數(shù) cubic-bezier（）是用來描述曲線的，它的名字前面之所以帶有 Cubic 是因?yàn)槊總€(gè)貝賽爾曲線的描述都是基于四個(gè)不同的參數(shù)來確定的。曲線的起點(diǎn)（0，0）和終點(diǎn)（1，1）在坐標(biāo)軸上的位置是已經(jīng)事先確定的。

為了簡(jiǎn)化你對(duì)于貝賽爾曲線的理解，我們推薦兩個(gè)網(wǎng)站，分別是 easings.net 和 cubic-bezier.com ，前者包含了最常見的曲線的列表，你可以將他們復(fù)制到你的原型工具中，第二個(gè)網(wǎng)站為你提供了不同曲線的參數(shù)，你可以直接在其中查看各種對(duì)象的移動(dòng)方式。

△ 不同類型的 cubic-bezier（）的曲線和參數(shù)

界面動(dòng)效的編排

就像芭蕾舞的舞蹈編排一樣，動(dòng)畫效果也是需要編排的，它的主要目的是讓元素從一個(gè)狀態(tài)切換到下一個(gè)狀態(tài)，自然過渡，讓用戶的注意力自然地被引導(dǎo)過去。

編排有兩種不同的方式，一種是均等交互，另一種是從屬交互。

均等交互

均等交互意味著所有的元素和對(duì)象都遵循一個(gè)特定的編排的規(guī)則。

在這個(gè)實(shí)例當(dāng)中，所有的卡片都遵循著一個(gè)方向來引導(dǎo)用戶的注意力，自上到下地次第加載。相反，沒有按照這樣清晰的規(guī)則來加載，用戶的注意力會(huì)被分散，元素的外觀排布也會(huì)顯得比較糟糕。

△ 用戶的注意力應(yīng)該沿著一個(gè)流向來引導(dǎo)

至于表格式的布局，它相對(duì)就復(fù)雜一點(diǎn)。在這里，用戶的視線流向應(yīng)該是清晰的對(duì)角線方向，因此，逐個(gè)區(qū)塊次第出現(xiàn)是一個(gè)糟糕的設(shè)計(jì)。這樣的逐個(gè)顯示，一方面耗時(shí)太長(zhǎng)，另一方面會(huì)讓用戶覺得元素的加載方式是鋸齒狀的，這種方式并不合理。

△ 沿著對(duì)角線加載

從屬交互

從屬交互指的是使用一個(gè)中心對(duì)象作為主體，來吸引用戶的注意力，而其他的元素從屬于它來逐步呈現(xiàn)。這樣的動(dòng)畫設(shè)計(jì)能夠創(chuàng)造更強(qiáng)的秩序感，讓主要的內(nèi)容更容易引起用戶的注意。

在其他的設(shè)計(jì)當(dāng)中，用戶很難搞清楚哪個(gè)才是主要的，因?yàn)樽⒁饬Ρ环稚⒘?。因此，如果要設(shè)置多個(gè)動(dòng)畫元素，應(yīng)該定義清楚誰為主，誰是中心，并且盡量按照從屬關(guān)系來次第呈現(xiàn)不同的子元素。

如果只有一個(gè)中心對(duì)象，那么其他的對(duì)象的運(yùn)動(dòng)方式都要受它制約，否則用戶分不清楚主次。

根據(jù) Material Design 的規(guī)定，當(dāng)元素不成比例地變幻尺寸的時(shí)候，它應(yīng)該沿著弧線運(yùn)動(dòng)，而不是直線運(yùn)動(dòng)，這樣有助于讓它看起來更加自然。所謂「不成比例」地變化指的是元素的長(zhǎng)和寬的變化并不是按照相同比例來縮放或者變化的，換句話來說，變化的速度也不一樣。（比如，方形變成矩形）

△ 不成比例地改變對(duì)象外觀的時(shí)候，運(yùn)動(dòng)軌跡應(yīng)該是弧線的

相反，如果元素是按照比例改變大小的時(shí)候，應(yīng)該沿著直線移動(dòng)，這樣不僅操作更加方便，而且更符合均勻變化的特征?？匆幌抡鎸?shí)的案例，你會(huì)發(fā)現(xiàn)直線的運(yùn)動(dòng)軌跡會(huì)更加合理。

△ 成比例變化大小的時(shí)候，應(yīng)該沿著直線運(yùn)動(dòng)

當(dāng)元素不成比例放大的時(shí)候，運(yùn)動(dòng)軌跡是弧線，而這種弧線運(yùn)動(dòng)軌跡有兩種不同的呈現(xiàn)一種，一種軌跡是初始方向?yàn)榇怪狈较蚨\(yùn)動(dòng)結(jié)束時(shí)瞬間運(yùn)動(dòng)方向是水平的（Horizontal out），另外一種初始方向是水平方向而運(yùn)動(dòng)結(jié)束時(shí)瞬間運(yùn)動(dòng)方向是垂直的（Vertical out）。

那么怎么選取這個(gè)方向呢？很簡(jiǎn)單，元素運(yùn)動(dòng)曲線的方向，應(yīng)該是要向界面的主要運(yùn)動(dòng)方向的主軸靠攏重合。舉個(gè)例子，在下面的動(dòng)效當(dāng)中，整個(gè)界面的滾動(dòng)方向是上下滾動(dòng)，主軸是縱向的，因此，當(dāng)卡片點(diǎn)擊之后被展開的時(shí)候，會(huì)先向右水平移動(dòng)，并最終以垂直運(yùn)動(dòng)結(jié)束，運(yùn)動(dòng)的最終方向，切線是垂直的，也就和垂直方向的主軸重合了。

△ 元素按照弧線展開的時(shí)候，最終方向應(yīng)該和主軸重合

如果幾個(gè)不同的元素的運(yùn)動(dòng)軌跡相交，那么他們不能彼此穿越。如果每個(gè)元素都必須通過某個(gè)交點(diǎn)，抵達(dá)另外一個(gè)位置，那么應(yīng)該次第減速，依次通過這個(gè)點(diǎn)，給彼此留出足夠的空間。另外一種選擇，是元素不相交，而是像實(shí)體一樣在靠近的時(shí)候，彼此推開。為什么？因?yàn)槲覀兺ǔ＜俣ń缑嬷兴械脑囟嘉挥谕粋€(gè)平面當(dāng)中。

在運(yùn)動(dòng)過程中，元素不應(yīng)彼此穿越，而應(yīng)該互相留出空間。

但是這一點(diǎn)也不是一成不變的。在比較擁擠的界面當(dāng)中，某個(gè)元素可以「越過」其他的元素，它同樣沒有穿過其他的元素消失，而是單純的移動(dòng)。這一點(diǎn)從某種意義上也是延續(xù)自我們?nèi)粘５奈锢硪?guī)律，只不過我們會(huì)默認(rèn)界面中的元素在這個(gè)情況下?lián)碛辛烁叨冗@樣的屬性。

△ 元素可以越過其他的元素運(yùn)動(dòng)

結(jié)語

我們總結(jié)了這么多動(dòng)效運(yùn)動(dòng)的規(guī)則和原則，從某種意義上還是延續(xù)自我們對(duì)于物理世界的認(rèn)知，摩擦力和加速度在虛擬界面中以另外的方式續(xù)存著。模仿現(xiàn)實(shí)世界的界面讓我們對(duì)于界面的秩序有更清晰的認(rèn)知，允許我們更輕松的了解和訪問界面的內(nèi)容。

如果動(dòng)效按照正確的方式來設(shè)計(jì)，它應(yīng)該是不顯著，且不會(huì)分散用戶注意力的。如果不是這樣，那么你需要讓動(dòng)效更微妙一點(diǎn)，實(shí)在不行甚至需要將它移除。動(dòng)效不應(yīng)該成為影響用戶操控界面的障礙，或者轉(zhuǎn)移注意力的存在。

當(dāng)然，即使是遵循這么多規(guī)律，動(dòng)效的設(shè)計(jì)依然是一門藝術(shù)，而非單純的科學(xué)，多做測(cè)試多摸索總是有必要的。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

篩選組件概述

篩選組件的作用是幫助人們?cè)诿鎸?duì)大量信息時(shí)，通過更的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及Tab欄，本文暫不分析。

組件包括篩選按鈕與篩選器，篩選器包含類別及各類別下的篩選項(xiàng)。使用頻次高低、篩選條件的數(shù)量都是決定篩選組件樣式的因素。

01

位于 Tab 欄的篩選組件

組件樣式

篩選按鈕位置：一般位于Tab欄最右側(cè)視覺薄弱區(qū)域。

篩選器形式：點(diǎn)擊按鈕，篩選器以抽屜形式從Tab欄底部向下展開篩選條件，或以浮層形式從屏幕最右側(cè)向左滑出篩選條件。

樣式分析

當(dāng)界面使用Tab欄時(shí)，已為內(nèi)容做了第一層篩選，多數(shù)情況下已滿足用戶對(duì)內(nèi)容的篩選需求。

當(dāng)篩選類別較多且復(fù)雜時(shí)，就需要在Tab欄增加篩選組件來提供更詳細(xì)的篩選能力。而這里的篩選組件較于Tab欄其他條件優(yōu)先級(jí)較低，屏幕右側(cè)為視覺薄弱區(qū)域，這也解釋了為什么大多數(shù)Tab欄的篩選組件都位于最右側(cè)。

案例一

案例來源于美團(tuán)App

此頁是對(duì)美食品類的選擇，這里的篩選組件在Tab中是最常見的樣式。對(duì)于用戶而言，選擇商家店鋪優(yōu)先考慮地域、美食類別、價(jià)格及綜合評(píng)價(jià)，而用餐人數(shù)與餐廳服務(wù)等只是輔助選擇條件。

篩選器使用了抽屜形式，如要選擇此樣式，建議在篩選條件不多且不超過一屏的場(chǎng)景使用。

案例二

案例來源于淘寶App

當(dāng)用戶從首頁全局搜索后，出現(xiàn)此頁。篩選按鈕位于二級(jí)Tab欄。點(diǎn)擊篩選按鈕后，由于篩選條件較多，很難一頁展示完，用戶往往需要上下滑動(dòng)屏幕查看全部，因此使用右側(cè)浮層展開的形式較適合。

案例三

案例來源于嗶哩嗶哩App

全局搜索后，Tab欄默認(rèn)展開綜合tab內(nèi)容，用戶對(duì)排序、時(shí)長(zhǎng)、分區(qū)的篩選需求較高，因此直接把篩選類別放在了二級(jí)Tab欄，相比通過點(diǎn)擊篩選按鈕再展開類別的交互方式更簡(jiǎn)單直白。

點(diǎn)擊篩選類別后，篩選器使用抽屜式。此種篩選組件樣式一般用于篩選類別較少（不超過4項(xiàng)），篩選項(xiàng)數(shù)量不多的場(chǎng)景。

02

底部按鈕型篩選組件

組件樣式

篩選按鈕位置：以按鈕或浮層形式固定在界面底部，便于用戶操作。

篩選器形式：點(diǎn)擊按鈕，篩選器以抽屜形式從按鈕底部向上展開篩選條件，或以界面浮層形式從底部向上展開篩選條件。

樣式分析

使用底部篩選按鈕的界面，內(nèi)容區(qū)類別相對(duì)單一，通過篩選組件就能滿足篩選需求，并對(duì)篩選的需求較大。而底部按鈕作為常見的按鈕形式，用戶點(diǎn)擊更方便，因此承載篩選組件較合適。

若使用此樣式，點(diǎn)擊篩選按鈕后，篩選器的出現(xiàn)優(yōu)先考慮從底部向上出現(xiàn)的抽屜式浮層。

案例一

案例來源于旅游類App Expedia

輸入旅游目的地后進(jìn)入此列表頁，用戶目的性明確，就是要查看結(jié)果。底部的篩選按鈕是為了幫助用戶更快的篩選結(jié)果，方便用戶觸達(dá)。并且篩選條件較多，無法一頁展示完，使用了界面浮層的形式。

這里還有2個(gè)細(xì)節(jié)：

1、由于篩選類別較多，手動(dòng)清除單個(gè)篩選條件太過繁瑣，于是篩選器底部增加了清除按鈕，操作更簡(jiǎn)便。但底部按鈕一般為“確定”操作，“清除”放在底部樣式上沒有做誤操作提示，可能會(huì)增加誤操作機(jī)率。

2、篩選后，篩選按鈕處會(huì)顯示已選擇的篩選類別數(shù)量，給用戶帶來良好的使用反饋。

案例二

案例來源于dribbble

當(dāng)前頁為地點(diǎn)搜索。需要先進(jìn)行篩選操作，內(nèi)容區(qū)再出現(xiàn)結(jié)果。篩選按鈕位于底部浮層，篩選類別代替篩選按鈕平鋪展現(xiàn)，篩選器使用抽屜式從浮層底部向上展開。

此樣式一般適合篩選類別較少，并且每個(gè)類別的篩選項(xiàng)不多的場(chǎng)景。優(yōu)點(diǎn)是減少操作步驟，提高用戶操作效率。并且可以學(xué)習(xí)一些體驗(yàn)細(xì)節(jié)：在篩選器中選擇一個(gè)選項(xiàng)后，在其篩選類別處同步修改為該選項(xiàng)；篩選項(xiàng)與篩選類別選中狀態(tài)一致，增加關(guān)聯(lián)度。

03

浮層按鈕型篩選組件

組件樣式

篩選按鈕位置：以浮層按鈕的形式位于界面右下方，占用空間較少。

篩選器形式：點(diǎn)擊按鈕，篩選器以浮層形式為主，或在篩選按鈕下方展開篩選條件。

樣式分析

浮層型篩選按鈕的優(yōu)點(diǎn)是增大內(nèi)容區(qū)的縱向空間，比底部按鈕型篩選組件的層級(jí)要弱一些。但當(dāng)用戶需要操作時(shí)，它的位置也便于用戶點(diǎn)擊。

設(shè)計(jì)時(shí)按鈕用色需要區(qū)別于內(nèi)容區(qū)，內(nèi)容形式盡量精簡(jiǎn)直觀。若使用案例3中的扇形篩選器，則要求篩選類別為1-2類，篩選項(xiàng)數(shù)量少切文案精簡(jiǎn)。

案例一

案例來源于dribbble

篩選按鈕位于界面右下方緊貼于右側(cè)屏邊，浮于被篩選內(nèi)容上層，滑動(dòng)屏幕時(shí)消失。點(diǎn)擊篩選按鈕后，從屏幕右側(cè)展開篩選浮層，原篩選按鈕變?yōu)榇_認(rèn)按鈕。

此按鈕形式最大限度的讓出空間留給內(nèi)容區(qū)，且右下角為用戶關(guān)注薄弱區(qū)，這樣的位置關(guān)系可讓用戶按需操作。關(guān)于篩選器使用右側(cè)浮層前面的案例也提到過，適用于篩選條件較多的場(chǎng)景。并且使用側(cè)邊欄形式的浮層與篩選按鈕關(guān)聯(lián)性較高，相對(duì)符合用戶認(rèn)知。體驗(yàn)細(xì)節(jié)上可學(xué)習(xí)的點(diǎn)還有按鈕功能的改變，使得體驗(yàn)更便捷。

案例二

案例來源于dribbble

篩選按鈕位于界面右下方但沒有貼屏邊，篩選器以底部分層形式從底部向上展開。這里的篩選條件不多，因此使用了底部分層形式。

案例三

案例來源于dribbble

篩選按鈕形式與上一案例相似，不同的是篩選按鈕處直接顯示篩選條件，可得知此內(nèi)容區(qū)目前被篩選維度為“30M”。此樣式適用于篩選條件為同一維度的場(chǎng)景。

點(diǎn)擊按鈕后，從按鈕下層展開扇形篩選器，滑動(dòng)選擇篩選條件。此種篩選器樣式使用場(chǎng)景較局限，多為選擇時(shí)長(zhǎng)或數(shù)量，并且單選居多。因此篩選器不需要“確定按鈕”，只需放“關(guān)閉按鈕”即可。這里的篩選器也可根據(jù)不同的場(chǎng)景選擇其他的形式。

04

舉一反三

接下來我們拿個(gè)案例練練手。

下圖界面中內(nèi)容區(qū)為概覽與各監(jiān)控?cái)?shù)據(jù)圖表，需要設(shè)計(jì)一個(gè)篩選組件對(duì)內(nèi)容區(qū)進(jìn)行不同時(shí)段的篩選。

在設(shè)計(jì)之前需要確定幾個(gè)需求：篩選組件的使用頻次、篩選類別的數(shù)量、篩選項(xiàng)的數(shù)量，單復(fù)選關(guān)系、篩選條件之間的優(yōu)先級(jí)。

進(jìn)一步明確需求

篩選類別只有時(shí)間段1項(xiàng)，篩選數(shù)量不固定，為多項(xiàng)，單選關(guān)系。當(dāng)用戶進(jìn)入此頁，根據(jù)用戶使用需求判斷“1小時(shí)”基本滿足用戶查看數(shù)據(jù)的需求，默認(rèn)展示“1小時(shí)”的篩選。因此篩選組件此場(chǎng)景使用“1小時(shí)”時(shí)段基本滿足用戶查看數(shù)據(jù)的需求，可判斷用戶使用篩選組件的頻次不高。

方案解析

方案一，Tab欄形式

Tab是對(duì)整頁的篩選，多為不同維度，而這里只有時(shí)段一個(gè)維度。

Tab所處位置為視覺熱點(diǎn)區(qū)域附近，但用戶對(duì)篩選組件的需求并不高，放在此位置占用了概覽區(qū)空間。

方案二，底部按鈕形式

底部按鈕位于用戶的習(xí)慣操作區(qū)，放這里使用層級(jí)略高，并且會(huì)使內(nèi)容區(qū)的整體高度減少。

方案三，浮層按鈕形式

位于右下角的浮層按鈕在頁面中屬于視覺薄弱區(qū)域，可以使用戶瀏覽時(shí)不受按鈕影響；但按鈕擁有強(qiáng)對(duì)比色，在有篩選需求時(shí)滿足使用需求。

篩選器以時(shí)間選擇器形式出現(xiàn)，可滿足篩選項(xiàng)數(shù)量較多的場(chǎng)景。

05

小結(jié)

以上內(nèi)容是我對(duì)常見篩選組件的思考，每一種樣式都有其優(yōu)缺點(diǎn)。但我們?cè)O(shè)計(jì)篩選組件的最終目的是幫助用戶篩選信息，決策。這就需要設(shè)計(jì)師根據(jù)篩選需求、用戶習(xí)慣等設(shè)計(jì)符合用戶使用場(chǎng)景的操作體驗(yàn)。

本文作者：TXD技術(shù)體驗(yàn)團(tuán)隊(duì)-喻杰（阿里巴巴視覺設(shè)計(jì)師）

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

令人上癮的數(shù)字內(nèi)容，讓我們一刻都離不開智能手機(jī)，從某種意義上，它徹底改變了我們的生活，工作，甚至思考的方式?，F(xiàn)如今，越來越多的人開始嘗試戒除令人上癮的智能手機(jī)，尋找更加健康自由的人機(jī)關(guān)系。根據(jù)今天的調(diào)研，過度使用智能手機(jī)，確實(shí)會(huì)有一定機(jī)率帶來心理健康的問題。從 iPhone 誕生之初，直到10年后的現(xiàn)在，在數(shù)字產(chǎn)品上癮和用戶注意力的控制這件事情上，開發(fā)團(tuán)隊(duì)本身就沒有放松過。這次，F(xiàn)ast Company 專訪了前蘋果設(shè)計(jì)師 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了蘋果公司，并且很快就出任了公司的人機(jī)交互界面組的設(shè)計(jì)總監(jiān)，在2006年前后，他也是作為 iPhone 項(xiàng)目核心的6人團(tuán)的一員，加入到項(xiàng)目當(dāng)中來。

待在蘋果的20多年時(shí)間里，他參與了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等幾乎全部主要產(chǎn)品的用戶界面的設(shè)計(jì)，直到他開始追求創(chuàng)造屬于自己的公司和事業(yè)，才正式從蘋果離職。也正是因?yàn)檫@樣的契機(jī)，才使得 Fast Company 有機(jī)會(huì)能和他面對(duì)面地一起聊一聊他的過去，以及他留給蘋果的那些遺產(chǎn)。

和許多設(shè)計(jì)師一樣，他們對(duì)于產(chǎn)品的想法和企業(yè)的定位或多或少有一些錯(cuò)位。和蘋果產(chǎn)品相關(guān)的很多信息，他現(xiàn)在依然還不能透露，但是他依然提到了很重要的事情：即使是在iPhone的原型設(shè)計(jì)階段，他就已經(jīng)意識(shí)到了，這款產(chǎn)品最大的缺陷之一，就是它注定會(huì)分散甚至壟斷用戶的注意力。而與此同時(shí)，蘋果也有意識(shí)的沒有給予用戶，對(duì)于iPhone 完全的控制權(quán)。下面，是訪談中能夠?qū)ν夤嫉膸讉€(gè)重要的內(nèi)容摘錄：

設(shè)計(jì)「請(qǐng)勿打擾」的功能

「我認(rèn)為，從某種意義上來說，真正洞悉設(shè)計(jì)的設(shè)計(jì)師，大都能夠預(yù)見到手機(jī)對(duì)于注意力的影響。在使用手機(jī)的時(shí)候，我們總會(huì)碰到被各種各樣的信息和通知打擾到?！?

「早些時(shí)候，當(dāng)我剛剛開始制作 iPhone 的原型之時(shí)，管束還不是那么多，我們當(dāng)中有幾個(gè)人還有幸把原型機(jī)帶回家，這樣就可以每天工作生活都使用它。那個(gè)時(shí)候我全世界各地的朋友都和我保持著聯(lián)系，iPhone 幾乎隔一會(huì)兒就會(huì)亮一下，顯示有新消息，叮叮咚咚響個(gè)不停，于是我意識(shí)到，和我們朝夕相處的手機(jī)需要一個(gè)管控功能。所以，在很早的階段，我就開始設(shè)計(jì)請(qǐng)勿打擾這個(gè)功能了。」

對(duì)于誰來掌控手機(jī)設(shè)備這個(gè)事，蘋果的內(nèi)部產(chǎn)生了分歧

「其實(shí)，在蘋果公司內(nèi)部，想要大家都理解分心是一個(gè)影響用戶生活的問題，還挺難的。喬布斯倒是很能理解的，但是公司內(nèi)其他的同事，對(duì)于用戶對(duì)于手機(jī)的控制權(quán)多少，其實(shí)大家還存在不少爭(zhēng)議。我和一部分同事倡議給用戶更多的掌控權(quán)，不過這個(gè)事情對(duì)產(chǎn)品的營(yíng)銷和市場(chǎng)運(yùn)作是有影響的。所以，當(dāng)時(shí)內(nèi)部也有聲音說，如果真的給用戶太多的控制權(quán)，那么這款手機(jī)就不酷了。」

「其實(shí)直到今天，iPhone 當(dāng)中絕大多數(shù)的功能都是可控的，但是其中很多功能隱藏的比較深，徹底的掌控它們是比較困難的，如果你真得想讓那些整天都在轟炸你的信息徹底遠(yuǎn)離，你需要花費(fèi)很長(zhǎng)的時(shí)間來摸索，用獨(dú)特的方式逐個(gè)調(diào)整或者關(guān)閉才行。因此，對(duì)于那些熟練使用iPhone 的重度用戶而言，確實(shí)是可以如臂使指地掌控這臺(tái)設(shè)備，但是對(duì)于更換壁紙都不太會(huì)的用戶，想要搞清楚iPhone ，讓它如意隨心，真的是難如登天。他們沒有這樣的控制能力。」

關(guān)于 iPhone 是否有可能更智能地預(yù)測(cè)通知

「你可能會(huì)在一個(gè)下午安裝十幾個(gè)不同的新應(yīng)用，然后你不停地會(huì)收到提醒和通知，是否要授權(quán)使用相機(jī)，是否要授權(quán)獲取你的位置，是否允許它給你發(fā)送通知，每個(gè)都要做決定。稍后，你可能會(huì)發(fā)現(xiàn)，F(xiàn)acebook 一直在后臺(tái)給你推送信息。再之后你就會(huì)發(fā)現(xiàn)你有睡眠障礙了，總會(huì)有信息大半夜地推送到你的眼前，讓你無法安生地休息。實(shí)際上，借助請(qǐng)勿打擾的功能，你可以一早上再查看它們。這套系統(tǒng)足夠智能，能夠判斷出哪些應(yīng)用之前就已經(jīng)獲得了許可，哪些仍然在后臺(tái)獲取數(shù)據(jù)，哪些通知實(shí)際上你并不關(guān)心。所以，這套系統(tǒng)其實(shí)是會(huì)選擇更加恰當(dāng)?shù)臅r(shí)機(jī)和正確的方式來建立用戶和手機(jī)之間的對(duì)話和關(guān)系，手機(jī)會(huì)詢問用戶，你真的需要這些通知嗎？或者是，你真的需要Facebook 使用你的電話簿的信息嗎（因?yàn)槟阋呀?jīng)很久沒有登錄了）？等等。正確地設(shè)計(jì)了這套系統(tǒng)之后，提醒用戶的方式也非常的多?！?

為什么蘋果最后還是開始關(guān)注分心這個(gè)事情？

「iOS 12 中內(nèi)置的這套防干擾的控制系統(tǒng)可以更加系統(tǒng)地監(jiān)控手機(jī)各方面的功能和用量，它實(shí)際上是從iOS 6 時(shí)代的請(qǐng)勿打擾的功能拓展而來的。但是它在現(xiàn)在被推出來真正的原因是有太多的用戶為此而抱怨，而媒體和用戶都發(fā)文吐槽，在呼聲和壓力之下，它們最終在iOS 12 中呈現(xiàn)了出來。這個(gè)局面之下，蘋果沒有選擇的余地，必須對(duì)于輿論有回應(yīng)。這對(duì)于每個(gè)人都是好事，因?yàn)橛脩艉退麄兊暮⒆佣家虼四軌颢@得更好的產(chǎn)品。但是這是否是最好的產(chǎn)品？當(dāng)然算不上，因?yàn)楝F(xiàn)在的iOS系統(tǒng)是為了應(yīng)對(duì)輿論和負(fù)面新聞而設(shè)計(jì)的，設(shè)計(jì)的意圖并不對(duì)。如果是蘋果主動(dòng)作出這樣的決策，才算得上是好產(chǎn)品?！?

「對(duì)于蘋果這種體量的大公司而言，產(chǎn)品設(shè)計(jì)其實(shí)復(fù)雜性非常的高。真的是這樣。作為設(shè)計(jì)師，你需要服務(wù)于你的用戶，你還得和公司的利益保持一致，同時(shí)，還需要對(duì)得起自己的底線和道德。服務(wù)于一個(gè)大型的企業(yè)，確實(shí)非常的難做抉擇。對(duì)于用戶而言，可以很輕松的直接懟蘋果，說它沒有做對(duì)的事情。但是身為其中的設(shè)計(jì)師，要平衡各方面的需求也壓力，經(jīng)常會(huì)進(jìn)退維谷。有些用戶因?yàn)閕Phone 的一些功能，受到了負(fù)面的影響，有些人受到的影響比另一部分人更多。但是身為設(shè)計(jì)師，一個(gè)受到各方面制衡的設(shè)計(jì)師，即使是作出了改變，在很多時(shí)候也遠(yuǎn)遠(yuǎn)不夠。至少在我看來，現(xiàn)在的改變還不夠大?！?

管理數(shù)字化的生活，就像管理健康一樣重要

「我和數(shù)字設(shè)備之間的關(guān)系非常簡(jiǎn)單。我不希望被它所控制。從使用 iPhone 的第一天起，我就用著黑色的壁紙。我不會(huì)將一大堆的東西塞進(jìn)手機(jī)，減少被分心的可能性。我的手機(jī)第一屏上的應(yīng)用程序非常少。」

「我的意思并不是說這樣做很重要，或者說我推薦這么做，對(duì)于人和手機(jī)之間的關(guān)系，每個(gè)人都不一樣，處理方式也都很個(gè)人。對(duì)于如何處理自己和手機(jī)之間的關(guān)系，有人讓我提一些建議，我覺得沒有必要，因?yàn)槲业霓k法并不適合所有人。一天喝多少咖啡，抽幾包煙，每個(gè)人的情況都不一樣，沒法一概而論。不過，心理健康是一件大事，你和你的智能設(shè)備之間，應(yīng)該保持著平等的關(guān)系。這至少是一個(gè)大的設(shè)計(jì)趨勢(shì)，是設(shè)計(jì)師需要關(guān)注的焦點(diǎn)。就像可持續(xù)性發(fā)展已經(jīng)成為時(shí)代的主流訴求一樣，你無法忽視認(rèn)知壓力的存在，認(rèn)知設(shè)計(jì)也勢(shì)在必行?！?

界面設(shè)計(jì)的未來，以及不可避免的問題

「我觀察到，界面設(shè)計(jì)在很自然地進(jìn)化和發(fā)展著，從按鈕到旋鈕，從點(diǎn)擊到手勢(shì)操作，從語音交互到情感化設(shè)計(jì)，均是如此。無論是考慮到用戶的情感訴求，還是進(jìn)入語音交互的領(lǐng)域，都一定會(huì)遭遇一大堆的問題。按鈕和旋鈕的設(shè)計(jì)是需要考慮到人體工程學(xué)的問題，點(diǎn)擊和手勢(shì)的交互則牽涉到更具體的壓感和硬件上問題。任何人和機(jī)器之間的交互，都一定都會(huì)遭遇不自然的狀況和問題，就這么簡(jiǎn)單。身為設(shè)計(jì)師，需要足夠的預(yù)見性，才能真正領(lǐng)先于用戶，預(yù)測(cè)到可能會(huì)遭遇的問題?！?

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

很多產(chǎn)品設(shè)計(jì)師，在畫原型或者設(shè)計(jì) UI 的時(shí)候癡迷于工具的使用，拿到需求文檔之后急于動(dòng)手畫圖，忽略了信息架構(gòu)設(shè)計(jì)對(duì)于產(chǎn)品的作用。

信息架構(gòu)作為一個(gè)產(chǎn)品的骨架，是產(chǎn)品非常重要的一部分，它決定了一個(gè)產(chǎn)品

的布局和未來的發(fā)展方向以及用戶對(duì)一個(gè)產(chǎn)品的最初印象和整體體驗(yàn)。毫不夸張的說，好的產(chǎn)品信息架構(gòu)是產(chǎn)品成功的一半。

那么到底什么是產(chǎn)品的信息架構(gòu)呢？該如何設(shè)計(jì)產(chǎn)品的信息架構(gòu)？如何評(píng)判一個(gè)產(chǎn)品信息架構(gòu)的好壞？我們接著往下看：

一、信息架構(gòu)的概念

讓我們來看一個(gè)例子：

一個(gè)飯店需要有哪些設(shè)施，如果你是飯店的老板如何合理的排布這些設(shè)施，可以讓客戶感覺很舒服的用餐，這個(gè)過程就是一個(gè)信息架構(gòu)的過程。他可以讓客戶對(duì)你的飯店產(chǎn)生好感，從而下次用餐的時(shí)候還會(huì)想到來你這里吃飯。

在排布飯店設(shè)施的過程中我們要遵循一些規(guī)范，比如用戶的習(xí)慣或者施工規(guī)范等，正是因?yàn)樾枰裱@些規(guī)范，所以我們需要一個(gè)信息架構(gòu)來體現(xiàn)這些。

比較官方的信息架構(gòu)解釋是這樣的：信息架構(gòu)設(shè)計(jì)是對(duì)信息進(jìn)行結(jié)構(gòu)、組織以及歸類的設(shè)計(jì)，好讓使用者與用戶容易使用與理解的一項(xiàng)藝術(shù)與科學(xué)。

簡(jiǎn)單來說，信息架構(gòu)設(shè)計(jì)就是讓用戶可以 容易地理解你的產(chǎn)品是怎樣的。讓他們?cè)谑褂媚惝a(chǎn)品的時(shí)候可以更順利更自然。就像一進(jìn)入飯店就會(huì)有一種感覺，門口是等餐的地方，進(jìn)去就應(yīng)該吃飯，如果找洗手間一定不會(huì)往門口走，而會(huì)往深處走。這就是信息架構(gòu)的好處：他讓用戶使用同類產(chǎn)品時(shí)更容易上手和理解，讓產(chǎn)品更容易被接受。

二、為何需要信息架構(gòu)設(shè)計(jì)

那對(duì)于線上產(chǎn)品來說為什么需要合理的信息架構(gòu)呢？大家來看下邊3組 app 的 tab欄截圖。你能僅僅從 tab欄就看出這款 app 是什么類型的 app，如何使用嗎？

很明顯的，第一個(gè)是一款購物類 app，第二個(gè)是一款圖片社交類的 app，第三個(gè)是微信的 tab，雖然首頁名稱是微信，但是我相信如果把名稱換成「聊天」，你還是能認(rèn)出這是微信的 tab欄。

從底部標(biāo)簽欄就可以大致看出產(chǎn)品是用來干嘛的，這就是信息架構(gòu)的作用。一個(gè)合理的信息架構(gòu)可以讓產(chǎn)品非常容易被用戶理解，可以讓用戶第一眼對(duì)產(chǎn)品有一個(gè)簡(jiǎn)單的認(rèn)知，指導(dǎo)自己可以用產(chǎn)品做什么事，指導(dǎo)產(chǎn)品提供什么服務(wù)。

再看一組反例：

這三組 tab欄就讓人很困惑了，看了半天你也許根本不知道這幾款 app 是做什么用的，以及如何使用。如果你讓用戶很困惑，他會(huì)分分鐘拋棄你的 app。

所以信息架構(gòu)的核心目標(biāo)是為用戶提供更好的體驗(yàn)，獲得更高的留存率。

一款信息架構(gòu)良好的產(chǎn)品必然遵循以下兩個(gè)標(biāo)準(zhǔn)：

• 讓用戶打開 app 的第一秒就知道這是一款什么 app，怎么用；
• 用戶想要使用某一功能時(shí)，能夠第一時(shí)間找到。

我們通過這兩個(gè)標(biāo)準(zhǔn)來印證下上邊3個(gè)正面案例的信息架構(gòu)：

相信你能很快速的識(shí)別出這款軟件的用途和用法，這就給提升留存提供了基礎(chǔ)。

那么如果信息架構(gòu)像架構(gòu)一個(gè)飯店一樣簡(jiǎn)單，那么信息架構(gòu)為何需要設(shè)計(jì)？

因?yàn)槟愕膶?shí)際產(chǎn)品功能可能有這么多：

畢竟我們不是支付寶，沒辦法把功能像豆腐塊一樣堆疊起來，我們需要一些科學(xué)的設(shè)計(jì)方法。

三、如何設(shè)計(jì)信息架構(gòu)

合理的信息架構(gòu)設(shè)計(jì)需要考慮5個(gè)步驟：

下面我來分步講解一下。

1. 了解用戶，場(chǎng)景，習(xí)慣

首先你的產(chǎn)品是給到用戶用，你當(dāng)然要最大限度的了解你的用戶，我們先來看下一個(gè)概念：「心智模型」。

心智模型是經(jīng)由經(jīng)驗(yàn)及學(xué)習(xí)，腦海中對(duì)某些事物發(fā)展的過程，所寫下的劇本。人類在經(jīng)歷或?qū)W習(xí)某些事件之后，會(huì)對(duì)事物的發(fā)展及變化，歸納出一些結(jié)論，然后像是寫劇本一樣，把這些經(jīng)驗(yàn)濃縮成一本一本的劇本，等到重復(fù)或類似的事情再度發(fā)生，我們便不自覺的應(yīng)用這些先前寫好的劇本，來預(yù)測(cè)事物的發(fā)展變化。心智模型是你對(duì)事物運(yùn)行發(fā)展的預(yù)測(cè)。再說得清楚一點(diǎn)，你「希望」事物將如何發(fā)展，并不是心智模型，但你「認(rèn)為」事物將如何發(fā)展，就是你的心智模型了。

假設(shè)你從沒見過 iPad，而我剛遞給你一臺(tái)并告訴你可以用它來看書。在你打開 iPad 使用它之前，你頭腦里會(huì)有一個(gè)在 iPad 上如何閱讀的模型。你會(huì)假想書在 iPad 屏幕上是怎樣的，你可以做什么事情，比如翻頁或使用書簽，以及這些事情的大致做法。即使你以前從沒有使用過 iPad，你也有一個(gè)用 iPad 看書的「心智模型」。你頭腦里的心智模型的樣式和運(yùn)作方式取決于很多因素。

用戶往往帶著以往使用 APP 的一些習(xí)慣來使用產(chǎn)品；線下做同一件事的習(xí)慣、生活習(xí)慣、心智模型等。要考慮哪些是可以創(chuàng)新的，哪些是用戶習(xí)慣，要在不妨礙用戶習(xí)慣的情況下作出更能讓用戶接受的創(chuàng)新。

你要考慮清楚4個(gè)問題：

用戶通常用你的產(chǎn)品做什么？

用戶用你的產(chǎn)品來做什么？用來看新聞還是用來聊天？一定要考慮清楚用戶的核心流程。從核心流程中提取信息架構(gòu)的基礎(chǔ)形式。

用戶用這類產(chǎn)品最關(guān)心什么？

用新聞app 時(shí)咨詢的真實(shí)性實(shí)效性，購物類app 精準(zhǔn)搜索和售后功能，就是你的用戶關(guān)注點(diǎn)在哪里，這是一個(gè)很好的突破口。

用戶有哪些思維定式？

和用戶年齡身份相關(guān)的屬性，產(chǎn)品體驗(yàn)符合相應(yīng)用戶的思維模式，心智模型，用戶就會(huì)比較容易接受。

用戶用什么類似的產(chǎn)品？

類似的產(chǎn)品也會(huì)帶來一些用戶習(xí)慣，迎合這些習(xí)慣也會(huì)讓用戶快速上手接受產(chǎn)品。

了解了你的用戶場(chǎng)景和使用習(xí)慣之后你會(huì)知道如何做出符合用戶心智的，容易被接受的產(chǎn)品，你不需要擔(dān)心做的產(chǎn)品沒有差異性或者沒有競(jìng)爭(zhēng)力，我們可以在核心流程之外做出創(chuàng)新點(diǎn)，讓用戶覺得你的產(chǎn)品又好用又有些不一樣。

2. 了解業(yè)務(wù)

這里的業(yè)務(wù)包括與產(chǎn)品接觸的內(nèi)部及外部的人提出的需求，比如公司的運(yùn)營(yíng)，市場(chǎng)，銷售，BD，公司的外部合作伙伴等。

這些人的需求我們也要收集，比如運(yùn)營(yíng)人員想更方便的管理注冊(cè)用戶，銷售想更多的添加廣告位，市場(chǎng)推廣人員要求能統(tǒng)計(jì)不同渠道帶來產(chǎn)品的下載量，注冊(cè)數(shù)，活躍數(shù)，合作伙伴需要進(jìn)行賬號(hào)，內(nèi)容互通等，總之只要與業(yè)務(wù)有關(guān)的人的意見，盡可能的在產(chǎn)品設(shè)計(jì)前多收集，即使做不了，也告訴他們?cè)?，要不然產(chǎn)品上線后就等著被他們吐槽吧。

3. 調(diào)研競(jìng)品的信息架構(gòu)

在做一款 app 時(shí)，我們面臨了和無數(shù)競(jìng)品爭(zhēng)搶用戶的局面，這時(shí)候分析競(jìng)品就非常必要，我們需要在知己知彼的前提下，做好核心流程功能，再思考如何在差異功能上做好突破。

首先我們需要把競(jìng)品功能梳理成思維導(dǎo)圖：

其實(shí)思維導(dǎo)圖就是信息架構(gòu)比較基礎(chǔ)的形式了，但是光有思維導(dǎo)圖沒用，我們需要對(duì)思維導(dǎo)圖進(jìn)行分析。

我以前做過的一款人脈 app 為例，當(dāng)初對(duì)比了領(lǐng)英、赤兔和脈脈，分析了這4款 app 的思維導(dǎo)圖后得出的共性和差異點(diǎn)：

共性就是要符合用戶使用習(xí)慣的地方，如果你調(diào)研的3-5個(gè)產(chǎn)品都這么做了，很可能這里是產(chǎn)生用戶習(xí)慣的地方，是我們需要去遵循的，這是獲得用戶好感度的基礎(chǔ)。

分析產(chǎn)品時(shí)你一定也會(huì)得出一些產(chǎn)品差異的地方，而這些差異就是你的產(chǎn)品競(jìng)爭(zhēng)點(diǎn)，也是別人用你的 app 不用其他 app 的理由。比如人脈軟件都會(huì)有社交相關(guān)的功能，但是脈脈會(huì)比較注重職場(chǎng)招聘、直播等互聯(lián)網(wǎng)職場(chǎng)人比較關(guān)心的點(diǎn)，這樣對(duì)應(yīng)的用戶群體就比較會(huì)吃你這套，會(huì)提升用戶的粘性。

相信你在梳理了競(jìng)品的信息架構(gòu)，總結(jié)了共性和差異點(diǎn)之后對(duì)產(chǎn)品的信息架構(gòu)已經(jīng)有一個(gè)比較清晰的認(rèn)知了，在做自己產(chǎn)品信息架構(gòu)的時(shí)候也會(huì)更胸有成竹。但是最后還有一件事我們可以做，就是對(duì)我們的要做的產(chǎn)品功能做卡片分類。

4. 卡片分類

卡片分類法是我們工作中常用到的一種方法，它可以在用戶側(cè)再一次印證和檢測(cè)我們的產(chǎn)品信息架構(gòu)。

卡片分類法就是讓用戶對(duì)功能卡片進(jìn)行分類，組織，并給相關(guān)功能的集合重新定義名稱的一種自下而上的整理方法。

說直白點(diǎn)就是準(zhǔn)備一堆卡片，在這些卡片上寫上你所需要包含的功能名稱，然后給到用戶側(cè)，讓用戶進(jìn)行分類，讓用戶進(jìn)行組織，來了解用戶到底覺得這些功能應(yīng)該怎么合并怎么歸類的一種方法。它可以幫助你站在用戶角度去了解用戶是怎么認(rèn)定這些功能的，也可以在卡片分類法的過程中更加了解用戶是怎么想的。

卡片分類法大概的步驟和注意點(diǎn)是這樣的：

卡片分類法最終會(huì)產(chǎn)出這樣的一個(gè)樹形圖：

5. 產(chǎn)出信息架構(gòu)

其實(shí)到這一步信息架構(gòu)大概的雛形已經(jīng)有了，你可以用 axure 或者類似 mindnode 的軟件把信息架構(gòu)梳理出來。

接下來你要對(duì)信息架構(gòu)進(jìn)行重要性分級(jí)，這樣在產(chǎn)品開發(fā)的前期可以幫助梳理產(chǎn)品研發(fā)的優(yōu)先級(jí)，集中精力解決用戶的最大痛點(diǎn)。在產(chǎn)出頁面時(shí)也可以更好的把控頁面元素的大小層級(jí)，位置關(guān)系等。

最后你需要注意層和度的平衡：層一般不超過5層，超過操作困難。度過多會(huì)讓用戶認(rèn)知成本增加，容易找不到想找的內(nèi)容。這里的度指的是同一頁面展示的信息量。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

點(diǎn)、線、面和構(gòu)成手法，就像是大廈的基石一樣，看起來毫不起眼，但力量卻無比強(qiáng)大。