索尼的紅燈人生

簡報設計，對於網站企劃和行銷企劃的各位夥伴來說一定不陌生。

除了平常網站的執行外，有時候還要跟業務出去做公司簡介、企劃提案、服務介紹。

簡報的視覺調性，基本上都是遵循著公司的CIS形象進行設計，

而簡報使用的配置顏色如果多過於五種，其實會有一種雜亂感，也少了專業度，

萬一剛好公司的Logo是五顏六色、七彩繽紛，那... 我只能拍拍你的肩膀了。

因此，我從創業前設計Logo開始，就希望以黑灰白作為設計基調，代表著單純、直接、專注。

其實我想做一頁式的購物服務已經很久了，以往購物結帳的流程都須經過層層頁面、層層考驗，既窘長又煩躁。

從會員註冊、驗證信箱、登入會員、選擇商品、加入購物車、填寫收件資料、轉至金流刷卡頁面到結帳完成。

經過這樣的磨練，誰不會發瘋呢，也並不是每個人都想加入會員...

前陣子，有機會認識一間台灣保養品牌 PreCarin草本原萃，由我們的夥伴們負責網路銷售通路的業務。

PreCarin對於形象包裝、使用成分和品質的要求都很用心，我覺得一定要運用自己的專長去要幫助、支持台灣品牌的發展。

因為給予的空間很大，我覺得這便是一頁式購物網站執行和實現想法的機會。

今天要分享的是，如何將網站需求與功能寫成規格文件，也是就寫成技術人員、工程師、開發商、看得懂的文件。

我相信很多網站企劃和業務一定會遇到，到底要如何將客戶的網站需求寫出來。

寫出來的文件，工程師看得懂嗎? 這樣的東西有辦法估價嗎? 工時該如何評估?

其實，像這樣的規格文件沒有什麼業界的標準規格，只要寫出來的東西好理解、好評估、好溝通就可以了

因為每家公司的規格不一樣，所以，以下就以我自己的經驗和大家分享。

假設要我們做一個類似博客來的購物網站，我會將製作規格表的重點放在版面配置的規劃、動態效果的參考範例、程式功能的說明。

你覺得購物網站應該會有幾層或是總共幾頁，我們可以參考其它購物網站的頁面先列出來，缺少的頁面再補上就可以了。

   我覺得經理人六月號 對於行銷的朋友來說，是一本很經典的雜誌。

   裏面談到的行銷管理學，將科特勒的觀念與想法一一解析。

   對於想要往管理職的朋友來說，這是一本很值得訂閱的雜誌。

   幾乎是每一期的內容都很棒，不只談經營管理，更有簡報、品牌分析等等。

   要不是現在沒工作，我早就訂了。

   不過，還好我有訂動腦雜誌，了解市場的趨勢與世界各地的行銷案例分析。

   這兩本都很棒，雜誌優於書籍的部份就是他會綜合各方面的資訊，

   一次可以吸收掌握各業界的動態與知識，增加自己的內涵與廣度。

   如果，大家跟我一樣很拮据，那就去圖書館看看雜誌吧，至少不用錢，哈哈哈。

   經理人雜誌：http://www.managertoday.com.tw/

在網頁設計公司，業務接案進來後，最怕就是沒有資料什麼都要自己生，像是公司簡介、產品說明、照片...等等。

對於企劃或是設計工作者，真的是一件很痛苦的事情!!

我的某位設計師好朋友說："老娘要開版還要幫客戶想文案，要做全套就是了"，她發了瘋地向我咆嘯，掃到風颱尾了。

如果貴公司沒有網站企劃這個職務，那設計師就只能自立自強靠自己囉。

下圖表格為自己設計的網站近件流程表，讓您可以抬著頭，拿著表格去跟業務要資料，請業務同仁協助收集。

前期的準備作業與資料是很重要，不然一邊做一邊改，改完了不滿意，客戶又會覺得第一版最棒。

我都開始懷疑自己是不是卡到陰，為什麼命運要如此抓弄我們(金包銀突然唱了起來)。

其中，最靠杯的是沒有網站架構圖，一切客戶說了算，所以各位網站業務的朋友們，去談案子的時候一定要有架構圖。

最近帶著一些疲憊與倦怠感結束工作，離職的原因還蠻多的，包含升遷管道、薪水調幅、專長發揮、公司規模...等等。

最主要的是，我看不到自己有所成長與進步，想推行的改善方案與改革計畫，沒辦法得到上級主管的支持。

雖然自己的專長是系統分析規劃，還是要支持公司的營運策略，負責網頁製作、客戶溝通協調這部份的工作業務。

久而久之，就變成每天都在應付和對付客戶(這真的會倦怠)，活像是個生死攻防戰!! 哈哈哈

最後，只能多充實自己，去巨匠上課，去考取國際初階企劃員國際證照，準備PMP專案管理師證照的課程。

在台中，其實很多網頁設計公司是沒有網站企劃的，就算有這個職缺，薪水待遇也不會很高(24,000 - 28,000之間)。

我的薪水不高，只有26K，過了一年八個月後，依然沒有調整，這也是我想離開的原因，畢竟這樣的薪水很難生存下去。

有一些建議想要給剛進來網站企劃這工作的朋友，有些建議不算是很中肯，但可以參考看看，以下都只是自己個人的想法

我好像幾百年沒有寫過關於網站企劃的文章了 是該振作一下了

之前在 -網站企劃- 網站首頁的版面設計 中有介紹到階層型結構。

階層型結構是在網站架構圖中常常用到的結構圖，另外還有"線性結構"、"蛛網型結構"、"DB(資料庫)型結構"，共四種。

首先，我們先看到線性結構，線性結構是最單純的一種結構，如下圖。

線性結構

原則上只利用"上一頁" 和 "下一頁" 這兩個連結就可以操作了，是非常簡單易懂的結構。

1517易物易技終於上線了，我只能說辛苦了我們家的大師兄。

將自己不需要的物品或是用不到的物品做為交換，不但響應環保、減少包裝外盒的使用， 更可以透過交換得到適用的物品。

除了一般的以物易物的交換，這個平台還提供了 物品 交換技術 或者是 技術 交換 技術 喔!!

我知道大家都有深藏不露的專業知識和技術，何不如發揮 我為人人 人人為我 的精神，做個技術的切磋交流。

或許，你可以用平面設計換到一條Levi's的牛仔褲(我是真的有牛仔褲要交換)。

或許，你可以用潮T換到點數卡(我也想當型男!!我要擺脫阿宅!!)

目前在旅遊飯店業界比較大的網路線上訂房系統有旅遊資訊王、四方通行、旭海國際科技等三家系統服務公司。

基本上訂房的流程都大同小異，是透過即時性的傳遞資料來增加或減少房間使用的數量(類似庫存的方式)

並透過會員資料庫、金流系統與信用卡驗證系統等結合與運用。

我將上述三家的線上訂房系統做一個整合與說明，將線上訂購系統的流程分為六個步驟，如下：

1.起迄日期 >  2. 房型房數 > 3. 詳細訂房須知 >  4. 會員登入 > 5.付款方式、詳填信用卡資料 > 6. 訂單完成確認

1. 選擇起迄日期：當你選擇住房日期時，系統會先記錄你要入住與退房的日期，

     當訂單確定後會將資料寫入資料庫並扣除該日訂購的房間，類似庫存系統。

這次要介紹的是購物網站的企劃重點，以哩哩叩叩雜貨網為示範，大致上有幾點規劃的方向，請參考

1. 先確認網站商品分類為幾層的架構，一般可分為兩層、三層與四層架構

兩層架構為商品分類、商品詳細介紹，是屬於介紹單一性質的商品，如傳統機械工業...等。

三層架構為商品大分類、商品小分類、商品詳細介紹，一般購物網站都是此類架構。

        1-1 大分類A (第一層)

其實，這一篇的是補充"製作網站企劃書"的內容，較概念性的感覺，可能會有重複的內容出現。

但也剛好，幫自己複習一下之前自己寫的東西，希望這一篇內容對大家有實質上的收穫     spencerwilson.co.uk

1. 背景介紹

也就是通常所指的"前言"或"概述"，在企劃書開頭介紹網際網路情況及公司背景有關的內容。

如果是網站改版企劃書的前言，一般是有關網站為什麼改版、必須進行改版的結論敘述。

其實，這部份是屬於比較"虛"的內容，但儘量不要過於空洞，開頭簡練、醒目，可以帶給閱讀的人一種亮眼的感覺。

2. 市場分析

 www.loopland.net    Lopland  | US 美國

Lopland是由Allan Sanders所設計的網站，內容包含了Allan的手繪稿與作品集，很有80年代的美式風格。

---------------------------------------------------------------------------------------------------------------------

像素

簡單的說，像素(pixel) 是構成數位影像的最小單位。

像素好比馬賽克牆上的其中一塊小磁磚，利用不同的顏色整齊排列在牆上，密度越高、圖像也就越清晰。

而電腦螢幕上所呈現出來的圖案，就是由像素組合而成的。

解析度

- www.pockoville.com/main.html -        Pockoville | US 美國

Pockoville提供了許多點陣式圖片與向量式圖片創作，而點選OTHER TRIPS的小圖還可以更換首頁圖案。

我常常來這裡找靈感，相當不錯，因此推薦給大家。

一般常用的點陣式影像處理軟體有：Adobe Photoshop、Ulead PhotoImpact 等。

常用的向量式繪圖軟體有：Adobe Illustrator、Adobe Freehand、CorelDRAW等。

而數位影像依照圖面元素的組成方式，基本上可以歸納為兩大類：一種是點陣式影像(Raster Image)，

另一種是向量式影像(Vector Image)，它們最主要的差別是圖形的定義與記錄方式不同，這二種型態各有特色，

也各有其優缺點，因此在繪圖與影像處理中，常常會同時使用這兩種型態的影像或軟體相互搭配，以下為兩種影像的介紹：

   - www.ifva.com -  香港獨立短片及錄像比賽 | Hong kong 香港

   這是一個關於短片和影像的比賽，已經舉辦到第14屆了有興趣的朋友可以進來參觀看看

--------------------------------------------------------------------------------------------------------------------------------

數位影像所使用的檔案格式很多，而且有其特性與優缺點，所以都有其存在的價值。

網站雛型這個名詞好像是最近才開始流行起來的，但對於行走在網頁設計業的企劃們應該不陌生。

之前我都稱為首頁示意圖或是網站版面架構圖，這張圖代表著網站首頁、內頁的雛型規劃

內容大概包括主導覽列、次導覽列、最新消息、圖片展示或是聯絡資訊。

我想對於網站企劃來說，最難的是怎麼把網站的重點濃縮、視覺考量呈現於首頁。

接下來，我以香蕉王的網站(製作網站企劃書)為範例，並使用Visio 2007 設計網頁示意圖，請大家參考看看

1. 新增繪圖

點選 "檔案>新增>新增繪圖" 或是 "Ctrl + N" ，接著選取元件圖形，基本上我只會選取基本流程圖形來用。

雖然它有概念性網站圖形可以用，但是我覺得很醜，所以我只用基本流程圖形，這就是所謂的一招半式走江湖啦

下一步，你可以在工具列選取 "圖形"  或是選取 "檔案>圖形"，然後再選取你要的元件圖形。

 香蕉王提醒您，CS中請儘快選擇武器並注意芭樂來襲!!

 放下屠刀 立地成佛

我想建構一個網站，應該是要滿足下列四項條件，分別是：網址、伺服器、網路頻寬和內容製作

1. 網址，就像是門牌地址一樣，朋友要到你家就必須先知道你家的地址，才能找到你家

以Yahoo的網址為例，www.yahoo.com.tw 代表的意義如下

www：全球廣域(資訊)網路，World Wide Web合稱3w。

yahoo：這是可以自訂的網域名稱，如果有一間公司叫香蕉王，那我可以取名叫bananaking。

當然，基於商業的考量，可以取個容易讓人記住的英文名字，盡量簡短好記。

還有一點，選擇較具重要的關鍵字做為網域名稱，對搜尋結果的排名也較具有積極的意義。

網站架構大致上可以分為線性結構與階層型結構，其中線性結構是最單純的結構

原則上只利用「回上頁」和「下一頁」這兩種連結就可操作，是非常簡單易懂的結構

而這種結構最適合運用購物網站的結帳系統，以博客來的購物車系統為例：

購物流程分為五大步驟：放入購物車、確認購物明細、選擇付款方式、最後確認、完成訂購。

1. 當你將商品放入購物車後，我們可以看到以下的畫面

購物明細：顯示商品圖、商品標題、購買訊息【例如：特價品，優惠期限至2009/03/01】。

優惠價：顯示特價的價錢。

數量：可在輸入訂購數量。

要開始規劃版面時，我想蠻多網站企劃也跟我一樣毫無頭緒

這時候，不彷暫時離開電腦，拿出紙筆，什麼都別想讓心裏平靜一下。

等你覺得差不多了，那就在紙上開始畫出你想像中的版面。

先想著這個網站有什麼功能、該怎麼呈現、SEO與CSS需要注意什麼...等等。

其實，當你在一邊畫一邊修改時，已經慢慢完成網站首頁的版面了。

相信我，這個方法很有效，常常會畫出你想要的網站版型。

那麼 這次我就來介紹幾種比較常用的網站版型。

先介紹單欄式網站，以荷斯特數位網頁設計的版面為例

我們都知道人與人相遇，最初的第一眼就決定了某個程度的印象。

首頁的版面設計也是同樣的道理，"首頁"對於初次造訪網站及大多數的瀏覽者來說是相當的重要的體驗。

無論是以直接輸入網址的方式或是經由搜尋引擎的連結也好，對網站來說，前來造訪的瀏覽者是重要且珍貴的。

我們都希望瀏覽者在看到首頁後，能繼續並瀏覽其它頁面，感覺到這個網站的魅力，最後將網站加入我的最愛。

所以，如何讓瀏覽者在首頁就留下良好的印象與使用體驗，這是網站企劃們所追求的目標。

因此，首頁所肩負的責任，可分為二大項。

A. 明確傳達網站的概要，既是讓瀏覽者對網站內容抱持著期待的封面，也是入口的玄關。

B. 引導瀏覽者找到想要的資訊和前往網站經營著想讓使用者瀏覽的網頁，同時必須兼具導覽的功能。

以下內容參考自 web+ 設計的黃金則 與自己的經驗分享，請大家參考看看