產(chǎn)品界面設(shè)計(jì)

產(chǎn)品界面設(shè)計(jì)第1頁/共45頁單獨(dú)的點(diǎn)，本身沒有上、下、左、右的指向。當(dāng)畫面上只有一個點(diǎn)的時候，人的視線就會自覺不自覺的集中在這個點(diǎn)上，形成求心性的特點(diǎn)。當(dāng)點(diǎn)在畫面上的位置不同時，視覺感就有一些變化。

集中點(diǎn)動感重心下移傾斜感凸感增強(qiáng)壓迫感單調(diào)感頭重腳輕有穩(wěn)定感張力感凹形感更強(qiáng)

不穩(wěn)定感

第2頁/共45頁（2）多點(diǎn)的視覺效果平行的雙點(diǎn)在造型上可以產(chǎn)生對稱、均衡的藝術(shù)效果；密集性的多點(diǎn)排列能產(chǎn)生面的效果；多點(diǎn)大小不同，錯落相間，可產(chǎn)生運(yùn)動感和空間感。

連線效果虛形三角形的面的聯(lián)想層次感

活潑嚴(yán)肅由大到小的秩序感由大到小方向的動感靜態(tài)感

由近到遠(yuǎn)的層次感視覺停滯點(diǎn)第3頁/共45頁

活潑嚴(yán)肅韻律動感點(diǎn)大又疏，圖形顯得干凈、豪爽，錯視靜態(tài)感點(diǎn)小又密，圖形顯得細(xì)膩

點(diǎn)的不同排列、組合，在人的視覺上會產(chǎn)生不同的感受與心理反應(yīng)，會傳達(dá)不同視覺信息，產(chǎn)生不同的審美效果，如：和諧、比例、對稱、均很、運(yùn)動等，在產(chǎn)品形態(tài)設(shè)計(jì)中被廣泛得到應(yīng)用。第4頁/共45頁新穎墻面開關(guān)設(shè)計(jì)第5頁/共45頁2.1產(chǎn)品面板設(shè)計(jì)——點(diǎn)的設(shè)計(jì)與應(yīng)用

產(chǎn)品面板設(shè)計(jì)是產(chǎn)品形態(tài)設(shè)計(jì)的一項(xiàng)重要內(nèi)容，如指示燈、開關(guān)、螺釘、旋鈕、按鍵、商標(biāo)、文字等，當(dāng)它們體積小于儀器整體和面板時，都可以認(rèn)為是點(diǎn)。

錄音控制面板儀器控制面板

第6頁/共45頁面板與元器件面板——人機(jī)相互交流的窗口，元器件——人和產(chǎn)品進(jìn)行交流溝通的媒介

——點(diǎn)，可以布置在產(chǎn)品的平面和三維空間中。

顯示元器件——

從產(chǎn)品面板中獲得輸出信息

操作元器件——

輸入操作指令顯示元器件與操作元器件之間的相容程度，直接影響人與產(chǎn)品的交流效果，也就是說直接影響著產(chǎn)品的質(zhì)量。如：當(dāng)你在玩游戲時，游戲機(jī)的操作件不能完成你的指令，你就會認(rèn)為，這個游戲機(jī)質(zhì)量不好，或者說這個游戲機(jī)壞了；又如：當(dāng)你使用你的手機(jī)發(fā)短信的時候，手機(jī)顯示屏，不能正確反應(yīng)你的意愿，你就會認(rèn)為這部手機(jī)質(zhì)量有問題。

電器柜

第7頁/共45頁元器件的分類根據(jù)信號發(fā)生的方式，信號可分類輸入信號和輸出信號兩種。輸入信號通過控制元器件轉(zhuǎn)達(dá)人們的指令輸出信號通過顯示元器件回答人們執(zhí)行情況的信息。下面從這兩個方面對產(chǎn)品設(shè)計(jì)中常出現(xiàn)的元器件進(jìn)一步分類，可以在眾多類似點(diǎn)的元器件布置設(shè)計(jì)中，幫助我們實(shí)現(xiàn)同類分組設(shè)計(jì)、同形狀分組設(shè)計(jì)、同屬性分組設(shè)計(jì)、操作順序分組設(shè)計(jì)等，以達(dá)到最佳的設(shè)計(jì)效果。第8頁/共45頁顯示器——產(chǎn)品輸出信號元器件，主要包括：視覺顯示、聽覺顯示、嗅覺顯示和觸覺顯示控制器——產(chǎn)品接受指令的部分，按運(yùn)動的形式、人體操作的部位和操作功能三個角度進(jìn)行了分類。第9頁/共45頁1.顯示器分類指針式：橫豎式刻度或數(shù)字儀表、視覺顯示器數(shù)字式：二極管數(shù)字顯示圖像式：圖像顯示屏、數(shù)字顯示屏、文字顯示屏指示燈:

打印機(jī)：蜂鳴器聽覺顯示器鈴聲報警器汽笛嗅覺顯示器觸覺顯示器

顯示器第10頁/共45頁2.控制器分類旋轉(zhuǎn)控制器：曲柄、手輪、旋塞、旋鈕、鑰匙、舵?zhèn)}、方向盤、十字把、扳手?jǐn)[動控制器：開關(guān)桿、調(diào)節(jié)桿、杠桿件、擺動件、踏板按壓控制器：按鈕、按鍵、鍵盤滑動控制器：手閘、形狀指撥滑塊、摩擦指撥滑塊牽拉控制器：拉環(huán)、拉圈、拉手、拉鈕按運(yùn)動形式分第11頁/共45頁按人體操作部位分類：

手動控制器：旋鈕、按鍵、搖把、手柄、舵輪

腳動控制器：腳踏板、腳踏鈕按操作功能分類：

開關(guān)控制器：手閘、按鈕、踏板、手柄

轉(zhuǎn)換控制器：按鈕、選擇開關(guān)

調(diào)整控制器：旋鈕、手柄

緊急停車控制器：（不能與其它顯示與操作件同時安裝）第12頁/共45頁各種控制元器件

第13頁/共45頁3.產(chǎn)品顯示元器件與控制元器件布置原則顯示元器件與控制元器件與面板整體相比，體積小巧，可以認(rèn)為是視覺點(diǎn)，與純視覺點(diǎn)設(shè)計(jì)相比，產(chǎn)品的顯示元器件與相應(yīng)的操作控制元器件有一一對應(yīng)的功能邏輯關(guān)系，因此，它們的位置和操作的方式之間也有一定的邏輯關(guān)系，這里不能把它們看作純視覺的點(diǎn)，應(yīng)從概念設(shè)計(jì)的角度，運(yùn)用美學(xué)法則，在平面設(shè)計(jì)的基礎(chǔ)上，討論它們的美學(xué)布置形式；還應(yīng)從功能特點(diǎn)出發(fā)，考慮顯示元器件與控制元器件之間的邏輯關(guān)系，從而確定顯示元器件和控制元器件在面板中的位置以及它們的布置形式。第14頁/共45頁因?yàn)楫a(chǎn)品造型設(shè)計(jì)首先要考慮適應(yīng)產(chǎn)品功能的要求，強(qiáng)調(diào)產(chǎn)品內(nèi)在、外在形式的統(tǒng)一，這樣有利于提高效率，使操作者精力集中，降低錯誤率。在此前提下，應(yīng)盡量使產(chǎn)品造型內(nèi)、外形式兩相兼顧，協(xié)調(diào)好產(chǎn)品形體各部件尺寸大小和比例關(guān)系。人機(jī)工程學(xué)為產(chǎn)品顯示元器件和控制元器件的不是形式，提供了許多設(shè)計(jì)原則。第15頁/共45頁（1）

