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

1 評論 7529 瀏覽 11 收藏 8 分鐘

編輯導語:讓用戶在使用產品不產生混淆、可快速獲取所需信息,是產品設計時應當考慮的重要層面,而這需要團隊在設計時預先做好方案,去掉無關事物,清晰地呈現信息,提升產品的易用性與用戶體驗。本篇文章里,作者介紹了提高信噪比的設計技巧,一起來看一下。

讓“信噪比”最大化。

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

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

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

利用了色輪相鄰色相的設計示例

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

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

廢話少說,直接上干貨……

一、在用戶界面當中使用已有的圖標,可避免造成用戶混淆

兩個設計實例。一個用了意思不明確的圖標,另一個則用了已經得到認可圖標來表示要采取的行動。

在給設計添加圖標時,永遠都要盡量去選擇已得到認可的圖標,那種可以清楚表示將要采取的行動的圖標。

選擇一個能傳達出正確含義和功能的圖標,因為其他任何東西只會引起困惑并給用戶造成認知障礙。

圖標的選擇不要太過叛逆。

二、利用親密性來表示元素之間的關系

兩個設計實例。左邊的設計元素間隔得比較開,右邊的則相距比較近。

在眾多久經考驗得到驗證的設計原則(對比、間隔、重復等)當中,有一項是關鍵,可幫助你為用戶設計出更清晰的 UI……

那就是親密性。

實現親密性很簡單,只需要確保相關的設計元素放在一起就行,放在一起就表明了它們彼此之間的關系,這反過來也可以幫助在用戶瀏覽網站或app時加快認知。

三、4像素的基線網格 + 8像素網格 = 垂直節奏和諧

一個帶標題、副標題及文本塊的樣例,使用了 4pt的基線網格。

在處理字體時時,可以把4pt 基線網格跟萬能的 8pt 網格一起配合使用,這樣設計可以讓垂直節奏更加和諧。

你只需要讓字體跟4像素的極限網格對齊即可。怎么做?行高值設為4的倍數(16、20、24、28等)。

為什么是4? 好吧,就我個人而言,我發現過去按 8 的倍數伸縮在處理某些文本大小時并不是那么的通用。

4pt 基線網格 + 8pt 網格 = 可愛的垂直和諧。

四、降低標題行高有百利無一害

兩個設計實例。一個標題行高過高,另一個標題高度正好合適。

跟需要行高足夠大以提高易讀性的長格式正文相反,標題一般要短得多,這樣就可以稍微地縮小一下間距。

推薦的標題行高一般是文本行高的 1 到 1.3 倍,倍數越大,行高就越不需要設得那么大。

標題行高不用太大。

五、選擇配色方案的時候遇到麻煩了?利用色輪進行類似配色

利用了色輪的相鄰色相的設計樣例

類似色,又叫鄰接色相或相鄰色相,是最和諧的配色方案之一,如果你在挑選顏色搭配方面遇到了困難,類似色可以幫大忙。

一組由基本色、二次色和三次色組成的相鄰色相,可以幫助你快速地創建出既簡單又無懈可擊的配色方案。

當你需要讓配色顯得和諧時,用類似配色吧……快得很。

六、努力讓設計的信噪比最大化

兩個設計實例。一個屏幕上的元素太多,另一個看起來遠沒有那么的凌亂。

設計的清晰度和可用性可以通過讓信號最大化,讓噪聲最小化來實現,而這反過來又會制造出很高的信噪比。

為了實現這一點,你需要確保相關信息(信號)得到有效呈現,而不相關信息(噪音)要減少或完全去掉。

無關的去掉。讓東西更清晰。提高信噪比。

希望你看過這篇UI 和 UX小技巧之后,能對設計微調有更多的了解。

 

作者:Marc Andrew,譯者:boxi

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

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

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

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

    回復