ウェブサイト上のWeiboコンポーネントの再設計の詳細な紹介（写真とテキスト）

前面に書かれた
Weibo コンポーネントは、サードパーティのアクセスユーザーが開発を必要とせずに Web サイトへのアクセスを実現できるように、Weibo オープンプラットフォームによって提供されるコンポーネント製品です。 Weibo コンテンツをサードパーティの Web サイトに出力します。ユーザーはそこで Weibo とやり取りしたり、コンテンツを共有したり、Weibo に情報を同期したりできるため、サードパーティの Web サイトでのユーザーアクティビティが増加します。この改訂には、友達セレクター、パブリッシャー、共有ウィンドウなどを含む 14 個の Weibo コンポーネントが含まれます。
デザインプロセス<br />これまでの製品改訂プロセスとは異なり、今回の改訂はUDCと製品のコラボレーションによって開始されました。インタラクションデザイナーは最大限の主体性を発揮し、デザインセンターの出力時間をコントロールし、ブランドビジョン、ページ構成、製品と開発効率をコミュニケーションし、小さなステップを踏んでユーザーエクスペリエンスを向上させました。

設計準備<br />問題発見（ユーザー、携帯電話のフィードバックを観察し、一元的に整理）（ユーザーターゲット：開発者とユーザー） - 分析（シナリオを組み合わせ、現象を通して本質を見極め、データ分析と製品を組み合わせる） - 問題解決（全体から詳細まで、ユーザーニーズと組み合わせて問題を解決） - フォローアップを継続

設計プロセス中に従う最適化されたエクスペリエンス設計の原則
原則1: ユーザーに考えさせないこと
ユーザーの特定の「思考」または「タスク」の完了に影響を与えるノイズを減らし、フォークを減らし、複数選択の質問を減らし、ユーザーの操作を可能な限り最小限に抑えます。無効になっている重要なコントロールに対応するプロンプトを提供します。
共有ウィンドウに示されているように、背景はテキストを直接プリセットし、現在のページの豊富なテキスト情報と高品質を優先するという原則に従ってデフォルトで選択し、ユーザーの操作数と複数選択の質問の数を可能な限り減らします。入力が空であるか、単語数制限を超えている場合、共有ボタンは無効になり、強制的にクリックすると対応するプロンプトが表示されます。

同時に、ユーザーにとって冗長な操作が多すぎることを避けるために、パーソナライズされたデフォルトを提供し、リピーターのユーザー向けにパーソナライズされたデフォルトの選択を設定して、ユーザーがフォームをより速く完了できるようにすることができます。これは、オプションが「固定」であることが多いため、ユーザーの以前の選択が保持されるからです。肝心なのは、ユーザーの入力に価値があるなら、プログラムがそれを記憶する価値があるということです。ユーザーが WeChat グループと Weibo を切り替えると、背景にはユーザーの以前の入力が保持され、記憶されます。

原則 2: 階層を明確にし、視覚的なノイズを減らす<br />階層関係は、論理と情報構造に基づく必要があり、視覚的に反映される必要があります。しかし、ワイヤーフレームや厚い背景を使いすぎると、眩しい感じになり、逆効果になります。実際、単純なインデントでも階層関係を示すことができます。
2 ピクセルの違い: リッチテキスト領域と入力ボックスの間に 2 ピクセルのインデントがあることがわかります。リッチテキストには多くの要素があるため、結局は 1 つの全体です。2 ピクセルだけで、視覚的な要素を追加してページを複雑にすることなく、階層モジュールを区別できます。

コメントボックスの構造<br />以前のコメントボックスはフラットな構造、つまりコメントと返信が同じレベルにありました。このとき、複数の人が一緒にいるようなチャット記録が見られることが多く、閲覧ユーザーは誰がどのような問題について話しているのか理解するのが困難でした。分類後、コメントを 2 つのレベルに分けました。最初のレベルはページの内容に関するコメント、2 番目のレベルはコメントへの返信です。下図のように、コメントへの返信はデフォルトでは表示されません。展開後は50pxのインデントが入り、明確な階層関係を表現します。

設定レベル<br />外部サイトではサードパーティコンポーネントが利用されており、利用シナリオや環境を一つ一つ見積もることは難しいのが通常です。しかし、共通点は、外部サイトのスペースが非常に大きいため、ヘルプと説明情報をオープンプラットフォームに配置することを選択していることです。開発者が当社の製品を使用したい場合、まず当社の製品がどのようなものであり、それが開発者に何をもたらすのかを理解する必要があります。このような基礎と興味が喚起されると、さらにそれをどのように使用するかを知りたいと思うようになります。そのため、ページ全体を説明、利点、設定の 3 つの部分に分割します。しかし、言葉だけでは人は興味を失ってしまいます。そこで、シンプルでわかりやすい絵を使って、生き生きと説明してみてはいかがでしょうか。

