尺寸對UI設計的影響

人機互交裡，最重要的部分，是資訊傳達。

影響UI設計結果的因素

(一)視覺尺⼨篇

並不想寫一個類似軟體使用說明書的UI製作範例，同樣是設計UI元件，所以選擇了另一種角度作為切入點，講述一下UI的設計取選過程吧。

人機互交裡，最重要的部分，是資訊傳達。當你眼睛所見資訊越少，你判斷資訊的效率就越高。而在UI設計工作裡，首要的是資訊傳達效率，其次是資訊傳達次序最後纔是審美需求。

我們先擬定一個命題： 比如做一個放大鏡的UI元件

想要自學沒有頭緒、沒有學習UI設計軟體、‘正在學習UI設計、以及想轉行UI設計的同學可以加入我們的 UI設計交流群692760303 免費領取十年資深UI設計師必備學習軟體和資源，群裡資源共享。每天晚上還會有十幾年經驗老師進行講課和解答。   

多數人都可能認為我交出這麼一個稿子，會被直接否掉，原因就是太簡單，太單調了。但是這種命題練習的命題內容並不完善，如果這是為手機搜尋條做提示用的UI元件。那麼它就很適合——

對比清晰，辨識方便，它的尺寸，可以做得足夠小，這種元件沒有操作需求，僅僅是提示用，所以，只要肉眼辨識不困難，可以要多小就多小。順便說一下，為什麼手把的傾斜角度是45度？因為在畫素矩陣裡，當你要去放大縮小的時候，45度可以排列出最規整的直線，最不易變形。如果圖片不是用程式縮放的時候，也最容易匹配。

在視覺引導範圍裡，資訊傳遞的效率不僅僅受資訊的繁複程度影響，也有其他影響因素，例如：尺寸。尺寸過小，辨識不容易，尺寸過大，不能一眼辨識主要資訊，也影響辨識效率。

那麼在UI裡，最小和最大尺寸應該是多少呢？

最小尺寸參考，請低頭看一下你的鍵盤按鈕和按鈕上的字母大小，這是經過工程設計師精密計算的，一臂長辨識最優尺寸。再小就會產生辨識困難，你就需要花時間去分辨了。

所以在UI設計工作中，你先要明確你的設計是為哪種硬體服務的，電腦顯示器的操作距離就是一臂長以內，其尺寸可以直接參考鍵盤按鈕大小。而手持裝置基本都是半臂距離，那麼最小尺寸就是四分之一鍵盤按鈕大小。

當然這是一個相對模糊的標準，因為目前市場上硬體尺寸不同、解析度不同，同時還有智慧電視等遠距離觀看裝置，從而無法用畫素級別來確立精準的大小標準。所以建議同學們經常留心體會一下常用物品的尺寸（這裏的尺寸不是畫素尺寸，而是實際的感官尺寸）。

那麼再說最大尺寸：最大尺寸基本沒有設計師會違規操作，因為UI設計裡寸土寸金，相信很少有人會去製作超比例尺寸的UI原件，最多是構圖偏大。構圖是以後的講述內容，所以今天先放一放。

以上的內容講述的基本都是視覺尺寸，而說到畫素尺寸，隨著硬體的發展，解析度的提高，裝置的使用距離變化，UI的畫素尺寸，其實越來越貼近人的視覺辨識尺寸和操作尺寸，而不再像原來一樣，16*16／32*32／64*64那種標準尺寸了，這算是技術給設計帶來的新課題吧。

不過請記住，無論你使用什麼尺寸去繪製UI最好遵守一條規則：所有圖片尺寸數均為偶數，因為在畫素矩陣裡，奇數的圖片縮放形損相對會更加嚴重。

我們來複雜化一下剛纔那個放大鏡，簡單的增加一些細節：

與之前相比，其實區別不大，但是這種方式，比純面片細節可以更多一點，很多物品只靠剪影是很難區分的，所以線性的方式，能提供的資訊更多，更精準，但是適用的尺寸，可能就要更大一點了，因為以畫素為單位去構成線型是有極限的。

在同樣縮放的條件下，細節越多，越難以辨識。所以當你去製作越小尺寸的UI原件的時候，就越需要簡單「粗」暴。

嗯，終於看上去有那麼點意思了。

比之前複雜，並不等於比之前高階，UI原件的視覺尺寸增加的時候，可承載的細節也可以增加，原則就是，不能超過視覺辨識度。

在相同尺寸下，可承載的細節是有限的，精細化原件內容還是的根據實際尺寸來定奪。

為什麼很多元件下面都有邊框？

UI中有大量的資訊來源。

在沒有邊框的情況下，元件不可能都整齊劃一，這等於複雜了視覺資訊，降低了資訊傳達的效率。圖示本身其實已經很簡單了，但是因為都集中在一起，資訊量還是比較複雜的，你只要稍微看久一點，就會有視覺疲勞，分辨資訊效率會越來越慢。

人眼在識別視覺資訊的時候，首先做的第一件事就是隻辨識相同形狀，所以增加了底板之後，雖然降低了識別效率，但是圖示內容的識別變得更獨立了。你很難同時去注意兩個圖示內容。降低視覺資訊讀取量，等於增加了視覺耐受性，你可以看的更久。

利用人的視覺習慣，去有目的的引導使用者資訊讀取次序，就是所謂的視覺引導了。

人最先看到的是佔視覺面積最大的部分，但是最容易觀察到的，確是最不同的最小部分。所以爲了便於使用者區別資訊，UI中，纔會出現多型按鈕，多型邊框。

提示關注的方法有很多：

色彩明暗區別

形狀區別

可視面積對比

當你希望極度引起使用者注意的時候，你使用的方法可能是綜合而多樣的。

這種看起來就精緻很多了吧？可能很多人更關心的是這種效果是怎麼做出來的 ，那是以後的問題，有時間我可以像軟體使用說明書一樣去記錄一個商用向量的效果。

這種相對複雜元件，實際上在UI裡並不多，細節豐富，等於不太可能做非常小的尺寸，而UI的構圖設計裡，能給這類元件發揮空間的地方，多是展示區域。

視覺尺寸決定你工作的內容繁複程度，資訊傳遞的效率雖然最重要，但是也是最容易被割捨的部分，引導使用者的層級往往反客為主，成為決定你設計構圖的主要因素。怎麼在有限的尺寸下，權衡資訊效率與視覺美觀的平衡點，是設計功力的一種體現吧。

根據實際硬體條件，功能需求，資訊層級，操作體驗等有限條件下，去合理調控功能與視覺的平衡點，纔是UI設計師的本質工作。

今天就談到這裏，希望大家在工作中能意識到尺寸的重要性，從功能的角度更有效率的完成每一份工作。

加入UI設計交流群692760303免費領取下列學習軟體和資源以及更多的學習軟體