Posts Tagged ‘UI’


Apple Watch の UI を生かすとはどういうことか


How Your Favorite Apps Will Look On The Apple Watch | Fast Company

What might that look like? We spent some time exploring how companies could extend their existing apps for the Apple Watch, and what new types of applications could be available in the future. The Apple Watch is not like existing interfaces. Its potential lies in its limitations: It is accessible because it’s tiny and convenient because it’s only meant for seconds-long interactions. Features such as native voice control, haptic feedback, and a digital crown that can be used to magnify, scroll or zoom within apps crack open a whole new world of design requirements and opportunities (see more in sidebar). The smartest companies will do more than offer facsimiles of their existing apps; they’ll create custom experiences that exploit the watch’s unique interface.


Read Full Post »


[Case Study: The iPhone | image / Vimeo

アップルの iPhone は真にオリジナルか、それとも単なるコピーに過ぎないか — Kirby Ferguson の分析が興味深い。

Cult of Mac: “‘Everything Is A Remix’ Takes On The iPhone [Video]” by Buster Heine: 12 December 2013

     *     *     *

iPhone は真にオリジナルか

「すべてはリミックス」シリーズの映画制作者 Kirby Ferguson が、新しいケーススタディを人気シリーズに追加した。iPhone は真にオリジナルなアイデアか、それとも改良とコピーの寄せ集めに過ぎず他のものとなんら変わらないのかという問題に挑戦した。このケーススタディは、アップルの複数のインスピレーションを取り上げる前に、スティーブ・ジョブズの Multi-Touch を発明したのはアップルだという主張から始まる。じつは Multi-Touch 技術は多くの会社が長い時間をかけて開発したものだった。

Everything Thing Is A Remix Filmmaker Kirby Ferguson just released a new case study for his popular series that tackles whether the iPhone is a truly original idea, or just a hodgepodge of copying and improvements like pretty much everything else. The case study starts by contesting Steve Jobs’ claim that Apple invented Multi-Touch – when really the technology was being developed for years by many companies – before strolling through some of Apple’s other inspirations.

     *     *     *

デバイスとしての iPhone、UI としての iPhone

このビデオは、その後すべてのモバイル企業がコピーすることとなるデバイスをアップルが造り出したことについては正当な評価を与える。一方、iPhone や iOS を革命的なものにしたユーザーインターフェイスのデザインが現実世界の事象から多くのヒントを得ていることを素晴しい調査研究で示す。そして最後に iOS 7 を取り上げ、アップルが Windows フォンや Android からコピーした リミックスしたアイデアについて触れる。

The video does give Apple credit for creating a device that the entire mobile industry copied, while also providing a great survey of the real world objects Apple used as inspiration in Apple’s UI designs that helped make the iPhone and iOS so revolutionary. Ultimately the film turns to iOS 7 and the ideas Apple borrowed copied remixed from Windows Phone and Android.

     *     *     *


iPhone が果たして正当な扱いを受けているかどうか、このビデオを見てぜひ考えて欲しい。

◆Ferguson のビデオ → Everything is a Remix Case Study: The iPhone

Watch the video below and tell us in the comments whether you think the iPhone got a fair treatment:

     *     *     *

Ferguson のビデオはスバラしい出来だと思う。

オリジナルかコピーかという点だけでなく、iPhone UI の歴史を振り返る意味でも(なにしろたった5年間の変化なのだ)一見の価値がある。


リミックスの持つ創造的側面については、かつて Larry Lessig が TED で行なった名講演が思い出される。(今見ても非常にオモシロい・・・)

★ →[ビデオを見る:Vimeo

Read Full Post »


[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.

     *     *     *


以上が 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 »



iOS 7 の奥行き感をマルチプレーン・カメラから解説した Manton Reece の記事がオモシロい・・・

Manton Reece: “Multiplane” by Manton Reece: 17 June 2013

     *     *     *

Ub Iwerks の貢献

ウォルト・ディズニーの最初の短編『ミッキーマウス』を描いたアニメーター Ub Iwerks[アブ・アイワークス]は、10年留守したディズニースタジオに 1940 年に戻ってきた。彼がミッキーマウスのために毎日何百枚もの絵を描いたことは有名だ。しかしディズニースタジオへ Ub が復帰したことは、カメラと特殊効果を技術的に高めた映画製作への大きな貢献としても記憶されている。アニメの世界では仕事が極端に専門化し、背景かアニメーションかセル画描きのいずれかの仕事をすることになるが、Ub の才能は芸術的世界と技術的世界の橋渡しをしたのだ。

In 1940, Ub Iwerks, the animator behind Walt Disney’s first Mickey Mouse shorts, came back to the Disney studios after a 10-year absence. Ub had famously produced hundreds of drawings alone each day for one of those first Mickey Mouse shorts, but Ub’s return to Disney would also be remembered for his contribution to the technical side of film production, with advances in cameras and special effects. In an industry with extreme specialization — you either did backgrounds, or animation, or ink-and-paint — Ub’s talents bridged both the artistic and technical.

     *     *     *


ディズニーを去っていた間に Ub が発明したもののひとつがマルチプレーン・カメラ(multiplane camera)だ。後に『白雪姫』で使われた10フィートを超えるスタンドに据えられた巨大なカメラ[冒頭画像]として完成した。マルチプレーン・カメラの発明によって、背景を複数の層に分けることが可能になった。前景の木々はいちばん手前のガラス面に、登場人物はその下の面に、遠景のレイヤーには建物が、さらに遠くには山や空がくるというように。

One of Ub’s inventions while away from Disney was called the multiplane camera. Perfected by others leading up to Snow White, in a massive camera stand over 10 feet tall, the multiplane’s innovation was to allow a background to be split into levels. Foreground trees might be painted on the glass of the first level, then the characters sat underneath that, and then farther back layers for a building, with others behind that for hills and sky.

     *     *     *


奥行きの感じ(sense of depth)を出すため、カメラオペレーターはそれぞれの面の間の距離を調節することができた。またそれぞれの面の動きを異なったスピードにシンクロさせることによって、すばらしいパララックス効果[parallax effect:視差効果]を出すことができた。遠景はゆっくり動き、自然のままにぼんやりとボケて見えるのだ。

To provide a sense of depth, camera operators could vary the distance between each plane. And movement for each level could be synchronized at different speeds, giving it a beautiful parallax effect. Distant background levels moved more slowly and were naturally blurred and out of focus.

     *     *     *

iOS 7 で蘇ったマルチプレーン

Ub の発明から80年経って、マルチプレーンが iOS 7 で蘇った。これまでの iOS は単一の平面に構築されていた。その表面上にまるで地形図のように盛り上がってテクスチャーを持った部分として — ただし山ではなくボタンである点が異なるが。ところが iOS 7 では複数のフラットなレイヤーで構築される。それぞれの層は際立ってフラットだが、2つないし3つのレイヤーを離して重ねることで、アップルは全体的な奥行きの感じを出すことができたのだ。

80 years after Ub’s invention, the multiplane is alive in iOS 7. Previous versions of iOS were built on a single plane with raised and textured areas on that surface, like a topographical map except with buttons instead of mountains. iOS 7 is instead designed with multiple flat layers. Each level is strikingly flat, but by layering two or three, spaced apart, Apple has achieved an overall sense of depth.

     *     *     *


基本への復帰だ。シンプルなものはシンプルで、読みやすいものに。明瞭さが必要ななら、すべてはフラットになる。しかし微妙な動きと奥行きがあっても、コンテンツ第一の新しいフラットなデザインで動作するものは何も変わらない、そんなフレームワークなのだ。iOS 7 のコントロールセンターは下部のレイヤーをぼやけさせる。ホームスクリーンの背景画面は更に奥にあり、アプリのアイコンだけがスクリーンに触れているかのようだ。写真はナビゲーションバーの背後をスクロールしていく。

It’s a return to basics. Simple things can remain simple, readable. When clarity is needed, everything goes flat. But it’s a framework that allows for subtle motion and depth without changing what works about the new, content-first flat design. iOS 7’s control center blurs the layer below. The home screen background sits deeper too, as if only the app icons are touching the screen. Photos scroll under the navigation bar.

     *     *     *



Each plane is painted flat as if on glass. There can be no text drop shadows, no textures, without ruining the effect. And the result of this strict metaphor is equally valuable: there are no drop shadows to distract or obscure an app’s real content.

     *     *     *


ディズニーのマルチプレーン・カメラはまず最初は専用装置として作られ、後にはソフトウェアとして再度作成され、3D コンピュータアニメーションの時代になるまで何十年も存続した。iOS 7 のニュールックがそれほど続くかどうかは分からない。しかし核となるコンセプトはこれから何年もアップルを支えるはずだ。彼らの目指している方向が私はとても好きだ。

Disney’s multiplane camera, first in a dedicated rig and then recreated in software, lasted for decades, until the era of 3D computer animation. iOS 7’s new look won’t last that long, but the core concepts should carry Apple for years. I really like where they’re headed.

     *     *     *

それぞれのひとがそれぞれの視点から iOS 7 にアプローチする。

確かにマルチプレーン・カメラで iOS 7 の奥行き感を説明されると分かりやすい。

WWDC のキーノートに Jony Ive が登壇していたらどんな説明をしただろうか・・・


★ →[原文を見る:Original Text

Read Full Post »

[Jan-Michael Cart:photo

どうやらアップルは Siri のデザイナーに目をつけたようだ。

MacRumors: “Apple Hires UI Designer Who Helped Mock Up Leaked Siri Design” by Eric Slivka: 13 December 2011

     *     *     *


ユーザーインターフェイスのコンセプトデザイナー Jan-Michael Cart はジョージア大学の学生だ。自分のブログで、クパティーノに行ってアップルの研修生になる(7か月)ことを発表した。iOS や Lion の機能を高める可能性のあるアイデアとコンセプトモックアップを出したことで、Cart はアップルコミュニティで評判になった。

University of Georgia student and user interface concept designer Jan-Michael Cart has officially announced on his new blog that he is headed to Cupertino to take a seven-month internship with Apple. Cart has gained some fame in the Apple rumor community for his ideas and concept mockups for potential iOS and Lion feature additions and enhancements.

     *     *     *



And like that, my time has come — I am now a member of the Apple community. I will still update my website with random small portfolio additions. I will also open up the blog portion of my website to document my day-to-day happenings in Cupertino. Stay tuned!

     *     *     *

Siri のデザインをリーク

Cart と MacRumors は今年始め、後に iPhone 4S で Siri として登場することになる iOS の「アシスタント」機能に関するビデオモックアップを製作した。Siri に直接関係するソースから得た情報をもとに、Cart は Siri の機能を正確に描写したモックアップを製作したのだ。

iOS 5 Assistant | YouTube]

Notably, MacRumors and Cart worked together earlier this year to create a video mockup of the “Assistant” feature for iOS that appeared a week later in the iPhone 4S as Siri. Working from our information received from a source with direct knowledge of Siri, Cart created a remarkably accurate depiction of how Siri would function.

     *     *     *


Cart が事前に Siri のデザインをリークしたことを考えると、アップルが彼を採用したことに驚くひともいる。しかし、iOS コミュニティの周辺部からアップルが人材を採用するのはこれが初めてではない。ジェイルブレークツール MobileNotifier を開発した Peter Hajas や、Comex の名で知られるジェイルブレーク専門家 Nicholas Allegra にアップルが研修生の職を与えたのは有名だ。

While Cart’s hiring by Apple may be a surprise to some given his role in leaking the design of Siri ahead of its public revelation, this is not the first time that Apple has drawn from what might be considered the fringes of the iOS community from Apple’s point-of-view. Notably, Apple previously offered internships to Peter Hajas, developer of the jailbreak tool MobileNotifier, and Nicholas Allegra, better known as jailbreak expert Comex.

     *     *     *


Cart が製作したユーザーインターフェイスのコンセプトデザインは、YouTube の彼のアカウントで見ることができる。

Other examples of Cart’s user interface design concepts and work can be seen on his YouTube account.

     *     *     *

アップルが Siri のインターフェイスに本気で取り組んでいることが感じられる。


★ →[原文を見る:Original Text

Read Full Post »

TellMe vs Siri | YouTube]

みんなを夢中にさせた Siri だが、マイクロソフトは一笑に付した。

Daring Fireball: “TellMe vs. Siri” by John Gruber: 25 November 2011

     *     *     *

マイクロソフトの Craig Mundie[リサーチ&戦略担当役員]は Forbes に対して Siri についてこう語った

Here’s what Microsoft executive Craig Mundie told Forbes about Siri:

「みんなアップルの発表に夢中だ。マーケティングギミックとしてはいいテだ。しかし技術的にいえば、マイクロソフトは同様の技術を1年以上前に、Windows Phone 7 を導入した時点ですでに持っていた。」

“People are infatuated with Apple announcing it. It’s good marketing, but at least as the technological capability you could argue that Microsoft has had a similar capability in Windows Phones for more than a year, since Windows Phone 7 was introduced.”

     *     *     *

そこで、オーストラリアのユーザーが TellMe と Siri 2つを並べて、一対一の対決をさせた。

TellMe 惨敗の模様を記録したのが冒頭のビデオ。

この対決を取り上げた Gruber は「見るも無惨」(Brutal)とひとこと・・・

★ →[ビデオを見る:YouTube Video

     ❖     ❖     ❖
     ❖     ❖     ❖


TellMe がオーストラリア英語の聞き取りに四苦八苦している様子は気の毒でもある。


Create a meeting tomorrow at 10:00 AM

[TellMe] create a meeting tomorrow at teen anal


Send a text to Simone

[TellMe] stain detector simo
(シミ検出器 simo)


What time is it in Perth

[TellMe] what time is it impo

・Skriflex の曲を再生して

Play artist Skriflex

[TellMe] play artist screamworks
(screamworks の曲)

     *     *     *

TellMe でも米語ならちゃんと聞き取れている例もある。

こうしてみると Siri が米国、英国、オーストラリアそれぞれの英語に対応したということは大変なことだったのだ。





     ❖     ❖     ❖
     ❖     ❖     ❖


iPhone 4S’s -Siri- Working with an Indian Accent .mp4 | YouTube]





[via Long Tail World

Read Full Post »