فروش آنلاین فایل

مثال هایی از کنتراست در UI(رابط کاربری) - کنفرانس ux

access_time2019/08/03

visibility 2.81k بازدید

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

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

اغلب افراد کنتراست را محدود به تفاوت رنگ ها می دانند با اینکه ابزاري بسیار فراتر از آن است.

حتما بخوانید:  تئوری رنگ ها | هر آنچه که باید در خصوص رنگ ها بدانید.

فضای بسته و باز

ببینید این تصویر برای ایجاد یک فضای مرتب، ساده و خالی برای بهتر نشان دادن متن بالای آن چه تاثیری دارد.

کنتراست در UI

پر و خالی

اگرچه سمت چپ با حجمی از محتوا پر شده است، سمت راست خالی است. این یکی دیگر از روشهای اعمال کنتراست در UI است.

کنتراست در UI

متقارن و نامتقارن

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

کنتراست در UI

بزرگ و کوچک

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

کنتراست در UI

عناصر پر شده و حاشیه دار

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

کنتراست در UI

سریف و سنز سریف (Serif and sans-serif)

استفاده از فونت های سریف و سنزیرف در کنار هم باعث به وجود آمدن کنتراست در رابط کاربری(UI) خواهد شد.

کنتراست در UI

مرتب و شلوغ

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

کنتراست در UI

دارای بافت و فلت

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

کنتراست در UI

روش های ایجاد کنتراست در UI فراوان اند.

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

سایر روش های ایجاد کنتراست:

  • تغییر فاصله میان کلمات و حروف
  • گرد کردن گوشه المان ها
  • تغییر در شفافیت اجزا
  • افقی و عمودی بودن اجزا
  • با جزئیات و ساده

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

بازدید : - بار دسته بندی : رابط کاربری (UI) تاريخ : 30 آوریل 2021 به اشتراک بگذارید :
دیدگاه کاربران
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.