レスポンシブ価格表
私は、製品と価格表に関する2行の簡単なランディングページをデザインしています。
モバイル向けのレスポンシブレイアウトを作成したい。価格表を表示するのに最適な方法がわからない。または、モバイルWeb用に別のデザインを用意する必要がありますか？
上記の画像に基づいて、以下のモックアップに似たものを提案します。純粋なモバイル（スマートフォン）の場合、個人的には、ユーザーがダウンロードする必要がある可能性のある画像の数を減らして、初期帯域幅を節約する必要があると個人的に信じています。タブレットユーザーの場合、画面サイズが原因で一部の画像を復元しましたが、デスクトップエクスペリエンスに非常によく似た最高のエクスペリエンスを提供することは本当に役立ちます。 iPadなどの一部のデバイスでは、画面サイズが非常に大きいため、メディアクエリの設定方法に応じて、デスクトップバージョンのサイトが表示されます。
また、プランを降順に積み上げました。これは、より多くのユーザーに見えるように無料サービスを上位にプッシュするために行いました。この背後にあるアイデアは、うまくいけば、ユーザーが無料のアカウントにサインアップし、あなたのサービスがより高いレベルのプランを購入するのに十分な印象を与えることです。
お役に立てれば。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
