如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

表單設計可以說是設計界一個老生常談的話題，針對它的重要性自不必多言。本文結合自身經驗和所看所學所得總結，希望能幫助到大家。

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

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

• 結構
• 標簽
• 輸入字段
• 占位符
• 幫助
• 操作
• 驗證
• 反饋

一、結構 Structure

字段的順序、節奏、外觀和組織。

1. 只問所需

必要而不是全部，簡化表單，或許是優化表單的最大建議。簡化的辦法之一就是追溯每個字段為什么需要，是否是當前最相關的信息，如果它是可選的，最好不要顯示。

2. 有理排序

先問什么，再問什么，前后字段根據相關性循循漸進。

3. 從易到難

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

4. 組織相關

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

5. 單列呈現

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

當然單列呈現還是多列，并非絕對，需根據頁面空間，表單內容及性質共同決定。

6. 提高對比度

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

二、標簽 label

標簽告訴用戶需要輸入什么。

1. 名詞標簽

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

2. 標簽位置

左對齊、右對齊、頂部對齊、內聯標簽、圖標標簽和浮動標簽。

多數情況下，謹慎使用內聯標簽，在用戶輸入后，內聯標簽會消失，用戶無法判斷輸入的內容是否符合，當然在用戶熟悉且簡單的字段下可采用（例如登錄中只有賬號和密碼）。針對以上問題，你可以采用內聯浮動標簽解決內聯標簽在輸入后標簽消失的弊端。

三、輸入字段 Input

承載用戶輸入的區域。

1. 自動對焦（PC端）

進行表單頁面，自動對焦第一個輸入字段可以引導用戶開始進行輸入。

2. 提供默認值

可根據已知信息，幫助用戶預判內容。例如可以通過 IP 檢測出用戶的地理位置。

3. 保存輸入的數據

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

4. 字段約束

為有要求的字段設置限制。例如，最大字符數，電話中數字、字母符號等要求，從而有效的避免臟數據。

5. 格式化（掩碼）輸入

提供輸入格式，幫助用戶理解所填內容且減少錯誤發生。常用于手機號碼、日期、銀行卡和郵編等。

6. 匹配鍵盤（移動端）

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

7. 區分可填

如上所述，盡量避免可填字段。如果不可避免，應該做明確區分。根據經驗，可填和必填的數量少的做標記說明。

常規做法：必填，使用「*」星號符；可填，使用「（選填）」。

四、占位符 Placeholder

標簽的額外描述，幫助用戶了解可輸入的數據類型和格式提示。

1. 顏色區分

它是內容提示，而不是內容。

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

占位符是對輸入內容有特殊要求的提示或提醒，也可理解為對標簽的補充，并不是所有的輸入框都需要占位符。

3. 輸入后消失

不要在鼠標鍵入后消失，而是在輸入內容后消失，這樣可以在用戶還未輸入的時候，依然幫助到用戶。

如果提示特別復雜或者重要，請使用幫助，它會一直顯示在那里。

五、幫助提示 Tips

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

1. 三種方式

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

2. 給予解釋

當前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。

六、操作 Submit

對當前用戶輸入數據的提交等動作。

1. 區分主次

主操作，是我們期望用戶的使用途徑，應該在視覺上與次操作做出明顯的區分，以突顯號召用戶點擊。

2. 合理放置

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

3. 準確命名

清晰可預測。應該準確地描述用戶點擊按鈕后會發生什么。

4. 行動號召

按鈕應始終帶有強烈的動詞，鼓勵用戶行動。

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

5. 禁用操作

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

七、驗證 Required

對用戶輸入數據的驗證反饋。

1. 前端驗證和后端驗證

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

后端驗證，例如手機注冊輸入效驗碼，通過后才注冊成功，需要通過服務器判斷，才知道用戶輸入的是否正確。

2. 錯在哪里，顯示在哪里

就近原則，方便用戶發現并修改操作。

3. 結合顏色、圖標和文字

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

4. 請勿清除

錯誤的字段，請勿在鍵入后直接清除，請給用戶在此基礎上修改的機會，記住用戶才是決定者。

八、反饋 Feedback

對用戶行為的反饋，告知當前狀態。

1. 操作前：光標狀態

