Adobe 체험 디자인 트릭, 팁 및 기법

by 톰 그린

07 년 1 월

Adobe 체험 디자인 트릭, 팁 및 기법

Adobe Experience Design은 독창적 인 창조성을 느낄 수있게 해주는 다양한 그래픽 기능을 제공합니다.

어도비 가 퍼블릭 시사회로 체험 디자인을 소개했을 때,이 회사는 동시에 두 가지 놀라운 업적을 성취했습니다. 첫째, 신흥 프로토 타이핑 소프트웨어 시장에서 공략을 펼쳤습니다. 둘째, 사용자는 "진행중인 작업"으로 게임을 즐길 수있는 기회를 만들었으며 사용자가 진행 상황에 영향을 미치도록했습니다. 몇 달 동안 응용 프로그램을 사용할 수있게되었으므로 몇 가지 Experience Design 트릭, 팁 및 기술을 공유하는 것이 좋은시기라고 생각했습니다.

하지만 먼저 Prototyping Software가 의미하는 것이 무엇인지 궁금 할 것입니다. 이 분야의 주요 업체는 Proto.io, Principle, UXPin, Atomic.io , Experience Design 및 InVision입니다. 정적 인 디자인이 생성되는 Sketch 3, Photoshop 및 Illustrator와 같은 응용 프로그램과 달리이 그래픽 편집기는 오늘날의 모바일 및 웹 디자인 공간에서 흔히 볼 수있는 상호 작용, 동작 및 기타 기능을 소개합니다.

모바일에 대한 부상과 피할 수없는 레이저에 중점을 둔 사용자에 따라 디자이너가 몇 가지 스케치를 채우고 몇 개의 구성 요소를한데 모은 다음 프로젝트를 릴리스하거나 웹 서버에 업로드하는 것이 더 이상 충분하지 않습니다. UI / UX 워크 플로는 기본적으로 변경되었습니다. 사용자, 스케치, 와이어 프레임, 모형 및 프로토 타이핑을 식별하는 것에서부터 프로세스의 모든 단계에 광범위한 사용자 테스트가 필요합니다.

마지막 단계 인 프로토 타이핑 (prototyping) - 프로젝트가 최종 생산 단계로 넘어 가기 전에 고통 점을 발견하고 수정합니다. 여기서 대화 형 작업, 동작, 화면 전환 및 모든 것을 화면에 배치하는 것이 매우 중요합니다. 문제와 문제는 단순히 정적 이미지로 표시되거나 구두로 설명 될 수 없습니다. 결국이 제품들은 실제 인간을위한 것입니다. 이 모든 것을 코드로 옮기지 않고 프로토 타이핑 프로세스는 그 목적을 위해 설계된 그래픽 소프트웨어에 의해 점점 더 많이 수행되고 있습니다. 끊임없이 코드를 다시 작성하고 디버깅하는 것보다 비주얼 편집기를 사용하여 실수를 수정하고, 이미지를 대체하고, 텍스트를 다시 쓰고, 버튼을 이동하는 것이 더 쉽습니다.

실제로,이 소프트웨어는 오늘날의 "신속한 프로토 타이핑 (Rapid Prototyping)"설계 및 개발 환경에서 핵심 구성 요소가되었습니다.

그렇게 말하면서 Experience Design을 재미있게 배워 봅시다.

07 년 2 월

Adobe Experience Design에서 간단한 원으로 대상 핀 만들기

Experience Design의 벡터 기능으로 아이콘 및 인터페이스 요소를 쉽게 만들 수 있습니다.

XD의 한 가지 좋은 점은 벡터 드로잉 도구를 사용한다는 점입니다. 아이콘을 찾을 수 없습니까? 문제 없어. 너 자신을 굴려 라. 방법은 다음과 같습니다.

타원형 도구를 선택하고 Option / Alt-Shift 키를 누른 상태에서 원을 그립니다.
원을 선택한 상태에서 채우기 색상을 FF0000으로 설정하고 테두리를 속성에서 "없음"으로 설정합니다.
원을 두 번 클릭하여 고정 점을 표시합니다. 아래쪽 앵커를 아래쪽으로 끕니다.
선택한 앵커 포인트를 두 번 클릭하면 커브가 선으로 대체됩니다.
흰색 채우기와 스 토크가없는 또 다른 작은 원을 그립니다. 위치로 이동하고 핀과 원을 선택하십시오. 속성 상단의 정렬 패널에서 가로 가운데 버튼을 클릭하면 핀이 만들어집니다.

03 / 07

Adobe Experience Design에서 배경 흐림 효과 만들기

모양과 이미지 /를 사용하여 XD에서 배경 흐림을 만듭니다.

