〜ほぼ Daily UI vol.31〜 File Upload
Design a file upload element. Is it the loading screen and icon? A progress element? Are folders being uploaded by flying across the screen like Ghostbusters? ;)
参考にしたサイト・アプリ
Gmail
ファイルと画像でそれぞれ分かれてるな。どっちも画像でもユーザのメンタルモデル的には別物だからだろうか。
TinyPng
シンプルなDropzoneとそれぞれのファイルのステータスが分かりやすい
ファイルサイズと受け入れる拡張子表示するの大事。
確かに考慮する状態いろいろあるよな。
デザインを考える上でのポイント
状態ごとのデザイン
特にDropzoneを使う場合だが、 default, hover, loading, error, success とそこそこ考えるべき状態が多い。ファイル系はアップロードも絡むと時間がかかることも多いので手を抜けないところだと思う。
自分のデザイン
めっちゃシンプルに作った。
思ったこと
こういう状態多いの実装考えるの楽しいんだよね。