背景圖

About Me

avatar

My recent work

Pure css - LuffyqmomoASAP 4.086 online shopping mallASUS online shopping mallweb game

Visual design

Experience

| 2020/09-2021/11 | Qmomo co.,Ltd. Senior UI Designer

| 2013/06-2016/09 | , | 2017/10- 2020/02 | - Uitox co.,Ltd. Web UI Designer

| 2016/11-2017/09 | - GENUINE C&C INC. Front-end engineer

| 2010/09-2013/06 | - iDotsys co.,Ltd. Web & System UI Designer

| 2009/09-2010/09 | - OLDNICK co.,Ltd Vision Designer

Skills

Software

Video Portfolio

Here are some 3D animation and video works.
I'm not often do these jobs now,but you still can take look.
[ The Door ] - 2008
[Talk Show] - 2007
TOP

My works

  1. UI design
  2. Prototyping
  3. Interaction design
qmomo index pageqmomo item pageqmomo category pageqmomo member page
qmomo mobile member pageqmomo mobile member pageqmomo mobile item pageqmomo mobile index pageqmomo mobile category pageqmomo mobile cart page

目標ASAP 4.0 是以 AI 為發展基礎的B2C電子商務平台,4.0 是代表 AI 的意思,要把電商網站改為全 AI 驅動的高效能服務,期望達到一體三面的目的: 幫每一個商品找到當時對的顧客、幫每一個顧客找到當時對的商品、捨棄平台抽成模式。

扮演的角色與過程在團隊中是唯一的UI Designer,畫面上希望有別其它商品量較大的購物商城,畫面上多以色塊襯托,讓圖片成為焦點。 第一眼畫面的重點,放在消費者個人最有興趣的特價品和可使用的折價券,還有近期搜尋過的關鍵字以tag cloud的方式 (經由 AI 運算權重),排列在畫面頂端,最後才是其它商品的排列,以期避免隧道效應產生。

頁面結構上,由於效能和維護的方便性,因此採用Adative web design的方式進行,請MIS做user agent判斷來導引使用者的使用裝置到正確的版面, 另一方面和工程師一起合作,協調頁面結構上的問題,包含SEO、jQuery動態效果以及跨瀏覽器bug處理等等。雖然是新的版面,但後端上稿的方式沒有太大變動,因此舊有的模組需考量以最小幅度來處理結構問題(新的模組就不管了),自己的部分則是把class name的易讀性提高,以往用編號的方式不太好理解。 而且老闆比較喜歡看prototype,因此不用以前php切版的方式,改以pug來直接產出HTML,方便跟老闆討論設計方向。

ASAP4.0 index pageASAP4.0 item pageASAP4.0 per pageASAP4.0 item page
ASAP4.0 mobile index pageASAP4.0 mobile per pageASAP4.0 mobile cate pageASAP4.0 mobile notice pageASAP4.0 mobile item pageASAP4.0 mobile item select page

目標86shop 為了將線上購物平台移植與公司系統整合,所以必須重新設計網站樣式

扮演的角色與過程本人擔任主要的UI Designer,與另一個UI Designer(負責購物車的樣式)及一位PM合作。我的工作是依照PM排好的頁面邏輯,來直接處理前台樣式。 實作上以86shop一貫的桃紅色為主色調開始,將各個區塊的css模組化,使得模組可以自由調動到其他頁面,讓頁面的css可以自由重組。 並確認與後端工程師對應的結構盡量一致,減少重工。

86shop index page86shop market page86shop item page86shop search page
86shop mobile video page86shop mobile category page86shop mobile notify page86shop mobile index page86shop mobile menu page86shop mobile item page