- 簡(jiǎn)體
- 簡(jiǎn)體中文 English
智能網(wǎng)站設(shè)計(jì)
為什么?
可用性專家們最常用的口頭禪就是: 一個(gè)網(wǎng)站要取得成功光靠前端界面是不 夠的;
他們聯(lián)合起來(lái),基本上完全拋棄創(chuàng)新 性網(wǎng)頁(yè)設(shè)計(jì)的重要思想;
這些專家宣稱一套嚴(yán)格的創(chuàng)建網(wǎng)站所 必須遵守的“法規(guī)”,而不是他們聲稱 要提供的“指導(dǎo)方針”;
公司對(duì)可用性較差的網(wǎng)站設(shè)計(jì)變得非 常警惕;
認(rèn)為網(wǎng)絡(luò)只為一小類網(wǎng)站存在的觀點(diǎn) 已根生蒂固。畢竟,既然輪子早已存 在,再去發(fā)明豈不是多此一舉?
否定前端界面的重要性將危害到任何 網(wǎng)站的成功。
解決辦法:個(gè)人興趣
為了使您的網(wǎng)站不再顯得保守或模仿 別人的風(fēng)格,您必須將眼光從商業(yè)網(wǎng)站 轉(zhuǎn)移到當(dāng)今網(wǎng)站設(shè)計(jì)領(lǐng)軍人物的個(gè)人網(wǎng) 站上;
訪問(wèn)者應(yīng)該能“感覺”到您的網(wǎng)站。 它不是一個(gè)數(shù)據(jù)庫(kù),而是交流的媒介。
本講座的目的在于:
* 討論設(shè)計(jì)過(guò)程,幫助您設(shè)計(jì)一個(gè)有 價(jià)值的網(wǎng)站/界面/服務(wù)功能;
* 列舉設(shè)計(jì)中需要注意的事項(xiàng);
* 討論圖象設(shè)計(jì)理念,提高網(wǎng)站的視
覺效果;
* 告訴您哪里能夠找到更多幫助;
* 幫助您以挑剔的眼光分析網(wǎng)站和互
動(dòng)服務(wù)。
網(wǎng)站設(shè)計(jì)
我們接下來(lái)將講到:
● 設(shè)計(jì)過(guò)程
● 智能設(shè)計(jì)
● 需要考慮的重要因素
● 慎用Flash
● 注意事項(xiàng)
設(shè)計(jì)過(guò)程
階段:
* 形成設(shè)計(jì)思想:在項(xiàng)目開發(fā)的初期階段您需要解決一些非常關(guān)鍵的問(wèn)題;
* 設(shè)計(jì)階段:為您的項(xiàng)目選擇合適的
網(wǎng)絡(luò)技術(shù),收集網(wǎng)站內(nèi)容;
* 制作階段:將所收集的內(nèi)容在一個(gè)
綜合的網(wǎng)站界面上充分地體現(xiàn)出來(lái);
* 測(cè)試和重復(fù)設(shè)計(jì)過(guò)程……
關(guān)于時(shí)間的考慮
在設(shè)計(jì)和制作互動(dòng)項(xiàng)目的過(guò)程中,任 何事情都需要時(shí)間。您需要時(shí)間去:
* 了解什么適合于網(wǎng)絡(luò);
* 了解什么工具可用來(lái)制作網(wǎng)站;
* 完善網(wǎng)站。
設(shè)計(jì)出優(yōu)秀的網(wǎng)站很不容易!對(duì)于大多數(shù)人來(lái)說(shuō)不會(huì)一次成功,需要付出很大的努力。
明確目的
始終考慮到您的網(wǎng)站/互動(dòng)服務(wù)想要 解決的問(wèn)題;
認(rèn)清問(wèn)題。您對(duì)網(wǎng)站的目的理解越深,越有助于您找到解決問(wèn)題的方法;
選擇正確的途徑。為什么選擇網(wǎng)絡(luò)?
確定受眾
您需要確定網(wǎng)站的受眾群,并盡可能 地根據(jù)他們的喜好決定設(shè)計(jì)方案;
同時(shí)您需要了解受眾通過(guò)什么設(shè)備或 工具連接到互聯(lián)網(wǎng)。
形成設(shè)計(jì)方案
如果您的客戶需要突出品牌知名度,那么設(shè)計(jì) 的目標(biāo)應(yīng)該是增強(qiáng)訪問(wèn)者對(duì)品牌的印象,使他們 在離開網(wǎng)站時(shí)認(rèn)為客戶的品牌要比同類品牌好
(至少和同類相當(dāng));
如果您的客戶是一個(gè)非營(yíng)利機(jī)構(gòu),或即使是某商業(yè)公司的客戶支持部,設(shè)計(jì)目標(biāo)應(yīng)有所不同,即為:保證瀏覽者能輕松地找到所需要的信息和資源;
在設(shè)計(jì)過(guò)程中始終將目標(biāo)牢記在心,不要過(guò)于追求網(wǎng)站的視覺效果。
反復(fù)斟酌
您不能設(shè)計(jì)好網(wǎng)站以后交給客戶就一走了之;
在網(wǎng)站完成以后,您應(yīng)有辦法確定其所吸引的訪問(wèn)者是不是您的目標(biāo)受眾以及他們是否能從網(wǎng)站獲得有用的信息;從設(shè)計(jì)初期開始保持靈活的工作思想;做一個(gè)簡(jiǎn)單的網(wǎng)站原型,在您的工作小組里測(cè)試并試用。
網(wǎng)站的另一種內(nèi)容
客戶希望放在網(wǎng)站上的信息并不是唯一 重要的網(wǎng)站內(nèi)容。訪問(wèn)者不是被控制的觀 眾,您的網(wǎng)站必須足以吸引他們;
他們?cè)诨〞r(shí)間瀏覽網(wǎng)站的同時(shí),希望能 夠找到實(shí)用的信息或工具,或是漂亮的設(shè) 計(jì),或是好玩的游戲,或是能下載的免費(fèi) 券,或其它一些有趣的網(wǎng)站的鏈接。
技術(shù)不屬于網(wǎng)站內(nèi)容
人們總喜歡為網(wǎng)站添加一些不重要的功 能來(lái)炫耀自己掌握的最新網(wǎng)絡(luò)技術(shù);
太多不重要的功能會(huì)導(dǎo)致訪問(wèn)者很難找 到真正的內(nèi)容;
您所使用的任何一種網(wǎng)絡(luò)技術(shù)都不能偏 離網(wǎng)站的目的。
技術(shù)的用途
動(dòng)畫、聲音、互動(dòng)性、精心設(shè)計(jì)的標(biāo)準(zhǔn) 靜態(tài)圖像,這些都能夠吸引訪問(wèn)者,并使 您的網(wǎng)站給他們留下深刻印象;
如果得當(dāng),網(wǎng)絡(luò)技術(shù)可以增強(qiáng)網(wǎng)站 的說(shuō)服力,或使網(wǎng)站變得更加有趣。
根據(jù)受眾選擇恰當(dāng)?shù)募夹g(shù)
如果您的受眾是技術(shù)人員,那么您可以 盡情地運(yùn)用最新技術(shù)和各種插件;
如果您的網(wǎng)站面向大眾,那么需要使用 比較常見和通用的技術(shù)。太前端的技術(shù)有 可能使不太熟悉網(wǎng)絡(luò)的受眾產(chǎn)生距離感。
其它關(guān)于技術(shù)的考慮
網(wǎng)速和處理器速度
屏幕大小
瀏覽器版本
HTML標(biāo)簽方面的問(wèn)題
慎用Flash
如果使用恰當(dāng),Macromedia Flash將會(huì)是增強(qiáng) 網(wǎng)站吸引力的優(yōu)秀工具;
但不幸的是,它是目前最被濫用的網(wǎng)絡(luò)技術(shù)之一(我們稍候會(huì)看到一些例子)。
我最喜歡的網(wǎng)站設(shè)計(jì)師Curt Cloninger一針見血 地指出: “自Flash產(chǎn)生以來(lái),那些年輕的網(wǎng)站設(shè)計(jì)師們 就拋棄了友好的用戶界面設(shè)計(jì),而一頭扎入布滿 莫名漩渦的沼澤地里。”
隱喻
為您的網(wǎng)站或開發(fā)項(xiàng)目設(shè)定一個(gè)總的隱喻;
當(dāng)隱喻漸漸形成以后,您就可以開始設(shè)計(jì)網(wǎng)站 界面,通過(guò)它將信息和內(nèi)容傳遞給受眾;
在設(shè)計(jì)過(guò)程中,隱喻的運(yùn)用將使受眾在瀏覽網(wǎng) 站時(shí)聯(lián)想到現(xiàn)實(shí)世界,給他們親切感;
除了考慮所設(shè)定的隱喻能不能最大程度地幫助 受眾理解網(wǎng)站內(nèi)容,還需要注意它是否一直能適 合您的網(wǎng)站。
個(gè)性
您所提供的服務(wù)必須具有自己的身份和 個(gè)性才能脫穎而出;
您將用哪種方式展現(xiàn)信息或內(nèi)容?有趣 的、技術(shù)型的、時(shí)髦的、隨意的、還是正 式的?
無(wú)論您采用哪種方式,請(qǐng)記住持之以 恒。
風(fēng)格
為網(wǎng)站增加味道的最重要的貢獻(xiàn)者之一就是網(wǎng)站 的風(fēng)格,包括頁(yè)面布局、圖片的使用、字體、顏色 等;
頁(yè)面的布局應(yīng)足夠靈活,以便支持網(wǎng)站內(nèi)容的變 化和不同的媒體類型;
利用三維空間的概念:現(xiàn)實(shí)世界并不是一個(gè)平面;
盡量使網(wǎng)站風(fēng)格和設(shè)定的隱喻保持一致。
網(wǎng)站的組織結(jié)構(gòu)
大多數(shù)人在發(fā)現(xiàn)新網(wǎng)站時(shí)通常有兩個(gè)問(wèn)題:我 能在這個(gè)網(wǎng)站找到什么?通過(guò)什么途徑找到?
當(dāng)組織網(wǎng)站結(jié)構(gòu)時(shí),您會(huì)覺得左右為難:一方 面,您希望在頁(yè)面上盡可能多地顯示選項(xiàng)供不同 的瀏覽者選擇,這樣他們就可以輕松地找到想要 的信息;而另一方面,您又希望給瀏覽者一個(gè)總 體的網(wǎng)站向?qū)В嬖V他們?cè)鯓诱业街匾獌?nèi)容。
總的來(lái)說(shuō),每一屏所顯示的主要選項(xiàng)不應(yīng)超過(guò) 六至十個(gè)。
引導(dǎo)瀏覽者
為瀏覽者鋪建一條“暢通無(wú)阻的道 路”。沒(méi)有人比設(shè)計(jì)者更清楚怎樣充分地 使用網(wǎng)站;
將這條“黃金道路”而不是流水賬似的 內(nèi)容清楚地展現(xiàn)給瀏覽者;
做一個(gè)網(wǎng)站結(jié)構(gòu)樹狀圖,看一看結(jié)構(gòu)是否能夠再簡(jiǎn)潔點(diǎn),內(nèi)容是否可以更直觀有 力。
收集內(nèi)容
網(wǎng)站制作的下一步就是確定內(nèi)容的來(lái)源。這里的內(nèi) 容包括文字、圖片、視頻和聲音;
當(dāng)您已收集到一些內(nèi)容并打算制作或購(gòu)買更多時(shí), 很重要的一步是要為內(nèi)容的呈現(xiàn)方式建立一系列標(biāo)準(zhǔn),包括內(nèi)容的獲得、發(fā)布和備份標(biāo)準(zhǔn)。
要做成一個(gè)內(nèi)容和風(fēng)格統(tǒng)一的網(wǎng)站,建立這樣的標(biāo) 準(zhǔn)非常重要。應(yīng)該讓所有的工作人員都清楚了解并按 照標(biāo)準(zhǔn)執(zhí)行;
收集內(nèi)容應(yīng)該成為工作小組共同的工作。
牢記網(wǎng)站的目標(biāo)
在設(shè)計(jì)過(guò)程中需要始終著重于您希望受 眾從網(wǎng)站獲得什么,并盡量使瀏覽您的網(wǎng) 站成為一次愉快的經(jīng)歷;
如果您不確定最新的技術(shù)是否適合您的 網(wǎng)站,請(qǐng)記?。汉?jiǎn)單通常是最好的。
創(chuàng)新的過(guò)程和圖象設(shè)計(jì)技術(shù)
打基礎(chǔ)
一旦網(wǎng)站的總體隱喻或風(fēng)格確定以后,頁(yè)面的 背景就成為其它圖片的視覺基礎(chǔ);
網(wǎng)站給訪問(wèn)者的感覺是界面友好、高技術(shù)、還 是超現(xiàn)實(shí),在很大程度上取決于背景圖案;
對(duì)于背景設(shè)計(jì)幾乎沒(méi)有任何限制;
無(wú)損壓縮技術(shù)可通過(guò)如GIF和PNG等圖片格式運(yùn) 用的游程長(zhǎng)度編碼(run-length-encoding)很好地 壓縮有著大片重復(fù)顏色或圖案的簡(jiǎn)單圖片。
不可低估的文字
文字及各種字體是建立網(wǎng)站的強(qiáng)大工具;不要先入為主地認(rèn)為網(wǎng)站必須基于圖片的大量
運(yùn)用;文字可以被做出很多效果。您可以利用圖像工具做特殊字體,實(shí)現(xiàn)三維效果,改變文本顏色等等;運(yùn)用能概括網(wǎng)站內(nèi)容的關(guān)鍵字,它能吸引訪問(wèn)者的注意;如果您能嫻熟地利用文字這一強(qiáng)大的工具,那么最終設(shè)計(jì)好的網(wǎng)站將非常具有吸引力。
內(nèi)容的目的
對(duì)于設(shè)計(jì)過(guò)程中運(yùn)用的每一張圖片或每一個(gè)特 殊效果,問(wèn)問(wèn)自己:“它能表達(dá)什么意思?用它 的目的何在?”如果你發(fā)現(xiàn)自己胡亂放置了大量的剪貼畫、未標(biāo) 記或沒(méi)用的圖片,那么停下來(lái),打自己一耳光;頁(yè)面上的所有內(nèi)容必須有的放矢,并與網(wǎng)站的 風(fēng)格保持一致;避免使用無(wú)用的裝飾性圖片,它們除了降低訪 問(wèn)速度以外別無(wú)它用。
圖片的來(lái)源
制作大型互動(dòng)網(wǎng)站最大的挑戰(zhàn)在于怎樣制作能 表達(dá)設(shè)計(jì)者思想的優(yōu)秀圖片;將已有圖片和數(shù)字插畫有機(jī)地結(jié)合起來(lái)可以起 到很好的效果;對(duì)網(wǎng)上找到的圖片進(jìn)行再加工用于您的網(wǎng)站;如果有能力,您可以通過(guò)Photoshop, Fireworks和數(shù)碼相機(jī)等工具自己制作圖片。
圖像處理技術(shù)
如果您打算自己制作圖片用于網(wǎng)站,可考慮以 下的圖片處理技術(shù)來(lái)增強(qiáng)網(wǎng)站的視覺效果:
* 陰影
* 斜面和浮雕
* 顏色漸變和光影效果
* 濾鏡
* 運(yùn)動(dòng)軌跡
* 模糊
* 描邊
* 圖像翻轉(zhuǎn)
其它技巧
用路徑創(chuàng)建文本
圖片上的文字采用遮罩文本
利用已有圖片進(jìn)行扣圖處理
處理線條時(shí)使用紋理效果
將相似的內(nèi)容分類
運(yùn)用對(duì)比鮮明的顏色形成反差
將黑白色和亮色結(jié)合可產(chǎn)生意想不到的
效果
采用圖文并茂的形式
其它設(shè)計(jì)技巧提示
導(dǎo)航界面
導(dǎo)航界面應(yīng)與已確定的網(wǎng)站隱喻相符;
導(dǎo)航界面應(yīng)盡量“透明”,即:不能阻礙用戶 查找信息;
它應(yīng)清楚地顯示用戶所處的位置,并使用戶能 輕松地回到以前訪問(wèn)過(guò)的頁(yè)面;
導(dǎo)航界面的文本鏈接應(yīng)使用描述性文字;而圖 標(biāo)鏈接的圖片應(yīng)與目的頁(yè)面的內(nèi)容相符。
首頁(yè)的作用
表明網(wǎng)站的目的和主要內(nèi)容
顯示主要內(nèi)容分類
說(shuō)明網(wǎng)站的整體風(fēng)格
使訪問(wèn)者對(duì)網(wǎng)站的隱喻有初步印象
注意:避免使用不必要的形象頁(yè)面(splash page,即僅包含圖片或flash的頁(yè)面)。大多數(shù)情況下這種首頁(yè)對(duì)訪問(wèn)者了解您的網(wǎng)站不起任何作用。
盡量使內(nèi)容清楚明了;含糊不清的風(fēng)格 會(huì)使您失去許多讀者;
使用受眾熟悉的語(yǔ)言和符號(hào);
保持內(nèi)容和設(shè)計(jì)風(fēng)格一致;
利用反差;
盡量采用整潔的設(shè)計(jì)風(fēng)格;
記住:互聯(lián)網(wǎng)是一個(gè)動(dòng)態(tài)媒介,同一信息可有多種表現(xiàn)方式;
強(qiáng)烈的感官感受可以吸引訪問(wèn)者。
其它提示
每周組織兩小時(shí)的小組會(huì)議,討論項(xiàng)目進(jìn)展情 況、最近任務(wù)、設(shè)計(jì)和技術(shù)問(wèn)題等等。小組成員 互相討論問(wèn)題交流點(diǎn)子;
如果有多種設(shè)計(jì)方案,采用原型評(píng)估選擇最佳 方案,并聽取各小組成員的意見和建議;
在為項(xiàng)目編寫程序時(shí),采用并發(fā)版本控制系統(tǒng) (Concurrent Versioning System, CVS)解決不 同版本間兼容問(wèn)題,簡(jiǎn)化備份工作和模塊輸出。
本文發(fā)布于北京網(wǎng)站建設(shè)公司尚品中國(guó)http://xmjiujiu.cn/
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁(yè)面設(shè)計(jì)風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計(jì)開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無(wú)錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽(yáng)網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機(jī)端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計(jì)
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
網(wǎng)站百度快照長(zhǎng)期不更新怎么辦?
相信大家都知道百度快照是什么,每天上班后抱怨快照是我們必須做的工作。我...
2020-09-17 -
如何選擇中小型網(wǎng)站投廣告
北京網(wǎng)站建設(shè)公司尚品中國(guó):如果你是做工業(yè)類產(chǎn)品,為了擴(kuò)大在網(wǎng)上的宣傳推...
2012-02-13 -
網(wǎng)站建設(shè)中怎么凸顯品牌?
在如今競(jìng)爭(zhēng)激烈的市場(chǎng)環(huán)境中,品牌已經(jīng)成為了企業(yè)的核心資產(chǎn)之一。而網(wǎng)站作...
2023-04-11 -
高端網(wǎng)站設(shè)計(jì)中如何使用水彩模式呢?
水彩風(fēng)格為你的高端網(wǎng)頁(yè)設(shè)計(jì)增添藝術(shù)氣息。水彩畫技術(shù)是一種流行的設(shè)計(jì)選擇...
2022-05-31 -
解讀YouTube CEO談第三次媒體浪潮
導(dǎo)讀:Salar Kamangar在訪談中談到了斥資一億打造優(yōu)質(zhì)內(nèi)容頻...
2012-02-03 -
移動(dòng)端網(wǎng)站制作中需要注意哪些方面?
手機(jī)網(wǎng)站制造時(shí)近幾年才開端興起的一種用手機(jī)閱讀的網(wǎng)站制造,企業(yè)進(jìn)行手機(jī)...
2020-12-03
預(yù)約專業(yè)咨詢顧問(wèn)溝通!
免責(zé)聲明
非常感謝您訪問(wèn)我們的網(wǎng)站。在您使用本網(wǎng)站之前,請(qǐng)您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來(lái)源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動(dòng)。
2、本站不承擔(dān)用戶因使用這些資源對(duì)自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問(wèn)題參見國(guó)家有關(guān)法律法規(guī),當(dāng)本聲明與國(guó)家法律法規(guī)沖突時(shí),以國(guó)家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請(qǐng)您及時(shí)與我們,我們會(huì)在第一時(shí)間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com