寫在前面：喜歡網(wǎng)易的產(chǎn)品，用的順手，感覺沒有多余的雜亂功能卻能做到想要的都有，另外一點很重要的是看著每一個頁面都感覺溫馨。最近在用“網(wǎng)易蝸牛閱讀”讀書，體會尤甚。正想了解他們是怎么做到的時候，發(fā)現(xiàn)了這本書。

內(nèi)容簡介：

主要是設(shè)計師角度，講述了日常工作中所涉及到的用戶引導(dǎo)、色彩搭配、品牌設(shè)計、體驗設(shè)計、信息層次、設(shè)計規(guī)范等內(nèi)容。

用戶引導(dǎo)

其中用戶引導(dǎo)部分說明的比較詳細，從用戶引導(dǎo)目的、用戶引導(dǎo)類型、周期、強弱、引導(dǎo)三要素等方面以具體例子說明。

引導(dǎo)目的

對用戶來說可以降低學(xué)習成本、快速上手產(chǎn)品等；對產(chǎn)品而言，意義在讓用戶快了解和使用產(chǎn)品，縮短探索周期；吸引用戶發(fā)現(xiàn)新功能或操作特定對象；提前給予用戶幫助，提升產(chǎn)品使用的愉悅度。

引導(dǎo)類型

• 信息提示類（例如小紅點未讀消息）
• 功能提醒類（例如百度云盤的文件夾功能提示）
• 操作引導(dǎo)類（分為強制性和非強制性，強制性主要用戶用戶登錄注冊激活等相關(guān)流程，這些流程需要驗證身份才能繼續(xù)操作；非強制性的操作引導(dǎo)多為鼓勵用戶操作，如資料完善、分享轉(zhuǎn)發(fā)等）
• 內(nèi)容推廣類，最常見的為產(chǎn)品中植入的廣告。

用戶引導(dǎo)三要素

• 目的：想要達到的目的？用戶得到的好處？產(chǎn)品得到的好處？
• 用戶：目標用戶是誰？新/老、活躍/輕度用戶？
• 場景：被引導(dǎo)用戶的使用場景？

引導(dǎo)的生命周期

引導(dǎo)的生命周期可以分為觸發(fā)、展示、消失。

• 觸發(fā) ，即引導(dǎo)出現(xiàn)的時機和方式。打開程序觸發(fā)？達到特定頁面觸發(fā)？用戶操作制定功能觸發(fā)？到了某個時間點或達到某個指標后觸發(fā)？
• 展示，引導(dǎo)展現(xiàn)在用戶眼前的方式。例如游戲中使用互動性強的教學(xué)方式引導(dǎo)。
  -消失，即結(jié)束整個引導(dǎo)生命周期的方式?？煞譃樽詣酉Ш捅粍酉?。

引導(dǎo)的形式

• 引導(dǎo)頁：下載APP/更新完成，第一次打開后，向用戶展現(xiàn)產(chǎn)品中的功能和操作方法。信息要簡明扼要、中心明確。
• toast提示：輕量級提示，通常作為功能操作后的反饋?？捎锌蔁o或會反復(fù)出現(xiàn)，要注意語言精煉。
• 氣泡/浮層：量級輕但目的性很強的引導(dǎo)方式，一般為半透明浮層結(jié)合文案的設(shè)計模式。通常是非模態(tài)的，顯示3-5秒后自動消失；部分重要功能也用模態(tài)浮層，需要用戶明確操作后才能隱掉。
• 頁面遮罩：比較強勢的引導(dǎo)，一般遮罩為半透明，在此圖層上通過各種圖形結(jié)合被蓋住的界面內(nèi)容，引導(dǎo)用戶聚焦到重要的信息。遮罩圖層無法自動消失，需要用戶操作后才能隱掉。
• 嵌入式（局部嵌入/整體嵌入），例如用戶最初使用APP時，許多界面為空狀態(tài)，有必要將空狀態(tài)納入用戶引導(dǎo)流程中。嵌入式引導(dǎo)可以讓用戶有所期待、體會到內(nèi)容的重要性，滿足用戶獲取內(nèi)容的需求。
• 操作提示 ：通常用簡短動畫展示操作方法，也有用靜態(tài)圖片配以描述的方式。例如網(wǎng)易云音樂歌曲播放頁面的查看歌詞示意動效。
• 互動引導(dǎo)式：通常比較隱蔽，在用戶與產(chǎn)品互動過程中引導(dǎo)用戶完成。常用有下拉刷新、底部上拉等手勢互動。還有語音輸入過程中的互動。
• 彈窗：與遮罩引導(dǎo)類似，通常以文案搭配具體操作的形式呈現(xiàn)，可輔助搭配圖片烘托主題。
• 自體變形：元素自身發(fā)生改變，可配合動畫效果，沒有增加額外其他元素。例如天貓國際logo。

