上周同事給了幾張頁(yè)面給我看，我給她的第一反饋是沒(méi)有細(xì)節(jié)，不耐看。她就非常不解，追問(wèn)我細(xì)節(jié)具體指的是什么？

是啊，細(xì)節(jié)到底是什么呢？我剛開(kāi)始做界面的時(shí)候，也是這樣，花費(fèi)了很多時(shí)間精力去做一個(gè)頁(yè)面，最終給到別人看的時(shí)候，也都是說(shuō)沒(méi)有細(xì)節(jié)，最多加幾句說(shuō)圖標(biāo)不一樣大、顏色配的不好看，但如果我把圖標(biāo)改成一樣大了、顏色改成大廠的配色，我的頁(yè)面就耐看了么？

答案當(dāng)然是否定的，不過(guò)現(xiàn)在回過(guò)頭去想，也是那時(shí)候頁(yè)面坑太多了，單改一兩處壓根沒(méi)用，所以別人給的反饋也只能是表面上的。畢竟你連圖標(biāo)大小都不統(tǒng)一，你還能指望別人說(shuō)什么呢

那么我們常說(shuō)的頁(yè)面細(xì)節(jié)到底是什么呢？下面結(jié)合自己最近的一些心得感悟, 來(lái)談?wù)勎宜J(rèn)為的頁(yè)面細(xì)節(jié)。如有遺漏, 請(qǐng)將就著看吧, 當(dāng)然你也是可以給我補(bǔ)充的

一、圖標(biāo)統(tǒng)一

這里說(shuō)的統(tǒng)一肯定不是大小、粗細(xì)統(tǒng)一啦, 因?yàn)檫@是必須的, 你第一步就要做到的, 走路都沒(méi)學(xué)會(huì)咱就不要想著跑啦。這里說(shuō)的圖標(biāo)統(tǒng)一主要說(shuō)的是風(fēng)格以及修飾元素統(tǒng)一

1、風(fēng)格

現(xiàn)在圖標(biāo)風(fēng)格多種多樣, 有走簡(jiǎn)潔的、艷麗的、雙色的、漸變的、斷線風(fēng)格的、2.5D的......但不管你選擇哪種, 你必須得保持整個(gè)APP內(nèi)的圖標(biāo)是同一種風(fēng)格

如下圖, 荷包的底部圖標(biāo)采用的偏卡通、夸張的風(fēng)格, 和其他主流APP的風(fēng)格不一樣; 閑魚(yú)采用的是黑色和黃色的雙色圖標(biāo), 愛(ài)奇藝采用的是單色, 但把內(nèi)部修飾元素的透明度降低了。而它們APP內(nèi)部的圖標(biāo)也都和底部標(biāo)簽保持一致, 整體看起來(lái)就很統(tǒng)一, 經(jīng)得起推敲

 

 

上面說(shuō)的那些看起來(lái)很容易, 但是對(duì)于新手設(shè)計(jì)師來(lái)說(shuō), 總會(huì)出現(xiàn)這樣那樣的問(wèn)題, 比如: 參考的素材太多, 這個(gè)頁(yè)面圖標(biāo)是這個(gè)風(fēng)格, 那個(gè)頁(yè)面又是另外一種風(fēng)格, 但看每個(gè)頁(yè)面, 都沒(méi)有什么太大的問(wèn)題, 但一起看就不協(xié)調(diào)了。

這就需要我們定好一種風(fēng)格之后, 其他頁(yè)面都按照這個(gè)風(fēng)格來(lái), 可以借鑒別人圖標(biāo)的 “形”, 然后改成適合自己頁(yè)面的

2、修飾元素

下圖左右兩張圖, 乍一眼看都沒(méi)什么問(wèn)題, 但是細(xì)看就會(huì)覺(jué)得右邊有點(diǎn) “奇怪”

 

 

那到底奇怪在哪里呢? 仔細(xì)看, 會(huì)覺(jué)得右邊的沒(méi)有左邊的精致, 騰訊視頻底部的圖標(biāo), 都有“斷線” 的元素在, 個(gè)人中心的圖標(biāo)也延續(xù)了這一元素; 而右邊的個(gè)人中心的圖標(biāo)就是單純的素材, 沒(méi)有 “斷線” 的元素在, 看起來(lái)就和另外幾個(gè)不搭

愛(ài)奇藝的也一樣, 左邊的都在基礎(chǔ)性上根據(jù)風(fēng)格不同, 做了相應(yīng)調(diào)整, 而右邊的就是素材堆砌
PS: 這里只是拿兩個(gè)APP舉了一個(gè)例子, 實(shí)際上, 可能右邊圖標(biāo)的缺陷更加明顯

 

其實(shí)這就涉及到另外一個(gè)容易犯的錯(cuò)誤了——不經(jīng)過(guò)思考, 單純的套用素材, 比如習(xí)慣于直接用素材網(wǎng)站的, 首頁(yè)圖標(biāo)畫(huà)一個(gè)房子、我的畫(huà)兩個(gè)圓, 甚至還有些下載的都不是源文件, 而是png, 這樣的圖標(biāo)你放到頁(yè)面中, 連圖標(biāo)不虛邊、粗細(xì)一致都保證不了, 何來(lái)的細(xì)節(jié)呢? 
 

 

