中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)頁(yè)設(shè)計(jì)的技巧:細(xì)節(jié)讓網(wǎng)頁(yè)設(shè)計(jì)與眾不同

2022-06-15    分類: 網(wǎng)站建設(shè)

細(xì)節(jié)使得這個(gè)世界從平凡變得不平凡。


  一輛豪華汽車與傳統(tǒng)汽車擁有同樣數(shù)量的車輪、座位、門窗,但是使得它在競(jìng)爭(zhēng)中脫穎而出的卻是花費(fèi)在細(xì)節(jié)上的時(shí)間。加熱真皮座椅,一按即啟動(dòng)引擎,無(wú)鑰車門開(kāi)關(guān),自動(dòng)泊車系統(tǒng),豐富的數(shù)字電臺(tái)等等使得它成為一輛昂貴的新型車。

  同樣的規(guī)則也適用于網(wǎng)頁(yè)設(shè)計(jì)。愿意花費(fèi)時(shí)間專注于細(xì)節(jié)的網(wǎng)頁(yè)設(shè)計(jì)師能夠獲得擁有更多價(jià)值的設(shè)計(jì)。這里的關(guān)鍵詞就是價(jià)值。我們無(wú)法保證建立網(wǎng)站所花費(fèi)的時(shí)間和其結(jié)果所帶來(lái)的價(jià)值之間有直接的關(guān)系,總有一些細(xì)節(jié)比其他更加重要,關(guān)鍵是要能夠確定哪些細(xì)節(jié)更具有影響力。

  增加價(jià)值的細(xì)節(jié)

  這一類型的細(xì)節(jié)是我們?cè)敢庠趯徝缹用嬷饣ㄙM(fèi)額外時(shí)間以改進(jìn)我們工作的細(xì)節(jié)。我們希望專注于可以深入改變用戶體驗(yàn)的視覺(jué)調(diào)整,例如用戶對(duì)該網(wǎng)站的主題和消息的體驗(yàn)或者他們?nèi)绾螘秤尉W(wǎng)站。

  一般的沒(méi)有建站經(jīng)驗(yàn)的網(wǎng)站訪問(wèn)者,無(wú)法指出某些細(xì)微差別來(lái)的用戶體驗(yàn)改善,但是如果這些細(xì)節(jié)被移除,用戶將在感知和可用性方面感覺(jué)到明顯的差異。這些就是我們?cè)敢饣ㄙM(fèi)時(shí)間的細(xì)節(jié)。

  那么一個(gè)設(shè)計(jì)細(xì)節(jié)到底如何為網(wǎng)站帶來(lái)附加價(jià)值呢?訣竅就在于用戶體驗(yàn)。網(wǎng)站設(shè)計(jì)師應(yīng)該能夠出色的理解負(fù)空間、對(duì)比度、形狀、顏色和所有不同的視覺(jué)元素在用戶使用和體驗(yàn)一個(gè)網(wǎng)站設(shè)計(jì)時(shí)所起的作用。真正令人驚訝的是設(shè)計(jì)者僅僅需要操縱幾個(gè)像素就可以發(fā)生很大的差異,使之產(chǎn)生更大的影響。

 這些差異到底是什么?

  進(jìn)一步觀察

  我覺(jué)得Photoshop最令人舒服的是當(dāng)我將圖片放大到500%甚至更大時(shí),它看上去就像在家一樣舒服。我們來(lái)仔細(xì)研究一些相當(dāng)成功的用細(xì)微細(xì)節(jié)引導(dǎo)用戶體驗(yàn)方面圖片吧。

  以Concentrate 網(wǎng)站為例,它看起來(lái)很適合我們初次集中精力來(lái)欣賞。從一個(gè)高層次的視角開(kāi)始,我們可以看到Concentrate網(wǎng)站的使用了一個(gè)富有創(chuàng)意視覺(jué)技巧。



  除了這罐橙汁,我們看到一個(gè)橙色為主題的調(diào)色板和背景,很好的模擬了真實(shí)的橙子的果肉口感。進(jìn)一步研究,我們發(fā)現(xiàn)它使用了CSS3為文本增加一些陰影來(lái)增加與背景的對(duì)比。為了真正的欣賞細(xì)節(jié),我們需要在進(jìn)一步的研究。

像素級(jí)完善

  真正的細(xì)節(jié)應(yīng)用在像素級(jí)。我們?cè)賮?lái)看Concentrate的快捷按鈕周圍,靠近網(wǎng)頁(yè)布局頂端的部分。首先,按鈕背后的陰影將頁(yè)面上的這部分突出出來(lái)。該區(qū)域頂端和底部的兩個(gè)簡(jiǎn)單的單像素線是一個(gè)簡(jiǎn)潔的設(shè)計(jì)方式,它使得這個(gè)區(qū)域在視覺(jué)效果上更明顯的區(qū)別于頁(yè)面上的其他元素。



  其中的一個(gè)單像素線條更引人注意,這是因?yàn)樗褂昧肆脸壬?。它為兩者之間的陰影和背景提供了對(duì)比,但是真正起作用的卻是第二個(gè)暗橙色的線條。兩個(gè)線條相互配合起來(lái)封鎖了這個(gè)頂部區(qū)域。



差異

  當(dāng)這個(gè)頁(yè)面不再包括這些線條的設(shè)計(jì)的時(shí)候,差異就能最好的表現(xiàn)出來(lái)。下面,我將移去這些線條來(lái)向大家展示兩個(gè)像素能夠帶來(lái)怎樣的不同。



