מכיוון שבתקופה האחרונה מופיעות כאן בפורום תוכנות רבות בעקבות מהפכת ה-AI, וגם לאור השינויים שמבקשים לעשות בתוכנת אוצריא החביבה, חשבתי שאולי יהיה תועלת אם מישהו ישתף כאן כמה מילים על עיצוב גרפי של תוכנה שיהיה לתועלת הציבור.
לבינתיים ארשום כמה נקודות למחשבה:
פשטות ובהירות – כדאי לשמור על מינימום עומס ויזואלי. כפתורים, תפריטים ושדות קלט צריכים להיות ברורים וקריאים.
עקביות חזותית – שימוש באותו סגנון צבעים, גופנים ואייקונים בכל חלון ותפריט יוצר תחושת סדר ומקצועיות. צללים עדינים, מרווחים אחידים וכפתורים בגודל מתאים משפיעים משמעותית על חוויית המשתמש.
הגישה האישית שלי:
א. אני מתחיל בבחינת המראה הכללי של תוכנה שאני אוהב – זה נותן תחושה לגבי צבעים, סגנון אלמנטים (מרובע או עגלגל וכו’) ועקרונות עיצוב כלליים.
ב. אני מתכנן את התוכנה בראש לא במובן של איך היא תיראה גרפית, אלא מבחינת תכנון וארגון – אילו פרדיגמות אני צריך ליישם, האם מדובר בתצורה צרה או רחבה, האם התוכנה קלילה או רבת פונקציות. לכל החלטה כזו יש השלכות מעשיות על אירגון התוכנה. ומאוד כדאי לקחת כמה דקות לחשוב על זה מראש.
מי שיש לו ניסיון נוסף בתחום – אשמח מאוד לשמוע רעיונות ותובנות.
 { 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}