首頁

萬物皆可異質(zhì)同構(gòu)

seo達(dá)人



很多人做的設(shè)計過于平庸,主要原因是圖形部分太常規(guī),比如單純以產(chǎn)品圖片、人物圖片、某個元素或者是一幅普通插畫作品作為畫面的圖形。這類圖形缺少變化、缺少視覺沖突,所以很難有眼前一亮的感覺,也很難讓人產(chǎn)生興趣。而有一個簡單的技巧,可以輕松解決這一問題,即異質(zhì)同構(gòu)。

圖片

圖片

圖片

圖片

圖片

這個技巧大家肯定不陌生,這樣的作品比比皆是,但是對于該技巧的使用還是有很多講究的,首先,從設(shè)計的形式上來看,異質(zhì)同構(gòu)主要分為三種形式:

 

1.置換材質(zhì)

即只保留一個事物原本的造型,而其材質(zhì)用另一類元素進(jìn)行置換,比如水材質(zhì)的面膜、牛奶材質(zhì)的人、云材質(zhì)的鞋子等等。

圖片

▲用水材質(zhì)替換面膜原本的材質(zhì),以表達(dá)面膜的補水功能。

圖片

▲把正在打籃球的小男孩做成牛奶材質(zhì),以表達(dá)該牛奶可以促進(jìn)兒童健康發(fā)育、補鈣等訴求。

圖片

▲把鞋子做成云的質(zhì)感,以表達(dá)該鞋子輕盈、舒適的賣點。

常見的材質(zhì)有金、木、水、土、玻璃、皮、塑料、紙等等,如果通過材質(zhì)就能識別出某些產(chǎn)品或者素材,那么就具備了使用這一技巧的基本條件。

圖片

▲把甜菜置換成甜菜汁材質(zhì),表達(dá)了榨汁機超強的榨汁功能。

圖片

▲把腿的材質(zhì)換成仙人掌,腿毛則變成了仙人掌上的刺,表達(dá)了刮毛器超強的刮毛功能。

另外,想要置換材質(zhì)的效果很好,那么對設(shè)計師的執(zhí)行能力要求比較高,通常是通過合成或者3D渲染來完成。

圖片

圖片

 

2.組合堆積

即按照事物B的造型,用數(shù)量眾多的事物A來進(jìn)行有序的排列組合或者是堆積,比如把塑料瓶堆積成一座小雪山,用葡萄堆出一瓶果汁,用蔬菜組成一個漢堡等等。

圖片

▲用塑料瓶堆積出來的雪山裝置,用以號召大家不要亂扔垃圾。

圖片

▲真實的葡萄被設(shè)計成了一瓶果汁的形狀,以表達(dá)該果汁真材實料、健康之類的的訴求。

圖片

▲用純蔬菜堆出兩個漢堡,以表達(dá)蔬菜漢堡這一訴求。

在做堆積或者組合時,首先要能保證元素A與B的識別性,另外元素的排列要有序,而不是胡亂堆砌,要注意圖形的美感和質(zhì)感。

圖片

▲用樹葉、鮮花組合成“肺”的造型,以表達(dá)該椰汁可以給你帶來由內(nèi)而外的美好感受。

圖片

▲鮮紅的心臟細(xì)看卻是用拳擊手套組成,創(chuàng)意概念是:為生命而戰(zhàn)。

圖片

▲用“提子”組成的飲料瓶子,以表達(dá)該果汁原滋原味的訴求。

圖片

▲用蘑菇以及手動加工的工具、配料等元素組合成蘑菇的造型,表達(dá)了該產(chǎn)品真材實料、純手工制作、品質(zhì)絕佳等訴求。

 

3.質(zhì)感對比

即把某一事物的局部置換成符合原有造型,但質(zhì)感不同的另一種或另幾種事物,以形成鮮明的對比效果,比如上本身是男人、下半身是女人,左邊是汽車、右邊是滑滑梯,一邊是導(dǎo)彈、一邊是鉛筆等等。

圖片

▲把男士維修工人的上半身與女芭蕾舞者的下半身結(jié)合起來,以表達(dá)捐獻(xiàn)器官可以讓你擁有兩次不同人生的訴求,這是一個器官捐獻(xiàn)組織的公益廣告,畫風(fēng)奇特的畫面很有視覺沖擊力。

圖片

▲把汽車的前半截置換成滑滑梯,以傳達(dá)清潔汽車的引擎,可以讓你的旅途更愉快。

圖片

▲把導(dǎo)彈的前半部分用鉛筆的筆尖替代,以表達(dá)語言可以消滅戰(zhàn)爭的訴求。

質(zhì)感對比的做法有兩種形式,一種是對稱圖形,即左右兩個不同材質(zhì)的元素在造型上是相同或相似的,組合起來又是一個整體。

圖片

▲ 左邊是在荒漠里的仙人掌材質(zhì)沙發(fā),右邊是在云層之巔的真實沙發(fā),其實只是有沒有空調(diào)的區(qū)別。

圖片

▲ 把左右兩個不同的餅組合成一個餅,只為告訴消費者,本店推出了兩個新品。

圖片

▲ 把燈泡圖形的左邊置換成大腦圖形,以表達(dá)點亮創(chuàng)意的概念。

另一種是非對稱圖形,即圖片中的幾個部分組合在一起剛好是一個完整的圖形,它們各自完成圖形的某一個部分,造型上并不相同。

圖片

▲ 把釣起的魚浸在水里的部分置換成海洋垃圾,號召大家要愛護(hù)海洋,減少對海洋的污染。

圖片

▲ 上圖看似是一個正在飛奔的運動員,實則是由摔跤、跑步、擊劍、足球四張運動圖片組成,把多項奧運項目完美地結(jié)合起來。

圖片

▲ 上半部分為巴西里約的耶穌像,下半部分為美國紐約的自由女神像,二者結(jié)合起來也相似一個完整的雕像,中間的分割線被設(shè)計成飛機的輪廓形狀,巧妙地表達(dá)出該航空公司“速度快”的訴求。

 

圖片

異質(zhì)同構(gòu)雖然是一個挺不錯的圖形設(shè)計技巧,但如果所用的素材、組合的方式、構(gòu)圖太過常規(guī),那么做出來的作品還是會很普通,所以我們要盡量做出一些改變,嘗試一些新的素材、新的組合方式、新的風(fēng)格、新的創(chuàng)意概念,才能真正做出讓人眼前一亮的效果。

 

原文地址:蔥爺(公眾號)

作者:蔥爺

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》萬物皆可異質(zhì)同構(gòu)

藍(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è)計sillybuy.com )是一家專注而深入的界面設(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è)計公司



萬物皆可異質(zhì)同構(gòu)

seo達(dá)人



很多人做的設(shè)計過于平庸,主要原因是圖形部分太常規(guī),比如單純以產(chǎn)品圖片、人物圖片、某個元素或者是一幅普通插畫作品作為畫面的圖形。這類圖形缺少變化、缺少視覺沖突,所以很難有眼前一亮的感覺,也很難讓人產(chǎn)生興趣。而有一個簡單的技巧,可以輕松解決這一問題,即異質(zhì)同構(gòu)。

圖片

圖片

圖片

圖片

圖片

這個技巧大家肯定不陌生,這樣的作品比比皆是,但是對于該技巧的使用還是有很多講究的,首先,從設(shè)計的形式上來看,異質(zhì)同構(gòu)主要分為三種形式:

 

1.置換材質(zhì)

即只保留一個事物原本的造型,而其材質(zhì)用另一類元素進(jìn)行置換,比如水材質(zhì)的面膜、牛奶材質(zhì)的人、云材質(zhì)的鞋子等等。

圖片

▲用水材質(zhì)替換面膜原本的材質(zhì),以表達(dá)面膜的補水功能。


圖片

▲把正在打籃球的小男孩做成牛奶材質(zhì),以表達(dá)該牛奶可以促進(jìn)兒童健康發(fā)育、補鈣等訴求。


圖片

▲把鞋子做成云的質(zhì)感,以表達(dá)該鞋子輕盈、舒適的賣點。

常見的材質(zhì)有金、木、水、土、玻璃、皮、塑料、紙等等,如果通過材質(zhì)就能識別出某些產(chǎn)品或者素材,那么就具備了使用這一技巧的基本條件。

圖片

▲把甜菜置換成甜菜汁材質(zhì),表達(dá)了榨汁機超強的榨汁功能。

圖片

▲把腿的材質(zhì)換成仙人掌,腿毛則變成了仙人掌上的刺,表達(dá)了刮毛器超強的刮毛功能。

另外,想要置換材質(zhì)的效果很好,那么對設(shè)計師的執(zhí)行能力要求比較高,通常是通過合成或者3D渲染來完成。

圖片

圖片

 

2.組合堆積

即按照事物B的造型,用數(shù)量眾多的事物A來進(jìn)行有序的排列組合或者是堆積,比如把塑料瓶堆積成一座小雪山,用葡萄堆出一瓶果汁,用蔬菜組成一個漢堡等等。

圖片

▲用塑料瓶堆積出來的雪山裝置,用以號召大家不要亂扔垃圾。


圖片

▲真實的葡萄被設(shè)計成了一瓶果汁的形狀,以表達(dá)該果汁真材實料、健康之類的的訴求。


圖片

▲用純蔬菜堆出兩個漢堡,以表達(dá)蔬菜漢堡這一訴求。

在做堆積或者組合時,首先要能保證元素A與B的識別性,另外元素的排列要有序,而不是胡亂堆砌,要注意圖形的美感和質(zhì)感。

圖片

▲用樹葉、鮮花組合成“肺”的造型,以表達(dá)該椰汁可以給你帶來由內(nèi)而外的美好感受。


圖片

▲鮮紅的心臟細(xì)看卻是用拳擊手套組成,創(chuàng)意概念是:為生命而戰(zhàn)。

圖片

▲用“提子”組成的飲料瓶子,以表達(dá)該果汁原滋原味的訴求。


圖片

▲用蘑菇以及手動加工的工具、配料等元素組合成蘑菇的造型,表達(dá)了該產(chǎn)品真材實料、純手工制作、品質(zhì)絕佳等訴求。

 

3.質(zhì)感對比

即把某一事物的局部置換成符合原有造型,但質(zhì)感不同的另一種或另幾種事物,以形成鮮明的對比效果,比如上本身是男人、下半身是女人,左邊是汽車、右邊是滑滑梯,一邊是導(dǎo)彈、一邊是鉛筆等等。

圖片

▲把男士維修工人的上半身與女芭蕾舞者的下半身結(jié)合起來,以表達(dá)捐獻(xiàn)器官可以讓你擁有兩次不同人生的訴求,這是一個器官捐獻(xiàn)組織的公益廣告,畫風(fēng)奇特的畫面很有視覺沖擊力。

