it-swarm-korea.com

평평한 디자인의 버튼을 클릭 할 수 있음을 사람들이 이해하도록합니다.

나는 기본적으로 온라인 이력서 인 flat- ish 반응 형 웹 사이트를 만들고 있습니다.

그리드 시스템에서 기술을 표시하고 있지만 무엇이든 가능합니다. 각 스킬을 클릭하면 해당 레벨에 대한 정보가 표시됩니다.

여기에 내가 작성한 내용의 스크린 샷 (모바일 장치보기)이 있습니다. enter image description here

나는 디자인의 개념으로서 클릭 할 수 있다는 것을 안다. 그러나 임의의 사용자에게는 분명하지 않거나 적어도 충분하지 않은 것 같습니다.

컴퓨터 브라우저에서 호버를 사용하면 시각적으로 쉽게 변경할 수 있지만 태블릿/모바일에서는 방법을 알 수 없습니다.

누구든지 기본적으로 라고 말하기 위해 시각적 트릭을 가지고 있습니까, 저를 클릭하십시오 ? 각 타일의 모서리에 작은 포인터를 추가 할 수 있다고 생각하지만 잘 보일지 모르겠습니다.


업데이트

일부 제안에 따르면 아이콘을 더 관련성이 있도록 변경했습니다. 따라서 레이블을 삭제할 수 있습니다.

또한 두 개의 파란색 음영 사이의 제약을 강조하기 위해 버튼의 배경색을 약간 밝게합니다.

enter image description here

79
pistou

버튼의 문제는 버튼이 배경 위로 올라가지 않아 클릭 할 수없는 것입니다.

enter image description here

철저한 작업과하지 말아야 할 플랫 버튼과 올림 버튼 중에서 선택하는 방법에 대한 자세한 내용은 머티리얼 디자인을 강력히 권장합니다. http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons

64
Zoe K

문제는 평평하지 않다는 것입니다

아이콘이나 버튼입니까? 이것은 평평한 디자인 (다른 답변 참조)의 일반적인 문제이지만 여기서 아직 보지 못한 한 가지 해결책은 유일한 가능한 옵션이 클릭 될 때까지 remove 정보입니다. 타일 이라고 생각하십시오.

supa flat

...이 시점에서 </> 적합한 아이콘이 아닙니다.

17
hoosierEE

나는 첫 번째 기술을 보여주는 것과 같은 것을 생각하고 사용자가 스스로 알아낼 수있게하고 다른 사람들도 클릭 가능/탭 가능

(죄송합니다.이 작업을 수행 할 시간이 많지 않지만 도움이 될 수 있습니다)

mockup

bmml 소스 다운로드Balsamiq Mockups

11
Pascal

사용자가 가장 많이 사용하는 시각적 신호를 사용하는 것은 어떻습니까? 밑줄? 아래는 실선 밑줄과 점선으로 된 예입니다.

enter image description here

11
fri

모바일 장치에서는 현재 디자인 트렌드가이를 사용합니다. 사용자는 별도의 지시없이 별도의 정보를 드릴 다운하기 위해 터치 방식에 익숙해졌습니다.

또한 손가락 이외의 다른 입력 장치가 없으므로 모바일 장치의 "포인터"는 중복됩니다.

디자인의 단순성과 우아함을 유지하십시오. 유일한 제안은 아마도 두 개의 파란색 음영 사이의 대비를 증가시키는 것입니다.

7
Arthur Harrison

머티리얼 디자인은 좋지만 완벽하게 평평하지는 않습니다. 이상적인 플랫 버튼을 추천합니다 enter image description here

p/s : 사람들이 버튼이라고 생각하게하려면 "label"과 "icon"을 제공해야합니다.이 두 요소를 사용하면 대부분의 사용자에게 "ah, 버튼이 있습니다. 클릭하십시오"

7
Long Eleven

몇 가지 제안 :

1. 라벨을 시각적으로 단추의 일부로 만들기

  • 레이블은 일반적으로 버튼의 일부입니다

2. 가벼운 테두리 추가 (선택 사항)

  • 깊이를 추가하지 않고도 하이라이트

3. 버튼을 편안하게 그룹화

  • 버튼 그룹처럼 느껴지도록합니다.

4. 더 굵은 글꼴 무게 사용

  • 아이콘은 매우 뭉툭하고 imo는 가벼운 서체와 균형이 맞지 않습니다.

누르지 않은/누른 버튼 예 :

6
Dom

Long 및 DesignerAnalyst에 동의합니다. 스타일이 약간 있으면 버튼으로 더 많이 나타납니다.

편집 한 버전의 아이콘이 마음에 들지만 아이콘의 의미를 모르는 사용자를 위해 아이콘 아래에 텍스트를 추가하는 것이 좋습니다.

아이콘의 의미가 분명하면 아이콘이 훌륭하지만 매일 JQuery와 Javascript로 프로그래밍하고 아이콘을 자동으로 인식하지 못했습니다.

5
Andrew Neely

당신은 또한 텍스트 단서를 줄 수 있습니다

"추가 정보"를보다 구체적인 것으로 변경할 수 있습니다

Textual clue

2
Viktor Mellgren

