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
UXデザインはなぜ定着しないのか?
designstudiopartners
0
1k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
230
mento Design Team Portfolio
mento0fficial
1
820
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
280
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.6k
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
630
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
portfolio.pdf
onof003
0
180
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
210
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
540
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Fireside Chat
paigeccino
40
3.7k
BBQ
matthewcrist
89
9.8k
Navigating Team Friction
lara
189
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Making Projects Easy
brettharned
118
6.4k
GitHub's CSS Performance
jonrohan
1032
460k
Statistics for Hackers
jakevdp
799
220k
Automating Front-end Workflow
addyosmani
1371
200k
Site-Speed That Sticks
csswizardry
10
870
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% ጱἓᜋ