我設計的 UI 為想追求 Material Design,如何?

我想請各位大牛來幫我看看我這套UI的不妥之處。我好修改,謝謝!

因為圖片可能被壓縮,所以字體模糊或太小的問題請忽略不計

2.22日 23.46更新

--------------------------------------------------------------------------------------------------------------------------------------------

每個回答都認真看過了,很謝謝大家的批評與鼓勵,我會好好審視每一個不妥的點,去完善他的。


我個人認為題主可能沒有完全理解 Material Design 的內涵,扁平化也並不是指的純色+文字的表達形式。

簡單說說題主描述中的幾個頁面。

總體色彩過多是一個主要問題。題主可以看看 Android 官方的幾個 App,一般一個產品不宜使用太多的色彩,一方面會給人視覺上很亂的印象,其次不容易讓用戶形成色彩慣性。我看到文字主要是白色和黑色,前者居多,但是題主所選用的很多顏色是不適合做白色的背景的,比如天藍色和亮綠色,這就導致了視覺上的不和諧感。

單頁面過於單調是另一個主要問題。Material Design 和扁平化更多的注重抽象出控制項的功能和內容,而不是形態上的擬真,但是這並不代表只用純色背景就能解決所有問題。因為單頁面主要是純色,顏色佔據了絕大部分的視野,一方面喧賓奪主,另一方面突出了色彩的單調。題主可以看一下一些其他產品和設計,留白和縱深對於控制項之間的區分、突出非常重要,白色搭配純色和陰影是很合適的。

FAB主要用來承載非常常用和非常重要的功能,這裡用來返回可能很不合適。

字體字型大小圖片相關的問題既然題主說忽略不計我就不講了,第一張圖的幾個字實在太大了。

再說說和團隊合作和老師之間的意見分歧的問題。

團隊合作中有分歧真的很正常,何況題主之前都是做開發的,設計可能也是剛入手,得不到隊員的信賴也是難免。首先要看產品的定位和需求到底是什麼,老師是產品經理的話你說不定還真得聽他的,畢竟這不是你的個人產品,實現、運營、需求分析等等都是大家一起在做,Material Design 現在在很多人眼裡並不是熟悉、認可的。老師嘛,可能比較傳統比較學院派,不接受新事物也很正常,我倒覺得也不能說他是外行,也許好好溝通一下,尋找一條能夠儘快把項目做完的路更好。

設計是一個循序漸進的過程,並不是讀完規範就能馬上做出好的產品設計了。視覺是一個方面,交互、功能邏輯、動效等等又是另一方面了,題主做開發的,肯定比我懂的多。

不知道對題主是否有幫助,繼續加油哈。


目前你這樣的設計其實並不是規範化的Material Design,字體布局陰影都有問題,大面積色塊影響到了閱讀體驗,如果你真的要採用MD的Web UI,你可以嘗試去了解下Google Polymer框架。


1. 設計風格要統一

如果你追求的是flat,就少用點陰影。如果你追求簡單易懂,就少用點動畫。台上的loading時間,再炫的動畫也彌補不了。

2. 字體要統一

暫時沒看出來你分別使用不同字體的原因,統一能幫你提高用戶體驗。字體顏色也是,什麼地方用什麼顏色,是為什麼原因,能給用戶怎樣不同的認知和體驗,都要想好。字體大小也需要統一,不僅僅是顏色。

3. 配色要多下功夫

配色從上到下拉下來看著不太舒服,去專門配色網站上多看看組合,自己多實驗幾個版本,然後拿給不同的組員問意見。

4. 細節方面要注意

比如:你那個導航的深藍色符號,不仔細看,會埋沒在背景色裡面,人們很容易忽略掉這個關鍵的功能。

這幾點掌握好了,往往能讓你的web app看起來比較「高大上」,不然就會很「非主流」。

其實我帶過的很多二年級的學生都能做出比這個好的設計圖,所以別怪你老師或者同學給你提意見,因為真的不合規範的地方太多,都談不上創意了。當普通作業來改,應該是不及格。

最後,知乎現在怎麼好多學生來求改作業啊。我覺得你應該直接問老師,或者多做user testing來收集意見,本身這也是一種鍛煉。

順便,user testing也是要設計的,你只說「請大家提提意見」,甚至都不給個方向,往往很難收到預期的效果。

不過,你還小,還有時間。


------------------------正文請向下滑-------------------------

我感覺你們做項目吶,還是要提高自己的知識水平,我為你們捉急啊。不要總想弄一個Material Design,就說我不行了。我告訴你們吶,我是身經百戰,見得多啦!Metro,Material,哪種設計我沒見過?我和它們談笑風生。

你們有一個好,世界上出現一個新的設計語言,模仿得比誰都快。但是抄來抄去的手段啊,too simple sometimes naive,懂了沒有?

我很抱歉,我今天是作為一個程序猿和你談這些,我不是搞交互的,也不是搞視覺的,但是我見得太多了,我有這個必要告訴你們一點,UI設計的經驗。

我可以回答一句無可奉告。但你們又不高興。我沒有說你的設計不好,沒有任何意思,但是你一定要問我支不支持?那我說支持。你們啊,不要喜歡搞什麼時髦,說什麼我不是搞視覺的,然後把我羞辱一番。你們啊naive!I am angry!你們這樣啊是不行的。

-------------------------正經的分割線-------------------------

0. 字體、字體排版不符合規範

微軟雅黑也就算了,宋體是什麼鬼?換成思源黑體吧,7種字重,顯示效果好多了。

字體排版沒量過,不過看著明顯是亂來的。

1. 陰影不符合規範

2. 百度地圖

當然我不是說百度地圖不好了,但你想整個Webpage應用Material Design,你放那麼大一個百度地圖什麼意思?眼睛看著好難受,可以的話換Google Map吧。還有內陰影也是你自己加的吧。

Google地圖的視覺甩Baidu Map幾條街。

3.奇怪的混搭

這裡出現了三種字體,你真的覺得這個搭配合理嗎?標題字體看上去非主流,微軟雅黑不適合在那麼小的地方塞一大堆文本,而且字重太少,這裡粗體的顯示效果不好。那個icon_start的顏色都和背景撞一起去了。Components的margin和padding也很不合理。色塊。

我發現我已經不想寫下去了。。總之題主就是看到Material Design覺得很新奇就想拿過來用,不光沒有理解「神」,連「形」都抄的一塌糊塗。。

但是這不是重點,關鍵還是題主的審美和前端經驗要學習一個。你的webpage完全沒有必要按照Material Design來寫,借鑒其中的一些元素即可。多叫一些審美正常的同學來看看,不過加什麼擬物的時鐘就算了,要懂得拒絕不合理的需求。

如果你誠心誠意要用MD,看這裡,Material UI - Material Design React Components, 開源項目,前端都寫好了。中文版的說明書,Material Design 。


1.文字編排:首先字體要無襯線吧,中文的話,說實話我不熟悉,思源黑體吧。。還有行間距,還有排版方面,磚家導遊和磚家指路這倆不應該是在紙面上的。用一條線隔開導遊和指路兩個模塊,類似於這種:

2.圖標:你感受一下MD的圖標風格吧~

然後,圖標的位置和文字的位置是醬紫的比例,像素數目不用管,感受一下就好

3.交互:地圖方面的交互感受一下這種的。

Material Design

先看下Material Design Guideline吧

最後,題主不是設計專業的,而且才大二,能做成這樣已經不容易。

總之參考一下谷歌地圖之類的交互方式,交互界面,感受一下採用MD的App,Material Design並非簡單的扁平化,還有配色,排版,圖標,圖像等等元素的統一。想做交互的話,還是要多看東西。你可以從別的交互界面開始改改什麼的。

加油了~

P.S.

→_→預算寬鬆的話,我可以給你們做設計諮詢的


舉個栗子

第二張圖的popup背景不應該加上一個mask嗎。。

再比如同一個應用統一配色不好嗎。。。

