<h4>文策院 CSR 文化發展與企業社會責任官網</h4><p dir="ltr"><strong>需求說明</strong></p><p dir="ltr">文策院在成立初始時，能榮幸參與其中專案。文化發展與企業責任網，希望能讓 CSR 經費挹注到文化相關內容，網站主要目的是向藝文團體 / 金管會說明倡議內容。</p><p dir="ltr"><strong>中間轉折</strong></p><p dir="ltr">本來想直接做媒合網站，但在前期調查時，我們與 10 名不同面向的文化業者，詢問 CSR 概念時，發現對 CSR 概念也是相當陌生，如何和企業合作，並提供各種資源的媒合，比如說空間呀、表演呀，需要來回摸索。因此本網站從原本具有媒合的需求，改為提供豐富資訊，提供和企業合作成功的 CSR 案例，先溝通共同想像和共識為主，讓倡議更容易。</p><p><strong>技術新視野</strong></p><p dir="ltr">這次技術和以往不同是，文策院提供雲端主機 DevOps 有駭科技團隊支援，使用 Google 雲端主機服務。有了 DevOps 團隊，就像是一塊地會先整理過，馬路會幫你拉過來，有大量的攻擊，也會先擋下來。我們只要專心服務需求，將房子蓋好，如果未來公部門，也能採用這技術，那我想在開發和維運上，都會更加彈性。<br></p><p><strong>溝通文化</strong></p><p dir="ltr">文策院的窗口也超級專業，會提供我們過往研究資訊，傳達也確實且迅速，也會為我們著想，更重要的是，窗口很想為藝文團體做事，公務員很想前進，很想衝，就會讓野薑很想推助，讓服務可以落地實現。</p><p><strong>團隊</strong></p><p dir="ltr">PM/設計      | 陳怡君</p><p dir="ltr">視覺發展     | 陳怡君</p><p dir="ltr">用戶研究     | 陳怡君、Hanyu</p><p dir="ltr">原型製作 | 陳怡君、Hanyu</p><p dir="ltr">前端工程師 | 陳怡婷</p><p dir="ltr">後端工程師 | 彭郁斐</p><p dir="ltr">DevOps | 有駭科技團隊</p><p dir="ltr">文策院 | 策略組</p><p dir="ltr">感謝受訪者 | 大塊編輯、毛豬經濟日記、OpenBook 開卷有益、數位藝術中心、Giloo、他群、光穹遊戲、大仙術士李白葉明軒、SXTbit、小魚廣告網小魚</p><p dir="ltr">【LOGO】設計概念</p><p dir="ltr">訪談完後，有感於這件事情，幾乎是要企業與藝文團體，攜手合作，才有可能達成的事情。企業英文是 Company ，藝文團體開頭也是 Culture。若是兩個 C 如一雙手，互相的，試圖與對方合作。但不是合作就行了，來回的激盪，和互相磨合，也是訪談中，常常看到情境，因此我們帶入海浪的概念，如海浪一般，打在岩石上，激盪出美麗的浪花。顏色採用藍金色，用企業喜歡的穩定藍色，與文化如金色般閃閃發光意象，期待網路能將兩邊牽起來。</p><p>首頁大圖</p><figure><img src="/dataImgs/portfolio/17/03.png"/></figure><p>內頁大圖</p><figure><img src="/dataImgs/portfolio/17/04.png"/> </figure><p>搜尋細節展示</p><figure><img src="/dataImgs/portfolio/17/05.png" /> </figure><p>文章細節展示</p><figure><img src="/dataImgs/portfolio/17/06.png"/> </figure><p>主視覺發展展示</p><figure><img src="/dataImgs/portfolio/17/07.png"/> </figure>

文策院 CSR 網，希望能以倡議為目的，建立共識和未來對文化CSR的想像

文策院-文化發展與企業社會責任網

