溫郭英 陳小剛

摘 要：隨著“互聯(lián)網(wǎng)+”迅猛發(fā)展，即使不是走在時(shí)代風(fēng)口浪尖上的產(chǎn)業(yè)，也無法避免科技所帶來的壓迫感，而這種壓力的導(dǎo)向由掌握企業(yè)未來發(fā)展的目標(biāo)用戶決定。用戶的視覺差異要求web界面帶來舒適感，這也是傳統(tǒng)競拍網(wǎng)站要進(jìn)行界面迭代的目的。

關(guān)鍵詞：迭代設(shè)計(jì)；必要性

迭代設(shè)計(jì)是一個(gè)系統(tǒng)循環(huán)往復(fù)的修正過程，針對現(xiàn)有研發(fā)技術(shù)和團(tuán)隊(duì)實(shí)力來制定完善系統(tǒng)的改進(jìn)目標(biāo)。一個(gè)系統(tǒng)改良和改版都是以用戶需求為前提，即以業(yè)務(wù)需求為導(dǎo)向，當(dāng)業(yè)務(wù)發(fā)展到一定的規(guī)模時(shí)，底層需求要升級，表現(xiàn)層可以不變化；如果表現(xiàn)層需求要改版，底層也可以不變化；而當(dāng)產(chǎn)品的業(yè)務(wù)需求發(fā)生變化，那么底層需求和表現(xiàn)層都要迭代。本文以益鑫聯(lián)網(wǎng)站改版到五阿哥網(wǎng)站這一迭代過程來研論傳統(tǒng)營銷型網(wǎng)站迭代設(shè)計(jì)的必要性。

五阿哥（www.wuage.com）在線競價(jià)網(wǎng)站的前身為五礦集團(tuán)搭建的B2B線上競價(jià)網(wǎng)站，主要經(jīng)營的是鋼鐵制品，[1]是從鑫益聯(lián)（www.xinyilian.com）這一舊版迭代而來，主要業(yè)務(wù)用于大宗貨品的競拍。[2]企業(yè)隸屬性質(zhì)決定了此網(wǎng)站的界面過于傳統(tǒng)保守，與ERP資源管理系統(tǒng)風(fēng)格如出一轍。早期版本在設(shè)計(jì)上的短板造成了市場競爭力不足，系統(tǒng)可用性低，用戶體驗(yàn)差，視覺吸引力薄弱。導(dǎo)致其市場競爭力不足的癥結(jié)表現(xiàn)在：第一，界面設(shè)計(jì)不友好，畫面呆板，信息無法識(shí)別；第二，功能結(jié)構(gòu)不完善，買賣雙方信息交流不通暢，交互邏輯不清晰；第三系統(tǒng)可用性、維護(hù)性無保障。

綜上幾點(diǎn)，筆者提出了鑫益聯(lián)競價(jià)網(wǎng)站界面設(shè)計(jì)迭代的必要性：

1 布局繁雜

扁平垂直式可視化結(jié)構(gòu)是為了獲取更好的用戶體驗(yàn)，友好的信息分化更能吸引用戶的第一感官。整體使用塊狀分割，用戶一目了然，快捷、方便的找尋目標(biāo)信息。改版前的界面布局為了在首頁堆砌更多內(nèi)容，違反了垂直快速分預(yù)覽的原則，擾亂視覺，降低了興趣度，首頁退出率高。整體構(gòu)圖混亂主要反映在以下兩點(diǎn)：

1.1 構(gòu)圖不合理布局

在遵從時(shí)下最為流行的垂直式可視化預(yù)覽的基礎(chǔ)上，綜合用戶思維流向走勢和頁面在移動(dòng)端瀏覽，本系統(tǒng)在改版后采用一列式信息塊。方便了用戶快速完成目標(biāo)操作，成就系統(tǒng)轉(zhuǎn)為散戶到真實(shí)客戶過程。而舊版一列式和兩列式混合排版，混淆用戶視覺，不利于信息識(shí)別。

1.2 信息塊結(jié)構(gòu)的不科學(xué)

