HTML5 は WAP ウェブページに破壊的な変化をもたらす: NetEase Weibo の実用的開発

HTML5 は、国内外のインターネット開発チームからますます支持されています。海外では、GoogleがChrome Web Storeを精力的に展開し、MicrosoftはHTML5技術の利用に対応した「Irish Spring」テーマのウェブサイトを公開し、Nokiaは巨額の資金を投じてNOKIA MAP事業を買収・構築している。国内のインターネット大手も、海の向こうからやってきたこの新しいウェブ開発標準に興味を持ち、HTML5 製品のテストを開始しています。

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 アプリは、強力なモビリティやリッチ メディアなどの利点がありますが、情報の表示スペースが小さい、情報アーキテクチャが深いなどの欠点もあります。両者の使用シナリオは異なります。Weibo Web は、十分な時間と優れたネットワーク状態がある場合に没頭して使用されることがほとんどです。一方、Weibo Web アプリは、些細な時間やさまざまなネットワーク状態がある場合に時間をつぶすために主に使用されます。

そのため、NetEase Weibo Webアプリは、機能が多すぎることを避け、Web側からユーザーがモバイル環境で最も頻繁に使用する機能を抽出して選択し、モバイル側独自の機能を追加する必要があります（たとえば、反復段階でローカライズされたサービス機能の追加を検討するなど）。

2. ローカルクライアントと比較すると、NetEase Weibo Web App はインストール不要、アップグレードが簡単、開発コストが低い、レイアウトが適応的などの利点があります。同時に、応答速度がやや遅い、携帯電話のネイティブコントロールを呼び出す権限が低い、安定性がやや弱いなどの欠点もあります。

両者の長所と短所の分析に基づいて、NetEase Weibo Web App はローカル クライアントの高品質なエクスペリエンスに追いつき、軽量かつ高速であることを保証するように努める必要があります。

簡単に言えば、Web アプリの機能は Web クライアントやローカル クライアントの機能よりも洗練されており、モバイル環境におけるユーザーの最も基本的なニーズを満たすことができます。

NetEase Weibo Web アプリの機能計画は以下の通りです。

2. 情報アーキテクチャ設計: できるだけ浅く狭く

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

モバイル インターネット製品に携わったことがある人なら、情報アーキテクチャをできるだけ浅く狭くする必要がある理由をきっと知っているでしょう。最大の理由は、携帯電話の表示スペースが小さく貴重であることです。携帯電話のローカル クライアントの情報アーキテクチャは浅く狭いものである必要がありますが、これは Web アプリではさらに重要です。ブラウザー ページのブラウザーの下部には常にツールバーがあり、すでに狭い表示スペースのごく一部を占有するからです。以下のように表示されます。

携帯電話の画面の下部にあるブラウザ ツールバーは、Web アプリ製品には役に立ちません。Web アプリ自体はクローズド ループ アプリケーションであり、ブラウザ ツールバーの助けを必要としません。全体的な情報アーキテクチャには影響しませんが、貴重な表示スペースを消費し、ナビゲーション システムの設計に重要な影響を及ぼします (この部分については、前の記事「iPhone Web アプリのナビゲーション設計に関する考察」で簡単に分析しました)。

3. インタラクションデザイン: シンプルで効率的

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

インタラクションデザインのコンセプト:

この製品の具体的なインタラクション設計コンセプトは、ユーザーの使用シナリオの調査、競合製品の分析、Web アプリ開発の現状、Weibo Web アプリ自体の要件から生まれました。最終的にまとめられたインタラクション デザインの概念は次のとおりです。

1. 見つけやすさの向上:

強化されたグローバルナビゲーション、ホームページへの素早い復帰、一般的な操作の永続的な表示、タイムリーなアニメーションデモンストレーション、シンプルで明確な Web ページレイアウトなど。

2. 使用効率の向上

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

3. より知的で思いやりがある

オフラインでの使用のサポート、編集中の偶発的な中断後の情報の自動入力、警告ボックスの慎重な使用、検索提案の実装に関するヘルプの提供、現在のタスク要件に応じたツールバーの配置、アクティブで効果的なフィードバックなど。

4. タスクの集中力を高める