鼠標在屏幕上的映射，我們稱之為光標（指針），它會隨著操作對象及系統狀態而呈現出不同形狀，讓用戶對操作的行為及結果有預先的心理感知。

2. 操作中：操作反饋

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

3. 操作后：按鈕加載

呈現按鈕的加載過程，而不是禁止不動，用戶會以為系統沒有執行操作，從而進行多次點擊，呈現加載并禁止用戶的后續點擊操作。

總結

以上便是對表單設計的一些總結，更多的是提供一種分析問題的框架，從結構化的思維分析設計問題，從而能夠全面的認識一個事物并進行了解掌握，愿對你有所幫助。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

關于什么是好設計的問題的答案，定義了設計師。

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

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

清晰思考

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

設計師通過詢問原因來工作。問為什么“更高水平的研究，一個調查所使用的動機和思維過程，以便它們可以應用于我們自己的情況。”為什么看起來更深。它將目前的解決方案與用戶的需求相結合，以設想更好的解決方案。

哲學

當我們開始問為什么并開始思考真理時，我們就進入了哲學領域。我一直將設計（和其他藝術）視為哲學的視覺形式。比傳統哲學更精細的一個，因為它不僅通過文字而且通過圖像進行思考。有些人可能會稱這種特殊形式的哲學設計思維。當我們將設計定義為哲學的一個分支時，下一步就是質疑這個世界上一些偉大的思想家，看看他們對設計的看法。對我來說，Martin Heidegger有兩個哲學文本定義了良好的設計。

關于您的客戶和互聯網的真相

第一部是Der Ursprung des Kunstwerkes（藝術作品的起源），其中海德格爾思考什么使藝術品成為藝術品。簡而言之，他認為，為了使藝術作品成為一件好作品，它必須揭示我們存在的真相。他用梵高的一雙農夫鞋作為例子。這幅畫是一件藝術品，因為它向我們展示了鞋子，農業，生活的真相，也展示了梵高繪畫時的繪畫媒介和藝術現狀。它很漂亮，根據海德格爾的說法，美麗是表達真相的最好方式。

如果我們將網頁設計視為一門藝術，我們可以將海德格爾的藝術思想轉化為網站，并得出一個有用的網站定義。首先（和Chimero在他的書中所說的相似），一個好的網站揭示了用戶與您為其建立網站的組織的互動的真相。當然，美麗很重要，因為它是真相展示自己的最佳方式。Beauty以直接方式連接到用戶。它比單詞更快更有效。但海德格爾增加了另一個重要方面。一件好的藝術品，即一個網站也定義了媒體，即互聯網。因此，良好網站的問題與互聯網的問題緊密相關。一個好的網站向我們展示了互聯網是什么或可以是什么。

與媒體的深層聯系

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

通過哲學分析生活 - 問為什么 - 是良好設計的基礎。哲學是生活與設計之間缺失的紐帶。

一個好網站的定義

就像藝術一樣，設計一直需要定義。我認為好的設計問題的答案定義了設計師。所以：
- 設計就是問為什么（所以它基本上是哲學）
- 網頁設計的目的是找到關于客戶，用戶和互聯網
的真相 - 真相最好通過美容傳達
- 找到關于你的媒介的真相必須與之建立深厚的聯系

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

有了這篇文章，你就不用在其他地方學習基本的動效設計規則了。

動效的持續時長和速度

當元素的位置和狀態發生改變的時候，動效的速度應該足夠慢，維持足夠長的時間，讓用戶能夠注意到變化，但是同時，又不能慢到需要用戶去等待。

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

△ 界面中動效持續時長

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

△ 移動端設備的屏幕尺寸影響動畫的持續時長

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

不過，如果你的網頁中所用的動效并非功能性的，而是裝飾用的，或者用來吸引用戶的注意力，那么請忘記這個規則，在這種情況下，動效可以更長。

更大的屏幕=更慢的動效？絕不是如此！

請務必記住，無論是在什么平臺上，動效的持續時長絕不是單純取決于屏幕尺寸和運動距離，還取決于平臺特征、元素大小、功能設定等等。較小的元素或者較小的變化，相應的動效應該更快一點。因此，大而復雜的元素動效持續時間更長，看起來也更舒服一點。

大小相同的元素，在移動的時候，移動距離最短的元素，是停止下來的。

