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

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

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

先看保險(xiǎn)類的APP界面設(shè)計(jì)修改對(duì)比圖：

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

下面就是老王對(duì)上圖左邊指出的6點(diǎn)問(wèn)題：

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

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

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

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

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

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

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

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

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

2、在圖標(biāo)的設(shè)計(jì)中，更換了相應(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)行識(shí)別，而副標(biāo)題則移動(dòng)到主標(biāo)題的旁邊，使層次更加清晰。

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

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

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