正文

網(wǎng)頁設(shè)計框架圖怎么畫（網(wǎng)頁設(shè)計框架圖怎么畫出來）

發(fā)布時間：2023-03-11 20:00:48 稿源：創(chuàng)意嶺閱讀： 156 問大家

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于網(wǎng)頁設(shè)計框架圖怎么畫的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008

本文目錄:

1、如何進行web頁面原型圖設(shè)計
2、網(wǎng)頁設(shè)計模版是什么?應(yīng)該怎么設(shè)計？
3、網(wǎng)頁設(shè)計應(yīng)該如何布局
4、網(wǎng)頁設(shè)計流程是什么？

網(wǎng)頁設(shè)計框架圖怎么畫（網(wǎng)頁設(shè)計框架圖怎么畫出來）

一、如何進行web頁面原型圖設(shè)計

最后半天心不在焉拖拖拽拽把各個部分都搭建好了，可是做出來的頁面慘不忍睹，自己都沒勇氣打開。晚上回家后和鄰居又討論了三個小時，最后熬夜把原型圖完成。雖然最后原型圖也沒有被采納，但是這次原型圖居然受到了表揚，領(lǐng)導(dǎo)說我的原型圖有了提升。今天就寫下這篇文章，為這段時間的工作做一個總結(jié)。原型設(shè)計前：①�0�2�0�2 重點突出內(nèi)容：要清楚明了頁面需要突出的內(nèi)容是什么，這個在前期的討論中一般就已經(jīng)確定；②�0�2�0�2 第一功能目的：除了內(nèi)容以外，功能方面需要突出的是什么？如引導(dǎo)注冊或像下一級頁面引導(dǎo)流量。③�0�2�0�2 如果是改版要考慮改版要解決的問題是什么？對于前一版頁面存在什么問題畫原型圖要考慮：④�0�2�0�2 內(nèi)容板塊如何劃分，頁面的內(nèi)容主要分成幾個模塊，每個模塊內(nèi)存放的都應(yīng)該是一些相近的內(nèi)容；⑤�0�2�0�2 模塊與模塊之間的關(guān)聯(lián)性：每個模塊與其相近的模塊之間應(yīng)該有一些邏輯上的關(guān)聯(lián)性，而不能隨意的進行拼接；⑥�0�2�0�2 頁面的流程：模塊與模塊的上下承接關(guān)系，模塊與模塊應(yīng)該上下存在某些邏輯上的連接性。頁面完成后：完成原型圖后一定要進行檢查，主要從以下三個方面進行檢查：⑦�0�2�0�2 內(nèi)容是否完整：對比框架中的每一部分內(nèi)容檢查是否完整；⑧�0�2�0�2 第一屏是否把最重要的內(nèi)容展現(xiàn)出來：頁面第一屏以外的內(nèi)容基本都是輔助內(nèi)容，如果不能在第一屏就把內(nèi)容全部展現(xiàn)，基本上就等于內(nèi)容不完整；⑨�0�2�0�2 功能是否實現(xiàn)：想要表達的功能是否在明顯的地方表現(xiàn)出來；⑩�0�2�0�2 流程是否順暢：把相應(yīng)的流程走一遍，看是否流暢。注意tips：①�0�2�0�2 未完成的作品拿出來討論頁面不完整不代表思想不完整，即使是不完整的頁面，里面應(yīng)該也要有一個清晰的邏輯圖。通過這種方法可以強迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有屬于自己的清晰思路，對內(nèi)容、功能和流程自己要先想明白，可以列舉一些具體的問題來輔助理清自己的思路。③�0�2�0�2 堅持自己的想法每一個人都有自己的想法，只要你理清自己的思路，就一定要堅持下去。用自己的邏輯解答別人的疑惑和質(zhì)疑，形成自己的思路。關(guān)于工具和作圖：之前花了很多時間去研究axure，是學(xué)會了一些作圖的技巧，可是漸漸發(fā)現(xiàn)這些對頁面的提高基本不大，我是覺得在掌握基本的工具使用時可以暫時忽略工具。頁面最重要的是你的想法，等到想法成熟之后不妨慢慢的考慮工具的深入，太多的考慮技巧方面的問題反而會模糊視線。思考的過程和畫圖的時間可以在7:3都無所謂，前期的框架和流程思路想好后，后面的原型圖也就水到渠成了。