引導(dǎo)的強弱

通常 互動參與>視頻/動效圖文>靜態(tài)圖文>文字
可以從形式和頻率上考慮引導(dǎo)的強弱。

注意事項

• 保證引導(dǎo)有效性
• 觸發(fā)場景準確
• 簡單易懂，突出核心
• 與產(chǎn)品基調(diào)一致

心得

• 要用戶引導(dǎo)方式首先要明確引導(dǎo)的目的和針對用戶是誰，了解有哪些引導(dǎo)方式，才能設(shè)計好既能達到引導(dǎo)目的又對用戶干擾較小的效果。
• 目前我們公司的產(chǎn)品引導(dǎo)是否足夠，是否有必要做一套適合的引導(dǎo)功能，以減少客服的工作量。

突破固有思維

印象比較深的一點是，對于小紅點的處理。當給客戶提示一個未讀消息或提示時，點擊小紅點希望能夠讓用戶最快的達到相應(yīng)的位置，而不是需要一次次點擊尋找。這里要吐槽一下支付寶的消息提醒，每次想點掉都要找半天，對于紅點強迫真而言真是浪費時間。

圖表設(shè)計

不止好看，要做到易讀、易分析、美觀且突出數(shù)據(jù)價值為一體。

圖表的元素

圖表設(shè)計過程

• 明確數(shù)據(jù)指標
• 為誰設(shè)計？用戶想要什么？
• 明確設(shè)計目標與價值
• 規(guī)劃設(shè)計方案，選擇合適圖表類型
• 細化體驗

設(shè)計原則

• 刪除無關(guān)元素
• 弱化非數(shù)據(jù)元素
• 合理組織分類
• 強調(diào)重要數(shù)據(jù)

繪制設(shè)計稿

對產(chǎn)品而言，應(yīng)該是原型稿（含交互）。

色彩搭配

色彩平衡，個人對色彩基礎(chǔ)薄弱，需再學(xué)習基礎(chǔ)后再總結(jié)。
按鈕效果調(diào)整通過調(diào)整顏色明暗而不是通過調(diào)整透明度來實現(xiàn)。

品牌設(shè)計

公司發(fā)展到一定階段要突出品牌的價值，所以在做設(shè)計成熟之后要抽取公司或產(chǎn)品品牌價值。
首先要品牌分析，分析抽取出公司/產(chǎn)品品牌性格、品牌關(guān)鍵字。
文章以網(wǎng)易嚴選為例，從品牌提取出的設(shè)計語言為：細節(jié)化、場景化、簡約化。
以嚴選為例，從logo、版式設(shè)計、圖表設(shè)計、動效設(shè)計、圖片設(shè)計等方面介紹如何進行的品牌設(shè)計。

信息層次

穩(wěn)重以產(chǎn)品詳情頁設(shè)計為例，講述了如何利用十字法構(gòu)建頁面中的信息層級。
也就是將頁面中要展現(xiàn)的內(nèi)容抽取出來分為四個象限中，然后根據(jù)重要程度等安排輕重/大小等。

設(shè)計規(guī)范

設(shè)計規(guī)范通常是針對設(shè)計師合作的情況下，為了保證輸出的風格和形式統(tǒng)一。

官網(wǎng)設(shè)計-B端產(chǎn)品設(shè)計實踐

反思：當時在做官網(wǎng)的時候考慮的太少，未明確具體要給哪些客戶哪類人群看，要給客戶突出什么。

總結(jié)

這本書雖然說是寫給設(shè)計師的，但其中的很多方法是通用的，對產(chǎn)品而言更有意義。