. , , ( ) . . ...



. . , . , “ ?”. wireframe , - . , …



high fidelity , .. . , , . , , -. , . , . , , .

, Figma, -. , , «» , - .



, - , Figma. Web / desktop, . React / React Native . : @kamushken

-. . , , . . - , . Axure - , . — , , . , :)

c . Dribbble, : , , , memphis — . , . , .. . — . , . “ ”, , , . . - . - …

, . . : , — , , - . . . . :

. message . , , - Roboto. , . - , IT . , Montserrat ( ) Roboto ( “” ):

Header

. , .

Tabs:

— , “ ” . , - , “” . , , , . 2000-. , . , group selection 4- Set selected = true onClick. - : .

Submenu:

: , , .. 60%, 100%. . , ; . , . , …

User’s controls:

右上隅には、この概念における私のアニメーションの空想が集中しています。 メッセージアイコンをポイントすると、赤い円が一回転し、イベントカウンターが新しい+1をカウントします。 回転効果を理解した後の簡単なアイデア：オブジェクトの軸の交点の中心から回転の中心を移動し、モニターに少なくとも8つ書き込むように教えることができます。 最大加速時に数値が変化するため、目には目立ちません。 ところで、このようなマイクロイテレーションは、ビジネスで必要な場合にのみ、どのインターフェイスでも新しいイベントの重要性を高めることができます。 userpicをクリックすると、その軸を中心に回転し、丸い（！）サブメニューが表示されます。 これは、回転効果を使用した実験の続きです。 このようなポップアップやアニメーションを必要とする製品はほとんどないことに同意します。



ただし、このような「インターフェイスゲーミフィケーション」は、たとえばプロモーション製品やゲームシステムで使用できます。 ところで、[ログアウト]をクリックしてサブメニューを折りたたむと、外観と同様に折りたたまれます。 プロトタイプのこのような複雑なアニメーションは迅速に機能し、スローダウンしたり、残りのエクスペリエンスを中断したりすることはありません。 全体の秘密は、正しいタイミングと起こっていることの非線形性のみにあります。 要するに、二つの基本的なルールがあります： オブジェクトが速く表示されますより消え 、 速度は直線的にすることはできません。

左の列

垂直ナビゲーション：ページまたはカテゴリ

内部に動的な要素数を持つコンポーネントに適しています。 実際、存在しないインターフェイスを作成することは非常に困難でした。スクリプトはなく、問題もありません。解決するものは何もありません。 設計した場所をコピーしたので、作成できる抽象的なページのあるパネルを取りました。 アイコンの色を大胆にいじり続けます。新しいアイコンを作成することが最も重要であるため、明るい緑色です。 通常、検索は3次であるため、アイコンは黒です。 検索機能はほとんど目に見えないことがわかりますが、緊急に条件付きページを見つける必要がある場合は、虫眼鏡を見つける動機があります。 そして、あなたはそれを速くします！ 同様に実行されるコントロールは、保存/名前変更/複製です。 フィードの優先度が最も低く、ホバー照明のコントラストが非常に高くなっています。 右側にあるスクロールバーは、適切な瞬間までインターフェイスからあまりにも多く隠すことの良さを思い出させます。

ツール：ツールバー

私のコンセプトのこのウィジェットでは、オブジェクトのグループの状態の変化を見つけました。 すべての状態スタイルを一度にトリガーする必要があります（[プロパティ]> [マウス操作スタイルのトリガー]）。



したがって、クリックのアクティベーション効果は、すべての要素（アイコン、背景、署名）に対して直ちにトリガーされます。 グループ全体ですぐにではなく、順番にオンオーバーを行うことははるかに困難であることが判明しました。 特定の要素が大きな要素の上にあり、最初にその状態をアクティブにし、次に小さな要素に対してアクティブにする必要があるとします。 したがって、カーソルが正式に両方のオブジェクト上にある場合、両方が「燃える」はずです。 そして、カーソルを部分的に移動するとすぐに、小さなオブジェクトのみが消えます。 私の概念では、これはタスクではありませんでしたが、実際には必要な場合があります。 オンラインストアの製品カードと「追加」ボタンを想定します。 カードの上にカーソルを合わせると影が表示され、カーソルが両方のオブジェクトの上にあるときにボタンのスタイルが変わります。 そのため、グループ内の2つのオブジェクトの標準のMouseOverは機能しなくなります。カードにカーソルを合わせると、すぐに両方のオブジェクトが強調表示されます。 私はJS機能によって、この問題をバイパスonMouseHover /アウト-とすぐにボタンがアクティブになると、それが選択状態を取得し、CSSによる外観（別のプロジェクトの一例）を変更します。

右の列

プロパティ：または要素のプロパティ

