網(wǎng)頁設(shè)計(jì)解析

前言

創(chuàng)作原由如果你正在翻閱這個部分的話，有兩個信息你應(yīng)該注意。一個樂觀的信息是：你正開始了一次不同以往的思想體驗(yàn)，你會在本書中發(fā)現(xiàn)許多曾經(jīng)忽略了的但卻非常重要的信息，當(dāng)然，它們和你感興趣的web設(shè)計(jì)有直接的關(guān)系；另一個信息是：我不會在這里就開始長篇大論，并提出本書的核心內(nèi)容，因?yàn)槟菢訒屇銓竺娴牟糠质ヅd趣，更有可能你會直接撕掉這頁，而把其余的部分留在書店，或者某個有這本書的地方。你不該認(rèn)為這是一本普通的技法說明書，或者一些擁有漂亮設(shè)計(jì)作品截圖的高級畫冊。我曾試圖把它變成一本結(jié)合理論和技術(shù)的手冊，一本W(wǎng)eb設(shè)計(jì)中積累的“伊索寓言”，最后我發(fā)現(xiàn)這樣的工作實(shí)在不太明智，而且成本過高。我們可以從很多類似的事例中發(fā)現(xiàn)，教育實(shí)際上是一種并不愉快的手段，有一種居高臨下的緊張氣氛。在這里，我不想說書中的一些先鋒性的詞語和一些看上去精妙的技術(shù)手段，是對讀者（你就是其中的—分子）的教育，是—些教程的總結(jié)。我們換一種思路，其實(shí)把這些透過文字表面的信息理解為交流，會讓我們覺得互相平等。如果當(dāng)中確實(shí)有能夠引起你交流欲望的部分，我很高興這本韋的任務(wù)得以完成。在大多數(shù)時(shí)候，我們總希望一些具體的意見，讓我們覺得有方向可循。作為設(shè)計(jì)師來說，其實(shí)這并不意味著你的專業(yè)。不少朋友驚異于我本人的學(xué)歷背景，我受到的教育是關(guān)于大眾傳媒方面的，并非設(shè)計(jì)專業(yè)，而最后當(dāng)我成為一個設(shè)計(jì)師的時(shí)候，似乎是對自己的—個不認(rèn)同？其實(shí)我們考慮得太復(fù)雜了！

內(nèi)容概要

本書不是一本普通的技法說明書，也不是一些擁有一些漂亮設(shè)計(jì)作品截圖的高級畫冊。本書的寫作出發(fā)點(diǎn)是希望改變一些傳統(tǒng)的Web設(shè)計(jì)思維和一些過時(shí)的手段。    書中對Web設(shè)計(jì)這個職業(yè)進(jìn)行了整體的闡述，從行業(yè)思維到設(shè)計(jì)細(xì)節(jié)，內(nèi)容包含：認(rèn)識Web設(shè)計(jì)、工具使用新談 (Photoshop、Dreamweaver等)、探討Web標(biāo)準(zhǔn)、頁面設(shè)計(jì)與GUI、Web設(shè)計(jì)中的排版、首頁設(shè)計(jì)、完整案例解析。    書中出現(xiàn)的不僅是筆者本人對Web設(shè)計(jì)的理解，還有很多在設(shè)計(jì)界具有影響力的人物的觀點(diǎn)論文，一些十分有用而你沒有足夠重視的技巧，這些總結(jié)和資料會給你的Web設(shè)計(jì)工作帶來很多幫助。    本書適合于打算進(jìn)入網(wǎng)頁設(shè)計(jì)行業(yè)工作，并對網(wǎng)頁設(shè)計(jì)有著極大熱情的讀者朋友，無論你是初學(xué)者還是已經(jīng)開始你的職業(yè)生涯，這本書都會成為你的絕佳的參考手冊和流程解決方案。同時(shí)，由于本書中提到了大量業(yè)界的標(biāo)準(zhǔn)常識和基礎(chǔ)理論，所以也推薦給任何需要與網(wǎng)頁設(shè)計(jì)師溝通的各個環(huán)節(jié)的工作人員閱讀。    本書作者是國際上享有盛譽(yù)的頂級設(shè)計(jì)師，相信本書會對你的職業(yè)生涯產(chǎn)生重大影響。    本書隨書DVD光盤中包含：Web設(shè)計(jì)大師眼花繚亂的案例操作視頻解說，本書部分實(shí)例素材和最終文件，作者精心整理的Web設(shè)計(jì)資源。

