本書(shū)講了什么

本書(shū)共三部分，全面講解了用戶(hù)體驗(yàn)設(shè)計(jì)的流程和方法。

作者什么來(lái)頭

搜狐新聞客戶(hù)端UED團(tuán)隊(duì)适贸，隸屬于搜狐新媒體中心，成立于2012年涝桅，專(zhuān)門(mén)負(fù)責(zé)搜狐新聞客戶(hù)端產(chǎn)品的體驗(yàn)設(shè)計(jì)拜姿，包括視覺(jué)體驗(yàn)、交互設(shè)計(jì)冯遂、渠道運(yùn)營(yíng)砾隅、PC官網(wǎng)及自媒體后臺(tái)支持。

交互設(shè)計(jì)

項(xiàng)目前期债蜜，交互設(shè)計(jì)師會(huì)參與到以產(chǎn)品經(jīng)理為主導(dǎo)的產(chǎn)品設(shè)計(jì)中晴埂，討論哪個(gè)想法是值得設(shè)計(jì)成產(chǎn)品的，并在項(xiàng)目啟動(dòng)前后提出對(duì)產(chǎn)品文檔的觀(guān)點(diǎn)寻定。在項(xiàng)目確立后儒洛，交互設(shè)計(jì)會(huì)重點(diǎn)完成交互階段得設(shè)計(jì)：解析需求和設(shè)計(jì)原型，產(chǎn)品文檔中的文字在這一步狼速，第一次變?yōu)榭梢?jiàn)的模樣琅锻。

第1章 項(xiàng)目啟動(dòng)

什么是項(xiàng)目

做一個(gè)產(chǎn)品本身沒(méi)有期限，我們不知道它什么時(shí)候會(huì)完結(jié)向胡，由需求而生的產(chǎn)品必然隨著市場(chǎng)的發(fā)展恼蓬、生活的改變和公司的決策做出相應(yīng)轉(zhuǎn)型。所以前期挖掘出的需求有著一定時(shí)限僵芹，使得我們要建立特定項(xiàng)目去完成处硬。設(shè)計(jì)產(chǎn)品是一個(gè)不斷研究和創(chuàng)新的過(guò)程，而項(xiàng)目是一個(gè)事情拇派，完成了即完結(jié)了荷辕。

第2章 解析需求

交互設(shè)計(jì)的五要素

交互設(shè)計(jì)的核心元素必須在設(shè)計(jì)結(jié)果中有所體現(xiàn)或得到改變骡显。例如設(shè)計(jì)一個(gè)杯子险污，目的本身并不是設(shè)計(jì)的結(jié)果之一动壤；而交互設(shè)計(jì)則不同，目的是設(shè)計(jì)內(nèi)容的一部分檬输，要求達(dá)到一定的效果笑旺，體現(xiàn)在用戶(hù)一系列行為的每一個(gè)步驟里筒主。具體的說(shuō)，設(shè)計(jì)師要告訴別人怎么去做這件事鸟蟹，清晰的程序是怎樣的乌妙。

交互模型

交互模型源于人機(jī)交互的概念，繪制交互模型不是目的建钥，而是把它作為一個(gè)得力的開(kāi)篇工具藤韵。交互模型是依據(jù)需求文檔，為這次項(xiàng)目繪制一副可以體現(xiàn)并很好的串聯(lián)起交互設(shè)計(jì)五要素的圖表熊经，表現(xiàn)產(chǎn)品外在的生態(tài)系統(tǒng)泽艘，以及體現(xiàn)產(chǎn)品內(nèi)部功能間的信息和交互方式的信息架構(gòu)。

上文提到的五個(gè)交互設(shè)計(jì)要素造一個(gè)簡(jiǎn)單的基礎(chǔ)句镐依，這個(gè)格式可以用在任何一個(gè)項(xiàng)目匹涮，任何一個(gè)功能中。人/通過(guò)工具/完成動(dòng)作/達(dá)到目的/在環(huán)境里槐壳。

將搜狐新聞的“閱讀圈”和這五要素對(duì)應(yīng)填充然低，即用戶(hù)/通過(guò)搜狐新聞客戶(hù)端/進(jìn)行操作/達(dá)到獲取消息的目的/在所有可能使用移動(dòng)設(shè)備的各種場(chǎng)景中。

具體分析一下“閱讀圈”里的每個(gè)元素。

1.用戶(hù)（人）雳攘。在閱讀圈中带兜，用戶(hù)包含了用戶(hù)本人，好友和潛在好友吨灭。閱讀圈意在使用戶(hù)集中閱讀好友分享的內(nèi)容鞋真，因?yàn)閬?lái)自好友的內(nèi)容更可能是他感興趣的。由于信息在閱讀圈中式UGC的沃于，關(guān)注好友的數(shù)量和質(zhì)量決定了內(nèi)容的數(shù)量和質(zhì)量。那么精準(zhǔn)的發(fā)掘潛在好友海诲，并吸引用戶(hù)關(guān)注就是關(guān)鍵繁莹。

2.閱讀圈（工具）。閱讀圈的本質(zhì)是內(nèi)容的集合特幔，具體說(shuō)是一個(gè)帶有社交屬性的UGC咨演。所以除內(nèi)容外，分享人的信息（頭像蚯斯、姓名和性別）和觀(guān)點(diǎn)薄风，他人的評(píng)論同樣重要。再加上寫(xiě)評(píng)論拍嵌、分享等功能遭赂，便組成了閱讀圈。閱讀圈各個(gè)元素之間的布局和交互横辆，以及閱讀圈和其他產(chǎn)品模塊（個(gè)人中心撇他、消息、分享界面等）的信息流動(dòng)狈蚤，便是我們后面需要著重研究的困肩。

3.操作（動(dòng)作）。對(duì)智能手機(jī)斷的應(yīng)用脆侮，操作主要分為硬件锌畸、軟件兩大類(lèi)。對(duì)硬件的動(dòng)作靖避，著重考慮手機(jī)的特性和功能的結(jié)合是否合理和巧妙潭枣，不要為了使用硬件而使用。對(duì)軟件的動(dòng)作筋蓖，主要考慮：符合平臺(tái)和產(chǎn)品的設(shè)計(jì)規(guī)范（Apple卸耘、Android和Windows

