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

這種現(xiàn)象被稱作為梵雷斯托夫效應(yīng)（相對(duì)于普通事件或物體，要記得獨(dú)特、有特色的事件或物體可能性會(huì)大增）。梵雷斯托夫效應(yīng)有兩個(gè)觸發(fā)條件：背景不同以及經(jīng)驗(yàn)不同。背景不同是指一個(gè)刺激物與周圍的刺激物不同，比如在一串字母中突然出現(xiàn)了一個(gè)數(shù)字，那個(gè)數(shù)字就會(huì)讓人印象深刻；

經(jīng)驗(yàn)不同則是指一個(gè)刺激物與記憶中的經(jīng)驗(yàn)不同，比如一些經(jīng)常被我們誤讀的成語，因?yàn)榕c平時(shí)的經(jīng)驗(yàn)相悖，所以看到正確解釋的時(shí)候印象特別深刻。

我們?cè)诹私饬诉@兩個(gè)觸發(fā)條件之后，就可以利用它們來觸發(fā)梵雷斯托夫效應(yīng)，從而幫助我們做出令用戶印象深刻的設(shè)計(jì)。下面就結(jié)合實(shí)際案例來看看如何利用它們。

前面說過，背景不同是指一個(gè)刺激物與周圍的刺激物不同。具體到界面中，我們可以理解為在一堆相同類型的元素/模塊中，對(duì)其中需要突出的做特殊化處理。

案例1 功能入口

京東金融底部導(dǎo)航中的“信用”以及保險(xiǎn)頁面中金剛區(qū)的“1元購”，都采用了與同類型元素不同的視覺樣式。前者采用了色塊+動(dòng)效，后者采用了3D視角，分別讓它們?cè)诘撞繉?dǎo)航和金剛區(qū)中“脫穎而出”，引起用戶的關(guān)注。

案例2 列表內(nèi)元素

愛奇藝的首頁推薦中，其中一個(gè)視頻內(nèi)容的封面是采用動(dòng)圖的形式，在其他靜態(tài)封面的襯托下，就顯得格外醒目。飛豬的首頁推薦中，則是把專題欄目的信息部分（彩色底白字）設(shè)計(jì)得與其他商品（白底黑字）差異較大，來吸引用戶關(guān)注點(diǎn)擊。

案例3 模塊之間

美團(tuán)外賣的個(gè)人中心將一些常用功能至于一個(gè)單獨(dú)的模塊中，并且將其中的圖標(biāo)設(shè)計(jì)成與其他模塊內(nèi)的圖標(biāo)所不同的樣式（黃色填充），如此即突出了常用功能模塊。另一邊愛奇藝的個(gè)人中心，“會(huì)員服務(wù)”與“我的泡泡”則是直接從下面的宮格式布局中脫離出來，并且將各自的一些功能外置，布局交互完全不同于下面的其他模塊，以達(dá)到突出這兩個(gè)模塊的目的。

以上三個(gè)就是典型的“背景不同”觸發(fā)梵雷斯托夫效應(yīng)，從而讓用戶印象深刻的案例。不難發(fā)現(xiàn)，對(duì)于“背景不同”，已經(jīng)應(yīng)用的比較廣泛，并且大家也較為熟知了，接下來看看“經(jīng)驗(yàn)不同”。

經(jīng)驗(yàn)不同需要顛覆過去的認(rèn)知，我們可以理解為在一些已經(jīng)被大家所熟知的視覺/交互中，對(duì)其進(jìn)行“改革創(chuàng)新”。

案例1 虎撲評(píng)論點(diǎn)贊

虎撲中的評(píng)論點(diǎn)贊不同于我們看到的其他產(chǎn)品，它采用的是一個(gè)燈泡ICON來表達(dá)該評(píng)論“亮了”，更貼合用戶對(duì)有趣評(píng)論贊賞認(rèn)同的真實(shí)場(chǎng)景。與眾不同的方式也加強(qiáng)了用戶的印象，提升了用戶的黏度。

案例2 嗶哩嗶哩打賞

嗶哩嗶哩中的打賞采用了“馬里奧踩蘑菇”游戲的形式，不同的磚塊代表不同的打賞數(shù)額，選擇完數(shù)額，滑動(dòng)馬里奧頂一下磚塊就完成了打賞的整個(gè)過程。相比于普通的宮格式菜單選擇，是不是有意思多了呢？

案例3 微信讀書推薦

微信讀書的書城中有一個(gè)“搖一搖”的功能，搖動(dòng)一下手機(jī)或者點(diǎn)擊一下“搖一搖”ICON，就會(huì)隨機(jī)推薦一本書給你。每一次搖動(dòng)背后的不確定性就像搶紅包一樣，滿足了用戶的獵奇心理，提升了體驗(yàn)的趣味性。相比于普通的推薦版塊，不僅能讓用戶印象深刻，更會(huì)讓他們對(duì)此愛不釋手。

其實(shí)這些“經(jīng)驗(yàn)不同”的案例也不完完全全是創(chuàng)新，比如搖一搖之前就是微信中的一個(gè)社交功能。大家可以將平時(shí)看到的有意思的設(shè)計(jì)記錄下來，并思考一下可以復(fù)用在哪些地方，說不定下次功能更新就能用上了哦～

在利用“背景不同”時(shí)，需要注意避免出現(xiàn)處處都強(qiáng)調(diào)的情況。每個(gè)元素/模塊都突出了，也就失去了重點(diǎn)，如下圖。

而“經(jīng)驗(yàn)不同”需要注意的是，避免為了創(chuàng)新而創(chuàng)新，讓“驚喜”變成“驚嚇”。如下圖，

“清音”作為一個(gè)標(biāo)簽指示，顯然與我們平時(shí)所看到的那些標(biāo)簽樣式大不相同，足以讓我們印象深刻。但是，在知道它是一個(gè)標(biāo)簽之前，我曾誤以為它是一個(gè)按鈕。在觸擊無反饋并且右滑屏幕發(fā)現(xiàn)后面還有“濁音”之后，我才知道原來這是一個(gè)標(biāo)簽……這樣的“經(jīng)驗(yàn)不同”只會(huì)造成“負(fù)面”的印象深刻。

相對(duì)于普通的事物，特殊化的事物更容易讓人印象深刻，我們稱這為梵雷斯托夫效應(yīng)。觸發(fā)梵雷斯托夫效應(yīng)有兩個(gè)條件：背景不同和經(jīng)驗(yàn)不同，我們可以利用這兩個(gè)條件來做出令用戶印象深刻的設(shè)計(jì)。

“背景不同”：對(duì)需要突出的元素/模塊做特殊化處理，在同類型元素/模塊中脫穎而出。需要注意的是，避免到處都強(qiáng)調(diào)，從而失去強(qiáng)調(diào)的意義。

“經(jīng)驗(yàn)不同”：對(duì)過去所熟悉的視覺/交互進(jìn)行“創(chuàng)新”，從其他不同類型的產(chǎn)品中復(fù)用、移植過來。需要注意的是，避免讓“驚喜”變成“驚嚇”。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

Loading動(dòng)畫，在現(xiàn)在的設(shè)計(jì)中已經(jīng)是一個(gè)必須要考慮的系統(tǒng)元素，它能減緩用戶等待焦慮的心態(tài)，也能用來作為品牌透?jìng)?，增加曝光?

那關(guān)于loading動(dòng)畫相關(guān)知識(shí)，我覺得對(duì)于設(shè)計(jì)師來說是有必要去了解的，所以我找到了這篇優(yōu)秀文章，讓大家能夠深入了解loading動(dòng)畫，透過現(xiàn)象看本質(zhì)，學(xué)以致用。

圖片來源：Domaso

沒有人喜歡等待

在用戶心目中，優(yōu)秀的應(yīng)用、工具、網(wǎng)站都應(yīng)該是制作精良且能快速響應(yīng)他們需求的產(chǎn)品。

舉一個(gè)真實(shí)的例子：最近我們新發(fā)布了一個(gè)用戶評(píng)價(jià)的應(yīng)用，第一個(gè)版本并不完美，loading延遲在2-3秒。

你猜怎么著？

很多人認(rèn)為這3秒是一個(gè)故障。在實(shí)際開發(fā)中，你可能要面對(duì)龜速的網(wǎng)絡(luò)，沒有優(yōu)化的代碼，操作時(shí)間長(zhǎng)或數(shù)據(jù)處理太多等問題。因此，App的運(yùn)行速度可能沒有用戶預(yù)期中的那么快。雖然早期用戶可能會(huì)給你的產(chǎn)品第二次機(jī)會(huì)，但絕大多數(shù)人會(huì)立即退出它。

除非你的產(chǎn)品界面對(duì)用戶的行為提供了明確的即時(shí)反饋。剛才發(fā)生了什么？是操作錯(cuò)誤還是在等待服務(wù)器的請(qǐng)求？用戶需要等待多長(zhǎng)時(shí)間才能正常使用這個(gè)工具或網(wǎng)站？用戶為什么要等待呢?

讓我們一起深入了解Loading動(dòng)畫：

• loading動(dòng)畫的歷史由來
• 優(yōu)秀loading動(dòng)畫所具備的特征
• 細(xì)節(jié)可以做出精彩
• 簡(jiǎn)單處理還是精心制作
• 有用的工具和資源

Loading動(dòng)畫的歷史由來

對(duì)于這種類型的反饋，設(shè)計(jì)師會(huì)使用進(jìn)度條、loading示意圖、預(yù)loading、或旋轉(zhuǎn)器。它們向用戶解釋什么時(shí)間發(fā)生了什么或正在loading的過程，以減少用戶的心理焦慮。

你覺得設(shè)計(jì)師是從什么時(shí)候開始考慮加上這種反饋的？

我很驚訝的看到關(guān)于Nielsen Norman的一篇文章，提到響應(yīng)時(shí)間和loading動(dòng)畫是在1993年（參考1985年的資料）：

如果計(jì)算機(jī)無法提供快速響應(yīng)，則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋?！綧yers 1985 論文，“計(jì)算機(jī)-人機(jī)界面百分比進(jìn)度指標(biāo)的重要性”】

顯示進(jìn)度的三個(gè)主要優(yōu)點(diǎn)：向用戶保證系統(tǒng)沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時(shí)間，讓用戶能騰出時(shí)間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內(nèi)容，減少等待的焦慮?！?Jakob Nielsen, on January 1, 1993

自從Web 1.0以來，幾乎每個(gè)網(wǎng)站都有l(wèi)oading狀態(tài)，用戶可以注意到當(dāng)頁面內(nèi)容正在loading時(shí)，這些Loading動(dòng)畫活躍的身影。

在2007年的時(shí)候，網(wǎng)站的Loading形式大概是下面這張圖上的樣子：

2007年時(shí)的Loading

在那個(gè)年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動(dòng)畫。

到了2010年，隨著CSS3的迅猛發(fā)展，出現(xiàn)了很多教程教大家如何做CSS3動(dòng)畫，也能找到大量的loading 動(dòng)畫預(yù)設(shè)包。設(shè)計(jì)師也可以在Ps cs5中做這種loading動(dòng)畫，這個(gè)在10年前是非常流行的。

在那時(shí)，Loading動(dòng)畫更像是web的專屬問題，因?yàn)轫撁鎙oading確實(shí)是一個(gè)問題。在2010年的時(shí)候，很多Flash網(wǎng)頁都做了一些很有創(chuàng)意的loading動(dòng)畫：

30個(gè)創(chuàng)意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）

漸漸地，設(shè)計(jì)師們開始不滿足于簡(jiǎn)單的進(jìn)度條和旋轉(zhuǎn)Loading，到2014年-2016年的時(shí)候，變得更加關(guān)注這塊的設(shè)計(jì)。所以，你能發(fā)現(xiàn)更多關(guān)于loading教程，免費(fèi)的Loading設(shè)計(jì)資源，插件和開源項(xiàng)目。

2016年出現(xiàn)的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

設(shè)計(jì)趨勢(shì)和方法已經(jīng)發(fā)生了變化，但向用戶提供有效反饋的原則依然需要遵循。

優(yōu)秀loading動(dòng)畫所具備的特征

在一個(gè)完美的世界里，loading動(dòng)畫應(yīng)該：

1、盡可能少的顯示給用戶

如果你的工具或網(wǎng)站工作的足夠快，那就是非常完美的?；蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A(yù)期，顯示好看的loading動(dòng)畫只是一個(gè)緩兵之計(jì)，等待太久了一樣會(huì)惹惱用戶。所以，首先應(yīng)該是解決內(nèi)容的loading問題。

2、給出具體時(shí)間

它可以是一條簡(jiǎn)單的文本信息，告知大致的等待時(shí)間，也可以是可視化的圖形來表示。總共上傳了多少文件？更新需要多少分鐘？已經(jīng)進(jìn)行到了什么階段？這些體驗(yàn)上的設(shè)計(jì)細(xì)節(jié)都可以給用戶預(yù)期并減少焦慮。

宇航員數(shù)據(jù)loadingby Cream M.

3、告訴用戶為什么需要等待

一些應(yīng)用的loading過程，通常讓用戶不大容易理解。一個(gè)好的Loading動(dòng)畫，應(yīng)該要告知用戶等待的原因以及等待的背后軟件正在做什么：

文件獲取動(dòng)畫 by Vinoth

讓我們說回我的案例，那個(gè)反饋工具軟件。當(dāng)我們的等待時(shí)間超過1秒時(shí)，我們決定給這段等待時(shí)間增加一段解釋。動(dòng)畫說明應(yīng)用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請(qǐng)求：

好的loading動(dòng)畫

4、讓等待的過程不那么讓人無聊

可以放一個(gè)有趣的動(dòng)畫來吸引人，讓用戶的眼睛始終保持忙碌。

動(dòng)畫來源：Alex Kunchevsky

5、減少用戶等待時(shí)間的心理感知

這與上面提到的一點(diǎn)非常相關(guān)，如果你在等待的過程中發(fā)現(xiàn)了一些能夠吸引用戶注意力的東西，那么感覺上時(shí)間就會(huì)過得更快。它可以是一個(gè)引人注目的色彩搭配，有趣的想法，或者是一個(gè)什么特別的東西。

蛋糕loading by Pierre Kleinhouse

6、透?jìng)鞴酒放菩蜗?

如果用戶在用你的應(yīng)用或者網(wǎng)站時(shí)會(huì)有一段等待時(shí)間，為什么不機(jī)智的利用好這段時(shí)間呢？我不建議僅僅只是為了做loading而做一個(gè)loading動(dòng)畫或者去在動(dòng)畫里使用一些心理學(xué)技巧。我覺得最好是將品牌的聲音融入整個(gè)Loading動(dòng)畫中，讓它成為一個(gè)非常重要的設(shè)計(jì)細(xì)節(jié)：

BCG的車票應(yīng)用動(dòng)畫 by Antonin

細(xì)節(jié)可以做出精彩

雖然有些人可能會(huì)認(rèn)為L(zhǎng)oading只是一個(gè)很小的UI細(xì)節(jié)，但它其實(shí)也有許多類型和變化。一般來說，我把loading動(dòng)畫分為幾類，進(jìn)度條，無限循環(huán)的loading圖和骨架圖。

進(jìn)度條

當(dāng)可以明確loading時(shí)間時(shí)使用，進(jìn)度條可以通過數(shù)字或視覺化的形式來表現(xiàn)。

