我們追求
極緻的(de)用(yòng)戶體(tǐ)驗

WE PURSUE PERFECT USER EXPERIENCE

結構化(huà)設計(jì)的(de)原理(lǐ)

設計(jì)版而就(jiù)像傳統的(de)報(bào)刊雜(zá)志(zhì)編輯樣,  将網頁看(k&àn)做(zuò)一(yī)張報(bào)紙(zhǐ)、本雜(zá)志(zhì) 來(lái)進行(xíng)捧版布局。雖然動态網頁技(jì)術(shù)的(de)發展使得(<de)我們開(kāi)始 始趨向于學習(xí)場(chǎng)景編劇(jù),但(dàn)是(shì)固定的(de)網頁版面設計(jì)基礎依然是(shì)₹必須學習(xí)和(hé)掌握的(de)。  它們的(de)基本原理(lǐ)是(shì)互通(tōng)的(de),讀(dú)者可(kě)以領會(huì)其要(yào)點,舉一(yī)反三✔。

版而指的(de)是(shì)浏覽器(qì)看(kàn)到(dào)的(de)完整的(de)一(yī)個(gè)頁面™  (可(kě)以包含框架和(hé)層次)。因為(wèi)每個(gè)人(rén)的(de)顯示器(qì)分(fēn)辨率不(bù$)同,所以同一(yī) 個(gè)頁面的(de)大(dà)小(xiǎo)可(kě)能(néng)出現(xiàn)640X48 0像素、80X600像01024X 768像素等不(bù)同尺寸。

版面布局的(de)步驟

(1)草(cǎo)案。這(zhè)屬于創造階段,不(bù)講究細膩工(gōng)整,也(yě)不(bù)必考慮細節功能(néng),隻以粗陋的(de)線條勾畫(huà)出創意的€(de)輪廓即可(kě)。盡可(kě)能(néng)多(duō)畫(huà)幾張,最後選定一(yī)幅滿意的(de)作(zuò)為(wèi)繼續創作(zuò)的(d∏e)腳本,

(2)粗略布局。在草(cǎo)案的(de)基礎上(shàng),将需要(yào)放(fàng)置的(de)功能(néng)模塊安排到(dào)頁面上(sh≤àng)。功能(néng)模塊主要(yào)包含網站(zhàn)标志(zhì)、主菜單、新聞、搜索、友(yǒu)情鏈接、廣告條、郵件(jiàn)列表、計(jì)數(→shù)器(qì)和(hé)版權信息等。注意,這(zhè)裡(lǐ)我們必須遵循突出重點、平衡諧調的(de)原則,将網站(zhàn)标志(zhì)、主'菜單等最重要(yào)的(de)模塊放(fàng)在最顯眼、最突出的(de)位置,然後再考慮次要(yào)模塊的(d♦e)排放(fàng)。

(3)定案。将粗略布局精細化(huà)、具體(tǐ)化(huà),最後達到(dào)滿意定案。

對(duì)于版面布局的(de)設計(jì),應當重視(shì)如(rú)下(xià)原則:加強視(shì)覺效果:加強文(wén)案的(de)可(kě)視(shì)度和(hé)可(αkě)讀(dú)性:統一(yī)感的(de)視(shì)覺;新鮮和(hé)個(gè)性是(shì)布局的(de)最高(gāo)境界。網α頁設計(jì)作(zuò)為(wèi)種視(shì)覺語言,當然要(yào)講究編排和(hé)布局,雖然網頁設計(jì)不(bù)等同​于平面設計(jì),但(dàn)它們有(yǒu)許多(duō)相(xiàng)近(jìn)之處,應充分(fēn)加以利用(yòng)和(hé)借鑒。

版式設計(jì)通(tōng)過文(wén)字及圖形的(de)空(kōng)間(jiān)組合,表達出和(¥hé)諧與美(měi)。一(yī)個(gè)優秀的(de)網頁設計(jì)者目 該知(zhī)道('dào)哪一(yī)-段文(wén)字及某個(gè)圖形該落于何處,  才能(néng)使整個(gè)網頁生(shēng)輝。網頁設計(jì)者應努力做(zuò)到 (dào)  整體(tǐ)布局合理(lǐ)化(huà)、有(yǒu)序化(huà)、整體(tǐ)化(huà)。優秀之作(zuò)善于以巧妙、合理(lǐ)的(de)視(shì)覺方式使₩一(yī)些(xiē)語言無 法表達的(de)思想得(de)以闡述,做(zuò)到(dào)豐富多(duō)樣,而又(yòu)簡潔明(míng)了(le)。 • 多(duō)頁面站(zhàn)點的(de)編排設計(jì)要(yào)求從(cóng)頁面之間(jiān)的(de)有(yǒu)機(←jī)聯系反映出來(lái),這(zhè)裡(lǐ)主要(yào)的(de)問(wèn)題是(shì)則


結構化(huà)設計(jì)的(de)原理(lǐ)

面之間(jiān)和(hé)頁面內(nèi)的(de)秩序與內(nèi)容的(de)關系。  為(wèi)了(le)✘達到(dào)最佳的(de)視(shì)覺表現(xiàn)效果,應講究整體(tǐ)布局的(de)  合理(lǐ)性。特别是(shì)關系十分(fēn)緊。便于浏覽者可(kě)以來(l≈ái)回仔細研讀(dú)。  的(de)有(yǒu)上(shàng)下(xià)文(wén)關系的(de)頁面,一(yī)定要(yào) 設計(jì)有(yǒu)向前和(hé)間(jiān)後的(de)按鈕,

常用(yòng)版面布局的(de)形式

(1)“T”結構布局。所謂“T”結構就(jiù)是(shì)指頁面項部為(wèi)橫條網站(zhàn)标志(zhì)十廣告條, 下(xià)方 在面為(wèi)主菜單,在面品示☆內(nèi)容的(de)布局,因為(wèi)菜單條背跟較課,整體(tǐ)效果類似英文(wén)字母-  所以稱為(wèi)“T”形布局。這(zhè)是(shì)↕網頁設計(jì)中使用(yòng)最廣泛的(de)種布局方式, 這(zhè)種布局的(de)優點是(shì)頁面結向清晰、主次分(fēn)明(míng),且是(shì)勿學者最容易掌握的('de)布局方法,  缺點是(shì)規矩呆闆,如(rú)果色彩細節上(shàng)再不(bù)注意,很(hěn)容易讓人(rén)看(kàn)後乏味←, 

(2)"工(gōng)”形布局,這(zhè)是(shì)一(yī)個(gè)象形的(de)說(shuō)法,就(jiù)是(shì)頁面般上(shàng) 下(xià)各有(yǒu)個(gè)廣告條,左面  是(shì)主菜單,右面放(fàng)友(yǒu)情鏈接等,中間(jiān)是(shì)★主要(yào)內(nèi)容。這(zhè)種布局的(de)優點是(shì)充分(fēn)利用(yòng)版面,信息量大(dà)‌。缺點是(shì)頁面擁擠,不(bù)夠靈活。也(yě)有(yǒu)将四邊空(kōng)出,隻用(yòng)中間(jiān)的(de)窗(chuān∑g)口型設計(jì),例如(rú)網易的(de)壁紙(zhǐ)站(zhàn)。

(3)“三”形布局。這(zhè)種布局多(duō)用(yòng)于國(guó)外(wài)站(zhàn)點,國(guó)內(nèαi)使用(yòng)的(de)不(bù)多(duō):[特點是(shì)頁面上(shàng)橫向有(yǒu)兩條色塊将頁面β整體(tǐ)分(fēn)割為(wèi)三部分(fēn),色塊中大(dà)多(duō)放(fàng)廣告條。

(4)對(duì)稱對(duì)比布局。顧名思義,采取左右或者上(shàng)下(xià)對(duì)稱的(de)布局,一(yī)半深色:另一(yī)半淺色,一(yī)般用(yòng₹)于設計(jì)型站(zhàn)點。優點是(shì)視(shì)覺沖擊力強,缺點是(shì)将兩部分(fεēn)有(yǒu)機(jī)地(dì)結合比較困難。

(5)POP布局。POP引自(zì)廣告術(shù)語,就(jiù)是(shì)指頁面布局像張宣傳海(hǎi)報(bào),以一(yī)張精美(měi)圖片作(zuò)為(wèΩi)頁面的(de)設計(jì)中心。此類布局常用(yòng)于時(shí)尚類站(zhàn)點,比如(rú)ELLE.co™m。優點是(shì)顯而易見(jiàn),漂亮(liàng)吸引人(rén)。缺點是(shì)速度慢(màn)。

以上(shàng)總結了(le)目前網絡上(shàng)常見(jiàn)的(de)幾種布局,此外(wài)還(hái)有(yǒu)許許多(duō)多(duō)别具格的(de)布局, 關鍵在于網站(zhàn)本身(shēn)的(de)創意和(hé)設計(jì)。

頁面美(měi)術(shù)設計(jì)

專業(yè)美(měi)術(shù)設計(jì)人(rén)員(yuán)的(de)幫助對(duì)企業(yè)站(zhàn)點的(de)ε成功設計(jì)是(shì)至關重要(yào)的(de)。即便是(shì)一(yī)個(gè)沒有(yǒu)一(¥yī)點網頁設計(jì)經驗的(de)專業(yè)美(měi)術(shù)設計(jì)人(rén)員(yuán),也(yě)能(néng)提供很(hěn)多(duō)關于排版、色✘彩等方面的(de)建議(yì)。實際上(shàng),很(hěn)多(duō)傳統出版行(xíng)業(yè)的(de)規則和(hé)禁忌,也(yě)大(dà)都§(dōu)适用(yòng)于網頁的(de)設計(jì)。

網頁設計(jì)與其他(tā)出版設計(jì)  最大(dà)的(de)不(bù)同表現(xiàn)在以下(x&ià)三個(gè)方面:

(1)傳播的(de)媒介不(bù)同。許多(duō)用(yòng)戶是(shì)用(yòng)Modem上(shàng)網的(de),考慮到(d☆ào)用(yòng)戶的(de)容量程度, 圖形  一(yī)般不(bù)宜太大(dà):通(tōng)常每個(gè)圖應小(xiǎo)于30KB.每個(gè♠)頁面圖形總量應小(xiǎo)于50KB. 

(2)最終的(de)發布媒體(tǐ)不(bù)同。多(duō)數(shù)用(yòng)戶是(shì)通(tōng)過Windows或MAC機(jī)L上(shàng)網的(de) §而且當前通(tōng)用(yòng)的(de)分(fēn)辨率是(shì)低(dī)于800X 60✔0 因此,美(měi)術(shù)設計(jì)人(rén)員(yuán)的(de)發揮天地(dì)是(shì)13~15♠英寸顯示器(qì)所能(néng)展示的(de)區(qū)域。

(3)所能(néng)采用(yòng)的(de)文(wén)件(jiàn)格式的(de)限制(zhì)。  對(duì)通(tōng)用(yòng)浏覽器σ(qì)來(lái)說(shuō),能(néng)識别的(de)圖像格式僅為(wèi)JPEG和(hé$)GIF.這(zhè)兩者又(yòu)各有(yǒu)不(bù)同的(de)特點和(hé)适用(yòng)環↑境。 正。這(zhè)兩者義負複有(yǒu)良好(hǎo)的(de)合作(zuò),網站(zhàn')制(zhì)作(zuò)首先應該能(néng)向他(tā)們提供前面所說(shuō)的(de)內(nèi)容和(hé)邏輯結

最了(le)解用(yòng)戶需求的(de)網站(zhàn)技(jì)術(shù)服務供應商

我們是(shì)敢于挑戰的(de)勇士, 我們心懷夢想砥砺前行(xíng), 我們奮力奔跑在超越自(zì)我的(de)征程上(shàng), 我們一(yī)切的(de)努力,隻σ為(wèi)了(le)讓您的(de)企業(yè),成為(wèi)行(xíng)業(yè)的(de)領導者!

13363997143
  • 公司網站(zhàn):www.xuhuinet.com
  • 公司地(dì)址:西(xī)安市(shì)雁塔科(kē)技(jì)二路(lù)西(xī)安軟件(jiàn)園秦風(fēng)閣602室

客服電(diàn)話(huà)

13363997143

在線客服

二維碼