web-dev-qa-db-ja.com

ナビゲーションバー、リンクとボタンの組み合わせ

2つの機能を持つナビゲーションメニューを作成しようとしています... Webサイトの「ページ」ナビゲーションリンクと「アクション」ボタン...このような画像 http://skitch.com/christieday/ gg2sr/dribbble-hunter-vision-nav-by-jeremiah-shaw

ナビゲーションには、適切なページへのリンクと、「ログアクティビティ」と「ルート作成」の2つのボタンがあります。

もちろん、ボタンの動作はナビゲーションとは異なります。これらは、サイトでの行動を促す主要な要素です。 「ログ」ボタンは同じページにフォームを開き、「ルートを作成」ボタンはページを離れます。

ユーザーを混乱させることなくリンクとボタンを組み合わせる方法があるのか​​、それを回避する適切な方法があるのか​​と思います。

お知らせ下さい。

4
Christie Day

あなたは本当にあなた自身の質問に答えました。それらを区別する方法は、ナビゲーションにテキストを使用し、行動を促すフレーズにボタンを使用することです。多くのサイトがこれを行っており(これを含む)、誰もが混乱するのを見たことがありません。

テキストがナビゲーションであることを人々が確信していない場合は、小さなマーカーまたは矢印を使用して現在のページを表示します。必須ではありませんが、見つけやすさは向上します。

enter image description here

ナビゲーションの現在のページにブロックを配置して、そのページをマークしないようにしてください。これにより、ページがボタンのように見えます。ボタンに似ているが、ボタンではないナビゲーションには何も配置しないことに注意する必要があります。以下のナビゲーションは、ナビゲーションに行動を促すフレーズのボタンがある場合に使用しないものの例です。行動を促すフレーズなしで使用する場合は、優れたナビゲーションバーです。

enter image description here

2
JohnGB

通常、少なくとも設計方法に関しては、ボタンの視覚的処理がテキストリンクとは異なる何かを意味することを示唆する、何らかの種類の凡例があります。たとえば、フォームボタンが混在していない場合、通常、ボタンはアクションを示し、テキストリンクはナビゲーションを示します。

なぜそれらを視覚的に混ぜ合わせますか? UIで同じ水平面または垂直面に属していると感じても、それらを分離しませんか?テキストリンクはすべて右に配置され、次にボタンは左に配置されます...さかのぼると、私がずっと以前に学んだ経験則として、私はまだ正当化されていると思いますが、ナビゲーションとコントロールを別々に保つことです。

0
jameswanless

クリスティ、あなたはすでに正しい方向に進んでいますが、2つのアクションボタンを含むグローバルヘッダーの別の例を確認したい場合は、 English National Opera サイトをご覧ください。

enter image description here

0
Rob