「クローンハブル」のデザインの仕方

シニオLivestreet








多くの人が名前から推測したように、 LiveStreetエンジン、またはCMSアセンブリに含まれている基本的なSynioテンプレートについてお話します。私は幸運にも著者になりました。



今日、私はその作成のプロセスと私が何とか実装したかについてお話したいと思います。



良いデザインとは何ですか?





余談ですが、私の意見では、デザインは何よりもまず機能性と細部へのこだわりです。 色の組み合わせを選択する能力や、美しいグラフィックスを作成する能力、つまりささいなことに対する利便性や愛情でさえも、成功したデザインの公式の主要な要素ではないようです。









挑戦する



私の意見では、どのプロジェクトもプロジェクト目標の形成から始めるべきです。



この場合、問題の解決策は、さまざまなテーマのプロジェクトに適したテンプレートであり、シンプルだが機能的なインターフェースとシンプルな配色を備えている必要があります。








分析



タスクが明確になったら、市場を調査する必要があります。 そして、簡単に言えば、ユーザーのニーズを理解し、この環境の既存のプロジェクトを分析します。



もちろん、LiveStreet CMSの作成の歴史に戻ると、このエンジンの基礎となったのはHabrの機能であったため、最初に注目すべきはHabrahabrでした。

しかし、3年半で( そしてその時までにLivestreamが実行されていたのと同じくらいの時間で )、機能の違いはすでに重要でした。



チップを探す








Habrに加えて、他のブログソーシャルサイトやニュースサイトがあり、その経験を勉強し始めました。

たとえば、「 Look At Me 」、「 Poster 」、「 DOU 」、「 Learn 」、「 Reedus 」など(合計約15)。 私は一枚の紙を取り、機能で最も成功したソリューションを探しました。








チームワーク



もちろん、設計を作成するときは、「内部」の機能を知っている人、つまりシステムの開発者と常に相談する必要があります。



不思議な事実は、その地理的な場所のために、私はさまざまな国とタイムゾーンでLiveStreet CMS開発チームに所属しており、数年間お互いを知っていましたが、直接会ったことはありません。



そのため、リモート通信には、 GMail (および特にGTalk )-簡単な議論、 ワークセクション -主な仕事、タスクと中間結果の議論、 そしてもちろんSkype-長い議論と「トピック外の」トピックのために、それらなしで)



GmailワークセクションSkype








長所


リモートワークの主な利点は、自分の毎日のスケジュールで仕事ができることです。たとえば、仕事が面白ければ夜に座っていることが多いです。 さらに、オフィスに行くことなく時間を大幅に節約できます(大都市の場合、毎日40分から2時間かかります)



短所


この仕事の方法の短所は、同じオフィスに座って、うらやましい規則性でお互いを「蹴る」場合よりも長い時間枠であるということです。 しかし、それにもかかわらず、私たちは望ましい結果を達成しました。








基本的なテンプレート設計の新機能



デザインに目を向けると、先ほど書いたように、機能は新しいデザインの基礎となることでした。 そして、他のプロジェクトの経験を紹介し、私のアイデアでそれを補おうと試みました。



シニオ








A.視覚ユニット

新しいバージョンでは、ユーザーが[作成]ボタンをクリックした後に表示される機能の画像を含むグラフィックブロックが表示されました。



この場合、ブログまたはトピックの作成と次のステップで、作成フォームで直接切り替えることができます。



シニオLivestreet








B.トピックの有権者の数

投票要素の上にカーソルを合わせると表示される別のポップアップブロックで、投票者の数と棄権の統計を作成することが決定されました。



C.ナビゲーションブロック

クイックナビゲーションブロックが追加され、あるトピックタイトルから別のタイトルに切り替えることができます。 また、その上にきちんとした「アップ」ボタンがあります。



D.「トップスターター」の分離

コメントでは、トピック作成者のニックネームに下線が付けられ、会話の他の参加者と区別しやすくなります



シニオLivestreet








E.便利なユーザー検索と並べ替え

[ユーザー]セクションでは、ユーザーのニックネームですばやく検索できます。 アルファベット、強度、評価による並べ替えも同様です。 また、現在サイトにいるユーザーを表示する機能もあります。



シニオLivestreet








F.実況解説のテキスト

ライブブロードキャストでは、ポップアップブロックでコメントテキストをすばやく表示する機能が追加されました。 そして今、それがあなたにとって興味深いかどうかを調べるためにトピックに行く必要はありませんでした。



G.クイックタグ検索

タグ付きのブロックには、一般タグとタグを切り替える機能が追加されました。 また、その中にヒントを含む検索が表示されました。



H.ワンクリックですばやくブログに参加する機能

同じ名前のセクションの各ブログ名の反対側に、「閲覧」ボタンが表示されます。クリックすると、ユーザーはブログの読者になります。



Synio画像を追加








I.写真をアップロードする



写真のダウンロードには特に注意が必要です。 1つのコンパクトなユニットで、コンピューターまたはインターネットからトピックに写真をアップロードしたり、直接リンクを指定して簡単に投稿したりすることができます。



シニオ








J.さまざまなアバター

私が実現したかった疑いのない「可愛さ」には、公正で強い性別のさまざまなアバターが含まれます。 現在、ユーザーが写真をアップロードしていないが性別を示している場合は、性別と写真で区別することができます。








要約する



合計で、 35を超える画面と約50の異なるアイコンと絵文字がプロジェクトに描画されます。



シニオアイコン








設計の主要な作業段階は2か月半続きましたが、今でも新しいアイデアや追加機能を具体化するために追加の図面が必要です。



一般に、 ortdeniartなどの才能のある人たちと同じチームでこのプロジェクトに取り組むことは、魅力的で楽しい仕事であることが判明しました。



PS



新しいデザインが実際にどのように見えるかまだ見ていない人のために- このリンクはあなたのためです。

誰かがLiveStreetのテンプレートのデザインについて質問がある場合は、尋ねて、答えようとします。



All Articles