萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 視覺設計該如何賦予產品個性?

視覺設計該如何賦予產品個性?

   最近經常被問到“設計如何賦予產品性格”,“如何通過分析確定哪種視覺風格更合適”等問題。遇到這些問題我很高興,因為這說明越來越多的人開始重視更高層次的設計問題,而不是局限於設計技巧、審美等表層問題。

  恰巧過去的半年,我也在研究品牌設計相關的方法。一是因為發現行業對品牌設計的研究有了長足的進展,但設計結果卻沒有太大的改善(行業內有個怪象:會使用方法論的設計師作品質量不見得好;設計質量好的又不見得會正確使用方法論。很多設計師因此排斥方法論);二是因為我們在做的是B端的產品,這方面的設計研究基本上是空白。

  從流行的設計風格到符合產品定位的設計風格,再到充滿品牌個性的設計風格,我和設計師在這中間經歷了很多挫折。索性我們一直沒有放棄,期間不斷探索試錯、沉澱方法,歷經將近一年時間最後終於找到了答案(在傳統方法上的突破和創新)。

  在這裡把總結的經驗分享給大家,希望更多的設計師可以通過它塑造出符合產品定位且充滿品牌個性的設計,為企業的品牌建設添磚加瓦。

視覺設計該如何賦予產品個性?三聯

  △ 品牌設計推導過程

  目前來看,即使是在BAT這樣的公司,有“個性”、“出彩”的設計也並不多見。問題出在哪裡,對照上圖,我認為“投石問路”、“個性關鍵詞提煉”、“設計主題設定”是關鍵,而這幾點是目前行業欠缺的。

  一、制作競品圖譜

  這個過程有點類似競品分析,尋找同行業(產品經理推薦、網上查找)產品,從中挑選設計質量較好的,把頁面存成圖片,把logo分類整理等。在這個過程中我們自己也會對網站進行一些分析。

  二、探訪品牌感覺

  做到“知彼”還不夠,還要“知己”。很多設計師都有這樣的煩惱,辛辛苦苦做出來的設計稿,在領導眼裡卻是各種問題,甚至要推翻重來。除了視覺表現能力外,大部分的情況是因為對產品的理解和認知與他人不一致造成的。怎樣既能充分了解對方高屋建瓴的產品理念,又能避免被對方不專業的設計意見牽著走呢?這裡我們使用一種“預訪談”的方式(我們給這種方法起了個名字叫“投石問路”)。

  召集產品owner、產品leader等重要角色,拿出之前准備好的競品圖譜,詢問五個問題:

  您覺得目前的網站界面有哪些問題?期望本次改版達到什麼效果?(從0到1的產品可跳過這個問題);

  請整體評價競品logo/界面,有沒有哪些點符合咱們產品的氣質?

  您認為咱們的產品應該體現出什麼感覺/氣質?

  如果把咱們的產品比作一個人,他應該是什麼樣的人?

  哪些logo/網站整體最貼近咱們產品的感覺,為什麼?

2sf20151213

  △ “投石問路”法

  這樣既能深刻理解產品定位、氣質,又能了解到使用什麼設計形式最貼近這種氣質,還能知曉最終的設計拍板者對各種設計形式的看法,避免設計師做很多無用功,同時還能在正確的方向上充分發揮。“投石問路”的方法在我們的設計過程中起到了至關重要的作用。

  三、“個性”關鍵詞提煉

  目前我們已經做到”知己知彼“,相當於掌握了豐富、正確的原料,接下來就要進行加工創作了。

  關鍵詞提煉的方法相信大家都不會陌生,我們之前也使用了這種方法,但是效果並不理想。因為我們最後設計出了“正確”但不“出彩”、缺乏“個性”的產品。以前我們做過一個保健品類的項目,通過情緒板的方法提煉出了關鍵詞”自然、健康、可靠“,最後設計出了毫無驚喜感的界面,還被人質疑抄襲了一個三流健康類網站(確實很相像,我們看完都驚呆了)。設計師也對這種方法頗有微詞,認為效果不好(不用情緒板的方法也能想到這些詞,也知道該用綠色)還在一定程度上限制了發揮。

  問題出在哪裡呢?是對設計的認知出現了問題:設計不僅包含對產品理性客觀的理解,對產品感性主觀的認知,更要有對產品個性塑造的升華。而之前錯就錯在僅通過理性或感性的方式來推導關鍵詞,卻缺少了重要的藝術加工的過程,結果自然就不會有驚喜。我們都知道藝術創作是”源於生活,高於生活“,品牌設計也是一樣,它源於對產品的理解,同時又高於這種理解。如果我們只是按照普通的方式去提煉關鍵詞,勢必得到普通的設計。類似”潮、簡單、科技、溫馨、可靠”等關鍵詞,是不是可以套用在無數產品上?那據此而設計的界面又怎麼賦予產品獨特的個性呢?那看似無懈可擊的推導,最後卻又產出平庸的設計也就不足為奇了。

