〜ほぼ Daily UI vol.56〜 Breadcrumbs
Hint: NOT the edible kind. ;) Although a seemingly small detail, breadcrumbs are quite necessary yet often neglected in terms of appearance and functionality. And to truly achieve great design sense and skills you need to consider even the smallest details.
参考にしたサイト・アプリ
丸っこいのとシャドウで階層表現すんのいいかも
今どこにいるか分かりやすい
GitHub
https://github.com/kazuyaseki/react-figma-plugin-boilerplate/blob/master/src/App.tsx
今の階層を font-weight 上げることによって分かりやすくしつつも、色は黒でリンクとしては使えないことを示すいいデザインな気がする。
デザインを考える上でのポイント
UIのパターン
こちらのサイトによく纏まってる
https://codyhouse.co/demo/breadcrumbs-multi-steps-indicator/index.html
さり気なくする
パンクズリスト、基本的にはSEO目的で入れられることが多いイメージだが、意味あるとしたら検索から詳細ページに入った人が回遊しやすいようにとか、ディレクトリのような概念を表現している時だと思う。どちらにしてもメインのユースケースではないので、主張しすぎないが探せばすぐ見つかるくらいの感じにしとくのが良さそう。
自分のデザイン
思ったこと
シンプル
この記事が気に入ったらサポートをしてみませんか？