界面設計

界面設計（即UI設計）是人與機器之間傳遞和交換信息的媒介，FaceUI稱包括硬體界面和軟體界面，是計算機科學與心理學、設計藝術學、認知科學和人機工程學的交叉研究領域。近年來，隨著信息技術與計算機技術的迅速發展，網路技術的突飛猛進，人機界面設計和開發已成為國際計算機界和設計界最為活躍的研究方向。

基本介紹

• 中文名：界面設計
• 外文名：User's Interface Design
• 套用領域：軟體，網頁，遊戲操作界面設計
• 套用行業：工業設計，移動網際網路等

簡介

UI即 User Interface(用戶界面)的簡稱。UI設計則是指對軟體的人機互動、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品味，還要讓軟體的操作變得舒適、簡單、自由,充分體現軟體的定位和特點。

通過對界面設計不同需求進行的分類以及界面設計元素對用戶行為的影響，來研究用戶在界面設計中所體現的重要性。互動性已經成為網路界面設計中設計追求的目標。為了使設計滿足可用性要求，全面的了解用戶特徵及多元化要求是十分必要的。這就需要找到正確的方法來記錄和實現多元化的用戶要求。

界面是人與物體互動的媒介，換句話說，界面就是設計師賦予物體的新面孔。

分類

1. 以功能實現為基礎的界面設計。互動設計界面最基本的性能是具有功能性與使用性，通過界面設計，讓用戶明白功能操作，並將作品本身的信息更加順暢的傳遞給使用者，即用戶，是功能界面存在的基礎與價值，但由於用戶的知識水平和文化背景具有差異性，因此界面應以更國際化，客觀化的體現作品本身的信息。
2. 以情感表達為重點的界面設計。通過界面給用戶一種情感傳遞，是設計的真正藝術魅力所在。用戶在接觸作品時的感受，使人產生感情共鳴，利用情感表達，切實的反應出作品與用戶之間的情感關係。當然，情感的信息傳遞存在著確定性與不確定性的統一。因此，我們更加強調的是用戶在接觸作品時的情感體驗。
3. 以環境因素為前提的界面設計。任何一部互動設計作品都無法脫離環境而存在，周邊環境對設計作品的信息傳遞有著特殊的影響。包括作品自身的歷史、文化、科技等諸多方面的特點，因此營造界面的環境氛圍是不可忽視的一項設計工作，這和我們看電影時需要關燈是一個道理。

元素

計算機的鍵盤與滑鼠這兩個物理接口是人機界面中最為傳統的組成要素，但這些卻逐漸成為人機界面發展的局限性。因為人類無法通過鍵盤滑鼠將信息數據自由的融入人類活躍的思維想像力當中，使得人類對人機界面產生疏離感。界面如何超越鍵盤與滑鼠局限，進一步擴展數字系統和人類之間的界面，使數字系統真正進入人類生活，成為現階段的界面設計研究方向。

