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

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

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

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

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

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

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

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

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

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

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

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

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

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

? 手機(jī)版下拉式選單

? 頁(yè)面滑動(dòng)時(shí) Anchor 焦點(diǎn)顯示

? 表格收合功能

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

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

? 頁(yè)面滑動(dòng)時(shí) Anchor 焦點(diǎn)顯示
更清楚現(xiàn)在瀏覽之功能，便於使用者記憶

? 表格收合功能
再長(zhǎng)的表格也不用怕瀏覽體驗(yàn)不佳

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

此案件頁(yè)面數(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)站）