2011. május 6., péntek

User Interface - UI

Ebben a témában átvesszük az SW-ToR UI-ját. Nemrég volt egy leírás róla, amit Michael Voigt prezentált, aki felelős a projectért a ToR-ban.


Az Eredeti elképzelés

Az elképzelésük egy modern UI volt, ami kitűnik a már megszokott MMO sablonok közül. Sokan sokféleképpen próbálkoztak, de a kevesebb néha több. A Bioware az egyszerű és átlátható változatnál maradt, ami minél több információt sűrít össze kis felületen, hogy ne takarja el az egész képernyőt. Több sémát felhasználtak, merítve kicsit a versenyautók, vonatok és repülők kezelőfelületéről, míg végül ezt kapták.:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69xNQD4ntCF-oZzmwtUe_n5bJXh5vipSW5BCW24n7Z_r-Vp6anI3JIXnsopzZ5JB1a-XoD8fV-jc9JZdq9TDCkuA2kRccTQmL5A8IRoffyxNt4PAv-KU3-s-L99d9HWNNLj89Qv4lV1eC/

Interface Layout


Az egyik fő tényező az volt, hogy az UI ne zavarjon be a látványvilágba. Ezért a lekerekített, egyszerűbb sport autós vonalakat követték. Az is világos volt számukra, hogy a hagyományos MMO stílus már jól bevált, ezért ettől nem akartak nagyon eltérni. Sok elemzést végeztek, és számtalan változatot kipróbáltak, hogy mi a legmegfelelőbb a tapasztalt játékosoknak ami egyben innovatív és jól átlátható a kezdők számára is.


A Rendszerek Logikai Csoportosítása

A különböző konzoloknak egy logikus elhelyezést kellett összeállítani az UI-n. Mi legyen középen, mik kerüljenek ki a képernyő sarkára, mi olyan fontos amit akár harc közben is meg kell találni.....


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujgIifQAvnGjnwjUm5F-4ZNxJ75OI3QH6VgLCn1GXOKyfn79lyqLSaGMtWda65ec87tU0dCYgLXA1-iFmk6GbGSAzaY-PlRqmMFjRiwKQJLkkZPSjVU6zgxpTcTJK3Xj82H5LhrBXpdUv/

Interface Layout


A fenti ábrán a következő strukturális felépítés látható :
  1. Social System - Chat (bal felső)
  2. Game System - Játék/Help (közép fent)
  3. Mission System - Küldetések (jobb felső)
  4. Navigation System - Térkép/Navigáció (jobb lent)
  5. Combat System - Harc/Skill indikátor (közép lent)
  6. Party System - Csapat rendszer (bal lent)

Miután összeállították a megfelelő struktúrát, kifejlesztették az UI modelleket. Sok különböző stílust teszteltek, néhány valós mintákat követett, de volt sok elvont is. Nézzünk néhányat ezek közül.:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb202Lu2c7uULWhwzCij1xo_VEDRdcJXHEe5zHVwk8t9BqPbbbYIAGtjVnndFEwKzUt6vAQWabUxXIR77TPXbtUiGpV26leKrAGJApEv1Ii3x6Ftd2hls_KBhKujJNhvSIJPMr4dwchMs0/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMtjGj8H5KGIP1GkE28d5wbm_fHtD5m7NIeSyCg3NPqXcMl3KZHfn_4Td7i4QycIjK4JUKGvXh6UoZUiWKcUluUN2RLOqDhPKfb-1o4qrOMy-Y3cbAohVbFZoRtKnpbDmAdY94LvaHlxE/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSENLHcDjwpm4vGyT1dBOm1kBj6NrPZQ6BW4_l94rYw82q8BtKNU7NLIZVX86X_1GuaZbg9rnfvjwRbF3gQX0NpMxOc95PssFZixoHGtq5qbLwhkMsNw-fdsp9SsSCGvFI1hGKZhek7Jx9/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLnvmshBlVu0eKLk57qbWiSFEo_xRyDB13Sbyf-hF0fRGoZYYg93kFrycsvxERFQI1U0Swi5pdZClI98o3p1oeAra3A1AefAD57-GYnXnaA4JfT1Iver2P1ASE0xagA-nDsw2cODxzJEP_/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdRehIfIl7DGWs7BRo7Wh_9t1keObap2K8KN2666mLsAcyeBJT3Uo_RoLbaeT7asyeq3BwA4sqYsrdE81hnPwTDJBpmDCphVyWCv52OYlWu5-FUE6vBkZzREPVZl4j_PwRI67J67fqyuiw/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV7jjwaZ7NJfNtZcRbtdek4X8rx2B0pXtpTmlj3VMhAXhotPEo3yItCR_geIa8KBWo8khHok3jk09YIINEdgph_Ye-kAZNhrljIidj3KlM6r-gV8VSKAtqxD1VU08TT0yG0ibTDopqO5zT/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BQow-7YWer0ChVu5ABCqEUBantwYe6_BTVAYQZnTaPxLI8MTA7oaYv1aAXOELk0yLkBwwvPVThoI531VqGuWthmyctll4yKrlL94XH004PBZt7R59N3g-eUfrtD8Z53wKfwhauYGbzob/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXGwgPyZJpyeWhYbfMQGDtyc-MPuMSXZeIIic-ZXM2ROARi6WIVf53a5gJnElbpQoN5EFKBoyH3El5wRPg80GvZRfyzGnhIIajq7y1mN9l7lmZPq0D-gjZWewxCX7pu3dKvcyiHXUhM1r/

Screen Makettek


A legjobbat kiválasztották és azt csiszolták tovább. Miután nekikezdtek újra felmerült, hogy könnyen átláthatóvá kell tenni. Végül úgy döntöttek, hogy le kell egyszerűsíteni, hogy jobban illeszkedjen a világba. Majd következett az élek simítása. Megfigyelték, hogy a mai trendekben egyre kevesebb kocka és éles sarok látható, ezért egyre halványabb és lekerekítettebb lett az UI keretezése.



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTWWVfDWAgkBS7t_B3V9Gc7RAm4eOcTtxXpYjo-F-hwo20aGuQNeotM46gb2cEiu3SDvU8QvUXlKGylbdtmc16BMuI5Wzxl9sXYIA0rH9JO2h3TwJHik3FCzaehc4kEHDGdhB0XXXpJxaZ/Elemezték a videó kártyák és monitorok felbontását. A mai technológiáknak köszönhetően sokkal nagyobb felbontásban játszanak a játékosok, ezért oda kellett arra is figyelniük, hogy a szöveg még így is tisztán olvasható maradjon. Ez ugyan szabadon állítható lesz, de szerettek volna egy ideális megoldást találni az alapbeállításokra.




Azt a megoldást találták, hogy a lehető legkevesebb szöveget használták az UI-n. Mindent olyan ikonokkal jelenítettek meg, ami egyértelműen kiváltja a szöveget. Ezzel rengeteg helyet megspóroltak a képernyőn.


Kivitelezés

Ebben a szakaszban sok munka volt, de már a letisztult kezelőfelületen keltek életre a konzolok.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqpW5IA15m_4pEmTDYsrnQv3h0uROPcgAAW2SiW6vh54s2WMR9ovu1MGrzUqOGKj_b34Q-pVVyYd0UUgX9s7Al_M8lWDKd3jIwxvQ2HwE28S29QNzrgmc0o1CqtfMGjjnThrYayiN5Y8U/


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmldvOksi2XTKapUk1WudDlarxnp7do9Hg3J-ExFizkP59VstIygV_W8YwC1xMsUcrG3Uux1q43TyfV_K2Y2hQiYX6ooAqmZEDK6_zGXaUgFpz8EG6S7OYJ7LSr12GwixJS7C-MyU-Idd/

Különböző rendszerek


Rengeteg rendszer található az Old Republic-ban, a beélesítésük nagyon hosszúra nyúlt. A legtöbb előugró ablak merített egy kicsit az UI dizájnjából. Az elképzeléseik megjelentek a monitoron, sikerült életre kelteni a terveiket. Bár már most is elég látványos az UI az Old Republic a visszajelzések hatására folyamatosan megújul mind külsőleg, mind belsőleg, ezért semmi sem mondható még véglegesnek.


Esztétika

Miután a főbb rendszerek a helyükre kerültek, úgy döntöttek, hogy javítanak még egy kicsit a grafikán. Tovább emelték a mércét, egy kimagaslóan jó UI-t akartak létrehozni. 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFXFT4hS94qWEUPDFwkpwhpcxtcSWkSMdw0h-u_bEU94LmWX-4R1BBlONk8fBcCnABnw_hH1Tnn4T9Psb7tcG_v40Khbt5D2KWoF14wmEIYMLEuAi0XVojw6lkaNbBWeWvANqbIOOy1vj/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHSExDmwnHwSQUSJY_VnAToe8iyzwCz7DuWr8NBosOtO7sT0lKcEUGD6kVtczeADufxWY4A5iHfmLBSJTFSVQCTSGv_kriaOVo4o4HrPX91j-w9hhVn38Q0t4jic3pVAN-7kvMeg5wRb6W/

Formálódó Stílus


Ahhoz, hogy ezt elérjék a művészeknek a meglévő koncepciót kellett tovább csiszolniuk. Ők már csak a vizuális minőségre koncentráltak, mivel az alapok már megvoltak.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMvMDKVt00l37elrtmVJY5XQgI4DQfz0ZCM44RuyrWHZAnzw4HljpHAFdBQ58nIC7_f6rIepWeNZ-1aWhEtFZZHir10Ew5WqmzC_AHUmw61CwjEyQ5zLoLXviGyEBO7jMM2LvYkgL9Bczn/s512/style-guide.jpg

Egységes Téma


Ezek után még mindig úgy érezték, hogy tovább lehet csiszolni az UI-n, még nem érték el a tökéletességet. A felület még nem volt annyira minimalista mint szerették volna. Az UI-n máig dolgoznak, most jelenleg ez az aktuális kezelőfelület a játékban :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZrCQ6Vi0cbpSGEfr4Z7ZXWqZ70CYC5nwGuLcCTNLoYgTseHhxru608mAhocnU-PU85ankYo4u5GQJpL9SHwJxS0paPD3r3AYntE9yl3nLj92AAc4h6YsvPKa74fGL6aN6iN3JogHMSBv3/s640/evolvestyle_full.jpg

3 megjegyzés:

  1. Nekem nem tetszik, hogy a chat felül van. Ki kéne cserélni a party frame-el..

    VálaszTörlés
  2. sztem jó ez.
    Aztán meg tuti mozhatható lesz minden felület, szal ugy rakod ahogy akarod.

    VálaszTörlés
  3. Ha valaki nem széles vásznon nézi, akkor a chat tényleg szar helyen van :( De még semmi nem végleges.

    VálaszTörlés