首頁

這些高級UI設(shè)計趨勢,我不允許你還不知道!

ui設(shè)計分享達(dá)人

正文


如果移動應(yīng)用程序不符合最新的設(shè)計趨勢,那用戶可能會放棄你設(shè)計的產(chǎn)品。 

考慮到趨勢永遠(yuǎn)不會保持不變,而且總會有新的趨勢出現(xiàn),讓應(yīng)用看起來既現(xiàn)代又漂亮是一項挑戰(zhàn),但遵循設(shè)計趨勢對于每個產(chǎn)品設(shè)計師來說都是必須的。 

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


這是我們總結(jié)出的 2022 年移動應(yīng)用 UI 設(shè)計趨勢

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



1、動效和動畫

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

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

借助動畫,您可以強調(diào)應(yīng)用功能、提高轉(zhuǎn)化率甚至銷售數(shù)據(jù)。 




2、手勢和滑動體驗

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

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




3、90年代懷舊風(fēng)格

90 年代的風(fēng)格影響了所有領(lǐng)域,甚至是移動應(yīng)用程序的設(shè)計。 

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

這種趨勢并不適合所有產(chǎn)品,但如果復(fù)古風(fēng)格適合您的應(yīng)用程序,嘗試一下也不錯。 



4、賦予圖形深度

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

這種趨勢可以與任何元素一起使用,在屏幕上創(chuàng)建對象層次結(jié)構(gòu)并幫助用戶更輕松地瀏覽應(yīng)用程序。 

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




5、黑暗模式

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

深色主題設(shè)計將背景變?yōu)樯钌J?,并使字體和其他元素變?yōu)闇\色/白色。 

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




6、排版

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

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

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

通過組織排版為您的用戶提供愉悅且可讀的用戶體驗:設(shè)置點大小、行距和層次結(jié)構(gòu)。 

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



7、增強現(xiàn)實和虛擬現(xiàn)實

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

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

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

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




8、漸變和透明元素

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

移動應(yīng)用程序設(shè)計中的透明元素表達(dá)了對某些應(yīng)用程序部分的深度和驅(qū)動力,使設(shè)計更清晰、更具吸引力。 

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

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

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




9、舒適的視覺效果

舒適的視覺效果是大部分用戶都喜歡的。用戶和應(yīng)用程序開發(fā)人員都喜歡這種最近的移動應(yīng)用程序設(shè)計趨勢。 

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

舒適視覺設(shè)計趨勢的概念是為您的應(yīng)用程序使用自然的色彩、舒緩的圖像和簡單的布局。這些技巧通??梢栽谮は霊?yīng)用程序中找到。它們包括自然的真實照片,具有平靜的色彩和結(jié)構(gòu)簡單的輕元素,很少有深色主題設(shè)計。 




如果讓你的UI設(shè)計更好呢?

這里有一些建議: 

1. 多看別人的優(yōu)秀設(shè)計
分析它們的優(yōu)缺點,從他們的經(jīng)驗中學(xué)習(xí)。 

2. 使用標(biāo)準(zhǔn)導(dǎo)航
不要使用異型的導(dǎo)航欄,這會讓你的用戶迷失在應(yīng)用中。 

3. 使用優(yōu)質(zhì)的配圖
抽象藝術(shù)、插圖、真實照片趨勢——一切都有助于吸引用戶的注意力。 

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

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

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

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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


淺談B端設(shè)計系統(tǒng)

ui設(shè)計分享達(dá)人

什么是設(shè)計系統(tǒng)?



設(shè)計系統(tǒng) = 設(shè)計價值觀和原則+設(shè)計規(guī)范+場景定義+工具包

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

為什么要構(gòu)建設(shè)計系統(tǒng)?


問題1:

隨著業(yè)務(wù)的拓展,產(chǎn)品和項目數(shù)量不斷增加,發(fā)展中期設(shè)計和交互上不一致性的問題浮出水面,需要采取措施確保產(chǎn)品或產(chǎn)品線之間保持統(tǒng)一的品牌傳達(dá)、外觀和體驗,以滿足用戶預(yù)期并向其傳達(dá)統(tǒng)一的品牌認(rèn)知。

問題2:

無統(tǒng)一的設(shè)計規(guī)范和交互原則,沒有統(tǒng)一的UI組件庫和代碼庫,各團隊設(shè)計和前端需花費大量資源陷于低質(zhì)量溝通協(xié)作和重復(fù)造輪子,拖慢產(chǎn)品和項目設(shè)計和開發(fā)節(jié)奏。

問題3:

產(chǎn)品項目數(shù)量 vs 產(chǎn)品設(shè)計師,人員配比嚴(yán)重不足的情況下,團隊的設(shè)計師們無法從雜/亂/急的日常需求中剝離出來,影響構(gòu)建產(chǎn)品壁壘的質(zhì)量和速度。

設(shè)計系統(tǒng)的價值


產(chǎn)品側(cè):

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

設(shè)計側(cè):

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

開發(fā)側(cè):

形成開發(fā)資產(chǎn),可以提升研發(fā)效率,降低維護成本。開發(fā)工程師無需再重復(fù)開發(fā)同一個組件,只需要去組件庫里調(diào)用即可,配合業(yè)務(wù)邏輯,高效完成界面開發(fā)。做到開箱即用。 

測試側(cè):

標(biāo)準(zhǔn)化的設(shè)計規(guī)范,是測試人員最喜歡看到的。1是1,2是2的設(shè)計準(zhǔn)則,提升了測試效率。例如,設(shè)計規(guī)范規(guī)定彈窗footer區(qū)按鈕組居右,那么測試人員只要測到不居右,就可以給產(chǎn)品提優(yōu)化建議了。 

主流設(shè)計系統(tǒng)-他山之石可以攻玉!


無需猶豫,直接基于現(xiàn)有的優(yōu)秀的開源設(shè)計系統(tǒng),

設(shè)計系統(tǒng)的打造不必從0-1構(gòu)建, 例如:Ant Design業(yè)界優(yōu)秀的開源設(shè)計系統(tǒng),我們完全可以站在前人的肩膀,最終生產(chǎn)出符合達(dá)觀品牌、業(yè)務(wù)特性的設(shè)計系統(tǒng)。


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

字節(jié)跳動 Semi Design:https://semi.design/zh-CN/

字節(jié)跳動 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/ 

以原子理論構(gòu)建設(shè)計系統(tǒng)


原子理論設(shè)計介紹

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


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


原子層(Atoms):

原子是物質(zhì)的基礎(chǔ)組成部分,是構(gòu)成設(shè)計系統(tǒng)的最基礎(chǔ)元素。

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

簡單概述下來就五個字:色、形、質(zhì)、構(gòu)、質(zhì);



分子(Molecules)層

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

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


 組織(Organisms)層

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

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



模板(Templates)層

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


頁面(Pages)層

帶業(yè)務(wù)邏輯的場景案例如:標(biāo)注詳情場景、抽取詳情場景、權(quán)限管理場景。頁面將真實內(nèi)容應(yīng)用于模板;

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



關(guān)于設(shè)計系統(tǒng)的常見認(rèn)知誤區(qū)



誤區(qū)1:設(shè)計體系就是設(shè)計規(guī)范或者組件庫嗎?

許多人認(rèn)為設(shè)計系統(tǒng)就是單個代碼庫、組件庫、設(shè)計規(guī)范,但實際上他們不是一個層次的東西,準(zhǔn)確度的來說設(shè)計體系包含設(shè)計規(guī)范,組件庫也是建立在設(shè)計體系內(nèi)的,組件庫是記錄和共享設(shè)計模式的工具,就是設(shè)計體系工具化和表現(xiàn)層的部分;


誤區(qū)2:設(shè)計體系的存在扼制了組織內(nèi)創(chuàng)造力,會替代掉設(shè)計師?

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

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


誤區(qū)3:設(shè)計系統(tǒng)是一勞永逸的嗎?

設(shè)計體系是動態(tài)的,永遠(yuǎn)是隨著組織需求和用戶需求而變化的,一切說自己已經(jīng)完成了設(shè)計體系的建設(shè)的人都是錯誤的,都是將將靜態(tài)的設(shè)計規(guī)范曲解成了設(shè)計體系。


誤區(qū)4:設(shè)計系統(tǒng)由少數(shù)人員生產(chǎn),我們負(fù)責(zé)用就行了?

正確管理機制:少數(shù)人負(fù)責(zé)管理,多數(shù)人參與貢獻(xiàn);避免你做、我用模式,這種生產(chǎn)消費模式非常內(nèi)卷;避免如:我一個設(shè)計師為啥要用你的規(guī)范;這規(guī)范做的太垃圾用處不大,我才不用,用你做的規(guī)范;我苦逼做業(yè)務(wù),你晉升拿結(jié)果的負(fù)面心態(tài);

