作為設計師,最關心的也許就是排版好不好看、圖片美不美觀、視覺炫不炫,我們盡可能的去把設計稿做的最漂亮,然後就把碩大的PSD檔就直接發給重構了,殊不知這個時候重構正在恨你:我擦,這麼大的PSD,還木有打開!本來就開了各種瀏覽器編輯器神馬的又要打開苕大的PSD檔,機子要卡死了!!!機子卡死就算了吧,打開一看,我去,幾百個圖層呀!好吧幾百個圖層也就算了,為什麼我明明拖動按鈕,卻把各種連七八糟的圖層拖進來了,根本找不到我要的圖層!!
瞧瞧多麼恐怖的事情,但是也許我們只要管理好PSD圖層就可以改變這種抱怨。
對於圖層管理,這可能是大家比較容易忽視的操作習慣,特別是初學者或者新人,也可能有人說:這有什麼值得一提的?!做好設計稿就行了,其他交給重構吧!我們看多了程式師井井有條的代碼,規範有序的文檔,認為圖層命名不是我們要幹的事情—-其實不然,下面有幾個原因:
1)使用PSD的群體:設計師本人、客戶、工程技術人員(程式師)、新人接手等。
2)PSD圖層太多,當時記得,時間一長容易忘記。
3)專案設計過程難免有需求更改、修改建議,導致設計稿需要反復修改,雜亂的圖層結構是不是讓你更添一愁呢?
4)作為一名網頁重構工作者,會直接面對你的PSD檔,無序的圖層及命名令人抓狂。。。。
看來管理好圖層真的很重要。
話說講之前看下這張圖,一起感受下這樣的圖層面板,PS:裡面的人物(藝名:主席),年會上的照片。這相片很應景有木有,還有下面的嚇尿的小Q。
切換一下,再看下這裡。美女就不解釋了。。。
話說我們要對圖層進行管理,合理命名就是關鍵了。先看下命名與圖層排列:
看一個案例,設計稿與HTML頁面的的名稱對應位置圖。可以看下左邊代碼的幾個節點,用顏色做了區分,顏色對應了右邊的模組,最外面的紅色(wrapper)是這個頁面的外套,對應PSD上就是整個頁面;接下來紫色(header),對應PSD上的頭部(LOGO+導航);同理:綠色、黃色。可以發現基本是從上到下的順序,當然還有例外的情況,這裡就不說了。看個直觀感受就可以了。
我自己不怎麼喜歡連結圖層(右圖紅色區域),我更喜歡分組(左圖),按照每個功能快來建組,如果自己喜歡你就用吧~~
剛才看了HTML代碼和對應PSD的簡單案例,大家也許發現規律了,為了方便操作,建議按照模組名稱來命名,圖層的順序與頁面上看到的元素順序一致:從上到下,從左至右。
可能有人問:PSD上圖層的名字是隨便寫的嗎?其實不是,命名是參考高階語言程式設計語法來進行的,個人比較喜歡用駱駝規則或者底線規則,如果還要分個勝負的話,我更喜歡駱駝規則。
除了第一個邏輯點首字母小寫外,其餘邏輯點首字母都大寫,見示例。
網頁裡常用的模組名稱:
直接看圖和對應的中英文名稱:整個頁面(wrap/wrapper)
頭部(header)
主導航(mainNav),如果整個頁面只有一個導航就用「導航(nav)」
頁腳,或者叫版權(footer)
麵包屑(breadCrumb),平常叫慣了麵包屑,其實它的來歷是有一個故事的,具體故事就不講了,自己百度下吧。
搜索(search)
登錄(login)… 等等。
瞭解了圖層命名,也許你的PSD圖層已經幾百個了,該對圖層管理管理了。
1)什麼是模組化
2)模組化調用、複用
3)效率和輸出
模組化的定義,每個模組完成一個特定的子功能,所有的模組按某種方法組裝起來,成為一個整體,完成整個系統所要求的功能。在系統的結構中,模組是可組合、分解和更換的單元。
貌似文字有點複雜,模組化是程式設計裡面的詞語,我們這裡就可以簡化下:按照視覺功能塊組建一個PSD圖層分組,類似前面說的頭部(header)、登錄(login)、搜索(search)等。
模組化組建後,可以在各個頁面作為公共元件來使用,就不必要把相同的圖層再設計組合一遍了,直接把這個分組拖進來就是了。
模組化在門戶官網的專案設計中尤為重要,特別顯效率,後面還有講到。
雖然我們對圖層命名了,自然會耽誤一些設計階段,可能有人覺得效率變低了嘛?! 我自己覺得一方面這是一個設計師的職業習慣問題,另一方面這並不耽誤你提升效率,當遇到大型入口網站設計時,你會發現這是多麼的好用。
個人經驗,當你開始關注你的PSD圖層結構的時候,其實對圖層面板上每個圖層到底是什麼內容並不關心,所以我比較喜歡這麼做:
在圖層選項那裡把圖層預覽改為「無」,這樣圖層面板就清爽了,有的都是結構,一目了然。
回歸正題:舉幾個梨子。大家對比看左右兩邊的內容及圖層變化:基本規則是模組化命名、從上到下、從左至右。
<p>
之前做的案例都是如此。
前面說了智慧物件在大型網站設計上會極大的提升效率,如果不信可以繼續看:
簡單的說就是智慧物件反復放大縮小時候不會失真出現鋸齒和模糊變形,當然前提是放大的尺寸不要超過轉換成智慧物件之前的尺寸大小。
大型官網設計中很多模組是需要反復使用的,通常的做飯是有幾個就改幾個,不停的複製,拖放,不停的複製樣式、粘貼樣式。累不累啊你。。。
可以這樣支招:在同一個頁面如果有很多元素是一樣的,可以把這個元素轉換成智慧物件,以後如果有改動在圖層上按兩下這個智慧物件進去編輯下保存就可以了,該頁面的該類型的元素就都改過來了。如果相同的元素不是在一個頁面,可以使用「替換內容」指令,見下圖:
公共模組使用智慧物件,批量修改,批量替換,高效快捷。在智慧物件所在圖層右鍵,在彈出功能表中選擇「替換內容」,將預先保存在你專案目錄中的PSB檔替換到PSD中來;這裡需要注意,你所存放的psb檔需要放在你的專案目錄下,因為預設情況下按兩下智慧物件時,打開的只是暫存檔裡的psb檔,並不是你所在專案下的psb檔。
另外在做物料展示的時候智慧物件的使用也可以很方便,不會破壞原有大圖,在印刷品的設計也可以很方便。
比喻這個例子:需要把WSD的LOGO按照手提袋的透視關係調整尺寸角度,通常情況我們就是直接那一張圖貼上去然後調啊調的,好不容易調整好了。結果換袋子了,是另一個方向的透視,苦逼的我們又得按照新袋子的透視來調整LOGO,累不累啊你。。。
其實上面那個LOGO已經是智慧物件了,如上圖,我們再按兩下下圖層進去看看:
這個就是原始LOGO檔了,完好無損,可人兒的。
還有一個地方用智慧物件也很提升效率,做用戶端的時候經常會需要輸出N多的icon尺寸,這是一個快捷的辦法,原理跟剛才一樣。當然這樣的縮放icon在精細度上沒有純手工的來得好。只供一個思路哈。
小結一下:智慧物件在多頁面的、多重複公共模組、VI物料包裝展示的時候會顯著提升效率。
另一個話題:與重構有關的,有時候 設計師也不斷的抱怨頁面仔做出的頁面沒有設計稿上的好看,不是間距大了就是間距小了,不是字體小了就是字體大了,不是圖片壓縮的太厲害就是壓根圖片切少 了,或者動畫也不是我們想要的效果。。。。,越到這些我不能全怪他們,我們也有責任,畢竟他們不是設計,但是我個人的觀點是重構需要一些PS技巧或設計理論,在設計師沒有時間走查頁面的時候也能輸出比較高品質的頁面。
市面上大大小小的瀏覽器幾十種,常見的大致也有十來種,由於每個瀏覽器自身渲染頁面的差異,並不是同一個頁面在所有瀏覽器上看到的都一樣,我大致用90%的還原度來衡量吧,也可能有些設計師要求重構100%還原,那我表示那位重構相當苦逼,保證頁面跟設計稿90%一致,有不少工作需要設計師和重構共同參與的,比喻設計師在時間允許的情況下做好標注,哪個地方多少圖元,用什麼顏色值,高度是多少等標注在頁面上。
重構者不關關注代碼本身,也可以跳出代碼看看視覺表現層,如果確實對幾圖元看不出來,可以截圖放在psd上做對比,這個方法很容易自己發現問題,成本也比較低。
在表格做網頁時期,圖片和圖示幾乎都是單個的,載入一張圖片就是一次HTTP請求,伺服器就要讀取一次,頻繁的讀取再加上大量的使用者不斷的訪問,很可能讓伺服器承受不起而掛機。因此需要盡可能的減少HTTP請求,合併背景圖是一個很有效的辦法。
通常背景圖的輸出品質百分比可以調在60-80%,對比較重要的icon、圖片可以調為100%輸出高品質圖片。
在網頁載入過程中,或因為網速原因圖片暫時沒有載入出來而出現短時間空白,建議給該區域預先定義好背景色,以提示使用者該區域是有內容的。
滑鼠停在圖片上時,適當的添加title或者alt,以方便使用者在圖片載入失敗時可以知道這張圖片是幹什麼用的。
按需載入,非同步載入,類似蘋果官網上很多地方用到了非同步載入,好處是提高主要頁面的載入速度,使用者需要的時候才載入其他附件頁面。
少用CSS濾鏡,現在應該很少人用了,基本都是採用優雅降級或提示使用者升級瀏覽器。
網站上線前壓縮CSS和JS檔,注意記得備份。
我喜歡用這個詞,雖然自己並沒有達到代碼優雅,做到代碼優雅還需要不斷的努力,一些細節足夠讓專家看到你是否具備職業化素養,這裡就不班門弄斧了,還是看圖吧~~~~~~。
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy