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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

緩動(dòng)

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

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

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

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

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

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

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

緩動(dòng)加速曲線

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

△ 加速曲線

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

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

動(dòng)畫曲線有助于正確傳達(dá)訊息，甚至表達(dá)情緒和感覺。在下面的案例當(dāng)中，我們可以看每個(gè)元素的運(yùn)動(dòng)位移是完全一樣的，所消耗的總時(shí)長(zhǎng)也是一樣的，但是運(yùn)動(dòng)的速率變化是不同的，這一點(diǎn)也體現(xiàn)在曲線上，所表現(xiàn)出來(lái)的情緒也不同。當(dāng)然，通過(guò)調(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ì)稱的增速和減速的過(guò)程，讓動(dòng)效看起來(lái)更加真實(shí)。同時(shí)大家會(huì)更加在意運(yùn)動(dòng)的結(jié)果，曲線的末端，也就是運(yùn)動(dòng)結(jié)束的過(guò)程最好進(jìn)行適當(dāng)?shù)膹?qiáng)調(diào)，換句話說(shuō)就是減速過(guò)程持續(xù)的時(shí)長(zhǎng)最好超過(guò)開始加速的時(shí)長(zhǎng)，用戶將會(huì)更加清楚地觀察到運(yùn)動(dòng)的最終結(jié)果，從而更好地明白運(yùn)動(dòng)的終止?fàn)顟B(tài)。

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

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

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

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

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

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

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

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

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

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

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

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

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

均等交互

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

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

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

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

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

從屬交互

從屬交互指的是使用一個(gè)中心對(duì)象作為主體，來(lái)吸引用戶的注意力，而其他的元素從屬于它來(lái)逐步呈現(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)該定義清楚誰(shuí)為主，誰(shuí)是中心，并且盡量按照從屬關(guān)系來(lái)次第呈現(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)，這樣有助于讓它看起來(lái)更加自然。所謂「不成比例」地變化指的是元素的長(zhǎng)和寬的變化并不是按照相同比例來(lái)縮放或者變化的，換句話來(lái)說(shuō)，變化的速度也不一樣。（比如，方形變成矩形）

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

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

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

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

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

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

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

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

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

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

結(jié)語(yǔ)

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

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

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

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

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

篩選組件概述

篩選組件的作用是幫助人們?cè)诿鎸?duì)大量信息時(shí)，通過(guò)更的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及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欄增加篩選組件來(lái)提供更詳細(xì)的篩選能力。而這里的篩選組件較于Tab欄其他條件優(yōu)先級(jí)較低，屏幕右側(cè)為視覺薄弱區(qū)域，這也解釋了為什么大多數(shù)Tab欄的篩選組件都位于最右側(cè)。

案例一

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

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

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

案例二

案例來(lái)源于淘寶App

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

案例三

案例來(lái)源于嗶哩嗶哩App

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

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

02

底部按鈕型篩選組件

組件樣式

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

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

樣式分析

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

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

案例一

案例來(lái)源于旅游類App Expedia

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

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

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

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

案例二

案例來(lái)源于dribbble

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

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

03

浮層按鈕型篩選組件

組件樣式

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

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

樣式分析

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

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

案例一

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

案例二

案例來(lái)源于dribbble

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

案例三

案例來(lái)源于dribbble

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

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

04

舉一反三

接下來(lái)我們拿個(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)入此頁(yè)，根據(jù)用戶使用需求判斷“1小時(shí)”基本滿足用戶查看數(shù)據(jù)的需求，默認(rèn)展示“1小時(shí)”的篩選。因此篩選組件此場(chǎng)景使用“1小時(shí)”時(shí)段基本滿足用戶查看數(shù)據(jù)的需求，可判斷用戶使用篩選組件的頻次不高。

方案解析

方案一，Tab欄形式

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

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

方案二，底部按鈕形式

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

方案三，浮層按鈕形式

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

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

05

小結(jié)

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

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

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

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

選擇器

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

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

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

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

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

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

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

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

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

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

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

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

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

「iOS 12 中內(nèi)置的這套防干擾的控制系統(tǒng)可以更加系統(tǒng)地監(jiān)控手機(jī)各方面的功能和用量，它實(shí)際上是從iOS 6 時(shí)代的請(qǐng)勿打擾的功能拓展而來(lái)的。但是它在現(xiàn)在被推出來(lái)真正的原因是有太多的用戶為此而抱怨，而媒體和用戶都發(fā)文吐槽，在呼聲和壓力之下，它們最終在iOS 12 中呈現(xiàn)了出來(lái)。這個(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ì)于用戶而言，可以很輕松的直接懟蘋果，說(shuō)它沒有做對(duì)的事情。但是身為其中的設(shè)計(jì)師，要平衡各方面的需求也壓力，經(jīng)常會(huì)進(jìn)退維谷。有些用戶因?yàn)閕Phone 的一些功能，受到了負(fù)面的影響，有些人受到的影響比另一部分人更多。但是身為設(shè)計(jì)師，一個(gè)受到各方面制衡的設(shè)計(jì)師，即使是作出了改變，在很多時(shí)候也遠(yuǎn)遠(yuǎn)不夠。至少在我看來(lái)，現(xiàn)在的改變還不夠大。」

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

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

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

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

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

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

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

前言

<a href="#" id="username" data-type="text" data-pk="1">awesome</a> <script> $(function(){ $('#username').editable({
        url: '/post',
        title: 'Enter username' });
}); </script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

    

