Интеграция дизайна мобильных приложений. Android.

Ав­тор @30PP0

Этот до­клад я про­чи­тал на Dribbble Meetup 2013, ко­то­рый про­шел в Москве в День кос­мо­нав­ти­ки. В нём опи­сан мой про­цесс ин­те­гра­ции ди­зай­на — то есть в ка­ком ви­де пе­ре­да­вать при­ло­же­ние от ди­зай­не­ра к раз­ра­бот­чи­ку мо­биль­ных при­ло­же­ний. Вы­бор инт­сру­мен­тов, ко­то­рые я ис­поль­зую в ра­бо­те, и сам про­цесс сфор­ми­ро­ва­лись опыт­ным пу­тём, ме­то­дом проб и оши­бок. На­де­юсь, он по­мо­жет со­хра­нить вам немно­го вре­ме­ни и из­ба­вит хо­тя бы от ча­сти ру­тин­ной ра­бо­ты. Так как пре­зен­та­ция со­дер­жит до­ста­точ­но боль­шое ко­ли­че­ство слай­дов, я ре­шил раз­бить ма­те­ри­ал на две ча­сти. Пер­вая часть — ин­те­гра­ция ди­зай­на под плат­фор­му Android.

Про­бле­ма­ти­ка

А нач­ну я свой рас­сказ с мо­мен­та, ко­гда мы уже на­ри­со­ва­ли ма­ке­ты на­ше­го при­ло­же­ния. Всё вы­гля­дит иде­аль­но, всё вы­ве­ре­но до пик­се­ля.

Мы от­да­ем ма­ке­ты в раз­ра­бот­ку, а на вы­хо­де по­лу­ча­ем ЭТО.

По­че­му?! От­вет оче­ви­ден. Ви­но­ва­ты про­грам­ми­сты, ко­то­рые кри­во всё за­про­га­ли… На са­мом де­ле, НЕТ! Еще до на­ча­ла ра­бо­ты про­грам­ми­стов, ди­зай­нер дол­жен пе­ре­дать им спе­ци­фи­ка­цию ди­зай­на (ТЗ), ко­то­рую ди­зай­нер обыч­но де­ла­ет спу­стя ру­ка­ва, или что еще ху­же, во­об­ще не де­ла­ет. По­это­му про­грам­мист и вы­нуж­ден де­лать всё на своё усмот­ре­ние, раз нету чет­кой ин­струк­ции.

Спе­циф­ка­ция ди­зай­на (ТЗ)

Итак, под спе­ци­фи­ка­ци­ей ди­зай­на я по­ни­маю на­бор фай­лов, ко­то­рые ди­зай­нер пе­ре­да­ет про­грам­ми­стам. По су­ти, их со­зда­ние и есть про­цесс ин­те­гра­ции ди­зай­на. У Microsoft и Google это на­зы­ва­ет­ся blue, red, green lines. У ме­ня это три пап­ки: Metrics, Fonts, Res.

Со­став­ле­нию ТЗ на­до уде­лить долж­ное вни­ма­ние, т.к. имен­но это ви­дит ко­неч­ный поль­зо­ва­тель ва­ше­го про­дук­та, а не ма­ке­ты ди­зай­не­ра.

Android

Рас­смот­рим ин­те­гра­цию ди­зай­на на при­ме­ре 4-х ос­нов­ных в Рос­сии мо­биль­ных плат­форм. И нач­ну я с са­мо­го тя­же­ло­го для по­ни­ма­ния… Android.

Немно­го тео­рии для по­ни­ма­ния даль­ней­ше­го про­цес­са. Ни для ко­го не сек­рет, что экра­ны те­ле­фо­нов име­ют раз­ные раз­ре­ше­ния и раз­ные диа­го­на­ли, то есть экра­ны ха­рак­те­ри­зу­ют­ся раз­ной плот­но­стью. Она из­ме­ря­ет­ся в точ­ках на дюйм. Вы­де­ля­ют 4 ос­нов­ных ка­те­го­рии плот­но­сти экра­на для Android-устройств: LDPI, MDPI, HDPI, XHDPI, XXHDPI (по­ка не бе­рём в рас­чёт). По­это­му, чтобы эле­мен­ты ин­тер­фей­са име­ли оди­на­ко­вый физи­че­ский раз­мер на экра­нах раз­ных устройств, ком­па­ния Google вве­ла аб­стракт­ную еди­ни­цу из­ме­ре­ния — DP.

