ウェブサイト再設計事例：アリババニュースアップグレードプロジェクトの概要

広告を挿入: このプロジェクトの初の削除バージョンは10月10日にリリースされます! 完全なノーカットバージョンは10月末にリリースされるので、お楽しみに! リリースアドレス: info.1688.com

順序：

2年前、アリババに入社してまだ正社員として確定していない頃に、情報再設計プロジェクトに参加する機会がありました。それが私のプロダクトデビューで、ビジュアルデザイナーの役割を担いました。その時、私に渡されたのは、色のついていない白黒の原稿と飛行機の原稿だけでした。プロデューサーが誰なのか、監督が誰なのか、他の俳優が誰なのかも知りませんでした。ボスにやれと言われたので、何も知らずに主演しただけです。 7～8バージョンを検討した後、需要側に選択を依頼し、最終的には非常にスムーズに1つのバージョンが選ばれました。その後、再度最適化と修正を行い、その週は毎日11時まで作業しました。そして、約束の時間前に、ポストプロダクションを担当するフロントエンドの学生に引き渡し、オンラインに公開されました。 。 。その時の私の感想は、「製品デザインとはこういうものなのか」でした。 。ネットで調べてみたら、満足できませんでした。想像していたものとは少し違うところがまだたくさんありました。

2か月前、2周年を迎えました。私は「2」という数字に特別な親近感を抱いているようです。振り返ってみると、私はコミュニティを一度も離れたことがないことに気づきました。今回は、2年間のハードワークの後、「リソースの不足」のために、それを変えたいと思っていました。もちろん、このプロセスでは、XiaoshuaiやBadoonのような優秀なプロデューサーにも出会うことができます。プロデューサーは良い監督ではありません！プロジェクトの経験と理解を深めるためには、まだ自分でやらなければならないことがたくさんあるのですが、結局は小さな問題がまだたくさん露呈しています。でも振り返ってみると、何もしなければ、結局もっと多くの問題が露呈することになります。まだ自分が思い描いていた完璧さには達していませんが、少なくとも「完璧」に一歩近づきました。

——————————————————私が境界線だ！————————————————————

全体的なプロジェクトプロセス:

※黄色の点は私が参加したこのプロジェクトプロセス内のリンクです。

① 重要な経験指標：プロジェクトの初期段階で肖帥の専門的側面が言及した5つの次元は次のとおりです。共有を聞いた人は皆、HEARTを知っているはずです。

② 6次の分析：ここで言う6次の分析は、人と人との関係における6次の分析とは異なります。ここでの6次の分析は、ユーザーが問題を体系的に分析するのに役立つ分散型で統合された考え方であることを簡単に説明します。

簡単な説明をします。詳細については、Li Long の共有をフォローするか、彼に相談してください。連絡先: Wangwang: lilong4174

プロジェクトの初期段階では、肖帥が非常に役立ちました。彼は分析のための情報データを取得し、それをPD、オペレーション、フロントエンドと共有し、その後のプロジェクトと製品計画のための強固な基盤を築きました。ユーザーリサーチは2つの部分に分かれています。1つは小帥と一緒に実施した上級情報ユーザーへのインタビューで、もう1つは私が専門家（社内の担当者：上司、PD、運営、デザイナー、開発者）に行った簡単なインタビューです。これら 2 つのグループの共同研究により、後続の情報モジュールから派生した情報アーキテクチャ (インタラクション ドラフト) と、最終的な感情バージョン分析によって作成された最終ドラフトが作成されました。このプロジェクト総括では、プロジェクト全体のリードビジュアルデザイナーとして、ムードボードの分析からビジュアル案の制作までのプロセス、後期のフロントエンドフォローアップの注意点、プロジェクト開始時に検討する必要があった課題の振り返りなどについて具体的にお話しします。さて、記事も半分まで来ました。いよいよ本題に入ります...

1. ムードボード分析からビジュアルドラフト制作までのプロセス

感情バージョン:

ムードボードの簡単な手順: エクスペリエンスキーワード (上記のユーザー調査の 2 つの部分から導出) → キーワード導出 (具体化、ビジュアル、ムードマッピング) → 導出されたキーワードに基づいて検索された画像 → 画像カラーブロック → ムードボードの生成 (詳細については、情報アップグレード ムードボード ビュー アドレスを参照してください: \\nas\Alibaba\B2B\Project Group\Chinese Site UED\#Application Design Group#\Information Upgrade (スライドは壁を乗り越える必要があるようですので、当社のサーバーを使用してください))

デザイン体験全体を統合する: 実際、製品自体、特にビジュアル デザイナーの場合、デザインする前に、デザイナーは頭の中で視覚的な錯覚を形成しておく必要があります。ムード ボードは、この視覚的な錯覚を主張する優れた方法であり、ビジュアル レビュー中に上司や意見が一致しない可能性のある人々を説得するためのより効果的な理由でもあります。もちろん、感情を生み出せないときは、感情ボードを直接使用することも非常に効果的な方法です。しかし、絶対的なものなどないということを覚えておいてください。特に私たちのようないわゆる「暖色系が好きな中国人」にとっては、青や寒色系の色を使った製品をデザインするには、上司を納得させるほどの強い決意とオーラが必要なのかもしれません。私は大きな決意をしましたが、自分のオーラが十分ではないことを知っていたので、自分自身にも逃げ道を残しました。 。 。

競合製品分析:

ムードボードの最後に、次の画像が追加されました。

上司が暖色系バージョンの使用を強制するのを避けるために、感情的なバージョンの議論方法が部分的に無効になる... 上司は「暖色系バージョンを作ってください...」「まあ、わかりました...」と微妙な要求をしたので、これは非科学的ではないことがわかりました。最終的な結果は想像できます。情報に関して言えば、もちろんそれは市場の法則に従わなければなりません。市場の法則はどこから来るのでしょうか？競合製品の分析です！これは間違いなく感情バージョンと並んで「防御の2人の英雄」と呼べる証言です！競合製品の分析は感情バージョンの分析を検証するための最後のステップになる可能性があるため、最終的にはクールなトーンのビジュアルバージョンを使用し、ようやくホッとしました。 。少なくとも私の感情状態は最悪なものにはならなかった。競合製品を分析するときに、どのディメンションを選択すればよいかわからない人も多いでしょう。実際には、メインカラー、画像の比率、背景色の有無、モジュールに境界線があるかどうか、ホバーカラー、大段落のテキストカラーなど、設計したいデザイン案に基づいて抽出できます。DPLとして使用できる部分はすべて、競合製品分析の重要な要素です。同様に、抽出した要素の一部がほとんどの競合製品に備わっていたとしても、時には上司が何か違うものを望んでいることもあります。このような状況は起こり得ます。全体の効果をあまり壊さずに、上司の言う通りにいくつかのことを試してみましょう。この特殊な状況には一定の方向性があります。リスクは視覚効果を壊すかどうかではなく、フロントエンドの仲間との連携のタイミングにあります。次の部分に進みましょう。

2. 後期フォローアップに関する留意点

幕間：第1部の最後に述べたように、上司は特定の製品に対して特別な要件を持っています。たとえば、このプロセスで遭遇したようなものです。他のN回の確認はどれもカウントされませんでした。ついに、最終稿として確認された暗くて風の強い夜、王王は飛び起き、上司は言いました：他のものは良さそうでした。長い間見ていました。フォントの色が少し薄く、焦点が合っていません。＃444を＃333に変更できますか？私はショックを受けて口走った：最終稿が確認され、フロントエンドに入りました。変更するのは得策ではありません。上司は、それは問題ではないと言いました。色の値を変更するのは非常に速いので、私は勇気を出してフロントエンドを見つけて変更しなければなりませんでした。翌日、上司はリンクの色に問題があると感じ、灰色が多すぎて、リンクの色を変更したいと思っていました。その時、私は心の中でつぶやきました：くそ、一度に全部言えないの？なぜ最終稿が確認される前に言わなかったのですか。 。もちろん口には出さず、がっかりしながらフロントエンド開発者のところに行って、もう一度変更したいと言いました。フロントエンド開発者は不満で、要件が何度も変更されたと言いました。やりたくありませんでした。PDに、時間通りにリリースできなかったら私に言うように頼みました。責任がありますか？プロセスは非常に苦痛でしたが、わかりますか？実際、フロントエンド開発者が色の値を変更するのは小さな問題であることは理解できます。一部のプロセスは十分に復元されなかったため、注釈を追加して再度変更する必要がありました。小さな点を変更した後、上司が変更後に元に戻してしまうのではないかと心配でした。そこでしばらく自分を振り返り、絶え間ない努力と粘り強さの末、ここでリンクの色を変更しないように上司を説得しました。変更したくても、プロジェクトがリリースされた後に統一された要件を提出します。

まとめると、フロントエンドに入る前に確認する必要があるポイントがいくつかあります。

注釈: 特に統合出力の注釈は詳細に記述する必要があります。そうしないと、後で不十分な復元の責任を問われることになります (注意すべき部分がいくつかあります: ナビゲーション、パンくずリスト、モジュール編集領域、フォントの色とサイズの使用、統合型モジュールの間隔)

ボタン: 最終ドラフトがフロントエンドに渡されたときに、ステータスを完了する必要があります。フロントエンドがそれを要求するとは思わないでください。自分で準備して、ページに配置します。

ホバー: ホバーは統一された標準ですが、ナビゲーションはページ全体の特別な部分であり、ページ間のコミュニケーションの中心であることを覚えておくことが重要です。背景色を使用したナビゲーションには特に注意する必要があります。ホバーの色はページ全体で統一する必要はありません。ホバー時にナビゲーションに下線を引くだけで十分です。

特別な領域: 特別な状況は個別に詳細に説明する必要があります。そうでない場合は、フロントエンドは統一された仕様に従って実行されます。ビジュアル ドラフトに効果を適用しても、それが発見されない可能性があり、注釈が必要になる場合があります。

毎日のフォローアップ: フロントエンドのデザイン状況を少なくとも 1 日に 2 回確認します。復元の問題はその場で解決できるため、トラブルを回避できます。

3. プロジェクト開始時に考慮すべき事項

新しいプロジェクトであれば、これについてあまり心配する必要はありません。製品マネージャーが要件ドキュメントを作成するときに、この一連の問題を計画します。プロジェクトがアップグレードまたは改訂されるときに、このような問題が比較的多く発生します。多くのアップグレードまたは改訂は、プロジェクトの元の作成者によって開始または推進されるものではないため、情報の伝達に多少の偏りが生じます。注目すべき点がいくつかあります:

広告スペース: 再設計する前に、ページ全体のどの位置が自分の部門に属し、どの更新権限が他の部門に属しているかを把握する必要があります。設計前に宿題を済ませておく必要があります。そうしないと、プロジェクトの立ち上げが遅れたり、立ち上げ位置がビジュアル ドラフトと一致しなくなったりします。たとえば、この情報改訂では、ホームページと詳細の一部の広告スペースは Yahoo Beijing、tanx 広告スペース、および「Shadow のような」広告スペースに属しています。これらの位置は常に表示されるわけではなく、特定の月に数日間だけ表示されることもあります。そのため、改訂設計中に見落としがちです。あるいは、この製品が属する部門が責任を負っていると誤解するかもしれません。現状の対応としては、契約締結前にデザイン案のサイズに合わせて一時的に広告枠を圧縮したり長くしたりして、当面はできるだけ同じような効果を保つようにし、契約終了後はデザイン案の最終サイズに変更し、速やかにヤフーの担当者に新しいサイズを提供するという対応になります。

協力の立場：一部の情報詳細はP4Pに渡されています。同様に、この部分のページにはP4Pコードが直接埋め込まれているため、テンプレートのスタイルをアップグレードする必要があることを事前にP4Pに通知していませんでした。その結果、この部分のモジュールスタイルは、オンラインになった後の統一スタイルと大きく異なり、雰囲気が本当に台無しになりました。少しひどいですが、私たちはこれを教訓として、皆さんが確認できるように投稿します。P4P部門のリソーススケジュールによると、新しいテンプレートのマッチングが完了するには月末までかかります。

原題: ウェブサイト再設計事例: Alibaba 情報アップグレード プロジェクトの概要

キーワード: ウェブサイト、改訂事例、アリババ、情報アップグレード、プロジェクト、プログラム概要、挿入、1 つのセクション、広告、ウェブマスター、ウェブサイトのプロモーション、収益化