亚洲最大无码中文字幕_免费黄色网站在线观看_免费黄色av中文大全_2021最新精品国自产拍视频 久久99精品久久久久免费_嫩草院一区二区乱码_国产传媒京东传媒_亚洲av首页在线

首頁(yè)

優(yōu)秀的用戶界面設(shè)計(jì)

前端達(dá)人

今天為大家分享一些 Good UI 在一些項(xiàng)目中獲取的設(shè)計(jì)以及運(yùn)營(yíng)策略等方面的經(jīng)驗(yàn)。

 



作者:夜小七_(dá)PD
鏈接:https://www.zcool.com.cn/article/ZMTQyODg0.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

簡(jiǎn)單幾招提升設(shè)計(jì)

前端達(dá)人

這一次主要講PS中圖層樣式的一些使用技巧。

 

你喜歡或者不喜歡,教程就在這里,不棄不離……

 

 



作者:牛MO王
鏈接:https://www.zcool.com.cn/article/ZMTQ5OTY4.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

它們‘長(zhǎng)’得差不多,為啥結(jié)果卻是相反的呢?

濤濤

· 同樣是收錢,為何微信轉(zhuǎn)賬可以在【電腦端】接收,而微信紅包只能在【手機(jī)端】進(jìn)行?

· 同樣是顯示訂單節(jié)點(diǎn),為何快遞物流是【倒序】,而外賣卻是【正序】?

超全面陰影設(shè)計(jì)指南

前端達(dá)人

引言
在UI設(shè)計(jì)的藝術(shù)領(lǐng)域里,有三個(gè)被廣泛運(yùn)用并備受贊譽(yù)的設(shè)計(jì)元素,它們被形象地稱為“三大法寶”,
分別是陰影設(shè)計(jì)、圓角、透明
,對(duì)于初學(xué)者和設(shè)計(jì)師們來(lái)說(shuō),它們仿佛是提升界面層次感和吸引力的魔法棒。尤其是在設(shè)計(jì)卡片布局時(shí),很多同學(xué)會(huì)不假思索地應(yīng)用系統(tǒng)默認(rèn)的陰影效果,覺得這樣能為設(shè)計(jì)增添不少魅力。
 
然而,真正讓陰影效果發(fā)揮最佳作用的關(guān)鍵,并不在于簡(jiǎn)單地添加它,而在于如何根據(jù)不同的設(shè)計(jì)場(chǎng)景和需求,精心選擇并設(shè)置陰影。今天,我們就來(lái)深入探討一下,如何在UI設(shè)計(jì)中巧妙運(yùn)用陰影這一元素。
 
陰影的選擇和設(shè)置并非隨心所欲,而是需要綜合考慮多種因素,如光源位置、界面風(fēng)格、元素功能等。通過(guò)精細(xì)調(diào)整陰影的大小、透明度、模糊度和顏色等屬性,我們可以讓陰影與整體設(shè)計(jì)完美融合,為界面增添立體感和深度,同時(shí)避免過(guò)度使用導(dǎo)致的視覺混亂。
 
因此,在設(shè)計(jì)過(guò)程中,我們需要深入了解陰影的特性和運(yùn)用技巧,結(jié)合實(shí)際需求進(jìn)行靈活調(diào)整。只有這樣,我們才能真正掌握陰影這一UI設(shè)計(jì)利器,為作品增添更多的魅力和吸引力。
 
目錄
超全面陰影設(shè)計(jì)指南
 
 
 
01.  背景
“藝術(shù)來(lái)源于生活又高于生活”設(shè)計(jì)領(lǐng)域同樣如此,特別是在我們所關(guān)注的界面設(shè)計(jì)中。
界面中的陰影就是讓物體擁有來(lái)源于真實(shí)物理世界一樣的空間特性
 
在設(shè)計(jì)的早期階段,界面元素的設(shè)計(jì)往往傾向于盡可能地模擬現(xiàn)實(shí)世界的物體,以此拉近用戶與互聯(lián)網(wǎng)產(chǎn)品之間的距離,降低其陌生感。然而,隨著互聯(lián)網(wǎng)的快速發(fā)展和對(duì)高效迭代的需求,許多模擬真實(shí)世界的細(xì)節(jié)被簡(jiǎn)化或優(yōu)化,以突出用戶最為關(guān)心的質(zhì)感、層次感和深度。在這里,陰影元素尤為關(guān)鍵,它成為了構(gòu)建界面深度感的核心。
 
陰影在界面中的應(yīng)用,使得元素能夠自然地呈現(xiàn)出一種錯(cuò)落有致的空間布局。通過(guò)調(diào)整陰影的大小,我們可以清晰地傳達(dá)出界面中不同元素之間的層級(jí)關(guān)系和優(yōu)先級(jí),從而降低了用戶理解界面的難度,幫助他們更快速地識(shí)別所需信息。這種設(shè)計(jì)方式不僅提升了用戶體驗(yàn),也讓界面設(shè)計(jì)更加富有層次感和立體感。
超全面陰影設(shè)計(jì)指南
 
 
 
02.  陰影的原理
2.1 為什么需要使用陰影
在界面設(shè)計(jì)中,當(dāng)用戶進(jìn)行操作時(shí),有時(shí)會(huì)導(dǎo)致兩個(gè)物體因?yàn)槲恢玫恼{(diào)整而發(fā)生表面上的重疊。當(dāng)這種重疊發(fā)生時(shí),如果物體的不透明度或?qū)Ρ榷炔粔蝻@著,用戶往往會(huì)遇到識(shí)別上的困難,即難以判斷哪一個(gè)表面位于另一個(gè)表面的前方。
 
為了解決這個(gè)問(wèn)題,一種有效的方法是清晰界定每個(gè)表面的邊緣。通過(guò)明確這些邊緣,我們可以有效地減少因重疊而產(chǎn)生的混淆,幫助用戶更輕松地辨識(shí)不同表面之間的層次關(guān)系,從而避免這種“尷尬”的重疊現(xiàn)象,提升用戶體驗(yàn)和界面的清晰度。
超全面陰影設(shè)計(jì)指南
 
 
 
從上面可以看到,我們有三種處理方法:
 
方式一:
陰影顯示表面邊緣、表面重疊和高度。
方式二:
不同的表面顏色顯示表面邊緣和重疊,但不顯示高度。
方式三:
不透明度顯示表面邊緣和重疊,但不顯示高度。
通過(guò)對(duì)比我們發(fā)現(xiàn)陰影可以以最簡(jiǎn)單的方式展示表面之間的高度。
 
2.2 陰影的影響因素
 
陰影來(lái)源于現(xiàn)實(shí)生活反映物體與物體之間距離的物理現(xiàn)象。陰影受
光源的方向
以及
物體與物體之間相對(duì)高度
的影響。
 
在界面中,我們往往通過(guò)模擬元素的投影直截了當(dāng)?shù)膩?lái)告訴用戶,元素的空間關(guān)系。
 
物體越低,優(yōu)先級(jí)越低,其陰影小而銳利,反之物體越高,優(yōu)先級(jí)越高,其陰影越大越柔和。在設(shè)計(jì)中常見的陰影影響因素有X軸、Y軸、模糊、擴(kuò)展。
 
