分享一個比較實用的方式，當客戶吐槽你的作品沒有設計感的時候，讓大家如何快速的改稿。呈現不一樣的設計。于是總結了大致幾個方法。

 

 

 

01 分析作品

 

下面案例是一個體育賽事的紀念品售賣網站，客戶認為這個作品太常規，希望呈現出不一樣風格的作品。于是我們將作品客觀分析了下。

 

 

優點：

整體設計／嚴謹界面簡潔。配色干凈 / 整體性一致。

 

缺點：

（1）整體缺少了體育行業的特性

解決方案 ：增加體育相關的元素

（2）頁面太過于正式／缺少活力／缺少購買欲望

解決方案 ：優化板式／整體色彩的搭配

（3）內容展示過于少

解決方案 ：將原網站切換展示的標簽都展開在頁面上展示。

 

 

02 尋找靈感

在設計之前首先尋找一些靈感設計。便于后續確認風格以及表現方式大方向不走偏。于是尋找到了下面幾種類型的案例。于是我尋找了一些非常規的設計作品。

 

 

板式斜切式銜接：通過改變板式板塊銜接部分的形狀。我們可以根據不同類型行業用戶以及品牌圖形元素的延展去規劃板塊的形狀。比如斜角的方式多數應用于汽車／男性化人群等硬性的行業。或者吸取品牌vi上的圖形元素進行延展使用。

 

全屏背景：打破網頁架構板塊分割的限制／通過排版來區分內容的主次。推薦在網頁內容相對于較少上應用。由于使用的是背景圖所以氛圍比較強，通常應用于品牌網站或專題居多。在應用的時候確保內容板塊不背景被干擾。對背景的設計要求較高。

 

板塊錯位：網頁常規架構的銜接處錯位一部分，從而增加整體的層次感。是相對簡單的應用方式。建議在應用的時候不要過多增加層次／多的話比較難把控。通常在重要的內容或者首屏處使用這樣的設計方式，讓整體有主有此。

 

全屏切換：把原本長頁面上的內容規劃到多個屏切換展示。改變的方式比較大。設計的時候需要注意每一屏幕之間的對比／以及內容區域的高度排版風格等都需要保持一致。增加引導用戶進行下一步操作的交互控件是必不可少的元素。

 

上面的案例設計感都很強，但并不是每個風格以及表現樣式都適合我們這次修改的方向。結合對原作品的分析發現使用“板式斜切方式銜接”方式比較合適我們這次的修改，也貼合體育行業的屬性。

 

 

03 草圖繪制與內容規劃

 

按照靈感中（板塊斜切銜接的方式）感覺／嘗試在紙上畫出我們腦海中想象的大概網頁板式架構的樣子。

 

 

在草圖上隨意畫了幾種板式，最終結合實際需求我選擇了以（草圖03 ）的板式進行下一步設計。

 

使用草圖能快速修改呈現自己的想法，不限制大家一定用這個方式，每個人都應該找到最適合自己的方式才是最好的。

 

使用軟件將網頁的內容規劃，頭部和底部保持原來不變／主視覺用于展示熱門賽事等信息／內容區域展示不同賽事紀念品。呈現的時候盡量別去排版配色越簡單越好（因為比較容易影響到后期設計配色等）或者使用文檔的方式呈現。這個階段主要把內容規劃和客戶或者產品經理達成一致。避免接下來設計因內容關系進行大的修改。

 

 

 

 

04 頁面設計

 

（1）板式與文案進行粗略的擺放

 

根據草圖繪制的方案感覺進行網頁板式的搭建。首先新建一個畫布1920px 中間內容區域控制在1200px以內比較安全。（1200px 安全寬度能保證內容在筆記本等設備兼容。）頭部底部還是引用原版的設計。

 

 

每一個賽事主題板塊之間盡量做一些對比，常見的方式就是明暗對比。這里不單單是色彩的明暗對比，而是指視覺上的明暗關系。避免整體過于單一。以及用戶在瀏覽的時候造成視覺疲勞。同時每一個賽事主題板塊的長寬比例關系以及視覺暗明度順序處理方式都是具有規律性／一致性的。如上案例背景都是以深淺深淺規律延展。

 

 

（2）圖片填入

 

主要填充產品的圖片／以及根據不同欄目賽事專區主題尋找相應的圖片（找到的圖片可以嘗試先在板式上搭配下看看是否合適。再下載進一步處理。能讓我們尋找的圖片有效的進行適配。）于是我們先給網頁框架填入客戶提供的素材圖片（下圖是已經處理過后的圖片）由于主視覺在整個頁面占有比較重要的視覺。所以設計上相對用的時間比較多。為了避免浪費過多的時間從而導致項目延誤。我們打算把整體設計完成后，最后來進行主視覺設計。

 

 

 

