Дизајнирање за додир

Аутор: Peter Berry

Датум Стварања: 18 Јули 2021

Ажурирати Датум: 13 Може 2024

Видео: Самый Бюджетный Дом за 2 недели своими руками. Шаг за шагом (Часть 1)

Садржај

01. Основно правило
02. Ја, Робот
Веб: апликација унутар апликације
03. Таблете, заузмите своје углове
04. Закључак
05. Превелика да би пропала
06. Не гужвај ме
Свиђа вам се ово? Прочитајте ово!

Сјајни дизајни за мобилне уређаје чине више од самог постављања ципела на мале екране: они чине пут за прсте и палчеве, прилагодећи својеглаве тапке наших неспретних цифара. Физичност ручних интерфејса дизајнере одводи даље од конвенција о визуелном и информативном дизајну, и на територију индустријског дизајна. Код додирних екрана у питању је права ергономија. Није само како пиксели изгледају, већ и како се осећају у руци.

01. Основно правило

Дизајн екрана осетљивог на додир захтева промишљену свест о томе где се прсти лежерно одмарају на уређају. Ухватите телефон, на пример, у једну руку и ако палцем не затакнете луду канџу, увек тапкате палцем. За телефоне, дизајн на додир значи дизајн за палац.

Палчеви су чудесни. Наши палци, заједно са наклоношћу трачевима славних, су те које нас одвајају од звери, али имају ограничен домет и флексибилност. Иако палац може успети да превуче цео екран свих телефона, осим највећих, само око трећине екрана налази се на територији без напора - на дну екрана на страни насупрот палцу.

Поставите примарне циљне додире у ову врућу зону лупања палца. На пример, када држите телефон у десној руци, палац природно пада у лук у доњем левом углу екрана:

То је важан разлог зашто се траке са алаткама и навигација обично спуштају на доњу ивицу телефонских интерфејса - супротно ономе што смо навикли за традиционалне интерфејсе екрана. Конвенције за радну површину софтвера стављају меније на врх екрана или прозора, а веб локације обично постављају примарну навигацију на врх страница. Наш ограничени опсег палца, међутим, преврће ту конвенцију, а навигација и примарни циљеви додира тону на дно.

Пристрасност палца на дну екрана је важнија од леве и десне. Испоставило се да већина нас лако пребацује између леве и десне руке када користи своје телефоне. Корисници дешњаци често фаворизују или прелазе у леве руке (на пример, када пишу), а левичари такође често иду десном. Иако скромна већина корисника иде мало чешће десном руком него левом, то није довољно јак тренд да се дизајнери нервирају.

Правило дна екрана, међутим, важи без обзира коју руку користите и даје вам савете о томе како да организујете визуелну хијерархију циљева додира. Често коришћени тастери требало би да заузимају дно екрана ради лакшег додиривања, док друге контроле не би требало гурнути. Договор је у иОС-у, на пример, постављање дугмади „Уреди“ у горњем десном углу, у једноставном приказу, али таман изван домета да случајне промене буду мање вероватне.

Спуштање примарних контрола на дно екрана није само ствар удобности палца, већ и једноставна чињеница да прсти заклањају екран. Дно је место где лебдеће руке најмање покривају садржај. Да бисте садржај имали у јасном приказу, поставите га изнад контрола апликације. Ово је познати, здраворазумски изглед који се односи на већину физичких уређаја: иПод, калкулатори, мобилни телефони, ваге за купатило. Садржај на врху, контроле на дну.

02. Ја, Робот

