年底再改一稿，看完不虧

來源：Micu設計 ID：micudesign

各位老鐵們！

大家好，老王又來了~

在上次給大家講解了界面的改稿案例，從中我們也能體會到，做設計一定要從整體效果出發，再到每一個細節的處理過程。

同時，MICU也看到很多鐵粉們都紛紛留言，期待能夠發布更多關於此類改稿的案例講解，所以老王也是應大家要求，拿出更多相關的練習案例給大家進行分析，不僅僅在界面設計還有品牌設計中的一些技巧及方法。在改稿過程中我會盡量保留原稿風格，從更深層去對比分析設計中的細節。

這次再來點硬貨！

好了，還是老規則，來！上菜~

先來看一下修改前後的對比效果圖。

案例改稿一

首先，我們分析一下修改前案例存在的一些問題。

開屏頁面（原稿）

1）案例中有兩個頁面，第一個頁面對開屏頁面，品牌為「一品屋」，品牌slogan為「一品一物，一匠一心」，開屏頁面中的圖標設計與品牌也具有一定的相關性，比較符合品牌理念，但是圖標與文字沒有在頁面中明顯的凸顯出來。

2）其次，圖標中「品」字給人感覺筆畫比較繞，在視覺效果上可以設計得更為簡潔，在設計延展上，可以將開屏中的圖標設計融入到界面底部。

3）在首頁中導航布局上，頂部的「搜索欄」佔用的空間面積過大，沒有凸顯品牌性，可以將「一品屋」名稱與導航欄相互結合，加強用戶對於品牌的印象。

首頁（原稿）

4）首頁的主圖選擇上，儘可能選擇真實的產品圖片，這樣才能與品牌更加匹配。

5）在圖標設計中，我們能夠看到設計者使用了紅色作為點綴色，但是由於紅色過於偏向女性化，不太符合該品牌的產品調性，可以選擇較為中性的顏色，作為圖標的點綴色。

6）在圖標的圖形選擇上，沒有明顯的凸顯出功能性，比如男裝、數碼圖標不易識別該圖標。包括圖標的細節處理，例如線條粗細、圓滑度等，都沒有達到統一的效果。

7）在新品推薦區域，主標題沒有與下方特定的產品很好的結合在一起，可以多元化的將該區域整合成為一體。

8）底部的按鈕設計，可以將LOGO與首頁圖標按鈕結合在一起，可以很好的表現出品牌的延展性與記憶度。

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

開屏（修改後）

首頁（修改後）

1）首先將品牌的圖形做了極簡化設計，將「品」字用直角圖形表現出來，其次在顏色搭配中，選取了白色與黃色豐富層次，並且這兩種顏色將會被運用在主頁設計中。

2）在搜索欄的設計中，將搜索標誌移動至頁面的左側，從而添加了品牌名稱，加深了品牌的印象度。

3）在選取商品圖片時，儘可能的選擇乾淨明亮的商品進行展示，可以完美的體現出商品的特性。

4）在圖標的設計中，整體的統一性更強，功能性也更加明顯，沿用了之前線性圖標的風格，同時添加了黃色作為點綴色。對於圖標的細節處理，要更加註意大小、線條粗細以及弧度等的處理。

5）新品推薦區域，縮小了該區域的空間，將主標題與商品結合在一起，從而將節省出來的空間可以展示更多的商品，豐富了頁面內容，使用戶可以一目了然。

局部（原圖）

局部（修改後）

6）底部的按鈕設計，將品牌的植入到了底部的圖標中，包括「商城」中的圖標，直接運用了上方「箱包」的圖形，這樣能夠從用戶的角度更加凸顯圖標的功能性。

局部（原圖）

局部（修改後）

通過這個改稿案例，我們能夠了解在設計界面時，如何從品牌LOGO到頁面的完整設計，包括色彩搭配、圖標圖形的統一性和簡潔性。

案例改稿二

由於在上一期改稿的留言中，很多同學反應在LOGO設計中，總會遇到很多頭疼的問題，那麼我們一起來分析一下融樂寶品牌APP的logo設計，先看一下對比效果圖。

在原圖中，我們能看到設計者更多的體現了金融的屬性，但是也發現了很多問題。

1）在LOGO設計中，如果品牌名稱與圖形同時出現，會造成一定的重複性，當我們把LOGO進行縮小時，視覺效果很難進行識別。

2）在LOGO設計中，切勿將很多元素與想法都堆積在一起，例如案例中出現的「陰陽」、「錢包」、「銅錢」包括名稱等等，最後造成LOGO的視覺效果不易識別，使用戶不能直觀的進行記憶，降低了對於品牌的印象。

3）在色彩搭配上，圖形與背景的顏色都選擇了暖色，明暗度也過於相近，從而造成視覺效果較弱，試想當該圖標與其他圖標放在一起時，用戶就會下意識的去點擊視覺效果明顯的APP圖標，從而造成點擊率的下降。

所以在改稿的同時，還需要簡化設計思維，所以老王從不同方向進行設計，讓設計竟可能的直觀！

1）第一個LOGO設計運用了銅錢元素，將圓角矩形以最直觀的方式進行展示，並且選擇了螺旋式的表現方法，設計出了一個與眾不同的「銅錢」設計，整體的顏色上使用了紅色與白色進行搭配，而紅色也正是代表金融中「上漲」的含義，更是一種喜慶的表現。

2）第二個方案中，將融樂寶中的「融」字挑選出來，在設計中將「融」字的筆畫進行圖形化，將其設計為錢幣的形狀，使其加深品牌的印象。

案例改稿三

當我們遇到純文字的界面設計時，該如何把控好文字之間的關係呢？先讓我們看一下對比效果圖。

這是一個「協議寶」的子頁面，那麼讓我們先來看看原圖中出現的問題。

1）界面中圖片沒有起到任何作用，所以應該將其刪除。

2）整個頁面的主要內容是以搜索信息為主，所以在設計時應該將「搜索欄」放到主要位置上。

4）模板列表中的頁碼設置看上去更像是網頁端，在APP界面設計中，要更加統一整體的視覺效果。

5）最下方的版權信息過於強調，應該將其弱化。

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

1）將「搜索欄」調整到頁面的最上方，使用戶可以清晰的查找相關內容。

2）將模板內容的文字顏色加深，並設計成按鈕狀，使用戶能夠自主去點擊模板內容。整體背景使用了灰色，將模板類型與下方的模板列表能夠很好的進行區分。

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