2022 UIUX portfolio

Page 1

Jasmine Lin

[ 林 玟 其 ]




CONTENT 06 關於我


08

24

38

UIUX 設計

平面設計

影片製作

CTPS 記帳小幫手

菱角月餅包裝

疫起大作戰宣傳

疫起大作戰

高中畢典主視覺

戰車 / 昆蟲槍設計

排球招生宣傳


林玟其

Jasmine Lin

Contact Info

􀒦 􀍘

􀎴 􀈌

6

+866 910628515

f34086074@gs.ncku.edu.tw jasmine.tw

github | jasmine-design


Resume 我是林玟其,我的個性活潑、積極負責、喜歡學習新 事物,願望是成為一位從容有趣的大人。 因為喜愛藝術設計並且享受解決問題所帶來的成就 感,兩年前我進入了成大工業設計學系,學習觀察與 歸納、發想與執行、以及與他人溝通合作的能力,美 感體驗亦成為了我人生中的信仰。 課餘時間我也廣泛探索,主動學習有興趣的資訊設計、 UIUX 設計相關課程,以成為一名懂得邏輯思考、同理 他人,理性兼具感性的設計人才。

2021.09 - 2021.12 排球隊 副隊長 成功大學 工業設計學系

2021.01 - present

小情設 公關組 成功台科北科聯合設計工作坊

2021.01 - 2021.05

2021.01 - 2021.05 Graphic Design

Product Design

UI/UX Design

Research

Mockup

Sketching

Research

Prototype

[ 軟體 ]

參與學生 羅技產學合作案

規設月 副召 成功大學 規劃與設計學院

技能

[ 設計 ]

經歷

Ideation CADing

Adobe Series

Programming

Photoshop

Arduino

Illustrator

Experience Design Indesign

Premiere

After Effects

Python

Product Design

Solidworks Keyshot

期末展 行銷長 成功大學 工業設計學系 2020.09 - 2021.06

教育

大學 2019 - present

成功大學 主修 工業設計學系 成功大學 修習 智慧運算學分學程 Avg. GPA 3.92

高中 2016 - 2019

科學工業園區實驗高級中學

語言 英文 中文

TOEIC 915 母語

7


UIUX

CTPS 記帳小幫手 疫起大作戰

8


設計

9


01

CTPS 記帳小幫手 記帳服務 linebot x liff

此 Linebot 記帳幫手,提供「有需求卻無法持之以恆記帳」 的人們多項輔助記帳工具,包括「記帳程式推薦、定時記

帳提醒、語音帳目記錄、社群群組分帳」等功能,不僅能

幫助大家找到最適合自己的記帳程式;在忙碌時支援您語 音記帳;設置每日提醒記帳;甚至有提供群組分帳功能,

幫助您快速地瞭解自身支出,有效消除任何中斷記帳的可 能性,讓您能輕鬆、持之以恆地快樂記帳!

製作時長|十個星期

共同合作|方柏翔 / NCKU ME 謝易成 / NCKU CHEM 陳怡安 / NCKU EV 賴怡蓉 / NCKU ACC

10


背景 記帳能幫助我們管控金錢動向,並且讓我們明白自己的消費習慣。然而,人們在記帳時常常

遇到「不知如何記帳」、「忘記紀錄」或「記帳程序麻煩」等問題造成記帳效果不佳,導致 半途而廢,無法有效分析開銷、改善消費情況等。

因此我們決定探討如何解決「持之以恆每天記帳」且「完整記錄每一筆帳目」的問題,進而 幫助人們達到管理金錢的目標。

設計流程 Discover

User Study

Insight

Problem Decomposotion

Pattern Recognition

Abstraction

Problem Defining Abstraction

Ideation

Design

Solution Proposal

Algorithm

11


User study 我們透過訪談與問卷,廣泛調查目前大眾對於「記帳」的習慣與看法。在此次調查中,我們一共收集 到 240 份問卷,年齡涵蓋 10 歲至 65 歲,以學生族群為主。而我們發現在這 240 份問卷中,大多數 人皆有過記帳經驗,然而能夠持續一年以上記帳的人卻佔少數。 有記帳經驗的 人佔總人數

85%

人們的行為模式

記帳的人佔總人數

35%

- 不同族群使用者的需求差異大

- 使用者使用電子支付不知道該如何記帳

- 使用者容易忘記記帳

- 使用者大多以手機記帳程式做為紀錄工具

- 77% 的人非當下記帳

- 使用者儲值悠遊卡不知道該如何記帳

人們記帳原因 知道各項花費比例 75% 有完整的紀錄

12

能夠持續超過一年以上

69%

減少不必要的開銷

44%

記錄生活小日記

38%

避免成為月光族

32%

- 使用者希望可以區分日常 / 一次性大筆開銷 - 多數無記帳意願的人認為太麻煩而不記帳


人們中斷記帳的原因 缺乏動機 認為記帳無法 改善消費模式 中斷記帳後缺少 持續記錄動機

個性問題

忘記帳目

記帳麻煩

懶得每天記帳

不知道該如何記帳

花過多錢不願面對

記帳程式不易使用

時常忘記要記帳

記帳程序過於複雜

無法當下記帳而 事後忘記金額

刷一卡通 / 信用卡

而不清楚實際金額 缺乏發票可以對帳

