怎樣提升手機介面UI設計的能力？
怎樣提升手機介面UI設計的能力？
怎樣提升手機介面UI設計的能力？
現在我來點乾貨吧，其實在日常介面設計的時候應該多分析思考，然後嘗試去總結出一套以後自己可複用的設計方法，以提升未來設計的精準度和效率。
在這裡就給大家講講我平時是怎麼思考和設計介面。我將 APP 拆成顏色，文字，圖示，配圖四個方面進行分析。
你將會是一名專業的UI設計師嗎？30秒準確測試會告訴你：
ofollow,noindex">http://m.tianhujy.com/zycsym2.html?wm=lt_hwj_uizg_c14
（如果無法跳轉請複製在瀏覽器中開啟噢）
顏色：調性一致
一個 APP 給使用者留下最深印象的往往是介面的顏色，例如淘寶、支付寶，你可能想不起來首頁是什麼樣子的，底部標籤欄是什麼圖示，但是馬上能記起淘寶是橙色的，支付寶是藍色的。 
人腦對於色彩的記憶度要高於形態，所以在介面設計中首先就是要運用好顏色，才能幫助使用者更好的記憶。
在設計介面的時候，我會先分析顏色，以猩便利 APP為例：
1.找準品牌色/輔助色
看到介面以後先思考，猩便利的品牌色是什麼，品牌色通常是指在介面中佔比例最多的顏色或者logo 的顏色，由此推斷猩便利的品牌色是黃色+黑色，輔助色是橙色。
2.分析行業屬性、同類競品
接下來思考為什麼猩便利要使用黃色+黑色作為品牌色？要從行業屬性分析，猩便利是一家以線上+線下方式售賣食品的快消品平臺。大多數的美食類，外賣類 APP 以暖色系為主，遵循色彩心理學，因為暖色系會刺激食慾，給以使用者舒適，美好的感覺。在瞭解行業屬性之後，以後設計這類介面的時候，就可以使用暖色調的色彩。
3.強化色彩能力
然後回到介面上，大多數初級設計師在設計介面選擇顏色的時候，通常會直接吸取原圖上的色彩。其實這樣的方式不正確的，無法提升對於色彩的把控。
我在選取顏色的時候先看一眼原圖，然後遮住，通過瞬間記憶能力除錯。剛開始的時候需要多次校對來確認顏色，後面會越來越精準。之後眼睛看到的顏色，就能通過拾色器精準選出。、
4.學習色彩運用
初級設計師在運用品牌色時，常會有一個問題，就是在所有元素上都使用品牌色，會導致面中因為過多主色而造成的視覺疲勞。
然而優秀的介面色彩遵循60-30-10原則，60%的品牌色、30%輔助色和10%點綴色，這樣使介面有所區分，主次明確。
我在運用色彩的過程中，會觀察60-30-10的使用場景在哪裡，一般60%品牌色運用在導航欄、按鈕、圖示、標題等關鍵元素中，30%橙色輔助色運用在標籤上，10%的藍色綠色則運用在小入口上面。
文字：層級分明
大標題正逐漸成為一種流行趨勢，相比小標題，它更加醒目直觀，吸引使用者的注意力，所以在很多設計中，大標題也成為一種設計風格。
在設計介面的時候，我第二步會分析文字：
1.理清文字間的層級
大標題風格，並不是說文字越大越好，越有辨識度。只是建議用加大標題字號的形式來區分頁面的層級，幫助使用者尋找。
在設計的過程中，我會思考為什麼介面中使用了多種大小的文字？是什麼決定了文字大小？
試著從資訊的重要性入手，進入這個頁面後，首先看到“歡迎光臨行猩便利”，然後“晚間小食”，最後才是“優惠價”和“商品庫”。
這個順序符合了日常的購買流程，進門-挑選-領取優惠券-購買，流程決定了資訊重要性，決定了文字大小。
2.歸納常用字號以及場景
然後回到介面上，分析文字的時候也不是單純找準字號，因為字號很輕易就可以知道。
我會在設計分析中總結，不同的資訊層級之間怎樣體現對比、強調，例如猩便利 APP ，主標題使用48號字，類目標題40號字，小標題32號字，輔助副標題24號。
分析設計過多套 APP 之後才可以得出一套常用字號和使用場景，比如主標題大致在什麼字號範圍，資訊層級區別需要字型相差多少字號等等......。
圖示：風格統一
圖示是 APP 設計中必不可少的基礎元素，圖示需先確保滿足基礎功能性和識別性。
在滿足以上兩點之後，圖示設計時還應融入設計特點，同時保持風格統一，營造良好的使用者視覺感受。
在設計的時候，我第三步會分析圖示:
1.分析圖示形式
看到圖示的時候，通常會先判斷圖示是什麼型別，很明顯猩便利的標籤欄採用的是線性圖示，同時採用了品牌黑色。
試著分析一下介面，其實圖示的型別是由使用場景決定的，就以猩便利的標籤欄為例，色塊突出了中間的“掃碼購”的功能，如果兩邊的“購物車”和“付款碼”圖示使用面型圖示，衝擊力過強，容易吸引使用者注意力，干擾使用者選擇。
又因為“購物車”和“付款碼”圖示點選之後不是選中狀態，而是跳轉效果，無需通過面型點亮增強選中效果，不合適使用線性+面型圖示。
2.學習圖示繪製
除了上面提到的圖示形式可以展現 APP 特性，設計特點突出，風格統一的圖示也可以獲得使用者的青睞和關注。
所以設計分析的時候試著總結設計特點，猩便利的標籤欄圖示就採用了斷線，小圓角，4px描邊的形式，精簡幹練，能確保資訊的傳遞。
當學習多種圖示特點之後，我們可以自由組合，根據產品調性，設計出符合的圖示。
配圖：品質感
我們在逛淘寶和天貓的時候，明顯感覺到天貓是偏高階消費人群，而淘寶則是針對普通消費人群。這裡我們要說的就是圖片的品質感，品質感帶給我們不同的使用者體驗，視覺感受。
精緻的配圖能給介面加分，而質量不佳的圖片會拉低產品的氣質，人靠衣裝馬靠鞍，大概就是這個道理。
1.分析配圖方式
配圖可以分成兩種，一種是插畫型別，一種是圖片型別。我們可以看到猩便利在配圖的選擇上也使用了兩種方式，設計的時候就要思考為什麼不同？
試著分析一下介面，使用插畫型別的地方是三個入口和一個選擇頁面，它們的特徵都是不跟隨業務、商品進行更改的，這種型別的配圖統一性高，視覺表現力更強。
而使用圖片型別的情況，一般是具體商品，需要根據運營配置，市場供需做出調整。圖片的使用也更直接的能讓使用者感知真實的消費體驗和刺激使用者下單心理。
2.學會圖片優化
品質感的體現並不一定只有拍攝的時候才能調整，很多圖片還是需要後期經過設計師才能煥發新生。在使用配圖時，我們就需要總結，品質感的圖片都有一些什麼特點。其實發現並不是特別難，只有我們將圖片扣圖之後調整成統一大小，再加上乾淨的背景，就能起到立竿見影的效果。
總結
想要完成一個 APP 的介面設計，需要進行多方面的分析，最後總結出一套以後可複用的設計方法，以提升未來設計的精準度和效率。
顏色：找準APP 的品牌色、輔助色，分析色彩選擇的意圖。同時鍛鍊調準色的能力，並能根據60-30-10原則，使介面主次分明，和諧統一。
字型：列出介面中不同資訊的字型字號，以及不同的使用場景，多次嘗試之後，總結出自己的一套規範，比如主標題大致在什麼字號範圍，資訊層級區別需要字型相差多少字號等等。
圖示：找出頁面中圖示的型別，並嘗試分析其他型別不合適的原因。同時提煉圖示之間的共性，例如圓角、粗細、斷線，有利於增強介面統一性。
配圖：分析頁面不同場景下配圖方式的不同，學會簡單的圖片處理方式，將圖片扣圖之後調整成統一大小，再加上乾淨的背景，就能起到立竿見影的效果。
你將會是一名專業的UI設計師嗎？30秒準確測試會告訴你：
http://m.tianhujy.com/zycsym2.html?wm=lt_hwj_uizg_c14
（如果無法跳轉請複製在瀏覽器中開啟噢）