UI 개발자에게 가장 적합한 도구는 무엇입니까?


우수 답변

UI 디자이너 :

스케치

시작하기

시스템 : Mac

장점 : “인터페이스”디자인에 적합합니다.

Sketch는 UI 디자인을 더 간단하고 효율적으로 만들어주는 가볍고 사용하기 쉬운 벡터 디자인 도구입니다. . 이 플랫폼은 UX / UI 디자인을 위해 특별히 설계된 Photoshop 및 Illustrator에서 사용되는 기능을 단순화합니다. Sketch 이전에 디자이너는 벡터 및 기타 사진 효과와 같은 특정 기능을 얻기 위해 Photoshop과 Illustrator 사이를 전환해야했습니다. 이제 Sketch를 사용하면 사용자가 부풀어 오른 기능을 제거하고 사용자 경험 / 사용자 인터페이스 디자인에 집중하여 UI 디자인을 최대한 활용할 수 있습니다. Sketch의 가장 좋은 기능 중 하나는 소프트웨어에 포함되지 않은 기능을 보완하기 위해 플러그인을 설치하는 기능 입니다.

하지만 그래도 Android 앱 사용자 인터페이스를 디자인하기위한 가장 실용적인 도구 중 하나입니다. Sketch의 Android 측 실시간 미리보기 지원은 그다지 효과적이지 않습니다. 사용자는 SkalaPreview를 다운로드해야하며 일련의 번거로운 작업을 거쳐야 볼 수 있습니다. 휴대 전화 측 Android 인터페이스의 실제 디자인

iDoc

시스템 : Mac 및 Windows

장점 : 온라인 공동 작업 설계 및 전달 설계 UI 디자이너 및 개발자 용

새로운 공동 작업 및 전달 도구 인 iDoc에는 Photoshop, Adobe XD에서 파일 가져 오기를 지원하는 강력한 플러그인이 있습니다. , 및 Sketch . 플러그인의 도움으로 iDoc은 사양 및 자산을 생성 할 수 있습니다. UI 디자이너의 사용을 위해 자동으로. 정적 디자인 파일을 대화 형 및 애니메이션 Hi-Fi 프로토 타입으로 만들려면 파일을 iDoc의 프로토 타입 모듈에 업로드하기 만하면됩니다.

Invision -디자인을 빠르게 구현하는 웹 기반 프로토 타이핑 도구

비용 : 프로젝트 1 개 무료 (3 개 프로젝트의 경우 15 $ / 월 | 무제한 프로젝트의 경우 25 $ / 월 | 팀의 경우 99 $ / 월)

호환성 : Mac 및 Windows

기능 :

  • InVision을 통해 디자이너는 디자인 파일을 업로드하고 애니메이션, 제스처 및 전환을 추가하여 정적 화면을 클릭 가능한 대화 형 프로토 타입으로 변환 할 수 있습니다. 5 분 이내에 고화질을 얻을 수 있습니다.
  • PNG, JPG, GIF, AI 및 PSD 형식의 파일을 지원합니다. InVision App은 설계 초안을 공동으로 작업하고 동료 및 고객의 피드백을 수집하는 데 적합합니다.
  • 매력적인 새로운 디자인에서 개발 워크 플로까지. 스타일 시트를 만들고, 완벽한 픽셀 구성 요소를 얻고, 디자인 과제를 논의하고, 적응 적으로 내보내고, 모든 디자인 요소에 대한 실제 코드를 생성합니다.

Figma

가격-개인용 무료 사용

-그룹 / 월 1 인당 $ 12

소개 : Figma는 최초의 인터페이스 디자인 도구 -시간 협력. 실시간 협업, 벡터 네트워킹 및 버전 제어의 세 가지 훌륭한 기능이 있습니다. 간단히 말해 Figma는 실시간 공동 작업 이 포함 된 브라우저 기반 Sketch와 같습니다.

개인 경험 : 처음에는 Figma의 작업에 회의적이었습니다. 브라우저 기반 인터페이스 디자인 도구이기 때문에 사용자 경험을 제공합니다.하지만 나중에는 여전히 사용에 매우 민감하다는 사실을 알게되었습니다. 또한 브라우저 도구는 수신자가 아무것도 설치할 필요가없고 브라우저를 열면된다는 장점이 있습니다. 프로젝트에 참여하기 위해 컴퓨터에서. Figma 파일은 Mac, Windows, Linux 및 모바일 장치에서 사용할 수 있습니다 (보기 전용).

답변

개발자가 “아니요”라고 말하면 먼저 이유를 묻고 시도합니다. 거절하는 이유를 이해하십시오. 디자인 챌린지에 접근하는 더 좋은 방법이있는 것으로 밝혀지면 디자인을 변경하는 것 이상이 될 것입니다.

그러나 개발자는 일반적으로 모든 기능을 코딩하고 UI 디자이너를 디자인 할 수 있습니다. 생각해 내다. William Hurley가이 답변에서 지적했듯이 소프트웨어에 관해서는 거의 모든 것이 가능합니다.

나는 소프트웨어 개발자에게“x 기능”이 가능한지 또는 특정 기능을 작동하도록 설계를 코딩 할 수 있는지 물었습니다. “아니오”라고 말한 적이 없습니다.

하지만 UI 디자이너로서의 목표는 다음과 같지 아니요 복잡한 디자인을 만드십시오. 목표는 가능한 한 사용자에게 인터페이스를 간단하고 직관적으로 만드는 것입니다.

그러한 이유로 저는 최근 프로젝트에서 Google 머티리얼 디자인의 원칙을 사용했습니다 ( 머티리얼 디자인을 사용하는 5 가지 강력하고 실용적인 이유 참조 ).

이와 함께 제공되는 몇 가지 이점이 있습니다.

  • 사용자를위한 친숙 함 -Gmail, YouTube, Evernote, Buzzfeed 및 기타 여러 앱에서 머티리얼 디자인을 사용하므로 앱 사용자가 방법에 익숙해 질 가능성이 큽니다. 인터페이스의 모양과 작동합니다.
  • 기존 프레임 워크- 개발자가 사용할 수 있도록 기성품 구성 요소를 포함하는 많은 프레임 워크가 만들어졌습니다. div id = “c0479da0a4″>

CSS 구체화 , AngularJS 자료 Material-UI . 이를 통해 디자이너는 개발자가 쉽게 사용할 수있는 항목을 확인하고 해당 구성 요소를 디자인에 사용할 수 있습니다.

  • 빠른 의사 결정 -개발자와 디자이너 동일한 구성 요소 팔레트에서 작업 할 수 있으므로 설계 및 개발 프로세스가 더 빨라집니다.
  • 다음은 Google이 출시되기 전에도 수많은 앱의 모양과 느낌을 일관되게 만든 방법에 대한 멋진 동영상입니다. 머티리얼 디자인. 당시 사용했던 원칙을 적용함으로써 디자이너는 더 나은 인터페이스를 만들고 개발자의 어휘에서 “아니오”를 사실상 제거 할 수 있습니다.

    답글 남기기

    이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다