Лекция · 4.3

Мобильді қосымша интерфейсі: талаптар мен компоненттер

Смартфонды қалай ұстайсың? Көбіне — бір қолыңмен, бас бармағыңмен басқарасың. Осы қарапайым әдет мобильді қосымша дизайнына тікелей әсер етеді. Бүгін неге кейбір қосымшалар «ыңғайлы», ал кейбірі «ыңғайсыз» көрінетінін түсінеміз.

Пайдаланушы интерфейсі деген не
Анықтама
Пайдаланушы интерфейсі — пайдаланушының қосымшамен әрекеттесуіне арналған форма; ол пайдаланушыға түсінікті әрі ыңғайлы болуы керек.

«Ыңғайлы» деген субъективті сөз сияқты көрінеді, бірақ шын мәнінде оның артында нақты статистика тұрады.

94% статистикасы не үшін маңызды

Смартфон қолданушыларының 94%-і құрылғыны тігінен және оң қолында ұстайды, экранды бас бармақпен басқарады. Бұл фактіні білместен интерфейс жасасаң, көп қолданушыға ыңғайсыз шығады.

Осыдан нақты дизайн қағидасы туындайды: экранның сол жақ жоғарғы бұрышы — маңызды ақпаратты орналастыруға (себебі көз алдымен соған түседі), ал экранның төменгі бөлігі — навигацияға (себебі бас бармаққа ең жақын аймақ осы).

👍
Аналогия: смартфон экраны — бір қолмен ұстайтын дөңгелек басты асхана құралы сияқты. Бас бармағың жете алатын аймаққа ең жиі басатын түймелерді қоясың, ал алыс жерге — сирек керек нәрсені.

Интерфейс жобалауда қолданылатын негізгі компоненттер: Image (сурет/иконка қосу), Text (мәтін көрсету — қаріп өлшемін реттеу арқылы), батырмалар мен басқару элементтері.

Практика: төтенше жағдай қосымшасының прототипі
Есеп (оңай): «Komekshi» қосымшасының түпнұсқасы

Берілді: төтенше жағдайда қажетті қызметтерге қоңырау шалатын қосымша керек: өрт қауіпсіздігі, полиция, жедел жәрдем, құтқару қызметі, сенім телефоны.

Табу керек: қосымшаның интерфейс прототипі.

Шешуі:

1. Қосымшаға кіретін алты қызметті анықтау.

2. Pidoco-да жаңа жоба ашып, Android Label өлшеміндегі бет құру.

3. Әр қызмет үшін Image компонентін (иконка) қосу.

4. Қоңырау шалынатын нөмірді көрсету үшін Text компонентін қосып, қаріп өлшемін 18-ге орнату.

5. Ең маңызды қызметті (мысалы, жедел жәрдем) экранның сол жақ жоғарғы бұрышына, навигация батырмаларын төменгі бөлікке орналастыру.

Неге орналасу орны кездейсоқ емес? Төтенше жағдайда адам ЖЫЛДАМ әрекет етуі керек — маңызды түйме қолайсыз жерде тұрса, драгоценты уақыт зая кетуі мүмкін.

Жауабы: алты қызмет нөмірін қамтитын, бас бармаққа ыңғайлы орналасқан «Komekshi» қосымшасының интерфейс прототипі.

🎯 ҰБТ байланысы
Интерфейс дизайнының статистикалық негізін есте сақтау керек.
1
Қолданушылардың 94%-і смартфонды тігінен, оң қолмен, бас бармақпен басқарады.
2
Маңызды ақпарат — сол жақ жоғарыда, навигация — экранның төменгі бөлігінде.
3
Интерфейс тек «әдемілік» емес, ол пайдаланушының нақты іс-әрекетіне негізделеді.
Сабақ қорытындысы
  • Пайдаланушы интерфейсі — қосымшамен әрекеттесу формасы, түсінікті әрі ыңғайлы болуы керек.
  • Қолданушылардың 94%-і смартфонды тігінен, оң қолмен, бас бармақпен басқарады.
  • Дизайн қағидасы: маңызды ақпарат — сол жақ жоғарыда, навигация — төменде.
  • Прототип жасауда Image, Text компоненттері мен олардың орналасуы маңызды рөл атқарады.