<samp id="s6oek"><bdo id="s6oek"></bdo></samp>
  • <xmp id="s6oek">
    <strong id="s6oek"><samp id="s6oek"></samp></strong>
  • 企業軟件開發通用界面設計法則

    日期:2021-04-25 10:33:58    來源:www.xinchengche.cn

    大部分產品經理在設計企業軟件產品界面的時候不知道如何下手,今天廣州軟件開發公司-畢方信息就為大家匯總了一些企業軟件典型界面及其設計原則,幫助大家從容應對界面設計,不再不知所措。


    Dashboard

    Dashboard 頁通常作為產品的首頁出現,產品內各種重要的數據和信息都會展現在 Dashboard 上。用戶可以通過點擊 Dashboard 上的卡片或卡片上某條數據,快速鏈接到詳情,這大大縮短了用戶獲取信息的路徑。產品團隊也可以通過 Dashboard 頁,向用戶傳遞產品迭代、運營活動等內容。

    1. 設計原則

    模塊獨立

    Dashboard 是由承載不同內容的卡片組成的,每塊卡片的內容都要獨立,不該交叉。

    有效統計

    Dashboard 上所呈現的數據最重要的就是該數據是否為用戶真實所需,如果統計數據不對用戶產生任何價值,那還不如不統計,否則會干擾用戶。

    短路徑導航

    了解用戶需要使用 Dashboard 的核心目標,為用戶通過 Dashboard 達到數據詳情頁提供最短的路徑導航。

    2. 工作臺

    使用場景

    將用戶需要待辦的事項、事項處理的進度等都完整的展示出來,方便用戶隨時查看,提升用戶的工作效率。

    核心功能

    核心統計數據、待辦任務、快捷入口、通知公告等。

    設計建議

    • 展示與使用角色日常工作相關模塊,并且將重要模塊放在首屏。
    • 總模塊數量盡量控制在 59 個。
    • 不同的角色需求不同,應提供基于角色的差異化視圖。

    超全!B端通用界面設計法則全方位科普!

    3. 新手引導

    使用場景

    當新用戶第一次使用產品時,為了減少用戶的困難和快速完成用戶的任務,新手引導頁可以將核心操作鏈路展現給用戶。

    核心功能

    產品介紹、核心功能使用手冊、相關內容指引。

    設計建議

    • 引導步驟盡量控制在 35 步。
    • 引導語盡量簡短并闡明要義。
    • 可以添加視頻學習窗口,幫助用戶快速上手。

    超全!B端通用界面設計法則全方位科普!

    4. 監控頁

    使用場景

    監控頁是數據可視化頁面中的一種,它通過一系列對數據高度概括的圖表來展現系統的核心指標。指標監控頁的使用者通常是管理者(即決策者),他們需要看到系統整體的運行狀態,監控全局數據,從而調整自己的決策。

    核心功能

    關鍵指標統計。

    設計建議

    • 展示決策者關注的核心指標,并將重要模塊靠前展示。
    • 使用合理的圖表展現數據。
    • 圖表配色要符合數據的特性,例如警示用黃色。
    • 允許用戶可以下鉆查看詳情。

    超全!B端通用界面設計法則全方位科普!

    5. 分析頁

    使用場景

    分析頁也是數據可視化頁面中的一種,它通過對系統多維度的詳細分析來展示系統的情況,從而使使用者可以發現問題,并盡早找出解決辦法。監控頁重在總覽,而分析頁重在明細,因此,分析頁的使用者通常是執行者。

    核心功能

    關鍵指標明細分析。

    設計建議

    • 展示執行者關注的明細指標,并將重要模塊靠前展示。
    • 使用合理的圖表展現數據。
    • 明細數據模塊不宜過多,59 個為宜。

    超全!B端通用界面設計法則全方位科普!

    表格頁

    表格頁可以處理大量的數據條目,同時可以導航至對應數據的詳情頁。在表格頁中,用戶可以查詢自己所需要的數據條目,以及對比數據條目、新增數據條目、刪除數據條目等。

    1. 設計原則

    模塊清晰

    表格頁通常由查詢區、按鈕區、表格區、分頁器等模塊組成,要保證模塊間層次合理與清晰。

    數據格式

    表格頁中最大的模塊為表格區,該區域由列組成,列由數據構成,列中的數據格式展現要符合業務及用戶的需求,例如“星期三”不能表現成“星期 3”。

    數據對齊

    對齊方式合理的數據,有利于用戶定位數據、分析數據。通常數據對齊方式為數值右對齊,文本左對齊,特殊情況居中對齊。

    2. 使用場景

    全表格頁是最常見的產品界面,全表格頁主要由篩選條件、按鈕區、表格區、分頁器組成。表格區是表格頁中的主角,當界面數據只需要一張表呈現的時候,使用全表格頁。

    核心功能

    多字段篩選、操作區、表格區、分頁器。

    設計建議

    • 將重要的字段和用戶使用頻率較高的字段放置在表格靠前的位置。
    • 表格中重要的字段和數據保證讓用戶可以看完整。
    • 表格中的時間、狀態、操作欄等,以及其他業務規定的字段,需保持完整展示。
    • 表格上方的篩選條件一次性展示不宜過多,建議 3-8 個左右。

    超全!B端通用界面設計法則全方位科普!

    3. 左樹右表頁

    使用場景

    左樹右表頁的界面布局基本與全表格頁差不多,只不過其多了一顆左側的樹來幫助用戶導航。

    核心功能

    導航樹、多字段篩選、操作區、表格區、分頁器。

    設計建議

    • 導航樹上的文字盡量展示完整,便于用戶定位信息。
    • 導航樹的層級不可太深,控制在 4 層以內。

    超全!B端通用界面設計法則全方位科普!

    4. 上下表格頁

    使用場景

    上下表格頁是表格嵌套表格幻化過來的,通常上表格為主表,下表格為子表,子表展示了主表中某條數據的詳情。

    核心功能

    多字段篩選、操作區、表格區、分頁器。

    設計建議

    • 主表數據對應的子表數據需要符合邏輯且展現清晰。
    • 若主表和子表均數據量大,則需要都加入篩選條件。

    超全!B端通用界面設計法則全方位科普!

    4. 左右表格頁

    使用場景

    左右表格頁與上下表格頁有異曲同工之妙,左右表格頁通常左表為主表,右表為子表。

    核心功能

    多字段篩選、操作區、表格區、分頁器。

    設計建議

    • 由于表格左右布局,表格列不宜過多,盡量不出現滾動條。
    • 左右表格區分要明顯,保證信息正確歸屬。

    超全!B端通用界面設計法則全方位科普!

    6. 折疊表格頁

    使用場景

    折疊表格頁的出現通常是頁面上表格的信息需要分組,每一張表格展現一類信息。

    核心功能

    分組、操作區、表格區、分頁器。

    設計建議

    • 建議加上分組的標題及描述信息。
    • 每個表格為一個模塊,建議模塊可全部展開與全部折疊。

    超全!B端通用界面設計法則全方位科普!

    表單頁

    表單頁是用于信息添加和錄入的頁面類型,用戶根據系統的要求將必填字段信息填寫完成,從而提交給系統,由系統接收并輸出信息。

    1. 設計原則

    控件合理

    通過選擇合理的數據錄入控件,及通過合理的信息組織形式,幫助用戶可以快速完成數據錄入的任務。

    明確好用

    表單頁面中,每個表單項都要做到自身體驗的明確與好用,例如針對一些有通用值的表單項建議設置默認值,針對必填項要明確標明,針對表單項標題、錯誤提示要明確傳達含義。

    清晰反饋

    表單錄入完后,允許用戶進行返回、取消、清空、保存等操作,并且操作后提供明確的反饋,例如保存成功、保存失敗等。

    2. 基礎表單頁

    使用場景

    表單項較少,表單信息直接平展即可,表單錄入任務簡單且快速。

    核心功能

    表單項、填寫說明、操作按鈕區。

    設計建議

    • 表單項盡量單行縱向排列,引導用戶縱向閱讀。
    • 在界面空間有限時,表單項可多個組合在一行中,進行多列排列,建議不超過 3 列。
    • 表單項對齊方式一致,保證用戶視線流舒適,高效完成數據錄入。
    • 表單整體要保持在用戶合理操作范圍,居左或居中。

    超全!B端通用界面設計法則全方位科普!

    3. 高級表單頁

    使用場景

    高級表單頁通常需要用戶填寫大量的信息,這樣大型而復雜的數據錄入任務需要被拆解為多個部分進行。

    核心功能

    分組/卡片分組、表單項、操作按鈕區。

    設計建議

    • 任務的分組需要有層層遞進關系,而不是無序的分組。
    • 如果任務分組過多,最好不要超過 5 組,在 25 組之間較為合適,可以采用錨點定位的方式來幫助用戶定位信息。

    超全!B端通用界面設計法則全方位科普!

    4. 分步驟表單頁

    使用場景

    當表單填寫有相應的步驟順序時,采用分步驟表單較為合適。

    核心功能

    步驟條、表單項、操作按鈕區。

    設計建議

    • 若步驟間有很明確的順序關系,需在相關位置進行明確的提示。
    • 若有些步驟為非必填,建議也做出合理的展現。
    • 步驟不宜過多,在 25 項為宜。

    超全!B端通用界面設計法則全方位科普!

    5. 帶樹表單頁

    使用場景

    當表單塊歸屬不同的分類時,需要使用帶樹表單頁去處理。

    核心功能

    導航樹、表單項、操作按鈕區。

    設計建議

    • 分類超過 10 項,且分類標題內容較長時,建議使用樹導航。
    • 分類帶有層級時,建議使用樹導航。

    超全!B端通用界面設計法則全方位科普!

    詳情頁

    詳情頁的作用是向用戶展示一個對象的完整信息,它的主要作用是幫助用戶信息瀏覽,同時允許對詳情頁整體的數據或某部分數據發起編輯等操作。

    1. 設計原則

    層次分明

    針對信息較少的詳情,平鋪展示即可;針對信息量大的詳情,需進行合理組織,保證層級分明。

    結構相近

    針對詳情信息的模塊化組織,要求盡量模塊的結構相似,減少復雜性,降低用戶的理解成本。

    2. 基礎詳情頁

    使用場景

    基礎詳情頁信息量較少,信息復雜度低,直接平鋪展示即可。

    核心功能

    詳情信息。

    設計建議

    • 建議呈現在一張卡片中,直接通過標題進行區分。
    • 字段與內容要明顯區分,不可糊在一起。

    超全!B端通用界面設計法則全方位科普!

    3. 高級詳情頁

    使用場景

    高級詳情頁需要展示的內容量較大,且復雜度高,需要拆分為多組來幫助用戶瀏覽信息。

    核心功能

    卡片、分組、詳情信息。

    設計建議

    • 分組維度要合理,保證一個維度講一件事情。
    • 若分組模塊大于 5 項,建議使用錨點定位。

    超全!B端通用界面設計法則全方位科普!

    4. 可編輯詳情頁

    使用場景

    詳情頁中有部分字段由于業務需要,會進行修改。

    核心功能

    詳情信息、可編輯信息。

    設計建議

    • 可編輯字段通常有兩種情況,一種為常顯編輯,一種為點擊編輯。用戶對常顯編輯字段操作時,頁面需要對是否編輯過做出適當反饋。
    • 可編輯樣式盡量統一,減輕用戶認知負擔。

    超全!B端通用界面設計法則全方位科普!

    通過上面的示例,如果能做到對企業軟件通用型界面了然于胸,那么在面對用戶需求時才能從容應對,舉一反三。不斷總結和抽象,是我們應對各種需求的不二法寶。

    讓我們協助您將需求落地

    *請填寫需求信息,我們會在24小時內與您取得聯系。

    乐成彩票手机版入口-最新版 满堂彩| 满堂彩| 三分pk10| 九州彩票| 手机彩票| 彩经网| 九州彩票| http://www.jmguangchuan.com http://www.xanaige.cn http://www.marcicmusic.com