前言

通知是產(chǎn)品中極其重要的一部分，它能快速將內(nèi)容的狀態(tài)及變化通過不同的方式傳達(dá)給用戶，以便用戶在收到信息后根據(jù)所傳遞的內(nèi)容及時做出應(yīng)對策略。
在這里，有一個很現(xiàn)實的問題，很多產(chǎn)品喜歡一股腦的把有效的/無效的、重要的/不重要的、用戶想知道的/不想知道的等所有信息通通推送給用戶。那么，你的推送渠道真的用對了嗎？是否做了信息優(yōu)先級區(qū)分？推送時間段是否有效？站在用戶角度，下面這些場景你肯定碰到過：

◇ 手機屏幕總是頻繁彈出信息，接二連三的震動、提示音讓你一怒之下卸載了一些不太常用的APP；

◇ 桌面圖標(biāo)99+、主頁的消息入口99+、進(jìn)入消息分類還是99+，清理起來非常麻煩，還不如關(guān)閉幾個分類通知，少一個也能緩口氣；

◇ 一天少看了幾個小視頻，好不容易節(jié)省出來的流量被通知無情的消耗，還不如關(guān)閉系統(tǒng)通知權(quán)限來得快；

◇ 每隔一段時間，都要在手機短信中回復(fù)一大堆TD（退訂），想吐的感覺；

◇ ......

在頻繁地打擾下，用戶關(guān)閉了一個個通知權(quán)限、甚至一度卸載APP。不難看出，好的消息通知能巧妙的將用戶求留?。ú糠钟脩衾猛ㄖ湍鼙３謱ξ⑿?、QQ的控制欲），做的不好就會起到負(fù)面作用、失去了消息通知的初衷，這里面最需要把控就是推送的一個“度”。
用戶可能因為一條走心的推送而轉(zhuǎn)化、也可能因為被打擾而放棄使用，站在設(shè)計角度，需盡可能打造讓用戶更喜歡的通知系統(tǒng)。那么，對于不同的業(yè)務(wù)需求及使用場景，又該如何差異化的進(jìn)行消息推送，筆者通過本文進(jìn)行分析總結(jié)，與大家一起了解。

分享目錄

一、消息推送的基本知識
二、消息通知渠道
三、讓用戶再次開啟通知權(quán)限
四、提高觸達(dá)率的小技巧
五、結(jié)語

一、消息通知的基本知識

1.什么是消息通知

消息通知是產(chǎn)品提供的一項服務(wù)，能夠及時將產(chǎn)品的期待或內(nèi)容的變化、根據(jù)其等級權(quán)重合理的通過不同渠道及時同步給用戶，常見的如互動提醒、老用戶召回、活動拉新、產(chǎn)品更新或幫助提醒等，通過站內(nèi)紅點、彈窗、短信、郵件等方式與用戶進(jìn)行信息交換。

2.消息推送的目的

用戶層面，方便及時獲取到想要知道的信息、以及對信息交換的控制權(quán)。例如：用戶發(fā)布一條新的短視頻想要對評論/點贊及時掌控、給心上人發(fā)了信息想在第一時間看到回復(fù)...等，產(chǎn)品也是借此用戶對內(nèi)容的控制欲，利用消息推送提升用戶的使用體驗。
產(chǎn)品層面，通過主動推送想讓用戶知道的信息，以達(dá)到新/老用戶轉(zhuǎn)化的目的。例如：通過手機短信形式發(fā)放優(yōu)惠券對老用戶召回、應(yīng)用內(nèi)通知或桌面推送對用戶拉新...等，以此提高產(chǎn)品收益，獲取更大的商業(yè)價值。

3.通知設(shè)計的基本原則

首先，一個好的消息系統(tǒng)首先需要將消息內(nèi)容設(shè)計的全面，以便用戶通過消息通知能準(zhǔn)確無誤的了解到對應(yīng)內(nèi)容；
其次，消息的觸達(dá)方式需合理有效，必須提供便捷的操作入口以供用戶及時反饋；
另外，為了避免過于打擾用戶，需選擇合理的推送渠道，提高用戶觸達(dá)概率及反饋效率。

二、消息通知渠道

消息通知渠道分為應(yīng)用內(nèi)通知應(yīng)用外通知。應(yīng)用內(nèi)通知主要來源于消息中心或系統(tǒng)主動觸發(fā)的彈窗來體現(xiàn)，而應(yīng)用外通知包括桌面圖標(biāo)紅點、手機短信、電子郵件、push、公眾號信息（需綁定）等渠道推送。

1.應(yīng)用內(nèi)通知

1）消息功能入口
消息功能入口提示也稱為紅點提示，主要有底部Tad欄、首頁右上角、個人中心右上角三種形式。當(dāng)有新的通知出現(xiàn)時，對應(yīng)圖標(biāo)的右上角會出現(xiàn)小紅點提示，清晰明了，關(guān)于小紅點設(shè)計，之前《小紅點篇 | 用好這招，讓用戶的觸達(dá)率大幅度提升！》這篇文章有詳細(xì)說明。
紅點提示的用戶觸達(dá)率較高，但需要用戶在登錄狀態(tài)下才能查看，比如訂單狀態(tài)變化、用戶與用戶/產(chǎn)品之間的互動消息、產(chǎn)品活動通知等。

2）消息列表

當(dāng)產(chǎn)品的消息類型較多時，點擊消息功能入口即可跳轉(zhuǎn)至二級分類列表。與上述相比，消息列表的內(nèi)容則更加清晰，通過第一次消息入口功能的引導(dǎo)觸發(fā)，這里的用戶觸達(dá)率將成倍增加。

3）彈窗通知

以彈窗的形式覆蓋在頁面內(nèi)容頂層，阻礙用戶的當(dāng)前操作并迫使用戶對彈窗做出決策，可以是系統(tǒng)主動彈出或用戶手動觸發(fā)，對用戶的干擾極大。
彈窗通知最大的優(yōu)勢在于會100%被用戶看到，無法忽略，否則將不能進(jìn)行其他操作，很適合產(chǎn)品的一些重要事件提醒，例如應(yīng)用升級、活動通知、優(yōu)惠券引流等。

4）Toast 通知

Toast通知是用戶在操作之后給出的即時反饋，與當(dāng)前頁面內(nèi)容關(guān)聯(lián)性極強，但不會中斷用戶的操作，出現(xiàn)的時間很短，一般持續(xù)3秒后自動消失，對用戶的干擾也比較小。
需要注意的是，Toast容易在用戶不注意的情況下被遺漏，所以適合用于操作后不影響大局、且不可二次操作、不可逆轉(zhuǎn)的輕量提示，例如刪除成功、提交成功等。

2.應(yīng)用外推送

1）桌面小紅點

小紅點通常以圓點+數(shù)字的形式出現(xiàn)在圖標(biāo)右上角，用來提示應(yīng)用內(nèi)的未讀消息數(shù)量，進(jìn)入應(yīng)用查看或清除后小紅點則會消失。桌面小紅點有一個必備前提，需要同時開啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限方能接收提醒通知。
在部分應(yīng)用中，桌面小紅點具有較大的價值，能對用戶產(chǎn)生積極的影響，使用頻率得到進(jìn)一定的提升。例如：社交類應(yīng)用中的私信、評論、點贊等；商家端的咨詢信息、下單提醒等，用戶在看到后都會有強烈的點擊欲望，對一些數(shù)據(jù)的提升起到推動作用。

2）PUSH推送

PUSH推送通知常見于設(shè)備頂部橫幅（幾秒后消失）、通知中心以及鎖屏后的中部區(qū)域，用戶可從卡片中的內(nèi)容獲取信息類型及重要程度，用以決策是否需要立即打開。
這種推送方式，用戶幾乎很難忽略，不處理的話會長時間浮于屏幕之上，非常適合價值及時效性較高的消息通知。除視覺提醒之外，還可通過聽覺觸達(dá)用戶，例如支付號、微信的收款信息等，不過依然要同時開啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限。

3）手機短信

短信推送是大家很熟悉的通知渠道了，畢竟現(xiàn)在都是用手機注冊賬號，手機號獲取難度幾乎為“0”，常見的有驗證碼短信（用戶請求）、營銷短信（產(chǎn)品推送）兩種：
驗證碼類似“一問一答”的互動，沒有什么特別的玩法；
營銷類短信對于拉取新用戶、老用戶召回、節(jié)日/活動促銷能起到不可替代作用，產(chǎn)品可通過短信發(fā)送圖片、文字以及超鏈接，內(nèi)容的時效性、用戶的觸達(dá)率都相對較高。
著重說明一點，因為短信通知的成本較高，在使用之前需要足夠的思考分析，細(xì)分用戶群體做到精準(zhǔn)投放，避免所花費的成本與產(chǎn)生的價值不成正比。另外，如果需要放超鏈接，那么短信內(nèi)容一定要有足夠的說服力及吸引力，總是被用戶當(dāng)做詐騙短信刪除、舉報的話還不如不放。
為了減少對用戶的打擾，讓產(chǎn)品更人性化，一般會在短信結(jié)尾提供TD（退訂）提示，用戶回復(fù)即可取消后續(xù)的推送，但是否真的取消成功，這就得看產(chǎn)品了(???)...

4）電子郵件

電子郵件推送方式使用的并不多，一方面需要產(chǎn)品有web端服務(wù)，純粹的移動端APP郵件推送不會有什么效果；另一方面，絕大多數(shù)的用戶登錄電子郵箱并不頻繁，還容易被用戶一鍵清理或誤刪。
電子郵件唯一的好處就是用戶可通過超鏈接直達(dá)內(nèi)容出處，相比APP應(yīng)用，免去了下載等一系列操作，還可以長時間滯留，便于用戶隨時查看或添加星標(biāo)，處理時間段選擇較為靈活，很適合web端服務(wù)。針對一些商業(yè)化的郵件推送，也需要花費一定的經(jīng)濟(jì)成本。

產(chǎn)品獲取用戶郵箱地址的難度較大（郵箱賬號除外），不難理解，使用手機號一鍵登錄、驗證碼登錄、第三方賬號登錄遠(yuǎn)比郵箱地址登錄要方便的多。除此之外，還可以通過個人設(shè)置的添加郵箱、問卷調(diào)查的郵箱地址預(yù)留來獲取，不過這就要看用戶的主動意愿了。

5）公眾號消息

公眾號背靠社交應(yīng)用，普及程度及用戶觸達(dá)率是極高的，不過這需要產(chǎn)品利用部分業(yè)務(wù)、活動為導(dǎo)向，引導(dǎo)用戶關(guān)注公眾號后方能接收到消息通知。
目前公眾號只能向用戶發(fā)送符合部分場景要求的服務(wù)通知，例如刷卡通知、物流軌跡變化、商品購買等。如果預(yù)算足夠的話，還可以購買公眾號列表、內(nèi)容詳情頁、朋友圈等產(chǎn)品廣告位進(jìn)行特定用戶群體推送，無需用戶關(guān)注也可以看到并進(jìn)行轉(zhuǎn)化。

三、讓用戶再開啟通知權(quán)限

用戶一旦關(guān)閉通知權(quán)限，對產(chǎn)品來說無疑是一個損失，這意味著沒有消息通知的推動，用戶的使用頻率以及與產(chǎn)品之間的互動顯然會減少（就連夫妻之間都需要時?；优c溝通交流，何況對于有選擇余地的產(chǎn)品），時間長了，用戶轉(zhuǎn)投其他產(chǎn)品的“懷抱”也不是不可能。
有沒有想過，用戶只是關(guān)閉通知權(quán)限而已，并沒有卸載APP，真的就沒辦法了嗎？是不是該做點什么...

1.尋找關(guān)閉原因

用戶之所以還未卸載APP，說明還有價值，歸根結(jié)底，關(guān)閉通知權(quán)限的原因都是因為消息的“狂轟亂炸”帶來的無盡騷擾，幾乎沒有例外，而產(chǎn)品還會添上一把火，用戶再次打開APP時無底線的催促用戶再度開啟，耗盡用戶最后一點耐心后，或許再也沒有機會了。
這個時候，設(shè)計師考慮的不是頻繁提醒用戶開啟，而是用戶關(guān)閉通知的真正原因（“狂轟亂炸”只是概括），細(xì)化各種可能性，然后從中找出機會點，但凡有所改進(jìn)都值得試一試，畢竟相比什么都不做不會更糟。這么解釋似乎毫無說服力，下面舉個例子：
當(dāng)產(chǎn)品中的某項免費服務(wù)突然有一天開始收費了，但受到了大多數(shù)用戶的抵觸，這個時候你該怎么做，是無視用戶訴求繼續(xù)收費、還是恢復(fù)到之前的免費？這并不是一個選擇題，繼續(xù)收費會導(dǎo)致大量用戶流失、恢復(fù)免費可能連維持運營成本都難，所以不經(jīng)思索的選擇草草收場、連下下策都算不上。用戶抵觸的原因可能收費過高或是與實際價值不符，有沒有想過利用限時折扣、附加其他增值服務(wù)（成本較?。┗蛘呓M合捆綁銷售也不失為一種策略。
那么，到底該如何做既能愉快的發(fā)送消息通知、還能能挽回用戶的心呢？

