行業對設計師的要求?直都在不斷革新,只有「?技之?」的設計師已經很難滿??業需要,產品分析已經不僅僅是產品經理的工作內容,對于 UI 設計師來說,也是必備技能之一了,尤其是對于 B 端領域的設計師來說,更需要拓寬視野,思維前置。
那么,該如何去做產品分析呢?本文將從產品分析是什么,如何做兩個方面來講述,為大家提供思路,做真正落地的對設計有幫助的產品分析,提高自己理解業務、處理業務、解決問題的能力,體現出設計師的價值。
對于 B 端產品來說,它只有一個目標,就是解決問題,通過對問題的分析得出解決方案,而任何一個問題都不會只有一種解決方案,在權衡利弊后得出了最終的解決方案,產品就是解決方案的表現形式和實際載體。
從設計師的角度來說,產品分析通常是挖掘產品缺陷,優化產品體驗,為產品迭代提供依據,比如:通過深度體驗產品,挖掘產品的在功能、交互體驗方面的不足,并通過分析制定產品優化方案。一款產品從淺至深擁有無數的可被挖掘的信息,這些信息本身是龐雜冗余無意義的,只有通過分類和清洗才能得到對人有意義的信息,本質上來說,產品分析就是在做信息分類和清洗的工作。
市場分析是對產品所在的市場進行宏觀的競爭態勢和市場規模的分析。市場分析主要包括行業背景、市場現狀和商業模式三部分??梢钥吹?,市場分析其實是從很宏觀的一個角度來切入,更偏向于戰略層內容,因此市場分析也是三者中距離設計師最遠的一個概念。用通俗的話來說,市場分析最主要的目的就是分析產品是否賺錢。
廣泛意義上說,競品分析就是根據分析目的,找到切入角度,對競爭對手或市場進行客觀分析,找到競品或自己的優勢與不足,為下一步決策提供科學依據,其實就是「知己知彼」的過程。對于設計師而言,競品分析的目的更傾向于尋找解決方案,比如:通過競品分析來尋找參考從而解決自己當前遇到的問題。
不同于 C 端,B 端往往有很堅固的行業壁壘,所涉及業務也非常難以理解,究其原因,來自以下兩個方面:
B 端產品很多時候,都是在原有線下業務的基礎上進行數字化。邏輯的復雜度本質上是來源于這個行業多年來積累的足夠成熟的業務流程與規范,而這些東西沒有辦法速成,只能靠不斷地積累來增進理解。
C 端產品的設計中,設計師大部分情況下都或多或少地就是用戶本身,或者帶有用戶屬性,比較容易產生同理心,去發現問題解決痛點。
而 B 端產品不是給普通用戶使用的,是給特定群體使用的,這種特質就決定了設計師很難去真正地理解用戶的處境,設計師最厲害的特質——同理心也很難派上用場。
有的設計師同學,一接到產品分析的任務,到手就是先去網上看看別人是怎么做的,然后按著人家的結構對自己的產品進行一通分析,其中不乏用到了「用戶體驗五要素」、「SWOT分析」等看起來高大上的方法論。
按這樣做,產出的分析報告不能說錯,但是最起碼是不恰當的,對設計上的幫助微乎其微。其中有這樣兩個問題:
產品經理是產品的第一負責人,需要對產品的整個生命周期負責,說人話就是產品經理負責產品做什么不做什么,該什么時候做,而設計師關注的是產品的用戶體驗。產品是商業的代言人,而設計師是用戶的代言人,二者本質上的不同,就決定了在做產品分析時關注點必然不同。如果按著產品經理的思路來做產品分析,得出大環境之類的太過于泛化的結論對設計沒有什么實質性的幫助。
用戶體驗五要素,swot,等等這些高大上的方法論看起來非常有用,從多個維度把一款產品分析得非常清楚??烧鎸嵉那闆r時,往往新手設計師同學既不懂方法論的本質,也不懂使用場景,只是盲目地套用,導致產出的是一篇「八股文」一般的產品分析報告,過于全面但沒有重點,什么都是點到為止,對自己理解業務和輔助設計沒有實質性的幫助。
我認為,「方法論」本質上是經驗主義,使用過去解決問題的方式來解決新的問題。在一定程度上,方法論是有用的,一些簡單的問題,確實是有固定解法的,而且,解決問題也更快。但是在更難更特殊的場景下,方法論不再管用了。很多時候,問題表面上看起來一樣,可是由于問題的背景不同,所以解法也是不一樣的,這時候再采用方法論,就會產生思維固化,強行去套方法流程,得到的一定不是最正確的答案。
在確定了目標和分析重點之后,我們就可以開始進行分析產出產品分析報告了,在這里我整理了幾個撰寫時的原則供大家參考:
第一點是我們要避免去主觀臆斷功能的合理性。正如我上面提到的一樣,我們并非 B 端產品的核心用戶,有些我們感覺反常的地方,但是其實有它的合理性,因為 B 端用戶的痛點往往是在特定的工作場景下產生的。因此,在不了解真正用戶和場景的情況下,僅憑經驗下的結論往往是錯誤的。
我之前的一個項目的設計中,在給圖表配色時,我最初的一個版本是用的近似色去完成的,在發給產品經理初審時被打回來了,理由是這種配色不夠明顯。我追問原因后才知道,我們的一部分用戶是年齡比較大的用戶,對比度足夠高才能方便他們看清楚。最后出的一個版本是對比度非常高的配色,盡管從設計的角度來看這種配色美觀度不足,但是能夠讓用戶看得清楚。
在這個例子中,用戶對于美觀度并沒有很高的要求,反而對于數據的識別度要求更高。我們常聽的一句話是「己所不欲,勿施于人」,然而在B端的設計中,我們更要做到「己所欲,亦勿施于人」。
B 端產品有一個很重要的特點,購買決策者與使用者的割裂。我們在思考一個功能時,不能僅僅考慮使用者的體驗,也要考慮決策者的想法。
比如釘釘的「已讀未讀」這個功能,相信大家對這個功能是槽點滿滿。但是在 B 端產品中,決策鏈上游是購買決策者即老板,因此就有了這個功能。如果只考慮到用戶體驗,這個設計從一開始就不該出現。但是,與 C 端產品的流量思維不同,B 端產品不是靠體驗來吸引用戶存活的,而是靠滿足決策者的需要來活下去的。很多大家感覺不好用或者體驗很差勁的 B 端產品,仍然活得很好,就是這個道理。
說句題外話,釘釘已經注意到了這個細節,在去年的一個演講上,釘釘總裁也提到了對這個功能點的考慮,他舉了一個場景,在不改變現有設計的情況下解決了這個問題,通過智能手表等外設來預覽消息,而手機和電腦依然顯示未讀,自己考慮好了的時候再去回復。
從戰略層到功能架構,再到每個功能細節,采用金字塔原理去遍歷,避免遺漏的同時層層深入。
在此處,我介紹一下我認為一份合格的產品分析報告應該包含的部分,各位設計師同學可以根據自己的需要進行適當調整。
因為產品分析是有一定的時效性的,且是針對某一個具體版本去進行分析的,所以在文檔開頭要列出自己所分析產品的版本,例如(飛書 V5.6.9,釘釘 6.3.35)。
即設計師進行產品分析的時間,留檔以供以后查看。
此處要回答的問題是,產品是用來干嘛的,給誰設計的以及怎么賺錢的。
即產品是用來干嘛的,不需要特別具體,只需要在大方面上對產品進行概括即可。舉個栗子,抖音定位是一款短視頻消費型產品,以“內容”的新鮮有趣為主,強調分享和信息獲取,滿足幸福快樂的美好時刻需要。
即產品是給誰設計的,在此處需要對客戶和用戶做區分??蛻粢话闶侵钙髽I的 CEO/管理者,他們來決定是否要斥「巨資」購買一款軟件。比如說某公司的 CEO 最終決定買釘釘還是飛書作為辦公協同軟件。而用戶一般是企業內的員工,他們使用軟件來完成一些日常工作。分析目標用戶的意義是,在之后的分析中,我們都要以用戶為落腳點,去分析功能的合理性。
需要注意的是,此處并不需要去做一套完整的用戶畫像,只需要大概描述一下是產品的客戶和用戶的職位和核心需求即可。
舉個栗子,對于某客服工作臺產品,
即產品如何賺錢,在這里,我們并不需要用各種很高端的工具——比如商業模式畫布,去分析商業模式,我們僅需要知道產品的賺錢方式即可。作為設計師,我們不需要有產品經理那么專業的商業思維,但是我們也一定要能夠從商業角度理解產品的價值,一款產品最健康的狀態一定是用戶價值與商業價值并存。因為本質上而言,用戶體驗也是商業價值的一部分。
對于B端產品而言,有兩種最常見的售賣方式:
1. 本地部署 —— 按軟件數量售賣
本地部署是指產品的應用、數據都存儲在一臺計算機中,這臺計算機不與其他任何服務器、計算機相連。21世紀之前的傳統 IT 公司大部分都屬于這類,比如 Adobe 旗下的產品(盡管他們也在做云,但是更多情況下我們還是把 PS 當做本地產品來使用),那時候 B 端企業的商業模式是:主要服務于大企業客戶,通過與頂級的合作伙伴合作,推出頂級的產品,提供一整套軟硬件解決方案,并進行深度服務,一次性收取高昂的軟硬件費用,并且每年加收不少服務費。
2. SaaS —— 訂閱制
21 世紀后,隨著云計算技術的發展,越來越多的產品開始部署在云上,也就逐漸發展成了現在的 SaaS 產品,從這個角度來講,我們通常所說的 SaaS 產品其實就是將本地部署變為云端部署的產品服務。
這時候 B 端企業的主要商業模式是:不僅服務于大型企業,也服務于中小企業。以訂閱制的方式,定期收取費用,并且提供不同的版本,進行差異化定價,實現收益最大化。
舉個例子,藍湖就是提供了四個版本并且以季付或年付的方式進行收費。
將需求轉化為對應的軟件層面可實現的能力,即功能,功能可以實現需求所期望達成的目標。
一個完整的 B 端產品包含若干功能,將一套功能依據業務進行分類整合,形成的抽象化業務模型即功能架構。
功能架構指的是產品是如何由這些功能組成的。我們在分析功能架構時實際上更偏向于產品的實現模型。
信息架構是包括組織系統、標簽系統、導航系統、搜索系統在內的綜合系統。我們在分析信息架構時,分析的是這個產品是如何將不同的功能組合在一起展現在用戶面前的,分析的是產品的呈現模型。
一個成熟的 B 端產品甚至會有甚至會有三四百個功能,我們在分析功能細節前,必須要先厘清架構,以一種抽象的框架視角來全局思考,而不是也僅僅以用戶的視角來看產品的表象。
真正地去使用產品,并將產品的所有功能與模塊收集到一起。
以模塊作為分類依據,將所有功能分到不同的模塊里,必要的話,可以繼續細分子模塊。
在這里要注意,一個功能是否屬于某一個模塊,不能以這個功能是否在某個頁面為依據。一個頁面出現了某個功能,只是因為這個場景下用戶需要這個功能,而不是這個功能屬于這個頁面。
以飛書后臺為例,很多人在分析時會把首頁也作為功能架構圖中的一個節點去分析,這是錯誤的。
首頁只是功能的聚合,而非功能模塊,例如「添加成員」這一功能應該屬于「組織架構」模塊中,如果將首頁也加入分析,勢必會出現功能的重復。
在分析完整個功能架構之后,我們可以深入到每個功能的細節了。其中包括以下兩點:
通過繪制功能的使用流程,我們可以模擬用戶在使用產品時的流程,發現一些從宏觀角度上忽略的點。在繪制時,要注意的是,要控制在頁面 & 操作維度,避免拔高到功能維度甚至業務維度。
我們除了要知道這個功能該怎么用之外,還要知道功能與業務的關系 —— 功能背后的需求。
在分析背后的需求時,除了知道這一需求是什么,如果可以多走一步,對需求進行分類,那對于我們了解產品時大有裨益的。
關于需求的分級,在 C 端中常用的模型是馬斯洛需求模型,但是這一理論并不適用于 B 端,主要是由于以下原因:
一般而言,我們可以將需求劃分為功能性需求與非功能性需求。非功能性需求,指的是隱藏在功能需求背后以及開發需要考慮的的需求,也叫作“跨功能需求”。最常見的非功能性需求就是產品的響應時間,一般非功能性需求是由開發和測試同學考慮的。
而對于功能性需求,有三大類:業務需求、功能需求、產品需求。而這三類需求也有比較立體的層次關系:
業務需求,提出者是業務范圍、業務模式和業務規則的制定者,一般是指業務方的高層人物,比如 CEO、高級經理等。產品設計是服務于業務定位的,進而使得產品戰略遵循于企業的發展戰略,只有這樣產品方向才不至于發生偏差,因此,他們提出的需求一般不能違反,換句話說,他們提出的需求是整個系統設計的最高綱領。
用戶需求,提出者是基層管理者和執行者。他們關心的是如何使用產品完成自己的工作,提出的需求相對細節,例如對操作、流程上的訴求。
產品需求,由于 B 端產品的復雜性,在建設時需要考慮到功能復用問題,以及與其他系統的架構交互問題。舉個例子,語雀 App 是阿里旗下的產品,在開發登錄界面時,沒有重新開發,而是集成了阿里云的 SDK。產品需求本身對業務實現沒有價值,它的價值體現在節省人力和優化軟件架構上。
三者雖然并沒有絕對意義上的優先級順序,但是一般而言,B 端產品時優先考慮業務需求,其次關注用戶體驗,滿足用戶需求,最后才是考慮產品需求。了解了這一點,我們對功能背后的需求進行分類后,就可以從更高的視角來分析功能的設計邏輯,而不僅僅是停留在好不好看的層次上對功能進行分析。
在《交互設計原理》中是指:對于交互式數字產品、環境、系統和服務的設計,定義人造物的行為方式,即人工制品在特定場景下的反應。
在《交互設計精髓4》定義為:設計交互式數字產品、環境、系統和服務的設計,聚焦于如何設計行為。
而在《超越人機交互》中則是指:設計交互式產品來支持人們在日常工作生活中交流和交互的方式,創造用戶體驗以增強人們工作、生活以及通信的方式,聚焦在實踐上,即怎樣設計用戶體驗。
交互設計即行為設計,關注于如何設計系統如何幫助用戶更高效愉快地達成目標。
僅僅知道是什么遠遠不夠,我們更要知道如何去分析一個產品的交互設計好壞。在這里,我提供兩個思路供大家參考:
上文提到,交互設計的對象是行為,而這里的「行為」可以拆分為 3 個部分:導航,輸入和展示。
設計要點:
例如:掘金的頂部導航,既體現出來了導航本身與包含內容的關系(導航的標簽是當前內容的概括),又體現出來了內容與當前頁面的關系(當前頁面是首頁下的一個子頁面)。
這里的輸入不僅僅指我們日常中的輸入,而是一個廣義的概念,將所有用戶向系統提供信息的方式統稱為輸入。輸入可以通過多種方式完成,包括輸入命令、按下按鈕、快捷鍵、甚至打手勢、語音等方式。
設計要點:
設計要點:
尼爾森十大原則由畢業于哥本哈根的人機交互學博士 Jakob Nielsen 發表,他提出十大可用性原則,用來評價用戶體驗的好壞,我們也可以以此為依據來分析一個產品的交互設計好壞。具體的內容網上有很多資料,筆者就不再贅述。
視覺設計即 UI 設計,負責產品的圖形、圖標、色彩、視覺風格等,從視覺層面把控產品界面設計,決定營造出什么樣的視覺體驗。
視覺設計的分析內容可以拆分為形、色、字、構、質、動。在分析時,如果是網頁端,可以借助瀏覽器的開發者模式或者谷歌瀏覽器的插件「VisBug」來詳細查看各個維度屬性細節。
圖標的圓角,卡片的圓角,icon 的風格與統一度(包括:視覺大小,線段粗細,端點類型、拐點類型等)
例如,同樣是頭像卡片,QQ采用了圓形來體現靈動輕盈的風格,而主打熟人社交的微信則采用了小圓角。
色彩分析包括用色規范、色彩搭配、層級等。在 B 端產品中,色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。
字體的屬性有字號、行高、字體、字重等。通過合適字號和字重可以對界面元素劃分視覺層級,幫助用戶識別。而在一些特殊的場景下,可以運用特殊字體來提高識別度和增加頁面美觀度。
例如:支付寶使用了常用的 Din pro 作為其數字字體,其他 APP 廠商也分別使用了特殊的數字字體。
此處的構是指頁面結構,分為層級和間距兩大部分。合適的層級和間距可以幫助用戶理解頁面,并給予界面呼吸感和通透感。
質感與風格、界面風格,投影數值,扁平還是擬物。
比如說相比普通的單層陰影, Ant Design 采用了三層陰影的表達方式,讓陰影更柔和,更符合真實狀態。具體可查看 https://ant.design/docs/spec/shadow-cn
最近幾年,越來越多的公司和團隊已經意識到動效在產品用戶體驗中的重要性,動效設計已經成為產品設計語言的重要構成之一。
動效設計并不只是為了修飾,使用動效不僅可以更清晰地體現內容元素之間的邏輯和層級關系,還可以提供當前的狀態反饋,加強用戶對操作行為的感知,給用戶以可控的感覺。
除了上述內容之外,我們在分析一個產品時還可以做以下兩件事:
在被問到「你覺得這款產品的用戶體驗好嗎?」時,我想大部分設計師同學即使做完了產品分析,也很難回答這個問題。那么,我們該如何做才可以較為準確地回答這一問題呢?
基于這個問題,我們從用戶體驗的定義出發,ISO 對用戶體驗的定義有著如下解釋:
用戶體驗,即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。
從定義可以看出,用戶體驗不僅是主觀的,而且范疇非常廣,所以在描述時,我們不能僅僅用好/不好來概括。要解決這個問題,要點在于建立一個清晰合適的標準來量化用戶體驗,體驗自查就是在做這樣一件事 —— 度量體驗。
通過做體驗自查,可以達成以下效果:
本質上,設計走查表通常是設計師在完成設計稿后,用于快速遍歷方案、修正遺漏或不周的工具。在產品分析中,我們使用這個工具也可以達成體驗自查的目標。通常,我們是需要根據產品建立一套適合自己的交互設計自查表的。如果暫時沒有,也可以暫時使用網上成熟的自查表來進行。
問題位置:
即體驗問題發生的位置。
類別:
不同自查表對問題的分類不同,例如用戶體驗五要素、可用性原則等。
重要程度:
如果采用正向思考,很容易陷入“都很重要”的困境,所以這里一般采用反向分析法,也就是如果不解決這個體驗問題,會造成多大的影響。我這里將重要程度分成了三個等級,分別是:
發生頻率:
同樣是三個等級,需要注意的是,這里不是以時間頻率來定義的,而是以「每經歷 n 次業務節點就會出現這一問題」的方式來定義的,如果不好量化,也可以使用每次,經常,偶爾這樣的詞來代替。
嚴重程度:
嚴重程度 = 重要程度 * 發生頻率
這里要注意的是,我們作為設計師,提出嚴重程度的判斷僅僅是作為優先級參考,但是真正的優先級和排期還是需要產品經理來做。
問題描述:
即對體驗問題的詳細描述。
首先,對問題進行重新審查和校驗,去掉非體驗問題、重復問題、補充不完整的問題描述等,然后整理到一起,這就是整個產品存在的大大小小、各種各樣的問題了。
然后,我們通過圖表對數據進行二次加工,一般采用雷達圖或柱狀圖。
示例 - 雷達圖的使用方式
嚴格意義上說,這并不是標準的雷達圖,只是使用了雷達圖的圖表背景。
外圈:上述表格中的「分類」
數值:上述表格中的「重要程度」
為每個模塊/流程各制作一張表,然后將每個問題都以點的形式置于圖中,哪個分類問題最多,哪個模塊/流程問題最多?哪些問題較為嚴重亟待解決?一目了然。
設計的本質是為了更好的解決問題,了解業務是解決問題的基礎,也是溝通順暢的利器。但是想要成為一個業務專家,沒有長時間的沉淀上是不太可能的,但是公司一般不會給很長的時間去學習業務,那我們該如何在短期內快速掌握業務知識呢?
在理解業務時遇到的最大挑戰就是那些晦澀難懂的特殊名詞,如 json 文件,API 等開發中特定的術語。
針對這個問題,在產品分析的過程中,我們可以同步建立一個專業名詞庫,來記錄這些特殊名詞,并將這些概念用自己的語言進行描述。這樣,在了解產品的同時也對業務有了一定程度的了解。
對設計師而言,相比 C 端的各種炫酷效果,B 端設計很難做的出彩,設計的價值更多是隱形的價值,基本不存在會有人因為你把一個按鈕做得好看夸你。從這個角度來說,確實成就感比較低。
但是,通過自己的設計讓幫助用戶更有效率地完成工作,這何嘗不會帶來滿滿的成就感?B 端產品一般是用戶不得不使用的產品,作為設計師的我們更應該對自己所設計的產品有著敬畏之心。
最后,給大家分享我很喜歡的一段話,與大家共勉。
本次的分享到這里就結束了,希望可以對大家有幫助。由于文章字數較多,筆者幾經修改,仍不免有疏漏錯誤之處,如發現錯誤,請讀者于評論區或私信指出,不勝感激。
在快節奏的洪流中,保持設計的初心,做有靈魂的設計,我們下篇再見~
作者:靳凱杰ah
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
菲茲定律由心理學家Paul Fitt于1954年提出,它是物理世界中人體運動的數學模型。這一定律提出之后,在很多領域都得到了應用,但是在人機交互領域的影響尤為深遠,可以說是人機交互領域的第一條定律,它通常被用來解釋鼠標(PC端)和手勢(移動端)在界面中的移動規律。這項定律尤其適合按鈕等可點擊、可選擇、可交互的元素,目的:易于查找和選擇。作為一個數學模型,菲茲定律是有表達式的,表達式如下:
T 是完成動作的時間a代表裝置開始結束的時間,b表示該裝置的速度,這些常數可從實測數據進行直線近似取得。D是起始位置到目標中心的距離。w是目標區域在運動維上的寬度。
結論: 離目標距離越近,所需的時間越短;目標尺寸越大,完成速度越快,時間就越短。也就是說,預測點擊一個目標的時間,取決于目標和當前位置的距離+目標的大小。
1 、放大可點擊元素的尺寸
大且近的目標元素讓用戶不需要做太精細的調整就可以輕易選中。小而遠的按鈕則意味著用戶要將鼠標/手指移動比較長的一段距離,并且再進行精細的調整才能選中,這樣不僅難以點擊、且需要花費更多的時間。
這里的大指按鈕的實際大小、也就是點擊熱區的大小,包含按鈕留白區域的大小。網頁設計里現在常見的設計方式就是大按鈕,四周大量留白; 而移動端設計里通常會擴展寬度,使用各種通欄按鈕,使用戶操作更加容易和快捷,可點擊圖標也會放大可點擊區域。
注意: 并不能無限的放大。大小給可用性帶來的加成是有限制的,如果把一個很小的按鈕放大,它會變得更易于點擊;但是如果按鈕尺寸已經足夠大,那么再放大尺寸,也并不會提高可用性和用戶操作效率。
2、 減少移動的距離
依據菲茨定律所言,距離目標越近,用戶點擊越快。所以我們通常會縮短當前交互元素和目標元素的距離,來提高用戶的使用效率和交互體驗。
1>減少絕對距離
因為移動端用戶通常為單手操作,也就是大拇指為主要操作工具,在現在大屏手機泛濫的情況下,屏幕很多地方是單手無法觸及的,所以現在我們通常會把按鈕和常用操作元素放在頁面下方的易操作區域。
2>減少相對距離
在兩個或多個操作中,通過縮短可交互元素之間的距離來提高用戶的使用效率。比如確認刪除操作,因為它是重要的負向操作,所以對于雙重確認,相比于在當前列表區域確認刪除(如下圖微信),如果使用彈框,那么用戶手勢的移動距離相對會更長(如下圖淘寶)
p:對于微信來說,刪除對話是用戶比較常執行的操作,因此便利性應該更高;而淘寶更想阻止用戶進行此操作。 也就是說并不是所有操作都需要縮短距離。
3 、相關元素靠近
相關的內容或者交互元素要彼此靠近,可以在視覺上增強他們之間的相關性認知
4 、屏幕的邊緣和角落無限大
因為屏幕的邊角有一個隱形的“結界”,可以阻止用戶鼠標因為大幅移動而超出目標區域范圍,因此用戶可以直接將鼠標大幅度移動到屏幕的邊緣、角落,而不用進一步微調。 所以屏幕的邊角適合放置菜單欄、按鈕這樣的元素,不管箭頭移動多遠,最終會停在屏幕的邊緣并定位到菜單上。 比如chrome瀏覽器它把TAB欄放在了屏幕最頂部邊界,用戶使用效率比較高。
其他補充:
1、餅狀菜單會比線型菜單更易選擇,而且錯誤率更低,這里面有兩個原因:
餅狀菜單的每個菜單項和菜單中心的距離都一致
餅狀菜單的每個菜單項的楔形目標區域都非常大,一般都會擴展到屏幕的邊緣
2、 目標點的位置實際上是邊緣的一些像素加上邊緣之外的全部面積。所以,這樣看來目標點就足夠大了。原因是基于fitts定律,它的一個分母的增大了而使得界面的效率提高了
總結:
1、我們想要更容易點擊到控件,就應該放在屏幕的邊緣或角落里。讓常用的控件更大,更容易辨別;
2、使用屏幕的邊緣和角落讓控件有效擴大,永遠不要把控件放在離屏幕邊緣或角落一個像素遠的地方;
3、邊緣之外的地方,也可以算作目標點的面積,這樣一來,目標的面積就被無限的放大了,也更方便用戶操作。
補充一張雅虎ued繪制的關于Fitts’ Law的Q版小漫畫,先初步了解下:
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文主要聊一下產品中使用的幾個交互設計原則,一致性,費茨定律,容錯性,希克定律。
我們在做設計時,經常會講到要保持一致。一致性的好處從外部來說,可以極大的提升產品的易用性,降低用戶的學習成本,同時也有利于品牌形象的傳達。從內部來說,將一些相同或類似的功能進行復用,提高團隊的協作效率,讓資源得到更充分的利用。
一致性體現在產品中可以體現在很多方面,比如是視覺風格統一,交互操作統一。視覺上可以是配色、字體、圖標、頁面布局、插畫,以及在不同終端上的統一。交互操作可以是相同相似功能在不同頁面的呼出方式,一些地方動畫的表現形式。
另外,產品與本身所處的行業內的競品的一致性,比如音樂播放頁面,用戶已經習慣了上面是歌曲宣傳圖,下面是播放切換的控件,各個產品的排版布局都是相似的,這樣的統一可以讓用戶沒有陌生感,在接觸一個新的音樂類產品時很快的上手。
滴答清單的網頁端、桌面版、網頁插件,將頁面的主要功能信息都放在了左邊,中間部分是清單列表,最右側是清單詳情,配色都是用了灰色、白色、淺藍色,圖標風格上使用的面型風格,這三個終端的視覺風格是保持了高度的一致,傳遞給用戶的也是很強的品牌理念。
阿里云盤,App啟動頁和網頁功能介紹,都是使用了C4D插畫,來保證兩個終端品牌風格的一致性。
微博App的詳情頁及他人主頁,這兩個頁面的評論功能都使用了相同的底部彈出框的控件樣式,用戶可以在不用思考的情況下直接操作,這是利用了相同功能在不同頁面復用了相同的交互控件。
簡單點來說,有兩個關鍵因素,兩個操作目標的距離、操作目標大小。第一個因素意思就是在當前產品中兩步操作,手指移動的距離越短,操作就越容易。第二個因素是當前操作目標越大,操作越容易。
石墨文檔App。在頁面右下角有一個懸浮的新建按鈕,點擊后從底部彈出活動視圖,用戶可以進行新建文檔、表格等操作。這里使用從底部彈出活動視圖,而不是在新頁面或者頁面中間,正是利用了費茨定律,縮短了兩步操作之間手指移動的距離,降低操作難度。
滴滴出行、如祺出行
滴滴出行打車頁面,App首先會自動定位你當前所在位置為出發位置,目的地一欄顯示文案「輸入目的地」。設計師將輸入框設計的很大,文案字體也很大,在當前頁面中非常醒目,極大的方便了用戶的操作。這就是應用了費茨定律的第二個因素,當前操作目標越大,操作也就越容易。
反觀如祺出行的打車頁面,出發地一欄和目的地一欄的尺寸是一樣大的,都是使用圖標+文字樣式,出發地一欄使用深灰色的圖標、深灰色的字體,而目的地一欄圖標雖然使用了橙色主題色,但是文字的顏色是淺灰色,字號也沒有放大,非常不顯眼。要知道用戶當前的迫切需求是輸入目的地,這樣設計無疑是增加了用戶操作的難度。
平時在操作產品界面時,經常會因為一些原因造成操作錯誤,而有些錯誤造成的損失是無法挽回的。那么設計師應該怎么避免用戶操作中犯錯呢?容錯性原則可以很好的解決這個問題。容錯性定義是:
“容錯性是產品對錯誤操作的承載性能,即一個產品操作時出現錯誤的概率和錯誤出現后得到解決的概率和效率。容錯性最初應用于計算機領域,它的存在能保證系統在故障存在的情況下不失效,仍然正常工作。產品容錯性設計能使產品與人的交流或人與人借助產品的交流更加流暢。”
拆解一下,影響「操作時出現錯誤的概率」的因素有,操作前的引導提醒以及操作時的提示。影響「錯誤出現后得到解決的概率和效率」的因素有,操作后的解決方案
微信的修改微信號功能,不同于修改昵稱直接進入編輯頁面,微信在中間增加了一個頁面,頁面內容顯示當前的微信號及提示文字,目的是提醒用戶要慎重,避免有些用戶修改了微信號之后后悔。這里是用到了容錯性的操作前的引導提醒,降低了出現錯誤的概率。
QQ注冊頁面,用戶輸入昵稱后,系統會檢測昵稱是否可用,及時給出給出提示。輸入密碼時會自動出現密碼設置的提示,及時提醒密碼都有哪些規則,避免用戶輸入不符合要求的密碼。操作中給出這些相應的提示,可以使用戶更加流暢的完成注冊流程。
印象筆記網頁版。將一篇筆記刪除后,頁面頂部會出現一個提示框,文案是「已將XX文章移至廢紙簍」,提示框2、3秒之后自動消失。如果剛好這篇筆記是不小心誤刪的,這里的提示框給予了用戶反悔的機會,幫助用戶及時的找回筆記,彌補錯誤。
??硕桑纸惺窍?艘缓B桑℉ick Hymalrs 1aw),是一種心理物理學定律。應用在產品設計當中,就是當頁面中需要有不同選項時,要盡可能的少而簡單,降低用戶的決策成本。
美團外賣頁面的金剛區,共有三行應用。核心推薦的5個應用是放在第一排,其他10個應用排成兩排,核心推薦應用與其他應用在圖標風格上使用了區別化設計,用戶在進行選擇時變成了5選1,而不是15選1。這是設計師在功能設計時針對應用做出了重要程度的區分,以幫助用戶更快做出選擇。
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
除非有更好的選擇,否則就遵從標準 —— 阿蘭庫珀
費茨定律:
距離:起始位置離目標位置越遠,我們到達目標位置所花費的時間就越長,反之亦然。
目標大小:目標面積越大,我們定位到目標位置所花費的時間就越短,反之,目標越小,定位時間越長。
·生活中的費茨定律
剎車和油門踏板相距很近,剎車時的物理面積比油門的物理面積大,會最快接觸到踏板,減少事故的發生。
·界面中的費茨定律
(1)距離目標位置盡量縮短,相關操作保持親密性
例如:抖音的視頻播放界面,系統會判斷用戶進行觸發時手指與屏幕的接觸位置,并將操作按鈕顯示在離用戶手指最近的位置。
(2)目標尺寸大小要合適
目標點擊熱區在合適的范圍內,越大越容易精準點擊,越小越容易誤操作。iOS交互指南中規定最小點擊熱區為44*44。
(3)拇指原則
人們在使用手機時,75%的交互操作都是由拇指驅動的,考慮到費茨定律,如果目標位置超出拇指的移動范圍,操作成本增加。
米勒定律:
是交互設計中常用的一個定律,美國心理學家對人的記憶能力進行定量研究,他發現人的短時記憶能力廣度為7±2個信息塊,超過這個范圍就容易出錯,在7+2與7-2之間浮動。
·生活中的米勒定律
電話號碼,銀行卡號,身份證號碼進行數字分隔,降低記憶成本,提高信息的易讀性,視覺防錯。
·界面中的米勒定律
(1)分段記憶,信息分層
文章、文本中的字號、字間距,目的就是便于讀者記憶和提高易讀性
(2)導航和選項卡不超過9個
網頁設計的一級導航不要超過9個,如果導航和選項卡內容過多,可通過聚合按鈕來包容其他次要入口。(用戶使用導航就是要快速找到自己想要的內容,如不能快速查找,用戶可能會就此流失掉)
(3)系列位置效應
首因效應:相對中間位置,我們對最前面的物體記憶清晰。
新近效應:相對中間位置,對序列末尾物體記憶更清晰。
席克定律:
是一種心理物理學定律,用戶所面臨的選擇數量越多,花費時間越長,人機交互界面選項越多,用戶決策時間越長。
·生活中的席克定律
遙控器按鈕越少,越快做出操作;如交互設計四策略:刪除、組合、隱藏、轉移。功能層級也需要細分核心功能、輔助功能、邊緣功能。而核心功能是進入產品第一個發現的功能,操作頻率高,所以它的視覺應是最突出的,可以幫助用戶增強感知和節約選擇時間。
·界面中的席克定律
(1)減少選項并提供默認值
選項越多,用戶決策的時間越長,減少用戶思考的時間就是減少操作時間和學習成本,讓用戶不思考就做出正確的選擇,對于小模塊來說,一般選項不超過9個,9個以上可以用交互約束用戶的行為,如展開收縮。
(2)選項分類分層,信息區分主次
在菜單欄的設計過程中,我們會進行同類分組和多級分層的設計,效率會更高。重點信息、推薦信息和普通信息要在時間上做區分,這樣才能搶占視覺并在第一時間感知到。
(3)分步完成,分布顯示
分解復雜流程,讓用戶一步步操作,而不是全部堆到用戶面前,通過分步完成一個任務流,降低其他信息給用戶帶來的干擾。例如:用戶填寫表單時,可展示選項,當填完最后一項選“其他”時,再展開剩余的表單,目的上是為了減輕大量表單,給用戶感知上帶來的壓力,達到場景細分的目的。
接近法則:
接近法則也是格式塔理論中我們最熟悉的,最常用的一種法則。觀察者看到彼此臨近的物體時,會將它們視為一體。
·生活中的接近法則
小區規劃圖中,會通過較寬的過道,綠植圍欄來劃分他們之間的關系,從而增強人們的感知。
·界面中的接近法則
界面中的接近原則是對相似的信息及功能類別進行分組、布局。作用是直接影響到用戶與產品的視覺交流,引導用戶的瀏覽及操作行為。
常見的在列表頁面,通過色塊區分大組與大組,分割線區分小組與小組,目的都是在視覺上通過組與組的區分來劃分功能與功能之間的關聯性。
以上這四條是我們在平常工作時都會用到的,我們再進行一個界面的設計時應該對照下以上幾條定律,在與產品或開發battle時也能有理有據,告訴他我們「為什么這樣設計」。寫的手有些痛,剩下的4條定律下期我再繼續補充,下期見~
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
八個交互設計原則幫你避免出現基礎錯誤
1 一致性:一致性能給用戶節約成本、元素風格統一和延續性、產品內部結構的一致性
2 反饋:操作成功或失敗都有明確的反饋、告訴用戶此刻的狀態是什么會有什么結果
3 方便使用: 減法設計(扁平的框架設計—減少不必要的操作步驟,每個流程清晰沒有太多分支)
重點功能隨手可用 多選擇少輸入

