ロシア語を話すことはほとんどありませんが、これは私にとって非常に珍しいことです。 今日は、レスポンシブデザインについてお話したいと思います。
現在、時間の経過とともに、レスポンシブデザインは通常のWebデザインになっています。 実際、それらを互いに分離することは今ではあまり意味がなく、Webデザイン全体を行うとき、今日多くの企業がレスポンシブデザインを始めています。 そして今、私は行き来する傾向について話したくありません。 トレンドよりもはるかに興味深いのは、開発者とデザイナーがページの開発とデザインに携わっていることです。 したがって、今日使用されている手法について説明します。 そして、私たちはUXカンファレンスに参加しているので、これはUXパターンに関する会話でもあります。 繰り返しますが、これらは理論ではなく実際のプロジェクトで使用されるものです。
インターネット全体を考えると、このようなものを提示します-「ウェブはブラウザに住んでいます」。 デザイナーによると、より単純化された-「ウェブは、テキストと画像を含む一種の長方形のセットです」。 そして、デザイナーの仕事は、ユーザーが画面上の情報を快適に操作できるように、これらの「長方形」を配置することです。 「Webページを作成することは、tesseractを視覚化する試みです。」と言ったTim Brownの引用が本当に好きです。 実際、デザイナーはカオスからシステムを作成し、表現が難しいものを表現しようとします。 また、レスポンシブデザインは、インターネットの表示に適したデザインを作成する手段の1つです。
レスポンシブデザインに携わる人は、これが完成したプロジェクトで何かを修正する必要がある単なる「直線化」とはほど遠いことを理解しています。 レスポンシブデザインには完全な変更が必要です。 「デザイナーが長方形を描く」方法だけでなく、それらの配置方法や人々の共同作業の方法も変更します。 さまざまなコンポーネントをページ上に正確に配置する方法について考える必要があります。 さらに、戦略についても考慮する必要があります-ページ上で正確に何をしたいのか。 レスポンシブデザインにはさまざまなタスクが含まれます。予想どおり、非常に複雑で、多くの時間と労力がかかります。 それは実際には複雑です。特に、レスポンシブでないサイトからレスポンシブなサイトに切り替えたときは特にそうです。 ただし、このプロセスは、プロセスを既に知っていて、ページを作成するための何らかのシステムを頭に置いているデザイナーにとっては、はるかに簡単になります。
たとえば、2年前、レスポンシブページを作成する方法がわかりませんでした。 今、私はレスポンシブではないページを作成する方法を想像することはできません。 私の頭の中にはすでにシステムがあり、おかげで私は何をする必要があるかを正確に知っているからです。 そして今、問題はこのシステムをどうやって作るかだけです。 たとえば、ポールランドの作品である60年代を思い出すことができます。 60年代、彼は新しいロゴを手に入れたいという顧客からアプローチされました。 このような状況では、通常、彼らが最初に行うことは、ロゴの描画を開始することです。 しかし、そのときポールは、どこで使用されてもうまく機能するシステムを作る方法を考えていました。 そして彼は、タイポグラフィについて、そしてロゴが使用されているさまざまなコンテキストについて考えました-車の上または他の場所で。 そして、ポールランドは普遍的であるはずのライブラリシステムを作成しました。 Atomic Designでも同じことができます。コンセプトにこの名前が付けられ、この一貫性を実現できます。 それは非常にシンプルで、特に革命的なものは何も含まれていません。 ページ設計には、「原子」、「分子」、「生物」、「サイト」、「ページ」の5つのレベルがあります。 「原子」は、可能な最小のページコンポーネントです。 これらは、他のコンポーネントに分解できない要素です。
したがって、「原子」をつなぐと「分子」を作ることができ、「分子」同士をつなぐと「生物」を作ることができます。 このようなシステムの特徴は、最小のコンポーネントで作業を開始するという事実にあります。 それらを描画することにより、基本的なライブラリ、いわゆるライブラリを作成し、そこから後で新しいコンポーネントを作成できます。
通常、顧客はデモを提供するように求められます。 多くの写真とアイコンを含めることで、デザインの「雰囲気」を備えた写真を作成できます。 一方、クライアントにデータとライブラリを提供し、例としてその場でエフェクトを生成できるインターフェイスを提供することは可能です。 そして今、私たちはこれに使用できるそれらのテクニックについて話すことができます。
私たちには多くの異なるモニターがあり、それぞれの小さなアイコンがスマートフォン、タブレット、およびパーソナルコンピューターで見栄えが良いことを考慮する必要があります。 アイコンを説明するために使用できる2つの手法、SVGとアイコンフォントがあります。 新しいアイコンを追加するとき、古いアイコンは削除しません。新しいアイコンを追加するとファイルがさらに大きくなります。 「アイコンが必要な場合は挿入できます。不要な場合は引き出します」という手法で作業する方がはるかに良いでしょう。 アイコンが互いに重ね合わされたSVGファイルはこれに適しています。必要に応じて、対応するアイコンがユーザーに表示されます。 Snap.svgライブラリは非常に使いやすく、高品質のアニメーションを作成できます。 SVGの使用は便利で便利ですが、常にそうとは限りません。ファイルの細部がたくさんある場合、「重すぎる」ことがわかります。 ほとんどのブラウザはSVGを「理解」しますが、ブラウザがSVGファイルを「理解しない」場合でも、PNGを表示します。 全体として、非常に便利です。
現在利用可能な2番目の機能は、アイコンフォントと呼ばれます。 それを使用するときは、単にFontを「定義」し、そこから必要なものを正確に取り出すことができます。 この手法の特徴の1つは、新しいアイコンをその場で生成できることです。 Icon Fontsは、ほぼすべての場所での使用に適しています。
それで、仕事のために何を選ぶべきですか-SVGまたはアイコンフォント？ 多くの人が2番目のオプションを使用していますが、これはあまり良い考えではありません。 異なるブラウザーでSVGとアイコンフォントがどのように使用されるかを比較すると、最初のほうが2番目よりもはるかに優れていることがわかります。 SVGが表示されない場合、PNGファイルが表示されるため、これは大きな問題です。 また、アイコンフォントがサポートされていない場合、最終的には何も表示されません。 したがって、SVGを使用する方が最適です。
ブラウザの解像度に応じて、アイコンは変更できるはずです。 大画面には多くのスペースがあり、多くの詳細を表示できるため、小さな画面ではスペースが少ないため、そのような可能性はありません。 CSSアニメーションを使用してアイコンを変更できます。 SVGを使用する場合、ファイル内の各ポリゴンを制御し、アイコン自体とそのパーツの両方を変更できます。 これは便利ですが、唯一の問題は非常に複雑なことです。
小さなアイコンは、実際に多くの有用な情報を運ぶことができます。 たとえば、ページにビデオがある場合、アイコンまたはそのサイズに時間の長さを表示すると便利です。 また、記事について話している場合、ユーザーがその記事のコメントの数をすぐに確認できると便利です。
レスポンシブデザインについては、ここで最も便利なのは、インターネット上に存在する問題の多くがここでかなり長い間解決されているという事実です。 レスポンシブデザインの大きな問題の1つは、小さな電話で大きな写真をダウンロードしないように、写真をどう処理するかです。 そして、これはまだ解決されていない唯一の問題ですが、他のすべての問題はわずか3年ですでに解決されています。 たとえば、スマートフォンで多くの列を持つ大きなテーブルをデモンストレーションする場合、それらすべてを適切に表示することは不可能です。 ただし、レスポンシブデザインでは、可能な列のみをデモンストレーションでき、ユーザーは見たいものを正確に選択できます。
また、視覚的に表示できる情報を含むテーブルがある場合、小さな画面では自動的にSVGグラフに変わります。これも非常に便利です。 小さな画面の問題も便利なナビゲーションです-画面が狭くなると、すべてが自然に小さくなり、たとえば、マップが画面上にある場合、ユーザーが関心のある項目を選択できないほど減少する可能性があります。 この場合、スマートフォンの画面では、カードはポップアップ列の形式で表示され、ユーザーが関心を持つ州または地域を選択できます。 同じシステムがグラフ、特定の人々に関する情報を含む伝記ページなどで使用されています。
最も難しいことの1つはフォームです。 モバイルデバイスでフォームに入力する方法 モバイルデバイスでは、この問題はレスポンシブデザインでも解決されました。 ユーザーは常に特定のフィールドを1つだけ画面に表示します。これは、画面上のキーボードを使用して入力するのに非常に便利です。 一般的に、上記は非常に便利な技術を現代のデザイナーに役立つ可能性が高いと説明しています-彼らの助けを借りて、おそらく長年使用されるものを作成することができます。
これはかなり短い講義概要です。 レポート全体はこちらで見ることができます： uxpeople.ru/video