iOS 13と「iOS 12」を比較したスクリーンショット
UI/UXの視点から見たiOS 13と「iOS 12の違いをツイートで解説
今秋にはiOS 13が正式にリリースされる。新機能や新しいデザインに触れるのが楽しみな一方で、過去1年間使ってきた「iOS 12」からどのように進化するのかは気になるところ。
AmazonのUXデザイナーであるRyan Burnett氏が、UI/UXの視点から見たiOS 13と「iOS 12」を比較したスクリーンショットを多数公開していたので、紹介する！
共有シートのUIが大幅刷新、下段が縦スクロールに
iOS 13では共有シートを表示する時に、画面下部にあった「キャンセル」ボタンを廃止し、代わりに右上に「☓」ボタンを追加。
また、2列目にあった「コピー」「ホーム画面に追加」などの項目は横スクロールではなく、縦スクロールするUIに変更。
アプリと連携する機能は上段でアプリアイコンが表示、iPhone内の機能は下段でリンク表示にしたUI、という変更が行われている。
The iOS 13 Safari share sheet adds a title, moves the bottom "Cancel" button to a top right X, changes the second row from horizontal tiles to a vertical list of text and icons using SF Symbols, and replaces "More …" with "Manage …" #iOS12to13 2/16 pic.twitter.com/h4I2BxbSPx
— Ryan Burnett (@ryanburnett) July 8, 2019
Safariのリーダー表示が変更、複数機能の内包
Safariの左上にあるリーダーボタンをタップするとリーダー表示に切り替わるのが「iOS 12」だった。
iOS 13からはリーダー表示への切り替えだけではなく、ツールバーの非表示、デスクトップ用サイトの表示、ウェブサイトの設定などの項目がアクセス可能になっている。
従来は右上にあった更新ボタンを長押しするとデスクトップ用サイトの表示に切り替えることが可能だったが、iOS 13ではコピーUIが出現するとのこと。
The iOS 13 Safari Reader icon is replaced with an "AA" icon with "Show Reader View", "Hide Toolbar", "Reqeust Desktop Website", and "Website Settings". Tapping and holding the refresh icon now provides the "Copy" UI #iOS12to13 3/16 pic.twitter.com/8o5iTRR1sT
— Ryan Burnett (@ryanburnett) July 8, 2019
SafariのブックマークUIが見やすく
「iOS 12」では青色ベースのUIだったブックマークページだが、iOS 13では黒ベースになり、上部にあるボタンが立体的に変更されている。
また、ブックマークページを表示したときのUIが、表示している画面に覆い被さるようなカード型のUIに変更されていることも確認できる。
The iOS 13 Safari Bookmarks show the increased contrast between the Bookmarks, Reading List, and History tabs using SF Symbols #iOS12to13 4/16 pic.twitter.com/q2bRUQwPzF
— Ryan Burnett (@ryanburnett) July 8, 2019
スクリーンショットのマークアップ機能が改良、ウェブページの全画面スクショにも対応
iOS 13では撮影したスクリーンショットをマークアップするための画面が新しくなり、ツールのUIもリアルになり、圧倒的に見やすくなった。
また、ウェブページのスクリーンショットを撮影する場合、画面内に表示されていた領域と同時にページ全体を撮影してくれる機能も追加された。
The iOS 13 markup screen's tools have color and more detail. There's a new option for full page screen shots (UX Designers around the world rejoice) #iOS12to13 5/16 pic.twitter.com/gLOvVLeLg5
— Ryan Burnett (@ryanburnett) July 8, 2019
音量UIが画面端に移動
音量を調整する際に表示されるUIが画面中央ではなく、画面左端に表示される仕組みに。
The iOS 13 volume bar appears on the top left of the screen instead of hijacking the entire screen #iOS12to13 6/16 pic.twitter.com/QmbzbSpc4U
— Ryan Burnett (@ryanburnett) July 8, 2019
位置情報の取得がより厳格に
アプリによる位置情報の取得がより厳格になった。
「iOS 12」では「許可する」「許可しない」の2択しかなかったが、iOS 13からは「アプリを使用中にのみ許可」「一度のみ許可」「許可しない」と細かく設定できるようになった。
— Ryan Burnett (@ryanburnett) July 8, 2019
「友達を探す」と「 iPhoneを探す」を統合したアプリを統合した「Find My」アプリの登場
「iOS 12」では「友達を探す」と「 iPhoneを探す」という異なる2つのアプリが存在していたが、iOS 13ではそれらを統合したアプリ「Find My」が登場する。
iOS 13 Find My app features Friends and Devices on the bottom tab bar and provides a more inviting onboarding experience #iOS12to13 8/16 pic.twitter.com/SRdkoNZ27q
— Ryan Burnett (@ryanburnett) July 8, 2019
「ショートカット」アプリのUIも一部変更
「iOS 12」で「ショートカット」アプリを起動すると表示される画面は「ライブラリ」だったが、iOS 13では「My Shortcuts」になっている。
また、「ショートカットを作成」ボタンも変わっている。
The iOS 13 Shortcuts changes "Library" to "My Shortcuts" and provides higher contrast between the "Create Shortcut" button with a light blue background. The + symbol is now enclosed in a blue circle using SF Symbols #iOS12to13 9/16 pic.twitter.com/pJKxUruYCL
— Ryan Burnett (@ryanburnett) July 8, 2019
「メッセージ」アプリは標準で検索バーを表示
iOS 13の「メッセージ」アプリは標準でメッセージ全体を検索できる入力欄が用意され、新規作成ボタンも「メッセージ」と書かれたボタンと同列に配置。ボタンそのものも青い円形のボタンに変更されている。
The iOS 13 Messages shows search by default, provides a "More" symbol, and the "New" symbol is now enclosed in a blue circle using SF Symbols #iOS12to13 10/16 pic.twitter.com/LRzxSrsGOD
— Ryan Burnett (@ryanburnett) July 8, 2019
「メッセージ」アプリでは新規メッセージ作成画面でカード型のUIを採用
iOS 13では新規メッセージを作成すると、表示している画面に覆い被さるようなカード型のUIに変更されていることも確認できる。
「マップ」アプリの「よく使う項目」が分類可能に
iOS 13の「マップ」アプリでは「よく使う項目」を分類できる機能が追加されている他、「コレクション」という機能が追加されている。
The iOS 13 Messages uses the new card design for a new message. This also looks like it cleverly hides the notch #iOS12to13 11/16 pic.twitter.com/rnAh2U9EO4
— Ryan Burnett (@ryanburnett) July 8, 2019
「マップ」の位置情報ページのUIが一部変更
The iOS 13 Maps hides the compass symbol, expands "Favorties" to include "Home", "Work", and "Add", followed by the new "Collections" which includes "My Places" and "New Collection…" #iOS12to13 12/16 pic.twitter.com/lV1052BJzH
— Ryan Burnett (@ryanburnett) July 8, 2019
「写真」アプリのヘッダを変更、グラデーションで境界線を演出
iOS 13では「写真」アプリが大幅に強化されるが、アプリのUIも一部変更。
画面上部にあった固定ヘッダは透過になり、グラデーションで境界線を演出。画面上部には表示している写真の日付、複数枚選択ボタン、写真のグリッド表示の拡大・縮小ボタンが配置され、画面下部には年・月・日・すべてで写真表示を切り替えることができるボタンが用意されている。
The iOS 13 Maps location features a bolder, larger header, replaces the standard five star symbols with a "⭐ 4.0" rating, replaces "Website" and "Favorite" with "Add to…", and changes subheaders from bold black to normal gray #iOS12to13 13/16 pic.twitter.com/qVTxw4YlJq
— Ryan Burnett (@ryanburnett) July 8, 2019
「写真」アプリの共有シートがカード型UIに
他の共有シートと同様に、「写真」アプリの共有シートも新しくなっている。
The iOS 13 Photos breaks the standard header convention by placing a gradient background over the header, now in white, next to "Select" & zoom (+/-) buttons over a grid of photos. There's a new secondary tab bar with "Years", "Months", "Days", and "All Photos" #iOS12to13 14/16 pic.twitter.com/WCsTslUb8q
— Ryan Burnett (@ryanburnett) July 8, 2019
The iOS Photos share sheet uses the new card design, adds an option link under the header, replaces "Cancel" with an X symbol, changes the second row from horizontal tiles to a vertical list of text and icons using SF Symbols, and replaces "More" with "Manage" #iOS12to13 15/16 pic.twitter.com/5z9pwtDlvK
— Ryan Burnett (@ryanburnett) July 8, 2019
