apeescape2.com
  • メイン
  • Uiデザイン
  • 投資家と資金調達
  • 製品ライフサイクル
  • モバイル
Uxデザイン

暗いUI。善と悪。規則ルール。

ダークUIはドラマチックでスタイリッシュ、そしてエレガントです。それでも、「ダークサイド」を歩くことを選択した場合、設計者は慎重に踏み込む必要があります。

製品のルックアンドフィールを作成することは、設計者の主要な責任の1つです。最初の設計決定は、製品の目的、特定の状況、およびその対象者に適切である必要があります。配色は長期的な影響を与えるため、慎重に選択する必要があります。すべては、デザイン要素を配置する背景である「キャンバス」の選択から始まります。通常の選択は、ほとんどデフォルトで、白い背景です。

明るい背景を選択するのには十分な理由があります。 コントラスト、テキスト、読みやすさ さまざまな微妙な色を処理する機能もその一部です。多くの科学的研究によると、最適な読みやすさには、白い背景に黒いテキストが必要です。会社のロゴと色は暗いカラーパレットでは機能しないため、ブランディングも決定に影響を与える可能性があります。



ほとんどの研究では、明るい背景の暗いテキストは暗い背景の明るいテキストよりも優れている、つまり読みやすいことが示されています。ある有名な研究では、被験者が暗い背景の明るい文字を読んだ場合と明るい背景の暗い文字を読んだ場合の「視覚的疲労」が有意に大きかった( バウアー、D。、ボナッカー、M。、およびカボニウス、C。R。1983 )。

もあります 期待 :人々は、画像とともに提示される白い背景に濃いインクでレンダリングされたさまざまなコンテンツを見ることに慣れています。 350年以上前から存在している新聞や雑誌を考えてみてください。さらに遡る—35 千 旧石器時代(穴居人の時代)の数年前、私たちはライオンやマンモスの洞窟壁画を、一般的に明るい背景に配置し、木炭や焦げた骨を使って描写しました。

フランス、ショーヴェ洞窟の先史時代の絵画

3万年前の先史時代の絵画 フランス、ショーヴェ洞窟 。

それにもかかわらず、プロジェクトがそれを正当化するとき、今日は デジタルプロダクトデザイナー さまざまな理由で、暗い配色で作業することを選択する場合があります。上で示唆したように、それはドラマを伝え、感情を引き出すことを意図した美的選択であることがよくあります。 デザイナー デザインとブランディングを融合させたい、またはビジュアルコンテンツを目立たせたい。

林檎

Apple TVの場合、Appleのサイトは劇的な効果のために暗いUIに切り替わります。これは、その使用が通常、夜の娯楽に関連しているためです。

ただし、設計者が「ダークサイド」に移行することを選択した場合、多くの課題に直面します。あらゆる種類のユーザビリティの問題が関係しています。主に、スキャン可能性、読みやすさ、コントラストに関連しています。考慮すべき主な側面は、テキストと背景の十分なコントラストです。コンテキスト(ユースケース)と環境、およびUIが表示される可能性のあるデバイスも考慮する必要があります。

ブライトリングは、時計のデザインを際立たせるために、背景を黒にすることにしました。

ブライトリングは、時計のデザインを際立たせるために、背景を黒にすることにしました。

一部の暗いUIは、「デジタル眼精疲労」を最小限に抑えるように設計されています。デジタル技術の増加に伴い、私たちは一日のほとんどの間画面を見つめています。 デジタル眼精疲労 毎日何百万人もの人々に影響を与える一般的な状態です。コンピュータの過度の使用から明るい光への定期的な曝露まで、あらゆるものが原因で、頭痛、首の痛み、かすみ目、火傷/刺痛を引き起こす可能性があります。

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

