人人都可以是設計師:UI&UX 小技巧大全(一)

3 評論 15811 瀏覽 33 收藏 9 分鐘

編輯導語:如何提升用戶的產品體驗?一些小的細節設計往往能給用戶帶來不一樣的感受。那么,可以從哪些方面提升UI&UX設計效果呢?本篇文章里,作者總結了幾個易操作的UI&UX設計技巧,也許會對你有所幫助。

小改動立馬帶來大改觀。

編者按:用戶對產品的體驗來自直觀感受。所以UI/UX往往對產品的成敗有著直接的影響,糟糕的UI/UX體驗會讓強大的功能失去效力。

但怎么才能提高UI/UX設計的效果呢?不一定需要你掌握豐富全面的設計知識,有時候一點點的小改變就能令設計大為改觀。

Marc Andrew總結了36個改進UI/UX設計的小技巧,分成6篇系列文章刊出,此為第一篇,希望能夠幫助到你。原文發表在Medium上,標題是:UI & UX micro-tips: Volume one。

這是兩個設計例子。一個背景色飽和度很高,一個使用了更為柔和的顏色

在為自己的下一個項目創作高效、美觀的 UI 時,有時只需一點小到不能再小的調整就可以幫助你快速改進設計。

有時候你只需要簡單的調整就可以制作出讓客戶、用戶和你自己真正滿意的東西。

在本文中,我整理了一些很小且容易付諸實踐的技巧,你可以不費吹灰之力就能改進設計和用戶體驗。

閑話少說,我們就單刀直入吧……

一、偶爾用下純粹裝飾性的元素是完全可以的

部分文本內容為淺灰色的設計示例

是的,屏幕上絕大部分的文本內容都應該遵循可用性的最佳實踐。這一點毫無疑問。

但是,有時候你可能純粹是為了裝飾想加入一些文字,這種做法毫無問題。我們可不希望所有的設計都是千篇一律平淡無奇。

純粹出于裝飾的原因加入某些奇怪的元素,而且還不遵守可訪問性標準,這完全沒有問題……如果你不添加那個元素就會影響到用戶體驗的話。

作品嘛,就得活出自我。

二、讓UI 里面的元素可以互相區分

兩個設計實例。左邊的通知和按鈕元素看起來類似,右邊則使用了更為多樣化的元素

按鈕、通知,這是UI 里面兩個獨立但都很重要的元素。

如果可以的話,始終都要努力確保用戶瞄一眼網站或app時就能夠快速、輕松地將他們區分開來。

大多數情況下都要優先保證按鈕,所以請確保按鈕是屏幕上最突出的那個,并且很容易跟其他元素(比方說通知)區分開來。

三、陰影一點點就行

兩個設計實例。一個用了非常深色的陰影,另一個對陰影的使用就要含蓄得多

大家都喜歡好的陰影,對吧?

如果使用適度的話,投影可以在你的設計當中發揮微妙但同時強大的視覺提示作用。

但是,微妙就是這里的關鍵。

大多數情況下,現實世界當中的陰影幾乎都不明顯,所以你在UI設計當中也應該模仿這種行為。

拋棄厚重暗黑的陰影,調低不透明度,從而獲得更微妙更逼真的效果。

四、全部都用大寫?不妨選擇適合實現光學清晰度的字體

兩個設計實例。一個用了比較細的字體,文字全部大寫,另一個則使用了比較粗的字體

在設計當中全部文字都用大寫,只要適度使用的話都沒問題。

特定文字元素全部大寫可以幫助實現部分的多樣性,突出相關內容,并增強你想要呈現的整體視覺效果。

如果你的確決定要好好用一用大寫來設計樣式的話,一定要盡量確保選擇合適的字體,字體的基本高度(x-height)一定要夠,字體也要夠粗,這樣用戶看起來才清晰。

五、突出顯示面包屑導航條,要讓用戶易于理解

兩個設計實例。左邊是面包屑導航設計的糟糕例子,另一個是對用戶友好的替代方案

面包屑,到處都是面包屑。

內容豐富的網站經常使用會面包屑,但未必總的得到它們應得的討好。

不過只要進行一點點地調整,你就可以確保用戶可以輕松地確定自己在網站的什么位置,以及接下來自己要去哪里。

比方說,如果他們是用同搜索跳轉到網站深處的某個地方的話,面包屑就顯得特別有用。

始終要確保鏈條里面最后一項在視覺上跟其它的條目以及鏈接有所不同,要努力讓它們看起來就有所不同。

給面包屑一些愛。

六、用了高飽和度的顏色?不妨試試用明調(Tint) 或暗調(Shade)過的顏色

兩個設計實例。一個背景用了高飽和度的顏色,另一個則使用了更為柔和的顏色

高飽和度的顏色(明亮的藍色、紅色、綠色等)用到網站上會很好看,但如果過度使用的話,這種顏色可能會讓用戶的眼睛感到疲勞,尤其是在應用了大量文本內容的時候。

盡可能適度使用,而且要試著用一些柔和的顏色(明調或暗調的漸變色)跟飽和色結合使用,這樣可以避免可怕的眼睛疲勞。

利用這種方法還可以把注意力集中在飽和色上,把最重要的內容放到前面和中心的位置,更柔和的顏色承擔不那么突出的角色,讓用戶的眼睛得到一點休息。

就照顧一下那些怕光的人吧。

 

作者:Marc Andrew,譯者:boxi

來源:https://www.36kr.com/p/1302280416758404

本文由 @神譯局 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 12

    回復
  2. rdefdcds

    回復
    1. z贊????

      回復