自分自身をUXPinで始める方法
モバイル設計、アプリケーション設計、レスポンシブデザインの分野に進むにつれて、UX（ユーザーエクスペリエンス）とワイヤーフレーム、インタラクティブなプロトタイピング、モックアップに重点が置かれています。このニッチを目的としたツールは数多くあり、複雑で機能豊富な巨大巨獣から疎外に至るまで全面的な役割を果たしています。デザイナーがデザイナーのために開発したものだから、UXPinは私の目を引くツールのひとつです。
私たちが進む前に…警告。あなたのソフトウェアが所有している組織であれば、UXPinはあなたのためではありません。このアプリで行われたすべての作業はブラウザで行われ、保存したプロジェクトはアカウントに保存されます。
UXPinを使い始めるには、ブラウザを起動してUXPinに向かいます。ここから無料トライアルにサインアップしたり、あなたの期待するニーズに基づいて毎月のプランを手配できます。登録手続きは非常に簡単で、ユーザー名とパスワードを設定するとすぐに利用できます。
UXPinでプロジェクトを開始する方法
ログインするとダッシュボードに到着し、ここから新しいワイヤフレーム、新しいモバイルプロジェクトまたはレスポンシブウェブデザインプロジェクトを作成することができます。 UXPin用のプラグインもあり、PhotoshopやSketchのプロジェクトを持ち込むことができます。この方法については、いくつかのテキストを含むバナーを作成し、バナーに電子メールボタンを追加します。これを達成するために、Create a new wireframeを選択しました。
UXPinインターフェイスの使い方
デザインサーフェスは4つの領域に分割されています。左側の黒い領域には、ダッシュボードに戻り、使用する要素を開いたり、スマート要素パネルを開いたり、要素を検索したり、ページにメモを追加したり、チームメンバーを追加したりする一連のツールがあります。一番下に短いチュートリアルを開くボタンと、あなたのアカウントにアクセスするためのボタンと、FAQにアクセスするボタンがあります。質問をしたり、フィードバックを提供したりしましょう。
一番上の青い領域には、一連のツールとプロパティがあります。右側のより暗いボタンを使用すると、デザインを繰り返したり、プロジェクトの設定を調整したり、ページを共有したり、ページ内のブラウザ内のシミュレーションを行うことができます。
要素パネルでは、デザインサーフェスのビットとピースを取得し、プロジェクトの名前を付けたり、ページを追加または削除したりします。
Elementsライブラリは、UXデザイナーには嬉しい驚きです。このポップダウンでは、iOSからAndroid Lolipopまで30以上のライブラリから選択できます。また、Font Awesomeアイコン、モバイル用ジェスチャーアイコン、ソーシャルウィジェットのコレクションとともに、BootstrapとFoundationの要素にアクセスできます。
04/09要素をUXPinページに追加する方法
始めるには、Box要素をデザイン面にドラッグし、マウスを放すと、 プロパティパネル 開く。プロパティボタンを使用すると、要素に名前を付け、要素の幅の高さと位置の値を設定できます。エレメントにパディングを追加したり、コーナーを丸めたり、不透明度を調整することもできます。背景色ボタンをクリックすると、RGBAカラーピッカーが開きます。
選択した要素にフォント、枠線、パターンを割り当てることもできます。 Lightning Boltは、選択した要素に対話性を追加する機能を提供します。
05の09UXPinでテキストを追加および書式設定する方法
テキストを追加するには、テキスト要素をデザイン面にドラッグしてテキストを入力します。 Textプロパティをクリックします。 ボタンを押して、フォントのプロパティを開き、テキストの書式を設定します。ダミーテキストのブロックが必要な場合は、テキストエレメントを追加し、 LOREM IPSUMを生成する ボタンをクリックします。
06の06イメージをUXPinページに追加する方法
このタスクを達成するには、いくつかの方法があります。あなたは イメージツール ツールバーで、ライブラリからImage要素を追加するか、上の図のようにデスクトップからデザインサーフェス上の要素に画像をドラッグアンドドロップするだけです。
07の09UXPinページにボタンを追加する方法
Button要素がありますが、 ボタン "を サーチ エリアは、上に示したように、すべてのライブラリにあるすべてのボタンを開きます。あなたのために働くものをデザイン面にドラッグし、プロパティを使用して色、フォント、境界線の半径を変更します。ボタン内のテキストを変更するには、テキストを一度クリックして新しいテキストを入力します。
08の09UXPinページへのインタラクティブ機能の追加方法
これは最初に表示されるほど複雑ではありません。電子メール入力については、入力要素を追加し、サイズを変更し、テキストを入力し、テキストをフォーマットしました。入力要素が選択されている プロパティボタンをクリックします そして、 要素のプロパティ 表示される 可視性 ボタン - 眼球 - パネルの右上隅にあります。
ボタンを選択し、をクリックします。 インタラクションボタン - プロパティのライトニングボルト - 。 Interactionsパネルが開いたら、New Interactionを選択します。トリガーポップアップからクリックを選択します。アクション領域で要素を表示を選択します。どの要素を表示するか尋ねられます。ガンサイトを一度クリックし、Input要素をクリックします。要素が識別されると、要素をアニメートするかどうかを決定できます。このケースでは、入力ボックスを簡単に表示することに決め、デフォルトの持続時間値300msを使いました。
私はまた、ボタンがクリックされたときに約65ピクセル右に移動させたいと思っています。ボタンを選択し、インタラクションパネルを開いて選択した 新しいインタラクション。私はこれらの設定を使用した：
- 引き金：クリック
- アクション： 移動する
- 移動方向：x軸上に65 px
- アニメーション：リニア
- 期間： 300 ms
インタラクションを削除するには、そのエレメントを選択し、インタラクションパネルを開きます。パネルでインタラクションを選択し、ゴミ箱をクリックして削除します。
09 09UXPinでページをテストする方法
ブラウザーで作業しているため、テストは簡単ではありません。クリック デザインをシミュレートする ボタン。ページがブラウザで開き、テストすることができます。また、ページの左側には、コメント、複数のページがある場合のサイトマップ、ユーザビリティテスト、ライブ共有、編集、ダッシュボードへの返却を可能にするパネルが追加されます。
ページの下部には、インタラクティブな要素を表示したり、コメントを表示したり非表示にしたり、他のユーザーとプロジェクトのリンクを共有するための小さなパネルがあります。
