設計網頁需要注意什么細節

字體的排版的問題之大，遠非絕大多數非設計人員想象的那么簡單，文字和字母看起來很簡單，但是它們可以成就好設計，也可以毀掉整個版面。下面介紹設計網頁需要注意什么細節，希望可以為您帶來幫助。

1、使用不合理的模板

用模板的確是一件非常方便的事情。大型企業用模板確實說不過去，但是初創公司借助BootStrap做網站絕對是情有可原。使用類似Bootstrap模板來作為基礎，借設計師之手針對品牌和企業氣質稍加定制，其實是個很不錯的主意，如果溝通良好，說不定最終能呈現出一個非常不錯的網站，對于企業的產品與服務也是很不錯的加成。

但是僅僅只是套用模板而不予以調整和定制，你所遭遇最常見的問題是模板與品牌本身的視覺設計上無法達成一致，從LOGO使用的色彩，到品牌中獨特的字體，都無法與網站構成較高的匹配度。不過如果你真的是在這方便也捉襟見肘的話，盡量挑選在各方面與品牌形象本身更接近的模板，將疏離感降到最低。

2、使用默認外觀

和中文網站的情況不一樣，英文網站使用多種多樣的字體是一件很輕松的事情。如果你使用了Bootstrap、Wordpress 這樣的工具來創建網站，而僅僅使用默認的設置，你愚弄不了任何人，大家一眼就會把你偷懶的事情看出來——連字體都是默認的Open Sans。用Wordpress 默認外觀也是一樣的道理。如果你不打算在網站視覺上和別人稍作區別的話，對品牌的傷害是顯而易見的。

當然，如果你能用好諸如Font Awesome 這樣的字體和CSS工具，也有點鐵成金的奇效。它能以增加圖標庫和樣式的方式，讓Bootstrap等各式各樣的系統，擁有漂亮一致的視覺語言。

毫無疑問，這些被精心制作過的原創的圖標，自然是比系統內置的通用圖標好。如果你有自己的創意和點子，為什么不去尋找更有個性，更符合你的品牌調性的圖標、插畫和字體呢?也許時間成本、實現成本并沒有你想象中那么高。

3、排版對比度的問題

字體的排版的問題之大，遠非絕大多數非設計人員想象的那么簡單。文字和字母看起來很簡單，但是它們可以成就好設計，也可以毀掉整個版面。

在許多“自制”的網頁中，最常見的問題是標題和正文字體之間的對比度較低，整個頁面的信息層級不明顯。僅僅只是調整字體大小并不足以構成對比，標題字體的字重應該比正文更大，也就是說字體應該更粗，確保它們夠顯眼，更容易被眼睛注意到。

4、使用深色背景

雖然背景處于網頁的最底層，但是它實際上是占據網站面積最大的部分，在用戶看到網頁的時候會第一時間感受到，精心選擇背景色彩很重要。

作為一個久經驗證的法則，黑色色調的網站，除開真正專業的設計師做出來的，其他的基本都沒法看。使用白色作為基本的背景色是非常安全的，不過多數的設計師會選擇淺灰色打底。值得注意的是，網站的灰度越高，黑色的文字的可閱讀性越差，為了確保網站的可閱讀性，灰度最好保持在15以下。

網頁設計有什么細節工作需要注意

關于網頁設計的部分，很多人都把關注點放在如何突出網站重點、如何提高精美度、如何排版等比較大的方面上，很容易忽視一些細節工作。其實有時候，細節往往決定著成敗，一個細節上的失誤有可能毀掉整個網頁設計。因此，為了避免這種情況，我們應該注意哪些細節工作呢?

網頁上的細節涉及到很多方面，包括背景、顏色、線條甚至是一些陰影處理等等，如果能將這些細節都做到位了，就可以使網頁設計整體提升一個檔次。比如當我們使用一些色塊時，就要考慮給它加上一些細致的材質紋理，使網站更有層次感，更有深度。

文字上的設計也要注重細節，比如字間距、字體、顏色、字號等方面。其中字間距要盡量保持統一，重要內容與次要內容之間可以使用不同的字體加以區分，但是字體間的風格要靠近、和諧。而顏色則建議使用黑色或者灰色，可讀性更高，也更加符合用戶的閱讀習慣。

還有一點就是網頁整體的整齊度問題，這個經常容易受到忽略。要做好這個細節，我們就應該在處理圖片或文本等元素時，確保整個頁面是水平對齊的，各個元素之間的寬度是一樣的，空格距離也是一致的，特別是當不同形狀的圖片排列在一起時，更要做好這些細節，這樣就可以取得良好的視覺體驗了。

很多時候，網頁設計的細節追求的就是一種統一性，比如橫幅圖片與頁腳圖片的統一、導航欄目條詞語間的統一、共同元素間顏色的統一等等。如果網頁中有網格布局，就更應該遵循細節上的統一原則，確保整體網站的和諧，真正做好細節設計。

以上這些網頁設計上的細節工作，希望大家在進行自助建站的時候能夠注意，如果能結合《什么是自助建站的一致性設計原則?》中其他的一致性原則，就可以令網頁設計更加完美了。

網頁設計應該注意哪些細節問題

減少不必要跳轉。

