<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和交互的需要注意45個微細節

          ui設計分享達人

          1.用微妙的雙重投影來讓你的卡片看起來更加清晰

          在某些元素周圍使用多個放置陰影或非常精細的邊框(僅比實際陰影暗一點)可以使這些元素看起來更清晰、更清晰,并幫助你避免那些看起來渾濁的陰影。



          2.減少標題上的字母間距以提供更好的光學平衡

          你的標題很可能會比正文更大,也比正文更重,所以字母之間的間距有時會看起來更大,

          減少一點間距,就可以使你的標題更加清晰



          3.為了保持一致性,請確保圖標共享相同的視覺樣式。

          在ui中實現圖標時,保持一致。

          確保它們具有相同的視覺風格; 相同的重量,或者填充,或者輪廓。



          4.在你的設計中只用一種字體就好了

          在創建設計時只使用一種字體是比較好的,這樣做實際上可以幫助你產生統一的設計效果。

          使用字重、大小和顏色的組合,你還是可以用一個單獨的字體表達清晰的文字的結構



          5.留白

          留白可以讓你的設計具有呼吸感,更加舒適



          6.選擇底色,然后使用色調和陰影來增加一致

          通過選擇一個基色,然后使用你選擇的顏色的色調和陰影,可以以最簡單的方式為你的設計增加一致性



          7.提高用戶的入職體驗。 拇指法則記住。

          允許用戶隨時跳過你的移動應用程序登錄序列,并將該跳過鏈接放在拇指容易觸及的位置。

          只是一個簡單的調整,可以讓你的用戶有更好的體驗(我常常體驗國內一些APP,關閉按鈕特別遠,特別難按)



          8.光影需要是來自同一個光源

          確保你的陰影總是來自同一個光源,會素描的同學很好理解,光源關系一致表達空間統一性的基礎



          9.提高文本和圖像之間的對比度

          基本的處理方式是,在圖片上增加一個透明漸變蒙版來使得字體看的更加清楚



          10.同一種字體時,使用多字重的字體

          如果只使用一個字體,盡量選擇有多字重的字體,比如:阿里巴巴普惠體、思源、OPPO



          11.在淺色背景上你的文字可見性需要注意

          在淺色背景下工作時,文字顏色不要太淺,雖然看起來很舒服,但可見性不較差,不利于閱讀



          12.長文本中,文字閱讀感不要太搶眼

          當涉及到長格式的內容時,某些常規的粗體字體在屏幕上看起來還是有點太重,太呆板了。

          建議,選擇像深灰色(即# 4f4f)來降低文本的色調,這樣閱讀起來會更加舒服



          13.行動按鈕需要是最聚焦的。

          通過使用顏色對比、尺寸和標簽,確保“行動按鈕”盡可能突出



          14.字號越小,你的行距就越高

          隨著字號的減小,增加行高可以獲得更好的易讀性。




          16.突出菜單中最常用的元素


          在設計應用程序內部使用的菜單時,請確保提供最常用的操作(即; 上傳圖像,添加文件等…)最突出的屏幕



          17.從你的圖像中挑選顏色,讓你的產品栩栩如生。

          只需從你的產品圖像中挑選顏色,然后將你選擇的顏色的各種色調和陰影應用到你的背景、文本、圖標……,就能為你的設計增添大量的視覺趣味



          18.根據字體的x高度設置行高。

          不同x高度的字體需要不同的行高測量來實現文本行之間的正確分隔。

          即使你可能有兩種字體大小相同(即; 18px)它們的x高度可能會有很大差異,選擇正確行高是非常有必要的



          19.突出最重要的元素

          undefined

          通過使用字體大小、權重、顏色和布局的組合,你可以輕松突出UI中最重要的元素



          20.告知錯誤的原因

          undefined

          在用戶剛剛執行的操作附近添加一條錯誤消息,可以幫助用戶提高正確登入,也可以緩解用戶焦慮(他可以更加清晰那里出錯)



          21.嘗試在手機上創建更大可點擊的區域。

          undefined

          當為移動設備設計時,嘗試創建足夠大的可點擊區域

          對于按鈕和僅由文本組成的鏈接來說,點擊區域會很小,所以盡可能使用帶有標簽的圖標。

          iOS和Android的最低建議點擊區域

          iOS為44 x 44pt

          安卓48 x 48dp



          22.在短標題上使用大寫的字母

          undefined

          長標題都是大寫字母的話,閱讀轉化上比較慢(你明白他是什么意思比較慢)

          短標題都是大字母的話,相對來說比較快可以和記憶中的單詞對應上



          23.保持淺色文本和圖像之間的對比度

          undefined

          始終確保淺色文本在淺色圖像背景下清晰可見。

          只需在文本后面應用一個低透明的深色背景,就能保持這些元素之間的良好對比度



          24.排版的親密性,要一直記得

          undefined

          標題、正文、標題、正文……這樣的排列中如果是間距都是相同的,那么在閱讀上就很難區分標題是屬于上文還是下文的。

          正確的做法是,標題距離上文的距離>標題距離下文的距離,這樣閱讀起來,標題會比較清晰的對應的是下文



          25.在下載中盡量給進度提醒

          undefined

          當下載速度是一閃而過時,則無需提示

          當下載等待時間>3S時,建議給進度提示



          26.文字也有情緒

          undefined

          在項目中處理文本時,選擇正確的字體將影響文本的語音類型。 那么大聲、或者溫柔、或者正式,嚴肅,或者有趣。每種字體都有自己獨特的聲音



          27.為正文選擇合適的行長,并提高可讀性。

          undefined

          基于人閱讀情緒,如果閱讀一行很長,一直閱讀下去,會出現你眼前閱讀的內容“不見”的情況

          對于單列頁面,45到75個字符被廣泛認為是令人滿意的行長,66個字符的行(包括字母和空格)是最合適的。

          當然,字體大小和行高也是決定可讀性的一個因素,但是對于行長,要保持在45到75個字符之間



          28.偶爾使用純粹的裝飾性元素是可以的,但要保持可訪問性。

          undefined

          需要適當,如果裝飾的強了主要表達的,則不可取



          29.使UI中的元素相互區分。

          按鈕。 通知。 UI中兩個獨立但必不可少的元素。

          一定要確保你的用戶能夠快速準確地將他們區分開來



          30.陰影不要太重

          undefined

          舒服的投影會增加你的設計的質感,和透氣感。太重的投影會顯得你畫面比較臟



          31.使用遞進分類時,需要明確當前選中的元素

          undefined


          32.使用高度飽和的顏色? 試著用色調或陰影把事情調小一點。

          undefined

          高度飽和的顏色(明亮的藍色、紅色、綠色等)在網站上看起來很不錯,但過度使用時,會讓用戶眼睛疲勞,主要是與文本內容一起使用時。



          33.使用用戶熟悉認知的圖標表達

          undefined

          在向設計中添加圖標時,使用用戶熟悉認知的圖標。新的圖標雖有很好看,很有個性,但是會讓用戶疑惑



          34.接近律

          undefined

          需要承上表達的元素,排版上接近對應的元素,可以讓用戶心理聯系起來是一體的



          35.減少標題的行高是很好的。

          undefined

          與長格式正文文本(需要足夠的行高以提高可讀性)不同,標題通常要短得多,因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍



          36.從色輪上挑選配色

          undefined

          類比色和鄰近色是最和諧的配色方案之一,也是最不會出錯的配色



          37.想用更輕松的語氣, 盡量用小寫字母。

          undefined

          在處理特定項目時,使用類似于所有小寫字母的文本可以表達更加輕松的意思

          但需要注意,在圖像和文本之間使用某種顏色疊加,以獲得更強的對比度



          38.使用重量、大小和顏色來表示你的結構層次感。

          undefined


          39.深色背景+淺色文本, 增加字重,提升易讀性

          undefined

          當在淺色背景下設置深色文本時,偶爾可以選擇較輕的字體。

          但是…

          反之:淺色文本>深色背景。

          最好是把字體的重量增加一點,尤其是長文本,原因是,讓用戶避免視覺疲勞,獲得更好的易讀性



          40.使用爭取的字體類型,表達對應的情感

          正確的字體選擇對于讓你的內容更快的正確傳達更重要



          41.全部大寫+字母間距=更好的易讀性。

          只需稍微增加字母之間的間距,就可以提高字跡的易讀性,并為大寫字母增加一些設計感



          42.讓表單上的錯誤信息變得有用和容易理解。

          確保錯誤提示,解釋了哪里出錯和如何解決

          始終讓用戶了解最新情況,即使是普通的表單,讓這些錯誤消息變得有用,不要讓用戶懵逼



          43.加載占位符

          使用占位符可以更好的緩解用戶焦慮



          44.通知用戶如果應用某個特定操作將會發生什么。

          在應用可能產生后果的特定操作之前,請詳細地通知用戶。尤其適用于具有不可逆轉后果的行為,例如永久刪除某個內容。讓用戶知道將要發生什么,并要求他們確認



          45.不要在下拉列表中隱藏重要的操作

          用戶需要采取的基本操作(例如,注冊或登錄)隱藏在下拉列表中,甚至可能找到用戶想要的。

          解決:將重要的功能提出來,不要隱藏


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

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


          文章來源:站酷   作者:木七木七

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

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



          如何通過設計驅動產品的增長設計

          ui設計分享達人

          在《增長黑客》中有這樣一句話“If you are not growing,then you are dying!”(如果企業不在增長,那么就在衰亡?。?,這話也適用于個人。人生畢竟不像企業,是非成敗,似乎都無可厚非,所以我們常常放飛自我偏離軌道,以至于有時候不得不提醒自己“不在成長,就在消亡”。我們來人間一趟,有沒有全力以赴想要成全的事?可以反復嘗試、不斷接近嗎?所以,我認為,增長它是一個永恒的話題,我們在學生時代讀書的時候希望自己的分數與排名能增長,在企業上班工作的時候,我們希望我們的收入能增長,當我們創業的時候,我們希望自己企業的業績能增長,增長是長期伴隨著我們生活的一個指數。

          《在大數據時代》一書中提出了“量化一切”的概念,即一切都可以用數據來衡量。其實,在“數字敏感”的互聯網時代,電商平臺“銷量”、電影票房、百大up主、文章閱讀10w+等等,我們其實早已在不知不覺中用數據丈量著一切。

          增長設計這個概念好像是最近幾年才廣為互聯網從業人員才熟知,成為每個互聯網er所討論的熱門話題,因為在過去的十多年,是中國經濟數字化騰飛發展的十年,我們90后更是親身見證著互聯網企業的成長,“眼見他起高樓,眼見他宴賓客,眼見他樓塌了”。

          我們關于用戶增長也是在不斷的迭代的,從最早期的雛形AIDA法則,由路易斯提出推銷模式,西方推銷學中一個重要的公式,AIDA法則也稱“愛達”公式,然后到2007年的facebook,提出這個概念,即,我們知道我們的廣告費是浪費掉了,但是我不知道是哪一半,于是,精于廣告投放的facebook便通過科學的,可復制性,可以被檢測的廣告投放可以幫助于其他企業做好用戶增長,然后便是我們知道后期比較流行的AARRR海盜模型這樣更加精細的用戶增長策略.


          2.1 關于增長設計


          在近幾年我們經歷了從互聯網市場在基本火熱到冷靜,尤其是隨著移動互聯網的流量紅利開始消失,“增長黑客”與“用戶增長”這兩個概念開始慢慢火爆開來,我們國內互聯網企業互聯網從業人員也開始重視用戶增長。

          企業的增長,也可以理解為企業的成長,所以企業能否保持增長,是老板和員工都比較關心的一件事,因為企業只有保持一定幅度的增長,才能保證大家在未來繼續過上好日子。以前傳統企業做增長可能就是通過贊助冠名一個很火的電視欄目,或者請個明星作為企業產品代言人,都可以在一定時期內來吸引消費者的關注,實現快速增長。但是這幾年我們可能也發現了,傳統意義上的營銷手段似乎不太管用了。因為以前我們從在電視和傳統紙媒上獲取信息的用戶都慢慢轉移到朋友圈、B站、抖音等互聯網頭部平臺,過去的傳統營銷三板斧來拉動企業業績的增長,已經變得越來越難。

          所以我們發現,在2017 年可口可樂宣布取消 CMO(首席營銷官),由 CGO(首席增長官)替代,以增長為中心的各個職位在招聘網站上也如雨后春筍一般涌出。

          看到這里,這些好像和我們從事Ui視覺工作的好像關系并不是很大,而恰恰相反,我認為用戶增長設計并不是一套虛無縹緲的說辭,而是一種能夠與團隊協助的工作形式,在一個產品團隊中,我們每一個人都應該了解一些關于用戶增長設計方面的知識。

          我們所知道的產品是為用戶在服務,是為了滿足用戶的實際的需求,所以我們所理解的增長設計便是產品創造了價值,而增長設計是將產品的價值放大傳遞,讓更多的人去發現。


          2.20 關于以用戶為中心的增長設計


          而我們體驗設計師更多關注在做產品增長設計的時候盡可能的不去傷害到用戶,以同理心去思考做增長設計的策略。這個我們會稱為用戶增長設計(User Growth Design),即簡稱UGD,簡單的理解為用戶增長設計要以用戶為中心,以用戶的角度和思維方式去想問題,去做用戶的增長。

          讓產品簡單到“傻瓜”也能操作,是喬布斯和張小龍做產品的核心理念。坐擁10億用戶的微信之父張小龍說過,產品經理要有傻瓜心態?!拔乙涍^5~10分鐘的醞釀才能達到傻瓜狀態,馬化騰需要1分鐘,功力最深的是喬布斯,傳說他能在專家和傻瓜之間隨意切換,來去自如,即所謂的Stayfoolish。”

          當然,此傻瓜不是彼傻瓜,而是一種跳出當下局限的外行心態,是站在普通用戶的角度是操作、帶有同理心去思考產品,這樣才會更容易發現產品本質上的問題和抓住真痛點,找到影響用戶增長的關鍵因素。

          2.30 設計師該如何去做設計增長


          我們設計師要想所做的用戶增長肯定不是去街上發個小廣告,去地鐵上拿著產品的下載二維碼讓用戶去下載我們的產品,我們設計師著手的設計增長范圍還是從用戶體驗去入手的,所以我們在考慮提升產品數據的時候也需要考慮用戶的使用體驗,例如,公司現在想要提升產品的成交額,我們設計師肯定不會提出的方案肯定不會是讓公司去請個明星代言來吸引用戶下單之類的,我們設計事所要思考的是如何提升用戶在下單過程中的流暢感,如何縮短路徑,讓用戶能方便成交,所以我們設計師的增長觀一定是在產品現有的基礎上,提升用戶的體驗,盡量讓用戶有良好的體驗下來提升用戶的數據增長。


          2.40 什么樣的產品適合做增長設計


          那我們產品都是來自五花八門的類目,那什么樣的產品適合做增長或者以什么樣的形式做增長合適呢?在增長設計概念最火熱的幾年,我聽過這樣的一個有趣的故事,一個做服務于醫療聚合類的設計同學去給面試官講他們這個產品的怎么做用戶增長的,其中講到他們通過如何通過增長策略去拉動用戶增長,如何留住用戶,面試官聽完,反問了一句,那們這個增長設計的策略是通過給城市投病毒導致那么多人生病的嗎?

          所以,世間萬物的增長都需要條件,用戶的增長需要內在的動力,不能浮于表面,需要認清內在動力這樣才能有助我們找到增長的關鍵因素,從而合理有針對性的部署資源和策略。


          (1)C端產品如何做增長設計


          C 端的產品,一般是個人消費場景,單一決策購買,所以我們需要給用戶持續使用產品的動力,即產品可以持續給用戶提供其他產品無法提供的價值。用戶在使用產品獲得價值提升,例如獲得友情、愉快、知識、優惠、收入等等,用戶才會繼續使用,甚至會給身邊的好友去推薦。

          例如我們的國民軟件微信,拉進了人與人之間的距離,帶來了免費通話和朋友圈和這個門檻最低的社交網絡,我們可以通過朋友圈去展示和表達,我們微信上的各種”相親相愛的一家人“”多少級的同學“群成為我們去維系友情親情的寶地,現在我們通過掃一掃便可以完成生活中很多事情,都為用戶提供了極大的便利,微信獨有的社交屬性促成了巨大的網狀人際關系,讓用戶自發的去加入,并難以離開。在2020年3月底QuestMobile提供的數據來看,微信活躍用戶180日留存率為95.5%,位于常用APP用戶留存率排行的首位,擁有如此高的用戶長期留存,可見微信為用戶提供的價值之大。

          所以C端的產品只有能為用戶提供價值,用戶才會選擇留下,甚至會主動傳播為產品帶來更多有價值的用戶,這才是最理想的、良性的用戶增長。


          (2)B端產品如何做增長設計


          B端的產品和C端的產品不同,B端的產品往往是做決策的過程比較復雜,往往能決定購買的人并不是產品的使用者,他們只是負責采購的,另外有的采購量比較大的企業往往和銷售的人脈關系掛鉤,

          但是阿里的團隊通過不斷的深耕B端的市場發現,雖然 To B 增長很難,但在中小企業的增長很有機會。一般的中小企業,使用的人數不是特別多,一般都是5人以內的使用者,這類企業能決定購買和使用者是同一類的人,所以它會與我們C端的購買決策的路徑比較相似。另外中小企業的數量也是比較多,所以這塊的市場還是有挖掘空間的。


          2.50 什么是用戶的增長設計


          用戶增長設計設計其實就是從吸引新用戶的注意力到產品能給用戶一些價值最后用戶認可我們產品的過程,這是一個從短期流量到長效流量轉化的過程,


          (1)用戶的吸引力(獲客)


          我們一般獲取用戶的方式最直接便是去投放廣或者軟文推廣,用戶通過點擊下載APP來訪問我們的產品界面,在我們的產品中尋找自己想要的信息,一直周而復始,直到找到自己想要的信息,反正,產品的內容沒能吸引用戶,這時候,用戶便會退出產品,也就是用戶的流失。


          在這個過程中,一直圍繞著三個比較關鍵的因素“使用者(人)”、“使用場景”、“用戶行為”,我們需要明確用戶的使用路徑中,產生行為的原因和流失的因素。


          (2)用戶的注意力(激活)


          我們在設計中怎么通過設計策略去避免用戶的流失呢?我們需要去引導用戶的注意力,讓用戶在使用過程中對我們產品有認可,都可以有效的去避免用戶的流失,


          ·如何引導用戶的注意力


          我們怎么去衡量我們的產品是否吸引了用戶的注意力呢?根據Alibaba Design Ucan 2020所提出的一個公式。用戶的注意力=心理需求*視線所及,用戶的注意力是用戶的心里所想和目標所看到的交匯,當產品給用戶看到的信息是用戶想要的東西的時候,這時候,用戶便會點擊進入,所以通常曝光率則可以驗證用戶在產品使用中的注意力。


          例如,我們在瀏覽商品的時候,我們的目標首先關注的商品的品牌然后是名稱和價格,我們用戶心里想的可能是哪個品牌會比較可靠,哪個的價值比較低,有沒有我常用的品牌,視線所及便是我們展現給用戶的列表,當用戶看到某品牌有我喜歡的明星的代言或者喜歡明星的同款,這便是用戶所想的。當滿足這些前置條件,用戶便會產生點擊行為。


          ·如何引導用戶認同我們的產品


          我們想要用戶去認可我們產品的價值,我們需要了解用戶,了解用戶可以從三個關鍵因素去入手,1.用戶群體,2.認同目標,3.說服用戶



          例如當新用戶進去拼多多后,界面會彈出新人的專享紅包,引導新人用戶的點擊,下一個頁面便是彈出手氣最佳的紅包,最后展示頁面出現現在限時下單全額度返利的banner,每一個頁面的場景關聯度極強。一步一步的去說服用戶去下單、有效的提升用戶點擊率。從而提升新用戶的首次下單的增長。


          (3)用戶的安全感(留存)


          張小龍曾提出一個產品觀叫“用完即走”,與我們常常提到的“留存”“粘性”的原則是背道而馳的,其實我理解的用完即走便是產品其實不想讓用戶離開,我們的產品能給用戶一個確定性的答案,無論是在產品的易用性還是在產品體驗層面,都可以保持高效,讓用戶在使用過程中有愉悅感,讓用戶遷移成本提升,便是用完即走后的戀戀不忘、

          例如早期的打車軟件和團購軟件,那時候用戶在網上打車和線上支付習慣還沒養成,對產品的模式的認同度還不夠,所以,那時候打車軟件和團購軟件給予人的確定的心理印象便是,你在我這里支付購買會便宜。培養用戶的使用習慣,給用戶一個用了該軟件確實會便宜的心理安全感,從而實現了用戶的留存。

          我們平時準備出門或者去一些陌生的地方,我們都會使用高德地圖或者百度地圖看下路上是否堵車,我們這次出行走哪條路需要用時多久,以方便我們去選擇合適自己的出行方式。

          我們設計師在做設計的時候也是一樣的,我們通過之前的數據,也可以分析出產品一些不一樣的改版點,我們能把一些抽象的問題具體化,能更好的去度量我們的設計,所以設計師在學習如何增長設計前,我們需要了解一些關于產品的數據知識,我們分析一款產品的時候,通過比較關注的點是用戶、需求和數據。

          當我們的產品上線或者上新某一個功能的時候,往往用戶的意見反饋代表的是個體的聲音,而數據是用戶對于產品的客觀反饋,數據的變化能代表用戶對產品的態度,所以,設計師要是能讀一些數據報表,那么我們可以從體驗設計師角度去給產品迭代的時候能提出不一樣的觀點,輔助我們所服務企業的app的成長。


          3.10 數據是如何產生的


          數據如如何產生的,比較深的知識是不需要我們去深挖的,我們日常接觸到數據反饋都是來自產品的“埋點”,而埋點數據的獲取通常通過第三方的工具進行獲取,比較常見的數據分析企業有友盟、七麥、GrowingIO等,這些工具可以在我們想要的頁面或者功能按鈕上添加監聽功能,當條件被滿足的時候,便會完成一次數據的統計,埋點需要提供兩個關鍵的信息:一是需要埋點的內容,二是埋點的名稱,這可以方便我們以后快速的找到相關的數據,當埋點完成后,產品上線就會檢測用戶的行為動作,當用戶進入我們的“埋點"界面或者功能的時候,后臺系統就會上報數據,我們就會收到數據反饋,但是在現實工作的場景可能比這個要復雜的多,我們可以根據具體的場景在靈活應變。

          3.20 設計師為什么要了解數據


          我們對一款的產品的優化可能有很多層面的思考,但是我們去對用戶數據的分析則是對當前產品最有價值的參考點,數據的采集與分析無論是對產品的規劃還是對設計師下一步的工作開展都是比較重要的指標,因為用戶可能會因為一些客觀的原因可能不會說出自己內心的真心話。

          例如我們去面試的時候,在一番精心的準備和問答之后,我們在面試結束之后,如果去問面試官“您覺得我這樣面試表現怎樣”,有的面試官可能會就你這次的變現去做出比較切合實際的點評或者建議,但是有可能你那場面試因為外部的原因會失常發揮,但有的面試官可能會照顧你的面子,可能會說表現的還可以之類的話來安慰你,但是面試官最后會不會錄用你這點他肯定不會作假,所以有時候我們在分析用戶行為及操作路徑的時候,一些用戶的數據表現便是我們對產品優化的關鍵因素。

          我們通常將數據的指標分為三大類:1.用戶相關指標、2.用戶行為指標、3.業務數據指標



          3.30 用戶相關指標


          我們常見的與用戶相關的指數有像DAU、MAU、新增人數等,我們需要了解的數據為1.用戶的活躍指數,2.用戶的留存率,3.人均使用時長。

          3.31 用戶的活躍指數


          在互聯網行業里,通常我們會通過拉新把客戶引過來,但是經過一段時間可能就會有一部分客戶逐漸流失了。那些留下來的人或者是經?;卦L我們公司網站 / App 的人就稱為留存。

          在一段時間內,對某個網站 / App 等有過任意行為的用戶,稱之為這個網站 / App 這段時間的活躍用戶,這個任意行為可以是訪問網站、打開 App 等等。

          我們常見的用戶指標有「日活」 即日活躍用戶量,縮寫為DAU,,縮「周活」 即周活躍用戶量,縮寫為WAU,「月活」 即月活躍用戶量,縮寫為MAU。


          3.32 用戶的留存率


          留存率是最能反映一個產品是否對用戶有吸引力的指標,一般的留存率是基于某個時間段而得出的結論,例如我們常常聽說的次日留存和七日留存率。

          次日的留存率計算公式為:當天拉新的用戶中,次日留存率=在注冊的第二天繼續登錄/第一天拉新用戶的總數量

          七日留存率的計算公式為:在第一天拉進的用戶中,七日留存率=在注冊七天后還有登錄的用戶數/第一天拉新的用戶總數。




          3.33 人均使用時長


          人均使用時長通常是對內容和游戲類的參考價值的很大,它可衡量我們產品是否做的比較優秀,能不能留住用戶的注意力。如果我們做的是工具類的產品,例如計算機之類的,這個時候的人均使用比較長,說明我們的產品可能出現了問題,無法讓用戶在短時間內得到他想要結果。

          人均使用時長的計算公式為:人均使用時長= 總活躍時長 /總活躍用戶數。


          3.40 用戶行為指標


          用戶行為相關常見的指數有用戶的頁面訪問量率、轉化率等指標。



          3.41 頁面訪問量率


          我們對頁面的訪問流量的定義分為兩種,一種是PV(page View)即頁面瀏覽量,另外一UV(UniqueVisitor):獨立訪客數。

          PV(page View)也就是頁面瀏覽量,即你每觀看一次就會漲一個PV,類似于B站的播放量,我們每個賬戶只要點開觀看一次視頻,播放量就會增長一次,關閉在打開,也會在增長一次,所以我們每播放一次,便會漲一個PV值。

          UV(UniqueVisitor):也就是獨立訪客數,類似于騰訊視頻和優酷的播放量,每個賬戶點進去播放只會增長一個播放量,你再關閉再點進去也只漲一個VU值。在正常情況下是依靠瀏覽器的cookies來確定訪客是否為獨立訪客之前是否訪問過該頁面。


          (1) UV的類別


          在統計數據的過程中, 我們會將不同的點擊率來劃分,從而更好的可以來統計數據來分析。我們將UV分為:1.

          曝光UV ,2.點擊UV , 3.意向UV。



          ·曝光UV


          曝光UV即曝光在視野內的用戶數,例如我們在京東或者天貓去搜索某個產品進入了搜索的feed列表頁的時候,當我在當前的列表停留2-3秒的時候,都可以算一次曝光UV。


          ·點擊UV


          點擊UV即有點擊行為的用戶數,例如我們在京東或者天貓去搜索某個產品進入了搜索的feed列表頁的時候,我點擊某個商品進去了詳情頁,那么就可以算一個有效的點擊UV。


          ·意向UV


          意向UV即進入意向頁面的用戶數,例如我現在想去買一個Macbookpro, 我在B站看完關于Macbookpro,的評測視頻,在百度看完Macbookpro的參數后,我在去天貓和京東去搜索進行比價的時候這個時候我就屬于意向UV,在舉個我們比價常見的例子,當我們在百度搜索寶馬的時候,排在前面的經常是各種五花八門的關于車的廣告,在百度看來,我們便是想去買車的意向UV,是有機會促成交易的。

          所以我們看用戶對我們的產品或者活動是否感興趣,便可以看看PV和VU的數據如何。

          3.42 頁面的轉化率


          頁面的轉化率是任何一個企業都比較關心的數據為,我們的任何運營活動和產品的推廣都是為了轉化用戶的時間或者金錢,我們費盡心思的用戶點擊進來,也都是為了轉化用戶的購買。

          用戶的注冊、下單、登錄和復購都可以用轉化率來進行量化,我們根據產品不同的情況來制定轉化率的指標。通常我們計算轉化率:產生購買行為的戶人數/總的用戶訪客* 100%。例如我們這個頁面訪問人數是1000,接下來有100人進行了購買的行動,那么我們頁面轉化率為:100/1000*100%=10%的轉化率。


          (1)意向用戶轉化率


          意向用戶轉化率,即意向Intention Click Value Rate,簡稱意向UV CVR,是通過直觀科學的角度去評判需求是否達到了預期的效果,意向用戶轉化率一般用來衡量用戶訪購行為,是可以通過該指數去發現問題中隱藏的核心問題的依據,非意向UV的轉化流失有很多不確定因素,而意向UV的流失往往跟產品體驗有更大關聯性,通常計算的方法為:產生購買行為的客戶人數/所有到達店鋪的意向訪人數* 100%。

          例如像民宿和酒店類的APP的核心轉化率是客房的預定量,像B站和西瓜的核心轉換率則是用戶評論和點贊。


          3.43  頁面的點擊率與意向率


          通常我們在曝光UV和點擊UV直接會有一個點擊率的關系,Click-thougphRate,簡寫為CTR,即點擊數占展示次數的百分比,通常的計算形式為,點擊率=點擊次數/頁面訪問次數,

          在曝光UV與意向UV之前也有一個比例關系,叫意向率,即意向UV占曝光UV的比例關系,通常用以衡量運營活動或者功能的導流能力,主要用來看用戶的質量,通常的計算方式是意向率=意向UV/占曝光UV。

          3.43 跳出率


          跳出率是在設計用的比較少的一個數據,一般是運營人員會關心的數據指標。指的是用戶通過搜索點擊進入該商品的詳情頁,只是簡單的瀏覽一遍就關掉了頁面,在該頁面沒有任何的活動行為我們稱之為一次跳出行為。

          跳出率的計算公式為:頁面的跳出率=一個頁面離開的次數/總的訪問次數*100%


          3.50 業務數據指標


          我們對業務的數據指標可以將他們分為兩類:一是免費供用戶使用的產品,例如微信、B站等產品,我們更多的關注用戶的使用時長和停留時長。二是需要用戶有購買行為產品,例如淘寶、拼多多和京東之類的,這里的產品我們更多關注的是產品的GMV和ARPU等指數。



          3.51 GMV


          Gross merchandise Volume,簡稱為GMV,指標通常稱為網站成交金額,屬于電商平臺企業成交類指標,主要指拍下訂單的總金額,包含付款和未付款兩部分。

          GMV反映的是電商平臺直觀的成績,但在電商行業,GMV包括拍下未支付的訂單金額,GMV=銷售額+取消訂單金額+拒收訂單金額+退貨訂單金額,

          3.52 ARPU


          ARPU是 “The average revenue per user” 的縮寫,譯為每用戶平均收入或平均每用戶收入。也可以理解為單個用戶的價值。

          通常的ARPU用來反映這個產品在這段時間內從單個用戶獲得的利潤和收益,通常用來計算用戶生命周期價值的作用:它是 App 成功的指標,是用戶忠誠度的反應,是預測用戶增長的工具。簡單來說,用戶生命周期價值是驅動移動市場預算的動力。它會告訴你每個用戶值多少錢;你應該花多少成本去獲取一個用戶。

          ARPU的計算公式為:ARPU=在指定時期總收入/指定時期的付費用戶的總數*100%。

          3.53 付費率


          付費率是用來衡量用戶轉化行為的指標,通常所有用戶和付費用戶之間的一個轉化比率。我們前面說到的ARPU值是付費用戶的人數來計算的,我們通常會把付費率和ARPU值放在一起分析。一般該產品的付費率越高,這說明用戶對該產品的認可度越高。

          我們的產品每個階段的增長指標在不同階段會有不同的定義。每個時期所需要注意的事項也是不一樣的,我們對基礎的數據有了認識和了解之后,我們更重要的事情就是怎么去實踐在我們自己的產品中。


          4.10 提升列表CTR的設計策略


          我們產品中很多時候,我們的設計做的是否合理,我們的商品類別該怎么去排序,都和CTR的數據去掛鉤,產品中的很多核心的數據也需要CTR等基礎數據去做支撐,那么我們一起來復盤下提升列表的CTR策略點:1.增加影響用戶決策的信息,2.梳理列表的信息層級,3.新增適當的交互,4.標題優化(非設計角度)

          4.11 增加影響用戶決策的信息


          平時我們在逛街的時候一定會發現這樣的場景,當一條街上開了很多店的時候,每個店鋪一定會派出自己店鋪長相比較甜美的店員或者比較擅長口播的店員在自己店前面進行“吆喝”,比較小的店鋪就算人手不足也會用音箱去反復播放店內的促銷信息,這些策略都是為了在眾多的店鋪中去吸引過往行人的注意力。

          那么我們做設計也是一樣的原理,我們在在做列表時候,想要提升用戶擊我們的列表進入詳情頁的意愿,首先我們需要了解我們的用戶對什么樣的信息比較感興趣,我們將它整理并放出來,從而達到吸引用戶來點擊。


          4.12 梳理列表的信息層級


          我們平時去逛超市的時候,我們發現每個類目的貨架前都會擺放特價或者促銷力度比較的商品的合集,理貨員會將他們放在一起,這樣,對于價格敏感的會直接過去挑選。

          我們在梳理列表的信息也是一樣的,我們需要將用戶比較關注的信息或者產品的賣點信息層級抬高,減少用戶在挑選時候的跳出率。


          4.13 新增適當的交互


          我們想提升列表的點擊率也可以從另外一個角度是入口,就是想辦法讓用戶在最短時間內可以看到更多的信息列表,讓質變產生量變,這一點我們可以從改進交互的操作入手,讓讓用戶看的比較多的列表交互。


          (1)十字交互


          因為這種形式的設計他占用的位置比較少,且只需用用戶通過手指左右去滑動,便可以查看更多的信息列表或者產品列表。

          (2)隨機的列表


          在交互層面另外一個可以讓用戶看的更多的設計形式便是點擊就換一批,這樣可以讓用戶感受到我每次點擊過后的詳情列表和產品列表都是不一樣的,這樣每一次點擊都會有新的“多巴胺”去刺激用戶再次去點擊“換一批”按鈕,從而達到讓用戶看到更多的列表,以質變產生量變。

          4.14 標題優化(非設計角度)


          (1)美化標題


          我們經常上網經常瀏覽新聞的朋友一定知道有個詞叫做“標題黨”,簡單的來說就是標題經常以夸張、“故弄玄虛”的方式出現,UC是眾多平臺中運用標題“最好的楷?!?,所以網民也會親切的稱之“UC震驚部”,所以一個列表流的標題對點擊量的影響也是比較大的。


          (2)字符限制


          另外一個角度就是當標題顯示不全的時候,用戶對信息傳遞無法感知的時候, 我們取再好的標題也是沒用的,也許關鍵信息會被省略掉,所以我們在設計標題的時候,也可以限制標題可輸入的字數,避免文字的縮略顯示,讓用戶可以完全看清標題的意思,提升用戶的點擊欲望。


          4.20 上新功能如何提升CTR


          我們產品在上新一個新功能的時候,我i們如何布局能去讓用戶從熟悉到使用我們的新功能都是需要一個過程的,我們需要慢慢的去引導用戶,我們可以從一下策略去去入手:1.替換用戶習慣的功能,2.把控出現時間,3.用動態吸引注意力,4.合理劃分功能層級.、

          4.21 替換用戶習慣點擊的功能(按鈕)


          我們每個都會有自己的習慣性的動作,例如我們習慣左手寫字,右手拿筷子吃飯,我們每天回家習慣性的走同一條路,這些都是我們下意識的動作,是不需要經過思考的意識,那我們在軟件的使用中,也會有這樣的習慣,例如,通常底Tap欄的圖標第一個通常是首頁或者軟件的主要功能,而最后一個通常會放個人中心,這也是我們在軟件使用的中的共識,所以我們可以利用人下意識的習慣將常用的功能與新功能去替換,用戶便會在下意識的慣性中去點錯,例如網易云音樂為了推廣“云村”功能,便會將以前在最后一個的“我的”給替換成“云村,會導致很多用戶的下意識的動作點錯而提升新上的功能”云村“的點擊率。

          4.22 把控出現時間


          我們在下班回家的路上,當我路過一些小吃攤的時候會覺得街邊的小吃特別想吃,也特別有購買的欲望,這是為什么呢?因為我們在勞累的工作了,下班的時間也正是需要吃飯的時候,所以這個時候我們會看到街邊攤的小吃特別想吃,也特別想買,因為他擺攤的時間點和位置都恰好滿足了我們的需求,所以我們轉換到界面里也是一樣的,我們想要用戶去分享一篇文章的時候,一定要等看用戶在讀的時候,然后在出現分享功能,這個時候如果用戶讀到比較精彩的內容,便會和朋友分享這篇文章,例如用戶在進入商品也可以瀏覽的時候,我們這個時候可以出現滿減的紅包,這都是在適當的時候給與用戶想要的,把控好了出現的時間。


          4.23 用動態吸引注意力


          在一些靜態的元素中,突然有一個元素動起來,那么,那個動起來肯定是更吸引人的眼球的,所以我們在電商的頁面頁面中,會經??吹揭恍拥膇con和一些會動的膠囊導航,我能在付款頁面也可以看到一些立即付款的按鈕會忽大忽小的動起來,這都是為了吸引我們的注意力,引起我們去關注它的存在。


          4.24 合理劃分功能層級


          我們做設計排版的時候一定都聽說過這樣的一句話,就是你什么都想突出,結果你卻什么都沒有突出,這句話的意思是我們在做設計的時候一定要注意運用對比,將次要元素與主要功能的要做好主次的對比,這樣的層次對比才有利于用戶的閱讀,可以分清主次。

          我們在ui設計中也是一樣的,要想用戶快速的找到想要的功能,高頻使用的功能和不常用的功能要做好強弱的設計區分,這樣才能讓用戶一眼能看到自己想找的功能,例如美團和支付寶,都是將用戶高頻的操作放大并放置于頂部比較顯眼的位置,方便用戶去操作。


          4.25 合理使用彈窗功能


          我們都知道,彈窗在軟件中屬于級別最高的通知,就相當于學校里面的校園廣告,只要打開軟件的人,基本都可以看到,所以我們想推廣一個新功能的時候,使用彈窗是流量比較大的,但是也是比較打擾用戶的,我們需要看情況而定。

          4.30 提升人均使用時長的策略


          軟件的人均使用時長代表用戶對我們人均軟件關注度和我們給予用戶的價值,當人均使用時長在增長的時候,說明我們的產品正在良性的增長,在提升人均使用時長我們可以從以下幾個策略入手:1.讓用戶忘記時間,2.弱化用戶的負面情緒,3.多變的板式消除疲勞,4.激發用戶的好奇心



          4.31 讓用戶忘記時間


          我們放假在家打游戲的時候,總有這樣的感覺,就是打著打著不知不知的天就黑了,或者打著打著天就亮了,感覺時間過的非??欤俏覀冃枰⒁庖粋€細節就是一般打游戲的時候,游戲是會將頂部的時間狀態給隱去的,是為了給用戶更好的沉浸式的體驗,正因為我們看不到時間,所以便會忘記這件事情,一局一局的打著游戲。例如早期的抖音,在進去界面后變會隱藏時間條,讓用戶在刷抖音的過程中忽略時間,所以 ,我們想要提升人均使用時長,在一些娛樂性的產品或者模式下,可以嘗試著隱藏時間條,給予用戶更沉浸式的體驗,這樣用戶便會忽略時間這件事情。

          4.32 弱化用戶的負面情緒


          我們在飯店高峰期去餐廳吃飯的時候,一般會遇到餐廳客滿需要排隊拿號的情況,海底撈的做法是給排隊的客戶免費的小零食,外界對海底撈的服務評價可以用16個字來概括:有求必應,無微不至,噓寒問暖,小恩小惠,中國有古話是這樣說的“伸手不打笑臉人”,也許我們在就餐中會有各種不滿,但是海底撈都可以用他的服務去抵消客戶的負面情緒。所以,我們一般在餐廳催菜是時候,不管菜做沒有,服務員都會對我們說菜正在做,都是抵消我們等待中的負面情緒,讓客戶不會在等待的過程中離開或者退菜。

          我們在做界面中也是一樣的道理,我們的APP在實際運行過程中肯定也會遇到各式各樣異常問題,我們做設計的時候要為用戶提前給考慮進去,為用戶提供貼心、無微不至的服務。例如我們用戶可能在使用過程中可能手機信號不好,有的頁面加載不出來,我們需要設計有趣的加載動畫和頁面加載不出來的時候的占位符,告訴用戶我們的APP還是在正常的運行中,不是宕機了。


          4.33 多變的板式消除疲勞


          我們都開車或者坐車經過高速公路,我們會發現高速公路在一條直道后馬上會迎來一個彎道,我們小學的時候都學過,兩點之間直線最短,那么高速公路為了節省司機開車的時候,能否直接全部設計成直線的呢?答案是不可以,除了有些地方路線的規劃外,其次安全因素也很重要,經科學家研究表明在筆直的公路長期行駛很容易導致駕駛員發生事故,這是因為在筆直的高速上行駛,駕駛員的神經長時間處于放松狀態,容易麻痹大意,如果適當的時候來個轉彎會提醒駕駛員注意力集中,減速行駛,從而減少事故發生率。其次從心理學角度來說,駕駛員一旦在筆直的高速上行駛,容易產生飆車行為,誰都會想猛踩油門來追逐刺激,如果適當時候來個彎路,能夠抑制飆車行為的發生,從而減少故事發生率。

          所以我們在設計板式布局的時候,讓用戶盯著單一的布局形式,用戶很容易感覺到疲勞,從而會在頁面跳出。我們為了避免這樣的情況發生,讓用戶在瀏覽過程中能感受到板式的變化,而不是滑到底都是一樣,單一且無趣,很容易疲勞,我們設計者需要在單一的板式尋求不一樣的解決方案。


          4.34 激發用戶的好奇心


          我們都比較喜歡看懸疑劇的一個重要的因素是因為情節一環扣一環,線索和劇情結合的比較緊密,劇情比較扣人心弦,能激發我們對真相的探索欲,這才是我們喜歡追懸疑劇的原因之一。

          所有,我們做設計時候也需要給予線索讓用戶去探索,讓用戶感受到內容源的充沛,用戶才會興趣去向下探索,從而提升用戶的使用時長,所以,大部分的APP在最后一個板式都會做成瀑布流的形式,因為他在滑動的時候會不斷給予用戶新的提示,告訴用戶你不斷往下滑,都會有新的內容。

          4.40 提升留存率的策略


          留存率是用于反映產品的的運營情況的統計指標,我們產品的留存越高,說明我們產品很活躍,真正穩步的向前邁進,那我們在優化留存的策略可以從以下幾個入手:1.優化初次上手體驗,2. 減輕用戶的使用負擔,用內容留住用戶,3.完善獎勵機制,4.增加沉沒成本

          4.41 優化初次上手體驗


          我們現在年輕人由于生活的節奏越來越快,在使用APP的時間往往都是碎片化的,用戶的持續注意力會越來越短,一個產品在初次上手的難度越高,能勸退的用戶就越多,用戶在上手一款產品的時候,首先會關注界面是否易于上手,能不能快速找到自己想要的功能,例如在登錄的時候設計驗證碼登錄或者第三方的快捷登錄,在新用戶初次進去的時候,對新功能有使用說明,用戶在初次體驗是很重要,有了第一次的良好體驗印象,用戶才會有第二次第三次的回訪率,這也是提升留存的第一步。



          4.42 減輕用戶的使用負擔,用內容留住用戶


          減輕用戶的使用負擔是指在核心功能盡量能讓用戶能用最短的時間去完成,讓用戶感受到產品對用戶是有價值的,做到用完即走,例如,微信就算其他功能做在有趣,上手在簡單,它的核心聊天功能做的不好,用戶發一條要等很久, 我相信也不會有人去選擇用它去聊天,早期的米聊,其他的功能和想法都是比較超前的,微信也是根據米聊的模式改進,但是早期米聊在即時通信領域不是很擅長,在發送消息的即時性上欠缺,導致失了先手,在手機聊天領域輸了給微信。

          在產品做好了核心功能,能夠吸引一批忠實的種子用戶,這樣我們在一些附加功能,才是錦上添花,例如現在無論什么產品都喜歡做社區功能,就是希望用內容去留住用戶的注意力,附加功能一般都是利用人性的七宗罪去設計布局的(傲慢、嫉妒、憤怒、懶惰、貪婪、淫欲和暴食。)例如微信的搖一搖是利用人想認識新的異性,擴大好友圈,汽車APP的社區功能會經常發一些車站的車模,來吸引精準用戶的注意力,這些都可以提升用戶再次來使用我們的產品。


          4.43 完善獎勵機制


          我們在工作中,一定遇到這樣的情況,就是公司會設置獎勵機制,當員工的績效達到一定的程度的時候,公司會給予員工一定的獎勵,反正則會觸發懲罰機制,這會使得員工為了完成目標而努力工作,從而達到目標得到的獎勵會觸發員工的“爽點”。

          這是因為這樣,所以越來越多的產品開始做自己的會員體系,在加入積分商城,最后在來個簽到獎勵,簡單來講,就是通過給予用戶一些“爽”的東西,來讓用戶幫我們的產品達成一些我們需要的商業目標,其中最主要的目的就是用戶的留存率.

          4.44  增加沉沒成本


          我們在去理發店去理發或者在去網吧上網的時候,他們都會希望我們去辦理一張會員卡,在往里面存在錢,有的是存多少送多少,當我們一但存錢辦理會員后,我們會惦記著我們有類似的消費的時候,都會想起我在那家店里會員還有余額,會員里的余額就是們遷移的成本。

          所以共享單車會推出月卡服務,視頻會員會有連續包月或者年卡套餐,甚至我們點外賣開通會員也能享受大額的折扣,讓用戶感覺占便宜的感覺,這些都是為了鎖定用戶,增加用戶的遷移成本,來達到讓用戶再次來我們產品來消費,從而提升用戶的留存率。

          4.50 提升產品活躍度發力點


          產品的活躍度也可以稱為產品的粘性,產品的留存率是計算單次打開產品的次數。而多次打開我們的產品也可以稱為產品的活躍度,或者用戶對我們產品的粘性,我們去優化產品的活躍的可以從以下幾個策略入手:1.讓產品看起來生機勃勃,2.主動與用戶溝通,3.讓用戶有自己的社交圈,

          4.51 讓產品看起來生機勃勃


          我們都會有湊熱鬧的習慣,看到街邊有人排長隊我們會不自覺的看過去,所以我們在新聞看到了網紅店會請人來排隊,都是為了營造該店看起來很有生機,人很多,很熱鬧。

          我們在做產品設計的時候也是一樣的,需要在設計層面讓用戶看我們的產品也是很有熱鬧,很有生機,例如我們產品的運營區的圖片會經常更換,讓人感覺有人在運營,每天都是不一樣的,當我們的用戶關注的人比較少或者沒關注的時候, 我們需要給用戶去推薦質量比較高KOL去讓用戶去關注,有什么活動我也可以主動推送給用戶,這都是可以讓我們產品看起來有活力,從而讓用戶可以多次打開,提升活躍度。

          4.52 主動與用戶溝通


          我們小時候通常會被家長教導,遇到熟人和長輩要主動打招呼,這樣會讓我們看起來比較有禮貌,我們生活中也樂于和有禮貌的人去交往,因為對方會看起來比較有親和力,比較好溝通。

          我們做設計的時候也是一樣,我們的產品也需要主動與產品去溝通,讓用戶去了解我們,例如,我們評論去外露,是在告訴用戶我們這個商品已經得到了大多數的肯定,也可以讓用戶感受到我們這個產品其實用的人還是不少的,比較有生命力。

          4.53 讓用戶有自己的社交圈


          不知道從什么時候起,無論是什么類目都有了自己的社區,淘寶有自己微淘,咸魚有自己的魚塘,求職找工作的APP也開放了求職討論專區,連墨跡天氣都開放了社區功能,讓大家可以拍自己的當地的風景來討論。

          為什么大量的產品開始做社區功能呢?因為他們希望自己的用戶能在自己的產品有自己的社交圈,只有用戶有自己固定的圈子,才會有用戶粘性,把路人用戶轉化為死忠粉,大家一起來討論,從而達到提升產品的活躍度。

          4.60 提升產品核心轉化率發力點


          核心轉換率一般我們的用戶需要走的流程比較多,我們需要按照實際情況去刪減合并流程,來保障用戶無障礙的可以付款下單,我總結一下幾個優化策略:1.優化核心流程,2.豐富決策信息,降低轉化顧慮


          4.61 優化核心流程


          我們以前在放學的路上一定熟知自己家到學校的各種小道,在巷子的玩玩轉轉,比走大路要節省很多時間,節省了很多時間。


          (1)合并優化流程


          我們在做電商APP的時候,想要讓用戶快速下單購買也是需要提升用戶的下單效率,例如我們以前輸入完密碼還需要點確認才能付款,現在我們在輸入完第6位數密碼的時候就直接付款了,現在手機的升級了指紋和面容識別后都不需要輸入,就可以直接付款了,點外賣的時候,會有一鍵搭配購買,這都把以前復雜的步驟給整合優化,提升用戶的下單效率。


          (2)復雜流程分開顯示,提升放棄成本


          已經簡化到最簡單的流程仍然步驟還是很多的時候,我們可以將流程分開展示給用戶,例如我們的流程一共有12項,已經是優化的最精簡了,這個時候,我們每個頁面顯示4個給用戶去填寫,如果用戶在第二個或者第三個想放棄的時候我們這個時候提示他,馬上就要完成了,用戶想著我之前已經填寫一頁了,反正也沒多少了,我就在堅持寫一頁把,例如我們常見的電商產品,現在都是支持先選購商品加入購物車,在需要購買的時候在提升用戶登錄并付款,避免用戶還沒選商品就被登錄界面給阻攔了。這都是可以提升核心轉化率的策略。

          4.62 豐富決策信息,降低轉化顧慮


          我們在超市購物時候,一般會先看看產品信息和生產品日期,然后在看看品牌,最后看看產品的價格,覺得合適就拿走付錢了,就算我們有挑選的空間,也會在這這家超市買,因為往往兩家超市隔的都是比較遠的,跑來跑去比較費力,但是我們在網上購物或者選東西的,換平臺成本比較低,也不怎么費力,所以我們需要將我們的能有的優勢都展示出來,降低用戶的下單顧慮。

          例如自如租房的優勢就是有管家服務,服務比較全,這是它的優勢,也是我們租房的時候比較擔心的,有時候房間洗衣機或者熱水器壞了找人也找不到,另外就是我們商品的銷量好也需要展示出來,那么多人都買了都沒問題,我也肯定可以放心的下單購買,我們產品或者平臺有什么優勢都可以展示全,去盡力打消用戶最后的心理防線,從而提升下單轉化率。

          5.10 確定增長指標


          當我們想做增長的時候,會遇到各種各樣的指標,經常我們會覺得提升哪個指標都會比較重要,然后我們在把各個指標一把抓的時候卻發現與目標卻是南轅北轍的背道而馳,最終是研究了很多數據指標,卻仍然沒做好增長設計。

          其中最關鍵的因素是我們每找到唯一的關鍵性指標,即OMTM,,全稱是 One Metric That Matters,最早提出這一概念的是《精益數據分析》這本書中提出的,后來肖恩·艾利斯在《增長黑客》一書將其稱為“北極星指標(North Star Metric)”,現在“北極星指標”已經稱為行業的通用詞匯。

          北極星指標即在紛繁的產品世界中照耀著我們去走向終點的指標,它是產品走向成功的關鍵且唯一的指標,我們整個組織的增長目標都應該統一指向北極星指標。那么北極星指標有什么作用?

          (1)明確目標:讓我們避免南轅北轍,,幫助我們確定現階段的產品最需要解決的問題,幫助我們找到清晰的目標,來促進用戶的增長。

          (2)集中資源:有助于減少內部的溝通成本,整合企業的人力、技術、資金等資源,明確方向,力往一處使,利出一孔。


          5.11 怎么確定北極星指標


          我們在前面說到北極星指標的重要性,我們前面也講到關于很多數據指標,我們怎么可以確定符合企業定位的北極星指標呢?

          北極星指標確立和我們自身的產品的屬性、行業是密不可分的,不同的產品和行業也對應著不同的用戶和盈利模式,用戶價值的不同和商業模式不同,所對應的關鍵指標也會不同,因此,我們要確定北極星指標首先要了解產品的受眾和我們的產品可以給受眾提供什么樣的價值來盈利、

          在過去互聯網高速的發展的過程中,也衍生出了不同品類的產品。但是總體來說,我們大致可以把互聯網產品給歸類為內容產品、社交產品、電商產品、工具產品、游戲等幾大類目。我們可以看看不同的產品所對應的北極星指標。


          5.20 怎么拆解增長指標


          如果我們確定了產品的北極星指標,那么接下來我們需要做的就是任務的分配工作以及各部門的協作與協調,讓每位成員能夠能明確各自的職責,這樣我們設立的北極星指標才可能完成,這里我推薦一種在各大企業都開始推行的一種工作方式OKR((Objectives and Key Results)工作法。全稱為目標和關鍵成果,是一套明確和跟蹤目標及其完成情況的管理工具和方法。

          OKR 這套系統最初由英特爾公司制定,在谷歌成立不久,被風投家約翰·都爾(John-Doerr)引入谷歌,并一直沿用至今。除了Google以外,現如今有很多公司在使用,國外Facebook,Twitter,Linkedin,國內我知道知乎,字節跳動,明道等在使用。

          通過這么多公司的使用充分說明了OKR方式的可行性,OKR在執行過程主

          要以季度為周期來進行管理。

          整個OKR制定是從上到下,逐級進行拆分的類似金字塔式結構,最終拆分到團隊或者個人OKR。


          OKR中的“O”代表我們這次工作的目標,例如:年度目標、季度目標、階段目標,“KR”是關鍵成果,就是這些目標可以通過哪些關鍵成功可以完成,然后還有一個Action(行動方案),這些關鍵成功需要通過哪些方案去達成。



          我們以一款內容社區類的產品為例子,我們這個產品的季度的北極星指標為提升用戶的粘性,那么可能分配到我們設計負責人手上的目標為提升用戶的留存率和簡化產品的操作留程,那我們設計師需要做的可能是新增一個簽到功能,讓用戶每天都記得簽到來領獎勵,或者簡化直達看帖區的交互步驟,讓內容能留住用戶

          所以我們北極星指標結合OKR工作法,如何在合適的階段做合適的事,如下圖所示


          5.30 GSM數據驅動


          GSM模型是Google的用戶體驗團隊提出的一種指標體系,與OKR工作法不同,OKR主要適用于整個企業的任務的排兵布陣,而GSN體系主要是用來量化用戶體驗的,GSM分別為目標(Goal)→信號(Signal)→指標(Metric),所以也簡稱GSM模型。

          但是由于我們國內的互聯網情況和國外的環境也是不一樣的,經過本土化的改良,我們國內的GSM被精細化為6步。

          我們來結合實際的案例來看下吧!

          例如我們我們公司的一款民宿的產品,我們的產品團隊接到的需求是提升我們產品的活躍度。


          (1)數據目標


          那我們的數據目標便是提升產品的活躍度,我們接下來的工作便是對產品的現狀進行分析,以方便我們開展接下來的設計工作。


          (2)用戶分析


          用戶分析主要是對我們現在的用戶進行一個比較全面的分析,了解我們用戶群體的使用習慣,發現用戶主要的查看內容和用戶的痛點,以方便我們做針對性的設計策略

          (3)發現問題

          我們對用戶問題的采集主要是通過軟件自帶的用戶意見反饋和APP store 的用戶評價,從這里去獲取的用戶對產品的評價都會是比較客觀的。

          我們通過評價可以發現,用戶對產品存在的一些隱形的坑的體驗不好,例如附近有裝修會影響人睡覺的之類的,那我們怎么去幫助用戶去避免這些問題呢?我們可以讓一些經常住民宿的人去寫一些住店的體驗日記,方便我們用戶去查看。


          (4)用戶表現


          有了住店日記,我們的用戶表現是什么樣的呢?我們的用戶在決定入駐一些民宿的時候,可以去多方位的去查看其他人發入住日記??梢宰龆喾矫娴膶Ρ?,這樣用戶不僅可以減少踩到坑,在對比的過程中,在使用我們軟件的時間也會更長了。


          (5)設計策略


          那我們怎么可以讓一些入住過用戶去寫一些入住日記呢?我們可以針對愿意寫的用戶寫的好的用戶的日記進行曝光,他可以獲得自己的粉絲群里,然后,你發一篇日記,我們會獎勵給你相應的金幣,這些金幣在積累后可以獲得優惠券,在下次入住后可以減免相應的入住費用,然后我們的產品可以發現寫的比較好的日記推送給沒有住過的新用戶,或者有意向、搜索過的用戶,方便用戶橫向對比,從而提升用戶的活躍度

          (6)衡量指標

          因為活躍度它是比較抽象的一個概念。我們怎么去驗證我們的設計策略呢?我們可以通過一些用戶的金幣的積累去驗證我們數據,這樣就會比較直觀。只有當有有用戶去發表住店日記,他才能獲得金幣的獎勵。


          增長設計需要精準的界定用戶的痛點,這是用戶增長的重要基礎,然后在聚焦核心的業務,不斷的強化痛點來驅動用戶的增長。

          隨著行業的發展,現在行業對Ui設計的要求也是水漲船高,我們每一次改動需要給企業去提供一個能說得通的理由,我們也需要不斷的去學習行業里的新的知識,來豐富我們的思維,這樣我們才能在寒冬中走自己的坦途,一起加油!



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

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


          文章來源:站酷   作者:Endings

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

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


          S02E03: 數字構建世界,什么構建「數字的世界」—— 阿里云設計中心年鑒

          seo達人


          本篇文章是承接《產品解決問題,什么解決「產品的問題」》、《設計定義專業,什么定義「設計的專業」—— 阿里云設計中心年鑒》的內容。年鑒的第三篇,走進“數字”世界;比起這些宏大的視角,我們更希望和你一起推敲每一個細節。

          圖片

          圖片

          如何構建一個數字世界?

          圖片

          圖片

          圖片

          構建數字世界分為三步:

          ① 數據原料的采集與轉譯

          ② 數字世界的生產與加工

          ③ 設計過程的成本管控

           

          數字世界的血液從哪里來?

          數據是數字世界的血液,那么數據從哪里來?將空間數據采集后,我們進行標準化處理、融合,用于空間展示與計算;通過對環境、建筑、城市道路數據編輯能力,為生成3D城市(世界)提供完備數據。

          圖片                    
          圖片                    
          空間構建平臺 _

           

          數字世界的構建就是建個模么?

          孿生不僅僅停留在表面,而是由底層數據驅動、可以對物理實體流程模擬、結構模擬,甚至可以達到對物理的實時優化與反控。

                             
          圖片                    
          圖片                    

          圖片

          怎么理解數字世界的生產加工?

          這是一種很“工程化”的設計流程,無法通過設計稿“所見即所得”,需要在了解數據的特性基礎上,同工程師一起,通過算法決定建筑的形態,通過視覺設計規則決定建筑的樣式,通過場景編輯器決定物理世界的表現形式和規則。

                             
                             
          DATAV _

           

          如何降低設計成本提高效率?

          針對大屏搭建成本高、周期長、我們的方法是從生產的各個環節進行優化,如提供涵蓋行業特色場景的大屏模板,建立設計資產庫、數據映射視覺設計;同時,DataV的智能設計 AiVisLab提供的智能化搭建與編輯方式(識圖搭建,美化工具箱,自動可視化等)以及Visbar的資產沉淀讓搭建設計成本更低,提高搭建效率。

          圖片                    
          圖片                    
          圖片                    
          自動化,智能化,產品化
          設計預設,模版等 _

           

          圖片

          圖片

          如何把圖形引擎能力抽象出來,服務更多的場景?

          圖片

          圖片

          圖片

           

          三維場景和動態數據效果,是如何做到的?

          我們通過提供便捷的數據服務一鍵生成三維數據基底、通過設計資產預設,后期環境設置等完成從物理空間到數字空間的轉化;同時在數據業務展示層,我們有一套完整的圖元系統貫徹組件支持數據展示;而在信息交互層上為了滿足不同維度的交互編輯,我們提供了藍圖節點編輯,和鏡頭沉浸式設定等功能。

          圖片                    
          圖片                    
          圖片                     

          圖片

                             
                             
                              
           

          不會代碼,也能用 DataV么?

          當然,為滿足用戶日益增長的編輯訴求,我們從最初的1個畫布編輯器已擴展至今天橫跨多個維度的6大編輯器,形成一套簡單易操作的可視化編輯器系統。用戶可通過編輯器里豐富的模版及資產庫、數據配置、自動數據映射等0代碼編輯的功能快速搭建專業水準的數據可視化應用,感受數據的美好。

          圖片圖片

          圖片

          小白如何快速上手搭建三維空間可視化?

          為了讓用戶能夠“傻瓜式”搭建復雜的三維空間可視化,我們打造了一整套包括 CityPro、CityV、GI組件等的圖形引擎產品。并提供了一套既能滿足沉浸式數字孿生體驗,又能滿足時空大數據分析的解決方案,可覆蓋可視化領域的各個場景。

                              
          圖片                  

           

           

          圖片

          圖片

          如何把模型資產沉淀下來,產生更多的復用價值?

          圖片

          圖片                    
          圖片                    

          圖片

           

          為什么要有 Visbar?

          在數字孿生的行業可視化項目中 ,每個具體行業的需求往往很相似,功能場景也有較高通用性。于是我們以行業維度沉淀資產,并以解決方案打包輸出,最終以產品化對外服務。Visbar 不但能夠提升可視化項目交付效率,還可以降低項目投入成本。

          圖片

          行業案例 _

           

          那么多資產沉淀得過來嗎?

          Visbar擁有自己的物料生態與運營模式。

          圖片

          圖片

          圖片

          圖片

          原文地址:阿里設計中心(公眾號)
          作者:阿里設計中心

          轉載請注明:學UI網》S02E03: 數字構建世界,什么構建「數字的世界」—— 阿里云設計中心年鑒

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

                                                                      微信圖片_20210513163802.png

           

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

           

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


          想抓住產品第一印象?看看這些引導頁設計方法!

          seo達人



          引導頁可以算作我們打開一個新產品時看到的第一個畫面,能在未使用產品之前提前告知產品的主要功能與特點。

          第一印象的好壞會很大程度上影響到后續的產品使用體驗。文章通過梳理引導頁設計的構成,總結出實用的觀點與方法來助力引導頁設計。

           

          1.什么是引導頁?

          第一次打開新的應用時通常能會看到2-3個系列開屏頁,上面有簡短的文案來解釋產品的功能,方便用戶使用。

          又或者打開一個全新的社交類產品,會引導用戶進行創建帳號、設置偏好、添加興趣等一系列操作,從零開始帶用戶了解產品。

          圖片

          ▲ 通過友好的引導頁向用戶介紹價值主張以及產品將如何改善他們的生活。

          入門引導有助于用戶了解需要做什么以及怎么做才能從產品中獲得需要的東西。這是一種與用戶建立信任的方法,不僅有助于用戶,也是提高業務轉化率和保留率的關鍵。

           

          2.為什么引導頁很重要?

          平均來說,近四分之一的用戶會在僅使用產品一次后就因為各種原因放棄再次使用。一旦用戶試用了產品并且離開,可能很難再次成為產品的使用者,除非他們能從產品中獲得一些有價值的內容。

          例如我們花時間和精力去下載一個新產品時,總會帶著某種目的性,希望這個產品能在某種程度上解決現階段遇到的問題或者改善我們的生活。

          圖片

          ▲ Twine將漸進式的引導頁融入到產品體驗中,用戶的流失率降低了一半以上。

          用戶留存率和客戶忠誠度是大多數產品和服務成功的關鍵因素,合適的引導頁可以提高長期留存率。

          為產品或服務添加新功能雖然很好,但如果用戶不了解或不知道如何使用,會導致用戶在很大程度上未充分利用這些新功能,那么它們就沒有為用戶帶來太大的價值。

           

          3.引導頁設計類型和方法 

          引導頁類型

          為滿足新用戶的需求并留住他們,大多數產品會采用幾種引導頁組合來為用戶提供指導。

           

          入門之旅

          這是一種在移動應用中非常流行的模式。用戶第一次啟動產品后,他們會看到幾個快速概述產品價值和基礎知識的頁面。

          這種簡單、靜態的介紹為新用戶提供了一個很好的入門。

          圖片

          ▲ Slack通過四屏概覽引入了新用戶,整個介紹流程很清晰,為用戶提供了明確的進度點以及跳過選項。

          最好的做法是為用戶提供進度指示以及退出或跳過選項。這樣他們就會明白還有多少介紹內容需要閱讀,并且不會感到困惑。

           

          工具提示和指導標記

          這是另一種很常見且相對省力的方法,用于從一開始并貫穿整個產品體驗來引導用戶。

          圖片

          ▲ Twine使用工具提示和指導標記幫助用戶快速了解頁面情況。

          圖片

          ▲ 在為Metrie的3D房間配置器設計界面時,通過添加指導標記的可切換圖層,將它們合并到加載屏幕中。

          雖然這種帶注釋的引導設計很有用,但要注意不要過度使用或者連續彈出多個窗口來干擾用戶。一次引導用戶使用一個元素或操作,避免解釋太多顯而易見的事情。

           

          引導任務完成

          讓用戶記住某事最好的方法就是讓他們實際去做。引導式任務是通過一系列步驟提示用戶與產品交互的方法,常用于當產品希望用戶盡早創建帳戶或設置一些個性化參數時。

          圖片

          ▲ 用戶首次進入團隊管理平臺Basecamp時,會被引導完成一項任務,以此來熟悉產品的特性和功能。

           

          什么時間開始引導

          從初次進入到持續使用的整個過程中,決定在產品體驗的哪個部分使用哪種引導模式對于用戶體驗來說都至關重要。

           

          開箱即用

          第一印象很重要,因為很多用戶在第一次打開產品后就把它放棄了。

          圖片

          ▲ 日記應用Dailyo友好細致的引導頁向用戶解釋了產品的價值,并提供了如何讓用戶從中獲益的提示。

           

          漸進式引導

          用戶完成了開箱即用的流程之后,在使用產品的過程中仍然有很多機會可以繼續幫助、啟發和取悅用戶。

          圖片

          ▲ 每當用戶選擇一種新語言來學習時,多鄰國都會提示用戶表明他們的專業水平,然后測試他們的語言能力。這有助于用戶避免因高估自己的能力而有可能放棄使用的挫折感。

           

          新功能上線

          當產品推出新功能或對體驗進行重大的改動時,需要讓用戶知道這些新功能的優點以及如何使用。

          圖片

          ▲ 當Facebook為用戶引入一項新功能時,會通過一個高度可見的工具提示標注來讓用戶知道如何在一個簡單的消息中使用新的功能。

           

          4.引導頁設計實踐和技巧 

          了解用戶

          通過了解用戶來調整引導頁的設計,發現并利用用戶現有的心智模型,來幫助彌合用戶對產品的期望。

          圖片

          ▲ Basecamp通過提供一個簡單的選擇面板和友好的指南,突出了新用戶在首次使用時要注意的核心要素。

          在構建產品時,用戶測試和可用性分析不僅能幫助團隊改進整體設計,還能告知用戶在入門時應關注哪些內容。

           

          與用戶價值聯系起來

          使用福利介紹來提醒用戶為什么產品或服務適合滿足特定需求。

          圖片

          ▲ Inbox對入門體驗進行了冗長的介紹,但每個案例都強調了其功能將如何使用戶的生活更輕松。

           

          快速引導

          使用一個實體產品時,很少有人愿意翻看說明書,相反大家更愿意自己去摸索產品的功能。

          圖片

          ▲ Morningstar Financial的入門引導違反保持簡單引導的準則,因為沒有人愿意花費時間去閱讀這么多的說明,更別說記住這些說明。

          如果產品很簡單,快速的概覽可能就足夠了。當需要更深入時可以考慮漸進式引導,將引導擴展到整個產品體驗中。

           

          可重復引導

          入門引導之后,不能假設用戶不會再次訪問這些引導內容,用戶很可能忘記了第一次引導時提到的技巧或內容,所以考慮在導航中設置一個“幫助”模塊,便于用戶重復回看這些引導內容。

          圖片

          ▲ 指導標記可以根據用戶需要在房間中選擇打開或關閉,這使用戶能夠根據自己的實際情況獲得指導和幫助。

           

          避免過于個性化

          鼓勵新用戶提供一些有助于個性化體驗的信息是很好的,但需要注意不能要求太多細節,導致讓用戶有一種信息泄漏的感覺。

          產品不應該向用戶詢問太多不必要的問題,尤其是在剛開始使用的時候。

          圖片

          ▲ 首次使用Pinterest時,用戶需要使用郵箱才能登錄,再通過年齡和興趣愛好的選擇為用戶帶來個性化的體驗。

           

          最后 

          引導頁不僅僅是一瞬間的操作,而是一個與受眾建立并保持信任的過程。

           

          原文地址:Clip設計夾(公眾號)

          作者: Clippp

          轉載請注明:學UI網》想抓住產品第一印象?看看這些引導頁設計方法!


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

                                                                      微信圖片_20210513163802.png

           

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

           

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



          金融設計中的信任感

          資深UI設計者

          通過解析市面上的產品是如何通過設計構建用戶的信任關系,提煉出在產品設計中打造信任感的方法


          在整個互聯網大環境下,針對精細化運營戰中,信任關系是有效轉化的關鍵,也是企業和品牌傳播的第一生產力。能否獲取用戶信任成為了企業商業價值大小的核心判斷標準。


          在金融產品設計中,設計師該如何和用戶構建信任關系,怎樣通過設計細節去逐步影響甚至改變用戶心理感受。本文將由淺入深,從金融設計上,通過解析市面上的產品如何通過設計去構建用戶的信任關系,提煉出在產品設計當中去打造信任感的方法。



          通常,我們在做金融產品設計,有以下幾個方面可以提升產品與用戶之間的信任感:


          一、信息透明化


          平臺的透明化運作,信息透明,有利于投資者對平臺有一個相對清晰理性的判斷,以便對各平臺進行風險定價和自由自主選擇。通??梢詮乃膫€方面去透明化平臺的運作情況:


          a、平臺基本信息

          平臺的基本信息和運營信息是投資者衡量、選擇平臺的主要依據,也是監管部門對行業監管的基礎。而作為合規的金融投資平臺,自然包括資質認證、發展歷程、管理團隊、風控措施等信息。


          b、標的的真實性透明

          例如做P2P產品,借款方信息應該在不泄露隱私的前提下最大程度公開。主要包括:借款人借款信息清晰,身份信息詳細(如借款人的職位、自身條件、收入來源等一系列基本信息),借款用途,還款來源與放款額度等等。


          c、審核過程透明

          對于上線產品,審核的尺度標準需要在不涉密的情況下,盡可能公開;相關手續和資料要求要嚴謹。平臺提供的證明材料必須是合法有保障的。


          d、風險備付金透明

          風險備付金是P2P平臺抵御風險的必要條件,協議、銀行查詢賬號盡可能公開,因平臺性質不同,所以公開的形式也有不同。


          二、打造/附加安全品牌背書

          在設計金融、政府相關的項目產品中,借助當地政府、專業權威機構的威信來和用戶建立信任關系,有相關的組織機構做背書,會讓用戶在整個流程中更容易做出決策;


          三、設計工具,而不是構建營銷渠道

          除非產品的本質和目的都是營銷,否則你所設計的產品是在迎合并滿足用戶的需求,本質上是服務于用戶的工具。

          合理的營銷是有效的手段,但是在金融類應用當中,本身已經涉及到非常龐大的數據量,在這種情況下植入營銷信息,會觸發用戶的負面情緒。即使這款金融類產品本身有著極強的粘度,極高的信任度,也會有很多用戶仍然對營銷手段、全新的未知技術,抱有懷疑態度。

          例如:剛推出人臉支付時,用戶擔心睡覺時或者別人用自己的照片,就可竊取錢財。


          以上三點均是為了在金融產品設計中打造基礎信任感,讓用戶放心、安全的使用金融產品,只有用戶信任了某個產品,才會將自己的隱私信息等向企業開放,從而產生一系列消費、轉換等行為。


          那么,什么是信任感?


          信任感是基于產品,在用戶感到產品具有一貫性、可預期性和可靠性時產生一種「 可靠服務、價值依賴 」的情感體驗。


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




          互聯網產品中信任感要如何產生?


          想對產品產生信任感,必須建立一個完善俱全的產品心智。當一個用戶從普通的態度到信任一款產品,這個過程是基于「認知」、「情緒」和「態度」建立的。




          這個過程在不同的場景所建立的時長也不相同,售賣場景當中是最常見的。

          我們有時候會在菜市場大街上看到有人吆喝賣菜刀、賣拖把等各種東西,這時候一群人過來圍觀,然后看到賣家(賣菜刀)為了展示自己商品的賣點,會拿兩把不同的菜刀(一把自家產品,一把不知名的菜刀)去切同一塊豬肉,通過切豬肉的順暢度,來吸引用戶注意和展示自家菜刀鋒利的賣點;這種展示方式,能在極短的時間內改變消費者的情緒和認知,從而改變消費者的態度,以建立消費者對產品的信任,最終提升下單轉化率。



          互聯網產品構建信任設計有以下三個階段:


          第一階段,構建信任心智基礎框架

          常言道:佛是金裝,人是衣裝。視覺傳達會影響用戶的心理,精致、嚴謹的視覺設計給用戶以專業、安全的感覺,而怪異、隨意的視覺設計給人以粗糙、不專業的感覺。因此,在視覺風格上應避免輕佻、或過于圓潤的設計,細節實現上應杜絕馬馬虎虎。大部分情況下,互聯網金融產品的視覺可以采用偏深色系,如藍色、綠色給用戶以穩重可靠的感覺,并輔助以“鎖”“盾”“資質”等安全標記,增強用戶對安全的認可。


          1)梳理各個場景下的信息,統一信息布局,便于用戶建立起統一的感知。


          2)場景敘述性插畫

          優秀的插畫可以降低人們的焦慮感,同時提升對當前場景的理解力。采用敘述性插畫來描述當前場景,能夠讓用戶更有代入感,更易于理解信息的傳達,具有品質感的插畫還能增強用戶對平臺的信任。


          3)品牌、專業權威的公信力

          品牌是對產品或者服務的一種保障,因為這種保障,用戶更傾向于使用該品牌的產品,良好的產品使用體驗讓用戶更加信任該品牌,形成一個正向的循環。

          以品牌背書、文案強化、品牌升級等形式來對品牌進行確認和肯定,強化用戶的認知,與用戶建立起一種可持續的、可信任的品牌安全感。


          品牌背書是為了增強在市場上的承諾強度的手段,通常還會借用第三方的信譽,然后第三方以一種明示或者暗示的方式來作出再一次的確認和肯定。于此與新用戶建立一種可持續的、可信任的品牌關聯。


          一般可以從品牌故事、品牌背書和名人效應來進行切入。

          品牌故事就是通過產品背后的意義是什么?為什么有這個產品?創始人的情懷是什么?有情感襯托的故事襯托你產品的價值。這點運用的最好的就是羅永浩的錘子科技,每次都在大講情懷,工匠精神,吸引了很大一批錘粉。


          品牌背書可以有品牌歷史、投資或者上市背景、品牌規模等等,這部分更多的去結合市場營銷的角度來進行。再有,若你的品牌有名人背書,效果就更好——這也是為什么很多產品面世,要找企業家或者明星甚至國家背書,一人抵萬言,人們更傾向于相信熟悉和崇拜的人和熟悉的事。


          4KOL種草

          這類情況在互聯網的場景中往往以KOL帶貨、探店等形式存在,早些年的小紅書微博探店測評,到近來越來越火的直播短視頻;都是基于人們在對自己信任的KOL面前,選擇信任相對應的產品或消費場景。


          通過感知層上的視覺統一及策略層上專業的權威機構、KOL種草的方式去滲透平臺的公信力,進而搭建基礎的信任框架,建立產品服務的進一步連接。



          第二階段,服務與用戶信任連接


          1)打造信任感話術

          話術是傳遞信任感的重要因素。既要做到實事求是的表達,又要避免引起用戶歧義。話術的首要原則是真誠感,坦誠明確的告知用戶必要的信息,避免帶有營銷感的含糊“套路”。

          互聯網金融領域有很多專業術語,向用戶傳達時,我們需要把它轉換成用戶能聽懂的語言,最大限度地降低用戶的理解成本。


          一般金融產品的文案要做到三點:簡單易懂、統一認知、突出重點。


          簡單易懂——互聯網金融產品的客戶群是普羅大眾,文化水平高低不一,因此傳達的文案必須是清晰的、接地氣的,讓金融術語從專業變成通用化,讓用戶能夠清晰直觀地識別和理解。


          最常見的如“提前結清”是銀行的叫法,轉換為用戶的語言是“提前還清”?;蛘呓栀J后還款的方式有“等額本金余額計息”,像這么專業的術語,會讓用戶感到困惑:到底什么是等額本金,余額計息?所以我們在設計的時候,只需告知用戶最想了解的信息,即每月的還款額以及利息即可。


          統一認知——如果對金融產品的解釋出現歧義,則可能會出現失之毫厘謬以千里的狀況,容易讓用戶產生不同的理解。解決這類問題的關鍵點在于能否發現歧義,這就需要設計師在設計時對產品業務本身有深刻的理解,能知道問題的存在并敏銳地發現問題。


          突出重點——互聯網金融產品有很多必要的規則需要告知用戶,當無法全都在頁面上展現時,通常會使用彈層頁面來輔助用戶理解,先由標題描述中心大意,再給出詳細解釋。


          有時候,我們也可以通過信任感的話術,提升產品轉化。

          對于借款,大部分用戶會因手續費或后續服務等各類問題而對借款產生一定的抵觸,為了提升借款的轉化率,可以通過改變心理上對借款的固有認知出發,核心目標是增強用戶接受度,讓用戶對借錢這件事產生“心理轉變”。


          我們從三個感覺去改變:

          臨時感——結合用戶「臨時缺錢」、「臨時周轉」這個情景,在話術上我們可以貼著「短期周轉資金」、「XX備用金」這樣的臨時場景進行表達;通過標簽上的對比,及心理上的行為暗示、選擇性暗示,增大用戶選擇借款的概率;


          壓力感——語言表達上,運用「隨時借隨時可以還」、「借2萬元半個月利息僅xxx元」、「1萬元借1天利息僅xx元」,將復雜金融邏輯扁平化、口語化,降低用戶直面借錢的壓力感。


          親切感——通過「地方政府與XX銀行給你準備了1份備用金/短期周轉資金」等方式,主動迎合的方式,拉近與用戶的距離。


          2)輕量學習成本

          通過輕量化的展示金融知識,白話講金融的方式提升用戶的認知。


          3)保持透明,呈現進度

          尼爾森十大可用性原則之一,系統狀態的可見性,應該保持在第一位——系統應該始終在合理的時間內,通過適當的方式,告知用戶當前所處的狀態,以及正在發生的事情。在使用產品時,用戶需知道每次交互是否成功了,而產品呈現的當前狀態,能夠讓用戶感受到更強的控制感,借此可以更好的控制,并完成自己的任務,而這種掌控感,能夠加深用戶對于產品的信任。金融產品,更需要有良好的反饋設計,它和金錢聯系緊密,容錯率很低,每次操作都可能引起蝴蝶效應。而良好的反饋設計能減小用戶在使用產品過程中產生的恐慌,幫助用戶獲得信心并提升掌控感,使用戶盡快完成自己的目標。


          4)提供足夠流暢的用戶引導流程

          和普通 APP 相比,金融類的服務不僅要做到好用易用,更要抓住用戶的利益點,給用戶真正帶來轉化的投資策略。并在用戶疑惑的時候,提供相應的幫助。

          從傳統銀行線下貸款全流程中可以看出,這里有個后置性的體驗——第四步中,用戶拿到錢后才確切知道每個月的還款額,實際上這種后置性的體驗是很糟糕的,給用戶帶來不確定性和不可控感。

          針對線下貸款的這種缺陷,在設計借款產品時,讓用戶了解清楚一切信息之后再來借款。基于這點考慮,用戶對于還款額的知曉需要前置,我們的設計方案可以是:在用戶輸入完「借款金額」和「借款期限」后,給用戶一個實時的「還款計劃表」,確切地告知用戶「還款日」和「每月還款」(每月還款金額)以及利息的計算方式,給予用戶足夠的把控感和確定感。并且當更改上述任意一個參數時,「還款計劃表」也會出現實時變動,幫助用戶快速找到合適的借款方案。


          5)圖表展示、提供便捷工具

          用戶往往不善于處理數字內容,簡單的加減法、乘法對于很多人而言不是問題,但是一旦需要快速進行混合運算,或者涉及到更復雜的內容時,絕大多數用戶會選擇使用計算器,甚至更專業的工具。

          數據可視化如今已經可以更好地集成到 APP 當中,擁有及時報告和分析的功能,在貸款、金融、 財務這樣的 APP 當中,合理地運用這些更易于理解的視覺信息,可以更好地幫助用戶理解和吸收內容。


          6)減少用戶腦力成本

          用戶一向不喜歡復雜的東西,除了不易理解外,更擔心因自己理解錯誤帶來意外的損失,而金融產品的損失是和金錢息息相關,更為重要。


          幫助用戶減少記憶負荷、順暢完成操作目標,是每個產品必不可少的設計點。如微信轉賬,輸入數字時會檢測數額,減去用戶邊輸入邊計算「這是多少錢」的腦力投入。


          7)保護用戶隱私

          當涉及到用戶信息安全、人身隱私、行業競爭等時,隱私保護可以避免用戶遇到一些不必要的麻煩,建立起一種【為用戶安全著想】的產品認知。

          常見的有:匿名評價、數據脫敏、身份認證信息保護等。


          第三階段,情感增強連接


          1)營造情感共鳴,增加品牌好感

          用戶對同類群體有情感共鳴。通過傳播內容故事化把信任心智具象呈現,喚起用戶的情感共鳴,進而從內心接受、信任金融投資/貸款服務。


          例如:支付寶在年前白酒基金大漲的時候,基金討論區底下出現了各種相親、屌絲逆襲等有趣的故事,用戶紛紛留言參與,用戶在平臺自發的互動,更增加了品牌好感,從而更加信任產品。

           


          2)秉持用戶思維,強化核心競爭力

          理解用戶思維,替用戶考慮,提升用戶決策效率。用戶的決策效率可以從三方面去提升:安全性、性價比、真實性


          安全性

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

          金融產品,在設計的時候突出與權威機構合作的詳細信息,向用戶提供基本安全保障,減少用戶的安全顧慮。

           

          性價比

          性價比是人們衡量「付出成本與回報價值」之間的一種決策依據。而為了讓用戶降低這種決策依據,除了自我服務/實力的展示外,往往需要一種「參照物」來凸顯性價比。而「參照物」 的形式多種多樣,不管是競品數據,還是各種優惠信息、額外禮物/禮包、售后服務等等。目的都是通過該參照物,向用戶傳遞一種「劃算」、「值得」的心理效應。

          例如:一些平臺推出自己的理財產品的時候,會注明:與余某寶相比,年化多出XX%。

           

          支付寶的「財運紅包」、京東金融「滿減券」,通過紅包抵扣,減少用戶開支,得到性價比高的基金。

           

          基金轉換,為用戶思考,減少時間成本,讓用戶快速獲取收益。

           


          真實性

          光是性價比高還只是片面依據,至于內容是否屬實,成為了我們與用戶建立信任感中最重要的影響因素。

           

          在視覺的呈現上向用戶直觀地展示相關的數據等,能在極短的時間內改善用戶的認知和態度,從而建立起短暫的信任感。

           


          或者通過真實投資故事,感知受益人的「現身說法」,營造身邊的人通過投資獲得了助力,進而整體塑造用戶對平臺服務的信任心智。

           


          結語

          金融產品的信任感設計是一件需要長期堅持的、正確且有難度的事情,它是一個循序漸進的互動過程,新生金融產品獲信極其艱難,基本信用值是一點一滴的日積月累,一旦失信一次,用戶就很難再信任。


          通過平臺公信力及產品優質服務,建立與用戶的信任連接,進而全面升級信任關系。無論是體驗設計還是視覺設計,都可以幫助企業拓展品牌和業務,建立和增強用戶之間的粘性,只有重視產品信任感設計,做好產品體驗,才能為產品的有效轉化奠定良好的基礎。




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

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


          文章來源:站酷   作者:有余Jack_Yuu

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

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





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

          資深UI設計者


          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 實戰案例


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


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


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


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


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





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

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


          文章來源:站酷   作者:Ballen成明

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

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


          樹形控件在生產力工具中的設計

          ui設計分享達人

          樹形控件是種常見的設計模式,幾乎與圖形化用戶界面同時誕生,通過結構化的組織方式逐級展示內容,讓整體信息架構一目了然,非常適合以網頁或桌面端為載體的 B 端產品和生產力工具,比如電腦文件管理系統。



          使用場景

          樹形控件通常有以下 4 種表現形式:


          可以把它們進一步總結為 2 個使用場景:


          其中,樹列表、思維導圖在 2 個場景中都有應用,而樹導航和樹選擇多以查看為主。不同的使用場景,在設計上會有不同取舍。可以把它們進一步總結為 2 個使用場景:



          交互設計

          結合樹形控件的使用場景,對其的操作也如此分類。顯然,「查看為主」時,對查看類操作的體驗要求更高,而「編輯為主」時則相反。


          新增節點

          以新增節點為例,不同場景下用戶有不同的訴求:


          查看為主

          可以考慮鼠標懸停到節點出現相關操作。


          但此時較難預測的是用戶到底是想增加一個子節點還是同級節點。一個完備的解法就是讓用戶選擇。但實際業務中,此處可能還要選擇節點類型,比如語雀要選擇文檔還是表格。所以「節點類型 x 層級選項」有可能導致選項過多。此時可以有兩種處理方式:


          針對第一種方法,我們需要額外思考一個問題:新建的子節點應該放在第一位還是最后一位?



          我的第一反應是第一位,因為它離操作區域最近,從操作到反饋都很自然,也避免目錄發生大幅度滾動,所以在語雀目錄中是這樣設計的。但是實際也有很多用戶反饋希望是最后一個子節點,類似于1,2,3…… 的順序從老到新排列。我沒有辦法去驗證如果真的是加為最后一個子節點,會不會又有另一波反饋聲音。后來我發現思維導圖新增子節點就是新增在末尾,以及絕大多數產品也是加在末尾,所以下次我大概會選擇放在最后試試?;蛘咚餍赃x擇上述第二種方法來避免這個問題。


          此外,界面上還需要提供一種方式,允許用戶創建最頂層的一級節點。當界面較大時,可以放置在頂部,讓用戶更易發現。



          編輯為主

          相較于上述方法,可以給出更明確直接的界面操作和添加位置示意或快捷鍵。



          語雀在進行目錄改版時,本想統一「閱讀頁面」和「編排目錄頁面」的交互方式——采用「查看為主」的添加方式,卻忽略了兩個頁面的用戶訴求不一樣。此時這里其實還可以借鑒思維導圖的創建方式,使用Enter/Tab 鍵快速添加節點。



          修改節點屬性

          結合實際業務,節點可能有不同屬性,比如名稱、類型、狀態、優先級等?!覆榭礊橹鳌箷r,修改操作使用不多,可以考慮放入「…」中。



          而「編輯為主」時,除了單個節點修改屬性方便,還需要考慮連續修改多個屬性,甚至是批量修改。如下圖,樹列表可以支持連續修改屬性節點。


          如下圖,思維導圖可以通過多選然后在格式面板統一修改屬性。



          調整結構


          樹形控件最有價值的部分就是其所表達的層級關系,常用調整結構的操作總結如下:


          無論采用那種方式,都遵循以下設計原則:



          拖拽調整

          簡單而言,設計上要解決以下問題:

          1.如何讓用戶知道可以拖拽?



          2.如何讓用戶知道可以怎么拖拽到哪里?


          可以在拖拽中采用「插入位置符號」暗示用戶,通常是一條彩色線條。應盡可能增加「插入位置符號」出現的機率,減少用戶的困惑。設計時可以考慮上下左右兩個方向的拖拽運動分別可以觸發什么結果。


          比如按以下方式簡單把拖拽規則分為 3 大類,


          當然在「插入位置符號」盡可能多出現的同時,也要讓其出現的位置符合用戶預期且易理解。

          比如向左移動「非末尾子節點」,如果強行給以一個符合邏輯的響應,「插入位置符號」可能離當前光標很遠,甚至在屏幕外,且放手后可能引起目錄結構較大變化,那么不如選擇此時拖拽無響應。



          這里再介紹「把一個節點調整為另一個的子節點」的兩種拖拽規則,分別適用于不同場景。


          3.如何讓用戶快速拖拽到目標位置?

          當用戶掌握了拖拽規則后,就需要幫助用戶快速實現自己的調整目標。拖拽過程中注意以下幾點:

           ① 被拖拽節點可以半透明顯示,以盡量少遮擋樹形控件,方便用戶定位目標位置。

           ② 被拖拽節點的原始位置可以以較弱的視覺效果展示,提示用戶節點從哪里被拖拽。

           ③ 整棵樹的結構不要發生變化,以免原先確定的目標位置發生位移。

           ④ 結構層級較深時,通過輔助示意幫助用戶確定會將節點拖拽到哪一層級。



          4.如何讓用戶確定拖拽結果滿足自己的期望?

          當以上問題都解決后,這個也許就不成問題。當然也可以增加二次確認的微交互。


          非拖拽調整

          調整結構也可以通過非拖拽的方式完成。拖拽是一種直觀,但不輕松的操作,尤其是當樹很龐大需跨屏拖拽時。此時可以增加按鈕操作,直接指定目標位置,精確且快速。

                   



          當「編輯為主」時,調整結構也需要考慮批量操作。如下圖,支持多選節點同時調整,被調整結構的節點有可能在原處于不同分支的不同等級,批量調整后會成為同一個字節的同級節點。



          刪除節點


          刪除是個比較慎重的操作,所以此處應該詢問用戶是只刪除本節點,還是本節點及其下所有節點。


          如果只刪除本節點,首先本節點需要從樹形控件中消失,以代表刪除成功,然后其子節點可以上移一級,保證用戶不會誤以為內容丟失。




          縮放視圖

          查看時,思維導圖可視化效果更好。針對思維導圖,需要考慮視圖的放大縮小,適應視口/真實大小切換。比如下圖語雀思維導圖的「縮放視圖」功能(不過這個設計把回到中心和適應畫布藏的有點深)。



          折疊層級

          當樹形控件龐大時,需要能夠快速折疊/展開層級,包括全部層級或者某一層級。如果是一棵「私人樹」,記住用戶折疊的展示層級,并且在下次進來時仍舊保持。如果是一棵「公開樹」,可以增加默認展開設置,比如下圖語雀中編排目錄的操作。




          值得注意的是,折疊層級和縮放視圖的操作都應該提供快捷鍵,會比通過界面操作更加高效,也不會打斷查看過程??梢韵胂笠幌履阏谝粋€會議中展示一張思維導圖,在界面上操作「縮放視圖」耗費更多時間,也會在奪走走觀眾的注意力。

          附上常見查看操作快捷鍵,僅供參考:


          上述部分快捷鍵會和瀏覽器自帶快捷鍵沖突,使用時需要覆蓋瀏覽器快捷鍵。



          搜索和篩選

          當節點數量很多時,樹形控件應該支持搜索查找節點,搜索關鍵詞可以高亮顯示;或按條件篩選展示節點及其上級節點路徑。


          使用列表時,還有一個常見的操作是「排序」,但是整棵樹「排序」和樹形控件本身的層級順序是相矛盾的。所以「樹列表」基本沒有「排序」功能。

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

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



          文章來源:站酷   作者:Ant_Design

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

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





          2021 年的 7 個UX趨勢

          ui設計分享達人

          1.在線醫療的加速發展

          盡管我們對COVID-19還不夠了解,但疫情流行已經為可穿戴設備、線上醫療和人工智能等數字健康的發展搭建了舞臺。可以預見,到2021年,這些行業將繼續發展。

          同時,一些非凡的自我監控應用程序繼續應用到可穿戴設備上,提供步數、睡眠、心率、血壓的即時可視化數據。這些復雜的功能可以讓用戶掌控健康,并獲知如何改變生活方式。

          到2025年,全球醫療人工智能軟件、硬件和服務市場預計將超過340億美元。         

          線上醫療,即醫患病雙方開展虛擬咨詢。線上醫療之所以得以發展,是因為在疫情嚴重時期,提倡人們減少直接接觸??梢灶A見,衛生服務部門希望將醫療資源和資金分配給最需要的患者,而這種線上的方式將繼續的發展成熟。

          還有人工智能,人工智能將賦能精準醫療、基因組學、新藥研發和醫學成像。以癌癥治療為例,借助人工智能的模式識別,醫生可以根據患者的基因組成和生活方式定制個性化的治療方案。



          -------



          2. VR再度崛起

          虛擬現實(VR)是一項“未來主義”技術,在一段時間內很難成為主流,特別是其配件——Facebook的Oculus Rift、HTC Vive和PS VR等頭盔的價格居高不下。

          然而,《半條命:愛莉克斯》等新發行游戲取得成功;能夠創造動態和創造性混合現實解決方案的開發者涌現;健康、展覽和娛樂藝術等非游戲市場的需求增加VR技術將再次崛起。

          VR游戲行業的全球收入預計將從2017年的4億美元增長到2024年的24億美元。

          那么,非游戲市場是如何適應VR的呢?在疫情期間,GDC 2020以VR形式舉辦了討論會,借助360度全景展臺、網絡研討平臺和聊天室,遠程與會者也能參加互動。2021年,預計會有更多的組織者利用這項技術來觸及全球更多的觀眾。

          此外,為優化在慢性疼痛、焦慮和創傷后應激障礙方面的治療,VR技術在數字健康領域將有更多的應用。甚至,VR技術可能在劇院和博物館得以應用,讓文藝的大門幾乎對全公眾開放。




          ------



          3. AR更多應用于設計領域

          增強現實(AR)是另一種“未來主義”技術。AR越來越流行。想在花園里見到一只真實大小的長頸鹿?想看看宜家家具在室內的擺放?甚至想嘗試紋身?AR正以許多新奇的方式進入人們的生活。

          AR產品的全球市場在未來四年內將激增85%,達到1650億美元。

          蘋果公司已經在重建和重組產品,讓日常用戶更易上手使用。據美國《行業周刊》(Industry Week)雜志報道,蘋果這家科技巨頭正在研發數款AR產品

          如:數字眼鏡可以與iPhone無線連接,將電影、地圖等內容發送給佩戴者。是不是很酷?

          新的AR技術和應用出現,將刺激企業尋找能夠創建AR界面和圖形疊加的設計師。市場上出現了谷歌ARCore、Adobe Aero和XD(現在具有3D轉換功能)等低價的設計應用程序,讓沉浸式增強體驗設計日漸成為現實。





          -------



          4. 語音UI將成為UX的組成部分

          用戶語音界面(Voice User Interface, VUI)無疑是2020年最熱門的趨勢之一。蘋果、谷歌和亞馬遜等知名品牌改變了搜索信息和使用智能家居設備的方式。

          全球超過四分之一的線上人口正在移動設備上使用語音功能。

          以VUI為例,要調暗燈光,只需說:“谷歌,調暗燈光”;或者也可以快速叫一輛優步,呼叫:“Alexa,叫優步?!边@些語音命令現在已經深入到日常生活中,VUI技術的身影也正隨處可見。

          VUI無疑是主旋律,將VUI作為UX組成部分的企業估計將越來越多。因此,企業將尋找設計沉浸式語音體驗的工具、技能和人才。

          VUI是新事物,在設計應用程序或技術時,找到可以遵循的流程很不容易。但是,CareerFoundry從流行的設計思維中尋找方法,已經創建了簡單的VUI框架。所以,到2021年,將會出現更多用于設計語音體驗的工具和技術。



          -------



          5. UX的文化優化(情感化設計)將影響產品的UI

          微文案(microcopy)是UI上幫助用戶做某些操作的小段文字。沒有好的微文案會讓界面彼此脫節,會缺乏人情味。如果技術進步了,可語言缺乏人味,那么也難以和用戶建立良好的關系。

          根據倫敦的《語言內容設計報告》(Voice and Content Design London),英國人口的平均閱讀年齡為9歲。

          在2021年,UX文案撰稿人將會更加活躍,熟練的溝通風格會引起人們的共鳴。所撰的文稿引人入勝、獨具特點和令人信賴。因此,他們在產品開發過程中將扮演著重要角色。

          出色的UX微文案將為虛擬助手增添人情味、為用戶查詢提供上下文語境、簡化反饋和引入人性化語言。Marshmallow、Gousto、Airbnb等公司的UX文案撰寫人員在這一方面尤為出彩。




          -------



          6.行為設計

          市場過度飽和,競爭激烈,要讓用戶選擇您的產品或服務,需要對他們的內在需求有更深入的了解。知道是什么觸動他們的心靈、什么是他們的痛點、什么能引起他們的反應,這些是提高產品活躍度和留存率的關鍵。

          行為設計是一個刻意、系統地改變人類行為的框架。而這一框架需通過說服用戶改變物理環境和數字環境。到2021年,行為設計的需求將會增加,從而吸引用戶的注意力、增強社交圈子、改善健康、保持平靜的心態、鼓勵自我實現、讓人們走上正確的道路,擁有更好的未來。

          那些經科學驗證能鼓勵行為改變的技術將幫助企業確定新的設計策略,提高產品的用戶生命周期價值;甚至能像蘋果智能手表的洗手檢測功能那樣,鼓勵人們采取新行為。

           


          -------



          7.用戶隱私

          2014年,劍橋分析公司(Cambridge Analytica,是一家進行資料探勘及數據分析的私人公司)丑聞啟發了全世界——個人數據變得越來越有價值,比原油更有價值!在數十億美元的行業中,技術平臺不斷在尋找新的方式來保持用戶的點擊量、閱讀量和分享量。

          技術平臺可供用戶點擊、閱讀和分享,從而賺了數十億美元。

          幾年來,我們討論了技術和社交媒體對人類的危害。Netflix在2020年上線的紀錄片《社交困境》,特別探討了社交媒體的興起及其對美國社會的損害,專家們發出了警惕。


          采用保護用戶隱私的設計規范,創造出更多滿足用戶需求的“人性化”產品。如何在不詢問太多個人信息的情況下提供出色的體驗?還有,真的有必要讓用戶長時間停留在產品上嗎



          -------



          總結

          站在歲尾,我們翹首以盼,期待來年有更多令人興奮的產品、創新和身臨其境的體驗。隨著人們對生活方式和幸福感的認識不斷提高,新的發展將從數字醫療開始,選用可穿戴和遠程醫療的用戶將持續增長。

          身臨其境的非游戲VR體驗越來越多,未來技術將獲得更多關注,甚至可能成為主流。我們可以看到通過“另一種現實”,參與展覽、娛樂,甚至參加辦公室會議的用戶越來越多。

          然后,展望AR和VUI的新設計過程。您如果盡早學習工具和技能,就可以超越傳統的基于屏幕的體驗做出創新。此外,UX文案將在塑造產品UI中扮演更重要的角色。


          最后,行為設計包含一系列認知科學,這些認知科學可以為設計師和研究人員提供不同的人性化設計理念。當然,應該使用合乎道德的方式來構建引導用戶的技術,從而確保用戶的心理健康和需求始終走在設計的第一位。

          所以,2021年應該是UX不平凡的一年。

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

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



          文章來源:站酷   作者:一百percent

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

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

          如何提升UI效果圖空間感?

          seo達人


          不論是作品集還是項目匯報,都少不了UI效果圖展示。雖然網上有很多樣機模板可以用,但與其與胡亂套用,還不如自己學會怎么展示界面。

          今天教大家一個簡單的方法,只需五個步驟就可以立即提升界面展示的空間感。

          看過之后,說不定你還可以舉一反三,做出更多不同的創新。

           

          1、準備界面

          可以像這樣把兩個界面并列放到一起,這里我用的是一個正方形畫布。

          看起來很無聊就對了,因為這只是第一步。

           

          2、旋轉角度

          如果什么東西都方方正正的,看起來會很沒意思。更何況在三維空間看二維界面,肯定是不可能這么擺放得規矩。

          于是我們把兩個界面都向不同的方向旋轉一點角度,例如下圖右邊是 -5 度,左邊是 8 度。

          同樣是為了體現三維空間感,我們把這兩個界面交疊一下,像是兩張散落在桌面的撲克牌。

           

          3、添加背景

          什么東西都用白色背景多無聊?更何況很多界面本身就是白色背景,再往白色畫布上放就要找不到邊界了。

          最簡單的方法,就是把界面上的主題色直接用到背景上,這樣即把界面體現出來了,又能保證整體色調。

          但是這樣做問題還是很明顯:首先,背景太強容易分散注意力;其次,也許有少量頁面用主題色作為背景,那就和畫布區分不開了。

          所以,比較簡單的方法,就是把背景上的主題色往淺灰色靠一些,讓它即保留在同一個色調,又不至于太搶眼。

          另外可以給畫布和界面都加個圓角,讓它們看起來更有卡片的感覺。

           

          4、繪制投影

          陰影可以說是空間感的點睛之筆,所以很有講究。

          很多人直接給界面設置陰影效果,結果陰影緊貼著邊緣,導致空間感較弱。

          為了讓陰影更加真實,最好是單獨畫一個陰影方塊,疊放在兩張界面之間。

          這個方塊可以直接用上層界面的形狀,縮小一點、加大圓角并填充黑色,至于擺放位置,就想象一下自然投影效果吧。

           

          5、模糊投影

          投影肯定不能是一個黑色的圓角方塊,所以要給它添加效果。

          例如,我設置了 50 的模糊效果,和 20% 的不透明度。這個數值可以根據具體的情況,自己調節。

           

          總結

          第五個步驟完成后,和第一個步驟比起來,是不是感覺好多了?

          你也可以用這個方法嘗試不同的色調和排版:

           

          原文地址:知乎

          轉載請注明:學UI網》如何提升UI效果圖空間感?

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

                                                                      微信圖片_20210513163802.png

           

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

           

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

          最初我覺得這效果也太差了,最后沒想到做的還不錯!

          seo達人


          今天給大家講講每周任務頁頁面頭圖案例,講講這里面的思路,讓大家吸收一波!本文頭圖強調顏色的橫向豐富與縱向豐富,色相的差異化、顏色占比的問題、層次和飽滿度,這樣就能大大提升畫面質感。

          最近在做每周任務頁頁面,頭圖又是給我難夠嗆,我們先看下第一版到第三版的變化:

          第一版

          圖片

           

          第二版

          圖片

           

          第三版

          圖片

          中間過程思考了很多,和大家分享一下。

           

          1. 顏色的橫向豐富與縱向豐富

          什么是橫向顏色?

          其實就是同一飽和度、明度的顏色,色相不同,比如下面這組顏色:

          圖片

          雖然色相挺豐富,但是看多了會比較膩。

          所以有時候我們就需要進行顏色的縱向延伸,也就是除了色相的不同,還有飽和度、明度的不同,比如:

          圖片

           

          2. 色相的差異化

          之前在總結顏色的時候有說過,色相不要用的太正,會比較常規,因為人們看多了比較正的顏色,所以就會感覺沒什么新意。

          舉個例子,同樣是紅色:

          圖片

          第一個紅色就會比較正,如果沒有相當足的功力,很可能做成過年、國慶的感覺,而第個組就會相對容易出效果一點!

          當然,顏色本身沒有好壞,要看怎么用,只是說不太正的色相對新手來說比較友好一些。

          所以大家看下,色相從比較正的橙色變換色相后,瞬間感覺沒那么老氣了:

          圖片

           

          3. 關于顏色占比的問題

          當然,這個案例中,除了色相以外,還有顏色完畢的問題,其實我之前很多作品,重色會占比多一些,比如下面這種:

          圖片

          而這次的每周任務頁面希望能有一點輕松愉悅的感覺,別用太濃烈的顏色讓用戶壓力太大。所以對我來說也算是一次小挑戰。

          所以我將重色占比縮小,只用在最前處的近景和字體暗部(藍色部分):

          圖片

          其他地方都是比較輕的顏色。

           

          4.關于層次和飽滿度

          上面講的都是關于配色的,接下來說下層次和飽滿度。

          因為這次的構圖比較簡單,就是中心構圖,也沒有什么大透視,那如何增加層次呢?

          我使用三、四層云放在前面,這幾本就把算是拉開層次:

          圖片

          但是有個問題,下面是有層次了,但是上面有點感覺空空的,于是又加了一點小元素進行點綴:

          圖片

          這樣整體看起來就比較和諧了,這里面有個要說的點,對于小元素的顏色,一定要有前后關系,也就是用顏色的深淺、色相來體現:

          圖片

          這樣看起來才不會生硬。

           

          總結:

          做到這里,越看越不順眼,總感覺有點油膩,有點土,具體什么原因?怎么修改?因為不想寫的太長,所以我們下期再仔細的聊一聊在保持基礎框架不變的情況下,如何拆分畫面來優化每一處細節,使第二版變成第三版的!

          圖片

           

          原文地址:菜心設計鋪
          作者:菜心設計鋪

          轉載請注明:學UI網》最初我覺得這效果也太差了,最后沒想到做的還不錯!

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

                                                                      微信圖片_20210513163802.png

           

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

           

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

          日歷

          鏈接

          個人資料

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

          存檔

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