iPhone Duo-nun dairəvi status ikonu: veb sayt dizaynı üçün 5 dərs

9 sentyabrda Apple ilk qatlanan iPhone-u təqdim etdi. iPhone Duo 1 999 dollardan başlayır, içəridə 7.6, çöldə 5.4 düymlük ekran var. Hamı menteşədən, qatlanma xəttindən, qiymətdən danışırdı. Bizim diqqətimizi isə ekranın küncündəki kiçik bir dairə çəkdi.

İlk iPhone-dan bəri ekranın yuxarısında yan-yana duran üç ikon, yəni Wi-Fi, mobil şəbəkə və batareya, indi bir dairənin içindədir. Dizayner Andreas Storm bunu Threads-də bir cümlə ilə paylaşdı və post bir gün ərzində 22 mindən çox bəyənmə topladı.

SaytPro-da hər gün biznes saytlarının interfeysi üzərində işləyirik. Bu yazıda həmin kiçik qərarın arxasındakı məntiqi açırıq və onu veb sayt dizaynına necə tətbiq etməyi göstəririk.

iPhone Duo-da status zolağı necə dəyişdi?

Apple press relizində bunu belə təsvir edir: status zolağı artıq ekranın küncünə yerləşən dairəvi, çevik bir sistemdir və Wi-Fi, şəbəkə gücü, batareya kimi məlumatları göstərir.

Dairə tək dəyişiklik deyil. Apple-ın developerlər üçün dizayn qaydalarına görə, Dynamic Island, status zolağı, alətlər paneli və tab bar ekranın yan tərəfinə köçüb. Bütün sistem elementləri üfüqi zolaqdan çıxıb şaquli bir sütuna yığılıb.

Dərs 1. Dizayn qərarı problemdən başlayır, zövqdən yox

Bu dairə gözəl göründüyü üçün yaranmayıb. Apple-ın qaydalarında səbəb açıq yazılıb: çöldəki ekran digər iPhone-lardan daha enli və daha qısadır. Hündürlük qıt resurs olanda yuxarıdakı hər piksel bahalaşır. Üç ikonu bir yerə yığmaq məzmuna şaquli yer qazandırır.

Yəni dairə estetik seçim yox, bir layout qərarının nəticəsidir. Yaxşı veb sayt dizaynında da forma həmişə bir problemə cavab verir.

Dərs 2. Eyni suala cavab verən siqnalları birləşdirin

Wi-Fi, şəbəkə və batareya əslində eyni suala cavab verir: telefonum işləyirmi, bağlıyammı? Bir sual varsa, cavab da bir yerdə olmalıdır.

Bu, UX dizaynda yaxşı bilinən bir prinsipdir. Nielsen Norman Group-un izah etdiyi ortaq sahə prinsipinə görə, bir sərhədin içində duran elementləri insanlar bir qrup kimi qəbul edir. MIT tədqiqatçılarının 2007-ci il araşdırması isə göstərir ki, ekrandakı səliqəsizlik lazım olanı axtarıb tapmağı çətinləşdirir.

Üç ayrı ikon gözün üç dəfə dayanması deməkdir. Bir dairə isə bir baxışdır.

Dərs 3. Proqram təminatı avadanlığın formasını davam etdirsin

Dairə təsadüfən küncdə deyil. Apple 2025-də Liquid Glass dizaynını təqdim edəndə yazmışdı ki, idarəetmə elementləri cihazın yuvarlaq küncləri ilə konsentrik şəkildə yenidən qurulub. Ekrandakı forma cihazın öz əyrisini davam etdirir.

Bu yanaşmanın tarixi də var. 2022-də kamera kəsiyi Dynamic Island-a çevriləndə Apple onu avadanlıqla proqram arasındakı sərhədi silən dizayn kimi təqdim etdi. Maneə idi, xüsusiyyətə çevrildi. iPhone Duo-da isə daxili kamera ekranın altında gizlənir və yalnız lazım olanda görünür.

Dərs 4. Kiçik detal danışılan detaldır

Apple press relizində bu dəyişikliyə cəmi bir cümlə ayırıb. Amma internetdə ən çox müzakirə olunan detallardan biri məhz bu oldu. Dizayn səhifələri "Dynamic Island, yoxsa simmetrik künc: hansı daha yaxşıdır?" sualını müzakirəyə çıxardı.

İnsanlar özlərinin kəşf etdiyi şeyi paylaşırlar. Kiçik, amma düşünülmüş detal müştəriyə "bunu mən tapdım" hissi verir və məhsul özü reklama çevrilir. Hər şeyi reklam mətnində danışmaq lazım deyil.

Dərs 5. Hər sadələşdirmə bir güzəştdir

Hər kəs bu dəyişikliyi bəyənməyib. Digital Trends-in rəy yazarı açıq yazır ki, bu dəyişikliklər hər kəsin, o cümlədən özünün, xoşuna gəlməyə bilər.

Üç ikonu birinə çevirəndə hər birinin ayrıca oxunması çətinləşə bilər. Ona görə yaxşı birləşdirmə təkcə yer qazanmaq deyil: normal vəziyyət sakit görünməli, problem isə, məsələn batareyanın bitməsi, dərhal gözə çarpmalıdır.

Veb sayt dizaynında bunu necə tətbiq etmək olar

Çox biznes saytının yuxarı zolağında belə bir mənzərə var: telefon nömrəsi, WhatsApp, Instagram, Facebook, dil seçimi, axtarış, səbət, "zəng sifariş et" düyməsi. Səkkiz element, səkkiz dayanma nöqtəsi. iPhone Duo-dan götürüləcək sual sadədir: bunlardan hansılar eyni suala cavab verir?

• Əlaqə kanallarını birləşdirin. Telefon, WhatsApp və sosial şəbəkələr bir suala cavab verir: "sizinlə necə əlaqə saxlayım?" Bir "Əlaqə" düyməsi və onun açdığı seçimlər kifayətdir.
• İlk ekranı məzmuna verin. Mobil ekranda hündürlük iPhone Duo-dakı qədər qıtdır. İlk ekran əsas təklif və məzmun üçündür, ikon kolleksiyası üçün yox.
• Vacib vəziyyəti görünən saxlayın. Səbətdə məhsul varsa, sayı görünsün. Birləşdirmək gizlətmək demək deyil.
• Formanı cihazdan götürün. Düymələrin, kartların yuvarlaqlığı bir sistemə tabe olsun, hər bölmədə başqa cür olmasın.

Bu sualları dizaynın əvvəlində, UI/UX dizayn mərhələsində vermək ən ucuz yoldur. Sayt hazır olandan sonra struktur dəyişmək həm vaxt, həm pul aparır.

Saytınızın yuxarı zolağına birlikdə baxmaq istəsəniz, sayt sifarişi səhifəsindən bizə yazın. Başlanğıc qiymətləri isə qiymət kalkulyatorunda 2 dəqiqəyə hesablaya bilərsiniz.

Tez-tez verilən suallar

iPhone Duo-da dairəvi status ikonu nədir?

iPhone Duo-da Wi-Fi, mobil şəbəkə və batareya göstəriciləri ayrı ikonlar kimi yox, ekranın küncündə yerləşən bir dairəvi sistemdə göstərilir. Apple bunu status zolağının yeni forması kimi təqdim edir.

Apple bu ikonları niyə birləşdirdi?

iPhone Duo-nun çöldəki ekranı digər iPhone-lardan daha enli və daha qısadır. Status elementlərini küncə və yana yığmaq məzmun üçün şaquli yer qazandırır.

Bu yanaşma biznes saytına necə fayda verir?

Eyni suala cavab verən elementləri birləşdirmək ekrandakı səliqəsizliyi azaldır, ziyarətçi lazım olanı daha tez tapır və ilk ekran əsas təklifə qalır.

Şəkil: Apple, iPhone Duo təqdimatı.