優秀設計師是如何煉成的？第一本講述單個App成功案例設計全流程的分享書，來自搜狐新聞客戶端UED團隊，看搜狐如何做設計。

全面介紹國內一線互聯網公司中，UED團隊在需求、設計、開發、測試、推廣各個階段中的工作內容和方式，包括信息架構、原型、交互、視覺、動畫、Icon、品牌等全流程，以及與相關人員的合作細節。內容真摯樸實，值得品讀！

亞馬遜圖書購買地址：

http://www.amazon.cn/gp/product/B00HUA52T2/

推薦理由：

1、《設計之下》以產品為核心，系統全面地介紹了設計流程和方法。寫在書中的是搜狐新聞客戶端UED團隊一線經驗的總結，不僅有很多實實在在的案例，更有對用戶體驗設計的思考和感悟，以及設計人員與產品、開發、運營及市場人員溝通的方法和技巧。

2、《設計之下》由2012蘋果年度最佳應用《中國古典家具》設計師董翔鶴帶領搜狐新聞客戶端UED團隊精心打造，其工作內容圍繞移動平臺，包括視覺體驗、交互設計、渠道運營、PC官網及自媒體后臺支持。他們的生存面貌、發展方式體現了當下多數從業者的生存狀態，所以《設計之下》對設計師有很高的參考價值。

3、好的設計簡單地說就是又要好看又要好用，《設計之下》沒有花哨的語言，華麗的外衣，只是將實實在在的流程與方法裸裎給大家，點滴匯聚，與前輩、后來者分享。

專家評論

搜狐新聞客戶端的UED團隊有自己的小宇宙，他們特別在乎自己的作品，特別熱愛自己的作品，他們把用戶滿意看得比金子還寶貴，我從來沒有干預過他們的視覺和交互，我不需要這么做。
——搜狐副總裁 方剛

設計師應時刻心存社會責任感，著眼于用戶和生活，致力于創造確實有用、好用的產品。本書作者結合從學習到工作的經歷，詳細講述了搜狐新聞客戶端的設計全過程。不僅有很多實實在在的設計案例，更有對用戶體驗設計的思考和感悟。
——清華美院院長 魯曉波

第一本詳細講述單個App成功案例設計全流程的分享書，全面介紹信息架構、原型、交互、視覺、動畫、Icon、品牌的具體設計方法以及與相關人員的合作細節。搜狐新聞UED團隊的分享精神和及時總結做法值得從業者學習，相信這會成為設計師案前一本極好的參考書。
——國際體驗設計協會（IXDC）秘書長 胡曉

一本實在的書，沒有太多花哨的言語，是以產品為核心，系統全面介紹其設計流程和方法的書籍。你可以把它當做參考書，也可以作為流程管理的范本。里面介紹了產品設計過程中運用了哪些方法、技巧，有很好的學習借鑒作用。另外值得一提的是，書中將產品，開發以及運營對UED部門的看法也專門拿出很大的比重來寫。這對于團隊溝通和產品塑造有著很重要的作用。
——Iconfans創始人 董景博

作者簡介

搜狐新聞客戶端UED團隊隸屬于搜狐新媒體中心，成立于2012年，專門負責搜狐新聞客戶端產品的體驗設計。工作內容圍繞移動平臺，包括視覺體驗、交互設計、渠道運營、PC官網及自媒體后臺支持。團隊始終致力于提升搜狐新聞客戶端的用戶體驗，改善閱讀及獲取資訊的方式。六人團隊小而彌堅，個人與團隊共同成長。我們的生存面貌、發展方式體現了當下多數從業者的生存狀態，希望通過這本書能和您分享一些案例思考和感悟。

設計背后的故事——作者專訪

