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 展示避免用户点击才展示相关的内容,减少用户点击次数,提高用户操作速度)
相关推荐
anOnion4 天前
构建无障碍组件之Radio group pattern
前端·html·交互设计
anOnion9 天前
构建无障碍组件之Checkbox pattern
前端·html·交互设计
anOnion13 天前
构建无障碍组件之Accordion Pattern
html·设计·交互设计
anOnion19 天前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
anOnion20 天前
构建无障碍组件之Dialog Pattern
前端·html·交互设计
anOnion24 天前
构建无障碍组件之Alert Dialog Pattern
前端·html·交互设计
初级代码游戏2 个月前
软件界面设计培训
人机交互·交互设计·界面设计
初级代码游戏2 个月前
云存储的删除设计
ui·删除·交互设计·onedrive·icloud·界面设计
有意义2 个月前
用心写好一个登录页:代码、体验与细节的平衡
前端·react.js·交互设计
大大花猫2 个月前
我用AI写了个小程序,却被人说没有底线…
前端·微信小程序·交互设计