전체 글36 UXUI 아티클 정리 : 시각적으로 균형있는 디자인 하는 방법 요약 아이콘을 만들 때 사각형에 가까운 도형이 더 커 보인다.따라서, 사각형이 가까운 아이콘은 조금 줄이고 그렇지 않은 이모지는 조금 늘리는 것을 시각적으로 균형 잡혀 보인다.이를 체크할 수 있는 방법으로는 각 모형을 블러 처리하여 무게감을 보는 것이다. 텍스트 박스 옆에 둥근 아이콘이 있다면 크키를 키우는 것이 균형 좋아 보일 것이다. 아이콘을 만들 때는 시각적 균형을 위해 여백을 조금 남기는 것이 좋다.뾰족한 가장자리는 평평한 가장자리에 비해 짧아 보일 수 있으므로 조금 더 길게 만든다. 텍스트의 배경이 흐리다면 텍스트 흐름을 읽는데 방해되지 않지만 텍스트의 배경이 진하다면 텍스트 흐름을 읽는데 방해되므로 텍스트의 배경을 다른 텍스트에 맞춰 정렬해 준다. 삼각형의 아이콘 위치를 잡을 때는 사각형 프.. 2024. 5. 2. Components_Actions Common buttons -Tip많은 버튼은 적합하지 않다.한줄로 작성하며 간단 명료하게 작성한다.다른 텍스트 스타일과 겹치지 않게 한다.위와 같은 Reserve는 filled button으로 바꾼다면 더 편리한 UI가 될 것이다. FAB -TipFAB에 겹치는 요소를 넣지 않는다. 각자의 구성 요소마다 FAB를 주는 것은 좋지 않다.탭 이동시 사라졌다가 다시 나오는 것이 사용자가 변화를 눈치 챌 수 있다. Extended FAB -Tip여러개의 FAB는 피하고 만약 필요하다면 사이즈를 달리하는 것이 좋다. 위와 같은 선택 사항에서는 일반 버튼을 사용한다. Icon buttons -Tip선택할 수 있는 윤곽선 버튼과 확실하게 구분한다. Segmented button-Tip선택사항은 2-5개 적당하다. .. 2024. 5. 1. Figma_프로토타입(스마트 애니메이션 만들기) 프로토타입:화면을 연결 시키고 어떤 스타일로 이동할 지 목업으로 보여주는 것 프로토 타입 구성요소 인터렉션 디테일창 1. 트리거 (=이벤트) On Click : 요소를 클릭했을 때 2. 액션 Navigate to : 연결한 프레임으로 이동Change to : 베리언츠 내에서 연결했을때 해당 컴포넌트로 바뀜 3. 애니메이션 Instant : 애니매이션 없음Dissolve : 앞 프레임이 희미해지면서 넘어감Smart animate : 자연 스럽게 다음 프레임으로 변경. 주로 사이즈 변화, 생상 변화 등에 쓰임 스마트 애니메이션 제작하는 법 변경할 프레임과 변화될 구성요소 제작 -> Alt + 드래그로 변경될 프레임 제작 -> 변경될 구성요소 제작 -> 프로토타입 ->핫스팟을 이용하여 커넥션 라인 제작 -> .. 2024. 5. 1. Figma_Component와 Varians 컴포넌트 [Ctrl + Alt + K]반복되는 요소의 마스터를 만들고 인스턴스를 배양아여 마스터 수정을 통해 전체의 인스턴스를 바꿀 수 있게 된다. 마스터(원본) 인스턴스(복제본):📌요소는 고정📌 요소를 추가하거나 삭제할 수 없다.요소를 보이지 않게 하려면 👁️🗨️ 끄기로 안 보이게 가능하다.색상, 속성, 효과 등은 수정이 가능하다. 하지만 예를 들어 인스턴트에서 색상변경하면 후에 마스터의 색상을 변경하더라도 변하지 않는다.다중 컴포넌트 Create multiple components컴포넌트 해제 Detach instance마스터 복구 인스턴트 우클릭 후 Restore component OR Assets 검색 베리언츠카테고리 만들기 프로퍼티 = 카테고리 명밸류 = 각 요소 고윳값 밸류를 통해.. 2024. 4. 30. 이전 1 2 3 4 5 6 7 8 9 다음