微妙的陰影

  陰影效果對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)已經(jīng)不陌生了。許多網(wǎng)站很早就開(kāi)始使用它們并且經(jīng)常模擬平面深度及二維介質(zhì)。陰影和高亮可以微妙但強(qiáng)有力地改善我們網(wǎng)站的用戶體驗(yàn)。

  我們?cè)谠O(shè)計(jì)中采用CSS3,它可以帶來(lái)的宏偉的差異讓我們很容易為之興奮不已。而對(duì)于我來(lái)說(shuō),真正值得興奮是有多少細(xì)節(jié)工作可以從圖片處理軟件轉(zhuǎn)移到我們網(wǎng)站的代碼上去。

  還是來(lái)看這個(gè)Concentrate網(wǎng)站,它是一個(gè)很不錯(cuò)的例子,使用巧妙而有效地使用文字陰影效果使網(wǎng)站內(nèi)容更容易閱讀。這里以兩種方式使用了CSS3的text-shadow屬性。首先紅色的標(biāo)題在與背景顏色相近的情況下,被賦予淡淡的陰影以產(chǎn)生內(nèi)嵌式的效果。基次在段落后面簡(jiǎn)單地給白色一點(diǎn)發(fā)射效果。



差異

  比較上面的截圖以及同樣的頁(yè)面在IE8(不支持text-shadow屬性)下渲染的效果,我們就能發(fā)現(xiàn)它更難看得很多。



  值得指出的是這個(gè)網(wǎng)站賣的是Mac軟件,所以自然地不那么重視IE用戶的體驗(yàn)了。

導(dǎo)航細(xì)微差別

  除了增強(qiáng)易讀性和強(qiáng)調(diào)可能的網(wǎng)站操作,細(xì)節(jié)對(duì)網(wǎng)站導(dǎo)航也有很大的幫助。任何網(wǎng)頁(yè)最重要的部分之一就是如何將用戶導(dǎo)航到另一個(gè)頁(yè)面。畢竟鏈接是起初使得網(wǎng)頁(yè)之所以稱之為網(wǎng)頁(yè)的核心,所以為什么不多花一點(diǎn)點(diǎn)時(shí)間在適航性上呢?舉個(gè)例子,我們來(lái)看 Lipperhey 站點(diǎn)。



  除了為導(dǎo)航的活動(dòng)狀態(tài)選擇好的顏色以外,我們發(fā)現(xiàn)它的設(shè)計(jì)為網(wǎng)站的主導(dǎo)航欄添加了一些用趣的細(xì)節(jié)。

  Home按鈕由于一些顏色變化之外的原因而很顯眼。首先我們可以看到它從導(dǎo)航欄下沉了幾個(gè)像素。其次,按鈕背后被加上了陰影并且對(duì)透明度做了輕微的調(diào)整。這兩個(gè)細(xì)節(jié)一起為這個(gè)鏈接賦予了附加維度的感覺(jué),指示了它的重要性及激活狀態(tài)。



差異

  再看一下沒(méi)有上面提到的細(xì)節(jié)的導(dǎo)航,我們發(fā)現(xiàn)很多令人興奮的東西都沒(méi)了并且我們的激活鏈接會(huì)有完全不同的樣子和感覺(jué)。



細(xì)節(jié)更進(jìn)一步

  我們研究了一種運(yùn)用CSS3的一些新功能來(lái)輔助我們?cè)O(shè)計(jì)的方法(text-shadow)。但CSS3的強(qiáng)大遠(yuǎn)不只是陰影。CSS3動(dòng)畫,表現(xiàn)為transform和transition的屬性,給我們的細(xì)節(jié)工作增加了額外的工具。

  只要使用得當(dāng),CSS3動(dòng)畫為我們的網(wǎng)頁(yè)元素添加高效的動(dòng)畫效果,而不需要借助Flash或JavaScript。在細(xì)節(jié)方面,動(dòng)畫允許我們?cè)诟鞣N輸入情況向用戶提供流暢的反饋。例如為鏈接的hover狀態(tài)或按鈕點(diǎn)擊添加過(guò)渡動(dòng)畫,可以告訴用戶他們鼠標(biāo)正懸停在(或觸摸,對(duì)于觸屏移動(dòng)設(shè)備)一個(gè)活動(dòng)的元素上面。

  與網(wǎng)站細(xì)節(jié)相伴的工作的美好在于通過(guò)進(jìn)一步努力,我們?nèi)匀豢梢詾槲覀兊挠脩籼峁┎糠謨r(jià)值,而不需要疏遠(yuǎn)那些使用過(guò)時(shí)的瀏覽器的用戶。關(guān)鍵之處在于我們要使用所有這些技術(shù)來(lái)為已經(jīng)很可靠的網(wǎng)頁(yè)設(shè)計(jì)增加價(jià)值,沒(méi)有一個(gè)基本的可靠的設(shè)計(jì)而空談學(xué)習(xí)這些技術(shù)就是本末倒置。

文章名稱:網(wǎng)頁(yè)設(shè)計(jì)的技巧:細(xì)節(jié)讓網(wǎng)頁(yè)設(shè)計(jì)與眾不同
瀏覽路徑:http://m.rwnh.cn/news13/167463.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站ChatGPT、關(guān)鍵詞優(yōu)化靜態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都做網(wǎng)站
西充县| 台前县| 正安县| 德庆县| 永城市| 永福县| 孟连| 石渠县| 会理县| 克什克腾旗| 华蓥市| 富顺县| 雷州市| 东方市| 天祝| 黄冈市| 新竹市| 景德镇市| 都匀市| 格尔木市| 夹江县| 湾仔区| 边坝县| 崇阳县| 莎车县| 徐汇区| 砀山县| 建瓯市| 博湖县| 中江县| 沅陵县| 泰和县| 合肥市| 启东市| 大石桥市| 绍兴县| 海淀区| 比如县| 临沭县| 西盟| 宕昌县|