웹 사이트, 응용 프로그램 상호 작용 디자인 분석: 비활성화 상태 두 가지 또는 세 가지

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

목표

사용 안 함, 이름으로 의미, 의미 의미는 사용할 수 없습니다. 사용할 수 있는 하나에 해당 해야 한 사용 안 함이입니다. 그것은 폼, 복잡성 관리 인터페이스 또는 단계별 가이드,이 시나리오의 모든 비활성화 상태 및 경험 수 있도록 비활성된 상태를 제대로 사용 하는 방법을 수 플러스 마이너스,이 디자이너에 대해 생각 하 고 연습 필요로 하는 무슨은. 여기 몇 가지 벽돌을 던져 하 고 당신과 의논 하도록 하겠습니다.

"이것은 포인트는 버튼의 여기 매우 치킨, 우리 제거를 고려할 수 있다?"

"기본 릴리스 버튼, 그것은 중요 하지 않습니다, 그렇지 않으면 사용자 어떻게 제품 특징을 이해 하는 것?"

비활성화 상태 표시, 숨기기, 뿐만 아니라의 디자인을 위해 논쟁 적인 주제 자주 발생 하면 응용 프로그램 메커니즘의 외부 노출의 직접적인 표현으로 볼 수 있습니다.

앨런 쿠퍼는 활성화 하 고 메뉴를 금지 사용자 메뉴 반영 하 고 도움이 될 더 나은 교육 도구 메뉴를 이해 하는 데 도움이 언급 했다. 예를 들어 우리의 일반적인 포토샵 선택 메뉴:

가장 완벽 한 소프트웨어에서 기능으로 메뉴는 첫 번째 필수 모든 기능을 제시 해야 합니다. 이 전제 아래 우리가 작업 사용할 수 있으며 어떤 특정 상호 작용의 과정에 따라 사용할 수 없습니다 설명할 것 이다. 그것에 대해 생각 하 고 우리가 매일 볼 다양 한 소프트웨어, 당신은 금지 항목 메뉴에 익숙하지 않은.

메뉴 도구 모음 이라는 좋은 기본 친구가 있다. 직관적이 고 빠른 기능 프레 젠 테이 션으로 도구 모음에 나타나는의 특권은 일반적으로 가장 일반적으로 사용 되는 함수는 포털의 빠르고 효율적인 작업 사용자에 게 제공 하는 소프트웨어에.

도구 모음 사용자의 기대에 안정적이 고 신뢰할 수 있어야 합니다, 사용자가 무의식적으로 배우고, 관성의 사용의 일반적인 작업의 위치를 기억 도구 모음 레이아웃 됩니다. 버튼 가끔 사라지면, 때때로, 사용자 혼란과 인터페이스 작업의 효율 향상에 공헌 것입니다. 특히 있을 때 도구 모음에서 작업을 많이, 고정된 위치의 장점은 분명 하 고, 각 서브에서 적어도 5 버튼을 포함 하는 리본 인터페이스 같은:

기본값은 메뉴, 도구 모음, 작업 적합 여부 그들은 사용할 수 없습니다 나타납니다. 그러나, 적은 작업 때 디자이너는 여전히 생각 되며 개선.

브라우저, 소프트웨어를 모두 뒤에 떠날 수 없어 앞으로 및 뒤로 핵심 기능 중 하나입니다. 이 경우에, 크롬과 파이어 폭스 다른 디자인 아이디어를 했다. 크롬 앞으로 되감기 버튼 홀드 주소 표시줄의 왼쪽에 위치 하 고 다음 그림에서와 같이 현재 페이지의 액세스 경로에 따라 버튼을 사용할 수 있는 표시 여부를 결정.

이 디자인의 장점은 사용자 운영 관성의 형성을 용이 하 게 첫눈에 함수의 위치를 이해할 수 있을 것 이다. 경우에 따라 앞으로 단추는 사용자가 웹 페이지의 콘텐츠를 거의 모든 관심을 탐색 하는 동안 사용 가능한 스타일에서 사용할 수 없는 스타일 변경 됩니다, 있지만 여기 상태 변경 방해 하지 않습니다.

파이어 폭스에 한 뒤 왼쪽 버튼을 주소 표시줄에 새 페이지를 열 때의입니다. 뒤로 버튼을 클릭 하면 사용 가능한 앞으로 단추는 신속 하 게 밖으로 슬라이드. 즉, 그것은 현재 피드 단추를 사용할 수, 사용할 수 없는 경우 숨겨진 경우에 나타납니다.

