關于一致性:我們如何保證產品設計時的一致性

1 評論 22053 瀏覽 44 收藏 11 分鐘

我們設計產品時,一個組件可能會在多個地方調用。而每個地方的使用場景都不盡相同。這個時候就會涉及到一致性的問題。那么,如何保證設計的一致性呢?

不一致的影響:

產品設計中一個很重要的原則就是一致性,不一致的產品會對用戶及自身品牌造成極其重大的影響,比如:

1,不一致會導致用戶學習成本變高

微信安卓app在首頁微信欄長按一個聯系人或群組時會出現下面的菜單

9cac16dc-3f3f-4b1e-974d-77ee8e69b726

可以標為已讀未讀/置頂/刪除聊天。可以置頂,很方便的功能,對吧,于是我也想把某一個公眾號(這里指服務號)置頂,于是我長按一個顯示在微信欄的公眾號,它顯示這個:

4a9d876276d856669d12f018db85eaa8

為什么不能置頂?而且把取消關注放到了這里?邏輯是什么???當我又長按訂閱號時,她又只顯示刪除該聊天:

2056f991470ab290fcdb53d4926e4354

這些列表項都在一個列表中,為什么長按會有不同的響應?我當然知道原因,可是那也是在我認真思考之后才知道的原因,其他用戶呢?另外,還有,同樣是公眾號,為什么有的在“微信”欄,又有的折疊在了“訂閱號”里了?長得跟親兄弟似的卻相差如此之大,WTF of ‘公眾號’?對于大多數普通用戶誰管你是訂閱號還是服務號???等我知道這些規則后花費了我很長時間。

2,同一個團隊中的產品設計上的一致性有利于建立自己的品牌和可信性

對于有能力的大企業,還是應該重視設計,盡力使自己的產品們能遵循相同的設計語言,這一點騰訊互娛已經嘗到了甜頭。

cc383654-b026-403e-88d7-5f06717fb6c7

比如上面是騰訊出的幾個游戲,注意到了共同點了嗎?icon的右下角都有相同的logo。玩家在隨便找游戲時,多多少少會受到一些影響,看到那個logo,就知道是騰訊出的,“騰訊出品,必屬精品”(說說而已,不要打我),可能考慮下載的可能性就多了很多。反觀網易游戲,做的logo很好,但是并沒有發揮到極致。

一致性應該考慮哪些方面呢?

產品內部的一致性

1)視覺的一致性

一個產品的視覺設計應該給用戶一種格調或者說feel,這種格調應該伴隨著該產品的不同部分。比如B站app的閃屏,各個頁面們的設計,乃至icon們,都給用戶傳遞一種二次元動漫的feel

ce246d02-9654-4c5a-9939-a4191a628a28

2)交互行為的一致性

某個產品或者系統內部的交互方式應該一致,這會讓用戶對產品產生信賴感和控制感。比如我的手機系統主頁向右滑會返回到上一屏,向左滑會到達下一屏,那么到第一屏了再右滑會發生什么呢?這時已經沒有上一屏了,難道應該靜止不動嗎?不應該,相同的操作(向右滑)應該有相同的結果,雖然沒有上一屏了,但還是來點小動畫意思一下:

fd868367-7aa0-43c5-bfd7-1eb7f2636a0e

這會表明系統響應了用戶的動作,而沒有卡死。類似的,國內很多瀏覽器都有返回到瀏覽器主頁的按鈕(一個小房子),在用戶進入到一個比較深的頁面迷路時點擊那個按鈕可以達到主頁,那么在主頁時點擊那個按鈕應該發生什么呢?很多瀏覽器這時都選擇靜止不動了,好像沒有響應一樣,這樣真的好嗎?如果不好,應該怎么做呢?可以思考一下。

迭代產品的一致性

同一個產品在產品更新迭代時重要的元素應該保持不變。比如產品的視覺應該與原來維持一致,交互方式應該一致,這樣用戶可以以原來的使用方法來使用你的產品,有一種熟悉感。

如果發生較大的更新這些都不得不改變時,也應該重點突出來提醒用戶哪里發生了變化,讓用戶有心理準備接受那些變化。否則當用戶以原來的方式與軟件交流時卻沒有效果,用戶就會受挫。

同一個團隊的產品線的一致性

當一些產品是由某一個相同的公司或團隊來制作的話,這些產品應該使用一致的設計語言。

比如上文提到的騰訊游戲部門的幾個游戲icon中右下角都有一個相同的logo,這樣有利于用戶辨識你的產品,降低學習成本;另外,也有利于建立自己的品牌。當然,一些公司的產品非常多,這樣的一致性很難實現;比如讓游戲和軟件有一致性這就沒有必要了。類似于云盤,日歷,地圖,搜索等這些工具還是有必要建立一致性的,比如谷歌的這些產品所使用相同的設計語言。

1580533f-5053-4be2-b0ae-58a8166c28d3

如果不看名字你能知道這些產品是一家公司的嗎?

e2b18c05-a2b9-4486-b367-6fb23d7213fa

與產品所在平臺的一致性

ios平臺上的應用應該有一致的設計語言,安卓平臺的應用應該有一致的設計語言;這樣可以減少用戶的學習成本和認知成本,用戶在使用軟件時都能很快學會。

比如windows操作系統的確認按鈕在左邊,mac系統的確認按鈕在右邊,這時候討論確認按鈕應該放哪邊已經沒有意義了,因為即使再不好,用戶也已經習慣了那樣的布局,你不能把一種平臺的設計方法帶到另一個平臺上讓用戶犯錯。

與你的競品的一致性

請不要誤會:我不是讓大家去抄襲你的競品,你確實應該與你的競品有不同的地方,有你自己的特色,這樣你的產品才能在市場上生存下來贏得競爭。但是對于某些特定的產品使用方法,你應該遵循友商們已經默認的設計策略,用戶也已經習慣了,即使你的設計策略比友商們的好,用戶也很難在極短的時間去適應。

比如下拉操作就應該讓她刷新,鍵盤的布局就應該按照QAZ的布局方式,即使那樣布局的原因現在已經不適合。你突如其來的一些創新只會讓用戶覺得“方”。

一致性的終極目標是為了不一致

這樣說大家可能會覺得繞口,但確實就是這樣。一樣的東西就應該讓他看起來一致,交互方式也應該一致,但是不一樣的東西你就不要讓他一致了。如果一致,反倒會讓用戶覺得困惑。

020bc338-7dae-4dc6-a2cf-c5ae18f766b0

360云盤右上角有四個菜單,當點擊“首頁”,“會員”,“下載”時,都會在當前頁面打開新的內容,但是點擊“論壇”,當前頁面不變,卻是在新的頁面打開內容。這倆個菜單項有不同的行為,但是卻又有相同的外觀,讓用戶迷惑。而inbox做的很好,在這幾個菜單項中,“草稿”“已發郵件”“提醒”“回收站”“垃圾郵件”這五個菜單項點擊后在當前頁面變化,hover狀態時只是改變了背景,

9205821b-26f1-476d-9691-d7570ecbac59

而“通訊錄”和“Gmail”這倆個菜單項點擊后是在新頁面打開的,因此hover狀態后旁邊有一個小icon。

616dac15-d82f-450d-b5b9-b4fd84499643

總結:

一致性對于產品設計有很大的影響,擁有一致性的產品能把用戶的學習成本降到最低,用戶能很容易使用你的產品。為了實現產品的一致性,你可以注意文中提到的一些方面:

  1. 產品內部的一致性(視覺層面,交互層面);
  2. 迭代產品的一致性;
  3. 產品線產品的一致性;
  4. 平臺的一致性;
  5. 競品的一致性;
  6. 不一致性。

#專欄作家#

法海,微信公眾號:uxd_design。人人都是產品經理專欄作家。熱愛交互設計,熱愛用戶體驗。

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 總結的精練、易懂、有用 ??

    來自北京 回復