web-gelistirme-sc.com

Düz bir tasarımda bir düğmeyi tıklayabileceklerini anlayın

Temelde çevrimiçi bir özgeçmiş olan düz - ish duyarlı bir web sitesi oluşturuyorum.

Bir ızgara sisteminde beceriler gösteriyorum (ama her ne olabilirse). Her beceri, onunla ilgili bazı bilgileri (seviye vb.) Görüntülemek için tıklanabilir.

İşte bu noktada yaptığımın ekran görüntüsü (mobil cihaz görünümünden). enter image description here

Tasarımın kavrayıcısı olarak tıklanabilir olduğunu biliyorum. Ancak, herhangi bir rastgele kullanıcı için bariz değil ya da en azından yeterli değil gibi hissediyorum.

Bir bilgisayar tarayıcısında, fareyle üzerine gelindiğinde görsel değişiklik yapmak kolaydır, ancak tablet/mobilde nasıl yapılacağını anlayamıyorum.

Herkes temel olarak söylemek için görsel bir hile var mı hey, beni tıklayın ? Sanırım her karonun köşesine küçük bir işaretçi ekleyebilirim ama iyi görüneceğinden emin değilim.


GÜNCELLEME

Bazı önerilere göre, simgeleri daha alakalı olacak şekilde değiştirdim. Böylece etiketi silebilirim.

Ayrıca, mavinin iki tonu arasındaki konstratı vurgulamak için düğmelerin arka plan rengini biraz aydınlatıyorum.

enter image description here

79
pistou

Düğmelerinizdeki sorun, arka planın üzerine yükseltilmemeleri, bu nedenle tıklanabilir görünmemeleridir.

enter image description here

Düz düğmeler ve yükseltilmiş düğmeler arasında seçim yapma ve yapmama seçenekleriyle nasıl seçim yapılacağı konusunda Malzeme Tasarımı'nı kesinlikle öneririm. http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons

64
Zoe K

Sorun şu ki yeterince düz değil

Simgeler veya düğmeler mi? Bu düz tasarım ile ilgili yaygın bir sorundur (diğer cevaplara bakın), ancak burada henüz görmediğim olası bir çözüm, tek geçerli seçenek tıklamak olana kadar kaldırmak bilgisidir. Düşün fayans .

supa flat

... Ve bu noktada </> hiç uygun bir simge değildi.

17
hoosierEE

ben ilk beceri göstermek gibi bir şey düşündüm ve kullanıcı kendisi anlamaya izin, diğerleri de tıklanabilir/tıklanabilir olduğunu

(Üzgünüm bunu yapmak için elimde fazla zamanım yok, ama yardımcı olabilir)

mockup

bmml kaynağını indirin - Balsamiq Maketleri ile oluşturulan tel kafesler

11
Pascal

Kullanıcıların büyük olasılıkla alışık oldukları görsel bir ipucu kullanmaya ne dersiniz: bir alt çizgi? Aşağıda, altı çizili ve kesik çizgili bir örnek verilmiştir.

enter image description here

11
fri

Bir mobil cihazda, mevcut tasarım trendi bunu kullanır. Kullanıcılar, açıkça söylenmesi gerekmeksizin daha fazla bilgi için ayrıntılı inceleme yapmak üzere dokunma yöntemini tanımışlardır.

Ayrıca, mobil cihazdaki bir "işaretçi" gereksizdir çünkü hiçbir zaman parmaklarınız dışında başka bir giriş cihazı yoktur.

Tasarımınızın sadeliğini ve zarafetini koruyun. Tek öneri, belki de mavinin iki tonu arasındaki kontrastı arttırmak olacaktır.

7
Arthur Harrison

malzeme tasarımı iyi ama mükemmel düz değiller. Bunu tavsiye ederim, ideal düz düğmem enter image description here

p/s: insanların bir şey bir düğme olduğunu düşünmek istiyorsanız, onlara "etiket" ve "simge" sağlamanız gerekir.Bu iki unsurla, kullanıcıların çoğu "ah, bir düğme var, tıklayalım"

7
Long Eleven

Birkaç öneri:

1. Etiketi Görsel Olarak Düğmenin Bir Parçası Yapın

  • Etiketler genellikle bir düğmenin parçasıdır

2. Açık Kenarlık Ekleyin (isteğe bağlı)

  • Mutlaka derinlik katmadan vurgular

3. Düğmeleri Birlikte Rahatça Gruplayın

  • Her biri eşit öneme sahip bir grup düğme gibi hissettirin

4. Daha Kalın Font Ağırlığı Kullan

  • Simgeler oldukça tıknaz ve imo hafif bir yazı tipiyle iyi dengelenmiyor

Basılmamış/Basılı Düğme Örnekleri:

6
Dom

Hem Long hem de DesignerAnalyst ile hemfikirim, biraz stilin düğmeler olarak daha fazla pop oluşturmasını sağlıyor.

Düzenlenmiş sürümünüzdeki simgeleri beğenirken, simgenin ne anlama geldiğini bilmeyenler için simgenin altına metin eklemenizi öneririm.

Anlamları açık olduğunda simgeler harika, ama her gün JQuery ve Javascript programlıyorum ve simgeleri otomatik olarak tanımadı.

5
Andrew Neely

Metinsel bir ipucu da verebilirsiniz

"Daha fazla bilgiyi" daha spesifik bir şeye dönüştürebilirsiniz

Textual clue

2
Viktor Mellgren

