我在寫CSS的時候經常會碰到些麻煩事兒:
1)看上去蠻簡單的排版卻寫了很久
2)代碼寫的越來越散,總是這里補一句,那里補一句,沒有條理性
3)margin、padding、font-size等屬性在不停的重寫
效率提不上去,工期又趕,最后只能加班加點做。
后面仔細想想,其實自己可以做的更有計划性,更有條不紊的推進。
一、全局觀
我們這邊開發是按流程來進行的,UI設計沒給出,是堅決不開工的。
在UI設計給出后,最多只是做些無傷大雅的微調,這樣的話,其實在給出所有UI設計稿后,可以做個大概的評估。
將通用的組件、樣式難點、各個動畫、布局細節,了然於心,這樣在開發的時候,胸有成竹。
先來看看這次設計稿的總覽:
在看完所有頁面后,可以開始打草稿,做抽象了。
接下來的CSS開發我都會使用Sass來編寫,用Sass能更好的做模塊化開發。
二、通用組件
1)loading效果
基本上每次做頁面,都會有這么一個效果,所以預先准備幾個這樣的效果,會很有用處,將所有的相關代碼寫到一個文件中封裝起來。
而且設計很多時候不會考慮loading這種細節效果,最終都是自己來添加的,設計也會很歡迎你幫他分擔些工作。
我在很早以前自己寫了一套簡易的UI庫,在工作中發揮了巨大的作用。
2)彈出框
這個也基本可以說每次都會用到,所以封裝一個自己的彈出框很有必要。
產品、設計也經常會忽略這個效果,經常會撂下一句話“通用的就可以”,事先准備好的話,對你對我都有幫助。
這個功能不僅僅是CSS,還得需要JavaScript的支持。
我用最簡單的200行代碼封裝了彈出框,遵循開放封閉原則,並可自行擴展。
用法也特別簡單:
Alert('請選擇三張優惠券');
3)按鈕
UI都喜歡花式的按鈕,但我遵循的原則是,能用CSS3畫的就用CSS3畫出來,少用或不用圖片。
這樣按鈕能更通用性,各種款式的都能繼承基本款式,在基本款式上修改某些參數就能實現效果。
上面的按鈕有的大、有的小、有的方、有的園、有的下面是陰影、有的無邊框,可以用上面的代碼來概括。
按鈕特別的地方在做細調。
4)輸入框
輸入框,基本也是標配,同樣的,UI也喜歡花式的輸入框,我還是遵循能畫出來的就自己畫。
這次的輸入框,還是比較朴素的,沒有用誇張的表現手法展示。
5)字體大小與顏色
UI設計稿上都會有好多種字體,但如果要求不嚴格的話,其實可以事先設置些字體大小,直接套用。
h1~h6這6個標簽,我預先定義好了字體大小,這樣也能減少使用“p”或“span”標簽,讓網頁標簽更豐富。
顏色可以向下面這樣預先定義一下,但可能很多時候都會把顏色寫在特定樣式中,那就做個變量,放在代碼中,隨時引用。
6)工具樣式
工具樣式就是預先寫好對齊方法,margin的距離,padding的距離,display的展現方式等。
可以在分析了頁面后,大致的寫一些,不用寫太多,夠用即可。
三、頁面特性
1)CSS3動畫
為了讓頁面更生動,免不了加些動畫,產品很多時候也是需要你邊調試邊做效果。
雖然不用事先准備動畫代碼,但可以事先了解一些動畫效果,參考一些現有的開源動畫庫,例如“animate.css”。
將動畫代碼放在一塊兒,不然東一個西一個的,亂糟糟,自己也會忘記有哪些動畫效果,搞不好還會重復寫,改的時候也得到處找。
2)可復用部分
這次在做頁面的時候,低估了這些可復用部分,分析的太少,導致在寫的時候很多部分沒有抽象出來,代碼寫的很僵硬。
部分1 |
部分2 | 部分3 | 部分4 | |
邊框修飾 |
有邊框 有底腳與陰影,上下有小眼睛 還有兩條彎曲的線 |
有邊框 底部有陰影 |
有邊框 有底腳與陰影 |
有邊框 底部有陰影 |
背景色 |
紅 | 紅 | 紅 | 紅 |
標題圖 寬高各不同 |
有 | 無 | 有 | 有 |
內部展示 |
兩列一行 | 三列一行 | 一列一行 | 三列一行 |
單元內容排列 |
上下 | 上下 | 左右 | 上中下 |
單元內容 |
上部:背景圖+圖標+名字 下部:按鈕 |
上部:背景圖+圖標+名字 下部:按鈕 |
大背景圖 左邊:圖標+名字+描述+有效期 右邊:價格 |
上部:圖標 中部:名字 下部:價格 |
選中效果 |
有(與部分2相同) | 有 | 無 | 無 |
大致就是上表中的情況,接下來就是細調,比較麻煩的是位置擺放,各種對齊,寬高設置,margin、padding距離計算、字體大小顏色等。
做這些非常耗時,好在最麻煩的對齊、位置擺放可以使用彈性布局,不但拋棄了浮動,寬還能自適應,同一行內的子元素的高能自動計算為相同。
在自己的UI庫中也同樣封裝了彈性布局的,現在每個項目我都會引用進來。
源碼下載:
https://github.com/pwstrick/chezhu