在針對(duì)某款產(chǎn)品做改版設(shè)計(jì)或視覺(jué)優(yōu)化時(shí)，我們可以怎么操作？這篇文章里，作者針對(duì)肯德基官方APP做了改版設(shè)計(jì)，一起來(lái)看看作者的分析思路，或許會(huì)對(duì)屏幕前的你有所幫助。

又到了肯德基瘋狂星期四，不知道各位筒子們，都叫炸雞了沒(méi)有，叫炸雞的時(shí)候，有沒(méi)有打開(kāi)肯德基 APP 或者小程序，享受過(guò)它們美妙的視覺(jué)效果和體驗(yàn)了嘛……

沒(méi)看過(guò)沒(méi)關(guān)系，下面是肯德基官方 APP 的截圖，也就是我們今天的改版案例：

改版聲明：改版的主要目標(biāo)是圍繞視覺(jué)做優(yōu)化，探索視覺(jué)輸出的方向和可能性，以及包含部分主觀分析推導(dǎo)出來(lái)的體驗(yàn)、交互問(wèn)題，不涉及產(chǎn)品背后的宏觀戰(zhàn)略。

任何沒(méi)有根據(jù)的用戶就喜歡 XXX、領(lǐng)導(dǎo)就要 XXX、產(chǎn)品都是 XXX 類問(wèn)題，或者認(rèn)為現(xiàn)在設(shè)計(jì)就做的很好，那么統(tǒng)一回復(fù) ——不如原版！

一、問(wèn)題分析

在原版設(shè)計(jì)中，存在的樣式問(wèn)題是很明顯的，相信看完的第一個(gè)感覺(jué)就是“亂”，因?yàn)槭裁礀|西都想強(qiáng)調(diào)，什么元素都想強(qiáng)加給用戶，信息和視覺(jué)全在打架，那效果是不可能好的，下面根據(jù)模塊逐一做出分析。

整個(gè)頁(yè)面包含上下兩個(gè)部分，上部分包含的要素有五個(gè)，背景、操作欄、新人禮包卡片、登錄卡片、快速入口。

這個(gè)背景的設(shè)計(jì)顯得很多余，不僅沒(méi)有具體的信息，而且手繪線條也和下方格格不入。背后還有操作欄內(nèi)的操作選項(xiàng)，黑色的圓角矩形背景并不能很好突出里面的元素，反而讓視覺(jué)更混亂。

再到下面的新人禮和登錄卡片，結(jié)合得毫無(wú)邏輯，左右寬度不一致很奇怪，新人禮廣告圖的優(yōu)惠券圖形和實(shí)際內(nèi)容也不搭。用戶如果沒(méi)登錄，那么登錄卡片里的數(shù)據(jù)也很多余。

如何定义B端产品及B端产品经理方法论

相较于C端产品，B端产品最大的特点是：面向特定领域用户，且数量少得多，但更注重对用户专业领域操作流程的深度挖掘——也就是专业性更强，与业务的结合更紧密。

查看详情 >

而快速入口先不評(píng)價(jià)圖標(biāo)設(shè)計(jì)，背后硬加一層背景讓標(biāo)題反白再顯示下半部分卡片輪廓，就是俗稱的為了一點(diǎn)醋包了頓餃子的行為。

下半部分，則是包含福利類型入口，公告，活動(dòng)列表三個(gè)主要部分，活動(dòng)列表中還包含主輪播廣告、限時(shí)秒殺、囤囤券、V 社福利、會(huì)員推薦、一般活動(dòng)等多個(gè)子模塊。

APP 專享福利禮，包含的選項(xiàng)其實(shí)不算多，還要點(diǎn)更多進(jìn)去查看是沒(méi)必要做法。緊接著顯示公告信息位置也很奇怪，夾在毫無(wú)邏輯的關(guān)聯(lián)的兩個(gè)模塊之間，而且在第一屏中幾乎看不到，不符合公告本身的作用。

然后就是活動(dòng)的列表，這部分的設(shè)計(jì)其實(shí)就是照搬電商運(yùn)營(yíng)模塊瓷片區(qū)結(jié)合瀑布流的模式，效果顯然很差，模塊的區(qū)分感受不到，而且因?yàn)橐曈X(jué)太沖了，看起來(lái)毫無(wú)任何吸引力。

至于其它的一些視覺(jué)問(wèn)題就不多展開(kāi)，擺在我們面前的主要難題，就是如何有效組織這么多模塊和信息，讓它們能有效的展現(xiàn)出來(lái)又不會(huì)沒(méi)有重點(diǎn)。

二、改版解析

我們做改版的基本流程，是先做框架再做視覺(jué)。下面是針對(duì)新版本的框架定義，對(duì)一些大方向的問(wèn)題做調(diào)整。

首先是頭部合并登錄和新人禮 Banner，因?yàn)榈卿浐髽邮绞遣煌?，那未登錄就用?dú)立的樣式不用考慮登錄后。

同時(shí)快速入口、公告使用白背景做突出，下半部分移除背景，形成上下的層次，且公告模塊上移，放在更容易被注意到的位置，讓順序邏輯也更合理一點(diǎn)。

有了初步的模塊定義，下一步就是完善原型框架，將內(nèi)容填充進(jìn)去并做進(jìn)一步的優(yōu)化。主要的想法調(diào)整在福利部分的秒殺和囤囤券上，合并在一起怎么做都不合理，所以拆分成兩個(gè)模塊。

最后，就可以填充顏色并完成所有的內(nèi)容了，下面輪流展示。

首先是頂部模塊，背景直接用主色的簡(jiǎn)便來(lái)替代，按鈕不做無(wú)用的透明度背景，優(yōu)化領(lǐng)取禮物的 Banner 做法，更接近主流的運(yùn)營(yíng)設(shè)計(jì)風(fēng)格（時(shí)間關(guān)系做的比較隨意）。

然后就是快速入口和公告，之前我們做過(guò)一篇輕擬物設(shè)計(jì)的分享，在這里我們直接使用是前做過(guò)的圖標(biāo)，和下方的圖標(biāo)做區(qū)分，并提供更好的視覺(jué)效果。

然后就是 APP 專享福利，這里沒(méi)做太大的變動(dòng)，只是去掉多余的文字介紹，平心而論專享福利這個(gè)標(biāo)題也想去掉，因?yàn)榻惺裁疵謱?duì)理解這些圖標(biāo)沒(méi)有實(shí)際幫助，底部的對(duì)比版本會(huì)去掉這個(gè)標(biāo)題。

最后就是底部的福利瀑布流了，這里的主要視覺(jué)思路，是簡(jiǎn)化圖片內(nèi)容，突出信息的主體，區(qū)分不同內(nèi)容的模塊，完成的結(jié)果如下。

其中，廣告用圖很多產(chǎn)品是直接無(wú)腦用線下或網(wǎng)站的海報(bào)，不僅畫(huà)面很嘈雜，而且小字信息非常多，這在移動(dòng)端是完全不適用的。所以我們完成這類設(shè)計(jì)首先就要選擇主體突出視覺(jué)相對(duì)簡(jiǎn)單的海報(bào)，并且一定要把不相關(guān)的文字內(nèi)容給處理掉（PS 里），比如下面的案例。

或者可以參照一些平面案例，自己快速找素材搭建個(gè)符合設(shè)計(jì)需要的廣告圖，幾分鐘就能做好，而不是不管什么不合適的物料素材都無(wú)腦貼上去。

下面，就可以查看改版前后的對(duì)比，是否有優(yōu)化前面羅列的問(wèn)題：