$('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true, //是否顯示行間隔色 sidePagination: "client", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*） showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè) pageSize: 10, //每頁(yè)的記錄行數(shù)（*） pageList: [10, 15, 20, 25], //可供選擇的每頁(yè)的行數(shù)（*） uniqueId: "id", //每一行的唯一標(biāo)識(shí)，一般為主鍵列 showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //導(dǎo)出文件類型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                success: function (data, status) { if (status == "success") {
                        alert("編輯成功");
                    }
                },
                error: function () { alert("Error");
                },
                complete: function () { }
            });
        },
        data: [{
            id: 1,
            name: '張三',
            sex: '男',
            time: '2017-08-09' }, {
            id: 2,
            name: '王五',
            sex: '女',
            time: '2017-08-09' }, {
            id: 3,
            name: '李四',
            sex: '男',
            time: '2017-08-09' }, {
            id: 4,
            name: '楊朝來(lái)',
            sex: '男',
            time: '2017-08-09' }, {
            id: 5,
            name: '蔣平',
            sex: '男',
            time: '2017-08-09' }, {
            id: 6,
            name: '唐燦華',
            sex: '男',
            time: '2017-08-09' }],
        columns: [{
            field: 'id',
            title: '序號(hào)' }, {
            field: 'name',
            title: '姓名',
            editable: {
                type: 'text',  
                validate: function (value) { if ($.trim(value) == '') { return '姓名不能為空!';  
                    }  
                }
            } 
        }, {
            field: 'sex',
            title: '性別',
            editable: {
                type: 'select',
                pk: 1,
                source: [
                    {value: 1, text: '男'},
                    {value: 2, text: '女'},
                ]
            }
        },  {
            field: 'time',
            title: '時(shí)間',
            editable: {
                type: 'date',
                format: 'yyyy-mm-dd',    
                viewformat: 'yyyy-mm-dd',    
                datepicker: {
                    weekStart: 1 }
            } 
        }]
    });
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

        

            49
        

        

            50
        

        

            51
        

        

            52
        

        

            53
        

        

            54
        

        

            55
        

        

            56
        

        

            57
        

        

            58
        

        

            59
        

        

            60
        

        

            61
        

        

            62
        

        

            63
        

        

            64
        

        

            65
        

        

            66
        

        

            67
        

        

            68
        

        

            69
        

        

            70
        

        

            71
        

        

            72
        

        

            73
        

        

            74
        

        

            75
        

        

            76
        

        

            77
        

        

            78
        

        

            79
        

        

            80
        

        

            81
        

        

            82
        

        

            83
        

        

            84
        

        

            85
        

        

            86
        

        

            87
        

        

            88
        

        

            89
        

        

            90
        

        

            91
        

        

            92
        

        

            93
        

        

            94
        

        

            95
        

        

            96
        

        

            97
        

        

            98
        

        

            99
        

        

            100
        

        

            101
        

    

column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;

                $.each(column, processDataOptions);

                $.each(editableOptions, function(key, value) {
                    editableDataMarkup.push(' ' + key + '="' + value + '"');
                }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) {
                    _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
                } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                        editableDataMarkup.join(''), '>' + '</a>' ].join('');
                } else { return _dont_edit_formatter;
                }

            };
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

    

column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;

                $.each(column, processDataOptions);

                $.each(editableOptions, function(key, value) {
                    editableDataMarkup.push(' ' + key + '="' + value + '"');
                }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) { var process = column.editable.noeditFormatter(value, row, index); if(!process.hasOwnProperty('class')){
                        process.class = '';
                    } if(!process.hasOwnProperty('style')){
                        process.style = '';
                    }
                    _dont_edit_formatter = ['<a href="javascript:void(0)"', ' data-name="'+process.filed+'"', ' data-pk="1"', ' data-value="' + process.value + '"', ' class="'+process.class+'" style="'+process.style+'"', '>' + process.value + '</a>' ].join('');
                } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                        editableDataMarkup.join(''), '>' + value + '</a>' ].join('');
                } else { return _dont_edit_formatter;
                }

            };
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

    

$('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true, //是否顯示行間隔色 sidePagination: "client", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*） showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè) pageSize: 10, //每頁(yè)的記錄行數(shù)（*） pageList: [10, 15, 20, 25], //可供選擇的每頁(yè)的行數(shù)（*） uniqueId: "id", //每一行的唯一標(biāo)識(shí)，一般為主鍵列 showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //導(dǎo)出文件類型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                success: function (data, status) { if (status == "success") {
                        alert("編輯成功");
                    }
                },
                error: function () { alert("Error");
                },
                complete: function () { }
            });
        }, //      onEditableHidden: function(field, row, $el, reason) { // 當(dāng)編輯狀態(tài)被隱藏時(shí)觸發(fā) //          if(reason === 'save') { //              var $td = $el.closest('tr').children(); //          //    $td.eq(-1).html((row.price*row.number).toFixed(2)); //          //    $el.closest('tr').next().find('.editable').editable('show'); //編輯狀態(tài)向下一行移動(dòng) //          } else if(reason === 'nochange') { //              $el.closest('tr').next().find('.editable').editable('show'); //          } //      }, data: [{
            id: 1,
            name: '張三',
            sex: '男',
            time: '2017-08-09' }, {
            id: 2,
            name: '王五',
            sex: '女',
            time: '2017-08-09' }, {
            id: 3,
            name: '李四',
            sex: '男',
            time: '2017-08-09' }, {
            id: 4,
            name: '楊朝來(lái)',
            sex: '男',
            time: '2017-08-09' }, {
            id: 5,
            name: '蔣平',
            sex: '男',
            time: '2017-08-09' }, {
            id: 6,
            name: '唐燦華',
            sex: '男',
            time: '2017-08-09' }, {
            id: 7,
            name: '馬達(dá)',
            sex: '男',
            time: '2017-08-09' }, {
            id: 8,
            name: '趙小雪',
            sex: '女',
            time: '2017-08-09' }, {
            id: 9,
            name: '薛文泉',
            sex: '男',
            time: '2017-08-09' }, {
            id: 10,
            name: '丁建',
            sex: '男',
            time: '2017-08-09' }, {
            id: 11,
            name: '王麗',
            sex: '女',
            time: '2017-08-09' }],
        columns: [{
            field: 'id',
            title: '序號(hào)' }, {
            field: 'name',
            title: '姓名',
            editable: {
                type: 'text',  
                validate: function (value) { if ($.trim(value) == '') { return '姓名不能為空!';  
                    }  
                }
            } 
        }, {
            field: 'sex',
            title: '性別',
            editable: {
                type: 'select',
                pk: 1,
                source: [
                    {value: 1, text: '男'},
                    {value: 2, text: '女'},
                ],
                noeditFormatter: function (value,row,index) { var result={filed:"sex",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                }
            }
        },  {
            field: 'time',
            title: '時(shí)間',
            editable: {
                type: 'date',
                format: 'yyyy-mm-dd',    
                viewformat: 'yyyy-mm-dd',    
                datepicker: {
                    weekStart: 1 },
                noeditFormatter: function (value,row,index) { var result={filed:"time",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                }
            } 
        }]
    });
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

        

            49
        

        

            50
        

        

            51
        

        

            52
        

        

            53
        

        

            54
        

        

            55
        

        

            56
        

        

            57
        

        

            58
        

        

            59
        

        

            60
        

        

            61
        

        

            62
        

        

            63
        

        

            64
        

        

            65
        

        

            66
        

        

            67
        

        

            68
        

        

            69
        

        

            70
        

        

            71
        

        

            72
        

        

            73
        

        

            74
        

        

            75
        

        

            76
        

        

            77
        

        

            78
        

        

            79
        

        

            80
        

        

            81
        

        

            82
        

        

            83
        

        

            84
        

        

            85
        

        

            86
        

        

            87
        

        

            88
        

        

            89
        

        

            90
        

        

            91
        

        

            92
        

        

            93
        

        

            94
        

        

            95
        

        

            96
        

        

            97
        

        

            98
        

        

            99
        

        

            100
        

        

            101
        

        

            102
        

        

            103
        

        

            104
        

        

            105
        

        

            106
        

        

            107
        

        

            108
        

        

            109
        

        

            110
        

        

            111
        

        

            112
        

        

            113
        

        

            114
        

        

            115
        

        

            116
        

        

            117
        

        

            118
        

        

            119
        

        

            120
        

        

            121
        

        

            122
        

        

            123
        

        

            124
        

        

            125
        

        

            126
        

        

            127
        

        

            128
        

        

            129
        

        

            130
        

        

            131
        

        

            132
        

        

            133
        

        

            134
        

        

            135
        

        

            136
        

        

            137
        

        

            138
        

        

            139
        

        

            140
        

        

            141
        

        

            142
        

        

            143
        

    

