本書站在一線設計師的視角，完整地展示了新媒體下的UI設計流程和細節技巧。通過主動溝通，素材的設計，草圖的繪制，網頁端、常用端、移動設備端設計及項目總結，引導讀者在設計之路上可以舉一反三，采用TIPs和實際案例結合的說明模式，讓讀者有更多思考的空間。

設計在不斷向前，越來越多相關技法的書籍出現，卻很少談及設計究竟是
什么東西。每天看似無趣的任務縈繞著設計師的周圍，似乎是永無止境的重復
性工作。對于設計師，我們真的需要如此無奈地面對當前的環境嗎？可能有更
多高效且有趣的辦法幫助我們。筆者作為一名UI 設計師，和大部分設計師一
樣，做著看似普通無聊的工作，不過通過“實踐、積累和分享”三個階段的努
力，找到了一條快速提升自己的通道。無論是否處在業界頂尖公司還是私人小
作坊，通過這一系列的思考都能對高效的UI 設計流程有所了解，最終達到主動
想和主動做的目的。本書主要從前期溝通、草圖繪制、素材收集、設計實踐以
及項目總結五個大類，分享實際工作中的體悟，最終形成這部圖書。
如果你是新人，能從書中看到現階段UI 設計的大致流程；如果你是有經驗
者，能從書中看到些提升工作效率的方法；如果你是業余愛好者，能看到不同
職業間相似的成長辦法。
與其說它是一本具體的技法書，不如說它在告訴大家一種方法——能高效
工作，不至于天天加班，卻一樣能出作品的辦法。適當利用一些技巧，能有效
地解決多任務所帶來的煩惱，并且能游刃有余于這些需求中間。
本書主要講述的是個設計流程，即每個思維步驟背后的那點過程。自己也
覺得相對于成品，這些過程碎片更值得我們去思考。往往看似普通的東西，最
終拼合在一起，都是令人興奮的東西。這，可能就是設計的魅力吧。
本書分為以下幾大模塊來講解設計的要素。
主動溝通的智慧
溝通是設計的初始階段，萬事開頭難。試圖通過行為、語言、衣著、表情心
理學等手段，解析客戶和用戶的真實訴求。當然，不同人的偏好，都在章節中有所
呈現。不要以為這些東西虛無縹緲，它們確實時時刻刻影響著我們的生活和工作。
草圖繪制，預見最終的產品
當拿到每個設計需求時，我都會先畫草圖。由于草圖方便修改且無拘無束，
特別適合做發散思考。本章整合了一些畫草圖的實用技巧和工具，不復雜，卻
對工作帶來巨大的幫助。尤其是原型設計部分，作為設計師，可能我們不需要
IV
主動的 設計師
UI
對它有特別細致的了解；但是不得不承認，它和思維導圖一樣，都是整理自己
思路的好工具。
素材收集真的那么簡單么？
對于素材，相信每個同學都不陌生，它時常和我們打交道。你知道它還有
什么特別的地方么？本章將素材收集拆分成“高效化的工具收集技巧”、“提取
關鍵字，讓素材收集更精準”和“這樣的素材，使用起來更方便”三部分，嘗
試以更直觀的方式告訴大家。這部分工作真的沒有想象的那么簡單，我們能從
“時間”“品質”和“精度”中做得更好。
網頁端、移動設備端和常用端
UI 其實有時候是蠻寬泛的概念，與用戶有關的東西都與此相關。那么，作
為我們最常碰到的設計項目類別，網頁端、移動端以及其他設計，會一直伴隨
著我們的職業成長。這幾章主要是圍繞在這幾方面出現的問題、經驗和技巧給
予一定的提示。方法總是死的，希望能從我不算特別成功的案例中，找到屬于
你的那條路，那就足夠了。
設計師應該掌握的前端知識
視覺設計和前端設計，在某種意義上是骨肉相連的。僅僅靠視覺，在網絡
上充其量就是一張漂亮的畫皮，沒有靈魂，不能行動。作為偏向視覺的同學，
了解一定的前端開發知識是必須的。最簡單的莫過于切圖的標準、HTML/CSS
構成書寫和簡單JS 效果的實現。當真正了解程序員同學如何工作，合作才會變
得更加愉快和高效。
碎片記錄要點，給項目劃上完美的一句話
設計是門溝通的藝術，沒有絕對技巧，更重要的是背后的思維。每個設計
背后，更具有說服力和力量感的往往是整個過程。記錄的方法多種多樣，像碎
片式記錄，像完整文章記錄，像聲音記錄，等等。每次可能不需要很多，或許
只是區區140 字，雖然微小，但是經過日積月累，卻能迸發出不可思議的能量，
并能帶來很多意想不到的機會，更重要的是看到自己不斷在進步。
很喜歡一句話“永遠將自己保持在Beta 版本”，送給希望不斷進取、敢于
突破的人們。
筆者的博客：http://drizzlep.diandian.com。
筆者的微博：@ 米田的天空
潘紹章［@ 米田的天空