많은 답변이 있지만 아직 플랫 디자인의 핵심에 도달했다고 생각하지 않습니다. 평면 디자인의 문제는 물건을 버튼처럼 보이게 만드는 방법이 아닙니다. 전체 아이디어는 3D 버튼의 은유가 구식이되고 있다는 것입니다. 저는 현재 태어날 아이들이 많이 있다고 생각합니다. 아이들은 실제 유형 버튼을 누르기 전에 터치 스크린에서 가상 버튼을 누릅니다.

은유는 시각적으로 시끄 럽습니다. 평평한 디자인의 과제는 디자인을 유용하게 유지하면서 은유를 없애는 것입니다.

따라서 적절하고 현대적인 평면 디자인 환경을 만들려면 버튼 모양으로 클릭하지 않고 클릭 가능 항목이 클릭 가능해야합니다. 주요 규칙/협약은 클릭 가능한 요소가 가장주의를 기울여야한다는 것입니다. 이를 달성하기 위해 다음과 같은 도구가 있습니다.

  • 명암 사용 이제 배경은 버튼 색상보다 버튼의 흰색 대비가 더 큽니다. 이것이 디자인을 클릭 할 수없는 주된 이유입니다. 배경 및 버튼 색상을 전환합니다.
  • 밝고 원색 사용 : 위 참조.
  • 공백 사용 : 버튼 아이콘 주위에 충분한 공란을 유지하십시오. 여백이 클수록 요소가 더 많은 관심을받습니다. 특히 해당 여백이 밝은 색으로 채워져 있으면 내부의 요소와 잘 대비됩니다.
  • 굵은 글씨체 사용 : 어두운 배경의 흰색 글씨는 어쨌든 굵게 표시되어야하지만 버튼의 경우 두 배가됩니다.
  • 버튼 안에 텍스트를 넣으십시오 : 색상 상자는 해당 클릭 옵션과 관련된 모든 것을 캡슐화해야합니다. 그 아래에 텍스트를 넣으면 사용자에게 텍스트를 버튼에 매핑하도록 요청합니다.
  • Rounder corners : 일부 평평한 디자인 순수 주의자 (BBC, Microsoft)는 어려운 구석에 갈 것입니다. .

내 재 설계는 다음과 같습니다.

enter image description here

여전히 클릭 할 수없는 것처럼 보일 수 있습니다. 왜 안돼? 6 개의 버튼이 기술 목록을 묘사하는 일반적인 방법이 아니기 때문이라고 생각합니다. 이 시점에서 사용자는 분명한 장소가 없습니다. 실제로 서로 옆에 6 개의 버튼이있는 것은 매우 드 rare니다. 일반적으로이 유형의 단추를 만들면 페이지에서 가장 중요한 요소입니다. 이것이 디자인이 아이콘 목록처럼 보이는 이유라고 생각합니다.

실제로 문제의 핵심을 파악하기 위해 전체 디자인을 다시 살펴볼 수도 있습니다. 이 시점에서 사용자가 원하는 것을 파악하십시오. 아마도 콘텐츠 기반 탐색 과 같은 것이 도움이 될 수 있습니다.

2
Peter

머티리얼 디자인 컨셉이 도움이 될 것입니다.

우선 순위 동작에 의한 레이아웃의 원리 원리는 객체를 차별화하고 여유를 추가하는 데 도움이되는 것 이상을 사용자에게 보여주기 위해 레이아웃 사이에 그림자를 두는 것입니다

http://www.google.com/design/spec/material-design/introduction.html

따라서 버튼 동작에 작은 그림자를 추가하십시오. 프레스 동작시 그림자를 숨겨서 대화식입니다. 컴퓨터가 표시되면 롤오버 응답을 추가하면 사용자에게 도움이됩니다.

0
pierre lebailly

단순하고 똑똑하게 유지

K.E.S.S.
개발자로서 무대를 설정했습니다. 그러나 사용자는 실제 공연자입니다. 두 가지 기술 세트 그들은 서로를 보완하고 조화를 이룹니다.
앱은 온라인 이력서처럼 암시 적으로 이러한 종류의 상호 작용을 요구하는 것처럼 기대치가 설정됩니다. 클릭 등. 사용자는 일반적으로 원하는 것을 이해합니다.

귀하의 질문에 대한 추가 의견은 다음과 같습니다.

enter image description here

  • 버튼 아이콘으로 라벨을 명시 적으로 유지하십시오.
  • 호버링 된 버튼이 커지도록합니다. 이를 통해 사용자가 직관적으로 추론 한 내용을 확인할 수 있습니다.

행운을 빕니다!

0
Jedi Commymullah

내가 사용한 것으로 보인 한 가지 옵션 (이 아이콘 크기에 따라)은 각 이미지 아이콘 내에서 마우스의 작은 그림 (기본적으로 두 개의 버튼의 상단 부분이있는 세로로 확장 된 타원형)입니다.

0
Michael Durrant

첫 번째 이미지는 갤러리와 같은 느낌입니다. 각 아이콘에는 레이블이 있으며 이미지를 클릭 할 수 있는지 확실하지 않습니다.

간단하게 버튼 안의 레이블을 이동 (첫 번째 아이콘 세트로도 충분합니다). 이런 식으로 버튼처럼 느껴 져야합니다.

다시 읽은 후에는 @Dom propositions 에 속하는 것으로 보입니다.

0
oliverpool