圖片

▲把汽車的前半截置換成滑滑梯,以傳達(dá)清潔汽車的引擎,可以讓你的旅途更愉快。


圖片

▲把導(dǎo)彈的前半部分用鉛筆的筆尖替代,以表達(dá)語言可以消滅戰(zhàn)爭的訴求。

質(zhì)感對比的做法有兩種形式,一種是對稱圖形,即左右兩個不同材質(zhì)的元素在造型上是相同或相似的,組合起來又是一個整體。

圖片

▲ 左邊是在荒漠里的仙人掌材質(zhì)沙發(fā),右邊是在云層之巔的真實沙發(fā),其實只是有沒有空調(diào)的區(qū)別。


圖片

▲ 把左右兩個不同的餅組合成一個餅,只為告訴消費者,本店推出了兩個新品。


圖片

▲ 把燈泡圖形的左邊置換成大腦圖形,以表達(dá)點亮創(chuàng)意的概念。

另一種是非對稱圖形,即圖片中的幾個部分組合在一起剛好是一個完整的圖形,它們各自完成圖形的某一個部分,造型上并不相同。

圖片

▲ 把釣起的魚浸在水里的部分置換成海洋垃圾,號召大家要愛護(hù)海洋,減少對海洋的污染。

圖片

▲ 上圖看似是一個正在飛奔的運動員,實則是由摔跤、跑步、擊劍、足球四張運動圖片組成,把多項奧運項目完美地結(jié)合起來。


圖片

▲ 上半部分為巴西里約的耶穌像,下半部分為美國紐約的自由女神像,二者結(jié)合起來也相似一個完整的雕像,中間的分割線被設(shè)計成飛機的輪廓形狀,巧妙地表達(dá)出該航空公司“速度快”的訴求。

 

圖片

異質(zhì)同構(gòu)雖然是一個挺不錯的圖形設(shè)計技巧,但如果所用的素材、組合的方式、構(gòu)圖太過常規(guī),那么做出來的作品還是會很普通,所以我們要盡量做出一些改變,嘗試一些新的素材、新的組合方式、新的風(fēng)格、新的創(chuàng)意概念,才能真正做出讓人眼前一亮的效果。

 

原文地址:蔥爺(公眾號)

作者:蔥爺

轉(zhuǎn)載請注明:學(xué)UI網(wǎng) ?萬物皆可異質(zhì)同構(gòu)

藍(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è)計sillybuy.com )是一家專注而深入的界面設(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è)計公司


復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?

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

具有大量庫存商品,或是涉及復(fù)雜產(chǎn)品的網(wǎng)站,通常會提供產(chǎn)品類別頁面,或者是產(chǎn)品列表頁面。 類別頁面就像是特定產(chǎn)品類別的主頁。他們可能不提供完整的產(chǎn)品列表,但可能會展示一些產(chǎn)品并提供產(chǎn)品子類別的鏈接。這種頁面本質(zhì)上是用戶在進(jìn)入產(chǎn)品列表頁面的過程中經(jīng)過的一個中間步驟,讓用戶不用一下子面對海量的分類信息。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

Eddie Bauer 在其全局導(dǎo)航中, WOMEN 鏈接將用戶帶到了這個傳統(tǒng)的類別頁面。這些頁面通常包含產(chǎn)品照片和營銷內(nèi)容,以及促銷子類別(例如SHOP FLANNEL 和 SHOP FLEECE )的鏈接。

類別頁面通常提供以下組合:

  • 類別的描述、解釋及其包含的內(nèi)容
  • 帶有描述和代表性圖像的子類別菜單
  • 推銷該類別中的特色產(chǎn)品

并非所有產(chǎn)品都需要專門的類別頁面。 不過這種情況有時候會讓用戶非常惱火,因為用戶需要通過額外的步驟才能查看特定類別的產(chǎn)品。

許多網(wǎng)站完全省略了類別頁面,而是將用戶直接引導(dǎo)到產(chǎn)品列表頁面,在那里他們可以借助過濾篩選的方式來瀏覽產(chǎn)品。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

Bonobos 網(wǎng)站上的 Pants & Jeans 鏈接不是類別頁面,而是將用戶直接帶到產(chǎn)品的列表頁面。這種方法通常效果很好,因為它盡快向客戶展示了他們可選的選擇。

雖然本文偏向于電商網(wǎng)站中的類別頁面的探討,但實際上這些頁面也用于其他類型的網(wǎng)站,特別是新聞資訊和教育類的網(wǎng)站。這些建議也可能適用于這些情況,但最好根據(jù)領(lǐng)域?qū)δ愕脑O(shè)計進(jìn)行測試,以防你的用戶需求與購物型用戶的需求不同。

何時使用類別頁面

如果您的電商網(wǎng)站所涉及的產(chǎn)品非常復(fù)雜,以至于您的許多客戶需要經(jīng)過學(xué)習(xí)之后才會使用,才能正確地過濾和比較產(chǎn)品,那么類別頁面就是一個好主意了 。此外,具有 大類別和大量子類別的網(wǎng)站,有時會提供某種類型的獨立類別頁面,以幫助用戶找到有意義的起點。

不過,你可以決定讓特定的產(chǎn)品具有類別頁面,而其他的則不具有獨立的類別頁面。例如,Lululemon 主打的健身服裝產(chǎn)品(大多不需要分類頁面),同時也銷售一種名為 MIRROR 的昂貴的家庭健身產(chǎn)品,后者需要更詳細(xì)的解釋,因此有自己的分類頁面。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

Lululemon 為其復(fù)雜的家庭健身產(chǎn)品 MIRROR 提供了一個單獨的類別頁面,但并未為其所有產(chǎn)品類別使用類別頁面。

闡釋復(fù)雜產(chǎn)品

類別頁面可以對電子產(chǎn)品等復(fù)雜產(chǎn)品起到解釋作用 。如果用戶還不了解產(chǎn)品選項,他們可能還沒有準(zhǔn)備好單擊單個產(chǎn)品。與隨機點擊不同的產(chǎn)品相比,類別頁面為他們提供了一種更有效地了解各種潛在相關(guān)產(chǎn)品功能的途徑。

例如,智能手表通常會有不同的功能和價格范圍,著名智能手表品牌 Fossil 在自己的網(wǎng)站提供了一個類別頁面,列出了不同類型的智能手表,并提供「立即購買」、「了解更多」 以及「比較」的選項。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

Fossil 的 智能手表分類頁面解釋了不同型號的智能手表的功能和性能差異

子類別的特征

購物型用戶可能不需要通過網(wǎng)站來學(xué)習(xí)服裝或食品等熟悉商品的內(nèi)容和知識。然而,一個擁有大量產(chǎn)品和內(nèi)容,并組織成許多子類別的網(wǎng)站,仍然可以從類別頁面中受益——尤其當(dāng)子類別頁面可以通過獨特的圖文清楚地介紹產(chǎn)品的時候。這比一長串標(biāo)簽文本更容易方便用戶了解產(chǎn)品,此外它還可以為國外的購物者提供幫助。

REI 銷售用于各種戶外活動的許多產(chǎn)品,從皮劃艇到登山用具。如果點擊網(wǎng)站的全局導(dǎo)航中Camp & Hike 鏈接之后,頁面跳轉(zhuǎn)到一個包含所有露營產(chǎn)品的列表面,用戶可能會不知所措,而且無趣。相反,REI 讓鏈接指向到一個傳統(tǒng)的類別頁面,而不是列表,這個頁面包括:

  • 子類別 (帳篷, 睡袋 , 遠(yuǎn)足)
  • 該類別中最受歡迎的品牌(Osprey、YETI)
  • 與類別相關(guān)的季節(jié)性信息(寒冷天氣徒步旅行)
  • 建議(如何選擇睡墊、食物儲存和處理的技巧)

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

REI 使用傳統(tǒng)的類別頁面來幫助購物者在龐大的 Camp & Hike 類別中找到適合自己的產(chǎn)品。

不要強迫客戶瀏覽類別頁面

如果你的網(wǎng)站確實提供了傳統(tǒng)的類別頁面,請同樣為用戶提供了避免進(jìn)入這些頁面的簡單方法,并在他們愿意時,也能直接轉(zhuǎn)到產(chǎn)品列表頁面。為你的站點的全局導(dǎo)航,提供指向子類別產(chǎn)品的列表頁面(比如使用超大導(dǎo)航 Megamenu ),以及指向傳統(tǒng)類別頁面的鏈接。

可能還需要確保搜索結(jié)果始終指向產(chǎn)品選項,而不是將購物者引導(dǎo)到類別頁面。在我們的研究中,Zappos 會將某些搜索結(jié)果指向到以品牌為中心的類別頁面,而不是鏈接到該品牌的產(chǎn)品。

在用戶測試的時候,一位參與者看到孩子后很生氣,因為搜索她最喜歡的品牌 Sam Edelman 時,她進(jìn)入了一個具有促銷感的傳統(tǒng)類別頁面,而不是指向她要的產(chǎn)品。對她來說,這感覺像是一個不必要的額外步驟。

「當(dāng)我進(jìn)入 Sam Edelman 時,我想看到結(jié)果。我不希望打開一個品牌的分類頁面。」

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

當(dāng)用戶在 Zappos.com 上搜索「sam edelman」時,她很惱火地看到一個沒有列出任何單個產(chǎn)品的品牌類別頁面。

當(dāng)用戶搜索時,他們希望立即看到結(jié)果。

混合:在產(chǎn)品列表頁面上提供類別信息 

為了避免傳統(tǒng)的類別頁面的缺陷,并提供對產(chǎn)品列表的快速訪問,許多電商網(wǎng)站現(xiàn)在在主產(chǎn)品列表頁面中,結(jié)合混用了少量的類別有頁面的設(shè)計——例如簡短的描述性內(nèi)容,或簡短的子類別菜單。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

在女士緊身褲 產(chǎn)品列表頁面上,Lululemon 包含了一些傳統(tǒng)會在類別頁面上顯示的元素:營銷內(nèi)容(藍(lán)綠色框標(biāo)注的區(qū)域)和對不同緊身褲樣式的解釋,以及指向這些子類別的鏈接(以黃色框標(biāo)注的區(qū)域)。

這種混合呈現(xiàn)方法效果很好,因為對描述或子類別菜單感興趣的用戶可以暫停并閱讀它,而不感興趣的用戶可以簡單地跳過,直接快速訪問實際的產(chǎn)品列表。

說明內(nèi)容

一些電商網(wǎng)站在 產(chǎn)品 Banner 旁邊加入營銷的內(nèi)容和元素,這些元素傳達(dá)有用的信息而不會減慢用戶的速度,就像傳統(tǒng)的類別頁面一樣。