<link href="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"> <script src="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/js/bootstrap-editable.js"></script> <script src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/editable/bootstrap-table-editable.js"></script>
    


        

            1
        

        

            2
        

        

            3
        

    

看看蘋果App Store 10年來(lái)那些應(yīng)用設(shè)計(jì)演變引領(lǐng)的潮流

UI巴巴 2018-07-17 21:53:05

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

很少有創(chuàng)新的事物能像手機(jī)應(yīng)用一樣在改變我們的生活方式，讓我們與周圍的世界互動(dòng)。最開始的那500個(gè)開發(fā)者很幸運(yùn)的有機(jī)會(huì)為未來(lái)數(shù)百萬(wàn)個(gè)應(yīng)用程序提供設(shè)計(jì)方向和交互方式，為了慶祝App Store成立10周年，讓我們來(lái)研究一下10個(gè)原創(chuàng)的App Store應(yīng)用程序的界面設(shè)計(jì)演變。

一、應(yīng)用程序

關(guān)于應(yīng)用程序這部分，我們關(guān)注的10款應(yīng)用到今天為止都還能下載的，有些近幾天都還在更新。雖然很多應(yīng)用提供了iPad版，但是這次我們主要研究iphone版的界面設(shè)計(jì)的變化。

1，iTunes Remote

Apple通過(guò)在App Store上發(fā)布一些自己的軟件，為其他開發(fā)人員樹立了榜樣。Apple最初創(chuàng)建的應(yīng)用有兩個(gè)：Texas Hold'em（德州撲克游戲）和Remote，Texas Hold'em在2011年下架了。而Remote今天還在，Remote是一個(gè)簡(jiǎn)單實(shí)用的應(yīng)用，通過(guò)Wi-Fi控制Mac或Apple TV的iTunes庫(kù)的播放。

從一開始，Remote的設(shè)計(jì)就受到iPhone iPod應(yīng)用程序（今天稱為音樂(lè)）的界面和感覺的影響很大。事實(shí)上，正在播放的視圖在界面上基本相同。2.0版帶來(lái)了由Louie Mantia設(shè)計(jì)的新圖標(biāo)。這兩個(gè)應(yīng)用程序從iOS 6開始，變得不一樣，圖標(biāo)再次更新以匹配Mac上iTunes 11的設(shè)計(jì)風(fēng)格。

Remote 的一次全新設(shè)計(jì)發(fā)生在iOS 7，與音樂(lè)應(yīng)用程序的鮮明白色主題不同，Remote采用了深色的模糊背景。并與專輯封面的顏色融合。2016年，Apple發(fā)布了針對(duì)第4代Apple TV 的Apple TV Remote應(yīng)用程序，這是改變似乎要取代Remote。但不久之后，Remote被重命名為iTunes Remote，該應(yīng)用程序一直保持原來(lái)的界面繼續(xù)可供下載，直到今年6月，Remote才更新了全新設(shè)計(jì)并支持iPhone X。

2，F(xiàn)acebook

與iTunes Remote的更新相比，F(xiàn)acebook在過(guò)去時(shí)間不斷改進(jìn)設(shè)計(jì)，而且修改的頻率越來(lái)越高，算上小修小補(bǔ)，F(xiàn)acebook都可以出書了。我們選了其中比較重大的8個(gè)變化。

Facebook在2017年10月就開始在iPhone上使用了，那時(shí)候是作為網(wǎng)頁(yè)版應(yīng)用。如果不顯示頂部的藍(lán)色導(dǎo)航，App Store中Facebook 1.0版幾乎無(wú)法識(shí)別。而且圖標(biāo)是用人物頭像，而不是標(biāo)志性的“f”。底部導(dǎo)航為：主頁(yè)，個(gè)人資料，朋友，聊天和收件箱。2.0版基于相同的設(shè)計(jì)概念，在主標(biāo)題欄下添加了二級(jí)導(dǎo)航。

Facebook 3.0于2009年7月首次亮相，并推出了3×3網(wǎng)格圖標(biāo)，以幫助解決應(yīng)用程序的氣球?qū)Ш絾?wèn)題。早期的屏幕截圖顯示了一個(gè)完全藍(lán)色的平鋪網(wǎng)格，但這個(gè)設(shè)計(jì)從未在應(yīng)用程序的公共版本中發(fā)布。

2011年10月，F(xiàn)acebook 4.0 采用了漢堡包導(dǎo)航。在第4版之后，F(xiàn)acebook的設(shè)計(jì)更新變得更頻繁了。應(yīng)用程序的界面開始更快地迭代，并且設(shè)計(jì)的修改通常是逐步推出而不是推倒重來(lái)。

2013年4月，F(xiàn)acebook在iOS應(yīng)用程序中使用“Chat Heads ”，允許用戶一邊爪機(jī)一邊聊天。

Facebook的設(shè)計(jì)挑戰(zhàn)主要來(lái)自其億級(jí)別的用戶基數(shù)。與許多小型應(yīng)用程序不同，F(xiàn)acebook必須在各平臺(tái)上為大量的用戶提供一致的體驗(yàn)，而不僅僅是蘋果的設(shè)備上。2017年8月的更新嘗試統(tǒng)一 iOS，Android和網(wǎng)絡(luò)上的新聞Feed 設(shè)計(jì)，其評(píng)論樣式看起來(lái)更像是Messenger對(duì)話設(shè)計(jì)。

3，Things

Things原來(lái)上Mac上的任務(wù)管理工具，所以有機(jī)會(huì)率先在iOS上出現(xiàn)。開發(fā)人員Cultured Code稱，iOS的應(yīng)用只用了1個(gè)月就開發(fā)完成，完成了一項(xiàng)不可能的任務(wù)。

Things 1.0 不能與Mac同步，而且不能標(biāo)記。下圖是早期的設(shè)計(jì)草圖。

2012年發(fā)布的2.0版本是比較大的一次更新。背景變得更干凈了。圖標(biāo)也更小巧精致有個(gè)性。

