如果你對自己經(jīng)營電商有興趣，或是企業(yè)轉(zhuǎn)型、想跨足網(wǎng)路購物平臺，那你一定會聽過 91APP 的名號。若近期有造訪 91APP 的網(wǎng)站，一定會在其他網(wǎng)頁、FB、IG 中，都看過他們「年中慶」的廣告，也會發(fā)現(xiàn) 91APP 網(wǎng)站近期有大改版。沒錯，CTK Pro 很榮幸身為 91APP 的合作夥伴，在短短一個多月的時間內(nèi)，協(xié)助 91APP 進(jìn)行了網(wǎng)站大幅調(diào)整。

經(jīng)過多輪融資，91APP 已經(jīng)發(fā)展為 500 人以上的大公司，決策所需時間已不像是幾十人的中小型企業(yè)一般容易。在執(zhí)行 91APP 網(wǎng)站改版的另一大挑戰(zhàn)，就是時程上壓縮地相當(dāng)緊迫，要能在時限內(nèi)完成設(shè)計稿、修改，到系統(tǒng)、WordPress 開發(fā)，許多決策和任務(wù)的執(zhí)行，是靠著雙方積極配合才能達(dá)成任務(wù)。

91APP 在此次網(wǎng)頁設(shè)計的要求，也以「國際化」、「大器」、「簡約」為出發(fā)點，仍要融合其主打的特色如「OMO 融合」、「新零售」、「銷售業(yè)績成長」等訊息重點；操作使用上，也不能違背 91APP 一直提倡的「行動優(yōu)先」的使用情境，就讓 CTK Pro 詳述我們是如何克服此次挑戰(zhàn)！

91APP 作為一電商平臺，網(wǎng)站最主要的目的還是引導(dǎo)使用者，並且創(chuàng)造點擊，提昇按鈕或連結(jié)的 CTR（點擊率，Click Though Rate）。在 91APP 改版初期提供 wireframe 的階段，就明確希望網(wǎng)站有一套 UI Kits 的規(guī)範(fàn)可以參照，未來在擴充/修改文章時，除了按鈕樣式搶眼，仍可維持相同的瀏覽體驗。

有了按鈕參考的準(zhǔn)則，CTK 考量了 91APP 想要傳達(dá)給目標(biāo)受眾的訊息，設(shè)計一系列不同的圖文排列組合，除了能強調(diào)功能特色，滿足實際需要了解的受眾，也適時加入客戶實際體驗的分享，加強資訊描述的面向。

整體風(fēng)格則是透過精心調(diào)整的段落樣式、字距、行距、字重等參數(shù)，再搭配滿版/漸層的圖片，一次展現(xiàn) 91APP 跨平臺卻又互相融合的理念。有了這些基礎(chǔ)，後續(xù)因應(yīng) 91APP 之特色、焦點數(shù)據(jù)，也分別製作了 Icon、動態(tài)數(shù)字做視覺的強調(diào)，於部分頁面，調(diào)整字體形成反差，快速吸住訪客的焦點。

最早接獲 91APP 網(wǎng)站改版的資訊時，比較訝異的是極短的完成期限。包含頁面調(diào)整、上稿以及圖片的佈署規(guī)劃，都需在短短一個月修改至可公開上線的狀態(tài)。

好在不管專案大小，CTK Pro 都貫徹敏捷開發(fā)管理的使命，相信在這麼短的時間內(nèi)，能準(zhǔn)時交付的網(wǎng)頁設(shè)計公司不是那麼容易找到的。

確認(rèn)開始執(zhí)行網(wǎng)頁設(shè)計後，CTK 從創(chuàng)意發(fā)想到 mockup 的設(shè)計呈現(xiàn)，交給資歷五年以上的專業(yè)設(shè)計師來主導(dǎo)。風(fēng)格幾經(jīng)修改後，雙方對於網(wǎng)頁改版的設(shè)計風(fēng)格達(dá)到共識，為了加快整體開發(fā)製作，部分頁面也憑著 CTK 的經(jīng)驗與 91APP 的信任，跳過設(shè)計稿確認(rèn)階段，直接使用 WordPress 開發(fā)製作。

▲ 全站精心調(diào)整的 CSS，檔案大小約只有 91APP 競業(yè)的 1/10

全站的 CSS 經(jīng)過 Tech Lead 的審核下，CTK 得以同時開發(fā)數(shù)個頁面。透過長年累積的敏捷開發(fā)經(jīng)驗，我們每天也只需要花早上五分鐘的站立會議時間確認(rèn)任務(wù)細(xì)節(jié)，工程師製作若有問題則即時反饋於 PM；對於已提供給客戶審閱的頁面，也會在收到修改確認(rèn)後，即時修正任務(wù)內(nèi)容，以縮短製作時程。

91APP 的網(wǎng)站本來就是使用 WordPress 建置，其使用的 Avada 這款 Theme 搭上 Fusion Builder 編輯器，讓一般使用者製作屬於自己的網(wǎng)頁時，也有相當(dāng)多工具、樣板可以使用。為了讓 91APP 行銷人員可以更熟悉、簡易的上稿，CTK 就 Fusion Builder 為底，達(dá)成整個網(wǎng)頁的功能開發(fā)。

由於 Fusion Builder 還內(nèi)建了全域元素的資料庫，也讓 CTK 放心的將版面樣式存入資料庫，一來於上稿時可省下大把時間，二來也讓 91APP 網(wǎng)站維護(hù)人員，也可以達(dá)成像是「左圖右文、右圖左文皆於行動版中上圖下文」之較為複雜之排版。

強調(diào)行動裝置瀏覽的 91APP，自身的網(wǎng)站自然也要作為模範(fàn)樣板，給使用者良好的行動裝置體驗。對此 CTK 開發(fā)出數(shù)個不同針對桌機/行動裝置的功能：

? 手機版下拉式選單

? 頁面滑動時 Anchor 焦點顯示

? 表格收合功能

? 巨大表格，針對手機版特別調(diào)整與切換效果

? 手機版下拉式選單
方便使用者更快速找到需要的功能

? 頁面滑動時 Anchor 焦點顯示
更清楚現(xiàn)在瀏覽之功能，便於使用者記憶

? 表格收合功能
再長的表格也不用怕瀏覽體驗不佳

? 手機版的巨大表格
表格 RWD，針對手機版特別調(diào)整的顯示方式與切換效果

此案件頁面數(shù)不少，交付期限又相當(dāng)短，但 91APP 在網(wǎng)站製作初期就給了明確的目標(biāo)，也提供了相當(dāng)完整的 Wireframe 參考。在文案、圖片都有配合到，CTK Pro 卯足了全力協(xié)助，最終還是趕上了 91APP 的週年慶！

? 91APP 官網(wǎng)

? 來看看更多 CTK Pro 的作品集

（本文圖片出自 91APP 官網(wǎng)、fusion builder 網(wǎng)站）