Wu's Tech Web Design Guide by DLAB

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