Jak jsem modernizoval UI a UX

vložil Radek Červinka 22. března 2015 22:16

Posledních pár měsíců jsem s přestávkami pracoval na modernizaci UI a UX našeho vlajkového produktu CRMPLUS. Cílem bylo popotáhnout vzhled UI aplikace (doufám) do současnosti a z hlediska UX odstranit několik historických nešvarů jako např. většinu modálních dialogů.

Zkusím naznačit některé věci, které jsem použil a doufám, že to někomu pomůže, nebo aspoň pobaví. CRMPLUS 5

Velké zobrazení

Úplně na začátku se s obchodníky dohodlo, že se vykopnou staré ikony (tak z doby XP, některé homemade, každý pes jiná ves) a koupí se profesionální moderní flat ikony. Po nasazení do staré verze jsem ani nevěřil jak to okamžitě změnilo vizáž aplikace.

Už při úplném začátku práce na CRMPLUS před x lety jsem definoval, že ikony budou v jednom imagelistu v datamodulu a za všechny roky jsem se jí držel a teď přišel okamžik, kdy se mi to vrátilo. Ta slast :-).

Po dlouhém boji se rozhodlo, že se vykopne původní toolbar s ikonami 32x32 za něco modernějšího. Ribbon. Velký boj, nikdo si nebyl jist, zda je správná cesta.

Rozhodl jsem, že se nepoužije Ribbon z Delphi, ale od TMS - AdvToolbar. Důvodem je větší variabilita (cca 10 různých stylů dle verzí Windows), možnost si to upravit a vůbec. TMS vždy dokáže vizuálně nadchnout, uvnitř to někdy bývá lehce horší, ale vždy to nějak šlo dohackovat (v tomto případě to ani moc nebylo třeba, nebýt toho, že jsem měl speciální požadavky na práci s ikonami).

Z možných variant vzhledu TMS Ribbonu jsem vybral ten (lehce upravený) dle Windows 8, kromě jiného perfektně sekne k flat ikonám a je hned vidět, že je to moderní - dle Windows.

Už několikrát jsem zde zmiňoval to, že Virtual TreeView je prostě geniálně flexibilní a vzhledově velmi dobrý. V CRMPLUS je použit všude kde je to možné.

CRMPLUS

Díky jeho koncepci na bázi MVC se velmi jednoduše reaguje na různé situace. Všimněte si např. vybraného filtru, kdy pro vybraný záznam se vrací jiný font, jiná ikona a jiná barva a hned tu máme efektní možnost jak naznačit obsluze, že je možné začít vyhledávat psaním.

V kombinaci s filtrováním Virtual TreeView, které jsem tu už popisoval (na obrázku je vidět editační box pro vyhledávání) je to velmi silná zbraň. Použil jsem ji všude možně.

CRMPLUS

TMS komponenty jsem použil i pro celkem efektní možnosti. Ty jejich komponenty jsou fakt neuvěřitelné - to co je na obrázku je naprosté minimum z toho co to umí.

CRMPLUS

Jak jsem řekl, jedním z cílů bylo odstranit co nejvíce modálních dialogů. Nahradil jsem modální dialogy za zobrazení do záložek. Pro zobrazení záložek jsem použil TJvTabBar z JVCL s malou úpravou kreslení.

Hodně používám dokování (tak jak jsem ho popisoval dříve), tj. vytvořím instanci formuláře a docknu ho na správné místo (např. záložka), případně jeho část do navigátoru. Např. na uvedeném screenshotu je VirtualTreeView (související data), který je z formuláře přemístěn do navigátoru, tj. formulář vytvoří strom a ten se v hlavní aplikaci jen zobrazí někam jinam. Strom je vytvářen dynamicky podle TPageControl, který má záložky. Co záložka, to řádek. Při výběru řádku ve stromě se zobrazí záložka a ostatní se schovají. Záložka je částečně schována pod mým našeptávačem.

CRMPLUS

Efektní věc. Postaveno na bázi opensource komponent pro Metro styl s GDI+. Při pohybu myši se to lehce zvětšuje - viz ten fialový box firmy. Moc pěkné.

Z databázového hlediska jsem už dávno přešel z ADO na FireDAC (UniDac by byl stejně dobrý). Výsledkem bylo zrychlení a hlavně mi to dovolilo dělat kouzla, o kterých se mi ani náhodou nezdálo (jako manipulaci s řádky datasetu na klientu, nahrazení řádku při refresh atd). Ale to jsem tu již dříve popisoval.

Balíky komponent:

  • Virtual Tree View
  • různé věci od TMS (AdvToolbar, Planner …)
  • FastReport
  • FastCube
  • něco z JVCL


Nabízíme Delphi školení na různá témata, primárně ve Vaší firmě.

Tagy: , , ,

Praxe

Komentáře

23.3.2015 9:21:07 #

Karel Janeček

Čau Radku, moc pěkné a vypadá to profesionálně, palec nahoru. Ty moderní ikony jsou moc podobné těm, které dodává Horizon - jsou to ony jak jsem Ti loni radil (verze 2015) nebo jsi koupil něco jiného ? Každopádně já je od loňska ve svých aplikacích používám také a skutečně vzhled velice oživí (sice s MS Ribbonem, ale i tak je to pokrok). Setkal jsem se ale i s požadavkem (naštěstí jen od jednoho uživatele), zda "by to šlo vrátit do původní podoby", tj. s klasickým toolbarem. Jak je vidět, co uživatel, to jiný názor.

Jinak balík od TMS používám roky a je to jedna z nejlepších věcí, co je na trhu, především jejich nepřekonatelný tAdvStringGrid. Loni jsem si od nich pořídil i CloudPack pro snadnou práci s (nejen) Google kalendářem - dojmy opět jen pozitivní.

Když už jsme u toho - používám pro svou firmu léta vlastní software, ale ten Tvůj vypadá velmi dobře a možná bych uvažoval o změně, zejména vzhledem k rostoucímu objemu zakázek a klientů. Neposlal bys mi prosím na můj email nezávazně nějaké materiály včetěn alespoň orientačních cenových hladin ? Díky moc.

Karel Janeček

23.3.2015 9:44:03 #

radekc

Ikony jsou Pure flat - http://www.axialis.com/stock-icons/pure-flat-2013-toolbar.html

Ohledne té druhé věci - ozvu se ti

radekc

23.3.2015 13:50:50 #

Zdeněk Vašků

Hezké. Taky mám vyzkoušeno, že "ultraextraflat" je to nejlepší pro bussines.

Zdeněk Vašků

23.3.2015 22:20:09 #

tomas

Výborná věc na ikony do aplikací, navíc zdarma:
http://www.syncfusion.com/downloads/metrostudio

tomas

25.3.2015 16:46:29 #

Ondřej Pokorný

Pěkné!

Ondřej Pokorný

14.4.2015 0:59:56 #

Igor

Už pár let si platím TMS VCL Subscription a taky si je nemohu vynachválit. Dříve jsem hodně používal Woll2Woll, ale když asi přes tři verze vždy jen upravili zdrojáky, aby chodily s novou verzí Delphi, a chtěli za to vždycky 200 dolarů, tak jsem je poslal do háje (no dobrá, nakonec jsem byl nucen jim ještě další dva roky ten odpustek platit, než jsem se v roce 2012 zbavil posledních zbytků jejich komponent ve všech projektech). Spolupráce s TMS Software je příkladná. Na všechny připomínky reagují okamžitě, každou chybu záplatují prakticky obratem (no většinou si to opravám sám, napíšu jim, co opravit, oni poděkují a v další verzi to tam je) a dokonce implementují navrhované nové funkce, které jim čas od času posílám. Takže za sebe jejich komponenty také doporučuji.
Jen bych upozornil, že spousta jejich zdrojových kódů je napsaná stylem "aby fungoval sample". Takže se občas stane, že komponentu nastavíte do stavu, kdy se to začne chovat nepředvídatelně, příp. pokud vymyslíte hack, tak s další opravou to jde proti opravenému kódu. Ale starší komponenty jsou toho už povětšinou zbavené.

Igor

24.4.2015 11:40:03 #

tk

Pěkné, pokud člověk necílí také na Linux a nemusí totéž překládat v Delphi i Lazarusu. U nás platí vše pokud možno open source komponenty a cross IDE kompatibilní.
Takže:
-virtualtreeview
-kcontrols
-synedit
-synapse
-alphacontrols (jen pro projekty v Delphi)

Databáze nepoužíváme.

tk

Komentování ukončeno

Naše nabídka

Partial English version.

MVP
Ing. Radek Červinka - Embarcadero MVP
profil na linkedin, Twitter:@delphicz

Nabízím placené poradenství a konzultace v oblasti programování a vývoje SW.
Dále nabízíme i vývoj speciálního software na zakázku.

Neváhejte nás kontaktovat (i ohledně reklamy nebo burzy práce).

Pokud chcete podpořit tento server libovolnou částkou, můžete použít PayPal. Moc děkuji.

Delphi Certified Developer

O Delphi.cz

Delphi je jediný moderní RAD nástroj podporující tvorbu nativních aplikací pro platformu Win32, Win64 , Mac OSX a na iPhone a Android (s výhledem na další platformy díky FireMonkey) na současném trhu (včetně Windows 8.1).

V současnosti je světová komunita přes dva miliónů vývojářů.

Delphi.cz je nezávislý portál pro uživatele Delphi. Portál není koncipován pro úplné začátečníky, i když i ti se zde nebudou nudit, ale spíše na programátory, kteří již něco znají a chtějí své znalosti dále rozvíjet a sledovat novinky.

Anketa

Poslední komentáře

Comment RSS