ライブプレビュー-分割画面の代替
私はデザイナーとフロントエンド開発者のための遊び場に取り組んでいます。 ライブプレビューがその機能の1つです。これは、htmlまたはcssコードを変更している間、結果をリアルタイムでプレビューできることを意味します。 jsbin、jsfiddle、codepenのような他のほとんどの同様のサイトは、パネルを使用してこの問題を解決しています。これらの問題は、作業しているページを小さなペインでプレビューできることです。 Adobe Dreamveaverでは、画面を分割できます。左側でコーディングし、右側でプレビューします。私は、その「ライブプレビュー」のエクスペリエンスをより良くすることを目指しています。プレビュー領域をできるだけ大きくしたいのですが、コードを書くのに十分なスペースがあります。
考えられる解決策の1つは、プレビューを全画面表示にし、移動可能なウィンドウにコードを書き込むことです。ウィンドウはプレビューの一部を覆いますが、好きな場所に移動できます。
私の質問は：この状況でライブプレビューの経験を改善するにはどうすればよいですか？ UXを改善するより良い方法はありますか？
パネルを分割することは、コードとプレビューの両方を同時に表示するための最も有用な方法です。心に留めておくべきことは、多くのデザイナーや開発者が設計に必要なものよりもはるかに多くの画面領域を持っているため、多くの人が分割画面に問題がないことです。
ただし、ユーザーのエクスペリエンスを向上させる可能性があると考えられることが2つあります。
- パネルのサイズ変更を許可。ほとんどの場合、プレビューで画面の大部分を占め、コードがかなり狭い（80〜120列の幅）必要があります。
- タブを使用画面ビューをコードとプレビューの間で切り替えます。これを行う場合は、タブを切り替えるキーボードショートカットを使用してください。タイピング中にこれをすばやく行うことができると、同時に両方を表示するよりもわずかに遅くなります。
- セパレートモニターでのプリビューと編集パネルのサポート。多くの人々は小さな画面でマルチモニターのセットアップを設計し、これは彼らの生活をずっと簡単にします。
Adobe FlashまたはChrome Web Inspectorの動作がとても楽しい方法を見つけました。変更したい要素を見つけるだけで、関連するコードとスタイルが得られます。
通常、コードを書いているときはプレビューを必要としません。それを変更しているときだけです（「背景色を変更すると、デザイン全体にどのように影響しますか？」）。したがって、編集可能なプレビューを使用する方が、分割ビューよりも関連性が高くなります。
デザインの特定の部分に関連付けられたコードを簡単に見つけられる限り、コード用の小さなスペースがあっても問題ではないと思います。
コードを配置して別のウィンドウでプレビューし、ユーザーに最適な方法を実行させます。
- プレビューの上にコードを配置する
- 1つのモニターでコードを並べてプレビューします。 （これがWindowsであると仮定すると、 Snap を指定すると、これは簡単になります。）
- コードを配置し、別のモニターでプレビューします。
- プレビューウィンドウのサイズを特定の解像度に設定します。
共通点が最も低いエクスペリエンスを構築しないでください。人々が彼らのニーズに適応できるものを構築します。
私自身の経験では、デザインを特定の画面解像度でプレビューすることがよくあります。 1024x768で適切に機能する必要があるエンタープライズアプリケーションを設計しているとしましょう。設計を独自のブラウザーウィンドウで開き、そのウィンドウを開発者ツールを使用して希望する特定のサイズに設定し、エンドユーザーエクスペリエンスに近づけようとします。プレビューウィンドウに特定のサイズを提供する方法や、プレビューのサイズを表示する方法を確認できます。また、新しいブラウザーウィンドウ/タブでプレビューを開くためのバックドアがあると、大画面のデザイナーは、コードとデザインを並べて配置したいコントロールを取得できます。