Pengyou.com モバイル クライアントのダウンロード ページのデザイン共有 (画像とテキスト)

Pengyou.com モバイル クライアントのダウンロード ページのデザイン共有 (画像とテキスト)
まずは簡単なデータを見てみましょう。
友達ネットワークモバイルクライアントダウンロードページデザイン共有Sanlianチュートリアル
Googleが発表したレポートによると、
①中国の都市の97%に携帯電話があり、そのうち35%にスマートフォンがある。
②テレビとスマートフォンのうち、回答者の50%がスマートフォンよりもテレビを放棄したいと答えた。
③ 中国の都市部のスマートフォンユーザーはいつでもどこでもスマートフォンを使用しており、スマートフォンが最も頻繁に使用される場所は自宅(66%)、旅行先(59%)、公共交通機関(52%)、レストラン(38%)、ショッピングモール(30%)となっている。
(データソース:中国都市スマートフォンデータ調査レポート、http://www.dianru.com/news-56)
今後のインターネット分野では、モバイルプラットフォームの構築が徐々にインターネット企業の開発中核となることが予測されます。
国内外のモバイル機器の増加に伴い、ユーザーのモバイルサービスに対する需要も高まっています。ユーザーは、いつでもどこでも携帯電話でインターネット情報を入手できることに満足しています。
現在、中国の都市部のスマートフォンユーザーの 75% が毎週スマートフォンをソーシャル ネットワーキングに使用しており、これは従来のネットワークを介したソーシャル ネットワーキングの割合 (84%) に近づいています。モバイル インターネットが成熟するにつれて、近い将来、携帯型モバイル デバイスを介してインターネット情報を取得することが、主流のネットワーク アクセス ポイントになると予想されます。
現在のネットワークサービス製品では、Web側がモバイル側のコンテンツを十分に表示し、モバイル側がWeb側のエッセンスを凝縮し、両者が相互に補完し、影響を与え、促進しています。主流の設計プロセスはウェブから携帯電話へですが、海外の一部の製品では、携帯電話を優先し、携帯電話の機能に基づいてウェブ側に拡張・拡大するという逆の設計を試み始めています。これは、将来のネットワークサービス製品の設計のトレンドでもあると私は信じています。
もちろん、ウェブ上には Pengyou.com という比較的成熟した製品がすでに存在します。この前提の下で、この設計で必要なことは、ウェブデザインを強化してユーザーにアプリをダウンロードしてもらうことです。
1 予備的な議論 ご要望書を受け取った後、まずは自社製品から始めて、国内外の優れた APP ダウンロード ページと組み合わせて分析します。
次に、Friend Network モバイル クライアントのダウンロード ページのいくつかの重要なポイント、つまり、軽量、ページ スペースの感覚、ブラウジングの快適さを決定しました。
1.1 薄くて軽い 文字通り、薄くて軽いとは「少ない」という意味です。
コピーライティング、画像、その他の要素を簡素化および洗練して、閲覧者がページとクライアントを十分に理解できるようにし、細部に注意を払うことで、「少ないほど良い」効果を実現できます。ユーザーの認識を失うことなく、それを十分に表現します。これが、このページ デザインにおける「軽量」の定義です。
1.2 ページ空間の感覚 実際、ページ上で情報を閲覧することは、実際の図書館で閲覧することに似ています。
情報を閲覧するために狭いスペースに制限されることを好む人はいません。そのため、私たちは、少なくともページが混雑しすぎないように、ユーザーがこのページに長時間滞在できるように、息抜きできる快適なページ空間感覚をユーザーに提供するよう最善を尽くしています。
この領域では、主にページデザイン要素の処理に焦点を当てています。あまり多くの素材を積み上げる必要はなく、クライアントの機能特性を最もよく表現できるコアコンテンツを把握することが重要です。
1.3 閲覧の快適さ ユーザーは、コンピュータを使用するのと同じようにページ上のテキスト情報を閲覧しますが、テキスト情報が多すぎると、コンピュータ システムに無駄に蓄積されたファイルのようなものになり、閲覧速度と理解度に影響します。
コピー情報の閲覧に関して、私たちが快適さと定義するのは、コピー情報を素早く閲覧し、コピーの要点を簡単に把握することです。そのため、コピーについて何度も議論し、何度も簡素化し、Friend Network モバイル クライアントの機能を 1 つか 2 つの文でできるだけ説明しながら、情報が完璧に表現されるように努めました。
2 デザインプロセス 私たちは、デザインとは、多くの人が認識し、視覚的に美しい重要なポイントを見つけることだと考えています。
デザインプロセスは、何もないところから何かを生み出すプロセス、そして何かが優れたものを生み出すプロセスへと反復するプロセスです。
2.1 このページのデザインプロセスは複雑である
この図の 4 つのスキームは、従来のページ設計から、フレームワークを破壊して簡素化を目指すこと、生活の感情を描くこと、そして最後に確認して完成させることまで、設計プロセスの 4 つの段階を表しています。
これは模索と進歩のプロセスです。紆余曲折はありましたが、議論を重ね、既存のデザインを常に覆し、考え直すことで、最終的に私たちが思い描いていた方向性が正しかったことがわかりました。誰もが、より良いページデザインを作りたかったのです。
製品やデザイン自体に関して、私たちが最も望んでいるのは、ユーザーがこのページを見たときに、あまり醜くないことです。
もちろん、私たちはもっと良い結果を出すことができると信じています。
2.2 デザインを貫き、合計4つのデザイン案を考案しました。デザインの最適化を継続的に行いながら、デザイン内の要素も継続的に最適化・改良していますが、最も基本的なことは、ページの軽さや薄さ、ページの空間感、閲覧の快適さを確保することです。
これは、初期の議論で決定されたキーポイントです。ページ設計の全プロセスを通じて、各バージョンの中心となる設計ポイントは保持され、次のバージョンで最適化されます。簡素化されるか拡張されるかに関係なく、最初の 3 つのキーポイントがページ設計の最も基本的なこだわりとして設定されます。
2.3 長い作業期間を経て、最終草稿は最も注意を要するものになります。
ページの全体的なスタイルとグラフィック要素はすでに決定されているので、次のステップは詳細に取り組むことです。ボタンの色のグラデーションからテキストの句読点まで、すべてが繰り返し検討されます。盲目的に細部にこだわるわけではありませんが、細部でミスをしたくないのです。そのため、コピーを調整する際には、いかに簡潔に、ユーザーにとって分かりやすいものにするかが、最終的なデザイン作業のメインとなります。
3. 設計ポイントの検討
3.1 ユーザーシナリオをシミュレートします: 屋外レストラン、ショッピング、散歩と射撃、友人との散歩、カフェ、屋上でのおしゃべり。
日常生活におけるこれらの一般的なシーンは、実際には Friends Network モバイル クライアントのユーザー向けのシナリオの位置付けです。また、対応するシーンでのユーザーによるクライアント機能の使用も図に含まれています。
例えば、親友と一緒に買い物をしているとき、WeChat Momentsネットワークを通じて、すぐに自撮り写真を友達と共有できます。一緒に旅行をしているとき、WeChat Momentsネットワークを通じて幸せを共有していただければ幸いです。使用シナリオをシミュレートすることで、ユーザーの感情的な位置づけを高めたいと考えています。
3.2 カメラ、紙飛行機、コーヒーカップ、紙コップの飲み物など、挨拶を補助する文脈上のオブジェクト。
写真はクライアントの使用シーンを表しており、写真内の補助アイテムにはシーンの含意とクライアントの機能という2つの意味が含まれています。これが、シーンのテーマを強調し、クライアントの機能を支援するためにこれらの状況アイテムを追加した当初の意図です。
「対面でチャットしているときは、喉の渇きを癒すために飲み物を 2 杯飲む必要があるかもしれません。Pengyou.com でのチャットは非常に直接的なので、話すことが多すぎるからです。」これは、ユーザーに伝えたいシグナルです。Pengyou.com のモバイル クライアントが実際に非常に興味深いものであることをユーザーに知ってもらいたいのです。
3.3 コピーはシンプルにしてテーマに焦点を合わせ、最も表現したい内容を強調し、不要な視覚的な干渉を減らします。コピーは多すぎる必要はありません。コピーが多すぎると読みにくくなり、主なアイデアが失われます。そのため、私たちは閲覧の快適さを重視しており、それはつまり、コピーを常に合理化し、改良することを意味します。私たちは、できるだけ短い時間で、私たちが伝えたいことをユーザーに伝えられるように努めています。
4 結論文の最初の草稿と最終草稿は異なり、ページスタイルや視覚要素から句読点や背景の透明度まで、プロセス中に常に調整され、最適化されます。
最終的には比較的満足のいくデザイン結果が得られましたが、画像内の多重影の全体的な感覚、補助オブジェクトの処理、背景とテーマの統合など、完全には対処されていないデザイン上の問題など、無視できない問題がまだいくつか残っています。その後も少しずつ調整と最適化を進めてきました。細かい調整ではありますが、全員が心を込めて取り組んでいます。
出典: テンセントISUX

<<:  NFS サーバーの原理と、その構築、構成、展開の手順を簡単に分析します。

>>:  SQLはLeetCodeを実装します(180.連続した数字)

推薦する

Node.js は、異なるリクエストパスに応じて異なるデータを返します。

目次1. 異なるリクエストパスに応じて異なるデータを返す方法を学びます。 2. 送信データ: データ...

ウェブページの読み込み速度を上げる6つのヒント

第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...

jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

結果: 実装コード: スワイパーコンポーネントと一緒に使用する必要がありますSwiper 基本デモア...

MySQL インフラストラクチャ チュートリアル: クエリ ステートメント実行プロセスの詳細な説明

序文私は以前から、SQL 文がどのように実行され、どのような順序で実行されるのかを知りたいと思ってい...

js における浅いコピーと深いコピーの詳細な説明

目次1. jsメモリ2. 譲渡3. 浅いコピー4. ディープコピー序文:以下の記事を読む前に、記憶に...

Docker コンテナ データ ボリュームの名前付きマウントと匿名マウントの問題

目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...

Vueのvue-tree-colorコンポーネントの組織構造図の事例を詳しく解説

目次ネプローダーをインストールするプラグインのインポート始める配置折りたたみディスプレイノードをクリ...

MySQL が暗黙のデフォルト値を処理する方法

何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...

Linux mysql-5.6 でルート パスワードをリセットする方法

1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...

TypeScript の条件型に関する詳細な読書と実践記録

目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...

jQueryは要素を追加した後に元のイベントが実行されない問題を解決します

まずエラーコードを見てみましょう。 html: <テーブルボーダー="1"...

音楽プレーヤーアプリ(アプリケーションソフトウェア)の分析と再設計 美しい音楽プレーヤーインターフェースの設計方法

無線インタラクションにずっと興味があったので、今回は実践してみようと思います〜この分析と評価は iO...

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

純粋な CSS で DIV サスペンションを実装するサンプル コード (固定位置)

DIV フローティング効果 (固定位置) は CSS のみで実装されており、IE8、360、Fir...

JavaScript コンストラクタとプロトタイプの関係

目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...