Atitit 前端與ui開發的技術道術與藝術 attilax著 1. 概述 2 1.1. 適用領域： ui相關領域（包括h5 web ios android安卓 cs桌面程式 遊戲程式 等
Atitit 前端與ui開發的技術道術與藝術 attilax著
- 概述
-
- 適用領域： ui相關領域（包括h5 web ios android安卓 cs桌面程式 遊戲程式 等）
佈局 html js css
最古老的使用者介面是在各式各樣物體制作符號、圖形，使人類與物件之間產生互動介面，比如說當人類看到招牌即知道這棟房屋的作用為何。
聲音、旗幟、手勢的運用，是讓人與人或人與裝置之間的使用者介面，例如在戰場或樂團演奏上，甚至是運用龜甲、錢幣的卜卦，老師使用黑板作為與學生的使用者介面，而算盤亦是由珠子所構成的早期人機介面。
-
-
- 批量介面（風行於1945-1968）
-
批量介面（風行於1945-1968）： 所有的輸入資料預先設置於程式或命令列引數中。
CLI（command-line interface，命令列介面）是指可在使用者提示符下鍵入可執行指令的介面，它通常不支援滑鼠，使用者通過鍵盤輸入指令，計算機接收到指令後，予以執行。
算機接收到指令後，予以執行。也有人稱之為字元使用者介面（CUI）。
早期電腦批量介面（風行於1945-1968）： 所有的輸入資料預先設置於程式或命令列引數中。命令列介面（風行於1969-1983）：使用者通過鍵盤輸入指令，電腦接收到指令後，予以執行。
其他現在還有很多一些使用者介面，由原本的按鈕、紙本等傳統古代介面進化至直接用手指、或者特殊的筆端觸控觸控式螢幕
-
-
- 現在觸控類ui 語音類 滑動(swiping 旋轉
-
多點觸控gui
使用者介面
作。控制方法包括滑動,輕觸開關及按鍵。與系統互動包括滑動(swiping),輕按（tapping）,擠壓(pinching)及旋轉(reverse pinching)。此外,通過其內建的加速器,可以令其旋轉裝置改變其y軸以令螢幕改變方向，這樣的設計令iPhone更便於使用。
包括滑動(swiping),輕按（tapping）,擠壓(pinching)及旋轉(reverse pinching)。
加速器 旋轉
-
-
- 未來nui vr ar
-
未來的使用者介面：
更加真實互動的虛擬實境：舉例來說，就是比個粗魯動作就能當作Control-Alt-Delete鍵的意思。腦機介面：它是在人或動物腦（或者腦細胞的培養物）與外部裝置間建立的直接連線通路，目前還在實驗階段，科學家在全身癱瘓病患實際腦中植入電腦晶片，已成功利用腦電波來控制電腦，畫出簡單的圖案及電腦遊戲，不過未來研究成功時，就可讓人類就可利用腦波作為使用者介面。[2]
本詞條缺少名片圖，補充相關內容使詞條更完整，還能快速升級，趕緊來編輯吧！
“自然”一詞是相對圖形使用者介面（GUI）而言的，GUI要求使用者必須先學習軟體開發者預先設定好的操作，而NUI則只需要人們以最自然的交流方式（如語言和文字）與機器互動。直觀的說，使用NUI的計算機不需要鍵盤或滑鼠。特別是觸控技術將使人機互動變得更加自然直觀，更為人性化。
對話式UI通過機器學習之後，可以無限地消滅層級關係，這樣可以減少使用者操作路徑，直達目標。
堅持以使用者體驗為中心設計原則，介面直觀、簡潔，操作方便快捷，使用者接觸軟體後對介面上對應的功能一目瞭然、不需要太多培訓就可以方便使用本應用系統。
字型-保持字型及顏色一致，避免一套主題出現多個字型；-不可修改的欄位，統一用灰色文字顯示。
對齊-保持頁面內元素對齊方式的一致，如無特殊情況應避免同一頁面出現多種資料對齊方式。
表單錄入-在包含必須與選填的頁面中，必須在必填項旁邊給出醒目標識（*）；-各型別資料輸入需限制文字型別，並做格式校驗如電話號碼輸入只允許輸入數字、郵箱地址需要包含“@”等，在使用者輸入有誤時給出明確提示。
滑鼠手勢-可點選的按鈕、連結需要切換滑鼠手勢至手型；
保持功能及內容描述一致-避免同一功能描述使用多個詞彙，如編輯和修改，新增和增加，刪除和清除混用等。建議在專案開發階段建立一個產品詞典，包括產品中常用術語及描述，設計或開發人員嚴格按照產品詞典中的術語詞彙來展示文字資訊。
使用一致的標記、標準縮寫和顏色，顯示資訊的含義應該非常明確，使用者不必再參考其它資訊源。
顯示有意義的出錯資訊，而不是單純的程式錯誤程式碼。
避免使用文字輸入框來放置不可編輯的文字內容，不要文字將輸入框當成標籤使用。
使用縮排和文字來輔助理解。
使用使用者語言詞彙，而不是單純的專業計算機術語。
高效地使用顯示器的顯示空間，但要避免空間過於擁擠。
保持語言的一致性，如“確定”對應“取消”,“是”對應“否”。
在進行UI設計時需要充分考慮佈局的合理化問題，遵循使用者從上而下，自左向右瀏覽、操作習慣，避免常用業務功能按鍵排列過於分散，以造成使用者滑鼠移動距離過長的弊端。多做“減法”運算，將不常用的功能區塊隱藏，以保持介面的簡潔，使使用者專注於主要業務操作流程，有利於提高軟體的易用性及可用性。
選單-保持選單簡潔性及分類的準確性，避免選單深度超過3層。-選單中功能是需要開啟一個新頁面來完成的，需要在選單名字後面加上“…”。【只適用於C/S架構，B/S請無視】。
按鈕 確認操作按鈕放置左邊，取消或關閉按鈕放置於右邊。
功能-未完成功能必須隱藏處理，不要置於頁面內容中，以免引起誤會。
排版-所有文字內容排版避免貼邊顯示（頁面邊緣），儘量保持10-20畫素的間距並在垂直方向上居中對齊；各控制元件元素間也保持至少10畫素以上的間距，並確保控制元件元素不緊貼於頁面邊沿。
表格資料列表-字元型資料保持左對齊，數值型右對齊（方便閱讀對比），並根據欄位要求，統一顯示小數位位數。
滾動條-頁面佈局設計時應避免出現橫向滾動條。
頁面導航（麵包屑導航）-在頁面顯眼位置應該出現麵包屑導航欄，讓使用者知道當前所在頁面的位置，並明確導航結構，如：首頁>新聞中心>歐科智慧招商服務平臺正式釋出，其中帶下劃線部分為可點選連結。
資訊提示視窗-資訊提示視窗應位於當前頁面的居中位置，並適當弱化背景層以減少資訊干擾，讓使用者把注意力集中在當前的資訊提示視窗。一般做法是在資訊提示視窗的背面加一個半透明顏色填充的遮罩層。
儘量確保使用者在不使用滑鼠（只使用鍵盤）的情況下也可以流暢地完成一些常用的業務操作，各控制元件間可以通過Tab鍵進行切換，並將可編輯的文字全選處理。
查詢檢索類頁面，在查詢條件輸入框內按回車應該自動觸發查詢操作。
在進行一些不可逆或者刪除操作時應該有資訊提示使用者，並讓使用者確認是否繼續操作，必要時應該把操作造成的後果也告訴使用者。
資訊提示視窗的“確認”及“取消”按鈕需要分別對映鍵盤按鍵“Enter”和“ESC”。
避免使用滑鼠雙擊動作，不僅會增加使用者操作難度，還可能會引過使用者誤會，認為功能點選無效。
表單錄入頁面，需要把輸入焦點定位到第一個輸入項。使用者通過Tab鍵可以在輸入框或操作按鈕間切換，並注意Tab的操作應該遵循從左向右、從上而下的順序。
系統響應時間應該適中，響應時間過長，使用者就會感到不安和沮喪，而響應時間過快也會影響到使用者的操作節奏，並可能導致錯誤。因此在系統響應時間上堅持如下原則：
2-5秒視窗顯示處理資訊提示，避免使用者誤認為沒響應而重複操作；
5秒以上顯示處理視窗，或顯示進度條；
一個長時間的處理完成時應給予完成警告資訊。[4]
- GUI控制元件體系
- 動畫與特效
- 參考
Atititi ui之道 attilax著 v3 s11.docx
《HTML5權威指南【非常全面詳實的網頁設計參考書】》(（美）弗里曼 著)【簡介_書評_線上閱讀】 - 噹噹圖書.html
Atitit gui介面ui技術發展史與未來趨勢
《C++ GUI Qt 4程式設計（第二版）(Trolltech的Qt培訓教材，生動、全面、深刻地闡明瞭Qt程式的設計理念，輕鬆建立跨平臺的解決方案。)》(（加）布蘭切特)【簡介_書評_線上閱讀】 - 噹噹圖書.html
《Java Swing圖形介面開發與案例詳解》(王鵬)【簡介_書評_線上閱讀】 - 噹噹圖書.html
《C# WinForm 實踐開發教程 (軟體職業技術學院“十一五”規劃教材)》(錢哨)【簡介_書評_線上閱讀】 - 噹噹圖書.html
《JavaFX本質論》(（美）安德森)【簡介_書評_線上閱讀】 - 噹噹圖書.html
自然使用者介面_百度百科.mhtml
從GUI到CUI：人工智慧UI會長啥樣？ _ 人人都是產品經理.mhtml
作者:: 常用名：艾提拉 曾用名 艾龍
綽號:老哇的爪子claw of Eagle 偶像破壞者Iconoclast image-smasher
捕鳥王"Bird Catcher kok 虔誠者Pious 宗教信仰捍衛者 Defender Of the Faith. 卡拉卡拉紅斗篷 Caracalla red cloak
簡稱：： Emir Attilax Akbar 埃米爾 阿提拉克斯 阿克巴
全稱：：Emir Attilax Akbar bin Mahmud bin attila bin Solomon bin adam Al Rapanui 埃米爾 阿提拉克斯 -阿克巴 - 馬哈茂德 - 阿提拉 - 所羅門 - 亞當 阿爾 拉帕努伊
熱衷於在it 宗教 哲學 經濟學 教育 法學 醫學 動植物學 管理 歷史 文學 音樂 藝術 軍事等各個領域均取得了一定成果
EMAIL:[email protected]