<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>

          首頁

          Carplay 設計規范(下)

          資深UI設計者

          3.5、觸摸屏交互

          用戶可以通過內置的觸摸屏來與 Carplay 直接進行交互。高保真屏幕可能會比低保真屏幕,在交互效率上更高,更低延遲,支持更多手勢。Carplay 的交互基本采用的都是單指交互,具體可以參考下方列表:

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          在設計交互的時候,盡可能少地使用觸摸交互,避免用戶在駕駛過程中分心。

          3.6、Siri

          Siri 是 Carplay 的基本功能,無干擾的語音讓用戶和程序之間的交互更加自然和安全

          即使看不到 Carplay 的屏幕,依然可以使用方向盤上的語音命令按鈕來激活 Siri。激活后,Siri 會針對語言進行處理和分析,并且轉換為可用的指令。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 快速響應,最大程度地減少交互。
          • 使用自定義詞匯表,提升 Siri 的識別準確度。用戶可以通過特定的術語來提升語音識別準確度。

          具體可以參與 SiriKit 編程指南。

          4.1、動畫

          動畫可以讓屏幕上的元素,擁有一層附加的視覺效果。如果方法得當,動畫還能呈現狀態,提供反饋,增加用戶直接操控時候的感覺,并且告知用戶可視化操作的結果。

          • 不要為了使用動畫而使用動畫。過多不必要的動畫會分散用戶注意力。
          • 保持真實感和可靠。當動畫沒有意義且無視物理規律的時候,會讓用戶感到迷惑。
          • 使用一致的動畫效果。自定義動畫應該和內置的動畫保持一致。
          • 將動畫設為可選項。
          • 更多動畫的演示實例參考這里的案例:https://developer.apple.com/design/human-interface-guidelines/carplay/visual-design/animation/

          4.2、品牌設計

          成功的品牌設計并不只是把 LOGO 塞到 APP 當中,出色的 APP 能夠巧妙地使用字體、配色和圖像來構建獨特的品牌形象。

          關于這方面的設計,可以詳細參考 iOS 設計規范中的 配色、版式以及 圖標和圖像 這三個章節。

          在品牌設計上,Carplay 要求設計師:

          • 盡可能將品牌設計以精致醒目的方式呈現出來。由于車內的使用場景,人們不會使用 Carplay 來查看廣告,最佳的用戶體驗則是他們最需要的東西。
          • 著重呈現品牌的一致性和功能性。確保你的 Carplay 界面是直觀且易于導航的,并且提供駕駛時真正有用的功能。
          • 遵守 Apple 的品牌設計準則。具體可參考:Apple Trademark List 和 Guidelines for Using Apple Trademarks

          4.3、配色

          通常,配色可以提供交互性,提供視覺連貫性,并且對界面賦予生命力。

          • 你需要選擇和你的品牌LOGO可以搭配使用的配色方案。
          • 避免讓交互性元素和非交互性元素使用相同的配色。
          • 在實際汽車環境下,對你的配色方案進行測試。
          • 盡量使用深色背景。
          • 注意不同文化對于色彩的理解,以及色盲用戶的需求。
          • UI中采用足夠明顯的色彩對比。

          4.4、布局

          Carplay 支持不同像素密度不同縱橫比的顯示,但是這也意味著在實際布局設計的時候,要格外小心,盡量讓你的設計在不同的屏幕分辨率和長寬比之下,都顯得足夠正常。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 以整潔的布局提供有用的信息,讓駕駛者可以一目了然地掃視到信息。
          • 在整個 APP 內部保持一致的外觀。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 確保主要內容足夠清晰醒目,并且感覺上是可用的。
          • 使用對齊的方式來保持清晰的層次結構,一目了然。
          • 為交互元素留出足夠的間距和交互空間。
          • 基于駕駛員的位置來排布元素,盡可能順手。
          • 考慮物理控件對于界面的影響。

          4.5、字體版式

          Carplay 采用的字體是蘋果的 SF 字體。你可以在這里下載到字體

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 最小程度使用文本,使用圖像信息傳遞速度更快。
          • 強調重要信息。通過色彩和字體粗細,來凸顯最重要的信息。
          • 避免使用自定義字體。
          • 盡可能使用內置的文本樣式。
          • 使用正文文本樣式作為主要內容的字體。
          • 使用 SF 字體的時候,Carplay 會根據最佳的文本大小自動適配間距。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          5.1、圖片尺寸和分辨率

          和 iOS 類似,在 Carplay 當中,屏幕分辨率也分為 1x 2x 和 3x。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          5.2、APP 圖標

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          每個 Carplay APP 都應該有一個顯著突出的圖標,確保在駕駛的時候可以輕松點擊到。

          • 可以直接使用 iPhone 的 應用圖標。
          • 不要使用黑色作為圖標的底色。
          • 設計圖標的時候,圖標應該有視覺焦點。
          • 采用簡單且易于理解的圖標設計。
          • 確保圖標本身是不透明的,并且讓圖標背景足夠簡單。
          • 不要在圖標當中使用照片、截圖或者其他界面元素。
          • 不要在APP的具體界面當中使用 APP 圖標,避免混淆。
          • 設計完成的圖標應該是方形的,系統會使用蒙版將邊緣處理為圓角矩形。
          • Carplay 的圖標尺寸分別為 @1x 60x60px ;@2x 120x120px ;@3x 180x180px

          5.3、自定義圖標

          如果你設計的 APP 當中,需要的圖標并不存在于系統圖標當中,或者系統圖標與你的 APP 并不匹配,可以自定義圖標設計。

          • 創建簡單的,可識別的圖標設計。不要加入過多的細節,確保可讀性。
          • 設計圖標的時候,使用透明背景、抗鋸齒且無陰影的純色圖標。
          • 保持圖標在風格、尺寸以及各個規格上的高度一致。
          • 在設計選項卡圖標的時候,選擇兩種不同版本的圖標,分別是選中狀態和未選中狀態的。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 不要在標簽欄圖標當中使用文本,如果需要,則在標簽欄下方的標題中說明。
          • 自定義圖標尺寸要求如下:

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          5.4、系統圖標

          系統本身內置了許多小圖標,服務于日常各種不同的任務,通常這些小圖標會使用在導航欄和標簽欄當中,盡可能使用這些內置的圖標。

          • 按照用戶習慣和預期來使用這些系統圖標。
          • 如果找不到滿足需求的圖標,就請使用自定義圖標。
          • 在導航欄中使用圖標的時候,具體可參閱這份文檔:UIBarButtonItem

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 在標簽欄中使用圖標,請參考這份文檔:UITabBarItem

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          6.1、上拉菜單(Action Sheets)

          上拉菜單是一種特定的彈出菜單,通常從屏幕底部彈出,并且包含2個以上的選項。不過在 Carplay 當中應該盡量避免使用上拉菜單,在 iPhone 上倒是可以使用它,但是不要在 Carplay 中顯示。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          6.2、活動指示器(Activity Indicators)

          在內容加載的過程當中,請勿讓屏幕保持靜止,或者空白,使用活動指示器確保它看起來沒有靜止。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          如果可以的話,可以在加載過程中提供對用戶有幫助的信息。具體可以參考 UIActivityIndicatorView

          6.3、警告(Alerts)

          警告會用來通知用戶一些關鍵性的信息,警告通常由標題、可選信息以及一個或者多個按鈕組成。除此之外,警報的視覺系統是靜態的,無法自定義。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          警告最小化呈現。由于警告本身會破壞用戶體驗,所以請在重要的情況下使用警報。
          相關開發人員可以參考這份文檔:UIAlertController

          • 盡可能編寫足夠簡單的、描述性的文本標題。
          • 請盡量使用簡短完整的句子。
          • 避免讓文本聽起來上指責、評判或者侮辱。
          • 不要對警報按鈕進行解釋。
          • 單鍵警告僅僅具備通知的作用,通常采用有2個選項的兩鍵警告。
          • 給警告按鈕以足夠簡明的邏輯和標題。
          • 在右側放置常用的選項,在左側放置取消按鈕。
          • 對取消按鈕采用正確的文本標簽。
          • 對于涉及刪除的破壞性操作,應該采用特別的樣式標識出來,具體可以參考
          • UIAlertActionStyleDestructive 和 UIAlertAction 這兩份文檔。
          • 允許通過點擊「Home」按鈕來消除警告。

          6.4、按鈕(Buttons)

          按鈕通??梢杂脕碛|發一些特定的操作,具有可自定義的背景,并且可以包含標題和圖標。和 iOS 不同,Carplay支持的按鈕樣式非常有限。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 在按鈕標簽中使用動詞。
          • 保持標題足夠簡短
          • 僅在必要的時候,添加邊框和背景
          • 更具體的開發參考 UIButtonTypeSystem 和 UIButton

          6.5、標簽(Labels)

          標簽是推送到屏幕上的一條短消息,這個標簽可以顯示任意數量的靜態文本。在設計標簽的時候,盡量保持標簽清晰易讀。具體開發可參考UILabel。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          6.6、導航欄

          導航一般在屏幕的頂部,通常導航欄右側會有返回按鈕,中央是標題。有時右側會有其他的可交互的控件。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 在導航欄中間顯示當前視圖的標題。
          • 避免在導航欄上放過多的控件。
          • 不要包含多段式面包屑導航。
          • 導航欄標題應該給按鈕留下足夠的空間。
          • 使用標準的返回按鈕。
          • 開發請參考 UINavigationBar 這份文檔

          6.7、滾動視圖(Scroll Views)

          滾動視圖讓用戶可以瀏覽到更多的內容,用戶可以用滑動或者輕拂來進行瀏覽信息。

          • 不要將一個滾動視圖嵌套到另外一個滾動視圖當中。
          • 通常,一次只顯示一個滾動視圖。
          • 開發可以參考文檔:UIScrollView

          6.8、標簽欄(Tab Bars)

          標簽欄通常出現在屏幕頂端,并且用戶可以借此快速切換。邏輯上標簽欄可以包含無限多的 Tab,但是可見的標簽數量,會根據實際顯示尺寸而有所不同。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 通常標簽欄展現的是平鋪的信息層次結構。
          • 選項卡功能不可用的時候,不要刪除或者禁用該選項卡。
          • 嚴格使用標簽欄來進行導航。
          • 通常使用 3 個到 5 個選項卡。
          • 使用圖標來標示標簽欄,會更加通俗易懂。
          • 具體開發可參考文檔:UITabBar

          6.9、表格(Tables)

          表單通常會以單列的樣式存在,干凈有效地呈現大量信息。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          • 考慮表單的寬度,避免難以讀取。
          • 盡可能快速地顯示表單的內容。
          • 在加載的時候,結合活動指示器呈現進度。
          • 具體參考開發文檔:UITableView

          在具體的表單條目的設計上,也有詳細的規格要求。

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          默認樣式,左側可放置圖片,并且標題也是靠左對齊的。具體參考文檔:UITableViewCellStyleDefault 以及 UITableViewCell

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          副標題樣式。這是包含標題和副標題的一種樣式,兩者靠左對齊,上下排布。具體參考文檔:UITableViewCellStyleSubtitle 和 UITableViewCell

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          Value1 樣式。標題靠左對齊,副標題靠右對齊。具體參考文檔:UITableViewCellStyleValue1 和 UITableViewCell

          想做好車載設計?先掌握這份 Carplay 設計規范(下)

          Value2 樣式。標題和副標題文本都靠右對齊,具體參考文檔:UITableViewCellStyleValue2 和 UITableViewCell

          • 保持文本足夠簡介,避免無法完整顯示。
          • 點擊選擇之后,記得顯示反饋。
          • 為非標準表格設置自定義樣式。


          文章來源:優設 作者:陳子木

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




          值得反復學習的「交互設計5大定律」

          資深UI設計者

          推導

          在介紹重新定義的交互設計定律之前,我們先來回顧一下經典的《交互設計 7 大定律》

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          費茨定律告訴我們要節省操作時間應該怎么做:放大目標對象,減小目標距離。

          席克定律告訴我們要節省決策時間應該怎么做:盡可能的減少選項的數量。

          米勒定律告訴我們人類記憶的上限,所以要將信息數量控制在 4±1 內。

          接近法則告訴我們相鄰≈相關,所以要根據信息親密性組織其位置關系。

          泰思勒定律告訴我們復雜性是守恒的,我們要平衡復雜性的天平向誰傾斜,以實現整體效益最大化。

          防錯原則告訴我們用戶出錯是不可避免的,我們只能減少并降低其犯錯的可能性。

          奧卡姆剃刀原理告訴我們如無必要,勿增實體,設計要盡量的簡約。

          不知道你看完以上 7 個定律有什么感受,我的感受是,他們彼此之間有些重合(奧卡姆剃刀原理、席克定律、米勒定律都在傳達信息要精簡),但用其概括交互設計的精髓,又覺得不夠完整(做到這幾點就夠了嗎?),整體交互設計的精髓要義并沒有表達地很清楚(如何用一句話來概括交互設計的目標?)

          帶著這幾點疑問,我重新去思考到底什么是交互設計的底層設計目標?到底哪些交互設計定律能更好的體現其本質?以下是我思考的結果:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          交互設計的終極目標是改變和影響用戶的行為,達到期望的業務結果,比如下單率、搜索率等結果指標,結果指標因產品而異,不具有普適性,不可一言以概之。而在交互設計的過程中,以交互設計定律為指導的過程指標是通用的,幾乎可以說放之四海而皆準,我把這四個過程指標概括為四字箴言:少快好省。怎么理解呢?

          • 所謂少,就是信息功能要精煉,要一目了然,要盡可能減少功能/信息的復雜度。
          • 所謂快,既是性能也是效率,指的是要盡可能快的響應用戶的操作,達成用戶目標。
          • 所謂好,就是產品的設計必須達成行業一流的設計標準,讓用戶用的順手、滿意。
          • 所謂省,就是省心省力省時,能夠幫助用戶節約時間,降低操作和認知負荷。

          基于這樣的過程指標,我挑選了 5 個設計定律來進行設計指導,下面我們逐一來看。

          奧卡姆剃刀原理

          奧卡姆剃刀原理告訴我們:如無必要,勿增實體,即“簡單有效原理”。對于工業產品適用,對于軟件類產品也是如此。因為任何增加的非必要信息和功能,都會帶來生產/維護成本的增加,以及用戶認知/操作成本的增加。在現今這個注意力稀缺的時代,復雜會讓人望而卻步,也容易使人迷失,而精簡的產品更利于人們的理解和操作。

          典型案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          小米的電視遙控器設計和傳統遙控器設計相比,對奧卡姆剃刀原理的運用非常極致,相信大家都可以感受到精簡前后的視覺/操作/認知負荷的降低。

          我們再來看一個互聯網產品設計的案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          19 年初,外銷瀏覽器做了一次視覺煥新大改版,從交互結構到視覺界面變化都比較大,所以我們就增加了新版本的滑屏引導,告訴用戶有哪些界面及功能的變化,結果新版灰度期間,信息流滲透率下降了 33%,搜索下降了 18%,經過仔細的數據排查,發現都是滑屏引導惹的禍,當把滑屏引導去掉后,搜索和信息流的數據都恢復正向了。

          19 年底,我們做的另一個運營活動也經歷了類似的教訓。當時錦鯉很火,我們就做了一個錦鯉大作戰的小活動,畫面精致,獎勵也比較誘人,但是發現活動上線后轉化率效果卻不及預期,我們再次把矛頭對準了蒙層引導,通過去掉蒙層引導,CTA 按鈕場景化,并增加微動效,轉化效果立刻得到了提升。去掉不必要的引導,讓界面自己會說話,這也是奧卡姆剃刀原理的一個體現。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          米勒定律

          米勒定律告訴我們:人們工作記憶平均能記住的元素數量僅為 4±1。所以我們在設計時,首先要運用奧卡姆剃刀原理,盡可能的去做減法,盡量將數量控制在 4±1 的范圍內。如果選項較多,且減無可減時,就需要對信息/選項進行分類和分組,保證類別的數量在 4±1 的范圍內。

          典型案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          對于像手機號、銀行卡號、身份證號這種類型的信息,因為其固有的信息長度無法做精簡,所以在信息組織時就會采取分組的方式,保證分組的數量控制在 4±1 的范圍內。

          另一個案例也是關于我們的外銷瀏覽器:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          左一是改版前的頁面,功能有 12 項之多,且產品認為減無可減了。我們的交互設計師通過對頁面功能使用頻度及產品功能的重要程度進行分析,將功能劃分為了三大類:重要功能,常用功能,必備功能。然后通過強化、保持和收納的方式將其進行右圖所示的呈現,界面復雜度迅速降低,功能清晰度和操作便捷度顯著提升。

          多爾蒂門檻

          多爾蒂門檻告訴我們:系統需要在 400ms 內對使用者的操作做出響應,這樣才能夠讓使用者保持專注,并提高生產效率。

          先來看一組模擬的響應效果:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          △ 圖片來自作者「超人的電話亭」

          從這組圖片可以感受到,當圖片在 400ms 內時,是勉強可以接受的,但當時間延長到 600ms 及以上時,人們就會感受到明顯的延遲、等待和卡頓感。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          多爾蒂門檻對響應時間的上限給出了參考,而后續的研究則給出了更細致的響應標準,比如元素的點擊反饋應控制在 0.1s 左右,盡量不要超過 0.14s,單個元素入場退場時間應控制在 0.2s 左右(入場一般比退場稍慢),而頁面的轉場時長根據頁面大小和轉場動效的復雜度盡量控制在 0.3s-0.4s 之間。只有響應時間符合上述標準,才不會讓用戶對產品的流暢性有所懷疑。

          雅各布定律

          用戶將大部分時間花在別人家的網站(產品)上,而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們:作為設計師,我們必須要多研究把玩各種 App,這樣我們才能夠對當下產品的設計趨勢有更直觀的感受。

          對于新入行的設計師,我會建議大家好好研究一下 ios 和 android 的 OS 規范,了解平臺的特性,同時再翻翻下面這些書籍,了解各種常見的設計模式,豐富自己的設計組件庫。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          此外,在做某種特定類型的產品設計時,也非常有必要做行業及競品分析,這樣才能確保我們在做產品設計時,可以延續用戶的主要視覺及行為習慣,減少用戶的學習及使用成本。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          以視頻 App 為例,行業內的頭部產品在產品框架及元素布局上都具有高度的一致性,這也是雅各布定律的一個體現。

          可感知性原則

          操作前有預期,操作時有反饋,操作后可撤銷。這是十年前我入行時接觸到的一句話,我不知道是誰提出來的,但卻是這些年我做交互設計最重要的一條參考原則,我將其簡單命名為可感知性原則。

          操作前有預期,指的是要符合視覺認知原理,符合行業設計習慣,讓用戶一看就懂。

          操作時有反饋,指的是操作時要即時反饋,就近反饋,并且反饋合理。

          操作后可撤銷,指的是任何操作都盡量讓其可撤銷,讓用戶無后顧之憂,安心探索。只要存在用戶行為的交互,這個準則都是可以用來檢驗的,以下圖為例。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          當我們想要刪除某張照片時:

          操作前有預期:工具欄位于默認的底部位置,有刪除圖標+文字明確示意的功能按鈕,讓用戶一看就知道應該選擇哪一項操作。

          操作時有反饋:點擊刪除按鈕時,刪除按鈕有一個灰色的點擊態,隨后馬上出現一個確認彈窗,而且是就近位置出現,確認彈窗上提示簡單,按鈕用的是 CTA 的形式,操作交互一目了然。

          操作后可撤銷:當用戶確認刪除后,照片消失,但是還可以去最近刪除的文件夾中,恢復照片。

          結語

          到這里,交互設計 5 大定律就全部介紹完成了,圍繞交互設計的過程指標,少、快、好、省依次展開,給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          也是為了滿足米勒定律的 4±1 原則,我將交互設計定律濃縮成了 5 條,如果在此基礎上加一條的話,我會在「好」的指標下,增加一條「格式塔原理」,它包含的 7 大設計原則。格式塔原理是做設計排版的基石,絕對值得所有設計師反復學習、研究和運用。

          文章來源:優設  作者:VMIC UED.Joyce

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

          微信朋友圈被“折疊”,透露出怎樣的產品設計思路?

          資深UI設計者

          微信作為一個用戶體量龐大的一個熟人社交平臺,在我們日常生活和工作中都會用到;而微信經過不斷地發展也更新了很多新的社交功能,并且具有商業價值,朋友圈也是其中一個;本文作者分享了關于微信朋友圈被“折疊”的產品設計思路,我們一起來看一下。

          最近微信朋友圈被“折疊”的設計引起了網友熱議,褒貶不一。

          有的人認為每天不用被鋪天蓋地的刷屏廣告“淹沒”了,有動力多刷一會朋友圈,終于有機會在茫茫廣告里找到朋友的動態;但也有反對的聲音,認為微信管的太寬了,如果不需要看,用戶早就主動“屏蔽”了,希望微信團隊可以改回來。

          微信背靠10億用戶,每一個小的設計改動,都有可能引起“全民轟動”;面對如此龐大的用戶群體,以及千人千面的需求,微信團隊表示:

          “朋友圈是用戶分享和關注朋友們生活點滴的空間,一直以來批量或高頻次發送營銷性信息的行為,存在侵擾用戶安寧、減損用戶朋友圈體驗的問題,(因此)被較多用戶投訴?!绷硗?,團隊還表示:“根據《微信個人帳號使用規范》,此類內容(營銷信息)一經發現,騰訊將根據違規程度對微信帳號采取相應的處理措施,包括但不限于折疊內容、將內容處理為僅發布者自己可見等?!?

          當產品面臨質疑時,如何從眾多的聲音中,抽絲剝繭,刪繁就簡,找到與產品定位真正匹配的核心需求?通過下述三方面思路分析,我們一起來看看要如何抓住產品的核心用戶。

          一、共情

          解讀他人的真情實感,即為共情,又叫做同理心,是體驗他人內心世界的能力。

          它包含三個方面的含義:

          • 觀察、收集用戶的言行舉止,深入用戶內心去體驗他們的情感和思維;
          • 透過用戶的經歷和個性,理解他們的本質性需求;
          • 運營設計語言和信息傳達技巧,把對用戶的共情傳達給用戶,并影響用戶取得真實反饋。

          最近娃哈哈集團和斗羅大陸熱門IP聯合,推出新版低糖風味酸奶飲品,深度共情年輕消費群體。那么,他們是如何做到的呢?

          結合了騰訊視頻熱播國漫《斗羅大陸》最新劇情,女主小舞“獻祭”而死,而廣告恰恰演繹了,喝了酸奶飲品小舞即刻“元氣回歸”。

          首先對觀眾遺憾的心情,給予及時“補償”;其次,運用廣告語言,分別讓男女觀眾產生強烈的帶入感,比如:

          • 小舞說:“哥,你真不愧是唐門營養師”。(滿足男性用戶的成就感)
          • 唐三說:“每一種滋味都是為你”。(滿足女性用戶的安全感)

          我們在來看看小紅書上面的部分評價內容,提到劇情、口味,低糖、適合誰喝,顏值高,均透露出對飲品的關注和喜愛。

          娃哈哈集團借用《斗羅大陸》IP作為橋梁,將用戶渴望找到安全感、成就感的自我體驗,寄托在自己的產品上,叫做“心理投射”式營銷。

          所謂“心理投射”說得直白一些,就是“借物傳情”,“借景抒情”,人們把自己內心的感受和內容,通過客觀世界反應出來;因此,常??梢詮囊粋€人對他人對看法、以及自身的興趣愛好,推測這個人的心理特征和意圖,而不僅僅通過語言來解讀他們的需求。

          二、不自覺欲望

          在訪談的過程中,提問是研究用戶動機的可行性方法之一,但訪談不僅僅是語言交流,還包含肢體語言、微表情以及隱藏在內心深處的沖突和欲望,這些需求屬于用戶的不自覺欲望。

          如果說自覺欲望是用戶清晰的知道自己想要什么,那么不自覺欲望,就是連用戶自己也說不清,道不明的欲望;如果把用戶的自覺欲望比喻成冰山表面,不自覺欲望就是冰山深入海平面以下的部分。

          比如,明知道吃蛋糕要長胖,但是還是忍不住要吃;明知道熬夜對身體不好,但是還是忍不住刷手機到午夜。

          那種“忍不住”的感覺就是人們最深層的需求,吃甜食、刷手機可以讓人心情愉悅,讓人產生放松的感覺;而“控制”需要人們用意志力去規范,而非出于“本性”。

          娛樂性產品重在激發人們的不自覺欲望,釋放本性,比如《和平精英》為了讓新手盡快融入游戲,自動匹配“機器人”和玩家戰斗,讓玩家贏得“很爽”,等玩家對游戲產生情感依戀,再逐漸增加和真人匹配的戰斗。

          而教育類產品要運用用戶本性,鼓勵用戶形成良好自律性;比如在記單詞第一天,寫下學習計劃并鼓勵分享出去,在為用戶細化目標的同時,“分享”行為形成一種“自我形象壓力”,設計者撬動用戶內心,向往自己變得更好的本性,慢慢讓用戶形成學習習慣。

          三、透過數據看本質

          以上我們從“釋放-壓抑”的縱向深度上討論了用戶面對自己欲望的處理方式,接著,我們在“自我-適應”的橫向緯度來看看用戶的處理方式;在社會中,人們在歸屬群體和獨立自我之間進行權衡,兩者向來也是此消彼長的關系。

          比如,年輕群體在選擇“追求自我”還是“適應環境”方面,也有了新的突破和巧妙的和解,具體體現在95后大多屬于獨生子女;他們是互聯網最原始的居民,童年伴隨著網上社交一起成長,更樂于在互聯網上尋找志同道合的朋友,而非身邊的熟人社交;形成一種“獨而不孤”的社交氛圍,在“獨處”和“融入”環境方面相得益彰。

          通過上述縱橫兩個緯度的標尺,我們可以建立消費動機分析模型,來解讀大數據行為標簽背后消費群體的渴望。

          以B站為例,通過分析B站用戶的興趣標簽,“順藤摸瓜”式的洞察B站用戶群體的核心需求;數據清洗后,我們收集到以下12個緯度的興趣熱門標簽:

          游戲高玩、漫畫達人、生活記錄、音樂家、好奇心學霸、吃貨軍團、時尚潮人、運動健將、鏟屎官、數碼發燒友、愛豆粉絲、汽車科技。

          根據對上述興趣的理解,每個標簽可以按照如下表格進行拆分解讀,最后對每種傾向進行統計。

          合計出心理動機傾向最明顯的三個象限是:樂享釋放、融合溝通、活力探索。

          而這些心理特性,正是符合B站作為24歲以下,年輕用戶最愛的,文化社區的產品定位,把B站打造成用戶釋放自我、融合溝通、活力探索的平臺。

          B站的激勵機制,極大鼓勵up主的創作細胞,同時開發了他們探索的內在需求,為B站產出海量內容;而這些內容更好的滿足了廣大用戶樂享釋放、融合溝通的訴求,形成“自產自銷”的良性循環。

          2020年,B站彈幕頻率出現最高的詞語是“爺青回”,折射出年輕群體對青春、活力生活的渴望與留念;它頻繁出現在B站彈幕上,也從另一個側面反應出在B站是可以讓這樣的情緒棲息的場所,是B站深根目標用戶,并獲得良好反饋的體現。

          四、基于情感共鳴的取舍之路

          最后,我們再來看看陪伴我們每個人的微信,產品定位很明確的指出是:“用戶分享和關注朋友們生活點滴的空間”,舊版微信的開屏畫面,暗示著“孤獨”的個人與世界“相連”的深深渴望。

          而剛剛升級的8.0版本,開屏動畫簡單的幾句:“我看見你,我看見笑臉,我看見煙花,我看見一首歌,我看見你看見的”迅速讓用戶產生共鳴感,拉近產品和用戶之間的距離,激活用戶的“有你陪伴不孤單”的不自覺欲望;而新功能鼓勵用戶分享情感,情感外化的設計也很快上來熱搜。

          朋友圈自動折疊的內容,通常是用戶直接復制、粘貼的內容;對于眾多微信創業者來講,思考如何做出有個人特色IP的朋友圈,想辦法不斷輸出優質內容來打動你的朋友,才是事業成功的制勝法寶。

          微信團隊在龐大的用戶群體中,做出與產品定位匹配的“取舍”決策,也將對產品的穩定發展,具有深遠意義。

          文章來源:人人都是產品經理  作者:設計師的翻車日記

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


          二次確認的設計思路

          資深UI設計者

          二次確認的主要作用是防止誤操作,以及警示操作帶來的后果,避免用戶無意之間執行了本不想做的操作。從用戶流程圖中我們不難看出,二次確認是一種打斷用戶流程的設計,只是迫不得已的折中方案。所以在是否使用,如何使用上需要有一定的考慮,否則會適得其反。

          從這3個方面,幫你掌握二次確認的設計思路

          我們可從操作的可逆性,嚴重性,復雜度和操作頻率進行前期分析,即用戶的操作是否可以撤回,是否會造成嚴重或有漣漪效應的后果,是否經常做這樣的操作。下文將操作的危險程度分了三個級別,對不同類型的二次確認模式進行說明。

          低危操作

          對于低危操作我們可以不設置二次確認,或只在危險程度升高時再和用戶確認。

          1. 操作基本無害,不設置二次確認

          一些非常常規,很好注意到變化,或者容易回滾的操作無需配置二次確認。例如新建文件夾,復制文件,完成一個代辦事項等。

          從這3個方面,幫你掌握二次確認的設計思路

          2. 達到危險性后再進行確認

          這種場景比較特殊,我們用一個例子說明。比如當用戶處于一個有兩層級別的托盤,第二級的新表單沒有完成填寫,就點擊了表單托盤的關閉按鈕。我們可以讓頁面滾動到用戶沒有完成的地方,通過條幅提示,標紅或閃爍等交互方式提醒用戶。按照此時危險級別,我們僅需采用低強度的溝通方式,讓用戶明白操作的問題即可。

          從這3個方面,幫你掌握二次確認的設計思路

          然而假如用戶點擊的是瀏覽器的標簽頁關閉按鈕,其危險級別就很高,系統很可能拋棄用戶未完成的表單導致數據丟失。此時我們可以通過前端技術,在用戶點擊瀏覽器的刷新或關閉按鈕時,彈出二次確認對話框。

          從這3個方面,幫你掌握二次確認的設計思路

          中危操作

          日常的一些操作,如提交表單,刪除文件,發送交易等,若被用戶在沒有明確后果的情況下執行,會造成難以補救的不良影響,但后果不至于完全不可挽回。我們可以在此危險范圍內,配置不同形式的二次確認流程。

          1. 即時撤銷

          撤回提醒一般針對操作頻率高且容易回滾的操作。例如在線上網盤刪除或移動文件后,通常會彈出一個 toast 提示,告知用戶成功執行了操作,并顯示“撤回”按鈕,讓用戶在誤操作時可以快速回滾。

          從這3個方面,幫你掌握二次確認的設計思路

          2. 提示信息

          提示信息是二次確認最常見的一種,適用場景廣泛。系統會在用戶執行操作時打斷,提示后果并詢問是否繼續。其界面表現形式比較豐富,例如購物時的結算賬單頁,轉賬時的確認頁,退出程序時的文件保存彈窗等等。

          從這3個方面,幫你掌握二次確認的設計思路

          3. 垃圾桶或類似的臨時承接結構

          臨時承接結構適用于有不良后果但操作頻次高的場景。如果用戶經常需要做一些有破壞性的操作,我們可以在系統中布置一個用來臨時承接這些操作的結構,而不直接執行破壞性操作。如此設計有兩個優點:用戶不僅可以隨時反悔,而且避免了系統總是打斷用戶的高頻操作。

          從這3個方面,幫你掌握二次確認的設計思路

          例如大部分操作系統刪除文件時只是將文件移動到垃圾桶,并不會造成實質傷害。二次確認只會出現在用戶需要清空垃圾桶時。這便通過臨時承接結構緩沖了用戶的破壞性操作,同時避免了頻繁打斷用戶。

          高危操作

          執行后果極其嚴重且無法挽回的操作,例如刪除賬號,刪除虛擬幣錢包,抹除設備數據等時,系統需要用戶仔細想清楚,完全理解即將發生的事情并接受后果,此時可采用攔截性強,步驟多的確認方式。但請務必注意,即將列舉的幾種設計會給用戶帶來一定程度的挫敗感。除非萬不得已,盡可能考慮上文中的設計方式。

          1. 按鈕倒計時

          在確認按鈕上倒計時,給用戶一段冷靜的時間,倒計時完成后按鈕才變回可用狀態。

          從這3個方面,幫你掌握二次確認的設計思路

          2. 多次詢問

          多次詢問是一種較為粗暴的確認形式,通過不斷地警告讓用戶確認。大家可能依稀記得蘋果手機的重置流程:首先需要輸入蘋果賬號密碼和設備密碼驗證身份,再通過兩層二次確認彈窗,系統才會開始抹除數據。

          從這3個方面,幫你掌握二次確認的設計思路

          3. 勾選并接受后果

          將說明部分拆解成復選框,用戶依次勾選并接受后果之后,執行按鈕才會變成可用狀態。通常用于有嚴重或復雜連帶后果的操作。例如刪除虛擬幣錢包時,軟件會讓用戶接受:未備份密鑰的資產將永久丟失;沒有服務商可以找回資產;軟件方不承擔任何連帶責任。

          從這3個方面,幫你掌握二次確認的設計思路

          4. 輸入操作對象名稱

          常見于底層目錄的刪除等操作。用戶需要正確輸入操作對象的名稱才能執行,步驟較為繁瑣,非常耗費用戶精力,但很大程度上可以規避用戶操作錯誤的對象。

          從這3個方面,幫你掌握二次確認的設計思路

          5. 冷靜期(非二次確認)

          當注銷臉書等賬號后,服務會將賬戶信息繼續保留一段時間,若冷靜期內用戶重新登錄,賬號信息會自動恢復。冷靜期的設計原理和 2.3 節介紹的臨時承接結構有異曲同工之處,其并不屬于二次確認的范疇,但針對高危操作給予了用戶反悔的余地,故補充在這里。

          從這3個方面,幫你掌握二次確認的設計思路

          注意事項

          無論是從人本主義還是功能的角度,二次確認都應讓用戶能夠快速理解彈窗的意圖并作出判斷,減少使用中的挫敗感。下面羅列了一些能夠提升使用體驗的設計點。

          1. 文案的編寫

          無論是從人本主義還是功能的角度,二次確認都應讓用戶能夠快速理解彈窗的意圖并作出判斷,減少使用中的挫敗感。

          標題文案為簡明的疑問句。

          用戶映入眼簾的應是一個問題,也就是程序為什么打斷了用戶,需要用戶確認什么操作。同時標題的內容不宜過長,對操作后果的詳細解讀可作為描述信息放到彈窗內容中。

          從這3個方面,幫你掌握二次確認的設計思路

          不要強加說明語句。

          盡可能減少常規型二次確認打斷用戶的時長,如果能夠用一句簡單的標題講清楚,則無需增加說明,讓用戶快速理解,快速決斷。

          從這3個方面,幫你掌握二次確認的設計思路

          按鈕文案指明操作后果且無歧義。

          有些操作比如“取消訂單”中包含了“取消”一類的字眼,為避免歧義,按鈕的文案應盡量不使用“確定/取消”??蓪⒉僮鲙淼暮蠊苯訉懺诎粹o上,減少誤會。

          從這3個方面,幫你掌握二次確認的設計思路

          2. 避免濫用

          在設計時不僅需要從操作的可逆性,嚴重性,復雜度和操作頻率來考慮配置何種形式的二次確認,甚至繞開或不配置二次確認,盡可能減少對用戶的驚擾,否則不僅降低體驗還可能會讓用戶忽略真正的威脅。這里舉三個日常很容易接觸到,通過流程優化避免了二次確認的例子:

          免密支付:

          用戶可以設置在一定數額范圍內轉賬時不進行密碼確認。在此數額內的交易即便發生異常,損失也比較輕微,而且平臺可以幫助追回。

          從這3個方面,幫你掌握二次確認的設計思路

          草稿:

          當用戶在聊天軟件的對話中輸入了內容,或是在郵件服務上新寫了郵件,但沒有發送就退出了程序,用戶重新啟動后,大部分聊天或郵件服務會以草稿的形式將寫入的內容保留下來。既避免了退出時的二次確認,也沒有造成數據丟失。

          從這3個方面,幫你掌握二次確認的設計思路

          底層的版本控制功能:

          蘋果電腦的操作系統內建了文檔版本控制功能,用戶關閉文檔時系統不再詢問是否需要保存,因為文檔每隔一段時間就會在后臺自動生成一個版本。用戶可以隨時回滾到舊版本,甚至從舊版本中拷貝內容。

          從這3個方面,幫你掌握二次確認的設計思路

          結語

          與任何界面設計的原則相同,二次確認的設計重點仍然是人文關懷。要讓用戶從容使用系統的同時,避免觸發無意的操作。本文的由來在于做項目時發現目前網絡上對二次確認模式的講解大多偏理論,所以后期對該界面模式做了一些梳理并分享出來,希望有幫助到大家!

          文章來源:優設  作者:京東設計中心JDC

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


          B端產品設計的潛規則

          資深UI設計者

          那些關注用戶體驗的人們經常問我一個問題:什么是B端的用戶體驗?它與C端的用戶體驗有何不同?作為一名過去5年多主要從事B端IT產品的設計師,在這里給大家講述一些我的想法。

          首先,B端產品通常有2種類型:企業內部產品(Internal Solutions)和企業對企業的服務產品(B2B)。

          企業內部產品的用戶體驗設計有一些獨特性:

           

          你的工作(可能)永遠與你的作品集無緣

          很遺憾,幾乎所有企業內部產品或項目都被嚴格的保密協議(NDA)保護著。

          絕大多B端項目都是為特定用戶提供的專門內部流程。這意味著除了那些每天盯著它用的用戶,其他任何人都可能不會看到你的設計。即使你設法獲得了將其放入自己作品集的權限,也需要抹掉所有敏感的數據才行。

          不過幸運的是,大多數有足夠能力來構建自己的定制IT解決方案的公司通常規模很大,而且它們的品牌可能帶有足夠的“影響力”,這樣,項目身價得以抬高,也能讓設計師進入面試的下一步流程。

           

          測試對象雖然意愿很高,但總是很忙

          設計企業內部所用產品的優點:你的未來用戶將會是你的同事們。因此,在進行可用性研究時,你無需擔憂任何層面的法律問題。另外,由于大多數內部項目都是為了優化和改進現有的工作流程,你的用戶往往會非常愿意配合你的調研工作。因為設計不當的產品讓他們的工作飽受折磨,因此盡早獲得反饋對他們來說是最有利的。

          但這其中的弊端是,由于你的同事們需要平衡全職工作,你很可能無法占用他們的寶貴時間。如果你能解決這個問題,他們通常會提供比您預期更多的反饋。

           

           

          關于B2B的一些潛規則

          您可能無法(完全)滿足最終用戶

          對于C端產品,如果太丑或不好用,消費者可以拒絕使用。而B端產品即使學習成本比較高,但企業仍然可以“命令”所有員工學習這些用于開展業務的專用軟件。

          B2B產品最終將出售給業務決策者,然后再推給(最終)用戶。他們更關心的是量化提升效率(efficiency)和安全性(security),同時預防錯誤(preventing errors)。大多數組織都在尋找一種解決方案來替代和/或優化現有流程。

          這并不是說企業軟件不應以用戶友好為目標,但通常情況下,只要能夠實現某些被企業視為至關重要的目標,其他能省則省。對底線(bottom line)的影響有時會成為最重要的因素。

          全球各大企業的用戶體驗設計領導者仍在爭奪一席之地,以證明優質設計的價值。不幸的是,許多企業的用戶體驗設計師只能在滿足業務目標、技術要求和用戶需求之間無奈徘徊。

          像在大多數項目中一樣,在企業領域里,如果可以證明更好的用戶體驗可以量化地提升生產率,比如可以節省金錢,這樣你就有了一個絕佳的機會和挑戰。

           

          被“鯨魚用戶”左右

          如果你在B2B領域工作,可能會很熟悉“鯨魚用戶(whales)”的概念。通常,他們是帶給我們最多收入的客戶,因此在某個特定產品的路線圖中擁有極大的影響力。由于較少的鯨魚用戶簡化了需求收集和確認過程,有時你的工作會非常順暢,但不幸的是,這也可能導致你忽視掉很大一部分用戶群體的意見。

          我們見過諸多“被需要”的功能看起來并不適合大多數工作流程的案例(因為這是鯨魚用戶的特性)。通常,決策只是為了“去執行”,因為銷售團隊已經在下一個版本中承諾了這一點,而這個核心客戶占產品收入的40%。這通常會使得產品對于其他用戶而言就有些隨機且不合邏輯了。

          通常而言,在設計師進入管理層之前,他們很難影響到銷售團隊等強大的利益相關者的決策。潛在的利益沖突無疑是需要整個設計團隊共同去面對的,大家需要平衡產品的長期愿景和立竿見影的“快速制勝”二者之間的沖突,以便為產品提供可拓展的設計和構建道路。

           

          企業總是在舊版系統上運行

          幾乎所有財富500強的公司都是通過并購而成長為龐然大物的。

          每一次的并購,都會將一個完全不同的系統和工作流程修補到現有的系統和工作流程中。很多開發于90年代的軟件仍在諸多大型公司中運行。盡管從概念上看,“整合一切(consolidate everything)”似乎很容易,但是協調數據庫和系統的過程著實很繁瑣,且需要足夠的時間。

          B端用戶體驗的大部分工作是將用戶從一套舊版(有時是手動)的工作流程中解放出來的艱巨工作。這涉及到對用戶目標及多個系統的深入了解,需要我們列出規劃,識別冗余和協同效應,然后將其與邊緣案例相結合,以檢驗它產出的結果是否與當前操作模式的產出一致(如果不能優化的話)。

          盡管過程并非總是如此艱難,B端軟件依舊比C端復雜得多,因為即使其概念是“從0開始做新系統”,其數據還是全部來自于一堆與之配套的舊系統。在系統級別上思考流程、提出正確的問題并有效記錄文檔的能力是此類項目中最有用的技能。

          我不是開發人員,所以我不知道我從Google里找的這張圖片是否是能夠準確展示典型的后端體系結構。

          我所知道的是,對于每個項目來說,開發人員都會創建一個外觀相似的圖表,該圖表展示了數據的來源和去向,它非常復雜,并且在提取,存儲和推送數據時可能受到一系列限制。

           

          條款和規則

          大多數企業或組織需要遵循一套嚴格的政策法規,并且通常受到各種管理要求的約束。

          常見的例子包括:法律/隱私要求(例如GDPR),國際化要求(例如日期格式,語言),無障礙(例如WCAG&ARIA),安全性等等。

          這些規則中的每一條都來自于某領域的專家、某類別的檢查清單(checklist)抑或是一系列更為模糊情景下的最佳實踐(這些實踐基于特定的方案和用例)。C端APP監管日漸常規化,同時,由于諸多企業或組織掌握的敏感數據極具貨幣價值,其受到的監管和審查也在不斷增加。

          當然,這個問題的答案顯而易見,你的確切問題是存在第三方解決方案的,但是由于某些規則或規定,你可能根本無法使用它。

          由于必須滿足很多這樣或那樣的標準,對于用戶來說,最終的設計往往不太理想,雖然乍一看可能并不明顯,但這也是歷史上許多政府軟件的設計看起來很蠢的原因之一。

           

          慢慢改進

          與上面的觀點類似,B端產品用戶的獨特之處在于他們對變化的抗拒心理。這意味著你需要認真思考工作流程改變后的結果,諸如使用不同的顏色,或是調整頁面內某個按鈕的位置等簡單變化。

          我們甚至還沒有談及信息架構。當你開始做信息架構時,卡片分類研究可能會告訴我們現有的導航設計是完全錯誤的,或是導航里的某些分類實際上應該嵌套到其他地方。不過你很快就會發現,當實際執行這些變化時,你將面臨巨大壓力。

          知道何時依賴自己的研究和專業知識,何時推進,何時放慢步伐是很關鍵的,這樣你才可以避免疏遠過多的用戶。畢竟對于這些用戶來說,過去幾年的工作流程已經根深蒂固,他們需要時間、資源和指導來學習或重新學習這些系統的使用。

          盡管他們可能會拒絕改變,但這絕對不代表我們作為UX專業人士就無法引領他們擁抱變化,我們要做的便是了解他們的痛點并在設計時時刻考慮到用戶的最大利益。

           

          信息密度

          許多舊版的B端app產品都有一個共同點,那就是它們的信息密度非常高。

          理想的解決方案也許是隱藏所有不必要的信息,僅顯示剛需的信息,但是“隱藏掉錯誤內容”的風險可能非常巨大,以致于不得不將其保留在不斷增加的的實體屏幕上。

          這就容易導致打包的屏幕設計極大增加了用戶的認知負擔。而這些負擔之所以被用戶“接受”,就是因為他們必須且只能“學習”如何使用該軟件來完成工作任務。

          此外,對于許多管理或監控類的產品,用并別模式查看信息進行比較和參考是非常重要的。復雜的非線性(Complex non-linear)的工作流使得界面設計更具挑戰性,因為許多選項都需要既可隨時訪問又不能妨礙其他操作。

          有個很好的例子:為什么Bloomberg(上圖)的UI看起來比Robinhood(下圖)復雜1000倍?

          結論便是,B端產品的界面里,需要犧牲留白空間以展示更多信息的情況并不少見,因為用戶經常需要查看更多信息以便完成更復雜的任務。

           

          你的機遇

          隨著公司或組織越來越依賴技術,B端產品的用戶體驗設計將成為許多公司的主要競爭優勢。

          如果你具有擁抱復雜性、平衡多個利益相關方觀點,并在約束內進行創新的能力,你便能輕而易舉的殺入B端軟件設計領域。

          隨著機器學習等諸多振奮人心的新技術出現,各種業務會帶著其龐大而雜亂的數據庫排隊等候。UX將站在如何產生有價值的見解的最前沿,以便弄清用戶想要從這些數據中獲取什么以及如何對其進行操作和訪問。

          雖然在很長一段時間里,dribbble(追波)上的精美視覺設計仍將占有一席之地,但更繁重的任務還會落在那些不起眼的B端設計師身上:比如設計電子表格、數據集、草圖原型、投入調查以及數小時與用戶和利益相關者的交談和測試。

          最終出現在用戶面前的內容可能并不完全整潔和簡單,但請你相信,在成為備受矚目的明星B端產品前,其每一處基準點都經過了UX設計師的嚴格審查。我們的用戶已經全力以赴地使用這些產品努力工作,我們的產品也通過清除一些障礙來減輕用戶的負擔,這已經很不錯了。

          翻譯:April.H  審校:戴貓子 |   UXRen翻譯組 #366譯文
          作者:Yichen He
          原文標題:《Designing for enterprise vs. designing for consumers》

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

          信息容器的歸類與應用

          資深UI設計者

          信息有各種形式,圖、文、視頻、音頻等,而承載信息的形式也多種多樣。
          本文意將信息容器進行整理歸納,以總結出一些經驗規律。



          Part 1

          ————————

          信息容器的概念


          信息容器是承載信息的載體,位于內容層。要理解信息容器的概念,首先要理解界面中的層級關系。一個界面除了豎直方向和水平方向維度,還有縱深維度。


          從底層(遠離用戶)到頂層(靠近用戶),基本上可以分為以下幾層:

          1. 背景層

          2. 信息層

          3. 局操作(各種常駐于屏幕的bar、懸浮按鈕等)

          4. 浮出層(模態類型的浮出層還需要有蒙版進行隔斷)



          本文要討論的“信息容器”,指的是信息層上,裝載信息的載體。信息的類型多種多樣,可以是文字、圖片、視頻、各種操作控件等。




          Part 2

          ————————

          信息容器的常見類型


          常見的信息容器主要有2大類:列表卡片。


          在整理案例的時候,我不禁產生了一個疑問,到底什么是列表,什么是卡片?如何界定和區分兩者?這個問題乍一聽有點無厘頭,列表不就是列表嗎,多個布局一致的狹長單元組合在一起,就形成了列表。那么什么是卡片呢?和屏幕兩側保持一定間距,帶圓角的就是卡片嗎?


          我們不妨先看看下圖案例:




          2.1 列表和卡片該如何界定?

          為什么類似的布局形式,上圖中,圖1給人感覺是列表,圖2給人感覺是卡片,圖3既像列表又像卡片?

          從內容層面來說,包含的信息類型有:文字、圖標/圖片、按鈕。幾乎沒有太大區別。

          是什么導致我們觀感上的不同呢?

          電商案例也許可以給出答案。



          從電商產品的商品列表頁中可以看到,用戶可以自主選擇兩種不同的商品展示模式:列表模式卡片模式。

          這兩種模式幾乎可以對應“列表”和“卡片”兩種信息容器樣式。完全一致的信息量:主圖、標題信息、價格信息、輔助信息,相似的展示效率(一屏展示約4.5個商品),不同的信息容器展示形式給人不同的感覺。


          單純從信息層面或者視覺層面都不能界定列表和卡片,如果多維度疊加限定又太繁瑣,因此本文給出的列表和卡片直接的區別界定是:可以自主定位關鍵線索,規劃視覺瀏覽動線。如果視覺瀏覽大方向是豎直的,那么就歸入列表范疇,瀏覽動線不是豎直而是折線的,都算在卡片范疇。



          2.2 常見的信息容器分類:

          除了上面說的,最常見的兩類信息容器:列表和卡片之外,還有另外兩種形式,分別是:無容器和復合容器。

          這些容器具體有哪些特點,我們一一來看。






          Part 3

          ————————

          列表


          列表的定義:將結構一致的信息單元在豎直方向上鋪陳下去,形成的信息集合。

          不同場景要呈現的信息側重不同。


          舉例幾種常見的列表形式:

          1. 用戶/消息列表

          2. 圖文列表

          3. 功能列表

          4. “卡片型”列表


          3.1 用戶/消息列表

          用戶/消息列表的內容結構很清晰,頭像+身份+內容提要+輔助信息。

          圖片天然地比文字更具有吸引力,視覺上的優先級排序是頭像>身份>內容提要>輔助信息。

          當然用戶可以很方便地選擇關注的對象是圖片還是文字,這體現了列表的優越性,瀏覽動線豎直,可以方便用戶根據自己想要的索引快速定位。


          這里值得討論的是頭像用方形還是圓形的問題,相信大家都想到過這個問題,同樣是社交產品,qq是圓頭,微信是方頭,這里邊有什么原因呢?

          本文嘗試分析一下,僅是個人意見,歡迎討論。



          按照理論,圓頭親切的形狀感知更加適合輕松基調的產品,方頭嚴謹的形狀感知更加適合嚴肅基調的產品。這解釋了電商類型產品(淘寶、京東)的信息通知一般都是圓頭的,匹配輕松愉悅的網購體驗,而金融類產品(支付寶)多是方頭。對于同是熟人社交類產品的微信和qq來說,qq用戶層年齡偏低,屬性相對更加活躍,更加輕松的圓頭可能更適合此類用戶。


          以iOS為例,當用戶向左滑動列表時,呼出針對該列表單元的操作。具體列表對應具體操作,操作項數量不同。


          方案A:

          優點:操作底板寬度適應文案,不會出現空間局促的現象。

          缺點:當文案字段長時,列表被推出屏幕外的內容較多,當用戶操作分心時,可能會忘記正在操作的對象,雖然這種情況極少發生。


          方案B:

          優點:操作底板固定,文案折行規則明確,既不會造空間擁擠,被擠出屏幕外的列表區域可控。


          方案C:

          優點:搭配圖標,視覺更豐富。

          缺點:圖標占據了一定高度,導致文案無法折行,列表被推出屏幕外的內容較多,與方案A類似。


          綜上,個人認為方案B是最合理的,對于文案長度的寬容度高,即便文案較長,也可以保證視覺和諧,并保留較多列表內容。


          用色策略上,使用的是為大眾所接受的“語義色”,一些具體的顏色在長期經驗積累中形成了固定的語義。


          當用戶觸發了帶有一定破壞性的操作時,需要用戶進行二次確認

          并不是所有情況都需要二次確認,二次確認的樣式也有多種。


          同樣都是模態視圖,要表達的信息也相似,都是要求用戶進行選擇,為什么有些產品選擇將對話框居中,有些產品選擇將對話框放在底部?這里涉及到關于模態視圖的相關知識點,本篇文章旨在討論信息層面的內容,模態視圖涉及到了浮出層的內容,將在下篇文章中進行詳細探討。本篇文章不做過多延展。



          3.2 圖文列表


          信息流產品一般是由圖片+重點文案+標簽(可有可無)構成。

          不同性質的產品想要突出的重點不同,根據內容的重要性權重來分配視覺占比。


          從上方幾個例子中我們可以看到:

          在圖文比例從左到右依次提升;

          圖文布局案例1-3使用了左文右圖的方式,案例4-7使用了左圖右文的方式。


          搞清楚如何圖文布局和設置圖文比例,就基本解決了資訊流頁面最關鍵的問題。



          資訊列表或稱feed流,主要根據用戶喜好定向推送內容。除了從用戶日常瀏覽、搜索等行為中提取用戶喜好信息,用戶主動反饋的信息精度更高,用戶不惜花費更多操作成本來提示產品,對內容不感興趣。


          從視覺上說:

          1、提交反饋的入口(小而淺的icon)都不明顯,有些產品用“更多”來提示用戶,有些產品用更加負面的“關閉”來提示用戶。當用戶對內容產生較為強烈的反感時,才會注意到屏蔽入口。常規瀏覽時,該圖標不會影響用戶注意力。

          2、反饋形式采用模態對話框,用戶需要選擇具體操作,是屏蔽內容或作者、還是舉報或不感興趣。

          3、對話框是否有指向性:從表意明確的角度上來說,帶有箭頭的氣泡更有利于用戶定位對象。


          從交互上說:

          反饋入口熱區較小,容易誤觸,大多數情況下,用戶不會注意和點擊該圖標,用戶是以瀏覽為主要行為。




          3.3 功能列表


          列表索引一般還是定位文字為主要形式,不同用戶的認知水平不同,圖標表意始終是一大難點,多用為輔助記憶或單純提升視覺美觀。圖標雖然是體現設計風格的重點,但是在具體情境下,如設置頁,用戶更加在意快速找到自己要找的內容,多度的圖標樣式,實際上會折損用戶的檢索效率。


          一般功能頁面或放置許多功能,常常會超過十幾項,這種情境下,檢索效率低下是一個痛點。

          如何提高檢索效率?—— 分組



          分組給用戶提供了認知線索,根據格式塔原則,用戶總是傾向于把距離近的、樣式統一的元素歸位同類。

          毫無分組顯然對于檢索是不利的,用戶需要逐一瀏覽,該情況適用于列表項無法分組時,如果有分組條件,務必分組,幫用戶節約篩選成本。


          UI界面中,列表的分割方式常見的有以下3種:

          1. 線條分割

          2. 塊面分割

          3. 間距分割



          3.4 “卡片型”列表

          在我們的固有觀念里,大圓角,不通欄,有投影的形象就是卡片。

          這種樣式也越來越盛行,許多產品嘗試將列表也用“卡片化”進行包裝。

          雖然是相當細節的點,但是精細化處理之后的結果就立刻會與批量化處理的結果拉開差距。

          產品級的風格統一來源于點滴細節。





          Part 4

          ————————

          卡片


          卡片的類型繁多:單列大卡片、泳道、內容流(兩列網格、瀑布流)、宮格


          4.1 大卡片

          從內容展示效率上來講,單張大卡片就占據占據屏幕(劉海屏)超出一半的高度,用戶需要不斷滑動屏幕瀏覽下方內容,操作成本較高。大卡片形式對內容本身,如圖片的質量要求很高。這種模式常見于圖片社區或垂類電商產品,圖片社區(如躺平)本身較為小眾、即便是UGC(用戶產生內容)單元,用戶上傳的圖片素材平均水平也較高,垂類電商(如Nike)圖片品質由編輯控制,質量高且穩定。以上類型產品不以量吸引用戶,用戶往往更加在意內容本身是否優質。用戶沒有帶著明確的目標,心智更加類似于瀏覽雜志。產品提供什么內容,就進行瀏覽。從上方案例可見,除了微信讀書之外的3款產品首頁都沒有突出搜索功能,而是以信息流呈現為主。


          與列表分割一致,卡片也有對應分割方式。


          大卡片占據屏幕面積大,理論上大卡片的內容質量是經審查的。部分產品不存在大卡片容器的交互,點擊卡片直接進入詳情頁。部分產品通過比較低調的方式向用戶收集對于內容的意見。如微信讀書長按卡片,可以選擇不再顯示該卡片內容,產品收集反饋,對于用戶喜好的描述可以進一步具象準確。長按不是一個高頻手勢,用戶觸發該手勢往往是試探性的,代表用戶確實對于內容有意見要傳達。躺平使用了簡約三小點樣式的“更多”圖標來收納不常用的收藏和舉報操作。




          4.2 泳道

          何為泳道?顧名思義,常見的滑動手勢是上下方向滑動,但有時也會出現橫向滑動的情況。一系列對象在一條橫向軌道內左右滑動,該類型的形式組合在一起,就好比泳道賽道一般。


          可以橫向滑動以查看內容的呈現形式,稱為“泳道”。泳道可以有多種形式。



          停止位置隨機:

          內容與手勢相關度高,比較自由,但停止位置隨機,不能保證停下后用戶能完美看到當前卡片的所有信息,需要用戶微調卡片位置。


          停止位置固定:

          根據用戶滑動速率,模擬物理慣性和摩擦,判斷最終展示哪張卡片,并將卡片呈現在屏幕中部,確??ㄆ系男畔⒍伎梢宰x取。這種交互更加合理,給滑動設置卡點,類似banner效果。




          4.3 雙列卡片

          雙列卡片可以看成是大卡片(單列)的另一種表現形式。這種形式更加提高了空間利用率,對于單一信息展示更加克制。平衡了效率和效果,是電商、圖片社區、視頻等產品類型的首選表現手法。


          雙列卡片可以細分為兩大類:

          卡片流(對齊)瀑布流


          卡片對齊:

          優點:規整統一,視覺動線清晰,瀏覽舒適。

          缺點:對主圖尺寸要求高,確定的比例會對商品展示有一定局限。


          瀑布流:

          優點:圖片尺寸寬容度高,滿足一定比值區間即可。保證商品的展示完整度。錯落的布局容易形成節奏。

          缺點:不容易進行比較,若要進行圖片間的對比,比較困難,視覺動線混亂。



          兩列式的卡片布局需要注意內容層與背景層的區分。

          大多數產品的背景層是淺灰色,內容層是白色,色差可以建立區分。部分產品背景層是白色,或者說取消了背景層的概念,那么要建立卡片之間的區分,就需要通過間距或者卡片加底色的方式。


          個性化推薦模塊對電商產品尤其重要,準確地將用戶可能感興趣的產品推薦出去,可以減少用戶的搜索、篩選步驟,提升購買效率和愉悅感,從而提升用戶對產品的評價。因此,不斷收集用戶的喜好相當重要,盡管各種算法已經讓產品顯得越來越智能,但依舊要給用戶留下提建議的入口。

          上文介紹了資訊類產品中,用戶如何給出對于具體信息的反饋,電商類產品原理也大同小異。


          從功能上來說,淘寶、閑魚、京東,都是通過用戶手勢(點擊圖標或長按卡片或兩者皆可)來呼出選項,用戶通過選擇來表達意見,從而使推送更精準。


          從視覺上來說,淘寶和閑魚的反饋形式類似,都是在卡片上添加一個黑色半透明蒙版,將有限的選項豎直碼放在卡片上,類似小型模態的概念(但是這里不同于嚴格的模態視圖,沒有限定用戶必須要做出選擇,用戶可以直接劃走)。而京東的邏輯不同,使用了傳統阻斷性模態視圖的處理方式,將下方卡片用蒙版遮擋,希望用戶專注于選擇。


          從阻斷感上說,京東的阻斷干是最強的,將用戶從原本的瀏覽行為中提取出來,請用戶嚴肅地做出對于當前商品的反饋。這樣收集信息的效率更高。由于選項是盛放在帶有指向性的小氣泡之上,針對性足夠,且延展性好,氣泡的高寬都可以調整,而淘寶和閑魚的處理方式,在極端情況下,如選項超過5項時,所有內容放在卡片之上,空間就很緊湊。


          這類操作比較隱晦,可點擊按鈕很不明顯,長按手勢也不常用。同樣是當用戶有明確反饋需求時,才會尋找反饋入口,一般情況下,用戶不會注意到。以用戶常態下的瀏覽行為為最優先。


          閑魚的交互做的很細致,蒙版出現采用了水波的形式,用戶抱著要吐槽的心態,這種精致有巧思的小動效在一定程度上可以緩和用戶的煩躁的心理。



          除了電商類產品,部分視頻類產品長按卡片也會呼出對應效果。

          案例1和案例2,長按卡片,都是出現視頻片段的預覽。效果類似iOS的3Dtouch,在相冊中按壓具體照片即可預覽。而案例3,點擊“更多”圖標,呼出操作。然而選項只有1項,不符合邏輯,單一的選項無法構成“選擇”,這會讓人有點摸不著頭腦。



          4.4 宮格/網格

          如果把界面看作是一張大網格,不同的內容占據著不同位置、不同面積的頁面區域。

          除了我們已經熟悉的“有序”布置,如從上到下依次排列內容(大卡片),或者從左往右依次排列內容(泳道),還有更加靈活多變的排布方式可供選擇。

          布局的本質是分配界面面積,用以盛放內容,同時運用面積對比進行突出。除了面積對比的方式外,還有其他方式可以突出關鍵內容。





          Part 5

          ————————

          無容器 & 復合容器


          無內容的呈現形式比較簡單:內容直接置于背景層之上。減少視覺負擔,內容為主,形式為輔。

          復合容器是指超過一種的容器形式的組合,如卡片中包含列表、卡片中包含泳道等。


          5.1 無容器


          5.2 復合容器




          Part 6

          ————————

          組合與強調


          不同的信息容器組合在一起,搭建一個分工明確的界面。界面中不同的信息需要套用合適的形式去呈現。有層級就有對比,對比越大,層次拉得越開,重點就越突出。


          建立對比的策略:

          色彩對比、面積對比、樣式對比、Z軸高度對比、靜態動態對比



          文章來源:站酷  作者:doo_W

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

          B端表單設計思路總結

          資深UI設計者

          大家是不是時常困惑于,B 端的表單設計體現不出高級感?設計發揮的空間特別的少?

          那是你沒用對發力點~

          B 端:設計表單頁面時,一方面須尊重用戶的習慣,不要在不必要的地方體現差別??偨Y了 4 個思考問題:

          案例:以創建公眾號消息自動推送為例

          • 思考用戶用產品做什么事?用戶會用該產品創建公眾號消息推送,根據用戶觸發事件,推送相關信息
          • 用戶用這類產品最關心的是什么?核對觸發事件,檢驗消息發送狀態
          • 用戶有哪些思維定勢?這里就不舉例了(條件不變時,能迅速地感知現實環境中的事物并作出正確的反應)
          • 用戶用過什么類似的產品等?……

          另一方面要考慮信息層次。

          搞定了基本要素后,我們開始考慮如何表現信息層次。

          • 封裝度高、信息密度低
          • 如何判斷采用哪種布局方式

          什么是封裝度高且信息密度低?

          在了解什么封裝度和信息密度前,我先跟大家討論一下。什么是表單之間的關系。

          我所認為表單之間的關系分為 3 種:

          1. 常規結構

          優點:

          平鋪所有需要填寫的信息,適合內容項較少、內容項無法按照相關性分組的表單

          缺點:

          • 表單頁中需要填寫內容眾多,容易造成信息密度過高
          • 操作需要的視覺元素越多,用戶的認知負擔越重

          使用場景:

          當需要完成一個簡單快速的任務,輸入少量信息即可完成創建

          B端表單設計沒有高級感?那是你沒用對發力點!

          2. 樹狀結構

          優點:

          用于復雜任務時,拆解任務進行編排,適當的任務分割,可以降低用戶出錯率

          缺點:

          • 無法在表單頁中根據內容量進行合理地布局
          • 視覺噪點過多,無法兼顧頁面展示和用戶填寫效率

          使用場景:

          適用于大型、復雜任務

          B端表單設計沒有高級感?那是你沒用對發力點!

          3. 顯/隱結構

          優點:

          減少不必要(非重要)的輸入項,能適當的減輕用戶認知負擔

          缺點:

          • 雖然減輕用戶輸入負擔,但無法高效的判定任務分割的容錯率
          • 用戶確認信息有一定難度,無法兼顧頁面展示

          使用場景:

          特殊場景下使用

          B端表單設計沒有高級感?那是你沒用對發力點!

          那么用一條完整的鏈路來表達就是:

          B端表單設計沒有高級感?那是你沒用對發力點!

          了解完表單的結構關系知曉利弊后,那么應用在我們實際的場景中表達就是如圖所示:

          封裝密度高且信息密度低

          B端表單設計沒有高級感?那是你沒用對發力點!

          △ 圖中案例,僅做示例說明

          將一個復雜的任務表單,進行封裝后,看起來任務量是不是也變少了?操作起來也不是很復雜了?

          小結:

          分析了解表單的結構關系,判斷表單,尋找共性的內容,將他們封裝為一個卡片,也可以封裝成一個組。主要的目的就是減少用戶認知負擔,提升操作/使用效率。

          如何判斷采用哪種布局方式?

          關于使用何種布局方式的判斷,應從信息的復雜度和關聯性兩個維度去梳理。根據信息的復雜度和相關性模型,選用相應的信息呈現方式,選用合理的布局方案來承載詳情頁的內容。

          1. 信息的復雜度和相關性模型

          B端表單設計沒有高級感?那是你沒用對發力點!

          △ 來源:Ant Design;來源鏈接: https://ant.design/docs/spec/research-form-cn

          2. 區隔方式

          根據各個信息之間的相關性,判斷各個信息模塊之間的親密度,通常情況下,相關性強的內容盡量靠近,相關性弱的的內容盡量拉開層次。

          • 不通欄分割線:將相關內容分開;
          • 通欄分割線:將內容分成多個部分;
          • 卡片:放置一個主題;
          • 頁簽:對象描述信息最頂層組織方式,如按版本組織、按意圖組織、按階段組織;

          B端表單設計沒有高級感?那是你沒用對發力點!

          △ 來源:Ant Design;來源鏈接: https://ant.design/docs/spec/detail-page-cn

          3. 注意事項

          • 表單內容數量 <7 項,不建議分組;
          • 表單內容數量 7~ 15 個建議分組;
          • 表單內容數量 >15 個建議使用頁簽分組或采用分組標題欄展開收起樣式。

          文章來源:優設  作者:交互思維鋪子

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



          費茨定律在設計中的運用

          資深UI設計者

          費茨定律由心理學家 Paul Fitts 提出,用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動,接著你會放慢速度直至找到杯子把手,這個杯子把手的大小與你“抓住”它有著一定的關系。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          如上圖所示,如果光標現在在任易地點想要去點擊目標 target,最短路徑一定是 D,最短路徑上容錯的最長路徑是 D+W,只要水平上移動超過了 D+W 你就點不到了,而這個點擊動作所耗的時間是一個常數加上一個以 D 為正比 W 為反比的函數的和。

          讓我們來看下面這個例子:圖中右側的紅色方塊代表目標,虛線代表從起點至目標的移動軌跡,其范圍是用戶到達目標前微調以彌補誤差的區域,在右方有一個較大的目標,因為面積很大所以用戶從任意點快速點擊都會很容易,在目標上停下來之前不需要做太精細的調整。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          相反,如果把右邊紅色方塊縮小,用戶快速點擊目標會困難得多,需要做一系列精細的調整動作。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          但如果同樣大小的目標距離很近的話,因為到達目標范圍所需的初始動作很小,所以準確點擊它的難度也會小很多。距離越近, 初始動作因為幅度太大而超出目標區域的風險就越小。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          按鈕越大越容易點擊

          在頁面中,大而近的目標區域意味著用戶不需要做太精細的調整就可以輕易的到達目標。比如頁面中的大按鈕。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

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

          夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區域,相比常見頂部搜索欄更方便操作,效率更快。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          相關按鈕之間距離近點更易于點擊

          在設計注冊、登錄界面的時候,通常將「注冊」和「登錄」放到一起,不僅可以在視覺上增強用戶對他們相關性的認知,還可以減少在他們之間的距離 。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          △ 設計圖來自網絡 侵刪

          適用邊界

          費茨定律鼓勵減少距離,增加目標大小以提升用戶效率,但反過來亦適用,比如 iPhone 關機,不使用按鈕點擊,而采用滑動操作,這樣雖然降低了用戶操作效率,但增加用戶操作時間,以起到警示用戶謹慎避免誤操作的目的,所以“取消”按鈕放在底部方便點擊的地方。

          用一篇超全面的文章,幫你讀懂經典的費茨定律

          App 彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方,還有開屏廣告,廣告商希望用戶花盡量多的時間停留在廣告內容上,這時候廣告主會把“跳過”按鈕放在難以點擊的右上角,以降低用戶的誤觸機率提高轉化。

          總結思考

          按鈕越大越容易點擊,在移動設備上通常增加按鈕點擊熱區范圍以便用戶不必精準地點擊目標也能操作成功,但是可點擊對象大小尺寸要合理不要過分的大;

          讓相關的內容更靠近彼此,在視覺上增強用戶對它們相關性的認知,不過也不能過分靠近,會造成點擊壓力;

          將按鈕放置在離開始點較近的地方,比如屏幕底部易操作區域;

          屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因為在屏幕邊緣和角落位置時它們是“無限可選中”的,可以大膽操作而無需“微調”;

          定律的反向使用可以適用一些特殊場景,比如想達到某種目的而降低按鈕被點擊的可能。


          文章來源:優設  作者:印跡拾光

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


          設計師如何分析需求?

          資深UI設計者

          在工作中,我們會經常與產品經理對接需求、理解需求,站在交互設計師角度,我想分享如何分析需求,如何解決正確的問題。


          關于需求


          1、什么是需求:

          這里的需求指業務需求,即現狀無法滿足需要,從而為達到某種目標而制定的。需求主體未必只有用戶,也可能是企業、產品、運營、技術。


          2、需求的分類:

          需求可以大致分類兩大類,內部需求和外部需求。


          什么是內部需求?

          內部需求即由企業內部發起的,基于企業、產品本身商業(產品、運營)、體驗(設計、技術)等層面的訴求而提出的。

          產品的需求:由產品側發起,最為常見,通?;趯Ξa品發展目標、商業目標、競品動向、行業變化等層面考慮的需求。

          運營的需求:由運營側發起,通?;谶\營活動、玩法等層面考慮的需求。

          設計的需求:由設計側發起,通?;趯w驗、視覺等層面考慮的需求。

          技術的需求:由技術側發起,通?;趯Ξa品技術體驗、性能優化等層面考慮的需求。

          領導的需求:由公司上層發起,一般與產品經理發起的需求類似,但有時也可能臨時想法。

          ···


          什么是外部需求?

          外部需求即所有在企業以外發起的,基于對企業產品的訴求、要求得不到滿足而提出的。

          用戶需求:主要來自 C 端產品,用戶對于產品的反饋,或企業對用戶的調研而得出的需求。

          客戶需求:主要來自 B 端產品,客戶對于產品功能、性能等層面考慮的需求。

          政策需求:主要來自相關政策法規,通?;趯Ξa品合規性、用戶隱私權限等層面進行規范要求而整改的需求。

          ···


          以上列舉的是常見的需求類型,可以發現需求類型其實是多樣的,設計師對于需求類型的鑒別也需要有一定的認知。


          3、產品經理與設計師的需求分析


          在互聯網公司中,常見的職能角色主要有:產品經理、交互設計(主要分布在中型、大型互聯網公司)、UI 設計、研發、測試。但除了產品經理之外,設計師對于需求分析的了解也有很大的必要性。


          上面提到,產品是需求的主要發起者,所以理所應當有很大一部分工作量就是需求分析。設計師的工作,最常見的就是對接需求,然后將需求轉化為設計。而這個流程中的關鍵點,就是作為交互、UI 設計師,應該如何正確的分析需求。


          有人說,分析需求不是產品經理的事情嗎?交互設計師只要會畫框架框架不就行了?如果這么想,那是還沒有對“分析需求”本身有足夠清晰的認知。


          如果從用戶體驗五要素的層面對需求分析進行劃分,可以發現:

          • 戰略層告訴我們“什么是產品目標、用戶需求”

          • 范圍層告訴我們“什么方式、內容、功能可以滿足需求”

          • 結構層告訴我們“如何分布這些滿足需求的內容、功能“

          • 框架層告訴我們”如何設計這些滿足需求的界面框架、信息呈現”

          • 表現層告訴我們“如何設計符合產品定位、風格、需求特征的最終展示外觀”


          結論:

          產品經理的需求分析:側重于從商業維度考慮產品目標,考慮用戶的需求是什么,以及用什么樣的東西去滿足用戶需求。

          設計師的需求分析:更側重于基于對產品需求的正確理解,從用戶、商業的層面考慮,并采用合適的設計形式來實現。


          對齊需求:正確溝通


          在體量較小的公司,產品經理會肩負需求分析、交互設計等工作。而在體量較大或者更重視用戶體驗的公司,設計師則可以更加聚焦于如何權衡商業與用戶體驗。


          這時,擺在產品經理與設計師面前的會有 2 道鴻溝:


          1、需求理解的鴻溝:


          產品經理是設計師最常見的需求對接者,基本上是產品經理發起需求,設計師執行。這個過程是先后關系,大部分情況下也是單向傳遞的。

          當產品經理比較強勢時,即使設計師對需求有疑問,也只能當成意見補充,而是否接受很大程度上是產品經理決定。這里面的溝通很關鍵,因為這條鴻溝決定著設計師是否能夠正確理解需求背后的本質,理解本質需求就是跨越這條鴻溝的橋梁。

          正確的溝通姿勢是理解需求的第一步,而這一步基本定義了整個交互、UI 的設計走向,需求目標會影響設計師的思考方式,當沒有將需求目標透徹理解時,會使思考方式嚴重受限,比如產品需求是讓設計一個彈窗,設計師就原原本本的設計一個彈窗,而不去思考為什么要設計這個彈窗。


          我們該如何正確理解需求?


          關注本質

          產品輸出需求文檔的時候,大多會輸出初步的交互框架想法或者視覺設計建議,但在需求溝通時,最關鍵的一點是關注本質需求,避免一開始就陷進具體的需求細節。這里并非說產品提供的方案不好,事實上,有時交互方案與產品提供的方案一致,這是不可避免的,當目標相對清晰的時候,不需要為了特地設計而設計。

          但是,如果溝通需求時,過于關注細節,容易導致看不清需求的本質。所以,當與產品經理溝通時,可以多問問為什么要做這個需求,是為了達到什么目標,滿足什么需求,然后從交互體驗、創意性等角度出發,思考更好的交互方案。


          甄別需求

          無論是內部需求還是外部需求,一般都會匯總到產品經理,再由產品經理與設計側以及其他職能同事對接。需求來源多樣,特別是用戶需求,我們都知道用戶表達或反饋的需求未必是用戶的真實需求,所以在溝通時,應該甄別哪些需求不合理。設計師有用戶體驗的立場,站在不同立場上,往往可以發現不同的問題,將問題在需求階段暴露出來,避免執行過程反復調整。


          2、意見沖突的鴻溝:


          產品經理與設計師職能不同,所以立場、關注點都會有差別。

          首先,我們需要接受產品經理與設計師的意見是一定會產生沖突的,所以不要覺得為什么與產品經理怎么總是意見不合。

          其次,站在雙方的共同目標都是讓產品變得更好的角度,我并不認為意見沖突是不好的,相反,這是在前期基于雙方不同立場對于需求本身合理性的充分討論,達到雙方都認同的意見,然后共同將產品做好。


          如何跨過產品經理與設計師意見沖突的鴻溝?


          理解目標

          要看清這個問題,需要回歸到產品經理與設計師立場的差異上,設計師習慣性的會站在用戶體驗的角度上思考問題,也往往需要為體驗負責,而產品經理需要考慮更多產品策略方面的問題,有業務的 KPI。

          在溝通需求時,雙方意見不合主要是關注的目標不一致。這時,設計師不該只從體驗好與不好、這么做好不好看的角度出發思考問題,而是需要基于用戶體驗并在理解商業目標的基礎上進行溝通。作為設計師,不能盲目接受需求,更不能盲目拒絕需求。


          提前介入

          不同企業的產品流程會有一些差異,但大部分是產品需求過了幾輪評審之后,流轉到設計。此時就算設計師對需求有不同意見且產品也同意調整,在某些情況下也可能造成項目延期的風險。

          如果條件允許,設計師可以提前介入到需求評審階段,即在需求評審初期可以表達設計側對需求的看法,而需求評審可以充分進行需求討論。此外,某些產品需求(比如要求較多的設計創意發散)可能會強依賴于設計、動畫等職能角色參與,提前介入可以在需求前期有充分表達設計觀點的機會。


          拆解需求:5W1H 法


          5W1H 分析法也叫六何分析法,是一種思考方法,也是工作方法。可以幫助我們避免只關注某個細節或者具體的需求方案,而是從頂層開始思考的方式。


          大部分人都聽過這個方法,但是日常工作中不太知道應該如何使用,個人理解,這個方法在很小的需求方面不太適合。但是在處理比較中型/大型的需求、設計師對需求本身疑惑時、甚至與產品經理意見分歧時,有很大的用處。


          原因( Why):

          需求的背景是什么,產品在當前遇到了什么問題,比如數據差、體驗反饋差等。

          想要達到什么目標,是商業需求還是用戶需求?

          產品所在行業的競品情況如何,市場趨勢如何?

          對象( What):

          需求的內容是什么,基于需求的背景、目標,產品即將做什么事情?注意不能局限于做某個具體形態的事情,可以嘗試描述這件事情如何滿足需求。

          場景( Where):

          什么場景出現這個需求?

          需求的最終產物會在什么場景/頁面/模塊出現?

          時間(When):

          什么時間節點出現這個需求?

          需求的最終產物會在什么時間節點出現?

          用戶(Who):

          產品的用戶是誰?這個“誰”不是只某個個體,而是產品的某類典型群體。

          用戶需求是什么?用戶遇到了什問題?可以將用戶需求枚舉出來,但是需要注意用戶需求不一定等于產品需求。

          方法(How):

          需求所要做的這件事情,實現方式是怎么樣的?

          有沒有其他可能的方式可以更好的實現這件事情?


          思考產品提出的需求建議方案,與需求目標是否一致。設計師理解并同意以上拆分的結論,那就證明需求本身層面是沒有異議的,接下來就是需求實現層面的問題了,此時設計師的工作,就是思考是否還存在更好的實現方式能夠滿足這個需求。如果以上問題不夠明確,那么可能需求本身可能有值得商榷的部分。


          以需求目標為導向,是判斷方案是否可行的最直接方法。這種溝通方式,可以幫助設計師與產品經理構建相同目標、場景等變量信息,幫助產品經理與設計師對齊設計目標,減少后續方案返工的情況。我們通過梳理這些信息,盡管未必能夠馬上思考出方案,但是能夠初步判斷哪些方案可能不太合適。


          以上是對于 5W1H 的基本拆解,下面我會嘗試舉一個虛擬例子進行解釋。


          某天,產品經理提了一個需求:

          需求內容:

          優化用戶取消訂單的挽留彈窗。線上的樣式是底部彈窗,但是底部彈窗容易點擊“取消訂單”按鈕,且文字提示不夠清晰。初步方案是將彈窗樣式改成居中彈窗,對于用戶提醒層面會更加明顯,如下圖:

          你覺得很奇怪,把彈窗從底部改為居中樣式,盡管提示更明顯了,但是真的能夠降低用戶的取消率嗎?實際上,你甚至不清楚這個彈窗對于用戶是否有幫助,也不清楚是否能解決需求的問題。你可能會思考,假如你是用戶,會因為這個彈窗就不取消訂單嗎?

          很多產品都會設計頁面退出時的挽留彈窗,常見的如“確定退出頁面嗎? 退出/取消”,但這經常是一種為了做而做的挽留彈窗。對于這種彈窗,是否可能不僅不能帶來目標效果,反而容易引起用戶的反感。


          我們在分析需求時,可以嘗試簡單拆解一下這個需求:


          原因(Why):

          需求的背景:行業內,用戶下單之后都有取消訂單的操作,本平臺的訂單取消率處于行業中的平均水平,基于對產品的優化,希望可以降低訂單的取消率。

          對象(What):

          通過某種方式,降低訂單取消率。目前比較合適的方式是優化取消訂單的挽留彈窗。

          場景(Where):

          我的訂單頁,目前其他場景無法取消訂單,所以場景比較明確。

          時間(When):

          用戶已經下單(已支付/未支付)之后,點擊【取消訂單】按鈕后觸發挽留彈窗。

          用戶(Who):

          目標用戶:已經下單的用戶。

          用戶需求:枚舉用戶遇到的問題,如:點錯了、忘記支付密碼、不想買了、收貨地址填錯了、其他原因…

          方法(How):

          初步想法:把底部挽留彈窗改成居中挽留彈窗。

          其他想法:是否還有其他方式降低取消率?


          你會發現,這個需求其實是可以被拆解的。在這個需求里,你會發現,盡管原因(Why)很清晰,但是用戶(Who)是推導出來的結論方法(How)是有些問題的。當從用戶角度出發 ,僅僅一個居中挽留彈窗是無法解決用戶需求的。


          這里需要警惕一個點,即設計“挽留彈窗”這件事情,先不管最終產物是不是一個彈窗的形式,但是不能一開始就陷入“我要設計一個彈窗”的思維,可以先思考下,我需要通過什么方式降低用戶的取消率?


          但是我們如何發現潛在的更優方案呢?

          可以嘗試多幾個問號:用戶為什么會取消訂單?設計挽留彈窗,是否就真的對降低取消率?設計挽留彈窗,能否解決用戶在這個場景遇到的問題?是否可能不用挽留彈窗降低取消率?

          通過上面用戶需求列舉,你可能會發現部分取消訂單原因,是不需要用戶取消了訂單才能解決的,比如“地址填錯了”,并且這部分用戶在本平臺訂單取消率中占了一大部分。


          這時需求的解決方式,可能變成:

          · 通過向用戶提供修改收貨地址的入口降低訂單取消率。此時彈窗的動機不再是為了“阻擋”用戶,而是推測用戶操作意圖,幫助用戶解決問題。相比于單純的阻擋彈窗,這種處理方式的好處是:通過找到并解決部分操作的根本原因,以減少負向操作,幫助平臺更好分析用戶取消訂單的原因以改善產品體驗;


          · 如果填錯地址的用戶占了訂單取消率的很高比重,是否可能嘗試優化下單流程?比如將讓用戶更明確感知訂單地址,避免用戶選錯地址。從而通過優化本質的問題,減少用戶取消訂單的比例,也減少彈窗出現的頻次。


          最后你會發現,設計出來的方案可能會以彈窗作為表現形式,也可能通過優化下單流程降低取消率。這個方法主要是將需求梳理清楚,讓我們明確這個需求的來龍去脈,減少遺漏的問題。



          發現真正需求:雙鉆設計模式


          2005年,英國設計協會(the British Design Council)首次提出這種雙發散—聚焦設計模式,被稱作雙鉆設計模式(double-diamond design process model)。英國設計協會將設計過程分為四個步驟:“發現”和“定義”,確認正確問題的發散和聚焦階段;然后是“構思”和“交付”,制定正確方案的發散和聚焦階段?!?


          迄今為止,我們其實可以看到許多設計方法,這些方法可以讓我們避免從初始問題直接思考解決方案,避免因為忽視真正的、根本的問題而設計價值不大的設計方案。雙鉆設計模式,與上面的 5W1H 分析法都是屬于設計分析方法,也同樣可以幫助我們如何分析需求、拆解需求、解決正確的問題。

          設計師在需求分析過程中,要明確需求是某種方案,但未必是最終結果。盡管從效率層面看起來像是在倒退,因為明明產品經理已經提供了方案,而設計師還要重新思考。但實際上,這種思考方式,恰恰可以避免局限于某種職能視角思考問題。


          為什么稱為雙鉆模型?

          1、設計師會先質疑問題,接著擴大問題的范圍,思考問題之下隱藏的根本原因,接著聚焦于其中某一個問題的描述。

          2、在思考解決方案階段,會先擴展可能的方案,再進行一次發散思考。最后,將這一切重歸于某個合適的方案。

          拿到問題——發散——聚焦——發散——聚焦,看起來像是兩顆并列的鉆石,所以稱作雙鉆模型。


          發現問題

          對現狀進行深入研究。包括了解用戶特征、產品當前狀況、用戶如何使用產品以及用戶對產品的態度、競品現狀等,此時我們不會將聚焦于某一個問題,而是窮舉盡可能多的潛在問題。

          定義問題

          確定關鍵問題。這一階段,我們關注的焦點是:用戶當前最關注、最需要解決的問題是哪些,需要根據團隊的資源狀況作出取舍,聚焦到核心問題上。

          構思方案

          尋找潛在的解決方案。在方案發散階段,我們不需要過多考慮技術的可實現性。

          交付方案

          把上階段所有潛在的解決方案,逐個進行分析驗證,選擇出最適合的一個或多個方案。 我認為在這個階段,設計師可以盡可能地發散想法,但是就絕大多數國內企業、產品現狀而言,很難將多種想法一一嘗試,因為開發成本、項目時間等問題,可能導致投入產出比不高的情況,所以設計師應該提升對好方案的判斷能力。


          我們該如何使用雙鉆設計模式,同樣在此我會舉一個虛擬例子進行解釋。


          你們是內容資訊類產品,某天,你接到一個需求:

          需求內容:

          優化某應用 App 首頁搜索欄,包括將搜索欄高度加高、設計顏色更加明顯,以提升搜索欄的點擊率。

          需求背景:

          對比了同行業競品,發現競品的搜索欄點擊率比我們高了20%。我們的搜索欄點擊率為 5%,而競品為 20%。同時,通過對比發現,競品搜索欄高度更高,搜索欄顏色更加明顯,除此之外,頁面其他信息區別不大。


          初步分析:

          這個需求問題很明確,就是我們搜索欄點擊率比競品低。但這個問題歸因真的全因搜索欄高度、設計樣式的影響嗎?

          其實未必是這個原因,搜索欄的點擊行為本身更傾向于目的性點擊,也就是說有相對明確的目的去點擊,而目前高度雖然不高,但是足夠明確。


          采用雙鉆設計模型分析:



          通過雙鉆模型“發散——聚焦”的分析和驗證,我們發現最終解決方案不僅僅是最初的方案,這四個階段不是孤立存在的,而是彼此聯系。當然這種舉例是為了更加便于理解,實際項目中一定會遇到很多問題是很復雜且很難順利解決的。但是這種設計模式幫助我們減少用局限性的眼光進行設計,發現正確的問題,發現正確的解決方案。



          分析思維:結構化思維


          首先,什么是結構性思維?


          有人這么解釋:以事物的結構為思考對象,來引導思維、表達和解決問題的一種思考方法,邏輯框架像金字塔結構,以上統下,歸納總結。


          我理解中的結構化思維,是靈活可變的。比如上述提到的的 5W1H ,就是結構化思維的一種,因為這里體現的是一種結構,并非必須 5W+1H ,在合適場景也可以演變成 5W+2H 等。


          當我們面對一個需求時,我們是如何進行分析的?出了方案應該如何和其他人描述?如何判斷方案的合理性?


          一種人看了需求,了解需求概況,然后開始找參考找靈感,找到相同頁面類型的,然后看看有沒有什么可以借鑒(抄)的,開始發散思考表現和形式,提出的方案不清楚優劣性。這是不是像許多人平時思考需求、思考問題的方式?


          而使用結構化思維的分析方式是:

          一、仔細推敲需求產生的原因、背景,而不是單純只看需求,然后結合需求得出初步的改進目標。

          二、分析需求的相關用戶群體。不同產品的相關用戶群體不一致,比如電商產品相關用戶群體是普通用戶、商家;網約車相相關用戶群體是用戶和司機;B 端產品相關用戶群體有客戶(負責購買)和用戶(負責使用)

          三、結構化的分析競品,而不是單純找靈感。如看競品是如何做的,而看競品如何做并不是為了單純只看表象,也會從不同維度進行分析:競品為什么這么做,結果是什么?如果競品做得不如我們,他們的不足之處在哪里?競品這么做對我們有沒有參考意義?分析競品有助于我們通過別人的方案,幫助我們更清晰地分析目標的意義。圍繞目標,再發散思維,此時的方案會比第一種人更加緊密圍繞需求和目標,而不是單憑感覺去發散。我們提出的方案,相對而言也會更加具備理論、數據、分析的支撐。

          四、分析方案的意義,方案對產品本身、對團隊等方面是否有更多的意義。舉個例子,你做的方案是否考慮到團隊其他成員的復用性?是否考慮到對當前業務的數據變化以及后續維護?更甚于,對自己的意義,是否能從中學習更多內在方法?

          五、···


          一個需求可以拆解成多個點進行解析。比如:產品問題+產品目標+產品定位+競品分析+相關用戶群體+體驗地圖+ ... + 需求類別特性(不唯一)。但是,并非每個需求都需要把產品定位、體驗地圖拿出來遛一遍,這樣子就變成了生搬硬套,我們需要根據具體需求思考不同的分析點。


          我們在需求分析中,最常用到的是以下幾種,當然還有一些其他的拆分點,根據不同產品類型,分析的結構也不一致。

          問題:我們產品當前遇到什么問題?

          目標:針對當前的問題,我們期望達到什么目標?

          競品分析:競品分析幾乎做需求前必做的,關鍵在于參考其他產品的設計思路,以及別人能夠做到什么樣的程度?;谀繕?,側重于從交互、UI 的設計層面進行分析、類比。

          相關用戶群體:最基礎的當然是普通用戶,此外根據不同產品或者不同功能類型有:商家(電商類)、UP 主(B 站等)、CP(內容提供商)、司機(網約車類)等,甚至同一產品不同功能模塊需要考慮的相關用戶群體也不同。

          需求類別特性:基于不同需求的相關內容而言的,這種變量會更聚焦于某需求的具體內容,但是一個具體需求是可以被拆分成多種維度,比如信息維度、框架維度、設計風格維度。假如你在做一個搜索的需求,分析的變量就是搜索操作類型、搜索推薦方式、搜索結果呈現規則等。假如你在做一個信息流的需求,分析的變量就是信息推薦規則、信息卡片呈現方式等。


          結構性思維,無論是在溝通、處理分析問題上,對我們都有很大的幫助。在設計中,我們可以通過這種思考方式,避免讓方案過于發散而不聚焦,更好地判斷方案對于業務、團隊、自身的意義,以達到清楚方案的優劣性的目的。



          結語


          1、本文介紹了設計師在項目中如何更好的溝通需求的方法,當然除了上述的方法之外,還有更多方法可以幫助我們解決問題,但我認為本質上是學會如何用全局的眼光看待需求,避免局限于具體解決方案。

          2、在實際項目中,我們會遇到多種類型的需求,特別是遇到較大的需求時,運用合適的分析方法特別重要,這能夠很有指導性的幫助我們有意識、有節奏的看待需求。

          3、避免為了使用某種方法論而強行使用,需要根據不同的需求場景使用不同的方法。

          4、作為設計師,很關鍵的一點是判斷什么需求是真實需求、什么需求是偽需求,這在需求溝通、需求分析中會形成較大差異。當然這并非一朝一夕可以提升的,需要通過不斷學習對用戶行為及體驗的理解、對商業的理解才能提升。


          文章來源:站酷  作者:熱風_

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



          當等待無可避免時,如何優化等待體驗?

          資深UI設計者

          等待體驗幾乎不可避免、隨處發生,無預期的等待還可能讓用戶心煩意亂。針對等待體驗,我們該如何設計?


          一、盡量減少用戶等待的情況,盡可能縮短等待的時間

          如當用戶瀏覽網頁的時候,若在用戶瀏覽到已加載內容的倒數第5條再預加載10條內容,可縮短用戶瀏覽接下來內容時的加載等待時間。再如生活中醫院的預約掛號系統,用戶可以提前一兩天掛號,當預約時間到了直接到指定科室看病,避免了長時間的排隊掛號。


          二、如果是不可避免的等待,該用什么辦法去優化等待體驗呢?

          總的原則是:在用戶等待時給予用戶反饋,告知狀態,且盡量讓用戶在感知上縮短等待的時間。反饋可根據等待的預估時間不同、場景不同,選取不同形式。

          • 一般情況下理想的響應時間應該控制在 100 毫秒內,一些響應的時長可允許達到1秒,絕不可超過2秒無反饋。

          • 若是等待響應時長為2-9秒時,可設計循環的加載動效(loading),告知用戶正在加載中。

          • 若是等待響應時長超過10秒時,可設計帶有進度指示的加載動效。此時除了告知用戶正在加載中(即告知等待原因和當前狀態),還要告知用戶預期響應的時間。



          可采取分步響應用戶的方式,多次反饋,可讓用戶在感知上縮短等待的時間。

          如一些頁面內容較多,加載時能分步顯示,可按照框架、文本、占位圖、圖片的順序加載顯示,會在感知上縮短加載時間。又如加載一個新視頻,視頻前幾幀優先顯示最小體積的視頻資源,等較高清視頻內容加載出來時再切換為高清視頻資源,可縮短用戶等待視頻開始播放的時間。



          唐納德諾曼提出過排隊等待的6個設計原則,可以很好地幫助我們設計等待體驗,6個原則分別是:

          (1)提供一個概念模型。

          (2)使等待看起來合理。

          (3)滿足或超越期待。

          (4)使人們保持忙碌。

          (5)公平。

          (6)積極的開始,積極的結尾。


          下面我們就說說這6個原則在優化等待體驗上的運用:


          1. 提供一個概念模型

          概念模型是幫助人們把復雜自然現象轉變成可用的,可理解的心理模型。概念模型可以幫助用戶理解事物,了解事物如何運作以及當前處在哪個階段、理解當前為什么處在等待狀態,以及產生對未來即將發生事情的預估和期待。

          如用戶通過餓了么下單后,app上會用插畫顯示商家備貨、騎士送貨的過程。讓用戶了解外賣送到手中的整個流程,以及當前處在流程的哪一階段,距下一階段預估還有多久。如果是雷雨天,訂單頁面的插畫還會模擬實時天氣情況,用戶看到插畫想到騎士正在雷雨環境下送貨取貨,也會理解騎士配送辛苦、理解當前配送緩慢,緩解等待時的負面情緒。



          2. 使等待看起來合理

          使等待看起來合理,即通過概念模型使用戶理解為什么要等待,明白等待是有緣由的。

          如用滴滴打車時,當我們按下呼叫快車按鈕,頁面會顯示動效光波信號向外擴散,同時會顯示當前排隊人數。設計師通過設計建立一個簡易的概念模型,讓用戶理解當前的等待的原因,并認為等待是合理的。實際上滴滴派單的算法流程可能與頁面顯示的流程不同。但用戶等待時會理解此時手機正在發出信號請求駕車信息、或此時正有多人在排隊、或此時正在等待司機接單。



          3. 滿足或超越期待

          滿足或超越期待指用戶給等待時間估算時長時,如果用戶實際的等待時間比心理預期的等待時間要短,用戶會有相對比較好的心理體驗。

          心理學專家曾做過一個實驗,同等時間下,同樣長度的進度加載條有三種進度顯示方式:進度條速度勻速、速度先快后慢、速度先慢后快。三種相比較發現,當進度條增加速度先慢后快,用戶的體驗最好。而用戶體驗最差的是加載速度先快后慢,因為如果開始的時候加載速度比較快,用戶一開始就有了較高的心理預期,當速度變慢時便低于用戶的心理預期,感知體驗就會變差。



          4. 使人們保持忙碌

          使人們保持忙碌即讓用戶在等待的時候有事可做。因為當人們非空閑時,對時間的心理感知會比空閑時對時間的心理感知要短。

          利用這個原則的設計如:CorelDRAW軟件下載安裝時,軟件安裝等待頁面除了顯示進度條還放映國際優秀設計圖片,CorelDRAW用戶一般都是設計愛好者或設計從業者,通過讓他們瀏覽優秀設計圖片來度過軟件安裝時間,避免用戶純空閑等待。



          5. 公平

          當用戶正在等待時,如果等待看起來是合理且公平時,不易引起用戶的負面情緒。如果等待看起來是不公平的時候,更容易引起用戶的負面情緒。如:當你正在排隊買票時,同等條件下,你看到后來半小時的人比自己先買到了票。你可能會抱怨,“為什么比我晚來半小時的人都排到了我卻還在等”。

          針對公平方面的設計如銀行的叫號辦理業務系統。用戶統一到取號機前取號,每當一個窗口的空出來,叫號系統便叫一個最早的號去該窗口辦理業務。這比人們直接分散在多個窗口排隊會更公平,不會出現早來卻因為這個窗口排隊慢而導致等待時長比晚來的用戶更長的情況。同時把多個小隊伍變成一個大隊伍,用戶感知上也會覺得隊伍移動的更快,也有助于降低等待的負面情緒。


          6. 積極的開始,積極的結尾

          德國心理學家艾賓浩斯曾提出系列位置效應,指記憶材料在系列位置中所處的位置對記憶效果發生的影響,包括首因效應和近因效應。(來源:百度百科)即人們回憶體驗時,在最開始和最后的體驗比中間的體驗更能讓人印象深刻。所以當我們在設計等待流程時,要保證等待開始和等待結束時有較好的體驗。


          如當我們在餐館排隊結賬時,一些餐館結賬臺旁邊會放著一盤薄荷糖,收銀員幫用戶辦理結賬時會對用戶說可以拿幾顆薄荷糖。這個小獎勵會讓用戶走出餐館后對剛剛結賬時排隊等待的不好體驗的記憶變弱,而對最后的薄荷糖有更深的印象,從而對餐館也留一個相對好的印象。

          關于等待體驗的優化設計案例還有好多,但基本的設計原則是相通的。

          我們在實際設計時可先整理用戶整個體驗流程中可能等待的點,看看哪些是可以通過設計或技術縮短實際等待時間的。針對不能縮短實際等待時間的點,我們先預估每個等待的時長,并設計概念模型讓用戶理解等待的緣由且能預估等待的時間,且采取合適的方式讓用戶在感知上盡量縮短等待時間。

          文章來源:站酷  作者:醬紫丫

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


          日歷

          鏈接

          個人資料

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

          存檔

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