安卓应用部件_设计应用程序小部件的痛苦和喜悦

安卓应用部件

Some people say widgets are a thing of the past, but recently we faced a market for which this was one of the main features users were asking for. A bit of googling showed there are not a lot of useful articles covering widget design (most information is found in human interface guidelines and material design), though development is more widely covered.

有人说小部件已成为过去,但是最近我们面对的市场是用户要求的主要功能之一。 有点谷歌搜索表明,尽管开发涉及的范围更广,但没有很多有用的文章涵盖小部件设计(大多数信息可在人机界面指南和材料设计中找到)。

Because of that, this article will cover how to design a widget for both platforms. Let’s start with the basics, although I’m sure most of you know what a widget is. :)

因此,本文将介绍如何为两个平台设计小部件。 让我们从基础开始,尽管我敢肯定你们大多数人都知道小部件是什么。 :)

什么是小部件? (What are widgets?)

Widgets are mini application views that are embedded on the home or lock screen of smartphones. They allow users to interact with an app without opening the app itself. They usually receive periodic updates and are very useful for displaying small amounts of data or app-specific functionality information that’s important right now. For example, our widget is for a telecom and displays tariff name, current balance, remaining data…

小部件是嵌入在智能手机主屏幕或锁定屏幕上的微型应用程序视图。 它们允许用户与应用交互,而无需打开应用本身。 它们通常会定期更新,对于显示少量数据或特定于应用程序的功能信息非常有用,这些信息现在很重要。 例如,我们的窗口小部件用于电信,并显示费率名称,当前余额,剩余数据…

小部件设计 (Widget design)

When we get to the topic of designing widgets, a lot of questions open up. Especially since we have two different platforms to design for, different screen sizes and options users want to have. Some users want to see just the basic info, for example, the amount left on their account, whereas others want to see more details, but the thing that connects them is that both want to see the information instantly. Another problem is that there is no strict definition of sizes or detailed info on how to design the widget. For most of us (designers) that is frustrating, since we want to create a mockup which will show how the widget is really going to look like before developing it.

当我们谈到设计小部件的主题时,就会出现很多问题。 特别是由于我们要设计两个不同的平台,因此用户希望拥有不同的屏幕尺寸和选项。 有些用户只想查看基本信息,例如,帐户上剩余的金额,而有些用户想查看更多的详细信息,但联系他们的是他们俩都希望即时查看信息。 另一个问题是,没有大小的严格定义或有关如何设计小部件的详细信息。 对于我们大多数人(设计人员)来说,这令人沮丧,因为我们要创建一个模型,该模型将显示小部件在开发之前的外观。

The first step in designing the widget is to define what information your widget is going to show. It would be good to do some research and define which information your users would like to see.

设计窗口小部件的第一步是定义窗口小部件将显示的信息。 进行一些研究并定义您的用户希望查看哪些信息将是很好的。

Widgets can contain text, icons, buttons, images and more. They don’t contain input fields, checkboxes or radio buttons.

小部件可以包含文本,图标,按钮,图像等。 它们不包含输入字段,复选框或单选按钮。

Image for post

iOS小工具 (iOS widget)

iOS widgets are a little bit easier to design, since there is a lot predefined. Usually there is only one widget per application and one configuration screen.

由于有许多预定义的功能,所以iOS小部件的设计要容易一些。 通常,每个应用程序只有一个小部件和一个配置屏幕。

When you first start thinking about the iOS widget, go through the human interface guidelines on that topic: https://apple.co/3d9xVQI

当您第一次开始考虑iOS小部件时,请遵循有关该主题的人机界面指南: https : //apple.co/3d9xVQI

There is a lot of info to be taken from them, these are the main points to keep in mind when designing the widget:

从中可以获取很多信息,这些是设计小部件时要牢记的要点:

  • the width of a widget varies, depending on the device and orientation

    小部件的宽度会有所不同,具体取决于设备和方向
  • there are two states: collapsed or expanded — keep in mind that not all widgets support expansion. On iOS 13 the “show more” and “show less” are replaced with just an arrow down / up

    有两种状态:折叠或展开-请记住,并非所有小部件都支持展开。 在iOS 13上,“显示更多”和“显示更少”仅用向下/向上箭头替换
  • a collapsed widget is the height of roughly two and a half table rows — taking into consideration that one row is 44px we have a height of 110px for a collapsed widget. It shows essential information that can stand alone

    折叠小部件的高度大约为两行半表格-考虑到一行为44px,折叠小部件的高度为110px。 它显示了可以独立存在的基本信息

  • an expanded widget is ideally no taller than the height of the screen. It shows additional information.

    扩展小部件的高度最好不超过屏幕的高度。 它显示其他信息。
  • use system font San Francisco (SF) in black or dark grey

    使用黑色或深灰色的系统字体旧金山(SF)
  • avoid customizing background and never use a photo as a background

    避免自定义背景,并且永远不要将照片用作背景
  • avoid extending content to the edges of a widget, use the app icon at the top of your widget for alignment guidance. Provide a margin of at least a few pixels between each edge and the content

    为避免将内容扩展到窗口小部件的边缘,请使用窗口小部件顶部的应用程序图标进行对齐指导。 在每个边缘和内容之间提供至少几个像素的边距
  • let people tap the content itself to see or edit it in your app. Never use your widget to open other apps

    人们可以点击内容本身以在您的应用中查看或编辑它。 切勿使用小部件打开其他应用
  • if your widget provides additional functionality when someone is logged into your app, make sure people know about this. For example, an app that shows your mobile subscription info will have a message like this: “Sign into the app to view your account status.” when you aren’t logged in.

    如果当某人登录到您的应用程序时您的窗口小部件提供了其他功能,请确保人们对此有所了解。 例如,显示您的移动订阅信息的应用程序将显示以下消息:“登录到该应用程序以查看您的帐户状态。” 未登录时。

Mocking up a widget on iOS

在iOS上模拟小部件

You can create a mockup of your widget in order to define the design or get the client’s approval.

您可以创建窗口小部件的模型,以定义设计或获得客户的认可。

Here is a list of elements you need to think about in order to create a high fidelity mockup:

这是创建高保真模型时需要考虑的元素列表:

  1. collapsed height - 110px including the header

    折叠高度-110px(包括标题)
  2. header height - 36px

    标头高度-36像素
  3. rounded corners - 13

    圆角-13
  4. app icon size - 20x20px

    应用程式图示大小-20x20px
  5. use system font San Francisco (SF) in black or dark grey

    使用黑色或深灰色的系统字体旧金山(SF)
  6. app name - 13pt, regular, uppercase

    应用名称-13pt,常规,大写
  7. show more/less - 13pt, regular (or just arrows on iOS 13)

    显示更多/更少-13pt,常规(或仅在iOS 13上为箭头)
  8. margins and padding

    边距和填充

Interesting bug

有趣的错误

Although the widget normally works without unlocking the phone, we encountered an interesting bug while developing our iOS widget. Our application uses a token to access the data it needs and so does the widget, but this token is stored in the iPhone’s secure storage. While the screen was locked, the widget couldn’t access it and would display an error message, despite everything appearing to be OK. We solved this problem by using a simple message “please unlock your phone” in case the phone was locked and after that the widget would work OK.

尽管该小部件通常可以在不解锁手机的情况下正常工作,但是在开发iOS小部件时我们遇到了一个有趣的错误。 我们的应用程序使用令牌访问其所需的数据,小部件也是如此,但是此令牌存储在iPhone的安全存储中。 屏幕锁定后,小部件无法访问它,并且会显示一条错误消息,尽管看起来一切正常。 我们通过使用一条简单的消息“请解锁您的手机”来解决此问题,以防手机被锁定,然后小部件可以正常工作。

Example

Image for post
A mockup of the iOS widget
iOS小部件的模型

Android小部件 (Android widget)

On Android, users can have multiple widgets with different settings / content. Android widget is extremely flexible (although there is a limit on the number of views and layouts you can use to display the widget). While designing, you can use different colors, images, icons, buttons, text, size…

在Android上,用户可以具有具有不同设置/内容的多个小部件。 Android小部件非常灵活(尽管可用于显示小部件的视图和布局数量有限)。 在设计时,您可以使用不同的颜色,图像,图标,按钮,文本,大小...

Since they can be of different sizes, your developers will play an important role here. Together you can define how the widget will look like and try and define all the possible sizes for your widget according to the content you want to display to your users.

由于它们的大小可能不同,因此您的开发人员将在这里扮演重要角色。 您可以一起定义窗口小部件的外观,并根据要显示给用户的内容尝试定义窗口小部件的所有可能尺寸。

When you first start thinking about the Android widget, go through the material guidelines on that topic: https://bit.ly/3d9FvLf

当您第一次开始考虑Android小部件时,请仔细阅读有关该主题的材料指南: https : //bit.ly/3d9FvLf

These are the main points to keep in mind when designing the widget for android:

这些是为Android设计小部件时要记住的要点:

  • the height or width of a widget can be adjusted and you can define how many cells on the home screen it will take up

    窗口小部件的高度或宽度可以调整,您可以定义在主屏幕上它将占用多少个单元格
  • default home screen positions widgets in its window, based on a grid of cells that have a defined height and width. These cells are roughly 40dp. The term “roughly” is used because different devices can have different cell sizes and layouts.

    默认主屏幕在窗口中基于具有定义的高度和宽度的单元格在窗口中放置小部件。 这些单元大约为40dp。 使用术语“大约”是因为不同的设备可能具有不同的单元大小和布局。
  • you can set up a minimum number of cells, but can’t define the maximum number

    您可以设置最小数量的单元格,但不能定义最大数量
  • if the design doesn’t take up an entire cell, android will align it within the specified cells.

    如果设计未占用整个单元格,则android会将其在指定单元格内对齐。

    The user will still be able to tap the whole cell, even if the design doesn’t cover it whole

    即使设计不能完全覆盖整个单元,用户仍然可以点击整个单元

  • widgets should not generally extend to screen edges and as of Android 4.0, widgets are automatically given margins between the widget frame and the app widget’s bounding box to provide better alignment with other widgets and icons on the user’s home screen

    小部件通常不应扩展到屏幕边缘,从Android 4.0开始,小部件会自动在小部件框架和应用小部件的边界框之间指定边距,以便与用户主屏幕上的其他小部件和图标更好地对齐
  • preview image — field — specifies a preview of what the app widget looks like. This preview is shown to the user from the widget picker. If this field is not supplied, the app widget’s icon is used for the preview.

    预览图像-字段 -指定应用程序小部件外观的预览。 该预览是从窗口小部件选择器显示给用户的。 如果未提供此字段,则使用应用程序小部件的图标进行预览。

Mocking up a widget on Android

在Android上模拟小部件

You can also create a mockup of your widget on Android in order to define the design or get the client’s approval.

您也可以在Android上创建小部件的模型,以定义设计或获得客户的认可。

Here is a list of elements you need to think about in order to create a high fidelity mockup.

这是创建高保真模型时需要考虑的元素列表。

  1. different sizes of the widget - chosen in accordance with the data you want to show to your users - consult your developers when picking the sizes you want to use

    小部件的不同大小-根据要显示给用户的数据进行选择-选择要使用的大小时请咨询开发人员
  2. you can use any color you want

    你可以使用任何你想要的颜色
  3. margins and padding

    边距和填充
  4. create a preview image

    创建预览图像

Example

Image for post
A mockup of the Android widget
Android小部件的模型

结论 (Conclusion)

I hope these tips helped you understand how to create a high fidelity mockup of your widget which you can then share with your teammates or successfully present to a client. If you are looking for something easier, one option would be to create a screenshot of an existing widget and use it to create your mockup. Another option is to create a preview with the developers. The problem with this last option is that in case the client wants to change a lot, the developers have to work on it again and you spend more time on thing which you might not be able to charge.

我希望这些技巧可以帮助您了解如何创建小部件的高保真模型,然后与您的队友共享或成功地将其呈现给客户。 如果您正在寻找更简单的方法,一种选择是创建现有窗口小部件的屏幕截图并使用它来创建您的模型。 另一个选择是与开发人员一起创建预览。 最后一个选项的问题在于,如果客户想要进行很多更改,则开发人员必须再次进行处理,并且您会花更多的时间处理您可能无法支付的费用。

In either case, my suggestion is: consult your developers before you start working on a widget, together you will be able to create a perfect solution.

无论哪种情况,我的建议是:在开始使用窗口小部件之前,请咨询您的开发人员,您将可以共同创建一个完美的解决方案。

A big thanks to our developers Jeton Fejza and Marko Iličić for reviewing this post. :)

非常感谢我们的开发人员Jeton Fejza和MarkoIličić审阅了这篇文章。 :)

翻译自: https://blog.undabot.com/the-pain-and-joy-of-designing-app-widgets-3b6ef188cfd3

安卓应用部件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274320.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ux设计中的各种地图_UX设计中的空白

ux设计中的各种地图UX设计中的空白是什么? (What is white space in UX design?) This article will help you learn about white space and why it so important in UX design.本文将帮助您了解空白以及为什么空白在UX设计中如此重要。 White space is a very us…

ux设计中的各种地图_如何在UX设计中使用颜色

ux设计中的各种地图Color is the mother tongue of the subconscious.颜色是潜意识的母语。 — Carl Jung—荣格 Color has more to say than meets the eye. As a building block of visual language, color highlights, guides attention, and unifies elements. In UX, co…

《Two Dozen Short Lessons in Haskell》学习(十八) - 交互式键盘输入和屏幕输出

《Two Dozen Short Lessons in Haskell》(Copyright © 1995, 1996, 1997 by Rex Page,有人翻译为Haskell二十四学时教程,该书如果不用于赢利,可以任意发布,但需要保留他们的copyright)这本书是学习 Ha…

figma设计_Figma中简单,可重复使用的设计系统

figma设计Putting together a design system may seem like an unnecessary hassle. It’s often easier to jump straight into designing things without having to worry about styles, components, or libraries. Some might even argue that when it comes to smaller pro…

Teach Yourself Java 2 in 21 Days 书中样例代码实践

找了好几书JAVA的书,看了几章,都看不下去。 我觉得适合《Teach Yourself Java 2 in 21 Days》(Rogers Cadenhead Laura Lemay)还是适合我的。 孙卫琴那本,我感觉就罗嗦多了没到我点子上。 接口,抽象类这些内…

黑书上的DP例题

pagesectionnotitlesubmit1131.5.1例题1括号序列POJ11411161.5.1例题2棋盘分割POJ11911171.5.1例题3决斗Sicily18221171.5.1例题4“舞蹈家”怀特先生ACM-ICPC Live Archive1191.5.1例题5积木游戏http://202.120.80.191/problem.php?problemid12441231.5.2例题1方块消除http://…

MDK linker和debug的设置以及在RAM中调试

有误或者表述不清楚请指出,谢谢 硬件:TQ2440开发板、jlink V8 固件 软件:J-LINK ARM 4.08i、MDK4.20 先解释下MDK中三种linker之间的区别 设置集中在option linker选项卡 1.采用Target对话框中的ram和rom地址。采用此方式,…

LBS核心技术解析(引子)

http://www.cnblogs.com/LBSer/archive/2013/04/25/3048754.html 引子: 人们常用“上知天文,下知地理”来形容一个人的博学,人们总是用三要素论“什么时间、什么地点,发生或干了什么事情”来描述一件事情,人们也常常借用“天时、地…

