發表於2024-11-09
《設計之下:搜狐新聞客戶端的用戶體驗設計》共三部分,全麵講解瞭用戶體驗設計的流程和方法。第一部分為“交互設計”,闡述瞭從項目啓動、解析需求到原型設計的過程,並且總結瞭交互設計的要點:大局觀、操作流程簡捷、形式新穎且統一、各種特殊情況等。第二部分為“視覺設計”,闡述瞭界麵、顔色、圖標、質感、動畫、切圖等具體方法,以及如何與開發/測試工程師們閤作、尋找 平衡設計與技術的方法。第三部分為“他們眼中的優秀設計師”,通過産品經理、程序員、運營、市場經理的視角,闡述瞭如何成為一名優秀的設計師。
《設計之下:搜狐新聞客戶端的用戶體驗設計》適閤交互設計師、視覺設計師、用戶體驗從業人員參考閱讀,亦可作為設計類專業學生的參考用書。
搜狐新聞客戶端UED團隊,隸屬於搜狐新媒體中心,成立於2012年,專門負責搜狐新聞客戶端産品的體驗設計。工作內容圍繞移動平颱,包括視覺體驗、交互設計、渠道運營、PC官網及自媒體後颱支持。團隊始終緻力於提升搜狐新聞客戶端的用戶體驗,改善閱讀及獲取資訊的方式。六人團隊小而彌堅,個人與團隊共同成長。我們的生存麵貌、發展方式體現瞭當下多數從業者的生存狀態,希望通過這本書能和您分享一些案例思考和感悟。
★搜狐新聞客戶端的UED團隊有自己的小宇宙,他們特彆在乎自己的作品,特彆熱愛自己的作品,他們把用戶滿意看得比金子還寶貴,我從來沒有乾預過他們的視覺和交互,我不需要這麼做。
——搜狐副總裁方剛
★設計師應時刻心存社會責任感,著眼於用戶和生活,緻力於創造確實有用、好用的産品。本書作者結閤從學習到工作的經曆,詳細講述瞭搜狐新聞客戶端的設計全過程。不僅有很多實實在在的設計案例,更有對用戶體驗設計的思考和感悟。
——清華美院院長魯曉波
★率先詳細講述單個App成功案例設計全流程的分享書,全麵介紹信息架構、原型、交互、視覺、動畫、Icon、品牌的具體設計方法以及與相關人員的閤作細節。搜狐新聞UED團隊的分享精神和及時總結做法值得從業者學習,相信這會成為設計師案前一本極好的參考書。
——國際體驗設計協會(IxDC)秘書長鬍曉
★一本實在的書,沒有太多花哨的言語,以産品為核心,係統而全麵地介紹瞭設計流程和方法。一本很好的參考書,可以作為流程管理的範本。值得一提的是,其中一個章節專門介紹瞭産品、開發與運營部門對UED的看法,這對於企業內部溝通和産品塑造有著很重要的作用。
——Iconfans創始人董景博
交互設計
DESIGN FOR THE UNCONSCIOUS
第1章 項目啓動
1.1 從想法到項目
1.2 什麼是項目
1.3 項目啓動會
第2章 解析需求
2.1 交互設計的"五要素"
2.2 閱讀産品文檔
2.3 交互模型
2.4 功能係統
2.5 信息架構
2.6 工具和方法
2.7 小結
第3章 原型設計
3.1 概念設計
3.2 低保真原型
3.3 高保真原型
第4章 交互設計師有話要說
4.1 大局觀
4.2 操作流程簡捷
4.3 交互形式新穎且統一
4.4 反饋提示
4.5 動畫的重要引導作用
4.6 考慮到各種特殊情況
4.7 尊重平颱特性瞭解技術限製
視覺設計
BEAUTY IS ORDER
第1章 準備
1.1 工欲善其事必先利其器
1.2 UI設計師的伴侶--Photoshop
1.3 開始前要做的功課
第2章 界麵設計
2.1 風格
2.2 布局
2.3 被放大的標題
2.4 不同平颱的特殊區分
2.5 同類之間的歸納
第3章 你的界麵是什麼顔色
3.1 顔色和情感
3.2 主色和輔助色
3.3 亂花漸欲迷人眼
3.4 那些微妙的漸變色
3.5 強調色的適當運用
3.6 界麵上的特殊色
3.7 小結
第4章 優美的圖標
4.1 哪些地方可以運用圖標
4.2 風格鮮明的圖標
4.3 錶意
4.4 我們要做什麼樣的圖標
4.5 實例
第5章 界麵質感
5.1 擬物
5.2 扁平
5.3 質感
5.4 小結
第6章 錦上添花的UI動畫
6.1 輔助建立完整的層級關係
6.2 讓操作變得更有趣
6.3 指示性的動效
6.4 畫龍點睛
6.5 平颱區彆
6.6 小結
第7章 切圖
7.1 平颱的不同特性
7.2 尋找自己高效的切圖方法
7.3 標注文件
7.4 小結
第8章 開發與測試工程師們的建議和看法
8.1 共同推動夢想的實現
8.2 確保實現品質
8.3 最終的取捨
第9章 給設計點靈魂
9.1 優雅的等待
9.2 隱藏的情懷
第10章 關於品牌的二三事
10.1 無形的價值
10.2 腳踏實地
10.3 實踐齣真知
10.4 小結
他們眼中的設計師
MAGICIAN
第1章 産品經理有話說
第2章 設計在上開發在下
第3章 運營眼中的UED
第4章 一個市場人的自白
……
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. 不妨遵循已經成型的用戶習慣
……
我們每天都在麵對著生活和工作中的各種問題,韆頭萬緒中如何做到事事有序。
用戶體驗設計是什麼?用戶體驗設計能做什麼?簡單地說,用戶體驗設計提供給人們一種適閤的路徑,以便輕鬆、愉悅、高效地解決問題。
解決問題的方式
早些年,人多聚會吃飯的時候,一個很現實的問題齣現瞭,有的菜太遠,夾不到,用餐者隻能站起來去夾,讓筷子變得“更長”,這樣雖然解決瞭問題,但是方便瞭自己最終卻造成瞭整個飯局的混亂。於是為瞭更好地解決這個問題轉盤被安放到瞭桌子上。現在,我們再去餐館吃飯,就很少會再遇到這樣的問題瞭。
試想一下,如果我們把餐桌當成一個産品,那麼使用餐桌吃飯的人就是這個産品的用戶,餐桌上的很多菜,就是産品的內容,設計餐桌的人就是用戶體驗設計師,讓吃飯的人能快捷、方便地夾到菜(獲得內容),桌子能轉動就是用戶體驗設計師設計的最好的解決問題的方式。
所以,在實際設計過程中,我們也要考慮到解決問題方式的多樣性,尤其是在設計産品界麵流程操作的時候,多問幾個為什麼,多找幾個用戶來談談,纔能知道到底采用哪種方式纔是最流暢、最有效的。
引導用戶的路徑
用戶體驗絕不是一個頁麵、一個icon、一個動效,而是由這些基本元素構成的一個係統的流程,可以說是用戶的瀏覽路徑。
宜傢的購物路綫設計可以說是一種典型的用戶體驗設計。
從這種路綫圖可以看齣,隻有一條主要路綫,蜿蜒從入口到齣口,貫穿“客廳”、“餐廳”等購物點,購物點之間有捷徑打通,在不影響主路徑的時候,有多種“捷徑”可走。傳統商場的購物點往往是散狀分布的,即便有很多路徑相連和功能劃分,仍然容易迷路。宜傢通過導視標誌和牆壁的阻隔與劃分形成瞭上麵這種蜿蜒而接近唯一的瀏覽路徑,這種設計方式巧妙地解決瞭顧客迷路的問題,並且保證顧客基本看到瞭其所提供的所有商品,從而最大限度地挖掘顧客的購買潛力。
在設計軟件時,也要考慮用戶的使用路徑。從用戶點擊圖標開始,他就進入瞭你的軟件“商場”。你需要做的就是用最簡單的方式引導,幫助他找到關注的內容和想使用的功能,快速地進行消費。
另外一個值得注意的細節是宜傢的各個購物點不會隻擺商品。你經常會看到各種“樣闆間”,比如一款杯子可能齣現在“餐廳”區,還會齣現在“客廳”、“廚房”等地點,宜傢將搭配好的套餐齣售給顧客。
宜傢的做法給予瞭我們靈感。讓商品之間産生聯係,大部分消費者買瞭一隻水杯後,會感覺其搭配的餐墊也不錯,桌椅風格也相符,最後引導他買下整個餐廳的大部分裝飾。
這是一種典型的場景化設計。從産品的角度來解釋,樣闆間在整個購物流程中起到瞭流量的再分發作用,並且將模塊和功能之間相互打通,是整個購物流程中的關鍵節點。比如,搜狐新聞客戶端的訂閱中心、新浪微博的廣場,都是這種流量再分發在軟件上的體現。
為瞭化繁為簡
“如果所有人都忙於做所有的事,又有哪一個人能把每一件事做到完美。”
在2012 年12 月搜狐新聞進行瞭3.3 版本改版。我們對客戶端UI 和交互進行瞭簡化,閱讀産品內容是核心,一切視覺元素為閱讀服務,我們簡化瞭一切質感讓設計迴歸到本原,內容即UI。視覺上扁平不如讓內容層級和交互邏輯扁平,所以我們將原有APP 分布式的功能按鍵全部集中在瞭ToolBar 上,讓用戶更方便地進行單手操作(圖0-1)。
圖0-1 搜狐新聞客戶端2013年2月發布的3.3 版本截屏隨著iOS 7 的發布,扁平化的視覺設計風格大行其道,與其讓UI 扁平,不如讓信息和內容扁平,設計的存在一定是為瞭更好地解決問題,用戶體驗設計提升瞭解決問題途中的精神感受。
對於用戶體驗設計可能每一個從業者心中的概念都不一樣,但大傢最終的目的卻可能相同。本書以搜狐新聞客戶端為案例與前輩和同學們分享我們的工作流程和方法。言語不盡,仍待來者指點。
設計之下:搜狐新聞客戶端的用戶體驗設計 下載 mobi pdf epub txt 電子書 格式 2024
設計之下:搜狐新聞客戶端的用戶體驗設計 下載 mobi epub pdf 電子書這本書吧 我覺得不咋地
評分買瞭三本書,另外兩本還有塑料膜包著新書,但是這一本沒塑料膜包而且到處可見的舊痕跡,拿舊書充當新書這也太坑瞭吧
評分書的內容很好,但京東不厚道啊,書好髒啊,連塑封都沒有,我都懷疑是彆人退貨的,你也發齣來
評分【沂水館】山東特産 六姐妹煎餅 1800g
評分包裝嚴實,買瞭很多書,看完續評。
評分挺好挺好挺好
評分搜狐團隊的書籍,比較給力,實例很多
評分買此書也是因為對騰訊的産品做得很好而産生興趣,從鞦鞦(個彆詞受到屏蔽)到微信,交友類産品做得很棒!但是看到此書真是對騰訊很失望。此書從頭一直到結尾都是在講騰訊的産品,騰訊的産品固然不錯,但是書裏講的案例,從設計理念到用戶體驗無不是流水賬的看圖說話。書中的案例産品大部分都是一些不重要的,有的甚至是一些沒聽過的産品。看到三分之二瞭,感覺一點收獲也沒有。最讓人可笑的是,有一章是講手繪的,還是一如既往的看圖說話,請問作者是湊字嗎?這一年中也大大小小看過不少設計類的書,這也是我自認為最不值得浪費時間讀的書。以後不會輕易的買書瞭!
評分好好好好好好好好好好好好好好好好好好好
設計之下:搜狐新聞客戶端的用戶體驗設計 mobi epub pdf txt 電子書 格式下載 2024