産品特色

編輯推薦

（1）視覺設計師的開悟書！本書旨在肅清視覺設計領域的理念，製定視覺設計領域的規範。

（2）資深設計師在騰訊和攜程網的9年設計經驗總結，從專業能力、設計方嚮、設計技巧、設計理念、設計規範5個維度係統剖析視覺設計師全麵進階方法論。

內容簡介

這是一部能幫助視覺設計師開悟的著作，由攜程網UED視覺高級經理撰寫，是她9年互聯網視覺設計經驗的總結和奉獻。
　　 全書從設計師的專業能力、設計方嚮、設計技巧、設計理念、設計規範5個維度展開，其中前4項可以構成一個完整的視覺設計工作鏈，在這個鏈條上每一環都是後麵一環的支撐，缺一不可。但是在這個鏈條之上必須配以設計規範，纔能讓這個鏈條更加穩固。因此本章主要分為5章：
　　 第1章：首先介紹瞭互聯網産品及其視覺設計的概念，然後介紹瞭互聯網産品視覺設計師的職業規劃、需要知道的5個關鍵點和需要掌握的4種學習方法，這些是形成設計理念的基礎。
　　 第2章：首先明確瞭戰略和用戶對於互聯網産品視覺設計人員來說意味著什麼，接著用瞭較大的篇幅深層剖析瞭對互聯網産品視覺設計人員非常重要的一個概念——層級。隻有掌握瞭層級，纔可能成為閤格的設計師。最後則係統介紹瞭視覺設計方法和流程，這部分內容旨在幫助設計師在掌握瞭層級，有瞭成為一名閤格設計師的潛質之後，知道如何開展設計工作。
　　 第3章：圍繞細節設計展開，主要包括兩大塊內容：設計元素和顔色搭配。元素+顔色=作品，所以掌握瞭這兩部分內容就可以設計齣令人拍案叫絕的作品。這一章從顔色代錶的情感、顔色的模式、顔色選取的2種方法等角度詳細介紹瞭顔色搭配的方法；從圖標的類型、像素、體量感、選擇、動效設計、使用情況等方麵介紹瞭圖標的使用方法。除瞭這兩大塊內容外，本章還在最後分彆介紹瞭文字和錶單處理方法。
　　 第4章：圍繞迴歸設計理念展開，要求設計師能提煉設計理念，論證設計方嚮，提煉設計技巧，這樣不僅能讓作品有感性的視覺傳達、理性的理論支持，還能讓設計師找到不足、積纍經驗。
　　 第5章：在明確瞭設計規範的重要性之後，給齣瞭製定規範的5大原則和具體流程，最後還輔以具體的案例，讓讀者在掌握理論層麵的知識後，還能通過他人的成功經驗知道自己的工作如何落地！
　　

作者簡介

吳佳敏
資深視覺設計和研究專傢，移動電商設計專傢，擁有9年互聯網視覺設計和管理經驗，在互聯網視覺設計的需求分析、用戶體驗、創新設計等各方麵有著極為深刻而係統的理解和認識。擁有多項國傢外觀設計專利。
現任攜程UED視覺高級經理，參與瞭攜程機票事業部各個産品部門的設計工作，並幫助培養視覺設計方麵的人纔；曾就職於騰訊，先後參與世博官網、騰訊微博、騰訊網等相關産品的設計工作。
UI中國前身Iconfans特攻隊的版主之一（ID：Michelle ?E）。

精彩書評

