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