錯視を考慮する

デザインする時に錯視を考慮する

視覚調整

参考

Sociomedia ヒューマンインターフェースガイドライン 75

#WIP

「錯視を考慮する」ってめっちゃ難しいなmrsekut.icon

数字だけで調整できない

FigmaのAuto Layoutなどで自動的に調整される数字が、人間にとっては適切でない場合があるということ

どうしても主観混じりになる

AさんとBさんで感覚の調整が必要

レビューもしづらい

違和感の無さ、で判断することになる？

後から数字だけ見た時に、それが意図したものなのかどうかわかりづらい

UIデザインの根拠を全て言語化して残すをしていないとなんでズレているのかわからない

例えば、上が詰めて見えるからpt-3 pb-2した。など

あとから見る人からすればたまたまミスっているだけにも見える

Design Systemに組み込むのも難しそう

https://gyazo.com/93cfed013720894f31e6c7809546cb4d https://www.sociomedia.co.jp/9773

上方距離過大の錯視

@shinsukebando: #ロゴの分解 20_Google

前回ユニクロが視覚調整が行われていないデザインでしたので、今回は錯視調整の代表格とも言えるGoogleロゴマークを見てみました

今となっては当然のことですが、マークの視覚調整を自らがゼロから行い、自然なデザインに落とし込むことは決して簡単なことではないと思います

https://pbs.twimg.com/media/EZWWkl_UcAEt8_z.jpghttps://pbs.twimg.com/media/EZWWkmEUYAA4jfc.jpghttps://pbs.twimg.com/media/EZWWkmMUYAAY0nL.jpghttps://pbs.twimg.com/media/EZWWkmNUMAAjMbQ.jpg

@shinsukebando: #ロゴの分解 43_NINTENDO SWITCH

恐らくGoogleと同じくらい「錯視調整」が行われているロゴマークの代表格ではないでしょうか。

https://pbs.twimg.com/media/ExP9NfzWYAEJhqp.jpghttps://pbs.twimg.com/media/ExP9NfuXMAMAGpg.jpghttps://pbs.twimg.com/media/ExP9NfwW8AgAvqj.jpghttps://pbs.twimg.com/media/ExP9NfvWgAg7GW-.jpg

重心を見る

https://speakerdeck.com/yuichi_hara7/mei-siiuiwozuo-rutameni-dezainagayi-shi-siteiru-tiyotutositakao-efang?slide=17

https://gyazo.com/ecb5ae7b96c0964d74f2853674133293

色と面積による錯視

Overshoot