今天分享2個細節,幫你提升設計品質

sky
1 評論 5795 瀏覽 4 收藏 8 分鐘

編輯導語:我們每天都會接觸到很多APP,每個APP里面的風格以及設計都會有差別,一些APP的頁面設計如果讓你看起來很舒適,這就是用戶的體驗感不錯;本文作者分享了關于一些簡單的小細節幫你提升設計品質的方法,我們一起來看一下。

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

一、使用灰色增強層級

總監說設計沒細節?2個技巧輕松搞定!

這是之前做支付寶財富時候一個頁面,當時業務方需要在理財服務下面加2個入口「穩定收益」 和「浮動收益」。

當時也沒在意,那就按照設計規范,直接下面加2個小卡片就好了,樣式和上面保持一致;然后我就這樣做了,但是做完后,發現怎么看怎么奇怪,我們來分析下。

總監說設計沒細節?2個技巧輕松搞定!

單獨看局部設計,其實并沒有問題,但是從整體看,會發現這里被切割的非常的碎片;這么一個區域有3個卡片設計,同時下面功能和上面還不一樣,但是設計上看著又很類似;所以信息表達肯定是有問題的,于是進行了優化。

總監說設計沒細節?2個技巧輕松搞定!

樣式雷同,于是我將視覺樣式進行了調整,加了一個色塊的圓形按鈕上去,并且去掉了卡片設計,和上面完全拉開差異了。

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

總監說設計沒細節?2個技巧輕松搞定!

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

總監說設計沒細節?2個技巧輕松搞定!

改之前的前后對比,你會發現優化比之前要很多,同時內容在整個頁面的信息里面更加合理。

總監說設計沒細節?2個技巧輕松搞定!

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

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

總監說設計沒細節?2個技巧輕松搞定!

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

上面是我當時做的支付寶尊享理財一個項目,當時頁面差不多定稿了,首頁進去一個深藍色+玫瑰金配色,首頁一個邀請的信封,非常高級;但是因為頁面內容比較少,頁面非???,需要增加一些細節。

總監說設計沒細節?2個技巧輕松搞定!

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

總監說設計沒細節?2個技巧輕松搞定!

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

總監說設計沒細節?2個技巧輕松搞定!

改完之后,明顯比改之前細節層次,尊享感更強一些,同時我們把這個設計細節,也一直沿用到整個產品設計中,讓很平的頁面細節豐富起來。

總監說設計沒細節?2個技巧輕松搞定!

有底紋的運用,和沒有底紋的運用,運用了底紋讓頁面更有質感,整個空間感也會更強烈;所以大家今天如果頁面中沒有細節,可以通過類似方式去添加,但是要注意,底紋元素一定要和品牌有關聯,不能亂用。

總監說設計沒細節?2個技巧輕松搞定!

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

三、最后

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

如果對該篇文章有疑問,或者想和我交流設計的朋友,歡迎評論區和我一起交流設計經驗與心得,歡迎多多交流~

#專欄作家#

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

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 如果對該篇文章有疑問,或者想和我交流設計的朋友,歡迎和我在評論區一起交流設計經驗與心得,歡迎多多交流~

    來自浙江 回復