Ово једноставно правило одозго / одоздо је сложено због Андроид-ових системских дугмади „морам бити ја“ који грле дно Андроид уређаја. (Пре издања Андроид 3 „Саћа“, то су увек била физичка дугмад; почев од Андроид 4 „Ице Цреам Сандвицх“, то су сада виртуелна дугмад.) Ова системска дугмад припадају дну екрана из свих до сада описаних разлога, али они такође уводе збуњујуће прсте за контроле специфичне за апликацију. Додавање контрола на дну екрана значи слагање трака са алаткама једну на другу; авај, грешке при додиру су посебно честе за сложене контроле у дну екрана. У зони са великим прометом у којој палац има тенденцију да лебди и заклања поглед, судари дугмета су неизбежни. На пример, овај изглед почетног екрана Андроид-а позива на грешке:

Увек треба избегавати слагање контрола у додирном интерфејсу, посебно на дну екрана. Нажалост, то значи да Андроид апликације треба да имају своје контроле у врху екрана како би се избегло пренатрпавање системских дугмади. Није идеално: ово ставља навигацију изван зоне палца, а када додирнете дугме, рука прекрива читав екран. Али то је боље од алтернативе која позива на грешке масних прстију.

За Андроид, навигација и контроле апликација треба да лебде на врх. Ово је обрнуто од конвенције за иПхоне, где дугме Почетна не ствара исту врсту конкуренције као Андроид дугмад. Упоредите апликацију Фоурскуаре за Андроид, лево и за иПхоне да бисте видели резултујућу разлику:

Веб: апликација унутар апликације

Смернице против слагања стварају сличне проблеме веб локацијама на мобилним уређајима. Веб странице и веб апликације функционишу, наравно, у оквиру друге апликације, прегледача. На многим мобилним платформама прегледач има своја дугмад и контроле које такође могу створити сукобе у корисничком интерфејсу за веб навигацију. То значи да би требало да избегавате „причвршћивање“ навигације за дно екрана веб локација, јер би то траку с алаткама веб странице ставило на врх прегледача. (Ова смерница је погодно појачана чињеницом да позиција: фикед није равномерно подржана у ЦСС-у у мобилним прегледачима, па му је глатко залепити траку с алаткама на дно.)

За разлику од Андроид-а, решење није померање веб навигације на врх, већ на дно целе странице. Будући да Цхроме претраживач већ једе некретнину у неким мобилним претраживачима, последње што треба да урадите је да још више истиснете садржај гушењем врха веб странице са опцијама за навигацију.

У својој изврсној књизи Прво мобилни, Луке Вроблевски пише, "Превише мобилних веб искустава ... започните разговор списком опција за навигацију уместо садржаја. Време је често драгоцено на мобилним уређајима, а преузимања могу коштати новац, па приведите људе оно због чега су дошли као што можете."

Веб искуства треба да воде садржајем и ограниче примарну навигацију на дно екрана. Вроблевски заговара користан дизајн за ово, који можете видети на делу на мобилној веб локацији Ад Аге, где је сва навигација постављена иза дугмета Мену на траци с алаткама на врху екрана. Додирните дугме и читав екран се тренутно попуњава опцијама за навигацију. Изглед менија је тренутни и чини се да се појавио слој, али у стварности је то заправо сидрена веза до навигације на дну странице.

Овај приступ има неколико предности, пише Вроблевски:

„Овај дизајн користи минималну количину навигационих елемената (само један линк на врху), пружа људима прилику да се окрећу и истражују када дођу до краја садржаја, не дуплира садржај другог менија и (најбоље од свих) захтева само једноставну сидрену везу. Тачно: нема фанци ЈаваСцрипт-а, прекривача или одвојених навигационих страница за одржавање - само сидро које води до дна странице. То је као ХТМЛ 0. "

„Садржај одозго, контроле одоздо“ делује као једноставно правило, али као што сте видели, за дизајнере апликација има различите исходе када оперативни систем или прегледач полажу право на ову премијску некретнину. На крају то делује тако:

На иПхонеу ставите контроле апликација на дно екрана
На Андроиду ставите контроле апликација на врх екрана
За веб, ставите навигацију на дно странице (за разлику од дна екрана)

Али ове смернице су специфичне за телефоне; шта се дешава са већим екранима осетљивим на додир? Са иПадом, правила се опет мењају.

03. Таблете, заузмите своје углове

Правило палца и даље важи за иПад, осим што је зона палца другачија јер је држимо другачије. ИПад држање зависи од вашег става. Устајући, морате да тапнете у две руке. Седећи за столом, вероватно ћете га подупирати једном руком, а другом тапкати. Седећи у столици, склони сте да је одмарате у крилу и тапкате другом руком. Лежећи или заваљени, одмарате ствар на трбуху, подупирући је једном руком, тапкајући другом.

У свим овим хватаљкама прсти падају на различита места на уређају, а сваки став резултира држањем уређаја на различитим растојањима. На пример, иПад држимо најближи стојећи, на пример, а најудаљенији док лежимо или заваљени.

Колико год били различити ови иПад уређаји, две су ствари истините за све њих. Прво, иПад обично држимо у горњој половини уређаја како бисмо га најбоље искористили, а то значи да палчеви теже да се слегну у горњу трећину екрана, близу углова. Друго, већи екран иПада отежава целу ствар једним погледом што је брже могуће помоћу телефона. Као и код дизајна штампе, визуелна пажња публике се природно фокусира на врх таблета, а хијерархија информација дизајна би то требало да одражава. Другим речима, на иПаду очи и прсти природно заузимају врх уређаја. (Понекад се доњи део уопште и не види. У најленијим и можда најчешћим положајима - лежећи или заваљени - доња маска има тенденцију да нестане у ћебадима, џемперима и меканим стомацима.)

За разлику од телефона, примарне контроле и дугмад обично би требало да иду на врх иПад апликација. Конкретно, требало би да забију горње углове, где палчеви обично лебде када држите иПад. Инстапапер и Твиттер за иПад показују добар пласман:

Избегавајте постављање контрола у горњи центар, међутим, јер то значи да ће ваша рука покривати садржај када користите та дугмад. Контроле никада не би смеле да иду непосредно изнад садржаја на који желе да утичу, па је гуркање у углове користан образац. На пример, Даили фор иПад нуди клизач у горњем центру за скенирање страница издања, али када то учините, рука прекрива сличице, чинећи ствар тешком за употребу.

04. Закључак

Даили’с погрешан корак открива изузетак од смерница за горњи угао и открива категорију случајева у којима би контроле требало да иду на дно. Кад год контроле приказују или утичу на садржај, они би се увек требали појавити испод или са стране тог садржаја, никако изнад. На пример, апликација иПад за Сиднеи Морнинг Хералд има нов начин брзог скенирања свих чланака у дневном издању повлачењем прста по индексу индикатора странице на дну екрана. Будући да та контрола открива високу листу наслова, прикладно је те контроле поставити на дно екрана; постављање на врх значило би да ће ваша рука покрити листу када додирнете контроле.

Па да ли је горе или доле? Ево разлике:

ИПад-ови горњи углови идеални су за дугмад за навигацију и алатке једним додиром за радње попут дељења, додавања омиљених или брисања.
Дно иПад апликација најбоље је за контроле које прегледавају или прегледавају садржај на горњем платну.

Због тога је сличице страница за књиге или часописе најбоље поставити при дну. Слично томе, ако сте дизајнирали апликацију за израду мапа која је укључивала палету оријентира за повлачење на мапу, та палета би требало да иде на дно како бисте могли да комуницирате са мапом без да је непрестано покривате целом руком.

05. Превелика да би пропала

Ако начин на који држите уређај диктира место контрола, величина вашег прста је та која одлучује колико те контроле треба да буду велике. Дизајнери додира морају циљеве додира учинити превеликим да би пропали, здепасте мете које људи могу додирнути без фокуса који прелази око.

