文章出處：詳解APP設計中的微妙細節
聯絡方式：549044363@qq.com
膜拜大神：黑馬青年
學習者：Ajiajiajia葭
還是我，i++。在出UI的過程中，發現了APP設計中的微妙細節，這也是繼《UI小白入門論》後，我最最最最最想出的一篇關於UI方面的文章，然而，真的真的沒有這篇完美，所以就直接把這篇文章推薦了，後來在致設計網找了作者“黑馬青年”的相關內容，推薦大家一起去關注大神，一起學習。 （文章是在公眾號“學UI網”見到的，私聊小編後，已經同意）
視覺表現型問題
01 統一的圖示設計風格
- 圖示設計在整個APP設計中是比重較大的板塊之一，圖示設計風格有：線性圖示、填充圖示、面型圖示、扁平圖示、手繪風格圖示和擬物圖示等。無論我們選擇何種表現形式的圖示都請保持統一性，相同的模組採用一種風格的表現形式，如果是線性圖示就保持一致的描邊數值。
- 圖示在配色上面也要保持有規律的統一，採用相同顏色是比較常用的配色方式。如果你採用不同色相的配色方式，要保持整體的配色協調，不要出現飽和度、明度反差過大的配色而影響整體的視覺協調。
（之前我的icon幾乎是五顏六色，現在想想，略俗）
02 圖示大小的視覺平衡
- 同一個介面出現多個圖示時，我們需要保持整體的視覺平衡。並非是所有圖示都採用相同的尺寸就能達到平衡，由於圖示的體量不同，相同尺寸下不同體量的圖示視覺平衡也不相同，例如相同尺寸的正方形會比圓形顯得大。因此，我們需要根據圖示的體量對其大小做出相應的調整。
（新增一點：還有圖示線條的粗細問題，切記部分粗部分細，需要統一化標準）
03 優化你的分割線
- 介面設計中往往細節的處理最容易被忽略，根據介面配色的不同，我們在分割線色彩的選擇上面也要做出相應的調整。由於分割線的作用是區分上下資訊層級和介面裝飾，配色的表現力要低於文字資訊的力度，通常我們會選擇淺色而否定深色，這樣介面會更加簡潔通透。深色的分割線要慎用，除非在一些特定的產品場景下。
04 合理的運用投影的顏色與透明度
- 通過對按鈕、卡片等進行投影運用可以增強立體感與層次感。我們在製作投影時，需要根據不同背景改變投影的顏色、透明度。
- 淺色背景下投影的顏色會選擇拾色器偏左上角的位置和透明度在10%~40%（個人經驗）之間進行調整。深色背景下投影的顏色會選擇拾色器偏右下角的位置和透明度在20%~40%（個人經驗）之間進行調整。
- 投影的權重要符合頁面設計的氛圍，投影的運用是為了增強元素的立體感與層次感，而不是影響整個頁面的視覺平衡。
（之前真的以為加shadows就行，但實際上並不是）
05 不要過度裝飾，讓介面更簡潔
- 設計需要準確的把握“度”，過度的設計會干擾資訊的傳達。減少不必要的設計元素，讓資訊脫引而出，整個介面將會更加簡潔清爽，也不會分散使用者的注意力
（越簡潔越大氣）
06 圖片比例&視平線的統一性
- 在人物展示的設計中，如果並列出現多個人物形象，為了保持視覺平衡我們需要調整並列圖片的大小比例，就像所有角色都是在相同焦距下拍攝的。在人物上下位置的調整上面我們要儘量控制視平線的方向，讓他們的眼睛處於相同的位置左右。
07 控制好介面中的配色數量
- 一個介面中出現3種左右的配色是相對比較容易把控的，如果超過3種以上的配色，是非常考驗設計師功底的，如果顏色的處理不到位就會出現五彩斑斕的“視覺盛宴”
- 在選擇配色組合時，使用相似色的配色方案可以使顏色更加協調和交融；如果希望更鮮明地突出某些元素，對比色是不錯的選擇。無論選擇何種配色方案，都要控制好介面中的配色比重，使資訊傳達不受干擾
08 合理的進行設計對比
- 通過對比可以讓資訊模組更加獨立，介面層級關係更加豐富。案例中以不同的背景顏色區分不同的資訊模組，提升了整個介面的節奏感。顏色的選擇可以是同色系中不同明度的梯度表現，也可以選擇不同色相的穿插搭配。
09 提高配圖的質量
- 圖片的質量影響著整個介面的格調，現在越來越多的產品都會對圖片進行美化後再展現給使用者，目的就是為了提升產品在使用者心中的印象。我們在設計提案的時候對配圖的選擇也要精挑細選，通過後期裁剪、曲線調整、色彩調整等技法使相同模組的配圖視覺效果更加協調。
10 明確表達圖示的含義
- 去掉圖示文案之後介面會顯得更“逼格”，可是你確定使用者能看懂圖示表達的含義嗎？我們在進行介面設計時，圖示是為了輔助說明文案所傳達的資訊，如果去掉文案資訊，那麼需要圖示本身帶有很強的資訊傳達能力，確保使用者能正確的識別。
11 正確的表達按鈕屬性
- 按鈕的設計必須要清晰準確的傳達出當前狀態，不能為了視覺效果而帶給使用者錯誤的判斷，例如深灰色的按鈕使用者會理解為是禁用狀態而放棄點選。
- 通過按鈕的顏色、大小、風格等來引導使用者進行操作，需要強化的就要做得突出，不要整個介面都處於主次不明的狀態，分散使用者的注意力，削弱了介面需要傳達的主旨。
12 正確處理文字排版的層級關係
- 工作中我們拿到的需求總會出現大篇幅的文案，不能像概念設計那樣任性的刪減，在進行文字排版的時候，正確的處理資訊之間的層級關係將會提高使用者對資訊的識別度。我們通常會通過字型大小、顏色、留白、層級分割等技巧來處理，把相同屬性的資訊歸類設計，通過留白的不同達到層級的區分，讓整個資訊排列主次分明，層級清晰。
13 線條與色塊分割的合理運用
- 線條通常用於分割同一類別或擁有相同屬性的元素；而色塊更多的是用於分割不同類別或者區分不同屬性的元素，以達到層次清晰，歸類明確的目的。我們在選擇分割形式的時候要根據資訊之間的關係作出明確的表達，不可為了視覺效果而盲目的穿插運用。
14 要提前預估資訊呈現的最大值
- 在進行介面佈局時，明確資訊呈現的最大值，而不是取最小值進行設計。過於理想的長度範圍也許介面樣式更美觀，可是落地之後就會給使用者帶來非常糟糕的體驗。
15 運用提示符提高使用者的閱讀效率
- 在大篇幅的文字資訊佈局中，合理的運用提示符會提高使用者對資訊的理解和快速找到需要的資訊。提示符可以是數字、字母、圖形、色塊等等，只要能有效的區分資訊層級即可。
16 佈局層次分明，重點突出
- 好的介面佈局是為了更好的引導使用者閱讀和操作，介面佈局要有層次和重點，而非簡單的將資訊進行羅列。通過卡片模組的區分和大小的變化可以很好的進行視覺引導，大大提高使用者對介面的理解，從而提高使用者的操作效率。
17 資訊佈局符合閱讀習慣
- 從左到右，從上到下的進行閱讀是我們已有的習慣，如果你要打破這個習慣進行視覺表現，會承受挑戰使用者體驗的強大壓力。
概念表達型問題
18 相同介面下圓角&直角的統一性
- 在同一個介面設計中，圓角&直角的選擇要更加統一的出現在介面中，不要出現混合運用造成視覺表達不一致。如果選擇圓角作為視覺語言，統一相同模組下圓角的大小，不可出現大小不一致的情況，讓整個介面設計的視覺語言更加規範統一。
19 設計元素的表達符合使用者心理
- 設計是為了更好的幫助使用者理解介面的操作邏輯，如果你的設計改變了使用者的心理與習慣，可能會增加使用者的學習成本或者被使用者拋棄。我們在進行介面設計的時候，如果要設計一些創新的操作規則，需要做更多的調研和測試，確保這個規則符合使用者的心理。
設計表達的一致性
20 關於使用者的理解
- 相同的資訊模組採用統一的設計表達，不要為了變化而加強使用者的理解。前後資訊設計的多樣性也許在視覺上面更加豐富，可是使用者會理解為這是兩個不同的模組，操作會不會也不同，無形中就增加了使用者的思考時間和學習成本。
21 別把網頁的習慣帶到APP設計中
- 網頁與APP的設計在本質上面有很多不同的視覺表現規則，我們在設計APP介面的時候要脫離網頁的一些互動習慣，迴歸到移動使用者的習慣中，讓介面的操作邏輯更加順暢。
（確實，產品經理給出右側的原型圖，需要UI優化）
22 讓表單設計更簡潔
- 表單設計在介面中隨處可見，看到一望無際的表單使用者總是望而卻步。為了緩解使用者的這種心理活動，我們設計的時候通常會通過合併歸納相同屬性的表單，採用逐步填寫來讓使用者感覺內容很少，通過這樣的視錯覺讓使用者完成表單的填寫。
（使用者體驗！！再看到這篇文章之前的一刻，我出的介面還是右邊的那種，尷尬.....）
23 空介面中插畫的運用
- 為了提高APP的情感化設計，插畫的運用也開始越來越普遍。在空介面的一些設計中也由以前的純文字轉變為一些應景的插畫表現，帶給使用者更多的愉悅感。
24 運用真實的資訊填充你的設計
- 經常看到一些設計稿整個介面都是一樣的配圖，胡亂輸入的文案，看起來顯得非常的不專業。為了降低視覺落地的差值，我們在設計的時候儘量運用真實有效的資訊去填充我們的設計稿，在提案的時候才能給決策者一個還原真實場景的有效方案。