二、網(wǎng)頁設(shè)計模版是什么?應(yīng)該怎么設(shè)計？

網(wǎng)頁模板就是已經(jīng)做好的網(wǎng)頁框架，使用網(wǎng)頁編輯軟件輸入自己需要的內(nèi)容，再發(fā)布到自己的網(wǎng)站。每個網(wǎng)頁模板壓縮包內(nèi)包含：PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改)，按鈕圖片PSD文件、Flash源文件和字體文件，推薦使用Dreamweaver軟件向網(wǎng)頁模板添加內(nèi)容。x0dx0ax0dx0a創(chuàng)建和設(shè)置x0dx0ax0dx0a1)模板的概念：作為創(chuàng)建其它文檔的樣板的文檔。創(chuàng)建模板時，可以說明哪些網(wǎng)頁元素不可編輯，哪些元素可以編輯。其擴展名為.dwt。x0dx0ax0dx0a2)模板的作用：有利于保持網(wǎng)頁風(fēng)格的一致;提高工作效率。x0dx0ax0dx0a1.創(chuàng)建模板x0dx0ax0dx0a1)創(chuàng)建一個全新的模板：在模板面板中，使用快捷菜單按鈕或單擊面板上的新建按鈕x0dx0ax0dx0a模板面板的打開：Window菜單--Templatesx0dx0ax0dx0a2)創(chuàng)建基于文檔的模板：File菜單-Save As Templatex0dx0ax0dx0a2.設(shè)置模板頁面屬性x0dx0ax0dx0a1)用模板創(chuàng)建的文檔繼承模板的頁面屬性，頁標題除外。x0dx0ax0dx0a2)設(shè)置：Modify菜單-Page Propertiesx0dx0ax0dx0a3.定義模板的可編輯區(qū)x0dx0ax0dx0a1)定義模板的可編輯區(qū)x0dx0ax0dx0a在模板文檔中選定對象、Modify菜單、Templates、New Editable Regionx0dx0ax0dx0a2)取消可編輯區(qū)標記x0dx0ax0dx0aModify菜單-Templates-Remove Editable Regionx0dx0ax0dx0a應(yīng)用和更新x0dx0ax0dx0a1.應(yīng)用模板創(chuàng)建文檔x0dx0ax0dx0a1)應(yīng)用模板創(chuàng)建文檔x0dx0ax0dx0a使用模板創(chuàng)建新文檔：File菜單-New From Templatex0dx0ax0dx0a或：File菜單-New-從模板面板中拖一個模板到文檔x0dx0ax0dx0a對現(xiàn)有文檔應(yīng)用模板：Modify菜單-Templates-Apply Template to Page-模板面板中選定模板-單擊Selectx0dx0ax0dx0a或：從模板面板中拖一個模板到文檔中x0dx0ax0dx0a或：從模板面板中選定一個模板，單擊Applyx0dx0ax0dx0a2)可編輯區(qū)和鎖定區(qū)x0dx0ax0dx0a在應(yīng)用了模板的文檔中，只有可編輯區(qū)的內(nèi)容才可以修改。x0dx0ax0dx0a3)把頁面從模板中分離出來x0dx0ax0dx0a如果要對應(yīng)用了模板的頁面的鎖定區(qū)進行修改，必須先把頁面從模板中分離出來。x0dx0ax0dx0a具體操作：Modify菜單-Templates-Detach From Templatex0dx0ax0dx0a2.修改模板x0dx0ax0dx0a在模板面板中選定模板、單擊編輯按鈕或雙擊模板名稱或使用快捷菜單的Edit、編輯完成后保存x0dx0ax0dx0a3.更新站點中使用模板的所有文件x0dx0ax0dx0aModify菜單-Templates-Update Pages

