跟Facebook設計師學—如何拯救平庸的視覺設計

這是前年翻譯的一篇文章,時間比較早,但是其中評審的方法盒態度在現在看來還是很有指導意義。

“我該怎麼做才能提高視覺設計水平呢?”

無論是在舊金山藝術大學為學生輔導產品設計,還是在AIGA(美國平面設計協會)做作品集review,或是在Facebook培訓實習生時,都有人向我提出過這個問題。

從學生成長為一位專業的設計師,總需要一個過程。對於大多數學生而言,這個過程是充滿了未知的恐懼、興奮和好奇,同時也伴隨著一大堆問號:

“等我畢業後能幹什麼?”

“社會上會有什麼樣的設計類工作?”

“我適合做什麼?”

“要是找不到工作怎麼辦?”

“如果沒有公司招設計師怎麼辦?”

“我現在該如何準備?”

. . .

最近,Facebook主辦了一場設計互評,聯繫到了來自康奈爾大學的學生Jon Lee,來討論於他設計的Nearspace——一款用於查找附近可辦公區域的App。在討論中,我發現Jon有很棒的自我認知。他從潛在僱主的反饋中意識到,自己在視覺設計方面還有很大的提升空間。就像大多數即將踏入職場的學生一樣,Jon很想知道他目前的水平是否能勝任設計師一職,他想知道如何做得更好。

作為一個強有力的產品設計師,良好的視覺設計感非常重要,尤其是在Facebook。很高興,Jon對這方面的技能感興趣。我想,可以通過問答的方式幫他梳理一個知識框架,希望能幫助他提升視覺設計水平,而不僅僅是優化這一個項目。

下面我們來看看Jon的作品。這一次,是他第一次開始關注界面的視覺設計。

跟Facebook設計師學—如何拯救平庸的視覺設計

在Facebook,我們一般認為視覺設計是一種技能和執行力。因為提問能夠更好的瞭解設計者的設計意圖,所以我用提問的方式來評估Jon現在的作品,並鼓勵他去做更精緻的設計。

你是如何考慮文本樣式優先級的?

·你檢查過作品中的文本樣式嗎?我注意到有兩種拼寫形式(首字母大寫和全大寫),三種以上字體大小,兩種字體顏色,居中和向左對齊兩種對齊方式。

·標題應該用什麼文本樣式呢?按鈕呢?正文應該使用什麼樣式呢?屬性描述呢?

·你使用了什麼圖形樣式?

·按鈕上的文字有兩種大小,有兩種拼寫類型,按鈕有兩種高度和三種顏色,其中有些還帶有圖標。

跟Facebook設計師學—如何拯救平庸的視覺設計

·有兩種列表樣式。一種比較類似於發現列表(有帶有公司名稱的照片,分類和星級評分),另一種則類似於線框圖(Recent Post那裡)。

·按鈕和列表有什麼不同之處?在個人主頁中,卡片、按鈕和列表都使用了同樣的白色背景加灰色線框,是不是應該有所區別?

這些樣式與現有的常用設計樣式相比怎麼樣呢?

·有哪些功能開關是需要默認打開的呢?修改時,“取消”和“應用”按鈕有必要同時存在嗎?

·“返回”和“取消”是同一個意思嗎?是不是右上角一個“X”就夠了?

·有一個清除所有篩選條件的“重置”按鈕。在這個情況下,“重置”按鈕有必要嗎?用“應用”代替會不會更合適呢?

·底部導航是否需要固定?

·在垂直視圖中是否有水平滾動視圖?這樣的設計好用嗎?

跟Facebook設計師學—如何拯救平庸的視覺設計

界面中間距是如何規定的?

·在首頁和個人主頁中,左右邊距是非常小的,但是在篩選頁面,邊距又很大了。

·在底部導航中,Neardy的字母“y”幾乎挨著屏幕邊緣了。

·使用了什麼樣的柵格系統?

圖標表意清晰嗎?

·界面中有單個座位的圖標,還有三個一組的和六個一組的。這表現的是具體的座位數量嗎?還是隻表現大致數量,或是表現數量範圍?有沒有更好的表現方式呢?是不是表達類似“適合群體辦公”的意思?有沒有別的方式表現?

·為什麼無電源沒有相應的圖標?如果一些元素不是很重要,一定要將它們的不重要性表現出來嗎?為什麼不只顯示可選選項?

·派的圖標僅僅表達“出售派”的意思嗎?能不能表達“出售點心”的意思?還是表達“出售食物”的意思?杯子圖標代表了飲品嗎?可不可以認為出售食物的商家同樣出售飲料?有更好的分類方式嗎?

設計的一致性是如何體現的?

·篩選界面中,距離篩選使用了下拉菜單的樣式,而其他條件的篩選則使用了按鈕。

·一些按鈕帶有圖標,而一些按鈕僅有文字。

·僅有一個圖標使用了的透視的表現方式,其餘的則不是。wifi圖標的線條最粗,插座圖標的線條最細。一些圖標是像素化的,另一些又不是。一些圖標是黑色的,另一些是灰色的。

跟Facebook設計師學—如何拯救平庸的視覺設計

·大部分的卡片和按鈕都用了相同的樣式:同樣的圓角半徑,外描邊,填充色和圖案樣式。這樣會不會過於一致?

所有的元素都有出現的必要嗎?

·在搜索區域上方有分割線,在每個可篩選項下面也有分割線。

·有一個按鈕使用了綠色。

·在導航欄中同時存在圖標和文字。有必要兩個都出現嗎?

界面的配色方案是如何定義的?

·這套界面配色方案不明確。大體上是使用了暖色調,但是卻有一個亮綠色的按鈕。在界面中哪裡使用什麼顏色,有準則嗎?

跟Facebook設計師學—如何拯救平庸的視覺設計

界面中的拼寫、語法和標點符號使用正確嗎?字句有反覆斟酌過嗎?

·我能理解底部導航的“附近”和“個人主頁”;但是“添加”是什麼意思?“添加”什麼?

·“Avilability”拼寫錯誤

·篩選界面中,有必要加入“可用”這兩個字嗎?

·用戶在這個界面的瀏覽順序是怎麼樣的(視覺方面或文字方面)?這個界面的標題是“篩選”,每一段的標題分別是“距離”、“座位可用情況”、“wifi可用情況”、“電源可用情況”和“餐飲可用情況”。你會如何向朋友介紹這個界面的功能?這些信息層級合理嗎?標題命名準確嗎?

跟Facebook設計師學—如何拯救平庸的視覺設計

在其它平臺的適配情況如何?

·如果此app需要為Android設備或者電腦做適配,你還會做上述這些決定嗎?會有哪些不一樣的視覺表現呢?

. . .

如何提高視覺設計技能?

回答上述問題是優化視覺設計的良好開端。做一個好的設計師,尤其是好的視覺設計師,需要用心。所以我們應該在做設計時就考慮上述問題,並給予答案,而不是僅在做完設計後,被人問起來才開始考慮。

在有了答案後,接下來要做的,是確保我們的想法建立在堅實的設計原則上和對細節的研究上,當然,有時候也取決於個人的偏好審美。這就比較難了,因為不是所有的設計師都天生有良好的設計感並能提出有理有據的優化建議。但這並不會影響設計師的進步。能夠意識到自己作品的不足,就有進步的空間。

Ira Glass對於此有非常精彩的見解:

沒有人告訴過初學者——像我們這些搞創意的,進入這個行業是因為我們都是有品位的人。我真希望當初我剛入行的時候就有人能告訴我。話雖如此,我們的實際水平和品位之間似乎有一個鴻溝。在初入行的幾年,我們做出來的作品往往不如人意,對吧?不是很理想,是非常不理想。我們很努力地去做了,我們下定決心把事情做好,但結果還是不理想。而我們的品位還是很好的,這也是我們當初選擇搞創意工作的原因。我們的品位好到足以批判自己的作品,你明白我在說什麼吧?

如果你的審美告訴自己,還有提升的空間。你就能夠提升設計水平。那麼如何提升呢?

我們通過看別人的作品,形成了基本的審美,並通過學習設計原則鞏固審美觀

我們研究已有的設計,比如,material design和人機界面指南。

我們付諸實踐中。

我們瀏覽不同的網頁和App,還有Dribbble上優秀的作品,但我們並不會去原搬照抄,而是思考優秀的作品為何優秀。

思考後,我們再次付諸實踐。我們把自己的作品展示給有鑑賞能力的人,並聽取他們的疑問。(這正是Jon在Facebook設計環評中所作的事。)我們透過這些問題思考設計的初衷,找尋答案。

然後我們重新審視上述文章中的那些問題。

. . .

其實,我可以僅給出一些評價,比如“這個設計風格爛大街了。”、“那個綠色的按鈕跟界面格格不入。”或者我也可以給出一些建議,比如“篩選界面中的類別和按鈕都要左對齊”、“按鈕的圓角要小一點”、“主題色要選一個更明亮的顏色。”但是如果想在視覺設計方面有提高,目光不應該侷限在打磨一個項目上。

反饋和指導可以說是非常相似的;提升專業水平的最好方式是提問和指導,而非一味的遵循規則。進步來源於實踐。堅持不懈的執行力能夠讓學生得到第一份設計職位。之後,自我認知和實踐進步才能帶來突破性的成長。


分享到:


相關文章: