海淘科技為你提供關于，手機也沒，按設計需要注意事項，文中闡述了，手機網頁設計中哪些細節(jié)需注意，手機版網頁設計原則，手機版網頁設計注意事項。詳情請看下文。
前一段時間在企業(yè)管理界流行一句格言叫”細節(jié)決定成敗”。企業(yè)管理當然不是我們這里要討論的主題，但是，把這句話放在網頁設計當中的確是顛撲不破的 真理。我們的眼睛和感覺總是非常敏銳的，即使是完全不了解網頁設計技術的人也能夠從一堆拙劣的設計作品當中挑選出那一個優(yōu)秀的設計作品。雖然他說不出來為什么這件東西比那些都好，但是直覺會告訴他他自己喜歡哪一個。如果別人向我們問起為什么這件作品要優(yōu)于其它呢?我們的回答是”很大一部分原因是因為優(yōu)秀的設計作品總是充滿了豐富的細節(jié)。”在這篇文章里，我們就從技術的角度出發(fā)，以PremiumPixels上的Redux WordPress主題設計作品為例，來總結一下在網頁設計中到底是哪些細節(jié)讓優(yōu)秀的作品脫穎而出。
1像素的襯線
在頁面的頂端，你能看到一條1個像素比背景顏色略淺的水平線將純色的背景和帶有材質的背景分隔開，如下圖：
而如果沒有這條襯線會是怎樣的一個效果，我們也來看看。
實際上，網頁設計中，使用到襯線的例子非常普遍。例如下面的這個例子中，你會在包圍著”The Dorchester Hotel”文字的黑色邊框的頂部向下1個像素發(fā)現(xiàn)一條灰色的襯線。而在下面這個設計好的按鈕中，綠色和黃色邊框頂部向下1個像素也能看到一條顏色更淺的線條，而這條襯線制作的更為精細，因為它應用了蒙版，從頂部向 下你會發(fā)現(xiàn)這條襯線漸漸隱去了。另外，在”Add To Cart”和”$9.99″兩個文字之間的分隔線實際上是兩條線，左邊顏色深一些，右邊顏色淺一些，這樣就能產生線條的凹陷效果。
之所以要使用襯線，是為了體現(xiàn)物體在2D效果上的立體感，而立體感的體現(xiàn)必須要有陰影和高光。陰影我們通常使用圖層樣式來實現(xiàn)，而高光效果的實現(xiàn)， 最常用的技巧之一就是使用襯線了。上面的三
個例子的襯線都在物體的頂部，說明光線是從上向下照射的，高光處于物體的頂部。而如果光下從下向上照射的話，高 光就應該在底部了，那我們就應該將襯線放置于物體的下方。所以在襯線的使用上，我們始終要問自己這幾個問題，”我在這里使用了襯線，那么光源在哪里?” “如果光源在這里的話，陰影應該出現(xiàn)在什么位置?”完成了這兩個回答，設計出來的物體的立體感才能更加真實。
Redux主題真是解釋背景材質的絕佳案例。因為在整個頁面中，從上至下使用了三種不同的材質作為頁面的背景。上面的深藍色部分應用的是坑坑洼洼凹 凸不平的材質，中間黑色部分應用的是紡織布的
材質，而底部應用的是雜色的材質。當然，這三種材質都是非常細微的，但是效果確是非常出眾的。實際上，過于醒 目和復雜的背景材質不僅不能為設計增色，反而由于分散讀者的注意力而是整個設計品質降低。所以最好的策略就是讓你的背景材質保持細微而柔和。
是不是下面圖片上的文字框有一種鼓出來的感覺，對，那正是漸變帶給我們的效果。試想一下，如果單單是白色的文字框放置于頁面上，一定沒有添加了漸變讓我們感受到更多的趣味性。另外，在頁面的左右邊緣部分也應到了從純色背景到材質背景的漸變，這樣會讓深藍色凹凸不平的背景材質出現(xiàn)的更加自然。在漸變的使用中需要注意的是， 除某些特殊情況外，不要使用太過強的漸變，不論是色向上還是亮度上還是飽和度上都不可跨度太過強。因為這樣強烈的過度根本不帶真實感，給人一種很不舒適的 感覺。
注意觀察Redux暗色背景上的淺色文字，你會發(fā)現(xiàn)它們都被添加上了投影效果。現(xiàn)在我們可以使用CSS3中的text-shadow屬性來完成文字 的投影設計，代替了在Photoshop中完成此項工作。而且使用CSS3來給文字添加陰影自由度更高，在瀏覽器支持的情況下，你可以給任意文字添加你想 要的陰影效果。當然IE8以下版本的瀏覽器是不支持此項屬性的，這是我們在設計中需要注意的地方。另外，和前面提到的其它設計細節(jié)一樣，陰影的效果也要足 夠柔和，不可過于強烈，不然很容易讓整個設計看起來有一種臟臟的感覺，顯得不夠精致。
寬度要求
手機頁面的寬度最好控制在240px以內，因為這樣可以在不移動屏幕的情況下進行一系列的操作。我們公司的這個項目用了一張背景圖片，大小為240*420。這樣其實也有一個壞處，我必須讓每個頁面的高度控制在420里面，不然超出的話，就很難看了。
js的使用
無論是普通的手機或者智能機，似乎都不太支持js。類似和"alert()"都不支持。另外，手機對“”的樣式支持不是太好，同樣的代碼在瀏覽器上和手機上有一定的寬度差距，在給定寬度的情況下。所以我的建議是能不用按 鈕，就不用按鈕，可以用文字的超鏈接形式代替，或者也可以考慮使用小圖標。
列表的使用
列表頁面最好用table，不要用ul li，或者p+空格，一方面是排版，一方面是如果某一列的元素過長，可以使用“table tr td{word-break:break-all;}”，而另外兩種方案只能截取字符串了，當然從我的角度出發(fā)，截取字符串可能是一個不錯的選擇，因為我 的那些頁面高度都定死了。
與計算機共享同一套網頁
這里的與計算機共享網頁，指的是計算機用的網頁完全不經修改、就直接給手機瀏覽。前提是網站本身的元素要夠簡單、版面不能太復雜。
制作手機專用網頁
這個做法在90年代非常盛行，當時電信業(yè)者的GPRS/WAP廣告打得正火熱，手機能瀏覽的網站都是WAP網站，也就是用WML編寫的手機網，WML是很簡陋的HTML，內容通常只有文字跟選單。用這個方法的好處是，WAP可以在所有的手機上正常顯示，不過要同時維護手機版和桌面版的網頁會很困難，使得信息常常無法同步。
用瀏覽器來判斷裝置
Opera有桌面版和手機版，同樣的Chrome、Safari、Firefox也是。有的網站會使用瀏覽器嗅探機制(browsersniffing) 來判斷你是用哪一種、什么裝置的瀏覽器，不過browsersniffing的設定很繁瑣，而且經常出差錯。最快的方法是在網頁上加入各種版本的連結，讓瀏覽者可以自由選擇格式。
開發(fā)復合型網站
復合版網站就是能同時給桌面和手機使用的網站，它跟剛談到的「與計算機共享」并不一樣，復合版網站雖然內容相同，但是它會根據(jù)屏幕大小來呈現(xiàn)版面。要做復雜 合型網站其實并不難，只要用CSS與HTML標簽來調整就行，比如HTML的viewport以及CSS的media queries。
圖片的使用：大圖片的存在還是有一定的必要，比如說像導航圖，會給人一種炫麗的感覺，但是圖片也不能過大，一定要控制在10K以內。手機網頁的細節(jié)可能遠沒有普通網頁 制作來的多，至少它只要在手機頁面里面通過就行了，不用什么IE6 7 8 或者其他的一些瀏覽器，但是要把它做得好看，還是需要花一定的心思的。
簡化內容
一般的手機、平板電腦等行動裝置，不易容納下適合於個人電腦的龐大網頁資訊，因此手機行動網頁的首要重點，就是減少內容，不論是圖片、文字或是影音。請記住一個重點：只要將最重要的資訊放入行動版網頁，就是最主要的準則，重要性較低的、讀取需要時間的內容，則可以透過超連結，連回到正常的官方網站。行動網站必須十分的重視內容簡化這一點，一個塞滿內容的行動網站無法獲得網路客戶的青睞。
導覽功能大不同
手機網頁與跟一般的網頁不同的，在於當閱讀文章到最后時，要回到最前頭是麻煩的，因此設計網頁的企業(yè)，除了減少卷動畫面的機會外，也會加強導覽的功能，讓網頁變得更容易於行動裝置上閱讀。導覽設計的重點有：
減少文字輸入部份
手機大多沒有實體的鍵盤，或僅只有12鍵的電話輸入功能，因此輸入文字上會比起使用鍵盤麻煩得多。因此，減少使用者輸入文字的機會，例如：個人的帳號、密碼、搜尋內文、使用編輯器...等，都是行動網頁要盡力避免的。設計的重點如下：
手機的規(guī)格眾多，有的解析度為320*240，較新的則為800*480，而次世代的手機更有720P的解析度，因此行動網站如何滿足眾多的需求?
一般來說有兩種作法，一種是建立不同解析度的行動網站，由用戶於手機行動入口網頁自行選擇，以Facebook的例子來說，mobile.facebook.com是適用於大部分的智慧手機與平板電腦，而0.facebook.com則是用於非智慧手機或是網路連線速度極慢的區(qū)域;另一種做法則是透過手機的語法，例如CSS語法中的Viewpoint就能夠根據(jù)手機的解析度加以決定瀏覽畫面的寬度。
利用手機的天生優(yōu)勢
手機有著許多傳統(tǒng)電腦所沒有擁有的優(yōu)勢，其中最大的優(yōu)勢就是「行動力」，因此手機版網頁應該要特別發(fā)揚這些特色，讓行動網頁具有一般網頁更多的優(yōu)勢。舉例來說：
近年已經成為行動條碼的QR Code設計，也應該納入行動網頁的設計元素在內。
文件下載：2016年手機網頁設計需注意事項
