モバイルで大きなフォームを表示する方法は？
現在、会社用に単一ページのWebアプリを構築していますが、問題が発生しました。
結果のグラフとテキスト、およびグラフをすぐに更新する入力フォームを表示したいとします。
現在、Webページは次のようになっています。結果ビューは、スライドとドットで移動できるグラフと2つのテキストビューで構成され、フォームは画面上で大きくスクロール可能です。
しかし、私はそのような小さな画面に別々のスワイプ領域があることを少し心配しています+ネイティブブラウザーのズームイベントとドラッグイベントを追加します。
このデザインで私が見る問題は、ユーザーが結果を表示したいときにフォームを表示する必要がないか、逆に値を入力しているときにフォームを表示する必要がないということです。ユーザーインタラクションでフォームを拡張することです。
よりエレガントで使いやすいソリューションを探しています。何を改善できるでしょうか？私は結果とフォームビューを完全に分離するという考えをいじっていましたが、十分な解決策を見つけることができませんでした。
フィールドの説明は、現在の50％-50％の横並びの配置ではなく、単に入力フィールドの上にある必要があります。
そのため、入力フィールドは次のように100％にする必要があります。行のそれぞれの端から端まで。
（タイピングの目的で）電話が保持されているときは、ほとんどのユーザーが両手を使用し、両方の親指を使用して入力します。あなたはその経験を苦痛にするべきではありません！
入力フィールドを少なくとも15px左右でラップすることを忘れないでください。
あなたが言ったように、進捗/歩数カウンターでそれらを分離します。
過去の経験から、ユーザーが情報を入力しているときに結果を見ると、間違った情報を入力するように影響を与える可能性があることがわかりました。
私は実際にあなたの解決策は良いと思います。ただし、入力フィールドがシステムによって提供される特定の値のみに制限されている場合は、ユーザーがダイヤル方式で目的の値をすばやく選択できるクイックスタートUIを調べます。
それ以外の場合は、ユーザーがフィールドに入力した後、「適用」または「更新」を押す必要があると思うので、デザインが好きです。入力エキスパンドパネルを閉じて、グラフ上で更新を実行できます。良い。