2.0的起源
這篇原文題目是《我眼中的工具類產(chǎn)品的設(shè)計2.0》所以本章的題目是学赛，2.0的起源
距離寫《我眼中的工具類產(chǎn)品的設(shè)計》已經(jīng)有將近一年的時間了，這個過程中，我又一次經(jīng)歷了項目、業(yè)務(wù)、PD嗤堰、Boss、專家等各方面思想的洗禮度宦，對于平臺工具類產(chǎn)品的設(shè)計踢匣，多了一些新的理解，分享出來拋個磚~
之前閱讀了原研哉大神《設(shè)計中的設(shè)計》一書戈抄，書中提到了一個很有意思的概念：再設(shè)計离唬。再設(shè)計的理論，是想讓我們通過忘掉設(shè)計對象已有的現(xiàn)狀划鸽，追根溯源输莺，對設(shè)計對象進行再次設(shè)計，從而加深大家對設(shè)計對象的理解裸诽。
所以我重新審視了之前文章中提出的工具類產(chǎn)品的三個特點：效率嫂用、智能、個性化丈冬，發(fā)現(xiàn)僅僅是這3個詞語嘱函，概括性太強，卻很難細(xì)節(jié)的提出我們隊工具類產(chǎn)品的期望埂蕊，所以結(jié)合個人的理解实夹，我對這三個對象進行了重新分析和細(xì)化，總結(jié)出來的8個詞匯來形容這一類產(chǎn)品的設(shè)計方向：
- 簡潔的
- 快速的
- 正確的
- 易理解的
- 美觀的
- 主動的
- 個性化的
- 引導(dǎo)性強的
8個形容詞
簡潔的
在這類產(chǎn)品中粒梦，個人認(rèn)為沒有絕對意義的簡潔，如果我們期望得到一個帶有留白之美的頁面荸实，這種期望很可能會受到打擊.....
在設(shè)計過程中匀们，我曾經(jīng)不止一次的希望將眾多的操作做歸納整理，或者收起來准给，或者直接減掉泄朴，然而從用戶反饋過來的情況來看重抖，精簡之后的效果反而增加了系統(tǒng)的答疑量，這里面當(dāng)然也存在著一些對用戶操作的判斷失誤祖灰，但背后卻反饋出一個問題：這類產(chǎn)品的用戶钟沛，對于操作的定位，有著最高優(yōu)先級的要求局扶，這也就是為什么即便我們的產(chǎn)品頁面已經(jīng)很復(fù)雜恨统，但仍然需要支持這些功能在首屏顯示的原因。
如何做到真正的簡潔三妈？
我個人認(rèn)為簡潔可以從以下幾個方面入手：
- 導(dǎo)航的簡潔畜埋，導(dǎo)航的簡潔意味著用戶可以快速的理解產(chǎn)品的各部分功能，當(dāng)然畴蒲，這對產(chǎn)品的架構(gòu)有著比較高的要求悠鞍，我們需要明確的劃分產(chǎn)品中的各個子系統(tǒng)以及子系統(tǒng)之間的優(yōu)先關(guān)系。盡量用最合理的層次來引導(dǎo)用戶使用模燥。
- 視覺層次的簡潔咖祭，當(dāng)頁面信息繁雜時，我們很多時候是依托于視覺的處理來讓用戶清晰的分辨出各部分區(qū)域蔫骂，所謂視覺層次的簡潔么翰，就是盡量用最少的視覺分層，給用戶植入分區(qū)的感覺纠吴，避免視覺效果的大量使用而導(dǎo)致頁面更加復(fù)雜硬鞍。
- 頁面信息的精簡，這是我們必須面對并且必須解決的問題戴已，在前兩者已經(jīng)達(dá)到要求的基礎(chǔ)上固该，我們需要保證我們首屏展示的信息，是用戶最希望看到的信息糖儡，這里面會涉及到一個隱藏信息如何讓用戶得知的問題伐坏，這個在“主動的”特性里面解釋。
快速的
快速是反應(yīng)效率最直接的方式握联，工具類產(chǎn)品的目的桦沉，無非就是想通過將功能產(chǎn)品化，來提升受眾用戶的工作效率金闽，所以快速的跳轉(zhuǎn)纯露、快速的響應(yīng)、快速的反饋代芜，可以提升用戶使用過程的愉悅感埠褪。
實現(xiàn)快速首先是對性能的要求钳枕，系統(tǒng)的性能要足夠強大磅轻，同時顷啼，如果發(fā)生了沒有快速反應(yīng)的情況藕夫，我們可以通過其他的方式來管理用戶的“等待”。加載的方式可以按照時間分為：
- 轉(zhuǎn)動的菊花渴语，加載在2秒以內(nèi)的時候苹威，加載的方式可以用加載動畫表示。
- 進度條驾凶，加載在2-8秒的時候牙甫，加載的方式推薦使用進度條+百分比，我相信多數(shù)人都會盯著百分比一點一點讀到100%狭郑。
- 進度條+返回操作腹暖，加載在8-20秒的時候，允許用戶取消當(dāng)前的加載翰萨，返回之前的操作脏答。
- 分項展示，加載超過20秒的時候亩鬼，就需要展示明細(xì)的加載過程殖告，告知用戶哪些項是成功的，哪些項是失敗的雳锋，哪些項是正在加載的黄绩。
正確的
正確的（至少）包含兩個方面：
-
用戶正確的理解并操作
這需要產(chǎn)品在特定的頁面，提供符合這個頁面操作的設(shè)計或文案玷过，用戶如果操作錯誤爽丹，不會將問題歸咎于自己，而是認(rèn)為產(chǎn)品這樣的設(shè)計或者表達(dá)方式不合理辛蚊。
-
操作結(jié)果的正確反饋
操作結(jié)果的正確粤蝎，是對用戶操作或者等待最直接最好的回報方式，我們希望的是用戶能夠開森的使用我們的產(chǎn)品完成任務(wù)袋马，拿到結(jié)果初澎，如果用戶排除了自身的錯誤，但是在產(chǎn)品上卻一直收到失敗的反饋虑凛，對用戶的心理是一種挑戰(zhàn)碑宴。
易理解的
我正在面臨這樣一個選擇，對于一個專業(yè)度高桑谍、操作復(fù)雜的產(chǎn)品延柠，常規(guī)的操作icon（編輯、刪除）已經(jīng)無法涵蓋其特有的操作锣披，也就是說捕仔，如果我用部分icon來替代掉已知的操作匕积，那么剩下的那部分，我們是繼續(xù)通過按鈕來表示呢榜跌？還是直接采用文案呢？
很多時候盅粪，按鈕并不能形象的表達(dá)我們需要進行的操作钓葫，這不是單單靠視覺傳達(dá)就可以解決的問題，并且對于用戶來說票顾，去理解一個認(rèn)知度低的icon础浮，還不如文案來的簡單，用icon帶來的收益奠骄，自然是頁面文字的大量精簡豆同，反之，卻增加了用戶的理解程度含鳞。
如果兩者擇其一影锈，我會選擇優(yōu)先提升理解度，相比于ToC類型的產(chǎn)品蝉绷，ToB類產(chǎn)品更加注重的是操作鸭廷，我們不僅需要提供易理解的操作，還需要將整體的頁面布局模塊化熔吗，幫助用戶理解操作辆床。
例如：
下面這個圖是產(chǎn)品的一個舊頁面，這個頁面的信息是與操作是割裂的桅狠，單從舊的頁面上看讼载，沒有辦法去理解操作與信息的關(guān)系。
經(jīng)過布局模塊化后中跌，信息與對應(yīng)的操作合并在一起咨堤，用戶在操作之前就獲取到了上下文的信息，更方便用戶理解這個頁面晒他。
美觀的
我印象很深的一個問題吱型，就是在用戶訪談的過程中，問到用戶對產(chǎn)品的視覺陨仅、色彩有沒有什么要求時津滞，大部分用戶都選擇了沒有~
雖然我們不能從字面上去理解用戶對于這個問題的回答，但是可以發(fā)現(xiàn)用戶對于這類產(chǎn)品美觀的要求完全沒有前面幾個點來的強烈灼伤，也就是我們需要在保證功能的易用正確的基礎(chǔ)上触徐，再提美觀。
但是這個時候才提到視覺元素狐赡，其實是小看了視覺在整個產(chǎn)品中的作用撞鹉，在項目過程中我發(fā)現(xiàn)，視覺在這類產(chǎn)品所起到的效果絕不僅僅是好看這么簡單，一些很難處理的層次問題可以通過視覺的優(yōu)化來實現(xiàn)鸟雏，可以說享郊，視覺對這類產(chǎn)品的賦能，就是通過視覺的差異化設(shè)計孝鹊，讓用戶能夠更清晰的感知產(chǎn)品在功能上的分區(qū)炊琉，所以這里的美觀，我理解又活，并不僅僅只是為了好看苔咪，而是能夠通過視覺的處理，讓用戶很舒服自然的理解產(chǎn)品柳骄。
主動的
我們好像都喜歡被主動（尤其是平日里默默無聞的程序猿同學(xué)....）团赏，因為主動意味著別人在聯(lián)系或者推送給你消息的同時，需要了解或者顧慮你的感受耐薯。所以主動給用戶帶來的感覺舔清，就是這個產(chǎn)品正在為我著想。
比如可柿，成功信息的反饋鸠踪、失敗信息的推送、默認(rèn)信息的提供复斥、風(fēng)險信息的提前暴露营密、用戶可能進行的下一步操作，這些內(nèi)容一旦全部做到位（請注意目锭，是“全部”Ｆ捞），就可以認(rèn)為這產(chǎn)品在設(shè)計的過程中痢虹，已經(jīng)對用戶使用的各種場景以及各種場景下可能遇到的問題有所考慮被去，并能夠通過及時的推送主動幫助用戶去進行下一步的操作、避免或者解決問題奖唯。
即便使用微信這么久到現(xiàn)在惨缆，我依然對于主動推送新拍的照片并可以直接發(fā)送給對方這個功能表示感慨，因為細(xì)節(jié)往往可以反饋一個產(chǎn)品對于用戶的重視程度丰捷。
個性化的
ToB類的產(chǎn)品有這比較鮮明的特點坯墨，就是角色的劃分相對清晰，每個角色的職能雖然會有些許的重合病往，但是每個角色都有自己相對核心的操作路徑和使用場景捣染，這個特點反而使ToB類產(chǎn)品相對于ToC類產(chǎn)品來說，更加方便個性化停巷。
我們都知道耍攘，每個人淘寶首頁看到的廣告是不一樣的榕栏，其背后是根據(jù)每個人在淘寶購物或者搜索等的大數(shù)據(jù)分析推送的，所以對于ToC類來講蕾各，個性化的推送就需要花費很大的精力來實現(xiàn)扒磁，而相比ToB類而言，我們可以通過分析每個角色的核心用戶示损，來確定用戶的使用場景和使用路徑渗磅，可以很快的為這類用戶提供定制化的頁面和服務(wù)。
個性化不僅僅是產(chǎn)品主動為用戶定制检访，同時，我們也需要允許用戶對自己的使用過程進行個性化的設(shè)置仔掸，大家都會有這樣一個感覺脆贵，自己搭配出來的東西往往用起來最順手。平臺提供能力起暮，服務(wù)提供功能卖氨，我們希望用戶能夠通過自己的定制更高的提升自己的工作效率，這也是無論產(chǎn)品主動的個性化定制负懦，或者用戶個人的自由配置筒捺，都想達(dá)到的最終目標(biāo)。
引導(dǎo)性強的
之前我曾經(jīng)跟一個產(chǎn)品經(jīng)理討論過這樣一個問題：像我們這類功能和場景比較復(fù)雜的產(chǎn)品纸厉，如何才能算是用戶體驗好系吭？
我們當(dāng)時的結(jié)論是統(tǒng)一的，即便是我們實現(xiàn)了市面上的各種交互準(zhǔn)則1颗品，2肯尺，3，4躯枢，5......也只能說我們達(dá)到的用戶體驗好的一個基礎(chǔ)條件则吟，真正要實現(xiàn)這個，就需要產(chǎn)品有一個很強的引導(dǎo)能力锄蹂，因為真正操作這個產(chǎn)品的用戶氓仲，一個工作流可能會跨越多個對象、多個頁面得糜，遇到多個問題敬扛，我們需要做的，就是能夠在產(chǎn)品中植入強力的引導(dǎo)特性掀亩，讓用戶舔哪，尤其是初級用戶，在使用產(chǎn)品的初期槽棍，快速的掌握任務(wù)的操作路徑捉蚤，避免用戶在操作過程中被各式各樣的問題所打斷抬驴，導(dǎo)致最后任務(wù)無法順利的完成。
如何實現(xiàn)引導(dǎo)性強缆巧？我個人認(rèn)為可以從以下幾點出發(fā)考慮：
產(chǎn)品設(shè)計上的一致性布持，相似對象的相似功能，我們需要盡量做得一致陕悬，在用戶操作過一個對象之后题暖，對于其他對象，也可以在相同的位置找到對應(yīng)的操作捉超，這其實算是一種暗引導(dǎo)胧卤。
像新功能上線后，我們一般會用的新功能的彈出提示那樣拼岳，對于初學(xué)用戶枝誊，最好在觸發(fā)頁面添加這一類的提示，這其實是幫助用戶快速掌握頁面功能分布的方式惜纸，比起用戶自己來找叶撒，效率要更高。
-
我記得Heroku對于代碼的集成和部署有一個完整的多個步驟的引導(dǎo)流程耐版，并且我在最近的項目中也嘗試提供了這種設(shè)計祠够，這種step by step的方式，其實就像一個導(dǎo)盲犬粪牲，用戶可以從這里出發(fā)去一步一步的完成任務(wù)古瓤。
例如：
某個應(yīng)用從申請到創(chuàng)建的過程其實相當(dāng)?shù)膹?fù)雜，涉及到各個角色之間的協(xié)同虑瀑，并且舊的系統(tǒng)對這部分工作并不透明湿滓，所以我做了如下的嘗試：
在應(yīng)用的首頁單開一個上線任務(wù)的模塊，指引用戶來完成上線任務(wù)的完成舌狗，或者查看其它角色是否完成了對應(yīng)的配置叽奥，從而保證應(yīng)用能夠快速的上線使用。
上線任務(wù) 頁面跳轉(zhuǎn)的準(zhǔn)確度痛侍，當(dāng)用戶執(zhí)行了一個操作之后朝氓，我們需要明確用戶的心理預(yù)期是繼續(xù)停留在這個頁面，還是去到這個操作后續(xù)的頁面主届，這就需要我們對用戶的操作路徑有明確的掌握赵哲，其實頁面的跳轉(zhuǎn)對于功能的引導(dǎo)性也是很強力的。
主動推送君丁，其實在前面的“主動”中提到了一點枫夺，就是用戶可能進行的下一步操作，這既是主動性的表現(xiàn)绘闷，同時也對用戶起到了引導(dǎo)作用橡庞，我們接到反饋最多的是什么较坛？是這個功能找不到入口，這個信息不知道去哪里獲取扒最，所以我覺得主動推送多于被動查找丑勤，也有利于產(chǎn)品引導(dǎo)性的提升。
結(jié)語
個人認(rèn)為這8個詞就可以作為產(chǎn)品的整體方向吧趣，同時在每個功能設(shè)計的時候法竞，也都是需要考慮的因素，可能他們的優(yōu)先級會因為不同的場景而有所差異强挫，但是每個特性都有自己覆蓋范圍岔霸，都是不可或缺的。
歡迎大家拍磚俯渤，謝謝秉剑！
