• EN
香港:(852)3749 9734
[email protected]

新聞資料

APP設計原則:移動端版面設計需要遵循哪些原則

由於APP版面空間有限,所以移動端的版式設計會比PC端的複雜很多。如何將一個優秀的APP排版設計呈現給大眾,這就需要考慮到用戶的閱讀習慣和設計美觀,以及版面的層級關係和易讀性。那麼,移動端版面設計需要遵循哪些原則呢?

移動端版面設計需要遵循哪些原則?

APP設計原則一:對齊原則

對齊是APP版式設計中最基本也是最重要的原則之一。對齊可以讓APP界面有一個整齊的外觀,同時給用戶帶來一致性且流暢的瀏覽體驗。

APP設計原則:移動端版面設計需要遵循哪些原則

APP設計原則二:對比原則

對比原則主要通過尺寸、色彩、造型等的改造突出界面中的重點元素,從而引起用戶的關注。對比可以使APP設計的層級更加清晰,同時還能聚焦用戶視線,讓用戶的焦點放在我們想讓他們看到的元素。

APP設計原則:移動端版面設計需要遵循哪些原則

APP設計原則三:親密性原則

親密性原則主要是將相關的同類元素靠近,同時遠離不相關的元素。親密可以提高UI設計的可讀性,以及清晰地區分好界面中的各個層級。

APP設計原則:移動端版面設計需要遵循哪些原則

移動端排版設計需要遵循哪些原則?

說完移動端的版面設計,接下來我們一起探討下APP設計的排版布局。通常,排版設計指的是界面中文字上的布局,那麼移動端排版設計需要遵循哪些原則,才能增加界面的易讀性呢?

1.文字設置為左對齊

APP設計原則:移動端版面設計需要遵循哪些原則

由於人類的閱讀習慣都是從上到下,從左到右,因此APP設計時,盡量將文字設置為左對齊,以提高界面的易讀性。

2.僅使用一種字體

APP設計原則:移動端版面設計需要遵循哪些原則

通常優秀的設計師他們進行APP設計時,大多能完美地使用兩種字體。這是由於他們能夠把握和了解所選的字體類型,並保證他們互補。但如果你暫時未能很好地把握這一技能,建議僅適用一種字體,並透過改變字體的屬性分清文字的層級,確保界面簡潔清晰。

3.字重/字號跨度要夠大

APP設計原則:移動端版面設計需要遵循哪些原則

太接近的字體字重和字號難以讓用戶區分出不同層級的文字之間有何區別,因此為了界面形成很好的對比,不同層級的字重和字號難跨度應該相對大些。

4.對齊到一個軸線

APP設計原則:移動端版面設計需要遵循哪些原則

沿着主坐標構建字體排版,並將文字元素對齊到網絡線上。一般來說,界面中所有文字都應在垂直軸上以左對齊設置,而水平軸上,只要找到最佳的水平元素,或對齊大寫字母字高,或對齊文字基線即可。

5.使用條框分類

APP設計原則:移動端版面設計需要遵循哪些原則

使用卡片、線條、留白等獎相關內容信息塊進行分類編組,能使文字內容的層級更加清晰,以及提高界面的易讀性。

6.注意間距

APP設計原則:移動端版面設計需要遵循哪些原則

一般來說,越是間距接近的元素,讀者就會假設在不同的信息塊之間存在這一種關係,所以對於相關度不高的信息塊,留白空間儘可能大或使用分割線、分割塊進行區分。另外,如果文字設置為強制左對齊,那麼右側會出現文字的參差不齊、起伏留白等情況,建議文字設置為兩段對齊。

雖然現在愈來愈多企業選用響應式網頁設計,以便界面能根據用戶行為以及使用的設備環境進行相對應的布局。但畢竟PC端網頁設計和移動端仍有很多不同之處,因此在製作網站的時候,我們應該做好兩者之間的平衡,確保網站能在任何設備環境上都能流暢的操作。