常用的面板布置形式面板布局設(shè)計(jì)涉及的元器件主要有顯示器和控制器兩大類。要使產(chǎn)品達(dá)到即高效又美觀的效果，可以通過以下方面的努力實(shí)現(xiàn)：一是通過面板布局的方式獲得；二是運(yùn)用控制器與顯示器操作的邏輯關(guān)系布置面板可以獲得；三是通過合適分割面板獲得顯示器和控制器的位置。常用的面板布置方式（8種）：①操作指示內(nèi)容以線條形式圈定第16頁/共45頁②操作指示的內(nèi)容以空格形式分布③操作指示內(nèi)容通過凸凹形式區(qū)分第17頁/共45頁④操作指示內(nèi)容以相同形狀的形式歸類第18頁/共45頁⑤操作指示內(nèi)容以色塊形式區(qū)分

⑥操作指示內(nèi)容以括號形式連接

第19頁/共45頁⑦操作指示內(nèi)容以功能內(nèi)容形式歸類⑧操作指示內(nèi)容以隔線形式區(qū)分

第20頁/共45頁（2）邏輯關(guān)系布置原則顯示器和控制器體積遠(yuǎn)小于控制面板，雖然可以把它視為點(diǎn)，但在產(chǎn)品的顯示器和控制器的布置形式中，卻不能把它看作純視覺的點(diǎn)來設(shè)計(jì)，顯示器與相應(yīng)的控制器之間有一一對應(yīng)的操作邏輯關(guān)系，這是人們在長期的生活實(shí)踐中形成的習(xí)慣，也是顯示器和控制器位置設(shè)計(jì)必須遵守的原則。當(dāng)顯示器與控制器布置在三維空間時，其顯示器讀數(shù)的方向和控制器運(yùn)動的方向，應(yīng)滿足下圖中箭頭所指的方向。第21頁/共45頁（3）通過分割獲得合適的位置若面板僅有一組多輸出、單輸入的顯示控制元器件，或者僅有一組單輸出、多個輸入顯示控制元器件，可以采用非對稱性分割方式確定點(diǎn)的位置，這種布局既調(diào)和有對比，即變化又統(tǒng)一。第22頁/共45頁當(dāng)布置面板里作為點(diǎn)的顯示和控制元器件時，最好不要用下圖左邊的兩種方法，對稱劃分面板，這樣會造成面板布置形式呆板，單調(diào)。采用非對稱分割，但又注意布局的視覺力矩的均衡效果，就像右邊兩種布局形式，以達(dá)到自然生動的效果。第23頁/共45頁在面板垂直方向1/5的位置，或橫向方向3/10的位置，繪制矩形分割線，將面板涉及的元素，放在分割線的交匯處，或被分割的面塊中，這樣構(gòu)圖，其面積大小與色彩既有對比，又有均衡統(tǒng)一，能給人以整體協(xié)調(diào)感和美感。以4條非均衡的水平線和垂直線分割面板，將面板所涉及的元素，如：手柄，布置在左半部下條橫線中間，將旋鈕和顯示燈布置在右垂直線的右中部，將文字布置在上橫線的上部，這樣布置造成疏密相間、縱橫對比，給人以舒展的感覺。第24頁/共45頁在縱橫1/3處作矩形的分割線，按此布局也能獲得較好的視覺效果。

第25頁/共45頁利用斜線分割，可獲得生動活躍的視覺效果，因?yàn)樾本€能產(chǎn)生動感，能產(chǎn)生把某物向上推移或向下滑行的感覺。這種分割布局能獲得構(gòu)圖的疏密對比，均衡穩(wěn)定和韻律感。

第26頁/共45頁應(yīng)用曲線分割能使面板構(gòu)圖既有活躍的動感，又具有安靜舒展的視覺效果。第27頁/共45頁顯示和控制元器件在面板上的布置方法有很多，以上分割方法只是面板設(shè)計(jì)中常用的方法，根據(jù)各個不同面板的顯示和控制元器件的不同，靈活運(yùn)用平面構(gòu)成中點(diǎn)的構(gòu)成方法，達(dá)到最佳視覺效果。第28頁/共45頁案例2-1：儀表面板設(shè)計(jì)下圖儀表面板設(shè)計(jì)的兩個方案。顯示器輸出元器件有：液晶顯示屏一個、打印機(jī)一個儀表名字和生產(chǎn)廠家；輸入控制元器件有：啟動按鍵顯示開關(guān)一個控制顯示按鍵6個第29頁/共45頁方案一分析：用一組象征黃鶴的非對稱的水平線和垂直線分割矩形，將顯示元器件布置在左側(cè)用色彩構(gòu)成翅膀的色塊中，將啟動按鈕放置在右上端（工作中較少使用），與儀表名稱放在一條線上，將6個工作操作按鈕，布置在象征著鵝頸部，一字排開，下面用文字注明功用，右下角注明生產(chǎn)單位。整個布局顯得疏密有序，顯得舒展又有內(nèi)涵。第30頁/共45頁方案二分析：采運(yùn)用一組斜線和水平線分割矩形，并用協(xié)調(diào)色塊區(qū)別，將啟動開關(guān)按鈕與工作操作按鈕一字排開，但用不同形狀的按鈕區(qū)分。由于啟動按鈕在工作中，使用較少，放置在最左邊，下面用文字說明功用，將打印機(jī)布置在右下角，顯示屏布置在面板的左上角，儀表名字置于打印機(jī)的上方，制作單位布置在面板的左下角，方案整個顯得均衡有序，顯示元器件工作線路與控制元器件工作線路互不干擾，井然有序，思路清晰。第31頁/共45頁案例2-2：掌上電腦和3G手機(jī)形態(tài)設(shè)計(jì)案例分析下圖是掌上電腦的與3G手機(jī)兩個產(chǎn)品形態(tài)設(shè)計(jì)中的交互面板的設(shè)計(jì)案例，相同的是兩個產(chǎn)品的輸出元器件：顯示屏、蜂鳴器、喇叭；輸入元器件：掌上電腦左邊一組有30個按鍵，右組有43個按鍵，中間有4個按鍵，按鍵按凸凹分區(qū)，啟動開關(guān)緊挨在顯示屏右邊。3G手機(jī)相同形狀按鍵30個，布置在手機(jī)控制區(qū)下部，上部有9個特殊按鍵，用特殊形狀區(qū)別，布置在手機(jī)按鍵區(qū)的上部，并用色彩分區(qū)區(qū)別。按鍵由于使用功能設(shè)定的區(qū)域不同，其造型各有自己的特點(diǎn)去強(qiáng)調(diào)自身的功能特定，使消費(fèi)者在購買時，通過產(chǎn)品外形就能迅速找到自己需要使用功能的產(chǎn)品。第32頁/共45頁在產(chǎn)品面板設(shè)計(jì)中，還需注意：儀器儀表、機(jī)床控制面板操作控制區(qū)域和顯示輸出信號區(qū)域等部件的面積比例設(shè)計(jì)，必須與產(chǎn)品形態(tài)所強(qiáng)調(diào)產(chǎn)品功能效應(yīng)相適應(yīng)，才能增加產(chǎn)品的附加值。第33頁/共45頁第34頁/共45頁作業(yè)1.等離子切割機(jī)控制柜操作面板的改良設(shè)計(jì)

設(shè)計(jì)要求：1)液晶屏邊框?qū)嶋H沒有白色線條；2)按鍵顏色基本上已定；3)面板主體顏色可通過塑料選色、做油漆等方法來改變；4)小面板下方長條、各右側(cè)方格可用寫真、噴繪、彩印、滴塑等多種先進(jìn)工藝；5)按鍵區(qū)域框架可采用單獨(dú)油漆、貼膜、貼鋁、貼彩色不銹鋼等工藝方案；6)還可考慮其他先進(jìn)工藝方案來設(shè)計(jì)。第35頁/共45頁第36頁/共45頁第37頁/共45頁第38頁/共45頁控制柜裝配圖第39頁/共45頁國內(nèi)等離子切割機(jī)控制柜面板第40頁/共45頁國外等離子切割機(jī)控制柜面板

美國海寶（EDGE）、美國BURNY、德國的西門子(SIEMENS)、西班牙的法格(FAGOR)、日本的法納克(FANUC)

美國海寶（EDGE