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

這次的采訪我們聊得很細(xì)，細(xì)到某一個(gè)交互的設(shè)計(jì)思路的變遷，以及為什么最終是以那種方式呈現(xiàn)在 MIUI 10 之上。我相信，無論你是對設(shè)計(jì)還是對手機(jī)系統(tǒng)存在好奇，一定都可以從這次訪談里得到一些有益的啟發(fā)。因?yàn)槲覀儧]聊虛的。

△ MIUI設(shè)計(jì)團(tuán)隊(duì)

一、徹底干掉虛擬鍵的全面屏手勢是不是太激進(jìn)了？

△ 虛擬鍵不該存在

是不是太激進(jìn)我們還是根據(jù)用戶反饋來判斷，這套手勢因?yàn)闆]有任何虛擬鍵的提示，剛開始確實(shí)需要一兩分鐘來學(xué)習(xí)，但大部分的用戶反饋是：用了就回不去了。目前從客觀上來講，安卓手機(jī)里的全面屏手勢，MIUI 確實(shí)是最好用的，不是我們自己說，而是從各種用戶反饋，包括微博上很多專業(yè)數(shù)碼博主的反饋得來的結(jié)論，很多人在主動地說這件事。

但是在手勢的設(shè)計(jì)上，我們是踩過很多坑的。

我們嘗試過很多版本的全面屏手勢，最初還沒有大膽到想干掉所有虛擬鍵，而是想在虛擬鍵上做文章。開始我們覺得那個(gè)區(qū)域很多時(shí)候3個(gè) button 可能用不上，比如看書的時(shí)候，你可能只需要一個(gè)返回鍵，所以我們考慮的是在某些特定的應(yīng)用場景里把一些用不到的虛擬鍵收起來，這是做減法，減法做完之后，原來虛擬鍵的位置就空出來了，我們覺得這個(gè)空間是浪費(fèi)的，又在想應(yīng)該怎么利用起來，這是早期一個(gè)很復(fù)雜的思路。

△ 早期帶橫桿的產(chǎn)品

后來我們又想是不是可以把3個(gè)鍵整合成一個(gè)虛擬鍵，當(dāng)初做了一個(gè) Demo，把3個(gè)鍵集合成一個(gè)橫桿，那個(gè)時(shí)候還沒有看到 iPhone 的模型，在 iOS 的全面屏手勢出來之前，我們就做了一個(gè)橫桿子，其實(shí)是受 Palm 的啟發(fā)，這根桿子很早之前 Palm 就有了，蘋果可能也是受 Palm 啟發(fā)。我們設(shè)計(jì)的是在那個(gè)桿子上橫滑返回，然后上滑回桌面，很接近蘋果目前的處理方式。但最終還是把這個(gè)設(shè)計(jì)給放棄了，去掉的原因是：提示桿一開始是有比較好的引導(dǎo)操作作用，但一段時(shí)間后，用戶就不需要了，另外就是視覺感官上橫桿并不好看，工業(yè)設(shè)計(jì)上好不容易才能把手機(jī)下巴縮短幾毫米，你一根橫桿又全給它加回來了，這其實(shí)背離了「全面屏」的初衷，在設(shè)計(jì)上是一種不得已而為之的妥協(xié)。

否定橫桿之后，我們才真正全心考慮干掉所有虛擬鍵的方案。但沒有虛擬鍵，就對我們的交互設(shè)計(jì)提出了很高的要求，首先，這個(gè)手勢的出發(fā)點(diǎn)一定得非常符合直覺，所以不管是返回上一級菜單也好，回到桌面也好，這必須是兩個(gè)最基礎(chǔ)的操作（橫滑、上滑），在這兩個(gè)基礎(chǔ)操作上略做停頓，我們就可以進(jìn)入應(yīng)用間的快切和多任務(wù)管理，我們用一種非常輕的設(shè)計(jì)把它附著在兩個(gè)基礎(chǔ)交互上。徹底干掉虛擬鍵這件事最早我們沒有太大的勇氣去做，最后做出來反倒更貼近用戶操作手機(jī)的直覺，有一種柳暗花明的感覺。

△ 簡潔易用的MIUI全面屏手勢

二、MIUI 10的整體視覺設(shè)計(jì)遵循了什么思路？

△ 為全面屏而重新設(shè)計(jì)

