如何從零構建UI組件及設計規范(二):設計原則

1 評論 7583 瀏覽 67 收藏 8 分鐘

本篇為如何從零構建UI組件及設計規范之設計原則篇,主要介紹在組件和界面設計中,產品體驗原則、界面設計原則以及常見設計定理。

《如何從零構建UI組件及設計規范》共分為5個系列,分別為《一:介紹篇》、《二:設計原則》、《三:全局樣式》、《四:基礎組件》、《五:通用模版》。

一、產品體驗原則

要有 → 高效 → 易用 → 美觀。要有是基礎的體驗,有總比沒有的要好;然后是使用效率,效率得到提升后,再然后就是需要好用容易使用;最后才是要好看。

當然丑也是不行的,只不過他的重要性相對是排到最后。

  • 要有:有是最基礎的體驗,是產品的基石,沒有功能就沒有其他。
  • 高效:注重用戶的長期使用效率。
  • 易用:短時間內是否更快的學習上手等。
  • 美觀:B端產品是不應該優先考慮好看的,不管從用戶價值還是商業價值。相對而言,美觀的側重點是簡潔好用,它也是美觀的范疇范圍。

高效 & 易用的區別:

  • 水電煤繳費,每個月都用一次,由于間隔時間較長,可能就忘了上次怎么操作的。所以這時候的側重點就是“容易學會并能夠很快上手”,符合「別讓我思考」的邏輯,寧愿多點一次也別讓用戶多想;
  • 商家工作臺的預付款也符合此原理,商家使用間隔時間較長,但是一定要能夠使用簡單。所以我們采用的是分步驟頁面,這時用戶并不在乎多點擊一次還是兩次;
  • 商家工作臺“出入庫”功能,對于商家可能就是每天都用,用很多次,使用頻率非常之高。這個時候就要主要“使用效率”,需要保證高效操作。所以表單設計時即使有再多內容也都是放一個頁面填寫,不要每次都要點擊很多次次才能完成一個任務。

二、界面設計原則

對于企業類型的產品,完成目標任務永遠是第一位的。

1)清晰

幫助人們更準確的理解和使用產品,文案、界面或操作等。不讓用戶進行深度思考,說人話,不要設置專業門檻。幫助用戶在足夠清晰的界面環境中完成任務,達成目標。

2)高效

讓流程更順暢,更智能化。優化功能邏輯,預判需求,讓使用對象更加輕松快捷。提升效率:某人掌握產品的速度越快,使用該產品的效率就越高。設計時可采用以下3種方法:

  • 刪除:刪除不必要的因素,將頁面的元素進行簡化處理;
  • 隱藏:根據用戶使用的場景,讓某些元素進行隱藏,需要進行說明的時候再進行呈現;
  • 重組:即分類,可以將相近功能進行組織和分類,最常用的就是將不常用的功能分類在「更多」欄目中。

3)一致

“封閉高速路”哲學,判斷本身就是成本。對于我們的心靈來說,兩點之間,不一定是直線最短。沒有路口的封閉高速路,可能更短。

李楠《iPhone 可有設計哲學》

  • 界面保持一致:少數服從多數,一致性可以減少用戶思考的次數和時間,讓用戶的注意力更集中在當前的任務中,進行業務上的判斷,即心流體驗。
  • 表達方式一致:文案界面保持一致,不多多樣化。從開始到結束,從 A 產品到 B 產品,從界面交互到文案內容。
  • 保留一定的空間:保留一定程度的空間,不要為了追求一致性而犧牲更加重要的東西。所以這是放在第三位。

細心打磨界面外觀,讓使用對象感到我們的產品值得他花費時間與精力去使用。美觀是提升體驗、激發愉悅的重要手段,但不將它的重要性排在其他任何設計原則之前。

三、常見設計定理

1)數量6原則

數量上一般采取的叫做7+2原則,就是說一般人的記憶容量約為7±2,即5~9之間。這邊我將原則簡化為6原則,比如按鈕(含鏈接)文字、單選框復選框的標簽文字、表單的標簽文字、tag標簽等。

2)席克定律

當選項增加時,用戶下決定的時間也在增加。在人機交互界面中,選項越多意味著用戶決策的時間也越長,用戶越不知道選擇什么。用戶在某一場景對選項的反應時間取決于三個要素:

  • 前期的認知和觀察;
  • 根據認知后,處理的時間;
  • 選項的數量。

3)幾乎沒人會改默認設置

  • 幾乎沒有用戶更改默認設置的,只要專家級用戶才會更改,正常用戶只會使用產品提供的默認設置。
  • 產品設計時,高級設置等功能絕大多數用戶不會去用。

4)習慣路徑的設計,比少一次點擊更重要

  • 《不要讓我思考》書中提到,可以多點一次,每次都不需要思考,是基本的原則。所以少點、多點一次沒那么重要,重要的是讓用戶形成習慣性路徑思考。
  • 讓用戶明確內容和信息,知道自己要做什么,點擊哪里,比單純的減少點擊次數更為重要。

 

本文由 @徐銀高 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 7±2這里我沒明白 你句的例子:按鈕(含鏈接)文字、單選框復選框的標簽文字、表單的標簽文字、tag標簽等。具體在設計中怎么使用呢?是只需要這幾個嗎?還是…?

    來自廣東 回復