1 x4 ahevWhDbJ82orHXZ68w

7 ماده اصلی برای طراحیِ رابط کاربری که به عنوان یک طراح تازه‌کار آموختم

1️⃣ کنتراست

2️⃣ فضای سفید (فضای سفید وسیع)

3️⃣ تکرار

4️⃣ همپوشانی

5️⃣ تعلیق

6️⃣ سازگاری (ثبات)

7️⃣ تراز بندی

اگر 7 ماده اصلی بالا را در هم بیامیزید در نهایت طراحی شما از بقیه متمایز خواهد شد. دوره واکو شویلی به من کمک کرد تا چارچوب این مقاله را بهتر تنظیم کنم.

1️⃣ کنتراست

کمک می کند تا یک عنصر در میانه ای انبوه، برجسته به نظر آید. البته اصلی به نام قانون مشابهت گشتالت هم با همین قضیه کار می کند. کنتراست کمک می کند تا سلسله مراتب بصری در طرح ایجاد کنیم. روش های ایجاد کنتراست:

– کنتراست با رنگ

صفحه ورود Netflix به عنوان مثال در نظر بگیرید.

https://www.netflix.com/in/login

در زیر می توانید ببینید که آنها چگونه با استفاده از رنگهای متضاد (1) سلسله مراتب بصری عنوان و (2) دکمه اقدام CTA (call to action) را به کاربر نشان داده اند.

در زیر عکسی از نقشه حرارتی مربوط به نحوه ارتباط کاربر با صفحه ورود Netflix نشان داده شده است. اولین چیزی که کاربر مشاهده می کند عنوان SignIn است، سپس دکمه CTA و سپس پیوند “اکنون ثبت نام کنید”.

HeatMap با استفاده از پلاگین VisualEyes تولید شده است

– کنتراست با اندازه

به صفحه پروفایل کاربر در LinkedIn نگاهی بیاندازید. می بینید که چگونه از اندازه قلم (تغییر در px) و وزن (تغییر از حروف بزرگ (Bold)، معمولی و مورب) برای ایجاد سلسله مراتب بصری استفاده کرده اند.

– کنتراست با وزن

بهترین مثال برای وزن تمایز بین دکمه های اصلی و ثانویه است. طبق شیوه نامه طراحی متریال گوگل:

  • دکمه اصلی یا دکمه تو پر (تاکید زیاد)
    دکمه های تو پر دارای تاکید بیشتری هستند چون از رنگ و سایه استفاده می کنند.
  • دکمه ثانویه یا دور خط دار (تأکید متوسط)
    دکمه های دور خط دار (تو خالی) زمانی استفاده می شوند که تأکید بیشتری از دکمه های متنی لازم است.
  • دکمه ثالثیه یا متنی (تأکید کم)
    دکمه های متنی معمولاً برای کارهای کم اهمیت استفاده می شوند.

2️⃣ فضای سفید

مقدار کافی از فضای سفید به طرح شما کمک می کند تا تنفس کرده و نشاط بیشتری داشته باشد. هنرمندان زیاد با فضای سفید بازی می کنند تا آثارشان را برجسته جلوه دهند. در تصویر سازی زیر که توسط Gal Shir طراحی شده وی از کنتراست (بنفش تیره در پس زمینه روشن) و فضای سفید برای خلق این اثر هنری زیبا استفاده کرده است.

تصویر سازی توسط گال شیر

فضای سفید قابل کشف بودن یک عنصر را افزایش می دهد که منجر به نرخ تبدیل عالی در وب سایت می شود. به صفحه ورود آمازون نگاهی بیاندازید. تمرکز اصلی آنها این است که به کاربران اجازه دهند تا بدون پرت شدن حواس وارد شوند. می بینید که آنها چقدر زیبا از فضای سفید (سفید وسیع) به نفع خود استفاده کرده اند.
از نمونه های دیگر می توان به صفحه فرود Google.com & ubereats.com اشاره کرد.

سایت های معروف مانند آمازون، گوگل و ubereats از فضای سفید برای وضوح و نرخ تبدیل بیشتر به نفع خود بهره می گیرند.

3️⃣ تکرار

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

تکرار می تواند در رنگ، سبک، طرح و غیره باشد.

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

تکرار رنگ و خطوط برای ایجاد چنین آرم زیبایی توسط کنی میسنر https://dribbble.com/kennymiesner

در dribbble.com تمام طرح ها در ابعاد یکسان در چهار ستون به ترتیب همسان قرار گرفتند.

صفحه اصلی Dribbble.com برای کاربر وارد شده

4️⃣ همپوشانی

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

صفحه فرود معروف وب بدون کد نویسی Webflow از تکنیک های طراحی همپوشانی استفاده کرده است. شما می توانید این افکت را در سمت راست مشاهده کنید جایی که عکسهایی از ویژگی های webflow روی هم می آیند و از یک مانیتور خارج می شوند. برخی از وب سایت های که از تکنیک های همپوشانی استفاده می کنند عبارتند از: stripe.com ،phonepe.com

سایت های معروف (از راست به چپ) phonepe.com ،webflow.com & stripe.com از تکنیک های همپوشانی در وب سایت خود استفاده کرده اند.

5️⃣ تعلیق

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

  • خارج کردن عناصر از تعادل
نامتعادل کردن عنصر: https://www.pinterest.ca/pin/27021666502986860/
  • برش بیش از حد
برش مفرط ماشین: https://www.behance.net/gallery/87470135/Web-concept-2019-Collection
  • همپوشانی
همپوشانی: https://dribbble.com/shots/4799229
  • شیء چرخیده

6️⃣ سازگاری

سازگاری احساس در هم آمیخته ای می دهد. سازگاری در عین اینکه بار شناختی کاربر را کاهش می دهد باعث از بین رفتن نوآوری می شود. یک طراح باهوش می‌داند که چگونه با عناصر طراحی سازگار و ناسازگار بازی کند.

توجه: شما با تکرار رنگ ها، حروفچینی، تصاویر هم نوع، چیدمان و اشکال باعث حفظ ثبات می شوید. لینک

سازگاری بر اساس:

  • رنگها
  • حروف چینی
مدیوم ​​در وب سایت خود از یک حروف چینی به نام Marat Sans استفاده می کند
  • چیدمان
    صفحه ویترین طراحی ها در دریبل دارای چیدمانی سازگار در تمام صفحه است.
صفحه اصلی Dribbble.com برای کاربر وارد شده
  • تصاویر (آیکون ها)
    در stripe.com تمام تصاویر آیکن ها در سراسر وب سایت سازگار هستند.
اندازه و تصاویر آیکون سازگار در Stripe.com

7️⃣ تراز بندی

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

استفاده از شبکه برای تراز چیدمان. لینک

حتی در روزنامه ها از شبکه ها برای ترازبندی محتوای حجیم استفاده می شود.

منابع:

دیدگاه‌ خود را بنویسید

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

خروج از نسخه موبایل