與較大的元素相比，較小的元素運動速度應該更慢，因為相同的移動距離，對于小元素而言，位移距離和自身大小比例倍數更大，相對偏移更遠。

△ 動效的持續時長還和元素大小、運動距離有關

動效的運動規律要符合物理規律，當元素運動到邊界，發生碰撞的時候，碰撞的「能量」最終是要均勻分攤下來的，而彈跳的在多數情況下是不適合的，僅在特殊情況下適合使用。

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

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

△ 不要在動效中使用模糊效果

列表項（新聞列表、郵件列表等）所使用的動效，在實際運動的過程中，項和項之間應該有輕微的延遲，元素之間的延遲應該控制在20~25毫秒之間，如果持續時間再長，可能會給人一種遲滯的觀感。

△ 列表項之間的延遲應該在20~25毫秒

緩動

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

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

勻速直線運動

不受任何物理力量的影響，勻速直線運動看起來是非常不自然的，尤其是對于人眼而言。

所有用來設計動畫的應用都會使用坐標軸和曲線來闡述動效的運動特征，我將嘗試闡述它們的含義，以及如何使用。坐標軸的 X軸是實現，而 Y軸則表示的唯一，換句話來說，如同我們在初中物理中所學到的，坐標軸上的線條描述的是速度和加速度的特征。下面所示的直線，表示速度是均勻的，也就是勻速直線運動，物體在相同時間內運動的距離是不變的。

△ 勻速直線運動的座標圖

均勻的變化通常只會用在色彩的改變或者透明的改變上，一般來說，我們也可以讓背景元素均勻運動，而前景元素保持不變，來呈現它的狀態，就像上圖一樣。

緩動加速曲線

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

△ 加速曲線

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

△ 以加速運動將卡片扔出屏幕

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

緩動減速曲線

當元素從屏幕外運動到屏幕內的時候，動效應該遵循這類曲線的運動特征。從全速進入屏幕開始，速度降低，直到完全停止。

△ 減速曲線

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

△ 減速曲線案例

緩動標準曲線

在這種曲線之下，物體從靜止開始加速，到達速度最高點之后開始減速直到靜止。這種類型的元素在 UI界面中最為常見，每當你不知道要在動效中使用哪種運動方式的時候，可以試試標準曲線。

△ 標準曲線

根據 Material Design 的規范，最好使用不那么對稱的增速和減速的過程，讓動效看起來更加真實。同時大家會更加在意運動的結果，曲線的末端，也就是運動結束的過程最好進行適當的強調，換句話說就是減速過程持續的時長最好超過開始加速的時長，用戶將會更加清楚地觀察到運動的最終結果，從而更好地明白運動的終止狀態。

△ 對稱和非對稱運動的差異

當元素從屏幕的一個位置移動到另外一個位置的時候，最好使用這種標準的緩動曲線，這個過程中，盡量不要讓動畫效果引人注意，不要使用戲劇化的效果。

△ 卡片元素從屏幕上運動的時候，不對稱的緩動曲線

當元素從屏幕上消失的時候，采用了相同的不對稱緩動曲線，用戶同樣可以通過滑動回到之前的位置。這個環節使用了抽屜式導航控件。

△ 抽屜式導航隨著緩動曲線從屏幕上隱藏

從這些案例當中，可以看出許多動效的初學者對于運動規則的了解還不足。比如下面的這個動效，元素隨著減速曲線出現，然后使用標準緩動曲線消失。根據 Material Design 的標準，新出現的元素持續的時間應該更長，因為需要吸引更多的注意力。

△ 導航菜單的出現和消失

貝賽爾曲線函數 cubic-bezier（）是用來描述曲線的，它的名字前面之所以帶有 Cubic 是因為每個貝賽爾曲線的描述都是基于四個不同的參數來確定的。曲線的起點（0，0）和終點（1，1）在坐標軸上的位置是已經事先確定的。

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

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

界面動效的編排

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

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

均等交互

均等交互意味著所有的元素和對象都遵循一個特定的編排的規則。

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

△ 用戶的注意力應該沿著一個流向來引導

至于表格式的布局，它相對就復雜一點。在這里，用戶的視線流向應該是清晰的對角線方向，因此，逐個區塊次第出現是一個糟糕的設計。這樣的逐個顯示，一方面耗時太長，另一方面會讓用戶覺得元素的加載方式是鋸齒狀的，這種方式并不合理。