在天氣、日歷、安全中心等等 MIUI 10 的各個(gè)角落里，其實(shí)都把原來分段式的畫面結(jié)構(gòu)做了一個(gè)全面屏化的設(shè)計(jì)，讓頁面不要有很強(qiáng)的割裂感。讓內(nèi)容直接浮在屏幕上，用戶第一時(shí)間得到信息，去掉干擾元素。

在非全面屏?xí)r代，手機(jī)有上下兩個(gè)比較大的黑色邊框，在視覺上天然是分段式的，之前屏幕內(nèi)的多色塊設(shè)計(jì)其實(shí)是對應(yīng)了手機(jī)外觀的這種「分段」，它還是和諧的，但原樣搬到全面屏手機(jī)上，就顯得是把一整塊完整的屏幕生生分割成了幾段。

另外就是原來有一些插畫類型的風(fēng)格和表達(dá)手法，想讓整個(gè)畫面有一些親和力。但是因?yàn)槲覀兊挠脩舾采w面很大，兩三億用戶，會有一些年齡層的用戶覺得原先插畫形式有些稚嫩感。所以我們覺得到10這一代，整個(gè)系統(tǒng)應(yīng)該更成熟、更普適一些，我們更傾向于做一個(gè)對任何人來說都很舒服的視覺設(shè)計(jì)。

三、這次整體視覺風(fēng)格有比較大的變動，有沒有什么地方特別花費(fèi)精力的？

舉個(gè)特別細(xì)節(jié)的例子。MIUI 10 的時(shí)鐘，有一部分用戶會有疑問：在 MIUI 10 里，可見的大多數(shù)頁面是亮色，為什么進(jìn)入時(shí)鐘時(shí)卻是黑色的？我們其實(shí)也在白色和黑色反復(fù)了很多次，調(diào)研也做了很多次。最終我們認(rèn)為更重要的是時(shí)鐘的使用場景問題，比如說你晚上在睡覺前拿起手機(jī)定個(gè)鬧鐘，在夜晚或者室內(nèi)，從手機(jī)桌面進(jìn)來打開時(shí)鐘，如果進(jìn)入一個(gè)很亮的頁面，它即便是好看的，也可能會刺眼。所以我們還是選擇了黑色，當(dāng)然那個(gè)對比度到現(xiàn)在還在調(diào)整，我們想把視覺上的美觀和使用的舒服統(tǒng)一進(jìn)來。

四、MIUI 10的自然音效系統(tǒng)是發(fā)布會上的一個(gè)驚喜，你們?yōu)槭裁磿氲饺プ鲆粜В?

我明白你這個(gè)問題的意思，大部分人的手機(jī)是長期靜音的，音效這個(gè)東西，好像已經(jīng)被完全忽略了。但是我們覺得，哪怕只有1%的用戶打開了手機(jī)鈴聲，他也應(yīng)該感受到悅耳而不是打擾和膩煩。如果我沒記錯(cuò)的話，我們是手機(jī)廠商里第一個(gè)針對音效做系統(tǒng)性設(shè)計(jì)和優(yōu)化的，我們從「百聽不厭」的自然系音效出發(fā)，和得過格萊美獎(jiǎng)的頂尖音樂人合作，還針對手機(jī)音腔的特性對音效做了特別的優(yōu)化。

發(fā)布會上洪鋒把自然音效系統(tǒng)作為一個(gè)彩蛋來講，這是我們送給小米手機(jī)用戶的一個(gè)禮物，是讓我們驕傲的產(chǎn)品。我不確定有多少用戶會發(fā)現(xiàn)這個(gè)產(chǎn)品，有些人可能因?yàn)殚L期靜音他沒有機(jī)會接觸到這個(gè)新設(shè)計(jì)，但它是一個(gè)能帶給人驚喜和溫暖的東西。

五、MIUI的設(shè)計(jì)理念是什么？

有些人可能會覺得設(shè)計(jì)是一個(gè)偏感性的、依賴審美的東西，但是對于一個(gè)好的系統(tǒng)設(shè)計(jì)，我會從視覺、動效、交互、字體、音效，五個(gè)維度的去衡量它的完善程度。

我們用一個(gè)人來做類比。視覺，就是感官層面的，比如說你見到一個(gè)人會說：這個(gè)人很帥；第二就是交互層面的整體邏輯，就好比你跟他說話，發(fā)現(xiàn)他的腦子清楚；第三就是整個(gè)動效的層面，這個(gè)人的肢體語言很優(yōu)雅；還有字體，我們是從 MIUI8 的時(shí)候就開始做了，為了讓大家有更好的閱讀體驗(yàn)，讓人覺得你這個(gè)人很有涵養(yǎng)，這已經(jīng)深入到非常細(xì)節(jié)的層面了；最后，我們加了一個(gè)聲音的系統(tǒng)，就是你說話的時(shí)候，聲音還要好聽。MIUI 在設(shè)計(jì)上一直是往多個(gè)方面進(jìn)化，我們并不滿足于做出某個(gè)漂亮的頁面或者交互，而是追求整個(gè)體驗(yàn)層面的飽滿。

做設(shè)計(jì)過程中，我們可能會嘗試各種各樣的方案，也有靈光乍現(xiàn)的時(shí)刻，但我們會從多個(gè)維度完整地去考量這個(gè)設(shè)計(jì)成果，避免做出一些只是「看上去很美」的自嗨的東西。實(shí)際看起來、用起來、聽起來怎么樣，我們想從這幾個(gè)大的感官維度上都能達(dá)到體驗(yàn)層面的滿足。

舉一個(gè)例子：比如說之前我們?yōu)榱丝烊サ袅艘恍┙怄i的動畫，用戶一按指紋解鎖，直接進(jìn)到桌面，這種確實(shí)是非常的快，但這種感覺就像什么呢？就像你一按電梯，門就消失了，你進(jìn)了電梯，它咔一聲又關(guān)上了，是很快，但是這種觀感是不太好的。它沒有一種歡迎的意識，就只是把東西呈現(xiàn)給你。這一次我們希望把這個(gè)東西改回來，當(dāng)你進(jìn)入手機(jī)桌面的時(shí)候，圖標(biāo)應(yīng)該有個(gè)簡短的優(yōu)雅的動態(tài)，有一個(gè)進(jìn)場亮相的過程。

△ MIUI動態(tài)圖標(biāo)

MIUI 其實(shí)已經(jīng)非常流暢了，在這種地方去掉應(yīng)有的動畫，是可以快100毫秒，但這種快是沒有意義的。讓用戶舒服的看到這個(gè)東西，這才是整個(gè)體驗(yàn)的核心。所以我們這次就定下一個(gè)目標(biāo)，和工程團(tuán)隊(duì)一起，把這種為快而快的東西給它削弱，用戶要的是更優(yōu)雅的體驗(yàn)，而不是那種無感知的快100毫秒。

這個(gè)事情說起來不大，但其實(shí)是一種理念層面的進(jìn)步，大家已經(jīng)從那種無意義的純數(shù)據(jù)比拼里解脫出來，更注意到整個(gè)體驗(yàn)層面。我們這次會把上面說的進(jìn)場動畫加進(jìn)來，能讓用戶點(diǎn)亮屏幕的時(shí)候感覺到更加的舒服，能夠感覺整個(gè)系統(tǒng)的「肢體語言」更加優(yōu)雅。

六、對于MIUI 11的展望？

之前的非全面屏?xí)r代，手機(jī)屏幕在16:9的形態(tài)下，UX設(shè)計(jì)上其實(shí)已經(jīng)極度成熟。手機(jī)的很多功能和設(shè)計(jì)的出新，很大程度上都是在迎合一些小眾的需求，可能一部分人覺得很喜歡這個(gè)設(shè)計(jì)，但它并不普適。

全面屏手機(jī)的出現(xiàn)又將設(shè)計(jì)師的注意力從這些小眾需求拉回到了一個(gè)大眾需求：怎么在全面屏手機(jī)上做出更好的體驗(yàn)。因?yàn)橹悄苁謾C(jī)用戶遲早會將手中的設(shè)備換成全面屏設(shè)備，手機(jī)廠商如果只是簡單地把原來16:9的畫面改成18:9，而不根據(jù)硬件特點(diǎn)做真正的深度定制，那就會離用戶體驗(yàn)越來越遠(yuǎn)。

手機(jī)系統(tǒng)的未來我們認(rèn)為也會是這樣的趨勢，軟硬件的結(jié)合會更加的緊密。在這一點(diǎn)上，MIUI 有這個(gè)意識，也有行動，目前是走在比較前面的。

