アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼

3,707 views

Published on

0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,707
On SlideShare
0
From Embeds
0
Number of Embeds
441
Actions
Shares
0
Downloads
61
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼

  1. 1. UI 7Bump Recorder UI
  2. 2. • - uPhyca• Blog : Y.A.M http://y-anz-m.blogspot.com• : Android Layout Cookbook• Twitter : @yanzm• Android• GTUG Girls
  3. 3. Bump Recorder • •→ • = Start
  4. 4. ...
  5. 5. 1.
  6. 6. • Instant Heart Rate • https://market.android.com/details?id=si.modula.android.instantheartrate• RunKeeper • https://market.android.com/details?id=com.fitnesskeeper.runkeeper.pro• Endomondo Sports Tracker • https://market.android.com/details?id=com.endomondo.android• Sports Tracker • https://market.android.com/details?id=com.stt.android• SportsTracker (by STL) • https://market.android.com/details? id=com.sportstracklive.android.ui.activity.lite• My Tracks • https://market.android.com/details?id=com.google.android.maps.mytracks
  7. 7. My Tracks Sports Tracker (by STL) Sports Tracker
  8. 8. 2.
  9. 9. • NoTitleBar• View Action Bar• • ••
  10. 10. • View• View• px → dip layout_weight
  11. 11. 3.
  12. 12. ••
  13. 13. 4.
  14. 14. 1••→ • • → #00ccff
  15. 15. 1• →• #00ccff #7fe5ff #006088 #007a98 6
  16. 16. • & →• & #000000 #ffffff 1 2 #006088 #007a98
  17. 17. 2• <shape> Action Barres/drawable/title_bg.xml<shape xmlns:android="http://schemas.android.com/apk/res/android" >    <gradient        android:angle="90"        android:endColor="#007a98"        android:startColor="#006088" /></shape> #006088 #007a98 6
  18. 18. •• : #e67e75   HSV : 5, 49, 90 : #75b4e6   HSV : 207, 49, 90 : #afe675   HSV : 89, 49, 90 : #f0d67a   HSV : 47, 49, 94
  19. 19. 5.
  20. 20. Action Bar• <shape> <selector><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true">        <shape>            <gradient android:angle="90" android:endColor="#99002e"android:startColor="#800026" />            <corners android:radius="5dip" />        </shape>    </item>    <item>        <shape>            <gradient android:angle="90" android:endColor="#007a99"android:startColor="#006088" />            <corners android:radius="5dip" />        </shape>    </item></selector>
  21. 21. 6.
  22. 22. ... • GPS ON/OFF ← Intent intent = new Intent (Settings.ACTION_LOCATION_SOURCE_SETTINGS); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); intent.addCategory(Intent.CATEGORY_DEFAULT); startActivity(intent);
  23. 23. 7.
  24. 24. • UI• ListView 1
  25. 25. ...•• Javadoc• Android AOSP • ... • prefix m • static prefix s• static final hogehoge• ....

×