102.3K+İndir
Kullanım kılavuzuna geç
Visual Hierarchyyazan Owl-Listener

Visual Hierarchy Skill.

Önce nelerin fark edilmesi gerektiğini seçin, ardından kompozisyonun bu seçimi desteklemesini sağlayın.

  • Arayüz Tasarımı
  • Kompozisyon
OpenDesign Becerisini İndirKullanım Kılavuzunu Görüntüle
Kaynak İncelemesi · Visual HierarchySKILL.md
Görev Arayüz Tasarımı Çıktılar • Tek bir görünüm için önceliklendirilmiş içerik hiyerarşisi. • Birden fazla dikkat çekme ipucunu kullanan bir kompozisyon gerekçesi. • Hızlı bir görsel inceleme ve görev testi kontrol listesi. Başlamadan Önce Gerçek içerik ve işlenmiş (render edilmiş) görünüm üzerinden inceleme gerekir; görsel puanlama aracı dahil değildir.
Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Amaçlanan Okuma Sırasını Görünür Kılın

Birbirini pekiştiren birden fazla ipucuyla içerik düzeylerine dikkat dağıtmaya yönelik bir görsel kompozisyon referansı.

Kaynağa dayalı iş akışıÇalıştırma performansı ölçümü değildir

Çalışma Yaklaşımı

Visual Hierarchy, bir arayüzün dikkati hangi sırayla çektiğini ele alır. Tek bir aşırı büyük başlığa veya parlak bir düğmeye güvenmek yerine boyut, ağırlık, kontrast, boşluk, konum ve yoğunluğu birleştirir. Kaynak; birincil, ikincil, üçüncül ve arka plan bilgilerini birbirinden ayırır.

Yeni çalışmalar için bir kompozisyon rehberidir; mevcut bir ekranın test edilmesinin yerini tutmaz. Yaygın tarama kalıpları ve önerilen boyut farkları sezgisel yaklaşımlardır. Gerçek hiyerarşi, okuma yönü kaynaktaki soldan sağa örneklerden farklı olan düzenler dahil, göreve ve hedef kitleye göre kontrol edilmelidir.

Beklenen Çıktılar

  • Tek bir görünüm için önceliklendirilmiş içerik hiyerarşisi.
  • Birden fazla dikkat çekme ipucunu kullanan bir kompozisyon gerekçesi.
  • Hızlı bir görsel inceleme ve görev testi kontrol listesi.
Örnek Brifi Gör

Brifden İncelemeye

  1. 01
    İçeriği Sıralayın

    Birincil eylemi veya mesajı seçin; ardından sıradaki taranacak ya da istenirse okunacak öğeleri belirleyin.

  2. 02
    Görsel Ağırlık Atayın

    Her öğeyi öne çıkarmak yerine boyut, boşluk, kontrast ve gruplamada koordineli değişiklikler kullanın.

  3. 03
    Okuma Sırasını Kontrol Edin

    Dikkatin amaçlanan sırayı izleyip izlemediğini görmek için gözleri kısma testi ve gerçek görev gözlemi kullanın.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Gerçek içerik ve işlenmiş (render edilmiş) görünüm üzerinden inceleme gerekir; görsel puanlama aracı dahil değildir.

Uygun Kullanım

  • Yeni Ekran KompozisyonuBirden fazla içerik bloğu öne çıkmak için yarıştığında yararlıdır.
  • Eylem ÖnceliğiTek bir birincil eylemi destekleyici kontrollerden ayırt edilir kılmaya yardımcı olur.

Kontrol Edilecek Sınırlar

  • Tam Ekran Eleştirisi DeğildirKaynak bunu hiyerarşi kurma olarak konumlandırır; mevcut bir ekranı denetlemek ilgili ama ayrı bir görevdir.
  • Sezgisel Yaklaşımlar Bağlam GerektirirKonum ve tarama varsayımları hedef kitle ve yazı yönü açısından kontrol edilmelidir.

