作品集 by penguin-Liu

PORTFOLIO 2019-2022 劉品君 Penguin Liu

Design舉辦的設計課程，

劉品君經歷技能除了繼續透過線上課程自主學習來增進專業知識與技能，也希望能藉由平面設計、介面設計等相關工作來累積實務經驗與實作能力。期待能在深入了解這些產業的同時，更加明確自己想走的路。國立臺北科技大學 | 互動設計系外表文靜，但其實腦袋內有很多小劇場，目前正在經歷一段自我探索的旅程。到處走走、看展來尋找靈感，學習專業知識與技能，期望能設計出美好與實用兼具的作品。利用假日參與Nothing

學習Ai、Ps技巧。於2019年暑假參與北科大主辦的Coding365 數位創新學院，從中學習到Html、CSS，也開啟了對於網頁設計的興趣。主要負責網頁設計的工作，在這段期間學習到如何從用戶角度去看待一個網站並進行設計。也在此期間接過一些去背、依照文案尋找適合的圖並進行排版的任務。於2021年暑假參與教育部青發署主辦的工作坊，了解設計一個介面，其實是需要在許多不同經歷背景的人們的討論下，才能成為一個符合大眾需求的好介面。 Nothing Design 設計營北科大 Coding365 德和月國際科技股份有限公司設計部門實習生創新思考UX、UI青年協作工作坊未來規劃關於我 Penguin Liu penguin0983@gmail.com 0983-710-211 1

目錄 01 - 日常插圖 - 海報風格排版 - Banner風格排版 - 介紹手冊 P.4-5 P.6 P.7 P.8 平面設計 02 - 疫同去郊遊 - Knitting Needle - Hotdog ! P.10-15 P.16-21 P.22-27 介面設計 03 - 專題介紹影片 - 動態圖像設計 - 歌詞動態 P.29 P.30 P.31 多媒體設計 2

平面設計

插圖以Illustrator繪製之賀卡與插圖 4

以Photoshop合成之插圖 5

海報風格排版 6

Banner風格排版 7

介紹手冊為遊戲專題製作一份「導覽手冊」，讓玩家在體驗前可以先了解故事背景、操作方式或觀賞遊戲的介紹影片。背面則是遊戲中精采畫面的截圖，並搭配俏皮的對話方式，帶玩家認識這款遊戲。 8

介面設計

期末專題負責內容前期發想 Wireframe Mockup 避免社區感染的風險，讓民眾能保持社交距離。以上述理念設計這款APP，讓使用者能夠提前得知現場人流量，並規劃好路線，選擇人少的時間參觀，進而達到人群分流的目的。 10

流程圖

以往遊客沒有管道得知景點人流狀況，每次到大型

我們設計了「疫同去郊遊APP」，整合大型活動現

場人數、人潮等資訊，讓使用者能在參加活動前得

到路線及時間參考。

我們以「2020新北歡樂耶誕城」作為本次APP介

面設計案例。

凸顯聖誕節的氛圍，並以金黃色作為強調色。

活動現場都會出現人擠人的現象。但在疫情期間，我們需要避免社區感染的風險，保持社交距離。

在顏色方面，以紅、綠兩色作為介面的主要顏色，

# F5D63D# 517E58# 9A1B35 11

Mockup 在主畫面上，顯示活動的現場人數、人流、人潮狀況、熱門時段，並附有即時現場畫面直播。透過漢堡選單可切換活動地點。 12

讓使用者根據自身狀況選擇路線類型。推薦路線可幫助使用者避開人潮，安心參觀各個景點。提供使用者活動相關的景點地標，並附上景點的實時人數。 13

使用者可自行設定欲參觀活動的人數、年齡、參觀時段等資訊，讓APP提供適合上

述條件的參觀景點。使用者選擇好有興趣的地點後，即可設定參觀路線。

提供活動期間將出現的相關行程與介紹，讓使用者一目瞭然，不必再擔心忘記或記錯想參加的活動時段。 15

Knitting Needle AR編織教學系統期末專題負責內容前期發想主視覺 Wireframe Mockup 以編織教學為目的，主要客群為初學者。透過AR眼鏡，讓使用者能夠更加快速、方便的學習編織，即使身旁沒有老師指導，也能在第一時間發現錯誤並改正。 16

流程圖

藉由AR眼鏡的投影功能及語音控制功能，讓使用者

在獲得資訊的同時，依然可以將雙手專注於編織，

不必再手忙腳亂地翻閱說

明書或調整影片時間軸。

主視覺 Knitting Needle 編織課程文字Icon 按鍵主要用色在顏色上以橙色與紅色作為主色調，除了代表編織用具外觀常有的木質感外，也希望能像編織一樣帶給人溫暖的感受。在字型與介面 icon 方面，考慮到編織時所用的針及毛線，都具備「圓」這個元素，因此選擇使用 justfont 的粉圓體，並將按鍵製作成圓形或是倒圓角，使它們看起來不會太過銳利。 # FFC229 # FF4268 # 10264A # 40E2E7 編織課程播放 18

Mockup 棒針與鉤針皆可分成兩種課程類型，一種是教基礎針法，例如最開始成形的起針、接在後面的上針、下針...等針法；另一種則是教導使用者如何編織一件成品，可能是帽子、圍巾、襪子...等。 19

在針法課程中，已經完成的課程，後面會標註藍色星星，方便使用者進行確認。在編織小物中，會有編織物品的名稱及成品圖，使用者可以挑選有興趣的物件進行嘗試。 20

我們將由影片來指導如何編織，使用者可直接透過聲音控制影片的播放進程、速度，或是選擇倒帶重播，不需要再在編織時想辦法空出手來翻閱書本或操控影片。另外，在編織小物中，影片左側會有編織物件的3D模型圖，使用者可透過放大3D 模型圖來觀察最終成品的樣貌，比對自身的作品，確認有無錯漏之處。 21

Hogdog ! 寵物烘便機 x 寵物健康照顧APP 期末專題負責內容前期發想 Wireframe Mockup APP文案提升清狗便的速率，延續環保與衛生精神，多方追蹤與監測寵物健康資訊，協助毛小孩預防勝於治療。以這樣的理念設計一套結合軟硬體的智能健康服務，溫暖守護毛小孩的健康。 22

使用者旅程地圖準備出門遛狗中回家希望等下需要撿的便便不要太多... 地點如果不好清理就麻煩了。兩手拿著東西，需要做什麼都不太方便。手上東西好多，要拿瓶子、袋子與牽繩。將袋子、水瓶的需求與牽繩整合成一個物件。運用烘乾技術，縮小便便體積，並去除氣味。需帶足清潔用具，不然到時候只能用葉子撿便便。袋子是消耗品，有時候會找不到適合的。運用吸力技術清理便便，取代傳統的袋子。狗狗的便便顏色與狀態是否正常？便便的時間是否規律？無系統性的記錄，而且也不專業。清理環境的同時，紀錄便便時段。集便後用儀器分析便便，以評估狗狗的健康狀態。運用吸力技術，做到非接觸式清潔，減少視覺與嗅覺刺激。發揮公德心清理狗便，但真的很不喜歡那個觸感... 不喜歡撿便便時隔著袋子的觸感。想趕快把便便丟掉，不想再碰到它。丟垃圾桶可能造成惡臭。準備撿便袋、水瓶，幫狗狗繫上牽繩狗狗如廁中丟棄撿便袋檢查評估清理環境散步中 23

Wireframe 24

Mockup 使用AI人工智慧辨識寵物品種，並以步驟式引導帶領使用者逐步上手。透過藍牙連線配對機器，並填寫愛寵資訊。若使用者家中不只一隻愛寵， Hotdog!亦可綁定多台裝置。 25

將數據視覺化，以圖表呈現問題所在，讓問題點一目瞭然，同時也提供使用者可能原因及相關解法。若寵物糞便數值異常，也會第一時間通知使用者。主頁面具有擬人化的寵物對話框，貼心關懷、增加與使用者的親密度。同時可透過下方圖文，補充寵物相關知識。 26

顯示寵物基本資訊，飼養多隻寵物也能整合管理。顯示機器狀態，如電量、目前儲存空間等。智能機身讓機器可自動偵查自身漏洞並提醒使用者，避免小問題變成大問題。 27

多媒體設計

專題介紹影片負責項目：文案發想、影片剪輯使用軟體：After Effects、Premiere 作品連結「記憶圍巾」是一個搭配VR頭盔的裝置，我們在圍巾中放入擴香工具，讓使用者沉浸在畫面中的同時，也能感受到觸覺和嗅覺的刺激，藉此幫助使用者提升嗅覺靈敏度，促進記憶能力，想起情緒性的回憶。影片將介紹專案的前期研究、靈感來源、裝置技術以及使用情境，透過輕柔的音樂帶領觀者一同感受「記憶圍巾」的奧秘，讓更多人了解到原來嗅覺對人體有多麼重要的影響。記憶圍巾 29

負責項目：文案發想、影片剪輯使用軟體：Illustrator、After Effects 透過字母a聯想到水瓶座-Aquarius，並將「a」的外形與「水瓶」做結合。存在於星夜中的「水瓶」，當它傾倒時則變成「a」(Aquarius)，同時也呼應了水瓶座的星座圖像。字母動態聯想- a 動態圖像設計作品連結 30