国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導(dǎo)語(yǔ)：在軟件設(shè)計(jì)中，界面布局設(shè)計(jì)也是很重要的一項(xiàng)，不同類型的平臺(tái)在界面布局上也有很大的不一樣；本文是筆者的系列文章之界面布局，詳細(xì)介紹了在界面設(shè)計(jì)中布局的重要性以及方法，我們一起來(lái)學(xué)習(xí)一下。

為了滿足客戶的需求，軟件界面的表達(dá)形式千差萬(wàn)別；但與網(wǎng)站的界面形式（電子商務(wù)、政府政務(wù)、各類網(wǎng)站等）相比，作為企業(yè)管理（ERP）類系統(tǒng)的界面形式比較低調(diào)；由于需要長(zhǎng)時(shí)間對(duì)著屏幕操作、觀看、思考，因此要設(shè)計(jì)得比較沉穩(wěn)、簡(jiǎn)潔，布局的規(guī)律性強(qiáng)，表達(dá)形式也不需要過(guò)于炫耀、跳躍、刺激。

這里介紹幾種最為常見(jiàn)和常用的PC端界面形式：卡片式、列表式、主細(xì)表式、樹(shù)形式和頁(yè)簽式，以及這些界面形式對(duì)應(yīng)的設(shè)計(jì)原則；這幾種形式基本上可以滿足大部分客戶業(yè)務(wù)處理的需求，如有不同之處，本文中的設(shè)計(jì)原則也可以作為參考之用。

前面介紹了界面、控件（菜單、工具欄、按鈕、字段框等）的概念，界面布局是界面設(shè)計(jì)的重要工作之一，布局就是在規(guī)定的界面范圍內(nèi)考慮如何布置這些控件可以獲得最佳的效果（易觀看、易輸入、易查閱等操作）。

一、 界面區(qū)域的劃分

在電腦屏幕上做界面的設(shè)計(jì)時(shí)，為了溝通和理解的方便，同時(shí)也是為了使設(shè)計(jì)結(jié)果符合人體工程學(xué)的基本要求，對(duì)界面的定位坐標(biāo)和區(qū)域劃分做出如下的約定（這個(gè)約定與技術(shù)設(shè)計(jì)和編碼開(kāi)發(fā)的約定是一致的），參見(jiàn)圖1。

圖1 界面區(qū)域劃分的基本原則

1）坐標(biāo)原點(diǎn)的設(shè)定

通常會(huì)將電腦屏幕的左上角定為坐標(biāo)原點(diǎn)（XY軸的交叉點(diǎn)0），因此，界面的內(nèi)容擴(kuò)展或是面積增大時(shí)都是由左向右、由上向下進(jìn)行延伸。

2）區(qū)域的劃分

根據(jù)配置控件的使用目的不同，將界面分成兩個(gè)大的區(qū)域：功能區(qū)域和作業(yè)區(qū)域。

• 功能區(qū)域：通常放在界面的四周，主要布置導(dǎo)航欄、工具欄、主菜單等。
• 作業(yè)區(qū)域：通常放在界面的中間部分，或是偏右下方的區(qū)域，這個(gè)區(qū)域是業(yè)務(wù)數(shù)據(jù)處理的核心區(qū)域，主要用來(lái)布置各類數(shù)據(jù)顯示的窗口、字段框等。

二、 功能區(qū)域的規(guī)劃

除去業(yè)務(wù)字段控件布置的區(qū)域以外都是功能區(qū)域，功能區(qū)域的設(shè)計(jì)要點(diǎn)參見(jiàn)圖2：

圖2 功能區(qū)域的設(shè)計(jì)原則

1）導(dǎo)航欄區(qū)域

導(dǎo)航欄區(qū)域，通?？梢苑謩e在欄的左右兩側(cè)顯示兩類信息（不限于此），比如：

• 左端：顯示本界面/本組件的打開(kāi)路徑，系統(tǒng)名稱>子系統(tǒng)名稱>模塊名稱>本組件名稱。
• 右端：顯示本組件的用戶所屬的部門、姓名、登錄日期等信息。

2）工具欄區(qū)域（上）— 基本操作按鈕區(qū)

這個(gè)區(qū)域用來(lái)布置基本操作按鈕，一般放在導(dǎo)航欄與作業(yè)區(qū)域之間；所謂的基本操作按鈕，指的是用來(lái)對(duì)本界面上屬于主表區(qū)內(nèi)數(shù)據(jù)進(jìn)行操作的功能，對(duì)于細(xì)表區(qū)內(nèi)數(shù)據(jù)的操作按鈕通常布置在距離細(xì)表區(qū)的最近處（上邊或是下邊）。

工具欄的左右兩側(cè)是最為容易查找的位置，所以要將使用最為頻繁的、重要的功能按鈕布置在兩側(cè)，其余的布置在中間，布置在兩側(cè)的按鈕遵循如下的原則：左端布置本界面處理開(kāi)始的功能（入口）、右端布置本界面處理完成的功能（出口）。

布置參考如下：

• ①左端：布置打開(kāi)窗口后首先要操作的按鈕，比如：查詢、新增等；通?；竟δ軈^(qū)左邊的第一個(gè)位置為“業(yè)務(wù)編號(hào)”，它是用于輸入查詢的數(shù)據(jù)“主鍵”；
• ②右端：布置本界面關(guān)閉前需要操作的按鈕，比如：保存、提交、關(guān)閉等；
• ③中間：布置其它的通用按鈕、或是個(gè)性化的功能按鈕；

3）工具欄區(qū)域（下）— 它窗體調(diào)用按鈕區(qū)

當(dāng)界面的上端工具的按鈕過(guò)多不好安排時(shí)，可以將一部分按鈕安排在界面的下端，比如：主要用來(lái)調(diào)用其它組件、功能的按鈕，布置的原則如下（僅供參考）：

• ④子窗體按鈕：布置在作業(yè)區(qū)域的左下端，設(shè)置用來(lái)打開(kāi)本組件附屬子窗體的按鈕，比如：詳細(xì)計(jì)算用的窗體、上傳資料用的窗體等；
• ⑤公用窗體按鈕：布置在作業(yè)區(qū)域的右下端，設(shè)置用來(lái)調(diào)用外部組件窗體的按鈕，比如：與本組件業(yè)務(wù)有相關(guān)關(guān)系的組件、企業(yè)知識(shí)庫(kù)、參考模板等；

4）菜單欄區(qū)域⑥

通常設(shè)置在界面的最左側(cè)，所謂的“菜單”就是一個(gè)樹(shù)形結(jié)構(gòu)體，結(jié)構(gòu)的節(jié)點(diǎn)上是按照父子的關(guān)系布置了以下要素的名稱：系統(tǒng)、子系統(tǒng)、模塊和組件，通過(guò)菜單欄內(nèi)可以找到系統(tǒng)中所有的功能，菜單的結(jié)構(gòu)關(guān)系是參考下面的兩個(gè)架構(gòu)圖設(shè)計(jì)而成的。

注：這個(gè)菜單指的是系統(tǒng)整體的功能菜單，不是某個(gè)業(yè)務(wù)功能內(nèi)的數(shù)據(jù)結(jié)構(gòu)，如果是后者，則包含在業(yè)務(wù)區(qū)域內(nèi)，在此不顯示。

5）作業(yè)區(qū)域的規(guī)劃

作業(yè)區(qū)域是布置業(yè)務(wù)功能設(shè)計(jì)成果的位置，一般將作業(yè)區(qū)域劃分為主次區(qū)域，參見(jiàn)圖1。

• 主要區(qū)域：界面的左上角為“主”，重要信息在此顯示，如：業(yè)務(wù)編號(hào)、客戶名稱、合同總金額、工程期日等；
• 次要區(qū)域：界面的右下角為“次”，次要的或是輔助類信息在此顯示，如：備注信息、來(lái)自于其它組件的參考信息等；

設(shè)計(jì)時(shí)要注意功能區(qū)域與作業(yè)區(qū)域面積的比例關(guān)系，作業(yè)區(qū)域面積占全屏幕總面積的比例越大，一次顯示的信息量就越多，用戶的體驗(yàn)就越好，反之就會(huì)比較差，如圖3所示。

圖3 功能區(qū)域作業(yè)區(qū)域的比例

比如：缺乏經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)將屏幕的30～50%用于功能區(qū)域的布置（菜單、工具欄等），由于作業(yè)界區(qū)域小，所以用戶的操作體驗(yàn)非常差；因此，為了擴(kuò)大作業(yè)區(qū)域的有效面積可以采用收起菜單欄和工具欄的方法。

但當(dāng)一次要顯示的內(nèi)容非常多的時(shí)候，最好還是另外彈出一個(gè)專用的子窗口，將主窗體的部分處理內(nèi)容用專用的窗體顯示為好，這樣操作面積增大，用戶體驗(yàn)就會(huì)相應(yīng)地變好了。

另外，比例上雖然沒(méi)有大問(wèn)題，但是作業(yè)區(qū)域內(nèi)顯示的細(xì)表行數(shù)太少，也不利于用戶的輸入、查看，此時(shí)最好將作業(yè)區(qū)域的內(nèi)容放到一個(gè)單獨(dú)地界面上去顯示為佳。

三、 作業(yè)區(qū)的分類（原型形式分類）

1）原型形式

作業(yè)區(qū)域的范圍內(nèi)就是通常所說(shuō)的“界面原型”，這個(gè)原型常見(jiàn)的形式有5種：卡片式、列表式、主細(xì)表式、樹(shù)表式和頁(yè)簽式，參見(jiàn)圖4（各個(gè)界面形式的設(shè)計(jì)原則參見(jiàn)下一節(jié)“界面原型的設(shè)計(jì)”）。

圖4 界面原型的形式分類

2）原型形式的選擇

不同的數(shù)據(jù)結(jié)構(gòu)需要采用不同界面形式，采用哪種形式最佳由設(shè)計(jì)師參考業(yè)務(wù)內(nèi)容、以及未來(lái)的應(yīng)用方法（實(shí)際系統(tǒng)的界面）綜合考慮決定；收集到原始實(shí)體表單與業(yè)務(wù)原型的界面可以不是一一對(duì)應(yīng)的關(guān)系；比如：根據(jù)客戶提供的“采購(gòu)合同”原始表單，界面原型的設(shè)計(jì)可有兩種表達(dá)形式，選取那種形式合適取決于用戶與業(yè)務(wù)設(shè)計(jì)師的溝通，參見(jiàn)圖5。

圖5 原型的選擇方法示意

• 設(shè)計(jì)方式一：如果表單的數(shù)據(jù)較少，則可以將主表和細(xì)表合為一體，見(jiàn)圖5（b），此時(shí)界面原型與原始表單的形式基本上是一致的；
• 設(shè)計(jì)方式二：如果表單的數(shù)據(jù)較多，則可以將主表與細(xì)表分為兩張，見(jiàn)圖5（c），界面1用來(lái)表達(dá)原始表單的主表數(shù)據(jù)部分、界面2用來(lái)表達(dá)原始表單的細(xì)表數(shù)據(jù)部分。

在實(shí)際的界面設(shè)計(jì)時(shí)有幾點(diǎn)設(shè)計(jì)原則要注意：

• 盡量不要采用切換的方式，在一個(gè)界面上布置復(fù)數(shù)不同表單的數(shù)據(jù)輸入，這樣界面的邏輯非常復(fù)雜，不利于后面對(duì)界面的維護(hù)；
• 在不影響用戶的工作分配情況下，盡量采用將復(fù)雜的原始表單拆開(kāi)，用幾個(gè)相對(duì)簡(jiǎn)單的界面來(lái)支持?jǐn)?shù)據(jù)的輸入，然后用看板、表單等功能將這些數(shù)據(jù)組合起來(lái)。這樣的設(shè)計(jì)有利于日后的界面維護(hù)。

本系列下一篇：界面設(shè)計(jì)方法（8）：卡式、列表、主細(xì)表、樹(shù)表和頁(yè)簽

本文由 @李鴻君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議