<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>Landing page，RWD，CIS，Banner，Poster<br></p><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><i>reality photo in e</i>xhibition</figcaption></figure>

Landing page，RWD，CIS，Banner，Poster

Checkin+

<p>P M｜聯經</p><p>設計｜陳怡君</p><p>前端｜Dana</p><p>後端｜Superbil</p><p>主要功能 : 斷詞功能、日期過濾、單位過濾、tag帶入搜尋、關鍵字過濾。</p><p>處理技術：斷詞分析/文字探勘 - Superbil</p><figure><img src="/dataImgs/portfolio/12/new_audit.gif"></figure><figure><img src="/dataImgs/portfolio/12/color.png"></figure><figure><img src="/dataImgs/portfolio/12/web.png"></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）？

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

Checkin+

資料工作坊-審計部

Blog 文章

文章分類

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

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

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

Checkin+

資料工作坊-審計部

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