UI界面設計常見的排版方法

UI界面設計常見的排版方法

接下來為大家介紹一下本篇內容,通過UI的頁面排版佈局,進行系統的頁面設計,本片章通過keep、喜瑪拉稀、京東、比心等多個app系統的闡述UI等距柵格排版的優勢。

最後再說一句勿忘初心,方得始終,祝大家2021越來越好。

1.1什麼是柵格系統?

網格系統可以讓你依靠秩序與邏輯去完成設計。

早在20世紀初,德國、荷蘭、瑞士等國的平面設計師們發現通過維持視覺秩序,從而使版面能更加清晰有效地傳遞信息,二戰後這種理念在瑞士得到了良好的發展,直到20世紀40年代後期,第一次出現了使用網格進行輔助設計的印刷作品。

1.2柵格系統的優勢

柵格系統在頁面排版佈局、尺寸設定方面給了設計者直觀的參考,它讓頁面設計變得有規律,從而減少了設計決策成本。

UI設計也是需要理性的、客觀的、具有數學邏輯美感的。熟練運用網格系統能夠讓你的設計更有秩序和節奏感,頁面信息的展現更加清晰,提高閱讀效率,從而提供給用戶舒適的使用體驗。

當多位設計師共同設計產品時,一個統一標準就變得尤為重要。如果沒有一個統一的框架去約束的話,我們的產品的頁面和組件的標準可能各式各樣,這樣的話整個產品的頁面都會比較混亂。因此,網格系統有助於將界面設計工作分開,因為多位設計師可以在統一的佈局下進行不同部分工作,並且無縫集成並保持連貫。

1.3 App中重要的網格系統

網格系統利用水平與垂直的參考線,將完整頁面的版心劃分成若干大小一致的格子,所有元素都在版心內編排,再通過這些規律性的格子作為參考來構建有序的版面。

在app設計中,被到導航欄、標籤欄和左右邊距包裹的區域為設計區,所有元素都應在設計區排版佈局。但並不是不可超越左右邊距,在一些特定的環境下也可以使用邊距空間。

柵格系統就是利用均分的垂直和水平線,將頁面分割成若干有秩序的格子,按照這些分割好的格子去安排頁面的設計元素,控制元素之間的節奏關係。

柵格系統大的層面可以幫助設計者更好的進行版式設計與內容佈局,而小的方面可以輔助設計師規範頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講,這兩者同等重要,從執行層面來講,我們一般先做版式設計與佈局然後再填充內容、調整細節。

2.1什麼叫單位的網格

由於列跟水槽的寬度是以網格作為基本單位來增加或者減小,所以柵格化的重要一步就是需要先定義好柵格的原子單位“網格”的大小。

我們也可以利用相同網格法來製定產品中的間距,建立相同的間距為一個單位的網格,使用單位的倍數來定義模塊的間距與元素的尺寸。

2.2網格的應用標準

App通常不會超過6列,以750*1624為例,如果邊距為40、間距為20,劃分成6列,則每列為95,較ios最小點擊範圍(88px)大一點,如果劃分為7列,則每列為78,這麼小的尺寸將會影響用戶的點擊操作。

2.3.八倍間距的應用

目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被8整除,使用8作為最小原子足夠普適。可以確保不同佈局之間的視覺一致性,同時可以靈活的適配多種尺寸的設計。以8為單位符合“偶數原則”。偶數原則可以在頁面縮放中最大程度的避免類似於0.5、0.75、1.25等次像素的出現,從而使頁面各類元素在大多數場景下都能有比較精緻的細節表現。

在網格系統中應該更加註重的是間距,而間距要遵循網格系統(例如使用4、8、16、24、32 等和8 具有規律的數字)同時在產品中的各類元素也要遵循這類原則(例如圖標大小、組件大小等)。所以佈局的水平和垂直節奏和各個組件的節奏會相互重疊,整體的設計將更加完整。

那麼假設我們以8為基準的去延展系統間距,得到如下間距系統:

8、16、24、32、40、48、56、64、72、80、88、96、192等,這裡都是8的倍數或能被 8 整除。

開發工程師使用的前端開源組件庫比如Metronic、Antdesign等也是基於8的原子單位來設計,因此如果設計師也使用以8為基本單位的柵格系統,開發與設計師相互對接就會更加方便,開發實現頁面時也能更高品質的去還原我們的設計。

2.4十倍間距的應用


如果定義10為最小單位,那麼以10為基準去延展系統間距,得到一組數字是10、20、30、40、50、60、….120、130等。

比心app挑選20作為列間距,挑選20作為全局邊距,這些將滿足整個app的設計需求,相同的邊距會讓整個app顯得整齊一致,緊湊的節奏感使得整個頁面充滿了活力與動感。

keep app挑選挑選30作為全局邊距,大邊距長留白,上方金剛區間距90,下間距110 ,圖片間距10留出大面積空白。大量的留白和簡單的比例讓整個界面充滿了清新的文藝氣息。簡單佈局,充滿呼吸的節奏感,能讓用戶在體驗運動的同時,又有呼吸流暢的感覺,具有極佳的用戶體驗感。

2.5四倍間距的應用

如最小的單位是4,那麼較為合適的間距有16、20、24、30、36;我們還可以通過列間距反推全局邊距的尺寸,全局邊距大於列間距畫面會更加聚焦在屏幕中間,反之,畫面就會跑向屏幕邊緣。

3.1什麼是廣進分割比

有人曾經問過我黃金分割比是否能在ui的界面設計中的得到應用,其實黃金分割比在建築、電器、logo 設計和攝影等領域都有著舉足輕重的作用,但是這種方法在UI 設計中卻不是那麼流行,因為它看起來太難了,但在國外的軟件設計已經開始有了很好的應用。

這是一個十分有趣的數字,我們以0.618來近似,通過簡單的計算就可以發現:

0.618/1=0.618

(1-0.618)/0.618=0.618

3.2 keep中的黃金分割比


以app界面尺寸750*1624為例子, 750*0.618=464、 1624*0.618=1004 ,以這兩個尺寸為線拉長延伸,以keep app為例,可以清楚的發現首頁的功能區第二、第三的圖標正好在黃金分割比上,整體分佈顯得清晰明確複合左右最佳分割比例.

將頁面的黃金分割比連線將整個界面清晰分為3層9個部分,再將單手操作熱區圖片與9宮格結合後.清晰的發現keep的主要操作與視覺位置主要體現在中間三個區域與下方前兩個區域.

通過上圖就會清晰的發現keep首頁整體佈局的合理性與用戶體驗的舒適度.

參考文獻:

https://zhuanlan.zhihu.com/p/25210675

http://www.woshipm.com/pd/1632732

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。