分享一個比較實用的方式，當客戶吐槽你的作品沒有設(shè)計感的時候，讓大家如何快速的改稿。呈現(xiàn)不一樣的設(shè)計。于是總結(jié)了大致幾個方法。
01 分析作品
下面案例是一個體育賽事的紀念品售賣網(wǎng)站，客戶認為這個作品太常規(guī)，希望呈現(xiàn)出不一樣風(fēng)格的作品。于是我們將作品客觀分析了下。
優(yōu)點：
整體設(shè)計／嚴謹界面簡潔。配色干凈 / 整體性一致。
缺點：
（1）整體缺少了體育行業(yè)的特性
解決方案 ：增加體育相關(guān)的元素
（2）頁面太過于正式／缺少活力／缺少購買欲望
解決方案 ：優(yōu)化板式／整體色彩的搭配
（3）內(nèi)容展示過于少
解決方案 ：將原網(wǎng)站切換展示的標簽都展開在頁面上展示。
02 尋找靈感
在設(shè)計之前首先尋找一些靈感設(shè)計。便于后續(xù)確認風(fēng)格以及表現(xiàn)方式大方向不走偏。于是尋找到了下面幾種類型的案例。于是我尋找了一些非常規(guī)的設(shè)計作品。
板式斜切式銜接：通過改變板式板塊銜接部分的形狀。我們可以根據(jù)不同類型行業(yè)用戶以及品牌圖形元素的延展去規(guī)劃板塊的形狀。比如斜角的方式多數(shù)應(yīng)用于汽車／男性化人群等硬性的行業(yè)?；蛘呶∑放苬i上的圖形元素進行延展使用。
全屏背景：打破網(wǎng)頁架構(gòu)板塊分割的限制／通過排版來區(qū)分內(nèi)容的主次。推薦在網(wǎng)頁內(nèi)容相對于較少上應(yīng)用。由于使用的是背景圖所以氛圍比較強，通常應(yīng)用于品牌網(wǎng)站或?qū)ｎ}居多。在應(yīng)用的時候確保內(nèi)容板塊不背景被干擾。對背景的設(shè)計要求較高。
板塊錯位：網(wǎng)頁常規(guī)架構(gòu)的銜接處錯位一部分，從而增加整體的層次感。是相對簡單的應(yīng)用方式。建議在應(yīng)用的時候不要過多增加層次／多的話比較難把控。通常在重要的內(nèi)容或者首屏處使用這樣的設(shè)計方式，讓整體有主有此。
全屏切換：把原本長頁面上的內(nèi)容規(guī)劃到多個屏切換展示。改變的方式比較大。設(shè)計的時候需要注意每一屏幕之間的對比／以及內(nèi)容區(qū)域的高度排版風(fēng)格等都需要保持一致。增加引導(dǎo)用戶進行下一步操作的交互控件是必不可少的元素。
上面的案例設(shè)計感都很強，但并不是每個風(fēng)格以及表現(xiàn)樣式都適合我們這次修改的方向。結(jié)合對原作品的分析發(fā)現(xiàn)使用“板式斜切方式銜接”方式比較合適我們這次的修改，也貼合體育行業(yè)的屬性。
03 草圖繪制與內(nèi)容規(guī)劃
按照靈感中（板塊斜切銜接的方式）感覺／嘗試在紙上畫出我們腦海中想象的大概網(wǎng)頁板式架構(gòu)的樣子。
在草圖上隨意畫了幾種板式，最終結(jié)合實際需求我選擇了以（草圖03 ）的板式進行下一步設(shè)計。
使用草圖能快速修改呈現(xiàn)自己的想法，不限制大家一定用這個方式，每個人都應(yīng)該找到最適合自己的方式才是最好的。
使用軟件將網(wǎng)頁的內(nèi)容規(guī)劃，頭部和底部保持原來不變／主視覺用于展示熱門賽事等信息／內(nèi)容區(qū)域展示不同賽事紀念品。呈現(xiàn)的時候盡量別去排版配色越簡單越好（因為比較容易影響到后期設(shè)計配色等）或者使用文檔的方式呈現(xiàn)。這個階段主要把內(nèi)容規(guī)劃和客戶或者產(chǎn)品經(jīng)理達成一致。避免接下來設(shè)計因內(nèi)容關(guān)系進行大的修改。
04 頁面設(shè)計
（1）板式與文案進行粗略的擺放
根據(jù)草圖繪制的方案感覺進行網(wǎng)頁板式的搭建。首先新建一個畫布1920px 中間內(nèi)容區(qū)域控制在1200px以內(nèi)比較安全。（1200px 安全寬度能保證內(nèi)容在筆記本等設(shè)備兼容。）頭部底部還是引用原版的設(shè)計。
每一個賽事主題板塊之間盡量做一些對比，常見的方式就是明暗對比。這里不單單是色彩的明暗對比，而是指視覺上的明暗關(guān)系。避免整體過于單一。以及用戶在瀏覽的時候造成視覺疲勞。同時每一個賽事主題板塊的長寬比例關(guān)系以及視覺暗明度順序處理方式都是具有規(guī)律性／一致性的。如上案例背景都是以深淺深淺規(guī)律延展。
（2）圖片填入
主要填充產(chǎn)品的圖片／以及根據(jù)不同欄目賽事專區(qū)主題尋找相應(yīng)的圖片（找到的圖片可以嘗試先在板式上搭配下看看是否合適。再下載進一步處理。能讓我們尋找的圖片有效的進行適配。）于是我們先給網(wǎng)頁框架填入客戶提供的素材圖片（下圖是已經(jīng)處理過后的圖片）由于主視覺在整個頁面占有比較重要的視覺。所以設(shè)計上相對用的時間比較多。為了避免浪費過多的時間從而導(dǎo)致項目延誤。我們打算把整體設(shè)計完成后，最后來進行主視覺設(shè)計。
產(chǎn)品圖展示：常見的商城列表頁面商品類型多形狀比例也不統(tǒng)一。歸納大致出現(xiàn)為方形細長型（橫豎），那么我們?nèi)绾巫尞a(chǎn)品完美的適配呢？可以根據(jù)產(chǎn)品的形狀比例關(guān)系／如正方形細長型（豎橫）兩者設(shè)計一個最大的范圍，讓同類形產(chǎn)品比例適配相應(yīng)的形狀范圍即可。盡量使用混合編排的方式讓整體視覺平衡。
圖片填充后發(fā)現(xiàn)頁面比較單調(diào)素雅，引導(dǎo)性不強。于是我嘗試給不同賽事主題板塊的色彩／文案／背景等進行優(yōu)化
（3）色彩／文案
嘗試給每個板塊增加色塊進行搭配（色彩取自于不同賽事行業(yè)主題色）給文案搭配數(shù)字修飾，引導(dǎo)用戶閱讀。增加相關(guān)icon提升標題整體性。給人物增加環(huán)境色，使人物與色塊接觸部分融入正常。然后保持輔助色色調(diào)／icond的一致性。數(shù)字只作為修飾性作用，在運用的時候不要影響到標題的可讀性或干擾其它主題視覺即可。
運用色彩的時候，需要提前規(guī)劃好頁面上的主色輔助色品牌色三大級別。然后在不同的層級上運用它們。比如以上案例所有的大標題頭部底部背景色模塊等都使用主色，所有較小面積的按鈕，圖標，切換控件，標簽，突出字體等都使用品牌色。網(wǎng)站修飾背景／小字部分，線條等都使用輔助色。
運用字體的時候／需要先規(guī)劃好字體中的層級關(guān)系。它們展示的視覺優(yōu)先級別原則（標題>副標題>正文>小字）所以在同級別中的運用／我們需要按照前面的優(yōu)先級別關(guān)系去統(tǒng)一它們的樣式大小色彩行高間距等，然后整個頁面進行統(tǒng)一。
數(shù)字，字母或者形狀（比如線條箭頭等）元素。能將復(fù)雜的內(nèi)容梳理清晰／有效的引導(dǎo)用戶有步驟性的瀏覽。應(yīng)用的時候盡量在不影響主體內(nèi)容的閱讀，同時視覺展現(xiàn)都需要保持統(tǒng)一。
（4）背景
在不同賽事主題板塊背景圖通過增加輔助圖形元素使它們展現(xiàn)豐富。這里打開站酷海洛下載相關(guān)的圖形。
然后運用到不同賽事板塊背景中。
圖片大致分為圖形和照片，避免在同級別上照片和圖形混搭破壞視覺上的一致性。以上案例都是以人物產(chǎn)品類（照片結(jié)合照片）和背景輔助圖形（圖形結(jié)合圖形）的形式展示。從而達到界面舒適／整體一致性。運用輔助圖形時，確保在每個板塊上的位置／色彩面積等都保持一致。不能干擾到主題內(nèi)容的閱讀。
05 主視覺banner設(shè)計
最后我們來進行banner制作～首先我們尋找一張勞力士大賽相關(guān)主題人物素材。避免于官方球星沖突。我們先選擇一張不是正面人物的照片。
那么開始進行banner設(shè)計，包含以下幾個步驟：
圖片的置入與背景色搭配／文案排版與畫面位置關(guān)系／文案穿插與輔助線元素的運用／畫面明暗關(guān)系。
A 圖片的置入與背景色搭配
圖片置入banner中，控制好人物與banner位置面積關(guān)系。背景色取自圖片背景色使得整體容和過度自然。
B 文案排版與畫面位置關(guān)系
為了保持畫面的視覺平衡，文案整體的位置盡量控制在底部人物肩旁左右位置由于整體文案壓不住畫面。于是我們增加一段勞力士英文讓畫面平衡起來。
（圖）
C 文案穿插與輔助元素的運用
讓文案部分與人物穿插，增加空間感。優(yōu)化btn的形狀使它和文案更緊密結(jié)合，增加動感的網(wǎng)球元素，虛實結(jié)合，讓背景更加豐富。
D 畫面明暗關(guān)系
背景融入塊狀元素使畫面協(xié)調(diào)一致。人物區(qū)域加強聚光／，讓畫面明暗分明。
保持畫面視覺平衡，文案位置不要超過人物肩旁偏上位置。按鈕設(shè)計不一定是方方正正，更多結(jié)合環(huán)境來變化。通過使用文案和人物直接穿插感／能快速構(gòu)建空間感。
（6） 整體頁面完成
總結(jié)
在遇到客戶反饋意見時候不要慌，理性分析問題并且提出解決方案。然后和客戶溝通。如不能，可以和產(chǎn)品經(jīng)理或者總監(jiān)進行討論，最終確認一個大方向。然后進行內(nèi)容布局／風(fēng)格方向／頁面設(shè)計等步驟完成即可。設(shè)計的大致步驟可分為架構(gòu)搭建／內(nèi)容圖片填充／進行設(shè)計排版／細節(jié)優(yōu)化等然后一個網(wǎng)頁基本就出來啦。
作者：俊敏
