每個
web開發人員都會遇到過一些需要你做視覺決策的情況,不管他們喜不喜歡。
也許是因爲你所在的公司沒有全職設計師或者你需要嘗試一套新功能時需要自己優化細節。
也許上述情況發生了,你也可以說一句:“我不是設計師,更不是藝術家。”但事實證明有很多技巧可以提升界面的水平,不需要有圖形設計背景。
1.使用顏色和字體粗細來創造層次感而非字體大小
一個設計新手經常會犯的錯我就是,在UI文字處理中單一使用字體大小來體現層級。
“這行文字信息很重要,放大一點”
“這行文字信息不重要,縮小一點”
相比與用字號大小來豐富層級,試一試增加顏色和字體粗細兩種方式,會讓你的界面開起來更優秀。
“這行文字信息和很重要?變得粗一點”
“這行文字信息不重要?變得淺一點。”
嘗試並保持兩種或三種以上的配色
用暗色「或者黑色」突出表現主要內容顏色(類似標題樣式)
用灰色表現次要內容(類似文章的出版日期)
用更淺的灰色表現輔助信息(類似文章中的腳註信息)
與其類似的,兩種字體粗細通常可以滿足一套UI的層次表達。
常規字體(400或500)可用於大多數文字信息。
粗體字體(600或700)可用於強調文字信息。
用戶界面設計中儘量避免使用字重在400以下的字體;我們可以用於大標題,單在較小尺寸的界面上會顯得很不友好。
如果你想在次要信息中使用自重較輕的字體時,考慮使用淺色或者小字號字體會時不錯的選擇。
2.不要在有色背景上使用灰階文字信息
在白色背景上通過讓文字信息變爲淺灰色來表現次要信息時一種不錯的方式。但不適用於有色背景。
那是因爲我們在白色背景上看到的灰色效果會降低對比度。
使文本顏色接近背景色有助於創建層次感。
這裏有兩種方法可以降低對比度。
1.降低白色文本的不透明度
使用白色文本和底不透明度。這樣可以讓背景色與文本顏色相互滲透,使色調和諧,不與背景衝突。
2.選取基於背景色的顏色
當背景色是圖片和圖像時,避免因爲降低不透明而帶來的顏色太純或褪色,此方法優於上一種。
3.抵消陰影
不使用較大的的模糊和擴展用而是添加垂直偏移
這樣會顯得更自然,因爲這樣做是模擬了一個從上面照下來的光源,就像現實世界中的一樣。
這也同樣適用於在表哥輸入框內部的陰影樣式。
如果想深入瞭解陰影的處理,請移步Material design guidelines
4.使用較少的邊框
當你需要分離兩個元素時,嘗試不同的方法,而不僅僅是用邊框區分。
當然用邊框區分兩個元素不失爲一種方法,且是最容易想到的。但有時太多的邊框會讓人感到心煩意亂的。
嘗試去用下面的方法:
1.使用 box-shadow
Box-shadow 可以更好的概括邊界內的元素,可以簡潔有效的區分元素。
2.使用兩種不同的背景色
給元素賦予兩種背景色即可區分它們,如果在元素邊框內已經有了背景色,去掉邊框試試看。
3.增加分層
如何更好的隔離元素?乾脆將層隔離好了。
5.不要隨意擴展圖標
如果你需要一些大尺寸的圖標(例如首頁導航欄中的一些圖標)你可能會在iconfont下載後,然後調整尺寸滿足你的需求。
矢量圖增加尺寸後,質量真的不會受到影響嗎?
雖然矢量圖在放大後,不會降低質量,但在16-24px處繪製的圖標將尺寸擴展3、4倍後會看起來菲方不專業。他們缺乏細節,總是感覺到不協調。
如果你有小圖標嘗試包含在另一個形狀中,併爲形狀提供背景顏色。
6.使用accent border爲你的設計增色
如果你不是平面設計師,怎樣在用戶界面中提升視覺效果。
例如,在警告消息的旁邊:
或突出顯示爹活動導航欄
甚至在整個頁面佈局的頂部
7.並非每個按鈕都需要背景色
當用戶在頁面上執行多個操作時,很容易陷入純粹歸因於的語義的操作陷阱
像bootstrap這樣的框架通過提供一個語義樣式菜單來鼓勵這一點,無論添加何種按鈕,都可以選擇:
語義是按鈕設計的一個重要組成部分,但有一個更常見的維度,層次結構。
頁面上的每個操作都位於層級的某個位置。大多數頁面只有一個主要操作,一些次要操作,和一些很少使用的三級操作。
在設計這些操作時,層次結構中傳答它們的位置非常重要。
1.主要行動應該是明顯的。高對比度的顏色、面性圖標或按鈕等。
2.次要行動應該清楚但不突出,輪廓樣式或較低對比度的背景顏色都是好選擇。
3.三級行動應該是可發現的,但不佔據視覺焦點。像鏈接一樣設置這些操作通常是好選擇。