【问题标题】:cross platform html5 app, separate designs?跨平台的 html5 应用程序,单独的设计?
【发布时间】:2011-10-31 17:15:59
【问题描述】:

我现在想制作一个适用于基本上所有支持 html5 的设备的应用程序。最后三个让我很难过,因为关于这些设备的应用程序的信息很少。

它们都有不同的屏幕分辨率,它们都需要单独的设计吗?

iPhone 3Gs/ iPhone 4
Motorola Droid
iPod Touch
iPad 2
Samsung Tab 7”
Motorola Xoom
Sony Tablet S

【问题讨论】:

    标签: iphone html cordova galaxy xoom


    【解决方案1】:

    如果您希望它们适合所有设计,您可以使用百分比作为宽度并将所有内容都显示在屏幕上。首先设计一切以适应您最小的屏幕分辨率并在此基础上进行扩展。我的意思是因为 iphone 的分辨率较小,所以首先要让所有必要的内容适合 iphone。然后,如果您想向 ipad 用户或分辨率更高的用户展示其他内容,您可以使用 css 或您的编程语言来显示右侧内容面板或任何您需要的内容以适应额外空间。

    这不是必需的,因为如果您的左栏为 40%,右栏为 60%,它将在 ipad 上填充相同的内容,但根据您的内容,您可能不需要这么多空间,因此您可以用其他空间填充空间仅在较大的设备上提供信息。

    您可以使用 JQuery 获取屏幕宽度并为每种类型和布局显示不同的 css 文件。

    祝你好运

    【讨论】:

    • 为最小的设备编码,然后扩大间距以适应较大的外形尺寸通常会导致体验不佳。
    • 是的,但耗时少得多,不是吗?可以做到这一点并用 phonegap 包装它以在 android 和 iPhone 上工作,流畅的布局是否仍然有效?
    【解决方案2】:

    您应该考虑在所有设备和外形尺寸上提供单一体验对用户的影响。

    手机在房地产方面非常紧张,因此它们通常具有范式演练。获取列表、选择、在堆栈上弹出视图、弹出返回列表等...这是由房地产决定的导航繁重流程。

    平板电脑有更大的空间可以使用,因此您应该利用弹出视图、多个拆分窗格等来利用它......

    它是 HTML5 而不是 UIKit 的事实是无关紧要的。客户想要良好的体验,并期望在不同的外形尺寸上获得不同的体验。

    我建议即使在 HTML5 应用程序中也遵循模型视图控制器。将尽可能多的逻辑推送到一个通用的 javascript 代码模型集中,并且仅在视图上有所不同。和你在 UIKit 中做的一样......

    如果您根据房地产大小创建通用模型和不同视图,至少您只构建 2 个(平板电脑与手机)而不是 2 * 个平台。

    【讨论】:

    • 我只是一个程序员,和UX无关
    • 我的观点是程序员应该使用像 MVC 这样的良好设计模式来允许一个模型/引擎和多个 Ux 视图。我没说你是设计师,我说要为多种体验编写代码。
    • ...程序员应该有很多来处理用户体验。这就是我们创造的。
    猜你喜欢
    • 2019-07-23
    • 2014-02-18
    • 2013-01-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多