Mulți clienți, atunci când își descriu dorințele pentru viitorul site web, se exprimă succint: „Vrem ceva în stilul Apple!” În opinia lor, un astfel de răspuns ar trebui să ofere interpretului informații complete, să pună imediat toate i-urile și să elimine orice ambiguitate. Dar în realitate, desigur, totul este mai complicat. La urma urmei, orice poate impresiona o persoană în stilul Apple - prezentarea unei noi tablete, o simplă cutie de iPhone albă sau site-ul Apple în sine. Și cel mai ofensator este că, foarte probabil, atunci când spune „fă-l în stilul Apple”, clientul însuși pur și simplu nu știe ce înseamnă asta cu adevărat. Dar nefericitul interpret, care, poate, pur și simplu nu are idee ce se așteaptă până la urmă de la el?
Să încercăm să ne dăm seama!
Principiul AppleAbordarea Apple se bazează pe un principiu foarte simplu - nu puteți face un produs cu adevărat de înaltă calitate fără să vă ocupați de toate domeniile de lucru. Totul trebuie făcut la cel mai înalt nivel. Când lansați un telefon nou, nu puteți spera la calitatea fenomenală a ecranului său și preț scăzut, dacă există crăpături în corpul său stângaci, iar sloganul publicitar de pe un panou uriaș este scris greșit.
„Ei bine, am economisit pe copywriting - nu vindem texte, ci un telefon”, vor crede majoritatea.
Dar asta este ideea! Din punctul de vedere al Apple, experiența de a deține produsele lor începe chiar înainte de a vă plăti banii câștigați cu greu pentru orice iPod și, prin urmare, nu există elemente nesemnificative în acest lanț. Aceasta nu este doar tehnologie, nu numai ambalaj, ci și publicitate, și o vitrină, și un site web și texte de pe site. Nu există elemente minore aici. Și „ambalajul în sine poate spune o întreagă poveste”. În consecință, primul lucru care merită înțeles despre „stilul Apple” este atenția scrupuloasă acordată tuturor domeniilor de lucru.
A doua caracteristică importantă a produselor Apple este simplitatea lor elegantă. Joacă un rol foarte important la Apple.
„De ce credem că simplitatea este bună? Pentru că atunci când avem de-a face cu obiecte, este important pentru noi să simțim că deținem controlul asupra lor.”
Ei bine, a treia caracteristică critică sunt detaliile. Toate acele lucruri mici pe care nu le observi, dar care creează acel confort de zi cu zi al utilizării produselor Apple - animații de tranziție, sunete, clicul pe care îl auzi la reglarea volumului, senzația de netezime cu care defilezi prin pagină și multe, mult mai mult.
Dar tot ceea ce am descris până acum a vizat produsul. Și în exemplul nostru inițial vorbeam despre crearea unui site web. Cum să aplici aceste abordări în design web? Pentru a răspunde la această întrebare, să aruncăm o privire pe site-ul Apple și să încercăm să înțelegem ce dispozitive stilistice sunt folosite pe acesta.
Abordări Fotografii și ilustrațiiPrimul lucru care vă atrage atenția când vizitați site-ul Apple sunt fotografiile de înaltă calitate a produselor. Adevărul să fie spus, cred că aceste fotografii fac jumătate din munca de a evoca un „Wow!” de la vizitator. Toate sunt mari, luminoase, realizate în același stil și vă permit să vedeți toate detaliile.
Aceeași magie a fotografiilor. Potrivit unora, este „un bloc obișnuit cu colțuri rotunjite”, dar în astfel de fotografii evocă admirație.
Următorul nostru punct va fi aerisirea - toate elementele de pe pagină sunt foarte confortabile și gratuite, fundal alb oferă zonei de conținut o senzație de ușurință. Și pentru a evita impresia că întreaga pagină se destramă, aceasta este adunată de un fundal gri deschis cu un cadru deschis.
FonturiSite-ul Apple folosește doar două fonturi Adobe Myriad pentru titluri și font standard Sisteme MacOS X - Lucida Grande. Ambele fonturi sunt fonturi sans serif stricte și moderne, care acceptă doar stilul minimalist general. De obicei, dorința de înaltă calitate este prezentă și aici - datorită dorinței ca titlurile mari de pe site să arate frumos garantat în orice condiții, Apple folosește mai degrabă imagini decât text pentru inscripții.
De asemenea, Apple îi datorează lui Steve Jobs atitudinea reverentă față de fonturi - după ce a părăsit facultatea, a urmat diverse cursuri, inclusiv un curs de prelegeri despre caligrafie.
Colturi rotunjiteTot pe site sunt celebrele (unde am fi noi fără ele!) colțuri rotunjite. Sunt literalmente peste tot! Sincer să fiu, uneori se pare că iPhone-ul a fost inventat doar pentru a continua tradiția folosirii colțurilor rotunjite.
Colțurile rotunjite sunt peste tot - în corpul telefonului, pictogramele aplicațiilor și chiar pe butonul „Acasă”.
Următorul articol este și faimoasele efecte de strălucire și gradient Aqua. Recent, numărul lor pe site a scăzut considerabil. Ele sunt adesea folosite pentru a sublinia un anumit element.
Meniul principal pe site-ul Apple. Un tribut adus celebrului stil Aqua - după demisia lui Scott Forstall, minimalismul este din ce în ce mai dominat de skeomorfism și efecte de caramel.
ConţinutApple a acordat nu mai puțină atenție conținutului site-ului, textului și prezentării acestuia. O caracteristică interesantă este absența secțiunii foarte îndrăgite „Despre companie”, deoarece principalul lucru de pe acest site sunt produsele.
Efecte moderneDin ce în ce mai mult, site-urile web încep să folosească animații sau alte efecte similare - adaugă dinamică, arată avantaje într-o lumină nouă sau ajută la înțelegerea principiului de funcționare a unor detalii.
Și e tot?Evident, această abordare nu poate fi folosită fără discernământ pentru toate site-urile. Aparține site-urilor de prezentare sau promoționale. Și cel mai important, nu poți repeta un stil bazat doar pe indicii vizuale. Un site web este un produs holistic, finit, fiecare etapă a creării lui trebuie realizată la un nivel înalt, cu dragoste și idei.
Dezvoltarea insuficientă doar a uneia dintre etape va distruge instantaneu magia fragilă a „stilului Apple”.
Folosirea tehnicilor descrise mai sus vă va ajuta să creați un design frumos, îngrijit și modern, dar nu vă va elibera de etapele rămase ale creației - scrierea de texte competente și utilizarea lor în cantitățile necesare, creând prezentări video și fotografii de înaltă calitate.
Cultul Apple nu lasă pe nimeni indiferent și să recunoaștem: unul dintre factorii cheie în popularitatea Apple este designul lor unic. Proiectat de Apple în California, ilustrează modul în care designerii își tratează produsele ca pe artă.
Cupertino, California - Pe 16 noiembrie, Apple a anunțat lansarea unei noi cărți cu copertă cartonată intitulată „Designed by Apple in California”. Două decenii de inovație în design sunt surprinse în 450 de fotografii ale produselor trecute și prezente ale companiei, de la iMac din 1998 până la Apple Pencil(2015). Crearea cărții a durat 8 ani și a fost dedicată memoriei lui Steve Jobs.
„Ideea de a crea ceva important pentru umanitate l-a motivat pe Steve de la bun început, această idee este etosul nostru și scopul cu care Apple se mută în viitor”, spune Jony Ive.
„Designed by Apple in California” este rezultatul colaborării strânse dintre multe echipe de designeri și specialiști din domenii complet diferite. Toți împărtășesc speranța că cartea va oferi oamenilor o înțelegere a modului și de ce sunt create și există produsele Apple. Toate fotografiile au fost făcute de Andrew Zuckerman într-o tehnică pe care el o descrie drept „un stil în mod deliberat modest”. Fotografiile ilustrează detaliile procesului de proiectare, precum și produsele finite în sine.
Aceasta este o carte despre design, dar nu este vorba despre designeri înșiși, despre procesul creativ sau despre dezvoltarea produsului. Reflectă în mod obiectiv stilul, imaginea și ideologia de design Apple. Multe produse par atât de clare, simple și logice încât par să nu aibă o alternativă rezonabilă. Pentru fiecare dispozitiv este gândit chiar și designul instrumentului cu care este realizat.
„Ca designeri, trăim în viitor, iubim ceea ce am făcut deja și suntem obsedați de ceea ce nu am făcut încă.”
„Unul dintre cele mai importante lucruri pe care le-am învățat în cei 20 de ani de lucru împreună este nevoia de a ne asculta unii pe alții, pentru că cele mai strălucitoare idei sunt adesea cele care vorbesc foarte, foarte liniștit.”
Creată de Apple în California, este o carte în ediție limitată disponibilă în două formate: mică (25,9 x 32,4 cm) pentru 199 USD și mare (33 x 40,6 cm) pentru 299 USD. Este imprimat pe hârtie special produsă, special colorată, cu margini argintii mat. Vândut exclusiv pe Apple.com în SUA, Australia, Marea Britanie, Germania, Hong Kong, Coreea, Franța, Japonia și Taiwan și în anumite magazine Apple.
Cândva, Apple era renumit pentru capacitatea sa de a dezvolta produse simple și ușor de înțeles. A fost o campioană a interfețelor grafice în cadrul cărora utilizatorii puteau înțelege intuitiv ce acțiuni erau disponibile pentru ei și cum puteau fi selectate. După ce au finalizat cutare sau cutare operațiune, oamenii au primit întotdeauna feedback clar și au avut ocazia să anuleze totul dacă rezultatul nu le-a îndeplinit așteptările.
Dar toate acestea s-au încheiat. Chiar dacă produsele Apple arată acum și mai atractive, această frumusețe exterioară a avut un preț. Au dispărut principiile fundamentale ale unui design bun: claritate, feedback, recuperare și multe altele.
În căutarea perfecțiunii vizuale, echipa Apple a creat fonturi atât de mici și subțiri (combinate cu un contrast scăzut) încât au devenit imposibil de citit chiar și pentru persoanele cu vedere normală. Au creat o grămadă de gesturi vagi pe care nici dezvoltatorii înșiși nu își pot aminti și o mulțime de caracteristici interesante despre care cei mai mulți dintre noi nici măcar nu știm că există.
Produse, în special cele bazate pe iOS, sistemul de operare Apple pentru dispozitive mobile, nu mai urmează principiile de design bine-cunoscute și consacrate dezvoltate cu zeci de ani în urmă. Aceste principii, bazate atât pe știința experimentală, cât și pe bunul simț, au introdus puterea tehnologiei informatice în mai multe generații și au oferit produselor Apple o reputație excelentă pentru claritatea și ușurința lor de utilizare.
Din păcate, Apple abandonează treptat aceste idei. Orientările lor de proiectare pentru iOS și Mac OS X includ încă concepte similare, dar multe dintre ele nu sunt practicate deloc intern. Apple și-a pierdut drumul și acum, punând accentul pe stil și aspect, acţionează în detrimentul valorilor care au fost cândva principalul lor atu în lupta împotriva concurenţei.
Apple distruge designul. Mai mult decât atât, prin acțiunile lor îi fac pe oameni să creadă din nou asta design bun se bazează doar pe un înveliș frumos. Dar nu este așa! Designul este un mod de a gândi: mai întâi identificarea nevoilor fundamentale ale publicului tău și apoi satisfacerea acestora cu produse și servicii. Această disciplină cere dezvoltatorilor să înțeleagă oamenii, tehnologia, societatea și afacerile.
Crearea de obiecte frumoase este doar o mică parte a designului modern: astăzi specialiști din această industrie lucrează la probleme precum proiectarea orașelor, sistemelor de transport sau instalațiilor medicale. Și totuși Apple continuă să întărească ideea veche și obosită că singura treabă a unui designer este să facă lucrurile frumoase, chiar dacă se face în detrimentul funcționalității, clarității și ușurinței de utilizare a interfeței.
Apple, ați fost întotdeauna lideri. De ce te porți atât de egocentric acum? Dar, mai important, de ce urmează Google toate cele mai proaste exemple ale tale?
Da, Apple a fost cândva cunoscut pentru ușurința în utilizare, cu computere și aplicații care erau ușor de înțeles, aveau caracteristici impresionante și puteau fi folosite fără instrucțiuni. Toate operațiunile au fost ușor de detectat, orice acțiune putea fi anulată și corectată, iar sistemul ți-a oferit feedback detaliat, astfel încât să înțelegi mereu ce ai făcut. Utilizatorii au fost încântați de capabilitățile dispozitivelor lor Apple, iar liniile directoare și principiile de proiectare ale Apple au fost puternice, populare și influente.
Cu toate acestea, când compania a trecut la interfețele gestuale odată cu apariția primelor iPhone și tablete, conducerea sa a intenționat să abandoneze multe dintre principiile cheie care fuseseră respectate anterior. Nu mai există dovezi ale acțiunilor - rămânem doar cu resturi jalnice părere. De ce? Apple a făcut un pas radical către simplitatea și eleganța vizuală și, făcând acest lucru, a dat o lovitură serioasă capacității de învățare, de utilizare și de productivitate a soluțiilor sale.
Au început să implementeze sisteme de livrare pe care clienții au avut dificultăți să le folosească și să le învețe, dar au scăpat, deoarece oamenii nu recunosc astfel de probleme până nu este prea târziu și banii au fost deja transferați. Dar chiar și atunci, pentru deficiențele dispozitivelor lor: „Dacă n-aș fi atât de prost...”.
iPhone-urile și iPad-urile de astăzi sunt un tratat despre simplitatea vizuală. Fonturi grozave. Aspect curat, fără cuvinte, simboluri sau meniuri străine. Nu contează că mulți oameni nu pot citi textul. Dar el este frumos.
Într-un sondaj, o femeie a susținut că a trebuit să folosească instrumentele de asistență Apple pentru a face fonturile lor minuscule suficient de mari și suficient de contrastante pentru a fi lizibile. Cu toate acestea, ea s-a plâns și că, în multe secțiuni ale aplicației, această opțiune a făcut fonturile atât de mari încât textul pur și simplu nu se potrivea pe ecran. Având în vedere faptul că nu avea probleme de vedere, probabil că ar fi putut să citească același text cu ușurință înainte ca Apple să treacă la tipuri de fonturi cu linii mai fine și un contrast vizual mai mic.
Ce filozofie de design face ca milioane de utilizatori săi să se simtă limitati atunci când folosesc un produs? Apple și-ar fi putut proiecta smartphone-ul astfel încât majoritatea oamenilor să-l poată folosi și să citească textul din el fără a fi etichetați ca fiind inferior.
Dar și mai rău este că instrumentele auxiliare distrug însăși frumusețea pe care se bazează atât de mult compania Apple, pentru că uneori din cauza lor textul nu se potrivește pe ecran. Dacă fontul ar avea puțin latime mai mare, contrast mai mare și puțin mai puțin anti-aliasing, Apple și-ar fi păstrat nu doar frumusețea, ci și lizibilitatea.
Anularea a fost refuzată. Și știi ce s-a întâmplat? Au fost multe plângeri, așa că s-au întors această funcțieîntr-un format ușor diferit: tot ce trebuia să faci pentru a anula acțiunea era să-ți scuturi puternic telefonul sau tableta. Cu toate acestea, anularea nu a fost niciodată implementată universal și ai putea afla despre asta doar scuturând dispozitivul. Mai mult, dacă funcția nu funcționa, utilizatorii nu știau dacă problema era că gadgetul nu a fost scuturat suficient de tare sau că anularea nu a fost prevăzută pentru această situație particulară.
Pe ecranele tactile, mai ales relativ dispozitive mici, multe pot merge prost atunci când un link sau un buton activ este atins accidental. Aceste atingeri aleatorii direcționează utilizatorul către o nouă destinație. Modul standard și simplu de a elimina astfel de greșeli este de a avea un buton „înapoi”: în smartphone-urile care rulează sistemul de operare Android, această funcție este încorporată ca un controler universal care este întotdeauna disponibil, dar Apple nu îl folosește. De ce? Necunoscut. Poate că încearcă să evite utilizarea butoanelor sau meniurilor? Drept urmare, ele capătă un aspect curat și elegant aspect, dar această simplitate vizuală este înșelătoare, deoarece crește complexitatea interfeței.
Apple plasează săgeata înapoi în unele locuri, dar spre deosebire de Android, unde este disponibilă peste tot, butoanele lor de anulare și înapoi sunt implementate la discreția dezvoltatorului. Nu toată lumea, inclusiv Apple, implementează aceste capabilități.
Cum poate o persoană să știe în ce direcție să gliseze, câte degete să folosească și cât de des sau pentru cât timp să atingă ecranul în absența oricăror indicatori pe afișaj? Oamenii trebuie să-și amintească aceste gesturi auzind despre ele de la un prieten, „citind instrucțiunile” (care nu există), sau descoperindu-le complet întâmplător.
Produsele Apple sunt frumoase și atractive! De aceea, atunci când se confruntă cu dificultăți, utilizatorii săi au tendința de a se învinovăți. Acest lucru este bun pentru Apple, dar complet nedrept pentru clienți.
Un design bun ar trebui să fie vizibil vizual și plăcut de utilizat. Cu toate acestea, plăcerea necesită ca dispozitivul să fie ușor de înțeles și convenabil. Trebuie să adere la principiile psihologice de bază care conduc la sentimente de înțelegere, control și plăcere. Acestea includ claritate, feedback, afișare adecvată, utilizarea adecvată a restricțiilor și, desigur, capacitatea de a vă anula acțiunile. Aceste concepte de bază de design sunt predate viitorilor profesioniști UX în primul rând și, dacă Apple ar fi implicat într-o formare similară, ar eșua.
Mai atractiv, dar mai greu de folosit
Care sunt consecințele evitării unei metodologii de proiectare adecvate? Costuri mai mari de întreținere și suport. Și, în ultimă instanță, „dezertarea” clienților nemulțumiți care ar putea lăuda în mod deschis interfața simplă a Apple, dar în același timp vor economisi bani pentru un telefon de la o altă marcă, în speranța că vor fi suficient de inteligenți pentru a-și gestiona toate capacitățile.
În acest caz, poveștile despre bunici care nu puteau stăpâni un computer, dar acum folosesc cu ușurință dispozitive tehnologice precum tabletele, vor fi nepotrivite. Gândiți-vă, în ce măsură au stăpânit noile tehnologii? Da, dispozitivele cu gesturi, tabletele și telefoanele au o barieră mai mică de intrare pentru utilizarea inițială, dar stăpânirea funcțiilor lor avansate (de exemplu, trimiterea a trei fotografii într-un singur e-mail, formatarea unui anumit text sau combinarea rezultatelor mai multor operațiuni diferite) este mult mai mult. dificil. Puteți efectua aceste și multe alte acțiuni pe computerele tradiționale mult mai ușor și mai eficient.
Nouă generație software a făcut salturi uriașe în ceea ce privește atractivitatea și puterea de procesare, devenind în același timp mai complex de utilizat.
Această problemă nu se limitează la Apple. Hărți Google de asemenea, evoluează după același principiu și devin mai confuze cu fiecare iterație. Același lucru este valabil și pentru Android. sala de operatie sistem Windows Microsoft 8 are un design destul de inteligent pentru dispozitivele bazate pe gesturi, care rezolvă multe dintre problemele descrise mai sus, dar nu reușește să integreze stilul diferit de lucru necesar pentru desktop-urile care sunt proiectate pentru productivitate.
Deci care este problema? Ideea este că designul vine în multe versiuni, la fel cum fiecare disciplină are mai multe varietăți. Când creează software, programatorul principal nu înțelege neapărat programare interactiva, iar dezvoltatorul nucleului poate să nu știe nimic despre codificarea telecomunicațiilor. Pe de altă parte, designerii de interacțiune cu experiență în psihologie cunosc principiile modelelor conceptuale, claritatea și înțelegerea, în timp ce pentru experții în informatică este „pădurea întunecată”. Cu toate acestea, profesioniștii în design tind să creadă că designul de interacțiune înseamnă site-uri web și adesea nu înțeleg complexitățile programării și interacțiunii om-calculator.
Acest lucru este important pentru că oamenii ajung să se îndoiască de ei înșiși, deoarece nu pot folosi o interfață care este concepută să pară perfect clară atunci când nu este. Acest lucru este important deoarece produsele tehnologice de ultimă oră sunt în regres atât în utilizabilitate, cât și în utilitate.
Ceva n-a mers bine?
Unul dintre partenerii Nielsen Norman Group, Bruce Tognazzini, a lucrat cu Steve Jobs în primele zile ale Apple. Un expert în utilizare (Donald Norman) s-a alăturat companiei la scurt timp după ce Jobs a plecat și apoi a plecat după ce Steve s-a întors în 1996. Nu au văzut trecerea de la produse ușor de utilizat și ușor de înțeles (când Apple se lăuda de fapt că nu este nevoie de instrucțiuni) la dispozitivele de astăzi, care nu vin cu manuale, dar totuși au adesea nevoie de ele.
Înainte ca Jobs să se întoarcă, au spus ei, Apple a abordat dezvoltarea produsului având în vedere trei factori – experiența utilizatorului, inginerie și marketing – toți fiind implicați în ciclul de proiectare din prima zi până la livrarea produsului.
Astăzi, Apple nu mai încearcă să-și facă produsele ușor de înțeles și utile. În schimb, ea le proiectează etic. Din păcate, după cum arată cercetările din reviste academice privind interacțiunea om-calculator și factorii umani, aspectul simplu din punct de vedere vizual nu se traduce prin ușurință în utilizare.
Apple ascunde în mod deliberat complexitatea produselor sale ascunzând sau chiar eliminând controale importante. S-ar părea că ce ar putea fi mai simplu decât un controler cu un singur buton? Da, aceasta este o soluție foarte simplă, dar cu un singur buton opțiunile dvs. de utilizare a sistemului sunt extrem de limitate, cu excepția cazului în care acesta are anumite moduri. Ele vă permit să setați controlul la valori diferite în momente diferite, dar acest lucru derutează utilizatorii și duce la erori.
Alternativ, un controler poate avea mai multe funcții ascunse, datorită căruia butonul (sau touch screen) este capabil să efectueze diverse operații cu o singură, dublă sau triplă apăsare, atunci când este atins cu unul, două sau trei degete. Sau poate folosind un anumit număr de degete, un anumit număr de ori, într-o direcție dată: deschideți „panoul” Setarile sistemului» pe Macintosh și explorați opțiunile (și diferențele) în sensul atingerilor și gesturilor pe un mouse sau trackpad Apple.
O simplă apariție poate face controalele mai complexe, mai arbitrare, mai dificil de reținut și mai vulnerabile diverse erori. De fapt, în primele zile ale computerelor Lisa și Macintosh, sloganul Apple era „Fără moduri”. Singura modalitate de a evita modificările este să utilizați controlere dedicate, fiecare dintre ele trebuie să îndeplinească întotdeauna aceeași sarcină.
Principiul modurilor și compromisul dintre aspectul simplității și simplitatea reală în acțiune sunt predate în cursuri elementare de proiectare a interacțiunii. Dar de ce nu vrea Apple să aplice aceste cunoștințe?
Toate companiile moderne de calculatoare emit manuale pentru interfața cu utilizatorul pentru dezvoltatorii lor. Apple a fost primul care a creat un astfel de ghid și a servit ca o descriere excelentă a principiilor unui design bun și clar. Cea mai veche ediție a Apple Human Interface Guidelines a fost scrisă în 1978 de Bruce Tognazini. Până în momentul în care a fost lansat în 1987 și a fost creat pe parcursul a doi ani (1985-1986), toate principiile cheie ale interfețelor moderne au fost încorporate. Când Steve Jobs s-a întors la companie în 1996, ei erau încă urmăriți.
Acel set complet de concepte Apple a fost rezultatul proiectului lui Tognasini, care a studiat principiile de bază ale interfeței Macintosh-ului lor. Înainte de asta, acestea erau cunoscute doar de un cerc restrâns de oameni implicați în dezvoltarea UI. Datorită redactării acestui manual, instruirea noilor angajați a devenit mult mai ușoară, iar numărul de dezvoltatori pentru produsele Macintosh a început să crească semnificativ.
În crearea principiilor, echipa s-a bazat în mare măsură pe cercetările efectuate de comunitatea de interacțiune uman-calculator (HCI) nou formată. Axat pe munca lui Donald Norman și a studenților săi de la Universitatea din California, San Diego, care a fost publicată în lucrări la conferințele PCI la începutul anilor 1980 și într-o carte intitulată User Centered System Design, editată de Norman și Stephen Draper în 1986.
Este important de reținut că acestea fundamentale reflectă nevoile, dorințele și abilitățile oamenilor, nu mașinile pe care le folosesc. Acestea se aplică interfețelor de astăzi la fel de mult ca și versiunilor timpurii din anii 1980 și vor rămâne așa până când utilizatorii vor evolua.
Ghidul de interfață de utilizare iOS modern de la Apple pentru dezvoltatori conturează multe principii relevante, dar accentul este încă pus pe simplitate (în special, aspectul simplității) și pe satisfacția și plăcerea utilizatorilor în general. Aceste atribute joacă un rol important, dar sunt departe de a fi decisive.
Mai precis, liniile directoare le reamintesc dezvoltatorilor de nu mai puțin de 14 ori să se asigure că comunicarea lor vizuală este suficient de sofisticată. Este clar că designul ar trebui să fie cât mai curat și simplu posibil, dar acest lucru nu ar trebui să fie realizat în detrimentul eliminării indicațiilor necesare. Cum poate un designer să știe dacă sunt cei potriviti? Singura modalitate cunoscută este de a efectua testarea utilizatorului. Dar ce vă poate spune un manual de interfață cu utilizatorul despre testarea de utilizare?
Aceasta este o idee foarte bună. Ar trebui să efectuați teste cu persoane care sunt reprezentative pentru publicul dvs. așteptat de achiziții, nu doar cu câțiva colegi, așa cum sugerează Apple.
Principiile originale de design ale Apple subliniază importanța creării de sisteme care sunt clare, ușor de învățat și funcționale. Dar undeva pe parcurs, compania a pierdut elementele fundamentale pe care le urmase întotdeauna. Imaginea de mai jos arată cum principiile fundamentale ale ghidurilor Apple s-au schimbat de-a lungul timpului.
Acest tabel descrie evoluția regulilor de interfață cu utilizatorul Apple din 1995 până în 2015. Deoarece dispozitivele cu gesturi utilizează sistem de operare Regulile iOS sunt situate în partea stângă a regulilor din 2015 pentru OS X mai tradițional.
După cum puteți vedea, stabilitatea percepută și lipsa de regim au dispărut cândva după 2008. Iertarea și modelele mentale s-au pierdut în tranziția la iOS, împreună cu evaluarea acțiunilor explicite și așteptate. See-and-Point a fost eliminat din ghidurile iOS la sfârșitul anului 2010, odată cu lansarea iOS 4. În 1995, integritatea estetică era una dintre cele mai puțin factori importanți, dar în 2015 este crucial. Odată cu aceasta, metaforele și controlul utilizatorului au pierdut mai multe poziții și au alunecat în jos.
Principii lipsă
Cele mai importante principii care sunt complet sau parțial ignorate în iOS sunt claritatea, feedback-ul, restaurarea, consistența și încurajarea creșterii:
Claritate
Claritatea, sau capacitatea de a privi un sistem și de a descoperi instantaneu toate acțiunile sugerate, a fost întotdeauna un element cheie al succesului de design al Apple. În stadiile incipiente, acest principiu a fost numit „vede și punct”, deoarece totul operațiuni disponibile au fost prezentate sub formă de butoane, pictograme sau elemente de meniu vizibile utilizatorului: vedeți acțiunea pe care doriți să o efectuați, mutați cursorul peste obiectul corespunzător și faceți clic o dată pe acesta.
Pur și simplu, claritatea implică umplerea interfeței cu elemente mai vizibile și mai ușor de înțeles, astfel încât oamenii să nu fie nevoiți să le amintească. Meniurile de pe computerele tradiționale urmează această idee frumos. Pictograme etichetate și. Pictogramele neetichetate eșuează cel mai adesea, dar lipsa oricărui indiciu de interactivitate este de vină. Vă rugăm să rețineți că claritatea nu mai este menționată în ghidurile Apple.
Părere
Feedback-ul și feedforward-ul său „prieten” permit unei persoane să afle ce s-a întâmplat după ce a fost efectuată o acțiune sau să înțeleagă ce se va întâmpla dacă acțiunea este selectată.
Oamenii se bazează pe un flux constant de feedback pentru a evalua eficacitatea acțiunilor lor. În lumea reală primim feedback-ul automat, dar în lumea virtuală se întâmplă doar dacă designerul s-a gândit la asta. Fără feedback, este posibil ca utilizatorii să nu aibă încredere în starea lor actuală în cadrul sistemului și să nu simtă nicio responsabilitate.
Recuperare
Se întâmplă greșeli. Principiul recuperării prevede că ar trebui să fie la fel de ușor să anulați o operație pe cât este să o efectuați. Denumită clemență, a dispărut și din orientările actuale și din tabelul de mai sus. Recuperarea a fost implementată folosind butonul „Anulați”, care a fost inventat în 1974 la Centrul de Cercetare Palo Alto (PARC) al Xerox Corporation, probabil de Warren Teitelman. După cum știți, computerele Lisa și Macintosh și-au împrumutat structurile de bază din dezvoltările timpurii ale PARC ( Apple a cumpărat drepturile de la Xerox).
Comanda Anulare poate fi anulată folosind butonul Reface. Anulați și refaceți îi ajută pe oameni nu numai să-și corecteze propriile greșeli, ci și să experimenteze mai liber lucruri noi.
Anulare permitea utilizatorilor să restaureze conținutul, iar butonul înapoi era o comandă de utilitate care le permitea să revină la o locație anterioară din sistemul de navigație. Interfețele grafice originale au eliminat nevoia oamenilor de a face acest lucru backup, cu excepția navigației. În schimb, toate documentele și instrumentele au fost puse la dispoziția utilizatorilor. Browserele și iOS sunt relicve ale interfețelor de navigație timpurii, în care oamenii rătăceau printr-un labirint de tranziții care duceau la ecrane modale.
Browserele care acceptă navigarea pe Internet oferă un buton înapoi pentru a permite utilizatorilor să revină la părțile anterioare ale călătoriei lor. iOS nu oferă un astfel de instrument generalizat, așa că, dacă dați clic accidental pe un link din interiorul unei aplicații, de exemplu, vă va direcționa către Safari sau Youtube sau orice altceva, fără a vă oferi nicio cale de evacuare. Butoanele înapoi și înainte ar trebui să fie standard în iOS, astfel încât interfața să ierte oamenii pentru navigarea accidentală, mai degrabă decât să-i pedepsească pentru asta.
Consecvență
Majoritatea utilizatorilor moderni au mai multe dispozitive, dar operațiunile acestora diverse gadget-uri adesea se intersectează. Chiar și în cadrul unuia Dispozitivele Apple a reușit să spargă consistența: rotiți iPhone-ul și se modifică aspectul tastaturii, rotiți iPad-ul și pictogramele de pe ecranul de start se rearanjează în moduri imprevizibile.
Consecvența este încă enumerată în ghid, dar acest principiu este cu greu respectat. Magic Mouse funcționează diferit de un trackpad, iar comenzile sale diferă la rândul lor de gesturile folosite pe un iPhone sau pe tabletă. De ce? Astfel de contradicții apar de obicei atunci când designerii lucrează izolat, fără a face schimb de idei cu colegii lor.
Încurajarea creșterii
Designul bun îi încurajează pe oameni să învețe și să se dezvolte asumând sarcini noi și mai complexe, de îndată ce stăpânesc elementele de bază. Pasionații de instantanee evoluează pentru a deveni fotografi, autori jurnalele personale se transformă în bloggeri, iar copiii își încearcă mâna la programare și în cele din urmă încearcă să-și construiască o carieră în informatică. De zeci de ani, încurajarea creșterii a fost Apple cel mai important principiu, care a fost întotdeauna acceptat de utilizatori.
Bună ziua, dragi cititori! Designul web și dezvoltarea web evoluează foarte rapid. În fiecare zi vedem tot mai multe produse noi, fie că este vorba de aplicații sau servicii noi, care ne fac viața online mai productivă și mai convenabilă. Iar web design-ul este pur și simplu un spațiu nelimitat, limitat doar de talentul și abilitățile „artistului” (designer). Așadar, astăzi vom vorbi despre LESS - un limbaj de marcare a stilurilor dinamice care va simplifica scrierea stilurilor CSS.
LESS este un superset de CSS. Aceasta înseamnă că orice cod CSS este valid LESS, dar elementele LESS suplimentare nu vor funcționa CSS simplu cod. Acest lucru este grozav deoarece CSS-ul existent este deja cod LESS valid, ceea ce reduce bariera de intrare în noua tehnologie.
LESS adaugă o mulțime de proprietăți dinamice utile la . Introduce variabile, operații, elemente și mixuri. A putea scrie foi de stil modular vă va scuti de multe bătăi de cap. 
LESS face stilurile de scriere mult mai ușoare. De exemplu, folosind mixin-uri, creăm ceva de genul funcțiilor care pot lua argumente. Mixins vă permit să includeți toate proprietățile unei clase într-o altă clasă prin simpla includere a numelui clasei ca valoare a uneia dintre proprietăți.
1 | Colțuri rotunjite (@rază: 5px) ( |
Și CSS-ul compilat va arăta astfel:
1 | #antet ( |
Încărcați biblioteca prefix-free.js și conectați-o la index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
Să terminăm pregătirile aici și să trecem direct la crearea unui meniu în stilul Apple.com
Marcaj HTMLDispunerea meniului este destul de simplă. Meniul se bazează pe o listă neordonată. Deschideți editorul HTML și inserați acest cod:
1 |
În această secțiune vom începe să scriem codul de meniu în limbajul LESS. Pentru cei care sunt începători în programare, atât scrierea, cât și sintaxa LESS, nu vă faceți griji, voi încerca să descompun totul pentru a fi clar. Poate chiar și cuiva îi va plăcea acest mod de a scrie stiluri pentru un site, pentru că este cu adevărat mai productiv.
Să ne uităm la ce componente va consta meniul: 
După cum putem vedea în captura de ecran de mai sus, navigarea Apple.com are următoarele 6 părți principale:
- Se folosește umbra;
- Frontieră;
- Separator între elementele de meniu;
- Gradient pentru fundal;
- Efect de estompare la trecerea mouse-ului;
- Textul meniului.
Puteți folosi stilurile scrise în două moduri:
- Crunch
Important: atunci când utilizați prima metodă, styles.less trebuie inclus înainte ca biblioteca less.js să fie inclusă! De asemenea, nu uitați să vă conectați fără prefix.
Astfel, stilurile de conectare arată astfel:
1 |
|
Vom folosi 2 fisiere: config.less in el vom defini toate variabilele, mixin-urile etc., dupa care il vom importa in al doilea (styles.less) in care vom crea deja stiluri pentru elementele de meniu.
Acum să ne uităm la codul din config.less. Să definim culoarea de bază a meniului folosind variabile. O variabilă din LESS este declarată folosind simbolul @.
În codul de mai sus nu am inclus un prefix pentru box-shadow , biblioteca fără prefix îl va adăuga automat. În plus, culoarea umbrei este moștenită de la culoarea variabilei @theme.
Să definim un stil pentru marginile meniului folosind mixin-uri cu un parametruMeniul nostru va avea nevoie de un chenar cu colțuri rotunjite. Mixin-uri cu un parametru - de fapt are aceeași funcționalitate ca un mixin simplu, singura diferență este că are și un parametru variabil.
1 | Chenar(@radius : 3px ) ( |
În exemplul de mai sus, setăm @radius implicit la 3 pixeli și, așa cum am spus, această valoare poate fi modificată.
Definiți gradientul, separatorul și stilul de trecere cu mouse-ul folosind operațiuniÎn LESS, puteți utiliza operațiuni pentru a crește, decrementa, împărți și înmulți atât valorile proprietăților, cât și culorile, permițându-vă să specificați relații complexe între proprietăți pentru a obține rezultatul dorit. Să aruncăm o privire la următorul cod, care setează proprietățile separatorului de meniu:
1 | Divizor ( |
În exemplul de mai sus, scădem culoarea #111 din variabila @theme, astfel încât partea stângă a separatorului va fi puțin mai închisă decât culoarea de bază, iar partea dreaptă va fi mai deschisă. Acestea sunt tipurile de manipulări pe care le putem face cu culoarea HEX.
Pentru a face manipularea culorilor mai clară, să ne uităm la schema de culori: 
Culoarea maximă întunecată este #000 (negru), culoarea maximă deschisă este #FFF (alb), iar culoarea de bază este #555. Deci, dacă vrem o culoare cu trei niveluri mai întunecată, vom scădea #333 .
Acum stilurile de gradient:
1 | Gradient ( |
Intenționăm să folosim 2 culori de text și culori de umbră de text. O opțiune este utilizată dacă fundalul meniului este deschis, atunci culoarea textului este întunecată și invers.
În primul rând, dacă culoarea textului nu are o luminozitate egală sau mai mare de 50%, atunci umbra ar trebui să se întunece, în acest caz culoarea #000000.
În această etapă, terminăm de crearea fișierului config.less și trecem la crearea fișierului styles.less
Import config.lessSă creăm un fișier numit styles.less și să atașăm mai întâi config.less deja creat, în felul următor:
În acest moment, rezultatul muncii noastre arată așa. 
Nu prea atractiv încă. Dar mai sunt încă de urmat.
Stil de bază pentru meniuri cu reguli imbricateÎn LESS, putem imbrica stilurile unui element direct în stilul părintelui său. Eticheta de navigare este specificația nav HTML5, care conține toate elementele necesare pentru navigare. Iată stilurile lui:
1 | navigare( |
Observați că, în loc să scriem o grămadă de reguli CSS, am definit doar înălțimea, lățimea și umplutura. În timp ce ridicăm chenarul și stilul său, precum și umbra folosind mixuri, specificăm numele clasei .border și .shadow și regulile acestor clase, pe care le-am scris în fișierul config.less, sunt adăugate la nav. clasă. 
1 | navigare( |
Cu toate acestea, în LESS moștenirea are loc diferit, este mai ușor și mai logic de înțeles:
1 | navigare( |
După cum puteți vedea în imagine, elementele listei li sunt amplasate vertical, dar avem nevoie să fie poziționate orizontal. Pentru a face acest lucru, setați proprietatea display:inline;
1 | navigare( |
1 | navigare( |
În exemplul de mai sus, folosim culoarea hexagonală #f2f2f2 , această culoare are o luminozitate de peste 50%, astfel încât umbra va fi setată automat la negru. Restul codului sunt sigur că este destul de evident. 
li (
display: inline;
A (
text-decor: niciuna;
display: inline-block;
plutește la stânga;
lățime: 156px;
înălțime: 45px;
text-align: centru;
înălțimea liniei: 300%;
.divizor;
.gradient;
}
}
li: primul copil a (
chenar-stânga : niciunul ;
}
li: 50px auto 0 ;
lățime: 788px;
înălțime: 45px;
.frontieră;
.umbră;
ul (
umplutură: 0;
marja: 0;
li (
display: inline;
A (
text-decor: niciuna;
display: inline-block;
plutește la stânga;
lățime: 156px;
înălțime: 45px;
text-align: centru;
înălțimea liniei: 300%;
.textcolor(#f2f2f2 ) ; // Puteți schimba această linie
.divizor;
.gradient;
&:planare(
.hoverefect;
}
}
}
li: primul copil a (
chenar-stânga : niciunul ;
}
li: ultimul copil a (
frontier-dreapta : niciuna ;
}
}
}
Ei bine, asta este tot, scrierea apple.com poate fi completată aici. Rămâne să decidem cum vom atașa stilurile scrise pe pagina web. După cum am menționat mai sus, puteți utiliza stilurile scrise în două moduri:
- conectați biblioteca styles.less și less.js;
- sau compilați styles.less în programul Crunch și atașați deja la pagină styles.css obișnuit
Desigur, a doua opțiune este mai bună, de ce să atașați 2 fișiere și să faceți lucru dublu pe partea clientului, așa că haideți să compilam stilurile LESS scrise în CSS static obișnuit.
Pentru a face acest lucru, faceți clic pe butonul mare Crunch It! Și păstrați stilul normal.css 
Aceasta încheie lecția.
P.S.: Oricine poate face un meniu atât de simplu, dar dacă aveți nevoie de un site cu adevărat cool, cu efecte frumoase, atunci vă pot recomanda unul dintre cele mai bune studiouri web din Ucraina. Băieții vor putea să-ți facă un design cu adevărat unic, performanță Optimizare motor de căutareși promovează-ți site-ul!
Ești fericitul proprietar al unei companii mici, dar cool. Triumful este încă departe, dar nu ai nicio îndoială că în timp afacerea ta va deveni o sursă de mândrie și un exemplu de urmat. Apropo, nu trebuie să așteptați acest moment: vă puteți poziționa ca un profesionist de înaltă clasă chiar acum, făcând o declarație convingătoare, precum cea a unei companii mari și serioase.
Nu știi cum ar trebui să fie un astfel de site? Nu vă faceți griji, acum vă vom explica totul și vă vom spune cum să procedați. Dacă folosiți sfaturile noastre, nu va mai trebui să suspinați cu tristețe uitându-vă la site-urile Apple, Nike sau L’Oreal, pentru că al vostru nu va fi mai rău. Așadar, iată câteva îndrumări pentru crearea unui site web solid și profesional.
Mărcile mari își actualizează și își îmbunătățesc în mod constant site-urile web. Echipe de designeri și dezvoltatori experimentați lucrează pentru a crea o resursă neobișnuită și modernă, care stârnește curiozitatea și dorința oamenilor de a arunca o privire mai atentă.
Da, este foarte scump, dar există și opțiuni gratuite, precum Wix. Editorul nostru a fost creat special astfel încât să puteți face un site web frumos pentru orice tip de activitate și să adăugați un efect la modă, de exemplu, defilarea paralaxă sau videoclipul ca fundal. Puteți face o pagină „lungă” curentă și o puteți completa cu elemente de design „plate”*.
Credem că în această etapă nu vă va strica să vizitați site-uri web pentru designeri și să vă inspirați. Recomandările noastre: revista Inspirație web, blog Lopartși revista de design Cameră de serviciu; Dacă Limba engleză nicio problema pentru tine, citeste Vandelay Design , Revista SmashingȘi Webdesign Depot .
*Nu înțelegi ce înseamnă toate aceste cuvinte? Deci trebuie să citiți.
Companiile mari au o identitate corporativă recunoscută și o poziționare foarte clară. Folosesc fonturi, culori și sloganuri strict definite. Veți recunoaște fără greșeală sigla roșie Coca-Cola, fie că este pe site, sticle sau panouri publicitare de-a lungul străzii.
Ce se întâmplă dacă compania ta nu este la fel de mare ca Coca-Cola? Asta nu înseamnă că nu trebuie să faci branding. O identitate corporativă bine gândită este importantă. Datorită acesteia, oamenii vor putea identifica rapid produsul dvs., iar apoi este la doar o aruncătură de băț înainte de a face o achiziție. Prin urmare, desenați un logo frumos, veniți cu un slogan, alegeți fonturi de marcă, culori și proiectați-vă paginile de socializare în consecință. Mai multe sfaturi în articolul nostru despre.
Mai puțin este mai bineÎnțelegem că doriți să vorbiți în detaliu despre produsul și afacerea dvs., dar nu vă recomandăm să supraîncărcați site-ul și să plictisim vizitatorii. Site-ul se încarcă foarte prost, este greu de citit și respinge vizitatorii. Cel mai bun este dușmanul binelui, așa că trebuie să înveți să te oprești la timp.
Să ne gândim la ce poate fi eliminat de pe site-ul tău. Dacă textele sunt pline de tehnice şi din punct de vedere profesional- scapă de ei. Crezi că vizitatorii chiar trebuie să cunoască biografii detaliate ale tuturor angajaților tăi? Improbabil. Unele lucruri, desigur, nu pot fi scurtate, de exemplu, descriere detaliata bunuri sau servicii, dar este normal, aceste informații sunt utile. Merită chiar să-l mutați într-un loc în care cu siguranță nu va trece neobservat. Și tot ceea ce încetinește procesul de cumpărare poate fi eliminat fără cel mai mic regret.
Acum să ne uităm la design. Reduceți numărul de culori la trei sau patru, eliminați orice imagini inutile și acordați atenție tipografiei. Nu uita să pleci mai mult spatiu liber, cunoscut și sub denumirea de „aer”. Când există mult „aer” pe un site, oamenii observă toate elementele critice, precum cele necesare pentru a împinge vizitatorii să cumpere, să se aboneze, să se înregistreze etc.
Afișați produsul pe pagina de startDoriți să creșteți numărul de comenzi? Așadar, asigurați-vă că oamenii văd produsul imediat. Uită-te la site-urile unor mărci celebre. Vedeți, ei plasează produse nu numai pe pagina de cumpărături, ci și pe pagina principală, astfel încât oamenii să le observe cu siguranță. Dacă aveți și vă gândiți la cum să creșteți vânzările, nu ezitați să copiați această tehnică.
Desigur, fotografiile produselor trebuie să fie mari și de foarte bună calitate. Nu uita că asta se întâmplă într-un magazin online unde nu poți atinge sau încerca nimic, așa că oamenii iau decizii de cumpărare uitându-te la poză. Dacă nu ai bani pentru un fotograf profesionist, citește articolul nostru despre. Puțină practică - și totul se va rezolva! Și nu uitați de capacitățile editorului nostru; puteți adăuga o aplicație pe site, astfel încât clientul să poată mări imaginea articolului de interes și să-l privească bine.
Credem că v-ați găsit vreodată pe un site web prost proiectat și ați rătăcit înainte și înapoi în confuzie în căutarea paginii potrivite. De regulă, părăsim astfel de locuri cu mâinile goale și cu dorința de a nu mai reveni niciodată. Și totul se datorează unei navigații prost concepute. Nu repeta această greșeală și asigură-te că totul este clar pentru vizitator încă din primele secunde.
Dacă ești întrebat același lucru din nou și din nou, creați o pagină cu răspunsuri la întrebările frecvente. Puteți folosi aplicația Întrebări frecvente Wix. Avantajul său este că oamenii primesc informațiile de care au nevoie, iar tu nu ești distras de la alte chestiuni.
Vrei să arăți că compania ta este receptivă și prietenoasă? Adăugați aplicația " Chat live Tidio” pentru a răspunde la întrebări în timp real. Îl poți instala pe smartphone și nu stai toată ziua la computer, ci mergi la treburi și rămâne conectat.
Arată că oamenii au încredere în tineEste bine că încerci să fii în contact și să răspunzi la timp la întrebări, dar acest lucru nu este suficient pentru a construi încrederea clienților. Pentru a face acest lucru, trebuie să lucrați din nou pe site. Faceți o secțiune separată cu istoria companiei, vorbiți despre cine sunteți, în ce credeți și ce considerați important. Nu este nevoie de prea multe informații: textul trebuie să fie scurt, sincer și ușor de înțeles. Este destul de dificil să arăți ce fel de persoană ești pe Internet, dar credem că o pagină ca aceasta va face treaba perfect.
De asemenea, recomandăm adăugarea recenziilor clienților pe site - la pagina principala sau într-o secțiune separată. Citindu-le, oamenii vor înțelege că produsul tău este de încredere. Apropo, Yandex și Google acordă atenție recenziilor, ceea ce înseamnă că acestea influențează.
Faceți o versiune mobilă a site-uluiMai mult de jumătate dintre utilizatorii de Internet accesează rețeaua de pe tablete și smartphone-uri. Înseamnă că versiune mobila un site web nu este un capriciu, ci o necesitate. Din fericire, nu trebuie să vă faceți griji despre cum să o faceți. ÎN Editor Wix versiune mobila este generat automat, trebuie doar să îl testați și să modificați câteva lucruri. Nu uitați că versiunea mobilă nu este o copie exacta desktop, așa că eliminați toate elementele inutile și faceți vizibile butoanele și contactele.
Acordați atenție modului în care colegii mai în vârstă și mai experimentați își gestionează paginile pe rețelele sociale. Da, pentru a ajunge la publicul dvs. mai deplin, aveți nevoie atât de un site web, cât și de pagini de pe Facebook, VKontakte, Instagram etc. Rețelele sociale sunt ideale pentru a publica știri, pentru a scrie despre un produs și pentru a răspunde la întrebări. Este important nu doar să vorbim despre muncă, ci să ne formăm o imagine și să construim relații normale, de încredere. Dacă nu știi cu adevărat ce să faci, citește articolul despre și urmează toate recomandările noastre.
După ce creați o pagină pe un anumit site, spuneți vizitatorilor site-ului dvs. despre aceasta. Adăugați butoane pentru rețelele sociale la antet, subsol sau secțiune de contact. De asemenea, vă recomandăm să adăugați aplicația - este gratuită și companii mari o folosesc de bunăvoie. Cu ajutorul acestuia, poți gestiona până la zece conturi de pe site-ul tău: publica știri, răspunde la timp la comentarii și surprinde clienții cu rapiditate, impecabilitate și profesionalism.
Ești gata să fii la egalitate cu marile mărci? fă-o singur pe Wix - este ușor și gratuit!
