P1 GUI (2006) — Geko & Design

Main GUI 1 : Basic Style

1. 가벼우면서도 직관적인 화면구성에 중점을 둔 디자인
2. 주메뉴 9개를 화면상에 3x3 열로 배치하여 자주 사용하는 메뉴들이 한눈에 보이게 하였으며
상하좌우키(또는 클릭휠키)를 사용하여 이동
3. UI 구동시 Movie 메뉴를 중심으로 Music,Radio,Image,Text 등 자주쓰이는 메뉴들을
상하 좌우로 배치하여 시작메뉴에서 최소의 클릭으로 이동 가능 (Movie 메뉴는 ok키 한번으로 Enter)

https://pub-b638f46bc1f847a4ac89754da77264e0.r2.dev/web/m3/others/06_p1gui/web_04/p1_ui_nav.html

Layout

배경이미지 변경 예

Main GUI 2 : 3D Sphere

1. 주메뉴 9개를 화면상에 Sphere 형태로 입체적으로 배치, 상하좌우키를 사용하여 이동
2. UI 구동시 movie 메뉴를 중심으로 music,radio,image,text 메뉴를 상하좌우로 배치,
자주 사용하는 메뉴에 최소 클릭으로 접근할 수 있다 (movie 메뉴는 ok키 한번에 이동)
3. 배경이미지를 많이 가리는 단점

https://pub-b638f46bc1f847a4ac89754da77264e0.r2.dev/web/m3/others/06_p1gui/web_05/p1_ui_nav.html

Main GUI 3 : 3D Object

1. 전체적으로 3D로 렌더링된 배경과 아이콘을 위주로 공간과 메뉴를 구성
2. 주메뉴 9개를 화면상에 2열로 배치하였으며 자주 사용하는 메뉴 4개를 공간상의 전면에
배치하여 상하좌우키(또는 휠키) 를 사용해서 선택,이동
3. 메뉴선택시 아이콘 Rotation (UI의 원활한 구동을 위해서 모션은 최소화)

https://pub-b638f46bc1f847a4ac89754da77264e0.r2.dev/web/m3/others/06_p1gui/web_06/p1_ui_nav.html

배경이미지 변경 예

Main GUI 4 : Up & Scroll

1. 주메뉴 9개를 좌우키(또는 휠)로 이동, ok키로 바로 접근하는 방식
2. 입체적으로 디자인된 액정판넬에 현재 메뉴를 표시
3. 스킨 변경시 배경영역과 자연스럽게 매칭

https://pub-b638f46bc1f847a4ac89754da77264e0.r2.dev/web/m3/others/06_p1gui/web_01/p1_ui_nav.html

Main GUI 5 : Click & Transition

1. 주메뉴 9개를 좌우키(또는 휠)로 이동, ok키로 바로 접근하는 방식
2. 반투명 판넬위에 OSD 스타일의 메뉴표시로 더 심플하고 가벼운 느낌
3. 스킨영역을 거의 가리지 않아 배경이미지를 자주 바꾸는 즐거움을 강조한 레이아웃
4. 각 메뉴별로 배경이미지를 따로 설정하면 메뉴 이동시 액티브한 느낌을 줄 수 있지만
로딩시간이 길어지는 단점이 있어서 P1에 이 모션을 적용하기엔 무리

https://pub-b638f46bc1f847a4ac89754da77264e0.r2.dev/web/m3/others/06_p1gui/web_02/p1_ui_nav.html