Phone等平臺(tái)會(huì)在其官方開(kāi)發(fā)網(wǎng)站公布UI規(guī)范，要留意平臺(tái)之間的區(qū)別）每個(gè)產(chǎn)品也有自己的設(shè)置規(guī)范粘咖，統(tǒng)一的界面跳轉(zhuǎn)規(guī)則和過(guò)渡公話(huà)蚣抗、提示和引導(dǎo)的方式等；產(chǎn)品要有大局觀(guān)，對(duì)整體的框架有把握翰铡，沒(méi)有信息流通的障礙钝域；交互細(xì)節(jié)合理，考慮全面锭魔。

4.目的例证。在設(shè)計(jì)中，銘記閱讀圈的核心設(shè)計(jì)目的是：通過(guò)好友分享迷捧，構(gòu)成自己獨(dú)一無(wú)二的閱讀圈织咧，從而獲得感興趣的內(nèi)容。時(shí)刻檢驗(yàn)自由這么做有沒(méi)有達(dá)到我期望漠秋。仔細(xì)考慮每一處設(shè)計(jì)笙蒙，從整體的架構(gòu)到交互的細(xì)節(jié)，有沒(méi)有滿(mǎn)足用戶(hù)的目的以及過(guò)程是否符合用戶(hù)期待庆锦。

5.環(huán)境捅位。從兩方面考慮環(huán)境：限制和優(yōu)勢(shì)。移動(dòng)端應(yīng)用的用戶(hù)所處環(huán)境沒(méi)有電腦端用戶(hù)穩(wěn)定搂抒，有時(shí)在走動(dòng)艇搀，有時(shí)受天氣影響不便操作。我們需要更多的發(fā)掘手機(jī)的特性求晶，為一些原本較為精準(zhǔn)的操作提供其他的選擇焰雕，比如：評(píng)論新聞一定要用文字嗎？手機(jī)端用戶(hù)往往是一種短閱讀狀態(tài)誉帅，獲取的信息和反饋都是碎片化的淀散，所以通過(guò)發(fā)送語(yǔ)音和圖片來(lái)表達(dá)觀(guān)點(diǎn)和抒發(fā)感情也是一種不錯(cuò)的選擇。（左右滑動(dòng)界面切換上下篇蚜锨，比點(diǎn)擊按鈕的容錯(cuò)率高很多档插，更適合在走動(dòng)中操作）

功能系統(tǒng)

在這一步我們依然可以從用戶(hù)這個(gè)因素開(kāi)始思考，交互模型部分我們提到好友的數(shù)量和質(zhì)量是保持用戶(hù)對(duì)閱讀圈粘性的關(guān)鍵亚再。都有哪些途徑能獲得好友呢郭膛？

1.通過(guò)客戶(hù)端中的新聞評(píng)論相識(shí)

2.通過(guò)其他社交網(wǎng)站引入好友關(guān)系

3.系統(tǒng)推薦（分析閱讀習(xí)慣）

4.朋友的朋友

接下來(lái)就要思考這四種增加好友的途徑，應(yīng)該如何在客戶(hù)端中實(shí)現(xiàn)氛悬。從兩方面思考：閱讀圈和其他功能模塊之間的聯(lián)系则剃，以及閱讀圈自身的信息流。前者是我們?cè)诠δ芟到y(tǒng)這個(gè)環(huán)節(jié)需要完成的如捅，而后者則是下一步信息架構(gòu)時(shí)的任務(wù)棍现。

通過(guò)之前的分析我們知道：對(duì)整個(gè)閱讀圈體系來(lái)說(shuō)，增加好友是個(gè)十分重要的需求镜遣。所以不論是繪制功能系統(tǒng)還是信息架構(gòu)和原型己肮，遇到增加好友相關(guān)功能時(shí)，應(yīng)力求步驟簡(jiǎn)練，操作自然谎僻，作為重點(diǎn)給予突出娄柳。它會(huì)體現(xiàn)在交互的流程、界面的布局等各方面艘绍，是后面各個(gè)設(shè)計(jì)步驟的準(zhǔn)則赤拒。對(duì)于產(chǎn)品文檔中的其他功能，我們也可以通過(guò)類(lèi)似思考诱鞠，得出每個(gè)功能的設(shè)計(jì)要點(diǎn)挎挖。

通過(guò)分析，看我們知道了這些和增加好友相關(guān)的小功能點(diǎn)是此次項(xiàng)目的重點(diǎn)航夺，因此在布局和設(shè)計(jì)流程時(shí)便有了輕重之分肋乍，而不是簡(jiǎn)單的憑感覺(jué)在設(shè)計(jì)。

信息架構(gòu)

信息架構(gòu)誕生于數(shù)據(jù)庫(kù)設(shè)計(jì)領(lǐng)域敷存，信息架構(gòu)的主體對(duì)象是信息，通過(guò)設(shè)計(jì)結(jié)構(gòu)堪伍、決定組織方式及歸類(lèi)锚烦，以達(dá)到讓使用者容易找到與管理的目的。簡(jiǎn)單地說(shuō)就是帝雇，給予合理的組織方式來(lái)展現(xiàn)信息涮俄，是信息直觀(guān)表達(dá)的載體。

搭建合理的架構(gòu)尸闸，讓信息順暢流通彻亲，這是交互設(shè)計(jì)師必備技能之一。信息的流通可以體現(xiàn)在用戶(hù)完成一個(gè)任務(wù)時(shí)所經(jīng)歷的步驟吮廉，是否和他預(yù)期的相同苞尝。而任務(wù)也有輕重之分，例如在瀏覽搜狐新聞客戶(hù)端時(shí)宦芦，看新聞相關(guān)的行為是我們幾乎每天都會(huì)做的宙址，從展現(xiàn)和交互上都要設(shè)計(jì)的一目了然。而字體大小等操作调卑，用戶(hù)可能自始至終只會(huì)操作一次抡砂，所以按照基礎(chǔ)結(jié)構(gòu)布置在設(shè)置中即可。

信息架構(gòu)要注意：

1.做信息架構(gòu)時(shí)恬涧，用戶(hù)體驗(yàn)的設(shè)計(jì)原則依然是交互設(shè)計(jì)師應(yīng)該優(yōu)先考慮的注益。以用戶(hù)為中心，通過(guò)拆分用戶(hù)的行為溯捆，力求為他們?cè)O(shè)計(jì)最簡(jiǎn)潔的操作步驟丑搔。

2.工作中應(yīng)多和前端、后臺(tái)的工程師溝通，以確保設(shè)計(jì)出來(lái)的產(chǎn)品架構(gòu)和交互方式不會(huì)帶來(lái)不必要的技術(shù)負(fù)擔(dān)低匙。

3.從產(chǎn)品策略和延展性的角度考慮旷痕，以便于未來(lái)延展。

交互模型關(guān)注的是用戶(hù)與產(chǎn)品的關(guān)系顽冶，功能系統(tǒng)側(cè)重的是產(chǎn)品內(nèi)部各個(gè)模塊之間的結(jié)構(gòu)欺抗。信息結(jié)構(gòu)的重點(diǎn)是梳理信息流動(dòng)的過(guò)程。對(duì)于搜狐新聞客戶(hù)端這個(gè)基于信息强重、內(nèi)容產(chǎn)品而言尤為重要绞呈，它是繪制原型前的最后一步，也是把行為真正落實(shí)到功能繪制上的重要一步间景。

第3章 原型設(shè)計(jì)

概念設(shè)計(jì)

概念設(shè)計(jì)用來(lái)傳達(dá)內(nèi)容佃声，是最初的解決方案；低保真原型可以具體到信息的布局和傳遞倘要，從框架細(xì)化到內(nèi)容圾亏；高保真原型則基本可以達(dá)到產(chǎn)品上線(xiàn)后的效果，此時(shí)交互設(shè)計(jì)師需要對(duì)每一個(gè)細(xì)節(jié)負(fù)責(zé)封拧。

概念設(shè)計(jì)即Concept志鹃，它是Idea的載體，設(shè)計(jì)師的能力體現(xiàn)在想法和執(zhí)行上泽西，當(dāng)我們想出一個(gè)好的點(diǎn)子曹铃，也應(yīng)通過(guò)概念把它呈現(xiàn)出來(lái)。無(wú)論做什么設(shè)計(jì)捧杉，都應(yīng)培養(yǎng)視覺(jué)化思維—當(dāng)有一個(gè)好點(diǎn)子時(shí)陕见，直接畫(huà)出對(duì)應(yīng)的示意圖，而不是用文字記錄味抖。

概念可以表達(dá)清楚點(diǎn)子即可评甜，對(duì)于一個(gè)需求，盡量發(fā)散思維仔涩，設(shè)計(jì)盡量多的方案蜕着，召集其他設(shè)計(jì)師一同探討這些方案。建議使用白板红柱，從主到次承匣，從大到小，邊畫(huà)邊說(shuō)出概念锤悄。雖然看起來(lái)多一步韧骗，但繪制概念畢竟比低保真原型成本低很多。

低保真原型

原型包含：

1．每一個(gè)界面的布局零聚，以及解釋該布局的文案袍暴。（框架圖）

2．每一個(gè)控件的操作方式些侍。如果這個(gè)操作涉及界面跳轉(zhuǎn)，那么便連接到下一個(gè)界面政模。（流程圖）

3．在不同情況下岗宣，界面發(fā)生的局部變化。例如淋样，彈框或提示語(yǔ)耗式。（局部描述）

交互文檔面面觀(guān)

看起來(lái)很單調(diào)。交互文檔應(yīng)該是黑白的趁猴，以線(xiàn)框?yàn)橹鬏o以一些灰度色塊刊咳，在非常需要的時(shí)候才可添加少量顏色。不需要色彩的原因是儡司，最后實(shí)際視覺(jué)效果和交互文檔中的可能毫無(wú)關(guān)聯(lián)娱挨，反而交互文檔中不必要的視覺(jué)細(xì)節(jié)會(huì)讓觀(guān)看的人不自覺(jué)的從視覺(jué)的層面進(jìn)行思考。這樣會(huì)給觀(guān)看的人增加額外的認(rèn)知負(fù)擔(dān)捕犬，更糟糕的是可能在評(píng)審的時(shí)候引出節(jié)外生枝的討論跷坝。

內(nèi)容很復(fù)雜。文檔應(yīng)該有個(gè)封面碉碉，上面有標(biāo)題探孝、版本號(hào)、各環(huán)節(jié)的直接負(fù)責(zé)人誉裆、更新記錄和日期等信息。封面不僅能讓文檔看起來(lái)更規(guī)范缸濒、更專(zhuān)業(yè)足丢，還能讓閱讀者一開(kāi)始就對(duì)文檔有初步了解，方便工作交接庇配。

交互文檔中斩跌，說(shuō)明文字通過(guò)箭頭或線(xiàn)段指向具體的對(duì)象，交互細(xì)節(jié)都需要用文字輔助說(shuō)明捞慌。畫(huà)面之間的跳轉(zhuǎn)關(guān)系離不開(kāi)箭頭和文字的幫助耀鸦，詳細(xì)而準(zhǔn)確的說(shuō)明文字和跳轉(zhuǎn)箭頭都能幫助視覺(jué)設(shè)計(jì)師和開(kāi)發(fā)人員對(duì)你的交互設(shè)計(jì)有統(tǒng)一的理解。

添加注釋文字時(shí)注意盡量簡(jiǎn)明扼要啸澡，大段文字會(huì)讓人失去閱讀欲望袖订。如必須較多文字才能說(shuō)清楚時(shí)，應(yīng)注意分成一個(gè)個(gè)條目并適當(dāng)空行嗅虏，這樣能讓文字看起來(lái)更清爽有條理洛姑。

元素很統(tǒng)一。文檔要簡(jiǎn)潔規(guī)范皮服，每頁(yè)應(yīng)盡量一樣大楞艾，有時(shí)設(shè)計(jì)師想把相關(guān)聯(lián)的線(xiàn)框圖都放在一個(gè)頁(yè)面中参咙，覺(jué)得這樣更直觀(guān)。而實(shí)際上一頁(yè)能展現(xiàn)的內(nèi)容是有限的硫眯，如果在同一頁(yè)中堆太多線(xiàn)框就會(huì)擠壓說(shuō)明文字空間蕴侧，以后再要添加或修改內(nèi)容會(huì)非常困難。擁擠的畫(huà)面也增加了閱讀的理解難度两入，所以為了保持文檔的已讀性净宵，多分出幾個(gè)頁(yè)面是非常有必要的。

文檔中有各式各樣的說(shuō)明谆刨，有的是對(duì)整個(gè)頁(yè)面的整體邏輯說(shuō)明塘娶，有的是對(duì)某個(gè)元素的說(shuō)明，這些說(shuō)明都應(yīng)該有相對(duì)固定的位置痊夭，比如整體說(shuō)明在頁(yè)面頂端刁岸，單個(gè)元素的說(shuō)明在右側(cè)。如果用心合理的安排這些說(shuō)明的位置她我，自己和閱讀者都能慢慢形成習(xí)慣虹曙，那么撰寫(xiě)和閱讀的效率都會(huì)提高。

對(duì)交互設(shè)計(jì)師來(lái)說(shuō)番舆，80%的時(shí)間都用于思考和確認(rèn)酝碳，只有20%的時(shí)間是在寫(xiě)文檔的，而文檔卻是那80%時(shí)間成果的載體恨狈。只有讓文檔更謹(jǐn)慎疏哗、細(xì)致才能讓閱讀者更好的理解你的想法和思考，避免因誤解產(chǎn)生疑問(wèn)禾怠。

布局/結(jié)構(gòu)

每個(gè)界面所要承載的內(nèi)容都要在交互設(shè)計(jì)階段考慮清楚：頁(yè)面要放哪些功能按鈕返奉、按鈕以圖形的形式還是文字鏈接的形式，要在哪里加說(shuō)明文字吗氏、文字內(nèi)容是什么芽偏，對(duì)于展現(xiàn)內(nèi)容較多的頁(yè)面是不是需要整理分割為幾個(gè)區(qū)塊等。好的線(xiàn)框圖不一定漂亮弦讽，但一定應(yīng)細(xì)致污尉。

位置/順序

頁(yè)面上各個(gè)板塊按照不同的位置進(jìn)行排列，對(duì)用戶(hù)的引導(dǎo)作用是不同的往产。設(shè)計(jì)時(shí)把希望用戶(hù)先注意到的內(nèi)容放在比較明顯的位置被碗，把相互關(guān)聯(lián)的內(nèi)容放在相鄰的順序上，才能有效的展現(xiàn)內(nèi)容仿村，引導(dǎo)用戶(hù)按照你的期望去使用產(chǎn)品蛮放。

層次/輕重

一個(gè)頁(yè)面中包含很多元素，需要按重要性和不同功能來(lái)組織這些元素才能讓頁(yè)面不散亂奠宜。應(yīng)有弱化有突出包颁，讓用戶(hù)不會(huì)對(duì)該點(diǎn)擊哪里產(chǎn)生疑惑瞻想。

第4章 交互設(shè)計(jì)師有話(huà)要說(shuō)

大局觀(guān)

在項(xiàng)目過(guò)程中，設(shè)計(jì)師要主動(dòng)了解各部門(mén)的想法和立場(chǎng)娩嚼，充分理解和消化需求蘑险，才能有機(jī)會(huì)再限制中做出平衡而美麗的設(shè)計(jì)。在撰寫(xiě)交互文檔的時(shí)候岳悟，也要時(shí)刻站在整個(gè)產(chǎn)品的角度來(lái)進(jìn)行設(shè)計(jì)佃迄，注意保持交互性是和視覺(jué)形式的統(tǒng)一。

操作流程簡(jiǎn)潔

使用自然思維而不是程序思維贵少。

圍繞用戶(hù)的目的和行為來(lái)設(shè)計(jì)

著手設(shè)計(jì)操作流程之前先要理解用戶(hù)的目的和行為呵俏，他們想做什么，想先做什么后做什么滔灶，以及是否會(huì)在同一時(shí)間做多件事普碎，抱著不同的目的和心態(tài)，適合的操作流程可能會(huì)有很大差異录平。在對(duì)操作流程本身進(jìn)行埋頭鉆研前不如先從理解用戶(hù)出發(fā)麻车，設(shè)身處地來(lái)思考用戶(hù)的所想、所需斗这，透過(guò)用戶(hù)的視線(xiàn)來(lái)審查和觀(guān)察动猬、來(lái)判斷操作流程是否真的簡(jiǎn)潔。

少點(diǎn)一下就方便了嗎

按點(diǎn)擊次數(shù)評(píng)價(jià)操作的簡(jiǎn)便程度并不是完善的比較方式表箭，具體還要看用戶(hù)是不費(fèi)腦筋的點(diǎn)了兩下還是深思熟慮后點(diǎn)了一下赁咙。比如一次給出商品的詳細(xì)分類(lèi)，雖然用戶(hù)點(diǎn)擊一次就可以免钻，但需要認(rèn)真閱讀和思考每個(gè)分類(lèi)后才能點(diǎn)下去彼水。雖然先給一個(gè)大分類(lèi)，再給細(xì)節(jié)分類(lèi)會(huì)讓用戶(hù)在找商品時(shí)多點(diǎn)擊幾次伯襟，但需要的思考卻少很多，感覺(jué)上也應(yīng)更加輕松握童。

將常用功能提前

對(duì)于擁有列表性頁(yè)面的應(yīng)用來(lái)說(shuō)姆怪，通常列表還有更深的層級(jí)，即詳情頁(yè)澡绩。列表也是一條條的概況稽揭，而詳情頁(yè)是可以承載更多的內(nèi)容可操作。但有時(shí)我們?cè)诹斜眄?yè)就可以決定我們接下來(lái)要進(jìn)行的操作了肥卡，此時(shí)如果列表頁(yè)上就有相應(yīng)的操作按鈕溪掀，就不需要進(jìn)入詳情頁(yè)，路程就會(huì)變得簡(jiǎn)化步鉴。

反饋的形式

氣泡狀提示揪胃。通常是短暫出現(xiàn)在畫(huà)面上的璃哟，就像氣泡一樣過(guò)一會(huì)兒就會(huì)自己消失，這種提示通常用于告知任務(wù)狀態(tài)和操作結(jié)果喊递，不適合承載太多文字或重要信息随闪。

彈出框。于確認(rèn)和取消重要的操作骚勘。算是對(duì)用戶(hù)打擾最大的一種提示铐伴。通常用戶(hù)都想趕快關(guān)掉彈出框以便接著進(jìn)行操作，所以彈出框上的說(shuō)明和按鈕上的文字最好言簡(jiǎn)意賅俏讹、一目了然当宴，。

按鈕/圖標(biāo)/鏈接的按下?tīng)顟B(tài)泽疆。當(dāng)用戶(hù)在屏幕上按下一個(gè)按鈕或鏈接時(shí)户矢，它們需要有狀態(tài)的改變，例如變得扁平或底色改變于微，讓用戶(hù)看到他的操作已經(jīng)被界面接收到了逗嫡。

聲音。由于用戶(hù)所處的環(huán)境多種多樣株依，可能很吵或不適合打開(kāi)聲音驱证，因此不能講聲音作為主要反饋，而且一定要給用戶(hù)關(guān)掉提示音的權(quán)利恋腕。

振動(dòng)抹锄。振動(dòng)是一種比較強(qiáng)烈的觸覺(jué)反饋，可以用來(lái)代替或加強(qiáng)聲音提示荠藤。

動(dòng)畫(huà)伙单。幫助用戶(hù)直觀(guān)的了解到操作的結(jié)果。

反饋的內(nèi)容

信息哈肖；

警告吻育；

錯(cuò)誤；

確認(rèn)淤井。

反饋出現(xiàn)的位置

狀態(tài)欄布疼；

導(dǎo)航欄；

內(nèi)容區(qū)上方币狠；

屏幕中心游两；

菜單欄上方；

底部（覆蓋菜單欄）漩绵。

反饋的設(shè)計(jì)原則

為用戶(hù)在各個(gè)階段的操作提供必要贱案、積極、及時(shí)的反饋止吐。避免過(guò)度反饋宝踪，以免給用戶(hù)帶來(lái)不必要的打擾侨糟。能夠及時(shí)看到效果的、簡(jiǎn)單的操作可以省略反饋提示肴沫。所提供的反饋要能讓用戶(hù)用最便捷的方式完成選擇粟害。為不同類(lèi)型的反饋?zhàn)霾町惢O(shè)計(jì)。不要打斷用戶(hù)的意識(shí)流颤芬，避免遮擋用戶(hù)可能回去查看或操作的對(duì)象悲幅。

動(dòng)畫(huà)的重要引導(dǎo)作用

1.頁(yè)面層級(jí)結(jié)構(gòu)引導(dǎo)

2.手勢(shì)操作引導(dǎo)

3.狀態(tài)提示

4.隱藏功能提示

反饋?zhàn)饔?/b>

邊界反饋。在iOS系統(tǒng)中站蝠，當(dāng)滑動(dòng)到頁(yè)面頂端或底端時(shí)汰具，會(huì)有回彈的動(dòng)畫(huà)效果。

過(guò)程反饋菱魔。一些具有持續(xù)性的操作過(guò)程中留荔，動(dòng)畫(huà)效果可以幫助用戶(hù)清晰地了解目前所處的狀態(tài)，還能讓等待過(guò)程變得有趣起來(lái)

結(jié)果反饋澜倦。在登錄頁(yè)面中聚蝶，都一定會(huì)考慮用戶(hù)輸入信息錯(cuò)誤的反饋提示，最常見(jiàn)的做法是用顏色和文字來(lái)提示藻治。

考慮到各種特殊情況

無(wú)網(wǎng)絡(luò)碘勉；

空白頁(yè)面；

超量的內(nèi)容顯示桩卵；

失斞槊摇；

加載中雏节；

重復(fù)操作胜嗓；

輸入錯(cuò)誤；

分辨率影響钩乍。

尊重平臺(tái)特性了解技術(shù)限制

技術(shù)限制很大一部分與平臺(tái)的特性是密不可分的辞州。每個(gè)平臺(tái)都有自己的特點(diǎn)和性格，就像Android和iOS兩個(gè)平臺(tái)在物理按鍵寥粹、控件規(guī)范和手勢(shì)操作上都有一定的差異变过，可以通過(guò)查閱平臺(tái)規(guī)范文檔或者試用產(chǎn)品來(lái)了解。將完全相同的設(shè)計(jì)復(fù)制粘貼在不同平臺(tái)上可能會(huì)在某些時(shí)候有悖于系統(tǒng)培養(yǎng)的用戶(hù)習(xí)慣排作，也可能會(huì)因?yàn)榧夹g(shù)特點(diǎn)的不同導(dǎo)致開(kāi)發(fā)過(guò)程中耗費(fèi)過(guò)多精力甚至最終實(shí)現(xiàn)效果與理想相差甚遠(yuǎn)牵啦。

第二部分視覺(jué)設(shè)計(jì)BEAUTY IS ORDER

第1章 準(zhǔn)備

工欲善其事必先利其器

組內(nèi)使用一致的版本的軟件亚情；

使用高版本時(shí)考慮到低版本的配置妄痪；

使用工具時(shí)有合理并一致的命名規(guī)范。

開(kāi)始前要做的功課

了解產(chǎn)品意圖楞件。

設(shè)計(jì)的重點(diǎn)是什么衫生。

產(chǎn)品經(jīng)理說(shuō)藍(lán)色就是藍(lán)色嗎裳瘪。

產(chǎn)品的氣質(zhì)是什么。

了解平臺(tái)特性罪针。

分辨率彭羹。

與平臺(tái)分隔差異融合。

競(jìng)品分析和優(yōu)秀案例思考泪酱。

理解UE派殷。

快速開(kāi)始。

第2章 界面設(shè)計(jì)

風(fēng)格

界面風(fēng)格就好比一個(gè)界面的靈魂一樣墓阀，看到一整套UI作品毡惜，一般人會(huì)有一個(gè)整體印象，這個(gè)印象斯撮，其實(shí)也正是界面風(fēng)格的體現(xiàn)经伙。不同的產(chǎn)品訴求，有時(shí)候決定了界面的風(fēng)格勿锅。

擬物化設(shè)計(jì)從字面上比較好理解帕膜，就是對(duì)現(xiàn)實(shí)生活中的一些物品進(jìn)行模擬再設(shè)計(jì)，包括質(zhì)感上的和布局上的等溢十。扁平化設(shè)計(jì)一詞所指的是拋棄那些已經(jīng)流行多年的漸變垮刹、陰影、高光等擬真視覺(jué)效果茶宵，從而打造出一種看上去更“平”的界面危纫。

布局

很多時(shí)候，布局也是要靠UI來(lái)完善的乌庶，UE做的時(shí)候可以和UI商量种蝶，如果這樣布局UI的體現(xiàn)是否合理，UI做的時(shí)候也可以和UE商量瞒大，在不影響體驗(yàn)和產(chǎn)品需求的情況下改變模塊的位置會(huì)不會(huì)更好螃征。

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

軟件的主色決定軟件整個(gè)風(fēng)格，這個(gè)主色不會(huì)占大面積透敌，往往作為title bar,即軟件頭部來(lái)顯示盯滚，或者頁(yè)面主要元素顏色顯示，其他則作為輔助顏色來(lái)搭配酗电。

顏色和情感

紅色代表愛(ài)情和危險(xiǎn)魄藕，同時(shí)也是速度的體現(xiàn)。而藍(lán)色給人更多的信任撵术、放松背率、撫慰和冷靜睿智。像白灰黑會(huì)引發(fā)孤獨(dú)、愚鈍和典雅感寝姿，有時(shí)白色會(huì)顯得包容交排，黑色也會(huì)顯得潮流。

主色和輔助色

主色顧名思義是這款軟件使用面積最大的色彩饵筑，是掌握整個(gè)畫(huà)面色彩氣氛的主要因素埃篓，輔色則在界面中所占的面積較小，起強(qiáng)調(diào)或緩沖調(diào)和的作用根资。

那些微妙的漸變色

有些純扁平化的界面設(shè)計(jì)是幾乎沒(méi)有漸變色的架专，像Win8這種設(shè)計(jì)風(fēng)格，幾乎都是純色塊的拼接玄帕。不過(guò)很多的界面設(shè)計(jì)胶征，在趨向于扁平化這種設(shè)計(jì)風(fēng)格的同時(shí)，色彩上運(yùn)用一點(diǎn)點(diǎn)微妙的漸變桨仿，就像香水在前調(diào)后還能讓人感受到中調(diào)和后調(diào)一樣增加界面品質(zhì)睛低。

強(qiáng)調(diào)色的適當(dāng)運(yùn)用

一張白紙，如果點(diǎn)了一滴墨水在中間暈染開(kāi)服傍，你把這張紙拿給任何人看钱雷，問(wèn)他看到了什么，筆者想大多的回答是吹零，“中間的那一滴黑色”罩抗。從界面色彩來(lái)說(shuō)，這一滴墨可以說(shuō)是整個(gè)紙張里面的強(qiáng)調(diào)色灿椅，讓人無(wú)法忽視套蒂。

界面里往往很多提示，不可忽略的信息茫蛹，都愛(ài)做強(qiáng)調(diào)色處理米间。同時(shí)也讓用戶(hù)操作的時(shí)候豪椿，更加便捷地找到自己所需。強(qiáng)調(diào)色的作用：

新的提醒。如iPhone界面右上角的提示數(shù)字晓淀。

強(qiáng)調(diào)狂塘。搜狐新聞客戶(hù)端訂閱中心頁(yè)面党窜，會(huì)發(fā)現(xiàn)沒(méi)有訂閱的刊物后面都跟著一個(gè)紅色的加號(hào)搏予，相反已經(jīng)訂閱的則是一個(gè)灰色的勾，這樣的對(duì)比粉捻，首先會(huì)讓用戶(hù)對(duì)已訂閱和未訂閱的刊物有明確感知礁遣，。

積極的反饋—表達(dá) 正在進(jìn)行的行為狀態(tài)肩刃。現(xiàn)在今日直播和預(yù)告里祟霍，每項(xiàng)直播后面都會(huì)有一個(gè)鈴擋狀態(tài)的按鈕押搪，當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，會(huì)彈出Toast提示浅碾，告知你這項(xiàng)直播預(yù)定成功，同時(shí)续语，按鈕變紅垂谢。在表達(dá)重要的行為狀態(tài)時(shí)，會(huì)采用強(qiáng)調(diào)色疮茄，同時(shí)也是在潛在告知用戶(hù)“你已經(jīng)預(yù)定提醒了”滥朱。強(qiáng)調(diào)色告訴你做的事情所產(chǎn)生的結(jié)果。

界面上的特殊色

界面上的顏色至關(guān)重要力试，它們存在的意義就是改變我們對(duì)一款軟件最直接的感受徙邻，甚至能起到不可磨滅的作用。界面的色彩要達(dá)到舒服和耐看畸裳，尤其是對(duì)一些重視閱讀的軟件缰犁，一般來(lái)說(shuō)就更不能用差異化過(guò)大的色彩搭配了。色彩不宜過(guò)多怖糊，否則容易讓用戶(hù)造成視覺(jué)上的疲勞帅容，最終降低用戶(hù)體驗(yàn)度。只有適當(dāng)適度運(yùn)用美妙的色彩伍伤，才能在第一時(shí)間抓住用戶(hù)眼球的同時(shí)并徘，讓他更想也更有精力深入的了解你的產(chǎn)品。

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

哪些地方可以運(yùn)用圖標(biāo)

直觀(guān)的視覺(jué)標(biāo)示扰魂；

對(duì)信息的補(bǔ)充和強(qiáng)調(diào)麦乞；

對(duì)信息的直接表達(dá)；

不同平臺(tái)選擇性使用圖標(biāo)劝评。

能明確表達(dá)信息時(shí)姐直，我們可以只用圖標(biāo)來(lái)表示，僅用文字雖然可以說(shuō)明信息蒋畜，但是可以對(duì)查看信息做更明確快速地反應(yīng)時(shí)简肴，文字和圖標(biāo)相結(jié)合也是不錯(cuò)的用法“俨啵考慮到界面排布合理性砰识，僅是補(bǔ)充說(shuō)明的圖標(biāo)，且不會(huì)對(duì)文字信息起到非常明確地補(bǔ)充強(qiáng)調(diào)表達(dá)作用時(shí)佣渴，僅用文字信息也是不錯(cuò)的選擇辫狼。

風(fēng)格鮮明的圖標(biāo)

質(zhì)感和用色。

造型和結(jié)構(gòu)辛润。

表意

相同意思的圖標(biāo)膨处，我們也可以看出不同的表達(dá)方式，比如“設(shè)置”，我們經(jīng)常會(huì)看到用一個(gè)齒輪形狀來(lái)表達(dá)真椿，也可以看到用一個(gè)扳手和螺絲刀組合起來(lái)的形式來(lái)表示鹃答。不管怎樣風(fēng)格的表達(dá)方式，都要保證這和你想要營(yíng)造的個(gè)性風(fēng)格是一致的突硝。

我們要做什么樣的圖標(biāo)

為了一見(jiàn)鐘情测摔。一個(gè)應(yīng)用能否在第一時(shí)間具有吸引用戶(hù)的魅力，得到用戶(hù)的信任解恰，是尤其重要的锋八。

單色圖形還是多色搭配。多數(shù)軟件的界面上的功能性圖標(biāo)都采用單色系护盈，但不排除一些為了突出的標(biāo)示性的圖標(biāo)挟纱，比如微博或朋友圈等，這些都采用了多色搭配腐宋，來(lái)進(jìn)行區(qū)分紊服。

圖標(biāo)的統(tǒng)一性。不管選用什么樣風(fēng)格的圖標(biāo)胸竞，在你的界面上围苫，這些圖標(biāo)擺在一起要有一致性。

明確的表達(dá)含義撤师。界面設(shè)計(jì)上的圖標(biāo)剂府，最根本的原則是要做到表意明確，因?yàn)榻缑鎁I最終是為內(nèi)容服務(wù)的剃盾。

物理大小和視覺(jué)大小腺占。當(dāng)圖標(biāo)的物理數(shù)值一致時(shí)，看看將他們都放在一起痒谴，是否從視覺(jué)上也是一致的衰伯。

變化的圖標(biāo)。點(diǎn)擊后發(fā)生變化的圖標(biāo)积蔚，都能明確向用戶(hù)進(jìn)行有效反饋意鲸，告知用戶(hù)“你正在做什么”、“你應(yīng)該做什么”尽爆、“你已經(jīng)做了什么”怎顾。

隱喻。隱喻的圖標(biāo)設(shè)計(jì)帶有內(nèi)容預(yù)覽的作用漱贱，當(dāng)你看到一個(gè)圖標(biāo)，就要明白他所代表的含義幅狮。

第5章 界面質(zhì)感

擬物募强、扁平株灸、質(zhì)感。界面上的質(zhì)感是一個(gè)錦上添花的事情擎值，它有時(shí)并不影響整體使用慌烧，但是質(zhì)感用的適當(dāng)，加的舒服鸠儿，會(huì)營(yíng)造更好的使用環(huán)境屹蚊，給用戶(hù)帶來(lái)更優(yōu)質(zhì)的使用。在設(shè)計(jì)趨勢(shì)不斷變化中捆交，對(duì)于界面的質(zhì)感取舍也在不同的更新?lián)Q代。質(zhì)感和你所追求的設(shè)計(jì)風(fēng)格是相輔相成的腐巢，極致簡(jiǎn)約的UI設(shè)計(jì)品追，基本上界面的質(zhì)感也不會(huì)有過(guò)多的表現(xiàn)，相反現(xiàn)今蘋(píng)果設(shè)計(jì)的各種玻璃質(zhì)感和重陰影冯丙，也是對(duì)走擬物化這種設(shè)計(jì)風(fēng)格的恰當(dāng)連釋肉瓦。

第6章 錦上添花的UI動(dòng)畫(huà)

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

讓操作變得更有趣

指示性的動(dòng)效

畫(huà)龍點(diǎn)睛（引導(dǎo)動(dòng)畫(huà)）

結(jié)合平臺(tái)特性

客戶(hù)端主要應(yīng)用了漸隱、滑動(dòng)胃惜、變形泞莉、拉伸等動(dòng)畫(huà)特效，有的地方是單純用其中一種船殉，有的則是一起出現(xiàn)的鲫趁，這些動(dòng)效的組合，使客戶(hù)端顯得更加生動(dòng)利虫，有血有肉有靈魂挨厚，而不是一個(gè)平淡無(wú)趣的機(jī)器，它更像一個(gè)平時(shí)生活不可少的伙伴糠惫。

第7章 切圖

切圖標(biāo)注的過(guò)程是設(shè)計(jì)完成的重要一步疫剃，不可忽視，因?yàn)樵O(shè)計(jì)得再好硼讽，都有可能在最后由于切圖這一步的問(wèn)題巢价，導(dǎo)致最終實(shí)現(xiàn)的效果和設(shè)計(jì)圖相差很大，如果設(shè)計(jì)是90分固阁，作為設(shè)計(jì)師會(huì)盡量讓軟件還原到80分以上壤躲。

切圖標(biāo)注時(shí)應(yīng)和程序員進(jìn)行有效溝通，避免資源浪費(fèi)备燃。從命名規(guī)范上柒爵、輸出資源大小的把控上，從實(shí)現(xiàn)效果預(yù)估從而在切圖時(shí)盡量規(guī)避做出正確切圖上赚爵，這些細(xì)節(jié)如果做好都會(huì)大大降低程序員的實(shí)現(xiàn)難度棉胀，提高最終實(shí)現(xiàn)出來(lái)的整體效果法瑟。

第8章 開(kāi)發(fā)與測(cè)試工程師們的建議和看法（略）

第9章 給設(shè)計(jì)點(diǎn)靈魂

GUI設(shè)計(jì)為了更好地服務(wù)內(nèi)容和用戶(hù)，同時(shí)我們也在思考在設(shè)計(jì)之外是否可以給產(chǎn)品更多驚喜唁奢、更多值得玩味的細(xì)節(jié)霎挟。

優(yōu)雅的等待

和所有應(yīng)用一樣，程序的啟動(dòng)需要一個(gè)短暫的時(shí)間才能進(jìn)入到主界面中麻掸。這個(gè)在程序啟動(dòng)過(guò)程中被用戶(hù)所看到的過(guò)渡頁(yè)面(或動(dòng)畫(huà))我們統(tǒng)稱(chēng)為啟動(dòng)頁(yè)酥夭。啟動(dòng)頁(yè)持續(xù)的時(shí)間大約有2~3秒鐘。這個(gè)時(shí)間雖然不算很短脊奋，但是對(duì)于匆忙啟動(dòng)或是急于使用的時(shí)候就會(huì)顯得有些漫長(zhǎng)了熬北。并且這段等待的心情也絕對(duì)能夠影響用戶(hù)的體驗(yàn)。

隱藏的情懷

很多隱藏的小細(xì)節(jié)中飽含了設(shè)計(jì)師們對(duì)一些事物的敬意诚隙。早期有一份叫做《名人博客》的刊物讶隐，我們利用日夜間模式的背景顏色差異在，icon上藏了一段“stay hungry,stay foolish”向偉大的導(dǎo)師喬布斯致敬久又。遺憾的是由于運(yùn)營(yíng)關(guān)系現(xiàn)在這份刊物已經(jīng)下線(xiàn)巫延，大家以后可能看不到了。

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

品牌設(shè)計(jì)師地消，主要的工作是負(fù)責(zé)整個(gè)產(chǎn)品所有的關(guān)于品牌的設(shè)計(jì)品牌設(shè)計(jì)是產(chǎn)品與用戶(hù)之間視覺(jué)溝通的重要途徑之一炉峰，用戶(hù)通過(guò)品牌LOGO、廣告等所了解到的產(chǎn)品氣質(zhì)和功能等脉执，即是品牌所發(fā)揮的作用展現(xiàn)疼阔。總的來(lái)說(shuō)半夷，其實(shí)品牌設(shè)計(jì)沒(méi)有確切的界定范圍竿开，因?yàn)榈才c品牌形象發(fā)展相關(guān)的都可以歸為品牌設(shè)計(jì)。

品牌設(shè)計(jì)師日常工作的最大特點(diǎn)就是需求多玻熙、需求方多否彩、需求雜、交稿時(shí)間不定嗦随，所以面臨一早打開(kāi)郵箱彈出的各種需求郵件列荔，請(qǐng)務(wù)必坐穩(wěn)抓牢并放平心跳。我們的工作不是從最早的那封郵件開(kāi)始枚尼，具體看下需求贴浙，然后就按照發(fā)郵件的順序逐一做下去，因?yàn)榭赡苡行┬枨蠛芫o急署恍，而有些不怎么著急崎溃。

我們的工作首先應(yīng)該是歸納這些需求;

其次，排列交稿時(shí)間;

最后盯质，如果某段時(shí)間需求特別多袁串，最好還是歸納到Excel表格中概而，或者打印出來(lái)貼在自己的工位旁邊，時(shí)刻提醒自己避免遺漏等囱修。

一個(gè)項(xiàng)目中赎瑰，設(shè)計(jì)師與其他角色的矛盾，本質(zhì)上就是這幾層定位差異導(dǎo)致的破镰。不會(huì)溝通只會(huì)被別人牽著鼻子走的品牌設(shè)計(jì)師就是美工啊!品牌設(shè)計(jì)師在工作過(guò)程中需要掌握更多的跨專(zhuān)業(yè)知識(shí)餐曼，理解不同部門(mén)的立場(chǎng)，同時(shí)必須學(xué)會(huì)表達(dá)自己的想法和堅(jiān)持自己的立場(chǎng)鲜漩，弄清對(duì)方的真實(shí)想法源譬，確保在溝通時(shí)處于同一層面說(shuō)同一件事，這樣才能真正有效地溝通孕似。

一個(gè)優(yōu)秀的品牌設(shè)計(jì)師一定是一個(gè)注重細(xì)節(jié)的人踩娘，可能對(duì)別人來(lái)說(shuō)是細(xì)枝末節(jié)的小問(wèn)題，他會(huì)敏感又挑剔鳞青，但注重細(xì)節(jié)同樣也意味著要投入更多的精力和時(shí)間霸饲。要讓自己的投入與最終的產(chǎn)出有較高的性?xún)r(jià)比为朋，就一定要把控自己在細(xì)節(jié)上投入的時(shí)間臂拓。其實(shí)這跟煮咖啡很像，先選豆子研磨习寸、再煮胶惰、最后放糖，先要能喝再要好喝霞溪，剛把豆子磨了就迫不及待地加奶放糖孵滞，就根本不能喝了。

創(chuàng)意的產(chǎn)生鸯匹，是要經(jīng)過(guò)足夠的前期積累的坊饶，這種積累越豐富，思維碰撞產(chǎn)生的火花就越多殴蓬。

用心生活

點(diǎn)滴收集

加強(qiáng)練習(xí)

善用腦圖

其實(shí)很多時(shí)候設(shè)計(jì)只是手段匿级，一個(gè)手頭功夫再好的人沒(méi)有想法、沒(méi)有思路最終也只能是別人的手而已