PS課堂 花姐點評作品

GIF/1K

設計師：小佛

設計作品：UI類 – 播放器練習

花姐點評：

因為這是一個練習作品，經過和小佛同學溝通，從真實產品角度以及視覺呈現倆個角度來做探討和分析。

01.色彩選擇太過小眾

以真實產品來說，這種紫色，產品應該不會讓你用的，因為受眾面太小。色彩太過鮮艷，接受度就小。除非在皮膚定製的功能上，產品才可能讓這樣的配色過關。

02.不同模塊顏色太過靠攏，導致模塊層級弱化

我們以QQ音樂界面為參考。01：頭部模塊 02和03：內容模塊 04：音樂播放模塊

通過不同底色的搭配，內容模塊很分明。而小佛的界面，模塊間的底色太過接近，導致一眼看去就是一個色塊。UI裡面，內容辨識度，層級是很重要的，不要讓用戶花費太多的時間去辨別他想要獲取模塊信息的。

03.我們去分析頭部模塊存在的細節問題

A: Icon存在線性和實心的區別，不統一是同一模塊里切記不能犯的錯誤

B: 註銷icon不應該跟在用戶信息後面，因為這屬於產品不主推的操作，可以放在設置里，做下拉展開的方式

C: 菜單icon出現的位置，左邊是屬於用戶信息模塊，右邊是搜索模塊，太接近，導致位置很尷尬，可以放到後面一列icon中

D: 搜索欄是非常高層級的操作，小佛設計的太過隱蔽了。我們參考QQ音樂會發現

搜索欄的視覺比重是相當重要的級別。在設計的時候需要考慮，哪些交互是用戶可能會頻繁用到的，我們就需要去用可視化表達出來。

04.我們去分析內容模塊存在的細節問題

04-1:左邊的模塊明顯還沒去構思內容，即使以現在的內容為版本，存在2個問題。無論我們做練習，還是做真實產品的平面的設計，切記不要偷懶，文案全部一樣。因為現實情況是這裡會有字元長短的區別，我們應該按照最接近真實的效果去做視覺稿。列表裡用了同一個icon的情況，可以把圖標提到標題欄，圖標的本意應該是表面內容的對應。

04-2:右邊的內容里。BANNER輪播缺乏錨點，錨點是用來告訴瀏覽者圖片切換以及圖片數，且BANNER沒有告訴瀏覽者內容從屬。

對比QQ音樂，能很明顯的看到這裡存在的問題。視覺設計的時候應該明確告訴用戶內容的分類和從屬，簡單的幾個字標題，可以最大化的減少用戶學習理解的成本。

04-3:對齊的問題。「每日音樂推薦」等都是左對齊。而「推薦歌單」用了居中對齊，「更多」則是右對齊。同一頁界面里，不推薦對齊模式不同，這樣內容看起來參差不齊。

04-4:聽眾人數不應該直接放在圖片上，圖片元素會干擾其視覺清晰度，辨識度

04-5:展示框高度比頁面真實高度小的時候，需要把滾動條展現出來。且，你的板塊間可以用分隔線隔開，內容就會更加清晰可見

05.我們去分析播放模塊存在的細節問題

A: 播放條顏色是白色，在視覺顯示層級上還不夠，時間原點太小了。這裡隱藏的交互操作是可以按住原點拖動時間軸的。

B: 播放按鈕可以大一點，和邊上的切歌按鈕區分開。切歌按鈕做錯了，做成了快進的。

C: 歌曲的封面現在是置頂邊緣的效果，感覺像是分隔開了底部模塊。參考QQ音樂的做法，留點間距，這樣會更透氣。

D: 音量缺乏提示ICON，且和播放時間軸一樣，都是橫條，容易產生視覺誤差。

E：去掉底部修飾元素，這樣視覺會更清晰，減少干擾

設計師：轉身

設計作品：恆大競標

轉身的這個作品。合成上的整體氛圍還是不錯的，完成度比較高了。畫面存在的最大的問題是透視。

主體的土地現在是俯視角度的，但是上面的元素80%都是平視。這樣的話兩者放在一起怎麼看都會感覺很假。

文字的顏色感覺可以再突出一些。可以參考這種透氣感的設計。

設計師：momo

設計作品：戶外練手

momo的這個作品。優點是光源統一，整體色調比較舒服。

鳥沒有體現出光的感覺，像直接扣下來的，沒有經過處理，很生硬。遠處的山是找的素材拉大的，導致圖片模糊，並不是用了高斯模糊等之後的效果~素材質量低是嚴重減分的、

文字邊上的這些雜點加的太隨意了，最好能隨著文字的顏色去進行相應的變化

這兩座山感覺不太像一個類型的山，素材風格上稍有區別

足跡可以考慮順著駱駝的走勢去加，會感覺更逼真一些

Ps：想讓你的作品獲得大神的點評嗎？那麼就趕快加入玩皮兔設計交流群吧！每周一練，定期交稿，你都有機會獲得每周專訪嘉賓的親自點評！還在等什麼，來吧！

「

歡迎大家一起交流設計心得

」

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！