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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ā)到您的郵箱中， 請點(diǎn)這里

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

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

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

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

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

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

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

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

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

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

請務(wù)必記住，無論是在什么平臺(tái)上，動(dòng)效的持續(xù)時(shí)長絕不是單純?nèi)Q于屏幕尺寸和運(yùn)動(dòng)距離，還取決于平臺(tái)特征、元素大小、功能設(shè)定等等。較小的元素或者較小的變化，相應(yīng)的動(dòng)效應(yīng)該更快一點(diǎn)。因此，大而復(fù)雜的元素動(dòng)效持續(xù)時(shí)間更長，看起來也更舒服一點(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í)長還和元素大小、運(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í)間再長，可能會(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軸則表示的唯一，換句話來說，如同我們在初中物理中所學(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)手勢甩出去的卡片。但是請記住，只有當(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í)長也是一樣的，但是運(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í)長最好超過開始加速的時(shí)長，用戶將會(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)該更長，因?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)事先確定的。

為了簡化你對(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í)太長，另一方面會(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)，這樣有助于讓它看起來更加自然。所謂「不成比例」地變化指的是元素的長和寬的變化并不是按照相同比例來縮放或者變化的，換句話來說，變化的速度也不一樣。（比如，方形變成矩形）

△ 不成比例地改變對(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è)方向呢？很簡單，元素運(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é)，多做測試多摸索總是有必要的。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ā)到您的郵箱中， 請點(diǎn)這里

篩選組件概述

篩選組件的作用是幫助人們在面對(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ù)等只是輔助選擇條件。

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

案例二

案例來源于淘寶App

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

案例三

案例來源于嗶哩嗶哩App

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

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

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è)篩選條件太過繁瑣，于是篩選器底部增加了清除按鈕，操作更簡便。但底部按鈕一般為“確定”操作，“清除”放在底部樣式上沒有做誤操作提示，可能會(huì)增加誤操作機(jī)率。

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

案例二

案例來源于dribbble

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

此樣式一般適合篩選類別較少，并且每個(gè)類別的篩選項(xià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)容形式盡量精簡直觀。若使用案例3中的扇形篩選器，則要求篩選類別為1-2類，篩選項(xiàng)數(shù)量少切文案精簡。

案例一

案例來源于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è)浮層前面的案例也提到過，適用于篩選條件較多的場景。并且使用側(cè)邊欄形式的浮層與篩選按鈕關(guān)聯(lián)性較高，相對(duì)符合用戶認(rèn)知。體驗(yàn)細(xì)節(jié)上可學(xué)習(xí)的點(diǎn)還有按鈕功能的改變，使得體驗(yàn)更便捷。

案例二

案例來源于dribbble

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

案例三

案例來源于dribbble

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

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

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í)”的篩選。因此篩選組件此場景使用“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ù)量較多的場景。

05

小結(jié)

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ā)到您的郵箱中， 請點(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ì)「請勿打擾」的功能

「我認(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ì)請勿打擾這個(gè)功能了?！?

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

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

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

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

「你可能會(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í)際上，借助請勿打擾的功能，你可以一早上再查看它們。這套系統(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í)代的請勿打擾的功能拓展而來的。但是它在現(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)系非常簡單。我不希望被它所控制。從使用 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è)計(jì)師需要關(guān)注的焦點(diǎn)。就像可持續(xù)性發(fā)展已經(jīng)成為時(shí)代的主流訴求一樣，你無法忽視認(rèn)知壓力的存在，認(rèn)知設(shè)計(jì)也勢在必行?！?

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ā)到您的郵箱中， 請點(diǎn)這里

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

對(duì)于他正在做的這個(gè)控制面板的設(shè)計(jì)項(xiàng)目，他也正在挑選合適的產(chǎn)出流程。用敏捷（Agile）開發(fā)流程更好，還是應(yīng)該用瀑布模型（Waterfall Model）？又或者是循環(huán)式開發(fā)流程？他覺得跟開發(fā)部的同事聊一聊會(huì)是更好的選擇。

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

敏捷開發(fā)以用戶的需求進(jìn)化為核心，采用迭代、循序漸進(jìn)的方法進(jìn)行軟件開發(fā)。在敏捷開發(fā)中，軟件項(xiàng)目在構(gòu)建初期被切分成多個(gè)子項(xiàng)目，各個(gè)子項(xiàng)目的成果都經(jīng)過測試，具備可視、可集成和可運(yùn)行使用的特征。換言之，就是把一個(gè)大項(xiàng)目分為多個(gè)相互聯(lián)系，但也可獨(dú)立運(yùn)行的小項(xiàng)目，并分別完成，在此過程中軟件一直處于可使用狀態(tài)。

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

「干啥？你倆在聊啥？」

「Boris在跟我說敏捷開發(fā)……」

「啥玩意兒？他跟你講敏捷開發(fā)？快拉倒吧，他們部門里面唯一敏捷的就手頭上的 Macbook。我們這邊都用瀑布模型來作為產(chǎn)品開發(fā)的流程，因?yàn)樗蔷€性的，有著更簡單的結(jié)構(gòu)，操作起來也簡單，很少會(huì)發(fā)生混亂?！拐f著，F(xiàn)loris 從辦公室的書架上摸出一堆文檔壓到 Jimmy 手上。「你要的東西都在里面，祝你好運(yùn)。如果你需要任何幫助，請?jiān)诠驳钠脚_(tái)上跟我約時(shí)間，我們可以開個(gè)小會(huì)解決一下問題~」說著 Floris 回到自己的桌子邊，開始繼續(xù)干活兒。

瀑布模型（Waterfall Model） 是一個(gè)項(xiàng)目開發(fā)架構(gòu)，開發(fā)過程是通過設(shè)計(jì)一系列階段順序展開的，從系統(tǒng)需求分析開始直到產(chǎn)品發(fā)布和維護(hù)，每個(gè)階段都會(huì)產(chǎn)生循環(huán)反饋，因此，如果有信息未被覆蓋或者發(fā)現(xiàn)了問題，那么最好「返回」上一個(gè)階段并進(jìn)行適當(dāng)?shù)男薷?，?xiàng)目開發(fā)進(jìn)程從一個(gè)階段「流動(dòng)」到下一個(gè)階段，這也是瀑布模型名稱的由來。包括軟件工程開發(fā)、企業(yè)項(xiàng)目開發(fā)、產(chǎn)品生產(chǎn)以及市場銷售等構(gòu)造瀑布模型。

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

Jimmy 決定采用最終的備用方案——萬事不決問 Sarah。在 Jimmy 的工作經(jīng)驗(yàn)當(dāng)中，老領(lǐng)導(dǎo) Sarah 總能給他靠譜的建議和可行的方案。

出問題的時(shí)候，先后退一步

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

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

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

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

聽到 Jimmy 說到后面，Sarah 就明白了他碰到什么問題了?！窲immy，沒事兒，我們總會(huì)在某些時(shí)候碰到問題，別人的指導(dǎo)總會(huì)派上用場。」

「我可以理解，如果在網(wǎng)上搜索這些相關(guān)的信息，會(huì)有太多雜亂的內(nèi)容讓你感到信息過載。幸運(yùn)的是，如果你理解這些東西背后的基本原理，就可以相對(duì)輕松地梳理清楚所有的內(nèi)容了。」

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

「為了？」Jimmy 下意識(shí)撓頭。

「是的，但也不完全是這樣?？偟膩碚f，我們需要一個(gè)過程來呈現(xiàn)產(chǎn)品，因?yàn)槿祟惖乃季S是沒有辦法直接掌控混亂的事物。此外，一個(gè)清晰的、可遵循可記錄的流程，能夠確保你在完成后，確保產(chǎn)品的整個(gè)開發(fā)過程是可交付的，細(xì)節(jié)也是可回溯的。這就是為什么，我們需要這些流程?！?

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

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

承諾是關(guān)鍵

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

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

「如果這個(gè)時(shí)間只是一兩周，一個(gè)月，好吧，或者說一年，這個(gè)周期并不重要。重要的是，你不需要擁有一個(gè)清晰的過程，并且承諾提供一些東西。當(dāng)然，這是很有挑戰(zhàn)性的。這意味著，在這個(gè)情況下，你必須作出一些選擇，來完成任務(wù)。」Sarah 總結(jié)道。

阻礙前進(jìn)的東西

「到底使用哪種敏捷的方法，采取多少個(gè)步驟，或者使用經(jīng)典的瀑布模型，借助谷歌的設(shè)計(jì)沖刺，都可以，都沒有問題。大家總會(huì)認(rèn)為，采用哪種過程是關(guān)鍵，但是現(xiàn)實(shí)是，這個(gè)過程始終都只是達(dá)成目的一個(gè)手段而已?！?

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

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

「團(tuán)隊(duì)的規(guī)模很重要。不過那是后話，后面咱們再仔細(xì)聊?！?

「假設(shè)，你有一個(gè)三個(gè)人組成的團(tuán)隊(duì)，他們共同負(fù)責(zé)開發(fā)并發(fā)布你的產(chǎn)品的下一個(gè)功能。具體到你的頭上，就是為你開發(fā)并實(shí)現(xiàn)這個(gè)重設(shè)計(jì)的儀表盤。你需要確保公司的其他人不會(huì)前來干涉他們的工作，不會(huì)來和他們討論這個(gè)項(xiàng)目以外的任何事情?！?

「這一點(diǎn)極為重要。他們必須保持專注。減少被打擾的機(jī)率——或者說不被打擾是最好的事情，他們能夠?qū)Ｗ⒍逦乃伎紗栴}。除了手頭的任務(wù)之外，他們不會(huì)需要去做其他的任何事情，不會(huì)被其他的工作內(nèi)容所分心。對(duì)于如何做手頭的工作，什么時(shí)候做，具體做什么，他們應(yīng)當(dāng)有足夠的控制權(quán)和自主權(quán)。最后，請記住這一點(diǎn)：

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

問題總是會(huì)出現(xiàn)的

「如果你像我說的一樣，后退一步來看問題，就會(huì)意識(shí)到，流程背后所存在的問題，并不是流程本身的優(yōu)劣，也不關(guān)乎公司、人員、國家、文化或者其他。這是關(guān)于紀(jì)律和約束。不僅是團(tuán)隊(duì)本身需要紀(jì)律，負(fù)責(zé)人要有紀(jì)律感，業(yè)務(wù)也需要有紀(jì)律約束。如同我們所知道的，團(tuán)隊(duì)也好，產(chǎn)品也好，公司也好，它都是自上而下的，頂部的紀(jì)律、約束和眼界，決定了底部的紀(jì)律、調(diào)性和產(chǎn)出?！?

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

不要自欺欺人，你需要提前計(jì)劃好整個(gè)項(xiàng)目，避免出錯(cuò)。很多事情都會(huì)出錯(cuò)，所以你需要有目標(biāo)有愿景，你需要向著目標(biāo)前進(jìn)，并且隨時(shí)做好解決問題、糾偏的準(zhǔn)備。一旦你被其他的因素影響，就很容易增加開發(fā)時(shí)間、增加預(yù)算、招募更多的人手。不要相信所謂的規(guī)劃和藍(lán)圖，那什么都不是。問題是一定會(huì)出現(xiàn)的，出錯(cuò)了，就專注于最終目標(biāo)，抓緊手頭的項(xiàng)目，別無其他?！?

Sarah 說道這里，Jimmy 已經(jīng)開始有所思考了。「所以，在我告訴你這些事情以后，對(duì)于你你手頭的這個(gè)儀表盤的項(xiàng)目，你打算下一步要怎么做？」

需要始終牢記的事情

