起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識掌握這2個關鍵點，讓你的設計跨越一大步
在界面設計中，運用好大小和重復這兩個關鍵點對區分層級和打造品牌基因有著至關重要的作用。
我們做界面排版設計都離不開大小與重復的運用，每一個屬性里面都包含很多細小的分支，如果想要熟練使用起來是需要多做練習來掌握的。
那如何更加理性與科學運用它們，今天和大家一起來探討下如何在產品界面設計中巧妙的運用這個方法。
一、為什么大的物體更吸引眼球
如上圖所示：a球會比右邊b球更吸引我們去閱讀，大的物體視覺重量會比較大，我們眼球的視覺方向就自動轉向他。
如上圖所示：我們沿用剛才的圖片，然后只把a的透明度改變下，視覺重量是不是發生了變化？WHY？
當我們把a 球的視覺重量降低后，那么即使 b球很小，他也會很吸引我們眼球，這是因為 b球視覺重量比較大。
如上圖所示：如果兩個球大小一樣呢？還是b球會更吸引我們眼睛去關注，因為b球有色光會第一時間進入我們眼球。
二、如何運用這些原理
如上圖數字所示：他們的視覺重量依次排下來，最大的是序列 1 最小的是4，不重要的元素我們可以通過把它們縮小或者降低透明度來弱化他們。
下圖實際案例展示：
根據我們產品策略，內容重要程度，來決定哪個元素視覺重量需要大一些。
三、重復在界面設計中的運用
重復的合理運用能夠讓界面布局更加有節奏，為什么這樣說？
因為在設計語言中，我們能重復的基礎元素有很多；品牌符號、顏色、間距、大小、分子組件、圓角值，光與角度等等，角度在圖標繪制中運用比較多。
下面我會通過幾個案例講解如何重復運用這些元素。
1. 重復間距
上圖設計我一共就用了 3 個間距。一致的間距節奏能夠讓畫面更穩，同事之間協同方便，便于開發還原。
線上案例優化演示：
字里行間在首頁的板塊設計比較松散，雖然也重復運用了間距，但是間距缺乏有規律的節奏。
調整后圖如下：
2. 重復組件樣式
應用：Pinterest
Pinterest設計中，控件有一致的圓形符號，形成一個顯性的視覺基因，大家注意觀察他們的各種按鈕控件（備注：可能有些人問，為啥圓角大小不一致呢？這個就涉及到參數化圓角值定義！如果還是不懂，后續的文章都會逐步講解）
應用：Facebook
同樣我們可以在Facebook里面看到一致的視覺基因，圓角的大范圍重復運用。這里我就不圈出來了。我們可以思考，重復能讓設計更整體，重復能讓界面更具品牌感！
3. 重復顏色
它是什么？相同功能操作，所表達的視覺含義要一致。
應用：appstore和備忘錄
相同屬性顏色一致，比如上面 IOS 系統軟件界面截圖，功能性圖標顏色一致（可操作性），可點擊按鈕文字顏色一致。
當然有些設計也有例外，這個需要根據場景去分析。IOS在這方面的設計確實是非常人性化，值得去研究學習。
4. 重復符號
符號重復一般是在圖標繪制運用比較多，大家看下案例。
GM / OPEL的自適應（響應）圖標系統。上圖我們可以看到圖標繪制在某些細節保持一致的基因。
Bose的圖標系統
5. 重復角度與線的粗細
角度和粗細的合理運用，對圖標一致性與穩定性非常大的幫助。
OnePlus圖標系統
總結
在做界面設計時候需要注意的關鍵點：
- 學會運用大小來區分層級，在大小一致的情況下，可通過其他方式來區分信息層級；如顏色、留白、或者明暗關系，粗細等等。
- 在界面或者圖標設計中重復運用某些元素；品牌符號、顏色、間距、大小、組件、圓角值、角度，光影功能屬性等等來做產品的品牌基因打造。
#專欄作家#
Tony，微信公眾號：洞見設計，人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長，簡歷指導，每周分享最有價值的設計經驗，擅長產品體驗設計，關注【洞見設計】后臺回復“彩蛋”領取設計資料。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
niece
?。?！