マガジンのカバー画像

Human Interface Guidelinesレポート

5
本
運営しているクリエイター
ゆん

Human Interface Guidelinesの学びとデデザイン例をまとめてみた Vol.5 【/controls編】

HIGレポートの第5弾となる今回は、Human Interface Guidelinesの/controls編をまとめました。 Buttons 要約・学び） ボタンは何か固有のアクションを開始できるもの。背景色・テキスト・アイコンなどカスタマイズが可能。 システムボタンはナビゲーションバーやツールバーに表示されることが多いもので、どこでも使用可能。 ボタンのテキストは基本動詞にすること（個人的に重要と認識）。またボタンはボタンをタップすると何が起こるかを示し、インタラク

ゆん

Human Interface Guidelinesの学びとデデザイン例をまとめてみた Vol.4 【/visual-design編】

HIGレポートの第4弾となる今回は、Human Interface Guidelinesの/visual-design編をまとめました。 今回はできるだけ実サービスから参考事例を元に紹介しています。ぜひご覧ください。 Adaptivity and Layout 要約・学び） アプリをすべてのデバイスで、どのような状況でも使用できること。どのような環境でも適応性のあるインターフェースを設計することが重要。 またiOSデバイスにはさまざまな画面サイズがあり、縦向きまたは横向

ゆん

Human Interface Guidelinesの学びとデデザイン例をまとめてみた Vol.3 【/views編】

今回は、前回の/bars編に引き続き、Human Interface Guidelinesの/views編をまとめました。 加えて今回は、練習がてらに実際にFigmaでトレースしてみました。※一部トレースしていない箇所あり Action Sheets 学び&トレース） アクションシートは、2つ以上の選択肢を提示するアラート。削除などのアクションを要求する際に使用し、そのような破壊的アクションのボタンは赤色で上部に設置し目立たせること。またアクションシートは簡潔にし、スクロ

ゆん

Human Interface Guidelinesの学びとデデザイン例をまとめてみた Vol.2【/bars編】

今回は、前回の/app-architecture部分に引き続き、Human Interface Guidelinesの/barsをまとめました。 加えて今回は、練習がてらに実際にFigmaでトレースしてみました。 Navigation Bars 学び・トレース） ナビゲーションバーは、ステータスバー下に位置し、階層画面を行き来できるもの。また写真など没入感を持たせたいときは非表示にすることも可能。 また今いる階層を理解するの手助けするために、ナビゲーションバーのタイトル

ゆん

Human Interface Guidelinesの学びとデデザイン例をまとめてみた 【/app-architecture編】

今回は、Human Interface Guidelinesの/app-architecture部分をまとめました。 昔、Human Interface Guidelinesを読んだことがあったのですが、分かった"気"になっていたことを避けたいと思い、今回このnoteでは要約とデザイン例を自らアウトプットすることでしっかり理解させる狙いです。 ただあくまでデザイン未経験時にまとめたものなので、正確性は低いです。なので未経験者がまとめたものってこんな感じなのかと知りたい方に

ゆん