起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識以改良彈窗為例：教你如何改良你的設計
為什么一個簡單的界面，你做出來后總覺得不夠精致，很可能是因為你遺漏了一些容易忽略的設計細節。本文作者通過一個案例，細致入微的教你如何改良你的設計，一起學習起來吧！
我自己讀完本文有一個很大的感觸：做好設計不能全靠數學的精準實施，很多時候還是要相信自己的眼睛，以心理感知作為判斷標準來輔助優化設計，最后的結果對用戶來說或許才是最優的。
每當你看到一個界面時，你的大腦其實都在欺騙你。無論你如何努力使事物看起來一致——旁觀者的眼睛往往不會同意，因為我們在現實生活中是通過大腦來感知物體的。所以，作為設計師，我們唯一的選擇只能是反向「欺騙」用戶的大腦（譯者注：在視覺上）。
在本文中，我將向你展示一個設計組件需要從哪些地方去做改善，一起來看看這個彈窗例子吧。
△ 7處已經做了調整
△ 沒有做調整
試著去比較調整前后的視覺感覺。直接對比的話可能很難看出區別，所以我做了一個 GIF 幫助大家進行對比。
一、調整重心
現實世界中的任何物體都會受到重力的影響，意思是：一旦沒有支撐就會掉下來。我們的大腦將現實世界的期望自動應用到界面的元素上，并假設屏幕上的任何物體都在「嘗試」掉下來。即使當物體完全靜止時，我們的大腦仍然認為它會向下移動（物體上方的空間會增加，下面的空間會減少）并對其進行視覺調整。
一個完美垂直居中的對象，在實際中看到的時候會偏低。為了使物體在視覺上保持一致，我們必須反補償重力的「預期」，把物體略微上移。
如下圖：
物體越大，它就越「重」，從而「下降」得更快。所以我們需要為更大的物體補償更多，而更小的物體補償更少。
粉色顯示容納「更小」按鈕的容器：
二、調整圓角按鈕的邊距
將圓形按鈕稍稍移動到對其之外也是一個不錯的主意。
否則，按鈕會被認為略微不對齊，視覺上「向內凹進去了」。同時，如果按鈕圓角比較小，則在邊緣看起來還是一條直線，這時候就不需要進行視覺補償了。
三、調整標題邊距
同樣的原則也適用于標題，特別是較大的標題。 隨著字體大小的增大，每個字母的周圍空白都變得更加大，并打破了左邊界的視覺感知。
為了改變這一點，我做了一個小的負左邊距：
當然，將它應用于設計中的每一個標題是很費精力的一件事，因為這需要一個手動調整過程，但是對于更突出的標題（例如：在一個登錄頁面上）是值得的。
四、調整文本塊的右邊框
使用左對齊文本時，文本塊的右邊緣變得「不整齊」，并且文本內容看起來會偏移。 類似于圓形按鈕的情況，我將把整個文本塊稍微往右邊移動，使其視覺居中。
這樣，右邊緣就更靠近右邊隱含的垂直對齊規則。如果我們不這么調整，則會有明顯的感知差異。
五、調整顏色
根據填充區域的不同，顏色的感知是不同的。 應用于白色背景上的文本顏色，將比放在同樣大塊的相同顏色上的文字顯得更加亮一些。 相反，如果我們在深色背景上放置彩色文本，顏色看起來會變得更暗。
背景會「吸收」文字顏色，總是讓視覺上轉向背景顏色。 為了適應這一事實，當我在淺色背景上使用文字時，我把顏色適當調暗一點，而在深色的背景上把顏色適當調亮。
字體尺寸和重量越小，就越需要補償：
六、調整灰度
這是顏色調整的一個特例，我嘗試選用100％黑色并修改其不透明度來建立灰色文字，而不是直接設置顏色值。
這樣，當你變暗背景時，你的灰色不會被「看不清」。
半透明黑色有助于實現可讀的結果，而無需創建許多不同的樣式。 對于較深的背景，半透明白色也是一種選擇。
七、調整投影濃度
我使用不同的陰影濃度取決于產生陰影物體的顏色。對于較暗的物體，應使陰影更強烈，而對于較亮的物體，應使陰影更輕薄。
如果沒有這個技巧，假設兩個陰影都具有相同的不透明度，那么較亮物體的陰影會在較暗物體的陰影旁邊看起來更暗。
八、總結
當然，并非每個項目都需要花費額外的視覺調整時間，但如果您正在開發的界面需要特別重視并且需要脫穎而出，使用上述所有技巧將會帶來更加和諧的結果。
原文作者：Anton Lovchikov
原文鏈接：https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0
譯文作者：彩云Sky
譯文鏈接：https://mp.weixin.qq.com/s/WjkTDzHKoO7XtCa43XNFBQ
本文由 @彩云Sky 授權發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
