首頁

炫酷的大數(shù)據可視化設計賞析(七)

前端達人

隨著大數(shù)據產業(yè)的發(fā)展,越來越多的公司開始實現(xiàn)數(shù)據資源的管理和應用,尤其是一些在日常生活中經常使用大屏幕的大中型企業(yè)。此時,用戶界面設計者需要呈現(xiàn)相應的視覺效果。


隨著信息化的發(fā)展,智慧城市、智能油田、政務云、企業(yè)云等一系列信息化目標逐一實現(xiàn)。實現(xiàn)了以云平臺為目標的各資源管控、資源業(yè)務的管理。隨著管控觸角的延伸、云存儲的各種大數(shù)據,如何監(jiān)控、分析、展示出核心數(shù)據和重點數(shù)據其尤為重要。

在集團企業(yè)中、以運維中心人員為用戶群體,通過大屏實時掌握業(yè)務數(shù)據情況,在系統(tǒng)設計時既要考慮數(shù)據的直觀性,又要考慮視覺疲勞,在其界面構思上要結合行業(yè)特點、數(shù)據特性進行策劃,以立體感形式表現(xiàn)更佳。


接下來為大家介紹大屏可視化的UI設計。


jhk-1603866924130.jpg

jhk-1603866965540.jpg

jhk-1603867076475.jpg

jhk-1603867083483.jpg

jhk-1603867144749.jpg

jhk-1603867206051.jpg

WechatIMG565.png



 --大屏UI設計--

--大數(shù)據可視化ui設計賞析--

(圖片均來源于網絡)

點擊查看更多UI/UE設計案例??????

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



    更多精彩文章:

       

 大數(shù)據可視化設計賞析(一)

  大數(shù)據可視化設計賞析(二)

  大數(shù)據可視化設計賞析(三)

  大數(shù)據可視化設計賞析(四)

  大數(shù)據可視化設計賞析(五)

  大數(shù)據可視化設計賞析(六)

  大數(shù)據可視化設計賞析(七)



TikTok 的真正優(yōu)勢,從來都不是算法(上)

資深UI設計者

在如今大數(shù)據的時代,一些軟件會根據我們的地理位置、性別、喜好等等進行算法推薦;能夠對一定規(guī)范的輸入,在有限時間內獲得所要求的輸出;比如TikTok,以用戶為中心進行推薦,度很高;本文作者分析了TikTok 的真正優(yōu)勢,我們一起來看一下。

字節(jié)跳動往往被說成是一家算法公司,很多人認為, TikTok是靠算法的黑科技才取得成功的。

事實真的是這樣嗎?

eugenewei認為不是:TikTok的算法跟其他公司使用的并沒有太大的不同;TikTok最大的優(yōu)勢是它采取了對算法友好的設計模式,在自己內部建立了一個飛輪,幫助其機器學習算法看到了優(yōu)化自己所需要看到的東西。

原文發(fā)表在其個人博客上,標題是:Seeing Like an Algorithm;篇幅關系,我們分兩部分刊出,此為上半部分。

劃重點:

  • TikTok的算法本身沒什么不一樣;
  • TikTok的不一樣在于它的app設計讓算法“看到”有效地執(zhí)行匹配工作所需的所有細節(jié);
  • 現(xiàn)代社交網絡巨頭的傲慢導致自己陷入到錯綜復雜的問題不能自拔;
  • 為了讓自己的算法發(fā)揮最大的效用,TikTok成為了自己的訓練數(shù)據源;
  • 以用戶為中心的設計模式一直占據主導,但算法友好型設計正在逆襲;
  • 為了最大限度地服務好用戶,請先服務好你的算法;
  • TikTok的設計使得它的視頻、用戶和用戶首選項對For You Page算法清晰可見。

在我上一篇關于TikTok的文章中,我討論了為什么它的For You Page算法是讓TikTok發(fā)揮作用的結締組織;它就是主板的總線,用來連接和關閉所有的反饋回路。

但是,在急于了解為什么各家公司都想收購TikTok的情況下,如果字節(jié)跳動把這款熱門的短視頻app拆分出來的話,圍繞著它的算法的炒作已經有點被異化成那種往往被歸納為最近西方對中國科技分析的套路了。

在這篇文章中,我想討論一下TikTok的設計究竟是如何幫助它的算法表現(xiàn)得跟它一樣好的。

上次我討論了為什么FYP(For You Page)算法是TikTok飛輪的核心,但是如果這一算法不夠有效的話,那整個反饋回路就會崩潰;哪怕你對TikTok或短視頻領域不感興趣,了解一下這個算法是如何實現(xiàn)性也很重要,因為各行各業(yè)的公司都日益面臨著核心優(yōu)勢是機器學習算法的競爭對手的競爭。

我想討論的是TikTok的設計是如何幫助它的算法“看”東西的。

一、《國家的視角》 Vs 算法的視角

James C. Scott的《國家的視角》(Seeing Like a State)是那種很獨特的書,看過之后你會意識到硅谷就有那種使用(濫用)清晰性這個術語的類型。

我是在看到Venkatesh Rao的書摘之后第一次聽說這本書的,如果你不打算看原著的話,那篇書摘仍然是很好的tldr入門讀物(Scott Alexander的書評也不錯,只不過他的書評也已經長到可以做自己的tldr );不過,我建議你還是要好好看看原著。

Scott那本書的副標題是“那些試圖改善人類狀況的項目是如何失敗的”。

這本書可以提高你對日常生活當中的各種意外后果的意識,當我們也有著偉人一般的傲慢時,不妨保持更謙卑的態(tài)度;這個世界比我們想象的要更豐富、更復雜。

比方說,Scott的討論有很多都跟我們的現(xiàn)代社交網絡巨頭的某種傲慢感有關;這些占主導地位的應用的目的就是要提高自身用戶群的清晰性,其中包括促進互動、防止用戶流失并最終提供定向廣告;反過來,這又導致他們的母公司陷入到錯綜復雜的問題之中,至今都未能擺脫困境。

不過這是需要另行討論的話題了;Scott關注的是民族國家如何用簡化的抽象在概要的層面 “看清”自己的公民,而我想討論的是TikTok的app設計是如何讓它的算法“看到”有效地執(zhí)行匹配工作所需的所有細節(jié)的——這篇文章討論的則是是應用和服務在設計時最大限度利用機器學習新模式。(我知道,這種討論有點諷刺意味,因為這種“看法”有可能被塑造為另一種決定用戶看法的看法,一種美國的科技公司只能作壁上觀的看法。)

二、TikTok把自己變成算法的訓練源

近年來,至少在像我這樣的門外漢看來,我們意識到,只需要通過把訓練的數(shù)據量增加幾個數(shù)量級,機器學習就可以取得很大程度的進步;也就是說,就算算法本身跟幾年前沒有太大的不同,僅通過在更大的數(shù)據集上對其進行訓練,人工智能研究人員就能取得像GPT-3這樣的突破(GPT-3暫時給科技Twitter們帶來了高潮) 。

當大家說TikTok的算法是取得成功的關鍵時,很多人會把某些神奇的代碼段看作是公該司的秘密武器。

俄羅斯當代后現(xiàn)代主義作家Viktor Pelevin說,所有的現(xiàn)代電影都是同一個主角:一個裝滿錢的公文包;從《死吻》的放射性物質公文包,到《低俗小說》里面的那個類似的里面金光閃閃的、不知道裝著什么的公文包;從《魔頭對捕頭》(The Formula)的創(chuàng)世紀方程,到大衛(wèi)·馬梅特(David Mamet)的《西班牙囚犯》(The Spanish Prisoner)里面的秘密的金融處理,我們長期以來一直對有魔力的麥格芬(McGuffin,推動情節(jié)發(fā)展的對象或事件)感到癡迷。

最近幾周,對TikTok算法的討論已經把它提升成了類似的東西,這個算法就好像是《奪寶奇兵》系列電影(如《法柜奇兵》、《圣戰(zhàn)奇兵》…)里面那些神秘的考古文物一樣。

