2022-9-19 資深UI設(shè)計(jì)者
什么是形式呢，就是組件在相同的功能和元素下，排版、視覺的呈現(xiàn)方式。形式的對比，就是在一個(gè)頁面中，不同組件的呈現(xiàn)方式上是否能形成差異化，讓頁面看起來更豐富多元。
分析上方的案例，組件之間并沒有拉開差異性，尤其在詳情頁中，劇情簡介和觀眾影評，影人和劇照，設(shè)計(jì)形式接近一致，這就是一個(gè)不好的開端。
再看看一些擁有相同問題的設(shè)計(jì)案例：
仔細(xì)點(diǎn)觀察就會發(fā)現(xiàn)，作為飛機(jī)稿，不是圖片、顏色用得花哨就夠了的，組件缺少差異性，設(shè)計(jì)感就完全無法體現(xiàn)。如果還沒法理解，就再看看下面幾個(gè)案例，是不是就沒有形式強(qiáng)行重復(fù)的尷尬，表現(xiàn)得更合理：
所以針對作業(yè)中的問題，我們在這個(gè)基礎(chǔ)上進(jìn)行完善，第一步要做的就是在形式上做出區(qū)分。所以我們可以通過以下幾個(gè)思路來調(diào)整第一頁：
- 頭部分頁器和下方的上映/即將上映過于近似，控件形式上需要作出區(qū)分
- 圖片太多，模塊左右邊緣都是圖片，導(dǎo)致看上去呆板，要減少圖片出現(xiàn)的面積
- 底部新聞部分不能繼續(xù)使用大圖模式要作出調(diào)整
第二頁的調(diào)整上，主要在下半部分
- 演員和劇照應(yīng)該有更加明顯的差異
- 評論和上方的簡介這兩個(gè)不同的組件，形式上卻看起來完全一致
通過原型上的調(diào)整，就可以得到一個(gè)初步改版的樣式，各個(gè)組件之間保證足夠的差異化和識別性，可以觀察看看是不是比原來的頁面更合理了。
色彩對比是很關(guān)鍵的對比，色彩決定作品給人的第一印象。那么如何為色彩做出對比呢？無非就是鮮艷對比淺色、暗色對比亮色、暖色對比冷色，不用特意套用配色的理論，用比較直觀的感受判斷就可以。
開始配色的過程中，我們首先需要確定主色和背景色，原圖中的主色棕色和背景色白色，搭配起來的效果給我們的感受并不強(qiáng)烈，所以我對原色的棕色做一定范圍的調(diào)整。
然后把主色添加到原型中，并為相關(guān)的一些元素添加合適的輔助色。先看第一頁添加后的效果。
然后我們再為原型增加配圖，這里要重點(diǎn)關(guān)注，以 “作品” 角度切入的話，配圖也是整個(gè)界面元素的一部分，包括它使用的色彩。如果一個(gè)界面中出現(xiàn)了多處需要應(yīng)用配圖的地方的話，那么不同的模塊所使用配圖的風(fēng)格和色彩，也應(yīng)該有一定的對比，而不是一種風(fēng)格擼到底的。比如還是之前的這個(gè)錯(cuò)誤的案例：
所以根據(jù)這個(gè)原則，我們加入配圖后再看看效果：
如果頭部我們用了色彩主體比較強(qiáng)烈的配圖，那么在下方就應(yīng)該用比較平淡簡約的，做出明確的對比。
在第二頁中也應(yīng)用一樣的方法，那么思路如下：
- 頭部作為權(quán)重最高的組件顏色要更突出
- 頭部背景和封面的顏色應(yīng)該具有更大的對比，并能讓文字更容易識別
- 頭部、劇照圖片較豐富，所以在影人和用戶頭像中應(yīng)該使用更簡單的配圖
整體增加配圖后的效果：
到這里已經(jīng)有了大致的設(shè)計(jì)效果，已經(jīng)可以明顯感覺到比之前的設(shè)計(jì)有更好的提升，但是，對比不是到這里就結(jié)束了，我們接著往下做。
文字對比是最容易被忽視的細(xì)節(jié)，很多設(shè)計(jì)師都認(rèn)為文字只要看得清就行，樣式變化越少越好，這是非常錯(cuò)誤的思路。
文字樣式的多少主要取決于文字段的類型和需要重點(diǎn)體現(xiàn)的內(nèi)容數(shù)量，而不是沒有理由的精簡到最少。例如看一篇排版成熟的期刊或是論文，其中標(biāo)題、副標(biāo)題、正文、引用、標(biāo)注等作用不同的文字段，都會有不同的樣式來幫助我們?nèi)^(qū)分，如果從頭到尾出現(xiàn)的所有文字都應(yīng)用一樣的格式，那么就毫無可讀性。
文字的對比，主要通過以下幾個(gè)屬性表現(xiàn)：
- 字號
- 字重
- 色彩
即：越重要的文字字號越大、字重越高、色彩越深，權(quán)重越低的則反之。
回到我們的案例，在原型階段，其實(shí)我已經(jīng)對文字做出了簡單的對比處理，下面我們要進(jìn)一步細(xì)化這個(gè)步驟。
修改的分析大致如下：
- 分頁器作為權(quán)重最高的文字段，所以模塊標(biāo)題不應(yīng)該比它更顯眼
- 多段文本比標(biāo)題類文字權(quán)重低一級，可以統(tǒng)一它們的樣式并比標(biāo)題稍弱
- 注釋類文字比多段文本再弱一級，用較低的灰度
- 為評分、點(diǎn)贊數(shù)、展開等有“特殊性質(zhì)”的文本增加色相
然后我們可以看看下面修改前后的對比：
通過正確細(xì)化文字的對比以后，就能真正讓頁面精致起來，具備豐富的細(xì)節(jié)。當(dāng)然，對于文字權(quán)重的安排和思考會根據(jù)不同的思路和產(chǎn)品需求得到不同的樣式結(jié)果，但絕對不能忽略這個(gè)過程。
通過正確細(xì)化文字的對比以后，就能真正讓頁面精致起來，具備豐富的細(xì)節(jié)。當(dāng)然，對于文字權(quán)重的安排和思考會根據(jù)不同的思路和產(chǎn)品需求得到不同的樣式結(jié)果，但絕對不能忽略這個(gè)過程。
投影的使用既是視覺樣式，也是一個(gè)用來制造景深的技巧。只要在一個(gè)扁平的界面中，為任何一個(gè)元素添加了投影，那么這個(gè)界面就存在了上下的空間關(guān)系，處于上方的元素就會得到凸顯，例如蘋果官方應(yīng)用中的案例：
既然是空間關(guān)系，就要有前后的落差對比，我們要為最重要的元素增加投影，而不是把它當(dāng)成設(shè)計(jì)風(fēng)格進(jìn)行統(tǒng)一的添加。所有元素都帶上了投影，就沒有了對比，可看性也會大打折扣。
所以，在這些頁面中，需要突出的元素分析如下：
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.b186.net