Habrニュースフィードディスプレイデザインコンテスト

次の3か月で、Habr Webサイトの再フォーマットの次の段階は、コンテンツを操作するためのすべての関連要件を考慮して、より読みやすい形式で実装されます。 最初の段階は、ZenCommentスタイルとHabrAjaxスクリプトの実験でした。 (注意、プロジェクトはHabr管理やそのプログラムのいずれとも関連していません 。)経験は、レイアウトの頻繁な変更とサイトの元のレイアウトに影響を与えない条件の下で、結果は元のレイアウトに結び付けられ、変更には多大な労力がかかり、努力が必要になることを示しています頻繁なイノベーションによって減価償却されます。



スクリプトの次のバージョンでは、このアプローチはより柔軟になります。 既存のスクリプトにすでに部分的に実装されています。 これにより、ユーザーのブラウザーのページからコンテンツを取得し、完全に異なる独自のレイアウトに転送できます。 サイトのレイアウトにあまり執着することはなくなり、ニュースページやその種類のいくつかを作成することができます。



これらのページの1つは私によって実装されます(他の人-愛好家の裁量で)。 代替手段がない場合に実装できる設計を想像してください。 オプションがある場合、そのうちの1つがメインオプションとして実行される可能性が多くあります。 結局のところ、読者の10%だけがZenCommentデザインを気に入っています。 「サイトの設計-変更の数」を妥協する必要があるため、これは驚くべきことではありません。 多数の変更がある場合、それらはサイトの不安定なデザインによって破壊されます。



レイアウトは会社の製品であるため、サイトの正確なコピーにすることはできません。また、スクリプトは会社の資料だけでなく処理することができます。



コンテストの期間は、レイアウトエンジンでの作業が開始される約1か月前です。 賞-デザインのページでのサイトの使用。 サイトが存在しなくなった場合でも、他のサイトのページを表示できるページ表示エンジンが残ります。



新しいデザインのページのレイアウトに規定される原則



この場合、「デザイン」の概念は、ニュースフィードをデザインする際のユーザビリティと密接に関連しています。 したがって、彼は、固定された規則ではなく、プロジェクト参加者の希望によって補われる行動の多くの要件に従うことが必要です。 これで、要件のリストは次のようになります。



*サイトは、コンピューターまたはモバイルデバイスのブラウザーを介して、変換されたメッセージリボンの形式で観察され、メッセージヘッダーから注釈付きヘッダーへと展開され、記事またはメッセージ全体を表示します(他のメッセージは折りたたまれたままにすることができます)彼女へのコメント付き。 最初の段落を除き、これのほとんどすべては、実行中のHabrAjaxスクリプトで見ることができます。 フィードを表示し、ページをリロードせずに記事をロードし、コメントを展開および折りたたみます。 彼ができないことは、注釈を行に折りたたむことです(ただし、フィードの読み込み中にキーワードと著者によって記事を折りたたむ機能があります)、彼は記事を既読としてマークし、サイトが提供するものとは異なる形式でフィードを提示することはできません。 たとえば、テープから記事を読み取り(またはわいせつ)として削除したいという要望があります-オプションはありません。 右側の「ライブ」リストとほぼ同様のレベルまで、使用可能なオプションに折りたたみを追加する予定です。



*テープは、HabrAjaxに基づいて成長し、ユーザーがより正確に選択された記事を受け取り、より柔軟な評価を行うのに役立つ、第2世代のスクリプトによって達成される並べ替えと変換の影響を受けます(2番目のスクリプトがない場合)。



*テープは1枚から複数枚まで使用でき、テープの場所はユーザーの裁量です。 たとえば、スマートフォンのcr屈な画面では、1本のテープが配置され、残り(最高、質問、お気に入り)は準備ができているボタンに最小化されます。 広々としたコンピューター画面では、右の列に1〜2個のリボンがある従来のレイアウトがあり、1ページのオプションがある場合があります。 すべてはユーザーが制御します。 エンジンの開発は私たちの関心事であり、開発者は、上記のように現在のプロトタイプを見ることができるメイン要素(テープ)とHabrAjax + ZenCommentを使用したHabréを設計する必要があります。 (リンクを使用すると、最初にスクリプト関数、スタイルのスクリーンショットに慣れることができますが、タスクに関連する主な関数は、フィード内の読み込まれた記事を折りたたんで展開することです。)



これらの3つのポイントで、必要なデザインとインターフェイスの主要なアイデアを伝えることができたと思います。 開発者、デザイナー、ユーザビリティリストからの提案を待っています。 それらをホスティングのPNGのシートに配置して、ディスカッションや評価のためにアイデアを送信できます。



All Articles