- UI交互設計與開發實戰
- 呂云翔 楊婧玥等編著
- 4157字
- 2020-09-18 18:15:22
2.3 界面設計與軟件工程活動
設計活動是基于一定的目的與流程的,它明確設計活動的最終方向,并保證設計活動的正確性和高效率。本節將介紹軟件工程活動過程中,用戶界面設計參與的環節以及在這些環節中用戶界面設計的工作環境如何、要做哪些工作,以及完成這些工作的方法。
2.3.1 需求分析
軟件開發的過程需要有完整、準確、清晰、具體的要求,例如某ERP系統的功能如圖2-9所示。將用戶的原始需求描述整理為需求文檔的過程稱為需求分析。需求分析是軟件工程中的重要工作,一般由專門的需求分析師完成,但用戶很可能在此階段產生模糊的需求,這些需求或多或少會和用戶界面設計師的工作相關,而且進行設計時也需要考慮到用戶已有的操作習慣,因此用戶界面設計可以在此階段關注需求的分析過程。

圖2-9 某ERP系統的功能圖
1.有需求提出方
需求是軟件工程的終極目標,指的是項目的所有者或者使用者對項目所要達到的功能、性能上的要求。一般,需求來自于用戶的自然語言描述,具有不確定、描述模糊和容易改變的特點。因此,需要對需求做進一步的規范,形成需求文檔,一方面幫助用戶確定功能細節,另一方面也便于之后開發人員進行對照和驗證。
2.沒有需求提出方
如果團隊要完成的是向市場投放的產品,那么系統的需求往往需要自己解決,例如從其他軟件中提取或參考市場調研部門的調研報告。要制作出能夠滿足用戶需求的產品,首先設計者自身必須對用戶的潛在需求了解透徹。市場調研部門會通過類似產品功能、目標人群調研和模擬用戶測試等多個途徑嘗試找出可能的需求,并形成需求說明。
3.功能需求
功能需求是指描述用戶希望本系統具有的功能。這反映了用戶的業務流程,以及可能涉及的其他操作。功能需求大部分都需要界面配合,因此是用戶界面設計者應當著重關注的參與過程。需求分析結束后,一般會使用用例規約表來描述系統的功能性需求,如表2-1所示。
表2-1 用例規約表示例