有數(shù)字進(jìn)度的，有時(shí)也稱為百分比指示符。他們可以簡(jiǎn)單直接，也可以很有創(chuàng)意，需要對(duì)你的用戶業(yè)務(wù)表達(dá)更有效：

一個(gè)app loading頁 by Nguyen Tran

你也可以找到有趣的進(jìn)度條和循環(huán)動(dòng)畫結(jié)合的loading圖。

Loading動(dòng)畫by Dragonlady

進(jìn)度條背后的主要思想是顯示一個(gè)操作將花費(fèi)多長(zhǎng)時(shí)間以及目前所處的狀態(tài)。根據(jù)UI需求的不同，進(jìn)度條也可以是線性的，沒有百分比的形式。

想想Gmail，它沒有顯示進(jìn)度百分比，但是用戶同樣可以感覺到加載的進(jìn)度。下面是兩個(gè)簡(jiǎn)單而又創(chuàng)意的例子：

Gamil loading和一個(gè)創(chuàng)意loading動(dòng)畫 by  Allen Zhang

循環(huán)Loading動(dòng)畫

當(dāng)loading的時(shí)間是未知的時(shí)候來使用，它可以是默認(rèn)的旋轉(zhuǎn)圖，也可以是一些創(chuàng)意動(dòng)畫，顯示應(yīng)用正在做一些事情。

計(jì)算loading圖標(biāo) by Hoang Nguyen

創(chuàng)意性loading動(dòng)畫一樣可以與業(yè)務(wù)緊密相關(guān)，并幫助支持品牌發(fā)聲。請(qǐng)思考下那些應(yīng)用會(huì)使用這種loading動(dòng)畫？

LittlePin Spinner by Daniel Sofinet

無限循環(huán)動(dòng)畫要求用戶在上傳或執(zhí)行某些操作時(shí)等待，但不要求具體需要多久時(shí)間，它們可能會(huì)非常簡(jiǎn)單或非常有創(chuàng)意。

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠(yuǎn)不停下來。

如你所見，如今的loading動(dòng)畫不僅僅只是一個(gè)系統(tǒng)狀態(tài)的UI元素。

骨架動(dòng)畫

骨架動(dòng)畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內(nèi)容。

這個(gè)詞最早出現(xiàn)在Luke Wroblewski 的文章中，Luke建議使用骨架動(dòng)畫來獲得更好的loading體驗(yàn)。這個(gè)想法得到了其他設(shè)計(jì)師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應(yīng)用。

舉個(gè)栗子，如果你使用的是網(wǎng)頁設(shè)計(jì)工具Figma，你會(huì)在頁面頂部看到一個(gè)進(jìn)度條，同時(shí)還在逐步loadingUI：首先你會(huì)看到占位符，然后才是可用數(shù)據(jù)：

Figma UI

簡(jiǎn)單處理還是精心制作

除了這篇文章中所展示的一些優(yōu)秀案例和Dribbble上的設(shè)計(jì)概念，在目前大多數(shù)應(yīng)用中，你可能能看到還是一個(gè)默認(rèn)的Loading。

有一段時(shí)間，簡(jiǎn)單的Loading被大眾所推崇，因?yàn)樗麄儗?duì)于性能的影響最?。ㄓ绕涫菍?duì)于web）。使用默認(rèn)的或開源的loading要容易的多，不需要設(shè)計(jì)師和開發(fā)花心思來設(shè)計(jì)和實(shí)現(xiàn)它。

如果你正在開發(fā)MVP或者項(xiàng)目的第一個(gè)版本，那么使用簡(jiǎn)單的或者開源的loading動(dòng)畫更符合邏輯。在這個(gè)階段，即使把loading動(dòng)畫做的再怎么有創(chuàng)意，也并不會(huì)對(duì)你的產(chǎn)品有多么大的幫助，如果它不能解決真正的需求。

一些簡(jiǎn)單的loading動(dòng)畫案例

有趣的是，在2016-2019年，我們可以看到非常多精心的loading動(dòng)畫。注重細(xì)節(jié)，日益成熟的設(shè)計(jì)公司，更好的科技環(huán)境，更方便的設(shè)計(jì)工具，這些都使得loading動(dòng)畫變得更加富有創(chuàng)造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動(dòng)畫，所以這也成了展現(xiàn)自己設(shè)計(jì)能力的一種方式。

即使在我們只有5人的初創(chuàng)公司里，我們也會(huì)考慮更好的用戶體驗(yàn)，讓我們用戶等待的體驗(yàn)更愉快。否則，我們做的反饋工具可能會(huì)失去用戶，沒有人希望失去用戶。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

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

這太棒了。

我也反復(fù)聽過不少錯(cuò)誤和模棱兩可的說法被反復(fù)提起。因此，為了幫助大家——因?yàn)槲掖_實(shí)喜歡幫助人——我在這里介紹一份簡(jiǎn)單易學(xué)的糾正理解偏差的小清單，希望能夠廣泛傳播（我很有信心，因?yàn)檠芯勘砻?，讀者喜歡簡(jiǎn)單易學(xué)的清單）。

UXRen

1、適應(yīng)不舒適的感覺

“我只知道一件事，就是我一無所知?！薄K格拉底（Socrates）

我們?cè)谥匾暬卮鸷秃ε绿釂柕沫h(huán)境中長(zhǎng)大。在學(xué)校里，我們因?yàn)榛卮鹫_而得到獎(jiǎng)勵(lì)；在工作中，我們因?yàn)樘岢龊玫狞c(diǎn)子而得到獎(jiǎng)勵(lì)。難怪很多人會(huì)找理由避免做研究，特別是定性研究。顯得無知所產(chǎn)生的焦慮在心中滋長(zhǎng)。定量的東西至少有標(biāo)準(zhǔn)化測(cè)試所帶來的熟悉感，令人舒適。保持研究型思維模式意味著要認(rèn)識(shí)到偏差無處不在，確定性只是一種錯(cuò)覺，任何答案的有效期都是短暫的。因此從長(zhǎng)遠(yuǎn)來看，好的問題更有價(jià)值得多。只有你承認(rèn)自己沒有答案，才能問出好問題—也才會(huì)了解更多。

UXRen

2、先提問，再做原型

“如果我們只測(cè)試開瓶器，可能永遠(yuǎn)不會(huì)意識(shí)到客戶更喜歡螺旋蓋的瓶子?！?br /> —維克多·隆巴迪（Victor Lombardi），《設(shè)計(jì)敗道：來自著名用戶體驗(yàn)案例的教訓(xùn)》（Why We Fail）

我們理所當(dāng)然會(huì)急于制作原型，測(cè)試原型。原型就是答案，可觸可摸，即使只是紙上的草圖。這樣做很舒服，比只是問問題舒服多了，即便這無異于燒錢。對(duì)于任何想要立竿見影地證明自己價(jià)值的人來說，只問問題，就像那只洗棉花糖的浣熊一樣，事與愿違。

太早制作原型的風(fēng)險(xiǎn)在于，這會(huì)把資源投入去回答一個(gè)無人問及的問題，同時(shí)還忽略了機(jī)會(huì)成本。測(cè)試原型可以幫助你優(yōu)化好點(diǎn)子，但不會(huì)告訴你是否在解決恰當(dāng)?shù)膯栴}，并且，也很容易將原型的亮點(diǎn)誤以為是點(diǎn)子的質(zhì)量。不論如何，研究報(bào)告中的亮點(diǎn)也容易被誤認(rèn)為是具有價(jià)值的洞察。

提出恰當(dāng)?shù)膯栴}，不會(huì)讓不好的點(diǎn)子得到保留和維護(hù)，反而會(huì)幫助你更快地將它們識(shí)別和清除。你只需要有足夠強(qiáng)大的內(nèi)心去擁抱錯(cuò)誤。