三、網(wǎng)頁設(shè)計應(yīng)該如何布局

網(wǎng)站結(jié)構(gòu)與優(yōu)化很重要，頁面布局也是非常重要的，讓客戶第一眼看到網(wǎng)站的感覺是怎么樣，如果第一感覺不好，相信下一次就不一定來了，所以網(wǎng)頁的內(nèi)容除了用戶的需求之外，還要注重用戶體驗。下面的內(nèi)容，就以兩個方面來講，一個是搜索引擎的識別，一個是用戶體驗：

工具：電腦、網(wǎng)站

步驟：

一、搜索引擎的識別

1、網(wǎng)站具有清晰的導(dǎo)航

根據(jù)網(wǎng)站的導(dǎo)航去制定需求。一個清晰明了的用戶導(dǎo)航可以讓游客在網(wǎng)站中自由的訪問，并且根據(jù)需要選擇合適的內(nèi)容，而網(wǎng)站導(dǎo)航的加入也可以加大網(wǎng)友的訪問深度。

2、頁面整潔，欄目之間合理布局

之前看過一個做服裝的網(wǎng)站，一進入這個網(wǎng)站就感覺到了皇宮一樣，很華麗也很唯美，但是就找不到一點文字介紹，全部都是圖片，操作起來很不方便，由于偶然進入了一個較深的頁面(該網(wǎng)站沒有面包屑導(dǎo)航)，找不到回去的路就只好關(guān)掉了頁面，無形中就會這個網(wǎng)站的跳出率做出了貢獻。

3、設(shè)置用戶評論板塊，增加網(wǎng)站互動性

不可否認的是，現(xiàn)在很多網(wǎng)站都過于獨立，和用戶之間的互動性不夠，其實網(wǎng)站互動性的上升能大大提升網(wǎng)站自身的可信程度，尤其對于一個新站來說，知名度不夠，號召力不強，用戶是無法相信的。而這時用戶的參與無疑就讓網(wǎng)站自身的可信力大大上升，而且一個網(wǎng)站最成功莫過于有眾多用戶的參與，而評論無疑會讓網(wǎng)站生命力更強。

二、以用戶體驗為前提

1、頁面元素的豐富性。

什么叫做頁面元素的豐富性呢，就是網(wǎng)站有圖片、有視頻、有評論、有加粗、有分段這樣可以說是一個優(yōu)質(zhì)的頁面。當(dāng)然要在適當(dāng)?shù)那闆r下出現(xiàn)圖片、視頻、或者其它的元素。這樣也會增加頁面的價值。

2、頁面的文字大小要符合一般用戶的閱讀習(xí)慣。

不要太大，也不要太小，一般13號的字體就可以了。字體的顏色，也要和網(wǎng)頁的風(fēng)格協(xié)調(diào)，一般都是黑色或者深灰色。文章排版要鮮明，段落得當(dāng)，這樣更容易讓客戶閱讀。還有文章內(nèi)盡量少用錨文本，文章內(nèi)的錨文本一般都是以用戶的需求性和相關(guān)性來增加錨文本。盡量不要影響用戶閱讀。

3、頁面圖片要合適。

過多或者過大，圖片過多或者過大，很直接的就影響了網(wǎng)頁的加載速度，導(dǎo)致用戶長時間打不開網(wǎng)頁，那就悲劇了，所以，網(wǎng)頁的大小和盡量少用圖片圍標，如果不可避免，那就把圖片壓縮到最小再上傳吧。

總結(jié)：其實網(wǎng)頁的布局，重要的就是細心，包括各個方面都要細心對待，頁面上存在的每一個東西，都要有實際意義。

四、網(wǎng)頁設(shè)計流程是什么？

設(shè)計流程：

主題明確：

在目標明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的

擴展資料：

網(wǎng)頁設(shè)計（web design，又稱為Web UI design，WUI design，WUI），是根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進行網(wǎng)站功能策劃，然后進行的頁面設(shè)計美化工作。

作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。