然設(shè)計系統(tǒng)也不是簡單的靠少數(shù)的人1-2個月用愛發(fā)電就能完成的,設(shè)計系統(tǒng)是一群人,對一種做設(shè)計文化的認(rèn)可,每個與之相關(guān)的人都應(yīng)該是設(shè)計體系的貢獻(xiàn)者與布道者!


需要克服的潛在難題


當(dāng)然設(shè)計體系也容易出現(xiàn)一些缺點,這些問題需要設(shè)計體系的構(gòu)建者們?nèi)ッ魅タ朔?nbsp;
  • 產(chǎn)品業(yè)務(wù)復(fù)雜性提升,提升建設(shè)難度

  • 難以控制創(chuàng)造與控制間的平衡;

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

  • 資源問題,容易被當(dāng)成是輔助項目而缺乏預(yù)算等資源….

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

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


盡管有一系列潛在的問題,但總的來說設(shè)計體系的帶來的收益是大于這些投入的,總的來說方向是沒錯的,下一個關(guān)鍵問題是:我們?nèi)绾稳ソ⒁粋€更優(yōu)秀的設(shè)計體系。

文章來源:站酷   作者:從你的世界經(jīng)過



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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


深入聊聊“用戶體驗設(shè)計”那些事

周周

我們創(chuàng)建用戶體驗的設(shè)計方法為“以用戶為中心的設(shè)計”。

產(chǎn)品需求管理與設(shè)計

ui設(shè)計分享達(dá)人

1. 需求定義

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

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

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

2. 名詞解釋

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

3. 面向?qū)ο?/strong>

開發(fā)、設(shè)計師、測試、老板、項目經(jīng)理、產(chǎn)品經(jīng)理、運營、市場、銷售、客戶、財務(wù)等其他角色。

4. 輸出物

文檔:Word、ppt

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

5. 產(chǎn)品需求文檔結(jié)構(gòu)

命名和編號

修訂記錄

背景分析(產(chǎn)品背景、行業(yè)背景、國家政策)

需求分析

用戶定位

產(chǎn)品目標(biāo)

總體架構(gòu)(技術(shù)架構(gòu)、功能架構(gòu))

業(yè)務(wù)流程

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

產(chǎn)品特色

產(chǎn)品模塊清單

產(chǎn)品適配清單(支持的瀏覽器、數(shù)據(jù)庫、中間件、操作系統(tǒng))

6. 需求分析原則及方法

6.1. 產(chǎn)品需求的三個層次

基礎(chǔ)性需求、期望性需求、興奮性需求

6.2. 馬斯洛需求五個層次

生理需求、安全需求、社交需求、尊重需求、自我實現(xiàn)

6.3. 需求管理的四個環(huán)節(jié)

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

6.4. 需求分析四象限

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

7. 需求分析及產(chǎn)出

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

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

 

 

7.1. 明確問題

7.1.1. 需求收集渠道

 

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

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

 

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

 

7.1.2. 拆解需求

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

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

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

? 否定層面:通??梢圆鸾?,即使不做什么,依然可以產(chǎn)生好的結(jié)果。

? 轉(zhuǎn)移層面:轉(zhuǎn)移指的是不直接單獨解決當(dāng)前用戶的問題,通過轉(zhuǎn)移法,用戶轉(zhuǎn)移、問題轉(zhuǎn)移等。

? 拆解:把當(dāng)前問題刨根問底的拆,挖掘更多的可能性、找到問題本質(zhì)。

? 腦洞:這個更多的靠靈感、經(jīng)驗等進(jìn)行頭腦風(fēng)暴,補充其他維度考慮不到的地方。

7.1.3. 需求管理

7.1.3.1. Kano模型

 

Kano模型是對用戶需求分類和優(yōu)先排序的工具,以分析用戶需求對用戶滿意的影響為基礎(chǔ),體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關(guān)系。

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

 

7.1.3.2. 時間管理四象限法

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

本方法的優(yōu)勢可以評估產(chǎn)品開發(fā)的時間優(yōu)先級,對于一些重要且緊急的功能開發(fā)能夠做到心中有數(shù)。

7.1.3.3. ICE排序法

ICE排序法是一種比較嚴(yán)謹(jǐn)科學(xué)的分析需求的方法,通過幾個幾個維度給需求進(jìn)行相應(yīng)的打分,以總分的高低去排序。