Колико је довољно велик када су у питању циљне мете? Па, која је величина врха прста? Све платформе овде нуде смернице, али као и обично је Аппле најнепоузданији и инсистира на ономе што сматрам најбољим водичем за све мобилне платформе: поставите циљеве за додиривање на најмање 44 тачке или приближно 1/4 "или 7 мм. За мрежу, минимум од 44 пиксела такође добро функционише.

Дизајнери навикнути на радну површину, овај велики осећај имају и огромне и играчке, али само се окрећите с њим. Громогласна дугмад и гигантске додиривачке циљеве не само да је лако погодити, већ их је лако видети и повремено ометеном кориснику мобилног уређаја.

У савршеном свету, све циљне мете би требале бити најмање 44к44. Као и у већини ствари, понекад је потребан и компромис. Чак и иПхонеов стандард с времена на време подмеће правило од 44 пиксела.На пример, на тастатури су тастери високи 44 тачке, али широки само 30 тачака - слично, у пејзажном приказу тастери су широки 44, али високи 38 тачака. Аппле овде нема много избора; пресудно је у овај приказ укључити пуну КВЕРТИ тастатуру, али сви тастери једноставно неће одговарати тастерима 44 к 44. Нешто мора да се да.

Када ограничени простор притисне циљне мете, ево правила које сам пронашао најбоље функционише: све док је циљни метар висок најмање 44 тачке, другу димензију можете стиснути на само 30 тачака ако заиста морате . То значи: минимална практична величина било које циљне мете је 44 к 30.

06. Не гужвај ме

Ваш верни аутор је провео много година своје промашене младости са финим Цасио-овим рачунарским сатом везаним за зглоб, пре него што га је коначно повукао 1985. Проблем нису биле само његове мале контроле или његов пригушујући ефекат на моје изгледе за краља матуре. Дугмад су била преблизу једно другом. Циљали бисте на петицу, али смислите двојку или осмицу, ко зна - то је више било коло среће него калкулатор. Другим речима, величина дугмета није једини одлучујући фактор тачности тапкања; морате узети у обзир и размак.

Када дизајнирате за мале екране, неизбежно ћете доћи у искушење да се носите са тим изазовом пренатрпавањем интерфејса. "Само ћу их гурнути мало ближе. Само ћу додати још једно дугме на ову траку с алаткама." Да цитирам популарну фразу врхунца калкулатор-сата: „Само реци не“.

Што ближе стиснете дугмад, та дугмад би требала бити већа. Размотрите пар апликација за ВоИП позивање за иПхоне, Скипе и Цалл Глобал Апп. Обоје раме тастера на тастатури затварају једно уз друго, али то надокнађују чинећи их много већим од минимума 44к44. Упркос њиховој непосредној близини, тастери остају лако притиснути.

Мада се две апликације разликују, налази се на дну екрана. Обе апликације слажу дугмад на врху траке са картицама за навигацију, што, као што је горе речено, никада није идеално. Али зато што су та дугмад у Скипеу тако велика (лево), проблем је ублажен. Међутим, у апликацији Цалл Глобал Апп тастери који држе врх траке са картицама сувише су уски, а њихова близина значи да су вероватно грешке. Иако су технички већи од минимума 44к30, недостатак размака и слагање на дну екрана подложно грешкама доводе до проблема. Изглед захтева веће дугмад или издашније размаке.

То је кључна лекција: иако се можда чини контра-интуитивним, успех интерфејса са малим екраном ослања се на велике елементе, крупне тастере и прозрачни размак. Екрани су можда мали, али наши прсти (а често и пажња обухватају) нису. Дизајн с дебелим прстима на уму.

Јосх Цларк је дизајнер интеракција специјализован за стратегију мобилног дизајна и корисничко искуство. Аутор је књиге Тапвортхи: Десигнинг Греат иПхоне Аппс. Јосх-ова одећа Глобал Мокие нуди консултантске услуге и обуку како би помогла медијским компанијама, дизајнерским агенцијама и креативним организацијама да изграде мобилне апликације које су вредне пажње.