2.引導(dǎo)二次開啟

用戶關(guān)閉通知權(quán)限，并非沒有需求，最典型的就是在某寶、某東加了滿滿一“車”商品等待降價，然后抱怨消息通知太吵關(guān)掉了通知權(quán)限，最后就是無法收到折扣通知、還把問題怪在了APP身上，著實太冤。用戶只要還有需求，通知權(quán)限就還有被重新開啟的機會。

1）損失厭惡/利益引誘

首先，我們需要找出對應(yīng)的價值點，利用優(yōu)秀的文案給予用戶思考的余地，用戶每多思考一會，結(jié)果都有可能發(fā)生改變。
人們都討厭失去，對于損失的不可控很難接受，在引導(dǎo)用戶開啟通知權(quán)限時，需要強調(diào)不開啟會失去什么，畢竟面對“得到”和“失去”時，損失更加讓人難以忍受，例如物流產(chǎn)品告訴用戶“未開啟通知，將錯過重要的快遞信息”。還可以通過激勵等進(jìn)行利益引誘，如“開啟后能及時獲取紅包卡券、折扣通知”等，并提供快捷通道，促使用戶重新開啟通知權(quán)限。

2）消息分類/分別處理

每種類型的通知都不可能符合所有用戶的“胃口”，針對社交、電商類產(chǎn)品，可將通知類型分類處理，用戶希望接收哪種類型的消息單獨開啟即可。
例如支付寶將消息拆分為多個類型；京東還增加了午休免打擾設(shè)置，開啟后在12：30-13：30不會收到任何消息提醒；微信群過多、消息太吵時，開啟免打擾又擔(dān)心錯過重要人的信息，于是微信在去年上線了開啟群消息免打擾后、可設(shè)置群內(nèi)4個人的消息正常通知，算是比較人性化的設(shè)計了。

3）提供關(guān)閉/關(guān)不徹底

部分產(chǎn)品提供了關(guān)閉消息通知功能，但又關(guān)不徹底，這是產(chǎn)品基于妥協(xié)的基礎(chǔ)上，依然在低頻推送消息的“流氓”玩法，與用戶完全關(guān)閉相比，已經(jīng)算是不錯的結(jié)果了。
常見于PC客戶端，就像很多軟件的插件一樣，不管怎么關(guān)，總是無法徹底關(guān)閉，甚至還將開啟操作偽裝成其他內(nèi)容引導(dǎo)用戶誤觸；手機短信推送也會有這種情況，用戶回復(fù)過“退訂”后依然會收到相關(guān)短信。

這種方式需謹(jǐn)慎使用，在用戶關(guān)閉通知后，需通過后續(xù)推送內(nèi)容的質(zhì)量、頻率試探用戶底線，然后逐漸提升，切不可無視用戶操作。

四、提高消息觸達(dá)率的小技巧

1.減少重復(fù)通知

反復(fù)推送相同的內(nèi)容只會讓用戶更加反感，回復(fù)退訂、卸載應(yīng)用都可能在這一刻發(fā)生。
很明顯，消息發(fā)出后，如果用戶的觸達(dá)率較高就沒必要再次推送。反之觸達(dá)率較低，重復(fù)推送會讓用戶有種被催促、脅迫的感覺，適得其反，觸達(dá)率低有沒有可能是文案不夠友好、表達(dá)不夠清晰或者吸引力不夠？即便同一件事情，也盡量使用不同的表達(dá)方式，如何想辦法重新引起用戶的關(guān)注才是關(guān)鍵點。

2.言語得當(dāng)、避免誤會

中華文字博大精深，且有56個民族，其性格習(xí)慣各異，特別在利用當(dāng)前社會熱點、媒介進(jìn)行的營銷推送時，盡可能規(guī)避掉敏感信息，如地域/民族歧視、性暗示等。

3.細(xì)分受眾群體

很多時候，消息推送太少無法滿足產(chǎn)品目標(biāo)、太多則會惹惱用戶導(dǎo)致通知權(quán)限被徹底關(guān)閉，所以不僅要考慮消息推送頻率，更重要的是對受眾群體進(jìn)行分類、分別推送，不要每次都一股腦的將消息發(fā)給所有用戶，當(dāng)然，能做到千人千面（成本大）則會更好。

4.內(nèi)容清晰簡潔

沒有用戶愿意在不明所以的情況下來看長篇大論的內(nèi)容，需確保消息內(nèi)容簡單直接、清晰易懂，并符合用戶認(rèn)知習(xí)慣，還得保持友好的語氣以及富有創(chuàng)造力的品牌形象。
處于營銷目的時，可利用感興趣的事件/事物勾起用戶的點擊欲望，例如網(wǎng)絡(luò)熱詞、時下熱點等，筆者雖然并不提倡“標(biāo)題黨”，但不得不說，很多標(biāo)題黨都能起到不錯的效果。

5.提供“下一步”入口

消息通知需要一個有效操作入口，并且在消息內(nèi)容中有對應(yīng)的指向，點擊應(yīng)用內(nèi)通知切換APP界面、應(yīng)用外推送鏈接跳轉(zhuǎn)至web頁，從始至終都需要為用戶提供一個查看更多內(nèi)容或參與的有效途徑。

五、結(jié)語

消息通知設(shè)計的主要目的是在正確的時間、以正確的方式將內(nèi)容呈現(xiàn)給用戶，并提高產(chǎn)品的轉(zhuǎn)化率，不管用戶愿不愿意接受，這始終都是一個呈現(xiàn)信息的不錯途徑。
本文主要總結(jié)了消息的通知渠道、常見問題處理、提升用戶觸達(dá)率的方法，以幫助新手設(shè)計師快速掌握完整的消息系統(tǒng)?；蛟S最終的結(jié)果事與愿違，但不能否認(rèn)其魔力，需要做好的是確保消息內(nèi)容質(zhì)量、對應(yīng)的受眾群體及合理的推送渠道，相信總有一種方式適合你產(chǎn)品。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

文章來源：站酷       作者：大漠飛鷹CYSJ

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

眾所周知，人機交互是一門集調(diào)研，構(gòu)思，設(shè)計和測試為一體的學(xué)科。作為一門覆蓋多領(lǐng)域的多學(xué)科，包括并不限于心理學(xué)，行為學(xué)，編程，工程，設(shè)計，調(diào)研，和工商管理，現(xiàn)代人機交互的核心已經(jīng)不再是從技術(shù)層面去解決問題， 而是側(cè)重于以多個視角去挖掘問題的本質(zhì)并思考問題背后的價值。也因此，人機交互學(xué)術(shù)界一直以來都試圖尋找一種思考模式，或者理論模型，去將復(fù)雜的思考流程提煉出來。

01

————————

主流交互模型

近三十年來，人機交互領(lǐng)域的方法論可謂百花齊放，盡管許多知名研究機構(gòu)與院校都發(fā)布了不同的設(shè)計模型與流程圖，但是其內(nèi)核終究大致相同（尋找問題——定義問題——設(shè)計——測試）。

以下是近年來國際最主流的七種人機交互設(shè)計模型：

1. 尼爾森諾曼集團(tuán)設(shè)計流程 （Nielsen Norman Group）

2. 斯坦福大學(xué)設(shè)計學(xué)院設(shè)計流程（Stanford Design Thinking Process）

3. 《情景化設(shè)計:為生活而設(shè)計》 中的設(shè)計流程 （Contextual Design: Design for Life）

4. IBM環(huán)形設(shè)計模型 （IBM Loop Model）

5. 英國設(shè)計協(xié)會雙鉆石設(shè)計模型（Design Council Double Diamond）

6. LUMA 學(xué)院設(shè)計流程（LUMA Institute Design process）

7. Dubberly Design Office 橋型設(shè)計模型（Analysis-Synthesis Bridge Model）

其中，前6種應(yīng)該都是大家相對熟悉的，我們在文末也附上了官方鏈接供大家探索。今天這篇文章我們將簡要的帶大家了解列表中最后一個也是最有特色的一個人機交互模型：橋型模型（Analysis-Synthesis Bridge Model）。

02

————————

橋型交互模型

橋型模型是美國 Dubberly Design Office發(fā)表的設(shè)計流程圖（Analysis-Synthesis Bridge Model），對于不清楚的讀者，此公司的創(chuàng)始人Hugh Dubberly 曾發(fā)布超五十篇人機交互領(lǐng)域的研究型文章，在多個知名設(shè)計協(xié)會掛名，并被錄入美國 ACM 的 SIGCHI Academy， 成為公認(rèn)對人機交互領(lǐng)域做出最杰出貢獻(xiàn)的人之一。Dubberly 也曾在多個美國知名大學(xué)任職，因此，此模型也是多數(shù)國際人機交互學(xué)科的公認(rèn)理論。

盡管相較于其他的流程圖，這個流程圖較為抽象，但是其所用的多維度分類卻相對明了的闡釋了設(shè)計的本質(zhì)。如圖所示，橋型模型的x軸分為現(xiàn)在和未來，y軸分為具象和抽象，以此來定義設(shè)計的狀態(tài)。同時也加入了動詞“形容”，“分析”，“研究”，“制作”去定義設(shè)計中的操作。在這個橋型設(shè)計流程中，設(shè)計師從左下角到右下角的過程代表從現(xiàn)象走向抽象再從抽象走向產(chǎn)品的過程，與此同時也代表著從今天走向明天，或者說從問題的現(xiàn)在態(tài)走向解決問題后的未來態(tài)。

現(xiàn)在態(tài)

起點從左下角開始，（what “is”）代表著問題本身，而左上角的（model of what “is”） 代表問題的抽象模型或者問題的本質(zhì)。這兩個階段代表著設(shè)計中的調(diào)研階段（Researching）。此時的設(shè)計師應(yīng)該通過“形容具象的現(xiàn)象”（左下角格子 Describe+Concrete）即收集信息來拓寬對問題的了解然后再進(jìn)行“分析抽象的模型”（左上角格子Interpret+Abstract）去制作問題模型來更清晰的看到現(xiàn)象的本質(zhì)和規(guī)律。

在這個階段，“世界并不清楚他想要什么樣的設(shè)計”—— Paola Antonelli

在開始階段之所以要抽象出問題模型，是因為作為設(shè)計師不能單純的聽從人們的訴求。當(dāng)生活中出現(xiàn)一個問題時，生活中人們往往不太清楚自己煩惱的本質(zhì)是什么，要么他們只看到了問題的表面，要么他們被太多因素混淆了。因此在這個階段，設(shè)計師的責(zé)任就是去分析問題存在的環(huán)境與原因，并且以人為中心的角度去分析表象下人們的真正需求。也是因此，避免以技術(shù)為中心的分析（machine-centered-research）而選擇以人為中心的研究（human-centered-research）才是交互設(shè)計師應(yīng)有的職責(zé)。

在做以人為中心的研究時，收集和分析信息時避免內(nèi)隱偏見（unconcious bias）是非常重要的。這里指由于生長在固定社會和文化下的而無意識帶有的偏見，比如身體健全的人忘記考慮殘疾人的需求，或者經(jīng)常用電子產(chǎn)品的人下意識認(rèn)為一些復(fù)雜操作很常規(guī)。在設(shè)計里，歧視不止包括在搜集用戶信息時忽略了個別群體，同時也包括設(shè)計師本身所帶的特定視角。一個成功的設(shè)計縱然應(yīng)該滿足大多數(shù)人的需求，但是一個向善的設(shè)計也不應(yīng)該忽視特殊群體的情況。這里不得不提到，雖然現(xiàn)如今很多設(shè)計往往依靠大數(shù)據(jù)來進(jìn)行設(shè)計，但是大數(shù)據(jù)本身就代表著忽略少部分群體的需求，導(dǎo)致少數(shù)群體的歧視愈發(fā)嚴(yán)重，甚至一度威脅到一些小眾的題材。因此在調(diào)研時考慮到人種，年齡，經(jīng)濟(jì)情況，教育程度，是否殘疾，和對科技的熟悉度可以更嚴(yán)謹(jǐn)?shù)姆治霾煌暯窍聠栴}的影響。

左下角常用的用戶研究方法有情景調(diào)查（contextual inquiry），利益相關(guān)者邏輯圖（stakeholder map)，和參與型研究(Participatory Research)等等。左上角常用的分析方式有帶入虛擬人格（persona）和流程圖（journey mapping）等等。

未來態(tài)

右側(cè)的兩個階段則代表問題的未來態(tài)或者設(shè)計原型態(tài)（prototyping）。右上角的 （model of what "could be")代表問題的未來的可能性，也就是一般說的設(shè)計和構(gòu)思部分，而右下角的（what “could be”）就是將這些未來的可能性做出來，從概念化為產(chǎn)品。

然而如何從右上角的抽象模型到右下角具體設(shè)計呢？在這里便需要了解一個大致的設(shè)計信息層級。

如圖所示，一個設(shè)計的是由多層結(jié)構(gòu)組成的，從抽象到具象分為五個階段，策略（Strategy），內(nèi)容（Scope），結(jié)構(gòu)（Structure），框架（Skeleton），視覺（Surface）。一個嚴(yán)謹(jǐn)?shù)脑O(shè)計應(yīng)該是從下而上發(fā)展的（從深層的策略到淺層視覺），并且每次在考慮深層的策略時應(yīng)該避免淺層的干擾。這是因為淺層只是策略的表現(xiàn)的方式，而深層策略才是決定產(chǎn)品核心價值的關(guān)鍵。決定策略（Strategy）時應(yīng)該直接依據(jù)模型左上角“問題的本質(zhì)”來決定要設(shè)立什么樣的產(chǎn)品目標(biāo)。只有策略定了，才能確定這個產(chǎn)品的內(nèi)容與受眾群體。假如目標(biāo)是讓盲人點餐，那么內(nèi)容有可能就是在這個頁面提供特殊的菜單形式和電話快捷鍵。而假如目標(biāo)是讓人聽音樂，那么內(nèi)容可能就是提供音樂推薦與保存。而在結(jié)構(gòu)方面，確立內(nèi)容后只需要一個完善的邏輯，比如用戶的具體使用流程是什么，就可以快速具現(xiàn)這個產(chǎn)品的結(jié)構(gòu)。最后，框架和視覺階段則更多只是一種表現(xiàn)手法的選擇。無論最終選擇如何設(shè)計，只要保證框架和視覺元素在整個產(chǎn)品中保持一致并且符合產(chǎn)品定位即可。

從策略到視覺的過程也就是模型中從右上角到右下角的過程。每個設(shè)計師的目標(biāo)都應(yīng)該是以具象的產(chǎn)品實現(xiàn)相對抽象的策略。而要想讓視覺和策略緊密聯(lián)系，就應(yīng)該盡可能在每一步的過度時都考慮到前后步驟的銜接是否邏輯通順，避免層與層之間脫節(jié)的現(xiàn)象發(fā)生。盡管在現(xiàn)實中，層與層之間的分隔往往沒有這么清楚，但是這種分層的設(shè)計邏輯可以作為一個有用的構(gòu)思框架，讓設(shè)計師在發(fā)散思維的時候不偏離目標(biāo)。

而最后即便到了右下角的產(chǎn)品產(chǎn)出，一個完整的設(shè)計流程也不算結(jié)束。一個成功的設(shè)計總是需要多個設(shè)計迭代的。盡管在每一個一個迭代中，右下角可能是最終產(chǎn)出，但是在一個完整設(shè)計流程里，右下角還應(yīng)該連接左下角，將已經(jīng)完成的設(shè)計再一次進(jìn)行分析和測試并總結(jié)出優(yōu)缺點，再進(jìn)行下一輪的設(shè)計。

在右上角的設(shè)計部分中經(jīng)常使用的方法有故事模版（story boarding），紙質(zhì)低保真模版（paper prototyping），和以人為中心設(shè)計（human centered design）等等。

總而言之，橋型模型作為國際人機交互院校最常用的模型，從多個角度描述了從一個問題從研究到解決的過程。我們可以看得出，設(shè)計從來都不是一個隨性而為的過程。從左側(cè)的無偏見而系統(tǒng)的分析問題到右側(cè)的遵循結(jié)構(gòu)進(jìn)行設(shè)計，設(shè)計師都應(yīng)該在一個嚴(yán)謹(jǐn)?shù)目蚣芟逻M(jìn)行思考和設(shè)計，這樣才能做到有針對性的解決問題。在這里也希望大家能多多關(guān)注各類人機交互設(shè)計理念并從中獲取靈感亦或找到適合自己的設(shè)計流程。

03

——————————

其他設(shè)計模型

下面是六種其他主流國際人機交互模型和官方鏈接供大家探索：

1. 尼爾森諾曼集團(tuán)設(shè)計流程 （Nielsen Norman Group）

研究問題領(lǐng)域（discover），探索不同可能（explore），測試設(shè)計（test)，和傾聽反饋(listen)

官網(wǎng)鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf

2. 斯坦福大學(xué)設(shè)計學(xué)院設(shè)計流程（Stanford Design Thinking Process）

抽離問題(empathize)，定義問題(define)，尋找靈感(ideate)，制作原型(prototype)，測試成品(test)。

官網(wǎng)鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf 

3. 《情景化設(shè)計:為生活而設(shè)計》 中的設(shè)計流程 （Contextual Design: Design for Life）

理解問題(understand)，發(fā)明未來(invent)，情景話設(shè)計(design)，制作原型(validate)，和開發(fā)產(chǎn)品(develop)。

書本鏈接：https://www.goodreads.com/book/show/33805307-contextual-design

4. IBM環(huán)形設(shè)計模型 （IBM Loop Model）

觀察(observe)，反思反饋(reflect)，和制作（make）。

官網(wǎng)鏈接： https://www.ibm.com/design/thinking/page/framework/loop

5. 英國設(shè)計協(xié)會雙鉆石設(shè)計模型（Design Council Double Diamond Model）

發(fā)現(xiàn)(discover)，定義(define)，制作(develop)，傳遞(deliver)。

官網(wǎng)鏈接： https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond

6. LUMA 學(xué)院設(shè)計流程（LUMA Institute Design process）

看(looking)，理解(understanding)，制作(making)。

官網(wǎng)鏈接： https://www.luma-institute.com/about-luma/luma-system/

04

——————————

結(jié)語

以上就是本篇的全部內(nèi)容了，希望大家讀完后能對國際主流人機交互領(lǐng)域多了一些了解或者從中獲取一些啟發(fā)。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：騰訊ISUX團(tuán)隊    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

平時用QQ音視頻來做什么呢？和好友聊天？與家人聯(lián)系？還是工作開會？現(xiàn)在你有了新選擇，解鎖視頻娛樂新方式，QQ一起派對讓你不必出門，也能和好友一起玩聚會游戲。

01

——————————

音視頻娛樂新形態(tài)

挖掘更好玩的娛樂社交場景，能帶給用戶更愉悅的體驗。疫情期間，線下聚會因此受限，線上娛樂應(yīng)運而生，在此契機之下，期望借助音視頻實時互動、聲影重現(xiàn)的特性，開啟了新的娛樂形態(tài)——QQ一起派對。

觀察競品普遍存在不足之處，即缺乏真實聚會游戲的氛圍與互動。因此，解決社交游戲產(chǎn)品缺少真實情境的問題，成為QQ一起派對的創(chuàng)新機會點，有利于在競品中突圍，塑造差異化優(yōu)勢。

02

——————————

打造真實聚會游戲體驗

2.1 回歸本質(zhì)，突圍創(chuàng)新

QQ一起派對是基于音視頻展開的線上聚會游戲，結(jié)合了實時互動與娛樂化內(nèi)容。為了讓游戲過程更貼近真實聚會場景，我們從游戲氛圍和自然交互兩方面切入，尋找創(chuàng)新突破口。

游戲氛圍

構(gòu)建適用于游戲類型的界面框架，讓線上聚會更貼近真實世界，并運用視覺感染力，營造環(huán)境氛圍，包括場景具象化、增強代入感等方法，實時感知好友的情感變化，從而獲得社交臨場感，在心理上感到彼此的存在。

自然交互

有別于競品需通過點擊按鈕作答，QQ一起派對利用實時語音識別，讓用戶通過更自然的人機交互方式，在游戲過程中進(jìn)行語音搶答，彷佛置身于真實世界中與好友互動，成為QQ一起派對的獨特賣點（Unique Selling Proposition）。

綜上所述，QQ一起派對的設(shè)計要素包括：、

1. 社交臨場感（Social Presence）：場景具象化、高度同步實時響應(yīng)、感知他人情感變化

2. 沉浸感（Immersion）：營造氛圍、增強代入感、突出內(nèi)容與主角

3. 可玩性（Playability）：游戲界面、游戲機制、游戲互動

4. 凝聚力（Cohesion）：將好友聚在一起、吸引更多用戶來玩

2.2 游戲界面設(shè)計

舞臺場景化布局

QQ一起派對能讓用戶創(chuàng)建房間，邀請好友參加線上聚會，促使游戲氛圍具象化。游戲類型聚焦于〝你演我猜〞、〝明星問答〞等猜題游戲，為了增強代入感，讓用戶融入情境之中，我們采用舞臺表演的界面隱喻（Interface Metaphor），借由深色背景突出內(nèi)容與表演者。界面框架選擇一個大畫面與多個小畫面的組合，更貼近輪流上臺表演的游戲類型。通過舞臺場景化布局，模擬線下互動的真實感。

多層次感官體驗

我們真實還原了線下?lián)尨鸬幕芋w驗，通過倒計時動效、實時分?jǐn)?shù)標(biāo)簽，以及搶答成功反饋，增添游戲的緊張感與刺激感。

在游戲過程中，除了通過視頻畫面感知好友的情感變化，用戶的語音狀態(tài)也會實時反饋在頭像上，響應(yīng)搶答題目、好友交談，以及各種表達(dá)情緒的聲音，借著聲音視覺化的效果，搭配視頻與人聲的重現(xiàn)，交織出多層次的感官體驗。

邀請消息實況化

發(fā)送邀請是召集好友的重要途徑，而作為〝邀請函〞的消息，需要傳達(dá)明確的信息，讓用戶一眼就能感知房間內(nèi)的狀態(tài)，包括準(zhǔn)備開始、游戲中、游戲結(jié)束等，避免用戶點擊加入游戲時，卻因游戲已開始或結(jié)束而無法加入。為此，我們將邀請消息實況化，持續(xù)更新當(dāng)前狀態(tài)、參與成員等，讓用戶能實時感知派對房間的變化。

03

——————————

拯救孤獨，陌生人玩法登場

3.1 讓你隨時找到伙伴

排解寂寞心理訴求

QQ一起派對初期聚焦于好友一起玩，但仍不免發(fā)生創(chuàng)建了房間，當(dāng)下找不到好友，或因等待過久而退出房間的狀況，使得創(chuàng)建房間到實際參與的轉(zhuǎn)化率受到影響。從用戶訪談結(jié)果來看，用戶存在排解寂寞的心理訴求，但對象不一定得是熟人好友，因此渴望找到游戲伙伴、快速開始游戲，成為QQ一起派對擴(kuò)展至陌生人玩法的契機。

引入陌生人匹配

針對找不到好友的問題，我們新增了匹配陌生人的能力，用戶可從游戲大廳進(jìn)行隨機匹配，倘若創(chuàng)建房間后找不到好友，也能在房間內(nèi)匹配玩家，降低游戲參與門檻。

此外，進(jìn)一步優(yōu)化房間內(nèi)的界面布局，將游戲卡片縮小平鋪排列，讓用戶一眼就能看到多款游戲，提升對游戲數(shù)量的感知與轉(zhuǎn)化率。在游戲類型上，新增了猜歌與知識問答兩款游戲，并提升現(xiàn)有題庫質(zhì)量，避免游戲趣味性不足，影響用戶留存率。

3.2 游戲大廳情感化設(shè)計

搭建游戲世界觀

為了增強游戲氛圍，我們通過情感化設(shè)計帶領(lǐng)用戶進(jìn)入情景中，讓用戶更好地理解每個玩法，并從游戲玩法與情感訴求提煉出場景元素，以此搭建游戲世界觀，并將故事情節(jié)加以推演，增強趣味性與獨特性，還能進(jìn)一步提升記憶度。

利用光效聚焦視線

光效有利于吸引和聚焦視線，并以不同的表現(xiàn)形式來影響情緒。我們從光的色彩、動效、光感和造型等層面，創(chuàng)造出五種增強感官體驗的光效設(shè)計，將其應(yīng)用在游戲大廳入口，借由不同的光效類型與動畫形態(tài)，強化用戶的世界觀感知。

會講故事的界面

帶有情感的故事會在記憶中發(fā)酵，引領(lǐng)用戶進(jìn)入場景。我們將游戲入口的功能屬性，轉(zhuǎn)化為富有故事性的場景設(shè)計，當(dāng)用戶被故事所吸引，多感官區(qū)域被激活，將會激發(fā)用戶情緒，有利于記憶與理解游戲入口，對游戲產(chǎn)生共情，進(jìn)而超出產(chǎn)品的功能價值，與用戶建立情感鏈接。

例如匹配陌生人入口，使用QQ的IP形象駕駛UFO，準(zhǔn)備召集用戶前往神秘的太空之旅，意味著通過陌生人匹配，你將擺脫寂寞，以光速般的速度找到游戲伙伴、快速開始游戲。通過故事劇情激發(fā)情感共鳴，并適當(dāng)結(jié)合IP滲透品牌價值，吸引用戶參與游戲。

破格設(shè)計能夠加強張力、突出游戲主題，我們運用破格效果的3D圖標(biāo)造型，彰顯游戲的獨特調(diào)性，樹立鮮明的品牌印象。

組件化卡片設(shè)計

組件化除了提高設(shè)計效率，還能從整體一致性考量差異化。我們將游戲卡片、題庫卡片、提示卡片和入口卡片等功能界面，構(gòu)建一套組件系統(tǒng)，讓框架布局貫通全流程，打造體驗一致的可玩性，利于后續(xù)的擴(kuò)充與延展。

3.3 生存戰(zhàn)增添挑戰(zhàn)性

激發(fā)持續(xù)參與動力

根據(jù)游戲可玩性研究，提供挑戰(zhàn)與磨練技巧的機會，對持續(xù)參與游戲的動機有正面影響。有鑒于此，除了提供隨機匹配、召集同好共樂，我們還設(shè)計了極限生存戰(zhàn)玩法，希望借著1v1淘汰賽制增添樂趣與挑戰(zhàn)性，激發(fā)用戶持續(xù)參與的動力，特別是年輕人酷愛這種競技感，擊敗的對手越多，獲得的獎勵就越高，有利于勾起用戶的勝負(fù)欲。

匹配動效強化氛圍

為了營造同場競技的臨場感，我們利用匹配動效強化氛圍。隨著已加入玩家的數(shù)字不斷增加，底部會實時展示用戶頭像，具象化呈現(xiàn)玩家數(shù)量，烘托熱鬧氣氛，消除等待時的焦慮感，讓用戶處于蓄勢待發(fā)的狀態(tài)，而紅藍(lán)對戰(zhàn)布局則進(jìn)一步強化PK宣戰(zhàn)的氛圍。過程中若有玩家遭到淘汰，用戶也能通過底部頭像感知剩馀玩家數(shù)量，以此增強游戲臨場感與成就感。

增強榮譽感與儀式感

每輪擊敗對手時，答題區(qū)域?qū)⒆優(yōu)槿恋膽c祝畫面，搭配撒花特效、頭像聚光燈，營造歡愉的勝利氛圍。而在游戲結(jié)果頁，我們同樣利用色彩和動效的差異對比，塑造勝敗雙方的情緒氛圍，以此增強榮譽感與儀式感。在生存戰(zhàn)登頂挑戰(zhàn)成功的用戶，將會站上頒獎臺授予最高榮譽，在舞臺聚光燈的照耀下，迎接光榮勝利。排行榜有助于強化擊敗眾多好手的感知，激發(fā)勝利者的分享欲。

04

——————————

結(jié)語

QQ一起派對推出后深受用戶喜愛、獲得廣泛好評，調(diào)研結(jié)果顯示，用戶整體評價相當(dāng)高，也樂于將QQ一起派對推薦給好友。

綜而觀之，音視頻除了廣泛應(yīng)用在通訊場景，正逐漸賦能更多創(chuàng)新場景，而娛樂場景更成為兵家必爭之地。QQ一起派對開啟了新的娛樂形態(tài)，充分發(fā)揮音視頻聲影重現(xiàn)的獨特優(yōu)勢，消弭了空間距離，嘗試解決社交游戲產(chǎn)品缺少真實情境的問題，讓游戲過程更具臨場感，就像面對面進(jìn)行游戲一般。未來將從玩法豐富性、游戲挑戰(zhàn)性、題庫可玩性三方面持續(xù)優(yōu)化，打造更好玩的音視頻體驗。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 

作者：騰訊ISUX團(tuán)隊    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

距離業(yè)界首次提出“全鏈路設(shè)計師”這個概念已經(jīng)過去了幾年，從稱謂的變化我們就可以感受到設(shè)計師這一角色職責(zé)的變化。在近幾年的產(chǎn)品設(shè)計工作中，我們和上下游之間的協(xié)作越來越緊密，介入階段越來越往前，新的趨勢對設(shè)計師也提出了更高的要求，包括更深入的產(chǎn)品思考，對用戶的時時洞察，高效的溝通合作，以及細(xì)致的質(zhì)量把控等等。那么如何成為一個全能型的互聯(lián)網(wǎng)設(shè)計師呢？本文以日常工作流程為路徑，為大家整理了一波實用小技巧和小工具。希望能夠幫助大家在保持設(shè)計的專業(yè)度的同時，在工作的方方面面都能夠得心應(yīng)手。

Phase 1

————————————

日常積累

有效的設(shè)計積累讓我們事半功倍。養(yǎng)成隨手記錄的習(xí)慣，逐漸形成自己的素材庫，不僅能夠讓我們在需要的時候能夠快速檢索靈感，偶爾回顧也總能有新的感受。

字體識別神器：WhatFont

當(dāng)你想知道一個設(shè)計精美的網(wǎng)站設(shè)計使用了什么字體時，可以安裝一款叫做 WhatFont 的瀏覽器插件，開啟時鼠標(biāo) hover 到文字上即可快速識別出字體、字號、字重、行高和顏色。對于不習(xí)慣使用控制臺的朋友來說非常簡單實用。

插件最新的版本停留在 2017 年，不過在大部分網(wǎng)頁上都是可以正常使用的。同類產(chǎn)品還有 Fonts Ninja 等，除了識別字體還可以收藏和管理字體，可根據(jù)你的需要進(jìn)行選擇。

用戶體驗設(shè)計檔案: UXArchive

該網(wǎng)站收集了來自世界一流的科技公司的產(chǎn)品用戶體驗流程。例如，你正在設(shè)計“忘記密碼”體驗，需要參考時通常都是打開不同的 App 一個一個體驗和截圖。而通過這個網(wǎng)站，你可以根據(jù)場景快速瀏覽其他公司的示例，對比不同的解決方案。

地址：https://uxarchive.com/

素材管理: Eagle

Eagle 應(yīng)該是很多設(shè)計師耳熟能詳?shù)乃夭墓芾懋a(chǎn)品了，它支持圖片和視頻等基礎(chǔ)格式，有豐富的標(biāo)簽系統(tǒng)和智能分類功能。此外還支持可視的字體管理，也能夠預(yù)覽 PSD 格式（常用的圖形和文稿格式基本都支持），可用于放一些 mockup 素材。自動解析圖片色板，從而允許按顏色搜索也是相當(dāng)實用。

地址：https://cn.eagle.cool/

靈感速記: Flomo

Flomo 是一款非常輕量的筆記工具，用類似發(fā)微博的方式快速記錄一些知識片段。相比 Eagle 用于“剪藏”已有的內(nèi)容，F(xiàn)lomo 更注重主動創(chuàng)造和記錄。產(chǎn)品的功能目前非常簡單，但背后的「卡片筆記法」理念很有意思，提倡先快速積累卡片，然后通過標(biāo)簽和關(guān)聯(lián)讓結(jié)構(gòu)涌現(xiàn)，積累知識的復(fù)利。感興趣的朋友可以了解他們對于“知識管理”的思考。

地址：https://help.flomoapp.com/weekly/orgin

Phase 2

——————————

調(diào)研和分析

當(dāng)我們進(jìn)入到產(chǎn)品設(shè)計工作中時，了解用戶往往是最重要的前提和基石。大公司的團(tuán)隊往往有專職的用戶調(diào)研團(tuán)隊來協(xié)助產(chǎn)品設(shè)計，但對小型一點都團(tuán)隊可能用戶調(diào)研這個流程是全部歸到設(shè)計師角色里的。而且即使有專門的用研報告，直接觀察用戶的行為和描述往往是最直觀的，也更容易洞察到問題和機會。這里介紹兩種我們常用的低成本的方法。

用戶反饋什么: 七麥

如果你的產(chǎn)品是一個成熟的上架了各大應(yīng)用商店的 App，可以通過一些第三方平臺看到各應(yīng)用商店的評分評論匯總，構(gòu)成和趨勢，也可以將自己的 App 和競品放到一起對比。例如我日常使用的“七麥”，可以通過微信訂閱每日評分變化，也可以導(dǎo)出指定時間段的評論的匯總表格，做更深入的檢索和分析。

用戶談?wù)撌裁? 微博

商店評分和用戶反饋通常的內(nèi)容通常比較有針對性，大部分都是圍繞已有的功能。如果想要看到用戶在生活中如何使用我們的產(chǎn)品，使用過程中有什么樣的情緒和感受，看他們?nèi)绾卫斫庠谟玫倪@個東西，則可以去社交平臺上搜索產(chǎn)品的關(guān)鍵詞，常常會有些很有趣的發(fā)現(xiàn)。據(jù)說早期微信的剪刀石頭布的想法就來源于一個微博用戶的分享。

Phase 3

——————————

設(shè)計和打磨

來到我們最熟悉的設(shè)計實操階段。設(shè)計類工具非常多，Sketch 和 Figma 也都有相對豐富的插件市場，這里選擇了幾個我們?nèi)粘Ｊ褂玫男」ぞ邅磉M(jìn)行分享。聰明地使用已有資源，可以幫助我們呈現(xiàn)最好的設(shè)計概念。

Mesh Gradient 網(wǎng)格漸變工具

一款 Figma 插件，Illustrator 里強大的 Mesh 功能在 Figma 里也能用了。做好的漸變還可以保存下來多次復(fù)用。

Runner Pro

如果你主力使用 Sketch，習(xí)慣鍵盤操作，熟悉各種指令名稱，而且有完整的組件庫，那么 Runner Pro 將會是一個很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系統(tǒng)聚焦搜索，通過一個搜索框即可快速完成組件插入，指令運行，插件安裝，以及快速前往某個畫板。

Runner 的組件搜索支持中文，但對于多個關(guān)鍵詞的模糊搜索還是對英文支持比較完整。

Blush 插畫插件

一個由 Pablo Stanley 設(shè)計的免費可商用的手繪風(fēng)格的插圖庫。任務(wù)造型有數(shù)十種選項可供選擇，可以自定義角色的頭發(fā)、褲子、膚色等等，無需打開 Illustrator 即可創(chuàng)建獨一無二的插圖。適合用來做運營插畫，拼用戶故事版，PPT配圖等。

地址：https://blush.design/zh-CN

另外也有越來越多的設(shè)計師開始用 Figma 的原型功能直接做 PPT 了，順應(yīng)這個趨勢他們還提供同系列的 ppt 模板，一鍵套娃。

POSE 人體姿勢參考

在自己畫人物插畫的時候，如果對人體動作和比例難以把握，那一定不能錯過這個插件—POSE。它是我發(fā)現(xiàn)的用于創(chuàng)建解剖學(xué)和身體插圖的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有眾多的粉絲，這是他在 Snapchat 做插畫師時創(chuàng)作的軟件。

地址：https://galshir.com/pose/

動畫曲線預(yù)覽

細(xì)膩的動畫能夠讓體驗更有溫度，這個網(wǎng)站提供了五種簡單的網(wǎng)頁版式和最基礎(chǔ)的三組動畫曲線，你可以選擇最適合你的 demo，體驗不同動畫曲線在實際頁面上的感受。底部還可以調(diào)整具體參數(shù)來達(dá)到想要的效果。

地址：

https://easings.co/

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：騰訊ISUX團(tuán)隊    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

Meet more beautiful colors.

在《騰訊文檔-構(gòu)建科學(xué)有效的色彩系統(tǒng)》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認(rèn)知，以及如何構(gòu)建一個科學(xué)有效的調(diào)色板。

在設(shè)計系統(tǒng)的實際運行中，我們也需要著眼于如何應(yīng)用調(diào)色板，建設(shè)協(xié)同工作流，并給各個角色提供有關(guān)色彩的擴(kuò)展指導(dǎo)，以達(dá)到在騰訊文檔中構(gòu)建一致且有品牌感的數(shù)字界面并有效提升效率的目的。

在建設(shè)騰訊文檔色彩系統(tǒng)的工作中，我們首先構(gòu)建了一個包含品牌色、灰色、輔助色的調(diào)色板，但僅有這個調(diào)色板不足以支撐我們流暢、無障礙的協(xié)同工作。日常工作中，“這里我用哪個藍(lán)色？”“這里我用哪個灰色？”“開發(fā)同學(xué)能否快速的變更某些元素的顏色？”等等問題層出不窮，建設(shè)系統(tǒng)的協(xié)同工作流迫在眉睫。

Chapter 1

——————————

如何建設(shè)？

HIG強調(diào)不要在APP中使用“硬代碼”，即十六進(jìn)制色值進(jìn)行編碼，但前期我們構(gòu)建的調(diào)色板僅有色值，這種硬代碼應(yīng)用到app中導(dǎo)致項目效率低下，維護(hù)也會成本激增。

于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務(wù)（role）、主題（theme），為UI中的任務(wù)指定十六進(jìn)制代碼的色值（hex value），以弭平設(shè)計師之間、開發(fā)與設(shè)計師之間的溝壑，將顏色變量（color token）嵌入設(shè)計組件中與開發(fā)代碼形成聯(lián)動，便于開發(fā)利用程序中的變量來做全局修改，橫向提升團(tuán)隊的協(xié)作效率。

所謂顏色變量，通俗的意思就是可以將一個顏色按任務(wù)用途去抽象，抽象成一個有命名的顏色樣式，這個顏色樣式就是顏色變量。

在設(shè)計或者代碼中，可以通過修改這個顏色變量的值來進(jìn)行全局顏色的更新。例如，我們現(xiàn)在需要給button一個顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實現(xiàn)全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現(xiàn)，顏色變量Fill-01可以在不同主題下，映射不同的十六進(jìn)制色值。這就是我們建設(shè)協(xié)同工作流的的基礎(chǔ)邏輯。

Chapter 2

——————————

為調(diào)色板的基礎(chǔ)色值命名

調(diào)色板的各個色值（hex value）是最底層的基礎(chǔ)樣式，我們將色板上的顏色進(jìn)行規(guī)則化命名，以方便后期將其引用到顏色變量中。

騰訊文檔包含核心藍(lán)色、藍(lán)灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。

*騰訊文檔調(diào)色板命名圖表

Chapter 3

——————————

定義顏色使用規(guī)則

1、 從調(diào)色板中選擇合適的顏色并測試

從調(diào)色板中根據(jù)UI中的任務(wù)挑選合適的顏色并進(jìn)行可用性測試，做具體任務(wù)中顏色選擇的最優(yōu)解。

例如，我們需要選擇一個藍(lán)色作為鏈接色，作為文本，對比度必須達(dá)到4.5:1以上才符合WCAG2.0的可用性標(biāo)準(zhǔn)。經(jīng)過測試我們選擇了primayblue-02作為鏈接色。

騰訊文檔的界面中，灰色系列占主導(dǎo)地位，起著至關(guān)重要的作用，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次。在調(diào)色板中，我們選擇了兩種灰色：中性灰色和藍(lán)灰色，來支撐系統(tǒng)的設(shè)計。藍(lán)色系列是騰訊文檔產(chǎn)品和體驗的主要動作顏色。

同時我們也使用了其他顏色以滿足一些沖突性任務(wù)（警示等）的顏色使用，這些顏色需要謹(jǐn)慎、有目的地使用。

2 、根據(jù)任務(wù)定義顏色的使用規(guī)則

經(jīng)常會有設(shè)計師問，“這里我能用這個灰色嗎？”出現(xiàn)這種問題，根本上還是顏色使用規(guī)則定義的不夠清晰，含混的口口相傳的規(guī)則會導(dǎo)致更多的混亂。于是，需要我們根據(jù)任務(wù)和使用場景把顏色的使用規(guī)則清晰的定義。

首先定義在界面中占主導(dǎo)地位的灰色、藍(lán)色的使用規(guī)則。

藍(lán)灰色_Grayblue：

在騰訊文檔中，藍(lán)灰色與品牌藍(lán)共同建立品牌印象，由此，藍(lán)灰色主要應(yīng)用于與風(fēng)格相關(guān)的場景。包括：圖標(biāo)色、填充底色及大面積的背景色等。

中性灰色_Gray：

中性灰色主要應(yīng)用于一些全局系統(tǒng)行為。如：文本、分割線及交互反饋hover、press等場景。

品牌藍(lán)色_Primayblue：

品牌藍(lán)色主要應(yīng)用于系統(tǒng)中的各種行為，如藍(lán)色圖標(biāo)、button、文本鏈接等。

其次定義在界面中用于警示、狀態(tài)提醒的其他顏色的使用規(guī)則。

紅色_Red：

紅色主要應(yīng)用于系統(tǒng)中需要警示的場景，如紅色警示圖形、錯誤文本、紅色tag等。

其他顏色：

在騰訊文檔中，會針對不同的任務(wù)應(yīng)用不同的顏色，如左滑操作、成功提示、高亮顯示等。

品類圖標(biāo)基準(zhǔn)色：

在騰訊文檔中，不同的品類有不同的基準(zhǔn)色。

Chapter 4

——————————

顏色變量的語義化命名

定義了顏色在系統(tǒng)設(shè)計中的使用規(guī)則后，我們需要根據(jù)顏色變量的使用用途對其進(jìn)行語義化命名。一套好的語義化命名規(guī)則需要易于維護(hù)且具備可拓展性，如果只是將調(diào)色板的色值命名為 blue-01、blue-02... ，語義化的收益并不明顯。哪天設(shè)計團(tuán)隊需要調(diào)整品牌風(fēng)格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對于開發(fā)來說也是巨大的災(zāi)難。

根據(jù) HIG 的建議，語義化命名不應(yīng)該描述外觀或者色值，而是指明這個顏色的任務(wù)用途——標(biāo)簽 Labels，分割線 Sepatators 或者填充 Fill。

在思考如何賦予顏色語義化的命名時，設(shè)計師也需要用更概括和結(jié)構(gòu)化的視角來看待界面設(shè)計，同時也需與開發(fā)同學(xué)達(dá)成一致，使用同樣的命名，滿足以更好地維護(hù)一套收斂和統(tǒng)一的設(shè)計語言。

在騰訊文檔中，顏色的任務(wù)用途定義為為以下幾種：背景色 Background、文本色Text、圖標(biāo)色I(xiàn)con、分割線 Border、透明填充 Transparent fill 、實色填充 Opaque fill 、默認(rèn)交互反饋 Feedback、語義 Intent。統(tǒng)一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達(dá)顏色強度。在需要更明確的用途說明的任務(wù)中，直接描述其用途，例如：hover，pressed、disabled等。

Chapter 5

——————————

建設(shè)團(tuán)隊協(xié)同工作流

以上種種，最終目的在于建設(shè)團(tuán)隊的協(xié)同工作流，將顏色變量（color token）嵌入設(shè)計組件中與開發(fā)代碼形成聯(lián)動，便于設(shè)計利用變量及組件、開發(fā)利用程序中的變量來做全局修改，橫向提升團(tuán)隊的協(xié)作效率。

1、 設(shè)計內(nèi)協(xié)同：在Figma中生成顏色變量

在設(shè)計系統(tǒng)中，顏色變量屬于底層的設(shè)計原子，需要將其生成為顏色變量并嵌入到設(shè)計組件中，便于設(shè)計內(nèi)部使用。我們將已根據(jù)任務(wù)用途命名的色值，生成figma中的顏色樣式（color style），后續(xù)無論是進(jìn)行組件的設(shè)計，還是項目的設(shè)計，都可以直接賦予設(shè)計元素明確的顏色樣式。

2、 設(shè)計組件與開發(fā)代碼聯(lián)動：利用顏色變量表進(jìn)行信息同步

我們生成了一個面向內(nèi)部、外部的顏色變量表，進(jìn)行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協(xié)作實時溝通～）

最終形成了設(shè)計組件庫與開發(fā)組件庫的聯(lián)動，構(gòu)建了一個協(xié)同工作流，橫向提升工作效率。

結(jié)束語

上篇的調(diào)色板設(shè)計后，一直在醞釀這篇調(diào)色板的實際應(yīng)用。在設(shè)計一個較為復(fù)雜、龐大的產(chǎn)品時，提效是永恒的課題。痛過、踩過坑的設(shè)計師應(yīng)該深有感觸，溝通的無力、推動的困難都推動著我們發(fā)動自己的能量去想辦法提效。

設(shè)計師們可以在自己的項目中與開發(fā)同學(xué)多多溝通，嘗試這種方法，去建設(shè)更高效的色彩設(shè)計系統(tǒng)。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：騰訊ISUX團(tuán)隊    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

1.1 交互文檔是什么

交互文檔，是一份用來解釋項目交互方式、內(nèi)容、規(guī)則的說明文檔，也叫 DRD ( Design Requirement Document )。

在過去的分享中，我們有解釋過，B 端項目會包含大量的交互內(nèi)容，需要前期繪制交互原型來展示和確認(rèn)交互方案。

如果是比較簡單的小型項目，或成熟產(chǎn)品的小迭代，那么這樣的連線圖確實就足以表達(dá)交互的意圖和方案了，寫太多注釋文字反而會畫蛇添足提高觀看者的認(rèn)知成本。

但是，如果項目和展示的流程內(nèi)容，邏輯非常復(fù)雜，包含非常多的選項和狀態(tài)，那么單靠原型和連線是絕對不夠的，添加更多的圖文說明就變得非常有必要了。

同時在團(tuán)隊協(xié)作場景中，就需要將這些內(nèi)容制作成一份規(guī)范的 “文檔”，用來進(jìn)行統(tǒng)一的展示、備份、歸檔。

所以做交互光靠畫交互原型是不夠的，“文檔” 就成為必要的輸出成果。

1.2 它和產(chǎn)品文檔的區(qū)別

在產(chǎn)品側(cè)（非開發(fā)），文檔就有好幾類：

- 商業(yè)需求文檔:BRD,Business Requirement Document

- 市場需求文檔:MRD,Market Requirement Document

- 產(chǎn)品需求文檔:PRD,Product Requirement Document

- 交互說明文檔:DRD,Design Requirement Document

- 設(shè)計規(guī)范文檔:DGD,Design Guidline Document

BRD 和 MRD 是一個產(chǎn)品經(jīng)理行業(yè)內(nèi)部也在反復(fù)科普討論的東西，和我們沒多大關(guān)系可以暫時忽略。設(shè)計規(guī)范文檔 DGD 大家應(yīng)該也有概念，比較容易辨識，也不需要在這里強調(diào)。

而產(chǎn)品需求文檔 PRD，是和交互文檔最撞臉的文檔類型。它們的文檔規(guī)格、樣式幾乎一致，還包含大量界限模糊、相互交叉的內(nèi)容范疇，會對新手的理解造成很大的不便。

要理解產(chǎn)品文檔和交互文檔的核心差異，就得從他們各自的工作職能說起，產(chǎn)品經(jīng)理的主要產(chǎn)出是解釋產(chǎn)品要做的功能和邏輯，所有的原型和連線的目標(biāo)都是為了解釋功能本身。

部分產(chǎn)品經(jīng)理會 “順帶” 在這個基礎(chǔ)上增加交互的元素，以及相關(guān)的說明。這恰恰是問題的關(guān)鍵所在，因為產(chǎn)品經(jīng)理制作產(chǎn)品原型的過程是可以覆蓋一部分交互信息的，所以很多設(shè)計師也天真的認(rèn)為交互內(nèi)容是應(yīng)該由產(chǎn)品來出的。

這當(dāng)中一定要關(guān)注里面的 “順帶”，因為一份有效的 PRD 主旨一定不是以交互為核心的，在面對需要大量圖例、連線、方案、解釋的交互問題下面，產(chǎn)品經(jīng)理往往選擇直接跳過，只把功能描述清楚，剩下的就交給交互設(shè)計師還是 UI 設(shè)計師來完成具體的交互方案。

所以，交互文檔就是在產(chǎn)品文檔的基礎(chǔ)上，進(jìn)行交互內(nèi)容的補充，專注于解釋項目的交互內(nèi)容，讓設(shè)計師和前端開發(fā)可以更直觀得理解后續(xù)的工作內(nèi)容。

來自 UEDART 的付費文檔，案例地址：http://vip.uedart.com/interactive.html

交互文檔和產(chǎn)品文檔是相互獨立和補充的，當(dāng)產(chǎn)品文檔無法完成對產(chǎn)品交互的有效解釋時，我們就應(yīng)該選擇輸出獨立的交互文檔，來提升項目協(xié)作的效率。

2.1 主流的交互文檔工具說明

主流的交互文檔輸出有三種方式：

1. Axure/墨刀 導(dǎo)出

2. 一般文檔制作

3. 線上 Wiki 記錄

Axure 和墨刀是用來制作產(chǎn)品原型的軟件工具，也是目前在產(chǎn)品經(jīng)理、交互設(shè)計行業(yè)中應(yīng)用最廣泛的原型工具。

它的主要優(yōu)勢，在于可以比較方便的制作可交互的組件、連線、導(dǎo)出。

當(dāng)然，光制作原型圖并不能叫交互文檔，它們還提供了比較全面的內(nèi)容標(biāo)注、文本記錄、圖形繪制的功能。

這就可以讓我們完成原型繪制以后，結(jié)合頁面結(jié)構(gòu)的管理，添加交互文檔所需的其它信息，并最終輸出文件。

而在一些比較傳統(tǒng)的行業(yè)或外包領(lǐng)域，使用的記錄文檔往往要使用 Word 或 PPT（方便開會演示或要打印）。這就要在原型完成以后，導(dǎo)出原型圖例，并使用這些文檔軟件進(jìn)行文字的記錄和連線。

受限于 Word、PPT 的布局限制（強行分頁），使用它們做交互文檔是非常難受的，并且這些文檔需要保存到本地，存在各種文檔版本管理的問題。

所以還有另一部分也希望使用普通文檔格式記錄，并滿足云端同步、備份、版本管理的團(tuán)隊，就會使用 Wiki 類的工具來制作交互文檔。如語雀、飛書、Confluence、Notion 等工具。

如果只是一些比較小的項目迭代、一次性使用的交互文檔，使用前兩種方法都可以勝任。而真正大型、系統(tǒng)性的交互文檔，往往都使用團(tuán)隊內(nèi)部的 Wiki 進(jìn)行創(chuàng)建和管理。和設(shè)計稿不同，這些使用了內(nèi)部賬號或需要內(nèi)網(wǎng)訪問的文檔資料，是不會沒事發(fā)到網(wǎng)上來分享的，這也是在網(wǎng)上找不到完整交互文檔的主要原因。

2.2 B端設(shè)計師的交互文檔工具建議

和你們網(wǎng)上可以找到的大多數(shù)交互設(shè)計干貨不同，我即不推薦你們使用 Axure/墨刀 來畫原型，也不推薦用它們或普通文檔、Wiki 的形式來輸出交互文檔。因為：

—— 太低效了！

產(chǎn)品經(jīng)理和交互設(shè)計師的主要產(chǎn)出物就是文檔，自然可以耗費比較多的精力和時間去制作原型和編寫內(nèi)容。而 UI 設(shè)計師的主要工作肯定是最終的視覺界面和交付，所以用最復(fù)雜的方法去制作交互文檔，顯然是不合理的。

同時還要提一句，Axure/墨刀 等軟件用來制作一般的線框圖原型，效率實在是太低了。且絕大多數(shù)情況下的頁面跳轉(zhuǎn)、交互都是可以忽略不做的。而且隨頁面增加，它的左側(cè)導(dǎo)航層級、數(shù)量會非常龐大，導(dǎo)致查找和瀏覽的效率進(jìn)一步降低。

在我自己的所有課程和分享中，我始終都建議直接使用你們正在用的云端 UI 設(shè)計軟件直接繪制產(chǎn)品、交互原型并輸出文檔，如即時設(shè)計或 Figma。

原因包含：

- 速度快：能用 Axure 五分之一的時間完成所有原型繪制

- 可復(fù)用：做好的原型方便復(fù)用，而且可以直接在原型上完成后續(xù)設(shè)計

- 交互性：對于表達(dá)交互流程所需的基礎(chǔ)跳轉(zhuǎn)和動效都能滿足

- 更自由：一些需要復(fù)雜圖文結(jié)合的說明方式不再受到普通文檔布局限制

比如下面這樣的原型案例，就可以通過一個簡單的鏈接快速分享出去，或者添加團(tuán)隊成員自由查看。

在我過去長期的實踐體會中，這種方式是優(yōu)勢最明顯，效率最高，最易懂，也符合 UI 設(shè)計師工作需要的。如果項目中有其它因素要求，你們也可以選擇前面的方式輸出。

任何文檔的目標(biāo)都是為了書面記錄和讓看的人更容易理解我們要表達(dá)的信息，不要被固定的方法局限住，要努力去探索適合團(tuán)隊當(dāng)前場景的方式。

3.1 文檔框架結(jié)構(gòu)制定

前面把基本的信息聊完了，這里就來具體講講交互文檔應(yīng)該如何進(jìn)行輸出。

當(dāng)然，輸出交互文檔前需要先理解交互是什么，交互設(shè)計的具體設(shè)計內(nèi)容和步驟。交互文檔是對你已經(jīng)設(shè)計出來的方案的書面記錄，你不能在對交互一無所知的情況下強行編寫文檔。

交互文檔制作首先要確認(rèn)文檔的記錄內(nèi)容和文檔結(jié)構(gòu)。

記錄內(nèi)容指的是你在該文檔準(zhǔn)備放哪些交互內(nèi)容進(jìn)去，并不是每次項目設(shè)計都要把項目所有頁面和流程交互都重做一遍。

比如一次中等規(guī)模的迭代，新增幾個通用的列表頁面，調(diào)整了一些細(xì)節(jié)字段，增加了一個功能流程。那么文檔重點記錄內(nèi)容肯定就是流程而不是所有頁面。畢竟通用的列表頁和細(xì)節(jié)更改，在產(chǎn)品需求評審階段就可以完整的解釋，而功能流程則不行。

如果是全新的項目，包含數(shù)十上百個頁面。把所有流程、頁面的交互內(nèi)容全部表現(xiàn)出來的工作量是頂不住的，在繪制原型的過程中，你就會發(fā)現(xiàn)有大量的重復(fù)頁面、流程和交互。所以制作文檔就要有目的性的對重復(fù)的內(nèi)容進(jìn)行合并，以及只保留重要的頁面和流程。

具體該放什么要考慮項目的實際情況，需要設(shè)計師自己評估。除此以外，標(biāo)準(zhǔn)的交互文檔里面會包含背景介紹、編輯日志、文字圖例、業(yè)務(wù)流程、名詞解釋、頁面結(jié)構(gòu)等等。

這些 “文縐縐” 的細(xì)節(jié)，并不是必備的，你可以根據(jù)當(dāng)前場景自己決定需要加哪些。比如項目、業(yè)務(wù)背景前面的產(chǎn)品需求已經(jīng)講清楚了，業(yè)務(wù)流程、名詞解釋團(tuán)隊成員也都了如指掌的時候，那么這些頁面模塊就完全沒有放的必要。

并且，基于前面對放置內(nèi)容的考慮，結(jié)構(gòu)的順序并不一定要類似下方案例，完全按照產(chǎn)品的導(dǎo)航目錄來走。

所以，根據(jù)一個中等規(guī)模的迭代項目，我會制定一個這樣的一級文檔結(jié)構(gòu)。

- 基本信息：項目的簡單信息，快速目錄，參與人信息等

- 基本組件：涉及的相關(guān)組件展示和交互規(guī)則說明

- 原型一覽：本次迭代涉及的所有頁面原型和連線一覽

- 流程介紹1：流程1的所有頁面、狀態(tài)、說明展示

- 流程介紹2：流程2的所有頁面、狀態(tài)、說明展示

- 流程介紹3：流程3的所有頁面、狀態(tài)、說明展示

每個1級文檔結(jié)構(gòu)對應(yīng) UI 軟件中的 Page 目錄，力求所需的 Page 數(shù)量越少越好，而不是像 Axure 的做法一樣密密麻麻的。

結(jié)構(gòu)可以根據(jù)復(fù)雜程度做進(jìn)一步的細(xì)分，它像寫文章的大綱一樣，幫助我們提前規(guī)劃好后續(xù)完成文檔所需的內(nèi)容和工作量。

3.2 關(guān)于連線和標(biāo)注信息

有了結(jié)構(gòu)，就要在對應(yīng)的 Page 中填充內(nèi)容了。其中一般的文字介紹、流程圖、思維導(dǎo)圖，只要正常輸入或?qū)?dǎo)出的圖例黏貼進(jìn)來就可以。

而針對具體的交互內(nèi)容，流程解釋上，則重點處理連線和標(biāo)注說明。比如下面是我自己在課程演示中的一個簡單的交互流程演示案例。

在 UI 軟件中，制作連線其實是很簡單的事情，只要畫出一個直線，再設(shè)置箭頭和尾部圖形、描邊色彩和粗細(xì)即可。

然后，將該線段的圖層放置在畫布之外，起點放置在觸發(fā)交互的區(qū)域之中，終點尖頭則緊貼目標(biāo)畫布的邊緣（不用特意延伸進(jìn)畫布內(nèi)）。如果使用水平、垂直的方式連接兩個畫布，那就可以雙擊進(jìn)去添加錨點制作 90 度的折角。

連線的應(yīng)用是非常簡單的操作，不要舍近求遠(yuǎn)通過插件或是其它的一些功能來實現(xiàn)。而除此之外，我在文檔中添加的解釋性文本主要有兩種，交互事件和交互規(guī)則。

交互事件代表了連線的兩個頁面是如何被觸發(fā)跳轉(zhuǎn)的，所以我會在線段中帖一個文字卡片，解釋觸發(fā)的條件和交互操作是什么。

然后，就是頁面或流程中的交互細(xì)則，包含兩個部分，數(shù)字標(biāo)簽和對應(yīng)文字注釋。它們都是用 Auto layout 可以快速制作出來的組件，每次要做備注的時候，只要復(fù)制標(biāo)簽到頁面上，設(shè)置對應(yīng)的數(shù)值，再將右側(cè)的文字卡片復(fù)制到頁面旁邊，再加上對應(yīng)的數(shù)字、內(nèi)容信息即可。

在設(shè)計軟件中，畫布的自由度極高，你想要怎么備注和添加內(nèi)容都沒關(guān)系，只要在內(nèi)容翔實的基礎(chǔ)上保證 —— 團(tuán)隊成員能看懂，就是一份優(yōu)秀的交互文檔。多在繪制過程中和同事溝通，優(yōu)化展示的做法，可以避免很多會出現(xiàn)的問題，進(jìn)一步加速我們的制作效率。

3.3 文檔的團(tuán)隊協(xié)作應(yīng)用

將文檔全部做完以后，最終就是關(guān)于交付和協(xié)作的問題了。

既然我們使用線上的 UI 軟件來完成交互文檔的制作，那么文件設(shè)置公開訪問權(quán)限，再分享鏈接自然是最簡單的辦法。

但每次項目分享個網(wǎng)頁鏈接，或者并行有好幾個項目，需要其它成員自己去收藏網(wǎng)址，也是挺麻煩的。所以盡量充分應(yīng)用軟件中的團(tuán)隊協(xié)作功能，通過創(chuàng)建一個團(tuán)隊，添加成員，讓他們自行查看當(dāng)前文件目錄中的交互文檔。

查看過程中，團(tuán)隊其它成員可以通過評論的功能對交互內(nèi)容進(jìn)行糾錯、提問、建議，方便我們進(jìn)行優(yōu)化改進(jìn)。

通過這種簡單高效的文檔協(xié)作模式，我們可以非?？斓猛瓿烧w交互內(nèi)容的定稿，并開始后續(xù)的工作。

再回到前面的話題，我們是 UI 設(shè)計師，不是全職交互設(shè)計。原型文檔輸出完了，下一步可是要做視覺界面的，所以交互文檔就可以不用管了嘛？

交互文檔的最佳狀態(tài)是 —— 應(yīng)用最終界面圖例解釋交互內(nèi)容。

也就是當(dāng)我們把所有頁面內(nèi)容設(shè)計完成后，強烈建議將界面的展示和交互文檔進(jìn)行整合。除了前端和產(chǎn)品可以看到最終的交互落地效果外（有時候最終設(shè)計和前面的交互不一致），還可以直接通過這個文檔查看界面數(shù)值標(biāo)注，而不用往返于交互和設(shè)計文檔來回切換，這才能讓文檔作用最大化。

以上就是關(guān)于交互文檔的相關(guān)解釋。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 

作者：酸梅干超人    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

網(wǎng)上對介紹導(dǎo)航文章已經(jīng)有很多，有部分已過時，今天自己再重新整理一遍，方便自己也方便更多人理解。

如2、社區(qū)產(chǎn)品引導(dǎo)用戶發(fā)帖子

如3、凸顯核心功能，如百度地圖、高德等

優(yōu)點：

 藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：UX設(shè)計筆記    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

這些年里，這款工具進(jìn)行了快速的迭代和更新，響應(yīng)設(shè)計師們的需求，不斷完善功能，成為設(shè)計行業(yè)推薦率（NPS）最高的軟件之一。

尤其是作為一款優(yōu)秀的買斷制軟件，不僅定價合理，甚至 5 年來 ￥199 的售價分文未漲。 

而我同期開始用的 Ulysses（用它寫了兩本書，寫過的公眾號內(nèi)容超100W字）、MindNode、Notability 等，全都在這期間從買斷制改成訂閱制，甚至訂閱價格還逐年上漲？？

我從來不吝嗇于贊美優(yōu)秀的軟件工具，尤其是保持初心以純粹的產(chǎn)品功能來服務(wù)用戶的那種更甚。五年前我作為最早就推薦它的人之一，五年后我不介意再夸它一次。 

它就是 —— Eagle。 

Eagle官網(wǎng)：https://cn.eagle.cool/

前面說過，Eagle 是一個設(shè)計資源管理器，它可以做的事情非常多，但我不是要在這里寫功能介紹的，而是來分享一下，我都用它做了什么。

2.1 圖片采集 

圖片采集是我使用 Eagle 的核心目的，他包含豐富的采集形式完美覆蓋我的實際使用需要。 

第一類采集形式就是通過瀏覽器插件或截圖工具，將網(wǎng)頁中看見的圖片下載到本地。 

第二類采集形式，則是通過粘貼花瓣或 Pinterest 的畫板地址，批量采集該畫板的所有圖片。這是我最喜歡的功能，沒有之一。

花瓣和 Pinterest 這類網(wǎng)站，真正的精華是優(yōu)質(zhì)用戶自己收錄的圖庫，而不是直接搜索出來的結(jié)果。批量采集，就是讓我在找到優(yōu)質(zhì)圖庫后，用最簡單的方式下載這些被精挑細(xì)選出來的圖集。 

2.2 篩選排序 

因為批量下載很方便，我可以很快的針對同一類目收集出成千上萬的內(nèi)容。但同一個類目下載那么多圖片或素材有意義嗎？ 

數(shù)量從來不是我追求的目標(biāo)，我會將任何類目的內(nèi)容數(shù)量進(jìn)行精簡，只保留其中最精華的一小部分，即使它們是由一批最優(yōu)秀的設(shè)計師收藏的圖庫，我也只取精華中的精華。 

但是，光靠一張張圖看過去打星再篩選，會把我累死。于是，我就會利用 Eagle 的篩選與排序功能，快速剔除劣質(zhì)內(nèi)容，縮小選擇范圍。 

比如之前我分享過的 UI 配圖的素材，包含十幾個顏色的分類和上千張精選圖片。原始圖片超過五萬張，是我從上百個攝影畫板里批量采集下來的。

應(yīng)用到大小、尺寸排序，色彩篩選，星級篩選等多種手段配合，幫助我快速篩選出各自質(zhì)量最好的 100 張圖片。而這前后大概只用了兩小時的時間。

2.3 資源管理 

通過前面兩個功能，我收集和篩選了海量的靈感元素。但這么多元素我們不可能無序放置，需要根據(jù)一定的規(guī)律進(jìn)行編組和管理。所以這里就要分享 Eagle 的資源管理功能了。 

Eagle 的資源管理包含三個方向： 

1. 普通文件夾：類似電腦文件夾的邏輯，可以進(jìn)行排序和上下級設(shè)置，收納 

2. 智能文件夾：通過一定條件設(shè)置，篩選出對應(yīng)圖片和素材的動態(tài)文件夾 

3. 分類標(biāo)簽：即可以作為分類來使用的標(biāo)簽系統(tǒng)，可以為一張圖片或素材打上多個分類標(biāo)簽

我的資源管理方法論一直崇尚的是極簡主義，能用普通文件夾管理的情況我就一定不用智能和標(biāo)簽。不是說這些功能不好，而是因為它們需要對素材進(jìn)行二次的處理和維護(hù)，只有在必要條件下才會使用。 

我的素材資源管理是首先構(gòu)思我會用到的幾個大類，每個大類下會包含幾個二級分類，即 Eagle 中的1級文件夾，然后再創(chuàng)建對應(yīng)的文件夾并命名和添加色彩，比如下面示例。

不要奢望一開始規(guī)劃分類能做到盡善盡美，只要大的方向上確定了，然后再根據(jù)日常收集的需要慢慢去添加下級文件夾，而這一級就沒有那么嚴(yán)格的限定，用到哪加到哪。

只有在一些非常特殊類目下，我才會去為圖片和素材增加標(biāo)簽，而不是為了打標(biāo)簽而打標(biāo)簽。比如我收集的學(xué)員作業(yè)也存在 Eagle 中，會包含課程期數(shù)、作業(yè)類型兩個維度，我就需要用標(biāo)簽進(jìn)行管理，方便我后續(xù)進(jìn)行跨文件夾的查看與篩選。 

2.4 素材預(yù)覽

除了基礎(chǔ)的靈感圖片外，我還往里面存了很多其它文件素材，包括但不限于下面這些種類。 

Eagle 能作為一個設(shè)計資源管理工具，并不是因為可以添加文件夾和標(biāo)簽，再實現(xiàn)一遍 MacOS 的資源管理功能。而是因為它支持多種文件格式的快速預(yù)覽。 

它比 Mac 自身的快速預(yù)覽更高效（后面會解釋），同時作為雙系統(tǒng)用戶，我得以在 Windows 系統(tǒng)下如下圖快速查看素材預(yù)覽，而不是安裝格式支持零碎的插件（或流氓軟件）來實現(xiàn)。

尤其是 Sketch、XD、Mindnode 文件，有了縮略圖，就不用通過打開源文件來查看內(nèi)容。并且字體文件支持在目錄中直接啟用和停用，可以非常方便的實時管理本地字庫，保證我在設(shè)計軟件中只會出現(xiàn)必要的字體，而不會全部顯示出來。

2.5 網(wǎng)址記錄 

Eagle 還有個特別的功能 —— 網(wǎng)址記錄，這也是我最常用的功能之一。 

早前有先用 Pocket 然后轉(zhuǎn)移 InstaPaper 和 Cubox 來收錄網(wǎng)上看到的優(yōu)質(zhì)設(shè)計文章，方便我需要引用原文和整理思緒的時候回看。

雖然最后采用的 Cubox 也是一個優(yōu)秀的稍后閱讀工具，但長期使用下來我還是想盡量打開少的軟件來完成我的工作。所以，自然而然的，我還是把網(wǎng)址全部遷移回 Eagle 中。 

只要安裝 Eagle 瀏覽器插件，我就可以快速收集網(wǎng)址到 Eagle 目錄中，之后隨時進(jìn)行查看。 

可能有的同學(xué)喜歡用網(wǎng)頁整頁截圖來收集文章，只是我不太喜歡用圖片格式查看文本，所以這個根據(jù)個人喜好即可。

2.6 項目管理 

同時，我不止拿 Eagle 管理靈感和素材，也直接拿來做項目管理。 

在 Eagle 庫文件進(jìn)行團(tuán)隊同步以后，針對每個項目創(chuàng)建獨立的項目文件夾，用來收錄相關(guān)的文檔、靈感圖、情緒版、配圖和設(shè)計文件。

尤其是項目前期收集靈感圖和情緒板的階段，多人共同收集和編輯的結(jié)果可以最方便的查看和進(jìn)行評價，非常好的優(yōu)化我們的協(xié)作流程和效率。 

2.7 作業(yè)評審 

作為一個設(shè)計講師，要觀察學(xué)生的作業(yè)和進(jìn)行點評。自然而然，我也會優(yōu)先將所有作業(yè)添加到 Eagle 中去。 

通過對每份作業(yè)前期的打分，標(biāo)注，來進(jìn)行后面點評課程的分享和講解。

同時，這些收集的作業(yè)，需要在后續(xù)其它場景中作為正、反面的案例。所以對作業(yè)的評級和標(biāo)簽就變得必要起來，在相關(guān)場景下通過創(chuàng)建智能文件夾快速篩選出范圍內(nèi)的圖例。 

以上就是我使用 Eagle 最重要的 7 個場景，雖然實際應(yīng)用還遠(yuǎn)遠(yuǎn)不止它們，但因為篇幅關(guān)系就先介紹到這里。

Eagle 作為一款被我長期使用和推薦的工具，不僅僅是因為上面的使用場景，它們是結(jié)果。所以，我要從更底層的角度，來解釋它的不同之處和特點。

3.1 獨立的 Eagle 庫文件 

從上線以來，Eagle 有一個飽受誤解和詬病的底層設(shè)計，就是它的 “素材包” 文件 .eaglepack 。用戶需要先創(chuàng)建一個 “庫“，之后添加的所有素材、文件，都會被保存到這個庫文件中去。

換句話說，相當(dāng)于 Eagle 在你的電腦中創(chuàng)建了一個特殊的文件夾，用來保存你置入的文件。即使你添加的素材是已經(jīng)下載到本地，它也會再 “復(fù)制” 一份到這個庫中。 

很多設(shè)計師對這個邏輯感到很費解，為什么本地存的好好的，Eagle 要再復(fù)制一份，完全就是浪費系統(tǒng)資源和時間的做法。如果無法理解這個邏輯，就是不具備 ”產(chǎn)品思維“ 的特征之一。 

我們先從和多人舉例的 Bridge 和 Lightroom Classic 講起。

它們的運作機制，是通過運行該軟件，來讀取你的硬盤目錄和對應(yīng)文件。使用它們并不會額外復(fù)制文件出來，即使你在軟件中置入素材，它們也只是幫助你正常保存到硬盤的對應(yīng)位置。 

為什么這類工具會被我們放棄，有下面這些原因： 

第一，它們的核心一直都不是全領(lǐng)域的設(shè)計資產(chǎn)管理，而是圍繞在 Adobe 體系下的照片、視頻、矢量圖等多媒體項目素材管理，尤其是攝影相關(guān)項目。 

第二，就像對比 Photoshop 相較與 XD 一樣，龐大的軟件體積和功能，對啟動速度和硬件資源消耗帶來沒辦法忽視的負(fù)面影響，降低操作的效率。 

第三，就是比較值得深入思考的地方，那就是管理范圍太廣。直接讀取硬盤就是讓所有文件夾被暴露在管理器中，多出大量非必要的目錄和文件，嚴(yán)重增加我們的決策成本和管理成本。 

范圍太大或自由度太高并不是什么好事，就像 iOS 的相冊一樣，它是個封閉的圖片庫，不像安卓一樣讀取其它硬盤文件夾，從而讓相片的管理更簡單明了。 

自由雖然可以做更多事，但這些沒有必要的可能性增加就只會變成決策和行為中的負(fù)擔(dān)。簡潔明了，才是高效的前提條件。 

第四，就是設(shè)計文件的 ”預(yù)覽效率“ 問題。不管電腦的性能怎么提升，大型位圖的渲染都是非常消耗資源的工作。不管是動輒幾 G 的 PSD 素材文件，還是高達(dá)幾億像素的超清圖片，加載都是需要等待的。 

比如下方目錄中的作業(yè)文件，因為很多同學(xué)導(dǎo)出畫布不考慮圖片質(zhì)量尺寸，所以往往會出很多 1W*1W 像素以上超過 30M 的位圖。

當(dāng)這么多大型位圖聚集在一起，Bridge 完全加載出它們的縮略用了整整 2 分鐘的時間……雖然 Bridge 會讓你覺得久第一次打開慢以后就好了，這個功能的代價是生成了大量的 ”緩存”，即這些縮略圖會暫時保存到緩存文件夾中。

緩存文件都只是過客，在你格式化系統(tǒng)，換另一臺電腦打開，或者緩存超過了上面設(shè)置的 50G，那么舊的文件就會被刪除，你還是要重新加載該文件的縮略圖。相信我，超出緩存容量是非常容易的事，即使你加到 100G 也一樣。 

