總監(jiān)級(jí)的思考!視覺(jué)設(shè)計(jì)該如何賦予產(chǎn)品個(gè)性?

2015-12-15    周周

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

visual-design-character-2

@劉津legene :最近經(jīng)常被問(wèn)到“設(shè)計(jì)如何賦予產(chǎn)品性格”,“如何通過(guò)分析確定哪種視覺(jué)風(fēng)格更合適”等問(wèn)題。遇到這些問(wèn)題我很高興,因?yàn)檫@說(shuō)明越來(lái)越多的人開(kāi)始重視更高層次的設(shè)計(jì)問(wèn)題,而不是局限于設(shè)計(jì)技巧、審美等表層問(wèn)題。

恰巧過(guò)去的半年,我也在研究品牌設(shè)計(jì)相關(guān)的方法。一是因?yàn)榘l(fā)現(xiàn)行業(yè)對(duì)品牌設(shè)計(jì)的研究有了長(zhǎng)足的進(jìn)展,但設(shè)計(jì)結(jié)果卻沒(méi)有太大的改善(行業(yè)內(nèi)有個(gè)怪象:會(huì)使用方法論的設(shè)計(jì)師作品質(zhì)量不見(jiàn)得好;設(shè)計(jì)質(zhì)量好的又不見(jiàn)得會(huì)正確使用方法論。很多設(shè)計(jì)師因此排斥方法論);二是因?yàn)槲覀冊(cè)谧龅氖荁端的產(chǎn)品,這方面的設(shè)計(jì)研究基本上是空白。

從流行的設(shè)計(jì)風(fēng)格到符合產(chǎn)品定位的設(shè)計(jì)風(fēng)格,再到充滿品牌個(gè)性的設(shè)計(jì)風(fēng)格,我和設(shè)計(jì)師在這中間經(jīng)歷了很多挫折。索性我們一直沒(méi)有放棄,期間不斷探索試錯(cuò)、沉淀方法,歷經(jīng)將近一年時(shí)間最后終于找到了答案(在傳統(tǒng)方法上的突破和創(chuàng)新)。

在這里把總結(jié)的經(jīng)驗(yàn)分享給大家,希望更多的設(shè)計(jì)師可以通過(guò)它塑造出符合產(chǎn)品定位且充滿品牌個(gè)性的設(shè)計(jì),為企業(yè)的品牌建設(shè)添磚加瓦。

1sf20151213

△ 品牌設(shè)計(jì)推導(dǎo)過(guò)程

目前來(lái)看,即使是在BAT這樣的公司,有“個(gè)性”、“出彩”的設(shè)計(jì)也并不多見(jiàn)。問(wèn)題出在哪里,對(duì)照上圖,我認(rèn)為“投石問(wèn)路”、“個(gè)性關(guān)鍵詞提煉”、“設(shè)計(jì)主題設(shè)定”是關(guān)鍵,而這幾點(diǎn)是目前行業(yè)欠缺的。

一、制作競(jìng)品圖譜

這個(gè)過(guò)程有點(diǎn)類(lèi)似競(jìng)品分析,尋找同行業(yè)(產(chǎn)品經(jīng)理推薦、網(wǎng)上查找)產(chǎn)品,從中挑選設(shè)計(jì)質(zhì)量較好的,把頁(yè)面存成圖片,把logo分類(lèi)整理等。在這個(gè)過(guò)程中我們自己也會(huì)對(duì)網(wǎng)站進(jìn)行一些分析(參考文章《國(guó)外的視覺(jué)設(shè)計(jì)好在哪里》)。

二、探訪品牌感覺(jué)

做到“知彼”還不夠,還要“知己”。很多設(shè)計(jì)師都有這樣的煩惱,辛辛苦苦做出來(lái)的設(shè)計(jì)稿,在領(lǐng)導(dǎo)眼里卻是各種問(wèn)題(參考文章《視覺(jué)設(shè)計(jì)如何“一稿就過(guò)”》),甚至要推翻重來(lái)。除了視覺(jué)表現(xiàn)能力外,大部分的情況是因?yàn)閷?duì)產(chǎn)品的理解和認(rèn)知與他人不一致造成的。怎樣既能充分了解對(duì)方高屋建瓴的產(chǎn)品理念,又能避免被對(duì)方不專(zhuān)業(yè)的設(shè)計(jì)意見(jiàn)牽著走呢?這里我們使用一種“預(yù)訪談”的方式(我們給這種方法起了個(gè)名字叫“投石問(wèn)路”)。

