---
# System prepended metadata

title: 設計原則分享

---

---
tags: Learning Resources
---

# 設計原則分享

1. 必須有 UI 規範
2. 響應式開版：電腦1920px 平板768px 手機375px
3. 所有左右留白不要出現不相等的情況
4. 圖片如為 png 請確實收邊到沒有多餘空白
5. 設計稿上的內容區塊請設計師不要出現空白的大型圖層
6. 可以善用文字粗細、文字字體的變化增加網站層次
7. 設計時所有東西的比例請符合實際使用場合(EX: 1920px 的文字不要太小、375px 的文字不要太巨、按鈕的點擊範圍至少要大於 30px＊30px)
8. 設計要保有一致性，同個網站不同頁面請不要當成全新在製作
9. 設計時需排版出標題文字有長有短的樣子，千萬不要一個標題長度用整案，這樣的設計會出很多問題
10. 設計完成後的東西先不要急著討論，先自行審視看看有沒有問題，避免浪費溝通時間
11. 注意物件主從關係，副物件需依照主物件做排版比例調整

---

## SHOPLINE 原則

1. 內建的網站斷點在 1199px 以下會直接切成手機版瀏覽
2. 默認同一個 row 底下的 col 都會是均分、間距也不可調整(牽一髮動全身)
3. 商品總覽電腦版不管多大螢幕，默認就是一行三個
4. 手機版商品總覽頁不會顯示分類選單，但分類選單會出現在手機版的展開選單列(SideMenu)裡面
5. 手機版展開選單列裏面，默認不會顯示結構的大標題(目錄=>menu、分類=>category、其他=>sign in/up)
6. 商品細節頁可調整幅度較低，版型上不太可能變更
7. 默認的表單可調整幅度較低，雖然可以靠程式碼調整版型，但頂多將內容與表單區分成左右區塊，無法大幅度改動
8. 通常一張背景圖可完成的東西，建議都不要拆成很多張小圖案，響應式的絕對定位很容易跑版，假設一定要拆，也請不要將小圖案放置在很難定位的地方，通常都放在邊緣角落
9. 設計時必須避免一些太陽春的設定(EX: 連結用下底線、滑鼠移入完全不會動、原本 shopline 那種標題下方短底線的設定)
10. 字體大小盡量在每一頁看都統一，但其實預設頁面通常都會有刪不完的默認樣式，所以請至少確保每一頁由我們全新建立的進階分頁字體大小要一樣

---

# 設計/開發原則

設計稿進入精稿後
如已看過至少兩次且沒有大調整則算定稿
定稿後 須合理拒絕客戶臨時提出的大改或增加頁面的需求

Shopline 客製化網站
公司這邊僅負責網站設計與前端開發製作
不會包含協助產品上架之類的瑣事
所有屬於 shopline 原生的內容都是由客戶方自行與 shopline 專員溝通
我們只負責設計&製作前端版型，其他一率不包含在我們的責任裡面
（比如一些純文字沒有設計的條款內容頁面就屬於客戶自行建置）
任何不是我們應該負責處理的內容，我們頂多只能指導客戶方如何操作
但絕對不會也不該是由我們親自幫客戶做建置
如果是一些超出我們知識範圍的部分，也是由客戶方自行與 shopline 專員詢問

開發中的案子會以設計稿內容為優先置放
後續上架前幾天才會開始逐步改成客戶方要的文案&圖片
如果客戶方不能提供，我們也沒辦法置換
完成開發後進行交接會將文案&圖片在哪邊更改全權通過教學筆記交接給客戶方
以確保客戶方在離開我們公司後可以自行編輯
如在客戶方自行編輯的過程中有出現任何問題，我們可以即時協助處理
當客戶方文案&圖片長時間無法提供，可能要考慮是否先結案&交接給客戶方
不要讓案子卡住，一直等對方提供資料

---

# 雅萱的原則

1. 如果是由外部提供設計稿的話，必須為 XD Figma Zeplin 等格式的完整設計稿，且必須至少提供三種響應式設計(電腦、平板、手機版)，並配上完整素材，否則工程端無法製作。
2. 一般來說，單個頁面至少前置作業時間要抓兩週，一週用來安排製作時間、一週用於溝通成本(兩週是最低標準時間，如果頁面很複雜需要再更早，需要先與工程師溝通才能確定是否接案)。
3. 製作或修改網頁時，如需修改大量文字，必須提供文字格式檔案給工程端，讓工程端可以通過完全的複製貼上方式進行製作或修改。(例如：excel 表格格式嚴禁通過截圖方式提供、文案修正嚴禁通過圖片方式描述。)
4. 每週同時進行的案子最多三個，如果臨時要接新案確認會超過的話，需要重新安排所有專案的優先程度。

---

# 網頁設計流程
1. wireframe 詳細的繪製，所有狀態、細節等皆要繪製，盡量使用真實文案，通常抓兩週時間，將全部網頁繪製出來才與工程師進行討論。
2. 在 wireframe 階段即將每個行為的 flow 排列出來，要明確的了解每個頁面如何串接，所有可能性皆要考慮到，抓一週時間
3. wireframe 與 flow 確定後，就進入精稿，如果 wireframe 與 flow 有需要修改，與精稿同時進行。
4. 開始精稿前，需先整理 guide line，精稿要完全符合 guide line，完稿抓兩週時間。
5. 精稿調整時間抓一週，如已看過至少兩次且沒有大調整則算定稿。
6. 頁面動態依需求添加，可直接找範本與前端討論。