UI Design

SSG pay review


160420



Intro

#Color : white / red /  Dark Blue

*자칫 무거워 보일 수 있는 색상이였는데, 

white 와  dark blue red point color 색상이 균형있어 보인다.








​_

USAGE GUIDE


#BG

*처음디자인에서는 bg 대신 img blur로 작업되어 있었는데, 

이렇게 solid 된  BG 가 더 사용성을 돕는다고 생각. 


https://mir-s3-cdn-cf.behance.net/project_modules/1400/30bd4735508707.57036f694b20f.png




page indicaor

page indicator의 line처리 방식이 재미있었다.







_


HOME


#Marketing area #List #Expand btn #indicator

* 상단배너를 전부 white 처리하고 상품이미지만 간결하게 보여주어 시원해보인다. 

key color 를 리스트로 표현하다니. 귀엽다.












#menu icon #notification icon

우측 상단 icon select시 알림패널이 뜨는데, 

자주쓰는 메타포가 아니라서 낯설게 느껴졌던 부분.

알고 보니 notification pannel 로 진입하기 위한..














 #Expand btn  #no item

normal 상태일때는 out line type

open 시 Filled type 이다.






_


# Roding img


roding 화면에 icon이 계속 바뀌는 모습인데, 앱이 작동 하고 있음을 보여주기에는 좋다. 

그러나, 로딩이 길면 앱이 문제인 것 같다고 사용자들은 판단하니,

5초이상 의 로딩이 예상된다면 조심 해야 할 것 같다는 생각.


















_


​충전하기


#Text Input Filed

​네이버의 검색창이 연상되는 Bold 한 Box 타입인거다. 











_


본인인증 화면


#indicator

3가지 단계중 현상태를 확인할 수 있는 상단 인디케이터


#textinput #key pad #BTN















#​popup










_

카드 인증 전, 인증후


#menu pannel


SSG PAY의 타입과, 

icon line의 볼륨감을 보라. 







자세히 보면, icon 사이 언더라인이 약하게, 정렬을 돕는다. 







_


# keypad


보안 키패드는 Dark BG로 처리했는데, 

어떤 의도였는지 궁금. 


서브문구의 아래의 텍스트 컬러가 다른 것이 거슬린다.













#barcod #input field


여기서도 detail 문구 표현컬러의 통일성은 아쉬운 부분.

BTN 텍스트 크기도 .. 







#list #subtitle bar #tab


정말 light 한  tab스타일. 
















​_


#list  #master on/off switch  #Radio button





​#Terms and condition









_


전체적으로, 

소비를 하는데 뭔가 세련되게 하고 있다는 느낌이 들게 하는 디자인 인거다. 

실제 디자인한것과 개발상 구현되는것이 일치하기도

많이 힘들 텐데, behance 에서 본 디자인이 거의 반영되어 보인다. 


https://www.behance.net/gallery/35508707/SSG-PAY-Easy-Payment-Mobile-App

직접 behance 에 가서 보면 더 도움이 될듯하다.



GOOD

GOOD



그럼 이만, 총총








'APP Review' 카테고리의 다른 글

​[APP] HYPOCAM  (0) 2016.04.21
App Intro Tutorial [GIF]  (0) 2016.04.19
[app review] zelly 젤리-나만의 캐릭터만들기  (1) 2016.04.15

+ Recent posts