<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          資深UI設計者

          近年來暗黑模式的設計趨勢開始一點點明顯,Ant Design 在這次 4.0 的升級中也對這類暗黑場景化的設計開始進行初步的探索,接下來就讓我們一起來看下 Ant Design 這一針對企業級的設計體系是如何設計暗黑模式的。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          什么是暗黑模式

          暗黑模式是指把所有 UI 換成黑色或者深色的一個模式。

          需要說明的是,暗黑模式不只夜間模式:

          暗黑模式更多的目的是希望使用者更加專注自己的操作任務,所以對于信息內容的表達會更注重視覺性;

          而夜間模式則更多是出于在夜間或暗光環境使用下的健康角度考慮,避免在黑暗環境中長時間注視高亮光源帶來的視覺刺激,所以在保證可讀性的前提下,會采用更弱的對比來減少屏幕光對眼睛的刺激。

          同時,從使用場景上來說,暗黑模式既可以在黑暗環境,也可以在亮光環境下使用,可以理解為是對淺色主題的一種場景化補充,而夜間模式只建議在黑暗環境下使用,在亮光環境使用時很可能并不保證信息可讀性。

          為什么 Ant Design 要做暗黑模式

          1. 更加專注內容

          試想一下,我們在電影院看電影時,為什么要全場關燈?甚至有些 APP,在影片的下方也會又一個模擬關燈效果的操作,來讓整個手機屏幕變黑,只剩下視屏畫面的部分,這都幫助我們可以更專注、更沉浸在當前的內容下。

          色彩具有層級關系,深色會在視覺感官上自動后退,淺色部分則會向前延展,這樣對比強烈的層次關系可以讓用戶更注重被凸顯出來的內容和交互操作;尤其在信息負責界面內層級關系的合理拉開對操作效率都有明顯的促進作用。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          2. 在暗光環境下更加適用

          如今社會我們身處黑夜使用手機、電腦、iPad等設備的次數越來越多,環境光與屏幕亮度的明暗差距在夜間會被放大 ,亮度對比帶來視覺刺激也更加明顯,使用暗色模式可以縮小屏幕顯示內容與環境光強度的差距,同時也可以為設備的續航帶來積極影響,可以保證使用者在暗光環境下使用 OLED 設備的舒適度。

          3. 大眾喜愛

          黑色一直以來就可以給人以高級、神秘的語義象征,相比于淺色模式,暗色模式藏著更多可能性。

          設計原則

          在這次暗黑模式的設計中主要遵循以下兩大設計原則

          1. 內容的舒適性

          不論是顏色還是文字或是組件本身,在暗色環境下的使用感受應當是舒適的,而不是十分費力的,如果一個顏色在淺色下使用正常,在暗色下卻亮的刺眼或根本看不見,那必然不夠舒適也不可讀;所以在顏色的處理上不建議直接使用,這樣會讓界面變得到處都是「亮點」,讓眼睛不適的同時,也會帶來許多誤操作。

          2. 信息的一致性

          暗黑模式下的信息內容需要和淺色模式保持一致性,不應該打破原有的層級關系。舉個例子,在淺色模式下越深的顏色,與界面背景色對比度越大,也就越容易被人注意,視覺層級越高,比如 tooltip;在暗黑模式下我們同樣需要遵循這一規律,所以對應所使用的顏色也就越淺,反之則會越深。

          如何設計

          1. 界面層級

          在大量的企業級產品界面中,我們通常用只用一個白色背景結合分割線就可以搞定所有界面的板塊層級,因為在淺色模式下有投影可以借助,然而暗黑模式中投影將不足以起到如此功效,我們需要通過顏色來區分層級關系。

          在經過對螞蟻企業級頁面的典型布局結構評估后,我們在中性色中增加了三個梯度,將中性色擴展至 13 個

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          并定義出通用情況下頁面中的框架層次,主要分為三大塊:

          • 應用框架:也就是我們平時定義的導航欄,也是在大結構中最上層的一部分
          • 內容組件:指頁面中的具體內容,通常情況下以區塊的形式存在,作為第二層級
          • 頁面容器:顧名思義,指頁面級別的容器盒子,可容納頁面中的所有內容,可以理解為是一個背景板,也就是最末層

          在目前的暗黑體系下,我們分別為這三大塊從淺到深定義了#1F1F1F、#141414、#000000 三個顏色,在實際應用中,你也可以根據自身業務的需求,從中性色板中直接選用或是依據透明度的思路自定義出合適的中性色彩。當定義出較為明確的框架層次和顏色后,也對后續系統中組件的顏色配置有著重要的指導意義。我們需要考慮組件出現在不同顏色背景下的可能性及其表現,盡量保持一致性。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          2. 色彩

          眾所周知,暗黑模式與淺色模式最大的不同就在色彩的處理上,在暗黑模式中,我們并不想打破淺色模式下基礎色板的配置規律及色值,當一個應用或站點深淺模式并存時,希望在色彩上有一定延續和關聯,而不是毫不相關的兩套色板,這樣一是避免開發及后續的維護成本,二是實際切換和使用時,可以保證一致性,這意味著需要借助一定規則。

          這里分享一下我們的處理思路:

          基于 Ant Design 自然的設計價值觀,我們先從自然界中尋找靈感,如果說淺色模式如同初升時的朝陽,那暗黑模式就是落日下的晚霞,各有各的韻味,同一片天,唯一不同的是,受光線亮度的影響,晚霞整體會暗一些。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          所以我們大體的設計思路也是基于淺色的基礎色板,通過結合透明度的轉換,去得到一套暗黑模式下的色彩。這樣的好處是,深淺模式下的色彩根基是同一個,在這樣的基礎上經過透明度的變換得到的結果也會相對和諧,同時也符合我們一致性的原則。

          這里我們借助下面這兩個概念對透明度進行轉換:

          對比度極性

          對比度極性分為正極性和負極性。

          • 對比度正極性:指在電子文本中文本為深色,背景色為淺色
          • 對比度負極性:指在電子文本中文本為淺色,背景色為深色

          這里可以給大家分享對比度查閱的一個工具:WebAIM,只要輸入色值就可以看到具體的值,十分方便。

          正負極性差值

          顧名思義便是正負兩者的差值,這里取的是絕對值。

          根據一致性原則,我們嘗試通過對比一套顏色的正負極性變化趨勢來找到轉換規律。

          首先可以看下,如果一個顏色在不做任何修改的前提下直接使用,它的正負極性趨勢以及差值趨勢的走勢和關系是怎么樣的,我們嘗試描繪出這樣的曲線,他們的變化規律也將作為我們規則轉換的參考標準。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          經過對比,可以發現一些變化規律:

          首先來說下「差值趨勢」,橫向對比可以發現,不同顏色的正負極性走勢是很不一樣的,可以看到在黃綠色段差值曲線達到一個變化峰值,這是由于黃綠色本身由于明度、飽和度值相比其他顏色偏高,所以總是有種刺眼的感覺,生活中也會用它來作為警示、提醒的作用,所以在深淺背景下的對比度有一個比較大的差異,可以說這個變化是正常的。

          這點也可以從「正負對比度極性趨勢」兩者間的相對關系反應出來,從紅色到洋紅,綠線一開始從逐漸在藍線的上方一點,開始逐漸上移,最后在峰值處開始慢慢下移,在「極客藍」這個色相中接近重疊,在洋紅處又慢慢下移,說明淺色下越深的顏色,在深色中越亮,反之則越暗。

          縱向比對單個色板,可以發現,其斜率變化主要受顏色的明度、飽和度影響,可以反應一個顏色的不同梯度在黑白背景下的變化規律。

          有了這個大的變化規律,我們便可做到心中有數。首先以 Ant Design 的品牌色「破曉藍」為例,經過在多個業務、場景中不斷嘗試與調整,我們得到一個透明度轉換規則:

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          并將這個規則應用在其他 11 套色板中,驗證其可用性。這個過程確實沒有什么快捷通道,唯一的辦法就是不斷嘗試。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          最后,我們將經過規則轉換的實色與常規顏色的變化趨勢做對比:

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          可以看到在大趨勢走向上左右兩側圖基本一致,這代表兩個色板在變化規律接近一致,基本可以證明規則的合理性。區別在于,對比度負極性和差值相對于右側未經處理的值明顯有所下降。這是由于透明度的處理讓暗色下的顏色在明度、飽和度上有所下降導致。

          再仔細觀察可以發現,在左側的常規顏色中,從破曉藍-洋紅這段偏冷色系幾個顏色中,差值趨勢變化最平緩的是「極客藍」這顏色,這說明該顏色在深淺背景下的表現較為穩定,起伏不大,當基于一個統一的透明度規則前提下,會讓它在暗色下的對比度減弱,所以反而會導致差值趨勢變大,所以我們會發現差值趨勢變化較小的顏色轉移到了「破曉藍」、「洋紅」中,也是一個正?,F象。

          最后可以看到顏色在調整過后實際應用的效果

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          在官網中點擊「切換」即可預覽:

          如果上述 12 個色板不滿足你的業務需求,你也可以在官網上自己選擇顏色,我們會根據規則幫你生成一個暗色色板。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          另外,如果在實際應用過程中,你選了色相在 225~325 間的深冷色系作為主色或強調色使用,建議適當提高透明度的值,避免在暗色界面上引起閱讀障礙。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          3. 文字

          暗黑模式中,文字的使用與淺色模式基本一致,依舊從 85%-65%-45%,唯一不同的地方在 disable 的狀態,其透明度值提升為 30%,避免顏色過淡真的「不可見」。另外,對于 #FFFFFF 的純白色文字,盡量避免大面積使用,尤其對于表格、列表這類偏閱讀瀏覽的場景,如有需要,做小范圍強調即可。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          4. 陰影

          暗黑模式中的陰影規則與淺色模式基本保持一致,但由于本身的界面背景較深,在陰影色值上也有所加深,幫助層次更好的體現,整體將色值擴大到原先的 4 倍,但在陰影的位移、擴展上均保持不變。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          5. 分割線

          分割線在暗黑模式中建議根據界面中常用的背景色,通過透明度換算成實色使用,Ant Design 中分割線主要有 #434343 和 #303030 兩種顏色,分別對應淺色模式下的 #D9D9D 和 #F0F0F0,這樣做的目的主要是為了避免帶來額外的交錯疊加,尤其對于表格類以及很多帶有 border 屬性的組件,實色會更為穩妥便于記憶。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          適應性

          適應性方面,Ant Design 的暗黑模式可以與海兔及可視化資產進行無縫銜接,使用時可以任意組合拖拽,你可以下載 Kitchen 插件,獲取海量資產。

          大廠如何做好暗黑模式設計?來看 Ant Design 的規范文檔

          結語

          暗黑模式最近越來越受到人們的關注,與某一特定產品的暗黑設計不同,Ant Design 的暗黑模式更多以設計體系的角度考慮企業級這個大場景下的內容,在易用性、擴展度、復用度等方面還有許多需要完善和繼續研究探索的地方,我們會在未來的迭代中逐步進行,先完成再完善。希望上述內容能對大家在暗黑模式的設計上有所幫助。

          文章來源:優設    作者:AlibabaDesign

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          看似簡單的線框圖設計,這7個要點必須知道!

          資深UI設計者

          在這里,我們將研究設計中最簡單、因而常常被低估的活動之一,即線框圖的設計。了解什么是線框圖,為什么需要設計它們以及如何充分利用線框圖。

          什么是線框圖?

          線框圖,也稱為頁面示意圖或屏幕藍圖,是展示網站或產品框架的視覺指南:

          • 設計:線框圖常用在考慮用戶需求的情況下在頁面上布置內容和功能。
          • 開發:添加視覺設計和內容之前,在開發過程早期使用線框來建立頁面的基本結構。

          線框圖的主要目標是向團隊和利益相關者展示產品將包含的頁面和組件,以及這些元素之間的相互作用。

          為什么需要設計線框圖?

          1. 幫助團隊評估和完善工作范圍

          線框圖允許設計師快速創建產品的視覺表現,方便后期修改;

          幫助設計師向團隊展示應用程序具有的頁面元素和控件,以及所有元素如何進行交互。

          2. 讓團隊所有成員參與產品設計

          線框圖的使用允許設計師和開發人員在早期階段共同參與討論設計,在開始進行視覺設計之前就提供反饋和更改建議。

          這樣有助于使設計過程快速迭代,避免不必要的浪費。

          3. 方便快速演示

          從客戶和利益相關者那里獲得快速反饋是設計過程的重要組成部分。

          設計過程中,經常會遇到需求的來回變化。有了線框圖,可以使這個過程更有效,修改原型比修改線框圖需要更多的時間和精力。

          4. 進行用戶測試

          線框圖可以幫助設計師從潛在用戶那里獲得有用價值的反饋。同時瀏覽線框比讀取規范要快得多,還有助于減小與預期效果的差異。

          線框圖實際應用

          為了獲得最好的結果,為下一步的 UI 打下堅實的基礎,需要遵循幾個簡單的規則:

          1. 顏色的使用

          如果在線框圖中使用豐富的配色,可能會分散觀者的注意力,并使更新變得更困難。

          但在某些情況下,使用顏色突出顯示特定組件是合理的。例如,可以將紅色用于錯誤狀態,將藍色用于注釋等。

          2. 使用簡單的組件

          線框圖并不包含全面設計和詳細說明的組件。相反它們應該設計的相對簡單,讓團隊成員更容易識別。

          為組件添加細致的陰影、粗細描邊將花費大量的時間和精力,卻不是很實用。

          3. 保持一致性

          在所有線框圖中,類似的組件必須看起來相同。如果相同的組件看起來不同,開發人員可能會質疑它們的功能是否相同,甚至會因為設計不同而增加估算時間。

          在處理線框圖時,記住一個簡單的規則:保持一致,避免造成混淆。

          4. 使用真實內容

          我們會??吹経I/UX設計師沒有在線框圖上添加真正的內容,而是重復使用同一些文本。這是很少有設計師意識到的普遍錯誤。

          內容真實與否會影響接下來的設計。如果使用不真實的內容,UI設計中文本的數量多少和排布方式都要再調整。

          真實內容能給線框圖增加價值,更好地解釋上下文。

          5. 使用注釋

          設計中可能會遇到某些解決方案無法直觀地加以說明的情況,例如某些控件背后的邏輯,因此開發人員可能會對它們有疑問。

          在這種情況下,可以提供注釋來解釋其背后的邏輯。這樣,你的團隊就會理解你的解決方案,你就不需要花時間再討論它們。

          6. 線框圖程度

          線框圖應該選擇低保真還是高保真,沒有嚴格的規定,取決于項目的具體要求。

          硅谷知名作家埃里克·萊斯認為,如果不能帶來價值就不需要做額外的工作,從基礎做起,然后根據需要添加細節。

          7. 將線框圖延伸到交互原型中

          在使用不同產品時,有一些簡單而通用的交互,也有一些交互相當復雜。

          在線框圖不足以說明復雜性的情況下,可以將線框圖擴展到交互原型中,而不必寫冗長的注釋并花大量時間進行解釋。

          總結

          將線框圖結合到設計過程中,為我們所用:

          • 幫助團隊獲得更的項目估算;
          • 讓所有團隊成員參與設計流程,避免影響開發過程的錯誤;
          • 提前向客戶、利益相關者進行演示,以盡快獲得反饋,節省開發不良解決方案的時間。

               文章來源:優設    作者:Clip設計夾

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          2020年越來越火的車載交互該怎么設計?來看前輩的經驗總結!

          資深UI設計者

          這次我們不聊視覺,也不暢想未來,只說說當下 HMI 產品設計與交互體驗。

          本文內容會涉及一些專業的汽車知識名詞,因為篇幅有限,如有些知識名詞不太明白可以百度一下。

          別看錯了,不是HDMI!

          說到 HMI 大多數設計師應該是既熟悉又陌生,HMI 是 Human Machine Interface 的縮寫,「人機接口」,也叫人機界面,人機界面(又稱用戶界面或使用者界面)是系統和用戶之間進行交互和信息交換的媒介, 它實現信息的內部形式與人類可以接受形式之間的轉換,凡參與人機信息交流的領域都存在著人機界面。

          聽起來是不是覺得這不就是 UI 嗎?有什么區別嗎?似乎差不多,幾乎是沒有區別的,只不過是在某些場合和設備上管他叫 UI,比如移動端設備,而在另外某些場所和設備上管他就叫 HMI,比如汽車車機和數控機床。所以這個概念也不用去特別較真,HMI 就權當作是汽車上的 UI 界面吧。畢竟汽車是高科技與工業結合的完美產物,「HMI」念出這個詞時候就感覺是蠻專業的!很般配!

          HMI前世與今生?

          剛才說 HMI 最早更應用于工業上,比如常見的各種機床、制造裝備。

          或者說讓時間再向前推進一點!

          而這里通常意義的 HMI 則更加聚焦點,基本特指汽車車機或者車載多媒體設備。

          說到這里還是要從車載儀表盤說起,從德國人卡爾·本茨發明世界第一輛汽車,距今已經 100 多年的時間了,在那些還沒有 HMI 這個名詞的年代,那么他是以什么形態出現的?那就不得不提「儀表盤」了。

          當然寫這篇文章并不是去評測誰家 HMI 更優秀,而是希望通過一些假設、實驗和推斷,和大家一起來探討一下如何更有效地設計 HMI。

          屏幕越大越好?車內到底需要幾塊屏幕?

          我們先從屏幕開始。

          說到屏幕,設計師都是比較敏感的,因為我們最終的設計交互創意都是需要都是在屏幕上顯示展示出來的,HMI 當然也不例外?,F在在車載屏幕上你能看到最大尺寸多大?

          拿特斯拉為例,Model S 和 Model X 車型都是 17英寸,Model 3 為 15 英尺。

          當然他肯定不是最大的,熟悉汽車朋友你應該知道我想說誰了,沒錯就是他!擁有 48 寸可多段升降屏幕的 BYTON 新能源概念車 M-Byte!48 寸的確很夸張,難道屏幕越來越大就是未來 HMI 的方向嗎?

          當然這個問題肯定是否定的,為什么?那就要從車載屏幕的作用來說起。

          首先我是作為一個曾經就職于汽車公司的設計師,并且是一名地道的汽車發燒友,憑借對汽車還算熟悉和熱愛做出一些產品交互分析,以下如有不妥之處還望海涵。

          汽車內屏幕的作用

          按照功能場景總體可分為三類:主行駛狀態信息、附設備狀態信息、多媒體 & 外設

          不可缺少還需要與使用者、場景結合,我們先來做一個大概的用戶畫像。

          對應這些需求,汽車需要有儀表臺(屏)控制和顯示的區域有五個。

          五個區域分別是:

          • 主駕駛儀表屏
          • 中控臺控制(屏)
          • 后排娛樂屏
          • 副駕駛信息屏
          • 扶手控制臺(屏)

          其中前三個是主流配置,后兩個比較少見。

          關于汽車設備這塊我們不做深入展開了,畢竟這篇文章主要討論的還是設計,直接看結果!

          題外音:屏幕安全性的考量

          汽車是比較特殊的設備,基于安全性考慮,汽車內屏幕尺寸不宜太大與太多。

          屏幕總體為玻璃材質,但與車窗擋風玻璃的材質不同,當汽車遭遇碰撞的時候,車內屏幕極易破損并形成尖銳物,極大可能會乘坐人員造成二次傷害,所以車內屏幕不易太多,更不易太大。雖然車載屏幕變大變多已不可逆轉,而且隨著屏幕技術的提升,柔性 OLED 的應用也將會在一定范圍解決安全問題。但也需要汽車相關設計者多在安全方面進行考慮,任何產品體驗應該建立在安全基礎之上的,特別是交通工具。

          物理實體按鈕過時了?

          為什么大屏幕操控成為了當前的 HMI 主流了呢?那不得不去提一下另外一個我們熟悉的設備——手機!

          同樣一個有限的區域,如果用物理按鍵那么這個區域只能是固定的功能,而屏幕就可以無限擴展。特別是在汽車中控屏上集成內容會很多,體現就更加突出。

          但是在汽車上的全部使用屏幕真的是最佳選擇嗎?顯然這是有待商榷的。

          不可否認屏幕的確有很強的擴展性,但是缺點也是明顯的:1.觸控反饋缺乏 2.交互效率不高

          對于這樣的判斷,我們可以通過兩個實驗來進行驗證。

          將類似于 Surface Dial 這種智能按鈕交互裝置引入汽車的屏幕控制中,每個按鈕可以根據情景進行自定義,并且吸附到汽車屏幕的任何位置進行交互操作,相信這一定是一種全新的使用體驗。當然這一定是需要解決比如吸附力、安全性等一系列問題。

          屏幕觸控反饋

          雖然目前的屏幕還無法做到完美觸控反饋,但已經出現了一些新的硬件技術來試圖解決這些問題,比如 Tanvas Touch,其定義為 「手指與觸摸界面之間的電子壓力控制」。簡單來說他們的產品就 「皮膚的磁鐵」 一樣,能夠更加精準地感應手指的動作,最后結果就是比 Apple 的 3D Touch 更加具有壓感的觸摸操作表現。

          原理是利用手指尖觸摸顯示屏時產生的靜電引力來模擬觸感,通過電磁脈沖把更的反饋發送到用戶的指尖。

          Tanvas 也正在與汽車制造商們合作把這項技術嵌入到汽車或屏幕上,讓人們更容易感觸受到不同物體的表面。

          也許在未來我們真的會遇到他。

          文章來源:優設    作者:殘酷de樂章

          交互設計師常用的設計理論與心理學

          ui設計分享達人

          掌握好常用的設計理論與心理學知識,能幫助我們對用戶的人性特征的拿捏,幫助我們較大的影響用戶底層決策,以產品實現業務目標。

          一、尼爾森10大可用性原則


          1、狀態可見原則

          不局限于:用戶的當前狀態、知道當前任務要做什么、任務進度等。

          2、環境貼切原則

          設計要復合目標用戶的認知,符合用戶的心智模型,于是熟悉的事物越容易被用戶所接受。

          3、撤銷重做原則

          操作前可預知,操作中有反饋、操作后可撤銷。

          4、一致性原則

          不局限于:業內產品的一致性、產品內的一致性、版本迭代間的一致性

          5、防錯原則

          錯誤行動發生前,引導用戶向正確的方向前進;用戶觸碰到危險操作時給予提示;危險操作發生之后,提供撤回的入口。

          6、易取原則

          通過使用對象、動作和選項的可視化表達,最大限度地減輕用戶的記憶負擔。

          記住用戶的操作記錄、一個流程對應一個操作目標、提供適量的信息、選擇而不是輸入。

          7、靈活原則

          好的產品需要同時兼顧新用戶和資深用戶的需求。對新用戶來說,需要功能明確、清晰,對于老用戶需要快捷使用高頻功能。不可迎合某一種用戶,把不必要的信息占據重要部分。

          8、易掃(讀)原則

          不要包含不相關或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內容的相對可見性。

          產品設計的四大基本原則:親密性、對齊、重復、對比。

          9、容錯原則

          錯誤信息應該用通俗易懂的語言表達,較準確地指出問題,并且提出解決方案。避免通過代碼等用戶難以理解的形式

          即:提供解決方案、幫助用戶從錯誤中恢復

          10、人性化幫助

          如果系統能讓用戶不需要閱讀文檔就會使用那是最好的,但通常情況下還是需要幫助文檔的。任何信息應該容易被搜索,且專注于用戶的目標任務,并列出具體的步驟來告知用戶。


          二、費茨定律

          翻譯成人話就是:

          1. 按鈕做大點(W大點)更易于點擊

          2. 將按鈕放置在離開始點較近的地方

          3. 相關按鈕之間距離近點(D小點)更易于點擊

          4. 屏幕的四角與四邊是「無限可選中」位置(非移動端)

          5. 通過費茨定律的反向使用,可以降低按鈕被點擊的可能


          三、米勒定律


          米勒定律預測人的工作記憶能夠記住的項為7(±2)個。1956年認知心理學家喬治·米勒發表了一篇論文,他討論了短期記憶和記憶跨度的極限。

          不要亂用 “神奇的7” 為設計進行不必要的限制;

          將內容整理為較小的單元,以便用戶輕松地處理、理解和記憶。


          比如電話號碼的顯示方式、銀行卡的顯示方式等


          四、接近法則


          觀察者看到彼此鄰近(空間或時間)的物體時,會將它們視為一個整體。

          在界面設計中,對信息的組織已經離不開這個法則了,他在界面中所體現的就是把相關的信息塊組合在一起,不太相關的分離開,增強與區分元素之間的關聯性,所強調的是空間和位置。

          接近法則產生于群組,它可以減少信息設計的復雜性,對引導用戶的視覺流、便于用戶對界面的解讀起到至關重要的作用。


          五、席克定律


          ??硕墒且环N心理物理學定律。用戶所面臨的選擇數量越多,做出選擇所花費的時間就越長,在人機交互的界面中選項越多,意味著用戶做出決策的時間越長。


          六、泰斯勒定律(復雜性守恒定律)


          泰斯勒定律又稱復雜性守恒定律,該定律認為每一個過程都有其固有的復雜性,這個復雜性存在一個臨界點,超過了這個點就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。


          七、奧卡姆剃刀原理


          奧卡姆剃刀原理的核心思想為:“切勿浪費較多東西去做用較少東西同樣可以做好的事——如無必要,勿增實體,即簡單有效原理”。


          八、防錯原則


          操作前有提示,操作中有反饋、操作后可撤銷。


          九、損失厭惡


          損失厭惡是指人們面對同樣數量的收益和損失時,認為損失更加令他們難以忍受。同量的損失帶來的負效用為同量收益的正效用的2.5倍。損失厭惡反映了人們的風險偏好并不是一致的,當涉及的是收益時,人們表現為風險厭惡;當涉及的是損失時,人們則表現為風險尋求。


          十、安慰劑效應


          “安慰劑效應”指的是,對于某種無效的療法或干預手段,僅僅是“相信它有效”,就能改善健康,并能改變認知


          十一、多爾蒂門檻


          研究結果表明,計算機的響應速度直接影響了使用者做出下一個決定所要花費的時間(這個時間被稱為用戶響應時間),換句話說,計算機相應的時間越長,用戶就要花費越多的時間來思考和決定下一步的操作。


          合理的操作響應時長、方式有助于用戶保持專注和提率。

          軟件操作的過度動畫時間不宜太短或太長,最常見于 400ms 左右。

          如果無法避免操作中較長讀取、等待時間,那么就用其他更有趣的動畫、頁面來減少用戶的焦慮感。


          十二、馬斯洛需求層次理論


          馬斯洛需求層次理論是人本主義科學的理論之一,由美國心理學家亞伯拉罕?馬斯洛在1943年在《人類動機理論》論文中所提出。書中將人類需求像階梯一樣從低到高按層次分為五種,從低到高依次是:生理需求、安全需求、社交需求、尊重需求和自我實現需求。

          但最終馬斯洛添加求知需求和審美需求,自此馬斯洛需求層次理論最終定型為8層。

          十三、格式塔心理學


          格式塔原則描述了當某些條款和條件被應用時,人類大腦如何感知視覺成分。它幫助大腦創造視覺的意象。因此,格式塔原則基于六個主要類別:

          位置和位置;

          接近;

          對稱與秩序;

          類似;

          關閉;

          連續性。


          十四、自我參照效應


          第一種是精細加工說:在記憶過程中,這些事物在頭腦中被進行了精細加工,與頭腦中的已有知識之間建立了更多的聯系,因此回憶時的提示線索更多,回憶效果更好。

          第二種是組織加工說:于自我的知識是頭腦中存在的一種結構良好的組織體系,它對與自己相關的事物有更好的固著作用;同時,由于自我知識常常被激活,因此與之相關的信息也更容易被相應地激活起來,這樣回憶起來也就更容易。

          第三種是雙過程說:即自我參照任務能提高記憶的機制既包括精細加工因素,也有組織作用的參與

          廣告商會挖空心思的建立商品和你的關聯,告知我們如果你購買了我的商品,你就會獲得怎樣的好處。而自媒體人則在標題上盡量簡明扼要的說明,我要說的事情和你密切相關,不看就虧了。所以,稍微有深度的文章在快餐式的自媒體平臺中反而閱讀量不高,這是因為文章標題所涵蓋的內容可能只和少部分人有關。


          十五、上癮模型


          1、觸發:提醒人們采取下一步行動


          觸發分為外部觸發與內部觸發

          外部觸發又分為:

          付費型觸發、回饋型觸發、人際型觸發、自主型觸發。

          內部觸發

          內部觸發通過用戶記憶存儲中的各種關聯來提醒他們采取下一步行動。

          比如餓了的時候想起餓了么,想健身的時候想起keep


          2、行動:人們在期待酬賞時的直接反應


          福格行為模型可以用公式來呈現,即B=MAT。B代表行為,M代表動機,A代表能力,T代表觸發。要想使人們完成特定的行為,動機、能力、觸發這三樣缺一不可。 否則,人們將無法跨過“行動線”,也就是說,不會實施某種行為。

          比如說中午十一點你餓了想到餓了么訂餐但是由于你的手機沒電了定不了餐,中午要吃飯是動機,訂餐想到叫餓了么外賣是觸發,能夠用手機訂餐是能力,但是因為手機沒有電 你就缺乏了相應的能力所以這個行為就沒法完成。(當然你也能用朋友的手機訂餐,這里只是舉個例子)


          福格總結了簡潔性所包含的6個元素 ,即影響任務難易程度的6個要素,它們是:


          • 時間——完成這項活動所需的時間。

          • 金錢——從事這項活動所需的經濟投入。

          • 體力——完成這項活動所需消耗的體力。

          • 腦力——從事這項活動所需消耗的腦力。

          • 社會偏差——他人對該項活動的接受度。

          • 非常規性——按照福格的定義,“該項活動與常規活動之間的匹配程度或矛盾程度”。


          四種非常規的效應刺激動機:


          • 稀缺效應:(限量1000件)

          • 環境效應:(同一款啤酒在便利店和高檔就把價格不一,但人們愿意為價格買單)

          • 錨定效應:(瑞幸咖啡定價24元的拿鐵對標星巴克的32元拿鐵)

          • 贈券效應:(利益進度吸引用戶動機)


          3、多變的酬賞:滿足用戶的需求,激發使用欲


          多變性會使大腦中的伏隔核更加活躍,并且會提升神經傳遞素多巴胺的含量,促使我們對酬賞產生迫切的渴望。 研究測試表明,當賭博者贏了錢,或是異性戀男性看到美女的圖片時,大腦伏隔核中的多巴胺含量會上升。

          多變的酬賞主要表現為三種形式:社交酬賞、獵物酬賞、自我酬賞。那些讓我們欲罷不能的習慣養成類產品或多或少都利用了這幾類酬賞。


          社交酬賞

          所謂社交酬賞,是指人們從產品中通過與他人的互動而獲取的人際獎勵。比如微信的點贊評論、站酷的推薦,用戶能夠獲得社交的認同。


          獵物酬賞

          獵物酬賞,是指人們從產品中獲得的具體資源或信息。


          自我酬賞

          所謂自我酬賞,是指人們從產品中體驗到的操控感、成就感和終結感。


          4、投入:通過用戶對產品的投入,培養忠實用戶


          要想讓用戶產生心理聯想并自動采取行動,首先必須讓他們對產品有所投入。


          用戶對某件產品或某項服務投入的時間和精力越多,對該產品或服務就越重視。事實上,有充分證據表明,用戶投入的多寡與其熱愛某項事物的程度成正比。


          1、文飾效應心理


          (1)我們總是高估自己的勞動成果。

          (2)我們總是盡力和過去保持行為一致。

          (3)我們總是避免認知失調。


          2、點滴投入


          (1)儲存價值

          (2)內容

          (3)數據資料

          (4)關注者

          (5)信譽

          (6)技能


          3、加載下一個觸發


          用戶投入的同時也可以通過加載下一個觸發的令自己重新開始上癮循環,從而增加了進入上癮循環的可能性。


          十六、雅各布定律


          雅各布定律(簡稱雅各布互聯網用戶體驗法則),它指出如果用戶已將大部分時間花費在某個網站上,那么他們會希望你的網站可以與那些他們已熟悉的網站一樣擁有相似的使用模式。


          我們在與新事物互動的過程中,用戶使用的是以往的經驗


          對設計師來說,我們可以匹配用戶的心智模型來改善體驗。因此,用戶可以輕松地將已有經驗從一種產品或體驗轉移到另一種上,無需額外了解新系統的工作原理。

          當設計師與用戶的心智模型一致時,良好的用戶體驗就得以實現。


          十七、KANO模型


          KANO模型大家可以看看這個童鞋的總結很詳細

          https://www.zcool.com.cn/article/ZMTAyMjQ3Mg==.html


          十八、古藤堡表圖表法


          人們在瀏覽頁面或布局時視線趨于從左上角移動到右下角

          古騰堡圖表法說明我們觀看頁面的視線并不是鏡面對稱的,我們需要在設計中避免出現此類錯誤但絕不是墨守成規,將頁面的 Logo放置在左上角而主體向右下角延伸,左下和右上作為視覺的盲點可以添加輔助元素


          十九、尼爾森F型視覺模型


          尼爾森F型視覺模型由 Jakob Nielsen于2006年提出

          他指出,我們在第一次觀看頁面時,視線會呈 F的形狀關注頁面。
          1.先從頂部開始從左到右水平移動。
          2.目光再下移開始從左到右觀察但是長度會相對短些。
          3.以較短的長度向下掃視,形成一個 F形狀,此時我們的閱讀速度較慢,更為系統和條理性。


          二十、序列效應


          1.在列舉信息時,排在最前和最后的元素,比排在中間的更容易讓人記住。

          2.對排在開頭的信息產生加強的回想效果,稱為:初始效應,人們有時候會把最前面的信息儲存在長期記憶中。排在結尾的信息產生加強的回想效果,稱為:時近效應。時近效應適用于聽覺刺激。初始效應適用于視覺刺激。

          3.在列舉信息元素時,如果列舉信息屬于視覺性,那么把重要的信息放在最前面;如果是聽覺性,就放在最后面。如果是用戶必須做決定,并且是最后一項出現后馬上做決定,那么就將想要用戶做決定的信息放置最后,以便增加獲選概率,否則放在最前面。

          4. 應用例子:比如在很多app產品設計時,個人賬戶與設置基本放在頁面的最前面和最后面,這體現著產品信息的序列關系,重要次序,所以在進行設計時,可以在信息排序上遵循序列效應。 當然還有一些產品想對用戶進行引導操作,也可以利用這個法則,將信息放置最前或最后。

          轉自:站酷-YELLOW_J 

          用戶不信任你做的產品/界面?不如試試這5招

          ui設計分享達人




          前言:


          什么是產品的信任感??


          指:基于產品為用戶提供‘可靠服務、價值依賴’的一種情感體驗。


          這種體驗不僅影響著用戶黏性的強弱、業務目標的實現,也影響著不同生命周期下給產品給來的價值。如圖:



          而在產品與用戶間建立信任感的過程中,我驚奇地發現有3個因素貫穿始終:理念 > 內容 > 表現。


          ‘基于什么樣的理念,向用戶傳遞什么內容,并且怎么表現?!?/strong>



          所以,未來3篇文章主要圍繞‘信任感的打造’,希望能系統性地認識它,挖掘更多工作上可實用的小技巧。


          今天先分享第一篇:信任感的理念層



          信任的本質:是讓人覺得真誠、可靠、放心等。換句話說,它就是一種‘為用戶著想,建立產品溫度’的理念/方向,從而引導后續的內容都圍繞該理念而進行。


          那么,如何才能為用戶著想,慢慢建立起對產品的信任感呢??


          既然為用戶著想,那么可以試著從‘減少用戶的投入成本’切入。



          Part1:減少健康投入


          健康投入,指用戶使用我們的產品,可能會對身體上帶來直接或潛在的負擔/影響。比如視頻看久了,眼睛就會感到酸痛。


          針對這些負擔與影響進行的一些關懷提示,可以用戶提前消除、減輕這些痛苦,拉進與用戶間的距離。


          不同產品類型擁有專有的關懷點,所以比較通用的主要有5個:使用時長、使用姿勢、夜間休息、夜間護眼、音量大小。



          a.使用時長提示:


          除純工具類產品之外,大部分用戶在產品上都有一定的使用時長(尤其是內容消費類產品),對于‘連續使用N分鐘、或者滿足特定時長’的用戶,可針對該時長進行休息提示。


          如有道精品課,在用戶觀看課程滿40分鐘 時有個時長提醒:




          b.夜深關懷提示:


          深夜本身是一個休息的時間,但還是有大量的‘夜貓子’根本停不下來。不管是主動性的娛樂消費,還是被動性的信息/工作處理,都將手機‘進行到底’。


          此時對于‘深夜忙碌’中的用戶,夜間的關懷就是一個切入點:比如企業微信,會在深夜啟動頁上展示 ‘夜深了,xxx’的文案提示。



          雖然只是簡單的一句話,但還是能感受到鵝廠對員工的關懷。


          而且不管是C端還是B端,只要有用戶在深夜使用產品的可能,都可針對性地給予關懷設計,體現產品的‘人性’。




          c.夜間護眼提示:


          夜晚周圍的光線會變得幽暗,部分手機屏幕會自動變亮。時間一長會嚴重刺激用戶雙眼,并造成視覺疲勞(尤其是小學生群體)。


          此時對用戶進行護眼提示,不失為一個用戶關懷點。


          再如有道精品課:




          d.使用姿勢提示:


          我們日常都會將手機橫過來看視頻、看八卦。而且相信各位都有過這樣的經歷:



          當手機長期處于某個屏幕狀態+重力傾向時,用戶難免會出現手酸脖痛的情況。


          此時進行使用姿勢的糾正提醒,亦能起到關心用戶的效果,從而建立良好的產品印象。


          還是以有道精品課為例:



          e.音量提示:


          這個大伙都知道,過大的音量會影響耳朵聽力。一般出現在各種音頻、視頻的產品與功能中。





          Part2:減少金錢投入


          沒有人不會在意自己的錢包(除非你是對錢不感興趣...),金錢上的收入與支出很大程度上會影響 人們對某事物的看法。


          產品也是如此,若能幫用戶減少金錢上的支出,或者帶來真實收入。不僅能極大提升用戶對你的信任度與黏性,還能增加產品的競爭力。


          比如高德地圖的打車功能,能顯示所有車型的價格預覽,幫助用戶選擇所需價格的車型。



          無論是商品優惠券,還是返利。



          只要能幫助用戶錢包上的‘節源’或‘開流’,都能引發用戶的信任感,從而信賴產品。




          Part3:減少情感投入


          情感投入,是指用戶基于內心活動和情緒感受,對某事物所表現出來的一種想法。


          這種想法制約著 用戶是否接受我們的產品服務。一般體現在:安全性、性價比、真實性 3個方面。


          a.安全性 - 放不放心:


          人們面對某事物 可能會帶來的傷害/損失時,都會有一種本能的“警惕感”。


          就拿此次疫情來說,對于有‘出差住房’訴求的用戶來說,‘住的安全’是重中之重。因此尋找一家‘無感染、每日消毒、衛生干凈’的安全酒店,可以減低用戶選擇我們的警惕感。



          而在酒店列表中,帶有‘嚴格消毒’、‘健康守護’等安全標簽的酒店,會給人帶來一種安全、放心、信賴的心理效應,從而提升該酒店的轉化率。




          b.性價比 - 值不值得


          性價比是人們衡量‘付出成本與回報價值’間的一種決策依據,沒有誰會喜歡付出小于回報的事物。


          而為了讓用戶降低這種決策依據,除了自我服務/實力的展示外,往往需要一種“參照物”來凸顯性價比。


          如美團上的‘滿減神器’,通過不同的食物/價錢間的對比,讓用戶買到最具性價比的食物。



          而“參照物” 的形式多種多樣,不管是競品數據。



          老版本也屬于一種競品


          還是是各種優惠信息、額外禮物/禮包、售后服務等等。



          目的都是通過該參照物,向用戶傳遞一種‘劃算’、‘值得’的心理效應。



          c.真實性 - 真不真實:


          光是性價比高還只是片面依據,至于內容是否屬實,成為了我們與用戶建立信任感 中最重要的影響因素。因為沒有人喜歡被騙、喜歡虛假事物。


          而真實性的建立,在‘電商領域’應該被運用得最多。如大牌背書、證書授權、專家介紹、明星代言、官方保證、銷量成績、用戶反饋...等等。




          展示自己的真實、最具實力的一面即可,別過度吹噓與包裝,用戶又不傻。




          Part4:減少腦力投入


          人們一向不喜歡復雜的東西,除了不易理解外,更擔心因為自己的理解錯誤,會給帶來意外的損失。


          幫助用戶減少記憶負荷、順暢完成操作目標,是每個產品必不可少的設計點。


          如微信轉賬,輸入數字時會檢測對應的數額,減去用戶邊輸入 邊計算“這是多少錢”的腦力投入。



          而且對比支付寶的轉賬,微信這點確實做到了‘洞察用戶需求’。



          再如賬號注冊,提供‘剩余步驟’能讓用戶了解 當前處于哪一步、預測完成整個操作還需多久。





          Part5:減少體力投入


          除了記憶負荷,‘操作負荷’的減少也是一種‘為用戶著想‘的方式。我們身邊也存在太多這方面的例子:


          如手機上,如淘寶的快鏈彈窗、支付寶的轉賬提示,都是前置用戶的目標,縮短操作流程。



          如電腦上,如Mac會保存耳機音量。


          下次插入耳機時,會將揚聲時的音量,自動調整至上次耳機插入時 所記錄的音量。這樣就免去了重新調整音量的操作。


          以網易云音樂為例:注意 揚聲時和耳機插入后 的音量變化.



          這些都是幫助用戶快速使用,從而減少體力操作的方式。除了前置用戶目標、保存記錄 外,常見的還有:給予默認值、自動選擇/處理、多選與批量等等。



          總結:


          以上就是關于理念篇的內容,讓今后的內容設計有了明確的方向。下面是走查表,平時設計功能、制作界面的時候可以看看,增加產品的溫度。領取方式:公眾號回復【信任1】


          轉自:ui中國-

          語音交互中的“等待體驗”研究

          ui設計分享達人

          語音交互是最自然的人機交互方式,它極大地降低了人們與機器交互時的學習成本,已成為非常重要的人機交互方式。


          回顧人機交互發展史,人類先后經歷了基于命令行的CLI 時代,基于鼠標鍵盤的GUI時代,基于觸摸的初級NUI時代。后面每一個階段比前一個階段更自然,學習成本更低,綜合效率更高。

           


          進入AI時代,人工智能給機器帶來三種能力:感知能力、認知能力、自然語言輸出能力。感知能力使機器能聽得懂人類語言,認知能力使機器能思考如何回答人類問題,自然語言輸出能力使機器可以像人類一樣表達——三種能力的綜合運用將人機交互帶入語音交互階段。語音交互是最自然的人機交互方式,它極大地降低了人們與機器交互時的學習成本,將人機交互綜合效率帶上新的臺階,已成為非常重要的人機交互方式。

          “等待體驗”——語音交互體驗的三分之一

          生活中人與人的對話場景,對話是由“向對方說出一句話”、“等待對方回復”、“對方給出回復”三個階段不斷循環構成。其中“等待對方回復”是對話體驗的“三分之一”,會對回復的滿意度造成直接影響。在等待回復階段,如果對方處于認真思考的狀態,會讓我們覺得被重視;然而,如果在等待過程中對方的注意力不在對話本身,即便對方給出的回復再好,我們也會心存疑慮。



          對應到人機語音交互中的三個部分——“輸入體驗”、“等待體驗”、“回復體驗”,“等待體驗”同樣處于整個體驗循環鏈的中間環節,在語音交互體驗中起到了承上啟下的重要作用。但是,關于語音交互中的“等待體驗”在行業尚未被系統的研究,依舊處于模糊狀態。

           

          1. 響應時間一定是越短越好嗎?

          數字性能管理平臺Dynatrace對用戶瀏覽網頁的行為進行了研究,發現當網頁加載速度提升0.5秒,可促進用戶在網站的行為轉化核心數據提升10%。因此,在網頁設計和App設計中,盡量縮短等待時間是產品設計的不懈追求。

           

          不同于基于視覺的交互,語音交互天然附帶情感屬性。然而,情感的體驗是復雜的,它不只受效率這個單一變量的控制。大多數情況下,在生活中人與人對話時,一個過快的回答會給用戶帶來輕浮感和搶話感,而一個過慢的回答會給用戶帶來遲緩感和愚鈍感。


          那么,在語音交互中,究竟什么樣的響應時間能有最佳的體驗呢?響應時間的體驗趨勢是怎樣的呢?

           

          2. 等待體驗受哪些變量的影響?
          在視覺設計領域,當設計頁面的loading態時,為降低用戶的跳出率,設計師時常會通過給出進度條,或采用趣味性的情感化設計來消除用戶的不安情緒。

           

          但是在語音交互領域,語音的承載體是無形的,或不確定形態的,我們甚至沒有承載loading態的界面。在這種情況下等待體驗又受哪些變量影響呢?影響的程度怎樣呢?

           

          綜上,可以說在語音交互領域,等待體驗雖然重要,但目前仍是“一團迷霧”。鑒于此,我們以目前語音交互的主要載體——智能音箱產品為例,對AI產品中的等待體驗問題進行專題研究。

           

          二、智能音箱的等待體驗研究

          目前的智能音箱,主要采用先語音喚醒后輸入指令的語音交互流程。鑒于此,我們可以將智能音箱的使用過程分為兩個主要階段:

          1)喚醒階段:用戶通過指定的喚醒詞將音箱從等待態轉換為就緒態,音箱被喚醒后才可以接收用戶的語音指令。

          2)用戶請求及反饋階段:用戶給出語音指令內容以及智能音箱反饋結果滿足用戶的需求。

           


          針對這兩個階段,我們先后通過以下三個實驗進行研究。

          實驗一:喚醒階段的響應時間對等待體驗的影響;

          實驗二:用戶請求及反饋階段的響應時間對等待體驗的影響;

          實驗三:視覺、聲音等不同反饋方式對等待體驗的影響。

          下面我們對每個實驗的結論進行逐一詳述:

          實驗一:喚醒階段的響應時間對等待體驗的影響

          為了全面考察喚醒階段各種因素對等待體驗的影響,在實驗中,我們為用戶提供了不同喚醒響應時間和不同喚醒反饋方式的智能音箱。用戶完成實驗任務后,需要對音箱的喚醒響應速度進行評價(5點量表:太快了,接受不了;有點快,能夠接受;剛剛好;有點慢,能夠接受;太慢了,接受不了)。



          實驗一的結果表明最佳的喚醒響應時間與喚醒反饋方式有關,不同喚醒反饋方式下,最佳響應時間不同:

          1)當喚醒反饋為"燈光"反饋時,喚醒響應速度越快越好,在200ms時,用戶響應舒適度最高(對響應時間評價為剛剛好的用戶比例),73%的用戶對速度滿意。

          2)當喚醒反饋為"燈光+音效"時,喚醒響應速度的舒適時間為300ms左右,76%的用戶對速度滿意。

          3)當喚醒反饋為"燈光+人聲"時,喚醒響應速度的舒適時間為500ms左右,74%的用戶對速度滿意。

          (注意:本次實驗設置了市面上主流的三種喚醒反饋方式:燈光、燈光+音效、燈光+人聲,以給不同反饋情況的響應時間感受作參考,但對最優反饋方式,除了響應時間還受其他因素影響,將另著篇章探討。)



          實驗二:用戶請求及反饋階段響應時間對等待體驗的影響

           

          由于用戶請求及反饋階段的響應在技術實現和用戶預期上,與喚醒階段的響應存在差異,因此我們通過第二個實驗對用戶請求及反饋階段的最佳響應時間范圍進行研究。在實驗中,我們為用戶提供了不同響應時間設置的智能音箱。



          實驗二的主要研究發現:

          1)1250ms以內是用戶認為響應速度較優的區間,其中650ms為最佳體驗值。在450ms時,少量用戶覺得響應速度太快了,用戶會感覺到緊迫感和壓力,難以接受。

          2)在1450ms時,有53%的用戶開始感覺響應有延時,但仍能夠接受。

          3)從2150ms開始,有20%的用戶認為音箱響應太慢,不能夠接受。我們認為20%的用戶不滿意,已經不足以被稱為一個優秀的產品。



          實驗三:視覺、聲音等不同反饋方式對等待體驗的影響

          由于目前市場上的智能音箱在請求反饋階段的響應時間普遍在1.5秒以上,并沒有達到實驗二研究的理想響應區間。因此,我們通過實驗三進一步研究反饋方式設計對用戶響應速度感知的影響,我們為用戶提供了五組具有不同反饋方式設計的方案。



          在實驗三的五組方案中,每組方案分別進行了不同響應時間設置。



          實驗三的主要研究發現,不同反饋方式設計會影響人們對音箱響應速度的感知



          1)1250ms以內,方案D感受較差,人聲反饋會產生搶話的感受,部分用戶認為音箱響應太快。



          2)1350ms到2150ms,方案D、E感知舒適的用戶比例較高,加入人聲/音效后,如方案D的語音應答“好的”,有助于緩解用戶延遲感受,提升速度感知體驗。



          3)在3150ms及以上的響應時間,響應方式設計對緩解延時的作用已經不明顯,應該盡量避免此類情況發生。


          此外,實驗三還發現響應速度預期與用戶性別、任務類型有關。與男性相比,女性用戶對響應時間容忍度更低,她們最長在音箱無反饋時可以容忍的平均響應時間長度低于男性,即她們希望在更短的時間內得到音箱的響應反饋。



          與音樂類、問答類等任務相比,用戶對控制類任務的響應時間容忍度更低,用戶希望在控制類任務中有更加及時的響應反饋。



          三、小結

          本文針對語音交互中的等待體驗進行了討論,并以智能音箱為例,重點對喚醒階段和請求反饋階段的響應時間和反饋方式進行了人類工效學實驗研究。由于實驗設定的條件和樣本數量等限制因素,實驗研究結論可能不能代表所有智能音箱用戶在家居環境的全部感受,但希望通過我們的研究和探索,可以指導人工智能語音對話產品響應時間和反饋方式的設計,幫助打造自然和的語音對話體驗。

           轉自:站酷-DUBEST

          設計師要懂的“產品導流”背后知識點。

          ui設計分享達人

          設計師不僅要低頭畫圖,也要了解“圖”背后的邏輯和需求本質 。嗯,下面用直白的語言跟大家聊一波相關知識點。




          說到產品導流,大家都不陌生。



          身為設計師,應該經常聽到產品同學提需求:“在這里給XX功能加個入口吧”,“這個宣傳新產品的banner可以再大一些嗎”,“這個場景可以宣傳下我們的新功能誒”…


          很多設計師在不了解背景的情況下往往內心是排斥的,心想怎么老是在犄角旮旯里加這么多小廣告啊,都不關心用戶體驗的嘛,balabala...



          但是有誰在吐槽時,深究其背后的原因呢,舉起小爪子讓大牙康康。比如:什么是產品導流?為什么需要產品導流?它有哪些的形式?如何做效果好又能兼顧產品體驗呢?



          最近正好在搞相關的事情,所以擼一篇文章,分享一波相關思考。





          什么是產品導流? 



          “產品導流”指的是:一款產品采用某種形式,增加對另一款產品/功能的曝光,使自己的用戶群體(流量)去使用或探索另一款產品/功能。



          眉頭一緊,感覺上面的描述有點拗口,善良的牙嘗試著用大白話,把導流和被導流的關系,分為兩種形式解釋下:1.父子關系;2.兄弟關系。

          1.父子關系


          畫風是:“爸爸,大腿借我一抱吧”,比如:“抖音”里增加“多閃”入口,“微信”里增加“微視”入口,通過自家體量大的產品(爸爸)給自己導流。



          2.兄弟關系


          畫風是:“外面環境惡劣,是好兄弟,就互導一下吧”,比如:京東的會員可以享受愛奇藝的會員福利,同輩之間互相導流。



          所以,這么說就好理解什么是產品導流,和它們之間的關系了吧。






          產品為什么需要導流? 


          產品之間導流的目的,大致分為兩種:1.獲得新增;2.企業生態。




          1.獲得新增



          試想你費勁巴拉的搞了個新產品,沒人知道,也沒人來用,就算你產品做的再妖嬈,是不是也白搭,更不用說后續的商業變現之類的。


          所以,這個時候如果你有一個相對成熟的產品(爸爸)大腿,讓它給你導流,實現一波冷啟動,是順利邁過第一個坎兒的手段。


          當然,在目前激烈的競爭環境下,不僅是新產品需要導流,擴大規模和獲得新增流量,是每一個互聯網企業里產品或運營同學OKR中必不可少且另他們頭禿的一項指標。



          所以,不管是新產品,還是相對成熟的產品,都需要通過導流的手段,來獲得新增用戶。





          2.企業生態


          “產品導流”除了為了獲得新增,還有就是為了企業生態的體驗閉環。


          做成一款產品的公司很牛逼,但是如果能夠持續做出一系列牛逼產品的公司,一定有成功的基因,或者有一套做事兒的邏輯。


          比如:亞馬遜的飛輪效應,要想形成飛輪,打造自己的生態,業務上就得有自己的閉環,并且閉環上的每一個步驟都可以為其它步驟助力,其次就是以第一個飛輪作為根據地,拉動周邊其它業務,形成第二個或者更大的飛輪。


          這個時候,就需要各個業務線之間的互通及聯動(互相導流)了。






          比如,阿里也是在打造自己的生態,產品之間相互賦能和聯動,一旦建立起來這些基礎設施后,壁壘和護城河就非常堅固。



          整體來看,“產品導流”不僅有助于新產品獲得冷啟動,還有助于相對成熟的產品擴大規模,同時從整個企業生態來看,矩陣產品的互相導流,協同發揮優勢,也有利于打造體驗閉環,建立企業壁壘。





          產品導流的形式有哪些? 



          目前,市面上導流形式大致有以下幾種:1.場景化導流;2.會員制捆綁;3.固定入口扶持;4.廣告位推薦。


          1.場景化導流


          場景化導流,翻譯成大白話就是,讓導流的過程更加無縫銜接。


          這種做法,能兼顧用戶體驗,同時對導流量也更有利,一般用于“功能”層面的互通。比如,用戶正好需要XX產品或功能,你見縫插針的增加導流入口,同時功能和設計元素也跟母產品保持一致,這樣用戶不會覺得干擾或反感。


          類似這種做法的產品比如:QQ&微云,抖音&剪映;視頻號&公眾號...


          QQ&微云


          我們用QQ聊天時,好友之間總會有一些分享文件的行為,有“分享”就有“接收”,有“接收”就有“保存”的訴求,在這種場景下,QQ聊天頁面里用戶長按當前“文件”,就可以將文件保存到“微云”上。






          除此之外,QQ首頁點擊左上角的側邊欄,能看到一列與“我”相關的功能入口,其中有一項是“我的文件”,點擊進去后就能看到“我”在QQ里消費過的歷史文件。


          同時還有“微云”小程序的入口,點擊直接跳轉至微云小程序(做的很服帖,跟自體脂肪填充似的,導流過程不會讓用戶感到突兀)。




          除此之外,微云作為基礎的云存儲能力,也在跟騰訊系的QQ音樂互通,滿足用戶將下載的歌曲保存到“微云”。





          這么做,不僅滿足了QQ音樂用戶的存儲訴求,還提升了QQ音樂的登錄率(用戶想要使用音樂網盤,必須先登錄),同時增加了QQ音樂用戶粘性(用戶一旦在一款產品上存下自己的東西,就會存在遷移成本),最后還為微云帶來了新增用戶(更多QQ的用戶使用微云進行存儲),擴大其規模。


          這樣的互通/導流手段,就實現了產品間1+1大于2的效果。





          抖音&剪映


          刷抖音的兄弟們應該經常見很多視頻下面有一個小標簽,叫“剪映-抖音出品”(意味著博主的那條短視頻是用剪映做的)。


          很多人看到好玩好看新奇的短視頻,都會覺得真香我也要剪同款,因此抖音就是這種恰到好處的投喂給你,點擊標簽,直接跳轉到下載頁,如果已經安裝了的用戶,可以直接進行剪同款。




          抖音不僅送你出去,還負責接你回來,一條龍服務給你安排(導)的明明白白的。


          比如,當你剪輯完成后,就引導你回抖音里分享,畢竟他們不希望你剪完之后保存到本地然后美滋滋去競品(快手之類的)分享吧。





          他們的目的就是,不管你怎么折騰,也逃不出我大字節的手掌。


          包括,最近的視頻號,發完視頻號還能附帶公眾號的鏈接,高頻帶低頻,通過公域流量,幫助作者往私域導流(順便做個廣告,快去關注我的視頻號:大牙兄,哈哈哈)。





          所以微信現在的導流方式是:視頻號能夠鏈公眾號,公眾號能夠掛小程序,小程序又能開直播,直播又能去變現。


          整體來看,場景化的進行導流,更適合“功能”層面的互通,滿足用戶和企業的訴求,還平衡了產品體驗,相對更加絲滑。





          2.會員制捆綁


          會員制捆綁,已經成為互聯網常見導流+變現的方式了,指的就是用戶在你這買了會員,在別的合作產品里也享有它們的特權福利。利用用戶“愛占小便宜”的心理,產品間互相導流。


          比如我們常見的方式有:88會員、聯合會員...

          88會員


          開過88會員的同學舉個爪!好,放下吧,反正我也看不到。


          88會員算是阿里生態體系的重要布局了,也就是你開通了88會員,阿里系的很多產品你可以劈著叉去用,而且很劃算。


          比如,餓了么會員每年108元,蝦米每年128元,優酷每年也差不多180元,還不算其它的,這些價格在用戶心中已經是錨定價格,加到一起怎么著也大1000了吧,跟88元一比,穩賺不賠啊!






          我們來看看88會員里包含什么,各種阿里系的七大姑八大姨的產品都包含進去了,從吃飯、購物、娛樂、旅行再到看病,生活里的方方面面都包含了。





          所以,我身邊的人開了88會員后,畫風是這樣的:明明想用QQ音樂聽歌呢,不!我是88會員!我要去用蝦米!明明想用美團點個外賣呢,不!我要去餓了么!明明我想去愛奇藝看看視頻呢,不!我要去優酷看!(不過他們如果想看“淡黃色長裙蓬松的頭發”還是得去愛奇藝)。


          可以看出,阿里用這套會員體系,把用戶死死的框在(導流)自己的產品矩陣中了,產品群們被自己爸爸carry的明明白白的。





          聯合會員


          聯合會員跟上面說的88會員有點類似了,只是88是自己企業內產品的互相導流,而很多聯合會員是跨公司,跨界整合資源。 

          比如,京東的PLUS京典卡,就是跨公司跟別人合作,有和騰訊視頻、酷狗音樂、喜馬拉雅、攜程、愛奇藝的聯合會員。 





          其實也能看出,京東和其它產品這么搞,也是對阿里系的反擊,沒有爸爸,只能兄弟之間互相導流,抱團取暖,一致對外了。



          3.固定入口扶持


          固定入口扶持,一般出現在規模較大的平臺級產品上,它們利用自己的流量優勢,在固定位置給自己的子孫/兄弟產品們導流。


          扶持下一代,努力做到子又生孫,孫又生子,子子孫孫無窮盡也。



          比如:淘寶、支付寶、美團,在首頁金剛位給自己企業相關產品導流,同時也補足/豐富自己產品的其它場景。






          比如,各家的小程序,也是相對固定的入口給自己的產品或第三方產品進行導流,完善自己的產品生態。






          4.廣告位推薦


          廣告位推薦的導流方式應該是大家非常熟悉的了,它區別于上面的導流方式的核心點在于一般是產品/活動的介紹,引導安裝之類的,形式大致分為:閃屏、 banner、角標、feed流...




          閃屏

          閃屏指的是用戶在使用產品時,打開的第一個啟動頁。


          用它進行導流的優點就是全屏沉浸展示,用戶的目光就聚焦到這里了,但缺點是:時間短,如果在短時間內傳達不清晰的話,很容易一閃而過,錢就白花了。



          所以,閃屏的導流,最好找重疊用戶較高的產品,比如,在汽車之家閃屏投個刮胡刀啊,在親寶寶閃屏投奶粉啊之類的,用戶在短時間內好接受好理解。


          投放越精準,對產品體驗和對廣告主的導流效果越好。





          角標

          角標導流這種形式,在電商類平臺搞活動的時候經常見,各種小角標紛紛出來拉客,角標的著陸頁一般都是活動H5類型的居多。




          這種形式的優點在于能夠一直常駐,不像閃屏,閃一下就沒了,它只要用戶不手動關閉就一直在這杵著。


          但對于設計師的挑戰就是,如何在小小的區域里,把被導流的產品/活動核心利益點傳遞清楚,吸引用戶點擊。

          而且,這種形式也要謹慎使用,如果亂八七糟的飚小角標也挺傷害體驗的。





          Banner


          Banner位的導流大家更常見了,一般都是自己家產品/業務,夾雜著第三方廣告推廣,無限輪播著進行導流,大家都太熟悉了,我就不啰嗦的說了。





          Feed流


          一般資訊類或者社區類產品,喜歡用這種方式進行導流,因為用戶在其產品上的核心操作就是擼Feed。


          所以,擼著擼著給用戶投喂一個通過算法推薦的廣告,然后再把廣告包裝成跟Feed內容很相近的設計,吸引(pian)用戶點進去,從而進行導流。


          比如: 知乎、最右、百度、頭條 ...




          不得不說第二張“最右”的推薦內容,讓我不禁撫摸了下自己的胡子。

          不過除了最右給我推“大胸妹子”,百度給我推“游戲”,頭條給我推“汽車”,難道在他們的算法中,我是個油膩中年男???


          看來他們的人工還不夠智能,機器還得再學習學習,大牙對你萌hin失望。





          總結  


          總的來說,“產品導流”不僅有助于新產品獲得冷啟動,還有助于相對成熟的產品擴大規模,同時從整個企業生態來看,矩陣產品的互相導流,協同發揮優勢,也有利于打造體驗閉環,建立企業壁壘。


          形式大致分為:1.場景化導流,無縫銜接式的體驗,讓用戶在產品功能間絲滑的流轉;2.會員制捆綁,低價獲得跨產品福利,利用用戶占小便宜的心理跨界導流;3.固定入口扶持,平臺型產品常用手段,豐富自己產品場景又能給自己小弟帶流量;4.廣告位推薦,靈活可配形式多變的導流方式(閃屏、 banner、角標、feed流)但搞不好很傷用戶體驗。



          但是,不管什么導流形式,導進來的用戶,只有看到滿足他們訴求和預期的著陸頁才是最關鍵的,不然就算給你再大的流量入口,用戶搞不明白該走還是會走。


          同時,也不能為了導流而不分場景的尬導,這樣很容易傷害原有產品的用戶體驗,撿了芝麻,丟了西瓜。

          轉自:站酷-蘇大牙


          交互問答 | 產品設計的稀缺性 & 截圖功能 & 分頁與無限滾動加載差異

          ui設計分享達人

          通過交互思維,從常見功能模式梳理產品設計的底層邏輯。

          通過讀者提出的三個問題,我們從交互設計的角度來聊聊它們的底層邏輯。


          稀缺性的正反價值


          讀者提問:

          呆總,有什么心理學或經濟學的概念是在產品設計上也被沿用的?


          當然有,比如稀缺性。


          讓我們從你的生活小故事開始講起。


          在某個餓著肚子的下午,你走進一家超市,想要買桶泡面充饑,但是各式品牌與類型的泡面讓你應接不暇,于是糾結起來,正猶豫不決中,一款所剩無幾的泡面在茫茫商品中跳進了你的視野,不禁心中竊喜,“沒錯,就是它了!賣得這么好,味道一定不錯~”。


          回到家里,你一邊吃著泡面一邊刷著手機,突然看到了節假日商品促銷的廣告,于是打開了購物車,果然每件商品上都赫然標著今日滿減的紅字,讓你蠢蠢欲動,之前嫌貴的商品突然在今天有了剁手的理由。不僅如此,其中你的最愛竟然顯示庫存緊張,如何能忍,趕緊結賬下單,在付完款的最后一刻,你終于松了口氣并開始暗自慶幸自己的英明決策。


          這時,你的舍友突然推門而入,迫不及待地告訴了你她偶然得知的一個八卦消息,之前從未聽聞的你感到激動不已,能夠獲得鮮見的信息讓你感到無比地滿足,兩人就此事展開了激烈地討論....


          以上。


          就像故事中描繪的那樣,我們的生活就是由這些瑣碎的片段重復構成,在無數個場景中,我們做著自覺或不自覺的思考和判斷,它們影響著我們的感知,主導著我們的行為。其中,稀缺性就是我們估值的必要條件和決策的重要基礎,那些熱銷的商品、限時的促銷和不為人知的秘密喚起了我們內心的需求與渴望,催促著我們去行動。在設計產品功能時,產品人員也總是會刻意營造給用戶一種稀缺的感知來突出其價值,以引導用戶進行點擊、瀏覽、購買等一系列行為。


          稀缺的分類


          總的來說,我們對稀缺性的利用大致體現在三個方面:時間、產品、信息。


          時間的緊迫感。


          這一點經常應用在電商產品中,比如特定節日內的商品限時優惠、搶購活動等等。對時間的限制能夠傳遞給用戶一種緊迫感,暗示他們盡快購買,從而減少他們的決策時間,達到促銷的目的。

          產品的缺失。


          我們經常能在電商產品中看到商品庫存的數量,特別是當庫存較少時,能起到刺激用戶的購買欲望。谷歌早前在發布線上郵箱的時候也充分利用了類似的手段,因為個人測試版的郵箱受技術的限制,不能為每個人開放足夠大的儲藏空間,于是他們采用了「邀請制」來推動這項服務,結果非常有效。


          當你成為了其中一員,就能夠再邀請 2-3 個朋友,這項服務的「供應不足」在推薦系統的支持下得到了病毒式的傳播。類似的,知乎早期也利用了邀請的方式去幫助自己獲得初期的忠實用戶,產品的不易得性反而讓人更看重它,間接提高了產品的價值,達到了意想不到的效果。


          再比如部分商品「限購 2 件」,會讓用戶產生再買一件的念頭 —— 其實原本就只想買一件。


          信息的限制。


          因為我們總是假定少的東西更具價值,所以對于審查和限制我們獲得信息的動作尤為敏感,我們更渴望得到那些被禁的隱秘信息而不是唾手可得的信息。這種稀缺性所起的作用甚至比法律還要強,我們會本能地認為它更有說服力。這也是一些新奇罕見的消息更容易傳播的原因之一,得到不常見的信息能夠使人享受到額外資源的優越感。一些媒體恰恰利用了這一點,常通過夸張的新聞標題去抓住人們的注意,試圖擴大其影響力。


          或者一些特權(虛擬)商品,譬如 VIP。就是提供給用戶部分信息,再告知用戶 VIP 權限更高,能獲得多有「價值」信息,誘導購買。


          稀缺作用的原理


          天然的,出于原始的不斷追逐獵物、獲取資源的本能,我們總是格外珍惜稀缺資源,并認為它們更具價值。稀缺性在一定程度上鼓動了我們內心貪婪的欲望,除此之外,我們還有「喜歡走捷徑」的弱點,同時「厭惡失去」。


          一方面,當事物很難被獲取的時候,我們通過易得性進行快速的價值判斷,遵循這樣的方式我們總能地做出決定。

          另一方面,我們討厭失去選擇的自由,所以常傾向于快速地決策來留住一些東西,甚至想要得更多。

          雖然我們的這些本能,在幫助我們快速行動,但卻不一定會做出最適合自己的選擇。畢竟人的判斷大多偏向于主觀,一些用心不良的企業,可能會利用它讓一些人做出錯誤的決定。


          稀缺作用的條件


          相比于一些錯誤所導致的稀缺,比如最近由于豬瘟造成的豬肉供應量的減少,在有限資源的競爭中由社會需求導致的稀缺能夠發揮更強的效應,零售商早已充分洞悉了我們的這種傾向,所以常告訴我們產品正在熱銷當中,應盡快購買。這不僅是社會認同在發揮作用,即我們認為其他人認同的產品是好的,而且我們正參與到產品的競爭當中。

          稀缺原則的應用焦點在于利用緊張的時間或者強調某些東西未來的不可得性,防止用戶花很多的時間做出決策,推動用戶馬上做出對商家有利的決定。如果給人們這個世界上的所有時間去做出決定,他們要不花上所有的時間,要不根本不做決定。


          通過應用稀缺性的技巧,可以從根本上迫使人們采取對策。人們在稀缺性原則的壓力下反應更快,因為他們害怕永遠失去機會。稀缺性使得他們優先做出決定,所以這些決定相比無限制的決策變得更重要,更緊急,更被需要。


          但是僅僅告訴人們他們將要獲得的利益是不夠的,如果他們選擇你的產品或者服務,你還需要指出其特別之處以及被放棄時的成本。

          國內頂尖網課平臺CC talk ,是如何做好網師分層體系設計的?

          資深UI設計者

          項目背景

          網師分層對平臺的重要性不言而喻,諸如阿里這類的電商平臺都有完善的商家分級體系,明確了不同等級的權益和運營策略。

          2019 年底 CCtalk 平臺的網師數量達到了一定規模,平臺的基礎能力建設也相對完善,因此網師分層的事宜被提上日程。此前我們評估網師的方式是按照流水,將網師分為普通網師、中部網師和大 V 網師 3 類,不同網師對產品功能需求及運營要求差別很大。這種粗略的劃分方式可以幫助簡單評估網師,但并沒有產品化,而且只有單一的 GMV 維度,不夠全面客觀。有些客單價較低的網師也有大量的購課學生,他們對平臺的價值也高。因而我們需要推出一套綜合網師流水、招生數量、內容質量等多個維度的方法來進行分層運營。

          面對以上問題,相應的解決方案是:

          • 建立商戶等級體系
          • 等級權益差別化
          • 增加權益購買觸點

          價值分析

          既然是涉及全平臺網師的重大升級調整,當然要從全局的角度來進行價值分析。我在這個項目中探索了用于多角色價值分析的「三維價值分析法」,從整個關系鏈的角度來解析網師分層對網師和平臺的價值。

          Step1.列出相關利益者

          分別包括:CCtalk平臺、網師、學生。

          △ 列出相關利益者

          Step2.設定中心點并建立關系

          分析連接這3種角色的關鍵點是什么。我們CCtalk作為一個在線教育平臺,最核心的因素是內容,因而將中心點設定為「內容」。(注意,如果此時是做某個具體功能相關的項目,那么中心點可以是這個具體的功能,例如「作業」或「直播」)設定中心點后,建立不同角色和中心點之間的雙向關系。

          △ 設定中心點并建立關系

          Step3.進行全局價值分析

          在上一步的關系網的基礎上,用圓弧連接相鄰角色的價值走向關系,從全局的角度進行不同角色間的價值分析。

          △ 進行全局價值分析

          從上面的三維圖中可以看出網師分層對于平臺和網師的價值。
          對網師來說,有助于:了解成長路徑,獲得更多產品運營支持,獲取更多功能權益。

          對平臺來說,可以:篩選網師,激勵網師自驅動,增加收入。另外,還有一些間接的價值,包括通過督促網師生產高質量的內容來提升平臺的價值,通過督促網師積極招生來擴大用戶規模。

          △ 網師分層對于平臺和網師的價值

          項目拆解

          剛接到需求時,我內心的 OS 是:大項目!概念大,范圍廣,都有點不知從哪里入手。

          冷靜下來分析,網師分層本質是一套針對商戶端的激勵體系。從下往上拆解:由底層商戶活躍度來計算經驗值,根據經驗值劃分商戶等級,并賦予不同等級不同的權益,權益包括教學核心功能:直播時長,素材存儲空間,課程人數等。再向上衍生到不同權益對應的使用場景,以及權益的擴展方式。

          △ 分層拆解

          從設計層面,分為信息展示和場景觸達兩部分。這么一看,其實又挺簡單。

          設計落地

          由于項目涉及的底層邏輯多,時間周期跨度大,因此拆分成 3個小版本來實現:商戶權益改造,經驗值等級底層 & 商戶等級外顯。前期的功能實現后,先預埋在版本中。等到經驗等級上線時統一發布。其中經驗值等級底層項目是純技術,不涉及設計。

          所以下面將從功能權益分層和等級經驗值外顯兩部分來講解具體的設計過程。

          Part1. 功能權益分層

          功能權益分層是權益的使用層面,包括多場景觸達和引導購買增量包。設計時分為場景梳理→設計要點→細化直播場景→具體設計這 4 步來實施。

          Step A.場景梳理

          拆解權益的生命周期,可分為三個階段:充足可用,即將不足,已用盡。而功能的使用場景——直播,也分為三個階段:直播前,直播中,直播后。

          Step B.設計要點

          將權益生命周期和直播場景結合進行交叉分析,列出設計要點和具體的設計拆解。

          △ 不同階段的設計要點及拆解

          Step C.細化直播場景

          發起直播的入口很多,除了「立即直播」的主場景之外,還有由預告進入直播的 3 種場景,如果在每個入口都做功能禁用判斷的話,不僅邏輯會很復雜,開發實現起來成本也比較大。

          于是將直播前的流程細化,發現「直播檢測」是進入直播間的必經環節,因此將功能禁用的判斷節點縮減為 2 處:「立即直播」&「直播檢測」。

          △ 細化直播場景

          Step D.具體設計

          有了前期的分析后,具體設計環節就相對容易了。下面以點擊「立即直播」時的功能余量判斷為例。

          點擊「立即直播」按鈕,在按鈕原有的邏輯上加上新的判斷邏輯,此處要注意寫清楚他們之間的優先級關系。如果在不了解背景的情況下,很可能就直接寫點擊按鈕進行可用直播時長的判斷,那需求宣講的時候開發就會問你,和原來按鈕上的邏輯是什么關系呢,此時就會一陣緊張。

          △ 立即直播時判斷剩余可用直播時長

          Part2. 等級經驗值

          等級經驗值屬于展示層。對網師用戶來說,最重要的是了解自己當前處于哪個等級以及相應的權益有哪些。對平臺來說,除了明確每個等級及相應的權益,重要的是要引導網師升級,以激發他們的自驅力。

          由此推導出相應的設計方法:錨定目標、降低門檻和利益點吸引。

          △ 設計方法

          在設計方法的指導下進行落地,分為網師后臺首頁的展示,以及等級詳情頁的設計兩部分。

          網師后臺首頁-個人信息模塊的展示

          由于等級和權益掛鉤,涉及網師切身利益,因而在網師后臺首頁的個人信息模塊,增加當前的經驗值和相應等級的展示。同時,通過利益點吸引等方式,引導網師向下一個等級努力。

          △ 個人信息模塊展示

          等級詳情頁的設計

          點擊等級進入詳情頁,除了 Lv0 是將所有權益無差別展示,其他等級都是優先展示新增部分,包括新獲得的普通權益和附贈的高級功能。另外,用「箭頭」和「NEW」的圖標幫助用戶區分是老權益的內容升級,還是新增的權益。

          總結反思

          1. 前期缺乏深入調研

          由于涉及網師的切身利益,因而此功能受到了網師們前所未有的關注。上線前一周,運營以郵件、通知等形式向網師預熱,3 月 5 日會上線這么一個功能。于是還沒上線就有網師來咨詢在哪里可以查看。剛上線就收到了大量的用戶反饋,網師反饋群里的消息簡直是秒速級地在刷屏。

          其中,網師對每月直播時長限制的反響最為強烈,部分網師表示平臺應該鼓勵多直播,不能接受對直播時長的限制。因為直接關系到上課這個核心功能,時長不夠課都上不了,網師們的言辭非常激烈。所以我們又重新評估了平臺的直播成本,經過深入討論,全面放開了每月的直播可用時長限制。

          帶來的反思是,如果前期有通過問卷、訪談等方式進行深入的用戶調研,了解他們對核心權益的態度,那么在進行權益設置時就能有更全面的考量。

          2. 中高等級跨度太大,缺乏激勵效果

          游戲任務的上手難度曲線一般是先平緩,再慢慢陡峭,越往上難度越大。我們的等級體系其實也是這個邏輯。初級到中級還較為容易,但再往上要非常難,要經過長時間的積累,一看就無望,難有激勵效果。

          因而我們之后的優化方向是在相鄰等級中間設定一些小目標,達到可以提前贈送下一等級的新權益,以此來提高激勵效果。

          文章來源:優設    作者:魚游設計

          保姆級交互名詞掃盲

          ui設計分享達人

          通過一個案例解釋那些讓你們看得有大的交互專業詞匯

          UI 和交互這兩個詞匯是一對孿生兄弟,有非常密切的聯系,我們在前期了解 UI 的時候“交互”這個詞總是形影不離,出現的頻次極高。


          但是,從我開始學習 UI 起,就被它困擾了非常長的時間,并不是苦于如何在實戰中應用,而是在中文語境下,交互有關的詞義實在是太“玄學”了,網上對它的解釋多數也含糊不清。


          比如看百度詞條里,交互本身有兩種解釋,我們分別來看一下。


          1.交互:指替換;互相;彼此。語出《京氏易傳·震》:“震分陰陽,交互用事?!保庩枴y道是我想的那個意思?)

          2.交互:通過某個具有交互功能的互聯網平臺,讓用戶在上面不僅可以獲得相關資訊、信息或服務,還能使用戶與用戶之間或用戶與平臺之間相互交流與互動,從而碰撞出更多的創意、思想和需求等。(交互使人類進步?)


          單就這個詞,如果詞條看不懂,多在網上搜索相關的信息,咂摸個10天半個月的,是可以對它有個大致的認識。我會用一個比較簡單詞來概括它 —— 相交互動。即人和機器有了接觸并產生操作、互動的整個合集。


          好不容易把這個詞搞懂,但是,交互事件、交互操作、交互方式、交互流程、交互原型、交互設計、交互文檔、交互體驗、交互動效……又是什么意思?


          當我們在網上看一些交互相關的分享,你就會感受到這種混亂,比如下文截圖的這種表述方式。

          undefined


          這是我非常不喜歡的風氣,通過非常生硬的專業名詞包裹自己的思路,去總結一個非常簡單易懂的道理或原則,也就是俗稱的 “不講人話”。


          所以,對于這個問題的反感,我打算自己做一篇 “接地氣” 的分享,對交互的基本常識做一次掃盲。







          針對這些解釋,我找了一個我自己課程學員正在處理的真實案例作為依據,并進行改版優化,來解釋所有和交互有關的名詞具體含義,以及對應的實例是什么。


          先看看下面這個案例。

          undefined

          Protopie線上可交互稿:https://cloud.protopie.io/p/a66d68949d


          圍繞這個案例開展,該頁面是公司內部人員使用的訂單管理頁面,訂單代表的是為客戶上門測量門框門扇數據和進行設計定制的服務。


          再詳細點解釋,就是銷售找到定制門的客戶,要創建一個銷售訂單,填寫客戶的基礎資料信息,然后設計師會上門進行進行測量,并將測量結果和定做要求編輯進去,以及填寫具體定制參數,還有服務的價格明細。


          這個頁面與公司內部的四個角色有關聯,分別是銷售客服、設計師、財務、派單員。


          銷售客服:聯系到客戶以后,確定客戶的資料信息基本需求,然后創建訂單填寫基本的客戶資料。

          設計師:設計師在看見訂單后需要上門進行測量溝通,并給出方案確定報價,然后將明細也記錄到資料中。

          財務:財務在做賬的時候有時候需要進來訂單查看具體的明細和數據。

          派單員:派單員要根據訂單內的具體數據要求,聯系倉庫進行準備和發貨(進銷存管理)。


          說到這里,大家應該還已經對這個頁面是做什么的有了基本的認識了把。那么我們先不討論它的優缺點,就來講講上面的交互名詞在這個頁面中的對應實例。


          人機交互:就是指上面銷售、設計、財務、派單四個角色進入這個頁面,編輯信息、查看信息的所有操作和行動的合集。


          交互界面:該頁面可以進行操作和編輯,就叫做交互界面。


          交互操作:交互操作就是指我們操作這個頁面的行為方式,該頁面目前只有兩種,點擊(Tap)和上下滾動(Scroll)。


          滑動Scroll


          點擊Tap


          交互方式:這是軟件允許用戶操作的規則,比如想要選擇設計師,就要通過點擊 “設計師” 欄目,在彈出的選擇器中,通過滾動列表來選取指定人選的方法,就叫交互方式。


          交互事件:交互事件是指整個人機交互中的其中一個獨立事件,比如上面案例講的,點擊設計師觸發選擇器彈出的事件,就是一個交互事件,在選擇器列表中選擇具體設計師,也是一個事件。


          交互流程:交互流程是完成一個操作目標的操作流程,范圍可大可小。比如上面選擇設計師的全部操作流程,可以定義為一個交互流程。而完成整個頁面信息錄入的過程,也可以成為一個交互流程。


          交互動效:比如選擇設計師的交互流程中,點擊設計師選擇器的動畫效果,就叫交互動效。交互動效是由交互操作觸發而成的,方便用戶理解界面的內容,而不是任何在UI中看到的動效都叫交互動效,比如下圖這種。


          交互體驗:它和產品、用戶體驗還不太一樣,專指用戶在交互流程中得到的體驗,維度并沒有覆蓋產品服務、情感化設計。


          關于交互設計、交互原型、交互文檔,我們在下一個部分討論。這里的結尾我們就來講講交互體驗,交互體驗的評判維度有很多。但拋開所有技術分析,我自己將交互體驗的結果簡化成 3 個:難用、能用、好使。


          交互體驗的好壞不是產品、交互、設計師、程序員說了算的,是由用戶來評判的。所以產品和設計行業都會強調 “共情” 能力,可以站在用戶的角度來審視我們做出來的東西,而不是呆滯的上帝視角。


          之所以挑這個案例,就是因為即便作為讀者的你們,應該也可以想象如果你是這個頁面的操作用戶,那么體驗一定會非常差,雖然它功能可能是完備的,但一定是 “難用” 的。


          而對難用的分析上,絕對不是直接去套理論分析哪里難用,而是先找到難用的原因。


          這個是多數新手會犯的錯誤,不站在業務、用戶的角度去使用應用,找出原因,而就指望著去套理論套公示來對這個界面進行 “專業分析”。


          所以這里我們簡單講講,它的主要問題:


          • 頁面菜單選項太多,操作起來感覺壓力非常大

          • 菜單內容的分布感覺混亂,很難形成記憶點每次要設置的東西在什么位置

          • 不同角色對這個頁面的功能訴求不同,現在的設計顯然沒有滿足






          在得到上面三個問題以后,我們就可以對這個頁面做出新的優化。 而要優化交互,我們就要首先從交互原型入手,即根據我們的想法設計出可以表現交互方式、交互流程的原型圖,比如下圖案例。

          Protopie線上可交互原型:https://cloud.protopie.io/p/838165bdad


          交互原型和產品原型不一樣,產品原型是用來解釋產品經理自己對產品功能的規劃,不需要著重考慮交互體驗,邏輯能跑順并且能講清楚即可。


          而最終的設計稿,就是基于交互原型的基礎上,遵照它的交互方式、事件、流程展開視覺內容的填充和細化。


          我們再回到這個改版過后的案例,講講我們在交互原型中的流程給大家一點啟發。


          首先這個頁面的所有菜單,并不是只有一個人完成填寫,最起碼要由派單員、設計師兩個人,而財務、派單員進入到這個頁面中,通常會有明確的目的要查看哪一部分數據,其它的數據信息對于他們而言都是干擾。


          所以,我們將所有數據類型進行劃分,統計結果如下(大致規劃,了解意思即可)。


          完成分類后,舊版中只使用上下滾動查找菜單的方式顯然是不滿足實際需要的,所以我就根據內容的劃分創建一個分頁欄的形式,將不同類目的菜單對應進行匹配。


          當我們要查找某個具體元素的時候,首先選擇對應的分類以后,再在分類下方查找。并且我們還引入一個新的 “交互方式”,可以通過左右滑動的 “交互操作” 來切換分類頁面。




          并且這個分頁器欄目也可以進行標識,你的賬戶對這些內容的權限如何,比如 “不可看”、“只讀”、“可編輯” 等等。


          而每個分類下方,對它們再做一次邏輯分類,還有區分必填項和非必填項。如果有大量非必填項目為空,那么對于信息的查閱檢索都是干擾,選填內容是用戶需要填寫的情況下才會去填,所以我們將每個分類下面的必填和選填也作出拆分,默認將選填菜單進行折疊(也可以是默認不折疊)。


          這樣,我們就可以得到一個你沒有想到的 “船新” 版本。相信大家在這個版本的交互體驗肯定比老版好出不少。


          當然,這只是對交互流程的其中一個改版,并不代表我們的交互只能這么改而已,實際項目中,優秀的設計師都會提供幾種不同的版本進行評審和測試,挑出其中最優的方案。


          比如,我們可以不把分類頁面做成左右滾動的,而是做成上下滑動的。


          所以,在了解上面兩套交互原型的案例,我們就可以再來介紹交互設計(UE)了。交互設計就是制定用戶操作界面的流程、方式、體驗的設計,和界面視覺設計并不能劃上等號。


          雖然過去行業里喜歡強調,將交互設計 (UE) 和界面視覺設計 (UI) 崗位拆分開來,但這不是一個太合理的現象,對于多數業務和團隊來說增加 UE 崗位只是平添負擔而已,未來的大趨勢是由 UI 設計師負責交互設計的內容,當然也有個洋氣的新名稱叫 UX。


          最后,在完成了上面這些內容的設計和規則制定以后,事情還沒完。專業的 UE 和 UX 還會提供一份文檔叫 “交互文檔”,除了將交互原型圖置入進去以外,還要具體來介紹它的交互方式、交互事件和交互流程的說明。


          基于時間原因我就沒辦法提供一份基于這個案例制作的交互文檔了,大家只要明白,如果我沒在一個地方標注可以通過左右滑動來切換頁面的方式,或者默認狀態下選填內容是展開還是關閉之類的信息,那么最后落實到開發環節中可能就會導致很多細節問題的錯誤。





          以上,就是我們關于對交互有關名詞掃盲和解釋的全部內容了。學習交互,要先從這些名詞的認識開始入手,搞清楚底層的邏輯和原因,然后再通過實踐和分析來積累對這部分內容的經驗。


          只有深入去了解業務,并站在用戶角度審視,勤于思考的設計師,才能在交互領域中有所建樹,理論知識只是其中嘴不重要的一環。


          下面再把所有涉及的名詞羅列一遍做個總結:


          人機交互:用戶和機器、軟件實現操作和互動的過程。

          交互界面:可以用來進行交互和操作的UI界面。

          交互操作:用戶操作軟件、界面的具體操作,比如單擊、雙擊、長按等。

          交互方式:軟件允許用戶操作的規則,比如按鈕的交互方式要通過點擊才能觸發。

          交互事件:沒完成一次交互操作并獲得反饋的事件。

          交互流程:用戶為完成目標所做的一系列交互的合集。

          交互原型:用來確定產品交互方式的原型圖。

          交互設計:制定用戶操作界面的流程、方式、體驗的設計。

          交互文檔:用圖文記錄交互思路、具體交互規則的文檔。

          交互動效:用來協助交互操作明確交互事件的動畫效果。

          交互體驗:完成交互流程后所獲得得感受。


          完!

          轉自:站酷-酸梅干超人

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合