Aracılığıyla paylaş

Surface Dial etkileşimleri

Surface Studio ile Surface Dial görüntüsü
Surface Studio ve Kalem ile Surface Dial ( Microsoft Store'da satın alınabilir).

Genel Bakış

Surface Dial gibi Windows tekerlek cihazları, Windows ve Windows uygulamaları için ilgi çekici ve benzersiz kullanıcı etkileşimi deneyimlerini barındıran yeni bir giriş cihazı kategorisidir.

Önemli

Bu konuda, özellikle Surface Dial etkileşimlerine başvuruyoruz, ancak bilgiler tüm Windows tekerlek cihazları için geçerlidir.

Döndürme eylemini (veya hareketini) temel alan bir form faktörü ile Surface Dial, birincil cihazdan gelen girişleri tamamlayan ikincil, çok modalı bir giriş cihazı olarak tasarlanmıştır. Çoğu durumda, cihaz kullanıcının baskın olmayan eli tarafından manipüle edilirken, baskın eliyle bir görevi (örneğin kalemle yazı yazmak) gerçekleştirir. Hassas işaretçi girişi (dokunma, kalem veya fare gibi) için tasarlanmamıştır.

Surface Dial ayrıca hem basılı tutma eylemini hem de tıklama eylemini destekler. Basılı tutmanın tek bir işlevi vardır: komut menüsünü görüntüleme. Menü etkinse, döndürme ve tıklama girişi menü tarafından işlenir. Aksi takdirde, giriş işleme için uygulamanıza geçirilir.

Tüm Windows giriş cihazlarında olduğu gibi, Surface Dial etkileşim deneyimini uygulamalarınızdaki işlevlere uyacak şekilde özelleştirebilir ve uyarlayabilirsiniz.

İpucu

Birlikte kullanılan Surface Dial ve yeni Surface Studio, daha da ayırt edici bir kullanıcı deneyimi sağlayabilir.

Açıklanan varsayılan basılı tutma menüsü deneyimine ek olarak, Surface Dial doğrudan Surface Studio'nun ekranına da yerleştirilebilir. Bu, özel bir "ekranda" menü sağlar.

Sistem, Surface Dial'ın hem temas konumunu hem de sınırlarını algılayarak, cihaz tarafından gizlenmeyi yönetmek ve menünün Dial'ın etrafına sarılan daha büyük bir sürümünü görüntülemek için bu bilgileri kullanır. Bu bilgiler, kullanıcı arabirimini hem cihazın varlığı hem de kullanıcının elinin ve kolunun yerleşimi gibi tahmini kullanımına uyarlamak için uygulamanız tarafından da kullanılabilir.

Surface Dial ekran dışı menüsü

Surface Dial ekran dışı menüsünün ekran görüntüsü.

Surface Dial ekran menüsü

Surface Dial ekran menüsünün ekran görüntüsü.

Sistem tümleştirme

Surface Dial, Windows ile sıkı bir şekilde tümleşiktir ve menüdeki bir dizi yerleşik aracı destekler: sistem hacmi, kaydırma, yakınlaştırma/uzaklaştırma ve geri alma/yineleme.

Bu yerleşik araçlar koleksiyonu, geçerli sistem bağlamını aşağıdakiler içerecek şekilde uyarlar:

  • Kullanıcı Windows Masaüstü'ne geldiğinde bir sistem parlaklığı aracı
  • Medya oynatılırken önceki veya sonraki parça aracı

Surface Dial, bu genel platform desteğine ek olarak Windows Ink platform denetimleri (InkCanvas ve InkToolbar) ile de sıkı bir şekilde tümleştirilir.

Surface Dial ve Surface Kalemi
Surface Dial ile Surface Pen

Surface Dial ile kullanıldığında, bu denetimler mürekkep özniteliklerini değiştirmek ve mürekkep araç çubuğunun cetvel kalıbını denetlemek için ek işlevler sağlar.

Mürekkep araç çubuğunu kullanan bir mürekkep oluşturma uygulamasında Surface Dial Menüsünü açtığınızda, menü artık kalem türünü ve fırça kalınlığını denetlemeye yönelik araçlar içerir. Cetvel etkinleştirildiğinde, cihaza cetvelin konumunu ve açısını denetlemesini sağlayan ilgili bir araç menüye eklenir.

Windows Ink araç çubuğu için kalem seçim aracıyla Surface Dial menüsü
Windows Ink araç çubuğu için kalem seçim aracıyla Surface Dial menüsü

Windows Ink araç çubuğu için vuruş boyutu aracıyla Surface Dial menüsü
Vuruş boyutu aracını içeren Windows Ink araç çubuğu için Surface Dial menüsü

Windows Ink araç çubuğu için cetvel aracıyla Surface Dial menüsü
Windows Ink araç çubuğu için cetvel aracıyla Surface Dial menüsü

Kullanıcı özelleştirmesi

Kullanıcılar, Windows Ayarları -> Cihazlar -> Çark sayfası aracılığıyla, varsayılan araçlar, dokunsal geri bildirim (titreşim) ve baskın (veya yazma) el gibi Dial deneyimlerinin bazı yönlerini özelleştirebilirler.

Surface Dial kullanıcı deneyimini özelleştirirken, her zaman belirli bir işlevin veya davranışın kullanıcı tarafından kullanılabilir ve etkinleştirildiğinden emin olmanız gerekir.

Özel araçlar

Burada, Surface Dial menüsünde sunulan araçları özelleştirmek için hem UX hem de geliştirici yönergelerini ele alıyoruz.

Özel araçlar için UX kılavuzu

Araçlarınızın geçerli bağlama uygun olduğundan emin olun Bir aracın ne yaptığını ve Surface Dial etkileşiminin nasıl çalıştığını net ve sezgisel hale getirdiğinizde, kullanıcıların hızlı bir şekilde öğrenmesine ve görevlerine odaklanmasına yardımcı olursunuz.

Uygulama araçlarının sayısını mümkün olduğunca en aza indirme
Surface Dial menüsünde yedi öğe için yer vardır. Sekiz veya daha fazla öğe varsa, kullanıcı, taşma açılır penceresinde hangi araçların kullanılabilir olduğunu görmek için Dial'ı çevirmelidir; bu da menüde gezinmeyi ve araçların bulunmasını ve seçilmesini zorlaştırır.

Uygulamanız veya uygulama bağlamınız için tek bir özel araç sağlamanızı öneririz. Bunun yapılması, kullanıcının Surface Dial menüsünü etkinleştirmesine ve bir araç seçmesine gerek kalmadan bu aracı ne yaptığına göre ayarlamanıza olanak tanır.

Araç koleksiyonunu dinamik olarak güncelleştirme
Surface Dial menü öğeleri devre dışı bir durumu desteklemediğinden, kullanıcı bağlamına (geçerli görünüm veya odaklanmış pencere) göre araçları (yerleşik, varsayılan araçlar dahil) dinamik olarak eklemeniz ve kaldırmanız gerekir. Bir araç geçerli etkinlikle ilgili değilse veya yedekliyse kaldırın.

Önemli

Menüye bir öğe eklediğinizde, öğenin zaten mevcut olmadığından emin olun.

Yerleşik sistem birimi ayarı aracını kaldırmayın
Ses düzeyi denetimi genellikle her zaman kullanıcı tarafından gereklidir. Uygulamanızı kullanırken müzik dinliyor olabilirler, dolayısıyla ses düzeyi ve sonraki parça araçlarına her zaman Surface Dial menüsünden erişilebilir olmalıdır. (Medya oynatılırken sonraki izleme aracı otomatik olarak menüye eklenir.)

Menü düzenlemesiyle tutarlı olun
Bu, kullanıcıların uygulamanızı kullanırken hangi araçların kullanılabilir olduğunu keşfetmesine ve öğrenmesine yardımcı olur ve araçlar arasında geçiş yaparken verimliliklerini artırmaya yardımcı olur.

Yerleşik simgelerle tutarlı yüksek kaliteli simgeler sağlama
Simgeler profesyonelliği ve mükemmelliği aktarabilir ve kullanıcılara güven verebilir.

  • Yüksek kaliteli 64 x 64 piksel PNG görüntüsü sağlayın (44 x 44 desteklenen en küçük resimdir)
  • Arka plan saydam olduğundan emin olun
  • Simge resmin büyük bölümünü doldurmalıdır
  • Beyaz bir simgenin yüksek karşıtlık modunda görünür olması için siyah bir ana hat olmalıdır

Alfa arka planı olan bir simgenin ekran görüntüsü.

Alfa arka planlı simge

Varsayılan temayı içeren tekerlek menüsünde görüntülenen simgenin ekran görüntüsü.

Varsayılan temayı içeren tekerlek menüsünde görüntülenen simge

Yüksek Karşıtlık Beyaz temasına sahip tekerlek menüsünde görüntülenen simgenin ekran görüntüsü.

Tekerlek menüsünde, Yüksek Karşıtlık Beyaz temasıyla görüntülenen simge

Kısa ve açıklayıcı adlar kullanma
Araç adı araç menüsünde araç simgesiyle birlikte görüntülenir ve ekran okuyucular tarafından da kullanılır.

  • İsimlerin, tekerlek menüsünün merkezindeki daireye sığacak kadar kısa olması gerekir.
  • Adlar birincil eylemi açıkça tanımlamalıdır (tamamlayıcı bir eylem ima edilebilir):
    • Kaydırma, her iki döndürme yönünün de etkisini gösterir
    • Geri al birincil eylemi belirtir, ancak yenile (tamamlayıcı eylem) kullanıcı tarafından kolayca anlaşılabilir.

Geliştirici kılavuzu

Surface Dial deneyimini, kapsamlı bir Windows Çalışma Zamanı API'leri kümesi aracılığıyla uygulamalarınızdaki işlevselliği tamamlayacak şekilde özelleştirebilirsiniz.

Daha önce belirtildiği gibi, varsayılan Surface Dial menüsü çok çeşitli temel sistem özelliklerini kapsayan bir dizi yerleşik araçla önceden doldurulur (sistem ses düzeyi, sistem parlaklığı, kaydırma, yakınlaştırma, geri alma ve sistem devam eden ses veya video kayıttan yürütme algıladığında medya denetimi). Ancak, bu varsayılan araçlar uygulamanızın gerektirdiği işlevselliği sağlamayabilir.

Aşağıdaki bölümlerde, Surface Dial menüsüne özel bir aracın nasıl ekleneceğini ve hangi yerleşik araçların kullanıma sunulduğunun nasıl belirtileceğini açıklıyoruz.

RadialController özelleştirmesinden bu örneğin daha sağlam bir sürümünü indirin.

Özel araç ekleme

Bu örnekte, giriş verilerini hem döndürme hem de tıklama olaylarından bazı XAML kullanıcı arabirimi denetimlerine geçiren temel bir özel araç ekleyeceğiz.

  1. İlk olarak, kullanıcı arabirimimizi (yalnızca kaydırıcı ve geçiş düğmesi) XAML'de bildiririz.

    Yatay kaydırıcının sola ayarlandığı Radyal Denetleyici Örneği'nin ekran görüntüsü.
    Örnek uygulama kullanıcı arabirimi

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
    Orientation="Horizontal" 
    Grid.Row="0">
      <TextBlock x:Name="Header"
        Text="RadialController customization sample"
        VerticalAlignment="Center"
        Style="{ThemeResource HeaderTextBlockStyle}"
        Margin="10,0,0,0" />
  </StackPanel>
  <StackPanel Orientation="Vertical" 
    VerticalAlignment="Center" 
    HorizontalAlignment="Center"
    Grid.Row="1">
      <!-- Slider for rotation input -->
      <Slider x:Name="RotationSlider"
        Width="300"
        HorizontalAlignment="Left"/>
      <!-- Switch for click input -->
      <ToggleSwitch x:Name="ButtonToggle"
        HorizontalAlignment="Left"/>
  </StackPanel>
</Grid>

  2. Ardından arka planda kod olarak Surface Dial menüsüne özel bir araç ekleyip RadialController giriş işleyicilerini bildiririz.

    CreateForCurrentView çağrısı yaparak Surface Dial (myController) için RadialController nesnesine başvuru alıyoruz.

    Ardından RadialControllerMenuItem (myItem ) örneği oluşturmak için RadialControllerMenuItem.CreateFromIcon çağrısı yapıyoruz.

    Ardından, bu öğeyi menü öğeleri koleksiyonuna ekleyeceğiz.

    RadialController nesnesi için giriş olay işleyicilerini (ButtonClicked ve RotationChanged) bildiririz.

    Son olarak, olay işleyicilerini tanımlarız.

    public sealed partial class MainPage : Page
{
    RadialController myController;

    public MainPage()
    {
        this.InitializeComponent();
        // Create a reference to the RadialController.
        myController = RadialController.CreateForCurrentView();

        // Create an icon for the custom tool.
        RandomAccessStreamReference icon =
          RandomAccessStreamReference.CreateFromUri(
            new Uri("ms-appx:///Assets/StoreLogo.png"));

        // Create a menu item for the custom tool.
        RadialControllerMenuItem myItem =
          RadialControllerMenuItem.CreateFromIcon("Sample", icon);

        // Add the custom tool to the RadialController menu.
        myController.Menu.Items.Add(myItem);

        // Declare input handlers for the RadialController.
        myController.ButtonClicked += MyController_ButtonClicked;
        myController.RotationChanged += MyController_RotationChanged;
    }

    // Handler for rotation input from the RadialController.
    private void MyController_RotationChanged(RadialController sender,
      RadialControllerRotationChangedEventArgs args)
    {
        if (RotationSlider.Value + args.RotationDeltaInDegrees > 100)
        {
            RotationSlider.Value = 100;
            return;
        }
        else if (RotationSlider.Value + args.RotationDeltaInDegrees < 0)
        {
            RotationSlider.Value = 0;
            return;
        }
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }

    // Handler for click input from the RadialController.
    private void MyController_ButtonClicked(RadialController sender,
      RadialControllerButtonClickedEventArgs args)
    {
        ButtonToggle.IsOn = !ButtonToggle.IsOn;
    }
}

Uygulamayı çalıştırdığımızda, surface dial'ı kullanarak bu uygulamayla etkileşim kurarız. İlk olarak menüyü açmak ve özel aracımızı seçmek için basılı tutun. Özel araç etkinleştirildikten sonra kaydırıcı kontrolü, Kadran'ı döndürerek ayarlanabilir ve Kadrana tıklanarak anahtar değiştirilebilir.

Yatay kaydırıcının ortaya ayarlandığı Radyal Denetleyici Örneği'nin ekran görüntüsü.
Surface Dial özel aracı kullanılarak etkinleştirilen örnek uygulama kullanıcı arabirimi

Yerleşik araçları belirtme

RadialControllerConfiguration sınıfını kullanarak uygulamanızın yerleşik menü öğeleri koleksiyonunu özelleştirebilirsiniz.

Örneğin, uygulamanızın kaydırma veya yakınlaştırma bölgeleri yoksa ve geri alma/yineleme işlevselliği gerekmiyorsa, bu araçlar menüden kaldırılabilir. Bu, uygulamanız için özel araçlar eklemek için menüde yer açar.

Önemli

Surface Dial menüsünde en az bir menü öğesi olmalıdır. Özel araçlarınızdan birini eklemeden önce tüm varsayılan araçlar kaldırılırsa, varsayılan araçlar geri yüklenir ve aracınız varsayılan koleksiyona eklenir.

Tasarım yönergelerine göre, kullanıcıların diğer görevleri gerçekleştirirken arka plan müziği çalması sık sık olduğu için medya denetim araçlarını (ses düzeyi ve önceki/sonraki parça) kaldırmanızı önermeyiz.

Burada Surface Dial menüsünü yalnızca ses düzeyi ve sonraki/önceki parça için medya denetimlerini içerecek şekilde yapılandırmayı göstereceğiz.

public MainPage()
{
  ...
  //Remove a subset of the default system tools
  RadialControllerConfiguration myConfiguration = 
  RadialControllerConfiguration.GetForCurrentView();
  myConfiguration.SetDefaultMenuItems(new[] 
  {
    RadialControllerSystemMenuItemKind.Volume,
      RadialControllerSystemMenuItemKind.NextPreviousTrack
  });
}

Özel etkileşimler

Belirtildiği gibi Surface Dial, karşılık gelen varsayılan etkileşimlerle üç hareketi (basılı tutun, döndürün, tıklayın) destekler.

Bu hareketlere dayalı özel etkileşimlerin seçili eylem veya araç için anlamlı olduğundan emin olun.

Uyarı

Etkileşim deneyimi, Surface Dial menüsünün durumuna bağlıdır. Menü aktifse girişi işler; aksi takdirde uygulamanız girişi işler.

Basılı tutun

Bu hareket Surface Dial menüsünü etkinleştirir ve gösterir; bu hareketle ilişkilendirilmiş bir uygulama işlevi yoktur.

Varsayılan olarak, menü kullanıcı ekranının ortasında görüntülenir. Ancak, kullanıcı bunu alabilir ve istediği yere taşıyabilir.

Uyarı

Surface Dial, Surface Studio'nun ekranına yerleştirildiğinde, menü Surface Dial'ın ekrandaki konumunda ortalanır.

Döndür

Surface Dial öncelikle analog değerlere veya denetimlere düzgün, artımlı ayarlamalar içeren etkileşimler için döndürmeyi destekleyecek şekilde tasarlanmıştır.

Cihaz hem saat yönünde hem de saat yönünün tersine döndürülebilir ve ayrıca ayrık mesafeleri belirtmek için dokunsal geri bildirim sağlayabilir.

Uyarı

Dokunsal geri bildirim, Kullanıcı tarafından Windows Ayarları - Cihazlar ->> Tekerlek sayfasında devre dışı bırakılabilir.

Özel etkileşimler için UX kılavuzu

Sürekli veya yüksek dönme duyarlılığına sahip araçlar, dokunsal geri bildirimi devre dışı bırakmalıdır

Dokunsal geri bildirim, etkin aracın dönme duyarlılığıyla eşleşir. Kullanıcı deneyimi rahatsız olabileceğinden sürekli veya yüksek dönme duyarlılığına sahip araçlar için dokunsal geri bildirimi devre dışı bırakmanızı öneririz.

Baskın el, dönüş temelli etkileşimlere etki etmemelidir

Surface Dial hangi elin kullanıldığını algılayamaz, ancak kullanıcı Windows Ayarları - Cihaz ->> Kalem ve Windows Ink'te yazma (veya baskın el) ayarlayabilir.

Tüm döndürme etkileşimleri için yerel dikkate alınmalıdır

Etkileşimlerinizi yerel ayar ve sağdan sola düzenlere uyarlayarak müşteri memnuniyetini en üst düzeye çıkarın.

Kadran menüsündeki yerleşik araçlar ve komutlar, dönme tabanlı etkileşimler için şu yönergeleri izler:

Sol

Up

Out

Surface Dial görüntüsü

Doğru

Aşağıya doğru

In

Kavramsal yönlendirme Surface Dial'a Eşleme Saat yönünde döndürme Saat yönünün tersine döndürme
Yatay Surface Dial'ın üst kısmına göre sol ve sağ haritalama Doğru Sol
Dikey Surface Dial'ın sol tarafına göre yukarı ve aşağı eşleme Aşağıya doğru Up
Z ekseni Yukarı/sağa eşlenmiş içinde (veya daha yakın)
Aşağı/sola haritalanmış dışarı (ya da daha uzak)		 In Out

Geliştirici kılavuzu

Kullanıcı cihazı döndürdükçe RadialController.RotationChanged olayları döndürme yönüne göre bir delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) temelinde tetiklenir. Verilerin duyarlılığı (veya çözünürlüğü) RadialController.RotationResolutionInDegrees özelliğiyle ayarlanabilir.

