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
140
如何設計 Android UI
Android UI 基礎概念介紹
Bing
October 06, 2015
Tweet
Share
More Decks by Bing
See All by Bing
行為改變科學的實務設計 第一章
tenexbing
1
410
做好做滿 Android UI
tenexbing
1
120
Other Decks in Design
See All in Design
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
120
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo
yasuhiroyokota
2
1k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
170
Sociotechnical design for software and human systems
xinyao
1
410
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
17
5.3k
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
0
800
Crafting Blog covers: AI tools vs Human Illustrators. Who is the winner?
strongeron
0
120
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
270
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
23
2.1k
意志と、デザインと、ときどきお金
transit_kix
2
1.9k
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.1k
root Design Partnership Policy
root_recruit
0
3.4k
Featured
See All Featured
Bash Introduction
62gerente
604
210k
Designing the Hi-DPI Web
ddemaree
275
33k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Side Projects
sachag
451
41k
Code Review Best Practice
trishagee
54
15k
Building Applications with DynamoDB
mza
88
5.6k
Visualization
eitanlees
135
14k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Six Lessons from altMBA
skipperchong
19
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Why Our Code Smells
bkeepers
PRO
330
56k
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% ጱἓᜋ