智園暑期實習

Summer Vacation

2016.6.27~8.31 視覺傳達設計系 楊晴雯 實習心得

在暑假開始之前 在暑假開始之前： 在大三時開始學習自己寫程式做網頁，當自己心中所想的效果被製作出來，便會感到相當有 成就感，喜歡程式之間的理性與視覺之間的感性交融並找到共同概念時的驚喜！而我享受觀 察使用者的反應，並改良網頁推向更好使用的過程，非常希望可以學習到更多 UI、UX 的 學問。 所以在暑假來臨前開始尋覓實習的機會，希望可以學到關於網頁設計的工作，也希望這是一 份可以賺到錢的工作為自己戒下來的畢製籌措一些經費，而不是無薪實習。 找倒了幾家我非常喜歡的公司： 1. 網站開發、使用者經驗設計與品牌創新的公司－轉轉 Tenten 2. 創新的 APP、手遊設計公司－四合願 Fourdesire 3. 專注於校園系統的開發、推廣智慧學習－智園 Wisdom Garden 三家公司我拿到了兩家公司的面試資格，轉轉是無聲卡。Fourdesire 的面試分成 7 分鐘 presentation、3 分鐘 Q&A。簡報的內容煞費苦心，但可惜的是沒有錄取。 而在智園的面試時，我製作了一個人的作品集網站，利用這個網站在面試時介紹自己，很幸 運獲得了工作的機會。

1 暑期實習心得

第一週

6.27~6.30

第一週工作內容： （一）熟悉公司內部狀況。 （二）了解規劃產品之使用說明手冊。 （三）設計使用手冊版型。 （四）使用 Word,Indesign 進行手冊的排版。 （五）了解未來將會進行改版的公司官網之設計方向。

第一週值得紀錄的事： （一）站會、排卡：在智園實習期間，每天早上會進行「站會」，大家站在討論室中快速的 告訴彼此昨天做了哪些事情，幫助團隊暸解每一個人的工作內容，並可以就發現的問題進行 討論，也可以快速訂出新的進度，是一個很有效率的開會方式。而排卡就是把每一項要完成 的進度寫成便利貼上，每一個人認領卡片完成。 （二）我一進公司，第一個得到的任務是製作公司產品的使用手冊。但令我感到訝異的是公 司希望我使用 WORD 進行手冊的編排，考量是公司產品改版速度快，所以使用手冊必須 時常做更動，並且不一定有設計專長的人力去進行版本的更動，所以希望我使用門檻較底的 軟體進行排版，日後維護起來比較方便。但是我認為使用 WORD 排版，無法達到公司希 望兼具美觀以及效率之訴求，經過了一段時間的溝通、策略的改變（半年改版一次）以及軟 體的嘗試，最後決定使用 Indesign 進行排版。

2

第二週

7.4~7.7

第二週工作內容： （一）使用手冊排版。 （二）使用手冊封面構思。 （三）公司官網目前的問題以及解決方法的討論。

第二週值得紀錄的事： （一）公司會不定期有 Demo Day ，大家聚在一起，聽聽看某一個小組新研發的技術或是 產品開發的進度，這跟我的專長不同，但是有關於使用者的討論以及功能的設定我覺得是相 當有趣的，結束後公司會外訂午餐，大家一起享受、聊天。 （二）公司 PM 與我以及其他正職的 UI 設計師討論公司官網改版的需求，我所分配到的工 作非官網本身，而是公司的三個行銷企劃的網站設計，在官網做一個外部連結： 1. 數位學習校園 補助計劃。產品的折扣活動。 2.Tronclass 最新活動消息。公司理念與產品推廣的活動以及工作坊紀錄。 3.Tronclass MVP 計畫。與公司關係緊密的產品使用者介紹與採訪。 這三個網站的內容與呈現方式都有非常大的不同，我思考起來覺得充滿挑戰性。

3 暑期實習心得