MIUI10 落版后，我們也在考慮往這個(gè)方向去深化。我們不會特意去考慮11跟10之間非得做出什么大的區(qū)別來，相比這個(gè)，我們更關(guān)心的問題是：什么是用戶真正需要的設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(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ù)。

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

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

上周，我的一位英雄（@johnmaeda）發(fā)推文說“設(shè)計(jì)一直是關(guān)于膚淺和實(shí)質(zhì)的。”我認(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é)的教授，他們在我們的設(shè)計(jì)工作室中。他正在研究野外設(shè)計(jì)師，就像人類學(xué)家在非洲研究一個(gè)不知名的部落一樣。他研究的主題之一是設(shè)計(jì)過程。我總是覺得這是一個(gè)有趣的話題，這就是我對Chimero的書的原因：它從設(shè)計(jì)師的角度講述了設(shè)計(jì)過程。他的內(nèi)部人士認(rèn)為這是一場認(rèn)可的盛宴。關(guān)于他對設(shè)計(jì)過程的描述最讓我困惑的是清晰思考的想法。奇美羅對他的工作方式有一個(gè)有趣的描述：他只是“出現(xiàn)”并讓“語境說出它需要的東西”。他說“設(shè)計(jì)師的工作就是找出一種方法讓問題表明它是真實(shí)的自我，這樣他才能回應(yīng)已經(jīng)出現(xiàn)的真相。

設(shè)計(jì)師通過詢問原因來工作。問為什么“更高水平的研究，一個(gè)調(diào)查所使用的動機(jī)和思維過程，以便它們可以應(yīng)用于我們自己的情況?！睘槭裁纯雌饋砀?。它將目前的解決方案與用戶的需求相結(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)行思考。有些人可能會稱這種特殊形式的哲學(xué)設(shè)計(jì)思維。當(dāng)我們將設(shè)計(jì)定義為哲學(xué)的一個(gè)分支時(shí)，下一步就是質(zhì)疑這個(gè)世界上一些偉大的思想家，看看他們對設(shè)計(jì)的看法。對我來說，Martin Heidegger有兩個(gè)哲學(xué)文本定義了良好的設(shè)計(jì)。

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

