工具類產(chǎn)品設(shè)計(jì)的8個(gè)準(zhǔn)則

1 評論 21487 瀏覽 371 收藏 16 分鐘

之前閱讀了原研哉大神《設(shè)計(jì)中的設(shè)計(jì)》一書,書中提到了一個(gè)很有意思的概念:再設(shè)計(jì)。再設(shè)計(jì)的理論,是想讓我們通過忘掉設(shè)計(jì)對象已有的現(xiàn)狀,追根溯源,對設(shè)計(jì)對象進(jìn)行再次設(shè)計(jì),從而加深大家對設(shè)計(jì)對象的理解。

所以我重新審視了之前文章中提出的工具類產(chǎn)品的三個(gè)特點(diǎn):效率、智能、個(gè)性化,發(fā)現(xiàn)僅僅是這3個(gè)詞語,概括性太強(qiáng),卻很難細(xì)節(jié)的提出我們隊(duì)工具類產(chǎn)品的期望,所以結(jié)合個(gè)人的理解,我對這三個(gè)對象進(jìn)行了重新分析和細(xì)化,總結(jié)出來的8個(gè)詞匯來形容這一類產(chǎn)品的設(shè)計(jì)方向:

  1. 簡潔的
  2. 快速的
  3. 正確的
  4. 易理解的
  5. 美觀的
  6. 主動(dòng)的
  7. 個(gè)性化的
  8. 引導(dǎo)性強(qiáng)的

8個(gè)形容詞

簡潔的

在這類產(chǎn)品中,個(gè)人認(rèn)為沒有絕對意義的簡潔,如果我們期望得到一個(gè)帶有留白之美的頁面,這種期望很可能會(huì)受到打擊…..

在設(shè)計(jì)過程中,我曾經(jīng)不止一次的希望將眾多的操作做歸納整理,或者收起來,或者直接減掉,然而從用戶反饋過來的情況來看,精簡之后的效果反而增加了系統(tǒng)的答疑量,這里面當(dāng)然也存在著一些對用戶操作的判斷失誤,但背后卻反饋出一個(gè)問題:這類產(chǎn)品的用戶,對于操作的定位,有著最高優(yōu)先級的要求,這也就是為什么即便我們的產(chǎn)品頁面已經(jīng)很復(fù)雜,但仍然需要支持這些功能在首屏顯示的原因。

如何做到真正的簡潔?

我個(gè)人認(rèn)為簡潔可以從以下幾個(gè)方面入手:

  • 導(dǎo)航的簡潔,導(dǎo)航的簡潔意味著用戶可以快速的理解產(chǎn)品的各部分功能,當(dāng)然,這對產(chǎn)品的架構(gòu)有著比較高的要求,我們需要明確的劃分產(chǎn)品中的各個(gè)子系統(tǒng)以及子系統(tǒng)之間的優(yōu)先關(guān)系。盡量用最合理的層次來引導(dǎo)用戶使用。
  • 視覺層次的簡潔,當(dāng)頁面信息繁雜時(shí),我們很多時(shí)候是依托于視覺的處理來讓用戶清晰的分辨出各部分區(qū)域,所謂視覺層次的簡潔,就是盡量用最少的視覺分層,給用戶植入分區(qū)的感覺,避免視覺效果的大量使用而導(dǎo)致頁面更加復(fù)雜。
  • 頁面信息的精簡,這是我們必須面對并且必須解決的問題,在前兩者已經(jīng)達(dá)到要求的基礎(chǔ)上,我們需要保證我們首屏展示的信息,是用戶最希望看到的信息,這里面會(huì)涉及到一個(gè)隱藏信息如何讓用戶得知的問題,這個(gè)在“主動(dòng)的”特性里面解釋。

快速的

快速是反應(yīng)效率最直接的方式,工具類產(chǎn)品的目的,無非就是想通過將功能產(chǎn)品化,來提升受眾用戶的工作效率,所以快速的跳轉(zhuǎn)、快速的響應(yīng)、快速的反饋,可以提升用戶使用過程的愉悅感。

