超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

移動設(shè)計模式

2024-5-30    前端達(dá)人

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

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

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

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

·主頁  

·導(dǎo)航  

·搜索建議

·搜索結(jié)果

·搜索過濾和分類

·產(chǎn)品頁

·圖片庫

·購物車

·賬戶或游客登錄

·表格

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

 

主頁

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

 

c9b7569882026ac725af23e7ad60.jpg

 

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

 

 

0498569881ab6ac725af23bac5c8.jpg

 

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

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

 

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

導(dǎo)航

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

 

cbf2569882186ac725af23c93010.jpg

 

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

 

11cf5698824532f87574be578837.jpg

 

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

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

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

搜索建議

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

 

0249569882666ac725af232553c1.jpg

 

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

 

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

搜索結(jié)果

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

 

97295698828432f87574bea51819.jpg

 

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

 

dff1569882a06ac725af23add0de.jpg

 

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

 

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

 

25a0569882ba6ac725af234530a6.jpg

 

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

 

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

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

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

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

結(jié)果分類

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

 

246f569882de32f87574be90c2fe.jpg

 

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

 

2ee9569882fd6ac725af2376ad8b.jpg

 

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

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

結(jié)果過濾

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

 

 

a20c569883626ac725af23e1019e.jpg

 

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

 

c9215698844832f87574be43468e.jpg

 

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

 

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

產(chǎn)品頁面

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

 

f8f25698846632f87574bede44d3.jpg

 

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

 

49f25698848532f87574bea7abfc.jpg

 

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

 

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

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

照片庫

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

 

69f85698849b32f87574bec38555.jpg

 

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

 

2605569884b66ac725af238198e5.jpg

 

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

 

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

 

f200569884d06ac725af2318b247.jpg

 

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

 

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

購物車

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

e19c569884e732f87574be99e78c.jpg

 



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

分享本文至:

日歷

鏈接

個人資料

存檔