I(Impact):影響范圍。

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

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

7.1.4. 需求輸出

7.1.4.1. 輸出內(nèi)容

思維導(dǎo)圖、業(yè)務(wù)流程圖、原型圖、需求說明文檔、功能說明文檔等

7.1.4.2. 輸出角色

業(yè)務(wù)人員、技術(shù)經(jīng)理、后端技術(shù)人員、前端技術(shù)人員、UI、UE人員

7.1.4.3. 溝通樣例

(一)業(yè)務(wù)人員

面對業(yè)務(wù)人員,主要是講產(chǎn)品功能實現(xiàn)和重點業(yè)務(wù)流程,主要依靠思維導(dǎo)圖或者原型圖去講解產(chǎn)品可帶來的價值和解決了什么樣的問題。

(二)后端開發(fā)人員

面對后端開發(fā)人員需要給技術(shù)經(jīng)理協(xié)調(diào)和溝通,確定的項有數(shù)據(jù)庫怎么寫,字段(數(shù)據(jù)結(jié)構(gòu))怎么定義,最后生成什么樣的表,當(dāng)用戶進(jìn)行相關(guān)業(yè)務(wù)操作時(增刪改查),怎么去設(shè)計接口,接口設(shè)計對應(yīng)數(shù)據(jù)庫,先調(diào)用什么樣的接口,傳輸什么樣的參數(shù),返回什么樣的結(jié)果。進(jìn)行前端解析,后臺數(shù)據(jù)圖形化,最后呈現(xiàn)給業(yè)務(wù)用戶。

(三)UI、UE人員

面試UI、UE人員從行業(yè)特征、用戶群體特征、用戶習(xí)慣等方面來確定產(chǎn)品視覺和交互形式。

(四)前端開發(fā)人員

通過評審后的UI設(shè)計稿交付給前端人員,進(jìn)行前端頁面的開發(fā)。

(五)測試人員

面對測試人員,跟進(jìn)產(chǎn)品測試情況,提供產(chǎn)品需求文檔和原型圖及UI設(shè)計圖,編寫測試用例,把控測試時間,協(xié)調(diào)相關(guān)資源,保證產(chǎn)品順利產(chǎn)出。

8. 產(chǎn)品迭代規(guī)劃與需求跟進(jìn)

8.1. 產(chǎn)品全生命周期規(guī)劃

根據(jù)產(chǎn)品規(guī)劃的全生命周期,確實不同階段需求的落地情況,根據(jù)用戶對于需求的滿足情況。

8.2. 業(yè)務(wù)流程分析

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

8.3. 新需求管理

通過產(chǎn)品的不斷使用,收集和接收不同的新需求,并定期開展新需求評審,逐步完善到產(chǎn)品里面,以最小調(diào)整為基線確定新需求的開發(fā)計劃,保證產(chǎn)品總規(guī)劃的穩(wěn)步實施。

8.4. 里程碑管理

把控整體產(chǎn)品里程碑管理,確保產(chǎn)品迭代重大節(jié)點變化能夠有理有據(jù),為產(chǎn)品的營銷工作,提供支持??偨Y(jié)產(chǎn)品優(yōu)勢和產(chǎn)品亮點,對產(chǎn)品的銷售情況負(fù)責(zé)。

原文地址:站酷
作者:Lyion

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

如何運用情緒板定義視覺風(fēng)格?

ui設(shè)計分享達(dá)人

前言 

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

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

因此,學(xué)會如何定義視覺風(fēng)格,是每個設(shè)計師都需要去學(xué)習(xí)并且加以運用的。 

什么是情緒板? 

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

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




情緒板的作用?


情緒板能夠更加幫助設(shè)計師與業(yè)務(wù)方達(dá)成設(shè)計共識,并且能夠幫助設(shè)計師定義視覺風(fēng)格與找到設(shè)計方向,使設(shè)計更加合理,為產(chǎn)品賦能。


如何運用情緒板定義視覺風(fēng)格


情緒板的制作流程


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


1、明確原生關(guān)鍵詞


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


2、挖掘衍生關(guān)鍵詞


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

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


3、搜索關(guān)鍵詞圖片


確定完關(guān)鍵詞后,可在pinterest、花瓣等設(shè)計網(wǎng)站上建立情緒板圖庫,按照人,事,物,形、色、字、構(gòu)、質(zhì)等方向收集大量的對應(yīng)圖片素材來匹配關(guān)鍵詞。


