2025-2-26 杰睿
簡單的細(xì)節(jié)調(diào)整就能加強(qiáng)設(shè)計(jì)品質(zhì)。
簡單的細(xì)節(jié)調(diào)整就能加強(qiáng)設(shè)計(jì)品質(zhì)，昨天沒想到幾個小時寫的一篇小文章很受大家歡迎，后續(xù)我多寫一些類似使用技巧，大家多給我點(diǎn)贊一些，支持我繼續(xù)寫下去，那今天再給大家分享幾個設(shè)計(jì)小技巧。希望能幫助到大家。
小輪廓能讓設(shè)計(jì)更精致
電商設(shè)計(jì)中，白色商品圖非常多，很多時候如果細(xì)節(jié)處理不好，就會體驗(yàn)非常糟糕，如上圖就是大家經(jīng)常用到的一個場景。列表中有一個商品圖，這個設(shè)計(jì)有一個很大的問題，就是列表是灰色，商品圖是白色，白色和app的底色白色融為一體了，看起來非常缺乏平衡感。
仔細(xì)分析，你會發(fā)現(xiàn)問題是商品圖頂部有些白色部分和背景頁面的白色融合在一起了，同時卡片背景是灰色，所以色彩白色和灰色非常突兀，那么如何解決。其實(shí)有一個很小的方法就能解決這個問題。
我們直接在商品圖片周邊留出2px的邊框，就能很好的解決這個問題，因?yàn)楸尘笆腔疑模舫龅倪吙騽偤米尠咨珗D片看著有一個輪廓，整體更加和諧。
前后效果圖對比，加了一個淺淺的邊框就解決了白色圖片的問題，是不是頁面一下子精致起來。
同樣的原理，在大的商品圖上，留下小的邊框也很好的解決了白色地圖和背景的問題，這個小技巧希望大家能掌握。
善用色彩疊加讓頁面效果更潮
上圖這個場景我想是很多同學(xué)每天工作都在用的，圖片上需要去放一些文字，我們一般處理方式就是在上面疊加一個黑色，給一個透明度，這樣文字就能看清楚。這是一個設(shè)計(jì)手法。
還一種設(shè)計(jì)手法就是在圖片頂部，加一個黑色到透明的一個蒙版，這個大家都會。
但是這兩個設(shè)計(jì)如果對于一些比較年輕，比較潮流的頁面處理，可能就會感覺少點(diǎn)什么，那么這個時候就需要我們大膽一點(diǎn)，用一個色彩疊加的方式去設(shè)計(jì)，效果就會完全不一樣。
直接在圖片上根據(jù)你產(chǎn)品調(diào)性，疊加一個彩色，然后講顏色模式改為線性光，那么整體的感覺就瞬間不一樣，畫面潮了很多。
我們來看看效果對比，是不是瞬間一個普通的設(shè)計(jì)就潮起來了，當(dāng)然這個效果也需要看你頁面實(shí)際場景去使用。如果你頁面就是一個傳統(tǒng)的設(shè)計(jì)，用戶就是普通用戶，那么可以就上面2個方法去設(shè)計(jì)，如果你的產(chǎn)品調(diào)性需要傳遞出很潮流，很時尚，那么就可以試試這個方法。
當(dāng)然你也可以在局部去疊加色彩，效果一樣很棒，我最喜歡的音樂軟件Spotify在頁面中就大量使用這種手法在設(shè)計(jì)，有興趣同學(xué)可以下載看看。
善用空格和留白
有的時候負(fù)空間非常重要，很多同學(xué)的設(shè)計(jì)稿，非常的擁擠，頁面都像要溢出屏幕了。如上圖，文字和圖片過于緊湊，圖片下面的圖標(biāo)，熱區(qū)不夠，看起來非常擁擠。
大家都太吝嗇運(yùn)用空格了，但是留白和空隙是提升設(shè)計(jì)中非常重要的點(diǎn)。能讓你頁面呼吸感更強(qiáng)，是優(yōu)化設(shè)計(jì)，讓設(shè)計(jì)更精致非常重要的一個小技巧。
簡單優(yōu)化下，把信息分成3部分，然后加大留白，讓信息留白更多，增強(qiáng)設(shè)計(jì)呼吸感。
最后來看下效果，是不是看起來舒服多了，節(jié)奏感和呼吸感更強(qiáng)了，也有例如我們理解信息內(nèi)容。
最后
今天就和大家分享這么幾個小點(diǎn)，希望大家都成為一個關(guān)注細(xì)節(jié)的設(shè)計(jì)師。
蘭亭妙微(www.indbiotech.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.indbiotech.com.cn