Atititi 軟體介面gui開發之道 attilax著

1. 概覽 2

1. 概覽
   1.  asm>native>vm>script>dsl

從機器語言，組合語言到本地native語言(c c++) 到vm語言(java  c#) 再到指令碼語言(js php python等) 再到dsl（h5 sql 影象處理halcon matlab）

語言層次越高，可讀性一般越好，可移植性越好，不過效能也越差了。。當然如果使用同樣的類庫的話，只是寫點膠水程式碼的話，差別到是相對來說不大了。

機器語言， 可以說徹底淘汰，唯一的優點就是效能，其他基本全是缺點。。

組合語言，貌似也基本淘汰，比起機器語言，提升了很大的可讀性。。

native語言(c c++) 相對組合語言可讀性又大幅提升，效能方面不如彙編，但比vm語言要高。。。缺點是開發效率，以及可移植性仍然需要提升。。很多影象庫貌似都是使用此開發。。依賴於效能的應用大有所為。

vm語言(java  c#)  改進了native語言的問題，增加一個vm層隔離開了os。目前的業界高層應用開發主力

指令碼語言 帶來更高的生產力。但目前ide的問題，大型複雜企業級開發還難當重任，目前貌似在輕複雜度程式碼領域比較大發展。

Dsl語言 ，領域特定語言。。比如H5做介面。。Sql做資料庫查詢。Matlab halcon使用的語言，用來做影象處理。。

更高的開發效率，特別對於特定領域，影象處理，介面，資料庫查詢等大有優勢。。正則表示式，用來文字搜尋等。

Dsl語言本身效能很差，但是它如果是呼叫類庫的，類庫使用底層語言書寫的，所以對效能不影響。

Native的就不推薦了，swing winform 安卓 ios native。。

外掛體系也沒落了，flash  Silverlight

 Applet 等。。  

Dsl體系正主流。。H5 wpf（xaml）。。但是推薦公有標準化的h5..不推薦wpf了，wpf就是ms的h5。。Java體系基本沒有標準化的dsl，只有一些builder框架有一些私有的h5.。。

微信小程式就是騰訊的h5，也是屬於一種私有化dsl ，私有化h5

介面是個很專門的領域，需要領域特點語言來做。。   

Dsl系列是目前最好的趨勢了。。Dsl裡面最好的額就是h5了，跨平臺，通用。。

1. 起源20世紀80年代20世紀80年代

20世紀80年代蘋果公司首先將圖形使用者介面引入微機領域，推出的Macintosh以其全滑鼠、下拉選單操作和直觀的圖形介面，引發了微機人機介面的歷史性的變革。而後微軟公司推出了Windows系統，從Windows 3.0發展到Windows 10，使得GUI被應用於使用者面更廣的個人計算機平臺。圖形介面的特點是人們不需要記憶和鍵入繁瑣的命令，只需要使用滑鼠直接操縱介面。

1. 準則 10大準則

減少使用者的認知負擔

保持介面的一致性

滿足不同目標使用者的創意需求

使用者介面友好性

圖示識別平衡性

圖示功能的一致性

建立介面與使用者的互動交流

更為人性化的視覺優化

更具識別性的圖示及其他元素

更具可操控性和擴充性的使用易用性

更具有企業品牌特色的視覺識別性

1. 應用領域 10大領域

手機通訊移動產品

電腦操作平臺

軟體產品

PDA產品

數碼產品

車載系統產品

智慧家電產品

遊戲產品

產品的線上推廣

網頁設計

1. UI趨勢 cli>gui>nui/cui
2. 常用的介面ui體系
   1. H5標準與私有ui規範

form mvc 私有化h5 h5 webpage

私有化h5  javafx wpf

ASP.NET Form到ASP.NET MVC，最後到AngularJS +Bootstrap，從Windows Forms到WPF。走技術的變更與業務領域結合的路線，一直對.NET開發很有信心。

1. 1. 倆大模型 dom模型與畫素級自繪製

1. 1. 三大Gui風格體系

1. 1. 1. Page體系  h5
      2. Windows體系
      3. stage舞臺場景Scene 體系

展示stage舞臺，stage舞臺是一個類似於Swing中的JWindow的頂級容器，代表一個視窗。它用於容納場景Scene，場景Scene是一個類似於Swing的JFrame的容器

1. 介面控制元件dom體系
   1. 2 組成部分? 桌面? 視窗? 單一檔案介面? 多檔案介面? 標籤? 選單? 圖示? 按鈕
   2. 佈局體系  容器類 webkit控制元件 表單form  winform
   3. 選單控制元件 右鍵選單，托盤選單 工具條
   4. 常用控制元件 文字框，按鈕，標籤等
   5. 資料控制元件 表格  樹形控制元件
   6. 多媒體
   7. 其他 托盤圖示，檔案與資料夾選擇 對話方塊
   8. Icon圖示   font icon
   9. H5 體系
   10. 報表與圖表
2. 佈局模式
   1. Flow float
   2. Grid佈局 7. CardLayout （tab 佈局）4

7. CardLayout （tab 佈局） 4

1. 1. 其他

1. 佈局的繼承結構 1

2. Absoluti 佈局（常用） 1

3. Dock、Anchor佈局//SpringLayout  (常用) 2

4. Flow 佈局（不常用） 2

5. BorderLayout （不常用） 2

6. BoxLayout（ html預設佈局） 3

7. CardLayout （tab 佈局） 4

8. GridLayout( 不常用) 4

9. GridBagLayout (不常用) 4

10. Fixed 定位（不常用） 4

11. GroupLayout(不推薦) 4

12. 別的佈局 5

12.1. DefaultToolBarLayout 5

12.2. MetalRootLayout 5

12.3. JBuilder自帶的VerticalFlowLayout 5

12.4. OverlayLayout 5

12.5. RootLayout 5

13. Java的三大的佈局:border,flow,grid 6

Anchor佈局   3Dock flow float

Anchor佈局   3Dock flow float

1. 報表與圖表 （柱狀圖，餅圖，線圖趨勢圖，金字塔，地圖，架構圖）等
   1. Dom模型 （例如Svg）
   2. 自繪製模式

比如h5 的Canvas，其他語言的gdi

1. Mvc  與服務端ui
   1. 漸漸消逝的服務端mvc與服務端ui

Jsp jsf jstl wpf aspx等服務端ui

1. 事件處理與介面邏輯script
   1. Gui執行緒
   2. 拖放
   3. Js

1. 架構體系
   1. Bs cs 桌面  web 移動
   2. 離線Web應用程式

1. -----------------其他--------------------------

1. 多點觸控gui

使用者介面

作。控制方法包括滑動,輕觸開關及按鍵。與系統互動包括滑動(swiping),輕按（tapping）,擠壓(pinching)及旋轉(reverse pinching)。此外,通過其內建的加速器,可以令其旋轉裝置改變其y軸以令螢幕改變方向，這樣的設計令iPhone更便於使用。

1. 1. 包括滑動(swiping),輕按（tapping）,擠壓(pinching)及旋轉(reverse pinching)。
   2. 加速器 旋轉
2. 介面自繪 畫素體系
   1. 2d paint  GDI+繪圖
   2. H5 canvas
   3. Cocos2d

1. 特效與動畫
   1. 過渡、動畫和變換

1. Gui常用工具與框架與類庫
   1. Dw cs ajax fetch vue jquery
   2. 雙向繫結
   3. Swing javafx wpf winform qt h5
   4. 客戶端mvc
2. 其他
   1. Webkit渲染，

1. 1. 國際化

 使用Unicode18.2 讓應用程式感知翻譯18.3 動態切換語言18.4 翻譯應用程式

1. 1. 自定義外觀　　樣式表   子類化 css
2. Plugin體系 外掛
3. 三維圖形
   1.  使用OpenGL繪圖  three.js
   2. 使用幀快取物件生成疊加

1. 參考資料

《HTML5權威指南【非常全面詳實的網頁設計參考書】》(（美）弗里曼 著)【簡介_書評_線上閱讀】 - 噹噹圖書.html

Atitit gui介面ui技術發展史與未來趨勢

《C++ GUI Qt 4程式設計（第二版）(Trolltech的Qt培訓教材，生動、全面、深刻地闡明瞭Qt程式的設計理念，輕鬆建立跨平臺的解決方案。)》(（加）布蘭切特)【簡介_書評_線上閱讀】 - 噹噹圖書.html

《Java Swing圖形介面開發與案例詳解》(王鵬)【簡介_書評_線上閱讀】 - 噹噹圖書.html

《C# WinForm 實踐開發教程 (軟體職業技術學院“十一五”規劃教材)》(錢哨)【簡介_書評_線上閱讀】 - 噹噹圖書.html

《JavaFX本質論》(（美）安德森)【簡介_書評_線上閱讀】 - 噹噹圖書.html

atitit.軟體開發GUI 佈局管理總結java swing wpf web html c++ qt php vOBB.doc

作者:: 常用名：艾提拉  曾用名 艾龍

綽號:老哇的爪子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]