改版前的信息塊很復(fù)雜，用戶瀏覽如同進(jìn)入了迷宮。首頁主導(dǎo)航“企業(yè)專區(qū)”“資源求購”“鑫拼客”“競價(jià)”“商情資訊”“數(shù)據(jù)中心”“物流服務(wù)”，副導(dǎo)航“棒線材”“熱軋板卷”“冷軋及涂鍍”“其他”等產(chǎn)品。首頁下拉推送“今日熱銷”“企業(yè)專區(qū)”“火熱搶拍”“資源求購”“商情資訊”“網(wǎng)站公告”，整個(gè)信息布局無統(tǒng)一，注重內(nèi)容盡量展示的結(jié)果，增加了用戶的視覺壓力。根據(jù)歷史業(yè)務(wù)發(fā)展方向，舊版系統(tǒng)在產(chǎn)品銷售上的貢獻(xiàn)不大，只是作為業(yè)務(wù)瀏覽的一個(gè)端口，相較僵尸網(wǎng)站而言略微強(qiáng)些。掃視整個(gè)業(yè)務(wù)流程，由于信息塊結(jié)構(gòu)不清晰，內(nèi)容無法識(shí)別，改版勢在必行。改版后信息簡潔，遵從了少則是多的原則。主導(dǎo)航“比價(jià)配貨”“鋼鐵拍檔”“聚惠”“物流服務(wù)”，副導(dǎo)航“熱軋花紋類”“冷軋涂鍍類”“不銹鋼/管材”“棒材/型材/線材”“帶鋼及其他”，首頁下拉推送則是副導(dǎo)航頻道優(yōu)質(zhì)產(chǎn)品展示。信息塊分布較前明了，不會(huì)出現(xiàn)套疊堆砌現(xiàn)象，更易查找目標(biāo)產(chǎn)品。另外，據(jù)買家業(yè)務(wù)需求來看，其動(dòng)機(jī)主要是詢盤、議價(jià)，而賣家需要甄別、篩選買家，在設(shè)置產(chǎn)品頁類目是不作更多的考慮，以買賣雙方的瀏覽詳情習(xí)慣為標(biāo)準(zhǔn)，整個(gè)產(chǎn)品信息傾向于列表式的瀏覽，如此信息塊狀簡潔多了，利于用戶查找目標(biāo)信息，體現(xiàn)了頁面的友好交流。

2 交互邏輯紊亂

界面的層級表現(xiàn)在表現(xiàn)層的信息結(jié)構(gòu)上，好比一個(gè)系統(tǒng)存在的價(jià)值由市場導(dǎo)向來決定，運(yùn)營則在銷售中占很大比重。線下銷售可以通過服務(wù)、產(chǎn)品品質(zhì)、附帶價(jià)值、管理體制等來提升營業(yè)額，而線上銷售系統(tǒng)的可用性則是產(chǎn)品是否被用戶所接受的關(guān)鍵。表現(xiàn)層交互邏輯主要體現(xiàn)在交易流程和信息展示兩方面。從頻道頁—產(chǎn)品頁—競拍交易流程一系列動(dòng)作的完成，級別差異的權(quán)重設(shè)置影響了客戶的忠誠度，考量的是整個(gè)系統(tǒng)的交互邏輯結(jié)構(gòu)是否嚴(yán)謹(jǐn)。

2.1 交易流程

原版產(chǎn)品頁上做交易對接，然后進(jìn)行競拍流程“交保證金”“參與競拍”“競拍成功”“支付貨款”“交易完成”，點(diǎn)擊的這些層級無法在現(xiàn)有的技術(shù)上做資金閉環(huán)回流。當(dāng)前價(jià)和出價(jià)之間無法封閉鏈接，出現(xiàn)了斷口，導(dǎo)致營業(yè)額不理想，資金沉淀少，回流鏈中斷，直接影響后續(xù)收發(fā)貨、收發(fā)票沒有實(shí)質(zhì)的線上意義。交互模型存在不合理，層級架構(gòu)無法認(rèn)可。新版考慮到第三方金融系統(tǒng)接入不完善這一致命bug，分析了目標(biāo)用戶業(yè)務(wù)需求。由于系統(tǒng)產(chǎn)品屬于大宗交易，與一般性的C2C交易流程不一樣，交易額都在十幾萬到上百萬以上，買賣雙方都非常慎重考慮風(fēng)險(xiǎn)性，買家在詢盤后對話議價(jià)，由賣家推送訂單給自己中意的買家，如此形成一個(gè)簡潔的封閉生態(tài)環(huán)境，系統(tǒng)通過賣家產(chǎn)品交易額進(jìn)行資金沉淀操作。資金流通過的是阿里網(wǎng)商銀行，改版后的新平臺(tái)接入現(xiàn)成的企業(yè)支付寶和阿里網(wǎng)銀，高效、安全的商銀體系給業(yè)務(wù)帶來了便利性和忠誠度。

