十年網站優化經驗,關鍵詞閃電排名,客戶實力見證!

網頁設計的內容有哪些?又有哪些技巧呢?

網頁設計的內容有哪些?又有哪些技巧呢?

本文目錄

網站建設成功的第一要素,也就是網頁設計。合理的網頁設計制作是建設一個優秀企業網站的先決條件。因此,在建設網站前,就要先做好網頁設計的規劃。閃排網通過多年的網站設計頁面制作實際工作中,總結了一些關于網頁設計的經驗,不敢獨享,拿出來和大家分享一下。

網站設計

一、網頁設計的內容有哪些

1.原型圖

原型圖階段中設計師需要和產品經理溝通需求,這時要注意,并不是產品經理向設計師下發需求,而是需要互相就自己擅長的方面進行溝通。視覺方面具體呈現也許設計師會有過更好的方式,這是需要在設計之前與產品經理達成一致。

2.視覺稿

網頁設計的內容中視覺稿階段就是我們要根據原型圖確定的內容和大體板式完成網站的界面設計了,在網站設計的時候,我們需要一些圖像和靈感的素材。比如世界杯專題時,我們除了收集很多素材之外,也可以設計一個“情緒板”。簡單說情緒板就是將一些于主題相關的資料和素材鋪貼在一起,這樣可以更好地指引我們整個需求的設計主題和大體感覺。

另外,很多網站的頭部通常需要主視覺來抓人眼球,這時可能會使用到需求方提供的主題素材、logo、主視覺PSD等,那么用素材和這些需求方提供的資料進行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標了。主視覺下面的信息排布更強調合理性,這時也需要和產品經理溝通從后臺調取圖片尺寸、標題字段長度等,然后根據這些要求完成頁面信息部分的設計。

總之,設計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。

視覺稿設計

3.設計規范

當視覺稿通過之后,很多設計師可能不會主動地去做設計規范。其實每一個可迭代的產品都需要設計來總結設計規范,設計規范就是所有頁面中共性的東西,比如字體不同的大小、圖片的尺寸、按鈕的樣式等,這些共性也是用戶訪問網站時會理解成固定概念的憑證。比如同樣的分析功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設計規范主要也是在約束設計師我們自己,在用戶有限的記憶力中減少思考的成本。

同時,設計規范也可以保證同一個項目的不同設計師都能輸出一樣風格的設計來。最后,設計規范對于設計師個人來說也是滴項目影響的一個佐證,可以證明你的思考和你在項目中的地位。所以我認為設計師應該主動去做設計規范和項目總結。設計規范如何去做?其實設計規范就是把主要頁面的元素固定才統一元素即可。具體來說一個產品的設計規范應該有:字體規范、主體色規范、圖表規范、圖片規范等不同的分類。

4.切圖

在網頁設計的內容中,網頁設計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握PS軟件技能。如果遇到特殊情況需要我們切圖時,我們可以使用諸如Cutterman、Zeplin等切圖插件中web選項為前端切除網站所需要使用的圖片。

5.前端代碼

前端工程師會用代碼重構我們設計的頁面,把圖紙變為靜態頁面。然后和后端工程師對接調取數據接口,一個網站就活了起來。工程師們為了方便了解網站是不是達到了我們要求的數據,也會進行埋點。埋點就是在頁面代碼中插入一些統計代碼,方便我們之后確定哪些頁面訪問量高,哪些沒有達到預期。在此后還會有測試工程師介入來發現編譯完的網站是否存在一些漏洞等。

6.項目走查

網頁設計完成后還需要設計師進行項目走查,來確定網頁還原度是否有問題。如果發現有和設計稿出入很大的,就需要要求前端工程師進行調整。這個步驟非常重要,因為網站的成品才是我們最終的輸出,不要認為設計稿很漂亮而實現后的頁面就不需要我們負責了。

二、網頁排版的小技巧

1. 減少不同類型字體的使用

不要使用太多的字體,只破壞你的布局。盡量把字體數量限制到最小,一般兩個就很充足,其實一個也足夠。

2. 使用標準字體

用戶對標準字體更熟悉,因此可以快速的讀取。除非你的網站的自定義字體很有吸引力,否則最好還是使用系統字體。一個安全的方法是用一個系統的字體:如Arial,Calibri,Trebuchet等。

3. 選擇一種能在各種尺寸中工作的字體

用戶可能會從不同的屏幕尺寸和分辨率的設備中訪問網站,選擇一種能在多尺寸和重量上運行良好的字體,保持每個尺寸的可讀性。

保證你的字體在比較小的屏幕種依然清晰可辨,確保你說選擇的字體在較小的屏幕上清晰可辨!盡量避免草書,雖然很漂亮,但很難閱讀。

4. 限制行的長度

Baymard Institute關于行的長度這樣說:“如果你想要有一個好的閱讀體驗,每行應約60個字符。每行擁有適當的字符數量是讓你的文本具有可讀性的關鍵。”行太短,視線要經常返回,會打破讀者的節奏。行太長,用戶的視線又很難專注于文本。

5. 行間距的重要性

增加行高,可以增加文本之間的垂直空白空間,提高可讀性,換取屏幕空間。一個規則,行高應該是字符高度的30%。

網頁排版示例

6. 確保你有足夠的顏色對比度

在文本和背景中不要使用相同或相似的顏色,文本越明顯,用戶才能更快的閱讀。

你一旦選擇了顏色,就要在大多數設備上進行測試。如果測試時顯示閱讀副本有問題,那么你的用戶使用時也會有相同得到問題。

7. 避免紅色或綠色的文本

色盲很常見,尤其是男性,據調查8%的男性是紅綠色盲,避免單獨使用紅色和綠色來傳達信息。

8. 避免使用閃爍的文字

首先,閃爍的內容可能會導致個體癲癇發作,其次,對于大多數用戶,這很令人反感而且容易分心。

三、專業網頁設計技巧

1.保持主頁簡約,無雜亂

我們很少在網站上閱讀每一個字。相反,我們快速瀏覽網頁,挑出關鍵字和句子。考慮到這些已知的行為,最好是訴諸情感而不是文字計數。在你的網站上瀏覽的人越少,點擊或記住,他們就越能更好地處理和評估他們面前發生的事情。這使得他們更有可能做你想讓他們做的事情。當然,文本和號召行動是必要的,但一定要用更大的副標題和清晰的段落來打破它們。我們也建議使用圖片或圖標來表達你的觀點。

2.設計時考慮視覺層次

我們已經在石碑上走了很長一段路了。隨著電腦屏幕和智能手機的出現,隨著信息顯示技術的不斷發展,設計師的工作仍然是清晰地安排內容。你只有幾秒鐘的時間來吸引別人的注意力,告訴他們你的網站是什么。如果你為你的信息建立了一個清晰的層次結構,讀者就會情不自禁地跟著你留給他們的面包屑。然后應用顏色、對比度、大小和間距來進一步強調,保持對頁面上吸引注意力的注意,并確保它總是有意的。我們發現創建一個強大的視覺層次結構的最佳設計元素之一是:這些將有助于將您的網站組織成清晰易讀的內容。

頁面設計技巧

3.創建易于閱讀的網站內容

“可讀性”衡量人們識別單詞、句子和短語的容易程度。當您的站點的可讀性很高時,用戶將能夠高效地掃描您的站點并在文本中不費力地獲取信息。

實現網站可讀性比較容易;試試這些關鍵的規則:

對比是關鍵

在文本和背景之間有充分的對比是非常重要的,這樣文本就很清楚了。你最有可能選擇的顏色是你的品牌身份的一部分,他們應該在你的網站上代表。自由地玩顏色,不要犧牲可讀性。

你看不見你看不到的東西

早期的網站有小字體,但隨著時間的推移,人們意識到12pt字體很難在網上閱讀。當屏幕離某人的臉只有24英寸時,大多數人都很難看到更小的字體。你在網上看到的一個典型的經驗法則是保持你的字體語言至少16 pt。這是一個很好的起點,但要記住,這個數字完全取決于你使用的字體。

襯線和無襯線字體

你可能不會選擇你的家庭,但你會選擇你使用的字體類型。Serifs是一些字體在字母的末端有一些突出的點或線,例如,Times New Roman,來自Serif字體家族。Sans Serif字面意思是“沒有襯線”。這些字體通常是在線文本的最佳選擇——就像你目前正在閱讀的。邊注:我們知道腳本字體(那些看起來像字跡的字體)真的很酷,所有的花哨的曲線和東西,但是請考慮你的訪客的眼睛——給他們一個休息!

有太多的字體

一般來說,在一個網站上不要使用超過三種不同的字體。有些項目可能需要更復雜的字體組合,但如果你選擇使用各種字體,整體效果應該是和諧的,而不是混亂的。

延伸閱讀:響應式網頁設計技巧

響應式網站

1、考慮高寬比桌面端的圖片瀏覽體驗和移動端是完全不同的,這一點毋庸置疑。對于絕大多數的網站而言,圖片展示的位置都很相近,大同小異。而設計師的任務,是要確保網站隨著屏幕和設備變化的時候,圖片的展示不會在頁面布局的伸縮變化過程中變得奇怪和失真。

這個時候,就要始終牢記圖片的高寬比,并且始終控制高寬比不會改變。回到桌面端網頁中,大幅的背景圖或者置于頁面頂端的圖片看起來非常漂亮,可是當它切換到移動端設備中的時候,首先屏幕比例和方向就不同了,那么它是否還那么好看呢?圖片被縮小之后,信息的呈現是否會丟失?它是否會被拉伸?這個時候,圖片的高寬比的控制就顯得特別重要了。控制原始圖片不被拉伸,同時讓圖片所展示出來的部分的高寬比能夠盡可能合理地匹配對應的屏幕,這樣也就不必擔心響應式斷點過多,導致你需要上傳過多的圖片。

2、尺寸和比例的一致性響應式設計就不能不說斷點。

為了照顧不同的屏幕,我們需要將圖片裁剪成不同比例不同尺寸的大小,而這也直接影響著整個設計與開發的設計流程。許多人僅僅只是將圖片上傳到CMS系統中,就希望它能以完美的樣式呈現出來。這不現實。每張圖片都應當被裁剪為合理的尺寸,并且放置在理想的位置上,確保它們會以用戶期望的樣子呈現出來。后端可能會在這件事情上花費相當的時間和精力,但是這些努力是值得的。

3、使用輪播圖或者圖庫輪播圖控件和圖庫控件是網站中最常見的圖片載體,并且也可以更加自如的管理圖片。尤其是當你使用了那些比較著名或者適配范圍比較廣的第三方控件的時候,控制圖片元素的粗活重活基本上都會被這些控件接手過去。

不過,我們之前提到的圖片長寬比和尺寸大小的控制同樣也是要注意的,否則一樣會讓網頁的展示效果變尷尬。除此之外,你還需要什么場合使用什么樣的控件。如果你擁有若干高品質的圖片或者需要推薦特定的文章和專題,那么你需要使用幻燈片輪播圖控件。如果你擁有大量有待展示的圖片,可以縮小展示也不存在可讀性問題的話,不妨使用圖庫類的控件來展示。許多作品集類的網站常常會使用圖庫控件。

4、盡量避免使用圖片說明(Captions)雖然圖片說明能夠讓你的圖片的信息更加豐富,但是它會非常直接地影響到網頁的運作。盡量避免使用它們,如果實在是需要,盡量用其他的方式來呈現。圖片的Caption屬性加入之后,確實能在桌面端擁有良好的渲染效果,但是小屏幕上常常問題不斷。

為了不讓這些細小的可用性的問題影響用戶體驗,盡量避免使用就好了。因為這種小問題而讓用戶無法忍受并且離去,并不劃算。

5、圖片和視頻混用要小心如果網站中同時存在圖片和視頻類的多媒體,用戶和設計者應該都是能夠接受的,甚至許多用戶已經習慣了這樣的設計。但是要注意的是,即便是在同一個頁面中,也盡量不要讓圖片和視頻同時存在于同一個控件或者區塊中。

也許這樣看起來很炫酷,也許一部分圖片和視頻能夠搭配起來,但是更多的視頻和圖片很難在尺寸上保持一致,導致總會有一部分圖片或者視頻會留下空白和間隙。最好的方案還是將兩者分開展示,避免了媒體屬性和尺寸上的差異與沖突。這幾乎適用于任何設計元素,而圖片和視頻尤甚。

6、削減不必要的元素雖然輪播圖和圖庫控件非常好用,但是許多設計師常常會往其中添加許多垃圾的內容,最常見的就是塞入一堆導航箭頭、按鈕、文本甚至行為召喚按鈕。這樣的例子不勝枚舉。一般情況下,用戶其實是熟知如何同輪播圖這類控件進行交互的。

除非你的設計和我們的認知有著巨大的差異,以至于必須使用其他的導航方式來引導用戶。盡量只保留用戶需要的元素,把事情簡單化,不要給予太多的選擇。其實簡單化之后的設計可以提升你的轉化率。

以上就是閃排網總結的網站設計中一些常見的設計技巧,希望對你在網站建設設計種有一定的啟發作用,如果你有剛好的建議和技巧,可以在下方留言,我們一起討論!

評論(334人參與,0人評論)

發表評論

電子郵件地址不會被公開。 必填項已用*標注

Scroll Up 云南时时彩票