1、 你們是一個怎樣的團隊？
答（包巳硯）：搜狐新聞客戶端UED團隊是一個活力的大家庭。
活力——每一個團隊成員都是熱愛生活、熱愛設計的好少年。對待生活和設計總是精力充沛，對待用戶體驗和互聯網行業充滿了癡癡的信仰和追求。
大家庭——我們無話不說，好像從來沒有生過各自的氣。即使有了不同的想法，大家都會直接說出來，商量怎么解決問題。也從不會吝嗇分享自己對生活和工作的新發現，例如看見一篇好文章或一個好作品，總是第一時間就轉發給大家。每次過年過節后，從家鄉回到工作崗位時，互相分享特產是十分歡樂的時刻，大家總是對我帶來的海產品贊不絕口。

2、 你們是怎樣想到要寫一本書的？這本書最初的初衷是什么？
答（顧盼）：我在團隊負責招聘的初步甄選工作，每天都可以收到很多簡歷和作品集。其中不乏應屆生和初學者，他們大多對用戶體驗十分有熱情，也很有自己的見解。可是，體現在作品上的卻往往忽略了一些用戶體驗的本質，也不是企業所需要的。比如擁有十分精湛的寫實圖標能力，卻忽視了界面設計的訓練，對布局、顏色、架構這些基本的設計要素也缺乏關注。
高校教學和企業實際工作的對接一直困惑各個學科。作為企業，有責任為行業新人搭建橋梁和平臺。那我想最直接的做法便是樸素地說一說我們平時在工作中是怎么做設計的，工作流程是怎么樣的，細節要達到什么程度，和其他同事又是怎么合作的。

3、 在寫作的過程中你們都遇到了哪些困難，其中最大的困難是什么，你們是如何解決的呢？
答（曹雨初）：寫作和設計的思維不同，有一個好點子的時候我可以立刻畫出來。圖標、界面或是插畫，簡單的勾勒一下。但在寫書的過程中，卻常常有"文思如泉涌，下筆擠牙膏"的苦惱。
另一方面，搜狐新聞客戶端團隊也一直在高速前行中，我們UED組無時無刻不再為了更好的體驗而努力，于是寫作無不增加了大家工作和生活的壓力。
對于第一個問題，書中的每一段和每一句我們都盡心盡力地反復斟酌。團隊成員會定時互相交流，互相閱讀各自的章節，發現不明白的地方便提出來，及時優化。而第二個問題，每一位同事都為此加班加點，雖然很累，但每完成一部分后，都很有成就感。

4、 你對這個行業有沒有什么感想和大家分享一下？
答（包巳硯）：用戶體驗設計是一個正在逐漸被大家熟悉和重視的領域。它不像市場或渠道等創造的價值是即時可見的，而是潛移默化地提升產品并影響人們生活的方式。當技術越來越普及，用戶體驗的價值便會越來越大。正在從事或準備從事的用戶體驗的朋友應該堅持自己所信仰的事業，同時提高自己的設計能力。正確理解用戶體驗的本質——表面看我們是在繪制界面、圖標、插畫，是在設計架構、操作、動效，實際我們需要關注的領域很多。在實踐的過程中勤于思考，提高自己的設計能力，爭取為自己所服務的產品、公司、社會創造更大的價值。

5、 寫作是吃苦不討好的事，你寫作中最大的動力是什么？寫作中能夠獲得什么？
答（董翔鶴）：第一本講述單個移動App設計全過程的書籍，也第一本介紹國內一線UED團隊工作方式的書籍，最大的動力就是把這些"秘密"分享給大家。寫這本書的目的并不是告訴大家我們的工作方式和流程是好的或者對的，而是想拿出來一起交流，以探討更好的或是更適合自己團隊的做法。互聯網行業發展的很快，用戶體驗領域還很新，所以共同推動它的發展是我們每一個從業者的義務。

6、 講講你在寫作中發生的好玩的或者感人的讓你印象很深刻的事吧？
答（顧盼）：寫書的過程也是對這幾年在搜狐新聞客戶端團隊工作的總結，面對厚厚的一疊A4紙和記事本，思緒萬千。這里面有會議記錄、產品信息架構、紙質交互原型、被圈點過的需求文檔、無數最終沒能上線的方案等。通過這些不同的字跡，回憶也漸漸清晰起來。我喜歡及時寫下自己的想法和疑問，在文檔上圈圈點點，所以可以清楚的看見曾經的思考方式，那么現在有沒有變化呢？從這個過程中，我看到了搜狐新聞客戶端和自己的發展軌跡，原來我們已經一起走過這么多路。

7、 你們認為自己寫的這本書有哪些優點和缺點？
答（曹雨初）：全面介紹了國內一線互聯網公司中，UED團隊在需求、設計、開發、測試、推廣各個階段中的工作內容、流程和方式，以及與相關人員的合作細節。這就像一部工作的紀錄片，語言十分樸實，通俗易懂。即使僅僅是對互聯網公司大樓每日燈火通明感到好奇的人，也能從中找到些許答案。
不過在完成這本書籍后，我們發現在寫作的時候想說的很多，也經常處在埋頭疾書的狀態。所以忽視了文章的整體架構，在內容的輕重緩急上還可以再斟酌。

8、 對讀者說點什么吧？或者最希望通過這本書讀者能收獲些什么？
答（董翔鶴）：希望通過本書，大家可以對互聯網行業和用戶體驗工作有更全面的了解。用戶體驗并不"高深"，但想要做好也不容易。它是一個交叉性很強的學科，需要關注的方面很多。 希望熱愛用戶體驗的朋友，堅持自己的事業。用戶體驗群體并不"孤單"，正有越來越多的人參與，在社會和企業中也發揮著越來越大的作用，并確實為生活的方方面面帶來更多的便捷。
移動互聯網行業發展的很快，產品日新月異，搜狐新聞客戶端和我們UED團隊也在不斷的進步中。關注"搜狐新聞客戶端UED"的媒體，"追蹤"我們的最新動態。

內容提要

形而上者謂之道，形而下者謂之器。匠者，器也。處身平凡的匠人不斷追求向上的設計之道。本書沒有華麗的辭藻和長篇大論的理論，作者是搜狐一線的設計團隊，寫作過程中他們盡力還原真實的工作場景，并總結出了一些實用的經驗和方法。
《設計之下》共三部分，全面講解了用戶體驗設計的流程和方法。第一部分為"交互設計"，闡述了從項目啟動、解析需求到原型設計的過程，并且總結了交互設計的要點：大局觀、操作流程簡捷、形式新穎且統一、各種特殊情況等。第二部分為"視覺設計"，闡述了界面、顏色、圖標、質感、動畫、切圖等具體方法，以及如何與開發/測試工程師們合作、尋找平衡設計與技術的方法。第三部分為"他們眼中的優秀設計師"，通過產品經理、程序員、運營、市場經理的視角，闡述了如何成為一名優秀的設計師。
《設計之下》適合交互設計師、視覺設計師、用戶體驗從業人員參考閱讀，亦可作為設計類專業學生的參考用書。

編者序

形而上者謂之道，形而下者謂之器。匠者，器也。處身平凡的匠人不斷追求向上的設計之道。我們是搜狐普通的設計師，想和大家分享一些心得體會。謹以我們的流程和方法獻給有志投身用戶體驗設計的同學們。
入行多年，投身搜狐新聞團隊也已兩年有余。與業界同儕相比，仍是新晉后輩。寫在書中的是一線設計團隊的集體經驗和設計師個人的些許感受。點滴匯集，與前輩、后來者分享。
言語不盡，仍待來者指點。
《莊子 ?山木》篇講到："弟子問于莊子曰：'昨日山中之木以不材得終其天年，今主人之雁以不材死，先生將何處？'莊子笑曰：'周將處乎材與不材之間。'"
作寓言讀，可以從多方面得到啟示。出于職業習慣，我從中悟出一點個人關于 UX設計的一些感受，可能就如莊周所言，處乎材與不材之間。
全書在編寫的過程中，我們的團隊始終僅有五人。書籍耗盡了團隊成員幾乎全部的業余時間。過程中，我們經歷了人員變動，有過意見相左、有過彷徨悱惻。但最終對于設計的熱愛使我們堅持下來，使這本書得以面世。
感謝搜狐新聞客戶端負責人岳建雄。