實(shí)現(xiàn)快速首先是對性能的要求,系統(tǒng)的性能要足夠強(qiáng)大,同時(shí),如果發(fā)生了沒有快速反應(yīng)的情況,我們可以通過其他的方式來管理用戶的“等待”。加載的方式可以按照時(shí)間分為:

  • 轉(zhuǎn)動(dòng)的菊花,加載在2秒以內(nèi)的時(shí)候,加載的方式可以用加載動(dòng)畫表示。
  • 進(jìn)度條,加載在2-8秒的時(shí)候,加載的方式推薦使用進(jìn)度條+百分比,我相信多數(shù)人都會(huì)盯著百分比一點(diǎn)一點(diǎn)讀到100%。
  • 進(jìn)度條+返回操作,加載在8-20秒的時(shí)候,允許用戶取消當(dāng)前的加載,返回之前的操作。
  • 分項(xiàng)展示,加載超過20秒的時(shí)候,就需要展示明細(xì)的加載過程,告知用戶哪些項(xiàng)是成功的,哪些項(xiàng)是失敗的,哪些項(xiàng)是正在加載的。

正確的

正確的(至少)包含兩個(gè)方面:

用戶正確的理解并操作

這需要產(chǎn)品在特定的頁面,提供符合這個(gè)頁面操作的設(shè)計(jì)或文案,用戶如果操作錯(cuò)誤,不會(huì)將問題歸咎于自己,而是認(rèn)為產(chǎn)品這樣的設(shè)計(jì)或者表達(dá)方式不合理。

操作結(jié)果的正確反饋

操作結(jié)果的正確,是對用戶操作或者等待最直接最好的回報(bào)方式,我們希望的是用戶能夠開森的使用我們的產(chǎn)品完成任務(wù),拿到結(jié)果,如果用戶排除了自身的錯(cuò)誤,但是在產(chǎn)品上卻一直收到失敗的反饋,對用戶的心理是一種挑戰(zhàn)。

易理解的

我正在面臨這樣一個(gè)選擇,對于一個(gè)專業(yè)度高、操作復(fù)雜的產(chǎn)品,常規(guī)的操作icon(編輯、刪除)已經(jīng)無法涵蓋其特有的操作,也就是說,如果我用部分icon來替代掉已知的操作,那么剩下的那部分,我們是繼續(xù)通過按鈕來表示呢?還是直接采用文案呢?

很多時(shí)候,按鈕并不能形象的表達(dá)我們需要進(jìn)行的操作,這不是單單靠視覺傳達(dá)就可以解決的問題,并且對于用戶來說,去理解一個(gè)認(rèn)知度低的icon,還不如文案來的簡單,用icon帶來的收益,自然是頁面文字的大量精簡,反之,卻增加了用戶的理解程度。

如果兩者擇其一,我會(huì)選擇優(yōu)先提升理解度,相比于ToC類型的產(chǎn)品,ToB類產(chǎn)品更加注重的是操作,我們不僅需要提供易理解的操作,還需要將整體的頁面布局模塊化,幫助用戶理解操作。

例如: 下面這個(gè)圖是產(chǎn)品的一個(gè)舊頁面,這個(gè)頁面的信息是與操作是割裂的,單從舊的頁面上看,沒有辦法去理解操作與信息的關(guān)系

Snip20160408_177

經(jīng)過布局模塊化后,信息與對應(yīng)的操作合并在一起,用戶在操作之前就獲取到了上下文的信息,更方便用戶理解這個(gè)頁面。

Snip20160408_175

美觀的

我印象很深的一個(gè)問題,就是在用戶訪談的過程中,問到用戶對產(chǎn)品的視覺、色彩有沒有什么要求時(shí),大部分用戶都選擇了沒有~

雖然我們不能從字面上去理解用戶對于這個(gè)問題的回答,但是可以發(fā)現(xiàn)用戶對于這類產(chǎn)品美觀的要求完全沒有前面幾個(gè)點(diǎn)來的強(qiáng)烈,也就是我們需要在保證功能的易用正確的基礎(chǔ)上,再提美觀。

