令人驚歎的GUI：它在技術上如何完成

這個問題與另一個已經發布的關於圖形用戶設計的問題有些相關。（Learning to create beautiful /next-generation GUI）令人驚歎的GUI：它在技術上如何完成

我已經閱讀了很多關於UI設計的內容。雖然離經驗還很遠，但我現在知道一些需要注意的警告。但我關心的不是設計準則。

這是我想知道這是如何做到技術上。在SO問題中，像ShaChris23一樣，我已經厭倦了編寫「簡單的老式」GTK/Windows GUI。

讓我們採取一些具體的例子：

http://dribbble.com/shots/1130346-iPhone-Mobile-Design-Concept 你看到在頁面的3/4即組分，它是看起來像一個時間線？有沒有一個組件這樣做？你是否手工佈置各個按鈕？沒門。
Springseed也是一個很好的例子。在我看來，它有一個驚人但簡單的用戶界面。它看起來不錯，乾淨，簡單。
最後一個例子：http://dribbble.com/shots/1145034-Outdoors-ui-free-PSD - 我知道這是一個可能或可能不是用軟件實現的PSD。

我的問題不是關於這些非常具體的例子。但假設您已經在Photoshop中設計了您的GUI。現在？你從現在開始如何在技術上實現它？你爲你正在使用的工具包編寫自定義組件嗎？你有沒有爲不同的平臺重新發明輪子，你沒有共同的工具包？（Apple iOS vs Android）。

不是在談論網絡技術，而是真正的應用程序。

順便說一句：我聽說過WPF和東西。如果需要，我正在開發Java，C++和一些C＃。但我正在尋找一種跨平臺的方式。

任何提示讚賞

來源

2014-02-26 Atmocreations

有趣的，你想我建議一個UI框架？或者你問我「如何創建UI框架」？請清楚你完全想要什麼。 – ArunRaj

使用[tag：node.js]。 'npm install phaser'並將其設置爲眩暈。 –

我有點驚訝這個問題還沒有被廣泛的封閉，因爲要分辨你真正要問的東西有點難。但如果您要求一個跨平臺框架，使您能夠實現令人驚歎的UI設計，看看kivy。

來源

2014-03-26 12:44:09

讓我們來討論第一個項目，時間軸控制。

這將是一系列自定義視圖，一個用於標註（1個三角形和一個帶有文本的矩形按鈕），一個時間軸（一行和一組點陣）以及一個包裝視圖，可以接受在時間線上繪製的名稱列表。

每個視圖將負責繪製自己。該視圖可以使用來自psd的拼接圖像，或實際繪製自己。就嘗試開發跨平臺代碼而言，它可以完成，但這通常意味着您必須在每個平臺上接受許多妥協。

作爲一種替代方案，您可以爲您的界面使用html5視圖，並使用本地代碼來連接業務邏輯。

下面是使用JavaScript畫布創建標註的粗略示例。 http://jsfiddle.net/5ZMn9/7/

function Callout() { 
    this.x = 0; 
    this.y = 0; 
    this.width = 0; 
    this.height = 0; 
    this.position = 1; 
    this.name = ""; 
} 
Callout.prototype = { 
    draw: function(canvas) { 
     var callout = this; 
     canvas.drawPolygon({ 
      fillStyle: 'blue', 
      x: callout.x, y: callout.y-12+callout.position*25, 
      radius: 5, 
      sides: 3, 
      rotate: (callout.position)*180 
     }); 
     canvas.drawRect({ 
      fillStyle: 'blue', 
      x: callout.x, y: callout.y, 
      width: 50, 
      height: 20 
     }); 
     canvas.drawText({ 
      fillStyle: '#fff', 
      x: callout.x, y: callout.y+2, 
      fontSize: 8, 
      fontFamily: 'Verdana, sans-serif', 
      text: callout.name    
     }); 
    } 
}; 

function Timeline() { 
    this.x = 0; 
    this.y = 0; 
    this.length = 0; 
    this.stops = 0; 
} 
Timeline.prototype = { 
    draw: function(canvas) { 
     var timeline = this; 
     canvas.drawLine({ 
      strokeStyle: '#960', 
      strokeWidth: 2, 
      x1: timeline.x, y1: timeline.y, 
      x2: timeline.x+timeline.length, y2: timeline.y 
     }); 
     for (var i=0; i < this.stops; i++) { 
      canvas.drawEllipse({ 
       fillStyle: '#c90', 
       x: timeline.x+30+50*i, y: timeline.y, 
       width: 8, height: 8 
      }); 
     } 
    } 
}; 

function Wrapper() { 
    this.names = []; 
    this.height = 300; 
    this.width = 600; 
} 
Wrapper.prototype = { 
    draw: function(canvas) { 
     $(canvas).clearCanvas(); 
     var timeline = new Timeline(); 
     timeline.x = 0; 
     timeline.y = 45; 
     timeline.length = this.names.length*50+10; 
     timeline.stops = this.names.length; 
     timeline.draw(canvas); 
     for (var i = 0; i<this.names.length; i++) { 
      var callout = new Callout(); 
      callout.x = i*50+30; 
      callout.y = i%2*50+20; 
      callout.position = 1-i%2; 
      callout.name = this.names[i]; 
      callout.width=90; 
      callout.draw(canvas); 
     } 
    } 
}; 

var wrapper = new Wrapper(); 
wrapper.names = ["One","Two","Three","Four","Five"]; 
wrapper.draw($('canvas'));

來源

2014-03-25 00:21:53 B2K

如果您正在爲多個平臺沒有共同的開發工具包，你可能應該發展爲每個平臺不同的UI。

在iOS/Android的情況下，每個平臺都有不同的風格指南。此外，它們的本地API專門用於支持使用這些指南開發的應用程序 - 如果您嘗試從頭開始構建新的GUI（例如，使用您自己的基於OpenGL的窗口小部件工具包），它看起來不會很酷。即使你認爲它是直觀且易於使用的，但對於習慣於主機平臺慣例的用戶來說，這可能是違反直覺的，因爲他們還沒有時間熟悉自定義用戶界面。

在你給出的iPhone例子中，是的，這些按鈕將被手動佈置。有點。他們可能依靠Cocoa的AutoLayout系統，而不是靜態定位每個元素。

這就是說，可能沒有必要每次都「發明輪子」。社區已經開發了大量UI組件（至少在iOS上），例如，看看CocoaPods（特別是，我之前使用iCarousel獲得了封面流式效果）。

來源

2014-03-26 03:12:14 alaroldai

令人驚歎的GUI：它在技術上如何完成

回答

相關問題