設(shè)計(jì)理念如何指導(dǎo)設(shè)計(jì)落地

2018-7-6    ui設(shè)計(jì)分享達(dá)人



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

在做項(xiàng)目改版升級(jí)時(shí),我們需要做兩件大事,一是提煉核心設(shè)計(jì)理念,二是由理念推動(dòng)設(shè)計(jì)執(zhí)行。


如果你想進(jìn)階高級(jí)、專家或者帶團(tuán)隊(duì),這兩件事你必須要透徹的理解,并加以實(shí)踐。


今天,菜心希望用自己的設(shè)計(jì)經(jīng)驗(yàn)幫大家敲開(kāi)一扇進(jìn)階的大門!

敲開(kāi)大門的步驟如下:


1.提取設(shè)計(jì)理念

2.推動(dòng)設(shè)計(jì)落地



1.提取設(shè)計(jì)理念


1.1 設(shè)計(jì)理念是什么?


簡(jiǎn)單來(lái)說(shuō)就是給你的設(shè)計(jì)提煉一個(gè)核心詞語(yǔ),比較高逼格的,讓人一聽(tīng)起來(lái)就“哇,好屌”這樣的感覺(jué),當(dāng)然也不能只是聽(tīng)起來(lái)屌,還必須真實(shí)的依托于你的設(shè)計(jì)方向,如果只是浮于表面,后期是很難落地的。


舉個(gè)例子,是我自己帶隊(duì)經(jīng)歷過(guò)的手機(jī)系統(tǒng)優(yōu)化的項(xiàng)目(經(jīng)過(guò)后期調(diào)整簡(jiǎn)化的),設(shè)計(jì)理念叫做——破界!



后面我們講圍繞“破界”這個(gè)設(shè)計(jì)理念來(lái)展開(kāi)討論。



1.2 設(shè)計(jì)理念如何提?。?/strong>


你的理念需要綜合很多維度的深入研究與挖掘,例如品牌探索、用戶調(diào)研、產(chǎn)品賣點(diǎn)、目標(biāo)人群甚至是競(jìng)品和流行趨勢(shì)。


回到剛才那個(gè)“破界”的設(shè)計(jì)理念,怎么來(lái)的?


它有三個(gè)維度的支撐點(diǎn),產(chǎn)品賣點(diǎn)、目標(biāo)用戶、競(jìng)品與趨勢(shì):



我來(lái)依次解釋一下:


產(chǎn)品賣點(diǎn):

當(dāng)時(shí)全面屏的概念還沒(méi)有現(xiàn)在這么爛大街,所以算是我們的一個(gè)主要賣點(diǎn),而全面屏的無(wú)邊界、大視野就是“破界“理念最大的支撐。


目標(biāo)用戶:

我們的定位人群為個(gè)性、獨(dú)立的年輕人,而年輕人敢于突破界限的精神便是“破界”理念的第二個(gè)支撐點(diǎn)。


競(jìng)品與趨勢(shì):

我們做了很多的競(jìng)品與流行趨勢(shì)的分析,發(fā)現(xiàn)整個(gè)市場(chǎng)和行業(yè)都在一次又一次的完成技術(shù)突破與設(shè)計(jì)創(chuàng)新,而對(duì)于我們這樣一個(gè)具有創(chuàng)新精神的公司,突破原有瓶頸,大膽創(chuàng)新當(dāng)然也是我們應(yīng)該做的,也就是“破界”的第三個(gè)支撐。


我們?cè)谇捌谒龅囊磺兴鸭脱芯科鋵?shí)都是為了提取以及支撐這個(gè)核心理念,這樣后期才會(huì)有明確的設(shè)計(jì)方向!



2.推動(dòng)設(shè)計(jì)落地


有了理念,如何推動(dòng)設(shè)計(jì)落地就是最關(guān)鍵的事情了。


其實(shí)說(shuō)實(shí)話,在你提出這個(gè)理念前,尤其是項(xiàng)目把控者,應(yīng)該已經(jīng)有了大概的延展方向,甚至已經(jīng)想好了一個(gè)明確的設(shè)計(jì)語(yǔ)言(風(fēng)格)。