경우에 사용자가 새 창을 열어의 모드에서 새 페이지, 찾아보기 창을 닫고 앞으로 버튼이 표시 되지 않는 사용자 같은 창에서 페이지를 열고 다음 버튼을 클릭, 앞으로 신속 하 게 밖으로 속성의 해석의 기능을 수 있도록 하는 인터페이스의 애니메이션 슬라이드 경우 발생 하지 않습니다 사용자 이해에 혼란. 멀리, 실수할 때 페이지 이동 앞으로, 앞으로 단추는 즉시 하 고 신속 하 게 비활성화 됩니다를 계속할 수 없습니다 하 고 사용자 클릭에 기회가 있다. 결과적으로, 대부분의 경우에서 파이어 폭스 주소 표시줄의 왼쪽에 공간 시각적으로 가볍고, 가장 중요 한 뒤로 단추의 단 하나 이며 앞으로 단추 사용 해야 하는 경우에는 작업이 원활 하 고 자연.

2 개의 디자인의 찬 부 양론에 대 한 아무 판단 이며 크롬 및 파이어 폭스가 그들의 자신의 질문에 응답의 앞으로 단추를 처리 하는 방법. Firefox이 대담 디자인을 사용 하 여 그리고 앞으로 단추 주파수의 사용, 장면을 사용 하 여 긴밀 한 관계를가지고. 다른 방법으로, 크롬은 파이어 폭스에 적용 되지 않습니다: 3 버튼 크롬 주소 표시줄의 왼쪽에 있으며 가운데 버튼 가끔 숨겨진 경우 마지막 새로 고침 단추의 위치를 수정할 수 없는, 그리고 그 "도구 모음"는 명확 하 게 치고, 사용자에 게 표시 Firefox의 새로 고침 단추는 주소 표시줄의 오른쪽에 그리고 이러한 문제가 없다.

위의 작업의 계층의 예가입니다. 여러 계층에 대 한 무엇? 정보, 모든 목록, 작업 및 정보의 각 부분에 대 한 새로운 작업 집합 목록을 직면 하는 경우 숨겨진된 디자인을 고려해 야 합니다.

Gmail 메일 목록 페이지 메시지 선택 되지 않은 경우, 도구 모음 목록에 대 한 3만 기능이 포함 됩니다. 특정 메시지를 선택할 때 메시지에 대 한 작업 도구 모음에 표시 되 고 원래 액션 사라집니다. 이 큰 메시지의 수를 장애인 선택 하지 않은 경우 단순 상쾌한의 기본 상태에서 도구 모음을 뿐만 아니라 사용자 인터페이스 부담을 피할 수 있습니다. 그러나,이 디자인 또한 사용자, 초보자 사용자 일부를 탐구 하는 필요의 초기 사용에 선택한 메시지 전후 차이 이해 하는 특정 학습 비용을 제공 합니다.

파일을 도구 모음에 표시 되는 특정 작업을 선택 하려면 클릭 합니다, Dropbox 또한 비슷한 디자인을 사용 하 여, 기본 인터페이스 테이블 제목 표시줄에 어떤 작업을 렌더링 하지 않습니다.

우리는 웹에 게시 양식 등의 덜 복잡 한 작업을 직면 하는 때 제출 하는 프로세스, 그리고, 비활성화 상태를 선택할 필요 합니다 더 미묘한 생각을. 참조에 대 한 몇 가지 디자인 제안은 여기 있다:

1. 사용자 작업을 부팅, 해제 밖으로 던져 버릴 필요가

Sina Weibo에 릴리스 버튼을 봐 보자. 게시 상자에서 텍스트 고 단추가 표시 되는 게시 상자에 텍스트가 없는 경우 명확 하 고 클릭할 수 레드 흐리게 하 고 게시물 박스의 배경 색상 레드, 사용자가 콘텐츠를 입력 하 라는 깜박이 클릭 하면이 단추가 표시 됩니다.

여기 표현 디자인은 매우 분명 하다, 모두 입력 텍스트 게시할 수 있습니다. 그러나, 연결할 수 없는 회색 렌더링 하 분리 단추가 나타나면 마우스 버튼은 여전히 손에 형, 시스템은 또한 상호 작용에 피드백을 제공, 버튼 주어진 있도록 회색에서 의미의 다양성도 클릭 수, 이해에 혼란을 발생 하는 사용자에 게. 사용자의 지식에 따라 버튼, 클릭할 경우 실제로 해야 클릭할. 경우 그것은 할 수 처럼 보이지 않는, 그것은 포인트 안됩니다.