高級珠寶零售商 VRAI 使用混合式設(shè)計,在一些產(chǎn)品列表頁面中包含類別頁面樣式元素。它的一個產(chǎn)品列表頁面當(dāng)中,圓形訂婚戒指頁面中,包含了帶有價格的產(chǎn)品列表,以及解釋性的內(nèi)容。頂部的文字描述了此類產(chǎn)品的一般特征。側(cè)面板提供了有關(guān)該類別中所有產(chǎn)品共有特征的說明,以及更多詳細(xì)信息。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

在這個列表頁面中,VRAI 包含了促銷內(nèi)容(以藍(lán)綠色框標(biāo)注)和說明性內(nèi)容(以黃色框標(biāo)注)。其中所呈現(xiàn)的圖文內(nèi)容是典型的傳統(tǒng)類別頁面的特征(沒有產(chǎn)品列表)。

子導(dǎo)航

一些零售類的網(wǎng)站不使用類別頁面,而是提供指向產(chǎn)品列表頁面上的子類別的導(dǎo)航鏈接。這些鏈接(這是最初發(fā)明類別頁面的原因之一)讓用戶輕松瀏覽網(wǎng)站的產(chǎn)品庫存。

例如,Ann Taylor 的 褲子 列表頁面顯示了不同款式褲子的類別,并提供指向該子類別的鏈接。這些內(nèi)容直接顯示在產(chǎn)品列表上方,幫助用戶了解可用類別項目,并且直接導(dǎo)航到這些類別。

復(fù)雜網(wǎng)站的導(dǎo)航模式要怎么設(shè)計才合理舒適?我總結(jié)了7個方面!

Ann Taylor 的網(wǎng)站在 褲子 的列表頁面的頂部,加入了不同褲子款式和合身度的說明和圖片,以便用戶了解其中的差異。

文章來源:優(yōu)設(shè)  作者:陳子木
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

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

老齡化社會已經(jīng)到來,如何讓中老年群體更好地使用互聯(lián)網(wǎng)產(chǎn)品是當(dāng)今的熱門話題。貓眼演出設(shè)計團隊負(fù)責(zé)的一個 B 端項目的使用人群需覆蓋到中老年用戶,也屬于適老化的涵蓋范疇。

在前期調(diào)研和設(shè)計環(huán)節(jié)中,我們收集了一些相關(guān)的文獻(xiàn)及案例,并且結(jié)合項目實踐有所思考和沉淀,在這里與大家分享。

普適的適老化設(shè)計理念

世界衛(wèi)生組織根據(jù)現(xiàn)代人生命狀況,提出了人生階段年齡的新劃分。45~59 歲為中年人;60~74 歲為年輕老年人;75~89 歲為老年人;90 歲以上為長壽老人。[1]

隨著年齡的增長,人們的身體機能、心理狀態(tài)、認(rèn)知能力等都會出現(xiàn)衰退的情況。

適老化設(shè)計是無障礙設(shè)計中的一種。無障礙設(shè)計于 1974 年由聯(lián)合國組織提出,設(shè)計中需要充分考慮具有不同程度生理傷殘缺陷者和正常活動能力衰退者(如殘疾人、老年人)的使用需求。[2]

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

目前互聯(lián)網(wǎng)產(chǎn)品中大多數(shù)的適老化設(shè)計,主要是集中在 C 端。針對不同障礙(視覺、肢體、聽覺、認(rèn)知障礙)[3],目前普適的適老化設(shè)計原則有:

1. “強烈“好于“柔和”

針對視覺障礙,常見做法有增大字體大小,使用非襯線體字體,提高顏色對比度等。

相比原版的 App,百度大字版 App 和支付寶長輩模式修改了 UI 界面,每個功能模塊都用了明亮的大色塊、加大字體的設(shè)計。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

2. 善用“輔助”和“替代”

針對聽覺障礙,常見的做法有通過視覺輔助,將聲音轉(zhuǎn)化成文字、擴大音量、降低語速等。

Google 安卓系統(tǒng)推出了 Live Caption 功能,可自動將手機上播放的內(nèi)容轉(zhuǎn)換成字幕。Live Transcribe-「Sound Notification 聲音通知」功能,可識別特定聲音(比如煙霧警報器、嬰兒啼哭、敲門聲等),并轉(zhuǎn)化成文字及視覺符號推送至手機,方便聽障用戶辨別生活當(dāng)中一些重要的聲音信號。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

3. “點擊”好于“滑動”

針對肢體障礙,減少頁面信息的密度,避免使用過小的按鈕以及復(fù)雜的交互手勢。

有研究表明,老年群體在操作時難以瞄準(zhǔn)物體,在瀏覽圖片時,由于視力衰退導(dǎo)致無法對焦,他們會不斷地用兩只手指放大/縮小并反復(fù)點擊屏幕。[4]

平安銀行 App 關(guān)懷模式采用卡片拼接的設(shè)計方式,將間距放大,保證每個信息有更大的展示空間,同時也放大按鈕點擊熱區(qū),提高操作的準(zhǔn)確率。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

4. “具象”好于“抽象”

針對認(rèn)知障礙,避免使用不易識別的圖標(biāo),盡可能配有圖標(biāo)或圖片,簡化信息內(nèi)容。

有研究表明,文字+圖標(biāo)為主的設(shè)計有助于提升老年新手用戶對新 ATM 使用的學(xué)習(xí)效率和記憶。[5]

滴滴 App 關(guān)懷模式針對老年人進(jìn)行功能精簡,滿足高優(yōu)先級核心訴求,首頁只放「一鍵打車」,操作簡單,大字、無廣告。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

B端產(chǎn)品引入適老化設(shè)計也值得深思

在很多行業(yè)中,中老年人因為擁有豐富的經(jīng)驗在崗位上更具競爭優(yōu)勢,譬如教師、醫(yī)生、律師、會計等職業(yè),工作年限長、經(jīng)驗足是優(yōu)勢,可以提供更好的服務(wù)。他們既會使用 C 端產(chǎn)品,也有使用 B 端產(chǎn)品的場景。

隨著時代變遷,2015 年世界衛(wèi)生組織提出了“健康老齡化”理念[6],倡導(dǎo)改變過去“老了就要退出社會生活”的消極認(rèn)識。

從“老有所依”到“老有所為”,很多的 B 端場景都覆蓋了中老年用戶,如何提升中老年用戶的辦公用戶體驗是重要課題。

另外我們看下 C 端與 B 端的主要差別:

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

C 端 App 中時常將簡單作為適老設(shè)計宣傳點。追求簡單有一部分原因是,C 端用戶是在自己的場域操作且?guī)缀鯚o時間壓力。而 B 端產(chǎn)品卻相反,業(yè)務(wù)邏輯復(fù)雜,用戶要長時間使用而且要求效率。B 端面向企業(yè)定制化,針對特定人群、情景,使得在適老化設(shè)計中要解決的問題更清晰。

適老化設(shè)計在POS中的應(yīng)用

留意生活中的零售行業(yè),如餐廳、商場、藥局、便利店的服務(wù)人員,往往能看到中老年人的身影。

POS 系統(tǒng)是 B 端場景中使用率最高的產(chǎn)品之一,POS 系統(tǒng)的英文全名為 Point of Sale,中文名為銷售時點信息系統(tǒng)。[7]它由硬件與軟件組成,根據(jù)產(chǎn)業(yè)和店面類型的不同,會有功能上的差異。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

最近團隊參與了一個改造 POS 系統(tǒng)的項目,使用人群覆蓋到了中老年用戶,提升他們的辦公用戶體驗是其中一個產(chǎn)品目標(biāo)。

本次項目主要是 POS 界面的更新,完整的 POS 體驗不僅有軟件本身,有更大的部分在于實體環(huán)境與設(shè)備,例如:結(jié)賬區(qū)的控件、店面的擺設(shè)、掃描槍,讀卡器等,而 POS 界面是連結(jié)上述元素的節(jié)點。

在對 POS 系統(tǒng)進(jìn)行改造時,我們是按照以下設(shè)計思路進(jìn)行的:

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

第 1 步:沿用舊系統(tǒng)規(guī)則與結(jié)構(gòu)

B 端系統(tǒng)背后往往由成熟的業(yè)務(wù)場景和復(fù)雜的業(yè)務(wù)邏輯構(gòu)成。B 端系統(tǒng)往往不是一個從 0-1 全新的系統(tǒng),而是存在一個被使用了很多年的系統(tǒng)。

在這種情況下,企業(yè)服務(wù)的每個用戶都是趨向于規(guī)避風(fēng)險的。人們可能已經(jīng)習(xí)慣了原有的解決方案(盡管不好用,但是大家都會用了),但新的方案如果不好用,他們的生產(chǎn)力反而會因為不知道如何使用新方案而降低。

這就意味著在做 B 端設(shè)計時,現(xiàn)行的方案會產(chǎn)生很大的習(xí)慣引力。

當(dāng)設(shè)計師要引入一個新方案時,取消或改變某些功能及操作行為將有難度,不能霸道性更改,取代需要合理性。

設(shè)計思路:

  1. 梳理業(yè)務(wù)邏輯和功能模塊:沿用舊系統(tǒng)規(guī)則與結(jié)構(gòu)。
  2. 制定框架:定穩(wěn)定一致、拓展性強的信息框架與導(dǎo)航欄。
  3. 統(tǒng)一專業(yè)術(shù)語:信息表達(dá)(文案)與原有系統(tǒng)盡可能保持一致。
  4. 遵從使用者習(xí)慣:原系統(tǒng)中可能存在一些不夠美觀或不合常理但卻實用的快捷入口及交互方式,可以整合優(yōu)化后進(jìn)行復(fù)用。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

第 2 步:理清主要用戶與使用場景

想要了解使用者的真實痛點,需從場景出發(fā)。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

第 3 步:用適老化設(shè)計原則去解決場景中的問題

POS 使用場景有很多,這里列舉 3 個常見的使用情境:

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

可能存在的障礙:無法聚焦信息內(nèi)容,難做到邊看屏幕邊與顧客交流。

設(shè)計目標(biāo):確保信息在復(fù)雜的環(huán)境中,信息內(nèi)容清晰可讀。

設(shè)計思路:

1. 放大信息內(nèi)容

服務(wù)至上,POS 使用者在工作時需保持端莊熱情的姿態(tài),不能只專注看 POS 屏幕信息而不顧顧客。

內(nèi)容大小的確立由設(shè)備分辨率、環(huán)境燈光、字體、視距等因素決定,在復(fù)雜的現(xiàn)場環(huán)境中,信息內(nèi)容要清晰易讀。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

2. 色彩對比度符合 WCAG 標(biāo)準(zhǔn)

參照 WCAG 有 AA 和 AAA 的對比度標(biāo)準(zhǔn),界面中的信息與其背景間的關(guān)系對比度至少在 4.5:1 之上,保證信息易讀性。

WCAG 全稱是 Web Content Accessibility Guidlines(網(wǎng)頁內(nèi)容無障礙指南)。這是一套由無障礙功能專家編輯的指南,有若干國家在其網(wǎng)絡(luò)無障礙功能法律要求中明令必須使用這些指南。[8]

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

一些設(shè)計插件可以幫助我們檢驗色彩對比度是否符合 WCAG 標(biāo)準(zhǔn),給大家推薦 2 款:Sketch 插件 Cluse,F(xiàn)igma 插件 A11y-Color Contast Checker。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

3. 設(shè)計有意義的動畫

通過動效來表達(dá)靜態(tài)視覺效果無法準(zhǔn)確傳達(dá)的信息,如反饋、引導(dǎo)下一步、狀態(tài)表達(dá)等。好的動效與視覺設(shè)計是互補而成系統(tǒng)的。

比如用動畫來展示商品被加進(jìn)購物車的狀態(tài),引導(dǎo)下一步操作。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

4. 加大點擊熱區(qū)

提高使用者點擊操作的準(zhǔn)確率和速度。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

5. 一屏策略

在這次的項目中存在一個場景,除了銷售端服務(wù)員看到的屏幕,顧客也會有一個客顯屏,即服務(wù)人員看到的界面,顧客也會看到。

對于頁面信息框架以及布局盡量“一屏”展示,確保雙方的視線和注意力一致,便于溝通交流。但這時會有挑戰(zhàn):字放大、按鈕放大,信息和功能在一屏上怎么放得下?

解決思路:

  • 進(jìn)行功能篩選,滿足場景中高優(yōu)先級核心訴求,提取核心功能展示。
  • 模塊化展示每個信息,根據(jù)格式塔的視覺感知理論,做到聚焦用戶視角。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

可能存在的障礙:在顧客的“催促”下,使用者也會著急,對事物表現(xiàn)出茫然的情緒,定位當(dāng)前位置困難。

設(shè)計目標(biāo):追求信息的有效表達(dá)和操作的直覺性與效率。

設(shè)計思路:

1. 避免使用不易識別的圖標(biāo)

B 端系統(tǒng)中會有些功能很難用一個圖標(biāo)去表達(dá)其含義,此時文字+圖標(biāo)按鈕優(yōu)于純圖標(biāo)按鈕,能幫助 POS 使用者更好地理解語意并做出操作。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

2. 信息的呈現(xiàn)符合用戶眼動規(guī)律,操作軌跡越短越好

可運用古騰堡圖表法 Diagonal Balance,它由 14 世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。他發(fā)現(xiàn)人們視覺閱讀規(guī)律,左上角是視覺第一落點區(qū),右下角是視覺最終落點區(qū),右上角和左下角都是一個視覺落盲點,大多數(shù)情況容易被忽略。

在進(jìn)行信息排布時,可根據(jù)用戶習(xí)慣性的眼動規(guī)律,將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個視覺落點可以展示重要操作。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

可能存在的障礙:百忙之中,應(yīng)變能力下降,容易發(fā)生誤操作的情況。

設(shè)計目標(biāo):預(yù)防不當(dāng)行為,提升容錯率,反饋要及時有效且清晰。

設(shè)計思路:

1. 通過二次確認(rèn)避免誤操作

在產(chǎn)品設(shè)計時,要把各種可能性考慮進(jìn)去,通過模態(tài)對話框讓用戶二次確認(rèn)來避免誤操作行為。

當(dāng)有重要操作時需告知用戶處理結(jié)果,狀態(tài)反饋信息采用的顏色需要遵守用戶對色彩的基本認(rèn)知,如紅色代表警示,黃色代表警告、綠色代表成功等。

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

上述舉例的設(shè)計原則是啟發(fā)但不是限制,每個設(shè)計提案最后都要經(jīng)過用戶調(diào)研,看是否符合使用者的使用習(xí)慣,是否真能解決業(yè)務(wù)與工作中的痛點。

附上總結(jié)圖:

如何做好B端產(chǎn)品的適老化設(shè)計?來看貓眼演出的實戰(zhàn)案例!

其實設(shè)計到后面會發(fā)現(xiàn),起初為了方便中老年用戶使用 POS 運用的設(shè)計原則,最終都能給多數(shù)人帶來很大便利。

這是因為我們每個人在某些時候都會遇到各種臨時的無障礙需求。

結(jié)語

適老化設(shè)計,不僅僅只是為中老年群體做設(shè)計,更是一種新的設(shè)計思維方式,去挖掘更多普適的場景痛點,來指導(dǎo)我們做方案設(shè)計。

市面上很多適老化設(shè)計方法為 B 端產(chǎn)品提供了借鑒,但 B 端產(chǎn)品不能為了適老而適老,理清相關(guān)工作情境和要解決的問題很重要;不能霸道性更改,取代需要合理性,因為 B 端產(chǎn)品現(xiàn)行的方案會產(chǎn)生很大的習(xí)慣引力。

以上是近期對 B 端引入適老化設(shè)計的一些思考和沉淀,是開始,也將繼續(xù),適老化設(shè)計還有很多值得深究和驗證的內(nèi)容。

文章來源:優(yōu)設(shè)  作者:范特西
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

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

前言:

在 2020 年,疫情最為嚴(yán)峻的時候,B 端這一領(lǐng)域得到了前所未有的關(guān)注,而那時,身為 B 端用戶體驗設(shè)計師的我,也曾總結(jié)過,當(dāng)時 B 端設(shè)計的諸多趨勢,比如:

多端需求:即桌面端、平板端、移動端的設(shè)計形式

設(shè)計中臺:擁有更為統(tǒng)一的設(shè)計平臺,與這兩年討論較多的設(shè)計資產(chǎn)相同,都是起到快速協(xié)作的作用

隨著 2022 年的到來,B 端行業(yè)又會迎來哪些新的機會?今天我們就從整個的 B 端入手,回顧一下 2021 年的設(shè)計形式,展望一下 2022 年的設(shè)計趨勢。當(dāng)然趨勢完全是我自己個人主觀理解,僅供參考,如有異議,以你為準(zhǔn)~

完整的趨勢,我們會分為視覺趨勢與產(chǎn)品趨勢

  1. 視覺趨勢:主要圍繞設(shè)計當(dāng)中的細(xì)節(jié)展開,比如圖標(biāo)、色彩、字體、插畫等
  2. 產(chǎn)品趨勢:主要是了解不同的 B 端產(chǎn)品當(dāng)中究竟有哪些發(fā)展形式,對于設(shè)計師又會產(chǎn)生何種影響?

視覺趨勢

1. 3D 設(shè)計風(fēng)格

雖然 3D 化的視覺風(fēng)格早已到來,但是在 B 端市場上,3D 風(fēng)格在此之前依舊表現(xiàn)的十分克制。隨著 C4D、Blender 這些 3D 建模軟件的不斷普及,再加上互聯(lián)網(wǎng)上關(guān)于 3D 建模教程的增多,你會發(fā)現(xiàn) 3D 風(fēng)格的視覺表現(xiàn),是一個 B 端視覺設(shè)計師的基本要求。

而 3D 風(fēng)格用在 B 端軟件當(dāng)中,會有兩個使用場景:

圖標(biāo)

因為在 B 端產(chǎn)品當(dāng)中,圖標(biāo)本身就是非常難以去表現(xiàn),比如“物聯(lián)網(wǎng),大數(shù)據(jù)”,許多抽象詞匯很難通過一個具象的事物進(jìn)行表達(dá),而在企業(yè)官網(wǎng)當(dāng)中,在視覺表現(xiàn)上的要求又十分的高。因此你會發(fā)現(xiàn),在視覺風(fēng)格上的選擇,往往只有 3D 圖標(biāo) + 插畫這一條路。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

并且 3D 圖標(biāo)的使用場景不會太過于局限,也可以用于產(chǎn)品的工作臺、運營營銷工具箱等頁面,因此 3D 圖標(biāo)的出現(xiàn),它的應(yīng)用場景也會相比之前要更加的廣闊。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

可視化大屏

大屏設(shè)計也在不斷的“內(nèi)卷”,因為傳統(tǒng)的 2D 可視化大屏所搭建出來的大屏已經(jīng)滿足不了企業(yè)的野心, 像 DataV 騰訊云圖 ,大家都在朝著 3D 風(fēng)格,炫酷的方向進(jìn)行延展,因此也就會導(dǎo)致 3D 的視覺風(fēng)格需求激增,而 3D 建模仿佛就是大勢所趨。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

2. 新擬態(tài)

雖然新擬態(tài)是在前兩年的產(chǎn)物。這個設(shè)計風(fēng)格背后,遭到了很多設(shè)計師的質(zhì)疑與排擠。但是隨著這個風(fēng)格的不斷成熟,感覺它在 B 端視覺領(lǐng)域(特指的是官網(wǎng) ),是非常受歡迎的,因為整體的風(fēng)格,與官網(wǎng)的設(shè)計形式趨同。

同時作為 B 端產(chǎn)品的官網(wǎng),其實是更需要新擬態(tài)這種風(fēng)格。因為電腦場景下鼠標(biāo)光標(biāo)對頁面進(jìn)行 Hover 操作給出的真實反饋,而使用了新擬態(tài)的官網(wǎng)按鈕,給你的反饋非常真實。

這里安利一下騰訊云的首頁官網(wǎng),大家就會發(fā)現(xiàn)在設(shè)計風(fēng)格上大量的采取了新擬態(tài)元素,并且配合 3D 風(fēng)格的圖標(biāo),以及毛玻璃材質(zhì)的設(shè)計,讓它的設(shè)計瞬間加分不少。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

3. 開源的設(shè)計系統(tǒng)

在去年,設(shè)計系統(tǒng)迎來了一波發(fā)展的高峰期,隨著字節(jié)、騰訊,三大設(shè)計系統(tǒng)(Arco Design、TDesign、Semi Design)的開源,其實是給我們很多 B 端設(shè)計初學(xué)者,有了更加完整仔細(xì)的 B 端入門教程。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

清晰的講解了每一個組件的使用方式,以及注意事項,仔細(xì)閱讀這里面的內(nèi)容,其實就是 B 端設(shè)計的入門學(xué)習(xí)。而未來,國內(nèi)的環(huán)境,開源的系統(tǒng)也會越來越多,大家可以針對這幾大類不同的設(shè)計系統(tǒng)進(jìn)行對比,或許會有一番收獲。

產(chǎn)品趨勢

4. 超級 app