感謝主編成員：顧盼，鄧敏，曹雨初，包巳硯，有他們才有這本書；感謝參與編輯的同學：李艷，馬寧，劉廷奇，陶宇；實習生：王麗婷，劉春強，王子倩，歐陽磊。感謝內容運營中心總監繆貝穎，市場部總監張璞，服務端產品經理孫小雷， iOS開發組長叢云旦加入的文字讓成書更加豐滿。感謝知友"農民駱逸"，我們引用了您在知乎的文字對 "設計之下"進行了解讀。感謝搜狐新聞客戶端團隊所有的成員。
——設計師董翔鶴

前言

我們每天都在面對著生活和工作中的各種問題，千頭萬緒中如何做到事事有序。
用戶體驗設計是什么？用戶體驗設計能做什么？簡單地說，用戶體驗設計提供給人們一種適合的路徑，以便輕松、愉悅、高效地解決問題。
解決問題的方式

早些年，人多聚會吃飯的時候，一個很現實的問題出現了，有的菜太遠，夾不到，用餐者只能站起來去夾，讓筷子變得"更長"，這樣雖然解決了問題，但是方便了自己最終卻造成了整個飯局的混亂。于是為了更好地解決這個問題轉盤被安放到了桌子上。現在，我們再去餐館吃飯，就很少會再遇到這樣的問題了。

試想一下，如果我們把餐桌當成一個產品，那么使用餐桌吃飯的人就是這個產品的用戶，餐桌上的很多菜，就是產品的內容，設計餐桌的人就是用戶體驗設計師，讓吃飯的人能快捷、方便地夾到菜（獲得內容），桌子能轉動就是用戶體驗設計師設計的最好的解決問題的方式。
所以，在實際設計過程中，我們也要考慮到解決問題方式的多樣性，尤其是在設計產品界面流程操作的時候，多問幾個為什么，多找幾個用戶來談談，才能知道到底采用哪種方式才是最流暢、最有效的。

引導用戶的路徑
用戶體驗絕不是一個頁面、一個 icon、一個動效，而是由這些基本元素構成的一個系統的流程，可以說是用戶的瀏覽路徑。
宜家的購物路線設計可以說是一種典型的用戶體驗設計。

從這種路線圖可以看出，只有一條主要路線，蜿蜒從入口到出口，貫穿"客廳"、"餐廳"等購物點，購物點之間有捷徑打通，在不影響主路徑的時候，有多種"捷徑"可走。傳統商場的購物點往往是散狀分布的，即便有很多路徑相連和功能劃分，仍然容易迷路。宜家通過導視標志和墻壁的阻隔與劃分形成了上面這種蜿蜒而接近唯一的瀏覽路徑，這種設計方式巧妙地解決了顧客迷路的問題，并且保證顧客基本看到了其所提供的所有商品，從而最大限度地挖掘顧客的購買潛力。

在設計軟件時，也要考慮用戶的使用路徑。從用戶點擊圖標開始，他就進入了你的軟件"商場"。你需要做的就是用最簡單的方式引導，幫助他找到關注的內容和想使用的功能，快速地進行消費。

另外一個值得注意的細節是宜家的各個購物點不會只擺商品。你經常會看到各種"樣板間"，比如一款杯子可能出現在"餐廳"區，還會出現在"客廳"、"廚房"等地點，宜家將搭配好的套餐出售給顧客。
宜家的做法給予了我們靈感。讓商品之間產生聯系，大部分消費者買了一只水杯后，會感覺其搭配的餐墊也不錯，桌椅風格也相符，最后引導他買下整個餐廳的大部分裝飾。

這是一種典型的場景化設計。從產品的角度來解釋，樣板間在整個購物流程中起到了流量的再分發作用，并且將模塊和功能之間相互打通，是整個購物流程中的關鍵節點。比如，搜狐新聞客戶端的訂閱中心、新浪微博的廣場，都是這種流量再分發在軟件上的體現。
為了化繁為簡
"如果所有人都忙于做所有的事，又有哪一個人能把每一件事做到完美。"

