2017-3-14 周周
設(shè)計(jì)風(fēng)格是一種很虛的東西,對(duì)于大部分的 UI 設(shè)計(jì)師來(lái)說(shuō),都是如此。
相信很多人都是在一家小型的互聯(lián)網(wǎng)公司做設(shè)計(jì),估計(jì)還是公司唯一的設(shè)計(jì)師,同時(shí)對(duì)設(shè)計(jì)風(fēng)格又拿捏不定,總感覺(jué)是跟著產(chǎn)品經(jīng)理或老板的思路去做設(shè)計(jì)。比如老板的要求是“大氣”,誰(shuí) TM 知道這“大氣”指的什么鬼?
即使花了不少時(shí)間去研究其他公司的產(chǎn)品,依然做不出領(lǐng)導(dǎo)滿意的視覺(jué)稿,最后還被各個(gè)崗位的同事指點(diǎn)著去修改你一把屎一把尿喂大的稿子。
我上面也說(shuō)了,其實(shí)這種事情(講述設(shè)計(jì)風(fēng)格)對(duì)于視覺(jué)設(shè)計(jì)師而言是一種很常見(jiàn)的現(xiàn)象。我身邊也同樣有很多設(shè)計(jì)師出現(xiàn)這個(gè)問(wèn)題,不知道如何向領(lǐng)導(dǎo)或客戶講述自己的設(shè)計(jì)風(fēng)格。
說(shuō)個(gè)現(xiàn)象,仔細(xì)想想自己是不是這樣的:我們?cè)谧鲆曈X(jué)評(píng)審的時(shí)候,設(shè)計(jì)師講述的常常是文字對(duì)齊、線條、高斯模糊、圖片大小等視覺(jué)表現(xiàn),有時(shí)候甚至沉醉于 icon 的角度及尺寸的問(wèn)題。面對(duì)于產(chǎn)品經(jīng)理與程序員的質(zhì)疑只能說(shuō):我覺(jué)得這樣更好看、這樣比較適合我們產(chǎn)品的風(fēng)格…之類的話。要知道,這些理由在如今這個(gè)以顯性數(shù)字指標(biāo)為衡量標(biāo)準(zhǔn)的互聯(lián)網(wǎng)時(shí)代已顯得蒼白無(wú)力。
實(shí)話實(shí)話,想要把設(shè)計(jì)風(fēng)格講清楚,的確不是一件容易的事。但絕對(duì)要避免從感性的角度來(lái)闡述事實(shí)的這種習(xí)慣,畢竟現(xiàn)在的移動(dòng)產(chǎn)品從視覺(jué)表現(xiàn)力方面正在逐步降低要求,這種環(huán)境的變化也是要求視覺(jué)設(shè)計(jì)師應(yīng)該主動(dòng)去加強(qiáng)設(shè)計(jì)思路的原因。
為什么要用這個(gè)顏色,為什么要用線條、模糊、留白、卡片、陰影…說(shuō)這么多干嘛?別人能懂?即使聽(tīng)懂了,他也會(huì)從他的角度來(lái)告訴你:那我覺(jué)得這個(gè)陰影不要會(huì)更好。你怎么回復(fù)?
就像我說(shuō)的,如果你針對(duì)你設(shè)計(jì)的視覺(jué)稿進(jìn)行這種細(xì)致問(wèn)題的解答,那么永遠(yuǎn)都不會(huì)有規(guī)范型的答案。視覺(jué)風(fēng)格講的是一個(gè)整體感受,這就需要我們從更高一個(gè)層面來(lái)解釋這個(gè)問(wèn)題。
接下來(lái)我將從以下 5 個(gè)維度來(lái)說(shuō)說(shuō)視覺(jué)設(shè)計(jì)師講述設(shè)計(jì)風(fēng)格的方法:
從全局色系的角度出發(fā)。如果你仔細(xì)分析過(guò)那些優(yōu)秀的 App,你會(huì)發(fā)現(xiàn)它們的顏色使用的是非常謹(jǐn)慎的。當(dāng)中絕大部分都只會(huì)用 3 到 4 個(gè)顏色用于突出信息的層次。就好比我之前寫(xiě)的那篇配色文章《零基礎(chǔ)小白利用谷歌這個(gè)神器,也能成為配色達(dá)人!》一樣,由主色、強(qiáng)調(diào)色、輔助色組成的整體色系,即一個(gè)產(chǎn)品的色彩風(fēng)格。
這里需要注意的是,我們?cè)陉U述頁(yè)面色彩的時(shí)候,不應(yīng)該說(shuō):我認(rèn)為紅色比黃色更適合。而是結(jié)合這幾種顏色組成的全局色系來(lái)說(shuō)明這幾個(gè)顏色的搭配能突出需求方想要的“時(shí)尚”或“大氣”的要求。
這么做的好處是,需求方會(huì)認(rèn)為你的說(shuō)明非常的專業(yè),不會(huì)隨意修改你的 Idea 。更重要的是,你可以掌握主動(dòng)權(quán),而不是以“我認(rèn)為”的方式作為被動(dòng)方。
說(shuō)到圖標(biāo),相信很多設(shè)計(jì)師都是去 Iconfont 等網(wǎng)站下載,籌齊一套直接使用。我之前也說(shuō)過(guò),系統(tǒng)圖標(biāo)的設(shè)計(jì)是考驗(yàn)一個(gè)設(shè)計(jì)師功底的重要條件,所以自己設(shè)計(jì)圖標(biāo)非常重要。
一款 App 需要一套易于識(shí)別的 Icon 來(lái)輔助信息展示,因此圖標(biāo)的風(fēng)格能夠突顯出這款產(chǎn)品的整體風(fēng)格。那么在講述的過(guò)程中,你需要說(shuō)明的是為什么你會(huì)使用這套線性 Icon 或填色 Icon,以及它所能展示的信息為何能夠更符合你產(chǎn)品的風(fēng)格。
而不是糾結(jié)這個(gè)圖標(biāo)的尺寸是多大,或者適不適合它所表達(dá)的意思,因?yàn)檫@些東西是在你講述設(shè)計(jì)風(fēng)格之前就應(yīng)該定好的,它們由設(shè)計(jì)師來(lái)做決策,并不是在講述設(shè)計(jì)風(fēng)格的時(shí)候再去說(shuō)明的(假如你在面試的時(shí)候如果說(shuō)這些,面試官會(huì)覺(jué)得你的設(shè)計(jì)認(rèn)知非常的基礎(chǔ))。
字體是 App 界面中最重要的信息組成部分,相信這句話大部分都會(huì)認(rèn)同,這也是大家一直爭(zhēng)論為什么英文字體的排版比中文字體排版更好看的原因之一。
我們經(jīng)常聽(tīng)到如:這個(gè)產(chǎn)品看上去很簡(jiǎn)潔、舒服、重點(diǎn)突出,而這其中最主要的原因就是文字的排版。
一般來(lái)說(shuō),我們會(huì)從產(chǎn)品的字體、字號(hào)、顏色等來(lái)說(shuō)明字體規(guī)范,再重點(diǎn)去關(guān)注標(biāo)題、文本信息以及引導(dǎo)信息的字體字號(hào),通過(guò)設(shè)計(jì)對(duì)信息進(jìn)行層次的區(qū)分,希望借此來(lái)引導(dǎo)用戶的視覺(jué)焦點(diǎn)。
所以在說(shuō)明設(shè)計(jì)風(fēng)格時(shí),要著重去提字體規(guī)范這塊。
圖片是 App 信息組成的重要元素,它的風(fēng)格會(huì)很大程度上影響整體風(fēng)格。所以每次有人給我發(fā)設(shè)計(jì)稿,叫我給點(diǎn)建議的時(shí)候,我都會(huì)說(shuō),先把重復(fù)的圖片和文字修改了。一張?jiān)O(shè)計(jì)稿,不要用同一張圖片填充所有位置(同樣不要用一句話填充所有文本段落)。
假如你在做日系風(fēng)的外賣產(chǎn)品,你的圖片風(fēng)格就要統(tǒng)一,不要用百度上隨便找的快餐圖來(lái)作為視覺(jué)稿的展示。很多人以為這個(gè)不重要,認(rèn)為這是后期開(kāi)發(fā)再確定的事情,現(xiàn)在就是隨便找張圖去填充下。要知道,一張視覺(jué)稿能不能通過(guò)領(lǐng)導(dǎo)的審核,這些細(xì)節(jié)都很重要(即使對(duì)自己來(lái)說(shuō),也應(yīng)該提升自身要求去作圖)。
所以在講述設(shè)計(jì)風(fēng)格的時(shí)候,圖片是起到至關(guān)重要的作用的。也許你想表達(dá)日系優(yōu)雅風(fēng),結(jié)果在別人看來(lái)你所展示的卻是阿富汗田園風(fēng)。
我們期望的用戶操作,最終目標(biāo)是將其引導(dǎo)至我們想讓他去的地方。對(duì)于電商類產(chǎn)品來(lái)說(shuō),這個(gè)目標(biāo)也許是下單付款;對(duì)于社交類產(chǎn)品來(lái)說(shuō),這個(gè)目標(biāo)也許是發(fā)送信息等等。
一款產(chǎn)品,每個(gè)頁(yè)面都會(huì)有許多個(gè)行動(dòng)點(diǎn),設(shè)計(jì)師要做的,是將其進(jìn)行層級(jí)的區(qū)分,即有主次感。好比廣告,這些金主巴不得整個(gè)頁(yè)面填滿他們的廣告,但是大家都知道這不可能,所以每個(gè)頁(yè)面都需要進(jìn)行合理的引導(dǎo)設(shè)計(jì)。
也許你覺(jué)得,視覺(jué)操作引導(dǎo)跟設(shè)計(jì)風(fēng)格沒(méi)什么關(guān)系,那你就錯(cuò)了。操作引導(dǎo)很大程度上會(huì)影響視覺(jué)風(fēng)格的走向,如果我們要引導(dǎo)用戶去執(zhí)行某個(gè)操作,那么以上說(shuō)到的所有元素所組成的框架,都需要重新修改。
所以你知道有多重要了么?當(dāng)你描述完所有元素之后,最后說(shuō)到視覺(jué)操作引導(dǎo),那它們自然而然的就形成了這么一個(gè)頁(yè)面,不需要過(guò)多的花哨說(shuō)法,只要你前面說(shuō)的四個(gè)維度順暢且合理,那最后這個(gè)框架在需求方看來(lái)是無(wú)懈可擊的,更不會(huì)輕易的讓你修改當(dāng)中的元素。
雖然我只做了五個(gè)維度的說(shuō)明,但相信大家已經(jīng)知道如何去講述設(shè)計(jì)風(fēng)格的方法論。當(dāng)然也不僅僅是從這五個(gè)維度出發(fā)去說(shuō)明,要講述的維度其實(shí)還有很多,這就需要大家自己去研究了。
通過(guò)這一系列的梳理,我們知道如何找到影響設(shè)計(jì)風(fēng)格的關(guān)鍵因素。剩下的就是由你來(lái)告訴需求方,這些點(diǎn)形成了我們的設(shè)計(jì)風(fēng)格。至于怎么說(shuō),上面寫(xiě)的很清楚了,好好思考下。
找準(zhǔn)方向與維度,從大方向去講解你的設(shè)計(jì)風(fēng)格,只要你執(zhí)行了,那它就不是什么困難的事情了。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com