原則 3: 習慣は良い助けになります<br />習慣は、新しいインタラクションに慣れるために多くの学習コストをかけずに、Web サイトでのユーザーエクスペリエンスをより合理化します。 Weiboにはこのようなインタラクションがあります。入力が空だったり、文字数がオーバーフローしたりすると、アクションボタンが強制的にクリックされ、入力ボックスの背景が点滅して、ユーザーに入力が間違っていることを知らせます。どちらもWeibo製品なので、同様のやり取りは完全に再利用できます。ユーザーは既に Web サイトのインタラクションモードをある程度理解しているため、コントロールインタラクションを適切に移植することは、インタラクションの一貫性を確保しながら労力を節約する良い方法です。そのため、マイクログループが選択されていない場合に点滅するエラープロンプトを移植し、ユーザーが次に何をすべきかを簡単に理解できるようにしました。

原則4: 即時検証
通常のコンテンツを報告するためにダイアログボックスを使用しないでください。ダイアログボックスは別の部屋なので、そこに行くには十分な理由が必要です。同時に、フォームの完了後にエラーが発見され、不要な操作が追加されることを避けるために、入力したアカウントまたはパスワードのエラーをすぐに表示する必要があります。
モバイル版の共有ウィンドウにログインすると、入力が空になります。

プライベートメッセージで共有し、友達をフィルタリングし、時間通りにプロンプトを受け取る

共有ウィンドウのオーバーフローに関するバブルプロンプト

原則5: 適切な入力ボックス（テキストボックス、ラジオボタン、チェックボックス、ドロップダウンメニュー、リストボックス）を提供する
入力フィールドの長さが、ユーザーが質問に効果的に回答するのに役立つ意味のあるヒントを提供していることを確認します。ヒントを提供できない場合は、回答に十分なスペースを確保しながら、入力フィールドの長さを一定に保つようにしてください。
Weibo コンポーネント (Weibo パブリッシャー、Weibo コメントボックス、共有ウィンドウなどのコンポーネント) の入力ボックスの高さは、設計時にコンポーネント全体で一貫していると見なすことができます。

マイクログループを選択するためのドロップダウンコントロールでは、マイクログループ名の最大文字数に基づいて適切なサイズ (15 文字の中国語) を選択します。このとき、十分なスペースがあるため、文字の切り捨てによって生じる隠れたヒントを減らすために最大長が選択されます。

原則 6: さまざまなエラーに基づいてさまざまなオプションを提供する<br />まず、設計の観点から一般的な誤った選択を避け、次に各レベルで起こり得るエラーを積極的に解決して、より多くのユーザーが肯定的な体験を得られるようにする必要があります。
プライベートメッセージに共有するためのヒント

原則 7: リンクはどれも同じではありません。リンクはユーザーのニーズに応じて差別化する必要があります。弱いリンクと強いリンクはフロントエンドに表示される必要があります。

原則 8: 色を使用して注目を集め、一貫したスタイルのシンボルを使用する<br />色は、特に特定の要素の色が他の色と対照的である場合に、特定の要素に人々の注意を引き付けることができます。重要なアクションボタンは、よりわかりやすい色でマークします。

ユーザーはテキストよりもグラフィカルな表現を好みます。

一貫したシンボルを使用します。
類似性の原理: 類似した特性 (サイズ、色、形状、向きなど) を持つ物体は、知覚と認知の観点から観察者によってグループ化されることを意味します。
近接の原理: 互いに近い（空間的または時間的）物体を見る観察者は、それらを全体として認識し、それらが同様の意味を持つと信じます。

原則9: 一貫性を保ち、基準を考慮するが、一貫性は厳格さを意味するものではない
多くのプロジェクト、特に大規模プロジェクトでは標準が重視されます。異なるデザイナーのデザインスタイルに一貫性がないため、異なるインタラクションやスタイルによって生じるエクスペリエンスの混乱を回避するために使用できます。同時に、標準はバージョンの引き継ぎや新しい人材の参加においても非常に重要な役割を果たします。仕様は参考になりますが、仕様の制限に固執してユーザーシナリオを無視する必要はありません。サイトの一貫性を保つ必要がありますが、それは厳格であることを意味するものではありません。設計する前に、標準を考慮し、変更がある場合は、より適切な理由が必要です。下図のように、コンポーネント上の操作ボタンはフォーカス条件を満たしていない場合はグレー表示となり、共有などの強制クリックプロンプトが表示されます。ただし、コメントボックスを設計する際には、コメントの内容はユーザーにとって完全にオリジナルのものであり、一定の入力コストがかかることを考慮しました。ユーザーにコメントを促したい。このとき、ユーザーの操作を促すために操作ボタンをアクティブにする必要があります。

