設計網頁時應該注意什么問題

網頁時應該注意什么問題
間距過小是造成網頁缺陷的一個重要原因，網頁一個是行距，可以用CSS直接調整，關系到兩行文字之間的距離，這些有助于區分行與段落，使用戶更容易閱讀文字。下面介紹設計網頁時應該注意什么問題，希望對您有幫助。



1、沒有足夠的文字間距

間距過小是造成網頁缺陷的一個重要原因。網頁一個是行距，可以用CSS直接調整，關系到兩行文字之間的距離。這些有助于區分行與段落，使用戶更容易閱讀文字。

2、貧乏的尺寸大小

標準做法是h1的文字大于h2的文字，頭部文字大于段落文字。盡量保持一致的尺寸，因為它有助于一致性(第8條)和內容層次(第4條)。保持文字的可讀性，但不要太大，讓字體的大小表現信息的重要性。還有，10像素以下的尺寸對大量閱讀的人來說太小了。
在平時設計網頁過程中，如果能夠多加注意到這些問題，從而避免不該犯的錯誤，就能在整體設計的基礎上加分，此外，加上自己特色的創意，真正為用戶考慮，才能真正做到優秀的網頁設計。

3、留白太少

留白是網頁設計中一個重要部分。它有助于防止用戶在瀏覽網站時變得疲憊，它可以在內容中劃出距離，而且它本身也看上去不錯?？瞻撞皇潜仨氂冒咨?，而是，它僅僅是為其他設計元素提供間隔和緩沖的空間。

4、字體設置過多

通常來說一個網頁中最好不要超過三種字體。

5、色彩太多
文本、背景、框架等各為不同的顏色，雖然看似鮮艷但是，多重漸變、幾種鮮艷的色彩和大量有鮮明對比的色調及飽和度，會破壞你網站的層次和空白概念。嘗試限制自己只用一種鮮艷的色調(如藍色)，再搭配反相的單色(白、灰、黑)以獲得一個漂亮的搭配。這里強調下豆瓣的配色。也是我喜歡的顏色搭配。

6、沒有考慮對比效果

你有沒有試過兩種對比色彩的運用或者大小的變化，有些方式之所以比其他的更好，其原因就是這是一種眼睛感知到對比的方式。如果你很難舒服的閱讀文字，考慮一下改變字體大小或方式。成為一個大師級網頁設計師的秘訣：對比，對比，對比。

7、不一致

網頁內容過于雜亂，沒有統一的框架把他們合并到一個中心主旨上。它是把網頁設計組織在一起的方式，可以創造一種緊密結合的感覺。在網站頁面互相鏈接的情況下，它可以幫助用戶把所有頁面都聯系在一起。如果你在整個網站持續改變字體、大小和色彩，用戶很快會覺得不知所措。

8、內容過于堆疊

網頁的內容繁多，各種分支信息占據的空間過多，沒有突出關鍵的主題。它有助于在內心組織重要的信息，并引導用戶注意在你想讓他注意的地方。在傳統藝術中，新手們被教導色彩、價值和線性透視三原則和其他藝術指導。在網頁設計中，沒有特別奉行的準則，但以直觀的方式組織你的內容是一條很好的經驗規則。也是多年培養的用戶習慣。最終習慣就是最終用戶。當然一成不變不是我們所鼓勵的。

9、沒有重視用戶的屏幕顯示效果

也許某個分辨率對你的電腦效果特別好，但是用在用戶電腦上就不一定如此了。雖然這種分辨率的顯示器正在減少，但采用更小的分辨率的手機設備也來了?，F在的網頁設計寬度標準是960像素，雖然沒有照顧到每一種分辨率，但在主流分辨率上可以呈現的最好。假如你希望面對大量的手機用戶，最好考慮一個手機版設計。

網頁內容的合理布局與排版

網頁設計既有文字、圖片、色彩，又有動畫、聲音。文字有大有小，還有標題和正文之分。圖片也有大小、縱橫之別。圖片和文字都需要同時展示給觀眾，但又不能簡單地羅列在一個頁面上，否則會搞得頁面雜亂無章。因此，必須根據內容的需要，將圖片和文字按照一定的次序進行合理編排和布局，使它們組合成一個有機的整體，展現給訪客。具體的頁面排版可從如下幾個方面入手:

⒈主次分明，中心突出

