人
已閱讀
已閱讀
從一個細節(jié)談一談如何做好前端
來源:lexintech.com ?? ?? 發(fā)布時間:2018-06-19
在網(wǎng)站開發(fā)時,前端設計非常重要,用戶直接面對的是前端頁面,就算你后臺功能寫得多好多強大,前端體驗不好,用戶可能會馬上關閉頁面。下面我們舉一個例子,談一談前端開發(fā)時,應該注意哪些,如何才能做好前端。
一個頁面的細節(jié),從重構的角度去看,頁面的精細度,代碼的可讀性、擴展性,為下游服務的代碼注釋,交互接口樣式的書寫,代碼的壓縮,圖片的優(yōu)化等都可以歸為細節(jié)處理,我的理解是,剛才提到的細節(jié)處理是每個重構工程師都應該具備的基本技能,不能算是真正意義上的細節(jié),好的細節(jié)處理應該是從用戶出發(fā),應該是發(fā)自內心對用戶的一種關懷。下面有兩個小例,都是我們做頁面時常見的板塊,如果我們細心處理一下,也許會讓用戶會倍感貼心。
如上圖,輪播圖上切換按鈕(如上圖小方塊按鈕)是用戶對輪播圖進行交互的重要入操作點,重要程度毋庸置疑,在分析設計稿的時候發(fā)現(xiàn),按鈕的可點擊區(qū)域太小了,只有22×2!要用戶完成圖片的切換顯然是一件非常痛苦的事,這會給用戶帶來不愉悅的心情。因此,我們得想辦法讓點擊區(qū)域變大。
可能的解決辦法:
1、建議產(chǎn)品讓視覺設計師把按鈕改大一點。
如果重新設計按鈕,改變按鈕的表現(xiàn)形式呢? 顯然不可行,視覺設計師不會為了一個小改動而輕易改變視覺風格,即使設計師同意,改完之后設計稿要重新給產(chǎn)品審核,通過審核之后再給重構,顯然這個方法的溝通成本和改動成本都太高了,性價比不高。
2、保留原設計,通過CSS來控制
輪播圖這類按鈕的結構我們一般會這樣寫:
要實現(xiàn)色塊區(qū)域是22×2,實際可點區(qū)域是22×12,兩個方法:
1、用背景圖:這個色塊比較簡單,純色方角,樣式完全可以控制,沒有必要用背景圖;
2、用樣式控制:為了使可點區(qū)域高為12像素,那么作用元素的標準盒子有以下幾種方式
A、height+padding;
B、height+border;
C、height+偽元素(E:after / E:before);
由于背景色會作用到padding區(qū)域,考慮兼容高低端瀏覽器,A方式不適用,B和C都可以用
我們先看一下B方式—- height+border,CSS代碼如下:
運行代碼后會發(fā)現(xiàn),IE6和IE7顯示正常,但是Chrome、Firefox、Opera、IE7+的border區(qū)域也填充了背景色。
我們再看一下C方式—-height+偽元素(E:after / E:before),CSS代碼如下:
這回Chrome、Firefox、Opera、IE7+顯示正常了,但是IE6和IE7并不支持偽元素E:after和E:before,色塊消失了。
因此,我們只好用B方式(height+border)對IE6 和IE7 作hack處理了,最終代碼如下:
到此,輪播圖按鈕的可點擊區(qū)域由原來的22×2增加到了22×12,是原來的6倍,這樣用戶就可以很容易地完成圖片的切換,舒心的操作。