10가지 훌륭한 UX/UI 디자인 치트 시트

저장할 UX/UI 치트 시트

모든 사람은 때때로 전문가를 포함하여 약간의 도움이 필요합니다. 세세한 부분까지 기억하기 어렵습니다. 때때로 당신은 순간적으로 잊어 버린 기본 사항을 검색하게됩니다. 시간 낭비가 될 수 있습니다. 그래서 우리는 하루를 보내고 최고의 UX 전략을 세우는 데 도움이 되는 인기 있는 디자인 치트 시트 를 검색하고 수집했습니다.

이러한 전략이 도움이 된다면 웹사이트의 UX 디자인을 개선할 때 이 팁도 확인하는 것을 잊지 마십시오.

1. iOS 7 디자인 치트 시트

iOS 7의 출시는 인터페이스에 많은 변화를 가져왔고 디자이너는 iOS의 새로운 평면 디자인에 맞게 시각적 언어를 조정해야 합니다. 그리드 시스템, 치수, 타이포그래피 및 아이콘이 모두 Apple에서 업데이트되었습니다. Ivo Mynttinen은 다음을 포함하여 iOS 7에 대해 알아야 할 모든 정보를 다루는 개발자와 디자이너를 위한 치트 시트(업데이트됨)를 만들 만큼 은혜를 베풀었습니다.

• • 모든 기기의 해상도
  • 모든 장치에 정보 표시
  • 앱 아이콘 치수(Apple이 iOS7용으로 아직 출시하지 않았기 때문에 둥근 모서리 디자인에 대한 변경 사항 및 템플릿을 얻을 수 있는 위치에 대한 정보 포함)
  • 사용자 인터페이스 변경 사항에 대한 세부 정보
  • 앱을 디자인하는 동안 도움이 될 만한 기타 리소스의 목록

이렇게 하면 각각의 작은 세부 사항을 검색할 필요가 없으므로 시간과 노력을 절약할 수 있습니다. 이것을 사용하면 자신의 목록을 컴파일할 필요가 없습니다. 게다가, 그것은 주제에 관한 가장 광범위한 시트 중 하나이며 훌륭하게 구성되어 있습니다.

2. 안드로이드 디자인 치트 시트

물론 유사한 Android 디자인 치트 시트 도 포함되어 있습니다. 이것은 Double Encore, Inc.의 모바일 디자이너인 Meghan Dever가 디자인한 멋진 인포그래픽입니다. Android용 디자인 가이드에 이 정보가 있지만 이 유용한 정보 시트에서 찾고 읽는 것이 훨씬 쉽습니다.

회사 내부용으로 만들어졌지만 시간을 절약할 수 있는 유용한 도구라고 생각하여 전체 커뮤니티와 공유하고 싶었습니다. 다음과 함께 제공됩니다.

• • Android 텍스트 필드, 탐색 막대, 스피너, 선택기, 스위치 및 사용 사례
  • 광학 경계 레이아웃 기능이 추가된 9패치 자산
  • Android 기기 크기 및 관련 요소 크기
  • UI 요소에 대한 적절한 패딩
  • 작업 표시줄, 컨텍스트 및 실행기 아이콘 세부 정보
  • Dp에서 px로의 변환

3. 컬러 인포그래픽의 심리학

좋아, 색상 심리학을 다루는 차트가 충분하지만 다른 차트보다 훨씬 광범위하기 때문에 내가 가장 좋아하는 차트입니다. 기본 사항(빨간색, 노란색, 파란색, 보라색, 녹색)만 다루지 않고 50가지 색상에 대한 설명을 제공합니다. 또한 긍정적인 감정과 아이디어뿐만 아니라 다양한 색상이 연관될 수 있는 부정적인 감정도 다룹니다.

4. HTML5 치트 시트

업데이트 9/9/16: 이 시트는 더 이상 사용할 수 없습니다.

이것은 HTML5를 막 배우고 있거나 우연히 방귀를 뀌고 태그를 잊어버린 경우를 위한 훌륭한 참조 시트입니다. 이것은 광범위한 목록이며 태그 외에도 유용한 정보를 제공합니다. 태그를 사용할 수 있는 위치와 장치에서 지원하는 브라우저에 대해 자세히 설명합니다. 다음과 함께 제공됩니다.

