01 מתוך 03
העדכון האחרון Atomic.io כולל מכולות לגלילה
כמה חודשים אחורה הראיתי איך atomic.io יכול לשמש תנועה אב טיפוס . אחת מנקודות המפתח שעשיתי ביצירה הייתה "הצגת תנועה" במקום להשאיר אותה לדמיון של הלקוח או של הקבוצה. למעשה, זה הפך להיות כל כך קריטי, כי קטגוריה חדשה לגמרי של UX / UI כלים מופיע על התמונה. הם כוללים - Apple Keynote, Adobe אדג 'של הנפש, After Effects ו UXPin , עד כמה שם. הילד החדש על הבלוק הוא Atomic.io אשר היה בטא פתוח כאשר כתבתי לראשונה על המוצר.
הדבר המסודר על בטאס פתוח הוא לתת ליצרן התוכנה את ההזדמנות לאסוף משוב מהמשתמשים על תכונה תכונה, כולל תכונות חסרות, ולאחר מכן להוסיף אותם ליישום יש להם נבדק לפני שחרור מסחרי. במקרה של אטומית, תכונה אחת אני באמת החמיץ את היכולת לגלול תוכן אנכית או אופקית. זה יכול לכלול דברים כגון כרטיסים, הצגת שקופיות או כמעט כל דבר שמשתמש היה מחליק או גרור בתוך הגבולות של ממשק של אפליקציה או אתר.
זה חייב להיות נושא הרבה משתמשים ביקשו כי מכולות לגלילה היו רק הציג את האפליקציה החודש, אני חייב להודות, יצירת תוכן לגלילה אב טיפוס הוא פשוט מתים כדי לאפשר.
הנה איך ...
02 מתוך 03
כיצד ליצור אנכי גלילה תוכן אטומית
יהיה עליך להירשם לראשונה ל -30 יום ניסיון חינם, בסוף אותה תקופה, יוצגו לך עם שלוש תוכניות התמחור.
הדבר הראשון שעליך לדעת הוא כל העבודה שתעשה בדפדפן והאפליקציה מכוונת אך ורק ל- Google Chrome. לאחר הכניסה, תועבר לדף הפרויקטים . כדי לפתוח את היישום, לחץ על הלחצן פרוייקט חדש .
כאשר יופיע ממשק תראה מספר מוגבל של כלים, את היכולת להוסיף דפים ושכבות לדפים, משטח היצירה, בצד ימין, לוח תכונות רגיש-הקשר.
בדוגמה זו, התחלתי עם iPhone 5 מראש כי הוא 320 x 568.I ואז לפתוח את התיקייה המכילה את התמונות כדי להיות מגלגל וגרר אותם על הבד. הם נוספו באופן אוטומטי לפרויקט ואתה יכול לראות אותם על שכבות בודדות אם תלחץ על הכרטיסייה שכבות . לאחר מכן בחרתי בכלי החץ (בחירה), בחרתי תמונה וגררתי אותה למיקום חדש כדי להוסיף רווח ביניהם. לאחר מכן בחרתי את כל התמונות ולחץ על הלחצן 'הפץ אנכי' בסרגל הכלים. זה בחלוקה שווה את התמונות.
השלב הבא הוא לבחור את כל התוכן לגלול וללחוץ על הלחצן 'מכולה' או לבחור 'צור מגילת גלילה' מכפתור 'קבוצה' . לאחר יצירת המכל - תראה אותו בחלונית 'שכבות' - לחץ על המיכל וגרור את הידית התחתונה כלפי מעלה לתחתית הבד . לחץ על הלחצן תצוגה מקדימה בתחתית החלונית 'מאפיינים' וזה יפעיל חלון דפדפן. השתמש בגלגל הגלילה של העכבר כדי לגלול את התוכן. כדי לחזור לפרויקט שלך, לחץ על הלחצן ערוך בפינה השמאלית התחתונה של חלון הדפדפן.
03 מתוך 03
כיצד ליצור גלילה אופקי תוכן אטומית
גלילה אופקית היא פשוט כמו להשיג.
במקרה זה, גררנו סדרה של תמונות על הבד והכניסו אותן זו לזו. עם התמונות שנבחרו, ולאחר מכן לחץ על לחצן יישור למעלה כדי להבטיח שהם כולם מיושרים אחד עם השני.
לאחר מכן החזקתי את מקש Shift ובחרו כל שכבה בחלונית 'שכבות'. עם התמונות שנבחרו, לחצתי על כפתור מכולה , בחלוניות מאפיינים, נבחר אופקית באזור ההתנהגויות.
לאחר מכן בדקתי את הפרויקט בחלון דפדפן על ידי לחיצה על הלחצן תצוגה מקדימה.
למרות שהראיתי כיצד ליצור גרסאות בודדות של גלילה אנכית ואופקית, כל עוד אתה שם את התוכן לגלילה במיכל, אתה יכול לקבל את המכולות האלה באזורים נפרדים של המסך. לדוגמה, דף אינטרנט יכול לגלילה אנכית תוכן בתפריט צד או גלילה אופקית תוכן בהצגת שקופיות באותו דף. למעשה, מכולה יכולה לכלול גלילה אנכית ואופקית עבור פריטים כגון בורר תמונות בעל תריסר תמונות ממוזערות.
כדי ללמוד עוד על תכונה זו atomic.io לבדוק:
- הודעת הבלוג
- גלילה מיכל הדרכה
- מסכה באמצעות מיכלים
- פתרון בעיות מיכלי גלילה