<figure> <img src="/dataImgs/portfolio/20/coverimg.png"> </figure> <a href="https://learning.nchu.cloud.edu.tw/onlinelearning/">Website Link→</a> <h2> 需求說明 </h2> <div class="grid"> </div> 「教育部線上教學包」是我們在 2021年5月的急案，因為疫情之故，教學都改為線上課程，老師及學生都急需教育部資源。而「線上教學包」，便是在這情境下產生的。 雖然資訊都已經放上網站，但大量的資訊還是讓人頭昏眼花。 「我們需要重整資訊，讓老師、行政人員、家長，都能找到資訊，而且這案子要一個月內上線。對了，這是公部門網站，需要通過無障礙 AA 級。」 <figure> <img src="/dataImgs/portfolio/20/01.png"> </figure> 我們看過網站後 (左邊舊版)，發現有幾個問題： <ol> <li dir="ltr">網站架構不明確，導覽列重複出現</li> <li dir="ltr">相同按鈕樣式，點擊後會對應到 2 種以上路徑，需要重整</li> <li dir="ltr">無法掌握用色邏輯，似乎只有「這裡很重要快看我！」色彩資訊幾乎毫無用處</li> <li dir="ltr">重點很多，但編排沒有邏輯和優先順序</li> <li dir="ltr">沒有 RWD</li> </ol> 我們分析需要： <ol> <li dir="ltr">重整網站架構，改用分頁編排資訊</li> <li dir="ltr">重新規劃每一層編排邏輯</li> <li dir="ltr">重新整理顏色，因為資訊繁多，只能酌量上色，並且只能上品牌色和輔助色</li> <li dir="ltr">表格繁多，未來仍會持續更新。建議採用卡片式，表格式，維持更新彈性</li> </ol> <h2 dir="ltr"> 中間轉折 </h2> 雙方的配合與團隊編制，主要基於以下因素： ☑️ 急件 ☑️ 長官想快點看到結果 ☑️ 報價合理 ☑️ 滾動式修正也不怕 因為是急件，我們採用「設計 x1 + 前端 x1」團隊編制，而後端和後台則請客戶指派一位內部工程支援。我們不架後台後端，而是讓客戶內部工程師來做後台，配合專案 PM 滾動式調整。 <figure> <img src="/dataImgs/portfolio/20/02.png"> </figure> 這樣編制的好處是，可以快速產出給客戶看，也能隨著需求滾動式修正。但缺點是，因為沒有資料庫後端，站內搜尋、運算、自由上架等功能，就無法實現。 團隊架構確定後，我們接著確認網站架構。這是專案開始時最重要的環節，因為我們需要知道網站要開哪幾頁，網站的整體由哪些頁面構成，這影響到工時，同時也會影響報價。這類資料統整與編輯的任務不難，只要有經驗設計師，都能從重複資訊中，抓出導覽列。 <figure> <img src="/dataImgs/portfolio/20/03.png"> </figure> 接下來的任務會進入設計專業範圍。因為資訊繁多，我們需要將資訊分層級，每一層級都有自己編排邏輯和對應行為，才能讓使用者有所依循，不會如同進入迷霧陣。 <figure> <img src="/dataImgs/portfolio/20/04.png"> </figure> 重新編排資訊層級，我們分為三層 <h3 dir="ltr"> 第一層編排邏輯——收合設計 </h3> 運用收合設計，讓資訊壓力減少。只酌量上綠色，作為收合提示。 <h3 dir="ltr"> 第二層編排邏輯——展開主內容 </h3> 預定使用者進場後，會直接看到主內容，預設展開，並且用卡片和表單來整合資料 <h3 dir="ltr"> 第三層編排邏輯——進階內容 </h3> 進階內容是使用者有興趣，才會進一步點擊。因為使用者很清楚知道，自己怎麼來到這一層，輔助提示不需要太顯目，建議使用靠左和灰色來處理。 <figure> <img src="/dataImgs/portfolio/20/05.png"> </figure> 決定好編排邏輯和行為後，用色邏輯也會在此階段一併考慮。 色彩是有意義的，不僅是重點提示，也代表指引。在考慮用色時候，我們會分為： <ol> <li dir="ltr">功能性顏色：開合設計我們採用綠色，讓使用者在網站中，看到綠色符號，就能意會到這是有開和功能的綠色。 另外，我們連結一律使用，藍色底線。使用者只要看到藍色底線，自然會明白這和連結有關。</li> <li dir="ltr">氛圍性顏色：通常會用來襯托，營造氛圍，或是作為裝飾性使用。讓整體網站不會這麼冰冷。</li> </ol> <figure> <img src="/dataImgs/portfolio/20/06.png"> </figure> <h2 dir="ltr"> 技術新視野 </h2> 這次我們第一次經歷過無障礙測試。流程如下： <figure> <img src="/dataImgs/portfolio/20/08.png"> </figure> 順利通過檢測後，會拿到這樣的證明： <figure> <img src="/dataImgs/portfolio/20/07.png"> </figure> 交給窗口上傳後，就能走下一流程 - 人工審核。 我們非常推薦這個社團<a href="https://www.facebook.com/groups/2015338878480237">《臺灣無障礙標章受害者聯盟》</a>。因為無障礙是不斷在更新的法規，檢測軟體 <a href="https://accessibility.ncc.gov.tw/Download/Category/52/1">Freego</a> 也不斷更新，Bug 也不一定會修復。這個社團會發表最新的災情，讓人少走彎路。 <h2 dir="ltr"> 溝通文化 </h2> 這次重點在於如何建立設計邏輯。公部門網站大多兼具傳達、容納資訊的角色，不只是單純官網，更接近產品型網站。 公部門通常也會開立多個子網站，服務不同部門內的業務。其實非常適合建立 UI system ，作為部門設計 Guideline 。 一套良好的 UI system ，會讓使用者覺得，即使在不同網站，也如同使用同一套服務。參考野薑之前的作品<a href="https://www.gingerdesign.com.tw/portfolio/%E6%AD%A3%E6%B3%95%E5%AF%B6%E8%97%8F">《 正法寶藏 》</a>，雖然由不同的設計師經手，但因為有一套良好的 UI system ，後續設計師都能依照 Guideline 實作，風格、體驗、使用者操作，都不會差距太多。 這次也因為先建立設計邏輯，也有助於漸少溝通的量。設計邏輯，可以讓窗口在內部討論時候，有一套規則能在內部回應。和廠商討論時，如果出現不符合邏輯的要求，也可以再回到設計邏輯看看。 比如說，在後期細修時候，窗口反應內部同事需要，將第三層資訊 btn 上亮綠色，因為擔心使用者回不去上一層。那我們就能依據前面規劃邏輯，說明第三層資訊，屬於進階內容，使用者很清楚自己是怎麼來的，不需要擔心使用者迷路。 如此討論，就不會集中在「要不要上色」、或是「上什麼顏色」，而是依循一套用色邏輯在前進。 <figure> <img src="/dataImgs/portfolio/20/09.png"> </figure> 之前舊版網站，會讓人感覺到，用色混亂，到處都是重點。我們猜想其製作的溝通情境是： 窗口：那個按鈕要改成綠色 廠商：好 (快結案吧，你要改啥就改啥) 窗口：不好意思，長官說，那個字體要放大，比較顯眼 廠商：好 (快結案吧，你要改啥就改啥) 窗口：不好意思，內部有同仁反應說，那個要加上粗體，這樣才會被看見 廠商：好 (快結案吧，你要改啥就改啥) 如此一來，就會出現，到處都是重點，到處都是重要的頁面。 窗口不只要面對長官，還有來自同仁的建議，一套經得起考驗的邏輯，在此就顯得非常重要。 團隊 Team 設計、PM | 陳怡君 前端工程師 | 賴佳毅 客戶 PM | 陳子郁 客戶內容編輯 | 陳美汎 客戶工程師 | 小任 <figure> <img src="/dataImgs/portfolio/20/10.png"> </figure> <figure> <img src="/dataImgs/portfolio/20/11.png"> </figure> <figure> <img src="/dataImgs/portfolio/20/12.png"> </figure>

「教育部線上教學包」是我們在 2021年5月的急案，因為疫情之故，教學都改為線上課程，老師及學生都急需教育部資源。而「線上教學包」，便是在這情境下產生的。

教育部線上教學包

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

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

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

Landing page，RWD，CIS，Banner，Poster <figure><img src="/dataImgs/portfolio/04/web.jpg"><figcaption>landing page</figcaption></figure><figure><img src="/dataImgs/portfolio/04/demo.gif"><figcaption>demo product</figcaption></figure><h3>Business Card CIS</h3><figure><img src="/dataImgs/portfolio/04/card.jpg"><figcaption>Business Card CIS</figcaption></figure><figure><img src="/dataImgs/portfolio/04/spec.jpg"><figcaption>Business Card CIS</figcaption></figure><h3>Exhibition Banner</h3><figure><img src="/dataImgs/portfolio/04/banner.png"><figcaption>Exhibition Banner</figcaption></figure><figure><img src="/dataImgs/portfolio/04/banner2.png"><figcaption>Exhibition Banner</figcaption></figure><h3>Reality Photo</h3><figure><img src="/dataImgs/portfolio/04/exhibition.png"><figcaption>reality photo in exhibition</figcaption></figure>

Landing page，RWD，CIS，Banner，Poster

Checkin+

