Chia Ni Chen by Chia-Ni Chen

Portfolio Chia Ni Chen

2014

About Me 關於我陳嘉妮

Darina Chen

國立台北科技大學互動設計研究所碩士 National Taipei University of Technology Graduated 2011 · Master · Interactive Media Design

銘傳大學資訊傳播工程學系

學士

Ming Chuan University Graduated 2009 · Computer and Communication Engineering

1985年出生於台北市綜合求學經歷資訊與互動設計背景，成為一名視覺美學與程式撰寫能力兼具的跨領域人才並具有良好的溝通與邏輯能力，秉持著好奇心與熱情的態度，為使用者創造良好的互動體驗 Born in 1985 , Taipei Comprehensive study of information and interaction design that background experience to become a both programming and visual aesthetic ability to interdisciplinary talent . And have good communication and logic skills, uphold the serious attitude and passion to create a good interactive experience for users.

Mobile : 0975051363 / E-Mail : alohaelyse304@gmail.com

Design Expertise 專長互動設計/介面設計與研究/網頁設計/ 動態影像 Interactive design / UI & UX / Web Programing / Motion graphics

Planning is the base to achieve success with any project. Each case is detailed and profoundly separately studied, the result you may observe in each step of project.

Software Skill 技能 Illustrator , Photoshop , Flash , After effect Premiere , Visio , HTML , CSS .

Language 語言 Chinese ( Native ) , English ( Medium ) , Korean ( Elementary )

Experiences 經驗 1. 工業技術研究院醫療電子設備技術中心 2010 Industrial Technology Research Institute Medical Electronics and Device Technology Center 產學合作 - Industry Cooperation

2. 指尖創業有限公司 2010 Fingertip creative Corporation 實習 - App development & Planning intern

3. 勝華科技影像感測部門 (台北) 2011 Wintek Corporation 3D Camera & Smart Sensor Dept. Taipei 人機介面工程師 - Human Interface Engineer

4. 仁寶電腦工業股份有限公司互動設計部 (台北) 2012 Compal Electronics, Inc User Interaction Design Dept. Taipei 設計師 - Designer

Awarded 獲獎 2011 第八屆育秀盃創意競賽 - 工業設計類入圍 8th YSED Contest - Industrial Design Judges' Award

第八屆育秀盃創意競賽 - 軟體設計類入圍 8th YSED Contest- Software Design Judges' Award

微軟潛能創意盃 - 數位媒體類入圍 Microsoft Imagine Cup Contest - Digital Media Judges' Award

2012 加拿大亞裔活動協會藝術互動裝置競賽佳作 ACSEA Interactive Installation Art Contest Honorable Mention

Exhibitions 展覽 2010 字摸文字互動展 - 上上籤互動設計 / 台北數位藝術中心 Interactive design of Chinese character - Oracle / DAC , Taipei

飛墨之光 - 花影/ 台北數位藝術中心 Aura of the flowing ink - Flower Shadow / DAC , Taipei

第29屆新一代設計展 - 碰觸地球/ 世貿 29th Taiwan young designers - Touch earth / Taipei world trade center

Contents 內容互動設計

介面設計與研究

Interactive design

UI & UX

P6 - 13

網頁設計 Web

P14 - 37

P38 - 43

動態影像 Motion Graphics

P44 - 45

互動設計 Interactive design

上上籤 Oracle 2010 , Taipei Taiwan

2010年參與字摸文字互動展展出

中國文字精深簡煉，古代詩人利用這些多義的文字創作出意境悠遠的詩詞，藉此抒發個人情感與讚頌美好的事物。本作品正適逢中國年節，藉由傳統年節的氛圍領出中國特有的抽籤卜卦習俗，結合古代詩詞，利用互動技術及抽籤的行為，將其原有意涵轉化為現代來年運勢的解讀。 The project ”Oracle” uses the Chinese old traditional of divination , old poetry and it bases on the user experience that feel the connection of the poetry and user experience. This project uses the interactive technology of “RFID” , and it makes the different experience from the old traditional of divination.

Using Technology - Flash AS3 , AE , RFID with Arduino

