iT邦幫忙

DAY 23
5

新手前端日記系列 第 23

[新手前端]拿到視覺出的mockup,開始要切版了

就算是切版也是很講技巧的

配圖和內文無關,只是我今天畫的萬聖應景圖而已...

前幾天的分享裡有聊到,前端的工作並不僅僅是切版而已,整個web的呈現部分都可以廣意的算在前端頭上,今天就來縮小範圍拉深主題,聊聊切版需要注意些什麼地方,不過因為我是新手嘛,有可能是錯的,如果發現我觀念有錯什麼的,要早點和我說啊!!

首先,拿到版面後第一個要確認的就是各個區塊的功能,一般拿到的版都是PSD的附上簡報或文件說明內容,開始動工之前有可能可以開個會,在拿到版開始做以前,務必要先把整個版的UI及功能從頭到尾模擬一次,對怎麼做大概有個底,不確定的地方一定要詢問,免得江水一去不復返,時程用光還是要重來的慘劇。

確認功能及所有需要的畫面之後,可以就UI及使用者的角度和視覺及PM做一些版面上的溝通調整,像是資料的多寡造成版面的差異,操作流程及畫面是否符合使用者習習、外框是否需要重新設計等等,很多時候PM或視覺對頁面的了解常常不及前端工程師,一個主因就是實際把頁面做出來的是前端,所以這種在執行上可能造成問題的地方都需要前端做出指引。其實前端最重要的功能之一就是整個團隊之間的溝通及調整,大家都埋頭做到時有錯就很頭大了。

再來就是決定結構,當功能及畫面確定之後就要開始把整個網站的結構區分好。哪些部分是重覆使用的,哪些內容屬於 header 哪些是footer, aside 等等,要將內容做出完整的結構區分,我現在是使用 fireapp這個軟體來幫我監看專案,其中有使用一些像ruby之類接近程式邏輯的分頁方式,可以用<%= yield %>、<%= render :partial => “檔名” %>的方式幫我把重覆的區塊切出來,用layout的方式來套用。

結構主要的決定方式還是語義化,不要使用不明的<div> 或是用空的tag, 在使用ID時也要特別小心,因為ID是唯一的又會有權重的問題,所以沒必要的話用 class 或是直接利用結構差異選 html tag就好。

建好結構之後記得檢查網頁大綱,好的大網應該有都明確的標題,適當的階層,階層太多在讀取時會造成很大的困擾,記得HTML內盡量簡潔,能寫在CSS的就寫在CSS,HTML最好只保留有意義的內容即可,意思就是該在 header的地方在header 屬於nav才放在nav裡,不要為了配合樣式放入無意義的東西。

tag 也盡量不要包太多層,去掉沒有必要的層次,越簡單越好(其實越簡單越難啦)。

再來就是 CSS的命名,不要取沒有意義的名字像 a1, a2, style1, style2.... 除非你想害人(或是害死需要回來改的自己)

取名的原則基本上是以CSS的功能為主,不要把名字取成樣式現在的內容,可以把名字取成 .asideA , .navToolBar , .mainArea...

不要取成 .left {float:left;} 或是 .redtext{color:red;}等等...
這種非功能而是樣式的取名很容易在維護時造成困擾,如果有一個tag寫 <div class="red">
可是改天要變成藍字、黑字時,再接手的人或是幾個月後的你自己,根本不知道這個 .red 實際上是什麼東西。

再來就是各瀏覽器debug, 做的時候以firefox/chrome為主,然後才去看IE 及其他瀏覽器的顯示。

最後,再來美化你的程式碼,拿掉可以重覆利用的部分,精簡美化他們。

看吧,簡單吧... (被歐飛)


chibc's blog | [新手前端]拿到視覺出的mockup,開始要切版了


上一篇
[新手前端] HTML5的新tag 語意化標籤
下一篇
[新手前端]網站案例觀察- swarovski
系列文
新手前端日記30

2 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-10-31 19:24:58

只是我今天畫的萬聖應景圖而已...

這張比喬巴厲害太多了,樓主可拿這張代表地球角逐火星杯CSS大賽...冷

看更多先前的回應...收起先前的回應...
chibc iT邦新手 3 級 ‧ 2012-10-31 22:33:49 檢舉

其實這是兩種不同的東西啦,上次那個喬巴是用純CSS 向量組成的,這個是用photoshop畫的啦

chibc iT邦新手 3 級 ‧ 2012-10-31 22:43:46 檢舉

不過,還是很感謝你一直都有回應 XD

我才不會覺得技術文是孤單的,只有八卦才有人回 XD

ted99tw iT邦高手 1 級 ‧ 2012-10-31 22:53:42 檢舉

其實美工在iT邦實屬稀有動物,所以一定要加以保育才行....偷笑
更不用說還能連續發30天技術鐵文的“闇月一族”....拍手拍手拍手

chibc iT邦新手 3 級 ‧ 2012-11-01 15:54:56 檢舉

哎哎... 人家現在掛名 前端工程師呢 >///<

雖然還是啥都不懂啦 Q.Q

ted99tw iT邦高手 1 級 ‧ 2012-11-01 16:00:21 檢舉

chibc提到:
人家現在掛名 前端工程師呢

咱一定要活到老學到老才行,趕快記起來先~~~臉紅

0
老鷹(eagle)
iT邦高手 1 級 ‧ 2012-11-01 08:18:19

二樓板凳哭哭哭
美工加油~~!讚讚讚

chibc iT邦新手 3 級 ‧ 2012-11-01 15:56:15 檢舉

人家現在是啥都不懂的前端工程師啦 XDDD

至於美工喔,叫我沒關係,有的設計師或是視覺,聽到美工會抓狂滴... 所以不要刺激他們比較好
我是雜工,所以怎麼叫都沒關係 XDDD

話說俺比較趨近於後端工程師(PHP,MYSQL) 俺也才剛學的~~!哈哈
真正的魔王是泰大 冷

ted99tw iT邦高手 1 級 ‧ 2012-11-01 16:27:12 檢舉

chingfeng提到:
真正的魔王是泰大

我是不落兩端....冷冷

我要留言

立即登入留言