پرش به محتوا

ویکی‌پدیا:طراحی

از ویکی‌پدیا، دانشنامهٔ آزاد
(تغییرمسیر از ویکی‌پدیا:تخته رنگ)

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

رنگ

[ویرایش]

سعی کنید تا حد امکان رنگ اضافه نکنید. اگر می‌خواهید رنگ به یک الگوی ناوبری یا جعبه اطلاعات بدهید، از خودتان بپرسید «آیا واقعا لازم است؟» این چشم‌نواز نیست با اینکه تمام رنگ‌ها روشن هستند. یکدستی رنگ‌ها باعث قوی‌تر شدن برند ویکی‌پدیا و چشم‌نوازی آن برای کاربران می‌شود.

برای همین تا حد امکان تلاش کنید از رنگ‌های تخته رنگ ویکی‌مدیا استفاده کنید. این رنگ‌ها عبارتند از:

نمونه رنگ کد رنگ معادل
#fff سفید
#f8f9fa
#eaecf0
#c8ccd1
#a2a9b1
#72777d
#54595d
#222
#000 سیاه
#eaf3ff آبی روشن
#36c آبی
#2a4b8d آبی تیره
#fee7e6 صورتی
#d33 قرمز
#b32425 قرمز تیره
#fef6e7 زرد روشن
#fc3 زرد
#ac6600 قهوه‌ای روشن
#d5fdf4 سبز روشن
#00af89 سبز
#14866d سبز تیره

این رنگ‌ها در همه جا استفاده شده‌اند از پس زمینه جعبه اطلاعات بگیرید تا نماد صفحات ابهام‌زدایی. حتی اگر موردی هست که رنگ در اینجا نیست. مثلا بنفش. سعی کنید رنگی استفاده کنید که قبلا استفاده شده باشد. مثلا #9932cc که در الگو:Ambox‌ استفاده شده‌است.

سعی کنید از ارقام کوچک مثلا #fff به جای #FFF استفاده کنید. خودتان را با معانی این کدها آشنا کنید.

در صورتی که به رنگی نیاز دارید که در تخته‌رنگ هست اما باید روشنتر یا تیره‌تر شود. سعی کنید در معیار HSL فام (Hue) رنگ را مطابق با تخته رنگ بردارید. این فام‌ها عبارتند از: ۲۲۰ برای آبی، ۱۶۷ برای سبز، صفر برای قرمز،‌ و ۴۵ برای زرد.

تضاد

[ویرایش]

اگر رنگی که استفاده می‌کنید قرار است پس‌زمینه باشد تا در آن متن قرار گیرد، حتما تضاد آن را با چند رنگ بررسی کنید:

  1. ‎#000 (همان مشکی)
  2. ‎#0645ad (رنگ آبی در پیوندهای موجود)
  3. ‎#0b0080 (رنگ آبی پیوندی که بر آن کلیک شده‌است)
  4. ‎#ba0000 (رنگ قرمز در پیوند ناموجود)
  5. ‎#a55858 (رنگ قرمز پیوند ناموجود کلیک شده)

از این ابزار می‌توانید استفاده کنید و سعی کنید تا حد امکان آنها استاندارد WCAG را حداقل تا مرحله AA بگذرانند. در غیر این صورت متن برای افراد با مشکلات بینایی (به طور مثال افراد کوررنگ) ممکن است غیرقابل خواندن شود مثلا متن این الگو‌ برای افراد کوررنگ قابل خواندن نیست.

استاندارد طراحی

[ویرایش]

اگر دکمه یا المانی از فرم‌ها طراحی می‌کنید. آن را با استانداردهای طراحی رابط کاربری از نظر اندازه هماهنگ کنید به طور مثال از پیکسل استفاده نکنید. برای اطلاعات بیشتر استانداردها را بخوانید. به طور کلی توصیه می‌شود که از ابزارهای خود ویکی‌پدیا مانند OOjs-UI استفاده کنید که با استانداردها همخوانی دارند.

کتابخانه‌های رابط کاربری

[ویرایش]

از رابط کاربری jquery.ui استفاده نکنید و به جای آن از OOjs-UI استفاده کنید.

لوگوها

[ویرایش]

نمادها

[ویرایش]

برای نمادهای موضوعی مثلا الگوهای خرد بهتر است نمادهای یک‌دست سیاه‌وسفید استفاده شود. به طور مثال الگو:اخترشناسی-خرد را ببینید. برای مثال‌های بیشتر این صفحه را ببینید. برای رابط کاربری بهتر است از نمادهای OOjs UI استفاده کنید. مثلا برای نقشه از و برای قلب از استفاده کنید. برای دیدن فهرست همه آنها به این صفحه مراجعه کنید.

کشوی نمادها

[ویرایش]

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

نماد کاربرد
هشدار جدی
هشدار ملایم
نقشه، جا
نامه
بحث
اطلاعات