単一タスク操作パス、タブナビゲーションのタイムリーな非表示、干渉要因の排除、使用できないボタンのグレースケール表示、タスクページの最大化、機能の最小化の防止など。

5. プラットフォームの一貫性:

クリックアンドシー、iOS プラットフォームのリストビュー、進むと戻る操作中のプッシュスクリーンアニメーション、iOS プラットフォーム固有のモーダルビュー、アラートボックス、ネイティブコントロールの呼び出し、シンプルで明確なジャンプロジックなど。

この段階でのインタラクティブなデザイン コンセプトは、単なるコンセプトではなく、Web アプリ製品の具体的なデザイン ガイドになっています。美しいデザインコンセプトを伝えるデザイン実装方法は、デザインリサーチ段階における重要な実装です。

デザインの内容と詳細は数多くありますが、ここでは 1 つの詳細だけを取り上げ、皆さんにご紹介したいと思います。

検索性の向上 – グローバルナビゲーションの強化

オリジナルのWAP Weiboと比較すると、グローバルナビゲーションバーが固定されているのは大きな変化です。これを実行する理由を簡単に分析してみましょう。

– ユーザーの使用環境はどのようなものですか? — 屋外でのモバイル状況 (地下鉄、行列など)、または屋内でのアイドル状況 (就寝前の Weibo の閲覧など)。

– ユーザーがこのページにアクセスする目的は何ですか? – Weibo を閲覧しています。

– ユーザーがこのページで使用する一般的な操作は何ですか? — プルダウンして新しい情報を読み、ピン留めして読み込み、他のタブをクリックしてジャンプします。

– グローバルナビゲーションバーが上部に固定されている場合、どのような利点がありますか? — ユーザーにとって、上部に戻って新しい情報を読み込み、タブを切り替え、グローバルな制御感を強く持つことが便利になります。

– グローバルナビゲーションバーが上部に固定されている場合のデメリットは何ですか? – 貴重な情報表示スペースを消費します

…………

ユーザーの使用中、ピン留め、更新、タブの切り替えは比較的頻繁に行われる動作であり、操作の利便性を保証する必要があります。固定グローバルナビゲーションバーは、この要求を満たすことができます。HOME ボタンをクリックすると、上部に固定されて更新されるため、ユーザーはタブを簡単に切り替えることができます。同時に、固定グローバルナビゲーションバーにより、ユーザーは自分がどこにいて、どこに移動できるかを常に明確に把握できるため、ユーザーはグローバルコントロールの強い感覚を得ることができます。

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

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

NetEase Weibo Web アプリのビジュアル スタイルは、さまざまな角度から議論を重ねて決定されました。

1. NetEase Weibo のローカルクライアントと同じ色調を維持する必要がありますか?

製品は異なるプラットフォーム上で一定の一貫性を保つ必要があり、色彩スタイルも製品の気質を形成する重要な要素です。NetEase Weibo ローカルクライアントに似たスキンを使用する必要がありますか? NetEase Weibo ローカルクライアントの主な色は赤です。

分析は次のとおりです。

–この赤色を使用する利点は、製品の一貫性がより強くなり、赤色によって作り出される製品の気質がより「精神的」になることです。

– 赤を使用することの欠点は、赤い部分がWeiboコンテンツよりも少し目立ち、「没入感のある読書」を実現するのがより難しいことです。

Safari ブラウザ経由で NetEase Weibo Web アプリを使用する場合、ブラウザ ツールバーが常に画面の一番下の行を占めるため、最終的な視覚効果はローカル クライアントとは異なります。赤は比較的「騒々しい」色ですが、ブラウザ ツールバーの青灰色は比較的「落ち着いた」色です。 2 つの色の間の大きな違いにより、メガネに極度の不快感が生じます。

上記の分析に基づくと、ローカル クライアントの赤色を使用することは適切ではありません。

2. Safari ブラウザで実行するとどのような影響がありますか?

NetEase Weibo Web アプリは、本製品の環境の一つである 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 が権限を付与すれば、将来的にはこの「緊急のニーズ」に確実に応えられるようになるでしょう。

VI. フォローアップ作業

その後の作業には、主にインタラクティブなウォークスルー、ビジュアル ウォークスルー、QA テスト、オンライン化後のフィードバックの要約と問題の修正、次のイテレーションの計画が含まれます。プロジェクトのプロセスについては誰もが理解しているので、これ以上は言いません。

学んだ教訓

1. ワークフローについての感想

1. 優れたエクスペリエンス デザインでリードします。

このプロジェクトは、デザイン主導の開発の典型的な例です。まず、デザイナーに十分な時間と空間を与えて役割を果たしてもらい、それぞれの動きにテクノロジーで対応します。この実用的なアイデアは、製品全体が優れたユーザー エクスペリエンスを実現するための基礎となります。 HTML5 テクノロジーは強力で、多くの可能性を秘めています。デザインは、これらの技術的可能性を形作る型です。

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

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

3. 小さなステップを踏み、反復に集中します。

NetEase Weibo は比較的複雑な製品です。また、HTML5 の開発進捗が遅く、人材も限られているため、すべての機能詳細を完成させて同時にオンラインでリリースすることは不可能です。そうしないと、その後のデバッグに 1 か月かかることになり、製品の迅速な開発に大きな負担がかかります。したがって、最初のフェーズではコア機能のみに焦点を当てることが不可欠です。

2. ユーザーエクスペリエンスの経験

1. ナビゲーションシステムは画面の上部に配置するのが適しています。

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

2. 利便性を重視し、よく使われる機能を巧みに設定しています。

製品のパフォーマンスとブラウザのパフォーマンスにより、現在の Web アプリの流暢性とジャンプ速度はまだネイティブ アプリに匹敵せず、ジャンプ コストはわずかに高くなります。したがって、ジャンプによって発生する待機コストを削減するには、最もよく使用される機能をユーザーの近くに配置する必要があります。

3. ビジュアル ドラフトは、美しさとシンプルさのバランスが取れています。ビジュアル ドラフトのほとんどは、コードを使用して実装する必要があります。

ほぼすべてのビジュアルはコードを通じて実現されるため、ビジュアル デザインは複雑になりすぎないようにしてください。フロントエンドエンジニアがビジュアルドラフトを理解するのにも時間がかかります。

3. 技術的実装の理解

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

これは非常に面倒でイライラするものです。 iOS システムによって Web アプリに付与される権限が低すぎます。一方、Android システムの Web アプリでは、カメラ コントロールを呼び出すことができ、Weibo の写真アップロード機能もサポートされています (ただし、Android バージョンはまだ開発されていません)。

2. カットシーンはローカルクライアントと同じスムーズな効果を実現できません。

その理由は、優れたカットシーンは製品のパフォーマンスを低下させる、HTML5 テクノロジはまだそれほど完成しておらず成熟していない、強力なブラウザがまだ不足している、などです。

まとめ

iOS システムの権限の問題を除けば、Web アプリの優れたパフォーマンスはネイティブ アプリのパフォーマンスに近いです。 HTML5 テクノロジーは WAP Web ページに新たな命を吹き込み、WAP に破壊的な変化をもたらしました。 HTML5 プロジェクトでは、機能計画は簡潔に行うのがベストです。情報アーキテクチャはできるだけ浅く狭くする必要があり、インタラクション デザインはシンプルで効率的である必要があります。ビジュアル デザインでは、ブラウザーの特殊な動作環境も考慮する必要があります。フロント エンドでは、インタラクション デザインとビジュアル デザインを徐々に消化するだけでなく、新しいテクノロジーと新しい問題に大胆に対応する必要もあります。チーム全体での頻繁なコミュニケーションが非常に重要であり、開発においては小さなステップを踏みながら迅速に進めることが最善です。

人手とエネルギーには限りがあるため、偏見は避けられません。皆様の批判を歓迎します。この興味深いトピックについて皆さんと議論できることを楽しみにしています。

原題: HTML5 は WAP ウェブページに破壊的な変化をもたらす。NetEase Weibo の実用的開発

キーワード: HTML5、もたらす、WAP、ウェブページ、転覆、性転換、開発、実際の戦闘、ウェブ、ウェブマスター、ウェブサイト、ウェブサイトの宣伝、金儲け