1. 在智園的工作情況。 2. 向 UI 設計師 Shleely 請教關於網頁製作的問題。 3. 使用大螢幕檢查 RWD 網站的各種狀態。

1

2

3

4

4. 想公司 PM 報告完成的 MVP 網站。

4

第三週

7.11~7.14

第三週工作內容： （一）使用手冊排版。 （二）公司活動網站的架構規劃以及討論。 （三）使用手冊封面設計以及製作。 （四）公司補助計畫網站的視覺設計

第三週值得紀錄的事： （一）在這一週我與其他 UI 設計師一起討論官網改版的重點，我做了一份簡單的 PPT 大 概說明了我所發現的問題。有一些意見被採納了！ （二）使用手冊的排版持續進行中，但是負責給我文字與圖片的 BA 進度有一點延遲了。 所以我多了一些時間可以先進行網站的設計。公司網站設計的流程是： 1.PM 先說明網站的用途與需求，以及一些設計範例。 2. 我畫出架構圖 UI Flow。 3. 確定邏輯沒有問題後，使用 Balsamiq Mockup 這個我在公司新接觸到的軟體繪製簡易 Wireframe（沒有視覺，只有網站的框架）。 4. 接下來就可以製作網站的視覺設計了。我使用 AI 進行網站視覺設計。而其他 UI 設計師 是使用一款叫做 Sketch 的軟體製作，這款軟體結合 AI 的可以直接點選拖拉物體與 PS 精 細的圖層概念，並且有許多給 UI 設計的模組與套件。 5. 視覺設計和設計師與 PM 來回討論過定稿後，就可以開始寫程式製作正式的網頁了。

5 暑期實習心得

1.Tronclass 使用手冊封面，分為教師版、學生版。 2.Tronclass 使用手冊內頁。

1

2

6

第四週

7.18~7.21

第四週工作內容： （一）使用手冊排版。 （二）使用手冊修改。

第四週值得紀錄的事： 在這一週原本按照時程，使用手冊在這禮拜三就要交付了，但我在禮拜一拿到相當於整本書 五分之二的素材，在星期一、星期二這兩天急急的排了一百頁，有需多細節難以盡善盡美， 並且在禮拜三下午才開始校稿的動作。禮拜四早上交給設計總監 Tracy 看，設計師認為有 許多地方需要修改。在禮拜四晚上趕實際最後的交付期限，忙到了凌晨三點多終於完成了需 要修改的部分。 或許比較好的進度安排是在上個禮拜四之前就初步完成使用手冊的排版，這樣才能有充足的 時間做多次校稿以及調整的動作。使用手冊功能多元，使用手冊的層級也相當複雜，校稿、 調整需要要花相當的時間。手冊目前排完總共是兩百五十頁，因為頁數太多，PM 表示可能 要在每一頁加上索引。所以我下個禮拜還要繼續手冊的排版工作。我在排版的同時曾數度向 BA 表示整本手冊排版下來可能會到三百頁，直至最後才表示因為頁數過多而需要加上索 引，我認為公司在初期的手冊的需求沒有規劃完善，而我也沒有及時溝通我所發現的問題， 處於一個被動接受命令的狀態，才導致最後工作量我無法負荷，以及許多可以更好的地方， 因為木已成舟所以無法轉圜。

7 暑期實習心得

＆

第六週

第五週

7.25~8.4

第五週工作內容： （一）使用手冊排版。 （二）使用手冊修改。

第五週值得紀錄的事： 這個禮拜持續忙著使用手冊的修改、校稿，因為時間非常趕，使我愈來愈熟悉 Indesign 的 快速鍵以及許多強大的功能。超連結按鈕設定。目錄搭配文字樣式的設定可以自動產生，自 行建立連結。各種面板設定、文字樣式、段落樣式甚至常用到的物件都可以設定物件樣式。 在文字的排版上也能夠做到比 AI 更為細節的設定。以往排版時，因為頁數較少，每一頁細 節可以再做調整，所以沒有瞭解到這些功能有多強大，在這個禮拜痛苦的使用手冊排版中， 確實學到了很多東西呢。在使用手冊交付給客戶後，終於正式進入我想要有所學習的網頁設 計的部分。