（如果你正在想“嘿！這對(duì)我的團(tuán)隊(duì)會(huì)有幫助”，我們會(huì)非常樂意去你的辦公室呆一天，確定你是否準(zhǔn)備和Mule Design Studio合作。）

 UXRen

3、了解目標(biāo)

除非你事先知道做某項(xiàng)研究的動(dòng)機(jī)，否則提問就是浪費(fèi)時(shí)間。你必須公開發(fā)誓：你的動(dòng)機(jī)不是“為了證明自己是正確的”。這是每個(gè)人內(nèi)心隱藏的目標(biāo)。參看第一點(diǎn)。

通常，出于對(duì)研究的一腔熱情，團(tuán)隊(duì)往往會(huì)在目標(biāo)不明確、不一致時(shí)就開始跟客戶對(duì)話。然后，他們會(huì)感覺花了寶貴的時(shí)間，但卻不知道怎么去應(yīng)用自己了解到的東西來提供解決方案，因而沒有什么可供展示的。于是就有了這樣的說法：“我們?nèi)ツ曜隽搜芯?，但卻是浪費(fèi)時(shí)間?！庇谑?，又回到了建立原型和測(cè)試原型的舒適圈。又或者，他們對(duì)聽到的內(nèi)容有不同的理解，結(jié)果又因誰對(duì)誰錯(cuò)更加爭(zhēng)論不休。

在大公司、大機(jī)構(gòu)中，有時(shí)大家都有心照不宣的目標(biāo)：“表現(xiàn)出我們?cè)诒M力做研究，不過還是讓產(chǎn)品負(fù)責(zé)人做他想做的事吧?！边@聽起來可能有點(diǎn)嘲諷意味，但通過跟許多在資金充足的研究部門的資深研究者交談，我了解到，盡管他們撰寫的報(bào)告相當(dāng)精彩，但對(duì)決策的影響卻為零。承認(rèn)這個(gè)事實(shí)，是阻止它發(fā)生的第一步。

完美絕佳的起點(diǎn)，是把你的目標(biāo)設(shè)置成：“我們需要確定水準(zhǔn)，快速理解他人的觀點(diǎn)。”不要在事后任意添加其他目標(biāo)。

只有當(dāng)你確定了目標(biāo)，才知道自己需要了解什么。而在你選擇怎么回答之前，你必須知道自己的問題是什么。

UXRen

4、在重大問題上達(dá)成一致

“從本質(zhì)上講，所有商業(yè)活動(dòng)都是在人的行為上下賭注?！?br /> ——《“厚”數(shù)據(jù)的力量》（The Power of ‘Thick’ Data）,《華爾街日?qǐng)?bào)》

問題的質(zhì)量決定了結(jié)果的用處。提出錯(cuò)誤的問題跟用原型解決錯(cuò)誤的問題如出一轍，它們都會(huì)給你一些你不想要的東西。從優(yōu)先級(jí)最高的問題開始。確定這類問題的辦法是：如果你在這些問題上的假設(shè)搞錯(cuò)了或忽略了，風(fēng)險(xiǎn)會(huì)最大。

最重要的研究問題是你想要知道什么，而不是你在訪談中要問什么。事實(shí)上，直接拋出你的研究問題往往是最糟糕的方式。人們往往不知道或者不愿承認(rèn)他們真實(shí)的行為，但人人都很擅長(zhǎng)編造答案。

設(shè)計(jì)研究總是和用戶研究混淆?；卮鸶邇?yōu)先級(jí)研究問題的方式多種多樣，跟有代表性的用戶對(duì)話只是其中一種。你所需要知道的，并非都是與用戶相關(guān)。

通常，最關(guān)鍵的問題是：“基于證據(jù)，我們對(duì)客戶、競(jìng)爭(zhēng)、內(nèi)部能力真正了解些什么？”問法各有不同。這可能是一個(gè)非常難以完全誠實(shí)作答的問題，但又得在短時(shí)間內(nèi)回答。

UXRen

5、時(shí)間和金錢永遠(yuǎn)是夠用的

當(dāng)研究被定義為設(shè)計(jì)之外的一種工作，人們就很容易把收集證據(jù)當(dāng)作額外負(fù)擔(dān)，找理由不做。

通常，團(tuán)隊(duì)必須獲得權(quán)威人士的許可，才能進(jìn)行研究工作。提問本質(zhì)上是對(duì)權(quán)威的挑戰(zhàn)。如果你曾經(jīng)和一位不同意為百萬美元項(xiàng)目開展定性研究的領(lǐng)導(dǎo)合作，那么問問自己，這位領(lǐng)導(dǎo)購買一輛價(jià)值5萬美元的汽車前會(huì)不會(huì)自己做做研究？口頭上提出反對(duì)意見，心里面往往是害怕自己的主意被破壞，被證明錯(cuò)誤，或者不那么行之有效。

如果你的目標(biāo)和高優(yōu)先級(jí)問題明確直白，不管時(shí)間和預(yù)算如何，你都可以了解到一些有用的信息。比如在線研究，午餐時(shí)間外出觀察，測(cè)試其他產(chǎn)品的可用性，發(fā)揮創(chuàng)意。

只要不是做調(diào)查就行。

UXRen

6、不要指望數(shù)據(jù)能改變想法

“當(dāng)一個(gè)人要靠著對(duì)某件事的不理解來拿薪水時(shí)，要讓他理解這件事是很困難的。”—厄普頓·辛克萊（Upton Sinclair）

即使研究已經(jīng)證明了這一點(diǎn)，但訓(xùn)練有素的專業(yè)研究者還是往往很難接受。如果你習(xí)慣和重視某種特定數(shù)據(jù)類型的同事一起工作，那你可能很難去說服那些不假思索就否定這種觀點(diǎn)的人。而且，可能會(huì)因?yàn)閿?shù)據(jù)不足而讓某人覺得自己的專業(yè)能力受到了侮辱。

收集證據(jù)的全部意義在于基于證據(jù)做出決定。如果這些證據(jù)破壞或者反駁了決策者所信奉的想法，他們就會(huì)找理由去否定或忽視這些證據(jù)。這也是定性研究者在一些工程師驅(qū)動(dòng)的組織中處境艱難的核心原因。即使問題需要的是更具描述性的答案，熟悉且擅長(zhǎng)數(shù)字的人卻想要用數(shù)字表達(dá)的答案。

因此，在嘗試用數(shù)據(jù)去影響決策之前，你必須了解你的同事和領(lǐng)導(dǎo)的個(gè)人特點(diǎn)和他們所處的環(huán)境，了解他們是怎么做決定的。

UXRen

7、接受混亂帶來的不完美

“我們善變，愚蠢，記憶力差，且有自我毀滅的天賦?！?br /> ——蘇珊·柯林斯（Suzanne Collins）,《饑餓游戲：嘲笑鳥》（ Mockingjay）

人類的生活是混亂的。人類如果沒有遇到問題，就不需要產(chǎn)品和服務(wù)，我們也就不會(huì)有工作。在真實(shí)、混亂的世界中為人們找出解決問題的最佳途徑需要一些時(shí)間，并在一定程度上放開控制。雖然有必要采取一種合乎道德的、足夠嚴(yán)格的方法，但并不存在絕對(duì)純凈的定性環(huán)境。明確的目標(biāo)和好的問題可以承受各種不可預(yù)知的情況的考驗(yàn)。

人們希望開展舒適有序、顯得專業(yè)的活動(dòng)，這導(dǎo)致他們不恰當(dāng)?shù)厥褂媒裹c(diǎn)小組、可用性實(shí)驗(yàn)室、眼球追蹤、調(diào)查和光鮮的報(bào)告等方式，但其實(shí)，不那么正式的研究可能會(huì)更加有效。

