Git Product home page Git Product logo

hci-prototype's Introduction

Assignment #7: Medium-fi 프로토타입 By ORACLE 팀

개요

본 Medium-fi 프로토타입은 low-fi 프로토타입의 인터뷰를 통해 
나왔던 피드백을 기반으로,개선 후 카카오 오븐을 통해 13페이지로 제작되었다.

개선점

가장 낮은 점수를 맞았던 직관성을 개선하기 위해서 벌집 모양을 통해 스택의 선정 유무를 알려주던 디자인을 제거했다.
또한 직관성과 연결성을 개선하기 위해서 초반에 전체적인 흐름을 보여주는 로드맵을 제시한 후에 
그 화면을 기반으로 스택들을 선택하게 하는 방식을 적용했다.
모든 기능들을 체계적으로 관리하고자, 모든 기능에 접근할 수 있는 홈 화면을 추가했다. 

프로토타입 설명 및 사용방법

1페이지:로딩화면-애플리케이션이 켜지는 화면
2페이지:홈화면-4개의 기능으로 접속이 가능한 홈
3페이지:빌드화면-애플리케이션 최초 사용 시 설정이 필요한 화면으로, 어떤 제품을 만들기를 원하는 지 설정을 해야 한다.
4페이지:스택맵-유저가 선택한 스택이 어떻게 연결되어 있는지를 보여준다.
5페이지:로드맵-스택의 로드맵이 그려져 있다. 
6페이지:스택선택화면- 현재 선택이 완료된 스택과 그렇지 않은 스택을 보여준다.
7페이지:엔진 비교 화면- 엔진을 비교해서 기능을 보여준다.
8페이지:Unity 엔진 설명 화면 - 하나의 스택의 특징을 보여준다
9페이지:스택 비교 화면 - 두 스택 중에 선택을 해야 할 때 두 특징을 비교해서 표로 정리해서 보여준다.
10페이지:Learn 로드맵 - 현재 선택한 스택들의 로드맵을 보여준다.
11페이지:Learn 보드 - 그 스택을 배울 수 있는 화면들을 보여준다.
12페이지:유튜브 참고 화면 - 유튜브 영상을 보여준다.
13페이지:Github 화면 - 추천 코드의 Github 링크를 공유해준다. 
본 프로토타입은, 게임 개발을 한다는 가정 하의 시나리오로 제작되었다.
1페이지를 지나 2페이지에서 4가지의 기능 중 선택을 할 수 있다.
각각 빌드 화면(빌드), 로드맵(로드맵), 스택 현황(스택관련), 배우기(자료) 네 기능에 접속할 수 있는 것이다.
빌드 화면에서는 본인의 희망 개발 목표를 선정할 수 있으며, 추후 스택 선정을 완료하면 스택 맵을 클릭하여 스택 맵을 확인해볼 수 있다.
로드맵 화면에서 엔진을 클릭하면 여러 엔진들을 추천받으며, 아래에서 이를 선택하거나 비교, 더 알아보기 등을 통해 각각의 기능을 수행할 수 있다.
스택 현황 화면으로 들어가면 현재까지 선택된 스택들의 유무를 알려주며, 이 화면에서도 선정된 스택을 눌러 다시 설정하거나 비교해볼 수 있다.
배우기 화면으로 들어가면, 로드맵을 다시 보여주며 여기서 UNITY를 클릭해서 들어가면 관련 유튜브 화면과 깃허브 화면으로 연동된다. 
모든 화면의 아래에는 홈화면 혹은 뒤로 가기 화면이 있어, 홈으로 돌아가거나 전 화면으로 돌아갈 수 있다. 

링크

Link: [Oranclc][ovenlink] [ovenlink]: https://ovenapp.io/view/RVH9T8uqXhZunx9ZTwORZxmO2ZkOkC7d#6qcOI

hci-prototype's People

Contributors

mosestiger avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.