次のようなものもあります コンピュータビジョン症候群 (CVS)および「眼の不快感」。ある調査によると、アメリカ人の83%以上が1日2時間以上デジタルデバイスを使用しており、60.5%がデジタル眼精疲労の症状を経験していると報告しています。 (( 露出オーバーの目:デジタルデバイスのジレンマ 。)

企業間SaaS製品とマルチメディア編集アプリケーションは、何時間も続けて使用されています。多くは、目の疲れを軽減しながら視覚的な明瞭さをサポートするために、暗いテーマのUIで設計されています。ただし、このようなアプローチでは、設計の方向性を慎重に事前に評価する必要があります。

Bloomberg AnywhereiOSアプリのダークUIデザイン

Bloomberg Anywhere iOSアプリ( ジェレミー・フュルスト )。

ほとんどの開発者は、目の疲れを軽減するために、色分けされた構文の黒い画面を使用しています。 ApeeScape開発者として ケビン・ブロッホ 「黒い背景は目の疲れを軽減し、自動カラーコーディングを読みやすくします。これにより、コードが一目で理解しやすくなります。」

ApeeScape開発者 アミン・シャー・ギラニ| 「私は自分のコードエディタにソーラー化されたダークテーマを個人的に使用しています。私は暗いテーマを好みます。なぜなら、特に照明を暗くしたり、夜に仕事をしたりするのが好きなので、背景が暗いほど目に優しいからです。」

ApeeScape開発者AminShah Gilani

ApeeScape開発者 アミン・シャー・ギラニ| のコードエディタ 原子 。

ゲームアプリのUIも、テーマが暗くなる傾向があります。ゲームのコンテキストとプレーヤーがゲームをしている環境は、黒いカラーパレットによく合います。黒の背景デザインは、印象的なビジュアルを強化し、謎の感覚を導入し、より良いコントラストを持ち、ビジュアル階層をサポートします。

HaloアプリWindowsの黒い背景デザイン

ダークUIがうまく機能する場合

エンターテインメント関連のUI(スマートTV、ゲームコンソール、TVおよびムービーアプリ)の大部分は、正当な理由から、暗いテーマのUIデザインを持つ傾向があります。ほとんどの娯楽関連の活動は夕方に行われ、6〜10フィートの距離から見られ、薄暗い部屋で見られます。つまり、画面は環境と一致します。さらに、カラフルなコンテンツ(カバーアートや​​プロモーションなど)は、暗いテーマのUIで劇的に目立ちます。

目的は、アクティビティのコンテキストに一致させることです。「暗くなり、リラックスしていて、テレビを見たい」。何千もの小さな電球と同様に、デジタルスクリーンは明るいピクセルが存在する場所ならどこでも光を発します。したがって、明るいUIは部屋を明るくします。これは、アクティビティを考慮すると望ましくない効果です。このシナリオでは、UIデザインは、デバイス、コンテンツ、アクティビティ、および環境というコンテキストに一致させようとしています。

Hulu

Hulu。


Netflix

Netflix。


Apple iTunes

AppleiTunesアプリ。

適切なコンテキスト、環境、アプリケーション、および使用法では、黒の背景のUIが理にかなっています。常に考慮してください 環境 インターフェースが使用される可能性が高いこと。しかし、それはそれ以上のものです。それを使用するかどうかは、 コンテンツとコンテキスト : 何 、 いつ 、 どこ 、および どのデバイスで 。

  • 印象的なビジュアルの強力で劇的な外観を実現する
  • スタイルとエレガンス、ラグジュアリー、プレステージ感を投影する
  • 陰謀と謎の感覚を作り出すために
  • 最小限の注意散漫でユーザーの注意を集中させ、導くのに役立ちます
  • 視覚的な階層と情報アーキテクチャをサポートするため

車のリモートコントロールと診断の概念

車のリモコンと診断の概念 Ramotion 。

暗いUIは、まばらで最小限のテキスト、および視覚に重点を置いた「チャンク化された」情報、つまりテキストに光を当てる場合にのみ使用する必要があります。テキストを使用する場合は、暗い背景とのコントラストを高くする必要があります。できれば、純粋な白または黒の背景に別の強い色(濃い​​灰色ではない)を使用します。

ウェブサイト上の強いコントラストのテキストと画像の暗いカラーパレット

ブリュッセルのフィルムアーカイブであるCINEMATEKは、劇的な効果をもたらすために黒い背景を使用しています。

暗いUIがうまく機能しない場合

記事の前半で示したように、暗いテーマのUIは、テキストが多くデータが多いコンテンツや、さまざまなコンテンツタイプ(テキスト、画像、ビデオ、データテーブル、ドロップダウン、フィールドなど)を使用する場合には適していません。 )。デザインコミュニティの一般的なコンセンサスは、単純なコンテンツを扱っていて、あちこちにテキストを散りばめている場合を除いて、ダークUIはデザインにとって大きな課題であるということです。

課題は、十分なコントラストを維持しようとすることです。これは、包括的な課題である、UXに影響を与えるユーザビリティに関連する読みやすさに影響を与えます。一般的に、 すべて 色は白い背景で機能しますが、暗い背景では、有効な色の範囲が大幅に減少します。

分析のための黒い背景デザインには注意して取り組む必要があります

この例の一部のUI要素ではコントラストが不十分であり、UXに影響を与えています。 (沿って GUOHAO.W )

これが実際の例です ない 暗いテーマのUIを使用する:私はB2B SaaSプロジェクトに関与しました。そこでは、CEOが「違う」ために、会社のブランディングに一致する暗いテーマのUIを使用したいと固く決心しました。プラットフォーム全体。全てにおいて。数回のミーティングの後、そしてデザインチームを結集して プロダクトマネージャー 原因の背後で、私たちはそのような潜在的に悲惨な決定から彼に話しかけることができました。

プラットフォームはSaaSアプリケーションUIコンポーネントの標準セットを使用していたため、フォーム、ウィジェット、ドロップダウン、ピクトグラム、アイコン、および表のテキストと数値データでいっぱいでした。十分なコントラストと一貫した配色を実現しながら、ナビゲーション、レイアウト、および機能を管理することは非常に困難になります。要約すると、暗いテーマのUIですべてを機能させることはほぼ不可能でした。