將證據(jù)納入設(shè)計(jì)決策，本身就是一個(gè)增強(qiáng)了解的過程。你永遠(yuǎn)不會(huì)找到正確的答案并解決問題。如果過程行之有效，你就會(huì)在做決策時(shí)信心備增。

UXRen

8、致力于合作

每個(gè)從事相同工作的人面對(duì)的都是相同的現(xiàn)實(shí)。做出產(chǎn)品決策的人需要對(duì)信息完全知情。如果知識(shí)只存在于一個(gè)人的頭腦中（除非你在倫敦，而那個(gè)人是你的出租車司機(jī)），那么知識(shí)本身有多好并不重要。

一組人制作報(bào)告，而另一組人收到報(bào)告后置若罔聞，便是沒有合作的研究。如果這樣工作，即使是最用心的團(tuán)隊(duì)也會(huì)讓知識(shí)溜走。而如果合作中缺乏證據(jù)，則意味著每個(gè)人都心照不宣地默認(rèn)：勝出的是個(gè)人偏好。這兩種方法都不是最有效的。

最有效的方法，是讓產(chǎn)品開發(fā)人員直接參與提問和回答。這樣做也很有趣。實(shí)現(xiàn)這一點(diǎn)的方法有多種，依具體公司或機(jī)構(gòu)而定。

提問關(guān)鍵在于建立一個(gè)共享的決策框架，以便做出更快更好的決策。我曾經(jīng)就此召開了一場(chǎng)研討會(huì)，它帶來了改變。

UXRen

9、找到糾正你的偏差的伙伴

“我們可能對(duì)顯而易見的事情視而不見，也可能對(duì)自己的盲目視而不見?！?br /> ——丹尼爾·卡尼曼（Daniel Kahneman), 《思考，快與慢》（Thinking Fast and Slow）

你做了一些工作，找到了一些答案?，F(xiàn)在你需要確定它們的意義。在解釋研究結(jié)果時(shí)，合作變得尤為重要。每個(gè)人都被偏差所困擾，而且自己還無從察覺。我們所看到的是最符合我們現(xiàn)有信念的。因此，我們必須參考外部標(biāo)準(zhǔn)（包括預(yù)先設(shè)定的目標(biāo)和問題），一起工作，互相檢查。

這與你有多聰明或消息多靈通無關(guān)。一旦你接受了這一點(diǎn)，只要你在一個(gè)心理上有安全感和相互尊重的團(tuán)隊(duì)中工作，識(shí)別出偏差就會(huì)是一場(chǎng)有趣的游戲。

維基百科（https://en.wikipedia.org/wiki/List_of_cognitive_biases）提供了不錯(cuò)的認(rèn)知偏差清單，可以和認(rèn)知偏差圖（ Cognitive Bias Codex  ）一起打印出來貼在墻上。

也許，這就叫正確的設(shè)計(jì)。

UXRen

總之，當(dāng)我們?cè)谟懻撛O(shè)計(jì)研究時(shí)，實(shí)際上是在討論基于證據(jù)的設(shè)計(jì)。創(chuàng)作、批評(píng)和探究都是設(shè)計(jì)過程中不可分割的一部分。將它們分裂開來，就會(huì)因無知、自負(fù)或恐懼而錯(cuò)上加錯(cuò)。

設(shè)計(jì)是一種價(jià)值的轉(zhuǎn)換。在實(shí)現(xiàn)任何產(chǎn)出之前，你必須先問問人們真正需要什么、看重什么，問問你希望從中得到什么樣的商業(yè)價(jià)值回報(bào)。

只要你采取道德的方法，誠實(shí)對(duì)待你的所見所聞，朝著富有價(jià)值的目標(biāo)前進(jìn)，那么，你所提出的問題和你找到答案的方式都無關(guān)緊要。正確的方法并非只有一種，正確的答案也并非只有一個(gè)。享受不確定性吧！它永無止境。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

不管是做設(shè)計(jì)（感性）還是設(shè)計(jì)規(guī)范（理性），都是仁者見仁智者見智的，都很主觀。我是想闡述出自己的想法供大家參考，文章中的數(shù)值也不是固定標(biāo)準(zhǔn)，還是希望大家根據(jù)不同的項(xiàng)目需求，去解決不同的實(shí)際問題。

目錄

1.下拉菜單

   1.1 了解側(cè)邊導(dǎo)航欄

   1.2 繪制矩形框 

   1.3 文本行高

   1.4 層級(jí)劃分

   1.5 確定距離

2.分頁

   2.1 了解分頁

   2.2 繪制普通分頁

   2.3 繪制首末分頁

   2.4 繪制跳轉(zhuǎn)分頁

3.步驟條

   3.1 了解步驟條

   3.2 繪制步驟條

1.1 了解側(cè)邊導(dǎo)航欄

側(cè)邊導(dǎo)航欄就是固定在側(cè)邊或從側(cè)邊劃出的導(dǎo)航欄，一般應(yīng)用在企業(yè)網(wǎng)站的觸發(fā)型導(dǎo)航欄上，或后臺(tái)頁面/系統(tǒng)的左側(cè)功能性導(dǎo)航欄上。側(cè)邊導(dǎo)航欄的方向是根據(jù)業(yè)務(wù)需求來做調(diào)整的，方向在那邊就往哪邊對(duì)齊。我們先了解一下側(cè)邊導(dǎo)航欄的樣式。

設(shè)計(jì)師的對(duì)設(shè)計(jì)的理解和審美決定了周圍要留多少的空白。

1.2 繪制矩形框

矩形框的高度可以隨著屏幕高度的變化而變化，所以不需要考慮。那只定義矩形框的寬度就行了，寬度分別是：?。?40px）、中（280px）、大（280px）。當(dāng)我們決定采用哪種尺寸后，就要定義矩形框與內(nèi)容之間的距離了。下圖所示的例子是以中等尺寸來做參考的。

1.3 文本行高

當(dāng)我們繪制好矩形框，就要往里填內(nèi)容了。文本行高上一章已經(jīng)講過了，就不多說了。文字的行高是由鼠標(biāo)狀態(tài)（Hover）的高度來確定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，側(cè)邊導(dǎo)航欄的文本左右多留一下白，不能使導(dǎo)航欄看上去太緊湊，給人感覺太壓抑，就會(huì)顯得不是很美觀了。

1.4 層級(jí)劃分

因?yàn)閭?cè)邊導(dǎo)航欄中有樹形結(jié)構(gòu)，一個(gè)主級(jí)別可以分散為多個(gè)子級(jí)別，所以就需要?jiǎng)澐忠幌聦蛹?jí)。劃分層級(jí)的方法也有很多，可以改變字號(hào)、改變顏色、改變字形、改變距離，那我用的方法是改變距離。采用哪種方法還是要看具體需求，像那種需要想突出層級(jí)且對(duì)比強(qiáng)烈的需求，可以采用改變字號(hào)和改變字形（加粗）。下圖中顏色越深層級(jí)越高，另外要注意的是，大類也有層次，越往上層級(jí)越高。

1.5 確定距離

當(dāng)我們把矩形框繪制好，文本也填進(jìn)去后，就要確定每一個(gè)層級(jí)的距離了，我們要做出1>2>3的感覺出來，細(xì)微調(diào)整每個(gè)層級(jí)的間距，使它們的差異突顯出來。確定距離指的是每個(gè)層級(jí)左側(cè)的距離，這就像樓梯一樣，在上層的樓梯往往優(yōu)先級(jí)是最高的。層級(jí)1（收藏夾）與層級(jí)2（藝術(shù)類）之間多留了4px的空白，目的是為了突顯主級(jí)別與子級(jí)別之間的差異，稍微強(qiáng)化了一下主級(jí)別。

來看一下最終效果吧。