△ 沿著對角線加載

從屬交互

從屬交互指的是使用一個中心對象作為主體，來吸引用戶的注意力，而其他的元素從屬于它來逐步呈現。這樣的動畫設計能夠創造更強的秩序感，讓主要的內容更容易引起用戶的注意。

在其他的設計當中，用戶很難搞清楚哪個才是主要的，因為注意力被分散了。因此，如果要設置多個動畫元素，應該定義清楚誰為主，誰是中心，并且盡量按照從屬關系來次第呈現不同的子元素。

如果只有一個中心對象，那么其他的對象的運動方式都要受它制約，否則用戶分不清楚主次。

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

△ 不成比例地改變對象外觀的時候，運動軌跡應該是弧線的

相反，如果元素是按照比例改變大小的時候，應該沿著直線移動，這樣不僅操作更加方便，而且更符合均勻變化的特征。看一下真實的案例，你會發現直線的運動軌跡會更加合理。

△ 成比例變化大小的時候，應該沿著直線運動

當元素不成比例放大的時候，運動軌跡是弧線，而這種弧線運動軌跡有兩種不同的呈現一種，一種軌跡是初始方向為垂直方向而運動結束時瞬間運動方向是水平的（Horizontal out），另外一種初始方向是水平方向而運動結束時瞬間運動方向是垂直的（Vertical out）。

那么怎么選取這個方向呢？很簡單，元素運動曲線的方向，應該是要向界面的主要運動方向的主軸靠攏重合。舉個例子，在下面的動效當中，整個界面的滾動方向是上下滾動，主軸是縱向的，因此，當卡片點擊之后被展開的時候，會先向右水平移動，并最終以垂直運動結束，運動的最終方向，切線是垂直的，也就和垂直方向的主軸重合了。

△ 元素按照弧線展開的時候，最終方向應該和主軸重合

如果幾個不同的元素的運動軌跡相交，那么他們不能彼此穿越。如果每個元素都必須通過某個交點，抵達另外一個位置，那么應該次第減速，依次通過這個點，給彼此留出足夠的空間。另外一種選擇，是元素不相交，而是像實體一樣在靠近的時候，彼此推開。為什么？因為我們通常假定界面中所有的元素都位于同一個平面當中。

在運動過程中，元素不應彼此穿越，而應該互相留出空間。

但是這一點也不是一成不變的。在比較擁擠的界面當中，某個元素可以「越過」其他的元素，它同樣沒有穿過其他的元素消失，而是單純的移動。這一點從某種意義上也是延續自我們日常的物理規律，只不過我們會默認界面中的元素在這個情況下擁有了高度這樣的屬性。

△ 元素可以越過其他的元素運動

結語

我們總結了這么多動效運動的規則和原則，從某種意義上還是延續自我們對于物理世界的認知，摩擦力和加速度在虛擬界面中以另外的方式續存著。模仿現實世界的界面讓我們對于界面的秩序有更清晰的認知，允許我們更輕松的了解和訪問界面的內容。

如果動效按照正確的方式來設計，它應該是不顯著，且不會分散用戶注意力的。如果不是這樣，那么你需要讓動效更微妙一點，實在不行甚至需要將它移除。動效不應該成為影響用戶操控界面的障礙，或者轉移注意力的存在。

當然，即使是遵循這么多規律，動效的設計依然是一門藝術，而非單純的科學，多做測試多摸索總是有必要的。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

篩選組件概述

篩選組件的作用是幫助人們在面對大量信息時，通過更的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及Tab欄，本文暫不分析。

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

01

位于 Tab 欄的篩選組件

組件樣式

篩選按鈕位置：一般位于Tab欄最右側視覺薄弱區域。

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

樣式分析

當界面使用Tab欄時，已為內容做了第一層篩選，多數情況下已滿足用戶對內容的篩選需求。

當篩選類別較多且復雜時，就需要在Tab欄增加篩選組件來提供更詳細的篩選能力。而這里的篩選組件較于Tab欄其他條件優先級較低，屏幕右側為視覺薄弱區域，這也解釋了為什么大多數Tab欄的篩選組件都位于最右側。