アプリケーションの適切性に応じて、おそらく正しい選択は、 ミックス 明るいUIと暗いUIのたとえば、ウィジェット、フォーム、およびデータテーブルを含む設定ページは明るい背景で設計でき、グラフを含む分析ページは暗い配色で設計できます。

分析ダッシュボードUI

ダッシュボードUI、分析、およびインフォグラフィックは暗いUIでうまく機能しますが、十分なコントラストを確保するために「注意して処理」する必要があります。 (沿って アレックスギレフ )

ダークUIを使用する際の注意事項と注意事項

最後に、暗いUIを使用するという決定には、注意して取り組む必要があります。 デザイナー ヒップである、違う、または他の誰かのデザインをコピーするなど、間違った理由でそれを行うべきではありません。設計者がコンテキスト、コンテンツ(コントラストと読みやすさ)、デバイス、ユースケースを検討し、選択する正当な理由があることが重要です。潜在的に多くの利点がありますが、多くの落とし穴もあるため、これは微妙なバランスを取る行為です。

暗いUIを使用しても問題がない場合:

  • ブランディングの配色がそれを正当化するとき
  • デザインがまばらでミニマリストで、コンテンツタイプが少ない場合
  • 夜間のエンターテインメントアプリなど、状況や用途に適している場合
  • 長期間使用される分析ページなど、目の疲れを軽減するため
  • 感情を引き出すために-例えば、陰謀と謎の感覚
  • 印象的でドラマチックな外観を作成するには
  • 高級感と威信を生み出すために
  • 視覚的な階層をサポートするには

暗いUIを避けたほうがよい場合:

  • テキストが多い場合(暗い背景で読むのが難しい)
  • 画面に混合コンテンツが多い場合
  • 多くのフォーム、コンポーネント、ウィジェットを備えたB2Bアプリケーションの場合
  • デザインが幅広い色を必要とする場合

ゲームの黒の背景デザインはしません

ゲームですが、多くの混合コンテンツタイプは、暗いカラーパレットではうまく機能しません。

「ダークサイド」への乗換えには注意が必要です。落とし穴に満ちたそのような潜在的に不安定な決定を下す前に、より深く、より徹底的な調査と分析が推奨されます。デザイナーがその道を進むと、後戻りするのは非常に困難です。設計者は、両足でジャンプする前に、良い点と悪い点、すべきこととすべきでないことなど、すべての側面を検討することをお勧めします。

•••

scorp vs c corp vs llc

ApeeScapeデザインブログの詳細:

  • eコマースUX–ベストプラクティスの概要(インフォグラフィック付き)
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
  • モバイルインターフェースのヒューリスティック原則
  • 予測的デザイン:魔法のユーザーエクスペリエンスを作成する方法

Fintech UXの習得–設計のケーススタディ

Uxデザイン

Fintech UXの習得–設計のケーススタディ
.NETCore-ワイルドでオープンソース化。マイクロソフト、どうしてそんなに時間がかかったの?

.NETCore-ワイルドでオープンソース化。マイクロソフト、どうしてそんなに時間がかかったの?

データサイエンスとデータベース

人気の投稿
Brexitが金融サービスセクターに与える影響
Brexitが金融サービスセクターに与える影響
マイクロサービス入門:Dropwizardチュートリアル
マイクロサービス入門:Dropwizardチュートリアル
IoT開発の開始:ESP8266Arduinoチュートリアル
IoT開発の開始:ESP8266Arduinoチュートリアル
効果的なランディングページをデザインする方法
効果的なランディングページをデザインする方法
売上予測とは?
売上予測とは?
 
Azureチュートリアル:Azure Machine LearningStudioを使用したガソリン価格の予測
Azureチュートリアル:Azure Machine LearningStudioを使用したガソリン価格の予測
挑戦的なM&A市場で最大の価値のためにビジネスを売る
挑戦的なM&A市場で最大の価値のためにビジネスを売る
Rでデータの変更を後押し
Rでデータの変更を後押し
第11章破産:それは何であり、次に何が起こるか?
第11章破産:それは何であり、次に何が起こるか?
生成的敵対的ネットワークを使用してランダムノイズからデータを作成する
生成的敵対的ネットワークを使用してランダムノイズからデータを作成する
人気の投稿
  • ネイティブqrコードスキャナーに反応する
  • javascriptは時間なしで日付を取得します
  • ユーザーエクスペリエンスを測定する方法
  • ObjectiveCとSwiftの違い
  • ラズベリーパイ3の作り方
  • Windows10で書かれたプログラミング言語は何ですか
カテゴリー
ブランドデザイン 設計プロセス 財務プロセス ヒントとツール 収益性と効率性 バックエンド 仕事の未来 Kpiと分析 リモートの台頭 その他

© 2021 | 全著作権所有

apeescape2.com