חווית משתמש

זמן השראה: ספריות דפוסי עיצוב ואנימציות למעצבים ומאפיינים

אלונה סנבירה | 1 בנובמבר 2018

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

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

אז מה זה בעצם דפוסי עיצוב (ux patterns)?

ההגדרה הקלאסית של דפוסי עיצוב

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

ובמילים פשוטות…

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

ולמה צריך את זה?

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

ישר ולעניין – מקורות לשימושכם

אתרים המרכזים דפוסי עיצוב:

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

interfaces.pro  הוא עוד אוסף מרשים של דפוסי עיצוב, הפעם ניתן לסנן לפי סוגי של עמודים ופיצ'רים נפוצים באתרי ווב.

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

באתר ui-patterns רוכזו עבורנו מאות דפוסים המקוטלגים לפרטי-פרטים למקסימום נוחות ודיוק.

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

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

באתר (UIDB (ui-database תוכלו למצוא דוגמאות של דפוסי עיצוב שנמצאים בשימוש כרגע באתרים חיים.

אתרים המרכזים אנימציות לממשקים:

capptivate היא ספריית גיטהאב שמכילה אנימציות (כולל הקוד!) שנמצאות בשימוש במגוון רחב של אפליקציות ואתרים, כולל כאלה של מובילי תעשיה, למשל airbnb.


codepen הוא אתר מבוסס תוכן גולשים שאליו מעלים קטעי קוד שלמים ומעוצבים בקוד פתוח, שניתן להשתמש בהם. ניתן לראות איך הקוד מתורגם לאנימציה או רכיב מעוצב ולשחק עם רכיבים שונים בו (html, css, js) כדי להתאים אותו בדיוק למה שאתם צריכים. מתאים בעיקר כשאתם צריכים משהו פשוט ונוח שנדרש רק התאמה קלה או המחשה למפתחים.

אתר appanimations מרכז ספריה של אנימציות להורדה ושימוש, ספציפיות לממשק iOS.

ב-uimovement תוכלו למצוא ספרית השראה לאנימציות של רכיבי ממשק, ועבור תשלום של 39$ לשנה תוכלו גם לקבל גישה להקלטות של user flows מתוך מגוון רחב של אפליקציות.

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

motion ux הוא מעין מגזין עמוס השראה שאוצר כתבות מתעדכנות על אנימציות ומושן לזמנים שבהם אתם כבר תקועים לגמרי.

בונוס: כתבות מומלצות על אנימציה לממשקים

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

 

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

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

2 תגובות על “זמן השראה: ספריות דפוסי עיצוב ואנימציות למעצבים ומאפיינים”

  1. Aw, this is the really nice post. Throughout thought My partner and i would like to devote composing like this additionally ?slacking along with precise effort to create a very good post?but exactly what do I only say?My spouse and i waste time alot and not at all appear to acquire one thing accomplished.

  2. רחלי הגיב:

    פוסט משובח ביותרררר!

כתיבת תגובה

האימייל לא יוצג באתר.

הוספת תגובה בפייסבוק