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

藍藍設計( 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

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

在 Sarah 給 Jimmy 講完了她在設計上的一些原則之后，Jimmy 就準備開始重新設計那個客戶等著要的新的儀表盤界面了。與此同時，他所在的公司 Shmuckle 準備設置一個新的產品經理的職位，并且將會在公司內部選擇合適的人員來任職。Jimmy 對此非常有興趣，實際上，在當前的架構下， Jimmy 是一個非常合適的候選人。但是要擔任這個職位，他必須證明自己能夠勝任這個職位，證明自己知道如何管理項目和團隊。

對于他正在做的這個控制面板的設計項目，他也正在挑選合適的產出流程。用敏捷（Agile）開發流程更好，還是應該用瀑布模型（Waterfall Model）？又或者是循環式開發流程？他覺得跟開發部的同事聊一聊會是更好的選擇。

當他找到工程部的 Boris 的時候，他正在樓道里刷推特摸魚?！赣檬裁戳鞒?？那還用問，當然是敏捷啦。這個最好，過程清晰簡單，現在沒有什么辦法比敏捷更好處理各種數字產品的設計和開發啦?！菇又?，Boris 去隔壁會議室拖出一個白板，并且說道：「給我一個小時，我告訴你關于敏捷開發的一切。接著還能捎帶計劃一下每周的工作內容，這樣你就能完全明白要干啥了。哦，差點忘了，還有幾個播客和視頻可以幫你更加深入地了解敏捷?！?

敏捷開發以用戶的需求進化為核心，采用迭代、循序漸進的方法進行軟件開發。在敏捷開發中，軟件項目在構建初期被切分成多個子項目，各個子項目的成果都經過測試，具備可視、可集成和可運行使用的特征。換言之，就是把一個大項目分為多個相互聯系，但也可獨立運行的小項目，并分別完成，在此過程中軟件一直處于可使用狀態。

絮絮叨叨的 Boris 終于找到一個傾訴的對象，Jimmy 一時之間感到頗為尷尬，不知道如何回應。好在這個時候，開發部另外一個部門的 Floris 從門口路過，Jimmy 趕緊喊住他「Floris 我到處在找你，你怎么在這兒啊」說著就拉住 Floris 的手，竄進了另外一個辦公室，遠離了熱情的 Boris。

「干啥？你倆在聊啥？」

「Boris在跟我說敏捷開發……」

「啥玩意兒？他跟你講敏捷開發？快拉倒吧，他們部門里面唯一敏捷的就手頭上的 Macbook。我們這邊都用瀑布模型來作為產品開發的流程，因為它是線性的，有著更簡單的結構，操作起來也簡單，很少會發生混亂?！拐f著，Floris 從辦公室的書架上摸出一堆文檔壓到 Jimmy 手上?！改阋臇|西都在里面，祝你好運。如果你需要任何幫助，請在公共的平臺上跟我約時間，我們可以開個小會解決一下問題~」說著 Floris 回到自己的桌子邊，開始繼續干活兒。

瀑布模型（Waterfall Model） 是一個項目開發架構，開發過程是通過設計一系列階段順序展開的，從系統需求分析開始直到產品發布和維護，每個階段都會產生循環反饋，因此，如果有信息未被覆蓋或者發現了問題，那么最好「返回」上一個階段并進行適當的修改，項目開發進程從一個階段「流動」到下一個階段，這也是瀑布模型名稱的由來。包括軟件工程開發、企業項目開發、產品生產以及市場銷售等構造瀑布模型。

拿著一堆資料，回到自己的工位前，整個人都要陷入到怠惰的情緒里面，癱坐在電腦椅上糾結了起來。信息太多了，不知道從何做起。在網上一搜也是成堆的內容，根本不知道從何入手。懵逼了。

Jimmy 決定采用最終的備用方案——萬事不決問 Sarah。在 Jimmy 的工作經驗當中，老領導 Sarah 總能給他靠譜的建議和可行的方案。

出問題的時候，先后退一步

Sarah 辦公室的門從來都是敞開的。當 Jimmy 來找她的時候，Sarah 正在閱讀一些有意思的東西。她的辦公室里面有很多的書和綠植，漂亮的色彩讓 Sarah 的整個工作區域仿佛能夠喚起人的創造力和想象力，桌上打開的書頁散發著油墨的味道，聞起來讓人很有安全感，像家里的書房?！窰ey，Sarah，我又有問題來麻煩你啦，你有空么？」

「我的門永遠敞開著。這次有啥問題，看看我能怎么幫到你?！筍arah 聽到聲音就知道是誰，一邊放下手頭的文檔，一邊抬頭笑著看到略顯局促的 Jimmy 。說話間，Jimmy 非常熟悉地跑到辦公桌另外一邊的椅子上癱坐下來，Sarah 笑著搖頭，拿起咖啡壺給 Jimmy 倒上一杯咖啡。

回到自己椅子上的 Sarah 沒有看自己的電腦，而是像心理咨詢師一樣，盯著 JImmy ，進入了等他傾訴的狀態。而 Jimmy 此刻也驚訝于 Sarah 如此灑脫迅速地放下手頭的工作，并專注地幫助自己，于是也不再放飛地癱坐著，直起腰身，開始認真地陳述自己的問題：

「實際上，你之前跟我說的設計原則，讓我獲益匪淺。我按照你告訴我的方法，找到了癥結，解決了問題。但是我現在不僅僅是要設計這個儀表盤界面，我需要開發和實現。有人說敏捷開發比較好，有人說瀑布模型很給力，這些開發方式到底有啥差別，優勢具體在哪我并沒有搞清楚。有人說我需要的是敏捷開發里面 Scrum，還有人說，它實際上是 shmum，也有人稱之為 Bshmum，結果還有朋友告訴我說 Google 的 Design Sprint 才能幫我解決問題。我感覺腦子快要炸了。所以……Sarah 你明白么，我需要幫助了。 」

聽到 Jimmy 說到后面，Sarah 就明白了他碰到什么問題了?！窲immy，沒事兒，我們總會在某些時候碰到問題，別人的指導總會派上用場?！?

「我可以理解，如果在網上搜索這些相關的信息，會有太多雜亂的內容讓你感到信息過載。幸運的是，如果你理解這些東西背后的基本原理，就可以相對輕松地梳理清楚所有的內容了?！?

「早知道我應該一開始就來找 Sarah 問問?！笿immy 不由得對自己抱怨了一句。說著，他在摸起咖啡杯旁邊的紙和筆，準備做筆記，就像上次那樣。Sarah 看穿了他的小心思，笑道：「不用記?！拐f著，喝了一口咖啡，然后繼續道：「先想想看，我們為什么會有敏捷、瀑布模型、沖刺模型，為什么要用循環工作法呢？」

「為了？」Jimmy 下意識撓頭。

「是的，但也不完全是這樣?？偟膩碚f，我們需要一個過程來呈現產品，因為人類的思維是沒有辦法直接掌控混亂的事物。此外，一個清晰的、可遵循可記錄的流程，能夠確保你在完成后，確保產品的整個開發過程是可交付的，細節也是可回溯的。這就是為什么，我們需要這些流程?！?

「最首要的問題，不是選擇哪個流程，而是要了解這些流程為什么而存在，以及我們可能會碰到什么樣的問題。無論你選擇哪一個?！筍arah 看了一眼窗外，繼續說道：「你有問過公司的其他的同事，他們都遵循什么樣的流程么？」Sarah 問道。

「問過了，絕大多數都采用的敏捷和瀑布模型?！笿immy 說到。

承諾是關鍵

「首先要告訴你的是，兩種方法都很棒。但是絕大多數的公司只會在兩種方法當中選擇一種。因此，當人們采用敏捷或者瀑布的時候，我們更多看到的是他們所做的設計或者開發的小沖刺。以往，我們會看到團隊會在3個月或者半年這樣的時間尺度當中，一直保持著高強度沖刺的狀態的。在旁觀者眼中，會看到一個清晰的故事，或者說整個產品逐漸設計或者開發出來的景象。如今流行的做法是將沖刺劃分為很多不同的階段，這也是為什么如今被稱為小沖刺。不過本質上，做的事情和內容并沒有改變?！?

「另外，很多人會使用敏捷的方法來做項目，過程中會不斷的迭代修改。他們希望通過這樣的方法來獲得更好的結果。實際上，很多團隊會持續不斷地、長期地堅持這么做，幾個月甚至一年半載都沒有發布任何東西。如果你在這種情況下，會問自己，到底出了什么問題？我會告訴你，原因在于沒有清晰的承諾，以及太多的事情讓人分心。大家都不會承諾在一段時間內交付一些東西，使用各種借口不按時、按預算來完成項目?！?

「如果這個時間只是一兩周，一個月，好吧，或者說一年，這個周期并不重要。重要的是，你不需要擁有一個清晰的過程，并且承諾提供一些東西。當然，這是很有挑戰性的。這意味著，在這個情況下，你必須作出一些選擇，來完成任務?！筍arah 總結道。

阻礙前進的東西

「到底使用哪種敏捷的方法，采取多少個步驟，或者使用經典的瀑布模型，借助谷歌的設計沖刺，都可以，都沒有問題。大家總會認為，采用哪種過程是關鍵，但是現實是，這個過程始終都只是達成目的一個手段而已?！?

「真正的問題在于，人的天性是懶惰的，沒有按照承諾交付東西?？偸侨滩蛔〉耐涎?，膨脹的自我，辦公室政治，愛來事兒的甲方，喜歡變卦的客戶，它們還都會像攔路虎一樣進入產品和設計的流程。無休止的辯論，不斷改變的策略，不斷膨脹來回拉鋸的會議，最后你只能呆滯地坐在辦公室當中，想想自己的生活到底出了什么問題。最后，我想說一下多年前，我自己所經歷的一個項目?！筍arah 覺得她應該從具體案例上來說說這個事兒了。

「所以，首先你應該清楚，在一個特定的時間段內，交付一些東西出來。你要保證你的團隊不會跳票和拖延，也不會讓預算超出計劃。你將要在約束中工作。約束其實是一種隱藏的優點，也許并不是每個人都明白。你需要完全保持專注，除了你的和參評之外，不會被其他的任何東西分心。就你的情況而言，你需要專注于這個儀表盤界面的設計和實現?！筍arah 說道。

「團隊的規模很重要。不過那是后話，后面咱們再仔細聊?！?

「假設，你有一個三個人組成的團隊，他們共同負責開發并發布你的產品的下一個功能。具體到你的頭上，就是為你開發并實現這個重設計的儀表盤。你需要確保公司的其他人不會前來干涉他們的工作，不會來和他們討論這個項目以外的任何事情?！?

「這一點極為重要。他們必須保持專注。減少被打擾的機率——或者說不被打擾是最好的事情，他們能夠專注而清晰的思考問題。除了手頭的任務之外，他們不會需要去做其他的任何事情，不會被其他的工作內容所分心。對于如何做手頭的工作，什么時候做，具體做什么，他們應當有足夠的控制權和自主權。最后，請記住這一點：

團隊必須足夠小。如果太大，溝通問題一定會成為主要的障礙。每增加一個人，想讓大家信息和想法保持一致的成本，就會成倍增加。如果你擁有太多的自由，太多的資源以及大量的人員，你不僅會得到過度的設計，超出常規的工作，需要超出計劃的預算，以及一個沒有重點，不夠出彩的產品?！?

問題總是會出現的

「如果你像我說的一樣，后退一步來看問題，就會意識到，流程背后所存在的問題，并不是流程本身的優劣，也不關乎公司、人員、國家、文化或者其他。這是關于紀律和約束。不僅是團隊本身需要紀律，負責人要有紀律感，業務也需要有紀律約束。如同我們所知道的，團隊也好，產品也好，公司也好，它都是自上而下的，頂部的紀律、約束和眼界，決定了底部的紀律、調性和產出?！?

「現在，你可能會問自己，如果你的項目出現了問題，會怎么辦？那么首先，對于你想要達成的目標，需要一個清晰的愿景或者想法。除非你的愿景和目標足夠清晰，否則你是沒有辦法來提供承諾的。在項目開始之前，這個愿景/目標必須有足夠清晰的定義，是否能夠達成，難度高低，是否具備可執行性，否則在過程中一定會有所偏離。在這里，給你幾個小貼士，務必要記?。?

不要自欺欺人，你需要提前計劃好整個項目，避免出錯。很多事情都會出錯，所以你需要有目標有愿景，你需要向著目標前進，并且隨時做好解決問題、糾偏的準備。一旦你被其他的因素影響，就很容易增加開發時間、增加預算、招募更多的人手。不要相信所謂的規劃和藍圖，那什么都不是。問題是一定會出現的，出錯了，就專注于最終目標，抓緊手頭的項目，別無其他?！?

Sarah 說道這里，Jimmy 已經開始有所思考了?！杆?，在我告訴你這些事情以后，對于你你手頭的這個儀表盤的項目，你打算下一步要怎么做？」

需要始終牢記的事情

Jimmy 的腦中仍然在反思 Sarah 剛剛說過的話，下意識回復道：「要有遠見，目標清晰，為即將出現的錯誤與問題做好準備，組建一個足夠獨立的小團隊，和公司其他的團隊和部門隔離開來，這樣可以在不被打斷的情況下聚焦于當前的任務，最重要的是，要在承諾的日期前交付承諾的產品。但是我不知道團隊要有多小，我應該帶多少人？」Jimmy 問道。

「如果我說我知道你要帶幾個，那么我一定是在騙你。不過，通常而言，你這種規模不算太大的產品，我建議控制在3人以內。你是這個項目的主管設計師，也是產品經理，在設計上已經沒有大的問題，你還需要兩個開發人員，一個負責前端，一個負責后端，這樣足矣?！筍arah 回答道。

「那么我應該花費多少人在這個上面呢？」Jimmy 又問道。

「這個是你的項目，時間應該由你來衡量。不過，你需要一開始就清楚你手頭有多少資源，你有多少時間來投入這個項目，有多少可供調用的預算，以及管理團隊的耐心達到了什么程度。而且，這個事情最關鍵的并不是時間，而是你的承諾，以及到達約定時間之后要交付的東西。這不僅是對上層的責任，對于你和你的項目而言，也是一個可供奮斗的目標和清晰的邊界。你的項目看起來并不算小，這個人員工作量之下，可能需要花費一個月的時間來進行開發。但是請記住，在一個月的時間內，你必須提交出一個可用的產品出來。從我的角度上來看，我是不允許增加預算和時間的。約束對雙方其實都是有利的?！筍arah 說道。

「那么我還是想問最開始的那個問題，到底應該使用敏捷還是瀑布模型？」Jimmy 還是忍不住問道。

「我不知道?！筍arah 坦言道：「你的項目應該由你來決定。對我而言，選擇哪個流程其實并不算最重要的問題，相反我剛剛說道的，流程之前的種種問題才是最重要的，關于承諾，團隊的構建和管理，這些因素產生的影響更為深遠。如果你清楚的知道最終要產出的產品，流程就僅僅只是手段了?！筍arah 笑著總結道。說話間，她伸手去拿之前沒看完的文檔?！钢x謝，Sarah，」Jimmy 笑道：「你好像又救了我一次?！拐f著 Jimmy 走出了Sarah 的辦公室。

「我的門一直都敞開著?！筍arah 低聲說道，走遠了 Jimmy 大概并沒有聽到這句低語。

結語

在設計和開發數字產品的時候，每個團隊的負責人可以選擇自己習慣的或者自己青睞的流程和方法。使用什么樣的方法無關緊要，在未來10年，我們可能還會碰到更多的新方法，新的策略。而唯一不變的，始終還是最基本的問題，團隊，承諾和交付。

我注意到，有人把產品所使用的敏捷和瀑布模型這類流程稱為「項目的上帝」。但是實際上，不管哪種流程，依然會陷入無休止的扯皮會議和無意義的辯論，出現了問題之后，開始修改時間表?！肝覀儫o法按時完成功能A，因此我們無法開發模塊B，開發人員又需要參與下一個項目，因此我們資源是不夠用的，所以呢，這個項目不得不停一個月?！惯@情況很常見，也是典型的反面案例。

我相信，產品團隊應該高度專注于當前的產品，和其他產品的需求、各種無關的事務隔離開來?！窰ey，Angela，我們的大客戶要求這個今天上線，能不能把你的項目放一邊，幫我們把這個產品弄上線？」這也是一個反面案例。拒絕。

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

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

藍藍設計( 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

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

小明的設計故事：身為設計師的小明，剛剛遇到下發的設計需求，看了半天需求，無從下手。于是瘋狂尋找競品去借鑒，去素材網站尋找素材拼湊。

如果在設計工作中遇到與小明相同的情況：沒有設計頭緒，大腦一片空白，畫著不一定能過審的草稿時，請繼續閱讀下面的文章，希望大家能從作者的設計總結中有所啟發。

目錄：

• 從業務目標切入
• 從用戶行為切入
• 從設計方法上切入

什么是設計點？

設計點是設計師通過設計手段介入設計任務的一個節點，比如：設計目標 、設計風格 、用戶行為 、用戶情緒 、信息表達等都是設計的切入點，設計點能夠影響設計的風格走向和設計師的創作思路。

那如何從眾多的設計點中找到一個清晰的設計主線呢？只需從3個方面切入。

一、從業務目標來切入：曬講義案例

下圖是阿里巴巴UED 的設計理論，同程序員提倡的「不造重復的輪子」一樣，設計理論也沒有必要去反復總結類似的。目前阿里的這個設計理論，很好的支持了包含大型項目到中型項目的各個環節，易于理解，且和我們的工作認知貼近，是一個很好的入門方法。

我們通過定義業務目標和聚焦設計目標，來最終實現設計的產出。

下圖是平臺營銷活動的設計5個要義，其核心也是業務目標。

通過幾個的設計方法的展示，我們可以看出，處于上游業務目標的重要性。

只有業務目標和設計目標一致的時候，我們的設計工作才有意義。當我們評判我們的設計結果時，除了設計的數據指標外，能快速判斷設計方案比迭代之前更優的指標就是是否符合業務目標，是否更貼近用戶的訴求。

1. 切入模型

根據工具模型我們從業務目標出發，去定義設計目標從而得出設計方向。

2. 明確業務訴求

3. 得出業務目標

用分享講義的策略給用戶帶來學習交流機會和學習成就感，達到拉新和活躍用戶目的。

4. 視覺推導

5. 案例

二、從用戶行為切入

視覺設計師，尤其是運營設計師一定要具有交互思維，作為全鏈路設計目標的我們，掌握交互思維，能更好的理解產品文檔和規避更多的設計錯誤，從而準確引導用戶操作路徑。

方法：了解頁面中的功能交互流程，梳理用戶操作行為路徑，可以對行為步驟中的信息內容進行歸類分組提供依據。

切入模型：

三、從設計方法上切入

常見的方法有：情感化、原子化、組件化、游戲化等等。

方法：分解設計需求，歸納設計模塊，運用已知的設計類型進行視覺化設計。

1. 提取儀式感設計點-曬成績項目

儀式感的作用：通過用戶在體驗過程中由產品功能實現—交互操作—體驗心理變化建立，形成對價值觀的建立，是給用戶帶來更高層次的享受。

從四個層面理解儀式感：權威感、尊重存在感、期待感、榮譽感的意義。通過分解設計內容來發現機會點，插入儀式感設計方法。

視覺推導：

案例：

2. 提取情感化設計點

情感化設計3要素：

案例：

3. 提取游戲化設計點

將游戲機制運用于非游戲場景。比如：要想鼓勵用戶多參與交互，你可以在 APP 加入「挑戰」這類的游戲元素，用戶可以參與挑戰，通過連續抽獎，并獲得相應獎賞，從而達到預期目的。

案例：

尋找設計點就是拆解與分析的過程。

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

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

如何從無到有設計一款字體

對于很多剛接觸字體設計的同學經常會遇到一種情況那就是想法高大上，結果很悲傷，為什么會造成這樣的結果？歸根結底是對字體設計本身了解還不夠細致就照葫蘆畫瓢直接上，為了避免這種尷尬的結果，我們應該在開始著手做字體之前要做好各項準備工作，不斷去瀏覽優秀的字體設計從中尋找設計的感覺，確定感覺后建立網格系統，開始逐步設計字體。我在做字體設計的時候會把握幾個步驟「建網格」——「選字體」——「拆字體」——「繪筆畫」——「綁骨架」——「粗與細」——「取與舍」——「磨細節」——「去感受」。

下面我們就以大家最常見的矩陣字體為例來給大家分享如何制作字體。

1. 建網格

建立網格系統，萬丈高樓平地起，要做一款扎實的字體離不開網格系統的規范。

2. 拆字體

以「燃」為例——選取一個默認字體，按照字體結構對筆畫進行拆分。

3. 繪筆畫

將拆分出的筆畫用橫線和豎線在網格系統里進行筆畫重繪，此時不要做細節，撇、捺和點根據自身走向和結構特點也歸屬為橫豎線。

4. 綁骨架

拆分繪制的字體筆畫就是字體的骨骼，筆畫間的連接處可以理解成是人體的關節，關節的意義在于保證字體穩固的同時又靈活多變，字體的筆畫可以根據視覺需要圍繞關節在一定范圍內做活動，也可調整長短比例。

5. 粗與細

筆畫的粗細與硬度由你想要的字體氣質來決定，細筆畫與曲筆畫柔美氣質，粗筆畫與直筆畫沉穩大氣，雖說設計是一種感覺，但是這種感覺對于初學者來說很難把控，所以跟大家共享一下常用的幾種筆畫的粗細，在1000PX*1000PX畫板里采用6px，10px和20px為基礎筆畫粗細，根據想要的業務氣質選取即可。

6. 解與構

常見的字體結構有「上下結構」「上中下結構」「左右結構」「左中右結構」「半包圍結構」和「全包圍結構」。其中「上下結構」中著重強調占比較小的那部分筆畫，進而達到字體本身的平衡，例如「感」字著重設計心字；「上中下結構」中一般會在不影響識別性的前提下去掉中間部分橫行筆畫，進而達到字體本身的平衡，例如「享」字著重設計口字；左中右結構中在不影響識別性的前提下會簡化左邊部分筆畫，進而達到字體本身的平衡，例如「燃」字著重設計火字。

7. 取與舍

筆畫變粗后整個字體筆畫間的空間比例會受到一定影響，因此為了字體的美觀度和透氣性我們會對字體結構進行一些取舍和整合。

8. 磨細節

為了讓字體看起來更加舒適，我們將字體的拐角做圓，做圓角的同時也要根據網格系統來調整圓的度數。

9. 去感受

打磨整體字體，繼續刻畫細節。

注意：在一組字里，每個單字的結構都存在差異，適當調整字體內部的比例，形成感官上舒適的筆勢，對保持視覺上大小一致很重要。漢字字體類型繁多，但是如果我們用幾何法則來劃分字體類型其實大致可以歸納為三種：方形，圓形和三角形，從面積上來看方形和圓形的面積最大，三角形次之，所以我們為了保持字重大小的一致性需要調整他們之間的大小比例，做到大小均勻，筆畫一致，結構嚴謹和間隙適中。

△ 圖源：ElethomHunter

為了拉出字體的氣質，一般會把字體做的稍微偏瘦長一些。

字體設計的手段是多種多樣的，每個設計師都有自己擅長的切入點，最后的結果是自己想要的就好。上述的分享希望能給字體設計初學者一點幫助，也歡迎各位同行大神交流切磋。

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