Masa 4
2
Protein shake
1
Yulaflı bar
1
Soğuk kahve
İşletme panelleri için arayüz dili
Kendi arayüz kütüphanemiz. MEG Spor ile Pi Resto’nun her ekranı bununla çizildi: kalabalık ekran yerine okunur ekran, masaüstünde ve telefonda aynı düzen.
- MEG Spor
- Pi Resto
Pi UI ile kurulmuş canlı panel
Telefon görünümü taklit değil: panel kendi belgesinde çalışır, genişlik daralınca gerçekten telefon düzenine geçer.
Dört ilke, yukarıdaki panelde
Her ilkenin altındaki düğme, yukarıdaki panelde o ilkeyi gösterir.
Temiz
Önemli sayı önde, gürültü yok.
Bölümler çerçeveyle değil yüzeyin tonuyla ayrılır. Kutunun içinde kutu yok; göz ilk bakışta günün asıl rakamını bulur.
Kolay öğrenilir
Her ekran iki tık uzakta.
Önce alan, sonra sayfa. Her alan aynı düzende açılır; bir ekranı öğrenen hepsini öğrenmiş olur.
Hızlı
Yaz, bul, git.
Arama her ekranın üstünde. Sayfa, üye ya da kayıt; birkaç harf yazıp Enter’a basmak menüde gezinmekten kısadır.
Modern
Açık ya da koyu, tek dokunuş.
Gündüz resepsiyonda açık, akşam kasada koyu. İki tema da ölçülerek kuruldu; biri ötekinin soluk kopyası değil.
Parça parça deneyin
Panellerin en çok kullandığı parçalar, gerçek paketten. Her birinin yanında onu değiştiren bir kontrol var.
Button
Tek birincil eylem. Beklerken kilitlenir, yapılamıyorsa sebebini altına yazar.
Segmented
Birkaç seçenekten tek seçim. Sığmazsa kırpmaz, yatay kayar.
38
Switch
Açık ya da kapalı ayar. Durumu renkle değil, yanında yazıyla da söyler.
SMS hatırlatma
Haftalık özet e-postası
Stat + Meter
Bir rakam ve oranı. Eşik aşılınca ton değişir, tonun adı da yazar.
Salon doluluğu
%62
Yoğun · 120 kişilik salonda 74 kişi
ElapsedPill
Bir işin ne kadar beklediği. Kademeye girince rengin yanında adı da çıkar.
Masa 4 · sipariş bekliyor
0 dakikaResourceGrid
Masa, oda ya da cihaz planı. Zemin durumu, seçim ayrı bir işareti taşır.
Salon kafesi
KullanılamıyorMasa 5SearchInput
Yazdıkça süzen arama. Sonuç yoksa ne yapılacağını söyler.
- Reformer pilates
- Kickboks
- Yüzme
- Spinning
- Fonksiyonel antrenman
- Yoga
ScanFeedback
Kart okutunca bir bakışta okunan cevap: kim, karar, ne yapmalı.
AGAyşe Güler
Girişin kaydedildi
8 dersin kaldı. İyi antrenmanlar.
AgingJobCard
Bekleyen iş kartı: kalemler, süre uyarısı ve tek birincil eylem.
Açık ve koyu, markanıza göre
Renkler tek bir marka anahtarından gelir. Aynı ekran açıkta da koyuda da okunur; üstüne gelince ve basınca verdiği geri bildirim iki temada da denetlenir.
Her ekranın altındaki altı kural
Kütüphanenin kendi belgesinde yazılı; her yeni ekran bunlara göre denetlenir. Burada mühendis diliyle değil, ekranda gördüğünüz hâliyle.
Kutu yok, kat var
Ekran kafes gibi görünmez; kart, satır ve açılan pencere birbirinden tonla ayrılır.
Vurgu işaretle yapılır
Seçili satır boyanmaz; kenarında ince bir çentik belirir. Hangi kayıtta olduğunuz hep bellidir.
Rakam büyük, etiket küçük
Tutarlar hizalı ve iri, etiketler küçük ve sessiz. Göz önce cevabı, sonra soruyu okur.
Marka rengi seyrek
Renk yalnız bir sonraki adımı gösterir. Her şey renkli olunca hiçbir şey öne çıkmaz.
Durumu renk tek başına anlatmaz
Durum renk, yazı ve simgeyle birlikte gelir; renk ayırt etmekte zorlanan biri de okur.
Her cihazda aynı düzen
Masaüstü, tablet ve telefon aynı bilgi mimarisini paylaşır; telefonda eksik ekran yoktur.
Ürününüzde nasıl görünür
Pi UI özel bir paket: ürün ekiplerine kurulumu biz yaparız. Marka tek satırda seçilir, gerisi bileşenlerin kendisidir.
import "@piklo-studio/pi-ui/tokens/themes/blue.css";
import { Button, SegmentToggle } from "@piklo-studio/pi-ui";
// <html data-pi-brand="blue" data-pi-theme="light">
export function Kasa() {
return (
<div className="pi-scope">
<Button variant="primary">Tahsilat al</Button>
</div>
);
}Çalıştığı yerde görün
Filmlerdeki ekranlar gerçek panelden çekildi.
Ürününüzü bu dille kuralım
Sektörünüz için bir panel ya da mevcut yazılımınıza yeni bir yüz: Pi UI ile başlayan ekran ilk günden telefonda da çalışır.