貓點觀察

找網頁設計師該做哪些功課?第一次和設計師溝通就上手

如果你對網站架構毫不了解,在架設網站時,與設計師溝通,可能就會出現一個落差,所以要先了解基本的網站設計架構,才能與設計師進一步討論,公司或企業想做的網站長什麼樣,否則可能就會花冤枉錢,設計出不符合自己預期的網站,今天就來介紹網站架構,提供給初次架設網站的朋友參考,讓你能順利的和設計師溝通。

什麼是網站架構?

網站架構其實與一本書的大綱概念有點雷同,想像一下一本書的大綱就是匯集整本書的精華,透過大綱讀者就能了解整本書想要呈現的內容,而網站架構也是相同的道理,涵蓋了整個網站從前端到後端的簡略說明,而網站架構能幫助企業在架設網站時,與網站設計師有更良好的溝通。

舉例來說,如果想要客製化一個產品,應該都會和設計師協調自己的訴求,或是在室內設計時,也會跟室內設計師討論,家中內部的裝潢,哪些是必要的,而網站設計也是如此,企業必須跟網站設計師簡單的說明網站架構圖,讓設計師能了解網站的目標客群、網站導航等資訊,如果對於網站架構還是不懂,可以參考其他企業的網站,再向設計師提出你的想法,也是一種很好的方式。

為何要用網站架構圖與設計師溝通?


透過構圖的方式,可以讓網頁設計師更了解你對網站的訴求,運用網站架構圖與設計師溝通,可以省去很多時間,也可以避免錯誤,而繪製網站架構圖,也可以讓企業或個人對於自己的網站更了解,雖然可能都是網頁設計的門外漢,但毫無準備的將網頁設計丟給設計師,可能最後設計出來的結果不一定會符合自己的需求,而透過事前準備好的一些元素或想法,才能進一步與設計師達成更順暢的溝通。

如何繪製網站架構圖?

其實繪製網站架構圖,不需要太多複雜的東西,只需要一個讓設計師了解大致方向的構圖,像是簡單的區塊分類,或是欄位的名稱設計等,如果你毫無頭緒該如何繪製網站架構圖,這裡也要教大家幾個簡單的方式,就能完成繪製網站架構圖。

搜尋同業的網站

現在網路上有各種形形色色的網站可以參考,最簡單的方法是搜尋與自己同性質的同業網站,看看他們的網站有哪些是必備的網站導航或是介面,最後是符合Google SEO架構的網站,因此,在網路架構圖繪製前,可利用關鍵字搜尋幾個人氣較高的同業網站來當作靈感來源,當然不能有抄襲的情形,但該有的基本架構都可以納入。

這裡也來跟大家簡單介紹,一般的形象網站或購物網站都要必備的介面要素,就是「商品分類」;其實網站架構就像到一家賣場或百貨公司,會有告示牌寫著每個樓層或區域所賣的產品,消費者可以更快速的朝目標過去,而網站架構也是同樣道理,要思考如何讓瀏覽者快速找到想要的資訊,尤其是使用者如果是付費顧客,清楚的網站導航就相當重要。

這裡跟大家介紹一個外掛程式,可以安裝在Google Chrome,如果你搜尋到一個網站很感興趣,想要了解該網站的結構設計,可以使用Wirify外掛工具來看看網站是如何規劃的,只要簡單的安裝,輕鬆點擊就能顯示。

規劃網站架構大綱

網站架構大綱通常不需要太複雜,多數人都是從其他網站做為參考後,匯集成具有特色的網站架構規劃,這邊也要提醒,網頁的分類最好是控制在5個以內,避免過於繁雜,反而會讓瀏覽者找不到重點,簡約清晰的網頁,讓消費者可以一目了然。

舉例來說,像是台灣肯德基的網站,就將網站導航分為5個介面,網站架構整體就會乾淨俐落,而內容的部分則連結到尋找門市等頁面,像這樣的設計方式,就是依照消費者的需求來做設計,清楚的呈現消費者想要的東西。

如果基礎架構規劃好,就能帶給使用者很好的使用體驗,在設計規劃時要以使用者的角度出發,讓網站具備品牌特色,也能讓使用者一下就看懂該去哪裡尋找正確的資訊。

用線框圖或區塊圖畫出網站架構

其實繪製網站架構很容易,只要使用WORD或EXCEL就能畫出來,如果不會電腦操作,也可以使用紙筆繪畫,並把所有想要的內容以線框圖或區塊圖畫下來,一個個區域的標明自己想要的網站導航,設計師就能了解你的想法。

