featured_microinteractions

Microinteractions: 設計の詳細

From Microinteractions: Designing with Details

「最高の製品はうまく二つのこと: 機能と詳細。
機能は、あなたに人々 を描くものr 製品;詳細は、それらを維持何が"Dan Saffer は言います。
細部の重要性をすることはできません。
強調しました。
詳細はユーザーに愛を確認またはアプリまたは web サイトが嫌い。
Microinteractions はそれらの det不振の解決策します。
彼らは、グローバル デザイン方式で容易に見落されるかもしれないが、彼らは実際に全体を保持一緒に体験します。
この記事で私は何が、microinteraction は、なぜ彼らがおいらを説明しますそれは、いくつかの素晴らしい例を提供します。
微妙な瞬間は、何が Microinteraction Microinteractions です。
中心に 1 つのタスクを達成する s。
私たちの周りのほぼすべてのアプリケーションで満ちています。
microinteractions。
Microinteraction の最も有名な例は計算の前に長い間存在しています。
rs は今まで発明されました。
オン/オフのスイッチは頻繁に起こる最初の microinteraction、製品です。
特定の microinteractions のいくつかの他の例が含まれます: 振動通知ゲテル サイレント モード アイコンをミュートする iPhone を切り替えるときの表示について。
プル-更新 UI pattern。
アクションでより多くのコンテンツを見つけることのユーザーの欲求を接続することで、さわやかな、経験よりシームレスになります。
画像クレジット: Ramotion 社会的ネットワーク 'の like ボタンs これは、インタラクティブなアニメーションを使用して強調表示の変更。
このようなフィードバックをユーザーに通知、彼ら are ポストが好き人のリスト。
画像クレジット: Dribbble なぜ彼らの仕事の短い、microinteractions は、ユーザー インター フェースはより少ない機械と人間を作る、UX を向上します。
多くの時間は we ルック アンド フィールと設計との関係について考える。
Microinteractions、について考えるとき tちょっとかなり多くメイクアップ製品、サービスやブランドについてユーザーがどのように感じるバランス。
Microinteractiアドオンで人間中心設計を微調整: 即時のフィードバックを提供する-視覚的なフィードバックの魅力 to ユーザーの自然承認の欲求します。
ユーザーは即座に彼らの行動は accepte 知っています。
d、および彼らは、視覚的報酬に喜んでいます。
相互作用のためのファシリテーターとして機能-Microinteractions は、実際に対話を促す力を持っています。
彼らは方法についてユーザーを導くことができます。
約もたらす喜びで動作-Microinteractions は、少しの余分のための絶好のチャンス主な経験を損なうことがなく、デザインで楽しませてくれます。
追加の利点のため microinteractions は本質的に簡単な繰り返し使用を設計する必要があります。
適切に設計された microinteractiアドオンは、作成することができる: 習慣ループ Microinteractions 習慣ループのキーコンポーネントであります。
習慣、日時は、人々 が同じ操作を繰り返し実行するときに形成されました。
典型的な習慣のループで構成されています 3 elemエント: キュー — 操作ルーチンを開始するトリガー、実行するキューに対し、アクション報酬-あなたはルーチン、ヘリコを完了するための理由を完了から得る利点n の強い報酬より強く、癖になります。
新しい Facebook の通知友人のリクエストは習慣ループの良い例: 赤バッジと白くアイコン (キュー) 示す 's ユーザーは、新しい要求が人 (についての情報を表示するアイコン (ルーチン) をクリックします。
報酬)。
しばらくして、赤いバッジを見るとき、ユーザーが自動的にアイコンをクリックします。
署名のお母さんエントよくやった場合、microinteractions は、顧客の忠誠心を高める署名の瞬間をすることができます。
筆跡ure の瞬間は、ブランドの一部になるに上昇されて microinteractions です。
Faceb について考えるook ボタンのように。
Facebook のインターフェースの自然の一部となります。
Facebook が突然これを削除する場合機能、ユーザーもそれに気づくし、アプリが壊れていると思うが。
機会パーツを識別します。
microinteractions の美しさのさまざまな場所、周りに挿入できる場合に、します。
潜在的なアクション。
Microinteractions に適しています: Microinteractions を直接することができます変更を強調表示ユーザー注意。
多くの場合、重要な det にユーザーの注意を引き付けるためアニメーションの使用します。
(すなわち通知) を悩ませます。
画像クレジット: Dribbble 最小化するユーザー努力オートコンプリートは素晴らしいmicrointeraction の例です。
型付けにコストの高い相互作用は、します。
エラーが発生しやすく時間のかかるフル キーボード (とさらに多くのタッチ スクリーン) とも。
オートコンプリートでユーザーは、プロブide は、正しい答えより速く、ミスなし。
それぞれの文字は、システムを入力して、無線ll を見つけるしようとしている言葉としての最高の推測を作る。
画像クレジット: fancy.surge.sh Providing フィードバック達成されているかを表示する Microinteractions は、米国の行動を強化することが小胞体は、実行します。
原則に従って「表示は、言ってはいけない」アニメーションのフィードバックを使用することができます達成されているかが表示されます。
ストライプの例では、ユーザーがクリックしたとき「支払う」、シュピンネr は、成功状態が表示されます前に一時的に表示されます。
チェック マークのアニメーションは、ユーザーの t のような感じちょっと簡単に支払いをしたとユーザーにこのような重要な詳細情報感謝です。
ステータス情報を提供します。
n 最初ヤコブニールセンの状態によってユーザビリティ発見的原理: システム必要があります常に使用rs は何が起こっているを知らせます。
Microinteractions のすばらしい例であるチャットの入力インジケーターステータス情報を提供します。
私を構成している間あなたの友人の画面上表示します。
チャット内全員へ。
画像クレジット: Dribbble の最も重要なユーザー データを検証してしばしば oveフォーム デザインのけげん側面部分はエラー処理です。
それは、ミスをする人間性です。
おそらく、フォームがヒューマン エラーに免除ではないです。
プロセスを通過するときにユーザーが嫌いな提出、彼らがエラーをしたことで調べるためだけのフォームに記入。
これは、validation microinteraction は、わかりやすい形での役割を果たしています。
リアルタイムのインライン検証 immediately 提供されるデータの正確性についてユーザーに通知します。
このアプローチにより、ユーザーが解決するt を送信をクリックするまで待つことがなく速くするエラー e を参照してくださいボタンをクリックします。
エラー。
右完了したら、それは、明確なものにあいまいな相互作用を変えることができます。
クレジット: Dribbble Conclusion デザインは細部に宿るです。
これらのすべてが点灯して細かい部分にまで細心の注意に値するtle の瞬間に感じる、彼らは美しいホリスティック製品を形成するために一緒に来る。
「違う製品間体験私たちを愛し、私たちがある w microinteractions が多いこれらの私たちは単に容認ith それら"-ユーザーの利便性を気にする Dan Saffer 場合、あなたは microinteractions 気する必要があります。
.あなたの製品は人々 が持つ最低の microinteraction と同じくらい良いだけです。
写真素材の最後の日: 大規模な割引 67% オフ!ソース p img {表示: インライン-ブロック; 余白-右: 10 px;} .alignleft {float: 左;} p.showcase {オフ: 両方;} 体 #browserfriendly p、ボディ #podcast p、div #emailbody p {余白: 0;}
0d660d51377667.58ebe6e5636d7

