APP設計知識:APP界面的版式排版理論知識

APP設計界面看似由幾個簡單元素組合而成,但如果設計師不考慮信息化規則來設計APP界面,APP設計很容會出現不協調效果。香港網頁集團提醒,懂得APP界面的版式排版理論知識,對設計良好視覺效果很有幫助。

APP界面的版式排版理論知識

知識一:信息的排布

APP設計知識:APP界面的版式排版理論知識
APP設計知識

常見的信息排布主要分為對齊、重複、親密、對比,這四大原則。

對齊:不僅能讓APP外觀更清晰精巧,還方便用戶流暢地接收到設計師想要傳達的重要信息。

重複:能增加界面信息的條理性,還能加強界面元素的統一性,降低用戶認知的難度。

對比:當界面需要突出重點時需要用到對比手法,能讓用戶直觀地感受到界面的重要信息。

親密:界面組織信息可以根據親密性原則,將相關信息靠近歸組,能減少界面信息混亂,為讀者提供清晰的結構。

表達界面信息時,一定要考慮內容的易讀性和設計感,尤其是冗長的文字信息,應該轉換成可視化的表現方式,使內容變得簡明清晰。另外,大多時候圖形能增加界面的易讀性和設計感,而且圖形的理解比文字更高效。

知識二:圖片的使用

APP設計知識:APP界面的版式排版理論知識
APP設計知識

頁面中圖片所佔的比率叫做圖版率,圖版率高會使界面充滿活力,使畫面富有感染力;圖版率低會使界面給人一種寧靜典雅、高級的感覺。選取圖片時,還要考慮元素與界面表達出來的情感有關係,合適圖片能讓整個界面傳達出高級、平民化、友好等不同感覺。

如果界面內容較少,想透過提高圖版率降低界面的空洞感覺,可採用色塊或抽象畫模擬現實存在的物件。

知識三:顏色的使用

APP設計知識:APP界面的版式排版理論知識
APP設計知識

不同的顏色能帶給用戶不同的感覺。與網頁端網頁設計一樣,移動端界面也需要選取主色、標準色和點晴色。

主色:移動端的主色雖然決定界面的風格,但往往不會被大面積使用,而是在導航欄、部分按鈕、圖標、特殊頁面等地方出現,起到點晴定調的作用。一般來說,統一的主色調能讓用戶找到品牌感的歸屬。

標準色:APP設計的色彩規範、確定文本、線段、圖標、背景等等的顏色。

點晴色:通常會用在標題文本、按鈕、圖標等地方,通常起到強調和引導閱讀的作用。

在顏色選擇上,主色的選擇可能不止一個,點晴色也可能由兩三個顏色組成,標準色更是一套從強到弱的標準群。

知識四:留白的藝術

APP設計知識:APP界面的版式排版理論知識
APP設計知識

不僅是文字和圖片需要設計,留白同樣是構成頁面排版必不可少的因素。留白不是毫無目的的,而是帶着以下幾種目的來控制頁面的空間構成:

1.通過留白來減輕頁面帶給用戶的負擔。

2.通過留白區分元素的存在,弱化元素與元素之間的阻隔。

3.通過留白有目的的突出表達的重點。

4.留白賦予頁面構成產生不同的變化。

留白可以賦予頁面輕重緩急的變化,也可以營造出不同的視覺氛圍,利用留白改變界面版式,再配合四大布局原則,能讓界面產生出不同的效果。不過值得注意的是,留白不是單純用白色填充界面,而是營造出空間與距離感覺,自然與舒適的境界。

知識五:視覺心理的靈活運用

APP設計知識:APP界面的版式排版理論知識
APP設計知識

觀看事物時,往往會產生不同的視覺心理,例如兩個相等面積的正方形和遠行放在一起,會誤以為正方形面積更大。版式設計同樣可運用這些科學視覺方法對用戶進行視覺上的引導,也能讓設計師快速找到合適的排版布局方法。如:

①靈活運用黃金分割比,文本與線段的間隔,圖片的長寬比等,都可以通過黃金分割比快速的設定。

②界面排布中,圓角和圓形比直角更容易讓人接受且更親切。而直角通常用在需要更全面展示的地方。

③全局頁面排版時避免單調,增加節奏感,要有輕重緩急之分。

④圖片需要不同色調,可透過蒙版方法控制。一般明亮色調能減輕對用戶壓迫感,而暗沉色調可以讓畫面更沉穩,內容顯示更清晰。

最後,雖然說每個元素都有它存在的理由,但同時它的存在會讓用戶弱化對主體的認知。因此,在APP設計時,不必過分追求形式,相反適合自己的界面的排版布局,才是最好的。