食えるアプリにするための細かい工夫
こんにちは。
脱サラして個人アプリだけで生活している、あたか、です。
iOS開発歴10年で、iPhone3GSぐらいからやっています。
さてさて、
3年ぶりに、iOSの新アプリ
「しつこいTODO」
をリリースしました 🎉
👉👉 ダウンロードはコチラ 👈👈
このアプリは
👺 < カテゴリー機能とかは、１つのカテゴリーに全部入れるから要らない！
👺 < それより、TODOを忘れないように何回も通知して欲しい！！
という要望を叶える
「シンプルなのに、TODOを絶対忘れない！」
アプリに仕上げました。
超シンプルな1リスト
しつこい「面白い」通知
このアプリが売れるようにした工夫はnoteで記事にして、沢山の方が読んでくれましたが
https://note.com/toconakis_tech/n/nda6cae85e410
細かい工夫に注目してくれる方が多かったので、この記事では
「新アプリを良くするためにした細かい工夫」
8項目を共有します！
参考になったら
応援のダウンロード と ⭐5投稿
宜しくお願いします 🙇♂️🙇🙇♀️
① パディング+角丸で標準UIそのままっぽさを消す
TODO画面は、シンプルにUICollectionViewを1つだけ配置しています。
シンプルを重視したアプリだからといって、そのまま標準UIをつかうと、シンプルすぎて素人が作った初めてのアプリかな？ と思われかねません。
(試しにそのまま標準UIを置くとこんな感じ)
そこで、リストの四隅にパディングを入れて、さらに四隅を角丸にしています。
こうすると簡単に垢抜けた雰囲気にできます。
さらに角のRを行の高さの半分にすると、1行の時、いい感じの見た目になります。
また、背景の変更機能も入れているのですが、パディングのおかげでスキンの変更具合が全体に見えて、いい感じになっています。
実装方法は 「UIView 角丸」 で検索すれば沢山出てきますからね😉
② 背景色に合わせてstatusbarの文字色を変える
ツール系アプリを使いながら、今の時間を確認できるのはとても大事だと思っています。
特に、このアプリはタイマーがウリなので、今の時間を元に何分後にセットするか決める場面が多いはずです。
でも、背景を変更する機能を入れたら、背景の種類によって画面上のステータスバーの時間が見えづらくなったので、背景によってステータスバーの文字色を変えることにしました。
テーマに合わせた文字色、ボタン色なども個別に設定していたりもします。
③ 親指が届く位置によく使うボタンを置く
iOSの標準UIでは、完了ボタンは画面の右上です。
(Appleのリマインダーより)
最近はどんどん端末が巨大化していて、これだと片手で操作するのが厳しいので、キーボードの上に完了ボタンを追加しました。
ただし、標準UIは、学習の要らない一番効率の良い配置なので、あまりそこから逸脱するのは一見合理的に見えても、逆に使いづらくなる場合も多いので慎重に改善する必要があります。
例えば 「完了は右上」 と思い込んでいる人には手元にある完了ボタンが見えなかったり...
自分なりに改善した場合は、「何も説明しないで」 他の人に触ってもらって、迷わないかをチェックした方が良いと思います。
④ 画面遷移のボタンも親指が届く位置に置く
これも③の内容と近いのですが、iOSの標準UIでは、
- 戻る(キャンセル)は画面の左上
- 完了は画面の右上
です。
(Appleのリマインダーより)
僕の新アプリでは片手でサクサク操作して欲しいので、画面遷移系のボタンは下に集めるようにしています。
使っている人は、何でなのか具体的には気づかないかもしれませんが、指を伸ばさなくても片手で色々操作できる体感から、サクサクしたアプリだなぁ、と感じてくれるのではないかと思っています。
こちらも③同様、標準UIから逸脱する場合は、他の人に使ってもらって、迷わないかどうかの確認は必須だと思います。
⑥ TODOの背景色を半透明する
TODO行の白い背景色は、透明度95% にしてほんのり透かしています。
これは気分転換に背景テーマを変えた時に、テーマが変わった感をしっかり反映させるためです。
あまり差が分からない？
作り手としては背景を見て欲しいので、背景をもっと透明にしたくなりますが、そうするとTODOの文字の視認性が下がるので、ほんのりで我慢するのが大事です。
開発者はドロップシャドーなど、効果を強く掛けすぎる傾向がある気がするので要注意だと思います。
⑦ 設定画面の項目アイコンをカラーにして視認性を上げる
最近ふと、設定項目のアイコンが同じ色だと、１つ１つの項目に注意がいかなくなるなぁということに気がつきました。
それを意識しているのかは分かりませんが、最近のiOSの設定アイコンがカラフルなことにも気がつきました。
そこで、今回は設定の項目アイコンをカラーにしてみました。
比較として、アイコンを同じ色にした場合を並べておきます。
カラーだと、１つ１つの項目を頭がより区別して認識する気がしませんかね？
色々機能を追加して設定に入れても、ユーザーさんが気づいてくれない問題をよく感じているのですが、これで改善されたらいいなぁと思っています。
⑧ 編集箇所が分かりやすいようにする
編集中の行が分かりやすいように色を付けています。
比較として、入れない場合の画像も貼っておきます。
Appleのリマインダーを含め、似たようなTODOアプリでは、編集行に色を入れないアプリが多いです。
確かに、編集行を選ぶのはユーザーだし、編集位置にはカーソルが出ているので、色を入れなくても分かります。
ただ、人は脳のリソースを常に色々な事に配分して処理をしているので、どこが編集行か、というのをより分かりやすくすると脳の負荷が下がって、無意識で
「このアプリは何か快適だなぁ」
と感じる事を狙って、一手間かけて色を入れました。
主な所ではそんな感じです！
他にも色々、チマチマと工夫しているので是非、実際にアプリを触って確認してみてください！
もし、この記事が参考になりましたら
応援のダウンロード と ⭐5投稿
宜しくお願いします 🙇♂️🙇🙇♀️
👉👉 ダウンロードはコチラ 👈👈
Discussion