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.
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é.
Problém s tlačítky spočívá v tom, že nejsou zdviženy nad pozadím, takže se nezdá být kliknutelný.
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
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ů:
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:
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.
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:
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ů