Jimmy 的腦中仍然在反思 Sarah 剛剛說過的話，下意識(shí)回復(fù)道：「要有遠(yuǎn)見，目標(biāo)清晰，為即將出現(xiàn)的錯(cuò)誤與問題做好準(zhǔn)備，組建一個(gè)足夠獨(dú)立的小團(tuán)隊(duì)，和公司其他的團(tuán)隊(duì)和部門隔離開來，這樣可以在不被打斷的情況下聚焦于當(dāng)前的任務(wù)，最重要的是，要在承諾的日期前交付承諾的產(chǎn)品。但是我不知道團(tuán)隊(duì)要有多小，我應(yīng)該帶多少人？」Jimmy 問道。

「如果我說我知道你要帶幾個(gè)，那么我一定是在騙你。不過，通常而言，你這種規(guī)模不算太大的產(chǎn)品，我建議控制在3人以內(nèi)。你是這個(gè)項(xiàng)目的主管設(shè)計(jì)師，也是產(chǎn)品經(jīng)理，在設(shè)計(jì)上已經(jīng)沒有大的問題，你還需要兩個(gè)開發(fā)人員，一個(gè)負(fù)責(zé)前端，一個(gè)負(fù)責(zé)后端，這樣足矣?！筍arah 回答道。

「那么我應(yīng)該花費(fèi)多少人在這個(gè)上面呢？」Jimmy 又問道。

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

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

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

「我的門一直都敞開著。」Sarah 低聲說道，走遠(yuǎn)了 Jimmy 大概并沒有聽到這句低語。

結(jié)語

在設(shè)計(jì)和開發(fā)數(shù)字產(chǎn)品的時(shí)候，每個(gè)團(tuán)隊(duì)的負(fù)責(zé)人可以選擇自己習(xí)慣的或者自己青睞的流程和方法。使用什么樣的方法無關(guān)緊要，在未來10年，我們可能還會(huì)碰到更多的新方法，新的策略。而唯一不變的，始終還是最基本的問題，團(tuán)隊(duì)，承諾和交付。

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

我相信，產(chǎn)品團(tuán)隊(duì)?wèi)?yīng)該高度專注于當(dāng)前的產(chǎn)品，和其他產(chǎn)品的需求、各種無關(guān)的事務(wù)隔離開來。「Hey，Angela，我們的大客戶要求這個(gè)今天上線，能不能把你的項(xiàng)目放一邊，幫我們把這個(gè)產(chǎn)品弄上線？」這也是一個(gè)反面案例。拒絕。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ā)到您的郵箱中， 請點(diǎn)這里

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ā)到您的郵箱中， 請點(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é)。

簡單來說，信息架構(gòu)設(shè)計(jì)就是讓用戶可以 容易地理解你的產(chǎn)品是怎樣的。讓他們在使用你產(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è)簡單的認(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è)飯店一樣簡單，那么信息架構(gòu)為何需要設(shè)計(jì)？

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

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

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

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

下面我來分步講解一下。

1. 了解用戶，場景，習(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ù)測事物的發(fā)展變化。心智模型是你對(duì)事物運(yùn)行發(fā)展的預(yù)測。再說得清楚一點(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)品。

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

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

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

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

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

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

首先我們需要把競品功能梳理成思維導(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)品競爭點(diǎn)，也是別人用你的 app 不用其他 app 的理由。比如人脈軟件都會(huì)有社交相關(guān)的功能，但是脈脈會(huì)比較注重職場招聘、直播等互聯(lián)網(wǎng)職場人比較關(guān)心的點(diǎn)，這樣對(duì)應(yīng)的用戶群體就比較會(huì)吃你這套，會(huì)提升用戶的粘性。

相信你在梳理了競品的信息架構(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è)再一次印證和檢測我們的產(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ì)公司，為期望卓越的國內(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ā)到您的郵箱中， 請點(diǎn)這里

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

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

目錄：

• 從業(yè)務(wù)目標(biāo)切入
• 從用戶行為切入
• 從設(shè)計(jì)方法上切入

什么是設(shè)計(jì)點(diǎn)？

