編輯導(dǎo)語：我們每天都會接觸到很多APP，每個APP里面的風(fēng)格以及設(shè)計都會有差別，一些APP的頁面設(shè)計如果讓你看起來很舒適，這就是用戶的體驗感不錯；本文作者分享了關(guān)于一些簡單的小細(xì)節(jié)幫你提升設(shè)計品質(zhì)的方法，我們一起來看一下。

大家都很喜歡設(shè)計小技巧這個環(huán)節(jié)，想讓我多分享一些設(shè)計技巧，那我就多找找我之前的項目案例，和大家拆解下大廠設(shè)計師做設(shè)計過程的思考給大家，幫助大家提升一下設(shè)計技巧。

一、使用灰色增強層級

這是之前做支付寶財富時候一個頁面，當(dāng)時業(yè)務(wù)方需要在理財服務(wù)下面加2個入口「穩(wěn)定收益」 和「浮動收益」。

當(dāng)時也沒在意，那就按照設(shè)計規(guī)范，直接下面加2個小卡片就好了，樣式和上面保持一致；然后我就這樣做了，但是做完后，發(fā)現(xiàn)怎么看怎么奇怪，我們來分析下。

單獨看局部設(shè)計，其實并沒有問題，但是從整體看，會發(fā)現(xiàn)這里被切割的非常的碎片；這么一個區(qū)域有3個卡片設(shè)計，同時下面功能和上面還不一樣，但是設(shè)計上看著又很類似；所以信息表達(dá)肯定是有問題的，于是進(jìn)行了優(yōu)化。

樣式雷同，于是我將視覺樣式進(jìn)行了調(diào)整，加了一個色塊的圓形按鈕上去，并且去掉了卡片設(shè)計，和上面完全拉開差異了。

但是發(fā)現(xiàn)新的問題來了，首先這樣太重，完全搶了頂部的余額寶那5個金剛?cè)肟?，同時這兩個入口放這里， 兩側(cè)視線邊距無法對齊，閱讀起來有很強的鋸齒感。

于是我將下面的背景改為了灰色，在樣式上進(jìn)行了區(qū)分，同時灰色在格式塔「地面原則」里 面相當(dāng)于視覺底部，從信息層級上也是清晰的；所以平時我們在處理某個獨立模塊設(shè)計時候，一定要結(jié)合整體去看，有時候如果相鄰的樣式嘗試下用不同顏色去創(chuàng)建區(qū)別。

改之前的前后對比，你會發(fā)現(xiàn)優(yōu)化比之前要很多，同時內(nèi)容在整個頁面的信息里面更加合理。

同理，在頁面的其他地方，我們也運用這個方法，也很好傳遞信息層級同時，頁面也更加合理，希望這個小技能大家能掌握。

二、巧用底紋讓頁面更精致

星球里的同學(xué)可能都知道，我們21天的打卡練習(xí)， 會讓大家去練習(xí)底紋的技法，以及設(shè)計的各種圖形的變化效果。為什么要掌握這個呢？因為他是增強設(shè)計細(xì)節(jié)的神器。

上面是我當(dāng)時做的支付寶尊享理財一個項目，當(dāng)時頁面差不多定稿了，首頁進(jìn)去一個深藍(lán)色+玫瑰金配色，首頁一個邀請的信封，非常高級；但是因為頁面內(nèi)容比較少，頁面非?？眨枰黾右恍┘?xì)節(jié)。

第一步，我在頁面四周加一個邊框，共兩層，一個深一個淺，目的是增加層次，讓這個頁面更加有邀請函的感覺；同時也能讓細(xì)節(jié)更豐富一點，加上后，細(xì)節(jié)豐富多了。

第二步，在頁面的上面和下面角上增加一些金屬流動的元素。因為是理財產(chǎn)品，同時是100萬起投，需要頁面體現(xiàn)出一些尊貴感，所以有時候需要一些濃重的氛圍營造。

改完之后，明顯比改之前細(xì)節(jié)層次，尊享感更強一些，同時我們把這個設(shè)計細(xì)節(jié)，也一直沿用到整個產(chǎn)品設(shè)計中，讓很平的頁面細(xì)節(jié)豐富起來。

有底紋的運用，和沒有底紋的運用，運用了底紋讓頁面更有質(zhì)感，整個空間感也會更強烈；所以大家今天如果頁面中沒有細(xì)節(jié)，可以通過類似方式去添加，但是要注意，底紋元素一定要和品牌有關(guān)聯(lián)，不能亂用。

我們熟悉的淘寶88會員也是在頁面中大量使用圓形的底紋，這個圓形底紋是基于「88」這個數(shù)字圓形抽離出來的，細(xì)節(jié)非常的強。

三、最后

今天這兩個技巧，就是平時在項目中實際運用的，雖然都很小的點，但是看完就會用，用了就會出效果，希望你們都能掌握這個技巧。

如果對該篇文章有疑問，或者想和我交流設(shè)計的朋友，歡迎評論區(qū)和我一起交流設(shè)計經(jīng)驗與心得，歡迎多多交流～

#專欄作家#

Sky，微信公眾號：我們的設(shè)計日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗設(shè)計專家，阿里巴巴天貓設(shè)計專家；10年知名互聯(lián)網(wǎng)公司設(shè)計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自?Unsplash，基于 CC0 協(xié)議