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

          首頁

          HMI設計中的文案指南

          資深UI設計者

          目前市面上有很多關于 B 端或 C 端的文案設計指南類文章,但對于汽車駕駛 HMI 設計的文案總結卻幾乎沒有。可能是由于智能汽車行業這幾年剛剛興起,加上本身就屬于小眾行業。使得我們在網上很難找到相關的文章參考。我目前正在從事汽車 HMI 相關設計工作,在上一個項目中負責文案設計。項目復盤階段我整理了一套關于汽車 HMI 文案設計指南,如果你也正從事此項工作,希望此篇文章可以為你帶來一些幫助。


          設計原則


          車載屏幕設計與手機、電腦屏幕最大的不同是使用環境。手機和電腦的使用場景相對安全并且穩定。但在駕駛過程中的復雜環境如車輛顛簸、屏幕眩光等,使司機在屏幕閱讀時造成難聚焦、閱讀時間短等情況。如果司機因為閱讀困難造成行駛中注意力分散,非常容易造成交通事故。在這樣的環境下,高效、清晰、安全成為了設計文案時的重要原則。





          文案字數


          為了能滿足上述提到的設計原則,控制文案字數是首先能想到的。文字越少,閱讀時間越短,所占據司機注意力的時間也就越少,進而保證了行駛安全。那文案的字數應該控制在多少呢?







          人類對多任務復雜信息處理能力是有局限性的。當注意力集中在某一點時,其他事情的關注度會明顯降低。例如當駕駛過程中需要閱讀文字,其駕駛注意力就會出現分散甚至忽視。有學者做過專項調查,結果顯示,駕駛員駕車行駛1km內大約會遇到300種信息,至少要做出75次判斷決策,相當于每隔13.3m駕駛員就需要對路況做出1次判斷,以保證行駛安全。

          假設在城市中駕駛的平均速度為50km/h(約13.9m/s),也就是大約每隔1s駕駛員就需要做1次路況判斷。而一個普通成年人的閱讀速度大約是300~500字/分鐘(約5~8字/秒)。因此在車機屏幕內的文案字數建議不超過8字。

          但在實際設計中,我們發現有些文案字數是無法控制在8字以內的。例如「附近搜索結果較少,已擴大搜索范圍」。長文案通常屬于輔助性文案,是對某種功能或結果的一種描述。這類文言的重要層級通常不高。如何在滿足文案需求的基礎上保證其安全性。我們的做法是,增加長文案的斷句頻率,使每個斷句之間的字數不超過8個字。這樣可以減少用戶單次閱讀時間,適當增加閱讀頻次(通常增加1次)來解決長文案問題。


          文案詞表


          字詞在 HMI 設計中有很多和移動端用法相同,但也有不同。例如「您」和「你」。移動端通常建議使用「你」字,原因是用「你」代表用戶來與之對話,可以與用戶建立親密感;而「您」容易產生距離感。但在車機使用場景中,我們更想帶給用戶一種尊貴感。畢竟在國內絕大部分家庭中,買一輛車還是屬于一件比較有儀式感的事情,這里如果使用「你」增加親密感顯然就不合適了。



          距離和時間


          1、距離

          導航距離是導航產品中特有的顯示內容。對于這類信息,也應該秉承清晰、高效的原則呈現給用戶。


          2、時間


          其它注意事項


          1、避免使用網絡詞匯

          網絡語言通用性和辨識度不夠強,不是每個用戶都能理解的;而且網絡語言帶有一定的戲謔成分,與產品的品牌,和調性可能會有沖突,應避免或謹慎使用。


          2、保證內容完整

          保證文案清晰完整,避免文字過長使用「…」省略。例如控制用戶自定義昵稱長度,不得超過 8 字。在特殊情況,如顯示超長路名時,需盡可能保證路名完整性,若超出可顯示范圍,則使用「…」省略。


          3、謹慎使用「 ! 」

          感嘆號會讓文案顯得過于情緒化,容易讓氣氛過于緊張。應盡量避免司機出現情緒波動。


          4、阿拉伯數字代替文字

          阿拉伯數字在閱讀中的可識別性更強,因此需要表達數量時,盡量使用阿拉伯數字而非文字


          總結


          HMI 設計在國內正在慢慢興起,有很多內容還需要我們開發和探索。這篇文檔對 HMI 中文案的設計規范提出了參考建議,但無論是建議還是指南在實際運用時,還需結合具體情況考慮。它們不應該成為限制設計師編寫文案時的條條框框,而旨在引發更多的設計思考。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷    作者:伊高國

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          分布式場景下的OMS系統設計

          資深UI設計者

          編輯導語:OMS即訂單管理中心,可以看作是電商系統的核心,其所需要具備的功能包括匯集數據、分發、跟蹤匯總等等。那么,如何依據實際業務場景、搭建一個可支撐的、穩固強大的OMS系統?本文作者針對分布式場景下的OMS系統設計做了總結,一起來看一下。


          一、OMS所處位置

          通常我們所談論的網上購物為狹義電商,屬于廣義電商的一種,即以電子化手段進行商品交易的一種行為。

          狹義電商簡單可以描述為貨、款、以及貨與款的關系。同樣,轉化為電商系統主要核心模塊可以分為WMS倉儲系統、FMS財務系統、OMS訂單系統。

          在電商的三大核心模塊中OMS訂單系統又可以看作核心中的核心,所有系統以圍繞著訂單模塊進行構建,如果整個電商系統比作人體器官,那么OMS當之無愧可以比作人的心臟,所以OMS系統設計的好壞,直接影響著其他系統的構建。

          二、OMS作用

          OMS系統承上啟下處在電商系統業務鏈的中游。通過各個平臺聚集到OMS的訂單,系統通過會員信息、收貨信息、優惠信息、商品、積分、支付等條件對訂單提供后續處理,如合單、拆單、第三方推送、分發倉庫、通知扣減積分,庫存、創建退款,退貨申請單等操作。同時具備從其他系統上報收集追蹤訂單變化。如出庫、物流信息,并對其他系統運營分析提供數據支撐。

          可見OMS系統要具備數據快速聚集、加工、分發、跟蹤匯總的能力。

          三、OMS設計

          了解了OMS所處位置和作用,接下來談談如何設計一個穩健的、可持續性的OMS系統。

          我們知道建設大樓,會考慮地基、主體結構、周圍環境、承載以及抗震能力等各種因素。系統搭建也一樣,對達到什么樣的預期目標也需提前做出制定,制定的要求越高,設計考慮的因素就越多。

          1. 訂單相關表字段

          2. 前后端數據讀寫分離

          根據用戶群體的特點,前后端數據庫主從讀寫分離、應用服務分開靈活部署。主數據庫處理相關業務事務,大量的查詢轉移到從數據庫。一是減輕主數據庫的壓力,二是前后端物理隔離一方宕機可降低對另一方作業的影響。

          BDMS 業務+數據(中臺)庫與OMS 訂單庫特點對比:

          3. 分表歸檔

          根據C端用戶特性查詢訂單以會員維度區分,所以緩解前端訪問數據壓力,分表設計是個不錯的選擇。按照訂單號1024取模方式,會員編號尾號數字1位,2位取模方式等等。

          4. 業務解耦

          架構從單體、三層、再到分布式微服務的變化,業務邊界也從領域驅動建模開始制定到最終分而治之,各得其所。各個分拆模塊更具獨立性和可擴展性。所以設計時其他業務模塊數據不應混到單獨某一業務模塊中,數據交換傳遞統一通過服務接口形式獲取。這也體現了分布式系統一切皆服務的思想。

          業務拆分后的三大模塊主要變化時間軸:

          從客戶角度分析,C端用戶界面可操作性較低,要求簡潔、直觀、易懂。如會員中心訂單tab分類:查看全部、待付款、待發貨、待收貨、待評價、退款/售后。

          上圖分類由兩種或三種業務狀態的組合而成,如下圖為后端訂單和支付狀態值組合到前端狀態值以及顯示的算法。

          其中,會員中心的退款/售后為逆向狀態,可與其他tab正向狀態區分開。

          5. 縮短業務鏈

          OMS系統主線是從建立訂單開始為倉庫提供發貨依據到配送完成,最終實現可預知的業務閉環。

          其他事務如推送第三方商戶、扣減庫存、創建應收、釋放積分,庫存、退回優惠券,創建退款申請單等事務,可歸納到分支,實現可控的由訂單狀態流轉異步創建單據和事件進行處理。一是縮短業務鏈長度可使系統更具穩定和強健性,二是可根據活動、秒殺情況控制分支事務處理頻次,使資源更好的集中到業務主線上。

          例如,雙十一活動期間,阿里把會員等級,芝麻信用計算等附加業務暫停服務。甚至在雙十一凌晨秒殺階段,延遲退款退花唄等逆向行為。

          →正向狀態流(每種狀態分別由定時任務異步處理當前狀態下的后續業務):

          →逆向狀態(由定時任務異步處理取消訂單后續業務):

          6. 自動審單

          系統根據審單配置規則對訂單金額、地址、地區、收貨人,指定會員、手機號等信息進行合法性校驗,校驗通過的則正常流轉后續流程。不符合規則的訂單,以及包含備注的訂單轉人工,通過人工再次審核。

          7. 拆單

          拆單主要原因涉及店鋪、品類、跨境商品、商品超重以及倉庫的不同。系統根據拆單配置規則實現對訂單拆分。

          拆單一般時間節點在支付前和支付后兩種情況。拆單需要把運費、優惠、積分分攤到正價單一商品上,方便退款退貨以及財務結算。

          同時需要考慮部分退情況。如果存在滿減、累計消費金額,跨店鋪消費等優惠限制時,要注意是否滿足部分退。不滿足,則需要連帶其他拆分子訂單一起退,否則駁回。

          8. 合單

          當買家編號、收貨人手機號、地址、姓名一致時,系統自動合并生成新訂單。需要注意的是合并訂單為虛擬訂單,并不是多個訂單的合并生成父訂單,實質只是合并發貨,降低物流成本。

          9. 自動取消超時未支付訂單

          實現方式如定時輪詢任務,延時消息。當數量少時使用定時任務即可滿足設計。當數量過大時可采用延時消息,訂單生成后發延時消息,到設置臨界點時判斷是否支付,未支付則取消訂單。

          10. 虛擬出庫

          一般針對虛擬商品,無需推送到倉庫實物發貨的訂單。如手機充值、購買游戲幣等等系統可主動變更訂單為已出庫,減少人工干預。

          11. 異常訂單攔截

          異常訂單攔截一般有別于自動審單校驗,可看作是對自動審單規則的補充加強。如收貨地址臨時變更、商品破損、庫存不足、部分地區管控物流限行等等。攔截可以是系統和人工攔截兩種。

          12. 訂單開票

          開票分為紙質和電子兩種,紙質一般由倉庫隨發貨一起開具,電子發票則由訂單發貨后,出庫狀態上報到OMS后,由OMS系統調用稅務平臺開具藍色發票。退貨逆向流程則開具紅沖發票。

          13. 補償機制

          如第三方消息隊列事務消息機制,TCC補償方案等等,同時需要注意接口設計時一定要做到冪等性。

          14. 換貨

          換貨實質是訂單商品的變化,同時也可以理解為新訂單加退貨或部分退的方式,因此也會涉及到商品單價、優惠券、積分的重新分攤。這也是為什么換貨功能設計到OMS的原因。換貨主要包含同類商品、不同類商品之間,以及數量的變化,同時還會涉及到舊商品、新商品庫存和應收、實收財務結算上的變化。

          15. 其他

          最后,還要與日志監控、數據分析等系統配合做好預警服務防止惡意下單,最大程度保證商家利益。OMS作為整個電商核心系統,在設計時需要充分分析具體涵蓋的業務場景,以及與其他系統的融合,這樣才能設計出符合自己企業的OMS系統。

          四、總結

          分布式場景下系統設計是一個不斷摸索前進的過程。只有對架構設計和業務解耦的粒度大小等合理構思,才能使后續系統更具有迭代性和可擴展性。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:人人都是產品經理    作者:莫名

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          位移類手勢交互解析

          資深UI設計者

          一年前更新了文章《交互手勢的容錯性和邏輯性》之后,有很多讀者朋友詢問是否能夠做一個詳細的講解交互手勢的系列文章,講解每個手勢的不同之處、應用場景以及在工作中如何使用。

          我非常理解這些讀者的痛點,因為我在日常的工作中,也經常遇到一些難題。比如同樣是滑動,但是些許參數的變化就會導致體驗的天差地別,應該如何進行選擇。再比如與開發同學溝通過程中如何準確描述自己想要的效果,讓最后的結果不至于與自己的預期不一致。這些難題也促使我大量思考,大量體驗各種產品的手勢操作,希望能夠從中總結出規律,讓手勢的設計與落地能夠有理有據?,F在經過一段時間的積累,我認為我在這方面可以講一些能夠幫助大家的內容了。不足之處,希望大家指正。今天給大家帶來專欄的第一篇《交互手勢全解析之位移類手勢》。

          位移類手勢的描述維度

          手勢作為圖形界面與用戶之間溝通的方式之一,在便攜電子設備上大量應用。與實體按鍵相比,它有著純粹的簡潔性和無盡的創造性,手指的個數變化、不同變量的組合能夠創造出無數的操控方式。

          位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設備的手勢,本篇文章主要講解單指操作的位移類手勢,多指的位移類手勢(如捏合)將放到后續文章中講解。

          一談到位移類手勢,大部分設計師的腦海中可能會浮現出拖拽、甩動和輕掃這三個術語。然而,當我們想仔細談論他們三者之間的區別時,大部分設計師可能無法準確地描述。為了能夠準確描述三者的區別,我們在這里引入三個維度的概念,它們分別是控制方式、穩定化效果、以及閾值類型,這三者的不同的變化組合可以創造不同的位移類手勢,拖拽、甩動和輕掃之間的區別也是這三個維度影響的。當我們在討論不同位移類手勢之間的區別時,不如說是在討論這三個維度之間的區別。比如常見的輕掃手勢,因為這三個維度的變化就會產生不同的變種,而且不同變種在體驗上也存在很大差別,若不分場景隨意使用,很容易就影響用戶體驗。那接下來我們首先了解一下這三個維度。

          1. 控制方式

          第一個維度是控制方式,它分為絕對控制和相對控制,也可以通俗的表達為跟手和不跟手,區別如下。

          絕對控制/跟手:施加控制的一方(后文簡稱施控物)的某個屬性變化與被施加控制的一方(后文簡稱受控物)的某個屬性變化是對應的。

          相對控制/不跟手:施控物的某個屬性變化與受控物的某個屬性變化不是對應的。

          比如在網易云音樂的播放頁,左右滑動黑膠時,手指是施控物,黑膠是受控物,手指的橫向位置變化和黑膠的橫向位置變化是對應的,即絕對控制。上滑調出評論頁時,評論頁的位置和手指的位置沒有對應關系,手指的上滑僅僅控制評論頁是否出現,即相對控制。

          萬字干貨!交互手勢全解析(一):位移類手勢

          與相對控制相比,絕對控制允許用戶去操控受控物的屬性變化過程,因此給予了用戶更強的掌控感。比如在微信讀書閱讀頁邊緣右滑,手指的橫向位置與書籍封面的變化過程對應,模擬現實生活中慢慢合上書的感覺,如下圖。

          萬字干貨!交互手勢全解析(一):位移類手勢

          但是在有些場景,為了避免混亂,屬性變化過程是不適合被用戶絕對控制的,此時我們應采取相對控制的方案。比如 iOS 的相機中,左右滑動切換拍攝模式,由于前后不同模式之間的頁面框架變化較大,切換時會有過多元素的屬性變化,如果使用絕對控制就會導致切換拖沓且混亂,使用相對控制就能避免這個問題。

          萬字干貨!交互手勢全解析(一):位移類手勢

          2. 穩定化效果

          定義

          當我們使用手勢控制某個受控物時,由于手勢的某個屬性(如手指位移)達到閾值,進而導致受控物的某個屬性穩定在了特定狀態的效果被稱為「穩定化效果」,或者也可以稱為「吸附」。

          穩定化效果能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。

          是否有穩定化效果是區別輕掃與另外兩個手勢即甩動和拖拽的重要維度,當某個位移類手勢有穩定化效果,我們就將其稱作輕掃。

          以滑動切換抖音視頻為例,當手指上滑的位移距離和釋放速度其中的某一項屬性達到閾值后,下一條視頻會往上移動一個固定的距離然后進入穩定狀態,而不會出現停留在不完整的中間狀態,如下圖所示。

          萬字干貨!交互手勢全解析(一):位移類手勢

          在 iOS 端的微信消息頁左滑某條消息后會出現更多操作按鈕,按鈕會在手指滑動的距離達到閾值并松開后穩定在一個固定的大小,而不會停在類似下圖左所示的混亂的中間狀態。

          萬字干貨!交互手勢全解析(一):位移類手勢

          在多內容選擇的場景中,如果滑動與選中是綁定的話,一般需要使用穩定化效果。例如在 iOS 相機里選擇濾鏡時,滑動濾鏡選項不但能夠控制濾鏡選項的位置,并且會自動選中一個位于中間位置的濾鏡,位置的穩定化避免了被選中選項的不明確。

          萬字干貨!交互手勢全解析(一):位移類手勢

          如果滑動與選中是分開的,比如美圖秀秀的濾鏡選項需要先滑動后選中,這種情況下穩定化效果不是必要的。

          萬字干貨!交互手勢全解析(一):位移類手勢

          與效率的關系

          不同的穩定化規則帶給用戶的體驗差異是非常大的,最明顯的差異是在效率方面。我們使用穩定化效果的強弱來理解,穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。

          比如在比較常見的 banner 切換功能中(下圖左),無論手指位移和釋放速度的值有多高,banner 只能切換并穩定到下一個,不能夠一次切換多個 banner。而在網易云音樂的首頁排行榜中,一次滑動能夠切換多個內容卡片,我們可以說前者的穩定化效果比后者強。

          萬字干貨!交互手勢全解析(一):位移類手勢

          拖拽和甩動雖然沒有穩定化效果,但是也存在效率的高低。我們可以將其與輕掃放在一起做對比,如下圖所示,拖拽、穩定化效果強的輕掃、穩定化效果弱的輕掃、甩動它們切換效率依次增加。

          萬字干貨!交互手勢全解析(一):位移類手勢

          那么我們決定添加穩定化效果后,如何選擇強弱程度呢?選擇沒有絕對的對錯,整體來說主要考慮兩點,業務訴求和用戶訴求。例如在常見的 banner 切換中,banner 的總數量一般不會很多,業務的訴求是希望盡可能曝光每一個 banner,使感興趣的用戶進行消費,因此這里比較適合做穩定化效果強的輕掃。在云音樂的排行榜案例里,不同用戶感興趣的榜單是不同的,穩定化效果弱的輕掃可以方便用戶單次滑動切換多個,快速切換到自己感興趣的榜單的大概位置。

          百度 App 的表情面板原本是左右輕掃瀏覽表情,在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。

          萬字干貨!交互手勢全解析(一):位移類手勢

          微信視頻號的改版是一個典型的案例,舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢(下圖右),而是占據屏幕尺寸三分之一到二分之一之間的卡片形式(下圖左),并且使用甩動而非輕掃。視頻號問世初期優質內容匱乏,社交推薦算法不完善,貿然模仿抖音式的全屏化形式和輕掃手勢的話,會導致用戶瀏覽到劣質視頻時負面感受被增強且切換效率變低,反之卡片形式加甩動手勢給予了用戶更自由的選擇空間,提高了用戶的切換效率,降低了負面體驗。等到如今時機成熟,再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。

          萬字干貨!交互手勢全解析(一):位移類手勢

          在某些場景,用戶需要先通過高效的方式選擇特定區域的內容,然后進入聚焦狀態進行內容瀏覽和慢速的切換,此時我們需要設計兩種切換效率不同的手勢應對前后場景的變化。如下圖,在 iOS 的照片 App 中,先使用切換效率較高的甩動進行粗略切換找到目標圖片大概位置,點擊進入大圖模式時使用切換效率較低的輕掃進行精確切換查看。

          萬字干貨!交互手勢全解析(一):位移類手勢

          觸發時機

          觸發穩定化的時機可以分為釋放前和釋放后,不同的時機帶給用戶的體驗也不同。釋放前穩定化指的是用戶使用手指滑動屏幕時,手指位移達到閾值后,手指無需離開屏幕,穩定化即可被觸發。如下圖左,iOS 的相機滑動切換濾鏡使用的就是釋放前穩定化。釋放后穩定化指的是用戶使用手指滑動屏幕時,手指位移或釋放速度達到閾值后,手指必須離開屏幕,穩定化才能被觸發。如下圖右,常見的 banner 切換。

          萬字干貨!交互手勢全解析(一):位移類手勢

          釋放前穩定化可以避免拖沓,增加切換效率,但是缺點是無法反悔回退且缺乏掌控感。反之,釋放后穩定化可以反悔回退,掌控感強,但是缺點是比釋放前穩定化拖沓了一些。

          3. 閾值類型

          閾值是能夠觸發變化的最小值。比如當水的溫度達到 100 度時就開始變成水蒸氣,100 度就是一個閾值,溫度是閾值類型。在手指與屏幕的交互中,手指在屏幕上的某個停留時間、位移、釋放速度、點擊次數等都可以成為一個閾值類型,達到相應閾值后就可以觸發相應的變化,常見的變化有受控物的位置、大小、不透明度等,理論上變化可以是任意的。

          在位移類手勢中,通常會用到的閾值類型有手指位移和釋放速度,手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離,釋放速度是用戶的手指在屏幕表面進行位移后離開屏幕那一瞬間的速度。

          市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關的閾值判定方式,因為其不太符合常識。因此我們在設計位移類手勢時,能夠選擇的閾值判定方式常見的有兩種:① 判定手指位移和釋放速度滿足任意一個即可;② 僅判定手指位移。

          當我們設計手勢時,就需要考慮兩者的區別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離,因此 ① 的主要優點是高效。但是由于我們無法預判釋放速度帶給受控物的移動距離長短,所以相對應的缺點就是易誤操作和不精確。②就恰恰相反,由于不存在釋放速度造成的不確定因素,它的優點是不易誤操作和精確,缺點是低效。

          甩動和拖拽之間的區別就在于閾值判定方式,甩動是 ① ,拖拽是 ② 。如下圖,當在微信消息列表找相應的消息時,用戶的訴求就是能夠快速找到特定消息的位置,對特定消息的出現在屏幕的位置也沒有特定要求,只要能夠被手指點擊到即可,因此選用甩動較為合適,但是對于調節音量、亮度這一類的操作,滑動的范圍有限,因此用戶對效率沒有特別的要求,但是對于滑塊位置的精確度有要求,因此選用拖拽是更為恰當的。

          萬字干貨!交互手勢全解析(一):位移類手勢

          再舉一個反例,在 Steam 移動端橫滑首頁的泳道卡片時(下圖左),使用的手勢是拖拽而不是甩動,瀏覽起來特別低效。更適合的做法應為甩動,會更符合此場景下的快速瀏覽的訴求,如下圖右的豆瓣。

          萬字干貨!交互手勢全解析(一):位移類手勢

          對于輕掃來說,使用哪種閾值判定方式有多種情況(如下圖所示)。在本文中,根據閾值類型、穩定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類(A-E 的命名方式僅存在于本文章,因此在向其他人傳達時,盡量使用在后文我介紹的手勢描述而不是類別名稱,以便于對方理解。)。后續會為大家仔細舉例講解,大家現在僅了解一下即可。

          萬字干貨!交互手勢全解析(一):位移類手勢

          當我們在刷抖音視頻時使用的手勢就是輕掃,是否滑動到下一條視頻進行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可,對應的手勢類別是上面表格中的輕掃A。如下圖所示,在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向位移大于半個屏幕高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式,因為既省力又便捷。

          萬字干貨!交互手勢全解析(一):位移類手勢

          如果將閾值判定方式改為 ②僅判定手指位移,對應的手勢類別是上面表格中的輕掃 B,并且位移的閾值設置得比較大的話,給用戶帶來的負面體驗可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后,想要下滑收起時,App 僅判定手指位移,而且這個位移閾值設置得比較大,對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗很差。即使由于開發資源有限我們只能做到僅判定手指位移,我們也可以通過減少手指位移的閾值來降低負面體驗。

          萬字干貨!交互手勢全解析(一):位移類手勢

          但是某些場景下,②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁,上下滑動瀏覽微信消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值的話,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序選擇頁。

          萬字干貨!交互手勢全解析(一):位移類手勢

          因此,對于位移類手勢,選用哪種閾值判斷方式要依據用戶使用場景和訴求,不能想當然地設計。

          常見位移類手勢解析

          了解完三個基礎維度后,我們再將其進行組合,從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢,我列舉出了常見的 7 類,如下圖所示,這 7 類基本涵蓋了 95% 以上的場景,我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置,因此接下來在描述下面手勢的定義時我都以受控物的位置變化進行舉例。

          萬字干貨!交互手勢全解析(一):位移類手勢

          1. 拖拽

          定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,無論釋放時手指是否仍有速度,受控物都會立即停止移動。(下圖的動態演示由 Principle 制作,觀看會有些不太直觀)

          萬字干貨!交互手勢全解析(一):位移類手勢

          特點

          精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩定化效果,拖拽適用于對操作精度要求高,對效率要求低的功能。

          案例

          在 iOS 設置中調節亮度時,在有限范圍內,手指左右拖拽可以控制亮度變化。

          萬字干貨!交互手勢全解析(一):位移類手勢

          2. 甩動

          定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指仍有速度,受控物將移動一段距離后才慢慢停止,移動的距離與釋放速度呈正相關。若釋放時手指速度為 0,則受控物立即停止移動。

          萬字干貨!交互手勢全解析(一):位移類手勢

          特點

          精確度低但效率高。由于閾值類型判定釋放速度和手指位移,甩動適用于需要快速瀏覽較多內容的場景,如滾動瀏覽列表。

          案例

          在微信的消息列表頁,使用甩動手勢控制列表上下移動,若釋放時仍有速度,列表將仍移動一段距離后才慢慢停止。

          萬字干貨!交互手勢全解析(一):位移類手勢

          3. 輕掃 A

          定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達到閾值,受控物將穩定在一個新位置。若釋放速度和手指位移沒有任何一個達到閾值,受控物將回到原位置。

          萬字干貨!交互手勢全解析(一):位移類手勢

          特點

          由于輕掃擁有穩定化效果,因此它能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性,就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」,這讓輕掃 A 與輕掃 B-E 有兩點不同,一是輕掃 A 可以通過釋放速度的快慢去控制內容的切換數量的多少,更加高效,二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內容,因此更加省力。

          案例

          在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向移動大概半個視頻高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。

          萬字干貨!交互手勢全解析(一):位移類手勢

          4. 輕掃 B

          定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指位移達到閾值,受控物將穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物將回到原位置。

          萬字干貨!交互手勢全解析(一):位移類手勢

          特點

          輕掃 B 與輕掃 A 相比唯一的區別是閾值類型減少了釋放速度的判定方式,這提高了觸發切換的難度,使操作成本變高,但是在某些場景下,這也降低了誤操作的概率。如下拉刷新等。

          案例

          比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁,這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值判定方式,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序頁面。

          萬字干貨!交互手勢全解析(一):位移類手勢

          因此,當頁面已存在一個滑動操作的情況下,還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發時,為了避免誤操作,會將后者的手勢設計為輕掃 B。

          上文提到,輕掃 A 的閾值類型為判定「釋放速度和手指位移」,輕掃 B 的閾值類型為僅判定「手指位移」,由于前者的實現成本比后者高,導致本應適合做成輕掃 A 的功能有時只能妥協做成輕掃 B,比如之前提到過的美圖秀秀的短視頻評論浮層案例,但我們也可以通過減少手指位移的閾值來降低負面體驗,后文會講解如何與開發同學溝通。

          5. 輕掃 C

          定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是受控物并不隨著手指的控制而同步移動,僅當釋放時手指位移達到閾值時,受控物才開始移動并穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物位置則一直保持不變。

          萬字干貨!交互手勢全解析(一):位移類手勢

          特點

          上文講到過釋放后穩定化和相對控制的缺點,釋放后穩定化比較拖沓,相對控制讓用戶缺乏掌控感。兩者如果應用到了同一個手勢(即輕掃 C ),就會導致用戶在滑動屏幕時得不到任何反饋,用戶會疑惑是否因為自己操作不當或是設備出現故障。只有當用戶手指離開屏幕后才會發現觸發了操作,整體的交互流程給用戶一種滯后與延遲的感覺。

          因此輕掃 C 與其他類別的輕掃相比存在劣勢,但是它也存在很多的 App 的 H5 頁面中,我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多,因此只能退而求其次選擇輕掃 C 這個較差的方案,實際上在同樣的應用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗。

          案例

          下圖左是 QQ 的個性裝扮的 H5 頁面,卡片的切換使用的就是輕掃 C,如果能夠優化為輕掃 A 體驗會更好,比如下圖右的音街首頁卡片的設計。

          萬字干貨!交互手勢全解析(一):位移類手勢

          6. 輕掃 D

          定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是手指位移達到閾值前受控物并不隨著手指的移動而移動。若手指位移達到閾值,無需手指釋放,受控物將開始移動并穩定在一個新位置。若手指位移沒有達到閾值,無論是否釋放,受控物位置則一直保持不變。

          萬字干貨!交互手勢全解析(一):位移類手勢

          特點

          相對控制的方式降低了用戶的掌控感,釋放前穩定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時,我們不希望用戶過于自由地操控對象之間的屬性變化過程,并且犧牲掌控感從而增加單次的切換效率。

          案例

          比如 iOS 的相機中,左右滑動切換拍攝模式時,由于前后不同模式之間的頁面框架變化較大,切換時會有不同元素的屬性變化,如果使用絕對控制和釋放后穩定化就會導致切換混亂且拖沓,使用相對控制和釋放前穩定化就能避免這個問題。

          萬字干貨!交互手勢全解析(一):位移類手勢

          7. 輕掃 E

          特殊說明

          上文我們講到,通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩定化前,受控物一旦穩定化,就脫離了手指的控制,需要手指離開屏幕后再次接觸屏幕開始下一次控制。

          輕掃 E 的不同之處在于它可以在受控物穩定化后,仍然控制受控物朝著下一個節點穩定化,在每個節點之間切換時能夠明顯感覺到分段感,如下圖案例所示。

          萬字干貨!交互手勢全解析(一):位移類手勢

          由于輕掃 E 相對于輕掃 A-D 的特殊性,控制方式中的絕對控制和相對控制無法覆蓋這個特殊現象,因此我們使用「多段相對控制」來命名輕掃 E 的這種特殊的控制方式。

          定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,若手指位移達到閾值,無需手指釋放,受控物就穩定在了一個新位置,但是此時手指還是仍然可以操控受控物繼續移動的,并且繼續移動過程中如果手指位移達到閾值將會到達下一個穩定化狀態。

          萬字干貨!交互手勢全解析(一):位移類手勢

          特點

          輕掃 E 適用于需要在多個對象之間快速切換和確認的場景,它的使用感覺很接近拖拽。如下圖所示,我們可以這樣理解,當被切換的對象數量接近于無窮大同時每個對象之間的距離接近無窮小時,輕掃 E 就可以視為拖拽。

          萬字干貨!交互手勢全解析(一):位移類手勢

          案例

          iOS 相機人像模式切換打光方式、微信的通訊錄滑動字母索引導航,它們都使用輕掃 E 來滿足多個對象之間快速切換和確認的需求。

          萬字干貨!交互手勢全解析(一):位移類手勢

          實戰案例

          了解完上述的維度和常用手勢后,我們在腦中就可以形成一個思考框架。當我們要針對一個功能設計位移類手勢時,就可以從閾值類型、穩定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實際項目作為案例給大家講解一下思考過程。

          本案例是網易云音樂陌生人版一起聽中的一個功能,一起聽的雙方在聽歌過程中會收到彼此共同信息,比如聽歌口味相似度、是否同城、都喜歡哪些歌手等,目的是為了增加可玩性和互動性、降低退出率,鼓勵用戶互相了解、提高一起聽過程中的社交體驗。

          為了營造儀式感和避免信息過載,共同信息的展示方式設計為了一次只能看一條,進入浮層后默認展示最新的一條,可以通過滑動查看上一條。因此為了避免出現兩條同時占據展示區域的混亂狀態(如下圖左),我們為其添加了釋放后穩定化效果(如下圖右),同時為了方便用戶可以快速瀏覽舊的共同信息,這里使用的穩定化效果是較弱的,用戶可以通過滑動一次切換多個共同信息。

          萬字干貨!交互手勢全解析(一):位移類手勢

          由于需要滿足用戶快速瀏覽舊的共同信息的訴求,閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」,用戶可以通過控制釋放速度進而控制信息的切換數量??刂品绞絼t選擇了掌控感強的絕對控制。最后的結果如下圖所示。綜合三個維度進行歸類,此手勢為穩定化效果較弱的輕掃 A。

          萬字干貨!交互手勢全解析(一):位移類手勢

          手勢角度的處理

          位移類手勢的方向一般為上下或左右,但并不是一定要完全垂直或水平才能夠觸發手勢。當上下滑動和左右滑動同時存在于一個頁面時,默認會有一個容錯角度,比如上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑,如下圖所示。

          萬字干貨!交互手勢全解析(一):位移類手勢

          但是有時開發同學出現失誤,導致容錯角度沒有均分,例如下圖中觸發上滑和下滑的角度極小,導致用戶在上下滑動時非常容易誤操作為左滑和右滑。

          萬字干貨!交互手勢全解析(一):位移類手勢

          云音樂也曾有過類似的遺留問題,iOS 端的播放頁上滑調出評論頁極易誤操作為左右滑動黑膠切歌(如下圖 A,現已修復),安卓端的賬號側邊欄上滑瀏覽極易誤操作為左滑收起側邊欄(如下圖 B )。

          萬字干貨!交互手勢全解析(一):位移類手勢

          因此,在驗收階段,除了上述的三個維度外,角度的容錯性檢查也是重要的一環。因此在驗收時間充裕的情況下,最好要切換不同的手持方式分別體驗一次,因為有些問題只有在特定的手持方式下才能夠被發現。(下圖素材來源于網絡,侵刪)

          萬字干貨!交互手勢全解析(一):位移類手勢

          客戶端的角度判定方式實際上是一個比較復雜的過程,上述的內容是簡化的版本。后續將延展為一篇獨立文章給大家仔細聊一聊。

          客戶端的差異

          上文講到,基礎的三個維度即閾值類型、穩定化效果和控制方式決定了手勢的類別,是設計階段一定要定義清楚的。但是除此之外,設計一個手勢需要定義的細節非常多。比如受控物的移動是否有速度曲線?手指位移與受控物之間的位移的比率是多少呢?這些都是開發階段不得不面對的。幸運的是,安卓和 iOS 有系統封裝好的一套系統組件可以調用,操作系統自行解決了剛才講到的細節問題,但是 H5 框架下是無法調用系統組件的,手勢的各種細節都需要前端開發人員自己編寫,難度較大,大部分情況只能實現一些比較簡陋的效果,這也是為什么在很多 H5 框架下的界面滑動的體驗比較差的原因。

          高效溝通

          由于信息不對稱,與開發的溝通過程中,很容易出現理解偏差。比較常見的錯誤有:將甩動誤解為輕掃 A,將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達不到預期的情況,很多設計師不知道如何讓開發同學修改,只能說“這個手勢不絲滑,優化一下”,開發同學也是一頭霧水,不知道往哪個方向優化。如果我們能夠直接說出“閾值判定方式現在只有手指的位移,需要釋放時的速度也能夠觸發跳轉;這個位移的閾值太高了,滑動時很難觸發跳轉,需要把閾值改為 16pt ”類似這樣準確的描述,就能夠大大降低溝通成本,順利驗收。為了避免溝通出現問題,下面我將日常經驗總結出現希望能夠幫助到大家。

          首先,一旦涉及到位移類手勢,除了必要的文字描述外(可參考上述的手勢定義的描述),最好給開發體驗 demo 或者其他 App 上類似的效果,否則很容易產生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發同學展示,但是 App 可能會更新,案例可能在未來某個時間就找不到了,所以我用 Principle 做了一個簡易的基礎 demo 集合,和我上述介紹的手勢是對應的,大家可以拿著這個 demo 給開發同學演示大概的效果,也可以在這個 demo 源文件修改。

          萬字干貨!交互手勢全解析(一):位移類手勢

          拖拽和甩動由于需要定義的細節參數都被操作系統提前封裝好了,不需要我們給到額外的標注。但是對于輕掃,我們需要將細節定義清晰,下面將詳細講解。

          1. 閾值類型

          上文講到,閾值類型一般有兩種:① 判定手指位移和釋放速度滿足任意一個即可;② 僅判定手指位移。①的開發成本高于②。

          如果我們選用輕掃的閾值類型是①,開發同學編寫代碼需要兩個參數的閾值,分別是手指位移和釋放速度。手指位移閾值一般默認為受控物的1/2,例如下圖的全屏短視頻和 Banner 。

          萬字干貨!交互手勢全解析(一):位移類手勢

          當然我們也可以自定義一個閾值,比如 100pt、受控物高度的 1/6 等,沒有特別的需要的話使用默認值即可而且也不用給開發同學特殊說明,但是如果有特殊需要想要修改默認值,就要告知開發同學你自定義的手指位移閾值。對于釋放速度閾值,通常默認就非常的小,幾乎是大于 0 即可觸發,一般情況下使用默認值即可。

          在本應該選用①的場景中,如果由于技術成本原因不得不選用②,需要注意的是由于缺少了釋放速度的判定,手指位移的閾值我們需要設置得小一些方便用戶觸發,否則就會出現上文中美圖秀秀浮層的那樣的體驗問題。經過我的實驗,手指位移閾值一般定為 16pt 是比較適中的,既不會太容易誤操作也不會難以觸發。

          2. 穩定化效果

          輕掃是一定存在穩定化效果的,關鍵在于告知開發是釋放前穩定化還是釋放后穩定化。從開發的角度講,系統會監測用戶的行為,用戶在使用滑動時會有按下(down)、移動(move)、抬起(up)三個行為,釋放前穩定化是在移動階段判斷閾值并觸發操作、釋放后穩定化是在抬起后判斷閾值并觸發操作,開發成本幾乎沒有區別。

          上文提到過穩定化效果強弱的概念。穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。首先,我們需要確定單次滑動允許切換多個還是只允許切換一個,如果允許切換多個,開發同學會設定一個控制切換難度的系數,而只允許切換一個的話就不存在這個系數。通常我們也不需要修改這個默認系數,但如果想讓操作更加難或容易觸發,可以告知開發同學修改這個系數。

          3. 控制方式

          絕對控制比相對控制的開發成本高,如果開發資源并不是很緊張,需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發同學控制方式,否則很可能被視為相對控制處理。

          手勢排查

          通過本文的學習,我們不但可以在開發工作進行前與開發同學高效溝通,保證開發工作的順利進行,也可以對自家移動端產品的現有手勢進行逐一排查發現問題點進行記錄,并且找到合適解決方案,然后用準確的語言描述給開發同學。下圖是我在進行手勢排查后輸出的表格,挑選出一些有代表性的案例給大家作參考,開發同學可以通過它快速明確問題,理解解決方案。

          萬字干貨!交互手勢全解析(一):位移類手勢

          結語

          本篇文章的歸納總結是通過日常積累和思考得來,希望能夠幫助大家在設計與溝通層面解決實際問題,如果有任何疏漏和不嚴謹的地方,希望大家能夠指出,后續的更新會將專欄不斷完善,交互手勢系列暫定的后續更新計劃如下。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:優設 作者:設成于思

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          設計模式|輸入線索:如何讓用戶清楚該輸入什么?

          ui設計分享達人

          本文是《設計模式周周看·Ant Design 為你講透設計模式》周刊第五期內容,上期內容,我們介紹了一種輔助用戶輸入的設計模式:輸入說明

          這一期,我們繼續介紹一種輔助用戶輸入的設計模式:輸入線索。


          What 是什么

          簡介:「輸入線索」是指用示例輸入或說明文本以占位符(Placeholder)的形式顯示在輸入框中,以幫助用戶理解需要輸入的內容,或給出相關線索的一種設計方式。

          例子:  在 Ant Design 輸入框組件 的示例中(如下圖),我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內容或解釋輸入字段的功能。


          Why 為什么

          「輸入線索」這種設計模式可以讓界面不言自明。由于輸入線索的內容位于用戶輸入的位置,因此用戶往往不會忽略這個信息。



          對比:「輸入線索」VS「輸入說明」

          「輸入說明」與「輸入線索」都是輔助用戶輸入的設計模式,這些模式可以幫助用戶明確輸入信息的內容形式。

          那么這兩種模式有什么差異性呢?


          使用「輸入說明」這種模式時,快速瀏覽用戶界面的用戶可能會輕易地忽略說明信息,因為用戶的目標是盡可能快地完成表單,然后進入下一步操作(雖然有的場景下這也是其中一個設計目標,但在這里不討論)。因此,過多的文本說明也會給用戶帶來較大的心智負擔。


          Google 注冊賬號頁是結合使用「輸入說明」與「輸入線索」的一個典型案例。通過使用「輸入線索」告訴用戶需要填寫的內容,通過「輸入說明」來補充填寫信息的相應意圖,進而使得用戶可以清晰地意識到需要填寫什么,并輸入相應信息。


          When 什么時候使用

          用戶可能不一定清楚需要在輸入框中輸入的內容。在設計上,你可能不希望在輸入框附近上添加更多的字,造成視覺壓迫。還有一種情況,如果界面空間有限,無法使用「輸入說明」時,也可以考慮使用「輸入線索」。當出現下拉菜單或者組合輸入框時,往往需要配合該模式進行使用。


          使用條件

          · 輸入框要求輸入的內容可能不容易讓人馬上理解;

          · 設計上不希望在其他地方補充新的內容;

          · 可以承載文本的輸入空間可能沒有太多;

          · 配合下拉菜單或者組合輸入框使用;


          How 如何使用

          1. 選擇適當的提示文本

          · 對于下拉列表,使用 “選擇”、“選取”等單詞,英文使用 Select Choose 或者 Pick 等;

          · 對于文本輸入框,使用“輸入”等單詞,英文使用 Type 或 Enter;

          · 盡量使用祈使句,以動詞短語開頭;

          · 以描述輸入內容的名詞結尾,例如“選擇狀態”,“在此處輸入消息”或“輸入患者姓名”等;


          2. 提示文本的位置

          有關文本提示的位置應該和輸入值的位置一致。 比如,提示本身不應該是下拉菜單中的可選值。


          Example 案例

          案例一:Ant Design Pro 登錄功能預覽

          用戶需求:用戶登錄功能的預覽與體驗

          Ant Design Pro 是一個中后臺開發的模板腳手架,其并不提供真實賬號登錄服務。因此 Ant Design Pro 的開發者為了模擬真實使用環境,提供了一個可正常登錄的賬號,賬號密碼分別 user 和 ant.design ,其余情況下用戶輸入的賬號密碼均會提示不正確。


          在這個場景下,通過將正確的賬號密碼以輸入線索的方式顯示在占位符中,巧妙地告訴體驗 Ant Design Pro 的用戶正確的賬號密碼。


          案例二:163郵箱登錄頁面

          用戶需求:登錄賬號

          163郵箱登錄頁面的賬號輸入框中的輸入線索非常有用。正常用戶在看到后綴有 @163.com 時可能并不一定能意識到可以輸入手機號碼。而通過在占位符中 顯示「郵箱賬號或手機密碼」,高效便捷地提示了用戶可以直接輸入手機號碼進行登錄。


          案例三:小米賬號登錄頁面

          用戶需求:輸入賬號密碼

          「輸入線索」有一種設計上的變體,稱為「浮動標簽」。因為一般來說,當用戶激活輸入框時,占位符文本會消失。而「浮動標簽」不會消失,通過移動位置和更改大小駐留在界面中。這種設計方式可以使得界面變得簡潔、優雅。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷  作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          折柱餅 +3 個套路,簡單圖表你真的會用嗎?

          ui設計分享達人

          本文一句話概括:數據可視化中,如何用最簡單的圖表高效地傳遞信息。


          人人熟知的 3 類圖表

          看似簡單的 3 類常掛在嘴邊的「折柱餅」,你真的知道怎么使用嗎?

          @rubyxrli 在 紐約的Uber數據可視化大會上所做演講中提到: 
          根據我的經驗(基于原型研究超過10年)大多數可視化問題可以通過一些圖表來解決。很少情況下,需要你去想出一個全新的表達方式。像條形圖、折線圖、散點圖、透視表等「圖形化主力」真的很難被替代! 


          對于大部分的企業級產品使用者來說,基本的圖表類型,通常可以為大多數當前頁面的問題作出解釋,但是我們要做并不是簡單地調用一個圖表就結束了,如果想讓你的頁面更有效地傳遞結論、原因,可以讓使用者探索更多可能性,甚至去發現新的分析思路,那么首先你需要掌握下面的分析套路:


          3 個套路

          「對比,細分,溯源」,給簡單的圖表加點「戲」

          在數據分析中,分析思路一般可以概括為「對比,細分,溯源」,這也是《數據化管理》中提到六字箴言。首先我們來了解一下這六字箴言的具體含義:

          此處引用部分《分析思維 第三篇:數據分析的三板斧》內容


          1、對比

          對比分為橫向對比和縱向對比。

          · 橫向對比是指和“他人”比較,比如,兩個網站的用戶流失率;

          · 縱向對比是指按照某個維度,和“自己”比較。比如,這個網站上個月今天和這個月今天的用戶流失率。

          2、細分

          細分是指分維度、降低粒度來分析數據。

          · 分維度是指增加維度,比如,離職率按照部門維度來分析;

          · 降低粒度是指降低數據聚合的程度,比如,離職率不按年份,而按照月份來統計。

          3、溯源

          溯源是指在對比、細分鎖定到具體維度和粒度之后,依然沒有結論,那就需要查看原始數據或相關聯數據,洞察數據,從數據中尋找靈感。


          3x3 實踐

          第一個 3 代表圖表類型;第二個 3 代表分析套路。

          了解分析思維的三個套路后,可以嘗試在自己的圖表中檢驗打鉤。

          下面我用幾個例子來說明一下,如何打開圖表設計的腦洞:  


          折線圖

          通常在一個數據概覽頁面,人們都會使用一個折線圖,來表示一個關鍵指標的發展趨勢,當然這么做非常直觀,也非常準確。當我們為折線圖添加一個對比的維度,就可以使折線圖表達的內容更加豐滿。

          橫向對比

          可以是橫向對比“和他人比”。


          縱向對比

          也可以是縱向對比“和自己比”。


          添加輔助元素,強化關鍵信息進行對比

          G2Plot 為圖表提供了很多圖表輔助信息組件:https://g2plot.antv.vision/zh/examples/general/label

          例如:

          · 參考型組件:參考線、趨勢線、輔助區域等

          · 極值型組件:最高/低點、預警線等

          undefined


          細分維度

          通過右上角的 TAB 切換,提升和降低數據聚合的程度


          柱 / 條形圖

          橫向對比

          和別人比。


          細分維度

          將維度拆分進行分析。


          在使用柱狀圖/條形圖時,問問自己「對比」的呈現效果好嗎?

          這是使用者在使用柱形圖做對比時,經常遇到的問題:

          · X 軸類別數量過多,柱子非常密集

          · 軸文字標簽數量過多,文字在 45%旋轉后可讀性降低

          這時,設計者應該試著旋轉柱圖,把它變成一個條形圖。


          對比是好的,但不要做無用的對比


          餅 / 環圖

          縱向對比

          餅/環圖天生自帶「縱向對比」的性質,但是除了用一個餅/環圖之外,還有什么做法?


          細分維度


          溯源,顯示更多詳情幫助用戶定位問題


          合并極小值的維度,在有需要的時候做細分


          拓展:N x N 實踐

          第一個 N 可以代表圖表類型,也可以代表頁面,但需要是一個實體;

          第二個 N 代表分析思路,上文中提到的 3 個套路只是眾多分析思路中被總結出最為常用的,還可以根據不同業務場景的訴求去添加思路。

          這個矩陣的表格填出來后,除了可以幫助設計者檢驗是否高度利用了圖表區域之外,還可以總結出一份屬于自己業務場景的圖表指引,傳遞給下一個設計者使用。


          結語

          在企業級產品設計的領域中,用可視化的方式表達信息,讓數據不再枯燥難懂,是一種常見的設計手法。在真實的業務場景中,大部分用戶青睞 dashboard(報表頁面),來呈現「數據概覽」、「數據監控」、「數據明細」等信息,其中的重要組成部分即「統計型圖表」。如何恰當使用「統計型圖表」來實現用戶的分析目的? 這對沒有可視化基礎的制作者來說,還是有一定的難度。

          通過以下三步,讓用戶更高效地讀取重要信息,驅動業務決策,實現商業價值。

          本文用簡單直白的工具方法,為「零基礎」的圖表制作者提供一種簡單易學的思路,讓你的圖表在 Dashboard 里更全面、更有效地傳遞關鍵信息。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷  作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          數據可視化的驅動與使能

          ui設計分享達人

          老司機開車

          開車的同學知道,一般我們用“指哪打哪”來形容汽車轉向精準、沒有虛位?!爸改拇蚰摹笔侵钙嚨牟倏伢w驗,更是駕駛樂趣的一部分。駕駛員輕撥動方向盤,輪胎轉向帶來的阻力以及路面反饋傳至車身,動力的線性輸入與制動的時實響應讓駕駛員能控制自如。


          “指哪打哪”形容車聽從驅使,是人對車的輸入控制以及車對人的輸出反饋,是一個互相修正的過程。在數據可視化設計中,操作“聽從驅使”的可視化作品又是一種什么樣的體驗呢?



          聽從驅使示例

          示例一

          某公司運營同學需要找出品類銷量下滑的原因。在圖表上,運營同學的思路是找出癥結、定位問題、關聯分析、驗證設想、得出結論并給出運營策略調整方案。



          示例二

          某同學向公安報案稱賬戶被盜大額資金,公安案件科分析專員從受害人的資金流向追溯至相關木馬團伙,通過關系擴散查驗可疑人員,順藤摸瓜最終找到嫌疑人并抓捕。

          上面兩個示例提供足夠便捷的過濾篩選組件,配合鼠標懸停、點擊、框選等操作,方便用戶查看更多視圖空間,快速定位感興趣的數據空間,這種操作體驗能幫助用戶事半功倍。



          何謂聽從驅使

          聽從驅使本質上是用戶對可視化的控制能力,是一種主觀感知與信念。聽從驅使包括兩部分,“驅動 Drive”與“使能 Enable”,這兩步正向不斷迭代,引導用戶一步步剝開數據的面紗。



          驅動 Drive

          數據可視化聽從差遣,用戶可根據前饋信息預示、驅動可視化,用戶對可視化作品享有控制權,數據可視化符合用戶的顯性需求。


          使能 Enable

          數據可視化遂用戶心愿,用戶根據反饋引導進行下一步操作,幫助探索數據規律或者發現更多數據奧秘,數據可視化符合用戶的隱性需求。



          為什么要聽從驅使

          增加探索意愿

          用戶處在海量、無序、異構數據的海洋中時,需要隨時面對有限屏幕空間與無限數據空間帶來的沖突??梢暬瘧斀o予用戶適當的選擇權,讓其可對信息進行控制,具備信息聚焦、下探的能力。這些可視化能力能提升用戶的參與度和探索意愿,不讓其迷失在數據的海洋中。


          減少焦慮感

          移動端長按滑動(Touch & Hold)更新激活點數據、左右輕掃(Swipe)平移視圖是用戶的既定認知。左圖長按滑動后的反饋為平移視圖,此時用戶心里咯噔一下,又繼續操作了一遍,操作的預期與結果確實不一致,有些“不聽使喚”。右圖符合用戶心智模型,預期與輸出結果一致。


          不聽從驅使:視圖平移,不符合預期-長按滑動時數據點不更新(如下圖)


          聽從驅使:視圖不動,符合預期:長按滑動時數據點更新(如下圖)


          由此可以看出,如果可視化作品操作時不符合用戶的既定認知,可視化則變得不受控,用戶心里會緊張、導致重復范錯,甚至責怪自己。


          如果賦予用戶較高的驅使感且得到正向的反饋指引,引導用戶操作下一步,那么用戶心態會更積極,更愿意接受挫折及試錯,這種聽從驅使可以消除未知、不確定性所帶來的緊張與焦慮。



          怎么做到聽從驅使

          前面講過,可視化聽從用戶驅使需具備兩點能力:

          · 驅動 Drive:通過前饋預示讓用戶知道可視化能做何互動;

          · 使能 Enable:通過反饋引導用戶進一步讓用戶與可視化互動;


          可視化交互時,驅動用戶完成一期探索,探索后反饋引導發出的信號成為下一步操作的前饋提示,再次驅動用戶操作可視化后,如此反反復復直到幫助用戶找到數據的潛在規律或者找出數據真相。


          從心理學的四個概念進一步解釋:

          · 示能:可視化特性與預設交互的關系,是否可被操作;

          · 意符:即信號,告訴用戶可采取什么操作,如何行動;

          · 映射:事物之間的關連關系,是怎么聯系的;

          · 反饋:操作之后的回應,是否及時、有效;


          示能

          示能 Affordance  指可視化作品可能的潛在行動,只有當它們都是可以被感知的用戶才容易地發現它們,它揭示了用戶與可視化互動的可能性。


          例如我們默認認為屏幕上的可視化都可以進行交互,PC 可視化作品可以 Hover 交互,移動端可以點點按按。示能存在但可能不可見,可視化設計師的一部分職責就是實現示能的可見性。



          意符

          意符 Signifiers 是可視化作品傳遞的信號,暗示可能的潛在行動,讓用戶該知道該如何去控制可視化。無論是示能還是交互方式,都應照顧用戶已有習慣,需符合用戶心智模型。




          在 PC 可視化上,可視化設計師很容易忽略鼠標指針樣式設計,經常默認一個鼠標樣式進行到底,可視化如何驅動用戶以及如何讓用戶具備可視化的能力全靠猜。




          映射

          映射 mapping 表示可視化元素間關系,應用于控制-反饋模式的設計或布局;比如方向盤可控制汽車轉向,下拉篩選器出來的選擇框。以空間布局對應關系的自然映射為例。




          反饋

          反饋 feedback 是用戶操作之后的回應,反饋應當是即時、有效的。在可視化設計時,如果需要,我們建議給出用戶深層次的反饋以便指引其進行下一步的操作。




          小結

          要做到聽從驅使,需給用戶控制感,讓用戶享有對可視化的控制能力。例如提供足夠便捷的過濾篩選組件,配合鼠標懸停、點擊、框選等操作,方便用戶查看更多視圖空間,快速定位感興趣的數據空間,亦或根據特定變量對數據進行排序、突出、降維處理等。當我們將這些組件與交互動作進行結合,用一些習以為常的交互去操縱可視化時,用戶將會很清晰、并且有信心控制好當前視圖。



          數據可視化不僅僅只是一張好看的圖,它構建的是一個系統,這個系統隨時在解決有限屏幕空間與無限數據空間帶來的沖突。這個系統可以驅動用戶完成一系列操作后引導用戶有能力進一步拿到結果,如此反復交替迭代,幫助用戶完成一些平時看來不可思議的任務。只有這樣,用戶才能操縱聽從驅使的可視化,就像文章開頭所述,如老司機開車一樣絲般潤滑。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷  作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          當負責人和組內設計師過稿子的時候,都在想些什么?

          seo達人



          今天依舊是篇實戰小分享,就是簡單和大家分享下我最近和組內小朋友們的過稿日常。每次過稿子前我都深深在心中銘記3條準則:別刷存在感、別裝13、別下手太重。這里和大家分享下我的心路歷程,希望能對大家過稿有億點點幫助。

           

          1.不想看需求文檔

          通常拿到設計師投喂的需求設計稿后,第一時間非常抵觸去看需求文檔。不用找其他借口,不看需求文檔純粹就是因為懶。不過很神奇的發現,站在陌生的第三視角反而比沉浸在需求文檔里更容易發現一些問題。(絕不是為我的懶找借口)

           

          舉個例子:

          之前做海外版的需求,看到設計師有一個列表頁面設計成這樣的,我反復看了幾遍都沒明白這個“5 times(5次)”放在愛心按鈕下是啥意思。

          圖片

          直到對稿子的時候,設計師拿出了原型,上面對這個“5次”的解釋赫然寫著“訪問次數”:

          圖片

          圖片

          可能現在大家和我一樣站在第三視角都會覺得這樣的布局不合理,也不清楚“5次”的意思,但是在完整的需求文檔面前很多時候疑問后面直接有解釋的時候,我們就容易沉浸到產品給的信息設計中,忘記以一個陌生用戶的視角來重新審視信息的設計了,也就是通常意義上的信息理解免疫。

          如果我們按照新的思路重新捋一下:這個訪問次數應該和什么信息群放在一起更合理?

          于是我們決定把字段信息都放在左側,做一個三分段的信息布局:依次是名字、性別、訪問次數、最后是訪問時間。同時在訪問時間字段上增加信息的補充輔助用戶理解含義。整體對比如下圖:

          圖片

           

          2.交互細節好像不夠合理

          其實很多團隊是沒有專門來做界面細節交互的設計師的,就算有title是交互的設計師承載的任務大部分也都是原型繪制和無止盡的PPT產出。所以界面里涉及的一些權責模糊的交互細節大任就落到ui的頭上,但這往往也是設計師們容易考慮不周全的地方。

           

          舉個例子:

          我們這期的設計改版中涉及到一個禮物面板,設計師已經做了很多的基礎優化(轉線為面、空間排布及信息降噪)

          圖片

          但這位積極的童鞋不止于此仍然還想做點創新的東西出來,ta參考了下之前look的交互,又做了一個直接豎滑動的交互設計:

          圖片

          (左圖為look直播的禮物面板交互)

           

          這個交互方式比原始的輪播點橫滑看上去要高大上與創新很多,but市面上不太有直播類的產品用到這種看上去very good的交互方式(除了look),那么這到底是為什么呢?

          圖片

          仔細觀察我們就可以發現使用了直接豎滑的look對禮物的種類進行了詳細的分類(常用、熱門、玩法、特權、星座等),且每個分類下的禮物滑動基本不會超過2行(大部分控制在一屏內)。

          而對于我們現在要設計的禮物面板tab分類的方式并不是以禮物種類為維度的,所以所有禮物都被放到了一個tab下(數量很多),豎滑動沒有輪播點的情況下用戶很難定位到某個具體的禮物,而輪播點橫滑就可以很好的對用戶帶來操作記憶,比如哪個禮物放在第幾頁大哥滑動幾次就可以找到了。

          而當設計改動極有可能影響到大哥送禮物的時候,以營收kpi當頭的項目組是萬萬不敢輕舉妄動的。

           

          3.用戶理解成本好像還可以降低

          很多設計師設計的圖標、布局都已經非常nice了,在設計質量上是沒有任何問題的,但老實說設計這東西沒有最好只有更好,除了好看我們需要更關注設計本身傳達給用戶的理解成本,成本越低體驗的障礙就越小,這樣帶來的點擊與轉化也越多,這是一個即使不量化數據也相對合理的一個體驗假設。

           

          舉個例子:

          很多鐵汁可能都做過會員、貴族之類的權益中心,通常這個聚合頁的常規排布中段就是一大坨展示權益的圖標和文案說明。

          因為是權益等級大家的配色估計都會用的比較炫麗,這里我們展示的是一個貴族中心的權益圖標,按照產品大大的指示,ta想要那種尊貴的黑金質感,所以我們的設計師就做了如下的設計:

          圖片

          整體黑金質感已經符合產品的預期,也符合基本的設計質量要求,但如果要很嚴格的細究的話仍然有可以變得更好的方式,所以看到這個設計方案的時候我在想2個事情:

          1. 整體的亮點視重應該放在權益展示部分還是操作區呢?
          2. 圖標氛圍亮和暗2種代表著解鎖與未解鎖的概念用戶能否一眼就get到?
          3. 現在一屏完整展示9個權益圖標,但是實際上所有的權益圖標超過了9個,這樣的設計是否會影響信息的曝光(因為用戶不知道底下還有更多了)?

          于是,我們又做了下設計優化,如下:

          圖片

          按鈕增加了動效和光帶,大家可以自行腦補。

          以上就是我們過稿的設計日常,很符合豬廠“專業偏執”的特點。

           

          原文地址:Nana的設計錦囊(公眾號)

          作者:柒爺

          轉載請注明:學UI網》當負責人和組內設計師過稿子的時候,都在想些什么?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          數據好體驗就好嗎?

          資深UI設計者

          很多同學面試時候都會被問到產品數據,用戶體驗等問題,這篇文章將講解產品數據中面試官最為在意那幾個指標,以及用戶體驗的考核方法。*本次話題我會分為上、中、下兩篇文章,此文關于產品數據哪些值得我們看,如果這篇文章能幫助到你,還請點贊、分享我會抓緊你分享下一篇怎么體驗度量的方法文章。



                                                 


          1 為什么大廠面試都會問數據


          a 數據衡量你的項目是否真實

          現在ui市場競爭激烈,選人也很苛刻,面試官判斷一個人是否可以入職大廠的第一個指標就是真實,而數據類的問題往往是劃分這個人做的項目是否真實的一個重要指標。

          因為只有真實的項目才會有數據的提現,自由發揮的項目往往是答不上來有關數據的問題。

          所以在大廠面試中都會或多或少的提問數據相關問題,這也是很多同學能進入大廠的一條重要分水嶺。


          b 錄取后給你定什么職位

          設計師群體偏感性,單單的看設計作品很難和其他競爭者拉開差距,所以需要理性的數據思維拉開與其他設計師的差距增添自己競爭力的附加值,另外一點通過產品數據的表述可以更有力的證明自己設計方案是最好的方案,方便后期給予定位高級、資深還是專家崗位。


          2 數據在項目中的作用

          設計師在做多個設計方案對比的時候會遇到這樣的提問,現有的設計方案是最適合用戶的嗎?究竟哪個版本是更好的?為什么是這個版比較好?有的人拿產品埋點數據來評判,有的人用用戶反饋來評判,也有的人則坦言需要靠老板的建議來進行評估。


          a 數據是一個衡量好壞的一個指標

          數據是衡量一個產品甚至一個功能最為科學的辦法,他在不同的開發場景中都起到很重要的作用。比如:


          ·在設計開始前,數據可用于發現問題、分析問題。從數據角度了解用戶訴求,發現產品存在的問題,為產品設計優化提供啟發和突破口。

          ·設計過程中,數據可用于幫助決策。通過歷史數據論證各個方案的優劣和有效性,再擇優。

          ·設計評審中,數據可提升設計方案說服力。通過理性數據分析,獲得團隊內部成員、產品/業務方對方案的認可。

          ·設計上線后,數據可用于量化用戶體驗價值。通過采集上線前后的數據變化,判斷設計目標的實現程度。

          大家有沒有發現在我陳述的過程中,一直在說數據分析,那這個數據分析是怎么來的來呢?

          其實數據分析就像是一個個監控產品數據波動的攝像頭,實時監控著數據的波動。以下是我整理關于數據埋點的理論知識,讓大家對數據埋點這個概念有個清楚認知。



          b 數據對設計師的三個意義

          很多人會認為數據是產品經理、運營的工作,其實不然數據對設計師也是設計師的工作,我把數據對設計師的意義歸納為三點:

          undefined


          1)為設計提案做依據

          產品設計者可以由產品經理,UX,UI擔當,那需求不能自己憑空出現的,是由相關人員需找出來了,數據就好比一個放大鏡,它可以通過線上的數據波動來找尋目前存在的問題即需求。其實這就好比設計師的思維又產品思維轉換成數據驅動思維。比如


          1、產品初期,沒有產品、沒有相關的后臺數據,那我們要做一個什么樣子的產品,就這一個需求。做什么樣子的產品可以通過了解大眾用戶、了解大眾市場的數據分析報告得出一個結論,明確我們要做什么樣子的產品,這就是數據對設計師的第一個價值做設計提案的依據。比如以下這些場景都需要數據做依據進行設計提案。


          2)驗證方案是否解決用戶需求

          判斷這個設計方案是否解決用戶需求:

          2、在多個設計上線后,產品設計、運營方案與產品研發的三方對設計師輸出的方案存在分歧點。

          也可以通過后臺的數據反饋來篩選出哪個方案最符合產品目標(即北極星指標),在多個設計方案中最好的設計解決方案。


          3)晉升中衡量設計價值的指標

          當然也有一些公司,做為后期晉升,評判設計價值的一種方法。

          比如怎么證明自己的設計方案和其他同事相比,設計方案就好呢?通過數據對比,說明自己輸出的設計方案價值遠高于其他同事,以此證明自己的價值。



          3 數據常用于哪里

          其實在我們的工作中有很多設計方法可以輔助我們設計更好的設計方案,比如用戶調研,競品分析,產品測試等。這些方法都是通過對用戶數據的反饋和整理來判斷去發掘方案里面的問題、驗證最終方案是用戶是否滿意。


          用戶調研:可以把字拆解開來看就兩個字面意思,調查:反映客觀事實。研究:分析客觀事實

          主要的形式是用戶調研和用戶訪談,直接出過這篇文章,有興趣的朋友可以查閱。

          傳送門地址:http://www.woshipm.com/pd/4745810.html


          競品分析:確定幾款市場上競爭產品,然后通過對產品功能、產品定位,信息架構、顏色、布局、風格等元素的分析,找不同點,再通過數據對比確定產品方案的一種辦法。

          (因為不同職位做競品分析的目的,角度和方法都不相同,這里我就不一一講解了,如果大家有需要后期我會考慮開一篇怎么做競品分析的文章)下圖是制作競品分析的常規流程。


          產品測試:這種方法是用處最廣的一種方法,可用性測試是指讓一群具有代表性的用戶按照指令對產品進行典型操作,同時觀察員在一旁觀察、記錄。

          比如我們發現首頁Banner的點擊率很低,這時候我們就要想辦法「通過設計」來提升Banner的點擊率,是Banner的大小問題?還是輪播圖切換的速度問題?還是圖片樣式的問題?

          但是設計師沒辦法直接確定他到底是什么問題,所以就需要拿出不同方案給用戶測試,看看哪個方案更容易促進他點擊。

          常用的測試辦法有很多這里我就講三個方法:一個是可用性測試、一個是灰度測試、一個是A/B test測試。


          可用性測試:通常在產品開發之前使用,模擬真實的使用場景讓用戶體驗,目的是使用最小的成本來輸出正確的設計方案,避免全部做出來以后在進行調試修改。

          灰度測試:是指產品開發通過后,將測試的版本發布到真實的線上環境中去,收集用戶的反饋。

          A/B test 測試:是指產品測試通過并發布之后,同一個功能將使用人群分為兩個部分,一部分人使用a方案一部分使用b方案,對比數據波動。





          數據的緯度有很多,首先咱們先來看看產品的數據都從哪里來的。通常情況下設計師可以直接找運營人員、產品經理、設計負責人在公司服務器日志里面調取產品埋點數據;或者項目結束后,項目負責人會發產品復盤郵件,數據考核郵件指標等信息,產品埋點數據也會在復盤郵件中體現。


          除了以上兩點數據來源,還有CNZZ網站分析、百度統計、goodle anlytics可以查詢到相關數據。


          1 數據可以分為「三個層面」

          產品中的每一項數據其實都代表產品的一個緯度的數指都有其意義,如果想用比較簡單的方法記住這些有用的數據不妨試一試以下這個辦法:


          我們可以把數據分為三個層面進行記憶,即用戶數據 (描述用戶人群的);行為數據 (描述用戶使用方式的);業務數據 (描述產品營收的)。



          2 用戶數據的「四個維度」

          用戶數據 (描述用戶人群的)主要意思就是描述使用產品的這個人群的。這里有四個比較有價值的概念需要大家了解分別是存量、新增用戶、用戶留存、渠道來源這四種。


          a 訪問量

          訪問量也有人稱其為活躍用戶數、用戶存量,其實都是一個意思。簡單理解就是指一個人來到網站,然后瀏覽了一些內容之后離開網站的過程(這個過程也會被稱為訪問),既在特定的統計周期內,再次訪問產品的用戶稱為訪問量。有三個專業名詞—DAU/WAU/MAU(日活/周活/月活):每天有多少用戶來用產品,每周有多少用戶來用產品,每個月大概有多少用戶來用產品,這是判斷產品規模的最基本的指標。方便產品和設計人員了解產品的每日用戶情況,了解產品的用戶變化趨勢。


          DAU(日活):某個自然日內訪問產品的用戶,算該日一次日活(統計結果去重統計);

          WAU(周活):某個自然周內成功訪問產品的用戶(統計結果去重統計),這個指標是為了查看用戶的類型結構,如輕度用戶、中度用戶、重度用戶等;

          MAU(月活):某個自然月內成功訪問產品的用戶(統計結果去重統計),這個指標一般用來衡量被服務的用戶粘性以及服務的衰退周期。



          *這里補充一個知識點-去重統計:統計結果是按照設備去重統計,如同一個設備多次訪問后臺只記一個活躍用戶。



          b *新增用戶

          新增用戶是一個企業很看中的數據,特別是在業務的起步階段,這個指標尤為重要;這個代表公司的潛力。比如拼多多這家公司一年比一年虧損多,但股價卻越來越高,主要原因就是資本市場看好拼多多用戶的增速,按照統計跨度不同分為日新增(DNU)、周新增(WNU)、月新增(MNU)。


          *在新增用戶里面還有一個“用戶流失率”的概念需要大家了解。流失率指那些曾經使用過產品或服務,由于各種原因不再使用產品或服務的用戶,用戶流失率=某段時間內不再啟動應用的用戶/某段時間內總計的用戶量。

          產品階段不同,重心也會從拉新轉移到留存,對于一個成熟的產品和飽和的市場而言,獲取一個新用戶的成本可能是留住一個老用戶的數倍,流失率的降低也意味著營收的增加,在這種條件下,流失率的價值是顯而易見的。


          提到新增用戶就一定要說《增長黑客》,這本書里邊提到一句話非常精煉的概括了“增長”的概念:以數據驅動營銷,以迭代驗證策略。通過這句話應該就可以感知整本書的中心思想就是“數據”和“實驗”,即AARRR(海盜模型)模型。通過闡述了一個用戶生命周期的各個階段——獲客、激活、留存、變現、推薦和召回,實現用戶增長的產品目標。



          *a-ha moment:a-ha moment也叫Aha時刻中文翻譯過來就是尖叫時刻,是增長的一個概念詞匯,是指用戶通過某個特定行為(產品內的功能體驗)得到了很爽的體驗,用戶可以快速且準確的認識到產品的價值。例如很多知識付費類產品,都會讓新用戶完整的體驗視頻看課的流程并且感知到課程的價值,很可能變成產品的新增用戶。


          c *用戶留存

          上線的產品怎么反映用戶的狀況是不是健康呢?最好的指標就是留存率。即在某一統計時段內的新增用戶數中再經過一段時間后仍使用產品的的用戶比例(留存率=留存用戶/新增用戶*100%)。留存率又分為次日留存率,次周留存率,次月留存率等。


          以上三個指標的數據越好能反映用戶愿意留下來,才能說明他們對產品的服務滿意,滿意才能養成慣性,持續消費,例如產品改版后,次月留存率提升了,且其他變量沒有變化時,說明用戶粘性是上升的設計改版成功。所以這三個指標是產品體驗最直觀的數據。



          1)次日留存率,常用來衡量用戶粘性。

          通過日留存率的數值來判斷一個 App 的質量,通常這個數字如果達到了 40% 就表示產品非常優秀了,比如可以結合產品的新用戶注冊的轉化路徑來分析用戶的流失原因,通過不斷的修改和調整來降低用戶流失,提升次日留存率。


          2)次周留存率(7日留存率),用于判斷產生的忠實用戶數。

          通過周留存率來判斷一個用戶的忠誠度,比如在一周的時間段里,用戶通常會經歷一個完整的使用和體驗周期,如果在第七日用戶還在使用產品,就可以定義該用戶為忠誠度較高的用戶了。


          3)次月留存(30日留存率),用于衡量版本迭代的效果。

          通常 App 的迭代周期為 2 - 4 周一個版本,一個版本的更新,或多或少的影響用戶的體驗總成用戶流失,所以通過比較月留存率能夠判斷出每個版本更新是否對用戶有影響,衡量版本迭代的效果。


          d 流量獲?。ㄇ纴碓矗?

          根據字面意思來講就是描述用戶路徑,來指的是這些人變成用戶之前,都來自哪里;知道用戶從哪里來才能知道在哪個渠道做推廣會更有效,一般和用戶留存的數據搭配使用。


          3 「行為數據」的五個緯度

          關于行為數據是數據中的一個重點知識,此次主要講解次數/頻率、點擊率、轉化率、用戶停留時長、跳出率、退出率這個五個緯度。



          a 頁面訪問次數(pv)和人數(uv)

          這兩個指標能夠了解用戶的使用行為,衡量頁面入口的設計和與其他入口的設計相比是吸引用戶的注意力的核心指標。


          ·頁面訪問次數(PV ;PageViews的縮寫)用于判斷該活動/頁面/功能被用戶查看的次數,即頁面瀏覽量;

          ·頁面訪問人數(UV;Unique Visitor的縮寫)用于判斷有多少個用戶查看過該活動/頁面/功能,即訪問深度,也就是指用戶的訪問深度(總產品流程的體驗完成度)。





          b 點擊率(CTR)

          點擊率(人均點擊次數)是指網站頁面上某一內容被點擊的次數與被顯示次數之比,即點擊次數占展示次數的百分比。通過人均點擊次數可以判斷交互/視覺的設計要求是否足夠引人注目,也可以用于衡量該功能對用戶而言是否為強需求。通過下面這個案例讓大家了解一下用法,比如7月7日10萬人點擊了“確定”按鈕,其中一共點擊了12萬次,那么點擊率(人均點擊次數)為12/10=1.2次。


          *點擊率中也常常會結合pv和uv的數據使用,即PV點擊率=點擊次數/頁面訪問次數(PV);UV點擊率=點擊人數/頁面訪問人數(UV)




          c *轉化率

          轉化率即達到產品某個目標的訪問量除以總的訪問量,或達成目標的訪客數占總訪客的比例,即轉化率=轉化次數/訪問次數。簡單理解轉化率是把用戶分為“只逛不買”的用戶,還有“逛了 就買”的用戶,還有“逛了買買買”的用戶。


          為什么說轉化率很重要,因為轉化率常常是項目中企業最為看重的一個數據,畢竟轉化率高了公司收益也就提高了,而且轉化率的提升也常常是解釋設計方案最好的支點,比如:在國外的養老計算器中,用戶需要輸入相關的字段后查看計算結果詳情,最后得出計算結果,在這個流程中用戶的轉化率很低(在結果詳情中會有金融產品)。但是如果把結果前置,比如新方案把輸入字段,結果詳情和計算結構都放在一個頁面展示,就會提高用戶的購買決策,大大提高轉化率。


          這里有一個思維方法即漏斗分析法,大家需要了解:

          漏斗分析最常用的是轉化率和流失率兩個互補性指標。用一個簡單的例子來說明,假如有100人訪問某電商網站,有30人點擊注冊,有10人注冊成功。這個過程共有三步,第一步到第二步的轉化率為30 %,流失率為70%,第二步到第三步轉化率為33%,流失率67%;整個過程的轉化率為10%,流失率為90%。 該模型就是經典的漏斗分析模型。



          d 用戶停留時長

          這個指用戶在產品中的停留的時長,即所有用戶session的時長總和/session數量。也有產品通過用戶停留時長去衡量頁面吸引度、判斷用戶粘性和依賴度,舉個例子,抖音的頁面內容吸引度就很強用戶粘性就很高,用戶的停留時間也很長?;叵胍幌拢遣皇敲看嗡⒍兑簦芸煲粋€小時就過去了。這里的商業邏輯是,用戶停留的時間越長,在產品中用戶付費的可能性就會越大。



          總結一句話:停留時間越長,用戶粘性越強。當然也有反面場景,比如登錄注冊的表單填寫,停留時間越長,說明體驗越差。


          e 跳出率(BR)

          跳出率指該用戶來到網站后,沒有進行操作就直接離開的比例,即訪問了一個頁面就離開的訪問量與所產生總訪問量的百分比,跳出率等于訪問一個頁面后離開網站的次數/總訪問量*100%。


          這里有一個容易混淆的概念即跳出率和退出率。其實這兩個數據都是用于衡量頁面的內容質量或交互質量的一個指標。比如當用戶進入 app后,只訪問了一個頁面就離開了,跳出率和退出率越低說明流量質量越好,用戶對產品的內容越感興趣。



          4「業務數據」的四個緯度

          接下來我們來看看三層數據中的最后一層概念——業務員數據,即和財務相關的數據知識。


          a 總量

          GMV (Gross Merchandise Volume),這個詞太常見了;大公司在發布財報、銷售額、成交量的時候,這個數每次必提。*值得注意的是GMV=銷售額+取消訂單金額+拒收訂單金額+退貨訂單金額,包含付款和未付款兩部分。


          b 人均

          ARPU(Average Revenue Per User,每用戶平均收入),光總數高還不行,我們還要關心平均每個用戶的貢獻是否夠多,是否在增長,所以就要關注人均的指標。它是 App 成功的指標,是用戶忠誠度的反應,是預測用戶增長的工具。


          c 付費率

          整個產品業務也要有一個健康度的指標來衡量,付費率就是這個衡量指標。到底有多少比例用戶是付費用戶,這就是付費率。我們通常會把付費率和ARPU值放在一起分析。一般該產品的付費率越高,這說明用戶對該產品的認可度越高。







          1 數據也許會騙人

          數據并不會騙人,而是人看的數據不同,造成結論不同。在使用數據之前我們要認清楚以下三點偷換概念、只看單一緯度、數據不是萬能的。


          a 偷換概念

          今年7月美國總統特朗普舉了一個案例,我記憶猶新。在一個電視采訪節目中他說“美國的死亡率低于歐洲的水平”他的算法是所有新冠死亡人數除以所有確診人數得出右側數據。



          其實他就是偷換了一個概念,在醫學上有兩個指標去衡量死亡率,一個是病死率一個是死亡率。


          當然兩者在算法上是不同的,如果看病死率的話,美國的確低于中國,但是如果按照死亡率的結果看的話,美國是遠高于其他國家,中國是美國相比一百五分之一,這結果是恰恰相反的。


          這里就是一個偷換概念的例子,雖然病死率和死亡率都能反應生病的人數,但是病死率考慮的是救治能力。死亡率不僅考驗救治能力,還考驗著控制傳播的救治能力。


          b 只看單一緯度數據是表象的

          如果單從一方面看數據是沒有意義的,沒有其他數據參照,挖掘不出數據的真正價值。

          比如:我們在討論一個產品是否成功時候,往往會看一個最突出的緯度數據,比如這個產品有2億的日活,這個平臺有5000萬的產量。

          也顯然這種只盯著用戶數量和產品規模的產品的做法是不對的,他并不能真實的反應一個產品是否成功,假如一個產品的日活是2億但是愿意付費的用戶不到1w,這個平臺雖然有5000w的產量,但是用戶的平均停留時長很短,很顯然這并不是一個很高興的事情,因為可以從側面保暴露出產品的質量可能存在問題,導致用戶付費意愿不高,停留時間較短。


          c 數據有局限性

          我們要搞清楚這樣一個認知,數據雖然可以最為直觀的反應產品的健康程度,但是數據絕對不是萬能的,他只是衡量產品的用戶體驗的工具,就好比我之前寫的問的用戶調研的文章只是一種工具也存在其局限性,數據只能告訴waht,但是不能告訴why,而這個why是設計師做方案選擇的關鍵所在。


          2 數據應該怎么用

          數據本身并不會欺騙人,他就真實存反應產品的表現,只是很多人用錯了使方法或者認知出現了偏差,如果想把產品數據的價值利用率達到最大化,建議每次做數據分析時候從以下三點使用數據:


          a尋找關鍵數據目標

          為了避免偷換概念的情況出現,除了我們要理解數據概念之外,更重要的是尋找出關鍵的數據目標。

          以上講了這么多數據名稱,但是大家需要注意的是并不是每個產品都要看這些數據的,不同的產品需要看的數據側重點不同,就比如qq音樂看的是日活躍用戶、淘寶看的是銷售額、王者榮耀看的用戶平均付費額度(appu),新浪新聞客戶端看的是網站訪問數量(uv)。


          1)用戶生成內容(UGC)類數據指標

          UGC(User Generated Content)指用戶原創內容,從進入web2.0時代后UGC第一次被論壇/社區應用,到今天,互聯網產品或多或少都帶有一點UGC屬性。這些產品主要有抖音、知乎、人人都是產品經理、站酷等。

          評價這類產品往往會從發表文章、用戶點贊、訂閱、評論、分享、打賞等幾個數據指標進行評判產品是否健康。


          2)電商類要看gmv

          GMV(全稱Gross Merchandise Volume),即商品交易總額 [1] ,是成交總額(一定時間段內)的意思。這個實際指的是拍下訂單金額、包含付款和未付款的部分。


          休息一下

          聽了腦袋大了同學不用擔心,我特別繪制了下面這個表格,保存截圖慢慢看就好了。


          b 找好參照物A&B test 測試方法

          多數產品在進行數據分析的時候,最常用的方法就是A&B test 測試法。(上面講到了A&B test 測試發)


          1)案例一

          很多時候我們看數據不能看一個緯度,要看兩個或者多個緯度,才能篩選中自己需要的結果方案。

          比如這個案例在探究“與用戶強相關的 BI 品類樓層,商品展示普通利益點和帶券利益點,哪個更優?a方案展示普通的利益點,如“銷量過萬、好評率99%、滿199減100”。b方案只展示帶券利益點的文案,如“滿199減100,領券”。

          最后看的數據是A方案的點擊率高,b方案的曝光點擊率更高(由于方案 B 中可領券和點擊跳轉商詳,可能有部分點擊為領券導致,故方案 B 點擊更高但點擊轉化偏低)。

          如果單獨看點擊率或者轉化率很難做出選擇,但是只要兩個數據綜合看,就很容易得出B方案(帶券利益點)能帶來更高的曝光點擊,引入訂單表現更優的結論。



          2)案例二

          在做A&B test 測試時,是需要保持單一變量測試,現實生活中,很難做到單一變量測試,所以數據很多時候都需要進行分析探討,才會有價值。

          比如我們在首頁流量分發場景中做了A,B兩個視覺設計方案,a方式是所有的品類展示使用魔方圓形坑位,b方式是方形坑位。想探究方圓形坑位和方形坑位,哪個更能吸引用戶點擊?


          最終A方案(圓形)用戶點擊數據為4.87%,B方案(方形)的用戶點擊數據為15.85%,那么,從這個A&B test 測試法的結果中就可以推導出B方案(方形)更好嗎?

          事實可能并不是,大家仔細觀察不難發現,兩個方案除了品類的背景造型不同之外,品類的種類也不同,文案的描述也不同,沒有做到保持單一變量的測試環境,所以B方案(方形)更能吸用用戶的點擊這個結論是不成立??赡艹闪⒌氖欠叫蔚恼故久娣e比圓形的展示面積要大,可以更好的曝光產品的特點,而且促進B方案(方形)更吸引用戶進行點擊。

          c 采用多次定性+定量驗證

          我們得到了數據其實可以采用多次定性+定量驗證這種方式來驗證我們方案是否解決了用戶需求,是否完成項目目標。

          定性可以采用用戶訪談、眼動測試、可用性測試等方式去發現問題(需求)的多樣性和嚴重程度。定量的方式有用戶問卷、站內行為分析、A&B test 測試等方式,驗證這個問題的發生概率。


          比如我們可以通過五次定性質、三次定量的方式,通過數據反饋把結果更加靠近真實。


          3 了解雙面數據(虛榮數據)

          什么是雙面數據呢,其實也就是那些看上去很好,卻不能給這個產品帶來絲毫價值的數據,需要對比著看才能了解數據的價值。


          a 點擊率(CTR)

          比如一個用戶在有些資源位連續點擊或者因為一些利益性的活動補貼引發的點擊量變化這類場景在用戶人數總量不變的情況下,單獨位置的點擊量增加,必然會導致其他部分的點擊量降低,其實是0和博弈,增加這個功能的點擊量是片面的。



          b 訪客數(UV)

          計算訪客數只是一場毫無意義的人氣比賽,其實訪客數可以分為三個類型即曝光UV、點擊UV、意向UV,單純地看這三個uv是沒有意義的,除非能讓用戶做對產品有利的事。比如,在推出活動時,有多少用戶能轉化購買?只有知道了這個數字,這個用數據數才是有價值的。


          ·曝光UV即曝光在視野內的訪客數,例如我們在淘寶搜索某個產品進入了搜索的feed列表頁,當我在這個列表場景停留2-3秒的時候,我沒有購買任何產品的情況下,數據就會判定我為一次曝光UV。


          ·點擊UV即有點擊行為的訪客數,還是以淘寶做為例子,現在我在feed流列表頁面里搜索產品,其中有一件是我比較中意的產品,我點擊了產品進入到這個產品的詳情頁,在我沒有購買任何產品的情況下,我發生了點擊行為,數據就會算我是一個點擊uv。


          ·意向UV即進入意向頁面的用戶數,其實這個和點擊uv有點像,比如我在淘寶搜索完我想買的產品a,有去京東搜索了一下,那京東就會判定我為一個想要購買產品a的意向uv,這個意向uv只可以判斷出我們對a產品是否感興趣,并不能判斷出我真正想要購買。


          c 停留時間

          用停留時間數據來統計用戶參與度或活躍度,他并不能說明什么問題。比如,客戶在某個全是文字內容頁面上停留了很長時間,有可能是看不清楚或者是文字理解難度影響了用戶的閱讀時間,所以說產品效率、體驗這兩個關鍵指標本身就和停留時間相矛盾。


          d 下載量

          盡管有時會影響你在應用商店中的排名,但下載量本身并不帶來價值;還需要參照的是:用戶下載后的激活量、賬號創建量以及用戶在產品中的各個場景的跟蹤。


          e 退出率(ER)

          很多人會有一個誤區,認為退出率高是不好的一項數據,但是大家要明白并不是所有的場景跳出率越低越好,舉個例子:我們通過漏斗數據發現用戶操作路徑太長,把好幾個步驟的路徑縮減到一步操作,最后看到用戶退出率就減少了。



          最后大家要清楚

          數據是用于支撐設計師的某項設計決策和方法,但數據無法代替設計的直覺,更無法代替深入的用戶研究、我們要學會利用數據指標,找出問題所在,通過設計方案改變用戶行為,因為數據最終目標在于價值的體現:有效獲取用戶,創造營收。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷  作者:斜杠7濕兄

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          5個設計小技巧,越早會越好

          seo達人


          平時很喜歡一些干凈的設計,讓人感覺很舒服,閱讀內容也清晰,很多設計師在設計時,經常細節過多,會顯得累贅,有時候設計也需要用到英文,但只專注到了字體選擇,卻忽略了英文其他細節,今天和大家分享下,如何讓你的設計更加利索干凈!

           

           1.調整行間距 

          行間距大家都知道,但是具體如何設定值很多人不知道,一般我常用規則是 +4 ,比如文字大小是12PX,那么行間距就是16,以此類推文字是14,那么行間距就是18。

          ▲ 上圖是之前設計的一套規范的字行間距規則,供大家參考。

           

          除了+4的規律你也可以運用黃金比例,文字大小X1.414,文字大小X1.616(1.414和1.616是黃金值)取四舍五入,得出以下字體間距規則。

           

          很多人要問,我如何判斷界面里面用多大的行間距呢?道理很簡單,就是看你們內容,如果你們app內容需要很豐富,你可以行間距小一些讓屏幕展示更多內容,可以運用+4的原則,目前淘寶天貓是這個原則,如果你頁面內容更加留白大一些閱讀舒服一些,可以運用黃金比例的行間距,比如新聞閱讀軟件,需要大量留白來調整呼吸感!

          ▲ Yahoo News因為文字內容信息比較多,所以需要頁面信息量豐富,所以在行間距上用的類似固定+4的原則,讓頁面看起來更加清爽。

           

          ▲ 相反Airbnb頁面節奏大家感覺更舒服一些,因為它整體的行間距比較大,留白比較舒服,給人很優雅,清爽的感覺,他們在很多設計細節上都沒有遵循iOS規范,而去打破重組,比如列表高度,列表的圖標大小等。

           

           2.調整字間距 

          除了行間距,字間距同樣很重要,特別是英文頁面時候,同樣的內容,字間距,和行間距不合適,看起來界面就會相差很多,有的看著很舒服,有的看起來說不出來哪里不對。

          ▲ 這2個頁面,左邊:  (字母和字母的字間距: 0 ,行間距:20);右邊: (字母和字母的字間距: 0.2 ,行間距:22)

          上面左邊的頁面字母和字母之前距離非常的緊密,句子和句子之間的行間距也很近,導致閱讀起來很密集,不夠舒服,相反右邊通過加大行間距和字間距,使得內容沒有那么滿,字母和字母之間的間距,行與行之間的間隔,使得整個設計節奏得到了一些舒緩!

          需要注意的是:不要給太大的字間距,有時候過大也會讓讀者不舒服。

           

           3.減少線 

          ▲ 同樣一個結構,Airbnb對于商品單元處理就比ebay看起來要干凈清爽一些,原因在于ebay上面線條太多,可能和他們整體視覺語言有關,線多了就沒有純色看著清爽干凈。

           

          ▲ 再看亞馬遜的設計,以及韓國29cm對于細節的處理,29cm去除一切線條,讓設計更加清爽利索,而亞馬遜線條很多,雖然很好的起到的信息分割作業,但是就不夠清爽利落。

           

          ▲ 同樣一個設計,上面的采用線條的處理,下面的采用去掉線條用色塊來處理,哪個看起來更加干凈,當然是下面的!

           

          所以在一個設計里面減少線條,或者讓線條最少化,是讓UI設計看起來干凈的一種很重要的方法,通過間距來分割信息,加強內容和內容之間的間距,這樣做,用戶也是可以很清晰的區分信息層級。

          需要注意的是:優先保證內容清晰,如果有些地方一定要用到線條,一定要使用它。

          ▲ 在Facebook新版本視覺風格中,很明顯發現去線條的設計技法,左側是改版前,右側是改版后,很明顯facebook減少了線的運用。

           

          ▲ 去掉線條后整個設計并沒有影響層級,相反更加清晰。

           

           4.留白 

          ▲ 頁面放松和呼吸感在UI中非常重要,在左側的設計中,元素之間的距離特別小,都擠在一個空間里面,非常的滿。

           

          右邊的界面,很好的運用了版式,和空間感,有足夠的空間讓元素之間去呼吸讓用戶感覺舒服。

          ▲ 這個案例里面,左邊的內容很密集,留白雖然有,但是不明顯,右邊運用了大的灰色留白來區分信息的內容,所以右側看起來更加舒適。

           

          ▲ Facebook的卡片設計同樣也是采用粗的間距來作為信息的區分,讓頁面看起來更加的層次分明,利索干凈。

           

          ▲ 同樣左側的頁面雖然運用了去線,每個內容和內容直接的間距留白有了,但是信息密集不清晰,右側的就很清晰,通過頭像作為紐帶來區分信息,讓每行的內容更加清晰可見。

           

           5運用卡片 

          ▲ 在清晰度層面,使用卡片是幫助內容信息反饋的很好一種視覺形式,同時也讓信息更加明確哪塊是哪塊。

           

          ▲ 卡片化設計在移動端讓設計更加干凈利落,是經常運用到的設計點。

           

           總結 

          今天分享的幾個小技巧點,其實是我們每天做設計中遇見的,需要靈活的多學多用,同時我們每天看到的一些好的設計,記得去留意分析,為什么別的設計好,別人設計看起來那么干凈,畢加索說過:好的設計師借鑒,偉大的設計師偷。

          • 1.加強行間距,+4原則或黃金比例
          • 2.加大字間距: 0.1或0.2勿過大
          • 3.減少線條,如非得已使用線
          • 4.合理留白,拉開信息層級
          • 5.運用卡片,更好整合信息

           

          原文地址:我們的設計日記(公眾號)

          作者:sky


          轉載請注明:學UI網》5個設計小技巧,越早會越好

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          交互手勢全解析之位移類手勢

          seo達人



          通過本文,學會根據需求設計合適的位移類手勢,能夠判斷手勢的體驗問題并提出相應解決方案,并與開發同學高效溝通確保落地。

           

          前言

          一年前更新了文章《交互手勢的容錯性和邏輯性》之后,有很多讀者朋友詢問是否能夠做一個詳細的講解交互手勢的系列文章,講解每個手勢的不同之處、應用場景以及在工作中如何使用。

          我非常理解這些讀者的痛點,因為我在日常的工作中,也經常遇到一些難題。比如同樣是滑動,但是些許參數的變化就會導致體驗的天差地別,應該如何進行選擇。再比如與開發同學溝通過程中如何準確描述自己想要的效果,讓最后的結果不至于與自己的預期不一致。

          這些難題也促使我大量思考,大量體驗各種產品的手勢操作,希望能夠從中總結出規律,讓手勢的設計與落地能夠有理有據?,F在經過一段時間的積累,我認為我在這方面可以講一些能夠幫助大家的內容了。不足之處,希望大家指正。

          今天給大家帶來專欄的第一篇《交互手勢全解析之位移類手勢》。

           

          1 位移類手勢的描述維度

          手勢作為圖形界面與用戶之間溝通的方式之一,在便攜電子設備上大量應用。與實體按鍵相比,它有著純粹的簡潔性和無盡的創造性,手指的個數變化、不同變量的組合能夠創造出無數的操控方式。

          位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設備的手勢,本篇文章主要講解單指操作的位移類手勢,多指的位移類手勢(如捏合)將放到后續文章中講解。

          一談到位移類手勢,大部分設計師的腦海中可能會浮現出拖拽、甩動和輕掃這三個術語。然而,當我們想仔細談論他們三者之間的區別時,大部分設計師可能無法準確地描述。為了能夠準確描述三者的區別,我們在這里引入三個維度的概念,它們分別是控制方式、穩定化效果、以及閾值類型,這三者的不同的變化組合可以創造不同的位移類手勢,拖拽、甩動和輕掃之間的區別也是這三個維度影響的。當我們在討論不同位移類手勢之間的區別時,不如說是在討論這三個維度之間的區別。比如常見的輕掃手勢,因為這三個維度的變化就會產生不同的變種,而且不同變種在體驗上也存在很大差別,若不分場景隨意使用,很容易就影響用戶體驗。那接下來我們首先了解一下這三個維度。

           

          1.1 控制方式

          第一個維度是控制方式,它分為絕對控制相對控制,也可以通俗的表達為跟手不跟手,區別如下。

          絕對控制/跟手:施加控制的一方(后文簡稱施控物)的某個屬性變化與被施加控制的一方(后文簡稱受控物)的某個屬性變化是對應的。

          相對控制/不跟手:施控物的某個屬性變化與受控物的某個屬性變化不是對應的。

          比如在網易云音樂的播放頁(下圖左),左右滑動黑膠時,手指是施控物,黑膠是受控物,手指的橫向位置變化和黑膠的橫向位置變化是對應的,即絕對控制。上滑調出評論頁時(下圖右),評論頁的位置和手指的位置沒有對應關系,手指的上滑僅僅控制評論頁是否出現,即相對控制。

          與相對控制相比,絕對控制允許用戶去操控受控物的屬性變化過程,因此給予了用戶更強的掌控感。比如在微信讀書閱讀頁邊緣右滑,手指的橫向位置與書籍封面的變化過程對應,模擬現實生活中慢慢合上書的感覺,如下圖。

          但是在有些場景,為了避免混亂,屬性變化過程是不適合被用戶絕對控制的,此時我們應采取相對控制的方案。比如 iOS 的相機中,左右滑動切換拍攝模式,由于前后不同模式之間的頁面框架變化較大,切換時會有過多元素的屬性變化,如果使用絕對控制就會導致切換拖沓且混亂,使用相對控制就能避免這個問題。

           

          1.2 穩定化效果

          1.2.1 定義

          當我們使用手勢控制某個受控物時,由于手勢的某個屬性(如手指位移)達到閾值,進而導致受控物的某個屬性穩定在了特定狀態的效果被稱為「穩定化效果」,或者也可以稱為「吸附」。

          穩定化效果能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。

          是否有穩定化效果是區別輕掃與另外兩個手勢即甩動和拖拽的重要維度,當某個位移類手勢有穩定化效果,我們就將其稱作輕掃。

          以滑動切換抖音視頻為例,當手指上滑的位移距離和釋放速度其中的某一項屬性達到閾值后,下一條視頻會往上移動到一個固定的位置然后進入穩定狀態,而不會出現停留在不完整的中間狀態,如下圖所示。

          在 iOS 端的微信消息頁左滑某條消息后會出現更多操作按鈕,按鈕會在手指滑動的距離達到閾值并松開后穩定在一個固定的大小,而不會停在類似下圖左所示的混亂的中間狀態。

          在多內容選擇的場景中,如果滑動與選中是綁定的話,一般需要使用穩定化效果。例如在 iOS 相機里選擇濾鏡時,滑動濾鏡選項不但能夠控制濾鏡選項的位置,并且會自動選中一個位于中間位置的濾鏡,位置的穩定化避免了被選中選項的不明確。

          如果滑動與選中是分開的,比如美圖秀秀的濾鏡選項需要先滑動后選中,這種情況下穩定化效果不是必要的。

           

          1.2.2 與效率的關系

          不同的穩定化規則帶給用戶的體驗差異是非常大的,最明顯的差異是在效率方面。我們使用穩定化效果的強弱來理解,穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。

          比如在比較常見的 banner 切換功能中(下圖左),無論手指位移和釋放速度的值有多高,banner 只能切換并穩定到下一個,不能夠一次切換多個 banner。而在網易云音樂的首頁排行榜中,一次滑動能夠切換多個內容卡片。因此,我們可以說前者的穩定化效果比后者強。

          拖拽和甩動雖然沒有穩定化效果,但是也存在效率的高低。我們可以將其與輕掃放在一起做對比,如下圖所示,拖拽、穩定化效果強的輕掃、穩定化效果弱的輕掃、甩動它們切換效率依次增加。

          那么我們決定添加穩定化效果后,如何選擇強弱程度呢?選擇沒有絕對的對錯,整體來說主要考慮兩點,業務訴求和用戶訴求。例如在常見的 banner 切換中,banner  的總數量一般不會很多,業務的訴求是希望盡可能曝光每一個 banner ,使感興趣的用戶進行消費,因此這里比較適合做穩定化效果強的輕掃。在云音樂的排行榜案例里,不同用戶感興趣的榜單是不同的,穩定化效果弱的輕掃可以方便用戶單次滑動切換多個,快速切換到自己感興趣的榜單的大概位置。

          百度 App 的表情面板原本是左右輕掃瀏覽表情,在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。

          微信視頻號的改版是一個典型的案例,舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢(下圖右),而是占據屏幕尺寸三分之一到二分之一之間的卡片形式(下圖左),并且使用甩動而非輕掃。視頻號問世初期優質內容匱乏,社交推薦算法不完善,貿然模仿抖音式的全屏化形式和輕掃手勢的話,會導致用戶瀏覽到劣質視頻時負面感受被增強且切換效率變低,反之卡片形式加甩動手勢給予了用戶更自由的選擇空間,提高了用戶的切換效率,降低了負面體驗。等到如今時機成熟,再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。

          在某些場景,用戶需要先通過高效的方式選擇特定區域的內容,然后進入聚焦狀態進行內容瀏覽和慢速的切換,此時我們需要設計兩種切換效率不同的手勢應對前后場景的變化。如下圖,在 iOS 的照片 App 中,先使用切換效率較高的甩動進行粗略切換找到目標圖片大概位置,點擊進入大圖模式時使用切換效率較低的輕掃進行精確切換查看。

           

          1.2.3 觸發時機

          觸發穩定化的時機可以分為釋放前和釋放后,不同的時機帶給用戶的體驗也不同。釋放前穩定化指的是用戶使用手指滑動屏幕時,手指位移達到閾值后,手指無需離開屏幕,穩定化即可被觸發。如下圖左,iOS 的相機滑動切換濾鏡使用的就是釋放前穩定化。釋放后穩定化指的是用戶使用手指滑動屏幕時,手指位移或釋放速度達到閾值后,手指必須離開屏幕,穩定化才能被觸發。如下圖右,常見的 banner 切換。

          釋放前穩定化可以避免拖沓,增加切換效率,但是缺點是無法反悔回退且缺乏掌控感。反之,釋放后穩定可以反悔回退,掌控感強,但是缺點是比釋放前穩定化拖沓了一些。

           

          1.3 閾值類型

          閾值是能夠觸發變化的最小值。比如當水的溫度達到 100 度時就開始變成水蒸氣,100 度就是一個閾值,溫度是閾值類型。在手指與屏幕的交互中,手指在屏幕上的某個停留時間、位移、釋放速度、點擊次數等都可以成為一個閾值類型,達到相應閾值后就可以觸發相應的變化,常見的變化有受控物的位置、大小、不透明度等,理論上變化可以是任意的。

          在位移類手勢中,通常會用到的閾值類型有手指位移釋放速度,手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離,釋放速度是用戶的手指在屏幕表面進行位移后離開屏幕那一瞬間的速度。

          市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關的閾值判定方式,因為其不太符合常識。因此我們在設計位移類手勢時,能夠選擇的閾值判定方式常見的有兩種:

          • ① 判定手指位移和釋放速度滿足任意一個即可;
          • ② 僅判定手指位移。

          當我們設計手勢時,就需要考慮兩者的區別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離,因此 ① 的主要優點是高效。但是由于我們無法預判釋放速度帶給受控物的移動距離長短,所以相對應的缺點就是易誤操作和不精確。②就恰恰相反,由于不存在釋放速度造成的不確定因素,它的優點是不易誤操作和精確,缺點是低效。

          甩動和拖拽之間的區別就在于閾值判定方式,甩動是 ① ,拖拽是 ② 。如下圖,當在微信消息列表找相應的消息時,用戶的訴求就是能夠快速找到特定消息的位置,對特定消息的出現在屏幕的位置也沒有特定要求,只要能夠被手指點擊到即可,因此選用甩動較為合適,但是對于調節音量、亮度這一類的操作,滑動的范圍有限,因此用戶對效率沒有太高的要求,但是對于滑塊位置的精確度有要求,因此選用拖拽是更為恰當的。

          再舉一個反例,在 Steam 移動端橫滑首頁的泳道卡片時(下圖左),使用的手勢是拖拽而不是甩動,瀏覽起來特別低效。更適合的做法應為甩動,會更符合此場景下的快速瀏覽的訴求,如下圖右的豆瓣。

          對于輕掃來說,使用哪種閾值判定方式有多種情況(如下圖所示)。在本文中,根據閾值類型、穩定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類(A-E的命名方式僅存在于本文章,因此在向其他人傳達時,盡量使用在后文我介紹的手勢描述而不是類別名稱,以便于對方理解。)。后續會為大家仔細舉例講解,大家現在僅了解一下即可。

          當我們在刷抖音視頻時使用的手勢就是輕掃,是否滑動到下一條視頻進行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可,對應的手勢類別是上面表格中的輕掃A。如下圖所示,在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向位移大于半個屏幕高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式,因為既省力又便捷。

          如果將閾值判定方式改為 ②僅判定手指位移,對應的手勢類別是上面表格中的輕掃 B,并且位移的閾值設置得比較大的話,給用戶帶來的負面體驗可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后,想要下滑收起時,App 僅判定手指位移,而且這個位移閾值設置得比較大,對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗很差。即使由于開發資源有限我們只能做到僅判定手指位移,我們也可以通過減少手指位移的閾值來降低負面體驗。

          但是某些場景下,②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁,上下滑動瀏覽微信消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值的話,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序選擇頁。

          因此,對于位移類手勢,選用哪種閾值判斷方式要依據用戶使用場景和訴求,不能想當然地設計。

           

          2 常見位移類手勢解析

          了解完三個基礎維度后,我們再將其進行組合,從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢,我列舉出了常見的 7 類,如下圖所示,這 7 類基本涵蓋了 95% 以上的場景,我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置,因此接下來在描述下面手勢的定義時我都以受控物的位置變化進行舉例。

           

          2.1 拖拽

          2.1.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,無論釋放時手指是否仍有速度,受控物都會立即停止移動。(下圖的動態演示由 Principle 制作,觀看會有些不太直觀,大家可以在文章結尾處下載 Principle 源文件后導入到手機里體驗,源文件包含文章提到的所有位移類手勢)

           

          2.1.2 特點

          精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩定化效果,拖拽適用于對操作精度要求高,對效率要求低的功能。

           

          2.1.3 案例

          在 iOS 設置中調節亮度時,在有限范圍內,手指左右拖拽可以控制亮度變化。

           

          2.2甩動

          2.2.1定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指仍有速度,受控物將移動一段距離后才慢慢停止,移動的距離與釋放速度呈正相關。若釋放時手指速度為 0 ,則受控物立即停止移動。

           

          2.2.2 特點

          精確度低但效率高。由于閾值類型判定釋放速度和手指位移,甩動適用于需要快速瀏覽較多內容的場景,如滾動瀏覽列表。

           

          2.2.3 案例

          在微信的消息列表頁,使用甩動手勢控制列表上下移動,若釋放時仍有速度,列表將仍移動一段距離后才慢慢停止。

           

          2.3 輕掃 A

          2.3.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達到閾值,受控物將穩定在一個新位置。若釋放速度和手指位移沒有任何一個達到閾值,受控物將回到原位置。

           

          2.3.2 特點

          由于輕掃擁有穩定化效果,因此它能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性,就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」,這讓輕掃 A 與輕掃 B-E 有兩點不同,一是輕掃 A 可以通過釋放速度的快慢去控制內容的切換數量的多少,更加高效,二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內容,因此更加省力。

           

          2.3.3 案例

          在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向移動大概半個屏幕高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。

           

          2.4 輕掃 B

          2.4.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指位移達到閾值,受控物將穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物將回到原位置。

           

          2.4.2 特點

          輕掃 B 與輕掃 A 相比唯一的區別是閾值類型減少了釋放速度的判定方式,這提高了觸發切換的難度,使操作成本變高,但是在某些場景下,這也降低了誤操作的概率。如下拉刷新等。

           

          2.4.3 案例

          比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁,這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值判定方式,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序頁面。

          因此,當頁面已存在一個滑動操作的情況下,還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發時,為了避免誤操作,會將后者的手勢設計為輕掃 B 。

          上文提到,輕掃 A 的閾值類型為判定「釋放速度和手指位移」,輕掃 B 的閾值類型為僅判定「手指位移」,由于前者的實現成本比后者高,導致本應適合做成輕掃 A 的功能有時只能妥協做成輕掃 B ,比如之前提到過的美圖秀秀的短視頻評論浮層案例,但我們也可以通過減少手指位移的閾值來降低負面體驗,后文會講解如何與開發同學溝通。

           

          2.5 輕掃 C

          2.5.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是受控物并不隨著手指的控制而同步移動,僅當釋放時手指位移達到閾值時,受控物才開始移動并穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物位置則一直保持不變。

           

          2.5.2 特點

          上文講到過釋放后穩定化和相對控制的缺點,釋放后穩定化比較拖沓,相對控制讓用戶缺乏掌控感。兩者如果應用到了同一個手勢(即輕掃 C ),就會導致用戶在滑動屏幕時得不到任何反饋,用戶會疑惑是否因為自己操作不當或是設備出現故障。只有當用戶手指離開屏幕后才會發現觸發了操作,整體的交互流程給用戶一種滯后與延遲的感覺。

          因此輕掃 C 與其他類別的輕掃相比存在劣勢,但是它也存在很多的 App 的 H5 頁面中,我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多,因此只能退而求其次選擇輕掃 C 這個較差的方案,實際上在同樣的應用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗。

           

          2.5.3 案例

          下圖左是 QQ 的個性裝扮的 H5 頁面,卡片的切換使用的就是輕掃 C ,如果能夠優化為輕掃 A 體驗會更好,比如下圖右的音街首頁卡片的設計。

           

          2.6 輕掃 D

          2.6.1 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是手指位移達到閾值前受控物并不隨著手指的移動而移動。若手指位移達到閾值,無需手指釋放,受控物將開始移動并穩定在一個新位置。若手指位移沒有達到閾值,無論是否釋放,受控物位置則一直保持不變。

           

          2.6.2 特點

          相對控制的方式降低了用戶的掌控感,釋放前穩定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時,我們不希望用戶過于自由地操控對象之間的屬性變化過程,并且犧牲掌控感從而增加單次的切換效率。

           

          2.6.3 案例

          比如 iOS 的相機中,左右滑動切換拍攝模式時,由于前后不同模式之間的頁面框架變化較大,切換時會有不同元素的屬性變化,如果使用絕對控制和釋放后穩定化就會導致切換混亂且拖沓,使用相對控制和釋放前穩定化就能避免這個問題。

           

          2.7 輕掃E

          2.7.1 特殊說明

          上文我們講到,通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩定化前,受控物一旦穩定化,就脫離了手指的控制,需要手指離開屏幕后再次接觸屏幕開始下一次控制。

          輕掃E的不同之處在于它可以在受控物穩定化后,仍然控制受控物朝著下一個節點穩定化,在每個節點之間切換時能夠明顯感覺到分段感,如下圖案例所示。

          由于輕掃E相對于輕掃 A-D 的特殊性,控制方式中的絕對控制和相對控制無法覆蓋這個特殊現象,因此我們使用「多段相對控制」來命名輕掃E的這種特殊的控制方式。

           

          2.7.2 定義

          使用手指在受控物位置按下后,操控受控物沿著某個方向移動,若手指位移達到閾值,無需手指釋放,受控物就穩定在了一個新位置,但是此時手指還是仍然可以操控受控物繼續移動的,并且繼續移動過程中如果手指位移達到閾值將會到達下一個穩定化狀態。

           

          2.7.3 特點

          輕掃 E 適用于需要在多個對象之間快速切換和確認的場景,它的使用感覺很接近拖拽。如下圖所示,我們可以這樣理解,當被切換的對象數量接近于無窮大同時每個對象之間的距離接近無窮小時,輕掃 E 就可以視為拖拽。

           

          2.7.4 案例

          iOS相機人像模式切換打光方式、微信的通訊錄滑動字母索引導航,它們都使用輕掃 E 來滿足多個對象之間快速切換和確認的需求。

           

          3 實戰案例

          了解完上述的維度和常用手勢后,我們在腦中就可以形成一個思考框架。當我們要針對一個功能設計位移類手勢時,就可以從閾值類型、穩定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實際項目作為案例給大家講解一下思考過程。

          本案例是網易云音樂陌生人版一起聽中的一個功能,一起聽的雙方在聽歌過程中會收到彼此共同信息,比如聽歌口味相似度、是否同城、都喜歡哪些歌手等,目的是為了增加可玩性和互動性、降低退出率,鼓勵用戶互相了解、提高一起聽過程中的社交體驗。

          為了營造儀式感和避免信息過載,共同信息的展示方式設計為了一次只能看一條,進入浮層后默認展示最新的一條,可以通過滑動查看上一條。因此為了避免出現兩條同時占據展示區域的混亂狀態(如下圖左),我們為其添加了釋放后穩定化效果(如下圖右),同時為了方便用戶可以快速瀏覽舊的共同信息,這里使用的穩定化效果是較弱的,用戶可以通過滑動一次切換多個共同信息。

          由于需要滿足用戶快速瀏覽舊的共同信息的訴求,閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」,用戶可以通過控制釋放速度進而控制信息的切換數量??刂品绞絼t選擇了掌控感強的絕對控制。最后的結果如下圖所示。綜合三個維度進行歸類,此手勢為穩定化效果較弱的輕掃 A 。

           

          4 手勢角度的處理

          位移類手勢的方向一般為上下或左右,但并不是一定要完全垂直或水平才能夠觸發手勢。當上下滑動和左右滑動同時存在于一個頁面時,默認會有一個容錯角度,比如上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑,如下圖所示。

          但是有時開發同學出現失誤,導致容錯角度沒有均分,例如下圖中觸發上滑和下滑的角度極小,導致用戶在上下滑動時非常容易誤操作為左滑和右滑。

          云音樂也曾有過類似的遺留問題,iOS 端的播放頁上滑調出評論頁極易誤操作為左右滑動黑膠切歌(如下圖 A ,現已修復),安卓端的賬號側邊欄上滑瀏覽極易誤操作為左滑收起側邊欄(如下圖 B )。

          因此,在驗收階段,除了上述的三個維度外,角度的容錯性檢查也是重要的一環。因此在驗收時間充裕的情況下,最好要切換不同的手持方式分別體驗一次,因為有些問題只有在特定的手持方式下才能夠被發現。

          客戶端的角度判定方式實際上是一個比較復雜的過程,上述的內容是簡化的版本。后續將延展為一篇獨立文章給大家仔細聊一聊。

           

          5 客戶端的差異

          上文講到,基礎的三個維度即閾值類型、穩定化效果和控制方式決定了手勢的類別,是設計階段一定要定義清楚的。但是除此之外,設計一個手勢需要定義的細節非常多。比如受控物的移動是否有速度曲線?手指位移與受控物之間的位移的比率是多少呢?這些都是開發階段不得不面對的。幸運的是,安卓和 iOS 有系統封裝好的一套系統組件可以調用,操作系統自行解決了剛才講到的細節問題,但是 H5 框架下是無法調用系統組件的,手勢的各種細節都需要前端開發人員自己編寫,難度較大,大部分情況只能實現一些比較簡陋的效果,這也是為什么在很多 H5 框架下的界面滑動的體驗比較差的原因。

           

          6 高效溝通

          由于信息不對稱,與開發的溝通過程中,很容易出現理解偏差。比較常見的錯誤有:將甩動誤解為輕掃 A ,將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達不到預期的情況,很多設計師不知道如何讓開發同學修改,只能說“這個手勢不絲滑,優化一下”,開發同學也是一頭霧水,不知道往哪個方向優化。如果我們能夠直接說出“閾值判定方式現在只有手指的位移,需要釋放時的速度也能夠觸發跳轉;這個位移的閾值太高了,滑動時很難觸發跳轉,需要把閾值改為 16pt ”類似這樣準確的描述,就能夠大大降低溝通成本,順利驗收。為了避免溝通出現問題,下面我將日常經驗總結出現希望能夠幫助到大家。

          首先,一旦涉及到位移類手勢,除了必要的文字描述外(可參考上述的手勢定義的描述),最好給開發體驗 demo 或者其他 App 上類似的效果,否則很容易產生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發同學展示,但是 App 可能會更新,案例可能在未來某個時間就找不到了,所以我用 Principle 做了一個簡易的基礎 demo 集合(如下圖,源文件在文章末尾下載),和我上述介紹的手勢是對應的,大家可以拿著這個 demo 給開發同學演示大概的效果,也可以在這個 demo 源文件修改。

          下載鏈接: https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密碼: asto。

          拖拽和甩動由于需要定義的細節參數都被操作系統提前封裝好了,一般不需要我們給到額外的標注。但是對于輕掃,我們需要將細節定義清晰,下面將詳細講解。

           

          6.1 閾值類型

          上文講到,閾值類型一般有兩種:

          • ① 判定手指位移和釋放速度滿足任意一個即可;
          • ② 僅判定手指位移。

          ①的開發成本高于②。

          如果我們選用輕掃的閾值類型是①,開發同學編寫代碼需要兩個參數的閾值,分別是手指位移和釋放速度。手指位移閾值一般默認為受控物的1/2,例如下圖的全屏短視頻和 Banner 。

          當然我們也可以自定義一個閾值,比如 100pt 、受控物高度的 1/6 等,沒有特別的需要的話使用默認值即可而且也不用給開發同學特殊說明,但是如果有特殊需要想要修改默認值,就要告知開發同學你自定義的手指位移閾值。對于釋放速度閾值,通常默認就非常的小,幾乎是大于 0 即可觸發,一般情況下使用默認值即可。

          在本應該選用①的場景中,如果由于技術成本原因不得不選用②,需要注意的是由于缺少了釋放速度的判定,手指位移的閾值我們需要設置得小一些方便用戶觸發,否則就會出現上文中美圖秀秀浮層的那樣的體驗問題。經過我的實驗,手指位移閾值一般定為 16pt 是比較適中的,既不會太容易誤操作也不會難以觸發。

           

          6.2 穩定化效果

          輕掃是一定存在穩定化效果的,關鍵在于告知開發是釋放前穩定化還是釋放后穩定化。從開發的角度講,系統會監測用戶的行為,用戶在使用滑動時會有按下(down)、移動(move)、抬起(up)三個行為,釋放前穩定化是在移動階段判斷閾值并觸發操作、釋放后穩定化是在抬起后判斷閾值并觸發操作,開發成本幾乎沒有區別。

          上文提到過穩定化效果強弱的概念。穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。首先,我們需要確定單次滑動允許切換多個還是只允許切換一個,如果允許切換多個,開發同學會設定一個控制切換難度的系數,而只允許切換一個的話就不存在這個系數。通常我們也不需要修改這個默認系數,但如果想讓操作更加難或容易觸發,可以告知開發同學修改這個系數。

           

          6.3 控制方式

          絕對控制比相對控制的開發成本高,如果開發資源并不是很緊張,需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發同學控制方式,否則很可能被視為相對控制處理。

           

          7 手勢排查

          通過本文的學習,我們不但可以在開發工作進行前與開發同學高效溝通,保證開發工作的順利進行,也可以對自家移動端產品的現有手勢進行逐一排查發現問題點進行記錄,并且找到合適解決方案,然后用準確的語言描述給開發同學。下圖是我在進行手勢排查后輸出的表格,挑選出一些有代表性的案例給大家作參考,開發同學可以通過它快速明確問題,理解解決方案。

           

          結語

          本篇文章的歸納總結是通過日常積累和思考得來,希望能夠幫助大家在設計與溝通層面解決實際問題,如果有任何疏漏和不嚴謹的地方,希望大家能夠指出,后續的更新會將專欄不斷完善,交互手勢系列暫定的后續更新計劃如下。

          基礎篇:

          • ①位移類手勢(本篇文章)
          • ②點擊類手勢
          • ③其他類手勢

          進階篇:

          • ④交互手勢的特性

          超越篇:

          • ⑤設計創新型手勢

          有興趣的小伙伴可以持續關注哦~

          文章提到的 Principle 格式的手勢 demo 下載鏈接: https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密碼: asto。

           

          參考書籍:

          《交互設計語言:與萬物對話的藝術》 作者: 羅濤

          《交互設計精髓 4》作者:[美] 艾倫·庫伯 / [美] 羅伯特·萊曼 / [美] 戴維·克羅寧 / [美] 克里斯托弗·諾埃塞爾

           

          參考文章:

          百度APP「表情面板」體驗升級

          微信視頻號為什么沒有采用全屏沉浸式交互

           

          參考網站:

          iOS Human Interface Guidelines

           

          原文地址:站酷

          作者:Ballen成明

          轉載請注明:學UI網》交互手勢全解析之位移類手勢

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:陳皮Celia 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          日歷

          鏈接

          個人資料

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

          存檔

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