Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: iOS

[PSD] iOS 7 Blur Templates – iOS 7のブラーエフェクトのPSD

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 7でタイトルバーやタブバーあたりによく使われているブラーエフェクトを再現したPSDテンプレート。試しにDLしてみましたが、スマートフィルタでボカしエフェクトをかけているようです。ボカし用のレイヤーは独立したフォルダ内にあるので、iPhone AppのUI制作をする際にテンプレートとして使うのに便利そうです。ダウンロードするのにPay with a Tweetしなきゃなんないのがちょっと面倒ですが。そういやスマートフィルタってどのバージョンから実装された機能なんだろうと思って調べてみたら、CS3ですでに存在していたようです。結構前からある機能なのねこれ。フィルタ対象を非破壊編集できる点がナイスなテンプレート。

[UI Design] Sloopy UI – なんかこれダメじゃね?というUI作例をまとめたブログ

  • Pocket
  • このエントリーをはてなブックマークに追加

なんかダメというか微妙というかヤボいというか、そんなUI作例を集めたTumblrブログ。わたくし“Sloopy”という単語を知りませんでしたので調べてみて初めて知ったんですが、“だらしない”とかソレ系の意味らしいですね。んでこのブログ内で紹介されてるのは今んとこ全てiOS 7の新UIに関するものばかり。実際細かい所まで見ていくとツッコみどころが結構多いなぁという印象。MMSの発言アニメーションは俺もちょうど昨日「これ微妙だよな」とか思ってました。やや揚げ足取りな印象もありますが、「We’re not haters」という事なので「直した方がもっとクールなのに」という立場なんでしょうかね。わたくしiOS 7の新UIは概ね受け入れてるというか、そもそも以前のスキューモーフィックなデザインってあんまし好きじゃなかったような気がしてます。それにもう慣れたしね。

[iOS 7] PARALLAX WALLPAPERS – iOS 7のParallax Effect (視差効果)に対応した壁紙ギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

昨晩正式リリースされたiOS 7、わりと派手な変化のひとつに3D壁紙のパララックスエフェクトがあります。早速あいぽんを傾けて「うひゃー奥行き感じるZEEEE!」みたいな感じでひとしきりハシャいだ人多いんじゃないでしょうか(俺です)。けどこれ、今までん壁紙を指定した際に、なんか変な感じしません? 解像度ピッタリで作った壁紙の場合、ちょっと拡大されてドットがにじむんですよね。理由は簡単で、iOS 7から壁紙のサイズが変更になった事にあります。奥行きを表現する以上、通常は見えていない位置にも絵を描画する必要があるので、実際のiPhoneの解像度よりも少し大きめサイズの画像が壁紙として指定されるようになってます。というわけで各種iPhoneごとのiOS 7用の壁紙のサイズがこちら。

  • iPhone5/5s/5c:744px x 1392px
  • iPhone4/4s:740px x 1196px

前に比べてちょっと大きくなってます。で、この新しい壁紙のサイズに対応したギャラリーサイトがチラホラ出てきました。わりと趣味がイイので自分もいくつかDLしましたが、iPhone 4系のサイズものもが多いのがちょっとアレではあります。まぁこの視差効果をオフにするとあいぽん速くなるって話もあるんですけどね・・・。

[UI Design] iOS7 Before and After Pics – iOS 7、ビフォーアフター

  • Pocket
  • このエントリーをはてなブックマークに追加

いやーアレですな、いよいよ今晩ですな、iOS 7。けどまぁ日本時間だと深夜2時のようなので、まぁ明日会社来てからブチ込もうかと思っちょります。んでこのサイト、iOS 7にする前と後で、各Appがどのように変わるのかをビフォーアフター形式で紹介してます。アフターを掲載する時点で、ここで紹介されているAppはiOS 7に対応しているって前提であるとも言えますね。正直わたくしこの変化好きでございます。一部アイコンがダサくなったりアレゲな部分も少しありますが、基本的にわたくし“よく訓練されたAppleの犬”でございますゆえ、股を開いて受け入れる体制バッチリなアレでございます。今のあいぽん5、もう1年経つからクリーンインストールするにもちょうどイイ時期だしね。そんなわけでAppleの犬のみなさん、今晩を楽しみに待ちましょう。

[UI Design] Made for iOS 7 – iOS 7対応済みのアプリギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

いよいよ明日からDL開始となるiOS 7ですが(日本時間だと深夜開始になんのかな?)、あの新しいフラットUIってAppごとに個別に対応が必要っぽいんですよね。このTumblrブログではすでに対応済みのアプリのUIがギャラリー形式で紹介されています。これからiOS 7のフラットUIに対応しようという場合の参考になりそうです。アイコン作例も掲載されているのがナイス。アプリ作る側も色々大変ですな・・・。

[UI Design] The best free iOS 7 resources on Dribbble – iOS 7向けUIデザインのリソースまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 7向けUIデザインのためのリソースをまとめた記事。ソースはDribbbleから。アイコン、Appモックアップ、ユーザーインターフェースの3つのカテゴリに分けて紹介されています。iOS 7はフラットデザインとは言われてるけど、実際どう新しいOS純正のUIのに合わせて行けばいいのか、そのへんの参考になる作例がいっぱいあります。まぁAppによっては以前からフラットデザインだったものも結構ありますしね(Google系とかPocketとかFlipboardとか)。UIデザインの参考に。

[UI Design] The iOS Design Cheat Sheet – iOS 7におけるUIデザインのチートシート

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 7におけるデザイン制作に役立つチートシート。まずは各種iPhoneのハードウェア詳細について。ディスプレイのサイズや解像度、色傾向の寒暖、アイコンのサイズについて紹介されてます。次にiOS 6以前と比べてアイコンのシェイプがどう変わるかについて。角丸のRがちょっと大きくなってるんスよねこれ。最後にステータスバーやタブバーなどのUIパーツのサイズについて解説されてます。7になってどこがどう変わるのか、デザイナーはどの点に注意してUI制作をすべきなのかについてひと通り学べる感じです。わたくし最初iOS 7見た時は「ううーん」って思いましたが、Beta触ってみたらわりとこれアリだな、とか思うようになりました。まぁAppによってはアイコンださかったりするんですが、そのあたりは些細な事かなと。

[Cheat Sheet] iOS and Android Design Guidelines Cheat Sheet – iOSとAndroidのガイドラインまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

iOSとAndroidの各種インターフェースに関するガイドラインをまとめたチートシート。ここに書いてある内容はどれも純正のガイドラインに載っている類の事ではあるんだけど、iOSとAndroidそれぞれを並べて紹介している点に意味があるかと。例えばiOSでは「ナビゲーションバー」って呼ばれるものがAndroidでは「メインアクションバー」って呼ばれる等、それぞれのプラットフォームの習慣やマナーについて比較する事ができます。自分の場合Appleの犬なので仕事じゃなければAndroidなんて使う気が全く起きないんですが、そのせいもあってAndroidの事何も知らないんです。なのでこういうまとめ方はスゴく仕事に役立ちます。ナイスです。けどそろそろAndroid端末1台くらい持っておくか・・・的な感じになってきたので、HTC oneが塩漬けプランで買えるようになったら確保しとこうかなぁ、みたいなアレではあります。まぁ言うてもどうせ使わないんだろうけど。