기본 macOS 앱을 … 기본 macOS 앱처럼 보이게 만드는 것은 무엇입니까? 이 기사에서는 이 질문을 분석하고 자신의 앱에서 macOS 앱의 디자인 규칙을 채택할 수 있는 몇 가지 실용적인 방법을 살펴보겠습니다. 앱이 적합하도록 디자인 결정을 내릴 수 있으므로 더 원활한 환경과 기타 잠재적인 이점을 제공할 수 있습니다. 계속 읽으십시오!
이 문서는 기본적으로 "기본 macOS 모양"을 다루지만 아래의 많은 기능과 개념이 Windows 앱에도 적용 된다는 점을 처음부터 알아두는 것이 중요합니다 . 또한 최근 몇 년 동안 웹 사이트와 데스크톱 앱 간의 경계가 점점 더 모호해져서 이러한 규칙 중 많은 부분이 웹 앱에도 적용 된다는 점을 언급할 가치가 있습니다.
이 문제는 최근 httpie 팀의 앱에서 작업할 때 발생했습니다. 우리는 기본 데스크톱 앱처럼 보이게 만들고 싶었습니다.
이제 우리가 무엇을 위해 촬영하는지에 대한 공통된 이해를 얻었으므로 질문은 왜 처음에 자신의 앱이 기본 앱처럼 보이길 원하는가 하는 것입니다. 글쎄, 유사한 디자인 규칙을 사용하면 사용자에게 더 "원활한" 경험을 제공한다는 명백한 사실 외에도 "네이티브" 디자인으로 보이는 앱에서 나오는 일관성은 또한 더 "신뢰할 수 있는" 것을 전달한다고 생각합니다. 느끼다. 디자인이 더 철저하게 고려된 것 같고, 전반적으로 응용 프로그램도 성능 면에서 어쩐지 더 안정적입니다.
전문가용 UI를 개발하는 경우(Figma, Codepen 또는 xCode를 생각해 보세요) 이 문서를 확인하세요. 개발자 도구용 인터페이스를 디자인하는 방법
이러한 이점은 응용 프로그램이 제공하는 사용자 경험에 대해 생각할 때 중요한 고려 사항이어야 하며, 제 생각에는 기본적으로 보이는 디자인 규칙을 작업에 통합해야 하는 꽤 설득력 있는 몇 가지 이유입니다. 자, 이제 본격적으로 몇 가지 세부 사항을 살펴보겠습니다!
기본 데스크탑 앱을 기본 데스크탑 앱으로 만드는 것은 무엇입니까?
포인터가 아닌 기본 커서 사용
포인터 커서(손가락 버전 ????)는 웹의 많은 컨텍스트에서 어디에나 있지만 기본 데스크톱 앱 은 브라우저에서 페이지를 여는 링크라는 한 가지 특정 목적으로 포인터 커서를 사용 합니다 . 일반적으로 링크는 실제 텍스트 링크로 스타일이 지정됩니다.
macOS 앱에서 브라우저를 여는 링크 위에 있을 때 커서가 손가락으로 어떻게 변경되는지 확인합니다.
그러나 이 간단한 규칙도 종종 깨집니다.
예를 들어, 이 Mac에 관하여 의 리소스 하위 섹션 에서 일부 링크는 웹 페이지를 열지만 여전히 기본 커서를 사용하여 다른 목록 항목과의 일관성을 유지합니다.
Mac의 리소스 페이지에서 볼 수 있듯이 커서 대 손가락 규칙이 자주 깨집니다.
따라서 "링크 규칙"을 얼마나 엄격하게 따르는지는 귀하에게 달려 있습니다.
기본적으로 텍스트를 선택할 수 없도록 설정
사용자는 개발자가 명시적으로 선택 가능하도록 만든 레이블의 텍스트만 선택할 수 있습니다. 그러나 실제로 선택 가능한 항목을 어떻게 결정할 수 있습니까? 이것은 사용자 워크플로에 대한 깊은 이해가 필요한 또 다른 회색 영역입니다.
간단히 말해서 사용자가 선택하고 싶어하는 모든 것이 선택 가능해야 합니다 . 예를 들면 다음과 같습니다. 이 Mac에 관하여 창에서 OS 버전, 모델 이름, SN 및 기타 "콘텐츠"를 명확하게 선택할 수 있지만 기술 레이블 자체를 선택할 수는 없습니다.
이 Mac에 관하여 메뉴에서 볼 수 있듯이 주요 제목의 텍스트는 선택할 수 없지만 세부 사항은 선택할 수 있습니다.
스타일이 지정된 버튼, 드롭다운 메뉴 또는 체크박스가 호버에 반응하지 않도록 하세요.
이것은 빠른 팁입니다. 호버에 반응하는 방식과 관련하여 기본 앱에는 두 가지 유형의 버튼이 사용됩니다. 간단히 말해서 스타일이 지정된 버튼, 드롭다운 메뉴(드롭다운 메뉴 항목에 대해 조금 더 자세히 설명) 및 체크박스는 마우스 호버에 반응하지 않는 반면 고스트 버튼(일반 텍스트 또는 아이콘)은 .
MacOS 내에서 다양한 아티팩트가 호버 효과를 처리하는 방법을 봅니다. 스타일이 지정된 버튼, 드롭다운 및 체크박스는 반응하지 않지만 고스트 버튼은 반응합니다.
메뉴와 테이블에 호버 효과를 주지 마세요.
메뉴 및 테이블 항목에는 호버 효과가 없습니다.
Apple 음악에서 호버 없음 효과가 작동하는 것을 봅니다.
메뉴 항목이나 테이블 행에 마우스를 올리면 보조 작업 버튼이 표시되는 경우에도 마찬가지입니다. 항목 배경은 반응하지 않습니다. 이 기술은 이전 기술과 결합되어 인터페이스가 조용하고 덜 장황해 보입니다.
Apple 음악 내부에 나타나는 하위 메뉴와 같이 마우스 오버 시 작업이 어떻게 발생할 수 있는지 확인합니다.
그러나 드롭다운 메뉴 항목은 hover 에 반응합니다 . 이것은 키보드 탐색 목적으로 수행됩니다. 키보드를 사용하는 사용자는 선택하려는 옵션을 확인해야 합니다.
드롭다운 메뉴 항목을 가리키면 배경색이 변경됩니다.
또한 앱 메뉴와 목록은 선택한 항목을 강조 표시합니다 . 이것은 인터페이스 내에서 더 빠른 방향 및 탐색을 허용하는 시각적 앵커를 사용자에게 제공합니다.
눌린 상태가 미묘하거나 눈에 띄게 분명한지 확인하십시오.
아래 3D 지도의 예와 같이 버튼이 명백한 모드를 켜거나 토글하면 버튼 배경이 미묘하게 강조 표시 됩니다.
Apple 지도 내에서 사용자 인터페이스에서 미묘하게 강조 표시되기 때문에 3D 효과가 켜져 있음이 분명합니다.
반면에 모드가 토글되거나 켜져 있는지 확실하지 않은 경우 버튼은 전경의 활성 색상을 적용합니다 .
메모 앱에서 필터가 명확하게 켜져 있음을 나타내는 색상 변화가 극적이기 때문입니다.
인민폐 상황에 맞는 메뉴를 어디에나 배치
웹에서 RMB(오른쪽 마우스 버튼) 클릭에 대한 사용자 지정 처리는 매우 드물며, 예상하지 못한 수준까지 도달했습니다. 그러나 데스크탑 세계에서 RMB 처리를 하는 것은 완전히 자연스러운 일 입니다. 메뉴와 목록에는 항목을 빠르게 삭제하거나 편집할 수 있습니다.
하지만 함정이 있습니다. 브라우저 또는 Electron에서 표준 RMB 클릭 처리를 재정의하면 복사, 잘라내기, 붙여넣기 등과 같은 모든 표준 작업을 다시 구현해야 합니다.
요약하자면
요약해 보겠습니다. 인터페이스(웹 기반 포함)가 기본 macOS 앱처럼 보이려면 다음을 고려하십시오.
포인터 커서 놓기
비컨텐츠 텍스트 선택 금지
호버 효과 줄이기
액센트 컬러를 남용하지 않는
RMB 상황에 맞는 메뉴 추가
