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

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

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

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

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

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

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

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

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

1.2網(wǎng)頁字體

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

1.3頁面色彩

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

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

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

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

1.4.1網(wǎng)頁布局

網(wǎng)頁中的內(nèi)容豐富，我們要將不同的元素展現(xiàn)出來，網(wǎng)頁的排版是很重要的，我們不光要使網(wǎng)頁簡(jiǎn)潔美觀，更重要的是，我們要準(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é)奏感，也可以分割版塊;線的作用是對(duì)其整體的版式進(jìn)行分割，使網(wǎng)頁的版式有引導(dǎo)作用;

1.4.2視覺流程

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

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

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

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

2.1用戶分析

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

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

2.2信息架構(gòu)

此網(wǎng)站是的內(nèi)容是學(xué)生實(shí)有的物品來就近交換，無線下實(shí)體，其頁面簡(jiǎn)單明了.網(wǎng)站的信息架構(gòu)設(shè)計(jì)將內(nèi)容分為五大板塊，首頁，是瀏覽頁面，先登錄才會(huì)有買賣詳情頁面，且實(shí)時(shí)更新.二手交易模塊，包含生活用品，電子產(chǎn)品，書籍資料等.物品租賃包含生活電子體育用品等.校內(nèi)新聞主要播報(bào)近一周內(nèi)的校園新鮮事和下一周的工作主要事項(xiàng)，還有公益性知識(shí)和失物招領(lǐng).校園兼職分為臨時(shí)兼職、長(zhǎ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)，按照版塊、欄目、次級(jí)欄目關(guān)系進(jìn)行鏈接，結(jié)構(gòu)利于用戶的理解，在校友便導(dǎo)航設(shè)計(jì)中人員一般都是用導(dǎo)航欄逐層搜索.

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

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

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

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

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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