Page 1

P O R T F O L I O YI HUA,LEE

2016-2018


R

e

s

u

m

e


李依樺 0 9 7 6 - 7 3 7 - 3 5 5

1997.05.31

ievaleei@gmail.com

桃園市中壢區榮安三街 137 巷 35 號

ievalee2007

E d u c a t i o n 元智大學-資訊傳播學系科技組

Experiences 2017.12

輔仁、元智、銘傳三校聯展-讀書 APP 穿戴式裝置期末展-藍芽音響鞋 人機互動期末專題-食在難選 APP

2016.12 宿營-活動長 2016.07 資傳、資工、資管聯合迎新-隊輔長 2016

補習班工讀

S k i l l s 開發平台 Unity Android Studio Brackets

程式語言 CSS JavaScript C/C++/C# Jquery JAVA

設計軟體 Indesign Illustrator

H

o

b

A b o u t

M e

平常喜歡天馬行空的想像,想要利用所學做出回饋社會 的產品,藉由了解使用者需求,發想創新概念。另外,我也 喜歡接觸解謎類型遊戲,有別於其他戰鬥刺激的遊戲,它有 著邏輯與思考,更容易讓我依循著線索而沉浸在遊戲裡。 大學期間的專題參與 APP、網頁、遊戲以及互動裝置, 主要負責企劃發想及程式撰寫,除了增進程式能力外,也學

b

i

t

s

到如何團隊合作,讓作品更完美。除此之外,迎新活動及宿 營 分 別 擔 任 隊 輔 長 及 活 動 長, 讓 我 學 到 如 何 與 其 他 組 別 溝 通,並帶領組員一起圓滿完成活動。 空閒時間喜歡打排球、玩音樂,對我來說排球與樂團不 僅僅是休閒活動,更是訓練自己勇於表現,從容不迫地去面 對壓力。 希望未來能利用所學,用更貼近使用者的角度,創造出 產品或遊戲,讓人們在忙碌的生活中,不僅能更便利,也能 有片刻休息。我會繼續努力,朝這個方向前進!


C o n t e n t s


Web Design

1-13

APP Design

14-31

Game

32-39

Wearable Device

40-47


W e b

D e s i g n


01 Web Design

星座網站 「星座」一直是人們關注的題材,很多人常常參 考 星 座 運 勢 或 與 其 他 星 座 配 對 指 數, 除 此 之 外, 談 話 性 節 目 也 會 播 出 星 座 相 關 內 容。 在 星 座 應 用 的 如 此 廣 泛 之 下, 突 發 奇 想 地 想 要 做 一 個 功 能 與 美 觀 兼 具 的 星 座 網 站, 讓 使 用 者 可 以 在 網 路 上 查 詢 個 人 運 勢及星座配 對 。 我們在線上觀察到的星座網站,發現排版不佳、 可 讀 性 不 高 等 缺 點, 若 想 要 看 到 更 精 確 的 預 估, 還 得付錢才能 得 知 。 首頁 這 個 網 站 是 利 用 H TM L 及 C SS 撰 寫 , 互 動 及 動 畫 功 能 則 是 利 用 J que r y 完 成 。 希 望 可 以 帶 給 使 用 者 新 穎的體驗。

1


01 Web Design

滑鼠移上去會顯示該功能

2


01 Web Design

選擇星座

配對頁面之操作指南

選擇星座框 使用陣列儲存星座名稱及圖片 src,當滑 鼠 hover 上去,圖片會從灰色置換成彩色, 並且顯示 title。

3


01 Web Design

選擇星座程式碼 運用置換圖片,把使用者選擇的星座圖示顯 示在男、女頭像的旁邊。

配對結果 讀取配對 txt 檔 整理好配對文件,文件名稱利用數字辨別,利用讀取 檔案的方式把文件顯示在網頁上。 4


01 Web Design

選擇星座及拖動運勢項目

運勢頁面之操作指南

運勢項目拖動 把 運 勢 項 目 設 定 為 不 可 重 複 拖 動, 利 用 localStorage 儲存使用者選擇的星座,當網 頁被關掉再開啟,會是上一回選擇的結果。

5


01 Web Design

運勢結果

運勢顯示 整理好的資料彙整成 txt 檔,利用讀檔方式把運勢內 目錄 容顯示於網頁中。由於資料太多,於是我們寫成一個 利用 animate 寫旁邊目錄, function,便於後面程式呼叫。 滑鼠移上去會彈跳出來, 6

移開會彈回去。


01 Web Design

右上角的問號圖示,提供使用者操作指南,如果忘 記該怎麼使用,隨時可以點選問號。點選其他地方 即可關閉。

7


02 Web Design

