首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

App之底部导航设计

因为我正在做一款app,我团队主抓产品设计、UX/UI设计部分前端开发,少量运营。...如领英的设置页面 网格式与列表式类似,但排布更紧凑,显示也更直观,可在一容纳更多选项,常见于一级页面,电商类app一级页面用的比较多,如淘宝的首页 标签式有顶部、底部两大类,底部应用的最广泛,因为底部比较方便大拇指点击...我们一步步推理下 1、由于需要便于拇指操作,这决定了我们只能在标签式导航的底部导航来进行改造。 2、底部导航的功能按钮排布。...下面再看看底部导航的一些主流设计方式里的案例: 目前有3种典型的模式,分别是 模式1:首页+我的; 模式2:首页+更多; 模式3:中间功能项突出。...功能项大部分以图标+文字的形式表达。文字是为了更准确的表达意思,这个第一篇App之“文字”的设计技巧探讨过原因。 主页的图标,采用“小房子”或logo。

4.8K110

超好看的30款网站侧边设计

第一部分:为什么需要网站侧边? 侧边其实就是一种比较经典的网站导航设计,它的形式通常为竖向的一列,展示在网站的右侧或者左侧,具体的位置当然是取决于整体的设计。...但总体来讲,侧边对网站的好处有以下: ● 放置导航菜单以快速引导访客; ● 突出显示关键信息,例如广告、联系方式或最新消息; ● 刺激用户进行点击和浏览,降低跳出率,提升转化; 第二部分:30个优秀的网站侧边设计...Grace chuang Grace chuang是一个作品集网站,该网站布局分为三大部分,左侧为带有logo和社交按钮的侧边,中心是网站所有者的照片展示,右侧是自我介绍。 ? 4....Jasminestar Jasminestar的侧边文本设计比较独特,看起来像一个左旋90°的顶部导航,并且使用留白突出显示,还提供了关闭按钮,方便用户以自己喜欢的方式浏览页面。 ? 7....摹客设计云,为产品团队提供在线原型设计、文档撰写管理、主流设计稿交付、全流程协作支持。摹客,设计更高效~

11.6K10
您找到你想要的搜索结果了吗?
是的
没有找到

最新iOS设计规范二|7大应用架构

为确保从启动屏幕无缝过渡,设计启动屏幕时应当尽量接近于APP首页。(设计规范虽如此,但实际上大家基本都在用广告,大型APP比如微信QQ会用自己的品牌) 启动采用适当的方向。...例如:游戏中暂停或角色没有前进时显示一些有用的提示。让用户可以重播教程,以防第一次进入APP的他们错过任何内容。 突出教程的要点。为新用户提供引导是好的,但这并不意味着这样做就能成为优秀的APP。...你也可以视图的其他部分,提供更全面描述任务或指导的文本。 模态视图外观应与APP风格统一。例如,当模态视图包含导航时,它应该采用与APP导航相同的外观。 为模态视图的展示提供合适的过渡动画。...一些APP会结合多种导航样式,例如:使用平级导航的应用可以每个类别中使用分层导航导航设计规范如下: 始终提供清晰明确的路径。用户应该知道他们APP的位置以及如何到达下一个目的地。...使用导航贯穿层级结构。导航的标题可以显示层级结构的当前位置,返回按钮可以轻松返回到上一位置。 使用 Tab Bar(标签)展示对应类别的内容或功能。使用标签显示对应类别的内容或功能。

2.5K20

让人一见钟情的网站header设计攻略

网站header是整个网站页面显示页面最顶部的部分,也就是说,当用户来到你的网站,你的网站header就是用户第一时间看到的部分。...Oven Oven采用了隐藏式导航,因此整个页面更加简洁干净,只有核心元素界面上直接显示,可以说是元素展示最少的header设计之一了,最吸引人注意的是hero大图。 9....分享一下我最喜欢的三点: 第一:导航。这里展示了logo,搜索按钮和其他CTA按钮引导用户,鼠标移动时刻高亮显示; 第二:轮播图像。很多高分辨率的图像滚动,每一张都非常精致,和业务息息相关。...每个图像都显示一个类别,如果你将鼠标悬停在其上,会突出显示。该模板还有非常有用的UI工具包。 20. Furniture 该模板的header设计配色是亮点,配色采用了特别醒目的颜色——黄色。...文本部分出现在页面中央,突出主题。当悬停鼠标图片上时,家具图片会响应显示其详细信息。

1.5K00

基于微信社交链的读书APP——微信读书,用户体验5要素简要分析

相比于市场同类产品,微信读书把书城放到二级入口,书城是内嵌发现里的二级入口。书城放在二级入口,表明产品突出的是好友和系统推荐这一块,突出社交读书的理念。...3个内容页面都十分明显的突出了内容部分,没有过多的装饰效果,让用户能够更加专心的沉浸在阅读,不受其他元素的干扰。 ? 3、配色 APP的主色调默认为白色,同时提供了黑色模式。...信息的排布上,书籍相关讯息遵循了人们视觉焦点在页面上半部分的规则,并且突出了书名的展示。...右下角的页面数/总页数的显示,与纸质书的页码呼应,符合用户阅读习惯。 ?...再来看看书城页面,一般来说,一个页面的首屏展示的内容就足够我们看出主要的设计思想和想要展示的重点信息了。 ? 顶是页面标题和搜索,然后是4类文章的导航

82630

云+电商震撼升级,V3惊喜上线!

云+电商重磅升级 ---- 云+电商全体小伙伴的日夜奋斗下,云+电商本周日2017年9月10日重磅升级!从V2到V3,从后台优化到前端设计,V3采用最流行全屏网页设计,更重视内容展示。...1 快捷导航,功能模块一目了然 ---- 云+电商V3顶部导航,增加快捷导航,您可快速查找功能模块,一键访问页面。不仅如此,快捷导航还可保留您的最近访问记录,便于提高查找效率。 ?...2 关键词功能搜索,提高20%工作效率 ---- V3顶部导航增加功能搜索,您可通过关键字搜索,快速查找包含该关键词的功能,点击即可进入设置,节省查找时间,提高20%工作效率。 ?...4 手机页面进行大量设计优化,简约大气突出内容展示 ---- 手机端首页重新定义了商城字体、字号、颜色,形成一套全新商城UI规范,注重商城购物属性,突出价格展示,适当留白,增加空气感,形成美观与实用性为一体的全新界面显示...5 前台页面进行板式优化,突出价格排列,显示严谨清晰 ---- 我们将V3面的商品展示区域进行放大处理,并突出商品价格显示,排列顺序更符合用户使用习惯,显示更清晰。 ? ?

901148

实用:Google Chrome 键盘快捷键大全

和 ".com"之间的部分,然后按 Ctrl+Enter 为您在地址输入的内容添加"www."...F6 或 Ctrl+L 突出显示网址区域中的内容 输入网址,然后按 Alt+Enter 新标签打开网址 打开谷歌浏览器功能的快捷方式 Ctrl+B 打开和关闭书签 Ctrl+H 查看历史记录...使用键盘上的向右和向左箭头,导航至工具的不同区域。...Ctrl+U 查看源代码 将链接拖动到书签 将链接加入书签 Ctrl+D 将当前网页加入书签 Ctrl++ 放大文字 Ctrl+- 缩小文字 Ctrl+0 还原到正常文字大小 文字快捷方式 突出显示内容...,然后按 Ctrl+C 将内容复制到剪贴板 将光标置于文字字段,然后按 Ctrl+V 从剪贴板粘贴当前内容 将光标置于文字字段,然后按 Ctrl+Shift+V 从剪贴板粘贴当前内容的纯文字部分 突出显示文字字段的内容

1.5K80

颜色革命(下)

CMF,对于基金详情,大部分页面都统一采用“大色块提色,小元素清新”原则来做设计,强调大色调的视觉冲击感,让用户一进来就被“色诱”,并且将品牌主色深深地印入脑海里,实例下图所示。...另外,对于个人信息类页面,信息以列表显示为主,所以保持了与主流APP相关功能的相识设计,只是将图标用主题色铺色。...而且随着IOS系统风格演化,导航条与状态逐渐融为一体,搜索条也已经内置进导航条,因此消除导航条与正文内容的区别、形成整页效果的“激进型”设计也足够值得肯定。...1.2.4 分割线样式设计建议 分割线的设计其实是移动设计中最难把握的部分我们CMF,虽然笔者强调过多次,但依然难称满意,因此,此部分的示例就从我推崇的“IOS系统设置”应用说起...CMF的选色过程,对于数值内容的显示,最开始只有三种颜色——橙黄色、黑色、白色。这样虽然页面颜色效果足够统一,但也不免单调死板。

