詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得發(fā)布者：本站     時(shí)間：2021-12-31 10:12:44

一個(gè)頁(yè)面的細節，從重構的角度去看，頁(yè)面的精細度，代碼的可讀性、擴展性，為下游服務(wù)的代碼注釋?zhuān)换ソ涌跇邮降臅?shū)寫(xiě)，代碼的壓縮，圖片的優(yōu)化等都可以歸為細節處理，我的理解是，剛才提到的細節處理是每個(gè)重構工程師都應該具備的基本技能，不能算是真正意義上的細節，好的細節處理應該是從用戶(hù)出發(fā)，應該是發(fā)自?xún)刃膶τ脩?hù)的一種關(guān)懷。下面有兩個(gè)小例，都是我們做頁(yè)面時(shí)常見(jiàn)的板塊，如果我們細心處理一下，也許會(huì )讓用戶(hù)會(huì )倍感貼心。

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

輪播圖

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

如上圖，輪播圖上切換按鈕(如上圖小方塊按鈕)是用戶(hù)對輪播圖進(jìn)行交互的重要入操作點(diǎn)，重要程度毋庸置疑，在分析設計稿的時(shí)候發(fā)現，按鈕的可點(diǎn)擊區域太小了，只有22×2!要用戶(hù)完成圖片的切換顯然是一件非常痛苦的事，這會(huì )給用戶(hù)帶來(lái)不愉悅的心情。因此，我們得想辦法讓點(diǎn)擊區域變大

可能的解決辦法：

1、建議產(chǎn)品讓視覺(jué)設計師把按鈕改大一點(diǎn)。

知會(huì )產(chǎn)品后，我們會(huì )先用代碼把按鈕調大，給出截圖讓視覺(jué)設計師看。

高為3像素，視覺(jué)沒(méi)問(wèn)題，但點(diǎn)擊區域還是太小，如下圖：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

高為4像素，點(diǎn)擊區域勉強可以接受，但視覺(jué)設計師覺(jué)得按鈕太大，視覺(jué)效果不佳，如下圖：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

結果設計師還是堅持用原來(lái)的按鈕大小。

如果重新設計按鈕，改變按鈕的表現形式呢? 顯然不可行，視覺(jué)設計師不會(huì )為了一個(gè)小改動(dòng)而輕易改變視覺(jué)風(fēng)格，即使設計師同意，改完之后設計稿要重新給產(chǎn)品審核，通過(guò)審核之后再給重構，顯然這個(gè)方法的溝通成本和改動(dòng)成本都太高了，性?xún)r(jià)比不高。

2、保留原設計，通過(guò)CSS來(lái)控制

輪播圖這類(lèi)按鈕的結構我們一般會(huì )這樣寫(xiě)：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

要實(shí)現色塊區域是22×2，實(shí)際可點(diǎn)區域是22×12，兩個(gè)方法：

1、用背景圖：這個(gè)色塊比較簡(jiǎn)單，純色方角，樣式完全可以控制，沒(méi)有必要用背景圖;

2、用樣式控制：為了使可點(diǎn)區域高為12像素，那么作用元素的標準盒子有以下幾種方式

A、height+padding;

B、height+border;

C、height+偽元素(E:after / E:before);

由于背景色會(huì )作用到padding區域，考慮兼容高低端瀏覽器，A方式不適用，B和C都可以用，

我們先看一下B方式—- height+border，CSS代碼如下：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

運行代碼后會(huì )發(fā)現，IE6和IE7顯示正常，但是Chrome、Firefox、Opera、IE7+的border區域也填充了背景色，

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

(Chrome、Firefox、Opera、IE7+)

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

(IE6、IE7)

我們再看一下C方式—-height+偽元素(E:after / E:before)，CSS代碼如下：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

這回Chrome、Firefox、Opera、IE7+顯示正常了，但是IE6和IE7并不支持偽元素E:after和E:before，色塊消失了：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

(Chrome、Firefox、Opera、IE7+)

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

(IE6、IE7)

因此，我們只好用B方式(height+border)對IE6 和IE7 作hack處理了，最終代碼如下：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

到此，輪播圖按鈕的可點(diǎn)擊區域由原來(lái)的22×2增加到了22×12，是原來(lái)的6倍，這樣用戶(hù)就可以很容易地完成圖片的切換，舒心的操作。

線(xiàn)上效果：http://daquan.xunlei.com/download_channel.html

導航

站點(diǎn)導航，一般都會(huì )有3態(tài)的設計：常態(tài)，Hover態(tài)，選中態(tài)。為了美觀(guān)，很多產(chǎn)品都喜歡把鏈接虛線(xiàn)框去掉：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

于是我們在a標簽加一個(gè)CSS樣式outline:none，把點(diǎn)擊虛線(xiàn)框去掉。但是IE6和IE7不支持這個(gè)屬性，為了兼容IE6和IE7，在a標簽加上hidefocus=”true”屬性，甚至有不少同學(xué)可能會(huì )加上對用戶(hù)非常不友好的onfocus=”this.blur()” 。

