界面優化實戰
如何從站在設計的角度從表現層去優化一張頁面。表現層決定了界面上的元素能否很好的被用户感知,然後達到產品或者設計的目標。
案例:醫療界面首頁
先來看一下優化前後的對比吧,頁面層級也不算複雜,主要是基於視覺層面進行考慮。我們先來分析問題:
導航欄區域
搜索框在全頁面中的視覺層級較弱,而且不明顯。當目標不明確的用户到此頁面時,無法快速找到搜索入口,搜索圖標與文字大小也不匹配而且輸入框的提示問題字體顏色也較弱,文案固定的情況也無法為無目標的用户提供參考價值。
-
重要功能
1.功能入口的兩個顏色搭配起來,顯得過於陳舊。飽和度也不統一,藍色飽和度低,綠色飽和度高。2.卡片中的兩個圖標樣式不統一;3.文案排版沒有規範,輔助文案大小不統一。
功能入口
五個圖標的視覺大小不統一,而且設計形式過於單一,圖標的顏色也偏髒了,像是幾年前的設計風格
Banner
首先從設計風格來看,淡藍色與深棕色搭配並不協調,很突兀;信息排版的文案也沒有突出重點,行動按鈕也不突出。其次這樣的banner在醫療產品中出現,有很強的的營銷感,並沒有傳遞出一種專業的感覺。所以應該簡化裝飾,突出內容,儘可能弱化營銷,讓banner看起來更像是產品自身內容,點擊慾望更強。
名醫推薦
信息排版沒什麼大問題,但是這裏的屏效太低,一屏就能只能看一個半,其他推薦的醫生曝光太少。並沒有達到設計目標。所以應該換一種排版,儘可能的展示更多推薦醫生。其次設計風格上,投影太生硬,太黑,造成了視覺干擾。
名醫課程
如果是產品內部的營銷課程,那麼該模塊的設計過於普通且沒有吸引力,對於用來説就是一個普通的列表。所以設計師在設計形式上就必須要花多的功夫去思考,如何去向用户傳遞專業和信任感,而不是這樣常規的排版。
案例修改
針對以上羅列的問題,下面進行一些修改,屬於主觀表達,僅代表我自己的想法。不足的地方歡迎大家指正,互相進步。
頂部導航優化
為了在首頁中突出搜索框,添加了主色描邊,強化了提示文字。並且在頁面頭部加了一些彌散漸變,豐富視覺。當然強化搜索框的形式有很多,加投影、改顏色等都可以。這裏僅演示一種方法
功能入口
調整顏色色相與飽和度,統一左側文案信息排版規範,將兩排文案精簡成一排,提升閲讀效率。右側圖標採用了辨識度更高的圖形,利用內陰影,提升整體質感。
功能入口二
調整圖標顏色為產品主色,並且利用不透明度變化提升圖標設計細節。可能有的同學會説每個圖標用不同的顏色,識別起來會不會更輕鬆,這樣做當然沒問題。但是一定要控制好顏色的數量,最好不超過4種,過多頁面就會很花,反而增加了用户識別負擔。那什麼情況可以用同色的圖標,如果想頁面看起來更統一,或者功能屬於統一屬性等,就可以使用同色系的圖標。
Banner
前面提到,為了區別於常見banner形式,我們最好設計成看起來是產品自身的功能入口,用户看到後才不會養成慣性一閃而過。所以降低了營銷感,突出內容本身。
名醫推薦
為了提升名醫的曝光,將佈局改為四宮格。梳理信息優先層級,將擅長內容替換為更關注的科室。提升了信息的識別效率。
名醫課程
區別於普通樣式,可以加入醫生形象,傳遞專業感。並且加入了藍色漸變,以此來提升該模塊的吸引力。“111人正在學習”也符合大眾的從眾心裏,以此來吸引用户點擊。
大家在做完一張頁面後,最好是花時間來自審一下:
1.這張頁面的主要目的是什麼,想傳遞出哪些信息。
2.信息展示的層級是否合理
3.基礎的設計規範是否滿足
4.界面的瀏覽順序是否滿足產品目標...
Powered by Froala Editor
- B端設計指南 - 柵格
- 產品設計體驗 | 探索好的產品的設計祕笈!
- 第264期-朱一冰訪談【中篇】-2022設計之旅30
- 羊了個羊火爆全網,原來自己做個小遊戲這麼簡單!
- 把這個小思路記明白,再也不怕做排行等級類的需求了!
- 字母Logo設計如何簡單又有創意?|案例合集
- 設計祕籍丨如何從0到1設計一個詳情頁?
- B端對齊細節,這次是真的細
- UI面試時被説作品太醜怎麼辦——被懟100次後的經驗總結
- 重陽節營銷看這篇,助力你的創意之路節節登高
- 「羊了個羊」爆火吸金,趣味小遊戲營銷值得學習!
- 產品官網設計方法總結
- 產品體驗日記
- 進度條篇 | 從5方面入手,助你設計出優秀的進度條!
- Arnold 渲染技巧
- 意派Epub360丨國慶將至,企業創意借勢宣傳H5怎麼製作?
- 界面優化實戰
- 企業在做品牌設計創新時應注意遵循的五大規則
- 作為一名設計師我們應該如何設計好一個品牌LOGO
- Axure8.0教程:動態面板左右滑動及展開收起