網(wǎng)頁企劃與評估ppt課件

1、網(wǎng)頁企劃與評估如何做一個專案企劃者.小測驗還記得這個網(wǎng)頁嗎？mms.learnbank.tw/demo/ladder/9grade/main/index.htm做這樣一個網(wǎng)站，需求哪些人力？請列出來。.PlanningDesignDevelopmentPublishingMaintenance網(wǎng)站企畫環(huán)節(jié)1.網(wǎng)站企畫與製作流程1企畫須知網(wǎng)頁架構圖形製作程式製作建立文字內(nèi)容建立多媒體資料網(wǎng)站管理網(wǎng)站行銷.企畫須知網(wǎng)站架構等同於行銷活動、人力、經(jīng)費、與消費群市場與商品優(yōu)勢：網(wǎng)站分析推動企畫.網(wǎng)頁架構網(wǎng)站架構圖符合企畫面的事務考慮程式網(wǎng)頁的操作過程考慮運用者操作習慣與美編、程式討論可行性修正企畫案並

2、訂出時程表.圖形製作參考類似網(wǎng)站搜集必要素材統(tǒng)一網(wǎng)頁風格配合程式調整.程式製作可依企劃獨立製作與美編部分同時進行配合美編修正網(wǎng)頁隨時協(xié)調更改網(wǎng)頁.其他建立文字資料建立多媒體資料網(wǎng)站管理網(wǎng)站行銷.網(wǎng)站企畫環(huán)節(jié)2執(zhí)行 implementation 設計design 建構architecture 定義definition .網(wǎng)頁企劃與製作流程2定義建構設計建構執(zhí)行.主題分析定義運用者分析競爭市場分析戰(zhàn)略內(nèi)容開發(fā)工具與科技時程安排.運用者分析Define your purposeDefine your target audienceGain input from potential users on

3、the content of your siteDefine your audience/user profile.競爭市場分析Find out who your competitors areRate competitors sitesExamine other media presentations of your subject matter.戰(zhàn)略Define the message you want to convey. Decide how you will persuade your audience to accept your message.Select a tone.Ide

4、ntify the depth of information or the level of detail that you will offer. Select a visual and language presentation approach that will help you meet your goals effectively. Plan site features that will help you meet your goals.Identify your capabilities and how they can be used to meet your goals.

5、.內(nèi)容Identify information contentPlan content that utilizes Web technology in unique and appropriate waysDesign your site so that it is accessible to a full range of usersPlan to give users content that will format correct in their browsersObtain URLs that will enable users to find your site easily.開發(fā)

6、工具與科技檢視以下工具的優(yōu)缺點HTMLCSSFramesScripting Languages (CGI, VB, etc.)Java Applets.時程安排Schedule development timeline.時程安排續(xù)Plan for an iterative development and design processPlan budgetAssign a teamSchedule user involvementAssign work to content providers and expertsCommunicate your project plan with your

7、team.領域分析建構視不同媒材，蒐集資訊。對不同媒材與資訊加以分類整理。針對各細目，擬定呈現(xiàn)內(nèi)容與戰(zhàn)略。詳列製作上所需的技巧。.選擇硬體與軟體建構以下提供一軟硬體環(huán)境之範例，企劃目標為開發(fā)影像資料庫系統(tǒng)。系統(tǒng)開發(fā)工具作業(yè)系統(tǒng) - Windows 2000 ServerWeb Server - IIS5.0Java Servlet & JSP - Resin-2.0.1 & JDK1.3.1資料庫Microsoft Access 2000Real Server 8.0.選擇硬體與軟體續(xù)影音處理Premiere 6.0Real Producer 8.0系統(tǒng)運用環(huán)境Web Browser - IE

