CLOSE ✕
Get in Touch
Thank you for your interest! Please fill out the form below if you would like to work together.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

食在好買購物網

web design / monographic study / Aug 2018 - Jan 2019

畢業專題研究(Monographic study)

指導教授:俎鴻明老師

學生:廖葆棠 林沛萱 劉昱佳 陳琇雅

摘要|Summary

"Yield a practical and easy accessible online food market."

現今網路購物已越來越發達,在繁忙的生活中許多人連外出逛街的時間都很少,因此網路購物變成為人們購買物品的方式之一,無論是服飾、美妝品、生活必需品等皆在網路購物範圍之內。而在近期業者也將食品放上了網路平台供客人選購,在不知道要吃什麼的時候打開網頁搜尋便得以看到許多食品進行選購。這已漸漸成為部分現代人的購物方式,藉由此網站人們將得到更便利的生活,也減少出門購買所花費的時間。

Nowadays, online shopping is becoming increasingly popular, as many people have little time to go shopping in their busy lives. Accordingly, online shopping has become one of the ways for people to buy things, whether it is clothing, beauty products, or daily necessities, which are all within the scope of online shopping. Recently, the industry has also made food available for purchase via the Internet platform, while you struggle with what to eat, can run a web search and find a variety of items to purchase. This has increasingly become a shopping strategy for some modern people; by using this website, individuals will have more convenient life and will also save time while going out to buy.

工作|My Role

前端網頁設計師, Front-end website designer

負責|Responsibility

負責網站的前端程式撰寫,設計用戶界面、信息架構、和協助設計系統架構和數據庫

Responsible for coding website design with the user interface, information architecture, and assist in designing system architecture and database.

動機&目的|Motivations & Goals

現今有很多消費者利用方便的網際網路購物平台來購物。許多人利用這項技術在家自己當老闆,憑藉著完善電腦系統的協助,所節省下來的昂貴店面租金及人事費用,讓價格變得較便宜,吸引了更多顧客。甚至有國際品牌看好網購市場,紛紛開設網站,甚至連和物流業著計出免運費的優惠,吸引更多消費著。

鑑於此,本計畫的目的就是研究從最基礎的HTML5加上JavaScript、CSS3、note++、jQuery技術來編輯網頁。最後學習如何運用Apache、PHP、MySQL資料庫系統來設計出一個完整的網頁購物平台。

Numerous consumers increasingly rely on handy Online shopping platforms and utilise this technology to run at home as bosses. Those saved money on pricey store rentals and personnel costs by using a complete computer system, which allowed them to lower their prices and attract more customers. There are also worldwide businesses that are bullish on the online shopping sector, launching websites one after the other and even offering free shipping reductions with the logistics industry to entice more customers.
Given this, the goal of this project is to learn the fundamentals of HTML5 plus JavaScript, CSS3, note++, and jQuery technologies for editing web pages. Then, learn how to create a complete web shopping platform using the Apache, PHP, and MySQL database systems.

"Help the stores who want to save operating costs, and raise the convenient who are busy."

工具|Tools

網站參考&分析|Research & Analysis

我們參考了市面上常用的網站: PChome24h購物、Yahoo奇摩購物中心、MOMO購物網

將這三個網站之優缺點總結後,我們除了保留最主要的會員中心及購物車,並設計出熱門搜尋、商品分類、特定價格搜尋及關鍵字搜尋,讓版面整潔,不會有過多的區塊,使用者使用起來更加舒適。

After highlighting the benefits and drawbacks of these three websites, we designed popular searches, product categories, specific price searches, and keyword searches, in addition to keeping the most important member centre and shopping cart, to keep the layout clean without too many areas blocked, which the user is more comfortable using.

構思|Ideation

應用系統架構

分為三種主要功能:搜尋、訂購系統及管理系統。

  • 搜尋:經由分類及輸入關鍵字,幫助消費者更快找到自己需要之商品。
  • 訂購系統:消費者訂購商品送出訂單後,賣家便可收到資訊並送出下單之商品。
  • 管理系統:藉由管理系統管理者及賣家可利用此系統編輯商品。


系統功能架構表(Information Architecture)

資料庫規劃(Database Planning)
ER-Model

成果|Results

點我觀看DEMO影片

使用者介面(User Used Interface)

使用者可利用電腦並於瀏覽器輸入網址進入網站。畫面右方可輸入價格來搜尋想要的商品價格,也可利用關鍵字查詢來尋找想要的商品。

首頁

畫面左方的功能列呈現下拉式選單,即可看到相對商品資訊供使用者參考。

商品說明頁面

點擊想觀看的商品,會進入商品說明頁面,左方會有商品圖片及價格,右方會有名稱、規格、加入購物車按鈕及回上一頁按鈕,下方會有評價及我要留言按鈕,可供使用者參考商品評價。

留言板頁面

會員中心登入頁面
會員中心註冊頁面
會員資料修改頁面

管理者介面(Businesses Used Interface)

點擊功能列的管理中心可進入商品管理頁面,會顯示各個商品類別名稱及商品數量,點擊商品類別名稱可進入商品管理介面,可編輯類別內容及新增商品。

商品類別頁面
商品管理頁面

心得|Reflection

在這個研究中我學習到了前端編碼和團隊合作的重要性。我認為編碼其實需要強大的細心和耐心,這樣才能在遇到bug的時候找到錯物並修正。同時,我也意識到有效的分配工作和不斷地溝通是一個團隊的最佳狀態。因為這樣能夠使進度在一個正確的軌跡上,也影響產品成效。儘管過程不是那麼的順利及和諧,但我認為這都是在學習和吸取經驗。此外,經過這次的研究後,開起了對使用者經驗的興趣,想去挖掘更多知識和技術來提升可用性和實用性。

This research taught me the value of front-end coding and teamwork. I believe that coding involves a great deal of care and patience so that when you meet a bug, you can figure out what went wrong and fix it. At the same time, I recognised that the best state of a team is one of effective task distribution and constant communication. Because this can keep progress on track and have an impact on product performance. Even though the process is not always smooth and harmonic, I believe it is all about learning and absorbing experience. Furthermore, as a result of this research, start interested in user experience and wanted to learn more about technology and knowledge to improve usability and practicality.

Recent Projects

Top
Let's Work Together!!😉
Contact Me