4、建立情緒板


對應(yīng)每個關(guān)鍵詞,從情緒板圖庫中提取高質(zhì)量能夠代表關(guān)鍵詞意思的人,事,物,形、色、字、構(gòu)、質(zhì)去展示,以此喚醒用戶對關(guān)鍵詞情緒體驗。


5、提取視覺風(fēng)格準(zhǔn)則


根據(jù)情緒板圖庫中的圖片提取出視覺風(fēng)格準(zhǔn)則,包含:圖形、顏色、質(zhì)感、構(gòu)成、字體等視覺風(fēng)格準(zhǔn)則。



舉個案例說明:


明確原生關(guān)鍵詞


討論原生關(guān)鍵詞


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



確定原生關(guān)鍵詞


從討論的關(guān)鍵詞中提取3-5個最適合的關(guān)鍵詞。



2、挖掘衍生關(guān)鍵詞


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



3、搜索關(guān)鍵詞圖片


確定完關(guān)鍵詞后,可在pinterest、花瓣等設(shè)計網(wǎng)站上建立情緒板圖庫,按照人,事,物,形、色、字、構(gòu)、質(zhì)等方向收集大量的對應(yīng)圖片素材來匹配關(guān)鍵詞。



4、建立情緒板


對應(yīng)每個關(guān)鍵詞,從情緒板圖庫中提取高質(zhì)量能夠代表關(guān)鍵詞意思的人,事,物,形、色、字、構(gòu)、質(zhì)去展示,以此喚醒用戶對關(guān)鍵詞情緒體驗。


5、提取視覺風(fēng)格準(zhǔn)則


根據(jù)情緒板圖庫中的圖片提取出視覺風(fēng)格準(zhǔn)則,包含:圖形、顏色、質(zhì)感、構(gòu)成、字體等視覺風(fēng)格準(zhǔn)則。




總結(jié)


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


以上內(nèi)容,是學(xué)習(xí)如何定義視覺風(fēng)格的其中一種方法,希望對大家有所幫助,如有不同意見,歡迎指正!


圖片版權(quán)歸原作者所有

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

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


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

ui設(shè)計分享達(dá)人

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


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

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

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


綜合起來SVG優(yōu)勢如下:


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

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

  3. SVG 可隨意縮放

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

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

  6. SVG 可以與 JavaScript 技術(shù)一起運行

  7. SVG 是開放的標(biāo)準(zhǔn)

  8. SVG 文件是純粹的 XML

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



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


如制作一個loading動畫

制作要點:

  1. 創(chuàng)建2個圓形,一個底色(淺灰色)一個旋轉(zhuǎn)的圓圈(藍(lán)色)

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

3. 設(shè)置Stroke Dash Array后,開始旋轉(zhuǎn)圓圈的長度,我設(shè)置了400,大家可以根據(jù)自己的需要進(jìn)行個性化設(shè)置

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

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

完成后效果

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


loading動畫進(jìn)階教程

先看最終效果

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

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

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

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

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


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

下面的動畫主要使用x軸縮放功能實現(xiàn)的交互,當(dāng)然也可以使用Stroke Dash Offset參數(shù)實現(xiàn)動畫效果。

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

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

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


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



原文地址:站酷
作者:Snmendala

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

如何通過實驗來驗證設(shè)計結(jié)果?關(guān)于B端產(chǎn)品「屏效提升」的實驗研究

ui設(shè)計分享達(dá)人

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





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



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

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

簡單實用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計

seo達(dá)人


一、地圖組件的四種類型

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

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

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

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

只有當(dāng)氣泡內(nèi)容能顯著提升用戶體驗時,才使用這種類型。

 

二、地圖組件的視覺樣式

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

 

1、顏色

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

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

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

 

三、組件可用性指南

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

 

2、密度

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

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

 

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

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

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

 

四、總結(jié)–點擊即導(dǎo)航

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

 

原文地址:Medium

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

作者:Linzi Berry

譯者:Clippp

 

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》簡單實用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



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

seo達(dá)人


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

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

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

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

「超大字體家族」最大的優(yōu)勢在于,它是已經(jīng)被驗證過的優(yōu)質(zhì)組合,用的時候不用擔(dān)心~

 

 2.減小標(biāo)題文本字間距,視覺平衡更好

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

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

 

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

當(dāng)你想讓整體排版的節(jié)奏感足夠好的時候,有必要針對性地重新調(diào)整行間距和段間距。

