web-dev-qa-db-ja.com

1つのページのさまざまなツールチップに異なるスタイルを設定しますか?

私はWebアプリケーションに取り組んでおり、ルックアンドフィールの一貫性に重点を置いています。ツールチップスタイルをデザインしているとき、「プレーンスタイル」ツールチップとすべての種類のスタイルツールチップがあることがわかります。 bootstrap 1などです。

以下は単純なツールチップの例です:

enter image description here



以下は、「スタイル付きツールチップ」の例です。 enter image description here

同じページで同じスタイルのツールチップを使用する必要があると考えるのは自然なことですよね?しかし、実際にはGoogleドライブは両方を1つのページで使用し、互いに非常に近接しています。

下の画像が示すように、Googleドライブの右上隅で、グループAのすべてのアイコンは「プレーンスタイルのツールチップ」を使用します。一方、グループBのすべてのアイコンは「スタイル付きツールチップ」を使用します。

この違いの可能性が高いUXの理由はありますか?

enter image description here

8
Ning Hao

これはGoogle UIのバグであり、意図的なものではありません。

その違いに気付いたのは当然でしたが、優れたデザインの例として使用すべきではありません。

現在(2015年3月)の時点で、Googleはアプリとプラットフォームを Material Design に移行する長いプロセスの真っ最中です。ほとんどのアプリが準拠するまでにはしばらく時間がかかります。

マテリアルデザインには、一貫性のあるツールチップに関する特定のガイドラインがあります ここ 。最終的に、Googleのツールチップは、マテリアルデザインガイドラインに準拠するように移動する必要があり、次のようになります。

tooltips

11
tohster

ドライブがGoogleアカウントのキャンバスで作業しているチームとは別のチームによって開発されたためだと思います。 UI/UXではなく、スケジュール/プロダクションの問題の方が多いと思いました。

6
François D.

技術的には、上部と下部は2つの異なるソフトウェア製品に属します。
上の1つはユーザーアカウントにUIを実装し、ナビゲーションを処理します。
下部は現在のアプリケーションに属しています。

私はそれらが異なる時間に作成されたと想定しています。これらの間で、ツールチップのスタイル方法に関して、使用されるstyle guideに変更がありました。

したがって、一方の部分はスタイルに関して最新であり、他の部分は将来のUI更新の一部としてそのスタイルに変更されることを期待しています。

2
Volker Siegel

信頼できる回答はありませんが、2つのツールヒントは異なる環境を参照しているため、Googleの設計者はそれらを区別したいと思ったかもしれません。

最初の「プレーン」なツールチップは、Googleのメインナビゲーションセクション用です。

2番目の「スタイル付き」ツールチップは、より広範なGoogle環境内の個々のアプリ用です。

1
Mayo

可能であれば、ネイティブのツールチップを使用します(アイコンや色を使って凝ったツールチップを作成しようとしていない場合)。これはユーザーにとって最も馴染みのあるものであり、カスタムソリューションを使用するときのように、アクセシビリティなどについてそれほど心配する必要はありません。

0
J. Dimeo