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

掌握这7个UI设计法则,让你的界面更出众

留白是构成一个好的视觉布局重要元素,但也是最容易被忽视使用的元素。通常情况下,留白意味着浪费屏幕空间。但实际,留白对于设计更加简化的布局非常有用,因为这样可以让用户专注他们看的内容。...真实物理环境中,每个动作都会有相应的反应。所以这个也适用于设计,这样的交互设计能让界面看起来更加有生机和活力。...大多数的设计领域,比如建筑设计、景观设计、时尚设计等,都会使用这个策略,突出重点都是非常有效的。 平面设计师和摄影师广泛使用 “三分原则”来创造艺术和设计的重点内容。 ?...用户与您的产品互动时感觉越聪明,他们就越会喜欢您的产品。 下面图片的例子。相比左边的盐和胡椒瓶,用户更喜欢右边的。因为用户更容易区分哪个是盐,哪个是胡椒粉。 ?...界面设计时,如果汉堡包图标是用来表示来自左侧的菜单,则不要用它来表示配置文件的详细信息。 7 保持一致 一致性的设计是直观的设计。 ?

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

老外对中国式App设计趋势的分析:中国移动应用设计趋势解读

有些人说他们用系统相机应用拍完之后没有什么反应,之后就没有再尝试了。“我觉得这些是优惠券之类的东西”,有些人如此推测着,他们还担心这可能会对手机造成什么影响。...“发现”成为新的汉堡包菜单 (译者注:汉堡包菜单即我们常说的“三道杠”,因为长得像汉堡包得名。见下图:) 美国的App标准化了几种方式来组织他们未归类的项目(如设置和帮助)。...它们往往最右边(三个点的省略号图标)的“更多”选项卡或者汉堡包菜单里,Facebook的案例中, 则出现在一个汉堡包图标表示的“更多”选项卡中。 中国的App有时也这样使用“更多”。...每个媒体都有自己独特的运作方式,让用户们移动设备的屏幕就像是使用RSS阅读器一样。...你可以地铁看到许多人利用上下班的时间用自己的手机追剧看节目,这是我美国从来没有看到过的,可能是因为在这里用户们下载节目的能力吧。 专业的新闻类App,你可以下载数以百计的新闻内容后再阅读。

1.7K120

网页设计有什么标准?细说网页设计的6大规范

接下来编跟你详细分享网页设计规范,以便您在设计之前一定要和前端沟通使用的尺寸、字体、交互等,这样有助于后期,不会有误会。 一、网页尺寸 因为网页尺寸与用户屏幕相关,而用户屏幕的种类难以统计。...那这种文字浏览器的渲染与系统和浏览器有关。比如在苹果电脑看到的文字效果和 Windows 系统电脑看到的文字效果就有所不同:苹果会对文字进行渲染,而 windows 的文字几乎充满了像素颗粒。...六、自适应与响应式网站 有些网站使用电脑端或者手机端甚至 iPad 去浏览时体验都非常好。这就需要为了用户体验而进行网站的自适应响应式布局了。...适配时我们一般以750x1334px尺寸为主,然后将网站导航改变为手机 APP 常常使用汉堡包+抽屉式导航的形式。...如果用户使用安卓手机,那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕

2.5K60

如何使用机器学习一个非常的数据集做出预测

朴素贝叶斯是一系列简单的概率分类器,它基于应用贝叶斯定理,特征之间具有强朴素的独立假设。它们是最简单的贝叶斯模型之一,但通过核密度估计,它们可以达到更高的精度水平。...我的搜索过程中,我找到了一个网球数据集,它非常,甚至不需要格式化为 csv 文件。 我决定使用 sklearn 的 GaussianNB 模型,因为这是我正在学习的课程中使用的估算器。...下面的屏幕截图显示了我绘制出所有列后的df。 我要注意的是,我创建了这个程序之后,我回过头来对数据进行打乱,看看是否可以达到更高的精度,但在这种情况下,打乱没有效果。...我不得不说,我个人希望获得更高的准确度,所以我 MultinomialNB 估计器尝试了数据,它对准确度没有任何影响。 也可以仅对一行数据进行预测。...由于网球数据集非常,增加数据可能会提高使用此模型实现的准确度:- ?

1.3K20

2020年网站首屏设计:最佳实践和例子

所以不要专注精确的像素概念,遵循简单的常识规则就好。 首屏的高度最好不要干扰对内容的感知。 对于信息类资源,首屏将是一个很好的选择,而对于类似登陆界面,首屏大一点更好。...Builddie Website Homepage 视频动画 不要把注意力集中静态图像。 添加视频是最有效的突出网站首屏的方式之一 。如果可能,请尝试将主题视频材料添加到首屏中。...Meal Service Home Page 隐藏导航(汉堡菜单) 这是一种使用得越来越多的网站设计解决方案。汉堡包菜单是三条条纹的小图标,点击时显示完整的菜单。...当设计师需要专注于主屏幕时,它们就使用这种方法。 从网站可用性的角度来看,这是一个很好的选择。 这样的菜单来自移动设计,用户已经很熟悉了。...汉堡包菜单适用于促销网站,其中主要重点是使用照片视频高质量地展示产品。 对于在线商店,这个选项可能不太合适,因为对于消费者来说,有一个购物车、选定的产品和快速访问的搜索字段是很重要的。 ?

2K10

脑洞真大!这个 CSS 库帮你做汉堡?

大家好,我是鱼皮,今天教大家做汉堡包。 当然不是真的汉堡包,毕竟我们这儿不是美食频道,而是指 HambergurMenu,汉堡包菜单,由于菜单图标的三条横线酷似一个汉堡包,故得其名。...为了让网页更生动,当点击汉堡包菜单图标时,可以给它添加一个小动画。这不,有个国外的大神,专门开发了一个汉堡包菜单 CSS 动画库,库的名称就叫 Hamburgers!...[image-20210425000009512.png] 如何使用 该库的使用方式非常简单,由于是纯 CSS 实现,只需引入一个样式文件: 美中不足的是,需要我们自行通过 JavaScript ...rid=17453ede60843d0e04015e05484ef4f5 编程导航 中还能发现更多优质编程学习资源,欢迎分享给有需要的同学吧!

1.4K31

《Motion Design for iOS》(十五)

从UIKit和CoreAnimation开始 通常情况下,iOS app中屏幕的物体都是UIView对象。它们是矩形的并且有坐标和大小来定义它们屏幕的位置和尺寸。...每个视图都可能伴随着文本、形状图片绘制。...运营商图像视图(苹果控制) wifi信号强度视图(苹果控制) 当前时间视图(苹果控制) 电池等级视图(苹果控制) “汉堡包菜单按钮 标题栏中的标题标签 改变子板的按钮 一个UITableViewCell...一个UIView本质是一个包含内部图形的矩形。屏幕布局,靠近或在其他视图的顶部,还可能会有高级的透明效果来整合到一起或者快速绘制。...像你想象的一样,让大量的视图屏幕移动确实是一个挑战,尤其是一个的,低功率的设备。 这就是为什么苹果公司开发了Core Animation。

84640

Android N一些新特性的介绍「建议收藏」

新版emoji表情不仅采用了全新的设计风格,还提供了多种肤色选择 旧版的emoji中,例如“警官”表情只是黄色小布丁头上扣了一顶警帽,新版则变成了一个实实在在的警察。...7.全新设置样式 或许是为了让用户能够更快速地同一级菜单的选项中切换,Android N 系统设置采用“汉堡包菜单,比如在“设置-开发者选项”中就可以点击左上角“三杠”图标调出上一级菜单、也就是设置中的第一级菜单...具体点来说,就是屏幕关闭片刻后,设备使用电池时,Doze休眠机制将限制网络访问,同时延迟作业和同步。短暂的维护时间范围后,其允许应用访问网络,并执行延迟的作业/同步。...打开屏幕将设备插入电源会使设备退出Doze休眠机制。...紧急信息窗口仅在当你设置了安全锁屏且紧急拨号面板下才会显示出来,毕竟当遇到突发急症等险境时,如果在手机上设置了锁屏,别人就无法主动通过手机联系家人朋友。

1.2K20

响应式设计

通过使用几个关键技术,根据用户浏览器视口的大小(或者屏幕分辨率)让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站,就可以智能手机、平板,或者其他任何设备运行。...除了前面提到的交互菜单,移动版设计主要关注的是内容。大屏,可以把页面的大块区域拿来做头部、主图、和菜单。然而在移动设备,用户通常有更明确的目标。 移动版设计就是内容的设计。...矛盾的汉堡包菜单:汉堡包菜单最近几年很流行。它解决了屏幕里显示更多内容的问题,但是也有弊端。将重要元素(比如主要的导航菜单)隐藏起来会减少用户跟它们交互的机会。...如果可以的话,建议移动设备用别的方式组织数据。比如将每一行数据单独用一块区域展示,让每块区域顺序叠放,或者用更适合屏的可视化图形或者图表展示。但是,有时候就是需要用表格。...也没有必要为屏幕提供大图,因为大图最终会被缩小。 # 不同视口大小使用不同的图片 响应式图片的最佳实践是为一个图片创建不同分辨率的副本。

2K10

脑洞真大!这个 CSS 库帮你做汉堡?

