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
120
Other Decks in Design
See All in Design
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.6k
LLMによるRAG評価用合成テストデータの生成
licux
6
1.1k
Masked shaman-Storyboard 2025
ashley0521
0
290
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
今日から意識できるアクセシビリティ
fumiko
0
230
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
1
270
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.2k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.5k
デザイナーとPMの両ロール_3つのポイント
toy1618
1
300
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.4k
セブンデックス カルチャーブック
sevendex
1
14k
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
340
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
90
What's in a price? How to price your products and services
michaelherold
245
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Unsuck your backbone
ammeep
671
58k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Thoughts on Productivity
jonyablonski
69
4.7k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Building Applications with DynamoDB
mza
95
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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% ጱἓᜋ