如何從站在設(shè)計(jì)的角度從表現(xiàn)層去優(yōu)化一張頁(yè)面。表現(xiàn)層決定了界面上的元素能否很好的被用戶感知，然后達(dá)到產(chǎn)品或者設(shè)計(jì)的目標(biāo)。

案例：醫(yī)療界面首頁(yè)

先來(lái)看一下優(yōu)化前后的對(duì)比吧，頁(yè)面層級(jí)也不算復(fù)雜，主要是基于視覺(jué)層面進(jìn)行考慮。我們先來(lái)分析問(wèn)題：

導(dǎo)航欄區(qū)域

搜索框在全頁(yè)面中的視覺(jué)層級(jí)較弱，而且不明顯。當(dāng)目標(biāo)不明確的用戶到此頁(yè)面時(shí)，無(wú)法快速找到搜索入口，搜索圖標(biāo)與文字大小也不匹配而且輸入框的提示問(wèn)題字體顏色也較弱，文案固定的情況也無(wú)法為無(wú)目標(biāo)的用戶提供參考價(jià)值。

重要功能

1.功能入口的兩個(gè)顏色搭配起來(lái)，顯得過(guò)于陳舊。飽和度也不統(tǒng)一，藍(lán)色飽和度低，綠色飽和度高。2.卡片中的兩個(gè)圖標(biāo)樣式不統(tǒng)一；3.文案排版沒(méi)有規(guī)范，輔助文案大小不統(tǒng)一。

功能入口

五個(gè)圖標(biāo)的視覺(jué)大小不統(tǒng)一，而且設(shè)計(jì)形式過(guò)于單一，圖標(biāo)的顏色也偏臟了，像是幾年前的設(shè)計(jì)風(fēng)格

Banner

首先從設(shè)計(jì)風(fēng)格來(lái)看，淡藍(lán)色與深棕色搭配并不協(xié)調(diào)，很突兀；信息排版的文案也沒(méi)有突出重點(diǎn)，行動(dòng)按鈕也不突出。其次這樣的banner在醫(yī)療產(chǎn)品中出現(xiàn)，有很強(qiáng)的的營(yíng)銷感，并沒(méi)有傳遞出一種專業(yè)的感覺(jué)。所以應(yīng)該簡(jiǎn)化裝飾，突出內(nèi)容，盡可能弱化營(yíng)銷，讓banner看起來(lái)更像是產(chǎn)品自身內(nèi)容，這樣用戶才有可能點(diǎn)擊。

名醫(yī)推薦

信息排版沒(méi)什么大問(wèn)題，但是這里的屏效太低，一屏就能只能看一個(gè)半，其他推薦的醫(yī)生曝光太少。并沒(méi)有達(dá)到設(shè)計(jì)目標(biāo)。所以應(yīng)該換一種排版，盡可能的展示更多推薦醫(yī)生。其次設(shè)計(jì)風(fēng)格上，投影太生硬，太黑。

名醫(yī)課程

如果是產(chǎn)品內(nèi)部的營(yíng)銷課程，那么該模塊的設(shè)計(jì)過(guò)于普通且沒(méi)有吸引力，對(duì)于用來(lái)說(shuō)就是一個(gè)普通的列表。所以設(shè)計(jì)師在設(shè)計(jì)形式上就必須要花多的功夫去思考，如何去向用戶傳遞專業(yè)和信任感，而不是這樣常規(guī)的排版。

案例修改

針對(duì)以上羅列的問(wèn)題，下面進(jìn)行一些修改，屬于主觀表達(dá)，僅代表我自己的想法。不足的地方歡迎大家指正，互相進(jìn)步。

頂部導(dǎo)航優(yōu)化

為了在首頁(yè)中突出搜索框，添加了主色描邊，強(qiáng)化了提示文字。并且在頁(yè)面頭部加了一些彌散漸變，豐富視覺(jué)。當(dāng)然強(qiáng)化搜索框的形式有很多，加投影、改顏色等都可以。這里僅演示一種方法

功能入口

調(diào)整顏色色相與飽和度，統(tǒng)一左側(cè)文案信息排版規(guī)范，將兩排文案精簡(jiǎn)成一排，提升閱讀效率。右側(cè)圖標(biāo)采用了辨識(shí)度更高的圖形，利用內(nèi)陰影，提升整體質(zhì)感。

功能入口二

調(diào)整圖標(biāo)顏色為產(chǎn)品主色，并且利用不透明度變化提升圖標(biāo)設(shè)計(jì)細(xì)節(jié)?？赡苡械耐瑢W(xué)會(huì)說(shuō)每個(gè)圖標(biāo)用不同的顏色，識(shí)別起來(lái)會(huì)不會(huì)更輕松，這樣做當(dāng)然沒(méi)問(wèn)題。但是一定要控制好顏色的數(shù)量，最好不超過(guò)4種，過(guò)多頁(yè)面就會(huì)很花，反而增加了用戶識(shí)別負(fù)擔(dān)。那什么情況可以用同色的圖標(biāo)，如果想頁(yè)面看起來(lái)更統(tǒng)一，或者功能屬于統(tǒng)一屬性等，就可以使用同色系的圖標(biāo)。

Banner

前面提到，為了區(qū)別于常見(jiàn)banner形式，我們最好設(shè)計(jì)成看起來(lái)是產(chǎn)品自身的功能入口，用戶看到后才不會(huì)養(yǎng)成慣性一閃而過(guò)。所以降低了營(yíng)銷感，突出內(nèi)容本身。

名醫(yī)推薦

為了提升名醫(yī)的曝光，將布局改為四宮格。梳理信息優(yōu)先層級(jí)，將擅長(zhǎng)內(nèi)容替換為更關(guān)注的科室。提升了信息的識(shí)別效率。

名醫(yī)課程

區(qū)別于普通樣式，可以加入醫(yī)生形象，傳遞專業(yè)感。并且加入了藍(lán)色漸變，以此來(lái)提升該模塊的吸引力。“111人正在學(xué)習(xí)”也符合大眾的從眾心里，以此來(lái)吸引用戶點(diǎn)擊。

大家在做完一張頁(yè)面后，最好是花時(shí)間來(lái)自審一下：1.這張頁(yè)面的主要目的是什么，想傳遞出哪些信息。2.信息展示的層級(jí)是否合理3.基礎(chǔ)的設(shè)計(jì)規(guī)范是否滿足4.界面的瀏覽順序是否滿足產(chǎn)品目標(biāo)...

Powered by Froala Editor