設計的價值不隻體現在設計的錶現層，更重要的體現在是否能反饋産品的核心訴求。UI中國自創建以來，有上百萬的設計師來這裏交流，很多視覺設計師常常比拼著設計技法，卻少有關注設計背後的理念，以及對産品戰略層麵的思考。這本書針對視覺設計師的職業成長、能力體係建立以及如何保持良好的産品戰略思考等方麵進行瞭詳細闡述，很具有實戰的藉鑒意義，是一本值得放在手邊的參考書。
　　—— 董景博　UI中國創始人&CEO;
　　
　　互聯網的設計紛繁多樣，迭代也快，新的知識和設計趨勢不斷變化，所以設計師這個群體需要不斷地學習和更新原有的知識體係。本書通過專業的講述，介紹瞭設計師的職業規劃和設計方法，如何突破瓶頸、摸清脈路、由繁化簡，如何堅守自己的信念，堅持自己的設計……深入閱讀本書可以幫你快速提升和掌握互聯網産品設計的專業技巧，從不同維度瞭解到好的設計是如何産生的，好的團隊是如何閤作的。這是一本頗有誠意的書，希望能夠為你指明方嚮，並且令你熱愛設計這份工作。
　　——　任婕 騰訊網UED設計總監
　　
　　市麵上關於互聯網産品設計的書很多，但關於視覺設計的書還偏少，有“乾貨”的書就更少瞭。本書總結瞭專業設計師的所思所想，是一本讓人期待已久的作品。
　　—— 張酉麟（小火） 著名設計師
　　
　　視覺設計師的核心價值是專業競爭力。沒有一個設計師是可以一天兩天煉成的。除瞭天賦，更需要專研和努力。視覺設計師是公司的産品“解說員”，通過設計讓用戶理解産品。書中有很多能讓設計師共鳴的觀點，因此本書讓我愛不釋手。同時這也是一本設計師的開悟書，希望大傢通過本書早日領悟設計師的進階之道。
　　——　應駿赳（JJ Ying） 著名設計師/Anyway.FM主播
　　

目錄

目錄
前言
緻謝
第1章· 認識互聯網産品視覺設計/1
1.1　什麼是互聯網産品的視覺設計　/2
1.1.1　瞭解互聯網産品　/2
1.1.2　什麼是互聯網産品的視覺設計　/8
1.2　互聯網産品視覺設計師5項關鍵能力　/10
1.3　提升視覺設計師能力的4種學習方法　/23
1.4　視覺設計師的職業規劃　/31
1.4.1　專業綫　/32
1.4.2　P綫　/34
1.4.3　M綫　/37
1.5　視覺設計與其他崗位同事之間的配閤　/39
1.5.1　團隊閤作　/39
1.5.2　工作溝通　/41
第2章· 設計方嚮和設計理念/43
2.1　産品戰略與目標用戶對設計方嚮的影響　/44
2.1.1　為什麼要確定設計方嚮　/45
2.1.2　確定設計方嚮的調研方法　/49
2.2　貫穿全局的思維—層級概念　/61
2.2.1　為什麼要掌握分析層級的能力　/62
2.2.2　建立信息層級的視覺方法　/66
2.3　視覺設計流程與方法　/74
2.3.1　研究分析　/74
2.3.2　設計草案　/81
2.3.3　設計辯證　/90
2.3.4　設計提案　/97
第3章· 細節深入/101
3.1　細節設計的兩個關鍵點　/102
3.1.1　設計元素　/102
3.1.2 　顔色搭配　/107
3.2　顔色　/108
3.2.1　色彩的情感　/110
3.2.2　在UI設計中運用RGB顔色模式　/119
3.2.3　理性和感性的兩種取色方法　/123
3.3　圖標　/129
3.3.1　圖標類型　/129
3.3.2　圖標像素　/135
3.3.3　圖標統一體量感　/136
3.3.4　圖標的隱喻選擇　/137
3.3.5　圖標色彩與視覺反饋　/139
3.3.6　圖標的動效設計　/139
3.3.7　在適當的情況下使用圖標　/143
3.4　文字　/144
3.4.1　字體和字號　/145
3.4.2　色值　/146
3.4.3　襯綫體與非襯綫體　/147
3.4.4　文字行距　/148
3.4.5　邊距和縮進　/148
3.4.6　行為召喚　/149
3.5　錶單　/151
3.5.1　情感化的錶單　/151
3.5.2　清晰的視綫流　/151
3.5.3　閤理的排布　/153
3.5.4　更多地為用戶考慮　/155
3.5.5　有效地引導　/157
第4章· 迴歸設計理念/159
4.1　提煉設計理念　/160
4.1.1　點、綫、麵理念　/162
4.1.2　直綫與浪綫理念　/163
4.1.3　抽屜理念與卡片設計　/165
4.1.4　負層級理念　/166
4.2　設計中的法則　/167
4.2.1　7±2法則　/167
4.2.2　費茨法則　/168
4.3　參考綫的價值　/169
第5章· 設計規範/173
5.1　規範的重要性　/176
5.1.1　統一産品的用戶體驗　/176
5.1.2　方便設計　/178
5.1.3　形成備案和文庫　/179
5.1.4　提高工作效率　/180
5.2　製定規範的5大原則　/181
5.2.1　把握製定規範的時機　/181
5.2.2　需要確定規範的範圍　/183
5.2.3　避免規範一成不變，需要迭代　/184
5.2.4　避免規範過於詳盡　/184
5.2.5　大指引、小規範的製定思路　/185
5.3　製定規範的流程　/187
5.3.1　注意積纍和歸納　/188
5.3.2　製作規範　/189
5.3.3　匯總和微調　/196
5.4　Web規範製定的案例　/197
5.4.1　頁麵顔色規範　/199
5.4.2　文字規範　/200
5.4.3　按鈕規範　/201
5.4.4　單選框和復選框規範　/201
5.4.5　控件規範　/202
5.4.6　命名規範　/204

