웹 인터랙션 디자인: 제네릭이 아닌 "취소" 버튼

중간 트랜잭션 http://www.aliyun.com/zixun/aggregation/6858.html "> seo 진단 Taobao 게스트 클라우드 호스트 기술 홀

"취소" 버튼 작업의 필요한 흐름의 일환 이며 기본 요소로 표시 하도록 설계 되지 않았습니다. 하지만 실제 프레임 또는 일부 작업 응용 프로그램에 자주 등장, 다음이 작은 취소 버튼과 신비 무엇입니까?

먼저 우리는 취소의 개념을 이해 해야 합니다.

취소: 우리는 질문, 선택, 진행 및 정보 주는 종종 두 개의 버튼, "확인" 및 "취소"를 제출할 때 확인 작업을 수행 해야 합니다. 취소 단추가 일반적으로 표시 되지 않습니다 혼자, 보통 확인 등의 작업을 저장 하 고 등등.

(일반적인 운영 체제에서 두 개의 키를 포함 하 여 그러한 대화 상자를 확인 및 취소)

둘째, 디자인 하 고 취소 키를 사용 하 여

페이지에서 취소의 위치

취소 키 (또는 동작 확인 페이지)를 디자인할 때 당신은 항상는 "확인", "저장" 버튼 왼쪽에, 그리고 대담 형식으로 그것을 식별 또는 기본적으로 그것을 선택 해야 합니다. 취소 버튼은 오른쪽에 자주. "확인" 및 "취소" 하지 않아야 너무 멀리. 그림 A에에서 두 단추 사이의 거리가 너무 멀리 읽기에 부담이 시각적 움직임의 거리를 증가. 그림 B의 읽기 효율성의 그것 보다 훨씬 높은 수준 이다는.

(a)

(b)

구별 하 고 "취소" 및 다른 단추를 약하게 하는 방법

제품 동작을 위해, 사용자를 격려 하는 일부 작업 희석 "취소" 작업. 예를 들어 다음 다이어그램의 여러 가지 시나리오를 확인 하 고 구별의 다른 학위를 할 버튼을 취소.

이것의 장점은 시각적 성능, 작은 작업의 가시성을 감소 하 고 그들의 목표를 통해 사용자를 안내 하는 misoperation를 최소화 하기 위해. 두 개의 단추가 강조 한쪽의 인식, 명확 하 게 구별 될 수 있습니다. 쉽게 사용자가 판단 할 수 있습니다.

버튼 디자인에서 실제 표현의 기본 및 보조 관계를 강조 하는 콘텐츠를 기반으로 수 있습니다. Misoperation을 피하기 위해 가능한 가이드 사용자가 적절 한 있도록 보다 편리 하 고 명확한 작업. 또한 인간 답게 설명 악센트 버튼, "취소" "취소" 기능 약화는 이전 동작으로 돌아가려면 사용자 수 있도록 하는 단어를 사용할 수 있습니다. 하지만 지나치게 주요 의도 표현 하는 인터페이스를 미치지 수 있습니다. 인간 답게 된 단어 수 있습니다 발생할 사용자 충분 한 관심, 친밀 하 고 따뜻한 느낌. 블루 그레이 작은 글씨, 형식과 다른 단추를 사용 하 여 페이지에 영화 리뷰의 다음 이미지는 동일 하지 않습니다, 그리고 전체 페이지 하이라이트만 "좋아, 댓글 올리기" 버튼.

이 페이지에서는 사용자가 콘텐츠를 작성, "취소" 작업 부정적인 결과 생산할 예정 이다. 특히, 사용자는 취소의 경우 실수로 작성 이어질 것입니다 밖으로 콘텐츠는 더 이상 존재 하지. 이 페이지의 디자인에서 "취소" 강조 확인 작업 단추, 단추 대신 링크의 형태에 의해 약화 "좋아, 코멘트를 추가". 좋은 시각적 강조를 했다. 하지만 기억, 텍스트는 간결 하 고 명확 해야 합니다.

OK 플러스 취소 대화 상자에서 사용 됩니다.

