歡迎來到上海仝薪網絡科技有限公司官網,上海網站建設公司上海網站制作公司微信網站上海競價托管公司
咨詢,就免費贈送域名與服務器,咨詢熱線:13761675098當前位置: 競價外包 > 建站知識 > 網站建設知識 >
聯系我們
電話咨詢:13761675098
E-mail:[email protected]
地址: 上海市金園一路1118弄

界面不精致,往往是你忽略了這些設計細節

作者/整理:admin 來源:互聯網 2019-05-22

為什么一個簡單的界面,你做出來后總覺得不夠精致,很可能是因為你遺漏了一些容易忽略的設計細節。本文作者通過一個案例,細致入微的教你如何改良你的設計,一起學習起來吧!

我自己讀完此文有一個很大的感觸:做好設計不能全靠數學的精準實施,很多時候還是要相信自己的眼睛,以心理感知作為判斷標準來輔助優化設計,最后的結果對用戶來說或許才是最優的。

每當你看到一個界面時,你的大腦其實都在欺騙你。無論你如何努力使事物看起來一致——旁觀者的眼睛往往不會同意,因為我們在現實生活中是通過大腦來感知物體的。所以,作為設計師,我們唯一的選擇只能是反向「欺騙」用戶的大腦(譯者注:在視覺上)。在本文中,我將向你展示一個設計組件需要從哪些地方去做改善,一起來看看這個彈窗例子吧。

△7 處已經做了調整

△ 沒有做調整

試著去比較調整前后的視覺感覺。直接對比的話可能很難看出區別,所以我做了一個 GIF 幫助大家進行對比。

一、調整重心

現實世界中的任何物體都會受到重力的影響。意思是,一旦沒有支撐就會掉下來。我們的大腦將現實世界的期望自動應用到界面的元素上,并假設屏幕上的任何物體都在「嘗試」掉下來。即使當物體完全靜止時,我們的大腦仍然認為它會向下移動(物體上方的空間會增加,下面的空間會減少)并對其進行視覺調整。一個完美垂直居中的對象,在實際中看到的時候會偏低。為了使物體在視覺上保持一致,我們必須反補償重力的「預期」,把物體略微上移。如下圖:

物體越大,它就越「重」,從而「下降」得更快。所以我們需要為更大的物體補償更多,而更小的物體補償更少。 粉色顯示容納「更小」按鈕的容器:

二、調整圓角按鈕的邊距

將圓形按鈕稍稍移動到對其之外也是一個不錯的主意。

否則,按鈕會被認為略微不對齊,視覺上「向內凹進去了」。同時,如果按鈕圓角比較小,則在邊緣看起來還是一條直線,這時候就不需要進行視覺補償了。

三、調整標題邊距

同樣的原則也適用于標題,特別是較大的標題。 隨著字體大小的增大,每個字母的周圍空白都變得更加大,并打破了左邊界的視覺感知。 為了改變這一點,我做了一個小的負左邊距:

當然,將它應用于設計中的每一個標題是很費精力的一件事,因為這需要一個手動調整過程,但是對于更突出的標題(例如,在一個登錄頁面上)是值得的。

四、調整文本塊的右邊框

使用左對齊文本時,文本塊的右邊緣變得「不整齊」,并且文本內容看起來會偏移。 類似于圓形按鈕的情況,我將把整個文本塊稍微往右邊移動,使其視覺居中:

這樣,右邊緣就更靠近右邊隱含的垂直對齊規則。如果我們不這么調整,則會有明顯的感知差異:

五、調整顏色

根據填充區域的不同,顏色的感知是不同的。 應用于白色背景上的文本顏色,將比放在同樣大塊的相同顏色上的文字顯得更加亮一些。 相反,如果我們在深色背景上放置彩色文本,顏色看起來會變得更暗。 背景會「吸收」文字顏色,總是讓視覺上轉向背景顏色。 為了適應這一事實,當我在淺色背景上使用文字時,我把顏色適當調暗一點,而在深色的背景上把顏色適當調亮。

字體尺寸和重量越小,就越需要補償:

六、調整灰度

這是顏色調整的一個特例。我嘗試選用100%黑色并修改其不透明度來建立灰色文字,而不是直接設置顏色值:

這樣,當你變暗背景時,你的灰色不會被「看不清」:

半透明黑色有助于實現可讀的結果,而無需創建許多不同的樣式。 對于較深的背景,半透明白色也是一種選擇:

七、調整投影濃度

我使用不同的陰影濃度取決于產生陰影物體的顏色。對于較暗的物體,應使陰影更強烈,而對于較亮的物體,應使陰影更輕薄:

如果沒有這個技巧,假設兩個陰影都具有相同的不透明度,那么較亮物體的陰影會在較暗物體的陰影旁邊看起來更暗:

總結

當然,并非每個項目都需要花費額外的視覺調整時間,但如果您正在開發的界面需要特別重視并且需要脫穎而出,使用上述所有技巧將會帶來更加和諧的結果。

原文:《Optical adjustments in components》 Anton Lovchikov

歡迎關注譯者的微信公眾號:「 彩云譯設計」

重庆时时彩官方网站app