在 2012年 12月搜狐新聞進行了 3.3版本改版。我們對客戶端 UI和交互進行了簡化，閱讀產品內容是核心，一切視覺元素為閱讀服務，我們簡化了一切質感讓設計回歸到本原，內容即 UI。視覺上扁平不如讓內容層級和交互邏輯扁平，所以我們將原有 APP分布式的功能按鍵全部集中在了 ToolBar上，讓用戶更方便地進行單手操作。

隨著 iOS 7的發布，扁平化的視覺設計風格大行其道，與其讓 UI扁平，不如讓信息和內容扁平，設計的存在一定是為了更好地解決問題，用戶體驗設計提升了解決問題途中的精神感受。
對于用戶體驗設計可能每一個從業者心中的概念都不一樣，但大家最終的目的卻可能相同。本書以搜狐新聞客戶端為案例與前輩和同學們分享我們的工作流程和方法。言語不盡，仍待來者指點。

目錄

第一部分 交互設計 DESIGN FOR THE UNCONSCIOUS
第 1 章 項目啟動
1.1 從想法到項目5
1.2 什么是項目 5
1.3 項目啟動會 6

第 2 章 解析需求
2.1 交互設計的"五要素" 14
2.2 閱讀產品文檔 15
2.3 交互模型 17
2.4 功能系統 23
2.5 信息架構 26
2.6 工具和方法 30
2.7 小結 31

第 3 章 原型設計
3.1 概念設計 35
3.2 低保真原型 36
3.3 高保真原型 48

第 4 章 交互設計師有話要說
4.1 大局觀 66
4.2 操作流程簡捷 68
4.3 交互形式新穎且統一 75
4.4 反饋提示 81
4.5 動畫的重要引導作用 91
4.6 考慮到各種特殊情況 100
4.7 尊重平臺特性 了解技術限制 106

第二部分 視覺設計 BEAUTY IS ORDER
第 1 章 準備
1.1 工欲善其事 必先利其器 113
1.2 UI設計師的伴侶——Photoshop 115
1.3 開始前要做的功課 120

第 2 章 界面設計
2.1 風格 131
2.2 布局 134
2.3 被放大的標題 134
2.4 不同平臺的特殊區分 135
2.5 同類之間的歸納 136

第 3 章 你的界面是什么顏色
3.1 顏色和情感 140
3.2 主色和輔助色 141
3.3 亂花漸欲迷人眼 142
3.4 那些微妙的漸變色 143
3.5 強調色的適當運用 145
3.6 界面上的特殊色 149
3.7 小結 151

第 4 章 優美的圖標
4.1 哪些地方可以運用圖標 154
4.2 風格鮮明的圖標 159
4.3 表意 161
4.4 我們要做什么樣的圖標 167
4.5 實例 184

第 5 章 界面質感
5.1 擬物 194
5.2 扁平 198
5.3 質感 198
5.4 小結 199

第 6 章 錦上添花的 UI 動畫
6.1 輔助建立完整的層級關系 203
6.2 讓操作變得更有趣 206
6.3 指示性的動效 208
6.4 畫龍點睛 210
6.5 平臺區別 212
6.6 小結 212

第 7 章 切圖
7.1 平臺的不同特性 214
7.2 尋找自己高效的切圖方法 219
7.3 標注文件 227
7.4 小結 228

第 8 章 開發與測試工程師們的建議和看法
8.1 共同推動夢想的實現 230
8.2 確保實現品質 232
8.3 最終的取舍 233

第 9 章 給設計點靈魂
9.1 優雅的等待 236
9.2 隱藏的情懷 239

第 10 章 關于品牌的二三事
10.1 無形的價值 243
10.2 腳踏實地 243
10.3 實踐出真知 252
10.4 小結 258

第三部分 他們眼中的設計師 MAGICIAN
第 1 章 產品經理有話說 260
第 2 章 設計在上開發在下 264
第 3 章 運營眼中的 UED 271
第 4 章 一個市場人的自白 274

精彩節摘