기본 자막에 대 한 텍스트 콘텐츠는 "당신은 하 시겠습니까... "사용할 수 문장 패턴 대화 상자의 질문에" 확인 "" 취소 "조합. 하지만 하지 확인 사용 고 판단 여부의 질문에 대답을 취소. 그림 A는 오류의 예입니다. 이외에, "확인"는 "커밋" 그림 B에서 "취소" 그룹 식별에 옵션은 실제로 제출에 대 한 "확인".

C 그림, 아이콘 오류에 대 한 경고 또는 경고 정보, 그것은 배를 많이 느끼고 쉽게 과도 한 사용 하지 마십시오. 오류 클래스 또는 경고 클래스의 디자인에서 힌트 수 있습니다 사용 하는 노란색 "!"

버튼

물어보면 "여부...?" "예" 조합을 직접 사용할 수 있습니다. 그림 D와 같이

단추 기본으로 취소

일반적인 대화 상자, 여러 개의 버튼을 때 기본적으로 단추 중 하나를 설정 합니다. "취소" 키 항상이 작업을 실행 한 후에 즉시 나타나는 시간은 이전 작업의 전체 자연스럽 게 생각 하 고 "확인"을 선택 하지 않고 (일반적으로 기본값은), 다음 후회 하 고. 그래서, 종종 있기 때문에 프레임 나타납니다 너무 빨리, 사용자가 인지 하지 못하는 "그들의 자신의 작업 잘못 될 수 있습니다." 따라서, 기본 항목은 사용자에 게 도움이 되는 단추에 있어야 합니다.

예를 들어 다음 그림의 저장 되지 않은 문서를 닫을 때, 프롬프트에 대 한 기본 항목 저장은 버튼. 절약은 다른 두 개의 단추 보다 덜 손상.

다음 이미지는 우리가 어디 플레이어 기본 항목 확인 버튼에 있어야 한다 그래서 게임 버전을 업데이트 하는 것이 좋습니다 필요가 게임 버전을 업그레이드 하는 플레이어를 표시 합니다.

우리가 프롬프트 상자 단추에 대 한 기본 항목을 설정, 우리 인지 사용자에 게 도움이 경우 그것은 실수로 기본값으로 설정 된 경우 조작 하는 것이 좋습니다. 그것은 또한 추천을 고려 하 고 사용자 적절 한 지침을 제공 하는 사용자의 작업을 격려 하는 데 필요한입니다.

Ⅲ입니다. 사례 연구

원래 디자인 플레이어 제공 "구매", "취소" 소품 바 팝업 대화 상자에 두 개의 단추 클릭.

(영웅을 죽 일 소품 구매 대화 상자)

문제 지점:

버튼 또는 보조 될 것 같지 않습니다.

운영 관점에서 플레이어 구매를 장려 하는 의도 강조 수 없습니다.

구입 하 고 구입 항목 플레이어 사이의 구별할 수 없습니다.

요구 사항에 따라 기본 설정 하 있고 구별의 성능에 보조,이 이번 "취소" 버튼을 약화, 구매 버튼 관심을 향상, 플레이어 구입 하는 것이 좋습니다.

효과 최적화 한 후 "취소" 버튼을 제거 하 고 구별 하 고 구입 하 고 차별화 된 디자인을 만드는 버튼 효과 구입 하지 않습니다. 다음 이미지 이전 내용을 보다 명확 하 게 보이는 수정 된 디자인 인가요?

취소 키 스키마를 사용 하 여 요약

PC에 "취소" 버튼은 오른쪽에 종종. 하지만 iOS에서 강조 단추는 오른쪽에 배치 됩니다.

버튼 1 차를 구별 하 고 보조 명확 하 게 표현, 강조는 식의 내용에 따라 주제 적합할 수 있는 취소 단추를 약화.

작업의 결과 설명 하 고 사용자가 그들을 읽을 하는 단어를 사용 합니다.

확인 사용 하 고 판단 여부의 질문에 대답을 취소 하지 마십시오.

취소를 사용 하 여 기본적으로 그리고 때로는 도움이, 무손실 버튼 수 있습니다.

정리해 보면, 비록 "취소" 주요 버튼 요소, 하지만 그것은 오른쪽에 넣어 하지 하거나 합리적인 표준 디자인의 실제 상황을 기반으로 합니다. 이 눈에 띄지 않는 버튼 때문에 하지, 인터랙티브 디자인은 자주 성공 또는 실패의 세부 정보!

(무단 전재 지정 하십시오 GDC의 소스),