X軸:
這是投影延水平面或者X軸位置的偏移,控制著頂部和底部的陰影;
Y軸:
這是投影延垂直面或者Y軸位置的偏移,控制著頂部和底部的陰影;
模糊:
調(diào)整陰影顏色的模糊或者羽化;
擴(kuò)展:
控制著陰影的大小以及前景與后景之間的距離;
超全面陰影設(shè)計(jì)指南
 
 
 
03.  陰影的狀態(tài)與形式
當(dāng)界面中的組件失去陰影效果時(shí),用戶在操作時(shí)可能會(huì)因?yàn)橐曈X上缺乏變化而感到困惑,對(duì)頁(yè)面內(nèi)的層級(jí)關(guān)系產(chǎn)生疑慮,進(jìn)而覺得內(nèi)容顯得混亂,增加了理解和使用界面的難度。
 
用戶通常期望界面元素之間能在空間上有所區(qū)分,以實(shí)現(xiàn)更為直觀和流暢的交互體驗(yàn)。
常見的陰影狀態(tài)分為常規(guī)和懸浮兩種。
 
常規(guī)陰影:
這是不進(jìn)行任何操作時(shí)界面的默認(rèn)陰影樣式,通常表示為零級(jí)陰影狀態(tài),它為用戶提供了一個(gè)清晰的視覺層級(jí)參考。
 
懸浮陰影:
當(dāng)用戶與界面進(jìn)行交互,如hover態(tài)時(shí),元素可以使用一級(jí)陰影,甚至根據(jù)特定場(chǎng)景需求,可能采用二級(jí)或三級(jí)陰影狀態(tài)。這種動(dòng)態(tài)變化不僅提升了界面的趣味性,也增強(qiáng)了用戶對(duì)于元素狀態(tài)變化的感知。
 
陰影在界面中扮演著重要的角色,它能夠直觀地體現(xiàn)元素的層級(jí)關(guān)系。不同的陰影高度代表了不同的層級(jí),陰影的強(qiáng)度則由元素與地面之間的距離決定。因此,物體的高度直接影響了其陰影的大小和模糊程度。物體離地面越遠(yuǎn),其陰影通常越大,模糊值也相應(yīng)增高。
 
在antdesign設(shè)計(jì)系統(tǒng)中,采用了代表四個(gè)不同高度級(jí)別的陰影來(lái)適配界面中的元素,而不是像某些美國(guó)網(wǎng)頁(yè)設(shè)計(jì)系統(tǒng)那樣采用六種不同的高度。這四個(gè)陰影級(jí)別各自對(duì)應(yīng)著不同的高度層級(jí),并且擁有獨(dú)特的屬性,以確保界面元素在視覺上既清晰又和諧。
超全面陰影設(shè)計(jì)指南
 
 
 
第 0 層:
物體緊貼地面,投影與物體完全重疊,在界面中不對(duì)此層定義陰影值。
如:
篩選
超全面陰影設(shè)計(jì)指南
 
 
 
第 1 層
: 物體位于低層級(jí),此時(shí)物體被操作(懸停、點(diǎn)擊等)觸發(fā)為懸浮狀態(tài),當(dāng)操作完成或取消時(shí),懸停狀態(tài)反饋也跟隨消失,物體回歸到原有的層級(jí)中,如:卡片 hover 等;
超全面陰影設(shè)計(jì)指南
 
 
 
第 2 層:
物體位于中層級(jí),此時(shí)物體與基準(zhǔn)面的關(guān)系是展開并跟隨,物體由地面上的元素展開產(chǎn)生,會(huì)跟隨元素所在層級(jí)的移動(dòng)而移動(dòng)。如:
下拉面板
等;
超全面陰影設(shè)計(jì)指南
 
 
 
第 3 層:
物體位于高層級(jí),該物體的運(yùn)動(dòng)和其他層級(jí)沒(méi)有關(guān)聯(lián)。如:對(duì)話框等。
超全面陰影設(shè)計(jì)指南
 
 
 
04.  陰影的應(yīng)用
4.1 真實(shí)的反饋
模擬真正狀態(tài)下的陰影,我們可以通過(guò)對(duì)其變化過(guò)程進(jìn)行三層拆分,讓原本生硬的陰影變的更加柔和。
上圖展示了不同級(jí)別陰影的從低到高不同層級(jí)變化過(guò)程
上圖展示了不同級(jí)別陰影的從低到高不同層級(jí)變化過(guò)程
 
4.2 光源方向原理
陰影的偏移由組件的位置決定,確保同一套組件在光源方向的一致性。
超全面陰影設(shè)計(jì)指南
 
 
陰影的位置對(duì)于提升用戶體驗(yàn)和視覺設(shè)計(jì)至關(guān)重要。按照光源方向的邏輯,我們可以這樣總結(jié)陰影的三種常見應(yīng)用:
 
陰影向左:
當(dāng)元素(如導(dǎo)航欄、抽屜組件或固定表格欄)位于屏幕右側(cè)時(shí),向左的陰影能夠突出這些元素,并暗示它們是可交互或可擴(kuò)展的。
 
陰影向右:
對(duì)于位于屏幕左側(cè)的元素(如導(dǎo)航欄、抽屜組件或固定表格欄),向右的陰影能夠吸引用戶的注意力,并強(qiáng)調(diào)這些元素的存在和重要性。
 
陰影向下:
陰影向下通常用于組件內(nèi)部或組件本身,以營(yíng)造立體感和層次感,這是界面設(shè)計(jì)中比較常規(guī)且有效的視覺處理方法。
 
05.  總結(jié)
陰影設(shè)計(jì)在界面設(shè)計(jì)中扮演著至關(guān)重要的角色,它不僅能夠增強(qiáng)設(shè)計(jì)的立體感和層次感,還能有效地引導(dǎo)用戶的注意力,提升用戶體驗(yàn)。在本文中,我們探討了陰影在不同位置所代表的含義及其應(yīng)用場(chǎng)景。
 
我們還詳細(xì)的了解了陰影的變化過(guò)程,在對(duì)應(yīng)的工作中,能夠根據(jù)不同的信息層級(jí)來(lái)設(shè)置陰影,希望這篇文章能夠讓我們對(duì)陰影這種常見技法有深入的了解。
 
以上就是我對(duì)陰影設(shè)計(jì)見解和總結(jié),我非常期待能夠與你分享更多的想法,并一同在設(shè)計(jì)的道路上不斷進(jìn)步。
 

 

 

藍(lán)藍(lán)設(shè)計(jì)(www.fengliiu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

 

揭秘UX文案魔法:撰寫引人入勝的文案細(xì)節(jié),讓你的產(chǎn)品會(huì)說(shuō)話!

鶴鶴

3月中旬,“Apple ID將成歷史”的話題登上熱搜,科技網(wǎng)站MacRumors爆料蘋果預(yù)計(jì)將在今年把“Apple ID”更名為“Apple Account”,屆時(shí),使用超20年的“Apple ID”逐步淡出視野,成為記憶??此坪?jiǎn)單的文案更改,其背后考量可能是復(fù)雜的。僅從文案的字面含義來(lái)看,“ID”指的是可以代表某個(gè)身份的一串?dāng)?shù)字或編碼,服務(wù)于“認(rèn)證”環(huán)節(jié)的工具屬性更強(qiáng),而當(dāng)前蘋果給“Apple ID”的定位卻是“一個(gè)賬戶盡享Apple所有服務(wù)”,顯然“Account(賬戶)”的含義更加寬泛,即能代表身份標(biāo)識(shí),又可以包含自定義設(shè)置、功能權(quán)限、服務(wù)狀態(tài)等所有個(gè)人相關(guān)的信息,文案更加符合實(shí)際定位,精準(zhǔn)地表述也讓用戶容易理解和區(qū)分。

