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

1. NewsPicksの
UIデザイン
長澤 順平

3. NewsPicks？

4. NewsPicks？

5. NewsPicks？
2013/9 2014/3 2014/6

6. ノンゲームアプリ
ビジネスロジックを理解し
それを何よりも分かりやすい形に結実させる
ゲームよりも（ある意味）自由

7. 本当に欲しいNewsとは？
2013/2
?
2013/9 2014/3 2014/6

8. C
A
B
B
表現したかった概念
フォローしているPicker タイムライン
A B C
B C
A B D
B
A
C
D

9. 試行錯誤1

10. 試行錯誤2

11. ユーザー3
ユーザー2
階段というアイデア
タイムライン
ユーザー１
タイムライン

12. 階段というアイデア
デモ

13. 設計1
scroll view
timeline
user1
user2
user20
…
user19
user3
画面
フレーム
はみ出し

14. 設計2
scroll view
timeline
user1
user2
user20
…
user19
user3画面
フレーム
content offset

15. コード（iOS）
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
for (int index = 0; index < _headers.count; index++) {
Header *header = [_headers objectAtIndex:index];
header.frame = ……
}
_topView.frame = ……
}

16. コード（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( …… )
}
}
});

17. こんな風に
アプリはサクッと作れるので
色んなデザインを
どんどん試せますね

18. その後起こった問題

19. その後起こった問題

20. 解決

21. まとめ
サービスコンセプトを理解し
デザインと技術の力で
アプリとして結実させる
と楽しいよ。

22. 特殊なことをすると大変
ここのバーの色を
人ごとに変えたい
rootViewControllerにAddされた
NavigationControllerにしか対応されない
top画面が上にいくと
裏側でViewControllerの親子構造を変更……