案例一

案例來源于美團App

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

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

案例二

案例來源于淘寶App

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

案例三

案例來源于嗶哩嗶哩App

全局搜索后，Tab欄默認展開綜合tab內容，用戶對排序、時長、分區的篩選需求較高，因此直接把篩選類別放在了二級Tab欄，相比通過點擊篩選按鈕再展開類別的交互方式更簡單直白。

點擊篩選類別后，篩選器使用抽屜式。此種篩選組件樣式一般用于篩選類別較少（不超過4項），篩選項數量不多的場景。

02

底部按鈕型篩選組件

組件樣式

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

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

樣式分析

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

若使用此樣式，點擊篩選按鈕后，篩選器的出現優先考慮從底部向上出現的抽屜式浮層。

案例一

案例來源于旅游類App Expedia

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

這里還有2個細節：

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

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

案例二

案例來源于dribbble

當前頁為地點搜索。需要先進行篩選操作，內容區再出現結果。篩選按鈕位于底部浮層，篩選類別代替篩選按鈕平鋪展現，篩選器使用抽屜式從浮層底部向上展開。

此樣式一般適合篩選類別較少，并且每個類別的篩選項不多的場景。優點是減少操作步驟，提高用戶操作效率。并且可以學習一些體驗細節：在篩選器中選擇一個選項后，在其篩選類別處同步修改為該選項；篩選項與篩選類別選中狀態一致，增加關聯度。

03

浮層按鈕型篩選組件

組件樣式

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

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

樣式分析

浮層型篩選按鈕的優點是增大內容區的縱向空間，比底部按鈕型篩選組件的層級要弱一些。但當用戶需要操作時，它的位置也便于用戶點擊。

設計時按鈕用色需要區別于內容區，內容形式盡量精簡直觀。若使用案例3中的扇形篩選器，則要求篩選類別為1-2類，篩選項數量少切文案精簡。

案例一

案例來源于dribbble

篩選按鈕位于界面右下方緊貼于右側屏邊，浮于被篩選內容上層，滑動屏幕時消失。點擊篩選按鈕后，從屏幕右側展開篩選浮層，原篩選按鈕變為確認按鈕。

此按鈕形式最大限度的讓出空間留給內容區，且右下角為用戶關注薄弱區，這樣的位置關系可讓用戶按需操作。關于篩選器使用右側浮層前面的案例也提到過，適用于篩選條件較多的場景。并且使用側邊欄形式的浮層與篩選按鈕關聯性較高，相對符合用戶認知。體驗細節上可學習的點還有按鈕功能的改變，使得體驗更便捷。

案例二

案例來源于dribbble

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

案例三

案例來源于dribbble

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

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

04

舉一反三

接下來我們拿個案例練練手。

下圖界面中內容區為概覽與各監控數據圖表，需要設計一個篩選組件對內容區進行不同時段的篩選。

在設計之前需要確定幾個需求：篩選組件的使用頻次、篩選類別的數量、篩選項的數量，單復選關系、篩選條件之間的優先級。

進一步明確需求

篩選類別只有時間段1項，篩選數量不固定，為多項，單選關系。當用戶進入此頁，根據用戶使用需求判斷“1小時”基本滿足用戶查看數據的需求，默認展示“1小時”的篩選。因此篩選組件此場景使用“1小時”時段基本滿足用戶查看數據的需求，可判斷用戶使用篩選組件的頻次不高。

方案解析

方案一，Tab欄形式

Tab是對整頁的篩選，多為不同維度，而這里只有時段一個維度。

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

方案二，底部按鈕形式

底部按鈕位于用戶的習慣操作區，放這里使用層級略高，并且會使內容區的整體高度減少。

方案三，浮層按鈕形式

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

篩選器以時間選擇器形式出現，可滿足篩選項數量較多的場景。

05

小結

以上內容是我對常見篩選組件的思考，每一種樣式都有其優缺點。但我們設計篩選組件的最終目的是幫助用戶篩選信息，決策。這就需要設計師根據篩選需求、用戶習慣等設計符合用戶使用場景的操作體驗。

本文作者：TXD技術體驗團隊-喻杰（阿里巴巴視覺設計師）

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

