1.か、階層とはっ！！？
🚩 クイズGoogleMeet : ユーザーのカードとコメント欄、どっちが高い階層？
- みなさんが普段何気なく使っているUIには階層表現が使われています
- それがあるため、ボタンを見失わなかったり、情報認知をやりやすかったり
- 時には目立たせたいものを目立たせて表現したりができます
その階層表現について知りましょう。
2.なんのために使えるのか？
- 情報の構造をわかりやすく相手に伝えたり
- ボタンを押しやすくしたり
- 強弱をコントロールしたり
平面で表現する僕らにとっては欠かせない技術なんですね。
3.例を見てみよう
□ 単純表現
○ スキューモーフィズム
- iOSでいうと「６」までに採用されたビジュアル原則の1つ
- 実世界の何かに似せるための表現
- デジタルを触る操作するという、馴染みのない操作をやりやすくするために採用されていた
- デメリットは作るのが大変、描画が重いなどの点
- 実世界の表現を採用して、階層や凹凸を表現。
ViewFromPottingShit
○ 今 - フラット(寄り）のデザイン
- より最小の表現で「触れる」「固定されている」などを表現するのが今のUIの傾向
- 無駄な装飾を省き、最小限に”抽象度”を上げて表現する
□ 構造
https://material.io/design/environment/elevation.html
- UIの各パーツは階層の関係になっている
- 押せるものは出っぱっている（現実的に）し、固定されたものはスクロールするものより上にある
4.表現 - 暗いものは沈み、明るいものは浮いて見える
- 色の表現
- 影の表現
- 強弱の表現
などを使って、目の動きや、触れる感などを工夫する。
1.か、階層とはっ！！？
🚩 クイズGoogleMeet : ユーザーのカードとコメント欄、どっちが高い階層？
- みなさんが普段何気なく使っているUIには階層表現が使われています
- それがあるため、ボタンを見失わなかったり、情報認知をやりやすかったり
- 時には目立たせたいものを目立たせて表現したりができます
その階層表現について知りましょう。
2.なんのために使えるのか？
- 情報の構造をわかりやすく相手に伝えたり
- ボタンを押しやすくしたり
- 強弱をコントロールしたり
平面で表現する僕らにとっては欠かせない技術なんですね。
3.例を見てみよう
□ 単純表現
○ スキューモーフィズム
- iOSでいうと「６」までに採用されたビジュアル原則の1つ
- 実世界の何かに似せるための表現
- デジタルを触る操作するという、馴染みのない操作をやりやすくするために採用されていた
- デメリットは作るのが大変、描画が重いなどの点
- 実世界の表現を採用して、階層や凹凸を表現。
ViewFromPottingShit
○ 今 - フラット(寄り）のデザイン
- より最小の表現で「触れる」「固定されている」などを表現するのが今のUIの傾向
- 無駄な装飾を省き、最小限に”抽象度”を上げて表現する
□ 構造
https://material.io/design/environment/elevation.html
- UIの各パーツは階層の関係になっている
- 押せるものは出っぱっている（現実的に）し、固定されたものはスクロールするものより上にある
4.表現 - 暗いものは沈み、明るいものは浮いて見える
- 色の表現
- 影の表現
- 強弱の表現
などを使って、目の動きや、触れる感などを工夫する。
0 Comments