Laravel.io loyihalashtirish

Laravel.io - bu Laravel PHP doirasidan foydalanadigan dasturchilar uchun forum va jamoat portali.

Yaqinda ular saytning yangi versiyasini chiqazdilar, ammo ko'ngillilar tomonidan boshqariladigan ochiq manbali loyiha bo'lib, chinakam sayqallangan dizaynni birlashtirish uchun manbalarni topish juda qiyin bo'lishi mumkin.

Biz qo'llarimizni bir oz oldinga surib ko'rishni iltimos qildik va oldinga siljishni boshladik, shuning uchun UIni eng yuqori darajaga ko'tarish uchun nima qilishimiz mumkinligini ko'rib chiqaylik!

Mavjud dizayn

Biz forum dizayni ustida ishlamoqchimiz. Mavjud dizayn quyidagicha ko'rinadi:

Tuzilishi va tuzilishi jihatidan sayt yaxshi boshlangan, ammo vizual dizaynning ba'zi tafsilotlarini yaxshilash uchun aniq imkoniyat mavjud.

Biz bu erda brendni qayta kashf etish yoki saytni noldan qayta loyihalashtirishdan manfaatdor emasmiz; buning o'rniga, ushbu dizaynni yangi darajaga ko'tarish uchun kichkina kosmetik o'zgarishlar bilan nima qilishimiz mumkinligini ko'rib chiqaylik.

Sahifa sarlavhasi hajmini kamaytirish

Ushbu sahifada ko'rib chiqadigan birinchi narsa bu asosiy nav ostidagi "Forum" sarlavhasi.

Ushbu sayt tez va ishonchli veb-saytlarni yaratish uchun juda yaxshi asos bo'lgan Bootstrap-dan foydalanayotganini anglagan bo'lishingiz mumkin.

Bootstrap h1 dan h6gacha bo'lgan sarlavhalar uchun standart o'lchamlarni taqdim etadi. Bu blog yozuvlari yoki hujjatlar sahifalari kabi hujjat tarzidagi tarkib uchun foydali bo'lishi mumkin, ammo dastur interfeysida ba'zi yomon qarorlarni qabul qilishi mumkin.

"Forum" bu sahifa sarlavhasi bo'lganligi sababli, h1 bo'lishi mantiqan. Ammo h1 bo'lishi kerak bo'lsa ham, sahifa sarlavhasi sahifadagi eng katta matn bo'lishi shartmi?

Ushbu skrinshotni Baremetrics boshqaruv panelidan tekshiring:

Ushbu dizayndagi "Metriklar haqida umumiy ma'lumot" sahifasi sarlavhasi matni "Oylik takrorlanadigan daromad" (bu holatda 16 px) hajmiga teng.

U hali ham sahifani etiketlashni yaxshi ishlamoqda, lekin u kichikroq bo'lgani uchun birozdan chiqib ketadi va sahifadagi eng muhim tarkibni (42px!) Daromad statistikasini ta'kidlashga yordam beradi.

Maslahat: UI dasturida tarkibiy ustuvorlikni hisobga olmagan holda sarlavhalar hajmini ierarxiyaga asoslangan holda ko'r-ko'rona tanlamang.

39px dan 24px gacha bo'lgan "Forum" sarlavhasining hajmini kamaytirish, shuningdek vertikal to'ldirishni qisqartirish sahifaning sarlavhasini ajratib ko'rsatish va unga tegishli bo'lgan mavzular ro'yxatiga ko'proq e'tibor berish uchun juda ko'p yordam beradi:

Qidiruv maydonini boshqa joyga ko'chirish

Hozir qidiruv maydoni "Mavzu yaratish" tugmachasining tepasida joylashgan bo'lib, ular qandaydir bog'liqligi to'g'risida noto'g'ri taassurot qoldiradi:

Bir qarashda, kiritish maydoni siz yaratmoqchi bo'lgan sarlavha uchun yoki tugma aslida qidirish uchun yuborish tugmasi deb o'ylaysiz.

Qidiruv maydonchasini "Forum" sahifasi sarlavhasi bilan bir xil maydonga ko'chirish orqali ikkala elementni ajrataylik.

Bu tugma va qidirish maydoni bir xil shaklning bir qismi emasligini aniq ko'rsatib beradi va foydalanuvchilarni qidirishni biroz osonlashtiradigan qidirishni odatiy joyga joylashtiradi.

Qidiruv maydoni ekanligini yanada aniqroq qilish uchun, biz tashrif buyuruvchilarga to'ldiruvchi matnni o'qimasdan qidiruv maydoni ekanligini tan olishlariga yordam beradigan kattalashtiruvchi oynani qo'shdik.

