アプリUIのスタイル12選：Palm OSからLiquid Glassまで
Palm OS、Aqua、Metro、Material Design、Fluent 2、HarmonyOS、Liquid Glassなど、アプリとOSの画面言語を系譜と設計思想で比較するガイド。
このガイドの選定基準
汎用UI部品の一覧ではない。記録されたプラットフォームまたはデザインシステムに結びつき、複数の画面をまたいでも見分けられる反復可能な視覚文法を持つものだけを選んだ。 独立項目にする5条件
スタイルと分けているもの
カードUI、コマンドパレット、モバイルファーストは、情報のまとまり方、機能への入口、制作順序を定める。下のどの画面言語でも実装できるため、スタイルではなく補助用語として扱う。
デスクトップの比喩と初期の個人端末
窓、物体、質感、強い制約を使い、未知だったコンピュータを読める道具へ変えた画面言語。
580
CDEインターフェース
CDE Interface / 1993–2000s
UNIXワークステーション各社が共通化したCommon Desktop Environmentの画面言語。Motif由来の厚い立体縁、前面パネル、ワークスペース切替、限定色のアイコンで、異なる機種でも同じ仕事場を作った。
見分ける特徴: 画面下端に置く箱状のFront Panel / 明暗2本の縁で盛り上げたボタンと沈めた入力欄 / 小さな色数と黒い輪郭で描くピクセルアイコン / 複数ワークスペースを常設ボタンで切り替える
599
Palm OSインターフェース
Palm OS Interface / 1996–2009
小さなモノクロ画面、スタイラス、少ないメモリという条件から、アプリ名を置くTitle、右上のCategory、下端のCommand Bar、直接書き込むGraffiti領域を一貫した仕事道具へまとめた携帯端末の画面言語。
見分ける特徴: 160×160前後の低解像度モノクロ画面 / 上端のTitleと右上のCategoryポップアップ / 下端から現れるCommand Barと四つのアプリボタン / 細い1bitアイコン、罫線、Graffiti入力領域
399
581
KDE Oxygen
KDE Oxygen / 2006–2014
KDE 4のアプリ、ワークスペース、アイコンを一つの視覚へ統合したOxygen。澄んだ青、柔らかな灰、細い輪郭、棚に置かれたようなアイコンの影で、情報量の多いデスクトップへ軽さと一貫性を与えた。
見分ける特徴: 青い選択と光沢を持つ淡灰色のクローム / 1px輪郭と下方の棚影を持つ立体アイコン / 斜め上からの共通光源と磨かれた材質 / 細い区切り線でまとめたツールバーとドック
大規模な製品群を支えるシステム
対応するプラットフォーム、動きのモデル、情報密度、共通部品の中で許されるブランド表現の量から選ぶ。
402
472
562
Material You
Material You / 2021–
壁紙から生成するdynamic color、大胆に変化する形、個人に合わせた配色と動きで、同一外観ではなく変化を受け止める規則を一貫性とするMaterial Design 3の表現。
見分ける特徴: 壁紙由来の調和した色調 / 大きな丸みを持つカードと操作面 / 選択状態で形と色が同時に変わる / 広い余白と大きな表示文字
118
現代の奥行きとデバイス間の連続性
レイヤー、ぼかし、光、応答する表面によって、スマートフォン、デスクトップ、接続機器をまたぐ一つの世界観をつくる。
401
582
GNOME Clearlooks
GNOME Clearlooks / 2005–2011
GNOME 2.12から標準となった、親しみやすさと単純さを優先するデスクトップ・テーマ。淡い灰の窓、青い選択、丸みを抑えた光沢、はっきりした境界が、GTKアプリ全体を静かな道具へ揃えた。
見分ける特徴: 淡灰色の窓面と青い選択バー / 上側だけ明るい控えめなボタンの光沢 / 丸みを抑えたタブと入力欄 / 小さなGNOMEアイコンと簡潔な二段階の階層
601
HarmonyOSデザイン
HarmonyOS Design / 2019–
異なる画面寸法と機器の連携を前提に、カード、余白、円弧、可変書体、光を含む半透明素材を再構成するHuaweiの画面言語。単一端末の固定画面より、情報と操作が機器間を滑らかに移る連続性を重視する。
見分ける特徴: 情報を機能単位でまとめる大きな角丸カード / 明るい地に広い余白と少数の高彩度アクセント / 円弧、同心円、柔らかな拡大で示す操作状態 / 画面寸法に応じて再配置するカードと可変書体
117