UI設計中一致性如何做?看這篇就夠了

編輯導讀:為什麼一致性在UI設計中很重要,設計師平常掛嘴邊的一致性原則到底是什麼?一致性原則如何影響用户行為?價值在哪裏?本文作者從一致性原則的優勢出發,對設計師在處理界面的時候,如何遵循一致性原則這個問題進行了探討,與大家分享。

UI設計中一致性如何做?看這篇就夠了
01 一致性原則的優勢

我們遵循一致性的原則目的是為了減少用户認知負荷,用户能夠輕易上手使用產品,熟悉的導航路徑,熟悉的設計模式。

我們知道,我們的用户是忙碌的,沒有耐心,他們不願意花更多時間來學習使用你的產品。所以我們在做設計時候,就儘量多遵循常用的UI Patterns,它是什麼?是一種常用可用性問題的一種通用解決方案。

但是如果一味遵循常有的Design Patterns,會導致我們界面看起來無創新,那麼該什麼時候突破這種界限,下面我會簡單舉例説明。

02 影響它的關鍵要素

顏色、間距、字體大小、圖標一致性、規則一致性、交互操作等,我們在做界面設計時,如何科學把控這些?

這裏就要告訴大家一個常用的設計法則“重複”“節奏”“韻律”,學過平面設計的同學應該知道,這幾個點吧,在平面設計中運用比較多的種設計方法。

舉一個例子,重複如何運用在UI設計中?

1. 重複間距
UI設計中一致性如何做?看這篇就夠了
UI設計中一致性如何做?看這篇就夠了

上兩圖中,我們看可以看出裏面設計採用的間距都是基於8的倍數,並重復運用。有節奏、有韻律的重複使用這些間距,可以產生節奏美。

2. 重複控件
UI設計中一致性如何做?看這篇就夠了

上圖facebook截圖,按鈕表象層圓角基因一致。如果有大小差異,它們使用參數化原則去定義圓角,大一點的控件圓角大一些,反之亦然。

3. 佈局規則
UI設計中一致性如何做?看這篇就夠了

上圖是騰訊視頻界面截圖,我們可以看到他們在佈局上制定了一些規則。

比如欄目與欄目之間才有重複使用相同佈局,2×3(指單個欄目擺放視頻數量),然後接着下面欄目就是1×1,下面又接着2×3,後面欄目將1X1和2X3集合起來,然後重複使用。

UI設計中一致性如何做?看這篇就夠了

這樣重複的網格佈局,對我們產品有什麼好處呢?大家有沒有發現目前市面上的視頻類音樂類的產品差不多這樣佈局嗎?(這其實就是外部一致性原則)。

因為用户已經熟悉且掌握這種模式,不再需要重新學習

那麼如何在這種同質化的產品中脱穎而出呢?佈局中可以使用對比,突出核心功能體驗,又如還可以內容優於同類產品,品牌特徵打造,符號運用。

03 一致性原則影響着用户行為

導航模式一級導航,二級導航,如果採用常用設計模式,用户基本可以很輕鬆的找到自己想要的內容。

再來説下顏色如何影響用户行為:比如系統裏面定義藍色是可點擊的顏色,那麼我們在做設計是時候就要注意,哪些可點擊,顏色使用是否合理,同類顏色,表達相同的含義,就不能用在其他意義的元素上。

大原則:相同含義的元素在不同的地方執行相同的操作時候,反饋機制需要一致。

UI設計中一致性如何做?看這篇就夠了

上圖左邊是ios的開關,右邊是materials design 材質設計系統的開關,這兩種開關大同小異,它符合用户心理表真,我們日常生活中家裏燈開關不就和這個類似嗎?所以在我們設計這些就可以儘量遵循用户的心裏表真,保持內部外部一致性。

再比如在ios系統裏面在對應列表上左滑動是可以對該列表操作的,那麼在安卓裏面的列表設計就需要慎用左滑操作。

總結

一致性設計大方向為產品有更傑出的體驗,在保證用户體驗良好的同時,我們需要與同類產品做出差異化競爭設計,這就需要我們平時多觀察互聯網設計趨勢,國外設計趨勢,集合自己品牌去打造一套好用的產品。

在產品設計中我們時刻留意着關鍵元素一致性的運用,確保產品整體體驗一致。

  1. 顏色:在使用顏色上需要嚴格去定義,比如綠色用於正確顏色,紅色用語錯誤顏色,藍色是可以點擊顏色,這些都是常用的設計模式。
  2. 佈局/排版:佈局遵循最小化設計原則,導航路徑清晰可見,一級導航和二級導航一定要區分清楚,二者不可混用,排版佈局上儘量遵循格式塔心理學原理。
  3. 字體:一個app使用一種字體貫穿整個產品設計,字體大小運用重複原則,重複可以使其保持一致性。
  4. 交互:這裏我簡單説下,操作模式,反饋機制要符合用户心理表真,常用功能操作流程要和外部環境保持一致性,比如我點擊界面上藍色文字這時候就要有正確反饋機制,而不是出一個彈窗。
  5. 圖標:圖標一致性我相信大家都懂吧,以前寫了一篇關於圖標規範的,有興趣的可以去看下,5招輕鬆打造系統圖標規範

看完了你掌握了多少?一致性是視覺分析的其中一種關鍵環節,再結合我之前寫的“認知負荷”可以拿自家APP 去分析一下,現有版本有哪些視覺問題,這樣可以鍛鍊自己視覺分析能力!

#專欄作家#

Tony,微信公眾號:洞見設計,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每週分享最有價值的設計經驗,擅長產品體驗設計,關注【洞見設計】後台回覆“彩蛋”領取設計資料。

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

題圖來自Unsplash,基於CC0協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1947 字。

轉載請註明: UI設計中一致性如何做?看這篇就夠了 - 楠木軒