iOS用チェックボックスコントロールデザインがなかなかいい。 tciuro/NoticeView シートの背景は画像が用意されていてそれを使っているようだ。@2xファイルが見当たらないのが気になった。 ネタ元はこちら。 iOSで上部にかっこよく通知を出す tciuro / NoticeView が...
UIに関するpaellaのブックマーク (34)
-
paella 2011/12/27
-
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 https://theodin.co.uk/blog/photoshop/renegade-free-publication-
-
Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題） - フリーでWebデザインとかやってる紳士。
2017年の追記（CC2017向け） 次の点に留意して作業すればOK。基本的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。 次セクション「2016年の追記」との違いだけを列挙する。 変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。 それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している（スクリプトでなんとかなりそうな気もするが調べて
-
iPadアプリ専門のハイクオリティなUIを収集しているダイナミックなギャラリーサイト・Landing Pad - かちびと.net
iPadアプリの素敵なインターフェースを専門に 収集しているギャラリーサイト・Landing Pad のご紹介。とってもダイナミックな方法で閲覧 出来るので見てるだけでも楽しいです。クオ リティ重視のようなのでまだ数が多いとは 言えませんが、こういうサイトは覚えておくと 後で困らないですよね。 iPadのアプリを制作しているデベロッパーさんはご覧になってみてはいかがですか。大きな画像なのでイメージもしやすそうです。 Tumblrで作ってるんですねー。１カラムでダイナミックに表示してくれています。どれもクオリティの高いものばかり。 ずらーっと並べてくれてます。 お盆休みだったり、まだ明けたばかりなのでかるーくインスピレーション向上させてみるのも良いのでは。 Landing Pad
-
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)プロパティを設定する。 これだけで表示できるようになる。 次にボタンがタップされた時の動作を記述する。
-
細かすぎて伝わりづらい、Mac OSX Lionのデザイン変更点まとめ。
先日発売されたMac OSX Lionを何の迷いもなくダウンロードして、日々Apple信者になりつつあるのを実感しております。 さて、実際に数日間使ってみた感想としては、追加機能や操作の変更がてんこ盛りで慣れるのに時間がかかりそうな感じですが、特に気になったのはUIのグラフィックも細かな変更がされているということ。 そこで、新しい機能や大きな変更が話題になっている中で、細かい部分にスポットライトを当てて、その「細かすぎる変更点」をまとめてみました。 違いが分かりやすくなるようにそれぞれ拡大してあります。 目を凝らしてどうぞ。 1.クローズ・ミニサイズ・ズームボタン Snow Leopadでは各ボタンの大きさが14pxだったのに対してLionでは少し小さくなって12pxになっています。さらに、ロールオーバーしたときの記号のデザインも少し立体的なグラフィックになっています。 通常ではボタンは大
-
これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ:phpspot開発日誌
Got Wood? UI Design Elements | MediaLoot これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基本的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなＵＩキットPSD 色々と使えそうなフリーのUIエレメントPSD７０種
-
指数関数を使ったお手軽イーズ・アウト
（この記事にはProcessing.jsによるスケッチがいくつか組み込まれています。環境によっては正しく再生されないかもしれません。Chrome, Safari, Firefox等の使用をおすすめします。） 「丸が１秒おきに左右に滑らか動く」というプログラムを書いてみよう。いちばん簡単なのは、線形移動を使う方法だ。 まあ、これでも十分っちゃ十分なんだけれど、動きとしてはちょっと味気ない。 いわゆるイーズアウト(ease out)を使えば、これを滑らかにすることができる。 上のスケッチでは、漸化式を使ったイーズアウトを実装している。こんな感じの式だ。 pos += (target - pos) * 0.1; pos は現在座標、 target は目標の座標。この式を1回の描画毎に評価する。目標座標までの差分を1割づつ詰めていくような感じ。差分は毎回少なくなっていくから、最初は早く、徐々に遅く
-
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
-
CSS Progress Bars | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. 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.
-
UIEngine、自動車に載る（Toyota Entune）
今回のCESではいくつもの発表があったが、その中でも私として一番うれしかったのが、Toyotaが発表したEntune。米国のトヨタ純正カーナビには、bing（検索）、Pandra（インターネットラジオ）、MovieTickets.com（映画情報）、OpenTable（レストラン予約）などの「アプリ」が走るのだが、そのアプリとアプリのローンチ画面のUIを担当するのがUIEngineなのである。 UIEvolutionは、私が２０００年に「これからはいろいろなデバイスがネットに繋がり、その結果、さまざまなプラットフォームが乱立する戦国時代に突入する。その問題を一気に解決するのがUIEngine。携帯電話から、テレビ・自動車・冷蔵庫までいろんなデバイスにUIEngineを載せて組み込み機器のUIの開発を大幅に簡単にする」というビジョンを掲げて起業した会社だが、１０年たってようやく自動車に到達。
-
-
-
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
-
iPhoneアプリの引っ張るアクションを再現するJavaScript·iscroll-js MOONGIFT
iscroll-jsはコンテンツを引く動作をMobile Safariであってもネイティブアプリに近い動作にする。 MOONGIFTはこう見る 様々なライブラリ、ソフトウェアによってネイティブアプリとWebアプリの境が低くなっている。これはiPhoneに限らず、PCでも同様だ。だが、HTML5を積極的に使えたり、ネットワークがすぐに使えたりとスマートフォンの方がより実用的になっている。 iscroll-jsのようなライブラリが増えていけばさらにネイティブアプリからWebアプリを押し進める流れができてくるはずだ。この動きには今後注目しなければならない。 [/s2If] iscroll-jsはJavaScript製のオープンソース・ソフトウェア。iPhoneアプリで人気のある機能の一つで、リストを引っ張って離すとデータ更新を行うというものがある。同様のアクションをiPhone最適化サイトでも提
-
-
Flashでグニグニ曲がるUIを作る方法 - しっぽのブログ
前にtwitterアイコンやpixivの画像をプヨプヨすることのできるpuyopixというコンテンツを作りました。 Puyopix -プヨプヨにするよ- このページの右上にあるブログパーツもこれです。 解説をやると言っておいて、ずっと書いていなかったので書きます。 あんまりコードだらけにしても面白くないし、方法の概念的なものを図を交えながら説明していきます。 画像をプヨプヨする方法の概要と、それをUIに応用する方法です。 プヨプヨの実装 骨組みを作る 格子状バネという、わりと普通の実装をしています。 格子状に並んだ各点をばねのように接続します。 バネはお互いの点の距離が一定になるように、２つの点に逆方向の力をかけます。 フックの法則というのがあって、「F = -kx」とかいう式もありますが、プログラムとしての感覚は「本来あるべき距離の方向へ、ズレた分の○%だけ加速度をつける」って感じになり
-
ソーシャル顔アイコン
TwitterやFacebook上の友達をアイコンにしてデスクトップに置けるクライアントソフトです。 気になるあの人の近況をウィンドウを開くことなく一目でチェックでき、タイムラインに埋もれてしまうこともありません。 「人間軸で見る」「邪魔にならない」「アイコン風のシンプルな操作」をコンセプトにしています。 インストール JavaScriptが無効、もしくはFlashのバージョンが低いためダウンロードできません。 JavaScriptを有効にするか、もしくは最新のFlashをインストールして下さい。 ←の「Install Now」をクリックすると Adobe AIR および最新のソーシャル顔アイコンをまとめてインストールできます。 Windows、Mac OS X、Linuxで動作します。 ※詳細 ソースコード github.com にてソースコードを公開しています。 使い方 起動後、画面下
-
House of Buttons
A collection of great UI buttons spotted in the wild. Curated by MaxButtons. Submissions welcome.
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました