Figma UI設計技法與思維全解析（簡體書）
- ISBN13：9787302576013
- 出版社：清華大學出版社(大陸)
- 作者：靜電
- 裝訂／頁數：平裝／294頁
- 規格：24cm*17cm (高/寬)
- 版次：一版
- 出版日：2021/04/01
商品簡介
Figma是當下備受關注的云應用UI設計工具：它基於瀏覽器，因而不受操作系統的限制；它上手容易，可以說Sketch的使用者皆能輕松上手Figma；便於合作共享是它的獨特優勢。本書通過多個設計案例講解軟件技能，並配有教學視頻，從Figma操作的方方面面，延展到設計方法與思維能力。本書第1、2章講Figma的基礎操作及案例演示；第3、4章講Figma 協作功能和界面設計細節，屬於UI設計系統進階知識；第5、6章為設計思維提升的內容；最後為Q&A和優秀作品展示。
本書結合了作者多年的UI設計行業經驗，內容由淺入深，非常適合UI設計師及有志進入UI設計行業的讀者提升技能，也可以作為一本UI設計師日常的工作讀物，方便隨時查閱，快速解決實踐中的問題。
作者簡介
靜電，SketchChina中國社區創始人，新銳UI設計工具Sketch在中國的首批推動者；靜Design.FM主播，京東智能·東課堂嘉賓講師，SketchMeetup特邀嘉賓，著有熱門圖書《Sketch+Xcode雙劍合璧》《不一樣的UI設計師》。從2015年開始，靜電在網絡上發表UI設計及行業相關的教程及文章，言語詼諧，觀點犀利。隨著移動互聯網熱潮的到來，被越來越多的設計師熟識。2018與2019年，被墨刀授予產品原型設計專家稱號。
名人/編輯推薦
1. 實操內容配套25個視頻，掃碼突破操作難點。
2. 充分的知識鋪墊，讓你知其然亦知其所以然。
3. 處處融入的設計思維，助你提升核心競爭力。
4. 實用Tip，講述設計師在工作中的樣子。
5. 輕松的行文，豐富的配圖，打造流暢的學習體驗。
序
推 薦 語
靜電老師對新的設計工具總是能很快跟進並深入鉆研，幫助一線設計師們盡快發揮出新工具的生產力。更難得的是，靜電老師沒有忘記加強對通用設計原理和理念的講授，幫助讀者做好適應設計行業變化的長遠準備。
紀曉亮，站酷網總編
Figma這兩年越來越火，能頂著 Photoshop 和 Sketch 的壓力，躋身主流設計工具，足以見得其高效性和便攜性，它強大的協作功能更是贏得設計師們的拍手叫好。如果你想盡快上手這個新興的設計工具，這本書將成為你的鑰匙。
程遠，優設網內容總監
“降本增效”是產品經理的核心價值之一。這也是產品經理喜歡研究、體驗各種工具，來提高項目協作中的溝通效率、協作效率的原因。Figma就是一款值得產品經理去研究的工具，靜電老師在本書中詳細講解了這個工具的必備核心知識。
老曹，起點學院、人人都是產品經理社區創始人兼CEO
Figma不只是工具，更是思維方式；在線協作不只是將文件放在在線，更能極大地提升集體工作效率、釋放創造力。
吳卓浩，Mr. HOW AI創造力學院創始人，
曾任Google、Airbnb中國、創新工場設計負責人
Figma是深受全球設計師喜歡的一款新的在線設計和協作工具，能提升產品設計的協作效率和流暢度，達到全鏈路的統一平臺化，也是我們墨刀追尋的目標。靜電老師作為墨刀官方認證的產品設計講師，一直致力於設計知識和理念的傳播，也推動了設計工具的進化和發展。這本書中包含了作者的大量幹貨知識，非常值得各位設計師和產品設計者閱讀。
張元一，墨刀創始人兼CEO
隨著時代的發展，設計師身邊的新工具越來越多，如何在這些紛繁的工具中找到適合自己的，同時兼顧當今更新的技術、更快速的設計流程協作需求，是值得設計師考慮的一點。靜電的這本書在講解新工具Figma的同時，結合了自己的經歷和對UI設計的觀點，讓我們學到工具之外的很多設計理念，非常值得設計師一讀。
“烏魚說”，知名設計自媒體
新的生產力工具意味著新的機會，靜電老師總是能在第一時間竭盡全力地給設計行業帶來新的分享——這不只是一個設計師的態度，更是一個教育工作者的態度。用“新”的思維追逐教育，把一線的經驗分享給每一位求知者。從Sketch到Figma，好的內容值得擁有。
王曉蘇，CCtalk 運營總監
設計在我看來是一份非常美的工作，能將人性、人心的真、善、美顯現出來。靜電把自己十多年的時間投入進來，不斷思考和精進。這本書把關於設計認知的問題講解得特別透徹，有非常多的實際案例，值得反復閱讀。更重要的是，設計師需要將設計技能與產品真正結合起來，推動產品進步，並產生價值，這也是一個優秀設計師的真正魅力所在，而這種能力，也在靜電的實際工作中得到了體現。
陳芳，中文在線·湯圓創作項目總監
新工具背後所折射出來的是整個互聯網領域以及設計領域對於流暢協作的渴望，減少不同職位之間協作和溝通的成本，讓工作和產品開發效率更高。設計是用來解決問題的，全新的設計工具讓解決問題的效率更高，把更多思考的空間和時間留給設計師，讓設計師真正專注於產品本身的價值。作為之前一起共事過的同事，靜電老師真正把自己的設計能力融入了產品之中，讓設計為產品和用戶價值服務。這本書也是靜電的傾心力作，非常值得廣大設計師一讀。
Rongrong，ThoughtWorks體驗策略咨詢
作者介紹
靜電，SketchChina中國社區創始人，新銳UI設計工具Sketch在中國的首批推動者；靜Design.FM主播，京東智能·東課堂嘉賓講師，Sketch Meetup特邀嘉賓，著有熱門圖書《Sketch+Xcode雙劍合璧》《不一樣的UI設計師》。從2015年開始，靜電在網絡上發表UI設計及行業相關的教程及文章，言語詼諧，觀點犀利。隨著移動互聯網熱潮的到來，被越來越多的設計師熟識。2018與2019年，被墨刀授予產品原型設計專家稱號。
靜電對互聯網設計產品思維的結合有著深刻的理解，倡導感性設計與理性思維的融會貫通。曾在eNet硅谷動力、中文在線、LavaRadio、365日歷等多家知名互聯網企業擔任首席設計師及管理職位，2016年年底創辦北京境地創想教育科技有限公司，致力於互聯網UI設計行業在線教育與內容傳播。
設計行業的小伙伴常說，設計師吃的就是“青春飯”。但靜電卻憑借著十幾年的一線互聯網設計行業經驗，一直保持著高質量的教程產出。現在靜電轉型到設計類教育行業，各位設計師小伙伴評價其課程為“三觀正”“幹貨滿滿”“啟發性學習”的典範。其在線課程《靜電的UI設計教室》目前已經開設二十多期，並一直堅持超小班一對一輔導的教學模式，深受學員的好評。
也許你是靜電的老讀者了，或者剛剛開始接觸UI設計這個行業。這都沒關係！希望這本書能給現階段的你更多的幫助，在你羽翼日漸豐滿的過程中，助你飛得更高更遠。
移動互聯網設計領域的“戰國時代”
到這兩年為止，移動互聯網已經不再是一個新鮮的詞匯了。從2006年開始正式進入互聯網設計領域以來，我的身份從“美工”“網頁設計師”“UED設計師”“廣告設計師”，一直進化到現在的“UI設計師”“全棧設計師”。這些名詞也代表著互聯網設計領域的一步步進化和成熟。
可能很多小伙伴還不知道，在2012年或2013年之前（可能更晚），“UI設計師”這個詞是多麼讓人新鮮感十足。當時跟互聯網沾邊的設計師，大部分還在做著傳統的網頁設計及客戶端設計。雖然中國的3G網絡在2008年已經開始商用，蘋果的iPhone 3GS已經在2009年發布，但那時候，基於移動互聯網形態的產品還以手機上簡陋的WAP網頁為主。
所以，你可以把這些都理解為暴風雨前的平靜。而在這之後，仿佛一切都走上了快車道，你會發現所有的公司都開始做一種叫作App的東西，你手中的手機也從N年前的諾基亞換成了iPhone或Android手機，你開始借助3G網絡，在一個個的手機應用中流連忘返。當萬事俱備的時候，互聯網的從業者發現，手機已經代替傳統的PC，成為人們的必需品。
於是，之前的“網頁設計師”，紛紛開始嘗試在手機上展示他們的設計。但在那時，我們還在用著Adobe公司的“網頁設計三劍客”，用且僅用著Photoshop來實現這一切。可是，隨著移動互聯網讓所有人的節奏越來越快，傳統的Photoshop已經不再能滿足設計師快速開發和迭代移動端應用的需求了，而Photoshop單畫布的設計模式也顯得越來越落伍。
設計師們需要在一個界面上放置所有的手機界面，觀察它們的統一性、內部的邏輯，更快地輸出開發所用的素材。所以，打破Photoshop一統天下的契機就這麼來了。現在廣為人知Figma UI設計技法與思維全解析 二校 文前.indd 5的Sketch也就是順著這種爆發性的趨勢成為“網紅軟件”的，它快速、輕便、易於上手，被越來越多的UI設計師接納，發展到現在，已經成為UI設計行業裡大家必會的工具之一。從2015年、2016年開始直到現在，可以說是各種第三方UI設計工具百花齊放的時代。Adobe公司為了應對這種趨勢，推出了Adobe XD，基於畫板模式的簡單設計工具。而第三方工具則數不勝數，除Sketch之外，Affinity Designer及各種基於云的設計工具開始隨著這種趨勢井噴式出現。
一時間，各種“究竟應該使用哪種工具來做UI設計”的討論層出不窮，有人說Photoshop要“死”了，未來是Sketch的天下。大部分卻說這絕對不可能！“保守派”與“改革派”設計師之間的矛盾也越來越尖銳。可見，很多人的思維中都是有“保守”傾向的，人們不願意去改變已經熟悉的東西。
但是移動互聯網的潮流是如此洶涌澎湃，讓設計師不得不開始在思維上去接納這種“新鮮的事物”，不管是主動的，還是被動的。新軟件層出不窮，我們之前的認知開始出現混亂。究竟哪一種才是我們的心頭好呢？ 沒人能說清楚—直到現在，甚至未來很長一段時間裡。
我們不妨接納這種“戰國時代”的混亂局面，順便把自己的思維調整一下，朝著更高的目標進發，比如如何借助這些百花齊放的工具，最終達到我們的設計目標。所謂“條條大道通羅馬”，也許做出令人心儀的設計稿比討論該用哪款工具更值得被稱讚。你喜歡哪款設計軟件，用就好了，Photoshop這麼多年依舊活得好好的，Sketch也是，而新工具依然層出不窮，比如這本書中要講的新UI工具Figma。
Figma是典型的“云應用”的代表。在這本書中，我們重點來講解Figma及與之相關的UI設計技能。
云應用：趨勢？機遇？還是曇花一現？
打開網頁就能用的應用現在已經越來越多，當然這也不是什麼新鮮事兒了。早在2010年，Google就推出了自家的Chrome OS，這是一款完全基於網絡的操作系統，如下圖所示。用戶打開網頁就可以進行工作，無須安裝煩瑣的操作系統與各種客戶端應用。雖然在2010年，這個概念還有點過於超前，但是這種理念帶來的效率軟件革新卻沒有停止。比如筆者當前正在某在線文檔網站來撰寫書稿，一切基於云來保存，而不是像之前一樣，用Page或者Word建個文檔，把自己的書稿放在計算機的本地硬盤裡。
而設計軟件這幾年也順應這個趨勢，開始齊刷刷地上“云”。我們來聊聊這兩年UI設計工具的進化吧！Sketch不顧一切地在開發和推廣自己的Sketch Cloud產品，廣受Windows用戶歡迎。號稱Sketch狙擊者的Adobe XD則在最近的一次更新中設置未付費的用戶只能將設計稿保存在云中，無法在本地進行保存。而現在要給大家介紹的這款UI設計工具Figma，則將Sketch的設計功能完全搬到了瀏覽器中，用戶打開瀏覽器就可以體驗和Sketch幾乎一模一樣的操作模式，包括各種菜單、各種圖形的渲染，在Figma裡都表現得近乎完美，如下圖所示。
與此同時，國內的墨刀、在線設計海報的創客貼，還有一系列同類型的工具則一直是這種“云”模式的踐行者。完全貼合人們對本地化軟件的操作習慣，便於分享和多人協作，無須下載客戶端，這些都成為“云”工具的王牌撒手锏。設計師在Figma、墨刀等工具中做完設計稿，直接將鏈接復制，就可以發送給客戶和需求者查看，需求者可以直接在設計稿上標注並反饋意見，甚至可以邀請多位項目成員一同完成項目。這無疑讓設計和開發的效率獲得大幅度提升，吸引力著實不小。
可以說，一些較輕量級的應用已經或多或少地完成了用戶習慣的培養。而在設計這種較重的應用中，用戶使用習慣扭轉的速度則會相對慢一些。很多設計師擔心，公司有保密措施，將設計稿傳到云上會被泄露。還有人則擔心萬一斷網了，自己就無法工作了。確實，這些擔心都有各自的道理，也很容易理解。而Figma則為了讓用戶擔心少一點，提供了可以將Figma 網絡上完成的設計稿保存到本地的功能，另外一些工具也或多或少在這個方面做出了妥協。
筆者還是比較樂觀的，工作習慣的改變總是要花不少時間的，特別是用戶自身認知的改變，並不是一件容易的事情。但是不可否認，“云應用”必然會成為未來的趨勢，不管你是否喜歡，它現在已經到來，而且會持續發展下去。在效率和協作高於一切的時代，誰能抗拒這種吸引力呢？
作為設計師來說，縱使你現在可能因為工作流程等客觀原因無法馬上在云端工作，但是不妨先了解一下這種先進的工作模式，為今後的趨勢做好準備。而新的UI設計工具Figma則是一個不錯的選擇。
目次
01 我們要成為怎樣的設計師
01-01 風口不在，UI 設計師如何自我定位 ……………………………………………… 2
01-02 你為什麼成長那麼慢？什麼是 UI 設計師的核心競爭力 ………………………… 6
01-03 UI 設計師必備技能分析 ……………………………………………………………11
01-04 UI 設計師的思維和方法論 …………………………………………………………19
02 從軟件開始放飛自我
02-01 如何選擇適合自己的 UI 設計工具 …………………………………………………25
02-02 Hello 新朋友—初識 Figma ……………………………………………………… 29
02-03 Figma 基礎操作詳解之界面篇 ……………………………………………………34
02-04 Figma 基礎操作詳解之工具篇 ……………………………………………………39
02-05 Figma 基礎操作詳解之菜單篇 ……………………………………………………58
02-06 Figma 中的特色插件 ………………………………………………………………88
02-07 那些讓你大呼好用的 Figma 小技巧 …………………………………………… 103
02-08 界面中的約束與自適應布局 …………………………………………………… 108
02-09 Figma 交互功能詳解 …………………………………………………………… 117
02-10 Figma 如何與 Sketch 及 Adobe XD 結合使用 ……………………………… 133
02-11 使用 Figma 完成你的第一頁 UI 設計稿 ……………………………………… 137
03? Figma 協作功能解析
03-01 在 UI 設計工作流中活用 Figma 與產品經理、需求方溝通 …………………148
03-02 UI 設計師如何使用 Figma 與開發工程師無縫對接 ……………………………151
03-03 使用 Figma Mirror 快速預覽 UI 設計稿 ………………………………………155
03-04 挽回你的“第一稿”：Figma 設計稿版本管理功能 …………………………159
03-05 斷網怕不怕？將 Figma 設計稿保存為本地文件 ………………………………161
04 Figma UI 界面設計細節進階
04-01 Figma 圖標設計實戰：線性圖標與 Big Sur 輕擬物圖標繪制 ………………165
04-02 版式設計練習：UI 設計的核心能力 ……………………………………………191
04-03 UI 界面中的金剛區圖標：Tab 欄圖標 …………………………………………198
04-04 啟動頁設計：用戶的第一印象很重要 …………………………………………204
04-05 分清重點：應用首頁設計技巧 …………………………………………………209
04-06 UI 詳情頁設計技巧及設計目標 …………………………………………………214
04-07 用戶個人中心頁設計 ……………………………………………………………219
04-08 萬物即列表：從列表設計強化自己的設計能力 ………………………………221
04-09 插畫：為 UI 界面錦上添花的技巧 ………………………………………………226
04-10 “原子化”設計思路：用 Figma 制作設計規範與組件 ………………………228
05 iOS 與 Android 人機界面設計指南—以不變應萬變的設計秘籍
05-01 日漸融合的 iOS 與 Android 設計 ………………………………………………235
05-02 內容至上：設計原則解析 ………………………………………………………238
05-03 屏幕（密度）精度：開始設計之前首要關注的內容 …………………………241
05-04 從“亮色模式”到“暗黑模式”: iOS 13 新增規範講解 ……………………246
05-05 小組件 Widget 崛起：iOS 14 設計規則解析 …………………………………254
06 從細節到整體：以產品和用戶為核心的設計思路
06-01 以品牌眼光做應用設計及展示 …………………………………………………262
06-02 創造觸動人心的作品展示頁的 13 個步驟 ………………………………………265
07 靜電的 Q&A 時間
08 後記
09 附錄
09-01 優秀 UI 作品展示 …………………………………………………………………281
09-02 本書軟件來源及合作伙伴 ………………………………………………………290
09-03 作者愛用的設計工具推薦 ………………………………………………………291
您曾經瀏覽過的商品
購物須知
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。
特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。
無現貨庫存之簡體書，將向海外調貨：
海外有庫存之書籍，等候約45個工作天;
海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。
為了保護您的權益，「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。