생각정리.xlsx
5.42MB

 

ref. : https://brunch.co.kr/@thinkaboutlove/227

 

시각적으로 균형있는 디자인하는 방법(시각 보정 팁)

목차 1.측정한 크기와 눈에 보이는 크기 2.다양한 도형의 배열(정렬) 3.시각적으로 올바른 모서리 라운딩 4.보너스 + 추천 책 1920년대 시각적 인식에 대한 게슈탈트 이론이 발표되었다. 이 이론은

brunch.co.kr

 

시각적 무게

  • Bounding box VS 체적 ( bounding box / bounding circle... )

 

  • 블러효과를 통해 인지적 무게 확인

  • 일관성에 대한 규칙 예

 

 

배열과 인지

End point

체적 기반 시각밀도
색상에 의한 시각밀도 ( 기존색상과의 관계기반 _ ex는 배경x글자색 유사도 )
frame과 contents 상호작용
bbox 기반 vs bcircle 기반 ( 형태에 따라, 눕힌 삼각형은 bbox 사용 시, 왼쪽과 오른쪽의 체적이 균형되지 않음 )

 

실제와 인지 차이

원
모서리 라운딩  ( 원-선 연결 기반 vs 5차함수 _ 전자는 연결부위에서 미분불가, 후자는 5계도함수까지 미분가능) ( (x/60)^5 + (y/60)^5 = 1 )
가로비가 넓을 때 안정감을 느끼는 편향

 

'게임 기획 > UI' 카테고리의 다른 글

Text Style  (0) 2024.05.22
UI 표준  (0) 2024.05.22

주로 사용하는 리소스

  • google fonts
    • 필터링 기능 제공 ( type face 기반 )
  • adobe fonts

 

Type Face와 font-family

  • Type Face : 폰트의 타입에 대한 구분
  • Font Family : 폰트타입 내 바리에이션에 대한 구분 ( bold 등 )

 

대분류

  • 영문
    •  Serif
      • 글꼴의 꼭지점에 획이 그어져 있는 형태
        •  
  • Sans Serif
    • 글꼴의 꼭지점에 획이 안그어져 있는 형태
    • 주로 문단 등 장문/줄글에 적합
  • Display
  • Hand Writing
    • 손글씨
  • Mono Space
    • 알파벳과 관계없이 너비가 일정한 자체. 프로그래밍 등 오탈자에 민감한 환경에 유리

 

  • 한글
    • 바탕 ( 명조 )
      • 본문에 사용
      • 주로 명조
        • 가로획은 얇게, 세로획은 두껍게 그리고 가로획의 끝부분은 굵게 그린 한자 자체
    • 돋움 ( 고딕 )
      • 제목에 사용
      • 주로 고딕
        • 부리(serif)가 없고 가로획과 세로획의 대비가 적은 특징을 가진 한글 활자

 

체적 배분

  • 글자의 심리적 체적이 클수록 자간 여백이 적어지는것을 추천
    • 글자의 크기가 크거나
    • 글자의 두께가 두껍거나
    • 글자의 종횡비가 크거나

 

  • 정렬 시 bbox의 grid가 아니라 실제 drawing되는 영역의 가상 grid를 기준으로 정렬하도록 주의
    • text의 형태가 특이해서 글자 내 여백이 많을 경우

'게임 기획 > UI' 카테고리의 다른 글

시각적 균형  (0) 2024.05.22
UI 표준  (0) 2024.05.22

standard unit : inch

Human

 recognize capacity

  • minimum separation distance ( for distinguish as objects )
    • outline
    • adjacent color contrast degree
  • maximum information intensity

 Input accuracy

  • per input type

 

Screen

 responsive UI

  • multiples of 4
    • 0, 4, 8, 12, 24, 32, 64, 72 ~

https://uxdesign.cc/ui-cheat-sheet-spacing-friendships-e37a6fccc407

 