2014年的2.5版本，設(shè)計(jì)變得扁平化，顏色更淺。2017年5月發(fā)布的應(yīng)用是界面上最大的一個(gè)變化。布局差不多，但是圖標(biāo)和ui元素都重新設(shè)計(jì)。設(shè)計(jì)師Cultured Code特別強(qiáng)調(diào)了如何使用動(dòng)畫為應(yīng)用程序提供全新的感覺。重新設(shè)計(jì)的應(yīng)用獲得了2017年Apple設(shè)計(jì)獎(jiǎng)。

4，OmniFocus

App Store從一開始就提供了很多任務(wù)管理類的應(yīng)用，來(lái)自O(shè)mni公司的Things和OmniFocus是兩個(gè)重量級(jí)應(yīng)用。雖然兩個(gè)功能類似，但是兩個(gè)應(yīng)用的界面設(shè)計(jì)發(fā)展軌跡卻各有千秋。

OmniFocus for iPhone最初使用簡(jiǎn)單的桌面視圖和自定義底部導(dǎo)航，贏得了2008年Apple設(shè)計(jì)獎(jiǎng)。Omni Group在2010年6月為iPhone 4 重新設(shè)計(jì)了高清圖標(biāo)。而2011年6月開始，界面發(fā)生了重大變化，頭部多了一個(gè)日期選擇。2013年針對(duì)iOS 7的推出，設(shè)計(jì)的界面變得扁平化。新的設(shè)計(jì)依賴顏色來(lái)提升空間感。

2015年春季的app 圖標(biāo)更新使用了黑色的“??”。從2012年開始，每個(gè)圖標(biāo)都包含了彩蛋。圖標(biāo)放大，您會(huì)注意到碳纖維紋理實(shí)際上是由微小的重復(fù)Omni徽標(biāo)組成。

5，Evernote

Evernote的發(fā)展代表了很多軟件自2008年以來(lái)的設(shè)計(jì)趨勢(shì)。Evernote原來(lái)是在電腦端出現(xiàn)的，App Store推出之后，Evernote更為識(shí)別性高的大象圖標(biāo)。

像許多早期的iPhone應(yīng)用程序一樣，Evernote 1.0嚴(yán)重依賴于UIKit，大量使用高光效果。2011年重新設(shè)計(jì)了標(biāo)簽欄，按時(shí)間順序排列筆記。Evernote在2012年推出了針對(duì)iPhone 5的新界面，但是仍然使用默認(rèn)的iOS UI元素。

2012年11月，Evernote 5推出了全新的界面設(shè)計(jì)。采用了卡片式的展示方式。浮雕效果，陰影效果的運(yùn)用看上去更有深度。

2013年開始，Evernote 全面擁抱扁平化設(shè)計(jì)。每個(gè)紋理，陰影和斜角都消失了。一個(gè)明亮的從左到右的漸變條紋的導(dǎo)航欄設(shè)計(jì)，與新的無(wú)紋理圖標(biāo)上使用的顏色相匹配。2017年開始，設(shè)計(jì)又進(jìn)一步極簡(jiǎn)化。白色的頭部導(dǎo)航，黑色的底部標(biāo)簽欄。

6，eBay

eBay的設(shè)計(jì)可以說(shuō)是這篇文章中10個(gè)應(yīng)用程序中最引人注目的轉(zhuǎn)變。在WWDC 2008上，eBay特別的登臺(tái)展示。但與今天的app相比，最初的版本是相當(dāng)?shù)暮?jiǎn)陋。2009年11月，整個(gè)界面的背景換成了灰色。

一年后的2.0版本才是真正的設(shè)計(jì)，也為未來(lái)幾年的設(shè)計(jì)奠定了基礎(chǔ)。

2013年的設(shè)計(jì)像是重新披了一件外衣，而用戶體驗(yàn)跟以前保持一致。

每個(gè)版本的變化都反映了整個(gè)時(shí)代快速變化的設(shè)計(jì)趨勢(shì)，設(shè)計(jì)品味。

2015年9月，eBay 4.0 打破了常規(guī)。大多數(shù)應(yīng)用程序的功能都放在漢堡包菜單下面，只留下頂部的三個(gè)標(biāo)簽：“活動(dòng)，商店，銷售?！比缓筮@個(gè)設(shè)計(jì)很快沒有繼續(xù)了，2016年，ebay又重新恢復(fù)了原來(lái)的布局方式。如今的布局與2010年相比，又更加類似了。

7，Twitterrific

在App Store宣布之前，Craig Hockenberry和The Iconfactory為iPhone 設(shè)計(jì)了第一個(gè) Twitter客戶端。應(yīng)用是放在越獄市場(chǎng)的。

App Store上的Twitterrific 1.0從越獄版上借鑒了一些設(shè)計(jì)元素。它獲得了2008年的Apple設(shè)計(jì)獎(jiǎng)。Twitterrific也是最早使用如今越來(lái)越流行的深色主題的應(yīng)用程序之一 。但Twitterrific的設(shè)計(jì)故事更多地講述了Twitter作為服務(wù)的歷史，而不是設(shè)計(jì)趨勢(shì)。每次更新都反映了Twitter平臺(tái)的特性和功能的變化。在早期，這些功能通常由第三方自己開創(chuàng)的。

2012年，Twitterrific 5.0將所有導(dǎo)航移動(dòng)到頂部，并使用完全自定義的UI元素。類似的布局一直持續(xù)到今天。就像應(yīng)用程序的設(shè)計(jì)一樣迷人，Twitterrific的圖標(biāo)使用了現(xiàn)代化的鳥類圖像，而且從一開始到現(xiàn)在，基本上沒有什么變化。

8，Instapaper

一個(gè)專門為閱讀而設(shè)計(jì)的應(yīng)用應(yīng)該優(yōu)先考慮內(nèi)容而不是瀏覽器，因此Instapaper的設(shè)計(jì)從一開始就是非常自然簡(jiǎn)單的。但是，由于iOS本身的變化，應(yīng)用也在外觀上又一些變化。導(dǎo)航欄和按鈕樣式在iOS 6和7中都進(jìn)行了更改。

9，PCalc

PCalc的故事從App Store推出的前10年就開始了，開發(fā)人員James Thomson 于1992年為Mac 發(fā)布了應(yīng)用程序，并一直延續(xù)至今。PCalc從一開始在iOS運(yùn)行就是完全自定義的界面，并且有很多自定義的選項(xiàng)。

用于iPhone的PCalc 的第一個(gè)版本是從Mac儀表盤小部件移植而來(lái)。有光澤的按鈕和深藍(lán)色LCD面板與應(yīng)用程序的圖標(biāo)相匹配。在2008年12月，一個(gè)名為Twilight的熱門主題添加了更加詳細(xì)的圖形和類似于默認(rèn)iOS計(jì)算器的配色方案。Twilight后來(lái)更新了視網(wǎng)膜并支持更大的顯示屏。