但是這個領域大多數(shù)的專家的態(tài)度不會是這樣,他們不相信TikTok在機器學習推薦算法方面取得了迄今為止我們所不知道的進步;實際上,大多數(shù)人會說,TikTok的做法大概跟別人的解決問題方法無異。

但是要記住的是,機器學習算法的有效性不僅僅取決于算法,還要取決于利用某些數(shù)據集訓練過后的算法;GPT-3也許并沒有什么新鮮,但是通過接受大規(guī)模的數(shù)據訓練,以及設置大量的參數(shù),其輸出往往令人驚訝。

同樣地,基于自身數(shù)據集訓練過的TikTok FYP算法,在將視頻與認為該視頻有趣的人進行匹配方面非常準確有效(而且,同樣重要的是,在不向那些不認為視頻有趣的人推送方面也很有效) 。

有些領域,比方說文本,可以輕松獲得大量訓練得很好的數(shù)據;比方說,要想訓練出像GPT-3這樣的AI模型,你可以到互聯(lián)網、書籍等上面找到大量可用的文本集;如果你想訓練視覺AI,可以在網上和各種數(shù)據庫里面找到大量照片;訓練仍然很費錢,但是至少你手頭有足夠的訓練數(shù)據。

但對于TikTok (或者抖音)來說,它那擅長推薦短視頻給受眾的算法可就沒有公開可用的這么大規(guī)模的訓練數(shù)據集了。

去哪里可以找到模因、小孩跳舞、對口型、可愛的寵物、推銷品牌的網紅、士兵越障訓練、小孩模仿品牌等內容的短視頻呢?就算你有這樣的視頻,又該去哪里找到關于大眾對此類視頻感受的可比數(shù)據呢?除了Musical.ly的數(shù)據集以外(主要是美國喜歡玩對口型的青少年),這樣的數(shù)據并不存在。

這是一個獨特的雞生蛋還是蛋生雞的問題,如果沒有這款app的的攝像頭工具和濾鏡,以及拿到版權的音樂剪輯的話,TikTok的算法需要訓練的那種視頻就很難創(chuàng)建。

那么,這就是TikTok設計的魔力所在:app會激發(fā)和促進視頻的創(chuàng)作與瀏覽,算法然后用這些視頻進行訓練,再反過來激發(fā)和促進視頻的創(chuàng)作與瀏覽,形成反饋回環(huán)。

為了讓自己的算法發(fā)揮最大的效用,TikTok成為了自己的訓練數(shù)據源。

三、以用戶中心 Vs 對算法友好

要了解TikTok是如何做出這么強大的學習飛輪,我們需要對它的設計進行深入研究。

關于科技的UI設計,主導的思想流派(至少是我成長的過去二十年里)關注的重點是消除用戶所做事情的摩擦,并讓他們在此過程中感到愉悅;其設計目標是優(yōu)雅,什么是優(yōu)雅:優(yōu)雅就是直觀、巧妙,甚至時尚。

也許沒有一家公司比蘋果把這種設計風格體現(xiàn)得更加淋漓盡致,巔峰狀態(tài)下的蘋果總能把自己的軟硬件做出優(yōu)雅的感覺——“就是這么好用(it just works)”,但同時又很迷人,讓用戶覺得很雅致。

(蘋果控制風格的名聲就沒那么光彩了——手機、筆記本電腦不可替換的電池,目前有關應用商店規(guī)則的爭論)在發(fā)布新品的主旨演講時,展示一塊硬邦邦的鋁塊是如何變成嶄新的MacBook Pro機身的視頻的理由是什么?

因為聽到工業(yè)激光把那塊鋁雕刻成一體化機身時發(fā)生的聲音很性感?然后,當你在咖啡店用那臺筆記本電腦敲擊一封電子郵件時,在你的潛意識里,有關那段視頻的一點殘留的記憶里面會不會讓你的多巴胺受到一點點的觸動?

這種以用戶為中心的設計模式在這么長時間以來一直占據著主導地位是有原因的,尤其是在消費類技術里面。

首先,這的確有用——蘋果的市值最終超過了2萬億美元(還記得假冒的Sean Parker說過十億美元很酷嗎?那還是十年前,現(xiàn)在十億美元不再是金牛了,財富的量級在飛速發(fā)展。)

此外,我們生活在大規(guī)模網絡效應時代,應用了Ben Thompson的聚合理論并獲得大量用戶群的科技巨頭,可以在他們所參與的市場當中發(fā)揮出不可思議的杠桿作用——要先做到這一點,最佳的辦法之一就是設計出能比競爭對手更好地滿足用戶需求的產品和服務。

長期以來,這種設計流派一直占據著主導地位,以至于我?guī)缀跬浟诉^去時代慣常采用過的一些蠻不講理的軟件設計了。(不要把它跟野獸派設計混為一談,后者其實就像它在建筑方面的表親一樣,在設計上是相當美的。)

但是,如果要想最大限度地服務好用戶的關鍵要取決于對機器學習算法的訓練呢?如果這個ML算法需要龐大的訓練數(shù)據集該怎么辦?在機器學習方興未艾的時代,這日益成為關鍵的設計目標。

在考慮如何設計app時,你日益必須考慮怎么才能最好地幫助算法去“看”——為了最大限度地服務好用戶,請先服務好你的算法。

TikTok讓我著迷,因為不管是意外還是有意而為之,這都是一個為了盡可能多地給自己的算法提供有用信號的現(xiàn)代app的典范——這就是我所謂的算法友好型設計的范本。(我曾經想過把它叫做以算法為中心的設計,但覺得這種說法有點過頭了;一個幫助算法看見東西的設計到頭來仍然是為了給用戶提供盡可能好的體驗。)

我們仍然可以認為這只是以用戶為中心的設計的一種變體,但是對于那些大量采用機器學習算法組件進行產品開發(fā)的團隊來說,明確地承認這一點也許有用;畢竟,當產品經理,設計師和工程師開會討論app設計時,算法是不會出席的;但是,對算法的訓練需求必須得到體現(xiàn)。

James Scott在談到《國家的視角》,談到了城市設計等領域的巨大變化,比如讓土地面積和業(yè)主數(shù)量對征稅者“清晰可見”;TikTok的設計使得它的視頻、用戶和用戶首選項對For You Page算法清晰可見;這種app設計履行了它的主要職責之一:“像算法一樣看東西”。

我們不妨仔細看看,TikTok打開后就是“For You Page”頁面,然后直接進入視頻。這就是它的樣子。

這個是到目前為止有史以來最熱門的TikTok視頻,截止到我發(fā)布這篇文章時,它的34.1M個點贊可能已經不止了;你可以看看有關這條TikTok是如何誕生的故事,看過之后你仍然會覺得這是一個充滿悖論的文化難題,但是你看過后會喜歡的。

我把這個給我侄女看了,然后我們一起循環(huán)播放了好幾十次,然后我們一起開始大喊“從M到B,從M到B”,然后一起笑了起來,這是我在這場疫情當中真正的感受不是絕望的少數(shù)幾次之一。

整個屏幕被一個視頻填滿。只有一個視頻,視頻用豎屏全屏顯示;注意,這是不能滾動的,而是分頁。視頻幾乎是立即自動播放(接下來的幾個視頻被加載到后臺,所以輪到的時候可以很快播放出來)。

這種設計讓用戶要面對一個緊迫的問題:你對這個短視頻的感覺如何?就這個短視頻。

從視頻開始播放到現(xiàn)在,你所做的一切都是你對該視頻的感受的信號;你是不是在它還沒播放完就滑向了下一個視頻?是的話就隱含(盡管邊界是顯性的)表示你對它不感興趣。

你是不是看了不止一次,讓它循環(huán)播放了好幾次?似乎不知怎的它就吸引了你。你有沒有通過內置的分享面板分享了這段視頻?這是正面情緒的另一個有力指標。

