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