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

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

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

那么我們常說的頁面細節(jié)到底是什么呢？下面結(jié)合自己最近的一些心得感悟, 來談?wù)勎宜J為的頁面細節(jié)。如有遺漏, 請將就著看吧, 當然你也是可以給我補充的

一、圖標統(tǒng)一

這里說的統(tǒng)一肯定不是大小、粗細統(tǒng)一啦, 因為這是必須的, 你第一步就要做到的, 走路都沒學會咱就不要想著跑啦。這里說的圖標統(tǒng)一主要說的是風格以及修飾元素統(tǒng)一

1、風格

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

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

 

 

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

這就需要我們定好一種風格之后, 其他頁面都按照這個風格來, 可以借鑒別人圖標的 “形”, 然后改成適合自己頁面的

2、修飾元素

下圖左右兩張圖, 乍一眼看都沒什么問題, 但是細看就會覺得右邊有點 “奇怪”

 

 

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

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

 

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

 

上面舉了幾個例子, 來說明圖標在保持大小、粗細一樣, 不虛邊的情況下, 還可以怎么樣來提升細節(jié), 一個是風格保持一致, 另外一個是修飾小元素保持一致 。最后啰嗦一句, 參考頁面多的時候要學會融會貫通, 千萬不要純用素材堆砌, 因為痕跡真的很明顯, 當然你要是堆砌的別人看不出來, 那當我沒說咯

 

 

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


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

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

 

 

理想狀態(tài)下是, 按鈕、圖標的圓角度也和圖片的保持一致, 但實際操作中, 由于按鈕、圖標相對小于圖片的大小, 圓角度一樣的話, 在視覺上按鈕、圖標的圓角度會遠大于圖片
 

所以實際運用的時候, 只需要保持圖片之間、圖標之間、按鈕之間的圓角度一致就好
 

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

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

四、數(shù)字字體

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

 

 

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

 

 

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

五、投影

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

 

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

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

 

 

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

. 自身突出
. 周圍元素減弱

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

 

總結(jié): 
 

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

來源：UI中國