העדכון האחרון 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 ואז לפתוח את התיקייה המכילה את התמונות כדי להיות מגלגל וגרר אותם על הבד. הם נוספו באופן אוטומטי לפרויקט ואתה יכול לראות שהם על שכבות בודדות אם לחץ על הכרטיסייה שכבות. לאחר מכן בחרתי בכלי החץ (בחירה), בחרתי תמונה וגררתי אותה למיקום חדש כדי להוסיף רווח ביניהם. לאחר מכן בחרתי את כל התמונות ו לחץ על הלחצן 'הפץ אנכי' בסרגל הכלים. זה בחלוקה שווה את התמונות. השלב הבא הוא לבחור את כל התוכן כדי להיות גלילה וגם לחץ על הלחצן Container או בחר באפשרות Create Scroll Container מכפתור הקבוצה פופ למטה. לאחר יצירת המכל - תראה אותו בחלונית 'שכבות' - לחץ על המיכל וגרור את הידית התחתונה כלפי מעלה לתחתית הבד. לחץ על הלחצן תצוגה מקדימה בתחתית החלונית 'מאפיינים' וזה יפעיל חלון דפדפן. השתמש בגלגל הגלילה של העכבר כדי לגלול את התוכן. כדי לחזור לפרויקט שלך, לחץ על הלחצן ערוך בפינה השמאלית התחתונה של חלון הדפדפן. גלילה אופקית היא פשוט כמו להשיג. במקרה זה, גררנו סדרה של תמונות על הבד והכניסו אותן זו לזו. עם התמונות שנבחרו, ולאחר מכן לחץ על לחצן יישור למעלה כדי להבטיח שהם כולם מיושרים אחד עם השני. לאחר מכן החזקתי את מקש Shift ובחרו כל שכבה בחלונית 'שכבות'. עם התמונות שנבחרו, אני לחץ על הלחצן Container ו, בחלוניות מאפיינים, שנבחרו אופקית באזור ההתנהגויות. לאחר מכן בדקתי את הפרויקט בחלון דפדפן על ידי לחיצה על הלחצן תצוגה מקדימה. למרות שהראיתי כיצד ליצור גרסאות בודדות של גלילה אנכית ואופקית, כל עוד אתה שם את התוכן לגלילה במיכל, אתה יכול לקבל את המכולות האלה באזורים נפרדים של המסך. לדוגמה, דף אינטרנט יכול לגלילה אנכית תוכן בתפריט צד או גלילה אופקית תוכן בהצגת שקופיות באותו דף. למעשה, מכולה יכולה לכלול גלילה אנכית ואופקית עבור פריטים כגון בורר תמונות בעל תריסר תמונות ממוזערות. כדי ללמוד עוד על תכונה זו atomic.io לבדוק: כיצד ליצור גלילה אופקי תוכן אטומית