你需要根據(jù)靠近原則,讓相互關(guān)聯(lián)的標(biāo)題和正文之間的段間距更加靠近一點,讓不相關(guān)的內(nèi)容塊互相之間分開,間距拉遠(yuǎn),從而自然而然地進(jìn)行區(qū)分。

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

 

4.如果標(biāo)題很短,可以試著使用全部大寫

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

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

相應(yīng)的,在使用全大寫的短標(biāo)題當(dāng)中,適當(dāng)?shù)乩_字間距,能夠增加呼吸感,降低壓迫感。

 

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

如果可以的話,標(biāo)題盡量簡短有力一些。

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

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

當(dāng)然,這樣的文案設(shè)計技巧是需要根據(jù)行業(yè)和領(lǐng)域進(jìn)行優(yōu)化的,這個方法并不適用于全部領(lǐng)域。

 

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

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

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

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

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

 

7.選擇貼合設(shè)計風(fēng)格和氣質(zhì)的字體

不同的字體有不同的風(fēng)格。有的字體粗壯有力,有的柔和自然,有的現(xiàn)代而規(guī)整,有的友好而舒適,有的則有趣且俏皮,等等等等。

每種字體都有不同的氣質(zhì),你需要把握字體的氣質(zhì)特征,有意識地總結(jié)這些屬性,當(dāng)你在應(yīng)對不同的設(shè)計項目的時候,能夠快速找到氣質(zhì)貼合的字體。

這似乎是一項艱巨的任務(wù),但是從長遠(yuǎn)來看,能夠幫你更快地搞定各種設(shè)計問題。

 

結(jié)語

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

 

原文地址:marcandrew.me

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

作者:Marc Andrew

譯者:terechen

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》這7個小技巧快速幫你改善UI界面

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



智慧工地上的阿里云數(shù)字設(shè)計

seo達(dá)人


為什么是工地?

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

為什么是工地?

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

過去數(shù)十年,讓整個中國變成一個大工地,而現(xiàn)在這個大工地,正一步步完成數(shù)字化轉(zhuǎn)型。

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

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

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

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

 

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

傳統(tǒng)的建筑模型生產(chǎn)嚴(yán)重依賴人工建模,高成本且難以規(guī)?;6鳥IM建筑信息模型(Building Information Modeling),通過人工智能與計算機算法將CAD施工文件進(jìn)行解析,并智能生成1:1高還原度的3D建筑模型, 為智慧城市等創(chuàng)新與數(shù)字管理產(chǎn)品提供更智能的模型來源。
在智慧工地中我們率先使用阿里云AI LAB的BIM技術(shù)生成工地的主樓宇模型。

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

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

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

— 智慧工地通過GDS生成的3D場景線框與高性能表現(xiàn)的低面節(jié)點數(shù)

 

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

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

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

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

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

 

— GDS解析不同數(shù)據(jù),對應(yīng)生成不同3D場景。無需人工建模、大量提效

 

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

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

— 實時數(shù)據(jù)聯(lián)動施工進(jìn)度演示

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

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

— 傳感器設(shè)備在3D場景中通過坐標(biāo)換算進(jìn)行掛載

THE SMART

CONSTRUCTION SITE

BY ALIBABA CLOUD

TECHNOLOGY

 

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

 

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

 

我們?yōu)槭裁磸脑O(shè)計出發(fā),卻要不斷突破邊界,去追求技術(shù)、性能和設(shè)計表達(dá)上的極限平衡呢?

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

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

 

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

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

目前阿里云A組空間智能智慧工地AI服務(wù)平臺已經(jīng)成功落地阿里內(nèi)外多個項目,并被10家以上智慧工地集成服務(wù)商集成,正面向全國各地的工地進(jìn)行全面應(yīng)用,驅(qū)動傳統(tǒng)行業(yè)數(shù)智化。我們希望設(shè)計能力的植入,能為行業(yè)提供一套標(biāo)準(zhǔn)化的三維場景搭建方案,縮短項目開發(fā)時間,保證高復(fù)用性,并借助生態(tài)伙伴的力量,真正實現(xiàn)規(guī)?;闹腔酃さ禺a(chǎn)品。

所以,為什么是工地?

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

 

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

作者:阿里云設(shè)計中心


轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》智慧工地上的阿里云數(shù)字設(shè)計

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



日歷

鏈接

個人資料

存檔