年前25學(xué)堂的給大家分享一篇MICU老大通過改造APP界面案例，傳授APP設(shè)計秘訣的干貨文章。

今天學(xué)堂君繼續(xù)分享老王的手機(jī)APP設(shè)計實戰(zhàn)和案例修改技巧。

手機(jī)APP設(shè)計案例是保險類的APP界面設(shè)計修改對比和解讀。

先看保險類的APP界面設(shè)計修改對比圖：

看到上圖左邊的APP設(shè)計稿之后，設(shè)計大神都會先分析問題所在，在針對這些問題進(jìn)行修改已達(dá)到完美的狀態(tài)。

下面就是老王對上圖左邊指出的6點問題：

1、保險類APP的主banner過于花哨，而圖中的矢量人物也不是那么符合主題內(nèi)容，而在文字設(shè)計上，將內(nèi)容全部規(guī)劃在左側(cè)，給人一種不平衡的視覺感受，更沒有凸顯出“免費保障”的設(shè)計氛圍。

2、在分類區(qū)域，圖標(biāo)的設(shè)計沒有明顯的區(qū)分，而在圖標(biāo)的顏色搭配上，也過于弱化，整體給人灰蒙蒙的效果，而圖標(biāo)上的投影效果，更是起到了反作用。

3、在內(nèi)容信息區(qū)域，文字的設(shè)計與規(guī)劃過于相似，用戶不能很好的找到相應(yīng)的內(nèi)容，可以在信息前端加上相應(yīng)的符號，以起到區(qū)分的作用。

4、主標(biāo)題與副標(biāo)題的不合理搭配，造成頁面整體極為不協(xié)調(diào)，可以將主標(biāo)題與副標(biāo)題設(shè)計在一排，這樣既能解決頁面空曠的問題，還能更好的調(diào)節(jié)視覺上的平衡。

5、在“精選產(chǎn)品”區(qū)域，板式設(shè)計上不夠協(xié)調(diào)，視覺效果也不夠明顯。

6、大咖出“品”區(qū)域中卡片的設(shè)計與背景色相同，無法進(jìn)行明顯區(qū)分，只能通過投影效果進(jìn)行區(qū)分，這樣的設(shè)計方式是不合理的。

當(dāng)然，也還有其他的一些小問題，在這里就不跟大家一一指出了，算是給大家給出一些課后作業(yè)。

分析出以上6條問題之后，作為設(shè)計主刀手，我們將依次去修改：

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

2、在圖標(biāo)的設(shè)計中，更換了相應(yīng)的圖標(biāo)，使人更加明確圖標(biāo)的功能。

整體的顏色也進(jìn)行了相應(yīng)調(diào)整，提高了飽和度與亮度，并進(jìn)行了冷暖搭配。

3、利用灰色背景色將消息欄加以區(qū)分，使用戶更加容易找到相關(guān)內(nèi)容。

4、在信息內(nèi)容區(qū)域，標(biāo)題的前端添加了不同顏色的線段圖形，更加容易進(jìn)行識別，而副標(biāo)題則移動到主標(biāo)題的旁邊，使層次更加清晰。

5、在“精選產(chǎn)品”中，將文字進(jìn)行“左對齊”的設(shè)置，更加符合用戶的閱讀習(xí)慣，其次將“主標(biāo)題”與“副標(biāo)題”的透明度降低了50%，加強了視覺的層次感；價格上使用了黃色進(jìn)行相應(yīng)的強調(diào)。

6、在大咖出 “品”區(qū)域中，將投影的特效進(jìn)行了刪除，使用了灰色為背景色，將整體風(fēng)格調(diào)整成扁平清亮化的視覺效果，從而帶給用戶輕松的體驗感受。

以上就是一節(jié)完整的手機(jī)APP界面設(shè)計實戰(zhàn)課程。教大家如何去設(shè)計精致而體驗較佳的APP Ui界面。