設(shè)計(jì)點(diǎn)是設(shè)計(jì)師通過設(shè)計(jì)手段介入設(shè)計(jì)任務(wù)的一個(gè)節(jié)點(diǎn)，比如：設(shè)計(jì)目標(biāo) 、設(shè)計(jì)風(fēng)格 、用戶行為 、用戶情緒 、信息表達(dá)等都是設(shè)計(jì)的切入點(diǎn)，設(shè)計(jì)點(diǎn)能夠影響設(shè)計(jì)的風(fēng)格走向和設(shè)計(jì)師的創(chuàng)作思路。

那如何從眾多的設(shè)計(jì)點(diǎn)中找到一個(gè)清晰的設(shè)計(jì)主線呢？只需從3個(gè)方面切入。

一、從業(yè)務(wù)目標(biāo)來切入：曬講義案例

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

我們通過定義業(yè)務(wù)目標(biāo)和聚焦設(shè)計(jì)目標(biāo)，來最終實(shí)現(xiàn)設(shè)計(jì)的產(chǎn)出。

下圖是平臺(tái)營銷活動(dòng)的設(shè)計(jì)5個(gè)要義，其核心也是業(yè)務(wù)目標(biāo)。

通過幾個(gè)的設(shè)計(jì)方法的展示，我們可以看出，處于上游業(yè)務(wù)目標(biāo)的重要性。

只有業(yè)務(wù)目標(biāo)和設(shè)計(jì)目標(biāo)一致的時(shí)候，我們的設(shè)計(jì)工作才有意義。當(dāng)我們評(píng)判我們的設(shè)計(jì)結(jié)果時(shí)，除了設(shè)計(jì)的數(shù)據(jù)指標(biāo)外，能快速判斷設(shè)計(jì)方案比迭代之前更優(yōu)的指標(biāo)就是是否符合業(yè)務(wù)目標(biāo)，是否更貼近用戶的訴求。

1. 切入模型

根據(jù)工具模型我們從業(yè)務(wù)目標(biāo)出發(fā)，去定義設(shè)計(jì)目標(biāo)從而得出設(shè)計(jì)方向。

2. 明確業(yè)務(wù)訴求

3. 得出業(yè)務(wù)目標(biāo)

用分享講義的策略給用戶帶來學(xué)習(xí)交流機(jī)會(huì)和學(xué)習(xí)成就感，達(dá)到拉新和活躍用戶目的。

4. 視覺推導(dǎo)

5. 案例

二、從用戶行為切入

視覺設(shè)計(jì)師，尤其是運(yùn)營設(shè)計(jì)師一定要具有交互思維，作為全鏈路設(shè)計(jì)目標(biāo)的我們，掌握交互思維，能更好的理解產(chǎn)品文檔和規(guī)避更多的設(shè)計(jì)錯(cuò)誤，從而準(zhǔn)確引導(dǎo)用戶操作路徑。

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

切入模型：

三、從設(shè)計(jì)方法上切入

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

方法：分解設(shè)計(jì)需求，歸納設(shè)計(jì)模塊，運(yùn)用已知的設(shè)計(jì)類型進(jìn)行視覺化設(shè)計(jì)。

1. 提取儀式感設(shè)計(jì)點(diǎn)-曬成績項(xiàng)目

儀式感的作用：通過用戶在體驗(yàn)過程中由產(chǎn)品功能實(shí)現(xiàn)—交互操作—體驗(yàn)心理變化建立，形成對(duì)價(jià)值觀的建立，是給用戶帶來更高層次的享受。

從四個(gè)層面理解儀式感：權(quán)威感、尊重存在感、期待感、榮譽(yù)感的意義。通過分解設(shè)計(jì)內(nèi)容來發(fā)現(xiàn)機(jī)會(huì)點(diǎn)，插入儀式感設(shè)計(jì)方法。

視覺推導(dǎo)：

案例：

2. 提取情感化設(shè)計(jì)點(diǎn)

情感化設(shè)計(jì)3要素：

案例：

3. 提取游戲化設(shè)計(jì)點(diǎn)