但是這個(gè)時(shí)候才提到視覺元素,其實(shí)是小看了視覺在整個(gè)產(chǎn)品中的作用,在項(xiàng)目過程中我發(fā)現(xiàn),視覺在這類產(chǎn)品所起到的效果絕不僅僅是好看這么簡單,一些很難處理的層次問題可以通過視覺的優(yōu)化來實(shí)現(xiàn),可以說,視覺對這類產(chǎn)品的賦能,就是通過視覺的差異化設(shè)計(jì),讓用戶能夠更清晰的感知產(chǎn)品在功能上的分區(qū),所以這里的美觀,我理解,并不僅僅只是為了好看,而是能夠通過視覺的處理,讓用戶很舒服自然的理解產(chǎn)品。

主動(dòng)的

我們好像都喜歡被主動(dòng)(尤其是平日里默默無聞的程序猿同學(xué)….),因?yàn)橹鲃?dòng)意味著別人在聯(lián)系或者推送給你消息的同時(shí),需要了解或者顧慮你的感受。所以主動(dòng)給用戶帶來的感覺,就是這個(gè)產(chǎn)品正在為我著想。

比如,成功信息的反饋、失敗信息的推送、默認(rèn)信息的提供、風(fēng)險(xiǎn)信息的提前暴露、用戶可能進(jìn)行的下一步操作,這些內(nèi)容一旦全部做到位(請注意,是“全部”?。涂梢哉J(rèn)為這產(chǎn)品在設(shè)計(jì)的過程中,已經(jīng)對用戶使用的各種場景以及各種場景下可能遇到的問題有所考慮,并能夠通過及時(shí)的推送主動(dòng)幫助用戶去進(jìn)行下一步的操作、避免或者解決問題。

即便使用微信這么久到現(xiàn)在,我依然對于主動(dòng)推送新拍的照片并可以直接發(fā)送給對方這個(gè)功能表示感慨,因?yàn)榧?xì)節(jié)往往可以反饋一個(gè)產(chǎn)品對于用戶的重視程度。

個(gè)性化的

ToB類的產(chǎn)品有這比較鮮明的特點(diǎn),就是角色的劃分相對清晰,每個(gè)角色的職能雖然會(huì)有些許的重合,但是每個(gè)角色都有自己相對核心的操作路徑和使用場景,這個(gè)特點(diǎn)反而使ToB類產(chǎn)品相對于ToC類產(chǎn)品來說,更加方便個(gè)性化。

我們都知道,每個(gè)人淘寶首頁看到的廣告是不一樣的,其背后是根據(jù)每個(gè)人在淘寶購物或者搜索等的大數(shù)據(jù)分析推送的,所以對于ToC類來講,個(gè)性化的推送就需要花費(fèi)很大的精力來實(shí)現(xiàn),而相比ToB類而言,我們可以通過分析每個(gè)角色的核心用戶,來確定用戶的使用場景和使用路徑,可以很快的為這類用戶提供定制化的頁面和服務(wù)。

個(gè)性化不僅僅是產(chǎn)品主動(dòng)為用戶定制,同時(shí),我們也需要允許用戶對自己的使用過程進(jìn)行個(gè)性化的設(shè)置,大家都會(huì)有這樣一個(gè)感覺,自己搭配出來的東西往往用起來最順手。平臺提供能力,服務(wù)提供功能,我們希望用戶能夠通過自己的定制更高的提升自己的工作效率,這也是無論產(chǎn)品主動(dòng)的個(gè)性化定制,或者用戶個(gè)人的自由配置,都想達(dá)到的最終目標(biāo)。

引導(dǎo)性強(qiáng)的

之前我曾經(jīng)跟一個(gè)產(chǎn)品經(jīng)理討論過這樣一個(gè)問題:像我們這類功能和場景比較復(fù)雜的產(chǎn)品,如何才能算是用戶體驗(yàn)好?

