什么是形式呢，就是組件在相同的功能和元素下，排版、視覺的呈現方式。形式的對比，就是在一個頁面中，不同組件的呈現方式上是否能形成差異化，讓頁面看起來更豐富多元。

分析上方的案例，組件之間并沒有拉開差異性，尤其在詳情頁中，劇情簡介和觀眾影評，影人和劇照，設計形式接近一致，這就是一個不好的開端。

再看看一些擁有相同問題的設計案例：

仔細點觀察就會發現，作為飛機稿，不是圖片、顏色用得花哨就夠了的，組件缺少差異性，設計感就完全無法體現。如果還沒法理解，就再看看下面幾個案例，是不是就沒有形式強行重復的尷尬，表現得更合理：

所以針對作業中的問題，我們在這個基礎上進行完善，第一步要做的就是在形式上做出區分。所以我們可以通過以下幾個思路來調整第一頁：

    - 頭部分頁器和下方的上映/即將上映過于近似，控件形式上需要作出區分

    - 圖片太多，模塊左右邊緣都是圖片，導致看上去呆板，要減少圖片出現的面積

    - 底部新聞部分不能繼續使用大圖模式要作出調整

第二頁的調整上，主要在下半部分

    - 演員和劇照應該有更加明顯的差異

    - 評論和上方的簡介這兩個不同的組件，形式上卻看起來完全一致

通過原型上的調整，就可以得到一個初步改版的樣式，各個組件之間保證足夠的差異化和識別性，可以觀察看看是不是比原來的頁面更合理了。

色彩對比是很關鍵的對比，色彩決定作品給人的第一印象。那么如何為色彩做出對比呢？無非就是鮮艷對比淺色、暗色對比亮色、暖色對比冷色，不用特意套用配色的理論，用比較直觀的感受判斷就可以。

開始配色的過程中，我們首先需要確定主色和背景色，原圖中的主色棕色和背景色白色，搭配起來的效果給我們的感受并不強烈，所以我對原色的棕色做一定范圍的調整。

然后把主色添加到原型中，并為相關的一些元素添加合適的輔助色。先看第一頁添加后的效果。

然后我們再為原型增加配圖，這里要重點關注，以 “作品” 角度切入的話，配圖也是整個界面元素的一部分，包括它使用的色彩。如果一個界面中出現了多處需要應用配圖的地方的話，那么不同的模塊所使用配圖的風格和色彩，也應該有一定的對比，而不是一種風格擼到底的。比如還是之前的這個錯誤的案例：

所以根據這個原則，我們加入配圖后再看看效果：

如果頭部我們用了色彩主體比較強烈的配圖，那么在下方就應該用比較平淡簡約的，做出明確的對比。

在第二頁中也應用一樣的方法，那么思路如下：

    - 頭部作為權重最高的組件顏色要更突出

    - 頭部背景和封面的顏色應該具有更大的對比，并能讓文字更容易識別

    - 頭部、劇照圖片較豐富，所以在影人和用戶頭像中應該使用更簡單的配圖

整體增加配圖后的效果：

到這里已經有了大致的設計效果，已經可以明顯感覺到比之前的設計有更好的提升，但是，對比不是到這里就結束了，我們接著往下做。

文字對比是最容易被忽視的細節，很多設計師都認為文字只要看得清就行，樣式變化越少越好，這是非常錯誤的思路。

文字樣式的多少主要取決于文字段的類型和需要重點體現的內容數量，而不是沒有理由的精簡到最少。例如看一篇排版成熟的期刊或是論文，其中標題、副標題、正文、引用、標注等作用不同的文字段，都會有不同的樣式來幫助我們去區分，如果從頭到尾出現的所有文字都應用一樣的格式，那么就毫無可讀性。

文字的對比，主要通過以下幾個屬性表現：

    - 字號

    - 字重

    - 色彩

即：越重要的文字字號越大、字重越高、色彩越深，權重越低的則反之。

回到我們的案例，在原型階段，其實我已經對文字做出了簡單的對比處理，下面我們要進一步細化這個步驟。

修改的分析大致如下：

    - 分頁器作為權重最高的文字段，所以模塊標題不應該比它更顯眼

    - 多段文本比標題類文字權重低一級，可以統一它們的樣式并比標題稍弱

    - 注釋類文字比多段文本再弱一級，用較低的灰度

    - 為評分、點贊數、展開等有“特殊性質”的文本增加色相

然后我們可以看看下面修改前后的對比：

通過正確細化文字的對比以后，就能真正讓頁面精致起來，具備豐富的細節。當然，對于文字權重的安排和思考會根據不同的思路和產品需求得到不同的樣式結果，但絕對不能忽略這個過程。

通過正確細化文字的對比以后，就能真正讓頁面精致起來，具備豐富的細節。當然，對于文字權重的安排和思考會根據不同的思路和產品需求得到不同的樣式結果，但絕對不能忽略這個過程。

投影的使用既是視覺樣式，也是一個用來制造景深的技巧。只要在一個扁平的界面中，為任何一個元素添加了投影，那么這個界面就存在了上下的空間關系，處于上方的元素就會得到凸顯，例如蘋果官方應用中的案例：

既然是空間關系，就要有前后的落差對比，我們要為最重要的元素增加投影，而不是把它當成設計風格進行統一的添加。所有元素都帶上了投影，就沒有了對比，可看性也會大打折扣。

所以，在這些頁面中，需要突出的元素分析如下：

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。 

作者：酸梅干超人    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司