第一部是Der Ursprung des Kunstwerkes（藝術(shù)作品的起源），其中海德格爾思考什么使藝術(shù)品成為藝術(shù)品。簡而言之，他認(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)然，美麗很重要，因?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é)會生活。在這篇關(guān)于建筑的文章中，他將設(shè)計(jì)與對人類基本條件的理解聯(lián)系起來。他敦促設(shè)計(jì)師與他們的主題聯(lián)系，實(shí)現(xiàn)他們的主題，而不是以抽象的方式看待它。對于建筑師來說，很容易愛上圖紙，抽象概念和模型。但是如果沒有與你設(shè)計(jì)的生活有真正的聯(lián)系，它就會變得毫無用處。就像建筑一樣，互聯(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

1. 用氣泡元素營造視覺焦點(diǎn)

在簡約清爽的背景之下，使用色彩鮮艷，形體自然隨性的氣泡元素來創(chuàng)造視覺焦點(diǎn)，氣泡和需要凸顯的圖片素材結(jié)合到一起，有目的地將用戶的視線吸引到關(guān)鍵的元素上，最終起到提升轉(zhuǎn)化率的目的。

2. 用簡約線性的氣泡動畫來驅(qū)動交互

使用幾何特征的簡約氣泡元素來構(gòu)造動畫，是一種成本比較低的做法，動畫會隨著用戶滾動頁面，而有趨向地發(fā)生轉(zhuǎn)變，從而促使用戶不斷地滾動，向下瀏覽查看更多內(nèi)容，這種設(shè)計(jì)同樣能夠提升網(wǎng)頁的參與度。

3. 用不規(guī)則的涂鴉斑點(diǎn)強(qiáng)化品牌

斑斕的背景和強(qiáng)對比的涂鴉斑點(diǎn)，同樣是一種引導(dǎo)視覺的策略，但是它更重要地是通過這種風(fēng)格來營造狂野粗糲的品牌氣質(zhì)，幫助用戶更快更直接地 Get 到品牌的獨(dú)特氛圍和神髓。

4. 用液態(tài)色塊拼貼來傳達(dá)時(shí)尚感

充滿流動感的色塊和斑點(diǎn)元素類似，同樣充滿了不受控制的自然氣場，充滿對比度的多彩配色則賦予了這些液態(tài)感十足的色彩拼貼以時(shí)尚的氣質(zhì)，從而營造出獨(dú)樹一幟的視覺體驗(yàn)。

5. 用漸變色氣泡來營造立體感

微妙的漸變色常常能夠賦予元素以一定的3D立體感，多變的氣泡元素如果擁有漸變色會仿佛擁有景深和層次一般，讓頁面更加立體。當(dāng)然，如果一開始使用動畫軟件來建模，渲染生成動畫，那么就更加到位了。

6. 使用扁平化氣泡元素渲染現(xiàn)代感

扁平化設(shè)計(jì)依然是目前的主流，在許多純粹扁平化的頁面中，氣泡類的元素能夠起到很好的點(diǎn)綴作用，讓背景不再單調(diào)，幾何感十足的氣泡邊緣和清爽的色彩，能夠很好的賦予頁面足夠的現(xiàn)代感，干凈而具有當(dāng)下的時(shí)代感。

7. 作為圖片載體給人獨(dú)特的印象

氣泡類元素本身的形體都是非常規(guī)的幾何元素，因此它們相比于常見的圓形、矩形、三角形，出現(xiàn)的機(jī)率更低，當(dāng)它作為圖片的載體的時(shí)候，這種獨(dú)特的視覺體驗(yàn)更容易給用戶留下印象，四兩撥千斤。

8. 用氣泡動畫來創(chuàng)造趣味性

氣泡動畫可以擁有冷淡的科技感，也可以軟萌可愛充滿趣味感，這取決于動畫的設(shè)計(jì)者怎么做。在頁面中使用有趣的氣泡動畫能夠讓頁面更加令人親近，讓用戶在加載和轉(zhuǎn)場的時(shí)候會心一笑，記住你的設(shè)計(jì)。

9. 用氣泡動畫來構(gòu)建品牌LOGO

這同樣是一種巧妙地吸引用戶同時(shí)宣傳品牌的手法，當(dāng)然，前提是你的品牌 LOGO 適合使用這樣的表現(xiàn)方式。氣泡動畫富有活力，有生命力，這一點(diǎn)最終能夠加持在品牌上，同時(shí)能夠給用戶留下更加深刻的記憶。

結(jié)語

有機(jī)感是近兩年來比較熱的一個(gè)設(shè)計(jì)方向，但是它的呈現(xiàn)方式并沒有那么具體，而諸如斑點(diǎn)和氣泡這樣的元素是呈現(xiàn)有機(jī)感最常用的方式，加上新的設(shè)計(jì)工具的普及，設(shè)計(jì)師開始使用這些元素來創(chuàng)造富有有機(jī)感的設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

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

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

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

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

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

在手機(jī)這樣的移動端設(shè)備上，按照 Material Design 的建議，動效時(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毫秒之間。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

緩動

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

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

勻速直線運(yùn)動

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

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

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

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

緩動加速曲線

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

△ 加速曲線

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

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

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

緩動減速曲線

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

△ 減速曲線

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

△ 減速曲線案例

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

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

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

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

△ 對稱和非對稱運(yùn)動的差異

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

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

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

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

從這些案例當(dāng)中，可以看出許多動效的初學(xué)者對于運(yùn)動規(guī)則的了解還不足。比如下面的這個(gè)動效，元素隨著減速曲線出現(xiàn)，然后使用標(biāo)準(zhǔn)緩動曲線消失。根據(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)事先確定的。

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

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

界面動效的編排

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

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

均等交互

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

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

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

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

△ 沿著對角線加載

從屬交互

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

篩選組件概述

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

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

01

位于 Tab 欄的篩選組件

組件樣式

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

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

樣式分析

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

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

案例一

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

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

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

案例二

案例來源于淘寶App

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

案例三

案例來源于嗶哩嗶哩App

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

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

02

底部按鈕型篩選組件

組件樣式

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

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

樣式分析

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

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

案例一

案例來源于旅游類App Expedia

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

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

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

2、篩選后，篩選按鈕處會顯示已選擇的篩選類別數(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ū)的縱向空間，比底部按鈕型篩選組件的層級要弱一些。但當(dāng)用戶需要操作時(shí)，它的位置也便于用戶點(diǎn)擊。

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

案例一

案例來源于dribbble

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

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

案例二

案例來源于dribbble

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

案例三

案例來源于dribbble

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

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

04

舉一反三

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

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

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

進(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是對整頁的篩選，多為不同維度，而這里只有時(shí)段一個(gè)維度。

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

方案二，底部按鈕形式

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

方案三，浮層按鈕形式

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

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

05

小結(jié)

以上內(nèi)容是我對常見篩選組件的思考，每一種樣式都有其優(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.teruid.com )是一家專注而深入的界面設(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

令人上癮的數(shù)字內(nèi)容，讓我們一刻都離不開智能手機(jī)，從某種意義上，它徹底改變了我們的生活，工作，甚至思考的方式?，F(xiàn)如今，越來越多的人開始嘗試戒除令人上癮的智能手機(jī)，尋找更加健康自由的人機(jī)關(guān)系。根據(jù)今天的調(diào)研，過度使用智能手機(jī)，確實(shí)會有一定機(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ī)會能和他面對面地一起聊一聊他的過去，以及他留給蘋果的那些遺產(chǎn)。

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

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

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

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

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

「其實(shí)，在蘋果公司內(nèi)部，想要大家都理解分心是一個(gè)影響用戶生活的問題，還挺難的。喬布斯倒是很能理解的，但是公司內(nèi)其他的同事，對于用戶對于手機(jī)的控制權(quán)多少，其實(shí)大家還存在不少爭議。我和一部分同事倡議給用戶更多的掌控權(quán)，不過這個(gè)事情對產(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)閉才行。因此，對于那些熟練使用iPhone 的重度用戶而言，確實(shí)是可以如臂使指地掌控這臺設(shè)備，但是對于更換壁紙都不太會的用戶，想要搞清楚iPhone ，讓它如意隨心，真的是難如登天。他們沒有這樣的控制能力。」

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

「你可能會在一個(gè)下午安裝十幾個(gè)不同的新應(yīng)用，然后你不停地會收到提醒和通知，是否要授權(quán)使用相機(jī)，是否要授權(quán)獲取你的位置，是否允許它給你發(fā)送通知，每個(gè)都要做決定。稍后，你可能會發(fā)現(xiàn)，F(xiàn)acebook 一直在后臺給你推送信息。再之后你就會發(fā)現(xiàn)你有睡眠障礙了，總會有信息大半夜地推送到你的眼前，讓你無法安生地休息。實(shí)際上，借助請勿打擾的功能，你可以一早上再查看它們。這套系統(tǒng)足夠智能，能夠判斷出哪些應(yīng)用之前就已經(jīng)獲得了許可，哪些仍然在后臺獲取數(shù)據(jù)，哪些通知實(shí)際上你并不關(guān)心。所以，這套系統(tǒng)其實(shí)是會選擇更加恰當(dāng)?shù)臅r(shí)機(jī)和正確的方式來建立用戶和手機(jī)之間的對話和關(guān)系，手機(jī)會詢問用戶，你真的需要這些通知嗎？或者是，你真的需要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è)局面之下，蘋果沒有選擇的余地，必須對于輿論有回應(yīng)。這對于每個(gè)人都是好事，因?yàn)橛脩艉退麄兊暮⒆佣家虼四軌颢@得更好的產(chǎn)品。但是這是否是最好的產(chǎn)品？當(dāng)然算不上，因?yàn)楝F(xiàn)在的iOS系統(tǒng)是為了應(yīng)對輿論和負(fù)面新聞而設(shè)計(jì)的，設(shè)計(jì)的意圖并不對。如果是蘋果主動作出這樣的決策，才算得上是好產(chǎn)品。」

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

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

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

