web-dev-qa-db-ja.com

ライトボックス設定のラベル付け

画像を表示するlightboxの設定を調整できるUIがあるとします。次のようになります。

enter image description here

上記のモックアップの「バックグラウンド」とは、実際にはoverlayを指しますが、システムの平均的なユーザーに伝えるには不適切な用語です。

概念的には、画像にも背景があります(白の色-上記のモックアップでは#FFF)。ただし、同じ用語を2つの異なるものに使用することはできません。

さらにあいまいにするために、paddingプロパティがあります。これは、実際には画像の背景が画像自体よりも大きい(世界のすべての四隅で同じ距離)ことを示します。

以下の図は現在のラベル付けスキームを伝えようとしています:

enter image description here

私の質問はこれです:

  • 画像の背景に何をラベル付けするか(上の図の「???」の矢印で指摘)

モックアップのように「色」を書くだけでは、十分に具体化されていないと思います。

7
agib

オーバーレイにはbackground color/opacityを、???ラベルの付いた矢印が指す部分にはimage borderの組み合わせを試してみます。私の主な理由は、かなりの数のユーザーがimage backgroundと背景の内側写真(例では黒い部分)を混同するのではないかと思います。

これは非常に簡単にテストできます。数人のランダムな人を見つけて、ラベルなしで画像を表示し、画像、画像の背景、オーバーレイ(この用語はおそらく多くの人には知られていないでしょう)などを指すように依頼します。または、他の方法で回避します:表示彼らにあなたの写真を見せ、彼らがあなたが指しているエリアをどのように呼ぶのか彼らに尋ねます。

-

さて、ここにいくつかの簡単な発見があります( テスト結果をクリック )。スクリーンショットの10人に「画像の背景をクリックしてください」と尋ねられました。 6人が写真の内側をクリックした、4人がオーバーレイをクリックした、そしてnobody写真の白い領域をクリックした。これを念頭に置いて、私は本当に白い部分の「画像の背景」以外の用語を見つけようとします。

plasma map for task 'click' image background

10
Marielle

画像の背景image backgroundと呼びます。

また、現在呼び出している領域の名前をbackgroundpage maskのように変更します。つまり、page mask colorページマスクの不透明度

編集他の回答(特にマリエルの回答)を確認したら、画像の背景画像の囲みまたは画像のフレームを呼び出します。

3
Kalessin

それを額縁と呼びます。それは日常のオブジェクトに似ています。

3
puppybeard

あなたは??? 画像枠

2
gef05

設定のプレビューを表示するようにインタラクティブな凡例についてはどうでしょうか?

あなたが完璧な比喩的な用語、あるいは露骨に露骨な説明さえ見つけたと思っても、ユーザーはあなたを混乱させます。

2
Settsu

背景色->「背景色」

背景の不透明度->「透明度」

色->「ボーダー色」

パディング->「ボーダー幅」

1
Matt

デンマーク語の翻訳あり

背景色->「シェードカラー」(nedtoningsfarve)

背景の不透明度->「シェード量」(nedtoningsfaktor)

色->「フレーム色」(rammefarve)

パディング->「フレームの厚さ」(rammetykkelse)

1
neoneye

あなたが提案したデザインは実装重視で、UIコントロールはコードの設定に直接対応しています。

ユーザーの目標に焦点を当てたにして、一般的なユーザーがやりたいことと一致させるのがよいでしょう。この場合、それはフレーム/背景の組み合わせを与えられた画像で見栄えよくします。いくつかの設定プリセットを提供し、ユーザーがワンクリックでサムネイルから選択できるようにすることができます。

これはOffice 2007+のエフェクトギャラリーに似ています(ただし、画像自体ではなく、フレーム/背景に焦点を当てます)。

enter image description here

もちろん、アプリがピクセルレベルの制御を必要とするプロのデザイナーを対象としている場合は、詳細なオプションが必要な場合もありますが、それでも主要なタスクに焦点を当てたUIを使用し、詳細オプションとしてパラメーターを設定する方がよい場合があります。

0
dbkk