大家好,我是鱼皮,今天教大家做汉堡包。 当然不是真的汉堡包,毕竟我们这儿不是美食频道,而是指 HambergurMenu,汉堡包菜单,由于菜单图标的三条横线酷似一个汉堡包,故得其名。...为了让网页更生动,当点击汉堡包菜单图标时,可以给它添加一个小动画。这不,有个国外的大神,专门开发了一个汉堡包菜单 CSS 动画库,库的名称就叫 Hamburgers!...[image-20210425000009512.png] 如何使用 该库的使用方式非常简单,由于是纯 CSS 实现,只需引入一个样式文件: 美中不足的是,需要我们自行通过 JavaScript ...rid=17453ede60843d0e04015e05484ef4f5 编程导航 中还能发现更多优质编程学习资源,欢迎分享给有需要的同学吧!

1.3K10

来自用户体验大师的100个UX设计建议——上篇

除了链接外,网站上的任何文本都不要使用蓝色。 12. 注意手机网站上的色彩对比,屏幕眩光让用户无法使用网站/产品。 13. 为网站的CTA按钮专门保留一种颜色,不要用于其他元素。 14....如果用户需要用小拇指去点击手机网站应用程序,这说明界面上的交互目标太小。 24. 当用户拿着平板电脑时,大拇指最容易接触到的地方是屏幕的两侧和底部。 25....移动设备尽量不要设计双击交互,确保用户可以通过一次触摸完成交互。 27. 设计移动布局时,考虑用户是否会单手两只手使用设备的情况。 5.png 六、关于导航设计 28....考虑使用粘性菜单导航(跟随浏览器滚动的导航),特别是较长的网页中需要快速访问时。 31. 一个好的网站导航并不会妨碍网页,使用后会消失背景中。 32....对于手机的辅助导航,可以使用分类登录页面、子菜单页面内菜单。 38. 菜单下拉列表应该是垂直的,而不是水平悬停,因为水平滚动要困难得多。 39.

1.6K30

UI设计之动画—从虚拟到现实

用于移动游戏交互的动画概念的示例(图一) 有报告称,所有开发人员都讨厌概念动画并且从不想实现,这并不是真的,至少设计中不是。实际,在其他创造性的领域中,有些人认为创新是难以置信的,不可能的。...从列表转换到项目 这是另一个例子:左侧选项显示从列表菜单转换到特定项目屏幕的基本方式,而右侧选项的流程更加动态。 打开侧边菜单 概念动画会让人觉得更加生动且富有生命力,比如打开侧面菜单等基本操作。...Music News App动画在从类别屏幕到列表的过渡中使用形状和线条 ? Home Budget app中的UI动画概念增加了打开汉堡包菜单的动态 ?...还有一个动画为侧面菜单的交互增添乐趣并支持视觉层次结构 UI动画概念的主要好处 事实,概念是所有行业或者创新行业创新和研究创新的开始。...看看汽车行业建筑行业,记住新的艺术方向如何在历史中出现和发展。无论是什么领域,对概念的态度都会表现出两种对立面,即“这只是一种与现实生活毫无关系的幻想”,“为什么不......”两种变体都是可行的。

1K60

如何使用Fluent Design System (下)

4.1 使用HamburgerMenu代替NavigationView UWP Community Toolkit中的HamburgerMenu是以前制作汉堡包导航菜单最常用的方案,升级到2.0版本以后它会判断运行的...5.2 错误使用Acrylic Acrylic有些难用,一般来说Acrylic只应该作为背景使用菜单、弹出遮罩Flyout等,程序的主体区域的背景不可以使用Acrylic。...作为例外,Widget轻量级应用可以整个应用的背景使用Acrylic,像计算器应用那样。 ?...如何评价Fluent Design System 6.1 过去 Zune和WP的时代,局限于设备性能及屏幕尺寸,微软提出了MetroUI,提倡了扁平化设计、移除多余装饰元素,既好看又好用。...当年也曾热衷于桌面上使用Metro,但现在对WPF使用FDS没什么兴趣。何况这个主题是讨论UWP中额FDS,不太想涉及WPF。

1.2K20

2019年最实用的导航栏设计实践和案例分析全解

侧边栏导航:侧边栏导航的设计形式比较多样,也可以有多种表现形式,可动可静,可大可,比较个性化。 ? 底部导航:底部导航应用性不是很广,被广泛使用的并不是pc端中,而是移动端。 ?...其他导航栏类型: 面包屑导航 面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。通常出现在博客内,多使用关键词也有利于SEO的优化以及内链建设。...汉堡导航 汉堡包导航,是三条横线呈现的导航按钮,是一种很常见的导航方式。...滚动式导航栏 通过鼠标来滑动屏幕展示菜单,这种方式近年来比较流行。但个人建议除非是个性化的网站,企业网站采用这种菜单,用户会困惑,并且还需要一定的学习时间。当然,手机端更适合。 ?...响应式设计 响应式的导航栏,在手机端几乎都是以汉堡菜单为主,点击可查看所有导航。以下是几个案列展示: ? ? 电商网站导航设计最佳实践 可以肯定地说,导航是电商网站设计中最关键的部分之一。

