介面優化實戰

語言: CN / TW / HK

時間 2022-09-19 12:22:42 UI中國

主題: 設計

如何從站在設計的角度從表現層去優化一張頁面。表現層決定了介面上的元素能否很好的被使用者感知，然後達到產品或者設計的目標。

案例：醫療介面首頁

先來看一下優化前後的對比吧，頁面層級也不算複雜，主要是基於視覺層面進行考慮。我們先來分析問題：

導航欄區域

搜尋框在全頁面中的視覺層級較弱，而且不明顯。當目標不明確的使用者到此頁面時，無法快速找到搜尋入口，搜尋圖示與文字大小也不匹配而且輸入框的提示問題字型顏色也較弱，文案固定的情況也無法為無目標的使用者提供參考價值。

重要功能

1.功能入口的兩個顏色搭配起來，顯得過於陳舊。飽和度也不統一，藍色飽和度低，綠色飽和度高。2.卡片中的兩個圖示樣式不統一；3.文案排版沒有規範，輔助文案大小不統一。

功能入口

五個圖示的視覺大小不統一，而且設計形式過於單一，圖示的顏色也偏髒了，像是幾年前的設計風格

Banner

首先從設計風格來看，淡藍色與深棕色搭配並不協調，很突兀；資訊排版的文案也沒有突出重點，行動按鈕也不突出。其次這樣的banner在醫療產品中出現，有很強的的營銷感，並沒有傳遞出一種專業的感覺。所以應該簡化裝飾，突出內容，儘可能弱化營銷，讓banner看起來更像是產品自身內容，點選慾望更強。

名醫推薦

資訊排版沒什麼大問題，但是這裡的屏效太低，一屏就能只能看一個半，其他推薦的醫生曝光太少。並沒有達到設計目標。所以應該換一種排版，儘可能的展示更多推薦醫生。其次設計風格上，投影太生硬，太黑，造成了視覺干擾。

名醫課程

如果是產品內部的營銷課程，那麼該模組的設計過於普通且沒有吸引力，對於用來說就是一個普通的列表。所以設計師在設計形式上就必須要花多的功夫去思考，如何去向使用者傳遞專業和信任感，而不是這樣常規的排版。

案例修改

針對以上羅列的問題，下面進行一些修改，屬於主觀表達，僅代表我自己的想法。不足的地方歡迎大家指正，互相進步。

頂部導航優化

為了在首頁中突出搜尋框，添加了主色描邊，強化了提示文字。並且在頁面頭部加了一些彌散漸變，豐富視覺。當然強化搜尋框的形式有很多，加投影、改顏色等都可以。這裡僅演示一種方法

功能入口

調整顏色色相與飽和度，統一左側文案資訊排版規範，將兩排文案精簡成一排，提升閱讀效率。右側圖示採用了辨識度更高的圖形，利用內陰影，提升整體質感。

功能入口二

調整圖示顏色為產品主色，並且利用不透明度變化提升圖示設計細節。可能有的同學會說每個圖示用不同的顏色，識別起來會不會更輕鬆，這樣做當然沒問題。但是一定要控制好顏色的數量，最好不超過4種，過多頁面就會很花，反而增加了使用者識別負擔。那什麼情況可以用同色的圖示，如果想頁面看起來更統一，或者功能屬於統一屬性等，就可以使用同色系的圖示。