如果你點擊右下角旋轉的LP圖標,看了更多有著同樣背景音樂的視頻的話,就是該視頻對你胃口的進一步信號;音樂線索往往是模因的代名詞,現(xiàn)在TikTok又有了一條為你推薦視頻的軸線了。

還有,你是不是跑去看了看視頻創(chuàng)作者的個人資料頁面?你是不是看過她其他的視頻,然后還關注了對方?是的話說明你除了欣賞視頻以外,也許你還特別欣賞對方這個人。

但是,我們不妨再退后一步,看看這你還沒有看到這個視頻之前,TikTok的算法自己是怎么“看見”這個視頻的;在這個視頻通過FYP算法發(fā)送到你的手機之前,TikTok的運營團隊有人已經看了這個視頻,并添加了大量相關標簽或標記。

這個視頻是跟跳舞有關的嗎?是對口型?還是視頻游戲?有小貓嗎?還是花栗鼠?是搞笑的嗎?主體是男的還是女的?大概幾歲?是群視頻嗎?背景在哪里?用的是什么濾鏡或視覺效果?如果里面包括有食物,是什么食物?等等,所有這些標簽都成為了算法現(xiàn)在可以看到的功能。

視頻還要在視覺AI這里處理一下,并為自己能看到的東西做出貢獻;TikTok有些攝像頭濾鏡能夠跟蹤人臉、手或者手勢,所以視覺AI往往在視頻被創(chuàng)建出來之前就被調用過了。

這個算法還可以看到TikTok所了解到的有關你的信息,你過去喜歡什么類型的視頻?有關你的人口統(tǒng)計學信息或心理學信息有哪些?你是在哪里看這個視頻的?你用的是什么類型的設備?等等,除此之外,還有哪些其他用戶跟你相似?


文章來源:人人都是產品經理    作者:紙盒小卡車


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

2020-2021 演出用戶體驗趨勢報告

資深UI設計者

新的十年,新技術也悄然到來。人工智能潤物無聲,5G 應用也漸漸嶄露頭角。新時代帶來了新的技術,新的場景,新的用戶。用戶體驗從未像今天如此豐富多彩又復雜細致,給設計師帶來了全新的機遇與挑戰(zhàn)。

 

而在疫情的大背景下,對演出行業(yè)而言,需要加速傳統(tǒng)演出產業(yè)的線上化變革適應疫情背景的同時,也要利用新技術嘗試增強線下的演出觀演體驗。這對演出形式的發(fā)展提出了更高的要求。

 

貓眼演出設計團隊搜集近年來優(yōu)秀的用戶體驗案例,并嘗試預測未來一段時間用戶體驗發(fā)展的趨勢與方向。希望對大家有所啟發(fā)。

 

 

1. 在線展覽突破物理局限


相較于演唱會、音樂節(jié)等演出,展覽內容向線上遷移的成本較低。2020 年的畢業(yè)展覽,各大高校采用了不同形式的線上展覽,為青春畫上圓滿句號。


央美的線上畢業(yè)展中,幾乎 1:1 還原了學校展廳原貌,觀眾可以在展廳內走動來觀察展品。讓觀眾身臨其境感受藝術氛圍。

 

清華美院的展覽中采用視差風格,用戶可以將手機橫向滑動,感受內容在指尖流動。是更適合移動端瀏覽內容的形式。


 

2. 演出者與觀眾線上互動


說起類似「傳統(tǒng)直播」的線上演唱會嘗試,缺少演出者與觀眾的互動成為較大的遺憾。在釘釘 Live 與 Beyond 中,觀演者可以通過攝像頭參與到演出的背景中,并與演出者同屏互動,帶來打破空間阻隔的互動試聽體驗。

 

3. 互動應援棒增強趣味感


熒光棒當然是演唱會不可缺少的一環(huán)。而能夠與演出互動的熒光棒則能夠大大提升參與感。

Beyond Live 推出的互動應援棒,可以跟隨演出實時互動,大大增強了演出的臨場感。

 

對演出行業(yè)而言,疫情的到來是不小的打擊。但也激勵著從業(yè)者往新的方向去探索,尋找為觀眾呈現(xiàn)演出的新形式。

 

 

人工智能的發(fā)展到今天,逐步開始為產品體驗添磚加瓦。我們越來越能感受到產品更懂用戶了,在合適的時機做正確的事情。而其中讓產品更懂我們的,正是 AI 為產品添加的感官。

無論是視覺還是聽覺,AI 賦予產品更細致的觀察,從而創(chuàng)造更加人性化的體驗。

 

1. 自然語義理解與交流


語音類產品可以進行連續(xù)對話,并根據上下文進行整體語境的理解。不僅讓日常生活更加便利,同時也照顧到聽障人士,在打電話這件事情上實現(xiàn)了「文字 - 語音跨感官」的交流。

 

Google Assistant 可以根據用戶的要求,打電話與商戶老板預約訂餐。

 

在小愛同學的幫助下,現(xiàn)在可以用打字聊天的方式接聽電話。不僅讓不方便接電話的場景得到解脫,也解決了聽障人士打電話的難題。

 

2. 對使用場景感知更準確


借助 AI 對周圍環(huán)境的分析,可以感知到更細致的用戶場景。華為 Mate 30 Pro 借助 AI 判斷人臉與設備之間的角度,來決定屏幕內容是否需要旋轉。相比較陀螺儀對重力的感知,這樣的方式可以更準確判斷使用場景。

 

3. 內容呈現(xiàn)更智能


在呈現(xiàn)復雜內容時,AI 智能判斷畫面主體,從而優(yōu)化給用戶呈現(xiàn)的畫面。

在 Bilibili 實現(xiàn)的防擋彈幕利用 AI 去分析視頻中的人物、動物等「畫面主體」,給彈幕添加遮罩層。從而實現(xiàn)畫面主體與彈幕的和諧共存。


4. 手勢操控


當機器可以看懂人的手勢,我們就可以隔空來發(fā)號施令了。

在 DJay Pro AI 中,一臺 iPad 放在桌面上,DJ 就可以隔空打碟。在難以觸控屏幕的場景中,手勢也有著其不可忽略的痛點。


在 Mate 30 系列中,用戶也可以通過手勢來進行截圖、上下翻動等常用操作。

 

5. 對 AR 內容的增強


AI 賦予了產品感官,對現(xiàn)實有了更深入的理解。同時也使得 AR 的內容不僅局限于「好看」的展示,而能更好地與周圍環(huán)境結合起來。

Google Lens 可以根據定位和識別內容判斷用戶所在餐館,并在菜單中標注推薦的菜肴。


Rekugaki AR 可以識別畫面中的卡通形象,并創(chuàng)建一個紙片人與用戶互動。



更新 iOS 14 之后,AirPods Pro 擁有了「空間音頻」。結合播放設備與耳機的位置,通過陀螺儀等設備共同模擬一個虛擬聲場,讓用戶有身臨其境的空間音頻感受。增強了 AR 在音頻領域的體現(xiàn)。

 

 

在 2020 年,內容為王的時代,UI 所扮演的角色也漸漸變化。從過去,想盡辦法吸引用戶的點擊和關注,到如今,會更多思考如何包裝和凸顯內容。

或許潤物無形,讓用戶覺得理所當然的沉浸感,才是 UI 最好的歸宿。

 

1. 減少全屏彈出界面


相比較 UI 設計早期對于彈窗的頻繁使用,近些年在產品設計中越來越克制對于用戶的打擾。從而讓用戶盡可能沉浸在當前的體驗流程中。


在 iOS 14 中,如果用戶正在使用手機,來電則以通知的形式呈現(xiàn),在玩游戲的場景可能尤為有用。Siri 也不再占據全屏幕的內容,而是以底部的小圓球出現(xiàn)。這樣假如我們把手機呈現(xiàn)的內容視為沉浸的世界,Siri 更像是一個身邊的小助手,而不是專門要跑一趟的柜臺了。


2. 全屏沉浸式設計