在網頁界面設計中，設計者必然要考慮視覺的中心，也就是
最佳視域
，它一般位于電腦屏幕的中央，或者在屏幕中間偏上的部位。因此，一些重要的信息和圖片一般可以安排在這個部位，在視覺中心以外的地方可以安排稍微次要的內容，這樣在頁面上就突出了重點，做到了主次有別。另外，人們的閱讀視線通常都是從左至右、由上往下地閱讀，因此設計者也要把握好這種視覺流程。在網頁中有一個7秒鐘定律，即當用戶進入網頁之后，如果在7秒之內沒有看到特定內容，那么這項內容的設計及位置安排注定會失敗。由此可見，突出重點是非常重要的。

⒉明確的導航，彰顯有價值的信息

網站中的欄目導航對網站內容起到提綱挈領的作用，引導著用戶瀏覽網站的相關信息。清晰、明確的導航，可以幫助網站用戶更方便快捷地瀏覽和找到他們所需要的信息，并給以一定的網站服務和在線幫助，從而避免在瀏覽網頁過程中找不到方向[2]。好的導航能夠讓用戶在打開頁面的第一時間找到，或者是讓用戶瞬間反應出此為網站的導航。導航的用語選擇應該精煉易讀，色彩搭配明確，布局妥當，設計獨特，使用戶通過導航能夠快速了解整個網站的主要內容。

⒊圖文并茂，相輔相成

文字和圖片具有一種相互補充的視覺關系。文字和圖片都是傳遞信息的手段，但各自的特點不同:文字所表達的信息量大，但顯得沉悶枯燥，缺乏生氣;圖片所傳遞的信息量小，但比較生動活潑。文字與圖片兩者的比例不能過大，否則，頁面就會顯得單調而過于混亂。因此，最理想的效果是文字與圖片密切配合，互為襯托，既能活躍頁面，又豐富了網頁內容。

⒋圖形與字體、色彩等因素協調統一

一般而言，在所有的網頁動畫設計中，圖形設計部分處于主要地位。字體和色彩諸視覺因素與圖形因素互相配合、互為補充地構成了一個整體性的圖形設計。圖形、字體與色彩諸因素彼此相互作用、相互影響，共同表達出設計的中心思想內涵。只有如此，設計所要闡發的主題思想才能更準確和集中，視覺傳達才能更強烈和有力度。反之，則會給觀者造成一定的視覺混亂，偏離設計主題，從而達不到應有的設計意圖。

⒌注意空白的設置和運用

空白在構圖上有著不可忽視的作用，它是進行藝術表現的重要手段。設計中把強調、突出、給人強烈印象的構成要素周圍留下空白，能擴大和提高視覺效果，同時利于視線流動，破除沉悶感。著意處理的空白，能留下藝術想象的天地，增強畫面的靈性與氣韻。有些網頁設計者總想把界面
充分利用
，把文字、圖像安排得滿滿的，認為設計畫面留有空間是一種浪費。殊不知，這種龐雜堵塞的構圖往往使人望而生畏，留不下一點印象，失去了設計的意義。

網頁設計的基本原則

1、符合受眾心理與社會心理需求懂得不同的受眾以及不同社會層面的不同心理需求，是網頁設計者應掌握的一項基本原則。

在網頁設計創作之前，設計者要對所表達對象的文化背景、審美心理以及審美感知等作一系列相應的了解。對不同的地方，設計者還要進行一定區域民俗文化現象的了解與學習。只有這樣，設計出的網頁作品才能與設計對象產生緊密聯系，達到讀者與作品的心連心、面與面的交流。



2、分析用戶需求，注意內容布局設計者在設計網頁時應該明確網站的類別，例如是企業網站、政府網站還是個人網頁等等。

因為不同類型的網頁具有不同的主題與風格，設計網頁時不能喧賓奪主，也不能主題與網站類別屬性相矛盾，在圖片、文字、色彩使用上要合理選擇。所以，網頁設計的第一步應該以用戶需求和網站的類別為導向，所有的設計工作都應該圍繞這個前提，正確定位，不能脫離主題。

⒊設計主題定位準確

