<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設計趨勢,我不允許你還不知道!

          ui設計分享達人

          正文


          如果移動應用程序不符合最新的設計趨勢,那用戶可能會放棄你設計的產品。 

          考慮到趨勢永遠不會保持不變,而且總會有新的趨勢出現,讓應用看起來既現代又漂亮是一項挑戰,但遵循設計趨勢對于每個產品設計師來說都是必須的。 

          我們了解到,跟蹤行業中的所有趨勢和趨勢并不總是可能的??偸怯行碌闹改稀赢媰热?、視頻、新的插圖方法以及許多其他概念,您需要先抽出時間學習和測試。 


          這是我們總結出的 2022 年移動應用 UI 設計趨勢

          1、運動和動畫 
          2、手勢和滑動體驗 
          3、90年代風格 
          4、圖形深度 
          5、黑暗模式 
          6、排版 
          7、增強現實和虛擬現實 
          8、漸變和透明元素 
          9、舒適的視覺效果 



          1、動效和動畫

          我們都喜歡看視頻,并在 TikTok 或 YouTube 上花費大量時間。視頻內容和動畫更具吸引力和互動性。統計數據顯示,大多數人在使用應用程序之前都會觀看說明視頻。動畫和動作設計使內容更具吸引力。 

          與具有長描述的靜態內容不同,動畫可以保留用戶的注意力并使應用程序更具吸引力。用動畫突出重要的東西是一個好主意。例如,您可以為應用程序中的按鈕設置動畫,以使用戶與應用程序的交互更好、更直接。像圖標動畫這樣的微動可以顯著改變您的應用程序的體驗。 

          借助動畫,您可以強調應用功能、提高轉化率甚至銷售數據。 




          2、手勢和滑動體驗

          與電腦上的網頁端相反,手勢和滑動體驗使移動設備更具吸引力。我們每天花費數小時滾動和滑動操作。按鈕和其他動作可能會刺激和分散注意力。這種設計趨勢成為現代應用程序設計的最高優先事項之一。一些應用程序創建者甚至根本不支持按鈕的使用。按鈕會造成混亂并占用過多的屏幕空間。 

          建議用滑動功能替換按鈕。嘗試滑動動作的動畫會很有幫助。例如,圖書應用程序通常使用動畫來翻頁。 




          3、90年代懷舊風格

          90 年代的風格影響了所有領域,甚至是移動應用程序的設計。 

          設計師使用類似于 90 年代流行的 PlayStation 游戲(例如,馬里奧或吃豆人)的復古字體、圖像、圖形。擁有 90 年代的氛圍,您有機會獲得兩代人的興趣:年輕人喜歡復古的東西,而老年人則喜歡懷舊。 

          這種趨勢并不適合所有產品,但如果復古風格適合您的應用程序,嘗試一下也不錯。 



          4、賦予圖形深度

          扁平化設計看多了用戶會覺得很沉悶。人們喜歡看到更真實和互動的內容。圖形中的陰影和圖層賦予它們 3D 效果、體積和深度,使人們可以享受更逼真的圖像。 

          這種趨勢可以與任何元素一起使用,在屏幕上創建對象層次結構并幫助用戶更輕松地瀏覽應用程序。 

          然后,關于3D效果,我們來聊聊。3D 是一項革命性的技術。3D 圖形幾乎可以在任何應用程序中使用。例如,開發人員可以使用 3D 成像技術來構建存儲建筑物和房間內部地圖的應用程序。它可以非常適用于游戲并改變玩家的整體體驗。因此,在您的應用程序中為圖形添加深度時,請考慮 3D 趨勢。 




          5、黑暗模式

          暗模式是已在許多應用程序中高度使用的最大設計趨勢之一。最近,設計師也提供了在應用程序中在標準模式和暗模式之間切換的機會。所以用戶可以選擇他們最喜歡的任何模式。 

          深色主題設計將背景變為深色模式,并使字體和其他元素變為淺色/白色。 

          例如,現在在 Facebook 等最受歡迎的應用程序中都可以使用深色模式。切換到深色模式有助于人們減輕眼睛疲勞并更方便地瀏覽。 




          6、排版

          選擇正確的字體是移動應用程序設計中必不可少的一步。用戶在瀏覽頁面的時候不是一個字一個字的讀的,而是成行的“掃描”方式來瀏覽。因此,使用能夠正確設置重點的字體非常重要。 

          設計師已經開始使用不尋常的字體。文字不再看起來那么無聊,也不會迷失在背景中。其目的是使設計更明亮、更新穎。 

          正確選擇的字體將有助于:
          1、定下產品調性; 
          2、提高品牌知名度; 
          3、提供更好的視覺體驗; 
          4、提高可讀性。 

          通過組織排版為您的用戶提供愉悅且可讀的用戶體驗:設置點大小、行距和層次結構。 

          請記住,不尋常的“瘋狂”排版并不適合所有產品。定義文本在您的應用程序中的具體功能。如果它提供了額外的信息功能,請不要對字體進行太多實驗。但是,例如,在在線雜志中,您可以使用各種版式,使布局更有趣。 



          7、增強現實和虛擬現實

          虛擬現實和增強現實為用戶提供了一個難得的機會,讓您只需通過手機即可獲得互動體驗。 

          在新一年中,這種神奇的 UI 移動設計趨勢趨于增長和傳播。這種設計趨勢的關鍵在于應用程序的界面讓您感覺自己置身于應用程序中。引人入勝的設計元素和游戲化是這種體驗的關鍵。 

          這是一個結合我們之前討論過的趨勢的絕佳機會,例如動畫和 3D 效果。首先,精心制作的動畫和 3D 觸摸可以在您的應用設計中支持 VR。 

          你還記得那些來自 Instagram 的功能嗎?讓我們可以通過應用程序和移動相機將不同的角色放置在我們想要的任何地方嗎?然后你就知道這有多有趣了。此外,它不僅有趣而且高效。例如,宜家使用 AR 來展示一件家具在您家中不同位置的外觀。 




          8、漸變和透明元素

          這個UI設計趨勢是關于漸變和透明度的。設計師通常在按鈕和應用程序的背景上使用漸變。移動漸變趨勢突出了應用程序的基本部分,并使人們專注于特定方面,從而賦予他們層次感。 

          移動應用程序設計中的透明元素表達了對某些應用程序部分的深度和驅動力,使設計更清晰、更具吸引力。 

          您可以使用從淺色到深色主題的過渡,從而將屏幕分成兩個邏輯部分。此外,您可以在按鈕上使用漸變主題,使它們在屏幕上彈出。 

          玻璃擬態的概念也值得一提。glassmorphism 背后的想法是柔化明暗設計元素之間的對比。設計理念使用類似于磨砂玻璃表面的透明模糊背景。 

          玻璃態的主要特點:
          1、透明度和背景模糊; 
          2、透明物體上的細光邊框; 
          3、分層; 
          4、鮮艷的色彩。 




          9、舒適的視覺效果

          舒適的視覺效果是大部分用戶都喜歡的。用戶和應用程序開發人員都喜歡這種最近的移動應用程序設計趨勢。 

          移動應用程序設計不應該只是美觀。它應該讓我們的眼睛看起來更舒適。因為一整天,我們可能都會盯著屏幕看,但看多了,我們會感到疲勞和眼睛疲勞。為了減少這種不利影響,應用程序開發人員創建了一種我們可以舒適使用的設計。 

          舒適視覺設計趨勢的概念是為您的應用程序使用自然的色彩、舒緩的圖像和簡單的布局。這些技巧通??梢栽谮は霊贸绦蛑姓业?。它們包括自然的真實照片,具有平靜的色彩和結構簡單的輕元素,很少有深色主題設計。 




          如果讓你的UI設計更好呢?

          這里有一些建議: 

          1. 多看別人的優秀設計
          分析它們的優缺點,從他們的經驗中學習。 

          2. 使用標準導航
          不要使用異型的導航欄,這會讓你的用戶迷失在應用中。 

          3. 使用優質的配圖
          抽象藝術、插圖、真實照片趨勢——一切都有助于吸引用戶的注意力。 

          4. 多看前瞻設計趨勢
          實時更新自己的設計知識庫,使設計水平使用保持一流。 

          5. 擅于總結與回顧
          可以計劃,三個月或半年總結回顧之前設計,總結不足之處。 

          6. 多于他人分享
          做設計不要怕被人看,或許有時候別人順口一說,就點開了難題。 

          7. 保持良好的心情
          遇到事不要慌,掌握好自己心情,才能掌握好你的設計。
          文章來源:站酷   作者:UI范
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          淺談B端設計系統

          ui設計分享達人

          什么是設計系統?



          設計系統 = 設計價值觀和原則+設計規范+場景定義+工具包

          是在設計價值觀和原則、設計標準指導下的各種共享的設計模式和組件資產,,是將產品設計團隊聯合在一起共同打造的一套質量和效率上都有所保障的可行性解決方案,能夠解決產品視覺、交互體驗一致性的問題、幫助傳達統一的品牌認知。幫助團隊快速完成產品迭代和功能開發! 

          為什么要構建設計系統?


          問題1:

          隨著業務的拓展,產品和項目數量不斷增加,發展中期設計和交互上不一致性的問題浮出水面,需要采取措施確保產品或產品線之間保持統一的品牌傳達、外觀和體驗,以滿足用戶預期并向其傳達統一的品牌認知。

          問題2:

          無統一的設計規范和交互原則,沒有統一的UI組件庫和代碼庫,各團隊設計和前端需花費大量資源陷于低質量溝通協作和重復造輪子,拖慢產品和項目設計和開發節奏。

          問題3:

          產品項目數量 vs 產品設計師,人員配比嚴重不足的情況下,團隊的設計師們無法從雜/亂/急的日常需求中剝離出來,影響構建產品壁壘的質量和速度。

          設計系統的價值


          產品側:

          保證可復用模塊的交互體驗的一致性。如同一個產品類型不同分支多個團隊完成的時候,可以保證產品團隊使用同一份設計規范快速完成產品原型設計。 

          設計側:

          把設計師逐漸從不必要、重復性勞動中解放出來,節約出來的時間和精力放到更多有價值的工作上去。更多去關注對用戶需求和業務邏輯的深入挖掘,如果每個設計師都具備產品用研、交互、組件化等一條龍能力,才能體現tob產品設計師的價值,才不會被別人稱作是拖拽組件的“工具人”。 

          開發側:

          形成開發資產,可以提升研發效率,降低維護成本。開發工程師無需再重復開發同一個組件,只需要去組件庫里調用即可,配合業務邏輯,高效完成界面開發。做到開箱即用。 

          測試側:

          標準化的設計規范,是測試人員最喜歡看到的。1是1,2是2的設計準則,提升了測試效率。例如,設計規范規定彈窗footer區按鈕組居右,那么測試人員只要測到不居右,就可以給產品提優化建議了。 

          主流設計系統-他山之石可以攻玉!


          無需猶豫,直接基于現有的優秀的開源設計系統,

          設計系統的打造不必從0-1構建, 例如:Ant Design業界優秀的開源設計系統,我們完全可以站在前人的肩膀,最終生產出符合達觀品牌、業務特性的設計系統。


          阿里Ant design:https://ant.design/docs/spec/introduce-cn 
          阿里的teambition:https://design.teambition.com/ 
          華為devui:https://devui.design/design-cn/design-value 
          餓了么elemnt:https://element.eleme.io/#/zh-CN 
          有贊:https://design.youzan.com/index.html 

          字節跳動 Semi Design:https://semi.design/zh-CN/

          字節跳動 Arco Design :https://arco.design/

          Material Design:https://material.io/ 
          Lightning Design System:https://www.lightningdesignsystem.com/ 
          Microsoft fluent :https://www.microsoft.com/design/fluent/#/ 
          eva.design:https://eva.design/ 
          Atlassian design:https://atlassian.design/ 

          以原子理論構建設計系統


          原子理論設計介紹

          首先原子設計理論并不是什么高大上的規則。最早是由國外前端開發工程師 Brad Frost提出的,他從化學元素周期表中得到啟發,發現在化學世界中,所有的物體都是由原子構成,原子組合構成分子,分子組合構成有機物,最終形成了宇宙萬物。根據他的理論,設計體系主要包含 5 個層面:原子、分子、組織、模板、頁面。


          原子理論設計不是一個線性的過程, 它更像是一個心理模型,來幫助我們把用戶界面看作是一個連貫的整體,同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面,讓我們更深入的了解每一個概念哦~


          原子層(Atoms):

          原子是物質的基礎組成部分,是構成設計系統的最基礎元素。

          在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。

          簡單概述下來就五個字:色、形、質、構、質;



          分子(Molecules)層

          在界面中,分子就像是一個由UI元素組成的相對簡單的組織。如:按鈕、彈窗、搜索框等。

          以按鈕為例,它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關聯原則組合成一個分子,圖標和文字互相配合傳達意義,顏色定義了按鈕的特性,間距為按鈕定義了一個尺寸和規范。


           組織(Organisms)層

          分子+原子組合成更復雜和可擴展性的模塊,這個稱之為組織(區塊組件),如:列表操作區塊、列表展示區塊、表單區塊、數據統計卡片區塊。

          以表單為例,一個表單我們可以通過數量的組合,以及間距的調整,元素的增減,在界面中表達不同的場景和含義。



          模板(Templates)層

          由原子+分子+組織構成的更復雜更具拓展性的模塊,如:分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。本質就是線框圖,模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。專注于頁面的底層的內容結構,頁面中的信息是占位作用,而不是頁面的最終內容。


          頁面(Pages)層

          帶業務邏輯的場景案例如:標注詳情場景、抽取詳情場景、權限管理場景。頁面將真實內容應用于模板;

          頁面是模板的具體實例,填充了真實的內容(圖片、文字等)后形成頁面,也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖,將占位符替換為有代表性的真實內容,使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的設計方案。



          關于設計系統的常見認知誤區



          誤區1:設計體系就是設計規范或者組件庫嗎?

          許多人認為設計系統就是單個代碼庫、組件庫、設計規范,但實際上他們不是一個層次的東西,準確度的來說設計體系包含設計規范,組件庫也是建立在設計體系內的,組件庫是記錄和共享設計模式的工具,就是設計體系工具化和表現層的部分;


          誤區2:設計體系的存在扼制了組織內創造力,會替代掉設計師?

          拋出這個問題,是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點,我個人是很難以認同這個的,對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合,需要調動整個團隊的想象力和創造力,最終達到一個統一共識才有可能被實施和執行;

          好的設計系統可以通過流程和機制促進創造力的,而且好的設計資產可以幫助大家從不必要的、重復的勞動時間內節省出來,當然也不能過度依賴過往的沉淀資產,把自己定位為設計系統的創造者,而不是使用的工具人,不斷的創造和貢獻好的解決方案被整個組織采用,就不必再擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。不會替代掉設計師,反而是一個企業內部尊重設計師價值的開始!是企業對設計文化的認可!


          誤區3:設計系統是一勞永逸的嗎?

          設計體系是動態的,永遠是隨著組織需求和用戶需求而變化的,一切說自己已經完成了設計體系的建設的人都是錯誤的,都是將將靜態的設計規范曲解成了設計體系。


          誤區4:設計系統由少數人員生產,我們負責用就行了?

          正確管理機制:少數人負責管理,多數人參與貢獻;避免你做、我用模式,這種生產消費模式非常內卷;避免如:我一個設計師為啥要用你的規范;這規范做的太垃圾用處不大,我才不用,用你做的規范;我苦逼做業務,你晉升拿結果的負面心態;

          然設計系統也不是簡單的靠少數的人1-2個月用愛發電就能完成的,設計系統是一群人,對一種做設計文化的認可,每個與之相關的人都應該是設計體系的貢獻者與布道者!


          需要克服的潛在難題


          當然設計體系也容易出現一些缺點,這些問題需要設計體系的構建者們去摸索去克服; 
          • 產品業務復雜性提升,提升建設難度

          • 難以控制創造與控制間的平衡;

          • 復用與定制間的平衡,刻意追求復用率而容易丟失整體觀,為特定業務目標服務時不如靈活集中化式方法等

          • 資源問題,容易被當成是輔助項目而缺乏預算等資源….

          • 缺乏良性有效的組件庫更新迭代機制,虎頭蛇尾….

          • 收益短期不明顯,搭建體系的長期收益難以被組織短期內察覺;


          盡管有一系列潛在的問題,但總的來說設計體系的帶來的收益是大于這些投入的,總的來說方向是沒錯的,下一個關鍵問題是:我們如何去建立一個更優秀的設計體系。

          文章來源:站酷   作者:從你的世界經過



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          深入聊聊“用戶體驗設計”那些事

          周周

          我們創建用戶體驗的設計方法為“以用戶為中心的設計”。

          產品需求管理與設計

          ui設計分享達人

          1. 需求定義

          需求是用戶對于自己碰到的困難從而提出的問題,是用戶對于已有產品的反饋和建議,是老板提出的商業訴求,就是運營人員減少工作麻煩的想法。需求和產品是一種問題導向與目標導向的結合,是用戶碰到了什么樣的問題,從行業屬性、用戶群體、業務場景、工作目標、商業利益等方面從而產出的輸出物,也就是所謂的產品。

          需要:是解決問題或者滿足欲望,達到最終的目的。

          需求:是需要付出一定成本來滿足,主要體現在解決方案中的具體產品和功能。

          2. 名詞解釋

          產品需求文檔(PRD)是將商業需求文檔(BRD)和市場需求文檔(MRD)用更加專業的語言進行描述。

          3. 面向對象

          開發、設計師、測試、老板、項目經理、產品經理、運營、市場、銷售、客戶、財務等其他角色。

          4. 輸出物

          文檔:Word、ppt

          交互或者原型稿件:Axure、UI界面

          5. 產品需求文檔結構

          命名和編號

          修訂記錄

          背景分析(產品背景、行業背景、國家政策)

          需求分析

          用戶定位

          產品目標

          總體架構(技術架構、功能架構)

          業務流程

          功能設計(功能總表、用戶角色、功能詳情)

          產品特色

          產品模塊清單

          產品適配清單(支持的瀏覽器、數據庫、中間件、操作系統)

          6. 需求分析原則及方法

          6.1. 產品需求的三個層次

          基礎性需求、期望性需求、興奮性需求

          6.2. 馬斯洛需求五個層次

          生理需求、安全需求、社交需求、尊重需求、自我實現

          6.3. 需求管理的四個環節

          采集需求、分析需求、篩選需求、處理需求

          6.4. 需求分析四象限

          重要并緊急、重要不緊急、不重要但緊急、不重要不緊急

          7. 需求分析及產出

          WWH法:是什么?為什么?怎么做 ?

          需求分析貫穿整個產品全生命周期,包括產品概念期、產品設計開發期、上線后-成長期、成熟運營期、產品衰退期。

           

           

          7.1. 明確問題

          7.1.1. 需求收集渠道

           

          明確需求收集渠道,確定用戶群體和需求調研的方法,比如問卷調查、訪談、名義小組會議、頭腦風暴法、觀察法、親和圖、蒙特卡洛技術、魚骨圖、提示清單等方法。

          提出需要解決的問題,明確需求帶來的價值。利用目標用戶、場景、問題三個思考維度,去定義真正意義上的產品需求,示例如下:

           

          通過用戶針對不同的場景,明確了主要問題需求,怎么思考產品需求怎么體現到產品設計上面,從而體現產品價值,包括產品設計成型后的市場推廣方式至關重要。產品問題產生的產品價值示例如下:

           

          7.1.2. 拆解需求

          拆解需求指的是把已經明確的問題,從多個維度進行拆解,目的就是為了找到更合適的解決方案。

          拆解問題的五個維度分別是積極層面、否定層面、轉移層面、拆解、腦洞。

          ? 積極層面:通常可以拆解出怎么做對用戶來講可以產生更積極的情感。

          ? 否定層面:通??梢圆鸾猓词共蛔鍪裁?,依然可以產生好的結果。

          ? 轉移層面:轉移指的是不直接單獨解決當前用戶的問題,通過轉移法,用戶轉移、問題轉移等。

          ? 拆解:把當前問題刨根問底的拆,挖掘更多的可能性、找到問題本質。

          ? 腦洞:這個更多的靠靈感、經驗等進行頭腦風暴,補充其他維度考慮不到的地方。

          7.1.3. 需求管理

          7.1.3.1. Kano模型

           

          Kano模型是對用戶需求分類和優先排序的工具,以分析用戶需求對用戶滿意的影響為基礎,體現了產品性能和用戶滿意之間的非線性關系。

          Kano模型把需求分為五類:基本型需求、期望型需求、 興奮型需求、無差異性需求、反向型需求。怎么通過模型知道用戶的需求類型,示例如下:

           

          7.1.3.2. 時間管理四象限法

          時間管理四象限法分別按照緊急程度和重要程度分為重要且緊急、緊急不重要、重要但不緊急、不緊急不重要。具體示例如下:

          本方法的優勢可以評估產品開發的時間優先級,對于一些重要且緊急的功能開發能夠做到心中有數。

          7.1.3.3. ICE排序法

          ICE排序法是一種比較嚴謹科學的分析需求的方法,通過幾個幾個維度給需求進行相應的打分,以總分的高低去排序。

          I(Impact):影響范圍。

          C(confidence):對上線效果的自信程度評估。

          E(ease):開發難易程度(工作量+技術難易程度)評估。

          7.1.4. 需求輸出

          7.1.4.1. 輸出內容

          思維導圖、業務流程圖、原型圖、需求說明文檔、功能說明文檔等

          7.1.4.2. 輸出角色

          業務人員、技術經理、后端技術人員、前端技術人員、UI、UE人員

          7.1.4.3. 溝通樣例

          (一)業務人員

          面對業務人員,主要是講產品功能實現和重點業務流程,主要依靠思維導圖或者原型圖去講解產品可帶來的價值和解決了什么樣的問題。

          (二)后端開發人員

          面對后端開發人員需要給技術經理協調和溝通,確定的項有數據庫怎么寫,字段(數據結構)怎么定義,最后生成什么樣的表,當用戶進行相關業務操作時(增刪改查),怎么去設計接口,接口設計對應數據庫,先調用什么樣的接口,傳輸什么樣的參數,返回什么樣的結果。進行前端解析,后臺數據圖形化,最后呈現給業務用戶。

          (三)UI、UE人員

          面試UI、UE人員從行業特征、用戶群體特征、用戶習慣等方面來確定產品視覺和交互形式。

          (四)前端開發人員

          通過評審后的UI設計稿交付給前端人員,進行前端頁面的開發。

          (五)測試人員

          面對測試人員,跟進產品測試情況,提供產品需求文檔和原型圖及UI設計圖,編寫測試用例,把控測試時間,協調相關資源,保證產品順利產出。

          8. 產品迭代規劃與需求跟進

          8.1. 產品全生命周期規劃

          根據產品規劃的全生命周期,確實不同階段需求的落地情況,根據用戶對于需求的滿足情況。

          8.2. 業務流程分析

          根據已開發上線的所涉及的業務流程,先分析完整性,基于本流程從專業角度提出改進方案,不斷優化該流程,確定流程的可用性。特別是一些核心業務流程,要做到簡潔高效,提高效率。

          8.3. 新需求管理

          通過產品的不斷使用,收集和接收不同的新需求,并定期開展新需求評審,逐步完善到產品里面,以最小調整為基線確定新需求的開發計劃,保證產品總規劃的穩步實施。

          8.4. 里程碑管理

          把控整體產品里程碑管理,確保產品迭代重大節點變化能夠有理有據,為產品的營銷工作,提供支持??偨Y產品優勢和產品亮點,對產品的銷售情況負責。

          原文地址:站酷
          作者:Lyion

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

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

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

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

          如何運用情緒板定義視覺風格?

          ui設計分享達人

          前言 

          相信每個設計師,平日里都會去關注各種各樣的視覺風格、設計趨勢,如雜志風格/3D風格/簡筆插畫/晶白風格/賽博朋克/國潮/新擬態/孟菲斯等等各種各樣的視覺風格。但是在了解這么多視覺風格的同時,又不知道什么樣的風格適合是自己產品的,做設計時僅僅憑借著直覺跟過往的經驗來進行設計,最終導致設計稿禁不起業務方的推敲,并且被貼上設計不專業的標簽。 

          其實,每一個產品設計都需要設計師花費大量的時間精力去推倒出屬于自己產品的視覺風格。而不是僅僅參考當下流行什么設計趨勢、設計風格,就開始進行設計。流行的視覺風格大多不會一直流行,只有符合平臺調性的視覺風格,才能更好的為產品賦能。 

          因此,學會如何定義視覺風格,是每個設計師都需要去學習并且加以運用的。 

          什么是情緒板? 

          情緒板(英文Mood Board),通常是指一系列圖像、文字、樣品的拼貼,是設計中最常用的定義設計和視覺方向的設計方法論。 

          情緒板的本質在于: 將情緒可視化,將較為抽象的詞語轉化為可視化的圖形等,比如:“安全”這個詞可映射出盾牌/鎖/警察等等給人們感覺到安全的人事物。 




          情緒板的作用?


          情緒板能夠更加幫助設計師與業務方達成設計共識,并且能夠幫助設計師定義視覺風格與找到設計方向,使設計更加合理,為產品賦能。


          如何運用情緒板定義視覺風格


          情緒板的制作流程


          情緒板的制作流程大致分為5步:


          1、明確原生關鍵詞


          了解項目背景或需求本身的方向,通過內部討論,用戶研究和品牌等方式定出3-5個原生關鍵詞,通常定出的詞都比較抽象。


          2、挖掘衍生關鍵詞


          在原生關鍵詞的基礎上讓參與者發散得到更精準的二級詞語,能夠更加準確的定位到圖形傳達方向,最好是一些情緒和視覺表達的形容詞。

          可通過視覺映射、心境映射、物化映射,得到用戶理解的“抽象關鍵詞”所對應的“具象定義”。


          3、搜索關鍵詞圖片


          確定完關鍵詞后,可在pinterest、花瓣等設計網站上建立情緒板圖庫,按照人,事,物,形、色、字、構、質等方向收集大量的對應圖片素材來匹配關鍵詞。


          4、建立情緒板


          對應每個關鍵詞,從情緒板圖庫中提取高質量能夠代表關鍵詞意思的人,事,物,形、色、字、構、質去展示,以此喚醒用戶對關鍵詞情緒體驗。


          5、提取視覺風格準則


          根據情緒板圖庫中的圖片提取出視覺風格準則,包含:圖形、顏色、質感、構成、字體等視覺風格準則。



          舉個案例說明:


          明確原生關鍵詞


          討論原生關鍵詞


          了解項目背景或需求本身的方向,通過內部討論(可叫上產品、運營、老板等進行討論),用戶研究和品牌等方式定出3-5個原生關鍵詞,通常定出的詞都比較抽象。



          確定原生關鍵詞


          從討論的關鍵詞中提取3-5個最適合的關鍵詞。



          2、挖掘衍生關鍵詞


          在原生關鍵詞的基礎上讓參與者通過視覺映射、心境映射、物化映射,發散得到更精準的二級詞語,能夠更加準確的定位到圖形傳達方向,最好是一些情緒和視覺表達的形容詞。



          3、搜索關鍵詞圖片


          確定完關鍵詞后,可在pinterest、花瓣等設計網站上建立情緒板圖庫,按照人,事,物,形、色、字、構、質等方向收集大量的對應圖片素材來匹配關鍵詞。



          4、建立情緒板


          對應每個關鍵詞,從情緒板圖庫中提取高質量能夠代表關鍵詞意思的人,事,物,形、色、字、構、質去展示,以此喚醒用戶對關鍵詞情緒體驗。


          5、提取視覺風格準則


          根據情緒板圖庫中的圖片提取出視覺風格準則,包含:圖形、顏色、質感、構成、字體等視覺風格準則。




          總結


          情緒板作為一種常用的設計方法論,能夠幫助設計師更加合理的總結出合適的視覺風格。設計不僅僅是只是跟隨著設計趨勢,怎樣找到適合產品的視覺風格,是每個設計師更需要去掌握的內容。


          以上內容,是學習如何定義視覺風格的其中一種方法,希望對大家有所幫助,如有不同意見,歡迎指正!


          圖片版權歸原作者所有

          原文地址:站酷
          作者:船長的成長日記

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

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

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

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


          提高視覺和交互逼格,UI動效之SVG動畫教程

          ui設計分享達人

          最近幾年不管是WEB端頁面還是APP,使用交互動效越來越多,加了動效的UI頁面看上去不再那么枯燥無味,能很好的抓住用戶眼球,既提升了用戶交互體驗同時也更好的展示了產品。通常我們會在哪些場景下使用動畫呢?例如菜單圖標、載入動畫,空白頁,產品介紹等都可以使用動畫,下面是一些示例:


          今天給大家講解一下如何制作一個svg格式的動畫,開始之前先和大家說一下svg是什么,目前web或者app中的動畫大多使用svg格式,svg英語全稱是Scalable Vector Graphics,它是一種可縮放的矢量圖像圖形文件格式,這種格式的文件具有邊緣清晰、文件體積小、傳輸方便的特點,因此在網頁設計以及APP中比較常用??梢允褂肐llustrator軟件或使用

          專業的svg編輯器進行設計輸出,svg支持瀏覽器及任何文字處理工具打開。因此svg格式是一種開放標準的矢量圖形語言,可讓你設計激動人心的、高分辨率的圖形頁面。

          如果你具有一些代碼能力,還可以直接用代碼來描繪圖像,通過改變部分代碼來使圖像具有交互功能,并可以隨時插入到HTML中通過瀏覽器或編譯器來觀看。


          綜合起來SVG優勢如下:


          1. 可被非常多的工具讀取和修改

          2. 與 JPEG 和 GIF 圖像比起來,尺寸更小,且可壓縮性更強。

          3. SVG 可隨意縮放

          4. SVG 圖像可在任何的分辨率下被高質量地打印

          5. SVG 圖像中的文本是可選的,同時也是可搜索的(很適合制作地圖)

          6. SVG 可以與 JavaScript 技術一起運行

          7. SVG 是開放的標準

          8. SVG 文件是純粹的 XML

          目前制作SVG動畫的軟件主要使用AE(需要插件加持)或者在線的SVG動畫工具,如svgjson.com等,如果使用AE需要安裝bodymovie插件,我平時大部分動畫都是使用svgjson工具完成的,所以今天給大家分享的svg動畫教程主要也是使用在線工具svgjson來完成(完全免費),它支持導出svg或json格式動畫,可以滿足不同的需求,目前該軟件雖然是英文版的,但是上手還是比較容易,為了更好讓英語不是特別好的同學快速上手,我下面做了一個關鍵功能的中英對比說明。



          軟件地址:https://www.svgjson.com/editor-page/


          如制作一個loading動畫

          制作要點:

          1. 創建2個圓形,一個底色(淺灰色)一個旋轉的圓圈(藍色)

          2. 在Store中設置Stroke Dash Array的圓圈長度,圓圈長度可以從Information中獲取

          3. 設置Stroke Dash Array后,開始旋轉圓圈的長度,我設置了400,大家可以根據自己的需要進行個性化設置

          4. 第四步我們來設置動畫,先選擇藍色的圓圈,然后在Transform中設置旋轉動畫,第0秒為0,第10秒為3600
          度(記住別忘記按關鍵幀動畫按鈕,第一幀設置了動畫,后面更改參數會自動生成動畫關鍵幀)

          5. 按空格鍵或者點擊時間條上的播放按鈕看看效果,如果沒有問題選擇導出SVG動畫,一個loading動畫就完成
          了。

          完成后效果

          上面的動畫是通過Angle(角度)來實現的旋轉動畫,接下來我們可以通過Stroke Dash Offset來設置旋轉動畫


          loading動畫進階教程

          先看最終效果

          由于svgjson的繪制能力相對較弱,所以我在其他軟件中先畫了如下圖這個動畫的基本元素(需要保存為svg格式),然后通過svgjson中的導入svg方式導入。

          1. 首先把“按鈕左”和“”放在一起拼湊成一個圓,然后把“按鈕中間部分”也放在圓中間,并且把它的Scale X值設為0.

          2. 把載入的圓圈放在剛剛的紅色圓中,并設置Stroke Dash Array值和Stroke Dash Offset動畫(具體參照上面的動畫教程)

          3. 把載入成功的勾號放在載入圓圈中,然后設置動畫Stroke Dash Array值和Stroke Dash Offset動畫

          4. 再設置按鈕左和按鈕右位移動畫,同時也需要“按鈕中間部分”的Scale X的動畫


          通過上面的2個教程,相信大家對svgjson這個軟件有了一個基本的使用能力,svgjson中的Stroke屬性下的Stroke Dash Array和Stroke Dash Offset功能還是蠻強大的,可以通過這2個參數設置很多豐富的動畫效果。

          下面的動畫主要使用x軸縮放功能實現的交互,當然也可以使用Stroke Dash Offset參數實現動畫效果。

          這個動畫的核心點在設置對象的中心錨點位置,默認對象的中心點在中心,這個教程是把對象中心點移到了左側

          接下來給大家演示如何制作一個變形動畫,變形動畫也是一個非常常見的交互

          這個教程重點是對象的縮放,縮放前需要設置錨點位置,然后就是設置x軸和y軸的偏移值。


          總體來說,svgjson網站提供的動畫能力還是很強的下面是我制作的項目樣例:



          原文地址:站酷
          作者:Snmendala

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

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

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

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

          如何通過實驗來驗證設計結果?關于B端產品「屏效提升」的實驗研究

          ui設計分享達人

          屏幕有效利用率這個話題想必大家并不陌生,在B端產品中,越來越多的產品和用戶把目光聚焦到屏效上來。站在體驗設計的角度,立足交互和視覺的設計手法,挖掘屏效提升的設計價值,讓屏效最大化是提升用戶體驗的合理方法。





          在此文中,對于整個設計(交互、視覺)的手段方法不做過多的詳細探討,我們重點闡述如何利用實驗研究的手法驗證屏效提升。以某B端項目為例,利用科學的實驗研究方法,通過設計實驗假設、提煉任務場景、準備實驗物料、進行控制變量等完整的實驗方法,來驗證該項目中屏效提升的設計方法(提高信息密度、縮短操作路徑以及信息重組)最終是否提升屏效。



          原文地址:站酷
          作者:自傳一周的鹿

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

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

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

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

          簡單實用!系統化總結「地圖標簽」設計

          seo達人


          一、地圖組件的四種類型

          1、圖標
          地圖上只標記圖標,這種呈現方式能最大程度地顯示地圖上的信息,減少內容遮擋,也是在設計中首先要考慮的類型。

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

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

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

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

           

          二、地圖組件的視覺樣式

          大多數場景中,地圖組件的底部會有一個突出的箭頭,用來標記確切的信息或地址。
          考慮到后期開發的難度,箭頭的位置應始終位于組件的中間。另外如果一個頁面中有多個地圖組件,可以將箭頭調整到頂部,防止發生重疊。

           

          1、顏色

          組件的顏色比較靈活,默認情況下是白色,但可以通過改變背景色來匹配品牌色。
          顏色通常出現在圖標后面用來強調信息,如果沒有圖標可以把整個氣泡組件都填充上顏色。

          根據背景色的不同,文本和圖標盡可能使用黑色或白色,減少對內容的干擾。
          2、狀態
          地圖氣泡尺寸的大小根據點擊需求確定。白色輪廓加上膠囊形狀讓用戶能夠快速識別出可點擊的對象,選定后氣泡顏色會反轉。

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

           

          三、組件可用性指南

          如何判斷設計出來的組件是否適合用戶使用?組件需要怎樣設計才能適用于不同的使用場景中,有沒有統一的規范?
          1、組件狀態
          面對不同場景中的組件,提供多種狀態:重疊、可見、收縮、聚類、分離。

           

          2、密度

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

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

           

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

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

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

           

          四、總結–點擊即導航

          在開始設計地圖UI界面之前,有必要花費時間了解地圖組件的樣式、類型和可用性指南。
          通過這些信息可以幫助設計師更快地確定方向,從而設計出清晰美觀的地圖界面。

           

          原文地址:Medium

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

          作者:Linzi Berry

          譯者:Clippp

           

          轉載請注明:學UI網》簡單實用!系統化總結「地圖標簽」設計

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          這7個小技巧快速幫你改善UI界面

          seo達人


          1.為了更好的字體組合,選擇「超大字體家族」吧!

          在成千上萬的字體當中尋找合適的組合是一件非常艱難的事情。如果你也為之苦惱,那么試試「超大字體家族」吧!

          通常所說的「超大字體家族」(SuperFamily)其實指的是一組被打包到一起可以互相搭配的襯線和非襯線體,它們風格和細節不一樣,但是互相搭配效果是頗為不錯的。

          我個人強力推薦的是 Merriweather 和 Merriweather Sans、Roboto 以及 Roboto Slab 這樣的搭配。

          「超大字體家族」最大的優勢在于,它是已經被驗證過的優質組合,用的時候不用擔心~

           

           2.減小標題文本字間距,視覺平衡更好

          在標題文本中使用較大的字間距,是排版設計中最常見的禁忌之一!

          在放大文本的時候,常規比例下的字間距會顯得更加明顯,視覺上會顯得有點「稀疏」,減小字間距能夠讓標題文本更加緊湊,在視覺上更加平衡,通常會讓人更加愉悅。

           

           3.注意縱向行間距和段落間距的節奏感

          當你想讓整體排版的節奏感足夠好的時候,有必要針對性地重新調整行間距和段間距。

          你需要根據靠近原則,讓相互關聯的標題和正文之間的段間距更加靠近一點,讓不相關的內容塊互相之間分開,間距拉遠,從而自然而然地進行區分。

          通常而言,你可以讓標題上方的留白更大一些,標題下方的留白更小一些,這樣就可以了。

           

          4.如果標題很短,可以試著使用全部大寫

          在英文為主的頁面當中,全大寫的文本辨識度其實相對更低的一些,較長的標題文本使用大寫字母更是難于辨認。不過對于僅有一兩個單詞的短標題而言,就容易識別多了。

          另一方面,短標題使用小寫字母會顯得不夠飽滿,這個時候使用大寫字母能夠讓它在視覺上更加突出。

          相應的,在使用全大寫的短標題當中,適當地拉開字間距,能夠增加呼吸感,降低壓迫感。

           

          5.如果能讓你的標題更加簡短明了……那么就這么做吧!

          如果可以的話,標題盡量簡短有力一些。

          比如「It’s your style, and your way」這樣的標題可以直接濃縮為「Your style. Your way.」。

          這樣的標題更容易閱讀,也更加有力,更容易被消化和感知到。

          當然,這樣的文案設計技巧是需要根據行業和領域進行優化的,這個方法并不適用于全部領域。

           

          6.選字體的時候,盡量選擇有很多不同字重的

          你所下載或者購買的字體,是否有很多不同的粗細/字重/樣式供你選擇?

          如果你有的選,盡量購買或者選擇那種有很多不同字重的字體族。如果這款字體只有一種字重,建議你盡量避開它。

          在很多不同的設計項目當中,不同的場合可能會用到不同的字重,如果它只有一種字重,那么你要么只能選擇別的字體,要么就需要額外購買,很麻煩。

          即使這款字體包含兩三種不同的樣式或者字重,也足以應對很多不同的需求,創造出有韻律感的設計了。

           

          7.選擇貼合設計風格和氣質的字體

          不同的字體有不同的風格。有的字體粗壯有力,有的柔和自然,有的現代而規整,有的友好而舒適,有的則有趣且俏皮,等等等等。

          每種字體都有不同的氣質,你需要把握字體的氣質特征,有意識地總結這些屬性,當你在應對不同的設計項目的時候,能夠快速找到氣質貼合的字體。

          這似乎是一項艱巨的任務,但是從長遠來看,能夠幫你更快地搞定各種設計問題。

           

          結語

          很多技巧都不復雜,甚至稱得上是微不足道。但是如果用好這些小技巧,能夠讓你的設計事半功倍。

           

          原文地址:marcandrew.me

          譯文地址:追波范兒(公眾號)

          作者:Marc Andrew

          譯者:terechen

          轉載請注明:學UI網》這7個小技巧快速幫你改善UI界面

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          智慧工地上的阿里云數字設計

          seo達人


          為什么是工地?

          此時的筆者,站在阿里云EFC的落地窗前,目力所及的城市,只由兩部分構成:高聳的樓宇,和樓宇間的工地。

          為什么是工地?

          因為如果建筑里有城市的現在,那工地里有城市的未來;

          過去數十年,讓整個中國變成一個大工地,而現在這個大工地,正一步步完成數字化轉型。

          工地的數字化,是產業數字化轉型的重要一環,這一環所聯結上的,是數十年的高速發展中粗放的建筑開發模式帶來的諸多問題:工地安全事故、建筑質量問題、管理信息化缺失等等。而物聯網的硬件基底、云計算的彈性資源、人工智能的智慧技術相結合下,正孕育著新一代的智慧化工地信息管理解決方案。

          阿里云智慧工地AI服務平臺,便是阿里云A組空間智能面向在建工地的一款智慧施工和驗收的產品,結合視覺、語音、文字等AI技術,對項目現場采集到的傳感器數據進實時分析和預警,智慧度量施工品質、智能識別項目進度、多維數據評估工地風險等級,讓工地少出事,管理更輕松。
          設計上,我們結合阿里云AI LAB(阿里云人工智能實驗室)的BIM模型智能生成技術,以及阿里云設計中心自研的GDS WebGL圖形技術,實現了實時、三維、全景的數字工地可視化,為智慧工地產品賦予了更震撼的視效和更高效的信息展示。
          這時,熟悉可視化設計領域的朋友會說了,這不就是個大屏嗎?
          是的,你可以說這就是個大屏。
          但在阿里云設計中心GDS的能力加持下,我們既達到了高定制項目級大屏的視效效果,卻也保留了瀏覽器端的高性能渲染和高復用性,從而形成和同類產品的代差優勢。

          什么是GDS?全稱Generative Design Studios,取意生成式設計。它是一個 WebGL圖形技術基礎能力,是由阿里云設計中心自研的一個JS代碼庫,可高效復用與迭代于多種實時計算的特效。它用算法思維去做設計,專注在解決渲染層的圖形技術與視覺效果問題,通過參數、配置接口化去反應設計、邏輯、功能之間的響應關系,對基于WebGL的圖形開發做中臺能力支撐。

          簡單的說,GDS生成的3D場景:
          它不是那種建模一星期渲染三小時、在專業的一體化軟硬件下勉強達到30幀/秒的“游戲級”大屏;
          它是那種建筑BIM模型智能生成、大屏級視效實時渲染、同時在消費級電腦上流暢運行60幀/秒的“產品級”大屏;
          而為了達到這一點,我們做了三件事情:

           

          從智能生成的BIM模型,到高性能的glTF模型

          傳統的建筑模型生產嚴重依賴人工建模,高成本且難以規模化。而BIM建筑信息模型(Building Information Modeling),通過人工智能與計算機算法將CAD施工文件進行解析,并智能生成1:1高還原度的3D建筑模型, 為智慧城市等創新與數字管理產品提供更智能的模型來源。
          在智慧工地中我們率先使用阿里云AI LAB的BIM技術生成工地的主樓宇模型。

          同時,由于智慧工地的客戶端最終是一款在瀏覽器里運行的SaaS級產品,3D可視化部分全部由WebGL技術實現的實時渲染(Real-time Rendering)。在瀏覽器端,為了出色性能表現,需要專業的設計手段對于模型的Mesh(3D多邊形面體),Vertices(節點)以及Faces(面數)進行極高要求的優化與減面,才能使產品能夠高性能地應對龐大的3D場景實時渲染,并達到生產標準。

          實時渲染是指屏幕上呈現的圖形是一直在不斷計算,100%通過代碼成像,它能達到60幀/秒代表性能卓越與流暢。實時渲染的動畫并非3D軟件渲染輸出的視頻動畫,因為它是通過代碼在實時運行,所以對于參數化、動態生成、樣式切換、互動事件與操控綁定,以及聯動實時數據方面有著視頻動畫不可替代的優勢與價值;

          實時渲染,每一個模型的節點都會牽涉到性能。我們亦使用Blender 3D軟件進行BIM模型的進一步優化,以及對于UV、貼圖等3D開發的前期設計工作進行處理。最終模型質量優化率達到95%+,產出WebGL開發渲染所需的高性能 glTF(Graphics Library Transmission Format)模型。

          — 智慧工地通過GDS生成的3D場景線框與高性能表現的低面節點數

           

          三維地理場景自動化代碼生成

          要搭建一個真實的工地場景,只有主施工樓宇模型還不夠,還需要還原工地周邊的城市場景,讓空間更加真實和立體。通過GDS的內置能力,除智慧工地的施工樓宇模型之外,周邊所有地理和城市場景,都是100%通過代碼直接生成的。簡單來說,整個城市的三維建筑,不再依賴于人工建模與貼圖,通過圖形的計算,就能把3D場景、樣式用代碼生成出來,這大大提高了生產力。

          — GDS 全參數化100%代碼生成的城市樓宇元件與地形元件,實現去人工、零手工模型貼圖

          傳統的大屏工作流中,真實的城市環境生成,強依賴于城市GIS地圖衛星數據,這有著很高的采購和接入門檻。而在GDS的圖形能力中,我們需要的只是一張簡單的公共地圖圖片:施工中的工地是沒有GIS地圖衛星數據來源的,我們從公共數據(e.g 高德地圖)獲取到工地的片區圖,用設計工具勾勒出地理位置概貌,將其轉換為SVG色塊,再通過GDS的解析腳本算法,把SVG形狀換算為3D空間的相對位置坐標,用于3D場景的幾何生成。

          — GDS解析地理場景,把SVG點位換算為3D生成所需的分層幾何數據

           

          — GDS解析不同數據,對應生成不同3D場景。無需人工建模、大量提效

           

          在消費級電腦上實時渲染大屏級視效

          所有人都喜歡酷炫的視效,但酷炫的視效總是需要價格不菲的硬件支撐。在智慧工地項目中,同樣基于GDS針對城市場景的高度優化和高性能,代碼生成的大屏級的視覺效果得以實時運行在更多更廣泛的設備平臺上。
          在設計智慧工地的可視化中,為了達到更好的視覺特效,我們所有的材質都來自GDS的多種Shader(圖形著色器),包括實時計算的環境映射模擬(HDRI Refelection)、車流道路模擬、根據深度計算的漫反射陰影(Depth-based Soft Shadow)、SSAO、極光聚焦特效和進度指示器等等,通過自研的Shader等技術方式,最大化與最靈活的達到理想的設計效果。

          — 實時數據聯動施工進度演示

          代碼生成的設計,原生也讓我們有了更多設計上的可能性,比如:參數化樣式可秒級切換;
          智慧工地可視化原生集成了參數化配置,且擁有極高的復用性與易于迭代。目前GDS提供了數套不同風格的樣式配置預設,在樣板間中我們可以看到整個3D場景的風格無縫切換在秒級速度中智能完成。利用參數化風格的原理,我們也可以聯動實時數據,零成本、智能地實現深色、淺色、日夜的不同風格切換。

          除了基礎的建筑模型展示之外,還有諸多業務信息也要進行可視化呈現,例如施工進度、施工現場傳感器狀態、天氣信息、報警信息等。這些數據并不是生硬地以二維圖表傳統的數字呈現,而是通過不同視效的表達融合在三維場景中。這樣一個基于“真實業務場景”的三維工地,才是一個與現實同步運轉,實現視覺表達、數據流轉和人機互動統一的數字平行世界。
          基于傳感器數據的計算機視覺智能識別是智慧工地產品的核心能力,我們通過上文提到的GDS地理位置解析與計算,可以映射出施工現場傳感器設備的相對坐標,實現在可視化中聯動設備的掛載。結合阿里巴巴達摩院的視覺智能識別等多重技術能力,工地中每一個傳感器設備的狀態,報警等信息都可以在三維場景里一鍵點擊獲取。

          — 傳感器設備在3D場景中通過坐標換算進行掛載

          THE SMART

          CONSTRUCTION SITE

          BY ALIBABA CLOUD

          TECHNOLOGY

           

          — 阿里云智慧工地樣板間演示

           

          如果說以上還更多是視覺和技術的展示,那接下來的問題是:

           

          我們為什么從設計出發,卻要不斷突破邊界,去追求技術、性能和設計表達上的極限平衡呢?

          因為海和山就在那里。
          〇 海是藍海。
          2018年,我國智慧工地行業市場規模就達到99.1億元,同比增長24.03%;與此同時,全國95%以上的工地仍處于原始狀態。粗略估算,國內整個智慧工地市場規模容量可達上千億元。

          市場的規模只是一部分,建筑業的務工人員,數以億計。國務院安委辦通報顯示,建筑業事故總量已連續9年排在工礦商貿事故第一位,事故起數和死亡人數自2016年起連續“雙上升”。解決工地數字化的問題,也是在解決施工安全和施工質量的問題。

           

          〇 山是高山。
          智慧工地的普及,難點之一是效率。市場中常規的智慧工地產品往往以定制化項目的形式進行交付,每覆蓋一個新的工地場景,都需要針對性的從頭進行三維場景的設計和搭建,時間和人力成本巨大。

          而智慧工地借助BIM模型自動生成及GDS的代碼生成能力,最大程度節約了人工環節的耗時。參數化配置的視覺樣式,也能無縫在任何一個項目中使用。

          目前阿里云A組空間智能智慧工地AI服務平臺已經成功落地阿里內外多個項目,并被10家以上智慧工地集成服務商集成,正面向全國各地的工地進行全面應用,驅動傳統行業數智化。我們希望設計能力的植入,能為行業提供一套標準化的三維場景搭建方案,縮短項目開發時間,保證高復用性,并借助生態伙伴的力量,真正實現規模化的智慧工地產品。

          所以,為什么是工地?

          仔細看,那一片片智慧工地中的,是襁褓中的智慧城市。

           

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

          作者:阿里云設計中心


          轉載請注明:學UI網》智慧工地上的阿里云數字設計

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

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

          存檔

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