- 網頁配色與實戰(藝術設計與實踐)
- 安雪梅編著
- 2937字
- 2021-04-02 22:20:09
1.3 網站的籌劃與定位
現在的網站已經不是之前那樣簡單地將頁面串接起來就可以了,如今的網站不僅需要豐富的圖文內容,還需要詳細周密的計劃,其設計、鏈接、發布等更為復雜。所以,創建一個好的網站是一個極具挑戰的大工程(如圖1-31~圖1-34所示)。

圖1-31 照片集為主題的網頁設計

圖1-32 TechEd網頁設計

圖1-33 INTRACE網頁設計

圖1-34 粉刷材料的網頁設計
1.3.1 網站整體籌劃
網站籌劃是個很復雜的過程。隨著時代的發展與網絡技術的突飛猛進,網站的內容及個性也豐富多樣了起來,但無論是內容還是風格,都要以滿足用戶的需求為主要目標,來進行規劃設計。我們首先要給網站定位和確定傳播的內容,再籌劃創建界面等。網站整體流程主要分為計劃、開發、測試及維護。
1.計劃階段
計劃階段首先要確定網站頁面、內容、功能,還有針對用戶的分析、網站的計劃與建議。
2.開發階段
開發階段是對網站內容與頁面的設計。這是一項顯現技術與藝術的階段,不僅要熟練網站制作的操作,還要將網站頁面設計得美觀大方,易吸引用戶關注。同時還要滿足客戶的一些特殊要求。網頁在具體設計制作開發階段可以從以下幾方面考慮。
(1)用戶分析
為了減少網站建設的失敗風險,在建設前要對網站的目標和需求進行一個基本的估量。對在網站設計中所遇到的問題和達到的目標能夠有一個清晰的概念。在進行網站需求分析中,首先要考慮的是用戶——用戶是網站的使用者,了解用戶的需求、理解用戶的愿望,才能夠為網站設計提供依據和參考,使得網站設計更加適合各類用戶的使用需求(如圖1-35~圖1-38所示)。

圖1-35 筆記本樣式的網頁設計

圖1-36 產品促銷的網頁設計

圖1-37 網絡游戲宣傳的網頁設計

圖1-38 小游戲的網頁界面
(2)內容組織
明確網站內容,要知道網站中文本、圖像、動畫及影像等內容在頁面中占據的比例是多少,以及起到什么樣的作用。
我們可以先勾勒出站點的草圖,將客戶需要顯示的內容信息布局,理清頁面與頁面之間的直接關系。其次對網頁的整體結構進行設計,不僅頁面要求美觀,結構也要清晰、內容也要明確,還要便于用戶使用,令用戶能夠快速準確地找到自己所需要的內容。
(3)風格定位
在了解網站類型后,應確定網站界面的整體風格,不同類型的網站其設計風格也不一樣。搞清楚內容,明確定位,這樣在設計界面的時候,顏色、字體、圖形都會有個大致的范圍要求(如圖1-39所示)。

圖1-39 生態園林的網頁介紹
3.測試階段
測試階段是對網站外觀、內容、功能、系統及瀏覽器的測試。修改網站中的錯誤鏈接與程序,一步步進行測試修改,做到運轉正常,才能進行發布。
4.維護階段
維護階段是網絡技術人員與設計人員對網站運行中出現的問題進行維護,以保證網絡內容與鏈接能夠及時更新。
1.3.2 導航設計
網站中的導航功能就是指引用戶迅速有效地查閱到自己需要的內容,并且可以快速地切換頁面,跳躍瀏覽。所以在設計導航的時候要考慮到用戶的需求,從而設計出有效的信息指引(如圖1-40和圖1-41所示)。

圖1-40 沙發宣傳的網頁設計

圖1-41 創意網頁設計
1.導航的位置
導航的位置取決于網頁的風格和形式。導航放置的位置有5種,分別是頂部、底部、左側、右側、中心(如圖1-42和圖1-43所示)。

圖1-42 創意造型網頁設計

圖1-43 個人介紹主頁界面
頂部:大多數網站都是將導航放置在頁面的頂部,這樣能最先將元素展現給用戶,而且人們在瀏覽網站的時候都是習慣采取從上往下的瀏覽順序,所以將導航放在頁面頂部是個很好的選擇。
底部:通常情況下,很少會將導航放在底部。因為導航元素需要在用戶滾動頁面的時候才能全部顯示出來。底部的位置更加適合放置一些文本鏈接,或者是公司的品牌標志和宣傳等。
左側:將導航放置在左側是很普遍的一種設計形式,因為順應了用戶從左到右的瀏覽習慣,但同時縮小了正文顯示的空間。
右側:將導航放置在右側也是很不錯的選擇,因為用戶可以在沒有視覺干擾的情況下專注地閱讀正文內容。在選擇內容切換的時候再去選擇導航中的指示,但是也有些人認為這樣的擺放不符合人們的視覺流程。
中心:一般來說,只有網站的首頁才會將導航放置在頁面中心,其主要目的在于強調導航。這樣可以讓用戶更好地選擇,快速進入需要瀏覽的頁面中。另外導航放置在中心,不僅增加設計感,同時也能夠迅速捕捉人們的視覺,讓用戶對導航元素及網站留下深刻的影響(如圖1-44~圖1-46所示)。

