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

          關于循環設計,可持續發展是商業領域非常關注的話題,作為UX需提前轉變思維,給企業帶來更多價值,一線大廠已在運用這種思維



          本文共 3589 字,預計閱讀 10 分鐘

          譯者推薦|本文從“可持續”和“設計”的兩點談起,來論述從線性經濟向可持續經濟的轉變,以及“可持續設計”的四個主要階段:理解、定義、制造、發布。

          “循環設計”不是為了追求時髦或者抬升設計地位,而是將這個已經日益庸俗化的“設計”冠為自己的定語,是設計本身發展所趨,以及可持續發展所需,設計界需要對自己的責任有所承擔,形成一個全局觀、系統性看待設計問題的方式。讓回收利用和可持續發展成為一種規范,從而做到一勞永逸。

          我們生活在一個呼喚變革的世界。在過去的50年中,現代社會所依賴的漫不經心和無休止的消費是不可持續的。我們從小就不關心自己的事情。如果有什么東西壞了,我們也就不修了。產品被設計成用完直接丟棄,而不是去修復。數字產品也不例外。然而,為了解決這些問題,出現了一種新的思維方式:循環設計(可持續設計)①。(益達說:其實這個理念和風格已經存在了很長的時間,大多應用在不為大眾所知的能源、材料再生流程之中,然而隨著時代的發展,循環設計可以變得更加普世。)

          ①注:循環設計是20世紀80-90年代產生的一種設計風格,他又稱回收設計,是指實現廣義收回和利用的方法,即在進行產品設計時,充分考慮產品零部件及材料回收的可能性,回收價值的大致方法,回收處理結構工藝性等于與回收有關的一系列問題,以達到零部件及材料資源和能源的再利用。它旨在通過設計來節約能源和材料,減少對環境的污染,使人類的設計物能多次反復利用,形成產品設計和使用的良性循環。

          那么,循環設計方法意味著什么?在數字產品上要如何使用?在回答這些問題之前,首先,我們需要仔細觀察我們是如何構建我們的世界,為什么這個世界已經不可持續了,并且要理解環保世界的需求是如何改變我們的思維方式,促使我們渴望從線性設計模型轉變為循環設計模型。


          向循環轉變


          我們的經濟主要基于“按需配置”流程之上。在此線性系統中,我們構建了會在一段時間后淘汰的產品,并且將其組件視為垃圾。與此相反,循環設計方法將產品的生命周期視為一個閉環,其中資源不斷地被重新利用。


          在“經典”線性模型中,產品經歷了生產、消費和破壞的各個階段,最終以浪費告終。在設計一款循環產品過程中,我們使用的方法包含四大階段,這四個階段形成了一個閉環,并形成了一個恒定的循環,在這個循環中,不僅僅只有閃閃發亮的、新的,未使用過的材料才被受歡迎。

           

          循環設計方法的四個階段是:

          理解 / 定義 / 制造 / 發布



          當我們同時看線性設計和循環設計模型方法時,有一點吸引人的是,開始設計東西的時候,方法的差異。從只是生產某種東西,到對我們將要生產的產品做出深思熟慮的決定,以及在實施過程中付出的努力和關心,這是一個大轉變。


          看看我們現在的立場


          為什么做出這種轉變如此的重要?我確信每個看新聞的人都聽說過氣候變化。NASA 致力于解決環境問題,因此我們都可以非常詳細地了解人類行為和無限增長對我們生態系統的影響。


          但好消息是我們不必繼續這樣做,因為我們可以很容易從數字世界中“產生”方式中學習事物的產生。電力廢棄物已成為現代世界的主要廢棄物來源之一。大量的手機和電腦被扔掉,隨之經濟是建立在每年都有新東西的基礎上的。


          當您的手機屏幕意外碎裂時,我們該怎么辦?我們知道如何處理它嗎?我們知道如何修理嗎?我們并不知道……但是幸運的是,有些設計師對此問題提出了解決方案。Fairphone② 是一種合乎情理,模塊化的智能手機,其組件數量很少,可以輕松更換和回收。大公司也應朝這個方向邁出一步,讓回收利用和可持續發展成為一種時尚和規范,一勞永逸。

          ② Fairphone:這家公司生產的手機希望實現全球手機供應鏈的公平貿易,具體而言就是不使用“沖突礦物”并且確保生產手機的工人沒有被奴役和壓榨,目前仍然堅持在非洲貧困和戰亂的國家進口材料,已經在剛果和盧旺達境內找到了一些礦山,用更好的商業實踐推動當地經濟更健康地發展。


          設計和設計師的重要性


          設計師,比任何其他專業人士,都更有可能在一轉變中產生巨大的影響的人。我還敢說,我們有責任采用可持續設計的方式行動和思考。因為是我們創造了那些最終出現在傳送帶上的東西。我們也有責任教育我們的用戶。幸運的是,越來越多的人重視具有可持續發展目標的產品或品牌,或者重視起在產品背后有意義的故事。同樣,可持續發展不僅成為流行語,而且成為一種價值觀,被越來越多的人意識到基于有限資源的無限增長是無法實現的目標。但是,要從線性經濟向可持續經濟轉變,我們需要學習不同的思維方式。幸運的是,智能設備和數字產品的時代帶來了一種復雜的設計思維方法,可以作為物理世界中生產鏈的范例。


          用戶體驗必須提供什么


          地球上有一個地方,您不能隨便丟東西:互聯網。這是一個對已有產品進行再構思的地方,您只能去完善它,不能丟棄它,因為如果您一夜之間說:“我不喜歡我的網站,明天我將推出一個全新的網站”,那您便會失去用戶。

          如果我們看一下可持續發展設計方法的四個主要階段,就會發現我們在用戶體驗設計中使用的方法與此很相似。

          讓我們再次看一下四個階段,然后將其更詳細地分解:

          理解

          當我們談論與循環設計相關的理解時,我們談論的是在開始設計一個未來的產品之前就了解它的用戶和環境。研究一直是數字產品設計的基礎。與數字產品的連接比與實體產品的連接要更多的涉及到人類的心理。因此不可避免地要開發出新的研究方法,以幫助我們洞察用戶在使用某種產品時的想法、感受和行為。但這不僅與用戶有關, 研究還必須深入到經濟領域,并研究未來產品的組成部分,同時牢記它們必須可被再次利用。


          定義

          在此階段,將定義(商業)目標,并構建一個商業模型畫布作為生產過程的計劃。用戶體驗使用這種方法已有一段時間了,讓涉眾參與其中,并在設計過程中更多地激活它們。為我們設計的產品設定一個目標是至關重要的,因為有了它,我們可以為用戶創造額外的價值。因此,無論是制作商業模型畫布還是舉辦精彩的價值主張研討會,在生產方式中實施這些方法都會對當前的生產流程產生巨大的影響。


          制造

          這是關鍵部分?,F在我們正在做的事情就好像沒有明天一樣。隨著每種無法回收的產品的出現,我們產生的廢料越來越多。但是循環方法是為產品創建一個原型,并定義將需要使用那些材料反映在產品原型上,并在定義階段概述的商業模型上定義材料。原型設計和構思是用戶體驗設計過程中的關鍵要素,這也是為什么需要制作原型。


          發布 

          根據循環設計模型,隨著產品的發布,生產周期進入了第四階段,然同時理解階段又重新開始了。對于數字產品來說,這是自然發生的事前:你發布一個產品,基于該版本收集反饋,然后構思它,周而復始,這個循環再次產生。


          但是,觀察這個循環并建立這些連接僅僅是冰山一角。在數字時代發展起來的設計思維給世界帶來了許多反思。


          變革中的大佬


          幸運的是,已經有許多大品牌意識到轉變的必要性,并采取和提出了數字設計思維方法來支持轉變,并建立循環設計的時代。根據《循環設計指南》,“我們應該把我們設計的所有東西都看作軟件產品和服務——這些產品和服務可以基于我們通過反饋得到的數據而不斷的發?!?


          用戶體驗研究和用戶體驗設計一直是在做的一件事是:基于全面的研究和真實的用戶需求來構建產品。上面的設計指南是非常復雜的工具,具有許多可能的方法。它強調了從產品到服務流程轉變的重要性,并展示如何使用敏捷流程并將其實施到構建產品的方法之中。


          IDEO(全球頂尖的設計咨詢公司)與 Ellen Macarthur Foundation(艾倫·麥克阿瑟基金會)合作,試圖“試圖通過設計構建一個具有恢復性和再生性的經濟框架”。在這里,您可以找到幾乎每個生產方面和領域——例如食品、時裝、經濟和設計——并在每個領域中提出解決方案,以打破線性生產系統。


          耐克還宣布了其基于循環設計模型生產高品質運動鞋的新方法原則。正如您已經看到的那樣,無論您身處哪個經濟領域,都可以為循環生產過程的蓬勃發展做貢獻,并成為一支主導力量。


          重要的結論


          我認為,作為設計師,我們始終要為變革而努力,并始終努力與客戶、產品或服務保持緊密的關系,并通過構思使其不斷完善,以實現這一目標。這是因為偉大的事情只有通過時間和不斷的反思才能實現。在離線世界中,數字設計過程也有很多東西可以貢獻。希望通過教育,能有更多的大公司意識到用戶真正想要的產品是具有更多功能并可持續使用的,而不僅僅是將它們當作一次性產品,一旦它們不像最初那樣光鮮就把她扔掉。

          轉自:站酷-大猴兒er



          2020的UI設計趨勢,我先收藏了(上)

          ui設計分享達人




          設計總是在變化。在過去一年里,我們不僅看見了五福的C4D運用,雙11的動效插畫運用,以及大量AR/VR智能的設計,還有蘋果黑暗模式的普及,新技術帶來新的體驗和解決方案。2020年,關注研究新興的用戶體驗趨勢,前段時間,在我星球里,我帶著設計師一起來研究關于2020界面設計趨勢,希望能幫助大家是設計中有所啟發。



           研究背景 



           隨著UI/UX領域人工智能的發展,和虛擬現實等新技術的變革,從前單一的內容很難滿足用戶的訴求,用戶的訴求也變得千人前面,所以在研究趨勢之前,我基于這些關鍵詞,來分析2020的設計趨勢。




           色彩趨勢 



          1.彩虹漸變


          這兩年來,彩色漸變一直是設計趨勢,設計師將大膽的漸變,飽和度更高的漸變運用在設計中去,讓整體的色彩感覺,更加年輕化與活躍。



           Apple一直是這個領域的引領者,隨著當年iPhoneX的發布,彩虹的漸變色,大膽的漸變風格瞬間成為設計師筆下的弄潮兒。



           這組插畫中,作者就運用了大面積的漸變,兩種顏色的運用,通過重疊,明度變化,豐富了整個設計層次。



           不僅在平面設計中,在網頁設計中,也是被大量運用,SWATCH的官網,清新的漸變配合動感的模特照片,以及和產品的完全結合,讓頁面充滿著活力。



           在移動端也是如此,金融產品的背景設計,銀行卡面的設計,可視化圖表的運用,都能看出大膽漸變還是很受歡迎。


          2.黑暗模式


          隨著google和facebook以及instagram這些知名應用都開始提供黑暗模式,國內微信也開始黑暗模式,2020黑暗模式設計,一定是需要設計師去關注的。


          黑暗模式,除了在黑暗中提高內容可讀性以外,還能減少用戶疲勞,還可以節約電池,所以黑暗模式在今年將是所有應用程序必不可少的一個功能。



           Google的黑暗模式運用,通過一個簡單的按鈕開關就可以切換,也可以根據系統定義切換。



           黑暗模式未來會成為一種標配,一個軟件設計在剛開始的時候就必須考慮進來。



           關于黑暗模式,正向當年iOS扁平化剛出來的時候,國內的很多產品都還沒有準備好,但是相信過不了多久,黑暗模式一定會普及開來,所以2020大家都應該提前去了解黑暗模式的,設計規范和細節。


          3.更大膽的一種顏色



           除了漸變色,那么大膽的單色在設計中運用也會越來越多,整個設計就一套色彩體系貫穿,大多時候以品牌色的形式去運用,配合留白,對比明顯的字體,整體給人印象深刻。



           在韓國的應用中用的比較多,它的優勢是色彩干凈,品牌整體感強,但是對設計師駕馭頁面能力也要求很高,因為大面積的單色,如果用不好就會很刺眼。


           Naverpay的設計,整個界面就是用的綠色漸變,清新同時也能很好和Naver品牌色進行結合。



           在它的很多頁面中,很多控件這個綠色運用的很巧妙,不會給人很刺眼的感覺,所以大膽的一種顏色運用在2020頁將是設計師值得去關注的一個方向。



          ▲ 掃碼加入知識星球,了解更多




           插畫趨勢  



          在過去幾年里,插畫是一種新的表達方式,越來越多的設計師,插畫師通過插畫表達產品的情緒,個人的情緒主張,那么在2020插畫的運用就得和品牌很好的融合起來,如果你的插畫是和品牌割裂的,需要注意。


          1.和品牌結合



           wibbite的插畫,標志性歐美的風格,除了插畫本身手法比較簡約模塊,插畫中運用的色彩和內容本身也很產品定位匹配。



           插畫對于品牌來說也是非常重要的一個因素,無論在界面設計,還是在品牌營銷很多場景都需要插畫去營造產品氛圍和氣質,插畫有助于將我們的品牌故事講述給聽眾聽,所以在構建一個品牌時候,插畫是非常重要的點之一,但是做之前一定要盡量多去了解我們為客戶提供的設計價值,只有了解了用戶價值,才能去定義去特色的故事,幫助產品。



           Uber系列插畫提供暖色,以及安全藍的運用,突出打車服務中安全的關鍵要素。




           Google的插畫系統也是如此,沒有很華麗的炫技,有的是對于多元文化的思考,設計場景的融合貫通。


          所以不難看出,插畫的方向一定是和品牌結合的,不會為了趨勢而趨勢,一定是圍繞內容去設計。



          2.3D插畫



          ▲ 如果說這2年,各種各樣的插畫手法百花齊放,那么隨著人們的審美變化,趨勢也從靜態變成動態,從平面變成3D,從今年的支付寶五福設計中大家應該能感覺到2020的插畫設計一定是往著3D方向,而且是動態3D方向演進的。



           谷歌一組插畫,結合與大腦、團隊合作、想法、密碼箱為圖形進行創意設計,人物造型可愛好玩,凸顯年輕化潮流。



           Apple在中國區App Store 的一組設計,整體設計以紅色為主,運用了象征中國元素的龍、紅包、燈籠、福字、紙牌作為設計元素,整體運用3D表達,凸顯年輕和趣味性。


          3.等距插畫



          等距插畫這兩年已經是一個主流風格之一,在未來還會接著流行,但是等距插畫未來或許和場景聯系在更緊密,在每年天貓雙11設計中,互動城的設計每年基本都是等距插畫風格,它的故事感和畫面感,都能讓人眼前一亮,所以電商的設計,在短時間內,大型活動場景基本都離不開這個風格。



           這組等距插畫場景故事感很強,建立了一個空間世界,作為網站主風格非常的吸引人。



           除了這種大的場景,等距插畫,在小的場景中,作為插畫規范也是運用比較多,它風格可輕可重,隨著5G時代到來,靜態可能會逐步演進成動態插畫。


          4.根據內容定制的插畫



          隨著內容的升級,對內容的表達也會被越來越重視,那么如何更好的把內容更生動表達出來,插畫就是很好的一個形式,根據內容定制的插畫,在很多產品中被運用到,互聯網教育,IT等領域。所以專門針對內容去設計插畫,在今年或許是一個趨勢,插畫不再是孤零零只是為了情感化而存在。



           Crowdrise的產品設計,整體就是運用作為整體設計語言,風格統一,內容突出,畫面效果好。



           插畫的形態終于不再是孤零零的只是用戶情感的表達,而是隨著內容的升級變化,在產品中發揮的重要性也越來越大。


          3.3D黏土插畫的運用


          3D設計因為今年設計師很喜歡用的樣式之一,我們將盡管3D已經存在了一段時間,但最近我們看到了很多模仿粘土樣式效果的3D插圖的興起。這將成為今年流行的設計趨勢,我們甚至還會看到很多藝術家在電影,插畫和廣告中結合了2D和3D風格。



           在instagran的一組設計中,設計師運用這種黏土和3D的方式設計,畫面充滿了生活感和溫暖。



           谷歌也在它們的項目中大量運用這種黏土風格設計,會顯得更加的現代和活潑,黏土的設計相對3D插畫區別在于更加細膩,線條上更加柔和。


           字體趨勢 



          這幾年越來越多的公司,開始定制字體,根據自己的品牌特質去做一些獨特的字體,從國外到國內,品牌定制字體未來或許還會越來越多,對于設計師好處來說,這些品牌字體很多都是免費開放給設計師用,會形成一個很高的商業環境。


          1.定制字體



           錘子發布了他們的Smartisan T黑字體。



           騰訊發布了定制的“騰訊字體”,相比原來傾斜的黑體字,騰訊的新字體更現代、更協調、更動感。運用起來也非常有力量感。


           阿里普惠體,隨著集團業務龐大,字體使用場景多且復雜,包括各產品客戶端、營銷設計、操作系統、硬件設備、建筑空間及公關傳播等等。決定以現代為核心設計理念,以可靠、明快為設計切入點,將阿里精神融入到字體當中。最終一款擁有現代感滿足全場景黑體誕生了,而且商用免費。




           除了前面的阿里,騰訊,錘子,小米OPPO,京東也都發布了自己的專屬品牌字體,所以在2020年,品牌字體或許是每個公司的一個標配了,我們拭目以待。




           國外其實是最早開始為品牌定制字體的,三星手機雖然銷量消化,但是他們品牌字體:SamsungOne,設計風格,很強的現代感,而且,這個字體有不同粗細的筆畫字重,適用面很廣。






           IBM的字體名稱:IBM Plex Sans Text,這款字體設計比較簡潔,干凈,沒有多余的筆畫,這個字體很良心免費商用的。


          2.粗體的運用



          縱觀2020的一些設計,留白越來越大,邊距越留越多,字體也變的很粗,粗的字體和正文普通字體形成了明顯的對比,再加上網格的布局,讓頁面內容更加凸顯。



           大字體的運用,字體就是內容,重復運用內容元素作為排版手段,對于內容組織和平面要求較高。




           在UI設計中,大字體的設計也很常見,蘋果商店,蘋果官方應用都是大字體的推崇者,隨便5G的來臨,對于內容的追求也會越來越高,那么除了大字體,視覺元素減少,內容本身質量要求也越來越高。


           粗的字體常用語大標題,或者頁面導航性指引作業,幫助用戶更好去理解功能本身,上面這個頁面粗的字體就是導航,告訴用戶這一頁,你需要去完成什么動作指引。



          ▲ 掃碼加入知識星球,了解更多




           最后 

           

          設計趨勢必然與技術發展緊密結合,作為設計師我們需要了解,以及平時和我們設計進行結合,下期將帶來,2020的UI設計趨勢下部分,看看還有哪些需要我們去關注的。

          轉自:ui中國-skys 

          APP數據可視化設計實戰分享

          ui設計分享達人

          我最近一直在想自己要寫什么,不如這次就來說說我最近在項目中遇到的問題吧~


          再給大家看看我的解決方案,如果大家有更好的方案歡迎留言,我們一起探討啊~


          最近一兩年我所涉及的項目都是有關于將網頁的功能系統改成APP,而針對的用戶就是公司的業務經理,是金融公司的業務經理們,我們的甲方爸爸!

          當然這就意味著網頁的產品,會有大量的數據,而且由于網頁產品的信息處理還沒有太與時俱進,所以大量的數據都是文字和數字的組合,因此要將這些數據改成APP時,就覺得好難啊。

          其實表單在APP上并不好放,最好的解決方法就是設計成圖表,而現在市面上圖標樣式不管是網頁的還是APP一搜一大把,Ant Design有專門的數據網站,如下圖所示:




          什么樣的都能找到,那么我為什么會覺得好難呢?因為數據超多der~考慮的內容又有很多,難免憂愁。



          一、為什么要設計圖表?


          因為數據表單在手機上并不好展示,同時從用戶體驗的角度上來考慮,數據本身都是數據組成,可讀性就不太好,因此如果把這些“數字”從商業目的、用戶動機進行有機組合、關聯或定義就使得數據變得有意義(價值),圖表只是最終的表現形式。



          二、圖表由哪些元素構成?


          一張標準樣式的圖表基本上是如下圖所標示的幾種元素組成,如下圖所示:



          當然這只是最基礎的一種圖標形式,對于別的形式就不多介紹了,大家都有基礎知識,本文將嘗試從圖表設計動機的角度和大家一起探討如何更好的進行圖表設計。



          三、圖表設計?


          1、明確數據指標


          首先,我們得先搞明白這些數據是怎么來的、干嘛的,盡可能要求他們給到你的是盡可能精準的數據,否則會導致接下來的工作前功盡棄。就舉我前幾天的例子來說吧,產品給了我這樣一張圖,如下圖所示:


          我沒有仔細的去問一些具體的信息,比如數據最多的時候會是什么樣、業務想在這個表里看到什么信息、想要解決的問題什么?這些我都沒有問!


          上來就是一頓設計操作,把表單設計成了這樣,如下圖所示:



          結果在走查的時候,業務很明確的指出數據信息不夠多,他們想要在頁面上將所有的數據信息都能看到,而數據最多的情況,數據表單是長這樣的,如下圖所示:



          就是因為一開始在拿到表單的時候沒有仔細去分析,才會導致這種情況的發生,因此要如何改進呢?




          2、明確設計目的


          其實圖表設計跟產品設計的思路有點類似,一開始要先明確的就是設計目標,但這個很容易被設計師所忽略,因此前期在缺少設計目標支撐的情況下,設計師就會像一個沒有指揮的小樂手,閉著眼睛亂彈,沒有方向感。 


          就像我之前設計方案被推翻,就是因為思考不明確導致的,定義設計目標的過程需要站在業務的角度和數據的角度進行綜合分析從而進行構建,一方面需要考慮業務如何更簡單的分析、理解數據從而提高決策效率;一方面又需要考慮數據本身如何更加精準、一目了然的傳達給用戶。




          3、規劃設計方案


          我在寫這篇文章的時候,看了很多相關的圖表文章,很多都是分析哪些不同類型的圖表,配色上要怎么處理,或者哪些圖標是用在什么地方的,對我都沒有太大幫助,因為圖表設計并不是普通的只是要好看的圖表而已。



          4、解決問題


          重新設計之前,我去找業務很詳細的了解了他們對于數據的需求,想要一目了然的看到所有的數據對比信息,數據在表單中要全部展示出來,數據后臺每天都會刷新,針對的場景是來自在去拜訪客戶路途中查看客戶目前的信息,我就將圖表改成了下圖所示:



          由于面對的數據信息比較多,條紋圖比較符合多數據的信息,當然這是數據最多的時候出現的情況,每家公司出現的數據是根據業務所提交的信息展現的。


          在功能確定了之后,就是我們的細節問題,不是說我們在750*1624的畫布上設計好了圖表就行了,我們還要考慮到適配的問題,如下圖所示:



          屏幕較窄的時候,將X軸的標簽文字打斜,保證數據正常閱讀的同時也不影響美觀度。還有一種解決方案就是有連續的數字時,可以有簡寫。



          四、如何選深色底和淺色底


          我們可以先來一個對比圖,同樣的數據在深色背景和淺色背景下的圖表可讀性做對比,如下圖所示:



          很顯然淺色背景下的圖表閱讀效率更高,那么面對復雜數據的時候,情況是否一致呢?如下圖所示:



          很顯然,深色更適合展示信息比較多的,突出重點信息的頁面,因此我們在找數據頁面參考,在選擇深色和淺色背景里猶豫的,可以參考一下。




          五、劃重點


          這里討論的只是我在公司項目中的其中一個圖表設計,不能說做的很多,只是分享一下自己在試錯的過程中的成長,從web端改到APP,都會說減少一些功能,讓產品更好用,但是總有不想砍功能的需求方,如何滿足這些需求,是需要我們一直都在思考的事情。


          轉自:ui中國-潘團子


          國外設計師分析的全新UI趨勢,原來是它~

          ui設計分享達人

          分享火爆Dribbble和Ins的設計趨勢




          相信最近很多小伙伴在逛Dribbble時候,發現最近流行一波新的設計風格,和以往不同的是,這次趨勢又回到之前擬物化了,但它與純擬物化還是有區別的,現在它有一個流行詞語叫“新擬態”,今天就和大家分享下國外一位設計師對這個趨勢的看法!





          擬態化是什么?

          -

          雖然UI以各種擬態化的形式存在(例如,您的桌面OS垃圾桶),現在這種風格的趨勢更加明顯。正如卡米爾·法拉納(Kamil Falana)指出的那樣,從無生命的“表達”到現實主義的過渡開始出現。



          不久前,我們還觀察到,這種變化開始在我們身邊發生,蘋果(IOS13系統)就是一個很好的例子。向最小化設計和輕擬物化發展,最終帶來了無紋理3d視覺感官。受到了大家的喜歡,來看一張高清圖。






          擬物化風格的回歸,會更好嗎?
          -

          如下圖設計風格,在dribbble上獲得認可度比較高!


          Dribbble用戶alexplyuto的作品獲得了四千多次贊,并帶動了這一趨勢。


          這種設計引發了一波設計潮流趨勢,盡管其中的有部分并沒有實際意義(可滑動的后退箭頭?),但這使我們對UI 再次產生濃厚的興趣! 

          備注:可看出目前扁平化設計過于雷同,用戶審美疲勞。偶爾出現新設計趨勢風格,反而更個給各位設計師們帶來新鮮感!





          新風格的特征點

          -

          由于按鈕的視覺表現看著變化不大(因為小了一些,不直觀),因此我們將重點放在實際的卡片概念上,以使這種視覺表現更能直觀感受出來



          - 現代材料卡片(右圖)
          如現代材料(升級版)卡片,通常是在畫布中以浮層的形式出現,厚度更加明顯。陰影既可以增加深度,也可以在很多情況下定義形狀本身,因為陰影通常是無邊界的。 

          - 擬態化卡片(左圖)
          擬態化卡片從背景中突出。它是由與背景顏色完全相同的卡片制成的凸起形狀。當我們從側面看時,它不會浮起來。 
          通過調節兩個陰影, 一個陰影為負值,另一個陰影為正值,很容易實現此效果。 但是要使其正常顯示,我們的背景不能是全黑或全白。它至少需要一點色調,以便可見“深色”和“淺色”陰影。您可以使用任何色調作為背景,以便根據您的選擇將其變暖或變冷。但是必須能看到深色或者淺色投影。 


          這是例子,根據您的喜好進行調整:






          優缺點

          -

          這種風格的主要好處是“新鮮”(至少持續很長時間)。它為界面帶來了“新感覺”,并使其脫穎而出。它也可以與其他樣式混合使用,這樣就避免很呆板整個畫面變成這種柔軟凸起的效果。

          到目前為止,有一些問題需要解決。我們發現了兩個主要問題:

          1. 可見性

          2. 易用性


          - 可見性

          圖形與背景對比度的主要問題是,當它們都是相同的顏色時,就沒有可測量的對比度;客觀上存在陰影,因此我們可以近似并嘗試測量其外部的第一個像素。在上面的示例中,我們得出了這些對比度值。


          如您所見,現代材料卡片和新擬態化卡片的對比度都非常低。并且卡片本身并不用于主要的操作控件上(只是一個背景),只要我們保持按鈕突出并具有足夠高的對比度,就可以了。 
          兩者之間的差異很小,如果我們想為卡片使用更好的對比度,我們就必須這樣做: 


          而且由于幾乎沒有人會嘗試使用如此強烈的陰影,這意味著其余UI元素必須可訪問。這種假設得出的結論是,如果我們通過版式,相近度和與重要元素的對比來進行正確的層次劃分,那么這些卡片/凸起的塑料卡片并不那么重要。

          尚未對此進行測試(我將嘗試找到時間做這件事),但現在我們假設下面元素的兩個“版本”均為“確定”。即使有些人看不到陰影,也有足夠的對比度讓他們看到圖標并“使用它”。



          - 易用性

          盡管“按鈕”看起來像按鈕,但是如果圖標本身與背景形成鮮明對比,它將仍然有效。 因此,這里要記住的主要事情是,如果要使用這種樣式,請以足夠高的對比度保留所有重要元素。

          畢竟,大多數“現代材料”卡片視圖也不會通過陰影來做對比。 





          僅僅是卡片嗎?

          -

          但是,如果我們決定將組件用作按鈕而不是卡片,則會出現可訪問性的主要問題。

          我們可以像下面的示例一樣輕松創建帶有內部陰影的按下狀態。


          對比度測試


          這里的問題實際上很大。 

          此按下狀態的對比度太小,不足以表示差異。是否可以通過改變的其余部分來表達按鈕的狀態,這里有一些想法,例如使用輪廓和填充圖標,下劃線或甚至用顏色填充按下狀態。


          嘗試各種想法,但狀態必須立即被識別。 




          開發

          -

          開發實現其實它比我們認為的在CSS中實現“軟陰影”外觀要容易。我們尚未研究Swift和Kotlin,但我認為這不應該成為問題。

          https://neumorphism.io/#55b9f3(實現新擬態效果CSS代碼)






          其他影響

          -
          剛才說的形狀只是一方面。這種設計新樣式還帶有更多的按鈕和圖標。通常情況下,我們只需要回到“過去的美好時光”并使用位圖。這似乎是一種回歸,不必擔心-這是沒有必要的。 

          您可以輕松地將可開發的設計與這些卡片形狀組合在一起(新擬態卡片),從而獲得很好的效果。







          我們真的需要這些嗎?

          -

          盡管這一新趨勢影響了許多設計師,但對比以前使用的卡片組件可訪問性問題相比,它的問題并不那么嚴重。

          所以去瘋狂的順應這一趨勢,并對其進行調整以使其成為您的趨勢。UI設計師的工作就是需要不斷來回挑戰自我,探索潮流,以符合產品審美。如果沒有這種不斷的探索的精神,所有產品將再次看起來相同,同質化嚴重。



          但也要記住,每個新趨勢都帶有不可抗拒性因素,如果要使用,必須精心的設計探索, 驗證后才拿去面對用戶。 



          個人感悟

          -

          本篇文章,作者通過對新擬態設計趨勢分析,在文中提及“新擬態”和以前材料卡片的區別,同時證實了新擬態風格優勢!但也存在一定的弊端!如何去權衡與設計的把控,需要設計師們多去研究探索!



          就我個人而言,我認為目前新擬態設計風格, 其實更適合像車機那種偏實體硬件的HMI設計又或者智能硬件平臺,智能櫥窗,智能鏡等,但是如果在移動端去使用,那么需要去適當做簡化。如何去簡化以適應新趨勢,這需要不斷去嘗試。 



          這一趨勢如果要盛行起來,需要大廠來引領, 比如今年蘋果會出現的IOS14或者Google材料3.0到來。 扁平化是蘋果帶來的,材料設計師google帶來的。 

          如今新擬態才初出茅廬,還未被廣泛使用,需要有先驅者引領。畢竟國內的環境大家都不敢冒險去嘗試運用到線上! 



          轉自:站酷-功夫UX 

          醫療院感可視化

          ui設計分享達人


          可視化是利用計算機圖形學和圖像處理技術,將數據轉換成圖形或圖像在屏幕上顯示出來,再進行交互處理的理論、方法和技術。面對醫療行業,如何將行業數據,轉化為視覺可視化中的點線面,是在這個項目中需要思考的問題。


          本文將帶來設計師在醫療院感可視化項目中的設計過程及思考,講述如何在業務場景下對數據進行抽取表達。通過可視化打破傳統院感系統的表單呈現,使院感場景具備互動性、觀賞性,滿足不同角色的使用需求。同時院感醫生通過可視化的解決方案能清晰直觀的了解到院感發生分布、病例分析,從而控制院感發生和預防。

          本項目以浙江省建德市第一人民醫院為案例,地理數據以建德醫院坐標為準。



          項目背景
          院感是什么?院感為醫院感染,入院48小時內都有可能感染到院感細菌。在醫院里有專門的院感醫生職位,對醫院感染進行有效的預防與控制。而傳統院感管理的工作流:醫護人員及院感醫生 > 院感系統分析疑似病例 > 得出結論預防或治療。這種偏人工的方式數據獲取方式,無法更的獲取院感發生的原因、定位、以及未來的院感預測。


          P1 因此我們通過對醫院數據的整理,抽離出影響院感的數據,將院感發生、發展、管控、治療、預測全流程進行整合。


          P2 通過醫院>樓層>人員三個層面,空間和時間兩個維度對院感展示。打破傳統院感系統的表單呈現,使院感場景具備互動性、觀賞性,滿足不同角色的使用需求:如院長的展示性需求。院感醫生通過可視化的解決方案能清晰直觀的了解到院感發生分布、病例分析,從而控制院感發生和預防。


          P3 同時在這樣的設計場景下,可以覆蓋的醫療業務場景和數據單位也會更多元,具有一定的商業化價值。


          P4 設計流程
          整個項目的設計流程可以分為4個階段:信息收集、可視化、線上搭建、效果調試。在此項目實踐中,重點投入在前三大部分。


          P5 Part1信息收集
          我們基于項目背景,梳理要展現的數據指標,對整體業務場景進行故事腳本的規劃(即如何展現前期的數據收集,并把其串聯在整體業務場景中),設定動作攝像機語言,同時也需要了解最終呈現的硬件設備與使用環境。


          P6 Part2可視化

          1.交互信息框架
          首先梳理院感的信息框架和交互方式。


          整個大屏分為院樓層,呈現整體院感數據的統計;樓層屏,作為重點病區的監測預測;個人屏,分析病例回溯病程,從而預測院感。三屏之間相互跳轉, 交互演示方式從醫院的外部跳轉內部結構、再到患者的個人維度,三屏都分別展示相關的數據指標。


          P7 2.視覺風格
          在大屏視效風格探索上,期初的目標是希望可以打造不一樣行業視覺語言,所以選擇不同于以往的設計大屏風格,選擇白色的風格,符合大家對醫護行業的認知。但到中期發現,在硬件設備上展示發是過曝的。因此對設計風格進行調整改為X光片的風格,色系上偏冷綠的感覺。這是在這個項目中的試錯經驗之一。


          P8 3.建模設計
          在可視化部分中遇到的難點:建筑模型的高還原。下圖為建德第一人民醫院實拍圖。在大屏項目中,必須真實還原地理位置。而在此醫院沒有清晰的CAD圖紙提供的;在Google的衛星地圖下也沒有的建筑結構的,所以我在建模的過程中,是踩了坑的,先盲畫了一版,但是精細度不夠,過于粗糙。


          P9 因此我反復看得到的資料,通過在確定地理氛圍內,去豐富場景。這樣的好處是使業務場景更加豐富,包括擴展到院外的車流數據,為業務場景提供更多可能性 當然后期也搖到了建筑內部的消防圖,根據消防圖繪制內部結構。


          P10 4.數據面板
          對可視化組件的組件進行設計:時間篩選、數據統計、占比關系、趨勢分析。設計之前也參考了很多概念版的可視化設計,希望在院感屏上可以呈現一種科技概念的感覺。



          P11 Part3線上搭建
          1.獲取地理數據
          這部分是非常耗時的,datav是數據驅動的可視化產品,在搭建部分,是全程依靠datav平臺的。
          首先需要明確地理數據,通過高德數據通過點線成面,可以作為場景定位,也就是物理模型的經緯度數據 后面還原數據效果,造虛擬數據,是非常依賴于這個坐標數據的。
          119.291724 , 29.472365
          這是建德醫院的坐標,醫院在地圖上的數據是很簡化的,顆粒度很大,具體位置無法顯示。

          P12 因此我們需要建立與地理數據綁定的建模,先對位置。

          P13 在這個過程中我發現,如果最開始沒有對準位置,也不用緊張,可以在DATAV平臺增加hook數據過濾器,解決地理數據與世界坐標無法對齊的問題。

          2.線上場景還原
          根據對確定過位置模型進行烘焙還原。這個過程中遇到了一些不知名的原因烘焙失敗,原因可能是命名有中文/位置數據錯誤/模型塊面復雜等,遇到這樣的問題就需要重新從頭檢查烘焙流程每一步。

          P14  3.數據維度展示還原
          這一步我們需要把前期做好的數據可視化效果,還原到線上模型中。在這一步我遇到的問題是因建德醫院內部具體結構的缺失,使一些可視化效果無法精準匹配到模型上。所以設計過程中只能依賴于在對的地理位置上豐富的場景內造數據,這個過程是比較吃力的。


          P15 這個問題的解決辦法是通過開發工具和導出的結構俯視圖,對位置,然后轉化出LEGO的數據



          P16 在數據效果還原的過程中,也發現我在前期設計的數據效果,不能全部實現,有些是依賴于開發的 。這時可以通過其他組件效果代替嘗試,比如熱力的效果用粒子放大,通過參數調節得到熱力 再比如局部房間的掃管,通過設計部分多次烘焙模型,不斷疊加掃光層,得到房間監測的效果
          P17 設計小結
          綜合以上的經驗,院感可視化從設計到落地,整體結構應該是這樣從物理基礎坐標的獲取、到場景搭建、再到數據展示的過程。在這個過程中會用到DATAV、C4D、數據庫、簡單的代碼等技術來實現。

          P18 這個項目雖然這只是醫療行業中一個小的業務場景,但我們的業務數據提取及可視化設計思路,他不僅限于醫療行業,同時也可以成為場館類大屏解決方案的一部分,是具有一定商業化價值的。同時在這過程中沉淀下來的人體結構模型,和一些設計經驗,是可以復用到對應行業解決方案中,達到提效。

          轉自:

          用戶不信任你做的產品/界面?不如試試這5招

          ui設計分享達人




          前言:


          什么是產品的信任感??


          指:基于產品為用戶提供‘可靠服務、價值依賴’的一種情感體驗。


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



          而在產品與用戶間建立信任感的過程中,我驚奇地發現有3個因素貫穿始終:理念 > 內容 > 表現。


          ‘基于什么樣的理念,向用戶傳遞什么內容,并且怎么表現。’



          所以,未來3篇文章主要圍繞‘信任感的打造’,希望能系統性地認識它,挖掘更多工作上可實用的小技巧。


          今天先分享第一篇:信任感的理念層



          信任的本質:是讓人覺得真誠、可靠、放心等。換句話說,它就是一種‘為用戶著想,建立產品溫度’的理念/方向,從而引導后續的內容都圍繞該理念而進行。


          那么,如何才能為用戶著想,慢慢建立起對產品的信任感呢??


          既然為用戶著想,那么可以試著從‘減少用戶的投入成本’切入。



          Part1:減少健康投入


          健康投入,指用戶使用我們的產品,可能會對身體上帶來直接或潛在的負擔/影響。比如視頻看久了,眼睛就會感到酸痛。


          針對這些負擔與影響進行的一些關懷提示,可以用戶提前消除、減輕這些痛苦,拉進與用戶間的距離。


          不同產品類型擁有專有的關懷點,所以比較通用的主要有5個:使用時長、使用姿勢、夜間休息、夜間護眼、音量大小。



          a.使用時長提示:


          除純工具類產品之外,大部分用戶在產品上都有一定的使用時長(尤其是內容消費類產品),對于‘連續使用N分鐘、或者滿足特定時長’的用戶,可針對該時長進行休息提示。


          如有道精品課,在用戶觀看課程滿40分鐘 時有個時長提醒:




          b.夜深關懷提示:


          深夜本身是一個休息的時間,但還是有大量的‘夜貓子’根本停不下來。不管是主動性的娛樂消費,還是被動性的信息/工作處理,都將手機‘進行到底’。


          此時對于‘深夜忙碌’中的用戶,夜間的關懷就是一個切入點:比如企業微信,會在深夜啟動頁上展示 ‘夜深了,xxx’的文案提示。



          雖然只是簡單的一句話,但還是能感受到鵝廠對員工的關懷。


          而且不管是C端還是B端,只要有用戶在深夜使用產品的可能,都可針對性地給予關懷設計,體現產品的‘人性’。




          c.夜間護眼提示:


          夜晚周圍的光線會變得幽暗,部分手機屏幕會自動變亮。時間一長會嚴重刺激用戶雙眼,并造成視覺疲勞(尤其是小學生群體)。


          此時對用戶進行護眼提示,不失為一個用戶關懷點。


          再如有道精品課:




          d.使用姿勢提示:


          我們日常都會將手機橫過來看視頻、看八卦。而且相信各位都有過這樣的經歷:



          當手機長期處于某個屏幕狀態+重力傾向時,用戶難免會出現手酸脖痛的情況。


          此時進行使用姿勢的糾正提醒,亦能起到關心用戶的效果,從而建立良好的產品印象。


          還是以有道精品課為例:



          e.音量提示:


          這個大伙都知道,過大的音量會影響耳朵聽力。一般出現在各種音頻、視頻的產品與功能中。





          Part2:減少金錢投入


          沒有人不會在意自己的錢包(除非你是對錢不感興趣...),金錢上的收入與支出很大程度上會影響 人們對某事物的看法。


          產品也是如此,若能幫用戶減少金錢上的支出,或者帶來真實收入。不僅能極大提升用戶對你的信任度與黏性,還能增加產品的競爭力。


          比如高德地圖的打車功能,能顯示所有車型的價格預覽,幫助用戶選擇所需價格的車型。



          無論是商品優惠券,還是返利。



          只要能幫助用戶錢包上的‘節源’或‘開流’,都能引發用戶的信任感,從而信賴產品。




          Part3:減少情感投入


          情感投入,是指用戶基于內心活動和情緒感受,對某事物所表現出來的一種想法。


          這種想法制約著 用戶是否接受我們的產品服務。一般體現在:安全性、性價比、真實性 3個方面。


          a.安全性 - 放不放心:


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


          就拿此次疫情來說,對于有‘出差住房’訴求的用戶來說,‘住的安全’是重中之重。因此尋找一家‘無感染、每日消毒、衛生干凈’的安全酒店,可以減低用戶選擇我們的警惕感。



          而在酒店列表中,帶有‘嚴格消毒’、‘健康守護’等安全標簽的酒店,會給人帶來一種安全、放心、信賴的心理效應,從而提升該酒店的轉化率。




          b.性價比 - 值不值得


          性價比是人們衡量‘付出成本與回報價值’間的一種決策依據,沒有誰會喜歡付出小于回報的事物。


          而為了讓用戶降低這種決策依據,除了自我服務/實力的展示外,往往需要一種“參照物”來凸顯性價比。


          如美團上的‘滿減神器’,通過不同的食物/價錢間的對比,讓用戶買到最具性價比的食物。



          而“參照物” 的形式多種多樣,不管是競品數據。



          老版本也屬于一種競品


          還是是各種優惠信息、額外禮物/禮包、售后服務等等。



          目的都是通過該參照物,向用戶傳遞一種‘劃算’、‘值得’的心理效應。



          c.真實性 - 真不真實:


          光是性價比高還只是片面依據,至于內容是否屬實,成為了我們與用戶建立信任感 中最重要的影響因素。因為沒有人喜歡被騙、喜歡虛假事物。


          而真實性的建立,在‘電商領域’應該被運用得最多。如大牌背書、證書授權、專家介紹、明星代言、官方保證、銷量成績、用戶反饋...等等。




          展示自己的真實、最具實力的一面即可,別過度吹噓與包裝,用戶又不傻。




          Part4:減少腦力投入


          人們一向不喜歡復雜的東西,除了不易理解外,更擔心因為自己的理解錯誤,會給帶來意外的損失。


          幫助用戶減少記憶負荷、順暢完成操作目標,是每個產品必不可少的設計點。


          如微信轉賬,輸入數字時會檢測對應的數額,減去用戶邊輸入 邊計算“這是多少錢”的腦力投入。



          而且對比支付寶的轉賬,微信這點確實做到了‘洞察用戶需求’。



          再如賬號注冊,提供‘剩余步驟’能讓用戶了解 當前處于哪一步、預測完成整個操作還需多久。





          Part5:減少體力投入


          除了記憶負荷,‘操作負荷’的減少也是一種‘為用戶著想‘的方式。我們身邊也存在太多這方面的例子:


          如手機上,如淘寶的快鏈彈窗、支付寶的轉賬提示,都是前置用戶的目標,縮短操作流程。



          如電腦上,如Mac會保存耳機音量。


          下次插入耳機時,會將揚聲時的音量,自動調整至上次耳機插入時 所記錄的音量。這樣就免去了重新調整音量的操作。


          以網易云音樂為例:注意 揚聲時和耳機插入后 的音量變化.



          這些都是幫助用戶快速使用,從而減少體力操作的方式。除了前置用戶目標、保存記錄 外,常見的還有:給予默認值、自動選擇/處理、多選與批量等等。



          總結:


          以上就是關于理念篇的內容,讓今后的內容設計有了明確的方向。下面是走查表,平時設計功能、制作界面的時候可以看看,增加產品的溫度。領取方式:公眾號回復【信任1】


          轉自:ui中國-

          淺析如何設計交互缺省頁

          ui設計分享達人

          大綱



          1 哪些狀態需要缺省頁  
          2 缺省頁的表現形式
          3 缺省頁的設計技巧

          導語:缺省頁指頁面的信息內容為空或信息響應異常的狀態;設計缺省狀態的作用不僅是引導用戶在異常邊界狀態的操作提示,同時也是安撫用戶體驗情緒的重要場景;更重要的是為邊界場景營造出良好用戶體驗。通過分析缺省狀態產生的原理,從而更為準確的把握交互缺省頁的設計原則。


          1 哪些狀態需要缺省頁 

          談到缺省頁面可能是設計師最容易忽略輸出的范圍,可能直到對接的開發同學提出來,“這個頁面,如果沒有數據的時候,該怎么顯示啊?”。為了更好的把控設計缺省頁交互狀態,首先要了解缺省頁出現的原理。App頁面內容(包括圖片、文字、數據字段等等)都是請求服務器數據,順利返回后,正常顯示到客戶端頁面。在了解清楚基礎實現邏輯后,就可以開始梳理整理缺省狀態的設計思路。



          圖1 缺省狀態的場景梳理圖


          缺省狀態包括:系統層、信息層、空白層。
          系統層:指當用戶請求服務器時,返回提示請求提交失敗,并檢測到失敗原因時呈現的頁面;例如:加載失敗、服務器異常、無網絡等;頁面一般會有重新請求的快捷按鈕。文案上可做失敗原因的細分描述,也可節約成本使用網絡異常的統一文案。

                              


                                                         
          信息層:請求服務器數據成功,但返回的數據異常的頁面;例如:內容已刪除、內容已下架、內容不存在;文案內容以提示數據類型的缺失為主。顯示形式除了常有的全屏缺省圖,還會出現在數據列表下單一內容缺失的缺省模塊化的情況,例如:單一作品在書架上顯示已下架。





          空白層:請求服務器數據成功,但顯示無數據;內容頁在無數據時需要缺省狀態進行表達;例如:頁面空數據、搜索無結果等??瞻醉撁鎸儆谡>W絡顯示場景,所以一般會在缺省頁附帶有相似屬性模塊的用戶引導,爭取用戶重復消費的目標,滿足用戶的操作的訴求。



          最后根據每個不同的缺省狀態,梳理產品相對應的場景。逐一根據場景特點來設計頁面內容。那缺省頁的設計有哪些表現形式呢?


           2 缺省頁的表現形式 

          沒有用心設計的缺省頁無法給用戶帶來良好用戶體驗,并可能給用戶帶來困擾,如下圖:某小眾直播平臺的拉新邀請頁面,無邀請記錄狀態下沒有任何有效反饋信息,用戶不能明確得知到底是網絡問題還是賬號同步出錯亦或者是沒有一次邀請。正確的缺省頁設計內容理應明確表達出符合用戶心理預期的視覺場景表達(圖形);和使用易理解和語法恰當的表達當前的異常狀態(標題)甚至于引導用戶解決問題的文案描述。



          圖5 缺省頁的錯誤示范

          2-1視覺圖案+文案

          此類缺省設計形式一般應用于表達系統性無響應或初始空白態的缺省場景。視覺圖案一般使用app吉祥物或主色調延展出的icon或插畫來表示缺省狀態;文字:通常為“標題”或“標題+描述”結構;標題通常是表達出現缺省的原因;描述文案則說明結束缺省狀態的解決辦法,如“請檢查網絡是否順暢”  等等。



                         
          2-2 視覺圖案+文案+引導

          此類缺省設計形式一般運用于需要用戶引導操作來達到業務目標的缺省場景。在視覺圖案+文案的基礎上加入引導模塊,主要作用于避免用戶在數據邊界的狀態下,會因為無法達到操作目而提高的跳出率。引導模塊的內容包括:相似屬性內容,相似行為目標按鈕或解決缺省狀態操作按鈕,加入引導,用戶進行某項行為或者感知某些信息,對于功能的教學和使用頻率的提升有著重要作用。引導模塊的形式也是日新月異,逐漸變成新用戶業務引導的作用,不僅限于頁面平鋪,也可以做成固定氣泡微動效,例如:抖音的發布缺省頁。

           



                                           
          3 缺省頁的設計技巧 

          缺省頁除了常規的提示型設計方法,還有許多其他的設計技巧,幫助用戶體驗在遇到困難,更好地安撫用戶的情緒。這些設計技巧有些是替代原來的缺省內容,讓用戶有更多地消費空間與深度。有些是拓展缺省狀態的補充內容,讓用戶不容易跳出頁面,增加用戶的消費時長。具體如下:

          3-1 使用推薦內容

          缺省狀態中的空白層非常影響邊界情況的用戶體驗,提出一種假設,是否可以刻意推薦相同屬性的內容呢?這樣的界面既不會顯得蒼白無力又可以留住用戶的注意力。相似性的內容也可以解決用戶目標的迫切性。所以說,這種方法非常適合內容型產品中使用。例如:新用戶在打開電商產品的購物車時候,理應是空白無消費行為的操作記錄。那么平臺方通過用戶畫像與熱門排行算法推薦了一個商品流。這樣可以解決用戶無目標性挑選的訴求,增加消費時長。至于產品如果確定用戶畫像的推薦算法,可以通過獲取第三方登錄的個人基本數據之后,才給我推薦了數據庫內相對應標簽的熱門商品,這樣推薦的精準度也會高些。 
                       




          3-2 使用緩存

          是否使用緩存內容代替缺省狀態?根據產品特性來判斷,工具類、金融類等同類型產品不適合使用緩存;因為用戶交互操作的數據必須保持實時性與真實性。而內容型、電商類等類型產品適合使用緩存來代替缺省狀態;理由:用戶消費內容的轉化路徑是先消費后轉化的行為特點,不存在系統操作門檻,且緩存內容可以代替產品的缺省狀態,安撫用戶操作失敗所帶來跳出率過高的風險。

          3-3 情感化表達

          當缺省頁給到用戶時,通常省時省力的做法就是老老實實告訴用戶當前的狀態,最多配上一個具有通識性的灰色icon。但是,秉持著以用戶體驗為己任的時代,我們其實可以把缺省內容表達得更加生動形象一些。在這里會加入一些情感化的表達,而不是僅僅只是做到準確的目標而已,比如加上活潑的插圖故事,或者把文案寫得更加擬人化、喜劇化一些。這些配圖在讓用戶明白當前的狀態的同時,往往也能引發用戶會心一笑,從而彌補空白頁面帶來的失落感甚至可以帶給用戶一些正面的情感。如下圖:
                           



          3-4 提供新任務

          通常缺省頁的引導模塊都著眼于解決當前任務。如果碰到沒有解決方案的情況(例如:404,服務器崩潰等)可以提供給用戶具有情感共情的新任務,讓他們暫時忘記無法達到目標的挫敗感,又有體諒的情懷。幫助建立正向積極的品牌價值觀。例如:訪問騰訊網時訪問失敗的時候,網頁除了顯示404狀態之外,還會顯示騰訊“寶貝回家”的公益尋人計劃。將缺省頁與公益內容相結合,不僅改善到用戶缺省狀態。也貫徹騰訊價值觀“用戶為本,科技向善”的輸出。一個好的缺省頁也可以承擔社會責任,讓公益傳播到每個角落。



          圖10 騰訊網404公益任務缺省頁

          結語:作為設計師有時會聽到需求方表述“這種極少出現的情況,我們可以暫且不管它?!钡羌毠澮娬嬲?,所有優秀的體驗設計都必須照顧到方方面面的缺省情況。讓每個用戶的流量價值發揮到最大,產生相互信任的良好的品牌關系。這樣的平臺生態是良性的,這樣的產品會更有流量轉化的商業化價值。


          轉自:ui中國-騰訊動漫TCD

          語音交互中的“等待體驗”研究

          ui設計分享達人

          語音交互是最自然的人機交互方式,它極大地降低了人們與機器交互時的學習成本,已成為非常重要的人機交互方式。


          回顧人機交互發展史,人類先后經歷了基于命令行的CLI 時代,基于鼠標鍵盤的GUI時代,基于觸摸的初級NUI時代。后面每一個階段比前一個階段更自然,學習成本更低,綜合效率更高。

           


          進入AI時代,人工智能給機器帶來三種能力:感知能力、認知能力、自然語言輸出能力。感知能力使機器能聽得懂人類語言,認知能力使機器能思考如何回答人類問題,自然語言輸出能力使機器可以像人類一樣表達——三種能力的綜合運用將人機交互帶入語音交互階段。語音交互是最自然的人機交互方式,它極大地降低了人們與機器交互時的學習成本,將人機交互綜合效率帶上新的臺階,已成為非常重要的人機交互方式。

          、“等待體驗”——語音交互體驗的三分之一

          生活中人與人的對話場景,對話是由“向對方說出一句話”、“等待對方回復”、“對方給出回復”三個階段不斷循環構成。其中“等待對方回復”是對話體驗的“三分之一”,會對回復的滿意度造成直接影響。在等待回復階段,如果對方處于認真思考的狀態,會讓我們覺得被重視;然而,如果在等待過程中對方的注意力不在對話本身,即便對方給出的回復再好,我們也會心存疑慮。



          對應到人機語音交互中的三個部分——“輸入體驗”、“等待體驗”、“回復體驗”,“等待體驗”同樣處于整個體驗循環鏈的中間環節,在語音交互體驗中起到了承上啟下的重要作用。但是,關于語音交互中的“等待體驗”在行業尚未被系統的研究,依舊處于模糊狀態。

           

          1. 響應時間一定是越短越好嗎?

          數字性能管理平臺Dynatrace對用戶瀏覽網頁的行為進行了研究,發現當網頁加載速度提升0.5秒,可促進用戶在網站的行為轉化核心數據提升10%。因此,在網頁設計和App設計中,盡量縮短等待時間是產品設計的不懈追求。

           

          不同于基于視覺的交互,語音交互天然附帶情感屬性。然而,情感的體驗是復雜的,它不只受效率這個單一變量的控制。大多數情況下,在生活中人與人對話時,一個過快的回答會給用戶帶來輕浮感和搶話感,而一個過慢的回答會給用戶帶來遲緩感和愚鈍感。


          那么,在語音交互中,究竟什么樣的響應時間能有最佳的體驗呢?響應時間的體驗趨勢是怎樣的呢?

           

          2. 等待體驗受哪些變量的影響?
          在視覺設計領域,當設計頁面的loading態時,為降低用戶的跳出率,設計師時常會通過給出進度條,或采用趣味性的情感化設計來消除用戶的不安情緒。

           

          但是在語音交互領域,語音的承載體是無形的,或不確定形態的,我們甚至沒有承載loading態的界面。在這種情況下等待體驗又受哪些變量影響呢?影響的程度怎樣呢?

           

          綜上,可以說在語音交互領域,等待體驗雖然重要,但目前仍是“一團迷霧”。鑒于此,我們以目前語音交互的主要載體——智能音箱產品為例,對AI產品中的等待體驗問題進行專題研究。

           

          二、智能音箱的等待體驗研究

          目前的智能音箱,主要采用先語音喚醒后輸入指令的語音交互流程。鑒于此,我們可以將智能音箱的使用過程分為兩個主要階段:

          1)喚醒階段:用戶通過指定的喚醒詞將音箱從等待態轉換為就緒態,音箱被喚醒后才可以接收用戶的語音指令。

          2)用戶請求及反饋階段:用戶給出語音指令內容以及智能音箱反饋結果滿足用戶的需求。

           


          針對這兩個階段,我們先后通過以下三個實驗進行研究。

          實驗一:喚醒階段的響應時間對等待體驗的影響;

          實驗二:用戶請求及反饋階段的響應時間對等待體驗的影響;

          實驗三:視覺、聲音等不同反饋方式對等待體驗的影響。

          下面我們對每個實驗的結論進行逐一詳述:

          實驗一:喚醒階段的響應時間對等待體驗的影響

          為了全面考察喚醒階段各種因素對等待體驗的影響,在實驗中,我們為用戶提供了不同喚醒響應時間和不同喚醒反饋方式的智能音箱。用戶完成實驗任務后,需要對音箱的喚醒響應速度進行評價(5點量表:太快了,接受不了;有點快,能夠接受;剛剛好;有點慢,能夠接受;太慢了,接受不了)。



          實驗一的結果表明最佳的喚醒響應時間與喚醒反饋方式有關,不同喚醒反饋方式下,最佳響應時間不同:

          1)當喚醒反饋為"燈光"反饋時,喚醒響應速度越快越好,在200ms時,用戶響應舒適度最高(對響應時間評價為剛剛好的用戶比例),73%的用戶對速度滿意。

          2)當喚醒反饋為"燈光+音效"時,喚醒響應速度的舒適時間為300ms左右,76%的用戶對速度滿意。

          3)當喚醒反饋為"燈光+人聲"時,喚醒響應速度的舒適時間為500ms左右,74%的用戶對速度滿意。

          (注意:本次實驗設置了市面上主流的三種喚醒反饋方式:燈光、燈光+音效、燈光+人聲,以給不同反饋情況的響應時間感受作參考,但對最優反饋方式,除了響應時間還受其他因素影響,將另著篇章探討。)



          實驗二:用戶請求及反饋階段響應時間對等待體驗的影響

           

          由于用戶請求及反饋階段的響應在技術實現和用戶預期上,與喚醒階段的響應存在差異,因此我們通過第二個實驗對用戶請求及反饋階段的最佳響應時間范圍進行研究。在實驗中,我們為用戶提供了不同響應時間設置的智能音箱。



          實驗二的主要研究發現:

          1)1250ms以內是用戶認為響應速度較優的區間,其中650ms為最佳體驗值。在450ms時,少量用戶覺得響應速度太快了,用戶會感覺到緊迫感和壓力,難以接受。

          2)在1450ms時,有53%的用戶開始感覺響應有延時,但仍能夠接受。

          3)從2150ms開始,有20%的用戶認為音箱響應太慢,不能夠接受。我們認為20%的用戶不滿意,已經不足以被稱為一個優秀的產品。



          實驗三:視覺、聲音等不同反饋方式對等待體驗的影響

          由于目前市場上的智能音箱在請求反饋階段的響應時間普遍在1.5秒以上,并沒有達到實驗二研究的理想響應區間。因此,我們通過實驗三進一步研究反饋方式設計對用戶響應速度感知的影響,我們為用戶提供了五組具有不同反饋方式設計的方案。



          在實驗三的五組方案中,每組方案分別進行了不同響應時間設置。



          實驗三的主要研究發現,不同反饋方式設計會影響人們對音箱響應速度的感知



          1)1250ms以內,方案D感受較差,人聲反饋會產生搶話的感受,部分用戶認為音箱響應太快。



          2)1350ms到2150ms,方案D、E感知舒適的用戶比例較高,加入人聲/音效后,如方案D的語音應答“好的”,有助于緩解用戶延遲感受,提升速度感知體驗。



          3)在3150ms及以上的響應時間,響應方式設計對緩解延時的作用已經不明顯,應該盡量避免此類情況發生。


          此外,實驗三還發現響應速度預期與用戶性別、任務類型有關。與男性相比,女性用戶對響應時間容忍度更低,她們最長在音箱無反饋時可以容忍的平均響應時間長度低于男性,即她們希望在更短的時間內得到音箱的響應反饋。



          與音樂類、問答類等任務相比,用戶對控制類任務的響應時間容忍度更低,用戶希望在控制類任務中有更加及時的響應反饋。



          三、小結

          本文針對語音交互中的等待體驗進行了討論,并以智能音箱為例,重點對喚醒階段和請求反饋階段的響應時間和反饋方式進行了人類工效學實驗研究。由于實驗設定的條件和樣本數量等限制因素,實驗研究結論可能不能代表所有智能音箱用戶在家居環境的全部感受,但希望通過我們的研究和探索,可以指導人工智能語音對話產品響應時間和反饋方式的設計,幫助打造自然和的語音對話體驗。

           轉自:站酷-DUBEST

          循環設計,用戶體驗如何呼喚時代變革

          ui設計分享達人

          關于循環設計,可持續發展是商業領域非常關注的話題,作為UX需提前轉變思維,給企業帶來更多價值,一線大廠已在運用這種思維


          本文共 3589 字,預計閱讀 10 分鐘

          譯者推薦|本文從“可持續”和“設計”的兩點談起,來論述從線性經濟向可持續經濟的轉變,以及“可持續設計”的四個主要階段:理解、定義、制造、發布。

          “循環設計”不是為了追求時髦或者抬升設計地位,而是將這個已經日益庸俗化的“設計”冠為自己的定語,是設計本身發展所趨,以及可持續發展所需,設計界需要對自己的責任有所承擔,形成一個全局觀、系統性看待設計問題的方式。讓回收利用和可持續發展成為一種規范,從而做到一勞永逸。

          我們生活在一個呼喚變革的世界。在過去的50年中,現代社會所依賴的漫不經心和無休止的消費是不可持續的。我們從小就不關心自己的事情。如果有什么東西壞了,我們也就不修了。產品被設計成用完直接丟棄,而不是去修復。數字產品也不例外。然而,為了解決這些問題,出現了一種新的思維方式:循環設計(可持續設計)①。(益達說:其實這個理念和風格已經存在了很長的時間,大多應用在不為大眾所知的能源、材料再生流程之中,然而隨著時代的發展,循環設計可以變得更加普世。)

          ①注:循環設計是20世紀80-90年代產生的一種設計風格,他又稱回收設計,是指實現廣義收回和利用的方法,即在進行產品設計時,充分考慮產品零部件及材料回收的可能性,回收價值的大致方法,回收處理結構工藝性等于與回收有關的一系列問題,以達到零部件及材料資源和能源的再利用。它旨在通過設計來節約能源和材料,減少對環境的污染,使人類的設計物能多次反復利用,形成產品設計和使用的良性循環。

          那么,循環設計方法意味著什么?在數字產品上要如何使用?在回答這些問題之前,首先,我們需要仔細觀察我們是如何構建我們的世界,為什么這個世界已經不可持續了,并且要理解環保世界的需求是如何改變我們的思維方式,促使我們渴望從線性設計模型轉變為循環設計模型。


          向循環轉變


          我們的經濟主要基于“按需配置”流程之上。在此線性系統中,我們構建了會在一段時間后淘汰的產品,并且將其組件視為垃圾。與此相反,循環設計方法將產品的生命周期視為一個閉環,其中資源不斷地被重新利用。


          在“經典”線性模型中,產品經歷了生產、消費和破壞的各個階段,最終以浪費告終。在設計一款循環產品過程中,我們使用的方法包含四大階段,這四個階段形成了一個閉環,并形成了一個恒定的循環,在這個循環中,不僅僅只有閃閃發亮的、新的,未使用過的材料才被受歡迎。

           

          循環設計方法的四個階段是:

          理解 / 定義 / 制造 / 發布



          當我們同時看線性設計和循環設計模型方法時,有一點吸引人的是,開始設計東西的時候,方法的差異。從只是生產某種東西,到對我們將要生產的產品做出深思熟慮的決定,以及在實施過程中付出的努力和關心,這是一個大轉變。


          看看我們現在的立場


          為什么做出這種轉變如此的重要?我確信每個看新聞的人都聽說過氣候變化。NASA 致力于解決環境問題,因此我們都可以非常詳細地了解人類行為和無限增長對我們生態系統的影響。


          但好消息是我們不必繼續這樣做,因為我們可以很容易從數字世界中“產生”方式中學習事物的產生。電力廢棄物已成為現代世界的主要廢棄物來源之一。大量的手機和電腦被扔掉,隨之經濟是建立在每年都有新東西的基礎上的。


          當您的手機屏幕意外碎裂時,我們該怎么辦?我們知道如何處理它嗎?我們知道如何修理嗎?我們并不知道……但是幸運的是,有些設計師對此問題提出了解決方案。Fairphone② 是一種合乎情理,模塊化的智能手機,其組件數量很少,可以輕松更換和回收。大公司也應朝這個方向邁出一步,讓回收利用和可持續發展成為一種時尚和規范,一勞永逸。

          ② Fairphone:這家公司生產的手機希望實現全球手機供應鏈的公平貿易,具體而言就是不使用“沖突礦物”并且確保生產手機的工人沒有被奴役和壓榨,目前仍然堅持在非洲貧困和戰亂的國家進口材料,已經在剛果和盧旺達境內找到了一些礦山,用更好的商業實踐推動當地經濟更健康地發展。


          設計和設計師的重要性


          設計師,比任何其他專業人士,都更有可能在一轉變中產生巨大的影響的人。我還敢說,我們有責任采用可持續設計的方式行動和思考。因為是我們創造了那些最終出現在傳送帶上的東西。我們也有責任教育我們的用戶。幸運的是,越來越多的人重視具有可持續發展目標的產品或品牌,或者重視起在產品背后有意義的故事。同樣,可持續發展不僅成為流行語,而且成為一種價值觀,被越來越多的人意識到基于有限資源的無限增長是無法實現的目標。但是,要從線性經濟向可持續經濟轉變,我們需要學習不同的思維方式。幸運的是,智能設備和數字產品的時代帶來了一種復雜的設計思維方法,可以作為物理世界中生產鏈的范例。


          用戶體驗必須提供什么


          地球上有一個地方,您不能隨便丟東西:互聯網。這是一個對已有產品進行再構思的地方,您只能去完善它,不能丟棄它,因為如果您一夜之間說:“我不喜歡我的網站,明天我將推出一個全新的網站”,那您便會失去用戶。

          如果我們看一下可持續發展設計方法的四個主要階段,就會發現我們在用戶體驗設計中使用的方法與此很相似。

          讓我們再次看一下四個階段,然后將其更詳細地分解:

          理解

          當我們談論與循環設計相關的理解時,我們談論的是在開始設計一個未來的產品之前就了解它的用戶和環境。研究一直是數字產品設計的基礎。與數字產品的連接比與實體產品的連接要更多的涉及到人類的心理。因此不可避免地要開發出新的研究方法,以幫助我們洞察用戶在使用某種產品時的想法、感受和行為。但這不僅與用戶有關, 研究還必須深入到經濟領域,并研究未來產品的組成部分,同時牢記它們必須可被再次利用。


          定義

          在此階段,將定義(商業)目標,并構建一個商業模型畫布作為生產過程的計劃。用戶體驗使用這種方法已有一段時間了,讓涉眾參與其中,并在設計過程中更多地激活它們。為我們設計的產品設定一個目標是至關重要的,因為有了它,我們可以為用戶創造額外的價值。因此,無論是制作商業模型畫布還是舉辦精彩的價值主張研討會,在生產方式中實施這些方法都會對當前的生產流程產生巨大的影響。


          制造

          這是關鍵部分?,F在我們正在做的事情就好像沒有明天一樣。隨著每種無法回收的產品的出現,我們產生的廢料越來越多。但是循環方法是為產品創建一個原型,并定義將需要使用那些材料反映在產品原型上,并在定義階段概述的商業模型上定義材料。原型設計和構思是用戶體驗設計過程中的關鍵要素,這也是為什么需要制作原型。


          發布 

          根據循環設計模型,隨著產品的發布,生產周期進入了第四階段,然同時理解階段又重新開始了。對于數字產品來說,這是自然發生的事前:你發布一個產品,基于該版本收集反饋,然后構思它,周而復始,這個循環再次產生。


          但是,觀察這個循環并建立這些連接僅僅是冰山一角。在數字時代發展起來的設計思維給世界帶來了許多反思。


          變革中的大佬


          幸運的是,已經有許多大品牌意識到轉變的必要性,并采取和提出了數字設計思維方法來支持轉變,并建立循環設計的時代。根據《循環設計指南》,“我們應該把我們設計的所有東西都看作軟件產品和服務——這些產品和服務可以基于我們通過反饋得到的數據而不斷的發?!?


          用戶體驗研究和用戶體驗設計一直是在做的一件事是:基于全面的研究和真實的用戶需求來構建產品。上面的設計指南是非常復雜的工具,具有許多可能的方法。它強調了從產品到服務流程轉變的重要性,并展示如何使用敏捷流程并將其實施到構建產品的方法之中。


          IDEO(全球頂尖的設計咨詢公司)與 Ellen Macarthur Foundation(艾倫·麥克阿瑟基金會)合作,試圖“試圖通過設計構建一個具有恢復性和再生性的經濟框架”。在這里,您可以找到幾乎每個生產方面和領域——例如食品、時裝、經濟和設計——并在每個領域中提出解決方案,以打破線性生產系統。


          耐克還宣布了其基于循環設計模型生產高品質運動鞋的新方法原則。正如您已經看到的那樣,無論您身處哪個經濟領域,都可以為循環生產過程的蓬勃發展做貢獻,并成為一支主導力量。


          重要的結論


          我認為,作為設計師,我們始終要為變革而努力,并始終努力與客戶、產品或服務保持緊密的關系,并通過構思使其不斷完善,以實現這一目標。這是因為偉大的事情只有通過時間和不斷的反思才能實現。在離線世界中,數字設計過程也有很多東西可以貢獻。希望通過教育,能有更多的大公司意識到用戶真正想要的產品是具有更多功能并可持續使用的,而不僅僅是將它們當作一次性產品,一旦它們不像最初那樣光鮮就把她扔掉。

          轉自:站酷-大猴兒er 


          日歷

          鏈接

          個人資料

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

          存檔

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