偏差經常不知不覺滲入我們的設計。通過了解、消除這些認知偏見,可以幫助我們改善用戶體驗和服務質量,確保決策的一致和中立性。
供應鏈資源整合是企業發展態勢。企業對內部多崗位協作、企業與企業間的協作效率有更多訴求。
企業級服務系統的智能在線處理、數據準確、信息安全等特征,成為企業實際作業的得力助手。(以下簡稱B端)
系統提供商也便對業務型產品、設計、開發、運營等人才有更多需求。
在C端浪潮中,設計師通過創造用戶流暢和驚喜的體驗,發揮了顯而易見的價值。
然后B端系統的業務復雜特性,普遍認知產品經理、開發會體現更大的價值。
設計師作為中間角色,難免「尷尬」,甚至淪為產品經理原型的高保真繪制人員,缺少發言權,或初次接觸對海量信息無從下手。究本質原因:
未直接接觸業務方和用戶,無法對需求場景有深入的了解,缺少系統性設計分析、設計判斷能力
我在幾年的實戰中,運用辛老師 「交互設計五要素」 基礎原理,融合于B端業務體系,形成一套自己的思維圖譜。(以下簡稱五要素)
從「五要素」出發,會更快速地get到關鍵設計點,抱著開放的態度與產品討論方案,總會愉快地達成一致,順利對接開發。
就像我們寫小說「講故事」一樣:時間地點人物、有什么目標、使用什么工具,完成什么事情,故事才完整?;贐端實際業務場景的五要素,阿飛解說如下:
角色:
老板、運營、銷售、物流、采購、庫管、財務等(不同崗位日常事項不同)
權限:
主子賬號(涉及到模塊間的操作權限、數據權限)
用戶目標:
B端一般是具有明確的作業目標,更地完成工作。老板一般希望節約人力成本,且可即時響應客戶需求
商業目標:
為客戶賦能、提升下單率、支付率、新業務滲透力、裂變等
業務目標:
產品會不斷的迭代,了解當下需求中的業務目標
設計目標:
基于以上目標,設計需符合用戶思維習慣,提高處理效率,同時避免誤操作等
任何場景下,人的行為都是有「目標動機」
當以「目標」為出發點,可以增強設計判斷力,輸出有效方案。另外真正有價值的商業目標一般都是和用戶終極目標所吻合。
時間、地點是場景的必要組成
When:
隨時隨地在線或工作日期間,如:售后客服需要隨時在線;財務人員一般工作日處理任務
Where:
辦公室、倉庫、戶外等。需考慮線上線下結合,系統是為用戶的線下作業場景服務
臺式電腦、筆記本電腦、手機、平板、掃碼槍、PDA、打印機、肢體、智能運輸車等
互聯網媒介又包含web網頁端,web客戶端,小程序,H5,App等
系統功能承載在媒介中,媒介承載在實際作業下使用的工具,存在多終端配合使用。比如倉庫移動作業時,會使用到平板進行盤查核對等。
需要完成什么事?通過典型的任務流分析是否可達到目標
△ 倉庫移動作業場景
B端復雜業務下,設計師主動了解用戶實際的場景后,五要素作為必需思考元素,經過實戰驗證,帶給設計師的機遇價值至少有2方面:
1. 對設計師自身:
有利于設計分析、判斷思維體系的完善,考慮更全面;所輸出的方案符合用戶思維和習慣,更容易得到各方的認可
2. 對于業務價值
可作為考量產品方案可行性的判斷準則
另外,產品原型一般基于「功能」本身,而設計師從用戶實際場景規劃用戶的任務流,可以優化產品邏輯,補全缺失場景,也會給予創造性解決方案
比如「開發票」功能 :
在需求評審中,針對于「A向B申請開票,A撤銷申請不需要B操作同意」這點,我提出建議:「需要B線上同意」
首先確實是要避免無謂的用戶線上流程操作,但針對這點,我分析如下:
所以「A撤銷申請B需要線上操作同意或拒絕」
△ 打印發票
以「五要素」的分析思維的表述,最終與產品、技術達成一致。
在設計中,考慮到「A申請撤銷」的單據,對于雙方都是需要優先確認和處理的。所以除有即時消息通知外,列表中我做了2點設計:
(若不這樣,在分頁列表中特殊單據很有可能從第二頁后才出現,用戶都發現不了)
△ 狀態操作參考框架示例-原創
回顧下B端交互設計五要素
設計師的分析、判斷能力是非常重要,五要素則作為系統性的思維支撐。
B端浪潮中,設計師仍有很大的機遇和價值。基于五要素分析,會對業務有所優化和補充,或提出創造性的解決方案。
設計不僅是一種技能,而是對事物本質的感知和洞察能力
交互設計五要素不僅對設計師有幫助,同時對產品、運營等人員同樣具有價值。
文章來源:站酷 作者:Aber UX設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品,為你的產品設計注入靈感。
--手機appUI設計--
(以上圖片均來源于網絡)
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
編輯導語:導出功能我們經常能夠使用到,看似一個很簡單的功能,實則在設計的過程中需要考慮很多的因素。本文作者對導出功能的全過程進行了思考,為我們分析了兩種解決方案,拆解了導出前和導出時的設計,并且進行了總結。
功能(百度釋義):功能是一個漢語詞語,拼音為gōng néng,意指事物或方法所發揮的有利作用;效能。
綜合以上釋義,我們再從產品的角度對其理解:功能的好壞不僅僅關乎其本身,更重要的要看是否為解決實際問題而服務。
那導出功能,解決了什么樣的問題?我們先來看一個場景。
小A作為一名銷售人員,需要每月向領導匯報一次銷售情況,為了更直觀的讓領導看到銷售情況,小A要對銷售訂單數據進行不同維度展示與分析。而目前系統只能查看訂單列表與銷售總額,不支持不同維度的數據分析。
從場景中我們可以看到這樣一個問題,由于系統只能查看訂單列表與銷售總額,不支持更全面的數據分析,導致小A每次向領導匯報前,只能人工將一個月近5000筆的訂單(此處不考慮后續不斷增加的訂單量)統計在excel中,從客戶維度計算出銷售額、銷售量,完成客戶維的銷售情況分析。
從產品SKU維度計算出銷售額、銷售量,完成產品SKU維銷售情況分析,導致小A的工作效率很低,同時人工抄錄導致數據錯誤的的情況也常會出現,最終導致數據分析結果錯誤。
針對該問題,我們深入思考一下,小A想要進行更全面的數據分析,可以采用以下2種解決方案:
目前我們有兩種解決方案可供選擇,那我們采用哪一種解決方案會更好呢?
1)采用“新增銷售數據分析頁面”的解決方案
通過與小A的繼續溝通發現數據分析的需求并不穩定,處于變化的狀態。當依據小A的需求完成分析頁面后,過了一段時間發現產品隨著季節變化導致銷售額也不穩定,從時間維度的分析數據沒有參考價值,可能要舍棄這種分析方式。
此時我們發現,小A的需求可持續的時間極為短暫,不足以支撐一個長期存在的功能,但已經將其實現為功能,則意味著功能白做了或沒有產生與成本對應的價值。
2)采用“導出銷售數據到excel,通過excel的數據透視功能完成數據分析”解決方案
導出銷售數據到excel,可以規避因手動抄錄導致的數據分析結果錯誤問題,同時也會節省抄錄數據的時間,提高小A工作效率。
數據導出后,小A可以通過excel的數據透視功能或者其他第三方軟件完成定制化的數據分析,即使不開發數據分析功能,也可以滿足小A的“更全面的數據分析”需求。
例如,當小A導出如下圖所示的數據后:
小A第一步可以先完成不同月份的匯總,在表中添加“月份”字段,添加公式為“=MONTH(A2)”;
第二步:再點擊表格中任意單元格–插入–透視表–新建工作表,將省份拖入數據透視表字段的【篩選器】,將月份拖入【行】中,將A、B、C、D產品銷售額(元)拖入【值】中;將行標簽改為月份,每個字段以求和方法計算并修改字段名稱。
第三步:選中透視表中數據,調整格式為加千分位逗號,保留0位小數。
第四步:為了讓數據展現可視化,插入透視圖。
通過公式篩選、透視表、透視圖的使用,小A可以點擊查看不同地區、月份、產品的分類匯總數據,可以很直觀地反映出時間維度的銷售情況、不同地區的銷售情況、很好地為產品選擇、地域選擇做出數據依據支撐。
數據分析功能會從數據源、數據處理、數據的可視化來實現,而Excel的透視表對應了數據明細(數據源),公式能夠完成較多的數據計算任務(數據處理)。
透視圖可以直觀、清晰的展示各類產品在不同月份、不同地區的銷售情況及總的銷售情況分析,為產品布局提供指導性參考依據(數據可視化)。
另外當小A從數據透視圖看到某個月份銷售額過高,可以直接點擊查看透視表中的數據明細是否存在錯誤,當小A想查看每個產品銷售額的占比,可以新建數據透視表并將透視圖切換成餅狀圖查看。
由此可見,用Excel來做數據分析不僅可以很靈活的滿足需求,而且還很實用、很方便,也不會因功能的限制導致對數據無法分析。
通過以上論證,我們發現,既要能夠解決問題又要支撐一個長期存在的功能,還要用較低成本以及最快的方式來完成,我們采用最佳的解決方案:“導出”。
既然已經明確最佳解決方案是“導出”,那接下來就從導出的全生命周期看看,如何設計導出功能?
1)明確導出數據限制
無論當前的系統數據量是多少,建議都要做導出條數限制。
因2003版的excel 一個sheet表最多導出65535條數據,2007版的excel是10萬4000多條。如果不設限,當用戶導出的數據量超過excel單個sheet的數據量時,會出現導出失敗的情況,影響用戶的正常使用,且產生對系統的不信任情緒。
那應該限制到多少條數據?
我們先來了解一下導出的技術原理,當用戶點擊導出后,數據會被以excel的形式下載到服務器,服務器再通過網絡將文件發送給用戶。
在這個過程中,導出條數受限制的原因一個是服務器性能,另一個是用戶的電腦性能以及所使用excel版本,在實際產品設計時,根據實際情況,制定一個合理的數據限制即可。
回到開頭的場景中,用戶不僅要導出數據還要做數據透視表,假設用戶使用的03版excel,導出30多個字段,使用大量excel公式,最穩妥的是限制到1萬條數據以內。
做了一組極限測試數據供大家參考,使用一臺2核4G的服務器、1個用戶使用、導出條數是1048576條(導出最大條數)、導出3個字段、使用2010版excel,導出后當使用一個sum公式時,出現了如下圖的錯誤,導致excel異常退出。
2)明確導出格式
數據導出格式有.xls和.csv,.xls是二進制的文件用excel才能打開;.csv是文本文件,用記事本就能打開。而當前用戶導出數據后要進行的是數據分析,故只需支持.xls導出。
3)明確導出需求
導出一個excel一個sheet,還是一個excel多個sheet?
考慮到用戶導出數據后要對訂單數據進行分析,可以與用戶明確是否需要按某一維度如客戶維度將數據拆分成多個sheet,減少用戶操作數據的時間以便能把更多精力放在數據分析。
如果用戶不需要按照某一維度拆分數據,則采用導出一個excel一個sheet的方式。
表頭是否需要增加序號列?
當用戶導出訂單數據后,為了讓用戶準確操作某一行數據,需要有唯一代表一行數據的標記,而在訂單導出前是以數據庫的主鍵來標記,對于導出后的訂單,則需要自動增加序號列方便用戶操作。
是否有內容需要用顏色標注區別?
在導出訂單數據中,為了快速掌握銷售情況,有些數據是需要特別關注的、而有些不需要。因此,可以使用顏色標注來做區別,讓查看人員快速找到自己想要的數據,如可以標注總計快速查看總銷售額。
是否需要合并單元格?
對于導出后進行數據分析,不建議使用合并單元格,因excel中合并單元格后僅保留左上角的值如下圖所示,這樣會使得篩選出現錯誤,也影響批量的公式使用導致透視表無法分析。
如果導出后只查看數據,可以考慮使用合并單元格。
1)是否需要導出維度
百度釋義:維度是事物“有聯系”的抽象概念的數量,如時間維度是以時間作為描述、表達變量的度量尺度。
導出維度是指的按照特定場景下,導出以某個字段為主導數據且與該字段相關的其他字段數據。
一般來說,財務和倉庫的導出業務場景不同,財務需要以訂單維度導出,倉庫需要按商品為維度導出,如果無需導出維度,則不需要過度設計。
2)設置表頭導出字段
由于訂單的一條記錄數據字段會很多,包括:訂單號、銷售類型、客戶名稱、產品名稱、數量、單價、收貨人、聯系電話、賬期、發貨時間、預約到倉時間、發貨基地名稱、發貨方式、合同折讓率、應收款、已收款、未收款、產季等近30個字段。
而訂單分析時,收貨人、聯系電話、發貨時間等字段則無需導出。
因此選擇字段導出,可以讓客戶能夠更快速使用并完成分析。導出和查詢均要使用篩選,但呈現結果的方式不同,兩者的使用場景是可以借鑒的,建議可以放置篩選區。
3)是否需要支持選擇行導出
一般來說,導出數據為全量數據,如果用戶通過字段選擇不出需要的數據,此時要支持用戶勾選某些行數據,提示用戶當前勾選數據明細及數據條數。
4)其他處理
為了讓客戶清晰的明白訂單是如何導出的,需要在導出時給予導出規則、導出圖片、附件形式說明文字提示。
5)根據導出數據量,明確數據處理方式
從技術的角度說,針對較大數據量的導出場景,可以采用異步的處理方式,降低客戶的焦急心理。
所謂異步,就是用戶點擊導出按鈕后,后端接收請求并執行讀取任務,用戶可以不用停留在原處等待,離開當前頁面去處理其它工作任務,之后再打開任務頁面查看導出結果。
如果有數據可以預先計算,后端可以直接預先計算,同時避免了因采用同步的處理方式導致長時間等待的結果,客戶體驗會更好,工作效率也會更高。
6)是否需要任務頁面
如果用戶點擊“導出”按鈕后,10秒鐘內不能完成文件打開,會讓用戶產生焦慮心理。為了讓用戶使用體驗更佳,需要有一個固定頁面即任務頁面來承載導出任務列表。
功能,是為解決問題而生,而功能的起源是需求,需求是從場景中找到問題。
由此可見,功能設計流程一定會包含場景選定、問題分析并找準需求、解決方案分析、選定功能、功能設計這5個階段。
做功能設計時,時刻問自己三個為什么:為什么這是一個問題(問題具備危害性)?為什么要解決這個問題(被解決的價值)?為什么我選定的功能可以解決這個問題(功能的價值)?
導出不僅可以解決文中的“需要更全面的數據分析”的問題,還可以解決“數據離線使用”的問題,導出后,數據以本地文件的形式存在,可離線使用。
另外導出還能解決“數據交付系統外部人員”的問題,導出后,數據以獨立文件的形式存在,可以復制,傳遞。
文章來源:人人都是產品經理 作者:努力的小妖
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
寫在前面
在平時的設計過程當中,你可能會有這樣的疑惑,為什么在大部分APP中,當單個按鈕和多個按鈕同時存在時,最重要的按鈕一般都會放置在頁面的右側呢?如果最重要的按鈕放在左側又有什么問題呢?按鈕放在右側的原因是什么呢?它又有什么理論依據呢?接下來帶著這些疑問,開始我們今天所要介紹的內容:交互心理學之古騰堡原則
古騰堡原則的起源
古騰堡原則是由14世紀西方活字印刷術的發明人約翰·古騰堡提出,早在20世紀50年代,他在設計報紙的過程中,提出了一項原則,認為人的閱讀方式應該是遵循某種習慣進行的,就像讀書一樣,由左到右,從上到下。這其中蘊含著什么信息呢?經過研究最終得出被后人所熟知的結論:古騰堡原則,并附上了一張圖,名為「古騰堡圖」。古騰堡圖將畫面所呈現的內容分成四個象限:
1、第一視覺區(POA):左上方,用戶首先注意到的地方
2、強休息區(SFA):右上方,較少被注意到
3、弱休息區(WFA):左下方,最少被注意到
4、終端視覺區(TA):右下方,視覺流終點
從圖中可以看出,用戶視線很自然的會從第一視覺區開始,逐漸移動到終端休息區。整個閱讀過程視線都會沿著一條方向軸開始從左到右瀏覽。用戶會更容易關注到頁面的開始與結束區域,而中間的段落則很少被關注到。古騰堡揭示了一個實用的視覺軌跡規律:閱讀引力是從上到下,從左到右。
遵循古騰堡原則把關鍵信息放在左上角、中間和右下角,能夠更好的體現元素的重要性。例如:我們平時所看到的頁面彈窗、各種證明文件和合同文件等等。
古騰堡圖通過對設計元素的重量與元素布局和組成方式進行調和,指導眼睛的運動軌跡。讓用戶迅速獲取有價值的信息,同時用戶對信息的熟悉程度也是影響眼睛運動軌跡的因素之一。
而隨著互聯網的興起,古騰堡原則也逐漸被應用到APP設計和網頁設計當中。接下來讓我們來看看他在界面中的實際應用。
在設計中的應用
1.1 底部單個按鈕
這種形式在引導用戶操作的頁面中最為常見,為了能夠保證用戶對內容進行閱讀,所以將按鈕擺放在頁面底部,內容放在頂部,這樣的擺放即符合用戶由上到下的閱讀習慣又達到了產品預期的目標。
1.2 底部垂直雙按鈕
上面我們提到了單個按鈕的擺放思路,接下來看一下垂直雙按鈕的擺放思路是怎么樣的。如果一個界面上同時存在兩個優先級不同的按鈕,并且產品希望用戶對每一個按鈕都有足夠的關注度,那么垂直擺放是最佳選擇,雖然垂直雙按鈕在樣式上做了區分,但用戶同樣會停留一段時間將按鈕的內容進行對比思考。
那么,按照古騰堡原則,重要的按鈕應該放在頁面最底部,原則上它應該是這樣的:
仔細觀察上圖,有沒有發現淺色按鈕很容易被忽略掉,這樣就違背了產品要保證每一個按鈕都要有足夠關注度的初衷,所以我們要違背古騰堡原則來滿足業務需求,正如我們所看到的微信授權頁面一樣,
為了保證「同意」與「拒絕」這兩個獨立的按鈕能夠被用戶足夠的重視,并且其中的任意一個按鈕不會被輕易的忽略掉,這里將「同意」按鈕顏色加重,并且放在「拒絕」按鈕之上,讓眼睛原本垂直向下的運動軌跡產生回流的變化。
小結
原則是設計的基礎,并非一成不變,要合理權衡設計原則與產品目標之間的關系。
2、頂部按鈕分析
由于頂部導航欄空間有限,導致按鈕相對較小,并且不便于點擊操作,所以這類頂部按鈕適用于修改內容的編輯頁面,即可以避免誤觸,又可以讓用戶關注內容本身。關鍵按鈕至于頂部,還可以縮短用戶眼睛的運動路徑,讓用戶更容易注意到其狀態的變化狀態。
小結
頂部按鈕更關注可編輯的內容區域,并非按鈕。而底部按鈕則更關注按鈕本身。并非內容。
3、水平按鈕分析
除了上面提到的頂部按鈕和底部按鈕,還有水平擺放的按鈕,比如淘寶詳情頁、京東詳情頁、網易嚴選詳情頁的「加入購物車」和「立即購買」按鈕,界面中的「立即購買」按鈕都放在了右下角,結合古騰堡原則的視覺終點說明,右下角為視覺終端區域,即視覺最終停留的位置,所以他們都將與轉化率密切相關的「立即購買」按鈕放在了界面的右下角,讓用戶更容易關注到。
再比如比較常見的「取消」和「確認」彈窗樣式,通常是在需要讓用戶確認某種操作行為時出現,有可能是提交表單、協議授權、獲取用戶信息等等,為了防止用戶誤操作,這也是提升產品體驗的小細節。
平常我們所看到的彈窗,推薦按鈕都是在右側,那么將推薦按鈕放在左側會怎么樣?如下圖所示:
不難看出推薦按鈕放在右側后,視覺在水平方向軸上產生了回流。
彈窗的目的是想讓用戶點擊「確認」按鈕,如果將「確認」放在左側,根據古騰堡原則,用戶的視線會不由自主的向右側移動,也就是「取消」按鈕的位置,想要回到左側「確認」按鈕位置就需要移動視線,并且眼睛的運動軌跡會在水平方向軸上來回的往復運動,無形中增加了用戶選擇時長。如果將「確認」放在右側,「取消」放在左側則可以為用戶提高操作效率。
在實際產品中的應用案例:
小結
當產品想要讓用戶進行某種操作時,主要按鈕放在右邊
總結
1、古騰堡圖第一視覺區,強休息區,弱休息區,終端視覺區
2、原則是設計的基礎,并非一成不變,要合理權衡設計原則與產品目標之間的關系
3、頂部按鈕更關注可編輯的內容區域,并非按鈕。而底部按鈕則更關注按鈕本身。并非內容
4、當產品想要讓用戶進行某種操作時,主要按鈕放在右邊
文章來源:UI中國 作者:Coldrain1
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在經典的尼爾森十大啟發式當中,「系統狀態可見性」可以說是如今交互設計領域當中,最為重要的原則之一。通過向用戶展現當前的狀態,讓用戶擁有對系統的控制權,建立用戶對于產品的信任感,這也是這種設計啟發式的最重要的價值之一。
但是,想要做到可靠、易用,系統狀態展現的技巧是很講究的。這里梳理了4種最為常用的方法,結合了不少實用的案例,希望對你有所幫助。
1.1、讓用戶知道自己在哪
沒有人會喜歡迷失方向,但是無論在現實生活還是在數字領域當中,這種情況都會發生。讓用戶知道他們在哪里是創建良好導航體驗的關鍵。應用程序和網站都應該凸顯當前的導航選項,幫助用戶了解他們所在的位置。
Google 的底部導航欄設計
1.2、要經過多少步驟來完成任務
這也是一個非常基本的操作,通過展現步驟數量,幫助用戶來預估完成這個過程所需要的時間。
Selecto 的調查問卷的設計
數字界面畢竟不是現實世界中的真實硬件機構,用戶更多只能借助交互過程中的即時視覺反饋來確定是否完成了操作,即時的視覺反饋因此顯得非常重要。
即時的視覺反饋讓用戶的操作得到了視覺上的「認可」,從而強化了「確信感」,這樣一來一回的確認可以避免錯誤的發生,比如可以避免用戶因為「感覺沒有點下去」而反復點擊。
這種視覺反饋的設計,最常見的范例就是點擊按鈕按下的微交互動畫,它告知用戶「系統已經捕捉到點擊交互了」。
AliAli 所設計的懸停點擊動畫
但是在某些狀況下,按鈕的視覺反饋還有很多不同的呈現形式,有更多可見的、可理解的新形態,可以在原有的基礎上探索更多可能性,比如下面的
2.1、單擊點贊按鈕
Spread love, not viruses ,作者 Charles Patterson
2.2、開關按鈕
這個開關按鈕不僅有點擊動效,而且色彩和按鈕標識也隨之改變,更為清晰地表明狀態,甚至兼顧到了視覺障礙用戶
Switcher XLIV , 作者 Oleg Frolov
2.3、書簽按鈕微交互
這個書簽按鈕通過色彩的虛實變化來呈現書簽已添加的狀態,頗為巧妙。
Bookmark interaction,作者 Oleg Frolov
2.4、添加購物車微交互
在這種情況下,視覺反饋非常明確且優雅地告知用戶已經添加到購物車里面了。
咖啡下單動效,作者 Nhat M. Tran
3.1、系統正忙于什么事情
當系統正在加載,正在執行,正在運行的過程中,通過動效來告知用戶系統并沒有停止,而是正忙于執行某件事情,是避免用戶誤解的手段。在用戶等待的過程中,通常會實用無限加載的動效(一般使用在低于10s的操作中):
對于超過10s的更長的執行過程,無限加載的動效會顯得令人沮喪,這個時候實用進度條會更好:
這些視覺反饋很大程度上降低了系統給人的不確定感。
對于移動端應用,在初始加載階段所使用的啟動動畫界面,是否精心設計,決定了用戶對于整個產品的第一印象,優秀的初始加載動畫能夠將用戶的注意力從焦躁的等待中解放出來。
Logo 閃屏 ,作者 Gleb Kuznetsov?
3.2、內容加載
當用戶需要時間來加載內容的時候,建議使用一種特殊的的容器「界面骨架」來展現。這種臨時的內容容器不僅能夠幫助用戶快速地了解界面的整體框架,構建用戶預期,并且能夠在后臺快速地加載數據,漸進式地幫用戶獲得信息。
內容加載,作者 Ginny Wood
這種設計方式對于移動端和桌面端的設計同樣適用:
界面骨架加載動效,作者 Shane Doyle
4.1、通知和提醒
有效的通知和提醒,能幫用戶意識到有新的事情正在發生。在多數時候,我們建議設計師使用微妙的動畫來進行通知,因為動畫效果會自然地吸引用戶的注意力,人類的雙眼的動態視覺其實是非常強的。
Aleksei Kipin 設計的通知動效
4.2、提示用戶采取行動
在很多情況下,用戶界面中會有很多地方會需要用戶提交信息。比如,需要用戶提交表單,或者用戶創建了一個密碼,但是在復雜度上不足需要修正,或者填寫郵箱來訂閱信息的時候,郵箱格式出錯,等等。使用適當的視覺反饋總能夠更加有效地將問題告知用戶。
內聯郵箱驗證機制,作者 Derek Reynolds
讓用戶有掌控感,就是為用戶創造更好的體驗。在很多設計方案中,視覺反饋會因為種種原因被削弱了,甚至被忽略了。但是當用戶在和 UI 進行交互的時候,期望度和可動性其實是高度依賴于這些動效和微交互,而這正是設計師需要設計出優秀視覺反饋效果的原因所在。
文章來源:優設 作者:Nick Babich
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶隱私安全在產品設計中是很重要的一個環節,本文從用戶體驗角度切入,從匿名模式、減少永久性和減少公開性三個方面展開分析。
我們先看?組來??優的2019年6?的調研數據:70%的美國?認為,與5年前相?個?信息變得更不安全。尤其是?學歷?收?群體。由此可??戶對個?信息數據的隱私擔憂?以往更甚。
?戶隱私安全很重要,涉及的范圍和?度也很多。本次的分析從?戶體驗?度切?,涉及如下三個??:
Incognito Mode匿名模式;
Reducing Permanence減少永久性;
Reducing Publicity減少公開性。
下圖是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切換,從交互體驗上來說有如下?個特點:
統?在右上?;
可以便捷切換?匿名模式,反過來也很容易切回登陸狀態;
匿名模式的狀態提示,例如YouTube 在匿名模式下在界?底部有?字提示“您 當前處于匿名模式”。
匿名模式不是最近才流?的功能,最早提供隱匿模式的是蘋果safari瀏覽器,早在 2005年就?持了匿名模式。Chrome瀏覽器在2008年就開始?持此模式。雖然由來已久,為什么到了2020年,匿名模式依然是國外互聯???趨勢呢?
我們看?組數據:
這是來?DuckDuckGo 2019年9?的調研(DuckDuckGo是美國的?款不記錄?戶?為保護?戶隱私的搜索引擎)。樣本來?美國、英國、德國和澳?利亞的成年??戶,共計3,411?的調研得出。各國?戶對使?搜索引擎的個?隱私安全?常在意(是否搜集個?的數據和記錄搜索?為)。
2020年5?DuckDuckGo?均搜索次數為6200萬。對?看2019年11?底?均搜索次數4900萬,2018年10?是2900萬。
最近?年的持續活躍度?幅增?證明了不記錄個?隱私的搜素引擎越來越受到?戶的?睞。
國內,頭條、UC瀏覽器在搜索框輸?狀態也提供了“?痕瀏覽”??。
不僅是搜索引擎領域,保護?戶隱私也成為Facebook最重要的戰略?向之?。Facebook CEO Mark Zuckerberg在2019年 F8開發者?會上喊出“THE FUTURE IS PRIVATE”。2019年3?Mark Zuckerberg發?,主題就是《聚焦于保護隱私的社交?絡》。
我們先看國外社交媒體Stories(?故事)產品形態的流?。
?們總是對于所分享的內容永遠記錄在?上感到擔憂。Stories24?時消失緩解了?們的隱私顧慮,這讓?戶更安?地?然分享。
Stories由Snapchat?創,由 Facebook發揚光?。早在2019年4?,Facebook+Messenger Stories, Instagram Stories?活?戶數就突破5億。 2020年2-3?LinkedIn,Twitter也先后宣布將上線類似功能。
來??優的調研報告:41%的美國?經歷過?絡騷擾,最常?的就是在社交媒體上。23%的?戶最近經歷的?絡騷擾來?評論區的評論內容。27%的?戶經歷?絡騷擾后決定不再發布任何內容。
我們以限定評論互動的公開性為例:
2020年5?Twitter上線了新的評論功能,可以限定誰可以回復帖?的功能,提供了三種選項:誰都可以評論,只有被關注者可以評論,只有被提及者可以評論三種公開度的限定。
Instagram也在測試“評論限制”新功能,批量屏蔽/限制評論。?前已經上線的?個例?:?戶(評論發布者)如果發布的評論含有攻擊性敏感詞,發布前伴有提示,提醒評論含有攻擊性敏感詞是否真的要發布。
注重隱私提供僅好友可?/僅??可?/僅作者可?/等多重維度的隱私設定有助于?戶更安?地參與互動。
另外?個例?是付費頻道會員:付費頻道會員-限定頻道的公開性讓內容創作者減輕隱私顧慮不僅能獲得?告收?,也能得到來?會員、會費的收?,形成“忠實粉絲”社區,有助于內容?態的社區化建設。
我們主要看YouTube的頻道會員案例:
YouTube有兩種會員模式。?種是YouTube整個平臺的付費會員,去?告,看原創美劇影視,消費?樂,可下載內容的模式。第?種模式是Youtuber個?頻道付費會員,吸引忠實粉絲加?。我想說的就是第?種。
為什么?V?紅有意愿開通頻道會員?
除了獲得忠實粉絲收?變現的商業價值以及付費頻道會員可以為忠實粉絲提供各種專屬功能,背后也和?紅?V對個?隱私顧慮有關。
?紅?V在完全公開的社交?絡上需要始終保持?夠克制謹慎,避免引起爭議。但在忠實粉絲付費頻道專屬會員群中,?紅?V會減輕隱私顧慮,更加回歸?我。
?如在頻道會員中發布更多與個??活相關的內容,表達更多不便在完全公開的社交?絡中的想法和感受等,因為忠實粉絲通常更具包容度,更不容易引起爭議。
YouTube頻道會員費?可以從三種會費(按?)區間選擇,?持多選:
低階 Low Levels $0.99~3.99;
中階 Medium Levels $4.99~14.99;
?階 High Levels $19.99~49.99;
頻道會員功能在2018年開始測試,?向粉絲數過10萬的YouTuber開放。
以上綜述,我們可以說:
1.匿名模式:
雖然匿名模式由來已久,但仍然是當前的??基本?戶體驗設計趨勢,尤其是匿名模式的切換便捷性?常重要。
2.減少永久性:
Stories?故事24?時消失緩解了?們的隱私顧慮,這讓?戶更安?地?然分享,已經成為國外社交媒體平臺的必備功能,Facebook, Instagram平臺的最主要、最具影響?的功能之?。
3.減少公開性:
?戶總是對在社交媒體平臺發表評論有所顧忌,限定評論的公開性能夠有助于促進?戶發帖表達,其他?戶也可以更安?地參與互動。
付費頻道會員可以限定頻道的公開性,讓內容創作者減輕隱私顧慮不僅能獲得?告收?,也能得到來?會員會費的收?,形成“忠實粉絲”社區,有助于內容?態的社區化建設。
從UE?度,我們可以為頻道會員提供專屬身份設計例如專屬徽章,專屬表情等。
THE FUTURE IS PRIVATE, 注重?戶隱私的體驗設計越來越重要!
文章來源:站酷 作者:百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著車內屏幕越來越多,越來越大,駕駛者在開車過程中因操作屏幕而分心機率逐漸升高。眾多汽車制造商均希望探索出一種降低或避免「駕駛員分心」的安全性技術。
手勢,是指人手、手和手臂結合產生的動作,作為解決「駕駛者分神」這個痛點的解決方案之一,正在全世界的汽車制造商中掀起「熱浪」。
你只需要隨意的揮一揮手,就能掛斷電話;將手指向順時針或者逆時針方向移動,就能調整音量大小。
汽車手勢的出現,源于對車內屏幕的操作。而這些操作均來自于移動端的設計標準,比如蘋果IOS設計規范中的標準手勢或者谷歌Mertiral Design中的標準手勢。
△ 移動端常見交互手勢
常見的手勢如上圖,分別為
為了滿足手機屏幕外觀改變,屏內顯示內容越來越多元化的需求,設計師們也在探索屏內手勢的新玩法。
△ android底部導航欄按鍵從左至右分別為:返回上一級、返回主頁、多任務
2017年iPhoneX的發布,正式開啟了全面屏時代。為了替代Home鍵及android底部導航欄,各大手機廠商相繼開始擁抱「全面屏手勢交互」。
在車機系統中,部分汽車制造商也在積極迎接變化,比如理想one采用「三指下滑」的手勢交互替代「返回主頁」的圖標按鍵。
△ 「 三指下滑」表示返回主頁
2019年的Google I/O大會上,新版本Android Q選擇與IOS采用一樣的手勢操作邏輯,即在屏幕下方提供一個指示條,用戶在左側頁面邊緣右滑代表「返回上一級」、提示條區域上滑代表「返回主頁」、提示條區域上滑并懸停代表「多任務」。
△ android系統中的三種全面屏手勢
隨著全面屏手勢在手機端的操作交互上達成一致,相信在不久的將來,也將越來越頻繁的在車機端看到全面屏手勢的「身影」。
當汽車與數字屏幕相遇,如何讓屏幕與內飾結合的更加完美,又能突顯品牌特性,似乎給內飾設計師帶來了許多挑戰與機遇,「一字屏」、「T字屏」、「7字屏」、「旋轉屏」應運而生。
△ 拜騰M-Byte 一字屏
△ 理想one的T字屏
△ 合創007的7字屏
△ 比亞迪王朝系列的旋轉屏
與此同時,因為成本及技術的限制,汽車制造商的量產車型不得不在屏幕上做出妥協。理想one的妥協方案是利用3塊屏幕組合,在視覺上形成「大長屏」的既視感。
要讓3塊屏幕「變」成一塊屏幕,僅僅在視覺上做足功夫顯然還不夠,多屏聯動手勢交互也不能「缺席」。
事實上,多屏聯動手勢交互依舊來源于IOS及android系統中的標準手勢,它將不同的手勢進行組合,并與頁面聯動顯示,形成了多屏聯動手勢。
理想one在停車模式下,用戶長按并向左滑動,即可將副駕娛樂屏上的信息「甩動」至中控屏。
天際ME7不僅有3塊屏幕組合而成的前排「一字屏」,還有2塊后排乘客娛樂屏,5屏聯動的手勢交互,天際采用「手勢+屏幕顯示」來解決。
在中控屏、副駕娛樂屏和后排娛樂屏上采用五指抓取手勢進入多屏互動頁面,比如想把中控屏上的內容分享給副駕娛樂屏,第一步是單擊選中副駕娛樂屏,第二步按住并拖動中控屏至副駕娛樂屏位置,第三步在副駕娛樂屏中點擊確認。
視頻版交互演示:https://v.qq.com/x/page/w08791lhqus.html
通過隔空手勢接聽或者掛斷電話,這似乎是科幻電影中才有的情節。但正如開篇所說,車內屏幕數量增多,尺寸加大的同時「駕駛者分心」的機率也增加了,盲操手勢與隔空手勢的出現,是解決這個痛點的一種嘗試。
目前量產的汽車中,盲操手勢主要是通過標準手勢與聲音反饋的組合來實現。
比如在理想one中,用戶在空調屏上左右滑動可以調節風量,上下滑動調節溫度,且系統通過聲音反饋告知用戶操作成功與否。
與盲操手勢相比,隔空手勢似乎科技感十足,備受汽車制造商的青睞,我們不僅可以在各種概念車上窺見它的蹤影,在君馬SEEK上,也可以實際操作一番。
君馬SEEK提供8種隔空手勢。
△ 左圖:接聽電話 右圖:掛斷電話
△ 左圖:上一曲 右圖:下一曲
△ 左圖:音量升高 右圖:音量降低
△ 左圖:音樂播放/暫停 右圖:玫瑰花
與君馬SEEK相同,寶馬提供「向左」手勢代表上一曲、「向右」手勢代表下一曲,「yeah」手勢代表播放或暫停。
但在許多其他操作上,寶馬與君馬的手勢操作則各有特色。
君馬SEEK使用手掌的正面與反面來區分不同的操作,正面表示接聽電話·/音量增加,反面表示拒聽/音量降低。
寶馬則選擇向屏幕方向點擊代表接聽電話,手掌向右揮動代表拒聽電話,手指順時針畫圈代表音量增加,手指逆時針畫圈代表音量降低。
在倒車影像中,手指向右揮動代表調整視角。
△ 圖片來源于「汽車界的扛把子」的短視頻《寶馬手勢控制詳細演示》
在手勢交互上,拜騰也交出了自己的「成績單」。
拜騰的手勢識別共五種,手掌向下激活手勢識別,手掌向上啟動主頁面,手指移動代表移動光標,ok手勢代表確定,五指捏合可拖拽內容。
△ 圖片來源于太平洋汽車網《拜騰Concept手勢感應系統操作演示》
這些高大上的技術看起來令人興奮,但在實際使用的過程中,依舊存在識別范圍有限、識別精度不靈敏、識別后的響應速度慢等等問題,而各個廠家的手勢識別沒有形成統一的標準,且沒有大規模在在用戶中進行推廣,必然會增加用戶的學習成本。
手勢識別對用戶來說是「真香」還是「雞肋」,相信時間會給出答案。
參考文獻:
汽車內手勢的交互設計,是一個有趣又好玩的課題,但如何讓這個課題在好玩但同時易用、好用,恐怕只有設計師不斷思考,并不斷采用一些用戶測試的方法進行驗證才能獲得答案。
文章來源:優設 作者:點滴DESIGN
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
身為用戶體驗設計師,無時無刻不被世界上的新事物沖刷著認知——互聯網紅利下降帶來變化莫測的商業動向、循著摩爾定律野蠻生長日新月異的新技術、各類亞文化群體催生出多元復雜的圈層文化、腦洞口味越來越獨特的年輕人,甚至眼下席卷全球的黑天鵝事件……
任何一個新事物的悄悄冒頭,都有可能在未知的將來影響著用戶體驗設計師。我們能做的是,在起初感受到微微震幅時,便沿著震感逐步尋找源頭,并思考未來的發展走向。趕在變化降臨前先擁抱變化。
本文通過研究近一兩年科技、社會文化以及自身用戶體驗領域的變化,從用戶體驗領域關鍵的用戶、媒介(設備與應用)、交互行為、信息與場景的五個角度出發,探索用戶體驗設計未來的趨勢,希望能帶來啟發。
隨著人工時代到來,過去機械的單向交互方式逐漸被打破,機器漸漸演化成了會主動「觀察」真實場景,「感受」用戶情感,預判用戶意圖并自動完成任務的貼心小棉襖。機器如何為人們提供更智能便捷的服務,未來還有非常大的想象空間。
1. 基于真實場景推理用戶意圖
隨著AI技術的發展,智能設備可以越來越無縫地將數字世界和物理世界嫁接起來,主動感知用戶所處情境并智能提供相應服務。
在2019的 Google I/O 大會上,Google Lens 展示的AR點菜功能可以智能識別用戶掃描的菜單并將美食網站上的相關推薦直接呈現在屏幕上。
當用 Google Lens 識別到小票信息時,可快速提取小票上的金額,且可自動彈起計算器快速幫助用戶計算人均消費,節省人工計算的時間成本。
隨著信息入口從數字空間延伸到周圍的物理空間中,未來萬物皆可為用戶體驗的媒介,設計師未來在設計的時候需要注意:
尋找適合的打通真實世界的切入點:在陌生語言、信息復雜或者難以處理等苛刻的環境下,充分發揮智能設備對信息智能讀取、批量識別與翻譯等強大能力,幫助用戶完成任務;
將用戶旅程的上下游串聯:根據生活常識和經驗預判用戶行為目的,前置推薦服務;
更加系統細心地考量干擾因素:真實場景是動態變化的,需要更全方位考慮光線的強弱、多源的噪音、實體的可視性、人員和事件的打斷等因素。
2. 任務自動化,簡化用戶旅程
為了完成一項任務,用戶往往需要借助多個應用來回切換配合,使用起來瑣碎麻煩。如今應用越做越強大也越復雜,過去僅僅解決單一場景的解決方案不再適應于用戶對于完成任務的訴求。
Google Assistant 的新能力 Duplex on the web 可以通過自動跨應用任務處理來簡化用戶旅程。只需要用戶發出語音指令「預定一輛去某地的車」,助手便可自動跨郵件、日歷、付款等應用調取信息、自動根據使用習慣做選擇,并自動填寫信息,而用戶全程需要的只是在關鍵節點輕敲「確認」即可。
2019年隨著 iOS 13 的更新,「快捷指令」推出了「自動化」能力,用戶通過「if…then…」語法便可為自己的App設計一套程序,實現如:「當我回到公司時提醒我打卡」、「每天早上10點給我的女朋友發送一條表白短信」等能力,將不相關的場景動作串聯字一起自動化執行,大大節省人工操作成本。
提升使用效率是用戶體驗設計孜孜不倦努力的方向之一。在利用新技術進一步簡化用戶旅程時,設計師可以充分利用以下因素:
借助語音輸入:比起界面觸控操作,語音交互的直達性可以「穿透」復雜界面,讓設備第一時間明確用戶目標;
基于用戶行為形成習慣記憶:對用戶長期重復的行為做分析處理,構建用戶習慣模型并主動提供服務;
適當考慮專家級用戶:隨著部分用戶的智能設備使用水平越來越高,可以考慮為專家用戶提供自定義操作腳本,滿足其自身的獨特需求。
3. 基于情感感知,主動理解用戶需求
隨著人臉識別、表情識別、肢體跟蹤等技術的提升,機器逐漸學會感性語言,主動感知用戶內在情感和心理需求。
2019年1月的CES展上起亞亮相的互動式「情感駕駛空間」技術,可通過傳感器讀取用戶的面部表情、心率等反應,調整駕駛空間內的燈光、影片類型、音樂風格等,舒緩艙內乘客心情,由此提供更人性化的出行體驗。
用戶總是會期待更貼心的服務,設計師未來對同理心的情感嗅覺更加敏銳:
利用感性線索定位用戶情緒:需要通過面部表情、特殊時間節點或者識別到的關鍵詞,對用戶情緒進行理解和定位,判斷用戶情感理解用戶內心訴求是自由探索、趣味娛樂、或者靜謐修行并提供符合用戶當下心境的服務。
綜合使用感性元素進行設計:通過使用線條、色彩、聲音和動作等傳達并喚起相對應的情感,提供更加人性化的體驗。
4. 小結
更智能的服務提供方式會讓人們生活擁有更多可能性,但一旦火候把握不得當,可能就會造成對人們生活的野蠻入侵。關于如何讓科技更好造福于人們,早在上個世紀,施樂帕克研究中心提出了寧靜技術(Calm Technology)的愿景,認為影響最深遠的技術應該是隱匿不見的,它們如纖維般融入日常生活,絲絲入扣,直至不可分辨。
隨著科技的發展,設計師對新技術不應是不加克制地應用,而應該潤物細無聲般地提供服務,幫助人們從繁雜喧囂的數字世界中解脫出來,將寶貴的注意力資源投放在讓生活更美好的事物上。
回顧人類和機器的交流語言,從命令行界面、圖形用戶界面到自然用戶界面,人機交互方式越來越貼合人與人之間更自然的交流方式,其背后是心智模型與實現模型的高度擬合的趨勢。
在自然用戶界面中,為滿足新形態智能硬件對新接口的需求,以及人們對更豐富強大的交互方式的自然訴求,越來越多的自然用戶界面被開發出來。語音交互和隔空手勢交互便是近幾年迅速發展并落地的兩種交互方式。
1. 隔空手勢交互:更自由、更靈動
為了讓機器更好地讀懂用戶的身體語言,能夠感知深度信息的攝像頭走進了日常手機。2019年國內外手機廠商的發布大會上,LG 手機 G8 ThinQ 以及華為發布 Mate 30 系列推出的隔空手勢,可實現一些簡單的諸如滑動、切歌、截屏等效果。
除此以外,隔空手勢支持更加細微的手勢,如旋轉、揉搓等,可以更直觀、更靈活的方式操控界面,讓用戶獲得一種像魔術師用意念控制事物運作的快感。
對于隔空手勢操作網上的言論褒貶不一,其中爭議性最大的就是隔空手勢宛如「殺雞用牛刀」,明明可以用更加精準的手勢觸控,為什么還要用看似很酷炫其實精準度更低的隔空手勢操作?
隔空手勢并不是要替代觸控手勢成為主流的人機交互方式,更多是對情境式障礙場景的補充。在某些場景下,用戶使用設備的條件可能是充滿干擾的。想想看當你邊看手機食譜邊炒菜的時候、邊煲劇邊剝小龍蝦的時候、疫情期間出門佩戴橡膠手套無法正常觸控手機屏幕時…..隔空手勢是不是特別好用?
每個人在特殊的場景下都有可能面臨感官障礙,未來的設計也應該更多地考慮情境式障礙的場景,讓用戶無論身處何時何地依舊能一如既往無障礙地使用設備。
2. 語音交互:更精準、更好玩
語音交互作為更趨近于人與人之間最自然的交流方式,近些年有許多發展的突破點。
在發展主線上,語音交互趨向更自然、更人性化、更個性化。過去反人類的一些溝通方式慢慢被「調教」。此外,多人會話場景下的技術方案日漸增多。
2019的 Google I/O 大會展示了一個視頻片段,視頻中的兩位嘉賓相繼吐槽,經常出現針鋒相對難以聽清的時候,這時用戶可以調節音源音量選擇性增強自己關注的人物聲音,讓另一個人「靜音」。
△ 滑動選擇音源
此外,語音交互除了在智能音箱領域廣泛應用以外,也逐漸應用在廣告等更多的傳播媒介中,刷新人們日常使用體驗。2020年2月索尼提交了一項廣告播放新專利。當用戶在觀看電視節目時,如果出現廣告,只要站起來大喊廣告中對應品牌的名字,便可直接跳過這個廣告。
設計師在語音交互場景下,需要留意以下幾個比較容易被忽視的因素:
用戶語音交互習慣培養:如今還處于培養用戶語音交互使用習慣階段,設計師需要更多地考慮應用的語音交互規則如何才能更趨近于人們日常的溝通習慣,并進一步為人們的社會習俗所接納。
真實場景下的多人音源:在現實情境中, 在多人對話場景下將面臨音源不清、穿插停頓、噪音過多等影響體驗的情況,由于計算機聽覺分析能力開始從單人音源拓寬到了多人音源,多人對話解決方案上還有很大想象空間。
改變傳統的視聽體驗:在使用場景上,語音交互接口也將逐漸運用到更多的媒介上,更全面地刷新用戶體驗。
3. 小結
人類擁有雙手、眼睛、耳朵和發聲的嘴巴,但是并不總是在每個使用場景下都能自如地使用:在安靜的自習室下聲音收到限制,在駕駛場景下注意力受到限制,在雙手拎著東西場景下雙手受到限制……但目前許多產品設計都建立在用戶能完整使用感官功能這一理想化的基礎上。
未來的發展趨勢傾向于將視、聽、觸、嗅等多通道信息完美整合起來,綜合使用多種輸入通道和輸出通道,根據用戶使用場景用最恰當的方式傳遞服務,滿足用戶多方位的需求。
盡管喬布斯曾斷言3.5英寸是手機的黃金尺寸,但作為人們日常內容消費與娛樂的窗口,手機屏幕毫無疑問地變得越來越大,甚至超出傳統物理限制。人們對大屏享受的追求與設備攜帶便捷性之間的矛盾由來已久,硬件形態的變化對舊有的用戶體驗設計思路帶來的新的挑戰。
屏幕橫縱比越來越大,而人類的手部具有先天限制,曾經慣用的界面布局方式在高橫縱比的屏幕上可能無法被大拇指無障礙全覆蓋,使得越來越多的設計更加重視利用移動屏幕下半部分。
操作與信息進一步下移:
高德地圖、蘋果地圖的搜索框下移,方便單手操作用戶快速激活輸入框;
影視資訊平臺IMDB強化底部標簽欄功能,雙擊「搜索」tab即可激活輸入框,無須艱難地觸摸頂部。
即時戰斗類手游皇室戰爭的說明卡片主要展示在下半部分,方便用戶進行卡片上的相關操作。
底部導航被賦予更多能力:
Pocket的底部標簽欄現在兼任漢堡菜單功能,在激活狀態下再次點擊主頁icon可選擇主頁上須展示的內容。
利用下滑手勢代替點擊:
Snapchat的許多表示前后進退關系的頁面都不是」返回「按鈕,而是向下箭頭,用戶可下滑退出當前頁面。
為了解決設備形態和人類手部先天限制之間的矛盾,折疊屏誕生瀏覽并顛覆舊有的界面設計方式。
更靈活的信息布局
過去在單屏設計下,考慮到用戶注意力由上到下縱向衰減,因此信息布局更多是按照優先級從上往下排序。而折疊屏中,屏幕展開后便可以開辟出更大的可利用空間,將次級頁面或者較為重要的內容曝光在第二屏,對信息的布局將帶來全新的變化。設計師為保證大小屏下順暢的閱讀體驗,需要對信息模塊在不同空間布局下的流動性有更強的把控能力。
更便捷的多任務操作
在過去的單屏體驗中,用戶只能將注意力完全集中在當前的界面中,一次只做一件事。但在實際生活中,用戶面臨的情景往往是主線任務和支線任務的頻繁交錯,并且根據會任務不同的性質自由調動自己的注意力重心,如邊看視頻邊聊天、邊看直播邊逛街等等。在折疊屏中,設計師可以探索更多主線和支線交錯進行的場景,利用折疊屏帶來的更大的屏幕空間,可以讓用戶在不離開主線場景的基礎上進行支線任務的處理,大大節約了在不同App上來回切換的操作成本。
更直觀的拖拽交互
此外,隨著多任務處理越來越廣泛使用,拖拽交互將成為重要的交互模式之一。文本、表情包、圖片、視頻等交互對象,不再需要經過復雜的分享轉發流程才能在不同App中流轉,通過拖拽的方式可以更直觀地進行交互。
雙面屏互動玩法
外折疊屏在折疊狀態下可轉為雙面屏,等于是給用戶增加多一個觀看視角。例如華為 Mate X 的鏡像拍攝可以讓被拍攝者即時獲知自己的鏡頭影像是否滿意,這一拍女友神器有望成為直男拍攝終結者。在未來更多的多人觀看和互動玩法將被開拓出來。
△ 華為Mate X 的鏡像拍攝
未來隨著5G通訊技術的成長,越來越多的設備可以同時加入物聯網,人們的生活將被各種智能設備圍繞,設計師需要參與更多屏幕外的設計,讓不同設備串聯在一起協同合作,讓用戶能更加自在地享受科技的便利。
席卷全球的新冠疫情讓數十億用戶乖乖待在家里。過去需要花費大量精力去教育的用戶使用習慣因為疫情紛紛轉變。云購物、云蹦迪、云賞櫻、云監工……人們足不出戶便可還原許多線下場景。隨著用戶線上和線下生活的界限進一步模糊,用戶對于應用的效率和情感訴求也發生了變化。
疫情讓遠程辦公學習需求劇增,多人協作場景越來越頻繁,許多企業隨之升級了電話、視頻會議、文檔制作等多人協作效率軟件。過去僅僅考慮少人場景協作的方式不適用,設計師需要比以往更多地考慮多人協作場景下,如何對海量密集的信息進行分析處理和展示。
在學習方式上,由于線下學習轉移至線上,學生群體對于娛樂向軟件也有了效率訴求。為了順應用戶訴求變化,2020年5月QQ推出學習模式,屏蔽娛樂性的內容推送,讓學生更專注在學習上。
除了效率訴求急劇提升以外,隨著長時間的線上學習與辦公所產生社交疏離感和缺失感,人們對于線上學習工作的情感化訴求也進一步增強。
2020年推出的plagi遠程辦公軟件支持設置每個人的avartar形象,讓大家在遠程辦公時依舊能時刻感受到彼此的存在。在完成任務時還可以放鞭炮慶祝,讓員工能感受到親密無間的線上辦公體驗。
設計師需要更加關注如何讓線上生活進一步與現實生活圈和時間線接軌,通過拓展真實社交下的更多伴生行為讓線上也能還原線下的真實場景細節和互動體驗,以彌補用戶對真實社交的缺失感。
疫情的發生加速了人與信息之間的連接。人們越來越習慣將自身的身體資料、心情狀態等信息沉淀在智能設備上。
為了做好廣大市民群眾的健康監測服務,輔助疫情防控工作,微信和支付寶在2020年年初都上線了健康碼服務,不同顏色的健康碼代表人們不同的健康情況,市民出入特定場所都需初始健康碼。
隨著人的數據化越來越深入,個人身份信息的線上化在各平臺上將成為更加通用的能力。設計師需要考慮如何更自然更低成本地將線下動態變化的資料信息線上化,更有效地對用戶信息進行加工處理,以及記憶用戶的使用習慣和行為,以便幫助用戶更地完成任務。
疫情的出現加速了線下生活線上化,短短時間內我們看到日常習以為常的應用為響應疫情下的特殊需求紛紛出現改造,釘釘、QQ群被改造成上網課、批改作業的地方,醫療衛生公眾號開辟了實時疫情播報與辟謠通道,無接觸設計和服務需求異常突出……這也啟發了設計師需要保持對突發事件的敏感力以及應急能力,在日常生活中留心思考,為日后突發事件提供充足的場景支撐。
在洶涌的資本語境下,互聯網設計師裹挾在商業驅動的結果導向中狂奔,對設計的倫理和責任鮮有發聲,但伴隨著互聯網紅利退潮,發展放緩,狂奔之下的人本問題也逐漸浮出水面。在大趨勢下,UX設計師需要培養自身設計對倫理和責任的敏感度,在滿足商業目的外,重拾節操,為多群體,為大社會設計,更加注重「以人為本」。
包容性設計師指在做設計產品的時候,考慮到各類用戶的訴求,輸出具有包容性的設計方案。包容性設計依舊是2020年設計主題之一,伴隨著互聯網產品全球化,在通用性和包容性上也提出了新的要求。
為身障人士設計
三星在2019年針對東南亞市場推出了一款讓聾盲人士和健全人實時交流的app:Good Vibes,盲聾人輕擊屏幕輸入摩斯電碼,預先連線好的另一臺手機就會顯示從盲聾人發來的短信。健全人用普通的文字輸入回復,在盲聾人這一端就會翻譯成摩斯電碼、以手機振動的方式讀出短信內容。
GOOD VIBES宣傳視頻:https://v.qq.com/x/page/g3108sr8qc9.html
餓了么:在餓了么送貨騎手中,約8%受色盲色弱的困擾(全國男性群體中紅綠色盲色弱占比達8%-9%,餓了么騎手男性占比90%),為此餓了么設計團隊在2019年對app的進行了重新設計,包括使用WCAG無障礙色彩對比度,以及無障礙色盤,以及調整字階,使用輔助圖形等設計手段來解決部分騎手在送貨途中使用APP的痛點問題。
△ 餓了么UED:《為騎士創造平等 — 配送 App 的包容性設計》
跨年齡段設計
谷歌助手禮貌功能 ( Google Pretty Please ) :開啟谷歌助手禮貌功能后,如果使用者在下達指令的語句中包括「Please」,谷歌助手會對禮貌的請求表示感謝,以此培養孩子的禮貌言行。
Google Pretty Please功能宣傳:https://v.qq.com/x/page/e3108ue3e2t.html
Swift Playground:當10后小學生VITA君的編程課被「可敬的發量」刷滿彈幕時,Swift playgrounds功不可沒,這款為兒童新手學習編程的軟件,用趣味的游戲方式為4歲以上低齡用戶提供了一個學習編程的低門檻平臺。
為性別平等而設計
蘋果emoji:回看歷年蘋果emoji的更新,從膚色平等,到性別、性向平等,再到為殘疾人設計,2020年再為跨性別者增加新表情,性別平等依舊是包容性設計中重要一環。
Airbnb插畫:愛彼迎在插畫系統中,也為不同膚色,不同職業,不同性別,以及身障人士進行了人物的繪制。
2019是互聯網科技隱私問題沉浮的一年,國外有Facebook因泄露隱私收到史上最大罰單,國內則打響了「人臉識別第一案」?;\罩在隱私信任危機下,個人信息和數據立法突飛猛進,美國推動《加州消費者隱私法案》,國內也將在2020年出臺《個人信息保護法》和《數據安全法》。
MIUI12推出隱匿面具功能
Android開放生態導致的權限隱私問題一直被用戶所詬病,某些APP存在用戶不授權就無法使用情況,針對這一情況,MIUI12推出了隱匿面具功能。當用戶在開啟某些APP要求授權權限時,可以選擇空白通行證進行授權,從而保護用戶真實信息。
在MIUI12的更新中,還推出了照明彈、攔截網兩項隱私保護功能
iOS 14剪貼板提醒
在iOS 14的更新中,保護用戶隱私方面進一步升級。
其中剪貼板提醒設計很貼心,當用戶打開應用,如果該應用讀取了你剪貼板的內容,會在系統頂部彈出提示,用戶能在第一時間意識到剪貼板內容被讀取,幫助用戶更好的保護自己的隱私內容。
科技的發展是一把雙刃劍,互聯網產品的發展給用戶帶來便捷和沉浸體驗的同時,也使得用戶沉溺于科技所帶來的惰性和投食之下,逐漸喪失了對真實生活的把控權,被科技綁架。
數字福祉(digital wellbeing)近年被頻頻提起,指科技產品需要權衡好數碼產品和真實生活之間的平衡,防止數碼產品過渡分散用戶的注意力而影響生活質量。
Android Q 專注模式 Google Android Q Focus Mode
Android Q的更新加入了專注模式,用戶在專注模式下,可以在系統層面快捷地關閉使你分心的應用,讓你聚焦于更重要的事情。
防沉迷系統升級
推薦技術的進步,產品體驗的升級,給用戶帶來了更合胃口的菜式和沉浸體驗,但同時也被冠上了「電子海洛因」的稱號。游戲或者內容產品的防沉迷系統依舊會是數字福祉下不可避免的趨勢。
王者榮耀在2020年升級防沉迷系統,對青少年的娛樂時間和點券充值的限制進行了進一步升級。承接話。B站在2019年推出青少年模式,在該模式下,使用時長和內容推薦等做了定制化處理。
2020年的UI設計趨勢,一方面是對往年風格的衍變和細化,另一方面,在扁平克制的界面風格盛行后,設計師們向往更自由、更突破的視覺表達。
1. 深色模式
2019年iOS 13深色模式姍姍來遲,緊接著大廠APP相繼推出此功能。在2020年,深色模式會繼續普及外,也會在可視性和實現成本方面有更多細節打磨和研究。
2. 新擬態
設計趨勢的發展是螺旋式上升的,在扁平化設計流行之后,對物體的擬真再一次回歸設計圈,新擬態以一種對舊擬物風格的再創新,重新流行起來。
新擬物風格(Neumorphism)緣起于設計師Alexander Plyuto發布在dribbble的一組作品,以投影重新對扁平界面進行了塑造,模仿出類似浮雕的視覺效果,感受耳目一新,引起大量設計師相盡模仿。
新擬態的實用性和可落地性有待商榷,但是作為一種新的風格受到設計師擁躉,也不失為下一波風潮到來前的靈感繆斯。
WWDC2020對mac OS的更新也重新定義了新擬態設計語言,在mac OS新系統Big Sur中,圖標的設計增添了輕微的漸變、投影、高光,以此來營造圖標內元素之間的縱深關系。
3. 多彩配色
在扁平簡潔UI風格盛行之后,豐富的色彩依舊是設計趨勢之一,大面積色塊,碰撞配色,帶來更具沖擊感的視覺體驗。
4. 字體裝飾化
UI界面逐漸扁平,色塊圖標弱化,為突出頁面重心和內容,iOS 11在界面標題上使用更大的字號,更粗的字重。近年在大標題的風格衍變下,文字在傳達信息外,也開始有了裝飾性作用,采用超大字體,成為頁面排版美化的一部分。
5. 更大圓角
大圓角的風格會繼續延續,相較以往,卡片的處理圓角會更大,隨之帶來的是多的留白處理,結合大字號,帶來更透氣通透的視覺感受。
Mac OS Big Sur的界面相對舊版本采用了更大的圓角;系統圖標的設計統一成圓角矩形。
6. 更豐富的插圖
UI插圖的豐富體現在樣式和內容上,樣式上開始3D化,內容上更注重插圖敘事的表達。
7. 3D插圖
3D圖形往年更多運用在動態影像或運營類設計中,隨著3D的普及運用,UI插圖也會迎來3D化,給用戶帶來更立體,更新鮮的視覺感受。
8. 講求敘事表意
相較于往年追求形式的UI插圖,新趨勢下的插圖更講求功能性,每一副插圖都承載一定的作用——傳達功能信息或透傳品牌情感;同時插圖更講求畫面表意和情節,給用戶敘事性的視覺體驗,增進用戶和產品之間的情感聯系。
9. 插圖組件化
插畫的流行,隨之而來的是成本的水漲船高——一套系列插圖為保持風格統一,往往由唯一設計師繪制,同時為兼容各類場景,設計師往往要繪制多張。
為解決插圖的成本和效率,插圖開始以組件化的方式進行繪制——插圖設計師將插畫進行拆分繪制——不同人物,不同場景,不同物件等,再通過組件化的拼接合成,使用組件的設計師可以根據需求場景自由組合,也避免了風格不統一問題。
設計師Pablo Stanley將日常繪制的插畫制成一套矢量插圖組件庫,將人物分為:半身、全身和坐姿3大類。通過不同表情、發型和服裝可自由搭配出近60萬種組合。
Pablo Stanley人物插畫系統:https://v.qq.com/x/page/s3108yeyhmt.html
10. 多維度動畫表現
新趨勢下,動畫一方面回溯復古線描手繪風格,另一方面追求更三維的體驗,同時幀率進一步提升,追求更流暢的視覺感受。
11. 手繪動畫
手繪插圖是往年的熱門,其隨性自然的筆觸,能給用戶帶來親切的感受,在新的趨勢下,動畫的加入賦予手繪插圖一份靈性和趣味。
12. 3D運動
Google Material Design通過卡片投影層級和二維動畫規律,賦予扁平界面Z軸的縱深感。隨著3D的普及流行,新趨勢下的界面,界面的運動從二維走向三維,表現出3D場景下透視感。
13. 高幀率動畫
高幀率影視從線下電影院移步到線上流媒體,手機高幀率屏幕從90Hz到120Hz逐步升級,用戶對畫面流暢的定義一再刷新,UI動畫的幀率升級也會是新的一輪趨勢。
Telegram的表情采用了高幀率動畫,給用戶更流暢的視覺感受。
體驗的持續升級,產品的高速迭代,對UX設計師的設計師效率提出了更高的要求。的設計方式是一個永恒的趨勢。
1. 從本地文件到云端協作
傳統的文件交接方式效率低下,導致設計師之間信息不對稱,最終影響產品的一致性體驗。近些年在線設計協同工具發展迅速,從UI設計、 設計交付以及組件協同等環節上給設計師提供更加實時的協作體驗,獲得大量UX設計師的簇擁。在2019 uxtool的設計工具調研中,在線設計協同工具佼佼者figma以其協作和性能優勢,大有追趕sketch之勢。
隨著團隊對設計效率要求的提高,設計文檔從本地走向云端協作是不可逆趨勢。不過設計工具的迭代是需要成本的,尤其在大型設計團隊,設計工具需要渡過陣痛期來完成迭代,進而提升設計效率和體驗一致性。
2. 科學有效的設計系統
UX的發展,從早期的靜態規范到當下的動態設計系統,是為解決產品迭代增速后帶來的設計效率和產品體驗問題。商業驅動下的產品迭代速度有增無減,設計系統依舊會是未來幾年的設計趨勢之一。
這里說的設計系統不是廣義上的設計系統,而是在互聯網設計的發展中,對組件化設計逐步迭代升華的一套設計協作方法:
「設計系統(Design systems)是一組為了共同目標而服務的內在相互聯系的設計模式和多人協同執行的方法。」(引自《Design systems》,Alla Kholmatova,C7210翻譯)。
3. 設計系統歷程衍變
組件化的發展歷經規范文檔到UI組件,再到設計系統,形態從最初對設計一致性的指導規范,到對產品研發流程的規范,以及產品設計價值觀的輸出,當下的設計系統以集大成者形式影響整個產品的設計形態。
設計系統的結構見下圖:
4. 設計系統的求同存異
設計系統并非一成不變的,他是一個動態進化的系統,會根據團隊性質、產品特性在內容上有所區分——比如大團隊更應該大而全,小團隊更傾向小而精;成熟產品的設計系統更傾向于打造完整閉環的合作流程機制,新產品的設計系統應該以小為始,快速迭代……
隨著產品的垂直化,細分化,設計系統的趨勢會是在趨勢大同之下找到適合產品和團隊自身的形態和節奏。
Material Design是一個包含了指導規范、組件,以及設計開發工具的自適應性設計系統。
它作為平臺型性設計系統,更為大而全的規范了整個生態系統的設計風格,以及提供工具讓研發者能快速產出符合規范的產品。
△ Google生態龐大繁雜,Material Design更為全面
Ant Design作為一個為to B產品提供解決方案的平臺,更多從設計可用性和完整性考慮設計系統的搭建。
△ Ant Design通過模塊化解決方案,降低冗余的生產成本,讓設計者專注于更好的用戶體驗
QQ作為一款面向95后的2C社交產品,其設計系統Q語言從風格調性上對設計進行規范,同時給予設計師一定的自由度;也考慮到QQ內兼顧多個產品,以及界面主題樣式,對基礎組件的使用場景和代碼進行了規范,方便設計和開發敏捷開發。
Q語言,給予產品的自由調性之外,也針對主題和基礎組件進行了規范。
每個產品和團隊都有自身的特征,設計系統的建設也應該有的放矢,沒有可照搬的標準答案,在大方向下找到適合自身的解決方案才是的可行之道,將效率最大化。
5. 科學有效的優化迭代
組件是設計系統中的重要組成部分,但是以往靜態的、孤立的協作方式使得組件的更新迭代滯后和阻塞。隨著設計系統的發展,設計師組件化思維的普及,組件的更新需要更科學的方式進行管理。
Figma在2019年推出的Design System Analytics功能,組件設計師可以借此查看組件的使用情況,包括引用次數,解組次數等,并可以生成組件使用情況的曲線趨勢圖,以數據的形式,科學地推動組件的優化迭代。
選擇分析的時間段;組件使用的次數曲線圖;團隊使用情況;所有組件使用情況
未來的用戶體驗會出現什么新趨勢?人工智能等算法的發展、5G技術普及、新的智能設備形態、新的信息處理技術、新一代用戶的喜好和口味……這些往后或將影響用戶體驗發展的走向。未來用戶對體驗的要求只會越來越高。
用戶體驗設計師需要了解更多的技術動向,但安身立命之本還是讓用戶真正受益:立足于用戶真實使用場景,在理性價值層面上,打造可用、易用、的設計;在感性需求層上賦予情感上的愉悅性,在反思層面賦予意義價值。
文章來源:優設 作者:騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn