校友便頁面設(shè)計理論研究

李毅 梅竹 馬嘉妮 陳娓琳 王蘇暢

摘要：現(xiàn)階段各種各樣的二手交易平臺，跑腿平臺層出不窮，每個網(wǎng)站的存在都具有其獨(dú)特的價值和意義，但是針對性和綜合性比較欠缺，使得不能多任務(wù)處理.本文就在現(xiàn)階段存在的網(wǎng)站的基礎(chǔ)上，建立一個校友便綜合性的平臺，我們從校友便的的用戶界面設(shè)計和網(wǎng)站信息架構(gòu)這兩個方面來介紹我們的網(wǎng)站。

關(guān)鍵詞：校友便、用戶界面設(shè)計、網(wǎng)站信息架構(gòu).

1校友便用戶界面設(shè)計解析

1.1國內(nèi)外網(wǎng)站分析

通過分析國內(nèi)外不同網(wǎng)站來對其進(jìn)行頁面設(shè)計，從而更好的展示給大家.

1.1.1亞馬遜購物網(wǎng)站

美國的 亞馬遜購物網(wǎng)站是美國最大的購物網(wǎng)站，主要有，標(biāo)題、圖片、價格、運(yùn)費(fèi)倉儲、五行特性，購物車，他的UI特別簡約，以黑白色調(diào)為主，突出了產(chǎn)品.而且搜索也很方便，并且他的分類很細(xì)，盡可能的滿足了大多數(shù)人的需求，特別是客戶評分和價格分類，十分好用. 其網(wǎng)站整體版式對稱且平衡，視線由上到下順序排列，其中也加了動態(tài)設(shè)計，使其界面更加的生動，而且其文字對比強(qiáng)烈使客戶能一目了然，POSHMARK來自美國的二手交易網(wǎng)站也是如此.

1.2網(wǎng)頁字體

網(wǎng)頁的用戶部分主要通過文字來了解網(wǎng)頁的內(nèi)容，由于是交易性的網(wǎng)站，所以整個網(wǎng)站只用了兩種字體，大部分是微軟雅黑，還有一小部分是宋體，此外，網(wǎng)頁的數(shù)字部分字體是Arial，有人說網(wǎng)站字體設(shè)計太單一了，為什么只有一種字體，因為這樣才會使用戶在瀏覽過程中不會產(chǎn)生視覺疲勞，如果在樂隊整篇文章的時候，字體在不停的切換，這樣會使用戶讀起來特別的累.

1.3頁面色彩

網(wǎng)頁的色彩設(shè)計可以給用戶帶來美感，也可以引導(dǎo)用戶的行為.

整個網(wǎng)站以白色為底色，主要的風(fēng)格是簡約的風(fēng)格，因為網(wǎng)站的主要用戶是青年人，所以說整個網(wǎng)站的配色較為活波，主要以暖色調(diào)為主，而且這種色彩色設(shè)計也可以給用戶更好視覺沖擊力.讓用戶有不一樣的感覺.這種簡約的色彩風(fēng)格也是借鑒了國內(nèi)外其他的交易網(wǎng)站，以黑白色調(diào)為主，因為黑白有最佳的對比度和可讀性，簡介明了，能讓用戶用最短的時間找的自己想看的內(nèi)容.

1.4校友便用戶界面設(shè)計解析

網(wǎng)頁設(shè)計的目的就是為了有效的傳遞信息，使用戶更好的了解網(wǎng)頁的內(nèi)容，網(wǎng)頁版式設(shè)計要達(dá)到形式和內(nèi)容一致，版式設(shè)計要依照網(wǎng)頁的目的功能和受眾人群來確定其定位風(fēng)格.

1.4.1網(wǎng)頁布局

網(wǎng)頁中的內(nèi)容豐富，我們要將不同的元素展現(xiàn)出來，網(wǎng)頁的排版是很重要的，我們不光要使網(wǎng)頁簡潔美觀，更重要的是，我們要準(zhǔn)確的表達(dá)出網(wǎng)頁要表達(dá)的東西，為此，我們通過將網(wǎng)頁里面的內(nèi)容轉(zhuǎn)換為點(diǎn)、線、面、的構(gòu)成原則展現(xiàn)在頁面版塊之上.

