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

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

《設計之下——搜狐新聞客戶端的用戶體驗設計(全彩)》是2014年1月出版的圖書,作者是搜狐新聞客戶端UED團隊。

基本介紹

  • 書名:設計之下——搜狐新聞客戶端的用戶體驗設計(全彩)
  • 作者:搜狐新聞客戶端UED團隊
  • ISBN:978-7-121-22099-9
  • 頁數:284頁
  • 定價:69.00元
  • 出版時間:2014年1月出版
  • 開本:16開
圖書信息,內容簡介,編輯推薦,目錄,精彩節摘,作者簡介,媒體評論,前言,

圖書信息

書名:設計之下——搜狐新聞客戶端的用戶體驗設計(全彩)
宣傳語:以真實工作場景講互動設計、視覺設計流程與方法,及設計師要懂的產品、開發、運營、市場,解決設計師遇到的問題/京東:實述互動設計視覺設計流程與方法設計師必備

內容簡介

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

編輯推薦

1、《設計之下》以產品為核心,系統全面地介紹了設計流程和方法。寫在書中的是搜狐新聞客戶端UED團隊一線經驗的總結,不僅有很多實實在在的案例,更有對用戶體驗設計的思考和感悟,以及設計人員與產品、開發、運營及市場人員溝通的方法和技巧。
2、《設計之下》由2012蘋果年度最佳套用《中國古典家具》設計師董翔鶴帶領搜狐新聞客戶端UED團隊精心打造,其工作內容圍繞移動平台,包括視覺體驗、互動設計、渠道運營、PC官網及自媒體後台支持。他們的生存面貌、發展方式體現了當下多數從業者的生存狀態,所以《設計之下》對設計師有很高的參考價值。
3、好的設計簡單地說就是又要好看又要好用,《設計之下》沒有花哨的語言,華麗的外衣,只是將實實在在的流程與方法裸裎給大家,點滴匯聚,與前輩、後來者分享。

目錄

第一部分 互動設計 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設備過於簡單就像玩具一樣,但正是玩具一般的、孩子和老人都能無障礙使用的才是最貼近人自然思維的設計,才能真正做到簡捷好用。(圖1-4-4)
類似的例子還有“進入編輯模式”。進入另一種模式其實是非常程式化的思維,自然中並沒有另一種模式這回事,有的只是直接對目標物體進行操作,所以不如就讓用戶對對象直接進行操作吧。想想Clear快速划去一條條便簽時的暢快感,如果加上個編輯按鈕,先進入編輯模式再一一勾選要刪的便簽該是多么掃興。(圖1-4-5)
2. 圍繞用戶的目的和行為來設計
………………
從上面的例子我們可以看出,當用戶的目的和行為不同時,所適合的操作流程是不同的,對“簡單快捷”的考量標準也不同。在對操作流程本身進行埋頭鑽研前,不如先從試圖理解用戶出發,設身處地來思考用戶的所想、所需,透過用戶的視線來審視和觀察、來判斷操作流程是否真的簡捷。
3. 少點一下就更方便了嗎
4. 將常用功能提前
5. 不妨遵循已經成型的用戶習慣

作者簡介

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

媒體評論

搜狐新聞客戶端的UED團隊有自己的小宇宙,他們特別在乎自己的作品,特別熱愛自己的作品,他們把用戶滿意看得比金子還寶貴,我從來沒有干預過他們的視覺和互動,我不需要這么做。
——搜狐副總裁 方剛
設計師應時刻心存社會責任感,著眼於用戶和生活,致力於創造確實有用、好用的產品。本書作者結合從學習到工作的經歷,詳細講述了搜狐新聞客戶端的設計全過程。不僅有很多實實在在的設計案例,更有對用戶體驗設計的思考和感悟。
——清華美院院長 魯曉波
一本實在的書,沒有太多花哨的言語,是以產品為核心,系統全面介紹其設計流程和方法的書籍。你可以把它當做參考書,也可以作為流程管理的範本。裡面介紹了產品設計過程中運用了哪些方法、技巧,有很好的學習借鑑作用。另外值得一提的是,書中將產品,開發以及運營對UED部門的看法也專門拿出很大的比重來寫。這對於團隊溝通和產品塑造有著很重要的作用。
——Iconfans創始人 董景博

前言

