牆外乾貨:如何讓你的視覺設計能力更上一層樓?

發表於2016-08-20

如何讓你的視覺設計能力更上一層樓?有許多人問過我這個問題。我作為舊金山藝術大學的導師,在產品設計方面指導過許多學生,我參與過美國平面設計協會的作品集評審,在Facebook接待實習生等等。

從學生的視角到專業的視角之間有一道鴻溝需要跨越。對於大多數人而言,這個過程夾雜著興奮,好奇與恐懼,伴隨著一系列問題。

“當我畢業了之後會怎樣?”

“社會上的設計工作是怎樣的?”

“我適合做什麼麼?”

“如果我找不到工作怎麼辦?”

“我要做些什麼才能夠準備好?”

我們最近和一位來自Cornell的學生Jon Lee主辦了一次對於Facebook的批評建議活動。在我和他短暫的交流中,Jon的自我意識讓我十分欣賞。他非常清楚他自己在視覺設計方面有進步的空間。他從他未來的僱主處獲得反饋,並且酒和其他即將踏入職場的學生一樣,他很好奇想要成為一名設計師,他的個人技能需要做好怎樣的準備。他想要知道怎樣才能做得更好。

一名可靠的產品設計師需要掌握許多技能,其中視覺設計能力尤為重要,在Facebook更是如此。我很高興Jon對這此很感興趣,如果有機會,我會問他一些我同樣問過其他學生的問題,並給他一些框架性建議,希望對他有所幫助。

我們先來看Jon分享的一些設計,需要注意的是,他還是個初學者。

20160820001

一個周邊環境的App概念設計by Jon Lee

在Facebook,我們通常稱視覺設計為手藝與執行。為了評估Jon作品的水平,並且鼓勵他朝著大師繼續前行,我需要提出一些問題。提問應該在評價之前,這樣可以更好地理解設計者的意圖。

第一步:不斷向自己提問

你的資訊結構是怎樣的?

你檢查過字型樣式嗎?我在作品中看到兩種樣式,標題樣式和大寫樣式,至少三種不同的字號,兩種顏色型別,居中對齊和左對齊也同時出現。

哪種樣式屬於頂部?哪種屬於按鈕?正文部分使用什麼樣式?資料部分使用什麼樣式?

你在使用什麼樣式?

我看到有兩種大小的按鈕樣式,兩種高亮的樣式,兩種邊框,三種顏色,除了帶文字的按鈕,還有使用圖示的按鈕。

20160820002

列表有兩種不同的樣式。其一使用了圖片,商店名稱,商店分類和星級,另一種看起來像線框圖。

按鈕和列表的區別是什麼?在個人資料頁面,卡片,按鈕和列表用了相同的白色背景和灰色輪廓。他們是否應該有所區別?

與現有的模式相比較怎麼樣?

如果選擇是切換式的,他們可以預設選擇嗎?取消和應用是真的有必要的嗎?

返回和取消是否相同?右上角一個“X”是否能夠滿足需要?

我看到有一個重新設定按鈕沒有任何篩選,在這種狀態下是必要的嗎?是否可以用“應用”取代“重設”?

底部選單欄應該在這種情況下繼續保留在底部嗎?

其他同型別的產品有平行結構嗎?是否有用?

20160820003

你的留白和填充規則是什麼?

在“附近”和“個人資訊”頁留白非常少,而在篩選頁留白卻很多。

底部導航欄“Nearby”的“y”幾乎碰到了螢幕的邊緣。

你的柵格是怎樣的?

你的圖示清晰嗎?

有一個單個座位的圖示,一個三連座位的圖示和一個六連座位的圖示。這個是座位的具體數量,還是一個模糊值或者範圍?有沒有更好的表達方法?是想要表達“適合多人聚會”的意思嗎?有沒有更好的表達方式?

為什麼在是否有插座那一欄“不重要”的按鈕沒有同樣使用圖示?如果某件事不重要的話,為什麼需要指出他不重要呢?為什麼一開始沒有預設選擇的專案呢?

派的圖示的意思是…派?還是甜點,或者食物?杯子的意思是飲料嗎?是不是可以理解成每個吃東西的地方都提供飲料?有沒有更好的組合方式?

你的設計具有持續性嗎?

篩選頁裡,距離一欄使用的是下拉選擇,而其他選項用的是按鈕。

有些按鈕包含圖示,有的沒有。

一個按鈕具有透視,其他的沒有。Wi-Fi的圖示使用了最粗的線條,插座用了最細的。有一些圖示是畫素化的,另一些不是。一些是黑色的,另一些是灰色的。

20160820004

大部分卡片使用了相同的樣式:相同的圓角、輪廓、顏色和型別。這些是不是太過於一致了?

螢幕上的一些都是必須在那裡的嗎?

在搜尋欄上方有一條分隔線,篩選頁每個可選項的標題和按鈕之間都有分隔線。

有一處地方使用了綠色。

導航欄同時使用了文字和圖示。兩者都是必須的嗎?

你如何定義你使用的顏色?

你選擇的顏色不是很出挑,色調是暖的,除了一個亮綠色的按鈕。你是否有如何使用這些顏色的規則?

20160820005

你的拼寫,語法和標點符號是否正確?時候考慮過正確的文字策略?

我明白底部選單上“附近(Nearby)”和“個人資料(Profile)”的意思,但是“增加(Add)”是什麼意思?增加什麼?

“Availability”拼寫錯誤。

“Availability”一詞是必須的嗎?

頁面的閱讀流程是怎樣的?(是通過文字還是圖片?)頁面的標題是篩選(Fliter),你選項的標題是:距離(Distance),座位是否可用(SeatingAvailability),Wi-Fi是否可用(Wifi Availability),是否可以外帶(Outlet Availability),是否提供食物/飲料(food/BeverageAvailability)。你會怎麼向朋友描述這一頁可以用來做什麼?這些選項的層次結構正確嗎?他們的名字都正確嗎?

20160820006

如何把它遷移到另一個平臺?

如果你為安卓裝置或者桌面進行設計,你會如何做出設計決定?你會做哪些不同的調整?

接下來怎麼做?

回答上面提出的那些問題會是一個極好的開始。成為一名好的設計師——成為一名好的視覺設計師——需要意向性(intentionality)。這意味著你需要在做設計決策時需要有意識地考慮這些問題,而不是在完成設計後其他人問起時才去思考。

在你回答了這些問題之後,第二件事是確保這些回答是符合設計準則與研究的,同時,注意細節,然後才是樣式和個人偏好。這也許有點困難,不是每個設計師都有這樣的敏感度或得到合理的建議。但是沒關係,成長的第一步就是意識到你的工作不僅僅是如此。

Ira Glass對此有著絕妙的觀點:

“沒有誰告訴我們誰是初學者—我真心希望有誰能夠告訴我—我們都是做創造性工作的。我們進入這行是因為我們具有良好的品味。但這其中是有差距的,在最開始的幾年你做的東西並不是那麼好的。至少沒有那麼好。你想要做的很好,但是你做的確實不夠。但你的品位——帶你進入這行的品位——仍然很重要。現在你的品位已經足夠告訴你你做的東西不夠好了。你明白我的意思嗎?”

如果你的品位告訴你自己你有提升的空間,那麼你就有提升視覺設計的能力?怎麼做呢?

觀察世界上各種設計,形成什麼設計是好的,什麼是糟糕的觀點。你的觀點應該建立在基礎的設計原則之上。

1、學習現有的設計體系

例如MaterialDesign和蘋果的人機介面指南。

2、練習。

瀏覽不同的網站和應用,Dribbble上的優秀設計,不是模仿他們,而是問自己他們為什麼要這麼設計。自己尋找答案。

繼續練習。

把你的作品給具有鑑賞能力和視覺設計能力的人看,傾聽他們對你作品提出的問題。(在Jon的例子中,他就是這麼做的。)思考你在做這些設計時背後的思考,並找到你自己的答案。

然後,你自己給自己提出問題。

最後:反覆執行

 我可以和Jon說,“你的設計太常見了”,“綠色的那個按鈕感覺不太對”。我也可以告訴他解決方法,例如“把你的篩選分類和按鈕左對齊”,或者“選擇一種更亮眼的顏色”。但是如果Jon想要做得更好,如果你想做得更好,那就不僅僅是改進一個專案這麼簡單。

反饋和導師是非常相似的,最好的發展往往來自於提問和引導,而非一味灌輸。

反覆執行的技能決定了學生做設計時的第一個角色,並且只要這個角色確定下來了,那他們接下來的成長軌跡就將受到自我意識以及執行過程的引導。

相關文章