プログラマーの色との戦い
https://stackoverflow.com/questions/33079
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私が唯一のデザイナー/プログラマーであるプロジェクトがいくつかあり、使いやすくするためにユーザー インターフェイスを変更するのに多大な時間を費やしています。 実際のユーザーによる そして避ける 鮮やかな黄色と緑 これは「プログラマ」の設計ではよくあることです。
グラフィックデザイナーがいない場合に配色を選択するためのヒントはありますか?典型的な「プログラマ」インターフェイスの作成を避けるにはどうすればよいでしょうか?
他のヒント
話をさせてください。
私は美的な選択をする自分の能力にまったく自信がありません。私の服装を見れば、私が自信を持っていないのは当然であることがわかります。とにかく、何年も前に、私は新製品（知っている人のために言っておきますが、Cineon の「クリップ エディター」）の GUI を書く担当になりました。私はデザインのスケッチを描きましたが、上司、販売およびマーケティングの責任者、およびさまざまな「アプリケーション スペシャリスト」に色の選択を手伝ってもらいました。誰も反応しなかったので、私は「もうやめよう」と言って、ベータテスターが恐怖に怯えて変更を要求するだろうほど醜い配色を選択しました。しかし、彼らはそうではなかったので、それはそれと一緒に出荷されました。そしてお客様はこう言ったと聞きました 愛された 「大胆な色」。それだけではなく、数年後、競合他社が私のクリップ エディターをそのままパクったようなプログラムを自社の製品に追加し、私の配色をコピーしたのです。
デスクトップ アプリの場合は、OS から色を取得します。私は個人的に、すべてのアプリの見た目や操作感が OS と同じであることを望んでいます。
Web アプリについては、よくわかりません。
それを念頭に置いて 10%近く 世界の男性人口のうち、何らかの重大な色覚異常を抱えている人がいます。インターフェースの色を選択するときは、常にこのことを考慮する必要があります (特に大文字が必要な場合はどうでしょうか?)男性投資家の 10 人に 1 人は、リスクとリターンを示す緑の背景のグラフにある赤い点が見えない可能性があります!)。
MSDN これについて合理的な概要があり、いくつかあります。 ウェブサイトフィルター 色覚異常がある場合にあなたのサイト (または任意のサイト) がどのように見えるかを示します。
それとは別に、私は本当に好きです カラーオーバー - ユーザーがタグ付けして定義した配色を豊富に取り揃えているだけでなく、それらをさまざまな方法で提供し、サインインしてお気に入り (またはお気に入りの配色プロデューサー) を追跡できます。
秋のテーマをチェックしてみましょう！葉が変わるとミシガン色になるのは間違いありません...
-アダム
色の選択がわからない場合は、Kuler などのカラー ガイドが良いスタートとなります。
いくつかの基本的な考慮事項:
デザインを差別化するには、色ではなくコントラストを使用します。これは、色覚異常や視力の弱いユーザーに対応するためです。
できる限り限定されたカラー パレットを使用します。「テーマ」として 1 つの色を選択し、その色の色合いを選択し、それに合わせて 1 つまたは 2 つの対照的な色を選択します。
アドバイスを得る - デザイナーからである必要はありません。これらのことに優れた目を持っている人を知っているかもしれません。また、より広範なフィードバック - 数人に意見を求めると役立ちます。
最近は以下のサイトを利用しています。 http://www.nickherman.com/colormatch/デザイナーではない私が似合う配色を選ぶのに役立ちます。私は通常、かなり気に入った色を見つけて、このウェブサイトで一致する色を使用します。
それでもだめなら妻にも相談してみます！
私が使用しているいくつかの更新されたリソース:
Colorotate.org は、ユーザーが投稿したさまざまなサイズのパレットを備えた、うまくデザインされたサイトです (パレットごとに 5 色しか提供しない kuler とは異なります)。これにより、さまざまなタイプの色覚障害を持つ人々にその組み合わせがどのように見えるかを確認できます。
colorchemedesigner.com さまざまなアルゴリズム (補数、トライアド、テトラッドなど) を使用して一貫したパレットを生成します。
アドビの クーラー ウェブサイトには、デザイナーがアップロードしたユーザー作成の配色が多数あります。通常、私は最初にランクの高いスキームを検索します。
ウェブ上には「カラーテーマピッカー」がたくさんあります。これらを使用すると、少なくとも色が同じように見えるようになります。私がグーグルで最初に見たもの： http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?
本格的なパステルカラーよりもわずかに暗いパステルカラーを目指しましょう。たとえば、パステルレッドは (255,0,0) 赤よりも暗くなります。同じパレットから色を選択してみてください。私が使用している配色を決定するずるい方法の 1 つは、Office 2007 アプリ (通常は Excel) のスクリーンショットを撮り、カラー ドロッパー ツールを使用して調整されたパレットからいくつかの色を貼り付けることです。 Paint.NETのようなアプリ。実際、この不正なアプローチは、あなたが賞賛する配色を備えた既存のアプリケーションから配色を「借用」することにも拡張されます:-)
アプリの「テーマ」色を選択した場合、次を使用できます。 クーラー パレットに肉付けするのに役立ちます。
関連記事:
- Web 2.0 の色の組み合わせ
- もっと見たことがあるはずですが、見つかりません:)
私は白と黒のほかにグレーを多用し、物事をシンプルにし、迷惑で明るい色は避けます。それがSOの人たちがやったことのように私には思えます。
Vitaly Friedman の Web デザイナーと Web 開発者向けの必須ブックマークには、オンライン上の多くのブックマークがリストされています カラーツール, 、また 凝縮版
もあります。 twiki.org のカラー ツールのリスト それには追加のサイトがいくつかあります。
まずは計算による色彩理論について読むことから始めることをお勧めします。実際、ウィキペディアはこのテーマについて学ぶのに最適な場所です。Wikipediaで色の名前を調べてみてください。期待以上のものが見つかるでしょう。フィールドの概要がわかるまで、そこから分岐してください。
分析眼を養うときは、さまざまな色空間でのさまざまな表現の観点から、お気に入りの (または最も嫌われている) インターフェイスの色とパレットを理解することに集中してください。RGB、HSB、HSL。Photoshop/GIMP を開いたままにして、パレットの主観的な体験とその定量化可能な側面を一致させることができます。画質の悪いモニターで色がどのようにレンダリングされるかを確認してください。常に読みやすいものは何か、また、どの色の組み合わせが魅力的でない、または判読できない結果をもたらす傾向があるかに注目してください。特定のパレットが伝える感情的な情報に注目してください。パターンが現れるのがすぐにわかります。たとえば、特別な目的を除いて、UI コンポーネントでは彩度の高い色を避けるのが最善であることがわかります。
最終的には、ここで推奨されているパレット ジェネレーターの出力を分析できるようになり、何が適切な一致をもたらすのか、ほとんどのディスプレイで適切に再生するにはどれくらいのコントラストが必要かについて独自の理論を構築できるようになります。
(潜在的なフラストレーションを避けるために、Pantone の無料の色知覚テストにスキップすることをお勧めします。カラー調整されたディスプレイで撮影するのが最適です。色の知覚が苦手であると診断された場合は、数値分析が特に重要です。)
なぜプログラマーは自分にはデザインスキルがないと考えるのでしょうか?それは私にとって非常に腹立たしいことです。他のスキルと同じように、学習可能なスキルです。