我們當(dāng)時(shí)的結(jié)論是統(tǒng)一的,即便是我們實(shí)現(xiàn)了市面上的各種交互準(zhǔn)則1,2,3,4,5……也只能說我們達(dá)到的用戶體驗(yàn)好的一個(gè)基礎(chǔ)條件,真正要實(shí)現(xiàn)這個(gè),就需要產(chǎn)品有一個(gè)很強(qiáng)的引導(dǎo)能力,因?yàn)檎嬲僮鬟@個(gè)產(chǎn)品的用戶,一個(gè)工作流可能會(huì)跨越多個(gè)對象、多個(gè)頁面,遇到多個(gè)問題,我們需要做的,就是能夠在產(chǎn)品中植入強(qiáng)力的引導(dǎo)特性,讓用戶,尤其是初級用戶,在使用產(chǎn)品的初期,快速的掌握任務(wù)的操作路徑,避免用戶在操作過程中被各式各樣的問題所打斷,導(dǎo)致最后任務(wù)無法順利的完成。

如何實(shí)現(xiàn)引導(dǎo)性強(qiáng)?我個(gè)人認(rèn)為可以從以下幾點(diǎn)出發(fā)考慮:

  • 產(chǎn)品設(shè)計(jì)上的一致性,相似對象的相似功能,我們需要盡量做得一致,在用戶操作過一個(gè)對象之后,對于其他對象,也可以在相同的位置找到對應(yīng)的操作,這其實(shí)算是一種暗引導(dǎo)。
  • 像新功能上線后,我們一般會(huì)用的新功能的彈出提示那樣,對于初學(xué)用戶,最好在觸發(fā)頁面添加這一類的提示,這其實(shí)是幫助用戶快速掌握頁面功能分布的方式,比起用戶自己來找,效率要更高。
  • 我記得Heroku對于代碼的集成和部署有一個(gè)完整的多個(gè)步驟的引導(dǎo)流程,并且我在最近的項(xiàng)目中也嘗試提供了這種設(shè)計(jì),這種step by step的方式,其實(shí)就像一個(gè)導(dǎo)盲犬,用戶可以從這里出發(fā)去一步一步的完成任務(wù)。

例如: 某個(gè)應(yīng)用從申請到創(chuàng)建的過程其實(shí)相當(dāng)?shù)膹?fù)雜,涉及到各個(gè)角色之間的協(xié)同,并且舊的系統(tǒng)對這部分工作并不透明,所以我做了如下的嘗試: 在應(yīng)用的首頁單開一個(gè)上線任務(wù)的模塊,指引用戶來完成上線任務(wù)的完成,或者查看其它角色是否完成了對應(yīng)的配置,從而保證應(yīng)用能夠快速的上線使用。

Snip20160414_55

頁面跳轉(zhuǎn)的準(zhǔn)確度,當(dāng)用戶執(zhí)行了一個(gè)操作之后,我們需要明確用戶的心理預(yù)期是繼續(xù)停留在這個(gè)頁面,還是去到這個(gè)操作后續(xù)的頁面,這就需要我們對用戶的操作路徑有明確的掌握,其實(shí)頁面的跳轉(zhuǎn)對于功能的引導(dǎo)性也是很強(qiáng)力的。

主動(dòng)推送,其實(shí)在前面的“主動(dòng)”中提到了一點(diǎn),就是用戶可能進(jìn)行的下一步操作,這既是主動(dòng)性的表現(xiàn),同時(shí)也對用戶起到了引導(dǎo)作用,我們接到反饋?zhàn)疃嗟氖鞘裁矗渴沁@個(gè)功能找不到入口,這個(gè)信息不知道去哪里獲取,所以我覺得主動(dòng)推送多于被動(dòng)查找,也有利于產(chǎn)品引導(dǎo)性的提升。

結(jié)語

個(gè)人認(rèn)為這8個(gè)詞就可以作為產(chǎn)品的整體方向,同時(shí)在每個(gè)功能設(shè)計(jì)的時(shí)候,也都是需要考慮的因素,可能他們的優(yōu)先級會(huì)因?yàn)椴煌膱鼍岸兴町?,但是每個(gè)特性都有自己覆蓋范圍,都是不可或缺的。

歡迎大家拍磚,謝謝!

 

本文由 @fengyunzyl?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝作者,很受啟發(fā),需要在實(shí)踐中加以運(yùn)用

    來自上海 回復(fù)