• 
• 
• 
• 
• 
• 
• 

知識普及 ? 青島網(wǎng)頁設(shè)計中最常用到的設(shè)計細(xì)節(jié)

青島網(wǎng)頁設(shè)計中最常用到的設(shè)計細(xì)節(jié)

網(wǎng)站工程師 于2019-07-24 11:35發(fā)表 閱讀次數(shù) 2598次

前一段時間在企業(yè)管理界流行一句格言叫”細(xì)節(jié)決定成敗”。企業(yè)管理當(dāng)然不是我們這里要討論的主題，但是，把這句話放在網(wǎng)頁設(shè)計當(dāng)中的確是顛撲不破的真理，這也許能給我們的青島網(wǎng)頁設(shè)計師們一些啟示。我們的眼睛和感覺總是非常敏銳的，即使是完全不了解網(wǎng)頁設(shè)計技術(shù)的人也能夠從一堆拙劣的設(shè)計作品當(dāng)中挑選出那一個優(yōu)秀的設(shè)計作品。雖然他說不出來為什么這件東西比那些都好，但是直覺會告訴他他自己喜歡哪一個。如果別人向我們問起為什么這件作品要優(yōu)于其它呢?我們的回答是”很大一部分原因是因為優(yōu)秀的設(shè)計作品總是充滿了豐富的細(xì)節(jié)。”在這篇文章里，我們就從技術(shù)的角度出發(fā)，以PremiumPixels上的ReduxWordPress主題設(shè)計作品為例，來總結(jié)一下在網(wǎng)頁設(shè)計中到底是哪些細(xì)節(jié)讓優(yōu)秀的作品脫穎而出。 　　一、柔和的漸變 　　是不是下面圖片上的文字框有一種鼓出來的感覺，對，那正是漸變帶給我們的效果。試想一下，如果單單是白色的文字框放置于頁面上，一定沒有添加了漸變讓我們感受到更多的趣味性。 　　另外，在頁面的左右邊緣部分也應(yīng)到了從純色背景到材質(zhì)背景的漸變，這樣會讓深藍(lán)色凹凸不平的背景材質(zhì)出現(xiàn)的更加自然。在漸變的使用中需要注意的是，除某些特殊情況外，不要使用太過強(qiáng)的漸變，不論是色向上還是亮度上還是飽和度上都不可跨度太過強(qiáng)。因為這樣強(qiáng)烈的過度根本不帶真實感，給人一種很不舒適的感覺。 　　二、微妙的陰影 　　注意觀察Redux暗色背景上的淺色文字，你會發(fā)現(xiàn)它們都被添加上了投影效果?，F(xiàn)在我們可以使用CSS3中的text-shadow屬性來完成文字的投影設(shè)計，代替了在Photoshop中完成此項工作。而且使用CSS3來給文字添加陰影自由度更高，在瀏覽器支持的情況下，你可以給任意文字添加你想要的陰影效果。當(dāng)然IE8以下版本的瀏覽器是不支持此項屬性的，這是我們在設(shè)計中需要注意的地方。另外，和前面提到的其它設(shè)計細(xì)節(jié)一樣，陰影的效果也要足夠柔和，不可過于強(qiáng)烈，不然很容易讓整個設(shè)計看起來有一種臟臟的感覺，顯得不夠精致。 　　三、1像素的襯線 　　在頁面的頂端，你能看到一條1個像素比背景顏色略淺的水平線將純色的背景和帶有材質(zhì)的背景分隔開，如下圖： 　　而如果沒有這條襯線會是怎樣的一個效果，我們也來看看。 　　實際上，網(wǎng)頁設(shè)計中，使用到襯線的例子非常普遍。例如下面的這個例子中，你會在包圍著”TheDorchesterHotel”文字的黑色邊框的頂部向下1個像素發(fā)現(xiàn)一條灰色的襯線。yixieshi 　　而在下面這個設(shè)計好的按鈕中，綠色和黃色邊框頂部向下1個像素也能看到一條顏色更淺的線條，而這條襯線制作的更為精細(xì)，因為它應(yīng)用了蒙版，從頂部向下你會發(fā)現(xiàn)這條襯線漸漸隱去了。另外，在”AddToCart”和”$9.99″兩個文字之間的分隔線實際上是兩條線，左邊顏色深一些，右邊顏色淺一些，這樣就能產(chǎn)生線條的凹陷效果。 　　之所以要使用襯線，是為了體現(xiàn)物體在2D效果上的立體感，而立體感的體現(xiàn)必須要有陰影和高光。陰影我們通常使用圖層樣式來實現(xiàn)，而高光效果的實現(xiàn)，最常用的技巧之一就是使用襯線了。上面的三個例子的襯線都在物體的頂部，說明光線是從上向下照射的，高光處于物體的頂部。而如果光下從下向上照射的話，高光就應(yīng)該在底部了，那我們就應(yīng)該將襯線放置于物體的下方。所以在襯線的使用上，我們始終要問自己這幾個問題，”我在這里使用了襯線，那么光源在哪里?”"如果光源在這里的話，陰影應(yīng)該出現(xiàn)在什么位置?”完成了這兩個回答，設(shè)計出來的物體的立體感才能更加真實。 　　四、細(xì)微的材質(zhì) 　　Redux主題真是解釋背景材質(zhì)的絕佳案例。因為在整個頁面中，從上至下使用了三種不同的材質(zhì)作為頁面的背景。上面的深藍(lán)色部分應(yīng)用的是坑坑洼洼凹凸不平的材質(zhì)，中間黑色部分應(yīng)用的是紡織布的材質(zhì)，而底部應(yīng)用的是雜色的材質(zhì)。當(dāng)然，這三種材質(zhì)都是非常細(xì)微的，但是效果確是非常出眾的。實際上，過于醒目和復(fù)雜的背景材質(zhì)不僅不能為設(shè)計增色，反而由于分散讀者的注意力而是整個設(shè)計品質(zhì)降低。所以最好的策略就是讓你的背景材質(zhì)保持細(xì)微而柔和。

