改版設計的思路(下):解決問題
做改版設計大體思路很簡單,只需要做好兩件事:發現問題與解決問題。上一期(點擊查看)我們做了改版設計的第一步──發現問題,今天我們來做第二步──解決問題!
經過分析,我發現一個很有趣的事情,就是上期提出的問題與問題之間還有很多其他維度的共性,于是我再次分類,得到以下三種類型:
1、規范統一類問題
例如:文字、顏色、控件、圖標有太多的不統一、不規范。
2、設計風格類問題
例如:圖標、卡片風格陳舊。
3、信息層級類問題
例如:信息布局層級、卡片文字層級。
我們來分別講解,并給出相應的解決思路。
1. 規范統一類問題
圖標線條粗細不一致,文字各種大小,顏色各種亂用,其實這些都是規范沒有制定好的原因,也就是我所講的規范類問題。
如何解決呢?
我們需要先定好一個前期規范,然后隨著場景的增加,再不斷調整規范,但是千萬不能在沒有任何指導原則、目標的情況下就開始天馬行空的設計,那樣最后一定會亂作一團,尤其是在團隊合作的情況下。
舉幾個例子(上期的問題):
1.1 文字各種大小、顏色
如下圖:
我們需要拉通所有場景,來進行分類,最后給出一個前期規范:
比如定義一級標題的文字為24pt,二級標題的文字為18pt,正文為14pt,輔助性文字為12pt。
文字的顏色,重要型文字使用#333333,普通型文字使用#666666,輔助型文字使用#999999。
對于文字的加粗問題,整個頁面,要么主標題都加粗,要么都不加粗,如果有些加粗有些又不加粗,別人也許就會覺得我們做的不夠嚴謹(當然特殊場景除外)!
1.2 圖標線條粗細不一致
這是一個非常不應該發生的錯誤,在具體設計執行前,需要將描邊粗細的規范提前制定好,例如統一為2px。
如下圖:
1.3 ?顏色亂用
顏色也需要我們輸出前期的基礎規范,考慮好他們的使用場景,以免在設計的時候胡亂用色,使最后產出的頁面雜亂無章。
比如主色、輔助色、灰度色等等。
以前有寫過一篇關于規范的模板,有需要的可以去看看,這里就不具體展示了。
網址如下:核桃App界面設計及設計規范
1.4 控件樣式不統一
明明是一個控件,卻要用兩種樣式。
我們需要擇優做好一個,然后放進控件庫中,等到需要的時候直接調取。
通過上面幾個例子,大家會發現,如果前期規范沒有做好鋪墊,后面的設計就會很難把控,尤其是當頁面越來越多的時候。
2. 設計風格類問題
這一類問題都發生在具體設計的時候,
如何解決呢?
我的解決思路如下(其實這個思路適用于大部分問題):
- 分析自己產品的問題(上一期已經分析過)
- 看看競品都是怎么做的
- 結合自己產品的屬性、業務需求等因素進行優化
舉例開始。
2.1 卡片樣式不夠精致
先看看我們的卡片:
上一期我們已經分析出這個排行榜卡片的問題:前三名的序號過于搶眼,且樣式不美觀。
接下來我們需要做的就是看看競品都是怎么處理的,因為看競品是我們做設計必須要經歷的一步,千萬不要憑空想,會浪費很多時間。
我找了幾個競品網站的排行榜卡片設計,部分截圖如下:
我們會發現競品的卡片前三名序號顏色都是統一的(當然有些網站也不是這樣的),雖然網易新聞官網的卡片用了紅色,但是為了避免過于刺眼,它沒有用色塊的形式,而是僅僅使數字加大變紅。
我們可以結合競品的優點來進行我們的卡片設計,最后得到下圖:
不過這只是自己主觀針對視覺問題來做的優化,我們解決了顏色花哨搶眼及標簽樣式繁瑣的問題,但實際工作中你還需要結合需求方的要求去進行調整,在這個過程中,溝通方式比較關鍵,恰當的溝通可以讓你和需求方成為共同解決問題的戰友,而不恰當的溝通方式也許會讓你們成為互相排斥的敵人,所以很多時候心態和處事方法更加重要。
2.2 圖標顏色花哨、風格陳舊
你也可以按照上面的步驟來進行優化,只不過說起來容易,真的想做得好還是需要經驗的沉淀、審美的提高,只有不斷地練習,才能做的得心應手。
由于工作內容不能拿出來分享,所以改版的圖標都是臨時在網上下載直接用的,大家可不能這樣做哦!
雖然是下載的圖標,但是基本的問題我們已經解決,例如視覺大小不一致,圖標顏色過于搶眼等等,如下圖:
優化前
優化后
如果是剛入行的朋友,建議可以先從模仿,借鑒開始,因為如果沒有經歷過大量的臨摹做基礎,直接就想創新,是很難做到的。
但也不能照搬抄襲,這個度一定要把控好。
3. 信息層級類問題
這一類問題為什么要單獨拿出來說呢?
因為層級區分不明顯是導致頁面沒有主次、混亂的最重要原因,我們在做設計的時候,一定要隨時提醒自己,哪個是最主要的,哪些是次要的,當什么都重要的時候,也許做出來的效果就是什么都不重要了。
說幾個例子:
1. 布局層級問題
上圖讓我覺得重點是個人信息和5個圖標,但其實最重要的是課程導航,針對這個問題,我們可以:
- 隱藏個人信息,將其收在導航欄頭像里面,鼠標經過時展示即可
- 弱化圖標(例如:使用線性圖標或降低圖標顏色的飽和度等)
最后得到結果如下圖:
2.2 ?文字層級
我們的卡片標題與輔助信息對比不明顯,解決方案就是加大標題,弱化輔助信息,最后得到結果如下圖:
這個問題也屬于層級類問題,標題與輔助信息對比不明顯,解決方案就是加大標題,縮小輔助信息,最后得到結果如下圖:
以上就是今天分享的內容,希望在思路上能給大家一點啟發,菜心的說法不一定對,不過你可以用來參考,取其精華去其糟粕!
最后看一下改版后的首頁界面,如下圖:
對了,為什么上一期的柵格問題沒有說呢?因為柵格系統是一個很大的知識點,打算下一期單獨寫一篇來和大家分享。
相關閱讀
#專欄作家#
菜心,微信公眾號:菜心設計鋪,人人都是產品經理專欄作家,華為ITUX用戶體驗設計師(主視覺),3年工作經驗,參與華為Welink、3MS、連長社區等多個項目的用戶體驗設計工作。歡迎大家互相交流關注。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
很喜歡你的分享,用簡單易懂的文字描述很重要的內容,結構思路也都很清晰,果斷關注了
太有才了,改版后舒服很多
最后放一張改版前后整張的對比圖效果應該會更好,我回去翻之前的整體效果又找了好一會
學到了,感覺到自己有好多問題,感謝?。。?/p>
好想去找你們聚會 ??
??
為了這幾個問題改版嗎?
沒有想法