網頁設計雖然看似只是載體不同的平面設計，但內在設計邏輯卻與一般平面設計大有不同！
他們就像一對長得很像但個性完全不同的雙胞胎，如果忽視它們的不同，照搬與姊姊的相處經驗去應對妹妹，極大可能會雷殘翻車，使你的專案變成一場巨大的災難。本篇心得想分享的，就是我當年摔過的跤，希望藉由小小的心得歸納，能讓對網頁設計有興趣的人對它有一些基礎的了解（真的很基礎）。
那我們開始吧！
一、 RWD 響應式網頁設計
響應式網頁 (Responsive web design) 就如他名字所述，是一種能夠靈活適應各種瀏覽器寬度尺寸，使網頁在所有設備上都能達到良好瀏覽體驗的設計。這項功能主要仰賴程式語言實現，但與視覺設計同樣有著不可分割的關係。如果在平面稿製作時沒有考慮到相關規範，除了會導致工程師作業困難，還會有瀏覽器一縮放，畫面比例就立刻走鐘的慘劇發生。
由於坊間已有許多 RWD 的大神教學文章，加上這裡面有太多東西太多狀況可以說。這裡就只分享我初學時學到的第一個最基礎的概念：
「內容寬度限制」
像是一般書籍或紙本宣傳物在製作時，會將重要內容放置在裁切邊界內縮 10-20mm 的安全線內，不讓重要內容貼邊一樣，網頁的內容寬度限制同樣是為了確保視覺瀏覽的舒適性。
打個比方，目前常見的電腦螢幕寬度分別是 1280、1366、1920，通常在製作時，我習慣開最大的 1920 寬進行視覺稿製作，如果我沒有設置內容區域，將 1920 的寬度全部塞滿內容，此時在13吋的小筆電上看或許很正常，但當你的螢幕變成了兩倍甚至三倍大時（比如桌電的 27 吋螢幕），網頁的顯示效果將會變得十分巨大和壓迫，同時也因寬度過寬，閱讀時會十分吃力。
因此我的習慣是，將文字內容盡量放置在 1200 的寬度內，這樣能夠讓網頁視覺比較集中，因為視線範圍限制，比較靠邊的內容容易被忽略。
當然這個寬度並不是定死的，在某些區塊為了氛圍張力，滿版設計也十分常見，這包含但不限於 kv、banner 區塊。當區塊樣式為多格設計時，也滿常會看到寬度拉成滿版的設計，因為每個格子內的資訊是各自獨立的，所以即使寬度滿版，也不會造成閱讀的不便。
二、區塊內容與功能規劃
一般海報或平面製作中，一張載體裡需要傳達的通常是單一事件資訊，比如演唱會的海報上，展示的就會是與演唱會相關的時間、地點、售票資訊等等。
而網站則是許多資訊的集中站，時常同時兼負資訊傳達、資料收集與釋出、商品交易等功能。比如售票網站，它需要同時展示目前上架售票的活動，這可能包含許多類型，可能有戲劇、歌劇、演唱會或演講，當這些資訊都需要出現在一個頁面中，如果視覺沒有做出適當的區別或分類，使用者就很難在這之中找到自己需要的東西。尤其在許多時候，網站不只擔任了資訊展示的工作，同時也會提供其他例如：商品訂購、聯絡客服、條件搜尋等功能。因此如何在展示豐富資訊的同時，保證網頁的易讀性和使用流暢性，就成了網頁設計中重要的目標之一。
在這個部分，我認為有兩個特別重要的重點：
- 明確的區塊劃分
網頁的呈現方式通常以區塊為單位，一個畫面高度內，一般只會出現一個區塊的完整內容，避免分散視覺重點。而在一個區塊中，你也需要極力避免兩種或多種互不相干的資訊同時出現。
PChome 由於歷史悠長，設計較為古早的首頁可以作為一個參考。
它沒有明確的區塊劃分，在同一個高度畫面內塞入太多資訊，並且缺乏足夠的排序邏輯。 使用者很容易迷失在混亂的資訊中，浪費許多時間也找不到自己需要的功能或資訊。
2.遵守使用習慣共識
這大概是我前期摔最多次坑。 因為前一份工作每天都在聽「這個想要有點不一樣」、「那個我想再有創意一點」等等的要求。 所以剛轉職的時候，就會很習慣性的自作小聰明，把一些按鈕物件放到一些意想不到的地方，或做成一點也不直覺的樣式。
那時我覺得這是對作品用心，但實際上就是好心辦壞事……
總之從這個坑裡摔了幾次後，我終於領悟了網頁設計最重要的，就是時刻站在使用者的角度想。思考該怎麼讓使用流程方便流暢，不會讓使用者浪費時間摸索功能，最後失去耐心按叉離開。
一個實用導向，目的明確的網站，美感不能凌駕於使用體驗之上。
所以遵循使用習慣，讓功能鍵待在大家習慣的地方，讓按鈕長成他該長的樣子，是非常重要的事。 舉例來說，台灣網頁使用習慣上，視窗關閉按鈕通常都在右上方，這時如果為了好看特別，把關閉 lightbox 的叉叉放到左邊中間還做成四葉幸運草的樣子，使用者就只會以為那是裝飾，然後抱著疑惑離開網站。(只是一個比較誇張的舉例）
三、樣式統一！從一而終總是比朝三暮四讓人留下好印象
這和上一段的內容其實有點相關。 有些客戶或者設計師，可能會為了讓每個頁面看起來「有設計過」，而要求每個頁面都做不一樣的設計，顏色、物件樣式、字級大小，通通都要有變化。但這其實對網站來說並不會有加分效果，還容易造成工程師開發製作的負擔。就像企業 CIS design （Component Information System）決定了之後就要從一而終一樣，一個統一的視覺規劃，可以增加網站的完整性，減少使用者困惑的產生，並提升使用的流暢度。而由於同樣的物件樣式可以重複使用，更可以大大的提升前端開發效率，減輕工程師們肩膀上沈重的負擔。
另外！維持樣式的統一，除了能提高網站可用性，對需要做成無障礙網頁的專案也是一個很重要的要點。因為對有認知障礙的朋友來說，具有一致性的流程設計，能避免他們每到一個新頁面，都需要重新學習不同的流程的麻煩，這對他們來說更為友善和易於使用。
現行許多 UI 工具例如 Xd、figma、invision 都有支援物件資料庫儲存功能。
善加利用這個功能，不只能讓你後續頁面的設計製作加速，當你的專案團隊中有多名設計師共同作業時，也能有效避免大家的頁面長得都不太一樣，讓網站看起來像個拼貼怪的問題。
四、善用動畫和互動功能！
網頁相比傳統平面最大的優勢，除了傳播快方便看之外，就是他可以動、可以和使用者互動反饋。 這讓視覺不再僅局限於平面，有了更多表現形式的可能。 而在許多時候賦予物件動態效果，會比單純的為物件做出浮誇的視覺樣式更為高明，引人注意。同時，我們也不再需要將所有的資訊都在一開始呈現，可以將比較細節的部份留在 hover 時呈現(例如一開始只有標題，hover 時圖片變黑，簡述文字浮出)，不只可以讓畫面變得簡潔，也能增加與使用者的互動性。
比如按鈕，比起用盡渾身解術，做一個超精緻的華麗按鈕，簡單的為它設計一個 hover 動畫，或許更能讓人眼前一亮。
感謝你\妳花時間看完這一串落落長的心得分享！關於網頁需要注意的還有許許多多，但篇幅限制，只挑了我印象最深刻的部分，希望這小小的分享有幫助你。
我們下篇文章見：）！