在很多專注內容的產品中,會更注重沉浸式的設計。減少線框和切割,弱化 UI 和導航元素,在全局視野里都填充內容。

 

Apple Music 的歌詞界面中,隨著歌聲響起,歌詞也隨之滾動。與此同時,背景也呈現(xiàn)極光的流動感。使人沉浸在優(yōu)美的歌曲中。


在很多專注于呈現(xiàn)內容的網站中,則更多采用了扁平化、去分割化的設計。讓用戶更專注于內容本身。Dribbble 的改版中,將導航欄改為白色,背景也變?yōu)榧儼住W層脩舨蝗ニ伎脊δ苣K,而專注于內容本身。

 

 

3. 更貼近硬件的 UI


近幾年隨著屏幕技術的不斷更新,逐步在硬件上呈現(xiàn)出穩(wěn)定的產品形態(tài)。相較于傳統(tǒng)的屏幕,手機屏幕的更新出現(xiàn)以下的關鍵詞:

 

而這些新的硬件形態(tài)也對 UI 設計提出了新的要求。我們可以看到針對于這些硬件特性,UI 設計也有了新的變化:


 

大圓角風格 - 全面屏

相較于傳統(tǒng)的直角屏幕,全面屏為了貼合手機的硬件形態(tài)。呈現(xiàn)一個圓角矩形的視野。在 UI 設計中,呈現(xiàn)大圓角風格的卡片設計,能更好貼合這樣的屏幕,實現(xiàn)軟硬件合一的觀感。

 


操作區(qū)域下移 - 大屏

如今主流的手機屏幕已經到了 6 寸,于是這對單手操作帶來了很大的挑戰(zhàn)。各大廠商在不斷優(yōu)化交互細節(jié)的同時,也有廠商帶來了新的思路。

在三星推出的 One UI 中,將上半屏主要用于內容展示,而下半屏幕放置操作內容。在高德地圖上我們也看到了類似的思路。



深色模式 - OLED

OLED 屏幕可以顯示非常純凈的黑色,而深色模式可以很好利用這一點。深色模式可以突出內容,也可以因為大部分區(qū)域不發(fā)光更省電。而用戶過去很多年都看慣了白色的背景,突然“眼前一黑”也許眼前一亮。


多任務模式 - 大屏幕

有了更大的屏幕,就要做更多的事情。越來越多的廠商支持系統(tǒng)級浮窗。甚至在 Galaxy Fold 2 中,可以同時顯示 4 個分屏,還能再添加浮窗。


 

 

靈活布局 - 折疊屏

新出現(xiàn)的折疊屏形態(tài),則要求產品在布局上更加靈活,在大屏幕上呈現(xiàn)更多內容。在華為 Mate Xs 的「平行視界」功能中,用戶可以在左右分屏中展現(xiàn)前后兩級頁面,購物比價更方便。利用折疊屏的特性,實現(xiàn)了 1 + 1 > 2 的效果。

 

 

信息時代,數(shù)碼世界已經承載了我們太多的回憶與財富。頻繁的身份驗證保證了我們的財產與隱私安全,但也帶來了諸多的不便。忘掉的密碼,濕掉的指紋,忍不住讓人大喊「我就是我啊,你怎么不明白」。如何讓身份驗證變得快速且無感,讓生活變得方便且簡單。

 

在演出行業(yè)中,特別是需要快速準確驗證身份的檢票場景中,使用 AI + 人臉識別技術也大大提升了檢票效率。

 


1. 生物識別的普及使用


人臉總是最好的密碼。不論是 Face ID 還是刷臉支付,快速、低錯誤率的特性,總是讓人印象深刻。


Amazon 推出的無感支付超市 Amazon GO,用戶不需要進行任何形式的身份驗證,拿了商品,走出超市,購物就完成了。

 

2. 傳統(tǒng)鑰匙被手機替代


iOS 14 中,你可以用手機來解鎖車輛,甚至可以通過信息,將車鑰匙分享給他人并設置可用時間。


如今每個人都擁有更多的智能設備,如果設備只能獨立使用,顯然不能發(fā)揮最大的價值。好在如今設備之間的連接更快更強大,最終組成快速無縫的優(yōu)質體驗。

 


1. UWB 強化設備的空間感知


超寬帶(Ultra Wide Band,UWB)技術是一種無線載波通信技術,能賦予設備空間感知的能力。當設備之間了解了彼此的方位,能在很多場景尤其是家居場景中提供便利。

iPhone 11 搭載的 U1 芯片賦予設備之間的空間感知能力。用戶可以將手機對準想要分享的設備,在界面中就會優(yōu)先展示。

小米發(fā)布的「一指連」技術,用戶可以將手機對準想要控制的智能設備,在手機中就會自動彈出對應的控制面板。



2. 無感知連接切換


iOS 14 更新后,用戶無需對 AirPods 進行斷開或重新連接的操作。耳機會在用戶在新設備播放聲音時,自動連接到新設備。對于設備感知的弱化,就是對體驗感知的提升。

 


3. 移動設備成為生產力助手


在 macOS 10.15 后,用戶可以將 iPad 作為拓展屏幕使用。并且無線、低延遲、高畫質。甚至可以利用 Apple Pencil 在 Mac 的 Photoshop 中進行繪畫,作為 Mac 生產力內容的補充。



使用華為手機與 MateBook 時,用手機輕觸觸摸板即可實現(xiàn)無線投屏。并且在電腦端可以打開手機文件進行編輯、保存,同時支持手機、電腦文件之間的拖拽操作。實現(xiàn)了手機與電腦的快速無縫協(xié)同。

 

數(shù)字世界如今已經承載著很多人的第二生活,而隱私的權利也在信息時代有了更廣的延伸。在產品利用我們的個人信息創(chuàng)造便利的同時,也帶來了很多隱私泄露的隱患。越來越多的人開始期待,能夠享受大數(shù)據帶來的便利,而不必擔心自己的信息被用在不正當?shù)耐緩健?

 


1. APP 權限透明化


iOS 14 之后的 App Store 中,用戶可以看到應用所請求的數(shù)據權限。在應用訪問剪貼板時,也會在頂部彈出提示。


安卓生態(tài)中的反復喚醒是困擾用戶的一大問題。MIUI 12 中可以查看應用之間的喚醒、定位、使用媒體的記錄,誰是流氓軟件一目了然。

 


2. 加大用戶信息的獲取門檻


MIUI 12 中可以開啟虛擬身份或使用空白通行證進行應用授權,這樣既可以使用對身份有要求的 APP,也可以避免隱私的泄露。


iOS 相冊權限細分為「全部照片」「部分照片」「不允許訪問照片」,這樣當用戶僅希望分享幾張照片時,不需要讓應用可以訪問所有照片了。

iOS 14 之后,用戶可以關閉「允許 App 請求跟蹤」開關,以此減少 App 對個人信息的獲取。



2020 年,90 后三十而立,將要面對更多的挑戰(zhàn),承擔著更多的精神與情感壓力。

00 后也跨入了 20 歲的年紀,這些 Z 時代的年輕人成為了網絡主流。他們追求個性,情緒上更加敏感,表達情感的欲望也更加強烈。

 

1. 關注社會情感壓力


面對著 996、內卷與房價,似乎大多數(shù)人都在感受著不同程度的壓力。

在網易云這樣一個主打聽歌評論的社區(qū)中,出現(xiàn)了大量帶有「抑郁情緒」的評論。網易云也被大家戲稱為「網抑云」。在發(fā)現(xiàn)相關情況后,網易云推出了「關懷計劃」,在 App 中接入專業(yè)心理咨詢的同時,也設計了一些治愈的小功能,幫助大家紓解情緒。在評論中用雙指捏合,可以給評論者一個抱抱。在疫情背景的今天,或許是難得的安慰。

 

2. 關注年輕人個性化的需求


年輕人的個性化需求和表達欲望總是更強烈,在產品中滿足年輕人的想法,就能抓住年輕人的心。

在騰訊漫畫 App 中,切換性別會讓首頁呈現(xiàn)完全不同的內容推薦。


