Наша самая заметная техническая проблема с прототипированием интерфейсов – растеризация текста. Алгоритмы растеризации текста заметно отличаются в Windows (и, соответственно, в стационарном ПО, в частности – во всех браузерах, кроме Safari) и в программах авторинга. В результате всякий раз, когда нам важны характеристики текста в интерфейсе (например, влезает строка или не влезает, насколько она хорошо читается в соотвествующем кегле) приходится работать чуть ли не наобум.
- В InDesign растеризация своя. На части объектов её можно подавить, но тоже получается плохо.
- В PDF растеризация тоже своя; отличия от InDesign невелики, но заметны.
- В Photoshop сразу несколько алгоритмов растеризации, но ни один не совпадает с алгоритмом Windows.
- Как ни странно, в Fireworks, который ныне продается как средство прототипирования, тоже свой растеризатор. Его ужас в том, что он растеризует похоже на Windows, но использует какие-то внутренние и непонятные единицы измерения (восемь пунктов в Fireworks ≠ восьми пунктам в Windows для обоих стандартных разрешений). Кроме того, он что-то делает с апрошами, так что строки при равных кеглях получаются немного другой длины.
- Я возлагал большие надежды на Pencil, но у него те же проблемы, что и в Fireworks.
Сейчас мы это проблему никак не решаем за неимением решения. У нас есть тестовая таблица кеглей стандартных шрифтов в Windows и только. Поэтому прошу помощи зала – в чём лучше всего сейчас моделировать стандартный Windows-набор?
3 июля 2009 в 13:17
Когда-то я наткнулся на плагин к фотошопу, очень близко имитирующий сглаживание Windows. Стал изучать проблему глубже и выяснил интересный момент.
У разных ЖК-мониторов в пикселе разная последовательность субпикселей(1/3 пикселя с определенным цветом). У каких-то компаний стандарт R-G-B, а у каких-то B-G-R.
Windows при растеризации шрифта пользуется субпикселями, то есть включает не весь пиксель,а только некоторые его части. Так как последовательность субпикселей разная, то и метод сглаживания чуть отличается (хотя алгоритм общий).
Так вот, большим удивлением был тот факт, что скриншот со сглаженным Windows текстом, сделанный на одном мониторе может некорректно отображаться на другом мониторе (насколько помню, в паре несовместимых мониторов фигурировал NEC). Выходит, что плагин к фотошопу не подходит, просто картинкой не обойтись — нужна среда, которая бы при отображении растеризовала текст виндовым способом.
Мне кажется, поддержки такого сглаживания в продукатх Adobe можно и не ждать, мне профит не очевиден. Но они ведь не так давно открыли стандарт PDF, может кто-то, хоть тот же микрософт, сделает просмотровщик пдф с нужным сглаживанием.
Да, есть уже готовая среда для разработки интерфейсов от Microsoft — Expression Blend
3 июля 2009 в 13:35
Хм, пошел искать нет ли официального Microsoft’овского просмотровщика PDF и наткнулся на программу Foxit Reader, которая при сглаживании использует субпиксели. http://www.foxitsoftware.com/
Пока не понял так же, как windows, но внешне похоже. Правда размеры шрифты не совпадают, надо ещё поиграться с разрешением.
3 июля 2009 в 14:33
Хм, подгонять текст таким образом — это как-то неправильно. А что делать, если нужно будет поправить строку из-за изменения функциональности? Или, оужас, сделать локализацию, после чего все строки поплывут? Я уж не говорю о том, что программы иногда приходится портировать на другую платформу, где растеризация выглядит по-другому (Мак) или вообще неизвестно как (Линух). Не логичнее ли использовать решения с “растягивающимся” дизайном? (большая часть современных тулкитов, вроде Qt/Gtk, умеют “растягивать” диалоги под содержащийся текст)
3 июля 2009 в 16:00
Это одна из причин, почему я люблю делать прототипы в хтмле. Да, да, всё понимаю. Но все равно люблю
3 июля 2009 в 17:02
Если правильно вас понял, то кроме Сафари 3. В 4-м Сафари для Виндоуса по умолчанию используется ClearType.
4 июля 2009 в 13:35
Самое простое - заверстать в хтмл. Есть визио еще, там можно выбирать метод сглаживания.
2Золотов Андрей
дайте ссылочку чтоли
4 июля 2009 в 16:41
2 frst: Ссылочку на что? На Foxit Reader дал ссылку выше.
4 июля 2009 в 21:52
ссылку на foxit reader я могу найти сам
а вот с “плагин к фотошопу” все сложнее
4 июля 2009 в 23:01
Ну, если это настолько критично… С учетом замечания Андрея о том, что растризация меняется от монитора к монитору, и что для “кошерной” растризации действительно нужна не столько среда проектирования, сколько среда отображения, можно сделать забавное умозаключение: использовать в качестве растризатора саму Windows. Т.е. проще в какой-нибудь визуальной среде программирования экраны и набросать. Внешний вид будет не очень сложно создать. А если времени/ума/сил хватит, то в прототипе может даже некая интерактивность появиться. Причем “идентичная натуральной”
Visual Studio? Blend? Если нужна сверхдостоверность, то работать надо на инструменте заказчика. Собственно “1C”, начиная с какого-то момента, просил создавать именно в их внутреннем конструкторе.
P.S. Все вышесказанное не имеет никакого отношения к Web и HTML. Не вижу смысла задумываться над растеризацией если неизвестно каким на самом деле шрифтом и размером все это будет отображаться. Тут дизайнеру надо играть в другие игры.
6 июля 2009 в 12:51
frst: Sharptype 3.0 http://photoshop.pluginsworld.com/plugins/adobe/659/graphest/sharptype-3-0.html
14 июля 2009 в 21:19
Влад, у тебя же есть спец который даже статью написал про Expression Blend.
19 августа 2009 в 16:30
на сколько я знаю, в win за эти вещи отвечает GDI
есть всякие инструменты, позволяющие рисовать в нём
один из них — vvvv.org.