提升設計細節的三個小技巧

sky
1 評論 2581 瀏覽 10 收藏 7 分鐘

編輯導語:如今我們每天都要接觸到很多款APP,用戶在進行選擇時,會注意到讓自己更加便捷舒適的一些小細節,這些小細節可以給用戶留下比較深的印象;本文作者分享了三個關于設計細節的一些小技巧,我們一起來看一下。

細節決定成敗,今天很多設計商業模式,設計方式,以及設計表現手法都呈現同質化,設計師需要幫助業務在同質化競爭下脫穎而出;除了產品上需要創新,商業模式也需要不斷創新。

其中還有一個很重要的點就是設計細節的提升,那么今天和大家分享一些提升細節小技巧。

一、巧用描邊讓頁面更干凈清晰

設計干凈利索是展現界面精致度的一大重要指標,經常看很多設計師作品集,對于細節處理很粗心,投影要么太大,要么太弱,導致整體畫面不夠干凈,降低印象分。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲投影過重會讓頁面看著非常的山寨感,風格顯得陳舊。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲投影柔和會稍微好一些,但是感覺邊緣不夠利索干凈清晰。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲如何變的清晰利索,有兩個小技巧,第一個方法是在卡片邊緣加一個1px的描邊,描邊顏色稍微比投影更深一點,這樣會讓頁面投影看著更加清晰。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲如果覺得加描邊還有點重,那么可以把背景由灰色改為白色,投影不用描邊,這樣卡片和背景對比也足夠清晰。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲看看頁面中落地效果,左側是很多設計師設計容易出現的情況,投影過重看著不清晰利索,右邊兩個方案會更加清晰,邊緣銳利。

二、通過字重讓界面層級更清晰

新手設計師常犯的3個錯誤,我都幫你指出來了

▲上圖這個案例是很多設計師設計時經常出現的,為什么感覺沒那么精致,問題出在哪里呢?

仔細分析一下,你會發現問題出在缺乏對比,所有字體的顏色都一樣,大小也差不多,信息堆在一起缺乏設計重點。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲怎么處理讓他看起來更舒服,可以加大標題的字重,同時商品卡片的標題進行弱化;因為用戶在這個場景,更關注是物料信息,看商品圖就能一目了然,所以沒有必要再去強調商品內容本身;如果什么都重要,那么最后就會變得什么都不重要。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲最后來一個效果的前后對比,其實通過文字來突出或者強調層級,不僅僅在界面設計中,在平面設計,海報設計都是大量運用的一個設計技巧,大家可以多看多靈活運用。

三、善用疊加提升圖文設計效果

新手設計師常犯的3個錯誤,我都幫你指出來了

▲做電商的設計師對上圖場景應該很熟悉,我們在做這些設計時,會用到大量白底圖,但是在使用時候總是怪怪的;因為圖片商品各種形狀都有,視覺上無法很好形成對齊,沒有達到平衡感;那么這個時候就可以善用一些疊加方法,讓設計更加精致。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲通過在圖片上疊加一個黑色2%的透明度,這樣整個圖片上就會蓋上一層淺淺灰色,同時這個灰色也不會影響圖片的質量;頁面對齊也會更加清晰,節奏感更好。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲最后看看頁面中效果,是不是右邊加了灰色的底部感覺看起來更高舒服,對齊更加精致。

新手設計師常犯的3個錯誤,我都幫你指出來了

▲知名產品Pinterest也是通過這個的方式來處理白色照片的,在圖片上疊加一層黑色透明度的灰色,整體宮格對齊更加的規范。

四、最后

以上都是一些很小的細節,但是現下的產品設計就是由這些無數的小細節組成的;如果大家的每個設計都是經得起推敲的,那你就能成為一個思維有格局,設計輸出有技巧,成為你身邊那個最厲害的那個人。

#專欄作家#

Sky,微信公眾號:我們的設計日記(ID:helloskys),人人都是產品經理專欄作家。原支付寶體驗設計專家,阿里巴巴天貓設計專家;10年知名互聯網公司設計經驗,對于產品從0到1、品牌定位、金融產品、設計規范、運營規范、大促等有豐富實戰經驗。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自?Unsplash,基于 CC0 協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 陰影那個細節學到了,自己畫原型都是直接弄個陰影就完事有考慮不能太重但沒想過那么細。

    回復