iOS與Android設計規范解析(一)

12天前發布

原創文章 / UI / 觀點
UX設計筆記 原創,如需商業用途或轉載請與UX設計筆記聯系,謝謝配合。

基于兩個平臺的用戶一致性的體驗、以及節省UI設計和研發成本的考量,整理了兩個平臺設計規范差異和共融之處。

對于如何設計一款學習成本低、辨識度高、有個性的APP,iOS和Android均給出了對應的建議,就是《iOS設計規范》和《Material Design設計規范》。


規范中對導航、手勢、通知、控件等方面都做了描述,并給出了相應的建議和檢查清單。實際工作中,當然并不是一定要按照規范中描述進行APP設計,然而依然可以使用上述規范作為我們設計的參照,盡量避免一些明顯的問題。


基于兩個平臺的用戶一致性的體驗、以及節省UI設計和研發成本的考量,整理了兩個平臺設計規范差異和共融之處。



設計語言不一樣


iOS/Flat Design視覺效果

iOS/Flat Design是手機界面設計的里程碑

化繁為簡,其核心思想就是讓“信息”本身凸顯出來,在設計元素上則強調了抽象、極簡和符號化。


Andorid/Material Design視覺效果

核心思想是“數字紙墨”的空間,層級層次分明。

離用戶最近的材料,投影最大,色彩越鮮明,越推薦用戶使用


Meterial Design(材料設計)賦予UI設計新的方向

“Z軸概念”陰影大小直接體現了材料之間的距離

 


動畫原理

動畫設計原理不同(1)

動效不僅僅是為了視覺效果上的酷炫,更是幫助用戶,

更好的理解層級、轉場關系和關注到終點信息的利器


動畫設計原理不同(2)

近實遠虛,對焦物體清晰,背景模糊—?斯模糊

近大遠小,全景&特寫,長焦&短焦


Android還原機械物理運動

Meterial Design的隱喻是紙張,用戶的手指就像磁鐵一樣把電子紙墨吸引過來;點擊后就會泛起“漣漪”作為一個交互相應,離用戶手指越近的元素越亮,陰影越深。


動畫接近真實

物理世界中的運動和變化都是有加速和減速過程的,忽然開始、忽然停止的勻速動畫顯得機械而不真實


完整規范

Android Material Design

https://material.io/collections/get-started/


iOS Design

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/



單位尺寸


單位尺寸不一樣

PPI是什么?

PPI(pixels per inch),即像素密度

這項指標是連接數字世界與物理世界的橋梁


pixels per inch,準確的說是每英寸的長度上 排列的像素點的數量。

iPhone 3gs的屏幕像素是320x480 iPhone 4s的屏幕像素是640x960 剛好兩倍,然而兩款手機都是3.5英寸的。


Pt、dp、sp是什么?

iOS的開發單位

Pt(“points”的縮寫,點)1pt=1/72英寸

Android的開發單位

dp(density-independent pixel) 即“密度無關像素”

Android的字體單位

sp(scale-independent pixel) 即“獨立比例像素”,主要用作字體的單位


設計稿尺寸

使用設計工具Sketch

完整的設備尺寸,以pt、dp為單位的矢量工具




矢量圖形,輸出方便,一鍵輸出切圖資源

強大的sketch插件—藍湖

切圖和標注統一在sketch上解決完后,在藍湖直接獲取資源

https://lanhuapp.com/



字體規范


關于字號/字高的知識點


段落

布局原理


觸摸點擊區域

Android

最小觸摸區域 48x48 dp

最小點擊區域 24x24 dp

iOS

最小觸摸區域 44x44 pt


頁面基礎布局

iOS(pt)

size:375x667

status:20


Android(dp)

size:360x640

status:24

undefined


Android的8dp網格基線

組件等獨立容器使用8dp網格基線,組件容器內小元素可使用4dp網格基線


Android尺寸的增量值

以 8dp/pt 為參數增量值,間距可使用4dp/pt為增量值

常用值:8/16/24/32/48/56/64/72/80/88/96…


感謝您耐心的讀完,規范知識內容比較多,分為兩部分講,敬請期待~


-  END  -


如果覺得有幫助,請關注我的公眾號【 UX設計筆記 】,每天推送小知識

624
- 2位站酷推薦設計師推薦 -

    文章信息

    • 文章標簽

    沒有新消息



    tlc同乐城体育