8、, NetscapeCPU - Intel 486以上同等級CPURAM - 64以上.設計流程設計涵蓋IdentityInformationInterfacePresentationInteractivity五部分，請參考訊息設計課程投影片。.故事板底稿範例設計大約描畫頁面長相.原型Phototype執(zhí)行原型是正式產(chǎn)品推出前，大致完成的作品，很多應用程式有所謂的Beta版，意義和原型很像，就網(wǎng)站言，假設他幫某系設計網(wǎng)站，當初步設計完成後，就要進入一連串的測試與評估，此時便是原型，在確認一切問題都修正後才正式上線。Conversion Protocol和Runtime Behavior，是在原

9、型建構前就應完成的步驟，前者進行平臺或傳輸協(xié)定轉換，後者主要在於除錯。.評估執(zhí)行發(fā)展中評估Formative Evaluation通常是專家評估或是小範圍調查測試推出後評估Summative Evaluation線上回饋或大規(guī)模調查等.網(wǎng)站設計的宗派Andrew Chak整體哲學觀點驅使設計者尋找超出Web之外的解決方案並根據(jù)顧客的需求進行設計。Alan Cooper倡導人性化和個性化的設計。Davis和Laroche提倡包容性，鼓勵將藝術、結構和內(nèi)容交融進Web的設計中。Jakob Nielsen這位Web設計傳教士藉以參加神聖的設計巡迴佈道大會分享他的設計理念。 Jared Spool與不

10、斷在尋找但始終未找到誠實人的希臘愚人Diogenes類似，Jared Spool從來沒有發(fā)現(xiàn)面面俱到的好網(wǎng)站。.Andrew Chak一個設計者需求看到一個網(wǎng)站的一切競爭對手。競爭不只是來自另一個網(wǎng)站，也來自現(xiàn)實生活。因此，假設網(wǎng)站不優(yōu)於現(xiàn)實生活的話，人們就不會運用它。Chak的三大設計原則是：快速的頁面下載直覺的導覽精緻簡約的設計。.Alan Cooper一個所謂優(yōu)良的設計是建立在對廣泛的人類共通性和特殊群體的個別意向的深化了解之上，因此它可以對適當?shù)馁Y訊、過程和技術進行排序，從而可以使那些特殊群體達到他們的專業(yè)和個人的目的。Cooper的三大設計原則是：精簡的設計健全、快速的頁面下載無誤的

11、除錯管理.Robert Davis & Paul Laroche真正勝利的運用者介面設計是經(jīng)過沉思熟慮並以運用者為中心的系統(tǒng)或經(jīng)驗設計的自然擴展。Davis、Laroche設計原則是：有效effective和誘人sexy並不相互排斥。要有勇氣去重新定義所謂 酷 的含義，將勝利successful和直覺intuitive這兩大因素包含進來。.Jakob Nielsen它在您需求考慮的幾乎一切要素方面不斷都表現(xiàn)得很好。當您在不同的頁面上時，您知道您要做什麼。不斷在改進設計，但是卻不斷以運用者經(jīng)驗為出發(fā)點。Jakob的三大設計原則是：精緻簡約，越少越好 援助運用者任務 不要阻礙運用者.Jared S

12、pool在設計得最好的網(wǎng)站上瀏覽時，網(wǎng)友終究有多少時間能夠勝利達到他們的目標呢？根據(jù) Spool 的觀察，答案是42。根據(jù)Spool簡單而保守的推算，一切的網(wǎng)站都是失敗的。Spool的四項設計原則是：瞭解網(wǎng)站的目的 瞭解運用者的目的 確保所刊登的內(nèi)容能達到目的確保所刊登的內(nèi)容能達到目的.經(jīng)驗設計 Experience Design 先軀為Nathan Shedroof。經(jīng)驗設計涵蓋從美學、互動、價值與意義、品牌、時間、動機、架構、控制、語言、回饋、資料、個人化、商務等不下數(shù)十種元素，這些元素都能夠影響到設計的結果，能否能真正符合運用者的需求。因此，我們談網(wǎng)站或網(wǎng)頁的設計，從表象上看來似乎是一種

13、藝術、視覺的設計，但假設只著眼藝術與視覺設計的表現(xiàn)，絕對不會是評估一個專業(yè)網(wǎng)站規(guī)劃及設計公司最好的角度。雖然好的網(wǎng)站設計需求經(jīng)驗豐富的設計者，然而經(jīng)驗設計中所謂的經(jīng)驗，是指運用者的經(jīng)驗，而非網(wǎng)站設計者、擁有者的經(jīng)驗。也就是說，經(jīng)驗設計的精神就是，站在運用者的角度、觀點、心態(tài)來設計網(wǎng)站或網(wǎng)頁。.設計前之研討課題運用者是誰？他們在網(wǎng)站上能夠發(fā)生的經(jīng)驗是什麼？這些經(jīng)驗會在何處發(fā)生？在何時發(fā)生？為什麼會發(fā)生這些經(jīng)驗？當這些經(jīng)驗發(fā)生時，他們會有哪些問題或想法？ .經(jīng)驗設計之特征網(wǎng)站或網(wǎng)頁的經(jīng)驗設計有一項特征，就是運用者的一切活動，包含感觀、動作、心靈都發(fā)生在虛擬的空間中。在虛擬的空間中，建立經(jīng)驗最快的方

14、法就是模擬實體的世界，因此如何整合實體與虛擬世界中的空間與活動，彌補虛擬世界相較實體世界的缺乏之處，並利用虛擬世界優(yōu)於實體世界之處，則是經(jīng)驗設計時的最大挑戰(zhàn)。.經(jīng)驗設計七大元素品牌資產(chǎn)brand asset資訊架構information architecture視覺影像visual文字風格editorial聽覺聲音sound動線規(guī)劃structural網(wǎng)頁技術technology.品牌資產(chǎn)企業(yè)識別(CI、VI)、企業(yè)文化、企業(yè)精神、廣告行銷等資產(chǎn)，是決定網(wǎng)頁設計的基礎，例如網(wǎng)頁所採用的顏色、基調、技術、圖片、圖示、文字風格、資訊內(nèi)容等等，都應視企業(yè)的品牌為設計的依歸。尤其擁有豐富品牌資產(chǎn)的企業(yè)

15、，在塑造數(shù)位世界的品牌籠統(tǒng)時，往往比實體世界更需求斟酌考量。.資訊架構內(nèi)容架構是最接近網(wǎng)站源頭的元素，所謂源頭是指網(wǎng)站規(guī)劃階段包含網(wǎng)站設立的目的與必須達成目標，網(wǎng)站的內(nèi)容其實是根據(jù)這些條件而產(chǎn)生的，產(chǎn)生之後如何以最適合的方式分類、群組，深深地影響後來的瀏覽介面設計與視覺的呈現(xiàn)。因此每家公司都會有一套Approach，運用有系統(tǒng)性思索與檢驗方式來建立網(wǎng)站的骨架，之後的文字影像內(nèi)容就像網(wǎng)站的皮肉一樣，能以最美觀的姿態(tài)出現(xiàn)在它們應該出現(xiàn)的地方，並且被運用者以最快速度找到。.視覺影像圖片、影像、圖示、動畫、底圖背景、版面規(guī)劃等是網(wǎng)頁設計的靈魂，尤其在強調眼球數(shù)(Eyeballs) 的網(wǎng)路媒體上，視覺的

16、展現(xiàn)不斷是企業(yè)、網(wǎng)路運用者與媒體評斷網(wǎng)頁設計優(yōu)劣與否的第一道關卡。然而遭到網(wǎng)路傳輸速度的限制，設計網(wǎng)頁不像平面那樣擁有要求超高解析品質的權利，但也能看出一個設計者的功力。視覺影像的元素通常被主觀影響，在經(jīng)驗設計的精神裡，一切都應該回歸到運用者的立場，最大的判斷依據(jù)是他們連線的速度與上網(wǎng)的目的。.文字風格設計一篇網(wǎng)頁或構思一則網(wǎng)路廣告時，小從一個按鈕的命名，大到一整篇公司簡介，都必須靠專業(yè)的文案人員來處理，我們稱之為Web Writer。雖然圖片可以抓住網(wǎng)友的眼，文字卻能抓住他們的心。最根本的要求，Web Writer應該懂得善加命名網(wǎng)頁的Title，懂得善加命名圖檔名稱，懂得利用動畫在Load

17、ing時的空檔傳達一些有用的訊息。Web writer要懂得掌握網(wǎng)站的精神，以符合網(wǎng)站精神的語體與文字風格與運用者溝通網(wǎng)站的品牌與個性。.聽覺聲音網(wǎng)頁與平面設計的最大不同，在於網(wǎng)頁是一個展現(xiàn)文字、圖像、影片與聲音等多媒體特征的表現(xiàn)空間，寬頻時代的來臨，越來越多網(wǎng)站都參與了聲音的元素作為提昇與運用者溝通的媒介。然而聲音元素的應用牽涉到檔案格式、長度、品質、合法性與必要性，好的聲音效果能為精采的網(wǎng)頁設計加分，當然在運用時必須考量運用者的頻寬及電腦設備，能否呵斥不用要的傳輸負擔，能否因為運用者電腦設備的缺乏而反而變成失之交臂的創(chuàng)意。.動線規(guī)劃網(wǎng)站的動線規(guī)劃不如視覺、文字、品牌、內(nèi)容，是顯性的元素，他

18、通常不被看見，卻能夠被運用者清楚的感受。動線規(guī)劃可從運用者在網(wǎng)站上從事互動性的活動時被檢視。假設他希望網(wǎng)友參與會員或訂閱電子報，動線的規(guī)劃明顯的影響他們的結果能否勝利，所謂的勝利不只完成與否，同時也包括順暢與否，換言之，他們花費多久的時間完成一項活動。此外，動線的設計也包括不同運用者在網(wǎng)站中進入的途徑能否被清楚的標示、友善的引導以及體貼的協(xié)助。.網(wǎng)頁技術前面說過網(wǎng)頁是一種多媒體的表現(xiàn)空間，因此在網(wǎng)站或網(wǎng)頁設計中如何以多媒體製作技術來呈現(xiàn)需求的效果或目的，例如動態(tài)DHTML、Flash、JavaScript、Rich Media、3D、Streaming Media、Virtual Realit

19、y.等等，廣泛的被運用在瀏覽系統(tǒng)、介面設計、前導頁面、網(wǎng)路廣告、網(wǎng)路行銷活動、商品展現(xiàn)介紹、下載等目的。這個部分經(jīng)常會牽涉到兩部分的專業(yè)，一部份是與前端的頁面設計者，一部份是後端的資料庫設計者。而這正是經(jīng)驗設計中最困難的部分，因為兩方專業(yè)人員在設計時側重的層面、所運用的設計工具、以及溝通的語言有相當大的差異，因此在分頭進行到需求整合的階段，就會產(chǎn)生許多問題與困難，例如進度落後與效果不良。因此，了解經(jīng)驗設計精華的公司懂得如何整合這兩部分專業(yè)的人，以最有效率的方式溝通。當然，更重要的是，他們也會懂得如何運用、控制這些技術，以最優(yōu)異的速度表現(xiàn)，呈現(xiàn)最精采的頁面，帶給網(wǎng)友最正確運用經(jīng)驗。 .四大經(jīng)驗感

20、觀經(jīng)驗look and feel行進經(jīng)驗entry and move活動經(jīng)驗action and interaction心靈經(jīng)驗mind and spirit.感觀經(jīng)驗運用者在接觸到網(wǎng)頁的瞬間，以他的眼睛、耳朵、手指感受一切。感觀經(jīng)驗著重於七項元素中的品牌、視覺、聽覺、文字、內(nèi)容，因為這時候運用者對於網(wǎng)站還停留在觀察階段，以所見到網(wǎng)頁來決定下一步行進的目標，或審視與本人上網(wǎng)目的相符的標的物。有些運用者會因為視覺設計決定想不想留下來繼續(xù)瀏覽，也會看網(wǎng)站提供的內(nèi)容而選擇繼續(xù)參觀或離開。.行進經(jīng)驗運用者的感觀經(jīng)驗側重於觀察、審視、構成印象、決定最高行動原則，而行進經(jīng)驗側重於決策行動的目的與方向，例如

21、決定觀看進一步資訊、參與何種活動、由何處進入，而這樣的行進過程能夠會經(jīng)過兩個或兩個以上的鏈結，才干抵達目的地，因此行進經(jīng)驗側重視覺、文字、動線與技術等元素。在行進經(jīng)驗的設計上必須利用網(wǎng)路互聯(lián)的鏈結特性，讓運用者的行進經(jīng)驗更順暢，具體的說，就是進入直接、進行容易。.活動經(jīng)驗運用者在網(wǎng)站上的活動類型相當多樣，活動經(jīng)驗與行進經(jīng)驗的差別在於停留的時間。以旁觀者的角度看來，行進與活動都是運用者的動作，但行進經(jīng)驗是經(jīng)由快速的判斷與決策抵達目的地，而活動經(jīng)驗則以完成一項目的或任務，由於完成一項目的或任務必須經(jīng)過多次的決策、行動、回應、決策的過程，後者所花費的時間通常較前者長?；顒咏?jīng)驗所側重的元素為文字、動線

22、、技術，為了節(jié)省活動所花費的時間，因此在視覺影像上的元素在此時會儘能夠簡化以求速度品質的提昇。.心靈經(jīng)驗行進經(jīng)驗與活動經(jīng)驗因為可以透過觀察運用者在運用網(wǎng)站所設計的動線或功能時，能否勝利完成，過程能否順暢無礙而了解，感觀經(jīng)驗也還可以詢問運用者對於文字、內(nèi)容、視覺的辨識與了解程度做出評斷，心靈經(jīng)驗相較於其他經(jīng)驗是最不容易被觀察與描畫的。運用者在歷經(jīng)感觀的審視、行進的判斷、活動的執(zhí)行種種經(jīng)驗後，到離線或離開網(wǎng)頁的時刻，會產(chǎn)生一個整體網(wǎng)路經(jīng)驗的評斷，我們稱之為心靈經(jīng)驗，而這項經(jīng)驗是必須被發(fā)掘的，因為它能夠深藏在運用者的心裡、短暫地閃過運用者的腦海，假設不加以發(fā)掘，除非運用者願意主動分享，否則不容易留下

23、實際的結果。因此許多網(wǎng)站在設計任務流程中，都會參與一項重要的流程：可用度測試usability test，這項測試的目觀察運用者的運用情形，讓他們能夠快速正確地完成他們上網(wǎng)的目的。.網(wǎng)路可用性根據(jù)網(wǎng)頁設計大師 Jakob Nielsen2001的定義，可用性usability是衡量運用者和網(wǎng)站、應用軟體等設備互動經(jīng)驗的指標。假設以水龍頭為例，一個水龍頭的可用性包括運用者能否能立刻找出水龍頭的運用方式、能否能輕易開啟它？ .系統(tǒng)的優(yōu)劣兩大要素實用性utility：該系統(tǒng)能否能提供消費者需求的功能？假設提供的功能和消費者的需求無關或者無法解決主要的問題，那麼不論它好不好用，都是一個差勁的系統(tǒng)?？捎?/p>

24、性usability：運用者能否會用該系統(tǒng)，能否有效地操作該系統(tǒng)？即使該系統(tǒng)所言不虛，提供令人滿意的功能，但假設運用者想不出怎麼操作，依舊是差勁的系統(tǒng)。.可用性五大特征易學習運用者面對一個完全陌生的系統(tǒng)時，可以在多短的時間內(nèi)學會根本操作？ 記憶力運用者以前碰過這類系統(tǒng)，日後再接觸時，能否對系統(tǒng)有足夠的記憶力，幫助他有效完成任務？還是每次都得從頭學習一次？ .可用性五大特征續(xù)出錯頻率與嚴重性運用者操作錯誤的頻率？以及出錯的嚴重性？例如將水泥廠付之一炬的嚴重性遠甚於記錯高爾夫球員的桿數(shù)運用的效率一旦運用者學會操作後，可在多短時間內(nèi)完成任務？ 主觀滿意度運用者對系統(tǒng)用後的滿意度？.留意事項一切系統(tǒng)的