<p>moon chang / Logo 、官網 、 UI Guidline</p><p>Ginger / 經文查詢系統、軟體查詢系統、線上藏文字型轉檔系統</p><p><a href="https://dharma-treasure.org/" target="_blank">正法寶藏 - 官方網站</a></p><p><a href="https://adarsha.dharma-treasure.org/" target="_blank">正法寶藏 - 經文查詢系統</a><br></p><figure><img src="/dataImgs/portfolio/08/01.png"></figure><figure><img src="/dataImgs/portfolio/08/02.png"></figure><figure><img src="/dataImgs/portfolio/08/03.png"></figure><figure><img src="/dataImgs/portfolio/08/04.png"></figure><figure><img src="/dataImgs/portfolio/08/05.png"></figure><figure><img src="/dataImgs/portfolio/08/06.png"></figure><figure><img src="/dataImgs/portfolio/08/07.png"></figure><figure><img src="/dataImgs/portfolio/08/08.png"></figure><figure><img src="/dataImgs/portfolio/08/09.png"></figure><figure><img src="/dataImgs/portfolio/08/10.png"></figure>

此系列作品包含 - Logo 設計、官網 、經文查詢系統、軟體查詢系統、線上藏文字型轉檔系統。一次發展多個產品線的設計案，建議先做 Logo 將形象固定，再藉由 UI Guidline，維持產品的一致性。

正法寶藏