「我的意思并不是說這樣做很重要，或者說我推薦這么做，對于人和手機(jī)之間的關(guān)系，每個(gè)人都不一樣，處理方式也都很個(gè)人。對于如何處理自己和手機(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)域，都一定會遭遇一大堆的問題。按鈕和旋鈕的設(shè)計(jì)是需要考慮到人體工程學(xué)的問題，點(diǎn)擊和手勢的交互則牽涉到更具體的壓感和硬件上問題。任何人和機(jī)器之間的交互，都一定都會遭遇不自然的狀況和問題，就這么簡單。身為設(shè)計(jì)師，需要足夠的預(yù)見性，才能真正領(lǐng)先于用戶，預(yù)測到可能會遭遇的問題。」

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

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

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

當(dāng)他找到工程部的 Boris 的時(shí)候，他正在樓道里刷推特摸魚?！赣檬裁戳鞒?？那還用問，當(dāng)然是敏捷啦。這個(gè)最好，過程清晰簡單，現(xiàn)在沒有什么辦法比敏捷更好處理各種數(shù)字產(chǎn)品的設(shè)計(jì)和開發(fā)啦?！菇又珺oris 去隔壁會議室拖出一個(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è)傾訴的對象，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)，操作起來也簡單，很少會發(fā)生混亂。」說著，F(xiàn)loris 從辦公室的書架上摸出一堆文檔壓到 Jimmy 手上?！改阋臇|西都在里面，祝你好運(yùn)。如果你需要任何幫助，請?jiān)诠驳钠脚_上跟我約時(shí)間，我們可以開個(gè)小會解決一下問題~」說著 Floris 回到自己的桌子邊，開始繼續(xù)干活兒。

