設計之下——搜狐新聞客戶端的用戶體驗設計（全彩）

設計之下——搜狐新聞客戶端的用戶體驗設計（全彩）

宣傳語：以真實工作場景講交互設計、視覺設計流程與方法，及設計師要懂的產品、開發、運營、市場，解決設計師遇到的問題

搜狐新聞客戶端UED團隊 編著  

ISBN 978-7-121-22099-9

2014年1月出版

定價：69.00元

284頁

16開

編輯推薦

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

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

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

內容提要

形而上者謂之道，形而下者謂之器。匠者，器也。處身平凡的匠人不斷追求向上的設計之道。本書沒有華麗的辭藻和長篇大論的理論，作者是搜狐一線的設計團隊，寫作過程中他們盡力還原真實的工作場景，并總結出了一些實用的經驗和方法。

《設計之下》共三部分，全面講解了用戶體驗設計的流程和方法。第一部分為“交互設計”，闡述了從項目啟動、解析需求到原型設計的過程，并且總結了交互設計的要點：大局觀、操作流程簡捷、形式新穎且統一、各種特殊情況等。第二部分為“視覺設計”，闡述了界面、顏色、圖標、質感、動畫、切圖等具體方法，以及如何與開發/測試工程師們合作、尋找平衡設計與技術的方法。第三部分為“他們眼中的優秀設計師”，通過產品經理、程序員、運營、市場經理的視角，闡述了如何成為一名優秀的設計師。

《設計之下》適合交互設計師、視覺設計師、用戶體驗從業人員參考閱讀，亦可作為設計類專業學生的參考用書。

目錄

第一部分 交互設計  DESIGNFOR 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

第二部分 視覺設計  BEAUTYIS 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 章 運營眼中的 UED271

第 4 章 一個市場人的自白274

精彩節摘

4.2操作流程簡捷

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

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

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

1. 使用自然思維而不是程序思維

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

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

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

2. 圍繞用戶的目的和行為來設計

………………

從上面的例子我們可以看出，當用戶的目的和行為不同時，所適合的操作流程是不同的，對“簡單快捷”的考量標準也不同。在對操作流程本身進行埋頭鉆研前，不如先從試圖理解用戶出發，設身處地來思考用戶的所想、所需，透過用戶的視線來審視和觀察、來判斷操作流程是否真的簡捷。

3. 少點一下就更方便了嗎

4. 將常用功能提前

5. 不妨遵循已經成型的用戶習慣

作者簡介

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

媒體評論

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

——搜狐副總裁  方剛

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

——清華美院院長  魯曉波

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

——Iconfans創始人 董景博

前言

編者序

形而上者謂之道，形而下者謂之器。匠者，器也。處身平凡的匠人不斷追求向上的設計之道。我們是搜狐普通的設計師，想和大家分享一些心得體會。謹以我們的流程和方法獻給有志投身用戶體驗設計的同學們。

入行多年，投身搜狐新聞團隊也已兩年有余。與業界同儕相比，仍是新晉后輩。寫在書中的是一線設計團隊的集體經驗和設計師個人的些許感受。點滴匯集，與前輩、后來者分享。言語不盡，仍待來者指點。

《莊子·山木》篇講到：“弟子問于莊子曰：‘昨日山中之木以不材得終其天年，今主人之雁以不材死，先生將何處？’莊子笑曰：‘周將處乎材與不材之間?！?/p>

作寓言讀，可以從多方面得到啟示。出于職業習慣，我從中悟出一點個人關于 UX設計的一些感受，可能就如莊周所言，處乎材與不材之間。

全書在編寫的過程中，我們的團隊始終僅有五人。書籍耗盡了團隊成員幾乎全部的業余時間。過程中，我們經歷了人員變動，有過意見相左、有過彷徨悱惻。但最終對于設計的熱愛使我們堅持下來，使這本書得以面世。

感謝搜狐新聞客戶端負責人岳建雄。

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

——設計師董翔鶴

前言

我們每天都在面對著生活和工作中的各種問題，千頭萬緒中如何做到事事有序。

用戶體驗設計是什么？用戶體驗設計能做什么？簡單地說，用戶體驗設計提供給人們一種適合的路徑，以便輕松、愉悅、高效地解決問題。

解決問題的方式

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

試想一下，如果我們把餐桌當成一個產品，那么使用餐桌吃飯的人就是這個產品的用戶，餐桌上的很多菜，就是產品的內容，設計餐桌的人就是用戶體驗設計師，讓吃飯的人能快捷、方便地夾到菜（獲得內容），桌子能轉動就是用戶體驗設計師設計的最好的解決問題的方式。

所以，在實際設計過程中，我們也要考慮到解決問題方式的多樣性，尤其是在設計產品界面流程操作的時候，多問幾個為什么，多找幾個用戶來談談，才能知道到底采用哪種方式才是最流暢、最有效的。

引導用戶的路徑

用戶體驗絕不是一個頁面、一個 icon、一個動效，而是由這些基本元素構成的一個系統的流程，可以說是用戶的瀏覽路徑。

宜家的購物路線設計可以說是一種典型的用戶體驗設計。

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

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

另外一個值得注意的細節是宜家的各個購物點不會只擺商品。你經常會看到各種“樣板間”，比如一款杯子可能出現在“餐廳”區，還會出現在“客廳”、“廚房”等地點，宜家將搭配好的套餐出售給顧客。

宜家的做法給予了我們靈感。讓商品之間產生聯系，大部分消費者買了一只水杯后，會感覺其搭配的餐墊也不錯，桌椅風格也相符，最后引導他買下整個餐廳的大部分裝飾。

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

為了化繁為簡

“如果所有人都忙于做所有的事，又有哪一個人能把每一件事做到完美?！?/p>

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

隨著 iOS 7的發布，扁平化的視覺設計風格大行其道，與其讓UI扁平，不如讓信息和內容扁平，設計的存在一定是為了更好地解決問題，用戶體驗設計提升了解決問題途中的精神感受。

對于用戶體驗設計可能每一個從業者心中的概念都不一樣，但大家最終的目的卻可能相同。本書以搜狐新聞客戶端為案例與前輩和同學們分享我們的工作流程和方法。言語不盡，仍待來者指點。