這里的超級 app 可能和大家潛意識里的支付寶、微信這些軟件不太一樣

在 B 端行業(yè),隨著疫情的不斷擴散、再加上兩年時間的發(fā)展,很多 B 端產(chǎn)品的功能架構(gòu)都出現(xiàn)了一個現(xiàn)象,產(chǎn)品的功能開始變得非常擁擠。因為 B 端軟件的核心價值其實就是靠著一個又一個功能去累積,也就意味著隨著 B 端產(chǎn)品的發(fā)展,功能模塊在不斷的累積,導(dǎo)致在設(shè)計層面,這樣的現(xiàn)象變得更加嚴(yán)峻。

你會發(fā)現(xiàn)左側(cè)的導(dǎo)航菜單已經(jīng)完全沒有辦法裝下這些導(dǎo)航內(nèi)容,而這一現(xiàn)象也反映在很多產(chǎn)品當(dāng)中,比如我了解的飛書管理后臺、薪人薪事 等等諸多 B 端產(chǎn)品,它們在整個導(dǎo)航內(nèi)容上,已經(jīng)增加到一級導(dǎo)航 15+ 、二級導(dǎo)航 40+ ,這無疑會開始對設(shè)計師的能力造成巨大考驗。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

面對這一情況,許多導(dǎo)航菜單都將會迎來前所未有的挑戰(zhàn),最近也在深入研究導(dǎo)航菜單過多時的解決辦法,發(fā)現(xiàn)了一些新的導(dǎo)航菜單設(shè)計方法,有機會咱們重新梳理一下導(dǎo)航菜單的內(nèi)容,將 B 端設(shè)計指南文章進(jìn)行更新。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

低代碼定制化

低代碼一直是我關(guān)注的一個領(lǐng)域,先給不明白低代碼的同學(xué)簡單科普一下。

低代碼,一種快速開發(fā)應(yīng)用的軟件,將通用、可重復(fù)利用的代碼形成組件化的模塊,通過圖形化的界面來拖拽組件并形成應(yīng)用。低代碼能夠?qū)崿F(xiàn)只寫少量代碼或不寫代碼,類似用“樂高積木”的方式來開發(fā)。

在國外有很多著名的低代碼成功案例。Outsystems(國外非常出名的低代碼平臺)幫助施耐德電氣在 20 個月內(nèi)推出了 60 款應(yīng)用程序,開發(fā)過程加速了兩倍;在 2012 年即將推出 Model S 之際,特斯拉放棄了 SAP 的 ERP 產(chǎn)品(可以思考一下為什么),改用低代碼開發(fā)平臺 Mendix,用 25 個人四個月時間自建 ERP 系統(tǒng)。

去年,低代碼平臺,也有很多新產(chǎn)品面世,其中就包含:

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

因此你會發(fā)現(xiàn),其實低代碼就是在解決一件事,圍繞著某一個業(yè)務(wù)場景,通過平臺的持續(xù)完善優(yōu)化。讓所有的功能都能圍繞這個業(yè)務(wù)展開,其中包括:權(quán)限、時間軸、流程、表單、公式等等,能夠解決很多特殊的業(yè)務(wù)場景。而低代碼會涉及到設(shè)計思路上的轉(zhuǎn)變,以及低代碼編輯器的出現(xiàn),如何去設(shè)計如此復(fù)雜的配置流程,如何讓用戶能夠快速上手,如果你能夠有比較完整的思路,這些都會成為我們設(shè)計的新機會。

行業(yè)細(xì)分

隨著互聯(lián)網(wǎng)市場的不斷發(fā)展,用戶會越來越關(guān)注產(chǎn)品在自己行業(yè)的應(yīng)用,比如 CRM,其實只是一個籠統(tǒng)的稱呼,現(xiàn)在 CRM 市場又會分為 SCRM、運營 CRM,等諸多產(chǎn)品。

SaaS 類的平臺也出現(xiàn)了負(fù)責(zé)從虛擬主機和數(shù)據(jù)庫層面入手的 iPaaS 以及從應(yīng)用和數(shù)據(jù)層面入手的 aPaaS。

即使是大家經(jīng)常使用的 釘釘、企微、飛書,它們也在各自的領(lǐng)域有所擅長。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計的發(fā)展趨勢

因為 B 端產(chǎn)品,在底層邏輯上是不能允許趨同的產(chǎn)品出現(xiàn),如果你和別人的產(chǎn)品一樣,其實是沒有辦法在目前的市場上立足。因此你會發(fā)現(xiàn),雖然產(chǎn)品形式都會比較相同,但是 B 端市場十分廣闊,大家都在去尋找自己產(chǎn)品的差異化。

當(dāng)然市場是瞬息萬變的,這里也只是簡單聊聊我自己的看法,希望對你有所幫助。

文章來源:優(yōu)設(shè)  作者:CE青年
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

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

B 端產(chǎn)品主要是 Web 端產(chǎn)品,空間大、操作多,內(nèi)容相對復(fù)雜。需要通過頁面布局或者視覺設(shè)計表達(dá)出明確的邏輯關(guān)系,從設(shè)計角度降低用戶的學(xué)習(xí)成本。而用戶有固定的認(rèn)知規(guī)律。格式塔原理揭示了人類視覺的認(rèn)知是整體的:我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu),并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區(qū)域。

格式塔主要包括 7 個基本原則:

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

今天我們就來總結(jié)下,格式塔原理在 B 端產(chǎn)品中是如何應(yīng)用的?

接近性原則

我們先看 2 張截圖,分別是不同分辨率下的界面效果。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

可以明顯的感覺到高分辨率下,菜單列間距離較大,菜單的歸屬關(guān)系很清晰。而低分辨率下,菜單間的距離變小,特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則,距離近的關(guān)聯(lián)親密,距離遠(yuǎn)的就各自獨立分組。

當(dāng)我們想要傳達(dá)給用戶層級關(guān)系時,就需要善于利用接近性原則。例如表格上方的功能按鈕,通常我們將高頻、核心操作放置在左側(cè),低頻、輔助功能放置在右側(cè)。通過增大元素間的距離,達(dá)到功能分區(qū)的目的。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

相似性原則

相似性原則是通過顏色、尺寸、圖形等方面的共同屬性,實現(xiàn)信息的分組或者高可讀性。

例如在可視化圖表中,不同范圍值的指標(biāo)采用不同的背景色。通過背景色的差異,將同一范圍內(nèi)的數(shù)據(jù)形成視覺關(guān)聯(lián),提高用戶對信息的識別效率。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

通過圖形尺寸的相似性也可以構(gòu)建內(nèi)容分區(qū)。例如阿里云、騰訊云控制臺的首頁,都采用了雙列設(shè)計,左側(cè)主要以高頻的業(yè)務(wù)功能信息為主,右側(cè)是輔助運營信息。兩列尺寸寬度有明顯差異,用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內(nèi)容差異,并有效地突出業(yè)務(wù)信息。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

閉合性原則

IBM、蘋果的 Logo 設(shè)計,無論是“用刀砍過”,還是被“偷咬了一口”,用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現(xiàn)方式。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

在 UI 設(shè)計中,則會通過對齊方式,形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內(nèi)容空間。而微信公眾號則是平鋪背景色,內(nèi)容區(qū)借助標(biāo)題、卡片對齊形成視覺閉合空間,最終將頁面劃分為左側(cè)導(dǎo)航菜單和內(nèi)容區(qū)兩個空間。視覺表現(xiàn)上更輕量化。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

另外閉合性是需要元素之間相互輔助的,單獨的元素?zé)o法構(gòu)建出閉合空間。以下圖為例,雖然四個小的卡片做了間距分割,但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認(rèn)知。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

連續(xù)性原則

用戶更習(xí)慣于從左到右的橫掃閱讀,因此連續(xù)性主要體現(xiàn)在橫向空間中。

下圖中,雖然左側(cè)的標(biāo)簽文字與右側(cè)的內(nèi)容信息有較為明顯的間距,高度尺寸差距也比較大。但是用戶不會將內(nèi)容看作是 4 個獨立的個體,而是理解為兩組信息。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

在某些場景中,如果信息平均分布,不會產(chǎn)生連續(xù)性的視覺感知。

例如下圖指標(biāo)監(jiān)控中,指標(biāo)都是采用小卡片,間距、尺寸較為統(tǒng)一。這種情況下用戶就很難對信息分組處理。在我看來這些指標(biāo)只是一個個的視覺散點,沒有明確的視覺重點。用戶無法感知到內(nèi)在的邏輯性。用戶想要找到某個指標(biāo)時,需要逐個檢索,花費的成本更高。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

簡單對稱原則

通過上述很多圖片,我們可以看出頁面元素基本都是橫平豎直,中規(guī)中矩的元素和分割方式。或許有些單調(diào)乏味,但是勝在簡單,不會帶來額外的視覺噪點。

特別是 B 端產(chǎn)品,基本看不到異形的存在,甚至全圓角矩形都很少見到。即使有異形,也只是作為視覺表現(xiàn)元素存在于內(nèi)容中,而不會作為空間的劃分邊界。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

主體與背景原則

主體與背景原則最典型的應(yīng)用就是蒙版彈窗。通過拉大主體與背景的差異性,凸顯彈窗信息。

當(dāng)我們需要著重表現(xiàn)內(nèi)容時,同樣適用于主體與背景原則。例如登錄界面的設(shè)計,會通過差異化的背景、陰影等方式,帶給用戶清晰的視覺層級,適當(dāng)凸顯輸入框的主體地位。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

而 B 端內(nèi)容區(qū)是核心空間,基本都是采用純白背景,與頁面背景形成對比,從而占據(jù)信息的主體地位。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

共同命運原則

共同命運原則聽起來有點玄學(xué),指的是相同運動特征的元素會被認(rèn)為是同一組或者是具有相關(guān)性的內(nèi)容。運動的元素在 B 端產(chǎn)品中應(yīng)用很少,我沒有找到合適的案例解釋這個原理。

在移動端產(chǎn)品中有些應(yīng)用案例。比如 iOS 系統(tǒng)中,桌面布局編輯態(tài)下抖動的圖標(biāo),可以與靜態(tài)不可編輯的內(nèi)容形成隔離效果,視覺引導(dǎo)性更強。同樣今日頭條頻道編輯時,也采用了抖動效果。

如何在 B 端設(shè)計中應(yīng)用格式塔 7 大原則?來看詳細(xì)分析!

總結(jié)

雖然 B 端產(chǎn)品沒有 C 端色彩豐富,表現(xiàn)力上沒那么炫酷。但是兩者對信息傳達(dá)的要求是一樣的,要求和諧、有序、層次分明,輔助傳達(dá)內(nèi)在的業(yè)務(wù)層信息。靈活地運用格式塔原理將對產(chǎn)品的體驗提升會有很大的幫助。

格式塔原理不僅限于視覺表現(xiàn),產(chǎn)品經(jīng)理或交互設(shè)計師在原型設(shè)計時,也要重視格式塔原理,輔助設(shè)計方案表達(dá),提高團隊間的協(xié)作效率。

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

文章來源:優(yōu)設(shè)  作者:子牧先生
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



如何制定B端交互設(shè)計文檔

純純

前言


1.平臺視覺交互不統(tǒng)一

B端產(chǎn)品是很容易交互設(shè)計不一致的,隨著多平臺陸續(xù)融合為一個平臺,暴露的問題就越發(fā)明顯,因此改變現(xiàn)狀便迫在眉睫,此時保證交互設(shè)計的一致性就是我們重點要考慮的問題。

2.前端開發(fā)使用插件、組件混亂

目前有很多較火的組件平臺,例如:Ant Design 、Element等。由于公司內(nèi)部一些原因,前端開發(fā)會直接使用組件庫,沒有規(guī)范的約束,隨意使用組件也是導(dǎo)致平臺體驗不佳的一點。

3.同一場景、同一功能操作體驗不一致

由于產(chǎn)品上線后,售后組、業(yè)務(wù)組經(jīng)常會反映一些關(guān)于體驗相關(guān)問題,有時只是單一模塊進(jìn)行迭代、改版、完善而遺漏了與它相關(guān)聯(lián)的其他模塊,便會影響全局感觀。


如何解決以上問題?

首先重點模塊的設(shè)計稿搭建!

此時會有人產(chǎn)生疑問,明明平臺現(xiàn)存很多樣式問題,功能交互不統(tǒng)一,為什么首要不是先快速建立設(shè)計規(guī)范文檔?

因為在沒有設(shè)計一定量的設(shè)計稿之前,所有規(guī)范都是華麗的泡泡!前期在設(shè)計階段會遇到很多具體場景化的問題,根據(jù)不同的場景會不停的修改,還有多方評審來達(dá)到最優(yōu)方案。此時的設(shè)計稿處在極不穩(wěn)定的時期,自然而然也沒什么規(guī)范文檔可言,因此現(xiàn)階段要做的工作是找到重點模塊進(jìn)行設(shè)計稿基礎(chǔ)搭建。

當(dāng)然設(shè)計師在做設(shè)計時一定要有全鏈路的思考和拆解問題的能力,不能局限于單個需求,鉆入牛角尖。畢竟B端產(chǎn)品體量大,功能模塊多,系統(tǒng)耦合度高,交互設(shè)計文檔又是一個全局概念,這最基礎(chǔ)也是最重要的第一步是非常考驗設(shè)計師的。

重點模塊功能搭建好設(shè)計稿以后,可以先讓產(chǎn)品穩(wěn)定發(fā)展一段時間。當(dāng)團隊對產(chǎn)品初期有了一定熟悉程度,此時就很適合創(chuàng)建自己的交互設(shè)計規(guī)范了。

制定交互設(shè)計規(guī)范的意義

1.設(shè)計師層面

把控視覺統(tǒng)一,減少重復(fù)出圖,提高效率。在公司有多個設(shè)計師協(xié)同工作時,可保證體驗、設(shè)計、交互等等的統(tǒng)一性。

2.開發(fā)層面

提高設(shè)計稿的還原度,根據(jù)規(guī)范中組件使用情況建立公共組件庫,提高復(fù)用率,減少返工,極大的提高開發(fā)效率。

3.產(chǎn)品經(jīng)理層面

在畫原型圖遵循交互設(shè)計規(guī)范以及排版格式會減少開發(fā)在看原型圖和設(shè)計稿之間產(chǎn)生歧義,當(dāng)然產(chǎn)品原型圖不需要精致,只需按照規(guī)定規(guī)范中的交互制定即可。

4.測試層面

通用組件通過測試后,以后將不在花時間在測試組件交互上,避免了重復(fù)工作。

制定交互設(shè)計規(guī)范的定義

B端最重要的設(shè)計原則就是效率優(yōu)先,保證效率的前提是組件一致,交互及時反饋,以及合理的使用場景。

因此設(shè)計交互規(guī)范不僅僅只是顏色、文字以及一個個組件的展示,這樣的文檔對產(chǎn)品、測試毫無意義。規(guī)范是由基礎(chǔ)容器盒子+組件庫+交互狀態(tài)+正確使用場景組成,在規(guī)范中每一項都應(yīng)標(biāo)注清楚。

思路:將原子【文字、顏色、控制器等】組合成分子【狀態(tài)提示、數(shù)據(jù)展示、數(shù)據(jù)錄入等】最終組合成元素【不同的容器頁面、彈窗、抽屜、卡片等】一個一個的元素互相搭配,組成完整的基礎(chǔ)平臺。


一.整體布局

0.1柵格概念

在設(shè)計過程中,設(shè)計師需要建立適配的概念,根據(jù)具體情況進(jìn)行適配,以及考慮哪些區(qū)塊需要動態(tài)布局。中臺系統(tǒng)的用戶的主流分辨率為 1920*1080、1440*900 和 1366*768,一般常用畫板1440進(jìn)行區(qū)塊動態(tài)適配。

柵格寬度:建議柵格系統(tǒng)的網(wǎng)格大小選定8作為柵格系統(tǒng)的原子單位,目前主流設(shè)計屏幕分辨率在水平以及垂直方向都可以被8整除,使用8作為最小原子足夠適配。

水槽寬度:根據(jù)業(yè)務(wù)可自定義水槽的值。比如8、16、24、32、40等,經(jīng)過實踐經(jīng)驗,正常情況下,水槽寬度為24時,視覺效果最佳。

非常規(guī)設(shè)計時:不需要死板的堅持傳統(tǒng)柵格系統(tǒng),根據(jù)設(shè)計場景可自行修訂。

頂部導(dǎo)航欄高度計算范圍公式:48+8n。

側(cè)邊欄寬度計算范圍公式:200+8n。



0.2適配規(guī)則

界面最大可達(dá)顯示器最大值,側(cè)邊導(dǎo)航為定寬,右側(cè)內(nèi)容隨柵格變化而變化。

二.彈窗、抽屜、卡片等容器盒子

0.1概念設(shè)定

為保持視覺、交互一致性,統(tǒng)一容器范圍。容器是用來收納原子、分子的,理論上信息不應(yīng)該超出容器。

0.2彈窗案例講解

以有遮罩基本彈窗為例子進(jìn)行分析,包括視覺+交互。開發(fā)可根據(jù)彈窗盒子創(chuàng)建基礎(chǔ)容器組件,像素級也可幫助測試進(jìn)行校準(zhǔn)。產(chǎn)品及設(shè)計可根據(jù)使用場景規(guī)范自身,在制作原型以及設(shè)計稿時正確使用組件。


三.按鈕

0.1概念設(shè)定

按鈕用于開始一個即時操作。通常分為基礎(chǔ)按鈕(分為主按鈕、次按鈕)、圖標(biāo)按鈕、文字按鈕、圖標(biāo)+文字按鈕,在不同場景下使用不同的按鈕達(dá)到最佳交互效果。

0.2圖標(biāo)+文字案例講解

基礎(chǔ)按鈕應(yīng)用廣泛,較多人分析這種場景。所以下面主要分享一下圖標(biāo)+文字按鈕的基礎(chǔ)規(guī)范以及使用場景。


四.錄入類控件

0.1概念設(shè)定

錄入類由輸入框、選擇器、單選框、多選框等多種控件組成,基礎(chǔ)交互包括(默認(rèn)、懸浮、點擊、失效四種狀態(tài))

不同的控件相互組合成信息頁、表單頁、問卷頁等。

0.2輸入框案例講解

基礎(chǔ)輸入框包括(標(biāo)題+輸入框)根據(jù)不同場景有多種情況,下面僅列出交互場景,具體視覺標(biāo)注不再展示。


五.反饋提示

0.1概念設(shè)定

平臺中反饋機制是非常重要的設(shè)計,能及時提醒用戶當(dāng)前操作是否成功,或是失敗在哪里,因此不同的場景需要特定的反饋提示。

反饋提示包括(警告提示、全局提示、通知提示、氣泡確認(rèn)框提示、以及tips提示)

0.2案例講解

下面僅列出交互場景,具體視覺標(biāo)注不再展示。


六.文字、顏色、間距、圓角

0.1概念設(shè)定

文字、顏色、間距、圓角相當(dāng)于元素中的原子,完整的界面正是由這些原子一點一點組合而成,承載著最基礎(chǔ)但也是最重要的一部分,因此規(guī)范也要更詳細(xì)。

0.2案例講解


七.多方位評審

產(chǎn)出文檔是否能真正落地需要來自多方評審包括產(chǎn)品、技術(shù)、測試等,盡量從多角度、全方位來進(jìn)行審核。

投入開發(fā)前,多方評審,各抒己見達(dá)到最優(yōu)方案。

投入開發(fā)后,若要優(yōu)化修改定稿部分,需再次拉通會議討論,結(jié)合當(dāng)前實際情況將歷史問題一次性解決到位,避免遺漏再次造成不統(tǒng)一。

八.總結(jié)

由于篇幅原因,規(guī)范只是展開個別案例進(jìn)行分析。

最終需要落地實現(xiàn)才是最重要的一步,所以我們還有很長的路要走。也要不斷進(jìn)行思考與總結(jié),如何讓一致性設(shè)計規(guī)范更符合設(shè)計原則和業(yè)務(wù)場景~

原文地址:站酷
作者:食文貘

藍(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è)計sillybuy.com )是一家專注而深入的界面設(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è)計」通用指南

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


文章來源:站酷   作者:特里筆記

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

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

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

讓我們來聊聊Loading

純純

在人機互動過程中,用戶與界面的每一次互動都是一次加載過程。加載設(shè)計對于使用者來說是非常影響體驗的一個方面,后臺復(fù)雜的數(shù)據(jù)計算時間、網(wǎng)絡(luò)狀況不好都有可能造成等待時間長而帶來焦慮,今天就讓我們好好來聊下加載,以及怎么讓加載的體驗變得更好。



加載的出現(xiàn) 


加載指的是用戶在客戶端發(fā)出一個指令后,直到出現(xiàn)反饋結(jié)果時,中間這段時間內(nèi)計算機完成的一系列執(zhí)行動作,所以只要你在App中操作請求更多數(shù)據(jù)那就不可避免有加載。 



加載的重要性


根據(jù)一份調(diào)查得出,用戶能夠忍受加載的最長時間在:3到8秒。8秒是一個臨界值。但現(xiàn)在的高速互聯(lián)網(wǎng)真是把我們寵壞了,如果一個頁面的加載時間超過4秒,可能會被用戶直接退出,除非Ta一定要打開那個頁面。

