사용자 프로필 디자인: 재정의 사용 방법

UI/UX 디자이너가 사용하는 소프트웨어 프로젝트의 유형(핀테크, 블록체인, 전자 상거래용 앱)에 관계없이 거의 모든 프로젝트가 하나의 화면을 공통으로 공유합니다. 이 경우 사용자의 개인 정보가 포함된 앱 부분에 대해 이야기하고 있습니다... 그의 프로필.

예, 표면적으로는 모든 것이 케이크 조각처럼 보입니다. 이미지, 이름, 비밀번호, 저장 버튼과 다양한 옵션 설정을 포함해야 합니다. 이 모든 것이 사실이지만 이러한 단순성은 평범한 시나리오에만 적용됩니다. 소프트웨어 제품의 구체적인 비즈니스 사례를 더 깊이 파고들면 사용자 프로필 화면이 조금 더 복잡해질 수 있습니다. 내부 수준에서 청구 및 확인에 이르기까지 – 프로필 화면과 관련하여 – 악마는 세부 사항에 있습니다.

구성 요소가 풍부한 사용자 프로필 사례를 디자인해야 한다면 준비해야 할 때입니다. 최상의 UX 시나리오를 정의하고 이를 표현할 최적의 구성 요소를 선택하는 데 있어 몇 가지 문제에 직면하게 됩니다. 그런 다음 초기 프로토타입 반복에 대한 UX 테스트를 수행한 후 와이어프레임을 변경하고 개선할 때입니다. 그리고 예, 가능한 한 빨리 와이어프레임을 개선해야 합니다.

또한 "가능한 한 빨리!"라는 친숙한 문구를 고수하고 픽셀 퍼펙트의 사전 정의된 Sketch Components 및 Indigo.Design 패턴을 사용하여 UX 컨셉을 구축하는 방법을 보여드리겠습니다.

Let’s Begin

초기 종이 스케치가 이미 완료되었으므로 화면 앞에 있으며 시작할 준비가 되었습니다 Sketch. 다음은 첫 번째 깔끔한 놀라움입니다(긍정적인 분위기에만 놀라움을 사용합시다).

Indigo.Design UI Kit를 사용할 때 디자인 컨셉에 가장 가까운 패턴 중 하나를 삽입하기만 하면 되기 때문에 빈 아트보드에서 시작하는 방법에 대해 고민하는 데 시간을 낭비할 필요가 없습니다.

Indigo.Design 제품 팀의 일원으로서 다양한 사용 사례에 도움이 될 더 많은 패턴을 만들 수 있게 되어 기쁩니다. 따라서 특정 사용 사례가 필요한 경우 주저하지 말고 저희에게 연락해 주십시오. 더 잘 설명하기 위해 모형을 첨부할 수도 있습니다.

다음 단계는 특정 요구 사항에 따라 기존 사용자 프로필 패턴을 구성하는 것입니다. 변경 사항을 추적하기 위해 수정 된 패턴 옆에 초기 패턴을 유지하겠습니다.

다음은 다른 프로필 이미지 표현을 선택한 후의 결과입니다.

아바타 아래에 있는 옵션에서 오른쪽 하단 모서리에 있는 아이콘의 배경색, 아이콘 유형, 텍스트 색상, 자리 표시자 텍스트 등을 빠르게 정의할 수 있습니다.

보시다시피 초기 패턴은 여러 입력을 제공하며, 그 중 첫 번째는 포커스 상태로 표시되고 나머지는 채워진 상태로 표시됩니다. 물론 상태를 변경하려면 상태 옵션에서 쉽게 수행할 수 있습니다.

현재 예제에서는 유휴 상태를 선택했기 때문에 해당 결과를 받습니다. 입력을 지정할 때 다소 유용한 것은 해당 동작을 명확하게 설명하는 것입니다. 예를 들어 암호가 잘못 입력되었는지 또는 성공적으로 입력되었는지 확인합니다. 상태 드롭다운에서 다시 설정할 수 있습니다. 원하는 상태를 선택하면 입력이 수직으로 완벽하게 분산됩니다.

선 대신 상자를 표시하도록 입력의 레이아웃을 변경하려면 어떻게 해야 할까요? 걱정 마세요, 이렇게 바꾸세요...

… 그리고 완벽한 픽셀 박스형 입력을 받습니다. 말할 필요도 없이, 해당 레이아웃을 선호한다면 다른 모든 입력에 대해 해당 레이아웃을 고수하는 것이 좋습니다.

계속해서 접미사, 접두사 또는 아이콘을 포함한 더 복잡한 입력을 원한다면 어떻게 하시겠습니까? 우리 라이브러리는 여러 사례를 다루는 쉽게 편집할 수 있는 템플릿을 제공합니다. 초기 조건부터 시작하겠습니다.

그런 다음 접두사 및 접미사 아이콘을 사용하여 입력을 가져오는 방법을 볼 수 있습니다.

아이콘을 편집하기만 하면 접두사와 접미사 색상 및 아이콘 유형에 대해 모두 편집할 수 있습니다.

더 나아가 Input 대신 다른 Component 를 사용하려면 Profile 패턴을 분리하고 더 작은 구성 요소를 편집해야 합니다.

프로필을 편집할 때 스위치 옵션이 필요한 경우가 많으므로 Indigo 라이브러리에서 이러한 구성 요소를 추가하고 편집해 보겠습니다.

패턴이 이미 분리되어 있으므로 다른 옵션을 추가 한 후 입력을 삭제하여 정렬의 기준점으로 사용하는 것이 좋습니다.

정확하게 정렬한 후에는 오프셋 사이에 맞게 스위치 구성요소를 늘릴 수 있습니다.

마지막으로 필요하지 않은 입력이나 필드를 삭제하고 스위치 레이블을 편집하기만 하면 됩니다.

더 복잡한 프로필 설정의 경우 사용자를 다른 화면이나 더 깊은 수준으로 안내하는 항목을 추가해야 할 수 있습니다. 이 경우에 직면하면 목록 항목을 사용하는 것이 좋습니다.

먼저 라이브러리의 구성 요소로 추가한 다음 화면에서 원하는 위치에 놓고 너비를 조정하여 화면 크기를 수정하기만 하면 됩니다. 마지막으로 레이블을 변경하는 것을 잊지 마십시오.

덧붙이고 싶은 중요한 참고 사항: Overrides 메뉴에서 구성 요소를 추가하지 마십시오. 구성 요소 목록의 맨 위에 위치하기 때문에 매우 유혹적이라는 것을 알고 있지만 오른쪽 옵션 패널에서 구성하는 것보다 구성 요소의 초기 형식을 먼저 추가하는 것이 좋습니다.

그게 전부에요! 약속한 대로 Sketch UI 라이브러리를 사용하면 생산성이 빨라집니다. 그러나 이는 시작에 불과하며, 더 흥미로운 Indigo.Design 기능(예: 디자인을 코드로 생성하는 방법)은 다음 기사에서 공개될 예정입니다.