UI元素-尺寸設定指南(上)
“做了很久的頁面或者新手剛上車,好像都是根據iOS規範來做延伸,甚至有時候自己想打破規範做突破,卻無法控制元素應該使用的長寬數值,導致頁面最終不倫不類。”有這些問題的同學,可以看看這篇文章,一定會頗有收穫 ;)本文內容轉自一位設計愛好者的分享,我看完覺得很乾貨,拿來與大家分享
一、基礎規則
1.官方規範
對於剛開始思考 UI 元素尺寸的新人,通常第一反應都是去看官方規範,新人都以為官方設計規範的作用就是告訴你們元素的大小和怎麼設定,只要看完了就能懂得如何設計 iOS 或 Android 應用。而實際上,這些規範並不能幫助你們解決這個問題,因為設計規範涵蓋的內容遠遠比這些複雜。不過我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸,最好的方法就是去下載它們的官方 UI-Kits,如下圖的iOS元件庫所示:
原始檔下載地址:
PDF格式: ofollow,noindex" target="_blank"> https://pan.baidu.com/s/1qXESGaw
Adobe XD 格式: http://pan.baidu.com/s/1bo00asv
Sketch 格式: http://pan.baidu.com/s/1gf8FGUv
然而在初期,我們想要設計出嚴格符合官方規範的設計,就可以嚴格照搬官方的元素設定。但是,即使官方的原始檔包含的元素字型已經非常多了,在實際設計過程中,還是會出現它們無法覆蓋的設計型別,需要依靠我們自己設定;新人要明白,官方的規範,只是一種建議,我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內容,我們是無法設計出有趣個性化的設計的,比如下面這幾款已經看不到 「 iOS 設計 」的應用,如下圖所示:
好,言歸正傳,現在來講一下尺寸長寬值範圍吧,激動搓手手