イラストと絵画: 私の巨大な水彩画のエデン

From Illustration & Painting: My Giant Watercolor Eden

イラスト ・絵画: 私巨大水彩エデン AoiroStudio 2017 年 4 月 27 日私は常にイラストや、絵画ゲームに費やす時間の量について魅了してきたng、多分それは十分な患者ではないのでです。
その一方で、見事な見て見てみましょうマリア ・ Tiurina と彼女の芸術の仕事します。
彼女はデジタル アート、キャラクター デザイン同様に彼女の作品を集中します。
、彼女の最も詳細な水彩画の絵画を見ている、目から作成に数ヶ月かかった最終的な結果を e 光の鉛筆。
間違いなく、タイムラプス ビデオの下を確認してください。
これロンドン、イギリスに拠点を置くイラストレーターであるマリア ・ Tiurina からの仕事です。
彼女の驚異的なスキーでllset、彼女の芸術のプロジェクト全体の変化を気づくことができる、それは非常に素晴らしい!クラフト h小胞体アートその最高級の Society6 上で彼女の店をチェックする必要があります。
エデンの一つに触発されました。
ボッシュの快楽の庭は、私の好きな絵画。
エデンは 75 cm × 25 cm と光の鉛筆スケッチから作成するフルカラー作品に数ヶ月を取った。
タイムラプス 絵画イラスト
6a426e46810303.586a1ab975d2e

