버튼과 링크버튼은 사용자가 수행할 수 있는 작업을 전달합니다.버튼은 일반적으로 UI 전체에 걸쳐 다음과 같은 위치에 배치됩니다. 대화 상자, 양식, 도구 모음 등의 위치에 배치됩니다.  버튼과 링크의 구분은 중요합니다: 링크는 다른 장소로 이동할 때 사용됩니다.'모두 보기' 페이지, '로저 라이트' 프로필 등과 같이 다른 곳으로 이동할 때 사용합니다.버튼은 다음과 같은 작업을 수행할 때 사용됩니다.'제출', '병합', '새로 만들기', '업로드' 등과 같은 작업을 수행할 때 사용됩니다.  버튼 상태는 사용자에게 상태를 전달합니다.버튼의 올바른 상호작용과 스타일을 만드는 것은 프로세스에서 가장 중요한 부분 중 하나입니다. 각 상태는 다른 상태 및 주변 레이아웃과 구별되는 명확한 어포던스를 가져야 하지만 컴..

텍스트 필드 구조텍스트 필드는 사용자가 UI에 텍스트를 입력할 수 있도록 합니다. 텍스트 필드는 일반적으로 양식과 대화 상자에 나타납니다. 텍스트 필드 컴포넌트 디자인은 상호 작용을 위한 명확한 여백을 제공하여 레이아웃에서 필드를 검색할 수 있고, 효율적으로 채울 수 있으며, 접근이 용이해야 합니다.  기본 텍스트 필드의 주요 요소는 다음과 같습니다.1. 컨테이너상호 작용 가능한 입력 영역2. 입력 텍스트 텍스트 필드에 입력3. 레이블 텍스트사용자에게 지정된 양식 필드에 어떤 정보가 있는지 알려줍니다.4. 플레이스홀더 텍스트사용자가 입력 텍스트로 대체되는 필수 정보에 대한 설명 또는 예시입니다.5. 도우미 또는 유효성 검사 텍스트(선택 사항) 추가 컨텍스트 또는 유효성 검사 메시지를 제공합니다.6. 선행..

“토글"이라는 단어는 활성화될 때마다 두 가지 상태가 번갈아 나타나는 짧은 손잡이가 있는 스위치를 가리킵니다. 조명을 '전환'할 때마다 이 스위치를 접하게 됩니다. '라디오 버튼'은 일반적으로 다이얼 아래에 방송국 사전 설정을 기계적으로 저장할 수 있는 버튼 세트가 있어 사용자가 방송국 간에 더 빠르게 전환할 수 있었던 자동차 라디오에서 유래한 단어입니다. 이 버튼 중 하나를 누르면 다른 버튼을 누를 때까지 버튼이 꺼진 상태로 유지되었습니다.   체크박스 하나 또는 여러 개의 독립적인 옵션이 있고 사용자가 없음, 하나 또는 여러 개를 포함하여 원하는 만큼 선택할 수 있는 경우에 사용됩니다. 라디오 버튼상호 배타적인 두 개 이상의 옵션 목록이 있고 사용자가 그 중 하나만 선택해야 하는 경우에 사용됩니다. ..

연구 결과는 어떻게 나왔을까요?앱의 탐색 레이아웃을 선택할 때는 일반적으로 기본, 보조, 3차 탐색 계층의 위치를 정의해야 합니다. Jennifer Rose Kingsburg의 “웹 디자인을 위한 3단계 메뉴 탐색 구조 비교” 연구에 따르면 왼쪽에 기본 탐색을 배치하면 많은 이점이 있는 것으로 나타났습니다. 16명의 사용자를 대상으로 한 두 개의 연구에서 각각 탐색 시간, 선호도, 선택 오류를 측정했습니다. 이 연구에 대한 간략한 요약은 여기에서 확인할 수 있습니다. 이 연구는 17년 전에 이루어졌으며 그 사이 경험과 패러다임이 크게 발전했다는 점을 참고해주세요.    왼쪽 탐색이 스캔하기 쉬움시선추적 연구에 따르면 사람들은 웹페이지를 F자 패턴으로 스캔하는 것으로 나타났습니다. 그런 점에서 상단과 왼쪽..

로딩 및 진행률 표시기는 사용자가 대기 시간 동안 정보를 얻고 참여를 유도하는 데 도움이 되는 UX/UI 디자인의 필수 요소입니다. 웹페이지 로딩, 트랜잭션 처리, 콘텐츠 다운로드 등 어떤 상황에서든 잘 디자인된 지표는 사용자 경험을 크게 향상시킬 수 있습니다.시스템 속도와 응답성을 개선하는 데 가장 중점을 두어야 하지만, 그것이 불가능하다면 적절한 사용자 경험을 디자인하는 것이 중요합니다. 이 글에서는 로딩 및 진행률 표시기의 중요성, 대기 심리에 대해 알아보고 효과적이고 사용자 친화적인 디자인을 만들기 위한 사례를 살펴봅니다.  불확정 지표와 확정 지표의 차이점 이해하기불확정 지표와 확정 지표의 차이점을 이해하는 것은 다양한 시나리오에 적합한 유형을 선택하는 데 매우 중요합니다.   불확정 지표 지정..

8가지 카테고리에 걸쳐 58개의 규칙을 정리했습니다.    Empathy(공감): 아름다움에 대한 보편적인 개념은 없으며, 타겟 고객을 진정으로 이해해야만 그들에게 어필할 수 있는 디자인을 만들 수 있습니다.Layout(레이아웃): 레이아웃은 인터페이스의 캔버스이며, 사용자의 시선을 자연스럽게 유도하고 각 요소를 직관적으로 연결하는 매끄러운 흐름을 만들어야 합니다.Essentialism(본질주의): 군더더기는 메시지를 가리고 사용자 경험을 방해할 수 있으므로 디자인의 모든 요소는 목적에 부합해야 합니다. Guidance(지침): 디자인은 단순히 눈을 즐겁게 할 뿐만 아니라 사용자를 인도하여 다음에 해야 할 일에 대한 명확한 경로와 단서를 제공해야 합니다.Aesthetics(미학): 심미성: 심미성은 단순..