ウェブサイトのインタラクション デザインの分析: 依然として盛況で、ケーキにアイシングを追加する場所

ブラウザは魔法のツールとして、インターネットの多彩な世界への窓を開くのに役立ちます。現在まで発展を続け、次々にバージョンアップしてきました。その派手さに魅了される人もいれば、そのスピードにとりつかれる人もいます... 私たち復元エンジニアは、その背後にある技術革新、つまり CSS3 のサポートにもっと注目しなければなりません! 前回、ガーフィールドは誇張された CSS3 アニメーションを実演してくれました。今回は、まずは詳細から始めて、CSS3 と Weibo が出会ったときにどのような期待が持てるかを見ていきます。

もちろん、その前に、weibo.com を訪問するヒーローのアーティファクトの割合を理解する必要があります。

PS: (データは Sina Weibo の「製品データ分析バックエンド」の 2012 年 1 月のブラウザシェアから取得)

アイコンから、IE6 の割合が徐々に減少していることがわかりますが、一方で CSS3 をサポートするブラウザもかなりのシェアを占めています。これは、一方では IE6 互換性をより選択的に放棄できると同時に、他方では CSS3 をサポートする高バージョンのブラウザにもより配慮できることを意味します。

具体的にどのような詳細がケーキの上のアイシングとみなされるでしょうか? この記事は、製品の詳細にどの CSS3 効果を表示できるかを探るための出発点にすぎません。また、この記事の後、できるだけ早く、言及されているものを Weibo の最適化に徐々に導入する予定です。

疑似クラスを使用してユーザーエクスペリエンスを向上させる

たとえば、Web ページを閲覧するときに、読みやすくするためにマウスを使用してテキスト コンテンツの一部を反転することがよくあります。このとき、Web ページ上のテキストは通常​​、明るい白のテキスト + 青い背景色で表示されます。以下のように表示されます。

しかし、メインのWeiboサイトには、深いスキンと浅いスキンの2つのスキンがあります。暗い肌の背景になると、青い背景に白い文字が表示されたままになり、効果は特に美しくありません。この時点で、擬似クラス選択を使用して、Web ページ上のテキストを強調表示し、反転選択の表示効果を変更するためのデザイン ソリューションを提供することを実際に検討できます。マウスでテキストを選択した後、対応する背景色とテキスト色を設定したり、透明にしたりすることもできます。シンプルな属性は、製品のユーザー操作に対する配慮を反映し、ユーザー エクスペリエンスを向上させます。

グラデーションフォントを使用して視覚的なインパクトを高める

CSS3 の普及に伴い、テキストのカラー グラデーション効果はデザイナーやフロントエンド エンジニアの間でますます人気が高まっています。適切なグラデーションにより、テキストが紙に刻まれたかのように質感を帯びて見えるため、ユーザーに優れた視覚体験を提供できます。 CSS3 でサポートされているテキストの透明度を使用して、背景のグラデーションを表示することでテキストのグラデーションをシミュレートできます。いくつかのトランジションアニメーション効果を使用すると、単純なマーキー効果をシミュレートすることもできます。以下のように表示されます。

ハハハ。しかし、このデザインをあまり真剣に受け止めないでください。これは単なるデモンストレーションであり、当社の UDC の味を代表するものではありません。

マウス操作による改善**

マウスのクリック、ホバー、およびアクティベーション操作は、今日の WebPC において依然として最も重要なインタラクション方法です。 Sina Weibo 上のインタラクティブな操作のほとんどもここから来ています。 V4ワイドバージョンを例にとると、現在のWeiboメインサイトでマウス操作で操作できるモジュールは、おおよそ、トップガイド、左列ナビゲーション、メダルリスト、フィードエリア、右列スキン選択ボタン、スキン選択ポップアップレイヤーなどです。

例えば、Weiboナビゲーションの左側にあるメダルバーには、下方向に拡張できる操作領域があります。マウスを移動すると背景色が変わりますが、少し唐突に見えます。長い時間が経つと、ユーザーはこの変更に飽きてしまうかもしれません。問題ありません。CSS3 を使用して、より活気のあるものにすることができます。 CSS3 トランジション プロパティの出現により、この問題はうまく解決できます。遷移時間を設定することで、このエフェクトに手続き的な変化効果を持たせることができ、マウスを移動したときの変化効果を、柔らかく段階的に現れたりフェードしたりするように処理することができます。これにより、突然の視覚的変化が改善され、エレガントな操作体験が提供されます。

そして想像力を広げてください。メダルをクリックして操作領域を拡大すると、メダルモジュールが 1 行からすべてに拡大します。バンッ、何十個ものメダルが飛び出しました。この拡大効果も、先ほどのような穏やかな方法で実現できるのでしょうか? CSS3 が誕生する前は、この効果は js の助けを借りてのみ実現できました。現在、この効果は CSS アニメーションに任せるのが最も適切です。 CSS3 は、展開速度機能を制御するだけでなく、展開されたコンテンツの透明度を設定することもできます。もちろん、上級ブラウザでのみお楽しみいただけますよ〜

アニメーションを使って注目を集める

