어떻게

빨리 지 않는 Android 앱 UI를 디자인하는 방법

프로그래머와 개발자는 일반적으로 디자이너가 아닙니다. 이것은 사실로 널리 받아 들여지고 있습니다. 개발자는 앱을 만드는 데 집중하는 경향이 있습니다. 디자이너는 앱을 미적으로 매력적 으로 만드는 데 집중합니다. 그러나 왜 개발자가 그렇게 할 수 없습니까?

예전에는 애니메이션 스플래시 방문 페이지와 멋진 레이아웃이 중요했을 때 전문 디자이너를 고용하는 것이 합리적이었습니다. 그러나 오늘날의 추세는 최소 이거나 최소한 매우 단순합니다.

잠시 동안 누군가가 PC 소프트웨어의 스플래시 화면을 만들도록 요청했습니다. 스케치 용지로 가져 와서 PhotoShop으로 가져와 멋진 네온 선과 효과를 많이 만들었습니다. 스플래시 화면이 아닌 데스크탑 벽지 일 수 있습니다. 요점은 내가 정말 멋진 정교한 디자인을 만들었습니다.

당신이 아마 짐작할 수 있듯이, 그들은 그것을 좋아하지 않았습니다. 그들이 썼던 디자인은 문자 그대로 몇 개의 겹치는 컬러 원과 그 아래의 소프트웨어 이름의 작은 로고였습니다. 예를 들어, PhotoShop 작업에서 2 분. 그리고 당신은 무엇을 알고 있습니까? 나는 그것이 내 것보다 낫다는 것에 동의해야했다.

내가하고있는 요점은 – 프로그래머들은 내가했던 것과 같은 실수를 저지르는 함정에 빠진다고 생각한다. 우리는 UI와 스플래시 화면이 앱을 돋보이게 만드는 정말 환상적이고 눈길을 끄는 것들이어야한다고 생각하는 경향이 있습니다. 그러나 반드시 그럴 필요는 없습니다. 솔직히 말하면 안됩니다. 우리는 프로그래머의 사고 방식을 취하여 단순하고 기능적인 작품 인 심미적 디자인에 적용해야 합니다.

이 기사에서는 디자인 경험이 거의 없더라도 우아한 Android APP UI / UX를 만드는 매우 간단한 방법을 살펴 보겠습니다.

정말로 다른 것을 원하지 않는 한 머티리얼 디자인을 고수하십시오

앱이 인기 있고 좋아 보이기 위해 " 독특" 하고 " 나머지에서 눈에 띄지 "않아도됩니다. 이것이 바로 Google의 Material Design이 전 세계 앱 UI의 표준을 달성하기 위해 마련한 것입니다. SwiftKey, Nova Launcher, Textra SMS, YouTube와 같은 Android 앱에서 가장 큰 이름 중 일부인 Material Design을 고수하는 인기있는 앱이 많이 있습니다.

머티리얼 디자인의 핵심은 단색 팔레트가있는 카드 기반 레이아웃에 있습니다. Google은 업계 최고의 디자이너와 협력하여 미니멀리스트 디자인 사례에서 많은 요소를 도출 한 다음 무료로 모든 것을 공개했습니다. 웹 사이트 및 앱 디자인 과정에서 전자 책, 비디오, 기타

머티리얼 디자인을 시작하는 것은 매우 쉬우 며, 훨씬 간단하게 만드는 몇 가지 도구가 있습니다.

머티리얼 테마 편집기 (macOS + Sketch)
머티리얼 디자인 컬러 팔레트 플러그인 (PhotoShop / Illustrator)
소재 디자인 UI 키트 PSD (PhotoShop)
Android 머티리얼 디자인 UI 키트 ( 스케치)
머티리얼 UI 테마 생성기

단순하고 우아한 머티리얼 디자인 테마를 만들기 위해 영감을 얻으려면 다음 목록 블로그를 확인하십시오.

MaterialDesignBlog – 15 가지 훌륭한 머티리얼 디자인 예제
MockPlus – 영감을받는 12 가지 최고의 머티리얼 디자인 웹 사이트 예제
AndroidAuthority – Android를위한 10 가지 최고의 머티리얼 디자인 앱

색상 그라디언트는 생각보다 쉽습니다

머티리얼 디자인의 대안으로, 돌러 그라디언트는 단순하고 트렌디하며 시선을 사로 잡습니다. 또한 디자이너는 모든 색상으로 페인팅하거나 최고의 그라디언트를 디자인하는 데 많은 시간을 소비한다고 생각할 수 있습니다. 틀렸을 것입니다 – PhotoShop에서 10 초 안에 완료 될 수 있습니다.

PhotoShop 그라디언트 UI에서 10 초

얼마나 쉬운 지 보여주기 위해이 과정을 안내 할 것입니다.

모바일 용 새 PS 프로젝트 만들기 ( 1080ppi, 1920px, 72ppi 작동)

UIGradients.com – 사전 제작 된 그라디언트 모음.

UIGradients.com으로 이동하여 원하는 것을 찾으십시오.

UIGradients에서 색상 16 진수 값 복사

미리보기 위에서 그라디언트 색상을 복사합니다.

포토샵 그라디언트 선택기.

PS에서 빈 레이어를 마우스 오른쪽 버튼으로 클릭하고 블렌딩 옵션> 그라디언트 오버레이로 이동합니다.

드롭 다운 메뉴에서 그라디언트 패턴 미리보기를 직접 클릭하십시오. 드롭 다운 버튼을 클릭하지 마십시오. 그래디언트를 직접 클릭하면 색상 편집기가 열립니다.

UIGradient에서 16 진 값을 PS 그라디언트 도구에 입력하십시오.

이제 UIGradient의 색상 16 진수 값을 PS 그래디언트 편집기에 붙여 넣기 만하면됩니다.

필요에 따라 조정하십시오. 이제 Android 앱을위한 전문 그라데이션 배경이 있습니다.

체크 아웃 할 가치가있는 다른 그라디언트 도구 :

WebGradients.com
Android 셰이프 생성기 ( 그라데이션 옵션이있는 XML을 통해 셰이프 생성 용)

JPG / PNG 대신 SVG 사용

그래픽 요소 (버튼, 로고 등)에 PNG 또는 JPG를 사용하는 대신 실제로 SVG ( Scalable Vector Graphics) 를 사용해야합니다. 이는 SVG를 품질 저하없이 크기를 조정할 수 있기 때문입니다. 예를 들어 JPG를 더 큰 값으로 업 스케일하면 품질이 떨어지고 흐릿하게 표시됩니다. SVG는 그렇지 않습니다. 사람들은 Android 화면에 맞게 축소 할 수있는 거대한 PNG 파일을 사용하려고합니다. 대신 품질 손실없이 확대 된 작은 SVG를 사용할 수 있습니다.

또한 SVG는 PNG보다 파일 크기가 최대 60 % ~ 80 % 작을 수 있습니다. 즉, 앱 또는 모바일 웹 사이트가 사용자에게 더 빠르게로드되며 화면 해상도에 관계없이 좋아 보입니다.