המלצה | עיצוב תוכנה (גרפי)
-
מכיוון שבתקופה האחרונה מופיעות כאן בפורום תוכנות רבות בעקבות מהפכת ה-AI, וגם לאור השינויים שמבקשים לעשות בתוכנת אוצריא החביבה, חשבתי שאולי יהיה תועלת אם מישהו ישתף כאן כמה מילים על עיצוב גרפי של תוכנה שיהיה לתועלת הציבור.
לבינתיים ארשום כמה נקודות למחשבה:
פשטות ובהירות – כדאי לשמור על מינימום עומס ויזואלי. כפתורים, תפריטים ושדות קלט צריכים להיות ברורים וקריאים.
עקביות חזותית – שימוש באותו סגנון צבעים, גופנים ואייקונים בכל חלון ותפריט יוצר תחושת סדר ומקצועיות. צללים עדינים, מרווחים אחידים וכפתורים בגודל מתאים משפיעים משמעותית על חוויית המשתמש.הגישה האישית שלי:
א. אני מתחיל בבחינת המראה הכללי של תוכנה שאני אוהב – זה נותן תחושה לגבי צבעים, סגנון אלמנטים (מרובע או עגלגל וכו’) ועקרונות עיצוב כלליים.
ב. אני מתכנן את התוכנה בראש לא במובן של איך היא תיראה גרפית, אלא מבחינת תכנון וארגון – אילו פרדיגמות אני צריך ליישם, האם מדובר בתצורה צרה או רחבה, האם התוכנה קלילה או רבת פונקציות. לכל החלטה כזו יש השלכות מעשיות על אירגון התוכנה. ומאוד כדאי לקחת כמה דקות לחשוב על זה מראש.מי שיש לו ניסיון נוסף בתחום – אשמח מאוד לשמוע רעיונות ותובנות.
-
מכיוון שבתקופה האחרונה מופיעות כאן בפורום תוכנות רבות בעקבות מהפכת ה-AI, וגם לאור השינויים שמבקשים לעשות בתוכנת אוצריא החביבה, חשבתי שאולי יהיה תועלת אם מישהו ישתף כאן כמה מילים על עיצוב גרפי של תוכנה שיהיה לתועלת הציבור.
לבינתיים ארשום כמה נקודות למחשבה:
פשטות ובהירות – כדאי לשמור על מינימום עומס ויזואלי. כפתורים, תפריטים ושדות קלט צריכים להיות ברורים וקריאים.
עקביות חזותית – שימוש באותו סגנון צבעים, גופנים ואייקונים בכל חלון ותפריט יוצר תחושת סדר ומקצועיות. צללים עדינים, מרווחים אחידים וכפתורים בגודל מתאים משפיעים משמעותית על חוויית המשתמש.הגישה האישית שלי:
א. אני מתחיל בבחינת המראה הכללי של תוכנה שאני אוהב – זה נותן תחושה לגבי צבעים, סגנון אלמנטים (מרובע או עגלגל וכו’) ועקרונות עיצוב כלליים.
ב. אני מתכנן את התוכנה בראש לא במובן של איך היא תיראה גרפית, אלא מבחינת תכנון וארגון – אילו פרדיגמות אני צריך ליישם, האם מדובר בתצורה צרה או רחבה, האם התוכנה קלילה או רבת פונקציות. לכל החלטה כזו יש השלכות מעשיות על אירגון התוכנה. ומאוד כדאי לקחת כמה דקות לחשוב על זה מראש.מי שיש לו ניסיון נוסף בתחום – אשמח מאוד לשמוע רעיונות ותובנות.
@pcinfogmach
יש להוסיף פרט נוסף
שיש שני סוגי עיצובים לתוכנות
1] תוכנה 'חלונית' / 'שולחנית', [כגון: אופיס, אדובי, וכו' וכו', וכן בר אילן, אוצר החכמה, ועוד...]
2] תצוגה מודרנית - דמוית אפליקציה/דפדפן, [כגון: אוצריא, הזית... וכן גם רוב רובם של התוכנות שנוצרות ע"י AI...]לטעמי במקרים מסוימים כגון בתוכנות תורניות, או אלו שמיועדות גם לציבור ה'וותיק'
יש להעדיף מבנה ותצוגה של תוכנה 'חלונית' שזה יותר שמרני ומכובד
ורק בתוכנות שמטרתם להיות עדכניות ואופנתיות יש לעצבם כמו סוג 2. -
@pcinfogmach
יש להוסיף פרט נוסף
שיש שני סוגי עיצובים לתוכנות
1] תוכנה 'חלונית' / 'שולחנית', [כגון: אופיס, אדובי, וכו' וכו', וכן בר אילן, אוצר החכמה, ועוד...]
2] תצוגה מודרנית - דמוית אפליקציה/דפדפן, [כגון: אוצריא, הזית... וכן גם רוב רובם של התוכנות שנוצרות ע"י AI...]לטעמי במקרים מסוימים כגון בתוכנות תורניות, או אלו שמיועדות גם לציבור ה'וותיק'
יש להעדיף מבנה ותצוגה של תוכנה 'חלונית' שזה יותר שמרני ומכובד
ורק בתוכנות שמטרתם להיות עדכניות ואופנתיות יש לעצבם כמו סוג 2.@אלף-שין כתב בהמלצה | עיצוב תוכנה (גרפי):
יש להעדיף מבנה ותצוגה של תוכנה 'חלונית' שזה יותר שמרני ומכובד
זה לא ממש המקום, אבל אני חייב לצטט בהקשר הזה, וגם על הנידונים הארוכים של זה בעניין אוצריא:
כֹּ֚ל הַנִּקְרָ֣א בִשְׁמִ֔י וְלִכְבוֹדִ֖י בְּרָאתִ֑יו יְצַרְתִּ֖יו אַף־עֲשִׂיתִֽיו׃
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}