Nav barini qayta tiklash

Mavjud navning quyuq yashil rangi "Yaratish" tugmachasi bilan bir xil rangga ega bo'lib, u dizaynga bir necha jihatdan ta'sir qiladi:

  1. Nav juda ko'p e'tiborni o'g'irlaydi, chunki harakatga chaqiruvchi asosiy rang bilan bir xil.
  2. Bu "Mavzu yaratish" tugmachasi bilan to'g'ridan-to'g'ri raqobatlashmoqda, chunki bu tugma biz kutganimizdan kamroq ajralib turadi.

Bundan tashqari, u juda oddiy "Bootstrap" ga o'xshaydi, shuning uchun davolanishni biroz ko'proq xushomadli his qilishni taklif qilish yaxshi bo'lardi.

Yangi fon rangini tanlash

Agar iloji bo'lsa, yangi rangni kiritishdan saqlanish yaxshi bo'lardi, shuning uchun saytdagi mavjud ranglarning ayrimlaridan foydalangan holda nav qanday ko'rinishini ko'raylik:

Ushbu uchta variantdan, menimcha, oq juda chiroyli ko'rinadi va sahifadagi eng muhim tarkib bilan e'tibor uchun raqobatlashmaydi.

Keling, shu bilan ishlaylik!

Rangga ishora qo'shish

Oq rang juda toza va zamonaviy ko'rinadi, lekin unga sochlarga ko'proq o'ziga xoslik berish yaxshi bo'lar edi.

To'liq fonli faol holat hali ham chinakam Bootstrap-ga qaraydi, shuning uchun biz u erda boshqasini sinab ko'rish orqali o'sha shaxsiyatning bir qismini qaytarib berishimiz mumkin.

Twitter-ning navigatsiya uchun foydalanadigan usuliga qarang:

Urg'u chegarasi va rangli matn bu markaning rangini biroz qo'shib qo'yadi, lekin baribir chindan ham toza va sodda his qiladi.

Ushbu muolajani olaylik, faol elementga qisqa 2px pastki chegarani qo'shamiz va matn rangini mos keladigan qilib o'zgartiramiz:

Maslahat: Kichkina urg'u chegaralari - bu boshqacha qilib aytganda, yumshoq dizaynga rang qo'shishning oddiy usuli.

Yashil pastki chegara chiroyli ko'rinadi, ammo yashil matnni o'qish biroz qiyin.

Faol bo'lmagan va nofaol elementlar o'rtasida bir oz farq bo'lsa, yaxshi bo'ladi, ammo faol bo'lmagan elementlar bilan bir xil qorong'i matn rangini ishlatish yaxshiroq ko'rinadi.

Faol matni ta'kidlash uchun yangi rangni izlashning o'rniga, engilroq shrift yordamida faol bo'lmagan matnni ta'kidlamaslikka harakat qilaylik:

Ushbu yondashuv, shuningdek, sichqoncha kursori ostida turgan paytda, faol bo'lmagan narsalar uchun quyuqroq rang rangini ishlatadigan hover holati uchun yaxshi imkoniyat yaratadi.

Maslahat: Matnni ta'kidlash uchun uni quyuqroq yoki tiniqroq qilish o'rniga, uni ingichka yoki engil qilish orqali atrofni ajratib ko'rsatishga harakat qiling.

Matn hozir ancha yaxshi ko'rinishga ega, ammo bu pastki chegara kosmosda suzib yurganday, bir oz uzilib qolganini sezadi.

Buni tuzatishning bir usuli, sarlavha ostidagi kabi, butun navga nozik pastki chegarani qo'shishdir:

Bu chegarani ta'kidlashga yordam beradi va u yuqoridagi navigatsiya punktiga ulanganligini aniqlaydi.

Tugatish ishlari

Yaqinda Laravel.io yangi logotipga ega bo'ldi, shuning uchun uni sarlavha ichiga kiritaylik:

Yangi logotip juda qalin va navning chap tomonini o'ngdan ancha og'irroq qiladi. Bu mutlaqo yomon yoki biron bir narsa emas, lekin biz navigatsiya elementlarini markazlashtirish orqali ozgina muvozanatlashga harakat qilsak, bu qanday ko'rinishini ko'raylik:

Bu juda chiroyli ko'rinadi va dizayni standart Bootstrap tartibidan biroz uzoqlashtiradi, bu esa narsalarni odatiy va qasddan his qilishingizga yordam beradi.

Keyingi mavzular ro'yxatini ko'rib chiqamiz.

Mavzu ro'yxati

