タグ

ブックマーク / baigie.me (3)

  • UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ

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

    UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
    ir_takt
    ir_takt 2016/08/07
    ナビゲーションUI
  • ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ

    私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム(以下、WF)を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では?

    ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
  • アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付) | ベイジの社長ブログ

    スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。(以降、両者をガイドラインと略します) スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14%しかなく(comScore調査/2014)、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは

    アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付) | ベイジの社長ブログ
  • 1