Bu Girdileri Getirin

  • İçerik ve EylemlerGerçek metni, kontrolleri, görselleri ve meta verileri sağlayın.
  • Görev ÖnceliğiBir ziyaretçinin önce neyi fark etmesi veya yapması gerektiğini belirtin.
  • Yerleşim BağlamıGörünüm alanını, okuma yönünü ve mevcut marka kısıtlarını belirtin.

03 Önemli Kararlar

Önemli Kararlar

  1. Boşluk Vurguyu Taşır

    Yalıtım, başka bir renk veya daha kalın bir yazı tipi eklemeden bir öğeyi güçlendirebilir.

  2. Gruplama Taramayı Değiştirir

    İlişkili öğeler tek bir birim gibi okunabilir; yalıtılmış bir öğe ise istisna olarak dikkat çeker.

04 Örnek Görev Tanımı

Odaklı Bir Brif Deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce becerinin kurulumunu kontrol edin.

Kurulumu İnceleyin

Deponun belgelenmiş kurulum yolunu kullanın ve atıf yapılan tüm eşlik eden dosyaları saklayın. Bu kayıt, çalıştırılabilir bir uygulamayı değil, odaklı bir tasarım yöntemini anlatır.

Üst Kaynak Dosyası
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md

Gerçek içerik ve işlenmiş (render edilmiş) görünüm üzerinden inceleme gerekir; görsel puanlama aracı dahil değildir.

Tek Bir Çıktıyla Başlayın

Beceriyi çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
Belge başlığı, çözülmemiş geri bildirimler, sürüm meta verileri ve bir onay eylemi içeren bir inceleme ekranını oluşturmak için visual-hierarchy kullanın. Dört öncelik düzeyi tanımlayın ve boyut, boşluk ve kontrast ipuçlarını açıklayın. Tek bir birincil eylem tutun ve mobil okuma sırasını dikkate alın.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Amaçlanan birincil öğe, gözleri kısma testinde net kalır.
  • Destekleyici meta veriler ana görevle yarışmaz.
  • Gruplama, rastgele yakınlığı değil anlamı yansıtır.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu liste, becerinin pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil edildiği anlamına gelmez.

OpenDesign Becerisini İndirHızlı Başlangıcı Okuyun

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak sürümünü anlatır. Üst kaynaktaki davranış ve gereksinimler değişebilir.

Kaynak Sahibi
Owl-Listener
Depo
Owl-Listener/designer-skills
Beceri Dosyası
ui-design/skills/visual-hierarchy/SKILL.md
Lisans
MIT
İncelenen Sürüm
2026-10-07 · 9a6930cf84a8
Editoryal Kaynak Özeti
Birbirini pekiştiren birden fazla ipucuyla içerik düzeylerine dikkat dağıtmaya yönelik bir görsel kompozisyon referansı.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları, beceri kullanımını veya kalite puanını değil, tarihli bir popülerlik göstergesidir.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Hiyerarşi yalnızca yazı tipi boyutu mudur?

Hayır. Kaynak, boyutu ağırlık, kontrast, boşluk, konum ve yoğunlukla birleştirir.

Her bölümün birincil bir CTA'sı olmalı mı?

Rehber, eşit derecede baskın birkaç kontrol yerine görünüm başına tek bir birincil eylemi önerir.

Gözleri kısma testi kullanıcı testinin yerini tutar mı?

Hayır. Hızlı bir kompozisyon kontrolüdür; kullanıcıların amaçlanan sırayı izleyip izlemediğini değerlendirmek için görev temelli gözlem yine gereklidir.

OpenDesign

Sonraki Tasarım Yinelemesine Yer Açın.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce becerinin kendi kurulumunu kontrol edin.

OpenDesign Becerisini İndirTasarım Becerilerine Göz Atın
Üst Kaynak Dosyası
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md