タグ

UIに関するpaellaのブックマーク (34)

  • iOS用チェックボックスコントロール

    デザインがなかなかいい。 tciuro/NoticeView シートの背景は画像が用意されていてそれを使っているようだ。@2xファイルが見当たらないのが気になった。 ネタ元はこちら。 iOSで上部にかっこよく通知を出す tciuro / NoticeView が...

    iOS用チェックボックスコントロール
  • 30 Free Professional and Useful UI PSD Files | Freebies

    14 Comments These are awesome! You can also get some inspiration in many of these designs if you’re working on UI elements of your own. Thanks for sharing! Amazing collection! This is a great post…more ideas and choice to create a good jobs! Thanks so much! I had need that in the past! Also adding to the pile. Renegade a free blog PSD http://theodin.co.uk/blog/photoshop/renegade-free-publication-p

    30 Free Professional and Useful UI PSD Files | Freebies
    paella
    paella 2011/11/08
    良い感じに格好いいのが多い。
  • Illustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題) - フリーでWebデザインとかやってる紳士。

    2017年の追記(CC2017向け) 次の点に留意して作業すればOK。基的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。 次セクション「2016年の追記」との違いだけを列挙する。 変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。 それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している(スクリプトでなんとかなりそうな気もするが調べて

    Illustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題) - フリーでWebデザインとかやってる紳士。
    paella
    paella 2011/09/29
    メモメモ。イラレの線は線の中央なんだよ、と。
  • iPadアプリ専門のハイクオリティなUIを収集しているダイナミックなギャラリーサイト・Landing Pad - かちびと.net

    iPadアプリの素敵なインターフェースを専門に 収集しているギャラリーサイト・Landing Pad のご紹介。とってもダイナミックな方法で閲覧 出来るので見てるだけでも楽しいです。クオ リティ重視のようなのでまだ数が多いとは 言えませんが、こういうサイトは覚えておくと 後で困らないですよね。 iPadのアプリを制作しているデベロッパーさんはご覧になってみてはいかがですか。大きな画像なのでイメージもしやすそうです。 Tumblrで作ってるんですねー。1カラムでダイナミックに表示してくれています。どれもクオリティの高いものばかり。 ずらーっと並べてくれてます。 お盆休みだったり、まだ明けたばかりなのでかるーくインスピレーション向上させてみるのも良いのでは。 Landing Pad

    iPadアプリ専門のハイクオリティなUIを収集しているダイナミックなギャラリーサイト・Landing Pad - かちびと.net
    paella
    paella 2011/08/17
    iPadアプリのグッドデザインなスクリーンショットを詳解しているギャラリーサイト。自由なデザインが多いですな
  • Cocoaの日々: 数字キーボードビュー(ライブラリ)を公開

    iOS/iPhone/iPad/MacOSX プログラミング, Objective-C, Cocoaなど CoreGraphicsの関数を使って全部自力で描いてます。 lakesoft/LKNumberPad - GitHub インストール 1. GitHubからプロジェクトをダウンロードした後 Xcode 4 で開く。 2. その中から LKNumberPadView.h と LKNumberPadView.m を自分のプロジェクトへコピーして追加する。 使い方 Xib を使う場合は次の通り。 1. 表示したいビューを開き、UIView を貼りつけた後、クラスを LKNumberPadView に変更する。 推奨サイズは 横 320 x 縦 54。 2. 背景色(Background)プロパティを設定する。 これだけで表示できるようになる。 次にボタンがタップされた時の動作を記述する。

    Cocoaの日々: 数字キーボードビュー(ライブラリ)を公開
    paella
    paella 2011/08/01
    数字が一列に並んだUIを実現したビューライブラリ。@xcatsan作成のライブラリ。
  • 細かすぎて伝わりづらい、Mac OSX Lionのデザイン変更点まとめ。

    先日発売されたMac OSX Lionを何の迷いもなくダウンロードして、日々Apple信者になりつつあるのを実感しております。 さて、実際に数日間使ってみた感想としては、追加機能や操作の変更がてんこ盛りで慣れるのに時間がかかりそうな感じですが、特に気になったのはUIのグラフィックも細かな変更がされているということ。 そこで、新しい機能や大きな変更が話題になっている中で、細かい部分にスポットライトを当てて、その「細かすぎる変更点」をまとめてみました。 違いが分かりやすくなるようにそれぞれ拡大してあります。 目を凝らしてどうぞ。 1.クローズ・ミニサイズ・ズームボタン Snow Leopadでは各ボタンの大きさが14pxだったのに対してLionでは少し小さくなって12pxになっています。さらに、ロールオーバーしたときの記号のデザインも少し立体的なグラフィックになっています。 通常ではボタンは大

    細かすぎて伝わりづらい、Mac OSX Lionのデザイン変更点まとめ。
    paella
    paella 2011/07/25
    全然気付かなかった
  • これは斬新!木のUIで訪問者を驚かせよう、なUIパーツ:phpspot開発日誌

    Got Wood? UI Design Elements | MediaLoot これは斬新!木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなUIキットPSD 色々と使えそうなフリーのUIエレメントPSD70種

  • 指数関数を使ったお手軽イーズ・アウト

    (この記事にはProcessing.jsによるスケッチがいくつか組み込まれています。環境によっては正しく再生されないかもしれません。Chrome, Safari, Firefox等の使用をおすすめします。) 「丸が1秒おきに左右に滑らか動く」というプログラムを書いてみよう。いちばん簡単なのは、線形移動を使う方法だ。 まあ、これでも十分っちゃ十分なんだけれど、動きとしてはちょっと味気ない。 いわゆるイーズアウト(ease out)を使えば、これを滑らかにすることができる。 上のスケッチでは、漸化式を使ったイーズアウトを実装している。こんな感じの式だ。 pos += (target - pos) * 0.1; pos は現在座標、 target は目標の座標。この式を1回の描画毎に評価する。目標座標までの差分を1割づつ詰めていくような感じ。差分は毎回少なくなっていくから、最初は早く、徐々に遅く

    paella
    paella 2011/04/30
    イーズアウトを、フレームレートに関係なく同時刻に目標座標に到達させることができる(重要!)式への変換例。メモメモ。
  • Tweetbot: Tapbotsの新作!使って楽しい、ロボっぽさあふれるTwitterクライアント。1084 | AppBank

    Tweetbot: Tapbotsの新作!使って楽しい、ロボっぽさあふれるTwitterクライアント。1084 AppBankで最もTapbots製アプリを愛する@iTakahashikunが、ようやくリリースされたTweetbot – 個性あふれるTwitterクライアント –をご紹介いたします。ずっと待ってたよ! 結論から言うと、当に素晴らしい!…けど好き嫌いがはっきり分かれるかな……といった感じ。もちろんTapbotsアプリ、作り込みレベルは文句なしです。だけどもっとやれる、そう思ってしまいます。今後のアップデートによって当の評価が決まるでしょう。 とはいえ、Twitterを楽しむために必要な機能はほぼそろっています。Tapbots製アプリのあの使いやすさや手になじむ感じもバッチリです。細かい演出も手が込んでいますね。 個人的には、リストの切り替え方法がなかなかいいなぁ、と思いま

  • Top 40+ Free Web UI Kits & Templates – Speckyboy

    Web UI kits are pre-designed collections of user interface components that can help you save time and streamline your design process. These kits typically include common design elements such as buttons, menus, forms, and icons. Rather than starting from scratch, you can use a UI kit as a foundation for a design and customize it to fit your specific project requirements. This can be especially usef

    Top 40+ Free Web UI Kits & Templates – Speckyboy
  • CSS Progress Bars | CSS-Tricks

    DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I made some progress bars. They look like this: They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience. Here’s what they look like in Opera 11 which supports some of the CSS3 used here but not all. As you might imagine,

    CSS Progress Bars | CSS-Tricks
    paella
    paella 2011/02/25
    CSS3でプログレスバー。意外(失礼だけど)としっかりできている。へー
  • UIEngine、自動車に載る(Toyota Entune)

    今回のCESではいくつもの発表があったが、その中でも私として一番うれしかったのが、Toyotaが発表したEntune。米国のトヨタ純正カーナビには、bing(検索)、Pandra(インターネットラジオ)、MovieTickets.com(映画情報)、OpenTable(レストラン予約)などの「アプリ」が走るのだが、そのアプリとアプリのローンチ画面のUIを担当するのがUIEngineなのである。 UIEvolutionは、私が2000年に「これからはいろいろなデバイスがネットに繋がり、その結果、さまざまなプラットフォームが乱立する戦国時代に突入する。その問題を一気に解決するのがUIEngine。携帯電話から、テレビ・自動車・冷蔵庫までいろんなデバイスにUIEngineを載せて組み込み機器のUIの開発を大幅に簡単にする」というビジョンを掲げて起業した会社だが、10年たってようやく自動車に到達。

    UIEngine、自動車に載る(Toyota Entune)
    paella
    paella 2011/01/09
    UIEngineは、すでにAndroid、iPhone、Flash、Linux、Windows、Windows Mobile、BREW、Java(J2SE)、J2ME/MIDP、J2ME/DoJa、Symbian、などの各種プラットフォームの上に移植済み〜少なくともUIの部分だけなら100%のポータビリティを持つ
  • iPhone HIGチェックシート

    このチェックシートは、UXの向上を目的とし、iPhoneヒューマンインターフェイスガイドライン(以下iPhone HIG)に書かれたiPhone標準のデザイン法則と汎用的なUIデザイン法則へのアプリの準拠度チェックをサポートするためのツールとして、株式会社ジェネシックス デザインセンターにおいてHIGの内容を独自に解釈した上で作成したものです。 また、チェック項目の詳細については併記したページ番号からHIGをご参照ください。

    paella
    paella 2011/01/05
    面白い取り組み
  • iPadとiPhoneのUIエレメントのベクター素材とPSD素材のまとめ

    iPadiPhoneUIエレメントをスケッチ風に描いたベクター素材(ai)を紹介します。 あわせて、PSD素材も紹介します。

  • プログラマのためのUXチートシート — ありえるえりあ

    はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ

    paella
    paella 2010/11/19
    Windows ユーザーエクスペリエンすガイドライン(全800ページ弱)をまとめてある良い資料。Appleのガイドラインと見比べてみようっと。
  • iPhoneアプリの引っ張るアクションを再現するJavaScript·iscroll-js MOONGIFT

    iscroll-jsはコンテンツを引く動作をMobile Safariであってもネイティブアプリに近い動作にする。 MOONGIFTはこう見る 様々なライブラリ、ソフトウェアによってネイティブアプリとWebアプリの境が低くなっている。これはiPhoneに限らず、PCでも同様だ。だが、HTML5を積極的に使えたり、ネットワークがすぐに使えたりとスマートフォンの方がより実用的になっている。 iscroll-jsのようなライブラリが増えていけばさらにネイティブアプリからWebアプリを押し進める流れができてくるはずだ。この動きには今後注目しなければならない。 [/s2If] iscroll-jsはJavaScript製のオープンソース・ソフトウェア。iPhoneアプリで人気のある機能の一つで、リストを引っ張って離すとデータ更新を行うというものがある。同様のアクションをiPhone最適化サイトでも提

    paella
    paella 2010/11/12
    UIScrollviewのマイナス位置に置いたビューのように、スライドすると出てくるUI
  • [iPad] Guitar Rhythm: コード演奏に特化したギターアプリ。将来、大化けする可能性アリ!2998

    こちらがメイン画面です。 画面の左半分を覆っているマス目からコードを指定することができます。 画面右側の弦上をスライドしたり、タップすると音が鳴ります。 Amなら、ココですね。 少しだけレスポンスが悪い感じがするのが残念です。 この点が改善されたら、かなりイイ感じに弾くことができるようになりそうです! 画面下部のmore…をタップすることで、コードの種類を切り替えることが出来ます。 主要なコードはほぼ全てある感じですね! 現在、はやいテンポで弦をかき鳴らすことができませんが、しっとりとアルペジオを弾くのはバッチリです。 今後のアップデートに、期待大ですね!

    paella
    paella 2010/10/06
    ギター演奏に対するUIの作り方が良い感じ。音が途切れずに演奏できるという技術の優位性を活かせるUIである、みたいな表現?
  • Flashでグニグニ曲がるUIを作る方法 - しっぽのブログ

    前にtwitterアイコンやpixivの画像をプヨプヨすることのできるpuyopixというコンテンツを作りました。 Puyopix -プヨプヨにするよ- このページの右上にあるブログパーツもこれです。 解説をやると言っておいて、ずっと書いていなかったので書きます。 あんまりコードだらけにしても面白くないし、方法の概念的なものを図を交えながら説明していきます。 画像をプヨプヨする方法の概要と、それをUIに応用する方法です。 プヨプヨの実装 骨組みを作る 格子状バネという、わりと普通の実装をしています。 格子状に並んだ各点をばねのように接続します。 バネはお互いの点の距離が一定になるように、2つの点に逆方向の力をかけます。 フックの法則というのがあって、「F = -kx」とかいう式もありますが、プログラムとしての感覚は「来あるべき距離の方向へ、ズレた分の○%だけ加速度をつける」って感じになり

  • ソーシャル顔アイコン

    TwitterやFacebook上の友達をアイコンにしてデスクトップに置けるクライアントソフトです。 気になるあの人の近況をウィンドウを開くことなく一目でチェックでき、タイムラインに埋もれてしまうこともありません。 「人間軸で見る」「邪魔にならない」「アイコン風のシンプルな操作」をコンセプトにしています。 インストール JavaScriptが無効、もしくはFlashのバージョンが低いためダウンロードできません。 JavaScriptを有効にするか、もしくは最新のFlashをインストールして下さい。 ←の「Install Now」をクリックすると Adobe AIR および最新のソーシャル顔アイコンをまとめてインストールできます。 WindowsMac OS X、Linuxで動作します。 ※詳細 ソースコード github.com にてソースコードを公開しています。 使い方 起動後、画面下

    paella
    paella 2010/06/11
    顔アイコンをデスクトップに置いたりしておき、そのアイコンを右クリックするとその人の呟きが見られる面白いツール。この発送はなかった。
  • House of Buttons

    A collection of great UI buttons spotted in the wild. Curated by MaxButtons.   Submissions welcome.

    House of Buttons
    paella
    paella 2010/04/21
    色んなUIのボタンアイコンをひたすら集めているTumblrサイト。面白い。