배경 이미지 위에 텍스트 또는 기타 콘텐츠가있는 것이 일반적입니다. 여기서 문제는 이미지가 그 위에있는 내용을 압도한다는 것입니다. 이 문제를 해결하는 한 가지 방법은 배경 이미지를 흐리게하는 것입니다. Photoshop이나 다른 이미지 편집 소프트웨어에서 이미지를 흐리게 만들 수 있지만 이는 특히 XD가이 작업을 처리 할 수 있기 때문에 다소 비효율적입니다. 방법은 다음과 같습니다.

새 대지를 만들고 배경 이미지를 추가하십시오.
사각형 도구를 선택하고 이미지 위에 사각형을 그립니다. Rectangle을 선택한 상태에서 Fill을 White로, Stroke를 None으로 설정하십시오.
사각형을 선택한 상태에서 속성 패널에서 배경 흐리게 를 선택 합니다. 세 개의 슬라이더는 흐림 양, 밝기 및 불투명도입니다. 그들이하는 일은 다음과 같습니다.

Blur Amount : 모양 아래 이미지의 흐려짐을 조정합니다. 최대 값은 +50입니다.
밝기 : 이미지의 밝은 영역과 어두운 영역을 조정합니다. 최소값은 -50이고 최대 값은 +50입니다.
불투명도 : 모양의 투명성과 모양 아래 이미지의 가시성에 영향을줍니다. 값의 범위는 0 %에서 100 %입니다.

"물건을 바꿀"경우에는 모양의 색상을 변경하고 불투명도 값으로 재생하여 이미지의 "모양"을 변경하십시오.

04 / 07

Adobe Experience Design에서 스크림 만들기

그라디언트를 사용하여 이미지와 색상이 인터페이스 요소의 방식으로 나타날 때 명암 대비를 향상시킵니다.

일반적인 디자인 문제는 인터페이스 요소 요소가 공통 색이어야하지만 배경 이미지 나 단색 위에 배치되면 손실된다는 것입니다. 해결책은 스크림입니다. 스크림은 인터페이스 요소와 배경 사이에 약간 불투명 한 그라디언트입니다. 이것은 XD에서 쉽게 달성 할 수 있습니다. 방법은 다음과 같습니다.

XD에서 아트 보드를 만들고 이미지를 추가하고 해당 UI Kit (파일> UI 키트 열기) 의 인터페이스 요소를 복사하여 아트 보드에 붙여 넣습니다. 위 이미지에서 사진은 상태 표시 줄과 앱 표시 줄을보기 어렵게 만듭니다.
사각형 도구를 선택하고 사각형을 그립니다. 속성 패널에서 채우기를 선택하고 색상 피커의 팝 다운에서 그라디언트를 선택합니다. 그라데이션 색상을 흑백으로 설정하십시오. A 값 - Opacity-를 60 % 로 설정하고 White A 값을 0 %로 설정합니다.
Rectangle을 선택한 상태 에서 Object> Arrange> Backward 보내기를 선택하십시오 . 이제 인터페이스 요소가 이미지 위에 표시됩니다.

07 년 5 월

Adobe Experience Design에서 이미지 아바타 만들기

Experience Design에서 마스크를 만들고 편집하는 기능은 시간을 크게 절약 해줍니다.

사람들이 서로 대화하고 스피커의 그림이 화면에 나타나는 채팅 앱에 일반적인 디자인 패턴이 있습니다. 이 아바타는 대개 가면을 찍은 이미지입니다. XD에서이 작업을 완료하는 것은 간단합니다. 방법은 다음과 같습니다.

아트 보드에서 이미지와 원 또는 기타 모양으로 시작합니다. 원을 어떤 색으로 채울 수 있습니다. 당신이 할 필요가없는 것은 획 색상을 추가하는 것입니다. 효과를 만들 때 사라질 것입니다. 왜 그렇게 귀찮을까요? 서클을 비추면 클립 보드에 복사하십시오.
서클을 이미지 위로 이동하고 이미지와 서클을 모두 선택하십시오. 선택한 봇 객체를 사용 하여 Object> Mask with Shape를 선택 합니다. 마우스를 놓으면 아바타가 만들어집니다. 거기에서 크기를 조정할 수 있습니다.
획을 추가해야하는 경우 클립 보드에있는 원을 대지 위에 붙여 넣으십시오. 사본을 선택하고 속성에서 채우기를 끄고 획 색상과 폭을 추가하십시오. 선을 정렬하려면 두 객체를 모두 선택하고 속성 패널의 위쪽에있는 맞춤 옵션의 가운데 맞춤 단추를 클릭합니다.
마스크에서 사진을 이동하려면 마스크를 두 번 클릭합니다. 그러면 이미지와 마스크 모양이 표시됩니다. 이미지를 클릭하고 위치로 끕니다. 마우스를 놓으면 이미지가 마스크 안의 새 위치에있게됩니다.

07 년 6 월

Adobe Experience Design Artboard로 게임하기

오리 엔테이션, 사용자 정의 색상 및 수직 스크롤은 오히려 깔끔한 아트 보드 기능입니다.

Experience Design 아트 보드는 단지 콘텐츠를 배치 할 수있는 것은 아닙니다. 그들 역시 조작 할 수 있습니다. 다음은 할 수있는 몇 가지 작업입니다.

아트 보드의 가로 및 세로 버전이 필요한 경우 아트 보드를 복제하고 선택한 복제본을 속성 패널에서 가로 방향 버튼을 클릭합니다. 대지가 가로 방향으로 변경됩니다. 대지에 내용이있는 경우 대지의 이름을 클릭하면 대지 패널에 대지 속성이 나타납니다.
대지 및 사용자 정의 색상을 프로젝트에 추가하려면 대지를 선택하고 속성 패널의 모양 섹션에서 칠 색상 칩을 클릭합니다. 색상의 16 진수 값을 입력하고 + 부호를 클릭하십시오. 색상이 사용자 정의 색상으로 추가됩니다. 다른 곳에서 해당 색상을 적용하려면 객체를 선택하고 사용자 정의 색상 칩을 클릭하여 색상을 적용하십시오.
대지를 세로로 스크롤 할 수 있습니다. 이렇게하려면 대지를 선택하고 속성 패널에서 높이를 변경하거나 아트 보드의 아래쪽을 끌어서 이동 시키십시오. 속성 패널의 스크롤 가능 영역에서 팝업 메뉴에서 세로를 선택하고 화면의 뷰포트 높이를 입력하십시오. 파란색 선은 뷰포트의 아래쪽을 보여줍니다. 테스트하려면 재생 버튼을 클릭하고 스크롤하십시오. 스크롤을 끄려면 스크롤링 팝업에서 없음을 선택하십시오.

07 년 7 월

Adobe Experience Design에서 모바일 UI 키트 편집

UI 킷은 완전히 편집 할 수 있습니다.

Experience Design에는 iOS, Android 및 Windows UI를 개발하기위한 UI Kit가 포함되어 있습니다. 당신이 처음 열 때, 당신은 그들이 꽤 잘 자리 잡고 있다고 생각할 수 있습니다. 이 키트의 비트와 조각은 완전히 편집 할 수 없습니다. Android 와이어 프레임을 작성하여 알아 보겠습니다.

먼저 아트 보드 도구를 선택 하고 속성 패널의 Google 섹션에서 Android Mobile을 선택합니다.
파일> UI Kit> Google 소재 열기를 선택하십시오 . Material Design UI Kit가 열립니다. 돋보기를 선택하고 스크린 가이드 대지를 선택하십시오. 나는 이것이 인터페이스 요소의 적절한 화면 배치를위한 가이드를 제공하기 때문에이 글에서 시작하는 것을 좋아한다. 파란색 막대 중 하나를 클릭하면 잠긴 것을 볼 수 있습니다. 각 잠금 장치를 클릭하여 잠금을 해제하십시오 . 대지를 움직여 클립 보드에 복사합니다. 문서로 돌아가서 대지에 화면을 붙여 넣습니다.
대지 상단에있는 App 막대를 한 번 클릭하십시오. 선택 방법에 유의하십시오. [오브젝트]> [정렬]> [맨 앞으로 가져 오기]를 선택합니다. 선택한 내용이 화면 가이드 위에 있습니다. 이렇게하면 화면의 각 요소를 편집 할 수 있음을 알 수 있습니다.
상단 의 상태 표시 줄 을 두 번 클릭하고 속성 패널 에서 채우기 색상을 455A64로 두 번 클릭합니다 . App Bar를 두 번 클릭하고 채우기를 607D8B로 설정하십시오. 이것은 UI 킷의 각 요소를 프로젝트의 색상 사양을 충족하도록 편집 할 수 있음을 알려줍니다.
아이콘은 어때? 색상을 변경하는 방법은 다음과 같습니다. 마음 을 두 번 클릭하여 선택하십시오. 속성 패널을 보면 선택 항목을 편집 할 수 없다고 가정 할 수 있습니다. 좀 빠지는. 한 번 더 두 번 심장을 클릭하십시오 . 속성이 열리고 채우기 색을 FF0000으로 변경합니다. 나머지 아이콘과 텍스트에 대해이 더블 더블 클릭 트릭을 반복하십시오.