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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

整體增加配圖后的效果：

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

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

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

文字的對比，主要通過以下幾個屬性表現(xiàn)：

    - 字號

    - 字重

    - 色彩

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

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

修改的分析大致如下：

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

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

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

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

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

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

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

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

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

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

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

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


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

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