iOS 15 がリリースされたので、早速手持ちの iPhone をアップデートしてみました。新しもの好きなので、iPhone は躊躇なくアップデートする派です。
デザイナーとしては、iOS 15 でのUIの動作の変化が気になるところ。今回のSafariのUIは、とくにデザインの設計に関わるレベルでも変化が大きいので、はやめに試してよかったと思います。
簡単に感じたことをまとめてみます。 今回は、SafariのコンテンツになるUI要素の変化をまとめています。SafariのタブバーのUIの位置による操作の大改革はあえて、あまりふれてません。
フォーム要素のスタイル
iOS 15のUIの変更はSafariのUI自体だけでなく、ブラウザデフォルトのフォーム要素もUIが新たになっています。
フォームのUIの見た目としては、iOS 15でスッキリとしたフラットデザインになりました。 フォーム要素の見た目については、たいがいデフォルトスタイルを消してスタイルを上書きになることのほうが多いとは思いますが、ボタンがフラットになっているのはなかなか驚きでした。
逆に、iOS 15 と MacOS の Safari のブラウザデフォルトのフォーム要素に差異がでたように感じました。 現状の MacOS の Safariでは、フォーム要素はフラットではなく少し立体感も取り入れたスタイルです。このあたりも現場の開発では基本的にデフォルトスタイルを消してスタイルをする、というころになるとは思いますが。
全体的に iOS と MacOS で機能や挙動をあわせてきている印象があるのですが、Apple としてフォームのUI要素をあわせられないのかなと疑問に思うところがあります。
フォーム要素の挙動
スタイル以上に挙動のほうが、iOS 15で気になる変化が多いかもしれません。
選択するフォーム要素からのピッカーの位置がかわりました。 iOS 14 までは、プルダウンがキーボードと同じ位置のドラムロールで表示されていましたが、ポップアップするコンテキストメニューのようなUIになっています。これまでのドラムロールなピッカーは、キーボードと同じ位置とサイズだったので、画面を占領する位置がわかりやすかったのですが、ポップアップから選択する挙動をするので UIデザインでは意識しておいたほうがよさそうに思います。
フォーム入力で画面サイズやキーボードにあわせた位置調整をしている場合には、影響が出てくるかもしれません、
あとちゃんとまだ検証できていないですが、ブラウザのデフォルトでビデオが音付きで自動再生されるようになっているようです。
自動再生はされない仕様じゃなかったっけ、時代の変化は早いなという気持ちにもなってきます。
時刻入力、再び
時刻入力のUIについては、前 OS のiOS 14 で数値入力になっていたことについて書きました。
時刻入力のUIは、数値入力がやはり不評だったのか、iOS 15 で時刻のドラムロールを回すピッカーに戻りました。実はiOS 14 でも時刻の小さいスペースでドラムロールを回せたりもできたのですが、あれはタッチするスペースが小さすぎ＆気づかれなかったようです。
iOS 15 でも数値入力は完全に消えたわけではなく、ピッカーを再度タップすると数字のキーボードが出現して数字入力ができます。これも気づかれにくいような気がしますが。。
主とする時刻入力がピッカーになっただけでも改善と思う方は多そうに思います。
雑感
Safari自体のUIの変化が大きいので付随する？ブラウザとしての挙動の変化も大きいかもしれませんが、まだまだすべての変化を追えてはいません。 iOS のアップデートによる思わぬ挙動の変化で対応が必要になる、というのも、恒例のあるある行事ではありますが、ちゃんと変化の内容はキャッチアップしておきたいものです。
今回触れていない Safari の下部タブバーの変更について、私自身はスマホを持つ時の指の位置・可動領域にあわせて最適化した変更だと思いました。タブ移動やブラウザを操作する要素へのアクセスはしやすいように感じました。タブ一覧のカードホルダーからカードを選ぶようなタブ移動の操作が結構好みであったので、タブ一覧の変更は多少残念に思いましたが、概ね良いと思っているほうです。
ただし、スマホの持ちかたや操作しかたによっては慣れが必要にはなるUIだと思います。今回タブバーの位置を選べるようにしたのは必要なことであったと思います。
あと、iOS 15 の発表当初にあった、フローティングするタブバーが変わったのは本当によかったと思います。
あのまま採用されていれば、ブラウザとしての挙動にプラスしてコンテンツの動作に関わるところまで変化に大規模に対応する必要が発生していたのではとなかなか震えます。