面試時,如何闡釋設計思路?
這幾天有一些同學問我關于面試的問題,其實我對于整個面試的過程還沒怎么總結過,但是對于如何闡述自己的設計思路倒是有一套方法,今天分享給大家。
眾所周知,作為設計師,面試的時候,面試官可能會讓你拿出自己覺得比較滿意的作品來講講設計思路,如果你沒準備好,再加上一緊張,很容易導致思路混亂,最后連自己都不知道在說什么!
怎么解決這個問題呢?
答案其實很簡單:那就是理清思路,做好充足的準備。
如果你暫時還沒有思路,不妨先看看我的。
正好本周在做一款界面的重設計,目前做了兩個頁面及一組圖標,現在就假設面試官讓我說說這兩個頁面,我會怎么闡述呢?
我的闡述思路大綱如下:
- 我對這款產品有一定的了解
- 我是一個對流行趨勢敏感的人
- 我是這樣展現自己設計能力的
- 我對用戶體驗也有一些改進
當然我們需要看著頁面來講解,先來看一下改版前后的界面樣式。
由于信息安全問題,我將底部的信息主架構進行了隱藏和改變,大家主要看整個設計思路的闡述,不要糾結細節。
原版界面:
優化后界面:
下面闡述開始:、
1. 我對產品有一定的了解
在做任何設計之前,你都需要對這個產品有一定的了解,這是一個大前提。
我會告訴面試官,這是一個什么樣子的產品,他的背景是什么,他的調性是什么,品牌理念是什么,最后得出我的總體視覺風格是怎樣的。
比如拿這兩個頁面來說,這是一款針對白領的即時通訊工具,產品定義是“給白領使用的高效便捷的即時通訊工具”。
而作為白領的你,其實你是有一點小追求、小逼格的,所以簡單來說,我們的品牌調性及視覺風格就是簡潔高效、時尚、有逼格。
2. 我是一個對流行趨勢敏感的人
這里開始就要談視覺了,首先你要和面試官強調,你是一個緊跟流行趨勢的設計師,對于IM頁面的改版,你尋找了很多國內外優秀的競品,對它們進行分享與總結,如Facebook的Messenger、國際版QQ、Snapchat等等,截圖如下:
最后經過你的總結,得出對于本次設計有幫助的流行趨勢有:
- 無線化分隔
- 簡化“對話氣泡”樣式
- 聊天界面底部,直接將高頻操作展示出來
- …..
有了這些參考做為基礎,再結合自己產品的品牌調性,你就可以具體去執行了。
3. 我是這樣展現自己設計能力的
這里就是最重要的部分了,除了參考國內外的流行趨勢以外,你是如何展現自己獨特的創意與視覺表現力呢?
大家都知道,界面設計主要包括圖標、配色和排版樣式,你可以從這三個方面來闡述你的視覺表現力。
3.1 圖標
圖標采用了斷點、雙色的視覺風格,雖然圖標風格有所參考,但是對于輸入框部分使用這樣風格的圖標,也算是我的一次大膽嘗試,算是本次設計的一個亮點,如下圖:
至于這套圖標如何制作的,還有它是如何與品牌產生聯系的?如果講起來可能又是2000字。
不過偷偷的告訴你,我管這套圖標的制作方法叫做“品牌基因法”,如果你想知道這套方法就在下方留言吧,人數多的話,下期就分享出來。
3.2 關于配色
頭部導航欄的顏色,原版的深色過于壓抑,不符合整體輕松愉悅的產品定位和視覺風格。所以我決定將深藍色變成白色,使整個頁面看起來更加簡潔、清爽。
繼續看上圖,對話氣泡采用漸變藍色,使顏色更加通透,同時雙方氣泡顏色對比更加強烈,增加視覺上的耐看度,并且使用戶更易區分哪些信息是自己發的,哪些是對方發的。
3.3 排版樣式
在板式上本次重設計我有兩個原則:簡潔與突破。
簡潔體現在“無線化分割”、對話氣泡框去掉小尖角、聊天時隱藏自己的頭像等等。如圖:
突破體現在,“我的”頁面頭像后面那一條斜切線,這種板式,我最早是在雅虎新聞上看到的,當時就感覺十分特別,去年在國內app(例如搜狐視頻)“我的”模塊也見到了這樣的切割方式,所以我也大膽的將其運用到這次設計稿里,還有就是面性的返回箭頭,也算是一個創新點。如圖:
4. 我對用戶體驗也有一些改進
這里是個加分項,作為一名視覺設計師,如果你除了思考視覺上的問題以外,再能想想體驗方面的改進,那就證明你不止是一個“美工”,而是一個有思想的設計師。
在這兩個頁面里,主要對用戶體驗的改進就是“聊天界面底部,將高頻操作提取出來,節省用戶時間,也符合目前業內聊天輸入框的交互流行趨勢。
當然如果你要闡述的頁面很多,你還可以說更多關于體驗的問題。
小結
以上四點就是我目前闡述設計思路的方法。這里值得一提的是,上面所講的內容也只能算是及格,如果你想更高級一點,那就需要把每一個創意點挖掘透徹。比如那個斜切的板式,可能我知道是從雅虎新聞借鑒過來的,但是人家為什么要用這樣的斜切板式呢?他的創意根源在哪里呢?又帶來了什么樣的價值呢?
可能這樣一問,你又蒙了!我個人覺得斜切的創意根源可能是來自雜志排版,但也不確定,大家可以思考一下,我的目的就是告訴你,每做一個東西,多問自己為什么,不斷地細化,直到“問不出為什么”為止,因為那時你已經走到了問題的本質。
好了,以上就是我本次分享的內容了,最后提醒大家,有空多畫畫思維腦圖,理清自己的思路,隨時保持“多問為什么”的心態,堅持久了,你一定會有質的飛越,和菜心一起加油唄!
#專欄作家#
菜心(微信號:18588404451? 微信公眾號:菜心設計鋪),人人都是產品經理專欄作家,華為ITUX用戶體驗設計師(主視覺),3年工作經驗,參與華為Welink、3MS、連長社區等多個項目的用戶體驗設計工作。歡迎大家互相交流關注。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
相當有用,為什么我才看到,每次闡述自己的作品的單個頁面都很快,看了文章受益匪淺,原來可以這么細致的表達讓別人信服,謝謝
思路非常棒想了解你的品牌基因法
思路不錯,設計也不錯。不過圖標看著有點復雜
白領即時高效溝通,這個定位在現實場景中真的存在嗎?
在重新設計前就搞錯了別人的定位,別人的定位是:同事間的高效協作。
關于底部的快捷按鈕可以參照下現在的QQ,同時快捷按鈕缺少了:
語音,文件
這條評論挺有價值的,考慮的很專業。定位確實和原產品有偏差,原產品定位是“一站式辦公協同平臺”,我只做了兩個頁面,所以就臨時改變了框架和定位,一個人考慮難免有不周全的地方,文章開頭也說了,主要看闡述思路,不要糾結細節。
不過還是感謝評論。
請問雙色圖標設計有什么好處呢?
就像半扁平化設計一樣,即扁平(簡潔)但又不失層次。雙色圖標就是在單色的基礎上,增加多一種顏色(中性色),也是在簡潔的基礎上增加少量對比與細節,防止過于單調。當然這些是我的個人理解,我也是參考了一些這種風格的圖標進行繪制的。
去掉自己頭像的做法 屬于視覺設計么?
我個人覺得應該是交互,不過視覺也可以提出方案
受益匪淺 感謝大牛
聊天氣泡的底色之所以很淺應該是考慮到圖片的原因吧,如果傳輸圖片用深色背景不太好吧。
你看下微信
這種很炫酷的設計風格在國內實現起來相當困難,你在現實工作中就知道了,除非你的團隊有相當強大的前端
求大神分享
分享品牌基因法吧
好奇品牌基因法,求分享
下周見