在 QQ 里,連續(xù) 7 天和同一個人聊天可以有一個小火苗,30 天則可以變成大火苗。而針對新朋友和聊得最多的朋友還有四葉草和小船等標識。這些個性化、游戲化的展示,滿足了年輕人的展示欲望,和對趣味的追求。

 

3. 減少疫情帶來的社交疏離


2020 年,疫情讓很多人分隔兩地,很多親密關系很難在線上維系。于是很多產品推出了「一起」功能,在線上可以一起聽歌看電影,滿足疫情時代,人們的社交需求。

在網易云中,可以分享歌曲給朋友一起聽歌。雙方都可以控制歌曲的切換與暫停,還能通過麥克風與對方聊天說話。


在 QQ 中可以選擇「一起看」,分享給好友之后可以同進度觀看視頻,還能在下方聊天互動發(fā)送表情等。



在本文寫完的 2020 年 10 月,我們能看見對疫情的控制程度在全社會的努力下漸漸往好的方向發(fā)展,線下的演出在漸漸復蘇,行業(yè)對線上演出展覽的探索也初見成效。

黃明昊 Just 18 Teen 新歌首唱會剛剛結束,貓眼演出 · 超級現(xiàn)場所實現(xiàn)的線上演出直播 + 線下影院觀演,與偶像同屏的互動方式得到了粉絲的一致好評。

我們也即將迎來英雄聯(lián)盟世界賽這樣首個大型線下演出項目。相信 AI 人臉識別的技術在閘機入場的應用,能為召喚師們帶來更好的觀賽體驗。


用戶體驗在 2020 年的發(fā)展,已經不局限于新技術的應用,也更考驗用戶體驗設計師對于場景的細致洞察,對于用戶情感的細微把控。


文章來源:站酷    作者:貓眼演出設計Team


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

手機appUI界面設計賞析(九)

前端達人


手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。
APP UI設計一直在變化,就像網頁設計一樣,不停的創(chuàng)作新鮮、友好的產品,設計師要跟上這個趨勢,最好的方式就是多看優(yōu)秀案例,下面大家一起來看看今天的精選,建議訪問官網查看更詳細的展示哦!
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋,認知布局,增強體驗感和沉浸感。這里為大家整理了12款優(yōu)秀并富有創(chuàng)意的交互作品,為你的產品設計注入靈感。

精美的天氣app賞析


jhk-1598326401155.png

jhk-1599449745424.png

jhk-1599463745307.jpg

jhk-1599464044049.jpg

jhk-1599464056890.jpg

jhk-1599464120576.png

jhk-1603584657783.jpg

jhk-1603584661385.png

jhk-1603584681514.jpg

jhk-1603584690740.jpg

jhk-1603584693258.jpg

jhk-1603584694948.jpg

WechatIMG528.png

WechatIMG530.jpeg

WechatIMG531.png

WechatIMG532.png

WechatIMG533.png









   --手機appUI設計--

  --精美的天氣app設計--


(以上圖片均來源于網絡)


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



  更多精彩文章:

       手機appUI界面設計賞析(一)

       手機appUI界面設計賞析(二)

       手機appUI界面設計賞析(三)

       手機appUI界面設計賞析(四)

       手機appUI界面設計賞析(五)

       手機appUI界面設計賞析(六)

       手機appUI界面設計賞析(七)

       手機appUI界面設計賞析(八)


為什么用戶注冊這么簡單,想注銷卻如此麻煩?

資深UI設計者

最近國外的設計平臺頻繁出現(xiàn)一類內容,大概類似于「產品設計中的倫理道德與用戶體驗」,里面的內容有引起我的一些思考。

我先給大家舉個例子,來解釋一下上面這句話的意思。

以前,我們聊界面的設計,說界面當中如果有兩個按鈕,就要引導用戶走向主要操作,弱化次要的。類似于下圖:

為什么用戶注冊這么簡單,想注銷卻如此麻煩?

這時候一定會有一些設計師告訴你說,這類界面,要以左邊這種形式去設計,因為無論從視覺角度、優(yōu)先級角度還是企業(yè)利益角度來說,左邊這種都更符合用戶操作的邏輯。

為什么用戶注冊這么簡單,想注銷卻如此麻煩?

或者,如 PayPal 上底部的「移除卡」功能,故意在層級上做的很弱,顏色的處理讓按鈕看起來甚至是不可點擊的。

雖然「移除」對于產品來說是一個危險操作,產品不希望用戶進行這一操作。但是對于用戶來說,當他們想要這個功能的時候,說明意愿強烈,這時候這種設計會讓用戶產生糟糕的體驗。

于是就有人提出說:

  • 為什么呢?難道就不考慮想要跳過的那部分用戶了么?
  • 產品設計就是只考慮對企業(yè)有利的用戶,而忽視掉那些不想付費的用戶?
  • 為什么我們的界面設計不能從更公平的角度去考慮呢?
  • 難道因為這些糟糕的設計頻繁的出現(xiàn),我們就要認為這是好的設計了么?

為什么,用戶登錄注冊就這么簡單,但是有些用戶想要注銷賬號卻如此麻煩?難道對于這些想要注銷賬號的用戶來說,用戶體驗就不重要了么?

其實,我覺得這個問題,可以從兩個角度來說明,分別是「目的」和「義務」。

作為產品團隊的一員,我們的價值在于給公司創(chuàng)造利益,想方設法得到用戶的支持與廣告商的青睞。所以我們設計的產品都會有特定的目的。

比如,引導用戶去購買產品或平臺中的商品,以讓企業(yè)能夠存活,持續(xù)運營下去。

但這并不是說,企業(yè)把一些對用戶無用的商品賣給了用戶,用戶買的這份商品,對他們來說一定是有價值的。產品并不是在欺騙用戶購買無意義商品。

比如平臺支付了音樂或視頻的巨額版權費,方便用戶在線上收聽與觀看,那么用戶為這些內容付費是否應當?

企業(yè)做這些事,從用戶與廣告商身上獲取利益,本質就是為了賺錢,這一點無可厚非。

所以在產品界面的設計中,如文章開頭的示例,采用左圖的形式,突出辦理會員的按鈕,引導用戶付費成為會員,似乎也沒什么問題。

它不過是利用了「信息優(yōu)先級」的概念。我們需要幫助用戶去理解界面上所呈現(xiàn)的信息,目的是為了讓用戶更好的操作。如果所有信息的權重是一樣的,反而會影響用戶的使用,甚至造成體驗障礙。

而逆向的,比如不辦理、跳過類似的出口也有給到用戶,雖然從視覺上相對弱化了,但絕不應該阻礙用戶去點擊。

從這點來說,上圖示例的問題不是在弱化了按鈕的視覺效果上,而是按鈕太小,可能會導致用戶誤觸「去辦理」,讓不想辦理的用戶頻繁點錯;或者過分弱化界面上的重要元素,明明在眼皮底下,卻給用戶找不到的錯覺,這才是根本性的問題。

比如一些引導頁,在屏幕上設置了三個類似「跳過」的按鈕,結果只有一個是有效的,產品為了讓用戶點擊廣告給企業(yè)創(chuàng)造收益,利用這樣的方式達到目的,這才是所謂倫理道德的缺失。

為什么用戶注冊這么簡單,想注銷卻如此麻煩?

我再舉個例子。

為什么用戶注冊這么簡單,想注銷卻如此麻煩?

連續(xù)包月,相比普通包月,策略大多都是第一個月有優(yōu)惠價,以引導用戶辦理連續(xù)包月服務。好處是,大多數(shù)用戶辦理了連續(xù)包月,就會長期使用,它弱化了用戶的決策意識。

除了部分辦理完第一個月就取消服務的用戶,只是為了這個月用,利用這樣的漏洞省點錢,不過這也僅限于第一次辦理了。

那么我們作為設計師,就應該從為公司盈利的角度去設計界面,引導用戶辦理連續(xù)包月服務,而不是普通包月,在界面上做出差別。

