IPhoneを発売した象徴的なiOSラバーバンドエフェクトの裏話

iPhoneが10歳になる 2005年初頭のある日、電話が鳴ったとき、インターフェイスデザイナーのBasOrdingはAppleHQの秘密の窓のない研究室に座っていました。 スティーブ・ジョブズでした。

Jobsが最初に言うことは、会話は極秘であり、誰にも繰り返されてはならないということです。 Ordingはそうしないと約束します。

「彼は、「ええ、バス、私たちは電話をするつもりです」のようなものです」とオーディングは言いました マックのカルト、昔からのその重大な呼びかけを思い出します。 「「ボタンなどはありません。ただの画面です。 名前のリストをスクロールして、電話をかける相手を選択できるデモを作成できますか?」それは、スティーブから直接のように、私が得た課題でした。」

この投稿には アフィリエイトリンク. マックのカルト リンクを使用して商品を購入すると、手数料が発生する場合があります。

Ordingは、私たちのデジタルライフに多大な影響を与えてきたあまり知られていないAppleの従業員の1人です。 彼は、今日のコンピューティングインターフェイスの大部分を担当しています。 彼はウォルターアイザクソンのジョブズの伝記で簡単に言及されており、別の本では「魔法使い」と「神」として説明されています。 スティーブジョブズになる.

しかし、Ordingはもっとよく知られているはずです。 彼はAppleで働いていた15年間、私たちが毎日使用しているiOSおよびMacインターフェイスの主要な設計者の1人でした。 彼は、iPhoneの「ラバーバンド」スクロール、OS XのDock拡大効果、Exposeなどの背後にいる頭脳です。 しかし、Appleの非常に厳格な秘密ポリシーのために、Ordingが誰であるかは事実上誰も知りません。

Ordingは何百もの特許を保有しており、Apple-Samsungの裁判の重要な証人でしたが、彼は多くのインタビューを行っていません。 この独占的な抜粋では 歌われていないアップルヒーロー、 NS マックのカルト Ordingは、Appleでのキャリアを詳しく説明した電子書籍で、iOSのラバーバンド効果をどのように作成したかを説明しています。これは、JobsにiPhoneを構築するよう説得した象徴的なタッチスクリーンアニメーションです。

Appleの初期のマルチタッチ実験

オリジナルのiPhoneデザインチーム
オリジナルのiPhoneソフトウェア設計チームのメンバー:Freddy Anzures、Imran Chaudhri、Bas Ording、Marcel Van Os、Steve Lemay、MikeMatas。
写真:イムラン・シャウドリ/ Instagram

Jobsの電話の数か月前、Ordingと イムラン・シャウドリ アップルのソフトウェアのユーザーインターフェイスを担当するソフトウェア設計者のチームであるアップルのヒューマンインターフェイスグループの同僚は、アップルの入力エンジニアリンググループと協力してきました。

スティーブホテリングが率いるインプットエンジニアリングは、キーボード、マウス、トラックパッドなどのコンピューター入力を担当していました。 彼らは、FingerWorksから取得した新しいマルチタッチ入力デバイスを実験してきました。 Appleがその年の初めに購入したスタートアップ.

Hotelingのグループは、20年間マウスとキーボードが主流であった、デスクトップおよびラップトップコンピューターと対話するための新しい方法を模索していました。 FingerWorksのiGesturePadは、市場で最初のジェスチャーセンシティブタッチパッドの1つでした。 当時のほとんどのトラックパッドのように1本の指だけを追跡するのではなく、複数の指を追跡しました。 したがって、「マルチタッチ」。

大きな黒いプラスチック製のタッチパッドに似たiGesturePadは、反復運動過多損傷を予防または軽減する可能性のあるマウスの代替品として、デスクトップコンピューターのユーザーに販売されました。 RSIの患者は、代わりにマウスを指を追跡するパッドに置き換えることができます。

Fingerworks iGesture Pad
FingerWorksのiGesturePad、RSI患者向けのマルチタッチ入力デバイス。
写真:フィンガーワークス

ジョニーアイブの工業デザインスタジオのデザイナーであるChaudhriとDuncanKerrと協力して、黒いiGesture Padを一枚の紙で覆い、その上にスクリーンを投影しました。 プロジェクターはコンピューターに接続され、コンピューターはOSXの画像をマルチタッチパッドの上の紙に投影しました。

