Stella的部落格

 

這次設計官網首頁版面, 是小編人生中第一次接觸html5,一切知識從零開始,想要學習簡單的網站設計,卻又對程式感到既期待又怕受到傷害的人們,這篇學習心得對你再適合也不過!


啊不過,其實我更多時間是花在修圖和設計圖片版面上,所以程式的東西真的只有一丁點......(而且很多都是照搬網路教學資料orz,bootstrap官網就有各版本的簡單教學資料喔),更多是充滿審美偏見與個人偏好的設計想法。


我的首項工作是設計banner,也就是網站置頂的廣告跑馬燈。一開始有兩種設計方向:統一色調或撞色系列,因考慮廣告跑馬燈會變換,故最後選擇了有銜接感,協調性高的同色系,到多圖並立的商品頁面再選擇以搶眼的撞色呈現。

 

1

以藍色為例,左上角即為藍色的撞色,一般適合差不多大小的區塊對立,同時呈現的時候,會有令人眼睛為之一亮的效果!

右上角則是藍色的類比色系,左下則是由深到淺的藍,兩種都是更重視整體感,協調感的表現方法!如果怕鮮艷的顏色設計一不小心太辣眼,同色系是不會出錯的選擇~

右下為互補色,適合一大一小區塊對立,許多網站設計常常會採用藍底,橙色按鈕與文字的呈現,顯得專業又不呆板。

 


決定了主色系,接下來就是內容的文案撰寫與排版了,我參考了一些購物網站的設計,發現多數設計的重點意外不是圖片,而是文字的呈現方式:如何讓文字呈現乾淨易懂卻又不只是循規蹈矩得排成一行行,經過敝人小小的不專業觀察,共有以下三點:

 


(1)切分區塊:banner畫面橫向一般最多可切割成左中右三塊,直向最多分成上下兩部份,比例一般都可以自由調整,只是要確保各個切割區塊的內容在水平或垂直其中一個方向一定要保持對齊,才不會顯得畫面雜亂無章。

2

 以1150*240px的banner為例,大致可以這樣切割畫面

 

34

將相鄰的區塊進行組合,可以排列成例如這樣的格式

 


(2)字體一致:要讓畫面保持一致,最簡單的方式就是一種字體從頭用到尾,只在粗細,大小,斜體以及顏色等地方增添變化,你會意外發現,其實只要這樣,搭配上文句擺放位置,就能設計出內容相當豐富的banner了。

6

這裡字體全部統一,只在顏色,大小,邊框,排列進行變化

 


(3)色彩配置:文字的顏色深淺須配合背景顏色,但也可以隨著強調文句的不同有所變化:標題可以選擇繽紛醒目的顏色,重要的標語可以由紅色表示(若會看不清楚就再加邊框),一般介紹可用黑白色系撰寫,輔助文字可採用彩度低的顏色處理。

7

去掉分隔的輔助線,畫面大致呈現如上;注意:文字左右兩邊(或者上下)最好都要調整到對齊唷

 

 

設計完banner圖片後,就能直接上傳到網站囉~


接下來就是讓人又愛又恨的程式時間了,我們所使用的跑馬燈形式程式叫做carousel slide,基本上網找就能找到相關的程式範本了。


以下是最基礎的格式:建立一個container來容納整個幻燈片組,種類是carousel,加slide就有滑動效果,data-interval可決定圖片變換的間隔時間(data-ride預設5秒,也就是5000毫秒),而內容可以被放在carousel-inner裡面,含多個item,然後就能放入圖片了。

 

程式碼:

5

 

效果:

 

一個漂亮大方的網站首頁這樣就設計好一半了!是不是很簡單呢^^

 

接下來就是要把剩下的大片空白努力用各種商品圖片塞滿滿了(累)。官網採用的圖片設計風格就不特別贅述了,很簡單的用藍,桃紅,綠,橘四色,搭配上漸層的灰底。商品圖片設計過程中,老闆給了我兩個建議:其一是文字和商品本身要盡量對齊底線,才不會讓人看的時候眼睛要一直飄來飄去最後眼花撩亂,其二是跟背景底色做出一點區別,才不會讓人看得視網膜上盡是一片白茫茫,視線根本抓不住重點。


接下來就是如何排版了,css本身有提供一個很好用的layout模板,只要點進去block的編輯-佈局,就會跳出一個像這樣的畫面:

7

 

按下Add Section,就會跳出一排布局的格式,並且可以選擇格子的比例

8

 

然後只要把做好的block丟上去,按下save layout就大功告成了!

 

問題是......要怎麼做block呢?


點擊最上排各種功能中的"架構"-"區塊頁面布局"-"自訂區塊庫"-"新增自訂區塊"

 

又開始我們的不專業程式小課堂了!


首先,我們大致上會希望無論原圖多大,最後都能滿版,所以要選擇建立container-fluid,並選擇圖片種類img-responsive;若希望圖片能置中對齊,不因為各種因素跑掉排版,就再加上clearfix text-align-center;而圖片邊緣是否要留空,可選擇否margin:0px(這樣在手機上關掉"管理"的選項後,圖片就會置中)或margin:auto(在手機上保留"管理"的選項,圖片置中)


接下來,你可能會想在每項商品外加邊框,而且希望它符合整體大小,格式如下:
border: 粗細px 顏色 solid;width: fit-content


如果希望加上內距,就加上padding,如果希望加上外距,就用margin,可用-top/bottom/left/right來控制各個方向。


最後,我們希望消費者按下圖片後就能跳轉到購買頁面,所以在圖片前要加上前往網址的程式碼(格式請見下圖)

 


最後的程式碼形式大致會像範例這樣子:

10

 

 

做好每個商品的區塊頁面後,就能一口氣放入layout,做出美美的商品網頁囉~~

 

8

 

這是我們官網的樣子!歡迎大家有空來逛逛買買,或單純來看小編們嘮叨各種工作學習小知識(笑

只要點擊"部落星球",就能看到小編們使勁渾身解數寫出來的長篇鉅作(並不是),裡面有聊網站設計,聊美編,聊電影,聊日常...... 各式各樣天馬行空的主題都有,歡迎經過時點一下,補充小知識power!