Apifox header 设计参考学习

本文仅用户个人学习记录使用,意在提高自己的交互设计感觉,仅此而已,欢迎指正.

设计截图

设计分析

  • desktop app 的 header 和其他的设计相同,当 icon + name 的时候在 hover 的时候就不需要使用 tooltip 来展示改 icon 的作用,如果仅有 icon 的形式,需要在 hover 时使用 tooltip 来解释该 icon 的作用
  • 【刷新】 icon 的作用是为了防止有的请求有缓存导致数据没有更新问题,或者使用手动刷新来解决没有实时展示刚刚创建的项目或者团队问题, 点击之后整个 app 将会全局 loading,让用户感知点击刷新后的做法是啥
  • 【设置】 icon 在 hover 的时候 tooltip 显示 "设置",点击 设置之后将会出现 dialog 弹窗,方便用户对 app 个性化或者通用配置,因为设置的内容很多,因此在 diloag 里边又分成了细粒度更小的 sidebar 设置菜单栏 + 选中菜单渲染的内容;弹框的半透明让用户更关注于当前的设计功能,避免其他模块的干扰。
  • 【外观】设置菜单项可以对 app 整体的外观进行调整,比如背景 & app 的主题色 & 字体的大小,改动之后会实时的反应到 app 上
  • 【通用】设置菜单项主要用来更改 app 的语言和请求相关的设置(比如 请求超时时间,请求头,是否进行 SSL 证书验证,是否发送无缓存头等
  • 【证书管理】、【网络代理】、【插件管理】、【外部程序】是相关的模块设置,整体的布局均为 sidebar + content(title + close icon + settings information)
  • 因为 desktop app 的更新不如 web 那么顺畅(用户可以选择更新 or 不更新),所以设置页面有 【关于 Apifox】 的设置操作,比如自动下载更新、新版本发布时提醒我 等相关设置
  • 【通知】 icon 点击之后会出现通知的 tab(为了区分待办和一般的通知)
  • 【头像】菜单项的操作,这里一般为有关用户登录或者信息的设计操作,一般 hover 上去直接展示相关的操作即可( hover 展示避免用户点击才展示相关的内容,减少用户点击次数,提高用户操作速度)
相关推荐
anOnion5 天前
构建无障碍组件之Table Pattern
前端·html·交互设计
OpenTiny社区8 天前
生成式 UI 藏大招!看似露营案例,实则电商集成 GenUI SDK 干货
前端·ai编程·交互设计
anOnion10 天前
构建无障碍组件之Tooltip Pattern
前端·html·交互设计
Kim.Li18 天前
什么是包容性设计?从跨文化、性别到种族多样性的 UX 设计实战
人机交互·产品经理·视觉设计·交互设计·软技能·ui设计
anOnion19 天前
构建无障碍组件之Spinbutton Pattern
前端·html·交互设计
程序员海军22 天前
设计圈真的要变天了:ChatGPT Image 2 不只是会生图了
aigc·设计师·交互设计
anOnion1 个月前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
ouzz1 个月前
我在 React Canvas 里做了一个液态玻璃透镜效果
canvas·视觉设计
sinat_333518871 个月前
从用户体验视角看太极重命名软件的界面设计
交互设计·用户体验·界面设计
anOnion1 个月前
构建无障碍组件之Meter Pattern
前端·html·交互设计