網站的搭建需要的不僅僅是代碼,還需要網站搭建者有着清晰的思路與自己的想法。代碼只是工具,想法才能決定一個網站的層次。本篇文章將介紹從零開始搭建網站的思路,不提供代碼,只講解方法。
網站的核心是什么?信息的傳遞,利用傳遞的信息提供服務。過去人們用紙作為信息的傳輸媒介,隨着互聯網革命的到來,信息的主要傳輸媒介成為了電腦,手機等顯示設備,而網站就是展示信息的舞台。
因為我目前正在搭建一個關於電影,音樂,書籍這三種藝術呈現形式的網站,本文將結合這個實際用例講解,為減少文章篇幅,本文將只討論電影。
一.信息的接受者與發送者都是人,所以我們搭建的第一步是了解哪些人會訪問我們的網站。
年齡階段:網站的目標用戶的年齡的主要分布區間是哪一個年齡段?網站的目標用戶的主要身份/職業是什么?我的答案:愛好上文提到的三種藝術形式的人群基數是較大的,但是會上網搜索、了解最新相關資訊的主要是年齡位於20歲到35歲之間的用戶,而位於這個年齡階段之間很大部分用戶為在校大學生,他們熱愛分享自己的見聞,如果能把握好他們的興奮點會對網站的發展有着很大的幫助。另外一部分主要用戶為剛進入社會的年輕一代,他們是改革開放后第一批成長起來的一代人,對自己喜愛的東西願意花時間與精力追求,是主要的消費群體,這一點可以從最近兩年的電影院觀眾用戶分布年齡段看出來。
二.用戶想從我的網站中獲得什么信息?我的網站有什么功能可以吸引用戶主動訪問?我的答案:我的答案:我將電影分為過去,現在,將來三種。過去即舊電影,現在即正在上映的電影,將來即將上映的電影。結合這三種不同的電影類型,可以將用戶的需求分為以下幾點:(1)用戶想知道最近院線上映的電影有哪些,我可以上這個網站了解一下,有到的電影話就買張票吧;(2)這些電影的質量怎么樣,也許我可以參考一下這個網站的影評;(3)過去有什么好的電影值得我在空閑時間欣賞品味的,也許我可以上這個網站看看大家都有什么推薦的;(4)我有想看的舊電影,但是不知道在哪可以觀看,這個網站是不是有收集好了的電影資源呢?也許我可以上網站找找看。
吸引用戶主動訪問的功能:(1)社區,喜歡同一部電影/演員的用戶可以自己組建一個社區,與他人的不斷的信息交流會增加用戶訪問網站的頻率與時間;(2)積分制,積分積累到了一定數量后用戶等級上升。這是很多網站增加用戶訪問頻率的方法,但是就我個人而言積分的吸引力幾乎為零,因為我沒有感受到等級有什么用呀,我為什么還要提醒自己每天簽到,好煩喲。。。我目前的想法是將積分轉換為抽獎(3)隨機推送制,用戶打開網站頁面后會接受到一個隨機推送的消息,當然這些消息肯定是經過篩選的優良品種。這個機制主要是為了結合用戶的興奮點增加用戶的停留時間,但是也不會引起用戶的反感,很多APP的消息推送機制盲目的追求用戶的停留時間,這反而會打擾到用戶的正常使用,引起用戶的反感,導致用戶體驗下降。
結合上面的分析我畫出了以下的思維導圖:

三.確定了網站的功能后就是網站整體框架的構建了,整體框架的核心是用戶體驗,將網站提供的核心功能直觀的展示給用戶,讓用戶及時的找到其需要的信息。常見的網站框架如下圖所示

整體框架搭建好后可以利用線框圖(wireframe)對網站有一個最簡單的布局設計:

初步設計時需要注意層次化與模塊化。
層次化(visual hierarchy):層次化通常是通過對比度來實現的,對比度又分為以下幾個部分:圖片的尺寸與字體的大小,圖片的顏色與字體的顏色,字體的樣式。很明顯我通過改變這些屬性成功的引起了你的注意。層次化設計時有的朋友會因為想突出的東西太多而導致最重要的元素沒有與其他元素產生對比,最終最重要的元素跟其他普通元素也一起被埋沒了,這一點要切記切記,不要貪心呀。
模塊化(group and similarity):常用的方法是留白,統一背景顏色,邊框;
屬於同一個模塊的元素之間空白較小,不同模塊的元素之間空白較大;相同功能的元素具有統一的背景顏色;為相同功能的模塊添加一個邊框

四.網站的導航欄非常重要,就單獨分析下:導航欄中的每一項必須精簡、准確,比如“聯系我們”精簡成“聯系”是極好的。導航的作用僅僅只是導航,不能將多余的功能強加給導航欄。每個導航欄的一般默認選項不能超過八個

