產(chǎn)品設計工具有哪些？（推薦產(chǎn)品設計工具的8大規則）
更新時(shí)間：2026-05-04 20:23:09
來(lái)人人都是產(chǎn)品(′ω｀)產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】，BAT實(shí)戰派產(chǎn)品總監手把手系統帶你學(xué)產(chǎn)品、設計學(xué)運營(yíng)。工具
所以我(wo)重新審視了之前文章中提出的有推工具類(lèi)產(chǎn)品的三個(gè)特點(diǎn)：效率、智能、薦產(chǎn)計工具個(gè)性化，品設發(fā)現僅僅是大規這3個(gè)詞語(yǔ)，概括性太強，產(chǎn)品卻很難細節的提出??我們隊工具類(lèi)產(chǎn)品的期望，所以結合個(gè)人的理解，我對這三個(gè)對象進(jìn)行了重新分析和細化，總結出??來(lái)的8個(gè)詞匯來(lái)形容這一類(lèi)產(chǎn)品的設計方向：
簡(jiǎn)潔的快速的正確的易理解的美觀(guān)的主動(dòng)的個(gè)性化的引導性強的8個(gè)形容詞簡(jiǎn)( ?ω?)潔的在這類(lèi)產(chǎn)品中，個(gè)人認為沒(méi)有ヾ(′?｀)?絕對意義的簡(jiǎn)潔，如果我們期望得到一個(gè)帶有留白之美的頁(yè)面，這種期望很可能(╯°□°）╯︵ ┻━┻會(huì )受到打擊…..
在設計過(guò)程中，我曾經(jīng)不止一次的希望(°□°)將眾多的操(′?_?`)作做歸納整理，或者收起來(lái)，或者直接減掉，然而從用戶(hù)反饋過(guò)來(lái)的情況來(lái)看，精簡(jiǎn)之后的效果反而增加了系統(tong)的答疑量，這里面當然也存在著(zhù)一些對用戶(hù)操作的判斷失誤，但背后卻反饋出一個(gè)問(wèn)題：這類(lèi)產(chǎn)品的用戶(hù)，對(dui)于操作的定位，有(′?｀*)著(zhù)最高優(yōu)先級的要求，這也就是為什么即便我們的產(chǎn)品頁(yè)面已經(jīng)很復雜，但仍然需要支持這些功能在??首屏顯示的原因。
如何做到真正的簡(jiǎn)潔？
我個(gè)人認為簡(jiǎn)潔可以從以下幾個(gè)方面入手：
導航的簡(jiǎn)潔，導航的簡(jiǎn)潔意味著(zhù)用戶(hù)(╯‵□′)╯可以快(′?｀)速的理解產(chǎn)品的各部分功能，當然，這對產(chǎn)品的架構有著(zhù)比較高的要求，我們需要明確的劃分產(chǎn)品中(zhong)的各個(gè)子系統以及子系統之間的優(yōu)先關(guān)系。盡量用最合理的層次(′?｀)來(lái)引導用戶(hù)使用。視覺(jué)層次的簡(jiǎn)潔，當頁(yè)面信息繁雜時(shí)，??我們很多時(shí)候是依托于視覺(jué)的處理來(lái)讓用戶(hù)清晰的分辨出各部分區域，所謂視覺(jué)層次的簡(jiǎn)潔，就是盡量用最少的視覺(jué)分層，給用戶(hù)植(′?｀*)入分區的感覺(jué)，避免視覺(jué)效果的大量使用而導致(′?_?`)頁(yè)面更加復雜。頁(yè)面信息的精簡(jiǎn)，這是我們必須面(mian)對并且必須解決┐(′ー｀)┌的問(wèn)題，在前兩者已經(jīng)達到要求的基礎上，我們需要保證我們首屏展示的信息，( ?ω?)是用戶(hù)最希望看到的信息，這里??面會(huì )涉及到一個(gè)隱藏信息如何讓用戶(hù)得知的問(wèn)題，這個(gè)在“主動(dòng)的”特性里面解釋?？焖俚?p dir="auto">快速是反應效率最直接的方式，工具類(lèi)產(chǎn)品的目的，無(wú)非就是想通過(guò)將功能產(chǎn)品化，來(lái)提升受眾用戶(hù)的工作效率，所以快(′▽?zhuān)?速的跳轉、快速的響應(′▽?zhuān)?、快速的反饋，可以提升用戶(hù)使用過(guò)程的愉悅??感。實(shí)現快速首先是對性能的要求，系統的性能要足夠強大，同時(shí)，如果發(fā)生了沒(méi)有快速反應的情況，我們可以通過(guò)其他的方式來(lái)管理用戶(hù)的“等待”。加載的方式可以按照時(shí)間分為??：
轉動(dòng)的菊花，加載在2秒以?xún)鹊臅r(shí)候，加載的方式可以用加載動(dòng)畫(huà)表??示。進(jìn)度條，加載在2-8秒的時(shí)候，加載的方式推薦使用進(jìn)度條+百分比，我相信多數人都會(huì )盯著(zhù)百分比一點(diǎn)一點(diǎn)讀到100%。進(jìn)度條+(//ω//)返回操作，加載在8-20秒的時(shí)候，允許用戶(hù)取消當前的加載，返回之前的操作。分項展示，加載超過(guò)20秒的時(shí)候，就需要展示明細的加載過(guò)(′_ゝ`)程，告知用戶(hù)哪些項是成功的，哪些項是失敗的，哪些??項是正在加載的。正確的正確的（至少）包含兩個(gè)方面：
這需要產(chǎn)品在特定ヽ(′▽?zhuān)?ノ的頁(yè)面，提供符合這個(gè)頁(yè)面操作的設計或文案??，用戶(hù)如果操作錯誤，不會(huì )將問(wèn)題歸咎于自己，而是(′ω｀)認為產(chǎn)品這樣的設計或者表達方式不合理。
操作結果的正確反饋
操作結果的正確，是對用戶(hù)操作或者等待最直接最好的回報方式，我們希望的是用戶(hù)能夠開(kāi)森的使用我們的產(chǎn)品完成任務(wù)，拿到結果，如果用戶(hù)排除了自身的錯誤，但是在產(chǎn)品上卻一直收到失敗的反饋，對用戶(hù)的心理是一種挑戰。(◎_◎;)
易理解的我正在面臨這樣一個(gè)選擇，對于一個(gè)專(zhuān)業(yè)度高、操作復雜的產(chǎn)品，常規的操作icon（編輯、刪除）已經(jīng)無(wú)法涵蓋其特有的操作，也就是說(shuō)，如果我用部分icon來(lái)替代掉已知的操作，那(na)么剩下的那部分，我們是繼續通過(guò)按鈕來(lái)表示呢(°o°)？還是直接采(′▽?zhuān)?)用文案呢？
很多時(shí)候，按鈕并不能形象的表達我們需要進(jìn)行的操作，這不是單單靠視覺(jué)傳達就??可以解決的問(wèn)題，并且對于用戶(hù)來(lái)說(shuō)，去理解一個(gè)認知度低的icon，還不如文案來(lái)的簡(jiǎn)單，用i( ?° ?? ?°)con帶來(lái)的收益，自然是頁(yè)面文字的大量精簡(jiǎn)( ?ω?)，反之，卻增加了用戶(hù)的理解程度。
如果兩者擇其一，我會(huì )選擇優(yōu)先提升理解度，相比于T(◎_◎;)oC類(lèi)型的產(chǎn)品，ToB類(lèi)產(chǎn)品更加注重的是操作，我們不僅需要提供易理解的操作，還需要將整體的頁(yè)面布局模塊化，幫助用戶(hù)理解操作。
例如(ru)： 下面這個(gè)圖是產(chǎn)品的一個(gè)舊頁(yè)面，這個(gè)頁(yè)面的信息是與操作是割裂的，單從舊的頁(yè)面上看，沒(méi)有辦法去理解操作與信息的關(guān)系
經(jīng)(′_ゝ`)過(guò)布局模塊化后，信息與對應的操作合并在一起，用戶(hù)在操作之前就獲取到了上下文的信息，更方便用戶(hù)理解這個(gè)頁(yè)面。
美觀(guān)的我印象很深的一個(gè)問(wèn)題，就是(shi)在用戶(hù)訪(fǎng)談的過(guò)程中，問(wèn)到用戶(hù)對產(chǎn)品的視覺(jué)、色彩有沒(méi)(mei)有什么要求時(shí)，大ヽ(′▽?zhuān)?ノ部分用戶(hù)都選擇了沒(méi)有~
雖然我們??不能從字面上去理解用戶(hù)對于這個(gè)問(wèn)題的回答，但是可以發(fā)現用戶(hù)對于這類(lèi)產(chǎn)品美觀(guān)的要求完全沒(méi)有前面幾個(gè)點(diǎn)來(lái)的強烈，也就是我們需要在保證功能的易用正確的基礎上，再提美觀(guān)。
但是這個(gè)時(shí)候才提到視覺(jué)元素，其實(shí)是小看了視覺(jué)在整個(gè)產(chǎn)品中的作用，在項目過(guò)程中我發(fā)現，視覺(jué)在這類(lèi)產(chǎn)品所起到的效果絕不僅僅是好看這么簡(jiǎn)單，一些(xie)很難處理的層次問(wèn)題可以通過(guò)視覺(jué)的優(yōu)化來(lái)實(shí)現，可ヽ(′▽?zhuān)?ノ以說(shuō)，視覺(jué)對這類(lèi)產(chǎn)品的賦能，就是通過(guò)視覺(jué)的差異化設計，讓用戶(hù)能夠更清晰的ヾ(＾-＾)ノ感知產(chǎn)品在功能上的分區，所以這里的美觀(guān)，我理解，并不僅僅只是為了好看??，而是能夠通過(guò)視覺(jué)的處理，讓用戶(hù)很舒服自然的理解產(chǎn)品。
主動(dòng)的我們好像都喜歡被主動(dòng)（尤其是平日里默默無(wú)聞的程序猿同學(xué)….），因為主動(dòng)意味著(zhù)別人在聯(lián)系(xi)或者推送給你消息的同時(shí)，需要了解或者顧慮你的感受ヽ(′ー｀)ノ。所以(yi)主動(dòng)給用戶(hù)帶來(lái)的感覺(jué)，就是這個(gè)產(chǎn)品正在為我著(zhù)想。
比如，成功信息的反饋、失敗信息的推送、默認信息的提供、風(fēng)險信息的提前暴露、用戶(hù)可能(neng)進(jìn)行的下一步操作，這些內容一旦全(quan)部做到位（請注意，是“全部”?。?，就可以認為這產(chǎn)品在設計的過(guò)程中，已經(jīng)對用戶(hù)使用的各??種場(chǎng)景以及各種??場(chǎng)景下可能遇到的問(wèn)題有所考慮，并能夠通過(guò)及時(shí)的推送主動(dòng)幫助用戶(hù)去進(jìn)行下一步的操作、避免或者解決問(wèn)題。
即便使用微信這么久到現在，我依然(ran)對于主動(dòng)推送新拍的照片并??可以直接發(fā)送給對方這個(gè)功能表示感慨，因為細節往往可以反饋一個(gè)產(chǎn)品對于用戶(hù)的重視程度。
個(gè)性化的ToB類(lèi)的產(chǎn)品有這比較鮮明的特點(diǎn)，就是角色的劃分相對清晰，每個(gè)角色的職能雖然會(huì )有些許的重合，但是每個(gè)角色都有自己相對核心的操作路徑和使用場(chǎng)景，這個(gè)特點(diǎn)反而使ToB類(lèi)產(chǎn)品相對于ToC類(lèi)產(chǎn)品來(lái)說(shuō)，更加方便個(gè)性化。
我們都知道，每個(gè)人淘寶首頁(yè)看到的廣告是不一樣的，其背后是根據每個(gè)人在淘??寶購物(′▽?zhuān)?或者搜索等的大數據分析推送的，所??以對于To??C類(lèi)來(lái)講，個(gè)性化的推送就需要花費(fei)很大(da)的精力來(lái)實(shí)現，而相比ToB類(lèi)而言，我們可以通過(guò)分析每個(gè)角??色的核心用戶(hù)，來(lái)??確定用戶(hù)的使用場(chǎng)景和使用路徑，可以很快的為這類(lèi)用戶(hù)提供定制化的頁(yè)面和服務(wù)。
之前我曾經(jīng)跟一個(gè)產(chǎn)品經(jīng)理討論過(guò)這樣一個(gè)問(wèn)題：像我們這類(lèi)功能和場(chǎng)景比較復雜的產(chǎn)品，如何才能算是用戶(hù)體驗好？
我們當時(shí)的結論是統一的，即便是我們實(shí)現了市面上的各種交互準則1，2，3，??4，5……也只能說(shuō)我們達到的用戶(hù)體驗好的一個(gè)基礎條件，真正要實(shí)現??這(zhe)個(gè)，就需要產(chǎn)品有一個(gè)很強的引導能力，因為真正操作這個(gè)產(chǎn)品的用戶(hù)，一個(gè)工作流可能會(huì )跨越(/ω＼)多個(gè)對象、多個(gè)頁(yè)面，遇到多個(gè)問(wèn)題，我們需要做的，就是能夠在產(chǎn)品中植入強力的引導特性，讓用戶(hù)，??尤其是初級用戶(hù)，在使用產(chǎn)品的初期，快速的掌握任務(wù)的操作路徑，避免用戶(hù)在操作過(guò)程中被各式各樣的問(wèn)題所打斷，導致最(zui)后任務(wù)無(wú)法順利的完成。
如??何實(shí)現引導性強？我個(gè)人認為可以從??以下幾點(diǎn)出發(fā)考慮：
產(chǎn)品設計上的一致性(′▽?zhuān)?，( ???)相似對象的相似功能，我們需???要盡量做得一致，在(′▽?zhuān)?)用戶(hù)操作過(guò)一個(gè)對象之后，對于其他對象，也可以在相同的位( ?ω?)置找到對應的操??作，這其實(shí)算是一種暗引導。像新功能上線(xiàn)后，我們一般會(huì )用的新功能的彈出提示那樣，對于初??學(xué)??用戶(hù)，最好在觸發(fā)頁(yè)面添加這一類(lèi)的提示，這其實(shí)是幫助用戶(hù)快速掌握頁(yè)面功能分布的方式，比起用戶(hù)自己來(lái)找，效率要更高。我記得Heroku對于代碼的集成??和部署有一個(gè)完整的多ヽ(′?｀)ノ個(gè)步驟的引導流程(cheng)，并且我在最近的項??目中也嘗試提供了這種設計，這種step by step的方式，其實(shí)就像一個(gè)導盲犬，用戶(hù)(◎_◎;)可以從這里出發(fā)去(°ロ°) !一步一步的完成任務(wù)。例如： 某個(gè)應用從申請到創(chuàng )建的過(guò)程其實(shí)相當的ヽ(′▽?zhuān)?ノ復雜，涉及到各個(gè)角色之間的協(xié)同，并且舊的系統對這部分工作并不透明，所以我做了如下的(??ヮ?)?*:???嘗試： 在應用的首頁(yè)單開(kāi)一個(gè)上線(xiàn)任務(wù)的模塊，指引用戶(hù)來(lái)完成上線(xiàn)任務(wù)的完成(cheng)，或(′Д` )者查看其它角色是否完成了對應的配置，從而保證應用能夠快速的┐(′д｀)┌上線(xiàn)使用。
頁(yè)面跳轉的準確度，當用戶(hù)執行了一個(gè)操作之后，我們需要明確用戶(hù)的心理預期??是繼續停留在這個(gè)頁(yè)面，還是去到這個(gè)操作后續的頁(yè)面，這就需要我們對用戶(hù)的操作路徑有明確的ヽ(′▽?zhuān)?ノ掌握，其實(shí)頁(yè)面的跳轉(zhuan)對于功能的引??導性也是很強力的。
主動(dòng)推送，其實(shí)在前面的“主動(dòng)”中提到了一點(diǎn)，就是用戶(hù)可能進(jìn)行的下一步操作( ???)，這既是主動(dòng)性的表現，同時(shí)也對用戶(hù)起到了引導作用，我(wo)們接到反饋最多的是什么？是這個(gè)功能找不到入口，這個(gè)信息不知道去哪里獲取，所以我覺(jué)得主動(dòng)推送多于被動(dòng)查找，也有利于產(chǎn)品引(′-ι_-｀)導性的提(ti)升。
結語(yǔ)個(gè)人認為這8個(gè)詞就可以作為產(chǎn)品的整體方向，同時(shí)在??每個(gè)功能設計的(de)時(shí)候，也都是需要(yao)考慮的因素，可能他們的優(yōu)先級會(huì )因為不同的場(chǎng)景而有所差異，但是每個(gè)特性都有自己覆蓋范圍，都是不可或缺的。