點(diǎn)、線、面在結(jié)構(gòu)上將網(wǎng)頁分為導(dǎo)航區(qū)，標(biāo)題區(qū)和內(nèi)容區(qū)等，點(diǎn)的疏密程度就可以在網(wǎng)頁中體現(xiàn)網(wǎng)頁的節(jié)奏感，也可以分割版塊;線的作用是對其整體的版式進(jìn)行分割，使網(wǎng)頁的版式有引導(dǎo)作用;

1.4.2視覺流程

校友便首頁為滿版型、二、三級頁面為框架結(jié)構(gòu)式.二三級頁面中圖像，動態(tài)圖較多，視覺元素大小和色彩均不相同，所以采用框架結(jié)構(gòu)，框架結(jié)構(gòu)可以將元素有序的排列在規(guī)則的區(qū)域，方便用戶的使用.

視覺流程主要以豎向為主由上到下，符合用戶的閱讀習(xí)慣，在網(wǎng)頁中運(yùn)用圖片和動圖，引導(dǎo)用戶瀏覽，從而達(dá)到網(wǎng)站的目的.校友便網(wǎng)站雖說只用的一種視覺流程，但是物品交易網(wǎng)站就是以簡約為主，讓人們用最短的時間找到自己所需要的內(nèi)容.

2網(wǎng)站信息架構(gòu)

校友便平臺的用戶界面的設(shè)計是以用戶需求為跟本宗旨，綜合市面上的各種針對大學(xué)生社交群體的軟件，以方便大家的生活學(xué)習(xí)，根據(jù)信息架構(gòu)設(shè)計導(dǎo)航，確定簡約的網(wǎng)頁風(fēng)格和標(biāo)識設(shè)計.

2.1用戶分析

第一，針對群體不同分，其中以大學(xué)生和教職工為網(wǎng)站的主要使用者，我們可以尋找旅游和創(chuàng)業(yè)同伴，便利還體現(xiàn)在二手物品的租賃和交易，例如畢業(yè)生的公共課書籍、水壺、收納箱等可賣給需要人員，校園網(wǎng)、電子體育用品可租賃，豐富了課外活動.校內(nèi)外兼職機(jī)構(gòu)為學(xué)生鍛煉自己、實現(xiàn)自我價值提供機(jī)會，平臺進(jìn)行實名認(rèn)證，保障雙方權(quán)益，如有欠薪資、欺騙等行為可在平臺及時投訴，網(wǎng)站進(jìn)行封號處理.還有校媒體主要發(fā)布校園新聞、公益科普、失物招領(lǐng)等提醒大家.

第二，針對用戶使用情況分為訪問用戶、新老注冊用戶、活躍用戶、流失用戶，分析時主要討論用戶黏性、活躍度、交易成功量，其中新用戶比例大于流失比例為發(fā)展成長階段，持平為穩(wěn)定階段，低于為下滑階段，用戶流失率反映了網(wǎng)站保留用戶的能力和網(wǎng)站本身的優(yōu)劣;活躍用戶為網(wǎng)站的重要交易用戶，以買家或賣家的購買或發(fā)布成功量為主.

2.2信息架構(gòu)

此網(wǎng)站是的內(nèi)容是學(xué)生實有的物品來就近交換，無線下實體，其頁面簡單明了.網(wǎng)站的信息架構(gòu)設(shè)計將內(nèi)容分為五大板塊，首頁，是瀏覽頁面，先登錄才會有買賣詳情頁面，且實時更新.二手交易模塊，包含生活用品，電子產(chǎn)品，書籍資料等.物品租賃包含生活電子體育用品等.校內(nèi)新聞主要播報近一周內(nèi)的校園新鮮事和下一周的工作主要事項，還有公益性知識和失物招領(lǐng).校園兼職分為臨時兼職、長期兼職、創(chuàng)新創(chuàng)業(yè)，主要有代辦服務(wù)，教師，自媒體，創(chuàng)業(yè)等工作.找同伴模塊旨在擴(kuò)大交際圈，減輕迷茫感，尋找志同道合之人，主要體現(xiàn)在學(xué)習(xí)等方面.