Uyarı

Varsayılan olarak, yalnızca cihaz en az 10 derece döndürülürse bir RadialController nesnesine döngüsel giriş olayı teslim edilir. Her giriş olayı cihazın titreşimine neden olur.

Genel olarak, döndürme çözünürlüğü 5 derecenin altına ayarlandığında dokunsal geri bildirimi devre dışı bırakmanızı öneririz. Bu, sürekli etkileşimler için daha sorunsuz bir deneyim sağlar.

RadialController.UseAutomaticHapticFeedback özelliğini ayarlayarak özel araçlar için dokunsal geri bildirimi etkinleştirebilir ve devre dışı bırakabilirsiniz.

Uyarı

Ses denetimi gibi sistem araçları için dokunsal davranışı geçersiz kılamazsınız. Bu araçlar için, dokunsal geri bildirim yalnızca tekerlek ayarları sayfasından kullanıcı tarafından devre dışı bırakılabilir.

Döndürme verilerinin çözünürlüğünü özelleştirme ve dokunsal geri bildirimi etkinleştirme veya devre dışı bırakma hakkında bir örnek aşağıda verilmiştır.

private void MyController_ButtonClicked(RadialController sender, 
  RadialControllerButtonClickedEventArgs args)
{
  ButtonToggle.IsOn = !ButtonToggle.IsOn;

  if(ButtonToggle.IsOn)
  {
    //high resolution mode
    RotationSlider.LargeChange = 1;
    myController.UseAutomaticHapticFeedback = false;
    myController.RotationResolutionInDegrees = 1;
  }
  else
  {
    //low resolution mode
    RotationSlider.LargeChange = 10;
    myController.UseAutomaticHapticFeedback = true;
    myController.RotationResolutionInDegrees = 10;
  }
}

Tık

Surface Dial'a tıklamak, sol fare düğmesine tıklamaya benzer (cihazın döndürme durumunun bu eylem üzerinde hiçbir etkisi yoktur).

UX kılavuzu

Kullanıcı sonuçtan kolayca kurtaramıyorsa bir eylemi veya komutu bu hareketle eşlemeyin

Surface Dial'a tıklayan kullanıcı temelinde uygulamanız tarafından gerçekleştirilen tüm eylemler geri alınabilir olmalıdır. Her zaman kullanıcının uygulama geri yığınından kolayca geçiş yapmasını ve önceki bir uygulama durumunu geri yüklemesini sağlayın.

Sesi kapatma/açma veya gösterme/gizleme gibi ikili işlemler tıklama hareketiyle iyi kullanıcı deneyimleri sağlar.

Surface Dial'a tıklayarak kalıcı araçlar etkinleştirilmemeli veya devre dışı bırakılmamalıdır

Bazı uygulama/araç modları, döndürmeye dayalı etkileşimlerle çakışabilir veya devre dışı bırakabilir. Windows Ink araç çubuğundaki cetvel gibi araçlar, diğer kullanıcı arabirimi araçları aracılığıyla açılıp kapatılmalıdır (Mürekkep Araç Çubuğu yerleşik bir ToggleButton denetimi sağlar).

Mod araçları için, aktif Surface Dial menü öğesini hedef araca veya önceden seçili olan menü öğesine atayın.

Geliştirici kılavuzu

Surface Dial'a tıklandığında RadialController.ButtonClicked olayı tetiklenir . RadialControllerButtonClickedEventArgs, Surface Studio ekranında Surface Dial temasının konumunu ve sınırlayıcı alanını içeren bir Contact özelliği içerir. Surface Dial ekranla temas halinde değilse bu özellik null olur.

Ekranda

Daha önce açıklandığı gibi Surface Dial, Surface Dial menüsünü özel bir ekran modunda görüntülemek için Surface Studio ile birlikte kullanılabilir.

Bu moddayken, Arama etkileşimi deneyimlerinizi uygulamalarınızla daha da tümleştirebilir ve özelleştirebilirsiniz. Yalnızca Surface Dial ve Surface Studio ile mümkün olan benzersiz deneyimlere örnek olarak şunlar verilebilir:

  • Surface Dial'ın konumuna göre bağlamsal araçları (renk paleti gibi) görüntüleme, bu sayede daha kolay bulunup kullanılmalarını sağlar
  • Surface Dial'ın yerleştirildiği kullanıcı arabirimine göre etkin aracı ayarlama
  • Surface Dial'ın konumuna göre ekran alanını büyütme
  • Ekran konumuna göre benzersiz oyun etkileşimleri