<h2 dir="ltr"> <b>需求說明</b> </h2> <p dir="ltr"> 這次來自國家人權委員會的委託，希望能在新的立院會期，提出網站未來發展的方向，改變舊印象，營造新的形象。 </p> <h2 dir="ltr"> <b>中間轉折</b> </h2> <p dir="ltr"> 原本希望可以委託製作完網站的首頁，包含設計與工程，但和資訊部來回後，理解到既有的網站製作廠商的程式寫法，是沒有 API 的作法，也就是外觀與資料庫是黏在一起的，骨肉無法分離，不能只換外觀的皮而已。 </p> <p dir="ltr"> 台灣公部門的網站大多委託資訊部管理，將網站託管在本地端主機，和一般新創公司託管在雲端主機生態不同。政府也建立自己的資安測試，不定期的測試資訊部門的反應，這也是建立在本地端主機的生態下。 </p> <p dir="ltr"> 諸多考量下，仍建議客戶找既有廠商製作網站。對客戶來說，是較佳的解法。我們仍提供設計插圖，可以快速更換印象，達到和立委溝通網站未來發展的目的。 </p> <figure> <a href=""><img src="/dataImgs/portfolio/18/12.png"></a> <figcaption class="align-center"> 現行的國家人權委員會網站截圖（2021/4/27 截取），我們的任務是將其視覺進行老屋翻新工作 </figcaption> </figure> <h2 dir="ltr"> <b>技術新視野 </b> </h2> <p dir="ltr"> 政府和大型企業，提供網站，過往多會買一台主機放置於機房，並組成 MIS 團隊進行部署、上線等工作。 </p> <p dir="ltr"> 開發團隊會將程式碼遞交給機房工程師，再請進行部署、上線。這和雲端環境，由開發團隊自動部署上線的作法相當不同。 </p> <p dir="ltr"> 以客戶角度思量，本地端主機，有以下優勢 </p> <ol> <li dir="ltr">資料放自己家管理，有隱私資料更會傾向放自己家</li> <li dir="ltr">流量再大也不用新增費用，只要多買幾包乖乖的成本</li> <li dir="ltr">資安攻防有既有作法</li> </ol> <p dir="ltr"> 以開發團隊思量，雲端主機，有以下優勢 </p> <ol> <li dir="ltr">開發上線容易，不需要再過一組單位</li> <li dir="ltr">流量再大，雲端主機扛，但要新增費用</li> <li dir="ltr">資安保全由雲端主機配備，不用再煩惱這一塊</li> </ol> <p dir="ltr"> 野薑團隊熟悉處理的是雲端主機的運作方式，然而，若要將網站改為雲端主機，客戶端不只是程式碼編寫會出現問題，還會有組織及流程改動的問題。因此評估之下，認為將設計交付野薑，工程交付給過往提供服務的廠商，將設計與工程的工作切割開來，對彼此來說都是最有益的方式。 </p> <h2 dir="ltr"> <b>溝通文化</b> </h2> <p dir="ltr"> 國家人權委員會辦公室的專案窗口相當有經驗。溝通上過程除了給予明確的指示外，也能清楚將顧慮和感受傳達出來。比如說： </p> <p dir="ltr"> 「 我擔心，這組氛圍抗議太激烈，希望能氣氛緩和，更偏向遊行概念 」 </p> <p dir="ltr"> 「 我擔心，過往身障總是被批評都是接受幫助，希望能朝賦能(empower)方向走」 </p> <figure> <img src="/dataImgs/portfolio/18/01.jpg"> <figcaption class="align-center"> 客戶給予明確的指示文件 </figcaption> </figure> <p dir="ltr"> 這次插畫過程，我們拆分階段為「意象討論」→「草稿確認」→「彩稿細修」→「完稿」。 </p> <h3 dir="ltr"> ○ 意象討論 </h3> <p dir="ltr"> 我們收到一開始的文案是「性別，消除對婦女一切形式歧視公約。實現男女的完全平等，確信一國的充分和完全的發展，世界人民的福利以及和平的事業，需要婦女與男子平等充分參加所有政治、社會、經濟和文化生活等各方面活動。 」 </p> <p dir="ltr"> 在表達這類抽象概念時，我們會提供簡報，說明每一項元素和情緒連結，以及給予人的聯想是那些。這一階段重點是將潛在不適合地元素剔出，尤其注意可能會有公關危機的元素，是這階段溝通重點。 </p> <figure> <img src="/dataImgs/portfolio/18/02.png"> </figure> <div class="grid"> </div> <h3 dir="ltr"> ○ 草稿確認 </h3> <p dir="ltr"> 草稿溝通時會以先前討論過後、確定採納的元素，來進行構圖。窗口若能將草稿給長官確認，可以讓後續不用修改結構。 </p> <figure> <img src="/dataImgs/portfolio/18/03.png"> </figure> <div class="grid"> </div> <h3> ○ 彩稿細修 </h3> <p dir="ltr"> 彩稿交付後可能會有些調整。比如說，希望手有不同膚色，來呈現各種族群的多樣性。畫面的人物所傳達出來的情緒、氛圍等的調整，也會在彩稿時修正。相對於黑白的線稿，彩稿所能傳達的意涵更為完整，因此交付給窗口判斷是否符合專案需要，來進行精細的調整，有助於專案順暢。 </p> <figure> <img src="/dataImgs/portfolio/18/04.png"> </figure> <h3 dir="ltr"> ○ 完稿 </h3> <p dir="ltr"> 彩稿過關後，將插圖放上原先網站的設計稿中，搭配適合的文字和設計，再交付給客戶確認。 </p> <figure> <img src="/dataImgs/portfolio/18/05.png"> </figure> <h3 dir="ltr"> <b>團隊</b> </h3> <p dir="ltr"> PM | 陳怡君 </p> <p dir="ltr"> 視覺發展 | Hanyu、Si-Ray </p> <p dir="ltr"> 客戶團隊 | 國家人權委員會 </p> <h3 dir="ltr"> <b>首頁模擬大圖</b> </h3> <p dir="ltr"> 此專案仍提供一份模擬大圖，作為未來發展方向建議。 </p> <figure> <img src="/dataImgs/portfolio/18/06.png"> </figure> <p> <b>插畫視覺示意</b> </p> <figure> <img src="/dataImgs/portfolio/18/07.png"> </figure> <figure> <img src="/dataImgs/portfolio/18/08.png"> </figure> <figure> <img src="/dataImgs/portfolio/18/09.png"> </figure> <figure> <img src="/dataImgs/portfolio/18/10.png"> </figure> <figure> <img src="/dataImgs/portfolio/18/11.png"> </figure>

來自國家人權委員會的委託，希望能在新的立院會期，提出網站未來發展的方向，改變舊印象，營造新的形象。

國家人權委員會網站-視覺設計與插圖