在上表中,“用例名稱”與“用例編號”主要是描述該表在記錄中的代號;“參與角色”是指參與使用這個用例的用戶在系統中扮演何種角色;“前置條件”是指要進行此用例需要符合的條件;“用例說明”是對此用例內容的簡單描述;“基本事件流”描述用戶在進行此用例時所要經過的基本操作步驟;“分支事件流”則是對基本事件流的補充,描述在用戶操作過程中可能發生的分支操作;“異常事件流”是指如果操作中發生錯誤,系統將要如何處理;“后置條件”是指用例結束后對整個系統產生了什么樣的影響,以及系統有何變化等。
4.非功能需求
對于軟件系統來說,非功能性需求是指依據一些條件判斷系統運作情形或其特性,而不是針對系統特定行為的需求,包括安全性、可靠性、可操作性、健壯性、易使用性、可維護性、可移植性、可重用性和可擴充性。對于用戶界面設計人員來說,可操作性和易使用性是主要關注的非功能需求。這些非功能需求的保障是通過界面設計和交互設計共同完成的,也影響到用戶使用產品時的體驗。
軟件需求的獲取是一門專業的工作。在軟件工程的工作中,這項工作關系著系統的最終成果能否達到用戶的心理預期。有關軟件的用戶需求部分,有興趣的讀者可參閱軟件工程類的相關書籍。
2.3.2 原型設計
為了幫助用戶更好地描述系統的需求,也為了用戶界面設計師和用戶溝通的準確性,需求分析階段常常需要使用原型。原型可以概括整個產品面市之前的框架設計,它注重于向用戶展示系統所要執行的某一個方面,例如基本交互邏輯、界面布局、跳轉邏輯、美術樣式等。通過原型,用戶可以了解到整個系統如何使用,而用戶界面設計師也可以與用戶討論細節上的需求。
在原型階段,用戶界面設計需要將重心放在想表達的重點上,而暫時忽略其他方面的設計。
原型可以用多種形式表現,如草圖、界面設計稿、原型交互等。
原型的概念最早產生于工業生產,是指在新產品研制過程中按設計圖樣制造的第一批供驗證設計正確性的機械。常見行業有飛機、電腦、車床等,都會采用原型機驗證。在一定經濟范圍內,原型機的制造往往不計成本,優先使用最好的材料。
1.功能布局
功能布局是指為了體現產品功能而劃分的布局,旨在表達產品的功能分布、使用邏輯與基本區域。因此功能布局并不拘泥于外觀美的束縛,只要能將設計者的意圖傳達即可。在本階段,首先可以按照常見的布局結構,例如邊欄式、分頁式等,來構建系統的整體結構,之后將大致的功能區填入布局的各個部分。
由于界面設計通常是很難一蹴而就的,因此在界面設計初期,往往會產生多個可行的備選方案。之后,需要通過布局復雜度和布局統一度等度量標準來衡量這些備選方案的優劣,確定最終的布局樣式。
在這個階段,可以借助布局草圖以及界面跳轉圖來幫助我們表達,如圖2-10所示。布局草圖需要畫出界面大致的功能分區,以及各個分區的主要功能或內部布局。而界面跳轉圖需要標識各個界面之間的切換是通過怎樣的操作來完成的,以及它們的順序如何等。

圖2-10 設計草圖
2.交互目標
如果用戶要使用系統來完成業務流程,那么這個系統必須要貼合我們的目標用戶。因此,在進行交互設計時需要考慮我們的交互設計需要達到何種目標。
3.用戶體驗目標
用戶常用的功能需要最快被找到,常用的流程應該做好優化處理,要決定重大事項時理應收到警告和防錯處理,這些在使用產品過程中得到的感受會組合成用戶整體的使用體驗。對用戶體驗的要求往往會因為用戶的年齡、教育程度、使用習慣等諸多因素而產生變化,因此用戶體驗目標必須注重目標人群的特定需求。例如,對于經常使用計算機辦公的辦公室白領,他們可能熱衷于使用大量的快捷按鍵來高效完成任務;若是提供給中年或者老年人群,他們甚至不想去閱讀使用說明書。
為了明確用戶體驗目標,需要確定目標人群,并對目標人群的使用習慣做調研。明確交互的用戶體驗目標,對之后進行交互設計具有非常重要的意義。
4.功能設計
在獲得了詳細而準確的需求說明之后,便可開始功能設計的工作了。在本階段,用戶界面設計師需要參與到流程設計與交互設計的環節中,通過設計系統的操作流程與交互細節,讓軟件開發工程師能以詳細的說明文檔為指導進行貼合需求的開發工作,并為測試驗收環節做好準備。
5.流程設計
流程設計是指設計產品的使用流程,既包括整體完成一件大型工作的步驟(工作流),又包括執行每個獨立功能所要經過的操作。流程是把輸入轉化成用戶價值相關的一系列活動。也就是說,用戶通過向系統中輸入,經過流程轉化成對用戶有價值的操作或者信息。好的流程能用盡量少的步驟為用戶創造盡量多的有用信息和有價值操作。因此流程設計對系統整體的使用體驗非常重要。要實現好的流程設計,設計者需要明確流程中最為關鍵的那些決策點,明確參與整個流程的角色,實現流程的可視化等。
6.交互細節設計
交互細節設計是指基于設計好的流程,根據目標用戶人群的交互目標,對操作流程進行部分優化與細節設定的工作。這些工作雖然不直接創造價值,但是往往能避免用戶受到巨大損失。例如,在可能產生重大影響的操作項前著重提醒,讓這些事項具有可挽回的措施等。
2.3.3 外觀設計
外觀設計是指對產品的視覺表現進行設計,主要考慮的是產品的美學特性以及用戶使用的舒適性。外觀設計在功能布局與交互模型的基礎上進行最終產品的視覺定義,在良好的內容包裝上進行最恰當的外觀展示,吸引用戶使用。
1.樣式設計
樣式設計是指對整體界面的風格和形狀進行設計和搭配。一般來說,一套和諧而富有變化的整體樣式需要一個“主旋律”來保持統一感,而不同組件和界面的變化往往起著發揮圖形暗示功能的作用。
2.配色方案
配色方案是指一整套具有統一風格和多種暗示效能的顏色組合。設計者在選取一套配色方案時,主體顏色用以適配目標用戶的心理喜好,而不同的輔助顏色用于在整體風格中提醒用戶不同的功能。例如,較為醒目的顏色用于標識錯誤,對比度較淺、灰度較大的顏色標識不可用等。
配色方案需要選定一個主色調,然后將其衍生出來的其他顏色作為一種用途標示出來,配色方案可以按照功能來表示,也可以按照情景來表示。圖2-11為一組輕快明朗的配色。

圖2-11 一組輕快明朗的配色
2.3.4 圖形界面測試
除了原型設計、功能設計和界面設計,用戶界面設計人員還能進行一項專門針對圖形界面的測試工作,即圖形界面測試。用戶界面從命令行演化到圖形界面,除了易用性大大增加了之外,操作的自由度也極大地增加了。而軟件的使用是十分依賴正確的操作流程的,因此進行圖形界面測試,尋找所有可能出現的異常情況,對保證軟件的正常使用是十分重要的。
圖形界面測試越早測試越好。由于圖形界面的設計與實現參與到軟件的各個層面中,因此在各個階段都要首先設計好針對當前階段的測試方法和測試用例。可以按照如下思路設計圖形界面測試用例。
1.對界面元素分組分層
對界面元素進行分組,讓從屬于同一功能的元素在同一組中,有助于功能測試時確定測試對象。對界面元素進行分層,有助于區分不同類型的測試方法。一般可以將界面元素分成三層:第一層為界面原子,即界面上不可再分割的單元,如按鈕、圖標等;第二層為界面元素的組合,如工具欄、表格等;第三層為完整的窗口。
2.確定當前層次的測試策略
對于不同的層次和粒度,測試的策略是不同的,需要根據當前層的特點來設計。例如,在上述的三層結構中,對界面原子層主要考慮該界面原子的顯示屬性、觸發機制、功能行為和可能狀態集等內容;對界面元素組合層,主要考慮界面原子的組合順序、排列組合、整體外觀和組合后的功能行為等;對完整窗口,主要考慮窗口的整體外觀、窗口元素排列組合、窗口屬性值和窗口的可能操作路徑等。
3.進行數據分析,提取測試用例
確定了當前層級的測試策略之后,需要分析當前層級的數據,以設計測試用例。測試用例用于評價界面設計與實現的完成度,因此需要提取用于評判的指標。對于元素外觀,可以參考的指標有元素大小、形狀和顏色飽和度等;對于布局方式,可以參考的指標有元素坐標、對齊方式和間隔等。通過提取這些指標,測試用例才具有明確的可評價性。
4.設計測試方法
提取好測試用例后,便可以開始設計測試。為了結果方便評判,需要對測試結果進行一定的處理。常用的設計方式有等價類劃分、邊界值分析等。這些方法能在一定程度上保證測試的完備性。
等價類劃分是用于解決選擇合適的數據子集以覆蓋整個數據集的問題,其核心要求是覆蓋所有原始情況,追求目標是盡量少的子集數目,應用到測試領域,可以在保證測試完整性的情況下減少測試的工作量。