界面設計方法(1):界面的概念與分類

2021-01-19 人人都是產品經理

編輯導語:對於很多軟體工程師來說,工作內容都與界面設計有很大的關聯。而界面設計的本質又是業務功能的設計,基於此,作者在本篇文章中,從數據分類、業務功能分類以及界面分類這三個方面,為我們詳細地說明了界面設計方法,希望能夠對你有所幫助。

在ERP類等企業管理類系統開發過程中,毫無疑問,對用戶「界面」設計的工作量是最大的,界面是系統中支持用戶輸入、查看數據的業務功能,它們是用戶現實工作在系統中的映射,是人機互動的窗口。

對軟體工程師來說,界面不僅是系統的臉面,而且最終用戶體驗到信息化價值的大小也主要是由界面提供的。按照系統中的用途可將業務功能分為4大類:活動功能、字典功能、看板功能和表單功能。

根據這些功能的共性和個性建立相應的界面模型和設計方法,可以大幅度地提升界面設計的效率和效果。

界面的表達形式可以分為2大類,窗體形式、列印形式:

窗體形式:這個形式支持用窗體形式的數據輸入、查看等,包括了業務功能中3種:活動功能、字典功能和看板功能,如圖1(a)~(c);列印形式:這個形式支持列印形式的數據輸出,如圖1(d)。

圖1 業務功能與對應的界面形式

界面設計的本質是業務功能的設計,而業務功能的分類是基於該功能處理的數據類型而定的,因此下面按照「數據分類→業務功能分類→界面分類」的順序進行說明界面設計方法。

一、數據的分類

首先來看一下數據的分類方法。在構建企業的信息系統時,可以按數據的用途和產生數據的階段劃分為三個區,即:數據的生成區、數據的加工區和數據的應用區,如圖2所示。

圖2 數據的三個分區

1. 數據生成區:過程數據與基礎數據

數據生成區,是將原始數據輸入到系統中的區域,在這個區域產生的數據根據其用途可以分為二類,一類是「過程類數據」、另一類為「基礎類數據」。

1)過程數據

在企業活動過程中第一次產生的、沒有經過任何加工的數據就稱之為過程數據(即原始數據),「過程」指企業各類工作的過程。

軟體的功能設計工作大部分都集中在這個區,比如:架構設計、功能設計、數據設計等,通常所說的「業務數據」的絕大部分產生於此區域,比如:銷售數據、生產數據、財務數據、物流數據、人資數據等。

2)基礎數據

企業中需要規範化並作為企業標準的數據,稱之為企業的基礎數據,比如:員工信息、客戶信息、材料編號、市場價格、組織結構等,基礎數據是由相關部門按照企業規則預先編制好的。

基礎數據約束了過程數據的輸入範圍、標準、以及為過程數據提供了屬性定義。編制基礎數據,是客戶方面推進信息化建設必須做的重要工作,基礎數據也是未來構建系統主數據的核心內容。

註:基礎數據,是企業進行信息化建設中最重要的標準化對象之一(其它例:業務流程標準化)。

3)基礎數據與過程數據

兩者的轉換關係:在用界面進行過程數據的輸入時,基礎數據可以用選擇框的形式作為界面上某個欄位的選擇對象,基礎數據一旦被選擇輸入後,就成為了過程數據。不同的維護原則:基礎數據:需要不斷的進行維護,保持基礎數據在時間變化後也能夠符合要求;過程數據:一旦確定不能修改,特別是財務等數據受法律保護,後期修改可能是違法的。

2. 數據加工區:加工數據

對收集到的過程數據,按照不同目的加工(抽取、轉換、清洗…),是對過程數據進行加工的區域,經過加工完成的數據稱之為「加工數據」(已經不是原始數據了),它們被按照用戶的關心維度、分析報表的種類預先分類存儲,以供各類查詢、統計之用。

3. 數據應用區

利用加工數據,可以方便用戶利用單據、報表以及各類靜態、動態的方式進行查詢、展示、分析。比如常見的加工數據有:銷售分析、產值分析、成本分析、績效分析、財務月報表等。

二、業務功能的分類

有了三種數據的用途分類後,按照對不同數據處理的分工可以將業務功能劃分為4大種類,即:活動功能、字典功能、看板功能和表單功能。下面分別對這4種功能進行說明,參見圖3。

圖3 業務功能與數據分類的對應關係

1. 活動功能(以下簡稱:活動)

活動,是指專門利用「窗體」形式來記錄、展示在過程數據的功能,所有過程數據都是通過活動功能輸入的。