페이스 북의 상태 해제 버튼 비활성화 하도록 설계 되지 않았습니다 하 고 입력된 상자가 비어 있을 때 게시 단추를 클릭 하 여 변경 되지 않습니다 페이지.

Tencent Weibo의 릴리스 버튼 또한 동일한 디자인을 사용 하 여, 콘텐츠가 빈 경우 버튼을 클릭, 입력 상자의 오른쪽 아래 모서리에 있는 주황색 텍스트 사용자 입력된 내용을 묻는 메시지를 표시 될 것입니다.

마이크로 블로그 또는 SNS 웹 사이트, 게시 상태가입니다 가장 중요 한 쓰기 작업 입구, 인터페이스에 버튼 좋은 지침 역할을 할 수 있습니다. 이 경우에, 간단 하 고 쉽게 단추 상태 제공 됩니다 이해 하는 것 입니까?

2. 명시적으로 비활성화 하 고 사용할 수 있는 스타일을 구별

작업은 필요한 경우 비활성화 된 상태로, 그것은 시각적으로 명시적으로 사용 가능 하 고 장애인 스타일 사이 구별 하는 데 필요한입니다. Tumblr 게시 텍스트 카운터 예제를 주고, 왼쪽 아래에 있는 해제 버튼 비활성화 때 사용할 수 있는 볼 수 어렵다.

위의 그림에서 빨간색 동그라미 부분이 비활성화 됩니다.

위의 이미지는 입력된 텍스트의 상태,이 시점에서 게시의 왼쪽된 아래 모서리를 클릭 수 하지만 스테레오 효과 버튼의 색상 변경 되지 않았습니다, 텍스트만, 그리고 텍스트와 장애인만 작은 차이, 상대적으로 가난한 디스플레이에 구분 없는 수의 밝기.

3. 적절 한 시기에 적절 한 설명을 제공합니다

비활성 상태의 변화를 사용자에 대 한 갑작스러운 때 명확 하 고 이해할 수 있는 설명 노트를 디자인 하는 것이 좋습니다. 빙 홈 페이지를 검색 하는 예를 들어 사진을 다운로드할 수 없습니다 다운로드 단추 흐리게 표시 되어, 그리고 버튼에 마우스를 이동할 때 팁 버튼은 회색으로 나타나는 이유가 설명 합니다.

Os x, 고급 설정 창에서 단추는 기본적으로 비활성화 됩니다. 이 비슷한 설정 윈도우 운영 체제에서에서 x를 사용 하 여 잠금 스위치 왼쪽 아래 모서리에 있는 고급 작업을 제어할. 그 중요 한 시스템 수준 설정을 변경할 수 있습니다 전에 그들의 잠금을 해제 해야 합니다.

4. 주는 비활성화 상태 더 가능성

비활성화 상태는 항상 차가운 시스템 규칙, 하지만 상태의 좋은 사용을 메시지 통신 더 효과적일 것입니다. 예를 들어 트위터 추진 되 고, 커밋 프로세스에서 짹짹 버튼 된다 비활성화, 동안 로딩 애니메이션 표현 두 UI 요소의 결합을 통해 제출 작업 버튼의 왼쪽에 나타납니다.

새 플리커 업로드 이미지 도구를 클릭 제출, 버튼을 즉시 비활성화 되 고 인터페이스에 게 생생한 감각을 제공 또한 복사 "거기, 타이거에 보류" 재미 있는.

요약

비활성된 상태 인지 항상 보이는 그것은에 속한다 인터페이스에서 작업의 기능 특성에 따라 달라 집니다. 가장 중요 한 것은 있도록 대화형 경험 유창 하 게, 사용자의 혼란, 그리고 특정 인터페이스 환경 분석 이해를 형성 하지 것입니다의 핵심 기능입니다. 비활성화 된 상태로 표시 해야 하는 경우 우리 사용자 알고 어떻게 작업을 사용할 수, 그리고 비활성된 상태를 숨길 필요가 있는 경우 사용자가 자연스럽 게 대신 "깜짝" 나타날 때 수락 하 게 하 게 해야 합니다. 또한, 비활성된 상태를 표시 하는 경우 스타일과 사용 가능한 상태 사이의 혼동을 피하기 위해, 만들고 그것을 가리킬 수 있습니다 분명 하지 포인트, 설명 및 필요한 경우 지침을 시도 하 고 사용자 추측 하지 마십시오.

(이 문서 Tencent CDC 블로그에서 유래, 소스를 표시 하시기 바랍니다 때 기입)