この概念的なインターフェースの適切な部分は、「テキスト入力が機能する条件で、入力の設計をどこまで進めることができますか？」という質問に答えることになっています。 通常のHTML入力とその設計では、それほど遠くまで行けませんでした。 ただし、境界線をオフにして、その下の長方形に既にデザイン全体を作成する場合は、ごまかすことができます。 次に、入力に焦点を当てるとき、背景のスタイルを変更するだけです：onHoverとonFocusイベントのために。 彼らがコードに入るまで、作業中にこれに気付く人はほとんどいません。 ちなみに、特に昼食をとった場合は、マシンコードをそこに登ることはお勧めできません。 異なる状態の動的パネルへの各入力を複雑にしました。 これにより、フェード効果の変化の柔らかさを実現できました。 入力にカーソルを合わせると、点線の境界線が滑らかに表示されます。 クリックしてください-ゆっくりと消え、入力が徐々に暗くなります。 それはささいなことのように見えますが、コーディングを知らずにこれを実装するために、少し手を加える必要がありました。 インタラクションサブセクションでは、SetTextアクションを試しました。アイコンにカーソルを合わせると、ツールチップが表示されます。 もちろん、そこにアニメーションを追加したいのですが、すべての効果を削除する必要がありました。 すぐに一連のアイコン全体にカーソルを移動すると、マウスがすでに遠くにある場合でも、アニメーション全体が遅れて繰り返されます。 ドロップダウンリストでは、アプローチは非常に標準的です。リストをクリックすると、アンカーのマイクロイテレーションによく遭遇しました。 Axureの環境でそれを自分で再現する方法を学ぶことだけが残っていました。

通知：非常に重要なポップアップ

重要なのは目立つため、そのような色です。 私は再びカラーホイールで遊んでいます。 「閉じる」クリックが行われた方向にポップアップが消えるようにしたかったのです。 基本的には、右上隅になります。使用可能なすべてのツールを使用して、緑色のハンバーガー（！）が付いた明るいウィンドウを送信します。 これを行うには、右上の近似点を使用してポップアップのサイズを0x0に縮小します（サイズの設定アクション）。 そして、300msの同じタイミングと簡単な効果で、透明度をゼロに下げます。 2つの効果が同時に得られ、それらが一緒になって許容可能な結果が得られます。

センター

完璧主義にあまり入らないようにするために、私は中心にあまり気にしませんでした。 製品に「空の」場所があってはならないことをもう一度思い出しました。 ユーザーがシステム内の空白のシートで開始する場合、このシートをユーザーに表示しないでください。 文字通り。 彼を誘導する必要がある行為します 。 したがって、中央では、一般的なスタイルの簡単なオンボーディングと、目立つ[作成]ボタンを作成します。このボタンを押すと、プレースホルダーが展開されます。



これでプロトタイプが完成しました。 この研究中に私の質問の多くに対する答えを見つけました。

結論の質において

Web製品のアニメーションがデザイナーの後に開発者によって考え出されたチームについて聞いたことがあります。 それはそのようであってはなりません！ デザイナーは、画面上のオブジェクトを移動するためのロジックとルールを考え出す必要があります。 優れたデザイナーは、アニメーションを使用するためのルールを知っている必要があります。 現実世界のオブジェクトのインスピレーションを探しています。 実際、インターフェイスのアニメーションが本物のように見える場合、不協和音は発生せず、製品の品質の向上に役立ちます。 最後に、特定のシナリオに応じてイベントの正しいタイミングを感じるために練習をやめないと言います。



存在しないインターフェースでお時間をいただきありがとうございます！ 今、あなたはそれがpoklikat行うことができます。このリンクをあなたがしたい場合は、ダウンロードを...



Axure RP 8のソースはGumroadて$ 12のための利用可能です。このリンク



PS：



アニメーション仕様の本当に理解可能で便利なエクスポートの問題は、ツールの市場で未解決のままです。 私は、関連するすべてのエフェクト、タイミング、オブジェクトのパラメーターを最適に転送するエディターを聞いたことがありません。 開発者にすべてのニュアンスを伝えることは残っています。



意味的に正しいコードをAxureにエクスポートしたいのです。 その後、開発はより最適に進みます。 モバイルプロトタイプの作成を忘れないでください。 そして今ではもちろん可能ですが、それを忘れていない楽器ほど完璧ではありません。 純粋なCSS（影の色や破線の境界線など）を適用できる場所にPNGを挿入しないようにします。 そして、仕様の通常のエクスポートを行うために、すでに多くのソフトウェアが市場に出回っており、UIキットをまとめてまとめています。 さらに、ソース内のオブジェクト間を測定するためのインデントは、重大な問題ではありません。 現在、低忠実度のプロトタイピングはすでに日没にあり、Akshuraチームが優先順位を修正しない場合、すぐに物事が出てきます...



際立ったいくつかの無料の夜があります...



中インターフェイスのアニメーションに関するいくつかの良い記事：

EN： UXデザインのための6つのアニメーションのガイドライン

ENへ： モーションで会社ユーザビリティの作成：モーション・マニフェストの中UXの