We’re sorry but UpLabs website is no longer available Thank you for your contributions and support over the years.
社内のSlackでUI談義が突発的に始まることがあるのだけれども、以前そこで上がったiOS純正メールアプリのUIについてのネタがなかなか面白いのでまとめてみようと思った。結論から言うと、純正メールアプリ、ヤバイ。 まずは観察メールの新規メッセージ画面は他の純正アプリではあまり見かけないようなトランジションを採用していて、開くと元の画面が少し後ろに下がってナビバーだけが見えつつもメッセージ画面が中途半端なモーダルビューで現れたような状態になる。このUIが使いやすいとか何となく見た目がかっこいいとか、そんな上辺だけの理由では絶対ないはずなので、AppleがメールアプリをデザインするときになぜこのUIに至ったのか、その理由を考えてみた。 メールの新規メッセージ画面を開いた状態普段純正メールアプリでメッセージを送信することはほとんどなかったので、まずはいろいろと動きを観察することにした。新規メッセ
アプリのUIデザインをまとめたギャラリーサイトを紹介します。デザインのアイデアが思いつかないときや、アプリのUIをさらに改善したいときに参考になりますので、ぜひチェックしてみてください。 CAPPTIVATE.co http://capptivate.co/ アプリのUIを動画で見ることができるサイトで、画像をマウスオーバーすることで自動的に動画が再生されます。UIのパターンやバウンド、イージングなどアニメーションの効果でも探すことができ非常に便利です。「Capptivate.co」のiOSアプリも配信されているので、こちらもおすすめです。 UX Archive http://uxarchive.com/ 「ログイン」や「商品の購入」などユーザーの各行動フローに注目したギャラリーです。ひとつの行動フローが複数枚の画像で表現されています。アプリの機能を考えるとき、どのような画面・項目が必要な
機種別解像度の例。72 にスケールを掛けた値を設定すべき解像度とする 2. Photoshop の定規単位を設定する もう一つの設定は Photoshop の環境設定にある「単位・定規」です。次のように設定します: 定規: point 文字: point ポストスクリプトに合わせる (72 point/inch) 「定規はやっぱりピクセル単位が良い」という場合は少々面倒ですが適宜切り替えながら作業するのが良いかと思います。 PSD は大きい方から作って縮小する PSD は大きい方から作って最終出力時に小さい方に合わせる形にします。必要に応じて各端末向けに縮小したプロトタイプを個別に用意すると良いでしょう3。PSD の縦横ピクセル数は iPhone であれば 6 Plus のダウンサンプリング前の大きさ 1242×2208 pxにします4。ダウンサンプリングのことは OS が勝手にやってくれ
スマートフォンのWebサイトやアプリの開発に関わっていると、日常的な会話の中でよく出てくるUIコンポーネント(構成要素、パーツ)の名前。 ディレクターであれ、デザイナーであれ、エンジニアであれWeb・アプリ開発に関わる人であれば、スムーズにコミュニケーションをとるために最低限押さえておきたいところでなのですが、Web、アプリ、iOS、Androidで呼び名や役割が異なるため、ごちゃごちゃになってしまうことも多いと思います。 photo credit: iPhone 6 vs iPhone 5S via photopin (license) そこでiOS、Androidともにリファレンス用にまとめました。それぞれの役割と合わせて名前を覚えるきっかけになればと思います。 iOSのUIコンポーネント まずは基本コンポーネントから。 ①Status bar(ステータスバー) ステータスバーは、時間
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く