CTK pro

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

back to top

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

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

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

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

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

公司才成立沒多久,網站有哪些架構是一定要有的?

重要的公司資訊、產品介紹、服務項目是一定不能少的。

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

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

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

要建構一個好的網頁,從使用者觀點出發是個好的開始。可以從自己是使用者的角色出發,看一些相關產業,他們公司國內外(台灣、日本、美國,各國的設計都不太一樣可以參考看看)網頁設計,看看他們有哪些元素。

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

動態網頁與靜態網頁有什麼差別?

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

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

RWD有什麼功用,網站有必備RWD的理由嗎?

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

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

更別提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)加起來還多出三倍!

也因為無人能比的市佔率,各種需求促使WordPress外掛數量也是數以萬計,更容易滿足各式網站的需求。其後台編輯能滿足多位作者,故延伸應用之Woocommerce也適應於不同公司角色,協助商品、文章上架管理。

Wordpress 不是買了之後安裝就完成了,為什麼安裝與架構建立要收那麼多錢?

除了安裝工作外,我們也會協助規劃資料庫結構、以及建立一台測試機環境,方便網站上線前做測試,主要也希望建立一個穩定且符合客戶需求的主機網頁。

Wordpress 不是安裝好之後,就有管理後台了,為什麼還要多收內容管理後台建置的錢?

初始化的後台一般屬於架站軟體的後台,並不符合每個客製化網站,因為有些網頁著重消息分享,有些網頁著重商品頁面的建立、促銷修改曝光等等,我們會依照每個網頁的需求去修改、優化後台 User Interference 介面,並且也中文化,使得後續操作可以更直覺話,對於後續有學習、教育訓練或人員交接上,會更容易沒有使用障礙。

「調整需符合基礎版型架構邏輯,若超出則需額外收費。」請問怎樣算超出範圍?

修改文案、文字大小、顏色、左圖右文改成右圖左文、刪掉某一些不喜歡的設計…等簡單的功能調整。都是在修改範圍內,但如果是要新增一個模版完全沒有的功能或設計,那就會需要額外收費。

通常我們會在討論階段就確定好貴司需要的功能和樣式,減低後續需要更改的機會成本。您可以把有疑慮的部分先拿出來討論,這樣就不用擔心是否要額外收費了。

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

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

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

如果客戶是華人或大陸地區,建議可以擁有簡體字,若是欲與國際接軌,最簡單,且不會太複雜的語言,當然就是英文了。

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

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

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

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

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

網頁風格雖然看起來是依個人喜好,但有一句鐵則一定要注意:「網頁設計好是給客戶看的,而不是給自己孤芳自賞的」,所以如何符合使用者、顧客的期許就是設計風格的關鍵。建議可以從「產業類別」、「企業形象」、「主要顧客族群」來設計,對於消費者來說符合既定印象固然重要,但如何透過風格設計、網站配色,突顯出企業的特長也會是網站風格設計的重點。

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

通常各個產業都有屬於自己的代表色系,像是Apple網站雖然保持著科技業黑與白,但常與他們新出的手機顏色互相搭配;IKEA則是跳脫傳統家居家居業者,採活潑輕快的藍、黃配色,讓人不再為一成不變的居家生活感到煩悶;成衣業也有相當不同的作法,可能專做女性衣飾會採取粉、紫、象牙白等女性化、高雅形象,而平價服飾或許強調快銷、輕快、變化,則採用多彩繽紛的配色。由此可知,不同產業類別與不同主力販售產品,甚至季節,都會影響到網站使用者的瀏覽(或是購買)意願。因此網頁配色是相當重要的,如何符合整體品牌知覺,呈現給使用者的感覺以及行銷、活動、產品的搭配,都是需要考量的要素,建議可以選三到五種主視覺色系,並說明該色彩想要表達的意象,再由網頁設計公司協助搭配,搭建出理想中的網站。

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

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

 

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

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

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

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

我們也可以協助評估,設計稿件是否可完成RWD的需求(畢竟使用者為大,有時候過於複雜、簡單的設計,不一定符合使用者需求)。唯有釐清各種使用情境下,訪客是否可以順利瀏覽,才是好的設計網站訣竅。不管您的設計經驗如何,UX,Navigation,RWD的細節就讓我們來幫忙吧。

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

早期網頁較為單調,在CSS和Html5尚未當道前,為了搶奪使用者的眼球,常在首頁或部分頁面加入華麗的動畫效果。但是現今網頁數量暴增,不同使用者的網路速度、裝置不同,更在意的是讀取速度、易用性。但現在光憑JavaScript 或 jQuery 也可以做出相當程度華麗的動畫,若想加快網頁讀取,純靠CSS也可以有些簡單的動態效果了!

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

網站文案要寫些什麼?

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

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

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

若屬於網頁內的內容,由貴司於架設網站討論時提供,我司上架即可。後續官網內若有最新消息、產品描述頁面則由你們自行上架就可以囉。後台介面在網站完成後,CTK Pro都會教導你們操作,也可以設定不同權限等級的使用者(例如:工讀生、小編、審核者等),方便貴司做網站維護。

圖片素材要怎麼來呢?

圖片素材可以自行拍攝、請設計師、攝影師拍攝/購買,當然也有網路圖庫,依照品質好壞,有付費的也有免費的版本。唯要注意網站內文案,包含圖檔、影音都要注意版權問題,以免日後對公司造成額外負擔。

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

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

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

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

這兩個名詞都是色彩模式的一種,分別代表光的三原色:紅、綠、藍,以及印刷常使用的四分色:青色、洋紅、黃色、黑色。由於螢幕顯示技術與印刷的顏色會有差別,輸出圖檔時,調整到正確的格式才不會有嚴重的色差問題。一般來說,網頁用設置成RGB模式就對了。

輸出圖片的dpi是什麼?

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

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

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

同一網站圖片命名最好有統一規範,因不是所有伺服器都支援中文圖檔,盡量也不要含有中文字元,對未來網站規劃也有幫助。建議的命名法可以使用日期、主題、編號等,透過下底下來連接,未來再看圖檔的時候就一目了然。

圖片上架後,歪掉或照片遺失怎麼辦?

圖片或照片最怕跑掉了,我們會提供一點簡易的公版教學,供貴司未來拍攝、剪裁上架用。若是有好的命名,如果圖片遺失或檔案損毀,也可以依照當初命名去找對應的圖片,後續維護比較不會有問題。

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

一個專業的網站,網頁上圖片素材自然相當重要,我們有配合的專業攝影師可以推薦給您。現在手機照相功能已經相當發達,中高階的數位相機也不算太貴,若是要自己攝影拍攝也有些小建議可以給你們參考喔,請留下資訊諮詢(表單連結)。

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

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

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

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

網域&主機

開發流程

網站維護、操作

關於CTK PRO竑盛科技