如果你對自己經(jīng)營電商有興趣，或是企業(yè)轉型、想跨足網(wǎng)路購物平臺，那你一定會聽過 91APP 的名號。若近期有造訪 91APP 的網(wǎng)站，一定會在其他網(wǎng)頁、FB、IG 中，都看過他們「年中慶」的廣告，也會發(fā)現(xiàn) 91APP 網(wǎng)站近期有大改版。沒錯，CTK Pro 很榮幸身為 91APP 的合作夥伴，在短短一個多月的時間內，協(xié)助 91APP 進行了網(wǎng)站大幅調整。
經(jīng)過多輪融資，91APP 已經(jīng)發(fā)展為 500 人以上的大公司，決策所需時間已不像是幾十人的中小型企業(yè)一般容易。在執(zhí)行 91APP 網(wǎng)站改版的另一大挑戰(zhàn)，就是時程上壓縮地相當緊迫，要能在時限內完成設計稿、修改，到系統(tǒng)、WordPress 開發(fā)，許多決策和任務的執(zhí)行，是靠著雙方積極配合才能達成任務。
91APP 在此次網(wǎng)頁設計的要求，也以「國際化」、「大器」、「簡約」為出發(fā)點，仍要融合其主打的特色如「OMO 融合」、「新零售」、「銷售業(yè)績成長」等訊息重點；操作使用上，也不能違背 91APP 一直提倡的「行動優(yōu)先」的使用情境，就讓 CTK Pro 詳述我們是如何克服此次挑戰(zhàn)！
91APP 作為一電商平臺，網(wǎng)站最主要的目的還是引導使用者，並且創(chuàng)造點擊，提昇按鈕或連結的 CTR（點擊率，Click Though Rate）。在 91APP 改版初期提供 wireframe 的階段，就明確希望網(wǎng)站有一套 UI Kits 的規(guī)範可以參照，未來在擴充/修改文章時，除了按鈕樣式搶眼，仍可維持相同的瀏覽體驗。
有了按鈕參考的準則，CTK 考量了 91APP 想要傳達給目標受眾的訊息，設計一系列不同的圖文排列組合，除了能強調功能特色，滿足實際需要了解的受眾，也適時加入客戶實際體驗的分享，加強資訊描述的面向。
整體風格則是透過精心調整的段落樣式、字距、行距、字重等參數(shù)，再搭配滿版/漸層的圖片，一次展現(xiàn) 91APP 跨平臺卻又互相融合的理念。有了這些基礎，後續(xù)因應 91APP 之特色、焦點數(shù)據(jù)，也分別製作了 Icon、動態(tài)數(shù)字做視覺的強調，於部分頁面，調整字體形成反差，快速吸住訪客的焦點。
最早接獲 91APP 網(wǎng)站改版的資訊時，比較訝異的是極短的完成期限。包含頁面調整、上稿以及圖片的佈署規(guī)劃，都需在短短一個月修改至可公開上線的狀態(tài)。
好在不管專案大小，CTK Pro 都貫徹敏捷開發(fā)管理的使命，相信在這麼短的時間內，能準時交付的網(wǎng)頁設計公司不是那麼容易找到的。
確認開始執(zhí)行網(wǎng)頁設計後，CTK 從創(chuàng)意發(fā)想到 mockup 的設計呈現(xiàn)，交給資歷五年以上的專業(yè)設計師來主導。風格幾經(jīng)修改後，雙方對於網(wǎng)頁改版的設計風格達到共識，為了加快整體開發(fā)製作，部分頁面也憑著 CTK 的經(jīng)驗與 91APP 的信任，跳過設計稿確認階段，直接使用 WordPress 開發(fā)製作。
▲ 全站精心調整的 CSS，檔案大小約只有 91APP 競業(yè)的 1/10
全站的 CSS 經(jīng)過 Tech Lead 的審核下，CTK 得以同時開發(fā)數(shù)個頁面。透過長年累積的敏捷開發(fā)經(jīng)驗，我們每天也只需要花早上五分鐘的站立會議時間確認任務細節(jié)，工程師製作若有問題則即時反饋於 PM；對於已提供給客戶審閱的頁面，也會在收到修改確認後，即時修正任務內容，以縮短製作時程。
91APP 的網(wǎng)站本來就是使用 WordPress 建置，其使用的 Avada 這款 Theme 搭上 Fusion Builder 編輯器，讓一般使用者製作屬於自己的網(wǎng)頁時，也有相當多工具、樣板可以使用。為了讓 91APP 行銷人員可以更熟悉、簡易的上稿，CTK 就 Fusion Builder 為底，達成整個網(wǎng)頁的功能開發(fā)。
由於 Fusion Builder 還內建了全域元素的資料庫，也讓 CTK 放心的將版面樣式存入資料庫，一來於上稿時可省下大把時間，二來也讓 91APP 網(wǎng)站維護人員，也可以達成像是「左圖右文、右圖左文皆於行動版中上圖下文」之較為複雜之排版。
強調行動裝置瀏覽的 91APP，自身的網(wǎng)站自然也要作為模範樣板，給使用者良好的行動裝置體驗。對此 CTK 開發(fā)出數(shù)個不同針對桌機/行動裝置的功能：
? 手機版下拉式選單
? 頁面滑動時 Anchor 焦點顯示
? 表格收合功能
? 巨大表格，針對手機版特別調整與切換效果
? 手機版下拉式選單
方便使用者更快速找到需要的功能
? 頁面滑動時 Anchor 焦點顯示
更清楚現(xiàn)在瀏覽之功能，便於使用者記憶
? 表格收合功能
再長的表格也不用怕瀏覽體驗不佳
? 手機版的巨大表格
表格 RWD，針對手機版特別調整的顯示方式與切換效果
此案件頁面數(shù)不少，交付期限又相當短，但 91APP 在網(wǎng)站製作初期就給了明確的目標，也提供了相當完整的 Wireframe 參考。在文案、圖片都有配合到，CTK Pro 卯足了全力協(xié)助，最終還是趕上了 91APP 的週年慶！
（本文圖片出自 91APP 官網(wǎng)、fusion builder 網(wǎng)站）
