Tarkib
- Javob beruvchi metodologiya
- Qanday qilib avval tarkibni saqlashim kerak?
- Nima uchun?
- 01. Sizning biznesingiz va foydalanuvchi maqsadlaringizni aniqlang
- 02. Sizga har qanday imkoniyat uchun murojaat qiling
- 03. Orqaga surishdan qo'rqmang
- 04. O'z jamoangizni ham itaring
- 05. Barcha tarkibingizni oldindan belgilab qo'ying
- Taqdimotdan qanday qilib tarkibni mavhumlashtirish mumkin?
- Tarkibni rejalashtirish nuqtai nazaridan o'ylashni to'xtatishimiz kerak
- Mijozlaringizni tarkibini dizayndan mustaqil ravishda rejalashtirishga majbur qiling
- Dizayndan oldin tarkibingizni yakunlang
- Haqiqiy tarkibdan foydalaning - har safar
- Xo'sh, simli ramkalar sezgir dizayn loyihalari uchun qanday ishlaydi?
- Eskiz
- Brauzer ichida ramka
- Izohlar
- Simli ramkalarda haqiqiy tarkibdan foydalaning
- Avval kichik ekranlarni qanday loyihalashtiraman?
- Dastlab qurilmalardan mavhum dizaynlar
- Style Tiles-dan foydalaning
- Interfeys uyg'unligini yarating
- Brauzerda hamma narsani ko'ring
- Statik dasturlar bilan muvozanatni saqlang
- Xulosa
Keling, aniqroq aytaylik: agar u hamma chuqurroq muammolarga, nima uchun hamma narsaning orqasida bo'lsa, faqatgina bu yechim. Qattiq jarayon har doim bizning ishimizga rahbarlik qilishi kerak, ammo biz ko'proq moslashuvchan narsani qabul qilishimiz kerak. Bizning vositamiz nihoyat o'zini suyuqlik ekanligini isbotladi, shuning uchun bizning jarayonimiz kerak emasmi? Tizim dizayni haqida o'ylab ko'ring: rasmni ham, mayda detallarni ham ko'rishingiz kerak. Mumkin emasmi? Uzoq!
Frenk Chimero o'zining "Dizayn shakli" kitobida juda chiroyli: "Rassom asarga yangi nuqtai nazar bilan qarash uchun molbertdan orqaga chekinadigan bir qism mavjud. Rassomlik yaqin va uzoqning teng qismidir: yaqin bo'lsa, rassom o'z belgisini qo'yish uchun ko'p ishlaydi; uzoqroq bo'lsa, u ishni sifatlarini tahlil qilish uchun baholaydi. U asarning o'zi bilan gaplashishiga ruxsat berish uchun orqaga qaytadi ».
Bizning ishimiz, vositamiz biz bilan gaplashishiga ruxsat berishimiz kerak. Tezkor dizaynning ko'tarilishi bilan biz nihoyat o'z vositamizni quchoqlaymiz, chunki u quyidagicha bo'lishi kerak edi: suyuqlik. Bu orqaga chekinish va ishni baholash, tahlil qilish va yangi ish uslubini, yangi jarayonni qabul qilish uchun ajoyib vaqt. Kodni tushunmaydigan statik maketlar va veb-dizaynerlar davri o'tdi. Javob beradigan jarayon vaqti keldi.
Javob beruvchi metodologiya
Ushbu maqolaning boshida biz qattiq jarayon uchun katta sirni beramiz. Chunki biz bu kabi aqldan ozganmiz. Tayyor? Javob beruvchi jarayon mas'uliyatli jarayondir. Noaniqmi? Balki. Ahmoqmi? Yo'q. Oldingi veb-standartlar harakati singari, sezgir dizayn kelajakda qulay usullar bilan veb-saytni oldinga surmoqda.
Har qanday dizayn jarayoni singari, buning hammasi orqasida "nima uchun" ekanligiga e'tibor qaratish lozim. Xo'sh, nima uchun veb-saytlar mavjud? Tarkibni etkazib berish. Bu vazifalarga asoslangan, ijtimoiy, axborotli bo'lishi mumkin ... bu muhim emas. Hammasi shu bilan bog'liq: nima uchun, yaxshi tuzilgan tarkib va muhim o'zaro ta'sirlardan boshlang.
Bu erda biz tez-tez javob beradigan dizayn jarayonimiz haqida tez-tez eshitadigan savollar mavjud.
Qanday qilib avval tarkibni saqlashim kerak?
Loyiha boshlanishida barchamiz juda optimistikmiz. "Avval tarkib!" biz aytamiz. “Foydalanuvchi maqsadlari! Muhim narsani eslang! " Bu to'g'ri. Ammo bu nimani anglatadi? Birinchi tarkibli jarayonni qanday amalga oshirasiz?
Agar bilsangiz ham (yoki bilaman deb o'ylasangiz), loyiha davom etar ekan, uni unutish oson. Uzoq muddatli loyihalar davom ettirish tendentsiyasiga ega (va ... va yana…). Biz nima uchun ekanligi haqida o'ylashni to'xtatamiz va qanday qilib borligiga e'tibor berishni boshlaymiz. Bizning loyihalarimiz mustaqil ravishda mavjud bo'lishi mumkin bo'lgan alohida "kashfiyot" va "rivojlanish" bosqichlariga bo'linishi mumkin deb o'ylab o'zimizni aldaymiz.
Haqiqat shundaki, biz nima uchun har doim so'rashimiz kerak. Siz qanchalik bilasiz deb o'ylasangiz ham, qancha rejalashtirishni amalga oshirganingizdan qat'iy nazar - har safar qaror qabul qilganingizda, har safar tugmachani loyihalashtirganingizda yoki sarlavha yozganingizda, siz so'rashingiz kerak ...
Nima uchun?
Nima uchun men buni qilyapman? Bu kim uchun? Mijozim qanday biznes maqsadiga erishishiga yordam beradi? Bu mening foydalanuvchilarimga qanday yordam beradi? Faqat avval tarkibni saqlamang. Birinchisini nima uchun saqlang.
Bu ovozni osonlashtiradi. Ammo buni yaxshi bajarish uchun siz itarishingizga to'g'ri keladi. Avvalo ularning sabablarini aniqlash uchun mijozlaringizni va jamoangizni itaring. Yo'q Lorem Ipsum, yo'q "biz bunga keyinroq erishamiz". Uy vazifangizni qiling! Sizning barcha xaularingizni nima uchun qat'iy boshlash kerak. Yellow Pencil-da, bu loyihalarni rejalashtirish, taxmin qilish, byudjetlashtirish va rejalashtirish uslubimizda katta o'zgarishlarni anglatardi. Biz mustahkam tadqiqot, strategiya va rejalashtirishni amalga oshirish uchun byudjet va vaqt sarflashimiz kerak edi. Siz ham mumkin. Ammo sizning mijozlaringiz va jamoalaringiz tarkibni aniqlashning ulkan afzalliklarini oldindan ko'rganlaridan so'ng, ular hech qachon orqaga qarashmaydi.
Va ularga ta'lim berish bizning vazifamiz. (Agar siz mijozlar bilan ishlash haqida ko'proq bilmoqchi bo'lsangiz, Mayk Monteironing "Dizayn - bu ish" degan ajoyib kitobini o'qing.) Mijozlar ushbu tadqiqotlarni amalga oshirish va oldinga borishning ahamiyatini tushunishda qiynalishlari mumkin. Va nima uchun ular kerak? Oxir-oqibat ular hech narsa "tugatilgan" bo'lmaydi - va ko'pincha ular faktura va katta "Word" hujjatini olishadi.
Bu ularning aybi emas - bu bizning aybimiz. Ushbu qiymatni namoyish qilish uchun yaxshiroq ish qilish bizning mas'uliyatimizdir. Yo'lning har bir qadamida biz barchasini eng muhim sababga qaytarishimiz kerak.
Bu ayniqsa sezgir dizayn uchun juda muhimdir. Javob beradigan veb-sayt ishlab chiqish uchun ko'proq harakat talab etmaydi, ammo bu juda ko'p rejalashtirishni anglatadi. Haqiqatan ham, biz hamma vaqt davomida qilishimiz kerak edi. Amaldagi har uch yilda uch marta amalga oshiriladigan loyiha aylanishiga guvoh bo'ling. Siz buni davom ettirmoqchimisiz? Ishonchimiz komil emas.
Shunday qilib, loyihangiz jarayonida birinchi navbatda tarkibni saqlash uchun uchta qadam mavjud.
01. Sizning biznesingiz va foydalanuvchi maqsadlaringizni aniqlang
Loyihangiz uchun biznes va foydalanuvchi maqsadlarining ustuvor ro'yxatini tuzing. Foydalanuvchilaringiz nimani ko'proq bilmoqchi yoki qilishni xohlashadi? Tadqiqotingizni qiling. Yovvoyi taxminlar emas, balki ma'lumotli xulosalar qiling. Barcha manfaatdor tomonlarni rozi bo'lishga undang.
02. Sizga har qanday imkoniyat uchun murojaat qiling
Har safar qaror qabul qilganingizda, kimdir yangi xususiyat yoki dizayn elementini yoki tarkib sahifasini taklif qilganda, ularni so'rovni biznes va foydalanuvchi maqsadlariga moslashtirishga majbur qiling. Ushbu xususiyat qanday haqiqiy ehtiyojni qondiradi? Haqiqiy sabab nima? (Maslahat: "Chunki men xohlayman" yoki "Men ko'kni juda yaxshi ko'raman" yoki "hamma" Facebook "da hisoblanmaydi.)
03. Orqaga surishdan qo'rqmang
Bu qiyin bo'lishi mumkin. Mijozlar bilan aloqalar nozik bo'lishi mumkin va urushda g'alaba qozonish uchun kurashdan voz kechish vasvasaga solishi mumkin. Ammo esda tutingki, biz hammamiz shu narsamiz! Bu biznes va foydalanuvchi emas; biz ularga qarshi.
Foydalanuvchilar ehtiyojlarini qondirish - bu biznes ehtiyojlarini qondirishning eng yaxshi usuli. Chunki bizning foydalanuvchilarimizsiz bizda biznes yo'q! Mijozlar (yaxshi mijozlar) sizni hamma narsaga "ha" deyish uchun yollamaydilar. Shunday qilib, agar sizning mijozingiz o'z maqsadlariga yoki foydalanuvchilarning ehtiyojlariga javob bermaydigan narsani so'rasa, ularga qarshi chiqishdan qo'rqmang. Gap ego haqida emas. Bu mumkin bo'lgan eng yaxshi echimni yaratish haqida.
04. O'z jamoangizni ham itaring
Bu ijodiy guruh ichida ishlashda ham qiyin bo'lishi mumkin. Rollarni ajratish - vizual dizayn, foydalanuvchi tajribasi, axborot arxitekturasi, kontent strategiyasi, tarkibni ishlab chiqarish - noto'g'ri aloqaga olib kelishi mumkin. Biz bandmiz, elektron pochta xabarlari bilan to'lib toshganmiz. Boshidan oxirigacha loyihada qolish qiyin, ayniqsa "sizning" ishingiz tugagandan so'ng.
Sizning jamoangizning aloqasi, hech bo'lmaganda mijozingiz bilan bo'lgan munosabatlar kabi muhimdir. Biz nima uchun mijozlarimiz singari o'zimizga eslatib turishimiz kerak. Hamkorlik muhim ahamiyatga ega. Siz shunchaki kontent rejasini, simli ramkalarni yoki dizaynlarni "topshirishingiz" mumkin emas. Imkon qadar qo'lma-qo'l ishlashimiz kerak. Yetkazib beriladigan narsani "tugatish" va boshqa narsaga o'tish oson. Ish qiyin bo'lganda loyihada qolish ancha qiyin.
Ijodiy ishlarga palapartishlik yondashuvi faqat ishlamaydi. Jamoa a'zolari o'rtasida tezkor, birgalikdagi ish yaxshi natijalarga olib keladi.
05. Barcha tarkibingizni oldindan belgilab qo'ying
Mana bu narsa: javob beradigan veb-saytlarni rejalashtirish uzoqroq davom etadi. Biz endi faqat bitta kontekstni rejalashtirmayapmiz. Biz hozir biladigan va ba'zilari hali mavjud bo'lmagan barcha kontekstlarni rejalashtirmoqdamiz.
Oldinda turgan barcha murakkabliklarni rejalashtirish uchun orqaga qaytish va siz hisobga olmagan xususiyatlar va funktsiyalarni kuchaytirishdan ancha kam vaqt talab etiladi. Shuning uchun vaqt / kuch / byudjetni sarflang. Dizaynga kirishishdan oldin mijozlaringizni va jamoangizni barcha tarkiblarini aniqlashga majbur qiling (va majburiyat!). Sahifa jadvallaridan foydalaning. Tarkibiy tarkibdan foydalaning. Sizning tarkibingiz kelajakka ishonchli! Yoki keyinroq yig'laymiz.
Taqdimotdan qanday qilib tarkibni mavhumlashtirish mumkin?
Siz buni internet-o-sfera atrofida ko'p eshitasiz. Lekin kuting, nima? Va kuting - nima uchun?
Chunki taqdimot o'zgarishi mumkin (va o'zgarishi mumkin). 15 yil oldin veb-saytlarni yaratish uslubimiz, ularni hozir qanday taqdim etishimizdan deyarli tanib bo'lmaydigan darajada. Ammo bilasizmi, nima o'zgargani yo'q? So'zlar. Biz hali ham "em" dan foydalanamiz. Internet asosan (matnga asoslangan) tarkib uchun mavjud. Biz hanuzgacha uni axborot muammolarini hal qilishda ishlatamiz; vazifalarni bajarish. Ammo sizning kontentingiz taqdimot vositasiga bog'liq bo'lsa (Flash kirish sahifalari, kimdir?) Haqiqatan ham bir necha yil ichida uni ishlatib bo'lmaydi. Va bu yutadi.
Tarkibni rejalashtirish nuqtai nazaridan o'ylashni to'xtatishimiz kerak
Biz (soha sifatida) mijozlarimizga tarkib jihatidan kontent haqida o'ylashga o'rgatdik. "Yon panelga qo'ying", deymiz. "Bu altbilgida bo'lishi kerak." To'xta! To'xtating. To'xta. Bu joylashuv haqida emas. Bu ustuvorlik haqida. Foydalanuvchilaringiz uchun eng muhim tarkib nima? Nima deb taxmin qiling: tartib kontekstda o'zgaradi. Sizning kichik ekranli dizayningizda (ehtimol) yon panel bo'lmaydi.
Sizning mijozingiz istagan ulkan super-menyu? IPhone-da uchib ketolmayman.
Mijozlaringizni tarkibini dizayndan mustaqil ravishda rejalashtirishga majbur qiling
Yaxshi, ularni majburlash shart emas. Ularni rag'batlantiring. Kuchli rag'batlantiring. Buning uchun sahifalar jadvallari juda yaxshi. Agar siz hali o'qimagan bo'lsangiz, ularni yaratish haqida ko'proq ma'lumot olish uchun darhol Kristina Halvorson va Melissa Rachning Internet uchun tarkib strategiyasiga o'ting. Ularni ustuvor tartibda tartibga soling. Joylashuv yoki maketga murojaat qilmang. Bu sizning mijozlaringizga o'zlarining mazmuni haqida samaraliroq fikr yuritishga yordam beradi va shuningdek, yakuniy sim ramkalar yoki dizayndan oldin tarkibni yaratish jarayonini harakatga keltiradi.
Dizayndan oldin tarkibingizni yakunlang
Yaxshi, bu har doim ham mumkin emas. Ammo siz loyihalashni boshlashdan oldin noaniqlikni qanchalik ko'p bartaraf eta olsangiz, shuncha kam orqaga qaytishingiz va keyinchalik narsalarni o'zgartirishingiz kerak bo'ladi.
Haqiqiy tarkibdan foydalaning - har safar
Agar iloji bo'lsa, kichik hajmdagi kontentdan foydalaning - mijozlaringizga eng murakkab sahifalar, rasmlar va menyularni ko'rsating. Keyinchalik, ular tayyor mahsulotdagi eng chalkash tarkibni ko'rganda, kutilmagan hodisalardan saqlanishadi.
Funktsional, brauzer ichidagi simli kadrlar farq qiladi. Mijozlaringiz tarkibidagi ekranning turli o'lchamlari bo'yicha o'zgaruvchan va o'zgaruvchanligini kuzatishlariga ruxsat bering. Simli ramkalarni taqdim qilayotganda buni ko'rsating (siz shaxsan taqdimot qilyapsizmi, to'g'rimi?) Ularga ekranning o'lchamlari bo'yicha ularning ma'lumotlarining ustuvorligi qanday bo'lishini ko'rsating, tartibi esa o'zgaradi.
Xo'sh, simli ramkalar sezgir dizayn loyihalari uchun qanday ishlaydi?
Biz RWD uchun o'zaro ta'sir dizayni brauzerga tez va tez-tez kirib borishi kerakligiga qat'iy ishonamiz. Har bir narsani tavsiflaydigan statik hujjatni yaratish deyarli mumkin emas. Albatta, biz uchta, to'rt yoki beshta tanaffusni ko'rsatadigan hujjat yaratishimiz mumkin edi, ammo bu hikoyaning faqat bir qismi. To'siq nuqtalari orasidagi barcha daqiqalar haqida nima deyish mumkin? Bu brauzerda sodir bo'ladi.
Eskiz
Shunga qaramay, o'zingizning g'oyalaringizni hamkorlikda tezda chizish imkoniyatiga ega bo'lish yaxshi. Bu ma'lum bir vositada bo'lishi shart emas, lekin qog'ozda qalam haqida faqat bir narsa bor. Bu erda gap g'oyalarni tez va takroriy ravishda olishdan iborat. Biz iloji boricha sketchboard qilishni yaxshi ko'ramiz va buning uchun hatto ilova ham mavjud: UI Sketcher.
Brauzer ichida ramka
Mana biz uchun haqiqiy chipta. Brauzerda RWD-ni namoyish qilishda biz naqsh va tizimlarni qayta ishlatishni yaxshi ko'ramiz. Albatta, biz har safar o'z tizimimizni noldan yaratishimiz mumkin edi, ammo bu bizga yoki mijozlarimizga yordam bermaydi.
Shuningdek, biz Twitter-ning Bootstrap yoki Zurb's Foundation kabi tezkor javob beradigan prototipli ramkalardan foydalanishni yaxshi ko'ramiz. Biz shaxsan Fondga suyanamiz, chunki bu bizning ish jarayonimizga mos keladi. Agar ikkalasi ham kichik ekranli, past tarmoqli kengligi bo'yicha birinchi yondashuvni qo'llasa yaxshi bo'lar edi, ammo biz aynan shu tarzda aylanamiz.
Izohlar
RWD simli ramkalari uchun izohlar juda zarur, ammo, biz ko'pincha, ularni e'tibordan chetda qoldiramiz. Buni baland ovoz bilan ayting: hujjatlar, hujjatlar, hujjatlar! Biz do'stlarimizdan bunga bir nechta misollarni ko'rdik va hakamlar hay'ati hali ham brauzer ichidagi sezgir simli ramkalarni to'g'ri izohlashning "eng yaxshi" usuli deb o'ylashadi. Yuqorida ta'kidlab o'tilganidek, biz Foundation by Zurb-dan muntazam foydalanamiz va izohlarimizni ko'rsatish uchun uning Reveal qo'shimchasidan foydalanishni yaxshi ko'ramiz. Ushbu izohlar faqat kattaroq ekranlar uchun ko'rinadi va ularni yoqish va o'chirish mumkin.
Simli ramkalarda haqiqiy tarkibdan foydalaning
Lorem Ipsum atrofida simli ramkalar va dizayndagi maketlarda juda ko'p bahs-munozaralar bo'lgan, ammo agar sizning simli ramkangizda haqiqiy tarkib bo'lmasa, siz buni noto'g'ri qilyapsiz. Tarkib o'zaro ta'sir o'tkazish to'g'risidagi qarorlarni xabardor qiladi va dizayn qachon buzilishini bildiradi. Lorem Ipsum buni qanday amalga oshirishi mumkin?
Avval kichik ekranlarni qanday loyihalashtiraman?
Yillar davomida biz aniq qarorni hisobga olgan holda ishlab chiqdik. Bu standart sozlama edi. Daftarlarda eskiz chizish, OmniGraffle-da simli kadrlar tuzish, fotoshopda ishlash yoki brauzerda loyihalashtirishdan qat'i nazar, bizning tuval o'lchamimiz qanday bo'lishini bilardik. O'sha kunlar o'tdi. Biz kichkina ekranni loyihalashtirishda va tobora yaxshilanishda juda katta ishonamiz. Xo'sh, qanday qilib dizayner o'zining ish oqimini qat'iy tuval o'lchamidan suyuqlikka o'zgartiradi?
Dastlab qurilmalardan mavhum dizaynlar
Agar ma'lum bir qurilmani loyihalashtirmasak, biz qurilmalar haqida o'ylashni to'xtatishimiz va tajribalar haqida o'ylashni boshlashimiz kerak. Quyidagi usullarning barchasi dizaynerlarga o'zlarining tajribalarini yaratishda yordam beradi va shu bilan birga (bir nuqtaga qadar) agnostik bo'lib qoladi.
Style Tiles-dan foydalaning
Yo'nalishni o'rnatish va tez takrorlash uchun Style Tiles-dan foydalaning. Style Tiles dizaynerga dizayn tizimining yo'nalishini juda aniqlashtirmasdan belgilashga imkon beradi. Ularning yaratuvchisi Samanta Uorren ularni quyidagicha ta'riflaydi:
"Style Tiles - kayfiyat taxtasi juda noaniq bo'lsa va kompakt so'zma-so'z bo'lsa. Style Tiles, maketni aniqlamasdan, haqiqiy interfeys elementlari bilan to'g'ridan-to'g'ri aloqani o'rnatadi. "
Interfeys uyg'unligini yarating
Barcha ingl va interaktiv elementlar birlashtirilgan tuvalni tasavvur qiling. Muayyan UI tartibini ko'rish uchun emas, balki barcha elementlarning qanday ishlashini ko'rish uchun. Bu interfeys uyg'unligi tuvali. Interfeys uyg'unligi tuvali dizaynerga g'oyalarni birgalikda saqlashga imkon beradi, lekin bitta ekran o'lchamiga e'tibor bermaydi. Bundan tashqari, bu to'liq uslubiy qo'llanma ishlab chiqarishni emas, balki ishlab chiqilgan elementlarni samarali ravishda aloqa qilish va hujjatlashtirishning ajoyib usuli.
Agar siz ko'proq o'qishni xohlasangiz, interfeys uyg'unligi mavzusidagi ikkita ajoyib maqolani bu erda va bu erda topishingiz mumkin.
Brauzerda hamma narsani ko'ring
Hamma narsani brauzerda birlashtirish kerak. Bu erda UI dizayni haqiqatan ham hayotga kiradi. Haqiqiy tarkibning vizual elementlar bilan qanday aloqada bo'lishini ko'rish juda muhimdir. Statik muhitda buni to'g'ri bajarish uchun hech qanday usul yo'q. Siz ona muhitida qanday javob berishini ko'rishingiz kerak.
Statik dasturlar bilan muvozanatni saqlang
Fotoshop kabi brauzer va statik dasturlar o'rtasida oqim mavjud. Dizayn tizimini suyuq va tabiiy ravishda yaratishga imkon beradigan muvozanat bo'lishi kerak. Albatta, bu fotoshopda ro'y beradi, ammo bunga javoban dizayner dizayner brauzerda ham ijodiy fikrlashni o'rganishi kerak.
Xulosa
Yana bir bor his bilan: nima uchun, yaxshi tuzilgan tarkib va o'zaro ta'sirlardan boshlang. Avvalo kichik ekranga va past o'tkazuvchanlikka e'tiboringizni qarating va ta'sirchan tushunchalaringizni bosqichma-bosqich yaxshilang. Bizning vositamiz yoshga etmoqda. Bir vaqtning o'zida bitta veb-loyihani amalga oshirishimiz va dunyoni o'zgartirishimiz mumkin.
Dizaynerlar uchun eng yaxshi 20 simli simlarni yaratish vositalarini kashf eting
Stiv Fisher Kanadadagi Yellow Pencil-da tadqiqotlar, tahlillar, dizayn va strategiyani muvofiqlashtiradi va RWD, UX va ochiq manbalar kabi mavzularda nutq so'zlaydi. Alaine Mackenzie - Yellow Pencil-ning kontent strategisti.
