效果圖設計經驗分享

　　設計師所做的每個作品都像是自己的孩子一樣，在孕育的過程中思考了很多，但這些思考的過程、思考的方法並不是單單一張效果圖就能夠展現的;設計師有很多專業層面的認知，效果圖上並不能展現，加上設計本來就是相對感性的，所以很多時候分歧就這樣產生了。

　　不要用藍色的，換個顏色試試，試試綠色、紫色、橙色，都試試吧……;這個元素大一些，那個元素也大一些，還有那個也大些……;不要用這個字體，換個別的試試……;嘗試把這個模塊整體放在左邊，下面那個模塊拿到右邊去，不還是整體放在上面試試……OH，My God!每個設計師背後都有一群指點江山的神!呀……

　　每當別人叫你改這改那的時候，作為設計師的你難道能做的就是自怨自憐，一邊舔舐受傷的心，一邊改自己的作品?在這個時候有沒有想過為什麼，有沒有對自己的設計效果圖充分的負責任呢?

　　第一步：100%界面展現+設計思路

　　將效果圖100%界面展現並配以自己的設計思路，這對於設計師發效果圖來說是最基本的了(效果圖由於文章圖片寬度要求進行了壓縮)。如上圖所示，為百度手機輸入法V2.1版默認界面和換主題界面效果，闡明設計理由，方便需求方知道你為什麼這麼設計，對於一些不合理的需求是曾經嘗試過並且pass掉了。

　　對於重要的項目，不能簡單幾句闡明設計理由的，可以采用PPT等形式，多頁闡述設計過程和思路，並最終100%界面展現的設計效果圖。如上圖所示，百度手機輸入法Logo改版時，我們從最初的改版目的、關鍵詞思路擴展、收縮關鍵詞、顏色搭配、元素搭配、實際效果在手機端展現等多角度，說明為什麼 Logo設計采用如此的形狀和顏色。

　　最終新版百度手機輸入法Logo為上圖所示。

　　效果圖展現基本Taps：

　　1. 效果圖要保存成實際大小，或者不影響需求方對效果判斷的尺寸

　　2. 將圖片保存成.png或者盡可能質量高的.jpg或者.gif格式，不要讓效果圖色彩有損失

　　3. 闡明設計理由：為什麼要用這幾種顏色搭配?為什麼圖標要設計成這樣的質感?為什麼要使用這種字體?…… 如果是重要項目，思考更為復雜和成體系的，可以考慮PPT等形式進行整體闡述

　　4. 如果是手機端界面設計，盡量提供文件供需求方實際上機測試看效果。

　　第二步：賦予思想和生命，融入情景化設計

　　上述所說的第一步是作為一個設計師交付效果圖最最基本的需求。在完成第一步後，如果想給你的效果圖更為加分，那麼就需要給效果圖賦予思想和生命，融入情感化的設計。關於這點大家可以嘗試從如下幾方面入手。

　　整合：將幾個關鍵界面整合在一張圖上，如上圖所示，百度手機浏覽器Android版的效果圖，將起始頁、輸入狀態、進度條讀取、未讀取等狀態進行了整合。這樣做方便需求方根據交互流程圖對照，能夠對軟件有比較整體的感覺。 任何設計都不是孤立存在的，放在一起更能夠讓需求方明白設計師的整體考慮，盡可能減少一個界面、一個細節效果修飾的近乎完美，但是在整套界面中搭配存在不和諧的情況。也能夠讓需求方明白你有全局考慮的意識。

　　動態效果：越來越多的軟件設計從添加動效這個角度提升用戶使用感受，動效可以使界面與界面間切換看起來更為銜接和流暢，但是如何能夠讓需求方或者開發方明白設計師希望表現得動效是怎樣的。這個時候如果能夠在效果圖初稿階段稍許添加一些，就可以讓需求方在第一時間感受到效果，用盡可能少得成本有所體現。如上圖所示，某軟件的效果圖中，就簡單展示了撥盤滾動、更多相關信息滾動等效果。當然效果初稿確認後，如果需要更為真實的動效，還需要制作動態 Demo，更為高階的效果展示暫時不予討論。

　　情景化：正如上面所說，每個設計元素都不是孤立存在的一樣，效果圖也是可以有思想和生命的。如上圖所示，百度手機浏覽器Logo設計的效果圖，完成這樣已經完成第一步了，100%的效果展現+設計思路。

　　設計是很感性的，除了專業的理論用以支撐和說服外，如何才能讓設計師在設計過程中想要傳達和表述的意境，想要帶給用戶的使用感受最直觀的傳達……那只完成第一步就遠遠不夠了，這時可以在第一步的基礎上，輔助一些情景化的效果圖，將設計師心中的想法直觀的表現出來。如上圖所示，百度手機浏覽器的小熊 Logo，他是活的，他可以悲傷、可以快樂、可以蹦跳、甚至可以飛翔……這樣做為了能夠說明，這個Logo在未來有很好的延展性。

　　他不是孤零零的哦!在這個世界上他又自己的朋友!這樣做是為了說明，除了日常以標准樣式出現外，在特定的節日或者根據特定的人群，他是可以個性化定制的，為後期運營打下了很好的基礎。

　　作為一款產品的Logo，最終在產品應用上的展現是他的使命。如上圖所示，效果圖充分展現了Logo在未來使用的各個場景的效果：啟動界面、桌面圖標、桌面Widget等。一方面能夠讓設計師在考慮之初，仔細審核設計是否可以應用於各個場景，是否需要根據場景做相應的變形;另一方面，也可以讓需求方直觀的感受到，設計在未來應用中的實際效果。

　　他不僅不是孤零零的，有自己的朋友，他甚至有自己生活的事業，他是一只沖破了第一宇宙速度的熊，他高高在宇宙看著地球上的一切一切……

　　通過上述第一步、第二步的工作，需求方能夠通過效果圖清楚明白在設計過程中都考慮過什麼，設計配上、界面布局等等一切都是有理由的，他們能夠和設計師感同身受，這個時候推動效果被最終使用的幾率就大大增加了，雖然看似多花了時間，但是後期不斷調整修改的時間會大大減少。很多時候並不是背後的"神"們有多難搞，而是在思想上沒有同步，設計師沒有明白需求方要的究竟是什麼，需求方也沒有最終明白設計師究竟想表達的是什麼。

　　效果圖展現進階Taps：

　　1. 有相互關聯的幾個關鍵界面，放在一整張圖上面予以一並展示

　　2. 涉及到動態交互的，提供簡單的動態效果

　　3. 設計是感性的，通過情感化的效果圖讓需求方明白在設計過程中都做了哪些思考……

　　在上述Tips的後面，我添加了……，是因為這樣還是遠遠不夠的，後續還有更多可以為效果圖做的事情。設計作品就像是設計師的孩子，而效果圖則是這個孩子第一次接受世界審視的機會，如果你真愛自己的孩子的話，就請好好包裝，讓效果圖不再是冷冰冰，而是可以傳達你的思想和感受的載體，給效果圖賦予思想和生命吧!