設計稿

網站設計稿一般會給幾款？

設計稿要給幾款，業界並沒有統一標準。大致可分成兩種做法：一開始就拿到2~3款方向不同的設計稿再選一款，或是拿到單一方向的設計稿再反覆修改調整。

款數多不一定比較好。設計稿越多，每一款能投入的時間就越少，有時反而會拿到好幾款大同小異的提案。比起款數，更重要的是同時確認「一款設計稿可以修改幾次」。

像手作工坊這種以作品照片為主的店家，比較適合用一款設計稿把照片配置仔細調好；需要從頭決定風格的新店家，則比較適合比較多個方向。

不管哪一種做法，在第一版設計稿之前先把想要的風格用文字整理好，結果會更快出來。像「溫暖的木質感」、「乾淨的白色背景」這樣給兩三個形容詞，再附上參考網站，第一版設計稿就比較不會大幅偏離方向。

設計稿會用什麼形式交付？

設計稿通常會以圖片檔、設計工具的分享連結，或可以實際點按的預覽連結其中一種形式交付。形式不同，能確認的範圍也不一樣。

圖片設計稿看起來很快，但很難知道文字在手機上實際會顯示多大。所以如果拿到的是圖片，最好一併要求手機畫面版本。

不管是哪種形式，設計稿檔案或連結老闆自己也要保存一份。如果是設計工具的連結，也先確認不用登入就能打開，之後需要和「最初定案的樣子」比對時，就能馬上拿出來看。

如果設計稿是用可以實際點按的預覽連結交付，設計稿和完成畫面的落差會比較小，後面階段比較不會有意外。不過，在這個階段最好連一個字都仔細看過。

• 圖片・PDF：在哪裡都打得開，但不能點按操作
• 設計工具連結：方便放大畫面查看，也能在各個位置留下意見
• 預覽連結：可以在真的手機上捲動、點按按鈕試用

拿到網站設計稿要先確認什麼？

看設計稿時，與其先看「漂不漂亮」，不如先看「客人能不能很快找到想要的東西」。設計喜好之後還能改，但資訊不容易看到的結構，會讓客人直接流失。

確認時，請模擬客人實際使用的情境。在明亮的戶外把手機亮度調低，看看字還讀不讀得清楚；單手拿手機，看看大拇指按不按得到按鈕，就能發現光看截圖很容易漏掉的問題。

看設計稿時，可以把「自己的喜好」和「客人的喜好」分開想。就算不是老闆喜歡的顏色，只要主要客群讀起來輕鬆、覺得值得信任，也可能是一份好的設計稿。

1. 01用手機打開設計稿，寫下前3秒最先注意到什麼。
2. 02把自己當成客人，把「確認價格 → 預約」這類動作從頭到尾走一遍。
3. 03逐一核對店名・電話號碼・營業時間・價格是否正確。
4. 04標出放了暫用照片的位置，決定什麼時候寄出真正的照片。
5. 05把喜歡的部分和想改的部分分開，一次整理好再寄出。

進入設計稿階段前要準備哪些資料？

真實資料越早到位，設計稿就越接近完成品。用暫用照片做的設計稿，放進真實照片的那一刻風格可能就變了，等於同一份設計稿要看兩次。

例如美髮店有每位設計師的照片和服務價目表、手作工坊有作品照片和課程時間表，設計稿的準確度就會大幅提升。照片不夠的話，請在設計稿之前就先決定要新拍哪些照片。

如果很難一次把資料備齊，就排好優先順序再寄。只要先提供首屏要用的主打照片和店家介紹文字，設計稿的整體風格就能抓得很接近實際。

• Logo原始檔（可以的話，請提供放大也不會模糊的檔案）
• 店面・菜單・作品照片（用手機拍的照片，只要明亮清晰就夠了）
• 價目表・營業時間・公休日・停車資訊
• 兩三行介紹店家的文字
• 2~3個喜歡的網站，以及一句喜歡的理由

設計稿定案是什麼意思？

設計稿定案，就是同意「可以照這個設計方向來製作實際網站」的階段。定案之後，就會開始依照設計稿把畫面轉成程式碼的切版作業。

定案後如果要改整體配色或頁面結構，已經做好的畫面就得重做，可能會延誤時程或產生額外費用。像錯字修正、換照片這類小幅修改，通常定案後也還可以改。

定案最好不要只用口頭說，而是透過訊息或email這種會留下紀錄的方式。之後要互相確認「什麼時候決定了什麼」會比較容易。

定案時，也要講清楚手機畫面和電腦畫面是不是一起定案。只看其中一邊就定案，另一邊之後很容易又冒出意見。

簽約前要問清楚哪些和設計稿有關的事？

設計稿是對製作成果影響最大的階段，簽約前先確認做法和範圍，糾紛就會少很多。

也要問清楚，設計稿裡的暫用照片能不能直接用在正式上線的畫面上。暫用照片可能只是放進去確認用的，要用在正式網站上，可能需要另外取得使用權。

設計稿階段的時程也要先確認。知道第一版設計稿要幾天才會出來、給回饋之後修改版幾天會回來，就能比較實際地抓出整體上線日期。

• 設計稿會給幾款、用什麼形式（圖片・連結）交付
• 會不會另外提供手機畫面的設計稿
• 設計稿的修改是否算在總修改次數裡
• 定案後的大幅變更會怎麼處理
• 什麼時候把暫用照片・文字換成真實資料