只是搜尋框「而已」，有這麼多事情可以特別來寫一篇文章嗎？有的！其實搜尋框的各種細節，包含的都是設計師的貼心！ 隨著智慧型手機與網站的發展，搜尋框（Search Bar）已經是大家生活中隨處可見的日常功能。搜尋框看似很普通常見，但隨著近年網站設計的演進，也逐漸累積出一些好的設計作法（design guildeline），提供設計師作為參考。「好的設計就是讓你感覺不到它」，這句話適切地對應於搜尋框的設計中。 <figure> <img src="/dataImgs/blog/38/01.png"> </figure> <h2 dir="ltr"> 外觀不會有預期之外的設計 </h2> 搜尋框之於網站，已經逐漸類似於我們生活中的筷子或是菜瓜布這樣的日常用品，雖然設計師還是可以設計出美麗的筷子和菜瓜布，但不會過度著重於造型而使其功能無法發揮。搜尋框最好的狀態即是讓使用者一看就知道這是什麼，並且一看就知道怎麼用。 <ul> <li dir="ltr">使用已經約定俗成的放大鏡 icon</li><li dir="ltr">注意搜尋框高度與放大鏡 icon 視覺平衡</li> </ul> <h2 dir="ltr"> 固定出現或是隱藏 </h2> 由於搜尋框的功能性強，當使用者想使用它的時候，最好擺在他隨時都找得到的地方。通常會放在最上方的 navigation bar 中，使得全站的每一頁都得以使用搜尋功能。不過相對的，如果搜尋框在這個網站的功能性並不是太重要，也可能只放在某個固定的地方，或是只以放大鏡顯示，使用者需點擊放大鏡，才會出現搜尋框。 <ul> <li dir="ltr">以功能的重要性判斷搜尋框是固定出現或者隱藏</li><li dir="ltr">避免搜尋框的四周有過多按鈕影響操作（一般而言 navigation bar 中按鈕不要超過五個）</li> </ul> <h2 dir="ltr"> 預填文字提示搜尋框的功能 </h2> <figure> <img src="/dataImgs/blog/38/02.png"> </figure> 預填文字是重要的設計，這些文字必須簡潔明快遞提示使用者，讓使用者能夠照著我們所預期的方式來搜尋，換言之，提醒使用者這個搜尋框究竟可以拿來搜尋出些什麼？進而協助使用者達成他們的目標。 <figure> <img src="/dataImgs/blog/38/03.png"> </figure> 以上面 booking.com 為例，使用問句「你要去哪裡？」的方式，帶給使用者親切的感受，同時也很明確地能讓使用者回答出地點。後面的「日曆 icon 、入住、退房」也很明確能讓使用者知道要輸入時間。最後的「2位成人、沒有孩童入住、1間房」則是讓人知道這幾個要填的答案，在透過下拉式選單選到自己想選的選項。同時，這些變量也都是在找房時必填的選項，透過框線區隔，可以避免使用者漏填其中的項目。 <ul> <li dir="ltr">預填的文字提示是使用者行為的明確協助</li><li dir="ltr">視情況可以使用問句或是選項預填</li><li dir="ltr">必填的資訊可以在搜尋框中分欄設置</li><li dir="ltr">內置預填的文字通常不會用色太吸睛，避免反客為主</li> </ul> <h2 dir="ltr"> 輸入時的即時提示 </h2> <figure> <img src="/dataImgs/blog/38/04.png"> </figure> 搜尋的行為正在進行中的時候，也有許多小細節，不過這通常出現在較大型的服務之中。以 Slack 為例，除了預填的字會隨機更換「Search high and low」和「You’re digging in the right place」之類意圖使人工作起來減壓的話，也做出了相應的提示功能，像是可以選擇搜尋的檔案類型，是「訊息、檔案、頻道、個人帳號」等，同時也會顯示出過去搜尋的紀錄。此外，後端的叉叉，點下去時會清除搜尋結果，回到搜尋前的畫面，有些搜尋框會以「clear」文字來提供清除的功能。 <ul> <li dir="ltr">提示先前搜尋過的字詞</li><li dir="ltr">提示建議搜尋的字詞</li><li dir="ltr">清除搜尋字詞</li> </ul> 平常用得很習慣的搜尋框是不是原來暗藏著許多小細節呢？有時候在討論網站設計時，會想到「如果有搜尋功能的話好像很不錯」，不過還需要進一步去想：「使用者在這裡想要搜尋到什麼呢？」依據不同的需求，也就衍生出很多不同的搜尋框設計。

隨著智慧型手機與網站的發展，搜尋框（Search Bar）已經是大家生活中隨處可見的日常功能。搜尋框看似很普通常見，但隨著近年網站設計的演進，也逐漸累積出一些好的設計作法（design guildeline），提供設計師作為參考。「好的設計就是讓你感覺不到它」，這句話適切地對應於搜尋框的設計中。

Blog 文章

文章分類

以下是【 UIUX 設計】有關的文章

如何設計好網站的搜尋框（Search Bar）？

教育部線上教學包

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

Checkin+

Blog 文章

文章分類

以下是 【 UIUX 設計 】有關的文章

如何設計好網站的搜尋框（Search Bar）？

教育部線上教學包

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

Checkin+

以下是【 UIUX 設計】有關的文章