當我們打開一個APP時,合理的圖片運用、清晰的信息層級,以及舒適配色方案等,都會直接影響用戶對APP的整體感官體驗。下面,小編將通過圖片、文字、色彩、圖標,以及留白這五個問題來解剖APP設計中的微妙細節,讓整個APP的視覺層面變得更加精緻!
APP設計技巧:掌握這些APP設計細節,讓你的APP變得更加精緻
APP設計細節一:圖片,如同一個人的衣着品味
圖片的定位就如同一個人的衣着品味,不同展現方式和質量都會使用戶對APP的感官體驗有着不同的評價並打上不同屬性的標籤。
圖片在APP設計中需注意的關鍵點:
❶ 圖片比例
不同比例的圖片所傳達的信息效果有不盡相同,為此我們需要根據APP屬性,選擇與之相符的圖片比例,對整體框架進行佈局。常見的圖片比例方式主要有:1:1比例、4:3比例、16:9比例,以及X:≤Y比例。
❷ 圖片比例的一致性
確定好合適的圖片比例後,就需要針對APP整體佈局和圖片分佈的情況,規範出可以採用相同圖片比例的佈局。一般情況,為確保介面視覺表達的一致性,以及給後期運營維護帶來便利,相同主體在不同頁面中建議採用相同圖片比例。
❸ 提高圖片質量
雖然高質量圖片對提升APP氣質和樹立品牌形象都非常重要,但我們不能為了視覺效果而選擇與APP主題無關的配體,這會很容易給用戶帶來一種誤導。
APP設計細節二:文字,直接點明重點在這裏
不管是中文還是英文,文字不僅是傳達信息的載體,也是設計中的重要元素。設計過程中,盡量保證文字的閱讀性,幫助用戶快速獲取信息,提供用戶對產品的操作效率。
文字在APP設計中需注意的關鍵點:
❶ 對文字信息層級區分
文字信息層級可以簡單劃分為重要信息、次要信息、輔助信息等。進行文字排版時,對信息層級進行有效區分,能讓用戶快速獲取和理解信息傳達的內容,提高用戶對產品的整體體驗。
在對文字進行視覺表現時,可通過對字體大小、顏色、留白、層級劃分等處理,把相同屬性的信息歸類設計,讓整個信息排列主次分明,層級清晰。但為了達到整體介面的視覺平衡,應避免過度運用文字樣式去突出介面的文字信息。
❷ 預估好信息呈現的最大值
進行UI設計時,我們很容易會忽略文字信息的最大值,而是按照自己的習慣進行「完美」佈局,最終進入測試環節時才發現真實的內容信息比預期字數要多得多,即使盡早採取返工手段,也會給整體產品開發進度帶來風險。
因此,我們需要預估好信息呈現的最大值,這樣才會在執行過程中避免遇到更多不可控的風險。
❸ 善用利用提示符進行設計
在一些會出現大篇幅文字信息的UI設計中,為了提高用戶對信息的獲取效率,會根據整體視覺效果選擇合適的提示符進行設計,一方面有助於對信息的樹立與不均,另一方面能為整個產品環節中樹立專業性。
提示符的設計表現形式可以是數字、字母、圖形、色塊等,只要能有效區分信息層級即可。
APP設計細節三:色彩,給人最直觀的感受
色彩給人的感受是最直觀的,不同配色方案所傳達的情感也各不相同。就重要性而言,色彩在APP設計中所扮演的角色僅次於功能,它可以幫助用戶查看和理解APP的內容,與正確元素互動並了解操作。
色彩在APP設計中需注意的關鍵點:
❶ 了解60-30-10原則
為了使構圖達到平衡,顏色應以60%-30%-10%的比例組合,即最大比例應該是主色調、其次是輔助色佔介面的三分之一,最後點綴色佔介面中剩餘的10%。這樣的比例被認為是可以令人愉悅,因為它能使用戶逐漸感知所有視覺元素,同時不會讓介面看起來混亂。
❷ 巧用色彩對比
色彩對比是任何視覺構圖的關鍵部分,它為每個UI元素帶來獨立性,並使所用元素都引人注目。一般來說,明暗度不同但色系相同的配色方案,很難吸引用戶的注意,同時還會降低介面的易讀性。
考慮介面的色彩對比,我們需要控制對比度的等級,例如如果你需要用戶特別注意特定元素,可使用高對比度色彩搭配。但從UI整體結構而言,對比過於強烈的配色方案,同樣會降低介面的易讀性,建議選擇一個溫和對比度等級並應用高對比度顏色來突出重要元素。
❸ 運用色彩心理
每種顏色能向我們傳遞不同的情感,正確運用色彩心理可以幫助我們向用戶傳遞正確的信息並引導用戶做出正確的操作。另外,視覺感受對每個人而言都是獨一無二的,同時年齡和性別等因素對色彩偏好也有很大影響,因此了解目標受眾特徵選擇色彩至關重要。
❹ 努力使顏色調和
色彩調和有助於APP獲得用戶良好的第一印象。色彩調和是指介面色彩統一、協調,能讓用戶感到愉悅和舒適。在色彩搭配中,色彩調和是引起用戶感知中最有吸引力和最有效的方式。
整理基於色彩調和的搭配方案:
單色:基於一種顏色進行各種色調和明暗調整
相近色:在色輪上選取彼此相鄰的顏色
互補色:在輪上彼此相對放置的顏色混合,能產生高對比度
互補色分割:與互補色方案類似,但它採用更多色彩,如你選擇藍色,則需要取兩個與之互補色相鄰的顏色,即黃色和紅色。
三位一體:基於色輪上等距的三種不同顏色
四聯/雙互補色:採用色輪上四種互補配對的顏色,如果連接所選顏色的點能形成一個矩形。
APP設計細節四:圖標,APP設計中的點睛之筆
圖標是APP設計中的點睛之筆,既能輔助文字信息的表達,也能作為信息載體被高效的識別。另外,圖標也有一定的介面裝飾作用,能提高介面整體的美觀性。
圖標在APP設計中需注意的關鍵點:
❶ 規範設計
圖標設計風格有線性圖標、填充圖標、扁平圖標、手繪風格圖標和擬物圖標等,無論選擇哪種圖標表現形式,都需要保持APP風格的統一性。另外,由於圖標的體量不同,相同尺寸下不同體量的圖標,視覺平衡也不盡相同,比如同等尺寸的正方形會比圓形顯大,因此我們需要根據圖標體量進行相應的調整。
建議可限制定一套標準規範進行圖標設計,並在該標準設計的基礎上發揮創意,既不用擔心圖標設計過於死板,同時總體本質也符合設計規範。
❷ 融入品牌基因
近年圖標設計差異化逐漸變得模糊,很多品牌開始根據自身品牌基因,進行圖標定製化。融入品牌基因的圖標設計具有很強的品牌識別性,不僅可以形成獨有的視覺差異化,也可增強用戶對產品的記憶。
APP設計細節五:留白,給予介面足夠的呼吸感
適當的留白可以讓介面變得更加有靈性,相比擁擠信息的佈局,給信息之間預留更多的空間,能給介面足夠的呼吸感,以及更好的表達信息之間的層次感。
提高APP設計作品質量的方式有很多,上述只是當中冰山一角。在實際操作中,關於APP設計的細節,我們要注意的地方也有很多,但只要重視這些細節,你的產品將會變得更加精緻以及流暢。