簡介
用戶界面(
User Interface,簡稱
UI,亦稱
使用者界面)是系統和用戶之間進行互動和信息交換的媒介,它實現信息的內部形式與人類可以接受形式之間的轉換。
用戶界面是介於用戶與
硬體之間,為彼此之間互動溝通而設計的相關
軟體,使得用戶能夠方便有效地去操作硬體以達成雙向之互動,完成所希望的工作,用戶界面定義廣泛,包含了
人機互動與
圖形用戶界面,凡參與人類與機械的信息交流的領域都存在著用戶界面。
介紹
軟體設計可分為兩個部分:編碼設計與
UI設計。編碼設計大家都很熟悉,但是
UI設計還是一個很陌生的詞,即使一些專門從事網站與多媒體設計的人也不完全理解UI的意思。UI的本意是
用戶界面,是英文User和 interface的縮寫。從字面上看是
用戶與
界面2個組成部分,但實際上還包括用戶與界面之間的互動關係。
界面設計,在漫長的
軟體發展中,界面設計工作一直沒有被重視起來。做
界面設計的人也被貶義的稱為“美工”。其實
軟體界面設計就像工業產品中的
工業造型設計一樣,是產品的重要買點。一個友好美觀的
界面會給人帶來舒適的視覺享受,拉近人與電腦的距離,為商家創造賣點。
界面設計不是單純的美術繪畫,他需要定位使用者、使用環境、使用方式並且為最終
用戶而設計,是純粹的科學性的藝術設計。檢驗一個
界面的標準即不是某個項目開發組領導的意見也不是項目成員投票的結果,而是最終
用戶的感受。所以
界面設計要和
用戶研究緊密結合,是一個不斷為最終用戶設計滿意視覺效果的過程。
在人和機器的互動過程(Human Machine Interaction)中,有一個層面,即我們所說的
界面(interface)。從
心理學意義來分,
界面可分為感覺(視覺、觸覺、聽覺等)和情感兩個層次。
用戶界面設計是螢幕產品的重要組成部分。界面設計是一個複雜的有不同學科參與的
工程,認知
心理學、
設計學、
語言學等在此都扮演著重要的
角色。
用戶界面設計的三大原則是:置界面於用戶的控制之下;減少
用戶的記憶負擔;保持界面的一致性。
蘋果OS
iPhone OS的
用戶界面的概念基礎上是能夠使用多點觸控直接操作。控制方法包括滑動,輕觸開關及按鍵。與系統互動包括滑動(swiping),輕按(tapping),擠壓(pinching)及旋轉(reverse pinching)。此外,通過其內置的加速器,可以令其旋轉裝置改變其y軸以令螢幕改變方向,這樣的設計令iPhone更便於使用。
螢幕的下方有一個home按鍵,底部則是dock,有四個
用戶最經常使用的程式的圖示被固定在dock上。
螢幕上方有一個狀態欄能顯示一些有關數據,如時間﹑電池電量和信號強度等。其餘的
螢幕用於顯示當前的應用程式。啟動iPhone應用程式的唯一方法就是在當前
螢幕上點擊該程式的圖示,退出程式則是按下螢幕下方的home鍵。在
第三方軟體退出後,它直接就被關閉了,但在即將到來的iPhone 3.0版本中,當第三方軟體收到了新的信息時,蘋果公司的伺服器將把這些通知推送至iPhone或iPod Touch上(不管它是否正在運行中)。在iPhone上,許多應用程式之間都是有聯繫的,這樣,不同的應用程式能夠分享同一個信息(如當你收到了包括一個電話號碼的簡訊息時,你可以選擇是將這個電話號碼存為聯絡人或是直接選擇這個號碼打一通電話)。
設計師
UI設計從工作內容上來說分為3個方向。圖 它主要是由UI 研究的3個因素決定的, 其分別是研究工具,研究人與
界面的關係,研究人。
研究
界面----圖形設計師Graphic UI designer
國內目前大部分UI工作者都是從事這個行業。也有人稱之為
美工,但實際上不是單純意義上的美術工人,而是
軟體產品的產品外形設計師。
這些設計師大多是美術院校畢業的,其中大部分是有
美術設計教育背景,例如工業外形設計,
裝潢設計,信息多媒體設計等。研究人與
界面的關係---
互動設計師,interaction designer
研究人----
用戶測試/研究
工程師User experience engineer
任何的產品為了保證質量都需要測試,軟體的編碼需要測試,自然UI設計也需要被測試。這個測試和編碼沒有任何關係,主要是測試
互動設計的合理性以及
圖形設計的美觀性。測試方法一般都是採用
焦點小組,用目標
用戶問卷的形式來衡量UI設計的合理性。這個
職位很重要,如果沒有這個職位,
UI設計的好壞只能憑藉
設計師的經驗或者領導的審美來評判,這樣就會給企業帶來嚴重的風險性。
發展歷史
古代
最古老的
用戶接口是在各式各樣物體製作
符號、
圖形,使人類與對象之間產生互動接口,比如說當人類看到
招牌即知道這棟房屋的作用為何。
聲音、
旗幟、手勢的運用,是讓人與人或人與設備之間的用戶接口,例如在戰場或樂團演奏上,甚至是運用
龜甲、
錢幣的卜卦,
老師使用
黑板作為與學生的用戶接口,而
算盤亦是由珠子所構成的早期人機界面。
早期電腦批量接口(風行於1945-1968): 所有的輸入數據預先設定於程式或命令行參數中。
命令行界面(風行於1969-1983):用戶通過鍵盤輸入指令,電腦接收到指令後,予以運行。
現代
電腦:
圖形用戶界面一般指介於用戶與電腦之間溝通與互動之
硬體以及
軟體,目的在使得電腦系統之用戶能夠方便有效率地去操作電腦以達成雙向之互動,完成所希望藉助電腦完成之工作,其涵蓋之範圍包括:早期由
紙帶輸入設備到
鍵盤、
滑鼠、數字版等等數據輸入的設備,顯示螢幕、聲音等等輸出設備,參考檔案、在線上說明、教學課程等等輔助使用之材料,
人機互動的模式達到了只認識1與0的電腦與人類之間的
用戶接口。
在圖形用戶界面中,電腦畫面上顯示視窗、圖示、按鈕等圖形表示不同目的的動作,用戶通過滑鼠等指針設備進行選擇。最著名例子就是由
蘋果公司在
麥金塔所創的
圖形用戶界面。
工業:人機界面在工業界亦將傳統按鈕皮膚進入到親切的觸控
人機界面(
Human-
Machine
Interface,縮寫
HMI),在工業上的用戶接口簡單的區分為
Input(輸入)與Output(輸出)兩種,Input指的是由人來進行機械或設備的操作,如把手、開關、門、指令(命令)的下達或保養維護等,而Output指的是由機械或設備發出來的通知,如故障、警告、操作說明提示等,好的人機界面會幫助用戶更簡單、更正確、更迅速的操作機械,也能使機械發揮最大的性能並延長使用壽命,而目前市面上所指的人機界面則多半狹義的指在擁有軟體人性化的操作接口的硬體(如觸控螢幕)。
其他現在還有很多一些用戶界面,由原本的按鈕、紙本等傳統古代接口進化至直接用手指、或者特殊的筆端觸摸
觸控螢幕上顯示的按鈕、圖示進行各種操作,如
自動取款機(ATM),汽車導航、媒體播放器、遊戲機、手機等等,一般操作簡捷,直觀。
未來
未來的用戶接口:
更加真實互動的
虛擬實境:舉例來說,就是比個粗魯動作就能當作Control-Alt-Delete鍵的意思。
腦機接口:它是在人或動物
腦(或者腦細胞的培養物)與外部設備間創建的直接連線通路,目前還在實驗階段,科學家在全身癱瘓病患實際腦中植入電腦晶片,已成功利用
腦電波來控制電腦,畫出簡單的圖案及電腦遊戲,不過未來研究成功時,就可讓人類就可利用腦波作為用戶接口。
中國現狀
目前在國內UI還是一個相對陌生的詞,即便是一些設計人員也對這個詞不太了解。我們經常看到一些招聘廣告寫著:招聘
界面美工、界面美術設計師等等。這表明在國內對UI的理解還停留在美術設計方面,認為UI的工作只是
描邊畫線,缺乏對
用戶互動的重要性的理解;另一方面在
軟體開發過程中還存在重技術而不重套用的現象。許多商家認為
軟體產品的核心是技術,而UI僅僅是次要的輔助,這點在人員的比例與待遇上可以表現出來。
但這不是UI設計真正的價值體現,只是UI設計發展的一個必經過程。我們以物質產品手機行業為例,當手機剛剛進入市場的時候不但價格貴的驚人,而且除了通話以外沒有什麼其他功能。由於當時的主導是技術,所以大家都把精力放在信號、待機時間、壽命等方面,對於產品的造型,使用的合理性很少關心。事過境遷,如今技術已經完全的達到
用戶的需求,於是商家為了創造賣點,提高爭力,非常重視產品的外觀設計,除此之外還頻頻推出簡訊,彩屏,和鉉,彩信,攝像頭等等。這樣一來產品的美觀、個性、易用、易學、人性化等等都成了產品的賣點。
軟體產品與物質產品的發展是相同的。過去由於
計算機硬體的限制,編碼設計成為
軟體開發的代名詞,美觀親和的圖形化
界面與合理易用的互動方式都沒有得到充分的重視,實際上這個時期的軟體叫作軟體程式,而不是軟體產品。
現今隨著
計算機硬體的飛速發展,過去的
軟體程式已經不能適應
用戶的要求。
軟體產品在激烈的市場競爭中,僅僅有強大的功能是遠遠不夠的,不足以戰勝強勁的對手。幸運的是在國內一些高瞻遠矚的民族企業已經開始意識到UI給
軟體產品帶來的巨大賣點了,例如
金山公司的影霸、詞霸、
毒霸、網標,由於重視UI的開發與地位,才使得
金山產品在同類軟體產品中首屈一指。聯想
軟體的UI部門積極開展
用戶研究與使用性測試,將易用與美觀相結合,推出的雙模式電腦、幸福系列等成功UI範例,為聯想贏得全球消費 PC第三的稱號等等、等等.實踐證明,各商家只要在產品美觀和易用設計方面很小投入,將會有很大產出。其投入產出比,要比在功能領先性開發上的投入大得多。
我們不得不承認現階段中國在很多領域都與西方已開發國家有相當大的差距,如何趕上並超過他們是我們這代人肩負的歷史使命。
軟體產品領域不象物質產品那樣存在工藝、材料上的限制,軟體產品核心問題就是人。提高
軟體UI設計師個人能力減小人員上的差距是中國UI發展首要關鍵的問題。
目前國內各院校還沒有設立相對健全的UI設計專業,所以提高UI設計師能力關鍵在於提供一個良好的學習與交流的資源環境。國內已經有很多交流設計網站,介紹
工業設計、
平面設計、
服裝設計、
繪畫藝術、多媒體flash等,但是UI設計一直沒有受到應有的關注,僅僅被放在數碼設計或者平面
網頁設計的一個欄目里,這僅有的資源對培養優秀的設計師是不夠的,必須有一個信息快捷、資源豐富、設計水平一流、專業權威的UI設計學習與交流的地方才能適應日益發展的UI設計師們的需求。
將來
軟體UI 設計應該屬於
ID(工業產品設計)的一個特殊形式,只是針對的材質有所不同。但隨著智慧型化電子產品的普及,帶有
液晶屏顯示的產品將越來越多。也就意味著越來越多的產品設計需要
軟體UI設計。
隨著科技的發展,不久的將來所有的產品會組成一體,變成一個無處不在的電腦,這個電腦控制著
用戶的所有家用產品和資料。
用戶只要有自己的一個賬號,就可以通過任何一個產品來控制所有其它產品,而所有的產品都具有
終端的功能。而這個終端操作的基本形式就是
軟體的UI設計。
產品設計由物質設計向非物質設計轉變已經開始了,而且必將成為未來產品設計的主流,一個UI大時代即將到來。
發展階段
市場經濟需要競爭,競爭就會需要設計來提高產品競爭力。2000年以前國內的UI設計剛開始萌芽,但當時做UI等於做
平面設計,基本也體現在
網頁設計上,後來隨著
flash的流行,一部分美術設計師開始去思考互動性。到了2002年一些企業開始重視到UI設計的重要性,紛紛把UI部門從
軟體編碼團隊里提出來,開始有了專門針對軟體產品的圖形設計師和
互動設計師。2004年以後隨著手機,電腦附加
軟體,MP3等大量產品上市,ID設計就和UI設計越來越緊密了,UI設計也開始被提升到一個新的高度和重視程度。2005年國內的UI設計已經相對成熟了,有了專門的職業分工也出現了很多不錯的UI一線設計師與UI設計交流組織。
工作對象
隨著“UI”熱的到來,近幾年國內很多從事手機,
軟體,網站,
增值服務等企業和公司都設立了這個部門。還有很多專門從事UI設計的公司也應運而生。軟體UI設計師的待遇和地位也逐漸上升。
流程
確認目標用戶
例如:對於科學
用戶和對於電腦入門用戶的設計重點就不同。
採集目標用戶的習慣互動方式
不同類型的目標
用戶有不同的互動習慣。這種習慣的互動方式往往來源於其原有的針對現實的互動流程、已有
軟體工具的互動流程。
當然還要在此基礎上通過調研分析找到
用戶希望達到的互動效果,並且以流程確認下來。
提示和引導用戶
軟體是用戶的工具。因此應該由
用戶來操作和控制
軟體。
軟體回響用戶的動作和設定的規則。
對於
用戶互動的結果和反饋,提示用戶結果和反饋信息,引導用戶進行用戶需要的下一步操作。
一致性原則
設計目標一致
軟體中往往存在多個組成部分(組件、元素)。不同組成部分之間的
互動設計目標需要一致。
例如:如果以電腦操作初級
用戶作為目標用戶,以簡化
界面邏輯為設計目標,那么該目標需要貫徹
軟體(
軟體包)整體,而不是局部。
元素外觀一致
互動元素的外觀往往影響
用戶的互動效果。同一個(類)
軟體採用一致風格的外觀,對於保持
用戶焦點,改進互動效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統一的衡量方法。因此需要對目標
用戶進行調查取得反饋。
互動行為一致
在互動模型中,不同類型的元素
用戶觸發其對應的行為事件後,其互動行為需要一致。
例如:所有需要
用戶確認操作的對話框都至少包含確認和放棄兩個按鈕。
對於互動行為一致性原則比較極端的理念是相同類型的互動元素所引起的行為事件相同。但是我們可以看到這個理念雖然在大部分情況下正確,但是的確有相反的例子證明不按照這個理念設計,會更加簡化
用戶操作流程。
可用性原則
可理解
軟體要為用戶使用,用戶必須可以理解軟體各元素對應的功能。
如果不能為
用戶理解,那么需要提供一種非破壞性的途徑,使得用戶可以通過對該元素的操作,理解其對應的功能。
例如:刪除操作元素。
用戶可以點擊刪除操作按鈕,提示用戶如何刪除操作或者是否確認刪除操作,用戶可以更加詳細的理解該元素對應的功能,同時可以取消該操作。
可達到
用戶是互動的中心,互動元素對套用戶需要的功能。因此互動元素必須可以被
用戶控制。
用戶可以用諸如鍵盤、滑鼠之類的互動設備通過移動和觸發已有的互動元素達到其它在此之前不可見或者不可互動的互動元素。
要注意的是互動的次數會影響可達到的效果。當一個功能被深深隱藏(一般來說超過4層)那么
用戶達到該元素的幾率就大大降低了。
可達到的效果也同
界面設計有關。過於複雜的
界面會影響可達到的效果。(參考簡單導向原則)
可控制
如果確實無法提供控制,則用能為目標
用戶理解的方式提示用戶。
設計原則
了解你的用戶
你的用戶是最終評判
用戶界面好壞的人,所以用戶即是你的終極目標,不了解用戶需求,即使你的界面做得再好,也不是用戶想要的產品。沉下心來仔細觀察用戶的喜好,並了解他們的技能水平和體驗,並觀察他們在界面中如何操作。不要迷戀於追逐設計趨勢的更新,或是不斷添加新的功能。始終記住,首要的任務是關注你的用戶,這樣才能創造出一個能讓用戶達成目標的界面。
重視UI模型
在軟體中,用戶的大部分時間都消耗在界面操作中(數據錄入、數據修改、數據查閱等等),這點與瀏覽為主的網站類頁面的用戶操作完全不同。我們無需畫蛇添足,用戶希望在新創造的界面中看到那些已有的、相似功能的或遵循基本操作方式的軟體界面。所以利用已成慣例的UI模型,將使用戶產生親切感。
保持一致
用戶需要知道一旦他們學會做某項操作,那么下次也同樣可行。語言、布局和設計是需要保持一致性的幾個界面元素。一致性的界面可以讓用戶對於如何操作有更好的理解,從而提升效率。
清晰的視覺層次
設計時,要讓用戶把注意力放在最重要的地方。每一個元素的尺寸、顏色還有位置,它們為理解界面共同指明了道路。清晰的層級關係將對降低外觀的複雜性起到重要作用(甚至當行為本身也同樣複雜的時候)。
提供反饋
界面要始終保持和用戶的溝通,不管是他們的行為對錯與否。隨時提示用戶的行為:狀態更改、出現錯誤或者異常信息。視覺提示或是簡單文字提醒都能告訴用戶,他們的行為是否能夠達到預期的結果。
容錯機制
無論你的設計多么的清晰明了,用戶都會犯錯。你的界面應當允許並要為用戶提供可以撤銷行為的方式,並且對五花八門的輸入數據儘量寬容(沒人願意只是因為填錯了生日的格式而重頭再來)。同樣,如果用戶的行為引起了一個錯誤,在恰當的時機運用信息顯示什麼行為是錯誤的,並確保用戶明白如何防止這種錯誤的再次發生。
鼓勵用戶
一旦用戶在完成了關鍵操作,要及時告知用戶(彈出對話框等)。值得注意的是把一個複雜的流程任務分解為若干簡單步驟將會更顯繁複和讓人精力分散。所以無論正在執行的任務有多么複雜和漫長在界面上要保持流程的不間斷性。
語言有親和力
所有的界面或多或少都有文字在其上,讓文稿儘量口語化,而不是華美辭藻的堆砌。為行為提供清晰、簡明的標籤,保持簡樸的文字敘述。用戶對此將會很讚賞,因為他們不再是聽命於他人的官腔——他們聽到的是如朋友般甚至自己說話的表述方式。
保持簡潔
最好的用戶界面就是沒有界面。優秀的軟體界面中,你看不到華而不實的UI修飾,更看不到那些用不到的設計元素。所以當想著是否要在界面上加一個新功能或是新元素的時候,再思考一下:用戶或者界面中真的需要這些么?為什麼用戶想要在這裡當這個小巧的動態圖示?是否只是因為出於自我喜好和頁面的漂亮而去添加這些元素?優秀的UI工程師做出來的軟體界面不會十分華麗,界面中沒有任何分散用戶注意力打攪用戶操作的元素。甚至應該達到在用戶使用系統的時候完全注意不到頁面和操作複雜的問題,一切都應該是順理成章的。
套用產品
工業套用
觸控螢幕:是可用以取代機械式的按鈕皮膚,並藉由可接收觸頭(無論是手指或膠筆尖等)等輸入信號的感應式液晶顯示設備達到了機械設備與人類之間的人機界面。
娛樂套用
遊戲機:遊戲機就像一台
電腦,主要組成組件都十分類似,也有各種的軟體和硬體可供安裝使用。遊戲機主要的硬體組件包括
CPU、存儲器、存儲媒體、影音輸出設備、信號輸入設備等機械設備。其中,遊戲機的信號輸入設備如手把或搖桿,將電視、電腦藉由簡單的一些按鈕達到與人類之間巧妙的互動,其遊戲軟體更藉由一些圖形與文字達到機械與人類之間娛樂的人機界面。
電腦套用
設計規範
一致性原則
堅持以用戶體驗為中心設計原則,界面直觀、簡潔,操作方便快捷,用戶接觸軟體後對界面上對應的功能一目了然、不需要太多培訓就可以方便使用本套用系統。
字型
-保持字型及顏色一致,避免一套主題出現多個字型;
-不可修改的欄位,統一用灰色文字顯示。
對齊
-保持頁面內元素對齊方式的一致,如無特殊情況應避免同一頁面出現多種數據對齊方式。
表單錄入
-在包含必須與選填的頁面中,必須在必填項旁邊給出醒目標識(*);
-各類型數據輸入需限制文本類型,並做格式校驗如電話號碼輸入只允許輸入數字、信箱地址需要包含“@”等,在用戶輸入有誤時給出明確提示。
滑鼠手勢
-可點擊的按鈕、連結需要切換滑鼠手勢至手型;
保持功能及內容描述一致
-避免同一功能描述使用多個辭彙,如編輯和修改,新增和增加,刪除和清除混用等。建議在項目開發階段建立一個產品詞典,包括產品中常用術語及描述,設計或開發人員嚴格按照產品詞典中的術語辭彙來展示文字信息。
準確性原則
使用一致的標記、標準縮寫和顏色,顯示信息的含義應該非常明確,用戶不必再參考其它信息源。
顯示有意義的出錯信息,而不是單純的程式錯誤代碼。
避免使用文本輸入框來放置不可編輯的文字內容,不要文本將輸入框當成標籤使用。
使用縮進和文本來輔助理解。
使用用戶語言辭彙,而不是單純的專業計算機術語。
高效地使用顯示器的顯示空間,但要避免空間過於擁擠。
保持語言的一致性,如“確定”對應“取消”,“是”對應“否”。
布局合理化原則
在進行UI設計時需要充分考慮布局的合理化問題,遵循用戶從上而下,自左向右瀏覽、操作習慣,避免常用業務功能按鍵排列過於分散,以造成用戶滑鼠移動距離過長的弊端。多做“減法”運算,將不常用的功能區塊隱藏,以保持界面的簡潔,使用戶專注於主要業務操作流程,有利於提高軟體的易用性及可用性。
選單
-保持選單簡潔性及分類的準確性,避免選單深度超過3層。
-選單中功能是需要打開一個新頁面來完成的,需要在選單名字後面加上“…”。【只適用於C/S架構,B/S請無視】。
按鈕
確認操作按鈕放置左邊,取消或關閉按鈕放置於右邊。
功能
-未完成功能必須隱藏處理,不要置於頁面內容中,以免引起誤會。
排版
-所有文字內容排版避免貼邊顯示(頁面邊緣),儘量保持10-20像素的間距並在垂直方向上居中對齊;各控制項元素間也保持至少10像素以上的間距,並確保控制項元素不緊貼於頁面邊沿。
表格數據列表
-字元型數據保持左對齊,數值型右對齊(方便閱讀對比),並根據欄位要求,統一顯示小數位位數。
滾動條
-頁面布局設計時應避免出現橫向滾動條。
頁面導航(麵包屑導航)
-在頁面顯眼位置應該出現麵包屑導航欄,讓用戶知道當前所在頁面的位置,並明確導航結構,如:首頁>新聞中心>歐科智慧型招商服務平台正式發布,其中帶下劃線部分為可點擊連結。
信息提示視窗
-信息提示視窗應位於當前頁面的居中位置,並適當弱化背景層以減少信息干擾,讓用戶把注意力集中在當前的信息提示視窗。一般做法是在信息提示視窗的背面加一個半透明顏色填充的遮罩層。
系統操作合理性原則
儘量確保用戶在不使用滑鼠(只使用鍵盤)的情況下也可以流暢地完成一些常用的業務操作,各控制項間可以通過Tab鍵進行切換,並將可編輯的文本全選處理。
查詢檢索類頁面,在查詢條件輸入框內按回車應該自動觸發查詢操作。
在進行一些不可逆或者刪除操作時應該有信息提示用戶,並讓用戶確認是否繼續操作,必要時應該把操作造成的後果也告訴用戶。
信息提示視窗的“確認”及“取消”按鈕需要分別映射鍵盤按鍵“Enter”和“ESC”。
避免使用滑鼠雙擊動作,不僅會增加用戶操作難度,還可能會引過用戶誤會,認為功能點擊無效。
表單錄入頁面,需要把輸入焦點定位到第一個輸入項。用戶通過Tab鍵可以在輸入框或操作按鈕間切換,並注意Tab的操作應該遵循從左向右、從上而下的順序。
系統回響時間原則
系統回響時間應該適中,回響時間過長,用戶就會感到不安和沮喪,而回響時間過快也會影響到用戶的操作節奏,並可能導致錯誤。因此在系統回響時間上堅持如下原則:
一個長時間的處理完成時應給予完成警告信息。