找到網站類似風格

其實就算參考同業的網站,還是會有不同的風格,因此,可以找幾個適合的網站範例,提供給設計師一些想法,在溝通上會變得更容易。

網站資訊參考:

I/O 3000(https://io3000.com/

網站架構繪製時,如果沒有任何的靈感,可以參考I/O 3000這個網站中有很多網站架構可以做為參考,從中也能得到一些靈感,在外觀設計上可以參考這個網站。

RWDJP(https://responsive-jp.com/

這個網站的參考模板較多元,除了網站架構外,還能找到行動裝置的設計,能清楚的呈現響應式設計後在手機上呈現的效果,在這個網站上,可以幫助你找到所需的網站架構。

awwwards(https://www.awwwards.com/

awwwards網站可以說是網頁設計界的奧斯卡,是最新網頁設計的趨勢,很多作品都是經過評分得獎後刊登上去,可以參考這些網頁設計來做為自己網頁的方向,可以給設計師參考當作範本。

One Page Love(https://hend.design/webdesign-02/

One page Love網站上較多是一頁式網站的風格,比較少有其他分頁,因此如果你的網站剛好是一頁式風格,就可以拿來當作參考,上面有很多模板和資源,還有很多值得參考的素材,適合懶人的網站。

MUUUUU(https://muuuuu.org/

MUUUUU這個網站多數為日本的網站設計可以參考,即時不懂日文的朋友也沒關係,可以看著網站的外觀來做選擇,不必在意語言,只要瀏覽網站的風格,當作是自己架設網頁的靈感參考。

與設計師展開討論

充分了解網站的架構和知識後,才能與設計師溝通,而除了外觀外,很多細節也是必須和設計師做討論,像是網站是否具備SEO架構,雖然這是很基本的網站配件,但不見得設計師會懂你的需求,因此,討論時必須告訴設計師,希望在搜尋引擎讓爬蟲更順利,設計師就會幫你建置SEO架構。

成功的網站必備的架構

響應式(RWD)或自適應式(AWD)

隨著智慧型手機的普及,網站設計也必須考量行動裝置的瀏覽,在設計網頁時必須加入響應式(RWD)或自適應式(AWD)的設計,才能讓使用者在不同大小的螢幕下,能正常的瀏覽網頁,卻使用者有好的體驗。

CMS管理後台

如果你沒有寫程式的基礎,那後端一定要有CMS管理後台,才能讓你在未來維護網站或是更新文章時更方便,否則如果靠著HTML去修改文章、產品說明,對於不會寫程式的人會很吃力,也很費工夫,很容易可能會因為網站久而沒更新,就會面臨被淘汰的窘境。

SSL憑證

SSL憑證是現在網站必備的裝置,為了避免駭客入侵和資料的安全,是很重要的一件事情,沒有使用SSL憑證的網站,無論設計多精美,使用者都會有疑慮,也會影響到Google SEO的權重分數。

如何架設一個吸引人的網站?

吸引人的標題:擁有吸引人的標題,就會讓使用者想點進去看內容,這樣就等於成功一步,就像好的實體店面裝潢,想讓消費者走進店裡是相同的意思。

成功的網站主視覺:什麼樣是成功的主視覺呢?就像是店內裝潢的色彩,是否吸引人,人是視覺性的動物,如果圖片或主視覺令人印象深刻,自然消費者就會回頭再來找你。

清晰的網站導航:網站導航對於網站來說很重要,可以清楚的指引網站每個頁面的功能,讓使用者能快速找到需要的資訊,清楚的了解企業的資訊。

快速的內部連結:內部連結必須結合上述清晰的網站導航,讓使用者在點擊網站導航時,快速進入到需要的分頁,引導連結到正確的內容。

行動呼籲:行動呼籲就是將優惠內容或吸引人的產品放在置頂的位置,讓使用者或消費者進入網頁後能第一眼就看到廣告,再透過點擊到預設好的頁面。

用戶見證:如果你所架設的網站是購物網站或形象網站,可以找見證者來推廣產品的好用度,最好是可以找知名的人,增加說服力和可信度。

結語

企業的網站通常都是為了塑造企業形象和品牌推廣而架設,所以最了解品牌的就是老闆或是公司的主管,想要網站呈現哪些內容,還有吸引哪些目標族群,都必須在網站上做出呈現,學會了網站架構規劃的技巧,在開始製作網站時也能事半功倍。