歡迎來到上海仝薪網絡科技有限公司官網,上海競價托管公司、上海網站優化公司、微信網站、上海競價托管公司
咨詢,就免費贈送域名與服務器,咨詢熱線:13761675098當前位置: 競價外包 > 建站知識 > 網站建設知識 >
聯系我們
電話咨詢:13761675098
E-mail:[email protected]
地址: 上海市金園一路1118弄

如何用網格系統設計出大師般的APP界面

作者/整理:admin 來源:互聯網 2018-01-19

注:色彩、圖形、排版、網格等是構成系統四大視覺語言的基礎原子單位,今天來說下網格系統在產品設計中的運用及定義方法。

初識網格

Pinterest

就如上圖所示,我們設計產品界面中離不開網格,網格讓界面更加有節奏且信息層級更清晰,使我們能夠舒適的閱讀及很好使用產品。

糟糕的網格系統是無規則,無節奏感可言,給用戶呈現出一種劣質的產品

目前產品界面設計的現狀

大家做平面設計的時候應該聽過 Gird System即網格系統,那么我們在 APP 設計中如何正確使用

看個例子:

左邊和右邊大家覺得那個間距好些?粗看如果不細心的同學看不太出多大的區別,那么我們看下他們的網格是如何的(基于 750 設計)

很多剛入行做設計的同學設計的界面就如同左邊這樣毫無規律可言,甚至有些工作幾年的設計師也會出現同樣的問題,沒有科學的去定義系統間距,導致界面設計品質感低,無規律的去使用間距,如何才能提高產品品質?

如何科學的定義 UI 的中網格系統

定義 UI 網格系統方法很多,如運用 8 點網格系統、斐波那契數列、某最小原子單位的增量、從底層系統參數化定義間距等,本次就講某最小原子單位的增量去定義網格系統

(1) 首先確定基礎間距原子單位,比如這里我定義最小數值為 6,那么以 6 為基準的去延展系統間距,得到如下間距系統

(2)繼續優化梳理間距得到如下,為何要梳理?如果間距多,過于細碎也會導致畫間距比較亂(以 6 為基準,前面個數是后面個數的 2 倍遞增)

(3) 實戰演示

如右圖所示我界面設計中所用到的間距參數都是前期定義好的間距,然后設計時候就使用定義好的間距,不要在隨意的去增加間距,如果間距不夠用,可以在繼續以 6 的增量繼續增加間距,靈活運用即可。

其他組件拓展使用演示

上面的案例加上方法實戰大家都清楚了么,上面案例的間距均來自我前期定義好的,其實很簡單,方法要靈活運用,如果間距不夠可以適當增加的,切記勿亂用間距。

總結

在定義間距過程中需要注意的點:

  1. 最小原子單位并不是隨意定義的,推薦以下;

  2. 間距定義以某一最小原子的增量去定義;

  3. 切記勿亂用間距,間距使用得有規律和節奏。

作者:TONY,UX視覺設計師,喜歡探索一切新鮮事物,愛分享,寫文章。

北京pk10牛牛软件下载 街机电玩捕鱼手机版下载 在家网上赚钱 加拿大快乐8开奖时间 博乐填大坑 期货冠军侯婷婷 欢乐斗牛棋牌游戏下载 哪个投资股票平台好 追光娱乐老版棋牌 大盘股票走势 1分钟一次的极速赛车骗局