weixin_39843215
weixin_39843215
2021-01-05 13:05

UI Icons

About

A few benefits of icons include: - Speed of recognition - Visual appeal - Compact size

For these reasons, we would like to incorporate them into Dashboard.

Proposal

From the Github repo: "Material design icons are the official icon set from Google that are designed under the material design guidelines." You can view the full list here.

The Material design icon set is growing all the time, but it's likely we'll need to design custom icons for our Kubernetes-specific needs. 1. Decide what UI items we want icons for. We'll begin with the top-level menu items from Left-hand Navigation Hierarchy #908. - Nodes - Namespaces - Persistent Volumes - Overview - Workloads - Services - Storage - Config - Policies 2. Assess which menu items we might be able to use existing Material design icons for. Either from the official set, or from a trusted paid set such as NOVA. 3. Conceptualize & sketch for those menu items we can't find a suitable existing icon for. 4. Execute SVG icons based on agreed-upon sketches, using as a guide the Material design icon principles.

Note: there will be some overlap between this issue and Symbols for Diagrams #747, but #747 is focused more on the display setting of docs, and thus its visualizations can be larger / more complex, and will strive to incorporate the relationships between components.

该提问来源于开源项目:kubernetes/website

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

11条回答

  • weixin_39817176 weixin_39817176 4月前

    Yes. Makes total sense. We'll revisit this at appropriate time.

    点赞 评论 复制链接分享
  • weixin_39723678 weixin_39723678 4月前

    I'm going to close this issue for issue hygine's sake. Please reopen if it's still valid.

    点赞 评论 复制链接分享
  • weixin_39705850 weixin_39705850 4月前

    Initial suggestions for icons (result of brainstorm with , , , , -- descriptions added for reference, though nicely synthesised by in previous comment - slight variation on the explanation for workloads, and we didn't get round to 'Overview'):

    Namespaces: boxes/bags where you put your things, they can have names, you cannot put some things into a red box. A family name. One thing must have exactly one namespace. ui_namespaces

    Nodes: individual computers in your cluster ui_nodes

    Persistent Volumes: attached to a cluster, the same as nodes, programs can use them. ui_persistentvolumes ui_persistentvolumes2

    Workloads: there are different workloads, whenever you want to run something, that something is the workload. Robot. The actual work rather than the thing that does the work. Unit of computation. Weights/dumbells, binary 01000111010110, gears/cogs... ui_workloads ui workloads2

    Services: something for data exchange, the thing used for connecting/exposing your apps - a globe and a cloud connected? ui_services

    Storage: Classical database, can use Persistent Volumes, but is temporary / lasts the lifetime of the cluster only. ui_storage

    Config: Configuration of your apps running in the Cloud, (as opposed to configuration of the User or of Dashboard etc...) ui_config

    Policies: Configure your namespaces, What is allowed/not allowed. ui_policies

    点赞 评论 复制链接分享
  • weixin_39817176 weixin_39817176 4月前

    This is 's prototypes for UI icons: https://projects.invisionapp.com/share/9E7X5VO4K#/screens/173096021/comments

    Take a look and comment if this is something we can use in docs/upstream

    点赞 评论 复制链接分享
  • weixin_39843215 weixin_39843215 4月前

    thoughts on this updated icon selection? Also see comment #5 discussing persistent volumes and the best icon there.

    点赞 评论 复制链接分享
  • weixin_39932947 weixin_39932947 4月前

    Thanks much. Some comments: - I like the services icon. - The lock icon would make the most sense for security settings or secrets, rather than Persistent Volumes. - PersistentVolumes should look similar to storage volumes used by pods, but distinct in some way. We are using the standard cylinder representation for storage volumes used by pods in documentation diagrams. I like the infinity symbol -- maybe put it on top of the cylinder? - I like the vertical bars for namespaces. I don't know what the box is supposed to represent, but it looks too similar to the node icons. - I'd avoid using gears for Config. I could imagine a standard-looking settings icon for settings of the UI itself. We've also (unfortunately) used gears in pod icons in presentations, which may generate confusion. Something more like a survey icon might make sense for config -- choosing options. - Workloads is a tough one. In doc diagrams, we're experimenting with a circular arrow, to represent a control loop, for controller types, such as Deployment, ReplicaSet, etc. I'm not attached to it, but a simple shape seems better than ones where users may struggle to understand what it's supposed to represent, such as with all the proposed icons other than the barbells.

    点赞 评论 复制链接分享
  • weixin_39843215 weixin_39843215 4月前

    Thanks for the feedback ! I've updated the InVision with a few existing Material icons based on your suggestions.

    Responding to a few of your comments: - PersistentVolumes I've added a rough concept for what that could look like if we want it related to Storage. That I think would have to be a custom icon – I haven't found anything existing. - For Namespaces: the idea behind the dotted line was a virtually bounded-off, exclusive box, but I can see how it might be too similar to the Nodes icon. I've included two other versions that are more visually distinct if we like the dotted line pattern. - Workloads definitely seems to be a challenging concept to represent! The circular arrow has such a strong historic meaning as "Restart / Refresh" that I think trying to re-wire users' perception could prove too challenging.

    If you toggle on "Comments" in the lower RH corner of InVision then select a comment point you can check out some of the discussion that's been going on there.

    点赞 评论 复制链接分享
  • weixin_39843215 weixin_39843215 4月前

    How closely do we want to align / not conflict with Google Cloud Platform as far as icons? After reviewing the icons in use by Google Cloud Platform, I'm wondering if we should reconsider some of ours like "Nodes", which is nearly identical to what GCP uses for "Compute Engine."

    compute

    /

    点赞 评论 复制链接分享
  • weixin_39817176 weixin_39817176 4月前

    How closely do we want to align / not conflict with Google Cloud Platform as far as icons?

    I think that we should not have the same icon for different concepts. Just to avoid confusion. Other than that, we can use similar icons.

    How about we come back to the idea of a computer tower for nodes? Like this

    点赞 评论 复制链接分享
  • weixin_39843215 weixin_39843215 4月前

    After extensive research, I'm advocating we not go ahead with icons for the UI initially. Rationale for this decision: - Icons are time and effort intensive to create, and those resources would be better put toward other more fundamental aspects of Dashboard at this stage. - Our concepts in need of icons are so complex and abstract we'd necessarily be introducing some new patterns to users that we expect they learn. In these fluid, fast-changing initial stages of the project, I think it's risky to commit to icons, and if we change them we've lost a lot of their value. - While they would be nice to someday include so that we can have a collapsible side nav, that's a "nice to have" and not a high priority at the moment. - Excluding icons was agreed upon as the best initial course of action by Keith Guerin (GCP UX Designer), Nick Botner (GCP Creative Director), and Aaron Wheeler (Google Ads UX Designer).

    点赞 评论 复制链接分享
  • weixin_39843215 weixin_39843215 4月前

    Based on the call this morning with and a few Fujitsu folks, I've screenshotted and put in an InVision prototype several existing Material icons I think could potentially be a good fit for Dashboard's needs. Add there any comments you'd like to share!

    Concepts we talked about for our top-level menu items: - Nodes - Servers. - Compute power. - Namespaces - A box to hold objects. - Dividing up somethign into smaller sections. - A family name (surname) as representative of a certain grouping. - Persistent Volumes - Storage with a lock to show that it doesn't change with time. - Overview - Eye. - Dashboard. - Workloads - Something that has work applied to it. - Code that gets run (binary values). - Services - Exposing applications to the world. Revealing; uncovering. - Storage - Database. - Config - Configuration of applications. - Policies - What's allowed / what's not allowed.

    点赞 评论 复制链接分享

相关推荐