看完臉書設計大神點評作品的思路,新手都知道進階方法了!

昌勝(蘑菇街設計師):很多年輕設計師往往在設計好一套作品后都會邀請大神點評一下他們的作品,剛好最近我在Facebook 的設計博客看到一篇文章,很適合這個話題,能幫新手知道該從哪方面提升自己,現(xiàn)在分享給大家。

在Facebook的校招中,我們和來自康奈爾的一名實習生進行了一次交談。在我們簡短的互動中,我很欣賞他身上的一些點,因為他是一個非常具有自我意識的人。他和許多剛參加工作的應屆生一樣,都很好奇,作為一個設計師需要什么樣的能力,才能做出優(yōu)秀的設計。

作為一個資深的設計師,需要具備全面的專業(yè)技能,并且具備自我診斷意識——這是做出優(yōu)秀設計的關鍵,尤其是在Facebook。

他分享了他的設計作品,我們一起來看下,這是他剛剛開始正式接觸設計的作品。

看完臉書設計大神點評作品的思路,新手都知道進階方法了!

在Facebook,我們經(jīng)常把視覺設計稱為藝術和執(zhí)行力。為了評估Jon當前的設計水平,并鼓勵他朝著資深設計師的方向努力,我需要在評價他的作品之前向他提一些問題,這樣可以更好的了解他的設計意圖。

你是屬于什么風格和類型?

你思考過你的設計風格嗎?在你的這個作品里,我看到兩種字體類型(標題和內容)、至少三種不同類型的尺寸、兩種顏色的類型、居中和左對齊類型。

標題是什么樣式? 按鈕是什么樣式?內容模塊又是什么樣式?

你使用的是什么樣式?

我看到兩種尺寸的文本按鈕、兩種高度的按鈕、兩種描邊和三種顏色、還有帶有圖標的按鈕。

看完臉書設計大神點評作品的思路,新手都知道進階方法了!

我看到兩種不同的列表設計,其中一種和現(xiàn)有的卡片設計很相似,包含的元素有商家名稱、類別和星級評分,而在個人主頁最近帖子的列表樣式,看起來則有點像線框稿。

按鈕和列表之間的區(qū)別是什么?個人信息頁面、卡片、按鈕和列表都用了相同的白色描邊背景和灰色底, 他們三者直接是不是應該有所區(qū)分?

你的設計樣式和已有的設計規(guī)范哪種更好?

如果選項可以切換,那么它們可以自動切換嗎? 取消和應用的按鈕是否是必要的?點擊取消和點擊返回是一樣的嗎? 右上角的取消能用x代替嗎?我看到有一個重置按鈕沒有起到任何篩選的作用,這個按鈕還有存在的必要嗎?應用按鈕可以替代重置按鈕嗎?

從用戶體驗的角度來看,這個底部導航有必要存在嗎?同一垂直線上的控件是否平行?它們都是必要的么?

看完臉書設計大神點評作品的思路,新手都知道進階方法了!

邊距規(guī)范

附近頁面和個人主頁的內容模塊之間都使用了不同的間距,篩選控件的外邊距更明顯,這些邊距使用的原則是怎么樣的?

附近頁面模塊的標題文字左右邊距都很小,幾乎貼近了頁面邊緣,為什么不用柵格布局?

圖標是否表意清晰?

座位圖標有單個、三個和六個的區(qū)別,這是一個座位的計數(shù)還是一些座位數(shù)的大約值?又或者是一系列的座位么?還有更好的方式來表達嗎?這是“團購”優(yōu)惠的意思么?有沒有另一種方式設計它?

為什么沒有明顯的標志表示是兩個相反的意思?如果不是重要的元素,為什么你要顯示出來這種無足輕重的元素?初步結果難道不應該包含所有可用的選項么?

派(pie)在這里是想表達派?還是指代甜點?又或是代指所有食物?飲料意味著什么?你是假設認為每個餐廳都能夠提供飲料嗎?有更好的分組嗎?

你選擇的設計風格是一致的嗎?

我看到在使用下拉篩選功能時,有一些篩選按鈕選項的樣式有一些不同,有些按鈕包含圖標有些又只有文字。

一個圖標有角度,其他圖標又沒有; WiFi圖標的線最粗,但是插線板的圖標線又很細; 有些是像素化的, 有些不是;有些是黑色的,有些是灰色的。

看完臉書設計大神點評作品的思路,新手都知道進階方法了!

大多數(shù)卡片和按鈕使用了相同的樣式:圓角、描邊、顏色填充和風格, 他們是不是太一致了?畢竟是兩種不同的內容模塊。

屏幕上所有的元素都是必要的嗎?

在搜索區(qū)域上方有一個分割線,還有每一個可選選項下方也有一個分割線。我還看到了其中一個按鈕用了綠色。導航使用了圖標加文本的方式,它們真的需要同時存在嗎?

你怎么定義你的配色方案?

你的配色是比較簡約的暖色調,除了一個高亮的綠色按鈕。你的設計原則是怎么樣?并且是應用在哪些地方?

看完臉書設計大神點評作品的思路,新手都知道進階方法了!

你的拼寫、語法和標點符號都正確嗎?你的內容有邏輯嗎?

附近和個人主頁的導航經(jīng)常出現(xiàn),但是這個添加是什么意思? 添加什么?“可用性”這個單詞拼寫錯誤了,而且它真的需要出現(xiàn)在這里嗎?

頁面的“閱讀量”是怎么計算的?你的頁面標題是過濾器,但是你頭部顯示的是距離。另外這個頁面可以過濾出座位數(shù)量,Wifi可用性,可用空間和食品飲料。但是你能向你的朋友們解釋一下這個頁面的功能是什么嗎?這個頁面的結構是合理的嗎? 他們的命名是否都是合理的?

看完臉書設計大神點評作品的思路,新手都知道進階方法了!

頁面的設計可移植性高嗎?

如果你是為安卓或者PC平臺設計,你會做同樣的設計決策嗎? 這兩者之間的決策有什么不一樣?

那么回到我們最初的問題來,如何在產(chǎn)品設計上獲得更好的效果?

能回答以上這些問題,只是作為一個好的設計作品的開端。成為一個好的設計師,一個牛逼的產(chǎn)品設計師,需要持之以恒。這意味著你已經(jīng)在以一個設計師的角度在思考和解決問題,而不是等待別人去發(fā)現(xiàn)這個問題,那時就太晚了。

接下來的工作就是針對性的去回答這些問題,確保你的設計意圖是基于堅實的設計原則、研究和對細節(jié)的關注,不過,對于設計風格和偏好這種問題會比較棘手,因為并不是每個設計師都有這些意識或者充足的理由。這很正常,因為在提高你的設計能力這條道路上,首先要做的就是接受你的設計作品還并不完美。

Ira Glass對此有著奇妙的看法:

“沒人會向別人吐槽菜鳥,就算有人看出我很菜,我也希望他不要嘲笑我,畢竟大家都是做設計的。我們從事這行,是因為我們有好的品味。但每個設計師都會有瓶頸期,回顧以前的設計,現(xiàn)在看來是不是覺得很一般?確實是做的一般。但是你在努力的向前走,并且有信心能做更好,雖然你的作品真的沒那么好。你的品味,作為設計師的裝備,以及你的審美,它們就是當你看到你所創(chuàng)作的成果時心中略過的那絲絲縷縷是失望,我知道你懂我的意思。”

1. 如果你有品味,那么它會告訴你還有多少提高的地方,以及應該怎么提高你的設計。

2. 多看看其他人優(yōu)秀的設計作品然后形成自己的見解,什么是好的,什么不好的,在你的見解上加強基礎的設計原則。

3. 多看看現(xiàn)有的設計規(guī)范,比如Material Design和人機界面指南。

  1. 《中文版來了!UI設計師必讀的IOS 10人機界面設計指南 (一)》
  2. 《中文版來了!UI設計師必讀的IOS 10人機界面設計指南 (二)》
  3. 《中文版來了!UI設計師必讀的IOS 10人機界面設計指南 (三)》
  4. 《中文版來了!UI設計師必讀的IOS 10人機界面設計指南 (四)》

4. 多練手!多練手!多練手!重要的事情說三遍。

5. 多瀏覽設計社區(qū),多下載優(yōu)秀的APP,多去Dribbble看看優(yōu)秀的設計作品,不要去復制,而是去思考他們?yōu)槭裁催@么做?然后再去揣摩背后的答案。

6. 向那些有設計見解的人展示你的作品,并且傾聽他們對你的作品的評價,然后去思考他們所說的話,再應用到你的設計上。

7. 不斷的自我反思,比如我們剛剛提到的問題。

8. 現(xiàn)在我可以給Jon一些建議,比如你的“設計風格不統(tǒng)一”、“綠色按鈕太突兀”。我還給了他一些解決方案,比如“左對齊所有過濾器類別的按鈕”、“縮小按鈕的圓角半徑”、“給你的品牌顏色選擇一個亮色調”,如果想使你的作品更好,就要不斷打磨,細細雕琢。

9. 別人對你作品的反饋和指導可以起到一定的作用,但是進步最快的方法還是要多練習,實踐出真知,而不是一味的照搬規(guī)范。

10. 練習才能進步,不斷的努力嘗試,鍛煉出強大的執(zhí)行能力,是初學者們首先要需要的,一旦設計師這個角色在你心中形成,它會一步一步指導你進步。

紀念碑谷出品的像素完美手冊:

  1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
  2. 《中文版來了!值得每個設計師收藏的《完美像素使用手冊》之細節(jié)篇》
  3. 《第三集!值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
  4. 《第四集!值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

谷歌官方出品的動效設計指南:

  1. 《中文版來了!新版Material Design 官方動效指南》
  2. 《中文版來了!新版MATERIAL DESIGN 官方動效指南(二)》
  3. 《中文版來了!新版MATERIAL DESIGN 官方動效指南(三)》

原文地址:medium

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內人氣最高的網(wǎng)頁設計師學習平臺,專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ,歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網(wǎng)站推薦,設計師必備導航:http://hao.uisdc.com

收藏 5
點贊 1

復制本文鏈接 文章為作者獨立觀點不代表優(yōu)設網(wǎng)立場,未經(jīng)允許不得轉載。