之所以將這類功能稱之為「活動」,就是因為它們是企業中實際工作在系統中的映射;同時企業的管理規則也是主要加載在活動功能上的(提示、預警、終止等),活動是4類功能中數量最多、使用最廣的一種。

活動產生過程數據,在輸入數據時會使用基礎數據輔助提升輸入效率,參見圖3①。

註:繪製業務流程時,流程上的節點必須是活動功能,因為只有活動才能驅動流程的運轉。

2. 字典功能(以下簡稱:字典)

字典,是專門利用「窗體」的形式來維護需要標準化的企業基礎數據。作為對基礎數據進行維護的功能,它包含了對數據的:記錄、展示、更新、發布的功能,由於字典是用來規範企業標準的工具,因此字典只能由特定的管理人員使用。

字典對應的是數據分類中的「基礎數據」,字典功能的來源大都是軟體工程師通過系統規劃設計獲得的(而不是由用戶提出的)。

字典產生基礎數據,參見圖3②。

註:業務流程是產生價值工作的串聯,因為字典只是用來維護基礎數據的,不是用來產生價值的工作,所以字典是不能成為業務流程上的節點(對比活動功能)。

3. 看板功能(以下簡稱:看板)

看板,是專門利用「窗體」的形式來展示經過加工處理後的數據的,它是用來展示看數據的,它不用於數據的輸入,它可以利用窗體所具有的各種靈活多變的查詢和展示形式(圖形曲線、數據穿透等),看板通常用於門戶、監控臺、儀錶盤、導航等的形式來展示信息。

看板可以用來展示過程、基礎和加工三類數據,參見圖3。

4. 表單功能(以下簡稱:表單)

表單,是專門採用「列印」的形式來展示數據的,適用於各類需要列印、蓋章、並以紙質的形式保存的場景,其中,「表」指的是各類統計和分析的「報表」;「單」指的是各類憑證形式的單據,比如:

報表:產值分析、成本分析、績效分析、財務報表等數據;單據:發票、收據、領料單、合同書、各類財務憑證等數據。表單可以用來展示過程、基礎和加工三類數據,參見圖3。

三、功能分類的作用

1. 確定架構規劃的關注順序

有了業務功能分類的概念之後,軟體工程師在進行需求獲取、需求分析以及系統架構時就知道了對功能關注的順序:

由於活動、字典等是產生數據的功能,在架構、規劃時重點要先關注這些功能,比如:活動是構成業務流程的要素,需要重點關注並先行確定,否則業務流程設計時就沒有節點了;與前述兩個功能相比,看板功能和表單功能就可以稍微滯後,因為這兩者不直接產生過程數據和基礎數據,它們以「看數據」為主,它們需要的只是對過程數據和基礎數據的加工而成的加工數據,而且看板和表單會隨著客戶對信息系統的理解加深,會發生新的需求變化,所以放到後面再設計反而會穩妥一些。

2. 提升對產品、項目研發的管理效率

對業務功能進行分類對理解設計方法有很大的幫助,主要作用(不限於此):

建模方法:分類給出了不同類型的設計規律、大幅度地減少了模型的數量;確定工作量:由於4種功能的特點不同,可以定性、定量地確定開發工作量、時間;設計順序:如前所述,活動、字典先設計、看板和表單可以滯後;設計能力匹配:由於4類功能的難易度不同,分配設計資源時有依據,比如:字典/基礎數據部分比較難,可以讓能力較強的設計師承擔等等。

四、界面的分類

界面的設計分為:窗口形式與表達形式。它們的用途、建模形式、設計方法以及後續的開發方法都不相同,參見圖4。

圖4 界面形式

以上,對業務數據(3種)、業務功能(4種)和界面(2種)的分類進行了說明,通過這樣的歸集有助於幫助軟體工程師們建立體系化、工程化的設計模型、方法、標準等,可以幫助提升軟體設計的效率和效果,也有益於設計階段成果的復用、分享。

當然分類方法不是絕對的,隨著新需求、新技術的不斷出現,劃分方法也會發生變化,參考上述劃分的思想、方法,根據實際情況建立更加合適不同行業的分類方法也是完全必要的。

註:業務功能與系統功能

這裡,沒有提「查詢」、「提示」、「上傳」等功能,因為它們更多地是屬於系統操作的輔助功能,沒有「業務」功能的作用,所以不在這裡提及。

本系列的下一篇:界面設計方法(2):活動功能的設計方法,界面設計的詳細說明請參考《大話軟體工程—需求分析與軟體設計》一書。

本文由 @李鴻君 原創發布於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議

相關焦點

  • 界面設計方法(9):界面設計的原則與標準
    因此就有必要對界面的布置進行統一的標準化,建立了界面布置的標準後設計效率會提升、同時也為界面設計資料的復用奠定了基礎。界面設計的標準化非常重要,因為界面是用戶認知系統的窗口,這個標準實際上是構建「人-機-人」工作環境的標準之一,標準化的界面形式也可以減少用戶的認知負擔和培訓成本。
  • 手機APP界面設計策略!
    在手機界面設計中,圖標被廣泛地運用,它可以單獨存在顯示信息,但是因為它對信息進行高度的濃縮,而對於用戶來說卻是負擔,所以它時常與文字進行配合使用。②文字元素。在手機界面設計中,文字是不可或缺的,但是它也不是通篇存在的,有時它會與圖標搭配使用,使用戶對圖標的含義有更加清晰地認識,有時它會單獨使用來顯示信息。③色彩元素。
  • Android 12概念版:採用全新擬態化設計,多任務界面更人性化
    但是,也有人似乎已經對Android 11失去了新鮮感,把目光投向了下一版本的Android,按照自己的想法設計了Android 12,並製作出了概念視頻。雖說是概念,但在界面設計和功能設計上也有一定的可取之處,下面我們一起來看看吧。
  • 如何設計出極簡主義風格的APP界面?
    在APP的產品設計上,極簡併不是盲目追求形式上的簡單,而是複雜的升華,是充滿人情味的精簡設計。本文重點介紹了幾種極簡主義風格APP的界面設計方法。極簡主義在產品設計上的萌芽和發展,並非源自審美上的需求或風潮。在上世紀初期,隨著工業製造體系的變革,以包浩斯為代表的眾多機構、公司和設計師開始在全新的製造體系中,尋找更適合工業化生產的設計方法與審美體系。在今天,極簡主義早已演變成了一種潮流、一種文化、一種生活方式、一種價值觀,被應用在各行各業的方方面面。
  • APP界面的扁平化設計!
    良好的隱喻性使得智慧型手機圖形界面在設計中得以簡化一些流程,使其具有易於識別、易於記憶、易於跨文化理解、易於提升程序的運行效率等作用。②方便用戶使用。扁平化視覺設計以方便客戶為主,設計時採用高強度的對比度方法與加大選項顏色或者字體的方法,給用戶更好的視覺體驗。③符合用戶的心理需求。
  • UI界面設計中的極簡原則
    人機交流正在不同程度取代著人與人的交流,而界面正是構建人機交流的橋梁,是一種使用產品來完成任務的方式。作為引導用戶快速正確使用產品的主要「面孔」,界面的設計如何高效準確地滿足大眾用戶的需求是我們研究的主要問題。以下是極簡主義APP界面設計的原則。
  • 《lol》美服界面怎麼設置中文 美服界面設置中文方法分享
    導 讀 lol美服界面設置中文?
  • 擁抱手勢驅動的界面設計 | 網際網路數據資訊網-199IT | 中文網際網路...
    也許它們的界面看起來非常的極端,並且聚焦在概念超前的用戶或者探索者身上,它們還是為大家展現了手勢驅動的界面設計的無限創新潛力。下圖就是兩個基於下拉操作的界面設計。Brichter在iPhone版Tweetie裡的下拉刷新設計,為基於列表內容呈現的應用創造了一種手勢操作而拋棄了原來的刷新按鈕,直觀便捷地解決了刷新的需求。去除UI帶來的幹擾一個開始設計手勢驅動界面的好方法就是將你的主要屏幕只用來作為核心內容的呈現區。不用覺得有義務要得把重要的導航元素在主屏幕上一直呈現。
  • 用PS製作手機UI界面設計
    本例是為智慧型手機設計個人首頁界面設計,首先明確整個設計風格以簡潔為主,結構一目了然,在色彩運用上運用清爽的對比色系,給人視覺上帶來舒適的效果。(1)按Ctrl+N組合鍵新建一個600×1077像素的文檔,然後執行「視圖>標尺」命令,在顯示的標尺區域拉出參考線,效果如圖所示。
  • APP界面的字體規範!
    文字設計是界面設計中最細節的部分,也是最不可忽視的基礎部分。在界面設計過程中要考慮兩大因素:文字辨識度和界面的易讀性。在任何一個有效的界面裡,具有層次的設計可以將界面上重要的部分與次要的部分區分開來,可以從對齊、間距、顏色、縮進和字體等方面做文章。當所有這些都調整運用得適當時,可以提高整個界面的可讀性。很多剛做APP界面的設計師,經常會因為字號、字體顏色、間距而困擾。
  • 「跨平臺」靈感:用戶受 Android 啟發重新設計 Win10 電池彈出界面
    IT之家1月9日消息 據外媒報導,微軟重新設計了Windows 10電池彈出界面:用戶單擊系統任務欄中的電池圖標即可在電池彈出界面中查看當前電池電量,調整電池電源模式,查看是否已連接插座,然後單擊「電池設置」進一步調整與電池相關的功能和參數的快捷方式。
  • app界面設計的流行趨勢
    app界面設計的流行趨勢,界面作為我們認識app的第一道門檻,是app的「面子」,更是不可忽視的一項重點設計,為了建立有效的ui,設計師需要根據移動端app本身的特性和當下趨勢,作出不一樣的改變。但當今設計趨勢瞬息萬變,在沒有統一標準的設計規則之下,緊跟設計趨勢,才能保證ui對用戶的吸引力常在。一、首頁作為設計師,一定要做到多看多用才能夠找到更適合產品本身的展示方式。下面介紹一下首頁最常見的4種表現形式,分別是列表型首頁、圖標型首頁、卡片型首頁和綜合性首頁,不同類型的首頁布局承載著不同的內涵。
  • 受Android啟發 用戶重新設計Windows 10電池彈出式界面
    微軟已經重新設計了Windows 10電池彈出式界面。因此用戶單擊系統託盤當中的電池圖標,可以在電池彈出式界面當中查看當前電池電量,調整電池的電源模式,查看是否已經接入插座,另外可以點擊「電池設置」快捷方式,進一步調整電池相關功能和參數。
  • LOL手遊充值界面空白 充值界面打不開解決方法
    英雄聯盟手遊已經搶先登陸日韓等海外地區,一些小夥伴在體驗的過程中,遇到了LOL手遊充值界面空白、打不開的問題,這究竟是怎麼回事呢,我們在玩海外服的時候應該怎麼充值呢,接下來就給大家介紹一下充值界面打不開的具體解決方法。
  • APP界面中的「圖形創意」!
    圖形創意通過界面傳達信息的精準和可信,提升APP界面的視覺感染力和服務效能,促使產品有自我營銷的的功能。APP圖標分為系統圖標和功能圖標,系統圖標為移動端在應用商店中下載後所點擊的應用程式圖標,功能圖標也稱工具欄圖標,為完成某一目標任務而進入APP應用程式所點擊的功能性圖形,用來達成人機互動任務。
  • 界面布局思路!格式塔理論
    文/楊潔 格式塔理論的完形傾向原則和五個視知覺原則,能非常有效地指導APP界面布局設計中的信息視覺層級設計,幫助設計師有的放矢地對界面信息視覺結構進行組織、簡化和協調統一,設計出易學易操作的用戶界面。移動終端的界面最終是以視覺的形式呈現,但又不僅僅局限於視覺形式的審美表達,還包括設計師對用戶行為習慣、認知特點的順應。
  • 《絕地求生大逃殺》界面翻譯怎麼設置中文界面
    《絕地求生大逃殺》可以說是目前在Steam上最火的一款遊戲了,它玩法和《H1Z1》很像,但是有不少玩家第一次進入遊戲的時候被全是英文界面所嚇到,那麼要如何改為中文界面呢?接下來,小編就為大家帶來絕地求生大逃殺中文界面設置方法,趕快來看看吧。
  • 犯罪大師crimaster卡在登錄界面怎麼辦-卡在登錄界面解決方法介紹
    犯罪大師crimaster卡在登錄界面怎麼辦,相信不少玩家都有這樣的疑問,今天小編就為大家帶來犯罪大師crimaster卡在登錄界面解決方法介紹,希望可以幫到玩家。
  • 《英雄聯盟手遊》界面一直轉圈怎麼解決 界面一直轉圈解決方法
    很多小夥伴在體驗時,發現一直卡在加載界面轉圈就是進不去,想知道怎麼才能解決,那麼接下來小編為大家帶來英雄聯盟手遊一直轉圈解決方法,一起來看看吧。 ... 各位小夥伴們大家好,英雄聯盟手遊遊戲中一直轉圈怎麼辦?
  • 版式在移動界面中的應用
    一.前言隨著信息和技術的發展,手機屏幕越來越大,界面開始承載越來越多的信息,繁複的界面裝飾細節,讓界面顯得越發臃腫,人們開始更多的關注界面的內容和功能,信息框架呈現出扁平化的趨勢,在設計風格上,設計師們也不再追求3d、擬物化的設計,