Eagle 的庫特性，是在添加素材進(jìn)庫之前，會生成一個對應(yīng)的縮略圖文件，之后 Eagle 讀取素材列表的時候就是加載這個只有幾十 KB 不到的小文件，而不是解析原圖。 

這種策略帶來的幫助除了在文件夾之間切換高效自如，也對本地內(nèi)存的壓力有非常大的緩解。 

在一般資源管理中，一個文件夾內(nèi)有幾千張高清圖片時，持續(xù)滾動到目錄底部就會發(fā)現(xiàn)越來越卡，因為占用的內(nèi)存越來越多，直至達(dá)到臨界點釋放掉上方列表加載的內(nèi)容（上滾會重新加載）。相信有用相機的同學(xué)一定很了解這種感受。 

綜合各種問題和影響，自建庫，并為每個素材生成不會被刪除的縮略圖就是最好的選擇。 

這不僅僅是 Eagle 一個工具的做法，即使 Adobe 也在 Lightroom 應(yīng)用了相同的策略，新 LR 導(dǎo)入圖片素材到它的自建庫中進(jìn)行管理，同時生成縮略圖用于列表加載（降低高像素調(diào)節(jié)延遲）。而老版的 LR 雖然還沒下架，但為它增加 Classic（古典） 的后綴，所以它們認(rèn)為哪種做法更有潛力，你們自己也能判斷了對吧？

3.2 為什么不能聯(lián)網(wǎng) 

今天我們使用的絕大數(shù)軟件都是 SaaS（微軟：基于web的軟件服務(wù)），自帶聯(lián)網(wǎng)備份和同步，但是 Eagle 只能保存本地卻不符合我們的 “習(xí)慣”，這是為什么？ 

因為成本是沒辦法控制的，重度用戶成百上千 G 的硬盤占用，是不可能輕易使用云服務(wù)來實現(xiàn)同步的。這些動輒幾 G 的 PSD 文件或其它大型設(shè)計文件，會讓整個同步過程充滿不確定性和沖突。 

同時，云同步是一種成本特別高的服務(wù)類型，和一般的云存儲空間不是一種概念，想要大容量又要免費，是不可能的。Adobe 同步盤 1T 容量港區(qū)售價 68 港幣，蘋果 iCloud 同步盤是 2TB 68 元/月。 

算起來他們的價格并不貴，但一定要清楚 Adobe 和蘋果云都是為了自家生態(tài)服務(wù)的，而且作為軟件業(yè)巨頭有自己的大型數(shù)據(jù)中心，降低云服務(wù)成本。類似 Eagle 這樣的初創(chuàng)團(tuán)隊是不具備這種條件的，即使推出了，價格也不會便宜。 

可能還有人會對比花瓣 Pro，它就支持云同步。但是，花瓣 Pro 只是官方網(wǎng)站的本地客戶端，更方便的訪問自己的官網(wǎng)個人中心，無法收集和整理圖片以外的其它素材，所以同步起來容易。

Eagle 的數(shù)據(jù)就只能保存本地，或者保存在笨拙的移動硬盤內(nèi)，隨身帶著嘛？肯定也不是。 

庫文件的另一個管理好處，就是方便做備份。在今天同步盤服務(wù)逐漸成熟的環(huán)境下，你可以選擇購買類似 Dropbox、堅果云這類同步網(wǎng)盤，通過它們實現(xiàn)備份和多設(shè)備同步。

或者，可以購買群暉、威聯(lián)通、極空間為主導(dǎo)的個人云盤硬件，實現(xiàn)空間更大、更靈活的使用體驗。

如果有同學(xué)不知道怎么同步的，我會在后面分享。 

3.3 ARM 硬件的適配 

最后一點，就是對蘋果 ARM 架構(gòu)的適配了。在 Eagle 2.0 版本中，快速適配了 Mac 的新硬件架構(gòu)，從而讓軟件的運行、讀取效率遠(yuǎn)遠(yuǎn)高于上一個版本，做到了絲般順滑的地步。

對軟件本身的優(yōu)化也是速度的保障之一，相信 Bridge 用的多的同學(xué)一定忽略不了它無處不在的延遲與卡頓。

4.1 Eagle 庫的同步方法 

Eagle 如果要進(jìn)行網(wǎng)絡(luò)的備份和同步，那么一定要分清楚同步盤、網(wǎng)盤、移動硬盤的區(qū)別。 

其中，網(wǎng)盤和移動硬盤基本上是一樣的，它們的使用特點就是我們要主動把要保存的東西，拖拽進(jìn)硬盤目錄內(nèi)。移動硬盤備份速度還好點，網(wǎng)盤的備份就要非常久的時間。 

如果你有兩臺電腦，使用移動硬盤的方案就得一直隨身帶著，用哪臺插哪臺上。非常容易在第二天忘記拔掉，然后回公司的時候沒庫可用。使用網(wǎng)盤的方案，那就更不可能的頻繁的備份和在另一臺電腦中下載。 

類似 Dropbox 或 同步盤工具，就是用來解決這類問題的。簡單點說，同步盤的原理就是本地安裝一個同步軟件和云端的服務(wù)器進(jìn)行通信，這個同步軟件會綁定相關(guān)的本地文件夾。于是，這個文件夾內(nèi)有任何文件的變更，同步軟件就會自動把變更的軟件傳輸?shù)椒?wù)器上。 

而同步盤的特點并不是只能客戶端和服務(wù)器一對一傳輸，而是可以多對一同步。如果服務(wù)器內(nèi)容更新，它就會把更新的數(shù)據(jù)實時推送給其它客戶端，更新它們本地的文件。

通過這種模式，就能實現(xiàn)自己多臺設(shè)備，或者團(tuán)隊多個成員設(shè)備的文件夾實時同步，無需你手動進(jìn)行操作。 

當(dāng)然，同步盤對服務(wù)器的資源占用與消耗遠(yuǎn)遠(yuǎn)大于一般網(wǎng)盤，所以基本只有付費的工具，而這種帶給我們生產(chǎn)力的提升和數(shù)據(jù)安全的預(yù)算是有絕對必要的。 

如果使用蘋果的同學(xué)，可以通過將 .eaglepack 保存到關(guān)聯(lián) iCloud 的文件夾即可（最好“文稿”里）。蘋果系統(tǒng)就會自動開始同步，其它 Mac 電腦就能實時接收。 默認(rèn)的空間肯定不夠用，建議開通 200G 容量的服務(wù)。

如果用專業(yè)同步云軟件，以堅果云舉例，下載完客戶端，只要完成關(guān)聯(lián)包含 .eaglepack 的文件夾，那么該文件夾就會啟動同步。再在別的電腦中安裝堅果云，就可以把該文件夾下載下來并自動同步。

4.2 靈活使用網(wǎng)頁采集

我收集靈感素材是非常有目的性的，比如一個項目需要的配圖素材，我會一口氣去收集幾十張覺得合適的圖。

Eagle 有一個瀏覽器的采集插件，這個插件非常好用。只要拖動瀏覽器的圖片，就會出現(xiàn)對應(yīng)的采集彈窗，把鼠標(biāo)移動到對應(yīng)目錄上就可以完成采集。

如果你覺得整個頁面的圖片都想保存，也可以在插件圖標(biāo)中使用批量收藏按鈕（或快捷鍵），就可以采集整個頁面中的所有圖片，以及通過尺寸篩選對應(yīng)尺寸。

應(yīng)對日常看到的優(yōu)質(zhì)作品、靈感圖，也可以非?？焖俚膶崿F(xiàn)采集?？梢宰罘奖愕氖占{我們自己的采集資料。

4.3 UI 靈感庫的搭建模式 

作為移動端 UI 設(shè)計師來講，收集日常見過的優(yōu)秀 APP 界面，是必要的職業(yè)素養(yǎng)。而使用 iPhone + MacOS 再結(jié)合 Eagle 的話，這個過程就會變得非常的簡單。 

首先以完整頁面收集為例，之前看過不少人推薦使用 iOS 的跨設(shè)備復(fù)制圖片到 Mac 中黏貼的操作，是完全沒有必要的，因為一次只能復(fù)制一張截圖。 

你要做的就是開啟相冊的云同步，日常使用 iPhone 時把想要收集的頁面進(jìn)行截屏即可。每過一段時間，在電腦的相冊中打開 ”截屏“ 相冊，就有你這段時間收集的所有截屏?？蜻x相關(guān)內(nèi)容，拖進(jìn) Eagle 對應(yīng)文件夾中就完成收集，然后再刪除原圖。 

而且因為相冊特殊的機制，直接拖拽出的圖片是壓縮后的版本，讓截圖的文件的體積大幅度縮小，從3M 變成 300K（完全夠看），非常好的降低硬盤占用量。 

除了收集頁面，更重要的 UI 靈感是頁面中的 ”組件“，我們需要根據(jù)組件為目標(biāo)去收集相關(guān)的案例。直接拖進(jìn)整頁截圖的方式就不太合適，比如下面的瓷片區(qū)案例區(qū)。

所以，我們要開啟 Eagle 的自帶截圖功能，并設(shè)置好你覺得順手的快捷鍵。

記得打開第一個選項 ”彈出分類“，就可以每次截圖后選擇指定的文件夾。不管是你的截圖，還是網(wǎng)上的其它案例，你都可以用最高效的方式收集這些組件樣式，輕易搭建自己的組件靈感系統(tǒng)。

4.4 文件的自動導(dǎo)入

前面講過，我會用 Eagle 來放 Mindnode 這類思維導(dǎo)圖文件。但是，Mindnode 先創(chuàng)建保存，再拖進(jìn) Eagle 的步驟太麻煩了。 

所以，我正常新建并保存 Mindnode 思維導(dǎo)圖會到它默認(rèn)文件夾中，然后使用 Eagle 的文件夾檢測功能關(guān)聯(lián)它，之后所有保存的文件就會出現(xiàn)在 Eagle 的目錄中。

之后，我編輯和查看老的 Mindnode 文件就在 Eagle 中進(jìn)行了。這么做的好處，還可以讓我使用 Windows 系統(tǒng)的時候能夠正常預(yù)覽思維導(dǎo)圖。 

4.5 高效的字體的管理

Eagle 是可以管理字體的，我把所有正在用或收集的字體都放進(jìn)了 Eagle 的字體文件夾中。

可能你們會有疑問字體丟進(jìn)字庫就行了，還管理它們干什么？或者說有字由之類的字體軟件，用 Eagle 干什么。 

一方面是我會盡量精簡使用工具的數(shù)量，另一方面，就是使用團(tuán)隊同步盤的時候，我們的團(tuán)隊字庫是統(tǒng)一的，隨時可以找到啟用的，最快解決其他人的設(shè)計文件字體缺失問題。 

同時，當(dāng)我在使用 UI 軟件設(shè)置字體覺得選擇起來太困難時，就會去關(guān)閉掉大多數(shù)最近不會用的字體。實現(xiàn)這個操作非常的簡單，只要新建 ”智能文件夾“，并添加選項 ”字形文件“ 和 ”已安裝“，那么啟用的字體就會全部出現(xiàn)在這個列表中。

用一兩分鐘的時間就可以批量選擇你想要停用的字體，右鍵停用即可，它們就會自動從智能文件夾中消失。你可以一直保留這個智能文件夾，每次清理只需要一兩分鐘時間。 

目前上方截圖中的很多案例還不是最終的完整版，最近上海疫情居家隔離，大多數(shù)工作暫停中，我在閑暇時就開始重新整理 Eagle 庫。因為以前堆積了很多冗余的東西，所以這次我把整體素材都導(dǎo)出后重新進(jìn)行整理中，也是為什么會寫這篇內(nèi)容的原因。

Eagle 帶給我最大的價值，就是為我和團(tuán)隊節(jié)省了海量的時間，讓我有可以更快的找到參考素材，更快的整理分類，更好的同步項目文件。 

上面分享的很多體驗和總結(jié)，都是在 5 年來長期使用中一點點摸索，適應(yīng)，并形成習(xí)慣的。任何工具的使用與自己工作學(xué)習(xí)的結(jié)合，都是漸進(jìn)磨合的，每個人都可以在這個工具中挖掘出適合自己的用法。 

但依舊要給大家一個建議，不要為了收集而收集，也不要沉迷與堆積素材的數(shù)量，讓它為我們服務(wù)，恰到好處的出現(xiàn)在我們的實踐過程中。

作者：酸梅干超人   來源：站酷

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司