2013年，PCalc采用了名為“Samurai”的新默認(rèn)主題和圖標(biāo)，適配iOS 7的扁平設(shè)計(jì)。PCalc的圖標(biāo)在2016年3月再次更新。自iOS 10.3發(fā)布以來(lái)，Apple已允許第三方應(yīng)用程序動(dòng)態(tài)更改其應(yīng)用程序圖標(biāo)，而無(wú)需向商店提交新版本。PCalc于2017年5月開始充分利用該功能，推出了各種各樣的備用圖標(biāo)供您選擇。

10，Yelp

與Facebook一樣，Yelp的iPhone界面多年來(lái)發(fā)生了重大變化，但由于使用了一致的導(dǎo)航欄顏色，因此品牌識(shí)別度非常高。由于與Apple Maps的深度集成，該應(yīng)用程序越來(lái)越受歡迎。

2009年8月，Yelp將一個(gè)基本的增強(qiáng)現(xiàn)實(shí)界面隱藏在iPhone應(yīng)用程序中，用于定位您周圍的企業(yè)。雖然它當(dāng)時(shí)只是一個(gè)新奇事物，但鑒于ARKit應(yīng)用程序的興起，這一功能在今天仍然具有先見之明。

2010年1月，Yelp主屏幕推出了 3×3網(wǎng)格快捷菜單。界面在風(fēng)格上不斷完善，直到整個(gè)應(yīng)用程序在2013年10月重新設(shè)計(jì)，界面更加扁平，更加突出“附近”標(biāo)簽。

Yelp的更新通過(guò)顯示與您相關(guān)的附近的內(nèi)容，展示更多基于地理位置的內(nèi)容。

二、圖標(biāo)

比較所有上面列舉的10個(gè)應(yīng)用的圖標(biāo)迭代。在過(guò)去十年中，一些圖標(biāo)保持相當(dāng)一致，只進(jìn)行了細(xì)微的改進(jìn)，其他圖標(biāo)每隔幾年就重新設(shè)計(jì)一次。

在App Store推出時(shí)，高光的圖標(biāo)設(shè)計(jì)占統(tǒng)治地位。隨著設(shè)計(jì)師和開發(fā)人員逐漸建立了圖標(biāo)設(shè)計(jì)規(guī)范和多年來(lái)的實(shí)踐經(jīng)驗(yàn)，細(xì)節(jié)和更多色彩的運(yùn)用已經(jīng)悄悄出現(xiàn)在許多圖標(biāo)中。

三、個(gè)性

早期的iPhone應(yīng)用進(jìn)入的是一個(gè)未知的世界，除了蘋果公司自己的小型股票應(yīng)用外，應(yīng)用的界面和交互方式?jīng)]有先入為主的觀念，設(shè)計(jì)師和開發(fā)人員可以完全自由地進(jìn)行實(shí)驗(yàn)。

盡管如此，許多早期的應(yīng)用看起來(lái)感覺非常相似，因?yàn)橛脩艉烷_發(fā)者都在互相測(cè)試。早期的反饋和反復(fù)試驗(yàn)很快就會(huì)影響每個(gè)應(yīng)用的發(fā)展方式。然而幾年內(nèi)，大多數(shù)應(yīng)用都找到了自己的方式，并開發(fā)出獨(dú)特的風(fēng)格和個(gè)性。隨著硬件功能的改進(jìn)，設(shè)計(jì)差異逐漸從靜態(tài)圖形轉(zhuǎn)變?yōu)閯?dòng)畫和動(dòng)態(tài)界面。

在iOS 7引入的設(shè)計(jì)規(guī)范將設(shè)計(jì)人員和開發(fā)人員又重新拉回來(lái)，許多應(yīng)用開始通過(guò)感官體驗(yàn)選擇來(lái)區(qū)分自己，而不僅僅是界面設(shè)計(jì)的不一樣。所以用戶體驗(yàn)的重要性導(dǎo)致近年來(lái)用戶體驗(yàn)（UX）設(shè)計(jì)的普及。

四、未來(lái)10年

2008年，誰(shuí)也無(wú)法準(zhǔn)確預(yù)測(cè)App Store會(huì)發(fā)展到如今的繁榮。創(chuàng)新源于創(chuàng)新，iPhone用戶的品味和習(xí)慣塑造了開發(fā)人員不斷的創(chuàng)新。

可以說(shuō)，未來(lái)是不可預(yù)測(cè)的，即將推出的iPhone和iOS版本肯定會(huì)以不可預(yù)見的方式改變應(yīng)用的格局。一個(gè)新的設(shè)計(jì)趨勢(shì)明天將席卷全球。即使在10年后，未來(lái)也是令人興奮的。

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

還在為APP UI信息圖表界面設(shè)計(jì)而犯愁嗎？來(lái)看這就夠了……

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

圖表是顯示大量信息的一種重要表達(dá)方式，良好的圖表設(shè)計(jì)能夠傳達(dá)復(fù)雜的統(tǒng)計(jì)數(shù)據(jù)，并讓用戶易于理解。圖表設(shè)計(jì)可以專門分出一個(gè)設(shè)計(jì)類別：信息圖設(shè)計(jì)。

不過(guò)，信息圖設(shè)計(jì)更多針對(duì)桌面端，很少考慮移動(dòng)端，所以，移動(dòng)端的圖表設(shè)計(jì)挑戰(zhàn)性更大。在小的屏幕上展示數(shù)據(jù)或信息，只能做一些取舍。

Android - 統(tǒng)計(jì)數(shù)據(jù)圖表

Arco的圖表和圖表

股票應(yīng)用設(shè)計(jì)

Analytics（分析）

移動(dòng)儀表盤

優(yōu)化 - 統(tǒng)計(jì)

移動(dòng)UI中的圖表和圖形

金融應(yīng)用

財(cái)經(jīng)和新聞應(yīng)用

支付帳單

線圖頁(yè)面

分析應(yīng)用頁(yè)面

分析應(yīng)用

健康應(yīng)用

自行車比賽

威脅儀表盤設(shè)計(jì)

儀表盤設(shè)計(jì)

圖表

足跡App

管理模塊

紫色的圖表和圖形

運(yùn)動(dòng)追蹤應(yīng)用

關(guān)于鐵的圖

Noblyn App重新設(shè)計(jì)

投資平臺(tái)

跟蹤應(yīng)用

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

你知道設(shè)計(jì)風(fēng)格里的“等距風(fēng)格”是啥怎么畫不？

UI巴巴 2018-08-16 20:26:18

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

1.等距是什么？

等距視圖是指，繪制物體時(shí)每一邊的長(zhǎng)度都按繪圖比例縮放，而物體上所有平行線在繪制時(shí)仍保持平行的一種顯示方法。

最早是出現(xiàn)在電腦應(yīng)用程式的圖像，以及早期的8位元電子游戲，近幾年來(lái)的被廣泛的使用在因特網(wǎng)、GUI(Graphic User Interface)以及行動(dòng)游戲等等。

