トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

情報設計とXDメモ

Cocoda!情報設計のコースをやったメモ

ユーザーがどういう風に動きたいか、どの情報があるとうれしいかを考えて設計する。

利用シーンを考え、それをもとに操作の流れを書き出す

メモアプリ

新規メモ作成→すでにキーボードが出ているメモ画面→閉じるor作成

f:id:bibinbaleo:20200501093303p:plain

新規メモ画面を閉じるとき、すでに書き込んでいたら「消していいですか」ってポップアップで聞いたほうがいいよな?

ECサイト

商品を選択→詳細画面→戻るorカートに入れる

f:id:bibinbaleo:20200430104726p:plain

ToDoリスト

リストの完了方法:スワイプor タップ 時間で消える

f:id:bibinbaleo:20200501112552p:plain

タスクを左スワイプで期限設定は斬新?

メモ

情報設計とは関係ないXDなどのメモ

下タブ固定

スクロールできる画面の時、固定したいものは一番上に置いてプロトタイプ画面で、「スクロール時に位置を固定」

f:id:bibinbaleo:20200430104855p:plain

こんな感じになる。

f:id:bibinbaleo:20200430104859p:plain

 

丸数字

カートに追加した後、カートマークに丸数字が追加される。

f:id:bibinbaleo:20200430104014p:plain


f:id:bibinbaleo:20200430103959p:plain

この数字を丸の真ん中に置くのが難しい。

今までも丸の中に数字奥のきれいにできたことがない。

あとフォント。NotoSansは下に棒があるタイプ

f:id:bibinbaleo:20200430104121p:plain

Slackの通知もそうだった

f:id:bibinbaleo:20200430103837p:plain

お手本はなかった。SFProにしたらない

f:id:bibinbaleo:20200430104210p:plain

フォント置き換え

Macで作られたテンプレートだったので、フォントがヒラノギだった。

WindowsではNotoSansに置き換えると良い。

一括で置き換えられた!

f:id:bibinbaleo:20200501093705p:plain

f:id:bibinbaleo:20200501093710p:plain

時間、ドラッグで遷移

タップ以外にも画面遷移方法がある。

UIのドラッグ操作をプロトタイプで表現するときは、キャンバスを二つ作って、元のキャンバスでUIをずらしておく。

f:id:bibinbaleo:20200501111006p:plain

すると自動でドラッグ方向がいい感じになる。

時間で切り替わることもできる。

f:id:bibinbaleo:20200501111238p:plain

AppStoreのデザイン

iOSのAppStoreが情報設計されていて使いやすいって紹介されてたけど、検索がしたい人にとっては使いにくい。最初の画面に検索バーがないもん!!

f:id:bibinbaleo:20200501112746p:plain

AppStoreなんて9.9割検索でしか使わないのに。

なんかいいアプリないかなーっておすすめで探すのって、マジで暇すぎて新しいソシャゲ始めたくなった大学生の時だけだったぞ。

f:id:bibinbaleo:20200501112750p:plain

GooglePlayStoreは最初の画面上に検索バーがあるのでGood👍

f:id:bibinbaleo:20200501113611p:plain

最後に

Cocoda!はXD共有したリンクを貼ると埋め込みができる。Cocoda!上で動くのすごい。

はてなは埋め込みできなかった。