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 展示避免用户点击才展示相关的内容,减少用户点击次数,提高用户操作速度)
相关推荐
我码玄黄7 天前
交互新体验:Axure动态面板下的图片拖动技巧
交互·产品经理·axure·交互设计
Kim.Li1 个月前
海蓝色主题移动端后台UI作品集模板源文件分享 figma&sketch格式
面试·figma·交互设计·sketch·简历·ui设计·作品集模板
设计师工作日常1 个月前
有趣的css - 跷跷板加载动画
css·交互设计·动效设计·ux/ui·加载动画
rolt1 个月前
界面耻辱纪念堂--可视元素04
交互设计
Smilezyl1 个月前
关于未来App服务即应用的探讨
交互设计
rolt1 个月前
界面耻辱纪念堂--可视元素03
交互设计
rolt1 个月前
界面耻辱纪念堂--可视元素02
交互设计
rolt1 个月前
隐喻的使用及误用02
交互设计
mon_star°3 个月前
web实现drag拖拽布局
前端·交互设计
rolt3 个月前
糟糕界面集锦-控件篇06
交互设计