詳解APP界面設計中的微妙細節

文章出處：詳解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 運用真實的信息填充你的設計

• 常常看到一些設計稿整個界面都是同樣的配圖，胡亂輸入的文案，看起來顯得很是的不專業。爲了下降視覺落地的差值，咱們在設計的時候儘可能運用真實有效的信息去填充咱們的設計稿，在提案的時候才能給決策者一個還原真實場景的有效方案。

「細節之處，方顯匠心」 加油。