Android App 設計基礎

講述一些在設計 Android App 常常會遇到的問題

Transcript

1. Android Design Guide Basic
2. ҝԿ㟬ඞਢೝ᮫ࣝԙ Android Design తҰࠣ૬᮫஌ࣝʁ (have to know)
3. Image Credit: Which? Tech Daily
4. • ᩋ Art ࡞ଞ၇ݪຊब֘၏త޻࡞ • ᩋ䓟తઃܭᢛ Android తੜଶߋܖ߹ (Design for Android) • ᩋ٬㖽ᢛ PM ෆ။Ұ௚䬘㟬ௐ੔ UI • ᩋ Everyone తෛ፦౎᫊Ұᴍʂ
5. ᮫ԙଟղੳ౓ࢧԉ
6. ૬৴㟬ҰఆՄೳ䉰աҎԼ৘ڥɿ ౳ྃ޷ٱɼऴԙ፤౸٬㖽҃ੋඒज़ఏڙత൛໘ᒬࣜɼई ੇҝɿ • 640 x 960 (px) • 640 x 1136 (px) વޙब...
8. ߈৓޻ఔࢣҝԿౖࣕʁ • ؟ᓫత޻ఔࢣ౎ෆ೉ᚙݱɼൺྫࠜຊෆූʂʢʮब์େ ब޷ྃ㠷ʂʯṜछෆෛ੹೚త࿩ࠜຊੋ…ʣ • 640 x 960 — 2 : 3 • 640 x 1136 — 40 : 71! • ࡏ Android ଟईੇᢛଟᦊນղੳ౓తੜଶԼɼҎ pixel ҝᄸҐతࢥҡࠜຊੋഋ۩൵ܶʂ
9. 720px 1280px 5” 1080px 1920px 5”
10. 1920px 5” 1080px 5” ~ 4.35” 2.45”
11. 1920px 1080px 5” ~ 4.35” 2.45” 1280px 720px 2.45” 4.35” 720 ~0.086 mm/px — 1080 ~0.058 mm/px — 1280 — ~0.086 mm/px 1920 — ~0.058 mm/px Ҏ px ҝᄸҐိઃܭ൛໘။۰౸త໰୊
12. ݻఆత pxɼࡏݻఆᦊນईੇత᧋ஔԼɼ֘ ᧋ஔత Point Density ӽߴɼଇࢹ᧷্ӽখ
13. ಹ֘ዎኄ㭎ʁ ༌ٿոզ㡎ʁ
14. Density-independent pixel dp / dip
15. pixel dp screen density ldpi 0.75 1 ~120 mdpi 1 1 ~160 hdpi 1.5 1 ~240 xhpdi 2 1 ~320 xxhdpi 3 1 ~480 xxxhdpi 4 1 ~640dpi
16. ࠾༻ dip త֯౓؃᧋ஔᢛઃܭ
17. 1920px 1080px 5” ~ 4.35” 2.45” 1280px 720px 2.45” 4.35” 720 294 dip — 1080 441 dip — 1280 — 294 dip 1920 — 441 dip ܭࢉ᧋ஔᓤྨԙԿछ dpi ൣᙝ Device Green : hdpi Device Blue: xhdpi
18. ޷ෳᯑʁ޷೉㣛ʁ޷૝ᄠʁ ᔒ᮫܎ɼṜཫ༗ডኸʂ
19. 1920px 1080px 5” ~ 2.4 1280px 720px width height green! (hdpi) 480 dp 853 dp blue! (xhdpi) 540 dp 960 dp ܭࢉ൛໘༗ଟগ dp ՄҎ࢖༻
20. ኺࠓఱى㟬ጯ֘ཁ஌ಓᢛṜᒬ၏ • ༻ dp తࢥҡိઃܭ Android app త layout • ఏڙҎ dp ҝᄸҐత֤छᦊນईੇᢛղੳ౓త layout తඪࣔ • վఏڙҎ dp ҝᄸҐతईੇن֨ɼࣕෆੋҎ px ҝᄸҐ • ༌ग़ූ߹֤छ dpi (mdpi, hdpi, xhpdi …) ෼ྨൣᙝେখతᅷ 䈕
21. ޷૾ਅతᔒ޻ఔࢣతࣄʂ
22. େࡨಛࡨ
23. ࢖༻ XML ိฤሜ Drawable ݩ݅ • Light-weight • Highly performance • Sharp • Reusable
24. Drawable Resources • Bitmap-File (.png, .jpg, or .gif) • Nine-Patch File (.9.png) • Layer List • More…
25. 9-Patch File 1px black line Scalable area Content area
26. 3 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 4 <item> 5 <shape> 6 <solid android:color="@color/theme_yellow"/> 7 </shape> 8 </item> 9 <item android:top="6dp"> 10 <shape> 11 <solid android:color="@color/theme_blue" /> 12 </shape> 13 </item> 14 </layer-list> Layer List
27. Layer List Bitmap Drawable ֎᧺ 䈕Ҋେখ 368 bytes 363 bytes (don’t forget other dpi) 㕔ར౓ ਗ਼᏷ແൺ ໛ކ ʢएࣗಈॖ์ʣ Ꮘೳ ௒๮ ීී ័ධ উ ഊ Layer List vs Bitmap Drawable