十堰手機網站設計需要注意什麽？

       企業管理界流行一(yī)句格言叫”細節決定成敗”。企業管理當然不是我(wǒ)們這裏要讨論的主題，但是，把這句話(huà)放(fàng)在網頁設計當中(zhōng)的确是颠撲不破的真理。我(wǒ)們的眼睛和感覺總是非常敏銳的，即使是完全不了解網頁設計技術的人也能夠從一(yī)堆拙劣的設計作品當中(zhōng)挑選出那一(yī)個優秀的設計作品。雖然他說不出來爲什麽這件東西比那些都好，但是直覺會告訴他他自己喜歡哪一(yī)個。如果别人向我(wǒ)們問起爲什麽這件作品要優于其它呢?我(wǒ)們的回答是”很大(dà)一(yī)部分(fēn)原因是因爲優秀的設計作品總是充滿了豐富的細節。”在這篇文章裏，我(wǒ)們就從技術的角度出發，以PremiumPixels上的Redux WordPress主題設計作品爲例，來總結一(yī)下(xià)在網頁設計中(zhōng)到底是哪些細節讓優秀的作品脫穎而出。

　　手機網頁設計中(zhōng)哪些細節需注意

　　1像素的襯線

　　在頁面的頂端，你能看到一(yī)條1個像素比背景顔色略淺的水平線将純色的背景和帶有材質的背景分(fēn)隔開(kāi)

　　實際上，網頁設計中(zhōng)，使用到襯線的例子非常普遍。例如下(xià)面的這個例子中(zhōng)，你會在包圍着”The Dorchester Hotel”文字的黑色邊框的頂部向下(xià)1個像素發現一(yī)條灰色的襯線。而在下(xià)面這個設計好的按鈕中(zhōng)，綠色和黃色邊框頂部向下(xià)1個像素也能看到一(yī)條顔色更淺的線條，而這條襯線制作的更爲精細，因爲它應用了蒙版，從頂部向 下(xià)你會發現這條襯線漸漸隐去(qù)了。另外(wài)，在”Add To Cart”和”$9.99″兩個文字之間的分(fēn)隔線實際上是兩條線，左邊顔色深一(yī)些，右邊顔色淺一(yī)些，這樣就能産生(shēng)線條的凹陷效果。

　　之所以要使用襯線，是爲了體(tǐ)現物(wù)體(tǐ)在2D效果上的立體(tǐ)感，而立體(tǐ)感的體(tǐ)現必須要有陰影和高光。陰影我(wǒ)們通常使用圖層樣式來實現，而高光效果的實現， 最常用的技巧之一(yī)就是使用襯線了。上面的三個例子的襯線都在物(wù)體(tǐ)的頂部，說明光線是從上向下(xià)照射的，高光處于物(wù)體(tǐ)的頂部。而如果光下(xià)從下(xià)向上照射的話(huà)，高 光就應該在底部了，那我(wǒ)們就應該将襯線放(fàng)置于物(wù)體(tǐ)的下(xià)方。所以在襯線的使用上，我(wǒ)們始終要問自己這幾個問題，”我(wǒ)在這裏使用了襯線，那麽光源在哪裏?” “如果光源在這裏的話(huà)，陰影應該出現在什麽位置?”完成了這兩個回答，設計出來的物(wù)體(tǐ)的立體(tǐ)感才能更加真實。

　　細微的材質

　　Redux主題真是解釋背景材質的絕佳案例。因爲在整個頁面中(zhōng)，從上至下(xià)使用了三種不同的材質作爲頁面的背景。上面的深藍(lán)色部分(fēn)應用的是坑坑窪窪凹 凸不平的材質，中(zhōng)間黑色部分(fēn)應用的是紡織布的

　　材質，而底部應用的是雜(zá)色的材質。當然，這三種材質都是非常細微的，但是效果确是非常出衆的。實際上，過于醒 目和複雜(zá)的背景材質不僅不能爲設計增色，反而由于分(fēn)散讀者的注意力而是整個設計品質降低。所以最好的策略就是讓你的背景材質保持細微而柔和。

　　柔和的漸變

　　是不是下(xià)面圖片上的文字框有一(yī)種鼓出來的感覺，對，那正是漸變帶給我(wǒ)們的效果。試想一(yī)下(xià)，如果單單是白(bái)色的文字框放(fàng)置于頁面上，一(yī)定沒有添加了漸變讓我(wǒ)們感受到更多的趣味性。另外(wài)，在頁面的左右邊緣部分(fēn)也應到了從純色背景到材質背景的漸變，這樣會讓深藍(lán)色凹凸不平的背景材質出現的更加自然。在漸變的使用中(zhōng)需要注意的是， 除某些特殊情況外(wài)，不要使用太過強的漸變，不論是色向上還是亮度上還是飽和度上都不可跨度太過強。因爲這樣強烈的過度根本不帶真實感，給人一(yī)種很不舒适的 感覺。

　　微妙的陰影

　　注意觀察Redux暗色背景上的淺色文字，你會發現它們都被添加上了投影效果。現在我(wǒ)們可以使用CSS3中(zhōng)的text-shadow屬性來完成文字 的投影設計，代替了在Photoshop中(zhōng)完成此項工(gōng)作。而且使用CSS3來給文字添加陰影自由度更高，在浏覽器支持的情況下(xià)，你可以給任意文字添加你想 要的陰影效果。當然IE8以下(xià)版本的浏覽器是不支持此項屬性的，這是我(wǒ)們在設計中(zhōng)需要注意的地方。另外(wài)，和前面提到的其它設計細節一(yī)樣，陰影的效果也要足 夠柔和，不可過于強烈，不然很容易讓整個設計看起來有一(yī)種髒髒的感覺，顯得不夠精緻。

　　手機版網頁設計原則

　　寬度要求

　　手機頁面的寬度最好控制在240px以内，因爲這樣可以在不移動屏幕的情況下(xià)進行一(yī)系列的操作。我(wǒ)們公司的這個項目用了一(yī)張背景圖片，大(dà)小(xiǎo)爲240*420。這樣其實也有一(yī)個壞處，我(wǒ)必須讓每個頁面的高度控制在420裏面，不然超出的話(huà)，就很難看了。

　　js的使用

　　無論是普通的手機或者智能機，似乎都不太支持js。類似和"alert()"都不支持。另外(wài)，手機對“”的樣式支持不是太好，同樣的代碼在浏覽器上和手機上有一(yī)定的寬度差距，在給定寬度的情況下(xià)。所以我(wǒ)的建議是能不用按 鈕，就不用按鈕，可以用文字的超鏈接形式代替，或者也可以考慮使用小(xiǎo)圖标。

　　列表的使用

　　列表頁面最好用table，不要用ul li，或者p+空格，一(yī)方面是排版，一(yī)方面是如果某一(yī)列的元素過長，可以使用“table tr td{word-break:break-all;}”，而另外(wài)兩種方案隻能截取字符串了，當然從我(wǒ)的角度出發，截取字符串可能是一(yī)個不錯的選擇，因爲那些頁面高度都定死了。