タグ

UIとナビゲーションに関するjed_leeのブックマーク (4)

  • UIデザインの参考にしたい!ナビメニュー用HTML/CSSスニペット40個まとめ

    ウェブサイトやブログにおいて、ユーザーがもっとも操作するインターフェースのひとつは、ナビゲーションメニューです。きちんと設置することで、サイトを構成する各コンテンツへとユーザーを移動でき、目次のような役割として活用できます。 今回は操作性にこだわった、最新のナビメニュー用HTML/CSSスニペットをまとめてご紹介します。これらのコードを利用して、よりユーザーの注目を集める、独自のナビゲーションを実装してみましょう。 詳細は以下から。 未来のナビメニューはこれだ!参考にしたいHTML/CSSスニペットまとめ Spinny Header Menu 各種コンテンツをクリックすると、ヘッダー部分のロゴが回転します。 See the Pen Spinny Header Menu by Josh Nichols (@MrBlank) on CodePen. Fly Out Navigation 左サイ

    UIデザインの参考にしたい!ナビメニュー用HTML/CSSスニペット40個まとめ
    jed_lee
    jed_lee 2016/05/12
    UIデザインの参考になる、アニメーション中心のナビゲーションスニペットまとめ
  • 君たちはそんなにハンバーガーメニューが好きなのかね?

    はじめに 稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri

    君たちはそんなにハンバーガーメニューが好きなのかね?
    jed_lee
    jed_lee 2016/04/18
    うーむ。コメント含め言いたいことはよく分かる。そしてサイトやアプリ内の元々の目的が絞られていさえすればUITabBarでの解決も期待できる気もする。規模の大きいところになるとUITabBar+ハンバーガーが必要になってしま
  • UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ

    前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい(動き)、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない

    UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
    jed_lee
    jed_lee 2014/08/14
    ナビゲーションの種類まとめ。極端に秀逸な例や効果の高い例を挙げているわけではないが、種類やケースとしてパターンが豊富なので、覚えておくぐらいには把握しておくと便利かもしれない。
  • スペースを活用!メガメニューを使用した国内参考サイトまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーの藤田です。気候が暖かくなってきたせいなのか、最近ペットとして飼っているが私の近くに寄り沿って来なくなり、肌恋しい今日この頃です。 さて、今回はスペースを十分に使用することで、ユーザビリティを向上させ、同時に私の心の隙間までも綺麗に埋めてくれる「メガメニュー」を使用したサイトをまとめてみました。 ここ数年、目にする機会が増えた一方で、いざ自身でメガメニューのデザインを行おうと思うと、それらをまとめた参考サイト(特に国内サイト)が極端に少なくて困った、なんて経験をお持ちの方も多いのではないでしょうか? かく言う私もその一人で、自身の備忘録も兼ね、国内サイトで「メガメニュー」を使用したサイトをまとめてみました。 独学でつまずいていませんか? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめ

    スペースを活用!メガメニューを使用した国内参考サイトまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    jed_lee
    jed_lee 2014/06/26
    メガメニューを活用した国内参考サイトまとめ。UI設計やトップ改善の活路になるかもしれない。
  • 1