電子商務(wù)搜索list頁(yè)面用戶體驗(yàn)設(shè)計(jì)(編輯修改稿)
2025-06-12 20:40 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 始喜歡某些界面的時(shí)候，它們事實(shí)上會(huì)變得更可用。 電子商務(wù)垂直搜索 LIST 頁(yè)面的視覺(jué)優(yōu)化，風(fēng)格上我們通常會(huì)支持品牌。目標(biāo)上傳達(dá)出一種強(qiáng)烈的品牌信息，如 阿里巴巴的橙色系列， 1688 的 Logo。但是品牌識(shí)別不止是圖標(biāo)和廣告詞。它遍布在阿里巴巴項(xiàng)目產(chǎn)品設(shè)計(jì)、阿里巴巴的網(wǎng)站，以及阿里巴巴的材料中 事實(shí)上，品牌對(duì)配色方案的選擇、字體、圖形、詞匯表，體現(xiàn)在各個(gè)方向。 視覺(jué)設(shè)計(jì)師制作了內(nèi)容相同而風(fēng)格不同的上百個(gè)界面， 然后產(chǎn)品規(guī)劃與設(shè)計(jì)團(tuán)隊(duì)成員集體投票，選擇一個(gè)最合適的風(fēng)格定位。在設(shè)計(jì)與選擇的過(guò)程中，如果我們很了解目標(biāo)用戶，那么他們的內(nèi)在反應(yīng)和情感反應(yīng)是可以預(yù)見(jiàn)的，并且可以預(yù)見(jiàn)的程度還相當(dāng)驚人。答案就在于實(shí)際情況下很多因素的結(jié)合： 顏色 讓色彩更具有可讀性，少一點(diǎn)顏色，多一點(diǎn)價(jià)值。排版 根據(jù)字體的選擇，文字顏色的選擇，再看內(nèi)在的、情感上的因素來(lái)布局。規(guī)模 避免空間過(guò)度擁擠。角度和形狀 尖銳的角度、線交叉點(diǎn)或多個(gè)線條匯聚的地方，使用這些焦點(diǎn)把用戶的眼光引導(dǎo)到你希望的地方去。重復(fù)出現(xiàn)的視覺(jué)主題 角落處理模式可以給用戶帶來(lái)視覺(jué) 旋律。文本 選擇形散，神不散的字體與文本顏色。圖片 節(jié)制性的使用裝飾性圖片，在功能性 GUI 里謹(jǐn)慎使用，因?yàn)闀?huì)分散用戶注意力。文化因素 如果要表達(dá)明顯的文化含義，考慮下將要面對(duì)的受重。針對(duì)用戶體驗(yàn)設(shè)計(jì)，視覺(jué)優(yōu)化不是萬(wàn)能的，但是沒(méi)有視覺(jué)優(yōu)化階段是萬(wàn)萬(wàn)不能的。 前端代碼優(yōu)化 文件越大，用來(lái)下載和顯示頁(yè)面的時(shí)間就越長(zhǎng)。請(qǐng)記?。何募傮w積，指的是構(gòu)成 Web 頁(yè)面的所有文件，包括： HTML、外部 CSS、外部 JavaScript、圖像、聲音以及視頻在內(nèi)的文件的大小。在這些文件中， HTML、 CSS、以及JavaScript 文 件只是文本文件，因此，常常相當(dāng)緊湊。而圖像、聲音，以及視頻文件通常都很大，存在下載問(wèn)題。 公共網(wǎng)站的頁(yè)面大小，從每頁(yè)小于 20K 到每頁(yè)大于 100K(包括頁(yè)面的所有圖形文件 )。究竟應(yīng)該有多大，即使是所謂的專家在這個(gè)問(wèn)題上，也普遍存在著分歧。如果你的網(wǎng)站需要專業(yè)品質(zhì)的圖形，那么就不可能遵守 20K 定律 。但是，如果目標(biāo)受眾的 Inter 連接速度慢，或者目標(biāo)受眾的耐性有限，你就不得不放棄那令人難以抗拒的漂亮圖像，轉(zhuǎn)而遵守關(guān)于 20K 定律 的限制。怎么樣為有限的文件體積做事先的規(guī)劃呢 ? 把大部分的 CSS 和 JavaScript 文件放入外部文件。只在網(wǎng)站第一次引用這些文件時(shí)，才進(jìn)行下載。之后，網(wǎng)站上任何頁(yè)面都可以重復(fù)使用這些文件，而無(wú)需再次下載。重復(fù)使用不同頁(yè)面的圖形、音頻和視頻。因?yàn)檫@些文件也是在第一次時(shí)，才進(jìn)行下載。不要使用不必要的圖形、動(dòng)畫(huà)或聲音。無(wú)論是出于實(shí)用性的考慮，還是為了增強(qiáng)網(wǎng)站的吸引力，每個(gè)文件都應(yīng)該有清楚的存在于網(wǎng)站上的理由。一個(gè)用于導(dǎo)航，大尺寸、具有吸引力的圖像映射，同時(shí)具備了實(shí)用和美觀兩種用途，就像待售產(chǎn)品的照片一樣。另一方面，應(yīng)該去掉那些只起到填充空白作用的圖形。在可能 的情況下，使用小尺寸圖像，而不是大尺寸圖像。因?yàn)樵谄渌蛩叵嗤臈l件下，與大尺寸圖像相比，小尺寸圖像的下載速度更快。例如：你可能使用一個(gè)平鋪 (重復(fù) )顯示在背景上的小尺寸圖
研究報(bào)告相關(guān)推薦
鄂ICP備17016276號(hào)-1