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

推薦する

Linux\Nginx 環境での仮想ドメイン名の設定とテスト検証

Nginx 仮想ドメイン名設定を使用すると、ドメイン名を購入せずに特定のドメイン名を介してローカル ...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

最小限の展開で CentOS8 に OpenStack Ussuri をインストールする方法の詳細なチュートリアル

CentOS8 に最小限のデプロイメントで OpenStack Ussuri をインストールするため...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

JavaScript の継承についてどれくらい知っていますか?

目次序文コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係プロトタイプチェーン...

mysql5.7.18 解凍バージョンで mysql サービスを起動します

mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...

MySQLは「order by」がどのように機能するかを簡単に理解します

並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...

Vue が Ref を使用してレベル間でコンポーネントを取得する手順

VueはRefを使用してレベル間でコンポーネントインスタンスを取得します例の紹介開発プロセスでは、レ...

CSSフロートの特性についての簡単な説明

この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思いま...

最小限のルートファイルシステムを構築するためにbusyboxを移植するための詳細な手順

Busybox: 小さなコマンドが詰まったスイスアーミーナイフ。ステップ1: ディレクトリ構造を作成...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

MySQLがウィンドウ関数で合計関数を実行するときに発生する可能性のあるバグ

MySql のウィンドウ関数を使用して統計データを収集する際に、小さな問題が見つかったので、それにつ...

JS 矢印関数に適さないシナリオは何ですか?

目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...

Ubuntu 16.04にJenkinsをインストールするための詳細な手順

1. 前提条件JDKがインストールされましたecho $PATHソフトリンクを作成し、JDKのインス...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...