網頁設計是一種按照一定需要，有目的進行的一種計劃與預定。其突出特點就是具有相當的制約性和約束力，即受到設計主題的限制和約束。網頁設計作品應有自己鮮明主題，主題目標的鮮明性決定了設計的鮮明個性特征。設計主題定位要求準確，這是設計原則中的首要問題。網頁主題是設計傳遞內容的主要信息，設計者應該充分運用所要傳達的特定信息，調動畫面中所有的視覺因素，使之發揮出最大的視覺效果，設計的定位要始終牢牢地把握住設計主題。

4、網頁下載的時間不能過長為了保證網站有不斷增長的點擊率，除了有吸引人的內容之外，還要有較快的下載速度。

網頁加載速度對于一個網站而言是十分重要的，它直接影響用戶的訪問體驗和滿意度。如果2030秒還不能打開一個網頁，一般人就會沒有耐心。至少應該確保主頁速度盡可能快，如沒有必要，最好不要用大的圖片，或者對圖片進行壓縮使用。

5、網頁對不同操作系統、瀏覽器的兼容通常情況下，人們所設計的網頁都在一種操作系統和瀏覽器中進行調試。

在互聯網中，有各式各樣的操作系統和瀏覽器，網頁中的一些技術、插件在不同的操作系統和瀏覽器中的效果是不同的，有的甚至根本無法兼容，因此要充分考慮網頁的兼容性。比較常見的辦法是在不同的操作系統和瀏覽器中做測試，保證最大的兼容性。⒍經常進行調試及數據更新為吸引更多用戶，網站中的信息必須經常更新，如新聞、圖片資料等。同時，由于網站要經常進行修改更新，網頁之間的鏈接有時會出現斷開現象，因此，要經常做網站的調試，檢查是否有鏈接出錯的地方并進行修復，以維護網站的正常運行。

交互設計的誤區

交互設計從來都不是簡單的事情?？煽康慕换ネǔＰ枰柚鷮τ脩粜袨榈纳钊敕治?，然后有針對性的精心策劃。

可是隨著新的技術和新的交互模式(pattern)的不斷涌現，事情就變得不是那么容易了。其實大家遭遇的困境都很相似，用戶已經很難被單純炫酷的圖片、流暢的懸停效果和出人意料的動效所打動，真正能讓他們露出微笑的是持久、令人愉悅的交互設計和用戶體驗。如果你對于日常的設計中的常見的誤區有所了解(Find
out)，自然會有意識地繞過這些坑。

為了更好的設計，我們為你簡單總結了一下最常見的5種交互設計的誤區。

1、過度的創意

網頁辦公室裝修設計師
絕對不缺少創意。我們希望借工作表達自己，也一直在試圖尋找能讓產品(Product)脫穎而出的優秀創意。但是當涉及到交互設計的時候，推陳出新并不一定總是好的，它甚至
會對你的網站和產品產生不利的影響(influence)。的確，許多用戶渴求新鮮的創意，但是在操作控制和交互上卻往往希望協調可控，所以他們更傾向于熟悉的交互。Etsy的創業
總監Randy曾經撰文探討過這個問題(Emerson)，文中直言
;設計師們不要在此自作聰明了!
;在這篇文中，他詳細解釋了為什么你不應該走極端去設計充滿大量創新交互的網頁。

以Lotorama的網站為例子，漂亮的頁面和柔和的音樂都非常的贊，但是用戶進來之后會遲疑，想知道這個網站要如何操作控制。不要曲解我的意思，如果你是純粹處于炫技，那么這種華麗而充滿游戲性的網站絕對稱得上是創意無限，但是對于普通用戶來說，他們的直覺失去效果，茫然無措會成為網站瀏覽的障礙。

下面是另外一個案例(
n
l
)，這個名為Safety
on
the
Slopes
的項目是為了說明冬季運動的危險的，整個網站的設計整潔，交互也直觀。上海網站建設通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片(GIF，JPEG，PNG)和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。網站設計也有所創新，但是同時是以用戶交互直覺為先決條件，以身臨其境為目標。

2、令人迷惑的交互

