UI設計技術分享：教你幾個設計技巧讓老闆對你的設計讚不絕口

咱們作任何設計都離不開大小與重複的運用，這樣能使咱們的設計更加理性和科學，經得起推敲，那麼咱們一塊兒來探討下如何在產品設計中運用這一方法。

 

爲何大的物體更吸引眼球   

▲如上圖所示，a球會比右邊b球更吸引咱們去閱讀，大的物體視覺重量會比較大，咱們眼球的視覺方向就自動轉向它。

▲如上圖所示，咱們保持剛的大小，把a的透明度改變下，視覺重量是否是發生了變化？WHY？

當咱們把 a 球的視覺重量下降後，那麼即便 b球很小，他也會很吸引咱們眼球，這是由於 b球視覺重量比較大。

▲如上圖所示，若是兩個球大小同樣呢？仍是b球會更吸引咱們的眼球，由於b球有色光輝第一進入咱們眼球。

 

在產品設計中如何運用   

▲ 如上圖數字所示他們的視覺重量依次排下來，最大的是序列 1  最小的是4，不重要的元素咱們能夠經過把它們縮小或者下降透明度來弱化。

 

看個例子

 

重複在產品設計中的運用

重複？有沒有人打了個問號，看到這個標題，以前我寫了一篇文章叫一致性原則，當中有順帶提了下重複，當時說的不太詳細，今天再來仔細重溫下。

 

重複的重要性，能使產品的設計更加有節奏和高品質，爲何這樣說，咱們能重複的原子單位有不少，顏色，間距，大小，組件，圓角值，功能屬性等等，交互層面能重複交互操做多頁面間相同屬性交互要一致。

 

1 - 重複間距

▲ 上圖設計我一共就用了 3 個間距

 

2 - 特殊例子驗證

▲ 字裏行間在首頁的板塊設計比較鬆散，雖然也重複運用了間距，可是沒有節奏。圖片比例也比較奇怪，多行段落文字顯得比較鬆散。

 

3 - 結果

 

4 - 重複組件樣式

▲ 上面截圖標註出來的地方，控件倒角一致，造成一個隱形的視覺基因。

 

5 - 反面例子

▲ UC頭條的底部圖標設計很是圓潤，圖標設計師延續了品牌 LOGO 鹿的圓潤線條。這裏裏面的設計語言就和底部圖標有衝突，大部分按鈕設計無圓角，尖銳的輪廓（一、3），極少數按鈕帶有圓角即圖上標出來的 二、4和5欄目圖文樣式的圓角值也是不一致的，總體設計不知道想要傳達什麼樣的設計語言。

 

在仔細去觀察下 某蝸牛讀書的 的產品設計，設計語言從圖片圓角到按鈕，標籤，圖標設計都是帶有圓角幅度和他們產品logo氣息性格相符合。

 

6 - 重複顏色

 

它是什麼？就是表示相同操做的功能所表達的視覺含義要一致

▲ 相同屬性顏色一致，好比上面來至 IOS 系統軟件界面截圖，可點擊地方顏色一致，IOS在這方面的設計確實是很是棒的，控制的比較好。

• 學會運用大小來區分層級，在大小一致的狀況下經過其餘方式來區分信息層級，如顏色，下降透明度，加粗等等。

• 重複在產品設計中的運用能夠延伸到顏色，間距，大小，組件，圓角值，功能屬性等等。

   

 

​總結   

在作界面設計時候須要注意的點：

編輯：千鋒UI設計

做者： Tony

UI中國主頁：http://i.ui.cn/ucenter/36814.html