it-swarm.com.de

Was ist die beste Vorgehensweise zum Entwerfen einer dauerhaften Navigation (oder einer Navigation, die sichtbar und fixiert bleibt, wenn der Benutzer einen Bildlauf durchführt)?

Suchen Sie nach Best Practices beim Entwerfen einer dauerhaften Navigation wie folgt: NFL (die Ergebnisse im Banner) http://www.nfl.com/

Facebooks blauer Header http://www.facebook.com/

Creatticas-Header und linke Schaltflächen http://creattica.com/

3
Christie Day

Ich habe keine formellen Aufzeichnungen zu dieser Konvention gesehen, und ich denke, dass "Best Practices" angesichts der Vielfalt der Layouts und Ziele der Benutzeroberfläche etwas zweifelhaft sind, aber nachdem ich kürzlich eine davon entworfen habe, würde ich einige anbieten Zeiger :

  • Halten Sie die Navigation kompakt. Die permanente Navigation beansprucht Immobilien und stiehlt diesen Speicherplatz dauerhaft dem Inhalt. In unserem Fall haben wir den Header sehr subtil komprimiert, da er das Ansichtsfenster stößt und unnötige Elemente ausblendet. Ihr Beispiel bei Creattica hat bereits einen ziemlich kompakten Header, daher war dies nicht erforderlich
  • Übergänge subtil machen. Wenn Sie beim Scrollen nach unten Elemente in der Navigation ändern, versuchen Sie, subtil darüber zu sein - a Ein gelungener Übergang sollte kaum wahrnehmbar sein. TechCrunch hat einen sehr lauten Übergang, den ich ablenke - hier ist es im unangenehmsten Moment:

enter image description here

Beachten Sie, dass das Logo in diesem Moment ein Chaos ist. Sie haben ein sehr kompaktes Header-Navi, sobald der klobige Übergang vorbei ist.

  • Wenn dies für Sie relevant ist, stellen Sie sicher, dass es sich ordnungsgemäß verschlechtert. In unserem Fall mussten wir bis auf IE6 unterstützen, das keine position: fixed CSS-Unterstützung bietet, und einen Javascript-Shim benötigen, der Dies erwies sich wiederum als zu anstrengend für das Rendern und verursachte ein Flashen. Daher haben wir diese Funktion nur für Browser ohne dieses CSS-Attribut deaktiviert.
4
peteorpeter