使用される順序 Adobe Director、マルチメディアオーサリングツール。画面上を移動する指を追跡するデモを作成します。 マルチタッチデータをインポートするには、Directorに特別な拡張機能が必要でした。 最初のデモは、画面上でドットを移動するだけでした。 次に、2本の指を追跡するデモを作成し、画像を拡大できるようにしました。 彼は、One InfiniteLoopのAppleHQを中心に、カリフォルニア州クパチーノの地図を選びました。

「私は1時間か何かをスライスして、Googleマップのスクリーンショットや衛星ビューを作成し、Photoshopですべてをつなぎ合わせて、そのデータを取得できるようにしました」とOrding氏は述べています。 「これらすべてをつなぎ合わせたスクリーンショットを使用して1つの大きな画像を作成しました。これをデモに使用したので、ただパンすることができました。」

すぐに、彼らは自分たちが何か特別なものを持っていると感じました。

「それは魔法のように感じました」と、入力エンジニアリンググループの元責任者でOrdingのボスであるGregChristieは言いました。 「それは魔法の紙でした。」

その時点で、彼らは多くの可能性があることに気づきました。 相互作用は、マウスを使用する場合とは大きく異なりました。

iOSのラバーバンド効果の背後にある考え方

このプロジェクトはジョブズや他のアップルの幹部を興奮させたが、会社はそれをどうするかを決めることができなかった。 タブレット、またはおそらくタッチスクリーンのラップトップで動作する可能性があります。 アップルの幹部がこのテクノロジーを使って電話を作ることができるかどうかを確認することを決定したあるハイレベルの会議まで、長引く内部討論がありました。

ジョブズの秘密の電話を受けた後、オーディングは電話をかける人の名前のリストを作成することに着手しました。

まず、Ordingはタブレット/プロジェクターのデモの隅を隔離し、隔離された領域が電話の画面であるかのように見せかけました。 彼は200人の名前のリスト(すべて同僚の名簿から抜粋)を取り、Directorで長いスクロールリストを作成しました。

彼が名前を選択すると、現在のバージョンのiOSとほぼ同じようにスライドし、偽のダイヤル画面に電話番号が表示されます。 何もしませんでしたが、電話をかけることがどのように機能するかを示しました。

しかし、スクロールリストで作業していると、Ordingは、リストの一番下または一番上に到達すると、リストが停止したことに気付きました。 彼はリストを引き下げましたが、それはただそこに座っていました。 墜落したようです。 彼はそれを見るたびにそれを悩ませましたが、彼はそれを修正する方法を知りませんでした。

彼は上部にスペースを追加しようとしました。 彼がリストの一番上に来ると、小さなスペースが表示されます。 しかし、それでは問題は解決しませんでした。それを繰り返しただけです。

スペースは動かず、ただそこに座っていました。

Ordingは、スペースがまだ応答していることを示すために、ユーザーの指でスペースを移動する必要があると考えました。 しかし、それは正しくないと感じたため、Ordingは、実験のように、ユーザーの指よりもゆっくりと動かすようにしました。 その効果は、弾力性を感じさせることでした。

「私は、 『ああ、これはちょっと楽しい』、そして 『ああ、待って、今は戻る必要がある』みたいだ」とオーディングは言った。

彼がそれをスナップバックさせたとき、それは輪ゴムのように機能しました—それは下に移動しましたが、それから正しい位置に跳ね返りました。

その効果はOrdingを喜ばせました:リストの最後に到達したこと、そしてデバイスがクラッシュしていないことを明確に示しました。

BasOrdingはiPhoneのラバーバンド効果を完璧にします

BasOrdingがiOSのラバーバンド効果を作成しました
Bas Ordingは、SteveJobsにiPhoneの製造を説得するラバーバンド効果を生み出しました。
写真:リアンダー・カーニー/カルト・オブ・マック

Ordingは、慣性スクロール、ラバーバンド効果、名前/電話番号の選択など、すべてを正しく行うために2、3か月の作業を要しました。