同樣是為了降低用戶困擾,提升行為數(shù)據(jù),2021年,蘋果發(fā)布iOS 14.5時(shí),其播客服務(wù)將“訂閱”功能更名為“關(guān)注”,因?yàn)閾?jù)市場(chǎng)分析機(jī)構(gòu)Edison Research的調(diào)研數(shù)據(jù)顯示,有47%的人認(rèn)為“訂閱”播客需要付費(fèi),這意味著過(guò)去幾年,可能有很多用戶因?yàn)閾?dān)心收費(fèi)而不使用播客服務(wù),造成大量用戶流失。更名為“關(guān)注”后,文案表述不容易發(fā)生歧義,可以消除用戶不必要的擔(dān)憂。

構(gòu)建高效標(biāo)簽體系:如何優(yōu)化平臺(tái)權(quán)益感知,提升用戶體驗(yàn)?

鶴鶴

 
一、前言
 

在數(shù)字化浪潮席卷全球的今天,標(biāo)簽早已不再是簡(jiǎn)單的文字標(biāo)識(shí),它們成為了連接用戶與信息的重要橋梁。從購(gòu)物網(wǎng)站上的商品分類,到社交媒體上的話題標(biāo)簽,再到搜索引擎的關(guān)鍵詞,標(biāo)簽無(wú)處不在,默默地引導(dǎo)著我們的視線和選擇。

特別是在B2B領(lǐng)域,標(biāo)簽的作用更是不可忽視。在百度旗下的B2B平臺(tái)愛采購(gòu)上,一個(gè)精心設(shè)計(jì)的標(biāo)簽體系不僅能幫助企業(yè)更精準(zhǔn)地展示產(chǎn)品信息,還能助力買家快速找到所需商品,極大地提升了交易的效率和便捷性。

一個(gè)優(yōu)秀的B2B平臺(tái)標(biāo)簽體系應(yīng)該具備哪些特點(diǎn)呢?接下來(lái),我們將以愛采購(gòu)為例,深入探討B(tài)2B平臺(tái)標(biāo)簽體系的設(shè)計(jì)優(yōu)化思路。

首先,標(biāo)簽需要具有明確的信息傳遞功能。在愛采購(gòu)平臺(tái)上,標(biāo)簽被廣泛應(yīng)用于展示商品的各種信息,如功能、價(jià)格、活動(dòng)優(yōu)惠等。這些標(biāo)簽不僅能幫助買家快速了解商品的特性,還能引導(dǎo)他們做出更明智的購(gòu)買決策。

標(biāo)簽的分類和標(biāo)記功能也是至關(guān)重要的。通過(guò)合理的分類和標(biāo)記,愛采購(gòu)平臺(tái)能夠?qū)⒑A康纳唐沸畔⒂行虻爻尸F(xiàn)出來(lái),讓買家能夠輕松找到自己需要的商品。同時(shí),這也為賣家提供了一個(gè)展示自己產(chǎn)品優(yōu)勢(shì)的機(jī)會(huì),增加了商品的曝光率和吸引力。

一個(gè)優(yōu)秀的標(biāo)簽體系還需要具備高度的靈活性和可定制性。隨著市場(chǎng)變化和用戶需求的演變,標(biāo)簽體系也需要不斷地進(jìn)行優(yōu)化和調(diào)整。愛采購(gòu)平臺(tái)通過(guò)引入智能算法和數(shù)據(jù)分析技術(shù),實(shí)現(xiàn)了對(duì)標(biāo)簽體系的實(shí)時(shí)監(jiān)控和優(yōu)化,確保了標(biāo)簽信息的準(zhǔn)確性和有效性。

 
1、常見的標(biāo)簽&作用
 
標(biāo)簽常用于展示內(nèi)容/功能/商品/活動(dòng)/價(jià)格/身份等信息,用于對(duì)高優(yōu)信息進(jìn)行標(biāo)記&分類,輔助用戶決策。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
2、標(biāo)簽對(duì)愛采購(gòu)平臺(tái)的作用
 
愛采購(gòu)作為百度旗下的企業(yè)一站式采銷平臺(tái),致力于讓買家直接接觸海量商品和優(yōu)質(zhì)商家,同時(shí)還為賣家提供商家運(yùn)營(yíng)后臺(tái),幫助他們快速實(shí)現(xiàn)交易目標(biāo)。在平臺(tái)上,經(jīng)過(guò)認(rèn)證的商家和商品信息將會(huì)被打上相應(yīng)的標(biāo)簽,確保真實(shí)性和實(shí)力資質(zhì)。這些標(biāo)簽不僅展現(xiàn)了商家的優(yōu)勢(shì),更是他們寶貴的會(huì)員權(quán)益。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
3、原標(biāo)簽體系因何而變
 
平臺(tái)的slogan從“買賣好貨源,做出好生意”轉(zhuǎn)變?yōu)?ldquo;定制、批發(fā)、找工廠就來(lái)愛采購(gòu)”的階段中,逐步推出「實(shí)力品牌」「交易服務(wù)」「加工定制」「資質(zhì)認(rèn)證」四類標(biāo)簽權(quán)益。當(dāng)推出新權(quán)益時(shí),為了快速樹立用戶認(rèn)知,將新權(quán)益的標(biāo)簽權(quán)重進(jìn)行強(qiáng)化。但隨著權(quán)益體系的逐步完善,各類標(biāo)簽優(yōu)先級(jí)排序不合理、不清晰等問(wèn)題日益凸顯,影響用戶對(duì)各種權(quán)益的價(jià)值認(rèn)知。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
4、新標(biāo)簽體系如何求變
 
我們從平臺(tái)的角度出發(fā),通過(guò)對(duì)標(biāo)簽權(quán)重進(jìn)行排序和分類、統(tǒng)一標(biāo)簽的構(gòu)成形式,致力于建立統(tǒng)一的標(biāo)簽體系,統(tǒng)一會(huì)員權(quán)益的感知,完善設(shè)計(jì)規(guī)范,并建立標(biāo)簽建設(shè)的協(xié)同機(jī)制,以規(guī)范后續(xù)標(biāo)簽的更新迭代產(chǎn)出。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
 
二、分類-排序-收斂
 
1、標(biāo)簽分類
 
現(xiàn)有的標(biāo)簽從B2B平臺(tái)的屬性和用戶的視角來(lái)看,可以分為六大類:會(huì)員類、認(rèn)證類、服務(wù)類、交易類、保障類、資質(zhì)類。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
2、標(biāo)簽排序
 
各類標(biāo)簽都有其獨(dú)特的重要性,但在設(shè)計(jì)表達(dá)時(shí),需要從助力買家尋找優(yōu)質(zhì)店鋪&服務(wù)這一核心情境出發(fā),根據(jù)平臺(tái)對(duì)標(biāo)簽的綜合定位和用戶的心智感知,定義標(biāo)簽的權(quán)重排序,并劃分出強(qiáng)中弱三個(gè)梯級(jí),以便后續(xù)的標(biāo)簽樣式系統(tǒng)優(yōu)化。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
3、標(biāo)簽收斂
 
