Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

News picksのUIデザイン

「第2回ノンゲームスマホアプリ勉強会」で発表した資料です。http://www.socialtoprunners.jp/#!2/c1oxg/77E05154-092F-486E-AEDA-9F4D0B64F134

  • Login to see the comments

News picksのUIデザイン

  1. 1. NewsPicksの UIデザイン 長澤 順平
  2. 2. NewsPicks?
  3. 3. NewsPicks?
  4. 4. NewsPicks? 2013/9 2014/3 2014/6
  5. 5. ノンゲームアプリ ビジネスロジックを理解し それを何よりも分かりやすい形に結実させる ゲームよりも(ある意味)自由
  6. 6. 本当に欲しいNewsとは? 2013/2 ? 2013/9 2014/3 2014/6
  7. 7. C A B B 表現したかった概念 フォローしているPicker タイムライン A B C B C A B D B A C D
  8. 8. 試行錯誤1
  9. 9. 試行錯誤2
  10. 10. ユーザー3 ユーザー2 階段というアイデア タイムライン ユーザー1 タイムライン
  11. 11. 階段というアイデア デモ
  12. 12. 設計1 scroll view timeline user1 user2 user20 … user19 user3 画面 フレーム はみ出し
  13. 13. 設計2 scroll view timeline user1 user2 user20 … user19 user3画面 フレーム content offset
  14. 14. コード(iOS) - (void)scrollViewDidScroll:(UIScrollView *)scrollView { for (int index = 0; index < _headers.count; index++) { Header *header = [_headers objectAtIndex:index]; header.frame = …… } _topView.frame = …… }
  15. 15. コード(Android) listView.setOnScrollListener(new OnScrollListener() { @Override public void onScroll(AbsListView list, int firstVisibleItem, int visibleItemCount, int totalItemCount) { for (int i = 0; i < visibleItemCount; i++) { Header holder = listView.getChildAt(i).getTag(); holder.setPosition( …… ) } } });
  16. 16. こんな風に アプリはサクッと作れるので 色んなデザインを どんどん試せますね
  17. 17. その後起こった問題
  18. 18. その後起こった問題
  19. 19. 解決
  20. 20. まとめ サービスコンセプトを理解し デザインと技術の力で アプリとして結実させる と楽しいよ。
  21. 21. 特殊なことをすると大変 ここのバーの色を 人ごとに変えたい rootViewControllerにAddされた NavigationControllerにしか対応されない top画面が上にいくと 裏側でViewControllerの親子構造を変更……

×