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

          首頁

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

          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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          綜合指南:產品設計 vs. 用戶體驗設計

          ui設計分享達人

          區別指南 


          產品設計和用戶體驗設計(以下簡稱UX設計)之間的區別在于,后者側重于用戶對應用程序或網站的體驗感是否流暢,而前者則更多地是邏輯方面是否流暢。也就是說UX設計師負責確保設計看起來不錯,使用起來感覺更好,使交互更愉悅。但產品設計師不處理這些,他們設計的是產品應該如何工作(甚至應該是什么樣子)。


          不過產品設計師還有一個更重要的責任——查看產品的不同部分如何相互作用。這里我們展開舉例,比如進行手機設計時,他們就要確保操作系統與屏幕上的觸控以及與物理按鈕都能很好地匹配;如果是筆記本電腦或臺式電腦,那么硬件和各式端口就需要合理地設計分布,這樣用戶在使用時才不會出現連接線亂糟糟的情況。


          UX設計師的主要職責是確保用戶可以輕松地在產品的數字部分執行他們希望的操作。


          產品、UX設計師會使用不同的工具來完成其工作。例如,產品設計通常在AutoCAD等程序中完成,而UX設計則常常用Figma、Adobe Xd或Sketch創建。


          產品設計師會更注重全局意識,因為他們需要將所有部件組合進同一個產品內,一起工作。


          Vip Sitaraman作為設計顧問,服務的客戶不光有創業公司還有財富500強


          我與行業資深人士Viputheshwar Sitaraman聊了這個問題——UX設計和產品管理之間的區別是什么,他的回答很有幫助。Vip曾為初創公司和財富500強公司擔任過設計顧問,親身體驗了許多不同的產品開發方式。


          他認為這些角色有不同的職責需要考慮,他說:「關鍵的區別在于UX設計師更關注用戶體驗,而產品設計師關注整體業務目標(包括用戶經驗)。以及,他們各自與業務發展目標和關鍵績效指標 (KPI) 的關系?!?


          關于用戶體驗設計師角色的具體細節,他告訴我:「UX設計師的主要/唯一KPI是用戶對體驗的滿意度。因此,用戶體驗設計師的大部分工作都集中在優化、改進和創新客戶流程上。」


          他還進一步解釋了產品設計師負責產品或項目時的更大藍圖:「產品設計師的 KPI與整個業務相關聯,例如:擴展新市場、構建有機增長(organic growth)引擎或提高轉化率。可以想象,這類決策與典型的UX角色體驗設計任務大不相同?!?


          工作、職責和技能方面的不同

          UX設計師主要關注產品的可用性,而產品設計師則更多地關注產品整體的感覺和體驗。產品設計師并不總是用戶體驗設計師,但他們主要致力于產品的感覺和可用性。

          by UX Store on Unsplash


          產品設計師的職責

          產品設計師從各個維度負責產品的外觀和感受體驗;

          使用草圖、線框圖或其他設計工具來創造可以成為實際產品的想法;

          產品設計師需要了解平面、色彩和排版等的設計理論;

          他們需要衡量KPI并確保產品達到預期水平。


          UX設計師的職責

          UX設計師負責用戶在使用產品時的體驗與感受;

          確保一切以直觀明確為基準,避免用戶感到迷茫或困惑;

          UX設計師需要了解用戶研究方法,如可用性測試、訪談、日記研究和現場實驗等;

          需要對認知負荷理論等人機交互原理有很好的理解;

          UX設計師通常會在項目規劃的初步階段就開始制作線框圖。


          RadCollab的資深資深設計師Nolan Perkins提到,UX設計師的責任并不小,但也取決于公司。他告訴我:


          根據公司的規模,產品設計師可以從前面提到的任何步驟開始。他們可以從報告或見解開始,也可以從用戶故事或線框圖開始。無論他們從哪里啟動,產品設計師都會把這些信息帶到完整的高保真模型中。


          每個職業的利弊

          產品設計師和UX設計師的工作內容雖有不同,但兩者都對人們每天使用的產品產生著重大影響。

          by JESHOOTS.COM on Unsplash


          UX設計師更注重技術,并通過研究、設計工程或原型來解決問題;而產品設計師則通過產品體驗來創造視覺和思想。這兩種工作角色都為產品的許多方面提供了信息, 從市場營銷再到界面功能都包攬其中。在一個凝聚力強大的公司中,請確保為每個職位雇用合適的人!


          產品設計師的難處

          這要看你怎么覺得了,辯證來說也許算不上難處,作為產品設計師的你,需要對研發的產品負責。而最重大的挑戰之一,是要確保在交付時間及合理預算內,進行原型設計或功能試驗。


          要在這個行業取得成功,需要極大的決心和動力,其實所有高薪工作皆是如此,但產品設計會更迫切需要這種素質。這不僅僅是為了讓一些東西看起來很漂亮,而是關于如何創造性的解決問題。


          UX設計師的難處

          UX設計師是設計過程中不可或缺的一部分,他們確保每個項目都能獲得個性化的細節呈現。從前期一步步調研到草擬線框圖,以及對不同部分的優化修改,UX設計師可以了解到產品開發的各個方面,全程跟進。


          設計師們的興趣也是多種多樣的,有的人對整個項目感興趣,而另一些人則更喜歡設計工作,比如原型搭建。有些招聘人員要求比較高,偏好能夠完成全棧工作的UX設計師,這就需要一人同時擁有多項學科知識儲備。


          我經常聽到的一種說法是UX需要大量的奉獻精神,有時設計師會因接收信息繁多而感到不知所措,但這也側面說明了UX設計師對產品開發過程如此重要的原因。設計師們應學習處理信息和研究,以易于理解的方式呈現結果同時推動設計決策。


          成為產品設計師的益處

          產品設計師可以在許多領域工作,無論是UI設計、業務策略還是產品架構。這些領域使得創意人員和來自不同背景的人聚集在一起,創造有價值的東西。

          產品設計師有很多責任


          產品設計師是少數通過工程思維方式和極強同理心,來塑造組織文化的人,而踐行的方法則是他們用各式新設計出的產品去處理不同的問題,從而得出方法論。產品設計主要是解決問題,日復一日,它們也有助于平衡功能與形式,雖然總有新的難題出現——但也請你繼續成長,迎難而上!


          產品設計師橫跨多個行業,因為他們擁有的技能非常多樣化!當今產品設計師必須有像變色龍一樣強的適應力,處理任何狀況,這促使他們成為非常有價值的員工。


          成為UX設計師的益處

          UX設計師是炙手可熱的高薪專業人士,他們在設計無縫體驗方面發揮著強大的作用。UX設計師往往兼具創造性和協作性,這意味著他們也能很好地跨設備或平臺(如移動設備)與來自不同背景的人共同工作。

          UX設計師的工作似乎與產品設計師的角色重疊


          UX設計工作可能要求很高,但個人成長的機會卻是巨大的。你會發現這個方向將激勵那些熱愛學習技術的人,因為人機交互模型是不斷變化的,它們對我們的行為有著很大影響,所以,很多時候你會覺得業務需求之間的交集也是一個發揮技能的領域。


          實際工作中,設計師與用戶/客戶的溝通時間會占比較多,因為要對他們與產品或服務相關的行為、需求深入研究。這些信息能非常有利于他們創建原型圖與線框圖,同時,還能幫助用戶在新設計實施前,深入了解提高客戶轉化率或增加收入流的方法。


          如何知道自己是否適合這兩種角色呢?

          我與三位業內人士進行了交流,并問了問他們「覺得在這兩個領域取得成績需要什么」。

          Lindsey Allard是PlaybookUX組織的CEO兼聯合創始人


          Lindsey Allard,PlaybookUX的CEO兼聯合創始人告訴我:

          如果滿足以下條件,你非常適合在UX設計領域:有用戶研究或用戶測試過程的經驗;同理心強,能從用戶角度思考;能夠客觀和批判性思考的人;并且需要了解UX流程(必要的)。


          如果符合以下條件,則你適合從事產品設計:熟練使用Adobe、Sketch等工具;對設計、美的事物有強烈渴望,并擅長結合品牌;跟得上潮流;能夠將一個愿景變成設計。


          它們是相似的,甚至UX設計師可以轉為產品設計師(反之亦然),但在公司內部運作方面還是存在明顯差異。


          用戶體驗一直是我的熱情所在,我也會繼續在UX設計領域深耕(曾經有一段時間我本可以轉到產品設計上),兩者大部分差異來自我們對項目采取的方法,以及我們制定的完成目標。


          Nolan Perkins,RadCollab資深設計師告訴我:

          我認為新人不應該上來就專攻產品設計或UX設計,因為兩者都是更高級別的職位。相反,在決定從事具體的細分崗位之前,建議先打好基礎。


          Viputheshwar Sitaraman,數字顧問告訴我:

          作為一名UX設計師,要能通過交互設計來預測用戶行為。對用戶行為、UI流程和可訪問性等具有敏銳洞察力的設計師,將在UX設計角色中茁壯成長,并通過提升客戶體驗來推動增長。


          另一方面,產品設計師要能找到新的機會來擴展價值。一個商業和營銷意識俱佳的人,如果對更廣闊的市場(即競爭、趨勢)有自己的深刻理解,也會更好地幫助產品和功能改進優化,在產品設計角色中快速成長。


          產品和UX設計角色都需要對現代趨勢(無論是業務、市場、用戶行為和交互)有深入和最新的了解——這就是為什么找到你最關心/享受的東西是如此重要!


          要想成為這兩種角色,有什么建議?

          好問題!UX設計師和產品設計師擁有截然不同的技能組合,每個人的職責都是獨特的。為了讓大家對這些區別有一個了解,我將逐一概述。


          如何成為一名UX設計師

          首先,如果你沒有學過任何技術經驗,只學過設計,那么成為UX設計師的道路會稍微復雜一些。用戶研究方法深深植根于用戶體驗技術中,所以第一步是獲得技術技能,幫助你以不同的方式探索用戶需求,比如原型和其他需要時間來研究的活動。


          Quick tips

          加入一個UX的在線提升訓練營;

          在用戶體驗領域繼續深造,例如讀碩讀博;

          豐富自身技能,比如學習用戶心理學;

          向你認識的UX設計師學習請教。


          如何成為產品設計師

          成為產品設計師有兩條關鍵路徑:第一種是通過專業的設計學校,獲得產品設計學位;另一種是獲得工程學位,進入具有產品設計崗位的公司,通過轉崗或是晉升獲得。決定走哪條路可以改變你的整個職業軌跡!


          Quick tips

          確定您想要設計的內容和位置。產品設計師更多的是構建產品的專家,并不局限于設計一個項目,這也是為什么產品設計師必須在許多學科上多才多藝,這樣才能對從構思到開發和生產的不同方面給予指導,比如工程、工業設計和用戶界面設計 (UI) 和甚至創業技能;

          產品類型千差萬別,從服裝或汽車等消費品到納米機器人或3D打印設備。請嘗試找到你擅長的領域,術業有專攻,你不可能掌握一切!

          探索你的興趣——通過閱讀相關領域的博客或新技術的文章/視頻,看看它是如何與為你關注的行業聯系起來的。


          寫在最后

          產品設計師搭建產品體系,UX設計師通過調研和數據推進決策,并確定最適合用戶的交互體驗。兩個角色通常會一起工作,但也取決于公司的大小。如果需要,高級UX設計師可以同時完成這兩項工作!


          有人常將二者理解為是一碼事兒,因為他們通常都會參與早期的開發階段(無論是概念階段還是線框圖階段時)。在很多情況下,會有一個團隊專門從事UI設計。總而言之:


          抱歉,你不能通過一件事來定義UX設計師或產品設計師!


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

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



          文章來源:站酷  作者:UX詞典

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

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

          藍藍設計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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          js判斷當前瀏覽器的分辨率

          前端達人

          var events = navigator.userAgent;
          if (events.indexOf('Android') > -1 || events.indexOf('Linux') > -1 || events.indexOf('Adr') > -1) {
          console.log("安卓手機");
          } else if (events.indexOf('iPhone') > -1) {
          //根據尺寸進行判斷 蘋果的型號
          if (screen.height == 812 && screen.width == 375) {
          console.log("蘋果X");
          } else if (screen.height == 736 && screen.width == 414) {
          console.log("iPhone7P - iPhone8P - iPhone6");
          } else if (screen.height == 667 && screen.width == 375) {
          console.log("iPhone7 - iPhone8 - iPhone6");
          } else if (screen.height == 568 && screen.width == 320) {
          console.log("iPhone5");
          } else {
          console.log("iPhone4");
          }
          } else if (events.indexOf('Windows Phone') > -1) {
          console.log("諾基亞手機");
          } else if (events.indexOf("iPad") > -1) {
          console.log("平板");
          }

          使用js動態引入js和css文件方法

          方法1:

          //引入css var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = 'css/style.css'; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); //引入js var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = 'js/js.js'; script.type = 'text/javascript'; head.appendChild(script); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          方法2:

          //引入css new_element=document.createElement("link"); new_element.setAttribute("rel","stylesheet"); new_element.setAttribute("type","text/css"); new_element.setAttribute("href","css/style.css"); document.body.appendChild(new_element); //引入js new_element=document.createElement("script"); new_element.setAttribute("type","text/javascript"); new_element.setAttribute("src","js/js.js"); document.body.appendChild(new_element); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11

          方法3:

          var importCssJs = { css: function(path) { if(!path || path.length === 0) { throw new Error('參數"path"錯誤'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function(path) { if(!path || path.length === 0) { throw new Error('參數"path"錯誤'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } //引用方法 importCssJs.css('css/style.css'); importCssJs.js('js/js.js');




















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

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


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

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

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


          layui 鼠標移動在文字上顯示 lay-tips 方法

          前端達人

          代碼:

          在源代碼加上

          <i class="layui-icon layui-icon-tips" lay-tips="最大長度為16個文字" ></i>
          

          JS代碼

          加上js代碼

          $('*[lay-tips]').on('mouseenter', function(){
          var content = $(this).attr('lay-tips');
          
          this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">'+ content + '</div>', this, {
          time: -1
          ,maxWidth: 280
          ,tips: [3, '#3A3D49']
          });
          }).on('mouseleave', function(){
          layer.close(this.index);
          });






          禁用鼠標事件,設置pointer-events屬性為none:

          pointer-events:none

          開啟鼠標事件,設置pointer-events為auto:

          pointer-events:auto








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

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


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

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

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


          5個技巧,讓你的做圖效率翻10倍!

          seo達人



          相信很多設計師都會覺得每天時間不夠用,沒有效率,沒有收獲,那么今天分享5個時間管理的方法,幫助你提升效率的同時,個人也能得到成長。請看今天的分享,enjoy it。

           

          如何做好時間管理?

          圖片

          網上流傳一張王健林的行程單,可以看得出時間分配相當滿,于是我就特別好奇,專門問了一些我們公司的高P,他們每天那么多工作,是如何去平衡生活和工作的,其中有一個很重要的點就是做好時間管理且自律

          比如今天晚上8點要和孩子去看一個音樂會,就會在8點之前把所有的工作全部搞定,然后去陪孩子!是呀,厲害的人,能在某一個點把事情全部搞定,本身就是超強的能力,那么作為職場人,我們該怎么合理管理時間呢,今天分享6個小方法給大家。

           

          方法一:番茄工作法 

          番茄工作法是由弗朗西斯科·西里洛于1992年創立的一種相對于GTD更微觀的時間管理方法。因為創始人使用番茄定時器,所以叫番茄工作法。

          圖片

           

          如何使用?

          選擇一個待完成的任務,將番茄時間設為25分鐘,專注工作,中途不允許做任何與該任務無關的事,直到番茄時鐘響起,然后在短暫休息一會(5分鐘就行),每4個番茄時段多休息一會兒。

          這個方法為什么好用呢?我相信很多設計師和我一樣,每次工作幾分鐘后就會玩玩手機,看看微信,一邊聽歌,刷著網站,同時做著幾件事情。

          這個就是明顯的一心多用,不夠聚焦,番茄時鐘好處就是督促你在這個25分鐘內,專心只做一件事情。充分利用大腦的集中注意力去高效完成一件事,然后休息5分鐘,再開始下一個番茄時間。

          圖片

          當然你也可以根據你個人習慣來調整時間,我將番茄時間的25分鐘改成了45分鐘,這樣有助于我更好的聚焦。比如我有一個需求時,我會花45分鐘看完交互流程,45分鐘去和開發還原開發細節,45分鐘去收集設計靈感,45分鐘去把頁面框架搭建好,或者設計好一個局部等等,然后休息5分鐘,讓自己短暫休息下。

          圖片

           

          合理拆解需求

          學會拆解任務,設計師的需求有大有小,大的比如一個首頁改版,一個設計語言的建立,小的有一個彈窗設計,一個圖標繪制等等,那么運用番茄時間的第一步就是你需要對工作任務進行合理的拆解,才能用多個番茄時間段來覆蓋整個項目,比如需要做一個首頁改版,那么我就需要進行拆解任務。

          圖片

          首頁改版可以分成四個大的關鍵節點,需求討論,設計風格探索,視覺設計,交付開發,然后每個大的模塊下再細分小的任務,然后進行番茄時鐘的評估,比如色彩收集我可能需要2個45分鐘,那么就2個番茄時鐘去完成它。

          所以我們要學會合理的去拆分你的需求任務!明確到可執行的番茄時鐘。

           

          及時提醒

          圖片

          每個25分鐘或者45分鐘的時間點提醒一定要及時,鬧鐘響了,停下手上工作,短暫的休息調整下,切忌繼續一直工作下去,因為只有適當休息,我們才能更加高效,高質量的完成接下來任務。

           

          聽聽白噪音

          圖片

          很多同學在工作時,喜歡戴著耳機聽著音樂,但是在使用番茄時鐘時,我不太建議這樣做,原因在于音樂會干擾我們思考,有時候音樂還會影響你的情緒,所以這個時候建議大家聽聽舒緩的白噪音,比如海浪聲音、風聲、雨聲,我個人比較喜歡聽海浪拍打的聲音,能夠讓自己靜下心來。

          這里推薦一個番茄時鐘的MAC工具,叫番茄鐘,里面除了設置番茄鐘外,還自帶很多白噪音,非常好用!

          圖片

           

          方法二:四象限時間法 

          美國的管理學家科維提出的一個時間管理的理論,把工作按照重要和緊急兩個不同的程度進行了劃分,基本上可以分為四個“象限”:

          1.既緊急又重要:

          如同事投訴、即將到期的任務、上線危機等

          2.重要但不緊急:

          建立人際關系、設計培訓、制定設計規范等

          3.緊急但不重要:

          如取快遞、部門會議等

          4.既不緊急也不重要:

          如網購、閑談、郵件、發朋友圈等

          我們需要把每天工作任務,按處理順序劃分:先是既緊急又重要的,接著是重要但不緊急的,再到緊急但不重要的,最后才是既不緊急也不重要的。我們具體來看看設計工作中的一些場景。

          圖片

           

          既緊急又重要

          設計師工作場景:比如項目上線前的設計更改,明天和主管匯報的PPT,需求設計評審,這是我們每天工作的核心,大多數設計師在公司中日常任務就是產品的迭代,那么重要的事都是不能一拖再拖,都是迫在眉睫。

          因為整個產品是趕時間點的,比如雙11那天必須上線,那么無論如何都要按時保質量的完成,所以這時候是考驗我們經驗、判斷力的時刻,如果沒有做好,很有可能影響你的考核和晉升。

          我自己的方法是每晚睡前給自己列出明天最重要的必須完成的3件事情,并用工具軟件記錄下來!

          圖片

           

          重要但不緊急

          這里主要是和你個人成長發展有關,比如學習英語、提升動效技能、掌握C4D、理財等等,這些很重要,但是很多時候我們每天都在處理重要又緊急的事情,特別是互聯網公司,每天都在做需求,對于自己的個人規劃,根本沒有時間處理,就會導致你個人的提升這些事情完全沒有時間做,多把精力放在這個領域去提升自己,必須主動去做,這是對于你個人成長最有幫助的。

          比如你未來3年希望去大廠工作,那么你就要列出來大廠設計師的技能有哪些,比如科學設計方法、設計思維、動效、數據能力,然后都放在你重要不緊急事情里。在精力有限的基礎上多做投入和提升,慢慢才能達到目標,否則就一直成為流水線設計,或者項目里面一個資源方,個人成長永遠沒有!

          圖片

           

          緊急但不重要

          比如PM找你聊需求,當然正常需求該聊還是聊,但是工作中經常有的聊,真的只是陪聊,很多時候真的在沒有必要,沒有結果的開會,聊需求真的是浪費時間,表面看似第一象限緊急事情里,因為迫切的呼聲會讓我們產生“這件事很重要”的錯覺——實際上就算重要也是對別人而言。我們花很多時間在這個里面打轉,其實不過是在滿足別人的期望與標準。

          設計師經常遇見的,改文案啊,產品會議,開發排期這種會議在我看來,出來關鍵節點有結果的需要參加,更多事情能少參與就少參與。

          圖片

           

          既不緊急也不重要

          這里的既不緊急也不重要就是每天你花費時間最多的地方,比如群里聊天,刷朋友圈,抖音,看八卦新聞,當然人都是需要一些無聊消遣的,但不值得花很多時間在這個象限。剛開始時也許有滋有味,到后來你就會發現其實是很空虛的。

          我經常給大家說,你怎么比別人進步更快,就是設計之外的8小時你在做什么。別人工作時間外8小時都在學設計,學各種課程,而你在做些無聊事情,一年下去差別就出來了,不是說我們不應該去娛樂,而是需要注意時間分配。

          總之,關于時間的4象限,需要大家多多的關注,多把精力放在重要又緊急,然后允許情況下,多提升重要不緊急事情的投入,長期堅持下去,你會有巨大的改變。

           

          方法三:先思考再動手 

          圖片

          在接到需求時候,多問自己幾個為什么,這個頁面為什么要改版?改版是為了提升用戶留存,還是活躍度?還是提升頁面轉化?還是優化了什么?了解清楚,梳理清楚邏輯、流程關系以后再動手,這才是一個正確的做事方式,同時也需要思考,你在這中間做了哪些有價值的事!

          這個道理很簡單,但是很多人都沒有做到,我也有很多時候,做著做著掉進一個坑里,所以做之前想清楚,想好了再做會更好!

           

          方法四:避免重復造輪子 

          圖片

           

          避免重復,經??偨Y積累

          做一件事情,學會舉一反三,學會從點到面,在很多公司面試晉升過程中,比如阿里,P6資深設計師和P7專家設計師,很重要的一個技能點就是,如何從點做到面。

          我們在做很多需求時候,需要思考,這次做的這個需求后續如果遇見類似的,能不能快速解決,而不至于浪費時間和精力投入進去沒有成長!比如說按鈕設計,我們隨便抓一個市場上的按鈕,你會發現按鈕的樣式、大小顏色就是各種不統一,浪費開發資源和設計資源!如果你每天的工作都是做這種浪費精力沒有存在感的事情,對于個人是很不利的,平時做項目多留心下,比如我做一個專題頁面是不是可以去思考下,這個頁面做完哪些控件我可以沉淀下來,復用到其他的場景中,賦能給其他設計師呢,這個是很重要的!

          同樣的,比如我們最近在研究一個彈窗,那么是不是我做這次彈窗,我就把彈窗徹底研究透徹,彈窗尺寸大小、顏色、按鈕、狀態都研究徹底,徹底掌握了這個知識點,后面再做彈窗信手拈來,深刻搞定一個任務,避免反復,經??偨Y和積累,也是提升效率很重要的方法。

          圖片

           

          當你覺得很難的時候其實是在上坡

          這是我很有感觸的一句話,人的成長體現在同樣的事情上,萬事開頭難,但后面會越來越順手,因為在這個過程中你已經掌握了方法,我們需要做的就是不要半途而廢,要學就學透學完整,后面工作效率就上來了。

          圖片

          我們的專業知識就像這4個空杯子,一個代表AE,一個是C4D,一個是UI,一個是插畫,很多東西都想掌握,于是每天學習一次就往這個杯子澆水一點,但是堅持10天就堅持不下去了,要么學別的,要么沒有動力了,然后導致最后什么都沒學到。

          圖片

          正確做法是把一件事情學透了,學徹底了再去學下一件事情,你學AE就徹底把AE掌握了,再去學下一個,這樣避免反復,徹底掌握不僅能加速你的成長,更能讓你專業更深!

           

          方法五:放下手機,定時間點 

          最后這個方法對我來說很有效,學會放下手機,放下干擾,中國口香糖的營業額持續下降,大家知道為什么嗎?口香糖一般都會擺在收銀臺的旁邊,因為用戶在超市收銀臺排隊的時候,都在玩手機,沒有人去看前面的貨臺!可見手機對我們影響有多大,所以當你準備學習時候,或者去完成一個任務時候,最有效就是手機放起來,至少一個番茄時間不要去看,這樣保證你的效率變高。

          另外一個方法就是定時間點,定結束時間點很重要,人對于時間點都是有天然遵守的,比如地鐵錯過末班車就回不了家,火車飛機晚點你也回不去,所以我們做事情時候可以立一個最晚完成時間,然后去做,比如我寫作,定的時間就是每周末必須寫完,所以我周末再忙,都會去抽空寫完。

           

          最后 

          今天分享的這些經驗,都是我實踐過并有效的方法,希望可以幫助到大家一同實踐起來,照著做下去,你會發現能壓縮至少1/3的時間出來,讓我們都把時間花在正確的事情,和正確的人身上,快樂工作,快樂成長,快樂生活!

           

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

          轉載請注明:學UI網》5個技巧,讓你的做圖效率翻10倍!

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

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


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

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

          藍藍設計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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          網格系統:如何使用布局網格構建更好的 UI 設計?

          資深UI設計者

          網格系統已在印刷出版物中使用了很長時間。就比如閱讀報紙,了解新聞如何以網格和文本塊的形式呈現。這很簡單,同時也很難系統。

          網格系統已在印刷出版物中使用了很長時間。就比如閱讀報紙,了解新聞如何以網格和文本塊的形式呈現。這很簡單,同時也很難系統。

          但是,網格在印刷品中與在數字媒體中一樣重要。沒有什么比設計不一致更令人沮喪的了。它看起來不僅不專業,而且還使導航和閱讀變得更加困難。這就是網格有用的地方。

          不可否認,良好設計的秘訣在于視覺元素如何根據它們的位置進行組織和排列。您可以使用布局網格來實現這一點。

          與顏色一樣,排版也是UI/UX 設計的重要組成部分。布局網格也是其中的重要組成部分。如果沒有網格,您的文本和圖像將會無處安放,造成混亂。

          因此,為了讓您更容易理解,我們整理了這份關于網格的指南。它會告訴你:

          A. 什么是網格?

          B. 布局網格的類型

          C. 交互設計中的布局網格

          什么是網格系統?

          網格系統,說的在簡單的話,就是彼此交叉的垂直和水平線的組合。然后使用這些交點來安排網站或應用程序上的內容。網格系統允許設計人員以易于理解和更易于管理的方式排列內容。

          網格充當元素之間的無形粘合劑。即使它們在物理上分開,它也會將它們保持在原位。

          布局網格有哪些類型?

          有四種類型的網格:

          a. 手稿網格

          b. 列網格

          c. 模塊化網格

          d. 基線網格

          讓我們探索其中的每一個,以了解您可以在哪里使用它們。

          手稿網格

          手稿網格,也稱為單列網格,是網格結構的最基本版本。它是一個大的矩形區域,占據頁面或格式內的大部分空間。

          這些網格對于顯示連續的文本塊很有用,或者您可以使用圖像來填充塊。它們通常用于印刷出版物,例如書籍。

          列網格

          列網格,顧名思義,將元素組織成列。根據配置,列網格可能只有兩列或最多六列。

          有兩種類型的柱形網格,對稱和非對稱。

          列網格中的圖像可以放置在一列或跨兩列。

          雜志、研究或學術論文、在線報紙較多使用列網格。

          模塊化網格

          模塊化網格既有列又有行。它們具有相同大小的模塊。當您想要對復雜布局進行更多控制時,這些類型的網格非常有用。

          報紙使用模塊化網格和列網格來更好地控制布局。使用模塊化網格,無限變化是可能的。

          基線網格

          文本所在的行稱為基線?;€網格可以應用于任何布局網格,為您的文本提供節奏。

          網格確保每行文本(基線)的底部與垂直間距對齊。

          基線網格可見于橫線筆記本中。他們保持文本的節奏。

          交互設計中的布局網格及其好處

          交互式設計沒有固定的大小。這背后的原因是人們使用不同屏幕尺寸的設備,例如智能手機、智能手表、平板電腦和臺式機。

          因此,當人們從一臺設備移動到另一臺設備時,需要重新組織元素以適應不斷變化的屏幕尺寸。要完成這些更改,布局網格是最佳選擇。

          網格系統以多種方式提高設計質量,包括:

          它有助于創建清晰度和一致性

          一致性至關重要,尤其是對于數字媒體。它可以幫助用戶理解在哪里尋找一條信息。網格為一致性奠定了基礎,從而間接提高了清晰度。

          使設計具有響應性

          響應式設計已成為當今的必需品。如果您的網站沒有響應并且對桌面和移動設備不友好,您的用戶就會遠離。因此,設計師使用網格來創建跨多個屏幕尺寸的設計一致性。

          使設計更易于修改

          數字媒體在不斷發展。數字媒體的主要優勢之一是只要創建,就可以重復使用。網格設計也是如此。您可以重新排列這些網格以創建新版本的設計。

          常見問題

          哪種網格系統最好?

          網格的應用取決于格式。例如,手稿網格適用于書籍,但不適用于報紙或雜志。

          關鍵要點

          自 13 世紀首次使用網格以來,網格一直在幫助各種藝術家。網格就像一個骨架,將元素固定在一起。它們可以幫助您在設計中找到完美的平衡。

          現在您已經很好地了解了布局網格、它們的類型和它們的優點,您可以在設計中使用它們。

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

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


          文章來源:站酷  作者:對啊設計君

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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