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