Imran Chaudhri 早在 1995 年就加入了蘋果公司，并且很快就出任了公司的人機交互界面組的設計總監，在2006年前后，他也是作為 iPhone 項目核心的6人團的一員，加入到項目當中來。

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

和許多設計師一樣，他們對于產品的想法和企業的定位或多或少有一些錯位。和蘋果產品相關的很多信息，他現在依然還不能透露，但是他依然提到了很重要的事情：即使是在iPhone的原型設計階段，他就已經意識到了，這款產品最大的缺陷之一，就是它注定會分散甚至壟斷用戶的注意力。而與此同時，蘋果也有意識的沒有給予用戶，對于iPhone 完全的控制權。下面，是訪談中能夠對外公布的幾個重要的內容摘錄：

設計「請勿打擾」的功能

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

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

對于誰來掌控手機設備這個事，蘋果的內部產生了分歧

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

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

關于 iPhone 是否有可能更智能地預測通知

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

為什么蘋果最后還是開始關注分心這個事情？

「iOS 12 中內置的這套防干擾的控制系統可以更加系統地監控手機各方面的功能和用量，它實際上是從iOS 6 時代的請勿打擾的功能拓展而來的。但是它在現在被推出來真正的原因是有太多的用戶為此而抱怨，而媒體和用戶都發文吐槽，在呼聲和壓力之下，它們最終在iOS 12 中呈現了出來。這個局面之下，蘋果沒有選擇的余地，必須對于輿論有回應。這對于每個人都是好事，因為用戶和他們的孩子都因此能夠獲得更好的產品。但是這是否是最好的產品？當然算不上，因為現在的iOS系統是為了應對輿論和負面新聞而設計的，設計的意圖并不對。如果是蘋果主動作出這樣的決策，才算得上是好產品。」

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

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

「我和數字設備之間的關系非常簡單。我不希望被它所控制。從使用 iPhone 的第一天起，我就用著黑色的壁紙。我不會將一大堆的東西塞進手機，減少被分心的可能性。我的手機第一屏上的應用程序非常少?！?

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

界面設計的未來，以及不可避免的問題

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

很多產品設計師，在畫原型或者設計 UI 的時候癡迷于工具的使用，拿到需求文檔之后急于動手畫圖，忽略了信息架構設計對于產品的作用。

信息架構作為一個產品的骨架，是產品非常重要的一部分，它決定了一個產品

的布局和未來的發展方向以及用戶對一個產品的最初印象和整體體驗。毫不夸張的說，好的產品信息架構是產品成功的一半。

那么到底什么是產品的信息架構呢？該如何設計產品的信息架構？如何評判一個產品信息架構的好壞？我們接著往下看：

一、信息架構的概念

讓我們來看一個例子：

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

在排布飯店設施的過程中我們要遵循一些規范，比如用戶的習慣或者施工規范等，正是因為需要遵循這些規范，所以我們需要一個信息架構來體現這些。

比較官方的信息架構解釋是這樣的：信息架構設計是對信息進行結構、組織以及歸類的設計，好讓使用者與用戶容易使用與理解的一項藝術與科學。

簡單來說，信息架構設計就是讓用戶可以 容易地理解你的產品是怎樣的。讓他們在使用你產品的時候可以更順利更自然。就像一進入飯店就會有一種感覺，門口是等餐的地方，進去就應該吃飯，如果找洗手間一定不會往門口走，而會往深處走。這就是信息架構的好處：他讓用戶使用同類產品時更容易上手和理解，讓產品更容易被接受。

二、為何需要信息架構設計

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

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

從底部標簽欄就可以大致看出產品是用來干嘛的，這就是信息架構的作用。一個合理的信息架構可以讓產品非常容易被用戶理解，可以讓用戶第一眼對產品有一個簡單的認知，指導自己可以用產品做什么事，指導產品提供什么服務。

再看一組反例：

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

所以信息架構的核心目標是為用戶提供更好的體驗，獲得更高的留存率。

一款信息架構良好的產品必然遵循以下兩個標準：

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

我們通過這兩個標準來印證下上邊3個正面案例的信息架構：

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

那么如果信息架構像架構一個飯店一樣簡單，那么信息架構為何需要設計？

因為你的實際產品功能可能有這么多：

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

三、如何設計信息架構

合理的信息架構設計需要考慮5個步驟：

