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

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

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

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

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

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

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

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

第二頁的調(diào)整上，主要在下半部分

    - 演員和劇照應(yīng)該有更加明顯的差異

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

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

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

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

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

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

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

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

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

    - 頭部作為權(quán)重最高的組件顏色要更突出

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

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

整體增加配圖后的效果：

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

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

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

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

    - 字號

    - 字重

    - 色彩

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

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

修改的分析大致如下：

    - 分頁器作為權(quán)重最高的文字段，所以模塊標(biāo)題不應(yīng)該比它更顯眼

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

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

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

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

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

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

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

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

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

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

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


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

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