別讓不會講故事的設計師，毀掉了你的好作品
靜電說
本文是我去年出版的《不一樣的UI設計師》中的一節，拿出來與大家分享。在隨後的公眾號推送中，我會放出更多高質量的文章內容，在此刻，不管有沒有苦惱於自己的設計稿很難得到瀏覽者的認同，都建議你來讀讀這篇文章，希望我的一點點感悟，能夠更好的幫到你。
-------------《不一樣的UI設計師》第二章第七節-------------
很多設計師不善於言辭，表達能力有限。當設計需求下來時，苦思冥想，期待腦袋中那一點星星之火點燃苦苦尋覓的靈感。好不容易，靈感來臨，思如泉湧，手中的滑鼠猶如神來之筆，將大腦中的構思傾瀉於畫布上。於是乎，耗盡九牛二虎之力完成的作品終於面世。當他們興沖沖拿給別人看，滿心期待旁人的好評時，通常情況都不會怎麼好。就如同把自己眼中可愛的飛上天的孩子一張張的秀到朋友圈，過了很久卻沒人點贊的心情。
「你們都不理解我，我做的那麼努力，那麼出色，你們卻看不懂！」於是他抱怨著，開始默默的坐下來，打開電腦修改。於是，經過無數次的意見，一個「四不像」誕生了。
於是另一波吐槽兇猛襲來，「這應用界面怎麼這樣啊？」「好醜！不喜歡」……設計師開始鬱悶，「為什麼要我背這個鍋！？不公平」。
拋開別人不懂設計師作品這個客觀因素。那麼，作為設計師的我們應該自我反思一下：「別人為什麼不懂你？別人要怎麼懂你？」在別人看到你作品的時候，你有想過好好把它們包裝一番了嗎？或者，來講個故事，讓你的觀眾置身於這個情境中欣賞？一頓燭光晚餐可以讓原本不怎麼好吃的牛排也變的有滋有味，凌晨耳機中播放的情歌更讓你潸然淚下。也許你應該想想，對於設計稿而言，你是否可以創造一個「氛圍」或者「場景」，讓觀看者置身其中呢？
目前我們的UI作品面臨的現狀
1.同質化嚴重，扁平化讓我們的作品千篇一律
2.流行什麼就做什麼，不去深究作品為產品究竟要帶來什麼氣質。
3.設計師的「普遍水準」已經達到一定高度，無法在「設計稿」階段產生眼前一亮的感覺
簡單的練習 馬上開始講故事
從這個層面上來說，想要脫穎而出，其實是一個很難的事情。我們不妨從講故事來入手。如果你無法理解，那麼，讓我們一起想像一個你最熟悉的場景：
此時，你坐在電影院里。
周圍燈光漸暗，熒幕徐徐亮起，一首動人的鋼琴曲迴響在耳邊，一輛火車徐徐穿過一片廣闊茂密的森林。
此刻，鏡頭拉向坐在車窗旁的你，你正眺望著車窗外快速略過的景色。
你正在去遠方看望一位摯友的旅途中
你回想起你們在一起的快樂時光
你們的故事即將展開
OK，不管我的故事有沒有讓你沉浸，但我開了一個好頭，我在嘗試把你拉入一個場景中，讓我們產生共情感，這樣做的一個好處就是，你可以迅速抓住瀏覽者的注意力，讓其願意往下看。
因此，故事和情景是一個非常有效的載體，將自己的設計稿放在某種情境或者故事中，更容易獲得他人的認可和接納。一場電影所告訴人的人生哲理遠比科班的說教更有效，不是嗎？關於這點，我的新書《不一樣的UI設計師》里有更詳細的描述，歡迎大家在京東，噹噹，天貓搜索購買。
適度包裝設計稿 讓其具有臨場感
設計稿完成後，大部分設計師所做的第一件事也是唯一一件事，就是把設計稿從Sketch或者Photoshop中導出為N多張圖片，每張圖片上就是乾巴巴的界面。然後，將它們打包，一聲不吭就拽給了產品經理或者需求提出者。很明顯，這樣的效果很不好。因為外人眼中的設計稿和你自己眼中的設計稿是兩碼事。
因此，在每一次交付設計稿之前，你都需要花點時間將設計稿包裝的更具有「臨場感」一些。比如說，通過手機上觀看設計稿比在電腦上打開觀看設計稿更容易得到觀眾的認同。
優雅展示關鍵頁 而非全部頁
通常一個項目下來，UI設計稿頁面都會很多，少則幾十頁，多則上百頁。因此，在不同的展示環境下，設計師需要選擇合適的展示方式。分幾種情況：
在初次展示視覺設定時
在後續展示頁面詳細功能設計時
在對外界宣傳產品形象時
對投資人等展示APP功能時
在產品還在策劃及設計期間，設計師一般不需要將所有功能頁面全部完成。他們只需要展示某些特定的重點頁面即可。最需要展示的頁面為產品的啟動界面（Splash），欄目主頁，圖標等內容。因此在這個時期，設定情景顯得至關重要。筆者更建議首先設計閃屏和圖標內容，因為這往往代表了整個產品的氛圍，使用環境，用戶感覺等。所以，不要忽視閃屏設計對整個應用風格的影響，第一印象往往會起到至關重要的作用。在下圖中，啟動界面在某種程度上就是風格及氛圍的設定。但是這些還不夠，因為啟動界面時間太短，我們需要將這種氛圍或者環境放大，把整個應用界面置身於這個環境中。
以食色和Flipboard舉例，食色的閃屏為可口美味的食物，因此，氛圍的設定可以從這方面入手，選擇精緻美食的照片作為展示頁面的氛圍圖或者背景圖，不斷的強化這種感覺。另外，如果應用在此時已經確定Slogan（宣傳語），對設計氛圍的設定幫助也非常大。各位讀者可以看一看，上面一組啟動界面中，哪些是有Slogan的，這些Slogan對應用風格產生了哪些影響？
啟動界面設計完畢後，應用風格及氛圍就有了頭緒，依照我們前面章節提到的情緒版的繪製方法，設定情緒版，提煉情緒，讓這種情緒貫穿整個應用。比如Keep這款應用所表達的情緒就是「自律」，「堅持」，因此將這一的情緒在應用中做發散和強化，從側面影響使用者的觀感，從而讓用戶產生一種在健身時的自律與守時的感覺。
在Bear這款寫作應用中，紅白風格的啟動畫面讓我們感受到了北極熊內心的似火熱情。它純粹，卻不冰冷，讓寫作更加有趣和優雅。這種主線通過不同的角色動作在Bear中貫穿始終，很好的將用戶的情緒代入到設計師想要的感覺里。
根據展示場景和目的選擇展示方式
在後續展示頁面詳細功能設計時，設計的目的隨之發生變化，設計師的著力目標由視覺表現力轉移到每個頁面功能點的實現上，在此過程中，我們需要特別重視海量設計稿的功能分類及合理展示上。因為此時視覺設計大部分已經通過審核，故事及場景反而是在這個過程中退而求其次，設計師要著重考慮如何將設計稿內的功能模塊設計更合理，交互效果表現更加流暢，以及後期工程師復現的溝通上。
當產品設計完成並上線後，設計師有很大機會可能接觸到市場宣傳相關的工作。應用自身的品牌及視覺擴展在這個階段又被提到一個很重要的位置上來。這也是設計師思考及改善產品外在形象的一個好機會，雖然「形象」這種東西看不見摸不著，但是它卻是一種對於產品本身特別重要的光環加成。你可以在適當的時候講個故事，或者在設計產品宣傳海報的時候綜合考慮使用者的故事與場景，將這些結合形成屬於產品特有的氣質。如果你的產品是一款健身應用，那麼不妨講一個健身房裡的健身者如何堅持自己，改變自己的故事；如果它是一款美食應用，那麼不妨從身邊的美食達人的故事講起，通過食物來講述一個個感動人心的小段子；或者它是一款名為「旅途」的應用，那你可以考慮講一個在旅途上的故事，或者作一首小詩，這些將成為讓你融入整個場景和情緒的最好方法。
在對投資人展示APP的時候，我們的目標又會發生變化。投資人最想得到的其實是這個項目的功能流程及價值，所以我們在這一過程中，除了營造氛圍，講一個打動人心的故事外，更需要將這些所有內容穿起來，形成一系列可供投資人操作的內容，藉助本書後期介紹的Flinto等工具，你可以快速完成需要的高保真應用，並能讓它真正在手機上動起來。在不同的設計情境中，設計師所要了解的側重點都不同，因此，靈活對應，分清楚每個階段的目標，講出適合不同情境的故事，是設計師需要重點考慮的事情。關於這點，我的新書《不一樣的UI設計師》里有更詳細的描述，歡迎大家在京東，噹噹，天貓搜索購買。
用情緒版構建場景和推理
構建場景最簡單的方式是使用本書前面章節提到的情緒版，我們可以把APP所呈現跟用戶的情緒歸納為關鍵詞，比如上頁中的這款「旅圖」應用。設計師希望能強調旅行這件事的儀式感以及對心靈的影響，那麼在關鍵情緒的提煉上，則要注意擺脫傳統旅行類應用強調「快樂」「愉悅」的情緒，著重刻畫目的地給旅行者所帶來的「洗禮」，「震撼」及「改變」。因此場景氛圍整體穩重與文藝，在情緒板圖片素材的選擇上也應著力此種感覺的塑造，讓應用變的更具有「人文」氣質，
而隨之我們可以提煉情緒板中的典型色彩，選擇一組或者多組應用於產品設計過程中。這些顏色可以搭配成為一組或者多組配色方案，一個作用即為渲染氛圍及環境，另外可以作為設計過程中的氛圍色及點睛色，以及輔助色使用。比如下圖中的黎色，黛綠色，藏青色可作為環境色或者點睛色，石墨黑及灰白色主要用於文本，分割線等位置的配色。
氛圍構建完成後，再次整理故事板中使用的圖片，進行提升及故事融入，不管是上頁中配圖的一段文字，或者是由圖所衍生出的小小故事，對設計本身都能很好的提升場景融入感及沉浸度，讓使用者帶著某種心情來使用你的產品，為產品帶來「心理光環」的加成效果，從而更好塑造產品的品牌形象。
多做練習，成為自己的大導演
通過下面這幅圖所呈現的場景，你是否可以將思維發散，自己來看圖講一個動聽的故事呢？這是你開始成為「大導演」的第一步哦~
不一樣的Tips
把APP設計的作為傳統視覺傳達來考慮，可以很好的為你在後續的設計中節省溝通時間和成本。當你對移動應用的設計無法入手時，不妨先從故事板，氛圍營造及關鍵詞梳理開始，一步步的深化，最後再考慮細節。現在開始，嘗試做屬於自己的故事板吧！
課後總結
1.通過開篇的短小故事打動你的瀏覽者
2.讓你的瀏覽者置身你設定的環境中，並讓他們感到舒適
3.共情，了解他們想要什麼，或讓他們感動和同情
4.引入設計稿包裝二次包裝來展開話題
5.適當加入理性推導，如故事板，情緒版等公式化推理過程，讓你的結果顯得有理有據。
6.用營銷思維（廣告公司常用）去「營銷」自己的設計稿。
7.在設計之餘，欣賞一些優秀的演講視頻，了解這些演講者的「套路」
-------------版權聲明-------------
本文受國家版權法保護
如您需要轉載，請徵得作者許可
並醒目註明如下信息
作者：靜電
本文來自《不一樣的UI設計師》
微信公眾號：jingdesign91
---------------------------------------
提升設計師核心競爭力
歡迎報名《靜電的UI設計教室》課程
6月15日開課 超小班課程 名額有限
TAG:靜Design |