--- 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. 頁面動態依需求添加，可直接找範本與前端討論。