同仁分享-設計部門內頁上線教學

同仁分享-設計部門內頁上線教學

暨上次設計師Ellis介紹紅威網頁設計部門作業流程後，今天請Jerry介紹內頁上線教學，紅威詳細的SOP一定會讓大家聽得如癡如醉!

內頁版型配置介紹-

一般來說，網頁設計內頁版型配版方式，常根據使用者經驗(User experience)為基準來作配版，因為配置出來的版型較為多數瀏覽者或大眾所接受的畫面，而且對於瀏覽者來講也較不容易迷路。

公司簡介頁面：

公司介紹頁面的配版方式大多為左文右圖，右文左圖，上文下圖，下文上圖。

最新消息頁面：
最新消息的頁面則多數為列表示的呈現，包含標題及日期。

產品介紹頁面：
產品介紹的配版方式較多元化，但大致上都會包含產品主圖及產品標題或加入購物車及金額…

聯絡我們頁面：
聯絡我們的配版方式，則會包含一個表單或地圖，以及公司的詳細聯繫資訊。

系統提供了一些既有的推薦模組以及可以多樣變化的自訂模組，約八成都可以輕鬆解決客戶的需求，讓網頁設計師可依照客戶需求製作出多變化的網頁內容，以下是內頁會最常使用到的一些簡單的功能及介紹。


自訂特效及特殊解決案例介紹 –

雖然系統已經相當完整，包含表單、會員機制、購物系統、討論區…，但還是會有一些特殊的模組或需求是內建所沒有的，這時候我們必須仰賴一些外在的模組，或是內部程式人員自行開發的模組，才能順利解決剩餘2成的客戶特殊需求。以下介紹幾個在內頁製作過程中，較特殊的作法及解決方法。

一、行事曆

解決方法：這邊我們使用google 行事曆來解決客戶的需求，但必須提供帳號密碼進入設定
優點：更新方便，更可使用手機雲端同步更新
缺點：無法下超連結指令，版面顏色也無法太多變化

二、人氣排行榜

解決方法：在系統可行之下，程式設計師撰寫簡單了一個jQuery程式
優點：客戶更新及維護方便，操作完全不受影響
缺點：無法有票數統計等太多的變化，變化性較少

三、LightBox特效

解決方法：先使用相關連結模組，再使用LightBox套件，最後搭配jQuery語法。
優點：客戶更新及維護相當方便簡單，完全不用懂語法，業務人員也好教學。
缺點：因LightBox已模組化，所以呈現效果都差不多。

四、匯款回報單

解決方法：日期的地方使用jQuery UI Datapicker解決，後五碼的部分則使用jQuery 語法解決。
優點：順利解決客戶需求，而且讓使用者操作相當人性化，不用手動輸入特定日期的規格格 式，後五碼的地方鎖住，避免不小心多Key 號碼
缺點：活動主題的地方還是必須要自行手動Key 入資料

在內頁的版面配置上，可多使用曾經做過的範例來引導客人，有助於解決溝通上的困難。一來客人也很快能看到範例，可大幅度的減少業務們的溝通時間，而且最重要的是…二來那些範例代表著都是我們能做得到的功

能，避免內頁上線過程中出錯，或是功能因為太特殊而無法達到，造成客訴。

今天的內頁配置就介紹到這邊，大家應該對網頁設計流程更加明瞭了吧，請繼續期待下周最後一彈!

設計師Jerry分享