2.1 了解分頁

側(cè)邊導(dǎo)航的講完后來講講分頁，分頁有三種樣式：普通分頁、首末分頁、跳轉(zhuǎn)分頁，名字是隨便起的，能理解什么意思就行了，來讓我們了解一下它的樣式。

2.2 繪制普通分頁

接下來我們學(xué)著畫一下它。我把所有的分頁分為三種尺寸（大中?。?，分別是32px（?。?、36（中）、40（大），每一個(gè)小按鈕的曲率分別是4px（?。?、6px（中）、8px（大）。每個(gè)小按鈕之間的間隔我用的是4px，也可以用8px，4px雖然更容易誤觸，但視覺效果要比8px好很多。

當(dāng)然了以上數(shù)值也不是絕對(duì)的。尺寸、曲率和間隔都是需要根據(jù)項(xiàng)目需求與設(shè)計(jì)師自身審美來決定的。

2.3 繪制首末分頁

首末分頁就是在普通分頁的基礎(chǔ)上加兩個(gè)按鈕，分別是“跳轉(zhuǎn)到首頁”和“跳轉(zhuǎn)到末頁”。只要注意把“數(shù)字按鈕（分頁）”與跳轉(zhuǎn)首末頁按鈕”按優(yōu)先級(jí)分隔就可以了，要把控好這首末按鈕與數(shù)字按鈕之間的距離，距離過短容易誤觸，距離過長(zhǎng)會(huì)破壞整體性。

2.4 繪制跳轉(zhuǎn)分頁

跳轉(zhuǎn)分頁是在首末分頁的基礎(chǔ)上加上“總頁數(shù)”與“跳轉(zhuǎn)至指定頁數(shù)”這兩個(gè)功能。跳轉(zhuǎn)分頁前端顯示總頁數(shù)，后端顯示跳轉(zhuǎn)至指定頁數(shù)。所有按鈕模塊的間隔都成倍遞減，這樣不同分頁的功能，區(qū)分就會(huì)更明顯一些，而且它們之間也有隱性的關(guān)聯(lián)。

將分頁組件與其他組件組合起來看一下最終效果。圖片壓縮效果不是很好，要與實(shí)際效果（原始比例）差很多。

3.1 了解步驟條

步驟條相對(duì)比較簡(jiǎn)單，這里穿插一下講了吧。步驟條的樣式比較多，但他們的繪制方法都大同小異，我只單拿出一個(gè)來講，就不一一的進(jìn)行講解了。

3.2 繪制步驟條

步驟條其實(shí)不難繪制的，注意對(duì)象和元素之間的距離就可以了。留的距離也要講究一些，要?jiǎng)蚍Q不能出現(xiàn)左面留太多而右面留太少的情況，具有關(guān)聯(lián)性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題，不能一味的采用水平或垂直居中。只要熟練把控好距離，知道什么需求下留多少的白，那繪制不同樣式的步驟條，也會(huì)顯得游刃有余，做出的東西也更自然舒服體驗(yàn)也更好。

做設(shè)計(jì)要精益求精，把每一個(gè)像素點(diǎn)都要考慮到并合理運(yùn)用它們。

藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

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

引言

一、對(duì)設(shè)計(jì)的認(rèn)識(shí)

二、設(shè)計(jì)觀念

三、設(shè)計(jì)原則

四、設(shè)計(jì)思維

引言

前段時(shí)間在學(xué)習(xí)python語言的時(shí)候，我了解到在程序界有一種叫做“算法”的存在，其實(shí)“算法”就像武俠片里面的內(nèi)功心法，內(nèi)功心法越好就能激發(fā)越強(qiáng)的武功招式。在程序編寫時(shí)大部分的程序語言都可以使用“算法”來優(yōu)化程序的流暢度。比如，當(dāng)大量用戶同時(shí)使用程序時(shí)，“算法”就可以合理配置服務(wù)器資源防止服務(wù)器的崩潰。在設(shè)計(jì)的過程中其實(shí)也存在這樣的通用心法，事理學(xué)的認(rèn)識(shí)論其實(shí)就有點(diǎn)類似于“算法”，所以這一期我的分享題目叫《設(shè)計(jì)心法》。

一、對(duì)設(shè)計(jì)的認(rèn)識(shí)

·內(nèi)部因素與外部因素：

設(shè)計(jì)中我們可以將設(shè)計(jì)問題化分為外因（人，時(shí)，地，事）與內(nèi)因（技術(shù)，工藝，材料等），在上一期文章中我們談到設(shè)計(jì)可以定義為：人有目的創(chuàng)造活動(dòng)，往往現(xiàn)代生活中設(shè)計(jì)的目的不是唯一的，這就好比佩戴手表時(shí)我們可能不僅僅是為了查看時(shí)間，還可能是為了在潛水時(shí)防止手表被泡壞。因此，物“應(yīng)該是什么樣”表現(xiàn)的是對(duì)不同人與環(huán)境的適應(yīng)，就如同生物多樣性表現(xiàn)了對(duì)環(huán)境的適應(yīng)一樣。

除卻外部的環(huán)境因素，我們還要考慮的制作產(chǎn)物時(shí)所需要技術(shù)、工藝、材料、形態(tài)、結(jié)構(gòu)。內(nèi)部的因素其實(shí)代表了一種可能性，是一種可變通的元素組合。比如同樣是防水手表，我們可以采用耐浸泡的材料，也可以運(yùn)用防水工藝。（ps：在《事理學(xué)論綱》中內(nèi)部因素沒有成本，但是小胖認(rèn)為成本其實(shí)也算是設(shè)計(jì)中應(yīng)該考慮到的內(nèi)在因素，所以在這里我也將其歸納了進(jìn)來。）

總的來說外部因素代表了限定性，而內(nèi)部因素代表了可能性。設(shè)計(jì)的過程中應(yīng)當(dāng)了解外部的需求與限定，然后組織內(nèi)部結(jié)構(gòu)。在內(nèi)外因素之間找出一個(gè)契合點(diǎn)，設(shè)計(jì)就發(fā)生在這個(gè)契合點(diǎn)上。

·目標(biāo)與目標(biāo)系統(tǒng)

窗簾、太陽鏡、電焊面罩、等等這些看似風(fēng)馬牛不相及的物品，卻有著共同的目標(biāo)—— 遮擋強(qiáng)烈的光。在實(shí)際設(shè)計(jì)過程中目標(biāo)往往是抽像的，而目標(biāo)系統(tǒng)是具體的。目標(biāo)系統(tǒng)既包含特定的外部因素的限制也包含內(nèi)部因素的選擇。

同樣是手表，同樣是為了看時(shí)間，從技術(shù)到外觀在使用因素的限制下，也就決定了其品種的千差萬別。建立目標(biāo)系統(tǒng)是對(duì)實(shí)現(xiàn)目標(biāo)的外部因素限制的研究過程，也是從外部角度觀察、分析、歸納實(shí)現(xiàn)目標(biāo)條件的認(rèn)知過程、敘述過程。設(shè)計(jì)師應(yīng)將抽象的目標(biāo)轉(zhuǎn)化為目標(biāo)系統(tǒng)，完善的目標(biāo)系統(tǒng)才是優(yōu)秀設(shè)計(jì)的創(chuàng)意源泉。

·“使用”的意義

在“使用”物品的過程其實(shí)包含兩個(gè)方面，一是使用者——人的動(dòng)作：二是被使用者——物的動(dòng)作。人的動(dòng)作是人生理結(jié)構(gòu)和生存需要指示下的延伸，在動(dòng)作的引導(dǎo)下人的大腦對(duì)外界的刺激作出反應(yīng)，留下印象，形成經(jīng)驗(yàn)，儲(chǔ)存信息，成為意識(shí)。當(dāng)再次遇到類似的問題是，人會(huì)逐漸總結(jié)經(jīng)驗(yàn)并形成知識(shí)的遷移。物的動(dòng)作是人使用過程中人的動(dòng)作在物上的反應(yīng)，這就包括器物的變形、移動(dòng)、或是其他信息（比如聲音，燈光等等）。

