it-swarm-eu.dev

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

Vytvářím plochý - ish responzivní web, což je v podstatě online resumé.

Zobrazuji dovednosti (ale mohlo by to být cokoli) v mřížkovém systému. Na každou dovednost lze kliknout, chcete-li o ní zobrazit některé informace (úroveň atd.).

Zde je snímek obrazovky (z pohledu mobilního zařízení) toho, co jsem v tomto bodě udělal. enter image description here

Jako konceptor návrhu vím, že na něj lze kliknout. Mám však pocit, že to není pro žádného náhodného uživatele zřejmé - nebo alespoň málo -.

V počítačovém prohlížeči je snadné mít vizuální změnu na přechodu, ale v tabletu/mobilu nemůžu přijít na to, jak to udělat.

Má někdo vizuální trik, aby v podstatě řekl hej, klikni na mě ? Myslím, že bych mohl přidat malý ukazatel v rohu každé dlaždice, ale nejsem si jistý, že by to vypadalo dobře.


AKTUALIZACE

Podle některých návrhů jsem ikony změnil tak, aby byly relevantnější. Můžu tedy štítek smazat.

Také trochu zesvětluji barvu pozadí tlačítek, abych zdůraznil konstantu mezi dvěma odstíny modré.

enter image description here

79
pistou

Problém s tlačítky spočívá v tom, že nejsou zdviženy nad pozadím, takže se nezdá být kliknutelný.

enter image description here

Vřele doporučuji Material Design pro podrobnosti o tom, jak si vybrat mezi plochými tlačítky a zvednutými tlačítky, s vyčerpávajícími úkoly a nedělat. http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons

64
Zoe K

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 .

supa flat

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

17
hoosierEE

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)

mockup

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

11
Pascal

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.

enter image description here

11
fri

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é.

7
Arthur Harrison

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

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“

7
Long Eleven

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:

6
Dom

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.

5
Andrew Neely

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

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

Textual clue

2
Viktor Mellgren

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:

enter image description here

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 .

2
Peter

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.

0
pierre lebailly

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:

enter image description here

  • 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í!

0
Jedi Commymullah

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.

0
Michael Durrant

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ů

0
oliverpool