4sf20151213

  △ 品牌設計模型

  順著這個思路,我們再提煉關鍵詞(以我們目前在做的一款大數據產品為例):

3sf20151213

  我們和一線的產品經理一起頭腦風暴,從理性角度(產品定位)及感性角度(大家分別說說產品給他的感覺)提煉了一些關鍵詞,再通過“投石問路”的結果(根據我個人經驗,一線產品經理比較務實;owner及leader的想法比較缥缈)及設計師的大膽創意,想象出如上圖的個性關鍵詞。從圖中可以看出,這裡的個性關鍵詞是非常抽象的,它給人很大的想象空間,並且源於理性和感性詞。現在有沒有感覺產品已經有一些個性出來了呢?

  四、映射個性風格

  有了這些詞,我們就開始找相關的圖片制作情緒板了。和傳統的情緒板(關於情緒板的方法網上有很多文章,這裡就不介紹了)方法不一樣的是,我們並不一定要從情緒板裡提煉出什麼然後嚴格遵守。因為情緒板就是一個工具,是幫助設計師找感覺的,而不是限制住設計師思維的。

  情緒板的作用是幫助設計師把關鍵詞圖形化,同時思考它是否合適?比如玄幻這個詞應該是一種什麼樣的視覺表現?這種視覺表現體現在界面上好處理嗎?太極用作logo的話,能夠有哪些表現形式?一方面要通過情緒板找感覺,一方面在界面上反復嘗試(試稿),然後通過權衡找到合適的風格,這是一個反復迭代的過程。

  五、設計主題設定

  經過多次試稿以及大家的意見,設計師決定通過行雲流水的整體感覺打造既有中國特色,又有B端產品感覺的獨特風格(由於視覺稿還未上線,所以這裡不多說了,僅用於說明方法)。logo融入了太極+水滴+水晶球的元素,界面主題為海洋(數據可比作大海,同時海波也是常見的古代傳統花紋元素),界面元素多考慮曲線以及傳統紋樣,整體強調對比(太極)及留白(中國畫),突出意境……

  設計主題非常的重要,沒有主題的設計會顯得單薄、平淡,缺少靈魂。

  六、設計方案推演

  其實設計師並不是一開始就決定用行雲流水的感覺貫穿界面始終。最開始他想從“陰陽”、“太極”、“海波”等感覺入手(來自個性關鍵詞),但是大家覺得效果並不是很好;後來我們決定更落地一點,找找“中國風”的感覺,在這個過程中通過情緒板了解了很多中國傳統的紋樣,改進後發現風格確實明顯了,但整體比較零散,缺乏主線;大家不斷在界面上找問題,給建議,設計師也做了很多功課,沒事就上網搜各種中國畫找靈感,最終確定了“行雲流水”作為貫穿界面整體風格的主線,界面主題、元素、風格均圍繞這種感覺,最終設計出風格獨樹一幟、個性十足又不失B端產品行業共性的作品。我們與眾不同的品牌基調也就此確定下來。

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

  所以如果你看到某個設計師講述自己的設計推導過程是按照步驟順序完成的,那基本是不可能的。不管是做產品、做交互設計還是視覺設計,都充滿了無數的迭代過程。再優秀的設計師也要通過不斷的修改完善自己的作品。我相信好的設計都是改出來的。

  最終我們的設計稿在挑剔的老板面前一次通過,大家都感到很興奮,貌似這是第一次這麼順利。

  寫在最後

  在互聯網2.0時代,設計師沒有什麼章法,更多的是隨心所欲的做設計,設計好壞靠的是設計師的個人能力。

  在互聯網3.0時代,各種優秀的互聯網產品層出不窮,對設計師的要求也越來越高,優秀的設計師不僅要有基本的審美能力和設計技法,還要懂產品、懂用戶,懂怎麼通過UI設計正確的引導用戶。對於行業巨頭來說,如果只憑設計師的個人能力,整體設計水平將變得極不可控,所以開始重視方法論、重視設計師的推導能力。這樣可以很好的提升設計師的理論能力及產品能力,讓更多設計師認真的思考如何做正確的設計;但同時帶來的反面效果是設計師的創意能力受到限制。最近幾年,國內的設計呈現流水線般的感覺,優質而有創意的設計越來越少見,與之不對稱的是設計師的自我包裝能力越來越強了(否則通過作品沒辦法拉開差距)。

  在逐步發展的“互聯網+”時代,互聯網會滲透到各行各業,這對設計師也會有不一樣的要求。每個行業的情況都完全不同,這要求設計師既要根據行業、產品特點做出正確的設計,又要通過獨特的設計語言賦予產品不一樣的個性。未來注定是一個在設計上百花齊放的時代,隨著設計行業的不斷成熟,同質化的設計會越來越少,在某些獨特的行業,設計師甚至會無競品可借鑒,只能通過扎實的基本功確定設計方向。

  我希望這一天可以盡快到來!

  作者微信公眾號:津樂道,歡迎關注喲!

001gC41ygy6WRkIOLR3851
copyright © 萬盛學電腦網 all rights reserved