面試時,如何闡釋設計思路?

17 評論 34240 瀏覽 311 收藏 10 分鐘

這幾天有一些同學問我關于面試的問題,其實我對于整個面試的過程還沒怎么總結過,但是對于如何闡述自己的設計思路倒是有一套方法,今天分享給大家。

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

怎么解決這個問題呢?

答案其實很簡單:那就是理清思路,做好充足的準備。

如果你暫時還沒有思路,不妨先看看我的。

正好本周在做一款界面的重設計,目前做了兩個頁面及一組圖標,現在就假設面試官讓我說說這兩個頁面,我會怎么闡述呢?

我的闡述思路大綱如下:

  1. 我對這款產品有一定的了解
  2. 我是一個對流行趨勢敏感的人
  3. 我是這樣展現自己設計能力的
  4. 我對用戶體驗也有一些改進

當然我們需要看著頁面來講解,先來看一下改版前后的界面樣式。

由于信息安全問題,我將底部的信息主架構進行了隱藏和改變,大家主要看整個設計思路的闡述,不要糾結細節。

原版界面:

優化后界面:

下面闡述開始:、

1. 我對產品有一定的了解

在做任何設計之前,你都需要對這個產品有一定的了解,這是一個大前提。

我會告訴面試官,這是一個什么樣子的產品,他的背景是什么,他的調性是什么,品牌理念是什么,最后得出我的總體視覺風格是怎樣的。

比如拿這兩個頁面來說,這是一款針對白領的即時通訊工具,產品定義是“給白領使用的高效便捷的即時通訊工具”。

而作為白領的你,其實你是有一點小追求、小逼格的,所以簡單來說,我們的品牌調性及視覺風格就是簡潔高效、時尚、有逼格。

2. 我是一個對流行趨勢敏感的人

這里開始就要談視覺了,首先你要和面試官強調,你是一個緊跟流行趨勢的設計師,對于IM頁面的改版,你尋找了很多國內外優秀的競品,對它們進行分享與總結,如Facebook的Messenger、國際版QQ、Snapchat等等,截圖如下:

最后經過你的總結,得出對于本次設計有幫助的流行趨勢有:

  1. 無線化分隔
  2. 簡化“對話氣泡”樣式
  3. 聊天界面底部,直接將高頻操作展示出來
  4. …..

有了這些參考做為基礎,再結合自己產品的品牌調性,你就可以具體去執行了。

3. 我是這樣展現自己設計能力的

這里就是最重要的部分了,除了參考國內外的流行趨勢以外,你是如何展現自己獨特的創意與視覺表現力呢?

大家都知道,界面設計主要包括圖標、配色和排版樣式,你可以從這三個方面來闡述你的視覺表現力。

3.1 圖標

圖標采用了斷點、雙色的視覺風格,雖然圖標風格有所參考,但是對于輸入框部分使用這樣風格的圖標,也算是我的一次大膽嘗試,算是本次設計的一個亮點,如下圖:

至于這套圖標如何制作的,還有它是如何與品牌產生聯系的?如果講起來可能又是2000字。

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

3.2 關于配色

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

繼續看上圖,對話氣泡采用漸變藍色,使顏色更加通透,同時雙方氣泡顏色對比更加強烈,增加視覺上的耐看度,并且使用戶更易區分哪些信息是自己發的,哪些是對方發的。

3.3 排版樣式

在板式上本次重設計我有兩個原則:簡潔與突破。

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

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

4. 我對用戶體驗也有一些改進

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

在這兩個頁面里,主要對用戶體驗的改進就是“聊天界面底部,將高頻操作提取出來,節省用戶時間,也符合目前業內聊天輸入框的交互流行趨勢。

當然如果你要闡述的頁面很多,你還可以說更多關于體驗的問題。

小結

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

可能這樣一問,你又蒙了!我個人覺得斜切的創意根源可能是來自雜志排版,但也不確定,大家可以思考一下,我的目的就是告訴你,每做一個東西,多問自己為什么,不斷地細化,直到“問不出為什么”為止,因為那時你已經走到了問題的本質。

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

#專欄作家#

菜心(微信號:18588404451? 微信公眾號:菜心設計鋪),人人都是產品經理專欄作家,華為ITUX用戶體驗設計師(主視覺),3年工作經驗,參與華為Welink、3MS、連長社區等多個項目的用戶體驗設計工作。歡迎大家互相交流關注。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 相當有用,為什么我才看到,每次闡述自己的作品的單個頁面都很快,看了文章受益匪淺,原來可以這么細致的表達讓別人信服,謝謝

    回復
  2. 思路非常棒想了解你的品牌基因法

    來自湖北 回復
  3. 思路不錯,設計也不錯。不過圖標看著有點復雜

    來自廣東 回復
  4. 白領即時高效溝通,這個定位在現實場景中真的存在嗎?

    在重新設計前就搞錯了別人的定位,別人的定位是:同事間的高效協作。

    關于底部的快捷按鈕可以參照下現在的QQ,同時快捷按鈕缺少了:
    語音,文件

    回復
    1. 這條評論挺有價值的,考慮的很專業。定位確實和原產品有偏差,原產品定位是“一站式辦公協同平臺”,我只做了兩個頁面,所以就臨時改變了框架和定位,一個人考慮難免有不周全的地方,文章開頭也說了,主要看闡述思路,不要糾結細節。
      不過還是感謝評論。

      來自廣東 回復
  5. 請問雙色圖標設計有什么好處呢?

    來自廣東 回復
    1. 就像半扁平化設計一樣,即扁平(簡潔)但又不失層次。雙色圖標就是在單色的基礎上,增加多一種顏色(中性色),也是在簡潔的基礎上增加少量對比與細節,防止過于單調。當然這些是我的個人理解,我也是參考了一些這種風格的圖標進行繪制的。

      來自廣東 回復
  6. 去掉自己頭像的做法 屬于視覺設計么?

    來自廣東 回復
    1. 我個人覺得應該是交互,不過視覺也可以提出方案

      回復
  7. 受益匪淺 感謝大牛

    回復
  8. 聊天氣泡的底色之所以很淺應該是考慮到圖片的原因吧,如果傳輸圖片用深色背景不太好吧。

    來自上海 回復
    1. 你看下微信

      回復
  9. 這種很炫酷的設計風格在國內實現起來相當困難,你在現實工作中就知道了,除非你的團隊有相當強大的前端

    來自浙江 回復
  10. 求大神分享

    來自中國 回復
  11. 分享品牌基因法吧

    回復
  12. 好奇品牌基因法,求分享

    回復
    1. 下周見

      來自廣東 回復