網(wǎng)頁設(shè)計一般分為三種大類：功能型網(wǎng)頁設(shè)計（服務(wù)網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁設(shè)計（品牌形象站）、信息型網(wǎng)頁設(shè)計（門戶站）。設(shè)計網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計方案。

網(wǎng)頁設(shè)計的工作目標，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設(shè)計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網(wǎng)頁設(shè)計甚至?xí)紤]到通過聲光、交互等來實現(xiàn)更好的視聽感受。

網(wǎng)頁設(shè)計主要以Adobe產(chǎn)品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。

標題設(shè)計：

在設(shè)計網(wǎng)頁標題時，應(yīng)注意同時兼顧對用戶的注意力，以及對搜索引擎檢索的需要。這一原則在實際操作中可通過三個方面來體現(xiàn)，這三個方面也可以被認為是網(wǎng)頁標題設(shè)計的一般規(guī)律：

1、網(wǎng)頁標題不宜過短或者過長

一般來說6-10個漢字比較理想，最好不要超過30個漢字。網(wǎng)頁標題字數(shù)過少可能包含不了有效關(guān)鍵詞，字數(shù)過多不僅搜索引擎無法正確識別標題中的核心關(guān)鍵詞，而且也讓用戶難以對網(wǎng)頁標題（尤其是首頁標題，代表了網(wǎng)站名稱）形成深刻印象，也不便于其他網(wǎng)站鏈接。

2、網(wǎng)頁標題應(yīng)概括網(wǎng)頁的核心內(nèi)容

當(dāng)用戶通過搜索引擎檢索時，在檢索結(jié)果頁面中的內(nèi)容一般是網(wǎng)頁標題（加鏈接）和網(wǎng)頁摘要信息，要引起用戶的關(guān)注，網(wǎng)頁標題發(fā)揮了很大的作用。

如果網(wǎng)頁標題和頁面摘要信息有較大的相關(guān)性，摘要信息對網(wǎng)頁標題將發(fā)揮進一步的補充作用，從而引起用戶對該網(wǎng)頁信息點擊行為的發(fā)生（也就意味著搜索引擎推廣發(fā)揮了作用）。

另外，當(dāng)網(wǎng)頁標題被其他網(wǎng)站或者本網(wǎng)站其他欄目/網(wǎng)頁鏈接時，一個概括了網(wǎng)頁核心內(nèi)容的標題有助于用戶判斷是否點擊該網(wǎng)頁標題鏈接。

3、網(wǎng)頁標題中應(yīng)含有豐富的關(guān)鍵詞

考慮到搜索引擎營銷的特點，搜索引擎對網(wǎng)頁標題中所包含的關(guān)鍵詞具有較高的權(quán)重，盡量讓網(wǎng)頁標題中含有用戶檢索所使用的關(guān)鍵詞。

以網(wǎng)站首頁設(shè)計為例，一般來說首頁標題就是網(wǎng)站的名稱或者公司名稱，但是考慮到有些名稱中可能無法包含公司/網(wǎng)站的核心業(yè)務(wù)，也就是說沒有核心關(guān)鍵詞，這時通常采用“核心關(guān)鍵詞+公司名/品排名”的方式來作為網(wǎng)站首頁標題。

開頭所列舉的某網(wǎng)絡(luò)營銷服務(wù)商網(wǎng)站首頁標題實例，其實也是采用這種方式來設(shè)計網(wǎng)頁標題，只不過由于羅列了太多的“核心關(guān)鍵詞”，反而沒有了核心。

做美工看起來并不是一件容易的事情。首先，要對整個站點和企業(yè)有個大致的了解。例如：某些企業(yè)喜歡藍色的主調(diào)，你不可能去做個紅色的主調(diào)，這樣完全違背客戶的主要意愿，如果百度的標志改成五顏六色的，相信大家也不會認可的。

站長的職責(zé)是規(guī)劃網(wǎng)站結(jié)構(gòu)。同樣也需要有一定的審美觀。下面介紹了幾款常用的繪圖工具和基本知識。