4.2操作流程簡捷
從小到大看的電視劇可以大致分為兩類，一類是某時期各臺都播，但基本只會播一遍，之后就被淡忘。第二類則是首播便吸引了不少粉絲，引發了大量的討論。之后也常常重播，每次播出都有不錯的收視率。是什么原因造成這兩類電視劇間的差距呢？是演員、畫面還是制作呢？或許和這幾個因素都有關，但最主要的還是劇情。觀眾或許一開始會被演員陣容和畫面吸引，但如果最后發現劇情不吸引人甚至不連貫不合理，越看越無趣也難免控制不住轉臺，不可能得到長期的好收視率。

產品也是一樣，視覺設計可以賦予產品迷人的外表，但實際用起來的感受和交互設計也是分不開的。如果交互設計就像編劇，交互文檔就是劇本。交互文檔展現了產品的所有功能，每個功能都由一個個單獨的畫面通過指示性的箭頭互相連接而成，這相連的方式便是操作流程。操作流程就像是劇情，但這劇情追求的恰恰與電視劇相反。電視劇追求的是懸念不斷、跌宕起伏，太平淡了就抓不住觀眾。而產品的操作流程追求的恰恰相反，流暢和平順是基本需求，用起來越輕松越抓得住用戶的心。

何為"簡捷的操作"大約不必多說，每個人在剛開始使用某個電子產品或應用的時候心里都會有一面明鏡，不依賴經驗、自然形成的感受就是最好的判斷標準。接下來我們通過一些例子來探討一下如何設計出簡捷的操作流程吧。

1. 使用自然思維而不是程序思維
作為設計師多年來都接觸著各種電子產品和應用程序，早已成為了專家級用戶。我們對很多功能和設計都已熟悉，新安裝的應用稍微研究一下便知道怎么使用。我們已有能力在面對電子世界時從容不迫，但這同時也容易讓我們覺得"理所當然"。我們理解各種頁面和層級的結構，就以為用戶也能夠理解；我們能很順暢地使用各種功能，就以為用戶也會使用。運用如此程序思維設計出的交互也許沒有大問題，但縱使再簡化的操作流程，也無法在人性化的層面上前進一小步。

最經典的例子莫過于iOS和Android系統上對于刪除應用的設計。iOS在刪除應用時只需在屏幕上長按，待圖標們開始抖動并且出現小X時，點擊要刪除的應用圖標上的X即可，圖標沒有了意味著程序不在了，與在現實世界中扔掉物品差不多。（圖1-4-3）而在Android的原生系統上，長按應用圖標只能用于添加快捷方式，像是沿襲了PC上的邏輯。要刪除應用要進入"設置"→"應用程序"→在列表中找到并點擊要刪除的程序→新打開的頁面上展示了一堆應用程序信息的頁面，終于能點"卸載"按鈕了。有不少極客覺得iOS設備過于簡單就像玩具一樣，但正是玩具一般的、孩子和老人都能無障礙使用的才是最貼近人自然思維的設計，才能真正做到簡捷好用。

類似的例子還有"進入編輯模式"。進入另一種模式其實是非常程序化的思維，自然中并沒有另一種模式這回事，有的只是直接對目標物體進行操作，所以不如就讓用戶對對象直接進行操作吧。想想Clear快速劃去一條條便簽時的暢快感，如果加上個編輯按鈕，先進入編輯模式再一一勾選要刪的便簽該是多么掃興。

2. 圍繞用戶的目的和行為來設計
………………
從上面的例子我們可以看出，當用戶的目的和行為不同時，所適合的操作流程是不同的，對"簡單快捷"的考量標準也不同。在對操作流程本身進行埋頭鉆研前，不如先從試圖理解用戶出發，設身處地來思考用戶的所想、所需，透過用戶的視線來審視和觀察、來判斷操作流程是否真的簡捷。
3. 少點一下就更方便了嗎
4. 將常用功能提前
5. 不妨遵循已經成型的用戶習慣

亞馬遜圖書購買地址：

http://www.amazon.cn/gp/product/B00HUA52T2/

【優設網 原創文章 投稿郵箱：2650232288@qq.com】
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量63萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：