Ekran etkileşimleri için UX kılavuzu

Surface Dial ekranda algılandığında uygulamalar yanıt vermelidir

Görsel geri bildirim, kullanıcılara uygulamanızın cihazı Surface Studio ekranında algıladığını belirtmeye yardımcı olur.

Surface Dial ile ilgili kullanıcı arabirimini cihaz konumuna göre ayarlama

Cihaz (ve kullanıcının vücudu), kullanıcının yerleştirdiği yere bağlı olarak kritik UI unsurlarını engelleyebilir.

Surface Dial ile ilgili kullanıcı arabirimini kullanıcı etkileşimi temelinde ayarlama

Donanım tıkanıklıklarına ek olarak, bir kullanıcının eli ve kolu, cihazı kullanırken ekranın bir kısmını tıkayabilir.

Kapalı alan, cihazla hangi elin kullanıldığına bağlıdır. Cihaz öncelikli olarak baskın olmayan el ile kullanılacak şekilde tasarlandığından, Surface Dial ile ilgili kullanıcı arabirimi kullanıcı tarafından belirtilen karşı el için ayarlanmalıdır (Windows Ayarları > Cihazlar > Kalem ve Windows Mürekkep > Ayarıyla hangi eli yazdığınızı seçin ).

Etkileşimler hareket yerine Surface Dial konumuna yanıt vermelidir