作者簡介

周陟，視覺設(shè)計(jì)師，跨媒體創(chuàng)作。
　　經(jīng)歷：中國數(shù)字藝術(shù)獎全國巡展受邀 數(shù)字圖形設(shè)計(jì) 參展上?！俺鼋帧眹H藝術(shù)設(shè)計(jì)展；受邀平面招貼 參展新西蘭GOUW設(shè)計(jì)師平臺推薦WEB設(shè)計(jì)師；E-motional design, k10k, 美國Visualizer藝術(shù)平臺作品收錄推薦；編寫出版《設(shè)想》新媒體圖形作

書籍目錄

第1章　認(rèn)識Web設(shè)計(jì)　　 　1.1  Web設(shè)計(jì)概述　　 　　1.1.1  內(nèi)容　　1.1.2  技術(shù)　　 　　1.1.3 外觀　　 　1.2 優(yōu)秀的Web設(shè)計(jì)是什么？　　 　　1.2.1 外觀和功能同樣重要　　 　　1.2.2 別做自以為“酷”的事情　　 　　1.2.3 規(guī)則——只有合適沒有正確　　 　1.3 Web設(shè)計(jì)師的多元性　　 　　1.3.1 平面設(shè)計(jì)　　 　　1.3.2 插畫　　 　　1.3.3 VI 識別系統(tǒng)　　 　　1.3.4 傳統(tǒng)藝術(shù)　　 　　1.3.5 工業(yè)設(shè)計(jì)　　 　　1.3.6 產(chǎn)品設(shè)計(jì)　　 第2章　工具使用新談　　 　2.1 選擇合適的設(shè)計(jì)軟件　　 　2.2 深入理解Web設(shè)計(jì)軟件　　 　　2.2.1 設(shè)計(jì)軟件標(biāo)準(zhǔn)化　　2.2.2 請重視你的Help文檔　　 　2.3 建立最適合自己的設(shè)計(jì)軟件組合　　 　　2.3.1 平面位圖圖形　　 　　2.3.2 平面矢量圖形　　 　　2.3.3 矢量動畫　　 　　2.3.4 基本HTML文本　　 　　2.3.5 在線視頻　　 　　2.3.6 角色/場景動畫　　 　2.4 Photoshop　　 　　2.4.1 圖層　　 　　2.4.2 創(chuàng)建Web Photo Gallery　　 　　2.4.3 分割圖形　　 　2.5 Fireworks　　 　　2.5.1 制作GIF動畫　　 　　2.5.2 創(chuàng)建Rollover樣式按鈕　　 　　2.5.3 為圖形添加瀏覽器屬性　　 　2.6 Dreamweaver　　 　　2.6.1 建立自己的網(wǎng)站結(jié)構(gòu)并設(shè)置　　 　　2.6.2 使用插件擴(kuò)展Dreamweaver功能　　 　　2.6.3 控制并檢驗(yàn)CSS樣式　　 　2.7 輔助工具　　 　　2.7.1 ACDSee　　 　　2.7.2 配色大師ColorSPY　　 　　2.7.3 截屏大師SnagIt　　 第3章　探討Web標(biāo)準(zhǔn)　　 　3.1 什么是Web標(biāo)準(zhǔn)？　　 　　3.1.1 為什么要使用Web標(biāo)準(zhǔn)？　　 　　3.1.2 如何校驗(yàn)?zāi)愕腤eb？　　 　　3.1.3 了解（　X）HTML　　 　　3.1.4 Web標(biāo)準(zhǔn)的商業(yè)價(jià)值　　 　3.2 重新認(rèn)識CSS　　 　　3.2.1 如何應(yīng)用CSS　　 　　3.2.2 CSS的語法　　 　3.3 CSS實(shí)例　　 　　3.3.1 精致的CSS水平列表　　 　　3.3.2 華麗的CSS垂直嵌套列表　　 　　3.3.3 不同瀏覽器對CSS特別代碼的支持情況　　 　　3.3.4 高級列表　　 　3.4 設(shè)計(jì)師必須了解的CSS技巧　　 　3.5 基于標(biāo)準(zhǔn)的Web設(shè)計(jì)參考　　 第4章　Web設(shè)計(jì)與GUI　　 　4.1 GUI和Web設(shè)計(jì)的關(guān)系　　 　4.2 Web用戶界面設(shè)計(jì)原則　　 　4.3 設(shè)計(jì)GUI中的圖標(biāo)（　ICON）　　 　　4.3.1 正確理解圖標(biāo)的價(jià)值　　 　　4.3.2 圖標(biāo)設(shè)計(jì)實(shí)踐1 ——2D矢量圖標(biāo)設(shè)計(jì)　　 　　4.3.3 圖標(biāo)設(shè)計(jì)實(shí)踐2  ——3D圖標(biāo)設(shè)計(jì)　　 　　4.3.4【重要】違反GUI原則的Web宣傳手段　　 第5章　Web設(shè)計(jì)中的排版　　 　5.1 Web版式設(shè)計(jì)概述　　 　5.2 常用版面布局參考　　 　　5.2.1 傳統(tǒng)“T”型結(jié)構(gòu)　　 　　5.2.2 左右平均分布型結(jié)構(gòu)　　 　　5.2.3 上下對照結(jié)構(gòu)　　 　　5.2.4  “上中下”——“三” 字結(jié)構(gòu)　　 　　5.2.5 簡約型布局　　 　　5.2.6 “回”字型結(jié)構(gòu)　　 　　5.2.7 氛圍式結(jié)構(gòu)　　 　　5.2.8 “雜物箱”版式　　 　　5.2.9 “個人風(fēng)格化”結(jié)構(gòu)　　 　　5.2.10 單頁排列式結(jié)構(gòu)　　 　　5.2.11 文字型結(jié)構(gòu)　　 　　5.2.12 封面型（　cover）結(jié)構(gòu)　　 　　5.2.13 綜合型結(jié)構(gòu)　　 　5.3 頁面排版的細(xì)節(jié)元素　　 　　5.3.1 重視細(xì)節(jié)的刻畫　　 　　5.3.2 設(shè)計(jì)AD Banner  （　廣告條）　　 　5.4 實(shí)戰(zhàn)版式設(shè)計(jì)　　 第6章　首頁設(shè)計(jì)　　 　6.1  第一眼的印象　　 　　6.1.1 突出主體　　 　　6.1.2 簡單第一　　 　　6.1.3 控制版面　　 　　6.1.4 絢麗配色　　 　　6.1.5 信息處理　　 　　6.1.6 重視表現(xiàn)　　 　　6.1.7 流行風(fēng)格　　 　6.2 首頁設(shè)計(jì)的兩種思路 ——個性與商業(yè)的平衡　　 　　6.2.1  方案A——傳統(tǒng)企業(yè)型站點(diǎn)設(shè)計(jì)　　 　　6.2.2  方案B——時(shí)尚企業(yè)型站點(diǎn)設(shè)計(jì)　　 　6.3 方案A設(shè)計(jì)過程——安全而傳統(tǒng)　　 　　6.3.1 標(biāo)題設(shè)計(jì)與導(dǎo)航　　 　　6.3.2 板塊區(qū)域設(shè)計(jì)　　 　　6.3.3 內(nèi)容排版設(shè)計(jì)　　 　6.4 方案B設(shè)計(jì)過程——獨(dú)特且藝術(shù)　　 　　6.4.1 背景設(shè)計(jì)　　 　　6.4.2 設(shè)計(jì)頁面邊框及導(dǎo)入Logo　　 　　6.4.3 設(shè)置頂端燈光　　 　　6.4.4 設(shè)計(jì)左導(dǎo)航　　 　　6.4.5 制作主體部分　　 　　6.4.6 主體周邊細(xì)節(jié)制作　　 　　6.4.7 內(nèi)容填充　　 　6.5 設(shè)計(jì)首頁模板　　 　　6.5.1 設(shè)計(jì)頁面左導(dǎo)航　　 　　6.5.2 上導(dǎo)航設(shè)計(jì)　　 　　6.5.3 內(nèi)容板塊設(shè)計(jì)　　 　　6.5.4 整體調(diào)整　　 　　6.5.5 切圖　　 　　6.5.6 將輸出的頁面制作成模板　　 第7章　全案解析　　 　7.1 企業(yè)應(yīng)用型網(wǎng)站規(guī)劃與設(shè)計(jì)　　 　　7.1.1 前期準(zhǔn)備　　 　　7.1.2 建立矢量標(biāo)識　　 　　7.1.3 設(shè)計(jì)網(wǎng)站平面稿　　 　　7.1.4 切片并建立網(wǎng)站的HTML基本表達(dá)式　　 　　7.1.5 用Dreamweaver優(yōu)化網(wǎng)站的HTML表達(dá)式　　7.1.6 Flash實(shí)現(xiàn)在線展示Video　　 　　7.1.7 Fireworks完善導(dǎo)航系統(tǒng)　　 　7.2 個人網(wǎng)站設(shè)計(jì)　　 　　7.2.1 制作頁面分解元素　　 　　7.2.2 平面設(shè)計(jì)在網(wǎng)站上的運(yùn)用　　 　　7.2.3 “積木式”網(wǎng)站排版　　 　　7.2.4 發(fā)布網(wǎng)站到Internet　　 附錄　頂尖Web設(shè)計(jì)師語思錄　　 后記　　

章節(jié)摘錄

插圖：第1章 認(rèn)識Web設(shè)計(jì) 1.1 Web設(shè)計(jì)概述一個完整的Web設(shè)計(jì)工作應(yīng)該至少擁有以下主要的方面。1.1.1 內(nèi)容網(wǎng)站的本質(zhì)在于信息的傳播以及如何傳播，問題集中在怎么樣引導(dǎo)和勸說用戶。由于Web的特殊性，內(nèi)容已經(jīng)脫離我們傳統(tǒng)的定義，它可以包括：文字、圖形、超鏈接、交互操作、動畫、視頻、音頻、在線游戲甚至更多的混合型的組織形式。擁有高質(zhì)量的內(nèi)容是網(wǎng)站成功的關(guān)鍵。誤解我們常常誤解Web設(shè)計(jì)為制造優(yōu)秀的視覺體驗(yàn)，帶給客戶不同以往的美學(xué)感受。當(dāng)然，這樣做，可以吸引第一次訪問的客戶更加注意你的站點(diǎn)，但是一旦客戶在某個地方停留下來后，他／她的所有活動將轉(zhuǎn)變成尋找對他／她有用?；蛘咚?她感興趣的信息。如果一個站點(diǎn)空有一個漂亮的架子，而缺乏實(shí)際內(nèi)容，用戶最終會離開。而設(shè)計(jì)在這里的作用是什么？如果一段優(yōu)秀的內(nèi)容，用戶無法很快找到它（或者并不明顯），內(nèi)容也失去了它的意義。

后記

在你看完這本書后，我可以肯定的是，你閱讀的過程并不比我書寫的過程更輕松，但我希望你這次視覺和思維的旅程是愉快的，并且不會在短時(shí)間內(nèi)被遺忘。實(shí)際上茌前言完成之后，我并不考慮再來一個后記。因?yàn)槿魏我晃豢赐瓯緯淖x者：無論你是第一次接觸“Web設(shè)計(jì)”這個字眼的新丁，還是在此行業(yè)摸爬滾打了多年的好手，你都會有自己對于本書的認(rèn)識。而正巧，你建立起來的認(rèn)識，并不會因?yàn)槟撤N勸說而修改，如果我企圖利用”后記“來做一個隱性的狡辯的話，你可能還會對我懷恨在心。因?yàn)?，我無法掩飾我在本書中的任何錯誤與瑕疵，如果你能夠與我共享你的指正意見，我將非常感謝。

媒體關(guān)注與評論

在我印象里，他是一位非常具有才華的設(shè)計(jì)師，多年來一直戰(zhàn)斗在設(shè)計(jì)行業(yè)里，做管理以后仍舊不斷推出前沿設(shè)計(jì)作品，非常難得！作為一名資深的優(yōu)秀設(shè)計(jì)師，他的書凝聚了深厚功力，一定不會錯！　　——視覺同盟站長　Fape 這本書對網(wǎng)頁設(shè)計(jì)、互動界面設(shè)計(jì)行業(yè)很有影響力，內(nèi)容闡述很透徹，所倡導(dǎo)的網(wǎng)頁設(shè)計(jì)概念也很新穎，周陟是一位非常專業(yè)的專家，認(rèn)識他多年了，我絕對相信這是行業(yè)里非常有價(jià)值的一本書?！　　O(shè)計(jì)聯(lián)盟站長　風(fēng)子Lytous是我們聯(lián)盟第152期專訪推薦設(shè)計(jì)師，相信他的那些唯美且富有吸引力的作品大家都已經(jīng)看過，但你知道這些作品是如何設(shè)計(jì)出來的嗎？讓我們來共同關(guān)注Lytous的《網(wǎng)頁設(shè)計(jì)解析》！　　—— 68design站長　68 認(rèn)識Lytous的日子不算短了，他一直（注意措辭“一直”）是一個頂尖設(shè)計(jì)師，涉足很多領(lǐng)域，結(jié)交了不少國內(nèi)外知名設(shè)計(jì)師。他的理論和實(shí)踐都很棒，也時(shí)常從他的一些文章中學(xué)到不少東西。那些剛走上設(shè)計(jì)道路的同學(xué)，或許還不知道如何面對這個充滿創(chuàng)意而又具有挑戰(zhàn)的職業(yè)，或許還不知道如何做好一個基本的商業(yè)網(wǎng)站設(shè)計(jì)，那么我建議看看Lytous的這本書。不同于填鴨式的教育，也不同于那些所謂紙上談兵的某某秘籍。這是一個從業(yè)多年的職業(yè)設(shè)計(jì)師的經(jīng)驗(yàn)點(diǎn)滴，是那種可以開創(chuàng)你的新的職業(yè)生涯的絕佳參考　　—— 幻色中國站長 呆呆授人以魚不如授人以漁，Lytous的《網(wǎng)頁設(shè)計(jì)解析》沒有停留在教授軟件技巧的層面，而是結(jié)合作者多年的經(jīng)驗(yàn)，將更實(shí)用也更難得的實(shí)踐心得融合其中。在其國際化的設(shè)計(jì)作品中，也包含有濃烈的本地化色彩：中國商業(yè)網(wǎng)站設(shè)計(jì)的特點(diǎn)總結(jié)，和更加適合國內(nèi)環(huán)境的操作方法解析，無論對新手入行還是已從業(yè)人員進(jìn)修都有很大的幫助?！　　?站酷(ZCOOL)站長　明作者Lytous是一位優(yōu)秀的資深網(wǎng)頁設(shè)計(jì)師，此書以作者自己的實(shí)際經(jīng)驗(yàn)出發(fā)，詳細(xì)解說了網(wǎng)頁設(shè)計(jì)的方方面面，特別引入了設(shè)計(jì)師們常常忽略的GUI設(shè)計(jì)和交互設(shè)計(jì)，非常適合新手入門到精通，所選擇的例子文件都是國際化的設(shè)計(jì)作品，給人以全新的入門高度?！　　{(lán)色理想 www.blueidea.com 站長 曾沐陽

編輯推薦

《網(wǎng)頁設(shè)計(jì)解析》特點(diǎn)：國內(nèi)Web設(shè)計(jì)先驅(qū)的領(lǐng)先感情，精密闡述Web設(shè)計(jì)思維，Web設(shè)計(jì)軟件技能火速提高，華麗網(wǎng)頁從商業(yè)需求到上線全案揭秘。Web設(shè)計(jì)大師眼花繚亂的操作視頻，《網(wǎng)頁設(shè)計(jì)解析》實(shí)例素材和最終文件，作者精心整理的Web設(shè)計(jì)資源。專業(yè)Web開發(fā)技術(shù)思路與開發(fā)流程，關(guān)鍵技術(shù)點(diǎn)一步一個腳印，無與倫比的操作性，實(shí)例千挑萬選，拒絕華而不實(shí)。精準(zhǔn)闡述，一語道破天機(jī)，高手開發(fā)過程視頻講解，眼花繚亂的開發(fā)技巧。Web開發(fā)從容就業(yè)與火速提高，社區(qū)/Blog/網(wǎng)站三位一體的售后技術(shù)支持，高手開發(fā)過程視頻，眼花繚亂的開發(fā)技巧。

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

    網(wǎng)頁設(shè)計(jì)解析 PDF格式下載

---