互動設計 Interactive design

上上籤 Oracle 2010 , Taipei Taiwan

[ 共同創作 ] @ DAC

使用者使用情境 User Scenario

Animation Script Design

設計過程

Design process

互動設計 Interactive design

花影 Flower Shadow 2010 , Taipei Taiwan

2010年參與飛墨之光互動展展出

「萬物靜觀皆自得，四時佳興與人同」，人們對於自然界一景一物的細微觀察，皆可紀錄並分享生活中的點滴感懷。「花影」是黃光男校長2004年的創作，我們以此畫作做為創作素材，期望透過新媒體藝術的重新演繹，展現自然景物中微風吹拂，朵朵花兒隨風搖曳的景象，傳達給觀者身歷其境的賞畫經驗。欣賞畫作時，觀者對實體花朵吹氣的動作可使畫作花朵盛開舞動，隨著吹氣時數越長，花朵將會全數盛開，直至畫作完整呈現。 Contemplate the nature has its own pleasure, the delight are with all men who enjoy four seasons. Observation of nature in details can be recorded and shared in life. Based on the work entitled “Flower Shadow” (2004) by Preside -nt Huang, we intended to employ different approach to give a new interpretation of the original piece. Instead of a still pai -nting, the audience will find themselves feeling the breezing and watching flowers blooming before their eyes. By blowing air to tangible flowers before the work, flowers will be display -ed on the screen as long as the air continues to flow till flowe -rs in full bloom.

Using Technology - Flash AS3 , Arduino , Microphone

互動設計 Interactive design

花影 Flower Shadow 2010 , Taipei Taiwan

將繡球比擬作畫中物，內藏麥克風感測器，欣賞畫作時，觀者對實體花朵吹氣的動作可使畫作花朵盛開舞動，隨著吹氣時數越長，花朵將會全數盛開，直至畫作完整呈現。

使用者使用情境 User Scenario

設計過程

Design process Microphone Project

Computer

Arduino

介面設計與研究 UI & UX

多點觸控行動裝置之互動介面設計研究 -以「記事本」應用軟體為例 A Study of Multi-touch Mobile Device Interface Design–An Example of「Note」Application 2011 , Taipei Taiwan

2011年碩士畢業研究論文

本研究以探討手持式行動裝置記事本應用程式介面互動操作為研究重點，並以 iphone 為平台代表，針對使用者進行實際記事本應用程式之介面設計與使用性測試，期望透過此研究，提出適合於記事本應用程式介面設計之使用性原則，以提供未來記事本應用程式介面設計人員應用與參考依據。 This study aims to understand the usability of interactive multitouch control interface. This study started with investigating and selecting a representative application in the App Store on iPhone. A usability testing was then conducted to examine the selected interface to measure the performance and subjective opinion. Hope that through this study should be made suitable for the Note and provide the developmental future of reference to interface design principles.

Using Technology - Photoshop , Illustrator , Titanium , PHP

介面設計

Flow & UI Design Prototype Main

Layer 1 Add new tag (file)

Layer 2 Layer 3

Tag (file)

Set tag (file) name

Add new item

Layer 4 Layer 5

Add new note

Input content

Add Photo

Share to mail

Camera roll

Write mail

Select photo

設計過程

Design process

Develop a prototype Use Titanium to build native apps.

Finally the new interface was also evaluated in terms of usability to identify the usability principle of interactive multi-touch interface.

介面設計與研究 UI & UX

社交伴侶 Social Mate 2013 , Taipei Taiwan