將游戲機(jī)制運(yùn)用于非游戲場景。比如：要想鼓勵(lì)用戶多參與交互，你可以在 APP 加入「挑戰(zhàn)」這類的游戲元素，用戶可以參與挑戰(zhàn)，通過連續(xù)抽獎(jiǎng)，并獲得相應(yīng)獎(jiǎng)賞，從而達(dá)到預(yù)期目的。

案例：

尋找設(shè)計(jì)點(diǎn)就是拆解與分析的過程。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ā)到您的郵箱中， 請點(diǎn)這里

如何從無到有設(shè)計(jì)一款字體

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

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

1. 建網(wǎng)格

建立網(wǎng)格系統(tǒng)，萬丈高樓平地起，要做一款扎實(shí)的字體離不開網(wǎng)格系統(tǒng)的規(guī)范。

2. 拆字體

以「燃」為例——選取一個(gè)默認(rèn)字體，按照字體結(jié)構(gòu)對(duì)筆畫進(jìn)行拆分。

3. 繪筆畫

將拆分出的筆畫用橫線和豎線在網(wǎng)格系統(tǒng)里進(jìn)行筆畫重繪，此時(shí)不要做細(xì)節(jié)，撇、捺和點(diǎn)根據(jù)自身走向和結(jié)構(gòu)特點(diǎn)也歸屬為橫豎線。

4. 綁骨架

拆分繪制的字體筆畫就是字體的骨骼，筆畫間的連接處可以理解成是人體的關(guān)節(jié)，關(guān)節(jié)的意義在于保證字體穩(wěn)固的同時(shí)又靈活多變，字體的筆畫可以根據(jù)視覺需要圍繞關(guān)節(jié)在一定范圍內(nèi)做活動(dòng)，也可調(diào)整長短比例。

5. 粗與細(xì)

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

6. 解與構(gòu)

常見的字體結(jié)構(gòu)有「上下結(jié)構(gòu)」「上中下結(jié)構(gòu)」「左右結(jié)構(gòu)」「左中右結(jié)構(gòu)」「半包圍結(jié)構(gòu)」和「全包圍結(jié)構(gòu)」。其中「上下結(jié)構(gòu)」中著重強(qiáng)調(diào)占比較小的那部分筆畫，進(jìn)而達(dá)到字體本身的平衡，例如「感」字著重設(shè)計(jì)心字；「上中下結(jié)構(gòu)」中一般會(huì)在不影響識(shí)別性的前提下去掉中間部分橫行筆畫，進(jìn)而達(dá)到字體本身的平衡，例如「享」字著重設(shè)計(jì)口字；左中右結(jié)構(gòu)中在不影響識(shí)別性的前提下會(huì)簡化左邊部分筆畫，進(jìn)而達(dá)到字體本身的平衡，例如「燃」字著重設(shè)計(jì)火字。

7. 取與舍

筆畫變粗后整個(gè)字體筆畫間的空間比例會(huì)受到一定影響，因此為了字體的美觀度和透氣性我們會(huì)對(duì)字體結(jié)構(gòu)進(jìn)行一些取舍和整合。

8. 磨細(xì)節(jié)

為了讓字體看起來更加舒適，我們將字體的拐角做圓，做圓角的同時(shí)也要根據(jù)網(wǎng)格系統(tǒng)來調(diào)整圓的度數(shù)。

9. 去感受

打磨整體字體，繼續(xù)刻畫細(xì)節(jié)。

注意：在一組字里，每個(gè)單字的結(jié)構(gòu)都存在差異，適當(dāng)調(diào)整字體內(nèi)部的比例，形成感官上舒適的筆勢，對(duì)保持視覺上大小一致很重要。漢字字體類型繁多，但是如果我們用幾何法則來劃分字體類型其實(shí)大致可以歸納為三種：方形，圓形和三角形，從面積上來看方形和圓形的面積最大，三角形次之，所以我們?yōu)榱吮３肿种卮笮〉囊恢滦孕枰{(diào)整他們之間的大小比例，做到大小均勻，筆畫一致，結(jié)構(gòu)嚴(yán)謹(jǐn)和間隙適中。

△ 圖源：ElethomHunter

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。