zoukankan      html  css  js  c++  java
  • 《iOS Human Interface Guidelines》——Wallet

    Wallet


    Wallet(钱包)帮助人们查看和管理Pass(凭证),这是一种相似于登机牌、优惠券、会员卡、奖励卡和各种票的物理凭证的数字替代。Wallet也同意人们加入信用卡、借记卡和储值卡来和Apple Pay一起使用。在你的app中。你能够创建一个Pass,将其分配给用户,然后当内容更改时更新它。




    PassKit 框架使自己定义内容来接收Pass以及当用户的Pass库中有它的时候使用Pass变得easy。

    (查看Wallet Developer Guide来学习关于Wallet的主要技术以及怎样在你的app中使用PassKit API。)以下这些指南能够帮助你创建一个人们乐于放在Wallet中并享受使用它的Pass。


    设计在全部设备上都好看的Pass。当你选择一种Pass风格——比如登机牌、优惠券、票、奖励卡或者通用的pass——你会获得一个独特的布局和非常多能够编辑的区域(查看Pass Style Sets the Overall Visual Appearance获取不同pass风格的细节)。

    系统会在每一个设备上恰当地显示你的pass。所以正确地使用pass的区域非常重要。比方说在Apple Watch上,strip和略缩图是不显示的。所以你不会想把必要的信息放在这些区域中。查看Designing Passes for Apple Watch学习很多其它关于Apple Watch上pass布局的内容。


    使用合适的pass区域来显示文本。使用区域让旁观用户能够获取你pass中的全部信息,并给你的pass一个一致的外观。

    还应该避免在图像上放置文字和使用自己定义的字体。因为不是全部的设备都会显示全部的图片。并且自己定义的字体会让用户读起来非常困难。


    不要使用依托于设备的语言。

    你无法预期你的用户会在什么设备上查看你的pass,所以你不会想使用在一些特殊的设备上没有意义的语言。比方说,告诉用户去“滑动界面”的文字内容在Apple Watch上没有意义。


    尽可能地避免简单地复制已经存在的物理凭证。

    Wallet有着确定的设计美学,而和这样的美学结合的pass看起来是最好的。

    不要复制物理pass的外观,使用这个机会去设计一个遵循Wallet形式和功能的清晰的、简洁的pass。


    你放在pass前面板的信息要有讲究。人们期待能够看一眼pass就非常快地获取他们须要的信息,所以pass的前面版应该整洁且易于阅读。假设有其它的信息你认为用户或许会须要,将他放在pass的背面板比挤在前面板要好。注意Apple Watch上的pass不包括背面板。


    避免使用平淡的白色背景。

    pass会在背景是一个鲜明的、立体的颜色或者是使用强烈的生动的颜色的图片时看起来最好。当你设计背景时,永远要确保它不会干扰到内容的可读性。


    为你的公司名使用logo文本区域。

    logo文本区域的文本会在全部的pass上使用一致的字体渲染。

    为了避免和Wallet里的其它pass冲突,推荐你将文本放在logo文本区域而不是使用自己定义的字体。


    使用一个白色的公司logo。

    logo图会放在pass的左上角,靠近你的公司名。提供一个单纯白色版本号的不包括文字的logo会是最好的。假设你想要装饰logo来和渲染的logo文本相匹配。加入一个1像素Y位移、1像素模糊、35%透明度的黑色阴影。


    可能的话使用一个矩形的条形码。因为pass的布局。一个矩形的条形码——比如PDF417——会比方形的二维码看起来好。例如以下右图所看到的,方形的二维码会在两边形成空白区域并且会在垂直方向上使上面和以下的区域变得拥挤。




    性能最好的图片。因为用户常常通过邮件或Safari接收pass。使下载尽可能的快非常重要。为了提升用户体验,使用能达成想要的视觉外观的最小的图片文件。


    当合适的时候更新pass来加强它的有用性。

    即使pass是用来取代基本不会更改的物理凭证的,你的数字pass也能够通过反映现实世界的事件来提供更好的体验。比方说。你能够在飞机延误的时候更新航空登机牌。这样用户就总是能在他们查看pass的时候获取当前的信息。



    本文翻译自苹果官方开发文档

    查看完整合集:https://github.com/Cloudox/iOS-Human-Interface-Guidelines

    版权全部:http://blog.csdn.net/cloudox_

  • 相关阅读:
    关于工作流的思考
    RssBandit.net应用示例(RSS聚集器)[暂未完成]
    前端是否应该将css和js分开设置两个不同岗位
    初中级工程师是否应急于学习html5?
    招聘条件中的学历问题
    禁止拖动屏幕
    html5全屏api
    html5兼容陷阱合集
    borderimage试用心得
    web app的一些特殊meta和link标签
  • 原文地址:https://www.cnblogs.com/llguanli/p/8471440.html
Copyright © 2011-2022 走看看