導航欄和標題之間迷之縫隙鬧哪樣。。(話說md有這麼獵奇的導航欄嗎。。

圖標風格有點問題

文字顏色和背景顏色配的也太獵奇了。。

又是圓角又是紙片鬧哪樣。。

以及bootstrap教科書式的拍扁方法不大適合md吧。。。(那個是真的flat啊。。

還有一大堆類似的不符合md設計風格的元素混雜在一起。。

另外你這麼喜歡色塊,為什麼問問神奇的modern ui呢 安利中。。)


不建議自定義這麼多頁面顏色……太亂了。感覺你是仿Google keep整成這樣了,但是你既然做的是地圖類應用,還是借鑒一下Google map吧。

把所有頁面背景改回默認白色,最多不同頁面自定義一下app bar就夠了。


非專業做成這樣還是很值得肯定了,手機碼字,不是很方便。

我覺得題主把一個很重要的東西忽略了——交互設計。交互邏輯問題很大。

還有UI上用色太亂,字型大小不對。


1.陰影用的太多了吧,而且邏輯不太合適。

2.用大塊的顏色做背景不合適

ps,對於學校的項目而言,已經不錯了,這種項目一般沒人會真用的


額,生搬硬套所謂規範而不是真的去「遵循」。。。。你真的讀懂規範了么?

請仔細研讀material Design規範先。。。中文翻譯版


說規範的那些都歇一歇好嗎。谷歌自己的應用都有很多不遵循規範的,一天到晚嚷嚷著規範有什麼用?所謂規範就是給你一個思路,告訴你哪樣比較好看,哪樣是難看的。如果你有更好的方案和見解完全可以用到你的設計中。

至於題主。

不適合自己的事情就不要做了。

這個東西不管它合不合規範。

你自己覺得好看嗎?


還行,字體調一下,不要用宋體,大色塊的模塊不要有大黑邊

顏色方面,如果老師接受不了太明亮的,那麼可以嘗試把現有的顏色加一些灰度,調的素一點,或者乾脆使用白色或灰色做底色,然後用不同的顏色做點綴或標題文字背景,參考play store


配色還是別折騰了吧,請個設計師沒啥不好的。

你看你這一系列界面都沒有統一性,簡直是想起來哪種顏色就放哪種顏色。。。

咱寫代碼的業餘玩玩滿足一下就行了,非得去做設計師就比較難過咯。

況且設計師都在一天到晚改稿,沒啥能一步到位的。so,大心臟一些吧~對別人也對自己。

話說material design這風格比起毛玻璃來難駕馭得多了。。。


花點錢請個設計吧,做前端和做設計真心不一樣,人家說的「幾天就搞好一套新UI」的前端存在以下幾種可能:

  • 可能已經工作了好幾年,經驗豐富
  • 可能使用了框架,默認的模板
  • 可能是照著設計圖做的,美術已經做好設計了
  • 也可能是別人家的前端


1.字體,字型大小,間距,邊距,有問題。

2.配色,配的真夠難看的,有些頁面裡面的顏色撞得我想吐…配色這東西,真得有點天賦,這不是真技術活,如果實在沒轍,就抄其他人搭配過的顏色吧。

3.排版布局,怎麼看怎麼覺得像左邊一個手機,右邊一個畫布,割裂感太強。你這是一個web應用,記住。

4.你這幾年用過的布局,你看md設計文檔上面,沒有這麼布局的例子吧,還是老老實實的參考文檔上的例子吧。

5.新人值得鼓勵


感覺題主的東西做的還是挺漂亮的

我也是外行,在我的水平上看出有一些不順眼的先指出來吧

如上圖所示

  • 紅色箭頭陰影不連貫

  • 藍色箭頭「專家導遊」這裡建議使用非襯線字體,微軟雅黑應該會好一些
  • 百度地圖那裡的陰影很奇怪,似乎陰影加在裡面了,感覺比較難看

  • 龍岩火車站這幾個字建議左對齊,顏色是黑色顯得很奇怪
  • 這幾個字包括下面「請在橫線填寫逗留天數」應該再下沉一點

  • 藍色箭頭所指的那條白線沒看懂,如果是交互中有用的話就忽略我(我是外行)

  • 返回鍵這裡要不要陰影我覺得你可以再考慮一下,水平有限,我沒有改進意見,但是建議你再思考下

  • 藍色箭頭所指的兩處陰影方向和似乎都不同,這個應該是明顯的問題
  • 藍色箭頭所指的返回鍵那個返回圖標似乎並沒有居中吧
  • 紅色箭頭所指的文字應該再遠離圖標一點
  • 黃色箭頭所指的6個圖標的陰影似乎是不是該去掉?

  • 道路查詢這幾個字的字間距是不是偏大了?

  • 藍箭頭所指的圖標和文字應該向內錯一點,過著把下面的白線拉長一點,感覺藍箭頭所指位置要掉出去了
  • 黃色箭頭所指的這個東西是幹嘛的?會不會沒用到?(因為你題目里沒有說點這個按鈕會怎樣,用到就忽略這條)
  • 紫色的地方是該空著嗎,把道路查詢或者輸入框搬到哪裡會不會更好?(我自己都覺得我這句說的不對.....,無視我好了)
  • 我覺得紫色圈那裡有問題的主要原因是你明顯的降低了這個區域的明度,總覺得這個地方似乎和下面並不是很是整體。

水平太渣,匿名防丟人。大家儘管噴,正好我多學習。


分頁阅读: 1 2