ویکیپدیا:طراحی
این صفحه یک راهنمای چگونه انجام دادن است. که یک کار یا فرایند را در ویکیپدیای فارسی شرح میدهد. این صفحه یکی از سیاستها یا رهنمودهای ویکیپدیا نیست، زیرا هنوز توسط اجتماع مورد بررسی و تأیید قرار نگرفته است. |
برای تغییر رنگ یا شکل یک الگو، ابزار یا کلا هر موردی که با رابطه کاربری سروکار دارد، ابتدا این راهنما را مطالعه فرمائید.
رنگ
[ویرایش]سعی کنید تا حد امکان رنگ اضافه نکنید. اگر میخواهید رنگ به یک الگوی ناوبری یا جعبه اطلاعات بدهید، از خودتان بپرسید «آیا واقعا لازم است؟» این چشمنواز نیست با اینکه تمام رنگها روشن هستند. یکدستی رنگها باعث قویتر شدن برند ویکیپدیا و چشمنوازی آن برای کاربران میشود.
برای همین تا حد امکان تلاش کنید از رنگهای تخته رنگ ویکیمدیا استفاده کنید. این رنگها عبارتند از:
نمونه رنگ | کد رنگ | معادل |
---|---|---|
#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) رنگ را مطابق با تخته رنگ بردارید. این فامها عبارتند از: ۲۲۰ برای آبی، ۱۶۷ برای سبز، صفر برای قرمز، و ۴۵ برای زرد.
تضاد
[ویرایش]اگر رنگی که استفاده میکنید قرار است پسزمینه باشد تا در آن متن قرار گیرد، حتما تضاد آن را با چند رنگ بررسی کنید:
- #000 (همان مشکی)
- #0645ad (رنگ آبی در پیوندهای موجود)
- #0b0080 (رنگ آبی پیوندی که بر آن کلیک شدهاست)
- #ba0000 (رنگ قرمز در پیوند ناموجود)
- #a55858 (رنگ قرمز پیوند ناموجود کلیک شده)
از این ابزار میتوانید استفاده کنید و سعی کنید تا حد امکان آنها استاندارد WCAG را حداقل تا مرحله AA بگذرانند. در غیر این صورت متن برای افراد با مشکلات بینایی (به طور مثال افراد کوررنگ) ممکن است غیرقابل خواندن شود مثلا متن این الگو برای افراد کوررنگ قابل خواندن نیست.
استاندارد طراحی
[ویرایش]اگر دکمه یا المانی از فرمها طراحی میکنید. آن را با استانداردهای طراحی رابط کاربری از نظر اندازه هماهنگ کنید به طور مثال از پیکسل استفاده نکنید. برای اطلاعات بیشتر استانداردها را بخوانید. به طور کلی توصیه میشود که از ابزارهای خود ویکیپدیا مانند OOjs-UI استفاده کنید که با استانداردها همخوانی دارند.
کتابخانههای رابط کاربری
[ویرایش]از رابط کاربری jquery.ui استفاده نکنید و به جای آن از OOjs-UI استفاده کنید.
لوگوها
[ویرایش]نمادها
[ویرایش]برای نمادهای موضوعی مثلا الگوهای خرد بهتر است نمادهای یکدست سیاهوسفید استفاده شود. به طور مثال الگو:اخترشناسی-خرد را ببینید. برای مثالهای بیشتر این صفحه را ببینید. برای رابط کاربری بهتر است از نمادهای OOjs UI استفاده کنید. مثلا برای نقشه از و برای قلب از استفاده کنید. برای دیدن فهرست همه آنها به این صفحه مراجعه کنید.
کشوی نمادها
[ویرایش]به جای استفاده از نمادهای مختلف و متفاوت در الگوها بهتر است از نمادهای یکدست استفاده شود:
نماد | کاربرد |
---|---|
هشدار جدی | |
هشدار ملایم | |
نقشه، جا | |
نامه | |
بحث | |
اطلاعات |