在人使用物的過程中，為了使物更加符合人意志，自然要對(duì)物進(jìn)行改進(jìn)，使物更加適合人的生理結(jié)構(gòu)和需求目標(biāo)。比如在原始社會(huì)原始人類為了更有效地的獲取獵物，在原有的石頭上進(jìn)行敲擊加工使之更加符合使用習(xí)慣。在“使用”中人和物不斷磨合，這一過程實(shí)則就是產(chǎn)品迭代的過程。“使用”的意義在于它是一種積極的思維方法，是一種能啟發(fā)創(chuàng)造的設(shè)計(jì)起點(diǎn)。

·方式與合理

方式在設(shè)計(jì)中不是指的具體的某一個(gè)動(dòng)作，而是使用時(shí)產(chǎn)生的一系列動(dòng)作，人的行為與各動(dòng)作相對(duì)應(yīng)的物與物組成的環(huán)境組成了一個(gè)特定的社會(huì)現(xiàn)象，我們稱為“方式”。物是動(dòng)作對(duì)象，環(huán)境是行為條件。同樣，動(dòng)作使物有用行為使環(huán)境具備社會(huì)意義。

合理是指合乎客觀規(guī)律，合乎時(shí)代觀念，合乎社會(huì)準(zhǔn)則，合乎人類理想。合理是人類經(jīng)驗(yàn)、教訓(xùn)的總結(jié)，是認(rèn)識(shí)的升華、沉淀；是道德、行為、情操的法庭；也是在歷史的基礎(chǔ)上對(duì)未來的規(guī)劃。當(dāng)人在追求欲望的過程中，合理更像是一種約束人類行為的標(biāo)準(zhǔn)，通過合理的約束來引導(dǎo)人類的行為方向。

綜上合理的使用方式其實(shí)是設(shè)計(jì)的原則，通過合理的評(píng)估系統(tǒng)和反饋可以制約不合理的設(shè)計(jì)行為，在的設(shè)計(jì)活動(dòng)中，以“創(chuàng)造合理的生存方式”作為第一原則才能促進(jìn)人類往更好的方向發(fā)展

二、設(shè)計(jì)的觀念

·設(shè)計(jì)生態(tài)觀

自然界的生態(tài)系統(tǒng)是一個(gè)封閉的、可以自給自足的系統(tǒng)。在此系統(tǒng)中沒有開始也沒有結(jié)束，任何一環(huán)的在生態(tài)環(huán)境中都扮演著至關(guān)重要的角色。反觀現(xiàn)代設(shè)計(jì)生態(tài)卻并不存在這樣的循環(huán)。

現(xiàn)代經(jīng)濟(jì)學(xué)被認(rèn)為是研究人類需求與稀缺資源之間關(guān)系的學(xué)科。經(jīng)濟(jì)學(xué)中的生產(chǎn)者（企業(yè)）將有限的資源整合變成可盈利的“商品”，而消費(fèi)者是在有限收入下實(shí)現(xiàn)“效用最大化”的行為個(gè)體。消費(fèi)者購買行為發(fā)生后進(jìn)入“使用”階段，直至使用的物品失去使用價(jià)值?！拔铩睆馁Y源直到被銷毀經(jīng)歷了四個(gè)階段，這四個(gè)階段分別是產(chǎn)品、商品、用品、廢品。

現(xiàn)代市場(chǎng)經(jīng)濟(jì)下人的物質(zhì)需求被極大滿足，市場(chǎng)經(jīng)濟(jì)的增長(zhǎng)依賴消費(fèi)增長(zhǎng)，反觀人類的自然資源總體上卻在急劇減少。設(shè)計(jì)者除了的滿足生產(chǎn)者、消費(fèi)者、使用者的需求之外，還應(yīng)該思考如何將“廢品”分解利用形成設(shè)計(jì)生態(tài)閉環(huán)。

·設(shè)計(jì)美學(xué)觀

人類文明的發(fā)展大致經(jīng)歷了三個(gè)階段，這三個(gè)階段即古典主義、現(xiàn)代主義、和后現(xiàn)代主義。這三種文明的美學(xué)觀也可稱之為再現(xiàn)主義、表現(xiàn)主義和共生美學(xué)。這三種美學(xué)觀點(diǎn)的發(fā)展是相互交錯(cuò)的，只是主體上有區(qū)別。

當(dāng)代設(shè)計(jì)和藝術(shù)是以思考、感召、聯(lián)想的手法，以同觀眾、使用者共同創(chuàng)造為目的，以多種美學(xué)觀重疊、并行、綜合為基礎(chǔ)的共生美學(xué)觀為審美取向。技術(shù)與藝術(shù)共生，技術(shù)與各種美學(xué)觀共生，這就是當(dāng)代設(shè)計(jì)——后現(xiàn)代主義的美學(xué)特征。

三、設(shè)計(jì)原則

·有限理性原則

在藝術(shù)的創(chuàng)作中美可以被分為很多種，梵高的油畫是美的，米開朗基羅的雕像也是美的。其實(shí)任何事物，任何美都是相對(duì)的，在不同的時(shí)代背景和使用場(chǎng)景下我們對(duì)于美的定義都不同。

類比設(shè)計(jì)，衡量設(shè)計(jì)的標(biāo)準(zhǔn)不是對(duì)與錯(cuò)，而是相對(duì)滿意與不滿意。設(shè)計(jì)應(yīng)該遵循“有限理性”的原則，即設(shè)計(jì)的目的并不是尋找“最優(yōu)解”，而是“滿意解”。“最優(yōu)化理論”只適合作為設(shè)計(jì)中的一種技術(shù)方法使用，而且只有當(dāng)目標(biāo)屬性十分明確，可以用數(shù)量化衡量時(shí)才可運(yùn)用。

·適應(yīng)性原則

上文說過設(shè)計(jì)就發(fā)生在內(nèi)部因素和外部因素的“關(guān)系”中，而這其中的“關(guān)系”其實(shí)就是適應(yīng)的過程，設(shè)計(jì)還可以理解為是以一定的目的、一定的方式來達(dá)到與客觀條件內(nèi)部關(guān)系相適應(yīng)的人為適應(yīng)系統(tǒng)。設(shè)計(jì)的內(nèi)部因素、外部因素和設(shè)計(jì)目的是設(shè)計(jì)過程中應(yīng)當(dāng)遵守的具體內(nèi)容。

多數(shù)時(shí)候外部因素在適應(yīng)系統(tǒng)中是人們行為方式的主要決定因素。系統(tǒng)的復(fù)雜行為主要是其所處外部的復(fù)雜性的表現(xiàn)，而內(nèi)部因素少量限定屬性的制約，這才是完整的適應(yīng)性系統(tǒng)。

四、設(shè)計(jì)思維

設(shè)計(jì)思維實(shí)際上是圍繞著“問題”來展開的。所謂“問題”是指設(shè)計(jì)各要素交織在一起時(shí)，所產(chǎn)生的關(guān)系矛盾。好的設(shè)計(jì)一定是“問題”的良好協(xié)調(diào)統(tǒng)一體。研究“問題”的方法通常是通過觀察問題——分析問題——?dú)w納聯(lián)想——評(píng)價(jià)修正的模式來鞏固的。

