用正確姿勢闡述你的設計風格
設計風格是一種很虛的東西,對於大部分的 UI 設計師來說,都是如此。
相信很多人都是在一家小型的互聯網公司做設計,估計還是公司唯一的設計師,同時對設計風格又拿捏不定,總感覺是跟著產品經理或老闆的思路去做設計。比如老闆的要求是「大氣」,誰 TM 知道這「大氣」指的什麼鬼?
即使花了不少時間去研究其他公司的產品,依然做不出領導滿意的視覺稿,最後還被各個崗位的同事指點著去修改你一把屎一把尿喂大的稿子。
我上面也說了,其實這種事情(講述設計風格)對於視覺設計師而言是一種很常見的現象。我身邊也同樣有很多設計師出現這個問題,不知道如何向領導或客戶講述自己的設計風格。
說個現象,仔細想想自己是不是這樣的:我們在做視覺評審的時候,設計師講述的常常是文字對齊、線條、高斯模糊、圖片大小等視覺表現,有時候甚至沉醉於 icon 的角度及尺寸的問題。面對於產品經理與程序員的質疑只能說:我覺得這樣更好看、這樣比較適合我們產品的風格…之類的話。要知道,這些理由在如今這個以顯性數字指標為衡量標準的互聯網時代已顯得蒼白無力。
實話實話,想要把設計風格講清楚,的確不是一件容易的事。但絕對要避免從感性的角度來闡述事實的這種習慣,畢竟現在的移動產品從視覺表現力方面正在逐步降低要求,這種環境的變化也是要求視覺設計師應該主動去加強設計思路的原因。
為什麼要用這個顏色,為什麼要用線條、模糊、留白、卡片、陰影…說這麼多幹嘛?別人能懂?即使聽懂了,他也會從他的角度來告訴你:那我覺得這個陰影不要會更好。你怎麼回復?
就像我說的,如果你針對你設計的視覺稿進行這種細緻問題的解答,那麼永遠都不會有規範型的答案。視覺風格講的是一個整體感受,這就需要我們從更高一個層面來解釋這個問題。
接下來我將從以下 5 個維度來說說視覺設計師講述設計風格的方法:
- 產品全局色系
- 系統圖標
- 字體規範
- 圖片的使用
- 視覺操作引導
1.產品全局色系
從全局色系的角度出發。如果你仔細分析過那些優秀的 App,你會發現它們的顏色使用的是非常謹慎的。當中絕大部分都只會用 3 到 4 個顏色用於突出信息的層次。就好比我之前寫的那篇配色文章《用好 MD 你也可以做配色達人》一樣,由主色、強調色、輔助色組成的整體色系,即一個產品的色彩風格。
這裡需要注意的是,我們在闡述頁面色彩的時候,不應該說:我認為紅色比黃色更適合。而是結合這幾種顏色組成的全局色系來說明這幾個顏色的搭配能突出需求方想要的「時尚」或「大氣」的要求。
這麼做的好處是,需求方會認為你的說明非常的專業,不會隨意修改你的 Idea 。更重要的是,你可以掌握主動權,而不是以「我認為」的方式作為被動方。
2.系統圖標
說到圖標,相信很多設計師都是去 Iconfont 等網站下載,籌齊一套直接使用。我之前也說過,系統圖標的設計是考驗一個設計師功底的重要條件,所以自己設計圖標非常重要。具體可以參照我寫的《圖標設計的三個要素》這篇文章來做。
一款 App 需要一套易於識別的 Icon 來輔助信息展示,因此圖標的風格能夠突顯出這款產品的整體風格。那麼在講述的過程中,你需要說明的是為什麼你會使用這套線性 Icon 或填色 Icon,以及它所能展示的信息為何能夠更符合你產品的風格。
而不是糾結這個圖標的尺寸是多大,或者適不適合它所表達的意思,因為這些東西是在你講述設計風格之前就應該定好的,它們由設計師來做決策,並不是在講述設計風格的時候再去說明的(假如你在面試的時候如果說這些,面試官會覺得你的設計認知非常的基礎)。
3.字體規範
字體是 App 界面中最重要的信息組成部分,相信這句話大部分都會認同,這也是大家一直爭論為什麼英文字體的排版比中文字體排版更好看的原因之一。
我們經常聽到如:這個產品看上去很簡潔、舒服、重點突出,而這其中最主要的原因就是文字的排版。
一般來說,我們會從產品的字體、字型大小、顏色等來說明字體規範,再重點去關註標題、文本信息以及引導信息的字體字型大小,通過設計對信息進行層次的區分,希望藉此來引導用戶的視覺焦點。
所以在說明設計風格時,要著重去提字體規範這塊。
4.圖片的使用
圖片是 App 信息組成的重要元素,它的風格會很大程度上影響整體風格。所以每次有人給我發設計稿,叫我給點建議的時候,我都會說,先把重複的圖片和文字修改了。一張設計稿,不要用同一張圖片填充所有位置(同樣不要用一句話填充所有文本段落)。
假如你在做日系風的外賣產品,你的圖片風格就要統一,不要用百度上隨便找的快餐圖來作為視覺稿的展示。很多人以為這個不重要,認為這是後期開發再確定的事情,現在就是隨便找張圖去填充下。要知道,一張視覺稿能不能通過領導的審核,這些細節都很重要(即使對自己來說,也應該提升自身要求去作圖)。所以在講述設計風格的時候,圖片是起到至關重要的作用的。也許你想表達日系優雅風,結果在別人看來你所展示的卻是阿富汗田園風。
5.視覺操作引導
我們期望的用戶操作,最終目標是將其引導至我們想讓他去的地方。對於電商類產品來說,這個目標也許是下單付款;對於社交類產品來說,這個目標也許是發送信息等等。
一款產品,每個頁面都會有許多個行動點,設計師要做的,是將其進行層級的區分,即有主次感。好比廣告,這些金主巴不得整個頁面填滿他們的廣告,但是大家都知道這不可能,所以每個頁面都需要進行合理的引導設計。
也許你覺得,視覺操作引導跟設計風格沒什麼關係,那你就錯了。操作引導很大程度上會影響視覺風格的走向,如果我們要引導用戶去執行某個操作,那麼以上說到的所有元素所組成的框架,都需要重新修改。
所以你知道有多重要了么?當你描述完所有元素之後,最後說到視覺操作引導,那它們自然而然的就形成了這麼一個頁面,不需要過多的花哨說法,只要你前面說的四個維度順暢且合理,那最後這個框架在需求方看來是無懈可擊的,更不會輕易的讓你修改當中的元素。
小結
雖然我只做了五個維度的說明,但相信大家已經知道如何去講述設計風格的方法論。當然也不僅僅是從這五個維度出發去說明,要講述的維度其實還有很多,這就需要大家自己去研究了。
通過這一系列的梳理,我們知道如何找到影響設計風格的關鍵因素。剩下的就是由你來告訴需求方,這些點形成了我們的設計風格。至於怎麼說,上面寫的很清楚了,好好思考下。
找准方向與維度,從大方向去講解你的設計風格,只要你執行了,那它就不是什麼困難的事情了。
END.
推薦閱讀:
※如果,靈感有個投食機...
※沒有美術基礎,怎樣才能成為一枚UI?需要學習哪些技巧?
※零基礎轉行UI設計需要怎麼做?從何入門?
※動效乾貨——交互動效在開發落地中是怎麼實現的?(插值器及動效標註)
※PART Vision|2017視覺設計趨勢(下)——平面設計&交互設計