編者序
形而上者謂之道,形而下者謂之器。匠者,器也。處身平凡的匠人不斷追求向上的設計之道。我們是搜狐普通的設計師,想和大家分享一些心得體會。謹以我們的流程和方法獻給有志投身用戶體驗設計的同學們。
入行多年,投身搜狐新聞團隊也已兩年有餘。與業界同儕相比,仍是新晉後輩。寫在書中的是一線設計團隊的集體經驗和設計師個人的些許感受。點滴匯集,與前輩、後來者分享。言語不盡,仍待來者指點。
《莊子 ·山木》篇講到:“弟子問於莊子曰:‘昨日山中之木以不材得終其天年,今主人之雁以不材死,先生將何處?’莊子笑曰:‘周將處乎材與不材之間。’”
作寓言讀,可以從多方面得到啟示。出於職業習慣,我從中悟出一點個人關於 UX設計的一些感受,可能就如莊周所言,處乎材與不材之間。
全書在編寫的過程中,我們的團隊始終僅有五人。書籍耗盡了團隊成員幾乎全部的業餘時間。過程中,我們經歷了人員變動,有過意見相左、有過彷徨悱惻。但最終對於設計的熱愛使我們堅持下來,使這本書得以面世。
感謝搜狐新聞客戶端負責人岳建雄。
感謝主編成員:顧盼,鄧敏,曹雨初,包巳硯,有他們才有這本書;感謝參與編輯的同學:李艷,馬寧,劉廷奇,陶宇;實習生:王麗婷,劉春強,王子倩,歐陽磊。感謝內容運營中心總監繆貝穎,市場部總監張璞,服務端產品經理孫小雷, iOS開發組長叢雲旦加入的文字讓成書更加豐滿。感謝知友“農民駱逸”,我們引用了您在知乎的文字對 “設計之下”進行了解讀。感謝搜狐新聞客戶端團隊所有的成員。
——設計師董翔鶴
前言
我們每天都在面對著生活和工作中的各種問題,千頭萬緒中如何做到事事有序。
用戶體驗設計是什麼?用戶體驗設計能做什麼?簡單地說,用戶體驗設計提供給人們一種適合的路徑,以便輕鬆、愉悅、高效地解決問題。
解決問題的方式
早些年,人多聚會吃飯的時候,一個很現實的問題出現了,有的菜太遠,夾不到,用餐者只能站起來去夾,讓筷子變得“更長”,這樣雖然解決了問題,但是方便了自己最終卻造成了整個飯局的混亂。於是為了更好地解決這個問題轉盤被安放到了桌子上。現在,我們再去餐館吃飯,就很少會再遇到這樣的問題了。
試想一下,如果我們把餐桌當成一個產品,那么使用餐桌吃飯的人就是這個產品的用戶,餐桌上的很多菜,就是產品的內容,設計餐桌的人就是用戶體驗設計師,讓吃飯的人能快捷、方便地夾到菜(獲得內容),桌子能轉動就是用戶體驗設計師設計的最好的解決問題的方式。
所以,在實際設計過程中,我們也要考慮到解決問題方式的多樣性,尤其是在設計產品界面流程操作的時候,多問幾個為什麼,多找幾個用戶來談談,才能知道到底採用哪種方式才是最流暢、最有效的。
引導用戶的路徑
用戶體驗絕不是一個頁面、一個 icon、一個動效,而是由這些基本元素構成的一個系統的流程,可以說是用戶的瀏覽路徑。
宜家的購物路線設計可以說是一種典型的用戶體驗設計。
從這種路線圖可以看出,只有一條主要路線,蜿蜒從入口到出口,貫穿“客廳”、“餐廳”等購物點,購物點之間有捷徑打通,在不影響主路徑的時候,有多種“捷徑”可走。傳統商場的購物點往往是散狀分布的,即便有很多路徑相連和功能劃分,仍然容易迷路。宜家通過導視標誌和牆壁的阻隔與劃分形成了上面這種蜿蜒而接近唯一的瀏覽路徑,這種設計方式巧妙地解決了顧客迷路的問題,並且保證顧客基本看到了其所提供的所有商品,從而最大限度地挖掘顧客的購買潛力。
在設計軟體時,也要考慮用戶的使用路徑。從用戶點擊圖示開始,他就進入了你的軟體“商場”。你需要做的就是用最簡單的方式引導,幫助他找到關注的內容和想使用的功能,快速地進行消費。
另外一個值得注意的細節是宜家的各個購物點不會只擺商品。你經常會看到各種“樣板間”,比如一款杯子可能出現在“餐廳”區,還會出現在“客廳”、“廚房”等地點,宜家將搭配好的套餐出售給顧客。
宜家的做法給予了我們靈感。讓商品之間產生聯繫,大部分消費者買了一隻水杯後,會感覺其搭配的餐墊也不錯,桌椅風格也相符,最後引導他買下整個餐廳的大部分裝飾。
這是一種典型的場景化設計。從產品的角度來解釋,樣板間在整個購物流程中起到了流量的再分發作用,並且將模組和功能之間相互打通,是整個購物流程中的關鍵節點。比如,搜狐新聞客戶端的訂閱中心、新浪微博的廣場,都是這種流量再分發在軟體上的體現。
為了化繁為簡
“如果所有人都忙於做所有的事,又有哪一個人能把每一件事做到完美。”
在 2012年 12月搜狐新聞進行了 3.3版本改版。我們對客戶端 UI和互動進行了簡化,閱讀產品內容是核心,一切視覺元素為閱讀服務,我們簡化了一切質感讓設計回歸到本原,內容即 UI。視覺上扁平不如讓內容層級和互動邏輯扁平,所以我們將原有 APP分散式的功能按鍵全部集中在了 ToolBar上,讓用戶更方便地進行單手操作(圖 0-1)。
隨著 iOS 7的發布,扁平化的視覺設計風格大行其道,與其讓 UI扁平,不如讓信息和內容扁平,設計的存在一定是為了更好地解決問題,用戶體驗設計提升了解決問題途中的精神感受。
對於用戶體驗設計可能每一個從業者心中的概念都不一樣,但大家最終的目的卻可能相同。本書以搜狐新聞客戶端為案例與前輩和同學們分享我們的工作流程和方法。言語不盡,仍待來者指點。

相關詞條

熱門詞條

聯絡我們