写真作品では、レイアウトが厳格になりすぎず、写真に余裕を持たせることが重要です。この声明は、Web デザインに適用する場合にも重要な意味を持ちます。まずはWeiboのホームページを見てみましょう。さまざまなモジュールがぎゅうぎゅうに詰め込まれていて、レイアウトが少し地味に見えます。このとき、右上隅の虹色のボタンが最後の仕上げになります。

実際、このデザインは以前の Sina Blog デザインの続きです。図のように

おそらくコスト上の理由から、Sina Blog はマウスホバーアニメーションのデザインに Flash を使用しました。 Sohu Weiboの例を見てみましょう。マウスをホバーすると、ゆっくりと拡大します。

主に js 時間を使用して、ボタンの外側の層にあるクラス名 123 の切り替えを制御し、3 回連続して切り替えた後のこのソフト拡張効果をシミュレートします。

Sina Weibo の現状は、ユーザーがマウスをホバーすると、虹が単にジャンプするだけです。少し「スピリチュアル」さが欠けていると感じる場合は、いくつかのエフェクトを追加して確認してみてください。

CSS3 を使用して、回転して飛び出し、フェードアウトする 5 つの尖った星をいくつか追加するだけです。これにより、クリックすると何かサプライズがあるかのように、明るく活気のある感覚が人々に与えられます。これは、ページに活気を与えるという今日の多くのインターネット製品の要件を満たすだけでなく、ページを退屈にせず、同時にユーザーのクリック欲求を喚起することもできます。以下に示すように、五芒星が飛び出す瞬間の 4 つの状態は次のとおりです。

非常にパスではありませんか? もちろん、これは単なるデモンストレーションであり、私たちのUDCの味を表すものではありません。

ボタンの多形効果を使用して直感性を向上させる

デザインするときは、常にボタンの 3 つの状態を考慮します (アクティブな状態がない場合でも、少なくともリンクとホバーは必要です)。ボタンの 3 つの状態は、ユーザーのクリック プロセスをシミュレートするために使用されます。優れたボタン デザインは、特に一部の電子商取引 Web サイトでは、ユーザーのクリック意欲を大幅に高めることができます。ボタンが適切に作成され、クリックしやすいかどうかは、電子商取引 Web サイトの最終的な取引量に直接影響することもあります。

CSS3 の登場により、アニメーション、グラデーション、ボタン遷移効果、影などの属性を使用することで、ユーザーのクリック プロセス全体をより細かくシミュレートできるようになり、ユーザーはインタラクティブ プロセス全体を通じて快適で心地よいと感じることができます。例えば、下の図で作成したものは、CSS3 3D を組み合わせてシミュレーションした立体的なキーボード効果です。 Z、X、N、M キーが押されており、他のキーは押されていないことがわかります。ユーザーがボタンを長押しすると、キーが押されていることをシミュレートするアニメーションが表示されます。押すと光の投影は変わりませんが、テキストの凸凹が変わります。これにより、ユーザーのクリック プロセスをより正確にシミュレートできます。

これを見ると笑ってしまうかもしれません。これらは、まだ実行されていない単なる紙上の話やアイデアです。もちろん、一歩ずつ進み、一口ずつ食べていく必要があります。一度にこれほど多くの最適化のアイデアをオンラインで公開することは不可能です。しかし、実際には、当社のオンラインの詳細の一部には、CSS3 の機能もいくつか使用されています。

たとえば、新しくリリースされたマイクロチャリティでは、マウスを動かす多くの場所でトランジション属性が使用されており、マウスの動きの効果が柔らかくエレガントになっています。

投票プロジェクトもあります。ユーザーが参加者のアバターの上にマウスを移動すると、0.2 秒の遷移と 2 ピクセルの緑の影の拡散効果が発生し、現在マウスを移動しているユーザーを効果的にユーザーに思い出させることができます。

実際、多くのインタラクティブな詳細は設計ドラフトに反映できないため、エンジニアにはある程度の感性と直感が求められます。UE ドラフトがリリースされた後、インタラクション デザイナーと具体的かつ実現可能なインタラクティブ ソリューションについて話し合うことが、製品エクスペリエンスを向上させる最善の方法です。

また、国内ブラウザの割合の現状から、CSS3 を大規模に使用することはできません。しかし、業界の一員として、まずは細部から始めて、徐々に高バージョンブラウザでのウェブサイトの細部品質を向上させていくことが、多かれ少なかれ高バージョンブラウザのプロモーションに影響を与えると考えています。この記事を読んだ後にブラウザをアップグレードし、Firefox と Chrome を試し始めれば、この記事は成功です。 UDC ブログに投稿するのは今回が初めてです。皆さんを笑わせてしまってごめんなさい。

元のタイトル: ウェブサイトのインタラクション デザインの分析: 依然として盛況、ケーキにアイシングを追加する場所

キーワード: ウェブサイト、インタラクション、静かな枝、豊かな葉、錦はどこにあるのか、花を追加する、閲覧、1人の神、助けて、ウェブマスター、ウェブサイトの宣伝、お金を稼ぐ