Question

此问题与已发布的有关图形用户设计的另一个问题有些相关。（Learning to create beautiful /next-generation GUI）

我现在已经阅读了很多关于UI设计的内容。虽然仍然远离经验，但我现在知道一些需要注意的警告。但我担心的不是设计指南。

而是我想知道这是如何在技术上完成的。就像ShaChris23在SO问题中一样，我厌倦了编写“看起来很旧的”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＃（如果需要）。但我正在寻找一种跨平台的方式。

赞赏任何提示

Answer 1

我有点惊讶这个问题因为广泛而没有被关闭，因为有点难以辨别出你真正在问什么。但是，如果您要求一个跨平台框架，使您能够实现令人惊叹的UI设计，请查看kivy。

Answer 2

让我们讨论第一项，即时间线控制。

这将是一系列自定义视图，一个用于标注（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'));

Answer 3

如果您正在为没有通用工具包的多个平台开发，您可能应该为每个平台开发不同的UI。

对于iOS / Android，每个平台都有不同的风格指南。此外，他们的本机API专门用于支持使用这些指南开发的应用程序 - 如果您尝试从头开始构建新的GUI（例如，使用您自己的基于OpenGL的小部件工具包），那么它看起来有多“酷”并不重要。即使您认为它直观且易于使用，但对于习惯于主机平台惯例的用户来说，这可能是违反直觉的，因为他们还没有时间熟悉您的自定义UI。

在您给出的iPhone示例中，是的，按钮将手动布局。有点。他们可能依赖于Cocoa的AutoLayout系统而不是静态定位每个元素。

话虽如此，每次都可能没有必要“发明轮子”。社区开发了大量的UI组件（至少在iOS上） - 例如，看看CocoaPods（特别是，之前我使用过iCarousel来获取覆盖流动效果）。

令人惊叹的GUI：技术如何完成

3 个答案: