關(guān)注micu微信公眾號很久了，很榮幸看到了一篇關(guān)于《你的設(shè)計(jì)真的“夠好”了？實(shí)操改稿全過程！》的原創(chuàng)博文，而且是關(guān)于APP界面設(shè)計(jì)的。

而25學(xué)堂是一個專業(yè)的APP界面設(shè)媒體平臺，不得不把這么好的app設(shè)計(jì)干貨分享給大家。

米醋MICU老王通過一個個真實(shí)的app設(shè)計(jì)案例改造全過程來教大家把a(bǔ)pp界面設(shè)計(jì)的更精致，更友好。

APP界面設(shè)計(jì)改造案例：

先看看修改前后的對比照吧~

詳細(xì)APP改造過程解讀，并給出最優(yōu)的APP界面設(shè)計(jì)修改建議

APP設(shè)計(jì)原稿：

找出7點(diǎn)APP設(shè)計(jì)不足之處：?

1）大面積的暖色會造成視覺疲勞，會帶給用戶不舒適的感受，而此時(shí)我們可以將其調(diào)整為冷暖搭配或進(jìn)行添加輔助色。

2）文字搭配上，要盡可能的簡潔規(guī)范；文字的大小也沒有合理的進(jìn)行規(guī)劃，沒有抓住重點(diǎn)內(nèi)容。

3）再來說說圖標(biāo)的設(shè)計(jì)，我們能夠發(fā)現(xiàn)圖標(biāo)有圓潤也有尖銳的，這樣造成了整體不夠統(tǒng)一。

其中“超標(biāo)報(bào)警”與“短傳報(bào)警”圖標(biāo)的設(shè)計(jì)過于相似，無法給用戶明顯的區(qū)分。

4）“總熱單耗”的圓圈使用了投影效果，整體的效果過于凸顯，破壞了整體的統(tǒng)一性。

5）在“我的任務(wù)”列表中，左側(cè)的時(shí)間與右側(cè)的任務(wù)設(shè)置占據(jù)的位置是相同的，變得非常突出，那么我們就要分析哪一個內(nèi)容比較重要，要有層次的進(jìn)行設(shè)計(jì)。

6）在底部的標(biāo)簽欄中，圓形的設(shè)計(jì)會造成圖標(biāo)的重復(fù)性過高。

7）最后整體的效果，層次性比較弱，圖標(biāo)顏色的設(shè)計(jì)也過于花哨，沒有統(tǒng)一性。

分析到這7條問題后，接著我們將依次按照這7條去修改：

1）修改后的界面我們將冷色設(shè)置為底色，但是在重點(diǎn)內(nèi)容上搭配了暖色，而在圖標(biāo)的設(shè)計(jì)上也進(jìn)行了相應(yīng)的統(tǒng)一，更好讓用戶進(jìn)行區(qū)分。

2）文字上也將大小進(jìn)行了區(qū)分，加強(qiáng)了層次感的設(shè)計(jì)。

3）在“總熱單耗”區(qū)域，去掉圓形的投影效果，使其更加簡潔大方。

4）在“我的任務(wù)”列表中，將次要信息時(shí)間放在了右側(cè)，加強(qiáng)了左側(cè)任務(wù)的文字，在視覺上更加舒適。

5）底部的標(biāo)簽欄中，去掉了之前不好辨認(rèn)的圓形外框，使用戶一目了然找到相應(yīng)的功能，視覺效果也更加清晰明了。

總結(jié)一下：當(dāng)我們碰到首頁比較復(fù)雜或任務(wù)信息比較多樣的情況下，需要把控好主次的設(shè)計(jì)，以及調(diào)整顏色冷暖的區(qū)分，讓界面的視覺效果更加有節(jié)奏感。