本文授權轉自：菜心設計鋪（ID：caixinshejipu）

老規矩，上干貨！

一.按鈕精度

當你的按鈕做成這樣被客戶說“不行，這樣也太普通，太隨意了”，你是否沒有頭緒該如何優化？?♂?

不慌！我們帶著精度提升小技巧來了，先看看局部優化前后對比圖吧

步驟如下 ??

① 造型調整-按鈕：
首先針對客戶說的普通，我們就可以嘗試把常規的圓形改為圓角矩形，并適當調整icon在圖形內的占比

② 造型調整-icon：
按鈕造型OK后，再來看看里面的圖標，不難發現暫停是2個豎線（線性圖標），掛斷則是一個電話（面性圖標），它倆不統一；所以我們需要對其進行統一，以暫停按鈕為主，我們來調整掛斷按鈕

③ 顏色調整：
原暫停圖標的顏色是灰色，而掛斷圖標又是紅色，視覺上就會造成暫停“弱于”掛斷，我們需要調整其明度讓2個圖標整體更加和諧

接著，我們修改按鈕的顏色，只需降低透明度即可

④ 加投影：
為了進一步增加按鈕的質感，我們可以在它的下方加上合適的投影；并根據頁面的整體色調，進一步調整圖標的色相，使按鈕更好的與頁面保持和協統一

這樣就調整好了，最后再來看看整體的對比效果吧：

二.卡片精度1

再來看另一個案例，圖標用心畫了很久，但還是草率加個矩形包起來就完事了，導致卡片整體就差點意思

怎么變精致呢？先來看看優化部分的對比圖：

步驟如下 ??

① 調整容器樣式：
在整體的排版沒有問題的情況下，我們可以先將純色塊的容器調整為漸變的形式，再加上描邊(注意描邊也是漸變哦)

② 添加倒影：
調整后好了很多，但還是略顯單薄，我們可以給圖標加上倒影，使畫面的層次更加豐富

只需簡單的2步，就能然原本普通的卡片變得有設計感，是不是很神奇。再看看對比效果吧：

卡片精度2

同樣的技巧，我們也可以運用于另一個案例上

步驟如下 ??

① 調整容器樣式：
原容器是白色降低透明度+描邊，整體氛圍感不足；我們可以看到圖標都是紅色調的，所以大膽一點，我們的容器和描邊也可以是紅色調的

② 圖標添加投影：
容器樣式調整完后，因為圖標是發光的，必然會存在投影，我們再加上投影即可；需要注意這里的投影添加方式（記筆記??

同樣的方法去調整剩下的2個內容，整體就優化完成了，再來看看對比效果：

卡片精度3

這是你做的課程卡片，客戶看了說“不夠簡潔，我想要高級一點的”

怎么改？先來看看優化前后的對比圖：

步驟如下 ??

① 容器調整：
原課程卡片使用白色矩形包裹課程圖片的形式，我們可以嘗試去掉外層的白色，將課程圖片鋪滿整個卡片

② 優化文字信息：
去掉右上角的時間標簽，與課程名稱上下排列并注意層級關系，“去看看”按鈕改為用箭頭符號表達，避免全是文字導致視覺看起來很單一

③ 優化遮罩：
調整后整體效果比之前簡潔很多，但是圖片上的遮罩還是太黑，顯得不夠高級，我們可以改為毛玻璃的效果增強卡片的質感

④ 整體再調整：
到這一步基本就差不多了，再整體看一看，發現按鈕有點粗糙是一個大白塊兒，那么微微調整一下

最后再來看看優化前后的對比吧：

在科技浪潮奔涌向前的當下，人工智能正深刻重塑我們的生活與工作。人機之間的關系，也從簡單交互邁向深度協作。想知道如何在這一趨勢下把握體驗設計的新方向嗎？2025 年 10 月將在北京舉辦的 IXDC 國際體驗設計大會聚焦 “人機共生：人工智能時代人機協作新范式” ，作為全球領先的用戶體驗創新盛會，它將匯聚前沿理念與實踐。一起來關注這場盛會，探索人機協作的無限可能。

文章轉載：菜心設計鋪，版權歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/a9Su0Xa9Cx1wImPsNogfRw

版權聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會注明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯系，若涉及內容或作品等版權問題，煩請原作者聯系我們，給出內容所在的網址并提供相關證明資料，我們會核查后立即更正或者刪除有關內容！本公眾號不承擔任何責任，并擁有對此聲明的最終解釋權。

聯系微信：18802086168

聯系電話：18802086168

編排 | 羅家玉

終審 | 蘇 菁

點這里，學習更多設計知識！