設(shè)計(jì)師給設(shè)計(jì)效果圖賦予思想和生命
設(shè)計(jì)師所做的每個(gè)作品都像是自己的孩子一樣,在孕育的過程中思考了很多,但這些思考的過程、思考的方法并不是單單一張效果圖就能夠展現(xiàn)的;設(shè)計(jì)師有很多專業(yè)層面的認(rèn)知,效果圖上并不能展現(xiàn),加上設(shè)計(jì)本來(lái)就是相對(duì)感性的,所以很多時(shí)候分歧就這樣產(chǎn)生了。
不要用藍(lán)色的,換個(gè)顏色試試,試試綠色、紫色、橙色,都試試吧……;這個(gè)元素大一些,那個(gè)元素也大一些,還有那個(gè)也大些……;不要用這個(gè)字體,換個(gè)別的試試……;嘗試把這個(gè)模塊整體放在左邊,下面那個(gè)模塊拿到右邊去,不還是整體放在上面試試……OH,My God!每個(gè)設(shè)計(jì)師背后都有一群指點(diǎn)江山的神!呀……
每當(dāng)別人叫你改這改那的時(shí)候,作為設(shè)計(jì)師的你難道能做的就是自怨自憐,一邊舔舐受傷的心,一邊改自己的作品?在這個(gè)時(shí)候有沒有想過為什么,有沒有對(duì)自己的設(shè)計(jì)效果圖充分的負(fù)責(zé)任呢?
第一步:100%界面展現(xiàn)+設(shè)計(jì)思路
將效果圖100%界面展現(xiàn)并配以自己的設(shè)計(jì)思路,這對(duì)于設(shè)計(jì)師發(fā)效果圖來(lái)說(shuō)是最基本的了(效果圖由于文章圖片寬度要求進(jìn)行了壓縮)。如上圖所示,為百度手機(jī)輸入法V2.1版默認(rèn)界面和換主題界面效果,闡明設(shè)計(jì)理由,方便需求方知道你為什么這么設(shè)計(jì),對(duì)于一些不合理的需求是曾經(jīng)嘗試過并且pass掉了。
對(duì)于重要的項(xiàng)目,不能簡(jiǎn)單幾句闡明設(shè)計(jì)理由的,可以采用PPT等形式,多頁(yè)闡述設(shè)計(jì)過程和思路,并最終100%界面展現(xiàn)的設(shè)計(jì)效果圖。如上圖所示,百度手機(jī)輸入法Logo改版時(shí),我們從最初的改版目的、關(guān)鍵詞思路擴(kuò)展、收縮關(guān)鍵詞、顏色搭配、元素搭配、實(shí)際效果在手機(jī)端展現(xiàn)等多角度,說(shuō)明為什么Logo設(shè)計(jì)采用如此的形狀和顏色。
最終新版百度手機(jī)輸入法Logo為上圖所示。
效果圖展現(xiàn)基本Taps:
1. 效果圖要保存成實(shí)際大小,或者不影響需求方對(duì)效果判斷的尺寸
2. 將圖片保存成.png或者盡可能質(zhì)量高的.jpg或者.gif格式,不要讓效果圖色彩有損失
3. 闡明設(shè)計(jì)理由:為什么要用這幾種顏色搭配?為什么圖標(biāo)要設(shè)計(jì)成這樣的質(zhì)感?為什么要使用這種字體?…… 如果是重要項(xiàng)目,思考更為復(fù)雜和成體系的,可以考慮PPT等形式進(jìn)行整體闡述
4. 如果是手機(jī)端界面設(shè)計(jì),盡量提供文件供需求方實(shí)際上機(jī)測(cè)試看效果。
第二步:賦予思想和生命,融入情景化設(shè)計(jì)
上述所說(shuō)的第一步是作為一個(gè)設(shè)計(jì)師交付效果圖最最基本的需求。在完成第一步后,如果想給你的效果圖更為加分,那么就需要給效果圖賦予思想和生命,融入情感化的設(shè)計(jì)。關(guān)于這點(diǎn)大家可以嘗試從如下幾方面入手。
整合:將幾個(gè)關(guān)鍵界面整合在一張圖上,如上圖所示,百度手機(jī)瀏覽器Android版的效果圖,將起始頁(yè)、輸入狀態(tài)、進(jìn)度條讀取、未讀取等狀態(tài)進(jìn)行了整合。這樣做方便需求方根據(jù)交互流程圖對(duì)照,能夠?qū)浖斜容^整體的感覺。 任何設(shè)計(jì)都不是孤立存在的,放在一起更能夠讓需求方明白設(shè)計(jì)師的整體考慮,盡可能減少一個(gè)界面、一個(gè)細(xì)節(jié)效果修飾的近乎完美,但是在整套界面中搭配存在不和諧的情況。也能夠讓需求方明白你有全局考慮的意識(shí)。
動(dòng)態(tài)效果:越來(lái)越多的軟件設(shè)計(jì)從添加動(dòng)效這個(gè)角度提升用戶使用感受,動(dòng)效可以使界面與界面間切換看起來(lái)更為銜接和流暢,但是如何能夠讓需求方或者開發(fā)方明白設(shè)計(jì)師希望表現(xiàn)得動(dòng)效是怎樣的。這個(gè)時(shí)候如果能夠在效果圖初稿階段稍許添加一些,就可以讓需求方在第一時(shí)間感受到效果,用盡可能少得成本有所體現(xiàn)。如上圖所示,某軟件的效果圖中,就簡(jiǎn)單展示了撥盤滾動(dòng)、更多相關(guān)信息滾動(dòng)等效果。當(dāng)然效果初稿確認(rèn)后,如果需要更為真實(shí)的動(dòng)效,還需要制作動(dòng)態(tài)Demo,更為高階的效果展示暫時(shí)不予討論。
情景化:正如上面所說(shuō),每個(gè)設(shè)計(jì)元素都不是孤立存在的一樣,效果圖也是可以有思想和生命的。如上圖所示,百度手機(jī)瀏覽器Logo設(shè)計(jì)的效果圖,完成這樣已經(jīng)完成第一步了,100%的效果展現(xiàn)+設(shè)計(jì)思路。
設(shè)計(jì)是很感性的,除了專業(yè)的理論用以支撐和說(shuō)服外,如何才能讓設(shè)計(jì)師在設(shè)計(jì)過程中想要傳達(dá)和表述的意境,想要帶給用戶的使用感受最直觀的傳達(dá)……那只完成第一步就遠(yuǎn)遠(yuǎn)不夠了,這時(shí)可以在第一步的基礎(chǔ)上,輔助一些情景化的效果圖,將設(shè)計(jì)師心中的想法直觀的表現(xiàn)出來(lái)。如上圖所示,百度手機(jī)瀏覽器的小熊Logo,他是活的,他可以悲傷、可以快樂、可以蹦跳、甚至可以飛翔……這樣做為了能夠說(shuō)明,這個(gè)Logo在未來(lái)有很好的延展性。
他不是孤零零的哦!在這個(gè)世界上他又自己的朋友!這樣做是為了說(shuō)明,除了日常以標(biāo)準(zhǔn)樣式出現(xiàn)外,在特定的節(jié)日或者根據(jù)特定的人群,他是可以個(gè)性化定制的,為后期運(yùn)營(yíng)打下了很好的基礎(chǔ)。
作為一款產(chǎn)品的Logo,最終在產(chǎn)品應(yīng)用上的展現(xiàn)是他的使命。如上圖所示,效果圖充分展現(xiàn)了Logo在未來(lái)使用的各個(gè)場(chǎng)景的效果:?jiǎn)?dòng)界面、桌面圖標(biāo)、桌面Widget等。一方面能夠讓設(shè)計(jì)師在考慮之初,仔細(xì)審核設(shè)計(jì)是否可以應(yīng)用于各個(gè)場(chǎng)景,是否需要根據(jù)場(chǎng)景做相應(yīng)的變形;另一方面,也可以讓需求方直觀的感受到,設(shè)計(jì)在未來(lái)應(yīng)用中的實(shí)際效果。
他不僅不是孤零零的,有自己的朋友,他甚至有自己生活的事業(yè),他是一只沖破了第一宇宙速度的熊,他高高在宇宙看著地球上的一切一切……
通過上述第一步、第二步的工作,需求方能夠通過效果圖清楚明白在設(shè)計(jì)過程中都考慮過什么,設(shè)計(jì)配上、界面布局等等一切都是有理由的,他們能夠和設(shè)計(jì)師感同身受,這個(gè)時(shí)候推動(dòng)效果被最終使用的幾率就大大增加了,雖然看似多花了時(shí)間,但是后期不斷調(diào)整修改的時(shí)間會(huì)大大減少。很多時(shí)候并不是背后的“神”們有多難搞,而是在思想上沒有同步,設(shè)計(jì)師沒有明白需求方要的究竟是什么,需求方也沒有最終明白設(shè)計(jì)師究竟想表達(dá)的是什么。
效果圖展現(xiàn)進(jìn)階Taps:
1. 有相互關(guān)聯(lián)的幾個(gè)關(guān)鍵界面,放在一整張圖上面予以一并展示
2. 涉及到動(dòng)態(tài)交互的,提供簡(jiǎn)單的動(dòng)態(tài)效果
3. 設(shè)計(jì)是感性的,通過情感化的效果圖讓需求方明白在設(shè)計(jì)過程中都做了哪些思考……
在上述Tips的后面,我添加了……,是因?yàn)檫@樣還是遠(yuǎn)遠(yuǎn)不夠的,后續(xù)還有更多可以為效果圖做的事情。設(shè)計(jì)作品就像是設(shè)計(jì)師的孩子,而效果圖則是這個(gè)孩子第一次接受世界審視的機(jī)會(huì),如果你真愛自己的孩子的話,就請(qǐng)好好包裝,讓效果圖不再是冷冰冰,而是可以傳達(dá)你的思想和感受的載體,給效果圖賦予思想和生命吧!
來(lái)源:百度MUX
- 目前還沒評(píng)論,等你發(fā)揮!