본문 바로가기

UXUI

 (97)
[TIL] 24/06/04 메뉴 화면으로 이동(Navigate to)- 메뉴 화면이 흐린 상태에서 진해지며 노출 (Dissolve)  2. 메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동 (N" data-og-host="byroe.tistory.com" data-og-source-url="https://byroe.tistory.com/entry/%EA%B0%95%EC%9D%98%ED%95%99%EC%8A%B5%EC%9D%BC%EC%A7%80-UXUI-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%9E%85%EB%AC%B8-4%EC%A3%BC%EC%B0%A8-%EC%88%99%EC%A0%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%ED%94%84%EB%A1%9C%ED%86%A0%ED..
[강의학습일지] UXUI 디자인 입문 5주차 강의 인지심리학인간이 어떻게 보고 생각하고 행동하는가? 디자인 원칙을 기반으로 디자인을 하면 자연스러운 행동 유도→사용성 높은 제품 제작에 용이게슈탈트 심리학특정요소를 판단할 때 속한 그룹에 영향을 받음 (사용자가 제품을 경험하는 데 영향을 끼침)제품을 이용하면서 사용자는 의식적으로 통일성, 연속성, 유사성을 기대함 1. 유사성의 원리 (형태를 지각할 때 형태, 크기, 입체, 방향, 색 등 시각적으로 비슷한 요소는 관계가 있을 것이다)모양크기색상2. 근접성의 원리 (가까운 것끼리 관계가 있을 것이다)별개의 그룹으로 보이고 싶다면 여백을 두기 (카테고리화)3. 폐쇄성의 원리  (공백이 있는 부분을 추측할 수 있다)일부가 잘려있어도 이어져있을 것이라고 추측할 수 있음4. 연속성의 원리 (연속적인 선 요소가 이어지..
[강의학습일지] UXUI 디자인 입문 4주차 숙제 - 피그마 프로토타입 만들기 1. 장바구니 화면의 Button/Menu 버튼 클릭> 메뉴 화면으로 이동(Navigate to)- 메뉴 화면이 흐린 상태에서 진해지며 노출 (Dissolve)  2. 메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동 (Navigate to)- 장바구니 화면이 흐린상태에서 진해지며 노출 (Dissolve)  3. 장바구니 화면의 List Item 3을 클릭하면 상세 화면으로 이동 (Navigate to)- 상세 화면이 장바구니 화면 위로 밀어 들어오며 노출 (Move in)  4. 상세 화면의 Button/Back을 클릭하면 장바구니 화면으로 이동(Navigate to)- 상세 화면이 밀려나가며 아래로 장바구니 화면이 노출 (Move out)
[TIL] 24/06/03 본캠프 시작한 지 일주일째. 이번주는 강의를 들으면서 개인과제를 하는 주간이다. 새로운 팀을 만나 인사를 하고 각자 과제를 했다. [강의학습일지] UXUI 디자인 입문 3주차 강의제품팀 최소 인력제품관리자 1명PM (Project Manager) 제품의 전략을 세우고 우선순위를 결정해 실행함PO (Project Owner) 전체 프로젝트를 관리함디자이너 1명엔지니어 2명조직목적조직=제품팀=스쿼드(Squbyroe.tistory.com [강의학습일지] UXUI 디자인 입문 3주차 숙제 - 테스트케이스 작성 + 디자인 QA로 발견한 이슈 공유1. 테스트케이스 작성하기 (뱅크샐러드) 화면조건테스트케이스입력값기댓값테스트환경휴대폰 본인인증 정상모든 텍스트 필드에 정상 값 입력name:'홍길동'입력완료 후 다음단계 ..
[강의학습일지] UXUI 디자인 입문 4주차 강의 인터페이스 디자인 툴 (피그마, XD, 스케치)인터페이스: 다양한 디바이스 화면을 대응하게 됨 (벡터 방식)픽셀디지털 이미지를 구성하는 최소 단위의 점픽셀수가 많을수록 품질↑용량↑, 편집 시 픽셀수가 변해 손상 있음.jpg, .jpeg, .png, .gif (비트맵 이미지)벡터그래픽을 함수공식으로 표현한 것(좌표, 정수로 만들기)비트맵에 비해 용량이 적지만, 그래픽 모양을 좌표로 저장하기 때문에 복잡한 이미지를 벡터로 만들면 파일 용량↑반응형 디자인은 벡터로 제작.svg, .eps, .aiDev mode화면디자인을 하고 파일 그대로 코드변환을 할 수 있음엔지니어와의 협업이 용이해짐 Dev Mode: Design-to-Development | FigmaFigma's Development Mode helps..
[강의학습일지] Figma 활용법(1) 2, 3주차 강의 프레임과 그룹 그룹: 코드 블록 X, 개체를 묶을 때 사용(디자인 복잡한 그래픽). 그룹 내 개체가 따로 지정 X (같이 움직임)프레임: 코드 블록 O, 각각 블록 따로 지정 O (모든 것이 별개인 상태) 프레임그룹용도피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체다른 개체나 프레임을 넣을 수 있어서 컨테이너(Container)라고도 부른다.디자인을 정리하는 편의성을 위해 사용디자인이 복잡하거나 그래픽이 필요할 때 사용여러 요소를 한번에 컨트롤할때 사용코드인식코드 블록으로 인식 가능코드블록으로 인식하지 않음묶기묶을 프레임 선택 후 Frame selection (Ctrl+Alt+G)묶을 개체 선택 후 Group Selection (Ctrl+G)개체변경(스타일/크기)스타일 적용 시에 프..
[강의학습일지] UXUI 디자인 입문 3주차 숙제 - 테스트케이스 작성 + 디자인 QA로 발견한 이슈 공유하기 1. 테스트케이스 작성하기 (뱅크샐러드) 화면조건테스트케이스입력값기댓값테스트환경휴대폰 본인인증 정상모든 텍스트 필드에 정상 값 입력name:'홍길동'입력완료 후 다음단계 진행iOS에러형식에 맞지 않는 값 입력 (특수문자)name:'??'텍스트필드 아래에 오류 메시지 노출 '한글 또는 영문으로 입력해주세요'정상모든 텍스트 필드에 정상 값 입력number:'주민등록번호'입력완료 후 다음단계 진행에러형식에 맞지 않는 값 입력 (주민등록번호 앞 7자리)number:'주민등록번호' 아닌 값텍스트필드 아래에 오류 메시지 노출  입력한 정보를 확인해 주세요'정상모든 텍스트 필드에 정상 값 입력number:'000-0000-0000'입력완료 후 다음단계 진행에러형식에 맞지 않는 값 입력 (휴대폰 번호)number:'0..
[강의학습일지] UXUI 디자인 입문 3주차 강의 제품팀 최소 인력제품관리자 1명PM (Project Manager) 제품의 전략을 세우고 우선순위를 결정해 실행함PO (Project Owner) 전체 프로젝트를 관리함디자이너 1명엔지니어 2명조직목적조직=제품팀=스쿼드(Squad), 사일로(Silo)여러 직무의 사람이 모인 팀(기획, 개발, 디자인 등) 기능조직=챕터(Chapter)유사직무끼리 구성된 팀(전문성을 높일 수 있음) TF(Task Force)특정 목적을 위해 구성된 임시 조직 매트릭스 조직(목적조직+기능조직)주로 스타트업 린스타트업빠르게 만들어서 테스트하고 결과를 제품에 반영함 애자일짧은 시간안에 설계-디자인-개발-테스트로 빠르게 만들고반복 디자인 프로세스1. 기획(1) 문제 정의(2) 아이데이션(3) 프로덕트 스펙 문서 작성2. 디자인(1..
[강의학습일지] UXUI 디자인 입문 2주차 강의 디자인 씽킹논리적으로 제품을 만들 수 있도록 도와주는 프레임 워크(틀)가장 보편적이고, 빠른 시간에 논리적, 현실적으로 만들 수 있음데이터를 체계적으로 활용할 수 있음1. 공감하기 Empathy사용자: 제품을 쓰면서 회사에 돈을 벌어다 줌UX/UI 디자이너는 끈질기게 사용자를 조사하고, 분석해서 더 많은 사용자가 제품을 잘 쓸 수 있도록 디자인해야인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 하는 단계A-E-I-O-U 관찰법 (5)가상의 퍼소나를 (생각과 느낌, 말과 행동, 유저가 보게되는것, 듣는것) 생각하고 관찰하는 방법론 활동 Activities (행동, 반응, 제스처)환경 Environments (인터뷰하는 장소 주변 ex.집 / 유저가 ..
[강의학습일지] UXUI 디자인 입문 2주차 숙제 - 디자인 씽킹을 활용해 스카이스캐너 앱 개선 아이디어 도출 주제: 여름휴가때 가성비 좋은 해외여행을 떠나고 싶은 30대 직장인 여성1. 공감지도로 공감하기생각과 느낌 (걱정하는 것, 만족/불만, 요구사항)보는 것 (시간을 보내는 장소, 생활 환경)여행가고싶은데 어떤 여행지가 좋지?여행 테마는 무엇으로 잡아야 하지?휴가시즌이라 항공권 가격이 많이 비싸겠지?항공권이 저렴한 시기는 언제일까?최저가 항공을 모아서 보여주는데, 항공사에서 직접 예매하는것과 차이가 있을까?대중교통으로 출퇴근 할 때회사 책상에 유명한 여행지 사진을 붙여놓음핸드폰, 노트북 배경화면이 과거 여행지에서 찍은 사진임여가시간에 유튜브로 여행 브이로그를 찾아봄듣는 것 (관심,정보를 얻는 곳, 영향 주는 사람)말과 행동 (대화시주로사용하는단어,말과 실제 행동차이)TV 여행프로그램여행 컨텐츠 유튜브SNS에..
반응형

티스토리툴바