2.2 產(chǎn)品信息展示

原版缺陷：沿襲傳統(tǒng)查找目標(biāo)產(chǎn)品的過程，從首頁—頻道頁—產(chǎn)品頁，在出價(jià)記錄一欄，原始設(shè)計(jì)為記錄可全部顯示，由于未采用流式布局，發(fā)現(xiàn)如果記錄超過10條就會(huì)嚴(yán)重影響頁面樣式及布局，導(dǎo)致下方欄目的錯(cuò)行和折行。另外，考慮到系統(tǒng)內(nèi)的大多買家都是終端生產(chǎn)企業(yè)，而鋼材這種標(biāo)準(zhǔn)類產(chǎn)品，除了表面處理和加工工藝，商品詳情頁都是類似的，真實(shí)的用戶更喜歡列表多的瀏覽。由此，經(jīng)過重新設(shè)計(jì)和試驗(yàn)，在每個(gè)類目中以價(jià)格升序排列的方式展示產(chǎn)品，新版在產(chǎn)品記錄欄目下方加入分頁功能，即頁面底部放置滾動(dòng)翻頁。超過25條自動(dòng)翻頁，這樣既不影響記錄的顯示，又能保證完整的界面樣式。在滿足用戶的前提下，壓縮數(shù)據(jù)空間，加快了網(wǎng)站的響應(yīng)速度。

3 可用性弱

前面講述的系統(tǒng)界面布局的不合理性和交互邏輯的紊亂，導(dǎo)致頁面瀏覽退出率高，投入產(chǎn)出不成正比，系統(tǒng)開發(fā)目標(biāo)無意義。一個(gè)好的網(wǎng)站界面，首先要讓瀏覽者感到界面的布局、信息架構(gòu)、色彩搭配、交互操作、圖形識(shí)別、字體設(shè)計(jì)等方面都有出彩的地方。新舊兩版除了在色彩搭配和字體設(shè)計(jì)上沒有太多的改變，而在布局、信息結(jié)構(gòu)、交互邏輯上做了大改動(dòng)。

其一體現(xiàn)在視覺界面上，布局簡潔，偏平列式下拉，適應(yīng)了人類瀏覽信息的視覺習(xí)慣，創(chuàng)造了舒適的查找環(huán)境。信息結(jié)構(gòu)變單一列示產(chǎn)品詳情為多條整合列示產(chǎn)品詳情，方便買賣雙方了解交易信息，滿足了用體驗(yàn)的需求。[3]其二是交互操作層面，交易交互流程是整個(gè)系統(tǒng)改變最關(guān)鍵的。在原版出價(jià)—報(bào)價(jià)—中標(biāo)—交易這一產(chǎn)品交割的過程，由于資金鏈斷口，存在巨大的銀聯(lián)漏洞。而經(jīng)過改版后，通過買家詢盤、議價(jià)和賣家篩選、推介兩者間進(jìn)行閉合談判，最后在網(wǎng)商銀聯(lián)依存的企業(yè)金融平臺(tái)交易，降低了風(fēng)險(xiǎn)系數(shù)，給平臺(tái)提供了安全、有效的交易環(huán)境，滿足了系統(tǒng)營銷目標(biāo)。

總之，營銷型企業(yè)網(wǎng)站應(yīng)在有用性的前提下，在系統(tǒng)開發(fā)的市場調(diào)研的基礎(chǔ)上，以目標(biāo)用戶為根本，進(jìn)行系統(tǒng)的版面迭代，時(shí)刻以其有無必要性來考量，在現(xiàn)有的技術(shù)支持下把系統(tǒng)開發(fā)做到極致。

參考文獻(xiàn)：

[1]羅海濱.對中小型鋼鐵企業(yè)帶出品銷售模式的思考[J].冶金經(jīng)濟(jì)與管理，2000.

[2]汪然.大宗商品電子交易平臺(tái)本質(zhì)與建設(shè)研究[D].東北大學(xué)，2013.

[3]王曉丹.以人為本創(chuàng)新感受——淺談網(wǎng)頁設(shè)計(jì)的用戶體驗(yàn)[J].中國藝術(shù)，2012.