One UI
ワンUI / 2018– / スタイル / プラットフォームの画面言語
Samsung が Galaxy 向けに定めた設計言語。指が最も届きやすい高さで画面を割り、上を見るだけの領域、下を触る領域として、見出しを上に、ボタンとタブと対話箱を下へ集める。内容は角を大きく丸めた箱にまとめ、地は白か真っ黒、強調は青一色に絞る。
画面の上側が見出しと余白だけで占められ、操作できる部品が一つも置かれていない / 角を大きく丸めたカード状の箱に、文字や画像がひとまとまりずつ収められる / 上端の見出しは開いた状態と畳まれた状態の二つしか取らず、途中の高さで止まらない / 暗い主題では地が真っ黒になり、そこに青の強調だけが乗る
辞書情報
- 向いている用途
- 大きな携帯端末の画面で、片手の親指だけで全部の操作に届くよう部品を下へ寄せたいとき。一覧画面を、区切り線ではなく角丸の箱の集まりとして組み直したいとき
- 文字
- 見出しは上の領域の高さを使い切るほど大きく取り、本文との差を思い切って開ける。畳まれたときの見出しは、開いた状態と別の短い文字列にしてよい。
- 構成
- 指の届く高さで画面を二つに割る。上には見出しと余白だけを置き、押すもの、切り替えるもの、確認を求めるものはすべて下へ集める。左右の余白は 24dp を下回らせない。
- 素材
- 角丸は 12dp から 26dp を目安に大きく取る。地は #fafafa か #000000 の二択にし、強調は青ひとつに絞って、それ以外の色を画面へ持ち込まない。
- 注意
- 見るだけの領域に押せる部品を置いてしまうと、画面を上下に割った理由が消え、ただ余白の広い画面になる。
- 関連研究
- One UI Design Guidelines の Structure 章にある領域分割の定義 / 開いた見出しと畳まれた見出しで文言を変えてよいとする規定 / Android のカラーカテゴリの仕組みを One UI がどう流用しているか
関連項目
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/one-ui
- Markdown
- [ワンUI（One UI） — デザインスタイル辞典](https://indexstyle.org/ja/styles/one-ui)
- HTML
- <a href="https://indexstyle.org/ja/styles/one-ui">ワンUI（One UI） — デザインスタイル辞典</a>