Weiboを通じてウェブサイトのページ構築のデザインと詳細を分析する

プロのページ構築エンジニアとして、専門的なスキルに対する高い要件に加えて、設計図面をレビューする一定の能力も必要です。画像レビューは、PSD との正確な同一性を追求したり、PSD と「ピクセルを一致させる」ためにスクリーンショットを撮るのに多くの時間を費やしたりすることを意味するものではありません。私の理解では、デザインレビューとは、UIデザイン案の分析を通じてUIデザイナーの意図を完全に理解し、それをUEのインタラクティブな状態と組み合わせて、真に「デザイン案を復元」することです。

例1：得ることと捨てることが悟りへの道である

例えば、このような設計案では

デザイナーの意図:

このトピック リストの行の高さは 19 ピクセルで、各トピックの下には 4 ピクセルの余白があります。トピックのタイトルと説明テキストの間にはスペースがありません。

ページ構築エンジニアの分析プロセス：

このモジュールは行の高さをリセットするため、テキストの標準の行の高さは 18 ピクセルであることが「合意」されています。コミュニケーションを通じて、デザイナーはこの段落の行の高さを 19 ピクセルから 18 ピクセルに変更することに同意しました。ただし、これはタイトルと説明テキスト間の行間隔に制限されます。タイトル間の 4 ピクセルの下余白は、構成の観点から単一のトピック間の段落関係を説明するものであり、単に 18 ピクセルの行の高さを使用するだけでは解決できません。なぜなら、デザイン案を理解した上で、デザイナーはこれらの 4 ピクセルを使用してタイトル間の間隔を広げ、段落の感覚を視覚的に形成したからです。したがって、再構築に関しては、これらの 4 つのピクセルを無視することはできません。そうしないと、デザイナーは視覚的なプレゼンテーションの観点からそれを許容できなくなります。したがって、得ることと放棄することによってのみ、悟りを得ることができるのです。

このモジュールの製造中に小さな事件が発生しました。以下のように表示されます。

デザイナーの意図:

これはサイズ 11 の Ximing フォントです。装飾と示唆的な画像であるため、前のタイトルで使用したサイズ 12 の Song フォントよりも小さくなっています。

ページ構築エンジニアの分析プロセス：

当初、復元グループの学生たちが設計案を話し合っていたとき、全員が可動式のテキスト、つまりソンティ第12号にすることを提案しました。色付きの丸い角のブロックは CSS3 で記述されており、優れたスケーラビリティを備えています。このモジュールは運用チームの責任下にあるため、将来いつでもテキストを変更する必要性に応えられるようになります。将来、別の「衝撃的なニュース」や「トップニュース」があったらどうしますか? すべての写真を再編集して再構成する必要がありますか?

しかし、ビジュアルデザインを理解するという観点から見ると、このような小さなタグは洗練性を強調します。テキスト化してしまうと、将来的な要件変更があった際にある程度のコストはかかりますが、本文との差が小さすぎて、小さなタグ感が強調できず、あまり洗練された印象にはなりません。それで、いろいろ迷って考えた末、最終的に絵にすることに決めました。

例2: 面倒なCSSの記述で視覚効果が向上する

別の例として、次のようなモジュールがあります。

デザイナーの意図:

アバターは名前の上部に揃えられ、マイクログループ レベルのアイコンはマイクログループ名の下部に揃えられます。

ページ構築エンジニアの分析プロセス：

マイクログループレベルのアイコンのサイズは 16×16 で、テキスト自体の高さよりも高いため、すべてのブラウザでこの配置効果を確保するために、このアイデアを採用しました。

左側に示す効果は、CSS コードが少し複雑に見えますが、ビジュアル ドラフトを 100% 復元することで実現されています。ただし、できるだけシンプルに記述すると、結果として得られるページの効果は、実際に実行した効果ほど良くありません。

ケース3: ページ構成の詳細をもう少し処理すると、ユーザーエクスペリエンスが少し向上します

このようなモジュールもあります:

ページ構築エンジニアの分析プロセス：

通常、このようなモジュールに遭遇した場合、構造を次のように分割します。

ユーザーアバターのサイズは30ピクセル四方しかないため、ユーザー名には2〜3文字の漢字しか表示できず、ユーザーが直感的にその人物が誰であるかを区別することが困難です。従来の考え方では、製品にもデザインにも満足できないでしょう。そこで、ページ構築の過程で、ユーザー名の表示領域を拡大する方法を探さなければなりません。

そこで、画像を切り取るという以下のアイデアを採用しました。HTML構造は変更せず、CSSのみを変更することで、ユーザー名表示領域を拡大するという目的を達成しました。

ユーザーアバター名モジュールの幅を設定し、マージンの負の値を使用して左にオフセットします。アバター1の領域の一部をカバーします。最終的な効果は、4 つの漢字を表示できることです。

再構築グループのインターン生はプロジェクト経験がないので、講師の言うことをそのまま信じていました。だから講師が「ピクセル単位で」と言ったら、すごく集中してしまって、デザイン案自体に問題があっても判断できず、自分たちでとても苦労してしまいました。場合によっては、画面にキャプチャされた静的ページのプレゼンテーション効果がデザイン案と数ピクセルしか違わないのに、静的ページがデザイン案と見た目が変わらないことがあります。このとき、常に修正し、スクリーンショットを撮り、ピクセルを調整し、また修正する必要があります...このような繰り返し作業は、ペースの速い開発では時間を浪費するだけでなく、重要なポイントをつかめず、データを読み込んだ後に「ちょっとおかしい」という状態になる可能性も高くなります。具体的な開発を行う前に、落ち着いて図面を注意深く確認し、デザイナーと十分にコミュニケーションを取り、選択を行い、賢明な判断を下すことをお勧めします。結果のページは、それほど苦労してピクセルをパッチしたり調整したりする必要がなくなり、デザイナーの元の設計意図をよりよく実現できる可能性があります。

(オリジナルのWeibo UDCブログ投稿。転載および出典の明示を歓迎します。購読も歓迎します)

原題: Weibo を通じてウェブサイトのページ構築のデザインと詳細を分析する

キーワード: 経由、Weibo 分析、ウェブサイト、ページ、構築、画像レビュー、詳細、プロフェッショナル、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化