下面通過發現問題和案例修改來進行分析(案例來源于黑馬家族內部學員的初次作業)。
發現問題
好了,看完修改前后的對比之后,我們開始進一步分析,從上到下一起來看一下吧!
頭部導航欄區域
功能層面來說,發布既然運用高亮的處理,證明該功能是相對比較重要的,放在手勢盲區操作體驗不是很友好。
右側的兩個功能圖標距離太近,點擊過程中容易造成誤操作,兩個圖標的視覺不平衡,不能以高度來定標準,要看整體的面積占比。
最后,發布、搜索、功能圖標之間的間距沒有做規范設計,導致設計不夠嚴謹,視覺協調度和節奏感沒有呈現出來。
頂部分類導航區域
這個部分問題不是很大,類別之間的間距可以適當增加,如果是可以左右滑動的,末尾最好再新增一個,把可滑動的樣式體現出來。
Banner 圖區域
輪播 Banner 圖采用通欄的處理,會將整個界面一分為三(頭部區域、Banner 區域、作品區域),如果界面邊距較大的時候,這樣處理不是很理想,會使得整個界面不夠連貫。
輪播點的處理不建議使用灰色來表現,不僅區分不明顯,配色上面也顯得不夠干凈整潔。
Banner 圖本身的質量也是需要注意的,站在輸出作品的角度來說,圖片的質量會影響整個作品的氣質。而且這個圖沒有任何主題,設計的真實感無法得到體現。
作品(菜譜)區域
整個界面篇幅較大的區域就是推薦的各類菜譜,第一眼看過去,是不是圖片顯得沒有食欲啦!針對美食類作品,只有食物本身的食欲感才能吸引用戶去點擊學習。
菜譜名稱、作者信息、收藏與收藏數的顯示親密關系處理不合適,關聯性被分斷了。
間距留白沒有掌握好數字關系,顯得比較擁擠。直角的封面圖顯得有些生硬,親和力不是很強。
底部標簽欄
底部標簽欄最主要的就是圖標設計,圖標設計的規范性需要注重一下。比如針對線性圖標來說,描邊粗細的統一、圓角值的統一和風格的統一等需要重點對待。
其次就是點擊狀態和默認狀態的區分,圖標利用顏色深淺進行區分也是可以的,文字區域的區分也需要進行深淺的對比。
以上便是針對這個界面發現的一些在 UI 層面的問題,接下來我們一起針對這些問題進行修改。
案例修改
針對羅列出來的問題,下面進行一些修改,設計屬于主觀表達,僅代表黑馬哥自己的想法。不足的地方歡迎大家留言指正,互相進步。
頭部導航欄區域
為了方便用戶發布內容,我將發布按鈕移出導航欄,放置在底部標簽欄。將右側的兩個功能圖標拆分為左右兩側布局,優化了間距和布局細節。
功能圖標繪制上面三條橫線做了長短變化,顯得更靈動。整體圖標的高度要比通知圖標的小一點,以此來平衡它們之間的面積差異。
頂部分類導航區域
這個部分優化了文字之間的間距,然后通過字體大小和顏色深淺來區分點擊和默認狀態的差別,將短線裝飾改為弧線,弧線作為符號基因運用到底部標簽欄的圖標設計中,這里是作為視覺符號的延續。
Banner 圖區域
輪播 Banner 圖本身沒有做,本期案例只是 UI 層面的修改。優化了 Banner 圖的比例,采用 8:3 的比例進行計算,取 4 整除的高度數值。輪播點的設計通常有數字、小圓點、小短線、進度形式等,這里采用進度形式來表達。
作品(菜譜)區域
這個部分調整比較大,從內容到布局結構都做了調整。首先將固定尺寸的封面圖改為寬度固定高度自定義的瀑布流設計,滿足用戶的不同拍攝需求,對圖片設置了圓角處理,增強親和力。
將標題、作者信息、收藏數據統計等信息進行整合,集中布局展示,增加內容之間的親密關系。新增了標簽,由于菜譜種類較多,通過標簽更容易搜索到同類菜譜。
收藏圖標加數字來體現之前的文字表達形式,用戶更容易理解,采用愛心圖標既能表示喜歡也能帶有收藏的作用,點擊欲更強。
單行標題適配為最多兩行顯示,方便用戶為自己的菜譜名稱增加修飾詞。這里需要考慮最大值的情況,設計的時候需要體現出超出最大值的設計樣式。
最后就是選擇了拍攝質量更好的圖片來填充,作為作品輸出來說,配圖的質量還是至關重要的。來看一下這個部分的最終效果,對比一下就可以感受出前后視覺感的差異。
底部標簽欄
將發布按鈕布局在中間位置,做突出形式,吸引用戶發布內容,豐富平臺的作品量和提高用戶參與度。可以布局在標準的底部標簽欄內部,也可以做凸出顯示,這里嘗試了兩個版本。
優化了圖標設計,統一了描邊值和圓角值,用小弧線作為視覺符號進行點綴。點擊狀態換成面性圖標,區分更加明顯,顯得也更為成熟穩重。文字需要體現當前狀態和默認狀態的差異,這里使用品牌色來區分,也可以使用深淺不同的灰色來體現。
完成
通過對發現的問題進行調整之后,完成了最終的設計案例優化。這個案例比較簡單,通過案例想要說明的點是:無論簡單還是復雜,都要考慮好每一個細節的深入,也要對每一個元素的設計有自己的設計想法。每一個界面都要體現出設計規范、設計質量和自己的設計態度,只有作品成熟才能說服別人,獲得認可。
本次案例修改的大體流程是:分析問題所在、組織優化思路、調整內容結構、設計高保真原型、填充內容完成最終 UI 稿。
最后,感謝大家的閱讀學習,希望對大家能有一定的幫助,后續將會繼續帶來更多案例的修改分析,我們互相進步。
原文地址:黑馬家族(公眾號)