Cihazın ayağı, hassas bir işaret cihazı olmadığından, slayt yerine ekrana yapışacak şekilde tasarlanmıştır. Bu nedenle, kullanıcıların Surface Dial'ı ekranda sürüklemek yerine kaldırıp yerleştirmesinin daha yaygın olmasını bekliyoruz.

Kullanıcı amacını belirlemek için ekran konumunu kullanma

Etkin aracın denetime, tuvale veya pencereye yakınlık gibi kullanıcı arabirimi bağlamına göre ayarlanması, bir görevi gerçekleştirmek için gereken adımları azaltarak kullanıcı deneyimini geliştirebilir.

Geliştirici kılavuzu

Surface Dial, Surface Studio'nun dijitalleştirici yüzeyine yerleştirildiğinde bir RadialController.ScreenContactStarted olayı tetiklenir ve iletişim bilgileri (RadialControllerScreenContactStartedEventArgs.Contact) uygulamanıza sağlanır.

Benzer şekilde, Surface Studio'nun dijitalleştirici yüzeyiyle temas halindeyken Surface Dial'a tıklanırsa, bir RadialController.ButtonClicked olayı tetiklenir ve uygulamanıza kişi bilgileri (RadialControllerButtonClickedEventArgs.Contact) sağlanır.

Kişi bilgileri (RadialControllerScreenContact), Surface Dial'ın merkezinin X/Y koordinatını uygulamanın koordinat alanında (RadialControllerScreenContact.Position) ve Cihazdan Bağımsız Piksellerde (DIPs) sınırlayıcı dikdörtgeni (RadialControllerScreenContact.Bounds) içerir. Bu bilgiler, etkin araç için bağlam sağlamak ve kullanıcıya cihazla ilgili görsel geri bildirim sağlamak için çok kullanışlıdır.