觀察問題其實(shí)是在用戶調(diào)研中最常用的方法，定性調(diào)研中研究人員常常會(huì)使用觀察法來記錄用戶的行為，之后用研人員會(huì)使用“五問分析法”來抽象出用戶的真實(shí)需求。其實(shí)在事理學(xué)中也提出了類似的觀點(diǎn)。

  觀察法的幾個(gè)原則:

  1. 目標(biāo)明確——從現(xiàn)象到本質(zhì)（五問分析法）

  2. 忠實(shí)于對(duì)象——感官+體驗(yàn)

  3. 擴(kuò)延、比較——搜尋同類比較共性

  4. 由表及里、去粗取精——總體到局部再到整體

需求分析中有一塊人物畫像的部分，其中情景分析和故事板就是分析人物使用產(chǎn)品的外因和內(nèi)因，撰寫故事版時(shí)不妨按照以下路徑來展開。

  分析問題中應(yīng)當(dāng)結(jié)合設(shè)計(jì)中的基本路徑來分析：

  1. 尋找“物”存在的外在限制——人、環(huán)境、時(shí)間、條件等制約。

  2. 析出“物”的內(nèi)因與外因的邏輯“關(guān)系”——尋找現(xiàn)象依據(jù)

  3. 比較相似“物”的內(nèi)、外因的關(guān)系——透析共性基礎(chǔ)上的個(gè)性

具體的歸納、聯(lián)想和創(chuàng)造都應(yīng)該明確設(shè)計(jì)“目的”，結(jié)合實(shí)際中遇到的外部因素來具體創(chuàng)意創(chuàng)造。最后我們通過建立評(píng)價(jià)體系，優(yōu)化設(shè)計(jì)產(chǎn)物在設(shè)計(jì)生態(tài)中的體驗(yàn)和循環(huán)。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

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

天氣類界面欣賞！

藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

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

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

常見的頁面跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)等，再設(shè)計(jì)時(shí)需要考慮好其中的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，從而做出最合適的設(shè)計(jì)。

頁面跳轉(zhuǎn)在APP中屬于最常見，也是最基礎(chǔ)的一個(gè)交互細(xì)節(jié)點(diǎn)。

我們常見的跳轉(zhuǎn)方式：直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)、翻轉(zhuǎn)、聯(lián)動(dòng)；其它酷炫的效果我們看過很多，但是現(xiàn)實(shí)中能做到的又有幾個(gè)呢？

先講一下：視覺順序

首先我們看一下，我們的視覺順序「閱讀順序」是：左→右，上→下。因此延伸出目前APP最常見的兩種頁面跳轉(zhuǎn)方式：左右跳轉(zhuǎn)，上下跳轉(zhuǎn)。

直接跳轉(zhuǎn)

最原始、最簡(jiǎn)單的跳轉(zhuǎn)方式，web端常見，在APP中出現(xiàn)較少，標(biāo)簽切換常見，這個(gè)比較簡(jiǎn)單，沒什么講的。

常用于快速開發(fā)，Android中常用。

實(shí)現(xiàn)難度：無；

維護(hù)成本：無。

左右跳轉(zhuǎn)

最常見的跳轉(zhuǎn)方式。（ios原生效果）

實(shí)現(xiàn)難度：簡(jiǎn)單 ；

維護(hù)成本：低；

運(yùn)用場(chǎng)景：夫級(jí)→子級(jí)→子子級(jí)，依次類推。

常用場(chǎng)景：

1. 對(duì)應(yīng)功能的展開：常以導(dǎo)航形式的存在，如美團(tuán)首頁的美食、電影、住店等分流入口。
2. 對(duì)于內(nèi)容的展開：如聊天列表>聊天窗；文章列表>到文章詳情。
3. 對(duì)于活動(dòng)廣告的展開：banner圖廣告、彈窗廣告等，比較常見。

這里有個(gè)細(xì)節(jié)要注意，就是我們的返回鍵在左上角，也就養(yǎng)成了用戶一種習(xí)慣，左上角的鍵，與點(diǎn)擊之后的效果，往往就應(yīng)該是頁面從右側(cè)退出的樣子，與進(jìn)入時(shí)反向的效果。

這也是為什么大部分APP不會(huì)把入口按鈕放在左上角的原因。

那么左上角這個(gè)位置，除了給返回鍵當(dāng)做固有的位置外。還常常用于抽屜式導(dǎo)航，因?yàn)槌閷鲜綄?dǎo)航的方向，與返回時(shí)的移動(dòng)方向是一致的。常見抽屜式導(dǎo)航APP如：滴滴打車、摩拜單車等。

上下跳轉(zhuǎn)

相對(duì)于左右跳轉(zhuǎn)，上下跳轉(zhuǎn)就比較難理解了。

實(shí)現(xiàn)難度：簡(jiǎn)單 ；

維護(hù)成本：低。

這種跳轉(zhuǎn)方式也很常見，但是大部分人不清楚什么時(shí)候用，這里我們簡(jiǎn)單分析下。

運(yùn)用場(chǎng)景：

1. 對(duì)當(dāng)前頁面創(chuàng)建新的條目時(shí)；

2. 獨(dú)立啟動(dòng)的一個(gè)子內(nèi)容。（如小程序：微信/支付寶等）

比如我們?cè)谖⑿帕奶祉?，發(fā)起一個(gè)聊天的時(shí)候：

還有我們新添加群人員時(shí)，新建筆記本時(shí)，新建地址時(shí)等。

我們用微信聊天頁面在舉例：點(diǎn)擊＋號(hào)離的內(nèi)容時(shí)：圖片、拍照、位置、紅包、收藏等，都是采用下到上的方式呈現(xiàn)，因?yàn)檫@些創(chuàng)建都是對(duì)當(dāng)前聊天窗口一次性產(chǎn)生內(nèi)容。（大家可以去感受一下這些細(xì)節(jié)）

下面我們看下百度的設(shè)置>地址管理>添加地址：左右>左右>上下。

翻轉(zhuǎn)

實(shí)現(xiàn)難度：中等；

維護(hù)成本：低；

運(yùn)用場(chǎng)景：完全切換內(nèi)容，換到一個(gè)全新的內(nèi)容集合里。

常見的有平安好醫(yī)生中間的按鈕，一級(jí)大姨媽APP中間的商城。

聯(lián)動(dòng)性

實(shí)現(xiàn)難度：高 ；

維護(hù)成本：高；

運(yùn)用場(chǎng)景：元素之間從上級(jí)到下級(jí)關(guān)聯(lián)性強(qiáng)。

如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內(nèi)APP很少有這種聯(lián)動(dòng)效果，因?yàn)橐坏╉撁娼Y(jié)構(gòu)改變，整個(gè)效果基本無法復(fù)用。

類似于這種強(qiáng)聯(lián)動(dòng)，我們會(huì)在很多概念設(shè)計(jì)稿中看到，但是在實(shí)際的APP是很少見到的。因?yàn)殚_發(fā)成本/維護(hù)成本都很高。

搜索頁面打開

這里強(qiáng)調(diào)一下搜索頁面。搜索頁面的進(jìn)入往往有兩種形式。一直是icon做入口，另一種是搜索框做入口。

icon做入口：更像是上下級(jí)關(guān)系，常用左右跳轉(zhuǎn)來實(shí)現(xiàn)。比如：抖音。

搜索框做入口：點(diǎn)擊就給與獲取光標(biāo)的感知，所已做好做簡(jiǎn)單的聯(lián)動(dòng)過渡效果。比如：微信、云音樂。

其它方式

關(guān)于其它方式，基本上只有極個(gè)別的APP中可以看到。

其它的方式，要結(jié)合實(shí)際的情況來考究。一定要注意關(guān)聯(lián)性。比如微信新出的浮動(dòng)展開效果，因?yàn)樵匾?dòng)，為了更加貼合所以有了收縮的效果。

結(jié)語

形式上其實(shí)就是上下左右內(nèi)外?？紤]好之間的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，就可以幫助我們找到最合適的設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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ù)。