html5を使用してneteaseweibo Webアプリを開発するプロセスの紹介

コメント：この記事では、HTML5を使用したNetease Weiboの開発のプロセス全体を紹介します

Netease WeiboのiPhoneプラットフォームWebアプリ製品は、2012年第1四半期に正常に発売されました。このプロジェクト開発から学んだ経験とレッスンを共有します。HTML5開発環境であなたと一緒に成長したいと考えています。

人員配置

1。開発者の構成

プロダクトマネージャー：1人。

インタラクションデザイナー：1;

ビジュアルデザイナー：1;

フロントエンドエンジニア：1;

バックステージエンジニア：2;

テスター：1人。

2。開発時間

インタラクションデザイナー：22営業日。

ビジュアルデザイナー：14営業日。

フロントエンドエンジニア：50営業日。

バックエンドエンジニア：元のバックエンドデータを使用しているため、データを呼び出すためにフロントエンドエンジニアと協力するだけが必要です

その中で、インタラクションとフロントエンドは、開発サイクル全体で最も長い時間を使用しています。

NetEase Weibo Webアプリ開発プロセス

1。機能要件計画：Webやローカルクライアントとは異なります

担当者：プロダクトマネージャー。参加者：インタラクションデザイナー

NetEase Weibo Webアプリ（すべてこの記事の携帯電話を参照）は、Web製品とは異なり、地元のクライアントとも異なります。

1. Webと比較して、Netease Weibo Webアプリには、モビリティやメディアリッチなどの強い利点があり、小さな情報プレゼンテーションスペースやディープ情報アーキテクチャなどの短所があります。 2つの使用状況は異なります。 Weibo Webは、豊富な時間と優れたネットワーク条件の下で没入型で使用されています。 Weibo Webアプリは、ほとんど些細な時間と不均一な品質のネットワーク条件の下で使用されます。

したがって、NetEase Weibo Webアプリは、大規模で完全な機能を回避し、Webからモバイル環境のユーザーが最も一般的に使用する機能を抽出して選択し、モバイル側に一意のニーズ関数を追加する必要があります（ローカライズされたサービス関数は反復段階で考慮されます）。

2。ローカルクライアントと比較して、Netease Weibo Webアプリには、インストールなし、単純なアップグレード、低開発コスト、および適応可能なレイアウトの利点があります。また、応答速度の遅い速度、携帯電話のネイティブコントロールを取得するための低許容、およびわずかに弱い安定性の利点もあります。

2つの利点と短所に基づいて、Netease Weibo Webアプリは、地元のクライアントの高品質のエクスペリエンスに追いつき、軽量かつ高速で確保する必要があります。

一言で言えば、Webアプリの機能は、モバイル環境でユーザーの最もコアニーズを満たしているWebおよびローカルクライアントの機能よりも洗練されている可能性があります。

以下に示すように、netease weibo Webアプリ機能計画：

2。情報アーキテクチャの設計：可能な限り浅くて狭く

担当者：インタラクションデザイナー。参加者：プロダクトマネージャー

モバイルインターネット製品を作成した人は、情報アーキテクチャが可能な限り浅く狭くなる必要がある理由を知っている必要があります。最大の理由は、携帯電話の小さくて高価なディスプレイスペースです。携帯電話のローカルクライアントの情報アーキテクチャは浅くて狭くする必要があり、ブラウザのページにはブラウザのボトムツールバーが常にあるため、これをさらに必要とします。下の図に示すように：

携帯電話画面の下部にあるブラウザツールバーは、Webアプリ製品では非常に役に立たない：Webアプリ自体は閉ループアプリケーションであり、ブラウザツールバーは必要ありません。大規模な情報アーキテクチャに影響を与えない場合でも、貴重なディスプレイスペースを侵食し、ナビゲーションシステムの設計に重要な影響を与えます（この部分は、前の記事「iPhone Webアプリのナビゲーションデザインに関するディスカッション」で簡単に分析されました。）。

WebJXの記事はじめに：Netease Weibo、HTML5の実際の開発。

3。相互作用設計：シンプルで効率的です