Combine with 3D

 cost of screen occupancy

  • opacity ( or geometric )
  • inclined UI
  • diegetic UI
  • Icon
  • contextual

 

Layered

 category

  • by spatial
    of course, spaital discretion degree is effected from scale of object ( log )

Grouping by function

ex) top/left/right/bottom

  • for minimize
    • line of sight
    • recog searching time
  • for cateogize
    • function in user recog
  • by tap
  • by access sequence ( depth )
  • by depth ( order, dimension )

'게임 기획 > UI' 카테고리의 다른 글

시각적 균형  (0) 2024.05.22
Text Style  (0) 2024.05.22

class diagram

 

class name ( <<type>> )

var

  • name
  • type

method

  • name
  • arg
  • return val
  • + public / - private
  • class type : interface, enum, abstract, utility, etc...

클래스간의 관계

  • 일반화 : 상속관계 ( 자식 → 부모 )
  • 실체화 : interface ← overiding
  • 의존 : class → ref class and use
  • 연관 : 참조ref를 가짐
  • 집합 : class → List<ref class>
  • 합성 : manager ( 대상class의 생성, 관리, 소멸 등을 제어 )

 

Object Diagram

  • Class diagram과 유사
  • 객체간의 관계를 표기 ( class 구조와 instance구조를 병기. name란에 instance name : class name 형태로 표기 )

 

ERD ( Entity - relation diagram )

 

Sequence Diagram

  Element Description
1 Lifeline A vertical line that represents the sequence of events that occur in a participant during an interaction, while time progresses down the line. This participant can be an instance of a class, component, or actor.
2 Actor A participant that is external to the system that you are developing.

You can make an actor symbol appear at the top of a lifeline by setting its Actor property.
3 Synchronous message The sender waits for a response to a synchronous message before it continues. The diagram shows both the call and the return. Synchronous messages are used to represent ordinary function calls within a program, as well as other kinds of message that behave in the same way.
4 Asynchronous message A message that does not require a response before the sender continues. An asynchronous message shows only a call from the sender. Use to represent communication between separate threads or the creation of a new thread.
5 Execution occurrence A vertical shaded rectangle that appears on a participant's lifeline and represents the period when the participant is executing an operation.

The execution begins where the participant receives a message. If the initiating message was a synchronous message, the execution ends with a «return» arrow back to the sender.
6 Callback message A message that returns back to a participant that is waiting for the return from an earlier call. The resulting execution occurrence appears on top of the existing one.
7 Self message A message from a participant to itself. The resulting execution occurrence appears on top of the sending execution.
8 Create message A message that creates a participant. If a participant receives a create message, it should be the first it receives.
9 Found message An asynchronous message from an unknown or an unspecified participant.
10 Lost message An asynchronous message to an unknown or an unspecified participant.
11 Comment A comment can be attached to any point on a lifeline.
12 Interaction Use Encloses a sequence of messages that are defined in another diagram.

To create an Interaction Use, click the tool and then drag across the lifelines you want to include.
13 Combined Fragment A collection of fragments. Each fragment can enclose one or more messages. There are different kinds of combined fragments. For more information, see Describe control flow with fragments on UML sequence diagrams.

To create a fragment, right-click a message, point to Surround With, and then click a fragment type.
14 Fragment Guard Can be used to state a condition relevant to whether the fragment will occur.

To set the guard, select a fragment, then select the guard, and type a value.
X Destruction Event Represents the point at which the object is deleted or no longer accessible. Appears at the bottom of every lifeline.
  Interaction The collection of messages and lifelines that is displayed in the sequence diagram. To view the properties of an Interaction, you must select it in UML Model Explorer.
  Sequence Diagram The diagram that displays an Interaction. To view its properties, click on an empty part of the diagram. Note: The names of the Sequence Diagram, the Interaction that it displays, and the file that contains the diagram can all be different.

+ Recent posts

티스토리툴바