召集產(chǎn)品owner、產(chǎn)品leader等重要角色,拿出之前準(zhǔn)備好的競(jìng)品圖譜,詢(xún)問(wèn)五個(gè)問(wèn)題:

  1. 您覺(jué)得目前的網(wǎng)站界面有哪些問(wèn)題?期望本次改版達(dá)到什么效果?(從0到1的產(chǎn)品可跳過(guò)這個(gè)問(wèn)題);
  2. 請(qǐng)整體評(píng)價(jià)競(jìng)品logo/界面,有沒(méi)有哪些點(diǎn)符合咱們產(chǎn)品的氣質(zhì)?
  3. 您認(rèn)為咱們的產(chǎn)品應(yīng)該體現(xiàn)出什么感覺(jué)/氣質(zhì)?
  4. 如果把咱們的產(chǎn)品比作一個(gè)人,他應(yīng)該是什么樣的人?
  5. 哪些logo/網(wǎng)站整體最貼近咱們產(chǎn)品的感覺(jué),為什么?
2sf20151213

△ “投石問(wèn)路”法

這樣既能深刻理解產(chǎn)品定位、氣質(zhì),又能了解到使用什么設(shè)計(jì)形式最貼近這種氣質(zhì),還能知曉最終的設(shè)計(jì)拍板者對(duì)各種設(shè)計(jì)形式的看法,避免設(shè)計(jì)師做很多無(wú)用功,同時(shí)還能在正確的方向上充分發(fā)揮?!巴妒瘑?wèn)路”的方法在我們的設(shè)計(jì)過(guò)程中起到了至關(guān)重要的作用。

三、“個(gè)性”關(guān)鍵詞提煉

目前我們已經(jīng)做到”知己知彼“,相當(dāng)于掌握了豐富、正確的原料,接下來(lái)就要進(jìn)行加工創(chuàng)作了。

關(guān)鍵詞提煉的方法相信大家都不會(huì)陌生,我們之前也使用了這種方法,但是效果并不理想。因?yàn)槲覀冏詈笤O(shè)計(jì)出了“正確”但不“出彩”、缺乏“個(gè)性”的產(chǎn)品。以前我們做過(guò)一個(gè)保健品類(lèi)的項(xiàng)目,通過(guò)情緒板的方法提煉出了關(guān)鍵詞”自然、健康、可靠“,最后設(shè)計(jì)出了毫無(wú)驚喜感的界面,還被人質(zhì)疑抄襲了一個(gè)三流健康類(lèi)網(wǎng)站(確實(shí)很相像,我們看完都驚呆了)。設(shè)計(jì)師也對(duì)這種方法頗有微詞,認(rèn)為效果不好(不用情緒板的方法也能想到這些詞,也知道該用綠色)還在一定程度上限制了發(fā)揮。

問(wèn)題出在哪里呢?是對(duì)設(shè)計(jì)的認(rèn)知出現(xiàn)了問(wèn)題:設(shè)計(jì)不僅包含對(duì)產(chǎn)品理性客觀的理解,對(duì)產(chǎn)品感性主觀的認(rèn)知,更要有對(duì)產(chǎn)品個(gè)性塑造的升華。而之前錯(cuò)就錯(cuò)在僅通過(guò)理性或感性的方式來(lái)推導(dǎo)關(guān)鍵詞,卻缺少了重要的藝術(shù)加工的過(guò)程,結(jié)果自然就不會(huì)有驚喜。我們都知道藝術(shù)創(chuàng)作是”源于生活,高于生活“,品牌設(shè)計(jì)也是一樣,它源于對(duì)產(chǎn)品的理解,同時(shí)又高于這種理解。如果我們只是按照普通的方式去提煉關(guān)鍵詞,勢(shì)必得到普通的設(shè)計(jì)。類(lèi)似”潮、簡(jiǎn)單、科技、溫馨、可靠”等關(guān)鍵詞,是不是可以套用在無(wú)數(shù)產(chǎn)品上?那據(jù)此而設(shè)計(jì)的界面又怎么賦予產(chǎn)品獨(dú)特的個(gè)性呢?那看似無(wú)懈可擊的推導(dǎo),最后卻又產(chǎn)出平庸的設(shè)計(jì)也就不足為奇了。

4sf20151213

△ 品牌設(shè)計(jì)模型

順著這個(gè)思路,我們?cè)偬釤掙P(guān)鍵詞(以我們目前在做的一款大數(shù)據(jù)產(chǎn)品為例):