為了與你相遇 平時走在路上,都會發現流浪貓狗在馬路上逃竄,風吹 雨打之中依然翻著垃圾桶尋找食物來源。有誰可以在風 雨之中給他們一個家呢? 我們上網找尋收容所之家的網站,有收養、送養、關於 我們等等資訊,功能幾乎都大同小異,於是我們想做出 一個類似網站,不過有新增一個「回娘家」功能,讓曾 經待過收容所的寶貝及飼主可以回來做交流。希望利用 這個網站可以讓流浪動物有更完善的保障。 首頁

「為了與你相遇」利用基本的 HTML 及 CSS 撰寫,圖片 及 LOGO 則是利用 AI 繪製,簡潔明瞭的介面讓使用者一 目了然,操作更上手!

8


01 Web Design

首頁

幻燈片程式碼 首頁的照片會輪播,利用陣列把圖片名稱存取,每兩秒圖片會置 換,呈現方式為 block,利用一個 div 包著。

9


02 Web Design

認養頁面

10

送養頁面


02 Web Design

支持我們

關於我們

11


02 Web Design

回娘家 「回娘家」是我們主要發展的功能,讓這個網站不單單只是領養網站, 還可以變成聯絡感情及交流的地方。如果未來發展下去,希望可以變 成一個社群網站,讓有興趣想養寵物或是關懷流浪動物的人可以有個 平台互相聯繫。

12


02 Web Design

Read more

那 時 候 學 網 頁 技 術 尚 未 成 熟,「Read more...」 我 們 製 作 連 結,點選後會跳選另一個網頁,把完整文章顯現出來。

13


A P P

D e s i g n


01 APP Design

Snake 貪食蛇這款遊戲是我小時候非常著迷的遊戲,常常下課 就會跟媽媽要手機來玩;小精靈這款遊戲則是有看別人 玩過,覺得畫風很可愛,黑色的背景配上鮮豔的顏色, 玩起來有不自覺的刺激。在發想我的第一款手機遊戲的 時候,我馬上想到這兩款遊戲來結合。 玩家要控制小精靈去吃食物(黃色圓點代表),玩家要 避免碰到紅色及藍色圓點,這兩個圓點會不定時加速及 隨意亂跑,玩家反應要快。 這款手遊是利用 APP Inventer 完成,介面設計則是利用 AI 繪製。 撰寫第一款手遊,APP Inventer 是一個對於新手 首頁

來說很好上手的工具,用拼圖排一排程式就可完成。

「Snake」LOGO 是請朋友幫我設計,下 面的小字是遊戲規則,按下「START」 即可開始遊戲。

15


01 APP Design

加分食物 食物都會隨機出現在範圍內,吃到加分食物之後會有音效播放。另外兩

遊戲畫面 上下左右分別是控制小精靈的方向, 按下去的同時手機會震動及發出音效。

16

種食物也是依照此方式完成。


01 APP Design

最高分程式碼 使用微資料庫儲存遊玩紀錄,設 high score 變數來儲存多筆資料中的最高分。

結束畫面 結束畫面會有當前分數及最高紀錄, 按下「重玩」就會跳回遊戲畫面。

17


03 APP Design

讀書搖搖杯 現在科技日新月異,人手不離手機,常常做事無法 專心,訊息、電話、通知一出現,專注力就會被打斷。 我們參考「forest」及「麥當勞報報」這兩款 APP, 利用提升專注力及優惠券等特點,開發這款「讀書搖 搖杯」。目標族群主要給學生使用,因此初始倒數時 間設計以一堂課 45 分鐘為準,使用者可以隨意更改。 簡潔的介面,讓使用者一目了然的使用,設定倒數 完畢後,就會有手搖杯飲料優惠券,利用優惠券的利 益讓使用者更有動力堅持下去。目前優惠券是寫死的, 希望之後與廠商洽談成功,可以讓這個 APP 更完善 。 設定時間 這 款 APP 利 用 Android Studio 開 發, 並 且 在 期 末 一開始以 45 分鐘為基準,滑動書本

hackathon 獲得「最佳介面設計」。 後時間字樣也會跟著變動。

18


03 APP Design

體感偵測 手機搖動過後倒數計時才會開始。當使用者甩 動速度大於甩動設定數值時,代表使用者開始 甩動手機,就會進入到倒數計時程序。

搖動畫面 設定完之後,使用者搖一搖手機後

倒數計時

會開始倒數,同時手搖杯的動畫也

使用者設定的時間都會轉成分鐘為單位,當倒數計時完成之

會開始上下動,直到倒數完畢為止。

後,會 delay 三秒,再跳到優惠券畫面。

19


03 APP Design

攔截視窗