同樣的,當每個月用戶需要自動扣費時,就應該告訴用戶,過兩天又要一次扣費了,做一個提醒。而不單單是成功辦理后,就再也不通知了,這是不對的,畢竟用戶每個月都在為產品付費,這樣的通知是產品的義務。

如果用戶辦理的是年會員,已經單次就付清年費,那就沒必要反復提醒(也沒什么可提醒的)。

在這個例子中,用戶體驗與倫理道德的界限很清晰,所以我并不覺得它們是相互矛盾的。

我們還可以舉很多例子來說明這個問題。

比如 Windows 系統(tǒng)下卸載軟件頻繁的下一步,甚至還會有錯誤引導的設計。

為什么用戶注冊這么簡單,想注銷卻如此麻煩?

再比如,在一些產品里關注了某個人,但是有一天想取關的時候,總是找不到取關按鈕?;蛘?,一些產品里并不重要的信息,總是閃著紅點引導用戶去點擊等等。

我們常常會去分析按鈕的各種樣式,比如是否有圓角,是否有投影,是否要漸變等等;也會去梳理按鈕與文案的關系,比如按鈕中的文案與邊框的間距,文案的大小要適配載體的比例等等;甚至,還會去分析按鈕的位置,比如取消按鈕應該在左邊還是右邊,取消按鈕與關閉按鈕的區(qū)別等等。

但似乎,我們很少會去探討按鈕背后的這些事件,我們都知道按鈕是用戶與某個事物間接的交互控件,但我們從來都只注意于按鈕的外形與按鈕位置所應有的邏輯,而沒有真正去探討按鈕所承載的這些問題。

比如用戶點擊了「會員辦理」的按鈕,會發(fā)生什么事情?我們是否應該在下個月用戶扣款之前提醒他們?或者,頻繁的在產品里濫用并不重要紅點提示,會不會影響用戶對于該產品的使用頻率?

這才是我們需要延伸出來思考的事情,而不單單是按鈕或者某個控件本身。我們思考的遠不止目的,還有義務。

所以。

我并不覺得在產品界面上引導用戶執(zhí)行操作有什么問題,相反,問題在于在引導的同時,不能阻礙用戶進行其他的操作,給予用戶合理的控制權,才是最重要的。

產品設計的目的在于正向邏輯的用戶操作體驗,而產品設計的義務在于給予用戶拒絕的權利。


文章來源:優(yōu)設    作者:和出此嚴


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



這就是儀式感設計?看完我懂了

資深UI設計者

隨著生活品質的提高,我們越來越注重“儀式感”,過年、過節(jié)、生日等,我們都想有一些儀式感來慶祝,設計產品也不例外,這些小小的儀式感可以給人帶來好感;本文作者分享了關于儀式感的設計,我們一起來看一下。

在我們日常生活中,存在著各種各樣的儀式感:婚慶、過節(jié),升國旗奏國歌,它可以使我們的生活充滿各種趣味性,是人們表達內心最直接的方式。

而在互聯(lián)網產品中,為了使用戶的產品體驗更貼近于真實生活、有情感共鳴,不少產品在儀式感這塊也下不了不少功夫;不管是出于競爭需要,還是日常用戶運營。

所以這次寫下這方面的內容,以便給自己的設計提供更好的切入點和靈感參考,避免毫無頭緒。

一、有意思的大廠案例

先來看看一些大廠的、有意思的儀式感設計:

網易云音樂:收聽特定的歌曲時,會有右上角會有’LTL’入口。

這就是儀式感設計?看完我懂了

點擊會聯(lián)動觸發(fā)手機閃光燈,對歌曲賦予濃濃的演唱氛圍(黑夜中效果更絕,親測~)。

這就是儀式感設計?看完我懂了

愛奇藝:中秋國慶期間,點擊視頻時會有“煙花”效果,讓用戶看視頻也能過節(jié)。

這就是儀式感設計?看完我懂了

QQ音樂:用戶生日時 直接將歌單封面設置成祝福語,一進入應用就能感受到滿滿的祝福。

這就是儀式感設計?看完我懂了

財付通:實名首次進入后,以“vip客戶卡”的形式歡迎用戶。

這就是儀式感設計?看完我懂了

看了以上例子,相信你對儀式感的作用也有一定的了解,它可以:

  • 營造使用氛圍,增加用戶好感度;
  • 構建產品形象,傳達品牌感知;
  • 提供差異化表現(xiàn),增加競爭力。

除了以上作(廢)用(話)之外,個人覺得最好的一點,就是可以加強設計師的創(chuàng)意表現(xiàn),讓設計方案更加有創(chuàng)新點。

二、如何設計儀式感?

看了這么多例子,相信你自己有的判斷;在筆者個人看來,互聯(lián)網產品的儀式感設計無非由兩部分組成:特定的場景支持+貼近現(xiàn)實的表現(xiàn)。

舉例說明:微信讀書的電子簽名。

只有在微信讀書里購買書籍后(場景觸發(fā)),才會模擬現(xiàn)實生活進行簽名(現(xiàn)實表現(xiàn))。

這就是儀式感設計?看完我懂了

三、特定的場景支持

任何形式的設計都是需要場景支持的,否則無從談起。

筆者覺得,以下3個切入點足以覆蓋絕大多數(shù)場景,幫助挖掘出可設計儀式感的點。

1. 時間與日期

1)時間

一天中某個時間點、時間段,引發(fā)該時刻里對用戶的情緒與感知;可應用的時效性較長,可以用于每天中的某個時刻。

舉例:

下班點打卡,釘釘都會對辛勤工作的員工進行暖心慰問,用儀式感來減少工作一天的負面情緒。

這就是儀式感設計?看完我懂了

之前企業(yè)微信的啟動頁,針對深夜時間段會進行員工關懷。

這就是儀式感設計?看完我懂了

而除了上訴之外,是不是還有更細分的時間維度等著我們去挖掘與設計呢?

像清晨與黃昏、早上/下午/晚上、早茶/下午茶/宵夜/時間點?是不是可以挖掘出更多儀式感場景?

2)日期

可以是各種節(jié)日、特定事件日期、天數(shù)、季度等等;這種應用的時效性不是很強,只能滿足于特定的日期,一般作為運營事件使用。

如百度搜索“愚人節(jié)”時,出現(xiàn)的結果會倒轉過來,愚你一下很開心。

這就是儀式感設計?看完我懂了

抖音會記錄用戶的使用日期,針對性進行信息提示。

這就是儀式感設計?看完我懂了

遇到喜慶或沉痛節(jié)日時,不也得針對其氛圍進行儀式感設計。

這就是儀式感設計?看完我懂了

文章開頭的QQ音樂對用戶生日的祝福、愛奇藝國慶期間的煙花點擊效果。

2. 特定的行為條件

這個不像前面都是產品/系統(tǒng)主動觸發(fā)儀式感,而是只有當用戶滿足一定的條件才會觸發(fā)。

是一種較為被動的反饋設計。如操作結果、等級階梯。

1)操作結果

當用戶執(zhí)行對應的任務后,根據任務的狀態(tài)、屬性等關鍵詞提煉出合適的儀式感。

愛奇藝在直播預約成功后,針對預約成功以“入場券”的形式設計。

這就是儀式感設計?看完我懂了

和平精英在吃雞(游戲結束)后,不也有一個舉杯勝利的表現(xiàn)。

這就是儀式感設計?看完我懂了

文章開頭的微信讀書也是一個例子,在用戶購買完成后觸發(fā)。

繼續(xù)舉一反三的話,除了操作成功、結束之外,像無法操作、操作失敗、操作中斷等狀態(tài),是不是也可以挖掘出對應的儀式感呢?

2)等級階梯:

當用戶的操作/任務累積到一定的門檻、等級或階梯后,所賦予的一種榮譽、獎勵設計。

鼓勵用戶執(zhí)行更多的操作/任務,以獲取更珍貴、稀有的目標。最常見的就是各種勛章、會員、積分設計。

