網(wǎng)頁(yè)設計總結之讓設計作品更上檔次發(fā)布者：本站     時(shí)間：2021-12-23 10:12:45

大家都知道”細節決定成敗”這句名言不僅在其他行業(yè)非常重要，而在頁(yè)面設計當中更是顛撲不破的真理。需求的眼睛和感覺(jué)總是非常敏銳的，對于一個(gè)頁(yè)面沒(méi)有得到需求方的認可，但是他們又說(shuō)不出什么理由，這個(gè)時(shí)候就是細節問(wèn)題了。一個(gè)頁(yè)面的細節到位才能充分體現出頁(yè)面的品質(zhì)。一個(gè)優(yōu)秀的作品與卓越的作品相比差距就在于細節的把控。

那我們具體該如果做好細節呢? 下面簡(jiǎn)單介紹一下。

<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>總結之讓設計作品更上檔次,PS教程,

字符

字符是頁(yè)面中不可缺少的部分，頁(yè)面上最重要的部分。所以這部分細節是最基礎的，也是最不可忽視的。網(wǎng)頁(yè)上80%的信息是以文字形式傳達的，任何網(wǎng)頁(yè)元素都無(wú)法替代文字的作用。網(wǎng)頁(yè)中文字設計的好壞會(huì )直接影響到整個(gè)頁(yè)面的視覺(jué)傳達效果。

字號

字號的選擇是根據功能需要而定的，字越大給瀏覽者的視覺(jué)沖擊力越強，一般用于標題或其他需要強調的地方。小字整體性強，頁(yè)面易產(chǎn)生多個(gè)中心，缺乏美感，時(shí)間略長(cháng)，瀏覽者易產(chǎn)生視覺(jué)疲勞。最適合網(wǎng)頁(yè)的字體大小為12磅，如果在一個(gè)頁(yè)面內容較多，通?？梢杂?磅的字號，隨著(zhù)互聯(lián)網(wǎng)飛速的發(fā)展，在內容較多的情況下10.5磅字號逐漸替代了9磅字號。游戲行業(yè)本身側重于視覺(jué)傳達，在官網(wǎng)及專(zhuān)題里文字都不會(huì )像門(mén)戶(hù)類(lèi)頁(yè)面那么多，所以常規情況下最小保持10.5磅以上字號。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

標題文字的運用

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

內容字體的運用

字體

不同的字體有不同的性格表現，嚴肅、幽默、力量、柔軟等等。網(wǎng)頁(yè)中比較常用的中文字體有宋體、黑體、楷體、隸書(shū)等。根據不同的頁(yè)面主題可以選擇不同性格的字體搭配。

標題字體的選用對整個(gè)頁(yè)面的編排起著(zhù)重要的作用。字體選擇、字體特效到位，不僅會(huì )突出頁(yè)面主題，而且還會(huì )烘托整個(gè)頁(yè)面的氣氛。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

主標題用毛筆字體，副標題選擇用了方正楷體簡(jiǎn)體與主標題進(jìn)行搭配，突顯游戲武俠風(fēng)格特點(diǎn)，導航文字選用了與副標題相同字體，內容用微軟雅黑字體。整個(gè)頁(yè)面一共選用了三種字體。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

主標題字體微變型，副標題選用了微軟雅黑細體。

樣式

文字的樣式主要包括常規、粗體、斜體等。正文中的文字宜采用常規樣式，標題宜采用加粗或斜體樣式。合理的運用文字樣式，將更有利于文字的視覺(jué)傳達，更有利于瀏覽者的閱讀。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

間距

文字的間距分為橫向間距和縱向間距即”字距”"行距”。正文與標題的字距應該通篇保持一致，字距太大或太小都會(huì )導致可讀性受到影響。行距的常規比例為10：12即用字10點(diǎn)，則行距12點(diǎn)。除了對于可讀性的影響，行距本身也是具有很強表現力的設計語(yǔ)言，有意識地加寬或縮窄行距，能夠體現獨特的審美意趣。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

顏色

顏色的運用對于整個(gè)文案的表達會(huì )產(chǎn)生很大的影響。使用不同顏色的文字可以使想要強調的部分更加引人注目。色彩可以使得文本不受位置的局限，加強或者減弱文本的表現強度，使頁(yè)面文本的瀏覽產(chǎn)生視覺(jué)導向。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

