上周同事給了幾張頁(yè)面給我看，我給她的第一反饋是沒(méi)有細節，不耐看。她就非常不解，追問(wèn)我細節具體指的是什么？
是啊，細節到底是什么呢？我剛開(kāi)始做界面的時(shí)候，也是這樣，花費了很多時(shí)間精力去做一個(gè)頁(yè)面，最終給到別人看的時(shí)候，也都是說(shuō)沒(méi)有細節，最多加幾句說(shuō)圖標不一樣大、顏色配的不好看，但如果我把圖標改成一樣大了、顏色改成大廠(chǎng)的配色，我的頁(yè)面就耐看了么？
答案當然是否定的，不過(guò)現在回過(guò)頭去想，也是那時(shí)候頁(yè)面坑太多了，單改一兩處壓根沒(méi)用，所以別人給的反饋也只能是表面上的。畢竟你連圖標大小都不統一，你還能指望別人說(shuō)什么呢
那么我們常說(shuō)的頁(yè)面細節到底是什么呢？下面結合自己最近的一些心得感悟, 來(lái)談?wù)勎宜J為的頁(yè)面細節。如有遺漏, 請將就著(zhù)看吧, 當然你也是可以給我補充的
一、圖標統一
這里說(shuō)的統一肯定不是大小、粗細統一啦, 因為這是必須的, 你第一步就要做到的, 走路都沒(méi)學(xué)會(huì )咱就不要想著(zhù)跑啦。這里說(shuō)的圖標統一主要說(shuō)的是風(fēng)格以及修飾元素統一
1、風(fēng)格
現在圖標風(fēng)格多種多樣, 有走簡(jiǎn)潔的、艷麗的、雙色的、漸變的、斷線(xiàn)風(fēng)格的、2.5D的......但不管你選擇哪種, 你必須得保持整個(gè)APP內的圖標是同一種風(fēng)格
如下圖, 荷包的底部圖標采用的偏卡通、夸張的風(fēng)格, 和其他主流APP的風(fēng)格不一樣; 閑魚(yú)采用的是黑色和黃色的雙色圖標, 愛(ài)奇藝采用的是單色, 但把內部修飾元素的透明度降低了。而它們APP內部的圖標也都和底部標簽保持一致, 整體看起來(lái)就很統一, 經(jīng)得起推敲
上面說(shuō)的那些看起來(lái)很容易, 但是對于新手設計師來(lái)說(shuō), 總會(huì )出現這樣那樣的問(wèn)題, 比如: 參考的素材太多, 這個(gè)頁(yè)面圖標是這個(gè)風(fēng)格, 那個(gè)頁(yè)面又是另外一種風(fēng)格, 但看每個(gè)頁(yè)面, 都沒(méi)有什么太大的問(wèn)題, 但一起看就不協(xié)調了。
這就需要我們定好一種風(fēng)格之后, 其他頁(yè)面都按照這個(gè)風(fēng)格來(lái), 可以借鑒別人圖標的 “形”, 然后改成適合自己頁(yè)面的
2、修飾元素
下圖左右兩張圖, 乍一眼看都沒(méi)什么問(wèn)題, 但是細看就會(huì )覺(jué)得右邊有點(diǎn) “奇怪”
那到底奇怪在哪里呢? 仔細看, 會(huì )覺(jué)得右邊的沒(méi)有左邊的精致, 騰訊視頻底部的圖標, 都有“斷線(xiàn)” 的元素在, 個(gè)人中心的圖標也延續了這一元素; 而右邊的個(gè)人中心的圖標就是單純的素材, 沒(méi)有 “斷線(xiàn)” 的元素在, 看起來(lái)就和另外幾個(gè)不搭
愛(ài)奇藝的也一樣, 左邊的都在基礎性上根據風(fēng)格不同, 做了相應調整, 而右邊的就是素材堆砌
PS: 這里只是拿兩個(gè)APP舉了一個(gè)例子, 實(shí)際上, 可能右邊圖標的缺陷更加明顯
其實(shí)這就涉及到另外一個(gè)容易犯的錯誤了——不經(jīng)過(guò)思考, 單純的套用素材, 比如習慣于直接用素材網(wǎng)站的, 首頁(yè)圖標畫(huà)一個(gè)房子、我的畫(huà)兩個(gè)圓, 甚至還有些下載的都不是源文件, 而是png, 這樣的圖標你放到頁(yè)面中, 連圖標不虛邊、粗細一致都保證不了, 何來(lái)的細節呢?
上面舉了幾個(gè)例子, 來(lái)說(shuō)明圖標在保持大小、粗細一樣, 不虛邊的情況下, 還可以怎么樣來(lái)提升細節, 一個(gè)是風(fēng)格保持一致, 另外一個(gè)是修飾小元素保持一致 。最后啰嗦一句, 參考頁(yè)面多的時(shí)候要學(xué)會(huì )融會(huì )貫通, 千萬(wàn)不要純用素材堆砌, 因為痕跡真的很明顯, 當然你要是堆砌的別人看不出來(lái), 那當我沒(méi)說(shuō)咯
二、圓角度統一
圓角度包括圖片的、按鈕的，整個(gè)APP內所有圖片的圓角度需保持一致，比如都是10px，那所有的都得是10px，如果是直角，就都得是直角。
如下圖得到首頁(yè)的圖片圓角度是8px, APP內所有圖片的圓角度都是8px (用戶(hù)頭像除外)
理想狀態(tài)下是, 按鈕、圖標的圓角度也和圖片的保持一致, 但實(shí)際操作中, 由于按鈕、圖標相對小于圖片的大小, 圓角度一樣的話(huà), 在視覺(jué)上按鈕、圖標的圓角度會(huì )遠大于圖片
所以實(shí)際運用的時(shí)候, 只需要保持圖片之間、圖標之間、按鈕之間的圓角度一致就好
三、分割方式統一
頁(yè)面分割需制定統一的分割樣式，比如是用塊狀分割還是線(xiàn)還是留白，需定義好每種使用的場(chǎng)景?，F在流行趨勢來(lái)說(shuō)，用塊狀分割的較少，模塊與模塊之間用分割線(xiàn)、模塊內部用留白。其他需要酌情使用塊狀分割
四、數字字體
頁(yè)面字體普遍用的都是默認的字體, 但其實(shí)我們在一些數字的時(shí)候, 可以給他自定義一個(gè)字體, 這點(diǎn)在金融類(lèi)產(chǎn)品里尤為明顯, 這種類(lèi)型的APP里面很多都跟數字相關(guān), 自帶的字體沒(méi)辦法很好的展現產(chǎn)品的特點(diǎn), 也不好和別家產(chǎn)品區分
如下圖, 10.0% 是定制的字體, 7.5% 是默認的字體, 很明顯定制的字體帶有圓嘟嘟的特性, 也和界面整體風(fēng)格比較搭, 而默認的缺乏自己的特點(diǎn)
像其他類(lèi)型的產(chǎn)品, 也可以定制數字字體, 比如價(jià)格、登錄注冊時(shí)的數字、驗證碼等, 特別是驗證碼發(fā)送后的倒計時(shí), 默認的字體過(guò)于纖細, 壓不住頁(yè)面, 這時(shí)候我們可以通過(guò)定制一個(gè)字體, 使它更明顯
五、投影
制作投影的時(shí)候, 不要簡(jiǎn)單的調投影的參數, 而可以用多層疊加的方式, 使投影更加通透, 立的起來(lái), 也使頁(yè)面更有細節, 如下圖
明顯左邊的圖更有細節一點(diǎn), 不只是簡(jiǎn)單的投影,那么具體操作方法是什么?
首先將圖片復制一個(gè)置于下方, 然后縮小一點(diǎn), 高斯模糊, 最底下一層調一個(gè)黑色的透明度低的投影, 三層疊加
注意:高斯模糊層在圖片和黑色投影的中間, 屬于第二層
看到這里, 可能就有人會(huì )說(shuō)這樣的效果很難落地, 那確實(shí)是, 但是呢, 咱們可以變通一下,
加投影的目的是什么? 就是為了讓元素突出
那么讓元素突出又有幾種方法呢?
. 自身突出
. 周?chē)販p弱
所以在實(shí)際落地的時(shí)候, 我們可以只加默認的投影, 但是去掉旁邊兩個(gè)元素的投影, 通過(guò)減弱周?chē)? 起到突出自身的作用, 這個(gè)適合用在輪播banner圖區域
如下圖, 為了讓效果更明顯點(diǎn), 投影的參數調的較深, 實(shí)際操作的時(shí)候可適當調整
總結:
讓頁(yè)面有細節、耐看的關(guān)鍵是頁(yè)面要有“細節”, 這句話(huà)是不是很繞, 意思就是說(shuō)你想讓自己的頁(yè)面經(jīng)得起推敲, 那頁(yè)面上的元素你就得有一些感人肺腑的細節, 比如圖標、圓角度、分割方式、數字字體、投影等等, 要讓別人覺(jué)得你這個(gè)頁(yè)面你是精心設計的, 而不是隨便一放的
如下圖, OFO活動(dòng)頁(yè)的時(shí)候, 將自己的LOGO固定放置在左上角, 當活動(dòng)是和其他品牌合作的時(shí)候, 將其他品牌的LOGO統一放在后方
來(lái)源：UI中國