前言/序言

　　生活中，我常常被問：“你是做什麼的？”我會迴答：“互聯網視覺設計師。”對方很不解，什麼叫互聯網視覺設計師？我通常這麼解釋：在有些公司裏，我們被稱為UI設計師，但有時也會被稱為VI設計師。不管稱呼是怎樣的，我們的工作都是在電腦或手機屏幕上針對界麵皮膚的設計。我們的設計為互聯網産品服務，在針對界麵皮膚設計的時候，會對用戶體驗進行研究分析。
　　在平時的工作中，我發現有些閤作部門的同事竟然也不太瞭解我們的工作內容，以及視覺設計的價值。這堅定瞭我寫這本書的決心。
　　為什麼要寫這本書從包豪斯到Google I/O的Material Design，互聯網的視覺設計既繼承又顛覆著傳統視覺設計理念。每一年都有許許多多的畢業生或者轉行人員開始從事互聯網産品的視覺設計師工作。
　　2015年，我在麵試瞭100多位應聘者後發現，80%～90%的設計師應聘者對自己的職業毫無規劃，並且對職位定義不清。他們認為隻要是視覺設計的工作，都能勝任。其中有些應聘者是僅對設計抱有興趣的，但他們沒有設計背景，也沒有設計方麵的正規培訓和工作經驗；還有一些剛剛畢業的校招生，由於不清楚互聯網公司的職位分配和工作內容，導緻求職受到阻礙。這些人可能在設計領域中會有很不錯的發展，但在他們踏入這個領域時，其實已經錯過瞭求職良機，非常可惜。
　　有些同學在學校裏會學習到一些彆人製定的設計理念、設計知識。而這些在工作中，往往隻是工作內容的一部分，在工作中，科學的工作流程、閤適並能解決當下問題的設計、高效而良好的溝通技巧、有效的解釋說明設計纔是成功的互聯網産品設計師必須擁有的素質。而這些在學校裏是學不到的。
　　互聯網行業是一個發展非常快的行業，也是一個充滿創新的行業，技術發展快，商業模式層齣不窮，用戶的需求也在不斷變化，相似的産品越來越多。對於互聯網企業而言，要能讓自己的産品在這個快速發展且充滿變化的行業裏更好地滿足不斷變化的用戶需求，隻有為用戶提供越來越好的産品以及更好的用戶體驗這一條路。所以，近幾年，互聯網行業中成熟的公司越來越重視UED團隊。在一些UED團隊中，已經將設計崗位細分成：交互設計和視覺設計。而這種專業的職業細分，是靠一代又一代設計師們自己總結摸索得齣來的。
　　有些視覺設計師會誤讀界麵設計，從而把界麵設計得“虛”“大” “空”。什麼是“虛”“大”“空”？“虛”：需要突齣産品屬性和信息的時候，卻用設計技巧和手段掩蓋瞭産品真正要錶達的功能特點，虛而不實。
　　“大”：互聯網環境下，相似的産品非常多，一些産品或者産品功能是有時效特性的，當産品發布錯過瞭有效時機時，無論做得多好都會流失用戶。所以在設計的時候若總想太多，做得範圍太廣，往往都會導緻産品發布錯失良機。
　　“空”：設計師沒有真正瞭解産品，隻是在炫耀自己的技能，設計理念與産品理念矛盾。
　　“虛”“大”“空”會使工作夥伴對我們的能力産生質疑。在沒有任何經驗和總結可參考的情況下，設計師的成長往往會受到阻礙，對自己的職業道路會産生迷茫和質疑。本書就是基於以上原因策劃齣版的，希望本書能幫助視覺設計師們快速成長，少走彎路。
　　讀者對象本書的主要讀者包括從事互聯網視覺設計的應屆畢業生、轉行從事互聯網産品視覺設計的從業人員，視覺設計師（以互聯網為主）、視覺設計團隊管理人員（以互聯網為主）、産品經理，以及用戶體驗從業人員。
　　剛畢業的同學：閱讀這本書，可以理解如何在互聯網的環境中開展自己的工作，從學生身份切換到社會人身份，瞭解視覺設計師的職能，工作的流程和如何提升專業技能。
　　轉行成為互聯網一員的設計師：通過閱讀本書，可以瞭解互聯網環境的設計團隊是如何閤作、如何思考的，幫助轉行設計師快速入門，並融入互聯網工作氛圍。
　　和視覺設計師打交道的相關人士：可以瞭解視覺設計師的工作和思考範疇。本書將感性的設計內容用文字的方式理性地傳達給讀者，從而幫讀者瞭解並理解設計師的工作。
　　公司的高層：通過閱讀本書，領導們能更瞭解視覺設計師的感受、職業發展方嚮，從而使視覺設計師在工作中可以更好地體現自己的價值，並且在職業發展道路上有更大的發揮空間。
　　如何閱讀本書本書的內容基本都是乾貨，是我的經曆、經驗的係統總結。書中的觀點和論證均在我9年的互聯網産品視覺設計工作中得到瞭驗證和提煉。本書從界麵設計邏輯的層級分析到設計的細節分析，從工作溝通的閤作方式到設計語言的錶達解釋均有深刻闡述。具體來說，本書從以下三個層麵進行瞭講述：
　　第一層講解瞭互聯網産品視覺設計師的職業規劃、需要具備的能力，這部分內容可以幫助入門級的設計師進行技能儲備，幫助中級設計師對自己的職業生涯進行規劃，幫助設計管理者確定招聘準則。
　　第二層講解瞭設計方嚮和設計方法，一些設計方法可以幫助大傢在互聯網的工作中快速論證和自省設計是否是準確閤適。同時還講解瞭大型改版設計前期調研該如何開展。
　　第三層講解瞭深入設計和確立視覺理念的相關知識，這部分內容比較專業，技術性更強，書中會用大量的例子來說明和解釋視覺理念及一些確立視覺理念的方法論。
　　本書一共分五章，具體內容安排如下：
　　第1章講述互聯網産品及其視覺設計概念，旨在讓讀者對互聯網産品有一個整體的瞭解。作為一名閤格的互聯網産品視覺設計人員，瞭解這些內容有助於形成正確的設計觀，也就是找到設計方嚮和設計理念。這一章還講解瞭互聯網産品視覺設計師的職業規劃、需要知道的5個關鍵點和需要掌握的4種學習方法，這些都是形成設計理念的基礎。
　　第2章是在第1章的基礎上對設計的方嚮和理念進行宏觀性的剖析。這一章首先明確瞭戰略和用戶對於互聯網産品視覺設計人員來說意味著什麼，接著深層剖析瞭對互聯網産品視覺設計人員非常重要的一個概念—層級，包括什麼是層級、為什麼要掌握層級、如何建立層級等。隻有掌握瞭層級，纔可能成為一名閤格的設計師。本章最後係統介紹瞭視覺設計的方法和流程，這部分內容旨在幫助設計師在掌握瞭層級，有瞭成為一名閤格設計師的潛質之後，知道如何開展設計工作。這一章的內容既能夠幫助個人快速處理和製作設計，又可以幫助團隊規範設計流程和方法，提高團隊效率。
　　在掌握瞭第2章的宏觀知識後，第3章開始圍繞細節設計展開講解。這一章主要包括兩大塊內容—設計元素和顔色搭配，元素＋顔色＝作品，所以掌握瞭這兩部分內容就可以設計齣令人拍案叫絕的作品。這一章從顔色代錶的情感、顔色的模式、顔色選取的兩種方法等角度詳細介紹瞭顔色搭配的方法；從圖標的類型、像素、體量感、選擇、動效設計、使用情況等方麵介紹瞭圖標的使用方法；同時還對文字和錶單的設計進行瞭詳細分析。
　　在瞭解瞭設計的方方麵麵之後，本書指齣讓設計師進一步提升的方法，也就是第4章要介紹的內容—迴歸設計理念。這一章告訴視覺設計師在設計完畢後要進行反思、自省，提煉設計理念，論證設計方嚮，這樣不僅能讓作品有感性的視覺傳達、理性的理論支持，還能讓設計師找到不足、積纍經驗。要想進階為更高級彆的視覺設計師，本章內容是必學的。
　　前麵4章是視覺設計師進行創作的完整流程，是一個完整的視覺設計工作鏈，在這個鏈條上每一環都是後麵一環的支撐，缺一不可。但是在這個鏈條之上必須配以設計規範，纔能讓其更加穩固，這就是第5章要講解的內容。第5章在明確瞭設計規範的重要性之後，給齣瞭製定規範的5大原則和具體流程，最後還輔以具體的案例，讓讀者在掌握理論層麵的知識後，還能通過他人的成功經驗知道自己的工作如何落地！
　　希望本書能夠喚起讀者在互聯網産品的視覺設計過程中的一些思考，同時也希望本書能使讀者比較深入地瞭解我想要錶達的對互聯網産品的視覺設計的理解。
　　資源和勘誤書中的圖片都是進行示意的設計稿，價格和數字都僅為舉例需要。由於經驗和精力有限，本書難以全方位從點滴細節中深入而係統地解釋互聯網産品的視覺設計。如果能幫助大傢認識視覺設計師的崗位，理解視覺設計師，那麼對於視覺設計師以及我本人來說，已經足夠瞭。
　　如果你有任何針對本書的寶貴意見或建議，歡迎發送郵件至郵箱naonao_mail@126.com。期待能夠得到你的真摯反饋。
　　緻謝首先要感謝我的傢人在我寫作過程中給予的支持，他們是我堅強的後盾。
　　我還要感謝在我的工作過程中幫助我的朋友和同事。剛畢業時，我遇到瞭一位非常負責的領導王索夫，在他的指引下我做瞭一年的交互設計，這為我的設計邏輯打下瞭非常紮實的交互基礎。他曾經說：如果你“吃透瞭”産品邏輯，那麼你的設計層次將與彆人不同。感謝陳扉、鄭礫在騰訊工作時對我的設計作齣的非常細緻的點評，特彆是鄭礫不厭其煩地和我一次次看稿子，細細探討修改，給齣瞭非常專業的意見。
　　感謝張振虎和鄧佳佳讓我的設計變得更加專業。特彆感謝nikita彭曉紅，讓我的設計理論得到實踐和認可。
　　感謝楊曉平。在2014年的時候我就有寫一本書的想法，但是苦於不知道如何寫，如何齣版。2015年年初，我將這個想法告訴瞭他，是他讓我認識瞭楊福川。
　　最後感謝楊福川和孫海亮，一次次為本書齣謀劃策，引導我，使我能將所想、所得付諸文字，直至付梓。

轉行需要，然後朋友推薦瞭這本書，快遞到後翻看瞭幾章，內容蠻吸引人的，介紹的蠻詳細。希望有幫助

很好的書

京東一直很快，包裝簡單瞭些。

聽錯的一本書

書很漂亮包裝也很棒～喜歡

好書。

適閤做筆記 非常好

好

好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好