깔끔하고 평평한 디자인의 버튼 스타일링

10

최근에 작은 CSS 프레임 워크를 시작했습니다. ( 누군가 관심이 있다면 http://mincss.com ) 나는 몇 가지 버튼에 대한 초기 디자인을 빨리 부딪쳤다. UX StackExchange에 대한 의견을 요청하고 좋은 의견을 많이받은 후 개선에 대한 추가 조언을 얻으려면 여기로 오십시오.

이것이 UXStackExchange의 피드백을받은 후의 모습입니다. 검은 색 테두리를 제거하고 3px "그림자"를 추가하고 1px 경사를 제거했습니다.

여기에 이미지 설명을 입력하십시오

평평한 디자인으로 가겠습니다.

남은 질문이 3 개 있습니다.

이 버튼은 충분한 여유를 보여줍니까? (평평한 디자인에 문제가있는 것 같습니다)
작은 그라디언트를 추가 하시겠습니까?
잘 디자인되어 있습니까? (주체는 알지만, 이것을 묻는 더 좋은 방법은 생각할 수 없습니다)

이 버튼에 대한 의견을 환영합니다.

website-design gradient button

— 오웬 베르 스 테크
소스

그림자를 유지하려면 실제 알파 그림자로 만드십시오. 알파가 아닌 RGBA (0,0,0, .2)와 같은 것은 훨씬 밝은 회색을 고려하십시오.

— DA01

9

매우 미묘한 그라디언트는 버튼의 미학을 확실히 향상시킬 것이라고 생각합니다. Windows 8 "Metro"스타일은이 스타일의 큰 지지자이므로이를 예로 사용하겠습니다.

언뜻보기에 "타일"은 평평한 색상처럼 보이지만 자세히 보면 왼쪽에서 오른쪽으로가는 약간의 그라디언트가 있습니다. 다른 사람들보다 더 눈에 띄지 만 모두 가지고 있습니다. Yisela가 말했듯이이 그라디언트가 거의 눈에 띄지 않고 거의 잠재 의식을 갖기를 원합니다.

— JohnB
소스

2

전 : i.imgur.com/LVVVWd8.png 그리고 후 : i.imgur.com/jDb07Y2.png 어떻게 생각하세요? (이것은 배경입니다 : -webkit-gradient (linear, left center, right center, from (rgb (44, 175, 73)) to to (rgb (53, 206, 86))))

— Owen Versteeg

7

앞에서 언급했듯이 플랫 버튼을 디자인 할 때는 몇 가지 사항을 주시해야합니다. 첫 번째는 다음과 같습니다. 버튼처럼 보입니까?

이것은 반드시 버튼에만 의존하는 것이 아니라 UI의 나머지 요소에 달려 있습니다. 플랫 버튼을 사용하는 경우 다른 곳에서도 비슷한 모양 / 스타일을 피하는 것이 좋습니다. 사람들 이 시각적으로 어휘 를 유지해야 사람들이 이러한 요소를 다른 것이 아닌 버튼으로 즉시 인식 할 수 있습니다.

그림자 는 볼륨 감 이 있기 때문에 좋습니다. 따라서보기가 더 쉽습니다. 또한, 우리는 그 효과가있는 버튼에 익숙합니다. 그러나 버튼의 색상과 유사한 색상을 사용하는 것이 좋습니다. 예를 들어, 빨간색 버튼에 검은 색을 사용하는 대신 불투명도가 50 % 인 빨간색을 사용하십시오. 버튼을보다 분명하게 만드는 또 다른 옵션은 아이콘 (흰색, 단색) 을 추가하는 것 입니다.

그라디언트에 매우주의를 기울 였습니다. 그것들이 나쁘기 때문이 아니라 현재의 매우 단순한 플랫 트렌드이기 때문에 그것들이 잘 맞지 않습니다. 특히 사용하는 색상이나 음영이 매우 다른 경우. 작은 그라디언트는 정말 멋지게 보일 수 있지만 작고 거의 눈에 띄지 않아야합니다.

요컨대, 나는 그들이 보는 방식을 좋아합니다. 그림자 색상을 더 밝게 변경하고 전경 텍스트를 더 밝게 만들 수도 있습니다. 글꼴이 좋고 당신은 좋은 패딩을 사용하고 있습니다. 나는 당신이 사이트에서 그들을 사용하는 것을 보았지만, 그 아래에는 실제로 약간 비슷한 파스텔 색상의 알림 세트가 있습니다. 약간 혼란 스러울 수 있으므로 스타일을 재고하고 사이트 전체에서 동일한 색상 (모든 파스텔 또는 모든 대비)을 사용하려고합니다.

— 이 셀라
소스

나는 색상의 그림자 당신의 생각을했다 : i.imgur.com/525NqBJ.png 내가 어떤 기울기가 작은이어야 동의; 나는 하나를 추가 할 생각하지 않습니다. 버튼의 둥근 모서리에 대해 어떻게 생각하십니까? 알림을 어떻게 변경해야한다고 생각하십니까? 감사!

— Owen Versteeg 11

@OwenVersteeg 좋아 보인다! 나는 그들을 좋아해. 둥근 모서리도 일반적으로 멋지게 보입니다. 다른 요소 (입력, 어쩌면?)에 추가하는 것을 고려해야 할 수도 있습니다. 알림에 대해 같은 색상의 어두운 음영이있는 1px 테두리는 어떻습니까? 이와 같은 것

— Yisela

2

나는 최소한의 버튼을 만드는 것을 존중할 수 있지만 프레임 워크를 만들 때 다른 웹 사이트에서 웹을 통해 적용 할 수 있는지 여부를 고려해야합니다. 버튼을 제공하는 경우 다른 사람이 테이블, 양식 등과 같이 사용할 수있는 모든 것을 제공해야합니다 (여전히 작업 중인지 확실합니다).

한 번 봐 가지고 부트 스트랩을 당신이 이미하지 않은 경우. 부트 스트랩은 놀랍도록 간단하고 깨끗한 CSS 프레임 워크로 다른 웹 사이트에 쉽게 적용하거나 통합 할 수 있으며 몇 가지 아이디어를 줄 수 있습니다.

이 실제 버튼이 작동하는 한 테두리로 놀고 싶습니다. 구성 요소를 캡슐화하는 데 도움이되고 테두리는 많은 버튼에 공통적입니다. 나는 웹 사이트를 체크 아웃했으며 호버 / 클릭 상태가 마음에 들었고 당신이 그와 잘했다고 생각합니다.

그래디언트를 도입하려면 일관성을 유지하고 다른 요소에서도 그래디언트를 사용하십시오. 그렇지 않으면 경쟁 심도가 산만해질 것입니다.

— 한나
소스

나는 Bootstrap을 보았고 (여러 가지 어렵습니다) 전에 사이트를 만들었습니다. Bootstrap의 문제는 수십 킬로바이트의 거대한 프레임 워크이며 요즘 매우 일반적입니다. 테이블뿐만 아니라 양식 (페이지에서 아래로)을 만들었습니다. UX StackExchange에서 물었을 때 대부분의 사람들은 흥미롭게도 국경을 버리고 있다고 말했습니다. 나는 그라디언트를 소개하지 않을 것이라고 생각합니다. 이 테두리는 어떻습니까? i.imgur.com/OlOy5pN.png

— Owen Versteeg

0

버튼은 좋아 보이지만 일반적인 플랫 스타일에서 여유와 느낌을 나타내는 버튼 종류는 한 번 그림자 부분이 배치되는 위치입니다. 주요 요소 (버튼)의 하단에 작은 스트립이 있으며 대부분 어두운 색 음영입니다. 버튼 색상.

— 허쉬 하시 한
소스