這就是儀式感設計?看完我懂了

3. 首次與新事物推薦

這種應該是被運用得最廣的方式,常見于首次進入/對新用戶的歡迎、新功能的介紹、新內容的推薦。

1)首次使用的歡迎:

如有道精品課,首次進入時以“入學通知書”的方式歡迎用戶,打造符合產品調性的儀式感。

這就是儀式感設計?看完我懂了

再如健康160的歡迎新老用戶回歸。

這就是儀式感設計?看完我懂了

還有文章開頭的財付通vip卡歡迎動畫。

2)新內容的推薦:

如UC瀏覽器,對首次進入的用戶都會引導選擇感興趣的內容類型,以便推送更符合興趣的資訊信息。

這就是儀式感設計?看完我懂了

暫時以這些場景舉例說明,其他的你是不是也能舉一反三呢?歡迎底部留言一起討論。

四、貼近生活的表現(xiàn)

有了相應的場景支持后,具體的儀式感設計才能順利成章。

而儀式感在表現(xiàn)上由2個因素構成:主體與環(huán)境。

1. 主體

組成儀式感的核心部分,是傳達感知、引起情緒的重要體現(xiàn)。

而主體的設計,往往模擬現(xiàn)實生活中某事物元素,將其特征點進行圖形化,是最直接的靈感來源。

這就是儀式感設計?看完我懂了

這就是儀式感設計?看完我懂了

2. 環(huán)境

雖然主體的設計已完成了儀式感的大部分工作,但是鮮花也需要綠葉的襯托呢。

擁有環(huán)境的襯托,可以讓主體的整體氛圍更上一層樓,文章開頭的網易云音樂就是一個例子。

還有58同城的勛章設計,有環(huán)境光的襯托顯得更加閃亮。

這就是儀式感設計?看完我懂了

五、最后

說了這么多,儀式感的設計更多也只是 在基礎內容/功能上做體驗優(yōu)化,屬于一種“錦上添花”的作用。

應該先滿足基礎內容/功能的“好用易懂”的情況下,再來設計儀式感上的“好看好玩”,不要本末倒置。

???還有,???不同的儀式感存在著不同的用戶心理,因此需要特別注意該場景下的用戶心理或情緒。

這就是儀式感設計?看完我懂了


文章來源:人人都是產品經理    作者:和出此嚴


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

交互設計原則之格式塔定律

ui設計分享達人

在做交互設計或者視覺設計時要遵循一些既有的原則,其中非常重要的一條就是【格式塔定律】

一、什么是格式塔原理?

        格式塔心理學誕生于1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并對它們編訂了目錄。其中最基礎的發(fā)現(xiàn)是人類視覺是整體的:我們的視覺系統(tǒng)自動對視覺輸入構建結構,并在神經系統(tǒng)層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區(qū)域。“形狀”和“圖形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。

       格式塔學派主張人腦的運作原理屬于整體論,“整體不同于其部件的總和”。例如,我們對一朵花的感知,并非純粹單單從對花的形狀、顏色、大小等感官資訊而來,還包括我們對花過去的經驗和印象,加起來才是我們對一朵花的感知。

       格式塔心理學家認為這些原則之所以存在,是因為頭腦具有天生的傾向,可以根據某些規(guī)則感知刺激中的模式。(是不是覺得hin神奇)

       比如,這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景,白色為圖形,則是一個花瓶;如果以黑色為圖形,白色為背景,則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。

二、什么是格式塔原理?

1、接近性原理
接近性原理說的是物體之間的相對距離會影響我們感知它是否以及如何組織在一起?;ハ嗫拷ㄏ鄬τ谄渌矬w)的物體看起來屬于一組,而那些距離較遠的則自動劃為組外。              

接近性原理的應用1--將相關元素彼此靠近放置

使用不同數(shù)量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如,在Ant Design的標題區(qū)域中,“ 搜索”功能與站點的主要導航位于同一行。但是,主導航和搜索之間的多余空格表示它們屬于不同的組,因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出,此空格至關重要。


但是,在較小的屏幕上,無法保持此間距。為了避免將這些區(qū)域視為一個整體,頁面收縮寬度的時候,搜索后的文字隱藏了。



接近性原理的應用2--構建清晰的結構

應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益,從而有效地將標題與下面滾動的頁面內容區(qū)分開。此外,大頁腳的單一統(tǒng)一背景色  可有效地表示該區(qū)域中的所有鏈接都屬于一個組。

創(chuàng)建清晰的邊界是一種強大的視覺提示,可以壓倒其他分組原則,例如接近性或相似性。因此,當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時,它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區(qū)分,那么我們可以用線框畫出邊界來達到目的。

2、相似性原理

如果其它因素相同,那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理,這也就是我們平時做視覺設計時的原理,比如我們設計稿宣講時可能會被開發(fā)、產品以及測試同學問到“為什么用這個形狀?為什么這里用這個顏色?為什么這兩個尺寸不一致?等等,細細體會這個相似性原理就會給我們答案,讓我們在畫設計稿時能夠有理有據。


A相似性原理之形狀:

在上圖中,我們頭腦中自然而然的會分成“四列”,也就是圓形一列,三角形一列,然后再圓形一列,三角形一列,而不會看成“三行”


B相似性原理之顏色:

應用共享的顏色來表示某些項目是相關的,因此可能具有相似的功能,這很有效。通用顏色往往比其他特征(例如形狀)更加突出,因此可以用于組合不同類型的元素并傳達它們確實相關。         

在用戶界面設計中,顏色通常用于指示常用功能。例如,使用單個鏈接顏色作為與用戶交流可點擊內容,鏈接顏色應僅保留給交互式文本和其他可單擊元素,因為用戶會意識到所有具有此特征的項目都是相關的,并且以相同的方式工作。因此,鏈接顏色不應用于關鍵字,不可點擊的標題或實際上不可點擊的附近圖標。

如上圖,就是一個用色的反面例子,“ 消息中心”中的所有按鈕均為綠色,因此用戶必須花時間確定哪個是提交表單的主要按鈕。(此外,“ 提交”按鈕離消息區(qū)域很遠,并且根據Fitts的定律,這種缺乏接近性也會降低用戶的速    度。)

相同顏色的按鈕將被視為具有相同的重要性級別。因此,應為主要操作性按鈕保留單獨的顏色,以幫助它們在輔助按鈕中脫穎而出。

C相似性原理之大?。?/span>大小也可以用來表示關系。大小相似的對象可能被認為是相關的,通常具有相同的重要性。

在用戶界面中,我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度,并且在所有其他條件相同的情況下,將共享該屬性的所有元素連接在一起。一致地使用大小會創(chuàng)建視覺層次結構,并使頁面易于掃描,因為人們可以立即看到并理解這些類型分組。

例如,在產品列表頁面中,每個單獨的產品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺樣式告訴我們該區(qū)域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現(xiàn)時,就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。


下面是我最開始嘗試的招聘系統(tǒng)首頁的改版:

根據上面的相似性原理和接近性原理就可以很容易看出來,這個頁面結構和邏輯不清晰:

1.待處理和招聘日程兩個模塊之間的區(qū)分不夠清晰:因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕(相似性原理),讓用戶在心理上產生聯(lián)想,同時這兩個模塊之間只靠間距來區(qū)分,區(qū)分的太弱了(接近性原理)

2.招聘日程頭部日期與下面的面試安排卡片聯(lián)系太弱:因為面試卡片用了非常強的邊界區(qū)分的線條(接近性原理-構建清晰的結構)確實在面試模塊之間構建了清晰的結構,與此同時卡片與頭部的日期之間看起來沒有什么關聯(lián)。

3.首頁的選中效果太弱,分析這個頁面的層級,左側首頁選中才應該是最重的,能讓用戶第一眼就知道在系統(tǒng)中的位置,很顯然目前來看很容易忽視首頁這個位置,關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。

根據格式塔原理中的相似性原理和接近性原理,對頁面的結構進行了調整,就看起來清晰多了。

所以,我們在制作完設計稿后,可以應用格式塔原理,分析下最終呈現(xiàn)給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。


3.連續(xù)性原理

視覺傾向于感知連續(xù)的形式而不是離散的碎片。

連續(xù)理解起來是很簡單的,但連續(xù)卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環(huán)連接成一個整體。在引導頁中經常會用到這個。

     

 4、封閉性原理

視覺系統(tǒng)自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。

閉合可以實現(xiàn)統(tǒng)一整體,這不難理解。但是有一個非常有趣的現(xiàn)象值得我們去觀察和思考,就是不閉合時候也會實現(xiàn)統(tǒng)一的整體,更確切的說,這種現(xiàn)象是一種不完全的關閉。這些圖形與設計給人以簡單,輕松、自由的感覺。所以,完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo,咬掉的缺口喚起人們的好奇、疑問,給人巨大想象空間。

5、對稱性原理

我們傾向于分解復雜的場景來降低復雜度。


6、主體/背景原理

我們的大腦將視覺區(qū)域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素,其余則是背景。這個原理經常會在海報設計中應用,這也是為什么我們做海報,做平面時,一定要制作好背景,背景的氛圍很重要。

文章來源:站酷   作者:ZZiUP

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

系統(tǒng)化總結「地圖標簽」設計

資深UI設計者

今天為大家?guī)淼奈恼率恰傅貓D標簽」設計。很多App會內嵌地圖功能,這些地圖的功能相對簡單,更多是起到查看和引導的作用,但在產品中又不可或缺~

除了常見的地圖類App,還有其他很多產品會根據使用需求嵌入地圖功能,通過在地圖頁中添加引導性的交互標簽,讓用戶了解所處的位置或者導航路線。

如何保持地圖頁面與產品風格統(tǒng)一,同時又方便用戶使用呢?通過系統(tǒng)化的方法可以快速實現(xiàn)地圖組件的選擇和歸類。

地圖組件的四種類型

1. 圖標

地圖上只標記圖標,這種呈現(xiàn)方式能地顯示地圖上的信息,減少內容遮擋,也是在設計中首先要考慮的類型。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

2. 文本

如果地圖上標記的內容沒有合適的圖標能展示出來,可以直接利用文本來描述。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

3. 圖標和文本

隨著地圖的放大縮小,氣泡信息的詳細程度也會發(fā)生變化。地圖放大時將圖標和文本相結合可以顯示更多的信息,而縮小時只顯示圖標。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

4. 圖標、文本和注釋

圖標,文本和注釋相結合的形式雖然能顯示更多的信息但是需要謹慎使用,因為氣泡的尺寸太大會遮擋地圖的內容,反而影響使用。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

只有當氣泡內容能顯著提升用戶體驗時,才使用這種類型。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

地圖組件的視覺樣式

大多數(shù)場景中,地圖組件的底部會有一個突出的箭頭,用來標記確切的信息或地址。

考慮到后期開發(fā)的難度,箭頭的位置應始終位于組件的中間。另外如果一個頁面中有多個地圖組件,可以將箭頭調整到頂部,防止發(fā)生重疊。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

1. 顏色

組件的顏色比較靈活,默認情況下是白色,但可以通過改變背景色來匹配品牌色。

顏色通常出現(xiàn)在圖標后面用來強調信息,如果沒有圖標可以把整個氣泡組件都填充上顏色。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

根據背景色的不同,文本和圖標盡可能使用黑色或白色,減少對內容的干擾。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

2. 狀態(tài)

地圖氣泡尺寸的大小根據點擊需求確定。白色輪廓加上膠囊形狀讓用戶能夠快速識別出可點擊的對象,選定后氣泡顏色會反轉。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

3. 內容縮放

組件基于地圖縮放級別和縮放速度展示不一樣的動畫效果。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

組件可用性指南

如何判斷設計出來的組件是否適合用戶使用?組件需要怎樣設計才能適用于不同的使用場景中,有沒有統(tǒng)一的規(guī)范?

1. 組件狀態(tài)

面對不同場景中的組件,提供多種狀態(tài):重疊、可見、收縮、聚類、分離。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

2. 密度

地圖中至少要保持40%的內容是始終可見的,這樣用戶可以明確位置信息,防止產生誤操作行為。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

利用聚類功能將相鄰的氣泡組件合并在一起,通過數(shù)字顯示包含的內容,這種形式利于用戶理解和操作。

3. 易讀性

易讀性在地圖中很重要,例如用戶手持使用手機時組件中的字體為15pt,當用戶駕駛導航時組件的字體會變?yōu)?4pt。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

另外還要考慮語言的選擇對組件的影響,最好避免在氣泡組件中使用長串字符,以防止地圖中的信息被遮擋。

簡單實用!系統(tǒng)化總結「地圖標簽」設計

如果必須要顯示長串字符,需要把氣泡組件的尺寸水平拉長至地圖尺寸的75%,然后換行且最多只能顯示兩行文本。

總結:點擊即導航

在開始設計地圖UI界面之前,有必要花費時間了解地圖組件的樣式、類型和可用性指南。

通過這些信息可以幫助設計師更快地確定方向,從而設計出清晰美觀的地圖界面。

文章來源:優(yōu)設    作者:Clip設計夾


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


《跨域------>三種跨域底層分析》

前端達人

 轉載:   原創(chuàng)作者: 

在這里插入圖片描述

1.方式一:利用< script >標簽,< script >不存在跨域問題


在這里插入圖片描述

2. (服務端解決)SpringMVC的controller中加入注解@CrossOrigin(value = “http://localhost:8080”)

即:給響應頭設置一個Access-Control-Allow-Origin屬性

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

3.(客戶端解決)使用Ajax中的JSONP實現(xiàn)跨域(常用)

3.1原理:利用< script >標簽

3.2代碼

將callback當成一個參數(shù)傳遞下去在這里插入圖片描述
在這里插入圖片描述
前后端運行結果
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

炫酷的大數(shù)據可視化設計賞析(六)

前端達人

隨著大數(shù)據產業(yè)的發(fā)展,越來越多的公司開始實現(xiàn)數(shù)據資源的管理和應用,尤其是一些在日常生活中經常使用大屏幕的大中型企業(yè)。此時,用戶界面設計者需要呈現(xiàn)相應的視覺效果。


隨著信息化的發(fā)展,智慧城市、智能油田、政務云、企業(yè)云等一系列信息化目標逐一實現(xiàn)。實現(xiàn)了以云平臺為目標的各資源管控、資源業(yè)務的管理。隨著管控觸角的延伸、云存儲的各種大數(shù)據,如何監(jiān)控、分析、展示出核心數(shù)據和重點數(shù)據其尤為重要。

在集團企業(yè)中、以運維中心人員為用戶群體,通過大屏實時掌握業(yè)務數(shù)據情況,在系統(tǒng)設計時既要考慮數(shù)據的直觀性,又要考慮視覺疲勞,在其界面構思上要結合行業(yè)特點、數(shù)據特性進行策劃,以立體感形式表現(xiàn)更佳。


接下來為大家介紹大屏可視化的UI設計。

jhk-1603104417830.jpg

jhk-1603104448545.png

jhk-1603104465945.jpg

jhk-1603104511381.jpg

jhk-1603104526366.jpg

jhk-1603104561136.png


 --大屏UI設計--

--大數(shù)據可視化ui設計賞析--

(圖片均來源于網絡)

點擊查看更多UI/UE設計案例??????

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



    更多精彩文章:

       

 大數(shù)據可視化設計賞析(一)

  大數(shù)據可視化設計賞析(二)

  大數(shù)據可視化設計賞析(三)

  大數(shù)據可視化設計賞析(四)

  大數(shù)據可視化設計賞析(五)

  大數(shù)據可視化設計賞析(六)

  大數(shù)據可視化設計賞析(七)





日歷

鏈接

個人資料

藍藍設計的小編 http://m.yvirxh.cn

存檔