界面設(shè)計方法(7):界面的布局
編輯導語:在軟件設(shè)計中,界面布局設(shè)計也是很重要的一項,不同類型的平臺在界面布局上也有很大的不一樣;本文是筆者的系列文章之界面布局,詳細介紹了在界面設(shè)計中布局的重要性以及方法,我們一起來學習一下。
為了滿足客戶的需求,軟件界面的表達形式千差萬別;但與網(wǎng)站的界面形式(電子商務(wù)、政府政務(wù)、各類網(wǎng)站等)相比,作為企業(yè)管理(ERP)類系統(tǒng)的界面形式比較低調(diào);由于需要長時間對著屏幕操作、觀看、思考,因此要設(shè)計得比較沉穩(wěn)、簡潔,布局的規(guī)律性強,表達形式也不需要過于炫耀、跳躍、刺激。
這里介紹幾種最為常見和常用的PC端界面形式:卡片式、列表式、主細表式、樹形式和頁簽式,以及這些界面形式對應(yīng)的設(shè)計原則;這幾種形式基本上可以滿足大部分客戶業(yè)務(wù)處理的需求,如有不同之處,本文中的設(shè)計原則也可以作為參考之用。
前面介紹了界面、控件(菜單、工具欄、按鈕、字段框等)的概念,界面布局是界面設(shè)計的重要工作之一,布局就是在規(guī)定的界面范圍內(nèi)考慮如何布置這些控件可以獲得最佳的效果(易觀看、易輸入、易查閱等操作)。
一、 界面區(qū)域的劃分
在電腦屏幕上做界面的設(shè)計時,為了溝通和理解的方便,同時也是為了使設(shè)計結(jié)果符合人體工程學的基本要求,對界面的定位坐標和區(qū)域劃分做出如下的約定(這個約定與技術(shù)設(shè)計和編碼開發(fā)的約定是一致的),參見圖1。
圖1 界面區(qū)域劃分的基本原則
1)坐標原點的設(shè)定
通常會將電腦屏幕的左上角定為坐標原點(XY軸的交叉點0),因此,界面的內(nèi)容擴展或是面積增大時都是由左向右、由上向下進行延伸。
2)區(qū)域的劃分
根據(jù)配置控件的使用目的不同,將界面分成兩個大的區(qū)域:功能區(qū)域和作業(yè)區(qū)域。
- 功能區(qū)域:通常放在界面的四周,主要布置導航欄、工具欄、主菜單等。
- 作業(yè)區(qū)域:通常放在界面的中間部分,或是偏右下方的區(qū)域,這個區(qū)域是業(yè)務(wù)數(shù)據(jù)處理的核心區(qū)域,主要用來布置各類數(shù)據(jù)顯示的窗口、字段框等。
二、 功能區(qū)域的規(guī)劃
除去業(yè)務(wù)字段控件布置的區(qū)域以外都是功能區(qū)域,功能區(qū)域的設(shè)計要點參見圖2:
圖2 功能區(qū)域的設(shè)計原則
1)導航欄區(qū)域
導航欄區(qū)域,通??梢苑謩e在欄的左右兩側(cè)顯示兩類信息(不限于此),比如:
- 左端:顯示本界面/本組件的打開路徑,系統(tǒng)名稱>子系統(tǒng)名稱>模塊名稱>本組件名稱。
- 右端:顯示本組件的用戶所屬的部門、姓名、登錄日期等信息。
2)工具欄區(qū)域(上)— 基本操作按鈕區(qū)
這個區(qū)域用來布置基本操作按鈕,一般放在導航欄與作業(yè)區(qū)域之間;所謂的基本操作按鈕,指的是用來對本界面上屬于主表區(qū)內(nèi)數(shù)據(jù)進行操作的功能,對于細表區(qū)內(nèi)數(shù)據(jù)的操作按鈕通常布置在距離細表區(qū)的最近處(上邊或是下邊)。
工具欄的左右兩側(cè)是最為容易查找的位置,所以要將使用最為頻繁的、重要的功能按鈕布置在兩側(cè),其余的布置在中間,布置在兩側(cè)的按鈕遵循如下的原則:左端布置本界面處理開始的功能(入口)、右端布置本界面處理完成的功能(出口)。
布置參考如下:
- ①左端:布置打開窗口后首先要操作的按鈕,比如:查詢、新增等;通常基本功能區(qū)左邊的第一個位置為“業(yè)務(wù)編號”,它是用于輸入查詢的數(shù)據(jù)“主鍵”;
- ②右端:布置本界面關(guān)閉前需要操作的按鈕,比如:保存、提交、關(guān)閉等;
- ③中間:布置其它的通用按鈕、或是個性化的功能按鈕;
3)工具欄區(qū)域(下)— 它窗體調(diào)用按鈕區(qū)
當界面的上端工具的按鈕過多不好安排時,可以將一部分按鈕安排在界面的下端,比如:主要用來調(diào)用其它組件、功能的按鈕,布置的原則如下(僅供參考):
- ④子窗體按鈕:布置在作業(yè)區(qū)域的左下端,設(shè)置用來打開本組件附屬子窗體的按鈕,比如:詳細計算用的窗體、上傳資料用的窗體等;
- ⑤公用窗體按鈕:布置在作業(yè)區(qū)域的右下端,設(shè)置用來調(diào)用外部組件窗體的按鈕,比如:與本組件業(yè)務(wù)有相關(guān)關(guān)系的組件、企業(yè)知識庫、參考模板等;
4)菜單欄區(qū)域⑥
通常設(shè)置在界面的最左側(cè),所謂的“菜單”就是一個樹形結(jié)構(gòu)體,結(jié)構(gòu)的節(jié)點上是按照父子的關(guān)系布置了以下要素的名稱:系統(tǒng)、子系統(tǒng)、模塊和組件,通過菜單欄內(nèi)可以找到系統(tǒng)中所有的功能,菜單的結(jié)構(gòu)關(guān)系是參考下面的兩個架構(gòu)圖設(shè)計而成的。
注:這個菜單指的是系統(tǒng)整體的功能菜單,不是某個業(yè)務(wù)功能內(nèi)的數(shù)據(jù)結(jié)構(gòu),如果是后者,則包含在業(yè)務(wù)區(qū)域內(nèi),在此不顯示。
5)作業(yè)區(qū)域的規(guī)劃
作業(yè)區(qū)域是布置業(yè)務(wù)功能設(shè)計成果的位置,一般將作業(yè)區(qū)域劃分為主次區(qū)域,參見圖1。
- 主要區(qū)域:界面的左上角為“主”,重要信息在此顯示,如:業(yè)務(wù)編號、客戶名稱、合同總金額、工程期日等;
- 次要區(qū)域:界面的右下角為“次”,次要的或是輔助類信息在此顯示,如:備注信息、來自于其它組件的參考信息等;
設(shè)計時要注意功能區(qū)域與作業(yè)區(qū)域面積的比例關(guān)系,作業(yè)區(qū)域面積占全屏幕總面積的比例越大,一次顯示的信息量就越多,用戶的體驗就越好,反之就會比較差,如圖3所示。
圖3 功能區(qū)域作業(yè)區(qū)域的比例
比如:缺乏經(jīng)驗的設(shè)計師會將屏幕的30~50%用于功能區(qū)域的布置(菜單、工具欄等),由于作業(yè)界區(qū)域小,所以用戶的操作體驗非常差;因此,為了擴大作業(yè)區(qū)域的有效面積可以采用收起菜單欄和工具欄的方法。
但當一次要顯示的內(nèi)容非常多的時候,最好還是另外彈出一個專用的子窗口,將主窗體的部分處理內(nèi)容用專用的窗體顯示為好,這樣操作面積增大,用戶體驗就會相應(yīng)地變好了。
另外,比例上雖然沒有大問題,但是作業(yè)區(qū)域內(nèi)顯示的細表行數(shù)太少,也不利于用戶的輸入、查看,此時最好將作業(yè)區(qū)域的內(nèi)容放到一個單獨地界面上去顯示為佳。
三、 作業(yè)區(qū)的分類(原型形式分類)
1)原型形式
作業(yè)區(qū)域的范圍內(nèi)就是通常所說的“界面原型”,這個原型常見的形式有5種:卡片式、列表式、主細表式、樹表式和頁簽式,參見圖4(各個界面形式的設(shè)計原則參見下一節(jié)“界面原型的設(shè)計”)。
圖4 界面原型的形式分類
2)原型形式的選擇
不同的數(shù)據(jù)結(jié)構(gòu)需要采用不同界面形式,采用哪種形式最佳由設(shè)計師參考業(yè)務(wù)內(nèi)容、以及未來的應(yīng)用方法(實際系統(tǒng)的界面)綜合考慮決定;收集到原始實體表單與業(yè)務(wù)原型的界面可以不是一一對應(yīng)的關(guān)系;比如:根據(jù)客戶提供的“采購合同”原始表單,界面原型的設(shè)計可有兩種表達形式,選取那種形式合適取決于用戶與業(yè)務(wù)設(shè)計師的溝通,參見圖5。
圖5 原型的選擇方法示意
- 設(shè)計方式一:如果表單的數(shù)據(jù)較少,則可以將主表和細表合為一體,見圖5(b),此時界面原型與原始表單的形式基本上是一致的;
- 設(shè)計方式二:如果表單的數(shù)據(jù)較多,則可以將主表與細表分為兩張,見圖5(c),界面1用來表達原始表單的主表數(shù)據(jù)部分、界面2用來表達原始表單的細表數(shù)據(jù)部分。
在實際的界面設(shè)計時有幾點設(shè)計原則要注意:
- 盡量不要采用切換的方式,在一個界面上布置復(fù)數(shù)不同表單的數(shù)據(jù)輸入,這樣界面的邏輯非常復(fù)雜,不利于后面對界面的維護;
- 在不影響用戶的工作分配情況下,盡量采用將復(fù)雜的原始表單拆開,用幾個相對簡單的界面來支持數(shù)據(jù)的輸入,然后用看板、表單等功能將這些數(shù)據(jù)組合起來。這樣的設(shè)計有利于日后的界面維護。
本系列下一篇:界面設(shè)計方法(8):卡式、列表、主細表、樹表和頁簽
本文由 @李鴻君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自?Unsplash,基于 CC0 協(xié)議
- 目前還沒評論,等你發(fā)揮!