你的設計真的「夠好」了？實操改稿全過程！

各位MICU老鐵們，大家好！眼看著一年就要結束了，那麼今天老王針對同學們在設計中碰到一些問題，給大家進行相關的講解與點評。希望在以後的學習過程中，能夠發現類似的錯誤和問題。

在今天的講解過程中，老王將以往同學的練習案例，進行了相應的調整，那麼就讓我們通過觀察修改前後的對比，從中學到界面設計的重點內容。通過今天的學習，相信大家在以後的工作中對於設計會更加有條理，並且能夠找到自身問題的所在。在下面的修改中老王會盡量保留原來的風格來修改，這樣能更仔細的體現出設計的變化。

案例改稿一

讓我們先看一下修改前後的效果：

對於設計新手來說，整體效果還是可以的，在色調上也使用了暖色調。那麼讓我們先來看看原圖中出現的問題。

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

2）文字搭配上，要儘可能的簡潔規範；文字的大小也沒有合理的進行規劃，沒有抓住重點內容。

3）再來說說圖標的設計，我們能夠發現圖標有圓潤也有尖銳的，這樣造成了整體不夠統一。其中「超標報警」與「短傳報警」圖標的設計過於相似，無法給用戶明顯的區分。

4）「總熱單耗」的圓圈使用了投影效果，整體的效果過於凸顯，破壞了整體的統一性。

5）在「我的任務」列表中，左側的時間與右側的任務設置佔據的位置是相同的，變得非常突出，那麼我們就要分析哪一個內容比較重要，要有層次的進行設計。

6）在底部的標籤欄中，圓形的設計會造成圖標的重複性過高。

7）最後整體的效果，層次性比較弱，圖標顏色的設計也過於花哨，沒有統一性。

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

1）修改後的界面我們將冷色設置為底色，但是在重點內容上搭配了暖色，而在圖標的設計上也進行了相應的統一，更好讓用戶進行區分。

2）文字上也將大小進行了區分，加強了層次感的設計。

3）在「總熱單耗」區域，去掉圓形的投影效果，使其更加簡潔大方。

4）在「我的任務」列表中，將次要信息時間放在了右側，加強了左側任務的文字，在視覺上更加舒適。

5）底部的標籤欄中，去掉了之前不好辨認的圓形外框，使用戶一目了然找到相應的功能，視覺效果也更加清晰明了。

當我們碰到首頁比較複雜或任務信息比較多樣的情況下，需要把控好主次的設計，以及調整顏色冷暖的區分，讓界面的視覺效果更加有節奏感。

案例改稿二

這是一款保險類的APP界面設計，我們還是先來看一下修改前後的對比效果。

從原圖中，我們能夠看出界面中存在以下幾個問題：

1）上方的banner過於花哨，而圖中的矢量人物也不是那麼符合主題內容，而在文字設計上，將內容全部規劃在左側，給人一種不平衡的視覺感受，更沒有凸顯出「免費保障」的設計氛圍。

2）在分類區域，圖標的設計沒有明顯的區分，而在圖標的顏色搭配上，也過於弱化，整體給人灰濛濛的效果，而圖標上的投影效果，更是起到了反作用。

3）在內容信息區域，文字的設計與規划過於相似，用戶不能很好的找到相應的內容，可以在信息前端加上相應的符號，以起到區分的作用。

4）主標題與副標題的不合理搭配，造成頁面整體極為不協調，可以將主標題與副標題設計在一排，這樣既能解決頁面空曠的問題，還能更好的調節視覺上的平衡。

5）在「精選產品」區域，板式設計上不夠協調，視覺效果也不夠明顯。

6）大咖出「品」區域中卡片的設計與背景色相同，無法進行明顯區分，只能通過投影效果進行區分，這樣的設計方式是不合理的。

分析到這6條問題後，接著我們將依次去修改：

1）去掉花哨的人物元素，將重要的文字信息進行放大，主標題與副標題增強了層次感，視覺效果上一目了然，而背景元素選擇了一個「盾牌」的圖形，更加凸顯保障的含義。

2）在圖標的設計中，更換了相應的圖標，使人更加明確圖標的功能。

整體的顏色也進行了相應調整，提高了飽和度與亮度，並進行了冷暖搭配。

3）利用灰色背景色將消息欄加以區分，使用戶更加容易找到相關內容。

4）在信息內容區域，標題的前端添加了不同顏色的線段圖形，更加容易進行識別，而副標題則移動到主標題的旁邊，使層次更加清晰。

5）在「精選產品」中，將文字進行「左對齊」的設置，更加符合用戶的閱讀習慣，其次將「主標題」與「副標題」的透明度降低了50%，加強了視覺的層次感；價格上使用了黃色進行相應的強調。

6）在大咖出 「品」區域中，將投影的特效進行了刪除，使用了灰色為背景色，將整體風格調整成扁平清亮化的視覺效果，從而帶給用戶輕鬆的體驗感受。

好啦！今天的界面案例改稿就講到這裡，希望大家能夠從這兩個案例中有所收穫，那麼MICU也會在以後的日子中，帶給大家更加精彩的案例講解，畢竟鐵粉們開心，才是MICU最重要的事情！

—— END——

本周熱文

—

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