✨ ۵ تا قانون و نکته رو میخوام بهت بگم که اگه uiux بلد نیستی، دونستنشون بهت خیلی کمک میکنه.
🟢 اول اینو بگم که برنامهنویس خفن فقط کد تمیز نمیزنه، بلکه حواسش به تجربه کاربری هم هست!
یعنی براش مهمه چیزی که داره میسازه و توسعه میده، چقدر از دید کاربر بهینه ست و چقدر میتونه به کاربر کمک کنه. این موضوع رو معمولا طراحان محصول و طراحان uiux بررسی میکنن و در اختیار تیم توسعه میذارن ولی اگه دیزاینر توی تیم ندارید یا روی پروژه شخصی کار میکنید، این ۵ تا نکته رو باید رعایت کنید تا سطح کارتون چند پله بره بالاتر. ( بعدا ازم تشکر میکنی مهندس ! )
۱. فضای سفید (White Space) دوست شماست:
انقد استرس نگیرید که یه بخشی از صفحه هنوز سفیده و پر نشده !
نترسید که صفحه رو خالی بذارید!
بلکه از این فضای سفید ها استفاده کنید تا فاصله ایجاد بشه. فاصله دادن بین المانها باعث میشه چشم کاربر استراحت کنه و محتوا راحتتر خونده بشه. (margin و padding رو هم دست کم نگیرید).
فضای سفید، فضای هدر رفته نیست؛ یک ابزار بهینه سازی برای مغز کاربره
۲. سلسله مراتب بصری (Visual Hierarchy):
سایت یا اپلیکیشن و یا هرمحصولی که تولید میکنید و توسعه میدید، باید یه ساختار پیوسته و مشخصی داشته باشه. یعنی چی؟ به عنوان مثال کاربر وقتی میاد وارد فضای سایت شما میشه باید با نگاه کردن بفهمه سایت راجب چیه، تیترها کدوما هستن و دکمه های مهم کجان. به عبارتی دیگر، مهمترین چیز باید بزرگترین و پررنگترین المان باشه و بعدش به ترتیب اولویت و اهمیت، المان های دیگر به چشم بیان.
کاربر از فکر کردن زیاد و اینکه فکرش درگیر شه خوشش نمیاد؛ سلسله مراتب بصری درست یعنی کاربر برای فهمیدن و کارکردن با محصول شما نیاز به فکر نداشته باشه.
۳. بازخورد به کاربر (Feedback):
هیچ کلیکی نباید بیپاسخ بمونه. کاربر رو در حالت بلاتکلیفی نذارید!
لودینگهایی که Progression دارن ( یعنی یه دایره چرخان معمولی نیستن؛ اغلب وضعیت لودینگ رو به صورت درصد نشون میدن یا با یه متن کاربر رو به صبر کردن تشویق میکنن )، تغییر رنگ دکمه موقع هاور (Hover) و پیامهای موفقیت/خطا باعث میشه کاربر حس کنه سیستم زندهست و کار میکنه.
بلاتکلیفی برای کاربر، محکم ترین دلیل برای ترک سایت یا اپلیکیشن شماست
۴. تایپوگرافی خوانا:
فونتهای عجیب و غریب رو فراموش کنید. به هیچ وجه از فونت های کاستوم و طرحدار عجیب استفاده نکنید مگر در شرایط خیلی خاص و به مقدار خیلی کم ( مثلا برای طرح دادن به تیتر صفحه Splash موبایل ). از فونت های خوب و خوانا مثل ایران یکان، ایران سنس، استعداد، وزیر و صمیم و... استفاده کنید در عوض.
کنتراست رنگ متن با پسزمینه رو چک کنید (متن خاکستری روشن روی سفید یکی از موارد اشتباهه). متن و پس زمینه باید کنتراست کامل مخالف همدیگه رو داشته باشن تا هم پس زمینه به چشم بیاد هم متن قابل خوندن باشه. فاصله بین خطوط (line-height) رو معمولاً روی ۱.۵ تنظیم کنید و در شرایط خاص میتونید این رقمو عوض کنید.
محصول شما باید خوانده شود تا مخاطب جذب شود
۵. قانون ۶۰-۳۰-۱۰ در رنگبندی:
این یکی از قوانین قراردادی طراحان هست و ترکیب خروجی این فرمول در 99 درصد مواقع یک خروجی ایده آل و مناسبه. ۶۰٪ رنگ اصلی (معمولا خنثی هست)، ۳۰٪ رنگ ثانویه و ۱۰٪ رنگ تاکید (Accent color) برای دکمهها و Call to Actionها. حالا میبینید که چرا اسمش رنگ تاکیده؛ چون کارش اینه توجه کاربرو جلب کنه و وقتی بیش از حد از این رنگ استفاده میکنید ( چیزی که توی خیلی از سایت ها و اپلیکیشن ها باهاش مواجه هستیم ) باعث میشه میزان تاثیرگذاری اون رنگ کم و کمتر بشه.
نکته پایانی: همیشه خودتون رو جای کاربری بذارید که بار اوله سایت یا اپلیکیشن شما رو میبینه.
#فلاتر #برنامه_نویسی #uiux #flutter #رابط_کاربری #برنامه_نویس
