menu

12.11.02

category

comments

0

trackbacks

0

permalink

Interaction Concept of Swiping to Go Back

iPhone5's 4inch screen has the problem when you tap the 'back' button on the navigation bar while you hold the device by one hand.
Apple insists there is no problems on them (in their ad), but in fact there is.

Recently, you can see the apps which has 'back' button on the tool bar (on the bottom of screen) or has function that swiping left to right in order to go back.
 
These are very functional, but seems temporary measures.

So we (@we6tr0n and @zuccoi) improved them and made the concept.
It is based on gesture and visual feedback, also it suits for the current iOS UI.

Interaction Concept of Swiping to Go Back from webtron Inc. on Vimeo.


• the back button indicates amount of swiping in it as a visual feedback.
• when swiping on the content view is not allowed by some reasons, swiping on the tab bar or tool bar will be the another way.
• while you are swiping on the tab/tool bar, the cover layer is shown on it as the visual which means user can't tap its buttons.
• this concept adapt to closing a modal view.

related link : runLoop run]; (entry by @zuccoi)


iPhone5で採用された4inchスクリーンでの問題として

・片手持ちをしている時に、ナビバー上の「戻る」ボタンに親指が届かない、
 届いたとしても少し無理をする必要があって iPhoneを落としそうでこわい

というのがあります。アップルはCMで「何の問題もないよ」と言っていますが、ちょっと無理矢理感があります。そんなわけで、最近では以下のような機能を提供するアプリも目にするようになりました。

・画面を左から右へスワイプすることで「戻る」ことができる
・「戻る」ボタンを画面の下部のツールバー上にも配置

これらはとても有効ですが、暫定的な印象もあります。
僕たち(@we6tr0n@zuccoi)はこれを一段階進めたコンセプトをつくりました。
スワイプジェスチャ + 視覚的フィードバックを基本的な機能として、いままでのGUIにフィットするようなものです。

・スワイプ量に応じた視覚的フィードバックとして Back ボタン内にインジケータを表示する
・画面全体をスワイプできないケースでは、タブバーやツールバー上をスワイプ
・タブバー・ツールバーをスワイプしている間はバーをカバーするようなレイヤーが表示されボタンが押下されないことを明示
・モーダル画面を閉じるケースにも応用できる

まずはビデオを見てみてください!

関連リンク:runLoop run];(@zuccoiによるエントリ)

09.12.12

category

comments

0

trackbacks

0

permalink

iPhone Web App : Image Viewer


iPhone のネイティブアプリケーションのUIデザイン共有用に web app を作ってたら、思いのほか楽しかったので、ちょっと手を入れたものを公開します。

ポートフォリオ的な使い方もできそうだと思って、デモではお仕事画像を入れてみました。

まだまだ注目度が低い iPhone 用 web app だけど、個人的には楽しく作れるので結構好きだな。

09.10.26

category

comments

0

trackbacks

0

permalink

iPhone Web App : PastryKit

まずは「iPhoneユーザガイド(http://help.apple.com/iphone/3/mobile/)」を開いてみてほしい。
(モバイル Safari から見てください)
ナビゲーションバーが提供され、テーブルセルをタップして項目をブラウズする。
あたかもネイティブアプリケーションのようなふるまい。webappだ。

fig.1 iPhone ユーザガイド。一見ネイティブアプリケーション。

ここで注目してほしいのはナビゲーションバーの配置。
本来モバイルSafariでのスクロールはwindow自体が移動するため、このようにwindowが移動せずにスクロールが提供されているような画面は通常つくれない(fig. 1)。

08.10.07

category

comments

0

trackbacks

0

permalink

eventの伝播@iPhone

iPhone2.1のsafari上でのイベント伝播の検証をしてみました。 イベントの伝播 画面左側に入れ子になった3つのDIVがあり、それぞれ ・event.preventDefault() ・event.stopPropagation() を画面右側のチェックボックスでon/offできるようになっています。 DIVにtouchすると「touchstart」イベントの伝播の状況が それぞれのチェックボックスの上にあるエリアに表示されます。
見てみる(iPhone or iPod touch)

08.09.26

category

comments

0

trackbacks

0

permalink

lab

iPhoneで実験したいことがふえてきたんで、暫定的な実験場をつくりました。 まあ稚拙なことしかやりませんしできませんが、興味のある方はどうぞ。 iPhone / iPod touch(2.0以上)でwww.webtron.jpにアクセスして、artworks>laboでいけます。 まだコンテンツは1つで、タッチを追尾するボールです。

draggableball.jpg