Photoshop에서 세련된 iPhone 앱 UI 레이아웃 디자인 팁
웹의 그래픽 디자인은 오랫동안 인기있는 트렌드였습니다. 그리고 2007 년 애플의 아이폰이 발명되면서 앱 스토어는 엄청나게 성장했습니다. 이제 iOS 앱 디자이너와 개발자가 모여 환상적인 개념을 현실로 구현했습니다.
그러나 Xcode를 배우고 Objective-C를 프로그래밍하는 것을 좋아하지 않는다면 Photoshop이 더 많은 관심을 가질 수 있습니다. 아래에서는 킬러 iOS 앱 모형을 디자인하기 위해 선택한 몇 가지 팁을 제공합니다. 그리고 새로운 트렌드가 항상 나타나기 때문에 디자인 커뮤니티는 지속적으로 앱을 만드는 방법을 재정의하고 있습니다. 이 내용을 Apple 디바이스 디자인을위한 초보자 용 리소스 안내서라고 생각하십시오.
적절한 문서 설정
페이지의 요소를 고려하기 전에 iPhone 그래픽이 작성되는 방법을 이해해야합니다. iPhone 4 / 4S 모델의 최신 망막 디스플레이에서 화면은 여전히 물리적으로 동일한 크기로 측정됩니다. 그러나 픽셀 단위의 디스플레이는 실제로 원본의 두 배입니다. 즉, 326ppi 해상도에서 640 × 960을 사용합니다.
또한 iPhone 3 / 3GS 아이콘은 일반적으로 57x57 픽셀입니다. iPhone 4 및 4S 화면은 기본적으로 114x114를 사용하지만 이전 해상도에 맞게 확장됩니다. 고맙게도 아이콘 디자인 프로세스는 UI 레이아웃을 만드는 것과 상당히 분리되어 있습니다. 그러나 디자이너로서 두 가지 기술을 모두 갖추어도 결코 아프지 않습니다.
이 설정을 많이 사용하려면 사전 설정 문서 크기로 저장하는 것이 좋습니다. Photoshop의 새 문서 창에는“사전 설정 저장…”이라는 단추가 있습니다. 이름을 지정하면 새 문서를 만들 때마다 드롭 다운 목록에서 선택할 수 있습니다.
블로그 Teehan + Lax는 iPhone UI 요소를 수동으로 만드는 대신 Photoshop 전용으로 무료 UI 키트 다운로드를 제공합니다. 여기에는 iPhone 4 렌더링, 상단 막대, 버튼, 키보드 및 기타 유용한 것들이 포함됩니다. 확실히 이것을 먼저 잡고이 요소에 쉽게 액세스 할 수있는 로컬 디렉토리에 저장하십시오.
바 및 버튼 사용자 정의
앱의 상단과 하단에 모두 메뉴 막대가 포함되어있을 수 있습니다. 상단은 뒤로 및 편집 버튼과 함께 현재보기의 레이블을 지정하는 데 사용됩니다. 하단은 일반적으로 탐색이며 가장 일반적으로 탭을 사용하여이를 수행합니다.
Teehan + Lax는 이에 대한 일반적인 예를 사용합니다. 그러나 자신의 색상, 질감 및 다른 눈 사탕으로 사용자 정의하기가 훨씬 쉽습니다. 예를 들어 그룹 레이어 막대 (회색-파랑) 를 가져 와서 새로운 iPhone 크기의 문서 창으로 드래그합니다. 그런 다음 왼쪽의 작은 삼각형을 클릭하고 Bar Top 이라는 다른 하위 그룹을 엽니 다. 맨 아래에는 그라디언트에 오버레이 효과가있는 배경 레이어가 있습니다.
이 배경 레이어에서 FX를 열고 그라디언트 오버레이를 두 번 클릭하십시오. Apple에서 기본 색상을 제거하고 (왼쪽에서 오른쪽으로) # 3478a7에서 # 5eb0e7로 설정했습니다. 또한 두 버튼의 그라디언트를 잃어 버릴 것입니다.이 버튼을 위해 # 052b50 ~ # 044a8e 값을 사용하여 풍부한 어두운 효과를 얻었습니다.
텍스처와 재미
이 작은 그라데이션 변화만으로도 앱을 사용자 정의하는 것이 매우 간단한 작업이라는 것을 알 수 있습니다. 약간의 디테일을 위해 막대 그라데이션 영역에 텍스처 또는 패턴을 추가 할 수 있습니다. 이 데모 예제에서는 기울어 진 줄무늬를 사용하겠습니다.
투명한 배경의 7x7 픽셀의 새 문서를 만드는 것으로 시작하십시오. 그런 다음 연필 도구를 가장 작은 크기 (1x1px)로 설정하고 오른쪽 상단에서 왼쪽 하단으로 연결하십시오. 나는 검은 색 HEX # 000000을 사용했지만 나중에 색상을 언제든지 변경할 수 있기 때문에 중요하지 않습니다. 따르지 않으면 아래 스크린 샷을 확인하십시오.
이제 Edit- > Define Pattern… 을 누르고 이름을 지정한 다음 save를 누르십시오. 필요한 것은 패턴이기 때문에 창을 닫으십시오 (저장하지 않고). 이제 bar top 그룹으로 돌아가 배경 위에 새 레이어를 만듭니다. 벡터 마스크를 CMD + 클릭 또는 CTRL + 클릭하면 배경 그라디언트 막대가 모두 선택됩니다.
그러나 방금 생성 한 새 레이어를 다시 클릭하면 파란색으로 강조 표시됩니다. 우리는이 새로운 패턴으로 그것을 채울 것입니다. 그러나 우리는 상단 막대 그라디언트 위 (및 버튼 아래)에만 줄무늬를보고 싶습니다. 최상위 메뉴에서 편집-> 채우기 로 이동하여 드롭 다운 메뉴에서 "패턴"을 선택하십시오. 아래 상자에서 마지막 점선 패턴을 선택하고 확인을 누르십시오.
처음에는 선이 상당히 단단해 보입니다. 레이어 팔레트에서 채우기를 약 20 % 값으로 떨어 뜨립니다. 또한 블렌드 모드를 오버레이로 변경하여 막대가 그라디언트 색상으로 흐를 수 있습니다. 100 %로 축소하고 멋진 효과를 확인하십시오!
3px x 3px 문서를 설정하고 더하기 기호를 채워 다른 달콤한 질감을 만들 수 있습니다. 위의 그라디언트 모양이 어떻게 극적으로 바뀌는 지 위의 예를 추가했습니다. 순수한 검정색에서 순수한 흰색 #FFFFFF로 색상을 변경해 볼 수도 있습니다.
탭 바 아이콘
앱 하단에있는 탐색 버튼은 전반적인 사용자 경험에 중요합니다. 사용자는 설정을 편집 할 위치, 작업 수행 방법 및 앱에서 수행 할 작업을 신속하게 파악해야합니다. 그렇지 않으면 그들은 종종 좌절하거나 지루 해져 노력을 중단합니다. 하나의 팁으로 하단 바의 탐색 영역을 가려 봅시다.
동일한 iPhone 4 GUI PSD 파일을 사용하여“탭 막대”그룹을 찾으십시오. Photoshop에서 CMD / CTRL + 클릭하여 블록을 클릭하면됩니다. 상단 막대와 유사하게 일부 일치하는 스타일의 배경 FX 그라디언트를 편집 할 수 있습니다. 그러나 검정 기본 그라디언트는 대부분의 색 구성표와 잘 어울립니다.
일부 아이콘의 경우 24px, 48px 및 64px로 제공되는 The Working Group의 망막 세트를 적극 권장합니다. GUI PSD의 각 아이콘에는 FX 레이어 스타일 (기본적으로 옅은 그림자 및 오버레이 그라디언트)이 적용됩니다. 이 작은 세부 사항은 실제로 훌륭한 디자인에 추가되므로 픽셀에 세심한주의를 기울이십시오. 문제가있는 경우이 색 구성표 디자이너를 사용해보십시오.
텍스트 레이블이 사용자 경험에 어떤 영향을 미치는지 고려해야합니다. 탭 아이콘이 충분하다고 생각되면 레이블 텍스트가 방해가 될 수 있습니다. 그러나 몇 가지 다른 아이디어로 옵션을 열어 놓고 놀아 두는 것이 중요합니다. 친구와 동료의 의견을 얻어 앱에 가장 적합한 방법을 알아보십시오.
또 다른 널리 사용되는 기술은 앱 디자이너가 탭 막대를 5 개의 슬롯으로 분할하는 가운데 버튼을 만드는 것입니다. 공간을 절약하고 탐색에 우아함을 더하기 위해이 디자인을 사용하는 많은 창의적인 응용 프로그램을 보았습니다. Formspring은 하나의 예이며 아래 화면을 추가했습니다.
유용한 링크
- 글리프 아이콘 세트
- Photoshop에서 iPhone Bank 앱 디자인 [튜토리얼]
- Photoshop에서 iPhone 응용 프로그램 디자인 [PDF]
- 유용한 iPhone / iPad 앱 개발자 도구 및 리소스 모음
- iPhone 및 iPad 앱을위한 iOS 사용성 팁 및 리소스
- 첫 번째 iPhone 응용 프로그램을 만드는 방법
결론
iOS 앱 및 Adobe Photoshop 작업을위한 이러한 전략은 디자인 감각을 더욱 발전시킬 때 유용합니다. 모바일 응용 프로그램은 웹 사이트 및 로고와 완전히 다른 볼 게임입니다. 새로운 기술을 지속적으로 배우기 때문에 프로세스 전체에서이 점을 명심하십시오.
위에 추가 된 링크와 함께 앱 인터페이스 디자인을 통해 훨씬 더 편안하게 느낄 수 있습니다. 레이아웃 모형은 항상 어렵고 제작 및 연구에 시간이 필요합니다. 그러나 충분한 헌신이 있다면 모바일 시장은 아마도 가장 번영하는 지역 일 것입니다. 추가 질문이나 의견이 있으면 아래의 토론 영역에 알려주십시오.
