分享一個(gè)比較實(shí)用的方式，當(dāng)客戶吐槽你的作品沒(méi)有設(shè)計(jì)感的時(shí)候，讓大家如何快速的改稿。呈現(xiàn)不一樣的設(shè)計(jì)。于是總結(jié)了大致幾個(gè)方法。

 

 

 

01 分析作品

 

下面案例是一個(gè)體育賽事的紀(jì)念品售賣(mài)網(wǎng)站，客戶認(rèn)為這個(gè)作品太常規(guī)，希望呈現(xiàn)出不一樣風(fēng)格的作品。于是我們將作品客觀分析了下。

 

 

優(yōu)點(diǎn)：

整體設(shè)計(jì)／嚴(yán)謹(jǐn)界面簡(jiǎn)潔。配色干凈 / 整體性一致。

 

缺點(diǎn)：

（1）整體缺少了體育行業(yè)的特性

解決方案 ：增加體育相關(guān)的元素

（2）頁(yè)面太過(guò)于正式／缺少活力／缺少購(gòu)買(mǎi)欲望

解決方案 ：優(yōu)化板式／整體色彩的搭配

（3）內(nèi)容展示過(guò)于少

解決方案 ：將原網(wǎng)站切換展示的標(biāo)簽都展開(kāi)在頁(yè)面上展示。

 

 

02 尋找靈感

在設(shè)計(jì)之前首先尋找一些靈感設(shè)計(jì)。便于后續(xù)確認(rèn)風(fēng)格以及表現(xiàn)方式大方向不走偏。于是尋找到了下面幾種類(lèi)型的案例。于是我尋找了一些非常規(guī)的設(shè)計(jì)作品。

 

 

板式斜切式銜接：通過(guò)改變板式板塊銜接部分的形狀。我們可以根據(jù)不同類(lèi)型行業(yè)用戶以及品牌圖形元素的延展去規(guī)劃板塊的形狀。比如斜角的方式多數(shù)應(yīng)用于汽車(chē)／男性化人群等硬性的行業(yè)?；蛘呶∑放苬i上的圖形元素進(jìn)行延展使用。

 

全屏背景：打破網(wǎng)頁(yè)架構(gòu)板塊分割的限制／通過(guò)排版來(lái)區(qū)分內(nèi)容的主次。推薦在網(wǎng)頁(yè)內(nèi)容相對(duì)于較少上應(yīng)用。由于使用的是背景圖所以氛圍比較強(qiáng)，通常應(yīng)用于品牌網(wǎng)站或?qū)ｎ}居多。在應(yīng)用的時(shí)候確保內(nèi)容板塊不背景被干擾。對(duì)背景的設(shè)計(jì)要求較高。

 

板塊錯(cuò)位：網(wǎng)頁(yè)常規(guī)架構(gòu)的銜接處錯(cuò)位一部分，從而增加整體的層次感。是相對(duì)簡(jiǎn)單的應(yīng)用方式。建議在應(yīng)用的時(shí)候不要過(guò)多增加層次／多的話比較難把控。通常在重要的內(nèi)容或者首屏處使用這樣的設(shè)計(jì)方式，讓整體有主有此。

 

全屏切換：把原本長(zhǎng)頁(yè)面上的內(nèi)容規(guī)劃到多個(gè)屏切換展示。改變的方式比較大。設(shè)計(jì)的時(shí)候需要注意每一屏幕之間的對(duì)比／以及內(nèi)容區(qū)域的高度排版風(fēng)格等都需要保持一致。增加引導(dǎo)用戶進(jìn)行下一步操作的交互控件是必不可少的元素。

 

上面的案例設(shè)計(jì)感都很強(qiáng)，但并不是每個(gè)風(fēng)格以及表現(xiàn)樣式都適合我們這次修改的方向。結(jié)合對(duì)原作品的分析發(fā)現(xiàn)使用“板式斜切方式銜接”方式比較合適我們這次的修改，也貼合體育行業(yè)的屬性。

 

 

03 草圖繪制與內(nèi)容規(guī)劃

 

按照靈感中（板塊斜切銜接的方式）感覺(jué)／嘗試在紙上畫(huà)出我們腦海中想象的大概網(wǎng)頁(yè)板式架構(gòu)的樣子。

 

 

在草圖上隨意畫(huà)了幾種板式，最終結(jié)合實(shí)際需求我選擇了以（草圖03 ）的板式進(jìn)行下一步設(shè)計(jì)。

 

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

 

使用軟件將網(wǎng)頁(yè)的內(nèi)容規(guī)劃，頭部和底部保持原來(lái)不變／主視覺(jué)用于展示熱門(mén)賽事等信息／內(nèi)容區(qū)域展示不同賽事紀(jì)念品。呈現(xiàn)的時(shí)候盡量別去排版配色越簡(jiǎn)單越好（因?yàn)楸容^容易影響到后期設(shè)計(jì)配色等）或者使用文檔的方式呈現(xiàn)。這個(gè)階段主要把內(nèi)容規(guī)劃和客戶或者產(chǎn)品經(jīng)理達(dá)成一致。避免接下來(lái)設(shè)計(jì)因內(nèi)容關(guān)系進(jìn)行大的修改。

 

 

 

 

04 頁(yè)面設(shè)計(jì)

 

（1）板式與文案進(jìn)行粗略的擺放

 

根據(jù)草圖繪制的方案感覺(jué)進(jìn)行網(wǎng)頁(yè)板式的搭建。首先新建一個(gè)畫(huà)布1920px 中間內(nèi)容區(qū)域控制在1200px以內(nèi)比較安全。（1200px 安全寬度能保證內(nèi)容在筆記本等設(shè)備兼容。）頭部底部還是引用原版的設(shè)計(jì)。

 

 

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

 

 