3sf20151213

我們和一線的產(chǎn)品經(jīng)理一起頭腦風(fēng)暴,從理性角度(產(chǎn)品定位)及感性角度(大家分別說(shuō)說(shuō)產(chǎn)品給他的感覺(jué))提煉了一些關(guān)鍵詞,再通過(guò)“投石問(wèn)路”的結(jié)果(根據(jù)我個(gè)人經(jīng)驗(yàn),一線產(chǎn)品經(jīng)理比較務(wù)實(shí);owner及l(fā)eader的想法比較縹緲)及設(shè)計(jì)師的大膽創(chuàng)意,想象出如上圖的個(gè)性關(guān)鍵詞。從圖中可以看出,這里的個(gè)性關(guān)鍵詞是非常抽象的,它給人很大的想象空間,并且源于理性和感性詞。現(xiàn)在有沒(méi)有感覺(jué)產(chǎn)品已經(jīng)有一些個(gè)性出來(lái)了呢?

四、映射個(gè)性風(fēng)格

有了這些詞,我們就開(kāi)始找相關(guān)的圖片制作情緒板了。和傳統(tǒng)的情緒板(關(guān)于情緒板的方法網(wǎng)上有很多文章,這里就不介紹了)方法不一樣的是,我們并不一定要從情緒板里提煉出什么然后嚴(yán)格遵守。因?yàn)榍榫w板就是一個(gè)工具,是幫助設(shè)計(jì)師找感覺(jué)的,而不是限制住設(shè)計(jì)師思維的。

情緒板的作用是幫助設(shè)計(jì)師把關(guān)鍵詞圖形化,同時(shí)思考它是否合適?比如玄幻這個(gè)詞應(yīng)該是一種什么樣的視覺(jué)表現(xiàn)?這種視覺(jué)表現(xiàn)體現(xiàn)在界面上好處理嗎?太極用作logo的話,能夠有哪些表現(xiàn)形式?一方面要通過(guò)情緒板找感覺(jué),一方面在界面上反復(fù)嘗試(試稿),然后通過(guò)權(quán)衡找到合適的風(fēng)格,這是一個(gè)反復(fù)迭代的過(guò)程。

五、設(shè)計(jì)主題設(shè)定

經(jīng)過(guò)多次試稿以及大家的意見(jiàn),設(shè)計(jì)師決定通過(guò)行云流水的整體感覺(jué)打造既有中國(guó)特色,又有B端產(chǎn)品感覺(jué)的獨(dú)特風(fēng)格(由于視覺(jué)稿還未上線,所以這里不多說(shuō)了,僅用于說(shuō)明方法)。logo融入了太極+水滴+水晶球的元素,界面主題為海洋(數(shù)據(jù)可比作大海,同時(shí)海波也是常見(jiàn)的古代傳統(tǒng)花紋元素),界面元素多考慮曲線以及傳統(tǒng)紋樣,整體強(qiáng)調(diào)對(duì)比(太極)及留白(中國(guó)畫(huà)),突出意境……

設(shè)計(jì)主題非常的重要,沒(méi)有主題的設(shè)計(jì)會(huì)顯得單薄、平淡,缺少靈魂。

六、設(shè)計(jì)方案推演

其實(shí)設(shè)計(jì)師并不是一開(kāi)始就決定用行云流水的感覺(jué)貫穿界面始終。最開(kāi)始他想從“陰陽(yáng)”、“太極”、“海波”等感覺(jué)入手(來(lái)自個(gè)性關(guān)鍵詞),但是大家覺(jué)得效果并不是很好;后來(lái)我們決定更落地一點(diǎn),找找“中國(guó)風(fēng)”的感覺(jué),在這個(gè)過(guò)程中通過(guò)情緒板了解了很多中國(guó)傳統(tǒng)的紋樣,改進(jìn)后發(fā)現(xiàn)風(fēng)格確實(shí)明顯了,但整體比較零散,缺乏主線;大家不斷在界面上找問(wèn)題,給建議,設(shè)計(jì)師也做了很多功課,沒(méi)事就上網(wǎng)搜各種中國(guó)畫(huà)找靈感,最終確定了“行云流水”作為貫穿界面整體風(fēng)格的主線,界面主題、元素、風(fēng)格均圍繞這種感覺(jué),最終設(shè)計(jì)出風(fēng)格獨(dú)樹(shù)一幟、個(gè)性十足又不失B端產(chǎn)品行業(yè)共性的作品。我們與眾不同的品牌基調(diào)也就此確定下來(lái)。

