展开

关键词

「译」按钮文本设计的五大原则

下面列出的五大原则可以帮助你选择正确的按钮文本,从而提高按钮的可操作性。遵循这五大原则进行设计,那么你的用户在使用 app ,不管面对什么按钮都不会发生误操作。 如果措辞不够严谨,用户很可能会曲解按钮的作用。 image.png 举个例子,“删除”和“移除”在意思上很接近,但两者的语义是不一样的。 “删除”指的是从系统中删除某个东西,而“移除”指的是从一堆东西中移出某个东西。不分上下文地错用这两个词语会使用户在按按钮产生畏惧感。 在播放列表中,词语“删除”会用户觉得自己的歌曲会被删除掉,这里的措辞是不合适的,因为实际上歌曲并不会被删除。使用词语“移除”会更加严谨,因为这个操作只是将歌曲移出播放列表,但不会将其从磁盘中删除。 他们确信在这种情况按钮采取的操作是非常明确的,这在某种程度上也使得他们更加坚信自己作出的决定。 使用主动的祈使句式,要避免采用教学式的表达告知用户如何使用他们的设备。

16320

SwiftUI:视图的显示和隐藏动画

以前,您已经了解了如何使用常规if条件有条件地包含视图,这意味着当条件更改时,我们可以从视图层次结构中插入或移除视图。 .fill(Color.red) .frame(width: 200, height: 200) } } } 我们可以矩形只有满足一定的条件才能出现 isShowingRed在“true”和“false”之间切换: self.isShowingRed.toggle() 如果你运行程序,你会看到按按钮显示或者隐藏红色方块。 :当按钮腾出空间,矩形会放大,当再次点击,矩形会缩小。 一个有用的方法是不对称,它允许我们在显示视图使用一个转换,在视图消失时使用另一个转换。