現今行動裝置已成為社交的必備工具，然而官方的社群軟體，並無法滿足重度使用者在不同情境下的社交需求。 SocialMate有專屬的硬體滾輪，在任何狀態下可啟動環狀選單，提供如我的頁面、我的社團、熱門事件，..等捷徑與分析資訊，即時與當下關心的人、事、物、社團直接互動與訊息同步。更有聰慧貼文功能，快速發出精彩豐富的附圖貼文，隨時隨地抒發心情。 Social Mate 的軟硬體整合方案，滿足使用者在社群生活的全方位需求。 Today's mobile devices have become an indispensable tool for social, but the official community software can't satisfy the heaviest users in different contextual of social needs. Social Mate has a dedicated hardware wheel that perfect for one hand holding scenario, The Contextual Ring Menu offers instants social focus switching such as "my identity","my circle of friend," "hot news" ... and other shortcuts and analysis of information, people instantly with the current concern and things, societies interact directly synchronized with the message and more intellig -ent of automatic location detection to quickly post. Social Mate integrated hardware and software solutions to satisfy the needs of all users in the community life.

Using Technology - Photoshop , illustrator , Flash Platform - Android object - Teenager

設計理念

Rationale Of Design

Feature * Instant Social focus switching * Tailor made theme for groups * Easy express yourself

Social Mate has a dedicated hardware wheel that perfect for one hand holding scenario

情境

Scenarios

[ Study ]

Teenager’s Behavior Feature

Social First Social Connect Social Identification

介面設計 UI Design

Real-time sync up with online FB groups & direct interactive with groups

Personal page

Group setting page

Group member page

介面規劃 UI Flow

Start here Setting

Group setting

Theme

Theme1

Group theme1

Group1

Group setting

Group2

Facebook logout

Group3

Password

Group4 Group5

Tap to select this theme and go back home

No account? Please Create Facebook Account.

Cancel

All mode

Have vertical scroll bar (TBD) Dropdown to reload I’am very sad...

Group mode Have vertical scroll bar (TBD) Dropdown to reload

15:00 15:00

25°c

Group Name Face to face Share My post I'm so stupid. I left my notebook in Monty....Nevermind..... 5

Face to face Share

Topic name

Progressing...

I'm so stupid. I left my notebook in Monty....Nevermind..... Leo

OMG~~I'm so excited and nervous at the same time!! This will be a fun quarter! Leo

Fan Collection Fan page name This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description.

http://google.com

Google website

Leo 10

Katy Perry

BOA

Download Teenage Dream

BOA OFFICIAL FACEBOOK

Fan page name This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. Fan page name This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. Group Wall

Only nearby

Mamber name Member description... Content Title This is content. This is content. This is content. This is content. This is content.

Part of flow

Mamber name Member description...

硬體與軟體定義

Wheel Behavior Define

I’am very sad... Fan Collection

15:00 25°c

Face to face Share My post

APP

I'm so stupid. I left my notebook in Monty....Nevermind..... 5

Big Events

I'm so stupid. I left my notebook in Monty....Nevermind..... Leo

OMG~~I'm so excited and nervous at the same time!! This will be a fun quarter! Leo

http://google.com

Google website

Leo 10

I’am very sad...

Katy Perry

BOA

Download Teenage Dream

BOA OFFICIAL FACEBOOK

I’am very sad...

15:00

25°c

15:00

25°c

Group Name

All mode

Face to face Share

My post

I'm so stupid. I left my notebook in Monty....Nevermind.....

I'm so stupid. I left my notebook in Monty....Nevermind..... 5

Face to face Share

Topic name

Leo

Fan page name

Leo

This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description.

Google website 5

This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description.

BOA

Download Teenage Dream

BOA OFFICIAL FACEBOOK

http://google.com

Google website

Leo 10

Fan page name

Katy Perry

OMG~~I'm so excited and nervous at the same time!! This will be a fun quarter!

Fan Collection

http://google.com Leo

I'm so stupid. I left my notebook in Monty....Nevermind.....

OMG~~I'm so excited and nervous at the same time!! This will be a fun quarter! Leo

Progressing...

I'm so stupid. I left my notebook in Monty....Nevermind.....

Katy Perry

BOA

Download Teenage Dream

BOA OFFICIAL FACEBOOK

Fan page name This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. This is Description. Group Wall

Only nearby

Mamber name Member description... Content Title This is content. This is content. This is content. This is content. This is content. Mamber name Member description...

1. My group

I’am very sad...

15:00

2. My host group

25°c

3. big events Face to face Share My post I'm so stupid. I left my notebook in Monty....Nevermind..... 5

Big Events

5. Most active with you

I'm so stupid. I left my notebook in Monty....Nevermind..... Leo

OMG~~I'm so excited and nervous at the same time!! This will be a fun quarter! Leo

4. What's hot

6. Who nearby you

http://google.com

Google website

Leo 10

Katy Perry

BOA

Download Teenage Dream

BOA OFFICIAL FACEBOOK

Cycle Oder by number

Part of define

介面設計與研究 UI & UX

天氣穿著 Weather Fit〬 2013 , Taipei Taiwan

天氣穿搭應用軟體 Weather outfit application

Using Technology - Photoshop , Illustrator , Flash

Feature * Provide clothes recommended through weather * Introduce suitable of local outfit * Record yourself anytime

設計理念

Rationale Of Design

NUUK

HANOLULU

TAIPEI

LONDON

紀錄穿搭旅行帶甚麼衣服好呢 ?

介面互動設計

UI interactive Design

[ Study ]

User Behavior Feature Of UI

Show local clothes outfit

Setting

information

current status - Cloudy

Swipe to change city Clothes recommended Marquee display Scrolling to see My dresses

Touch icon to show weekly Shoot to record

介面設計 UI Design

介面設計與研究 UI & UX

商務筆記 ACURA Note 2013 , Taipei Taiwan

現今，移動工作者始終帶著筆電進行無數的商務旅行。它具備高度效率的打字工具，但並不是完美的移動伴侶。也許筆可以成為移動工作者主要投入的生產力? Now a day, Mobile Workers always carry NB in countless business trips. It is good for efficient typing but not perfectly as mobile companion.Can Pen as main input for mobile worker productivity ?

Using Technology - Photoshop , Illustrator

設計理念

Rationale Of Design

1. 移動工作者需要快速啟動生產力工具 2. 需要精準有效的控制 3. 便利的記事軟體

情境

Scenarios

[ Study ] Presentation

Key Scenarios for Mobile Worker

Discussion

On-the- go

Your desk

介面設計 UI Design

介面規劃 UI Flow

New note First page

Memo

Calendar

8 / 28 / 2013

Memo1____

一

2013 August 二

三

四

五

六

Memo1____

日

Memo2____

Swip

__Memo3

My Note1

__Memo3

2013-08-28 wednesday

__Memo4

用筆拖移時左邊有Memo區提示，把框選的文字拖進Memo

Link to Weekly Project

Transition

Pinch in to List View

Note 結合canlendar / Write Keyword

8 / 28 / 2013

My Note

provement, business change) is divided into stages or phases, separated by gates.

It’s weekly note,would you like to link to Weekly Project ?

Weekly Note

50%

15%

35%

ly R ough

Weekly Note 5

R ough

35%

15%

手動Link

AIO Flies List

Acura

Weekly Note 8 / 28 / 2013

My Note

35%

15%

50%

R ough

ly 35%

15%

8 / 28 / 2013

Weekly Note 5

A Phase–gate model, also referred to as a phase–gate process, is a project management technique in which an initiative or project (e.g., new product development, process improvement, business change) is divided into stages or phases, separated by gates.

50%

15%

Link

8 / 28 / 2013

Manual Link Project

My Note

provement, business change) is divided into stages or phases, separated by gates.

30 Aug 2013

50%

R ough

35%

50%

R ough

15%

50%

R ough

Write & Draw

用筆(按Menu key) 框文字

Weekly Note

8 / 28 / 2013

Weekly Note

8 / 28 / 2013

Weekly Note

8 / 28 / 2013

Weekly Note

35%

15%

50%

R ough

完型

List View

Transfer to Word file

8 / 28 / 2013

Weekly Note 5

8 / 28 / 2013

Weekly Note 1 8 / 30 / 2013

Weekly Note 5 A Phase–gate model, also referred to as a phase–gate process, is a project management technique in which an initiative or project (e.g., new product development, process improvement, business change) is divided into stages or phases, separated by gates.

Weekly Note 2 8 / 30 / 2013

35%

Weekly Note 3

50%

8 / 30 / 2013

Transfering...

15%

R ough

Weekly Note 4

35%

50% 15%

8 / 30 / 2013

Roughly Weekly Note 5 8 / 30 / 2013 W

Calendar

Memo

2013 August

一

二

三

四

五

六

日

Memo1____ 33

My Note1 2013-08-28 wednesday

Memo2____ Scrolling

__Memo3 Event1 & Files

直接點擊新增新事件

__Memo4

介面設計與研究 UI & UX

智慧手錶 Remora 2013 , Taipei Taiwan

現今，智慧型手錶有三個主要讓人失望的點 1. 充滿累贅的應用程式 2. 太多步驟與層級 3. 很差的美學質感而 Remora智慧手錶提供簡單、容易與時尚 Today, The Smart watch top3 users' disappointments 1. full of redundant apps. 2. Too busy steps and layout. 3. Poor aesthetic quality. The Remora provide Simple,Easy and Fashion

Using Technology - Photoshop , Illustrator

設計理念

Rationale Of Design

“ Scenarios Based ”mode switch design let user quick jump into their current usage scenario. The variety color code design for each mode helps user to quickly identify the mode differentiation.

情境

Scenarios

[ Study ]

Key Scenarios for Users

介面設計 UI Design

Watch management

介面架構

UI Architecture

APP

網頁設計 Web

Personal Web 2008 , Taoyuan Taiwan

2008年第一次做自己的網站，學會如何從無到有建立，並學習CSS與HTML 切版，開始對互動產生熱情的契機，也對後來研究所建立實驗原型幫助甚大。 2008 for the first time to do my own website, learn how to build website from nothing and Learning CSS and HTML , not only began a turning point to generate enthusiasm for interactive , but also help in building an experimental prototype at the Institute.

Using Technology - HTML , CSS , Javascript

設計風格

Design style

網頁設計 Web

Brainstorming Toolkit 2012 , Taipei Taiwan

腦力激盪工具包(Brainstorming Toolkit) 是一個將實際腦力激盪過程數位化的線上服務軟體; 而方便快速的貼心服務, 能夠讓你只專注於產生好的創意點子。感謝現今發達的網路科技以及雲端服務 , 考慮到分時分地的合作需求，腦力激盪工具組能打破了時間、地方的限制,不論你身在何處，都可以使用它來進行有效率的遠端創意激盪。在腦力激盪的過程中,我們提供了五個主要的貼心服務, 包括點子發想、整合發表、點子分類、點子票選以及完整的點子報告匯出;這些重要的功能都是能夠幫助我們有效率地進行創意蒐集、收斂以及整合; 另外友善的專案管理介面統合了與會者邀請與行事曆功能，讓遠端創意會議不在是窒礙難行腦力激盪工具組可讓創意的產生，更加容易並有趣。 Brainstorming Toolkit is an online service that can digitize the real process of brainstorming, therefore you just need to focus on thinking great ideas. Thanks for cloud and internet connection, the remote brainstorming has been included in the consideration for multi-time zone collaboration. When during the brainstorming processes, the service provides the features which can help user diversifies and converges ideas such as taking notes, grouping ideas, and voting ideas...etc. With the process finished, all the posts can be the final report as different format and be downloaded for further reference. Brainstorming Toolkit can let brainstorming more easily and fun.

Using Technology - Photoshop , illustrator , FlashAS3.0 , PHP

使用情境 Use Scenario

介面設計 UI Design

介面規劃 UI Flow

Part of flow

動態影像 Motion Graphics

影像作品 Video 2012~2014 , Taipei Taiwan

1. Social Mate 2. Augment 3. ACURA_Note The 3 videos all of attend IF Design Awards contest

Using Technology - AE , Flash , photoshop , Illustrator

所有影片

All Of Video

Social Mate

Augment

ACURA

Contact聯絡互動設計

網頁 Web

Interactive design

動態影像

介面設計 & 研究

Motion Graphics

程式設計

UI & UX

Programing

陳嘉妮

Darina Chen

Mobile : 0975051363 E-Mail : alohaelyse304@gmail.com

Thank you