如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
質感是什么？如何讓畫面擁有更高端的質感？本文由質感的原理出發，深入分析質感表現所需要的要素，并通過實例來講解如何在作品中表現高端質感。很多同學在設計完成后，總是會發現頁面很單薄，導致整體看起來很粗糙、不耐看。究其原因，大多數是因為頁面缺乏質感。
質感，對于設計作品來說，是一個非常重要的視覺元素。它能夠提升作品的層次，讓整個作品更高端、更有品質。
質感，基本釋義為所表現的物體呈現出的物質真實感和細膩的品質感。這是一種視覺的綜合感受，會觸動你的某種本能的綜合感官，讓你感覺非常舒服、非常爽。
我找了幾張比較富有質感的圖片，大家可以感受一下這種感覺。
觀察完這些圖片后，你發現有什么共同點了嗎？我們可以試著來分析一下。
首先，物體本身的型是好看舒服的，并且細節足夠精致。
其次，在光的影響下，物體的表面呈現出細膩的光澤變化，以及通透而舒服的陰影，展現了豐富的層級關系。正是光的作用，讓這些視覺元素得以表達，讓我們沒有觸摸便能感知到這種質感。
我們再來看一些優秀的擬物作品。大家對照一下，是否都遵循相同的要素。
觀察這些優秀的擬物作品，為什么會覺得有質感呢？首先圖標很精致，它的形具有一定的美感。但是這不足以讓它富有質感，關鍵是它也符合了上面所說的幾個質感要素。
最后，我們可以總結一下，質感產生的要素：
所以除了作品本身足夠精美以外，整個作品的光感需要和諧統一。每個元素表現的色彩變化規律（漸變色）、投影大小和投影間的相互影響，都需要與光感嚴謹的統一。
這就要求你在繪制所有元素時，需要去假定一個統一的光源，這樣才能讓物體擁有更真實的質感。
我們已經了解了質感產生的原理，下面就開始實際案例。每一個步驟我都會講解思考的過程和原因，方便大家理解。
1. 整體背景和主體框架繪制
建立畫布（1200 x 900）。用矩形工具繪制背景和主體框架（1100 x 700），圖層樣式為漸變疊加，光線方向統一。
漸變是為了模擬背景的質感和在光線下的變化，兩層光線方向需要統一。背景顏色稍淺且飽和度低，符合遠近的視覺規律。
2. 繪制投影和主體背景
復制矩形作為投影層，顏色調整為黑色，轉為智能對象后，加入高斯模糊效果。調整矩形圖層的模糊度和透明度，移到適當位置。具體參數對照圖中。投影的位置根據假定光源位置而定，使其符合視覺原理（詳見光線分析圖）。
繪制主體深色背景（1070 x 670），添加漸變疊加模式，漸變方向與前面保持一致。漸變的顏色對于質感非常重要，恰當且高級的漸變色，能夠在本質上提升畫面質感。而漸變方向則需要根據假定光源進行判定。
為什么要這么繪制漸變與投影的位置呢？我繪制了一張光線分析圖，大家可以從圖中看出假定光源的位置，以此來確定漸變的方向以及投影的位置。
只有整體光感的統一，整個畫面才能表現出強烈的質感。大家在繪制這一步時，需要用心體會假定光感的這個過程。
3. 將人物融入背景，提升發絲層次和質感
放入人物圖片，圖層模式改為正片疊底。調整圖層透明度，添加蒙版使人物下半部分漸隱，與背景融合。
復制人物層，取消圖層模式和透明度。用選擇顏色命令提取發絲高光，添加蒙版抹去不需要的高光，圖層模式改為變亮模式，調整透明度使其融合進人物。
為什么要做這一步呢？單純的人物在畫面中顯得太平了，所以需要豐富細節、增加層次。
4. 主體字體和投影繪制
輸入主體文字，圖層模式調整為漸變疊加，根據光源調整顏色漸變。案例中的英文字體為「Monotype Corsiva Regular」。這一步需要反復的嘗試，大家可以換一些字體嘗試一下。
復制一層作為投影，文本顏色改為黑色，圖層樣式設置為正片疊底，轉智能對象后模糊對象，調整圖層的透明度和大小，放在字體后面。字體的立體感依靠的仍然是統一的光源，需要想象字體在假定光源下的陰影關系。
投影能夠模擬真實感，需要若有若無的感覺，讓文字懸浮在圖層上面，豐富畫面層次。
5. 主體文字細節刻畫
根據字體的結構，用形狀工具繪制出字體的立體關系。每一個形狀圖層繪制后需要兩層蒙版，一層為了限制字體范圍，一層為漸變蒙版。讓充滿立體感的文字懸浮于畫面中央，提升視覺中心的細節品質。
6. 穿插細文與投影繪制
輸入細文，并復制一層作為陰影。不過因為字體較小，距離拉遠后投影肯定是看不清細節的，所以已經模糊的若有若無，但還是需要有的。
表現文字穿插關系，讓「is an」懸浮于「L」上，并留下近距離投影。讓「attitude」穿過「e」字，遮擋部分文字。豐富的穿插和相互投影，進一步增加主體文字的細節和層次，讓畫面細節豐富且更加耐看。
7. 繪制輔助圖形，增強畫面流動感
為了豐富畫面細節，增強畫面流動感，可以適當加一些飄零的輔助元素。
繪制時需要注意的是，你需要明確整體視覺中心與運動的方向。輔助圖形沿著整體畫面，水平中心向右運動，你可以想象圖形散開后的畫面，并反復調整元素的合理位置。
如果沒有一定的規律，所有圖形就不像一個整體，就會看起來很亂。大家可以根據這點來判斷輔助元素是否需要進一步調整。
8. 收尾工作，大功告成
最后，根據頁面需要，搭配上合適的元素，讓畫面更完整。
需要注意的一個細節是，由于所處的位置不同，這些元素在光照中呈現的顏色也會出現深淺變化，所以左邊的元素較淺，而右邊的元素會深一些。
怎么樣，是不是看起來并不難？
希望大家可以抽空認真地跟著教程去嘗試一遍。只要你能夠理解每個步驟的目的，耐心地繪制每一個細節，相信你也能夠做出這種非常高端的質感。
如果你能在制作時，用心思考和體會整個過程。就能在以后的作品中舉一反三，讓這個技能成為你自己的技能了。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
相比于典型的字、句型結構和圖像，不同尋常的字、句型結構以及圖像會更容易被人們記住。正因為如此，我們在日常工作中才會經常接到類似以下的需求：將新/重要功能的入口，或者運營活動的入口做特殊化處理，增加趣味性來讓用戶加強印象。
這種現象被稱作為梵雷斯托夫效應（相對于普通事件或物體，要記得獨特、有特色的事件或物體可能性會大增）。梵雷斯托夫效應有兩個觸發條件：背景不同以及經驗不同。背景不同是指一個刺激物與周圍的刺激物不同，比如在一串字母中突然出現了一個數字，那個數字就會讓人印象深刻；
經驗不同則是指一個刺激物與記憶中的經驗不同，比如一些經常被我們誤讀的成語，因為與平時的經驗相悖，所以看到正確解釋的時候印象特別深刻。
我們在了解了這兩個觸發條件之后，就可以利用它們來觸發梵雷斯托夫效應，從而幫助我們做出令用戶印象深刻的設計。下面就結合實際案例來看看如何利用它們。
前面說過，背景不同是指一個刺激物與周圍的刺激物不同。具體到界面中，我們可以理解為在一堆相同類型的元素/模塊中，對其中需要突出的做特殊化處理。
案例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年的資料）：
如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋?！綧yers 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動畫應該：
如果你的工具或網站工作的足夠快，那就是非常完美的。或者至少要使得它們的速度符合用戶的預期，顯示好看的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被大眾所推崇，因為他們對于性能的影響最小（尤其是對于web）。使用默認的或開源的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
“從本質上講，所有商業活動都是在人的行為上下賭注。”
——《“厚”數據的力量》（The Power of ‘Thick’ Data）,《華爾街日報》
問題的質量決定了結果的用處。提出錯誤的問題跟用原型解決錯誤的問題如出一轍，它們都會給你一些你不想要的東西。從優先級最高的問題開始。確定這類問題的辦法是：如果你在這些問題上的假設搞錯了或忽略了，風險會最大。
最重要的研究問題是你想要知道什么，而不是你在訪談中要問什么。事實上，直接拋出你的研究問題往往是最糟糕的方式。人們往往不知道或者不愿承認他們真實的行為，但人人都很擅長編造答案。
設計研究總是和用戶研究混淆。回答高優先級研究問題的方式多種多樣，跟有代表性的用戶對話只是其中一種。你所需要知道的，并非都是與用戶相關。
通常，最關鍵的問題是：“基于證據，我們對客戶、競爭、內部能力真正了解些什么？”問法各有不同。這可能是一個非常難以完全誠實作答的問題，但又得在短時間內回答。
UXRen
當研究被定義為設計之外的一種工作，人們就很容易把收集證據當作額外負擔，找理由不做。
通常，團隊必須獲得權威人士的許可，才能進行研究工作。提問本質上是對權威的挑戰。如果你曾經和一位不同意為百萬美元項目開展定性研究的領導合作，那么問問自己，這位領導購買一輛價值5萬美元的汽車前會不會自己做做研究？口頭上提出反對意見，心里面往往是害怕自己的主意被破壞，被證明錯誤，或者不那么行之有效。
如果你的目標和高優先級問題明確直白，不管時間和預算如何，你都可以了解到一些有用的信息。比如在線研究，午餐時間外出觀察，測試其他產品的可用性，發揮創意。
只要不是做調查就行。
UXRen
“當一個人要靠著對某件事的不理解來拿薪水時，要讓他理解這件事是很困難的。”—厄普頓·辛克萊（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 繪制矩形框
矩形框的高度可以隨著屏幕高度的變化而變化，所以不需要考慮。那只定義矩形框的寬度就行了，寬度分別是：小（240px）、中（280px）、大（280px）。當我們決定采用哪種尺寸后，就要定義矩形框與內容之間的距離了。下圖所示的例子是以中等尺寸來做參考的。
1.3 文本行高
當我們繪制好矩形框，就要往里填內容了。文本行高上一章已經講過了，就不多說了。文字的行高是由鼠標狀態（Hover）的高度來確定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，側邊導航欄的文本左右多留一下白，不能使導航欄看上去太緊湊，給人感覺太壓抑，就會顯得不是很美觀了。
1.4 層級劃分
因為側邊導航欄中有樹形結構，一個主級別可以分散為多個子級別，所以就需要劃分一下層級。劃分層級的方法也有很多，可以改變字號、改變顏色、改變字形、改變距離，那我用的方法是改變距離。采用哪種方法還是要看具體需求，像那種需要想突出層級且對比強烈的需求，可以采用改變字號和改變字形（加粗）。下圖中顏色越深層級越高，另外要注意的是，大類也有層次，越往上層級越高。
1.5 確定距離
當我們把矩形框繪制好，文本也填進去后，就要確定每一個層級的距離了，我們要做出1>2>3的感覺出來，細微調整每個層級的間距，使它們的差異突顯出來。確定距離指的是每個層級左側的距離，這就像樓梯一樣，在上層的樓梯往往優先級是最高的。層級1（收藏夾）與層級2（藝術類）之間多留了4px的空白，目的是為了突顯主級別與子級別之間的差異，稍微強化了一下主級別。
來看一下最終效果吧。
2.1 了解分頁
側邊導航的講完后來講講分頁，分頁有三種樣式：普通分頁、首末分頁、跳轉分頁，名字是隨便起的，能理解什么意思就行了，來讓我們了解一下它的樣式。
2.2 繪制普通分頁
接下來我們學著畫一下它。我把所有的分頁分為三種尺寸（大中?。?，分別是32px（小）、36（中）、40（大），每一個小按鈕的曲率分別是4px（?。?px（中）、8px（大）。每個小按鈕之間的間隔我用的是4px，也可以用8px，4px雖然更容易誤觸，但視覺效果要比8px好很多。
當然了以上數值也不是絕對的。尺寸、曲率和間隔都是需要根據項目需求與設計師自身審美來決定的。
2.3 繪制首末分頁
首末分頁就是在普通分頁的基礎上加兩個按鈕，分別是“跳轉到首頁”和“跳轉到末頁”。只要注意把“數字按鈕（分頁）”與跳轉首末頁按鈕”按優先級分隔就可以了，要把控好這首末按鈕與數字按鈕之間的距離，距離過短容易誤觸，距離過長會破壞整體性。
2.4 繪制跳轉分頁
跳轉分頁是在首末分頁的基礎上加上“總頁數”與“跳轉至指定頁數”這兩個功能。跳轉分頁前端顯示總頁數，后端顯示跳轉至指定頁數。所有按鈕模塊的間隔都成倍遞減，這樣不同分頁的功能，區分就會更明顯一些，而且它們之間也有隱性的關聯。
將分頁組件與其他組件組合起來看一下最終效果。圖片壓縮效果不是很好，要與實際效果（原始比例）差很多。
3.1 了解步驟條
步驟條相對比較簡單，這里穿插一下講了吧。步驟條的樣式比較多，但他們的繪制方法都大同小異，我只單拿出一個來講，就不一一的進行講解了。
3.2 繪制步驟條
步驟條其實不難繪制的，注意對象和元素之間的距離就可以了。留的距離也要講究一些，要勻稱不能出現左面留太多而右面留太少的情況，具有關聯性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題，不能一味的采用水平或垂直居中。只要熟練把控好距離，知道什么需求下留多少的白，那繪制不同樣式的步驟條，也會顯得游刃有余，做出的東西也更自然舒服體驗也更好。
做設計要精益求精，把每一個像素點都要考慮到并合理運用它們。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
目錄
引言
一、對設計的認識
二、設計觀念
三、設計原則
四、設計思維
引言
前段時間在學習python語言的時候，我了解到在程序界有一種叫做“算法”的存在，其實“算法”就像武俠片里面的內功心法，內功心法越好就能激發越強的武功招式。在程序編寫時大部分的程序語言都可以使用“算法”來優化程序的流暢度。比如，當大量用戶同時使用程序時，“算法”就可以合理配置服務器資源防止服務器的崩潰。在設計的過程中其實也存在這樣的通用心法，事理學的認識論其實就有點類似于“算法”，所以這一期我的分享題目叫《設計心法》。
一、對設計的認識
·內部因素與外部因素：
設計中我們可以將設計問題化分為外因（人，時，地，事）與內因（技術，工藝，材料等），在上一期文章中我們談到設計可以定義為：人有目的創造活動，往往現代生活中設計的目的不是唯一的，這就好比佩戴手表時我們可能不僅僅是為了查看時間，還可能是為了在潛水時防止手表被泡壞。因此，物“應該是什么樣”表現的是對不同人與環境的適應，就如同生物多樣性表現了對環境的適應一樣。
除卻外部的環境因素，我們還要考慮的制作產物時所需要技術、工藝、材料、形態、結構。內部的因素其實代表了一種可能性，是一種可變通的元素組合。比如同樣是防水手表，我們可以采用耐浸泡的材料，也可以運用防水工藝。（ps：在《事理學論綱》中內部因素沒有成本，但是小胖認為成本其實也算是設計中應該考慮到的內在因素，所以在這里我也將其歸納了進來。）
總的來說外部因素代表了限定性，而內部因素代表了可能性。設計的過程中應當了解外部的需求與限定，然后組織內部結構。在內外因素之間找出一個契合點，設計就發生在這個契合點上。
·目標與目標系統
窗簾、太陽鏡、電焊面罩、等等這些看似風馬牛不相及的物品，卻有著共同的目標—— 遮擋強烈的光。在實際設計過程中目標往往是抽像的，而目標系統是具體的。目標系統既包含特定的外部因素的限制也包含內部因素的選擇。
同樣是手表，同樣是為了看時間，從技術到外觀在使用因素的限制下，也就決定了其品種的千差萬別。建立目標系統是對實現目標的外部因素限制的研究過程，也是從外部角度觀察、分析、歸納實現目標條件的認知過程、敘述過程。設計師應將抽象的目標轉化為目標系統，完善的目標系統才是優秀設計的創意源泉。
·“使用”的意義
在“使用”物品的過程其實包含兩個方面，一是使用者——人的動作：二是被使用者——物的動作。人的動作是人生理結構和生存需要指示下的延伸，在動作的引導下人的大腦對外界的刺激作出反應，留下印象，形成經驗，儲存信息，成為意識。當再次遇到類似的問題是，人會逐漸總結經驗并形成知識的遷移。物的動作是人使用過程中人的動作在物上的反應，這就包括器物的變形、移動、或是其他信息（比如聲音，燈光等等）。
在人使用物的過程中，為了使物更加符合人意志，自然要對物進行改進，使物更加適合人的生理結構和需求目標。比如在原始社會原始人類為了更有效地的獲取獵物，在原有的石頭上進行敲擊加工使之更加符合使用習慣。在“使用”中人和物不斷磨合，這一過程實則就是產品迭代的過程。“使用”的意義在于它是一種積極的思維方法，是一種能啟發創造的設計起點。
·方式與合理
方式在設計中不是指的具體的某一個動作，而是使用時產生的一系列動作，人的行為與各動作相對應的物與物組成的環境組成了一個特定的社會現象，我們稱為“方式”。物是動作對象，環境是行為條件。同樣，動作使物有用行為使環境具備社會意義。
合理是指合乎客觀規律，合乎時代觀念，合乎社會準則，合乎人類理想。合理是人類經驗、教訓的總結，是認識的升華、沉淀；是道德、行為、情操的法庭；也是在歷史的基礎上對未來的規劃。當人在追求欲望的過程中，合理更像是一種約束人類行為的標準，通過合理的約束來引導人類的行為方向。
綜上合理的使用方式其實是設計的原則，通過合理的評估系統和反饋可以制約不合理的設計行為，在的設計活動中，以“創造合理的生存方式”作為第一原則才能促進人類往更好的方向發展
二、設計的觀念
·設計生態觀
自然界的生態系統是一個封閉的、可以自給自足的系統。在此系統中沒有開始也沒有結束，任何一環的在生態環境中都扮演著至關重要的角色。反觀現代設計生態卻并不存在這樣的循環。
現代經濟學被認為是研究人類需求與稀缺資源之間關系的學科。經濟學中的生產者（企業）將有限的資源整合變成可盈利的“商品”，而消費者是在有限收入下實現“效用最大化”的行為個體。消費者購買行為發生后進入“使用”階段，直至使用的物品失去使用價值。“物”從資源直到被銷毀經歷了四個階段，這四個階段分別是產品、商品、用品、廢品。
現代市場經濟下人的物質需求被極大滿足，市場經濟的增長依賴消費增長，反觀人類的自然資源總體上卻在急劇減少。設計者除了的滿足生產者、消費者、使用者的需求之外，還應該思考如何將“廢品”分解利用形成設計生態閉環。
·設計美學觀
人類文明的發展大致經歷了三個階段，這三個階段即古典主義、現代主義、和后現代主義。這三種文明的美學觀也可稱之為再現主義、表現主義和共生美學。這三種美學觀點的發展是相互交錯的，只是主體上有區別。
當代設計和藝術是以思考、感召、聯想的手法，以同觀眾、使用者共同創造為目的，以多種美學觀重疊、并行、綜合為基礎的共生美學觀為審美取向。技術與藝術共生，技術與各種美學觀共生，這就是當代設計——后現代主義的美學特征。
三、設計原則
·有限理性原則
在藝術的創作中美可以被分為很多種，梵高的油畫是美的，米開朗基羅的雕像也是美的。其實任何事物，任何美都是相對的，在不同的時代背景和使用場景下我們對于美的定義都不同。
類比設計，衡量設計的標準不是對與錯，而是相對滿意與不滿意。設計應該遵循“有限理性”的原則，即設計的目的并不是尋找“最優解”，而是“滿意解”。“最優化理論”只適合作為設計中的一種技術方法使用，而且只有當目標屬性十分明確，可以用數量化衡量時才可運用。
·適應性原則
上文說過設計就發生在內部因素和外部因素的“關系”中，而這其中的“關系”其實就是適應的過程，設計還可以理解為是以一定的目的、一定的方式來達到與客觀條件內部關系相適應的人為適應系統。設計的內部因素、外部因素和設計目的是設計過程中應當遵守的具體內容。
多數時候外部因素在適應系統中是人們行為方式的主要決定因素。系統的復雜行為主要是其所處外部的復雜性的表現，而內部因素少量限定屬性的制約，這才是完整的適應性系統。
四、設計思維
設計思維實際上是圍繞著“問題”來展開的。所謂“問題”是指設計各要素交織在一起時，所產生的關系矛盾。好的設計一定是“問題”的良好協調統一體。研究“問題”的方法通常是通過觀察問題——分析問題——歸納聯想——評價修正的模式來鞏固的。
觀察問題其實是在用戶調研中最常用的方法，定性調研中研究人員常常會使用觀察法來記錄用戶的行為，之后用研人員會使用“五問分析法”來抽象出用戶的真實需求。其實在事理學中也提出了類似的觀點。
觀察法的幾個原則:
1. 目標明確——從現象到本質（五問分析法）
2. 忠實于對象——感官+體驗
3. 擴延、比較——搜尋同類比較共性
4. 由表及里、去粗取精——總體到局部再到整體
需求分析中有一塊人物畫像的部分，其中情景分析和故事板就是分析人物使用產品的外因和內因，撰寫故事版時不妨按照以下路徑來展開。
分析問題中應當結合設計中的基本路徑來分析：
1. 尋找“物”存在的外在限制——人、環境、時間、條件等制約。
2. 析出“物”的內因與外因的邏輯“關系”——尋找現象依據
3. 比較相似“物”的內、外因的關系——透析共性基礎上的個性
具體的歸納、聯想和創造都應該明確設計“目的”，結合實際中遇到的外部因素來具體創意創造。最后我們通過建立評價體系，優化設計產物在設計生態中的體驗和循環。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
