為什麼會想寫這篇
雖然網頁設計看起來跟平面設計非常類似，只要出個美美的網頁視覺圖讓PM滿意、客人也開心就好棒棒。
初次製作網頁設計稿的人可能看著前輩的網頁視覺圖做了新專案出來，結果跟自己想像的完全不一樣，花了很多時間還是被說設計得很奇怪。
其實網頁設計有很多的魔鬼小細節阿~
這篇文章會寫一些我個人在製作網頁視覺稿上常使用的小技巧，希望能幫助些想了解網頁設計卻不知道從何開始的人。
一定要懂HTML和CSS嗎？
應該很常聽到要做網頁設計要會寫HTML/CSS比較好，但個人覺得如果只是單純做視覺設計稿的話，完全不懂也是沒關係的！
請注意：我指的是當你的工作只需要做網頁視覺稿狀態下，如果你的工作有需要做出一個由HTML/CSS構成的網站，不懂HTML/CSS真心安堆~~
本文中所說的網頁視覺稿範例如下：
了解HTML/CSS的用意是在於讓你對於網頁設計這塊能更快進入狀況，但我身邊有些設計師朋友也是完全不懂HTML/CSS，一樣能設計出美美的視覺稿，切圖製作成HTML上也沒什麼大問題。
一切都是時間和經驗的累積！
就像平面設計師一樣，隨著設計的次數越來越多，你越能知道該用什麼配色、字體、排版來讓客人滿意，從而讓設計稿過關。
不同團隊會有不同的網頁設計規範和規格、工作流程，當然要遵守團隊的設計規格才不會瘋狂被打槍。
考慮到不同團隊的規格會有些微的不同，這篇不會講太深入的部分，而是會從四大部分來和大家聊聊製作網頁視覺稿要注意的小魔鬼。原則、版面、色彩、字體等等基本知識
關於使用的軟體
業界目前常見使用在網頁設計上的軟體不外乎就是Adobe XD、Sketch(Mac Only)、Figma或者是Photoshop、Illustratorm。
其中Adobe XD、Sketch是專門為了製作UI介面而開發的軟體，所以使用上非常容易上手，大家不用擔心會不會要學很久。我周遭的業界朋友也都是使用這兩套軟體居多，如果想了解兩者的細節分別可參考下文：
每件事情總會有例外，我就是其中一個例子。
雖然我也用過Adobe XD和Sketch設計網頁視覺稿，不過都是應用在個人的SideProject，工作上還是使用Photoshop居多。
本篇不會和大家分享這些軟體的操作使用喔~~不過Photoshop在製作UI介面/網頁視覺上會有一些雷點，下面會盡量提出來跟大家分享那些雷點盡量不要踩下去卡好。
設計原則
- 簡單、清楚明瞭的畫面
過度設計的網頁畫面可能會讓瀏覽者找不到想要的資訊，雖然小元素的點綴可以適時地增加網頁活潑度，但這並不代表你就要塞好塞滿。
什麼東西都塞一起很容易造成視覺疲乏，充分利用空間讓瀏覽者可以輕鬆地將注意力集中在主要資訊上，並且可以輕鬆瀏覽網站內容。
2. 一致性
網頁的元件維持樣式的一致性，可以避免造成工程師開發製作的負擔。
就像企業 CIS design （Component Information System）決定了之後就要從一而終一樣，一個統一的視覺規劃，可以增加網站的完整性，減少使用者困惑的產生，並提升使用的流暢度。
3. F式佈局
在絕大多數的國家或語言習慣中，F式佈局是相當符合閱讀習慣的，我們可以透過這樣的設計手法製作更有層次感的網頁，方便使用者瀏覽獲得資訊。
網頁版面
- Grid 格線系統與RWD 響應式網頁
透過格線系統(Grid System)可以讓網頁排版看起來更整齊，關於格線系統的詳細介紹可以參考下文，這邊不會講得太細XD
像是一般書籍或紙本宣傳物在製作時，會將重要內容放置在裁切邊界內縮 10–20mm 的安全線內，不讓重要內容貼邊一樣。網頁的視覺設計也必須盡量將內容限制可視範圍內，以確保視覺瀏覽的舒適性。
目前常見的電腦螢幕寬度分別是 1280 px、1440 px、1920 px，在製作時我個人會使用1920的寬度去製作(12欄的寬度)，並把網頁內容放置在1400的寬度內。
⚠小提醒：製作視覺圖時我也會特別把間隔的高度抓相同高度，這樣視覺看起來有一致的美感，另一方面則是讓開發者設定全網站可用間距時可以統一帶入。
如果需要製作RWD 響應式網頁視覺時，請記得一個大原則：保證網頁的易讀性和使用流暢性。
千萬別想著要在iPhone SE的小螢幕中(寬度320px)，把5個產品塞在同一排中，這只會是悲劇，活生生的悲劇(如下圖誇大範例)
2. 明確的區塊劃分
網頁的呈現方式通常以區塊為單位，一個畫面高度內，一般只會出現一個區塊的完整內容，避免分散視覺重點。而在一個區塊中，你也需要極力避免兩種或多種互不相干的資訊同時出現。
如果沒有明確的區塊劃分，在同一個高度畫面內塞入太多資訊，並且缺乏足夠的排序邏輯。 使用者很容易迷失在混亂的資訊中，浪費許多時間也找不到自己需要的功能或資訊。
⚠小提醒：如果使用Photoshop製作的話，強烈避免以下雷點：
- 盡量不要使用『色彩增值』的混和模式(可能會發生下圖情況)
- Photoshop的陰影呈現會和網頁實際呈現有落差
3. 命名與標註
雖然命名沒有一定的標準，多是以各團隊為主。經過命名整理後的圖層與切圖會整齊許多，自己修改內容、工程師開發時也能輕鬆找到對應的元件。
網頁色彩搭配
避免使用過多的色彩，個人建議整個網站大約使用2~3個色彩就足夠。挑選一個主色系，其餘部分用到的色彩僅有到點綴，使你的網站設計更加平衡。
另外，利用空白區域加入排版設計，可以避免你的網站出現視覺混亂。或者多看看其他人的作品也能作為靈感來源：
網頁字型/字體
為了確保使用者在不同瀏覽環境也能看到同樣的字體，一般只能使用系統內建字體(微軟正黑體、標楷體、蘋方)。如果有特殊字體需求的話，最保險的做法就是做成圖片。(但有可能客人從此纏上你，一直叫你幫他改字)
另一個讓網站字體多樣化的方案就是採用Web Fonts(雲端字型)，但是中文的webfont 服務通常都需購買授權才能使用，個人最常遇到就是影響網站載入速度...
由於網頁並沒有像繪圖軟體那麼的自由，設計上需要特別注意的大概就是字體大小的部分了。
目前來說，網頁開發大多都是使用 16px 作為基準字，如果你是使用Adobe XD、Sketch進行網頁視覺設計，恭喜你！不用特別注意字體大小，直接依照軟體內文字大小使用就好。
但要注意：預設值為 16px 時，應避免出現 17px, 21px, 25px 這種尺寸造成轉換上的困擾，盡可能維持相同邏輯在執行網頁設計。
使用Photoshop的朋友們就要多注意了，因為軟體內的文字單位是 pt，直接把他當成網頁「螢幕顯示」時的單位也是個悲劇~~
以下提供個人實際採用Photoshop製作網頁視覺圖時所使用的文字設定值，僅供參考~大家也可以用一套你覺得設計出來最有個人風格的設定值。
- 內文(基準字)：10pt
- 大標題字：16pt
- 小標題字：12pt
以上就是這次分享內容，希望能幫助到跟我當初一樣迷茫、不知道要怎麼設計出好看的網頁視覺圖的人，如果有任何疑問歡迎在下方留言唷！
你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！
【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂
