文書編集 UI のパターン

pttrns の compose に並んでいた UIパターンをざっとまとめてみた。狭い画面の中に編集エリアとボタンなどの機能を配置するノウハウが詰まってる。

Compose / iOS UI Patterns (beta)

標準のMail.appで使われているスクロールするタイプ。複数入力欄がある場合のオーソドックスなかたち。

フローティングボタンタイプ。文書の右側は空白になることが多いのでそこにボタンを配置する。縦が広く取れるのがメリット。ただし実質的に横幅が狭くなる。

フローティングタイプ。iOS 5 の Twitter UI もこれに分類される。

ツールバー ＋ 情報表示タイプ。割とオーソドックス。画面が狭くなるのが難点。

 ツールバーのバリエーション。本来は上部のナビゲーションバーに配置されるアクションボタンが下に配置されている。※一つ前のタイプとの違いは、前者のボタンは属性の編集で、後者はコンテンツ自体の扱いを決定している。このケース（Cancel, Add, Save）のように３つ以上のアクションを提供する場合、ナビゲーションバーに３つ並べるとバランスが悪いのでこういう方法もある。