UI/UX Dizaynı

UX məhsulun necə işlədiyini müəyyən edir; UI bu qərarın göründüyü kimidir. Heç biri tək başına kifayət deyil - biri aydınlıq, digəri etibarı çatdırır.

case study

Bir ekranda 13 sahənin köçürülməsi

Dediklərimizi öz məhsulumuzda həyata keçirdik. dmu ONE 13 biznes sahəsini və maliyyə, satış, CRM, layihə, əməliyyatlar, inventar, satınalma, insan resursları, marketinq, hesabat, arxiv və parametrlər daxil olmaqla 67 funksiyanı vahid mobil axında birləşdirir. Aşağıdakı faktiki ekran görüntüsü bu sadələşdirmənin interfeysdə necə əks olunduğunu göstərir.

Android telefonunda dmu ONE tətbiqinin əsas ekranı
  • Naviqasiya13 sahə bir alt menyuda deyil; tez-tez istifadə olunanlara üstünlük verən bir iyerarxiyada.
  • məlumat iyerarxiyasıGündəlik əməliyyat yuxarıdadır, hesabat və parametrlər bir qat geridədir.
  • kontrastVurğulanan rəng yalnız tədbir görülməli olduğu yerdədir; qalan interfeys səssiz qalır.

01

İki fərqli fən, bir təcrübə.

UX (istifadəçi təcrübəsi) dizaynı məhsulun kimə aid olduğunu, hansı problemi həll etdiyini və bu həllə çatmaq üçün hansı addımların atıldığını müəyyən edir. Tədqiqat, informasiya arxitekturası, istifadəçi axınları və istifadəyə yararlılıq testi bu intizamın alətləridir. UI (istifadəçi interfeysi) dizaynı bu qərarların necə görünməsi və hiss edilməsidir: rəng, tipoqrafiya, düymələrin vəziyyəti, mikro qarşılıqlı əlaqə.

İkisini ayırd etmək ibrətamiz olsa da, faktiki işdə onlar ayrılmazdır. Mükəmməl görünən, lakin istifadəçi axtardığını tapa bilməyən interfeys UI uğuru, UX uğursuzluğudur; Düzgün axını olan, lakin özünə inam yaratmayan dizayn bunun əksidir. Yaxşı bir məhsul hər ikisinin eyni anda doğru olmasını tələb edir.

02

Əvvəlcə quruluş, ikinci ekran.

UX prosesi ekranla deyil, suallarla başlayır: istifadəçi burada nə etməyə çalışır, ona ilk olaraq hansı məlumat lazımdır, hansı addım lazımsız sürtünmə yaradır? Bu sualların cavabları informasiya arxitekturasını - hansı məzmunun hara və hansı iyerarxiyada getdiyini müəyyən edən skeleti müəyyənləşdirir.

İnformasiya arxitekturası aydın olduqdan sonra istifadəçi axınları və aşağı detallı tel çərçivələri işə düşür. Bu mərhələdə hələ heç bir rəng və ya mətbəə yoxdur; yeganə sual axının məntiqli olub-olmamasıdır. Bu mərhələdə sınaq ucuz başa gəlir - qutunun yerini dəyişdirmək təkmilləşdirilmiş ekranın yenidən kodlaşdırılmasından qat-qat azdır.

03

Ardıcıllıq fərdi ekranlardan deyil, sistemdən gəlir.

UI dizaynı vizual dilin kabel çərçivəsinin üstünə qoyulması deyil; Bu, özlüyündə bir mühəndislik intizamıdır. Düymə yalnız bir dəfə tərtib edilmir - o, normal, hover, sıxılmış, əlil və yüklənmiş vəziyyətlərlə hazırlanmışdır. Bu vəziyyətlərin hər biri əskik olduqda, istifadəçi interfeyslə "danışa" bilmir.

Buna görə yetkin UI işi fərdi ekranlar deyil, komponentlər kitabxanası yaradır: təkrar istifadə edilə bilən kartlar, forma sahələri, nişanlar, boşluq qaydaları. DMU-nun öz interfeyslərində açıq/tünd mövzu dəstəyi də bu sistematik yanaşmanın nəticəsidir – bir komponent dəsti iki fərqli işıqlandırma şəraitində ardıcıl qala bilər.

04

Əlçatanlıq əlavə qat deyil.

Adekvat rəng kontrastı, oxuna bilən şrift ölçüsü, toxuna bilən düymə sahələri və ekran oxuyucuları ilə uyğun etiketləmə – bunların hamısı dizaynın özündədir, sonradan “əlçatımlılıq yeniləməsi” kimi əlavə edilmiş örtük deyil. Görmə qabiliyyəti zəif olan bir istifadəçi üçün qeyri-kafi kontrast, məhdud motor bacarıqları olan bir istifadəçi üçün kiçik bir toxunma sahəsi kimi real bir maneədir.

Bu prinsiplər həm də hər kəs üçün daha yaxşı təcrübə yaradır: yüksək kontrast günəş işığında da oxunur, böyük toxunma sahələri hərəkətdə olan istifadəçini də narahat etmir. Əlçatanlıq dar istifadəçilər dairəsi üçün deyil, faktiki istifadə şərtlərinin tam spektri üçün dizayn deməkdir.

05

Proses iddia deyil, sübutdur.

13 biznes sahəsini və 67 funksiyanı vahid mobil proqramda birləşdirmək nəzəri UX məşqi deyildi – bu, tədqiqat, məlumat arxitekturası, prototipləşdirmə, istifadəyə yararlılıq testi və təkrar təkrar təkrarlama tələb edən əsl problem idi. dmu ONE bu prosesin nəticəsidir və DMU-nun UI/UX-ə yanaşmasını təsvir etməyin ən dürüst yolu onu birbaşa göstərməkdir.

Mobil Tətbiq İnkişafı: Modullarınızın sayına görə miqyas alan xüsusi mobil proqramlar