接下來(lái),我從造型、色彩、布局、三個(gè)層面,來(lái)解密一下“破界”是如何推動(dòng)設(shè)計(jì)落地的。


2.1 造型

在造型層,破界是指打破原有邊界束縛,比如:



這樣的做法首先是符合我們“破界”的設(shè)計(jì)理念,其次是讓結(jié)構(gòu)更加簡(jiǎn)潔清晰,也符合目前的流行趨勢(shì)——簡(jiǎn)約扁平。


具體場(chǎng)景怎么應(yīng)用呢?


例如1.0的時(shí)候,我們的部分桌面圖標(biāo)如下:



在剛剛分析的“破界”理念之下,我們將原有的復(fù)雜造型做減法,破開(kāi)邊界,優(yōu)化結(jié)果如下:



這就是“破界”在造型層面給予的設(shè)計(jì)指導(dǎo)。


2.2 色彩

在色彩層,破界是指打破顏色生硬的拼接,使用透明度漸變和疊加的設(shè)計(jì)技法來(lái)創(chuàng)造新穎的設(shè)計(jì)語(yǔ)言:



如何應(yīng)用?


例如功能圖標(biāo)的設(shè)計(jì):


undefined


再例如聯(lián)系人界面的字母形象:



都采用了這一套設(shè)計(jì)語(yǔ)言。


2.3 布局

在布局層,破界是指突破原有邊界使屏幕更加飽滿通透,這里舉兩個(gè)例子:


一個(gè)是通過(guò)視覺(jué)引導(dǎo)的方法讓界面的邊界看起來(lái)更窄,如何做到呢?


例如在做設(shè)置頁(yè)面的時(shí)候,我們將1.0的頁(yè)面與競(jìng)品進(jìn)行對(duì)比:



可以發(fā)現(xiàn),競(jìng)品的視覺(jué)重心在圖標(biāo)上,因?yàn)閳D標(biāo)比文字要重一些,而我們的視覺(jué)重心在文字上,因?yàn)槲淖直葓D標(biāo)重,這樣的話我們的邊框就會(huì)看起來(lái)很寬,而競(jìng)品的就很窄:



在這樣的背景下,我們需要做的就是加重圖標(biāo)視覺(jué)重量,我的方法就是讓圖標(biāo)由線性變成面性,并且使用“破界”的設(shè)計(jì)語(yǔ)言:


undefined


這樣的話,由于視覺(jué)重心更加靠邊,界面邊界就會(huì)看起來(lái)細(xì)很多,整個(gè)頁(yè)面也就飽滿了:



以上是“破界”在布局層的第一處個(gè)應(yīng)用。


第二處是將1.0分割式布局變成通屏式設(shè)計(jì),破開(kāi)分割界限,使整個(gè)屏幕渾然一起,飽滿通透:



例如在我們的天氣界面:




除了這些,“破界”還可以指導(dǎo)一些細(xì)節(jié)上的設(shè)計(jì),例如去除列表之間的分割線,在當(dāng)時(shí)也比較流行,總之可以找到很多既符合自己理念又符合流行趨勢(shì)的設(shè)計(jì)切入點(diǎn),也只有這樣,我們所產(chǎn)出的設(shè)計(jì)才是有理有據(jù),經(jīng)得住考驗(yàn)的!



總結(jié)


好了,這兩件事情就差不多講完了,在做項(xiàng)目的時(shí)候我們一定要時(shí)刻保持清晰的思路,知道自己在做什么,以及做到了哪里,實(shí)在做不下去就多問(wèn)問(wèn)別人建議和想法,阻力遲早會(huì)過(guò)去,而過(guò)去之后等待的就是你的進(jìn)階與成長(zhǎng)。


我希望大家可以通過(guò)我講的內(nèi)容結(jié)合實(shí)際項(xiàng)目運(yùn)用起來(lái),取其精華去其糟粕,千萬(wàn)不要“看了就過(guò)了”!



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




分享本文至:

日歷

鏈接

個(gè)人資料

存檔