圖1-44 趣味性網頁設計

圖1-45 簡潔風格的網頁設計

圖1-46 網頁互動界面
2.導航的風格
無論導航在哪個位置上、所用形式是什么樣的,都需要與網頁的整體風格相一致。如果導航欄都不一致,那么用戶在瀏覽信息時便容易產生混亂,在功能上也會表達不清。
1.3.3 Web的定位
Web可以分為不同專題的網站,有娛樂性的、商業性的、教育性的、綜合性的等。不論是哪種類型的網站都應該以滿足用戶為前提來進行規劃設計。網站的定位其實就是以用戶的需求來定位,只有真正滿足用戶需求的網站,才能很好地與用戶進行交互(如圖1-47和圖1-48所示)。

圖1-47 滑輪的網頁介紹

圖1-48 規劃設計的網頁介紹
1.網站的類型
網站的類型可以分為交互型、靜態型和動態型3種。
(1)交互型
交互型的網站是最為直接的類型,能夠直接將內容展現給用戶,讓用戶瀏覽到全部的內容,從而進行交流。用戶是可以對其外觀、內容自行添加改動,人與人之間也可以通過網址進行互動和相互關注等。
(2)靜態型
靜態型的網站中的內容是固定的,主要是用來瀏覽網站中的內容,就像一本電子雜志一樣,可以從頭到尾地翻閱。用戶是沒有辦法改動其中的內容及外觀的。
(3)動態型
動態型的網站會根據讀者的需求而產生變換,譬如網頁瀏覽次數的增多等(如圖1-49和圖1-50所示)。

圖1-49 簡潔明了的網頁設計

圖1-50 運動產品的網頁宣傳
2.定位觀
Web站點要有自己的設計定位,要根據訪問者的需求安排特定的主題內容,做到內容、技術與效果的完美結合。
(1)風格定位觀
一個網站的風格決定了這個網站是否能夠吸引用戶,這里的風格展現出的是網站的特點及整體感覺。具有特色的網站可以提升瀏覽者的興趣,加深讀者印象,從而吸引讀者來閱讀網頁中的內容。當然,一個沒有充足內容的網站,即使具有一定的風格也沒有什么意義。
每個人喜愛的風格不一樣,每個網站的內容也不一樣。隨著人們不斷地瀏覽各式各樣的網站,人們的眼光、品味及知識量也在不斷提升,所以網站風格定位時要考慮以下幾點。
① 要確保整體風格統一。頁面中的文字、圖像、背景色、字體及標題等都要與界面整體風格統一。
② 界面要清晰、簡潔、美觀、大方,還要有條理,便于用戶查閱資料。
③ 確保視覺元素的合理安排,使讀者在查閱信息的時候體驗到視覺的秩序感與節奏感(如圖1-51和圖1-52所示)。

圖1-51 訂購產品網頁設計

圖1-52 數碼產品宣傳網頁
(2)功能定位觀
在網站設計中,它的功能也應該符合不同層次人群的需求,僅僅在藝術性上贏得讀者是遠遠不夠的,要站在讀者所能理解的層面上對網站進行設計。一味嘗試新奇的元素,很有可能不被大眾所認可。
(3)人本定位觀
在網頁界面的設計中,如果忽略了讀者的需求,得不到讀者的喜愛與歡迎,是不成功的。我們要對客戶進行調查和分析,重視讀者的偏好和需要,這樣才會提高網站的設計質量和效率。在網頁設計時應注意以下幾點。
① 在網頁設計的時候應該提供位置信息,讓訪問者知道自己網點的位置。
② 有明確的導航與索引。能夠通過清楚的導航與索引來幫助用戶快速獲得自己所需要的內容。
③ 優化信息的加載與顯現。讀者在切換網頁或者打開網頁鏈接時,要有等待或加載信息的顯示。
- 大型網站架構實戰
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網頁設計基礎培訓
- 眾妙之門:網站UI設計之道2
- 園區網互聯及網站建設
- 眾妙之門:自由網站設計師成功之道
- 網頁設計與制作(Dreamweaver CS6)
- 網頁美工
- 社交網站界面設計(原書第2版)
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計實戰視頻教程
- 人人都玩開心網:Ext JS+Android+SSH整合開發Web與移動SNS
- HTML+CSS+JavaScript網頁制作(第2版)
- 精通網站建設:100%全能建站密碼
- CSS3藝術:網頁設計案例實戰
- Dreamweaver CS5網頁制作
- 移動優先與響應式Web設計(2冊)