這里有個很重要的數(shù)據(jù)叫跳出率,在谷歌的一項調(diào)查中就已經(jīng)發(fā)現(xiàn):

1-3 秒的加載時間跳出率提高了 32%。

1-5 秒的加載時間跳出率提高了 90%。

1-6 秒的加載時間跳出率提高了 106%。

 

為了降低用戶等待的焦慮,獲得更好的用戶體驗,我們必須讓用戶知道我們正在努力加載,同時要讓加載更有趣來分散用戶等待的注意力。



加載的場景


首先我們要先了解以下這些App中最常見的加載場景,也就是那些發(fā)出指令后應(yīng)用需要長時間處理的加載過程。


1、當(dāng)頁刷新

下拉刷新(請求最新數(shù)據(jù))+上滑加載(請求更多數(shù)據(jù))

▲ins_下拉和上滑


2、從后臺切回App

當(dāng)你在多個App中切換使用時,超過一定時間間隔就需加載數(shù)據(jù)。

▲系統(tǒng)后臺切回


3、啟動App

當(dāng)應(yīng)用出現(xiàn)異常關(guān)閉、應(yīng)用閃退等情況重新啟動app,需要進(jìn)行數(shù)據(jù)加載。

▲App啟動加載


4、頁面間的跳轉(zhuǎn)

頁面加載新的數(shù)據(jù),涉及原生跳原生或者H5頁面。

▲Moo音樂_頁面跳轉(zhuǎn)

 

5、定時數(shù)據(jù)刷新

在特定的時間內(nèi)頁面自動進(jìn)行數(shù)據(jù)刷新,例如每天0點更新排行,大部分用在運營或跟時間相關(guān)的場景。

▲番茄小說_排行定時更新

 

6、即時消息

通訊類社交的App都采用實時推送機制,不需要用戶手動操作也能接收到最新的數(shù)據(jù)。

▲Quack社交聊天






加載類型的進(jìn)化 


1、加載器(Spinners)


加載器是最早被使用的方式,適用于快速加載,這也是使用率最高的一種。

▲旋轉(zhuǎn)菊花記載


然而這種加載器有個缺點就是無法告知用戶需要等多久,Nielsen Norman早在1993年就提到響應(yīng)時間和loading動畫,“如果計算機無法提供快速響應(yīng),則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋?!薄綧yers 1985 論文,“計算機-人機界面百分比進(jìn)度指標(biāo)的重要性”】

 

所以加載器和進(jìn)度條成了黃金組合,適用于長時間(10秒或更長)的加載過程,顯示一個操作將花費多長時間以及目前所處的狀態(tài),通常有線性進(jìn)度、百分比、直觀數(shù)字等。

▲Cream M.


▲Gleb Kuznetsov? 


▲有道樂讀、嗶哩嗶哩漫畫


在此基礎(chǔ)上加載器也開始往趣味/品牌化發(fā)展,使用情感化加載動畫,可以讓等待過程變得輕松、愉悅。Tips:搭建符合目標(biāo)用戶群體的生活場景,能拉近與用戶之間的距離。

▲摩拜單車


▲ARCADE STUDIO


吸引用戶的眼球,感覺時間會過得更快一點,短暫忘記等待的過程。

▲Markus Magnusson


▲DeeKay



▲RWDS


通過品牌logo或產(chǎn)品相關(guān)的圖形呈現(xiàn)在界面上,將品牌基因融入整個Loading動畫中。

▲ Google


▲Medium


▲有道樂讀


▲ 開言 

 


加載器和進(jìn)度條這一組合有很多變體,可以應(yīng)用在不同的頁面位置:


1.1、白屏加載

當(dāng)前頁面內(nèi)容需一次性加載完成后才能顯示內(nèi)容,這是頁面加載最原始的狀態(tài)。當(dāng)頁面元素較多時,內(nèi)容呈現(xiàn)的等待時間會變得很長,一旦時間太久要給予提示。


1.2、Toast加載 

當(dāng)用戶執(zhí)行某個操作時,為了防止用戶繼續(xù)操作導(dǎo)致數(shù)據(jù)加載失敗,則用Toast的樣式來提示正在加載。在畫面中間出現(xiàn)提示框,有時會加上黑色透明底蓋在畫面中間,這種情況一般除了返回上一級的操作可點,其他操作將受到限制。


1.3、進(jìn)度條加載 

可以是在頂部或底部欄上,告知用戶等待的時間長度,讓用戶有一定的心理預(yù)期。


1.4、手動刷新加載 

通過手勢操作,快速加載和更新當(dāng)前頁面的內(nèi)容。


1.5、局部模態(tài)加載

在特定位置進(jìn)行加載,功能指示更明確,避免用戶反復(fù)操作。


加載器這種方式相對比較簡單,但也會阻斷用戶的其他操作,用戶只能等待加載完成才能繼續(xù)操作。會給人的感覺時間較長,且對于加載出來的頁面沒有任何預(yù)期。

 

那什么時候是需要中斷用戶操作呢?主要有以下兩種情況可以作為判斷:

1-當(dāng)前的操作未成功,則接下來的操作或結(jié)果也無法顯示,例如:啟動App、手機支付、渲染濾鏡等;

2-當(dāng)前的操作本身不能與其他操作同步進(jìn)行,需停留在當(dāng)前界面保證操作完成,例如:掃描、遷移資料、實時翻譯等。

如果中斷時間較短可以使用toast加載提示,時間較長則建議用專門的單頁且有可取消的按鈕來提示加載過程,以引起用戶的重視。


加載器的特點

· 適用性廣

· 拓展性強(趣味性及品牌宣傳)





2、分布加載(占位符Placeholder)


占位符分布加載就是當(dāng)界面中圖文同時存在時,如果獲取完所有信息才顯示所耗費的時間是很長的,因此為了縮短用戶等待的時間,會選擇優(yōu)先加載快的元素(文字),慢的元素(圖片視頻等)則用其他的方式占位,最終等待加載全部完成。較為適合feed或瀑布流模式。

 

分步加載的好處是在等待加載的時間里用戶可以看到相關(guān)的文字內(nèi)容,不會像空白頁加載或Toast加載,只能默默地等待加載的過程。

 

2.1、灰色占位符

將圖片用灰色或灰色圖(對開發(fā)更易用)來代替,中性灰在界面中不會搶風(fēng)頭,在暗黑模式中也適用。

▲灰色色值(例如#EFEFEF)或灰色圖片


▲Youtube 


2.2、品牌相關(guān)圖

在灰色圖上加入品牌元素也是不錯的方式,例如logo或吉祥物IP,將品牌人格化、情感化,輔助企業(yè)向用戶傳達(dá)產(chǎn)品的氣質(zhì)特征,在各類產(chǎn)品中廣泛運用。

▲Moo音樂、有道樂讀


2.3、彩色色塊

通過程序提取面積較大的主色調(diào),并設(shè)置幾種符合產(chǎn)品調(diào)性的默認(rèn)色,以防取色失敗。需保證色彩庫的顏色高級耐看,飽和度不要太高,不然很刺眼反倒引起到不好的體驗。

▲Behance、Apple Music


undefined


▲Pinterest


▲Google Search


2.4、模糊加載

模糊圖像也稱為模糊技術(shù),渲染圖像的一個低質(zhì)量版本,然后過渡到高質(zhì)量版本,初始圖像的像素和 kB 都很小。為了去除偽影,圖像會被放大和模糊。

▲Behance、Unsplash


分布加載的特點

? 良好的閱讀性;

? 準(zhǔn)確區(qū)分已加載和尚未加載的內(nèi)容





3、骨架加載(Skeleton Screens)



骨架加載就是先加載UI布局框架,再加載框架中的內(nèi)容,細(xì)節(jié)通常按照骨架輪廓(也稱為占位UI)、文本、圖像的順序出現(xiàn)。通過這種方式直觀地提前讓用戶知道整個界面的架構(gòu),并營造出一種漸進(jìn)的感覺,使用戶感知加載穩(wěn)定且速度快,提高了產(chǎn)品的體驗感。

 

“Skeleton Screens”這個詞最早出現(xiàn)在Luke Wroblewski 的文章中,Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設(shè)計師的支持,LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕,通過將被動等待變?yōu)橹鲃拥却?

 

被動等待是指你只是坐在那里無所事事,看著加載器轉(zhuǎn)了一圈又一圈。積極等待是當(dāng)你在等待時做一些感覺像是進(jìn)步的事情。骨架加載通過在每次屏幕更新時為用戶提供新信息來鼓勵主動等待。

 

通過這種方式,骨架屏幕將焦點從您等待的時間量上移開,并將其放在您面前發(fā)生的實際進(jìn)度證明上,從而使加載過程感覺更快。當(dāng)它顯示已加載的內(nèi)容和剩余的內(nèi)容時,它允許用戶構(gòu)建準(zhǔn)確的UI界面期望。

▲Medium手機版 


▲Medium網(wǎng)頁版



實現(xiàn)骨架屏幕時,請確保占位符 UI 大部分準(zhǔn)確表示最終 UI 的外觀。否則,就會在期望與現(xiàn)實之間產(chǎn)生差距。

▲夸克 


LinkedIn 最近開始使用 Skeleton Screens 進(jìn)行加載,骨架屏幕轉(zhuǎn)移了用戶的注意力。它使人們專注于進(jìn)度,而不是等待時間。

▲Linkin 


骨架加載提升了加載界面的速度進(jìn)度,這種速度反饋表現(xiàn)的更加友好并減少了不確定性,如果加載時間比預(yù)期的要長,也可以在骨架之前短暫地顯示一個加載器,這應(yīng)該會為你爭取更多時間來完成加載。


通常骨架和分布加載配合進(jìn)行,稱為漸進(jìn)式加載

? 顯示UI骨架布局

? 優(yōu)先加載文字;

? 加載圖像(或主顏色)質(zhì)量較低的版本;

? 再在后臺加載高質(zhì)量圖像;

? 淡入高質(zhì)量圖像,取代之前的低質(zhì)量圖像。

 

 

骨架加載的特點

? 感知更快的加載速度

? 清晰的可視化進(jìn)度指示





容易被忽略的加載


1、預(yù)加載

預(yù)加載就是用戶瀏覽當(dāng)前頁面時就預(yù)加載下一級所有列表的文字內(nèi)容,當(dāng)用戶點擊進(jìn)入已加載的頁面就感受不到等待,在無網(wǎng)絡(luò)情況下也能進(jìn)行正常的閱讀,在閱讀文字的時候再進(jìn)行圖片或視頻的加載(相反地則叫懶加載,進(jìn)入頁面時再加載數(shù)據(jù))。但是這種方式會增加客戶端和服務(wù)器的負(fù)載,也會占用一定的網(wǎng)絡(luò)帶寬。


