עיצוב תפריט ניווט מנצח רעיונות השראה

תפריט הניווט באתר הוא כמו סימן דרך ברחוב או בספרייה ברמה בקניון. אתה לא יכול להגיע ליעד שלך מבלי לדעת תחילה היכן אתה נמצא. כמו בחיים האמיתיים, ניווט בעיצוב אתרים הוא מאוד חשוב וממלא תפקיד מרכזי השימושיות של האתר, כמו גם חוויית המשתמש.

כיום אתה יכול לראות שפע של סוגים שונים של תפריטי ניווט עם עיצובים מעניינים, יצירתיים יוצאי דופן. אבל מה לגבי ניווט יעיל באתר, איך זה ייראה; איך זה ייראה?

היום אני רוצה לחלוק את התצפיות שלי ואת הידע על החשיבות של ניווט בעיצוב אתרים. אני יגלה כמה טיפים פשוטים שבהם ניתן להשתמש כדי לשפר את הניווט באתר שלך ואת השימושיות. יהיו גם כמה דוגמאות של תפריטים ניווט יעיל לתת לך מושג על איך לתכנן את העיצוב הבא שלך.

ארכיטקטורת מידע

תכנון ניווט צריך להתחיל עם ארכיטקטורת מידע. זה חיוני לשבת סיעור מוחות על ארכיטקטורת מידע של אתר אינטרנט. אתה צריך להבין איזה סוג של תכונות האתר מציע, מה הכי חשוב ומה ניתן להציב ברמות נמוכות בהיררכית המידע.

ארכיטקטורת המידע כוללת תכונות, משתמש הצרכים, sitemap, בדיקות wireframes. אתה יכול לקרוא עוד על ארכיטקטורת מידע במאמר על ידי קמרון צ 'פמן ארכיטקטורת מידע 101: טכניקות ושיטות מומלצות.

שימוש בטכנולוגיות המותאמות למשתמש

הימנעו משימוש ב- Flash, JavaScript, jQuery או כל דבר אחר אשר עלול לסכן את הגישה לאתר הניווט שלכם בבניית סרגל הניווט שלכם, או לפחות לוודא שהם מסוגלים להשפיל בצורה חיננית.

לקבלת הפניות נוספות על השפלה חיננית של, לבדוק את ההודעה על 10 שימושי Fallback שיטות CSS ו- Javascript.

השתמש במונחים פשוטים וידידותיים למשתמש

עדיף להשתמש פשוט, ברור ומונחים שקל להבין מאשר לשמור על תנאי התעשייה בלבד עבור תפריט הניווט שלך. כל קישור שלוקח משתמשים יותר משנייה או שתיים כדי להבין הוא כנראה לא מתאים לשימוש.

אם משתמש צריך ללחוץ על קישור כדי להבין מה הקישור מוביל אז זה יתרום לחוויית משתמש רע עבור המבקרים שלך.

דוגמאות

תנאי בתפריט הניווט של אתר האינטרנט של לריסה נס הם קל להבין משותף מספיק. משתמשים לא ימצאו את זה מבלבל כי הם כבר יש ניסיון עם תפריטים כמו זה.

הנה דוגמה טובה נוספת של תפריט ניווט נקי וברור באתר עם מונחים נפוצים בשימוש, ב csupport.

סוכנות Creative Eighty8Four משתמש במונח "התצוגה" אשר יכול להיות מבלבל עבור המבקרים. מונח זה עשוי להיות תיק או עבודה אבל זה לא ברור ולאורחים אין ברירה אלא ללחוץ כדי לבדוק את זה.

התאם את עיצוב הניווט

השתמש באותו מודל ניווט בכל הדפים שלך. זה מאוד חשוב כי ללא עיצוב עקבי, משתמש יכול באמת חושב שהוא נמצא באתר אחר. ודא כי אתה משתמש באותו מודל ניווט, כך שמשתמשים יכולים בקלות ללכת על האתר שלך מבלי לאבד.

Bluegg, כפי שמוצג להלן, משתמש בעיצוב ניווט פשוט ונקי שנשאר זהה בכל דפי המשנה. ההבדל היחיד הוא מחוון הצבע, המציג את הדף שהמבקר נמצא בו כרגע.

ציין היכן אתה נמצא

חשוב לתת למשתמש לדעת היכן הוא נמצא בכל עת. אתה יכול לעשות זאת על ידי שינוי הרקע של הקישור, צבע שם הדף או הפעל את הטקסט מודגש בתפריט הניווט כדי לעשות את זה שונה מאחרים.

