設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍

優(yōu)秀設(shè)計(jì)師是如何煉成的?第一本講述單個(gè)App成功案例設(shè)計(jì)全流程的分享書,來自搜狐新聞客戶端UED團(tuán)隊(duì),看搜狐如何做設(shè)計(jì)。

全面介紹國(guó)內(nèi)一線互聯(lián)網(wǎng)公司中,UED團(tuán)隊(duì)在需求、設(shè)計(jì)、開發(fā)、測(cè)試、推廣各個(gè)階段中的工作內(nèi)容和方式,包括信息架構(gòu)、原型、交互、視覺、動(dòng)畫、Icon、品牌等全流程,以及與相關(guān)人員的合作細(xì)節(jié)。內(nèi)容真摯樸實(shí),值得品讀!

設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍

亞馬遜圖書購(gòu)買地址:

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

推薦理由:

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

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

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

設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍

專家評(píng)論

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

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

第一本詳細(xì)講述單個(gè)App成功案例設(shè)計(jì)全流程的分享書,全面介紹信息架構(gòu)、原型、交互、視覺、動(dòng)畫、Icon、品牌的具體設(shè)計(jì)方法以及與相關(guān)人員的合作細(xì)節(jié)。搜狐新聞UED團(tuán)隊(duì)的分享精神和及時(shí)總結(jié)做法值得從業(yè)者學(xué)習(xí),相信這會(huì)成為設(shè)計(jì)師案前一本極好的參考書。
——國(guó)際體驗(yàn)設(shè)計(jì)協(xié)會(huì)(IXDC)秘書長(zhǎng) 胡曉

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

設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍

作者簡(jiǎn)介

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

設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍

設(shè)計(jì)背后的故事——作者專訪

1、 你們是一個(gè)怎樣的團(tuán)隊(duì)?
答(包巳硯):搜狐新聞客戶端UED團(tuán)隊(duì)是一個(gè)活力的大家庭。
活力——每一個(gè)團(tuán)隊(duì)成員都是熱愛生活、熱愛設(shè)計(jì)的好少年。對(duì)待生活和設(shè)計(jì)總是精力充沛,對(duì)待用戶體驗(yàn)和互聯(lián)網(wǎng)行業(yè)充滿了癡癡的信仰和追求。
大家庭——我們無話不說,好像從來沒有生過各自的氣。即使有了不同的想法,大家都會(huì)直接說出來,商量怎么解決問題。也從不會(huì)吝嗇分享自己對(duì)生活和工作的新發(fā)現(xiàn),例如看見一篇好文章或一個(gè)好作品,總是第一時(shí)間就轉(zhuǎn)發(fā)給大家。每次過年過節(jié)后,從家鄉(xiāng)回到工作崗位時(shí),互相分享特產(chǎn)是十分歡樂的時(shí)刻,大家總是對(duì)我?guī)淼暮.a(chǎn)品贊不絕口。

2、 你們是怎樣想到要寫一本書的?這本書最初的初衷是什么?
答(顧盼):我在團(tuán)隊(duì)負(fù)責(zé)招聘的初步甄選工作,每天都可以收到很多簡(jiǎn)歷和作品集。其中不乏應(yīng)屆生和初學(xué)者,他們大多對(duì)用戶體驗(yàn)十分有熱情,也很有自己的見解。可是,體現(xiàn)在作品上的卻往往忽略了一些用戶體驗(yàn)的本質(zhì),也不是企業(yè)所需要的。比如擁有十分精湛的寫實(shí)圖標(biāo)能力,卻忽視了界面設(shè)計(jì)的訓(xùn)練,對(duì)布局、顏色、架構(gòu)這些基本的設(shè)計(jì)要素也缺乏關(guān)注。
高校教學(xué)和企業(yè)實(shí)際工作的對(duì)接一直困惑各個(gè)學(xué)科。作為企業(yè),有責(zé)任為行業(yè)新人搭建橋梁和平臺(tái)。那我想最直接的做法便是樸素地說一說我們平時(shí)在工作中是怎么做設(shè)計(jì)的,工作流程是怎么樣的,細(xì)節(jié)要達(dá)到什么程度,和其他同事又是怎么合作的。

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

4、 你對(duì)這個(gè)行業(yè)有沒有什么感想和大家分享一下?
答(包巳硯):用戶體驗(yàn)設(shè)計(jì)是一個(gè)正在逐漸被大家熟悉和重視的領(lǐng)域。它不像市場(chǎng)或渠道等創(chuàng)造的價(jià)值是即時(shí)可見的,而是潛移默化地提升產(chǎn)品并影響人們生活的方式。當(dāng)技術(shù)越來越普及,用戶體驗(yàn)的價(jià)值便會(huì)越來越大。正在從事或準(zhǔn)備從事的用戶體驗(yàn)的朋友應(yīng)該堅(jiān)持自己所信仰的事業(yè),同時(shí)提高自己的設(shè)計(jì)能力。正確理解用戶體驗(yàn)的本質(zhì)——表面看我們是在繪制界面、圖標(biāo)、插畫,是在設(shè)計(jì)架構(gòu)、操作、動(dòng)效,實(shí)際我們需要關(guān)注的領(lǐng)域很多。在實(shí)踐的過程中勤于思考,提高自己的設(shè)計(jì)能力,爭(zhēng)取為自己所服務(wù)的產(chǎn)品、公司、社會(huì)創(chuàng)造更大的價(jià)值。

5、 寫作是吃苦不討好的事,你寫作中最大的動(dòng)力是什么?寫作中能夠獲得什么?
答(董翔鶴):第一本講述單個(gè)移動(dòng)App設(shè)計(jì)全過程的書籍,也第一本介紹國(guó)內(nèi)一線UED團(tuán)隊(duì)工作方式的書籍,最大的動(dòng)力就是把這些"秘密"分享給大家。寫這本書的目的并不是告訴大家我們的工作方式和流程是好的或者對(duì)的,而是想拿出來一起交流,以探討更好的或是更適合自己團(tuán)隊(duì)的做法。互聯(lián)網(wǎng)行業(yè)發(fā)展的很快,用戶體驗(yàn)領(lǐng)域還很新,所以共同推動(dòng)它的發(fā)展是我們每一個(gè)從業(yè)者的義務(wù)。

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

7、 你們認(rèn)為自己寫的這本書有哪些優(yōu)點(diǎn)和缺點(diǎn)?
答(曹雨初):全面介紹了國(guó)內(nèi)一線互聯(lián)網(wǎng)公司中,UED團(tuán)隊(duì)在需求、設(shè)計(jì)、開發(fā)、測(cè)試、推廣各個(gè)階段中的工作內(nèi)容、流程和方式,以及與相關(guān)人員的合作細(xì)節(jié)。這就像一部工作的紀(jì)錄片,語(yǔ)言十分樸實(shí),通俗易懂。即使僅僅是對(duì)互聯(lián)網(wǎng)公司大樓每日燈火通明感到好奇的人,也能從中找到些許答案。
不過在完成這本書籍后,我們發(fā)現(xiàn)在寫作的時(shí)候想說的很多,也經(jīng)常處在埋頭疾書的狀態(tài)。所以忽視了文章的整體架構(gòu),在內(nèi)容的輕重緩急上還可以再斟酌。

8、 對(duì)讀者說點(diǎn)什么吧?或者最希望通過這本書讀者能收獲些什么?
答(董翔鶴):希望通過本書,大家可以對(duì)互聯(lián)網(wǎng)行業(yè)和用戶體驗(yàn)工作有更全面的了解。用戶體驗(yàn)并不"高深",但想要做好也不容易。它是一個(gè)交叉性很強(qiáng)的學(xué)科,需要關(guān)注的方面很多。 希望熱愛用戶體驗(yàn)的朋友,堅(jiān)持自己的事業(yè)。用戶體驗(yàn)群體并不"孤單",正有越來越多的人參與,在社會(huì)和企業(yè)中也發(fā)揮著越來越大的作用,并確實(shí)為生活的方方面面帶來更多的便捷。
移動(dòng)互聯(lián)網(wǎng)行業(yè)發(fā)展的很快,產(chǎn)品日新月異,搜狐新聞客戶端和我們UED團(tuán)隊(duì)也在不斷的進(jìn)步中。關(guān)注"搜狐新聞客戶端UED"的媒體,"追蹤"我們的最新動(dòng)態(tài)。

設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍

內(nèi)容提要

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

編者序

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

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

設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍

前言

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

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

試想一下,如果我們把餐桌當(dāng)成一個(gè)產(chǎn)品,那么使用餐桌吃飯的人就是這個(gè)產(chǎn)品的用戶,餐桌上的很多菜,就是產(chǎn)品的內(nèi)容,設(shè)計(jì)餐桌的人就是用戶體驗(yàn)設(shè)計(jì)師,讓吃飯的人能快捷、方便地夾到菜(獲得內(nèi)容),桌子能轉(zhuǎn)動(dòng)就是用戶體驗(yàn)設(shè)計(jì)師設(shè)計(jì)的最好的解決問題的方式。
所以,在實(shí)際設(shè)計(jì)過程中,我們也要考慮到解決問題方式的多樣性,尤其是在設(shè)計(jì)產(chǎn)品界面流程操作的時(shí)候,多問幾個(gè)為什么,多找?guī)讉€(gè)用戶來談?wù)劊拍苤赖降撞捎媚姆N方式才是最流暢、最有效的。

引導(dǎo)用戶的路徑
用戶體驗(yàn)絕不是一個(gè)頁(yè)面、一個(gè) icon、一個(gè)動(dòng)效,而是由這些基本元素構(gòu)成的一個(gè)系統(tǒng)的流程,可以說是用戶的瀏覽路徑。
宜家的購(gòu)物路線設(shè)計(jì)可以說是一種典型的用戶體驗(yàn)設(shè)計(jì)。

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

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

另外一個(gè)值得注意的細(xì)節(jié)是宜家的各個(gè)購(gòu)物點(diǎn)不會(huì)只擺商品。你經(jīng)常會(huì)看到各種"樣板間",比如一款杯子可能出現(xiàn)在"餐廳"區(qū),還會(huì)出現(xiàn)在"客廳"、"廚房"等地點(diǎn),宜家將搭配好的套餐出售給顧客。
宜家的做法給予了我們靈感。讓商品之間產(chǎn)生聯(lián)系,大部分消費(fèi)者買了一只水杯后,會(huì)感覺其搭配的餐墊也不錯(cuò),桌椅風(fēng)格也相符,最后引導(dǎo)他買下整個(gè)餐廳的大部分裝飾。

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

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

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

設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍

目錄

第一部分 交互設(shè)計(jì) DESIGN FOR THE UNCONSCIOUS
第 1 章 項(xiàng)目啟動(dòng)
1.1 從想法到項(xiàng)目5
1.2 什么是項(xiàng)目 5
1.3 項(xiàng)目啟動(dòng)會(huì) 6

第 2 章 解析需求
2.1 交互設(shè)計(jì)的"五要素" 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è)計(jì)
3.1 概念設(shè)計(jì) 35
3.2 低保真原型 36
3.3 高保真原型 48

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

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

第 2 章 界面設(shè)計(jì)
2.1 風(fēng)格 131
2.2 布局 134
2.3 被放大的標(biāo)題 134
2.4 不同平臺(tái)的特殊區(qū)分 135
2.5 同類之間的歸納 136

第 3 章 你的界面是什么顏色
3.1 顏色和情感 140
3.2 主色和輔助色 141
3.3 亂花漸欲迷人眼 142
3.4 那些微妙的漸變色 143
3.5 強(qiáng)調(diào)色的適當(dāng)運(yùn)用 145
3.6 界面上的特殊色 149
3.7 小結(jié) 151

第 4 章 優(yōu)美的圖標(biāo)
4.1 哪些地方可以運(yùn)用圖標(biāo) 154
4.2 風(fēng)格鮮明的圖標(biāo) 159
4.3 表意 161
4.4 我們要做什么樣的圖標(biāo) 167
4.5 實(shí)例 184

第 5 章 界面質(zhì)感
5.1 擬物 194
5.2 扁平 198
5.3 質(zhì)感 198
5.4 小結(jié) 199

第 6 章 錦上添花的 UI 動(dòng)畫
6.1 輔助建立完整的層級(jí)關(guān)系 203
6.2 讓操作變得更有趣 206
6.3 指示性的動(dòng)效 208
6.4 畫龍點(diǎn)睛 210
6.5 平臺(tái)區(qū)別 212
6.6 小結(jié) 212

第 7 章 切圖
7.1 平臺(tái)的不同特性 214
7.2 尋找自己高效的切圖方法 219
7.3 標(biāo)注文件 227
7.4 小結(jié) 228

第 8 章 開發(fā)與測(cè)試工程師們的建議和看法
8.1 共同推動(dòng)夢(mèng)想的實(shí)現(xiàn) 230
8.2 確保實(shí)現(xiàn)品質(zhì) 232
8.3 最終的取舍 233

第 9 章 給設(shè)計(jì)點(diǎn)靈魂
9.1 優(yōu)雅的等待 236
9.2 隱藏的情懷 239

第 10 章 關(guān)于品牌的二三事
10.1 無形的價(jià)值 243
10.2 腳踏實(shí)地 243
10.3 實(shí)踐出真知 252
10.4 小結(jié) 258

第三部分 他們眼中的設(shè)計(jì)師 MAGICIAN
第 1 章 產(chǎn)品經(jīng)理有話說 260
第 2 章 設(shè)計(jì)在上開發(fā)在下 264
第 3 章 運(yùn)營(yíng)眼中的 UED 271
第 4 章 一個(gè)市場(chǎng)人的自白 274

精彩節(jié)摘

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

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

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

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

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

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

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

亞馬遜圖書購(gòu)買地址:

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

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

設(shè)計(jì)之下!第一本講述移動(dòng)App設(shè)計(jì)全過程的書籍
 

收藏 7
點(diǎn)贊

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。