1. 以動作作為界面。Henry See長期研究關於計算機信息組織能力的相關探索。他的作品《關注》Regard強調了以動作為界面的裝置作品，該裝置建立在特定智慧型環境中，有一位正在看書的虛擬人物，通過訪問者的動作能對這名“讀者”的動作產生影響。該作品是通過參與者的動作對虛擬人物的影響，表現了的參與者既尊重又侵犯了這名讀者的私人空間。索美與海格諾涅創作了一系列結合姿勢追蹤的裝置。《植物轉變》中，訪問者的舉動和身體形態影響著人工生物的種類。這是一個互動式環境，訪問者進入這個虛擬空間可以看見自己用身體創造了一個虛擬花園。身體的姿勢，活動範圍直接影響虛擬植物的生長。
2. 以觸摸與觸感作為界面。克里斯塔·索美與梅格諾涅：《行動電話感覺》探索了陌生人分享個人信息的雙重情感。大衛·思莫和湯姆·懷特開發了一個以水作為人機界面的裝置《意識水流》，呈現了一個其表面浮動了文字投映的小瀑布，如果訪問者嘗試觸摸這些文字將會使水和文字漾起小小的波紋：“你可以伸出手去觸摸水流，試著隔斷或者攪動文字，使字形產生變化，轉化為新的文字，進入排水管，回到水流源頭，然後再次流出。”
3. 以凝視作為界面。Drik Luese brink和Joachim Sauter的《不可見》De-Viewer以象徵的形式探索了注視的力量，觀眾可以通過欣賞掛在藝術館牆面的繪畫作品，產生不同的變化。在繪畫作品的後方隱藏了觀眾看不見的追蹤器，實時追蹤定位眼睛凝視的方向，即“眼睛追蹤器”。當觀眾站在繪畫作品面前，觀眾聚焦的畫面會消散，並且在旁邊的一幅畫中顯示了觀眾聚焦的眼神。當作品超過三十秒鐘無人觀察，畫面即恢復原狀。該裝置作品通過以凝視作為界面使觀眾意識到無論他看向哪裡，都是在用眼睛破壞影像。
4. 以呼吸作為界面。查·戴維斯Char`Davies創作了一系列用著各種有機物和地理景觀的虛擬世界，這些虛擬世界與大多數虛擬現實環境差異很大，觀眾在他的作品中通過呼吸節奏在虛擬世界活動，由此“消除自我與自然之間的界限”在國際電子藝術大會ISEA的《滲透》展覽回顧中，安尼克·布如德總結道：“呼吸界面”對於一個作品將觀眾成功傳輸到虛擬世界具有重要作用。《滲透》這部作品使我們關係密切，當我們呼吸它與我們相互滲透；並且這幅作品依賴於觀眾身體，他們的基本活動(呼吸和平衡)對於理解作品本身是非常重要的條件。

要求

1. 以易操作性保證讀者。互動作品的界面設計採用超媒體連結技術，將文字、圖形、圖像、聲音、動畫等媒介要素，進行編排，使之成為一個連貫的整體，呈現在一個複雜的互動系統中。界面反映的是信息的總和而並非單一的信息，倘若在提示、選單和幫助產生相同術語，在不同的套用系統中應具有相似的界面外觀、布局、互動方式及信息顯示、界面設計要保持風格的一致性[3]。用戶便可以根據自己的認知經驗，明白功能操作通過界面上的視覺暗示正確選擇內容，在任何地點都能回到主界面或退出整個多媒體作品，因此每個操作對用戶來說應是符合邏輯的用戶能夠較容易了解它要表達的信息與情感。
2. 界面設計時需要首先考慮的問題。互動設計作為一種新媒體形態，必然要突出藝術的可視性本質，將新的藝術思想與理念融匯到作品當中，以此去吸引和影響用戶。界面使讀者打開互動作品時最先接觸到的層面，通過可視化界面上設計者運用的前衛化的藝術符號，虛擬化的空間結構營造跳躍式的視覺效果，可以引起用戶美好的情感溝通，使得其對設計者通過作品所傳達的信息產生共鳴。界面設計的宗旨促進信息的傳遞以滿足用戶需求。當進行界面設計時，關鍵在於界面本身能否有效支撐互動，界面上的組件是為互動行為服務的，它可以很美，很抽象很藝術化，但不能以任何理由破壞作品的互動功能和作用。

領域

人機界面的定義、起源、發展、研究內容及發展趨勢；人機界面設計中認知心理學、人機工程學、人機界面的藝術設計、色彩設計等；人機界面設計，硬體人機界面的設計風格、人文關懷等；軟體人機界面的形式與標準、軟體人機界面設計、Internet網頁界面設計、圖示設計等；人機界面設計評價與可用性測試；新互動技術及展望，介紹了多通道用戶界面、下一代人機界面展望及附錄。

原則

1. 1.簡易性

界面的簡潔是要讓用戶便於使用、便於了解、並能減少用戶發生錯誤選擇的可能性。

1. 2.用戶語言

界面中要使用能反套用戶本身的語言，而不是遊戲設計者的語言。

1. 3.記憶負擔最小化

人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶極不穩定、有限，24小時記憶體在25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。

1. 4.一致性

是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與遊戲內容相一致。

1. 5.清楚

在視覺效果上便於理解和使用。

1. 6.用戶的熟悉程度

用戶可通過已掌握的知識來使用界面，但不應超出一般常識。

1. 7.從用戶的觀點考慮

想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。

通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。

1. 8.排列

一個有序的界面能讓用戶輕鬆的使用。

1. 9.安全性

用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。

1. 10.靈活性

簡單來說就是要讓用戶方便的使用，但不同於上述。即互動多重性，不局限於單一的工具(包括滑鼠、鍵盤或手柄)。

1. 11.人性化

高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定製界面，並

能保存設定。

設計軟體：

軟體用戶界面（Software User Interface）是指軟體用於和用戶交流的外觀、部件和程式等等。如果你經常上網的話，會看到很多軟體設計很樸素，看起來給人一種很舒服的感覺；有些軟體很有創意，能給人帶來意外的驚喜和視覺的衝擊；而相當多的軟體頁面上充斥著怪異的字型，花哨的色彩和圖片，給人網頁製作粗劣的感覺。軟體界面的設計，既要從外觀上進行創意以到達吸引眼球的目的，還要結合圖形和版面設計的相關原理，從而使得軟體設計變成了一門獨特的藝術。通常的講，企業軟體用戶界面的設計應遵循以下幾個基本原則：

1．用戶導向原則

設計網頁首先要明確到底誰是使用者，要站在用戶的觀點和立場上來考慮設計軟體。要作到這一點，必須要和用戶來溝通，了解他們的需求、目標、期望和偏好等。網頁的設計者要清楚，用戶之間差別很大，他們的能力各有不同。比如有的用戶可能會在視覺方面有欠缺（如色盲），對很多的顏色分辨不清；有的用戶的聽覺也會有障礙，對於軟體的語音提示反映遲鈍；而且相當一部分用戶的計算機使用經驗很初級，對於複雜一點的操作會感覺到很費力。另外，用戶使用的計算機機器配置也是千差萬別，包括顯示卡、音效卡、記憶體、網速、作業系統以及瀏覽器等都會有不同。設計者如果忽視了這些差別，設計出的網頁在不同的機器上顯示就會造成混亂。

2．KISS原則

KISS原則就是"Keep It Simple And Stupid"的縮寫，簡潔和易於操作是網頁設計的最重要的原則。畢竟，軟體建設出來是用於普通網民來查閱信息和使用網路服務。沒有必要在網頁上設定過多的操作，堆集上很多複雜和花哨的圖片。該原則一般的要求，網頁的下載不要超過10秒鐘（普通的撥號用戶56 Kbps網速）；儘量使用文本連結，而減少大幅圖片和動畫的使用；操作設計儘量簡單，並且有明確的操作提示；軟體所有的內容和服務都在顯眼處向用戶予以說明等。

3．布局控制

關於網頁排版布局方面，很多網頁設計者重視不夠，網頁排版設計的過於死板，甚至照抄他人。如果網頁的布局凌亂，僅僅把大量的信息堆集在頁面上，會干擾瀏覽者的閱讀。一般在網頁設計上所要遵循的原理有：

（1）Miller公式。根據心理學家George A.Miller的研究表明，人一次性接受的信息量在7個比特左右為宜。總結一個公式為：一個人一次所接受的信息量為 7±2 比特。這一原理被廣泛套用於軟體建設中，一般網頁上面的欄目選擇最佳在5～9個之間，如果軟體所提供給瀏覽者選擇的內容連結超過這個區間，人在心理上就會煩躁，壓抑，會讓人感覺到信息太密集，看不過來，很累。例如Aol點com的欄目設定：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八個分類。Msn點com的欄目設定：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七項。然而很多國內的軟體在欄目的設定遠遠超出這個區間。

（2）分組處理。上面提到，對於信息的分類，不能超過9個欄目。但如果你的內容實在是多，超出了9個，需要進行分組處理。如果，你的網頁上提供幾十篇文章的連結，需要每隔7篇加一個空行或平行線做以分組。如果你的軟體內容欄目超出9個，如微軟公司的軟體，共有11個欄目，超過了9個。

4．視覺平衡

網頁設計時，也要各種元素（如圖形、文字、空白）都會有視覺作用。根據視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到視覺平衡，在設計網頁時需要以更多的文字來平衡一幅圖片。另外，按照中國人的閱讀習慣是從左到右，從上到下，因此視覺平衡也要遵循這個這個道理。例如，你的很多的文字是採用左對齊〈Align=left〉，需要在網頁的右面加一些圖片或一些較明亮、較醒目的顏色。一般情況下，每張網頁都會設定一個頁眉部分和一個頁腳部分，頁眉部分常放置一些Banner廣告或導航條，而頁腳部分通常放置聯繫方式和版權資訊等，頁眉和頁腳在設計上也要注重視覺平衡。同時，也決不能低估空白的價值。如果你的網頁上所顯示的信息非常密集，這樣不但不利於讀者閱讀，甚至會引起讀者反感，破壞該軟體的形象。在網頁設計上，適當增加一些空白，精煉你的網頁，使得頁面變的簡潔。

5．色彩搭配顏

色是影響網頁的重要因素，不同的顏色對人的感覺有不同的影響，例如：紅色和橙色使人興奮並使得心跳加速；黃色使人聯想到陽光，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對瀏覽者產生什麼影響，為網頁設計選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節顏色等）。

為方便閱讀軟體上的信息，可以參考報紙的編排方式將網頁的內容分欄設計，甚至兩欄也要比一滿頁的視覺效果要好。另一種能夠提高文字可讀性的因素是所選擇的字型，通用的字型（Arial，Courier New，Garamond，Times New Roman，中文宋體）最易閱讀，特殊字型用於標題效果較好，但是不適合正文。如果在整個頁面使用一些特殊字型（如Cloister，Gothic，Script，Westminster，華文彩雲，華文行楷），這樣讀者閱讀起來感覺一定很糟糕。該類特殊字型如果在頁面上大量使用，會使得閱讀頗為費力，瀏覽者的眼睛很快就會疲勞，不得不轉移到其他頁面。

6．和諧性

通過對軟體的各種元素（顏色、字型、圖形、空白等）使用一定的規格，使得設計良好的網頁看起來應該是和諧的。或者說，軟體的眾多單獨網頁應該看起來像一個整體。軟體設計上要保持一致性，這又是很重要的一點。一致的結構設計，可以讓瀏覽者對軟體的形象有深刻的記憶；一致的導航設計，可以讓瀏覽者迅速而又有效的進入在軟體中自己所需要的部分；一致的操作設計，可以讓瀏覽者快速學會在整個軟體的各種功能操作。破壞這一原則，會誤導瀏覽者，並且讓整個軟體顯的雜亂無章，給人留下不良的印象。當然，軟體設計的一致性並不意味著刻板和一成不變，有的軟體在不同欄目使用不同的風格，或者隨著時間的推移不斷的改版軟體，會給瀏覽者帶來新鮮的感覺。

7．個性化

（1）符合網路文化

企業軟體不同於傳統的企業商務活動，要符合Internet網路文化的要求。首先，網路最早是非正式性、非商業化的，只是科研人員用來交流信息。其次，網路信息是只在計算機螢幕上顯示而沒有列印出來閱讀，網路上的交流具有隱蔽性，誰也不知道對方的真實身份。另外，許多人在上網的時候是在家中或網咖等一些比較休閒，比較隨意的環境下。此時網路用戶的使用環境所蘊涵的思維模式與坐在辦公室里西裝革履的時候大相逕庭。因此，整個網際網路的文化是一種休閒的、非正式性的、輕鬆活潑的文化。在軟體上使用幽默的網路語言，創造一種休閒的、輕鬆愉快、非正式的氛圍會使軟體的訪問量大增。

（2）塑造軟體個性

另外，軟體的整體風格和整體氣氛表達要同企業形象相符合併應該很好的體現企業CI。在這方面比較經典的案例有：可口可樂個性鮮明的前衛軟體"Life Tastes Good"；工整、全面、細緻的通用電氣公司軟體"We bring good things to life（GE帶來美好的生活）"；崇尚科技創新文化的3M公司軟體"Creating solutions for business、industry and home"；刻意扮演一個數字電子娛樂之集大成者的角色，要成為新時代夢想實現者的索尼軟體；平易近人、親情濃郁的通用汽車公司軟體體現了"以人為本"的企業定位和行銷策略；服務全面、細緻、方便，處處體現"賓至如歸"服務理念的希爾頓大酒店軟體。

網頁界面設計不同於一般的平面設計,擁有自身的設計特徵。網頁界面設計應時刻圍繞“信息傳達”這一主題來進行。目前網頁界面傳達的信息主要是視覺信息。因此從設計類型上來看,網頁界面設計屬於視覺傳達的領域,故而網頁界面設計的主要視覺元素和設計指導原則都要遵循視覺傳達的一般規律。網頁界面設計師在視覺傳達的工作,就是通過有效吸引視線的藝術形式使信息得以清晰、準確、有力地傳達。

任何一個成功的產品都是建立在對需求的準確把握之上的。需求分析對於新產品的開發或者已有產品的改進升級是不可缺少的早期環節之一。許多設計項目在還沒有很好地理解用戶需求甚至幾乎對用戶需求完全不清。

1. 體現以用戶為中心的設計。首先從對用戶的調研開始、然後對用戶建模、信息概念設計、網站原型設計到用戶測試及方案實現，整個設計過程都始終圍繞著用戶進行，真正做到以用戶為中心。保證用戶界面運作的一致性是網頁界面設計的重點之一。在主頁列表框的設計中，如果雙擊其中的一項，使得某些任務完成。由此雙擊列表框中的其中的任何一個項，都應該有同樣的任務完成。也就是所有視窗按鈕的位置設計要達到一致性，提供的標籤設計和信息要一致，顏色要一致。用戶界面設計的一致性會使得用戶對網路界面運作建立起精確的心理模型，以此降低用戶培訓和支持成本。在頁面視覺傳達上，從網站的主題內容和定位來決定需要與之前運用的元素保持一致。
2. 減少用戶思考的設計。一般的短時記憶只能保持二十秒左右，最長不超過一分鐘。在如此短的時間內我們能儲存多少信息呢？答案是7士2即5～9個項目，平均為7個項目。可見，人在短時間內注意力是集中和少量的，基於識別的用戶界面在很大程度依賴於用戶所關心對象的可見性，顯示太多的對象和屬性會讓用戶很難找到感興趣的對象。同時，用戶不喜歡經常重複性輸入一些信息，如個人賬號，安全信息，操作習慣，下次操作行為等，這些占用了用戶完成其他重要任務的時間。
3. 明確體現網站的特色服務。用戶界面要非常明確地體現網站的特色服務，安排最大的空間並且在最顯眼的位置來擺放網站的最大賣點和用戶最關心最常用培訓系統，而其他用戶也會感興趣的渠道信息、最新共享信息版塊和論壇板塊等放在界面較顯眼的位置。這些都是基本滿足用戶需求，以用戶為中心的界面計。
4. 迎合用戶的習慣。迎合用戶的習慣，主要為了讓用戶在操作中簡單到極致。作為一個Ul設計人員，我們應當更多的去了解用戶習慣在什麼地方尋找導航欄、習慣把哪部分作為網站的重點，習慣在什麼地方點擊註冊、習慣在什麼地方找搜尋框、習慣點擊什麼樣的按鈕[8]、什麼顏色會加速用戶的心跳、增強消費的衝動。由此，根據用戶的行為習慣，對網站的整體布局進行重新策劃，使得簡單、簡單、再簡單、簡單到極致，通過清晰的流程和界面，讓用戶減少對網站的思考以及尋找的時間；讓準確的色彩和表述減少用戶心理鬥爭的時間。通過不斷地調研，用各種可用性實驗來計算用戶在每一個界面下所需思考的時間，然後，最好的頁面設計的評判標準就是用戶耗費時間最少的那個頁面

常見問題：

1、字間距太擠或太寬

2、行距太小或太大

3、段距太少或太多

4、每行字數太多或太少