Daily UI challenge #010 Social Share

Daily UI 10個目の課題は、Social Share。
ソーシャルシェアのボタンやアイコンを大きさ、見た目、場所やシェアする目的などに注意してデザインしてくださいとのこと。

私がiPhoneユーザーなので、特に表記がない場合は、iPhoneでアプリやサイトを確認しています。

まずはUIトレース

アプリのシェアボタンを作ることを想定して「Social Shareといえば」で思いついたTwitter。そしてTwitterとは趣旨、見た目の異なるShazamをトレースしました。
他にもいくつかアプリのShareボタンを見てみたのですが、アプリの場合、シェアボタンを押すと独自のUIではなく、iPhoneのシェア機能が出てくるものが多かったです。アプリの場合はユーザー自身でシェアするツールを選るので、その方が使い勝手が良いのかもしれません。

普段使っているNight Modeをトレースしました。
TwitterアプリはTweetにあるShareのアイコンを押すと、Share関連のメニューが出てきます。「Share Tweet via...」を押すとiPhoneのシェアのメニューが表示されます。
Shareアイコンは15px * 15pxくらいの大きさなので、スペースの都合上仕方ないのかもしれませんが、少し小さく感じました。でも、隣のアイコンとは距離があるので、間違えて押してしまうということはないと思います。

Shazamは画面右上の矢印アイコンをクリックすると曲をシェアする画面が出てきます。

ワイヤーフレームを作成

過去のDaily UIの課題で作っていた「おいしいソフトクリームを食べられるお店を探せるアプリ」(空想)で、そのアプリに掲載されているお店をシェアする時を想定して作りました。
お店の名前の左側にLikeボタンとShareボタンを配置しました。

Social Share ボタンをデザインする

今回のコンセプトは、
「思わずシェアしたくなる、押して楽しいシェアボタン」としました。
ボタンは、
・押しやすさ
・適度な大きさ
・わかりやすさ
・適度にアニメーションする
を考慮してデザインしました。

どんなお店なのかが掲載されているページをシェアすることを想定していたので、お店の名前の横にシェアボタンを置きました。
メガホンのアイコンをクリックすると、メガホンが動いて色が変わ、お店の情報の上に、シェアの方法を選択する画面が表示されます。

メガホンが動く様子はyoutubeに動画をアップしました。

Daily UI challenge #010 Social Share

ワイヤーフレーム、デザインそれぞれの画像や、メガホンが動く様子の動画はBehanceにまとめて投稿しています。ぜひBehanceページもぜひご覧ください！

Daily UI challenge #010 Social Share on Behance
https://www.behance.net/gallery/73565015/Daily-UI-challenge-010-Social-Share

アプリ、お店の名前、住所、個人名などは全て空想です。今の所、実際には存在していません。