攔截程式

使用者按下返回鍵,會有攔截視窗

捕捉返回鍵,設定視窗樣式及文字。

提醒使用者再堅持下去就可以得到 飲料優惠券!

20


03 APP Design

優惠券

上架

倒數完畢之後,會主動跳出優惠券, 點選「BACK」後會再跳回設定時間 的畫面。

21


03 APP Design

獲獎照片 此作品獲得最佳介面設計,並被推薦參加三校聯展。感謝我的組員們,一起同心協力完成這個作 品,希望未來持續改良,跟企業廠商合作,讓這個 APP 擴大發展。

22


03 APP Design

展覽 輔仁、銘傳、元智三校科技聯展在輔仁大學展出。

23


04 APP Design

食在難選 午餐時間,不曉得學校附近可以吃什麼,有選擇障 礙的我常常思考很久,有些常常吃的小吃都會吃膩, 於是我們想到可以做一款 APP 來幫助人們解決吃飯困 境,隨機挑選的功能讓使用者可以更快篩選。 我們以元智為主軸,蒐集附近的美食小吃或餐廳, 讓就讀元智的學生或是剛好路過這附近的人可以利用 這個 APP 參考。 程式會隨機跳出食物選項,讓使用者以最快速的方 式決定,同時也會顯示這家餐廳的資訊及評論,除此 LOGO

之外,手機定位系統會隨之開啟,來計算此刻使用者 的所在地與餐廳距離,並出現在畫面中。

24


04 APP Design

Splash 程式 利用 animation 語法製作 splash,倒數三秒過後會跳轉到下一頁。

25


04 APP Design

26

商家資訊

選擇時間

選擇完時段後,系統會隨機跳出該

LOGO 顯 示 完 之 後, 會 跳 到 這 個 頁

時段分類的餐廳,若使用者不喜歡,

面,使用者可以選擇要適合白天吃

系統可以再重新隨機產生。

的內容或是晚上。


04 APP Design

商家資訊 再 往 下 滑 會 有 商 家 位 置 及 評 價,

map 按 下「GO」 之 後 會 跳 轉 到 Google 利用「Google map」API 寫的,座標透過「Google Earth」查詢,有幾家店 map,可以導航帶你到餐廳去。 就會做幾個 Screen,再分別把座標放上去。

27


02 APP Design

Tic Toc Toe 「井字遊戲」許多人都玩過,小時候常常在桌上畫個井 字號,就可以開始玩。於是我想要把這小時候的回憶變 成手機遊戲,讓使用者重拾小時候的時光。 把它做成手遊時,才發現要注意的細節有很多。從一開 始的邏輯思考到變成程式語言,費了我不少功夫,版面 美化也規劃滿久。但做出來的時候有滿滿的成就感。 這款遊戲利用 Android Studio 平台開發,也是因為寫它學 會了 Java。 遊戲畫面 中間是九個按鈕,從圈圈玩家開始 下第一步,「Replay」要等到分出勝 負或全盤下玩才能按。

28


02 APP Design

O 玩家獲勝

X 玩家獲勝

平手

29


02 APP Design

按鈕放入 layout

按鈕文字

利用 Array List,把 button 儲存至 layout 裡面。之所以會 i*3+j

圈叉利用程式改變,不是圈圈就是叉叉的概念,就不用每個按鈕 setText。

是因為陣列數字的排法,推出一個公式,得以 123、456、 789 橫向排法存入。

30


02 APP Design

判斷輸贏 把會贏的可能一一列出,再轉換成程式語言,用最基本的方式判斷哪一方會 贏、哪一方會輸。當某個按鈕被按下,利用改變透明度的方式告訴使用者不能 再按下該按鈕。

31


G

32

a

m

e


0 1

G a m e

逃跑監獄! 這是一款警察與犯人玩你追我跑的遊戲,當兩個角 色相遇之後可以攻擊對方,分別是拳打及腳踢。兩方 對打過後,若是警察把犯人打倒,犯人就無法順利逃 脫,反之警察若被打倒,犯人就會順利脫逃出去。 場景及人物是利用 maya 建置,程式則是利用 C# 撰 寫,用 Unity 平台開發完成。希望在未來可以把這款遊 戲做得更精緻,若能兩人使用不同電腦對戰連線一定 遊戲開始畫面 當玩家按下「START」之後,就可以進到遊戲進行遊玩。

會更有趣。

33


0 1

G a m e

奔跑 玩家兩個人開始各別控制警察與犯人,警察利用「WSAD」鍵控制奔 跑方向,犯人則是利用鍵盤的上下左右控制。

