面試時(shí),如何闡釋設(shè)計(jì)思路?

這幾天有一些同學(xué)問我關(guān)于面試的問題,其實(shí)我對(duì)于整個(gè)面試的過程還沒怎么總結(jié)過,但是對(duì)于如何闡述自己的設(shè)計(jì)思路倒是有一套方法,今天分享給大家。

眾所周知,作為設(shè)計(jì)師,面試的時(shí)候,面試官可能會(huì)讓你拿出自己覺得比較滿意的作品來講講設(shè)計(jì)思路,如果你沒準(zhǔn)備好,再加上一緊張,很容易導(dǎo)致思路混亂,最后連自己都不知道在說什么!

怎么解決這個(gè)問題呢?

答案其實(shí)很簡單:那就是理清思路,做好充足的準(zhǔn)備。如果你暫時(shí)還沒有思路,不妨先看看我的。

正好本周在做一款界面的重設(shè)計(jì),目前做了兩個(gè)頁面及一組圖標(biāo),現(xiàn)在就假設(shè)面試官讓我說說這兩個(gè)頁面,我會(huì)怎么闡述呢?

我的闡述思路大綱如下:

1.我對(duì)這款產(chǎn)品有一定的了解

2.我是一個(gè)對(duì)流行趨勢敏感的人

3.我是這樣展現(xiàn)自己設(shè)計(jì)能力的

4.我對(duì)用戶體驗(yàn)也有一些改進(jìn)

當(dāng)然我們需要看著頁面來講解,先來看一下改版前后的界面樣式。(由于信息安全問題,我將底部的信息主架構(gòu)進(jìn)行了隱藏和改變,大家主要看整個(gè)設(shè)計(jì)思路的闡述,不要糾結(jié)細(xì)節(jié))

原版界面:


優(yōu)化后界面:


下面闡述開始:

1.我對(duì)產(chǎn)品有一定的了解

在做任何設(shè)計(jì)之前,你都需要對(duì)這個(gè)產(chǎn)品有一定的了解,這是一個(gè)大前提。

我會(huì)告訴面試官,這是一個(gè)什么樣子的產(chǎn)品,他的背景是什么,他的調(diào)性是什么,品牌理念是什么,最后得出我的總體視覺風(fēng)格是怎樣的。

比如拿這兩個(gè)頁面來說,這是一款針對(duì)白領(lǐng)的即時(shí)通訊工具,產(chǎn)品定義是“給白領(lǐng)使用的高效便捷的即時(shí)通訊工具”。

而作為白領(lǐng)的你,其實(shí)你是有一點(diǎn)小追求、小逼格的,所以簡單來說,我們的品牌調(diào)性及視覺風(fēng)格就是簡潔高效、時(shí)尚、有逼格。


2.我是一個(gè)對(duì)流行趨勢敏感的人

這里開始就要談視覺了,首先你要和面試官強(qiáng)調(diào),你是一個(gè)緊跟流行趨勢的設(shè)計(jì)師,對(duì)于IM頁面的改版,你尋找了很多國內(nèi)外優(yōu)秀的競品,對(duì)它們進(jìn)行分享與總結(jié),如Facebook的Messenger、國際版QQ、Snapchat等等,截圖如下:


最后經(jīng)過你的總結(jié),得出對(duì)于本次設(shè)計(jì)有幫助的流行趨勢有:

<1>.無線化分隔

<2>.簡化“對(duì)話氣泡”樣式

<3>.聊天界面底部,直接將高頻操作展示出來

.....

有了這些參考做為基礎(chǔ),再結(jié)合自己產(chǎn)品的品牌調(diào)性,你就可以具體去執(zhí)行了。


3.我是這樣展現(xiàn)自己設(shè)計(jì)能力的

這里就是最重要的部分了,除了參考國內(nèi)外的流行趨勢以外,你是如何展現(xiàn)自己獨(dú)特的創(chuàng)意與視覺表現(xiàn)力呢?

大家都知道,界面設(shè)計(jì)主要包括圖標(biāo)、配色和排版樣式,你可以從這三個(gè)方面來闡述你的視覺表現(xiàn)力。

3.1.圖標(biāo):

