Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
WWDCのDesign Labが 最高だった potatotips 62 佐藤剛士 2019 年 6 月 18 日
Slide 2
Slide 2 text
Who am I ● Name ● 佐藤剛士(さとうたけし) ● Company ● Merpay, Inc.(2019/01 ~) ● Role ● Software Engineer (iOS) ● Account ● Twitter: @hatakenokakashi ● Facebook: 佐藤剛士 ● GitHub: SatoTakeshiX
Slide 3
Slide 3 text
WWDC19にいってきました
Slide 4
Slide 4 text
Design Lab ● Appleのアプリデザイナーと1対1で直接アプリデザインの相談ができる ● リリース済み、プロトタイプは問わない ● WWDCアプリから予約が必要 ● 時間は一人30分 ● 通訳あり
Slide 5
Slide 5 text
フライングスター風水 ● 自宅の間取り運勢を判定 ● 間取り画像を読み込んで引越 し先の住宅運勢を判定
Slide 6
Slide 6 text
相談したこと ● 引っ越し間取り画面の写真登録UIを改善したい ● 問題:住宅の運勢を占うには以下の2つのタスクが必要 a. 写真の北方向と端末画面上部を回転させて合わせる b. 玄関の方向に画像を回転させる ● 現状ユーザーが混乱しているのでうまいやり方ないのか?
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
回答 ● まず登録操作を試すチュートリアル画面で慣れさせる ● 次に実際に写真を登録させる ● チュートリアルを出すタイミングは画像選択ボタンタップ時 ● 画面フローイメージはiPhoneアクティベートフロー 北 22° 玄関
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Human Interface Guidelines Modality https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/
Slide 11
Slide 11 text
相談したこと2 ● 画面がごちゃごちゃしているのをスッキリさせたい
Slide 12
Slide 12 text
回答 ● カレンダーアプリのようにナビ ゲーションバーにボタンを配置 しよう ● ナビゲーションバーとタブバー の間の領域は基本みるだけの 領域にしたほうがいい
Slide 13
Slide 13 text
ボタンをナビゲーションバー に移動 青枠コンテンツ部分は みるだけのデザインがよい
Slide 14
Slide 14 text
その他 ● アイコンつかっているならSF Symbleつかったほうがいいよ!
Slide 15
Slide 15 text
感想 ● UIデザインに迷っていたので本当に助かった ● 相談は具体的にしたほうが的確に返答してくれる ○ デザインを好き嫌いの問題にしないような質問がよい ■ ❌ 漠然とした「これどう思う?」 ● アドバイスはHuman Interface Guidelinesを体現 ● Apple純正アプリに学ぶこと多し
Slide 16
Slide 16 text
WWDCにいったらDesign Labへ