Adobe Experience Tasarım Püf Noktaları, İpuçları ve Teknikleri

07/07

Adobe Experience Tasarım Püf Noktaları, İpuçları ve Teknikleri

Adobe Deneyim Tasarımını bir Kamu Önizleme olarak tanıttığında, şirket aynı zamanda iki oldukça başarılı başarılar elde etti. İlk olarak, ortaya çıkan prototipleme yazılımı pazarında bir boşluk bıraktılar. İkincisi, kullanıcıların "devam eden bir ilerleme" ile oynaması için bir fırsat yarattılar ve kullanıcıların bu ilerlemeyi etkilemesine izin veriyorlar. Uygulamanın birkaç ay boyunca kullanıma sunulduğuna göre, bazı Deneyim Tasarımı püf noktalarını, ipuçlarını ve teknikleri paylaşmak için iyi bir zaman olacağını düşündüm.

Ama önce Prototipleme Yazılımı ile ne demek istediğini merak ediyor olabilirsiniz. Bu alandaki başlıca oyuncular arasında Proto.io, İlke, UXPin, Atomic.io , Deneyim Tasarımı ve InVision bulunuyor. Statik tasarımların üretildiği Sketch 3, Photoshop ve Illustrator gibi uygulamaların aksine, bu grafik editörler günümüzün mobil ve web tasarım alanında yaygın olan etkileşimi, hareketi ve diğer özellikleri tanıtıyor.

Mobil cihazların yükselmesi ve kullanıcılara kaçınılmaz, lazer benzeri bir odaklanma ile, bir tasarımcının birkaç eskizleri bir araya getirmesi, birkaç dosyayı bir araya getirmesi ve ardından projeyi yayınlaması ya da bir web sunucusuna yüklemesi yeterli değildir. UI / UX iş akışı temel olarak şeyleri değiştirdi. İşlemin her adımı, kullanıcıyı tanımlamaktan, eskizler, tel kafesler, örnekler ve prototipleme artık kapsamlı kullanıcı testlerine tabidir.

Bu, son aşama - prototip oluşturma - proje nihai üretime geçmeden önce ağrı noktalarının keşfedildiği ve onarıldığı yerdir. Burada etkileşim, hareket, ekran geçişleri ve ekrandaki her şeyin yerleştirilmesi çok önemlidir. Sorunlar ve sorunlar sadece statik bir görüntü olarak gösterilemez veya sözel olarak açıklanamaz. Sonuçta, bu ürünler gerçek insanlar içindir. Tüm bunları kodlara taşımak yerine, sadece bu amaçla tasarlanmış grafik yazılımı ile prototip oluşturma süreci gittikçe artmaktadır. Bir hatayı düzeltmek, bir görüntüyü değiştirmek, bir metni yeniden yazmak, bir düğmeyi hareket ettirmek ve kodun sürekli yeniden yazılmasından ve hata ayıklanmasından daha fazla bir görsel düzenleyici kullanmak daha kolaydır.

Aslında, bu yazılım bugünün “Hızlı Prototipleme” Tasarım ve Geliştirme ortamında önemli bir bileşen haline gelmiştir.

Bununla birlikte, Deneyim Tasarımı ile biraz eğlenelim.

02/07

Adobe Deneyim Tasarımında Basit Bir Çember ile Bir Hedef Pin Oluşturma

XD'nin tek bir yönü, vektör çizim araçlarının kullanılmasıdır. Bir simge bulamıyor musunuz? Sorun değil. Kendininkini yuvarla. İşte nasıl:

1. Elips Aracını seçin ve Option / Alt-Shift tuşlarına basılarak bir daire çizin.
2. Seçilen daire ile FF0000 için Fill rengini ve özelliklerde "none" için Border öğesini ayarlayın.
3. Bağlantı noktalarını göstermek için daireye çift tıklayın. Alt çapayı aşağıya doğru sürükleyin.
4. Seçilen Bağlantı Noktasını çift tıklatın ve eğriler çizgilerle değiştirilir.
5. Beyaz bir dolgu ve hiçbir stoke ile başka bir küçük daire çizin. Pozisyona getirin ve pimi ve daireyi seçin. Özelliklerin üstündeki Hizala panelinde Yatay Merkez düğmesine tıklayın ve Pin oluşturulur.

03 of 07

Adobe Deneyim Tasarımında Arkaplan Blur Oluşturma

Arka plan görüntüsü üzerinde metin veya başka bir içeriğin olması yaygındır. Buradaki problem, görüntü, çoğu zaman, üstündeki içeriği aşırıyacaktır. Bu sorunu çözmenin bir yolu, arka plan görüntüsünü bulanıklaştırmaktır. Görüntüyü Photoshop'ta veya başka bir görüntü düzenleme yazılımında bulanıklaştırabilirsiniz, ancak bu özellikle XD bu görevi sizin için halledebildiğinden, bu biraz verimsizdir. İşte nasıl:

1. Yeni çalışma yüzeyi oluşturun ve arka plan resminizi ekleyin.
2. Dikdörtgen Aracı'nı seçin ve resmin üzerine bir dikdörtgen çizin. Dikdörtgen seçiliyken, Doldur'u Beyaza ve Kontur'u Yok'a ayarlayın.
3. Dikdörtgen seçiliyken, özellikler panelinde Arkaplan Bulanıklığı'nı seçin . Üç kaydırıcı, Blur Miktarı, Parlaklık ve Opaklıktır. İşte yaptıkları şey:

• Bulanıklık Miktarı: Resmin altındaki şeklin bulanıklığını ayarlar. Maksimum değer +50'dir.
• Parlaklık: Görüntüdeki parlak noktaları ve gölgeleri ayarlar. Minimum değer -50'dir ve Maksimum değer +50'dir.
• Opaklık: Şeklin şeffaflığını ve görüntünün şeklin altında görünmesini etkiler. Değerler% 0 ile% 100 arasındadır.

Gerçekten “bir şeyleri değiştirmek” istiyorsanız, şeklin rengini değiştirin ve görüntünün “görünümünü” değiştirmek için Opaklık değeriyle oynayın.

04/07

Adobe Experience Tasarımında Scrim Yaratın

Yaygın bir tasarım problemi, arayüz elemanları elemanlarının ortak bir renk olması, ancak bir arka plan görüntüsü veya düz bir renk üzerine yerleştirildiğinde kaybolmasıdır. Çözüm bir bezdir. Bir skrim, arayüz elemanı ve arka plan arasına yerleştirilen biraz opak bir eğimdir. Bu XD'de başarmak için kolaydır. İşte nasıl:

1. Çalışma yüzeyinizi XD'de oluşturun, bir resim ekleyin ve bir arayüz elemanını uygun UI Kitinden - Dosya> Open UI Kit … - çalışma yüzeyine kopyalayıp yapıştırın. Yukarıdaki resimde fotoğraf, Durum çubuğunu ve Uygulama Çubuğunu görmeyi zorlaştırır.
2. Dikdörtgen Aracı'nı seçin ve bir dikdörtgen çizin. Özellikler Panelinde, Dolguyu seçin ve Renk Seçici'deki açılır menüden Degrade'yi seçin. Degrade renklerini Siyah Beyaza ayarlayın. A değerini - Opaklık değerini -% 60 ve Beyaz A değerini% 0 olarak ayarlayın.
3. Dikdörtgen seçiliyken, Nesne> Yerleştir> Geri Gönder'i seçin . Arayüz elemanları artık görüntü üzerinde görülebilir.

05/07

Adobe Experience Tasarımında bir Görüntü Avatarı Oluşturun

Kullanıcıların birbirleriyle konuştuğu ve konuşmacının resmi ekranda göründüğü Sohbet uygulamalarında ortak bir Tasarım Modeli bulunur. Bu avatarlar genellikle maskelenmiş görüntülerdir. XD'de bunu basitce başardı. İşte nasıl:

1. Çalışma yüzeyinde bir görüntü ve bir daire veya başka bir şekille başlarsınız. Daireyi herhangi bir renkle doldurabilirsiniz. Yapmanız gerekmeyen bir kontur rengi eklemek. Efekt oluşturduğunuzda ortadan kalkacak, neden rahatsız oluyor. Daireyi durdurmanız gerekiyorsa, panoya kopyalayın.
2. Çevreyi resme taşıyın ve hem görüntü hem de daireyi seçin. Bot nesneleri seçiliyken, Nesne> Şekil ile Maske'yi seçin . Fareyi serbest bıraktığınızda, Avatar oluşturulur. Buradan yeniden boyutlandırabilirsiniz.
3. Bir kontur eklemeniz gerekiyorsa, panoya oturan daireyi çalışma yüzeyine yapıştırın. Seçilen kopya ile Özellikler'de dolguyu kapatın ve kontur rengi ve genişliği ekleyin. Onları hizalamak için, her iki nesneyi seçin ve özellikler panelinin en üstündeki Hizala seçeneklerinde Merkez Hizala düğmelerini tıklatın.
4. Fotoğrafı maskenin içinde hareket ettirmek istiyorsanız, maskeyi çift ​​tıklayın. Bu, görüntüyü ve maske şeklini gösterecektir. Resme tıklayın ve yerine sürükleyin. Fareyi serbest bıraktığınızda, görüntü maskenin içindeki yeni konumunda olacaktır.

06/07

Adobe Deneyim Tasarımı Çalışma Yüzeyleriyle Oynayın

Deneyim Tasarımı çalışma sayfaları, içerik yerleştirmeniz için sadece orada değildir. Onlar da manipüle edilebilir. İşte yapabileceğiniz birkaç şey var:

1. Çalışma yüzeyinin Yatay ve Dikey sürümlerine ihtiyacınız varsa, çalışma yüzeyini çoğaltın ve seçili yinelenen ile Özellikler panelindeki yatay düğmeyi tıklatın. Çalışma yüzeyi, Yatay yönlendirmeye dönüşecektir. Çalışma Yüzeyinde içerik varsa, Çalışma Yüzeyinin adını tıklayın ve Özellikler Paneli'nde Artboard özellikleri görünecektir.
2. Çalışma Yüzeyine özel bir renk ve bu konuyla ilgili proje eklemek için Çalışma Yüzeyini seçin ve Özellikler Paneli'nin Görünüm bölümünde Dolgu renk çipini tıklayın. Renk için onaltılı değeri girin ve + işaretini tıklayın. Renk, Özel Renk olarak eklenecektir. Bu rengi başka bir yere uygulamak için, bir nesneyi seçin ve rengi uygulamak için Özel Renk yongasına tıklayın.
3. Çalışma yüzeyleri dikey olarak kaydırılabilir. Bunu yapmak için çalışma yüzeyini seçin ve yüksekliğini, Özellikler Panellerinde veya çalışma yüzeyinin altını aşağı doğru sürükleyerek değiştirin. Özellikler panelinin Kaydırılabilir alanında, açılır menüden dikey'i seçin ve ekran için görünüm yüksekliğini girin. Bu kesikli mavi çizgi, görünümün altını gösterir. Test etmek için Oynat düğmesini tıklayın ve kaydırın. Kaydırmayı kapatmak için Kaydırma açılır penceresindeki Yok'u seçin.

07/07

Adobe Experience Tasarımında Mobil UI Kitini Düzenle

Deneyim Tasarımı, iOS, Android ve Windows UI'lerini geliştirmek için bir UI Seti içerir. Onları ilk açtığınız zaman, oldukça iyi bir şekilde yerleştirildiklerini düşünebilirsiniz. Tam olarak değil - bu kitlerdeki bit ve parçaların her biri tamamen düzenlenebilir. Android teleferiği oluşturarak öğrenelim.

1. Çalışma Sayfası aracını seçip , Özellikler Paneli'nin Google bölümünde Android Mobile'ı seçerek başlarsınız.
2. Dosya> UI Kitini Aç> Google Malzeme'yi seçin . Bu, Material Design UI Kitini açar. Büyüteç'i seçin ve Ekran Kılavuzları çalışma yüzeyini seçin . Ben bununla başlamak istiyorum çünkü bana arayüz elemanlarının uygun ekran yerleşimi için kılavuzlar veriyor. Mavi çubuklardan birine tıklarsanız, kilitlendiğini görürsünüz. Kilidini açmak için her birine bağlı kilidi tıklayın . Çalışma yüzeyini kaydırın ve seçimi panoya kopyalayın. Belgenize geri dönün ve ekranı çalışma yüzeyinize yapıştırın.
3. Uygulama çubuğunda, çalışma yüzeyinin üst kısmına bir kez tıklayın. Nasıl seçebileceğine dikkat edin. Nesne> Yerleştir> Öne Getir'i seçin. Seçiminiz artık Ekran Kılavuzlarının üzerindedir. Bu, ekrandaki tüm elemanların düzenlenebileceğini size söylemelidir.
4. Üstteki Durum Çubuğunu çift tıklatın ve Özellikler Panelinde ve Dolgu renginde 455A64'e çift tıklayın . App Çubuğunu çift tıklayın ve dolgusunu 607D8B olarak ayarlayın. Bu size, bir UI kitindeki her bir öğenin, projenin renk özelliklerini karşılayacak şekilde düzenlenebileceğini söylemelidir.
5. Simgelerden ne haber? Renklerini nasıl değiştireceğiniz aşağıda açıklanmıştır. Seçmek için kalbe çift tıklayın . Özellikler Paneline bakarsanız, seçiminizi düzenleyemeyeceğinizi varsayabilirsiniz. Tam olarak değil. Kalbinize bir kez daha çift tıklayın . Özellikler açılır ve dolgu rengini FF0000 olarak değiştirirsiniz. Kalan simgeler ve metin için bu çift çift tıklamayı tekrarlayın.