<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設計分享達人

          滿足用戶的懶是用戶體驗的本質,利用用戶的懶是探索人性的設計!





          用戶有多懶?


          從我生活中的一個例子說起,我成功讓公司洗手間的紙變得夠用了。 

          事情是這樣的,公司每個樓層的洗手間每天只提供一卷紙,每次中午之后大多就是缺紙狀態,這讓人很不爽! 

          洗手間裝有兩個抽紙盒,一個靠里,一個靠外,每次保潔阿姨,都把卷紙裝在離洗手池較近靠外的抽紙盒中,這就滿足了人們洗手后很方便的拿到紙來擦手。 

          有一次在洗手間門口遇到保潔阿姨,我跟她說“大姐以后把紙裝在里面的抽紙盒,這樣用的時間長”,她笑了笑(當然我先說的是,兩個都裝上)。卷紙裝在里面之后,結果有時我晚上加班還有。 






          人有多懶,洗手后一多半人不再選擇多走幾步去拿紙擦手。所以在產品中和生活中,有時當你覺得有些設計不合理時,有可能是設計者的故意為之。 


          人有七宗罪,其中就有懶惰,懶是人的天性,是刻在骨子里的基因。


          現在互聯網產品幾乎都是在滿足人的懶,買菜不用去超市、餓了可以叫外賣、不想看書讀給你聽、不想打字有語言功能等等,互聯網的發展把人慣得越來越懶,也正因如此,才成就了許許多多的產品。




           產品中如何滿足用戶的懶  


          很多產品的商業屬性是滿足人的懶,其實產品中好的交互設計,通常也是以滿足用戶的懶,而讓用戶感受到好的體驗。 


          1、簡單簡潔

          電影《教父》中一句臺詞給我印象深刻, “能用半分鐘看清楚事物本質的人,注定和用半輩子看透的人,有不同的命運”,這句話在產品設計中,反過來看就是, 能用一句話說清楚的事情,為什么要長篇大論,復雜不會給帶用戶帶來價值,而是消費了他們的認知,因為用戶很懶。 

          下圖是產品中很常見的通知設置,天貓讀書的提示文案太啰嗦,用戶根本不會逐字的閱讀,用戶看提示文案就是一掃而過,這是因為用戶懶而養成的行為習慣。 



          2、為用戶多想一步

          滿足用戶的懶,就是給用戶制造“爽點”,在產品的交互設計中為用戶多想一步,用戶就會覺得用的很爽,覺得產品懂他。 

          當手機截圖后,在一定的時間內打開微信對話框點擊加號圖標,截圖會自動預備發送,因為用戶的操作行為大概率就是要發截圖。 

          iPhone手機長按微信應用圖標,會彈出一些即時性強的功能入口,這大大提高了產品的使用效率,用戶一旦使用一次就會愛上。 

          在此之前,如果面對面互加好友,需要好多步才能打開二維碼,主要還不好找到,對于陌生的朋友等待時間長了,難免會有一些尷尬的氣氛。 



          為用戶多想一步,就是思考用戶的行為目的是什么,然后在設計上為用戶提供快捷的操作方式,這樣就能提高產品的使用體驗。


          設計產品時不能總以自己慣有的思維方式去設計,要能把自己變成當下產品的用戶,站在用戶的角度去尋找答案解決問題。




          3、的交互方式

          用簡單的方式,讓用戶輕松完成任務。一般來說,用戶完成一項任務花費的時間越少,在易用性、性的體驗上也就越好。 

          這點在手機解鎖的交互演變上能體現出來,以前手機都是密碼解鎖,然后有了滑動解鎖,又有了指紋解鎖,再到現在的面目解鎖,每次的演變都是在減少用戶的操作,提高了使用效率。 

          手機解鎖的演變過程 

          與手機解鎖相同的還有APP的登錄演變,從繁瑣的輸入用戶名密碼登錄到如今與電信運營商合作識別手機號一鍵登錄,你會發現每一次的變化,同樣是在減少操作提率。 


          另外要強調的是,產品設計者要善于結合自己的產品思考問題,不能看別人有什么就加什么。 

          別人家產品有第三方登錄快捷方便,你也加,但其實如果不結合自己產品去思考,為什么要加,要滿足什么,目的是什么,加上可能就是多此一舉,制作麻煩,比如有些B端對內的產品根本不適合第三方登錄。 


          4、保持探索創新精神

          有位產品大佬曾經說過,“用戶習慣的操作路徑,不要試圖去改變,改變就會影響用戶體驗”,這觀點聽著似乎沒毛病,但其實有問題,至少我是不認同的。 

          試想一下,每次微信大改版的時候,是不是有很多人都會抱怨,“改的什么呀,用的好不習慣”,究其原因就是用戶的懶惰所致,對于改變熟悉的事物,普通用戶本能上就是會有排斥心理,因為他(她)懶的去適應。 

          然而隨著時間的推移,用戶會慢慢發現原來這樣的設計好像是比以前好用了。 

          用戶再次適應有兩個原因:一是因為用戶又習慣了,二是確實是產品的創新設計提高了體驗。 

          所以,改變操作路徑,只要經過團隊驗證測試后,對體驗和效率是可以提升的、有利的,就可以去嘗試轉變用戶原有的操作習慣,如果是好的改版,用戶很快就能適應并感受到變化后的價值。 


          5、產品中用戶懶的做的事

          產品設計者們有必要知道的事,用戶使用產品是懶惰的,用戶在沒有硬性需求的情況下, 很少有人更改產品的默認設置,也很少有用戶看系統消息和群發的短信,所以用這兩種方式推廣活動,轉化率極低。 

          對于推送消息,不要那么頻繁,除非你是新聞類產品,推送頻率高用戶會直接關閉推送。另外,有很大一部分用戶,對于絕大多數的產品不會開推送,因為他(她)不希望被推送所打擾。 

          有些功能從產品的角度希望用戶使用,但如果設計上不能吸引用戶,那用戶肯定是懶得摸索使用,所以改變用戶的懶,就得讓無聊的設計變得有趣、有激勵,從而吸引用戶,這樣才能改變用戶的懶的狀態。 

          產品的體驗設計,其實就是滿足用戶的懶,但其實能把懶用戶通過設計手段調動起來一定是探索人性后的設計。 


           最后 


          其實,因為人性中的懶,才成就了如今的互聯網盛世;因為人性中的懶,人們才為省力氣發明了輪子、嫌溝通麻煩才發明了電話等等,從某種程度上看,是因為人性中的懶才推動了社會的進步。 

          我們從更高一個層面去思考這個問題,是哪些人創造了互聯網盛世,又是哪些人推動了社會進步,絕對不是懶的學習、懶的改變自己的人,而是那些善于思考想要改變“懶”的人。


          文章來源:站酷-吳星辰

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




          交互設計心理學之 古騰堡原則

          ui設計分享達人

          寫在前面


          在平時的設計過程當中,你可能會有這樣的疑惑,為什么在大部分APP中,當單個按鈕和多個按鈕同時存在時,最重要的按鈕一般都會放置在頁面的右側呢?如果最重要的按鈕放在左側又有什么問題呢?按鈕放在右側的原因是什么呢?它又有什么理論依據呢?接下來帶著這些疑問,開始我們今天所要介紹的內容:交互心理學之古騰堡原則



          古騰堡原則的起源


          古騰堡原則是由14世紀西方活字印刷術的發明人約翰·古騰堡提出,早在20世紀50年代,他在設計報紙的過程中,提出了一項原則,認為人的閱讀方式應該是遵循某種習慣進行的,就像讀書一樣,由左到右,從上到下。這其中蘊含著什么信息呢?經過研究最終得出被后人所熟知的結論:古騰堡原則,并附上了一張圖,名為「古騰堡圖」。古騰堡圖將畫面所呈現的內容分成四個象限:


          1、第一視覺區(POA):左上方,用戶首先注意到的地方

          2、強休息區(SFA):右上方,較少被注意到

          3、弱休息區(WFA):左下方,最少被注意到

          4、終端視覺區(TA):右下方,視覺流終點




          從圖中可以看出,用戶視線很自然的會從第一視覺區開始,逐漸移動到終端休息區。整個閱讀過程視線都會沿著一條方向軸開始從左到右瀏覽。用戶會更容易關注到頁面的開始與結束區域,而中間的段落則很少被關注到。古騰堡揭示了一個實用的視覺軌跡規律:閱讀引力是從上到下,從左到右。


          遵循古騰堡原則把關鍵信息放在左上角、中間和右下角,能夠更好的體現元素的重要性。例如:我們平時所看到的頁面彈窗、各種證明文件和合同文件等等。



          古騰堡圖通過對設計元素的重量與元素布局和組成方式進行調和,指導眼睛的運動軌跡。讓用戶迅速獲取有價值的信息,同時用戶對信息的熟悉程度也是影響眼睛運動軌跡的因素之一。


          而隨著互聯網的興起,古騰堡原則也逐漸被應用到APP設計和網頁設計當中。接下來讓我們來看看他在界面中的實際應用。




          在設計中的應用


          1.1 底部單個按鈕


          這種形式在引導用戶操作的頁面中最為常見,為了能夠保證用戶對內容進行閱讀,所以將按鈕擺放在頁面底部,內容放在頂部,這樣的擺放即符合用戶由上到下的閱讀習慣又達到了產品預期的目標。





          1.2 底部垂直雙按鈕


          上面我們提到了單個按鈕的擺放思路,接下來看一下垂直雙按鈕的擺放思路是怎么樣的。如果一個界面上同時存在兩個優先級不同的按鈕,并且產品希望用戶對每一個按鈕都有足夠的關注度,那么垂直擺放是最佳選擇,雖然垂直雙按鈕在樣式上做了區分,但用戶同樣會停留一段時間將按鈕的內容進行對比思考。


          那么,按照古騰堡原則,重要的按鈕應該放在頁面最底部,原則上它應該是這樣的:



          仔細觀察上圖,有沒有發現淺色按鈕很容易被忽略掉,這樣就違背了產品要保證每一個按鈕都要有足夠關注度的初衷,所以我們要違背古騰堡原則來滿足業務需求,正如我們所看到的微信授權頁面一樣,




          為了保證「同意」與「拒絕」這兩個獨立的按鈕能夠被用戶足夠的重視,并且其中的任意一個按鈕不會被輕易的忽略掉,這里將「同意」按鈕顏色加重,并且放在「拒絕」按鈕之上,讓眼睛原本垂直向下的運動軌跡產生回流的變化。



          小結

          原則是設計的基礎,并非一成不變,要合理權衡設計原則與產品目標之間的關系。




          2、頂部按鈕分析


          由于頂部導航欄空間有限,導致按鈕相對較小,并且不便于點擊操作,所以這類頂部按鈕適用于修改內容的編輯頁面,即可以避免誤觸,又可以讓用戶關注內容本身。關鍵按鈕至于頂部,還可以縮短用戶眼睛的運動路徑,讓用戶更容易注意到其狀態的變化狀態。




          小結

          頂部按鈕更關注可編輯的內容區域,并非按鈕。而底部按鈕則更關注按鈕本身。并非內容。




          3、水平按鈕分析


          除了上面提到的頂部按鈕和底部按鈕,還有水平擺放的按鈕,比如淘寶詳情頁、京東詳情頁、網易嚴選詳情頁的「加入購物車」和「立即購買」按鈕,界面中的「立即購買」按鈕都放在了右下角,結合古騰堡原則的視覺終點說明,右下角為視覺終端區域,即視覺最終停留的位置,所以他們都將與轉化率密切相關的「立即購買」按鈕放在了界面的右下角,讓用戶更容易關注到。




          再比如比較常見的「取消」和「確認」彈窗樣式,通常是在需要讓用戶確認某種操作行為時出現,有可能是提交表單、協議授權、獲取用戶信息等等,為了防止用戶誤操作,這也是提升產品體驗的小細節。


          平常我們所看到的彈窗,推薦按鈕都是在右側,那么將推薦按鈕放在左側會怎么樣?如下圖所示:






          不難看出推薦按鈕放在右側后,視覺在水平方向軸上產生了回流。


          彈窗的目的是想讓用戶點擊「確認」按鈕,如果將「確認」放在左側,根據古騰堡原則,用戶的視線會不由自主的向右側移動,也就是「取消」按鈕的位置,想要回到左側「確認」按鈕位置就需要移動視線,并且眼睛的運動軌跡會在水平方向軸上來回的往復運動,無形中增加了用戶選擇時長。如果將「確認」放在右側,「取消」放在左側則可以為用戶提高操作效率。


          在實際產品中的應用案例:




          小結

          當產品想要讓用戶進行某種操作時,主要按鈕放在右邊




          總結


          1、古騰堡圖第一視覺區,強休息區,弱休息區,終端視覺區

          2、原則是設計的基礎,并非一成不變,要合理權衡設計原則與產品目標之間的關系

          3、頂部按鈕更關注可編輯的內容區域,并非按鈕。而底部按鈕則更關注按鈕本身。并非內容

          4、當產品想要讓用戶進行某種操作時,主要按鈕放在右邊

          文章來源:UI中國       作者:Coldrain1

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

          抓住關鍵點,提升App搜索設計的體驗!

          ui設計分享達人

          可能很多人認為搜索設計很簡單:在主頁頂部設計一個搜索框或者搜索圖標,就可以完成操作。但搜索前、中、后的體驗大家有沒有仔細考慮過呢?

          在搜索過程中需要展示什么?如何幫助用戶盡快找到他們想要的?搜索的體驗如何與其他體驗相聯系?這是很多設計師思維模糊的地方。

          在本文中,將介紹搜索設計需要了解的內容,以及在不同App和案例中的搜索體驗。 

          一、搜索前的體驗

          搜索是產品中不可或缺的一部分,無論打開哪個App, 我們都能很快找到搜索功能。搜索作為一個功能入口,簡單的呈現方式對用戶來說很重要。

          搜索設計常見的形式有3種:

          • 頂部搜索框

          • 圖標(放大鏡)搜索

          • 底部搜索導航

          從視覺和優先程度來看,底部導航>搜索框>圖標。那么每種形式的優缺點是什么,又分別在什么時候使用呢? 

          1、頂部搜索框

          搜索框通常位于App主頁的頂部,作為一個大的觸摸目標,更容易被用戶發現和使用。搜索框的組成一般包括容器、預設文字、操作按鈕。

          容器通常填充為白色或灰色,里面帶有預設好的產品文案。但是容器什么時候用白色,什么時候用淺灰色呢?這取決于App主頁的背景色。

          設計準則是始終將容器的顏色與頁面背景色相對比。拿谷歌地圖和微信讀書相比較,灰色背景下用白色的搜索框,反之亦然。

          當然也有例外,Airbnb在白色背景上就有一個白色的搜索框。為什么這樣設計呢?因為它的搜索框帶有陰影,能和背景作出區分,也是一種可行的設計方法。

          預設文字的作用是提示用戶要搜索的內容或搜索方向,告訴用戶可以從搜索中得到什么。在App Store中,預設文字告訴用戶可以搜索“游戲、應用、故事等”,Messenger中的預設文字只有“搜索”,為用戶提供功能入口。

          預設文字在內容瀏覽類App中很常見——不僅可以展示擁有的內容類別,還能結合搜索趨勢來積極地推廣熱門內容。比如微信讀書的搜索框使用最近流行的書作為預設文字,以此提高內容的曝光率,吸引用戶閱讀。

          操作按鈕雖然與搜索相關,但擺放的位置不固定??赡茉谒阉骺騼炔?,也可能在搜索框兩側。哪些圖標/文本按鈕對搜索有幫助呢?最常見的是搜索框中的語音輸入功能和二維碼圖標。

          另外一個好的搜索體驗的關鍵是能從視覺上區分與搜索相關的圖標。

          2、搜索圖標

          如果一款產品希望用戶專注于瀏覽內容,或者不需要頻繁使用搜索,可以采用圖標的樣式將搜索入口放在頁面頂部。例如,在Medium上用戶通常是漫無目的地瀏覽內容,而不是搜索特定的主題;Facebook上的用戶通常只想瀏覽朋友的帖子,很少搜索內容。 

          3、底部搜索導航

          與前兩種形式相比,底部搜索導航離用戶距離最近,更容易作為接觸目標也被賦予更多的特性。

          UberEats通過主頁的排序和過濾,幫助用戶分類感興趣的餐廳,并將搜索作為底部導航的第二個標簽,這樣用戶就能夠不斷看到和探索新餐廳。

          Tiktok也將搜索入口放在第二導航中,完整的首頁有利于為瀏覽視頻的用戶提供沉浸式的體驗。

          二、搜索頁內容展示

          當用戶想搜索某個內容,點擊搜索框之后該做什么呢?App應該如何幫助用戶搜索?

          用戶點擊搜索框時會彈出一個頁面,我們將其定義為“搜索頁”。搜索頁的目的是讓用戶做好搜索的準備,對要尋找的內容進行提示,拓寬用戶對要搜索的內容的看法。

          彈出的搜索頁幫助產品完成兩個主要任務:

          • 利用視覺和交互告訴用戶已經做好搜索的準備;

          • 通過頁面上的內容提醒用戶他們正在尋找的東西,或者為他們提供可能感興趣的東西。 

          1、視覺和交互——做好搜索的準備

          當我們有一個特定的搜索目標時,我們的注意力就會完全放在搜索框(或搜索圖標)上,如果突然被引導到一個新的頁面,可能會帶來零碎的體驗。

          所以要把“搜索前”到“搜索頁”的轉換做得更自然,讓用戶感覺仍然在同一個頁面上操作一樣。點擊Facebook的搜索圖標,圖標通過平滑的動效擴展成一個搜索框。

          無論搜索在什么位置,顯示搜索框的不同狀態很重要,告訴用戶“已經準備好進行搜索”。以領英為例,分析一下從搜索前到搜索頁面發生了哪些變化:

          • 從搜索中返回的方法:取消。這對所有的搜索體驗都是必要的,可以使用取消或者返回圖標。

          • 搜索框改變了填充色。搜索框從灰色變為白色,反映當前搜索操作處于焦點狀態。

          • 只留下必要的圖標。二維碼能幫助搜索所以仍然保留,而左邊的個人資料圖標和搜索圖標都會消失。

          • 彈出光標來鼓勵用戶輸入文字。

          在某些App中,搜索框在“搜索前”和“搜索頁”中的位置可能不相同,這樣做的目的是在兩種體驗之間進行平滑的過渡。Google的搜索框向上滑動來展示搜索內容,保證過渡動效的流暢性。

          有些搜索體驗不可能讓用戶停留在同一頁面上。Airbnb的搜索需要一系列的引導將用戶轉移到一個全屏的流程中。

          關鍵的地方在于,搜索頁面在屏幕中間彈出,鍵盤向上滑動,用戶可以通過無縫的交互從“搜索前”平滑過渡到“搜索中”。 

          2、內容——提示搜索的信息

          歷史記錄可以幫助用戶進行有針對性的搜索,因為過去的興趣是當前興趣的有力指標。但是只顯示歷史搜索記錄會將用戶的注意力集中到過去的搜索上,而不是保持搜索的狀態。所以除了顯示搜索記錄外,顯示推薦內容能拓寬用戶對潛在事物的興趣。

          關鍵點1:“沒有內容可推薦”

          當一款產品的功能主要是為了讓用戶完成某個特定的任務或達到某個目標,那么它可能就沒有動機去推廣任何內容。這類產品只會顯示最近的搜索記錄,比如Notion是一個筆記應用,只負責存儲用戶的筆記,因此只顯示過去的搜索記錄來幫助用戶進行搜索。

          關鍵點2:“在搜索前推廣內容”

          有的產品通過將各種內容提供給用戶查看和探索,為用戶實現某個目標。谷歌地圖的搜索框下面有熱門的標簽,用戶很可能會從標簽中找到他們感興趣的類別。用戶點擊搜索框后,谷歌就會假設用戶有特定的去處,只專注于幫助他們到達想去的地方。

          關鍵點3:“平衡內容推薦和歷史搜索”

          主頁上的推薦內容可能很容易被忽略(因為它可能與用戶的操作無關),但是搜索頁上的熱門推薦很少會被忽視。因為用戶是帶著目標主動進入搜索頁,所以不會省略頁面上的任何信息。

          熱門類別

          通過在最近搜索頁上將各種美食放在首位,UberEats和Doordash這類送餐App就可以引導用戶嘗試更多的餐廳。

          熱門話題

          展示熱門話題能為用戶創造一種社區感,會讓用戶覺得他們與更大的社會保持聯系。Quora是很大的問答平臺,它不僅顯示推薦的話題,還顯示了關注者的數量??吹竭@一點,用戶會想:“如果一個話題有13萬追隨者,那一定很好!我也想成為其中的一員?!?

          熱門新聞

          新聞類搜索具有很強的時效性,用戶很清楚明天的內容將不同于今天的內容。所以有些App會對新聞或熱搜進行實時排名,向用戶展示最熱門的資訊。

          Reddit展示了當前的趨勢,讓用戶了解的內容,Robinhood每小時都會更新華爾街關于股市的文章,這樣用戶就可以做出及時和明智的財務選擇。

          搜索推薦

          通過算法,很多App都能從用戶過去的興趣中推斷用戶的喜好,然后不斷推送相似的內容,比如淘寶的相似商品推薦。

          同樣的策略也可以應用于搜索頁。小紅書作為一款流行App,搜索頁顯示根據用戶口味定制的推薦;Twitter的“For you”標簽根據過去的搜索展示的相關內容。顯示更多與用戶相關的內容可以拉近與產品的距離,用戶也會花更多的時間使用產品。

          搜索細分

          Medium的搜索做得很聰明,它將搜索頁面細分為兩個步驟:先點擊搜索框來瀏覽不同的主題,再次點擊會顯示光標和搜索記錄。通過這種分解體驗,用戶在搜索時獲得了更多的信息量和更簡潔的體驗。

          總結

          以上是關于搜索前和搜索頁的體驗設計。產品的搜索體驗受到多方面的影響:自身目的、內容種類、受眾類型。希望這篇文章能夠讓你了解搜索體驗的可能性,為搜索設計帶來更清晰的方向。


          文章來源:站酷      作者:Clippp

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

          B端-表格設計

          ui設計分享達人

          在B端產品中,數據主要通過表格的形式展現。本文是我從實際工作出發,結合項目和過去經驗對于復雜業務類的表格設計的一次總結。



          1、表格的介紹


          1.1表格的定義


          表格(Table),又稱為表,是用來收集、整理、組織、分析數據的二維矩陣。它既是一種可視化交流模式,又是一種組織整理數據的手段。


          1.2表格的構成元素


          通常表格的組成元素以及相關元素會有多個部分,筆者根據自己設計表格的工作經驗將表格概括為容器、篩選區、功能性按鈕、表頭、表體以及底欄等六個部分,其各個部分包含的相關元素如圖所示。



          容器:包含表格的所有內容。

          篩選區:包括搜索和條件篩選。方便用戶快速查詢定位數據,一般位于表格上方。

          功能性按鈕:比如常見的[新增]按鈕和各種批量操作按鈕。

          表頭:說明數據的內容,可以包含篩選、排序等功能。

          表體:包含行和列數據,按列可以分為多選列、數據列、操作列。(多選列=多選框;數據列=呈現業務展現需要的信息;操作列=針對單行數據的操作按鈕,比如管理、編輯信息等。)

          底欄:包含數據量、單頁條目、總條目、分頁等,底欄數據也可以放置在表格頂部。


          1.3表格的樣式


          1)幾種常見的風格樣式


          a.網格型:表格有均勻而明顯的分割線,邊框單元格比較明顯。

          b.水平線型:僅顯示水平線可減少整個網格的視覺噪聲。

          c.斑馬條紋型:隔行交替使用不同底色來區分數據。

          d.自由形式:移除所有分割線,通過盡可能減少視覺噪聲來創建極簡外觀。



          2)關于樣式的選取技巧


          網格型:對于數據之間的關系緊密(列信息較多而沒有足夠空間用留白來分割信息)且有對比關系的。


          水平線型:它能顯著減輕表格在垂直方向的視覺重量,提升用戶進行大量數據對比時的速度。因此對于所有數據集大小,此樣式都是最常見的。


          斑馬條紋型:每行交替使用不同的顏色背景是幫助用戶在閱讀時保持其位置的另一種好方法。對于較大的數據集,建議使用此樣式,在較大的數據集中,交替模式將很清晰,并且不會引起特定行突出顯示的混亂。


          自由形式:對于小型數據集,如果用戶在閱讀時不需要幫助就可以保持位置,則建議使用此樣式。


          信息內容的有效傳達是表格設計的本質,就表格本身而言應該是隱型的,應該讓用戶注意力聚焦在核心內容上。所以,邊框的顏色應非常淡,不能妨礙快速瀏覽。


          2、表格的設計技巧


          表格是為可讀性而生的,一個結構清晰的布局能大大提升用戶對信息的接收速度和理解程度。因此,設計易讀,易掃視,易比較,易操作的表格結構是表格設計的首要目標。


          下面我將以公司財務中臺的表格改版為例,逐步說明表格中每個結構的設計。


          這是改版前后樣式對比圖:



          2.1篩選區設計


          篩選區可以看作表格的導航,由搜索和篩選這兩部分組成。一般搜索和篩選會同時出現,但是兩者一般很少同時使用來對數據進行定位。搜索更多的是對單一或者包含某個字段的的數據來進行定位;篩選則是用來查詢一類數據

          根據MECE分析法,篩選區可以有以下的表現形式:


          • 常用搜索少用篩選,若篩選項多,可以選擇隱藏篩選項,篩選少可以展示出來;

          • 搜索和篩選都常用,可以將搜索和篩選都展示出來;

          • 常用篩選少用搜索,篩選和搜索同時展示;

          • 篩選和搜索都不常用,展示搜索隱藏篩選。


          1)搜索


          在樣式上,搜索可以分為簡單搜索、標簽搜索、高級搜索等三類。


          • 簡單搜索:由一個搜索框和一個按鈕組成。可以輸入一個或多個條件進行搜索。

          • 標簽搜索:在簡單搜索的基礎上加上標簽,即先選標簽,在輸入搜索內容。

          • 高級搜索:即點擊更多展開其他搜索條件,減少了更多條件對用戶的干擾,但降低了易發現性。



          2)篩選


          根據篩選的位置,可以分為標簽篩選、表頭篩選兩類。



          3)案例小講堂


          對于數據集較大的B端系統來說,往往篩選條件比較多,都將其展示出來會導致空間占比過大,影響了用戶對表格信息的獲取。下面以我公司的財務中臺為例,講講如何優化篩選區,希望對大家有所啟示。


          3.2.3 版本中篩選區樣式



          篩選條件全部展開,目的是讓用戶對信息進行快速的查詢、過濾,以快速準確完成目標任務。但業務復雜,數據集過多少,篩選條件也相應增加(空間占比大),看起來非常冗余,不利于快速定位目標。為了平衡掃描、查詢、過濾、分析等這些操作,復雜業務的表格區篩選需要進行一定的優化處理,這樣才能滿足滿足業務需求同時,又符合用戶心智模型。


          方案A  整齊劃一


          整合篩選項,采用表頭篩選+標簽篩選的樣式,縮減篩選區的頁面空間占比。



          討論結果:雖然這個方案使篩選區的空間占比縮小,整體頁面也看似整潔不少。但表頭篩選在復雜的業務系統中存在幾個弊端:


          a.數據集往往很龐大,表格不能展示所有字段,往往采用列固定的形式來呈現數據的完整性。以財務中臺為例,高頻篩選功能已被遮擋(如上圖),篩選前需先對表格進行橫向滾動,無端增加操作;


          b.應無法展示全部字段,用戶無法清晰的感知到篩選了哪些內容,增加認知學習成本;


          c.表頭中的屬性并不是都可以進行篩選,用戶不可感知哪些可以篩選,需要滑動表格檢索。


          方案B 強調主次關系


          采用展開式的標簽篩選樣式,對不常用的篩選項做隱藏處理。但因業務場景的復雜度,高頻篩選功能還是很多,沒有解決本質的問題,如下圖:



          方案C 分狀態展示(逐漸呈現)


          在方案B的基礎上進行了優化。提煉與流程相關的狀態,按步驟顯示,每一步只顯示當前需要關注的內容,如圖:



          狀態的提煉過程


          1)整理每個單據的狀態,理清關系



          結合業務流程可以很明顯的注意到,單據只有通過了審核才能收款,只有收款才能進行核銷。狀態是一種遞進關系(審核 ?? 收款 ?? 核銷)。


          2)結合財務人員的工作流,提煉出單據的以下幾種狀態,之前存在到問題(表格中單行數據的操作不一致),也得到了完美的解決。如圖:



          2.2功能區按鈕設計


          1)按鈕的表現形式


          建議在復雜系統設計中使用圓角矩形的按鈕樣式。


          理由如下:

          a.人眼處理圓角更容易(認知負荷說)


          Jürg N?nni(Visual Perception的作者)表示,視網膜中區處理正圓形的時候是最快速的,而處理邊邊角角的時候則比較費力,大腦處理的速度也較慢。于是,長得圓潤的圓角矩形相較于一般矩形,對于使用者來說就容易接納許多。


          Barrow Neurological Institute (巴羅神經病學研究)的研究也顯示,一個物體的顯著度與邊角的角度呈線性變化,銳角相較于鈍角要顯得更明顯突出。換句話說,角度越尖銳,物體就看起來越明亮;而越明亮的物體就越難以直視。



          如上圖所示角度越尖銳,看起來越顯眼,在視覺上也比較令人感到明亮,不適,大腦的認知符合也越高。


          b.使相似的內容更容易被區別


          舉個例子,如下圖所示,即便間距相同,B 排的圓角矩形辨識度還是明顯比A 排的矩形高。



          這是為什么呢?

          首先,第一眼看過去的時候,A 排的矩形整體是連在一起的,中間找不到斷點。而B 排矩形,因為有圓角的關系,所以斷點很明顯。



          其次,兩種矩形的視覺聚焦:A 排由于直角的關系,視覺聚焦向外推,整體的效果比較發散。這會使得第一眼看過去的時候,容易分不清楚哪一條邊框屬于哪一塊矩形。反之B 排因為圓角收攏的關系,視覺聚焦向中心推,區塊就比較容易區別開來。



          綜上所示,圓角矩形是非常有效率的容器,在復雜場景業務中(存在很多種功能型按鈕),按鈕采用圓角矩形樣式最提效。


          這里要注意,圓角不是越大越好


          在相同面積中,按鈕的可操作區域隨著圓角的增大而遞減,因此在同等尺寸下的按鈕中,小圓角的按鈕明顯比大圓角的按鈕更容易操作。


          同時在實際業務中,按鈕常常被當作原子與下拉框聯動組成下拉菜單控件。如若使用半圓按鈕則無疑增加了下拉框的設計難度并且匹配起來也會略顯突兀。



          2)批量操作按鈕的位置思考


          來看個舉個例子(針對財務中臺批量操作的優化方案)


          現存問題




          方案A  信息前置


          批量操作按鈕全部展開不做折疊處理,信息前置來降低認知成本,方便用戶記憶。



          討論結果:對于復雜業務來說,會有很多批量操作功能,按鈕很多,造成頁面擁擠,進而影響用戶操作體驗;一個位置出現2個主按鈕樣式,不推薦。


          方案B 沉浸式操作體驗


          對于一開始不可用的批量操作按鈕進行隱藏,勾選激活狀態,顯示在篩選區。



          討論結果:方案B的阻斷性強 — 無法兼顧批量操作和數據篩選功能,無法滿足復雜系統的場景操作。


          方案C 上內容下操作,前2個方案的優化 


          不做隱藏,類灰布置于底部。勾選觸發操作條件,未做勾選時,用戶點擊時給出引導操作提示



          為什么選擇方案C?理由如下:


          首先,根據古騰堡原則,用戶的在做表格操作的時候,視覺流是左做到右,從上到下,方案A和方案B的視覺落腳點在表格的上方,顯然是不符合眼動規律的。



          其次,批量操作的功能屬于財務中臺的核心功能點,隱藏不是第一選擇,而是類置灰的特除處理(在按鈕旁給提示信息)


          2.3表頭設計


          表頭在能夠概括的情況下,盡量簡練、準確,一般可根據上下文關系來進行減短簡化,以達到節省表格頭部空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數據本身。如果精簡后的生僻字段難以自我解釋,可以跟一個釋義標識,鼠標懸停時出現該字段的詳細解釋,同時滿足新手用戶、普通用戶以及專家用戶的需求。



          2.4表體設計


          1)數據對齊方式


          在數據的對齊方式上,有以下3個建議:

          a.文本左對齊

          b.數字右對齊

          c.表頭與信息內容對齊方式一致


          文本左對齊,符合正常的心智模型(閱讀習慣從左到右);表頭與內容對齊一致,則是為了簡化和降低視覺噪音,以便更好的獲取數據信息。數字右對齊,有利于數據間的對比。


          要注意的一個細節,例如,當列數=2的時候,由于列與列直接的間距過大,導致兩者的關聯性較弱,如圖:



          這時又該如何處理?

          為了增強列與列之間的相關性,當鼠標hover在行的時候,產生高亮。這種方式可能不是最優的,但目前只能想到這種方法,如果讀者有更好的想法歡迎留言。



          2)數字的字體選擇


          建議選用:Helvetica Neue、Helvetica、Arial、sans-serif.


          蘋方在數字字符上,不同數字寬度不一致,導致千位分隔符不在一條線上。而Helvetica Neue數字等寬,千位分隔符有序的排列在一條線上。所以,選擇Helvetica Neue作為數字字體的首選字體。數值上下對比的時候,相同位置的數字在同一條豎線上,更加容易對比。



          3)對操作項進行“解耦”處理


          在財務中臺系統中,常常由于權限的不同或者單據狀態不同這兩種原因,使得每行的數據擁有不同的操作項,如下圖所示:



          存在的問題:


          • 當信息過載,操作項這個list非常長的話,頁面將會非常擁擠;

          • 文字按鈕因為視覺特征比較明顯,造成了不必要的分散注意力

          • 誤操作率相對較高,同樣因為表格空間有限,當操作區非??拷?,很容易一不小心就點錯了。


          針對這個問題所出的解決方案,如下:


          方案A 下拉框樣式



          討論結果:下拉框中可能存在不同操作,同樣避免不了誤操作這個問題


          方案B 錯位顯示




          討論結果:首先,這樣的設計浪費大量的屏幕空間;其次,浪費開發工作量!因為在列表中實現一系列權限判斷和操作,在詳情界面中往往還需要再開發一次相同的權限判斷和操作;再次,不同單據可能存在操作順序不一樣,上下移動鼠標會存在不同操作,用戶代價非常高。


          方案C  以不變應萬變


          回歸『一個界面一個用戶任務』的原則,列表中的單行數據只保留[查看]或[管理]操作,所有其它的單獨操作都去往該單據的詳情界面完成。





          討論結果:從開發的角度上看,此方案界面高度解耦,功能迭代方便,節約開發工作量;從認知成本上看,列表界面操作高度一致性,利于養成用戶習慣;從操作效率上看,在詳情頁用戶會明顯確認目標單據,幾乎不會誤操作; 同時此方案節約了大量屏幕空間,更有利于用戶對信息的獲取;


          4)關于表格中套表格的解決方案


          場景:在財務中臺中,有這樣一種用戶,需要對表格內的數據進行對比并編輯。

          來看看之前的頁面:



          這樣處理的不足點:


          • 1.在查看和編輯信息時,無效的信息太多。降低了獲取信息的效率;

          • 2.切換單條數據時,頁面出現跳動,無法快速檢索到相對應的信息;


          對此,在3.3.2版本中,我們對其做了相應的優化。運用側視圖(快速視圖)的方式來呈現信息。一旦選擇一個單據,它就會從側面彈出的。



          這個方案,它可以保持上下文,易于使用,即使是在垂直滾動視圖中顯示大量字段的情況下也效果良好。同時信息呈現的地方是固定的,利于檢索,查找。


          5)行高的制定方法


          開始之前首先明確一下開發是怎么實現行高的。



          從上圖可以看出,開發在實現設計稿時,通常是按照行高來寫的。


          因此,表格行高=文字行高+上下間距。其中,文字行高可以設定為字號的1.2~1.8倍,上下間距可以設定為字號的1~1.5倍。


          行高影響每行信息的易讀性。除了上述的做法外,還有以下2種做法,來保證各場景下獲取信息的效率與易讀性。


          做法1:不同分辨率使用不同行高


          設計兩套不同的行高,在大分辨率下顯示較高的行高,給數據間提供更多呼吸的空間;在小分辨率下顯示較小的行高,使一屏內可以看到更多的行高。Gmail就是這樣設計的,如下圖所示:



          做法2:自定義行高


          自定義行高為興奮需求,可以提高用戶的用戶體驗。所以我們可以視表格的具體情況來設計設置行高的形式,可以放置在設置按鈕里,也可以在外部按鈕較少的情況下展示出來。



          2.5底欄設計


          最后是表格的底欄,底欄也是不可缺少的一部分,承載的作用主要是告訴用戶數據條數以及當前位置。分頁的設計是根據不同的場景進行選擇最優的設計方案。在不需要定點跳轉的場景,建議建議刪除跳頁,刪除多于的功能,使頁面簡潔、清爽。

                                    

          3、其他設計細節


          3.1 空白單元格的處理


          表格中經常會出現空數據或無數據的情況,留白處理會給用戶造成一定的困惑和誤解,是系統沒有加載出來嗎?明智的做法,是無數據時用「-」來填充顯示,數據為零時與上下數據單位、小數點相同的0來顯示。

           

          3.2減少圖形元素的使用


          盡量減少視覺符號的使用,因為視覺符號可能會使你的用戶界面復雜,產生難以理解的內容。去除不必要的視覺干擾,例如不必要的圖標、無規律的色彩等。



          3.3省略 (氣泡展示位置)


          當列表中數據過長時,我們需要根據屏幕寬度調整列表展示方式,超過列表默認寬度的內容可以省略,通常用...表示,鼠標移入后出現氣泡展示全部內容。


          位置:建議展示在上方,因為我們的閱讀順序是從上到下,鼠標向下移動時不會被上面的氣泡遮擋住。氣泡面積不宜過大,根據屏幕尺寸控制在一定比例,一版不超過內容區的四分之一,展示不下的內容可以在氣泡中增加滾動條。




          4、后記


          感謝閱讀!本文結合了實際項目經驗對表格設計做了一次總結,在具體項目中,你可能需要根據產品特性和用戶需求進行調整。如果你還有什么好的想法和建議,可以在評論里留言討論。

          文章來源:站酷     作者:Hi_Nick 

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

          2020-2021 設計趨勢ISUX報告 · 用戶體驗篇

          ui設計分享達人

          It is ultra experience



          ISUX Design Trend Report

          前言

          ——————————

          身為用戶體驗設計師,無時無刻不被世界上的新事物沖刷著認知——互聯網紅利下降帶來變化莫測的商業動向、循著摩爾定律野蠻生長日新月異的新技術、各類亞文化群體催生出多元復雜的圈層文化、腦洞口味越來越獨特的年輕人,甚至眼下席卷全球的黑天鵝事件......


          任何一個新事物的悄悄冒頭,都有可能在未知的將來影響著用戶體驗設計師。我們能做的是,在起初感受到微微震幅時,便沿著震感逐步尋找源頭,并思考未來的發展走向。趕在變化降臨前先擁抱變化。


          本文通過研究近一兩年科技、社會文化以及自身用戶體驗領域的變化,從用戶體驗領域關鍵的用戶、媒介(設備與應用)、交互行為、信息與場景的五個角度出發,探索用戶體驗設計未來的趨勢,希望能帶來啟發。


          隨著人工時代到來,過去機械的單向交互方式逐漸被打破,機器漸漸演化成了會主動“觀察”真實場景,“感受”用戶情感,預判用戶意圖并自動完成任務的貼心小棉襖。機器如何為人們提供更智能便捷的服務,未來還有非常大的想象空間。 





          隨著人工時代到來,過去機械的單向交互方式逐漸被打破,機器漸漸演化成了會主動“觀察”真實場景,“感受”用戶情感,預判用戶意圖并自動完成任務的貼心小棉襖。機器如何為人們提供更智能便捷的服務,未來還有非常大的想象空間。



          1-1

          ——————————

          基于真實場景推理用戶意圖

          隨著AI技術的發展,智能設備可以越來越無縫地將數字世界和物理世界嫁接起來,主動感知用戶所處情境并智能提供相應服務。


          在2019的 Google I/O 大會上,Google Lens 展示的AR點菜功能可以智能識別用戶掃描的菜單并將美食網站上的相關推薦直接呈現在屏幕上。


          當用 Google Lens 識別到小票信息時,可快速提取小票上的金額,且可自動彈起計算器快速幫助用戶計算人均消費,節省人工計算的時間成本。


          隨著信息入口從數字空間延伸到周圍的物理空間中,未來萬物皆可為用戶體驗的媒介,設計師未來在設計的時候需要注意:


          尋找適合的打通真實世界的切入點:在陌生語言、信息復雜或者難以處理等苛刻的環境下,充分發揮智能設備對信息智能讀取、批量識別與翻譯等強大能力,幫助用戶完成任務;


          將用戶旅程的上下游串聯:根據生活常識和經驗預判用戶行為目的,前置推薦服務;


          更加系統細心地考量干擾因素:真實場景是動態變化的,需要更全方位考慮光線的強弱、多源的噪音、實體的可視性、人員和事件的打斷等因素。



          1-2

          ——————————

          任務自動化,簡化用戶旅程


          為了完成一項任務,用戶往往需要借助多個應用來回切換配合,使用起來瑣碎麻煩。如今應用越做越強大也越復雜,過去僅僅解決單一場景的解決方案不再適應于用戶對于完成任務的訴求。


          Google Assistant 的新能力 Duplex on the web 可以通過自動跨應用任務處理來簡化用戶旅程。只需要用戶發出語音指令“預定一輛去某地的車”,助手便可自動跨郵件、日歷、付款等應用調取信息、自動根據使用習慣做選擇,并自動填寫信息,而用戶全程需要的只是在關鍵節點輕敲“確認”即可。


          2019年隨著 iOS 13 的更新,“快捷指令”推出了“自動化”能力,用戶通過“if...then...”語法便可為自己的App設計一套程序,實現如:“當我回到公司時提醒我打卡”、“每天早上10點給我的女朋友發送一條表白短信”等能力,將不相關的場景動作串聯字一起自動化執行,大大節省人工操作成本。


          提升使用效率是用戶體驗設計孜孜不倦努力的方向之一。在利用新技術進一步簡化用戶旅程時,設計師可以充分利用以下因素:


          借助語音輸入:比起界面觸控操作,語音交互的直達性可以“穿透”復雜界面,讓設備第一時間明確用戶目標;


          基于用戶行為形成習慣記憶:對用戶長期重復的行為做分析處理,構建用戶習慣模型并主動提供服務;


          適當考慮專家級用戶:隨著部分用戶的智能設備使用水平越來越高,可以考慮為專家用戶提供自定義操作腳本,滿足其自身的獨特需求。



          1-3

          ——————————

          基于情感感知,主動理解用戶需求


          隨著人臉識別、表情識別、肢體跟蹤等技術的提升,機器逐漸學會感性語言,主動感知用戶內在情感和心理需求。


          2019年1月的CES展上起亞亮相的互動式“情感駕駛空間”技術,可通過傳感器讀取用戶的面部表情、心率等反應,調整駕駛空間內的燈光、影片類型、音樂風格等,舒緩艙內乘客心情,由此提供更人性化的出行體驗。

          用戶總是會期待更貼心的服務,設計師未來對同理心的情感嗅覺更加敏銳:


          利用感性線索定位用戶情緒:需要通過面部表情、特殊時間節點或者識別到的關鍵詞,對用戶情緒進行理解和定位,判斷用戶情感理解用戶內心訴求是自由探索、趣味娛樂、或者靜謐修行并提供符合用戶當下心境的服務。


          綜合使用感性元素進行設計:通過使用線條、色彩、聲音和動作等傳達并喚起相對應的情感,提供更加人性化的體驗。


          小結

          更智能的服務提供方式會讓人們生活擁有更多可能性,但一旦火候把握不得當,可能就會造成對人們生活的野蠻入侵。關于如何讓科技更好造福于人們,早在上個世紀,施樂帕克研究中心提出了寧靜技術(Calm Technology)的愿景,認為影響最深遠的技術應該是隱匿不見的,它們如纖維般融入日常生活,絲絲入扣,直至不可分辨。


          隨著科技的發展,設計師對新技術不應是不加克制地應用,而應該潤物細無聲般地提供服務,幫助人們從繁雜喧囂的數字世界中解脫出來,將寶貴的注意力資源投放在讓生活更美好的事物上。



          回顧人類和機器的交流語言,從命令行界面、圖形用戶界面到自然用戶界面,人機交互方式越來越貼合人與人之間更自然的交流方式,其背后是心智模型與實現模型的高度擬合的趨勢。


          在自然用戶界面中,為滿足新形態智能硬件對新接口的需求,以及人們對更豐富強大的交互方式的自然訴求,越來越多的自然用戶界面被開發出來。語音交互和隔空手勢交互便是近幾年迅速發展并落地的兩種交互方式。



          2-1

          ——————————

          隔空手勢交互:更自由、更靈動


          為了讓機器更好地讀懂用戶的身體語言,能夠感知深度信息的攝像頭走進了日常手機。2019年國內外手機廠商的發布大會上,LG 手機 G8 ThinQ 以及華為發布 Mate 30 系列推出的隔空手勢,可實現一些簡單的諸如滑動、切歌、截屏等效果。



          除此以外,隔空手勢支持更加細微的手勢,如旋轉、揉搓等,可以更直觀、更靈活的方式操控界面,讓用戶獲得一種像魔術師用意念控制事物運作的快感。



          對于隔空手勢操作網上的言論褒貶不一,其中爭議性最大的就是隔空手勢宛如“殺雞用牛刀”,明明可以用更加精準的手勢觸控,為什么還要用看似很酷炫其實精準度更低的隔空手勢操作?


          隔空手勢并不是要替代觸控手勢成為主流的人機交互方式,更多是對情境式障礙場景的補充。在某些場景下,用戶使用設備的條件可能是充滿干擾的。想想看當你邊看手機食譜邊炒菜的時候、邊煲劇邊剝小龍蝦的時候、疫情期間出門佩戴橡膠手套無法正常觸控手機屏幕時.....隔空手勢是不是特別好用?


          每個人在特殊的場景下都有可能面臨感官障礙,未來的設計也應該更多地考慮情境式障礙的場景,讓用戶無論身處何時何地依舊能一如既往無障礙地使用設備。




          2-2

          ——————————

          語音交互:更精準、更好玩

          語音交互作為更趨近于人與人之間最自然的交流方式,近些年有許多發展的突破點。


          在發展主線上,語音交互趨向更自然、更人性化、更個性化。過去反人類的一些溝通方式慢慢被“調教”。此外,多人會話場景下的技術方案日漸增多。


          2019的 Google I/O 大會展示了一個視頻片段,視頻中的兩位嘉賓相繼吐槽,經常出現針鋒相對難以聽清的時候,這時用戶可以調節音源音量選擇性增強自己關注的人物聲音,讓另一個人“靜音”。


            滑動選擇音源


          此外,語音交互除了在智能音箱領域廣泛應用以外,也逐漸應用在廣告等更多的傳播媒介中,刷新人們日常使用體驗。2020年2月索尼提交了一項廣告播放新專利。當用戶在觀看電視節目時,如果出現廣告,只要站起來大喊廣告中對應品牌的名字,便可直接跳過這個廣告。


          設計師在語音交互場景下,需要留意以下幾個比較容易被忽視的因素:


          用戶語音交互習慣培養:如今還處于培養用戶語音交互使用習慣階段,設計師需要更多地考慮應用的語音交互規則如何才能更趨近于人們日常的溝通習慣,并進一步為人們的社會習俗所接納。


          真實場景下的多人音源:在現實情境中, 在多人對話場景下將面臨音源不清、穿插停頓、噪音過多等影響體驗的情況,由于計算機聽覺分析能力開始從單人音源拓寬到了多人音源,多人對話解決方案上還有很大想象空間。


          改變傳統的視聽體驗:在使用場景上,語音交互接口也將逐漸運用到更多的媒介上,更全面地刷新用戶體驗。



          小結

          人類擁有雙手、眼睛、耳朵和發聲的嘴巴,但是并不總是在每個使用場景下都能自如地使用:在安靜的自習室下聲音收到限制,在駕駛場景下注意力受到限制,在雙手拎著東西場景下雙手受到限制......但目前許多產品設計都建立在用戶能完整使用感官功能這一理想化的基礎上。


          未來的發展趨勢傾向于將視、聽、觸、嗅等多通道信息完美整合起來,綜合使用多種輸入通道和輸出通道,根據用戶使用場景用最恰當的方式傳遞服務,滿足用戶多方位的需求。




          盡管喬布斯曾斷言3.5英寸是手機的黃金尺寸,但作為人們日常內容消費與娛樂的窗口,手機屏幕毫無疑問地變得越來越大,甚至超出傳統物理限制。人們對大屏享受的追求與設備攜帶便捷性之間的矛盾由來已久,硬件形態的變化對舊有的用戶體驗設計思路帶來的新的挑戰。


          3-1

          ——————————

          大屏幕:單手持握新挑戰

          屏幕橫縱比越來越大,而人類的手部具有先天限制,曾經慣用的界面布局方式在高橫縱比的屏幕上可能無法被大拇指無障礙全覆蓋,使得越來越多的設計更加重視利用移動屏幕下半部分。


          操作與信息進一步下移


          高德地圖、蘋果地圖的搜索框下移,方便單手操作用戶快速激活輸入框;


          影視資訊平臺IMDB強化底部標簽欄功能,雙擊“搜索”tab即可激活輸入框,無須艱難地觸摸頂部。


          即時戰斗類手游皇室戰爭的說明卡片主要展示在下半部分,方便用戶進行卡片上的相關操作。



          底部導航被賦予更多能力

          Pocket的底部標簽欄現在兼任漢堡菜單功能,在激活狀態下再次點擊主頁icon可選擇主頁上須展示的內容。


          利用下滑手勢代替點擊

          Snapchat的許多表示前后進退關系的頁面都不是”返回“按鈕,而是向下箭頭,用戶可下滑退出當前頁面。







          3-2

          ——————————

          折疊屏:新形態的交互方式

          為了解決設備形態和人類手部先天限制之間的矛盾,折疊屏誕生瀏覽并顛覆舊有的界面設計方式。


          更靈活的信息布局


          過去在單屏設計下,考慮到用戶注意力由上到下縱向衰減,因此信息布局更多是按照優先級從上往下排序。而折疊屏中,屏幕展開后便可以開辟出更大的可利用空間,將次級頁面或者較為重要的內容曝光在第二屏,對信息的布局將帶來全新的變化。設計師為保證大小屏下順暢的閱讀體驗,需要對信息模塊在不同空間布局下的流動性有更強的把控能力。


          更便捷的多任務操作


          在過去的單屏體驗中,用戶只能將注意力完全集中在當前的界面中,一次只做一件事。但在實際生活中,用戶面臨的情景往往是主線任務和支線任務的頻繁交錯,并且根據會任務不同的性質自由調動自己的注意力重心,如邊看視頻邊聊天、邊看直播邊逛街等等。在折疊屏中,設計師可以探索更多主線和支線交錯進行的場景,利用折疊屏帶來的更大的屏幕空間,可以讓用戶在不離開主線場景的基礎上進行支線任務的處理,大大節約了在不同App上來回切換的操作成本。



          更直觀的拖拽交互


          此外,隨著多任務處理越來越廣泛使用,拖拽交互將成為重要的交互模式之一。文本、表情包、圖片、視頻等交互對象,不再需要經過復雜的分享轉發流程才能在不同App中流轉,通過拖拽的方式可以更直觀地進行交互。




          雙面屏互動玩法


          外折疊屏在折疊狀態下可轉為雙面屏,等于是給用戶增加多一個觀看視角。例如華為 Mate X 的鏡像拍攝可以讓被拍攝者即時獲知自己的鏡頭影像是否滿意,這一拍女友神器有望成為直男拍攝終結者。在未來更多的多人觀看和互動玩法將被開拓出來。


           華為Mate X 的鏡像拍攝


          未來隨著5G通訊技術的成長,越來越多的設備可以同時加入物聯網,人們的生活將被各種智能設備圍繞,設計師需要參與更多屏幕外的設計,讓不同設備串聯在一起協同合作,讓用戶能更加自在地享受科技的便利。



          席卷全球的新冠疫情讓數十億用戶乖乖待在家里。過去需要花費大量精力去教育的用戶使用習慣因為疫情紛紛轉變。云購物、云蹦迪、云賞櫻、云監工......人們足不出戶便可還原許多線下場景。隨著用戶線上和線下生活的界限進一步模糊,用戶對于應用的效率和情感訴求也發生了變化。



          4-1

          ——————————

          更關注效率導向

          疫情讓遠程辦公學習需求劇增,多人協作場景越來越頻繁,許多企業隨之升級了電話、視頻會議、文檔制作等多人協作效率軟件。過去僅僅考慮少人場景協作的方式不適用,設計師需要比以往更多地考慮多人協作場景下,如何對海量密集的信息進行分析處理和展示。


          在學習方式上,由于線下學習轉移至線上,學生群體對于娛樂向軟件也有了效率訴求。為了順應用戶訴求變化,2020年5月QQ推出學習模式,屏蔽娛樂性的內容推送,讓學生更專注在學習上。



          4-2

          ————————————

          更注重緩解社交疏離感


          除了效率訴求急劇提升以外,隨著長時間的線上學習與辦公所產生社交疏離感和缺失感,人們對于線上學習工作的情感化訴求也進一步增強。


          2020年推出的plagi遠程辦公軟件支持設置每個人的avartar形象,讓大家在遠程辦公時依舊能時刻感受到彼此的存在。在完成任務時還可以放鞭炮慶祝,讓員工能感受到親密無間的線上辦公體驗。


          設計師需要更加關注如何讓線上生活進一步與現實生活圈和時間線接軌,通過拓展真實社交下的更多伴生行為讓線上也能還原線下的真實場景細節和互動體驗,以彌補用戶對真實社交的缺失感。



          4-3

          ——————————

          加速人和信息的強連接


          疫情的發生加速了人與信息之間的連接。人們越來越習慣將自身的身體資料、心情狀態等信息沉淀在智能設備上。


          為了做好廣大市民群眾的健康監測服務,輔助疫情防控工作,微信和支付寶在2020年年初都上線了健康碼服務,不同顏色的健康碼代表人們不同的健康情況,市民出入特定場所都需初始健康碼。



          隨著人的數據化越來越深入,個人身份信息的線上化在各平臺上將成為更加通用的能力。設計師需要考慮如何更自然更低成本地將線下動態變化的資料信息線上化,更有效地對用戶信息進行加工處理,以及記憶用戶的使用習慣和行為,以便幫助用戶更地完成任務。


          疫情的出現加速了線下生活線上化,短短時間內我們看到日常習以為常的應用為響應疫情下的特殊需求紛紛出現改造,釘釘、QQ群被改造成上網課、批改作業的地方,醫療衛生公眾號開辟了實時疫情播報與辟謠通道,無接觸設計和服務需求異常突出......這也啟發了設計師需要保持對突發事件的敏感力以及應急能力,在日常生活中留心思考,為日后突發事件提供充足的場景支撐。




          在洶涌的資本語境下,互聯網設計師裹挾在商業驅動的結果導向中狂奔,對設計的倫理和責任鮮有發聲,但伴隨著互聯網紅利退潮,發展放緩,狂奔之下的人本問題也逐漸浮出水面。在大趨勢下,UX設計師需要培養自身設計對倫理和責任的敏感度,在滿足商業目的外,重拾節操,為多群體,為大社會設計,更加注重“以人為本”。




          5-1

          ——————————

          更包容性的設計

          包容性設計師指在做設計產品的時候,考慮到各類用戶的訴求,輸出具有包容性的設計方案。包容性設計依舊是2020年設計主題之一,伴隨著互聯網產品全球化,在通用性和包容性上也提出了新的要求。




          為身障人士設計


          三星在2019年針對東南亞市場推出了一款讓聾盲人士和健全人實時交流的app:Good Vibes,盲聾人輕擊屏幕輸入摩斯電碼,預先連線好的另一臺手機就會顯示從盲聾人發來的短信。健全人用普通的文字輸入回復,在盲聾人這一端就會翻譯成摩斯電碼、以手機振動的方式讀出短信內容。

             GOOD VIBES宣傳視頻


          餓了么:在餓了么送貨騎手中,約8%受色盲色弱的困擾(全國男性群體中紅綠色盲色弱占比達8%-9%,餓了么騎手男性占比90%),為此餓了么設計團隊在2019年對app的進行了重新設計,包括使用WCAG無障礙色彩對比度,以及無障礙色盤,以及調整字階,使用輔助圖形等設計手段來解決部分騎手在送貨途中使用APP的痛點問題。


          餓了么UED:《為騎士創造平等 — 配送 App 的包容性設計》



          跨年齡段設計


          谷歌助手禮貌功能 ( Google Pretty Please ) :開啟谷歌助手禮貌功能后,如果使用者在下達指令的語句中包括“Please”,谷歌助手會對禮貌的請求表示感謝,以此培養孩子的禮貌言行。

          Google Pretty Please功能宣傳



          Swift Playground:當10后小學生VITA君的編程課被“可敬的發量”刷滿彈幕時,Swift playgrounds功不可沒,這款為兒童新手學習編程的軟件,用趣味的游戲方式為4歲以上低齡用戶提供了一個學習編程的低門檻平臺。



          為性別平等而設計


          蘋果emoji回看歷年蘋果emoji的更新,從膚色平等,到性別、性向平等,再到為殘疾人設計,2020年再為跨性別者增加新表情,性別平等依舊是包容性設計中重要一環。



          Airbnb插畫:愛彼迎在插畫系統中,也為不同膚色,不同職業,不同性別,以及身障人士進行了人物的繪制。






          5-2

          ——————————

          關注用戶隱私

          2019是互聯網科技隱私問題沉浮的一年,國外有Facebook因泄露隱私收到史上最大罰單,國內則打響了“人臉識別第一案”?;\罩在隱私信任危機下,個人信息和數據立法突飛猛進,美國推動《加州消費者隱私法案》,國內也將在2020年出臺《個人信息保護法》和《數據安全法》。


          MIUI12推出隱匿面具功能


          Android開放生態導致的權限隱私問題一直被用戶所詬病,某些APP存在用戶不授權就無法使用情況,針對這一情況,MIUI12推出了隱匿面具功能。當用戶在開啟某些APP要求授權權限時,可以選擇空白通行證進行授權,從而保護用戶真實信息。


             在MIUI12的更新中,還推出了照明彈、攔截網兩項隱私保護功能


          iOS 14剪貼板提醒


          在iOS 14的更新中,保護用戶隱私方面進一步升級。

          其中剪貼板提醒設計很貼心,當用戶打開應用,如果該應用讀取了你剪貼板的內容,會在系統頂部彈出提示,用戶能在第一時間意識到剪貼板內容被讀取,幫助用戶更好的保護自己的隱私內容。




          5-3

          ——————————

          健康的數碼生活方式


          科技的發展是一把雙刃劍,互聯網產品的發展給用戶帶來便捷和沉浸體驗的同時,也使得用戶沉溺于科技所帶來的惰性和投食之下,逐漸喪失了對真實生活的把控權,被科技綁架。


          數字福祉(digital wellbeing)近年被頻頻提起,指科技產品需要權衡好數碼產品和真實生活之間的平衡,防止數碼產品過渡分散用戶的注意力而影響生活質量。


          Android Q 專注模式  Google Android Q Focus Mode


          Android Q的更新加入了專注模式,用戶在專注模式下,可以在系統層面快捷地關閉使你分心的應用,讓你聚焦于更重要的事情。



          防沉迷系統升級


          推薦技術的進步,產品體驗的升級,給用戶帶來了更合胃口的菜式和沉浸體驗,但同時也被冠上了“電子海洛因”的稱號。游戲或者內容產品的防沉迷系統依舊會是數字福祉下不可避免的趨勢。


          王者榮耀在2020年升級防沉迷系統,對青少年的娛樂時間和點券充值的限制進行了進一步升級。承接話。B站在2019年推出青少年模式,在該模式下,使用時長和內容推薦等做了定制化處理。






          2020年的UI設計趨勢,一方面是對往年風格的衍變和細化,另一方面,在扁平克制的界面風格盛行后,設計師們向往更自由、更突破的視覺表達。



          6-1

          ——————————

          深色模式


          2019年iOS 13深色模式姍姍來遲,緊接著大廠APP相繼推出此功能。在2020年,深色模式會繼續普及外,也會在可視性和實現成本方面有更多細節打磨和研究。





          6-2

          ——————————

          新擬態

          設計趨勢的發展是螺旋式上升的,在扁平化設計流行之后,對物體的擬真再一次回歸設計圈,新擬態以一種對舊擬物風格的再創新,重新流行起來。


          新擬物風格(Neumorphism)緣起于設計師Alexander Plyuto發布在dribbble的一組作品,以投影重新對扁平界面進行了塑造,模仿出類似浮雕的視覺效果,感受耳目一新,引起大量設計師相盡模仿。


          新擬態的實用性和可落地性有待商榷,但是作為一種新的風格受到設計師擁躉,也不失為下一波風潮到來前的靈感繆斯。



          WWDC2020對mac OS的更新也重新定義了新擬態設計語言,在mac OS新系統Big Sur中,圖標的設計增添了輕微的漸變、投影、高光,以此來營造圖標內元素之間的縱深關系。




          6-3

          ——————————

          多彩配色


          在扁平簡潔UI風格盛行之后,豐富的色彩依舊是設計趨勢之一,大面積色塊,碰撞配色,帶來更具沖擊感的視覺體驗。





          6-4

          ——————————

          字體裝飾化


          UI界面逐漸扁平,色塊圖標弱化,為突出頁面重心和內容,iOS 11在界面標題上使用更大的字號,更粗的字重。近年在大標題的風格衍變下,文字在傳達信息外,也開始有了裝飾性作用,采用超大字體,成為頁面排版美化的一部分。





          6-5

          ————————

          更大圓角

          大圓角的風格會繼續延續,相較以往,卡片的處理圓角會更大,隨之帶來的是多的留白處理,結合大字號,帶來更透氣通透的視覺感受。



          Mac OS Big Sur的界面相對舊版本采用了更大的圓角;系統圖標的設計統一成圓角矩形。





          6-6

          ——————————

          更豐富的插圖


          UI插圖的豐富體現在樣式和內容上,樣式上開始3D化,內容上更注重插圖敘事的表達。


          3D插圖


          3D圖形往年更多運用在動態影像或運營類設計中,隨著3D的普及運用,UI插圖也會迎來3D化,給用戶帶來更立體,更新鮮的視覺感受。




          講求敘事表意


          相較于往年追求形式的UI插圖,新趨勢下的插圖更講求功能性,每一副插圖都承載一定的作用——傳達功能信息或透傳品牌情感;同時插圖更講求畫面表意和情節,給用戶敘事性的視覺體驗,增進用戶和產品之間的情感聯系。




          插圖組件化


          插畫的流行,隨之而來的是成本的水漲船高——一套系列插圖為保持風格統一,往往由唯一設計師繪制,同時為兼容各類場景,設計師往往要繪制多張。


          為解決插圖的成本和效率,插圖開始以組件化的方式進行繪制——插圖設計師將插畫進行拆分繪制——不同人物,不同場景,不同物件等,再通過組件化的拼接合成,使用組件的設計師可以根據需求場景自由組合,也避免了風格不統一問題。


          設計師Pablo Stanley將日常繪制的插畫制成一套矢量插圖組件庫,將人物分為:半身、全身和坐姿3大類。通過不同表情、發型和服裝可自由搭配出近60萬種組合。


          Pablo Stanley人物插畫系統




          6-7

          ————————

          多維度動畫表現


          新趨勢下,動畫一方面回溯復古線描手繪風格,另一方面追求更三維的體驗,同時幀率進一步提升,追求更流暢的視覺感受。


          手繪動畫


          手繪插圖是往年的熱門,其隨性自然的筆觸,能給用戶帶來親切的感受,在新的趨勢下,動畫的加入賦予手繪插圖一份靈性和趣味。


          3D運動


          Google Material Design通過卡片投影層級和二維動畫規律,賦予扁平界面Z軸的縱深感。隨著3D的普及流行,新趨勢下的界面,界面的運動從二維走向三維,表現出3D場景下透視感。



          高幀率動畫


          高幀率影視從線下電影院移步到線上流媒體,手機高幀率屏幕從90Hz到120Hz逐步升級,用戶對畫面流暢的定義一再刷新,UI動畫的幀率升級也會是新的一輪趨勢。


          Telegram的表情采用了高幀率動畫,給用戶更流暢的視覺感受。








          體驗的持續升級,產品的高速迭代,對UX設計師的設計師效率提出了更高的要求。的設計方式是一個永恒的趨勢。




          7-1

          ——————————

          從本地文件到云端協作


          傳統的文件交接方式效率低下,導致設計師之間信息不對稱,最終影響產品的一致性體驗。近些年在線設計協同工具發展迅速,從UI設計、 設計交付以及組件協同等環節上給設計師提供更加實時的協作體驗,獲得大量UX設計師的簇擁。在2019 uxtool的設計工具調研中,在線設計協同工具佼佼者figma以其協作和性能優勢,大有追趕sketch之勢。


          隨著團隊對設計效率要求的提高,設計文檔從本地走向云端協作是不可逆趨勢。不過設計工具的迭代是需要成本的,尤其在大型設計團隊,設計工具需要渡過陣痛期來完成迭代,進而提升設計效率和體驗一致性。



          7-2

          ——————————

          科學有效的設計系統


          UX的發展,從早期的靜態規范到當下的動態設計系統,是為解決產品迭代增速后帶來的設計效率和產品體驗問題。商業驅動下的產品迭代速度有增無減,設計系統依舊會是未來幾年的設計趨勢之一。


          這里說的設計系統不是廣義上的設計系統,而是在互聯網設計的發展中,對組件化設計逐步迭代升華的一套設計協作方法:


          “設計系統(Design systems)是一組為了共同目標而服務的內在相互聯系的設計模式和多人協同執行的方法?!保ㄒ浴禗esign systems》,Alla Kholmatova,C7210翻譯)。


          設計系統歷程衍變


          組件化的發展歷經規范文檔到UI組件,再到設計系統,形態從最初對設計一致性的指導規范,到對產品研發流程的規范,以及產品設計價值觀的輸出,當下的設計系統以集大成者形式影響整個產品的設計形態。


          設計系統的結構見下圖:



          設計系統的求同存異


          設計系統并非一成不變的,他是一個動態進化的系統,會根據團隊性質、產品特性在內容上有所區分——比如大團隊更應該大而全,小團隊更傾向小而精;成熟產品的設計系統更傾向于打造完整閉環的合作流程機制,新產品的設計系統應該以小為始,快速迭代……


          隨著產品的垂直化,細分化,設計系統的趨勢會是在趨勢大同之下找到適合產品和團隊自身的形態和節奏。


          Material Design是一個包含了指導規范、組件,以及設計開發工具的自適應性設計系統。


          它作為平臺型性設計系統,更為大而全的規范了整個生態系統的設計風格,以及提供工具讓研發者能快速產出符合規范的產品。


            Google生態龐大繁雜,Material Design更為全面


          Ant Design作為一個為to B產品提供解決方案的平臺,更多從設計可用性和完整性考慮設計系統的搭建。


          Ant Design通過模塊化解決方案,降低冗余的生產成本,讓設計者專注于更好的用戶體驗


          QQ作為一款面向95后的2C社交產品,其設計系統Q語言從風格調性上對設計進行規范,同時給予設計師一定的自由度;也考慮到QQ內兼顧多個產品,以及界面主題樣式,對基礎組件的使用場景和代碼進行了規范,方便設計和開發敏捷開發。


          Q語言,給予產品的自由調性之外,也針對主題和基礎組件進行了規范


          每個產品和團隊都有自身的特征,設計系統的建設也應該有的放矢,沒有可照搬的標準答案,在大方向下找到適合自身的解決方案才是的可行之道,將效率最大化。


          科學有效的優化迭代


          組件是設計系統中的重要組成部分,但是以往靜態的、孤立的協作方式使得組件的更新迭代滯后和阻塞。隨著設計系統的發展,設計師組件化思維的普及,組件的更新需要更科學的方式進行管理。


          Figma在2019年推出的Design System Analytics功能,組件設計師可以借此查看組件的使用情況,包括引用次數,解組次數等,并可以生成組件使用情況的曲線趨勢圖,以數據的形式,科學地推動組件的優化迭代。


           1.選擇分析的時間段;2.組件使用的次數曲線圖;3.團隊使用情況;4.所有組件使用情況



          后記

          未來的用戶體驗會出現什么新趨勢?人工智能等算法的發展、5G技術普及、新的智能設備形態、新的信息處理技術、新一代用戶的喜好和口味......這些往后或將影響用戶體驗發展的走向。未來用戶對體驗的要求只會越來越高。


          用戶體驗設計師需要了解更多的技術動向,但安身立命之本還是讓用戶真正受益:立足于用戶真實使用場景,在理性價值層面上,打造可用、易用、的設計;在感性需求層上賦予情感上的愉悅性,在反思層面賦予意義價值。




          文章來源:站酷    作者:百度MEUX

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



          UX TRENDS | 注重隱私的用戶體驗設計

          ui設計分享達人

          用戶隱私安全在產品設計中是很重要的一個環節,本文從用戶體驗角度切入,從匿名模式、減少永久性和減少公開性三個方面展開分析。



          我們先看?組來??優的2019年6?的調研數據:70%的美國?認為,與5年前相?個?信息變得更不安全。尤其是?學歷?收?群體。由此可??戶對個?信息數據的隱私擔憂?以往更甚。



          ?戶隱私安全很重要,涉及的范圍和?度也很多。本次的分析從?戶體驗?度切?,涉及如下三個??:

          1. Incognito Mode匿名模式;

          2. Reducing Permanence減少永久性;

          3. Reducing Publicity減少公開性。



          01 匿名模式


          下圖是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切換,從交互體驗上來說有如下?個特點:

          1. 統?在右上?;

          2. 可以便捷切換?匿名模式,反過來也很容易切回登陸狀態;

          3. 匿名模式的狀態提示,例如YouTube 在匿名模式下在界?底部有?字提示“您 當前處于匿名模式”。


          匿名模式不是最近才流?的功能,最早提供隱匿模式的是蘋果safari瀏覽器,早在 2005年就?持了匿名模式。Chrome瀏覽器在2008年就開始?持此模式。雖然由來已久,為什么到了2020年,匿名模式依然是國外互聯???趨勢呢?


          我們看?組數據:

          這是來?DuckDuckGo 2019年9?的調研(DuckDuckGo是美國的?款不記錄?戶?為保護?戶隱私的搜索引擎)。樣本來?美國、英國、德國和澳?利亞的成年??戶,共計3,411?的調研得出。各國?戶對使?搜索引擎的個?隱私安全?常在意(是否搜集個?的數據和記錄搜索?為)。

          2020年5?DuckDuckGo?均搜索次數為6200萬。對?看2019年11?底?均搜索次數4900萬,2018年10?是2900萬。

          最近?年的持續活躍度?幅增?證明了不記錄個?隱私的搜素引擎越來越受到?戶的?睞。

          國內,頭條、UC瀏覽器在搜索框輸?狀態也提供了“?痕瀏覽”??。

          不僅是搜索引擎領域,保護?戶隱私也成為Facebook最重要的戰略?向之?。Facebook CEO Mark Zuckerberg在2019年 F8開發者?會上喊出“THE FUTURE IS PRIVATE”。2019年3?Mark Zuckerberg發?,主題就是《聚焦于保護隱私的社交?絡》。



          02 減少永久性


          我們先看國外社交媒體Stories(?故事)產品形態的流?。

          ?們總是對于所分享的內容永遠記錄在?上感到擔憂。Stories24?時消失緩解了?們的隱私顧慮,這讓?戶更安?地?然分享。

          Stories由Snapchat?創,由 Facebook發揚光?。早在2019年4?,Facebook+Messenger Stories, Instagram Stories?活?戶數就突破5億。 2020年2-3?LinkedIn,Twitter也先后宣布將上線類似功能。



          03 減少公開性


          來??優的調研報告:41%的美國?經歷過?絡騷擾,最常?的就是在社交媒體上。23%的?戶最近經歷的?絡騷擾來?評論區的評論內容。27%的?戶經歷?絡騷擾后決定不再發布任何內容。

          我們以限定評論互動的公開性為例:

          2020年5?Twitter上線了新的評論功能,可以限定誰可以回復帖?的功能,提供了三種選項:誰都可以評論,只有被關注者可以評論,只有被提及者可以評論三種公開度的限定。

          Instagram也在測試“評論限制”新功能,批量屏蔽/限制評論。?前已經上線的?個例?:?戶(評論發布者)如果發布的評論含有攻擊性敏感詞,發布前伴有提示,提醒評論含有攻擊性敏感詞是否真的要發布。


          注重隱私提供僅好友可?/僅??可?/僅作者可?/等多重維度的隱私設定有助于?戶更安?地參與互動。

          另外?個例?是付費頻道會員:付費頻道會員-限定頻道的公開性讓內容創作者減輕隱私顧慮不僅能獲得?告收?,也能得到來?會員、會費的收?,形成“忠實粉絲”社區,有助于內容?態的社區化建設。

          我們主要看YouTube的頻道會員案例:

          YouTube有兩種會員模式。?種是YouTube整個平臺的付費會員,去?告,看原創美劇影視,消費?樂,可下載內容的模式。第?種模式是Youtuber個?頻道付費會員,吸引忠實粉絲加?。我想說的就是第?種。


          為什么?V?紅有意愿開通頻道會員?


          除了獲得忠實粉絲收?變現的商業價值以及付費頻道會員可以為忠實粉絲提供各種專屬功能,背后也和?紅?V對個?隱私顧慮有關。

          ?紅?V在完全公開的社交?絡上需要始終保持?夠克制謹慎,避免引起爭議。但在忠實粉絲付費頻道專屬會員群中,?紅?V會減輕隱私顧慮,更加回歸?我。

          ?如在頻道會員中發布更多與個??活相關的內容,表達更多不便在完全公開的社交?絡中的想法和感受等,因為忠實粉絲通常更具包容度,更不容易引起爭議。


          YouTube頻道會員費?可以從三種會費(按?)區間選擇,?持多選:

          1. 低階 Low Levels $0.99~3.99;

          2. 中階 Medium Levels $4.99~14.99;

          3. ?階 High Levels $19.99~49.99;

          頻道會員功能在2018年開始測試,?向粉絲數過10萬的YouTuber開放。



          以上綜述,我們可以說:


          1.匿名模式:

          雖然匿名模式由來已久,但仍然是當前的??基本?戶體驗設計趨勢,尤其是匿名模式的切換便捷性?常重要。


          2.減少永久性:

          Stories?故事24?時消失緩解了?們的隱私顧慮,這讓?戶更安?地?然分享,已經成為國外社交媒體平臺的必備功能,Facebook, Instagram平臺的最主要、最具影響?的功能之?。


          3.減少公開性:

          ?戶總是對在社交媒體平臺發表評論有所顧忌,限定評論的公開性能夠有助于促進?戶發帖表達,其他?戶也可以更安?地參與互動。


          付費頻道會員可以限定頻道的公開性,讓內容創作者減輕隱私顧慮不僅能獲得?告收?,也能得到來?會員會費的收?,形成“忠實粉絲”社區,有助于內容?態的社區化建設。


          從UE?度,我們可以為頻道會員提供專屬身份設計例如專屬徽章,專屬表情等。

          THE FUTURE IS PRIVATE, 注重?戶隱私的體驗設計越來越重要!

          文章來源:站酷    作者:百度MEUX

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



          2020年的8種UI/UX設計趨勢

          ui設計分享達人

          世界和技術正在飛速發展,每年都會影響設計趨勢的走向。作為設計師,我們需要了解現有和即將到來的設計趨勢,不斷學習,改進和擴大我們的知識儲備,以便與時俱進。

          根據研究、經驗和觀察,我們非常仔細地選擇了2020年應該注意的8種UI / UX設計趨勢。那就讓我們開始吧~


          簡介:2020年8種UI / UX設計趨勢


          1. 動畫插圖

          通過對插圖,或者讓插圖進行運動,可以使我們的設計脫穎而出,并使其栩栩如生-增加額外的細節和個性。


          2. 微交互

          微交互完美證明了:著重于細節和發揚這些細節可能會大大改善你的APP的用戶體驗,并將使之更高能/更。


          3. Web和移動界面中的3D圖形

          新的Web瀏覽器功能為3D圖形打開了大門,作為設計師可以在現代Web和移動界面中創造和實現驚人的3D圖形。


          4. 虛擬現實(VR)

          游戲行業常將創新、和新技術帶入產品設計中。


          5. AR技術

          在AR空間中,有無數令人興奮的體驗機會。AR的UI設計將成為2020年的主要趨勢之一,因此,作為設計師,我們應該做好準備,并主動在創建AR體驗時學習新的工具和原理。


          6. 新擬物

          VR / AR技術的增長,以及最流行的設計平臺上顯示的那些優秀的設計告訴我們:設計趨勢可能會使擬物設計在2020年卷土重來,但這一次,它會加入更多現代時尚。


          7. 不對稱布局

          非對稱布局有很大的創造空間,不過創建優秀的非對稱布局需要我們有一定的經驗和時間去處理它。


          8. 講故事

          講故事就是以最佳的信息和創意方式將數據傳輸給用戶。講故事也是一種出色而有效的營銷工具,可以極大地提高你的產品/服務的銷售額。




          1. 動畫插圖

          插畫在產品設計中已經存在了很長時間。最近幾年的發展更是令人矚目。插畫作為非常流行的設計元素,為我們產品的整體UX添加了「自然的感覺」和「人性化的感覺」。插畫也是吸引注意力的焦點:通過對這些插畫進行動效的展示,可以使我們的產品栩栩如生,并使它們脫穎而出-增加更多的細節和個性。

          歡迎來到我們的商店!



          入職動畫



          動效展示的另一個好處是可以吸引用戶的注意力并使用戶與您的產品互動。動畫也是講述您的品牌、產品或服務故事的最有效方法之一。




          2. 微交互

          微交互幾乎存在于每個APP或網站中。每次打開喜歡的APP時,你都會看到它們。例如,Facebook有大量不同的微交互,其中「贊」功能就是一個很好的例子。雖然有時我們甚至不會特意感知到它的存在,因為它非常明顯的、自然的「融合」到用戶界面中去了。但是如果你從界面中刪除它們,你將很快意識到,某些重要的功能丟失了。

          菜單切換關閉動畫



          標簽欄活動動畫



          一般來說,在UI / UX設計中,有時即使很小的更改也可能產生巨大的影響。微交互完美證明了細節和發揚它們可能會大大改善你的APP的整體用戶體驗,并將其置于更高能/更的層次。在每一年,每種新設備都會帶來新的創造全新的微交互的機會,當然,2020年也不例外。


















          3. Web和移動界面中的3D圖形

          3D圖形幾乎無處不在-在電影,視頻游戲,街頭廣告中。3D圖形是幾十年前才被引入到產品設計中的,從那時起,它已經得到了極大到改善,并得到了高速的發展。移動和網絡技術也在快速增長。新的Web瀏覽器功能為3D圖形打開了大門,我們作為設計師可以在現代Web和移動界面中創建和實現炫目的3D圖形。

          3D翻轉菜單



          汽車健康報告用戶界面



          創建3D圖形并將其實現到Web和移動界面中需要一些特定的技能和大量的工作,但是通常結果是非常有意義的。

          Apple AirPods Pro登陸頁面



          3D圖形以一種更具交互性和吸引力的方式來展示產品或服務:例如,可以以360度演示方式查看3D圖形,從而改善了產品的用戶體驗。

          在2020年,更多的品牌將使用3D模型來展示產品或服務,打通線上線下,以模擬現實世界(店內)的購物體驗。



          4. 虛擬現實(VR)

          2019年對于VR來說,是重要的一年。在過去的幾年,我們見證了VR技術的發展和其不可思議的效果,其中大部分是在游戲行業。游戲行業通常會首先在產品設計中引入創新和新技術。研究證明VR也不例外,2019年Oculus Quest推出后,其他行業也嘗試了很多可能性。Facebook首席執行官馬克·扎克伯格(Mark Zuckerberg)已經測試了令人興奮的手部交互功能,并于2020年初正式宣布了Quest的手部跟蹤更新!

          Oculus Quest-手互動功能



          PlayStation虛擬現實網站設計



          索尼和微軟將在2020年發布其新一代游戲機。這些將為虛擬現實技術帶來很多機遇和增長空間。




          5. AR技術

          過去幾年中,我們看到了AR的許多發展和改進。世界領先的科技公司在AR開發方面投入了數百萬美元,我們應該期望在2020年行業會擴展和發展此項技術。甚至蘋果公司也推出了自己的AR工具包ARKIT 3,以幫助設計人員和開發人員構建基于AR的產品。


          ARKit 3 蘋果


          公共交通應用



          Nathan Riley的植物之家AR概念



          在AR空間中,有無數令人興奮的體驗機會。AR的UI設計將成為2020年的主要趨勢之一,因此,作為設計師,我們應該做好準備,并主動在創建AR體驗時學習新的工具和原理。




          6. 新擬物

          一般來說,擬物設計是指以逼真的樣式/方式創建的設計元素,以匹配現實生活中的對象。VR / AR技術的增長和最流行的設計平臺(Dribbble,Behance等)上顯示的設計趨勢顯示:擬物設計可能會在2020年卷土重來,但這一次,它會加入更多現代時尚。同時有了一個略作修改的名稱:“新擬物” (也稱為Neumorphism)。

          Skeuomorph手機銀行的黑暗模式



          音樂播放器



          睡眠周期應用程序



          我們可能已經注意到:「新擬物設計」代表非常詳細和的設計風格。高光,陰影,發光都被運用在設計中去。他們對細節的關注令人非常印象深刻。這已經啟發了來自世界各地的許多設計師,并且很有可能成為2020年最大的UI設計趨勢。




          7. 不對稱布局

          在過去的幾年中,我們注意到產品設計中大量使用不對稱布局?;?nbsp; 傳統/模板 的布局漸漸消失。2020年將依舊如此,因為這一趨勢將繼續保持。正確使用非對稱布局會為我們的設計增加很多特征、動態和個性,或許它們將不再拘泥于模板。


          Limnia高級珠寶首飾網格



          卡琳時裝商店



          創建非對稱布局時、有很大的創造空間。盡管創建成功的非對稱布局需要一定的經驗和時間、將元素隨機放置在網格上當然是不行的)  此外,應謹慎使用和實現它們-因為我們要始終牢記用戶的需求:我們不希望用戶使用我們產品的時候感到困惑。



          8. 講故事

          故事在產品設計中的用戶體驗中扮演著非常重要的角色??赡軙诘卿涰撁嫔辖洺?吹剿鼈?,作為對品牌,產品或新功能的介紹。講故事就是以最佳的信息和創意方式將數據傳輸給用戶。這可以通過「版權(品牌)保護」與「強大而平衡的視覺等級」(印刷術,插圖,高質量照片,大膽的色彩,動畫和交互式元素)混合來實現。

          講故事就是以最佳的信息和創意方式將數據傳輸給用戶。 



          「本周青年實驗室」頁面故事動畫


          講故事確實有助于在品牌和用戶之間建立積極的情感和關系。講故事還可以使您的品牌更令人難忘,并使用戶覺得他們是我們產品或服務的一部分,因此他們希望與他們建立聯系。話雖如此,講故事還是一種出色而有效的營銷工具,可能會大大提高您的產品/服務的銷售額。作為非常成功的工具,講故事將在2020年繼續并擴大。

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

          文章來源:站酷  作者:一個辛普森



          超全面!「無障礙設計」指南

          ui設計分享達人

          你知道嗎?視力,聽力和行動能力完全健康的人,可以輕松地讀寫,可以有效執行多任務,并且始終可以正常工作的人約占總人口的50%?其余的人都是戴著眼鏡或有色盲,手腕或耳朵受傷,生活在嘈雜的環境中或網絡信號質量差,忙碌或忙碌中,閱讀障礙或有注意力障礙等。


          這意味著大約一半的用戶可能很難使用我們的產品或瀏覽我們的網站。因此,我們可能錯過了提高用戶滿意度并擴大受眾范圍的機會。

          不過在設計階段實施一些簡單的原則就可以改善交互和整體用戶體驗,極限設計可以為所有人帶來價值,我們稱之為“包容性設計”。


          什么是包容性設計?包容性設計考慮了盡可能多的人的需求和能力,而不僅僅是針對殘疾人。它認識到我們的需求會隨著時間和環境的變化而變化,因此它會預測錯誤,掙扎和不同的交互方式。它的目的是在問題發生之前解決問題,提高標準并改變良好產品設計的標準。


          包容的用戶界面是善解人意,有意識且可訪問的。年齡,性別,教育程度,財富和能力等不同特征,在不同環境中生活或工作,獲得技術水平不同的不同人群可以舒適地使用它。


          我們將使用POUR作為在用戶與界面之間創建簡單,輕松,快速交互的參考。


          POUR代表

          • 可以理解:數字內容可以輕松地以不同方式進行解釋或處理嗎?

          • 可操作:數字產品能否輕松自如地進行功能和控制?

          • 可以理解:用戶可以理解界面的功能和內部信息嗎?

          • 健壯性:數字產品是否與不同的輔助技術和設備兼容?


          設計師如何提供幫助

          作為設計師,我們當然不能控制以上所有要求都能做到。但是我們應該承認,人們遇到的許多可訪問性問題是由設計階段未做過的決定引起的。因此,設計師有很多機會可以有所作為。僅通過做出更明智的設計決策,我們就可以影響(改進或協助)四種經驗。


          • 視覺體驗:這包括形狀,顏色,對比,文本樣式-產品界面的所有圖形元素。

          • 聽覺體驗:這是指與產品互動時產生的聲音,音量和清晰度。

          • 認知經驗:這描述了用戶花費在解釋界面上的時間,以及使用界面需要多少注意力和精力。

          • 運動體驗:這包括執行任務或與產品交互所需的所有動作和動作。


          通常,可訪問性被認為是對創造力的挑戰;但是,如果我們認為這是一個創造性的挑戰,那么我們會開辟全新的可能性領域。真正好的可訪問性的訣竅不是在功能或功能上進行折衷,也不是在美學上取舍,而是使功能和創意體驗也可以訪問。


          改善視覺體驗


          1.顏色

          對比度對比度是亮度或顏色的差異,使物體從周圍環境中脫穎而出,并可能對清晰度產生顯著影響。高對比度使視覺元素從背景中脫穎而出,更加引人注目。

          專家提示:純粹的#000000黑白色會給眼睛帶來強烈的對比度,甚至會影響閱讀障礙者。這就是為什么我們傾向于避免使用它,而是選擇深灰色的原因。


          亮度

          亮度描述從光源發出的照明水平或從表面反射的光量。明亮的顏色反射更多的光線,并會干擾我們閱讀和處理信息的能力。


          避免在背景或較大表面上使用鮮艷的顏色。請勿在文本上或文本附近使用鮮艷的顏色,以免干擾文本。如果品牌要求特定的高亮度顏色,請嘗試建議使用飽和或較深的顏色。如果你絕對必須使用明亮的顏色,則應將其用于突出顯示動作的方法最小化,并將其與較深的色相搭配以達到平衡和高對比度。


          專家提示:任何含有超過50%黃色的顏色都會自然反射更多的光。這意味著黃色,橙色,綠色和藍綠色是高風險顏色,應謹慎使用。


          色盲

          色盲是無法區分特定顏色(通常是紅色和綠色,偶爾是藍色)的一種,它比你想象的要常見。

          專家提示:不要僅僅依靠顏色;顏色不應該是傳達重要信息的唯一方法。您可以執行以下操作:

          • 使用下劃線表示鏈接和斜體,或使用粗體突出顯示文本

          • 將圖標與文本一起使用可傳達成功或失敗的信息

          • 使用紋理或圖案作為圖表

          • 為按鈕或明顯的通知使用清晰的視覺樣式,針對焦點或活動狀態使用不同的字體樣式


          2.版式

          字體選擇

          通信是每個數字產品的首要目標,可以借助印刷術及其正確應用來實現。內容應清晰易讀,這意味著易于識別和解釋,輕松閱讀和處理。

          簡潔明了對于快速閱讀和解釋至關重要,請避免使用復雜的字體,因為它們只會增加視覺干擾。選擇正確的字體家族,針對那些具有清晰定義和獨特形狀的字符,因為視力障礙或閱讀障礙的人可能會因某些字符或其組合而感到困惑。


          字體樣式

          字體樣式還會影響弱視或閱讀障礙者的閱讀性能。我們應該注意并謹慎使用字體樣式(如斜體,下劃線和大寫)的頻率和位置。

          根據“英國閱讀障礙協會”的規定,應避免使用斜體,特別是對于較大的副本塊或較小的字體。這是因為它們使字母傾斜,顯得更加尖銳,因此更難以閱讀。


          正文也應避免使用帶下劃線的字體樣式。給長的段落加下劃線會增加視覺噪音,從而降低閱讀性能,而給短的句子或單詞加下劃線會與活動鏈接相關聯,并可能引起混亂。粗體是添加對比度和強調的更好選擇。


          盡管沒有確鑿的研究,但有一些證據支持也應避免主要針對正文使用大寫字母。似乎所有大寫字母的統一外觀會降低單詞形狀的對比度,從而使掃描變得不那么容易。此外,大寫看起來有點緊張,可能感覺好像有人在向您大喊大叫。

          專家提示:平衡是關鍵。謹慎使用每個樣式并賦予其含義甚至可以提高可讀性。


          字體大小

          您知道絕大多數人戴眼鏡或隱形眼鏡嗎?實際上,十分之六以上!此外,約有62%的人通過手機訪問互聯網,這還不包括應用程序的使用情況。當視力不佳的人在旅途中在小屏幕上使用技術時,可能會出什么問題?

          使用較大的字體。通常,16px被認為是最具有包容性的,但是請注意,字體可以以不同的比例站立,并且字體的大小可以相差很大。切勿低于14px,事實上,大多數現代網站的正文都使用18px字體,而標簽,標題或工具提示僅使用14px或16px。

          專家提示:此外,避免使用薄而輕的字體,因為對于較小的字體或在明亮的光線下可能難以閱讀。


          段落格式

          幫助人們輕松瀏覽內容應該是我們的首要目標,因為只有20%的人可以閱讀內容,其中55%的人可以快速瀏覽內容。我們的工作是通過使用舒適的段落格式來盡可能地支持人們。


          研究表明,用于支持可讀性的平均在線行長(包括空格)約為70個字符。標題,字幕和項目符號點將有助于掃描,而左段對齊將使文本更易于閱讀。


          較長的文字墻使人們參與的機會大大減少。成功的段落長度不超過5到6個句子。

          空格將幫助患有認知和注意力障礙的人,保持閱讀重點。對于其余的內容,它只會使閱讀更加愉快和流暢。根據WCAG,最佳做法是將行高(行之間的間距)設置為相對于該類型大小的1.5相對值。段落之間的間距也至少應比行間距大1.5倍,因此必須明確定義。


          提示:行距不應超過2.0,因為它可能產生相反的效果并分散讀者注意力。


          復制版面

          作為設計師,我們經常陷入過度設計布局的陷阱,以使它們看起來引人注目或獨特,從而將可用性放在一邊。這就是為什么我們看到諸如文本的一部分之類的趨勢在彩色或帶紋理的背景上重疊圖像或文本的趨勢。只要我們知道如何以及何時使用它們,我們仍然可以享受其中的一些趨勢。

          當在彩色或帶紋理的背景上使用文本時,我們需要確保它們之間的色彩對比度足夠高,同時在整個重疊區域都保持一致-意味著在副本下沒有較淺和較暗的區域,也沒有過多的細節干擾。較大的字體大小和較重的字體粗細也會提高對比度。


          專家提示:一如既往地“了解您的用戶”。時髦的布局并不適合所有人。


          改善聽覺體驗


          您可能在想,視覺設計如何影響聽覺體驗?因此,想象一下您正在與一個俱樂部的朋友交談。我敢打賭,您只能聽見她說的話的一半,但是您可以通過看著她的嘴唇移動,肢體語言和面部表情來保持對話的進行。由于視覺效果的支持增強了模棱兩可的聲音,因此您最終可以理解它們。


          在用戶界面中,聲音對于不同的人可能意味著各種各樣的事情。它們也很容易在嘈雜的背景中丟失,因此最好以視覺提示來支持它們。

          我們的目標應該是提供聽覺和視覺提示的反饋,支持錯誤,通知以及與相關和鄰近圖形元素的重大交互。我們還必須確保視覺線索保持足夠長的活動時間,以使人們能夠看到和閱讀,同時又不隱藏任何重要的內容。


          一個好的做法-不限于支持聲音輔助技術,是在UI元素中添加描述性標簽,并在圖像中添加標題,以便于在屏幕閱讀器中輕松導航。為視頻使用字幕是改善聽力體驗的另一種方法,對非母語人士也有幫助。


          最后,我們不應該忽略聲音是問題的情況,這就是為什么我們需要視覺替代的原因。有些人可能對特定的聲音敏感,或者處于聲音可能引起干擾的情況下。然后,這是一個好習慣,讓人們可以選擇關閉聲音而不必調低揚聲器音量,從而使此功能清晰可見。


          專家提示:避免使用不必要的自動播放聲音和音樂,因為它們會打擾甚至驚嚇別人。


          改善認知體驗


          1.知覺

          視覺清晰度

          清晰度是用戶界面中的第一個也是最重要的屬性。成功的用戶界面使用戶能夠識別和解釋他們所看到的內容,了解產品的價值和所要采取的行動,預測使用產品時會發生什么以及與產品成功交互。

          • 形式跟隨功能是一項原則,指出對象應反映其預期的功能或目的。為了在用戶界面中實現此目的,我們使用了附加功能,附加到UI的視覺提示/屬性,以顯示用戶與其交互的可能方式。

            支付能力取決于用戶的身體能力,目標,過去的經驗,當然還取決于他們認為可能的情況。按鈕應該看起來像按鈕,就像鏈接,菜單標簽,表單等一樣。使用清晰的符號/功能可以幫助用戶識別或解釋界面,并輕松進行交互。


          • 在用戶界面中使用熟悉的和已建立的設計解決方案將幫助用戶預測結果并自信地采取行動。因此,使用設計模式來解決常見問題是一個好習慣,該設計模式是經過測試,優化和可重用的解決方案。

            設計模式建立在過去的經驗和可能性的基礎上,并附加到特定的目標上。為避免眼前的問題,選擇正確的設計模式應該是我們避免混淆或壓力大的交互的第一要務。


          • 建立一致的視覺語言是獲得更全面界面的關鍵。具有相同功能和/或重要性的重復交互式UI組件應始終以相同的方式外觀和操作。因此,導航,按鈕,鏈接,標簽,錯誤等元素應在整個產品中具有一致的樣式,顏色和動畫。
            值得注意的是,一致的視覺語言不僅可以通過附加含義和減少視覺噪音來幫助互動,而且還可以增強產品的個性,提升品牌知名度,建立情感聯系和信任。


          層次結構

          視覺層次結構是指圖形元素的視覺重量及其排列方式,使用戶可以輕松地探索和發現內容。通過為頁面元素分配不同的視覺權重,我們可以對內容進行分組并影響人們感知信息和瀏覽產品的順序。

          • 顏色是第一大關注焦點。彩色元素將脫穎而出,因此在層次結構中位于較高位置。明亮的顏色會更加突出,因此,考慮到這一點,我們應該仔細安排和分配顏色,以將眼睛引導至正確的位置。

          • 視覺元素的大?。ɡ缬∷ⅲ粹o,圖標和圖像)在確定重要性方面幾乎與顏色一樣強大。較大的圖形吸引了用戶的注意,并且顯得很重要。對于排版,明顯不同的尺寸縮放比例可以幫助建立內容層次結構,并使內容掃描變得輕松而輕松。

          • 輔助視覺層次結構的另一種方法是通過設計一致性和例外。一致對齊,外觀相似,重復或相鄰的元素給人的印象是它們是相關且同等重要的,而偏離元素以及不尋常的形狀和有趣的紋理或樣式將更加顯著。太多的設計例外會引起人們的關注,并會增加復雜性,因此,謹慎使用它們是一個好習慣。


          專家提示:研究格式塔原理及其在UI設計中的應用將有助于我們理解視覺感知和分組以改善視覺層次。


          色彩應用

          顏色不應該是傳達信息或增加意義的唯一方法,但它仍然有用且很有影響力,因此不應將其視為裝飾性元素。顏色具有含義,盡管沒有硬性規定,但是太多的顏色會導致信息疲勞,并且不一致地使用顏色會導致混亂。

          • 避免使用太多顏色。通常,三種顏色足以描述頁面的所有重要視覺元素。60–30–10規則可以幫助我們建立完美的和諧。其中60%的彩色項目由原色組成,以創建統一的產品主題,具有30%的輔助顏色增強含義和/或創建引人注目的效果,以及10%的強調色,以補充和輔助主顏色和輔助顏色。

          • 此外,我們需要確保為消息使用正確的色調。除了美學,顏色還可以創造情感和無意識的聯系。特定陰影的含義會因我們所處的文化和環境而異,并且顏色通常具有不同的含義-在西方世界,錯誤是紅色,成功是綠色,信息是藍色等。


          專家提示:可以將我們自己的含義分配給顏色,只要它們不與既定規范重疊,并且我們在整個產品中使它們保持一致。


          符號學

          符號學是對符號/圖標及其含義的研究。它著重于人們如何形成和解釋這些含義,這取決于人們所看到的上下文。在用戶界面中,圖標是可視語言的一部分,用于表示功能,功能或內容。符號學可以幫助我們設計立即被識別和理解的圖像。

          • 盡管這些年來,我們已經開發出具有大多數人接受和理解的含義的圖標。用戶還習慣于使用特定于平臺的圖標,并且可以輕松地進行解釋。在可能的情況下,最好遵循這些既定的解決方案,以獲得熟悉和流暢的體驗。

          • 當然,在某些情況下,我們需要設計具有特定功能的自定義產品特定圖標。這些圖標必須盡可能簡單明了,以確保清晰度。它們還應該具有一致的視覺樣式,以傳達其功能或與其他非功能性元素區分開。

          • 最后,我們不應該僅僅依靠視覺隱喻來傳達含義,因為某些關聯可能并不那么明顯。如果圖標需要標題來描述其含義,則可能不合適。如果不確定,請與實際用戶一起測試我們的設計會有所幫助。


          專家提示:圖標不僅易于解釋,而且還可以具有多種含義。因此,將標記與功能圖標結合使用是一種很好的做法。


          2.互動

          記憶

          許多心理學實驗表明,健康個體的處理能力非常有限。在我們的短期記憶中,我們大多數人平均可以保留7項,具體取決于個人。我們的大腦并未針對數字產品所需的抽象思維和數據記憶進行優化,因此良好的設計會有所作為。


          • 減少頁面上可用選項和信息的數量,以及使用清晰的標題,面包屑和“后退”選項來訪問以前的內容,將幫助用戶記住或提醒自己他們在哪里,打算做什么或要做什么。是必需的。

          • 交互元素上或附近的清晰可見副本將幫助用戶在整個交互過程中保持知情和自信。例如,表單標簽應始終可見,動作不應隱藏在懸停后面,按鈕應提供目標位置的上下文,并且各節的標題應明確。


          專家提示:通過稱為“塊”的過程可以增加我們的短期記憶和處理能力。這是我們在視覺上將項目分組以形成更容易記住的較大項目的地方。


          改善運動體驗


          菲茨法

          菲茨法則為人類的運動和互動提供了一個模型。它指出,將指針(光標或手指)快速移動到目標區域所需的時間是其距目標的距離除以目標大小的函數。意味著較小的目標會增加互動時間。

           

          根據Fitts法則,我們旨在減小用戶與目標之間的距離,同時增加其尺寸。該法律主要適用于導航和按鈕。菜單和子菜單元素應在附近,而按鈕,鏈接和分頁應在較大區域上單擊,以實現更快更準確的交互。


          專家提示:根據可用性最佳實踐,按鈕/鏈接的最小尺寸為42x42像素(重擊尺寸)。


          獎勵:提高績效

          到目前為止,我們已經建立了包容性設計,旨在讓盡可能多的人訪問并實現他們的目標或解決他們的問題,盡管他們有自己的情況。我們可能很幸運,可以使用進的設備或超高速互聯網,但是當我們的信號不太好時,我們會感到掙扎。對于大多數人來說,老式設備和糟糕的互聯網已成為常態,因此,為獲得最佳性能而設計是一件大事。

          • 極簡主義是關鍵。如果我們打算創造一種可以被盡可能多的人使用的產品,那么我們就應該擺脫不必要的一切。圖形,圖像或動畫是有價值的,還是增加了視覺噪音和加載時間?如果是的話,那就必須走了。

          • 圖像優化是幫助提高數字產品性能的另一個標準。通過將圖像調整為合適的大小,然后通過諸如ImageOptim和TinyPNG之類的工具運行它們,可以節省寶貴的千字節和實際的加載時間。

          • 開發人員通常使用的一種提高性能的技術是“延遲加載”模式,其中圖像的加載是異步的,并延遲到需要時才加載。例如,如果您快速滾動到頁面底部,則在網站完全加載之前,您可能會看到類似網站線框的內容?!皾u進圖像加載”的一種替代方法是“漸進圖像加載”,其中我們顯示一個空的占位符框<div>,然后用小的低質量模糊圖像填充它,最后用所需的高質量圖像替換它。

          在每個數字產品中都遵循上述最佳實踐,這是高可訪問性標準的良好起點。但是總會有改進的余地,并且更好地了解我們的用戶可以揭示提高無障礙標準的新方法。因此,有必要花費一些時間和金錢來更多地了解我們的不同類型的用戶,因為他們可以教會我們很多有關使包容性體驗成為現實的知識。


          了解我們的用戶將幫助我們練習同理心?!百x權”不是偶然的設計思維過程的第一步。在移情階段,我們的目標是加深對我們正在設計的人員及其獨特視角的了解,因此我們可以在進行任何設計決策時與他們認同并代表他們。

          zhuanz

          5G將開啟全新的出行方式

          ui設計分享達人

          5G以其更快的速度、連接和云訪問,將大數據引進車內





          在MWC上,華為、小米、三星等通訊企業紛紛發布了5G手機,而吉利也在2月26日的MWC上,宣布了與高通和高新興合作發布吉利全球首批支持5G和C-V2X的量產車型計劃??梢?G時代對于各大車企來說有著巨大的影響,尤其是車聯網產業。那么,在5G環境下,汽車行業究竟有什么變化呢?



          5G是一代的移動網絡,憑借高帶寬和低延遲,提供了更快的速度、連接和云訪問。5G的最大速度可達到每秒20GB,比4G要快100倍。它可以應用于手機、無人駕駛、VR、電影、充電樁、醫療、農業等多個領域。而基于5G通訊技術推出的C-V2X,是實現無人駕駛和車內技術的重要前提。



          萬物互聯


          萬物互聯是自動駕駛汽車發展的關鍵,基于5G通訊技術推出的C-V2X能讓聯網車輛與交通基礎設施進行通信。通過5G可以實現自動駕駛汽車彼此之間所有數據的溝通與互聯。并與交通燈、道路、傳感器、停車場等基礎設施之間的信息互聯,最終實現車路協同、萬物互聯。



          車車互聯提升駕駛輔助


          在5G環境下的汽車,可以通過云計算來計算車與車之間的距離、車輛的下一步動作、隱藏車輛可視化、零誤差高清導航等信息。同時,也可以與其他車輛實現共享數據,提升ADAS和AEB等駕駛輔助功能,來避免車輛之間發生碰撞。



          智慧交通引領場景化設計


          5G環境下,大量的數據將被引入車內,來提供更準確的數據信息。如,高速收費、紅綠燈、RTTI、實時車位情況、消費支付、行人檢測等情況。眾多的交互有助于車輛更好的了解環境信息,并作出反饋,從而提供更好的場景化設計。如,自動超車、協作式避讓、自動播報前方道路擁擠程度并重新規劃路線功能等場景化設計。



          再比如,哈曼正在研發的交通信號燈速度優化建議技術,幫助司機根據紅綠燈信息調整時速;西亞特測試了在交通信號燈中安裝熱像儀,以檢測行人的動作并將數據反饋給汽車。



          車、商業、家居互聯改善駕駛體驗


          當車輛與酒店、商場、影院、餐廳、健身房、加油站、家居、充電樁等場所相連接,就需要以5g結合C-V2X技術的部署為基準。從而根據車主的需求,更快地預定房間、訂餐、定電影票、充電樁、商場優惠等活動,實現終端之間更的通信。



          比如,我們要去看電影,那么車輛會根據實時路況(是否擁堵、有幾個紅綠燈、是否有車禍)為您選擇最佳的路線方案,并通知停車場到達時間,以方便確定是否有符合您時間的停車位,從而得到及時的反饋。




          車載娛樂


          可以說,如今我們所說的無人駕駛、車載觸屏、全息投影、AR(增強現實)、VR游戲、AR-HUD、實時電影、車輛之間影片共享、移動辦公、多模態交互等車載信息娛樂,都是需要在5G環境下來完成的。在未來,你可以在車內利用幾秒的時間下載一部電影,也可以在車內與其他車輛之間建立網絡游戲通信,實現虛擬內容與車輛運動的實時對接。



          奔馳與哈曼合作開發的MBUX信息娛樂平臺也引入了增強現實(AR)的車載導航系統。


          MBUX信息AR車載導航系統

          BMW Vision Next 100 AR-HUD


          奧迪發布的“沉浸式車內娛樂系統”,讓乘客在車內佩戴VR眼鏡,然后車輛會根據行駛路線路況,實時匹配逼真的電競類影片。


          奧迪發布的“沉浸式車內娛樂系統”

          手勢交互

          車載機器人

          全息投影

          移動辦公


          安全駕駛


          未來的汽車將變得更加安全和,因為5G憑借其更高的帶寬、最小的延遲和零誤差高清導航,能夠預防事故和觀察到車身周圍的各個角落。再結合C-V2X技術將極大地促進車輛之間、車輛與行人、道路基礎設施之間的信息流動和監控車輛異常情況。從而做到提前預知危險,并迅速作出響應來提高道路安全性。另外,5G對于阻止黑客攻擊和數據攔截能夠得到更快響應,從而保障通訊安全。



          想象一下,如果你的車可以在1毫秒內做出反應并將反饋傳達給數百人,那么,危險系數就會降低很多。5G時代,端到端的時長為1毫秒,同時1平方公里內可同時連接100萬個網絡,足以滿足智能交通和自動駕駛的要求。



          無人駕駛


          5G是實現無人駕駛最為關鍵的因素,如今,5G的成功研發有助于車輛之間大量的數據傳輸和存儲,實現車聯網的同時,也保障了車輛行駛的安全性;另一方面,5G可實現數據更快速的云訪問,從而更有效地減少傳感器技術的成本,最終實現無人駕駛。


          總結


          5G以其更快的速度、連接和云訪問,將大數據引進車內。從而,在提升駕駛體驗的同時,實現了汽車與萬物的互聯,保障了汽車駕駛中的安全性,從而為無人駕駛汽車提供了技術支撐和更便捷和的信息娛樂系統。


          • 5G將成為未來十年全球主導的移動通信標準;

          • 基于5G的C-V2X技術,會加快無人駕駛技術的落地;

          • 5G環境下的車載信息娛樂系統將改善用戶駕駛體驗,同時催生大量的市場新機會;

          • 共享平臺下,5G將根據實時路況作出更準確的判斷,從而減少時間成本和停車成本;

          • 5G遠不止應用于汽車、手機,它將應用于醫療、機器人、農作業、航空等更多方面;

          • 5G技術為無人駕駛的實現提供了技術支撐和安全保障,同時也降低了安裝傳感器技術的成本;

          • 5G實現了車與車、道路、家居、商業之間真正意義上的“車聯網”,為交通提供更準確的交通信息和通信信息;

          • 5G將會提供更多的場景,從而加快市場社會變革和新的商機,但需要大量的資金投入,能否將技術化為盈利是一大問題;

          • 5G以毫秒的速度,提供更精細的地圖數據和更高級的駕駛輔助,并作出快速的反饋,提高了駕駛的安全性,對于減少交通擁堵,提高交通效率和道路安全有著積極的作用。



          轉自-站酷

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




          B端系統,篩選控件總結

          ui設計分享達人

          寫在前面


          首先我們先從篩選本身講起吧~

           

          篩選可以說是我使用比較頻繁的一種交互形式,比如我點外賣,會選擇滿減優惠力度大,同時我也可以選擇在哪一個價格區間內的產品,這就會用到篩選,而到了B端產品上來,一個CRM系統當中,篩選的邏輯也會比移動端的復雜,伴隨著:且關系、或關系、大于、小于等等這樣復雜的邏輯,也為設計本身增加了很多難度。因此,今天我們就來討論討論篩選控件

           


          1、篩選存在的意義


          篩選存在的對于整個表單來說是非常重要的,它可以幫助用戶,在表單茫茫多的數據當中進行快速的定位;可以對表單進行快速劃分,縮短用戶對于數據的尋找時間;能夠滿足用戶在工作中,實際業務場景的篩選。

          對于實際B端場景來說,篩選是日常數據分類的一個重要途徑,我們先來看看實際場景到底有哪些?

           

          用幾個我們CRM用戶日常使用的場景來說:

           

          比如今天作為一個電話銷售人員,想要聯系最近注冊的用戶時,通常會通過篩選來選出最近幾天注冊過,同時又沒有銷售更進的客戶,進行一個優先級的排布;

           

          再比如說,在銷售周報當中,銷售主管可以通過篩選得到每個人這周完成的狀態,也可以通過篩選得出每個人對于線索的更進情況和對客戶的流失狀態等等,這些都可以通過各種各樣的篩選形式來滿足用戶對于特定情況下的使用



          篩選和搜索、導航的區別?

           

          篩選可以通過多個篩選條件進行多維度的尋找,而導航、搜索只能通過單一條件進行指定篩選。

          雖然在現在很多搜索都可以支持多維度用空格去進行多字段的關鍵詞搜索,但本質上區別不大

          所以在B端項目當中,如果你有表單,那你就需要篩選



          2、篩選的類型


          我們將篩選分為基礎篩選和高級篩選兩種,兩種篩選會根據業務場景不同,在不同的頁面去使用

           

          2.1、基礎篩選


          基礎篩選一般為系統預設好的篩選字段,具有很強的業務和場景的需求?;A篩選一般分為四個部分:


          篩選條件:是指用戶可以篩選的范圍

          篩選項:是指用戶可以選擇的篩選項目

          已選項:是指用戶已經選中的篩選項

          備選項:是指用戶還沒有選擇的篩選選項



          基礎篩選更多作為用戶快捷篩選的一種方式,因為一般使用場景當中用戶幾個篩選邏輯為“且”

          同時篩選的邏輯也為簡單篩選,所以在使用場景上只適合在對篩選要求不高的場景下使用。


          2.2、高級篩選


          高級篩選一般為篩選中含有運算符,同時篩選當中包含條件關系,比如且關系或者否關系。一般高級篩選包含以下幾類關鍵詞

           

          篩選關系:是指幾個篩選條件之間的關系,一般為 且、或關系,即 且 關系為幾個條件之間的并集;或 關系為幾個條件之間的聯集

          篩選字段:是指在篩選當中,所要的篩選項,一般為表單當中的所有可篩選的字段

          篩選操作:是指篩選字段和篩選值之間的關系,常見的篩選操作有:大于、小于、是、否、包含、不包含、為空、不為空等等。

          篩選值:你所需要篩選的數值



          高級篩選一般滿足更多的用戶場景,為用戶多條件多字段、多個篩選關系、多個篩選操作 提供有利保障。




          3、篩選的布局


          3.1、上下布局


          當在篩選器條件少于5個的情況下,最常使用的就是上下布局,這樣篩選能與網站保持統一的情況下,上下布局也更方便用戶進行閱讀

           

          當篩選器過多的情況下(一般在5-15個之間),篩選器過多,需要滾屏才能看到篩選結果,用戶使用起來會很別扭。所以在5-15個的情況下,一般會將篩選項進行收折,這樣保證篩選整體面積不會太大,同時將用戶常用的篩選放在前面,可以滿足用戶基本的業務需求和使用場景



          3.2、左右布局


          左右布局在PC端一般是以字段選擇進行篩選,通俗來講就是將用戶可以篩選的所有字段全部羅列出來,然后通過勾選選,擇出你需要篩選的字段,進行篩選器的使用

           

          左右布局的好處是能夠將篩選的所有條件都直接的展示出來,可以適應很多場景,在篩選器用15個以上時。通過左右布局的方式,能夠讓篩選條件進行滾動,在最大限度保持用戶使用體驗




          4、篩選的形式


          在日常的B端產品中,篩選的形式有哪些?篩選到底應該怎么設計?接下來為大家總結梳理一些在 B端產品 中的篩選玩法,希望為你開啟新大陸。


          4.1、平鋪型



          平鋪型一般為用戶搜索結果數據量過大,使用戶搜索出來的結果與其預期差距過大,用戶然后可以通過篩選對數據的再一次分類,使用戶能夠精準尋找其想要的結果。

          平鋪型一般為篩選條件少于6個,這樣能夠通過1行或者2行去展示篩選項的結果

           

          多用于信息量大的產品,比如電商、視頻網站等等。常見的淘寶、京東、騰訊視頻PC端 都采取用這樣的方式,將所有的篩選條件列出來。

           

          平鋪型的好處是將篩選項的結果全部或者部分放出,能夠幫助用戶快速理解篩選項以及快讀找到自己想要的結果。

          缺點也是很明顯,平鋪型的控件占比大,需要占據大量面積展示平鋪出的篩選結果。

           

          比如淘寶PC端,搜索一個產品后花去40%的面積去展示所有的篩選條件,其實就是想引導用戶,淘寶搜索過后spu的數量仍然過大,想通過進一步的篩選,讓用戶明確自己對想要東西。同時因為面積占比大,通常平鋪型都是以收折的狀態,只有在搜索觸發后才會完全展開


          4.2、收折型



          收折型篩選是一種簡單直接的篩選形式,將用戶常用的篩選形式通過下拉框的形式進行篩選。每一個篩選條件就是一個下拉框,這種形式看上去很簡單,但是在B端場景中,下拉框對于用戶來說認知成本低,操作性也較強,同時在用戶重度使用時,又能給用戶很好的使用體驗的一種方式

           

          優點:

          用戶可以直接對其常用的字段篩選進行一步操作,并且沒有復雜的篩選關系,全部都是“且”的篩選邏輯,能夠保證用戶進行快速的篩選選擇

           

          缺點:

          將所有信息全部平鋪展開,信息量過于冗雜繁多,同時在做通用性產品時,這種方式很難做到通用性


           

          4.3、單側篩選



          單側篩選是一種更通用的篩選形式,通過對于你想篩選的字段進行勾選,勾選完成后就會出現篩選條件,然后選擇篩選字段、篩選操作、篩選值,一般選擇完成所有篩選后,還需要點擊查詢,篩選操作才算完成。

           

          整個單側篩選,大量的篩選條件可以放置在表單的左側或者右側,通過表單縱向空間,去承載大量篩選條件。

           

          優點:

          節省空間、通用性強。因為在很多Saas系統、Paas系統當中,無法針對每一個客戶進行設計,就要考慮到系統通用型高,做一些大而全的功能。在每個表單也所需要定制化修改的地方很少,同時能容納的信息量可以很大。

           

          缺點:

          就是在后臺系統當中只有這一種篩選形式會面臨在我常用的幾種篩選的字段中,要通過不斷尋找,來滿足我的篩選需求,操作麻煩。

           

           

          我們產品在某一次改版就將篩選由收折式修改為單側式,因為我們用戶使用篩選的場景非常的多,用戶每次篩選都要多進行2、3步操作,導致用戶進行了大量的吐槽,后來進行修改,將篩選順序支持手動調整順序,用戶吐槽的次數才慢慢減少。



          4.4、表頭篩選

           


          表頭篩選是一種復雜篩選的形式,其最開始是來源于Excel的篩選形式。點擊表單的篩選按鈕,可以將表頭的篩選字段直接帶入,方便用戶。之后在后臺產品的發展中,得以借鑒過來。

           

          優點:

          可以通過表頭的點擊,使用戶更快捷進入到自己的篩選條件,在通常情況下,在表單越左的數據顯然是越重要的,也是使用篩選去篩頻率最高的,因此高頻的篩選場景基本還是得到滿足。


          缺點:

          用戶第一次進入系統很難理解這種交互形式,且在每個表頭都會有一個icon,影響用戶對于表頭的識別。

           

           

          4.5、彈窗式



          通過點擊篩選按鈕,展現出篩選彈窗,進行篩選。這種篩選適合在篩選功能在系統中不是很重要的層級。最常見的就是Tapd,在其中篩選不是很強的一個功能,同時也是系統中十分有必要的。

           

          優點:

          是能夠在節省面積的情況下,可以進行很復雜的篩選,同時可以支持復雜情況下的篩選

           

          缺點:

          彈窗會遮擋一部分表單數據,會影響篩選人的判斷,其次篩選條件的添加也相對更加繁瑣。

           

           


          5、選擇更合適的篩選

          在我們一系列篩選的調整過后,我們團隊也總結了對于我們來說更重要的條件和形式,來和大家分享探討一下。

           

          5.1、使用頻率

          我們認為影響篩選控件最重要的是用戶的使用頻率,因為用戶的使用頻率和使用方式,直接影響到我們篩選是用普通篩選or高級篩選,也會影響到篩選的形式。

           

          5.2、滿足實際業務所需

          篩選功能的做法,取決于我們產品未來是想往哪一個方向發展,如果想把功能做的強大,就得考慮到篩選的后續擴展性。因此滿足實際業務也是十分重要。

           

          5.3、用戶認知成本

          在B端系統當中,最可能遇見的就是你給用戶設計的路徑但是其實用戶根本沒有往你想的方向去操作。我們系統最開始給用戶設計好了很多功能點,但是用戶對于這個點的認知成本實在過低,也導致了后面系統功能點很多都被埋沒。因為在你設計好了一個功能點后,要適當引導用戶,解釋這個功能的使用場景才不會讓你設計的功能被淹沒。

           

           


          其實在B端產品中,易用本身就是難且長的過程,在每一個功能的設計都需要你去思考很多方面:用戶易用、信息層級、未來擴展,你都要做出取舍,而對于每個模塊都需要你思考、結合用戶場景,B端web的設計一直都是摸黑前進,我也只是將自己的一段時間的工作進行總結,說的不正確,歡迎大家指正。

           轉自:站酷-Cengg 


          日歷

          鏈接

          個人資料

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

          存檔

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