원자 설계 방법론 : 체계적인 UI를 만들고 재사용하십시오.

인생의 진짜 문제 : "아름다운 웹 사이트 ...하지만 왜 어디서나 두통이 있습니까?"

UI/UX, 제품 관리자 디자이너 또는 비즈니스 소유자 조차도이 조건을 경험 한 적이 있습니까? 처음으로 웹이나 앱을 시작할 때 모든 것이 아름답게 순서가 좋지만 시간이 지남에 따라 새로운 기능을 추가하거나 작은 버튼 디자인을 수정하려면 모든 것이 깨져서 비참합니다.

A 페이지의 버튼은 B의 버튼과 달리 봅니다. 구독 페이지에 사용 된 색상은 결제 페이지의 다른 색조이므로 개발자는 앉아서 비슷한 구성 요소에 대한 새 코드를 작성해야합니다. 반복적으로 ... 마지막으로, "순서 없이도 훌륭한 웹"이라는 것이 밝혀졌습니다. 시간을 소비하고 예산을 믿을 수 없을 정도로 낭비하는 악몽을 확장하거나 유지하는 것입니다.

당신이 고개를 끄덕이면, 당신은이 문제에 직면하지 않습니다. 이것은 가장 "좋은"디자인의 "고통"입니다.

프롬프트 : 웹 사이트의 두 번째 측면에있는 웹 사이트 UI의 그래픽 (왼쪽에 불일치 한 버튼, 카드 및 글꼴을 표시하기 전에 혼란스러워 보이십시오. 오른쪽 (후)은 모든 구성 요소가 질서 있고 아름답게 보이는 UI를 보여줍니다.

그 문제가 발생하는 이유 : "페이지"가 "시스템"처럼 보이는 디자인

모든 혼돈의 근원은 일반적으로 잘못된 설계 방법 때문입니다. 우리는 "홈 디자인", "제품 디자인 페이지 세부 사항", "우리와 접촉하는 디자인"과 같은 "페이지"(페이지 기반 디자인)로 가르치는 경향이 있습니다. 처음에 이런 종류의 생각은 빠를 수 있습니다. 그러나 장기적으로는 좋은 재앙입니다.

"페이지"를 기본으로 설계 할 때, 우리는 이러한 요소가 다른 곳에서 사용될 것이거나 이러한 문제를 일으키지 않을 것이라고 생각하지 않고 해당 페이지에 대한 다양한 요소를 만들 것입니다.

• 불일치 (불일치) : 다른 디자이너 또는 다른 시간에 같은 사람도 각 페이지마다 다른 색조, 크기 또는 그림자가있는 "파란색 버튼"을 만들 수 있습니다.
• 중복 작업 : 개발자는 "사용자 프로필 상자"에 대한 코드를 반복적으로 작성해야하지만 한 번만 작성해야하며 다시 사용할 수 있습니다.
• 중심의 중심이 없음 (단일 진실의 출처 없음) : "기본 버튼"이 실제로 정확하다는 것을 아무도 모릅니다. 어때? 모든 사람은 자신의 이해에 따라 일합니다.

이런 종류의 일은 도시 계획이없는 도시를 짓는 것과 다르지 않습니다. 모두가 원하는대로 집을지었습니다. 결국, 도시는 붐비고 방향없이 자랐습니다.

프롬프트 : 만화 디자이너와 프로그래머는 충돌 후 일하고 있습니다. 각 사람은 자신의 "버튼"을 만들었습니다. 동일한 웹 사이트를 표시 한 컴퓨터 화면을 가리키는 화살표가 있지만 다른 것처럼 보이는 버전이 많이 있습니다.

남은 경우, 비즈니스가 사업을 보유 할 때까지 확대되는 "기술 부채"에 영향을 미칩니다.

웹 사이트 나 애플리케이션이 체계적으로 성장하게하는 것이 매력적이지 않을뿐만 아니라 많은 차원에서 비즈니스에 직접적인 영향을 미칩니다. 거대한 "기술 부채"(기술 부채)는 엄청나고 비싸다.

• UX (User Experience) 악화 : 일관성이 없어서 사용자가 혼란스럽고 부적절하다고 느끼게합니다. 은행 앱의 "확인"버튼이 누를 때마다 얼굴이 바뀌는 경우 상상해보십시오. 당신은 자신감을 느끼고 계속 사용하고 싶습니까?
• 비용 상승 : 필요하거나 추가 할 때마다 디자이너와 개발자가 같은 문제로 손실되어야하는 시간을 의미합니다. 이번에는 중복 작업은 지불 해야하는 "비용"입니다.
• 개발 속도는 감소합니다. 각 새로운 기능의 출시는 큰 문제입니다. 1 주일에 내가 한 일에서 다른 부품에 영향을 미치는지 여부에 대해 걱정해야하기 때문에 1 개월이 될 수 있습니다.
• 손상된 브랜드 이미지 : 웹 사이트는 브랜드의 얼굴입니다. 소비자의 눈에 신뢰할 수있는 브랜드 시스템이 아닌 것 같으면 줄어들 것입니다.

마지막으로,이 "부채"는 움직일 수 없을 때까지 확대됩니다. 경쟁 업체와 싸우거나 변화된 시장에 대응하는 것은 느리다. 불행히도 비즈니스 기회를 잃을 때까지

프롬프트 : intovraft 이미지는이 문제를 방출함으로써 발생하는 4 개의 부정적인 영향을 보여주었습니다 : Sansai Watch 아이콘 (시간 낭비),은 백 아이콘 (높은 비용), 아이콘 그래픽 아이콘 (UX) 및 갈라진 브랜드 아이콘. (손상된 브랜드)

고칠 수있는 방법이 있습니까? 원자 디자인으로 "화학자"를 살펴보기 시작

이 문제의 해결책은 "Page"를 "시스템"으로 바꾸는 것에서 "시스템"으로 생각하고이를 이해하는 가장 강력한 도구로 생각하는 방식을 바꾸는 것입니다. 브래드 프로스트 가 발명 한 원자 디자인 .

원자 디자인은 화학의 차용 개념입니다. 분자로 수집 된 원자와 더 복잡한 기관으로 수집 된 분자와 같은 다양한 구성 요소를 5 레벨로 나누어 UI 설계에 적용

1. 원자 (원자) : 색상, 글꼴, 아이콘 또는 단일 버튼과 같이 가장 작은 단위이며 분리 할 수 없습니다. 가장 기본적인 "원자재"입니다.
2. 분자 (분자) : 많은 "원자"를 모아 레이블 (Atom) + 입력 필드 (Atom) + 버튼 (Atom)을 "형태 검색 양식"으로 사용하는 것과 같은 실제 작업 구성 요소를 생성합니다. (분자
3. 유기체 (유기체) : 로고 + 분자 + 분자의 사용과 같이 "분자"및/또는 "원자"를 복잡하고 더 중요하게 만들기 위해 "헤더 (헤더)"(유기체)가되게하는 것입니다.
4. 템플릿 (템플릿) : 실제 정보를 넣지 않고 "얼굴의 개요"를 만들기 위해 구조물을 모으기 위해 많은 "유기체"가 도입되는 것은 각 페이지가 가지고있는 것을 규정하는 청사진입니다.
5. 페이지 (페이지) : 마지막 단계는 "템플릿"을 가져와 "실제 컨텐츠"(사진, 텍스트, 비디오)를 넣어 사용자가 실제로 충족 할 웹 페이지 또는 앱을 볼 수 있도록하는 것입니다. 디자인 시스템의 정확성과 효율성을 테스트 할 수 있습니다.

이 개념의 시작은 체계적인 설계 시스템을 만들고 쉽게 확장하는 데 도움이됩니다. 수십 수백 페이지의 모든 것이 항상 같은 규칙에 남아 있든 상관 없습니다.

프롬프트 : 아름다운 인포 그래픽 이미지는 5 개의 원자 설계 (원자 -> 분자 -> 유기체 -> 템플릿 -> 페이지)의 계층 구조를 보여줍니다. 각 단계에서 원자, 분자, 분자는 검색 양식, 헤더입니다.

달성했던 실제의 예 : GE가 설계 시스템으로 조직에 혁명을 일으켰을 때

이론은 여전히 복잡해 보일 수 있습니다. GE (General Electric)와 같은 세계 급 조직의 실제 사례를 살펴 보겠습니다. GE에는 거대한 디지털 제품이 있습니다. 각 팀은 UI를 다른 방향으로 설계했습니다. 혼란과 많은 자원 낭비

발생하는 문제 : 폭력 부족 브랜드를 독특하게 보이게하고 필요한 것보다 신제품 개발이 더 오래 걸립니다.

문제 해결 방법 : GE의 팀은 "Predix Design System"을 만들기 위해 Atomic Design에 동일한 원칙을 가져 왔습니다. 그들은 조직의 모든 사람들이 사용해야하는 "구성 요소 라이브러리"를 만들었습니다. 색상, 원자 (원자)에서 데이터 카드, 그래프, 복잡한 테이블 (유기체)까지

놀라운 결과 :

• 센터에서 새로운 것을 만들 필요가 없기 때문에 디자인을 줄이고 거대한 개발
• 통합 된 사용자 경험을 만듭니다. GE의 모든 제품에서 브랜드를보다 강력하고 신뢰할 수 있습니다.
• 중복 기능을 줄임으로써 막대한 예산을 절약하십시오

이것은 처음에는 투자 창출이 느리게 보이지만 장기 보상은 엄청나다는 증거입니다. 조직이 지속 가능하게 성장할 수있는 것입니다.

프롬프트 : GE 애플리케이션 전 및 후에 미끄러집니다. 첫 번째 측면은 완전히 다른 3 개의 앱의 UI를 보여줍니다. 동일한 설계 시스템을 사용하는 3 개의 앱을 모두 표시 한 후 일관되고 전문적으로 보입니다. "개발 시간 -60%"와 같은 통계 숫자로

당신이 따라 가고 싶다면, 무엇을 해야하는지 : 체크리스트는 직접 원자 디자인을 만들기 시작합니다 (즉시 사용할 수 있음).

여기서 읽으십시오. 당신은 기다릴 필요가 없습니다! 이 5 가지 간단한 체크리스트로 즉시 프로젝트의 원자 설계 시스템을 만들 수 있습니다.

1. 부동산 계정 만들기 (UI 인벤토리) : 첫 번째 단계는 먼저 무엇을 가지고 있는지 탐색하는 것입니다. 웹 또는 앱의 모든 페이지를 캡처합니다. 모든 버튼, 모든 유형, 카드, 모든 스타일, 모든 주제와 같은 모든 구성 요소를 개별적으로 자릅니다.
2. 원자 정의 : 메인 컬러 세트 (타이포그래피 스케일), 간격 시스템 시스템 및 아이콘 스타일과 같은 "원자"에 대한 "Atom"에 대한 표준을 생성하는 자산에서 중요한 기초가되는 스타일 가이드의 생성입니다.
3. 신체를 조립하여 분자를 만듭니다. 안정적인 원자가있을 때 "이름으로 정보를 채우는", "아이콘이있는 버튼", "태그 기사"와 같이 자주 사용되는 "분자"로 모이기 시작했습니다.
4. 중요한 유기체 만들기 : 순서 버튼이있는 헤더, 바닥 글, 사이드 바 또는 제품 이미지 카드와 같은 웹의 더 크고 심장을 만들어 다음 단계로 올라갑니다.
5. 도구를 사용하여 구축을 돕습니다 : 손 으로이 시스템을 만드는 것은 너무 어려울 수 있습니다. Figma 또는 Sketch Design 도구를 사용하여 팀의 모든 사람이 반복적으로 전화 할 수있는 "구성 요소 라이브러리"를 만듭니다. Figma는 매우 강력한 도구를 가지고 있습니다. 이 경영진과 다시 올라 가고 싶다면 더 빨리 일하는 데 도움이되는 Figma의 고급 기술을

프롬프트 : 아름답고 쉬운 이미지를 이해하고, 각 항목의 아이콘으로 원자 디자인을 시작하기위한 5 단계를 보여줍니다 (돋보기, bảng màu, 분자, 구조 및 그림 로고).

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

나는 많은 사람들이 분명히 대답하기 위해 원자 디자인에 대해 궁금해하는 질문을 수집합니다. 여기

질문 1 : 원자 디자인은 소규모 프로젝트에 적합합니다. 아니면 프리랜서 만?
답 : 매우 적합합니다! 실제로 프로젝트가 시작될 때 프로젝트가 시작된 초기부터 징계와 규정을 만들기 때문에 프로젝트가 더 작을수록 앞으로 프로젝트가 확장 될 때 강력한 기초를 갖게 될 것입니다. 나중에 두통을 겪을 필요는 없다. 나중에 체계적인 사고는 팀이 작든 크든 항상 유용하다.

질문 2 : 이것이 첫 번째 프로젝트를 느리게 만들까요?
답 : 예, 첫 번째 기간에는 약간 더 많은 투자입니다. 그러나 당신이 반환 한 것은 큰 속도의 장기입니다. "처음부터 천천히 걷는 데 동의하는 속담처럼, 더 빨리 달리고 길의 중간에 걸려 넘어지는 것이 더 빨라지는 것"(빨리 가면서 느리게”(빨리 가기 위해 느리게 진행) 가장 가치있는 것입니다.

질문 3 : 원자 디자인 및 스타일 가이드 또는 디자인 시스템이 다릅니 까?
답 : 아주 좋은 질문입니다! 이렇게 생각하십시오 :

• 스타일 가이드 : 일반적으로 색상, 글꼴, 로고, 아이콘과 같은 "원자"에 중점을 둡니다.
• 원자 디자인 : 스타일 가이드를 사용하여 분자, 유기체, 템플릿 및 페이지로 신체를 만드는 "철학"또는 "방법"입니다.
• 디자인 시스템 : 가장 "최종"입니다. 지침과 완전한 문서가 포함 된 재활용 구성 요소 세트입니다. 원자 디자인은 디자인 시스템을 만드는 좋은 아이디어입니다.

질문 4 : 이미 지저분한 오래된 웹 사이트가 있다면 원자 디자인을 사용하여 적응할 수 있습니까?
답 : 물론! 한 번에 모두 해체 할 필요는 없습니다. 모든 전체 이미지를보기 위해 먼저 권장하는 "UI 인벤토리"단계에서 시작한 다음 표준 구성 요소를 하나씩 작성한 다음 각 부품의 골동품을 교체하십시오. 먼저 사람 앞에서 가장 자주 시작할 수 있습니다.

프롬프트 : 만화 캐릭터가 교차로에 서 있습니다. "페이지 기반 디자인"이라고 불리는 지저분하고 지저분한 하나. 또 다른 방법은 "Atomic Design"이라는 부드럽고 질서있는 도로입니다. 만화 캐릭터는 머리에 물음표가 있습니다. 결정을 전달하십시오

쉽게 이해하기위한 요약 : 집 건설을 중지하고 "레고를 향해"건축하십시오.

원자 디자인을 요약하고 싶다면 가장 쉬운 것은 하나의 세트로 "Standard Lego Quarter"세트를 만들기 위해 매번 "전체 집 빌드"에서 사고 방식을 바꾸는 방법입니다.

고객이 "집", "성"또는 "우주선"(페이지)을 원하든 좋은 세트 (원자, 분자, 유기체)가 있으면 동일한 로고를 선택할 수 있습니다. 빠르고 아름답고 강한 새로운 아이템으로 모여 모든 것이 여전히 같은 레고 우주의 일부인 것 같습니다.

오늘날 "시스템"에 대한 투자는 다음날 "속도"와 "품질"의 구매입니다. 곧 회전하는 세계에서 성장하고 조정할 준비가 된 것은 디지털 제품의 핵심입니다. 우리의 UX/UI 디자인 항상 보유하고있는 지침입니다.

좋아 ... 자신만의 레고 세트를 만들 시간인가요?

프롬프트 : 강력한 마지막 사진은 복잡하고 아름다운 UI 구조의 마지막 레고의 디자이너를 보여줍니다. 배경은 작업 효율의 성장을 보여주는 그래프입니다.

‍