2.等距視圖游戲的歷史

雖然計(jì)算機(jī)游戲的歷史一直在20世紀(jì)70年代初期就看到了一些真正的3D游戲，但是第一個(gè)使用上述意義上的等距投影的不同視覺風(fēng)格的視頻游戲是20世紀(jì)80年代初的街機(jī)游戲。

1）20世紀(jì)80年代 

高速公路遇襲（1985年）

等距視圖是一種把2D游戲偽裝為3D游戲的顯示方法。使用這種方法的游戲有時(shí)候會(huì)被稱作偽3D或2.5D

蝙蝠俠（1986年）

執(zhí)行等距視圖的方法有很多，但為了簡(jiǎn)化，最有效最常用的一種——貼圖法。從上面兩張圖可以看出，其上覆蓋的菱形網(wǎng)格把地形劃分貼圖。

2）20世紀(jì)90年代 

最終幻想III（1997）

文明六世（2016）

在貼圖法中，各個(gè)視覺元素都被切分為更小的部件，稱為“貼圖”，都是標(biāo)準(zhǔn)尺寸的。根據(jù)預(yù)先確定的平面數(shù)據(jù)——通常是2D數(shù)組，這些貼圖被組織成游戲世界。

3）目前，2000

SOCIOBALL（2015）

紀(jì)念碑谷 （2016）

3.等距風(fēng)格的圖標(biāo)、插畫及應(yīng)用范圍

這種插畫有一個(gè)專門的名字叫“isometric”。

應(yīng)用范圍很廣，比如：icon、界面、啟動(dòng)頁(yè)、插畫、游戲、動(dòng)畫視頻等等。

圖標(biāo)

字體

插畫

海報(bào)

啟動(dòng)頁(yè)

4.常用繪制軟件

目前常用的軟件有PS、AI、C4D。

5.干貨來(lái)啦~

雖然PS/AI都能畫出等距圖標(biāo)，但是現(xiàn)在有一個(gè)軟件Affinity Designer 比它們畫等距圖更加輕松。

首先畫等距我們需要畫參考線，PS/AI都能畫出來(lái)，但是方法還是稍稍顯得復(fù)雜了一點(diǎn)，一些基本功不到位的同學(xué)會(huì)很頭疼這個(gè)參考線的畫法。Affinity Designer 的網(wǎng)格和軸管理器十分人性化的解決了這個(gè)問(wèn)題。

不但對(duì)于新手來(lái)說(shuō)是個(gè)不錯(cuò)的選擇，而且它完美的融合了Adobe和sketch兩個(gè)原本不相融的軟件。

網(wǎng)格類型選擇等軸測(cè)，這樣網(wǎng)格就會(huì)自動(dòng)生成等距所需要的斜線。

并且它的網(wǎng)格還可以設(shè)置吸附功能，也就是畫的每個(gè)元素都可以自動(dòng)吸附在網(wǎng)格邊緣。

另外它還有一個(gè)十分便捷的功能，它的圖形變形功能也十分強(qiáng)大。鼠標(biāo)移動(dòng)到矩形中間節(jié)點(diǎn)的會(huì)出現(xiàn)上下重疊的箭頭（→），如下圖：

這樣可以十分輕松的傾斜矩形到任意角度，并且還自動(dòng)吸附到網(wǎng)格上了。

拖拽矩形長(zhǎng)寬的時(shí)候也是根據(jù)網(wǎng)格的路徑來(lái)，不會(huì)影響矩形傾斜的角度。

輕輕松松畫一個(gè)小icon。

Affinity Designer這個(gè)軟件目前只適用于蘋果操作系統(tǒng)，在App Store商店里有售賣。

案例鑒賞：

↑軟件：C4D、3D-MAX、MAYA等大部分3D軟件

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

干貨：看看國(guó)際大廠是如何創(chuàng)建UI組件設(shè)計(jì)規(guī)范？

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

通過(guò)本文，你將學(xué)習(xí)到 Uber ，Pinterest ，Shopify 和 Airbnb 等知名網(wǎng)站如何利用組件構(gòu)建統(tǒng)一的UI / UX 設(shè)計(jì)規(guī)范 。

Airbnb通過(guò)react-sketchapp將設(shè)計(jì)與開發(fā)之間的組件協(xié)作提升到了一個(gè)新的水平

在產(chǎn)品中創(chuàng)建和保持UI和UX的一致性，可以帶給用戶直觀的導(dǎo)航體驗(yàn)，并引導(dǎo)他們成功地與應(yīng)用的不同部分進(jìn)行交互，而不會(huì)產(chǎn)生混淆。

在產(chǎn)品的各個(gè)部分和應(yīng)用之間保持用戶界面的一致性，可以創(chuàng)造更有價(jià)值的東西——品牌。將用戶體驗(yàn)和用戶界面品牌化的關(guān)鍵是讓用戶在與新產(chǎn)品互動(dòng)時(shí)也能感到“賓至如歸”，從而提高他們對(duì)新產(chǎn)品的的忠誠(chéng)度和滿意度。

那么，如何才能構(gòu)建有效的UI組件設(shè)計(jì)規(guī)范呢？以下有幾個(gè)方面需要引起注意。

1、保持視覺和功能一致性

功能一致性使你的產(chǎn)品更具可預(yù)測(cè)性。用戶能夠預(yù)測(cè)元素的行為方式，這樣即使在第一次訪問(wèn)的頁(yè)面/屏幕上與之交互，他們也能感覺到安全和舒適。

視覺一致性包括UI的顏色，字體，大小，位置和其他視覺方面，它能幫助用戶識(shí)別UI元素并歸類。例如，某種字體顏色可以策略性地用于幫助用戶明白他們按下特定按鈕時(shí)會(huì)得到什么。

鑒于目前的行業(yè)情況， UI組件還可以作為用戶體驗(yàn)組件 ，將功能和視覺一致性結(jié)合起來(lái)。

基于組件的設(shè)計(jì)規(guī)范可以使應(yīng)用程序具有視覺和功能上的一致性，這有助于用戶感到賓至如歸，并能夠輕松地得到指導(dǎo)以完成與產(chǎn)品的所需交互。

2、為什么需要組件設(shè)計(jì)規(guī)范？

組件是用于UI設(shè)計(jì)和開發(fā)的一種很好的辦法，使用較少的可重用的組件，更好地實(shí)現(xiàn)一致性。

Uber ， Pinterest ， Airbnb ， Walmart ，Atlasssian等公司都通過(guò)基于組件的設(shè)計(jì)規(guī)范實(shí)現(xiàn)UI的一致性。

Airbnb的設(shè)計(jì)工作室在構(gòu)建他們的設(shè)計(jì)規(guī)范時(shí)堅(jiān)持了這種理念：“ 我們的設(shè)計(jì)應(yīng)該是統(tǒng)一的平臺(tái)，通過(guò)定義明確和可重用的組件來(lái)提率”。

