800元手機電腦做網站_設計網頁建設制作_優化推廣_濟寧網絡公司
當前位置:主頁 > 新聞資訊 > 建站知識 >

網站設計的思路和流程有那些

發表日期:2018-08-15 23:20文章編輯:木易工作室瀏覽次數: 標簽:    

隨著互聯網科技的發展和昔及,計算機硬件的不斷升級,網絡已 經是我們生活中必不可少的組成部分。計算機網絡已經走進干家萬戶, 手機網絡正在迅猛崛起。在我們享受網站購物的快捷、網上娛樂的輕 松、網上辦公的高效的同時,也在與網站進行著越來越多的接觸。在 開始本節的內容之前,先請大家思考一個問題:如果要你創建一個網 站,需要做哪些工作?流程是怎樣的?
每一個初次接觸網站設計的人對這個問題的回答都是不同的。有 人回答先做美術設計、規劃頁面的視覺效果;有人回答找網站的運行 平臺、首先解決技術問題;有人回答先找技術人員進行合作協商。這 些答案都是網站策劃設計中的一部分,那么網站設計的流程到底是怎 樣呢?
圖 1-1 是由 JesseJamesGarrett1
網站設計的思路和流程有那些
 
創作的用戶體驗模型。這幅流程圖被全世界的網頁設計師所推崇, 因為它形象而實際地表達了網站設計的過程。
這幅圖的閱讀順序是自下而上,依次體現了網站設計的5個層面: 戰略層、范圍層、結構層、框架層、表現層。其中每個層的內部都分 為兩個部分:人機交互部分和超鏈接文本部分。
1.2.1戰略層
戰略層是建設一個網站首先要考慮的問題。在這一階段,網站的 建設者需要首先明確建設網站的目標和策略,是要建設電子商務類盈 利網站、公司宣傳網站還是公益網站、創意性的網站?是想通過網站 進行盈利,還是想通過網站進行某種宣傳和匯集?網站建設目標是網 站建設者的內部需求,也就是網站所有者本身的需求。
在明確網站建設具體目標的同時,還要進行外部需求分析。包括
用戶需求分析、社會環境需求分析等。通過網站建設者自身的內部需 求與網站外部需求的綜合分析,利用用戶調查問卷、心理分析圖表等 手段,最終形成明確的網站建設戰略。
在這一階段可以提出一些常見問題并進行溝通和探討,例如:希 望通過網站提供什么信息?目標用戶都是什么樣的人?這些人有哪些 共同特征或差異?網站的競爭對手是誰?不喜歡的網站案例是什么樣 的?用戶看到建設好的網站會有什么樣的反應?整個項目的時間和預 算是怎樣的?
戰略層階段解決的問題可以概括為:我們為什么要建設一個這樣 的網站,即建設這個網站的初衷是什么。
1.2.2范圍層
范圍層,顧名思義,是要對網站戰略層目標進行進一步的細化, 制訂出網站的具體內容,為網站的戰略目標劃定具體范圍。在這一階 段,為了滿足前面分析過的網站所有者內部需求及外部用戶需求,必 須制定出最切實和有秩序的網站具體內容。例如:要建設一個購物網 站,就需要明確網站要包含哪些內容信息,如商品類別、商品描述、 網站的相關鏈接等。
但僅有網站的內容信息是不夠的,內容信息只是網站的軟性部 分。這些內容通過什么樣的方式進行組合?用戶通過什么樣的方式才 可以接觸到這些內容?而他們之間又會在交互的過程中發生什么關 系?這些都是網站的功能規格需要滿足的部分。還是用購物網站舉例, 用戶選好了數碼產品中的手機,需要通過購物車,到結算中心進行結
算。購物、結算、選擇商品、取消選擇商品、退換貨、在線交流等功 能都屬于功能規格的描述范圍。
通過范圍層的完善,我們進一步明確了一個問題:我們的網站要 建設什么,即這個網站都有什么內容。
1.2.3結構層
在范圍層明確之后,將進入網站的結構層階段。網站的結構層會 關注和實施兩方面的內容是:網站的信息架構和交互設計。網站的信 息架構決定了網站^何將信息傳遞給用戶。網站建設者通過網站的范 圍層,將網站需要包含的具體內容細則及功能細則進行組織。網站在 這一階段將形成內容結構圖,明確網站內容的信息架構,制定出網站 的頁面層級、每一層級的頁面數量、層級與層級之間的組織關系以及 每個頁面內的信息含量。通過網站內容結構圖將網站的信息架構體現 出來。
結構層階段還包括網站的交互設計,這里的重點是制定和考虛影 響用戶執行和完成任務的選項。即用戶在每一個內容信息停留時的功 能性可操作項,最簡單的功能如前進、后退、上一項、下一項、至頂 端等,隨著互聯網技術的發展,交互方式也在不斷更新和變化,還有 很多更為人性化的設計被越來越多的人采用,例如:圖像的放大、縮 小、旋轉,內容的提交、修改以及動態網站中一些更為人性化的交互。
網站結構層的信息架構與交互設計是相輔相成的,交互設計需要 圍繞信息架構展開,信息架構又需要有合理的交互設計做支撐。
1.2.4框架層
如果說結構層是網站的內容羅列和交互設計的安排,那么框架層 則是所有網站信息的進一步細化設計。這一階段的設計包括網站頁面 設計和導航設計,但這里提出的兩個設計并不是視覺上的藝術化處 理,而是所有內容及功能信息在頁面上的位置排布以及導航位置、層 級的組織和安排。
通過結構層的設計,我們已經能夠為網站建設一個概念結構,艮P 網站內容的層級關系。
圖1-2是網站的概念結構圖示例。
圖1-2是網站的概念結構圖示例
 