3.9K31

16岁日本神童打造日版「健康码」,追踪用户行动数据抗击疫情

新智元报道 来源:techxplore 编辑:梦佳 【新智元导读】16岁日本计算机天才少年加藤(Kato)近日开发了一个使用GPS的行迹记录软件Asiato,可记录用户行踪,同时将数据储存在手机中,...假设所有用户都启用这个系统,一旦有人新冠病毒检验呈阳性反应,其他用户的手机将搜寻过去14天定位资料,判断是否有密切且长时间接触感染者的风险。...大佬们抓紧利用技术抗击疫情,后浪们也不甘示弱,近日日本一名16岁少年开发了一款Asiato手机APP,可以记录用户到过哪里。...加藤设计了一款iPhone的应用,基于GPS定位系统,用户的手机上会保存他的行踪记录,这项功能在疫情期间可以帮助发现潜在的接触者。...有了编程天才,从此同学们写读书报告不再愁。

57810

灵感分享|10个优秀网站设计实例赏析及原型分享

使用鼠标滚轮的切换方式让整个网站看起来非常炫酷以及充满个性。这些个性化的设计都是视觉给用户冲击,但是确实有效。 03.Wearecolorz ?...全网站设计使用了全新的分屏设计,这种网站设计可以很好地为用户呈现两方面的信息,并且能够针对不同尺寸的屏幕进行匹配,使网页端和移动端做到很好的兼容,以便为用户创造好的用户体验。...网站设计使用漂亮的美食大图背景吸引用户,全屏式的展示堪称完美。此外,采用汉堡包菜单按钮,设计抽屉式导航栏,可以大大节约网站空间。随着页面滚动,导航栏会自然的移动到页面顶部固定。...网站设计采用了非常给力的响应式设计,PC端可以查看“Get Proposal”号召性用语按钮的完整菜单,但在平板和移动设备非常精简。...网站在所有设备都做到了很好的自适应,大大的提升了用户体验。 原型设计 怎么样?看完上面的10个网站设计实例后,是不是灵感十足?有了创意后,该如何做出心中的网站呢?

6.3K21

利用NVIDIA Jetson Orin的强大能力执行本地LLM模型

今天编要介绍一个项目:Jetson AGX Orin跑通 LLama 2模型: 这个项目来自: 不要担心,我们已经Jetson AGX Xavier 32G复现了这个项目,所以是可行的。...由于嵌入式GPU硬件设备的创新,可以几乎与汉堡包大小相当的嵌入式设备实现这种计算能力水平。这意味着LLM可以在这些设备产生本地结果,实现需要实时处理、隐私和降低延迟的场景。...本文中,我们将演示如何在NVIDIA Jetson硬件运行Meta AI最近发布的Llama 2 LLM的变种。令人惊奇的是,启动和运行变得非常简单。...接下来的步骤将适用于技术上任何基于GPTQ的Llama变种,因此如果您有兴趣尝试其他模型,现在您知道如何操作。一旦模型下载完成,从屏幕左上角的“模型”下拉菜单中选择它。...从这里,提示下拉菜单中选择“Instruct-Llama-v2”(如果您使用不同的模型,可能需要选择不同的提示选项更合适)。

1.7K90

大屏时代的生态变迁,看平板手机的拇指热键与界面布局

本文带你了解如何面向平板手机的拇指热键与界面布局,为这种转变提供助力。 人们怎样使用平板手机 iPhone出现之后的几年,手机屏幕的尺寸基本都保持4英寸以下(以对角线计算),非常便于单手操作。...不过,与屏设备的情况不同,为了如此巨大的屏幕舞指自如,用户必须更加频繁地不同的持机方式之间切换,而且多数时间里需要双手同时参与。...这是因为,屏规格范围内,无论屏幕尺寸如何变化,拇指热区基本都能保持相似的形状及位置,而一旦屏幕尺寸突破了某个临界值,人们通常需要将小指从屏幕下边缘移至机身背后,使其与另外三根手指一起托住手机才能保持稳定...我们屏设备遇到的诸如CSS兼容性局限页面元素与浏览器自身布局冲突等一系列问题,平板手机中依然存在。...以横滑展开菜单为例,平板手机上,不要放大横滑所需的距离,别让用户必须在整个屏幕范围内使用手势才能达到触发效果。

2.3K10
领券