طراحی رابط کاربری(UI/UX) - طراحی محصول

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

User Interface design terms: Colors

0 ۱,۱۴۶
اصطلاحات طراحی رابط کاربری - بخش اول: رنگها
اصطلاحات طراحی رابط کاربری – بخش اول: رنگها

 

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

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

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

 

بخش اول: رنگ‌ها

در این بخش اصطلاحاتی که در مورد رنگ‌ها در طراحی رابط کاربری به کار میره رو با هم یاد میگیرم.

 

رنگ اصلی(اولیه) - رنگ ثانویه - سبک روشن و تاریک رنگ
رنگ اصلی(اولیه) – رنگ ثانویه – سبک روشن و تاریک رنگ

رنگ اصلی یا اولیه Primary Color

رنگ اصلی رنگیه که بصورت گسترده در اکثر صفحات اپ شما و یا کامپوننت ها به کار میره. اگر شما رنگ ثانویه نداشته باشید، رنگ اولیه یا اصلی میتونه به جای رنگهای تاکیدی (accent elements ) به کار بره. (شماره ۱ در عکس)

 

رنگ ثانویه Secondary color

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

بهترین قسمت ها برای استفاده از رنگهای ثانویه موارد زیر است:
  • دکمه های شناور  (Floating action buttons)
  • کنترل های انتخابی، مانند اسلایدرها و سوییچ ها (Selection controls)
  • هایلایت کردن متن انتخاب شده
  • میله های پیشرفت (Progress bars)
  • لینک ها و سرتیترها

 

سبک روشن و تاریک رنگها (Variants)

یعنی اینکه مثلا شما یک رنگ آبی انتخاب میکنید، حالا رنگهای روشن و تاریک اون رنگ رو بهش میگن Variants (شماره ۳ در عکس)

 

 

رنگ پس زمینه Background Color

رنگ پس زمینه در پشت محتوای قابل اسکرول ظاهر می شود. پس زمینه پایه و رنگ سطح #FFFFFF (رنگ سفید) است.

5- رنگ پس زمینه 6- رنگ سطح 7- رنگ خطا
5- رنگ پس زمینه ۶- رنگ سطح ۷- رنگ خطا

رنگهای سطح Surface Colors

رنگهایی که برای سطح کامپوننت ها به کار میره مثل کارتها، صفحه ها و منوها

 

 

رنگ خطا Error Color

رنگ خطا، خطا را در کامپوننت ها نشون میده مثل اینکه آدرس ایمیلتون رو اشتباه و یا ناقص وارد فیلد ایمیل کردید. کد پیش فرض رنگ خطا #B00020 است.

 

رنگ On اصلی، ثانویه، پس زمینه، سطح و خطا
رنگ On اصلی، ثانویه، پس زمینه، سطح و خطا

On” Color

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

رنگهای “On” بیشتر برای متن ، آیکان‌ها و حاشیه ها بکار می‌رود. بعضی اوقات، روی سطوح هم اعمال میشن.

 

رنگهای جایگزین - alternative colors
رنگهای جایگزین – alternative colors

رنگهای جایگزین – alternative colors

سیستم رنگی Material Design از رنگهای جایگزین پشتیبانی می کند.

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

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

 

بیشتر بخوانید:

اصول طراحی رابط کاربری برای تلویزیون

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

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

 

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

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب ما را مستقیما در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.

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

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

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب ما را مستقیما در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.

دیدگاه بگذارید

avatar
  Subscribe  
Notify of