下面我來分步講解一下。

1. 了解用戶，場景，習慣

首先你的產品是給到用戶用，你當然要最大限度的了解你的用戶，我們先來看下一個概念：「心智模型」。

心智模型是經由經驗及學習，腦海中對某些事物發展的過程，所寫下的劇本。人類在經歷或學習某些事件之后，會對事物的發展及變化，歸納出一些結論，然后像是寫劇本一樣，把這些經驗濃縮成一本一本的劇本，等到重復或類似的事情再度發生，我們便不自覺的應用這些先前寫好的劇本，來預測事物的發展變化。心智模型是你對事物運行發展的預測。再說得清楚一點，你「希望」事物將如何發展，并不是心智模型，但你「認為」事物將如何發展，就是你的心智模型了。

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

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

你要考慮清楚4個問題：

用戶通常用你的產品做什么？

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

用戶用這類產品最關心什么？

用新聞app 時咨詢的真實性實效性，購物類app 精準搜索和售后功能，就是你的用戶關注點在哪里，這是一個很好的突破口。

用戶有哪些思維定式？

和用戶年齡身份相關的屬性，產品體驗符合相應用戶的思維模式，心智模型，用戶就會比較容易接受。

用戶用什么類似的產品？

類似的產品也會帶來一些用戶習慣，迎合這些習慣也會讓用戶快速上手接受產品。

了解了你的用戶場景和使用習慣之后你會知道如何做出符合用戶心智的，容易被接受的產品，你不需要擔心做的產品沒有差異性或者沒有競爭力，我們可以在核心流程之外做出創新點，讓用戶覺得你的產品又好用又有些不一樣。

2. 了解業務

這里的業務包括與產品接觸的內部及外部的人提出的需求，比如公司的運營，市場，銷售，BD，公司的外部合作伙伴等。

這些人的需求我們也要收集，比如運營人員想更方便的管理注冊用戶，銷售想更多的添加廣告位，市場推廣人員要求能統計不同渠道帶來產品的下載量，注冊數，活躍數，合作伙伴需要進行賬號，內容互通等，總之只要與業務有關的人的意見，盡可能的在產品設計前多收集，即使做不了，也告訴他們原因，要不然產品上線后就等著被他們吐槽吧。

3. 調研競品的信息架構

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

首先我們需要把競品功能梳理成思維導圖：

其實思維導圖就是信息架構比較基礎的形式了，但是光有思維導圖沒用，我們需要對思維導圖進行分析。

我以前做過的一款人脈 app 為例，當初對比了領英、赤兔和脈脈，分析了這4款 app 的思維導圖后得出的共性和差異點：

共性就是要符合用戶使用習慣的地方，如果你調研的3-5個產品都這么做了，很可能這里是產生用戶習慣的地方，是我們需要去遵循的，這是獲得用戶好感度的基礎。

分析產品時你一定也會得出一些產品差異的地方，而這些差異就是你的產品競爭點，也是別人用你的 app 不用其他 app 的理由。比如人脈軟件都會有社交相關的功能，但是脈脈會比較注重職場招聘、直播等互聯網職場人比較關心的點，這樣對應的用戶群體就比較會吃你這套，會提升用戶的粘性。

相信你在梳理了競品的信息架構，總結了共性和差異點之后對產品的信息架構已經有一個比較清晰的認知了，在做自己產品信息架構的時候也會更胸有成竹。但是最后還有一件事我們可以做，就是對我們的要做的產品功能做卡片分類。

4. 卡片分類

卡片分類法是我們工作中常用到的一種方法，它可以在用戶側再一次印證和檢測我們的產品信息架構。

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

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

卡片分類法大概的步驟和注意點是這樣的：

卡片分類法最終會產出這樣的一個樹形圖：

5. 產出信息架構

其實到這一步信息架構大概的雛形已經有了，你可以用 axure 或者類似 mindnode 的軟件把信息架構梳理出來。

接下來你要對信息架構進行重要性分級，這樣在產品開發的前期可以幫助梳理產品研發的優先級，集中精力解決用戶的最大痛點。在產出頁面時也可以更好的把控頁面元素的大小層級，位置關系等。

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

點、線、面和構成手法，就像是大廈的基石一樣，看起來毫不起眼，但力量卻無比強大。