Power Mobility Power Future BRAND COMMUNICATION DELIVERED
Web Production Standard of Wu’s Tech Corporation 伍氏科技股份有限公司 | 網站設計製作規範
CONTENT DLAB 研究、創造並管理品牌，我們致力於協助客戶建立行銷導向位品 牌溝通策略，並透過設計強化企業的品牌經驗並規劃具有投資效益的 行銷策略。 我們具備豐富的實體與數位品牌規劃經驗，服務過的客戶包括宏碁集 團、明基電通集團、愛普生科技、台灣工銀集團與台北市政府等不同 領域的標竿企業，透過跨領域的專業整合，DLAB 致力於為客戶提供最 好的成果。 我們的服務和專業涵蓋了品牌傳達、數位行銷和設計策略，整合品牌 行銷、網路科技和設計思考的跨領域專業，DLAB 致力為客戶打造國際 化的品牌策略。
原研品牌設計顧問 30042 新竹市世界街99號9樓 30042 9F, 99 Shihjie St. Hsinchu City, Taiwan www.dlab.com.tw Tel 03.5358993
01. 網站架構 Web Site Structure
1
02. 視覺設計 Visual Design
6
03. 後台系統 Content Management System
17
01. 網站架構 Web Site Structure
Site Architecture
網站架構規劃
鍵於伍氏科技以外銷 OEM/ ODM 為主的業務特性，因此在網 站架構的規劃上採用以產品展示為主軸的規劃方式，並以英文 作為主要的網站語言，強化伍氏科技國際化的企業形象。
產品線經討論後簡化為 Scooter, Power Wheelchair, Power Wagon, Power Assist Drive Unit 四大類，並強化產品資訊內 容，提供客戶更豐富產品訊息。
Page 2
About Wuʼs Tech
Products
Scooter
Power Wheelchair
Power Wagon
Power Assist Drive Unit
Contact Us
Chinese
關於伍氏科技
產品介紹
與我們聯絡
ENGLISH
Index Page Wireframe Design
首頁內容架構規劃
在網頁內容架構的規劃上，為提昇使用者在網頁瀏覽上的便利 性，我們採用了一致性的使用介面設計，提供使用者便利的瀏 覽，並使用了標準化網頁設計和搜尋引擎優化的方式，提高相 關網頁在搜尋引擎搜尋上得能見度。 伍氏科技 | 網站首頁架構規劃
Header
Wuʼs Tech
About Wu’s Tech
Products
Contact Us
Chinese
Menu Page 3
Hero Product Display
Hero Product Banner
Content Scooter Power Wheelchair
Product Navigation Power Wagon
Feature Product
Feature Product
Feature Product
Power Assist Drive Unit
Footer
ISO 9001, ISO 13485, G.M.P., FDA, TÜV, CE Certification. Copyright © 2009 WU'S TECH CO., LTD. All rights reserved.
Feature Products
Content Page Wireframe Design
一般內容頁面架構規劃
伍氏科技 | 內容頁架構規劃
Wuʼs Tech
About Wu’s Tech
Products
Contact Us
Chinese
Header
Side Bar
Company Profile Scooter
Page 4
Power Wheelchair
Product Navigation Power Wagon Power Assist Drive Unit
Category Header Banner
Category Banner
Home / About Wu's Tech
Breadcrumb
Since 1968 WUʼS Tech was founded in 2000 but its root date back 38 years when it started by WUʼS family as an agricultural vehicle manufacturer. WUʼS has always been the top factory from every perspective and has grown into one of worldʼs largest manufacturer of medical mobility aids and agricultural vehicles in recent years. Insurmountable R&D Depth WUSʼ automotive based management dexterity has result its in-house R&D center to provide the most persistent effort to its customers as an ODM/OEM manufacturer.
Footer
Menu
ISO 9001, ISO 13485, G.M.P., FDA, TÜV, CE Certification. Copyright © 2009 WU'S TECH CO., LTD. All rights reserved.
Main Content
Product Page Wireframe Design
產品頁面架構規劃
伍氏科技 | 內容頁架構規劃
Wuʼs Tech
About Wu’s Tech
Products
Contact Us
Chinese
Header
Side Bar Product Navigation
Scooter
Menu
Category Header Banner
Category Banner
Home / Products / Scooter / ML4SB
Breadcrumb
Scooters Models List
Product Banner
Main Content Product Banner
Power Wheelchair
Features Product Feature Picture
Power Wagon Power Assist Drive Unit
Features Picture
Available Colors Color Schemes
Color Schemes
Specifications Product Specifications
Footer
ISO 9001, ISO 13485, G.M.P., FDA, TÜV, CE Certification. Copyright © 2009 WU'S TECH CO., LTD. All rights reserved.
Specification Table
Page 5
02. 視覺設計 Visual Design
DESIGN CONCEPT 建構品牌形象 | Corporate Image Building 強化產品資訊 | Products Information Enriching 行銷業務支援 | Sales & Marketing Supporting
Page 7
Homepage Layout Design
Page 8
首頁 | 視覺設計
About Us Page Layout Design
關於伍氏科技 | 頁面視覺設計
Page 9
Product Index Page Layout Design
Page 10
產品類別主頁 | 視覺設計
Contact Us Page Layout Design
聯絡我們 | 頁面視覺設計
Page 11
Scooter Index Page Layout Design
Page 12
Power Wheelchair Index Page Layout Design
Page 13
Power Assist Drive Unit Index Page Layout Design
Page 14
Golf Car Index Page Layout Design
Page 15
Product Page Layout Design
Page 16
產品頁 | 頁面視覺設計
03. 後台系統 Content Management System
Content Management System: Wordpress 為了提昇網站維護的便利性，在此次網站改版中引進國際著名 之開放原始碼網頁內容管理系統 WordPress 作為伍氏科技企 業形象網站的後台管理系統， 此系統廣受國際大型企業機構 如奇異公司、福特集團、華爾街日報採用。
Page 18
Login Wordpress
登入 WordPress 後台管理系統
http://www.wustech.com.tw/wp-admin/ 鍵入網址後就會出現 WordPress 登入畫面，直接鍵入使用者名稱 (Username) 和密碼 (Password) 就可以進入網站管理系統。
Page 19
Wordpress Dashboard 登入 WordPress 後台後的畫面 就是 Dashboard，其中呈現目前 網站現有網頁數量、回應與相關 統計。
Page 20
Add New Product Page
新增產品頁面
1
要新增產品頁面請先選擇左方功 能列中的 Pages / Add New 新
3
增頁面。 4
5
2
在右方樣板頁面中 Attributes / Parent 指定產品分類 Parent
1
（“Scooter”）和所使用的樣版
2
Te m p l a t e （ 如 圖 所 示 使 用 的 是”product-scooter”樣板）。 3 6
鍵入產品標題（如 ”ML4SB Electric Scooter” ）
4
修改頁面網址為”ml4b”（網址都 要採用英文小寫）。
5
按
圖示上傳產品相關圖片，
並將相關圖片插入下方文件編輯 區中適當的位置。 6
段落標題部份在上方樣式表中指 定其樣式為”Heading 2”。
Page 21
Product Specification Table Editing
新增與修正產品規格表
1
選擇左方功能列中的 Tools / wp-Table Reloaded 選擇現有產
3
品規格表修改或新增產品規格
2
表。 2
新增產品規格表可以運用 “Import a Table”功能輸入已經製 作好的 Excel 格式產品規格表。
3
Page 22
記下新增好的表格ID（如本例中 ml4sb 的 ID 為”25”）
4
將下列程式碼： [table id=25 column_widths="30%|70%" /]
1
貼入該產品編輯頁面中規格表的 段落，並將其中 id 值改為該產 品表格的 ID 值即可。
Hero Products Banner Updating 網站首頁動態商品呈列更新 1
選擇左方功能列最下方 Setting 中的 Setting / Featured Content Gallery即可出現左方畫面網頁。
2
將所要呈列在網站首頁動態商品 呈列區的頁面連結依序鍵入（如
2
左圖中 629, 402）。鍵入後記 得按網頁最下方
Update Options
按鈕儲存設定。
2 3
點選左方功能列Pages並選擇所 要指定連結產品頁面，在頁面編 輯區下方 Custom Fields 中指定 “articleimg”和 ”thumbnailimg” 圖
1
片網址即可。
Page 23
Products lists Updating 產品列表更新 1
選擇左方功能列 Appearance 中 的 Editor 選項。
2
點選右方 Theme Files 列表中所 要編輯的產品類別樣板（如左圖 本例中要編輯的是 Products Scooter Pages Template）。
1
Page 24
3 3
將新增產品的連結插入 Sidebar 中適當的位置。
2
鍵入後記得按網頁最下方 2 Update File
按鈕儲存設定。
BRAND COMMUNICATION DELIVERED