青島網(wǎng)頁設(shè)計中最常用到的設(shè)計細(xì)節(jié)相關(guān)標(biāo)簽：網(wǎng)站建造，網(wǎng)頁制作，企業(yè)網(wǎng)站建設(shè)，企業(yè)建站

相關(guān)熱點推薦

迭代的設(shè)計 網(wǎng)站中視覺元素的設(shè)計 網(wǎng)站設(shè)計的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對 手機(jī)建站時容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺識別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁不到首頁 青島網(wǎng)站設(shè)計中關(guān)于al 好設(shè)計應(yīng)該是平凡的設(shè)計 網(wǎng)站LOGO簡論 網(wǎng)頁布局設(shè)計基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點 新站快速推廣經(jīng)驗，百度 為中文而設(shè)計的文本框 關(guān)于網(wǎng)站優(yōu)化五大技巧 如何進(jìn)行網(wǎng)站首頁改版 web設(shè)計師可以走得更 專業(yè)設(shè)計網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計的幾點知識 青島網(wǎng)站制作哪家強(qiáng) 交互設(shè)計的8項黃金法則 設(shè)計良好網(wǎng)頁的4項原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營銷的五個階段 青島網(wǎng)站設(shè)計成功要素 小型企業(yè)網(wǎng)站維護(hù) 奈薇建站網(wǎng)科技2016 國內(nèi)網(wǎng)頁設(shè)計經(jīng)驗談 網(wǎng)頁設(shè)計：如何確定網(wǎng)站 微信營銷推廣的特性-奈 什么是自助建站？ 如何從營銷的角度策劃建 建網(wǎng)站必備六步 基本搜索引擎優(yōu)化策略

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