做好做滿 Android UI

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҂ጱމ
19. 戔懯䒍
 ெ讕狶಍ฎ䌘ጱ
20. MDPI HDPI XHDPI XXHDPI XXXHDPI 婘硯 1x 1.5x 2x 3x 4x 粚ᶎ疝 px 360 - 720 1080 - 粚ᶎṛ px 640 - 1280 1920 - 戔ਧ DPI 膏粚ᶎ疳ੑ
21. 碍独ᤩ碉ᴻ
23. य़疑᮷憽஑櫞አጱ秂戢
 秂戢অग़缰
25. ૡ纷䒍物 蝡秂戢૪妿脒櫝ᙂ縄ݢ犥蜣蘷 ጱ塅瑻ԧ
26. 戔懯䒍物 瞧聲ݪ臺ԧӞ碉ॠ秂ጱ֦੷簁 犋ᥝ፡
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
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
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. 䔶藲ᜋ ୚疩ֵአᘏፓط
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. ૡ纷䒍縄縋蠑ዳጱ制丆
 ෈ਁ缰
64. ૡ纷䒍物 蝡 App Ӿ磪ग़੝ਁ羷蚤氅ᜋ牧 ౯碍犋竃ҁ౯犋మ碍҂
65. 戔懯䒍 - 憽஑ஞ箜఺獖
66. “ॡग़ጱ෈ਁ疳ੑ膏䰬ୗ ݢ犥ൻ䵼犨֜Ӟ㮆粚ᶎ” Google
67. 膏Ӟ㮆 Android ૡ纷䒍
69. 1. ਧ嬝ਁ羷 2. 疥෈ਁ戔ਧ傶 Style牧 ᯿蕦ֵአ
70. 梊藮ጱ戔懯ԏ
 戔懯䒍ጱ 50 圵箜
71. #B5CCDF #5287B4 #033E6C #032643 #010C14 #FFFFFF #BFBFBF #686868 #212121 #757575 #BDBDBD #FFDFBC #FFB561 #BD6E06 #754307 #211404
72. ྋ嘦䛑扗ฎ...
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