Не бу­дем вда­вать­ся в по­дроб­но­сти от­ку­да по­яв­ля­ют­ся эти циф­ры, а для се­бя за­пом­ним, что один dp ра­вен од­но­му физи­че­ско­му пик­се­лю для экра­нов с плот­но­стью MDPI. Со­от­вет­ствен­но, для XHDPI-экра­нов, 1 dp бу­дет ра­вен 2 px (та­кая плот­ность, на­при­мер, у Google Nexus 4).

Metrics

Итак, пап­ка Metrics долж­на со­дер­жать фай­лы с раз­ме­ра­ми эле­мен­тов, от­сту­па­ми меж­ду ни­ми и от края экра­на, цве­та од­но­тон­ных эле­мен­тов — то, что де­ла­ет­ся про­грамм­но (на­при­мер, раз­де­ли­те­ли).

Все раз­ме­ры для раз­ра­бот­чи­ков долж­ны быть ука­за­ны в DP.

Я де­лаю ма­ке­ты для XHDPI-экра­нов (768x1280, Nexus 4). А как мы пом­ним, для XHDPI 1 dp = 2 px. Но так как Photoshop, есте­ствен­но, не по­ни­ма­ет dp, а ра­бо­та­ет с пик­се­ля­ми, то сна­ча­ла я де­лаю так, чтобы 1 dp ров­нял­ся 1 px. За­хо­дим в Image, жмём Image Size, и вы­став­ля­ем зна­че­ние 50%. Го­то­во, те­перь 1 dp = 1 px.

Мож­но при­сту­пить, так ска­зать, к «об­раз­ме­ри­ва­нию» ма­ке­та. Де­лать это вруч­ную бы­ло очень уто­ми­тель­но, и недав­но мне по­па­лось на гла­за очень по­лез­ное раcши­ре­ние для Photoshop.

PNG EXPRESS — плат­ное рас­ши­ре­ние, сто­ит 29 бак­сов. Но оно ре­аль­но то­го сто­ит. Для Photoshop, на­чи­ная с вер­сии CS5. Оно поз­во­ля­ет де­лать мно­го по­лез­ных ве­щей, но я ис­поль­зую его, имен­но, для «об­раз­ме­ри­ва­ния».

При­мер

Шаг 1. До­пу­стим, нам на­до ука­зать раз­мер меж­ду икон­кой X (уда­лить) и тек­стом Discard.
Шаг 2. Про­сто вы­де­ля­ем эти два слоя в Photoshop и в PNG EXPRESS жмем Margins.
Шаг 3. Рас­ши­ре­ние са­мо на­ри­су­ет раз­ме­ры. Ес­ли раз­мер по­лу­чил­ся невер­ным, наш ди­зай­нер­ский ко­сяк, ре­дак­ти­ру­ем его как обыч­ный тек­сто­вый слой Photoshop.

Хоть мы по­лу­ча­ем не пол­но­стью ав­то­ма­ти­зи­ро­ван­ный про­цесс, всё же это рас­ши­ре­ние эко­но­мит ку­чу вре­ме­ни.

Fonts

Пап­ка Fonts долж­на со­дер­жать фай­лы со всем, что ка­са­ет­ся шриф­тов: раз­мер, цвет, на­чер­та­ние, Photoshop-сти­ли и т.д. Я вы­нес ее от­дель­но от раз­ме­ров, чтобы про­грам­ми­стам бы­ло лег­че разо­брать­ся в та­ком боль­шом оби­лии вы­но­сок, тем са­мым со­кра­тив ко­ли­че­ство оши­бок.

Все раз­ме­ры шриф­тов долж­ны быть ука­за­ны в SP

