iT邦幫忙

DAY 31
4

30天掌握Sass語法系列 第 27

Sass開發流程設計 - (1) 切圖、規劃Layout

關於Sass的基礎在前30天已經介紹得差不多了,
但畢竟理論的東西要導入自己的實務開發流程始終會有陣痛期。
所以之後的文章我會用Sass從無到有實際做一個版型出來,
讓大家了解使用Sass來開發網頁的眉角與思維,
藉此縮短大家使用Sass的撞牆期^_^

暫時第一個版型規劃內容天數如下:

01:切圖、規劃Layout
02:全域變數、HTML設計
03:Sass&Compass實際撰寫(上)
04:Sass&Compass實際撰寫(下)
05:常用Mixin設計

那麼就讓我們開始吧^_^


今天前端設計師拿到美術設計師設計出來的版型時,
不會馬上就會先做切圖的動作,
而是先思考該如何規劃Layout,
以及有哪些元素上的設計可能實做出網頁會有問題,
信手拈來想到的有:
(1)背景沒考慮銀幕解析度來去做延伸
(2)元素內的文字沒考慮如果呈現多行時,設計也必須延伸
(3)網頁字型沒考慮到網頁預設字型
(4)hover過後的按鈕樣式並未提供
(5)沒有grid的觀念,每個頁面元素寬度不一
(6)設計的頁面沒辦法程式化
(7)動畫效果過於複雜,無法於時程內完工

一些必要細節都必須事先和美術與PM先行討論,
這樣子才不會出現說,做到差臨門一腳,
但有個東西因為前端無法達成,
而導致專案延宕。

當確認好網頁功能與效果上沒有問題後,
就可以開始規劃CSS布局了,
在規劃佈局時,
我習慣將PSD設計稿列印下來,
並在上面塗寫各元素的class名稱,
一來透過手寫加深印象,二來你也不用因為校稿所以一直切換視窗。
這裡我也放一張參加高雄前端社群的切版聚會時,
所規劃的Layout圖片:

確認好後就可以開始切圖了:
我是使用切片工具來進行切圖動作,
相關細節可以看下面的影片,

較值得一提的是,
我習慣開一個新的PSD檔案,
將「要切成PNG的圖片」、「日後時常需要維護的圖片」放在裡面,
這樣的用意是之後如果我要維護網站時,
我就不用開會浪費我好幾百MB記憶體的PSD打開,
而是只開啟我自己維護在用的PSD檔即可,
這樣子你就可以節省不少等待檔案開啟的時間,
電腦效能也可以保持得很好,一舉兩得。

要切圖片前,
我們就先新增一個Sass專案,
config.rb我會將css_dir改為「CSS」,
並將line_comments = false的設定打開,
因為我不需要註解,
基本上我也只會設定這樣而已,
頂多是網站要上線時,將CSS進行最佳化壓縮而已,
相關config細節設定可以瀏覽主題第23篇的文章,『介紹Sass與Compass的config.rb設定』。
設定完後再到根目錄新增一個images的資料夾後,
就可以到photoshop點選『檔案→另存為網頁用』,
儲存目錄則指向到你開啟網頁的資料夾根目錄即可,
這樣子一來切出來的圖片就會自動跑到你指定的圖片資料夾裡面哩。

明天我將會切入主題,
分享有關於Sass的全域變數部分,
敬請期待嘍^_^

如想瀏覽切圖的流程,
我也有錄製相關影片,
提供各位參考與學習:

版型來源:http://www.templatemonster.com/free-templates/free-website-template-jquery-slider-fitness-club.php


上一篇
30天掌握Sass語法 - (30)inline-image()與Livereload介紹
下一篇
Sass開發流程設計 - (2) Sass結構規劃、全域變數設定
系列文
30天掌握Sass語法41

1 則留言

0

我要留言

立即登入留言