بیشتر بدانید

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

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

متن سربرگ خود را وارد کنید

1️⃣ کنتراست

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

3️⃣ تکرار

4️⃣ همپوشانی

5️⃣ تعلیق

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

7️⃣ تراز بندی

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

1️⃣ کنتراست

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

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

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

ماده اصلی صفحه ورود به سامانه Netflix
https://www.netflix.com/in/login

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

یک متن همپوشانی برای نشان دادن سلسله مراتب عناصر بصری.

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

نقشه گرم صفحه ورود Netflix
HeatMap با استفاده از پلاگین VisualEyes تولید شده است

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

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

صفحه نمایه لینکدین کاربر.

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

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

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

2️⃣ فضای سفید

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

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

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

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

3️⃣ تکرار

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

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

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

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

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

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

4️⃣ همپوشانی

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

بیشتر بدانید
آماده‌سازی پورتفولیوی طراحی رابط و تجربه کاربری برای مصاحبه شغلی در 8 مرحله (روش خودم)

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

سایت های معروف مانندphonepe.com ، webflow.com و stripe.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️⃣ سازگاری

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

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

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

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

7️⃣ تراز بندی

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

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

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

منابع:

رای ها
امتیازدهی به مقاله
نوشته های اخیر

گوگل بارد (Google Bard) و هذیان هایش

4 قدم برای یادگیری تابع بولی (Boolean Function) در Figma

استراتژی شماره 1 من برای ایجاد یک پورتفولیو (نمونه کار) برجسته

portfolio

3 لذت منکر در طراحی

اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
عضویت در خبرنامه ما

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

می خواهید تجارت خود را ارتقاء دهید؟

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

مراقب باشید! از آخرین مقالات، بررسی ها، تخفیف ها و دوره ها جا نمونید! بی خیال حتما

ارتباط بگیریم

بعد از ارسال فرم در کوتاه ترین زمان در خدمت شما خواهم بود

اطلاعات تماس
بهترین زمان برای تماس

فرصت را از دست ندهید!

به روز باشید و از آخرین تخفیفات مطلع شوید.

از بهترین ها بیاموزید.