1 SP = 1 DP, ес­ли в на­строй­ках раз­мер шриф­та опе­ра­ци­он­ной си­сте­мы уста­нов­лен по умол­ча­нию. Ес­ли у поль­зо­ва­те­ля про­бле­ма со зре­ни­ем, он мо­жет в на­строй­ках си­сте­мы уве­ли­чить шрифт. Ес­ли вы за­да­ли раз­мер шриф­та в SP, то ва­ше при­ло­же­ние под­стро­ит­ся под поль­зо­ва­те­ля и так­же уве­ли­чит шрифт. Ес­ли в дру­гих еди­ни­цах, то шрифт оста­нет­ся неиз­мен­ным.

При­мер

Шаг 1. Ес­ли нам на­до ука­зать шрифт у кноп­ки Done, то
Шаг 2. Вы­де­ля­ем этот слой в Photoshop и в PNG EXPRESS жмем Spec Font Features.
Шаг 3. По­лу­чи­ли пол­ное опи­са­ние шриф­та.

Опять сэко­но­ми­ли ку­чу вре­ме­ни.

Resources

Пап­ка Res долж­на со­дер­жать ре­сур­сы гра­фи­ки для ва­ше­го при­ло­же­ния. Это 4 под­пап­ки для каж­дой плот­но­сти экра­на.

Для это­го я ис­поль­зую дру­гое рас­ши­ре­ние.

Cut & Slice me — бес­плат­ное рас­ши­ре­ние для Photoshop. Толь­ко для CS6. Оно поз­во­ля­ет де­лать всю эту ра­бо­ту в один клик.

Из­на­чаль­но наш PSD-ма­кет дол­жен быть для XHDPI.

При­мер

Шаг 1. Нам на­до на­ре­зать икон­ки для на­ше­го при­ло­же­ния.
Шаг 2. Каж­дую икон­ку по­ме­ща­ем в пап­ку, в ко­нец на­зва­ния ко­то­рой до­бав­ля­ем @. Та­ким об­ра­зом, скрипт опре­де­ля­ет, что эту пап­ку на­до на­ре­зать.
Шаг 3. Пе­ре­хо­дим во вклад­ку Android, жмем Cut all assets.
Шаг 4. Рас­ши­ре­ние ав­то­ма­том на­ре­за­ет на­ши икон­ки для 4-х нуж­ных плот­но­стей экра­на и по­ме­ща­ет их в со­от­вет­ству­ю­щие пап­ки.

Остав­ши­е­ся две кноп­ки в Cut & Slice me для на­рез­ки из вы­бран­ном под­пап­ки и те­ку­ще­го вы­бран­но­го слоя.

Ино­гда воз­ни­ка­ет про­бле­ма «мыль­ных» пик­се­лей, то есть ко­гда икон­ка не по­па­да­ет в пик­сель­ную сет­ку при ре­сай­зе. По­это­му на­до прой­тись по пап­кам, про­смот­реть ка­че­ство вы­пол­нен­ной скрип­том ра­бо­ты. Ес­ли необ­хо­ди­мо, по­пра­вить вруч­ную. Опять сэко­но­ми­ли ку­чу вре­ме­ни.

9 PNG

И еще про гра­фи­ку. Все кноп­ки и плаш­ки для Android на­ре­за­ют­ся не фик­си­ро­ван­но­го раз­ме­ра, а де­ла­ют­ся «ре­зи­но­вы­ми».

Для это­го ис­поль­зу­ет­ся фор­мат 9.png. Де­ла­ют­ся та­кие фай­лы из обыч­ных png в NinePatchEditor. По су­ти, к ис­ход­ной кар­тин­ке до­бав­ля­ет­ся с каж­дой сто­ро­ны еще один пик­сель, за­ли­тый чер­ным цве­том. Чер­ный пик­сель сле­ва от­ве­ча­ет за то, как бу­дет «тя­нуть­ся» ва­ша кар­тин­ка по вер­ти­ка­ли, свер­ху — за го­ри­зон­таль. Пик­сель спра­ва и сни­зу — за раз­ме­ще­ние кон­тен­та внут­ри кноп­ки.

Ис­точ­ник