排版

文字的對齊方式一般分為四種：左對齊、右對齊、居中對齊和兩端對齊，其中左對齊和兩端對齊最為常用，因為這兩種對齊方式比較符合人們的閱讀方式。

文字的排布方向主要有三種：橫排、豎排和斜排，其中以橫排為主，橫排文字群體比較適合人們的閱讀習慣。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

留白

留白可以給人帶來(lái)心理上的輕松與快樂(lè )，也可以給人帶來(lái)緊張與節奏。元素之間的留白不能太大這是基本的原則，留白過(guò)多，頁(yè)面會(huì )變得零碎。

網(wǎng)頁(yè)設計是以傳達頁(yè)面信息為主要目的的，留白更多的是服務(wù)和服從于網(wǎng)頁(yè)的可用性。無(wú)數的可用性研究證實(shí)了一個(gè)事實(shí)：在Web中，用戶(hù)對網(wǎng)頁(yè)信息是進(jìn)行瀏覽，而不是閱讀。簡(jiǎn)潔明快、富于美感的頁(yè)面更具有可瀏覽性，可使用戶(hù)獲得更加良好的瀏覽體驗。

留白空間不一定要是白色的。指的是任何與背景相同的空間。所以它可以是白色、黑色，其他紋理等。

大面積的有色范圍

如在頁(yè)面設計中只放置極少的必要元素，背景則用大面積的單純色彩渲染，利用單純色彩的力量來(lái)突出和烘托網(wǎng)頁(yè)上的主要元素。邊導航與主題內容的留白劃分。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

導航按鈕

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

內容與圖片

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

對比色留白

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

logo處留白

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

層次

頁(yè)面設計需要層次感，當頁(yè)面缺乏層次感的時(shí)候就會(huì )顯得頁(yè)面比較單調或者花哨。頁(yè)面層次感可能有很多類(lèi)型，例如色彩的層次感、元素的層次感等等。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

以足球場(chǎng)為背景，背景本身有深度，有遠近景的層次感，人設采用遠處模糊較小，近處清晰較大的視覺(jué)原理設計，使得頁(yè)面更具層次感。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

整個(gè)背景以清晰的山峰為背景，主要內容為近景形成層次，背景中心山峰與兩側的山峰形成層次。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

高速模糊的背景與頁(yè)面主要內容形成層次。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

徑向模糊及動(dòng)感模糊處理的背景與頁(yè)面主要內容形成層次。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

標題與人設疊加產(chǎn)生層次感

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

紅色塊與灰色塊形成層次感

光影

現實(shí)生活中無(wú)時(shí)無(wú)處不存在著(zhù)光照和陰影?？吹降拿繕訓|西都是通過(guò)光影反射形成它的形象。視覺(jué)上，光影幫助我們辨別事物，認知他們的材質(zhì)、尺度和透視。

所以如果要讓我們的網(wǎng)頁(yè)設計更加自然、有動(dòng)感且真實(shí)直觀(guān)，正確理解光影效果就變得非常重要。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

光源在人設背后，照亮背景與人設邊緣，與人設正面形成對比。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

光源在人設側頂端。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

光源在頁(yè)面頂端，發(fā)散照射。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

光源在頁(yè)面頂端，往下方照射在產(chǎn)品上，突出產(chǎn)品的品質(zhì)。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

以元素為光源，照亮周?chē)?br />
網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

光影的運用給人帶來(lái)的視覺(jué)是地圖鋪在地面上,地圖的折疊效果體現出立體感很強，云的影子表現出云在漂浮。

網(wǎng)頁(yè)設計總結之讓設計作品更上檔次,PS教程,

左圖1像素淺色和1像素深色線(xiàn)與背景行成對比而形成。右圖文字底部的細微高光使文字顯得有種突出感。

光影在頁(yè)面設計中使用方法及用處還有很多，比如增強頁(yè)面氣氛、突出主題等…

總結：影響頁(yè)面細節的因素還有很多,比如質(zhì)感紋理、圖標、色彩等，這里就不一一介紹了。有不對的地方還望大家指證，希望對大家有所幫助。