第六週工作內容： （ㄧ）「補助網站」視覺修改。 （二）活動網站視覺設計。 （三）活動網站視覺修改。

第六週值得紀錄的事： （一）補助網站與活動網站部分，我所要進行的工作是針對舊有的網站進行檢討並著手設計 與改版。原本的網站並沒有考慮到不同介面上的使用，所以希望講網站設計成自視應式網 頁。 （二）設計好網站視覺後，我會先將設計稿交給設計師 Tracy 過目，請她先針對視覺設計 上的問題給一些意見，我再做修改。這之後，全部的 UI 設計師跟 PM 們一起開會，討論功 能上以及使用者瀏覽上會不會出現問題，並指出我設計的不夠完善或是沒有注意到的地方， 感覺起來還蠻慎重的（笑），讓人覺得相當開心。 8

＆

第八週

第七週

8.8~8.18

第七週工作內容： （一）MVP 網站視覺設計 （二）活動網站視覺修改 （三）補助網站製作

第七週值得紀錄的事： （一）這週開始製作網站啦～製作 RWD 的過程中我發現有許多事需要考慮： 1. 確定每一個 HTML 元素是可以重複利用的。 2. 避免去設定寬高的絕對值，設定百分比會是比較好的方式。 3. 利用網格系統來做設計。開始設計網頁的時候，坐在我旁邊的設計師 Shelley 告訴我說： 在做視覺設計時，先畫上 Grid system 照著設計，這樣無論是要做自適應式網頁或是要跟 前端工程師說明如何製作時，都可以更加方便。 4. 命名不能夠再亂取了。以往的經驗都是自己做好網頁自己開心，所以常常會出現只有自 己才懂的，時間一久甚至自己也忘記命名的邏輯是什麼了 ... 但是在公司工作所寫的程式必 須要移交給別人繼續修改，所以藉由這次機會改掉壞習慣，思考大家都可以看懂 Nming convention。 5. 思考圖片與文字在不同介面上的排版呈現。 （二）開始設計 MVP 網站，這個網站以人物採訪為主，參考了很多類似概念的網站，發現 日本有需多公司會以採訪、介紹社員為公司官網的主要內容，讓人感到非常有向心力。

第八週工作內容： （一）補助網站製作 （二）補助網站 RWD 製作 （三）MVP 網站製 （四）MVP 網站照片修圖、文字潤飾

9 暑期實習心得

＆

第十週

第九週

8.22~8.31

第九週工作內容： （一）MVP 網站 RWD 製作 （二）補助網站檢查、修飾

第九週值得紀錄的事： （一）不知不覺間已經到了第九週，實習也漸漸進入了尾聲，網站也漸趨完成，剩下一些我 認為有些棘手的問題，於是請教了設計師 Shelley，她推薦了幾個平常常用的網頁，下載別 人所設計的套件來使用，不用什麼事都自己來。 （二）我也為了網頁字型設定而苦惱，於是也請教了 Google fonts 真是好東西呀！

第十週工作內容： （一）補助網站、MVP 網站的修飾 （二）整理檔案，完成交接 （三）寫下 MVP 網站的需求

第十週值得紀錄的事： 行動數位學習校園 獎勵補助計畫 網站

（一）最後一個禮拜到來，再仔細檢查網站有沒有遺漏或是出錯後，開始整理檔案，最後就 是交接了！在交接的過程中我跟不同專業的前輩們解釋、說明網站設計的架構以及程式的邏 輯，這樣的經驗對我來說很新奇，也非常緊張，很怕有人跟我說：你這樣寫很蠢之類的 ... 不 過幸好大家很親切！ Tronclass 官網連結

（二）最後一天自己準備了一些小禮物跟小卡送給特別照顧我的同事（設計師們），謝謝大 家兩個月來的照顧。

10

11 暑期實習心得

12