担当者：インタラクションデザイナー。参加者：プロダクトマネージャー、ビジュアルデザイナー、フロントエンドエンジニア、バックエンド技術者

インタラクションデザインの概念：

この製品の特定のインタラクション設計の概念は、ユーザーの使用シナリオ調査、競合他社分析、Webアプリの研究ステータス、Weibo Webアプリ独自の要件からのものです。最終的に要約された相互作用設計の概念は、主に次のようです。

1。検索の容易さの強化：

グローバルナビゲーションの強化、ホームページへのクイックリターン、定期的な共通操作、タイムリーなアニメーションデモンストレーション、シンプルでクリアなWebページレイアウトなど。

2。使用効率を改善します

情報アーキテクチャレベルを下げ、適切なショートカットキーエントリを提供し、安全なタッチエリアを確認し、ユーザーの閲覧習慣を検討し、コア機能を優先し、不必要な視覚ノイズを排除するなど。

3.よりインテリジェントで思いやり

オフラインの使用、予期しない中断後の編集の情報の自動充填、警告ボックスの慎重な使用、検索提案の実装の支援、現在のタスクニーズのために手配されたツールバー、アクティブで効果的なフィードバックなど。

4。タスクの集中を改善します

シングルタスク操作パス、タイムリーな非表示のタブナビゲーション、干渉係数、利用できないボタングレースケールディスプレイ、タスクページの最大化、機能の最小化なしなど。

5。プラットフォームの一貫性：

今すぐ見て、それをクリックして、iOSプラットフォームのビューをリストし、フォワード操作と戻り操作中の画面アニメーションをプッシュ、iOSプラットフォームのモーダルビュー、警告ボックス、ネイティブコントロール、シンプルでクリアジャンプロジックなど。

この段階でのインタラクティブなデザインコンセプトは、もはや単なる概念ではなく、Webアプリ製品の特定のデザインガイダンスです。 Beautiful Design Conceptを実現する設計実装方法は、設計研究段階で重要な実装です。

多くのデザインコンテンツと詳細があります。ここでは、1つの詳細をピックアップして共有します。

強化された検索の容易さ - グローバルナビゲーションの強化

元のWAP Weiboと比較して、グローバルナビゲーションバーの固定された存在は大きな変化です。これを行う理由を簡単に分析しましょう。

- ユーザーの使用環境は何ですか？ - 屋外のモバイルの状況（地下鉄や並んでいるなど）、または屋内アイドル状態（就寝前にワイボを閲覧するなど）;

- ユーザーがこのページに来る目的は何ですか？ - weiboを侵入します。

- このページでユーザーが使用する一般的なアクションは何ですか？ - 引き下げて読み取り、トップ、新しい情報を読み込み、他のタブをクリックしてジャンプを実行します。

- グローバルナビゲーションバーが上部に固定されている場合の利点は何ですか？ - ユーザーがトップに戻るのに便利で、ユーザーが新しい情報をロードするのに便利で、ユーザーがタブを切り替えるのに便利で、グローバルコントロールの強い感覚を持っています。

- グローバルナビゲーションバーが上部に固定されている場合、欠点は何ですか？ - 貴重な情報表示スペース

…………

ユーザーの使用中、ピン留め、リフレッシュ、切り替えの動作も比較的頻繁な動作であり、操作の利便性を確保する必要があります。固定されたグローバルナビゲーションバーは、この要件を満たすことができます。ホームキーをクリックすると、タブを切り替えることができるようになります。同時に、固定されたグローバルナビゲーションバーにより、ユーザーはどこにいるのか、どこに行くことができるかを明確に知ることができ、ユーザーにグローバルな制御の強い感覚を与えます。

4。ビジュアルデザイン：新鮮なスタイルの実験

担当者：ビジュアルデザイナー。参加者：プロダクトマネージャー、インタラクションデザイナー、フロントエンドエンジニア

NetEase Weibo Webアプリの視覚スタイルの決定は、複数の角度を通じて議論されています。

1. NetEase weiboローカルクライアントと色調を一致させる必要がありますか？

製品は、さまざまなプラットフォームで特定の一貫性を維持する必要があり、カラースタイルも製品の気質を形成する重要な部分です。それで、Netease Weiboのローカルクライアントに似たスキンを使用する必要がありますか？ Netease weiboのローカルクライアントの主な色は赤です。

分析は次のとおりです。

- この赤を使用することの利点は次のとおりです。製品の一貫性が強い。赤で形成される製品の気質は、よりエネルギッシュです。

- この赤を使用することの欠点は、赤い領域がWeiboの含有量と比較してわずかに人目を引くことであり、没入型の読み取りを達成するのがより困難であることです。

Safariブラウザを介してNetEase Weibo Webアプリを使用して、最終的な視覚効果はローカルクライアントの視覚効果とは異なり、ブラウザツールバーは常に画面の下部にあるスペースを占有します。赤は比較的うるさい色ですが、ブラウザのツールバーは青と灰色で、比較的静かです。これらの2つの色の間の大きなギャップにより、メガネは非常に不快になります。

上記の分析に基づいて、ローカルクライアントの赤い色を使用するのは適していません。

WebJXの記事はじめに：Netease Weibo、HTML5の実際の開発。

2。Safariブラウザでの実行の影響は何ですか？

Netease Weibo Webアプリは、この製品の環境の1つであるSafariブラウザーから実行および表示されます。ウェブページは人々に軽く合理化された感覚を与え、地元のクライアントは人々に重く安定した感覚を与えます。

したがって、軽量の視覚スタイルは良い選択です。

3。現在の視覚スタイルのトレンド

Metro UIとGoogle+が率いる新鮮なスタイルは、重要な視覚スタイルの開発動向になりました。絶妙で複雑な視覚体験の期間の後、私はシンプルさに戻り、新鮮な視覚スタイルが人気になり始めました。

そのため、視覚デザイナーは、赤、クールな黒、フレッシュライトグレーなど、いくつかの視覚的な試みを試みました。複数のパーティーから比較した後、誰もが新鮮で明るい灰色の色がそうであることに同意しました。新鮮で明るい灰色がメインの色であり、アイコンクリック状態はNetEaseが一般的に使用する赤であり、視覚スタイルの一貫性をある程度維持します。

5。フロントエンド開発：トリックを破ります

担当者：フロントエンドエンジニア。参加者：プロダクトマネージャー、インタラクションデザイナー、ビジュアルデザイナー、バックエンド技術者

この部分に到達すると、特定のコードがどのようなもので、実装フレームワークがどのようなものかについてもっと心配するかもしれません。申し訳ありませんが、会社に関与する製品の秘密、および特定の実装コードをすべての人に表示することはできません。私を許して！

ここでは、2つのネチズンの質問を選択して、簡単に回答してください。

質問1：フロントエンドのアーキテクチャについて話してもらえますか？なぜSenchaが使用されないのですか？

回答：Sencha Touch 1.x/2.x、Jquery Mobileなどはカスタマイズ、パフォーマンス、リソースの消費に理想的ではないため、Neteaseフロントエンドは独自のフレームワークを開発しました。あなたが言ったように、それはSeajsを使用してスクリプトの読み込みを処理し、Iscrollはスクロールをシミュレートします。効果はまだ良いようです。 NetEaseフロントエンドは、このフレームワークを改善し続けます。

質問2：写真を撮って写真をアップロードできますか？

iPhone Safariはカメラやギャラリーを取得する許可を与えていないため、この要件はまだ満たされていません。ちなみに、Androidが許可を与えれば、その時点でこの緊急のニーズを確実に満たすでしょう。

6。フォローアップ作業

その後の作業には、主にインタラクティブな検査、目視検査、QAテスト、概要、フィードバックが発売された後の問題を修正し、次の反復の計画が含まれます。誰もがプロジェクトプロセスを理解しているので、私はあまり言いません。

これから学んだ教訓

1。ワークフローについての感情

1.ガイドとして優れたエクスペリエンスデザインになります。