Birinchi narsa, barcha yashil havolalar matni:

Agar havolani boshqa havolaga ega bo'lmagan matnlar blokiga qo'shsangiz, havolaning ko'rinmasligi va bosilishi mumkinligiga ishonch hosil qilishingiz kerak va Bootstrap bu holatda havolalarni sukut bo'yicha bo'yash orqali optimallashtiradi.

Bu holda, oqimlar ro'yxatidagi barcha narsalar havoladir va paragraf matnida "pop" ni bog'lash uchun ishlov berishdan foydalanish juda og'ir.

Deyarli to'liq havolali saytlarda siz ko'radigan odatiy yondoshish, masalan, YouTube kabi oddiy tana rangi rangining yorqinroq versiyasidan foydalanish:

Mavzular ro'yxatidan ipning sarlavhasini quyuq quyuq kul rangga va oddiy shriftning og'irligi bo'yicha oldindan ko'rish matni engil kul rangga aylantirishga harakat qilaylik:

Maslahat: Og'ir saytlar havolalarida har bir havolani yorqin rang bilan "pop" qilishga harakat qilmang.

Muhim tarkibni birinchi o'ringa qo'yish

Ayni paytda, har bir ip kartasining yuqori qismida meta ma'lumotlarga ega bo'lgan kulrang sarlavha mavjud, masalan, oxirgi javob bergan kishi va ushbu xabarga tegishli teglar.

Har bir kartada ko'rganingizning birinchi tarkibiy qismi bu sarlavha mintaqasi mavzular sarlavhasi bilan e'tibor uchun raqobatlashishiga olib keladi, shuningdek, iplar ro'yxatini skanerdan o'tkazishni biroz qiyinlashtiradi.

Keling, sarlavhani biroz ko'proq urg'u berish va ta'kidlash uchun ushbu maydon maydonini har bir kartaning pastki qismiga o'tkazib ko'raylik.

Ikkilamchi tarkibni ta'kidlash

Bu aniq yaxshilanishdir, ammo pastki rasmdagi kulrang fon hali ham katta e'tiborni jalb qilmoqda va ro'yxatni ko'rib chiqishga zarar etkazmoqda.

Kulrang fon biz uchun qiladigan yagona narsa bu meta ma'lumotlari maydonini sarlavha va oldindan ko'rish qismidan ajratishga yordam berish.

Orqa fonni tashlab, ushbu ajratishga boshqa yo'l bilan erisha olishimizni ko'rib chiqaylik:

Orqa fonni tushirish, albatta, yaxshilanadi, ammo bu fon rangini o'zgartirmasdan "x-soniya oldin javob bergan" matni hozirgi vaqtda ko'rib chiqish bilan aniq raqobatlashmoqda.

