화면 정의서 (1)

화면 정의서

• 기능정의서 : IA를 바탕으로 화면을 만들어 기능을 정의하는 문서
• => 기준

 

ex. 사과를 말로(텍스트로만) 설명한다면?

사과 : 과일이고 빨간색의 외형을 갖고 있으며 속에는 노란색의 모형을 띄고 있다.

 

시각화부터 들어가게 되면 속의 내용을 파악을 못하고, 실제로는 텍스트부터 필연적으로 진행을 해나가야 한다.

-> 의미를 파악하면서 시각화를 같이 해 나갈 수 있음.

⇒ 텍스트의 한계 → UI&UX 차원의 것 ⇒ 화면정의서에서 할 내용

 

UI

- 유저 인터페이스

- 사용자가 서비스를 시각적으로 인지하는 요소들

ex. 노션에 눈에 띄는 거의 모든 요소.

 

잘 만든 UI란?

• 플랫 디자인 * : 무채색
• 유저가 직관적으로 UI를 인지하는 것
• 예쁘다 / 안 예쁘다를 기준으로 하면 안 된다.
• ex. 노션의 공유 버튼 => "공유라고 써 있기 때문에 공유인줄 안다."
• ex. 노션의 AI 버튼 => 학습을 통하지 않으면, 모른다. 이건 못 만든 UI
• 그래서 노션은 툴팁(Tool Tip)으로 이런 UI의 부족함을 UX 요소인 툴팁으로 해결함.

---

 

플랫 디자인이란?

플랫 디자인(flat design)은 간결하고 직관적인 디자인 스타일을 의미합니다

 

특징

1) 단순한 요소

• 3D 효과나 복잡한 텍스처 없이 평면적인 요소 사용
• 그림자, 그라데이션, 베벨 등을 배제하고 단순한 색상과 형태로 표현

1.  

2) 명확한 색상

• 선명하고 대조적인 색상 팔레트 사용
• 주로 기본 색상과 포인트 색상으로 구성

3) 간결한 타이포그래피:

• 단순하고 읽기 쉬운 글꼴 사용
• 불필요한 장식 없이 깔끔하게 표현

4) 직관적인 아이콘 및 그래픽:

명확하고 이해하기 쉬운 아이콘 사용

복잡한 이미지 대신 간단한 그래픽 요소로 정보 전달

 

5) 반응형 디자인:

• 다양한 디바이스와 화면 크기에 적응할 수 있는 레이아웃
• 사용자 경험을 개선하기 위한 직관적인 인터페이스

플랫 디자인은 주로 웹사이트와 모바일 앱에서 많이 사용되며, 사용자 경험을 개선하고, 로딩 시간을 줄이며, 유지보수를 용이하게 만드는 장점이 있다.

ex) 애플의 iOS 7 이후의 인터페이스와  / 구글의 머티리얼 디자인(Material Design)

---

개성이 짙은 UI

- 튀는 UI 

• ex) App 디올성수
• 장점 : 인지가 명확해진다.
• 단점 : 지속성이 떨어짐

대중적인 UI (플랫디자인)

• 장점 : 지속성이 길다.
• 단점 : 인지가 어렵다.

보완

• 우선순위와 포인트 (포인트 컬러)
• ex. 유튜브 -> 대체적으로 흰/검정 바탕이지만 로고에만 빨간색. 그런데 유튜브 하면 떠오르는 단어는 빨간색
• ex. 폰트, 크기, 색상, 이미지, 디자인적 요소

 

UX

- 유저 경험

- 사용자의 생활패턴을 서비스에 녹이는 방법

- 사용자의 경험이 반영되지 않으면, '불편해진다'

 

잘 만든 UX란?

• 사용법을 설명하지 않아도 사용할 수 있게 만드는 것
• => 이미 익숙한 상황.

ex. 유저 시나리오

ex2. 배치에 대한 패턴 ( F패턴과 Z패턴 )

https://brunch.co.kr/@blackindigo-red/38

 

 

F 패턴

우리가 글을 읽을 때 왼쪽 열의 시작점은 동일하나 오른쪽 열의 길이가 다른 경우 많다.

이럴 때 사람들의 시선은 왼쪽부터 읽은 다음에 다시 1번 자리로 돌아온다.

한 칸 내려가고 다시 반복

이걸 사람들의 시선으로 환산하면 F자를 그리게 된다.

=> 콘텐츠를 쉽게 인지시키려면 F패턴으로 만드는 게 좋다.

 

Z 패턴은 사람의 시나리오의 흐름에 달려있다.

- 사람들에게 인지시키고 싶은 것이거나 이 시나리오의 스타트 지점에 대한 내용을 1번에 적으면 된다.

- 사람들이 최종적으로 결정을 하게 하거나 마지막에 확인하게 하고 싶은 것은 4번에 배치

- 환불규정. 회원 탈퇴 등은 4번에 배치

- 할인가 등은 1번에 크게 배치

 

ex3. 화면순서

ex4. 사용법

 

좋은 UX? 절대적인 것은 없다!

⇒ 유저에 따라 UX와 UI 기준이 다르다! → 유저의 특성을 반영해야 한다.