Hierarchy چیست و چطور از آن در طراحی UI/UX و صفحه آرایی استفاده کنیم؟

در این قسمت به سراغ اصل Hierarchy یا سلسله مراتب در دیزاین رفتم به شما نشان می دهم که چطور از آن برای اولویت دادن به عناصر داخل صفحه استفاده کنید.
از Hierarchy در همه‌ی حیطه های طراحی از قبیل طراحی رابط کاربری UI/UX ، صفحه آرایی ، طراحی گرافیک مثل طراحی پوستر و… بسیار استفاده می شود.

 

در این فیلم کدامیک از موارد Hierarchy در UI/UX و صفحه آرایی بررسی می شود؟

در حوزه UI/UX شاید شما سلسله مراتب یا Hierarchy را مشابه قانون gestalt یا گشتالت ببینید. در واقع اصل Hierarchy از قانون گشتالت گرفته شده که خود آن شامل موارد زیر هست:

  1. مجاورت (proximity)
  2. تشابه (Similarity)
  3. تداوم یا پیوستگی (Continuity)
  4. بستار (Closure) – تکمیل کننده
  5. تصویر – زمینه (Figure-ground)
  6. تقارن (Symmetry)
  7. سرنوشت مشترک (common fate)
  8. فراپوشانندگی (inclusiveness)
  9. قانون موازات (Parallelism)
  10. منطقه مشترک (Common Region)
  11. عنصر متصل (Element Connectedness)

در این فیلم آموزشی تعدادی از این موارد را بررسی و با مثال نحوه کاربرد آن را به شما آموزش می دهم.

 

 

 

(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)

لینک آموزش در یوتیوب

Hierarchy چیست و چطور از آن در طراحی UI/UX و صفحه آرایی استفاده کنیم؟

 

طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟

شما می توانید با عضویت در کانال یوتیوب من آموزش های دیگر طراحی رابط و تجربه کاربری ( UI / UX ) را دنبال و یاد بگیرید.

عضویت در کانال آموزشی یوتیوب : Youtube.com/AsteriXarts

اگر سوالی در مورد طراحی رابط کاربری UI داشتید، می توانید در قسمت نظرات بپرسید تا به آن ها جواب دهم.

 

 

نمونه کارهای طراحی رابط و تجربه کاربری ( UI/UX )

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

همچنین می توانید نمونه کارهای من را ببینید و من را در این شبکه ها دنبال کنید.

  1. Dribbble.com/iHMahmoodi
  2. Behance.net/iHMahmoodi
  3. Instagram.com/iHMahmoodi

 

 

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

عضویت در کانال آموزشی: Youtube.com/AsteriXarts

در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.

 

 

لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:

آموزش Adobe XD – معرفی 5 پلاگین فوق العاده کاربردی – قسمت دوم

معرفی 5 پلاگین فوق العاده کاربردی برای Adobe Xd- قسمت اول

آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟

آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟

چطور طرح‌ رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟

لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟

اصطلاحات طراحی رابط کاربری – بخش اول: رنگها

آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون

طراحی رابط کاربری موبایل 101: pixels, points و resolutions

آموزش UI/UX : تفاوت pt و px در طراحی رابط کاربری

طراحی رابط کاربری موبایل 101: Strokes در فتوشاپ

نمونه کار: رابط کاربری صفحه اعضای تیم – Team members page UI/UX