من یک توسعه دهنده هستم، نه یک طراح، اما نظرات قوی در مورد UI دارم. من در حین کار در یک کتابخانه عمومی به هزاران کاربر جدید رایانه کمک کردم. من یک مقدمه بسیار غیررسمی با دنیای UI و UX، قابلیت دسترسی و رفتارهای مورد انتظار داشتم. همین تعاملات بود که من را به سمت مهندس نرم افزار سوق داد. من با طراحانی کار می کنم که تجربیات و تحصیلات خود را در زمینه UI دارند. گاهی اوقات من طرح ها را دوست ندارم، و در حالی که اغلب طرح های آنها را به واقعیت تبدیل می کنم، فکر می کردم جالب است که کشف کنم که چگونه چیزها را به جای آن طراحی می کردم.
توجه: تمام تصاویر UI در اینجا با Penpot ایجاد شده اند. این مثال‌ها ساده‌شده، و اغلب کاملاً بی‌نقص و دور از پیکسل کامل هستند، اما امیدواریم که به اصل مطلب برسند.
معین
طراحي كه با او كار مي كنم مدال هاي زيادي را طراحي مي كند. من می دانم که مردم نظرات زیادی در مورد مدال دارند، اما این یک بحث برای پست دیگری است.
من اخیراً روی یک ویژگی جدول زمانی جدید برای یک برنامه SASS کار کردم. یک کاربر ممکن است چندین سایت داشته باشد که آنها را مدیریت می کند و جدول زمانی رویدادهای کاربر را به ترتیب زمانی نشان می دهد. هر رویداد خط زمانی دارای یک دکمه “مشاهده بیشتر” است که یک مدال را باز می کند.
این طرح اصلی است. این دارای یک عنوان با رویداد و لیستی از هر سایتی است که این رویداد را انجام داده است. هر دو نوار پیشرفت نامشخص و ثابت، نشان های وضعیت (آنها دکمه نیستند)، لیستی از خطاها و اسکرول عمودی زمانی که بیش از چند سایت وجود دارد وجود دارد.
من بلافاصله در مورد این مدال فکر کردم. این یک مدال عظیم با عناصر زیادی برای تفسیر است. ترکیبی از حرکت، رنگ ها و طومار عمودی از نظر بصری برای من تحسین برانگیز بود. یک مودال برای نمایش یک لیست طولانی از سایت ها بسیار کوچک به نظر می رسید.
ایده مودال من
به جای ارائه تمام جزئیات به کاربر، ترجیح می دهم یک نمای کلی به او ارائه دهم و سپس برای جزئیات بیشتر به صفحه ای پیوند دهم.
انتظار دارم دکمه “مشاهده جزئیات سایت” مرا به یک صفحه کامل برساند. در واقع، مودال را می توان با هم حذف کرد و تعامل اصلی کاربر می تواند آنها را مستقیماً به این صفحه ببرد.
چند چیز وجود دارد که من بین لیست اصلی و این صفحه جدید تغییر دادم.
- من فقط زمانی که رویداد در حال وقوع است نوار پیشرفت را نمایش می دهم. داشتن هر دو نوار پیشرفت کامل و نشان وضعیت اضافی است.
- به جای نمایش همه خطاها، آنها را به پشت دکمه جابجایی منتقل کردم. هنگامی که دکمه کلیک می شود، جزئیات خطا گسترش می یابد.
- من یک خط بین هر سایت اضافه کردم تا به راحتی بین سایت ها تشخیص داده شود.
برخی از ایده های دیگری که برای این صفحه دارم شامل اضافه کردن دکمه ای برای مشاهده سایت (در صورتی که به روز رسانی چیزی را خراب کند) یا رفتن به صفحه مدیریت اصلی است. نمی‌توانستم مکان خوبی برای آن دکمه‌ها انتخاب کنم، بنابراین آنها را از نمونه حذف کردم.
اندیشه ها؟
بنابراین، همه شما چه فکر می کنید؟ دوستان توسعه دهندگان، آیا تا به حال احساس می کنید که یک طراحی حرفه ای کاملاً مورد توجه قرار نمی گیرد؟ طراحان، آیا دوست دارید توسعه دهندگان در خط خود بمانند؟
تا همین اواخر، من اجزای رابط کاربری و صفحه‌هایی را ایجاد می‌کردم که بدون هیچ سوالی با طراحی مطابقت داشتند. با این حال، اخیراً بحث بین طراحی و توسعه دهنده بیشتر مورد بحث بوده است. این هم برای طراحی و هم برای توسعه خوب کار کرده است. ما می توانیم دیدگاه های متفاوتی را از دیدگاه خود ببینیم و چالش هایی را که ناآگاهانه برای یکدیگر ایجاد می کنیم، کشف کنیم. همه ما برای یک هدف کار می کنیم، بنابراین منطقی است که در این مسیر کمی بیشتر با هم همکاری کنیم.
