CTK pro

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

back to top

WordPress 2020 網頁設計趨勢

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20582" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1575877046563{padding-right: 10% !important;}"]WordPress 在 2019 年底更新至 5.3 版,著名的古騰堡編輯器也變得更加強大,其市佔率也正式超過三成,來到 35.2%(2019 Dec)。隨著日新月異的網站技術,在 2020 年,我們可以期待什麼樣的網頁設計趨勢呢?[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="這些正在/很有可能發生" title_font_size="26"][vc_column_text css=".vc_custom_1575877143786{padding-right: 10% !important;}"]很可能會發生的(已經發生): 聊天機器人的整合 簡約/漸層的設計風格/元素 語音搜尋與 SEO 的重要性不墜 可能會發生(部分已發生): 多元彈性的電商/多樣的支付方式 VR, AR 相關元素於網頁中的應用[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="聊天機器人的整合(Chat-Bot)" title_font_size="26"][vc_column_text css=".vc_custom_1575877346030{padding-right: 10% !important;}"]因為 Line, FB Messenger 等通訊軟體的發達,聊天機器人有點介於「網站」和「通訊軟體」之間的接口。設計良好的點擊互動方式,除了幫助您了解訪客的需求外,也大大提昇了網站的互動性,瀏覽網站的經驗勢必更貼近人性。 除此之外,透過聊天機器人嵌入於網頁中,你也有機會得到客戶的社群媒體(Socail Media)相關資訊;另一方面聊天機器人比起冰冷的靜態式問卷,更能得到客戶資料,讓你的行銷無往不利![/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left"...

3 分鐘搞懂架站必備元素:主機(網站伺服器)

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20559" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1574392162712{padding-right: 10% !important;}"]網站做的再漂亮,若不能讓使用者拜訪,也是圖勞。這時候需要主機(Server),以及網域名稱(Domain Name),一旦設定好網路指向(DNS),大家就可以拜訪你的網站啦! 什麼?聽不懂專有名詞。比喻性的說法就像是:「我們有了個產品(網站內容),需要有個店面(主機)讓客人可以來拜訪,這時候你的店面要有個好找的地標(網域名稱),並且上各大平台告訴大家怎麼來店裡(DNS 設定),客人就自然絡繹不絕啦!」 *地址的概念,比較接近網站主機的 IP 位置。詳細 IP 像是 Google 的解析伺服器是 8.8.8.8,對人腦來說相當難記,才需要「網域名稱」讓使用者好記。 網路上開店,可能不像實體店面,有所謂黃金地段、黃金店面(Domain Name 有好記/不好記之分),但「主機」的好壞,可影響著店裡人潮洶湧時、顧客大批排隊結帳時,店面可以負荷/消化的速度。就讓我們來看看關於主機(Server),有哪些是需要在網頁設計前了解的。[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="虛擬主機/實體主機,到底有何差別?" title_font_size="26"][vc_column_text css=".vc_custom_1574405869834{padding-right: 10% !important;}"]主機與我們一般認識的電腦主機,本質上有點差異,或許翻譯為「伺服器」更能體驗「網站主機」真正在做的事情。網站伺服器為了因應大量請求(多人同時上線),線上運算、可能的安全性問題,以及執行之網站程式,在架構上與個人電腦有多處需要去特化。 當然個人電腦也可以作為網站主機使用,只是要應付 24 小時開機、防火牆、降溫系統等等都要另行設置並計算成本。類似你我手邊裝置,有獨立的形體的主機,就是「實體主機」。也有網路服務商提供「主機代管」的服務,減低了維護所需的人力。 一般網站真的需要一台電腦 24 小時運作來應付嗎? 你的網站 24 h 都有如此高的流量、運算需要執行嗎?於是就衍生出「虛擬主機」的概念,也就是「共享主機」,透過程式的方式讓主機內可以執行多的網站來達成。 現今單一主機(群)的效能可以負荷的網站數量大概從數百到數千個不等,這也不難想像,伺服器中,若有某網站流量特別大時,會壓縮到其他網站使用 CPU, RAM 等資源的空間,網站速度自然受到影響。[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="我不想放虛擬主機,卻受到其他網站影響" title_font_size="26"][vc_column_text css=".vc_custom_1574391959128{padding-right: 10% !important;}"]到各大主機供應商的方案看,會提供 X 核心,X...

給客戶看的網頁設計(五)壓縮圖片!節省 60% 以上的空間,加快網頁速度

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1573019316804{padding-right: 10% !important;}"]2019 網頁大小已接近 4MB,是 2016 的 2 倍,比起 2011 更達到 4 倍以上。歸功於頻寬、4G 網路的普及,載入網頁的速度沒有像網頁大小一樣呈倍數成長,但隨著預期心理提昇,人們瀏覽網頁時等待的耐心變得比以往更少了! (圖片來源) 雖然網頁速度不是最直接影響到網頁成效、SEO 的項目,但一般通則是超過「3 秒」,使用者就很有可能跳出正在讀取的頁面。之前 CTK 小記也講過許多優化網頁速度的文章,要檢測網站速度,可以使用 Google PageSpeed Insights 或是 GTmetrix 來找出拖慢網站速度的原因,加以改進。 今天和大家談的,是最簡單,卻也最重要的調整:「適當的圖片」。 這裡只說到圖片,是因為包含圖片尺寸(解析度)、檔案格式、壓縮比例。牽扯到 SEO 等還關係於 alt 項目設定等等,就先來看最重要的「圖片大小」:[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="最簡單卻也最必要的調整:輸出適當的圖片" title_font_size="26"][vc_column_text css=".vc_custom_1573019451650{padding-right: 10% !important;}"]企業好不容易請了商業攝影師,拍了漂亮細緻的形象圖、示意/空間圖,要放到官網,呈現產品或企業形象概念,卻常顧慮:「我放這麼小的圖,不會看不清楚嗎?」(網頁設計公司都會提示:「圖片大小在 100kb 內為佳,卻常常收到用雲端空間傳來一張 10MB 的圖檔...

13 個網頁文案與響應式網頁設計密不可分的關係-為何要先思考好文案再建網頁

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20502" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1571734394823{padding-right: 10% !important;}"]響應式網頁設計(RWD)已是現在網站不可或缺之理念。只是,網頁文案隨螢幕解析度切換的閱讀體驗,全都靠網頁設計公司的技術,就可以克服了嗎? 網頁設計公司:「當然沒問題!」「只要把文案準備好,程式判斷過目前瀏覽裝置的寬度後,就會自動幫你斷行 了!」 客戶:「等等,文案那個『了!』可以不要換行嗎?這樣看起來很怪,可不可以幫我斷行在『自動』兩個字前面?」 網頁設計公司:「可以啊,先跟我說一下你現在視窗的解析度,再來是,若使用者用更大或更小的螢幕瀏覽,可能會看起來怪怪的喔?」 客戶:「...