網站的導航是貫穿網站內容的重要線索,通過對網站內容的歸類 確定導航的內容和順序。內容龐雜、信息量大的網站除了全站導航外, 還需要多個層級的導航,網站建設者通過這些導航的內部構成模塊以 及導航與導航之間的聯系構成了網站的整個結構。這些關于導航內容 的設計是在結構層中確定的,在框架層會為這些導航安排具體的位置 及呈現方式,確定導航及下級內容在頁面中的分組、不同級別的信息 排列方式、更易于用戶對信息的操作和獲取的分組方式。
在框架層階段,會確定頁面內容與頁面所需要的控件:按鈕、輸 入框、選擇框等,對它們進行具體的位置規劃,但此時的規劃僅僅是 位置規劃,而不是視覺效果的設計,即網站內容如何進行排列。
圖1 -3是網站的框架結構圖示例。
圖1 -3是網站的框架結構圖示例
1.2.5表現層
經過前四層的浦勢,我們終于到了表現層階段。表現層階段是網 站內容信息與功能的最終視覺化呈現,在表現層的背后有戰略目標、 內容范圍、信息結構、信息位置等諸多方面的考慮和設計。與表現層 緊緊相連的是框架層,在框架層中已經出現了網頁頁面的雛形,只是 這個雛形是非常樸素的內容信息組織表現,沒有任何色彩、形狀、形 象上的設計。在表現層,我們將解決網站的藝術表現問題。
表現層所要硏究的內容也是本書后續章節講解的重點。網站的藝 術效果是網站的形象,是網站內容最直觀的體現。如果說前面四個階 段構成了網站的骨骼和血液,那么表現層就是網站的皮膚和臉面,是 網站與用戶接觸的第一個窗□,是網站給用戶第一印象的源頭。網站 表現層的設計是學習數字媒體藝術相關專業人員的學習重點,在實際 的工作中,視覺設計人員從事表現層設計的工作,他們根據網站各級 頁面的框架圖進行視覺設計。
競拍網站的框架圖
圖1-4是一個競拍網站的框架圖,圖中標明了內容模塊的位置及 相應的文字內容◊需要設計師根據框架圖進行藝術設計。
框架圖設計出的兩個色彩不同的頁面效果
框架圖設計出的兩個色彩不同的頁面效果
 
圖1-5和圖1-6是根據框架圖設計出的兩個色彩不同的頁面效果, 從框架層到表現層的過程中,設計師在一定的范圍內進行設計,提供 多個設計稿進行討論。對于門戶及購物網站來說,框架層的限定會更 多一些,頁面的文字、按鈕、輸入框無一不體現著網站的功能;對于 個人網站等藝術性較強的網站來說,框架層的限制會少很多,頁面的 元素大多是為視覺服務的,設計師發揮的空間也比較大。
 
從戰略層到表現層的過程示意圖
從戰略層到表現層的過程示意圖如圖1-7所示,它形象地展示了 每一層的內容項目,網站設計就是通過這樣的層級關系構架起來的, 我們要進行的網站藝術設計位于最頂層——表現層。
相關新聞

濟寧網站建設前的備案如何做

濟寧網站建設前為什么必須要備案。 網站建設不一定非要備案,不過如果想選擇國內服務器,...

日期:2019-03-06 瀏覽次數:107

濟寧網站建設后優化關鍵詞降權的分析方法和解

網站降權是什么? 網站降權是指搜索引擎對網站評定的級別下降,是搜索引擎對網站進行的一...

日期:2019-02-24 瀏覽次數:115

濟寧網站優化建設排名不穩定的因素和解決辦法

網站排名不穩定,有浮動,這是每個網站都會經歷過的,只是有些網站做得方法得當,恢復排...

日期:2019-02-24 瀏覽次數:102

濟寧網站內鏈優化建設的優點和方法

內鏈的優化建設相對于外部鏈接的優化建設更具有可控性,內鏈的優化建設能更好的引導用戶...

日期:2019-02-24 瀏覽次數:114

濟寧整站優化的網站如何建設

但很多人只知道有網站優化這么一說,對網站優化的好處并不清楚。本文就將具體說一下網站...

日期:2019-02-14 瀏覽次數:182

惠民移動網站建設的基本技巧有哪些?

伴隨著互聯網的逐漸發展,如今大部分的人都有了使用手機來瀏覽網頁的習慣了;因此大部分的...

日期:2018-09-11 瀏覽次數:164

拳皇98APP 128福彩是真的假的 贝通比牛牛手机版 大小单双稳赚10 福建时时4星组6号码 老时时彩基本走势图 玩转彩票之大小单双技巧 时时彩骗局 江西时时中奖 五分时时彩定位胆公式 好运来快三app 欢乐炸金花万人安卓版 宝来娱乐安卓 重庆时时开奖直播视频 快三大小单双玩法技巧 北京pk哈赛车官方网站 北京pk10免费计划网站