有的時候你的網站可能需要處理一些信息而沒有顯示的網頁，有些網站會用一個跳轉頁來解決。比如登錄的時候，會先跳到一個空白頁來設置登錄狀態，修改數據庫等操作，然后再將用戶定位到登錄完成頁。不過跳轉頁的最大缺點就是會增加等待時間。而且容易導致操作失敗(用戶在這里刷新)。某外賣網站的支付功能在支付成功的時候，從到銀行支付成功頁點回到商戶網站，會跳到一個支付完成頁，然后跳到支付正在處理頁，然后又是一個支付成功頁，最后跳到訂單成功頁。我看著我的瀏覽器跳來跳去都覺得好難受啊。

后臺可以用curl收發某些消息，也可以在最初的跳轉頁帶上更多的參數，直接讓結果頁中的sql語句處理全部內容。

背景、邊框和底紋。

有的時候這些背景，邊框和底紋會直接的對用戶造成使用上的影響。首先彈出對話框一定要有非透明背景。邊框和底紋可以為用戶標識操作區域。哪些區域是推薦修改的，哪些是無關緊要的之類的東西。如果提供給用戶選擇的是幾個大區域，那么用不同的邊框來標識出用戶的選擇也是很重要的。

給用戶明確的反饋。

當你在做一個操作的時候，可能背后的javascript要執行很長的時間。這個時候你必須明確告訴用戶你正在處理一些東西。最常用的方法是將鼠標光標切換成wait模式，還有在網頁上顯示一個小圈圈的動態圖。如果你用Ajax登錄，那么在點擊登錄按鈕之后應該顯示一個“登錄中”的提示。如果你的表單驗證出錯，你應該用紅色指示出錯誤的那一項，并告知錯誤原因。 有些網站會讓那個框閃一閃，甚至直接把輸入焦點重定位過去(這在你的表單很長時非常管用)。用ajax載入的東西，默認文本應該設置為“正在載入”，而不是用一個空div。總之就是讓用戶知道這張網頁正在做什么，這樣雖然不能減少用戶等待時間，但是可以給用戶一個心理安慰，告訴它們：我正在忙著處理你的數據。而不要讓你的網站表現的像是失去響應一樣。

明確的后退鏈接。

如果你的網頁內容比較多，那么用戶可能會深陷到一個很深的目錄結構里，比如子欄目的子欄目，當他們想回來的時候并不容易。提供一個后退到高級目錄的鏈接(注意不是瀏覽器的后退鏈接，因為用戶可能從子欄目的一個文章跳到另一個文章。)就可以有效的提高用戶體驗。如果允許，提供一個面包屑導航欄明顯更好。如果你的網站有導航條，那么確保有一個“首頁”鏈接。方便用戶在網站各個欄目間跳轉可以讓用戶更舒服。

企業在進行網站制作時需要注意的細節

一、網站整體顏色與主題不符合

在建站之前，首先要確定網站網站主題。比如說：音樂影視類的;科技類的;醫療保健類的;考試教育類的等等這些都屬于網站主題。網站主題就等于是衣服，給網站穿上博客模板這個網站就是博客站的類型，每一個主題都配應相對于合適的顏色，如果搭配的顏色和主題不符合，就會影響視覺效果。

而網站主色調好比樂曲中的主旋律，起著主導的作用，單單只有主旋律還不能體現樂曲的完美，要多種輔助旋律搭配才能的動聽，一般的網頁色調都是控制在三種以內，輔助色最好與主色調相差別不大的，也可用相反的顏色。單一的色調也可以使用，它能起著醒目、清晰的目的。這就要考驗網頁設計師的搭配設計功力了。

二、導航頁不清晰，排版混亂

導航需要有助于瀏覽者快速的找到想要知道的內容頁和功能，導航就是需要有引導性，如果導航不清晰明了，就會影響全站的布局。而網站排版體體現在，假如是一個欄目分類合理，設計簡單清爽的頁面，給訪客的第一映像就會很好，同樣，網站的排版如果進去看到亂七八糟的頁面，可能頓時就沒有心情瀏覽了，即便是想要瀏覽，也找不到自己想要的東西在哪里，不僅僅是網頁的排版，文章內容也是很重要的，比如說字體的大小，緊密的程度，段落之間的距離，文字顏色的深淺等這些都是一個好的網站所具備的條件。

三、網頁廣告及彈出窗口過多，影響視覺體驗

在訪問一個網站時，相信很多人都有過這樣的體驗，正在閱讀的時候，一會一個廣告彈出來，必須要手動關掉，這種彈窗廣告極大的影響了訪客體驗。內容沒找到，彈窗關了無數道，閱讀一篇文章，總被廣告打擾，讓訪客心煩氣躁。你還有一方面是廣告，有的網站廣告可能比內容都還多。廣告可以存在，但是設計要合理，不能喧賓奪主。

四、圖像內存太卡，影響網站加載速度

如今的互聯網時代就是網速的時代，很多網站為了凸顯效果，會插入大量的大量的圖片及短視頻，嚴重的拖延了加載網頁的速度，所以在上傳圖片及短視頻的時候盡量用方法減少圖片及視頻的大小，然后再開始加速功能。要讓網站變得輕盈，加載速度流暢，才能贏得良好的觀感。

五、使用上一切簡單明確

網上使用上追求方便、快速、簡潔、明了，讓訪客在瀏覽，注冊，使用時，簡單明了，簡單易上手。就比如說新用戶注冊時，需要用戶注冊的信息不宜過多，太多的要求會讓用戶面對一系列問題時望而卻步，導致準用戶流失。