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

News picksのUIデザイン