（2）圖片填入

 

主要填充產(chǎn)品的圖片／以及根據(jù)不同欄目賽事專(zhuān)區(qū)主題尋找相應(yīng)的圖片（找到的圖片可以嘗試先在板式上搭配下看看是否合適。再下載進(jìn)一步處理。能讓我們尋找的圖片有效的進(jìn)行適配。）于是我們先給網(wǎng)頁(yè)框架填入客戶提供的素材圖片（下圖是已經(jīng)處理過(guò)后的圖片）由于主視覺(jué)在整個(gè)頁(yè)面占有比較重要的視覺(jué)。所以設(shè)計(jì)上相對(duì)用的時(shí)間比較多。為了避免浪費(fèi)過(guò)多的時(shí)間從而導(dǎo)致項(xiàng)目延誤。我們打算把整體設(shè)計(jì)完成后，最后來(lái)進(jìn)行主視覺(jué)設(shè)計(jì)。

 

 

 

產(chǎn)品圖展示：常見(jiàn)的商城列表頁(yè)面商品類(lèi)型多形狀比例也不統(tǒng)一。歸納大致出現(xiàn)為方形細(xì)長(zhǎng)型（橫豎），那么我們?nèi)绾巫尞a(chǎn)品完美的適配呢？可以根據(jù)產(chǎn)品的形狀比例關(guān)系／如正方形細(xì)長(zhǎng)型（豎橫）兩者設(shè)計(jì)一個(gè)最大的范圍，讓同類(lèi)形產(chǎn)品比例適配相應(yīng)的形狀范圍即可。盡量使用混合編排的方式讓整體視覺(jué)平衡。

 

圖片填充后發(fā)現(xiàn)頁(yè)面比較單調(diào)素雅，引導(dǎo)性不強(qiáng)。于是我嘗試給不同賽事主題板塊的色彩／文案／背景等進(jìn)行優(yōu)化

 

 

（3）色彩／文案

 

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

 

 

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

 

運(yùn)用字體的時(shí)候／需要先規(guī)劃好字體中的層級(jí)關(guān)系。它們展示的視覺(jué)優(yōu)先級(jí)別原則（標(biāo)題>副標(biāo)題>正文>小字）所以在同級(jí)別中的運(yùn)用／我們需要按照前面的優(yōu)先級(jí)別關(guān)系去統(tǒng)一它們的樣式大小色彩行高間距等，然后整個(gè)頁(yè)面進(jìn)行統(tǒng)一。

 

數(shù)字，字母或者形狀（比如線條箭頭等）元素。能將復(fù)雜的內(nèi)容梳理清晰／有效的引導(dǎo)用戶有步驟性的瀏覽。應(yīng)用的時(shí)候盡量在不影響主體內(nèi)容的閱讀，同時(shí)視覺(jué)展現(xiàn)都需要保持統(tǒng)一。

 

 

（4）背景

 

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

 

 

然后運(yùn)用到不同賽事板塊背景中。

 

 

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

 

 

05 主視覺(jué)banner設(shè)計(jì)

 

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

 

 

那么開(kāi)始進(jìn)行banner設(shè)計(jì)，包含以下幾個(gè)步驟：

圖片的置入與背景色搭配／文案排版與畫(huà)面位置關(guān)系／文案穿插與輔助線元素的運(yùn)用／畫(huà)面明暗關(guān)系。

 

 

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

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

 

B  文案排版與畫(huà)面位置關(guān)系

為了保持畫(huà)面的視覺(jué)平衡，文案整體的位置盡量控制在底部人物肩旁左右位置由于整體文案壓不住畫(huà)面。于是我們?cè)黾右欢蝿诹κ坑⑽淖尞?huà)面平衡起來(lái)。

（圖）

 

 

C  文案穿插與輔助元素的運(yùn)用

讓文案部分與人物穿插，增加空間感。優(yōu)化btn的形狀使它和文案更緊密結(jié)合，增加動(dòng)感的網(wǎng)球元素，虛實(shí)結(jié)合，讓背景更加豐富。

 

D  畫(huà)面明暗關(guān)系

背景融入塊狀元素使畫(huà)面協(xié)調(diào)一致。人物區(qū)域加強(qiáng)聚光／，讓畫(huà)面明暗分明。

 

保持畫(huà)面視覺(jué)平衡，文案位置不要超過(guò)人物肩旁偏上位置。按鈕設(shè)計(jì)不一定是方方正正，更多結(jié)合環(huán)境來(lái)變化。通過(guò)使用文案和人物直接穿插感／能快速構(gòu)建空間感。

 

 

（6） 整體頁(yè)面完成

 

 

 

總結(jié)

 

在遇到客戶反饋意見(jiàn)時(shí)候不要慌，理性分析問(wèn)題并且提出解決方案。然后和客戶溝通。如不能，可以和產(chǎn)品經(jīng)理或者總監(jiān)進(jìn)行討論，最終確認(rèn)一個(gè)大方向。然后進(jìn)行內(nèi)容布局／風(fēng)格方向／頁(yè)面設(shè)計(jì)等步驟完成即可。設(shè)計(jì)的大致步驟可分為架構(gòu)搭建／內(nèi)容圖片填充／進(jìn)行設(shè)計(jì)排版／細(xì)節(jié)優(yōu)化等然后一個(gè)網(wǎng)頁(yè)基本就出來(lái)啦。

 

 

作者：俊敏