1)樣式收斂
 
新權(quán)益推出時(shí),常基于應(yīng)用場(chǎng)景用“位置”和“樣式”強(qiáng)化對(duì)應(yīng)的標(biāo)簽。隨著權(quán)益體系的完善,一個(gè)標(biāo)簽存在多種樣式使得權(quán)益表達(dá)的不統(tǒng)一,影響了用戶對(duì)標(biāo)簽價(jià)值的認(rèn)知。為解決這一問(wèn)題,需要對(duì)標(biāo)簽樣式的數(shù)量進(jìn)行收斂。保留符合標(biāo)簽權(quán)重和通用性強(qiáng)的樣式,作為標(biāo)簽迭代的基礎(chǔ)范式。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
2)應(yīng)用收斂
 
常規(guī)非特色信息使用標(biāo)簽,反而影響其他標(biāo)簽的權(quán)重和頁(yè)面的閱讀效率,根據(jù)奧卡姆剃刀原則“如無(wú)必要,勿增實(shí)體”,需要通過(guò)視覺降噪來(lái)提升頁(yè)面的可閱讀性。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
 
三、統(tǒng)一標(biāo)簽體系的構(gòu)成
 
1、形
 
標(biāo)簽的大小通常分為大、中、小三種,而標(biāo)簽的寬度常根據(jù)內(nèi)容的長(zhǎng)度進(jìn)行適配。因此,在規(guī)則定義上,標(biāo)簽的大小會(huì)受到其高度的影響。
 
  •  
    大標(biāo)簽(高度18-22Pt):常用于表格、表單等信息密度相對(duì)較低的場(chǎng)景,使用相對(duì)較大的標(biāo)簽,以便與其他信息達(dá)到視覺上的平衡。
 
  •  
    中標(biāo)簽(高度15-17Pt):最常見的標(biāo)簽大小,常用于Feeds、用戶信息卡等場(chǎng)景中。
 
  •  
    小標(biāo)簽(高度12-14Pt):由于面積較小,通常用來(lái)承載輔助信息,常見于Feeds等場(chǎng)景中。
 
結(jié)合愛采購(gòu)平臺(tái)的核心場(chǎng)景和常用文字字號(hào),16Pt的標(biāo)簽高度與其他信息的大小比例最為平衡,故選擇16Pt的標(biāo)簽高度作為基礎(chǔ)大小。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
在標(biāo)簽的造型上,可以將其分為常規(guī)形和異形兩種類型:
 
  •  
    常規(guī)形:常見的標(biāo)簽為矩形,具有規(guī)整有序的外觀,閱讀效率較高,有較強(qiáng)的通用性,適用于列表等大部分場(chǎng)景。
 
  •  
    異形:異形標(biāo)簽的形狀較為自由,由于其差異化較大,會(huì)更容易引起用戶的注意,適用于特殊的身份表達(dá)、大促活動(dòng)等場(chǎng)景。
 
在統(tǒng)一的場(chǎng)景中,同屬性類型的標(biāo)簽形狀應(yīng)該保持統(tǒng)一和諧,避免在相同類別的標(biāo)簽中混用不同形狀,造成視覺上的不統(tǒng)一感。通過(guò)統(tǒng)一標(biāo)簽形狀,可以提升用戶對(duì)標(biāo)簽信息的識(shí)別和理解。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
在標(biāo)簽的圓角上,我們可以分為以下幾種形狀:
 
  •  
    膠囊形狀(圓角為高度的50%):圓潤(rùn)的外觀給用戶帶來(lái)柔和的視覺感受。
 
  •  
    大圓角矩形(圓角為高度的18%~32%):擁有視覺亮點(diǎn)的同時(shí)保持一定的圓潤(rùn)度。
 
  •  
    小圓角矩形(圓角為高度的6%~12%):標(biāo)簽更加銳利,但又不失整體的和諧性。
 
  •  
    直角矩形(圓角度為0):具有簡(jiǎn)潔硬朗的外觀,適用于某些特定的場(chǎng)景或者設(shè)計(jì)風(fēng)格。
 
新的標(biāo)簽體系從產(chǎn)品設(shè)計(jì)語(yǔ)言出發(fā),選擇小圓角矩形作為主要標(biāo)簽的基本型,以保持整體視覺風(fēng)格的一致性。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
2、色
 
采用HSB色彩系統(tǒng)來(lái)構(gòu)建標(biāo)簽的色彩體系。在HSB顏色模式下,我們以品牌紅的0°為起點(diǎn),每隔24°遞增,選擇不同心智的輔助色。為了色彩體系在視覺上的統(tǒng)一性,通過(guò)色彩矯正保持H不變,對(duì)S/B進(jìn)行20°以內(nèi)的微調(diào)。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
在建立新的標(biāo)簽色彩體系之前,需要根據(jù)現(xiàn)有標(biāo)簽的分類,在延續(xù)之前標(biāo)簽色彩心智的基礎(chǔ)上,對(duì)不同類型的標(biāo)簽選用具有不同心智的色彩。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
深色場(chǎng)景的調(diào)色方式
 
在特定情境下,標(biāo)簽會(huì)應(yīng)用于深色背景上,這就需要在原有基礎(chǔ)上對(duì)顏色進(jìn)行有規(guī)則的調(diào)整,以確保標(biāo)簽的可閱讀性和統(tǒng)一性。
 
對(duì)于彩色標(biāo)簽,在這種HSB色值模式下,保持色相(H)不變,通過(guò)微調(diào)飽和度(S)和亮度(B),使在亮色和暗色背景上的對(duì)比度保持一致,以確保標(biāo)簽在不同背景下都能清晰統(tǒng)一。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
3、字
 
針對(duì)常規(guī)標(biāo)簽,我們采用系統(tǒng)字體,而對(duì)于高優(yōu)特色標(biāo)簽,則使用特殊字形(非默認(rèn)字形)。通過(guò)對(duì)比原則,我們?cè)诒3终w統(tǒng)一的基礎(chǔ)上尋找差異,以強(qiáng)化高優(yōu)標(biāo)簽的視覺效果。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
4、構(gòu)
 
1)標(biāo)簽體系樣式的構(gòu)成
 
標(biāo)簽的構(gòu)成形式可拆解為:雙色和單色、實(shí)心和半透明、描邊和填充、純文字或圖標(biāo)加文字等,這些形式可以搭配組合出豐富的標(biāo)簽樣式。
 
在標(biāo)簽內(nèi)部,重色占比越大,飽和度和對(duì)比度越高,標(biāo)簽的視覺權(quán)重就越高。根據(jù)視覺上的強(qiáng)弱,對(duì)各類結(jié)構(gòu)進(jìn)行強(qiáng)弱排順,形成強(qiáng)、中、弱三個(gè)層級(jí)的標(biāo)簽構(gòu)成樣式。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
2)標(biāo)簽體系樣式搭配的構(gòu)成
 
在相同的場(chǎng)景中,應(yīng)盡量避免過(guò)多臨近權(quán)重的標(biāo)簽,而是需要確立一個(gè)合理的強(qiáng)弱比例。盡管每個(gè)標(biāo)簽都可能有其重要性,但根據(jù)其權(quán)重和優(yōu)先級(jí)順序,應(yīng)賦予各個(gè)標(biāo)簽合理的比例。綜合考慮標(biāo)簽的重要性和數(shù)量分配,以確保用戶可以快速準(zhǔn)確地獲取所需信息,同時(shí)保持界面整潔和易于閱讀。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
1)標(biāo)簽體系改動(dòng)的對(duì)比
 