אוסטין איסטסיידרס משתמש בצבע וברקע שונים כדי לציין את הדף שבו המשתמש נמצא. מחוון זה יכול גם לפעול כהשתנות עיצוב עדינה, לדוגמה באמצעות רקע ניווט שונה אשר יוצר את ההרגשה כי פריטי תפריט אחרים נמצאים לעומק.

כירורגית מדיה משתמש בצבע כהה יותר כמחוון עבור דף משנה נפתח. פשוט אבל יעיל.

השתמש מוסכמות אינטרנט

הכל על ניווט קל לשימוש באתר האינטרנט אינטואיטיבי. מוסכמות אינטרנט לעשות את זה הרבה יותר קל עבור מעצבים לעקוף את העיצובים שלהם. רוב המשתמשים היו לוחצים על הלוגו של האתר כדי לחזור לדף הבית, כך עיצוב הלוגו שלך לעשות את זה.

אם לא, אתה גורם להם להשקיע זמן ללמוד משהו חדש או במקרים מסוימים אי הנוחות על ידי לא לספק את מה שהם מצפים להיות מקובלת נורמות ניווט.

תוכל לקבל מידע נוסף על מוסכמות אינטרנט כאן:

10 עיצוב אתרים
אין להמציא מחדש את גלגל עיצוב האינטרנט
עיצוב עם אמנות אינטרנט

עיצוב להזריק מציב את הלוגו בפינה השמאלית העליונה אשר מתאים לאחד המוסכמות האינטרנט הנפוץ ביותר כיום.

יצירת אדמס משתמש באחד מוסכמות האינטרנט הנפוצות ביותר - הלוגו ממוקם בפינה השמאלית העליונה של האתר וקישורים לדף הבית.

בדוק אותו: הוסף צד שלישי

תמיד לבדוק את עיצוב הניווט שלך עם כל אדם שיש לו שימוש באינטרנט לפני. ייתכן שתרצה להביא אנשים שלא היו קשורים לתהליך העיצוב כדי לבדוק אותו. שים לב להעדפות שלהם כאשר הם מנווטים דרך האתר שלך ולנתח את הזמן שנדרש להם כדי למצוא את הדפים שהם היו lookign עבור.

לקבלת דיוק טוב יותר, לערב יותר אנשים, לאסוף את הנתונים, לנתח ולסכם את זה כדי להתאים טוב יותר. לעשות סקר לאחר הבדיקה אם יש צורך. אתה יכול לקבל כמה רעיונות בלתי צפויים קלט כי אחרת היה הולך unetected ללא בדיקה זו הבדיקה.

ספק הקשר

כדי להיות עקביים עם התוכן והניווט שלך, יש לספק הקשר מסוים עבור משתמשי האתר כדי למצוא במהירות את הדרוש להם. תוכל למקם סמלים קטנים הקשורים לתוכן שאליו אתה מקשר או לתיאורים קצרים כדי לתת סקירה כללית על מה הדף.

האופניים שלי משתמש בסמלים פשוטים כדי לתת למשתמשים מידע נוסף על מה שהם יכולים למצוא בדף משנה מסוים.

שרה פרמנטר משתמש כיתובים קצרים ו נחמד תחת ניווט הראשי כדי לספק קצת מידע על subpages הניווט הראשי הוא מקשר אל.

מטרות SEO

Google אוהבת ניווט עקבי. זה טוב יש ניווט עקבי לא רק למשתמשים להבין ולקבל את הרעיון של איך לנווט את האתר שלך, אלא גם עבור מנועי החיפוש לאינדקס האתר שלך.

רובוטים של מנועי החיפוש יסרקו דרך אתר האינטרנט שלך על מנת ליצור אינדקס של האתר שלך ולשים את הקישורים בדף תוצאות מנוע החיפוש. אם אתה רוצה להיות גלוי, לשים לב לעיצוב ניווט טוב ולקבל יותר תנועה.

סקריפטים ניווט חינם (CSS, ו- jQuery)

הנה רשימה קצרה של תפריטי הניווט האחרונים שאתה עשוי למצוא שימושי עבור הפרויקטים שלך. סקריפטים אלה יגרום למשתמש שלך expererience של המשתמש אפילו טוב יותר על ידי הוספת כמה תכונות נחמד עושה את זה תענוג להשתמש.

XML מונחה אנכית חדשות Scroller סקריפט באמצעות HTML ו- jQuery: vScroller