שיעור שמיני : עיצוב תפריט
לכל אפליקציה יש תפריט, פעם התפריט למעלה, פעם למטה, לרוב נפתח מהצדדים או מלמעלה. איך נדע איזה תפריט לעשות באפליקציה? מה חשוב לדעת שעושים עיצוב לתפריט? כל השאלות האלו אני יענה וגם יצרף אוסף עיצובים להשראות שיעזור לכם לעצב תפריט מושלם.
תפריטים השונים במובייל לא נקראים תפריטים כלל, יש לנו את ה Navigation Bar שזה הבר ניווט עליון (ממנו יכול להיפתח תפריט), ויש את ה Toolbar שהוא תפריט שנמצא צמוד לתחתית של האפליקציה. בואו נדבר על התפריטים הללו בנפרד ומה שימוש של כל אחד מהם.
Navigation Bar
הנוויגשן בר הוא התפריט העליון באפליקציה, בגודל שלו יהיה בין 16-18 מילימטר כסטנדרט ויכול להיות גדול יותר או אפילו
כפול. בתפריט עליון לרוב שמים אפשרויות שלא מעבירות את המשתמשים דף באופן מיידי. לדוגמה חיפוש, תפריט הגדרות או פתיחת תפריט לינקים, אפשר לשים לוגו או את שם הדף שהמשתמש נמצא בו כעת וגם אפשר לשים כפתור חזור ועוד... לרוב התפריט ישמש אתכן לאפשרויות ראשיות בסיסיות כפי שתיארתי וכמוכן לניווט תוך אפליקציה כמו באיזה דף המשתמש נמצא, לחזור אחורה ועוד...
Toolbar
תפריט האפשרויות יהיה לרוב צמוד לתחתית האפליקציה, התפריט הזה מאפשר לי לגשת לפונקציות ואפשרויות שהם משמעותיות לשימוש ולכן הם יהיו שם בצורה בולט ונגישה לאצבעות. לרוב ישנה את התצוגה הראשית במרכז המסך. גודל תפריט האפשרויות יהיה בין 16-18 מילימטר כגודל סטנדרטי, כמוכן שאפשר לעשות תפריטים גדולים יותר או תפריטים שנפתחים מכל כפתור ועוד...
כל נושא התפריטים השונים הוא בסיסי, אפשר לראות תפריטים שונים כמעט בכל אפליקציה ואפשר לראות שוני בין התפריטים באפליקציות לאנדרואיד ולאייפון. לרוב באייפון יהיה עוד אפשרויות כי אין באייפון כפתור שפותח הגדרות או כפתור חזרה אחורה.
אפשר לראות שגוגל נתנה תיאורים שונים לתפריטים באנדרואיד אז בשביל שיהיה לכם גם שתדאו שיש את התיאורים הללו אני מצרך כאן.
1. אקשן בר עליון
2. אקשן בר
3. בר תחתון
את ההסבר המלא תוכלו לראות באתר של גוגל בלינק כאן
השראות ואוסף קבצים גרפיים חינמיים של תפריטים
אספתי עבורכם קבי פוטושופ להורדה שמכילים תפריטים. תוכלו להוריד אותם ולשחק עם התפריטים השונים וללמוד כיצד לעצב תפריט מושלם.
http://www.webdesigndev.com/photoshop/unique-navigation-menu-free-psd
http://www.freepik.com/free-photos-vectors/navigation-bar
http://www.getappninja.com/blog/7-free-ios-app-backgrounds-nav-tab-bars
http://uxmag.com/articles/adapting-ui-to-ios-7-the-side-menu
http://www.hongkiat.com/blog/webapp-design-resources/
http://webdesignledger.com/freebies/40-new-dribbble-freebies-published-in-2012
http://www.teehanlax.com/tools/iphone/
http://www.graphicsfuel.com/category/ui-mobile-apps/
http://freebiesbug.com/psd-freebies/app-design/
http://www.webdesignerhub.com/free-psds-for-app-design-mockups/
http://www.pixeden.com/mobile-apps
יש לך מה להגיד? אשמח לתגובה