Save 37% off PRO during our Black Friday Sale! »

做好做滿 Android UI

8e5e8ed9a5440fb7a13f012927f794db?s=47 Bing
December 03, 2015

做好做滿 Android UI

8e5e8ed9a5440fb7a13f012927f794db?s=128

Bing

December 03, 2015
Tweet

Transcript

  1. 狶অ狶笕 Android UI @bing

  2. UI Design JAVA Layout + Style Sketch Android Studio Android

    Studio
  3. UI Design JAVA Layout + Style Sketch Android Studio Android

    Studio
  4. 戔懯䒍ጱੜ玀䁰

  5. 秂戢盄讔簡݈篷肗
 ҁঅ簡҂

  6. 秂ԧૡ纷䒍礬๜䷱ࣁ፡
 ҁ盏盨҂

  7. Ӟ殻Ӟ殻䌘Օᶎ

  8. ᮎ౯䓄琳秂ࠡ

  9. ૡ纷䒍ጱੜ玀䁰

  10. 秂戢脒櫝ᙂ縄ݢ犥蜣蘷ጱ禅褖
 ҁ梊఻҂

  11. ፡蚏㬵癩犋ग़疰অԧމ
 ҁ蝓螨҂

  12. Ӟ殻Ӟ殻䌘Օᶎ

  13. ᩻窚揲碻樌ጱࠩ

  14. य़疑᮷憽஑櫞አጱ秂戢
 㻌֖缰

  15. ૡ纷䒍物 
 蝡秂戢ฎ px牧ᮎ蝡ฎग़੝ dpi ?

  16. 戔懯䒍物 ???????? ౯አ iPhone 6 狶ጱ牐

  17. ૡ纷䒍物 ᮎ䛑扗ฎ 2xҁXHDPI҂ጱމ

  18. None
  19. 戔懯䒍
 ெ讕狶಍ฎ䌘ጱ

  20. MDPI HDPI XHDPI XXHDPI XXXHDPI 婘硯 1x 1.5x 2x 3x

    4x 粚ᶎ疝 px 360 - 720 1080 - 粚ᶎṛ px 640 - 1280 1920 - 戔ਧ DPI 膏粚ᶎ疳ੑ
  21. 碍独ᤩ碉ᴻ

  22. None
  23. य़疑᮷憽஑櫞አጱ秂戢
 秂戢অग़缰

  24. None
  25. ૡ纷䒍物 蝡秂戢૪妿脒櫝ᙂ縄ݢ犥蜣蘷 ጱ塅瑻ԧ

  26. 戔懯䒍物 瞧聲ݪ臺ԧӞ碉ॠ秂ጱ֦੷簁 犋ᥝ፡

  27. None
  28. 8dp * 8dp ጱ໒娄

  29. 19dp 30dp 6dp 4dp 5dp 8dp 16dp 10 dp 11

    dp 12 dp 14 dp … 婘仂 ܻ๜ጱ樌蚣
  30. <dimen name="padding">8dp</dimen> <dimen name="margin">16dp</dimen> dimen.xml

  31. None
  32. <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="@dimen/margin" android:paddingBottom="@dimen/padding"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/lorem_ipsum"/>

    <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/lorem_ipsum" android:padding="@dimen/padding"/> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/lorem_ipsum"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" android:layout_marginTop="13dp" android:layout_marginRight="8dp" android:layout_marginLeft="10dp" android:layout_marginBottom="4dp"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" android:layout_marginRight="8dp" android:layout_marginLeft="4dp" android:layout_marginBottom="11dp"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" android:layout_marginRight="8dp" android:layout_marginLeft="11dp"/> </LinearLayout>
  33. 猻讨 1.秂戢碍独Ӟਧݢ碉ᴻ 2.य़ᰁ仂੝秂戢碍ᰁ 3.犋አٚӞ㮆Ӟ㮆䌘秂戢 4.ے蝧樄咳
 ҁ狒虁縄縋牧姘瞱胁膇؋皐牧℄፜౮๜҂

  34. ૡ纷䒍篷ဩ蒂ቘጱ制丆
 زկ缰

  35. ૡ纷䒍物 蝡ฎՋ讕䩚ᥜ.... 蝡ฎ iOS 㻟牫 蝡狶犋ڊ㬵ҁ౯犋ᥝ狶҂

  36. 戔懯䒍物 ૡ纷䒍蝫手᮷犋手牧疰藯狶犋ک牧 蝡䰬ୗกก盄ଉ憎ҁᘉ礰҂

  37. 盄ग़戔懯䒍
 ฎຎ罭...

  38. አ iOS 膊ԧ㻟牫 1.ਮ蕣玕زկ牧玈࿆㰁揘 2.犋ᒧݳ Google Design Guideline

  39. 玲஑ Android ಋ秚

  40. ֵአਥොزկ

  41. ଉ憎ጱ梊藮
 ActionBar

  42. None
  43. None
  44. 戔ਧ 2 㮆氅ᜋ牏犋አ秂戢 Ԇᜋ 䔶藲ᜋ

  45. <style name="AppTheme" parent="Theme.AppCompat"> <item name=“colorPrimary"> @color/colorPrimary</item> <item name=“colorAccent"> @color/colorAccent</item> </style>

    䔶藲ᜋ Ԇᜋ style.xml
  46. 猻讨 1.ݝᥝ狕硬زկ氅ᜋ 2.犋襑秂戢 3.犋አٚਮ蕣玕زկ 4.ے蝧樄咳
 ҁ狒虁縄縋牧姘瞱胁膇؋皐牧℄፜౮๜҂

  47. ૡ纷䒍篷ဩ蒂ቘጱ制丆
 অग़氅ᜋ缰

  48. ૡ纷䒍物 ౯睲綡蝡㮆殷ᶎ磪 36 圵氅ᜋ牧 ҁ౯犋ᥝ䌘ᜋ嘨҂

  49. 戔懯䒍物 ૡ纷䒍疰ฎ䷱ஞ牧蝫氅ᜋ狶梊

  50. Ԇᜋ ߝ粞牏App ጱ Ԇᥝ氅ᜋ

  51. 䔶藲ᜋ ୚疩ֵአᘏፓط

  52. None
  53. 1. ਧ嬝Ԇᜋ膏䔶藲ᜋ 2. 褖婘ٌ犢氅ᜋ碍ᰁ 3. ࣁ Sketch ୌ缏ᜋ纏牧᯿蕦ֵአ 戔懯䒍ெ讕狶

  54. 猻讨

  55. 䔶藲ᜋ Ԇᜋ

  56. colors.xml <color name=“colorPrimary"> #49569D</color> <color name=“colorAccent"> #97DEE3</color> 䔶藲ᜋ Ԇᜋ

  57. <style name="AppTheme" parent="Theme.AppCompat"> <item name=“colorPrimary"> @color/colorPrimary</item> <item name=“colorAccent"> @color/colorAccent</item> </style>

    style.xml 䔶藲ᜋ Ԇᜋ
  58. Ӟᑁ矦䰬ୗ

  59. 䔶藲ᜋ Ԇᜋ

  60. colors.xml <color name=“colorPrimary"> #26B6AC</color> <color name=“colorAccent"> #FF8E00</color> 䔶藲ᜋ Ԇᜋ

  61. 猻讨 1.ߝ粞牏App 戔懯Ӟ膌௔ 2.ฃ姘虁牧অ狕硬牧ے蝧樄咳
 ҁ狒虁縄縋牧姘瞱胁膇؋皐牧℄፜౮๜҂

  62. ૡ纷䒍縄縋蠑ዳጱ制丆
 ෈ਁ缰

  63. None
  64. ૡ纷䒍物 蝡 App Ӿ磪ग़੝ਁ羷蚤氅ᜋ牧 ౯碍犋竃ҁ౯犋మ碍҂

  65. 戔懯䒍 - 憽஑ஞ箜఺獖

  66. “ॡग़ጱ෈ਁ疳ੑ膏䰬ୗ ݢ犥ൻ䵼犨֜Ӟ㮆粚ᶎ” Google

  67. 膏Ӟ㮆 Android ૡ纷䒍

  68. None
  69. 1. ਧ嬝ਁ羷 2. 疥෈ਁ戔ਧ傶 Style牧 ᯿蕦ֵአ

  70. 梊藮ጱ戔懯ԏ
 戔懯䒍ጱ 50 圵箜

  71. #B5CCDF #5287B4 #033E6C #032643 #010C14 #FFFFFF #BFBFBF #686868 #212121 #757575

    #BDBDBD #FFDFBC #FFB561 #BD6E06 #754307 #211404
  72. ྋ嘦䛑扗ฎ...

  73. None
  74. White 70% White 30% Black 26% Black 54% Black 87%

    White 100% White 70% White 30% Black 87% Black 54% Black 26% White 70% White 30% Black 26% Black 54% Black 87%
  75. ٌ䋿ݝ襑ᥝ 6 㮆氅ᜋ

  76. White 100% White 70% White 30% Black 87% Black 54%

    Black 26%
  77. 猻讨 1.犋አ蜢舚藲氅ᜋ 2.犋አ䌘ᜋ嘨 (犝ᜋ3圵牏窼ᜋ3圵) 3.ฃ姘虁牧অ狕硬牧ے蝧樄咳
 ҁ狒虁縄縋牧姘瞱胁膇؋皐牧℄፜౮๜҂

  78. 戔懯窕纷

  79. 玲஑ Template 1.㬵რ Google Design ਥ翕ӥ斉 2.Sketch Template

  80. 戔ਧ dpi 膏໒娄 MDPI HDPI XHDPI XXHDPI XXXHDPI scale 1x

    1.5x 2x 3x 4x ໒娄 8px 12px 16px 24px 32px 蚤褰໒娄蕣֢
  81. ֵአਥොزկ ℂ Google Design Template ጱزկ
 樄ত蕣֢

  82. ਧ嬝氅ᜋ 1.ਧ嬝Ԇᜋ膏䔶藲ᜋ 2.疥氅ᜋے獈ᜋ纏牧᯿蕦ֵአ

  83. ਧ嬝෈ਁ 1.ֵአ蝚กଶਧ嬝෈ਁ氅ᜋ 2.ਧ嬝ਁ羷 3.疥෈ਁ戔ਧ౮ Style ᯿蕦ֵአ

  84. زկ 疥᯿蕦ጱزկਧ嬝౮ Symbol牏Shape

  85. Sketch Style Inventory

  86. ض獨ᓕ秂戢ԧ牧
 ֦肯螂 Zeplin 㻟牫

  87. Q&A