このプロジェクトは、設計指向のアプローチの典型的な例です。まず、デザイナーにプレイするのに十分な時間とスペースを提供しますが、テクノロジーは反撃できます。この実用的なアイデアは、優れたユーザーエクスペリエンスを得るための製品全体の基礎です。 HTML5テクノロジーは強力であり、あまりにも多くの可能性があります。デザインは、これらの技術的可能性をカビに形作ることです。

2。タイムリーで頻繁な方法でのプロダクトマネージャー、インタラクション、ビジョン、フロントエンドコミュニケーション

プロジェクト全体を通して、プロダクトマネージャー、インタラクションデザイナー、ビジュアルデザイナー、フロントエンドエンジニアが毎週会議を開催しています。後に、この頻繁なコミュニケーションが再作業率を大幅に低下させ、開発効率を向上させることが証明されました。

3。小さなステップですばやく実行し、反復に集中します。

Netease Weibo製品は比較的複雑であり、HTML5の開発の進行は比較的遅く、人材は限られています。すべての機能の詳細を完成させて、同時にオンラインにすることは不可能です。それ以外の場合は、後でデバッグするのに1か月かかり、製品の急速な発展に大きな負担を加えます。したがって、最初の号で最もコア機能を実行することは避けられない選択になりました。

2。ユーザーエクスペリエンス

1.ナビゲーションシステムは、画面の上部でより適しています。

ブラウザのツールバーは常に存在していたため、タブナビゲーションバーは画面の下部に固定されなくなり、上部がより適しています。

2。利便性がより重要であり、最も一般的に使用される関数は巧妙に設定されています。

製品のパフォーマンスとブラウザのパフォーマンスにより、現在のWebアプリの流fluさとジャンプ速度はまだネイティブアプリに匹敵するものではなく、ジャンプコストはわずかに高くなっています。したがって、ジャンプによる待機コストを削減するために、最も一般的に使用される関数をユーザーに近づける必要があります。

3.視覚ドラフトは、美学とシンプルさのバランスです。ほとんどの視覚ドラフトは、コードを使用して実装する必要があります。

ほとんどすべてのビジョンはコードを通じて実装されており、視覚的なデザインには複雑すぎないことが最善です。また、フロントエンドエンジニアが視覚ドラフトを消化するには時間がかかります。

3。技術的な実装の理解

1. Safariブラウザの許可制限、Webアプリはカメラツールを呼び出すことができず、画像のアップロード機能をサポートしません。

これは頭​​痛と無力なものです。 iOSシステムにWebアプリに与えられた権限は低すぎます。対照的に、Android SystemのWebアプリはカメラコントロールを取得し、Weiboイメージのアップロード機能もサポートできます（ただし、Androidバージョンはまだ開発されていません）。

2。カットシーンは、ローカルクライアントのようなスムーズな効果を達成できません。

理由は次のとおりです。良いカットシーンは、製品のパフォーマンスを侵食します。 HTML5テクノロジーはそれほど完全ではなく成熟していません。強力なブラウザがまだ不足しています。

まとめ

iOSシステムの許可問題に加えて、Webアプリの優れたパフォーマンスは、ネイティブアプリのパフォーマンスに近いものです。 HTML5テクノロジーは、WAP Webページに新しい寿命を与え、WAPに破壊的な変更をもたらしました。 HTML5プロジェクトでは、機能計画が精製に最適です。情報アーキテクチャは、できるだけ浅く狭くする必要があります。インタラクションデザインは、シンプルさと効率のために努力する必要があります。 Visual Designは、ブラウザの特別な操作環境も考慮に入れています。フロントエンドは、相互作用の設計と視覚設計を徐々に消化するだけでなく、新しいテクノロジーや新しい問題の反撃を大胆に試みます。チーム全体の間の頻繁なコミュニケーションが非常に必要であり、小さなステップを踏み、迅速な開発ステップを実行することをお勧めします。

人力とエネルギーが限られているため、必然的にバイアスがあります。誰もが大騒ぎすることを歓迎します！この興味深いトピックについてあなたと話し合うのを楽しみにしています。