資格のあるページ再構成者として、「Web ページのデザインの下書きを復元する」能力は非常に重要です。デザイン案とまったく同じページにできるかどうかに注目する必要があります。場合によっては、細部が成功か失敗かを決定する場合があり、成功と失敗の差は何千マイルにも及ぶことがあります。特にブティックプロジェクトを作成する場合。
1. ビジュアル仕様
デザイナーから受け取ったデザイン ドラフトは、必ずしも正確ではない場合があります。たとえば、同じ種類のモジュールのタイトル テキストがある場所では 13PX、別の場所では 14PX で、同じように見えます。肉眼では見えますが、各段落の行の高さが異なります。同じ種類のポップアップ ボックスに複数のサイズがあるなど。この場合、デザイン ドラフトを復元することはできません。設計草案の復元について。
デザイナーとのコミュニケーションコストを削減するために、リファクタリングエンジニアはデザイナーに対し、早い段階でサイト全体の視覚的な仕様を作成し、公的に合意された内容の一部を文書の形で書き留め、厳密に実装するよう促しなければなりませんでした。それは後の段階で。
デザイナーがページの作成を開始する前に視覚的な仕様を設定するのが最善です。これにより、制作後のページの共同デバッグのコストを大幅に削減できます。また、ページ制作では、フォント、アイコン、枠線、背景色、間隔などのテンプレート化されたものの仕様を初期段階で統一し、デザイン仕様が固まった段階で統一したクラスインターフェースを作成することができます。変更を調整するのは簡単です。
2. デザイン ドラフトの注釈では、
デザイナーがデザイン ドラフト上にさまざまな間隔、幅、特別なフォント、特別なフォントの色、特別な線の高さなどをマークする必要があります。これにより、ページを作成するときに再測定する必要がなくなります。また、設計ドラフトの精度が大幅に向上するため、設計者とのコミュニケーションのコストや制作後の共同デバッグのコストも削減されます。以下に例を示します。
3. Web ページ定規ツール (FastStone Capture)
ナビゲーション用のコンパス、医師用の温度計、大工用の巻尺... 多くの職業が独自の特別な測定器を持っているため、ページを作成するときは、間隔、幅、高さ、カラー...などのデータがある場合、ページ制作には正確なページ測定のための専門ツールが必要でしょうか?
ここでは、Web ページを正確に測定できるソフトウェア、FastStone Capture を紹介します。このソフトウェアは小さいながらもすべてを備えていると言えます。必需品。
4. FastStone Capture の簡単なチュートリアル
1. 測定ツールを開きます
コントロールパネルの右端にあるアイコンをクリックします
を開いて「画面定規」を選択すると、以下に示すような定規が画面に表示されます。遠近感の測定を容易にするために、定規を透明または半透明に設定できます。
2.
水平測定の場合、デフォルトのルーラーは水平に配置されます。キーボードの上下左右のキーを押して、ルーラーのスケール上でマウスをクリックします。画面の右上隅にある虫眼鏡をクリックして、マウスをドラッグしてレベルの長さを正確に測定します。ルーラーの 2 つの水平方向の端をドラッグして、ルーラーを長くしたり短くしたりします。
3. 垂直方向を測定するには、
ルーラーに表示されているボタン アイコンをクリックします。
ルーラーを垂直にするには: または、ルーラーをダブルクリックしてルーラーを垂直にします。
垂直測定と水平測定の方法は似ているため、ここでは繰り返しません。
4. ポイントツーポイントを測定するには、
ルーラー上のアイコンをクリックします。
、画面右上の虫眼鏡に線の長さが表示されます。
マウスを使用して点 A から点 B まで直線をドラッグし、2 点間の距離を測定します。
5. 長方形の測定
残念ながら、このソフトウェアには定正方形やコンパスがないため、長方形を測定するのは困難です。心配しないでください。代わりに他の方法を使用できます。ここではスクリーンショット機能を使用します。
ルーラーアイコンをクリックします
ルーラーを閉じ、ソフトウェアのコントロール パネルに戻り、3 番目のアイコンをクリックします。
(長方形領域のキャプチャ):
マウスをドラッグして、測定したい Web ページの長方形モジュールを測定します。画面の左上 (または右) 隅にある虫眼鏡には、w*h=value*value、w が表示されます。幅、h は高さです。
6.
ソフトウェア コントロール パネルの右側にあるアイコンをクリックして、Web ページの色を選択します。
をクリックすると、ドロップダウン ボックスが表示され、「画面カラー ピッカー」を選択します。スポイト アイコンが表示されます。スポイトで示される座標を移動し、クリックして画面上の任意の場所の色の値を取得します。