29 октомври 2013 г
Абониране за блог по имейл
Общности
Уеб блог
Дизайн и използваемост на онлайн магазина
Предлагам на вашето внимание скромна презентация, според която говорих с мъка преди половин година на конференция за онлайн пазаруването.
И въпреки че се нарича "Дизайн и използваемост на онлайн магазин", но няма нищо конкретно за онлайн магазините. Като цяло става дума за дизайн, използваемост и това е.
Споделете с колеги:
хареса това:
Secret Symphony: Най-доброто ръководство за четлива типография в мрежата
В момента тази математическа симфония се изпълнява на вашия уебсайт. Всеки негов посетителподсъзнателно го усеща и, което е по-важно, е предразположен да реагира на него по определен начин.
В тази връзка възниква основният въпрос: приятна и привлекателна ли е тази симфония или действа отблъскващо и само затруднява общуването с вашите читатели?
Математическа симфония на типографията
Както знаете, тази симфония не е прерогатив на мрежата. Вие го „чувате“ всеки път, когато четете книга, вестник, списание или уебсайт – всичко, което съдържа типография.
На пръв поглед може да ви се стори, че математиката и типографията нямат нищо общо. Защото в края на краищата типографията се състои от букви и думи, а математиката е… ами… числа.
Но в действителност типографията е комбинация от художествени символни форми и математически пропорции, изискан брак между форма и функция.
Математическите пропорции на типографията са жизненоважен фактор за възприемането на един сайт и неговото съдържание.
Как тогава да се коригират пропорциите, така че да се получи красива математическа симфония? Нека да предприемем пътуване дотипографска заешка дупка и разберете отговора на този въпрос!
Три основни типографски параметъра
Всеки параграф от текста, който виждате, има 3 основни измерими параметъра. Първите две,размер на шрифта ивисочина на реда, се измерват вертикално.
Фигура 1 - Как размерът на шрифта и височината на реда се представят в браузърите. Размерът на шрифта е разстоянието от горната част на главната буква (S) до долната част на долните букви (y). Височината на реда се намалява наполовина и се разпределя равномерно над и под центъра на реда.
Третият параметър,дължина на линията, се измерва хоризонтално.
Фигура 2 - Височината на линията и дължината на линията са вертикални и хоризонтални типографски показатели.
Тези три параметъра заедно определят как възприемате текста.
За да разберете как си взаимодействат тези параметри, е полезно да разгледаме няколко примера, в които един от показателите се променя, докато другите остават постоянни. В допълнение, този метод ви позволява да видите как всеки от параметъра влияе върху другите два.
По-долу, на фигура 3, височината и дължината на линията са фиксирани, а размерът на шрифта се променя от 13 на 16 пиксела.
Фигура 3 - При фиксирана височина и дължина на реда става ясно, че колкото по-голям е размерът на шрифта, толкова по-голяма височина на реда е необходима, за да се поддържат пропорциите и четливостта.
На Фигура 3 в първия абзац височината на реда е достатъчно голяма по отношение на размера на шрифта, което създава голямо разстояние между редовете, а във втория абзац е обратното: височината на реда е твърде малка за нормално междуредово разстояние. Това дава усещане за известна стегнатост на текста.
От това можем да направим важен извод: ако размерът на шрифта се увеличи, тогава височината на реда също трябва да се увеличи, за дазапазете геометричните пропорции на текста. С други думи:
Размерът на шрифта и височината на реда са правопропорционални.
В следващия пример размерът на шрифта и височината на реда са фиксирани, а дължината на реда варира от 233 до 466 пиксела.
Фигура 4 - С увеличаването на дължината на реда текстът става по-труден за четене, тъй като височината на реда не се увеличава, за да компенсира ефекта от прекомерната ширина.
Въпреки факта, че на Фигура 4 височината на реда е една и съща и в двата параграфа, тяхната четливост се различава значително поради различната дължина на реда.
Колкото по-дълги са линиите, толкова по-трудно е да се движи окото между тях (преместване на очите от края на един ред към началото на следващия), при условие че височината на линията не се увеличава съответно.
Тези открития се потвърждават от проведените проучвания. През 2004 г. Мери С. ДЕЙСЪН от Reading Institute (колко иронично, а?) установи, че:
„Голямата дължина на реда показва необходимостта от такова междуредово пространство, което би позволило на очите безпогрешно да намерят следващия ред, когато погледът е обърнат…“
Какво означава това за нас? Това означава, че височината и дължината на линията имат определена математическа зависимост, а именно:
За всеки размер на шрифта височината на реда трябва да се увеличи, ако дължината на реда се увеличи.
Но какво е математическото значение на това съотношение?
Хармонични пропорции и златно сечение
Отговорът на този въпрос е по-прост, отколкото може да изглежда на пръв поглед. Факт е, че природата ни е дала правило за създаване на красиви и ефектни пропорции.
Виждано във флората и фауната, във формите на галактиките и дори в ДНК, това правило е толкова разпространено наоколо, че хората са го забелязали още преди хилядолетия. резултатинеговите приложения могат да бъдат проследени в цялата история на изкуството и архитектурата.
Какви са тези удивителни пропорции, които „слепват парчетата от този свят“?
Разбира се, говоря за златното сечение.
Когато природата се нуждае от пропорции, за да събере нещата заедно и да подреди нещата във всякакъв мащаб, тя е склонна да използва златното сечение.
В случай на типография, целта е да се съпоставят размерът на шрифта, височината и дължината на реда по естетически приятен и подреден начин.
И така, може би златното сечение е приложимо за решаването на този проблем?
Математическа типография със златно сечение
Както може би се досещате, отговорът е категорично "да "! И ето как работи.
Първо,font-size a (f)и line-height (l)са свързани чрез коефициента на сходство (h). Основното математическо уравнение изглежда така:
Съгласно това уравнение,оптималната височина на линията ще бъде получена, ако коефициентът на подобие h е равен на златното сечение φ. Това ни дава следното уравнение:
За съжаление не е достатъчно да знаете оптималната височина на реда за даден размер на шрифта.
По-рано разгледахме как всеки от 3-те типографски параметъра (размер на шрифта, височина и дължина на реда) влияе върху другите два.Следователно не можете да говорите за височина на ред или размер на шрифта, без да вземете предвид дължината на реда.
От това следва, че трябва да имаоптимална дължина на линията, съответстваща на оптималната височина на линията от горното уравнение.
Проблемът е, че не се знае точно какво е съотношението между височината и дължината на линията. Знае се само, че дължината на струната трябва да бъде значително по-голяма от нейната височина.
Използвайки най-проститематематически модели, можем да направим обосновано предположение, чевръзката между височината на линията и дължината на линията е експоненциална. Ето едно просто уравнение, за да илюстрира това твърдение:
Тези уравнения са забележителни с това, че за първи път дават солидна математическа основа на параметрите на текста.
Бележка към дизайнерите : Златното сечение на типографията е предназначено да служи като основа за правилна типография. Фактори като x-height на знака и други параметри на шрифта също влияят на типографията и трябва да бъдат взети предвид при окончателното решение за дизайн. Златното сечение на типографията обаче дава най-рационалната отправна точка за работа в тази посока.
Тук обаче има малък проблем: мрежата не е толкова точна, колкото тези уравнения.
Известно е, че уеб дизайнерите са принудени да използват цели числа за неща като размер на шрифта, височина и дължина на реда (и ще продължат да го правят, докато субпикселното изобразяване стане реалност).
Горните уравнения дават висока точност и много десетични знаци, чието просто закръгляне до най-близкото цяло число води до значителни грешки, които в крайна сметка нарушават точността на типографските пропорции.
Изводът е, че мрежата е дискретна и следователно идеалните уравнения, представени по-горе, не са наистина подходящи за фина настройка на параметрите на типографията.
Оказва се, че ако искате да използвате златното сечение на типографията на вашия сайт, тогава ще трябва да коригирате резултатите от тези уравнения.
Промяна на типографията на златното сечение за уеб
За да разберем как се извършва настройката, нека да разгледаме пример.
За шрифт с размер 16 пиксела се получава идеалната височина на редакогато коефициентът h е равен на златното сечение (≈1,61 - Прибл. преводач). Това дава оптималната стойност за височината на линията, която е 25,88854 пиксела. Използвайки тази стойност, можете да изчислите, че съответната оптимална стойност за дължина на линията е 670,21670 пиксела.
Ако се опитате да използвате тези стойности във вашия CSS код, ще се натъкнете на редица проблеми.
Тъй като са разрешени само цели числа, мрежата няма да може да показва височина на реда от 25,88854 пиксела. В най-добрия случай височината на линията ще бъде 26 пиксела.
Но 26 пиксела е повече от оптималната височина на линията, получена от уравнението. И както вече знаем, не можете да промените височината на линията (дори малко!), Без да промените съответната дължина на линията (в противен случай крайните пропорции няма да бъдат „златни“).
Следователно операцията по закръгляване на височината на линията от 25,88854 до 26 пиксела изисква крайната дължина на линията да бъде по-голяма от 670,21670 пиксела.
Тази същност на настройката на параметрите на типографията :
Ако дължината на вашата линия е по-малка от оптималната дължина, тогава съответната височина на линията трябва да бъде по-малка от златното сечение. И обратно, ако дължината на линията е по-голяма от оптималната, то височината на линията също трябва да бъде по-голяма от изчислената.
По-долу има фигура, която илюстрира тази концепция за най-използваните размери на шрифта.
Фигура 5 - За да се запазят геометричните пропорции и четливостта, заедно с увеличаването на дължината на линията, нейната височина трябва да се увеличи. Сивата линия в тази графика представлява златното сечение (φ), докато цветните линии представляват промяната във височината на реда спрямо тази стойност за най-често срещаните размери на шрифта.
Математически казано, коригираните уравнения са повечепо-сложни от уравненията, които сме виждали досега. Но за твой късмет вече свърших упоритата работа по получаването им, така че можеш да се концентрираш върху концепцията и резултатите от нея.
В крайна сметка се нуждаете от 2 коригирани уравнения за различните случаи, които ще срещнете, когато параметризирате типографията. В зависимост от ситуацията ще трябва да определите
коригираната височина на реда, като се знае размера на шрифта и дължината на реда;
или коригираната дължина на реда предвид размера на шрифта и височината на реда.
Изчисленията се извършват с помощта на следните уравнения:
Като използвате второто уравнение, можете да определите коригираната дължина на реда за горния пример с размер на шрифта от 16 пиксела и цяла височина на реда от 26 пиксела.
Коригираната дължина, която поддържа златни типографски пропорции, би била 685,32505 пиксела в този случай. За да използвате тази стойност в мрежата, тя трябва да бъде закръглена до 658 пиксела.
Сега нека да разгледаме друг, по-практичен пример, който показва как можете да промените типографията на вашия сайт точно сега:
Ами ако искате да използвате 16px шрифт за 550px широк текст?
Каква трябва да бъде височината на линията в този случай?
Можете да разрешите този проблем по следния начин:
Получената стойност е 25,00169 пиксела. Отново, за уеб употреба, тази стойност трябва да бъде закръглена до най-близкото цяло число. Стойността на коригираната височина на линията е 25 пиксела.
Типографски калкулатор за златно съотношение
Очевидно изчисляването на голям брой математически формули при работа с типографията на сайта може бързо да се умори.
За да реша този проблем, разработих калкулаторзлатното сечение на типографията, което прави невероятно лесно определянето на нейните параметри за всяка ситуация!
Интелигентният и гъвкав калкулатор ще ви даде златни типографски препоръки въз основа на вашето въвеждане.
Ако посочите размер на шрифта, калкулаторът ще изчисли оптималната височина и дължина на реда за него.
Ако въведете дължина на реда, калкулаторът ще ви покаже двата най-добри размера на шрифта за този ред и двете съответни височини на реда.
Ако посочите както размера на шрифта, така и дължината на реда, получавате цял набор:
Оптимизирани опции за типография за вашия размер на шрифта и дължина на реда.
Най-добрите настройки за типография за дължината на линията, която сте посочили.
Допълнителни стойности на опцията за типография за указаната от вас дължина на низа.
Оптималните стойности на типографията за посочения размер на шрифта.
Опитайте да играете с калкулатора за златно сечение и изпитайте несравнимото качество на типографията!
Специалното значение на златното сечение на типографията
Вече намекнах за това, но сега заявявам открито: нещата, които споделих с вас по-горе, не са ограничени до приложение в мрежата. Всъщност…
Златното сечение на типографията може да се използва за всеки текст във всяка среда.
Книги, вестници, списания, уебсайтове, електронни публикации, каквото искате. Навсякъде можете да се възползвате от подобрените пропорции на този раздел.
Сега, когато сте започнали да гледате на света през призмата на златното сечение, ще видите безброй възможности за оптимизиране на типографията.
Заключение
Златното сечение се проявява в цялата вселена на места, където форма и функция се събират, за да създадат красиви, ефективни и полезни резултати.
Помните ли математическата симфония на типографията?
Благодарение на златното сечение на типографията можете да сте сигурни, че всеки посетител на вашия сайт ще чуезлатна симфония.