如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
相比于典型的字、句型結構和圖像，不同尋常的字、句型結構以及圖像會更容易被人們記住。正因為如此，我們在日常工作中才會經常接到類似以下的需求：將新/重要功能的入口，或者運營活動的入口做特殊化處理，增加趣味性來讓用戶加強印象。
這種現象被稱作為梵雷斯托夫效應（相對于普通事件或物體，要記得獨特、有特色的事件或物體可能性會大增）。梵雷斯托夫效應有兩個觸發條件：背景不同以及經驗不同。背景不同是指一個刺激物與周圍的刺激物不同，比如在一串字母中突然出現了一個數字，那個數字就會讓人印象深刻；
經驗不同則是指一個刺激物與記憶中的經驗不同，比如一些經常被我們誤讀的成語，因為與平時的經驗相悖，所以看到正確解釋的時候印象特別深刻。
我們在了解了這兩個觸發條件之后，就可以利用它們來觸發梵雷斯托夫效應，從而幫助我們做出令用戶印象深刻的設計。下面就結合實際案例來看看如何利用它們。
前面說過，背景不同是指一個刺激物與周圍的刺激物不同。具體到界面中，我們可以理解為在一堆相同類型的元素/模塊中，對其中需要突出的做特殊化處理。
案例1 功能入口
京東金融底部導航中的“信用”以及保險頁面中金剛區的“1元購”，都采用了與同類型元素不同的視覺樣式。前者采用了色塊+動效，后者采用了3D視角，分別讓它們在底部導航和金剛區中“脫穎而出”，引起用戶的關注。
案例2 列表內元素
愛奇藝的首頁推薦中，其中一個視頻內容的封面是采用動圖的形式，在其他靜態封面的襯托下，就顯得格外醒目。飛豬的首頁推薦中，則是把專題欄目的信息部分（彩色底白字）設計得與其他商品（白底黑字）差異較大，來吸引用戶關注點擊。
案例3 模塊之間
美團外賣的個人中心將一些常用功能至于一個單獨的模塊中，并且將其中的圖標設計成與其他模塊內的圖標所不同的樣式（黃色填充），如此即突出了常用功能模塊。另一邊愛奇藝的個人中心，“會員服務”與“我的泡泡”則是直接從下面的宮格式布局中脫離出來，并且將各自的一些功能外置，布局交互完全不同于下面的其他模塊，以達到突出這兩個模塊的目的。
以上三個就是典型的“背景不同”觸發梵雷斯托夫效應，從而讓用戶印象深刻的案例。不難發現，對于“背景不同”，已經應用的比較廣泛，并且大家也較為熟知了，接下來看看“經驗不同”。
經驗不同需要顛覆過去的認知，我們可以理解為在一些已經被大家所熟知的視覺/交互中，對其進行“改革創新”。
案例1 虎撲評論點贊
虎撲中的評論點贊不同于我們看到的其他產品，它采用的是一個燈泡ICON來表達該評論“亮了”，更貼合用戶對有趣評論贊賞認同的真實場景。與眾不同的方式也加強了用戶的印象，提升了用戶的黏度。
案例2 嗶哩嗶哩打賞
嗶哩嗶哩中的打賞采用了“馬里奧踩蘑菇”游戲的形式，不同的磚塊代表不同的打賞數額，選擇完數額，滑動馬里奧頂一下磚塊就完成了打賞的整個過程。相比于普通的宮格式菜單選擇，是不是有意思多了呢？
案例3 微信讀書推薦
微信讀書的書城中有一個“搖一搖”的功能，搖動一下手機或者點擊一下“搖一搖”ICON，就會隨機推薦一本書給你。每一次搖動背后的不確定性就像搶紅包一樣，滿足了用戶的獵奇心理，提升了體驗的趣味性。相比于普通的推薦版塊，不僅能讓用戶印象深刻，更會讓他們對此愛不釋手。
其實這些“經驗不同”的案例也不完完全全是創新，比如搖一搖之前就是微信中的一個社交功能。大家可以將平時看到的有意思的設計記錄下來，并思考一下可以復用在哪些地方，說不定下次功能更新就能用上了哦～
在利用“背景不同”時，需要注意避免出現處處都強調的情況。每個元素/模塊都突出了，也就失去了重點，如下圖。
而“經驗不同”需要注意的是，避免為了創新而創新，讓“驚喜”變成“驚嚇”。如下圖，
“清音”作為一個標簽指示，顯然與我們平時所看到的那些標簽樣式大不相同，足以讓我們印象深刻。但是，在知道它是一個標簽之前，我曾誤以為它是一個按鈕。在觸擊無反饋并且右滑屏幕發現后面還有“濁音”之后，我才知道原來這是一個標簽……這樣的“經驗不同”只會造成“負面”的印象深刻。
相對于普通的事物，特殊化的事物更容易讓人印象深刻，我們稱這為梵雷斯托夫效應。觸發梵雷斯托夫效應有兩個條件：背景不同和經驗不同，我們可以利用這兩個條件來做出令用戶印象深刻的設計。
“背景不同”：對需要突出的元素/模塊做特殊化處理，在同類型元素/模塊中脫穎而出。需要注意的是，避免到處都強調，從而失去強調的意義。
“經驗不同”：對過去所熟悉的視覺/交互進行“創新”，從其他不同類型的產品中復用、移植過來。需要注意的是，避免讓“驚喜”變成“驚嚇”。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Loading動畫，在現在的設計中已經是一個必須要考慮的系統元素，它能減緩用戶等待焦慮的心態，也能用來作為品牌透傳，增加曝光。
那關于loading動畫相關知識，我覺得對于設計師來說是有必要去了解的，所以我找到了這篇優秀文章，讓大家能夠深入了解loading動畫，透過現象看本質，學以致用。
圖片來源：Domaso
在用戶心目中，優秀的應用、工具、網站都應該是制作精良且能快速響應他們需求的產品。
舉一個真實的例子：最近我們新發布了一個用戶評價的應用，第一個版本并不完美，loading延遲在2-3秒。
你猜怎么著？
很多人認為這3秒是一個故障。在實際開發中，你可能要面對龜速的網絡，沒有優化的代碼，操作時間長或數據處理太多等問題。因此，App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產品第二次機會，但絕大多數人會立即退出它。
除非你的產品界面對用戶的行為提供了明確的即時反饋。剛才發生了什么？是操作錯誤還是在等待服務器的請求？用戶需要等待多長時間才能正常使用這個工具或網站？用戶為什么要等待呢?
讓我們一起深入了解Loading動畫：
對于這種類型的反饋，設計師會使用進度條、loading示意圖、預loading、或旋轉器。它們向用戶解釋什么時間發生了什么或正在loading的過程，以減少用戶的心理焦慮。
你覺得設計師是從什么時候開始考慮加上這種反饋的？
我很驚訝的看到關于Nielsen Norman的一篇文章，提到響應時間和loading動畫是在1993年（參考1985年的資料）：
如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋。【Myers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】
顯示進度的三個主要優點：向用戶保證系統沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時間，讓用戶能騰出時間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內容，減少等待的焦慮。—?Jakob Nielsen, on January 1, 1993
自從Web 1.0以來，幾乎每個網站都有loading狀態，用戶可以注意到當頁面內容正在loading時，這些Loading動畫活躍的身影。
在2007年的時候，網站的Loading形式大概是下面這張圖上的樣子：
2007年時的Loading
在那個年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動畫。
到了2010年，隨著CSS3的迅猛發展，出現了很多教程教大家如何做CSS3動畫，也能找到大量的loading 動畫預設包。設計師也可以在Ps cs5中做這種loading動畫，這個在10年前是非常流行的。
在那時，Loading動畫更像是web的專屬問題，因為頁面loading確實是一個問題。在2010年的時候，很多Flash網頁都做了一些很有創意的loading動畫：
30個創意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
漸漸地，設計師們開始不滿足于簡單的進度條和旋轉Loading，到2014年-2016年的時候，變得更加關注這塊的設計。所以，你能發現更多關于loading教程，免費的Loading設計資源，插件和開源項目。
2016年出現的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
設計趨勢和方法已經發生了變化，但向用戶提供有效反饋的原則依然需要遵循。
優秀loading動畫所具備的特征
在一個完美的世界里，loading動畫應該：
如果你的工具或網站工作的足夠快，那就是非常完美的?；蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A期，顯示好看的loading動畫只是一個緩兵之計，等待太久了一樣會惹惱用戶。所以，首先應該是解決內容的loading問題。
它可以是一條簡單的文本信息，告知大致的等待時間，也可以是可視化的圖形來表示。總共上傳了多少文件？更新需要多少分鐘？已經進行到了什么階段？這些體驗上的設計細節都可以給用戶預期并減少焦慮。
宇航員數據loadingby Cream M.
一些應用的loading過程，通常讓用戶不大容易理解。一個好的Loading動畫，應該要告知用戶等待的原因以及等待的背后軟件正在做什么：
文件獲取動畫 by Vinoth
讓我們說回我的案例，那個反饋工具軟件。當我們的等待時間超過1秒時，我們決定給這段等待時間增加一段解釋。動畫說明應用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：
好的loading動畫
可以放一個有趣的動畫來吸引人，讓用戶的眼睛始終保持忙碌。
動畫來源：Alex Kunchevsky
這與上面提到的一點非常相關，如果你在等待的過程中發現了一些能夠吸引用戶注意力的東西，那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配，有趣的想法，或者是一個什么特別的東西。
蛋糕loading by Pierre Kleinhouse
如果用戶在用你的應用或者網站時會有一段等待時間，為什么不機智的利用好這段時間呢？我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中，讓它成為一個非常重要的設計細節：
BCG的車票應用動畫 by Antonin
細節可以做出精彩
雖然有些人可能會認為Loading只是一個很小的UI細節，但它其實也有許多類型和變化。一般來說，我把loading動畫分為幾類，進度條，無限循環的loading圖和骨架圖。
當可以明確loading時間時使用，進度條可以通過數字或視覺化的形式來表現。
有數字進度的，有時也稱為百分比指示符。他們可以簡單直接，也可以很有創意，需要對你的用戶業務表達更有效：
一個app loading頁 by Nguyen Tran
你也可以找到有趣的進度條和循環動畫結合的loading圖。
Loading動畫by Dragonlady
進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態。根據UI需求的不同，進度條也可以是線性的，沒有百分比的形式。
想想Gmail，它沒有顯示進度百分比，但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創意的例子：
Gamil loading和一個創意loading動畫 by Allen Zhang
當loading的時間是未知的時候來使用，它可以是默認的旋轉圖，也可以是一些創意動畫，顯示應用正在做一些事情。
計算loading圖標 by Hoang Nguyen
創意性loading動畫一樣可以與業務緊密相關，并幫助支持品牌發聲。請思考下那些應用會使用這種loading動畫？
LittlePin Spinner by Daniel Sofinet
無限循環動畫要求用戶在上傳或執行某些操作時等待，但不要求具體需要多久時間，它們可能會非常簡單或非常有創意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠不停下來。
如你所見，如今的loading動畫不僅僅只是一個系統狀態的UI元素。
骨架動畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內容。
這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應用。
舉個栗子，如果你使用的是網頁設計工具Figma，你會在頁面頂部看到一個進度條，同時還在逐步loadingUI：首先你會看到占位符，然后才是可用數據：
Figma UI
除了這篇文章中所展示的一些優秀案例和Dribbble上的設計概念，在目前大多數應用中，你可能能看到還是一個默認的Loading。
有一段時間，簡單的Loading被大眾所推崇，因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb）。使用默認的或開源的loading要容易的多，不需要設計師和開發花心思來設計和實現它。
如果你正在開發MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創意，也并不會對你的產品有多么大的幫助，如果它不能解決真正的需求。
一些簡單的loading動畫案例
有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節，日益成熟的設計公司，更好的科技環境，更方便的設計工具，這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現自己設計能力的一種方式。
即使在我們只有5人的初創公司里，我們也會考慮更好的用戶體驗，讓我們用戶等待的體驗更愉快。否則，我們做的反饋工具可能會失去用戶，沒有人希望失去用戶。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近，我注意到初創企業和成熟企業都對研究熱情備增 。企業欣然接受這一觀點：富有意義的創新，需要把客戶作為復雜生命體來理解。這太棒了。
我也反復聽過不少錯誤和模棱兩可的說法被反復提起。因此，為了幫助大家——因為我確實喜歡幫助人——我在這里介紹一份簡單易學的糾正理解偏差的小清單，希望能夠廣泛傳播（我很有信心，因為研究表明，讀者喜歡簡單易學的清單）。
UXRen
“我只知道一件事，就是我一無所知。”—蘇格拉底（Socrates）
我們在重視回答和害怕提問的環境中長大。在學校里，我們因為回答正確而得到獎勵；在工作中，我們因為提出好的點子而得到獎勵。難怪很多人會找理由避免做研究，特別是定性研究。顯得無知所產生的焦慮在心中滋長。定量的東西至少有標準化測試所帶來的熟悉感，令人舒適。保持研究型思維模式意味著要認識到偏差無處不在，確定性只是一種錯覺，任何答案的有效期都是短暫的。因此從長遠來看，好的問題更有價值得多。只有你承認自己沒有答案，才能問出好問題—也才會了解更多。
UXRen
“如果我們只測試開瓶器，可能永遠不會意識到客戶更喜歡螺旋蓋的瓶子?！?br /> —維克多·隆巴迪（Victor Lombardi），《設計敗道：來自著名用戶體驗案例的教訓》（Why We Fail）
我們理所當然會急于制作原型，測試原型。原型就是答案，可觸可摸，即使只是紙上的草圖。這樣做很舒服，比只是問問題舒服多了，即便這無異于燒錢。對于任何想要立竿見影地證明自己價值的人來說，只問問題，就像那只洗棉花糖的浣熊一樣，事與愿違。
太早制作原型的風險在于，這會把資源投入去回答一個無人問及的問題，同時還忽略了機會成本。測試原型可以幫助你優化好點子，但不會告訴你是否在解決恰當的問題，并且，也很容易將原型的亮點誤以為是點子的質量。不論如何，研究報告中的亮點也容易被誤認為是具有價值的洞察。
提出恰當的問題，不會讓不好的點子得到保留和維護，反而會幫助你更快地將它們識別和清除。你只需要有足夠強大的內心去擁抱錯誤。
（如果你正在想“嘿！這對我的團隊會有幫助”，我們會非常樂意去你的辦公室呆一天，確定你是否準備和Mule Design Studio合作。）
UXRen
除非你事先知道做某項研究的動機，否則提問就是浪費時間。你必須公開發誓：你的動機不是“為了證明自己是正確的”。這是每個人內心隱藏的目標。參看第一點。
通常，出于對研究的一腔熱情，團隊往往會在目標不明確、不一致時就開始跟客戶對話。然后，他們會感覺花了寶貴的時間，但卻不知道怎么去應用自己了解到的東西來提供解決方案，因而沒有什么可供展示的。于是就有了這樣的說法：“我們去年做了研究，但卻是浪費時間?！庇谑?，又回到了建立原型和測試原型的舒適圈。又或者，他們對聽到的內容有不同的理解，結果又因誰對誰錯更加爭論不休。
在大公司、大機構中，有時大家都有心照不宣的目標：“表現出我們在盡力做研究，不過還是讓產品負責人做他想做的事吧?！边@聽起來可能有點嘲諷意味，但通過跟許多在資金充足的研究部門的資深研究者交談，我了解到，盡管他們撰寫的報告相當精彩，但對決策的影響卻為零。承認這個事實，是阻止它發生的第一步。
完美絕佳的起點，是把你的目標設置成：“我們需要確定水準，快速理解他人的觀點?！辈灰谑潞笕我馓砑悠渌繕恕?
只有當你確定了目標，才知道自己需要了解什么。而在你選擇怎么回答之前，你必須知道自己的問題是什么。
UXRen
“從本質上講，所有商業活動都是在人的行為上下賭注?！?br /> ——《“厚”數據的力量》（The Power of ‘Thick’ Data）,《華爾街日報》
問題的質量決定了結果的用處。提出錯誤的問題跟用原型解決錯誤的問題如出一轍，它們都會給你一些你不想要的東西。從優先級最高的問題開始。確定這類問題的辦法是：如果你在這些問題上的假設搞錯了或忽略了，風險會最大。
最重要的研究問題是你想要知道什么，而不是你在訪談中要問什么。事實上，直接拋出你的研究問題往往是最糟糕的方式。人們往往不知道或者不愿承認他們真實的行為，但人人都很擅長編造答案。
設計研究總是和用戶研究混淆?；卮鸶邇炏燃壯芯繂栴}的方式多種多樣，跟有代表性的用戶對話只是其中一種。你所需要知道的，并非都是與用戶相關。
通常，最關鍵的問題是：“基于證據，我們對客戶、競爭、內部能力真正了解些什么？”問法各有不同。這可能是一個非常難以完全誠實作答的問題，但又得在短時間內回答。
UXRen
當研究被定義為設計之外的一種工作，人們就很容易把收集證據當作額外負擔，找理由不做。
通常，團隊必須獲得權威人士的許可，才能進行研究工作。提問本質上是對權威的挑戰。如果你曾經和一位不同意為百萬美元項目開展定性研究的領導合作，那么問問自己，這位領導購買一輛價值5萬美元的汽車前會不會自己做做研究？口頭上提出反對意見，心里面往往是害怕自己的主意被破壞，被證明錯誤，或者不那么行之有效。
如果你的目標和高優先級問題明確直白，不管時間和預算如何，你都可以了解到一些有用的信息。比如在線研究，午餐時間外出觀察，測試其他產品的可用性，發揮創意。
只要不是做調查就行。
UXRen
“當一個人要靠著對某件事的不理解來拿薪水時，要讓他理解這件事是很困難的?！薄蚱疹D·辛克萊（Upton Sinclair）
即使研究已經證明了這一點，但訓練有素的專業研究者還是往往很難接受。如果你習慣和重視某種特定數據類型的同事一起工作，那你可能很難去說服那些不假思索就否定這種觀點的人。而且，可能會因為數據不足而讓某人覺得自己的專業能力受到了侮辱。
收集證據的全部意義在于基于證據做出決定。如果這些證據破壞或者反駁了決策者所信奉的想法，他們就會找理由去否定或忽視這些證據。這也是定性研究者在一些工程師驅動的組織中處境艱難的核心原因。即使問題需要的是更具描述性的答案，熟悉且擅長數字的人卻想要用數字表達的答案。
因此，在嘗試用數據去影響決策之前，你必須了解你的同事和領導的個人特點和他們所處的環境，了解他們是怎么做決定的。
UXRen
“我們善變，愚蠢，記憶力差，且有自我毀滅的天賦?！?br /> ——蘇珊·柯林斯（Suzanne Collins）,《饑餓游戲：嘲笑鳥》（ Mockingjay）
人類的生活是混亂的。人類如果沒有遇到問題，就不需要產品和服務，我們也就不會有工作。在真實、混亂的世界中為人們找出解決問題的最佳途徑需要一些時間，并在一定程度上放開控制。雖然有必要采取一種合乎道德的、足夠嚴格的方法，但并不存在絕對純凈的定性環境。明確的目標和好的問題可以承受各種不可預知的情況的考驗。
人們希望開展舒適有序、顯得專業的活動，這導致他們不恰當地使用焦點小組、可用性實驗室、眼球追蹤、調查和光鮮的報告等方式，但其實，不那么正式的研究可能會更加有效。
將證據納入設計決策，本身就是一個增強了解的過程。你永遠不會找到正確的答案并解決問題。如果過程行之有效，你就會在做決策時信心備增。
UXRen
每個從事相同工作的人面對的都是相同的現實。做出產品決策的人需要對信息完全知情。如果知識只存在于一個人的頭腦中（除非你在倫敦，而那個人是你的出租車司機），那么知識本身有多好并不重要。
一組人制作報告，而另一組人收到報告后置若罔聞，便是沒有合作的研究。如果這樣工作，即使是最用心的團隊也會讓知識溜走。而如果合作中缺乏證據，則意味著每個人都心照不宣地默認：勝出的是個人偏好。這兩種方法都不是最有效的。
最有效的方法，是讓產品開發人員直接參與提問和回答。這樣做也很有趣。實現這一點的方法有多種，依具體公司或機構而定。
提問關鍵在于建立一個共享的決策框架，以便做出更快更好的決策。我曾經就此召開了一場研討會，它帶來了改變。
UXRen
“我們可能對顯而易見的事情視而不見，也可能對自己的盲目視而不見?！?br /> ——丹尼爾·卡尼曼（Daniel Kahneman), 《思考，快與慢》（Thinking Fast and Slow）
你做了一些工作，找到了一些答案?，F在你需要確定它們的意義。在解釋研究結果時，合作變得尤為重要。每個人都被偏差所困擾，而且自己還無從察覺。我們所看到的是最符合我們現有信念的。因此，我們必須參考外部標準（包括預先設定的目標和問題），一起工作，互相檢查。
這與你有多聰明或消息多靈通無關。一旦你接受了這一點，只要你在一個心理上有安全感和相互尊重的團隊中工作，識別出偏差就會是一場有趣的游戲。
維基百科（https://en.wikipedia.org/wiki/List_of_cognitive_biases）提供了不錯的認知偏差清單，可以和認知偏差圖（ Cognitive Bias Codex ）一起打印出來貼在墻上。
也許，這就叫正確的設計。
UXRen
總之，當我們在討論設計研究時，實際上是在討論基于證據的設計。創作、批評和探究都是設計過程中不可分割的一部分。將它們分裂開來，就會因無知、自負或恐懼而錯上加錯。
設計是一種價值的轉換。在實現任何產出之前，你必須先問問人們真正需要什么、看重什么，問問你希望從中得到什么樣的商業價值回報。
只要你采取道德的方法，誠實對待你的所見所聞，朝著富有價值的目標前進，那么，你所提出的問題和你找到答案的方式都無關緊要。正確的方法并非只有一種，正確的答案也并非只有一個。享受不確定性吧！它永無止境。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
不管是做設計（感性）還是設計規范（理性），都是仁者見仁智者見智的，都很主觀。我是想闡述出自己的想法供大家參考，文章中的數值也不是固定標準，還是希望大家根據不同的項目需求，去解決不同的實際問題。
目錄
1.下拉菜單
1.1 了解側邊導航欄
1.2 繪制矩形框
1.3 文本行高
1.4 層級劃分
1.5 確定距離
2.分頁
2.1 了解分頁
2.2 繪制普通分頁
2.3 繪制首末分頁
2.4 繪制跳轉分頁
3.步驟條
3.1 了解步驟條
3.2 繪制步驟條
1.1 了解側邊導航欄
側邊導航欄就是固定在側邊或從側邊劃出的導航欄，一般應用在企業網站的觸發型導航欄上，或后臺頁面/系統的左側功能性導航欄上。側邊導航欄的方向是根據業務需求來做調整的，方向在那邊就往哪邊對齊。我們先了解一下側邊導航欄的樣式。
設計師的對設計的理解和審美決定了周圍要留多少的空白。
1.2 繪制矩形框
矩形框的高度可以隨著屏幕高度的變化而變化，所以不需要考慮。那只定義矩形框的寬度就行了，寬度分別是：?。?40px）、中（280px）、大（280px）。當我們決定采用哪種尺寸后，就要定義矩形框與內容之間的距離了。下圖所示的例子是以中等尺寸來做參考的。
1.3 文本行高
當我們繪制好矩形框，就要往里填內容了。文本行高上一章已經講過了，就不多說了。文字的行高是由鼠標狀態（Hover）的高度來確定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，側邊導航欄的文本左右多留一下白，不能使導航欄看上去太緊湊，給人感覺太壓抑，就會顯得不是很美觀了。
1.4 層級劃分
因為側邊導航欄中有樹形結構，一個主級別可以分散為多個子級別，所以就需要劃分一下層級。劃分層級的方法也有很多，可以改變字號、改變顏色、改變字形、改變距離，那我用的方法是改變距離。采用哪種方法還是要看具體需求，像那種需要想突出層級且對比強烈的需求，可以采用改變字號和改變字形（加粗）。下圖中顏色越深層級越高，另外要注意的是，大類也有層次，越往上層級越高。
1.5 確定距離
當我們把矩形框繪制好，文本也填進去后，就要確定每一個層級的距離了，我們要做出1>2>3的感覺出來，細微調整每個層級的間距，使它們的差異突顯出來。確定距離指的是每個層級左側的距離，這就像樓梯一樣，在上層的樓梯往往優先級是最高的。層級1（收藏夾）與層級2（藝術類）之間多留了4px的空白，目的是為了突顯主級別與子級別之間的差異，稍微強化了一下主級別。
來看一下最終效果吧。
2.1 了解分頁
側邊導航的講完后來講講分頁，分頁有三種樣式：普通分頁、首末分頁、跳轉分頁，名字是隨便起的，能理解什么意思就行了，來讓我們了解一下它的樣式。
2.2 繪制普通分頁
接下來我們學著畫一下它。我把所有的分頁分為三種尺寸（大中?。謩e是32px（?。?6（中）、40（大），每一個小按鈕的曲率分別是4px（小）、6px（中）、8px（大）。每個小按鈕之間的間隔我用的是4px，也可以用8px，4px雖然更容易誤觸，但視覺效果要比8px好很多。
當然了以上數值也不是絕對的。尺寸、曲率和間隔都是需要根據項目需求與設計師自身審美來決定的。
2.3 繪制首末分頁
首末分頁就是在普通分頁的基礎上加兩個按鈕，分別是“跳轉到首頁”和“跳轉到末頁”。只要注意把“數字按鈕（分頁）”與跳轉首末頁按鈕”按優先級分隔就可以了，要把控好這首末按鈕與數字按鈕之間的距離，距離過短容易誤觸，距離過長會破壞整體性。
2.4 繪制跳轉分頁
跳轉分頁是在首末分頁的基礎上加上“總頁數”與“跳轉至指定頁數”這兩個功能。跳轉分頁前端顯示總頁數，后端顯示跳轉至指定頁數。所有按鈕模塊的間隔都成倍遞減，這樣不同分頁的功能，區分就會更明顯一些，而且它們之間也有隱性的關聯。
將分頁組件與其他組件組合起來看一下最終效果。圖片壓縮效果不是很好，要與實際效果（原始比例）差很多。
3.1 了解步驟條
步驟條相對比較簡單，這里穿插一下講了吧。步驟條的樣式比較多，但他們的繪制方法都大同小異，我只單拿出一個來講，就不一一的進行講解了。
3.2 繪制步驟條
步驟條其實不難繪制的，注意對象和元素之間的距離就可以了。留的距離也要講究一些，要勻稱不能出現左面留太多而右面留太少的情況，具有關聯性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題，不能一味的采用水平或垂直居中。只要熟練把控好距離，知道什么需求下留多少的白，那繪制不同樣式的步驟條，也會顯得游刃有余，做出的東西也更自然舒服體驗也更好。
做設計要精益求精，把每一個像素點都要考慮到并合理運用它們。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
目錄
引言
一、對設計的認識
二、設計觀念
三、設計原則
四、設計思維
引言
前段時間在學習python語言的時候，我了解到在程序界有一種叫做“算法”的存在，其實“算法”就像武俠片里面的內功心法，內功心法越好就能激發越強的武功招式。在程序編寫時大部分的程序語言都可以使用“算法”來優化程序的流暢度。比如，當大量用戶同時使用程序時，“算法”就可以合理配置服務器資源防止服務器的崩潰。在設計的過程中其實也存在這樣的通用心法，事理學的認識論其實就有點類似于“算法”，所以這一期我的分享題目叫《設計心法》。
一、對設計的認識
·內部因素與外部因素：
設計中我們可以將設計問題化分為外因（人，時，地，事）與內因（技術，工藝，材料等），在上一期文章中我們談到設計可以定義為：人有目的創造活動，往往現代生活中設計的目的不是唯一的，這就好比佩戴手表時我們可能不僅僅是為了查看時間，還可能是為了在潛水時防止手表被泡壞。因此，物“應該是什么樣”表現的是對不同人與環境的適應，就如同生物多樣性表現了對環境的適應一樣。
除卻外部的環境因素，我們還要考慮的制作產物時所需要技術、工藝、材料、形態、結構。內部的因素其實代表了一種可能性，是一種可變通的元素組合。比如同樣是防水手表，我們可以采用耐浸泡的材料，也可以運用防水工藝。（ps：在《事理學論綱》中內部因素沒有成本，但是小胖認為成本其實也算是設計中應該考慮到的內在因素，所以在這里我也將其歸納了進來。）
總的來說外部因素代表了限定性，而內部因素代表了可能性。設計的過程中應當了解外部的需求與限定，然后組織內部結構。在內外因素之間找出一個契合點，設計就發生在這個契合點上。
·目標與目標系統
窗簾、太陽鏡、電焊面罩、等等這些看似風馬牛不相及的物品，卻有著共同的目標—— 遮擋強烈的光。在實際設計過程中目標往往是抽像的，而目標系統是具體的。目標系統既包含特定的外部因素的限制也包含內部因素的選擇。
同樣是手表，同樣是為了看時間，從技術到外觀在使用因素的限制下，也就決定了其品種的千差萬別。建立目標系統是對實現目標的外部因素限制的研究過程，也是從外部角度觀察、分析、歸納實現目標條件的認知過程、敘述過程。設計師應將抽象的目標轉化為目標系統，完善的目標系統才是優秀設計的創意源泉。
·“使用”的意義
在“使用”物品的過程其實包含兩個方面，一是使用者——人的動作：二是被使用者——物的動作。人的動作是人生理結構和生存需要指示下的延伸，在動作的引導下人的大腦對外界的刺激作出反應，留下印象，形成經驗，儲存信息，成為意識。當再次遇到類似的問題是，人會逐漸總結經驗并形成知識的遷移。物的動作是人使用過程中人的動作在物上的反應，這就包括器物的變形、移動、或是其他信息（比如聲音，燈光等等）。
在人使用物的過程中，為了使物更加符合人意志，自然要對物進行改進，使物更加適合人的生理結構和需求目標。比如在原始社會原始人類為了更有效地的獲取獵物，在原有的石頭上進行敲擊加工使之更加符合使用習慣。在“使用”中人和物不斷磨合，這一過程實則就是產品迭代的過程。“使用”的意義在于它是一種積極的思維方法，是一種能啟發創造的設計起點。
·方式與合理
方式在設計中不是指的具體的某一個動作，而是使用時產生的一系列動作，人的行為與各動作相對應的物與物組成的環境組成了一個特定的社會現象，我們稱為“方式”。物是動作對象，環境是行為條件。同樣，動作使物有用行為使環境具備社會意義。
合理是指合乎客觀規律，合乎時代觀念，合乎社會準則，合乎人類理想。合理是人類經驗、教訓的總結，是認識的升華、沉淀；是道德、行為、情操的法庭；也是在歷史的基礎上對未來的規劃。當人在追求欲望的過程中，合理更像是一種約束人類行為的標準，通過合理的約束來引導人類的行為方向。
綜上合理的使用方式其實是設計的原則，通過合理的評估系統和反饋可以制約不合理的設計行為，在的設計活動中，以“創造合理的生存方式”作為第一原則才能促進人類往更好的方向發展
二、設計的觀念
·設計生態觀
自然界的生態系統是一個封閉的、可以自給自足的系統。在此系統中沒有開始也沒有結束，任何一環的在生態環境中都扮演著至關重要的角色。反觀現代設計生態卻并不存在這樣的循環。
現代經濟學被認為是研究人類需求與稀缺資源之間關系的學科。經濟學中的生產者（企業）將有限的資源整合變成可盈利的“商品”，而消費者是在有限收入下實現“效用最大化”的行為個體。消費者購買行為發生后進入“使用”階段，直至使用的物品失去使用價值?！拔铩睆馁Y源直到被銷毀經歷了四個階段，這四個階段分別是產品、商品、用品、廢品。
現代市場經濟下人的物質需求被極大滿足，市場經濟的增長依賴消費增長，反觀人類的自然資源總體上卻在急劇減少。設計者除了的滿足生產者、消費者、使用者的需求之外，還應該思考如何將“廢品”分解利用形成設計生態閉環。
·設計美學觀
人類文明的發展大致經歷了三個階段，這三個階段即古典主義、現代主義、和后現代主義。這三種文明的美學觀也可稱之為再現主義、表現主義和共生美學。這三種美學觀點的發展是相互交錯的，只是主體上有區別。
當代設計和藝術是以思考、感召、聯想的手法，以同觀眾、使用者共同創造為目的，以多種美學觀重疊、并行、綜合為基礎的共生美學觀為審美取向。技術與藝術共生，技術與各種美學觀共生，這就是當代設計——后現代主義的美學特征。
三、設計原則
·有限理性原則
在藝術的創作中美可以被分為很多種，梵高的油畫是美的，米開朗基羅的雕像也是美的。其實任何事物，任何美都是相對的，在不同的時代背景和使用場景下我們對于美的定義都不同。
類比設計，衡量設計的標準不是對與錯，而是相對滿意與不滿意。設計應該遵循“有限理性”的原則，即設計的目的并不是尋找“最優解”，而是“滿意解”?！白顑灮碚摗敝贿m合作為設計中的一種技術方法使用，而且只有當目標屬性十分明確，可以用數量化衡量時才可運用。
·適應性原則
上文說過設計就發生在內部因素和外部因素的“關系”中，而這其中的“關系”其實就是適應的過程，設計還可以理解為是以一定的目的、一定的方式來達到與客觀條件內部關系相適應的人為適應系統。設計的內部因素、外部因素和設計目的是設計過程中應當遵守的具體內容。
多數時候外部因素在適應系統中是人們行為方式的主要決定因素。系統的復雜行為主要是其所處外部的復雜性的表現，而內部因素少量限定屬性的制約，這才是完整的適應性系統。
四、設計思維
設計思維實際上是圍繞著“問題”來展開的。所謂“問題”是指設計各要素交織在一起時，所產生的關系矛盾。好的設計一定是“問題”的良好協調統一體。研究“問題”的方法通常是通過觀察問題——分析問題——歸納聯想——評價修正的模式來鞏固的。
觀察問題其實是在用戶調研中最常用的方法，定性調研中研究人員常常會使用觀察法來記錄用戶的行為，之后用研人員會使用“五問分析法”來抽象出用戶的真實需求。其實在事理學中也提出了類似的觀點。
觀察法的幾個原則:
1. 目標明確——從現象到本質（五問分析法）
2. 忠實于對象——感官+體驗
3. 擴延、比較——搜尋同類比較共性
4. 由表及里、去粗取精——總體到局部再到整體
需求分析中有一塊人物畫像的部分，其中情景分析和故事板就是分析人物使用產品的外因和內因，撰寫故事版時不妨按照以下路徑來展開。
分析問題中應當結合設計中的基本路徑來分析：
1. 尋找“物”存在的外在限制——人、環境、時間、條件等制約。
2. 析出“物”的內因與外因的邏輯“關系”——尋找現象依據
3. 比較相似“物”的內、外因的關系——透析共性基礎上的個性
具體的歸納、聯想和創造都應該明確設計“目的”，結合實際中遇到的外部因素來具體創意創造。最后我們通過建立評價體系，優化設計產物在設計生態中的體驗和循環。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
目錄
1.「注」入重量感
2.「空」出高級感
3.「圓」有親近感
4.「裝」出華麗感
5.「質」換畫面感
6.「寫」出文藝感
一.「注」入重量感
突出重量感是大多數設計師常用的技巧，在設計中，為了提高文案或者標題的視覺層級，很多設計師往往會從字體的重量感進行思考，給字體注入內容往往能加大字體視覺重量，字體的重量感也就是版面中的“存在感”，“存在感”一旦提高，視覺層級也伴隨著提高。
一般我們在突出字體重量感的方法上常常會選擇線條較粗的字體、加大描邊或者設計成立體字來突出“重量”，甚至可以縮小字體間距，營造緊張的感覺，使文字更具“重量"。另外在顏色上，黑色物品相對于淺色物品在視覺上顯得更重，這一點在字體上也同樣適用的。
二.「空」出高級感
字體的高級感一般體現在品等產品的設計上，利用大量的留白，在字體的顏色上盡量選擇近乎無彩色如灰色，做到簡潔大方、少即是多。而在字體類型的選擇上，襯線體往往比非襯線體更具有格調，宋體往往比黑體更加高雅，利用傳統字體也能給讀者一種信賴感。
看到這里也許有人會說：“從用戶體驗角度思考應該使用非襯線體，因為其更易讀、字形更簡潔。”而在《設計師要懂心理學》一書中表明研究發現：常規的襯線體和非襯線體兩者在理解難易度、閱讀速度和使用傾向并無差異。
三.「圓」有親近感
字體所展示出的親近感主要體現在于字體端角的圓滑上，先從生活常見的例子講起，在人類的常識里尖銳的物品往往會給人冰冷、危險和難以靠近的感覺，而圓滑的東西往往讓人有親近感，更利于吸引讀者接近。這里最形象的例子要數按鈕和圖標的演變，按鈕和圖標的設計從直角到圓角的演變，其中不乏也有以上原因。
在突出親近感時，圓角類型的字體所表達的感覺如果還不夠強烈，這里不妨可以選用較粗的線條字體再加上暖色系的顏色，這樣親近感就更加強烈了。
四.「裝」出華麗感
一般文字是用于閱讀，而為了博人眼球，設計師也慢慢讓文字字體有了裝飾，利用線條的不規則粗細來突出文字的“美”，從而體現出華麗感，華麗感較強的字體大多數用于女性品牌的產品，裝飾性高的文字，不僅引人注目的效果，還能強調了產品的“貴”。要注意的是修飾性的文字不利于閱讀，不適合大量文字，容易視覺疲勞。
五.「質」換畫面感
材質感的字體往往用在游戲的設計上比較多，將武器或游戲場景等有質感的東西貼在字體上，間接展示游戲場景、風格等。因此，運用材質的字體往往更具有畫面感，從而影響讀者視覺對大腦的影響，產生了身臨其境的感覺，于是在腦海中留下對產品認知。
質感的字體往往容易讓人感覺到“力量”，這也和第一點注入內容說法一樣。
六.「寫」出文藝感
手寫的字體，會讓讀者感覺到手的溫暖與膚觸的溫柔，這里被利用到的應該算淘寶商家的感謝信了，利用牛皮紙加上手寫字體，可謂是為了好評誠意滿滿。
手寫的字體還常常與手繪貼圖一起出現在手帳本，或可愛優雅、或呆萌粗線條；另外，你或許還能在文藝菜單上看到它，樸實無華卻清晰溫暖，文藝感十足。
后言
沒有最好的字體，只有合適的字體，字體的難度并不在于設計和選擇上，而是在于你選擇或設計的字體給讀者的感覺是否符合產品所想表達的亦或是讀者所需要的。
在設計中，字體的樣式往往起到輔助文案傳遞的作用，所以如何在不同的設計風格中用好字體尤為重要。字體如果用得好，在設計中常常會給讀者所需要的感覺，這里我們例舉幾種常見的感覺：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
常見的頁面跳轉方式有直接跳轉、左右跳轉、上下跳轉等，再設計時需要考慮好其中的關聯性，給出最符合用戶心理預期的過渡方式，從而做出最合適的設計。
頁面跳轉在APP中屬于最常見，也是最基礎的一個交互細節點。
我們常見的跳轉方式：直接跳轉、左右跳轉、上下跳轉、翻轉、聯動；其它酷炫的效果我們看過很多，但是現實中能做到的又有幾個呢？
首先我們看一下，我們的視覺順序「閱讀順序」是：左→右，上→下。因此延伸出目前APP最常見的兩種頁面跳轉方式：左右跳轉，上下跳轉。
最原始、最簡單的跳轉方式，web端常見，在APP中出現較少，標簽切換常見，這個比較簡單，沒什么講的。
常用于快速開發，Android中常用。
實現難度：無；
維護成本：無。
最常見的跳轉方式。（ios原生效果）
實現難度：簡單 ；
維護成本：低；
運用場景：夫級→子級→子子級，依次類推。
常用場景：
這里有個細節要注意，就是我們的返回鍵在左上角，也就養成了用戶一種習慣，左上角的鍵，與點擊之后的效果，往往就應該是頁面從右側退出的樣子，與進入時反向的效果。
這也是為什么大部分APP不會把入口按鈕放在左上角的原因。
那么左上角這個位置，除了給返回鍵當做固有的位置外。還常常用于抽屜式導航，因為抽屜式導航的方向，與返回時的移動方向是一致的。常見抽屜式導航APP如：滴滴打車、摩拜單車等。
相對于左右跳轉，上下跳轉就比較難理解了。
實現難度：簡單 ；
維護成本：低。
這種跳轉方式也很常見，但是大部分人不清楚什么時候用，這里我們簡單分析下。
運用場景：
1. 對當前頁面創建新的條目時；
2. 獨立啟動的一個子內容。（如小程序：微信/支付寶等）
比如我們在微信聊天頁，發起一個聊天的時候：
還有我們新添加群人員時，新建筆記本時，新建地址時等。
我們用微信聊天頁面在舉例：點擊＋號離的內容時：圖片、拍照、位置、紅包、收藏等，都是采用下到上的方式呈現，因為這些創建都是對當前聊天窗口一次性產生內容。（大家可以去感受一下這些細節）
下面我們看下百度的設置>地址管理>添加地址：左右>左右>上下。
實現難度：中等；
維護成本：低；
運用場景：完全切換內容，換到一個全新的內容集合里。
常見的有平安好醫生中間的按鈕，一級大姨媽APP中間的商城。
實現難度：高 ；
維護成本：高；
運用場景：元素之間從上級到下級關聯性強。
如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內APP很少有這種聯動效果，因為一旦頁面結構改變，整個效果基本無法復用。
類似于這種強聯動，我們會在很多概念設計稿中看到，但是在實際的APP是很少見到的。因為開發成本/維護成本都很高。
這里強調一下搜索頁面。搜索頁面的進入往往有兩種形式。一直是icon做入口，另一種是搜索框做入口。
icon做入口：更像是上下級關系，常用左右跳轉來實現。比如：抖音。
搜索框做入口：點擊就給與獲取光標的感知，所已做好做簡單的聯動過渡效果。比如：微信、云音樂。
關于其它方式，基本上只有極個別的APP中可以看到。
其它的方式，要結合實際的情況來考究。一定要注意關聯性。比如微信新出的浮動展開效果，因為元素要浮動，為了更加貼合所以有了收縮的效果。
形式上其實就是上下左右內外?？紤]好之間的關聯性，給出最符合用戶心理預期的過渡方式，就可以幫助我們找到最合適的設計。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
