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
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
470
Dinosaur Mayhem
storyartist
0
140
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
230
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
680
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
横断組織デザイナーの働き方
mixi_design
PRO
0
330
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Site-Speed That Sticks
csswizardry
3
370
It's Worth the Effort
3n
184
28k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Being A Developer After 40
akosma
89
590k
GitHub's CSS Performance
jonrohan
1030
460k
A Philosophy of Restraint
colly
203
16k
How to Ace a Technical Interview
jacobian
276
23k
For a Future-Friendly Web
brad_frost
176
9.5k
4 Signs Your Business is Dying
shpigford
182
22k
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% ጱἓᜋ