通過(guò)“形-色-字-構(gòu)”的維度建立起統(tǒng)一的標(biāo)簽構(gòu)成形式,然后根據(jù)不同的強(qiáng)弱層級(jí)確定標(biāo)簽的形態(tài)。結(jié)合之前的標(biāo)簽權(quán)重層級(jí)排序,就可以得到新的標(biāo)簽體系。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
2)標(biāo)簽體系應(yīng)用的對(duì)比
 
統(tǒng)一各場(chǎng)景中用戶對(duì)標(biāo)簽價(jià)值的感知。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
 
四、沉淀設(shè)計(jì)規(guī)范&搭建協(xié)同機(jī)制
 
1、提煉共性沉淀設(shè)計(jì)規(guī)范
 
在確定了標(biāo)簽的構(gòu)成形式并明確了各個(gè)場(chǎng)景的標(biāo)簽使用規(guī)則后,我們需要從標(biāo)簽形態(tài)/尺寸/圓角/間距/字體/使用場(chǎng)景等多個(gè)維度出發(fā),制定標(biāo)簽的設(shè)計(jì)規(guī)范,從樣式&場(chǎng)景應(yīng)用上規(guī)范后續(xù)標(biāo)簽的增刪改,以提升全場(chǎng)景標(biāo)簽的統(tǒng)一性。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
2、搭建標(biāo)簽體系建設(shè)協(xié)同機(jī)制
 
標(biāo)簽體系由多個(gè)標(biāo)簽組成,牽一發(fā)而動(dòng)全身。因此在構(gòu)建健全的標(biāo)簽體系時(shí),需要從人、交付物、協(xié)同關(guān)鍵節(jié)點(diǎn)三個(gè)方面建立協(xié)同機(jī)制,共同推動(dòng)標(biāo)簽體系的持續(xù)優(yōu)化和發(fā)展。
 
  •  
    人:不同角色需密切合作,共同理解標(biāo)簽的重要性和功能,確保標(biāo)簽體系連貫有效。
 
  •  
    交付物:需求文檔和設(shè)計(jì)稿標(biāo)注至關(guān)重要。需求文檔應(yīng)明確描述標(biāo)簽在體系中的含義、特征、排序和權(quán)重層級(jí)。
 
  •  
    協(xié)同關(guān)鍵節(jié)點(diǎn):建立覆蓋多方的協(xié)同機(jī)制,以確保在關(guān)鍵節(jié)點(diǎn),標(biāo)簽體系得到合理建設(shè)和完善。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺(tái)權(quán)益感知
 
 
 
寫在最后
 
平臺(tái)標(biāo)簽的重點(diǎn)不僅應(yīng)在樣式上符合用戶對(duì)該標(biāo)簽的心智認(rèn)知,且標(biāo)簽的視覺權(quán)重順序也應(yīng)該正確符合平臺(tái)&用戶的訴求,保障各標(biāo)簽?zāi)茉谟脩舻臎Q策路徑中起到高效正確的引導(dǎo)。對(duì)于標(biāo)簽系統(tǒng)來(lái)說(shuō),規(guī)范的構(gòu)成形式應(yīng)對(duì)全局標(biāo)簽的構(gòu)成起到統(tǒng)領(lǐng)作用,良好的共建機(jī)制保障標(biāo)簽體系在業(yè)務(wù)發(fā)展的各個(gè)階段始終保持統(tǒng)一有序。
 


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTYxNjQ1Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

藍(lán)藍(lán)設(shè)計(jì)(www.fengliiu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

B端設(shè)計(jì)規(guī)范的安全著陸

鶴鶴

想法很重要,落地更重要
“有很多優(yōu)秀的想法,但如果不能夠把它們變成現(xiàn)實(shí),就沒(méi)有什么價(jià)值。”
這句話出自比爾·蓋茨的一篇演講,該演講是在1994年的美國(guó)全國(guó)高技術(shù)展(National Educational Computing Conference)上發(fā)表的。在這篇演講中,比爾·蓋茨講述了他對(duì)計(jì)算機(jī)科學(xué)的看法,并提出了他對(duì)教育和技術(shù)的未來(lái)的愿景。在談到創(chuàng)新和想法的時(shí)候,他說(shuō)了這句名言。

提升B端產(chǎn)品可用性的UI設(shè)計(jì)策略

鶴鶴

隨著企業(yè)信息化的推進(jìn),B端產(chǎn)品(即面向企業(yè)或組織的產(chǎn)品)在各行各業(yè)中的應(yīng)用越來(lái)越廣泛。
然而,很多B端產(chǎn)品在使用過(guò)程中存在著操作復(fù)雜、難以理解等問(wèn)題,這大大降低了產(chǎn)品的可用性。為了提升B端產(chǎn)品的可用性,UI設(shè)計(jì)師需要采取一系列策略來(lái)優(yōu)化用戶界面和交互體驗(yàn)。
本文將詳細(xì)探討這些策略,以幫助設(shè)計(jì)師們創(chuàng)造出更加用戶友好的B端產(chǎn)品。

深入探究B端產(chǎn)品設(shè)計(jì)的核心

鶴鶴

在當(dāng)今高度信息化的商業(yè)環(huán)境中,B端產(chǎn)品已成為企業(yè)高效運(yùn)營(yíng)和持續(xù)發(fā)展的關(guān)鍵支撐。
這些產(chǎn)品不僅提供工具和服務(wù),更是企業(yè)優(yōu)化流程、提升工作效率和競(jìng)爭(zhēng)力的有力武器。然而,要打造一款成功的B端產(chǎn)品,關(guān)鍵在于對(duì)
B端用戶需求的深入理解與分析。
B端用戶,
如企業(yè)決策者、團(tuán)隊(duì)管理者和專業(yè)人員以及普通員工,他們?cè)谌粘9ぷ髦刑幚韽?fù)雜的業(yè)務(wù)流程,對(duì)數(shù)據(jù)分析、系統(tǒng)整合、安全性等方面有著極高的要求。
這些用戶的獨(dú)特需求不僅體現(xiàn)在產(chǎn)品的基本功能上,更涉及到產(chǎn)品的易用性、可擴(kuò)展性以及服務(wù)支持等多個(gè)層面。

移動(dòng)設(shè)計(jì)模式

前端達(dá)人

現(xiàn)在人們漸漸用智能手機(jī)代替PC,連購(gòu)物也是如此。正當(dāng)越來(lái)越多的人由電腦桌面向移動(dòng)網(wǎng)頁(yè)轉(zhuǎn)移,購(gòu)買產(chǎn)品和服務(wù),網(wǎng)站創(chuàng)建者可以使用已存的設(shè)計(jì)模式來(lái)開啟移動(dòng)電子商務(wù)計(jì)劃。

擁有良好的電子商務(wù)經(jīng)驗(yàn)非常重要。實(shí)際上,近期的研究發(fā)現(xiàn),如果能用手機(jī)登陸購(gòu)物網(wǎng)站且過(guò)程體驗(yàn)良好,多于67%的人都愿意下單。