攻擊 擔任警察玩家按下「R」即可腳踢、按下「F」即可拳擊;犯人按下 「space」即可拳擊、按下「shift」即可腳踢。兩個動畫效果是一樣的。

34


0 1

G a m e

影片 demo 點選影片標示即可觀看!

監獄場景

35


02

Gam e

Stitch Puzzle 在國中時期,很喜歡史迪奇這個卡通,覺得史迪奇古靈 精怪的個性跟我有些許類似,常常會有鬼點子產生。這 個角色的畫風及舉手投足都讓我覺得很可愛,有一陣子 看到他的玩偶都會搜刮一空呢 ! 之所以會做拼圖遊戲是因為我很喜歡玩動腦解謎遊戲, 不太喜歡刺激類型,於是我設計這款網頁遊戲,除了滿 足我自己,也讓跟我同類型的人受惠,無聊時可以解解 悶,打發時間。 這款遊戲是利用 HTML、CSS 及 JavaScript 寫出來的,一 開始畫面

36

共有三個關卡,越往後程度越難。


0 2

G am e

hint 圖片顯示

第一關 計 時 器 15 秒, 圖 片 分 割 數 3*3, 較 為 簡 單。 一 開 始 倒數計時 進去關卡,會有五秒的原圖顯示,下面有一個 hint 按 鈕, 如 果 玩 家 突 然 忘 記 圖 片 怎 麼 完 成, 可 以 按 一 下 hint, 三 秒 過 後 hint 會 消 失, 另 外 還 有 移 動 步 數, 玩 家可以參考自己在這一關移動了多少。

37


02

Gam e

第一關 LOSE 若玩家沒有在時間內完成,就代表輸了,網頁會跳出 第一關 WIN

通知“you lose!”,按下確認後會重新開始。

當 玩 家 獲 勝 之 後, 會 跳 出 通 知 告 訴 玩 家“You solved it!”,按下「確認」之後,會自動跳往下一關。

38

檢查拼對函式


0 2

第二關 計時器 30 秒,圖片分割 4*4,難度適中。

G am e

第三關 計 時 器 60 秒, 圖 片 分 割 5*5, 由 於 5*5 的 圖 片 分 割 比較小塊,所以第三關設置一開始進去的顯示原圖有 10 秒。

39


Wearable Device

40


01 Wearable Device

Blue Shoe 音樂充斥著我們的世界,對於跳舞的人來說更是重 要。舞者們透過自己的身體傳達音樂的訊息,有音樂 的助興,表演的氣氛也會隨之高漲。 但傳播音樂的音箱,好音質很貴、訴求大聲又很重。 因此我們研發出這雙鞋子,把「藍芽音響」與「鞋子」 結合,變成一雙可以跳舞自在的音響鞋子,當整個舞 團一起練舞或表演的時候,穿上它,就不必再帶很笨 重的音箱了! 鞋子外觀 我們利用「富 X 牌」的鞋子當作樣本,鞋底套用 3D 列印模型, 一層一層黏上去。電路板放在鞋底裡面。

41


01 Wearable Device

電路板

鞋墊

拆解市售音箱,得到電路板及電池。

利用蜂巢狀製作鞋底,讓鞋子柔軟度更好,

量好電路板及電池尺寸,並且把線路所需

不會太硬。右上角黑色的鞋底是第一次試

空間挖洞,讓整個電路板跟電池可以大小

印,由於密度太低,鞋墊太軟,我們怕無法

剛好的嵌進去。

保護電路,於是印了第二次白色款,讓電路 可以安穩的嵌在裡面。

42

挖洞


01 Wearable Device

連結揚聲器

當鞋底與電路板都嵌合完成時,我們把揚聲器的線路往上拉至鞋的背面, 並焊接揚聲器,左中右各一顆,讓音樂更立體!

電路擺放

鞋墊結合

43


01 Wearable Device

鞋子側面 四個按鈕由左而右:「上一首」、「下一首」、「大聲」、「小聲」。

鞋子後方 充電孔位於後方,充電線插進去之後會亮紅燈,代表充電中。不亮

44

的時候代表充電完成。


01 Wearable Device

影片 demo 點選影片標誌即可觀看!

穿上的樣子

這雙鞋的大小適合平常穿 22 半或 23 的人,穿起來較舒適,走路跳 躍都沒問題!

45


01 Wearable Device

海報設計 海報裡說明我們的製作過程以及使用者調查。

46

使用者情境


01 Wearable Device

期末展覽 展桌放著我們實驗中的失敗品,還有成品、酷卡及貼紙。

酷卡 & 貼紙 47


P O R T F O L I O YI HUA,LEE 2016-2018

YI HUA,LEE-Portfolio  
YI HUA,LEE-Portfolio  
Advertisement