上面舉了幾個(gè)例子, 來(lái)說(shuō)明圖標(biāo)在保持大小、粗細(xì)一樣, 不虛邊的情況下, 還可以怎么樣來(lái)提升細(xì)節(jié), 一個(gè)是風(fēng)格保持一致, 另外一個(gè)是修飾小元素保持一致 。最后啰嗦一句, 參考頁(yè)面多的時(shí)候要學(xué)會(huì)融會(huì)貫通, 千萬(wàn)不要純用素材堆砌, 因?yàn)楹圹E真的很明顯, 當(dāng)然你要是堆砌的別人看不出來(lái), 那當(dāng)我沒(méi)說(shuō)咯

 

 

二、圓角度統(tǒng)一


圓角度包括圖片的、按鈕的，整個(gè)APP內(nèi)所有圖片的圓角度需保持一致，比如都是10px，那所有的都得是10px，如果是直角，就都得是直角。

如下圖得到首頁(yè)的圖片圓角度是8px, APP內(nèi)所有圖片的圓角度都是8px (用戶(hù)頭像除外)

 

 

理想狀態(tài)下是, 按鈕、圖標(biāo)的圓角度也和圖片的保持一致, 但實(shí)際操作中, 由于按鈕、圖標(biāo)相對(duì)小于圖片的大小, 圓角度一樣的話, 在視覺(jué)上按鈕、圖標(biāo)的圓角度會(huì)遠(yuǎn)大于圖片
 

所以實(shí)際運(yùn)用的時(shí)候, 只需要保持圖片之間、圖標(biāo)之間、按鈕之間的圓角度一致就好
 

三、分割方式統(tǒng)一

頁(yè)面分割需制定統(tǒng)一的分割樣式，比如是用塊狀分割還是線還是留白，需定義好每種使用的場(chǎng)景?，F(xiàn)在流行趨勢(shì)來(lái)說(shuō)，用塊狀分割的較少，模塊與模塊之間用分割線、模塊內(nèi)部用留白。其他需要酌情使用塊狀分割

四、數(shù)字字體

頁(yè)面字體普遍用的都是默認(rèn)的字體, 但其實(shí)我們?cè)谝恍?shù)字的時(shí)候, 可以給他自定義一個(gè)字體, 這點(diǎn)在金融類(lèi)產(chǎn)品里尤為明顯, 這種類(lèi)型的APP里面很多都跟數(shù)字相關(guān), 自帶的字體沒(méi)辦法很好的展現(xiàn)產(chǎn)品的特點(diǎn), 也不好和別家產(chǎn)品區(qū)分
 

 

 

如下圖, 10.0% 是定制的字體, 7.5% 是默認(rèn)的字體, 很明顯定制的字體帶有圓嘟嘟的特性, 也和界面整體風(fēng)格比較搭, 而默認(rèn)的缺乏自己的特點(diǎn)
 

 

 

像其他類(lèi)型的產(chǎn)品, 也可以定制數(shù)字字體, 比如價(jià)格、登錄注冊(cè)時(shí)的數(shù)字、驗(yàn)證碼等, 特別是驗(yàn)證碼發(fā)送后的倒計(jì)時(shí), 默認(rèn)的字體過(guò)于纖細(xì), 壓不住頁(yè)面, 這時(shí)候我們可以通過(guò)定制一個(gè)字體, 使它更明顯
 

五、投影

制作投影的時(shí)候, 不要簡(jiǎn)單的調(diào)投影的參數(shù), 而可以用多層疊加的方式, 使投影更加通透, 立的起來(lái), 也使頁(yè)面更有細(xì)節(jié), 如下圖
 

 

明顯左邊的圖更有細(xì)節(jié)一點(diǎn), 不只是簡(jiǎn)單的投影,那么具體操作方法是什么?
首先將圖片復(fù)制一個(gè)置于下方, 然后縮小一點(diǎn), 高斯模糊, 最底下一層調(diào)一個(gè)黑色的透明度低的投影, 三層疊加 

注意:高斯模糊層在圖片和黑色投影的中間, 屬于第二層
 

 

 

看到這里, 可能就有人會(huì)說(shuō)這樣的效果很難落地, 那確實(shí)是, 但是呢, 咱們可以變通一下,
加投影的目的是什么? 就是為了讓元素突出
那么讓元素突出又有幾種方法呢?

. 自身突出
. 周?chē)販p弱

所以在實(shí)際落地的時(shí)候, 我們可以只加默認(rèn)的投影, 但是去掉旁邊兩個(gè)元素的投影, 通過(guò)減弱周?chē)? 起到突出自身的作用, 這個(gè)適合用在輪播banner圖區(qū)域
如下圖, 為了讓效果更明顯點(diǎn), 投影的參數(shù)調(diào)的較深, 實(shí)際操作的時(shí)候可適當(dāng)調(diào)整
 

 

總結(jié): 
 

讓頁(yè)面有細(xì)節(jié)、耐看的關(guān)鍵是頁(yè)面要有“細(xì)節(jié)”, 這句話是不是很繞, 意思就是說(shuō)你想讓自己的頁(yè)面經(jīng)得起推敲, 那頁(yè)面上的元素你就得有一些感人肺腑的細(xì)節(jié), 比如圖標(biāo)、圓角度、分割方式、數(shù)字字體、投影等等, 要讓別人覺(jué)得你這個(gè)頁(yè)面你是精心設(shè)計(jì)的, 而不是隨便一放的
如下圖, OFO活動(dòng)頁(yè)的時(shí)候, 將自己的LOGO固定放置在左上角, 當(dāng)活動(dòng)是和其他品牌合作的時(shí)候, 將其他品牌的LOGO統(tǒng)一放在后方

來(lái)源：UI中國(guó)