Vim中数字自增、自减

(1)ctrl a:数字自动增加1 按下ctrl a: (2)number ctrl a:数字自动增加number 例子:想将20修改成100,按下80 ctrl a: (3)ctrl x…

开源服务器Tornado的初步了解

文章结束给大家来个程序员笑话:[M] 明天看了下Python的一个新web框架,由Facebook开源。不得不说,品牌效应啊,只要是Facebook开源的目项,没有不好用的。Tornado可以说是好用到了极致,从开打官方面页开始懂得…

多线程的那群“象”

最初学习多线程的时候,只学了用Thread这个类,记忆中也用过Mutex,到后来只记得Thread的使用,其余的都忘了。知道前不久写那个Socket连接池时遇到了一些对象如:Semaphore,Interlocked,Mutex等&…

优秀HTML5网站学习范例:从“饥饿游戏浏览器”谈用户体验

继影片《饥饿游戏》获得票房成功后,《饥饿游戏2:火星燎原》也于2012年宣布开拍,将在今年的11月22日登陆全球各大院线。值此之际,微软携手美国狮门影业公司和 RED Interactive Agency 一起为影迷打造了一个基于 HTML5 现代网页规范…

[开源]jquery.ellipsis根据宽度(不是字数)进行内容截断,支持多行内容

jquery.ellipsis 自动计算内容宽度(不是字数)截断,并加上省略号,内容不受中英文或符号限制。 如果根据字数来计算的话,因为不同字符的宽度并不相同,比如l和W,特别是中英文,最终内容宽…

不安装游戏apk直接启动法

原文地址:http://blog.zhourunsheng.com/2011/09/%E6%8E%A2%E7%A7%98%E8%85%BE%E8%AE%AFandroid%E6%89%8B%E6%9C%BA%E6%B8%B8%E6%88%8F%E5%B9%B3%E5%8F%B0%E4%B9%8B%E4%B8%8D%E5%AE%89%E8%A3%85%E6%B8%B8%E6%88%8Fapk%E7%9B%B4%E6%8E%A5%E5%90%AF%E5%8A%A8%E6%B3%95…

Android客户端打包方案分享

基本介绍 Android应用的自动化打包是应用持续集成以及多渠道发布的基础。当前Android客户端自动化打包的主要有两种方式,Ant和Maven。两种方式本质上都是调用Android SDK里面提供的工具,不过各自有各自的特点。 1. Ant脚本 好处:开发成本较低…

您的UX库不只是书籍

hp ux 密码不过期Looking back on past self, one thing I wish I’d realised is the importance of keeping notes of everything.回顾过去的自我,我希望我意识到的一件事是记录所有事情的重要性。 This means everything interesting I’ve read and written; e…

交互设计精髓_设计空间的精髓

交互设计精髓重点 (Top highlight)什么是空间? (What is Space?) Space is the dimension of height, depth and width within which all things exist and move. Space or Empty space or White space or Negative space are alias given to describe intensional…

ux和ui_UI和UX设计人员的47个关键课程

ux和ui重点 (Top highlight)This is a mega-list of the most critical knowledge for UI, UX, interaction, or product designers at any level.这是所有级别的UI,UX,交互或产品设计人员最关键的知识的大清单。 Many of these lessons are also appli…

深入理解Java内存模型(七)——总结

处理器内存模型 顺序一致性内存模型是一个理论参考模型,JMM和处理器内存模型在设计时通常会把顺序一致性内存模型作为参照。JMM和处理器内存模型在设计时会对顺序一致性模型做一些放松,因为如果完全按照顺序一致性模型来实现处理器和JMM,那么…

沉浸式ui设计_有助于沉浸的视频游戏UI —武器轮

沉浸式ui设计Many action-adventure games rely on the feeling of thrills via bullets, fire, grenade, more bullets, and gigantic booms. The way to enable all these is to offer a massive arsenal, from machetes to assault rifles all the way till bazookas.许多动…