25、運用性都具備上述五項特質，因此在設計產(chǎn)品時必須將上述五項特質納入考慮。有時候，一些特質會重於其他特質，以網(wǎng)路為例，易學習是最重要的一項，因為用戶鮮少在一個網(wǎng)站停留太久。 此外，主觀滿意度也相當重要，因為用戶假設覺得某個網(wǎng)站不夠好，只需輕鬆在滑鼠點一下，就可進入其他網(wǎng)站。相較之下，出錯頻率就比較輕微，但商務網(wǎng)站仍得小心，確?？蛻羲嗁彽漠a(chǎn)品、付款的信譽卡號碼、郵寄地址正確無誤。 企業(yè)內(nèi)部網(wǎng)路的設計必須專注於系統(tǒng)的運用效率，因為同一個運用者免不了會重複運用它。企業(yè)對外網(wǎng)路的設計必須重視降低出錯率，因為常有大筆金額的買賣，出錯不得。 .網(wǎng)站可用性問題點選連結很簡單，但要知道哪些連結值得點可不容易。網(wǎng)

26、頁上的說明經(jīng)常不清不楚的，讓網(wǎng)友猶如墜入五里迷霧，不知道應該點哪裡才對?，F(xiàn)在網(wǎng)路上互動的技術五花八門，除了傳統(tǒng)藍色的超文件連結標示之外，還有Java以及動態(tài)HTML，往往讓運用者更加頭大。網(wǎng)路上的導覽做得很糟糕，運用者結果會迷失在浩瀚的網(wǎng)路世界裡，找不到本人想要的網(wǎng)站。.網(wǎng)站可用性問題續(xù)不論是平面或是舊的媒體格式，網(wǎng)頁內(nèi)容都可以針對這些需求進行最正確化的安排，不過幾乎沒有什麼網(wǎng)頁內(nèi)容能夠滿足上網(wǎng)者在線上閱讀最適化的需求。電子商務買賣流程不容易讓人了解，而且也不容易完成。許多網(wǎng)頁雖然做得相當亮麗，但是金玉其外敗絮其內(nèi)，運用者反而找不到需求的內(nèi)容，也沒有想要的買賣項目。網(wǎng)友的整體運用體驗相當不理想

27、，儘管某些個別項目還算過得去，但是緩慢的下載過程往往令人退避三舍。.運用者測試測試的對象必須具有代表性，能夠反映出他目標觀眾的看法。除非是企業(yè)內(nèi)部網(wǎng)路，他才可以同儕作為測試對象，否則不要用他的同事或是任何了解這項專案的人。不過就算是企業(yè)內(nèi)部網(wǎng)路，也應該防止以專案團隊的成員作為測試對象。.運用者測試續(xù)測試的時候，不要只是玩一玩網(wǎng)站介面而已，運用者應該實際執(zhí)行某些任務：網(wǎng)站上到處點一點當然很簡單，真正的考驗在於網(wǎng)站能否能夠協(xié)助運用者解決某些特定的問題。所測試的任務也必須具有代表性。.運用者測試續(xù)防止出面干涉，讓測試者自行感受，並且暢所欲言。測試的目的並非展現(xiàn)他有多聰明，也不是要協(xié)助運用者加速達成任務，而是希望從運用者解決問題的實際體驗當中獲得寶貴的意見。運用者從家裡或是辦公室造訪他的網(wǎng)站時，可沒有專家坐在旁邊。測試者必須自行體驗才行。.提昇可用性的方法不論他覺得舊的網(wǎng)站有多爛，在重