所以五、六步并不是一個(gè)完全線性的過(guò)程,它們是一個(gè)不斷迭代的過(guò)程:先通過(guò)第四步情緒板映射個(gè)性關(guān)鍵詞,然后試稿(設(shè)計(jì)師個(gè)人嘗試),在這個(gè)過(guò)程中有了大致的設(shè)計(jì)主題(比如第一個(gè)版本就有海洋元素),在此基礎(chǔ)上通過(guò)設(shè)計(jì)方案推演(大家給建議)不斷改善,在這個(gè)過(guò)程中設(shè)計(jì)主題越來(lái)越清晰,再通過(guò)不斷的推演達(dá)到最終效果。

所以如果你看到某個(gè)設(shè)計(jì)師講述自己的設(shè)計(jì)推導(dǎo)過(guò)程是按照步驟順序完成的,那基本是不可能的。不管是做產(chǎn)品、做交互設(shè)計(jì)還是視覺(jué)設(shè)計(jì),都充滿了無(wú)數(shù)的迭代過(guò)程。再優(yōu)秀的設(shè)計(jì)師也要通過(guò)不斷的修改完善自己的作品。我相信好的設(shè)計(jì)都是改出來(lái)的。

最終我們的設(shè)計(jì)稿在挑剔的老板面前一次通過(guò),大家都感到很興奮,貌似這是第一次這么順利。

寫(xiě)在最后

在互聯(lián)網(wǎng)2.0時(shí)代,設(shè)計(jì)師沒(méi)有什么章法,更多的是隨心所欲的做設(shè)計(jì),設(shè)計(jì)好壞靠的是設(shè)計(jì)師的個(gè)人能力。

在互聯(lián)網(wǎng)3.0時(shí)代,各種優(yōu)秀的互聯(lián)網(wǎng)產(chǎn)品層出不窮,對(duì)設(shè)計(jì)師的要求也越來(lái)越高,優(yōu)秀的設(shè)計(jì)師不僅要有基本的審美能力和設(shè)計(jì)技法,還要懂產(chǎn)品、懂用戶(hù),懂怎么通過(guò)UI設(shè)計(jì)正確的引導(dǎo)用戶(hù)。對(duì)于行業(yè)巨頭來(lái)說(shuō),如果只憑設(shè)計(jì)師的個(gè)人能力,整體設(shè)計(jì)水平將變得極不可控,所以開(kāi)始重視方法論、重視設(shè)計(jì)師的推導(dǎo)能力。這樣可以很好的提升設(shè)計(jì)師的理論能力及產(chǎn)品能力,讓更多設(shè)計(jì)師認(rèn)真的思考如何做正確的設(shè)計(jì);但同時(shí)帶來(lái)的反面效果是設(shè)計(jì)師的創(chuàng)意能力受到限制。最近幾年,國(guó)內(nèi)的設(shè)計(jì)呈現(xiàn)流水線般的感覺(jué),優(yōu)質(zhì)而有創(chuàng)意的設(shè)計(jì)越來(lái)越少見(jiàn),與之不對(duì)稱(chēng)的是設(shè)計(jì)師的自我包裝能力越來(lái)越強(qiáng)了(否則通過(guò)作品沒(méi)辦法拉開(kāi)差距)。

在逐步發(fā)展的“互聯(lián)網(wǎng)+”時(shí)代,互聯(lián)網(wǎng)會(huì)滲透到各行各業(yè),這對(duì)設(shè)計(jì)師也會(huì)有不一樣的要求。每個(gè)行業(yè)的情況都完全不同,這要求設(shè)計(jì)師既要根據(jù)行業(yè)、產(chǎn)品特點(diǎn)做出正確的設(shè)計(jì),又要通過(guò)獨(dú)特的設(shè)計(jì)語(yǔ)言賦予產(chǎn)品不一樣的個(gè)性。未來(lái)注定是一個(gè)在設(shè)計(jì)上百花齊放的時(shí)代,隨著設(shè)計(jì)行業(yè)的不斷成熟,同質(zhì)化的設(shè)計(jì)會(huì)越來(lái)越少,在某些獨(dú)特的行業(yè),設(shè)計(jì)師甚至?xí)o(wú)競(jìng)品可借鑒,只能通過(guò)扎實(shí)的基本功確定設(shè)計(jì)方向。

我希望這一天可以盡快到來(lái)!

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