61830

10.6K Star开源一款轻量级简洁高效的开源PDF阅读器,只有7MB,很小了,Windows必备

这款软件受到了广泛的欢迎,因为它除了功能强大之外,还提供了用户友好的界面和巧妙的设计。...2.简洁的界面:SumatraPDF的界面设计简洁明了,用户可以轻松找到所需的功能,而无需花费过多的时间在学习和适应上。 3.多种浏览模式:该软件支持、连续和阅读模式,以满足不同用户的需求。...3.导入文件:应用程序,点击菜单的“文件”,然后选择“打开”,或者直接使用快捷键Ctrl+O。文件浏览器中选择要打开的PDF文件,然后点击“打开”。...4.浏览文件:打开文件后,您可以使用菜单上的导航按钮来浏览文件的不同页面。您还可以使用滚动条或鼠标滚轮来滚动页面。 5.搜索内容:如果您想要在文档搜索特定内容,可以使用菜单上的搜索框。...输入要查找的关键词并按下Enter键,SumatraPDF将在文档定位并突出显示匹配的内容。 6.调整设置:SumatraPDF还提供了一些设置选项,可供您自定义阅读器的外观和行为。

88240

zblog明信片主题类型模板全新绽放,R角、透明、森系您想要的我都有

V2.1.6 -- 优化php函数代码,分离侧模板代码。 -- 优化侧模块代码,重新编写侧最近发表和最新留言模块,删除冗余代码,调用数量模块管理,最新留言(或者最近发布)类型选择UL。...-- 修复移动端导航页面效果。 2021/08/04 -- 优化侧随机调用文章模块部分情况下调用为空的BUG。 -- 优化夜间模式搜索框内字体颜色看不清的问题。...-- 新增会员模板,管理-新建或者编辑-右侧模板选择vip,相关设置主题配置-会员(老客户配置内容是空的,需要自行完善相关信息,参考信息:https://www.liblog.cn/zb_users...-- 适配404面模板部分内容。 2021/04/19 -- 修复移动端导航菜单部分情况下错乱显示的问题。 -- 修复生成海报没有摘要的问题。 -- 修复夜间模式图标出错的问题。...-- 修复模板部分没有评论的情况下主题布局没有对齐的问题。 2021/03/13 -- 优化网站PHP代码,删除部分api接口。 -- 删除文章顶部标题链接代码。

1.9K20

小程序界面设计指南

除了利用接口外,不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。原因是回忆易于记忆,通常来说让用户选项做选择比完全靠记忆输入容易。...iOS导航 微信进入小程序的第一个页面,导航区只有一个操作“返回”,即返回进入小程序的微信页面。进入小程序后的次级页面,导航区的操作为“返回” 和“关闭”。...小程序的次级页面,导航区只有“返回”操作,而点击安卓手机自带的硬件返回键也起到相同作用。 背景色规则 小程序导航支持背景颜色自定义,选择的颜色需要满足微信提供的两套主导航图标的可用性。...加载反馈注意事项 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。 载入过程,应保持动画效果 。无动画效果的加载很容易让人产生该界面已经卡死的错觉。...启动加载 小程序启动突出展示小程序品牌特征和加载状态。启动除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需自行开发。

4.4K70

ionic之AngularJS扩展2 移动开发

内联模板应用(SAP)开发中非常有用。SAP应用通常需要通过AJAX 从后台载入众多的HTML片段,这些HTML片段都用文件存放的话,看起来、想起来 都很不爽。...--模板视图内容--> ion-view指令有一些可选的属性: view-title - 视图标题文字 模板被载入导航视图ion-nav-view显示时,这个属性值将显示导航...默认为true,这意味着如果视图中的内容下拉很长,那么在任何时刻 点击导航都可以立刻回到内容的开头部分。...> 当视图切换时,回退按钮会自动出现在导航,并显示一个视图 的标题。...点击回退按钮将返回一个视图。 示例的代码在上一节的基础上增加了回退按钮,切换到小说再看看!

3.5K20

【Java 进阶篇】深入了解 Bootstrap 组件

不同样式的导航 Bootstrap 提供了多种不同样式的导航,以满足不同设计风格。以下是一些常见的导航样式: navbar-light:亮色背景的导航。...用户可以点击 “下拉菜单” 链接以显示下拉选项。 标签 标签是一种常见的导航元素,用于切换不同页面或内容。Bootstrap 提供了标签组件,使您可以轻松创建标签导航。...您可以模态框的主体部分添加任何自定义内容,包括文本、表单、图像或其他元素。...我们模态框的主体部分添加了一个简单的表单。...本文中,我们探讨了一些常用的 Bootstrap 组件,包括按钮、表格、导航、警告框、模态框和进度条。这些组件可以根据您的需求进行自定义,并在网页设计中发挥重要作用。

16220

ie浏览器最大化快捷键(电脑退出最大化快捷键)

网页浏览器按F5键为刷新,CTRL+F5为强制刷新缓存 F4 需与其它键配合使用,(IE按F4或F6键可以地址中弹出下拉菜单供选择或输入网址,ALT+D可以选择地址)   ALT+F4 关闭当前窗口或退出程序...  CTRL+F4 关闭当前应用程序的当前文本(如word)   CTRL+F6 切换到当前应用程序的下一个文本(加shift 可以跳到一个窗口) F10或ALT激活当前程序的菜单 IE7...—— CTRL+- 恢复原始大小 —— CTRL+0 导航快捷键 返回主页 —— ALT+HOME 返回后一 —— ALT+LEFT 返回 —— ALT+RIGHT 刷新 —...—— CTRL+SHIFT+TAB 地址快捷键 选择地址 —— ALT+D 地址的文本初出添加”http://www.”...和末尾添加”.com” —— CTRL+ENTER 地址的文本初出添加”http://www.”

2K30

本站同款宁静致远(Quietlee)自媒体博客主题模板,夜间模式及强大的SEO效果-ZBlog主题

调用的数量及热门天数主题配置设置,设置完成后,需要重新编辑任意文章,生成新的缓存txt文件。...-- 优化SEO规范,减少部分模板出错关键词及描述重复的问题。 -- 修复商品模板发布时间接口错误的问题。 -- 优化移动端导航菜单整体效果。     ...删除部分css动态特效,减少资源消耗。 部分模块细节及样式。 更新日志:2020/02/23 删除导航搜索右侧“推荐功能”。 优化文章顶部面包切导航,优化自适应显示效果。...优化文章时间标签,PC显示年份(右侧日期)移动端显示日期。 优化自适应和夜间模式显示效果。 优化部分CSS显示效果及部分图片放大特效。 完善移动端显示效果。...特别注意,这里的作者信息显示首页与文章作者是两个模块,文章右侧显示的是文章发布的作者,不是网站管理员,站点要明确下。

3.1K20

zblog明信片主题类型模板全新绽放,R角、透明、森系您想要的我都有

主题侧调用方案: 首页调用默认侧,分类列表及其他(搜索、标签等)调用侧2,文章调用侧3,手机移动端导航调用侧5。...主题自带两个侧模块,分别是热门和热评侧,设置主题配置,全局配置设置热门时间及调用文章数量。 主题首页带有两个CMS模块,可根据类型自行选择是否开启,主题设置,全局设置,首页CMS模块设置。...但是也有缺点,就是搜索快照下显示占位图片,不显示文章缩略图,因为快照下不会加载js,所以只能显示占位图片。...-- 修复文章右侧侧会员没有加V的问题。 2020/11/05 --优化模板编辑文章时链接出错的问题。 2020/11/01 --修复文章灯箱无效的BUG。...2020/10/08 --优化导航css样式细节。 2020/09/30 -- 优化模板细节,修复部分接口错误问题。 -- 修改自适应显示效果。 -- 新增网页右侧底部客服。

1.6K20

产品需求文档:C端生鲜电商APP

2020年国生鲜电商交易规模超过2600亿元,而医药物流市场预计2020年达到3.8万亿元,并且预计未来冷链物流产业将开拓出新的产品线,冷链物流市场潜力较大。...(2)授权成功会显示位置信息,授权失败显示“位置不详”,点击位置区域跳转到位置详情。 ? 位置详情 (3)点击搜索框会跳转到搜索页面。 ?...搜索页面 (4)轮播图播放页面,每5s替换一次,点击相应的页面可以跳转到页面活动详情 (5)导航蔬菜分类,点击能跳转到蔬菜分类页面 (6)导航水果分类,点击能跳转到水果分类页面 (7)导航肉食分类...,点击能跳转到肉食分类页面 (8)导航海鲜分类,点击能跳转到海鲜分类页面 (9)导航栏干货分类,点击能跳转到干货分类页面 (10)导航速食分类,点击能跳转到速食分类页面 (11)导航酒品分类,点击能跳转到酒品分类页面...(12)导航调料分类,点击能跳转到调料分类页面 (13)导航厨房用品分类,点击能跳转到厨房用品分类页面 (14)时 分 秒 倒计时 (15)查看更多秒杀商品,点击跳转到商品秒杀 (16)查看更多推荐商品

2.4K21

Flutter质感设计之底部导航

BottomNavigationBar即底部导航控件。显示应用底部的质感设计控件,用于少量视图中切换。...底部导航包含多个以标签、图标或两者搭配的形式显示项目底部的项目,提供了应用程序的顶级视图之间的快速导航。对于较大的屏幕,侧面导航可能更好。...同时使用质感设计的弹出菜单控件切换底部导航的行为和样式。...局部变量,创建底部导航 final BottomNavigationBar botNavBar = new BottomNavigationBar( /* * 底部导航布置的交互项:迭代存储NavigationIconView...return new Scaffold( // 质感设计应用 appBar: new AppBar( // 应用显示的主要控件,包含程序当前内容描述的文本 title: new Text('底部导航演示

3K21

探索Harbor镜像仓库新的管理功能和界面

本文作者邹佳,Harbor核心开发成员,为大家介绍设计和实现 Harbor 新版功能界面的经验分享。文中也剧透了镜像扫描功能的界面。...为了提供更为专业的管理系统及不断地提升操作体验,最新的 Harbor 版本(V1.1+), 我们推出了重新设计和开发的 Harbor 管理界面。...图4:“关于”对话框 位于头部的通用搜索也做了改进,搜索结果采用列表的形式显示,并分门别类,使得结果更为清晰和全面有序。同时提供“返回”链接,可以便捷回到搜索的页面。...图5: 通用搜索 启用左侧导航显示用户当前可操作选项,指引用户操作,提升系统操作易用性。 图6:左侧导航 项目管理成为登录系统后的默认,登录后可直达。...图11: 系统日志 对于重新设计的Harbor管理界面,鉴于篇幅限制,不能一一赘述,仅就与旧版有较大差异的部分进行说明。

2K20

zblogPHP万能型主题模板希望(Hopelee)全新绽放,独具热爱,自成一派

首页调用默认侧,分类列表及其他(搜索、标签等)调用侧2,文章调用侧3,文章模板(归档、友链、标签、读者墙)调用侧4,手机移动端导航调用侧5。...主题自带三个侧模块,分别是热门、热评和随机显示,设置主题配置,全局配置设置热门时间及调用文章数量。...-- 新增侧倒计时功能,更新后点击启用主题(必要步骤),模块管理,拖拽“似水流年”模块到对应侧即可。 -- 删除主题设置显示真实IP地址功能,后期使用插件来实现。...1.3.3(22/1/10) -- 临时修复部分分辨率下导航错位问题。 -- 紧急修复单独设置SEO时标题代码出错的BUG。 -- 修复文章编辑后台侧ID跟系统重复的问题。...1.2.8(21/11/23) -- 优化php函数代码,分离侧模板代码。 -- 优化部分css浏览器的兼容性,修复部分情况下侧及列表背景色失效的问题。

2.1K30
领券