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

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

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

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

ISBN 978-7-121-22099-9

2014年1月出版

定價：69.00元

284頁

16開

編輯推薦

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

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

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

內(nèi)容提要

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

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

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

目錄

第一部分 交互設(shè)計  DESIGNFOR THE UNCONSCIOUS

第 1 章 項目啟動

1.1 從想法到項目5

1.2 什么是項目 5

1.3 項目啟動會 6

第 2 章 解析需求

2.1 交互設(shè)計的“五要素” 14

2.2 閱讀產(chǎn)品文檔 15

2.3 交互模型 17

2.4 功能系統(tǒng) 23

2.5 信息架構(gòu) 26

2.6 工具和方法 30

2.7 小結(jié) 31

第 3 章 原型設(shè)計

3.1 概念設(shè)計 35

3.2 低保真原型 36

3.3 高保真原型 48

第 4 章 交互設(shè)計師有話要說

4.1 大局觀 66

4.2 操作流程簡捷 68

4.3 交互形式新穎且統(tǒng)一 75

4.4 反饋提示 81

4.5 動畫的重要引導(dǎo)作用 91

4.6 考慮到各種特殊情況 100

4.7 尊重平臺特性了解技術(shù)限制 106

第二部分 視覺設(shè)計  BEAUTYIS ORDER

第 1 章 準備

1.1 工欲善其事必先利其器 113

1.2 UI設(shè)計師的伴侶——Photoshop 115

1.3 開始前要做的功課 120

第 2 章 界面設(shè)計

2.1 風格 131

2.2 布局 134

2.3 被放大的標題 134

2.4 不同平臺的特殊區(qū)分 135

2.5 同類之間的歸納 136

第 3 章 你的界面是什么顏色

3.1 顏色和情感 140

3.2 主色和輔助色 141

3.3 亂花漸欲迷人眼 142

3.4 那些微妙的漸變色 143

3.5 強調(diào)色的適當運用 145

3.6 界面上的特殊色 149

3.7 小結(jié) 151

第 4 章 優(yōu)美的圖標

4.1 哪些地方可以運用圖標 154

4.2 風格鮮明的圖標 159

4.3 表意 161

4.4 我們要做什么樣的圖標 167

4.5 實例 184

第 5 章 界面質(zhì)感

5.1 擬物 194

5.2 扁平 198

5.3 質(zhì)感 198

5.4 小結(jié) 199

第 6 章 錦上添花的 UI 動畫

6.1 輔助建立完整的層級關(guān)系 203

6.2 讓操作變得更有趣 206

6.3 指示性的動效 208

6.4 畫龍點睛 210

6.5 平臺區(qū)別 212

6.6 小結(jié) 212

第 7 章 切圖

7.1 平臺的不同特性 214

7.2 尋找自己高效的切圖方法 219

7.3 標注文件 227

7.4 小結(jié) 228

第 8 章 開發(fā)與測試工程師們的建議和看法

8.1 共同推動夢想的實現(xiàn) 230

8.2 確保實現(xiàn)品質(zhì) 232

8.3 最終的取舍 233

第 9 章 給設(shè)計點靈魂

9.1 優(yōu)雅的等待 236

9.2 隱藏的情懷 239

第 10 章 關(guān)于品牌的二三事

10.1 無形的價值 243

10.2 腳踏實地 243

10.3 實踐出真知 252

10.4 小結(jié) 258

第三部分 他們眼中的設(shè)計師  MAGICIAN

第 1 章 產(chǎn)品經(jīng)理有話說260

第 2 章 設(shè)計在上開發(fā)在下264

第 3 章 運營眼中的 UED271

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

精彩節(jié)摘

4.2操作流程簡捷

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

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

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

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

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

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

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

2. 圍繞用戶的目的和行為來設(shè)計

………………

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

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

4. 將常用功能提前

5. 不妨遵循已經(jīng)成型的用戶習慣

作者簡介

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

媒體評論

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

——搜狐副總裁  方剛

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

——清華美院院長  魯曉波

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

——Iconfans創(chuàng)始人 董景博

前言

編者序

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

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

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

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

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

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

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

——設(shè)計師董翔鶴

前言

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

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

解決問題的方式

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

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

所以，在實際設(shè)計過程中，我們也要考慮到解決問題方式的多樣性，尤其是在設(shè)計產(chǎn)品界面流程操作的時候，多問幾個為什么，多找?guī)讉€用戶來談?wù)劊拍苤赖降撞捎媚姆N方式才是最流暢、最有效的。

引導(dǎo)用戶的路徑

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

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

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

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

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

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

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

為了化繁為簡

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

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

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

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