Çok fazla cevap var, ama bunların hiçbirinin henüz düz tasarımın kalbine ulaştığını düşünmüyorum. Düz tasarımda sorun nasıl bir düğme gibi görünmesini değil. Bütün fikir şu ki, 3D düğmesinin metaforu eski moda oluyor. Bence şu anda doğmakta olan çok sayıda çocuk var, gerçek bir somut düğmeye basmadan önce dokunmatik ekranda sanal bir düğmeye basacaklar.

Metaforlar görsel olarak gürültülüdür. Düz tasarımın zorluğu, tasarımı kullanılabilir tutarken metaforlardan kurtulmaktır.

Bu nedenle, uygun, modern bir düz tasarım deneyimi oluşturmak istiyorsanız, tıklanabilir düğmelerin düğmelere benzemeden tıklanabilir göründüğünden emin olmanız gerekir. Ana kural/kural, tıklanabilir öğelerin en çok dikkat çekmesi gerektiğidir. Bunu başarmak için aşağıdaki araçlara sahibiz:

  • Kontrast kullanın Arka planınızın artık düğmenin beyazı ile düğme renginden daha fazla kontrastı var. Tasarımınızın tıklanamaz görünmesinin ana nedeni budur. Arka plan ve düğme renklerini değiştirin.
  • Parlak, ana renkler kullanın : Yukarıya bakın.
  • Beyaz boşluk kullanın : Düğme simgelerinin çevresinde yeterince beyaz boşluk bıraktığınızdan emin olun. Kenar boşlukları büyüdükçe eleman daha fazla ilgi görür. Özellikle bu kenar boşlukları parlak bir renkle doluysa, içindeki öğelerle iyi tezat oluşturur.
  • Kalın metin kullanın : Koyu bir arka plandaki beyaz metin yine de kalın olmalıdır, ancak bir düğmede bu iki katına çıkar.
  • Metni düğmenin içine yerleştirin : Renkli kutu, bu tıklama seçeneğiyle yapılacak her şeyi kapsamalıdır. Metni altına yerleştirin ve kullanıcıdan metni düğmeye eşlemesini istersiniz.
  • Yuvarlak köşeler : Bazı düz tasarım meraklıları (BBC, Microsoft) sert köşelere gidecek, ancak sonuna kadar gitmek istemiyorsanız, yuvarlak köşe tıklanabilirlik için çok güçlü bir sözleşmedir.

İşte benim yeniden tasarımım:

enter image description here

Hala tıklanabilir görünmediğini fark edebilirsiniz. Neden olmasın? Bence altı düğme yeteneklerin bir listesini tasvir etmek için çok geleneksel bir yol değil. Kullanıcının bu noktada gideceği açık bir yeri yoktur. Aslında, yan yana altı düğmenin olması oldukça nadirdir. Genellikle, bu tür bir düğme yaptığınızda, sayfadaki en önemli tek öğedir. Bence tasarımınız bir ikon listesine benziyor.

Sorunun kalbine gerçekten ulaşmak için genel tasarımınıza bir kez daha bakmayı düşünebilirsiniz. Kullanıcının bu noktada ne yapmak istediğini anlayın. Belki içerik tabanlı gezinme gibi bir şey size yardımcı olabilir.

2
Peter

Materyal Tasarım konsepti muhtemelen size yardımcı olabilir.

Öncelikli eylem ile düzen ilkesi, asıl davranışın kullanıcıya nesneyi ayırt etmek ve uygunluk eklemek için neyin yardımcı olduğunu göstermek için düzen arasında gölge olmasını sağlamaktır.

http://www.google.com/design/spec/material-design/introduction.html

Bu yüzden düğmenize küçük gölge ekleyin basın gölge eylem hidding tarafından interaktif interaktif olduğunu. Bilgisayar görüntüleniyorsa rollover yanıtı ekleyin ve kullanıcılarınıza daha fazla yardımcı olacaksınız.

0
pierre lebailly

Onları Basit Tutun, Akıllı

K.E.S.S.
Bir geliştirici olarak siz sahneyi hazırladınız; ancak kullanıcı gerçek sanatçıdır. İki farklı beceri seti. Birbirlerini tamamlarlar ve uyum sağlarlar.
Uygulamanız, çevrimiçi bir özgeçmiş gibi dolaylı olarak bu tür etkileşimleri talep eden bir dizi beklentiye sahip olacak. Tıklama vb. Kullanıcınız ne istediğinizi tipik olarak anlayacaktır.

İşte sorunuza ek geri bildirimlerim:

enter image description here

  • Düğme simgelerinizle açık etiketler tutun.
  • Vurgulanan düğmelerin büyümesini sağlayın. Bu, kullanıcının sezgisel olarak ne çıkardığını doğrular.

İyi şanslar!

0
Jedi Commymullah

Gördüğüm bir seçenek (bu simge boyutuna bağlı olarak), her görüntü simgesinde bir farenin küçük bir resmi (temelde iki düğme için üstte bir bölünme ile dikey olarak genişletilmiş oval).

0
Michael Durrant

İlk resminiz galeri gibi geliyor: her simgenin bir etiketi var (ve resimlerin tıklanabilir olduğu belli değil)

Sadece düğmeleri düğmelerin içindeki etiketleri hareket ettirin (ilk simge kümenizde bile, yeterli olmalıdır). Bu şekilde, daha çok bir düğme gibi hissetmelidir.

Yeniden okuduktan sonra, @Dom önerilerine ait gibi görünüyor

0
oliverpool