← Katalog 38 · Mobil arayüz yapıları

Kullanıcıyı bulunduğu yerden koparmayın

Alt sayfa, arkadaki bağlamı görünür bırakır. Kullanıcı nereden geldiğini unutmaz, geri dönüşün ücretsiz olduğunu bilir — bu yüzden daha cesur davranır.

Bağlam sürekliliği

Tam ekran geçiş, zihinsel modeli sıfırlar. Yarı yükseklikteki katman ise “aynı yerdeyim, üstüne bir şey açıldı” der.

Doherty eşiği

Sistem 400 ms içinde cevap verirse kullanıcı akışta kalır. Katman animasyonu 250—300 ms bandında tutulur.

Geri çıkış maliyeti

Kapatma her zaman üç yolla mümkün olmalı: aşağı sürükleme, dışarı dokunma ve görünür kapat düğmesi.

9:41▮▮▮ ⬤

Yakınımdaki kafeler

Kuzey Kahve · 240 m

Sokak Başı · 410 m

Kuzey Kahve ✕

Açık · 22:00'a kadar · 240 m

☕ filtre 🔌 priz 🐕 evcil

Filtre kahve₺85

Cortado₺95

Tarçınlı çörek₺70

Yol tarifi

♥

A · yarı katman

9:41▮▮▮ ⬤

Kaydı silmek istiyor musun?

Bu işlem geri alınamaz. 14 not ve 3 fotoğraf kalıcı olarak silinecek.

Kalıcı olarak sil

Vazgeç

Yıkıcı eylemler modal ister: kullanıcı kazara kaydıramaz, bilinçli seçim yapmak zorundadır.

B · engelleyici modal

Hangisi ne zaman

Alt sayfa: keşif, filtre, detay. Modal: onay, hata, geri alınamaz karar. Tam ekran: uzun form ve odak işi.

Katman derinliği

İkiden fazla üst üste katman açılmamalı. Üçüncü katman gerekiyorsa akış yanlış kurulmuştur.

Tutamak görünür olsun

Üstteki küçük çubuk yalnızca süs değildir; sürüklenebilirliğin tek görsel işaretidir.

    Alt Sayfa & Katman YönetimiBağlam sürekliliği · Doherty eşiği
  

Tasarım promptu — 38 — Alt Sayfa & Katman seçip kopyalayın

İngilizce prompt · detaylı

Design a mobile layering study page. Phone one shows a bottom sheet: the underlying map list is blurred and dimmed but still visible, and a 400px-tall sheet with a 26px top radius, a drag handle, a title row with a close button, filter chips, a price list and a sticky action row slides up from the bottom. Phone two shows a blocking destructive-confirmation modal centred over a dark scrim, with a red primary action and a neutral cancel. Side notes compare sheet, modal and full screen.

Türkçe brief

Bağlamı koruyan yarı katman ile yıkıcı eylemi durduran modalı yan yana gösteren katman çalışması.

Palet

#efece5

#fbfaf7

#17160f

#b03428

Tipografi

Helvetica Neue 600, 19px sayfa başlığı

Düzen

İki telefon + sağda kullanım kuralları

Hareket

250—300ms yükselme, sürükleyerek kapatma

Kaçınılacaklar

İkiden fazla üst üste katman, gizli kapatma