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

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

關鍵詞：校友便、用戶界面設計、網(wǎng)站信息架構.

1校友便用戶界面設計解析

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

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

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

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

1.2網(wǎng)頁字體

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

1.3頁面色彩

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

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

1.4校友便用戶界面設計解析

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

1.4.1網(wǎng)頁布局

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

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

1.4.2視覺流程

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

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

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

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

2.1用戶分析

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

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

2.2信息架構

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

2.3導航系統(tǒng)

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

2.4網(wǎng)站的標志與風格

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

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

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

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

參考文獻

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

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

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

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

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

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

（指導老師：戴磊）

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