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

          首頁

          也許是2020年全網最全的關于iOS、Android設計規范、適配總結文章

          ui設計分享達人

          本文6000字上下,反復校對6遍以上,初步閱讀完大概需要25分鐘,若是深入理解并完全吸收則建議“先收藏再反復的品,細細的品”。希望對各位朋友有所幫助,不足之處望校正,祝閱讀愉快。


          雙20年終究還是來了,互聯網產品對于這個時代不是什么新鮮事了,互聯網人也從未停止對優秀產品的探索和創新。而做為一個設計人的我們,在前行的腳步中也應該溫故知新,就讓我跟大家一起來對iOS、Android的設計規范、適配問題做一次全面的梳理和復習吧。



          iOS設計規范


          蘋果自07年1月9日正式發布iPhone到目前為止的iPhone11Pro Max,已經歷了十三代產品。19年9月11日推出的11、11Pro、11Pro Max并沒有新增尺寸,所以對設計師而言也就沒有額外新增工作量了,還是按照以前的做法:750*1334px(@2x)或(375*667pt,@1x)做設計稿,再提供@2x、@3x切圖。


          以下為蘋果手機歷代產品明細(話說你擁有過那幾代產品,歡迎留言交流)

          一代:iPhone

          二代:iPhone3G

          三代:iPhone3GS

          四代:iPhone 4

          五代:iPhone 4s

          六代:iPhone 5

          七代:iPhone 5s、iPhone 5c

          八代:iPhone6、iPhone6 Plus

          九代:iPhone 6s、iPhone 6s Plus

          十代:iPhone7、iPhone7 Plus

          十一代:iPhone8、iPhone8 Plus、iPhone X

          十二代:iPhone XS、iPhone XS Max、iPhone XR

          十三代:iPhone11、iPhone11Pro、iPhone11Pro Max


          如何有效記住iOS設計規范,這里我總結了一個方法“iOS五點兩圖記憶法”,也就是五個點+兩張圖。


          1、設計尺寸:375x667pt @1x(750x1334px @2x)為基準設計。

          2、設計工具:Sketch、Adobe XD、Photoshop

          3、預覽效果:Sketch Mirror、Adobe XD或Ps Play

          4、切圖輸出:@2x @3x兩套

          5、標注工具:藍湖,摹客

          兩圖psd下載鏈接:https://pan.baidu.com/s/15g2x0vDd1yZevADuUj1V3g 提取碼: i4ai


          考考你:

          1、iPhone8尺寸的設計稿如何快速變成iPhoneX的設計稿?

          2、@2倍圖被當作@3倍進行開發,會導致什么樣的后果?

          3、為什么要用375x667pt @1倍圖進行設計?(后文也有詳細答案哦)

          4、iPhone8顯示為34px的文字在iPhone11 pro Max里面是不是也是34px?


          這里我們首先重點理解下PX和PT這兩個單位, 弄清楚為什么建議使用一倍圖進行UI設計,才能在設計中以不變應萬變。(說明:該部分內容優化自靜電老師的總結。公眾號@靜Design)


          PX大家可能比較熟悉,就是像素,英文pixel的簡稱。最通俗的理解就是找一個放大鏡(不是電腦中的放大鏡,是真實的放大鏡),然后對準自己面前的顯示器或者手機屏幕觀看,大部分顯示器會在放大鏡下出現一個個點。這就是我們平時所說的像素概念。在一臺物理分辨率為1080x1920px的顯示器中,橫向分布1920個點,縱向則有1080個點。這些點通過顯示器的光學特性,為我們組成不同的圖像。



          請注意, 在不同尺寸的顯示器上,這些點的單位面積并不是一樣的。比如一臺22英寸的1080p液晶顯示器與一臺27英寸的1080p液晶顯示器,可以發現這兩臺顯示器的像素分布就是27英寸的顯示效果明顯遜于22英寸顯示器的效果,一個重要的原因就是兩臺液晶面板中的“像素”顆粒大小不一。


          由此可見,像素這個單位是一個相對單位,不能用厘米、毫米等這些絕對度量單位來衡量他的長度或者寬度,因為1像素只代表一個單位的“點”。


          另一個重要單位是PT,英文point的簡稱,這個單位也是iOS開發過程中使用的單位,與px這樣的相對單位不同,PT(Point)是一個絕對單位,中文名字是“磅因(或者磅)”(1PT=1/72英寸)。


          同樣用簡單直觀的例子來演示,拿兩臺不同型號的iPhone,比如一臺ip11和一臺ip11pro Max,打開同樣一款應用(如QQ音樂),準備好一把尺子,使用尺子分別測量最上方title“音樂館”文字尺寸。經測量,可以發現不同型號的“音樂館”文字的尺寸都一樣。也可以請iOS開發人員分別寫兩個針對不同尺寸機型適配的同一個文件,并在兩部手機安裝,確保這個文件中的字體使用一個字號(30PT)。在兩個手機中運行并用尺子測量,我們發現他們的物理尺寸完全一樣。



          請大家記住一點,px是相對單位,pt為絕對單位(類似單位為厘米,毫米等等)。在不確定屏幕密度的情況下,px與pt沒有任何可比性。


          在開發工程師眼中,你如果使用750px的分辨率作圖,那么按原大小標注設計稿中的尺寸的話,他們同樣在開發環境中是要換算為一倍尺寸的,比如你標注了字號為40px,那么最終開發工程師寫在代碼里的就是20pt,除以2的關系。但是呢,如果使用一倍基準分辨率作圖,那么就不用除以2啦,所有尺寸開發工程師直接拿過去隨取隨用。


          sketch作為一款純矢量的移動端ui設計軟件,不管是設計還是后期與開發工程師的配合,都嚴格遵從開發原理,這種設計方法可以最大限度保證設計稿的復現,同時也可以減小文件體積和系統資源消耗,不管是從哪個方面看,都是設計師制作ui界面的明智之選。


          最后總結一下原因,設計師使用一倍基準尺寸作圖,主要是單位轉換方便,輸出切圖方便,理解簡單。對于工程師,他們不用再進行復雜的換算,有助于完美復現設計稿。





          我們繼續熟悉iOS中一些必不可少的頁面規范細則。



          一、引導頁


          引導頁是一張完整圖,不能適配,因此需要單獨出設計圖,iOS共需提供6套尺寸,當然也支持視頻形式。(目前5以下的適配基本淘汰)



          二、圖標


          以1024x1024px尺寸進行圖標創作即可。再通過現成尺寸模版資源,一鍵生成整套尺寸導出即可。(模版鏈接:https://developer.apple.com/design/resources/Template-AppIcons-iOS)


          注意:最終提交給到程序員的切圖是直角,非圓角圖標。





          設備名稱
          應用圖標
          App Store                 圖標
          Spotlight                 圖標
          設置圖標
          iPhone11P, 11P Max, X, Xs, 8P , 7P , 6s P , 6P 
          180 x 180 px 
          1024 x 1024 px 
          120 x 120 px 
          87 x 87 px 
          iPhone11, XR, 8, 7, 6s, 6, SE,5s, 5c, 5,4s, 4 
          120 x 120 px 
          1024 x 1024 px 
          80 x 80 px 
          58 x 58 px 
          iPhone 1, 3G, 3GS 
          57 x 57 px 
          1024 x 1024 px 
          29 x 29 px 
          29 x 29 px 
          iPad Pro 12.9, 10.5 
          167 x 167 px 
          1024 x 1024 px 
          80 x 80 px 
          58 x 58 px 
          iPad Air 1 & 2, Mini 2 & 4,3 & 4 
          152 x 152 px 
          1024 x 1024 px 
          80 x 80 px 
          58 x 58 px 
          iPad 1, 2, Mini 1 
          76 x 76 px px 
          1024 x 1024 px 
          40 x 40 px 
          29 x 29 px 

          其他設備圖標尺寸


          三、狀態欄和導航欄(具體尺寸見五點二圖)


          狀態欄:顯示時間、運營商信息、電池電量等信息區域。(齊劉海區域)

          導航欄:狀態欄下面的區域,含頁面標題、功能圖標等信息區域。

          狀態欄跟導航欄一般會進行一體化設計?,F在流行大標題導航欄設計,也就是加大導航欄的高度,融入頁面內容的標題,當內容上滑時,大標題再回歸到常規導航高度。(大標題導航欄的高度一般為116pt(232px),這里包括了20pt(40px)狀態欄的高度,同時也能放得下34pt(68px)的大標題和輔助信息(如返回等圖標)。


          undefined


          導航欄中的元素必須遵守如下幾個對齊原則:

          1、返回按鈕必須在左邊對齊。

          2、當前界面的標題必須在導航欄正中。(可無)

          3、其他控制按鈕必須在右邊對齊。



          四、標簽欄(具體尺寸見五點二圖)


          標簽欄:即Tab欄,為底部快速入口,iOS規范中Tab欄一般有五個、四個、三個圖標的形式。分為“純圖標標簽”和“圖標加文字標簽”兩種形式。


          undefined



          五、iTunes 上傳頁面


          在程序上傳App Store時我們需要提供多張App截圖,供用戶了解APP的功能。這里我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。也支持視頻形式。(微信目前采用的是五張靜態頁面形式)


          微信iTunes上傳用截圖 



          六、 字體


          中文字體:PingFang SC,英文字體:SF UI Text 、SF UI Display,其中SF UI Text適用與小于19pt的文字,SF UI Display適用于大于20pt的文字。

          鏈接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35



          七、色彩


          在iPhone上顯示的色域要比我們作圖時的RGB色域要廣。所以在iPhone上設計怎樣的顏色都可以,只要符合產品氣質并且在色彩心理學理論范圍內。官方建議的系統色彩如下:

          iPhone的系統色



          八、控件


          控件包括:輸入框、按鈕、滑桿、頁卡、開關等,在設計模板中已經全部列出。(下載地址:https://developer.apple.com/design/resources/)為了讓設計更符合整體產品品牌調性,這些控件可以做二次設計。


          但得注意兩件事:第一,點擊區域基本符合44pt(88px)原則,也就是在手機上大小大概是7mm-9mm,適合手指點擊。第二,要設計操作的不同狀態,不要只設計一種狀態。

          默認控件



          控件中無處不在的44pt(88px)

          之前我們介紹過,人手指點擊區域為7mm - 9mm,在@2x中就是44pt(88px)。蘋果的導航條、列表、工具欄都充滿了44pt(88px)這個神秘數字。我們在設計時一定也要考慮到手指的點擊區域。


           無處不見的44pt(88px)



          九、界面設計原則


          1.邊距和間距(@2x)

          在移動端頁面的設計中,頁面中元素的邊距和間距的設計規范是非常重要的,一個頁面是否美觀、簡潔、通透和邊距、間距的設計規范緊密相連。


          (1)全局邊距(iOS13,@2x)

          全局邊距是指頁面內容到屏幕邊緣的距離,整個應用的界面都應該以此來進行規范,以達到頁面整體視覺效果的統一。在實際應用中應該根據不同的產品氣質采用不同的邊距,讓邊距成為界面的一種設計語言,全局邊距的設置可以更好的引導用戶豎向向下閱讀。還有一種是不留邊距,通常被應用在卡片式布局中圖片通欄顯示,這種圖片通欄顯示的設置方式,更容易讓用戶將注意力集中到每個圖文的內容本身。


          undefined

          iOS原生態頁面“設置”和“通用”頁面的邊距都是40px。(@2x) 





          微信和支付寶的邊距都是32px。(@2x)



          (2)卡片間距

          在移動端頁面設計中卡片式布局是非常常見的布局方式,至于卡片和卡片之間的距離的設置需要根據界面的風格以及卡片承載信息的多少來界定,通常最小不低于16px,過小的間距會造成用戶緊張情緒,使用最多的間距是20px、24px、30px、40px,當然間距也不宜過大,過大的間距會使界面變得松散,間距的顏色設置可以與分割線一致,也可以更淺一些。


          以iOS(750*1334px)為例,設置頁面卡片間距為70px,而通知中心承載了大量的信息,因此采用了較小的16px作為卡片的間距。



          總結:卡片間距的設置是靈活多變的,一定要根據產品的氣質和實際需求去設置,平時也可以多截圖測量一下各類APP的卡片間距都是怎么設置的,看的多了并融會貫通,卡片間距設置自然會更加合理,更加得心應手。



          (3)內容間距

          一款APP除了各種欄(狀態欄、導航欄、標簽欄、工具欄)和控件icon,就是內容了,內容的布局形式多種多樣,這里不去探討內容具體應該如何去布局,我們來說一說內容的間距設置問題。



          格式塔鄰近性原則:

          單個元素之間的相對距離會影響我們的感知,互相靠近的元素看起來屬于一組,而那些距離較遠的則自動劃分組外。來看下圖,左圖中的圓在水平方向比垂直距離近,那么,我們看到了4排圓點,而右圖則看成4列。

          在UI設計中內容布局時,一定要重視鄰近性原則的運用 


          2.內容布局

          在APP的設計中內容的布局形式多種多樣,這里介紹最常用的兩種布局形式,列表式布局和卡片式布局。


          (1)列表式布局

          列表式布局方式非常普遍,隨便打開一個APP,基本都存在這種布局方式。特點在于能夠在較小的屏幕中顯示多條信息,用戶通過上下滑動的手勢能獲得大量的信息反饋。這也是一種非常容易理解的展示形式。


          (2)卡片式布局

          這種布局形式相對靈活。其特點在于每張卡片的內容和形式相互獨立,互不干擾,所以可以在同一個頁面中出現不同的卡片承載不同的內容。卡片式布局相對時尚、前衛,很多to C產品經常用到。另外,雙欄卡片的布局形式,也常見于以圖片信息為主導的App,例如一些商城的商品陳列頁面。這種形式能在一屏里顯示更多的內容(至少4張),同時,由于分開左右兩欄的顯示,用戶可以更加方便地對比左右兩欄卡片的內容。



          3.界面圖片設計比例

          在UI設計中,對于圖片的尺寸和比例沒有嚴格的規范,設計師往往憑借經驗和感覺設置一個看起來不錯的尺寸,但事實上我們是有章可循的。運用科學的手段設置圖片的尺寸,可以獲得最優的方案,常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618(黃金比例)等。



          4.APP版式設計規范

          版式設計又叫做版面編輯,即在有限的版面空間里,將版面的構成要素(文字、圖片、控件)根據特定的內容進行組合排列。一個優秀的排版要考慮到用戶的閱讀習慣和設計美感,在UI設計中版面設計的基礎原則有哪些呢?


          (1)對齊

          對齊是貫穿版式設計最基礎,最重要的原則之一,它能建立起一種整齊規矩的外觀,帶給用戶有序一致的瀏覽體驗。


          (2)對稱

          對稱是對立統一規律的本質屬性,呈現出一種和諧自然的美,在應用界面的設計中,引導頁設計、注冊登錄輸入框和按鈕等無一不是對稱的設計。


          (3)分組

          物以類聚,人以群分。分組是將同類別的信息組合在一起,直觀的呈現在用戶面前,這樣的設計能夠減少用戶的認知負擔,在移動端界面的設計中最常見的分組方式就是卡片,為用戶選擇提供專注而又明確的瀏覽體驗。



          十、切圖命名規范


          切圖最后需要命名成規范格式,方便程序員查找。切圖命名的格式建議全英文,如果大家英文不好需要想辦法提升一點簡單的詞匯量。借由上述工具切圖后,需要整理切圖命名,或在切圖之前對圖層命名亦可。以下是切圖元素的中英文對照:


           

          切圖命名對照表

           

          然后我們要按照”功能_類型_名稱_狀態@倍數”來命名每個切圖,比如我們導航條上有一個搜索圖標,那么它的名稱就是: 

          navi_icon_search_default@2x.png

          (導航_圖標_搜索_正常@2x.png)






          Android設計規范



          接下來,再一起來看看Android設計規范,這里只是把安卓規范中一些關鍵信息做了匯總,更詳細的不過多贅述,網上已經有很多大佬產出過此類文章,大家可自行搜索。



          一、安卓開發單位是DP、SP


          DP:安卓專用長度單位。

          以160 DPI屏幕為標注,則1DP=1PX

          計算公式:dp x dpi/160=px

          例:以720x1280px (320dpi)為例, 1dp x 320 dpi/160=2px


          SP:安卓專用字體單位。

          以160 DPI屏幕為標注,則1SP=1PX

          計算公式:sp x dpi/160=px

          例:以720x1280px (320dpi)為例, 1sp x 320 dpi/160=2px



          二、安卓設計尺寸:以1080x1920px作為設計稿標準尺寸


          1.從中間尺寸向上、下適配,界面調整幅度最小,最方便適配。

          2.大屏幕時代依然以小尺寸作為設計尺寸,會限制設計師的設計視角。

          3.用主流尺寸來做設計稿尺寸,極大的提高了視覺還原和其他機型適配。


          三、安卓圖標尺寸




          四、安卓字體


          中文:思源黑體 / Noto Sans Han

          英文:Roboto

          大?。褐黝}文字 36-34px    正文 28-26px     提示文字 24-22px

          鏈接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35



          五、切圖規范


          1.切圖尺寸必須為雙數

          2.單像素的圖會出現邊緣模糊的情況

          一般情況下,我們只需要提供3套切圖資源就可以滿足安卓工程師的適配,分別是HDPI、XHDPI、 XXHDPI 3套切圖資源。





          如何用iOS的設計稿適配安卓


          現在絕大多數公司限于人力物力的限制,不能把iOS和安卓的設計稿全部執行出來,因此就存在一稿兩用的情況;設計師以iOS版本的設計稿來適配安卓,下面我們來看一組有趣的數學換算題:

          1080/1.5=720,720/1.5=480,1242*2208/1.15=1080*1920,也就是說,1242*2208(iOS@3倍尺寸)與1080*1920(安卓尺寸)是可以等比縮放的,所以,iOS與Android的尺寸是可共用1242*2208px。因此,以iOS設計尺寸進行設計是可以適配Android的。(前提是必須和安卓工程師溝通清楚)


          另一種方式,就是把750×1334px等比例調整尺寸到安卓1080×1920px,對各個控件進行微調,重新提供標注(用dp標注)。也就是需要提供兩套標注,一套給iOS,一套給Android。


          iOS開發語言


          作為iOS開發工程師,最重要的三個工具是:Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語言;而Swift開發非常。一般iOS工程師會在這兩個語言中選擇一種作為開發工具。UIKit是蘋果系統自帶的一套框架,這個框架里有設置按鈕、滑竿、狀態欄、電池電量、鍵盤等接口可供調用。所以我們看到很多第三方APP的界面中,有許多控件和蘋果自帶程序是一致的,這就是UIKit的功勞。


          iOS開發里單位是pt


          750×1334尺寸的換算關系 1pt=2px,也就是說程序員拿到我們的px單位的標注稿,自己除以2就是pt了。(這也是為什么建議設計師用@1倍圖做設計稿的原因)

          轉自:站酷-蝸牛和筆

          微信黑暗模式終于來啦!UI設計細節完全分析及體驗

          ui設計分享達人

          靜電說:它來啦!前一段時間傳的沸沸揚揚的蘋果與微信黑暗模式的糾葛,終于以微信適配iOS端告終。3月22日靜電一覺醒來,微信已經正式開啟了“暗黑”模式。不過,很多人也許發現不了,因為手機白天還是淺色模式,只有到晚上才會改為黑暗模式。




          如何開啟微信黑暗模式?


          首先,你必須更新到iOS端的微信7.0.12版本。然后,在白天,只有你手工開啟了“設置”>“顯示與亮度” 菜單下的深色模式,它才有效果。至于安卓用戶,截止3月22日文章發布的時間,官網依然沒有更新。安卓的小伙伴就再等等吧。開啟后效果如下:



          這次的改動可以說是很全面的,幾乎所有的界面都進行了調整,包括聊天窗口,朋友圈文章,微信游戲,幫助頁面,看一看等等,但是微信小程序則依賴開發者的適配,目前來看,還都是白色的。


          不少小伙伴對于黑暗模式的設計還不是特別熟悉,接下來咱們通過微信設計細節的分析,來看看小伙伴們都能從微信的改變上學到什么?



          Tab菜單對比及顏色字號分析


          請注意,以上內容為截圖取色,可能存在不準的情況。但是可以看到,微信在Tab背景上并不是使用的純白或者純黑色。 在Tint顏色上,亮色模式和暗色模式的顏色也不一樣,這符合iOS 13 黑暗模式設計的規則定義。一般來說Tint顏色,黑暗模式下更亮一點。(左側色卡為淺色模式,右側為深色模式,下同)


          另外,以上取色均沒有考慮透明度,在實際應用中需要考慮透明度的使用。而對于Tab背景來說,亮色模式和黑暗模式均沿用透明毛玻璃效果。



          聊天列表頁面


          左側色卡為淺色模式,右側為深色模式,均沒有考慮透明度影響。


          圖標顏色分析對比


          在聊天列表,通訊錄列表頁面,系統圖標在兩種模式下的顏色均保持一致,未做改變。


          但在發現頁面中,列表左側的icon顏色則有略微變化??傮w來說,黑暗模式下比亮色模式下的圖標顏色更“亮”。是不是這里比較拗口?也就是下圖中,右側比左側的圖標,亮度提升啦!


          支付界面中的圖標,處理方式同上邊一樣,右圖比左圖的圖標亮度要高一些。但是下圖中綠色的大色塊,顏色卻一致。





          公眾號文章頁面對比


           



          而文章背景顏色,亮色模式為#FEFFFF,黑暗模式為#232323,可見也不是完全的純白和純黑色。另外,想在黑暗模式上貼各種表情的作者可要注意了,你的GIF表情可能會變成上圖那樣? 就像在黑色背景下開了個白色天窗!一大波白色不透明GIF圖即將失效!



          朋友圈界面對比


          朋友圈界面的背景色和點睛色均發生了變化,在黑暗模式下,發廣告還是美麗的照片,用戶的關注程度都會提升,當然,不好看的圖片,也會把缺點放更大。所以讓你的照片更吸引人吧。





          聊天頁面


          聊天頁面中相應的Tint色也有變化。另外,請注意,背景色依然不是純白色和純黑色。而微信的設計師傾向于使用#FEFFFF而不是#FFFFFF,雖然這倆顏色相差幾乎為零,肉眼不可分辨。是不是這位設計師有某種潔癖?或者是純粹弄錯了?





          關于聊天時使用的透明動圖,其實仔細看還是有不少毛邊的,之前我們也做過相關的分析文章。因為這種情況單純使用256色的GIF效果已經非常差了。具體實現方式可以看另一篇文章:不要大白邊!聊聊GIF動畫毛邊的處理方法(評論發送)。以免出現像下面的情況:




          彈層及搜索框


          彈層顏色在兩種模式下顏色沒有發生變化,搜索框顏色在針對黑暗模式設計時,可以考慮在白色基礎上進行透明度處理。


           



          最后的總結(黑暗模式設計思路)


          · 一般情況下Tint顏色,在黑暗模式要比淺色模式要亮,請注意,不管是圖標還是點睛的顏色。

          · 蘋果的設計指南中建議背景色為純黑色,但是真正實踐過程中,沒必要完全遵循,可以用一定灰度的顏色替代。

          · 使用具有透明度的圖標和文字,在亮色模式轉黑暗模式的時候會更加輕松

          · 不管你使用怎樣的顏色,請確保黑暗模式下的設計元素具有足夠的可讀性,同時兼顧美觀。

          · 黑暗模式下的層級設計與亮色模式不同,陰影在黑暗模式下沒有太多作用。

          · 當發布一個大版本的APP更新時,可以進行分渠道投放,讓一部分先用上新版本,并測試其反饋結果,進而再進行全渠道的投放,可以最大限度降低被用戶吐槽的風險。

          轉自:站酷-靜design


          保姆級交互名詞掃盲

          ui設計分享達人

          通過一個案例解釋那些讓你們看得有大的交互專業詞匯

          UI 和交互這兩個詞匯是一對孿生兄弟,有非常密切的聯系,我們在前期了解 UI 的時候“交互”這個詞總是形影不離,出現的頻次極高。


          但是,從我開始學習 UI 起,就被它困擾了非常長的時間,并不是苦于如何在實戰中應用,而是在中文語境下,交互有關的詞義實在是太“玄學”了,網上對它的解釋多數也含糊不清。


          比如看百度詞條里,交互本身有兩種解釋,我們分別來看一下。


          1.交互:指替換;互相;彼此。語出《京氏易傳·震》:“震分陰陽,交互用事?!保庩枴y道是我想的那個意思?)

          2.交互:通過某個具有交互功能的互聯網平臺,讓用戶在上面不僅可以獲得相關資訊、信息或服務,還能使用戶與用戶之間或用戶與平臺之間相互交流與互動,從而碰撞出更多的創意、思想和需求等。(交互使人類進步?)


          單就這個詞,如果詞條看不懂,多在網上搜索相關的信息,咂摸個10天半個月的,是可以對它有個大致的認識。我會用一個比較簡單詞來概括它 —— 相交互動。即人和機器有了接觸并產生操作、互動的整個合集。


          好不容易把這個詞搞懂,但是,交互事件、交互操作、交互方式、交互流程、交互原型、交互設計、交互文檔、交互體驗、交互動效……又是什么意思?


          當我們在網上看一些交互相關的分享,你就會感受到這種混亂,比如下文截圖的這種表述方式。

          undefined


          這是我非常不喜歡的風氣,通過非常生硬的專業名詞包裹自己的思路,去總結一個非常簡單易懂的道理或原則,也就是俗稱的 “不講人話”。


          所以,對于這個問題的反感,我打算自己做一篇 “接地氣” 的分享,對交互的基本常識做一次掃盲。







          針對這些解釋,我找了一個我自己課程學員正在處理的真實案例作為依據,并進行改版優化,來解釋所有和交互有關的名詞具體含義,以及對應的實例是什么。


          先看看下面這個案例。

          undefined

          Protopie線上可交互稿:https://cloud.protopie.io/p/a66d68949d


          圍繞這個案例開展,該頁面是公司內部人員使用的訂單管理頁面,訂單代表的是為客戶上門測量門框門扇數據和進行設計定制的服務。


          再詳細點解釋,就是銷售找到定制門的客戶,要創建一個銷售訂單,填寫客戶的基礎資料信息,然后設計師會上門進行進行測量,并將測量結果和定做要求編輯進去,以及填寫具體定制參數,還有服務的價格明細。


          這個頁面與公司內部的四個角色有關聯,分別是銷售客服、設計師、財務、派單員。


          銷售客服:聯系到客戶以后,確定客戶的資料信息基本需求,然后創建訂單填寫基本的客戶資料。

          設計師:設計師在看見訂單后需要上門進行測量溝通,并給出方案確定報價,然后將明細也記錄到資料中。

          財務:財務在做賬的時候有時候需要進來訂單查看具體的明細和數據。

          派單員:派單員要根據訂單內的具體數據要求,聯系倉庫進行準備和發貨(進銷存管理)。


          說到這里,大家應該還已經對這個頁面是做什么的有了基本的認識了把。那么我們先不討論它的優缺點,就來講講上面的交互名詞在這個頁面中的對應實例。


          人機交互:就是指上面銷售、設計、財務、派單四個角色進入這個頁面,編輯信息、查看信息的所有操作和行動的合集。


          交互界面:該頁面可以進行操作和編輯,就叫做交互界面。


          交互操作:交互操作就是指我們操作這個頁面的行為方式,該頁面目前只有兩種,點擊(Tap)和上下滾動(Scroll)。


          滑動Scroll


          點擊Tap


          交互方式:這是軟件允許用戶操作的規則,比如想要選擇設計師,就要通過點擊 “設計師” 欄目,在彈出的選擇器中,通過滾動列表來選取指定人選的方法,就叫交互方式。


          交互事件:交互事件是指整個人機交互中的其中一個獨立事件,比如上面案例講的,點擊設計師觸發選擇器彈出的事件,就是一個交互事件,在選擇器列表中選擇具體設計師,也是一個事件。


          交互流程:交互流程是完成一個操作目標的操作流程,范圍可大可小。比如上面選擇設計師的全部操作流程,可以定義為一個交互流程。而完成整個頁面信息錄入的過程,也可以成為一個交互流程。


          交互動效:比如選擇設計師的交互流程中,點擊設計師選擇器的動畫效果,就叫交互動效。交互動效是由交互操作觸發而成的,方便用戶理解界面的內容,而不是任何在UI中看到的動效都叫交互動效,比如下圖這種。


          交互體驗:它和產品、用戶體驗還不太一樣,專指用戶在交互流程中得到的體驗,維度并沒有覆蓋產品服務、情感化設計。


          關于交互設計、交互原型、交互文檔,我們在下一個部分討論。這里的結尾我們就來講講交互體驗,交互體驗的評判維度有很多。但拋開所有技術分析,我自己將交互體驗的結果簡化成 3 個:難用、能用、好使。


          交互體驗的好壞不是產品、交互、設計師、程序員說了算的,是由用戶來評判的。所以產品和設計行業都會強調 “共情” 能力,可以站在用戶的角度來審視我們做出來的東西,而不是呆滯的上帝視角。


          之所以挑這個案例,就是因為即便作為讀者的你們,應該也可以想象如果你是這個頁面的操作用戶,那么體驗一定會非常差,雖然它功能可能是完備的,但一定是 “難用” 的。


          而對難用的分析上,絕對不是直接去套理論分析哪里難用,而是先找到難用的原因。


          這個是多數新手會犯的錯誤,不站在業務、用戶的角度去使用應用,找出原因,而就指望著去套理論套公示來對這個界面進行 “專業分析”。


          所以這里我們簡單講講,它的主要問題:


          • 頁面菜單選項太多,操作起來感覺壓力非常大

          • 菜單內容的分布感覺混亂,很難形成記憶點每次要設置的東西在什么位置

          • 不同角色對這個頁面的功能訴求不同,現在的設計顯然沒有滿足






          在得到上面三個問題以后,我們就可以對這個頁面做出新的優化。 而要優化交互,我們就要首先從交互原型入手,即根據我們的想法設計出可以表現交互方式、交互流程的原型圖,比如下圖案例。

          Protopie線上可交互原型:https://cloud.protopie.io/p/838165bdad


          交互原型和產品原型不一樣,產品原型是用來解釋產品經理自己對產品功能的規劃,不需要著重考慮交互體驗,邏輯能跑順并且能講清楚即可。


          而最終的設計稿,就是基于交互原型的基礎上,遵照它的交互方式、事件、流程展開視覺內容的填充和細化。


          我們再回到這個改版過后的案例,講講我們在交互原型中的流程給大家一點啟發。


          首先這個頁面的所有菜單,并不是只有一個人完成填寫,最起碼要由派單員、設計師兩個人,而財務、派單員進入到這個頁面中,通常會有明確的目的要查看哪一部分數據,其它的數據信息對于他們而言都是干擾。


          所以,我們將所有數據類型進行劃分,統計結果如下(大致規劃,了解意思即可)。


          完成分類后,舊版中只使用上下滾動查找菜單的方式顯然是不滿足實際需要的,所以我就根據內容的劃分創建一個分頁欄的形式,將不同類目的菜單對應進行匹配。


          當我們要查找某個具體元素的時候,首先選擇對應的分類以后,再在分類下方查找。并且我們還引入一個新的 “交互方式”,可以通過左右滑動的 “交互操作” 來切換分類頁面。




          并且這個分頁器欄目也可以進行標識,你的賬戶對這些內容的權限如何,比如 “不可看”、“只讀”、“可編輯” 等等。


          而每個分類下方,對它們再做一次邏輯分類,還有區分必填項和非必填項。如果有大量非必填項目為空,那么對于信息的查閱檢索都是干擾,選填內容是用戶需要填寫的情況下才會去填,所以我們將每個分類下面的必填和選填也作出拆分,默認將選填菜單進行折疊(也可以是默認不折疊)。


          這樣,我們就可以得到一個你沒有想到的 “船新” 版本。相信大家在這個版本的交互體驗肯定比老版好出不少。


          當然,這只是對交互流程的其中一個改版,并不代表我們的交互只能這么改而已,實際項目中,優秀的設計師都會提供幾種不同的版本進行評審和測試,挑出其中最優的方案。


          比如,我們可以不把分類頁面做成左右滾動的,而是做成上下滑動的。


          所以,在了解上面兩套交互原型的案例,我們就可以再來介紹交互設計(UE)了。交互設計就是制定用戶操作界面的流程、方式、體驗的設計,和界面視覺設計并不能劃上等號。


          雖然過去行業里喜歡強調,將交互設計 (UE) 和界面視覺設計 (UI) 崗位拆分開來,但這不是一個太合理的現象,對于多數業務和團隊來說增加 UE 崗位只是平添負擔而已,未來的大趨勢是由 UI 設計師負責交互設計的內容,當然也有個洋氣的新名稱叫 UX。


          最后,在完成了上面這些內容的設計和規則制定以后,事情還沒完。專業的 UE 和 UX 還會提供一份文檔叫 “交互文檔”,除了將交互原型圖置入進去以外,還要具體來介紹它的交互方式、交互事件和交互流程的說明。


          基于時間原因我就沒辦法提供一份基于這個案例制作的交互文檔了,大家只要明白,如果我沒在一個地方標注可以通過左右滑動來切換頁面的方式,或者默認狀態下選填內容是展開還是關閉之類的信息,那么最后落實到開發環節中可能就會導致很多細節問題的錯誤。





          以上,就是我們關于對交互有關名詞掃盲和解釋的全部內容了。學習交互,要先從這些名詞的認識開始入手,搞清楚底層的邏輯和原因,然后再通過實踐和分析來積累對這部分內容的經驗。


          只有深入去了解業務,并站在用戶角度審視,勤于思考的設計師,才能在交互領域中有所建樹,理論知識只是其中嘴不重要的一環。


          下面再把所有涉及的名詞羅列一遍做個總結:


          人機交互:用戶和機器、軟件實現操作和互動的過程。

          交互界面:可以用來進行交互和操作的UI界面。

          交互操作:用戶操作軟件、界面的具體操作,比如單擊、雙擊、長按等。

          交互方式:軟件允許用戶操作的規則,比如按鈕的交互方式要通過點擊才能觸發。

          交互事件:沒完成一次交互操作并獲得反饋的事件。

          交互流程:用戶為完成目標所做的一系列交互的合集。

          交互原型:用來確定產品交互方式的原型圖。

          交互設計:制定用戶操作界面的流程、方式、體驗的設計。

          交互文檔:用圖文記錄交互思路、具體交互規則的文檔。

          交互動效:用來協助交互操作明確交互事件的動畫效果。

          交互體驗:完成交互流程后所獲得得感受。


          完!

          轉自:站酷-酸梅干超人

          產品分析方法之:情緒版在設計中的運用

          ui設計分享達人

          視覺設計師可能會花很長時間產出了精致的,高品質的設計,得到的卻是用戶或客戶的一句話:“這不是我想要的!”

          視覺設計師可能會花很長時間產出了精致的,高品質的設計,得到的卻是用戶或客戶的一句話:“這不是我想要的!”一般來說,在沒有實物前,人們并不清楚自己要的是什么。但是在看到成品后,他們可以輕易地判斷是否符合自己的喜好或期望。因此,在為錯誤的設計方向投入過多前,了解用戶對風格的期望和需求,從而確定整個網站或產品的視覺風格是有必要的。  而情緒版可以很好的解決以上問題。




          什么是情緒版?

          情緒版是一種啟發式和探索性的方法,可以對如下問題進行研究:圖像風格(photography style)、色彩(color palettes)、文字排版(typography)、圖案(pattern)以及整體外觀以及感覺。視覺設計和人的情緒緊密相連,不同的設計總是會引發不同的情感。




          情緒版分為:拼貼式情緒版、參考式情緒版和模版式情緒版



          拼貼式情緒版

          直接將可以運用到項目中的圖片素材拼合在一起。下圖是NIKE MECURIAL系列的一個拼貼式情緒版,里面的圖片都是來自官方的海報、圖片和影像,這些素材都能夠直接運用到我們的設計中。


          參考式情緒版

          將與設計主題風格相關或功能類似的真實項目拼接在一起。下圖是一個以多彩和現代視覺風格的情緒版,里面選取的素材都是真實項目的界面。


          模版式情緒版

          靈感圖片素材和概念控件的結合。概念控件是指概念設計中的一些核心組件,它可以是色彩搭配、按鈕、卡片、圖形或者是信息排版等,它們是概念設計的雛形。


          情緒版作為可視化的溝通工具,可以快速地向他人傳達設計師想要表達的整體感覺。


          設計師要幫助用戶發掘其真正需求,情緒版作為一個工具可以很好的幫助了解用戶所希望展現的調性,從而提高生產效率和滿意度。


          對于設計師:是定義視覺風格和指導設計方向的依據;對團隊:在團隊之間傳遞設計靈感與設計思路,從而使想法充分融合,深化設計。


          1.情緒版可以讓客戶參與我們的設計流程中,提高我們的工作效率。客戶的加入,能夠讓我們更好的了解業務本身以及客戶對項目的期待。盡早的讓客戶參與整個設計流程,還能夠避免在錯誤的設計方向上投入過多。

          2.情緒版是設計與客戶溝通的可視化溝通工具,可以減少設計師和客戶之間由于認知不同導致的溝通障礙。



          情緒版的推導過程







          在制作情緒版過程中,原生關鍵詞的作用相當重要:

          獲得原生關鍵詞是情緒版的第一項工作,一般從內部涉眾(相關的產品和設計人員)及外部用戶兩種渠道獲得。

          自涉眾訪談和用戶研究中,可以收集大量的體驗詞樣本。在獲得這些樣本后,可以內部進行討論,通過歸納整理精簡為幾個關鍵詞。

          原生關鍵詞提取好之后,可以在內部使用情緒版,也可以招募用戶來完成。





          01.明確原生關鍵詞


          訪談及用研結果導入產生原生體驗關鍵詞

          原生關鍵詞(Primary keywords)的產生是一個糅合的過程,它需要綜合企業文化、用戶研究成果、品牌/營銷策略,行業特征、目標用戶群、產品的價值定位等因素來界定,通常,這也會是一個商業決定。

          涉及的訪談受眾可以是產品、運營、交互、視覺、用戶等,根據產品是0—1還是改版現有版本設置不同問題,以改版為案例,產品使用的感受、期望產品更新的樣子等。以此得出的關鍵詞,一般是很抽象的詞匯。例如:親切、熟悉、溫度,一般一個產品的關鍵詞不易過多3~5個為佳。




          項目案例(示例)

          某手機銀行是以服務客戶日常金融業務辦理及投資理財需求為主的綜合金融服務APP。面向30-40歲為主要年齡段的中青年用戶群體。目前產品處于成長期向成熟期過渡。








          02.挖掘衍生關鍵詞


          如果僅通過單純對原生關鍵詞的搜索,很容易導致不同參與者提供圖片素材出現同質化的問題。所以,首先頭腦風暴畫出關鍵詞的思維導圖。一方面,合理地引導調研對象發散思路;另一方面,也在過程中深挖原生關鍵詞在他們心中的定義。


          衍生關鍵詞(Derived keywords)是原生關鍵詞的發散和提煉,主要通過部門內部頭腦風暴或用戶訪談得出。


          將所有“衍生關鍵詞”按照三個維度去分類整理。這個過程的目的是幫助項目組成員從用戶的角度去理解“抽象關鍵詞”的“具象詮釋”。所有的關鍵詞可按照以下三個維度分類:


          訪談對象會根據主觀印象以及過往親身經歷給出一些看法或答案,而很多時候并不可以把訪談對象的答案直接作為關鍵詞,我們需要了解為什么,直到覺得用戶的答疑非常清晰具體,然后提煉關鍵詞。


          例如衍生關鍵詞訪談:

          自由發散問題—看到“品質”你想到了什么?

          引導發散問題—如果“品質”是一種顏色,你覺得是什么?為什么?

          如果“品質”是一種食物,你覺得是什么?為什么?

          如果“品質”是……



          衍生關鍵詞的分析—分維詮釋

          根據原生關鍵詞的的定義,從視覺映射、心境映射、物化映射三個維度去理解“抽象關鍵詞”的“具象詮釋”。





          03.搜集圖片素材


          根據“原生關鍵詞”及發散的“衍生關鍵詞”搜集素材,對應視覺映射、心理映射、物化映射三大維度。在素材搜集時具體以「具象」和「抽象」兩個方向搜集。

          1.搜集圖片

          根據已有關鍵詞,搜集具象圖片(具體的實物場景)—風格感受;根據已有的關鍵詞,搜集抽象圖片(包含色彩、質感、圖形等元素)—設計元素。


          2.素材整理

          將收集到的圖片素材,按照衍生關鍵詞進行分類并提取生成情緒版。


          3.邀請用戶參與情緒版創建



          1.主持人需要不斷詢問被訪者,去探究選擇圖片背后的原因:“為什么你會選擇這張圖片?能否和大家分享一下你的想法?”

          2.注意差異的挖掘。注意挖掘被訪者之間的觀點差異,一百個人心中有一百個哈雷姆特,同一張圖片對于不同被訪者可能會有不同的解釋,如果好幾位被訪者同時選擇一張圖片代表他們各自對某個品牌的感覺,注意詢問他們選擇這張圖片的原因是否一樣。

          3.可以呈現給用戶的圖片有限的,因此,在挑選圖片時,需要內部研究和設計人員協同,根據視覺設計所需要考慮的幾個維度結合已有的關鍵詞進行圖片的篩選。一般來說,在將圖片呈現給用戶之前,內部人員已經明確了每一張圖片所代表的意義,在用戶選擇和訪談結束后,兩方面的數據綜合分析才能獲得最終的結果。





          04.創建生成情緒版


          歸納和整理圖片,進行排版組成情緒版,得到設計主題相關的內容。建立幾個統一風格的情緒版,以便更好的捕捉產品相關的感覺,為探索設計方向提供靈感。 




          05.確定視覺設計策略


          綜合情緒版制定風格

          提取圖片主要顏色,明確主色。結合衍生關鍵詞分析結果,將情緒版中高頻物化紋理和材質提取出來。



          1.色彩提取

          通過對色彩的分析發現,高明度低飽和度的色彩搭配,能讓畫面保持豐富的同時顯得干凈和協調,可以達到「」「簡潔」的效果,例如:鄰近色、類似色、低飽和度對比色。


          電子化情緒版對“色彩分析”是比較方便的

          1.圖片在PS中進行高斯模糊或馬賽克處理,使用顏色滴管提取大色塊;2.圖片導入PS中,選擇存儲為Web所用格式-選擇Gif仿色。當然,現在已經有很多用戶配色方案提取的網站和軟件,這樣更事半功倍。


          通過對情緒版中顏色提取并結合品牌色及對當下流行趨勢的把握,確定如下顏色運用:




          2.圖形提取

          通過對圖形分析發現,基本幾何形具有肯定、純粹的特點,可以很好的體現「品質」與「精簡」的特征。例如:方形、圓形等。


          融入圖形符號 強化視覺語言

          圖標使用深色+漸變色的展現,對比突出、品牌屬性統一、信息層級分明。簡約筆挺的線性圖標更符合平臺信息架構清晰,內容易懂的特征。



          圖標設計




          3.字體提取

          通過對字體的研究發現,中文字體端莊勻稱、字體方正。例如:思源宋體、方正宋體等,英文字體線條簡潔、字形嚴謹。例如:Helvetica、Avenir、DIN等,都比較符合「品質」和「簡潔」的特征。

          筆畫有粗細變化,而且一般是橫細豎粗,末端有裝飾部分,給人正式、正規感覺,既可以區分標題與模塊內容的差別,也可以增加產品的差異化。





          4.構成提取

          通過對構成的研究發現,并置型和九宮格型構成比較嚴謹和秩序,滿版型和通欄型構成,視覺傳達直觀而強烈,給人大方、舒展的感受;這與「」的特征是匹配的。






          5.質感提取

          在質感的選擇方面,大多與當下流行風格趨勢相貼近,例如:圓角卡片、彌散投影、漸變、輕擬物、毛玻璃等,可以有效地表達出「精簡」「品質」的情緒感受。





          總結

          情緒版是一種設計方法論,可以指導設計方向,傳遞設計靈感與思路。

          制作情緒版時,首先要明確原生關鍵詞、然后頭腦風暴挖掘衍生關鍵詞,接著搜集相關圖片并提取生成情緒版,另外訪談用戶收集衍生關鍵詞映射,最后通過情緒版和關鍵詞映射來提取視覺風格。

          在項目前期,我們可以通過情緒板來定義產品整體的設計風格和產品主色調,設計過程中,界面排版、圖標的顏色、形狀和設計細節都可以使用情緒板來定義。

          無論我們做什么樣的設計,情緒板都無疑是一個很好的工具,它不僅可以幫助我們明確設計需求,做出更容易被大眾所接受的設計,也可以幫助我們更好地去與領導和其他需求方溝通,向他們傳達設計的價值主張,最終達成共識,提高設計效率。


          再總結一下情緒板的作用:

          首先:它是整個設計項目的寶貴資源;

          其次:它是低成本的設計工具;

          再次:它是有效溝通的保障;

          最后:它是團隊協作的方法。


          轉自:站酷-體驗為王UX

          設計師必看的5G發展趨勢

          ui設計分享達人

          5G是今年的熱門話題,很多公司都在討論它,但是,討論的內容太多局限在技術領域。今天一起來暢想一下,未來5G有哪些應用機會。

          全文總計20000字左右,閱讀需要15-20分鐘。

          undefined


          對于5G,人們更多的認識是與現在的4G相比通信速度更快,“智能手機速度變得更快”“一部大片幾秒就能下載完畢”等。但這些只不過是5G的技術革新的一小部分而已。5G所帶來的變化絕不僅僅體現在智能手機及平板電腦上,而是蘊含著讓我們生活的各種場景都發生重大變化的可能。并且,5G不只應用于生活場景,其在商務商業場景的廣泛應用也備受人們期待。各行各業的企業都在思考如何利用5G促進本企業的發展。5G將給所有的商界人士帶來發展事業的機會。



          在1986年,第一代移動通訊系統(1G)在美國芝加哥正式誕生了,其采用模擬信號傳輸,每個國家的1G通信標準都不一樣,所以不能像現在這樣“全球漫游”,使得1G的發展受到了極大的阻礙。1G其采用的模擬信號傳輸容量非常有限,一般只能傳輸語音訊號,還存在著語音品質低,訊號不穩定、涵蓋范圍不全面、易受干擾等問題困擾。為了解決1G所面臨的問題,2G由此誕生了……


          1994年,前中國郵電部長吳基傳用諾基亞2110撥通了中國移動通信史上第一個GSM電話,中國由此進入了2G時代,在這之后的那些年,諾基亞帶給了我們無數的經典手機。

          和1G不同的是,2G采用了數字調制技術,故第二代移動通信系統的容量頁在增加,隨著系統容量的增加,2G時代的手機可以上網了,雖然速度較慢,但文字信息由此開始了,并成為當今移動互聯網發展的基礎。


          在2G時代,手機只能打電話和發一些簡單的文字信息,雖然以及很方便了,但日益增長的圖片和視頻傳輸的需要,人們對于數據傳輸速度的要求日益高漲,2G時代網速加載圖片速度顯然不能支撐大量的圖片傳輸需求,于是3G誕生了。相對于2G,3G依然使用的數字傳輸,但3G的傳輸速度可達每秒384kbit,在室內穩定環境下甚至有每秒2Mbit的水準,是2G時代的140倍。由于采用了更寬的頻帶,傳輸的穩定性也大大提高,速度的大幅提升是大數據的傳輸更為普遍,移動通訊有更多樣化的應用, 因此3G是被視為開啟移動通信新紀元的重要關鍵。


          2013年12月,工信部在其官網上宣布向中國移動、中國電信、中國聯通頒發了“LTE/第四代數字蜂窩移動通信業務(TD-LTE)”經營許可,也就是4G許可牌照。至此移動互聯網進入了新時代!

          在3G基礎上發展起來的4G,是采用更加先進通訊協議的第四代移動通訊網絡。4G的傳輸速度有非常大的提升,理論上為3G的50倍,實際體驗也在10倍左右,上網速度可以媲美20M的家庭寬帶,因此4G網絡可以具備比較流暢的速度,進行觀看電影、大數據傳輸,也是一直沿用到今的通信網絡,其穩定性也非常高。但遠遠不止如此……


          隨著通信系統帶寬和能力的增加,移動網絡的速率也飛速提升,從2G時代的每秒10Kbit發展到4G時代的每秒1Gbit,其足足增長了10萬倍。歷代移動通信的發展,都以典型的技術特征為代表。而5G將不同于傳統的幾代移動通信,5G不再由某項業務能力或者某個典型技術特征所定義,它將是一個多業務多技術融合的網絡,更是面向業務應用和用戶體驗的智能網絡,最終將打造以用戶為中心的生態系統。



          現在的移動網絡工作在相對較低的頻段,低頻段的好處的是傳播性能優越,可以使運營商用較少的成本(少量基站)達到很好的覆蓋。5G的一個特點就是高頻,受限于高頻的傳播性能,所以很多的高頻段頻率資源沒有被使用,這正是5G可以好好利用的資源。


          依托4G良好的技術架構,5G可以比較方便的在其基礎之上構建新的技術。未來的5G愿景最強烈的一個方面就是用戶體驗到的網絡速率。4G現在已經很快了,但是還不夠,5G要做到的目標是最大10Gbps。


          5G的極限速度是4G的100倍,現在初期沒有那么快,大概20倍左右,比如說一個1080P的高清視頻,一個小時的數據量是10個G比特,然后如果用5G的極限速度,應該一秒鐘下載完,現在可能要5秒到6秒,而用4G可能要一分多鐘將近兩分鐘,所以差異還是很大。


          這只是5G最基本的好處,甚至都不是最重要的技術能力的提升。我們說5G最重要的技術能力提升,在于更快的響應速度。

          4G應用最主要的是移動支付,支付的時候強調的并不是帶寬,而是響應速度。因為要把一個支付的數據傳到另一方,比如我從終端傳到銀行做認證,數據量其實并不大,至少比一個小視頻的數據量要小很多。但是你肯定不能忍受一個支付數據傳到銀行確認需要半小時,這個時間就是響應速度。


          在過去,響應速度慢依然是個問題,雖然支付的響應速度可以接受,但是也要花費好幾秒甚至十幾秒的時間。這個速度在支付上可以勉強接受,但是在很多其他領域就不能接受了。


          在這之前的3G和4G時代,其實響應速度從來就沒有被提上議事日程。當然,不是說那些網絡不需要響應速度,而是那些網絡是用其他辦法來解決的。怎么解決呢?就是用另一個網絡,叫做信令網,來傳輸需要滿足快速響應速度的需求。但是信令網本身的帶寬又很有限,所以只能傳輸一些簡單的信號。所以,它可以做的事就很有限。當然,現在我們已經實現同一張網不但能有非常大的帶寬,還同時有非??斓捻憫俣龋@時候你可做的事情就多多了。


          無人駕駛汽車,需要中央控制中心和汽車進行互聯,車與車之間也應進行互聯,在高速度行動中,一個制動,需要瞬間把信息送到車上做出反應,100毫秒左右的時間,車就會沖出幾米甚至幾十米,這就需要在最短的時延中,把信息送到車上,進行制動與車控反應。


          無人駕駛、工業自動化的高可靠連接都是5G的一個新場景。人與人之間進行信息交流,140毫秒的時延是可以接受的,但是如果這個時延用于無人駕駛、工業自動化就很難滿足要求。5G對于時延的要求是1毫秒,甚至更低。


          當然了,這都還不是5G的全部,5G還有一個更厲害的東西,就是它能夠同時容納更多的設備接入。


          其實每一個手機不管在不在通信,都是時時刻刻連在網絡當中的。有任何外部的電話進來,你的手機可以第一時間就產生振鈴,你就可以應答,因為它實時都要和基站來通信。這就帶來一個問題,每個基站內部可以容納的手機數量是有限的。我們設想一些特殊場景,比如運動會,你會發現運動場里聚集了幾萬人,經常出現不光電話打不通,數據信號也不夠好,傳輸數據也傳不出去的局面。原因很簡單,就是一個基站能容納的設備是有限的。


          怎么解決呢?很多時候其實我們并不需要通過“手機A-基站A-基站B-手機B”的路徑,我們只是希望本地的系統能夠互聯起來。


          現在的5G就可以做到基站內所有的系統實時連通,叫做“點對點的通信”。也就是說在同一個基站里面有兩個設備需要做信息傳遞的時候,它不需要通過基站,直接就可以直線點對點地互聯。而且不止支持手機設備,未來大量能執行單一任務的設備,也就是物聯網設備,也可以連到網絡里。這就標志著未來會有大量的通信是人和物之間,甚至物和物之間的,物聯網時代真正到來。


          5G的第一階段看技術能力,但是不能止于技術能力

          但是5G的精彩就在于它不止于技術能力。如果只是技術能力,那一定是那些設備公司的事。實際上設備公司根本就不是5G市場當中最大的贏家,因為5G的層次是個倒金字塔,技術設備市場是最小的一個市場。

          技術能力市場以上的機會是運營市場。因為你要經營很多業務和應用,都需要有運營或者應用支撐的能力提供。




          我們來看一個例子,美國阿肯色州大和特種鋼,他用5萬多個傳感器,把整個生產過程中需要控制的地方、需要檢測的地方都做了聯網。他的老板非常感謝5G,感謝移動通信技術,用光釬是不可能做的,在鋼鐵那種高溫的環境下,5G就全給熔斷了,5萬多個極其難進行一根一根地連接?還有化工廠,它是流程化的,化工廠的環境有很多腐蝕性的東西,是不能用光纖的,所以為什么工業互聯網要用5G它只能用無線的方式。


          很多人忽略一點,光釬確實穩定,帶寬也寬,很多人拿5G跟光釬比,這是錯誤的,就拿地鐵跟公交比,這倆不是替代的關系,它是相互補充的關系。


          話說回來,那么在我們家里也有這個問題,你不可能每間房都打一個眼穿1根甚至幾根光纖進去,所以直接用5G是能達到光纖的通訊水平,然后而且很穩定。



          很多人說 WiFi帶寬不夠,速度不夠,不支持4K以上的高清視頻的傳輸,現在有超級 WiFi6 解決這問題,大家一定要知道WiFi是一個純粹的互聯網文化,它叫盡力而為的網絡。大家連過WiFi都會知道,wifi的信號,一會有一會沒有,一會速度快一會速度慢,對吧?就像我們的公路,經常有人喜歡自己開車開著開,都不開坐地鐵了,為什么?通信的網絡相當于地鐵,他是有qos服務質量指標來控制它的通信的水平,要保持穩定的。


          原來你可能就是連你的音箱、燈、電視機。假如家里有一些重要用途,假如你家里邊有老人監護,有嬰幼兒監護等,你要實時的監控它,突然間沒信號了,一分鐘沒信號,后邊再給你來信號,你這期間就有可能出問題。


          在工業互聯網中絕對不能用wifi,WiFi6 超級WiFi解決了帶寬的問題,但也沒有解決穩定性的問題,必須用通信級的解決方案,它保持它控制的穩定性。


          通過上述問題,有人質疑用4G行不行?5G有一個每平方公里100萬個接入的海量機器連接的能力。未來工業互聯網必須用5G ,很多地方可以拿4G或者拿光纖拿WiFi做一些補充,但他重點的環境一定要用5G。


          在前面講的舉辦運動會時,你會發現運動場里聚集了幾萬人,經常出現不光電話打不通,數據信號也不夠好,傳輸數據也傳不出去的局面。通信是隨即服務系統,不是所有流量均勻的分布到網絡上。所以每平方公里100萬接入的能力是保證突然出現大量數據的時候網絡暢通。



          5G 是數字化從個人娛樂為主推向全連接社會的起點,是移動通信行業的機遇。然而 5G 與工業互聯網的融合也對現有移動通信技術提出了挑戰。5G 與工業互聯網融合應用出現了八大類新型場景,分別為 5G+超高清視頻、5G+AR、5G+VR、5G+無人機、5G+云端機器人、5G+遠程控制、5G+機器視覺以及 5G+云化 AGV,相應應用場景對 5G 網絡提出了新的需求。在應用場景發展節奏方面:5G 與超高清視頻的融合應用已進入應用成熟期,將成為 5G 在工業互聯網領域的第一批應用場景;5G+AR、5G+VR 以及 5G+機器視覺等應用已進入高速發展期,經濟價值逐漸顯現,未來 1-2 年將成為工業互聯網的主流應用場景;5G+云化 AGV、5G+無人機等應用受限于與設備深度融合的需求,還需等待產品成熟,未來 2-3 年將有較快發展;5G+遠程控制和 5G+云端機器人等應用由于涉及工業核心控制環節,目前還處于探索期,有待進一步的測試驗證。

          超高清視頻是繼視頻數字化、高清化之后的新一輪重大技術革新, 將帶動視頻采集、制作、傳輸、呈現、應用等產業鏈各環節發生深刻 變革。高清視頻被認為是 5G 時代應用最早的核心場景之一,加快發展超高清視頻產業,對滿足人民日益增長的美好生活需要、驅動以視 頻為核心的行業智能化轉型、促進我國信息產業和文化產業整體實力 提升等具有重大意義。


          隨著技術發展,超高清視頻已不局限于監視、錄像、回放等傳統功能,開始向字符識別、人臉識別、行為分析、物體識別等智能化方向發展,對視頻流的清晰度以及流暢度提出了更高的要求,而 5G 網絡的承載力成為解決這些需求的有效手段。在工業環境下,高清視頻的主要應用在于智慧園區的安防、人員管理等場景,通過 5G 高速率的特性,將采集的監測視頻/圖像實時回傳,實現視頻、圖片、語音、數據的雙向實時傳輸,同時結合 5G MEC 統一監控平臺,實現人員違規、廠區的環境風險監控的實時分析和報警,大大提高作業安全規范性。


          超高清技術是高清技術的延伸,代表了近年來音視頻產業發展的主要方向。與高清技術(1920×1080 ,約 200  萬個像素)相比,4K(3840×2160 ,約 830 萬個像素)超高清像素數為高清的 4 倍,理論清晰度為高清的 2 倍;8K(7680×4320 ,約 3300 萬個像素點)超高清分辨率為高清的 16 倍,理論清晰度為高清的 4 倍。超高清視頻提升了分辨率、亮度、色彩、幀率、色深、聲道、采樣率等指標,這些技 術指標的提高雖然可以給觀眾帶來極為清晰、逼真和沉浸感的畫面, 但是也使音視頻數據量成倍增長。按照目前超高清視頻產業主流標準,4K/8K 視頻對網絡速率要求至少為 12-40Mbps,甚至可達 48-160Mbps。


          超高清視頻對于 5G 網絡的需求


          增強現實(AR)是人工智能和人機交互的交叉的學科,是一種實時地計算攝影機影像的位置及角度并加上相應圖像、視頻、3D 模型的技術,也是一種把真實世界和虛擬世界信息有機集成的技術。AR 把原本在現實世界一定時空范圍內很難體驗到的實體信息(主要包括視覺和聽覺信息)通過計算機模擬仿真后疊加,將虛擬的信息應用到真實世界并被人類感官所感知,從而達到超越現實的感官體驗。


          目前 AR 的應用已融入到了工業制造的交互、營銷、設計、采購、生產、物流和服務等各個環節,典型的應用包括 AR 遠程協助、AR 在線檢測、AR 樣品展示等。利用基于 5G 的 AR 遠程協助,后臺專家可以通過語音視頻通訊、AR 實時標注進行遠程協作,實現了現場人員和遠程專家的“零距離”溝通,大大提高了工業生產、設備維修、專業培訓等價值鏈的效率。


          AR 遠程協助對于 5G 網絡的需求


          虛擬現實(VR),是一種可以創建和體驗虛擬世界的計算機仿真系統,利用計算機生成一種模擬環境,使用戶沉浸到該環境中。虛擬現實技術就是利用現實生活中的數據,通過計算機技術產生的電子信號,將其與各種輸出設備結合使其轉化為能夠讓人們感受到的現象, 并通過三維模型表現出來。


          目前 VR 的在工業互聯網中主要應用在虛擬裝配、虛擬培訓、虛擬展廳等場景:VR 虛擬裝配是工業設計必不可少的審核環節,可以在設計接口、部件外觀大小等方面最大化優化產品實際裝配時的能效;VR 虛擬培訓相較于傳統的課堂更能全面、及時反饋,相比于教科書里面難懂的文字和需要考驗學生想象力的平面圖,虛擬現實的場景表達更直觀,并傳遞更多的信息;VR 虛擬展廳將展廳及展示產品 3D 化,帶給觀展者足不出戶就能身臨現場的體驗。


          基于 5G 的 Cloud VR,結合眼球跟蹤渲染技術、GPU 定點渲染、LED 高 PPD 屏幕技術,VR 終端可以完全實現無線化和輕量化;由于云端內容與無線VR 直連,不能被本地復制,進一步保護了內容版權; 用戶互動數據傳輸到云端并進行計算,再反饋回本地終端,大大降低VR 的成本。


          VR 對于 5G 網絡的技術需求



          無人機作為高新科技發展的產物,目前在我們周邊的應用已經越來越廣泛。從應用領域來說,無人機可分為消費級無人機和工業級無人機,相對于已經較為成熟的消費級無人機,工業級無人機的應用還處在不斷探索的階段。目前,工業級無人機被廣泛的應用在智慧物流、智慧園區、設備巡檢等領域。


          以智慧園區安防為例,安保人員需要按照固定的崗位和流動的崗位分別安排并進行廠區安全巡視,內容包括人員、財產、治安、消防安全。為了確保廠區每一個角落都能得到合理的監控,需要大量的攝像頭設備進行固定視角的管控,對于攝像頭的盲區,需要安排安保人員定期巡檢。這種傳統方式往往存在固定視角監控不到位、安保人員人工費用成本高以及晝夜交替等原因帶來的管理問題。


          通過 5G 無人機平臺,可以實現廠區范圍內規范化、常態化的空中安保巡視和設備點檢。利用 5G 的高速率、高可靠低時延無線網絡, 可以將搭載在無人機上的攝像頭視頻(可見光高清、紅外等)實時傳送到廠區綜合控制中心。通過對視頻圖像進行基于人工智能的物體識別、模式識別分析,判斷所巡檢的地點是否存在安保異?;蚧鹁惓2崿F智能提示,最大限度降低安保人員日常勞動強度。


          從設備巡檢的角度來說,工業領域有大量的設備工作在位置較高或條件較為惡劣的環境下,以冰箱的發泡工藝環節為例,設備最高處達到 5m,傳統的人員巡檢不僅浪費時間,還帶來人身安全隱患。傳統的基于 4G 的無人機時延大,畫面不清晰,而采用 5G 的無人機設備巡檢有兩個優勢:一是 5G 的上行速率可達 200Mbps,可以支持 4K、8K 甚至全景的視頻回傳;二是 5G 毫秒級的低時延高可靠特性可以有效地保障無人機的控制和精準定位。


          無人機對于 5G 網絡的需求


          近幾年來人工成本不斷提高,不但使得工業企業的利潤持續降低, 而且大量的人工操作不利于產品質量控制和企業管理。機器人成為了 解決人工成本的優秀替代方式,很多制造業工廠都開始加快機器人應 用的步伐,尤其是一些操作工序復雜或精密度較高的工作。傳統的工 業機器人存在不足,比如工作范圍受限、工作內容有限、設備成本高 等問題。隨著人工智能、云計算等技術的不斷成熟,云化機器人將逐 漸成為主流。云化機器人將控制“大腦”放在云端,根據本地機器人的 不同工作內容和工作地點針對性控制,真正實現機器人的自主服務和自主判斷。同時由于“大腦”放在了云端,“大腦”可以將所有機器人檢索的信息進行整合,完善自身的學習能力和自優化能力。隨著云端學習能力的提升和數據共享,本地機器人本身不需要存儲資料信息,也不需要具備超強的計算能力,這樣一來機器人的開發成本和時間也會大大縮減。


          實現云端機器人大規模密集部署和應用拓展,對 5G 網絡提出了兩個需求,即:滿足通信調度及業務數據實時交互需求和集成其它視覺應用的通信需求。云端機器人系統包括室內及室外應用場景,可滿足工業高可用指標 99.9999%,通信時延 10~100ms。目前單個機器人安裝 10~20 個攝像頭(實現視覺導航、視覺檢查等多種功能),移動速度提升到 2~3m/s,因而網絡上行帶寬需求小于 1Gbps(隨著低時延的視頻壓縮和解壓技術成熟,可以在機器人端實現視頻壓縮預處理,節省上行帶寬),時延 10~100ms。


          云端機器人對于5G 網絡的需求



          遠程控制一直是工業生產中保障人員安全、提升生產效能、實現多生產單元協助的必要手段。由于遠程控制會直接關系生產環節的產品質量和生產效率,目前工業上大多數遠程控制還是基于有線網絡。雖然有線網絡穩定,但也限制了生產的靈活性,同時也在一定程度上限制了生產過程的控制范圍。


          為了達到遠程控制的效果,受控者需要在遠程感知的基礎之上通 過通信網絡向控制者發送狀態信息。控制者根據收到的狀態信息進行 分析判斷并做出決策,再通過通信網絡向受控者發送相應的動作指令。受控者根據收到的動作指令執行相應的動作,完成遠程控制的處理流 程。為了保證控制效果,通信網絡時延和可靠性就更加重要。


          在工業生產中某些環境場合確實不適宜人工作業,比如高溫、高空、環境指標差等場合。甚至有的工作人工無法完成,比如工廠內大件貨物或港口集裝箱的裝卸,都需要遠程控制機械來實現。要實現遠程控制,不僅需要足夠高清晰度視頻提供視覺支持,還需要實時穩定的網絡保證操控的靈敏度和可靠性。這些對現有工業網絡和 4G 技術來說是一個挑戰??紤]遠程控制的需求,5G 網絡的優勢一方面在于高速率可以滿足高清視頻回傳的要求,另一方面也可以在保證可靠性的前提下滿足遠程控制對于時延的要求。


          遠程控制對于 5G 網絡的需求



          機器視覺是人工智能的一個重要分支,在工業上的應用極為廣泛, 可以有效提高生產的柔性和自動化水平。適用于一些人工作業的危險工作環境或者人工難以滿足要求的場合。

          目前機器視覺的應用主要包含五大類,包括圖像識別、圖像檢測、視覺定位、物體測量、物體分揀等。


          為了保證判別結果的準確性和應用的正常運作,整套系統的信號傳輸是一個關鍵的因素。通過 5G 網絡,機器視覺系統實現以移代固, 將視覺系統單元配置為無線傳輸來替代傳統有線連接方式;圖像采集自由分布于多個工位且共享圖像處理單元,共同實現高速,低成本自動化檢測生產線。同時通過 5G+MEC 搭建的“5G 虛擬專用網”將生產過程數據的傳輸范圍控制在企業工廠內,滿足生產數據安全性要求, 確保了網絡安全和生產安全。


          基于 5G 虛擬專網和萬物互聯部署,機器視覺系統可以實現實時遠程監測功能。依托 5G 高速率、大連接特性,不用進車間即可通過移動終端和便攜終端監視制造企業生產過程執行管理系統(MES),獲取視覺檢測系統的運行狀態,如正常運行時間,有效運行時間,故障原因等。


          機器視覺對于 5G 網絡的需求




          自動導引運輸車(AGV),指裝備有電磁或光學等自動導引裝置,能夠沿規定的導引路徑行駛,具有安全保護以及各種移載功能的運輸車。AGV 不需駕駛員,以可充電之蓄電池為其動力來源,一般可透過電腦來控制其行進路線以及行為。AGV 的活動區域無需鋪設軌道、支座架等固定裝置,因而在自動化物流系統中能充分地體現其自動性和柔性,實現、經濟、靈活的無人化生產。在制造業,多臺 AGV 組成柔性生產搬運系統,運行路線可以隨著生產工藝流程的調整而及時調整,大大提高了生產的柔性和企業的競爭力。對于港口、碼頭和機場等密集搬運場所,AGV 被賦予了更為強大的并行化、自動化、智能化等特性。在一些特殊環境要求的場景,如醫藥、食品、化工, 甚至危險場所和特種行業,AGV 除了基本的搬運工作外,還自帶多種傳感器,可以執行檢查、探測、自動識別等工作。


          所謂云化 AGV,是把 AGV 上位機運行的定位、導航、圖像識別及環境感知等需要復雜計算能力需求的模塊上移到 5G 的邊緣服務器, 以滿足 AGV 日益增長的計算需求,而運動控制/緊急避障等實時性要求更高的模塊仍然保留在 AGV 本體以滿足安全性等要求。這相當于在云端為 AGV 增加了一個大腦,除 AGV 原有的復雜計算以外,各種各樣的 AI 能力擴展成為可能。


          實現云化 AGV 大規模密集部署、大范圍無縫切換以及應用拓展, 對 5G 網絡提出了相關需求:即滿足通信調度及業務數據實時交互需求,以及集成其它視覺應用的通信需求。云化 AGV 系統包括室內及室外應用場景,室外覆蓋范圍約2km;滿足工業高可用指標99.9999%,通信時延小于 100ms。目前的雙目視覺 AGV,網絡需求為上行帶寬144Mbps(如果 AGV  端視覺預處理,上行帶寬要求不高),時延30~40ms。未來 AGV 安裝 6~10 多攝像頭(視覺導航、視覺檢查等多種功能),移動速度提升到 2~3m/s,網絡上行帶寬需求小于 1Gbps(隨著低時延的視頻壓縮和解壓技術成熟,可以在 AGV 端實現視頻壓縮預處理,節省上行帶寬),時延約為 20ms。


          云化 AGV 對于 5G 網絡的需求


          以 5G 網絡為基礎,結合物聯網、移動邊緣計算、人工智能等技術的創新應用,青島港引入了遠程控制、無人駕駛、智能物流等場景來構建 5G 智慧港口。


          傳統港口行業是一個典型的勞動密集型行業。近年來,隨著人工成本逐步提高,企業招工越來越困難,然而港口業務量一直在增加,對勞動力的需求有增無減,對技術的要求也更高。為解決矛盾,青島港開啟了“全面自動化”之路。


          實際上,在5G出現之前,青島港通過使用光纜、塔吊、駁車等設備實現了半自動化。光纜的成本很高,高頻率的磨損和移動讓光纜的壽命大大縮短,維護難度大,同時每次起吊操作仍需多人配合,包括操作員、指揮手、理貨員等至少7名現場工作人員,生產現場都是重型設備,存在很大安全隱患,尤其港口經常受到天氣狀況的影響,事故隨時可能發生。此外,故障率高,WiFi網絡抗干擾能力差;工作環境差,傳統碼頭設施陳舊,重型設備難以更新換代等,這些痛點成為制約港口發展的瓶頸。


          在遠程控制方面,利用 5G 的無線傳輸方式取代了原有主控PLC 到起吊設備 PLC 之間的有線通信方式,通過 5G 工業控制網關實現與原有工業控制協議的適配。5G 網絡特性滿足了PLC 控制信號超低時延要求以及高清視頻回傳的帶寬要求。同時為了進一步保障控制信號與高清視頻回傳的實時性,在青島港港區內部署了 MEC 邊緣云,MEC 邊緣云的分流處理有兩方面優勢:一方面減少了數據從終端傳輸到核心網的傳輸路徑,降低了時延;另一方面也保證了港口數據的封閉及安全。


          在港區的交通運輸方面,通過 5G 與MEC 的結合開發了遠程輔助駕駛系統,從而實現了對網聯車進行遠程輔助駕駛和監控。該系統的駕駛服務部分部署在邊緣云上,當駕駛端和車輛端距離較近時, 可通過MEC 進一步降低操控和數據傳輸時延,以提升遠程輔助駕駛的效率。此外,針對無人駕駛車輛感知成本高以及感知盲區的問題, 在路邊部署感知設備,實時感知路況和道路信息等,利用 5G/V2X 技術實現感知信息共享,從而輔助車輛實現決策和控制等功能。這樣一來增加了感知范圍,降低了感知成本,豐富了感知信息,實現了 5G 與智能交通系統的深度融合。


          青島港案例不僅充分利用了 5G 大帶寬、低時延、高可靠性的特點,還驗證了 5G 在智慧港口的建設應用。通過 5G 無線網絡的連接與控制,實現了作業現場的無人化操作,提升了操作的靈活性和可靠性,節省了 70%的人力資源,改善了工人的作業環境,綜合看來,港口的作業效率顯著提高。5G 與工業互聯網新技術的結合使得港口業務更加的多元化、化和智能化。



          隨著競爭的加劇以及人們對美好生活的向往,家電制造業在面臨較大用工成本壓力的同時,也面臨越來越多的用戶定制化等新需求。家電制造工廠涉及的生產流程較多且監管復雜,亟需通過工廠智能化來提升生產效率并增強行業競爭力。隨著 5G 網絡的部署,可以有力促進工廠的智能化、網絡化、數字化,進而為相關企業帶來更好的技術和產品。


          海爾作為家電制造行業的龍頭企業,其在工廠智能化方面開展了相關探索,并基于 5G 網絡打造了一個 5G 家電制造智能園區,驗證了一批典型應用場景,有效提升了其天津家電制造園區的運營效率。


          • 5G+家電制造案例的解決方案

          海爾天津園區通過 5G 網絡實現的主要應用場景包括:天津 5G 園區智能監控平臺、AR 眼鏡安保、機器人(地面)巡邏、無人機(高空) 巡邏、生產線視覺檢測、智能講解機器人、成品庫無人夾抱車搬運、智能物聯網(井蓋、垃圾桶、路燈照明、煙感、停車)等。


          1. 智能監控平臺:借助 5G 邊緣計算MEC 就近部署了園區智 能監控平臺,實現了針對異構物聯網設備的實時跟蹤檢測、大數據統計分析、告警預警等。

          2. AR 眼鏡安保:通過 5G 的低延遲特性實現了 AR 眼鏡安保, 解決了以往對重要區域內非法進入人員的辨識完全依靠安監人員的“人眼”識別和“人腦”判斷的問題,大大提高了準確性和工作效率。

          3. 機器人(地面)巡邏:通過 5G 大帶寬特性,實現了機器人(地面)巡邏,把園區巡邏的高清視頻回傳到“5G  園區智能監控平臺”查看并分析,提高了巡邏效率減輕了安保人員勞動強度。

          4. 生產線視覺檢測:通過 5G 室內覆蓋,實現了生產線視覺檢測,解決了原來對沖壓鋼板的品質檢查依靠質檢人員完成而易疲勞漏檢的問題。

          5. 成品庫無人夾抱車搬運:借助 5G 網絡,用于成品洗衣機搬運的無人夾抱車可以在不同信號覆蓋區域無縫切換,提高了運行效率和工作區域員工的安全性。


          在海爾天津園區的智能化提升過程中,綜合運用了 5G 的大帶寬、低延時等特性和邊緣計算、無縫切換等技術,有效改善了傳統工廠運營過程中遇到的效率、安全、人工成本等問題,滿足了工廠智慧運營的需求。為未來實現成品庫的全程無人化、智能化奠定了網絡基礎。



          個人認為雖然5G是面向產業互聯網、物聯網的,那是他最大的用途。個人認為:跟消費相關的領域,比如說增強寬帶方面的 裸眼3D、VR、AR,跳出游戲,用在購物,用在教育上,它確實會使教育娛樂化,教育的本質是應該讓大家產生興趣,太多的孩子就是填鴨式的,對要學的東西沒有興趣,有可能去改變教育,特別是通過互動的方式相互學習,這都是5G可能帶來的。 


          5G的真正商用也還有一定的距離,所以我們一方面要看5G本身的成熟時間表,其實另一方面也要關注5G相關設備的成熟時間表,只有這兩者同步都成熟了,這個應用才可能順利地推出。所以,做應用的人真的是不容易,不光要關心自己的應用,還要關心整個產業,其他相關軟件硬件的進展。


          以前虛就是虛,實就是實,現在如果你找到一個場景能夠使得虛實融合,而同時價值大大增加,那恭喜你,你也發現了一個創業機會。


          在虛擬世界里,我們打游戲的時候和任何一個人PK,對方頭頂上都有一系列數字,他的能力值如何,他體力值如何,還剩多少血,他還有什么裝備,等等。


          但是我們在真實世界里,其實我也希望對面這個人有標注,因為人類在進化過程當中,隨著億萬年的進化,我們大腦可以儲存超過上百萬張臉的信息,也就是說即使是我見過上百萬人,我依然能夠清晰地辨認每個人是誰,不會弄混。


          但是文字出現得非常晚,歷史也就不到一萬年,也就意味著人類沒有構建起這個連接,能夠把文字和人臉對應起來。我經常看到一個人,他的臉我非常熟悉,但我就是叫不起他的名字來,我也記不起在哪見過他了。這個不是我的問題,這是進化帶來的問題。


          在虛擬世界里就很簡單,看到對面一個人,直接把他的名字標在他的頭頂?,F實世界如果能和虛擬世界結合,這個問題看似也有了打通的空間。比如說我如果戴上一個增強現實眼鏡,眼鏡里就可以識別對方的人臉,識別完了以后,在我的視線里,在對方臉旁邊就會投影出他的名字來。


          所以這些東西以前看似都是不可實現的東西,今天都可以實現了。我們需要沿著這個脈絡去思考,這些可以實現的能力用在什么地方,能夠帶來最大的利益,因為這就意味著商機。



          當一個世界虛和實結合到一起的時候,它就會格外精彩,如果我在真實世界里都能看到對方人臉各種標注的時候,那對我來說簡直太方便了。這個并不是天方夜譚,現在已經有很多應用通過一個Pad、通過AR應用去掃描周圍的建筑,就會得到這個建筑的一些信息,包括建筑里面餐廳的促銷信息都會顯示在上面。我認為這個Pad形式不夠好,因為你還要舉著它,最好的肯定是眼鏡形式。


          現在國外的AR眼鏡,就是增強現實眼鏡的輕型化趨勢,尤其是眼鏡里的很多部件越來越小型化,比如像人眼做投影的小投影儀已經變得非常非常微小了。也就意味著未來每個人上街都會戴眼鏡,不是因為你是近視眼,而是因為你的眼鏡里可以投射出各種各樣的數據做參考。而這個眼鏡和今天的眼鏡會非常像,一點都不是今天很笨重的虛擬現實眼鏡的樣子,就是一個普通眼鏡的樣子,但是里面會給你提供大量信息。


          比如說我在某條街上開了一個飯館,我就可以把我的飯館數據添加到地圖里來,這樣別人找我這個飯館 方便很多。甚至我還可 把我的促銷數據都添加進去,這樣別人戴上增強現實眼鏡,經過我飯館的時候,就會看到飯館里打折的信息,包括熱門的菜,他就會決定要不要進來吃飯。這個行為并不是一個第三方公司自己來完成的,而是用眾包的方式,人人都做一點事情,整個虛擬世界就格外豐富了。



          AR除了做位置標注,和信息的提供以外,最主要的一個市場還是游戲。因為游戲是人類發展的一個永恒的主題,而且我認為隨著人工智能的發展,隨著我們的生活當中大量可重復的、無聊的勞動都被機器替代了,我們有更多的創造力,也有更多的時間去玩游戲了。當然創造力也會造成游戲會更精彩,所以游戲一定是未來的主旋律,AR游戲也是5G發展當中的一個主旋律。


          AR游戲其實已經出現了,比如之前很著名的Pokeman Go,但是我認為AR游戲還會不斷地重復出現,而且它的一些特質也會延續到5G,什么特質呢?就是所謂的輕游戲,因為它要結合到現實環境當中,如果太重的AR游戲,它的計算量就過于大了。而且因為它和環境結合,它沒有必要這么重,沒有必要構建一個虛擬環境,只需要在真實環境里疊加一些虛擬東西就好了,所以它會傾向于社交性,會出現很多偏"輕游戲"的社交游戲,所以這個Pokeman Go是一個非常好的示范,未來會有大量類似游戲出現。



          ARtoB,增強現實應用。就是對企業客戶服務這樣的應用,而不是toC。因為toC需要更好的表現力,就需要更好的帶寬支持、更好的響應速度,現在還是會有一些瓶頸的。


          個最典型的場景,就是家電的遠程維護。很多城鎮、農村隨著生活水平逐漸變得更富裕,購買了大量的家電。但是家電的維修就變得很困難,如果不出事還好,出事了很貴的設備就只好扔掉,你寄到別的地方再維修,成本也不低。


          未來會出現一類新的職業,叫萬能的維修工。為什么呢?雖然他們其實并不是真的萬能,但是因為他們戴上了AR眼鏡,增強現實眼鏡,他們看到的所有的場景都會遠程地回傳到總部,而總部會真正坐著幾個萬能的維修工,非常專業的維修工遠程發指令告訴你怎么去維修就好了。


          除了遠程維修以外,還有一個很重要的場景就是遠程的協同。所謂遠程協同的意思,比維修還要更進一步,維修是單向的傳遞數據,而協同是雙向傳遞數據。這種遠程協同就有很多的場景,一個是遠程的設計。比如:一輛汽車,它的車廠是在中國,而優秀設計師可能在意大利,以前的遠程協作就很麻煩,如果不在同一個地方,設備又比較復雜的話,遠程協作基本不能實現。


          但是現在隨著人工智能包括增強現實的系統的優化,未來大量的復雜產品都會被數字化,變成三維的,遠程的協同就很容易開展。你會看到越來越多的遠程生產、開發和設計上的協同,會出現在我們周圍。


          當然還有一個大家能夠感受到的更簡單的場景,也就是遠程會議。未來你的手機傳送的視頻清晰度足夠,就意味著未來的通話不是手機對手機,而是雖然是通過手機,但實際上是兩個大屏幕互相之間的通話。


          現在有很多空巢老人,以前覺得非常地孤單,現在只要老人家里的電視和孩子家客廳的電視永遠保持實時連通的狀態,老人就可以不管隔著多遠,實時看到自己的孩子,包括孫子輩在客廳里玩,而且可以實時打招呼,實時互動,這個孤獨感就會減輕。


          遠程醫療,以前因為技術問題,基本是不可實現的?,F在看起來為時不遠了,因為至少技術上沒有障礙了。當然了,還有大量的專業開發需要去做。比如說如何遠程地傳遞一張醫學級別的診斷圖象,還是需要去做更多的研究。所以我們說這個領域會出現專門的運營商就是這個原因,但是至少應用離我們已經非常近了。


          所以第一步我們認為是to B的AR,針對一些專業行業領域市場的增強現實應用會先起來。


          游戲的另一個方向就是重游戲,也就是VR游戲。在VR游戲領域里面,輕不是最好的,因為輕就意味著失真,重才是真正的方向。所以我說VR游戲的核心是打破物理世界的限制,也就是說給你一個和現實世界一模一樣非常逼真的世界,讓你以為到了現實世界里,但是因為它是虛擬世界,所以很多現實世界里你不喜歡的東西都不存在了。我們經常會覺得好像現實世界也沒什么不好,那是因為你沒有認真想過虛擬世界有什么好。其實你對比一下虛擬世界和現實世界,凡是虛擬世界里沒有,而現實世界里有的,都是現實世界不夠好的東西。


          我相信未來會有越來越多的人會愿意生活在虛擬世界里,當然,這也會引發一層擔憂。虛擬世界會不會讓我們更加沉迷?我可以跟你保證的是,VR的虛擬世界一定會更沉迷。問題在于沉迷到底有什么壞處。甚至還有另一條,我們的真實世界為什么不向虛擬世界學習,使我們的真實世界更加有趣一點呢?沉迷不就是因為我們更喜歡嗎?所以我認為未來虛擬世界會成為真實世界的樣板和標簽,我們會有各種虛擬世界的探索和嘗試,使人類知道什么樣的真實世界才是更美好的,從而使我們努力把真實世界建設得像虛擬世界一樣美好。


          讓我更著迷的一點,就是虛擬世界里,你看世界的視角都會不一樣。如果進入到一個虛擬現實世界里,我能不能換成蟑螂的視角。比如你是一只蟑郵,你看到周圍都是巨大的桌子椅子這樣的建筑,會不會很有趣呢。


          當然了,我們就不得不提到虛擬現實視角無人機了,因為蟑郵視角給了我們一個極小的視角,但是無人機會給我們一個極其廣闊、極其大的上帝視角。我們稱它為第一人稱視角無人機,叫First Person View,叫FPV第一人稱視角無人機一個很有趣的地方,就是它會給我們帶來很多刺激的體驗。


          未來第一人稱視角無人機會衍生出大量的競技運動、極限運動。它最大的妙處就在于會給你極大程度的刺激,而同時又保證你的安全。未來社會對人的安全性的要求是越來越高的,因為人是這個世界最大的財富。但是同時,我們又希望為了擴展我們的創造力、視野,獲得更大的刺激。所以,凡是能夠給我們帶來更大刺激而同時又保證安全的東西,它未來的市場都是巨大的。



          VR直播在體育比賽當中能夠做到相當于把整個現場虛擬化了,我們不再是在場邊看球,如果你去過比賽場看球就知道,尤其是最后一排看球,連球在哪都看不清楚,球員更是模糊一片,相對來說真的是會喪失很多樂趣。


          但是如果你未來利用虛擬現實設備看球,你甚至可以站到場內看球,而且可以站在任何一個點,向任何一個位置看。想想兩個人正在爭頂頭球的時候,你插到兩個人中間,左看看右看看,看看兩個人誰能爭頂到,這個樂趣肯定不是以前你站在場外能夠享受得到的。


          另一種虛擬現實直播也就是業余的直播,當然業余直播還分成很多的種類,一種就是可以用第一人稱視角無人機做虛擬現實直播,我們看了無人機的畫面、跳樓的畫面都能夠體會。還有一種畫面其實也非常值得去體驗,就是旅游的畫面。如果有一個人用第一人稱視角無人機,駕駛無人機讓我去看各個虛擬場景,我只需要戴上頭盔就能享受到無人機帶來的視角,我相信這個震撼就不光是像行人一樣,因為除了像行人一樣去看周圍的環境以外,你還可以飛到行人到不了的地方,飛到空中反過來去看這些美景,就像《阿凡達》的那些美景一樣,我相信肯定是更漂亮的。5G來的時候,帶寬不再是問題的時候,甚至能夠遠程直播。我都不需要去泰山、黃山,早晨我在家就可以收到實時直播,那這個服務更可以廣泛地覆蓋更多的用戶。未來遠程旅游會是一個非常熱門的業務。



          未來的VR電影更是很值得期待,甚至我們今天都還不能預測出未來的VR電影的形態是什么。因為最大的特點,就是VR電影會從過去的單線程單視角的模式變成未來的360度沉浸式體驗。但是沉浸式體驗會給導演帶來一個巨大的麻煩,也就是說以前這個鏡頭是導演做主,控制得了的,想讓觀眾看哪,觀眾就只好去看哪。如果他實在不看,你就給一個特寫就好了。但是未來是360度環繞,你想讓觀眾看哪,他就是不看,你干著急也沒辦法。


          虛擬現實來了以后,整個故事的敘述方式可能變成多線程的復雜結構,甚至變成不是電影而是游戲,也就是說你是身臨其境參與的,而你走過的路線不同決定了你看到的電影結局都是不同的,那我們不覺得更加有趣嗎?



          除了VR、AR這樣的應用以外,還有很大的一類應用就是環境智能,一直強調能夠接入的設備多了,而且這些設備都更加智能了,設備之間會有大量的互動了,所以環境智能一定會凸顯。環境智能的第一個表現就是人屏互動,越來越多的屏幕會出現在我們的周圍。就像華為公司的智能屏,未來越來越多的屏幕都是智能的,和人能夠實現互動。那么這些互動的屏幕本身會收集你的數據,也會給你提供數據,讓你的體驗更好。


          人屏互動會分成幾個層次進行延展:

          第一個層次就是家庭。我認為華為模式是對的。以電視為核心來構筑整個智能家居是比智能音箱更加合理的一種模式。因為音箱模式利于輸出,發出指令用聲音是最好的,但是不利于輸入,它回復你指令的時候,只能用語音回復,效率是比較低的。如果你用語音去發出指令,而用屏幕給你各種回復的選項是更優的一個方案。


          第二層次是智能的生活環境。生活環境是什么意思呢?未來就會出現所有街邊廣告都是智能屏,不再是紙質的印刷廣告,而智能屏可以監測你的行動。不光可以識別你的人臉,甚至不用識別你的人臉,它可以識別你的動作,每個人的行動其實都有一個動作指紋,因為每個人動作特征都是不一樣的。所以如果攝像頭連續識別人的動作指紋,就能知道一個人連續經過幾個攝像頭,當一個人經過幾個智能屏的時候,他看到的是一個連續的廣告,這樣會對他形成更好的影響,能跟他建立更好的互動。所以,未來這種智能環境也是很有可能會實現的的。


          第三個層次是很多行業性的智能會出現。尤其是在車聯網,大家不要以為車聯網就是要無人駕駛

          有人駕駛的車聯網后,就比人更聰明。比如充電樁,停車位,可能你在酒店門口停下車,車輛就會自動行駛到停車位。

          無人駕駛的車輛首先用的可能會是工程類的,礦山港口車間里用的那種工程類車;后面就是乘用車,坐人的車就比較謹慎了,他要跟社會的公共的體系要融為一體,有法律法規的問題,安全的問題等好多問題。所以很多人在研究最后一公里就是自動泊車。

          初期關注,消費互聯網與物聯網結合點的應用。



          目前抖音發的東西還是有審核、時延、碎片化的,他叫客戶產生內容UGC,他是比較隨意化的,這樣的管控也不容易,所以就帶來很多的社會問題,而且它的粘性粘度也不夠。


          舉例:比如要去看一場球賽,因為主攝像頭是跟球走的,你喜歡梅西就看梅西,他喜歡C羅就看C羅,各看各的。未來,每一個在現場看球的人都可以個性化向外直播,比如2020年東京奧運會,推出一個個性化導播平臺,就可以選擇球賽 選擇明星,然后找一個拍攝角度好的,然后掃碼付費就可以觀看。個性化直播,這它是會沖擊傳統自媒體的玩法的,跟抖音又不一樣了。


          移動通信技術所謂達到5G了,大家做技術研發的時候,技術用這樣的解決方案去實現,已經達到了不是一個數量級的這樣的能力,我們都把這個技術凍結。它技術每天都在發展,到這個時間點凍結的技術就可以稱之為5G,但是不是凍結后它就不發展了,初期5G也就是20倍于4G的速度,但是到未來可能要達到100倍。


          “5G時代也用智能手機嗎”“在智能手機之后人們拿著走的終端是什么”


          對智能手機構成威脅的個人裝置尚未出現,各家智能手機終端廠家仍將發布它們的5G智能手機,智能手機的時代仍將持續。


          不過,近年的智能手機已經難以在外觀上推出差別化的舉措。物理按鈕沒有了,屏幕邊框沒有了,in-camera(在智能手機屏幕的側位,拍攝自己這一面的照相機)的切口也沒有了,比上述這些再洗練的部位已經找不到了。


          雖然說依靠折疊的結構使之大畫面化是容易想到的差別化方法,但即使三層折疊、四層折疊這種結構從技術層面來講能夠實現,但是如果厚度和重量增加的話,就與攜帶終端不相符,即使能做到更加大畫面化,在外出地點也難以打開使用。


          如果說改變外觀已經難以做到,那么就要考慮功能的進化。增加所安裝的照相機的數量、附加寫字筆之類的輸入顯示器、提高音箱的質量、附加新的識別/結賬功能等,各種強化功能的做法都在考慮之中,今后都將得以實現。


          但是,能給消費者帶來驚喜、讓消費者感到心潮起伏、能改變消費者的生活方式,及每天的行為等諸如此類的革新已經非常困難了。無論是從外觀來看還是從功能來看,可以說如今的手機已經非常成熟了。



          從早晨起床到晚上睡覺,生活中所必要的所有功能都集中于手機,而可以從手機那里衍生功能并取得成功的是可佩戴終端。比如,我們現在經常能看到在車站檢票口使用帶有NFC功能的的裝置和在便利店使用蘋果手表結賬。


          無論是世界范圍內還是日本國內,可佩戴終端的大部分都是手表型的。截至2016年前后,可佩戴終端的主流還是面向愛好運動的人記錄運動量的手環式簡約廉價的專用終端,但2017年以后以蘋果手表(Apple Watch)為代表的具有多種功能的手表型終端成為主流。


          可佩戴終端本來就是小型的,顯示器也是小型的,能夠組裝的零部件也很有限。為此,廉價的專用終端成為主流。但是,以蘋果為首的終端廠商依靠其強大的硬件開發能力,以及即使是小畫面也不失操控性的巧妙的UI設計能力,手表型的多用途終端占據了優勢地位。


          根據IDC所做的2018年第四季度的可佩戴終端出廠數量的調查結果,蘋果占有超過六成的壓倒性市場份額。蘋果手表與其他蘋果產品在識別方面的聯手(如果佩戴蘋果手表就可以自動登錄由該公司開發生產的個人電腦)、連接4G(即使蘋果手表自身也可以在任何地方通信),以及結賬功能(用蘋果手表自身即可結賬及在自動檢票口剪票)等方面,不斷追加新的功能。同時,這些功能都可以輕松利用,處理速度等基本性能也在不斷提高。相對于專用終端,其多用途終端的優勢不斷得到鞏固,已經部分代替了手機的功能。而且,蘋果讓其手表具有了超越手機替代品的意義,那就是保健功能。


          蘋果手表具有光學式心率傳感這一讀取心率數值的功能,可以設定其在心率達到一定程度以上時發出提醒。還具有監測佩戴者摔倒并及時發出通知的功能。通過這些功能,蘋果手表已經挽救了許多人的性命。而且,蘋果手表的系列還安裝了心電傳感功能。這是能夠讀取心電圖數據的功能。不過,在日本這一功能必須取得作為醫療儀器的認證,因此它目前還不能被利用。


          監測摔倒這些功能即使是手機也有可能做到,但是心率及心電圖的常態化監控,如果不是經常接觸肌膚的可佩戴終端則不可能做到。所以說,蘋果手表絕對不單純是代替手機的手表型終端,它還在向具有保健功能的醫療儀器的方向發展。


          既然蘋果手表不是手機的替代品,手機用戶也有理由佩戴蘋果手表。從現狀來看,蘋果手表的啟動及應用軟件的利用還需要依靠iPhone。但是,蘋果手表自身也可安裝應用軟件,將來只靠蘋果手表就可以生活的狀態也可以實現。在這里以蘋果手表為例,要說明的是,目前正在普及的面向消費者的終端中,可佩戴終端處于最有發展前景的地位。


          要想讓可佩戴終端普及,那么它就不能只是手機的替代品,還應該具有與可佩戴終端名稱相符的價值,比如像上文所講的保健功能。要想實現傳送心率和心電圖并且在萬一的情況下發出通知的功能,就對通信提出了既要有可靠性又要具備實時性的要求。而且,為了實現這些保健功能所要傳送的數據容量并不大,因此就需要高可靠、小容量那種類型的通信。


          把可佩戴終端用于日常生活通信,不一定限于具備滿足高可靠、小容量這一條件,還有可能利用5G通過網絡切片技術,把用于保健功能的通信與用于日常生活的通信區分開來,通過收取不同的通信費來提供。


          回顧過去的10年中,日本曾經提出“普遍存在”(ubiquitous)這一網絡愿景。日本總務省把普遍存在的網絡社會定義為“無論何時、何地、何事、何人都可以上網的社會”。在智能手機和IoT正在普及的今天,看起來這一切是理所當然的。但是,對比在還沒有iPhone、功能手機還占有主流地位、上網需要利用個人電腦的當時,如今的智能手機和IoT是既先進又能夠引發人們共鳴的愿景。作為相關領域的人們朝著實現這一愿景努力邁進后,才有了今天的形勢。



          未來十年在技術的意義上仍然讓我們非常好奇,所有的行業在今天都會發生全新的變化。


          第一,心態。要有心態上的改變。我們要思考如何提前了解5G的影響,必須要提前做好規劃。因為原來雷軍講過,臺風來了豬都會飛。一定要在臺風來之前做好所有的準備和規劃,在心態上一定要活在未來。因為5G的未來并不遙遠了,巨大的機會也就是2-4年期間,現在已經可以開始動手了。


          第二,策略。任何業務都有機會利用5G提升自己,所以必須要深入理解5G帶來的價值,然后掌握如何讓5G為自己賦能的能力。也就是說要懂5G,而且能夠用好5G。技術是一堆人發明的,設備是一堆企業提供的,但是真正利用5G做出自己的精彩,是那些應用服務的設計者,可能就是正在聽這個講座的你。我希望你在5G時代,能夠打出基于5G的閃電戰。


          第三,行動。你聽了再多的講座,再熱血沸騰,如果沒有行動,一切都不會發生。5G是個復雜生態,如何掌握好5G業務實施的節奏,如何及早地投身5G,而且建立好足夠多的聯系,這樣當你行動的時候,能夠行之有效,能夠使你的策略真正得以實施, 你才能夠把握成功。


          最后,祝你在5G時代真正能夠成功,掌握你在5G時代的輝煌。



          數據可視化設計師如何建立靈感庫?

          ui設計分享達人

           


          一、前言

           

          與其他相對成熟的設計領域(UI、插畫等)相比,數據可視化尚顯小眾,在一個細分、小眾、不成熟的領域里做設計,“怎么去找靈感”確實是一些小伙伴經常遇到的問題。本文以本人工作經驗為基礎,系統性分析了該問題及對應的解決方法,并將其整理成文與大家分享,這在數據可視化行業內尚屬首次。當然了,本文雖面向數據可視化設計師群體,但其中的方法是通用的,運用在其他設計領域也完全事半功倍。

           

          二、本文結構概覽


          本文圍繞“搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新” 五大塊展開。下圖向展示了這篇文章的知識結構,大家可根據思維導圖,選擇自己感興趣的部分閱讀,也可把這張圖作為知識卡片收藏,幫助自己梳理建立靈感庫的思路和方法。


            

          三、靈感庫建立的基礎


          靈感庫的建立大體上分主動與被動兩種。主動,是我們有意識的收集、整理相關作品素材形成靈感庫的過程;被動,指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因為后者更不可控,影響因素較多,比如你所處的圈子、社交網絡使用習慣等都會影響被動獲取的質量。所以今天,我跟大家分享的主要是第一種主動建立靈感庫的方法,而這個方法的核心我把它歸納為兩個字 :搜索。

           

          搜索是現在這個時代我們主動獲取信息的最主要手段,每天我們通過各類關鍵詞在各類APP上獲取各樣的服務、產品和資源。靈感的主動收集就是一個通過關鍵詞搜索,然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實就是我們能不能用好搜索。不同的搜索方法、渠道、關鍵詞極大的影響著我們獲取到的信息的質量,這也是本篇文章為何一搜索核心展開的原因。

           

          如下圖所示,同樣的關鍵詞在不同的搜索渠道,得到的內容質量是不一樣的。

           

           

          四、靈感庫建立的第一步:搜什么?

           


          互聯網很大,如果沒有明確的目標,找靈感的過程就跟刷抖音一樣,恍恍惚惚幾個小時,好像點了不少贊,收藏了不少干貨,回頭看其實并沒有什么特別有價值的東西,所以找靈感要有目標,有KPI才行,有目標就有標準,有標準才有方向和效率。



          如上圖所示,我對數據可視化這個行業術語做了分析和拆解,這樣做的目的是為之后搜索關鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關內容時,思路總是局限在“可視化”這個關鍵詞上,但是直接使用這個關鍵詞搜索,大多數時候并不能找到我們心里預期的結果,或者搜索多次后,看到的都是之前見過的作品,很難突破邊界,獲取更多新的靈感。造成的這個結果的原因顯而易見,就是關鍵詞的匱乏,不知道搜什么。而對“大屏數據可視化”進行解析之發現,以往的搜索,我們只使用了四個方向里的其中一個,其它三個方向并沒有很好的利用?,F在,我們以每個方向上的核心關鍵詞為基礎,去豐富它的下一級關鍵詞,這樣就會像枝椏新生一樣,在各個節點延伸出豐富的詞匯。



          媒介就是數據可視化設計最終落地在什么平臺,一般來講,大屏數據可視化設計落地的媒介當然就是大屏了,以它為核心做關鍵詞的發散,可以產生其它幾個二級關鍵詞


          數據類型是主要數據的特征或來源,不同的數據類型,在可視化設計時有不同的視覺特征。比如地理信息的數據可視化,一般會與道路、河流、人造建筑、某區域內地標等一起出現,會有豐富的3D場景、動效,而圖表信息相對較少;報表類信息的數據可視化,則主要以更好的展示報表內大量數據為主,所以強調信息的層級、主次,設計的目標是要減少用戶認知負擔、引起用戶閱讀興趣,促進數據內容的有效傳達,因而會較少使用動畫,其次,因數據較多,也很難對應到某個具體的物理場景,故3D模型等也較少使用。

           

          所以以數據類型為核心,拓展的二級關鍵詞會讓搜索結果更精準,更有針對性。


          設計風格就是視覺設計整體上給人的想象和感受,好的設計就跟一個人一樣,一定是有自己鮮明的個性和氣質,能夠引起人的共鳴和向往的,唯有如此,設計才能吸引人,從而影響人,并最終傳遞自己的觀點給觀者。所以設計風格的定義是視覺設計中最重要的一環,也是最需要靈感和創造力的部分。

           

          作為數據可視化設計師,我們想要找到的參考是那些具有數據可視化風格的作品,但這些作品本身并不一定是在講數據可視化的內容,只要作品某部分的設計有我們想要的那種“感覺”,就可以了,而這個作品可能是某段影片、某個動效、某種圖形、某個元素或聲音?;谶@樣的思路,我歸納了一些具有數據可視化風格但不一定都是數據可視化作品的關鍵詞。這就是一個特別有意思的點,我門想要找到某個內容,但當我們用最貼切它的那個名字去找時,卻不一定能找到最能代表它風格的作品。所以當我們跳出數據可視化這樣一個具體的點,而從更抽象的設計風格這個層面去看待它的時候,就能更好的的發散思維、拿到了更多好的關鍵詞,找到更多的刺激點。



          以設計風格為例,我們從它的節點上找到任意一個關鍵詞:SCI-FI,然后搜索這個關鍵詞,我們看看搜索到的結果。

           


          業務場景簡單理解就是在什么情況下要解決什么問題,它是數據可視化的落腳點,也是數據可視化的商業價值所在。每個公司或團隊,都會有自己專注的業務方向,所以在工作中找這方面的靈感,從業務場景入手效果最好。



          簡單回顧下,通過上部分文章的分析,我們從媒介、數據類型、設計風格、業務場景四個方面形成了一個數據可視化的關鍵詞的矩陣。這個矩陣是建立靈感庫的基礎,之后我們每當我們有新的關鍵詞要加入,或者有效果不好的關鍵詞需要剔除,只需修改、迭代這個關鍵詞矩陣即可。有了這個關鍵詞矩陣后,我們如何利用它完成一次基于實際需求的靈感搜集?下面給大家舉個小栗子來看一下怎么用。

           

          一句話描述業務需求

          首先用盡可能簡短的一句話描述業務方訴求。

          一句話描述業務訴求后,我們把業務需求帶到關鍵詞矩陣中,就會獲得如下圖的結果:

           

          可以看到,帶入需求后,按樹狀結構去匹配與需求相吻合的關鍵詞,就可拿到明確的搜索指引目錄,然后我們按搜索指引,開始靈感收集即可。

           

          這里有個小小的點,就是為什么要盡可能用簡短的一句話來描述業務方訴求,

           

          1、這樣做可以把那些優先級低的干擾因素都過濾掉,留下真正核心的訴求,越是能簡短的概括,越能真正把握需求的核心。我個人一直以來與業務方溝通需求后,都會嘗試用一句話概括,若需求方認可,開始設計工作;不認可,則繼續溝通。

           

          2、對于數據可視化設計師來講,明確自己在工作流中的角色、承擔的責任、要解決的問題以及最終交付怎樣的產出尤為重要,因為只有清楚了這些,這樣我們才能有效分配自己的時間、確定跟上下游的協作策略,避免盲目的沒有KPI的設計。

           

           

          五、靈感庫建立的第二步:去哪兒搜?


          合適的關鍵詞是第一步,它保證了我們搜索結果的有效性,而去哪兒搜決定了我們搜索結果的質量。如下圖,針對數據可視化設計師,我對“去哪兒搜”這個問題按我自己的從業經驗做了梳理。

           

          從我的歸納里大家可以發現,我把數據可視化設計師的靈感來源分為了四大塊(其它行業的設計也大體上就這四塊),分別是:設計網站、產品或服務提供方、獨立設計師或工作室、視頻網站。

           

          第一部分:設計網站

           

          設計網站部分列出的都是設計師們都熟悉的幾個站點,在之前,大多數靈感的收集都可在花瓣完成,但花瓣最近幾次改版之后,已經沒有以前那么好用了。對數據可視化方面的素材搜索,個人經驗下,強烈推薦大家去behance,雖然behance訪問方面也面臨一些困難,但是,但凡你想真的了解一些好的設計,這個網站,是你一定要想辦法去經常逛逛的。至于為啥不推薦其它幾個網站,倒并不是說其它網站不能用,只是搜索的結果相對局限。針對這塊的具體分析,我會在文末的Q&A里進行。

           

           

          第二部分:產品或服務提供方

           

          我們知道,任何商業設計,一定是有一個業務或應用場景來支撐的,一定程度上設計就是在圍繞業務場景提供視覺、交互、用戶體驗、品牌等方面的解決方案,也就是說設計是服務于業務場景的,反過來講,服務于這個業務場景的就只有設計師么?當然不是。在市場條件下,服務的提供方除了像設計師這樣的個體外,更多的是我們熟悉的另一個機構(組織),這個組織的名字叫“公司”。公司把大量專業的人員組織在一起,通過優勢互補、強力協作,提供服務、解決需求方問題。對于數據可視化設計來講,企業當然也參與其中。所以我們找靈感去服務提供方也是一個的方法。企業要證明自己的實力、要讓潛在客戶了解自己,必然會花大量的資源做營銷做推廣,而最常見的推廣的落腳點就是企業官網。很多做數據可視化的公司,會在官網展示一些能體現自己業務特點、業務實力的案例,而這些案例就是這些企業最好的數據可視化設計作品了,沒有人會在自己的臉上放垃圾上去,對不? 所以但凡有案例展示的官網,案列基本都是最典型最好的設計,所以從這些案例中找靈感,也是一個有意思且有效的方法和途徑。

           

          阿里DataV


          Hightopo



           Tob.Design



          第三部分:獨立設計師或工作室

          獨立設計師一般給人的感覺是什么呢?就是在自己垂直的領域內牛逼,近乎神一樣的存在。獨立設計師要能順利“獨立”,當然是在設計能力、個人品牌建設、客戶維護、運營管理等方面都有比較硬核的水準,所以這部分設計師作品一般不會差。而工作室一般都是一個或者幾個知名設計師組成的團隊,在管理方面更“公司化”一些,這樣的工作產出也會比較穩定,水平較高。就可視化(包括類可視化)領域來講,個人比較認可和喜歡的工作室有以下幾個(歡迎大家評論里補充,或參與文末問卷調查),Ta們的作品風格鮮明,找靈感也是不錯的參考

           

          dennisschafer



          huds+guis


          以上對于“去哪兒搜”的分析,我相信可以給大家很好的啟發:我們設計師尋找好的作品并不一定要通過設計相關網站進行,你看大家都能看到的東西,即使有突破,那也是大家所熟悉的樣子,你只有從圈子里跳出去,看80%的人看不到的東西,你的靈感才有機會與眾不同,標新立異。



           

           

          六、靈感庫建立的第三步:怎么搜?


          前面兩部分,我們介紹了搜什么(關鍵詞的定義),去哪兒搜(合適的素材來源),接下來以behance為例跟大家聊聊怎么搜,介紹一些具體的方法。我們的目標是盡可能少的點擊搜索按鈕,且盡可能多的找到符合自己預期的有質量的作品。要做到這點,首先我改掉自己以往的不好的搜索習慣。

           

          我知道我很多小伙伴都是輸入一個關鍵詞,然后看結果頁,沒有滿意的就換一個關鍵詞繼續,這樣做很低效,容易漏掉結果頁中符合你預期的好作品,并且也容易造成關鍵詞的浪費,通過第一部分關鍵詞矩陣的介紹,大家都知道,關鍵詞是被定位推導而來的,若不停的換關鍵詞,很快就會出現關鍵詞用完了但是依然沒有找到好靈感的囧局,所以榨干每一個關鍵詞是搜索的重要手段,具體怎么做到這一點,我個人有以下思路給大家參考:

           

          1、直搜關鍵詞:快速瀏覽、標記自己感興趣的項目,稍后再做整理


          通過這個結果頁面我們看到,搜索結果包含“所有結果、項目、人物、情緒板”四個選項,默認顯示所有結果,但這個意義不大,重點在項目跟情緒板。

           

          項目

          切換到項目標簽,項目標簽下展示的都是完整的項目作品,這是可以快速瀏覽,看到感興趣的內容就把它標記到新的頁面,等所有瀏覽查看結束后再細看每個項目,并對項目做進一步的分類和整理。

           

          項目標簽下提供的篩選項很實用,分類依據推薦“好評最多+本月”的組合,以月為單位既可選到大家都比較認可的新作品也避免了因數據波動造成部分作品質量差的情況?!耙巡哒埂鳖愃普究峄騏I中國的首頁推薦,是被官方編輯認可和推薦的作品,一般都會有很高的質量,但時間上可能會比較舊。


           

          在篩選器里面,有另一個比較實用的功能叫做“按色彩篩選”,如果客戶或者業務方對主色調有要求,就可以通過色彩的篩選,找到更符合我們業務需求的相關作品借鑒,或者設計師自己對某類顏色的搭配總是調整不好,也可以通過篩選,看看其它同行是如何處理這類色彩的,這也是一個有針對性訓練和學習的方法。


           

          情緒版

          情緒版就是花瓣里的畫板,它是其Ta設計師采集的同類主題的作品合集,用法也跟花瓣一模一樣,唯一的不同是花瓣可以采集站外的內容到畫板,而behance只能采集站內的內容,其余兩者完全一致。

           

           

          情緒版默認是按時間的先后順序排列的,所以可以通過篩選項,將排列順序調整為“關注人數最多”,正常來講,關注人數越多的情緒版收集的作品質量也越高。

           

           

          2、利用作品標簽聚合同一主題作品,并集中瀏覽

          我們知道,像站酷、UI中國等平臺,用戶上傳作品時,都需要給作品添加一些標簽,這些標簽的作用就是幫助網站做人工的作品分類,我們點擊某一標簽就能看到使用了同一標簽的所有作品,可以說標簽是比搜索關鍵詞的內容檢索手段。每一個作品下,都顯示了作者上傳作品時填寫的標簽,通過點擊這些標簽我們將搜索結果引入到了另一個更純粹有效的內容領域。

           

          更有趣的是,標簽同樣支持項目、情緒版這兩個層面的進一步分類,同時也支持之前介紹過得分類篩選功能。也就是說,在最開始搜索時找準一個關鍵詞,之后通過情緒板、作品標簽等方式就能關聯起來海量的內容。

           


          3、按圖索驥:Ta推薦的作品

          通過前兩步,我們已找到了一些比較不錯的作品,而優秀作品的背后當然是優秀的設計師或團隊。所以點進作者的主頁看,一般都會有驚喜的。除了能看到作者自己的作品外,我想說的是另一個標簽“好評”,好評這個標簽其實體現了作者的審美和職業方向,如果作者本人在領域內已經足夠專業,那么能被Ta欣賞和點贊的作品大概率也不會差,所以好評這個按鈕,是借助行業大咖的手幫我們做了一次作品的篩選和收集,點這個標簽進去大多數時候是不會讓你失望的,一般都驚喜滿滿。


          4、Ta關注的設計師:順藤摸瓜,串起一個行業的大咖

          在今天,每個設計師離自己領域里最頂尖的大咖,只隔著3.75個人,通過點擊作者的“正在關注”,你可以看到設計師本人還關注了行業里的哪些設計師,通過這樣的操作3到4次,你會發現總有那么幾個人,會在這個略顯復雜的網絡中被不同的大咖同時關注,那么Ta就是這個行業里比較頂尖的人才了。

           

          在“正在關注”下面會顯示作者所在團隊,因為好多項目其實一個人是很難完成的,大都是好幾個設計師協作的結果,所以如果你找到的這個設計師作品足夠牛逼,那說明他的團隊也是很不錯的,順便關注一波就好。

           

          當你習慣這樣摸瓜,一段時間后這個行業里幾乎的大咖就都在你的關注列表里了,做到這一步后你就會有一個新的收獲,這點我們后面再聊。


           


          七、搜索結果的整理與優化


          利用前面的搜索方式,我們已經找到了不少較為滿意的作品,接下來我們需要再對這些作品做簡單的篩選整理,把真正符合我們需求的作品整理出來。

           

          我習慣用網站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網站的情緒板我把它看作是一個各個終端通用的網盤。behance提供了兩個收藏作品的功能:點贊與保存到情緒版。站酷跟ui中國也有同樣的功能。

           

          點贊的作品,會統一收集到個人主頁“點贊”標簽下,所有作品按時間排列,比較亂,所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板,由于情緒板是可以分享和被搜索的,所以使用情緒板整理靈感,不僅方便了自己,也益于同行。目前來看,情緒板在behance這個產品中已經跟花瓣中的畫板非常像了,不僅可以采集一個完整的作品到情緒板,也可以采集作品中某個單獨的圖片或視頻到情緒板,這樣的靈活性跟花瓣完全一致,且behance將情緒板被放到了用戶非常容易觸達的位置,所以在大家的共同努力下,各類情緒板會越來越豐富,這個功能也會更有價值。



          八、資源的自我更新與迭代


          資源的自我更新

          經常玩抖音的小伙伴都知道,抖音會根據你的點贊、瀏覽等行為,為你推薦符合個人口味的視頻,而這樣的推薦功能在behance也有,behance會根據你點贊收藏的作品、你關注的人,給你推薦相應作品,并且推薦作品是直接顯示在首頁的,每次打開behance,你都會在網站最直觀的位置看到behance為你推薦的內容,這里的內容大體上分為兩類,一類是你關注的設計師的作品更新,另一部分基于已經關注的作者推薦相似的作品給你,就我個人使用體驗來講,推薦還是相當準確的。

           

          behance的推薦功能是資源自我更新的一個重要手段,你關注的同一領域作者越多,收藏的作品越多,它的推薦就越準確,這樣就節省了一些資源搜索的時間成本。要想獲得好的推薦結果,我建議你的behance上只關注一個領域的作者和作品,以我自己為例,我只關注數據可視化方向的作者和作品,雖然我也喜歡攝影、插畫等,但我主業是數據可視化,所以為了提高首頁推薦作品質量,其它兩類我會去500px等更垂直的網站瀏覽,而不會在behance上關注。當然,網站只是個工具,你也可以有自己的用法,與我而言,我關注的核心是效率。

           


          資源的迭代

          如果把我們收藏的內容比作是云盤里的資源,那么資源并不是越多越好,無論哪種類型的內容,當內容很多的時候找起來都會比較麻煩的。我們需要堅持做一些工作來不斷減少資源的數量提高資源的質量,少而精是最好的狀態,如此我們就不需要花很多時間去找某個內容,而已有的內容又都能很好的滿足需求。要做到這點,我們需要給資源做迭代,所謂迭代就是去掉舊的過時的內容,添加新的更好的。每隔一段時間,回來翻一翻自己之前收藏的作品,會發現有些作品自己已經看不上了,因為在做靈感收集的過程中,我們的審美會自然有所提高,當輸入的作品樣本越來越多,我們對作品評價的維度也會更多,之前那些覺得好的作品,現在看來也就會有缺陷和不滿,這是一個很正向的結果,成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品,添加更符合自己當前審美的作品到各個情緒版。

           

          迭代還意味著我們需要對那些情緒版的標簽做維護,對那些命名跟內容不大匹配的情緒板,要及時更新更恰當的命名。同時,也要對情緒板內容的類別做維護,比如動畫、視頻類素材最好不要跟圖片類素材放一起,因為列表的封面圖并不能體現作品詳情里是否包含視頻等內容,所以作品很多時找起來就比較麻煩,按內容的不同類型把內容分別收納進不同的情緒版可以給我們后續的應用節省不少時間。


           

           

          九、Q&A


          1、behance在國內訪問受限,為何要以它為例做靈感收集的方法介紹?

           

          首先,Behance國內訪問不暢,并不影響它是世界范圍最優秀的設計師聚集平臺的事實。對于數據可視化而言,并不是一個新興的領域,在國外早已有之,并且相對成熟,而國內相關作品、經驗尚少,所以從獲取知識的角度來看,behance上你能獲取到的數據可視化相關作品或內容,不管是數量還是質量上,都要比國內的好。

           

          其次,正如文章剛開始我說的那樣,文中介紹的方法對國內的大部分設計網站同樣適用,尤其是關鍵詞的定義、標簽的使用、收藏及情緒板(畫板)的使用技巧。綜上,我當然是要介紹“更好”的靈感獲取網站給大家,而不是揪著大家熟悉的聊。

           

          2、我自己也收集研究了不少優秀作品,為何做的時候還是不知道如何下手?


          毋庸置疑,優秀的作品建立在良好的審美基礎之上,好的作品看多了審美自然會有提升,但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個問題,一個是刻意練習的度沒到,另一個是不會分析別人好的作品??桃饩毩暵犆志椭朗鞘裁匆馑?,而作品分析就是我們要知道一個作品之所以讓人眼前一亮,它“亮”在什么地方,就是要具體到細節,我們越是能夠細致的指出那些讓你覺得好的點,就越能模仿和借鑒,之后再輔以大量的刻意練習,才會有效果明顯的提升。那么到底如何去拆解、分析一個數據可視化作品?有幾步?有哪些方面?怎么做?如何應用?這一系列問題留待下篇文章繼續聊。當然了,下篇文章能否順利發出,還是看大家是否喜歡和支持!

           轉自:站酷-BYMD 

          2020 B端設計的趨勢與挑戰

          ui設計分享達人

          前言:


          B端行業在近兩年來,由于其有穩定的變現來源,在互聯網下半場的行業當中,一直受到追捧,

          它的興起,也造就了B端設計師的需求火熱,而互聯網的新聞也證實了這一點:

           

          騰訊:騰訊云、智慧零售、企業微信等著重發力

           

          阿里:阿里云、釘釘、阿里媽媽等產品也處于B端前列

           

          今日頭條:飛書、people、等內部B端系統,著重向國外市場發力

           

          傳統的B端行業大佬在這一年也頻頻發力:有贊、金蝶、用友...都發布了不同的領域的產品

           

          而現在,對于B端設計師有哪些分類呢?同時對于一些想轉型成為B端設計師都有什么要求呢?

           

          我們先看看現在市場上對于B端設計師的需求:


           

          從招聘需求上可以看出,這類B端設計主要是針對一些B端后臺頁面進行體驗設計,更多會從交互層面上進行思考,這也是B端設計的一大類:我稱其為B端業務設計

           

          除了業務層設計之外,還活躍著另一類B端設計:數據設計師

           

           

          這類設計對數據的需求大,他們會對B端類的展示數據進行設計,因此我們將它稱為B端數據設計

           

          現在如果你是一個準備求職的設計師,相信你多多少少對于B端產品都會有所了解,因此我們來看看B端設計,目前是一個怎樣的發展~


          一、B端業務設計趨勢


          我們自身對其定義是牽涉到B端業務層設計,主要有管理頁面、B端移動終端、各種移動設備等。我就來聊聊我觀察到現在B端設計的行業現狀以及設計要求

           

          1.1多端設計需求巨大


          B端從來不乏多端設備的出現,因此對于設計師而言也會有所考驗

          它和傳統的app設計、網頁設計不同,在日常的場景當中,B端的設備往往不止于此

           

          比如在餐館經??吹降狞c餐系統,這些設備的出現,更加考驗的不僅僅是設計師對于視覺的設計能力,更加需要B端設計師對于整個產品業務的理解、切身體會使用者的效率,這也是B端設計師的門檻之一

           

          我們再仔細拆分,在一套點餐系統當中要考慮的因素:用戶操作的距離,是有只允許店主操作還是顧客也能自主選擇,使用者的年齡、使用者選擇所花費的時間、選擇的所需時間等待,都是需要設計師進行全盤考慮的。

          所設計的東西,不僅要好看,同時還要滿足多種用戶對于終端的需求

          因此B端產品的多端設計,是一個重要的考驗。


          1.2設計中臺


          設計中臺這個概念已經炒了有兩三年了,但對于一些大公司團隊而言,在一定程度上確實能夠給用戶帶來設計效率上的提升。但是對于一些中小團隊來說,就要考慮到的更多是組件化的思維,而并非大而全的設計中臺

          說到組件化設計,必須要提的就是原子設計

           

          原子設計是一種設計系統的思維方式,他可以幫助我們如何將產品的元素整合到整個系統當中



          原子設計就是將一些設計元素拆解成極小的設計單位,可以是一種字體、一個圖標、一個矩形,然后將原子組合成零件、制作成模塊、搭建成模版、最后形成頁面


          讓自身的組件能夠有所自定義,從而使用到組件能夠適應于工作的大多數場景,原子設計要分開仔細講,可能需要幾篇文章,因此就不展開,大家感興趣之后會寫文章講到

           

          對于組件化,每個公司對其需求各不相同,但如果是一款WEB端的產品,那對于組件的需求將會十分巨大。因為不使用組件,面對關系復雜、頁面層級繁多、交互狀態多樣的情況下,你很難做到每一個頁面都能夠統一,因此小到組件化,大到設計中臺,是B端設計師必備技能

           

          1.3行業更加細分


          B端設計,行業細節也會更加明顯

          比如之前做過IM系統的設計師,面對聊天,通訊錄、組織架構等一系列模塊已經爛熟于心,但是在嘗試CRM系統中,一套新的業務邏輯,考驗的將是設計師對于業務快速理解的能力。

           

          比如在醫美系統當中,重點頁面你需要把握在檔案模塊以及客戶詳情,因為,每一個客戶對于醫美師來說,都需要一系列的建檔操作,必須關注細節,很多B端設計的細節,往往決定著使用效率,要給出用戶很多使用的路徑,才能讓讓軟件做到好用


          二、數據設計的趨勢


          由于B端設計的興起,產業互聯網的轉型,而作為產業互聯網轉型的展示性成果,一塊數據可視化大屏自然缺少不了。而B端行業各種實業種類繁多,雖然現如今有很多可視化大廠,總結了許多不同行業的模版,但模版終究是模版,要真正解決問題,不得已的去定制一些自己的數據可視化大屏。

           

          例如:雙11大家看到的數據可視化,便是由阿里數據可視化團隊定制而成的大屏


          通過百度/谷歌關鍵詞查看,大家也能窺探一二,近幾年對于數據可視化熱度依舊不減,行業也逐漸成熟

           


                       

          從數據上也能夠看到,對于數據可視化的熱度也在持續增長,也進一步說明數據可視化未來是被人看好的。而我就來給大家說說數據可視化只為有哪些,需要具備什么能力呢?


           

          2.1 數據設計師

          這類職業對于設計師而言要求自身對數據有著很強的敏感性

          而數據設計師不單單只是對現有數據進行簡單的繪制,要能夠理解數據其背后的含義,在什么時候,運用什么數據圖形,使用什么圖形對于業務的表達更為合理,同時也要對數據進行一定的整理與清洗工作,要從數據中提取出顧客想要的數據

          比如國外最出名的便是拿破侖行軍圖,便是一張經典的數據可視化



          現在數據設計師更多是UX設計轉型成為,因為他們能夠兼顧藝術表達和數據創作兩種不同的思路,更能夠滿足這類職業的訴求

          國內對于數據設計師更多的落地是運用在制作一些數據大屏設計模版,比如公司在之前的數據設計當中,已經有一些產出和可以復用的組件,需要有數據設計師對這些組建根據業務的不同,進行不同的組合。

          這里呢,給大家推薦基本數據可視化比較好的書籍:

          《數據之美》

           

          2.2數據可視化設計


          這類設計師更偏向視覺設計,通常是企業定制的設計需求,有很多ToG、ToB項目都是需要為企業定制需求,很多視覺設計師開始轉型從事這個行業。對于這類設計師而言,經常處理的是如何讓畫面看起來更加炫酷,比如如何增加一些偽3D的效果,有一些動態光暈的實現效果

          因此,你需要熟悉一些視覺基礎軟件:PS、AI、Sketch、AE,同時對于企業來說,他們想要一些動態的東西,比如簡單的動態背景,等等。而這類數據可視化的載體通常為網頁居多,也造就了很多動態效果通過CSS進行實現,因此想做到這類需要有較好視覺功底,能夠處理數據展示層面的各種問題

           

          2.3 3D可視化盛行


          這個在我之前文章其實有所講解,對行業現階段而言,各大公司從事的人也是越來越多。他們對于自身的要求會更明確,首先3D數據可視化相對于其他兩個門檻要更高。她要求設計師能夠獨立產出3D視覺效果,比如一些樓宇項目,需要有對樓宇的整個剖析,或者是智慧城市項目中,能夠先通過設計師C4D+AE實現出很好的效果,然后再對這些效果進行游戲引擎的還原,從而實現可視化的落地。因此你需要對C4D、AE兩款軟件比較熟練的同時,對數據展示也有自身的心得體會

           

           

          3D數據可視化知名產品:

          http://launchit.shanemielke.com/

           


          我總結國內外很多大廠制作可視化的利器,分享給大家:

          阿里云:DataV

          騰訊云:騰訊云圖

          京東云:數據大屏

          百度云:數據可視化sugar

           

          數據可視化展示相關:

          GrowingIO:專注數據埋點 可以參考設計形式

          神策數據:也是數據埋點 可以參考設計形式

           

          數據神器:

          Tableau:功能最全的數據神器

          轉自:站酷-

          設計思維 - 激活空間

          ui設計分享達人

          42個設計思維中的一個知識點~


          設計思維 - 激活空間





          1.激活空間 - 概念


          激活空間的意義在于元素與空間的搭配,能讓頁面產生靈動性和活力;另外激活空間還有一個影響比較難理解;?當主元素占用版面的主導位置,其他空間過大就會造成觀眾視線的停頓與停滯;?這樣就會導致主體與次客體不會產生一定的關聯性;?這時就需要“激活空間”來使兩個元素有一定的聯結;

          undefined



          2.空間的概念


          在我們理解“激活空間”的概念之前,先來理解一下“空間”的概念。因為平面是一個二維的空間,是二維零曲率廣延的一種面,因此我們在定義空間時不需要考慮三維的“第個三維度(一個方向的向量)”帶來的影響,我們只要定義空間中的最小單位與空間的相對關系,和定義空間的邊際就可以了。如下圖所示,平面二維空間中x軸與y軸無限大,那空間也會隨之變大。而三維空間中z軸的不斷擴大,空間就會隨之變大。


          只有在有邊際的空間中置入一個要素,即使這個要素是最小要素,空間也能被界定。例如一個正方塊(一個要素),被放置到一個參照的方框中,這時小的空間就會被界定。如下圖所示,二維平面和三維中坐標軸的范圍就是界定后的空間,而坐標軸中具體的一個單位就相當于平面中的單一要素。當把要素放入一個有邊際的空間中,這個空間就會被界定。


          到這里我們只需要了解當我們定義空間中最小的單位,空間也就被界定下來了,理解這個概念就行了。這里的空間中最小的單位指的就是“元素”,而元素被設置好后空間就被界定了下來,這里元素的位置影響著空間,元素激活了部分空間,即激活空間。這了不理解也沒有關系,我用簡單的圖來進行繪制,大家就能理解激活空間的概念了。



          3.激活空間 - 理解部分


          當我們在一個空間中置入一個元素(一個圓),這時我們就會發現這個元素占了一整個空間。這里如果不好理解就用生活中的例子舉例,例如大家都站在自己家的臥室里,并且站在中心點也就是正中間,那這時候給人的感覺就是你占用的一整個臥室的感覺,也就是說整個臥室的空間就被你(視覺元素等于一個圓)所占據了。


          接下來大家仔細看啊,如果當我移動一個元素(一個圓)的位置,大家感覺一下平面會有什么樣的變化。是不是感覺上面有元素,但下面的空間有些空啊。這是因為只元素只激活了上面的空間,而下面就成了空白的空間。

          undefined


          接下來我再把平面中的這個元素,向左移動一些位置,大家注意看會有什么樣的變化。是不是會發現,左面這一小塊的空間被激活了,而右面和下面的一大塊是空白的空間。


          這時當我再分裂出一個相同的元素,并把這個元素向右移動,這時我們觀察后會發現,上面一整塊的空間都被激活了,而下面的一整塊還是空白空間。并且兩個元素之間產生了一定的關聯性,它們看上去更像一個整體了。

          undefined


          接下來我再分裂出一個元素,并且把它的位置移動到最下方,這時我們觀察就會發現下面的空間被這個元素激活了,但是中級的部分還是處于空白的,也就是空白空間。如下圖這個狀態呢,我其實可以延伸出另一個設計思維,那就是“把留白當做一種視覺元素”,但今天就不講這么多了。這時我們再觀察,三個元素所占的位置,是不是剛好能填滿一個版面啊,那也就是說他們三個整合到一起,又占據了整個平面。



          4.激活空間 - 實際案例1


          如果講到這理論講的就差不多了,像細節部分大家通過類似的想法腦補一下就行了,接下來我們講一下激活空間的設計思維如何應用到我們的實際設計當中。我們先來看一個設計作品,如下圖所示,大家通過自己的思考,想一下這個作品哪里有問題?


          這個作品的問題在于,藍色標出的部分的視覺重量明顯要比紅色部分大,而且紅色部分之間空白空間占的面積太大了,這樣兩個紅色元素之間就缺少了一定的關聯性,整體也會顯得十分不協調,那要如何解決這個問題呢?


          當我們把紅色區域之間的空白空間,用其他元素把它激活,把這里的空間激活,那上下之間就能產生一定的關聯。并且用一個有顏色的元素,這里的左右的視覺重量也達到了一定的平衡。



          5.激活空間 - 實際案例2


          再講一個案例,咱們看一下第二個案例,我們直接看作品看看它都有啥問題?直接這么一瞅是不是標題的位置不太合適,似乎位置太高了,而下面的冰山看上去很不舒服,不知道哪里有問題,有沒有這種感覺?


          這個作品的問題在于冰山這塊的視覺重量偏左,而且冰山的物理重量并不重,再加上企鵝在上面就會造成物理重量上的不平衡,從自然角度來看也不是很和諧;另外標題與冰山之間的留白太大了,這樣就造成了視覺停滯,沒有元素可看了,也沒有辦法引導視線了,也會造成觀眾對作品整體的影響與理解上的差異。


          我們要怎么解決這個問題呢,冰山的物理重量不平衡,我們給右側畫一個企鵝,讓它把右面的區域的空間激活,那整體的物理重量相對就平衡了;另外標題與下面元素的距離,可以通過設置新元素-太陽的方式,來使上下之間具有關聯性。



          6.激活空間 - 實際案例3


          再講一個案例,咱們看一下第三個案例。我們直接看作品看看它都有啥問題?看這個作品總感覺太碎片化了,整體性差沒有統一感,而且也不規整并很混沌,元素之間的關聯性也不強,有沒有這種感覺?


          這個作品最主要的原因就是留白產生的負形會對作品產生缺乏整體性的影響。因為這些空間看上去是開放的,沒有約束的,零散的且沒有統一感的,這時我們需要通過增加元素,利用激活空間的方法來布置它們,這樣這些元素就具有了統一性,整體性也就會更強。

          這樣的整體感就強了一些有沒有~

          轉自:站酷-羅耀_UI

          耍好控件 | 拿什么拯救你?我的導航欄

          ui設計分享達人

          講一個老東家的故事。


          一次產品迭代會上,老板在臺上講到打算重構C端產品框架,想重整標簽欄的標簽設定??稍谥v到這一部分的時候卡殼了,遲遲說不出“標簽欄”這個控件名,氣氛有那么一丁點尷尬。這時在座的一名產品經理慷慨解囊地說道:底部導航欄!會議得以繼續。


          嗯,不全錯,這么說也算能理解??丶诮缑娴撞?,能引導用戶切換頁面。但如果標簽欄把導航欄的名字占了...那原本的導航欄應該叫什么呢?頂部標題欄?那導航欄里的內容控件又應該叫什么?左上角或者右上角的按鈕?


          接地氣的名稱讓我們一聽就懂,直到有一天你打算跳槽,你拿著自己的作品到下家面試,設計總監幾個術語啪啪把你問的不知所云。這些“死控件”、“死欄目”在頁面上不可或缺,在設計每一個頁面時你以為你對它們早已了如指掌,偏偏在關鍵時刻,它們卻六親不認了。(說多了都是淚,我曾經面試也吃過專業名詞的虧,以后有機會再娓娓道來。)


          “我又不走形式主義,為什么一定要說專用名詞裝x呢?接地氣的名稱不是挺好嗎,溝通。”——很簡單的道理,如果名詞和概念都混淆不清,有沒有花功夫在UI設計領域進行深度專研也就一目了然了,還何以談論如何將它們運用自如呢?——“你連迪麗熱媽和古力娜扎都沒分清,你敢說你知道什么是真皮沙發?”


          于是我的經歷,讓我產生了一個想法。是時候做一些知識內容沉淀與分享了,不能讓更多的人走我踩過的坑。第一期我們便來講一講導航欄。


          -


          01.導航欄究竟在哪里


          導航欄 Navigation Bar,也簡稱為Navbar。一定會有不少剛入門的UI新人,在諸多的Bar控件中,難以區分它所指代的區域。


          在iOS上,導航欄是指顯示在應用程序頂部,位于狀態欄下方的容器區域,層級應高于當前頁面內容。


          在安卓上,Google公司在Material Design中也賦予了它同樣的定義,但是卻給了它另一個名稱,頂部應用欄( Top App Bar)。


          iOS與安卓的規范與命名區別


          請務必要記?。簩Ш綑谑怯糜跇嫾?strong style="outline:0px;margin:0px;padding:0px;">當前屏幕的內容,闡述當前屏幕的狀態,并且起到連接父子級頁面層次結構的作用?!曰氐介_頭的小故事,為什么標簽欄不能叫做底部導航,因為標簽欄是構架了多個屏幕之間平級頁面的內容切換。和“導航”的定義沒有半毛錢關系。


          _


          02.規范里告訴我們該怎么做 vs 實際項目我們該怎么做


          一個基本的導航欄容器一般承載的信息可能會有:標題;導航按鈕;內容控件按鈕其他控件(比如搜索欄、分頁標簽或分頁控件等);千萬別忘了還有分割線。


          2.1 導航欄標題


          時間倒退回2017年以前,這時候的移動端規范下的導航欄還是循規蹈矩的,樣式單一。但隨著iPhone X等一系列全面屏手機相繼問世后,移動設備在屏幕高度上有了進一步的擴展,界面設計在一屏內的發揮空間也隨之增加。iOS11發布后,大標題導航欄設計風格興起,隨后被引入平臺規范。


          于是現在iOS與Material Design在導航欄上也都定義了兩種導航欄標題規范:常規標題大標題。


          常規標題是指在高度為88px(iOS@2x下)的導航容器中,居中放置一個當前頁面的標題。標題字號一般為34px-38px(34px為iOS標準規范,但實際項目中可以在盡量在不小于34px標準的情況下根據設計需求確定)。


          常規導航不同標題字號的案例及視覺效果


          大標題是將導航欄欄高增加到192px(iOS@2x),保留高度為88px的導航容器來承載內容控件按鈕,將標題下墜居左。iOS的標準規范定義大標題的字號為68px。但由于英文有大小寫區分,在視覺上有一定的層次表現,而中文因為缺少一定的層次結構,并且相同字號的中文視覺大小大于英文,所以大多數時候我們在進行大標題設計時,會適當縮小,一般為56px-64px居多。


          大標題不同標題字號的案例及視覺效果


          大標題導航欄的優點毋庸置疑,頁面留白更多,呼吸感更強,大氣現代、逼格更高,因為頁面標題巨大,能夠幫助用戶快速確認當前所處位置;采用統一的大標題,讓頁面布局風格快速統一。但缺點也顯而易見,因為增加了導航欄的高度,導致屏幕利用率降低,一些通過廣告變現或更加注重一屏內內容呈現的應用便中和了常規導航與大標題導航的優缺點,進行了風格改進。


          改進的大標題案例


          那我們如何在常規標題和大標題之間抉擇呢,這可不單單是設計風格的問題,還受產品定位與功能的影響。蘋果的設計師在Apple Music中實驗并驗證了一條結論——在內容非常豐富、層級結構較深的產品當中,大標題能夠幫用戶快速確認自己的位置。


          所以我理解的適合使用大標題風格的產品一定是:突出內容呈現而不是功能繁瑣的;產品定位更偏向于現代或文藝藝術的;需要快速統一界面風格的。而層級結構需不需要很深,這并不一定,我反而覺得功能越單一、產品體量級越輕的應用,越適合大標題。


          所以如此看來,國內使用大標題成功的案例就為數不多了,這可能與中文字體還有國內app產品功能都比較繁瑣的原因有關,真正做到了使用大標題快速幫助用戶確認自己位置,并且結合了產品特性與風格的,我認為人人都是產品經理的移動端在這方面做的非常棒。


           2.2 導航按鈕及內容控件按鈕


          iOS規定導航按鈕位置僅能用于放置返回按鈕,可以添加一個層級的面包屑,幫助用戶有效地明確當前頁面層級;Material Design中,則不僅可以放置返回按鈕,還另有作用,菜單圖標-用于打開導航抽屜 或者 關閉圖標-關閉工具欄。


          iOS與安卓的導航按鈕區域區別


          這一點與iOS的定義有著天壤之別,iOS非常明確地賦予了工具欄的定義,并且將導航欄和工具欄(Toolbars)徹底地分離開,典型案例就是Safari。


          iOS明確地將導航欄與工具欄分離開


          在內容控件上iOS與Material Design也大相徑庭,Material Design不去限制你的內容控件多少,因為它提供了溢出菜單,并可以根據屏寬的變化,自適應釋出和收納溢出菜單中的控件。



          而iOS則規定我們,要給內容控件按鈕足夠多的空間,必要的時候,隱藏導航欄標題也未嘗不可。



          那么真實的項目中,我們經常為了快速落地,會存在一稿適配雙平臺的情況。這時候我們應該遵從哪一個平臺的規范呢?答案是:許多大廠的做法已經向我們驗證,規范不分家。


          在iOS諸多的應用中溢出菜單早已普及,盡管這是Material Design提出的設計理念。



          Material Design的溢出菜單也被運用在iOS端


          雖然國內遵從Material Design進行Android應用設計的情況相對較少,但它提供的設計理念與方案卻并不局限在安卓平臺。


           2.3 分割線


          分割線只是一種體現形式,我想要表達的是,別忘記區分導航欄與內容界面的視覺層級關系。Matetial Design提醒我們,頂部應用欄可以與內容位于同一高度,但滾動時,請增加導航欄的視覺高度,讓內容在其后方滾動。而iOS則默認采用了背景模糊的方式區分了導航欄與內容區域的層級關系。


          區分導航欄與內容區域的層級關系


          缺少視覺分割會讓用戶分不清導航欄與內容界面,它們看起來會更像一個平級。對用戶視覺區分內容主次其實是極不友好的。


           2.4 其他控件


          關于其他控件,iOS只在規范中提及到了分頁控件。蘋果設計師考慮到部分場景在當前頁面中還存在信息層級結構劃分,此時建議可以在導航欄中使用分段控件。


          但國內的應用程序早已將導航欄容器的作用發揮到,基于導航欄層級始終高于內容區域的特性,我們通??梢詫⒎侄慰丶?、分頁標簽、搜索欄等等用戶可能隨時使用的工具放在導航欄中。


          導航欄通常會承載的其他控件


          -


          03.總結


          導航欄是幾乎每一個界面都必定存在的控件,正因為無法輕易刪減,逃不掉就必須用好它,不然很容易淪為頁面的減分項。


          設計好導航欄不僅僅是視覺上的工作,表現的方式、承載的按鈕與組件、滾屏時的組合操作還能給用戶帶來極大的體驗增益。

          轉自:站酷-UCD耍家 

          好圖片,設計過稿率提升50%

          ui設計分享達人

          如今我們的生活,到處都是大幅圖像廣告,紛擾喧鬧的各類短視頻與直播。這是一個快節奏時代,我們更傾向閱讀圖像。為什么我們偏愛圖像視覺超過文字?從人類進化角度來看,原始時代的祖先通過五感感知著這個世界,其中通過視覺來感知判斷生活,其他四感輔助之。即使后面我們發明了文字,但發展至今,對圖像的本能吸引力依舊強烈。因為在我們認知的潛意識里圖像相較于文字更能讓我們快速輕松理解并記憶。


          圖像如此重要,設計作品中當然也必不可少。因為圖片,它能一定程度上決定畫面基調;引導視覺流程;調劑平衡多段文字信息的枯燥性,讓閱讀變得輕松容易。 


          在UI設計中,我們經常需要把設計輸出物拿給產品經理或者其他有設計決斷力的人看,UI設計中圖片使用的好與壞,能很大程度上影響著決策者的感知,以及你的設計過稿率。


          如下左圖:商品視角、調性、細節,都沒有右圖來的統一、有質感。單看這兩張圖,會讓用戶有這樣的心理感知:左圖感覺像山寨盜版商城;右圖則會認為是嚴肅官方認證商城。所以,在同樣頁面布局下,不同的圖片使用與處理,能讓UI頁面的品質有較大的感知差異。 

          圖片的使用如此重要。那么,我們在正式做UI設計前,首先需要弄清楚圖片在頁面的占比情況以及后續圖片的支撐來源問題。



          1.了解圖片占比與來源


          在構思UI頁面階段,首先需要了解以下兩個問題:1.圖片區域占比問題;2.圖片來源問題。當頁面圖片占比多,且讓用戶自定義,那么需要預估到APP上線后設計可控率會降低。換句話說,實際上線效果會不盡人意。如下圖:由于淘寶和網易嚴選平臺屬性不同,在圖片品控上就有著不同的視覺感受。當然,不是說淘寶做的不好,而是當一個平臺集納不同的店鋪,不同調性的產品類型,即使有圖片規范,也難如統一品類、調性的產品來的統一。 

          弄清圖片內容的可控性問題后,開始進入設計環節,那么我們該如何選擇圖片?



          2.怎樣選擇以及運用圖片


          1.是否符合產品氣質?

          在不同的場合有恰當合適的場景搭配,是十分基礎且重要的事情。在UI設計中,任何一個部分的設計以及元素運用都需要為產品服務。圖片也不例外。如果你是廚房類APP,頭圖選用小清新感的圖片,就顯得不夠合適,帶有環境食材元素的圖片才更讓用戶有共鳴。 


          2.是否能清晰表達產品核心內容?

          圖片是否主體明確?能一眼正確無誤的傳達核心內容?會不會因為其他元素元素搶了主體視覺,找不到視覺重點? 


          3.是否美觀、有品質、讓人想擁有?

          圖片是否能表達美好生活以及美好品質的向往?光影關系是否自然?圖片是否高清有細節? 

          當明白圖片如何選擇后,還想和你分享一些冷門且重要的圖片過稿小技巧。記下來,將大大提升你的設計過稿率。



          3.過稿高手圖片使用小技巧


          1.圖片風格統一風格調性

          漂亮圖片有很多,如果我們都以漂亮為基準,找出來的圖片也會形色各異。由于用戶的實際使用場景是:瀏覽一個完整APP,統一風格調性比美更重要。如果商品角度不一樣;飽和度高低不同;抽象與具象等,都會形成產品不統一,用戶視覺不適應等問題。 

          2.圖片使用符合場景,讓決策者可以看到最后的顯示效果

          有時我們為了趕時間,直接用圖片填充插件,讓圖片區域自動填充。但我還是想要給到你這樣一個建議:一個專業且成熟的設計師,即使是設計初稿,也不能隨便拿張圖,湊合一下。任何時候的匯報,都需要有著處女座對于事物的完美要求,過自己這關。因為任何時候你的表達與表現,都形成了你在別人心目中專不專業的看法,從而影響著后續的設計話語權問題。如下圖都是商城陳列頁面,右側的圖片給出上線的實際效果,更貼合產品,方便設計決策者給出建議方向,或做出決策。 


          總結


          我們都是視覺動物,不管你是否愿意承認:我們常常通過視覺表象,才決定是否愿意去更深入的了解某個東西。

          設計就是在做產品視覺表象的表達,我們需要盡可能使用貼切的,漂亮的圖片。讓UI視覺看起來更加美觀,讓用戶愿意停留,認可以及信賴平臺。 

          轉自:站酷-丘丘的設計筆記 

          日歷

          鏈接

          個人資料

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

          存檔

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