之前參加了一個(gè)改稿活動(dòng)，我設(shè)計(jì)的網(wǎng)頁(yè)有幸被米田的天空老師修改，老師的講解細(xì)致入微，個(gè)人覺得收獲頗多，故整理成文字稿發(fā)布出來(lái)，大家相互學(xué)習(xí)。

試著瞇著眼睛去看設(shè)計(jì)，你會(huì)看到不一樣的世界。

為什么會(huì)這么說(shuō)呢？比如我們現(xiàn)在看到的這幅畫，一般美術(shù)生的終極目標(biāo)，都是畫一個(gè)完整的大衛(wèi)雕像，這是挑戰(zhàn)自己的一個(gè)目標(biāo)，而大衛(wèi)雕像是非常難畫的，特別是你在畫那些頭發(fā)，眼睛，鼻子這些細(xì)節(jié)的時(shí)候，往往畫著畫著你就會(huì)整個(gè)跳到了細(xì)節(jié)的勾畫里面，而忘記了整體的一個(gè)關(guān)系。同樣，今天的設(shè)計(jì)修改的大部分的工作量，都是處在于處理整體，如何去快速去統(tǒng)一一些東西。

項(xiàng)目背景

這是一個(gè)勞動(dòng)關(guān)系協(xié)調(diào)師的招生宣傳網(wǎng)頁(yè)，偏內(nèi)容視覺展示，老板想要藍(lán)色商務(wù)風(fēng)格，上線后發(fā)現(xiàn)頁(yè)面好像平淡了些，不能讓人眼前一亮。

改稿意見

設(shè)計(jì)整體上想法很多，需要表達(dá)的東西也很多。這時(shí)候，很容易迷失在細(xì)節(jié)的塑造，就如同我們畫畫時(shí)，形態(tài)沒有構(gòu)造完整，就匆匆忙塑造細(xì)節(jié)。最終，會(huì)出現(xiàn)整體效果有缺失的問(wèn)題，左邊那張圖就是原來(lái)的網(wǎng)頁(yè)界面，我們可以試著瞇著眼睛去看整體的設(shè)計(jì)感覺，多多少少會(huì)感覺有點(diǎn)零散。右邊就是改好的作品，相對(duì)看起來(lái)會(huì)稍微比較整體，留白的部分不會(huì)顯得特別多，各種元素均勻的分布在整體的頁(yè)面里面。

針對(duì)這個(gè)頁(yè)面的具體問(wèn)題，擬定改稿三部曲：

品牌定位：品牌導(dǎo)入，把控色彩體系

對(duì)齊統(tǒng)一：善于引導(dǎo)線，把握整體造型

交互協(xié)同：交互控件，保持統(tǒng)一一致性

品牌定位

這個(gè)頁(yè)面最終是上線在北區(qū)教育官網(wǎng)的一個(gè)子頁(yè)面中，根據(jù)官網(wǎng)的主色調(diào)和頁(yè)面Banner的插畫配色將品牌色提煉出來(lái)，分別是深藍(lán)色，亮青色和點(diǎn)綴色亮黃色。

亮黃色作為點(diǎn)綴色可以打破青藍(lán)配色的肅穆，讓畫面活過(guò)來(lái)。

用品牌色深藍(lán)色渲染氛圍，亮青色圖標(biāo)作為過(guò)渡，鼠標(biāo)移動(dòng)上去的時(shí)候會(huì)呈現(xiàn)高亮的白色，增強(qiáng)頁(yè)面設(shè)計(jì)的層次感。

對(duì)齊統(tǒng)一

原先的設(shè)計(jì)對(duì)齊問(wèn)題很大，模塊布局沒有嚴(yán)格按照柵格化系統(tǒng)規(guī)范進(jìn)行設(shè)計(jì)，線條粗細(xì)不一致，陰影大小不統(tǒng)一，視覺引導(dǎo)線不明顯。一般在頁(yè)面設(shè)計(jì)中都需要存在一條主引導(dǎo)線，由上而下引導(dǎo)用戶的瀏覽行為，而原設(shè)計(jì)中留白太多，找不到視覺對(duì)焦點(diǎn)，整體結(jié)構(gòu)顯得比較零散。

修改后的頁(yè)面左側(cè)會(huì)有很明顯的引導(dǎo)線，陰影大小統(tǒng)一，模塊之間的藍(lán)色指示條樣式相同，大小一致，頁(yè)面左右兩邊嚴(yán)格對(duì)齊，讓人感覺板式統(tǒng)一，強(qiáng)化對(duì)齊感。

交互協(xié)同

理論上所有可點(diǎn)擊的設(shè)計(jì)都算得上交互協(xié)同的一部分，交互協(xié)同需要給予用戶交互暗示，強(qiáng)調(diào)交互區(qū)域，告知用戶此處可以點(diǎn)擊。例如可以使用藍(lán)色高亮的實(shí)心按鈕，或者藍(lán)色線性空心按鈕表示，鼠標(biāo)移上去時(shí)透明度可以弱化成50%，形成交互反饋，同時(shí)方便前端頁(yè)面切圖。

原設(shè)計(jì)稿中亮青色應(yīng)用過(guò)多，容易使人產(chǎn)生視覺疲勞。同時(shí)，前端組件中的Tabs標(biāo)簽頁(yè)規(guī)定，不同的交互狀態(tài)也需要呈現(xiàn)出不同的視覺效果，所以可以利用透明度的變化產(chǎn)生設(shè)計(jì)的層次感，如圖所示，選中狀態(tài)下透明度100%，非選中狀態(tài)下透明度50%。

交互協(xié)同更強(qiáng)調(diào)模塊性，力求交互區(qū)域一目了然，告知用戶可點(diǎn)擊區(qū)域的同時(shí)暗示用戶下個(gè)點(diǎn)擊模塊功能類似。而原設(shè)計(jì)稿中左右模塊關(guān)系不夠緊密，不能提供給用戶足夠多的交互心理暗示，以至于用戶并不清楚左邊的按鈕是否可以點(diǎn)擊。

原設(shè)計(jì)稿中行業(yè)標(biāo)配的插畫配圖不太恰當(dāng)，可以考慮跟下面模塊的設(shè)計(jì)風(fēng)格呼應(yīng)。如果頁(yè)面中采用實(shí)景圖片素材，可以選擇在不同位置穿插，而不是只有一個(gè)部分在用。

原設(shè)計(jì)稿中將內(nèi)容處理成左中右三個(gè)大小一樣的模塊，但由于內(nèi)容字?jǐn)?shù)差別過(guò)大，模塊留白參差不齊，整體顯得不夠緊湊。經(jīng)過(guò)修改處理成上中下結(jié)構(gòu)，通過(guò)高度控制不同比例的縮放，方便板式對(duì)齊，達(dá)到視覺統(tǒng)一。

頁(yè)尾的Icon圖標(biāo)所用的黑色背景出現(xiàn)地過(guò)于突兀，需要弱化視覺效果。

 最終效果 

總結(jié)

設(shè)計(jì)是一項(xiàng)嚴(yán)謹(jǐn)?shù)墓ぷ?，只有在?xì)節(jié)處理與整體風(fēng)格把控之間找到一個(gè)合適的平衡點(diǎn)，設(shè)計(jì)才能出彩。設(shè)計(jì)過(guò)程中還應(yīng)該充分考慮到用戶使用場(chǎng)景，理解用戶體驗(yàn)的真正意義。