96330
  • 广告
    关闭

    老用户专属续费福利

    云服务器CVM、轻量应用服务器1.5折续费券等您来抽!

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

    Excel实战技巧65: 制作漂亮的用户窗体按钮——当鼠标移动到按钮高亮显示

    下面,我们来实现当鼠标移动到用户窗体按钮,会使用颜色高亮显示,用户窗体更生动,如下图1所示。 ? 其实,你在图1中看到的按钮并不是用户窗体内置的传统命令按钮,而是使用图像控件来制作的。 由于图像是静态的,在运行时不能更改颜色,因此每个按钮都由两个图像组成,一个图像代表鼠标悬浮在按钮上的状态,另一个图像代表鼠标未悬浮在按钮上的状态。 在用户窗体中绘制图像按钮 在VBE中,插入一个用户窗体,在其中放置一个标签控件、一个文本框控件以及一个图像控件,并调整成合适的大小和排列,如下图3所示。 ? 复制一个刚才绘制的图像控件,如下图6所示。 ? 这个图像将代码鼠标不在按钮的状态。 编写代码 使用MouseMove事件来响应鼠标的动作,这个事件当鼠标移动到特定控件中,执行其中的代码。

    3.2K20

    一篇文章读懂UI按钮设计细节与规范

    你最应该知道的一件事 一个按钮应该看起来就像是“按钮” 设计按钮最重要的原则是其足够的突出,不会与其它任何东西混淆在一起。 ? 除了用基于网格的方式外,我们还可以使用大写字母W来选择按钮安全距离的方法。如下图,如果按钮的上下两侧可以放下一个W的话,在侧面,最合适的情况是放下两个W,以此来提高可读性。 ? 与平面化的按钮相比,带有阴影的按钮也可以用户有更强的点击欲望,并且更快的注意到这个按钮在按钮中添加一个微妙的阴影,可以它从背景中脱颖而出。关于按钮阴影的最佳实践将在本章稍后讨论。 ? 太会你感觉左边距和上方文本不在同一个位置上(也就是说没有对齐)。 ? 对齐图标 在按钮上进行良好的图标对齐是一件很困难的事情。在很多情况,字体粗细,图标粗细之间的关系都会影响到对齐。 但是,有一条简单而有用的规则,在大多数情况都适用。 ? 根据按钮的圆角半径,我们来创建一个圆或者正方形,其大小等于按钮的高度。在这个图形中,我们创建另一个形状来容纳图标。

    68130

    PyQt5编写跨平台的CDN上传工具桌面版

    ---- 一、起因~ 之前总有人找到我们组小伙伴手动上传文件到CDN上,我们小伙伴cq一怒之下写了一个基于TK的自助GUI工具,我看了之后觉得这个还挺有意思,就用PyQt5重写了一个,加入了认证和页面美化 三、PyQt5相关知识点~ Mac上折腾Qt Designer工具的使用,折腾Qt Creator工具的使用,这两个都是用来拖拽式实现界面设计的工具 如何隐藏标题栏 QPushButton如何去掉边框 图片自适应QLabel大小 使用ui文件生成资源文件 使用.qrc 生成资源文件 状态栏信息左右分屏展示 输入框提示信息置灰 输入框未输入信息对应按钮为不可用状态 登陆页面和主页面的切换如何实现 简单的页面布局 八、题外话 这中间也折腾了Kivy和PySimpleGUI, 其中Kivy是真的跨平台,支持*nix, winodws, Android, ios等,可以说比较强大了,PySimpleGUI也是你写更少的代码 ,快速实现需求,可能是我姿势不对,用这两个工具整出来的效果还不如TK,TK是原生模块,这块是优势~, 选择一个你钟意的,搞起来吧~

    55330

    你的按钮到底在帮助用户还是在误导用户?

    下面我们来看看影响按钮层次结构的3个方面: 按钮类型 我们先来介绍一常用的4种类型按钮: l 立体按钮一个具有立体效果的按钮,使它引人注目。 l 平面按钮:没有任何花哨效果的常规平面按钮在按钮之间添加空行以将其分为几种类型。放在一起的按钮人从视觉上就任务具有类似的功能。 ? 如果他们错过了我们期望他们按按钮,我们就会错失用户成为潜在客户的商机。所以,把按钮做的足够醒目,从而牢牢抓住用户的眼球是至关重要的! 要做到这一点,通过对比来突出按钮往往是很有效的方法。 标签 对于具有特定或复杂功能的按钮,需要给按钮设置上标签,以简要说明其功能。显示方式为,当光标悬停在按钮出现。 ? ? 结论: 按钮在任何交互系统中都是至关重要的。 因此,按钮的设计的好坏直接影响用户的体验和操作的,为能正确引导我们的用户,我们可以: l 按钮的设计富有层次 l 按钮在页面中再醒目一点 l 不要让用户去猜按钮的用途 在各种场景都应该要精心为用户设计按钮

    23010

    iOS键值观察KVO实例详解简介实例效果实现方式进阶用法

    实例效果 如上图所示,界面上设置两个label,一个显示名字,一个显示分数。还有一个按钮,用来修改分数,现在要做到点击按钮分数变化。 可能你会觉得很简单,直接在按钮的响应方法中将分数的label内容修改不就可以了吗,确实如此,但是这里我们不这么做,而是使用KVO来完成。 现在我们给这个实例化了的学生模型添加一个观察者,定义为我要观察学生模型的分数变化情况,这时,如果这个学生模型的分数发生了变化,比如在按钮响应中只对模型的分数属性进行修改,KVO这个机制就会自动给观察者发送通知 设计样式 样式就不说了,两个label,一个按钮,以及按钮的响应方法,都是很常见的。 修改数据 在按钮的响应方法中修改学生模型的分数数据,同样使用 setVlue:forKey: 的方式进行设置。

    6130

    JavaScript(十二)

    事件流 ---- 最早的两大浏览器厂商(IE 及 Netscape)在如何在看待浏览器事件方面还是一致的。比如说,如果你单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上。 如,要在按钮被单击执行一些 JavaScript,可以像下面这样编写代码: <input type="button" value="Click Me" onclick="alert('Clicked 这也意味着通过 addEventListener() 添加的匿名函数将无法<em>移除</em>。 大多数情况<em>下</em>,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。 只要用户从<em>一个</em>页面切换到<em>另一个</em>页面,就会发生 unload 事件。而利用这个事件最多的情况是清除引用,以避免内存泄漏。 焦点事件 焦点事件会在页面获得或失去焦点<em>时</em>触发。 mouseleave: 在位于元素上方的鼠标光标移动到元素范围之外<em>时</em>触发 mousemove: 当鼠标指针在元素内部移动<em>时</em>重复地触发 mouseout: 在鼠标指针位于<em>一个</em>元素上方,然后用户将其移入<em>另一个</em>元素<em>时</em>触发

    13120

    七个Python必备的GUI库,这次一定要学会!

    使用pip安装一。 当没有数据,点击BMI按钮,会有与之对应的提示。 下面我们使用正确的数据,来看看结果。 ? 使用起来感觉还是不错的。 03. Kivy Kivy另一个开源的Python库,最大的优点就是可以快速地编写移动应用程序(手机)。 # 安装kivy pip install -i https://pypi.tuna.tsinghua.edu.cn/simple kivy 一个基于Kivy的Hello World窗口。 点击OK按钮,窗口消失。 06. PyGUI PyGUI是一个以简单API而闻名的GUI框架,减少Python应用与平台底层GUI之间的代码量。

    23420

    七个Python必备的GUI库,这次一定要学会!

    使用pip安装一。 当没有数据,点击BMI按钮,会有与之对应的提示。 下面我们使用正确的数据,来看看结果。 使用起来感觉还是不错的。 03. Kivy Kivy另一个开源的Python库,最大的优点就是可以快速地编写移动应用程序(手机)。 # 安装kivy pip install -i https://pypi.tuna.tsinghua.edu.cn/simple kivy 一个基于Kivy的Hello World窗口。 点击OK按钮,窗口消失。 06. PyGUI PyGUI是一个以简单API而闻名的GUI框架,减少Python应用与平台底层GUI之间的代码量。

    20830

    按钮样式的正确方式

    按钮样式的正确方式 如果你正在建立一个网站或一个web应用,你可能会用到按钮,也许看起来像按钮的链接。不管怎样,这些正常展示是很重要的。 另一个选择是使用这种风格作为mixin(使用Sass或其他预处理器)并选择性地应用它: @mixin button-reset { padding: 0; border: none; font 浏览器为“focus”和“active”(即按)状态设置了默认样式,但通过重置按钮样式我们已经删除了其中的一些。 我们还希望为鼠标悬停设置样式,总体而言,我们希望可见的样式与我们的设计相匹配。 如果您在桌面计算机上,请使用Tab和Shift + Tab键在按钮之间导航: ? 处理focus样式 还有一个棘手的问题。 在多个浏览器中,当您单击链接或按钮,将应用两个伪类: :active :focus 一旦停止按鼠标按钮或触控板,“active”伪类就会停止应用。

    63720

    Python 图形界面框架 PyQt5 使用指南!

    Deploy everywhere.需要与Kivy配合使用。 Toga[10]:一个使用Python开发原生APP的GUI工具包。 show():用来显示窗口 exit(app.exec_()):设置窗口一直运行指导使用关闭按钮进行关闭 PyQt5支持的常见Widgets有: 从上到,从左到右依次为:Qlabel、QcomboBox 100, 100) button.clicked.connect(click) win.show() sys.exit(app.exec_()) button.clicked.connect() 在按钮点击后执行特定的事件 PyQt5实战 实战项目:简易的天气查询软件 1、使用Qt Designer设计一个界面 用到的控件有Button, GroupBox, Label,ComboBox,TextEdit,同时定义了两个按钮 新增demo.py文件, 在MainDialog类中定义了两个槽函数queryWeather()和clearText(),以便在界面文件Weather.ui中定义的两个按钮(queryBtn 和clearBtn

    41020

    (译)SDL编程入门(17)鼠标事件

    鼠标事件 和按键一样,SDL也有事件结构来处理鼠标事件,如鼠标运动、鼠标按钮和鼠标按钮释放。在本教程中,我们将制作一堆可以与之交互的按钮。 ? 和#include一样,#if也是一个宏,用来和编译器对话。在这种情况,它说如果SDL_ttf没有被定义,忽略这段代码。 = NULL; } #endif 为了确保我们的源代码不使用SDL_ttf进行编译,这里再次将字体函数的加载夹在另一个定义好的条件。 首先,我们检查进入的事件是否是一个鼠标事件,特别是鼠标运动事件(当鼠标移动),鼠标按钮事件(当你点击鼠标按钮),或鼠标按钮抬起事件(当你释放鼠标点击)。 如果鼠标不在按钮内部,我们设置鼠标出精灵。如果鼠标在按钮内部,我们设置的精灵是在鼠标移动鼠标在上,鼠标按鼠标在下,鼠标释放鼠标在上。

    46030

    Android-活动的启动模式

    当然也只需要按一Back键就可以退出。 不过当MainActivity并未处在栈顶位置,那么在启动MainActivity,还是会创建新的实例。 新建一个SecondActivity活动,Main的按钮启动Second,Second启动Main, 可以看到按三次按钮以后,系统创建了两个不同的MainActivity活动, 由于在Second ,该如何实现,其他三种模式肯定不行,每个程序都有自己的返回栈,同一个活动在不同的返回栈中入栈肯定创建了新的实例,而使用singleInstance就可以解决这个问题,这种模式会有一个单独的返回栈来管理这个活动 然后按Back键,直接从Third返回到Main了,在按Back又返回到Second了,在按Back才是退出程序了。 因为Main和Third是在一个返回栈里面的,当在Third按Back键,Third会出栈,那么Main成为栈顶的活动,就会显示出来, 在按Back这时返回栈已经空了,于是就显示另一个返回栈里面的内容

    7020

    Asp.net如何实现页面间的参数传递

    使用这种方法的步骤如下: 1,使用控件创建web表单(form) 2,创建可以返回表单的按钮和链接按钮 3,在按钮或链接按钮的单击事件里创建一个保存URL的字符变量 4,在保存的URL里添加QueryString 使用Session变量传递值的一般步骤如下: 1,在页面里添加必要的控件 2,创建可以返回表单的按钮和链接按钮 3,在按钮或链接按钮的单击事件里,把控件的值添加到session变量里 4,使用Response.Redirect 方法重定向到另一个页面 5,在另一个页面提取session的值,在确定不需要使用该session,要显式清除它 下面的代码片断演示了如何实现这个方法: 源页面代码: private void ,当然了,使用这种方法,你需要额外写一些代码以创建一些属性以便可以在另一个页面访问它,但是,这个方式带来的好处也是显而易见的。 使用这种方法的整个过程如下: 1,在页面里添加必要的控件 2,创建返回值的Get属性过程 3,创建可以返回表单的按钮和链接按钮 4,在按钮单击事件处理程序中调用Server.Transfer方法转移到指定的页面

    17120

    【Flutter】自定义滚动开关

    switch是两个状态的UI组件,用于在ON(选中)或OFF(未选中)状态之间切换。通常,它是带有拇指滑块的按钮,用户可以在其中来回拖拉以选择其他选项,例如“开”或“关”。 当此属性无效,开关小部件会失效。 ? 该演示视频展示了如何在颤动中创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。 它显示了在用户按按钮后进行的切换交互,该开关将滚动到具有动画效果的另一侧,并且在滚动该开关将更改图标和文本。 *我们将添加textOn是字符串' Yes '表示当开关打开,文本将显示在按钮上;当textOff是字符串' No '意味着当开关关闭,文本将显示在按钮上。 我们将添加colorOn表示,当开关处于打开状态,颜色将显示在按钮上;当colorOff意味着当开关处于关闭状态,颜色将显示在按钮上。

    41050

    Visual Studio 2008 每日提示(十四)

    #136、工具栏浮动 原文链接:you can make a toolbar floating 操作步骤 把光标放到工具栏左侧四个点的位置,光标就会变成“4个方向键”型 此时,左键按并拖动工具栏 ,选择“添加或移除按钮”,然后选者需要调整的工具栏名,在按钮列表中选中或不选中按钮。 评论:把常用的按钮显示出来,既方便使用也IDE的窗口显得不拥挤。 ,把它拖到另一个工具栏或者交换位置。 评论:你可以新建一个工具栏,然后把自己常用的按钮拖进来,这个自定义的工具栏是不是很酷。

    50470

    SDK平台三态按钮的实现

    Windows平台提供了丰富的控件,但是在使用中我们不会使用它提供的默认风格,有时候需要对控件进行改写,它展现出更友好的一面,这次主要是说明三态按钮的实现。    三态按钮指的是按钮在鼠标移到按钮显示一种状态,鼠标在按展现一种状态,在鼠标移开又展现出另外一种状态,总共三种。 当然鼠标按和移出按钮展示的状态系统自己提供的有,这个时候在处理这两种状态只需要贴相应的图片就行了,三态按钮的实现关键在于如何判断鼠标已经移动到按钮上以及鼠标移出按钮,然后根据鼠标的位置将按钮做相应的调整 判断鼠标在按钮的相应位置,系统提供了一个函数_TrackMouseEvent用户处理鼠标移出、移入按钮。 重绘按钮需要在消息WM_DRAWITEM中,这个消息的处理是在相应控件的父窗口中实现的,而在一般情况父窗口不会收到该消息,需要我们手工指定控件资源的属性为的OWNERDRAW为真,或者在创建相应的按钮窗口将样式设置为

    34140

    Mockplus原型交互跟我做之3 - 认识“链接点”

    Mockplus能够快速设置交互,其中一个东西,你必须熟悉,就是“链接点”。 选中一个组件,组件的右上方,会出现一个小圆点,如图: ? 这样,就在按钮和目标页面之间做了一个链接,这个链接表明,当我点击按钮,会跳转到目标页面。如图: ? 按F5,进入演示,点击这个按钮,此时,你看到页面跳转了。 当我们需要做页内的组件交互(比如,点击按钮,图片往右移动),按住这个小圆点,不放开鼠标,往图片上拉动,到达图片后,放开(之后,会弹出一个选择交互命令的对话框)。 这样,就在按钮和图片页面之间做了一个链接,这个链接表明,当我点击按钮,会图片移动。如图: ? 看到对话框,选择“移动”,之后确定。 ? 按F5,进入演示,点击这个按钮,此时你可以看到图片移动了。 ? 好了,歇歇。 关于链接点和链接小工具条,还有些是可以了解的,不过,以后碰到我们再说。 喝杯咖啡先。

    51870

    相关产品

    • 云 API

      云 API

      云 API 是腾讯云开放生态的基石。通过云 API,只需执行对应 API 命令行工具即可快速操作云产品;在熟练的情况下,使用一些频繁使用的功能,使用云 API 可以极大的提高效率;除此之外,通过API可以组合功能,实现更高级的功能,易于自动化, 易于远程调用, 兼容性强,对系统要求低。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券