使用設(shè)計(jì)模式的優(yōu)點(diǎn)在于,你可以看到其他設(shè)計(jì)師是如何解決類似的問(wèn)題,這樣你就不用走彎路。還能使你了解到人們?cè)谄渌W(wǎng)站使用類似功能時(shí)的需求,并以此為參考來(lái)設(shè)計(jì)網(wǎng)站;并鼓勵(lì)你思考自己一個(gè)人做設(shè)計(jì)時(shí)不會(huì)想到的設(shè)計(jì)方法。

本文中,我們專注于智能手機(jī),而不是圖表。我們將介紹一些用于移動(dòng)電子商務(wù)功能的設(shè)計(jì)模式和方法,如下:

·主頁(yè)  

·導(dǎo)航  

·搜索建議

·搜索結(jié)果

·搜索過(guò)濾和分類

·產(chǎn)品頁(yè)

·圖片庫(kù)

·購(gòu)物車

·賬戶或游客登錄

·表格

本文中所有例子都來(lái)源于移動(dòng)網(wǎng)頁(yè),在智能手機(jī)瀏覽器中運(yùn)行。大多數(shù)屬于大型百貨零售商,因?yàn)樗麄冇旋嫶蟮漠a(chǎn)品目錄,這就需要考慮周全的設(shè)計(jì)方式,以突出搜索,并將搜索結(jié)果進(jìn)行過(guò)濾和分類。本文還有許多基于電子商務(wù)的原生app,許多模式都能很好的運(yùn)用其上。

 

主頁(yè)

在移動(dòng)設(shè)備上訪問(wèn)網(wǎng)頁(yè),主頁(yè)內(nèi)容通常較少,更多是幫助用戶找到所需的內(nèi)容。常見的模式就是一欄促銷,一欄鏈接列表或產(chǎn)品目錄,很簡(jiǎn)單。關(guān)鍵詞搜索一般都有,還有店鋪的鏈接,訂閱促銷郵件及忠誠(chéng)度計(jì)劃的登記表。

 

c9b7569882026ac725af23e7ad60.jpg

 

亞馬遜和梅西都使用促銷商品和列表目錄混排的方式。

 

 

0498569881ab6ac725af23bac5c8.jpg

 

塔吉特的促銷內(nèi)容比簡(jiǎn)單列表占據(jù)屏幕更大的空間,極具視覺沖擊力。

Threadless使用儀表盤模式,比起移動(dòng)電子商務(wù)網(wǎng)頁(yè),在原生應(yīng)用中較為常見。

 

如果購(gòu)物者來(lái)你的網(wǎng)站是為了快速比較價(jià)格,那么他們更需要的便是簡(jiǎn)單的列表樣式和搜索功能。如果他們是來(lái)關(guān)注促銷和打折的,那么塔吉特的設(shè)計(jì)模式就更合適。因此,你需要分析消費(fèi)者來(lái)你的網(wǎng)站的目的,以此決定合適的設(shè)計(jì)模式。

導(dǎo)航

除了使用主頁(yè)作為主要的導(dǎo)航中心,許多網(wǎng)站也在多數(shù)頁(yè)面上設(shè)置了導(dǎo)航目錄,通常是作為頁(yè)頭。這讓消費(fèi)者能輕松在頁(yè)面間跳轉(zhuǎn),而無(wú)需回到主頁(yè)。

 

cbf2569882186ac725af23c93010.jpg

 

lowe的導(dǎo)航目錄中,每個(gè)選項(xiàng)都有圖標(biāo)。best buy的目錄則使用了兩欄的排版,并且用按鈕替代列表。Lowe的目錄出現(xiàn)時(shí)會(huì)覆蓋整個(gè)頁(yè)面,而Best Buy的目錄出現(xiàn)時(shí)會(huì)向下推擠屏幕上的其他內(nèi)容。

 

11cf5698824532f87574be578837.jpg

 

Macy的導(dǎo)航目錄包含下級(jí)選項(xiàng)。CVS則具有雙欄目錄,每個(gè)選項(xiàng)也有圖標(biāo)。它們的目錄都在頁(yè)面頂端展示。

看了上面的屏幕截圖,設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航的方式多種多樣。Lowe的設(shè)計(jì)很簡(jiǎn)潔,而且圖標(biāo)帶來(lái)了一些視覺上的亮點(diǎn)。而導(dǎo)航以外的其余內(nèi)容都隱入背景,這使用戶在選擇導(dǎo)航內(nèi)容時(shí),更集中于當(dāng)前目標(biāo)。CVS的版式相對(duì)雜亂,兩欄的選項(xiàng),每個(gè)項(xiàng)目都搭配了圖標(biāo)。CVS的目錄上有許多可以點(diǎn)擊的bar,相互之間很接近,這在觸摸屏上可能導(dǎo)致可用性問(wèn)題。

有趣的是,大型電子商務(wù)網(wǎng)站通常不會(huì)一次顯示許多導(dǎo)航選項(xiàng)。它們嘗試在導(dǎo)航的視覺設(shè)計(jì)和網(wǎng)頁(yè)信息構(gòu)架之間尋求平衡,仔細(xì)考慮應(yīng)存在于全站導(dǎo)航上的項(xiàng)目的數(shù)量。通過(guò)網(wǎng)站分析來(lái)確定消費(fèi)者會(huì)點(diǎn)擊哪個(gè)目錄選項(xiàng),可以幫助你決定目錄上的內(nèi)容??蓪?duì)不同的設(shè)計(jì)進(jìn)行A/B測(cè)試和可用性測(cè)試,看看哪種設(shè)計(jì)選項(xiàng)太多太雜,最佳方案應(yīng)使人們不但找到建議內(nèi)容,也能找到需要的內(nèi)容。——為了商業(yè)需求,也為了用戶需求。

搜索建議

搜索建議,也叫輸入提示或自動(dòng)填寫,當(dāng)消費(fèi)者鍵入前幾個(gè)字幕的時(shí)候就顯示出可能的輸入結(jié)果。在常用搜索中,這對(duì)消費(fèi)者來(lái)說(shuō)真的很方便,特別是當(dāng)輸入內(nèi)容很長(zhǎng)的時(shí)候。而搜索建議的一個(gè)局限就是:在虛擬鍵盤上很容易輸錯(cuò)字,這會(huì)改變建議的結(jié)果。而顯示常見“正確”的結(jié)果可能更有用。而且,考慮使用改進(jìn)的自動(dòng)建議模式來(lái)減少輸入內(nèi)容,在最有效率的前提下使用更慢的移動(dòng)帶寬。

 

0249569882666ac725af232553c1.jpg

 

在Office Depot網(wǎng)站的搜索框中輸入“draf”時(shí),會(huì)自動(dòng)提示數(shù)個(gè)可能的結(jié)果。如果錯(cuò)打成“drag”,就會(huì)顯示出一些和搜索內(nèi)容無(wú)關(guān)的結(jié)果。在虛擬鍵盤上輸錯(cuò)字母是很常見的問(wèn)題。

 

人們?cè)谳斎霑r(shí)的錯(cuò)誤,設(shè)計(jì)師也無(wú)可奈何。不過(guò)他們可以用其他方式使消費(fèi)者找到產(chǎn)品頁(yè),例如,產(chǎn)品類別或頂層類別的目錄可以向下延展出列表。網(wǎng)站管理者也可以優(yōu)化搜索引擎的功能,如當(dāng)用戶輸入“dragt”時(shí),再建議“draft”的結(jié)果。你使用的搜索引擎技術(shù)將決定你解決問(wèn)題的方式。