Shrift hajmini meta-ma`lumotlarga bir necha pikselga tushirib, bir oz engilroq rangni ishlataylik va buning yordam berishini bilib oling.

Bu yaxshilanish kabi tuyuladi, ammo yashil foydalanuvchi nomi havolalarini o'qish biroz qiyinlashmoqda.

Tez kontrast tekshiruvi oq rangdagi och yashil rang WCAG 2.0 bilan bog'liq ko'rsatmalardan o'tmasligini tasdiqlaydi, shuning uchun uning o'rniga quyuq yashil rangdan foydalanaylik:

Bu juda yaxshi ko'rinadi va menimcha, biz hozir ham iplarni oldindan ko'rish va meta-ma'lumotlar maydoni o'rtasida kamroq bo'sh joy qoldirib ketishimiz mumkin:

Bu bizga ekran haqida ozgina ko'proq ma'lumot olishimizga imkon beradi va saytning auditoriyasi - ishlab chiquvchilar ekanligini hisobga olsak, qo'shimcha zichlik ehtimol qadrlanadi.

Chalg'itishni kamaytirish uchun teglarni qayta joylashtirish

Ayni paytda har bir kartaning pastki o'ng burchagidagi qorong'u mavzu teglari ipni sarlavhasidan biroz uzoqroq bo'ladi; Agar iplar ro'yxatini skanerlashda ular sizning ko'zingizni burchakdan burchakka siljitadi.

Bunga yordam berishimiz mumkin bo'lgan o'zgarishlardan biri teglarni kartaning chap tomoniga yaqinlashtirishdir:

Teglarni ip sarlavhasiga yaqinroq joylashtirib, ular to'g'ridan-to'g'ri e'tibor uchun raqobatlashishlari kerak. Sarlavha ko'proq ta'kidlanganligi sababli, u g'alaba qozonadi va teglarni biroz chalg'itadi.

Yorliq ranglarini o'zgartirish

Agar biz teglarni yanada ko'proq ta'kidlashni istasak, quyuq fonni engil rangga almashtirishimiz mumkin:

Aniqroq sharhlar

Qorong'i fonni olib tashlash orqali sharhni ozgina ta'kidlab o'tamiz va biz hozir turgan paytda raqam nimani anglatishini biroz aniqroq qilish uchun belgi qo'shamiz:

Keyinchalik nozik standart avatar

Va nihoyat, odatiy Gravatar tasvirini yanada nozikroq narsalar bilan almashtiraylik; Hech qachon uni hech qachon yuklamagan foydalanuvchining profil rasmiga e'tibor qaratishning hojati yo'q.

Biz bu erda foydalanadigan Zondikonlardan biri:

Chegaralarni kesish

Sahifaning qolgan qismi bilan yangi karta dizaynini ko'rib chiqamiz:

Har bir karta uchun bitta fon rangidan foydalanishning qo'shimcha afzalligi shundaki, biz endi har bir kartani alohida saqlashimiz shart emas; bularning barchasi chegaralarni bir-biriga ulashgan taqdirda ham, ushbu karta qaysi tarkibga tegishli ekanligi aniq aniq:

Bu bizga sahifada ko'proq ma'lumot to'plashimizga imkon beradi va shuningdek, oqim ro'yxatini birlashtirilgan tarkibiy qism kabi his qiladi.

Saytning rangini o'zgartirish

Bu haqiqatan ham birlashishni boshlamoqda, lekin sahifadagi turli bo'limlar biroz ko'proq farq qilishlari mumkin deb o'ylayman.

Buni amalga oshirishning oson yo'li oq sahifaning aniqroq ko'rinishini ta'minlash uchun biroz qorong'i fon rangidan foydalanish:

Bu erda biz sarlavhaning maydonini oq rangda saqladik, uni o'z sahifasi kabi ishladik va pastki qismni "Forum" sahifasi sarlavhasi ostiga to'liq kengaytirdik, shunda bizda noqulay qisman chegara yo'q edi.

Teglarning yon paneli

Sarlavha hajmini kamaytirish

Biz boshida ko'rib chiqqan sahifa sarlavhasi singari, "Teglar" sarlavhasi kichikroq bo'lishi mumkin:

Keling, uni 26px dan 12pxgacha qisqartiraylik va unga taglarning ro'yxatidan juda ko'p e'tiborni o'g'irlamasligi uchun unga yanada nozik rang beraylik:

Hozirda bu sarlavha kabi his qilish uchun juda kichik / nozik, lekin bu haqda boshqa fikrlar bilan murojaat qilishga harakat qilaylik.

Shriftning vaznini muntazamdan qalin qilib o'zgartiramiz, matnni katta harf bilan yozamiz, shuningdek, harflar oralig'ini biroz o'qib chiqing, buni o'qish osonligiga ishonch hosil qiling:

Bu bizga sarlavhani biroz ko'proq vakolat beradi va shu bilan birga matnni mayda-chuyda va bo'ysunuvchan holda saqlashga imkon beradi.

Maslahat: Barcha bosh harflardan foydalanganda, to'g'riligini yaxshilash uchun harflar oralig'ini biroz oshiring.

Keraksiz chegaralarni olib tashlash

"Mavzu yaratish" tugmachasi ostidagi chegara hozir biz sahifaning orqa rangini o'zgartirganimiz uchun ko'p narsa qilmaydi deb o'ylamayman, shuning uchun uni olib tashlaymiz:

Yorliqlar ro'yxatini alohida ta'kidlash

Qorong'i tanlangan holatning yorqin oq fondan yuqori kontrasti hozirgi yorliqlar ro'yxati dizayni iplar ro'yxati bilan ancha raqobatdosh qiladi.

Teglar ro'yxati ikkinchi darajali tarkibga kirishi kerakligi sababli, uni qanday ajratib ko'rsatishni umumiy dizaynga qanday ta'sir qilishini o'rganib chiqishingiz kerak.

Yorliqlar ro'yxatini ajratib ko'rsatishning oson usuli bu fonni (va chegaralarni) butunlay olib tashlash va matnni to'g'ridan-to'g'ri sahifa foniga joylashtirish:

Bu allaqachon ancha yaxshi ko'rinishga ega, ammo tanlangan holatni yanada nozik qilishga harakat qilaylik.

Matn rangini o'zgartirmaslik va qorong'i fonni ishlatishdan ko'ra, tanlangan elementning kontrastini fonni biroz engilroq qilish va shriftning vaznini odatdagidan quyuq rangga o'tkazish orqali ko'rib chiqaylik:

Qaysi yorliq tanlanganligini aytish hali ham oson, lekin endi oqimlar ro'yxati g'alaba qozonganga o'xshab sahifaning fokusiga o'xshaydi.

Ro'yxatdagi narsalarni yig'ish

Texnik tomoshabinlar Hacker News kabi saytlarning zichligini yaxshi ko'radilar, shuning uchun har bir element orasidagi bo'shliqni qisqartirish va tanlangan holatni kamroq to'ldirish orqali yon panelni biroz siqib chiqaylik:

Tugma holatini tweaking

Tugmachaning holatiga oid biror narsa biroz “o'chirilgan” bo'lib tuyuladi, ammo buning sababi nimada ekanligi darhol aniq emas:

U "to'g'ri" bo'lib ko'rinadigan iplar ro'yxatining yuqori qismiga juda mos keladi, shuning uchun muammo qanday bo'lishi mumkin?

Agar siz yon panel ustuni atrofida ko'rinmas idishni tasavvur qilsangiz, tugma to'ldirilmasdan bu idishning tepasiga o'rnatiladi.

Iplar ro'yxati ustunida ozgina to'ldirish mavjud, va hech bo'lmaganda bu ikki ustun bir oz notekis bo'lib ko'rinadi.

Keling, chap ustunni biroz pastga tushirib ko'raylik va bu yordam beradimi:

Bu, shubhasiz, avvaliga qarshi intuitiv joylashtirish kabi ko'rinsa ham, menga yaxshiroq ko'rinadi.

Tartibni o'zgartirish

Joriy tuzilishda "Mavzu yaratish" harakati va teglar ro'yxati chapda, iplar ro'yxati esa o'ng tomonda.

Menga ushbu maketni yoqtiradigan afzalligi shundaki, u sarlavhalarni markazga yaqinroq joylashtiradi, bu sizning sahifangizni ko'rib chiqayotganda juda tabiiy ko'rinadi.

Faqat zarbalar uchun, ustunlarni almashtirishga urinib ko'raylik va bu tartibda sizga yoqadigan biron-bir narsa bor-yo'qligini bilib oling:

Ushbu versiyada, mavzu sarlavhalari sahifaning chap chetiga qarab joylashtirilgan, u markazda bo'lgani kabi yoqimli emas, lekin u hali ham juda yaxshi his qiladi.

Ushbu tartib haqida yana ikkita narsani aytib o'tish kerak:

  1. "Mavzuni yaratish" tugmachasi bir oz ko'proq masofani bosib, iplar ro'yxatiga ko'proq e'tibor qaratadi. Bu, ehtimol, yaxshi narsa, chunki mavzular ro'yxati sahifaning markazidir.
  2. Teglar ro'yxati iplar ro'yxati bilan yaxshi moslangan. Bu haqiqatan ham yuzaki estetik narsadir, lekin menimcha, bu juda yaxshi.

Sayt uchun hech qachon bitta "to'g'ri" dizayn mavjud emas, shuning uchun ko'p vaqt sarflash uchun sizga yaxshiroq ko'rinadigan narsalar kerak bo'ladi.

Bu holda, menimcha, bu teskari tartib juda yaxshi ko'rinadi, shuning uchun bu o'zgarishlarga sodiq qolaylik.

Oldin va keyin

Bu oldin va keyin bizning finalimiz:

Umuman olganda, biz atigi 20 dan oshiq mayda-chuyda ishtiyoqlarni qildik, ammo yakuniy natija dizaynni yanada o'ziga xos va sayqallangan his qiladi.

Eng muhimi, ushbu o'zgarishlarning hech biri chindan ham biron bir dizayn yoki badiiy "iste'dod" ni talab qilmagan; qanday muammolarni qidirishni va ularni qanday hal qilishni bilish sizning dizayningizni uzoq vaqt talab qilishi mumkin.

Ushbu postdan zavqlanasizmi? Biz hozirgina kitob chiqardik!

Qayta tiklanish interfeysi dizayni haqida biz bilgan barcha narsalarni to'playdi, kitob, ekran ishlari, komponentlar galereyasi, buyurtma qilingan aktivlar va boshqalarni o'z ichiga oladi.

Hozirga qadar 6000 dan ortiq kishi buni yig'ib olishdi va fikr-mulohazalar juda ajoyib bo'ldi.

Agar qiziqsangiz, qo'shimcha ma'lumot olish va namunani yuklab olish uchun RefactoringUI.com/book sahifasiga o'ting.