「私はこれらすべての詳細に取り組む必要がありました、そしてそれを正しくするのに実際にはかなりの時間がかかりました」とオーディングは言いました。 しかし、彼が最終結果を見たとき、その仕事はそれだけの価値があることがわかりました。

「そうだね、これでうまくいくだろう。スクロールしたり、名前を選択したり、気持ちがいい、楽しい」とオーディング氏は語った。 「そして、それを使って他のこともできるし、それはいい感じだったね。」

すべてが洗練された状態で、それはかなり洗練されたデモであることが証明されました。 それは楽しく機能的であり、真の画期的な瞬間のように感じました。

スティーブジョブズはiPhoneのブレークスルーを見ています

Jobsがそれを見たとき、彼はその効果がマルチタッチの指駆動インターフェースを可能にすることをすぐに認識しました。

で話す ウォールストリートジャーナル'■2010年のD8会議で、ジョブズは次のように説明しました。「ガラスディスプレイ、入力可能なマルチタッチディスプレイを用意することについてこのアイデアを思いつきました。 私はそれについて私たちの人々に尋ねました。 そして6か月後、彼らはこの素晴らしいディスプレイで戻ってきました。 そして、私はそれを私たちの本当に優秀なUI担当者の1人に渡しました。 その後、慣性スクロールなどが機能するようになりました。「なんてことだ、これでスマートフォンを作れる」と思って、タブレットを脇に置いて、スマートフォンの作業に取り掛かりました。」

Apple-Samsung裁判中の彼の証言では、元AppleVPのScottForstallは、 iPhoneのオリジナルソフトウェア。これは、同様にOrdingのUIブレークスルーと呼ばれ、デバイスにとって重要です。 発達。 Appleの幹部は、ソフトウェアの動作を見て、iPhoneが機能することを知っていました。

「私たちは小さなスクロールリストを作成しました」とForstallは裁判中に証言しました。 「ポケットに収まるようにしたかったので、連絡先のリストとして小さなコーナーを作成しました。 そこに座って、この連絡先リストをスクロールし、連絡先をタップすると、スライドして表示されます。 連絡先情報を入力すると、電話番号をタップすると「発信中」と表示されます。通話中ではありませんでしたが、 呼び出します。 そしてそれはただ素晴らしかった。 そして、ポケットに収まるサイズのタッチスクリーンが、これらの電話の1つとして完全に機能することに気づきました。」

これがiPhoneの誕生です。

サインアップして、の無料コピーを入手してください 歌われていないアップルヒーロー、AppleでのBasOrdingの経歴を詳しく説明した電子書籍。 7月にeBookがリリースされたら、コピーをメールでお送りします。 歌われていないアップルヒーロー 詳細OrdingのiPhoneおよびMacソフトウェアの重要な部分を構築してきた長いキャリア。 この本は、Appleで働き、Steve Jobsと緊密に協力することがどのようなものであったか、彼がアイデアを得た場所、そして彼が輪ゴム効果などの問題をどのように解決したかを説明しています。 すべての設計者向けのレッスンで、彼の方法論を深く掘り下げます。

最新のブログ投稿

アップルのニュース、分析と意見、および一般的な技術ニュース
August 19, 2021

別のiCloudフィッシング詐欺に悩まされているiPhoneの所有者このようなメッセージに気をつけてください!写真:Ste Smith / Cult of Mac英国のiPhone所有者は、フィッシング詐欺の標的にされて騙そうとしていると不満を漏らしています 彼らは彼らのiCloudに問題があ...

アップルのニュース、分析と意見、および一般的な技術ニュース
August 19, 2021

Appleはより高速なIntelXeonチップ、より優れたGPUをMacProにもたらしますMacProが少し良くなりました。写真:Ste Smith / Cult of MacAppleは本日、Mac Proにわずかな更新を行い、より高速なIntel Xeonプロセッサと、より強力なグラフィ...

アップルのニュース、分析と意見、および一般的な技術ニュース
September 10, 2021

サンダースはトランプに加わり、アップルは米国で製品を製造すべきだと述べた。サンダースはアップルにベルンを感じてもらいたい。写真:Ste Smith / Jonathunder / Cult of Macドナルド・トランプとバーニー・サンダースには、部外者の候補者である以上の共通点があります。ど...