搜索結(jié)果

在移動(dòng)電子商務(wù)網(wǎng)站上的搜索結(jié)果主要使用兩種樣式:表格展示和網(wǎng)格展示。表格展示會(huì)顯示一張產(chǎn)品縮略圖和一些密集排列的基本信息如產(chǎn)品名稱、價(jià)格。網(wǎng)格展示則會(huì)顯示較大的圖片而使用更少的描述信息。一些網(wǎng)站允許消費(fèi)者在兩種展示方式之間切換。

 

97295698828432f87574bea51819.jpg

 

zappos以網(wǎng)格顯示搜索結(jié)果,這使它可以使用更大的產(chǎn)品圖片,使消費(fèi)者買鞋的時(shí)候偏于以感性作出選擇。Walgreens使用包含按鈕的表格,按鈕的功能一個(gè)是在店中找到商品,另一個(gè)是將商品加入購(gòu)物車。

 

dff1569882a06ac725af23add0de.jpg

 

OfficeMax讓消費(fèi)者在海量的搜索項(xiàng)目中——如輸入“紙”搜索——選擇子類別。一旦選擇了子類,搜索結(jié)果將以表格展示出來(lái)。如果搜索“剪刀”,搜索結(jié)果的子類別會(huì)較少,這讓消費(fèi)者能直接在表格中看到結(jié)果。

 

如果產(chǎn)品的分級(jí)雜亂不清,此時(shí)讓消費(fèi)者選擇子類別可能會(huì)導(dǎo)致一些問(wèn)題。如上面在OfficeMax的例子中,某人想買8.5x11英寸的家用打印紙,他可能不知道該在“復(fù)印紙&多用紙”還是該在“激光紙”的目錄下找。一種比較好的解決方式就是在搜索過(guò)濾器下邊列出子目錄,可以與其它過(guò)濾方式并列呈現(xiàn),如“顏色”和“尺寸”。每隔一段時(shí)間(4-6周)就對(duì)具有代表性的用戶、常見搜索項(xiàng)目和熱銷產(chǎn)品進(jìn)行測(cè)試,這可有助于你洞察哪種解決方式更佳。A/B測(cè)試也可以揭示出哪一種方式能讓更多用戶到達(dá)產(chǎn)品頁(yè)并具有更高的支付率。

 

25a0569882ba6ac725af234530a6.jpg

 

Gap的默認(rèn)搜索結(jié)果以表格展示,同時(shí)提供網(wǎng)格展示方式的選擇。注意,Gap也在關(guān)鍵詞區(qū)域保持搜索項(xiàng)目。

 

Gap的用戶可以選擇搜索商品的展示方式,這讓它們可以隨時(shí)在易于瀏覽的形式和具有大圖的形式之間轉(zhuǎn)換。但其實(shí)Gap可以在網(wǎng)格展示方式中保留一些商品信息——如價(jià)格(像Zappo所做的那樣)

一些諸如價(jià)格和顏色的細(xì)節(jié)讓用戶更容易決定想要了解哪個(gè)商品的更多信息。

在關(guān)鍵詞區(qū)域保持搜索文字也可以提醒用戶他們正在搜索的內(nèi)容,讓他們更容易通過(guò)添加一些限制詞(如“紅色”)來(lái)細(xì)化搜索結(jié)果。

在Gap中搜索“男式tshirts(正確寫法為t-shirts)”,你會(huì)來(lái)到無(wú)搜索結(jié)果頁(yè)面(本文未截圖),而且也不提供“男式 t-shirts”的搜索鏈接。Gap可以在搜索結(jié)果頁(yè)面添加“你是否要搜索-某物品”的搜索建議來(lái)提升其用戶體驗(yàn)。Google就會(huì)列出“mens t shirts”的搜索建議,如果用戶忽略,它就會(huì)直接呈現(xiàn)出“men’s t-shirts”的搜索結(jié)果。

結(jié)果分類

將搜索結(jié)果分類可以幫助購(gòu)買用戶以一種有規(guī)律的方式組織起海量的搜索結(jié)果,通常會(huì)按照價(jià)格和消費(fèi)者評(píng)分排列。常見的分類界面樣式是按鈕和<選擇>菜單。

 

246f569882de32f87574be90c2fe.jpg

 

Walmart讓用戶點(diǎn)擊三個(gè)按鈕之一來(lái)將結(jié)果分類。Sears使用了類似的方式,但有一個(gè)“分段控制”,Javas cript框架如jQuery移動(dòng)開發(fā)正在使這些類似app的界面小部件對(duì)設(shè)計(jì)師來(lái)說(shuō)更易用。

 

2ee9569882fd6ac725af2376ad8b.jpg

 

J.C. Penney可以通過(guò)有點(diǎn)自定義樣式的<選擇>菜單來(lái)分類結(jié)果,Eddie Bauer則使用了瀏覽器的默認(rèn)<選擇>菜單。兩者都通過(guò)瀏覽器的本地控制來(lái)觸發(fā)<選擇>菜單(本例中為iphone選擇器)

Walmart的按鈕之間空間較大,點(diǎn)擊起來(lái)不易出錯(cuò),但同時(shí)也因此無(wú)法容納更多選項(xiàng),而Sears有四個(gè)按鈕,包含一個(gè)“全部”的按鈕,這使得用戶在分類篩選后沒(méi)有找到所需商品時(shí)可以回到初始頁(yè)面。用<選擇>菜單是一種很安全的選擇,因?yàn)楝F(xiàn)代移動(dòng)瀏覽器都支持這種方式,這使應(yīng)用可以列出更長(zhǎng)的分類選項(xiàng)。但是,也占用了許多有用空間。這些都是可用常規(guī)測(cè)試方法來(lái)評(píng)估的折中設(shè)計(jì)類型。

結(jié)果過(guò)濾

過(guò)濾器讓用戶可以縮小搜索范圍,一般基于諸如顏色,品牌和尺寸等屬性。過(guò)濾器通常要?jiǎng)澐诸愋停ǚQ為分面),每個(gè)分面下會(huì)顯示數(shù)個(gè)值(比如,顏色就是一種分面,紅色是一種分面值)常見的展示過(guò)濾選項(xiàng)的界面樣式是<選擇>菜單,下拉式菜單和可折疊菜單。現(xiàn)在在技術(shù)上使單個(gè)搜索包含數(shù)個(gè)分面值是可以實(shí)現(xiàn)的,但也因此帶來(lái)更高的交互成本,并導(dǎo)致無(wú)搜索結(jié)果(比如,低于75美元的交叉訓(xùn)練運(yùn)動(dòng)鞋)。

 

 

a20c569883626ac725af23e1019e.jpg

 

CVS在其高級(jí)搜索中使用<選擇>菜單來(lái)過(guò)濾結(jié)果,選擇一個(gè)菜單選項(xiàng)將立即對(duì)結(jié)果進(jìn)行過(guò)濾。JC Penney則提供了一個(gè)下拉菜單來(lái)過(guò)濾結(jié)果,并會(huì)提示出符合過(guò)濾值的產(chǎn)品數(shù)量。JC Penney也允許一個(gè)分面帶有多個(gè)值,以供用戶進(jìn)行一次性的選擇,確認(rèn)信息用戶要觸碰“apply”按鈕。

 

c9215698844832f87574be43468e.jpg

 

Kohl’s在其每個(gè)過(guò)濾類型中使用折疊方式收納系列復(fù)選框。Threadless把所有搜索分面的值以按鈕體現(xiàn)。兩個(gè)網(wǎng)站中,你只需選擇一個(gè)過(guò)濾值就能立刻看到結(jié)果。

 

在每個(gè)分面值下面顯示商品數(shù)量能讓消費(fèi)者更清楚地了解每個(gè)選擇為他們帶來(lái)的結(jié)果。Threadless的方式是用整一屏展示出所有可用的分面值,讓消費(fèi)者對(duì)所有可用搜索結(jié)果一目了然。你是選用這種方式還是使用Kohl的方式,取決于你打算為指定產(chǎn)品目錄提供多少過(guò)濾分面值。如果你的產(chǎn)品目錄在分面值方面變化不定,那么你就需要進(jìn)行試驗(yàn)找出合適的設(shè)計(jì)方式。你可以優(yōu)化那些最熱門的產(chǎn)品目錄的過(guò)濾結(jié)果顯示頁(yè)面。

產(chǎn)品頁(yè)面

產(chǎn)品頁(yè)是電子商務(wù)網(wǎng)站真正展示產(chǎn)品細(xì)節(jié)的頁(yè)面。它們并不關(guān)于某種模式,而是關(guān)于系列模式,包括標(biāo)簽,折疊導(dǎo)航和照片庫(kù)等系列元素。產(chǎn)品頁(yè)有兩種展示方式,一是包含所有產(chǎn)品信息的長(zhǎng)頁(yè)面,二是包含標(biāo)簽或折疊導(dǎo)航能將信息收起的短頁(yè)面。

 

f8f25698846632f87574bede44d3.jpg

 

三星和戴爾都在產(chǎn)品頁(yè)上逐步揭開內(nèi)容,為消費(fèi)者提供許多信息。三星使用折疊導(dǎo)航來(lái)展開大段內(nèi)容,戴爾則使用標(biāo)簽。

 

49f25698848532f87574bea7abfc.jpg

 

Cabela和Office Depot都使用一整個(gè)長(zhǎng)頁(yè)面來(lái)展示產(chǎn)品信息。這種方式需要用戶頻繁滑動(dòng)屏幕來(lái)獲取信息,但他們就不用觸碰標(biāo)簽或展開折疊導(dǎo)航欄。你需要根據(jù)產(chǎn)品信息量的多少和分解信息的方式來(lái)選擇合理的方式。

 

長(zhǎng)的產(chǎn)品頁(yè)比起帶折疊導(dǎo)航和標(biāo)簽的頁(yè)面需要用戶進(jìn)行更多滾動(dòng)操作,也令購(gòu)買者需要更費(fèi)力地找出特定信息。在我自己的可用性測(cè)試中,我了解到人們對(duì)兩種方式各有偏好,但是似乎對(duì)網(wǎng)頁(yè)信息進(jìn)行劃分具有更高的可用性。如果你要采用這種方式,確保在人們觸碰標(biāo)簽或折疊導(dǎo)航欄的時(shí)候,被收起來(lái)的信息能快速顯示。

一種辦法就是開始便一次性加載所有信息內(nèi)容,這樣觸碰標(biāo)簽或折疊導(dǎo)航的時(shí)候時(shí),被收起的內(nèi)容就會(huì)立即顯示。如果采用這種辦法,即使用戶在各種信息之間切換的過(guò)程中掉線了也沒(méi)關(guān)系。但是有個(gè)弊端:不管用戶閱讀與否,也必須下載所有的產(chǎn)品信息;這為服務(wù)器帶來(lái)更大負(fù)荷,而且也會(huì)占用戶較多帶寬。

照片庫(kù)

照片庫(kù)對(duì)電子商務(wù)領(lǐng)域如服裝和消費(fèi)電子行業(yè)來(lái)說(shuō)特別重要。在Home Depot上購(gòu)物時(shí),看衣服、鞋子、高端智能機(jī)或平板電腦你可能并不需要看到商品的三視圖,但圖片總是越多越好。常用的展示方式是可滑動(dòng)的照片庫(kù),“雙擊照片放大”,單擊縮略圖以選擇照片。

 

69f85698849b32f87574bec38555.jpg

 

Payless非常英明地將“雙擊放大”的提示框放在屏幕中心并持續(xù)幾秒,給購(gòu)物者充分的時(shí)間去消化理解網(wǎng)頁(yè)的操作方式。對(duì)服裝和鞋子來(lái)說(shuō),放大商品圖片查看細(xì)節(jié)非常重要。

 

2605569884b66ac725af238198e5.jpg

 

Dockers(上左圖)具有可滑動(dòng)的照片庫(kù),雙擊放大查看細(xì)節(jié),而且購(gòu)物者可以查看同一商品的不用顏色。Levi(上右圖)也用了類似方式,但添加了商品縮略圖,顯示照片庫(kù)內(nèi)不同視角的照片。在Docker上,選擇另一種顏色的商品會(huì)令網(wǎng)頁(yè)刷新,但Levi不會(huì)。

 

Levi網(wǎng)站在用戶選擇商品的不同色彩時(shí)大多數(shù)網(wǎng)頁(yè)不會(huì)刷新,這似乎能帶給用戶更好的體驗(yàn)。但是,如果對(duì)比Levi和Dockers網(wǎng)站在同一天同一時(shí)刻的表現(xiàn),你會(huì)發(fā)現(xiàn)觸碰Levi上的顏色標(biāo)簽并等待響應(yīng)照片載入所花的時(shí)間,竟然比Dockers刷新一整個(gè)網(wǎng)頁(yè)的時(shí)間要多。Levi之所以這么慢,可能是因?yàn)樗€要刷新那5個(gè)縮略圖,加上主要照片和其他不可見的元素,這種負(fù)載比較重??磥?lái)每種方式都有利有弊。

 

f200569884d06ac725af2318b247.jpg

 

三星(上圖左)和戴爾(上圖右)的照片庫(kù)都可以左右滑動(dòng)。三星還將折疊導(dǎo)航合并到產(chǎn)品也,戴爾則單純只有照片。

 

三星的方式似乎更人性化,因?yàn)轫?yè)面相對(duì)更少。三星和戴爾都使用了高分辨率的照片,顯然在展示價(jià)值不菲的產(chǎn)品時(shí)圖片質(zhì)量很重要。戴爾的方式有一個(gè)好處,那就是消費(fèi)者會(huì)更專注于產(chǎn)品本身,而不被頁(yè)面的其他內(nèi)容干擾。

購(gòu)物車

購(gòu)物車通常用表格來(lái)展示商品。除了展示需要購(gòu)買的商品,還提供其他功能,比如可以保存訂單,保存商品到收藏夾,刪除商品或更新數(shù)量,選擇快遞或?qū)嵨锏昴秘?,接受促銷卷或優(yōu)惠券,以及結(jié)賬等。一旦加入了商品,就可以通過(guò)網(wǎng)站頁(yè)頭的購(gòu)物車圖標(biāo)或者全網(wǎng)站導(dǎo)航菜單進(jìn)入購(gòu)物車。

e19c569884e732f87574be99e78c.jpg

 



作者:插畫師景豆豆
鏈接:https://www.zcool.com.cn/article/ZMzg0Nzk2.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

日歷

鏈接

個(gè)人資料

存檔