以下是使用組件設(shè)計(jì)規(guī)范的一些優(yōu)勢(shì)：

1. 它的可重用性促進(jìn)了UI和UX的一致，因?yàn)榻M件可以在任何被使用的地方創(chuàng)建一致的體驗(yàn)。

2. 因?yàn)檩^大的組件由較小的組件組成，因此可以利用原子設(shè)計(jì)概念實(shí)現(xiàn)更好的一致性，從而減少意外的和分離的體驗(yàn)。

3. 組件在設(shè)計(jì)和開發(fā)之間提供更好的協(xié)作，允許設(shè)計(jì)語(yǔ)言隨著時(shí)間變化而發(fā)展。在理想情況下，你在Sketch上看到的是使用React構(gòu)建的內(nèi)容。

4. 從設(shè)計(jì)方面來(lái)看，如字體，排版，主色調(diào)和副色調(diào)仍然可以指定為組件設(shè)計(jì)規(guī)范的一部分。

3、建立一致的設(shè)計(jì)系統(tǒng)

目前來(lái)看，設(shè)計(jì)規(guī)范確實(shí)有很多優(yōu)勢(shì)。但是，如何才能真正地創(chuàng)建基于組件的設(shè)計(jì)規(guī)范，使設(shè)計(jì)人員和開發(fā)人員可以利用該規(guī)范進(jìn)行協(xié)作？

在創(chuàng)建基于組件的設(shè)計(jì)規(guī)范前，你必須了解它是什么。UI設(shè)計(jì)規(guī)范不僅僅是一個(gè)組件庫(kù)，也不僅僅只是組件的顏色，它包括很多方面。對(duì)于構(gòu)成整個(gè)產(chǎn)品體驗(yàn)的基本部分而言，它是一個(gè)不斷增長(zhǎng)且不斷演變的真實(shí)來(lái)源。

因此，在制作第一個(gè)組件設(shè)計(jì)規(guī)范之前，你必須設(shè)置樣式指南和設(shè)計(jì)語(yǔ)言來(lái)控制這些組件。

然后，將這些組件的設(shè)計(jì)原理轉(zhuǎn)化為代碼來(lái)實(shí)現(xiàn)，一步步從較小的原子再到較大的組成部分。

最理想做法的是將所有組件都應(yīng)該放在一個(gè)設(shè)計(jì)人員和開發(fā)人員都可以訪問(wèn)的位置。通過(guò)這種方式，設(shè)計(jì)人員可以監(jiān)控隨著時(shí)間的推移而發(fā)展的設(shè)計(jì)語(yǔ)言，而開發(fā)人員也可以選擇并使用正確的組件。

4、共享組件庫(kù)

Shopify使用Polaris設(shè)計(jì)系統(tǒng)，該設(shè)計(jì)系統(tǒng)包含一個(gè)內(nèi)部反應(yīng)組件庫(kù)，旨在為使用Shopify的商家創(chuàng)建更一致的體驗(yàn)。Airbnb使用共享組件庫(kù)為其生產(chǎn)率帶來(lái)了巨大飛躍。

Pinterest使用格式塔（Gestalt），一個(gè)React UI組件庫(kù)。它“強(qiáng)化了Pinterest的設(shè)計(jì)語(yǔ)言。通過(guò)執(zhí)行一系列基本的UI組件來(lái)簡(jiǎn)化設(shè)計(jì)人員和開發(fā)人員之間的溝通......“

通過(guò)以上的實(shí)例不難看出，共享組件庫(kù)是實(shí)現(xiàn)UI一致性的有效的工具。 在我看來(lái)，這種一致性不應(yīng)該被強(qiáng)制執(zhí)行，而是自然地實(shí)現(xiàn)。

組件庫(kù)基本上是一種在團(tuán)隊(duì)構(gòu)建應(yīng)用程序時(shí)執(zhí)行一系列UI組件的方法。但是，開發(fā)人員不僅局限于庫(kù)的視覺語(yǔ)言，還局限于庫(kù)的持續(xù)開發(fā)。

當(dāng)特定應(yīng)用程序的特定部分需要某個(gè)組件時(shí)，它可能需要一些調(diào)整和修改。設(shè)計(jì)師和開發(fā)人員應(yīng)該在靈活性和一致性之間找到適當(dāng)?shù)钠胶恻c(diǎn)。

共享庫(kù)經(jīng)常會(huì)打破這種平衡并減慢開發(fā)速度，這反過(guò)來(lái)又會(huì)影響開發(fā)團(tuán)隊(duì)對(duì)庫(kù)本身的采用。在任何需要單個(gè)組件的地方強(qiáng)制使用一個(gè)龐大的庫(kù)也是沒有意義的（關(guān)于這個(gè)問(wèn)題我們不要陷入爭(zhēng)論不休的辯論了）。

要想實(shí)現(xiàn)設(shè)計(jì)人員與開發(fā)人員之間的協(xié)作，還必須為組件維護(hù)一個(gè)實(shí)時(shí)文檔站點(diǎn)，并以某種方式使其可供設(shè)計(jì)人員和開發(fā)人員編輯（Airbnb的react-sketchapp和Figma等工具可以提供幫助）。

這里有23個(gè)常用的React UI庫(kù)，點(diǎn)擊即可使用。如果你實(shí)現(xiàn)了自己的庫(kù)，請(qǐng)記住為開發(fā)人員留下足夠的設(shè)計(jì)空間，從而保持兩者之間的平衡。

5、Bit -作為構(gòu)建塊的組件

Bit是構(gòu)建組件庫(kù)的新趨勢(shì)。

通過(guò)使用Bit，你可以組織來(lái)自云上不同項(xiàng)目的組件，而無(wú)需重構(gòu)這些項(xiàng)目或現(xiàn)有庫(kù)。

每個(gè)組件都可以正在進(jìn)行的任何項(xiàng)目中發(fā)現(xiàn)，使用或開發(fā)，同時(shí)可以輕松地跨代碼庫(kù)進(jìn)行同步更改。

每個(gè)組件都會(huì)顯示一個(gè)實(shí)時(shí)UI操作系統(tǒng) ，自動(dòng)解析文檔，測(cè)試結(jié)果（Bit運(yùn)行組件單元測(cè)試等），以便所有組件都可以被設(shè)計(jì)和開發(fā)團(tuán)隊(duì)發(fā)現(xiàn)。

Bit的工作流可讓你在UI一致性和設(shè)計(jì)規(guī)則之間找到一個(gè)更快，更動(dòng)態(tài)的工作流。它也是開源的，所以可以隨意查看。

6、平衡一致性和靈活性

丘吉爾曾經(jīng)說(shuō)過(guò)“改善就是改變，完美就是經(jīng)常改變”。如果我們過(guò)于嚴(yán)格地執(zhí)行一致性，這將會(huì)影響創(chuàng)新。

