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.連続した数字)

推薦する

MySQL 分離レベルの詳細な説明と例

目次MySQL の 4 つの分離レベルデータ テーブルを作成します。分離レベルの設定物事の分離レベル...

JavaScript における変数と関数の昇格の詳細な例

js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...

Nodejs 組み込み暗号化モジュールを使用してピアツーピアの暗号化と復号化を実現する詳細な説明

暗号化と復号化は、通信のセキュリティを確保するための重要な手段です。すでに多くの暗号化アルゴリズムが...

Vueスロットの使用の詳細

目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...

docker mysqlの起動時に初期化SQLを実行する

1.Mysqlイメージを取得するdocker pull mysql:5.7 2. MySQLイメージ...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

JavaScript でよく使われる 3 つの Web エフェクトの詳細な説明

目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...

HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法

Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...

自動同期テーブル構造のMySql開発

開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...

MySQL SQL ステートメントが遅い場合の一般的な原因と解決策

1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...

MySQLで行を列に変換する方法

MySQL の行から列への操作いわゆる行から列への操作は、テーブルの行情報を列情報に変換することです...

nestjs からフロントエンドに返されるデータ形式のカプセル化実装

通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定され...

img 画像タグに alt 属性を付与する必要がありますか?

img 画像タグに alt 属性を追加しますか?画像 img タグの alt 属性を見落とすことはよ...

MySQL テーブルスペースのリカバリに対する正しいアプローチについての簡単な説明

目次予備的注釈問題の再現データ削除の原則データの再利用どの操作がデータホールの原因になりますか?表領...

Windows に Docker をインストールする詳細なチュートリアル

ローカルの MySQL バージョンが比較的低いため、最近 MySQL のバージョンをアップグレードす...