ウェブ デザイン及び UI ・ UX: 新しい波ホテル & スパ

From Web Design & UI/UX: New Wave Hotel & Spa

Web デザイン ・ UI ・ UX: 新しい波ホテル & スパ AoiroStudio 2017 年 4 月 27 日このプロジェクトについて Web デザイン ・ UI ・ UX カミラの予型でホテルの彼女の作品を見てをみましょう・ スパという新しい波。
私は本当にこのプロジェクト全体を通して彼女のカラー パレットを愛し、それはブリンg リラクゼーションと快適なご滞在のテーマ。
ものの UI ・ UX サイトから方向を愛してください。
(デスクトップ) のサブメニューに治療について熱心に個人的にではなく、あまりにも多くの ne があります。
通りの空間。
全体的にみて、それは素晴らしい見ていると彼女の写真の方向はちょうど一流! ベーハー経由nce、カトヴィツェ、P のデジタル製品デザイナーであるカミラ予型の作業を示していますエーランド島。
スキーの彼女の広い範囲の一部である UI ・ UX、ブランディング、web デザイン、グラフィック デザインの混合物lls。
間違いなく、彼女の Dribbble を確認してください。
ブランディングと敏感のウェブサイトのために設計、新しい波ホテル ヴィスワ、ポーランドに拠点を置きます。
用に作成されたロゴの高いモダンなリゾートは知っているそのスパ施設。
ホテル キャプチャ mo の景色をガラス屋根プールでリラックスuntains。
プロジェクト全体の最小限のフォームでこのユニークな場所の本質をキャプチャするためにみなされています。
ホテルは、スタイリッシュな客室、簡単で楽な web アクセスのために必要な提供しています。
ウェブサイトは責任ve とモバイル デバイスに簡単にアクセスできます。
名刺、チラシ、パンフレット、m に含まれるブランドenu、キーカード、写真撮影、Facebook や他のソーシャル メディアのカバーと広告、ge の企業のアイデンティティネラール。
ウェブサイトはミニマルなきれいな、不動産のような現代です。
webUI ・ UX の相互作用を設計します。
better-ux-ui-tools-01

役に立つヒントと UX/UI 設計ツール

From Useful Tips and Tools for Better UX/UI Design