;不要自作聰明
;的規則也應當應用在導航設計上。一些辦公室裝修設計師試圖運用別具一格不同尋常的名稱，以活動更富有實驗性的導航。比如這個Chijoff網站，
就讓前來應聘的用戶充滿困惑。如果你是網站的訪客，需要來回折騰一陣子，才能搞清楚這個名為
;Co-Create
;的頁面實際上也就是常見的
;Services
;頁面。最糾結的是，即便是你將整個頁面都看完之后，仍然高不清楚要怎么辦，因為這個頁面的底部僅僅只有一個表單，展示行業新聞，并且
僅僅提供一個注冊入口!至于聯系頁面就更簡單了，僅僅提供了一個郵政編碼和一個郵件地址?？倎碚f之，他們用各種手段讓用戶無法直接快速有效的聯系上他們。

在看看這個案例(
n
l
)。你猜猜看，Maison
Margiela
的頁面上的
;Universe
;這個分類是干啥的?這個炫酷的鏈接，實際上是鏈接到他們的Facebook頁面的
唉。

反例當然也有，看看legworkstrdio的網站吧，他們的創意非常不錯，網址導航清晰明確，用戶也不會在導航中迷失。

3、雜亂無章

曾經有過一個階段，辦公室裝修設計師試圖將所有的網站內容全都塞到一個頁面當中去。雖然這個時代已經過去了，但是非常多網站依然在犯這個錯誤，甚至在我們自己設計的時候，有時候也會身不由己地想這么做?？纯催@個在線商店的設計吧：

辦公室裝修設計師試圖使用簡單的配色方案(fāng
n)，但問題(Emerson)是頁面中大大小小的框、復雜多變的字體破壞(vandalism)了整體的風格，用戶也在大量繁復的中懵逼。搜索框中
;那么你今天想得到什么呢?
;文案還是挺時尚的，但是頁面風格卻完全是過時的設計。

反觀EBay的設計，在設計上則更為克制，保持清爽而簡單的設計，凸顯用戶關注的內容，并且明確地提示用戶下一步該怎么做。上海網站建設通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片(GIF，JPEG，PNG)和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。

4、要有對比度

對比度是構建視覺層次最重要的手段之一，也是讓視覺元素吸引用戶的絕佳方式方法。在網頁設計中，對比度不僅僅是通過(tōng
gu
)色彩來呈現的，尺寸控制、形狀設計、位置調整也都能表現出對比度。

最簡單也是最生動的案例，就是下面的這個網站。設計師在網站的一致性上做的頗為不錯，但是相對復雜的背景和文字內容、按鈕等前景元素之間的對比不明顯。

相比之下，這個網站也采用了深淺色的對比來進行設計，但是結果卻截然不同。另外，充滿創意的滾動效果也引入了頗為不錯的視覺效果，很酷吧?

5、忽視表單樣式

表單設計其實是用戶訪問體驗設計的基本組成部分之一。每個網站都有不同的設計目標，不論是銷售產品(Product)、呈現還是提供平臺，然而許多設計漂亮的網站總會給你一個令人感到無聊到死的復雜表單，除了那些極其想加入會員或者想參與問卷調查的那些訪客，許多用戶會直接關閉頁面，離開網站。

有了JCF這樣的跨瀏覽器解決方案之后，你就可以同丑陋的默認表單樣式說再見了，你可以設計更優秀更人性化的表單那設計，來提升交互效率和用戶訪問體驗。

另外一個惱人的情況(Condition)是，表單要求太多，想法不成熟，或者并未經過良好的測試。比如sketchybusiness.io
這個網站中，表單突出了所有的空白字段，即使有些是不需要填寫的。

反觀mostlyserious.io的表單設計，你會喜歡表單中的鼠標懸停提示。上海網站建設公司不同領域的網頁設計，網頁圖形設計，界面設計，創作，其中包括標準化的代碼和專有軟件，用戶體驗設計和搜索引擎優化。許多人常常會分為若干個工作小組，負責網站不同方面的設計。另外，其中
;Don
t
be
shy
;的提醒為整個表單增添了人性化的元素。

結語

網站并不是做好了就夠了，你還需要多加測試!有許多問題(Emerson)并不是意料之中的。上海網站建設通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片(GIF，JPEG，PNG)和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。用戶會在哪里碰到問題?網址導航中的設定是否符合用戶的意識?視差效果和內置
的視頻是否可以流暢加載?讓用戶參與測試最大的好處是你真的開始擁有用戶的視角，而非你自己的腦補，了解實際的需求，才能有所改進。不要試圖限制你的創造
力，但是也不要忘記基本的原則，這樣才能在不為用戶帶來困惑和沮喪的同時，給予他們驚喜。