在我們建立新事物的過(guò)程中，我們必須對(duì)規(guī)則進(jìn)行適當(dāng)?shù)恼{(diào)整，預(yù)留出一些空間給變量，但不能因?yàn)檎{(diào)整讓事物陷入混亂。

或許這個(gè)說(shuō)法聽起來(lái)沒有什么特別之處，但正確的理念，方法和工具可以幫助你實(shí)現(xiàn)UI一致性和創(chuàng)新之間的平衡。以下是一些保持平衡有效的建議。

從設(shè)計(jì)的角度來(lái)看，并非每種風(fēng)格都應(yīng)該重新定義和預(yù)先定義。

例如，某個(gè)組件（導(dǎo)航欄，項(xiàng)目等）可能與應(yīng)用程序的其余部分相比具有相對(duì)大小或邊距。在不同的情況下，這些變量可能會(huì)發(fā)生變化，因此可以預(yù)留一些空間出來(lái)。

優(yōu)步和其他團(tuán)隊(duì)使用的另一種有用的方法是將基本/全局/基礎(chǔ)組件與“輔助”組件分開 。

例如， Uber使用具有超過(guò)22種不同顏色和22種值的主要和次要組件，總共484種獨(dú)特色調(diào)。 創(chuàng)建了70多種獨(dú)特模式 - 每個(gè)有Uber服務(wù)的國(guó)家都有一種獨(dú)特模式。

設(shè)計(jì)人員與開發(fā)人員的協(xié)作是找到這種平衡的關(guān)鍵。一些團(tuán)隊(duì)（如沃爾瑪實(shí)驗(yàn)室 ）致力于提高UI組件本身的可重用性，從而縮小與開發(fā)人員端的差距。

正確的工具和工作流程對(duì)UI也有很大的幫助，像Bit和Storybook這樣的工具就可以幫助促進(jìn)這種平衡。

在別無(wú)選擇的情況下，打破一致性、模式 、視覺和文字是一種很好的方式，可以給用戶一種熟悉的感覺并減少混亂。 一致的模式 ，可識(shí)別的視覺效果和一致的語(yǔ)氣可以使用戶感覺安全，直觀地與你的產(chǎn)品互動(dòng)。

總結(jié)

l 保持UI和UX的一致性可以引導(dǎo)用戶成功與您的產(chǎn)品進(jìn)行交互。

l 設(shè)計(jì)系統(tǒng)是UI / UX不斷發(fā)展的主體?；诮M件的設(shè)計(jì)系統(tǒng)具有視覺和功能一致性。

l Uber，Airbnb，Pinterest，Netflix和其他優(yōu)秀團(tuán)隊(duì)使用基于組件的設(shè)計(jì)系統(tǒng)來(lái)創(chuàng)建和發(fā)展他們的視覺語(yǔ)言。

l 要構(gòu)建組件設(shè)計(jì)系統(tǒng)，您可以創(chuàng)建庫(kù)，使用Bit并利用不同的工具和方法來(lái)逐步擴(kuò)展它。

l 通過(guò)為變量留出空間，使用有用的工具和鼓勵(lì)協(xié)作文化來(lái)平衡一致性和靈活性是很重要的。

l 切記：平衡和協(xié)作就是一切。這不是一項(xiàng)單一的工作，而是設(shè)計(jì)師和開發(fā)人員共同進(jìn)行的持續(xù)旅程。

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

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

在 Sarah 給 Jimmy 講完了她在設(shè)計(jì)上的一些原則之后，Jimmy 就準(zhǔn)備開始重新設(shè)計(jì)那個(gè)客戶等著要的新的儀表盤界面了。與此同時(shí)，他所在的公司 Shmuckle 準(zhǔn)備設(shè)置一個(gè)新的產(chǎn)品經(jīng)理的職位，并且將會(huì)在公司內(nèi)部選擇合適的人員來(lá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í)候，他正在樓道里刷推特摸魚?！赣檬裁戳鞒蹋磕沁€用問(wèn)，當(dāng)然是敏捷啦。這個(gè)最好，過(guò)程清晰簡(jiǎn)單，現(xiàn)在沒有什么辦法比敏捷更好處理各種數(shù)字產(chǎn)品的設(shè)計(jì)和開發(fā)啦?！菇又?，Boris 去隔壁會(huì)議室拖出一個(gè)白板，并且說(shuō)道：「給我一個(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)過(guò)測(cè)試，具備可視、可集成和可運(yùn)行使用的特征。換言之，就是把一個(gè)大項(xiàng)目分為多個(gè)相互聯(lián)系，但也可獨(dú)立運(yùn)行的小項(xiàng)目，并分別完成，在此過(guò)程中軟件一直處于可使用狀態(tài)。

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

「干啥？你倆在聊啥？」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

承諾是關(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è)清晰的故事，或者說(shuō)整個(gè)產(chǎn)品逐漸設(shè)計(jì)或者開發(fā)出來(lái)的景象。如今流行的做法是將沖刺劃分為很多不同的階段，這也是為什么如今被稱為小沖刺。不過(guò)本質(zhì)上，做的事情和內(nèi)容并沒有改變?！?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

需要始終牢記的事情

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

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

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

「這個(gè)是你的項(xiàng)目，時(shí)間應(yīng)該由你來(lái)衡量。不過(guò)，你需要一開始就清楚你手頭有多少資源，你有多少時(shí)間來(lái)投入這個(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)目看起來(lái)并不算小，這個(gè)人員工作量之下，可能需要花費(fèi)一個(gè)月的時(shí)間來(lái)進(jìn)行開發(fā)。但是請(qǐng)記住，在一個(gè)月的時(shí)間內(nèi)，你必須提交出一個(gè)可用的產(chǎn)品出來(lái)。從我的角度上來(lái)看，我是不允許增加預(yù)算和時(shí)間的。約束對(duì)雙方其實(shí)都是有利的?！筍arah 說(shuō)道。

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

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

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

結(jié)語(yǔ)

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

我注意到，有人把產(chǎn)品所使用的敏捷和瀑布模型這類流程稱為「項(xiàng)目的上帝」。但是實(shí)際上，不管哪種流程，依然會(huì)陷入無(wú)休止的扯皮會(huì)議和無(wú)意義的辯論，出現(xiàn)了問(wèn)題之后，開始修改時(shí)間表?！肝覀儫o(wú)法按時(shí)完成功能A，因此我們無(wú)法開發(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)品的需求、各種無(wú)關(guān)的事務(wù)隔離開來(lái)。「Hey，Angela，我們的大客戶要求這個(gè)今天上線，能不能把你的項(xiàng)目放一邊，幫我們把這個(gè)產(chǎn)品弄上線？」這也是一個(gè)反面案例。拒絕。

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