onfocus=”this.blur()”和hidefocus=”true”都可以實(shí)現去掉IE6、IE7的點(diǎn)擊虛線(xiàn)，但是前者會(huì )使鏈接聚焦觸發(fā)時(shí)失去焦點(diǎn)，焦點(diǎn)重新回到文檔的最開(kāi)始。而后者是IE的私有屬性，不會(huì )使鏈接聚焦觸發(fā)時(shí)失去焦點(diǎn)

為什么我們要強調鏈接的聚焦?考慮到視障人士會(huì )用到讀屏軟件，讀屏軟件會(huì )讀出獲得聚焦的標簽里內容，而onfocus=”this.blur()”中斷了視障用戶(hù)的Tab鍵路徑，導致Tab光標無(wú)法聚焦頁(yè)面的下一個(gè)控制器(鏈接、表單域、object等)。

有興趣的同學(xué)可以閱讀一下淘寶UED的：

下圖為該文章中去除虛線(xiàn)框方法對比圖

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

其實(shí)，正如《盲人站長(cháng)深?lèi)和唇^的onfocus=”this.blur()”》作者所寫(xiě)，”虛線(xiàn)框的存在有它的合理性”，本人也很認同。假設有這樣的一個(gè)情景：你到某個(gè)站點(diǎn)查資料，當你發(fā)現合適的資料，剛想移動(dòng)鼠標去打開(kāi)鏈接的時(shí)候，發(fā)現鼠標壞了，但你想在換鼠標之前把資料閱讀完，于是你會(huì )按Tab鍵去尋找該鏈接的焦點(diǎn)，這時(shí)候，虛線(xiàn)框就會(huì )幫助你很快找到該鏈接，愉快完成資料閱讀。

雖然這個(gè)情景發(fā)生的概率微乎其微，但不可否認這種以人為本的設計出發(fā)點(diǎn)是好的，是合理的。我們回頭看去虛線(xiàn)框的需求，把虛線(xiàn)框去掉的做法顯然違背虛線(xiàn)框的設計初衷，而兼容IE6和IE7的處理方法也不符合結構、樣式、行為相分離的原則，因此我們得想一個(gè)既能滿(mǎn)足實(shí)際需求，又能遵從虛線(xiàn)框的設計意圖，并且不影響頁(yè)面結構的方法?，F在線(xiàn)上的處理方法是：

1、 給導航的a標簽加一個(gè)a:focus的偽類(lèi)樣式，使之與Hover樣式一樣，顯示Tab的選中狀態(tài)

2、IE6、IE7不支持a:focus偽類(lèi)，則保留原鏈接虛線(xiàn)框，不作hidefocus=”true”處理，優(yōu)雅降級，保證Tab可選

線(xiàn)上頁(yè)面導航：http://daquan.xunlei.com/

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

(Chrome、Firefox、Opera、IE7+)

*注：Opera的Tab鍵默認只選中Form元素，要用Ctrl+上下方向鍵才能選中鏈接

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

(IE6、IE7)

用Opera的同學(xué)可以看到，當鏈接獲得焦點(diǎn)時(shí)，鏈接邊框樣式還是存在，如下圖：

詳細解析網(wǎng)頁(yè)重構中頁(yè)面細節處理心得,PS教程,

可見(jiàn)CSS的outline:none并沒(méi)有使Opera的鏈接框去掉。

解決的方法是自定義一個(gè)outline樣式，然后讓邊框透明就行了，因此可以這樣處理：

E:focus{ outline:1px solid transparent}

現附上此方法的Demo：

Demo

也許普通用戶(hù)不會(huì )用到Tab選中鏈接這樣的操作，但我們不能因此而不照顧特殊用戶(hù)群，而像導航此類(lèi)在網(wǎng)站比較重要位置上的鏈接，更應該給予照顧。

對于重構工程師，這些小的技術(shù)處理并不需要太高的實(shí)現成本，作不作處理都可以高精度還原設計稿，視覺(jué)設計師不會(huì )要求我們把輪播圖按鈕點(diǎn)擊區域變大一點(diǎn)，產(chǎn)品也不會(huì )讓我們?yōu)閷Ш芥溄蛹由蟃ab選中樣式，只不過(guò)有一個(gè)問(wèn)題我們要問(wèn)一下自己，頁(yè)面到底是為誰(shuí)而做?想清楚后，相信我們會(huì )更關(guān)心用戶(hù)體驗，更注意細節的處理，也就不會(huì )為多加幾行代碼感到麻煩或沒(méi)有必要，在我們力所能及的范圍下，多幾行代碼就能為用戶(hù)帶來(lái)更多，為什么不去做呢?

記得曾經(jīng)帶我的師傅對我說(shuō)過(guò)，重構工程師不應該滿(mǎn)足100%還原設計稿，更應該去追求101%還原度，多出的1%就是對頁(yè)面細節的把控，也可以說(shuō)是重構工程師的主觀(guān)能動(dòng)性。這個(gè)1%在100%中所占比例并不起眼，但如果處理得好，可以使頁(yè)面更顯級數。