:界面設計是一個很龐大的體系,具有很多原則,好比輕量、容錯、清晰等等,其中包含了交互層面以及視覺層面等,今天我想零丁把視覺剝離出來,來講一講我對界面設計「視覺層面」的理解與認知。

在我看來,界面設計的視覺層面主要可以分為三個維度來解析:信息傳遞、視覺美化、創意立異。

  • 信息傳遞是讓用戶看得明白,快速清晰地獲取信息;
  • 視覺美化是讓用戶看得舒服,讓界面足夠美觀;
  • 立異創意是讓用戶看得驚喜,看到一些紛歧樣的創意點。

如下圖:

三個維度的目標如何實現呢?我提取了以下三個關鍵詞:

清晰、和諧、奇特是我們要殺青的目標,殺青目標一定會有一些原理所在,而有了原理就會有具體的執行方法,所以后面的每一個知識點,我都邑依照「設計目標、執行原理、執行方法」的邏輯給人人講解,綱目如下:

清晰

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

和諧

  • 和諧-呼應-顏色呼應
  • 和諧-節奏-變更對比
  • 和諧-豐滿-負形縮減

奇特

  • 奇特-品牌延展-IP形象結合
  • 奇特-事物本意-事物圖形化

清晰

1. 清晰-降噪-容器整合
  • 設計目標:清晰
  • 執行原理:信息降噪
  • 執行方法:容器整合

當界面信息過于分散時,會對用戶造成不需要的干擾,導致用戶發生疑惑甚至直接離開界面。

云南体彩网作為設計師,要做的就是對信息進行整合,我們可以稱之為信息減噪,目的就是讓頁面更加清晰,減少干擾。

這里我經常使用「容器整合法」來讓內容更加清晰、聚焦。

當分散的內容裝進一個「容器后」,就可以使內容聚焦在容器傍邊,讓信息更加規整。而卡片就是一個很好的「容器」。

實際案例:

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

云南体彩网這里我就采取了「卡片容器」的方法,將信息裝進容器中,減少分散信息的干擾,使界面更加清晰、工整,效果如下:

現在很多產品都在使用卡片化的結構,尤其是在信息數量、層級較多的時候,更加需要有容器將其規整起來,這樣才會讓界面堅持不亂。

2. 清晰-聚焦-局部放大
  • 設計目標:清晰
  • 執行原理:聚焦
  • 執行方法:局部放大

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

云南体彩网這種方法經常用在有數字展示的頁面傍邊,好比下面這種頁面:

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

云南体彩网所以,人人在遇到有數字,且信息雜亂的時候,就可以采取局部放大的方式來使整體更加聚焦、清晰。

和諧

1. 和諧-呼應-顏色呼應

  • 設計目標:和諧
  • 執行原理:呼應
  • 執行方法:以顏色呼應為例

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

云南体彩网例如這個畫面總看起來不足和諧,你會覺得綠色很突兀,就是因為顏色上沒有呼應:

而一旦你想方法,讓綠色「事出有因」,好比取自眼鏡的顏色:

云南体彩网那么,突兀的問題解決了,和諧的目標也就實現了。

云南体彩网而剛才那個人中心的界面:

云南体彩网我們會發現,圖標的顏色也是取自配景色,所以整體看起來才會如此和諧。

云南体彩网除了顏色呼應,還有很多呼應的方式,好比圖形、圖標風格等等,這里就不再舉例了。

2. 和諧-節奏感-對比變更

  • 設計目標:和諧
  • 執行原理:節奏感
  • 執行方法:對比變更

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

云南体彩网界面也是一樣的,節奏感是讓頁面變得「和諧」的重要因素之一,如何做到呢?

云南体彩网我們在展示文字列表的時候,你覺得下面兩種哪個更舒服些呢?

云南体彩网我猜你會覺得第二個舒服一些,因為它有變更,有節奏感,所以它和諧、舒適。

云南体彩网我們會發現很多產品首頁帶有封面圖的列表都有很多種排法,例如1帶多,1×2,2×2,2×3等等:

就是為了防止每個模塊過于重復,如果每個模塊都是每排兩張封面,一直下來:

云南体彩网看起來會非常乏味。

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

  • 設計目標:和諧
  • 執行原理:豐滿
  • 執行方法:負形縮減

云南体彩网在做圖標或者字體的時候,經常要講一個原則就是「豐滿」,界面上每個「不克不及拆分的元素」都需要盡量做到豐滿,好比圖標,再好比下面這個信息組件:

云南体彩网正文就屬于不克不及拆分的單一原子,人人可能會問,這種信息不就是方方正正的一個信息塊嗎,怎么會不豐滿呢,好比行間距過大:

再好比,我在優化騰訊動漫信息流的時候,發現正文涌現的臉色遠遠大于文字,如下圖:

云南体彩网臉色一旦涌現,就會造成大量空隙(負形過大),導致整體不足豐滿、和諧。

我們可以看下其他產品,臉色和文字幾乎都是一樣的巨細,他們都邑盡量縮小負形空間(也就是空隙巨細):

在這樣的原則之下,優化后的效果如下:

云南体彩网以上是關于和諧的幾點方法。

奇特

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

如何能夠做到奇特?可以從兩方面出發,一是品牌,二是內容自己含義。

1. 奇特-品牌延展-吉祥物結合

  • 設計目標:奇特
  • 執行原理:品牌延展
  • 執行方法:IP形象結合

從品牌出發,可以有很多方向,好比 logo,圖形,品牌吉祥物等,下面以品牌吉祥物為例。

云南体彩网在做小說閱讀器的時候,有一個設置選項是選擇文字的配景顏色,選擇控件是圓形,而品牌形象也偏圓形,此時就可以將圓形控件與形象相互結合:

云南体彩网但是選擇控件有兩種狀態,為了更加生動,就把形象正面時作為選擇狀態,而轉過身作為非選擇狀態,也許效果如下:

云南体彩网此創意已在騰訊動漫小說落地實現。

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

  • 設計目標:奇特
  • 執行原理:事物本意延展
  • 執行方法:事物圖形化

除了品牌,還可以根據事物自己的意思來延展圖形,好比日間夜間模式的切換按鈕,男女性別的切換按鈕,都可以利用事物自己的含義來延展圖形設計:

此創意已在騰訊動漫個人中心模塊落地。

云南体彩网再好比,彈幕的展示方式,就可以聯想到電視機,再把電視機圖形化,如下圖:

此創意已經在騰訊動漫小說頻道頁實現。

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

總結

界面設計是一個非常復雜的系統,今天零丁拿出視覺層面和人人分享了一些具有普適性的原則和方法,全當拋磚引玉,希望能夠啟發出你的更多靈感。

歡迎關注作者的微信公眾號:「菜心設計鋪」

點贊 2
收藏 300
繼續閱讀相關文章

發表評論 已發布 14

還可以輸入 800 個字
 
 
載入中....
14 收藏