ほとんど良いの web サイト構築ツールが excel を作成するデザイナーを有効にするのに必要な機能を持っています。
貸された UI や UXまだ、これらの用語は、プロモーションに記載されてめった。
UI と UX のドン ’ tちょうどしかし起こる。
どのような偉大な UI や UX の知識から成っている、およびいずれか、wi を達成する方法ll より多くの熟練のデザイナー/開発者を作る。
簡単に言うと、UI はウェブサイト ’ s 視覚的散文ntation、し、そのルック アンド フィールを定義します。
今日の ’ s テーマやツール、コーディングはほとんど必要UI デザインはデジタル作業に良い UI を作成するエド。
ウェブサイト ’ 一方 s UX、ウェブサイトは何です。
満足の UX を作成するデジタル作業ではありません。
使いやすさにフォーカスがあります。
市場のパフォーマンス。
ユーザーは、標準の Ui があるにもかかわらず usabil ウェブサイトを放棄する傾向があります。
ity は満足です。
UX は、パーへない場合他の見てにがちであるも場合でも webサイト ’ s のプレゼンテーションは素晴らしいです。
InVision 違いベット、デジタル オーバー ロードの世界に市場を支配だと思うし、ユーザー エクスペリエンスに来る has-been になっています。
最もデザイン forw世界の ard 企業はすべてデジタルで最高の顧客体験を作成する有り様を利用します。
タッチ ポイント。
プロトタイピング ツールより有り様は現代のデジタル製品のための完全なプラットフォームt デザイン チーム。
シームレスなそのためフリーハンドで検査ライブ デジタル ホワイト ボードのような機能fs レッドライン仕様とすべて意味のデザイナーおよび開発者がワークフローについて思考を停止できに焦点を当てる彼らの完全な創造性を解き放ちます。
自動同期、ライブコラボレーション機能を助けるテams 設計し、利害関係者との実際の顧客から高速フィードバックを収集します。
あなた ’ 常に働い再右のファイルとあなたの g ’ ユーザーのための右の製品で常に作業をして。
有り様、nd InVision エンタープライズ ヘルプ主要な製品デザイン会社作成世界を経験します。
サインアップ無料試用のため、なぜ IBM Airbnb からブランドに頼る有り様を発見します。
Proto.io Proto.io です。
すべて、あなたのプロトタイプのニーズに単一のプラットフォームを使用する場合は理想的な選択: デザイン、pr実際のデバイス、共有、共同編集、ユーザー テスト、フィードバックを得て、瞬。
それ ’s は基本的にスケッチと Photoshop からのインポートが 1 つの重要な機能が満載インタラクティブなプロトタイプにあなたのデザインを変換することができます。
それ ’ s デザインはありませんので、使いやすいコーディングのスキルが必要、またはドラッグとドロップ機能では、あなたの d を変換することができます時間がないのクリック可能な非常にインタラクティブなプロトタイプに esigns。
それ ’ s 印象的な豊富な Interactive UI ライブラリ (iOS、材料設計)、スライドのメニューなどの一般的なデザイン パターンにドラッグ refresh と多くよりなる設計プロセスに簡単に高速です。
あなたが見ることができますどのように Proto.io をフルが機能の無料の 15 日間が試用版にサインアップしてあなたの目標を達成できます。
Ske をスケッチします。
tch では、さまざまなデザインなど、グラフィック、ウェブサイト、およびインターフェイスをサポートしています。
これアプリ ’ s のビデオ チュートリアルを作ることについては、迅速かつ簡単に使用します。
ベクトル ベースのワークフローにすることができます。
手間や迷惑な調整の多くを我慢することがなく驚くほど複雑な形状を作成します。
g. を作成するすべては編集することができます、さまざまなレイアウトおよび様々 なスタイルに適応。
Sケッチは、現代のデザイナーのモダンなツールです。
Notism Notism は、リアルタイム設計 & ビデオのコラボ演説のプラットフォームです。
それは、websi のインタラクティブなプロトタイプに静的な画面デザインを変換します。
tes または iOS や Android モバイル デバイス。
これらのプロトタイプを他の同僚と共有できます。
利害関係者、その他のプロジェクトと共に関連情報およびコンテンツ。
情報共有・ ディ ・をすることができます。
くバージョン管理対象の行、およびすべてがビデオの時間で。
この UI ・ UX ツール ’ sタスク管理機能により、プロジェクトの構成し、レベルを終了する、スタートからそのままh. プロジェクトのリアルタイムの概要を提供するタスクとチーム メンバーの活動の進捗状況を追跡します。
状態です。
偉大な単純な場合を ’ いくつかの最もよく、最も明るい UI とワイヤ フレーム k 探して再そのコア要素またはあなた ’ ll を見つけるどこ見て偉大な Simple.Their の製品よりもさらに最も厳格なデザイナーを満たすためにバインドされている細部にまで注意を払って構築。
自分の bestselling キット、iOS デザイン キットと材料設計キット、すべてのデザイナーに属して ’ s ツールボックス。
tちょっとまた iOS 用 GUI キットと Android を提供します。
これらのキットは、愛されて以上 70.000 ハッピー デザインers。
あるスケッチではなく、Adobe Photoshop での作業を好むかどうか ’ s 問題はないです。
すべて Gr食べるシンプルな製品が互換性のあるスケッチ。
それらをチェック アウト! 優れたユーザー インター フェース U を作るためのヒント表面増強ラマン散乱がだけいくつかのそうであったより、デジタル ・ ディスプレイの不良を我慢するあまり喜んで短い数年前。
企業はそのため、用心せよの品質に細心の注意を払う必要があります。
彼らは彼らの顧客の作成経験。
それ ’、しかし、それ頼む質問・ #8 場合罰金211;何 ’ s 品質のユーザー インターフェイスを作成するのに関与するか? シンプルなまま優れたユーザー信号伝送線ce はほとんど見えません。
それは ’ t を作るユーザーは考える必要も読み込まれている余分な気晴らしとして主に機能するデザイン要素です。
ドン ’ t を賢くましょう。
Eas としてそれを作るy を操作することが可能。
目的をすべて明確にする、ユーザー インターフェイスがユーザーに役立つs は、システムと対話します。
あなたのデザインスキルを披露する微妙なしかし効果的な方法は設計するにはまさにそれを行うことができます UI簡単に、かつ直感的に。
ユーザーをすばやくすることのタイヤします。
次に何かを理解しようとしながら一時停止します。
よく勝ったと ’ に行くことを躊躇しません。
make、相互作用効率を設計するとき、UI のメインを完了できるように方法を探してください。
タスクは、効率的に可能です。
それ ’ s も重要な彼らがドン ’ t の結果を失う彼らの努力、またはどこにいて、どのような彼らのトラックを失う ’ やってること。
オプションは、罰金ですが、英そこは、最低でもそれらを維持またはそれらを隠すその aren ’ t の日常的な使用のために不可欠。
遵.デザイン ユーザーの nt は迅速に理由の一貫性を維持することである使用法のパターンを開発します。
全体のユーザーを経験は重要です。
コンフォート ゾーン whe に解決を許可するときn あなたの UI の操作、彼らが知っている物事を検索する場所と何を彼らはそれらを見つけるときを期待します。
一貫性は、強力な UI 属性です。
ユーザーがそれに依存するが可能です。
おなじみの指名打者を使用します。
gn パターン我々 は精通するいると簡単に把握することを見てお楽しみください。
いくつかのデザイナーが原石に見えるr を設計するすべての創造的な芸術的な能力を強調表示します。
これを行うには、彼らができる ea軽く衝撃ユーザーの快適ゾーンから。
思い出に残るアプリは ex のんきな UI を提供します。
perience と揺れものではないです。
UX の設計は、シンプルで直感的な UI に UI を再生する方法を理解します。
必ずしもシンプルで直感的な作業。
課題関与して、それらの 1 つがある g にされています。
ユーザーの観点から ather 使用情報です。
これは UX デザインの領域に移動を伴い、ユーザーのフロー、および主要なブランド ・製品情報の理解を得ています。
実装、Visu1 つの成功の UI デザインの必需品アル階層は wh で視覚的な階層を実装するにはich の最も重要なデザイン要素がほとんどの注意を受け取る。
一方、それが主張するすべて不可欠な要素は重要ないくつかの詳細は、常に他のものより重要であります。
動作設定ボタンを呼び出すたとえば、通常大規模なカラフルです。
結論、ツール紹介がある、capabilities は優れた UI と UX の属性を備えた web サイトを作成する必要。
は何を理解すること追加達成するためにこれらの目標も重要です。
このような理解では、これらを使用することができます。
ツールを効率的に、効果的より熟練した web デザイナーになります。
ことも、ボイド;、ハードな方法を学ぶその不良 UI または不良 UX は失敗のレシピです。
、ポスト役に立つヒントと UX/UI 設計ツール登場おいたデザイン マガジンの最初にあります。
違います関連する記事。

海外の最新Webデザイン事情を紹介するデザインメディア