如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
作為交互設計師，天天畫的就是交互稿了。而對于很多新手交互設計師以及想轉行做交互的同學們來說，一定都非常想知道大廠的交互設計師畫出來的交互稿具體是什么樣子的。但和視覺稿不同，交互稿里面體現了太多產品本身的邏輯，難免涉及到一些敏感內容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。
不過，這不妨礙我為你們做一份交互稿模板。一來我自己也在用，二來可以幫助大家，何樂而不為。
但我必須重點強調一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據自己的需要自由修改。
第一個是 PPT 型的分頁交互稿，這個樣式最早是從騰訊 CDC 團隊流傳下來的，我在第二家公司的時候就從他們的博客中看到過，當時還用 InDesign 做過一個模板。而我現在所在的團隊用的也是這個，因此我過來后就自己重新用 Sketch 做了一版，方便以后使用。
1. 封面
封面很簡單，就是文檔標題和作者，頂部有一個通用的文檔標題欄，上面的內容包括：
我在 Sketch 中為這個模板中需要改動的內容都定義了 Symbol，比如這個標題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內容。
2. 修訂記錄
修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內容，以及相關人員，方便后期交接的時候給對應的產品經理、游戲策劃和設計師查看。有時候交互稿更新一次只是修改一小處地方，如果不備注對方就會很難找到，可能以后你自己都會遺忘。
這一塊我也定義了 Symbol 元件，你可以直接復制一行，然后修改里面的內容，「更新內容」的文本支持多行輸入。
3. 目錄
這種分頁型的文檔一定要有目錄，備注好每個模塊對應的頁碼，否則十幾頁看下來都暈了，每次想找到對應的界面還得重新翻一遍。
4. 內容頁面
具體的內容頁面才是交互稿的核心，一般會用小氣泡和箭頭進行標注，然后在右側用對應的數字和它們對應，寫下詳細的交互說明。
結構可以有很多種，比如上面這種豎屏的界面可以是左右結構，如果是橫屏界面還可以是上下結構等等，根據情況自由調整。文字段落的樣式我已經定義好了，直接修改套用就行。
其中最重要的氣泡我也做了元件，選中之后直接在右邊修改數字即可。
5. 導出方式
使用這套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可將交互稿導出成 PDF 文檔。我很喜歡這個格式，與 PPT 相比，PDF 在任何平臺都可以通用，包括手機、Mac，不用特地裝什么軟件都能很好地打開。
另一種是更常見的交互稿形式，這也是我這幾年進騰訊后一直使用的格式。
如果你曾經用過上文介紹的 PPT 型模板，你一定會發現：它的好處是 PDF 分頁格式非常整齊，比較適合一次性做一個大產品的交互功能介紹，而不適合小功能的頻繁修改。
今天介紹的這第二種，則是更加輕便快捷的類型。
這種長圖型的交互稿，優點很明顯：
來看一張基本樣例：
它的結構分為：
交互稿標題、日期
按照項目、模塊和功能的方式命名（如：電腦管家 V12 -清理垃圾-深度清理圖標化改版），可以地規范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內容。
相關負責人
對應的產品經理，交互稿的作者，方便評審時或者交接后找人。
需求背景
簡單介紹為什么要做這次設計，出發點是什么，遇到了什么問題。
主要界面
這次設計中，涉及到的所有主要界面，先陳列出來方便大家快速評審和討論，視覺接手后可以根據這些來進行風格設計。
流程說明
有了主要界面后，我們還可能需要對一些操作流程進行說明，比如怎樣發送一條語音消息，怎樣刪除一條會話等等。
異常狀態
最后還要記得檢查一下，每個界面在沒有內容時的空狀態、斷網時的異常狀態，彈出各種通知的位置等等，千萬不要等到開發同學找你的時候才想起來。
上面所說的，就是一份交互稿的常見內容模塊了。
該模板是專門給 Mac 平臺的 Sketch 用的。
下載后（下載方式見文末），打開你會看到這個界面：
里面的每個模塊我都做了 Symbol 元件，你只要選中就可以在右側更改內容了。
比如下面的文檔基本信息：
我還把可能會用到的各種字體大小、顏色、對齊方式都做成了文字樣式：
選中文字后，在右側下拉框中選擇你要的樣式就好。
交互稿用的都是黑白灰，還有藍色作為標注。
我一直用的這幾種，足夠用。
是不是很心動？別著急，先把這個 Sketch 文件保存成 Template（模板）。
然后，你就可以在新建文件時，選擇從模板處新建，直接用這個模板開始畫稿。
下載鏈接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA
提取碼：npq2
備用鏈接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA
作者：WingST（寇敬），男，33歲，騰訊高級交互設計師、騰訊學院認證講師，9 年工作經驗的資深互聯網人，曾任 MIG 桌面安全產品部軒轅設計組組長，目前在騰訊游戲 NEXT Studios 工作室負責《樂高無限》創造型沙盒游戲的用戶體驗設計。
負責過的產品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網游助手等。曾在 OPPO 手機、金蝶軟件等企業工作，有著 PC、Web、移動端等多平臺的豐富設計經驗。
感謝大家的閱讀，末尾做個小廣告，我的新書《交互思維：詳解交互設計師技能樹》馬上就要上市了，這是我自己九年多來做交互設計師的經驗總結，也是市面上第一本詳細介紹交互設計師所應該掌握的職業技能的書，適合所有希望了解交互、學習交互的設計師和產品經理。同時書中也有我進騰訊的成長故事，以及一些個人工作和學習方法的分享，絕對物超所值 → https://item.jd.com/12576242.html
這是我所總結的「交互設計師技能樹」。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今天分享一款運維相關的B端產品，主要闡述自身的設計思路及產品的優化過程。B端產品功能聚焦、講究效能，對產品鏈路有著高流暢度與率的訴求。設計師在做B端產品的的時候要有全鏈路和小白用戶視角，以體驗及效率為先，我們需要協調全局一致性，遵循產品鏈路，在視覺上減少對于用戶的負擔和干擾，避免打斷用戶的使用流程，確保流暢、優質的用戶體驗。
在產品優化上，我們在每個版本迭代后，會對用戶進行訪談及收集意見反饋，建議設計師可以制定一套自有的用戶調研方式去了解用戶的想法和自己產品的不足之處，這樣的好處是可以讓用戶幫助你優化產品。
在產品的細節上我們可以深度地去挖掘和嘗試更好更優的設計方式，對設計師來說打磨和優化每一個細節正是B端產品的魅力所在。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
互聯網讓全世界都無線互聯，大家可以無視距離隨時瀏覽世界另外一頭的設計師所上傳的設計作品。無論是 Dribbble、Behance、Pinterest 還是國內的各大社交媒體，想瀏覽別人作品獲取靈感，幾乎是0成本的事情。那么這樣做對于做設計、激發靈感進行創造，真的有好處嗎？它所引發的抄襲的問題，其實是最現實可見的，對此，昨天所發布的文章《如何界定借鑒和抄襲？看這7位設計大咖怎么說！》里，7位來自世界各地的設計師，已經對此發表了看法，而今天的文章里，99U 邀請了三位頂尖的創意人，闡述他們如何看待這種設計師中的「時代病」。不斷上網瀏覽別人的作品這種「靈感時代病」對于做設計激發創意而言，到底有哪些利弊？在的設計辯論中，Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 對無休止的靈感素材的視覺進行了權衡分析。
過于關注在線設計靈感類素材，會讓設計思路趨于千篇一律，扼殺創意。這就是為什么我們必須明智地管理我們的個人信息流?！瀹嫀?nbsp;Nadine Kolodziey
我們每時每刻都在上網，這意味著我們將會不斷地接觸到各種各樣的視覺刺激。
如果你總是在公交車上或休息時關注別人的設計作品，那么你就會不自覺地把它融入到自己的作品中。很快你就會意識到：「糟了，我剛剛做了一些看起來和其他人完全一樣的東西。」你會發現，你在不斷地復制和重復別人的東西，盡管可能一開始是下意識的，但最終你會成為潮流的一部分。你忽略了你個人獨特的視角，別人的作品開始影響你的判斷和直覺。
而屬于你自己的那部分最獨特的東西，才是最有力道的。
我完全理解為什么人們想成為潮流的一部分?？蛻艨赡芟胍恍┤霑r的東西——在特定的圈子里以特定的方式行事，這樣做是有所幫助的。但最終這種做法所帶來的同質化，對雙方的發展都會有所制約。插畫師在他們的作品中沒有個性，所有的客戶都在購買類似的風格——這意味著他們的品牌缺乏獨特性。
如果你想獲得靈感，看其他的創意作品并不是最好的選擇。
看看其他的設計作品固然重要，這可以讓你緊跟行業發展步伐，但是要適度。如果你想獲得靈感，看其他的創意作品并不是最好的選擇。當我在網上關注其他插畫家的作品時，我個人很難受到啟發。我已經使用 Instagram 兩年半了。起初我總是看其他插畫家的作品，這是我的本職工作，我熱愛插畫。但后來我發現，這阻礙了我的創作潛力。
我開始注意到我的配色方案與其他人的相似。我注意到，看其他的作品降低了自己嘗試新事物所需的勇氣。當我看到另一位插畫家的作品時，我不可能洞悉他的創作潛力。當我在模仿他人的時候，我不可能有屬于自己的獨特創造力。
但是這個問題并非是無解的。解決之道就在于有選擇地關注?？赐碌淖髌泛涂匆话愕膱D片是有區別的。我對線上的靈感素材很感興趣，但是我更多地將這些素材視作為一個個「小貼士」，因此我注重于管理我的社交媒體所關注的賬號。我不再關注 Instagram 上的其他插畫家，而是關注那些在審美上吸引人的內容。例如，我將關注那些收集不同尋常的石頭的人，或者為擺放得精美的和風食物拍照的人。
我特別喜歡「I’m Google」這個賬號，它不是按主題而是按視覺來排列圖片。當我看到這樣的圖片時，尤其是當我開始著手準備新項目的時候，它們會立即在我的腦海中激發出新的概念和全新的思路。這些資源成為我的靈感來源：當我滾動鼠標時，我將看到來自外太空的巖石圖像，它的形狀將啟發我如何安排構圖。
線上靈感素材固然可以鼓勵國際交流和對話，但問題出現在這些圖像在傳播的時候脫離了相關語境?！?a target="_blank" rel="noopener noreferrer" class="external" style="color:#0DA4D3;text-decoration-line:none;transition:none 0s ease 0s;">Thomas Kronbichler Mut工作室的創始人 創意總監
在 Mut 工作室，我們是當之無愧的互聯網擁簇，我們從不害怕靈感素材過載這種問題。我們是阿爾卑斯山脈中部一個叫做海蒂·蘭德小鎮上的一個小工作室，互聯網不僅為我們提供了來自世界各地令人嘆服的靈感，而且提供了一個展示自己作品的平臺，這在10年前是不可想象的。
正是因為圖片可以在網上廣泛地傳播，我們才能讓歐洲和美國的用戶看到我們的作品。由于有了在線訂閱和社交媒體，平面設計社區現才有了如今繁榮的模樣。當然，這也有負面影響，很多人說如今平面設計在審美上變得太相似了。但積極的一面是，現在有更多的平面設計作品涌現出來。任何地方的人都可以進入這個行業而不再受到地域的限制，平面設計行業變得更具包容性。例如，歐洲各地的小鎮上都會有人在嘗試更瘋狂的創作，我們能透過網絡在不同的地方跟進觀察，支持彼此。豐富的網絡靈感圖片的流通，最終有利于平面設計作為一種藝術形式而廣泛存在。
我并不是受到某張特定的圖片啟發，而是在聽設計師講述設計思路的過程中獲益良多。
問題是對此互聯網并沒有過多關注。一些博客和自媒體上并沒有關于圖片來源的解釋。為朋友設計的項目和為大公司做的項目都在同一個空間中流通，這很有趣，但同時也弱化了應有的差異化和環境。
作品背后的故事，以及設計過程中各種問題的解決過程，才是真正重要的內容。我并不會受到某張特定圖片的啟發，而是在聽設計師講述設計思路的過程中獲益良多。了解設計師的獨特理念，則更有可能啟發我，我對設計師處理客戶關系的部分也很感興趣。當然，這一切是不能用一張簡單的圖像來進行概括的。
我已經不再瀏覽 Tumblr 和 Pinterest，因為我最感興趣的點，是了解一個問題是如何解決的。最終，我在設計師會議上發言的視頻實錄中獲得了最多的靈感。聽設計師們講述作品誕生的過程是最令人振奮的。我從一個人如何構建一個項目，以及如何實現它的過程中學到了很多。我喜歡聽他們談論客戶關系，講述他們遇到的困難以及如何克服它們。確切地說，更能鼓舞人心的是設計態度和思維方式。
在阿爾卑斯山的工作室中足不出戶，我就可以看 Michael 所有的視頻。
例如，就在上周，我狂看了所有 Michael Bierut 在線演講的視頻。我喜歡他展示作品的方式，喜歡他大方地和別人分享成果，我欽佩的是他的工作態度。在阿爾卑斯山的工作室中足不出戶，我就可以看遍邁克爾所有的演講視頻，這簡直太棒了。
對正在發生的事情有所知覺是非常重要的，而上網獲取靈感會簡化這個過程。——Polina Joffe，藝術總監和平面設計師
如果你知道別人在做什么，你可以選擇參與其中，也可以選擇拒絕。而形成自己的觀點并做出明智決策的前提是你足夠了解。
我一直在關注其他人在網上會做什么，我也會在博客和社交媒體上上傳一些實用的干貨。當涉及到具體的項目時，我會做具體的項目研究。我們會從互聯網上獲得大量的靈感，這使得研究階段變得非常簡單和。我經常會想起設計師們以前在社交媒體上使用過的概念和想法，然后我會把這些想法和我自己的想法進行重新轉化，組合并且更新，這樣它們就可以運用在我的設計大綱中了。
瀏覽在線靈感素材，然后它們會形成屬于我自己的一個巨大的視覺詞典，里面有我腦海中所有的概念和方法，每當我開始一項新的任務時，我都可以沉浸其中。
我們經常談論來自內心的創造力，但我不確信我是否真的要相信這一點。萬物皆有源頭。
我最近為泰特倫敦美術館的教育團隊做了一個項目。這個項目是針對年輕人的。首先，如果你的目標受眾是年輕人，了解年輕人都在做什么是很重要的事情了，因為這些信息很有參考價值。你需要運用觀眾能夠理解的視覺語言。在項目的研究階段，我看了其他設計師是如何處理和學習這些屬于年輕人的理念的。最初我想用筆記本和活頁夾做點什么。然后我想起了我在網上看到的那些用活頁夾或記事本紙做的項目，然后我回去重新又看了一遍，看了其他人如何處理類似的主題，由此激發了我的新想法。
我們經常談論來自內心的創造力，但我不確信我是否真的要相信這一點。萬物皆有源頭。我認為創造力通常是學習前人如何混搭各種想法，然后自己進行特定的調整組合，二次創造。
誠然，視覺交流的發展是一部復制、更新、轉移的歷史。但重復別人已經做了太多遍的東西，并使用類似的元素來直接竊取它們是有危險的。當你在做研究獲取靈感時，你必須通過多種方式參考海量的資源。如果我們能妥善地使用現有的大量圖像，就能鼓勵創新，跟上時代發展的步伐。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
質感是什么？如何讓畫面擁有更高端的質感？本文由質感的原理出發，深入分析質感表現所需要的要素，并通過實例來講解如何在作品中表現高端質感。很多同學在設計完成后，總是會發現頁面很單薄，導致整體看起來很粗糙、不耐看。究其原因，大多數是因為頁面缺乏質感。
質感，對于設計作品來說，是一個非常重要的視覺元素。它能夠提升作品的層次，讓整個作品更高端、更有品質。
質感，基本釋義為所表現的物體呈現出的物質真實感和細膩的品質感。這是一種視覺的綜合感受，會觸動你的某種本能的綜合感官，讓你感覺非常舒服、非常爽。
我找了幾張比較富有質感的圖片，大家可以感受一下這種感覺。
觀察完這些圖片后，你發現有什么共同點了嗎？我們可以試著來分析一下。
首先，物體本身的型是好看舒服的，并且細節足夠精致。
其次，在光的影響下，物體的表面呈現出細膩的光澤變化，以及通透而舒服的陰影，展現了豐富的層級關系。正是光的作用，讓這些視覺元素得以表達，讓我們沒有觸摸便能感知到這種質感。
我們再來看一些優秀的擬物作品。大家對照一下，是否都遵循相同的要素。
觀察這些優秀的擬物作品，為什么會覺得有質感呢？首先圖標很精致，它的形具有一定的美感。但是這不足以讓它富有質感，關鍵是它也符合了上面所說的幾個質感要素。
最后，我們可以總結一下，質感產生的要素：
所以除了作品本身足夠精美以外，整個作品的光感需要和諧統一。每個元素表現的色彩變化規律（漸變色）、投影大小和投影間的相互影響，都需要與光感嚴謹的統一。
這就要求你在繪制所有元素時，需要去假定一個統一的光源，這樣才能讓物體擁有更真實的質感。
我們已經了解了質感產生的原理，下面就開始實際案例。每一個步驟我都會講解思考的過程和原因，方便大家理解。
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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
篩選是資源聚合類APP中不可缺少的功能，可幫用戶快速、精準地找到需要內容信息，根據資源分類形式的不同有多種篩選類型，并且不同的篩選類型還可以進行自由組合，讓復雜的內容信息更容易被篩選出來。
1. 橫向tab式篩選
2. 標簽篩選
3. 下拉篩選
4. 底部篩選
5. 抽屜式篩選
這是最常見的篩選樣式，屬于一級篩選。通常出現在導航欄或者是導航欄目的下方，根據分類層級的多少有4種展現形式。
一個層級
分類2~5個：所有類目都可以直接在tab欄目上展示出來，用戶可快速地在各個分類之間進行切換；
分類大于5個：所有類目以相同的間距進行橫向排布，引入橫滑操作，方便用戶瀏覽被隱藏的分類信息；有些產品也會在欄目右側增加下拉操作，點擊后下拉展示所有的分類，用戶可對所有分類進行直觀的瀏覽；
兩個層級分類
Tab 欄目上只展示推薦分類或者用戶自己選擇的分類
當內容分類有兩個層級且分類比較多的時候，產品會根據用戶的喜好推薦幾種分類在tab上進行展示；右側有篩選操作，點擊后在一個頁面里展示所有的分類。用戶可以在這個頁面自主選擇增減展示在tab上的分類，并且可以調整展示的順序。
交互細節
用戶在不同的類目間進行切換的時候，篩選內容在當前頁面刷新展示；
不同的tab分類可以通過橫滑進行切換；
位于內容信息的上方，對下方的列表內容進行控制；
當觸發篩選條件時，篩選欄目直接定位到導航欄下方。
是一種輔助篩選樣式，通常位于某一分類標題下方，或者跟tab篩選和下拉篩選搭配使用，有4種表現形式
① 內容分類標簽，充當內容入口。產品設定的內容分類，分類層級較高，且內容之間無交集，當觸發操作的時候，會跳轉頁面進行內容展示。
② 大分類下的子篩選條件，分類層級比較低，當用戶觸發操作時，內容在當前頁面進行展示。
③ 篩選頁面，多維度的篩選條件以列表的形式進行排布，標簽是單一維度下的多種分類，可橫滑操作，這種方式可以幫助用戶快速進行多維度的內容篩選。篩選的結果直接展示在篩選條件下方，最常出現在視頻類APP內做電影、電視篩選；馬蜂窩游記中也使用了這種分類形式。
通常是在一個大的分類下做具體選擇的時候使用，這種篩選樣式可以承載1~3級分類層級。
單一層級
分類以列表的形式展示在頁面中，當分類字段少且分類較多的時候也可以排2~3列進行展示。
兩個層級
有三種排布方式
①直接以欄目標題加列表內容的形式排列。適用于兩個層級分類都較少，或需要用戶進行操作（比較輸入框、滑塊）的場景使用。
②左側為一級分類信息展示區，右側為二級分類信息展示區，可以通過左側的一級分類控制右側的二級分類。適用于兩個層級分類都比較多的情況使用。
③上面為tab式的一級分類，下面是二級分類內容的展示。適用于一級分類較少，二級分類較多的場景使用。
三個層級
一級分類為tab形式展示在最上面，二三級為左右排布形式。
交互細節
放在內容信息的上面，對下方內容進行控制；
當觸發篩選條件時，篩選欄目直接定位在導航欄下方；
有2~3種信息層級的篩選，結果通常取得是不同信息之間的交集，所以需要在篩選中向用戶展示篩選結果數量，幫助用戶判斷是否調整篩選條件 ；如圖左
我們也可以選擇在篩選結果頁展示篩選標簽，用戶可以在當前頁面刪除部分標簽，以查看更多的內容信息；如下圖
備注：下拉篩選通常是多維度組合在一個欄目上展示，通常應用在電商、外賣等內容分類層級比較多，且層級內的分類也比較多的場景里
某一具體內容需要通過多個篩選維度輔助篩選時使用，比如XX-XX的火車票展示列表、馬蜂窩的地圖酒店篩選。這種篩選通常能承載1~2級的篩選層級，每種層級下的分類目都不能過多，是一種比較簡單輕便的篩選過程
單一篩選層級
① 與下拉篩選篩選一樣都是以列表的形式展示在篩選內容
兩個篩選層級
① 直接以欄目標題加列表內容的形式排列。
② 左側為一級分類信息展示區，右側為二級分類信息展示區
交互細節
處于頁面的底部導航欄的位置
當用戶出發操作的時候，內容從下往上彈出展示。
電商平臺應用較多的分類形式，通常是有兩個分類層級，一、二級的分類類目都比較多，默認情況下，如果分類特別多時可以只展示第一層級信息，用展開收起輔助用戶瀏覽二級類目信息。
交互細節
因為篩選的分類比較多，且通過展開收起會將已選擇的內容遮擋上，所以我們需要以一種方式將已篩選的條件展示出來，方便用戶及時調整。eg.馬蜂窩將所有用戶選擇的內容都放置在最前面，而京東選擇在欄目上方展示出來。
顯示有多少個符合篩選條件的內容，幫助用戶決策篩選條件是否合理。
本文主要講述了5種內容篩選種類：tab篩選、標簽篩選、下拉篩選、底部篩選和抽屜式篩選，選擇何種篩選類型跟內容分類層級和分類數量相關，所以設計之前要先了解產品的分類及數量，有助于選擇更適合用戶使用的篩選樣式。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
程峰，滴滴出行高級設計總監，具備互聯網和廣告行業工作雙重經驗，同時擁有用戶體驗思維跟創意思維的他，對互聯網設計和創意設計都有著自己的獨到見解。
如今互聯網設計圈，方法論大行其道，很多設計師為了走捷徑過分依賴方法論，但他一直保持著初心，不驕不躁，他認為：方法可以被總結創造，但設計功夫與思維是更可貴的東西，功夫+思維>方法論。
本次訪談，程峰分享了自己的觀點，包括設計師如何融合創意和用戶體驗，在遭遇靈感枯竭的時候如何理性的找靈感等干貨內容。不僅如此，他還偷偷告訴湖湖他在招聘設計人才時最看重的特質。
△ 程峰，滴滴出行高級設計總監
滴滴出行高級設計總監；曾就職于搜狐、百度、Ogilvyone、Cheil鵬泰等知名互聯網公司及 Digital Agency；資深創意人、設計師，獲獎眾多，對創意、設計有深入的了解。
藍湖：
介紹一下你自己，另外，可以跟大家詳細講講您的工作成長經歷嗎？
程峰：
Hello，大家好，我是程峰。
我畢業后的第一份工作在是一家正版音樂公司擔任 GUI設計師，當時正版音樂行業的市場土壤還沒有形成，所以公司沒能發展下去，一年后，公司成為了行業「先烈」，我也只能選擇離開，那是我第一次接觸 UI設計。
在05年的時候，產品用戶體驗設計在國內開始萌芽，我出于對這個行業的喜歡和好奇，加入搜狐從事體驗設計的工作，07年的時候，加入百度做交互/UI，在這個階段，體驗設計思維方式深深扎根在我的腦海。
后來，因為當時國內的用戶體驗設計還不夠成熟，同時出于對廣告視覺表達有極大的興趣，在互聯網用戶體驗行業呆了幾年之后，我投身廣告行業，將本土、4A Digital、媒介型公司都體驗了一把，我在這個階段形成了創意思維思考方式。
體驗設計思維跟創意思維，對我來說都有非常大的價值，可以讓我更靈活面對不同的任務。這兩種思維方式的區別在于：一個是解決產品體驗問題；一個是解決溝通問題。我認為現在的設計師/創意者需要同時具備這兩種思維。
幾年之后，我又回到了互聯網，來到了滴滴。
總體上我的經歷跟大部分設計師朋友一樣，其中不同的可能是我接觸過的領域比較多，在音樂、游戲、搜索引擎、交通、廣告等行業都有過職業經歷，我個人也比較喜歡跨界。
藍湖：
您同時擁有互聯網公司（甲方）及廣告公司（乙方）的工作背景，甲乙方最大的區別是什么？這種經歷對您在工作中分析、解決問題會有什么幫助和優勢？關于這種交叉背景帶來的優勢，您可否深入和我們分享一下？
程峰：
設計師在一般的互聯網公司工作跟乙方公司工作相比還是有區別的。
在乙方，由于接觸到的行業領域比較多，所以適合產出跨領域的通用方法論，思考方式更加橫向，更重視規律，從而能夠解決不同行業的共性化、模塊化問題，但也有可能因信息不夠及時對等，跟進不夠持續，可能導致對問題的理解片面，無法深入。
而在互聯網公司，設計是服務于單一企業產品和業務的，比較單一，但更專注，會對具體行業的具體問題理解更加深入，具備持續性，更重視對變化的即時響應，但同時也容易陷入視角局限，導致脫離規律，無法全局思考。
對我個人來說，甲乙方的雙重經歷使我更加靈活，看待問題具備了更多視角，更容易保持客觀，可以快速切入找到符合規律的問題本質，同時還可以深入并持續性地解決。
藍湖：
創意&設計是服務于品牌和產品的，您是否可以舉一個實例來詳細講講，好的創意&設計是如何服務于產品和品牌的？
程峰：
以滴滴為例，首先，滴滴CDX 很重視不同專業之間的打通與整合，聚沙成塔、匯點成線，這對于創意&設計產生好的效果尤為重要。
2017年，我們曾經在 CDX 內部構建了一個需求關聯池，把產品、品牌、運營三塊設計需求主動整合，并關聯思考，跨專業團隊協作，輸出了司機端App 5.0升級+司機故事+司機教育等相關項目設計，提升了司機師傅們對平臺的認同感，最終達成了1+1+1>3的效果。
設計師要具備敏銳的全局觀和主動性，任何一個體系組織都不可能做到徹底扁平化，信息只要在流通，多少會出現一定程度的不對等和信息失真，各職能都不可能對所有信息細節徹底掌握到位，大多數時候需要主動接觸，主動思考，以建立項目間的共性聯系，而不是坐等被告知，不能過度理想主義。
△ 滴滴「司機故事」創意設計
△ 滴滴「司機故事」創意設計
△ 滴滴「司機端」5.0配色標準
△ 滴滴「司機端」5.0啟動頁面
△ 滴滴「司機端」5.0導航設計
△ 滴滴「司機端」測試環節
藍湖：
創意和用戶體驗是設計師必須思考深入的兩個點，要更好地融合創意和用戶體驗，設計師應該怎么做？舉一個例子？
程峰：
這兩種思維方式雖然一個偏產品，一個偏傳播，但最終都會回歸到一個點上，也就是以用戶為中心，站在用戶的角度思考，基于這個點衍生出來，站在產品層面叫做痛點，站在創意層面叫做洞察。
舉個通俗的例子：一個人早上很難起床，需要借助外力才能被叫醒，這是痛點；一個人早上很難起床，但如果第二天早上有重要的事情要趕飛機，他按時起床的可能性就會變大，這是洞察。
再舉個例子：小朋友容易把衣服弄臟，媽媽洗起來很累。用某品牌洗衣液，針對小朋友衣服常見污漬進行洗滌，省時省力，這是基于用戶媽媽的痛點想出的產品解決方案。小朋友容易把衣服弄臟，但媽媽總是會在第一時間，像變魔術般把干凈如初的衣服放在他的床邊，這是基于媽媽勤勞，母愛的洞察表達。
痛點與洞察交融在一起，可以使設計師在思考的時候更周全，在進行產品體驗設計思考的時候更具備情感引導性，在進行創意思考的時候不至于忽略功能性。
藍湖：
設計類工作需要創造力的支撐，您是否可以跟我們分享一下，如何科學、系統地提高自己的創造力？
程峰：
不得不說，創造力很大程度上是天生的，可以理解為直覺。但洞察力是創造力的前提，是創造力被激發的基礎，洞察力是可以被后天鍛煉的。我個人并沒有總結過科學系統的方法，但我相信一話：「觀察和經驗和諧地應用到生活上就是智慧?！?
如果一定要說方法的話，就是把自我提升需求轉換為習慣，養成針對性定期閱讀并定期總結的習慣。這里的關鍵詞是：定期、針對性。說得再直白點，就是多看多想并持續下去，任何事情的通用訣竅都是持之以恒。
提到這點，想多說幾句，近幾年看到了太多設計師過度重視方法，期望通過方法論找到解決問題的捷徑，我認為這是浮躁的。對于創意&設計，我個人并不否定方法論的價值，但設計本質上還是功夫活，思維的跨越也是從量變到質變積累的過程。在這個階段，我更想跟大家說的是：功夫+思維>方法論。
尤其是希望很多年輕設計師，多下點苦功，多思考，不要把希望都寄托在方法論上。方法可以被總結創造，但設計功夫與思維是更可貴的東西，是設計師真正的能力壁壘。
藍湖：
在滴滴擁有眾多產品，設計師持續提出服務于產品和品牌的好創意和設計似乎并不容易，在設計師們遇到瓶頸時，您會給他們什么建議？在靈感枯竭的情況下，您有什么快速找靈感的好方法嗎？
程峰：
滴滴雖然產品眾多，但好在都是在解決出行問題，所以很多產品之間是具備共性的。
作為設計師，不該局限于自己的產品，應該橫向多看，找到不同產品之間的關聯，多加以借鑒，找到可持續的復用性的解決方案，這是避免陷入到困境的好辦法。
在靈感枯竭的瓶頸期，設計師應該明確一點：任何靈感都來源于對事物、信息的重新組合，當把不同的元素組合應用在不同場景中的時候，會有意想不到的收獲。
腦洞是不能隨意大開的，我認為，找靈感、開腦洞需要兩個前提：第一是持續關注，日常積累，只有一定量的持續積累才能讓大腦里的數據庫足夠大，才能確?？梢栽谛枰臅r候，第一時間任意調取信息并進行重組。第二是邏輯性的結構化思考，可以確保將信息進行有條理、有效、有價值的組合。
藍湖：
面試的時候，您會比較關注候選人的哪些特質？是否具備優秀的創造力，可以通過面試得出結論嗎？您有什么能在短暫的面試時間內找到更適合的人選的秘訣嗎？
程峰：
坦白講，我認為在面試的有限時間空間環境下，很難做到全方位的考察，我個人也無法做到，這也是為什么會有多次面試的原因。
但是關于面試設計師，我還是有一些心得的。首先，設計師的專業能力是根本，除此之外，最重要的是心理成熟度的考察。就設計師的發展來看，很多時候遇到的問題都不是技術問題，大多是心理問題。創造力也同樣重要，雖然個人是否具備創造力可以在溝通中發現一些，但最好的辦法還是設置筆試題來考察。
除此之外，恒心、雄心、好奇心，分別體現了一個人達成目標的能力，自我提升的可能性，以及對專業探索的熱情，優秀的設計師，這三個特質缺一不可。
藍湖：
在提拔設計人員成為設計管理者時，您會重點考察候選人的哪些方面？
程峰：
如果將設計團隊比喻成一支球隊的話，我對團隊內設計管理者的要求是從明星球員變成主教練。
最簡單的考察標準：
藍湖：
滴滴CDX 內部是如何分工協作的？設計有時會是一個比較主觀的，容易出現分歧的工作內容，如果團隊內部的意見出現分歧，您是如何做決策的？
程峰：
CDX 專業分為兩側：體驗設計+創意設計。既解決產品的體驗設計問題，同時也關注業務運營效率及品牌創意設計問題。
我想目前的分工是階段性的，未來的趨勢應該是設計師職能更加融合，最終合并成只有「設計」這個職能。
在面對專業分歧的時候，最的解決辦法依然是溝通。事實上大部分的分歧都是因為目標不一致導致的，所以在遇到分歧時，要保持讓產品、品牌更好的端正、開放的心態，就會被更有道理的觀點說服。
△ 滴滴「CDX」部門成員合照
藍湖：
您作為設計管理者，對于提升產品設計效率，有什么經驗分享給大家嗎？
程峰：
首先，推進設計師成為更「復合」型的人才，設計細分專業之間的融合，能夠降低理解成本。
其次，要繼續推進產品組件化的建設和組件使用率。
最后，針對性使用設計工具，比如使用藍湖完成自動標注和切圖，通過工具規范標準化流程，避免無效溝通和重復勞動。
這些都是提升設計效率的辦法。
藍湖：
對于相對年輕的設計師，您有怎樣的職業發展建議？
程峰：
保持初心，永遠記得你為什么踏上設計這一行，并且時刻具備長遠規劃。
堅信設計的價值，任何職能都不可能解決全世界的問題，專注設計能解決的領域，設計自然更有價值。
保持思考，不僅是對專業的思考，更是對業務的思考，甚至生活和世界的思考。
我也是這樣要求自己的，希望對各位也有幫助。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
什么是插圖呢？或者藝術中插畫的定義是什么？插圖的樣式有哪些？將在本文揭曉！
寫在前面
什么是插畫呢？或者藝術中插畫的定義是什么？插畫的樣式有哪些？
插畫是指藝術家將一段文字，甚至是社會意義翻譯成一幅圖畫。
插畫是用來創造情感或傳達信息的。它在風格上很有表現力，不需要注意。插畫用于書籍，雜志，廣告，漫畫書，漫畫，時裝設計，故事板和視頻游戲。沒有單一的方法來說明，有很多的說明風格。
插畫風格
雖然有許多不同的插圖風格，但這些可以分為以下幾組：
文字插畫
文字插畫風格以與非小說類書籍相似的方式描繪現實。這幅畫描繪了一個可信的場景，即使使用幻想或戲劇。我們來舉一些文字說明的例子：
創造一個攝影圖像
藝術家以照片為素材，以細膩的細節創造出逼真的復制品。
在現實主義攝影中，藝術品常常被誤認為是照片。繪畫、透視和色彩的選擇對這種藝術形式至關重要。藝術家經常使用噴槍，或手畫與丙烯酸或油達到最終的結果。
展示歷史或文化的插畫
這種類型的插畫用于描述歷史或文化事件。通常被一種文化用來描述場景或環境，這種形式的插畫也可以用來描述情緒或增加戲劇感，甚至在攝影的時代。
雖然有時用來美化或貶低文化或人物，這些插圖是現實的，足以被視為文字圖像。
超現實主義
這種形式的插畫試圖抹去藝術和現實之間的界限，被認為是對攝影現實主義的一種進步。
有時，一些額外的功能被添加到一個代表或藝術家可能與單色鉛筆工作，以創建一個社交信息。然而，我們的目標是創造一個盡可能接近現實的形象。這種形式的插畫試圖抹去藝術和現實之間的界限，被認為是對攝影現實主義的一種進步。
概念插圖
概念插畫是隱喻性的，以思想或意象取代了現實主義。雖然這部作品可能包含現實的元素，但其目的是傳達情緒、隱喻和主觀性。這種形式的插畫可以與小說相比，在任何地方。我們來舉幾個例子:
圖像順序
按順序排列的圖像講述一個故事，可以用于卡通、漫畫小說，甚至是電影場景的規劃。風格可能有所不同，從快速素描，以噴槍的細節微調圖紙。根據信息的不同，一幅圖像可以使用清新干凈的顏色，也可以使用墨水、鋸齒狀的線條和混亂的布局來描述政治的混亂事務。
信息圖形
這些是知識的圖形表示。它們通常用于幫助理解復雜的信息。
雖然它們向觀眾展示了他們正在看的內容，但這通常以包含其他見解的方式表示。有些可能看起來像文字插畫。
抽象或扭曲的設計
一種表現形式的說明，從現實中分離出來，從想象中顯現出來。因為它是如此主觀，兩個抽象的藝術品看起來會非常不同。
手繪數字圖紙或插畫
在這種類型的插畫中，藝術家在一個數字畫板上作畫，允許光影之間的平滑過渡。藝術家可以使用圖像層來創建復雜的背景和添加精細的細節。許多這樣的圖像使用柵格(或點)格式，限制了它們在失去質量之前可以放大到的大小。
矢量圖形和插畫
利用矢量圖形，用數學方程進行設計。由于矢量圖不像徒手數字繪圖那樣使用筆畫，圖像不像徒手設計那樣平滑。然而，它們可以在不損失質量的情況下被炸毀。這些圖像有清晰的形狀和輪廓，非常受歡迎的網絡插畫。
兒童插畫
兒童插畫講述一個故事，或給予一個故事，甚至一個虛構的存在的視覺表現。插圖的風格取決于孩子的年齡。有些可能是復雜和現實的，而另一些可能是天真的。許多兒童插畫色彩豐富，包含許多動作或活動。人物通常是明亮的，豐富多彩的和友好的。
社區書籍和圖形小說插畫
漫畫書或超級英雄通常會讓角色參與到行動中。樣式通常很復雜，從線條圖到噴繪圖像都有。然而，漫畫通常是漫畫中最常用的風格之一。
漫畫圖片通常以小組形式出現，并經常涉及到對話框或敘事。有些詞可能與動作結合在一起，比如POW!面板的大小以及它們出現的頻率有助于設定故事的節奏。
書籍封面和出版物
在許多舊書中，例如那些側重于地理或自然歷史的書，插圖都是手工設計的，然后再版。然而，現在，書籍插畫被設計成許多不同的方式，然后印刷。
插畫家經常被用來設計書籍的封面，以便使他們在書店中脫穎而出。封面常常暗示書中的內容，并給人以幽默、嚴肅、文化或運動的印象。
書籍插畫從卡通風格的圖畫到歷史或文化形象。雖然“不要以貌取人”這句話經常被重復，但它實際上是能賣書的封面，并能幫助書吸引正確的讀者。
標志或品牌設計
logo是一種非常特殊的插畫風格。通常他們的目標是提供有關產品的信息，使用顏色、字體或圖像。流行的和容易辨認的標志包括耐克勾或與麥金塔相關的蘋果。標識通常很簡單，但卻能抓住人們對產品的注意力，將其定義為屬于某個特定品牌。
通常，這個品牌與想象中的品質有關，比如速度、力量或創造力，而商標有助于喚起這種情感信息。有時，企業不僅僅使用一個標志來輔助品牌建設。
許多公司使用吉祥物或員工形象來傳達信息。這有助于超越鞋子這樣的產品，讓它在顧客心中有更深的含義。
發展你的插畫風格的技巧
使用互聯網，我們經常被介紹到插畫在網上新聞文章，我們可以下載的音樂，漫畫書，廣告，甚至電子郵件。這向我們展示了廣泛的樣式，這是一件好事，因為它創建了廣泛的示例供我們借鑒。
然而，如果你經常被許多高質量的插畫轟炸，你如何發展自己的風格？這里有一些建議：
了解基本原則
雖然可以通過實踐來學習插畫，但這往往意味著要模仿其他已經形成自己風格的插畫家的風格。釋放你自己的創造潛力是非常重要的，這樣你才能建立和成長，發展你自己的才能和分享你自己的信息。
沒有復制，你可能會問“什么是插畫師?”“正規的教育將教會你插畫的基本原則、動機和技巧，這樣你就可以用這些積木來創造你自己的設計?！?
除了向那些已經在這個領域內的人學習，你還會學到一些哲學，這些哲學將使你能夠加入其中，在你這樣做的時候表達你自己的風格。
探索新的插畫風格
如如果你覺得自己陷入了風格的窠臼，重復做了很長時間的工作，你可能想學習一些新的插畫風格或技巧，進一步發展自己的作品。
然而，請記住，沒有理由強迫自己進入不舒服的空間。如果你覺得停滯不前，或者不喜歡你正在嘗試的工作，請記住，沒有一個藝術家能夠做所有的事情，如果有些事情感覺不太好，準備好繼續前進。
嘗試新媒體
如果你因為你的鋼筆畫而出名，試試丙烯酸樹脂怎么樣?轉換你使用的媒介可能會給你的工作帶來一個新的維度，專注于一個新的氛圍，顏色或閃光。如果您已經使用多種介質，您可以嘗試紋理、蝕刻、模板甚至金屬。
您可以將您的格式從小型繪圖更改為大型畫布，或者從大型繪畫更改為漫畫書大小的圖像。盡管一開始你的結果可能并不出眾，但探索新的媒介會讓你走出舒適區，走出你的風格窠臼。你的實驗是值得的。
做真實的自己
當定義你的插畫風格時，不要圍繞當前市場上銷售的東西來設計它。你的第一個委托是一個巨大的成就，從藝術中賺錢是值得的。
然而，在市場上分享你自己的風格，這樣你才能發展自己的藝術身份。隨著市場的不斷變化，試圖模仿或模仿當前的趨勢會讓你落后一步。
通過發展你自己的風格，你將不斷地在你自己的技術上工作，改進和發展他們，而不是保持一個二流版本的插畫家你欽佩。發展你自己的風格意味著分享你自己的意思，把你自己的想象帶到前臺。
沒有這些，你就不會有創造性的能量來幫助你定義你的工作和保持你的動力。沒有這些，你可能會失去你對插畫的熱愛。
最后說一下對插畫風格的思考
有許多不同的插畫風格或技術。有些是重復的。然而，理解不同的風格和它們所使用的技術使您能夠了解每種不同設計背后的原則，使您能夠探索和擴展您的插圖實踐。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
相比于典型的字、句型結構和圖像，不同尋常的字、句型結構以及圖像會更容易被人們記住。正因為如此，我們在日常工作中才會經常接到類似以下的需求：將新/重要功能的入口，或者運營活動的入口做特殊化處理，增加趣味性來讓用戶加強印象。
這種現象被稱作為梵雷斯托夫效應（相對于普通事件或物體，要記得獨特、有特色的事件或物體可能性會大增）。梵雷斯托夫效應有兩個觸發條件：背景不同以及經驗不同。背景不同是指一個刺激物與周圍的刺激物不同，比如在一串字母中突然出現了一個數字，那個數字就會讓人印象深刻；
經驗不同則是指一個刺激物與記憶中的經驗不同，比如一些經常被我們誤讀的成語，因為與平時的經驗相悖，所以看到正確解釋的時候印象特別深刻。
我們在了解了這兩個觸發條件之后，就可以利用它們來觸發梵雷斯托夫效應，從而幫助我們做出令用戶印象深刻的設計。下面就結合實際案例來看看如何利用它們。
前面說過，背景不同是指一個刺激物與周圍的刺激物不同。具體到界面中，我們可以理解為在一堆相同類型的元素/模塊中，對其中需要突出的做特殊化處理。
案例1 功能入口
京東金融底部導航中的“信用”以及保險頁面中金剛區的“1元購”，都采用了與同類型元素不同的視覺樣式。前者采用了色塊+動效，后者采用了3D視角，分別讓它們在底部導航和金剛區中“脫穎而出”，引起用戶的關注。
案例2 列表內元素
愛奇藝的首頁推薦中，其中一個視頻內容的封面是采用動圖的形式，在其他靜態封面的襯托下，就顯得格外醒目。飛豬的首頁推薦中，則是把專題欄目的信息部分（彩色底白字）設計得與其他商品（白底黑字）差異較大，來吸引用戶關注點擊。
案例3 模塊之間
美團外賣的個人中心將一些常用功能至于一個單獨的模塊中，并且將其中的圖標設計成與其他模塊內的圖標所不同的樣式（黃色填充），如此即突出了常用功能模塊。另一邊愛奇藝的個人中心，“會員服務”與“我的泡泡”則是直接從下面的宮格式布局中脫離出來，并且將各自的一些功能外置，布局交互完全不同于下面的其他模塊，以達到突出這兩個模塊的目的。
以上三個就是典型的“背景不同”觸發梵雷斯托夫效應，從而讓用戶印象深刻的案例。不難發現，對于“背景不同”，已經應用的比較廣泛，并且大家也較為熟知了，接下來看看“經驗不同”。
經驗不同需要顛覆過去的認知，我們可以理解為在一些已經被大家所熟知的視覺/交互中，對其進行“改革創新”。
案例1 虎撲評論點贊
虎撲中的評論點贊不同于我們看到的其他產品，它采用的是一個燈泡ICON來表達該評論“亮了”，更貼合用戶對有趣評論贊賞認同的真實場景。與眾不同的方式也加強了用戶的印象，提升了用戶的黏度。
案例2 嗶哩嗶哩打賞
嗶哩嗶哩中的打賞采用了“馬里奧踩蘑菇”游戲的形式，不同的磚塊代表不同的打賞數額，選擇完數額，滑動馬里奧頂一下磚塊就完成了打賞的整個過程。相比于普通的宮格式菜單選擇，是不是有意思多了呢？
案例3 微信讀書推薦
微信讀書的書城中有一個“搖一搖”的功能，搖動一下手機或者點擊一下“搖一搖”ICON，就會隨機推薦一本書給你。每一次搖動背后的不確定性就像搶紅包一樣，滿足了用戶的獵奇心理，提升了體驗的趣味性。相比于普通的推薦版塊，不僅能讓用戶印象深刻，更會讓他們對此愛不釋手。
其實這些“經驗不同”的案例也不完完全全是創新，比如搖一搖之前就是微信中的一個社交功能。大家可以將平時看到的有意思的設計記錄下來，并思考一下可以復用在哪些地方，說不定下次功能更新就能用上了哦～
在利用“背景不同”時，需要注意避免出現處處都強調的情況。每個元素/模塊都突出了，也就失去了重點，如下圖。
而“經驗不同”需要注意的是，避免為了創新而創新，讓“驚喜”變成“驚嚇”。如下圖，
“清音”作為一個標簽指示，顯然與我們平時所看到的那些標簽樣式大不相同，足以讓我們印象深刻。但是，在知道它是一個標簽之前，我曾誤以為它是一個按鈕。在觸擊無反饋并且右滑屏幕發現后面還有“濁音”之后，我才知道原來這是一個標簽……這樣的“經驗不同”只會造成“負面”的印象深刻。
相對于普通的事物，特殊化的事物更容易讓人印象深刻，我們稱這為梵雷斯托夫效應。觸發梵雷斯托夫效應有兩個條件：背景不同和經驗不同，我們可以利用這兩個條件來做出令用戶印象深刻的設計。
“背景不同”：對需要突出的元素/模塊做特殊化處理，在同類型元素/模塊中脫穎而出。需要注意的是，避免到處都強調，從而失去強調的意義。
“經驗不同”：對過去所熟悉的視覺/交互進行“創新”，從其他不同類型的產品中復用、移植過來。需要注意的是，避免讓“驚喜”變成“驚嚇”。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
情感化設計已經不是一個新概念，唐納德·諾曼在《情感化設計》一書中，清晰地闡述了情感化設計的重要地位與作用?，F階段，同類型的產品在功能、服務、內容上日益趨同，差異越來越小，想讓產品觸及用戶的內心，除了功能滿足需求之外，也需要進行情感化運營。微云在不斷完善基礎功能的同時，還基于用戶行為，增加了許多情感化的體驗，比如往年今日、人臉相冊等。在情感化運營上，微云在2018年開始了較為完整的節日閃屏設計，希望向用戶傳達節日的祝福，拉近產品與用戶的距離。
節日閃屏是指在特定的節日進行情感化設計，傳遞品牌關懷的閃屏。優秀的節日閃屏，在內容上不僅能夠觸達用戶的記憶點，也能夠與品牌相融合，這樣既拉近了用戶與產品的距離，也強化了品牌的認知和記憶。
在開始設計之前，我們期望節日閃屏能夠達到以下兩個目標：
不同的節日有不同的文化背景和風俗習慣，節日祝福可以結合最典型的特征，這樣更有利于喚起用戶回憶，后文會結合案例進行分析。然而，品牌調性是貫穿所有節日的，在設計之初，我們明確微云的品牌調性，這樣更有利于品牌的傳達。
1. 品牌調性研究
Alan Cooper在《About face 4》中提到，在傳達品牌調性時，可以用一組形容詞來描述產品及體驗，這些詞可以組成詞云，用來指導視覺設計。如何創建這組詞云呢？Allan Cooper 提供了四個方法：從品牌大綱提煉關鍵詞、分析現有產品的界面和服務、分析競品的界面和服務、收集用戶反饋。
結合微云的特征，我們從現有產品的界面和用戶反饋兩個角度進行分析，提煉符合微云調性的詞云。
2. 分析現有產品界面
微云的平臺較多，包括WEB端、PC端、移動端、小程序等，其中WEB端和移動端的用戶最多，就從這兩個端入手，分析產品界面的品牌特征。從結構布局和色彩比例上，可以歸納兩端的共同點：結構清晰、留白較多、簡約干凈。
3. 分析用戶反饋
微云用戶在職業分布上，白領用戶占最大。結合使用場景分析，用戶反饋最多的詞是：輕量、方便、下載快速。
4. 提煉微云品牌詞云
結合產品界面「結構清晰、留白較多、簡約干凈」的特征和「輕量、方便、下載快速」的用戶反饋，我們提煉出適合描述微云品牌的詞云：簡約、干凈、留白。
接下來就以勞動節閃屏為例，從節日特征和品牌調性兩個維度來闡述節日閃屏的設計過程。
利用窮舉法，篩選最典型的節日特征。
微云是一個工具化的產品，旅行/度假更適合旅行類產品，勞動/休息與微云更契合。結合產品功能，定了兩個方向，第一個是「五一不勞你動，微云幫你整理」，與備份照片功能結合；第二個是「勞動光榮」，凸顯節日氣氛。以下是一些草圖方案：
前面三個方案重點在于功能的表達，把用戶目光吸引到場景上，內容豐富，但可能造成用戶在3秒內無法明白畫面主題。方案四重點在于氣氛的表達，關注人物故事，角色正在辛勤的勞動，直接點題，場景只起烘托作用。結合「簡約、干凈、留白」的品牌調性和「喚起美好回憶」的品牌期望，我們選擇了氛圍方向進行深入設計。
主題確定之后，就開始進行優化設計了。圍繞著關鍵詞，采用扁平化的設計手法，在色彩搭配上，由于勞動節沒有明顯的色彩傾向，故以品牌藍為主色調，橙色來源于產品的圖標，作為輔助色提亮整體畫面；在頁面排版上，保持大面積的留白，簡約清爽。
勞動節閃屏上線后，我們進行了復盤，我們希望微云的節日閃屏給用戶傳達的是「你的珍貴回憶微云幫你記錄」這樣的小心思，而不是「我們有xx功能」之類的廣告，所以在以后的節日閃屏中，我們會更加傾向節日故事性的表達。視覺風格則采用簡約、干凈、留白的方式，重點突出人物故事，不在場景上過多渲染。
按照上面的思路，我們完善了其他的節日閃屏設計。
母親節閃屏
母親節是一個西方的節日，在這一天，孩子給母親送康乃馨，來表達自己的愛意。在節日故事上選擇了最具代表性的孩子給母親送花的場景。
端午節閃屏
一提到端午節，就會想起粽子的「甜咸之戰」，可見粽子在端午節的重要地位，所以端午節的節日故事就圍繞粽子開展，三個好友齊心協力包粽子。
七夕閃屏
牛郎織女，鵲橋相會，是七夕節的美麗傳說，這一天情侶相聚，相互表達愛意。七夕故事定格在情侶相會的瞬間，女生飛奔向男生，在銀河上翩翩起舞，表達久別重逢的喜悅。
中秋閃屏&圣誕節閃屏
中秋節故事主題是合家團圓、賞月吃餅。圣誕節故事則以父女二人齊心協力裝飾圣誕樹為主題。
△ 備注：圣誕節最終效果圖由另一同事繪制
所有節日閃屏合集
節日閃屏除了故事性的表達之外，在設計上我們也輸出了一部分規范，用來把控風格的統一。
1. 配色規范
色彩作為用戶最容易感知的部分，使用時與品牌相呼應，主色與輔助色均來源于產品圖標。有明顯色彩屬性的節日，以節日固有色為主，比如春節紅色，中秋黃色等等。無明顯色彩屬性的節日，可以以品牌藍為主，強化品牌印記。
2. 角色規范
我們希望重點展示的是人物的珍貴回憶，基于此，我們設計了一批角色，講述角色的故事，讓用戶產生代入感。為了保證統一性，我們制定了人物的細節規范，包括角色頭身比=1 : 9、服裝款式以休閑為主、服飾顏色與品牌色呼應等。
在設定好人物細節規范之后，我們也完善了角色資源庫，方便后期在其他場景的應用。
3. 場景規范
在場景設計上，我們以簡潔，明確為主，場景主要起烘托人物故事的作用，而不進行過多的渲染。
做了一系列閃屏之后，這些插圖和角色并沒有閑置，我們在線下挖掘了一些新的使用場景。這些素材被重新利用起來，變身為辦公室的裝飾掛畫，營造出一個充滿品牌氣氛的辦公環境。
2018年微云希望通過節日閃屏的情感化運營，給用戶傳達節日關懷的同時也強化微云的品牌認知。在后續的規劃中，我們希望節日閃屏不僅僅是單方面的給用戶傳遞關懷，還能夠和用戶互動，實現更深層次的情感交流，比如點擊節日閃屏，跳轉到往年今日，幫助用戶回憶起以往的美好回憶，增加用戶粘性。2019年微云會繼續給大家傳遞節日的祝福，也會不斷探索新的閃屏設計風格，敬請大家期待。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
