[iOS の UIPicker を比較する]
新しい iOS 7 の UI が識別しにくいと思っていたら、Sean Woodhouse がデベロッパの立場から同じことを指摘している。
iOS 6 と iOS 7 の UIPicker の違いを比較したものだ。
Itty Bitty Labs: “Lifting the lid on the iOS 7 UIPicker” by Sean Woodhouse: 30 September 2013
* * *
やっと iOS 7 ピッカーがよくなった?
iOS 7 の見かけが大きく変わった原因のひとつは UIPicker(およびその関連で UIDatePicker も)がフラットになったことだ。新しいピッカーは表面上はよりクリーンになったように見える。自分は iOS 6 のピッカーのビジュアル偏重と疑似3次元回転効果が好きではなかった。グラデーションのかかったオーバーレイは、ほとんどのエンジニアやデザイナー連中のカンに障る。「こいつはゴマカシだ」と自分は思った。だから新しい iOS 7 ピッカーが登場したのを見て、「クールじゃないか、やっときちんと整理して、3次元効果もちゃんと使ったな」と思っている自分がいた。しかしそれも実際に使ってみるまでの話だった・・・
One of the significant visual changes in iOS 7 is the ‘flattening’ of the UIPicker, and by association the UIDatePicker. On the surface, the new picker looks much cleaner. I’ve never been a fan of the heavy-handed visual treatment given to the iOS 6 picker, and the pseudo 3D rotational effect using gradient overlays probably grated on most anal engineering and designer types. ‘They’re faking it!’, I thought. So when the new iOS 7 picker arrived on the scene there was a piece of me that thought, ‘cool, they’ve cleaned it up and done the 3D effect properly’. That was until I got to use the thing.
* * *
前より分かりにくくなった
新しいピッカーは見た目もなかなかいいと最初は思った。しかし使ってみると、そうも思えなくなった。例えば UIDatePicker ではカラーパレットがブラックとホワイトに簡略化されている。そのため月と日付の区別がむずかしくなった。‘Today’ を強調していたカラーもなくなった。しかも選択項目の上下に各2行が詰め込まれ、情報密度が大きくなった。それなのに各行のヒット範囲は狭くなっている。さらに悪いことに、UIDatePicker のヒット範囲には一貫性がない。数週間前に Marc Edwards はこれらの問題についてツィッターでこう指摘している。
I found the new picker quite visually pleasing initially but having used it, I’m not so sure. For example, the UIDatePicker has simplified the colour palette to black and grey, which makes it harder to distinguish the day from the month. The colour highlight on ‘Today’ has been lost too. They’ve also squeezed in an extra two rows above and below the selection, which from an information density perspective is great, but it has reduced the hit areas of each row. Worse than that, the hit areas on the UIDatePicker are inconsistent. Marc Edwards summarised some of these issues a few weeks ago in this tweet.
* * *
iOS 6 の方がよかった
Marc Edwards @marcedwards
みんなが何といおいうと、ビジュアルスタイルという意味で iOS 6 のピッカーの方がはるかに使いやすい。
Marc Edwards @marcedwards
Say what you will about the visual styling, but iOS 6’s picker was far easier to use.
* * *
一貫性がない
Marc が掲げた図表から分かるように、AM/PM の列はもう上下には動かせない。選択するときコンテンツそのものにタッチしなければならなくなるので、これはとても辛い。iOS 6 では AM/PM を変えるため、上下に動かすことができた。しかし AM/PM や分の表示をタップして選択することはできなくなったが、これには一貫性がない。なぜなら日付や時間の方はタップできるからだ! どういうこっちゃ。
As you can see from Marc’s diagram, you can no longer drag above and below the AM/PM column to move it. This is a huge pain because now you have to place your finger over the content in order to make your selection. In iOS 6 I’d often push or pull underneath the selected AM/PM value to change it. You’re also not able to tap the AM/PM or minute items to select them, which is completely inconsistent because you can tap the day and hour items! WAT
* * *
エッジ部分からのスワイプ
さらにもっというと、iOS 7 UIDatePicker のヒット範囲はコントロールの境界部分までは広がっていない。実際のヒット範囲はブルーで図示しておいた。このためピッカーのエッジ部分からのスワイプはできなくなる[?]。
To add insult to injury, the hit area in the iOS 7 UIDatePicker does not extend to the boundaries of the control. The actual hit area is highlighted in blue below. So now you can’t fat-finger the edges of the picker either.
* * *
「スクロールビュー内のスクロールビュー」
ピッカーが UITableView のインラインに入ってしまうと、インセットタップはもっと大きな問題になる。グラフィカルユーザーインターフェイスの登場以来デベロッパを悩ましてきた例の「スクロールビュー内のスクロールビュー」という難問だ。コントロール内のタップ範囲を外すと、UITableView 全体が予想外のスクロールをしまうので、事態はいっそう悪くなる。
The inset tap area causes real problems when the picker is placed inline within a UITableView. It’s the same old ‘scroll views within scroll views’ conundrum developers have been struggling with since the dawn of graphical user interfaces, but made worse because you can easily miss the tap area within the control’s bounds and end up inadvertently scrolling the whole UITableView.
* * *
もっとタップしやすく
誤解しないで欲しいのだが、インラインピッカーが進むべき方向だと自分も考える。それが今やっているアクションに意味を持たせ、iPhone と iPad の双方で一貫性を持たせるようにするからだ。自分が希望しているのは、タップのターゲットがより容易で、コントロール領域の外まで広がって欲しいということだけだ。
Don’t get me wrong, I think inline pickers are the way to go. It puts them in context with what you’re doing and avoids the issues of placement consistency across the iPhone and iPad. I just wish the tap targets were easier to hit and extended out to the bounds of the control.
* * *
一歩前進二歩後退
使いやすさという点から見ると、新しい UIPicker は一歩前進二歩後退だ。しかし興味深いのは表面のカバーを外して中を覗いてみたときだ。
From a usability point of view, the new UIPicker has taken one step forward and a few steps back. But the fun really starts when you take a look under the covers.
* * *
iOS 6 の UIDateTime ピッカー
これは iOS 6 の UIDateTime ピッカービューの階層構造を Reveal で示したもの。
Here’s the iOS 6 UIDateTime picker view hierarchy displayed in Reveal.
* * *
iOS 7 の UIDateTime ピッカー
そしてこちらは iOS 7 の UIDateTime ピッカーだ。
…and here’s the iOS 7 UIDateTime picker.
* * *
肥大化する階層構造
見れば分かるように、新しい実装には手がかかっている。なぜローエンドデバイスではパフォーマンスが落ちるのかこれでハッキリ分かる。セルの3次元変換としてはスゴいが、拡大 tumbler 効果[?]としてはやり過ぎだ。UITableViews はそれぞれのセルがユニークな3次元変換をする 12 以上の UITableViews を含んでいる。iOS 7 の UITableViewCell には UITableViewCellContentView を含む UITableViewCellScrollView が導入され、そのいずれも UIDatePicker には使われないため、階層構造はさらに肥大化する。
As you can see, they’ve gone to town with the new implementation. It’s pretty obvious why performance would suck on lower-end devices. Impressive as the 3D transforms on the cells are, it’s hard not to feel like this is overkill for the magnified tumbler effect. The UIDatePicker contains no less than 12 UITableViews with each cell having it’s own unique 3D transform. The hierarchy is further bloated by the fact that UITableViewCell in iOS 7 introduces a UITableViewCellScrollView that contains the UITableViewCellContentView, neither of which appear to be utilised in the UIDatePicker.
* * *
最適化は不十分
意図的に UIPicker の実装をこのようにしたのかどうか分からないが、最適化されていないことは明らかだ。アップルとしては iOS 7 の最新バージョンでパフォーマンスをさらに高めようとしたのかもしれないが、ナビゲーションバーのブラー効果(低パフォーマンスデバイスでは効果が減る)とは違って、UIPicker の実装はこの種の予備システムをサポートしていない。
Whether the UIPicker was implemented this way on purpose or not, I don’t know, but it’s certainly not optimised. Maybe Apple really did want the latest version of iOS to push the performance boundaries, but unlike the navigation bar blur effects which were ramped down on poorer performing devices, the implementation of the UIPicker doesn’t support this kind of fallback.
* * *
3次元回転効果は果たして意味があるのか
以上が iOS 7 の UIPicker だ。パフォーマンスおよび使いやすさという点で3次元回転効果が本当に意味があるのかどうか自分にはよく分からない。圧倒的にフラットな UI で果たして意味があるのかということすら自分には分からない。この点が今後すぐに変わるとは思えない。しかしアップルが今後のリリースで以上に述べた幾つかの問題点について多少の修正ないし最適化を加えても驚かない。後続記事でまた・・・
So that’s the new iOS 7 UIPicker. I was left wondering whether the 3D rotation effect was really worth it, both in terms of performance and usability. I’m not even sure the effect has a place in a predominantly flat UI. I can’t see it changing any time soon but I wouldn’t be surprised to see a few fixes and optimisations from Apple in subsequent releases to address some of the issues mentioned above. Watch this space.
カバーの下がどうなっているか興味のある方は、 こちらで Reveal を回転させてみてください。
If you want to have a peek under the covers yourself, get on over to http://revealapp.com and give Reveal a spin.
* * *
冒頭の図を見れば、iOS 7 が見にくいことは一目瞭然だ・・・そう思ったのが訳出するきっかけだった。
しかしプログラミングのシロウトには内容がむずかしすぎて、訳していてもまるで雲を掴むような感じ。
iOS 7 の UI にはプロの目から見ても問題あり・・・しかし一旦乗り出した方向はそう簡単には変えられないといっているようにも思えるのだが・・・
★ →[原文を見る:Original Text]
Read Full Post »