給客戶看的網站設計(四)5 個網頁設計不可容許的錯誤

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20480" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1570006215184{padding-right: 10% !important;}"]一般來說剛設計好的網站上,不太會出現錯誤(因為網頁設計公司一定會提供測試機讓你檢視,自行上稿的內容錯誤除外)。但以下這些網頁設計錯誤,讓使用者看到了,可能非常惱火,嚴重者會降低網站的信任感、專業度,或者覺得網站許久沒有更新、維護,進而對公司抱持保留的態度。 ☛ 看看投資人怎麼看待企業官網[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="失效或者錯誤的連結!" title_font_size="26"][vc_column_text css=".vc_custom_1570066036052{padding-right: 10% !important;}"]尤記得前一陣子韓國瑜 Line 官方帳號,發佈雨量報導的連結時,意外導向激情內容,頓時間鬧的沸沸揚揚。錯誤的連結容易造成使用者「認知失調」(cognitive dissonance),閱讀內容時容易心生反感,嚴重者影響到連結、網站的聲譽與信任度,在設定超連結或網站導覽按鈕等連結時,務必小心檢查。 失效的連結則容易讓人感受到網站建置不完全,或是設計上有缺漏。俗稱 404 頁面代表伺服器無法提供訊息或伺服器無法回應等問題,一般可能是網站讀取失效、URL 設置錯誤等問題產生。常常也因為頁面 URL 更改、移動後,使用者透過就的連結進入頁面而看到。 維護使用者感受的作法有很多,除了客製化 404 頁面外(上圖即為例子,還有引導回首頁的按鈕),彈出通知視窗、採用 301 永久轉址,導向首頁或相關頁面,都是合宜的作法。 進一步更要偵測誰透過哪個 URL 進入官網的 404 頁面,藉以追蹤可能的使用者情境,或設定相關轉址讓網頁瀏覽更有連貫性。 ☛ 維基百科中有關 HTTP 404 的描述[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="錯字!" title_font_size="26"][vc_column_text css=".vc_custom_1570065463681{padding-right: 10% !important;}"]你說錯字?!沒錯,就是錯字! 上搞的肉容,和綱站美感決對是大有關系(上面這段文字,是不是怎麼看都不舒服呢?)。 不管是客戶自行上稿,還是由網頁設計公司代為上稿,一旦重要的頁面(尤其像首頁、關於我們、企業理念等處,更不能有錯字出現)出現錯字,網頁設計的再好看,整體素質還是會被大打折扣。[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no"...

WordCamp Taipei 2019 X CTK Pro Q&A

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20436" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_column_text css=".vc_custom_1568961175581{padding-right: 10% !important;}"]身為 WordCamp Taipei 的贊助商,主辦方詢問了 CTK Pro 下面這些問題,其實就是希望大家更了解到 WordPress 的優勢強項,就讓我們來看看為什麼 CTK Pro 每年都要全員出動參加 WordCamp 吧![/vc_column_text][vc_empty_space][vc_column_text]問題列表: 簡單介紹 CTK PRO|竑盛科技 去年參加過 WordCamp ,今年的期許是什麼? 你們團隊導入敏捷開發,可以分享敏捷開發是如何與 WordPress 專案整合嗎? 可否分享特別有意思的專案過程或服務的實積經驗呢? WordPress 相關活動、公司最新消息分享 贊助 WordCamp 有什麼機會與好處? 是否嘗試過其它內容管理系統?最後為何選用 WordPress? [/vc_column_text][vc_empty_space][/vc_column][/vc_row][vc_row anchor="about" use_row_as_full_screen_section="no" center_bck_image="no" el_id="about"][vc_column][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="簡單介紹 CTK Pro|竑盛科技" title_font_size="22"][vc_column_text css=".vc_custom_1568962190447{padding-right: 10% !important;}"]在官網中看到這篇文章,想必對 CTK Pro|竑盛科技已有所了解。 我們的目標是建置一個可以達成目的,又可以讓客戶簡易維護內容的網站(因為才真正能發揮網站功用)。還有啊,在規劃、建置的過程中,我們會給客戶蠻多建議的,不要嫌我們煩呀! 但比較官方的回答大概像下面這樣: 從 2011 以來我們承襲了手機 APP 開發的經驗,把整套的手機 UI/UX 經驗帶到了網頁開發,在...

WordCamp Taipei 2019,CTK 再次共襄盛舉

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20385" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1566799952419{padding-right: 10% !important;}"]在經歷了去年五百多人 WordCamp Taipei 2018 的盛會,今年的 WordCamp 時間雖然有點延後,卻也是趕在最後一個週末(12/28)於集思台大會議中心舉辦。CTK Pro 使用 WordPress 架構為客戶開發網站,除了身為百里級的贊助商,更準備好全員參與 2019 的 WordPress 社群的年度聚會! Meet People, Meet the World. 走進社群,步出世界。 今年的 WordCamp Taipei 2019 中,CTK Pro 也派了兩位厲害的代表參加講師的行列,詳細講師資訊、主題,就等主辦單位 9/20 公布之後,再與大家分享好消息。[/vc_column_text][vc_single_image image="20387" img_size="large" alignment="center" css=".vc_custom_1566798204314{padding-top: 20px !important;padding-bottom: 20px !important;}"][vc_column_text css=".vc_custom_1566800377719{padding-right: 10% !important;}"]什麼樣的人適合參加 WordPress 聚會呢? 答案肯定不會只有 WordPress 高手。 因應 WordPress 開源、易用的特性,不管你的領域是在設計(網頁設計)、行銷、網站維護/網管、程式前端、後端專長,都可以找到自己運用...

CTK 故事集|91APP 快速應變的電商步調卻能優雅改版

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20377" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1566444012696{padding-right: 10% !important;}"]如果你對自己經營電商有興趣,或是企業轉型、想跨足網路購物平台,那你一定會聽過 91APP 的名號。若近期有造訪 91APP 的網站,一定會在其他網頁、FB、IG 中,都看過他們「年中慶」的廣告,也會發現 91APP 網站近期有大改版。沒錯,CTK Pro 很榮幸身為 91APP 的合作夥伴,在短短一個多月的時間內,協助 91APP 進行了網站大幅調整。[/vc_column_text][vc_single_image image="20367" img_size="large" alignment="center" css=".vc_custom_1566439295088{padding-top: 20px !important;padding-bottom: 20px !important;}"][vc_column_text css=".vc_custom_1566444137193{padding-right: 10% !important;}"]經過多輪融資,91APP 已經發展為 500 人以上的大公司,決策所需時間已不像是幾十人的中小型企業一般容易。在執行 91APP 網站改版的另一大挑戰,就是時程上壓縮地相當緊迫,要能在時限內完成設計稿、修改,到系統、WordPress 開發,許多決策和任務的執行,是靠著雙方積極配合才能達成任務。 91APP 在此次網頁設計的要求,也以「國際化」、「大器」、「簡約」為出發點,仍要融合其主打的特色如「OMO 融合」、「新零售」、「銷售業績成長」等訊息重點;操作使用上,也不能違背 91APP 一直提倡的「行動優先」的使用情境,就讓 CTK Pro 詳述我們是如何克服此次挑戰![/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="透過按鈕/標題層級,來達成目的的簡約網頁設計"...