タグ

2013年10月24日のブックマーク (4件)

  • » 日本語限定 UI、UXガイドラインとその他まとめ | Webnoborder

    インターネット上に様々なガイドラインが公開されていますが、その中でもUIUX、ユーザビリティについて言及している日語限定の情報を集めてみました。 有志で翻訳されたガイドラインもあります。感謝です! Apple 超が付くほど有名なガイドラインターネット上に様々なガイドラインが公開されていますが、その中でもUIUX、ユーザビリティについて言及している日語限定の情報を集めてみました。 有志で翻訳されたガイドラインもあります。感謝です! Apple 超が付くほど有名なガイドラインです。これを抑えておけば他は必要ないかも? アップル ヒューマンインタフェースガイドライン iOS ヒューマン インターフェイス ガイドライン(PDF) iPadヒューマンインターフェイスガイド ライン(PDF) Google AndroidアプリはiPhoneと同じUIで良いんんじゃない?と思っている方は、開発す

  • » スマートフォンサイトにおけるカルーセル(フリック)の注意点 | Webnoborder

    皮肉をこめて「みんな大好きカルーセル」と言われるほど、スマートフォンサイトでは頻繁にカルーセルが使われています。(特にECサイト) 今回は、そんなカルーセルの特徴や注意点を改めてまとめてみました。 カルーセルの特徴 カルーセルとは、指を左右皮肉をこめて「みんな大好きカルーセル」と言われるほど、スマートフォンサイトでは頻繁にカルーセルが使われています。(特にECサイト) 今回は、そんなカルーセルの特徴や注意点を改めてまとめてみました。 カルーセルの特徴 カルーセルとは、指を左右にフリックすることで画像やテキストを切り替えることができ、情報を効率よく閲覧できるのが大きな特徴です。 と、言葉で説明してもイメージしにくいと思うので、実際に使われている例を紹介します。 メインビジュアル スマートフォンサイトでカルーセルを採用する場合、最も多く使われるパターンはメインビジュアルとして使われるパターンで

  • クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』

    今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。 サンプルをみてもらうとわかりやすいと思います。 →「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』サンプル」 レスポンシブ対応のドロップダウンメニューですので、スマホなどでも綺麗に表示されます。jQueryプラグインは使用していません。 【設置方法】 まずはcssファイルを作成します。ソースは以下の通りです。 CSS .top { background: #212121; color: #fff; position: absolute; left: 0; top: 0; right: 0; z-index: 2; overflow: hidden; } .drawer { -webkit-tr

    クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』
  • [jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle

    タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。