產品圖展示：常見的商城列表頁面商品類型多形狀比例也不統一。歸納大致出現為方形細長型（橫豎），那么我們如何讓產品完美的適配呢？可以根據產品的形狀比例關系／如正方形細長型（豎橫）兩者設計一個最大的范圍，讓同類形產品比例適配相應的形狀范圍即可。盡量使用混合編排的方式讓整體視覺平衡。

 

圖片填充后發現頁面比較單調素雅，引導性不強。于是我嘗試給不同賽事主題板塊的色彩／文案／背景等進行優化

 

 

（3）色彩／文案

 

嘗試給每個板塊增加色塊進行搭配（色彩取自于不同賽事行業主題色）給文案搭配數字修飾，引導用戶閱讀。增加相關icon提升標題整體性。給人物增加環境色，使人物與色塊接觸部分融入正常。然后保持輔助色色調／icond的一致性。數字只作為修飾性作用，在運用的時候不要影響到標題的可讀性或干擾其它主題視覺即可。

 

 

運用色彩的時候，需要提前規劃好頁面上的主色輔助色品牌色三大級別。然后在不同的層級上運用它們。比如以上案例所有的大標題頭部底部背景色模塊等都使用主色，所有較小面積的按鈕，圖標，切換控件，標簽，突出字體等都使用品牌色。網站修飾背景／小字部分，線條等都使用輔助色。

 

運用字體的時候／需要先規劃好字體中的層級關系。它們展示的視覺優先級別原則（標題>副標題>正文>小字）所以在同級別中的運用／我們需要按照前面的優先級別關系去統一它們的樣式大小色彩行高間距等，然后整個頁面進行統一。

 

數字，字母或者形狀（比如線條箭頭等）元素。能將復雜的內容梳理清晰／有效的引導用戶有步驟性的瀏覽。應用的時候盡量在不影響主體內容的閱讀，同時視覺展現都需要保持統一。

 

 

（4）背景

 

在不同賽事主題板塊背景圖通過增加輔助圖形元素使它們展現豐富。這里打開站酷海洛下載相關的圖形。

 

 

然后運用到不同賽事板塊背景中。

 

 

圖片大致分為圖形和照片，避免在同級別上照片和圖形混搭破壞視覺上的一致性。以上案例都是以人物產品類（照片結合照片）和背景輔助圖形（圖形結合圖形）的形式展示。從而達到界面舒適／整體一致性。運用輔助圖形時，確保在每個板塊上的位置／色彩面積等都保持一致。不能干擾到主題內容的閱讀。

 

 

05 主視覺banner設計

 

最后我們來進行banner制作～首先我們尋找一張勞力士大賽相關主題人物素材。避免于官方球星沖突。我們先選擇一張不是正面人物的照片。

 

 

那么開始進行banner設計，包含以下幾個步驟：

圖片的置入與背景色搭配／文案排版與畫面位置關系／文案穿插與輔助線元素的運用／畫面明暗關系。

 

 

A  圖片的置入與背景色搭配

圖片置入banner中，控制好人物與banner位置面積關系。背景色取自圖片背景色使得整體容和過度自然。

 

B  文案排版與畫面位置關系

為了保持畫面的視覺平衡，文案整體的位置盡量控制在底部人物肩旁左右位置由于整體文案壓不住畫面。于是我們增加一段勞力士英文讓畫面平衡起來。

（圖）

 

 

C  文案穿插與輔助元素的運用

讓文案部分與人物穿插，增加空間感。優化btn的形狀使它和文案更緊密結合，增加動感的網球元素，虛實結合，讓背景更加豐富。

 

D  畫面明暗關系

背景融入塊狀元素使畫面協調一致。人物區域加強聚光／，讓畫面明暗分明。

 

保持畫面視覺平衡，文案位置不要超過人物肩旁偏上位置。按鈕設計不一定是方方正正，更多結合環境來變化。通過使用文案和人物直接穿插感／能快速構建空間感。

 

 

（6） 整體頁面完成

 

 

 

總結

 

在遇到客戶反饋意見時候不要慌，理性分析問題并且提出解決方案。然后和客戶溝通。如不能，可以和產品經理或者總監進行討論，最終確認一個大方向。然后進行內容布局／風格方向／頁面設計等步驟完成即可。設計的大致步驟可分為架構搭建／內容圖片填充／進行設計排版／細節優化等然后一個網頁基本就出來啦。

 

 

作者：俊敏