Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
如何設計 Android UI
Search
Bing
October 06, 2015
Design
1
150
如何設計 Android UI
Android UI 基礎概念介紹
Bing
October 06, 2015
Tweet
Share
More Decks by Bing
See All by Bing
行為改變科學的實務設計 第一章
tenexbing
1
420
做好做滿 Android UI
tenexbing
1
130
Other Decks in Design
See All in Design
AI動画生成ガチャ紹介
piyo7
1
110
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
270
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
140
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
700
CMS管理画面のアクセシビリティ
magi1125
1
250
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
630
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.8k
Haley's adventure chase
ivettetwin
0
220
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
360
Les petites aventures de CSS, saison 2025
goetter
3
4k
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
It's Worth the Effort
3n
184
28k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Navigating Team Friction
lara
187
15k
The Invisible Side of Design
smashingmag
299
51k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Side Projects
sachag
455
42k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Transcript
㥶⡦鏤鎙"OESPJE6* ⢪欽4LFUDI CC Image courtesy of Yuri Samoilov on Flickr
"OESPJE 4LFUDI 3FTPVSDFT
8IBUJT%1
8IBUJT%1*
DPI : Dots Per Inch
DPI : Dots Per Inch MDPI HDPI XHDPI XXHDPI XXXHDPI
DPI 160 240 320 480 640
ፘݶ Size ጱ瑽粙牧ࣁ犋ݶጱ DPI Ӥ
ྋ嘦䛑扗ฎ
)FMMP%1
DP DIPฎ Density-independent pixel DP 傶蒅硈薹ຉଶ牧ፓጱ傶ᰁ玕憙憽Ӥጱय़ੜ 獍ୗ px = dp
* (dpi / 160)
MDPI HDPI XHDPI XXHDPI XXXHDPI DPI 160 240 320 480
640 SCALE 1x 1.5x 2x 3x 4x DP 100dp 100dp 100dp 100dp 100dp px 100px 150px 200px 300px 400px
晝銴㢵㣐
MDPI 1:1 犥 Sony Z3 傶ֺ 物 DPI物XXHDPI 3x 䋿褬疳ੑ物1920px
* 1080px 蕣֢疳ੑ物 640px * 360px
MDPI 1:1 অ蒂物犋አ px 旉矦 dp 瓥蒂物ࣁ戔懯碻牧毆薩碻०፥
螕䛑介手秚 犥 Sony Z3 傶ֺ 物 DPI物XXHDPI 3x 䋿褬疳ੑ物1920px *
1080px 蕣֢疳ੑ物1920px * 1080px
螕䛑介手秚 অ蒂物戔懯碻牧毆薩犋०፥ 瓥蒂物 px 襑旉矦 dp
鏤鎙㤛♶♳
None
None
None
⡹铞➊랃䧮聃♶䥢
Tab Toolbar (Action bar) Status Bar List
Grid Card
Navigation Drawer Dialog
Menu
Floating action button
5PPMT
Google Material Design
Roboto & Noto Sans
Skala Preview 1. Macᒒ Sketch plugin牏ಋ秚ᒒ ӥ斉 Android APP 2.
ಋ秚膏襎脲ֵአፘݶጱ Wifi 翕᪠ 3. ࣁ Sketch 螡䢔ᥝ毆薩ጱ Artboard 4. 毆薩盠蝧棎物CMD + P 5. ෝಋ秚Ӥ毆薩向ᶎ
4UZMF
Grid Baseline grid 傶 8dp * 8dp MDPI 1x物
8px * 8px XHDPI 2x物 16px * 16px XXHDPI 3x物 24px * 24px
Margin • Margin: 16dp • Content Left Margin: 72dp
Height • Status bar: 24dp • Toolbar(ActionBar): 56dp • Title
and list items: 72dp • Subtitle: 48dp • Space between content areas: 8dp
Icon • 䋿褬疝ଶ 48dp • 獉疝ଶ 24dp
Button • 䋿褬ṛଶ 48dp • 獉ṛଶ 36dp • 磧ੜ疳ੑ物48dp *
48dp
Font • sp 傶ਁ羷ጱ㻌֖ • 1px = 1dp = 1sp
• sp 䨝狅ᆙֵአᘏጱ羬翄戔 ਧ㬵婘硯牐
Color Android 氅ᜋ蔭纈ဩ物# + 蝚กଶ + hex #FF000000 傶ਠ獊犋蝚กጱἓᜋ #00FFFFFF
傶ਠ獊蝚กጱጮᜋ #CC000000 傶蝚กଶ 80% ጱἓᜋ