W O R K S / C R E AT I O N S / 2011-2014
JA R’ S PO RTF O L I O
AB O UT
W O R K S / C R E AT I O N S / 2011-2014
Taipei, Taiwan Jan. 1989 Interactive Designer
J
Jar Chen jarchen.mx@gmail.com
Kinect Robot Model / 3D Modeling
ASUS PhotoAlbum / UX Design / Metro AP
Touch Mouse Gesture Patten Survey / UX Research
Xxtralab Navigation Wall / GUI Design
ASUS Calculator / GUI Design / Metro AP
Scroll Gesture Speed Fine-tune / UX Design
Exhibition for Human Rights Day / Visual & Interactive Design
ASUS Backtracker / GUI Design / Desktop AP
Touch Gestures Interactive Tutorial / Interactive Design
ASUS Winflash / GUI Design / Desktop AP
Remote Link / UX Design / Android APP / Zen UI
Short Reel for Remote Link / Motion Graphic ASUS Smart Gesture Tutorial / Scenario Video Design
CO N TEN T W O R K S / C R E AT I O N S / 2011-2014
NB Software Management System / GUI Design / Web AP
Kinect Robot Model / 3D Modeling Xxtralab Navigation Wall / GUI Design Exhibition for Human Rights Day / Visual & Interactive Design
以Kinect為技術的機器人對戰遊戲，兩個玩家可 以將自己變成變形鋼鐵人在畫面上進行打鬥。我 的工作主要是重新設計角色的3D Model，針對不 同的廠商客戶客製不同的機器人模型。 過程除了建模之外，也嘗試進入程式置入模型的 串連與組合。由於一開始設計並沒有把人體比例 考慮到設計之中，藉由與工程師的配合，了解骨 架的拆件與數值調整，讓機器人的比例在 Mapping到人身上的時候不會看起來很奇怪，從 中在人機互動上得到很大的啟發。
KI N E C T R OBOT M O DEL / 3D Modeling
XXTRALAB NAVIGATIO N WALL / GUI Design
EXHIBIT I ON FO R H U MA N R I GHTS DAY / Visual & Interactive Design
景美人權園區所舉辦的世界人權日展覽活動，整個展覽主要呈現當 時受難者在監獄的生命故事，透過互動展覽的方式，體現受難者與 家人書信來往中所陳述的哀愁與深深的思念。 整個展覽分別是政治受難者獄中家書展區-家書區與資料閱讀區、 遺書展區、聆聽觸摸生命展區及人權紀事展區: 互動展場的介面設計需要跟空間上的造景做結合，在這裡學習到了 如何在情境上的營造、怎樣才是符合這個空間所要表現的視覺意象 ，還有與立體物件的3D Mapping，都是此案有趣的部分。
此案最大的挑戰在這個不規則的造型桌，每一個三角形要像一 本書一樣翻出相對應的歷史故事，3D Mapping需要將畫面做拉 伸貼合，但這樣就會讓文字做不規則變形，導致閱讀性不佳的 問題，而且在三角形範圍的文字排列會有奇怪的斷句，在這部 分花了很多時間與程式一起配合，最後用跑馬的方式痛態呈現 文字，並做漸層式的遮罩讓畫面維持原本的形狀。
執行互動展場的設計其實是一件令人感動又收穫良多的一件事，看到人們在其 中看著、聽著、摸著，然後覺得開心、難過或是所有所思，這些是你在設計時 完全無法預料到的事情，讓我覺得設計在被使用之前只是個半成品，透過人事 時地物的交互融合，產生了各種面向，然後我對這樣的發現與感觸感到興奮而 無法自拔。
ASUS PhotoAlbum / UX Design / Metro AP ASUS Calculator / GUI Design / Metro AP ASUS Backtracker / GUI Design / Desktop AP ASUS Winflash / GUI Design / Desktop AP NB Software Management System / GUI Design / Web AP
ASUS PHOTOA L BU M / UX Design / Metro AP
PhotoAlbum是第一支嘗試從功能、流程、視覺規劃的專案。 初碰Metro App還未掌握當時Windows 8 Flat UI的風格需求 ，但藉由此案的開發經驗了解了Windows 8所訴求的 Touch-Based的介面規劃要點。Metro App的軟體層級希望限 制在3層以內的，在設計上使用隱藏式的選單將控制項目收 起來，其目的是希望使用者能專注於內容的呈現，水平式的 內容轉場減少使用者會迷路的機會。 執行PhotoAlbum介面設計時與工程師遇到了很多彼此對 Guideline的認知誤解，雖然此案最後並沒有上架，但從過程 中學習到了很多如何與工程師合作的技巧。 接下來會呈現PhotoAlbum的前期分析、設計過程：
Work Flow
Competitor Analysis Case A
Case B
Flow會在開發過程中不斷地修正改版，工程師 會依照每一個Check Point釋出Prototype、 Alpha版的軟體版本給予設計師測試，即時在 開發過程中做快速的修正。最後在做視覺完稿 時，基本的介面架構就不會有大幅度的變動， 但有很多設計上的問題還是需要跟工程師不斷 磨合找到彼此的平衡點。
Case C
Prototype
在規劃初期，我挑選了照片檢視軟體三個同樣是在Windows Store上有的照片檢視軟體，與 PhotoAlbum做功能的比較，同時與工程師確定開發的方向，對之後我在執行Flow規劃時有很 大的幫助。
Design Details 在照片和專輯檢視頁面上都可以看到一個『＋』的框框，希望即使在剛新建一個 專輯或是頁面的時候，不會有空空的感覺，而且也能讓初用Metro App的使用者在 找不到功能選單時，能直覺在畫面上找到如何新增內容的方式。
ASUS CALCU L ATOR / GUI Design / Metro AP
AS U S B AC K T R AC KE R / GUI Design / Desktop AP
此案是設計一個還原硬碟跟備份的軟體，LOGO視覺 語意上我選取了『循環』和『盒子』的概念，在形態 上希望呈現放在桌面上的一個小主機的感覺，所以以 半透視的方式表現盒子這個概念；選色決定綠色與藍 色代表『重生』與『科技』的意象。 ASUS Backtracker的軟體流程較為繁瑣，在這裡特別 有設計Tutorial的教學導引，教育初次使用ASUS Backtracker如何使用外部的儲存裝置進行備份。
ASUS W INFLAS H / GUI Design / Desktop AP
NB SOFTWA R E M ANAGE ME N T SYSTEM / GUI Design / Web AP
Touch Mouse Gesture Patten Survey / UX Research Scroll Gesture Speed Fine-tune / UX Design Touch Gestures Interactive Tutorial / Interactive Design
TO U CH MOUSE GESTU R E PAT T E N S U RV EY / UX Research
針對觸控滑鼠的手勢種類與Patten的前期研究和競品分析。 藉由分析觸控範圍內的手勢分佈，可以初步評斷各家基本的 手勢應用與互動的複雜程度，給予在設計相關觸控滑鼠的使 用經驗有基本的認識。
S CRO L L GE ST U R E S PEED FI N E -T U N E / UX Design
Touch Scrolling跟滑鼠滾輪做頁面捲動有基礎上的不同；滾 輪輸出的是定量的捲動數值，而Touch Scrolling會因為每個 人的手指接觸面積、習慣動作而有質性上的差異。故需要 演算法來進行手勢慣性的推演，使在回報在介面上的視覺 回饋與使用者的肢體認知不會有落差的情況。 如何讓使用者有一致性的Scrolling體驗，變成是在觸控滑鼠 的使用經驗上一件很重要的事情。
此案與工程師一起合作，藉由工程師所開發的演算工具，讓設計師可以在電腦上模擬出調整後的數值 與對應的捲動速度，並蒐集使用者數據做為資料庫基礎，找到最適當的慣性曲線導入到觸控滑鼠的驅 動程式之中。
TOUCH G E STURE S INTE RACTIVE TUTO RIAL Good!
/ Interactive Design
本專案是Vivo Mouse的手勢教學軟體，使用者只要依循各個單元的手 勢教學進行演練，軟體就會辨別執行的手勢是否正確；此案的痛點在於 ：雖然介面的右手邊會有影片示意手勢的使用，但經過測試發現，使用 者無法理解軟體的評判標準為何，即使使用者認為他做的是正確的手勢 ，但不管怎麼做結果都是錯誤的結果，導致學習上的挫折感。 為解決如上的問題與增進觸控手勢學習效率，思考原本介面上固定不會 動的手勢圖示，是不是能讓使用者在學習之中能更有互動的樂趣，故在 基礎的介面架構下提出了一個新的互動設計。
當手在滑鼠上做手勢的同時，畫面上手的示意圖也會跟著作動，建立使 用者的認知。
Remote Link / UX Design / Android APP / Zen UI
RE MOTE LINK / UX Design / Android APP / Zen UI
Remote Link原生為ASUS SmartGesture Plus，希望將NB上的ASUS SmartGesture觸控板功能移植到行動裝置上，期許打造更多元化的觸控 經驗。 包含主要觸控板功能，直覺式使用手勢進行放大、縮小、平移、點擊、 滾動螢幕和鍵盤輸入。 •內建驅動程式給予更優化的遠端遙控經驗 •橫跨任何設備，帶來一致性的使用者體驗 •隨時隨地連線並控制任何相容之裝置 •支援需要更多彈性的行動工作者 •搭配 Bluetooth Wireless Connection
其主要的使用族群希望是給予擁有手機與筆電的商務人士或是會以跨裝置做媒體播放的家庭影音需求，故在功能上著 重於遠端操控的情境規劃，如：簡報模式、多媒體播放器模式。
在一開始的設計上，可以看到畫面是切分為上是觸控板、下是各個功能的操作介面，在Alpha版的測試中，發現拉伸式的可變動畫面造成 了許多點選上的錯誤率、切換功能的Button太小不易點選，同時蒐集使用者建議，重新評估一些功能的取捨，故之後在導入Zen UI Style 的時候重新調整了介面的配置規劃。
由於Zen UI的視覺風格需要以扁平化、整 體要有主題色，對於Remote Link來說， 按鍵的配置與回饋是一大要點。 選色上以藍色為基調，另外選了亮藍綠 色和淡藍色作為強調色，讓整體視覺有 亮點而不會顯得單調。 而icon的語意是以『Touch』為出發，有 如手指一點，光波發散，接著神奇的魔 術出現。
Remote Link也有延伸到Zen Watch的穿戴應用上，萃取了簡報模式的操作導入到Zen Watch所訴求的使用情境之中。 使用者只要在錶面上左右滑動就能切換簡報的上下頁，並有簡報時間的提示。
Youtube ScreenShot from : Experience the Smart Features of ASUS ZenWatch
Short Reel for Remote Link / Motion Graphic ASUS Smart Gesture Tutorial / Scenario Video Design
SHO RT RE E L FO R RE MOTE LINK / Motion Graphic
此影片的需求是希望包在電腦端的軟體之中，在使用者 進行安裝後有一個影片可以快速瞭解Remote Link，所 以必須要考慮到置入安裝包的檔案大小，控制在10秒內 的簡介Remote Link的功能，這個算是此案比較大的挑 戰。 前期我思考了很多種呈現方式，但最後覺得用最直覺的 視覺傳達方式- Motion Graphic來解決這個問題。 搭配Zen UI的視覺風格製作了較為活潑輕快的動態轉場 ，最後的跳出小小音符調整了蠻多版本的動態，希望透 過視覺的形體體現一種開心的意象。
一開始的腳本設計，沒有特意描繪所有功能的細節而較為注重的是轉場的呈現，希望快速地用語 意傳達各個功能的資訊，最後修改了多版，但還是維持原本的10個Cut的想法。
Video Demo
ASUS SM A RT G E ST U R E T U TO RIA L / Scenario Video Design
Video Demo