• • HTML5용으로 나온 새로운 태그
  • HTML5에서 계속 사용할 수 있는 HTML4의 기존 태그
  • HTML5에서 더 이상 사용되지 않는 이전 태그
  • 속성과 그들에 대한 오래된 것과 새로운 것
  • 브라우저 준비 차트

5. 닌자 UX 치트 시트

UX 프로세스의 연구 단계에서는 Hilary Little이 CodeFest 기조 연설을 위해 만든 이 멋진 치트 시트를 볼 수 있습니다. 사용자를 테스트할 때 염두에 두어야 할 몇 가지 모범 사례입니다.

이것은 전문가를 위한 기본 사항에 대한 또 다른 훌륭한 알림이며 새로운 사람과 좋은 조언과 팁이 필요한 모든 사람에게 적합합니다. 여기 기조 연설에서 그녀의 프레젠테이션을 확인할 수도 있습니다. 이것은 치트 시트를 아주 잘 보완하고 첫 번째 UX 디자이너나 기업가에게 훌륭한 방향을 제시할 것입니다.

6. 치트 시트 웹 양식 디자인

Smashing Magazine은 우리가 사용하고 공유할 수 있도록 이 아름다움을 가져왔습니다. 훌륭한 양식을 디자인하기 위한 설명적인 치트 시트입니다. 이 유아용 침대 시트의 설계자는 양식을 설계하고 테스트하는 데 능숙합니다.

그들은 가장 일반적인 문제를 찾아 해결 방법을 설명한 다음 이 훌륭한 디자이너 치트 시트에 모두 담기로 결정했습니다. 그들은 모든 사람의 양식을 더 좋게 만들기 위해 무언가를 만들고 싶었습니다. 여기에는 Omnigraffle 템플릿과 다운로드할 수 있는 Photoshop(PSD) 및 PDF 예제가 포함되어 있습니다. 훌륭한 조언, 해야 할 일과 하지 말아야 할 일, 사용할 수 있는 몇 가지 레이아웃 예제가 함께 제공됩니다.

7. jQuery 치트 시트

이것은 뭔가 기억나지 않을 때 참조로 사용할 수 있는 jQuery 요소의 훌륭하게 구성된 목록입니다. 웹 디자이너이자 개발자인 Oscar Otero가 이러한 것들이 얼마나 편리한지 알고 있습니다. 다음과 함께 제공됩니다.

• 선택기
• 속성/CSS
• 시장 조작
• 횡단
• 이벤트
• 효과
• 아약스
• 핵심

이 특정 디자인 치트 시트 에는 멋진 검색 기능도 포함되어 있습니다. 찾고 있는 jQuery 버전을 선택하고 특정 옵션을 검색할 수 있습니다. 이것은 쉽고 빠르게 참조할 수 있는 훌륭한 도구입니다.

8. UX 용어

UX 디자이너는 조직 내에서 다양한 사람들과 상호 작용하며 모든 사람이 용어를 아는 것은 아닙니다. 끊임없이 자신을 설명할 필요가 없다면 좋지 않을까요? 이것은 당신이 말하는 내용을 이해하는 데 도움이 되도록 동료에게 나눠주기 위한 것입니다. 그것은 신부 Trozelli에 의해 당신에게 제공되었으며 다음을 포함합니다:

• UX 실습
• UX 역할
• UX 활동
• 사용자 인터페이스 용어
• UX 결과물

9. JQuery 아이콘 치트 시트

이것은 jQuery로 만들 수 있는 믿을 수 없을 정도로 빠른 아이콘 목록입니다. 많은 분들이 이미 알고 계시겠지만 어서오세요!

우리 모두가 그것들을 하나하나 외울 수는 없습니다. 이것은 머리 꼭대기에서 정보를 기억하는 데 어려움을 겪는 우리에게 유용할 것입니다. 초보자에게도 좋습니다.

이것은 Foundeo Inc.의 Pete Freitag가 제공했습니다. 개인적으로 이것은 모든 디자이너 치트 시트 중에서 가장 좋아하는 것입니다.

10. 워드프레스 치트 시트

Startbloggingonline.com의 독자 Mike Wallagher는 자신이 개발한 WordPress 치트 시트를 공유했습니다. 그는 두 가지 버전을 모두 제공하기 때문에 초보자와 고급 사용자 모두에게 좋습니다. 한번 봐봐! 기술 지원이 필요한 경우 WP Buffs에서 WordPress의 도움을 받으세요!

공유하고 싶은 멋진 디자인 치트 시트가 있습니까? 아래 의견에 알려주십시오.