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

教育部線上教學包

<figure> <img src="/dataImgs/portfolio/19/01.png"> </figure> <h2> 梓書房 PAPER BOOKS </h2> <h1> 從部落格搬家到訂作的特色二手書櫃 </h1> <p> <a href="https://www.paperbooks.tw/">Website Link →</a> </p> <p dir="ltr"> 梓書房是座落於台中福人街的獨立二手書店，因書店主人選書、收書的獨到品味，以及在書架間穿梭的貓兒，成為熱愛閱讀的文藝讀者們心中，美麗且溫暖的淘書角落。 </p> <p dir="ltr"> 網路書店的網站建置，多以大量販售、電子商城的購物車操作為主，然而，讀者在二手書店更看重的是書店選書的品味眼光，及其經驗老到的尋書門路。與販售新書的書店相比，這些書在來到梓書房的過程也有更多的故事，因此，書店經營的記事也是吸引讀者的亮點之一。原先梓書房以部落格 Blogspot 與臉書作為網路經營的渠道，然而制式部落格有許多功能限制，也較難與讀者互動。 </p> <p dir="ltr"> 因此，透過官方網站的設計，將電子報、與讀者的互動計畫、書籍資訊等加以整合，除了讓品牌形象更完整外，也更便於讀者接收資訊、理解書店現況。 </p> <h2> ｜將焦點留給擅於收書的書店主人 </h2> <figure> <img src="/dataImgs/portfolio/19/02.png"> </figure> <figure> <img src="/dataImgs/portfolio/19/03.png"> </figure> <p dir="ltr"> 極簡的版面配置，節制的配色使用，讓視覺的焦點能夠聚焦於書籍封面，突顯書店主人選書的特色，讓美麗的書籍封面，增加想要收藏書本的感受，彷彿再現書店裡的書櫃。點擊這些書籍封面，則可深入閱讀店主所撰寫的選書訊息。 </p> <p dir="ltr"> 配色僅使用黑白的灰階色調與深淺兩種咖啡色來點綴。雖然是整體而言是簡約的配色，但在各種不同類型的文字資訊，因應資訊的重要程度，使用深淺不一的灰階，在細節製作出舒適的閱讀體驗與層次感。 </p> <h2 dir="ltr"> ｜與讀者更多可能的互動與討論 </h2> <figure> <img src="/dataImgs/portfolio/19/04.png"> </figure> <p dir="ltr"> 絕版付梓則是最能彰顯梓書房特質的計畫。在絕版付梓的頁面中，透過讀者的許願、線上投票，選出自己心目中最想再版的書籍。這些票選雖不能直接等同於再版保證，但或可作為未來再版實踐時的重要參考。 </p> <p dir="ltr"> 透過客製化且簡單的投票設計，增加網站與讀者互動的可能性，同時也可以搭配不同檔期，得以引發話題討論，促進交流，是從部落格到客製網站最為關鍵的轉變。 </p> <h2 dir="ltr"> ｜貓咪與書的日常生活 </h2> <p></p> <p dir="ltr"> 首頁書店日誌，設計為滑鼠移動 hover 到右側不同篇貼文時，左側的照片會因應更換。愛貓的店主人擅長攝影，在她的鏡頭裡得以看見貓咪與書一起生活的日常片刻。因此在這裡的設計，盡可能將這些照片以較大的排版呈現，但同時又不致於過度紛雜，呼應書店寧靜怡人的氛圍，展現貓咪作為梓書房的特色。 </p> <h2> Design Overview </h2> <figure> <img src="/dataImgs/portfolio/19/05.png"> </figure> <figure> <img src="/dataImgs/portfolio/19/06.png"> </figure> <figure> <img src="/dataImgs/portfolio/19/07.png"> </figure> <h3 dir="ltr"> 專案團隊 Team </h3> <p dir="ltr"> 專案管理 | 陳怡君<br> 視覺設計 | Hanyu Chen<br> 前端工程師 | 陳怡婷<br> 後端工程師 | 彭郁斐 </p> <p></p>

透過官方網站的設計，將電子報、與讀者的互動計畫、書籍資訊等加以整合，除了讓品牌形象更完整外，也更便於讀者接收資訊、理解書店現況。

梓書房-官方網站設計建置

<figure><img src="/dataImgs/portfolio/03/web.jpg"><figcaption>方案頁</figcaption></figure><figure><img src="/dataImgs/portfolio/03/banner.png"><figcaption>Banner</figcaption></figure>

有物報告

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

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

Blog 文章

文章分類

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

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

教育部線上教學包

梓書房-官方網站設計建置

有物報告

Blog 文章

文章分類

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

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

教育部線上教學包

梓書房-官方網站設計建置

有物報告

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