平日朝のテックシェア#3 マイクロインタラクション
#3 マイクロインタラクション
@Niishi Kubo >
水曜日は、デザインやUI/UXネタをシェアします👩🎨
初回は マイクロインタラクション です！
アニメーションのあるUIのことです。これにより直感的な操作と感じたり、フィードバックを提供することで、UXが向上すると言われています。
@Niishi Kubo >
例. Twitterのイイねボタン
https://cdn.dribbble.com/users/801336/screenshots/3505891/bot_o-de-like-do-twitter.gif
- ボタンクリック
- クリックアニメーション
- Ajaxでバックグラウンド処理
とすることで、ユーザーに処理待ち状態を感じさせず安心感も上がります。
@Niishi Kubo >
Ajax処理待ちを感じさせないという点でplaceholderも有効です。
例. Facebookのコンテンツロード時
https://cdn-images-1.medium.com/max/1600/1*o68SEk7QNtQOKDINSLqIA.png
フィードバック
@hnishim >
久保さんのシェアしてもらった記事いいですね。個人開発だとデザイン部分がどうしても専門でないので残念な感じになる、時間がかかるという課題抱えてます。個人的には本業でプロダクトマネジャーやっているのでUX的な考えはまあなんとかなるんですが、むしろUIの方が素人同然。例えばアイコン（アプリアイコン、中で使うデザインコンポーネント）用意するのが結構大変だなーと。
まずは簡単にできるものをと今週色々探して、まずは以下のあたりを活用しながらやっていこうと思っています。もし何かオススメあれば！
http://iconion.com/ja/
アプリの中の使う設定、カメラマークとか汎用的にありそうなものはこれで作ってみました。
https://nelog.jp/designevo
アプリアイコンとかもう少し独自性をもたせたいものはこれを使ってみました。
@Niishi Kubo >
フィードバックありがとうごさいます 😆
デザイン課題多いですよね。。。
紹介頂いたジェネレーター知らなかったです！シェアありがとうございます 👍
僕はアイコン FontAwesome を使うことが多いですhttps://fontawesome.com/icons?d=gallery
UIコンポーネントはVue.js使うので Vuetify ですhttps://vuetifyjs.com/ja/
@hnishim >
おおおー、Font awesomeってなんとなく聞いたことありましたが知りませんでした。この辺見ながら使ってみます。
https://blog.yukim.xyz/post/2015-09-07-fontawesome-swift/