展开

关键词

App之可点击元素设计

hi,这是系列文章:App之xxx的第3篇,前2篇我总结了 App之“文字”的设计技巧 App之底部导航栏的设计 直接点击可以查阅以上2篇文章。 我为什么写这个系列的文章。 因为我正在做一款app,我在团队中主抓产品设计、UX/UI设计、部分前端开发,少量运营。 今天来总结下App的可点击元素设计。 一、可点击元素包括哪些? 先看看常见的按钮是这样的: ? 这是具象的,模仿真实世界里的按钮来做的设计。 仅仅使用文字作为可点击元素存在,而不使用图标作为可点击元素,这样使得这款阅读古诗词的app别有一番风味,其产品的气质体现得很到位。 其实,app的所有构成内容都可以是可点击元素。 这需要UI&UX设计时好好考虑,为了降低用户的困惑,我们需要用可点击元素给用户明确的提示。 我们再看个例子: ?

1K70

运费模板的设计元素与逻辑

运费模板的设计在页面内设计元素较少且较为简单,但是在实际规则的使用需求中较为复杂。 页面元素 (1)模板名称 运费模板的名称,方便在商品编辑时进行选择。 香水所在运费模板则需要单独计算运费并叠加至订单中,至此我们可以引申出新的页面元素——商品分类。根据分类来具体识别订单内可能包含的特殊产品对运费进行特殊的计算。 较大电商企业 运费的组成=运费+人工成本+打包费+临时仓储费用 运费:包含运输费用,需要根据具体所签约的物流企业计算实际的运费,所以可能会在运费模板中新增物流企业的选项,而运费的整体元素都将跟随物流企业的元素进行变换 在较大的电商企业中需要仔细计算运费模式,所以一般运费的设计不会在后台中进行设计,而是会细分至ERP中进行处理然后在自动返回值至电商后台中(根据货号进行识别商品,或者是根据具体所绑定的品类进行识别,识别完毕之后再金蝶中会有该商品的详细参数

73121
  • 广告
    关闭

    9块9,云智绘帮您轻松搞定营销设计!

    10万模板,1亿优质图库,正版商用授权,涵盖电商、banner海报、新媒体配图、教育培训海报、H5等各种场景

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

    响应式设计之子元素的数目检测

    在响应式设计中,通用做法是根据屏幕尺寸,显示不用的样式。如果碰到需求,希望根据子节点的个数,显示不同的样式呢? 15%;     @include child-more-than(li,5){         width: 15%;     } 当然也有缺点,css 选择器,只能修改子节点本身的样式,不能修改父元素的样式

    6940

    网页设计排版中哪些元素最重要?

    有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上。 一个好的网站设计,不仅要求质量好的内容,还必须有整洁干净的页面排版,才能真正地达到良好的用户体验。 网页设计排版VS平面设计排版 网页设计中的排版和平面设计的排版有着很多相似,但又有很多不同。 所以,这么多种元素要呈现在固定大小的页面上,要考虑的情况自然就比平面设计多得多。那么下面我们讨论一下一些在网页设计排版中设计师们注意的一些元素。 3.交互 交互设计在网页设计中有着相当好的势头,那么在设计交互的时候,必定会涉及到许多的页面、组件。由于这么多的组件元素要排列在同一个页面上,要考虑的情况也就多了许多。 4.视频和动画 如果一个网页只有文字和图片这样静态的元素,难免少了一些生气。

    46740

    【必】PowerBI 报告设计思想 - 切换元素

    设计了布局和导航后,所有界面的元素都可以一一排布了。在制作PowerBI报表的过程中,会有一个核心的问题:信息密度。 当用户选择了一大票数据的时候,并希望进行可视化,从理论上来说,可能是做不到的。 通过这个巧妙的设计,我们就可以自由的在图和表之间切换了。 用书签控制局部元素 我们用书签除了可以做导航,还可以完成本文所提到的局部切换式设计,如下: ? 值得一提的是,这里的开关并不是图片,而是使用了原生的PowerBI元素。想象一下,如果没有分组功能,那么这些元素都需要手动控制,是不现实的。 开关的设计 我们在设计PowerBI报告的时候,是按照产品思维的,我们在作为设计师的那一刻,手指在键盘游动,而大脑在考虑的是报告的每一个细节,甚至到每个像素应该如何设计,而切换的开关,我们也会自己来定制 它并不影响整体的所有元素,它只影响局部。 这个切换显示的价值在于:极大的提升了报表的信息密度,又合理的平衡了可视化与数据之间的平衡,是一种符合儒家思想的中庸设计,很有意思。

    63210

    元素设计原理及规则v1.0

    一、元素设计架构 元素设计架构展示在基于元素设计的思想下,系统各元素之间如何相互协作,并完成整个系统搭建。 二、元素组织结构 元素组织结构描述各个元素的划分及定义原则,使设计人员、开发人员在元素化开发思想的实现过程中保持一致,使开发的元素得到良好的组织并具可控性。 基Logic完成所有子Logic元素的共有I/O(属性、功能),子Logic元素实现具体业务,不同业务产生新的Logic元素不同。 ? 3、UI元素 UI元素根据Entity元素自动产生用户界面。 当出现新的未定义用户界面时将产生新的UI元素。 所有UI元素在都可以在更高层次上进行再抽象,故定义UI基元素,所有UI元素都直接或间接继承于UI基元素。 ? 4、公共元素 公共元素是指所有元素都可以使用的公有元素,如:SqlHelper、系统框架、Commn(共有小功能)等。

    36750

    CSS 块元素、内联元素、内联块元素

    仅供学习,转载请注明出处 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size 内联块元素 内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的 ,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。 这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。 display属性 display属性是用来设置元素的类型及隐藏的,常用的属性有: 1、none 元素隐藏且不占位置 2、block 元素以块元素显示 3、inline 元素以内联元素显示 4、

    1.1K20

    App自动化《元素定位方式、元素操作、混合应用、分层设计、代码方式执行Pytest 命令》

    目录 一、App 元素定位方式 二、元素操作 三、测试混合应用 四、以代码的方式执行 Pytest 命令 五、App 自动化分层设计 App 自动化目前用得是 Appium,有 Python 版本的Uiautomator2 一、App 元素定位方式 坐标、id、xpath、android_uiautomator、classname、accesiblity_id。 accesiblity_id是安卓的元素定位方式之一。 # 等待的时候,要用元素存在的条件。不能用元素可见的条件。 五、App 自动化分层设计 App 自动化和 Web 自动化一样,都是这样分层的: ? 在 PO 模式中想要点击元素、操作元素也得等待元素可见,也有最基本的 4 种元素操作方法:输入操作、点击操作、获取它的文本内容、获取它的属性。 ? Locator 里面绑定了元素定位方式和定位类型。

    35730

    Selenium 元素checkbox元素操作与元素等待

    概念 显示等待是针对某一个元素进行相关等待判定; 隐式等待不针对某一个元素进行等待,全局元素等待。 相关模块 WebDriverWait 显示等待针对元素必用 expected_conditions 预期条件类(下面很多方法可以调用,用于显示等待) NoSuchElementException 用于隐式等待抛出异常 elements 多了一个“s” 这样可以获取一组元素 inputs=driver.find_elements_by_tag_name("input") print("复选框的个数为") print : if i.get_attribute("type")=="checkbox": #获取元素属性为checkbox i.click() #勾选方框 time.sleep(1) Webdriver简介 Appium连续滑动操作——九宫格滑动 Appium Android Toast元素识别 Android H5元素定位 Mac 环境Appium自动化测试环境搭建 众里寻他千百度

    27220

    FE -- 如何合理科学地设计网页元素间距

    我们可以通过box-sizing这个元素属性去设置盒模型,如果值为border-box,那么它是IE盒模型;如果为content-box的话,那么它就是W3C盒模型,默认情况下是W3C盒模型。 就是之前我们说的距离产生美,不同的关系之间它的距离是不一样的,我们不能够一板砖地去设计对吧。要做到松弛有度,两个陌生人之间肯定距离会比老铁之间大点,和情侣比那么更大了,对吧,就是这么个思路。 从图中我们看到,这样一个问题,就是第一个zjt图文它是padding内间距和整个白框div用的是同一个padding类,而楼下的用的是比楼上的要小一点,所以设计的时候我们要考虑的下,父与子的关系,同级别的关系 ,你把zjt图文设计的和包裹它的div的padding一样很显然不合适嘛!

    21120

    指示性设计元素不可或缺

    在web和app界面设计中也一样,设计师可以利用各种指示性设计元素引导用户,帮助用户找到自己想要的内容或完成某项必要的操作。 本文就UI界面中常见的指示性设计元素做了一些整理,希望可以帮助到各位设计师。 ? 什么是指示性设计元素? 众所周知,道路上的指示标志是用来指示车辆和行人该如何通行。 同理,在UI界面中,指示性设计元素就是用来告知、引导、指示用户的设计元素,因此,只要是在视觉上可以提示特定的交互或内容,从而让用户更快、更轻松地注意到,比如CTA按钮,文本提示等,都属于指示性设计元素。 可见,指示性设计元素对用户行为和页面的转化率有着非常重大的影响。 常见的指示性设计元素 一、箭头(Arrows) 箭头是最受欢迎的指示设计元素之一,它通用、明显、易懂。 总结 以上就是本次分享的一些指示性设计元素,其实这类的设计元素还在不断的创新中,如果你有更多的想法,欢迎和我们交流。

    27930

    vue获取当前点击元素的父元素、子元素、上级元素

    #获得点击元素的第一个子元素 e.currentTarget.firstElementChild # 获得点击元素的下一个元素 e.currentTarget.nextElementSibling # 获得点击元素中类名为string的元素 e.currentTarget.getElementsByClassName("string") # 获得点击元素的 获得点击元素的前一个元素 e.currentTarget.firstElementChild 获得点击元素的第一个子元素 e.currentTarget.nextElementSibling   获得点击元素的下一个元素 e.currentTarget.getElementById("string")   获得点击元素中id为string的元素 e.currentTarget.getAttributeNode    获得点击元素的前一个元素的第一个子元素的HTML值

    1.9K30

    行内元素和块元素

    标签的类型 块元素(block) 块元素特征 默认独占一行 没有给宽度的时候,宽度是auto,撑满一行(宽度就是父级的宽度) 支持所有的css命令 属于块元素标签的有 div,h1-h6,p,ul ,li,ol,dl,dt,dd,header,nav,footer,section,article,aside 行内元素(inline) 行内元素的特征 内容撑开宽高,宽高的值都是auto,只不过显示出来的宽高是由内容撑开的 不支持设置宽高 不支持上下的margin和上下padding(左右支持),上下的padding使用问题的,虽然把背影撑出来了,这只是表面现象,它不会对其它的元素有影响 所有的行内元素都会在一行显示(一行可以放得下的前提下 ) 代码换行会被解析成一个空格 属于行内元素标签的有 a,span,strong,em,mark,img,time

    5220

    行内元素和块级元素

    行内元素和块级元素 HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSS的display属性相互转换。 行内元素 行内元素对应的CSS样式设置为display: inline;。 示例 行内元素1 <! -- 排列在一行 --> 行内元素2 行内元素3 <! -- 排列在一行 --> 行内元素2 行内元素3 <!

    24320

    CSS样式块级元素,行内元素,行内块级元素

    前言 HTML元素按布局属性可以分为三种类型:块级元素、行内元素、行内块元素 这篇文章梳理一下他们的区别与联系 一、区别 1.块级元素 属性 默认独占一行 如果不设置宽度,默认是父级的宽度。 宽度随元素的内容大小而变化。 代码换行时,会出现间隔。解决方案:父元素设置font-size为0,子元素再设置具体的字体大小。 行内元素里面不可以嵌套块级元素 3.行内块元素 属性 不会独占一行,可以与其他非块级元素同行 可以设置全部属性 代码换行时,会出现间隔。 二、联系 可以通过css的display的属性来转换 block 块级元素 inline 行内元素 inline-block 行内块级元素 display: block; // 设置元素为块级元素 display: inline: // 设置元素为行内元素 display: inline-block; // 设置元素为行内块元素 三、常见标签 1.块级元素 div,p,ul,li(列表)

    30320

    CSS入门10-替换元素和非替换元素,块级元素和行内元素

    替换元素和非替换元素 2.1 替换元素 替换元素是指,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。 这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。 块级元素和行内元素 3.1 块级元素 普通流中,块元素独占一行。例如:div,p,h1等。 3.2 行内元素 普通流中,行内元素左右可以有其他行内元素。 4. 块级元素,行内替换元素,行内非替换元素表现 4.1 块级元素表现 块级元素,width,height,margin,boder的设置遵循盒模型。 替换元素和不可替换元素;块级元素和行内元素 置换元素(替换元素)和非置换元素(不可替换元素) 行内元素与块级元素的总结 置换和非置换元素

    52200

    元素滚动,父元素不滚动

    这个是为了处理在bootstrap框架中的iframe 滚动条的问题,查找到的解决方案 小tip: 子元素scroll父元素容器不跟随滚动JS实现 演示页面 代码 CSS代码: .test {

    1.5K30

    可替换元素和非替换元素

    可替换元素和非替换元素 可替换元素replaced element也称作可置换元素,其展现效果不是由CSS来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。 可替换元素 一个内容不受CSS渲染控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸例如宽度、高度、宽高比等的元素,被称之为置换元素。 对于可替换元素,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。 可替换元素的内容不受当前文档的样式的影响,CSS可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。 对于某些可替换元素,例如<iframe>元素,可能具有自己的样式表,但它们不会继承父文档的样式。 CSS能对可替换元素产生的唯一影响在于,部分属性支持控制元素内容在其框中的位置或定位方式。 非替换元素 非替换元素是其内容包含在文档中的元素,其内容可以受CSS渲染控制。 非替换元素的内容不会超出CSS的模型范围,CSS在渲染时会考虑非替换元素的内容。

    45130

    元素渲染

    元素是构成REACT应用的最小砖块 元素描述了你在屏幕上想看到的内容。 const element =

    Hello,world

    ; 与浏览器的DOM元素不同,REACT元素是创建开销极小的普通对象。 REACT DOM会负责更新DOM来与REACT元素保持一致。 注意: 你可能会将元素与另一个被熟知的概念——“组件”混淆起来。我们会在下一个章节介绍组件。组件是由元素构成的。 一旦被创建,你就无法更改它子元素或着属性。一个元素就像电影的单贞:它代表了某个特定时刻的UI。 React只更新它需要更新的部分 REACT DOM会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使DOM达到预期的状态。

    35820

    扫码关注腾讯云开发者

    领取腾讯云代金券