4 預防出錯/防錯原則: 操作給予提示
5 幫助用戶認識改正錯誤:如果出錯要幫助用戶從錯誤中恢復過來
6 高識別性:(復雜的交互要給與引導和幫助)
7 用戶自由控制權:用戶可以取消正在執行的操作 每個層級都能找到上一級的方法
8 符合用戶的操作習慣
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
我們來探討下交互設計的善意。
善良常常被用來形容人,偶爾被用來形容產品,很少被用來形容交互設計。
就像人們會說,iPhone 有人文關懷,而很少會說,iPhone 的交互設計有人文關懷。在筆者看來,原因之一,是交互設計很難將人文關懷囊括完,而產品本身則基本可以。
類似的道理,本文探討的善意,始于交互設計,但不局限于交互設計,還包括產品和企業的善意。
一家之言,歡迎交流探討。
01 為什么選擇善意?
一個 3 歲小孩流落街頭,無家可歸,會讓無數人起惻隱之心。我們普通人的微小善意,有時可能是一種本能反應,或者說是一種感性反應。
“他內心是有時邪惡,還是對人們始終良善”,這是李宇春《年輕氣盛》里的一句歌詞。
惡是否為本能,筆者不知道??茖W家的解釋是,有些基因中會帶有惡??梢钥隙ǖ氖?,善惡皆為人性,共存于人類當中。
感性和理性是會此消彼長的,林黛玉和薛寶釵就是兩個極致的例子。同理,人類體內的善惡,也會此消彼長。
一款產品,在做決策時,很大程度上是基于理性。
這種理性決策,很多時候是無意為善,也無意為惡。但遺憾的是,那個非善非惡的中間地帶不會一直存在,有些無意為善和無意為惡,最終會成為非善即惡,比如開屏頁是否放廣告這件小事(下文有詳述)。
既然善惡會此消彼長,而且產品的有些理性決策會導致非善即惡,那么不可避免的,有時候,善惡會變成一道二選一的選擇題。
接下來,我們就從理性的角度探討下,為什么選擇善意。
1 長期主義
最近幾年,互聯網從業者有個共識:創業是件九死一生的事兒。因為據數據統計,90% 的創業公司活不過三年。
這是一個值得深思的社會現象,背后的原因究竟是什么?直接原因,往往是資金斷裂。深層原因,會有很多,比如產品不夠好、方向不夠準,等等。
那么,核心原因呢?筆者認為,和創始人的執念有關。
有兩類執念可以避免此類悲劇。第一類是做出優秀產品;第二類是長期主義。
做出優秀產品這塊,有很多例子,最典型之一是特斯拉。特斯拉曾面臨多次危機(資金、產能等),但都挺過來了,這肯定和產品深受車主喜愛有關。
筆者也見過兩個普通創業公司的例子。他們都有一顆做出好產品的心,都很重視 UI、交互、用戶體驗這些基礎的東西,而且把 UI 做的比較優秀,交互和用戶體驗做的還不錯。其中一家靠著用戶的付費在平穩發展,另一家連產品帶團隊被大廠收購了。
長期主義這塊,典型例子之一是巴菲特。巴菲特信仰并踐行價值投資,價值投資依賴長期主義。最近幾年,長期主義在國內也被越來越多的提及。
個人的理解,長期主義至少包含兩個要點,分別是:積累、多贏。因為,沒有積累就不會有成就,沒有多贏成就就不會長久。
中國女排,世界冠軍。排球界有個說法,叫三年成型,五年成才,八年成器?;ヂ摼W行業,也大致如此。這是積累。
用戶,員工,投資人,三方利益都兼顧好,才是多贏。
俗話說,顧客是上帝,大家都知道對用戶好;投資人作為強勢一方,利益也往往有保障;員工的利益是否有保障,往往取決于創始人,所以存在很大變數。
回到主題,長期主義和善意,有什么關系?
通常而言,多贏能否實現,關鍵在于員工的利益能否得到保障。
筆者在網上看過一個有意思的評論,說當下的年輕人,如果收入、成就感、高興這三點有兩點達不到,就會辭職。
所以,員工利益得到保障的標準,可以簡單定義為“三中二“,即收入、成就感和愉悅這三點滿足兩點。
再來分析一下現狀:相比員工,公司是強勢一方;人們仍受最大程度剝削剩余價值、官僚思想等觀念影響;惡性加班等風氣存在;僧多粥少的就業行情。
在這樣的大環境下,如果公司對員工沒有愛和善意,員工的利益是很難得到保障的。
最后,總結一下:公司有善意,員工利益就有保障,就能實現多贏,從而有望實現長期主義。
2 美好生活
前段時間,因為給武漢捐款 5000 萬、并且疫情期間蔬菜按成本價銷售,一些網友被胖東來這個商超刷屏了。
胖東來來自河南許昌,一個三四線城市,也是筆者的家鄉。目前僅在許昌和新鄉有店。
在一些關于胖東來文章的評論區,很多網友在喊胖東來去自己的城市開店。
為什么有這么多呼聲?簡單分享幾個例子。
顧客方面,胖東來有 6 類購物車,包含嬰兒手推車、兒童購物車和老年人購物車。老年人購物車自帶凳子,可供休息,同時還配有放大鏡。
員工方面,有高薪、高福利和利潤分紅等。胖東來比較為業界稱道的高福利有:每周二閉店,春節閉店 5 天,工齡滿 1 年即有 30 天帶薪年假,一天最多工作 7 個小時。
從網上的報道、評論以及公布于網上的企業文化來看,胖東來一方面主張工作和生活(愛情、家庭、休假等)的平衡,一方面在踐行和傳播幸福、快樂、尊重等很多積極的文化價值觀。
看新聞的時候,筆者注意到,老板于東來經常會提到“美好”這個詞兒。實際上,在筆者看來,胖東來本身就代表了一種美好生活,一種物質和精神雙豐盛的美好生活。
對于這樣的美好生活,用戶和員工自然喜歡??蛇@對企業有什么好處?
胖東來曾經意欲退出新鄉市場,新鄉合作商家和市民紛紛請愿,政府也多次出面挽留,最終胖東來留下來了。可見,胖東來在新鄉已經深入人心,顧客自然會大力支持它的發展。
胖東來有一句 slogon,能夠很好的解釋這一切,那就是:愛在胖東來。
同樣,既提供體面的收入,又關注員工和用戶的精神需求,給他們帶去美好生活,當然需要更大更多的善意。
在當下中國,能提供高薪的互聯網公司已經很多了,但是能在精神層面讓員工感覺良好、感覺愉悅、感覺幸福和快樂的公司卻為數不多。
對于所有企業而言,這又何嘗不是一種機會?
02 交互設計里,有哪些善意?
現實中,像胖東來給顧客和員工提供的這種美好生活不常有。但是退一步講,還是有很多產品對用戶展現了很多微小善意,值得我們學習。
這種微小善意主要有三類,分別是:不打擾,護尊嚴,人為先。
1 不打擾
我們生活在一個信息爆炸的時代,不被手機上的信息過度打擾,是一個剛需。有三類信息,如果把握不好度,就會對用戶形成打擾。它們分別是:廣告、推送、推薦。
廣告這塊,主要有兩類會形成打擾,分別是:時機不佳的廣告,過長的廣告。
這方面,微信是個榜樣,值得學習。比如開屏頁廣告,就是時機不佳的廣告,因為大家不想在這里看到廣告,微信就沒有放。朋友圈里也有較長的視頻廣告,微信的常見做法有兩類,要么先展示一張圖片,要么先是無聲播放。是否看完整的視頻廣告,選擇權在用戶手里。
推送這塊,常見的有手機系統的通知和 App 內的紅點消息。
系統通知,目前也有被濫用的趨勢。根據使用情況和感受,個人的建議是這類推送控制在 1-2 類。第 1 類是關于核心功能,比如微信推送新消息,搜狐新聞推送新聞;第 2 類可保留一定的彈性,核心原則是對用戶有價值,比如偶爾的活動通知。
目前有兩種情況會對用戶形成打擾和困擾,第一種是過于頻繁的活動通知;第二種是推送和核心功能相差甚遠的信息,比如金融類產品推送新聞。
紅點消息,有一類會對用戶形成打擾,那就是來自官方的過于頻繁的各類活動、促銷等信息。
推薦這塊,主要指 App 內的 Banner 和專題。目前對用戶形成打擾的主要是一級頻道的一些專題。
一種是過多,比如網易云音樂的首頁,就有 9 個專題;一種是位置不佳,比如 Keep 的“探索”頻道就包含了課程的推薦,但是在“運動”頻道還有兩個專題來推薦課程。
2 護尊嚴
護尊嚴,就是盡最大可能,維護用戶的形象和尊嚴。
最近幾年,常有產品花巨資撒紅包給用戶搶。產品的初衷自然是好的,而且看起來也是一件皆大歡喜的事情。但是這件事很難提升產品的美譽度,也就無法增加用戶對它的喜愛和忠誠程度。
為什么會這樣?
讓用戶搶自己撒的紅包,這件事能維護用戶的形象和尊嚴嗎?非但不能,可能還會對此造成傷害。因為可能會顯得用戶愛占小便宜,也可能會使用戶處于被施舍的一方。總之這種事對用戶來說,并不酷。
一款產品,要想贏得用戶更多的喜歡、尊敬乃至忠誠,就最好不做哪怕僅是微弱傷害用戶形象和尊嚴的事情,同時多做一些相反的事情。
3 人為先
人為先,是當用戶利益和企業利益發生尖銳矛盾時,去追求一種用戶利益在先的雙贏局面。
大家都知道,吸煙是有害健康的,但是煙草公司又是要賺錢的。泰國香煙那種既觸目驚心又惡心嚇人的包裝,就盡他們最大的可能詮釋了“吸煙有害健康”,是真正的用戶為本,讓人心生敬意。
泰國香煙的這種做法,值得一些極易讓人上癮的游戲廠商借鑒和學習。
03 交互設計:如何做到善意?
上一大段,是善意的三類表現。這一大段,再探討下做到善意的一個原則。
以社區型內容型產品為例,這個原則就是:先服務后管理。
這里的服務,是指以服務者的心態做好用戶體驗,并不局限于交互設計。這里的管理,指的是一些必要的管理,一般是用戶的行為規范和用戶違規時的處理,比如評論里罵臟話、發布侵權文章等。
所有用戶都是需要被服務的,只有少數行為不當的用戶才是需要被管理的,所以我們要先服務后管理,以免誤傷了不需要被管理的用戶。
服務本身就是一種善意,筆者把它分成了兩個階段,分別是:體驗的初始階段,體驗的完整過程。
初始階段對應的是:初始服務;完整過程對應兩類服務,分別是:家常服務,極致服務。
1 初始服務
初始服務,是當用戶剛開始用這款產品時,能給他們留下良好印象的服務。
如何做到?不出現任何輕微惡意和管理傾向即可,再提供一些便利和幫助則更好。
下面分享一個反面例子。
在個別城鎮的衛生死角,有時會看到這樣的標語,“此處禁止倒垃圾!違者罰款 200!“。結果那個地方往往有很多垃圾。
為什么會這樣?
這個標語,有兩層意思:第一,你很可能會在這里倒垃圾;第二,禁止你這么做,做了要罰錢。
也就是說,某種程度上,這個標語在用惡意揣度別人,同時也在很嚴的管理別人。
看到這個標語的人很可能會這樣想:既然認為我會在這倒垃圾,那我索性就倒了;禁止我?憑什么?還罰我錢,嚇唬誰呢,況且你有證據嗎?
下面再分享一個很好的正面例子。
筆者有一個宜家的退貨經歷。把一個已經拆過的桌子打包送到了宜家,宜家沒有檢查里面的零配件(很多螺絲之類的),直接退了。這樣寬松的退貨條件,宜家可能會蒙受一定損失,比如小概率的零件丟失,但宜家還是把這種服務提供給了顧客。筆者當時的感受是宜家挺信任我們的,對宜家就多了幾分好感。
2 家常服務
家常服務,是指一種稀松平常,但又讓用戶感到舒服自在的服務。
舉個例子,你去好朋友家里玩,朋友給你倒了一杯水,并端出一盤削好切好的蘋果,你們一邊吃一邊聊。你和朋友是平等的關系,他這種簡單的招待并不會使你感動,但卻使你有一種接近在自己家的那種舒服自在。
筆者在用微信公眾號(后臺)時會有這種感受。在星巴克和肯德基時也會有類似感受。
家常服務,如何實現?第一,要有良好的初始服務,這是基礎;第二,要有周到且較高品質的交互設計,這是關鍵。
以微信公眾號為例,和微信一樣,它的交互設計也做到了周到和較高品質。下面看看微信公眾號的初始服務。
面向大眾的資訊平臺大多都有一個發文規范,多是關于禁止的行為,通常都會用一個單獨網頁來展示,有 1-2 頁紙那么多。
通常情況下,多數作者是不會違反發文規范的。對于這部分作者,當他們首次看到 1-2 頁密密麻麻的發文規范時,可能會產生抵觸心理,即便自己不會違規。就好像高中開學第一天,班主任二話沒說,直接就立了 20 條班規,同學們會是什么心情。
微信公眾號的做法就很巧妙,它把這些規范分割成了三部分。
第一部分是嚴禁的紅線行為,以高度概括的一行文字呈現,所有人都能看到,但是得仔細留意才能注意到。這是規范性質。
第二部分和競品一樣,也是鏈接出來的一個單獨網頁。鏈接入口也和競品一樣,在關聯性最強的發文頁面右上角。不同的是,這一頁展示的是規則,主要以問答的形式呈現,給人感覺是有幫助的信息。這是服務性質。
而競品的這個頁面,通常都是禁三禁四的規范,給人的感覺可能是緊張、壓抑甚至抵觸。
第三部分是次于紅線的禁止行為,比如侵權、低俗內容等。這部分內容的管理辦法被以公告的形式分散在公告列表里。而且公告列表里內容多樣,還有很多一般的通知,所以這個公告列表也不會像競品的那一頁規范一樣,給人緊張、壓抑的感覺。性質上是中性。
另外,這部分的入口在后臺首頁右上角,和發文模塊是分開的。所以不會違法規范的作者一般不會去公告列表里翻這些內容,也就看不到。
微信公眾號就是這么巧妙的讓多數作者看不到“班主任”的“20 條班規”,同時還讓他們看到了“班主任”的“常見問題回答”。
這就是微信公眾號在發文規范方面的初始服務。另外還有一個加分的細節,就是檢測疑似錯別字的功能,很貼心,雖然目前還不是很準。
3 極致服務
極致服務,是指讓用戶感動的服務,比如海底撈和胖東來的服務。
這種服務,一般是由許多細節積累而來,是一種做加法的服務,而且背后往往依賴人力。
好的交互設計,一般都是在做減法,而且純粹是界面、機器在和用戶打交道。所以極致服務難以復制到交互設計上。
不過,一款互聯網產品,除了交互設計,還有其它方面的內容。
B 站就是一個例子,它以不走尋常路的方式,在兩個方面做到了較為極致的服務。那就是:視頻無廣告,比較積極、歡樂的彈幕氛圍。
結語
以用戶利益為先,不打擾用戶,維護用戶的尊嚴,這是交互設計里的三種善意,值得我們學習。
先服務后管理。服務作為一種善意,也能夠引來用戶的善意,最終形成良性循環。
杜絕任何輕微惡意和管理傾向,再提供一些便利和幫助,便能做到良好的初始服務;
在初始服務的基礎上,提供周到、高品質的交互設計,就能做到良好的家常服務;
交互設計難以做到極致服務,但是其它方面有機會。
最后,用劉備的一句話來結束本文。
勿以善小而不為。
原文地址:站酷 作者:SnowDesign
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
著:[英] 賈爾斯·科爾伯恩
譯:李松峰
人民郵電出版社
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. 梳理知識框架,記錄閱讀收獲、心得,本身就是一個加深理解、溫故內化的過程。
2. 摘錄重要知識,存儲在數字媒體上,方便隨時按需查閱。
3. 鍛煉思維和表達。
百利無一害,來吧,走起。
本書講述了一個產品價值觀和四個策略。
一個產品價值觀:作者崇尚簡單體驗的產品設計。簡單的產品更容易制造 (成本也更低),也更容易使用 (市場也更廣)
① 這里的產品指數字產品或實體產品。
② 本書主要考慮大多數用戶 (主流用戶) 的體驗。
四個策略:刪除、組織、隱藏、轉移。本書的核心內容就是講述如何通過這四個策略(我理解就是方法論)設計大多數用戶喜愛的簡單體驗。這幾個策略適用于簡化功能和內容。
1. 知識原理很多都是相通的
① 本書的刪除策略與奧卡姆剃刀
奧卡姆剃刀:“如無必要,勿增實體”。講的也是簡單性原則。
他說:“切勿浪費較多東西去做,用較少的東西,同樣可以做好的事情。” 講得真好,不能贊同更多。
② 組織策略與親密性原則
親密性原則:彼此相關的項應當靠近,歸組在一起,成為一個視覺單元。——《寫給大家看的設計書》Robin Williams,非常棒 推薦
組織策略與親密性原則講的都是正確組織信息的方法論。
③ 簡單與別讓我思考
別讓我思考 (可用性最重要的原則):你的目標應該是讓每一個頁面或屏幕都不言而喻,這樣的話,普通用戶只要看它一眼就知道是什么內容,知道怎么使用它。即他們不需要思考就能明白??捎眯允顷P于人,關于人們如何理解和使用產品的,它和技術沒有關系。技術日新月異,人本身的變化卻非常緩慢?!饵c石成金》史蒂夫·克魯格,很棒 推薦+1
2. 凡事過猶不及。
書中有一個案例驚嘆不已,講的是東京蘋果專賣店,沒有按鈕的電梯 (電梯內和外都沒有操控按鈕),自動在每一樓層停靠、自動開和關門 (乘客干預不了)。置用戶于完全失控的環境中(要是深夜一個人乘坐,估計得嚇不活了)。難以置信,誰能想到以優質體驗設計征服世界的鼎鼎大名的蘋果,居然還有這種反人類的逆天設計!
3. 這本書的閱讀體驗跟《寫給大家看的設計書》極相似
① 簡單、輕松、通俗易懂兩者都為讀者創造了簡單、輕松的閱讀體驗。把知識融入情境、故事,以圖示意,短小的一篇一篇像在和你講故事,娓娓道來、言之有物、簡明扼要、通俗易懂。
② 知識框架扁平、濃縮為極簡,過目難忘《簡約至上》把全書核心凝煉為:刪除、組織、隱藏、轉移?!秾懡o大家看的設計書》將復雜的設計原理凝煉為:親密性、對齊、對比、重復。合上書,就能回憶起來,太簡單又太深刻,真的想忘記都難。
4. 好書亦師亦友
“雖然這世界上不能改變的東西很多,但眼前的設計還是有很多簡化的途徑可循?!?、“你能做到”... 像不像一個智慧溫暖又真誠善良的朋友在不斷的給你信心和鼓舞?
(小聲說,我也喜歡)
以我淺薄有限的認知來看,人們喜歡簡單不僅因為簡單順應人性,還因為簡單帶來高效:
① 簡單順應人性簡單意味著不用思考,以現有的認知水平一看就明白,在人的舒適區,啟用的是人低耗能自動模式,是本能來的。而復雜的事物,如思考、學習、鍛煉、做一件難的事,都是更多的消耗人的腦力、體力、意志力、自控力、耐心、時間,都是調用人的高耗能模式,所以復雜這個東西本質上是反人性的。
② 簡單帶來高效不管是工具任務型產品還是內容型產品,用戶使用產品的邏輯路線是一樣的,都是經由認知 -> 決策 -> 行動 -> 達成目標;如果簡單就會:認知快 -> 決策快 -> 行動快 -> 高效達成目標;所以,簡單是大多數用戶的剛需了。
1. 越復雜或少用的知識,忘記就越快。
2. 簡單源自專注。明確自己的目標,更容易迷途知返。
3. 解決問題前,先搞清楚狀況。糾結于某個設計時,退一步想想:“用戶在這里真正想干的是什么?” 聚焦用戶。
4. 共識:把所有利益相關方的目標都統一到最終用戶身上,通過共識構建愿景。然后,阻力和爭斗就會減少。
怎么讓利益相關方聽自己的?答案是必須理解他們的想法。
先從傾聽他們和理解什么對他們最重要開始。把匯總的意見恰當地反饋給他們,他們會知道你已經明白了。在感覺被人傾聽后,他們才會樂意敞開心扉。
“我也希望看到最適合用戶的設計,我們一塊看幾個,看看是否可行?!?
不要嘗試說服別人,聽他們說,讓他們自己判斷,讓他們自己承認而不是回避問題,然后再去尋找解決他們問題的方案。
5. 產品使用環境是觀察用戶的最佳地點,必須使軟件設計符合環境需求。你的用戶體驗應該簡單到不受這些干擾的影響,能夠在人們被打斷的間隙生存。
6. 為主流用戶 (大多數用戶) 而設計,忽略專家型用戶。
7. 體現品牌特征① 實用性——這個品牌能做什么對我有幫助的事情?(如讓飛行更簡單)② 這個品牌給了我什么感覺?(如充滿活力,好玩)③ 這個品牌崇尚什么?
8. 簡單就是讓用戶感到自己在掌控一切。你的設計不能跟這種掌控的感覺有什么抵觸,而是應該放大這種感覺。
9. 設計之所以會變復雜,通常是因為某些不重要的步驟擠占了核心特性。關注用戶行為 (而不是你的設計),并且從用戶的視角把它描述出來。
10. 在研究某個問題的時候,你需要把它轉換成一種認識。故事是描述認識的一種好方式。與一大堆需求描述相比,故事更容易讓讀者明白什么重要和為什么重要。故事應該用三言兩語把核心體驗表達出來。
11. 極端的可用性
① 任何人都可以使用
② 毫不費力的使用
③ 瞬間響應
④ 一目了然
⑤ 始終工作
⑥ 不出錯
⑦ 恰好夠用的信息
⑧ 在混亂無序的環境中工作
爭取你不可能達成的目標有一個重要的好處:保持正確的方向。
12. 堅持不懈是達成簡單最重要的一步。
“乍一看到某個問題,你會覺得很簡單,其實你并沒有理解其復雜性。當你把問題搞清楚之后,又會發現真的很復雜,于是你就拿出一套復雜的方案來。實際上,你的工作只做了一半,大多數人也都會到此為止……但是,真正偉大的人還會繼續向前,直至找到問題的關鍵和深層次原因,然后再拿出一個優雅的、堪稱完美的有效方案?!?——史蒂夫·喬布斯
13. 簡化意味著改變,而改變始終意味著痛苦。多數人會不惜代價避免痛苦。收集需要改變的證據很重要。
14. 挑出正確的點子,確保能夠得到很好的執行。
刪除:通過刪除來簡化設計,刪除所有不必要的,直到減無可減。
15. 刪除雜亂的特性可以讓設計師專注于把有限的重要問題解決好,而且也有助于用戶心無旁騖地完成自己的目標。
16. 不要等著別人不分青紅皂白地、無情地刪除最有意思的功能。要總攬全局,保證只交付那些對用戶體驗而言真正有價值的功能和內容。
17. 體驗的核心是最能打動用戶的東西。找到它,刪什么留什么就一目了然了。能夠消除用戶挫折感的功能同樣也會受到歡迎。
18. 刪除殘缺的功能、導致出錯的功能、不必要的功能
19. 如果一個小變化導致了復雜的流程,就應該退一步去尋找更好的解決方案。
20. 錯誤:即使非常小的錯誤也會讓用戶煩惱。消除錯誤是簡化用戶體驗的重要途徑。無論顯示什么錯誤信息,好像都沒有那么友好、親切和簡單。
21. 不要以功能的多寡來認定產品的價值,而應該看產品能否滿足用戶最高優先級的目標。
22. 刪除視覺干擾因素,讓用戶注意力保持集中。界面中的各種小細節會增加用戶的負擔、打斷用戶的思維,會像公路上的減速帶或坑坑洼洼一樣降低用戶的效率。
23. 太多選擇容易讓人反感。
24. 清除減速帶:選擇聰明的默認值可以減少用戶的選擇。
25. 刪除視覺混亂和噪音,意味著人們必須處理的信息變少了,能夠把注意力集中到真正重要的內容上。
26. 刪減文字、精簡句子:重要的內容“水落石出”,消除了分析滿屏內容的麻煩,用戶更有掌控感,把文字變得簡潔、清晰、有說服力。
27. 簡化對話,長話短說。一次交互就是用戶與設備之間的一次對話。
28. 砍掉時間??车艄δ芎蛢热菘梢怨澥r間,因為決定少了、按鈕少了、思考少了、閱讀少了。要在對用戶真正重要的事情上節省他們的腦力。
組織:通過組織來簡化設計
29. 通過組織的方式簡化設計,要點在于只強調一兩個最重要的主題。
信息布局、分類、排序、搜索、使用顏色分層 (地鐵線路圖),找到組織信息的正確方式,可以極大的簡化用戶體驗。要想知道設計是否成功,可以瞇起眼睛來觀察屏幕,看是否能區分出不同的層。
隱藏:隱藏不重要的,避免分散用戶注意力
30. 無論隱藏什么功能,都意味著你在用戶和功能之間設置了一道障礙。這個障礙可能是遙控器上的塑料倉門,也可能是網站上一連串的點擊。為了避免給用戶造成不必要的麻煩,必須仔細權衡要隱藏哪些功能。
31. 不常用但不能少,如個性化設置不會經常改變,因此非常適合隱藏。
32. 隱藏所有需要隱藏的功能,在你需要時出現在合適的位置上。
33. 細微的線索足以提示隱藏的功能。
轉移
34. 轉移合適的功能到其他設備上、系統組件中,向用戶轉移。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
“少即是多”是經常掛在嘴邊的話題,在設計過程中,設計師們都會想盡一切辦法去簡化交互流程、組件元素及各種設計屬性,讓用戶使用起來更簡單。當產品簡化到一定程度,就必須要面對其不可簡化的復雜性。
諾曼曾說過 “復雜是世界的一部分,但它不應該令人困惑 ”,如果復雜性是合理的,我們應該學會如何去管理復雜,考慮好復雜的問題在流向用戶后以何種方式處理,篩選控件就是用戶自行處理復雜信息的方式之一,只要是符合用戶行為做出的設計,將應有的復雜以篩選的形式呈現給用戶,讓其自行決定,用戶反而會樂意接受。
篩選控件的使用頻率非常高,本文根據筆者對各類篩選控件的拆解及自身經驗進行分總結,整理了在移動端中常用篩選控件的類型、使用場景以及設計思路,幫助大家在設計中更好的選擇適合自己產品的篩選控件。
一、現實生活中的篩選
二、篩選功能的重要性
三、常見的篩選類樣式
四、篩選的幾個維度
五、篩選功能設計準則
六、總結
在日常生活中,我們天天都在跟篩選打交道。設想一下,當你走進超市,在沒有任何分類指示的情況下,看到琳瑯滿目的商品是否會不知所措,答案是肯定的,且不論超市規模大小、商品的多少,相信沒有任何一個人愿意在不清楚的情況下花時間去找一個很可能不存在的商品,即便這點時間會很短。
道理還沒說完,大家都感覺自己很懂,可依然逃脫不了如今在各種形形色色的應用中找不到自己需要的功能而苦惱,那么這些應用又是誰設計的呢?答案就是「大多數人」。
換言之,如果我們能通過標識牌、平面圖指引(模糊查找),詢問服務員、記憶指引(精準查找),就容易很多,這些指引路徑就完全充當了篩選功能,至于通過什么方式,只能根據人們自身或現場條件自行選擇,能滿足自己的需求即可。在功能繁多、交互流程復雜的互聯網產品中也是如此。
在我們設計篩選控件之前,需要清楚了解什么是篩選,東施效顰不是什么明智之舉。篩選,即用戶根據自身需求、通過一個或多個特定條件,在已有的內容中快速找到滿足自己當前條件的信息,單獨呈現的同時、并將未滿足條件的信息暫時作隱藏處理,以便用戶完成自己的目標需求。
篩選也可以稱之為過濾器,是搜索框架的一部分。這里需要說明一點,篩選不同于搜索,它是系統結合用戶提出的條件,對內容進行規則性的查找,準確的說,用戶屬于被動,篩選出的結果在產品側「精準」、用戶側「模糊」;而搜索則是用戶通過明確的目標主動進行精準查找,要么直接找到自己想要的結果、要么對結果不滿意,搜索出的結果在產品側「模糊」、用戶側需要「精準」。說直接點就是,搜索直接查找出結果、篩選只是縮小查找范圍(并非絕對,也可以對搜索結果縮小范圍)。
在電商應用中,如果有目標的用戶更多使用的是搜索,那么沒有目標的用戶更多使用的則是系統推薦或商品分類,不管是哪種類型的用戶,前面雖然已經進行過一次范圍縮減,但下一步還是逃不掉要面對的海量商品,這時,不給用戶提供選擇上的便利,用戶很可能因瀏覽商品耗時過長、選擇性困難等原因扭頭就走,即便離轉化僅一步之遙,也無法避免用戶流失的問題。
增加篩選功能就能很好解決這個困局,用戶通過篩選、設置接近于目標需求的條件,縮短查找路徑,就能從海量的商品信息中快速找到符合條件的內容,大大降低了用戶的查找成本,節省了很多查找時間,用戶體驗得到很大程度的提升,由此可見,為什么要使用篩選,不言而喻。
1)系統定義篩選需求
方向性的篩選:用戶通過系統提供的多種類型進行頻道切換,還會存在多少子級,可定義為一級篩選。例如訂單列表(待支付/待發貨/待收貨/待評價),優惠券(未使用/已使用/已過期)等,用戶從已有的類型列表中選擇自己所需。
2)用戶自定義篩選需求
精細化篩選:當系統已提供方向性的篩選,用戶依然可從分類篩選出的結果中進一步細化。例如針對單個類型的商品列表自定義價格區間、發貨地、品牌...等,也可稱之為二級次篩選,相比一級篩選,其篩選的結果會更精細化,也更接近于用戶的真實需求。
(PS:系統定義篩選條件后,配合用戶自定義二次篩選條件以及排序功能,則更容易滿足用戶需求)
Tab式篩選條件大部分在操作前、操作中、操作后基本都會一直顯示,有橫向Tab和縱向Tab兩種,如新聞、視頻類型的應用大多使用橫向Tab,通過將不同的內容以大的方向、區塊進行分類,便于用戶隨時切換、篩選出不同的內容;縱向Tab更多則是在電商類應用中出現,且會存在多個子級,例如我們在京東購買「鼠標」,則需要在tab分類中依次找到「電腦辦公>外設產品>鼠標」進行篩選。
Tab類型主要以大的維度進行篩選,所篩選出的結果可能模糊且信息量極大,如果想要結果更加精準,則需配備其他類型的控件進行二次篩選。
操作中以蒙層的方式彈出,其他時候均為隱藏狀態。彈窗類型的篩選最大的優點是占用空間小,僅需一個入口,能在有限的彈出空間中從多個維度展示篩選條件,用戶選中或自定義對應的篩選項,即可快速篩選出自己想要的信息。
介于Tab式與彈窗式之間,篩選條件初始為隱藏狀態并提供一個入口。點擊后展開,期間不影響當前頁面的任何其他操作且一直處于展示狀態,需經過再次點擊才會將篩選條件隱藏。
基于自定義篩選條件過多,為滿足用戶個性化需求,點擊后會跳轉到新頁面操作多個條件進行篩選。相比前面提到的Tab、彈窗更為復雜,對篩選的要求較高。
高級篩選適合用在顆粒度很細的場景,為的是避開其他視覺元素的干擾,讓用戶更專注于當前頁面較為復雜的篩選條件,降低因受其他因素影響而出錯的情況。例如:在選擇汽車時,需要對服務、價格、級別、排量...等各種情況作出非常細致的選擇,這時用高級篩選就再合適不過。
篩選、排序組合方式算是商品列表中的標配了,尤其在空間資源有限的移動端設備中,能最大化的將多個控制條件一次性展示給用戶,在篩選出結果后再使用排序功能,便于更快找到想要的商品。例如美團、餓了么將篩選與排序控件形成組合,極大的提高了用戶篩選的效率。
單維度的篩選不管是設計還是操作都相對簡單,無需操作確定/下一步按鈕,觸發篩選條件后會就會更新信息列表,大家最熟悉的訂單系統(待支付、待發貨、待收貨...)即是單維度篩選。
另外,單維度具備短、明、快的特點,為方便用戶識別,單個標簽一般不超過5個文字,且語義明確,用戶不用任何思考就能快速理解。
當產品中的屬性過多,使用單維度篩選不僅會降低篩選結果的精準度,還可能會導致用戶因反復/重復無用的操作而產生挫敗感,已無法滿足用戶的需求。這時,需采用多維度篩選幫助用戶縮小查找范圍,讓其快速找到符合自己需求的內容。
多維度篩選條件一般以按鈕(單選/多選)、輸入框為主,有些還會以滑塊來控制數據范圍。設定好篩選條件需通過重置、確認操作按鈕,用來清空篩選條件或進入下一步。在移動端,因屏幕空間有限,一級篩選數量最好不要超過9個,如果太多,建議進行整合或并入二級篩選。
在多級篩選控件中,可以把當前篩選條件的上一級看成是篩選分類菜單,每個等級中可包含一個或多個單維度/多維度的篩選條件,移動端最多不超過3個等級。
從表面看,多級篩選與多維度篩選其本質是一樣的,但多級篩選會存在下一級或再下一級,而多維度會將所有篩選條件平鋪在空間中。當單維度、多維度篩選還是無法滿足用戶需求,多等級就能作為最好的延伸。
在設計篩選之前,需要思考用戶為什么要使用篩選、在什么樣的場景下使用篩選、以及如何滿足用戶的心理預期等,有了清晰的用戶需求,設計出來的篩選才能更好的幫助用戶滿足其需求。
以「餓了么」用戶點餐為例,使用點餐服務的用戶類型雖然很多,不過主力還是來自于辦公室白領、宅男/女這兩大用戶群體,有目標的用戶會從搜索、收藏、訂單記錄等入口直接去購買,但絕大多數用戶因長期點外賣的原因,“吃什么”就成了最大的問題,這時如果用戶還要“吃”,就必須得使用篩選功能,從Tab分類(模糊)到彈窗式篩選(精準)再配合排序功能滿足自己的點餐需求,得出結論:
1)一群不知道“吃什么”的白領、宅男/女用戶;
2)需要使用篩選功能解決自己“吃什么”的問題;
3)問題很快得到解決后,對結果及使用體驗非常滿意。
上面的案例可以看出,用戶想要在海量的信息中找到自身所需,從表面上看,最直接、真實的需求就是找到滿意的商品去下單。站在產品的角度并非如此,最應該解決的應該是效率的問題,這才是篩選的終極目標,不管用戶花多長時間,筆者相信都能找到想要的,但所花費的時間成本越少,滿意度就會越高,其產品的可信度、使用粘性、用戶體驗也隨之提升。
篩選并非千篇一律,不要一上場就來一波大眾化的篩選條件,很多APP首頁設計就是最好的例子,什么都不考慮,直接導航欄+輪播圖+金剛區+內容推薦...傳統的一套流程走下來,結果可想而知。
設計篩選功能時,不同類型的產品需要根據其產品定位、用戶目標以及使用場景來定義篩選條件,用戶需求是用來設定篩選條件范圍的決定因素。例如:購物類產品需要結合商品的銷量、評價、價格及知名度等,而新聞類產品側重于用戶偏好、點贊量、熱度值來提供篩選,方便用戶快速找到感興趣的內容。
在滿足上述兩個條件后也不能將篩選項一股腦的挨個排出來,即便是在同一個頁面內,也需要結合當前內容的屬性對篩選條件進行優先級排序,將用戶高頻使用的條件按先后順序依次排列,不重要的也可將其隱藏于某個入口。
以淘寶為例,在「手機」商品列表,篩選條件中首先看到的是品牌,其次是內存、容量...,我相信很少人不在乎手機品牌吧;而在「鋼釘」列表中,依次是價格排序、銷量...,品牌條件隱藏在了高級篩選中,試問,如果是你購買釘子這種實用性的商品,是在乎價格、還是品牌呢?
篩選功能旨在滿足用戶查找需求,通過縮短用戶選擇商品的范圍,節約查找時間,快速將符合條件的信息呈現出來,并讓用戶在這一過程中產生愉悅的使用體驗,以發揮產品的最大價值,從而增強用戶的使用粘性。
至于在設計中該使用何種篩選控件則取決于用戶需求和使用場景,設定符合需求的篩選維度及條件,且根據內容屬性做靈活變動即可,切記篩選的核心需求是通過簡單易用的方式來幫助用戶提高操作效率。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
用戶體驗(User Experience,簡稱UE/UX)這個詞是在上世紀90年代中期,由用戶體驗設計師 唐納德·諾曼(Donald Norman)所提出和推廣。
定義:用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。
可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度,即用戶能否用產品完成他的任務,效率如何,主觀感受怎樣,實際上是從用戶角度所看到的產品質量,是產品用戶體驗的核心,不好的可用性會導致用戶放棄使用產品。
可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。
指的是用戶學習如何與產品進行交互,以實現目標所花費的時間和精力,即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。
用戶在使用產品一段時間后,能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例,用戶能否快速的下載想要的東西,在同一系列中,可以快速下載更多的相關內容。
我們常說互聯網是有記憶的,好的產品體驗是幫助用戶去記憶。用戶在體驗中,要對一些有意識、無意識的行為進行記憶是一個比較大的負擔,如果在一些環節通過系統能幫用戶記錄,會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。
用戶在使用產品時,發生錯誤后,能否快速幫助用戶識別和糾正錯誤,幫助用戶從錯誤中恢復的能力。如常見的注冊登錄,當用戶屬于郵箱格式不對的時候,給出提示,并且告知錯在哪里。如果提示語只是:"請輸入正確的郵箱" 用戶可能會疑惑,錯在哪里。
滿意度指的是用戶與設計互動產生的愉悅程度,可以是用戶使用產品時流暢的交互和優秀的視覺設計,也可以是用戶在產品中得到的滿足感。比如sir語音交互,王者榮耀等級(滿足感)
產品能否提供用戶在完成任務時所需要用到的基本功能,例如P圖類軟件,用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。
在滿足實用性的基礎上 針對用戶提供不同場景下的功能定制,如美圖秀秀,在提供圖片美化的同時,針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。
用戶能夠預測到下一步操作或者整個流程的交互,將會發生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發生什么。
可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。
物理功能可見性是基于對象的物理外觀。在視覺上,這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件,最常使用的就是播放/暫停,上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中,這就是功能可見性。
當信息或者列表過多時區分狀態的展示,將重要的狀態信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區分未讀信息的微標。如果將這些徽標隱藏起來,會極大地破壞易用性,因為人們將不得不進入一個個郵件詳情頁當中進行確認,才能獲取到原本由徽標提供的狀態信息,這樣的互動非常低效且乏味。
當用戶在執行某項任務的時候應該清晰明了的告知用戶目前在什么步驟,后面還有多少步驟,完整清晰的流程展示。如果將這些信息隱藏起來,用戶會困惑當前進行到哪一步,接下來還有多少步驟。
強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素(如滾動條、命令按鈕和圖標等)的設計必須能夠為用戶提供足夠清楚的建議,讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么,以及如何與它們進行交互行為(點擊、長按、滑動 等)
給用戶及時、恰當的反饋,是體驗設計中非常重要的一項原則;對每個用戶的操作都應該有恰當的系統反饋(包含視覺、聽覺、觸覺)。
明確告知用戶當前操作發生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。
當用戶產生某個動作時,給予相對應的連接反饋。如大概用戶點擊某個按鈕時,按鈕默認的外觀與點擊后的外觀發生變化,結合現實世界的開關去思考(按下 開燈)動作與反饋是連接的,即時的。
??硕?,是1951年由威廉·埃德蒙·希克首先提出的,認為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多,做出選擇所花的時間就越多,當面臨選擇的數量增加,做出決定的時間也會跟著增加。
如京東篩選,在搜索結果頁會將篩選條件收起,因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單,并且做好歸類,用戶能夠更迅速的作出決定。
費茨定律,是1954 年 由保羅.菲茨首次提出,在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。
T:代表完成移動所需的平均時間
A:代表光標開始/停止時間
B:代表光標移動速度
D:代表從起點到目標中心的距離
W:代表目標的尺寸
簡單來說就是指:隨著目標的距離增加,移動到目標的時間更長,并且隨著目標的尺寸減小,選擇目標的時間也會增加。
所以在界面設計當中會遵循越重要的功能,占據面基會越大。重要圖標的點擊熱區也會增大。便于用戶快速點擊。
屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中,所以我們在進行產品設計的過程中,會將常用/重要的操作放置在屏幕邊緣處,便于用戶操作。
神奇數字7±2法則是1956年由 喬治·米勒 所提出的,根據喬治·米勒的研究,人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。
由于人類的大腦處理信息的能力有限,大腦會將復雜信息劃分成 塊 和小的單元。如:京東和每日優鮮的分類處理。
人類短期的記憶一般一次只能記住5-9個,所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。
復雜守恒定律是1984年由 拉里·泰斯勒 所提出的,也稱作泰斯勒定律。認為每一個產品設計的過程中,都有其固有的復雜性,存在著一個臨界點,超過了這個點產品設計的過程就不能再簡化了,你只能將固有的復雜性從一個地方轉移到另外一個地方。
在產品設計中,會盡量的簡化界面。當功能過多時進行一個整合的處理,跳轉或者滑動操作。如查看更多或者常見的漢堡導航。
新鄉重夫認為遺忘有兩種:一種是疏漏,另一種是忘卻。他建議采用一些措施來預防產品的缺陷。
防錯原則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽。因此,在設計中要有必要的防錯機制;比如常見的信息輸入狀態,未輸入置灰不可點,輸入變為可點擊狀態。
微信拍一拍:微信在出了拍一拍功能之后,很多時候點擊頭像的時候會不小心拍到別人,現在的拍一拍是可以撤銷的,在客戶端鼠標懸浮上就可以進行撤回,移動端長按出現撤回彈窗,兩分鐘內有效。
微信朋友圈動態:點擊返回圖標會出現的彈窗,避免誤操作。利用防錯原則,可以避免用戶重新編輯。微信當中有很多友好的體驗細節??梢远喽嗳ジ惺堋?
奧卡姆剃刀 定律 :它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉 (William of Occam,約1285年至1349年)提出。 這個 原理 稱為“如無必要,勿增實體 ”,即“ 簡單有效原理 ”
不必要的元素會降低設計的效率,不管是實體、視覺或者認知上,多余的設計元素,有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息,可以用「更多信息」來實現。如夸克瀏覽器,首頁只放置重要功能 搜索 和幾個整合內容的圖標入口。
讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件,在播放音樂之后進入其他的tab,在上面都會懸浮播放/暫停的區域。都能夠隨時操作。
就是產品的易用性,如果年紀大點的人,也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗,簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內,并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。
頁面的使用率,當你想要在一屏新增很多內容時,頁面的布局就會變得擁擠和區域變小,容易過于干擾用戶做出選擇,重要功能不夠突出等??淇藶g覽器首頁強化了搜索功能 和幾個整合內容的圖標入口;uc瀏覽器首頁內容過多,當用戶想要使用搜索功能時很容易被其他內容干擾。
前面說到的希克定律說到,當選擇的數量越多,用戶做決定的時間就更長。做過多的決定也是一種壓力,在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區的內容展示,馬蜂窩根據產品屬性放置了6個重要的功能入口,便于用戶更快的去選擇所想要的功能。
最后我們來探討一下設計和藝術的區別是什么。我看到一句話覺得挺好的。設計和藝術的重要區別是:藝術拋出問題,而設計解決問題。
我們設想一個場景,當你在藝術展廳站在一副名畫面前,你所思考的是什么?是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事,你會不會思考藝術家在作畫時的心情,處境,為什么要這么去畫?想表達怎么樣的情感?
然后我們再設想一個場景,同樣在藝術展廳,你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧?因為相機的拍照效果在任何環境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://m.skdbbs.com