- 破譯Web UI:網頁UI設計規范、流程與實戰案例
- Chuckie Chang
- 2491字
- 2019-10-23 16:30:39
引言
首先感謝每一位讀者,感謝出版社編輯給我的指導。編寫本書是一次探險,更是一次挑戰,我很享受這個過程。本書不會禁錮你的思想,不會教你墨守成規地設計網頁界面,但會教你有理有據、有約束地設計美觀實用和有商業價值的網頁界面,會帶給你突破自我的可能,會帶給你更明確的職業或非職業發展方向。圖書是一種工具,我們都要學會善用它,不要被書本的知識所束縛。本書站在朋友的角度,帶你進入美妙的閱讀之旅,書中的每一字、每一句都注入了我的心血。用心讀完它,你可能會因此愛上網頁設計。我真誠希望,你能夠主動思考我為什么會寫這本書?我為何這樣去規劃圖書的內容?當你能夠了解我編寫本書的初衷時,你就已經掌握了這本書的精髓了。
本書以“學以致用”為核心目標,獻給初學網頁界面設計、對網頁界面設計感興趣乃至有一定工作經驗的網頁設計師。在正式閱讀之前,得強調一下“界面設計”和“網站/網頁設計”的區別。網頁設計涉及信息架構、網站結構、可用性、用戶界面、用戶體驗、人體工程學、布局、顏色、對比度、字體和圖像,以及圖標設計、品牌標識設計、Banner設計等元素,是一個錯綜復雜的綜合領域,所有這些元素組合在一起形成網站;而通常情況下,“設計”或“界面設計”的含義僅僅指視覺方面。在現實中,網頁設計包含更多的抽象元素。
本書所有內容都經過作者長期準備,付出了非常多的心血,所有文字都值得讀者仔細閱讀和品味。我主要運用了獨立的思維方式和技巧方法,針對近幾年和未來網頁設計中的界面設計(User Interface)進行細分講解,并總結了新的全球熱門的設計規范和設計趨勢,所有的理論都貫穿實踐與運用。本書沒有篇幅過大的理論知識體系,沒有獨立的案例體系,目的是讓大家邊學習邊應用,能有效掌握一些重要的技巧和知識理論,為大家進一步深入學習和實踐,并且深入互聯網的其他相關領域做一個突破口,同時也能讓大家擁有判斷自己是否應該繼續從事本行業的能力。最終,本書會教會大家如何去思考和解決問題,培養對網頁設計的熱情。
值得提醒的是,本書不涉及電商推廣營銷頁、店鋪頁面、游戲頁面、活動專題頁、門戶網站相關的界面設計。但這是一本通用類圖書,也適合以上類型的界面設計學習者閱讀,能夠大大提高學習者在網頁設計其他細分領域的設計能力。
本書將引導學習者使用現代化的方式去工作。設計規范是主線,每一個設計規范都是相當重要的,它們能構建一個符合商業習慣和質量的設計,幫助學習者養成一種良好的設計習慣和思維方式。書中的所有案例均來自作者精選的商業項目和針對性項目,希望這些案例可以給讀者帶來良好的欣賞體驗,提高興趣和帶來啟示。
書中的案例都詳細闡述了筆者的各種思維和技巧,以及使用的工具和參數等,但并不對每一種工具都做詳細的教學,這需要讀者具備一定的軟件基本功。本書第1章將引導讀者完成一切準備工作,找到學習目標和方向,掌握必備的基本功。本書并不只是教你怎么做項目,還要講述設計師對生活情趣的捕捉和態度。
本書中每一句話都是我發自內心的總結,無論你是網頁界面設計初學者,還是資深玩家,都值得你去仔細閱讀。第1章文字量偏多,主要是給讀者提供一個學習方向、思維引導和學前預熱。當你讀完第1章,你會掌握不少網頁設計的“黑科技”,會提高繼續學習后面內容的興趣和能力,有利于你在學習實踐過程中總結和思考問題。
· 以不變應萬變。每個知識點都能夠運用到各類項目中。
· 注重設計規范,注重個人習慣。養成良好的習慣是你未來良好職業方向所必需的基本功。
· 流程模塊化。你可以將所學的知識有所取舍地運用到你的實際項目流程中。
· 高質量的界面設計。在你有一定的軟件基本功的前提下,本書會讓你學會如何思考,如何取舍細節,如何提高你的設計質量。
· 學會研究趨勢,學會歸納總結,制訂適合自己的學習和工作計劃。
· 注重項目的商業價值。以利益為驅動的學習是具有很高的成效的。
如何使用本書?
目錄:首先要了解本書的知識體系。根據目錄的引導,你可以給自己的網頁設計水平和知識結構做一個定位,以便更好地規劃自己的學習時間和精力。
資源下載及其使用說明:隨書附贈學習資源,包含書中提到的、可以共享學習的PSD源文件及效果文件(因版權限制,部分公司商業案例的源文件不方便提供),這些源文件是非常有價值的,可以用來做對比、參考和分析。讀者掃描右側或封底的二維碼即可獲得文件下載方式。如果大家在閱讀或使用過程中遇到任何與本書相關的技術問題或需要什么幫助,請發郵件至szys@ptpress.com.cn,我們會盡力為大家解答。
筆記:我是一個記性很不好的人,做什么都要記筆記,特別是在學習的過程中。你不妨嘗試,在閱讀的過程中,根據自己的需要記錄筆記。例如,軟件中容易遺忘的工具的使用技巧、容易遺忘的創意方式和思考方式、容易混淆的知識點、容易忽略的設計流程等。我使用了那么多“容易”,其實是讓你理解,記筆記需要有針對性,不要盲目花時間。
工作、學習環境:每個人都有適合自己的高效率學習環境,我就特別喜歡聽著二次元鋼琴曲或游戲BGM工作和學習,鋼琴曲能阻隔外界的噪聲,可以讓我思維清晰。大家要找到適合自己的高效學習環境,可以喝著咖啡、聽著合適的音樂、抱著可愛的寵物等。電腦是一個會讓人分心的設備,所以你可能會需要一些東西來協作。
英文詞典:設計過程中難免會遇到一些生僻的英文單詞,并且本書中的案例所使用的大部分插件是英文原版,如果你在學習過程中有不明白的地方,還需要你主動利用詞典或APP,熟悉那些不懂的單詞,這樣會有助于你對軟件或設計的理解。
標注:書中圖片看不清的地方會有文字標注,可以在隨書附贈的下載資源中查看高清大圖,幫助大家更好地學習本書的案例。
特別注意
作為設計師或開發人員,軟件和電腦是必不可少的。應將你的Photoshop等軟件盡量更新到較新的版本(CC2015或2017版本),并掌握基本的軟件操作能力,稍微熟練軟件使用技巧,只要書中有實踐、有截圖的地方,你就要根據情況,打開軟件,邊看邊練習。只看不練,你會很容易忘記軟件使用方法的。如果你還沒有軟件基本功,可以先將這本書收藏,去學習一些軟件的使用方法,特別是Photoshop基本功要扎實,否則你會跟不上進度。當然,在本書第1章,我也會將常用的軟件要求都做一下介紹,讓你在自學軟件時更有針對性,更有效率。
- 網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- After Effects CS6從入門到精通
- Dreamweaver CS6網頁設計與制作教程
- 眾妙之門:網站UI設計之道2
- 網頁設計與制作:HTML+CSS+JavaScript標準教程
- Adobe Dreamweaver CS5中文版經典教程
- HTML5+CSS3網頁制作基礎培訓教程
- 網頁制作實用教程(第3版)
- 網頁美工
- Photoshop熱門手機APP與網頁游戲界面設計從入門到精通
- Vue.js核心技術解析與uni-app跨平臺實戰開發
- 網站視覺設計
- Dreamweaver CS5網頁制作
- 精通HTML5+CSS3+JavaScript網頁設計(視頻教學版)(第2版)
- 精通HTML 5+CSS 3:100%網頁設計與布局密碼