<p dir="ltr"> 文 /&nbsp; 薑貓 </p> <p dir="ltr"> 不知不覺已經也到了2020年末，你是不是決定好要整理居家環境，準備開始新的一年了呢？市面上許多教人整理居家環境的書籍，像是近藤麻理惠的《怦然心動的人生整理魔法》、山下英子的《斷捨離》、尾崎友吏子《沒時間才更要學的理家術》等等。其實，整理居家環境進而貼近自己的理想生活，這樣的概念和網站設計、產品開發時，經常使用的「使用者體驗設計」概念十分相近；透過規劃居家生活動線、理想的生活情境、家人或同居者的需要，其實就是在設計良好的居家生活體驗。 </p> <figure> <img src="/dataImgs/blog/33/03.png"> </figure> <div class="grid"> </div> <p> 雖然實際的產品開發會涉及團隊的技術能力、資金與各種成本考量而有所調整，然而在設計使用者的需求、創造良好的體驗而言，仍然需要知道對使用者而言理想的狀態是什麼。把居家環境整理好所得到的神清氣爽，確實很難用簡單的「把衣服都折整齊」或是「地板都有掃乾淨」這樣單一的行動代表整體空間的氛圍。這種「不知道為什麼做完這些事之後，整個家的空間就舒服許多」的感受，像是化學變化的魔法一樣，其實就涉及「使用者體驗設計」（user experience design）。 </p> <div class="grid"> </div> <figure> <img src="/dataImgs/blog/33/04.png"> </figure> <p> 如圖所示，折衣服或是掃地可以算是「行動、使用與操作」，然而把整個家都打掃、收納、整理好，所感受到的那一股神清氣爽的輕盈感，是「經過一連串作法的組合」才實現的狀態。這個狀態如果不實際操作、體驗，就會無法理解，那種神清氣爽究竟是怎樣的感覺。人們在這中體驗、感受之後，再進一步，因為這種輕盈感而覺得生活踏實、擁有安定感，則是其背後可能帶來的價值。 </p> <h2 dir="ltr"> <b>UX是建立「狀態」來連結「事物」</b> </h2> <p dir="ltr"> 從上一段的整理居家環境整理，，可以換成另一種視角來理解： </p> <figure> <img src="/dataImgs/blog/33/05.png"> </figure> <div class="grid"> </div> <figure> <img src="/dataImgs/blog/33/06.png"> </figure> <p> 如果我們將圖中的「沙發」當作重點家具 / 重點功能採買，目標是達到舒適放鬆的客廳，那麼便會忽略到放置客廳的這個空間本身，其實還包含了室內的光線、坐在客廳裡的時間、室內的裝潢、其他放置在客廳裡的物品，甚至從客廳看出去的風景，以及和你一起坐在客廳的人，這些其實都影響了這個客廳是不是令你怦然心動的那個客廳。 </p> <p dir="ltr"> 沙發的樣式、顏色、材質以及要擺在客廳的哪個位置，可以理解為網站的 UI （user interface），它會影響到你在客廳裡的體驗，但它只是客廳的一部分，並不能代表整個客廳給你的感受和 UX 體驗。連結圖中的其他元素，建構出你待在客廳裡的那個狀態，也影響著你的感受。同時，沙發的款式固然重要，但是放在這個客廳裡是否協調，也很重要。 </p> <h2 dir="ltr"> <b>易用性測試：想用等於會用嗎？</b> </h2> <p dir="ltr"> 在設計網站的時候，我們會建立好各項功能的流程，並進行測試。這聽起來是很簡單的概念，但實作起來卻有很多細節。若以廚房比喻，從冰箱中取出食材，再拿到水槽洗淨，在檯面上處理好，丟進鍋具裡烹飪，這樣的動線是否流暢呢？如果在廚房裡買了很多自己很喜歡的漂亮廚具，可是因為東西太多，導致動線規劃不良，使得自己越來越懶得下廚，懶得洗碗，懶得把晾乾的碗收納起來，那麼，這個廚房就是不會使用的廚房。雖然都放著自己想用的東西，但是最後卻不會使用。 </p> <p dir="ltr"> 這也是為什麼要「斷捨離」，用不到的東西留著，只是讓生活更加不舒適而已。網站也是這樣，使用順手、會讓人想用、想停留、想再回來使用，產生良好的體驗，比起擁有許多吸睛功能更重要。 </p> <blockquote> <p> <b>家要整理得讓人想回來，網站也是。</b> </p> </blockquote> <p dir="ltr"> 動線、流程的設計雖然可以事先規劃，不過實際上到底怎麼做比較好，通常是做了才知道，並且需要一面作一面調整，磨出自己想要的樣子，才會得到怦然心動的結果。市面上教人整理、收納的書籍眾多，但實際使用測試這些方法後，通常都會有所調整。一次把客廳調整成理想的樣子是困難的，不斷地微調、改變，甚至詢問同居者的意見，慢慢把客廳整理成需要的樣子，就像是 UX 測試的過程。 </p> <h2 dir="ltr"> <b>情境腳本：想要和家人在這裡度過什麼樣的時光呢？</b> </h2> <p dir="ltr"> 「晚上洗好澡，想要慵懶地躺在沙發上，點上薰香，喝杯草本茶，窗外微風輕輕地吹進來。昏黃的燈光裡，腿上窩著的是我的貓咪，在這個時刻裡和同居人安靜地說話，我一面分享著自己今天的生活，一面摸著撒嬌的貓。」這或許是令人怦然心動的客廳中的場景。想要明確打造整理自己想要的生活環境，要盡可能想像到這麼具體才行。 </p> <p dir="ltr"> 除了易用性的測試，也需要看看這個客廳是否具備、符合讓這個情境發生的條件，像是噪音和風向，可能就會影響著上述的情景。「想要這樣的客廳，我需要怎麼做？」具體的客廳想像，能讓你跟同居人溝通如何打造出這樣的客廳，並且反覆檢視現在你們距離理想的客廳有多遠，避免做到最後才發現「這不是我想要的客廳」。 </p> <p dir="ltr"> 透過將「狀態」轉換成「情境」，人們比較能夠具體描述出來。在產品開發的時候，我們也會製作情境腳本，讓使用的狀態和需求更具體，釐清、設計出對使用者而言有效的服務。先想像才能抵達，所有的具體想像都是為了實踐所做的演練。 </p> <p dir="ltr"> 這樣說起來，野薑也有提供居家整理諮詢服務嗎？沒有唷，現有的「網路知識諮詢服務」其實就是陪你一起檢視現狀、釐清需求的整理服務唷！在野薑服務的專案中，我們都會這樣細細地檢視：「為客戶做出來的網站，是不是符合客戶的需求，並擁有怦然心動的魔法呢？」 </p> <p dir="ltr"> 在年末的時節，用UX的概念，重新檢視那個想要成為的自己和怦然心動的居家環境吧！ </p> <p> <br class="Apple-interchange-newline"> </p>

不知不覺已經也到了2020年末，你是不是決定好要整理居家環境，準備開始新的一年了呢？市面上許多教人整理居家環境的書籍，像是近藤麻理惠的《怦然心動的人生整理魔法》、山下英子的《斷捨離》、尾崎友吏子《沒時間才更要學的理家術》等等。其實，整理居家環境進而貼近自己的理想生活，這樣的概念和網站設計、產品開發時，經常使用的「使用者體驗設計」概念十分相近；透過規劃居家生活動線、理想的生活情境、家人或同居者的需要，其實就是在設計良好的居家生活體驗。

Blog 文章

文章分類

以下是【體驗設計觀察】有關的文章

居家空間的 UX 整理術：為什麼需要想像怦然心動的家？

文策院-文化發展與企業社會責任網

正法寶藏

國家人權委員會網站-視覺設計與插圖

Blog 文章

文章分類

以下是 【 體驗設計觀察 】有關的文章

居家空間的 UX 整理術：為什麼需要想像怦然心動的家？

文策院-文化發展與企業社會責任網

正法寶藏

國家人權委員會網站-視覺設計與插圖

以下是【體驗設計觀察】有關的文章