熱門(mén)標簽
- 國營(yíng)中洲農場(chǎng)制作網(wǎng)頁(yè)
- 萬(wàn)埠網(wǎng)站建設
- 蘆臺網(wǎng)站制作公司
- 尕楞網(wǎng)站建設制作
- 智鳳SEO
- 桂集網(wǎng)站定制
- 雙崗網(wǎng)站設計制作
- 電子商務(wù)網(wǎng)站設計小組報告
- 蓬安網(wǎng)絡(luò )推廣
- 桑科營(yíng)銷(xiāo)型網(wǎng)站建設
- 顏厝網(wǎng)站定制
- 長(cháng)勝南網(wǎng)站建設制作
- 父城網(wǎng)站開(kāi)發(fā)公司
- 三岔SEO
- 巴彥烏蘭蘇木網(wǎng)站制作公司
- 福興網(wǎng)站設計
- 湖州網(wǎng)站設計力推億企邦
- 關(guān)集網(wǎng)站設計
- 源西網(wǎng)站建設
- 草場(chǎng)做網(wǎng)站
手機網(wǎng)站如何做好設計手機網(wǎng)站設計
現在人們漸漸用智能手機代替PC,連購物也是如此。正當越來(lái)越多的人由電腦桌面向移動(dòng)網(wǎng)頁(yè)轉移,購買(mǎi)產(chǎn)品和服務(wù),深圳網(wǎng)站建設可以使用已存的設計模式來(lái)開(kāi)啟移動(dòng)電子商務(wù)計劃。擁有良好的電子商務(wù)經(jīng)驗非常重要。實(shí)際上,近期的研究發(fā)現,如果能用手機登陸購物網(wǎng)站且過(guò)程體驗良好,多于67%的人都愿意下單。
深圳網(wǎng)站建設-云梯認為使用設計模式的優(yōu)點(diǎn)在于,你可以看到其他設計師是如何解決類(lèi)似的問(wèn)題,這樣你就不用走彎路。還能使你了解到人們在其他網(wǎng)站使用類(lèi)似功能時(shí)的需求,并以此為參考來(lái)設計網(wǎng)站;并鼓勵你思考自己一個(gè)人做設計時(shí)不會(huì )想到的設計方法。
本文中,深圳網(wǎng)站建設-云梯專(zhuān)注于智能手機,而不是圖表。我們將介紹一些用于移動(dòng)電子商務(wù)功能的設計模式和方法,如下:·主頁(yè) ·導航 ·搜索建議 ·搜索結果·搜索過(guò)濾和分類(lèi)·產(chǎn)品頁(yè)·圖片庫·購物車(chē)·賬戶(hù)或游客登錄·表格
本文中所有例子都來(lái)源于移動(dòng)網(wǎng)頁(yè),在智能手機瀏覽器中運行。大多數屬于大型百貨零售商,因為他們有龐大的產(chǎn)品目錄,這就需要考慮周全的設計方式,以突出搜索,并將搜索結果進(jìn)行過(guò)濾和分類(lèi)。本文還有許多基于電子商務(wù)的原生app,許多模式都能很好的運用其上。
主頁(yè)
在移動(dòng)設備上訪(fǎng)問(wèn)網(wǎng)頁(yè),主頁(yè)內容通常較少,更多是幫助用戶(hù)找到所需的內容。常見(jiàn)的模式就是一欄促銷(xiāo),一欄鏈接列表或產(chǎn)品目錄,很簡(jiǎn)單。關(guān)鍵詞搜索一般都有,還有店鋪的鏈接,訂閱促銷(xiāo)郵件及忠誠度計劃的登記表。
亞馬遜和梅西都使用促銷(xiāo)商品和列表目錄混排的方式。
塔吉特的促銷(xiāo)內容比簡(jiǎn)單列表占據屏幕更大的空間,極具視覺(jué)沖擊力。
Threadless使用儀表盤(pán)模式,比起移動(dòng)電子商務(wù)網(wǎng)頁(yè),在原生應用中較為常見(jiàn)。
如果購物者來(lái)你的網(wǎng)站是為了快速比較價(jià)格,那么他們更需要的便是簡(jiǎn)單的列表樣式和搜索功能。如果他們是來(lái)關(guān)注促銷(xiāo)和打折的,那么塔吉特的設計模式就更合適。因此,你需要分析消費者來(lái)你的網(wǎng)站的目的,以此決定合適的設計模式。
導航
除了使用主頁(yè)作為主要的導航中心,許多網(wǎng)站也在多數頁(yè)面上設置了導航目錄,通常是作為頁(yè)頭。這讓消費者能輕松在頁(yè)面間跳轉,而無(wú)需回到主頁(yè)。
lowe的導航目錄中,每個(gè)選項都有圖標。best buy的目錄則使用了兩欄的排版,并且用按鈕替代列表。Lowe的目錄出現時(shí)會(huì )覆蓋整個(gè)頁(yè)面,而B(niǎo)est Buy的目錄出現時(shí)會(huì )向下推擠屏幕上的其他內容。
Macy的導航目錄包含下級選項。CVS則具有雙欄目錄,每個(gè)選項也有圖標。它們的目錄都在頁(yè)面頂端展示。
看了上面的屏幕截圖,設計網(wǎng)頁(yè)導航的方式多種多樣。Lowe的設計很簡(jiǎn)潔,而且圖標帶來(lái)了一些視覺(jué)上的亮點(diǎn)。而導航以外的其余內容都隱入背景,這使用戶(hù)在選擇導航內容時(shí),更集中于當前目標。CVS的版式相對雜亂,兩欄的選項,每個(gè)項目都搭配了圖標。CVS的目錄上有許多可以點(diǎn)擊的bar,相互之間很接近,這在觸摸屏上可能導致可用性問(wèn)題。
有趣的是,大型電子商務(wù)網(wǎng)站通常不會(huì )一次顯示許多導航選項。它們嘗試在導航的視覺(jué)設計和網(wǎng)頁(yè)信息構架之間尋求平衡,仔細考慮應存在于全站導航上的項目的數量。通過(guò)網(wǎng)站分析來(lái)確定消費者會(huì )點(diǎn)擊哪個(gè)目錄選項,可以幫助你決定目錄上的內容。可對不同的設計進(jìn)行A/B測試和可用性測試,看看哪種設計選項太多太雜,理想方案應使人們不但找到建議內容,也能找到需要的內容。——為了商業(yè)需求,也為了用戶(hù)需求。
搜索建議
搜索建議,也叫輸入提示或自動(dòng)填寫(xiě),當消費者鍵入前幾個(gè)字幕的時(shí)候就顯示出可能的輸入結果。在常用搜索中,這對消費者來(lái)說(shuō)真的很方便,特別是當輸入內容很長(cháng)的時(shí)候。而搜索建議的一個(gè)局限就是:在虛擬鍵盤(pán)上很容易輸錯字,這會(huì )改變建議的結果。而顯示常見(jiàn)“正確”的結果可能更有用。而且,考慮使用改進(jìn)的自動(dòng)建議模式來(lái)減少輸入內容,在有效率的前提下使用更慢的移動(dòng)帶寬。
在Office Depot網(wǎng)站的搜索框中輸入“draf”時(shí),會(huì )自動(dòng)提示數個(gè)可能的結果。如果錯打成“drag”,就會(huì )顯示出一些和搜索內容無(wú)關(guān)的結果。在虛擬鍵盤(pán)上輸錯字母是很常見(jiàn)的問(wèn)題。
人們在輸入時(shí)的錯誤,設計師也無(wú)可奈何。不過(guò)他們可以用其他方式使消費者找到產(chǎn)品頁(yè),例如,產(chǎn)品類(lèi)別或頂層類(lèi)別的目錄可以向下延展出列表。網(wǎng)站管理者也可以?xún)?yōu)化搜索引擎的功能,如當用戶(hù)輸入“dragt”時(shí),再建議“draft”的結果。你使用的搜索引擎技術(shù)將決定你解決問(wèn)題的方式。
搜索結果
在移動(dòng)電子商務(wù)網(wǎng)站上的搜索結果主要使用兩種樣式:表格展示和網(wǎng)格展示。表格展示會(huì )顯示一張產(chǎn)品縮略圖和一些密集排列的基本信息如產(chǎn)品名稱(chēng)、價(jià)格。網(wǎng)格展示則會(huì )顯示較大的圖片而使用更少的描述信息。一些網(wǎng)站允許消費者在兩種展示方式之間切換。
zappos以網(wǎng)格顯示搜索結果,這使它可以使用更大的產(chǎn)品圖片,使消費者買(mǎi)鞋的時(shí)候偏于以感性作出選擇。Walgreens使用包含按鈕的表格,按鈕的功能一個(gè)是在店中找到商品,另一個(gè)是將商品加入購物車(chē)。
OfficeMax讓消費者在海量的搜索項目中——如輸入“紙”搜索——選擇子類(lèi)別。一旦選擇了子類(lèi),搜索結果將以表格展示出來(lái)。如果搜索“剪刀”,搜索結果的子類(lèi)別會(huì )較少,這讓消費者能直接在表格中看到結果。
如果產(chǎn)品的分級雜亂不清,此時(shí)讓消費者選擇子類(lèi)別可能會(huì )導致一些問(wèn)題。如上面在OfficeMax的例子中,某人想買(mǎi)8.5x11英寸的家用打印紙,他可能不知道該在“復印紙&多用紙”還是該在“激光紙”的目錄下找。一種比較好的解決方式就是在搜索過(guò)濾器下邊列出子目錄,可以與其它過(guò)濾方式并列呈現,如“顏色”和“尺寸”。每隔一段時(shí)間(4-6周)就對具有代表性的用戶(hù)、常見(jiàn)搜索項目和熱銷(xiāo)產(chǎn)品進(jìn)行測試,這可有助于你洞察哪種解決方式更佳。A/B測試也可以揭示出哪一種方式能讓更多用戶(hù)到達產(chǎn)品頁(yè)并具有更高的支付率。
Gap的默認搜索結果以表格展示,同時(shí)提供網(wǎng)格展示方式的選擇。注意,Gap也在關(guān)鍵詞區域保持搜索項目。
Gap的用戶(hù)可以選擇搜索商品的展示方式,這讓它們可以隨時(shí)在易于瀏覽的形式和具有大圖的形式之間轉換。但其實(shí)Gap可以在網(wǎng)格展示方式中保留一些商品信息——如價(jià)格(像Zappo所做的那樣)
一些諸如價(jià)格和顏色的細節讓用戶(hù)更容易決定想要了解哪個(gè)商品的更多信息。
在關(guān)鍵詞區域保持搜索文字也可以提醒用戶(hù)他們正在搜索的內容,讓他們更容易通過(guò)添加一些限制詞(如“紅色”)來(lái)細化搜索結果。
在Gap中搜索“男式tshirts(正確寫(xiě)法為t-shirts)”,你會(huì )來(lái)到無(wú)搜索結果頁(yè)面(本文未截圖),而且也不提供“男式 t-shirts”的搜索鏈接。Gap可以在搜索結果頁(yè)面添加“你是否要搜索-某物品”的搜索建議來(lái)提升其用戶(hù)體驗。Google就會(huì )列出“mens t shirts”的搜索建議,如果用戶(hù)忽略,它就會(huì )直接呈現出“men’s t-shirts”的搜索結果。
結果分類(lèi)
將搜索結果分類(lèi)可以幫助購買(mǎi)用戶(hù)以一種有規律的方式組織起海量的搜索結果,通常會(huì )按照價(jià)格和消費者評分排列。常見(jiàn)的分類(lèi)界面樣式是按鈕和<選擇>菜單。
Walmart讓用戶(hù)點(diǎn)擊三個(gè)按鈕之一來(lái)將結果分類(lèi)。Sears使用了類(lèi)似的方式,但有一個(gè)“分段控制”,Javas cript框架如jQuery移動(dòng)開(kāi)發(fā)正在使這些類(lèi)似app的界面小部件對設計師來(lái)說(shuō)更易用。
J.C. Penney可以通過(guò)有點(diǎn)自定義樣式的<選擇>菜單來(lái)分類(lèi)結果,Eddie Bauer則使用了瀏覽器的默認<選擇>菜單。兩者都通過(guò)瀏覽器的本地控制來(lái)觸發(fā)<選擇>菜單(本例中為iphone選擇器)
Walmart的按鈕之間空間較大,點(diǎn)擊起來(lái)不易出錯,但同時(shí)也因此無(wú)法容納更多選項,而Sears有四個(gè)按鈕,包含一個(gè)“全部”的按鈕,這使得用戶(hù)在分類(lèi)篩選后沒(méi)有找到所需商品時(shí)可以回到初始頁(yè)面。用<選擇>菜單是一種很安全的選擇,因為現代移動(dòng)瀏覽器都支持這種方式,這使應用可以列出更長(cháng)的分類(lèi)選項。但是,也占用了許多有用空間。這些都是可用常規測試方法來(lái)評估的折中設計類(lèi)型。
結果過(guò)濾
過(guò)濾器讓用戶(hù)可以縮小搜索范圍,一般基于諸如顏色,品牌和尺寸等屬性。過(guò)濾器通常要劃分類(lèi)型(稱(chēng)為分面),每個(gè)分面下會(huì )顯示數個(gè)值(比如,顏色就是一種分面,紅色是一種分面值)常見(jiàn)的展示過(guò)濾選項的界面樣式是<選擇>菜單,下拉式菜單和可折疊菜單。現在在技術(shù)上使單個(gè)搜索包含數個(gè)分面值是可以實(shí)現的,但也因此帶來(lái)更高的交互成本,并導致無(wú)搜索結果(比如,低于75美元的交叉訓練運動(dòng)鞋)。
CVS在其高級搜索中使用<選擇>菜單來(lái)過(guò)濾結果,選擇一個(gè)菜單選項將立即對結果進(jìn)行過(guò)濾。JC Penney則提供了一個(gè)下拉菜單來(lái)過(guò)濾結果,并會(huì )提示出符合過(guò)濾值的產(chǎn)品數量。JC Penney也允許一個(gè)分面帶有多個(gè)值,以供用戶(hù)進(jìn)行一次性的選擇,確認信息用戶(hù)要觸碰“apply”按鈕。
Kohl’s在其每個(gè)過(guò)濾類(lèi)型中使用折疊方式收納系列復選框。Threadless把所有搜索分面的值以按鈕體現。兩個(gè)網(wǎng)站中,你只需選擇一個(gè)過(guò)濾值就能立刻看到結果。
在每個(gè)分面值下面顯示商品數量能讓消費者更清楚地了解每個(gè)選擇為他們帶來(lái)的結果。Threadless的方式是用整一屏展示出所有可用的分面值,讓消費者對所有可用搜索結果一目了然。你是選用這種方式還是使用Kohl的方式,取決于你打算為指定產(chǎn)品目錄提供多少過(guò)濾分面值。如果你的產(chǎn)品目錄在分面值方面變化不定,那么你就需要進(jìn)行試驗找出合適的設計方式。你可以?xún)?yōu)化那些熱門(mén)的產(chǎn)品目錄的過(guò)濾結果顯示頁(yè)面。
產(chǎn)品頁(yè)面
產(chǎn)品頁(yè)是電子商務(wù)網(wǎng)站真正展示產(chǎn)品細節的頁(yè)面。它們并不關(guān)于某種模式,而是關(guān)于系列模式,包括標簽,折疊導航和照片庫等系列元素。產(chǎn)品頁(yè)有兩種展示方式,一是包含所有產(chǎn)品信息的長(cháng)頁(yè)面,二是包含標簽或折疊導航能將信息收起的短頁(yè)面。
三星和戴爾都在產(chǎn)品頁(yè)上逐步揭開(kāi)內容,為消費者提供許多信息。三星使用折疊導航來(lái)展開(kāi)大段內容,戴爾則使用標簽。
Cabela和Office Depot都使用一整個(gè)長(cháng)頁(yè)面來(lái)展示產(chǎn)品信息。這種方式需要用戶(hù)頻繁滑動(dòng)屏幕來(lái)獲取信息,但他們就不用觸碰標簽或展開(kāi)折疊導航欄。你需要根據產(chǎn)品信息量的多少和分解信息的方式來(lái)選擇合理的方式。
長(cháng)的產(chǎn)品頁(yè)比起帶折疊導航和標簽的頁(yè)面需要用戶(hù)進(jìn)行更多滾動(dòng)操作,也令購買(mǎi)者需要更費力地找出特定信息。在我自己的可用性測試中,我了解到人們對兩種方式各有偏好,但是似乎對網(wǎng)頁(yè)信息進(jìn)行劃分具有更高的可用性。如果你要采用這種方式,確保在人們觸碰標簽或折疊導航欄的時(shí)候,被收起來(lái)的信息能快速顯示。
一種辦法就是開(kāi)始便一次性加載所有信息內容,這樣觸碰標簽或折疊導航的時(shí)候時(shí),被收起的內容就會(huì )立即顯示。如果采用這種辦法,即使用戶(hù)在各種信息之間切換的過(guò)程中掉線(xiàn)了也沒(méi)關(guān)系。但是有個(gè)弊端:不管用戶(hù)閱讀與否,也必須下載所有的產(chǎn)品信息;這為服務(wù)器帶來(lái)更大負荷,而且也會(huì )占用戶(hù)較多帶寬。
照片庫
照片庫對電子商務(wù)領(lǐng)域如服裝和消費電子行業(yè)來(lái)說(shuō)特別重要。在Home Depot上購物時(shí),看衣服、鞋子、高端智能機或平板電腦你可能并不需要看到商品的三視圖,但圖片總是越多越好。常用的展示方式是可滑動(dòng)的照片庫,“雙擊照片放大”,單擊縮略圖以選擇照片。
Payless非常英明地將“雙擊放大”的提示框放在屏幕中心并持續幾秒,給購物者充分的時(shí)間去消化理解網(wǎng)頁(yè)的操作方式。對服裝和鞋子來(lái)說(shuō),放大商品圖片查看細節非常重要。
Dockers(上左圖)具有可滑動(dòng)的照片庫,雙擊放大查看細節,而且購物者可以查看同一商品的不用顏色。Levi(上右圖)也用了類(lèi)似方式,但添加了商品縮略圖,顯示照片庫內不同視角的照片。在Docker上,選擇另一種顏色的商品會(huì )令網(wǎng)頁(yè)刷新,但Levi不會(huì )。
Levi網(wǎng)站在用戶(hù)選擇商品的不同色彩時(shí)大多數網(wǎng)頁(yè)不會(huì )刷新,這似乎能帶給用戶(hù)更好的體驗。但是,如果對比Levi和Dockers網(wǎng)站在同一天同一時(shí)刻的表現,你會(huì )發(fā)現觸碰Levi上的顏色標簽并等待響應照片載入所花的時(shí)間,竟然比Dockers刷新一整個(gè)網(wǎng)頁(yè)的時(shí)間要多。Levi之所以這么慢,可能是因為它還要刷新那5個(gè)縮略圖,加上主要照片和其他不可見(jiàn)的元素,這種負載比較重。看來(lái)每種方式都有利有弊。
三星(上圖左)和戴爾(上圖右)的照片庫都可以左右滑動(dòng)。三星還將折疊導航合并到產(chǎn)品也,戴爾則單純只有照片。
三星的方式似乎更人性化,因為頁(yè)面相對更少。三星和戴爾都使用了高分辨率的照片,顯然在展示價(jià)值不菲的產(chǎn)品時(shí)圖片質(zhì)量很重要。戴爾的方式有一個(gè)好處,那就是消費者會(huì )更專(zhuān)注于產(chǎn)品本身,而不被頁(yè)面的其他內容干擾。
購物車(chē)
購物車(chē)通常用表格來(lái)展示商品。除了展示需要購買(mǎi)的商品,還提供其他功能,比如可以保存訂單,保存商品到收藏夾,刪除商品或更新數量,選擇快遞或實(shí)物店拿貨,接受促銷(xiāo)卷或優(yōu)惠券,以及結賬等。一旦加入了商品,就可以通過(guò)網(wǎng)站頁(yè)頭的購物車(chē)圖標或者全網(wǎng)站導航菜單進(jìn)入購物車(chē)。
Lowe的購物車(chē)(上左)允許購物者從購物車(chē)中移除類(lèi)似的商品,并提供快遞或實(shí)體店取貨的選項。Bed Bath&Beyond(上右)的購物車(chē)也可以移除商品,商品數量可以在表格中修改,在頁(yè)面下部還有一個(gè)按鈕可以刷新網(wǎng)頁(yè)。
Crate&Barrel(上左)的購物車(chē)每欄也允許用戶(hù)移除商品,保存到收藏夾以及更新數量。每欄還包含快遞信息如費用及送貨時(shí)間。Payless(上右)也允許消費者更新商品數量,移除商品;它的購物車(chē)還提供送貨選項,可以送到Payless實(shí)體店(沒(méi)展示截圖)
購物車(chē)應該提供大的實(shí)用性,因為購物者已經(jīng)接近購買(mǎi)的后幾步了。允許購物者改變數量,移除商品,使用優(yōu)惠券或促銷(xiāo)券而無(wú)須跳轉到它頁(yè),這些功能在引導消費者快速購買(mǎi)的過(guò)程中十分重要。如果你覺(jué)得這會(huì )使網(wǎng)頁(yè)上內容太多,可以先將其隱藏到折疊導航欄,然后使用逐步展開(kāi)的方式來(lái)顯示內容(比如事先隱藏促銷(xiāo)券區域)。
結賬
結賬更像是一個(gè)流程而不是模式,但是模式可以應用到結賬的流程中。許多電子商務(wù)網(wǎng)站允許其移動(dòng)端應用的顧客使用現有賬戶(hù)或以游客身份結賬。對于已經(jīng)擁有賬戶(hù)的用戶(hù),使用已存的支付和快遞信息,結賬的過(guò)程將非常順暢。
Crutchfield和Nordstrom都允許顧客以游客身份或使用現有賬戶(hù)來(lái)結賬。都允許以游客身份結賬的移動(dòng)端應用的購買(mǎi)者在下訂單之后創(chuàng )建賬戶(hù),都支持重置密碼。
Amazon在結賬頁(yè)要求填寫(xiě)郵件地址,無(wú)論購物者以現有賬戶(hù)抑或以游客身份結賬。整個(gè)流程與使用電腦網(wǎng)頁(yè)的支付流程很相似。Target在移動(dòng)端網(wǎng)頁(yè)提供了幾個(gè)選項:登陸或以游客身份結賬或創(chuàng )建賬戶(hù),支持密碼重置。
允許顧客登錄或以游客身份結賬,并可以重置密碼對于移動(dòng)電子商務(wù)的網(wǎng)站來(lái)講是必要的功能。并且,應該考慮邀請手機端用戶(hù)在提交訂單后創(chuàng )建賬戶(hù),因為他們已經(jīng)提供了足夠多的信息(除了密碼之外)。而且到了這一步,顧客們創(chuàng )建賬戶(hù)已經(jīng)非常輕松了,他們一般不會(huì )拒絕。
按下“創(chuàng )建Target.com賬戶(hù)”的按鈕之后,會(huì )導致顧客的購物車(chē)被清空,顧客會(huì )覺(jué)得太麻煩而放棄。因此,確保下單后再在發(fā)貨單邀請用戶(hù)注冊可能更好。限制結賬頁(yè)面上只有兩種選項能提升支付率,因為顧客需要做出的決定更少了。在主要任務(wù)流程中如結賬,越少選擇通常效果越好。
表格
表格常用于移動(dòng)電子商務(wù)的搜索,結賬,注冊和輸入優(yōu)惠券、促銷(xiāo)券代碼時(shí)。在為小屏設計表格時(shí),需明白一些好用的技巧:
·將表格標簽放到輸入欄的上面,以免當用戶(hù)輸入時(shí),標簽偏離了屏幕。
·使用HTML輸入類(lèi)型來(lái)為輸入區域選擇合適的鍵盤(pán)。如果輸入郵件地址,使用;如果輸入號碼,如ZIP代碼,使用或者(或者會(huì )顯示帶有大按鍵的數字小鍵盤(pán))
·僅把非常必要的項目設置為必填項。這會(huì )使顧客在結賬的過(guò)程中更加順暢。
在智能手機上,處理表格的理想方式就是要盡可能的少用它們。你可以使用地理位置服務(wù)來(lái)獲取并給與購物者郵編提示,你可以利用顧客早先在使用你的網(wǎng)站時(shí)輸入的賬戶(hù)信息來(lái)引導它們進(jìn)入結賬流程。記住知名的表格是用戶(hù)不需要填完的表格。
CVS(上左)當用戶(hù)觸碰結賬頁(yè)面的ZIP碼時(shí),并不會(huì )彈出數字鍵盤(pán)。這使得用戶(hù)還要再多一步(點(diǎn)擊123)才能彈出正確的鍵盤(pán)。CVS還把所有的標簽都左對齊了,這樣如果用戶(hù)放大查看某個(gè)表格區域時(shí),這些標簽就可能被擠到了屏幕外。Crate&Barrel(上右)的表格則具有更好的可用性。當用戶(hù)觸碰ZIP碼區域,就會(huì )彈出大的數字鍵盤(pán),所有的表格標簽頁(yè)都是放到表格區域的底部對齊。
記住,表格決定了購物者如何在網(wǎng)頁(yè)上完成交易。一定要特別重視它們,盡一切努力簡(jiǎn)化用戶(hù)完成表格所需的交互。有時(shí)候這甚至意味著(zhù)嘗試一些完全不同的東西。例如,Typeform近建議采取一種新的方式,使網(wǎng)絡(luò )表格更積極響應,更簡(jiǎn)單,也更可用。這種方式就是一次問(wèn)一個(gè)問(wèn)題,問(wèn)題要顯著(zhù)地展示,使用戶(hù)填表時(shí)可以鍵入快捷鍵。雖然這種方法不一定適用于所有情況,但有時(shí)候確實(shí)很有效。
深圳網(wǎng)站建設-云梯總結
移動(dòng)電子商務(wù)是商家的收入來(lái)源,其重要性與日俱增。優(yōu)化的移動(dòng)網(wǎng)頁(yè)提供了許多用戶(hù)在桌面購物體驗中需要和期望的功能,根據Sterling Brands and SmithGeiger的調查顯示,移動(dòng)用戶(hù)更愿意通過(guò)移動(dòng)網(wǎng)頁(yè)購物,如果網(wǎng)頁(yè)可用性高的話(huà)。
你可以使用現存的設計模式來(lái)探索不同的方法,使電子商務(wù)網(wǎng)頁(yè)能在小屏上更快載入。不要滿(mǎn)足于已存的樣式;把它們作為發(fā)掘設計和幫助你多思考新問(wèn)題的跳板。隨著(zhù)瀏覽器性能提升,考慮將原生應用程式的界面設計和交互模式應用到基于瀏覽器的智能手機購物體驗中來(lái)。
http://ezekroy.com/jianzhanzhishi/7622.html 手機網(wǎng)站如何做好設計手機網(wǎng)站設計