ブランドのビジュアル体験を向上させる
今回のビジュアル全面改訂では、製品やユーザーなどさまざまな側面からの意見や要望を整理しました。しかし、提案は予想したほどスムーズにはいきませんでした。プロジェクト期間中、航空機の設計案も数多く作成されました。たとえば、当初はマイクロコンポーネントの視覚的な配置に偏りがあったため、Weibo に添付されたオフサイトコンポーネントに直面したとき、私たちは統一されたルートを取るように努めました。現状を打破し、懸命に取り組むことができなかったため、多くの中間計画が実現しませんでした。中期的には、ブランドチーム@王史撞Strongが介入し、経験と教訓から学び、マイクロコンポーネントの視覚的な配置とスタイルを再編成しました。
スタイルワード: weibo; 若い; プラットフォーム;
標準色: 赤、オレンジ

ブランド仕様:

補助グラフィックス:
セカンダリグラフィックは、ブランドアイデンティティシステムの不可欠な部分です。シンプルな三角形は、ロゴの方向パッドから取られています。ランダムな組み合わせにより、補助グラフィックスの互換性と拡張性が最大限に高まります。アプリケーション設計に最大限の自由を与えます。いわゆる認識は想起よりも優れています。物事の認識記憶は物事の想起記憶よりも強力です。
補助グラフィックスアプリケーションの例:

よりエレガントなコード以前のコンポーネントは、コードの形式に応じて iframe と js-sdk に分割されていました。製品は継続的に反復および更新されるため、サードパーティの Web サイトは js-sdk コードを呼び出して製品の更新を取得できず、製品の最適化に多くのメンテナンスの問題が生じます。同時に、js-sdk のコードフィールドは、パフォーマンスの面で一般的に長くなります。これは、iframe コンポーネントがコードをパッケージにカプセル化し、サードパーティが直接呼び出すことができるためです。一方、js-sdk のコードはすべて 1 つのレベルであるため、コードが長すぎると、Web サイトのエクスペリエンスに相応の影響が出ます。このような背景から、WBML が誕生しました。WBMLとは何ですか?
WBML (Weibo Markup Language) は、Sina Weibo JSSDK によって作成されたシンプルなマークアップ言語です。これにより、ユーザーは WBML を使用して Weibo コンポーネント (Weibo ウィジェット) を Web ページに埋め込むことができます。また、引き続きサポートされている iframe または js 呼び出しメソッドを引き続き使用することもできます。
簡単に言えば、これは js コードの行であり、コード行を引用します（つまり、iframe をその中にラップします）。
WBMLを使用する理由
便利でシンプルなコード展開方法。1 行のコードでコンポーネントタグのセマンティックパラメータカスタマイズメソッドを呼び出すことができるため、より便利に使用できます。
iframe の読み込み速度よりも優れた例最もよく使用される共有ボタンを例にとると、現在の呼び出し方法は次のとおりです。

<script charset="utf-8" type="text/javascript">// <![CDATA[ (function(){
var _w = 72、_h = 16;
var パラメータ = {
url:location.href、
タイプ:'3',
count:'1', /** シェア数を表示するかどうか。1 が表示されます (オプション)*/
appkey:'', /**申請したアプリケーションの appkey、共有元を表示 (オプション)*/
title:'', /**共有テキストコンテンツ (オプション、デフォルトはページのタイトル)*/
pic:'', /**写真を共有するためのパス（オプション）*/
ralateUid:'', /**ユーザーのUIDを関連付け、マイクロブログをユーザーに共有します（オプション）*/
language:'zh_cn', /**言語を設定する、zh_cn|zh_tw (オプション)*/
rnd:新しい日付().valueOf()
}
var temp = [];
for( var p in param ){
temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
}
document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
})()
// ]]></スクリプト>

WBML を使用した後、1 行のコードを呼び出すことができます。

<wb:share-button></wb:share-button>

パラメータを変更し、タグとして渡す

<wb:share-button language="zh_tw"></wb:share-button>

最後に、指導をしてくださった @Eason-Shao さん、見事なデザインをしてくださった @阿bingben さん、 @王史撞Strong さん、 @刘明さん、すばらしい Web ページをしてくださった @青春的猴小野さん、 @ice木木さん、そして神レベルの製品開発者の方々に感謝したいと思います。
出典: Weibo UDC

<<: MySQL Shell import_tableデータインポートの実装

>>: CSSはletter-spacingプロパティを通じて単語間の間隔を制御します。