tejariapp-new-logotejariapp-new-logotejariapp-new-logotejariapp-new-logo
  • صفحه اصلی
  • پروژه ها
    • پروژه طراحی سایت
    • پروژه های اندروید
    • پروژه های تحت ویندوز
    • UI & UX
    • ربات تلگرام
  • سفارش پروژه
    • انجام پروژه اندروید (Android)
    • طراحی و ساخت اپلیکیشن موبایل
    • انجام پروژه طراحی سایت با php
    • انجام پروژه طراحی سایت با Asp.net
    • انجام پروژه سی شارپ
    • فرم سفارش پروژه
  • مدرسه ی تجاری اپ
    • طراحی سایت
    • اندروید
    • سی شارپ
    • آموزش پایگاه داده
    • برنامه های کاربردی
  • لینک های مفید
    • پرداخت آنلاین
    • درباره تجاری اپ
    • تماس با ما
استخدام برنامه نویس متلب
سفارش پروژه
✕
            هیچ نتیجه ای یافت نشدمشاهده همه نتایج

            قوانین یا اصول مهم برای طراحی رابط کاربری یا UI های جذاب – قسمت دوم

            • صفحه نخست
            • مدرسه ی تجاری اپ آموزش UI و UX
            • قوانین یا اصول مهم برای طراحی رابط کاربری یا UI های جذاب – قسمت دوم
            قوانین یا اصول مهم برای طراحی و پیاده سازی UI های جذاب - قسمت اول
            قوانین یا اصول مهم برای طراحی و پیاده سازی UI های جذاب – قسمت اول
            9 آذر 1399
            قوانین یا اصول مهم برای طراحی UI های جذاب – قسمت سوم
            قوانین یا اصول مهم برای طراحی UI های جذاب – قسمت سوم
            27 آذر 1399
            منتشر شده توسط مهندس داودی
            قوانین یا اصول مهم برای طراحی رابط کاربری یا UI های جذاب – قسمت دوم

            قوانین یا اصول مهم برای طراحی رابط کاربری یا UI های جذاب – قسمت دوم

            در ادامه قوانین یا اصول مهم برای طراحی و پیاده سازی UI های جذاب – قسمت اول در این پست از تجاری اپ ما به بررسی دو قانون یا اصول طراحی رابط کاربری مهم دیگر یعنی روش های قرار دادن متن بر روی عکس و دو برابر کردن فاصله، در طراحی رابط کاربری (UI) های جذاب می پردازیم.

            قوانین یا اصول مهم برای طراحی رابط کاربری یا UI های جذاب

            قانون یا اصول سوم برای طراحی UI های جذاب: – فاصله (فضای سفید) را دو برابر کنید

            برای اینکه UI خود را طراحی شده نمایش دهید، میزان زیادی فاصله ایجاد کنید.

            در قانون دوم از پست پیشین تجاری اپ گفتیم که قانون B&WF شما را ملزم به فکر کردن درباره فواصل و پیاده سازی یا طراحی UI بدون رنگ می کند و چقدر این تکنیک می تواند مفید باشد.هم اکنون زمان آن است که درباره فواصل در لایه ها بطور مفصل توضیح دهیم.

            بی شک اگر قبلا کدهای خام HTML را زده باشید صفحه زیر برا شما بسیار آشناست

            قوانین طراحی رابط کاربری
            قوانین طراحی رابط کاربری

            همانطور که می بینید تمامی عناصر در هم ریخته شده و بدون هیچ فاصله ای پیاده شدند. پاراگراف ها فاصله دارند اما نه خیلی زیاد، فاصله بین خطوط عملا وجود ندارد،‌ پاراگراف تا انتهای صفحه کش می آید حال چه 100px باشد و چه 10000px که این اصلا خوب نیست.

            از نظر زیبایی شناسی این طرح افتضاح است و اگر می خواهید UI شما زیبا و طراحی شده باشد، باید مقدار زیادی فاصله ایجاد کنید. (گاهی اوقات بیش از حد معمول)

            فضای سفید، HTML، CSS

            اگر از CSS استفاده می کنید قطعا می دانید که CSS به طور پیش فرض از فضای سفید استفاده نمی کند، و این زمان مناسبی است که شما این عادت اشتباه را کنار بگذارید و به فاصله به عنوان عنصر پیش فرض صفحه خود نگاه کنید.

            همه چیز با فضای سفید شروع می شود تا زمانی که شما یک عنصر دیگر را به آن اضافه کنید.

            به رابط کاربری یا UI وب سایت موزیک زیر دقت کنید

            قانون های طراحی UI
            قانون های طراحی UI

            همچنین بخوانید: حذف تمام فاصله ها از رشته با جی کوئری JQuery

            به منو سمت چپ دقت کنید

            قوانین طراحی رابط کاربری
            قوانین طراحی رابط کاربری

            فاصله عمودی بین آیتم های منو، دقیقا دو برابر ارتفاع خود متن آیتم است! یا حتی متن PLAYLIST که 15px با خط جدا کننده پایین فاصله دارد و این میزان فاصله بیشتر از ارتفاع cap height است.

            قانون های طراحی UI
            قانون های طراحی UI

            به تصویر فوق توجه کنید و می بینید آیتم های منو سمت راست نیز فاصله چشم گیری دارند.

            فاصله زیادی نیز در nav bar بالا وجود دارد. متن Search all music درواقع 20 درصد از ارتفاع را به خود اختصاص داده است و آیکن ها هم به همین ترتیب.

            در نتیجه استفاده زیاد از فاصله چنین خروجی مرتب و تمیزی را به شما می دهد که از نظر زیبایی شناسی نیز این قانون صدق می کند. پس از فواصل غافل نشوید.

            استفاده از فواصل بصورت سخاوتمندانه حتی می تواند برخی از کثیف ترین رابط کاربری ها را به نوعی جذاب و ساده جلوه دهد. برای مثال طرح هایی مانند انجمن ها

            قوانین طراحی رابط کاربری
            قوانین طراحی رابط کاربری

            یا حتی Wikipedia

            قوانین طراحی رابط کاربری
            قوانین طراحی رابط کاربری

            همچنین بخوانید: فاصله space بین کلمات در تکست ویو (TextView)

            موارد زیر را تمرین کنید تا فاصله گذار ماهری شوید:

            • بین خطوط فاصله بگذارید.
            • بین عناصر فاصله بگذازید.
            • بین گروه عناصر فاصله بگذارید.

            این مسیر را بروید و خواهید دید نتجه شما چقدر زیبا خواهد شد.

            قانون چهارم – روش های قرار دادن متن روی تصویر

            روش های محدودی برای قرار دادن متن روی تصویر وجود دارد که بتواند خروجی زیبا و تمیزی داشته باشد که در ادامه ما پنج روش را به شما آموزش می دهیم.

            اگر می خواهید یک طراح UI حرفه ای شوید شما ملزم به یادگیری روش های اصولی قراردادن متن بر روی تصویر،‌ هستید.

            قانون چهارم موردی است که معمولا طراحان یا بسیار عالی آن را پیاده می کنند یا بسیار بد و کثیف چون موضوع بسیار مهمی است که شما بتوانید متن خود را بر روی عکس بنویسید و خروجی تمیز و خوانایی داشته باشید. پس حتما این قانون را با دقت بسیار بخوانید.

            روش اول: متن را مستقیما بر روی عکس قرار دهید

            این روش بسیار ریسکی است و گاهی غیرمنطقی، اما شما می توانید متن خود را بطور مستقیم بر روی عکس قرار دهید برای مثال تصویر زیر با این روش پیاده شده و خروجی نیز جلوه جالبی دارد.

            قانون های طراحی UI
            قوانین پیاده سازی رابط کاربری

            اما همانطور که می بینید خواندن متن کمی مشکل است.

            موارد زیر، مشکلات و اخطار هایی است که در زمان پیاده کردن این روش باید نسبت به آن هوشیار باشیم:

            1. عکس باید کمی تیره باشد و contrast-y edges بسیار نداشته باشد.
            2. متن باید سفید رنگ باشد. نمونه هایی که با این روش و با این رنگ متن، تمیز و زیبا پیاده شده باشند زیاد نیستند اما ما نمونه ای از این طرح را در ادامه برای شما آورده ایم.
            3. حتما طرح خود را در تمامی screen ها و اندازه های صفحه نمایش تست کنید تا مطمئن شوید خروجی شما در هر حالتی قابل خواندن است.

            در کنار تمامی این مسائل باید بدانید که طرح پیاده شده شما نباید هیچگاه تصویرش و یا قالب متنش عوض شود. حتی در صورت الزام به تغییر، حتما باید هماهنگی بسیار بین عکس و متن جدید وجود داشته باشد.

            همانطور که گفتیم این روش بسیار ریسکی است و در پیاد سازی این روش باید خیلی محتاط باشید. درصورتی که ممکن است خروجی شما مانند نمونه زیر بسیار جذاب شود.

            قوانین پیاده سازی رابط کاربری
            قوانین پیاده سازی رابط کاربری

            روش دوم: پوشش کل تصویر

            شاید ساده ترین روش برای قرار دادن متن بر روی تصویر، پوشش کامل عکس با متن است. توجه کنید که اگر عکس به اندازه کافی تیره نیست، شما می توانید کل تصویر را با یک رنگ تیره شفاف بپوشانید و سپس متن را برروی عکس قرار دهید.

            در ادامه یک عکس جذاب از پوشاندن کامل عکس با متن آورده شده که همانطور که می بینید عکس با یک فیلتر مشکی و opacity به اندازه 35٪ بصورت کامل پوشانده شده است.

            اصول طراحی رابط کاربری
            اصول طراحی رابط کاربری

            حال اگر متن و همچنین فیلتر تیره ای که بر روی تصویر اعمال شده را حذف کنید خواهید دید تصویر بسیار روشن است و اگر بدون فیلتر متن را بر روی آن بگذارید خواهید دید متن اصلا خوانا نخواهد بود.

            این روش همچنین برای عکس های کوچک یا thumbnails نیز جوابگو است.

            قوانین طراحی رابط کاربری
            قوانین طراحی رابط کاربری

            همانطور که پوشش تیره بر روی تصاویر جواب داد،‌ شما می توانید با رنگ های دیگر بسته به نیاز تصویر را بپوشانید.

            قوانین طراحی رابط کاربری
            قوانین طراحی رابط کاربری

            روش سوم: متن را در box قرار دهید

            این یک روش قدیمی و البته مطمئن است که می توانید متن سفید رنگ را در یک مستطیل شفاف مشکی قرار دهید و مطمئن شوید متن تان خوانا است.

            مزیت این روش این است که دیگر هیچ محدودیتی برای انتخاب عکس ندارید و می توانید هر عکس با هر میزان شفافیتی استفاده کنید و تنها متن را در یک مستطیل تیره قرار دهید و هیچ نگرانی بابت خوانایی متن نداشته باشید.

            اصول طراحی UI
            اصول طراحی UI

            این نکته را هم بگوییم که مستطیلی که به نوعی ظرف متن شماست می تواند به هررنگی باشد اما این هماهنگی رنگ ها تماما با شماست.

            اصول طراحی UI
            اصول طراحی UI

            روش چهارم: عکس را تار (Blur) کنید

            یکی از روش های جذاب دیگر متن روی عکس که به علاوه خوانایی متن را هم بالا می برد، تار کردن مقداری از عکس است که متن می خواهد دقیقا آنجا قرار بگیرد.

            اصول طراحی UI
            اصول طراحی UI

            شما همچنین می توانید از عکس های out-of-focus به عنوان عکس تار استفاده کنید اما باید دقت کنید که متن شما دقیقا بر روی قسمت تار عکس قرار بگیرد تا خوانایی متن دچار مشکل نشود.

            قانون های طراحی UI
            قانون های طراحی UI

            روش پنجم: قسمت پایین را محو کنید

            در این روش در عکس، از قسمت پایینی به بالا کمی محوی بوجود می آید که کاملا نامحسوس است اما نکته اینجاست که متن شما را بسیار خوانا می کند و کاربر حتی متوجه نمی شود که چرا متن سفید رنگ شما بر روی این عکس روشن، چرا اینقدر واضح و خواناست!

            قانون های طراحی UI
            قانون های طراحی UI

            همانطور که می بینید بر روی عکس ها یک شیب بسیار ملایم از محوی وجود دارد که از وسط با opacity با مقدار 0٪ و رو به پایین با opacity با مقدار 20% است. این جادوی محوی است که ناظران عادی متوجه نمی شوند و فکر می کنند طراح فقط متن سفید رنگ خود را بر روی عکس قرار داده است در صورتی که اینطور نیست و طراح زکاوت هوشی بکار برده تا بدون تغییرات محسوس، متن را به صورت خوانا بر روی عکس نمایش دهد.

            نکته: چرا عکس باید از پایین محو شود؟ قطعا به دلیل قانون یک در مقاله پیشین تجاری اپ! توجه کنید که ما در قانون یک گفتیم نور از بالا می تابد و برای هر چه طبیعی تر نشان داده شدن عکس ها باید قسمت پایین آن محو شود و قسمت بالای عکس روشن باقی بماند.

            امیدوارم این آموزش برای شما مفید بوده باشد.

            کلمات کلیدی: قوانین پیاده سازی رابط کاربری,قوانین طراحی رابط کاربری,اصول طراحی UI,قانون های طراحی UI,طراحی رابط کاربری

            اشتراک گذاری

            پست های مرتبط

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            30 بهمن 1400

            دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            30 بهمن 1400

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            توابع در زبان برنامه نویسی دارت (Dart)

            توابع در زبان برنامه نویسی دارت (Dart)

            27 بهمن 1400

            توابع در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب

            دیدگاهتان را بنویسید لغو پاسخ

            نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

            ساخت اپلیکیشن های موبایل

            • ساخت اپلیکیشن فروشگاهی
            • ساخت اپلیکشن ابزاری و خدماتی
            • ساخت اپلیکیشن آموزشی
            • و هزاران موضوع دیگر

             
            کلیک کنید

            آخرین دیدگاه ها

            • 7 خرداد 1401

              داودی نظر در آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

            • 6 فروردین 1401

              yasaman نظر در راست چین کردن متن در فیگما Figma

            • 3 فروردین 1401

              رضا نظر در مفاهیم Observable و Observer در RxJava

            تجاری اپ در شبکه های اجتماعی

            لوگوی تایید پرداخت آنلاین

            2015-2022 © تمامي حقوق مادي و معنوي اين وب سايت نزد تجاری اپ محفوظ بوده و هر گونه کپي برداري از مطالب پيگرد قانوني به همراه دارد! | طراح سایت : ProgRun
            سفارش پروژه
                      هیچ نتیجه ای یافت نشدمشاهده همه نتایج