為什么你的界面看著不舒服？騰訊設(shè)計師從這 3 個維度優(yōu)化設(shè)計！

@菜心設(shè)計鋪?：界面設(shè)計是一個很龐大的體系，具有很多原則，比如輕量、容錯、清晰等等，其中包含了交互層面以及視覺層面等，今天我想單獨把視覺剝離出來，來講一講我對界面設(shè)計「視覺層面」的理解與認知。

在我看來，界面設(shè)計的視覺層面主要可以分為三個維度來解析：信息傳遞、視覺美化、創(chuàng)意創(chuàng)新。

• 信息傳遞是讓用戶看得明白，快速清晰地獲取信息；
• 視覺美化是讓用戶看得舒服，讓界面足夠美觀；
• 創(chuàng)新創(chuàng)意是讓用戶看得驚喜，看到一些不一樣的創(chuàng)意點。

如下圖：

三個維度的目標如何實現(xiàn)呢？我提取了以下三個關(guān)鍵詞：

清晰、和諧、獨特是我們要達成的目標，達成目標一定會有一些原理所在，而有了原理就會有具體的執(zhí)行方法，所以后面的每一個知識點，我都會按照「設(shè)計目標、執(zhí)行原理、執(zhí)行方法」的邏輯給大家講解，大綱如下：

清晰

• 清晰-降噪-容器整合
• 清晰-聚焦-局部放大

和諧

• 和諧-呼應(yīng)-顏色呼應(yīng)
• 和諧-節(jié)奏-變化對比
• 和諧-飽滿-負形縮減

獨特

• 獨特-品牌延展-IP形象結(jié)合
• 獨特-事物本意-事物圖形化

清晰

1. 清晰-降噪-容器整合

• 設(shè)計目標：清晰
• 執(zhí)行原理：信息降噪
• 執(zhí)行方法：容器整合

當界面信息過于分散時，會對用戶造成不必要的干擾，導(dǎo)致用戶產(chǎn)生疑惑甚至直接離開界面。

作為設(shè)計師，要做的就是對信息進行整合，我們可以稱之為信息減噪，目的就是讓頁面更加清晰，減少干擾。

這里我經(jīng)常使用「容器整合法」來讓內(nèi)容更加清晰、聚焦。

當分散的內(nèi)容裝進一個「容器后」，就可以使內(nèi)容聚焦在容器當中，讓信息更加規(guī)整。而卡片就是一個很好的「容器」。

實際案例：

在改版騰訊動漫個人中心的時候，頭部就存在信息分散不聚焦的問題，四個視覺觸點（綠色圈處）分散在四個角落，形成極大干擾。

這里我就采用了「卡片容器」的方法，將信息裝進容器中，減少分散信息的干擾，使界面更加清晰、工整，效果如下：

現(xiàn)在很多產(chǎn)品都在使用卡片化的布局，尤其是在信息數(shù)量、層級較多的時候，更加需要有容器將其規(guī)整起來，這樣才會讓界面保持不亂。

2. 清晰-聚焦-局部放大

• 設(shè)計目標：清晰
• 執(zhí)行原理：聚焦
• 執(zhí)行方法：局部放大

我們在平時做需求的時候，經(jīng)常會遇到信息特別多，特別亂的時候，如果此時我們選擇什么都想突出，最后的結(jié)果一定適得其反，什么都突出不了，這時候就需要我們選擇一些內(nèi)容來進行局部放大，可以讓整體信息更加聚焦、清晰。

這種方法經(jīng)常用在有數(shù)字展示的頁面當中，比如下面這種頁面：

再比如，下面這個模塊信息，如果「3」沒有放大，整體的信息會讓你眼花繚亂，我們看下對比：

所以，大家在遇到有數(shù)字，且信息雜亂的時候，就可以采用局部放大的方式來使整體更加聚焦、清晰。

和諧

1. 和諧-呼應(yīng)-顏色呼應(yīng)

• 設(shè)計目標：和諧
• 執(zhí)行原理：呼應(yīng)
• 執(zhí)行方法：以顏色呼應(yīng)為例

很多時候我們會覺得自己做的東西很不和諧，其中一個很重要的原因就是因為頁面中沒有貫穿的元素，也就是沒有呼應(yīng)，很常用的一個呼應(yīng)的方法就是顏色呼應(yīng)。

例如這個畫面總看起來不夠和諧，你會覺得綠色很突兀，就是因為顏色上沒有呼應(yīng)：

而一旦你想辦法，讓綠色「事出有因」，比如取自眼鏡的顏色：

那么，突兀的問題解決了，和諧的目標也就實現(xiàn)了。

而剛才那個人中心的界面：

我們會發(fā)現(xiàn)，圖標的顏色也是取自背景色，所以整體看起來才會如此和諧。

除了顏色呼應(yīng)，還有很多呼應(yīng)的方式，比如圖形、圖標風(fēng)格等等，這里就不再舉例了。

2. 和諧-節(jié)奏感-對比變化

• 設(shè)計目標：和諧
• 執(zhí)行原理：節(jié)奏感
• 執(zhí)行方法：對比變化

對于音樂，節(jié)奏感是非常重要的，如果一段音樂一直是一個頻率，那可能也算不上音樂了。

界面也是一樣的，節(jié)奏感是讓頁面變得「和諧」的重要因素之一，如何做到呢？

我們在展示文字列表的時候，你覺得下面兩種哪個更舒服些呢？

我猜你會覺得第二個舒服一些，因為它有變化，有節(jié)奏感，所以它和諧、舒適。

我們會發(fā)現(xiàn)很多產(chǎn)品首頁帶有封面圖的列表都有很多種排法，例如1帶多，1x2，2x2，2x3等等：

就是為了防止每個模塊過于重復(fù)，如果每個模塊都是每排兩張封面，一直下來：

看起來會非常乏味。

3. 和諧-飽滿-負形縮減

• 設(shè)計目標：和諧
• 執(zhí)行原理：飽滿
• 執(zhí)行方法：負形縮減

在做圖標或者字體的時候，經(jīng)常要講一個原則就是「飽滿」，界面上每個「不能拆分的元素」都需要盡量做到飽滿，比如圖標，再比如下面這個信息組件：

正文就屬于不能拆分的單一原子，大家可能會問，這種信息不就是方方正正的一個信息塊嗎，怎么會不飽滿呢，比如行間距過大：

再比如，我在優(yōu)化騰訊動漫信息流的時候，發(fā)現(xiàn)正文出現(xiàn)的表情遠遠大于文字，如下圖：

表情一旦出現(xiàn)，就會造成大量空隙（負形過大），導(dǎo)致整體不夠飽滿、和諧。

我們可以看下其他產(chǎn)品，表情和文字幾乎都是一樣的大小，他們都會盡量縮小負形空間（也就是空隙大小）：

在這樣的原則之下，優(yōu)化后的效果如下：

以上是關(guān)于和諧的幾點方法。

獨特

如果你的界面做到了清晰、和諧，在視覺層面就已經(jīng)算是及格了，如果還能加上一點小創(chuàng)意，就可以讓人眼前一亮。

如何能夠做到獨特？可以從兩方面出發(fā)，一是品牌，二是內(nèi)容本身含義。

1. 獨特-品牌延展-吉祥物結(jié)合

• 設(shè)計目標：獨特
• 執(zhí)行原理：品牌延展
• 執(zhí)行方法：IP形象結(jié)合

從品牌出發(fā)，可以有很多方向，比如 logo，圖形，品牌吉祥物等，下面以品牌吉祥物為例。

在做小說閱讀器的時候，有一個設(shè)置選項是選擇文字的背景顏色，選擇控件是圓形，而品牌形象也偏圓形，此時就可以將圓形控件與形象相互結(jié)合：

但是選擇控件有兩種狀態(tài)，為了更加生動，就把形象正面時作為選擇狀態(tài)，而轉(zhuǎn)過身作為非選擇狀態(tài)，大概效果如下：

此創(chuàng)意已在騰訊動漫小說落地實現(xiàn)。

2. 獨特-事物本意延展-事物圖形化

• 設(shè)計目標：獨特
• 執(zhí)行原理：事物本意延展
• 執(zhí)行方法：事物圖形化

除了品牌，還可以根據(jù)事物本身的意思來延展圖形，比如日間夜間模式的切換按鈕，男女性別的切換按鈕，都可以利用事物本身的含義來延展圖形設(shè)計：

此創(chuàng)意已在騰訊動漫個人中心模塊落地。

再比如，彈幕的展示方式，就可以聯(lián)想到電視機，再把電視機圖形化，如下圖：

此創(chuàng)意已經(jīng)在騰訊動漫小說頻道頁實現(xiàn)。

這里需要注意下，有時候如果圖形過于普通，可以配合動效來增加獨特性，但一定要注意開發(fā)成本。

總結(jié)

界面設(shè)計是一個非常復(fù)雜的系統(tǒng)，今天單獨拿出視覺層面和大家分享了一些具有普適性的原則和方法，全當拋磚引玉，希望能夠啟發(fā)出你的更多靈感。

歡迎關(guān)注作者的微信公眾號：「菜心設(shè)計鋪」