CTK pro

關於 CTK PRO:於2011年夏天展開了偉大的航程,初期以開發手機APP為主,2013年開始跨入Web開發,2015年開始用UCD(User-Centered Design)方法協助客戶釐清需求, 2016年大量採用AWS架構, 並導入策略UX產品為客戶在軟體開發各環節破關!

back to top

如何才算是好的網頁設計?該從何蓋起呢?

怎樣的網站設計才算是好的呢?有沒有什麼參考依據?

好的網站就是要能夠符合當初設計規劃的目標。若建置網頁,是希望客戶可以多瀏覽些商品頁,最後導至順暢的購物流程,建立網站後,進來的使用者是否遵循當初設想的目標就是評斷標準;又或設計網站呈現企業形象,那麼消費者的觀感、瀏覽體驗是否舒適、符合直覺,是為參考依據。

一般來說若調查過使用者行為,用資訊架構(Information Architecture)建構起來的網站,都有設計良好的「動線」,不管消費者是來您的網站找資訊、找商品、了解詳情等,都可以輕易的獲得他們想要的,自然網頁的停留時間、瀏覽頁面都會在一定水準之上。

別忘了網頁架設的再好,內容才是王者,所以持續更新、加入符合使用者需求的內容,也會是評估網頁是否良好的重要依據。

公司才成立沒多久,官網是必要的嗎?網站有哪些架構或內容是一定要有的?

60% 以上的消費者,會較信任有官方網站的公司,有了公司官網的資訊、產品介紹、服務項目就比一半以上的競爭者來的強!

網頁建置之初,如大量商品頁面,購物車,金流物流串接、會員功能、多語系網頁等,非一開始必要設定。

這部份應該做好使用者使用習慣,做資訊架構後,在來慢慢取捨。如果未來有擴充、增加功能的需求,也可以在這步驟先討論清楚,將未來發展可能性考量進去,後續再改版或擴建網頁的時候,就無需做太大幅度的修改。

好的網站應該要有何架構?該如何從零到一規劃呢?

要建構一個好的網頁,從使用者觀點出發是個好的開始。可以從自己是使用者的角色出發(或者模擬您的網站可能有哪些類型的使用者),參考相關產業,他們公司國內外(台灣、日本、美國,各國的設計設計元素都有差異)網頁設計,看看他們有哪些偏好以及可能的瀏覽歷程。

從資訊架構(Information Architecture)的方式,了解使用者會怎麼樣去瀏覽這個網頁,他們想獲取什麼資訊,什麼樣的資訊是最常、最不常使用到的,再來去做訊息的設計、編排。

對高度參與者來說,網頁設計反倒是門檻條件,他們更注重的會是「網站內容」是否能給他們幫助(例如有學習到知識、有解決需求、資訊比較等),這也是搜尋引擎現在在設定排名時重要參考依據。

和網頁設計公司討論,還需要準備什麼資訊?

有了以上的資料蒐集方式,可以試著用樹狀圖,或是 Site Map 的方式大略勾勒出網站的架構,再與網頁設計公司討論,架出來的網站較齊備,又能符合網路使用者的需求。

超完整!建置網站前需要準備的七大資訊

響應式網頁設計( RWD,Responsive Web Design )的重要性

RWD 有什麼功用,響應式網頁設計是必備的嗎?

RWD 全名是 Responsive Web Design,中文通常稱作「響應式網站」(有些又會叫做自適應網頁設計、回應式網頁設計),可以讓使用者在不同瀏覽介面上,對應到不同的解析度裝置,減少使用者移動、縮放等操作,改善使用者體驗。

考量到 2017 統計出的使用裝置報告,已經有超過 52% 的流量來自於行動裝置(相比於 2011 大約在 10%),以及人們在使用手機、桌上型裝置的習慣仍有著一定的差異,響應式網頁設計又得以累積頁面的搜尋權重,故 RWD 幾乎是必備的。

RWD 設計的網頁整體而言,還比開發網頁 + 手機版網頁成本更低,整體瀏覽的效果體驗較佳,若是遇到有興趣的內容,使用者也很容易透過手持裝置的聊天軟體、社群等其他方式分享,想看到更多 RWD 的優劣比較,不妨參考 Blog 的內容進一步了解!

我想要架手機版網頁,有什麼建議嗎?

手機版網頁是早期響應式網頁尚未出現時的解決方案。屆時手機剛出爐,除了 iOS 系統外,手機螢幕解析度非常多樣,許多資訊類網站不得不刪除部分資訊,建構自己的手機版網頁讓使用者較容易使用。常見的即是在網址中間加一個m.現在若用手機分享 Facebook 訊息,就會是這樣的連結,即便是用電腦看仍會出現手機版網頁,反而有點惱人。

有了 RWD 響應式網站後,會直接透過 Html 語法,判別使用者的螢幕尺寸給予應有的顯示方式。但某些特殊目的的網頁還是適合做手機版,像是需要大量點擊,有複雜品項的購物網站(像是蝦皮、東森購物、momo 購物等,甚至是手機版,更進一步做手機 app 讓他們更容易行銷、建立會員資訊),有特殊的動畫,資訊量很大的入口網頁也常常有手機版。

至於有沒有需要就用以上資訊來評斷,或是與我們討論囉

我已經知道我的客戶多來自桌上型電腦/平板/手機瀏覽,我還需要做 RWD 網頁嗎?

如果瀏覽網站的使用者有特殊的族群、使用習慣,可以在設計上,特別針對該版型(解析度)去設計、切版,力求使用者使用該裝置時,得到最好的體驗。

畢竟現在瀏覽網路的使用者雖然以手機使用者為最大宗(52.5%),但別忘了,還是有43.6%的使用者透過桌上型裝置(包含桌機、筆電)來上網的。

另外研究發現,許多美學需求較高,商品頁面、資訊頁面較多的網頁,使用者仍偏好用桌上型裝置來瀏覽。使用 Responsive Wed Design 最大的優勢就是在於一次設計滿足各種裝置,未來有改動或者裝置有變化的時候,也不用重新設計網頁,畢竟你也沒辦法預料下一波的行動裝置會是像 Apple Watch 還是更先進高級的投影方式吧!

與Wordpress架設收費相關問題

WordPress是什麼?一定要用他嗎?

WordPress 是一套以 PHP 和 MySQL 為平台的開源內容管理系統。從2003開始,初期多以部落格為主,2007年後,使用 WordPress 架站的網頁逐漸成為趨勢,截至 2018 為止,市佔率已經高達三成,比第二名到第八名(分別是:Joomla、Drupal、Magento、Shopify、Blogger、Squarespace、TYPO3)加起來還多出三倍!

若是以具有 CMS 後台編輯的網站,更高達近六成市佔率,因為無人能比的市佔率,各種需求促使 WordPress 外掛數量也是數以萬計,更容易滿足各式網站的需求。其後台編輯能滿足多位作者,故延伸應用之 WooCommerce 也適應於不同公司角色,協助商品、文章上架管理。更多資訊也可參考 Blog 內容

安裝與架構建立這些項目是要作些什麼?

除了安裝 WrodPress 工作外,我們也會協助規劃資料庫結構、以及建立一台測試機環境,方便網站上線前做測試。好的架構對於整個網站的穩定性是相關連的,希望建立一個穩定且符合客戶需求的主機網頁,並且於實際上限時順利轉移。

若是從舊有網頁改版而來,失效連結的檢測、網址轉移等等,都是我們會設想到的一部分。

WordPress 安裝後,就有管理後台了,後台優化建置實際執行的是什麼?

初始化的 WordPress 後台,並一定不符合每個客製化網站。有些網頁著重消息分享,有些網頁著重商品頁面的建立、促銷修改曝光等等,WordPress 一般邏輯仍按照「頁面」、「文章」加了 WooCommerce 後的「商品」區分。

但 CTK Pro 還會依照每個網頁的需求去修改、優化後台介面,並且中文化。例如設計模版,讓未來新增文章可以更方便;設置檔案外掛,方便管理整個網站上的圖片、PDF 檔案等。希望給客戶一個直覺、易上手的後台,在企業端來看,網站管理人員的教育訓練、人員交接,將使用障礙降至最低。

若網站內容有不同的區塊,我們也可以在後台的工具側欄,新增、刪減需要的內容,並且將一些不必要的功能操作隱藏起來,降低後台複雜性外,也減少了客戶自行玩壞網站的風險。

頁面調整包含哪些?添加什麼樣的設計/功能,需要另外收費?

網站確定頁面後, CTK 會提供頁面版型的報價,可以修改的內容包含:修改文案排版、文字大小、配色、圖文布局、刪掉/新增設計元素、主題內建的小 Icon、行動呼籲按鈕、互動操作等設計。若有需要調整較多,或添加功能、特殊排版、動畫效果的頁面,也都會在專案開始前確定,並提供報價,不會在專案進行後多收取費用。

若是新增模版完全沒有的功能/設計,一開始就會另外報價。通常於討論階段就確定好貴司需要的功能和樣式,減低後續需要更改的機會成本。您可以把有調整疑慮的部分先與我們討論,大部分客戶擔心的像是「樣式調整」、「動態效果」、「版面配置」等,大多是不需要額外收費的!

多語系:中文、英文、簡體中文是否需要?

我們網站有需要多語系版本嗎?有什麼建議呢?

多語系當然是進軍國際必備,除此之外,在該語言的搜尋結果上,也佔有利多。不過許多情境不是僅將中文改為英文(或其他語言)這麼簡單而已,除了字句的長度(例如中文表達一件事情需要四個字,有時候英文需要七的單字,很長的空間),文化的差異、閱讀習慣也有可能影響多語系版本的複雜度。

如果客戶是華人或大陸地區,建議可以擁有簡體字(記得大陸地區網站需要作 ICP 備案);若欲與國際接軌,最簡單,且不會太複雜的語言,當然是選用英文了。

CTK Pro 也設計過許多多語系網站,可以看我們作品集參考看看!

除了英文、簡體中文外,有沒有提供其他語種呢?

大部分的語言都可以做到,但是文案內容/翻譯需要由貴司提供,我們可以協助上架。

網站還可以提供什麼功能,可以大略提供一下嗎?

使用 WordPress 另一個好處是,許多功能可能有前人寫好的 Plugin 可以現成使用,但多為英文邏輯思維下的產物,不一定符合中文使用。

許多功能是需要靠 CTK 的工程師另外開發,或改寫原有 Code 的,但我們存在的價值就是滿足客戶的需求以及無限的想像力,這裡舉一些可能可以達成的項目:

✴ WordPress 架構網站之安全性防護
✴ 掛號/訂房/預約系統
✴ 商品篩選、條件篩選
✴ 串接各種會員登入、API,並配合可能的 CRM、ERP 系統
✴ 定期定額商品訂閱/扣款
✴ 金流/物流/電子發票諮詢、串接
✴ IP Filter
✴ 網頁 A/B Test
✴ 各式促銷模組、電商應用工具

視覺風格、美術該用什麼標準來決定呢?

我要如何決定網站的視覺風格呢?

網頁風格雖然看起來是依個人喜好,但有一句鐵則一定要注意:「網頁設計好是給客戶看的,而不是給自己孤芳自賞的」。好的網站體驗,可以讓使用者照著你的設計與網站互動,不管是留下聯絡資訊、直接購買、主動與業主聯絡等,都是「網站風格」需要考量的一部分。

如何符合使用者、顧客的期許就是設計風格的關鍵。建議可以從「產業類別」、「企業形象」、「主要顧客族群」來設計。對於消費者來說符合既定印象固然重要,但如何透過風格設計、網站配色,突顯出企業的特長也會是網站風格設計的重點。

網頁的配色有什麼建議的作法嗎?

通常各個產業都有屬於自己的代表色系,像是 Apple 網站雖然保持著科技業黑與白,但常與他們新出的手機顏色互相搭配;IKEA 則是跳脫傳統家居家居業者,採活潑輕快的藍、黃配色,讓人不再為一成不變的居家生活感到煩悶;成衣業也有相當不同的作法,可能專做女性衣飾會採取粉、紫、象牙白等女性化、高雅形象,而平價服飾或許強調快銷、輕快、變化,則採用多彩繽紛的配色。

由此可知,不同產業類別與不同主力販售產品,甚至季節,都會影響到網站使用者的瀏覽(或是購買)意願。在消費級產品,網頁配色是相當分外重要,如何運用顏色設計來符合整體品牌知覺、呈現給使用者的感覺,以及行銷、活動、產品的搭配,都應考量在內。

一般網頁設計的配色,建議配合 Logo 或企業識別,選用三到五種主視覺色系,再由網頁設計公司協助搭配,搭建出理想中的網站。

網頁設計風格有哪些類別呢?

所有設計風格主題很多元,這裡舉出一些常見的名詞參考:

「金屬」、「幾何」、「華麗」、「簡約」、「線條」、「平板設計」、「強烈對比色」、「巴洛克風格」、「復古」、「單色系」、「手繪」、「卡通」、「寫實」、「科技」、「黑白」、「拼貼」、「療癒」、「專業」、「休閒」、「歌德」、「布爾喬亞」、「波西米亞」、「島嶼風」、「鄉村」、「實用」、「普普風」、「摩登」、「都會」、「中國風」、「極簡」、「優雅」、「細節」、「設計」、「賽柏龐克」、「漸層」、「像素」、「重工業」等,可以將喜歡的風格記下來,與設計師溝通的時候可以更順暢喔!

我們設計稿比較複雜,你們可以做到很精細的切版嗎?

許多人擔心程式設計師的美感素養不足,但我們的程式設計師也是 Photoshop、Illustrator、Sketch 的高手,我們也嚴格要求自己,網站顯示會依照設計稿,依 Pixel Perfect 的標準重現在瀏覽器上。

若是有相關需求,也可以看我們的作品集,更了解 CTK Pro。

我有參考的網站,你們可以幫我做的跟他很像嗎?

有目標的網站,其時對於我們理解您對網站設計、美感的需求很有幫助。我們會協助評估,參考網站、設計稿或者是 WordPress 主題是否可完成 RWD 的建置,也會希望在網站設計稿規劃之初和業主討論,達到雙方都滿意的共識。

唯有釐清各種使用情境,使用者順利瀏覽網頁,才是好的設計網站訣竅。不管您的設計經驗如何,關於網頁設計的 UX/UI,Navigation,RWD 等細節,就讓 CTK Pro 來幫忙吧。

我可以有一些華麗的動畫效果嗎?

早期網頁較為單調,在 CSS 和 Html5 尚未當道前,為了搶奪使用者的眼球,常在首頁或部分頁面加入華麗的動畫效果。

現今網頁數量暴增,不同使用者的網路速度、裝置不同,更在意的是讀取速度、易用性、對不同瀏覽器和裝置的支援。更何況現在憑 JavaScript 或 jQuery 也可以做出相當程度華麗的動態效果/動畫;若想加快網頁讀取,純靠 CSS 也可以有些簡單的效果!

網頁內容要怎麼設計/填?有一些範例或模版供參考嗎?

網站文案的架構是什麼?要寫什麼內容呢?

網站文案可以從既有的內容著手去修改,若是原有就有網站,也可沿用、微調大部分的內容作為初步的文案,除了維持原來的品牌印象外,也對網站的搜尋排名有幫助。基本面可以從「品牌故事」、「產品介紹」、「相關消息、報導」等著手,若是有配合的部落客或是現在當紅的影音行銷之 Youtuber,考慮在網站內置入他們的文章、超連結或影片,都是不錯的方式。

內容經營,也可以參考:哪些網站文案是先架構好的

也可以有自己品牌的小編模式,撰寫一些如產品開箱文、使用心得或使用小訣竅(像是 Apple 網頁日前就設計一整個頁面的照相技巧)等文章放入網站中,使得訊息內容更多元,也會顯得品牌較為親近使用者。

內容文案需要由我們自行上架嗎?

這部份可以看您的需求,若屬於網頁內的內容,由貴司於架設網站討論時提供,CTK Pro 上架即可,好處是在「測試網站」時,就可以看到網頁整體樣貌。

常態需要更新的,如官網內的最新消息、產品描述頁面、新商品等,則由業主自行上架。別擔心,CTK Pro 在後台建置後,會詳細教你們操作,也可以設定不同權限等級的使用者(例如:工讀生、小編、審核者等),方便貴司做網站維護。

沒有圖片相關的素材怎麼辦?

圖片素材可以自行拍攝、請設計師、攝影師拍攝/購買,當然也有網路圖庫,依照品質好壞,有付費的也有免費的版本。

唯要注意網站內文案,包含圖檔、影音都要注意版權問題,以免日後對公司造成額外負擔。若有需求,CTK Pro 也可以幫你們從適當的素材網站購入,並且針對網頁設計的需求做簡單編修與調整。

圖片素材大小要多少?檔案類型又要用什麼比較好?

網頁圖片的素材以「剛好符合」為最清楚的大小,端看網頁設計時( RWD 網頁,包含手機上顯示圖片),規劃的大小為何,再用適當的修圖軟體調校。

檔案類型現在主流有 JPEG、PNG、GIF 三種類別,簡單來說 JPEG 有較佳的壓縮率,對網站讀取的速度有加分作用,符合大部分的實用情境;PNG 檔則可涵蓋透明背景,適合需要去背的位置或商品圖;GIF 則可視作小動畫,但檔案大小以及是否適用於各個位置是需要考量的要點。

RGB 格式?CMYK 格式?這些專有名詞是什麼?

這兩個名詞都是色彩模式的一種,分別代表光的三原色:紅(R)、綠(G)、藍(B),以及印刷常使用的四分色:青色(C)、洋紅(M)、黃色(Y)、黑色(K)。

由於螢幕顯示技術與印刷的顏色會有差別,輸出圖檔時,調整到正確的格式才不會有色差問題。一般來說,網頁用圖檔,設置成 RGB 就對了。

輸出圖片的dpi是什麼?

DPI 全名為 Dots Per Inch,代表每英吋裡有多少的點,數值越高自然就越精細,一般肉眼不容易分辨出來的值與設計上常用的就是 300 DPI。網頁部分,有時候 72dpi即可辨識,因為圖片壓縮率高,檔案小,對於網站讀取速度有絕對關係。

另一個接近的概念則是用在顯示螢幕上的 PPI,Pixels Per Inch,Apple 創造出的 Retina(視網膜級)顯示,則是由 iPhone 4 時代開始,其值為 326 ppi,意指在一般使用距離下,肉眼看不出螢幕上的像素點。

圖片檔案要如何命名、整理比較好呢?

同一網站圖片命名最好有統一規範,因不是所有伺服器都支援中文圖檔,盡量也不要含有中文字元(同理對 URL 的命名也以有代表性的英文為主)。

對未來網站規劃也有幫助。建議的命名規則可以使用日期、主題、編號等,透過下底下來連接,未來整理檔案庫時也一目了然。這樣的作法對 SEO 的幫助更大,有時候客戶搜尋某項服務/產品時,透過圖片搜尋,就找到你家來了!

請問你們有提供攝影服務嗎?

一個專業的網站,網頁上圖片素材自然相當重要,我們有配合的專業攝影師可以推薦給您。

現在手機照相功能已經相當發達,中階的數位相機也不算太貴,若是要自己攝影拍攝也有些小建議可以給你們參考喔,請來信諮詢

可以提供一些參考範例作為架站的參考嗎?

可以參考我們的作品集www.ctkpro.com/works/,另外 Blog 內 www.ctkpro.com/blog/ 也有許多架站相關教學喔。

前置準備,開發過程與後續經營維護,有什麼需要注意的呢?

從網站開發前置作業,到開發中修改、溝通以及後續維護、行銷曝光等,有相當多細節需要注意,簡單可分為(請點擊連結):

網域&主機

開發流程

網站維護、操作

關於 CTK Pro 竑盛科技