圖標(biāo)采用了斷點(diǎn)、雙色的視覺風(fēng)格,雖然圖標(biāo)風(fēng)格有所參考,但是對(duì)于輸入框部分使用這樣風(fēng)格的圖標(biāo),也算是我的一次大膽嘗試,算是本次設(shè)計(jì)的一個(gè)亮點(diǎn),如下圖:

至于這套圖標(biāo)如何制作的,還有它是如何與品牌產(chǎn)生聯(lián)系的?如果講起來可能又是2000字。

不過偷偷的告訴你,我管這套圖標(biāo)的制作方法叫做“品牌基因法”,如果你想知道這套方法就在下方留言吧,人數(shù)多的話,下期就分享出來。

3.2.關(guān)于配色

頭部導(dǎo)航欄的顏色,原版的深色過于壓抑,不符合整體輕松愉悅的產(chǎn)品定位和視覺風(fēng)格。所以我決定將深藍(lán)色變成白色,使整個(gè)頁面看起來更加簡潔、清爽。

繼續(xù)看上圖,對(duì)話氣泡采用漸變藍(lán)色,使顏色更加通透,同時(shí)雙方氣泡顏色對(duì)比更加強(qiáng)烈,增加視覺上的耐看度,并且使用戶更易區(qū)分哪些信息是自己發(fā)的,哪些是對(duì)方發(fā)的。

3.3.排版樣式

在板式上本次重設(shè)計(jì)我有兩個(gè)原則:簡潔與突破。

簡潔體現(xiàn)在“無線化分割”、對(duì)話氣泡框去掉小尖角、聊天時(shí)隱藏自己的頭像等等。如圖:

無線化分隔


簡化氣泡框

突破體現(xiàn)在,“我的”頁面頭像后面那一條斜切線,這種板式,我最早是在雅虎新聞上看到的,當(dāng)時(shí)就感覺十分特別,去年在國內(nèi)app(例如搜狐視頻)“我的”模塊也見到了這樣的切割方式,所以我也大膽的將其運(yùn)用到這次設(shè)計(jì)稿里,還有就是面性的返回箭頭,也算是一個(gè)創(chuàng)新點(diǎn)。如圖:



4.我對(duì)用戶體驗(yàn)也有一些改進(jìn)

這里是個(gè)加分項(xiàng),作為一名視覺設(shè)計(jì)師,如果你除了思考視覺上的問題以外,再能想想體驗(yàn)方面的改進(jìn),那就證明你不止是一個(gè)“美工”,而是一個(gè)有思想的設(shè)計(jì)師。

在這兩個(gè)頁面里,主要對(duì)用戶體驗(yàn)的改進(jìn)就是“聊天界面底部,將高頻操作提取出來,節(jié)省用戶時(shí)間,也符合目前業(yè)內(nèi)聊天輸入框的交互流行趨勢。

當(dāng)然如果你要闡述的頁面很多,你還可以說更多關(guān)于體驗(yàn)的問題。


以上四點(diǎn)就是我目前闡述設(shè)計(jì)思路的方法。這里值得一提的是,上面所講的內(nèi)容也只能算是及格,如果你想更高級(jí)一點(diǎn),那就需要把每一個(gè)創(chuàng)意點(diǎn)挖掘透徹。比如那個(gè)斜切的板式,可能我知道是從雅虎新聞借鑒過來的,但是人家為什么要用這樣的斜切板式呢?他的創(chuàng)意根源在哪里呢?又帶來了什么樣的價(jià)值呢?

可能這樣一問,你又蒙了!我個(gè)人覺得斜切的創(chuàng)意根源可能是來自雜志排版,但也不確定,大家可以思考一下,我的目的就是告訴你,每做一個(gè)東西,多問自己為什么,不斷地細(xì)化,直到“問不出為什么”為止,因?yàn)槟菚r(shí)你已經(jīng)走到了問題的本質(zhì)。

好了,以上就是我本次分享的內(nèi)容了,最后提醒大家,有空多畫畫思維腦圖,理清自己的思路,隨時(shí)保持“多問為什么”的心態(tài),堅(jiān)持久了,你一定會(huì)有質(zhì)的飛越,和菜心一起加油唄!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容