Umožněte lidem pochopit, že mohou kliknout na tlačítko v plochém designu

Problém je, že není dostatečně plochý

Jsou to ikony nebo tlačítka? Toto je běžný problém s plochým designem (viz další odpovědi), ale jedním z možných řešení, které jsem zde ještě neviděl, je informace o odebrat, dokud není jedinou schůdnou možností kliknout. Mysli dlaždice .

... A v tomto bodě by také mělo být zřejmé, že </> nikdy nebyla vhodná ikona.

přemýšlel jsem o něčem, jako bych ukázal první dovednost a nechal uživatele, aby si na to přišel sám, že ostatní jsou také klikatelní

(omlouvám se, že na to nemám moc času, ale může to pomoci)

^{stáhnout zdroj bmml - Drátové snímky vytvořené pomocí Balsamiq Mockups}

Co takhle používat vizuální narážku, na kterou jsou uživatelé pravděpodobně zvyklí: podtržení? Níže je uveden příklad s pevným podtržením a přerušovaným.

V mobilním zařízení to používá současný trend designu. Uživatelé se seznámili s dotykovou metodou, která umožňuje podrobnější informace, aniž by k tomu byli výslovně vyzváni.

„Ukazatel“ na mobilním zařízení je také nadbytečný, protože nikdy neexistuje jiné vstupní zařízení než vaše prsty.

Zachovejte jednoduchost a eleganci svého designu. Jediným návrhem by bylo zvýšení kontrastu mezi dvěma odstíny modré.

design materiálu je dobrý, ale nejsou dokonale ploché. Doporučuji vám toto, moje ideální ploché tlačítko 

p/s: pokud chcete, aby lidé považovali něco za tlačítko, musíte jim poskytnout „štítek“ a „ikonu“. S těmito dvěma prvky bude většina uživatelů vědět „ah, existuje tlačítko, pojďme kliknout“

Několik návrhů:

1. Značka se vizuálně stane součástí tlačítka

• Štítky jsou obvykle součástí tlačítka
  
  

2. Přidejte světelný okraj (volitelné)

• Zdůrazňuje, aniž by bylo nutné přidávat hloubku
  
  

3. Pohodlně seskupte tlačítka

• Nechte to vypadat jako skupina tlačítek, z nichž každá má stejnou důležitost
  
  

4. Použijte tučnější písmo

• Ikony jsou dost robustní a imo se nevyrovnává s lehkým písmem
  
  

Příklady stisknutí/stisknutí tlačítka:

Souhlasím s Longem i DesignerAnalystem, že díky trochu stylingu jsou více populární jako tlačítka.

I když se mi líbí ikony ve vaší upravené verzi, navrhuji přidat text pod ikonu pro ty, kteří nemusí vědět, co znamená ikona.

Ikony jsou skvělé, když jsou jejich významy zřejmé, ale každý den programuji v JQuery a Javascript a ikony jsem automaticky nerozpoznal.

Můžete také dát textové vodítko

Mohli byste změnit „více informací“ na něco konkrétnějšího

Existuje mnoho odpovědí, ale nemyslím si, že by se některá z nich doposud dostala k jádru plochého designu. Problém v plochém designu spočívá v tom, jak nechat věci vypadat jako tlačítko. Celá myšlenka spočívá v tom, že metafora tlačítka 3D je zastaralá. Myslím, že se nyní rodí spousta dětí, které stisknou virtuální tlačítko na dotykové obrazovce, než stisknou skutečné hmatatelné tlačítko.

Metafory jsou vizuálně hlučné. Úkolem plochého designu je zbavit se metafor při současném zachování použitelnosti designu.

Takže pokud chcete vytvořit správný, moderní plochý designový zážitek, musíte se ujistit, že klikatelné prvky vypadají klikatelně, aniž by vypadaly jako tlačítka. Hlavním pravidlem/konvencí je, že klikatelné prvky by měly vyžadovat největší pozornost. K dosažení tohoto cíle máme následující nástroje:

• Použít kontrast - Vaše pozadí má nyní větší kontrast s bílou než tlačítko. To je hlavní důvod, proč váš design vypadá nekliknutelně. Přepínání barev pozadí a tlačítek.
• Použijte jasné, základní barvy : Viz výše.
• Použít prázdné místo : Ujistěte se, že kolem ikon tlačítek máte dostatek volného místa. Čím větší jsou okraje, tím více pozornosti prvek dostane. Zejména pokud jsou tyto okraje vyplněny jasnou barvou, dobře kontrastuje s prvky uvnitř.
• Použít tučný text : Bílý text na tmavém pozadí by měl být stejně tučný, ale na tlačítku se to zdvojnásobí.
• Vložte text do tlačítka : Barevný rámeček by měl zapouzdřit vše, co s touto možností kliknutí souvisí. Vložte text pod něj a žádáte uživatele, aby mapoval text na tlačítko.
• Zaoblené rohy : Někteří puristé s plochým designem (BBC, Microsoft) půjdou za tvrdými rohy, ale pokud nejste ochotni jít celou cestu, zaoblený roh je velmi silnou konvencí klikatelnosti.

Tady je můj redesign:

Můžete si všimnout, že to stále nevypadá tak, že na něj lze kliknout. Proč ne? Myslím, že je to proto, že šest tlačítek není příliš konvenční způsob, jak zobrazit seznam dovedností. Uživatel prostě nemá na tomto místě jasné místo. Ve skutečnosti je celkem vzácné mít šest tlačítek vedle sebe. Když vytvoříte tento typ tlačítka, je to obvykle nejdůležitější prvek na stránce. Myslím, že proto váš design vypadá jako seznam ikon.

Chcete-li se opravdu dostat do jádra problému, můžete zvážit další pohled na svůj celkový design. Zjistěte, co chce uživatel v tomto okamžiku dělat. Možná vám může pomoci něco jako navigace na základě obsah .

Koncepce materiálového designu vám pravděpodobně pomůže.

Jeho principem rozvržení podle prioritní akce je, že hlavním chováním je mít stín mezi rozvržením, aby uživateli ukázal, co je nad tím, co pomáhá rozlišovat objekt a přidávat rezervu

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

Takže přidat malý stín na tlačítko, aby značka je interaktivní tím, že skrývá stín na akci tisku. Pokud je počítač zobrazen, přidejte odpověď při převrácení a vy svým uživatelům více pomůžete.

Nechte 'Em Simple, Smarty

K.E.S.S.
Vy jako vývojář jste nastoupili na scénu; ale uživatel je skutečný umělec. Dvě různé sady dovedností. Vzájemně se doplňují a harmonizují.
Vaše aplikace bude mít řadu očekávání ~> jako online résume implicitně vyžaduje tento druh interakce. Kliknutím a podobně. Váš uživatel bude rozumět tomu, co chcete, jako typické.

Zde je moje další zpětná vazba k vaší otázce:

• Udržujte explicitní štítky s ikonami tlačítek.
• Přispějte k tomu, aby se vznášela tlačítka. To ověří, co uživatel intuitivně odvodil.

Hodně štěstí!

Jednou z možností, které jsem viděl (v závislosti na velikosti těchto ikon), je malý obrázek myši (v podstatě vertikálně rozšířený ovál s dělením nahoře pro dvě tlačítka) v rámci každé obrazové ikony.

Váš první obrázek vypadá jako galerie: každá ikona má štítek (a není jasné, že na obrázky lze kliknout)

Můžete jednoduše zkusit přesunout štítky uvnitř tlačítek (i když byste měli první sadu ikon, mělo by to stačit). Tímto způsobem by se mělo cítit spíš jako tlačítko.

Po opětovném čtení se zdá, že patří do @Dom návrhů