瀑布模型（Waterfall Model） 是一個(gè)項(xiàng)目開發(fā)架構(gòu)，開發(fā)過程是通過設(shè)計(jì)一系列階段順序展開的，從系統(tǒng)需求分析開始直到產(chǎn)品發(fā)布和維護(hù)，每個(gè)階段都會產(chǎn)生循環(huán)反饋，因此，如果有信息未被覆蓋或者發(fā)現(xiàn)了問題，那么最好「返回」上一個(gè)階段并進(jìn)行適當(dāng)?shù)男薷?，?xiàng)目開發(fā)進(jìn)程從一個(gè)階段「流動」到下一個(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)敞開著。這次有啥問題，看看我能怎么幫到你。」Sarah 聽到聲音就知道是誰，一邊放下手頭的文檔，一邊抬頭笑著看到略顯局促的 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，沒事兒，我們總會在某些時(shí)候碰到問題，別人的指導(dǎo)總會派上用場。」

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

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

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

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

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

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

承諾是關(guān)鍵

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

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

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

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

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

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

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

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

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

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

「如果你像我說的一樣，后退一步來看問題，就會意識到，流程背后所存在的問題，并不是流程本身的優(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)在，你可能會問自己，如果你的項(xiàng)目出現(xiàn)了問題，會怎么辦？那么首先，對于你想要達(dá)成的目標(biāo)，需要一個(gè)清晰的愿景或者想法。除非你的愿景和目標(biāo)足夠清晰，否則你是沒有辦法來提供承諾的。在項(xiàng)目開始之前，這個(gè)愿景/目標(biāo)必須有足夠清晰的定義，是否能夠達(dá)成，難度高低，是否具備可執(zhí)行性，否則在過程中一定會有所偏離。在這里，給你幾個(gè)小貼士，務(wù)必要記?。?

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

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

需要始終牢記的事情

Jimmy 的腦中仍然在反思 Sarah 剛剛說過的話，下意識回復(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é)后端，這樣足矣。」Sarah 回答道。

「那么我應(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í)間之后要交付的東西。這不僅是對上層的責(zé)任，對于你和你的項(xiàng)目而言，也是一個(gè)可供奮斗的目標(biāo)和清晰的邊界。你的項(xiàng)目看起來并不算小，這個(gè)人員工作量之下，可能需要花費(fèi)一個(gè)月的時(shí)間來進(jìn)行開發(fā)。但是請記住，在一個(gè)月的時(shí)間內(nèi)，你必須提交出一個(gè)可用的產(chǎn)品出來。從我的角度上來看，我是不允許增加預(yù)算和時(shí)間的。約束對雙方其實(shí)都是有利的?！筍arah 說道。

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

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

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

結(jié)語

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

我注意到，有人把產(chǎn)品所使用的敏捷和瀑布模型這類流程稱為「項(xiàng)目的上帝」。但是實(shí)際上，不管哪種流程，依然會陷入無休止的扯皮會議和無意義的辯論，出現(xiàn)了問題之后，開始修改時(shí)間表。「我們無法按時(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.teruid.com )是一家專注而深入的界面設(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(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ù)。