Insight 在調查後,我們發現到大多人記帳並非是為了迫切的省錢需求,更多人是基於希望瞭解自己的花費 情況,並且完整記錄生活而記帳。因此,當人們在幾筆帳目未記錄到、沒達到「完整帳目」後,便 會因無法準確分析花費比例等原因,而會失去起初的記帳動機,很容易就會放棄持續記帳。 導致無法持續記帳

個性問題

缺乏動機 導致記錄不完整

記帳麻煩

忘記帳目

13


設計成果

Linebot 記帳幫手

x

CTPS Assistant

􀝊

群組分帳小幫手

幫助使用者在出遊、日常購物時快速分帳,並且可以記錄群組成員的代墊項目,讓彼此的欠債 關係一目瞭然。使用者在群組內加入「記帳幫手」linebot 機器人,即可使用此功能。

主視覺概念 呈現成熟、質感風格,以紫羅蘭色與米黃色,整體視覺簡約,讓人們使用時舒適直覺無負擔。

色票 color scheme # cad361 # e8d075 # e9a64b

14

字體 font

Gen Jyuu Gothic Light 18 pt Gen Jyuu Gothic Normal 18 pt Gen Jyuu Gothic Bold 18 pt


在 Line 群組中加入「記帳幫手」,並點選群組功能中的「開始使用」進行身份註冊, 接著按下「前往分帳網站」便能進入 CTPS Assistant LIFF 頁面

15


demo 16


17


02

疫起大作戰

Pygame 桌機遊戲設計

以新冠疫情為主題的塔防遊戲,玩家必須考慮多個層面,衡量遊戲幣、塔防幣、 血量等多寡,作出選擇,以在關卡中建更多塔擊退敵人!「疫起大作戰」是個

讓人們在玩樂中,體驗到不同角色在面對防疫議題時可能遇到的困難,並幫助 人們理解並同理他人的遊戲。

製作時長|十個星期

共同合作|劉彥甫 / NCKU ES 簡羽晨 / NCKU ES 曾偉傑 / NCKU EV

負責項目|主視覺設計 / UIUX / 繪圖 / 動畫製作 / 程式協作 / 遊戲企劃與腳本協作

18


mac download

windows download

19


主視覺概念 「疫起大作戰」客群廣泛,為了讓大小朋友皆能輕鬆無壓力的遊玩,我們採用可愛生動的畫風,色 彩上選用活潑、豐富的橘黃藍綠色系,字體則選用 Otsutome 手寫遊戲感強的字體。

色票 color scheme # cad361

# 7bb3b9

# e8d075

# 576f73

# e9a64b

# 584035

字體 font

Otsutome_font Bold 18pt

Otsutome_font Bold 24pt

Otsutome_font Bold 30pt

20


確定

>>

>>

21


遊戲介面設計 血量

塔防幣

玩家能力

敵人進攻

玩家操控 通知訊息

敵人進攻進度條

遊戲畫面 demo 22

暫停 / 音量


量鍵

遊戲幣

防守堡壘

特殊能力

23


平面設 菱角月餅包裝

高中畢典主視覺

戰車 / 昆蟲槍設計

24


設計

25


01

包裝設計 x logo 設計

水中撈月餅舖

水中撈月餅舖

此設計是為菱角月餅的包裝,Logo 上融合了月

亮、菱角與菱角出生地—河水的意象,並搭配 古典字體,營造典雅、現代結合傳統的感覺。

26


貼紙 sticker

字體 font

筑紫 B 丸ゴシック レギュラー V / A 日文等幅 L:100%

Skia Regular V/A 0

L : 100%

色票 color scheme # 07233b

# d9a952

27


02

三折頁設計 x logo 設計

高中畢典主視覺

本屆畢業典禮主題為「粹煉」,取自純粹與精 煉,Logo 設計上因此選用珊瑚紅與湖水藍作為 主要配色,且繪製神秘、簡約的字體,並搭配 植物,呈現經過「粹煉」而茁壯生長的樣貌。

28


插圖 illustration

字體 font

Otsutome_font Bold 18pt Otsutome_font Bold 18pt 色票 color scheme # efd3bc

# b4d5ee

29


30


31


03

草圖設計

校園物件戰車

School Chariot Design sketch design, 2020

32


33


34


Insect Gun Design

sketch design, 2020

35


Insect Gun Design sketch design, 2020

36


37


影片製 疫起大作戰宣傳

排球招生宣傳

38


製作

39


01

40

動畫影片製作

疫起大作戰


疫起大作戰是一款 Pygame 遊戲(詳見 p.22) 為了吸引大眾的目光,我負責製作動畫宣傳片。 影片中主要描述了故事背景—地球村受到肺炎病 毒肆虐,使得鍵盤俠突變成檸檬酸民,政府與居 民因此被迫戰勝病毒。此外,影片也附上了一段 實際遊玩畫面與簡要的解說,讓大眾對我們的遊 戲有更鮮明的印象。

負責項目

導演 / 編劇 / 視覺設計 / 剪輯 / 音樂編排

41


02

影片剪輯製作

系排招生宣傳

成大工設女排近幾年碰上人數不足的問題,因此我與系排隊長一同討論、製作

了該部招生宣傳片。我們仿作第一季「排球少年」的片頭,並加入我們的練球 日常,營造熱血沸騰、愉快充實而溫馨的氣氛,期望能吸引更多學妹加入! (結果後來系隊收到六個學妹,但最後卻只剩一個學妹留下來)

(所以現在系隊只有五個人)(今年再放一次,希望能收到多一點人)

負責項目

協助導演 / 攝影 / 剪輯 / 音樂編輯

42


43


44


45


46


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.