Aşağıdaki örnekte, her biri bir kaydırıcı ve bir geçiş içeren dört farklı bölüme sahip temel bir uygulama oluşturduk. Ardından, Surface Dial'ın ekrandaki konumunu kullanarak hangi kaydırıcıların ve geçiş düğmelerinin Surface Dial tarafından kontrol edildiğine karar verilir.

  1. İlk olarak, kullanıcı arabirimimizi (her birinin kaydırıcısı ve geçiş düğmesi olan dört bölüm) XAML'de bildiririz.

    Dört yatay kaydırıcının sola ayarlandığı Radyal Denetleyici Örneği'nin ekran görüntüsü.
    Örnek uygulama kullanıcı arabirimi

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
        Orientation="Horizontal" 
        Grid.Row="0">
    <TextBlock x:Name="Header"
      Text="RadialController customization sample"
      VerticalAlignment="Center"
      Style="{ThemeResource HeaderTextBlockStyle}"
      Margin="10,0,0,0" />
  </StackPanel>
  <Grid Grid.Row="1" x:Name="RootGrid">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="Grid0"
      Grid.Row="0"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider0"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle0"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid1"
      Grid.Row="0"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider1"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle1"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid2"
      Grid.Row="1"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider2"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle2"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid3"
      Grid.Row="1"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider3"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle3"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
  </Grid>
</Grid>

  2. Surface Dial ekran konumu için tanımlanan işleyicilerle ilgili arka plan kodu aşağıdadır.

    Slider ActiveSlider;
ToggleSwitch ActiveSwitch;
Grid ActiveGrid;

public MainPage()
{
  ...

  myController.ScreenContactStarted += 
    MyController_ScreenContactStarted;
  myController.ScreenContactContinued += 
    MyController_ScreenContactContinued;
  myController.ScreenContactEnded += 
    MyController_ScreenContactEnded;
  myController.ControlLost += MyController_ControlLost;

  //Set initial grid for Surface Dial input.
  ActiveGrid = Grid0;
  ActiveSlider = RotationSlider0;
  ActiveSwitch = ButtonToggle0;
}

private void MyController_ScreenContactStarted(RadialController sender, 
  RadialControllerScreenContactStartedEventArgs args)
{
  //find grid at contact location, update visuals, selection
  ActivateGridAtLocation(args.Contact.Position);
}

private void MyController_ScreenContactContinued(RadialController sender, 
  RadialControllerScreenContactContinuedEventArgs args)
{
  //if a new grid is under contact location, update visuals, selection
  if (!VisualTreeHelper.FindElementsInHostCoordinates(
    args.Contact.Position, RootGrid).Contains(ActiveGrid))
  {
    ActiveGrid.Background = new 
      SolidColorBrush(Windows.UI.Colors.White);
    ActivateGridAtLocation(args.Contact.Position);
  }
}

private void MyController_ScreenContactEnded(RadialController sender, object args)
{
  //return grid color to normal when contact leaves screen
  ActiveGrid.Background = new 
  SolidColorBrush(Windows.UI.Colors.White);
}

private void MyController_ControlLost(RadialController sender, object args)
{
  //return grid color to normal when focus lost
  ActiveGrid.Background = new 
    SolidColorBrush(Windows.UI.Colors.White);
}

private void ActivateGridAtLocation(Point Location)
{
  var elementsAtContactLocation = 
    VisualTreeHelper.FindElementsInHostCoordinates(Location, 
      RootGrid);

  foreach (UIElement element in elementsAtContactLocation)
  {
    if (element as Grid == Grid0)
    {
      ActiveSlider = RotationSlider0;
      ActiveSwitch = ButtonToggle0;
      ActiveGrid = Grid0;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid1)
    {
      ActiveSlider = RotationSlider1;
      ActiveSwitch = ButtonToggle1;
      ActiveGrid = Grid1;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid2)
    {
      ActiveSlider = RotationSlider2;
      ActiveSwitch = ButtonToggle2;
      ActiveGrid = Grid2;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid3)
    {
      ActiveSlider = RotationSlider3;
      ActiveSwitch = ButtonToggle3;
      ActiveGrid = Grid3;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
  }
}

Uygulamayı çalıştırdığımızda, surface dial'ı kullanarak bu uygulamayla etkileşim kurarız. İlk olarak, cihazı uygulamanın algıladığı ve sağ alt bölümle ilişkilendirdiği Surface Studio ekranına yerleştiririz (resme bakın). Ardından Surface Dial'a basılı tutarak menüyü açar ve özel aracımızı seçeriz. Özel araç etkinleştirildikten sonra, kaydırma kontrolü Surface Dial döndürülerek ayarlanabilir ve Surface Dial'a tıklanarak tuş değiştirilebilir.

Dört yatay kaydırıcının sola ayarlandığı ve dördüncü denetleyicinin vurgulandığı Radyal Denetleyici Örneği'nin ekran görüntüsü.
Surface Dial özel aracı kullanılarak etkinleştirilen örnek uygulama kullanıcı arabirimi

Özet

Bu konu başlığında, Surface Studio ile kullanıldığında ekran dışı senaryoların yanı sıra ekran dışı senaryolar için kullanıcı deneyimini özelleştirmeye yönelik UX ve geliştirici yönergeleriyle Surface Dial giriş cihazına genel bir bakış sunulmaktadır.

Lütfen sorularınızı, önerilerinizi ve geri bildirimlerinizi adresine radialcontroller@microsoft.comgönderin.

Öğretici: Windows uygulamanızda Surface Dial'ı (ve diğer tekerlek cihazlarını) destekleme

API referansı

Samples

Konu örnekleri

RadialController özelleştirmesi

Diğer örnekler

Boyama Kitabı örneği

Kullanmaya Başlama Öğreticisi: Windows uygulamanızda Surface Dial'ı (ve diğer tekerlek cihazlarını) destekleme

Evrensel Windows Platformu örnekleri (C# ve C++)

Windows masaüstü örneği

  • Last updated on