2、智能加載

根據(jù)不同的網(wǎng)絡(luò)狀況選擇不同的數(shù)據(jù)加載方案,最常見就是用在音樂/視頻/下載更新等占用比較大流量的產(chǎn)品,當(dāng)判斷用戶處于3G/4G或網(wǎng)絡(luò)卡斷的情況下,為了既讓用戶使用流暢也不浪費流量,會自動切換至低速低畫質(zhì);而處于Wi-Fi條件下,會優(yōu)先選擇高清或高質(zhì)量進(jìn)行播放。

▲嗶哩嗶哩


3、緩存加載

也就是離線加載,通過現(xiàn)有Wifi資源將服務(wù)器內(nèi)容緩存到本地,無網(wǎng)絡(luò)或是弱網(wǎng)環(huán)境下讀取緩存加載??梢越鉀Q無網(wǎng)或弱網(wǎng)情況下數(shù)據(jù)獲取的問題,會占用本地的存儲空間,以及后續(xù)的緩存處理需要考慮。





加載出錯后的反饋


加載時間過長可能會損害你的網(wǎng)站的整體用戶體驗。如果加載的速度很慢會導(dǎo)致用戶點擊多次,這時我們需給用戶一個明確的提示“網(wǎng)站正在發(fā)生的事情是什么,提供適當(dāng)?shù)囊曈X反饋”,加載失敗后最重要的是給出解決方案,讓用戶可再嘗試或?qū)で髱椭U堄涀?,提供反饋是良好的交互設(shè)計和積極的用戶體驗。


undefined

▲嗶哩嗶哩漫畫、閑魚


▲Dribbble





在過去,設(shè)計良好有趣的加載器是我們所能做的最好的事情,而現(xiàn)在,漸進(jìn)式加載成為值得考慮的替代方案,它加快了等待時間感知,還清晰地呈現(xiàn)了UI布局并建立用戶預(yù)期。但這并不意味著不繼續(xù)思考更好的加載方案,期待未來出現(xiàn)更好的交互體驗。



總結(jié)

一個好的加載應(yīng)當(dāng)具備以下特征:

1 讓用戶知道應(yīng)用程序正在運行,給出大致的等待時間,簡單的進(jìn)度條或更數(shù)字視覺化的方式;

2 告訴用戶等待的原因,在處理什么動作表明軟件并沒有崩潰而是處理請求;

3 有趣的動畫內(nèi)容來吸引注意力,讓等待變得可以忍受;

4 加入品牌,讓用戶在等待的過程中加深品牌印象,形成品牌感知;

5 盡量使用非中斷式加載,降低等待的心理感知時長。

原文地址:站酷
作者:_阿丹a_

藍(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è)計sillybuy.com )是一家專注而深入的界面設(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è)計更好的深色模式

純純

iOS作為UI/UE設(shè)計的風(fēng)向標(biāo),一直是行業(yè)的引領(lǐng)者,不管你愿不愿意承不承認(rèn),他的每一次更新變化總能帶動UI設(shè)計行業(yè)的一些大大小小的變革,并且產(chǎn)生更多的追隨者,比如當(dāng)年的iOS7開始的扁平化設(shè)計風(fēng)格,對后續(xù)設(shè)計風(fēng)格的影響直到現(xiàn)在已經(jīng)7年了。



在最近半年,iOS在UI設(shè)計風(fēng)格上最大的變革莫過于DarkMode(深色模式),在DarkMode之前,我們熟悉的UI界面往往都是淺白色界面為主,而從iOS13開始正式使用了DarkMode,界面突然可以變深色了,蘋果官方說這樣設(shè)計可以讓眼睛更舒服的長時間閱讀,為革命保護(hù)視力,而且更加省電增長續(xù)航,具體結(jié)果我們不得而知,需要科學(xué)家們?nèi)ヲ炞C了,但是對于我們設(shè)計師來說帶來的挑戰(zhàn)就是要“黑白無常”了。



其實DarkMode從測試版算起已經(jīng)差不多推出了有半年的時間了,一些知名的APP產(chǎn)品早已經(jīng)有了自己的兼容方案,同時iOS原生界面也給了我們很多最佳實踐案例,按道理大家對于DarkMode的設(shè)計方式方法應(yīng)該已經(jīng)掌握了差不多了,但直到這幾天微信正式推出了自己的DarkMode兼容方案,才發(fā)現(xiàn)對DarkMode的探索還需要設(shè)計師們多多努力。謹(jǐn)以此文表達(dá)一下自己的觀點,不妥之處敬請海涵。


從一個“列表頁面”說起:

列表試圖(TableView)是iOS中最常見的界面組件,一般常見于設(shè)置與欄目列表頁面


iOS設(shè)置界面的淺色模式和深色模式看起來都非常協(xié)調(diào)。

下面我們看看微信發(fā)現(xiàn)頁面,這個頁面和iOS設(shè)置是很相似的。


如果單獨看微信發(fā)現(xiàn)頁面的淺色模式實際效果還是不錯的。

但是直接轉(zhuǎn)換到深色模式下就感覺突然差的很多了,甚至可以說是有點難看,這次微信真的做了一次黑天鵝?

 

到底是什么原因讓微信發(fā)現(xiàn)頁面在深色模式下視覺體驗如此之差呢?

我們不妨將兩個功能布局都相似的深色進(jìn)行放在一起進(jìn)行一下比較


組成色彩分析:

在色彩這塊在這兩個頁面中微信和iOS基本保持一致,四層灰度設(shè)計能更好的保持頁面整體干凈整潔且層次分明,但是被A背景色上,微信的背景色選擇了黑色偏綠的顏色,應(yīng)該是微信設(shè)計師還是想體現(xiàn)出產(chǎn)品的標(biāo)志色原色。

文字的顏色也較iOS略微深一點,但是在整體上影響并不大。


看來在主要色彩上并沒有什么問題,那么為什么微信這個界面與iOS界面比起來視覺上要感覺差一些呢?

下面來看一下圖標(biāo)


圖標(biāo)設(shè)計分析:


圖標(biāo)上的差別主要在于線寬與外框,微信采用無外框統(tǒng)一線寬的線形圖標(biāo),iOS采用的是有外框剪影圖標(biāo)。

我們我們把圖標(biāo)進(jìn)行互換會怎么樣呢?



觀察到了嗎?別看錯了!

是的,我把故意位置做了對調(diào),左邊是iOS,右邊是微信。替換圖標(biāo)后的微信明顯加分不少,整個界面都整齊多了,而iOS換了圖標(biāo)后明顯變得不夠整齊了,潦草很多。


那么結(jié)論是微信的無框線性圖標(biāo)在深色模式下兼容有問題?是的的確如此。但是等一下,還有一些細(xì)節(jié)你注意到嗎?換了圖標(biāo)的微信界面和之前的iOS界面比起來明顯還是有點不夠整齊,為什么呢?

來我們回過頭來從細(xì)節(jié)再看一下iOS界面。


我們按照這個思路把剛才微信替換圖標(biāo)界面再排序一下!

界面視覺體驗明顯整齊了很多是不是!


疑問:

為什么細(xì)線圖標(biāo)和無框圖標(biāo)會在深色背景表現(xiàn)不夠好,而在淺色背景下就沒問題呢?

是不是所有的UI都會存在這樣的問題呢?

我們再來看一些例子:


看來結(jié)論是一樣的,線性圖標(biāo)在深色背景下的表現(xiàn)都是差強人意,反觀帶框圖標(biāo)適應(yīng)性很強,淺色和深色模式下均能良好的適配,我來分析一下原因。


當(dāng)年伽利略用望遠(yuǎn)鏡往天上看,發(fā)現(xiàn)木星比金星大,換成肉眼看后金星則比木星大。他認(rèn)為是眼睛的某種視覺特性造成了這種現(xiàn)象。

德國物理學(xué)家赫爾曼把這種錯覺稱為輻照錯覺,就是說在黑暗背景下,亮度越高的物體看起來面積越大。


再來看一張圖片


哪個圓圈看起來更大,顯然是黑色背景下的白色圓形,實際上這只是一種錯覺,所有圓圈是一樣大。


光亮刺激會使得神經(jīng)元產(chǎn)生非線性放大作用,導(dǎo)致刺激比實物本身看起來更大,白色圓形更亮,所以看起來更大一些。


線性圖標(biāo)是用線條勾畫圖案達(dá)到隱喻效果,一般線粗是2px~6px像素。



設(shè)計師在設(shè)計時候都是以最終視覺作為參考,而設(shè)計稿本身多是淺色背景,所以在淺色背景的映襯下圖標(biāo)視覺會顯得稍大,視覺基本是平衡的,假如設(shè)計是4px而呈現(xiàn)出的效果其實是6px左右。


是不是覺得哪里有點不對了?按照這個邏輯黑色背景下白色線圖標(biāo)不應(yīng)該是視覺更大、更明顯嗎?


我們還需要考慮一個因素,那就是色彩,之前的幾個界面案例的線性圖標(biāo)都是彩色的,特別是黑色背景下,不同色彩的圖標(biāo)放在一起,會有明顯的忽大忽小的感覺,會讓界面感覺非常凌亂。


是不是感覺黃色最大,紅色的最?。康瞧鋵嵤且粯拥?,這還是相同形狀的,要是圖標(biāo)形狀不同感受會更明顯


看一個實際中的例子:

由于都是單色線性圖標(biāo),在淺色和深色下表現(xiàn)還都不錯的,但是單色圖標(biāo)略顯界面單調(diào),并不太建議這么設(shè)計。


毫無疑問,未來的UI場景需要適配多背景色風(fēng)格,圖標(biāo)除了具備好看隱喻之外,更需要具備抗干擾性

帶框圖標(biāo)是一個不錯的解決方法,大膽預(yù)測帶框圖標(biāo)會將成為未來一段時間圖標(biāo)設(shè)計主流!


結(jié)論

1:深色模式中灰度色階在一個界面最多可分為四層。

2:為了適配深色模式,今后有框圖標(biāo)將會成為圖標(biāo)設(shè)計風(fēng)格主流。

3:同樣為了適配深色模式,細(xì)線圖標(biāo)將會被淘汰,剪影和粗線圖標(biāo)會流行起來。

4:圖標(biāo)除了個體設(shè)計上用心,在排列上也會極大影響到頁面的整合視覺,光譜排列法是個不錯的選擇。


原文地址:站酷
作者:殘酷de樂章

藍(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è)計sillybuy.com )是一家專注而深入的界面設(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è)計公司



日歷

鏈接

個人資料

存檔