2.3導(dǎo)航系統(tǒng)

網(wǎng)站導(dǎo)航是用戶通過頁面間的鏈接組織訪問路徑，目的是為了讓用戶在瀏覽網(wǎng)站的過程中不迷失，可以使其方便快捷的在網(wǎng)站中找的其所需要去的東西.所以，網(wǎng)站導(dǎo)航的關(guān)鍵就是如何把人物和所需要的選擇鏈接起來.校友便網(wǎng)站采取的是樹狀鏈接結(jié)構(gòu)，按照版塊、欄目、次級欄目關(guān)系進(jìn)行鏈接，結(jié)構(gòu)利于用戶的理解，在校友便導(dǎo)航設(shè)計中人員一般都是用導(dǎo)航欄逐層搜索.

2.4網(wǎng)站的標(biāo)志與風(fēng)格

校友便綜合性網(wǎng)站，主要部分就是二手物品交易和物品租賃，所以在總的設(shè)計上就更加偏向于簡約，又因為主要的使用人群是大學(xué)生，所以顏色方面更加鮮艷更加富有活力一點(diǎn)，在版式上采用的大多是分欄結(jié)構(gòu)，分欄可以讓用戶盡可能快的找的其所需要的物品，加速大家的瀏覽速度，方便大家的使用.

網(wǎng)站的標(biāo)志代表了網(wǎng)頁的形象，二手物品交易和物品租賃的主要目的就是、廢物利用，把不需要的二手物品交易出去，已達(dá)到物品的循環(huán)利用，綠色環(huán)保，物品租賃，是為了防止不必要的浪費(fèi)，有些物品只用一兩次的時候，就可以選擇物品租賃，使其不會產(chǎn)生太多的閑置物品.所以我們網(wǎng)站的標(biāo)志主體顏色就選用了環(huán)保為主的綠色，因為面向的主要人群是大學(xué)生，所以我們“校友便”就選擇了卡通，使其看起來更加有活力.

2.5網(wǎng)頁界面設(shè)計

網(wǎng)站首頁設(shè)計將導(dǎo)航欄放置在右上端，方便用戶的使用習(xí)慣，頁面劃分鮮明版式簡潔，頁面左上角有網(wǎng)站的logo，色彩以綠色為主，符合設(shè)計初衷，增強(qiáng)低碳環(huán)保意識，并且取名為“校友便”是根據(jù)大學(xué)師生的需求及廣大人流量為最初想法，導(dǎo)航欄可以讓用戶用最短的時間找到自己所需要東西，注冊和登陸頁面讓用戶進(jìn)行信息認(rèn)證，方便用戶.

參考文獻(xiàn)

[1]王能.基于B/S結(jié)構(gòu)的校園二手交易平臺的構(gòu)建[J]. 信息與電腦2012

[2]蘇文瑾.運(yùn)用ASP技術(shù)構(gòu)建網(wǎng)上商品交易平臺[J]. 信息系程2012

[3]李奕，王少華.論校園二手交易網(wǎng)發(fā)展存在的問題及解決對策[J].校園市場現(xiàn)代化

[4]葉莖，何瓊.基于ASP. NET的網(wǎng)上二手交易平臺的設(shè)計[J]. 電腦知識與技術(shù)2010

[5]何凱，辛怡俐.構(gòu)建高校二手交易平臺的可行性分析[J].中國商界（下半月）

[6]李力東，岳俊華.基于ASP. NET技術(shù)的校園網(wǎng)物品交易平臺[J]. 科技致富向?qū)?010

（指導(dǎo)老師：戴磊）

大學(xué)生創(chuàng)新創(chuàng)業(yè)項目編號：S202010723023