首页

微信小程序开发(四)获取用户openid

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在小程序里面有两个地方获取用户的openid。 
一个是wx.login(OBJECT),第二个是wx.getUserInfo(OBJECT)。 
这里我使用的是第一种wx.login(OBJECT)

步骤

 wx.login({
  success: function(res) { if (res.code) { //  第一步: 获取code //发起网络请求 wx.request({
        url: '后台接口', // 获取openid data: {
          code: res.code
        }
      })
    } else {
      console.log('获取用户登录态失败!' + res.errMsg)
    }
  }
}); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

后端的实现

后端的实现就是后端调用这个接口:https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code。 
这里写图片描述

/*
 * 根据code获取微信用户的openid
 */ router.get('/api/getWxCode', function(req, res, next) { var param = req.query || req.params; var code = param.code; var urlStr = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + wxConfig.AppID + '&secret=' + wxConfig.Secret + '&js_code=' + code + '&grant_type=authorization_code';
    request(urlStr, function (error, response, body) { if (!error && response.statusCode == 200) { var jsBody = JSON.parse(body); 
            jsBody.status = 100;
            jsBody.msg = '操作成功';
            res.end(JSON.stringify(jsBody));
        }
    })
}); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

具体实例

/**
 * 生命周期函数--监听页面加载
 */ onLoad: function (options) { var self = this;
  wx.login({
    success: function (res) { if (res.code) { //发起网络请求 wx.request({
          url: 'https://www.hgdqdev.cn/api/getWxCode',
          data: {
            code: res.code
          },
          success: function(res){ if(res.data.status == 100){ self.setData({
                openid: res.data.openid
              })
            }
          },
          fail: function(){ }
        })
      } else {
        console.log('获取用户登录态失败!' + res.errMsg)
      }
    }
  });
},

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


用户界面设计中的「版式设计」全方位指南

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一篇较为系统与全面的版式讲解,从规范化的布局形式到平面构成在用户界面设计中的应用与体现。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

关于Python+selenium 定位浏览器弹窗元素

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我也是刚学自动化,在自学过程中发现浏览器中有一些弹窗元素,无法定位。经过自己的摸索,有一些心得,写下来供日后自己回顾。
首先要确定弹窗的类型:
(1)div弹窗
(2)新标签页弹窗
(3)alert弹窗 
    
  • 1
  • 2
  • 3
  • 4
  • 5

一,div弹窗 
div弹窗是浏览器中比较好定位的弹窗,定位的方法与普通的元素一样。不过这里会有一个坑,明明可以找到这个按钮,但是就是定位不到。这个就是因为当前有div弹窗弹出的时候,需要设置一下等待时间,等页面元素加载完毕,再去做其他操作。 
这里用百度登陆为例子:

from selenium import webdriver import time def login_baidu(url,username,password): driver.get(url)
    driver.find_element_by_xpath('//*[@id="u1"]/a[7]').click()
    time.sleep(2)
    driver.find_element_by_xpath('//*[@id="TANGRAM__PSP_10__footerULoginBtn"]').click()
    time.sleep(2) # 弹窗出现后,使页面等待2S login_username = driver.find_element_by_xpath('//*[@id="TANGRAM__PSP_10__userName"]')
    login_username.click()
    login_username.send_keys(username)

    login_passwork = driver.find_element_by_xpath('//*[@id="TANGRAM__PSP_10__password"]')
    login_passwork.click()
    login_passwork.send_keys(password)

    driver.find_element_by_xpath('//*[@id="TANGRAM__PSP_10__submit"]').click() # 登陆按钮 if __name__ == "__main__":
    driver = webdriver.Firefox()
    username = r'xxx@qq.com' password = r'xxxx' url = r'https://www.baidu.com' login_baidu(url,username,password) 
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

二,新标签页弹窗 
新标签页弹窗,则需要进行窗口的切换。此处第一个窗口打开百度首页,在打开一个新窗口打开京东首页,在两个窗口之间进行切换。切换到不同的窗口之后,就可以用常规的方法进行元素的定位。

from selenium import webdriver import time def open_window1(): driver.get("https://www.baidu.com")
   time.sleep(2) def open_window2(): # 用JS的方法打开新窗口,模拟新标签页弹窗 js = "window.open('https://www.jd.com')" driver.execute_script(js)
    time.sleep(2) def Switch_Window(): handles = driver.window_handles
    print("打印当前已打开的窗口:"+str(handles)) while(5): # 在两个窗口之间做五次切换动作 driver.switch_to.window(handles[0])
        time.sleep(5)
        driver.switch_to.window(handles[1])
        time.sleep(5) if __name__ == "__main__" :
    driver = webdriver.Firefox()
    open_window1()
    open_window2()
    Switch_Window() 
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
handles = driver.window_handles # 获取当前打开的所有窗口的句柄
driver.switch_to.window(handles[N]) # 切换到其中一个窗口
其中,获取的句柄下标从0开始,即第一个窗口为[0]、第二个窗口为[1],如此类推。使用switch_to.window方法切换到新标签页后就可以做其他操作了。 
    
  • 1
  • 2
  • 3

三、alert弹窗 
该类型的弹窗暂没有合适的项目进行练习,待后续完善

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

终极指南!超全面的UI动效基本规则总结

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更加清晰。动效对于产品和用户而言,都是一个不可多得的重要组成部分。但是当我浏览相关的文章的时候,发现绝大多数的动效有关的文章,都仅仅只是针对特定的动效设计案例来进行分析和描述,少有文章真正系统地阐述动效应该遵循怎样的规则,符合什么样的特征。这篇文章当中,我不会讲述什么新颖的技巧或者前沿的趋势,但是我会将动效设计的主要原则和标准都汇集到一起,总结出来。

有了这篇文章,你就不用在其他地方学习基本的动效设计规则了。

动效的持续时长和速度

当元素的位置和状态发生改变的时候,动效的速度应该足够慢,维持足够长的时间,让用户能够注意到变化,但是同时,又不能慢到需要用户去等待。

大量的研究表明,动效的最佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言,几乎都是瞬间,很难被识别出来。而超过1秒的动效会让人有迟滞感。

△ 界面中动效持续时长

在手机这样的移动端设备上,按照 Material Design 的建议,动效时长应该控制在200~300毫秒之间,在平板电脑上,这个时长应该延长大概30%,也就是说,时长应该在400~450毫秒之间。原因很简单,屏幕尺寸越大,元素在发生位移的时候,跨越的距离越长,速度一定的情况下,时长自然越长。相应的,在可穿戴设备的小屏幕上,这个时长应该缩短30%,在150~200毫秒之间。

△ 移动端设备的屏幕尺寸影响动画的持续时长

网页动效的处理方式也不一样。由于我们习惯在浏览器中直接打开网页,考虑到浏览器性能和大家的使用习惯,用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度,网页中的速度会快上一倍,换句话说,就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长,用户会忍不住觉得网页卡住了。

不过,如果你的网页中所用的动效并非功能性的,而是装饰用的,或者用来吸引用户的注意力,那么请忘记这个规则,在这种情况下,动效可以更长。

更大的屏幕=更慢的动效?绝不是如此!

请务必记住,无论是在什么平台上,动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离,还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化,相应的动效应该更快一点。因此,大而复杂的元素动效持续时间更长,看起来也更舒服一点。

大小相同的元素,在移动的时候,移动距离最短的元素,是停止下来的。

与较大的元素相比,较小的元素运动速度应该更慢,因为相同的移动距离,对于小元素而言,位移距离和自身大小比例倍数更大,相对偏移更远。

△ 动效的持续时长还和元素大小、运动距离有关

动效的运动规律要符合物理规律,当元素运动到边界,发生碰撞的时候,碰撞的「能量」最终是要均匀分摊下来的,而弹跳的在多数情况下是不适合的,仅在特殊情况下适合使用。

△ 避免使用弹跳,它会分散用户的注意力

元素的运动过程应该是清晰的,尽量不要在运动中使用模糊的效果(是的,说的就是 AE 的模糊动效爱好者们),模糊的动效不适合在 UI界面中使用。

△ 不要在动效中使用模糊效果

列表项(新闻列表、邮件列表等)所使用的动效,在实际运动的过程中,项和项之间应该有轻微的延迟,元素之间的延迟应该控制在20~25毫秒之间,如果持续时间再长,可能会给人一种迟滞的观感。

△ 列表项之间的延迟应该在20~25毫秒

缓动

缓动指的是物体在物理规则下,渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然,这是运动的基本原则之一。对于缓动,迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。

为了不让动效看起来机械或者人工痕迹太明显,元素的运动应该有渐进加速和渐进减速的特征,就像物理世界当中其他的物体这样。

匀速直线运动

不受任何物理力量的影响,匀速直线运动看起来是非常不自然的,尤其是对于人眼而言。

所有用来设计动画的应用都会使用坐标轴和曲线来阐述动效的运动特征,我将尝试阐述它们的含义,以及如何使用。坐标轴的 X轴是实现,而 Y轴则表示的唯一,换句话来说,如同我们在初中物理中所学到的,坐标轴上的线条描述的是速度和加速度的特征。下面所示的直线,表示速度是均匀的,也就是匀速直线运动,物体在相同时间内运动的距离是不变的。

△ 匀速直线运动的座标图

均匀的变化通常只会用在色彩的改变或者透明的改变上,一般来说,我们也可以让背景元素均匀运动,而前景元素保持不变,来呈现它的状态,就像上图一样。

缓动加速曲线

通过曲线我们可以看到,物体开始时候的初速度比较低,运动缓慢,随后速度逐渐增加,这意味着物体在加速运动。

△ 加速曲线

当物体加速飞出屏幕的时候,可以使用这种加速曲线,比如界面中被用户使用滑动手势甩出去的卡片。但是请记住,只有当运动对象需要完全离开界面的时候才会这么使用,如果它还需要再回来的话,则不行。

△ 以加速运动将卡片扔出屏幕

动画曲线有助于正确传达讯息,甚至表达情绪和感觉。在下面的案例当中,我们可以看每个元素的运动位移是完全一样的,所消耗的总时长也是一样的,但是运动的速率变化是不同的,这一点也体现在曲线上,所表现出来的情绪也不同。当然,通过调整曲线,你能够让物体的运动轨迹尽可能接近现实世界。

缓动减速曲线

当元素从屏幕外运动到屏幕内的时候,动效应该遵循这类曲线的运动特征。从全速进入屏幕开始,速度降低,直到完全停止。

△ 减速曲线

减速曲线可以适用于多种不同的 UI控件和元素,包括从屏幕外进入屏幕内的的卡片、条目等。

△ 减速曲线案例

缓动标准曲线

在这种曲线之下,物体从静止开始加速,到达速度最高点之后开始减速直到静止。这种类型的元素在 UI界面中最为常见,每当你不知道要在动效中使用哪种运动方式的时候,可以试试标准曲线。

△ 标准曲线

根据 Material Design 的规范,最好使用不那么对称的增速和减速的过程,让动效看起来更加真实。同时大家会更加在意运动的结果,曲线的末端,也就是运动结束的过程最好进行适当的强调,换句话说就是减速过程持续的时长最好超过开始加速的时长,用户将会更加清楚地观察到运动的最终结果,从而更好地明白运动的终止状态。

△ 对称和非对称运动的差异

当元素从屏幕的一个位置移动到另外一个位置的时候,最好使用这种标准的缓动曲线,这个过程中,尽量不要让动画效果引人注意,不要使用戏剧化的效果。

△ 卡片元素从屏幕上运动的时候,不对称的缓动曲线

当元素从屏幕上消失的时候,采用了相同的不对称缓动曲线,用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。

△ 抽屉式导航随着缓动曲线从屏幕上隐藏

从这些案例当中,可以看出许多动效的初学者对于运动规则的了解还不足。比如下面的这个动效,元素随着减速曲线出现,然后使用标准缓动曲线消失。根据 Material Design 的标准,新出现的元素持续的时间应该更长,因为需要吸引更多的注意力。

△ 导航菜单的出现和消失

贝赛尔曲线函数 cubic-bezier()是用来描述曲线的,它的名字前面之所以带有 Cubic 是因为每个贝赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点(0,0)和终点(1,1)在坐标轴上的位置是已经事先确定的。

为了简化你对于贝赛尔曲线的理解,我们推荐两个网站,分别是 easings.net 和 cubic-bezier.com ,前者包含了最常见的曲线的列表,你可以将他们复制到你的原型工具中,第二个网站为你提供了不同曲线的参数,你可以直接在其中查看各种对象的移动方式。

△ 不同类型的 cubic-bezier()的曲线和参数

界面动效的编排

就像芭蕾舞的舞蹈编排一样,动画效果也是需要编排的,它的主要目的是让元素从一个状态切换到下一个状态,自然过渡,让用户的注意力自然地被引导过去。

编排有两种不同的方式,一种是均等交互,另一种是从属交互。

均等交互

均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。

在这个实例当中,所有的卡片都遵循着一个方向来引导用户的注意力,自上到下地次第加载。相反,没有按照这样清晰的规则来加载,用户的注意力会被分散,元素的外观排布也会显得比较糟糕。

△ 用户的注意力应该沿着一个流向来引导

至于表格式的布局,它相对就复杂一点。在这里,用户的视线流向应该是清晰的对角线方向,因此,逐个区块次第出现是一个糟糕的设计。这样的逐个显示,一方面耗时太长,另一方面会让用户觉得元素的加载方式是锯齿状的,这种方式并不合理。

△ 沿着对角线加载

从属交互

从属交互指的是使用一个中心对象作为主体,来吸引用户的注意力,而其他的元素从属于它来逐步呈现。这样的动画设计能够创造更强的秩序感,让主要的内容更容易引起用户的注意。

在其他的设计当中,用户很难搞清楚哪个才是主要的,因为注意力被分散了。因此,如果要设置多个动画元素,应该定义清楚谁为主,谁是中心,并且尽量按照从属关系来次第呈现不同的子元素。

如果只有一个中心对象,那么其他的对象的运动方式都要受它制约,否则用户分不清楚主次。

根据 Material Design 的规定,当元素不成比例地变幻尺寸的时候,它应该沿着弧线运动,而不是直线运动,这样有助于让它看起来更加自然。所谓「不成比例」地变化指的是元素的长和宽的变化并不是按照相同比例来缩放或者变化的,换句话来说,变化的速度也不一样。(比如,方形变成矩形)

△ 不成比例地改变对象外观的时候,运动轨迹应该是弧线的

相反,如果元素是按照比例改变大小的时候,应该沿着直线移动,这样不仅操作更加方便,而且更符合均匀变化的特征。看一下真实的案例,你会发现直线的运动轨迹会更加合理。

△ 成比例变化大小的时候,应该沿着直线运动

当元素不成比例放大的时候,运动轨迹是弧线,而这种弧线运动轨迹有两种不同的呈现一种,一种轨迹是初始方向为垂直方向而运动结束时瞬间运动方向是水平的(Horizontal out),另外一种初始方向是水平方向而运动结束时瞬间运动方向是垂直的(Vertical out)。

那么怎么选取这个方向呢?很简单,元素运动曲线的方向,应该是要向界面的主要运动方向的主轴靠拢重合。举个例子,在下面的动效当中,整个界面的滚动方向是上下滚动,主轴是纵向的,因此,当卡片点击之后被展开的时候,会先向右水平移动,并最终以垂直运动结束,运动的最终方向,切线是垂直的,也就和垂直方向的主轴重合了。

△ 元素按照弧线展开的时候,最终方向应该和主轴重合

如果几个不同的元素的运动轨迹相交,那么他们不能彼此穿越。如果每个元素都必须通过某个交点,抵达另外一个位置,那么应该次第减速,依次通过这个点,给彼此留出足够的空间。另外一种选择,是元素不相交,而是像实体一样在靠近的时候,彼此推开。为什么?因为我们通常假定界面中所有的元素都位于同一个平面当中。

在运动过程中,元素不应彼此穿越,而应该互相留出空间。

但是这一点也不是一成不变的。在比较拥挤的界面当中,某个元素可以「越过」其他的元素,它同样没有穿过其他的元素消失,而是单纯的移动。这一点从某种意义上也是延续自我们日常的物理规律,只不过我们会默认界面中的元素在这个情况下拥有了高度这样的属性。

△ 元素可以越过其他的元素运动

结语

我们总结了这么多动效运动的规则和原则,从某种意义上还是延续自我们对于物理世界的认知,摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现实世界的界面让我们对于界面的秩序有更清晰的认知,允许我们更轻松的了解和访问界面的内容。

如果动效按照正确的方式来设计,它应该是不显著,且不会分散用户注意力的。如果不是这样,那么你需要让动效更微妙一点,实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍,或者转移注意力的存在。

当然,即使是遵循这么多规律,动效的设计依然是一门艺术,而非单纯的科学,多做测试多摸索总是有必要的。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

10分钟教你如何选择筛选组件

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

生活需要筛选,App页面也一样。本文通过案例分析,从筛选组件的样式、使用场景等方面来解析筛选组件在手机端场景的设计。


筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时,通过更的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏,本文暂不分析。


组件包括筛选按钮与筛选器,筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。



01


位于 Tab 栏的筛选组件


组件样式

筛选按钮位置:一般位于Tab栏最右侧视觉薄弱区域。


筛选器形式:点击按钮,筛选器以抽屉形式从Tab栏底部向下展开筛选条件,或以浮层形式从屏幕最右侧向左滑出筛选条件。


样式分析

当界面使用Tab栏时,已为内容做了第一层筛选,多数情况下已满足用户对内容的筛选需求。


当筛选类别较多且复杂时,就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低,屏幕右侧为视觉薄弱区域,这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。



案例一

Image title

案例来源于美团App


此页是对美食品类的选择,这里的筛选组件在Tab中是最常见的样式。对于用户而言,选择商家店铺优先考虑地域、美食类别、价格及综合评价,而用餐人数与餐厅服务等只是辅助选择条件。


筛选器使用了抽屉形式,如要选择此样式,建议在筛选条件不多且不超过一屏的场景使用。



案例二

Image title

案例来源于淘宝App


当用户从首页全局搜索后,出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后,由于筛选条件较多,很难一页展示完,用户往往需要上下滑动屏幕查看全部,因此使用右侧浮层展开的形式较适合。



案例三

Image title

案例来源于哔哩哔哩App


全局搜索后,Tab栏默认展开综合tab内容,用户对排序、时长、分区的筛选需求较高,因此直接把筛选类别放在了二级Tab栏,相比通过点击筛选按钮再展开类别的交互方式更简单直白。


点击筛选类别后,筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少(不超过4项),筛选项数量不多的场景。



02


底部按钮型筛选组件


组件样式

筛选按钮位置:以按钮或浮层形式固定在界面底部,便于用户操作。


筛选器形式:点击按钮,筛选器以抽屉形式从按钮底部向上展开筛选条件,或以界面浮层形式从底部向上展开筛选条件。


样式分析

使用底部筛选按钮的界面,内容区类别相对单一,通过筛选组件就能满足筛选需求,并对筛选的需求较大。而底部按钮作为常见的按钮形式,用户点击更方便,因此承载筛选组件较合适。


若使用此样式,点击筛选按钮后,筛选器的出现优先考虑从底部向上出现的抽屉式浮层。



案例一

Image title

案例来源于旅游类App Expedia


输入旅游目的地后进入此列表页,用户目的性明确,就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果,方便用户触达。并且筛选条件较多,无法一页展示完,使用了界面浮层的形式。


这里还有2个细节:


1、由于筛选类别较多,手动清除单个筛选条件太过繁琐,于是筛选器底部增加了清除按钮,操作更简便。但底部按钮一般为“确定”操作,“清除”放在底部样式上没有做误操作提示,可能会增加误操作机率。


2、筛选后,筛选按钮处会显示已选择的筛选类别数量,给用户带来良好的使用反馈。



案例二

Image title

案例来源于dribbble


当前页为地点搜索。需要先进行筛选操作,内容区再出现结果。筛选按钮位于底部浮层,筛选类别代替筛选按钮平铺展现,筛选器使用抽屉式从浮层底部向上展开。


此样式一般适合筛选类别较少,并且每个类别的筛选项不多的场景。优点是减少操作步骤,提高用户操作效率。并且可以学习一些体验细节:在筛选器中选择一个选项后,在其筛选类别处同步修改为该选项;筛选项与筛选类别选中状态一致,增加关联度。



03


浮层按钮型筛选组件


组件样式

筛选按钮位置:以浮层按钮的形式位于界面右下方,占用空间较少。

筛选器形式:点击按钮,筛选器以浮层形式为主,或在筛选按钮下方展开筛选条件。


样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间,比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时,它的位置也便于用户点击。

设计时按钮用色需要区别于内容区,内容形式尽量精简直观。若使用案例3中的扇形筛选器,则要求筛选类别为1-2类,筛选项数量少切文案精简。



案例一

Image title

案例来源于dribbble


筛选按钮位于界面右下方紧贴于右侧屏边,浮于被筛选内容上层,滑动屏幕时消失。点击筛选按钮后,从屏幕右侧展开筛选浮层,原筛选按钮变为确认按钮。


此按钮形式最大限度的让出空间留给内容区,且右下角为用户关注薄弱区,这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过,适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高,相对符合用户认知。体验细节上可学习的点还有按钮功能的改变,使得体验更便捷。



案例二

Image title案例来源于dribbble


筛选按钮位于界面右下方但没有贴屏边,筛选器以底部分层形式从底部向上展开。这里的筛选条件不多,因此使用了底部分层形式。



案例三

Image title

案例来源于dribbble


筛选按钮形式与上一案例相似,不同的是筛选按钮处直接显示筛选条件,可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。


点击按钮后,从按钮下层展开扇形筛选器,滑动选择筛选条件。此种筛选器样式使用场景较局限,多为选择时长或数量,并且单选居多。因此筛选器不需要“确定按钮”,只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。



04


举一反三


接下来我们拿个案例练练手。


下图界面中内容区为概览与各监控数据图表,需要设计一个筛选组件对内容区进行不同时段的筛选。


Image title


在设计之前需要确定几个需求:筛选组件的使用频次、筛选类别的数量、筛选项的数量,单复选关系、筛选条件之间的优先级。


进一步明确需求

筛选类别只有时间段1项,筛选数量不固定,为多项,单选关系。当用户进入此页,根据用户使用需求判断“1小时”基本满足用户查看数据的需求,默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求,可判断用户使用筛选组件的频次不高。


Image title


方案解析

方案一,Tab栏形式

Tab是对整页的筛选,多为不同维度,而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近,但用户对筛选组件的需求并不高,放在此位置占用了概览区空间。


方案二,底部按钮形式

底部按钮位于用户的习惯操作区,放这里使用层级略高,并且会使内容区的整体高度减少。


方案三,浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域,可以使用户浏览时不受按钮影响;但按钮拥有强对比色,在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现,可满足筛选项数量较多的场景。



05


小结


以上内容是我对常见筛选组件的思考,每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息,决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。



本文作者:TXD技术体验团队-喻杰(阿里巴巴视觉设计师)

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


CSS学习-选择器

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

选择器

学习目的 熟练使用 css 选择器


css1 中的选择器


E #myid         id选择器

E .warning      类选择器

E F             包含选择器

E:link          定义超链接未被访问

E:visited       定义超链接已经被访问

E:actice        匹配被激活的元素

E:hover     鼠标经过的元素

E:focus     获取焦点

E::first-line   元素第一行

E::first-letter 元素第一个字符


css2


*               通配选择文档中所有元素

E[foo]          包含foo属性的元素

E[foo="bar"]    包含属性foo值为bar的元素


CSS3 中的选择器可替代 了解即可

E[foo~="bar"]  含有属性foo值包括bar的元素例如 <a foo="bar bar1 bar2">link</a>

E[foo|="en"]    属性值是一个“-”分割的 比如 en-us


E:first-child   父元素的第一个子元素

E:lang(fr)      匹配属性,元素显示内容为语言为 fr

E::before       在元素前面插入内容

E::after        在元素后面插入内容

E>F             子包含

E+E             相邻兄弟选择器 后面的兄弟


css3


E[foo^="bar"]   属性foo的值开头是bar

E[foo$="bar"]  属性foo的值得结尾是bar

E[foo*="bar"]   属性foo的值包含bar <a foo="abc_bar_as">link</a>


结构类选择器


E:root          属性文档所在的根元素

E:nth-child(n)  E元素第n个位置的子元素 n可以是 (1,2,3) 关键字(odd,even) 公式(2n,2n+3) 起始值为1

E:nth-last-child(n) 与上面的使用方法一样 倒数的第N个位置的子元素

E:nth-of-type(n)    匹配父元素中与E相同的元素中的第n个元素

E:nth-last-of-type(n)   匹配父元素中与E相同的倒数第n个元素

E:last-child    选择位于其父元素的最后一个位置,且匹配E的子元素

E:first-of-type 选择在其父元素中匹配E的第一个同类型的子元素

E:last-of-type  选择在其父元素中匹配E的最后一个同类型的子元素

E:only-child    选择其父元素只包含一个子元素,且该子元素匹配E

E:only-of-type  选择其父元素只包含一个同类型的子元素,且该子元素匹配E

E:empty         选择匹配E的元素,且该元素不包含子节点,文本也是节点


E~F 通用兄弟选择器

E:not(s)    否定伪类选择器


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



在iPhone的UI设计背后,是一场关于注意力的战争 2018/09/06in 设计文章 & 教程评论区

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

iPhone 诞生之后,世界发生的变化是翻天覆地的。以电容触摸屏为交互中心的智能手机以难以想象的速度,成为了人类生活中不可分割的部分,人与人之间的连接因此而更加紧密,同时也更加疏远。从某种意义上来说,iPhone 的创造是开创性的,也是不可替代的。而我们也不约而同地发现,以iPhone 为标竿而创造的智能手机和数字化的交互界面,让我们处于一个时刻都会被分心的境地。

令人上瘾的数字内容,让我们一刻都离不开智能手机,从某种意义上,它彻底改变了我们的生活,工作,甚至思考的方式。现如今,越来越多的人开始尝试戒除令人上瘾的智能手机,寻找更加健康自由的人机关系。根据今天的调研,过度使用智能手机,确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初,直到10年后的现在,在数字产品上瘾和用户注意力的控制这件事情上,开发团队本身就没有放松过。这次,Fast Company 专访了前苹果设计师 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了苹果公司,并且很快就出任了公司的人机交互界面组的设计总监,在2006年前后,他也是作为 iPhone 项目核心的6人团的一员,加入到项目当中来。

待在苹果的20多年时间里,他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计,直到他开始追求创造属于自己的公司和事业,才正式从苹果离职。也正是因为这样的契机,才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去,以及他留给苹果的那些遗产。

和许多设计师一样,他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息,他现在依然还不能透露,但是他依然提到了很重要的事情:即使是在iPhone的原型设计阶段,他就已经意识到了,这款产品最大的缺陷之一,就是它注定会分散甚至垄断用户的注意力。而与此同时,苹果也有意识的没有给予用户,对于iPhone 完全的控制权。下面,是访谈中能够对外公布的几个重要的内容摘录:

设计「请勿打扰」的功能

「我认为,从某种意义上来说,真正洞悉设计的设计师,大都能够预见到手机对于注意力的影响。在使用手机的时候,我们总会碰到被各种各样的信息和通知打扰到。」

「早些时候,当我刚刚开始制作 iPhone 的原型之时,管束还不是那么多,我们当中有几个人还有幸把原型机带回家,这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系,iPhone 几乎隔一会儿就会亮一下,显示有新消息,叮叮咚咚响个不停,于是我意识到,和我们朝夕相处的手机需要一个管控功能。所以,在很早的阶段,我就开始设计请勿打扰这个功能了。」

对于谁来掌控手机设备这个事,苹果的内部产生了分歧

「其实,在苹果公司内部,想要大家都理解分心是一个影响用户生活的问题,还挺难的。乔布斯倒是很能理解的,但是公司内其他的同事,对于用户对于手机的控制权多少,其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权,不过这个事情对产品的营销和市场运作是有影响的。所以,当时内部也有声音说,如果真的给用户太多的控制权,那么这款手机就不酷了。」

「其实直到今天,iPhone 当中绝大多数的功能都是可控的,但是其中很多功能隐藏的比较深,彻底的掌控它们是比较困难的,如果你真得想让那些整天都在轰炸你的信息彻底远离,你需要花费很长的时间来摸索,用独特的方式逐个调整或者关闭才行。因此,对于那些熟练使用iPhone 的重度用户而言,确实是可以如臂使指地掌控这台设备,但是对于更换壁纸都不太会的用户,想要搞清楚iPhone ,让它如意随心,真的是难如登天。他们没有这样的控制能力。」

关于 iPhone 是否有可能更智能地预测通知

「你可能会在一个下午安装十几个不同的新应用,然后你不停地会收到提醒和通知,是否要授权使用相机,是否要授权获取你的位置,是否允许它给你发送通知,每个都要做决定。稍后,你可能会发现,Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了,总会有信息大半夜地推送到你的眼前,让你无法安生地休息。实际上,借助请勿打扰的功能,你可以一早上再查看它们。这套系统足够智能,能够判断出哪些应用之前就已经获得了许可,哪些仍然在后台获取数据,哪些通知实际上你并不关心。所以,这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系,手机会询问用户,你真的需要这些通知吗?或者是,你真的需要Facebook 使用你的电话簿的信息吗(因为你已经很久没有登录了)?等等。正确地设计了这套系统之后,提醒用户的方式也非常的多。」

为什么苹果最后还是开始关注分心这个事情?

「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量,它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨,而媒体和用户都发文吐槽,在呼声和压力之下,它们最终在iOS 12 中呈现了出来。这个局面之下,苹果没有选择的余地,必须对于舆论有回应。这对于每个人都是好事,因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品?当然算不上,因为现在的iOS系统是为了应对舆论和负面新闻而设计的,设计的意图并不对。如果是苹果主动作出这样的决策,才算得上是好产品。」

「对于苹果这种体量的大公司而言,产品设计其实复杂性非常的高。真的是这样。作为设计师,你需要服务于你的用户,你还得和公司的利益保持一致,同时,还需要对得起自己的底线和道德。服务于一个大型的企业,确实非常的难做抉择。对于用户而言,可以很轻松的直接怼苹果,说它没有做对的事情。但是身为其中的设计师,要平衡各方面的需求也压力,经常会进退维谷。有些用户因为iPhone 的一些功能,受到了负面的影响,有些人受到的影响比另一部分人更多。但是身为设计师,一个受到各方面制衡的设计师,即使是作出了改变,在很多时候也远远不够。至少在我看来,现在的改变还不够大。」

管理数字化的生活,就像管理健康一样重要

「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起,我就用着黑色的壁纸。我不会将一大堆的东西塞进手机,减少被分心的可能性。我的手机第一屏上的应用程序非常少。」

「我的意思并不是说这样做很重要,或者说我推荐这么做,对于人和手机之间的关系,每个人都不一样,处理方式也都很个人。对于如何处理自己和手机之间的关系,有人让我提一些建议,我觉得没有必要,因为我的办法并不适合所有人。一天喝多少咖啡,抽几包烟,每个人的情况都不一样,没法一概而论。不过,心理健康是一件大事,你和你的智能设备之间,应该保持着平等的关系。这至少是一个大的设计趋势,是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样,你无法忽视认知压力的存在,认知设计也势在必行。」

界面设计的未来,以及不可避免的问题

「我观察到,界面设计在很自然地进化和发展着,从按钮到旋钮,从点击到手势操作,从语音交互到情感化设计,均是如此。无论是考虑到用户的情感诉求,还是进入语音交互的领域,都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题,点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互,都一定都会遭遇不自然的状况和问题,就这么简单。身为设计师,需要足够的预见性,才能真正领先于用户,预测到可能会遭遇的问题。」

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

前言

  • 最近在研究bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等。
  • 本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化。
  • 由于官网给的demo的数据都是html文件里写好的,select类型的不能动态添加(所以网上的大多都是官网的类似例子,本篇博客就是在这种情况下以自己的经验分享给大家,有问题可以留言哦),一旦动态添加就会出现显示数据为Empty,我表格原本是有数据的,但是一用这个插件就把数据变成Empty了,这可不是我想要的,所以笔者就自行解决了这个问题。

对比网上的例子

  • 比如以下这种数据不是Empty的例子,但是是由于在html中写死了数据(awesome),不适合动态添加。
<a href="#" id="username" data-type="text" data-pk="1">awesome</a> <script> $(function(){ $('#username').editable({
        url: '/post',
        title: 'Enter username' });
}); </script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 另外一种就是使用bootstrap table动态添加的,但是select类型就会出现数据为Empty的情况。
$('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true, //是否显示行间隔色 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 15, 20, 25], //可供选择的每页的行数(*) uniqueId: "id", //每一行的唯一标识,一般为主键列 showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                success: function (data, status) { if (status == "success") {
                        alert("编辑成功");
                    }
                },
                error: function () { alert("Error");
                },
                complete: function () { }
            });
        },
        data: [{
            id: 1,
            name: '张三',
            sex: '男',
            time: '2017-08-09' }, {
            id: 2,
            name: '王五',
            sex: '女',
            time: '2017-08-09' }, {
            id: 3,
            name: '李四',
            sex: '男',
            time: '2017-08-09' }, {
            id: 4,
            name: '杨朝来',
            sex: '男',
            time: '2017-08-09' }, {
            id: 5,
            name: '蒋平',
            sex: '男',
            time: '2017-08-09' }, {
            id: 6,
            name: '唐灿华',
            sex: '男',
            time: '2017-08-09' }],
        columns: [{
            field: 'id',
            title: '序号' }, {
            field: 'name',
            title: '姓名',
            editable: {
                type: 'text',  
                validate: function (value) { if ($.trim(value) == '') { return '姓名不能为空!';  
                    }  
                }
            } 
        }, {
            field: 'sex',
            title: '性别',
            editable: {
                type: 'select',
                pk: 1,
                source: [
                    {value: 1, text: '男'},
                    {value: 2, text: '女'},
                ]
            }
        },  {
            field: 'time',
            title: '时间',
            editable: {
                type: 'date',
                format: 'yyyy-mm-dd',    
                viewformat: 'yyyy-mm-dd',    
                datepicker: {
                    weekStart: 1 }
            } 
        }]
    });
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101

结果图如下:

这里写图片描述

由于开源,很快就找到原因,由于formatter我们没有写这个function导致调用的默认的formatter,默认的没有把表格的值传入html中,bootstrap-table-editable.js源码如下,初始定义_dont_edit_formatter为false,我们没有实现noeditFormatter的function就会执行第二个if语句,其中的标签中没有对内容赋值,导致最后显示结果为它默认的Empty:

column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;

                $.each(column, processDataOptions);

                $.each(editableOptions, function(key, value) {
                    editableDataMarkup.push(' ' + key + '="' + value + '"');
                }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) {
                    _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
                } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                        editableDataMarkup.join(''), '>' + '</a>' ].join('');
                } else { return _dont_edit_formatter;
                }

            };
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

由于要实现多样式,则把上面的代码改变,并在使用的时候实现noeditFormatter:function(value){…}就是了。将上面的代码改为如下(此为我自己改的,你可以根据自己的需要做修改):

column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;

                $.each(column, processDataOptions);

                $.each(editableOptions, function(key, value) {
                    editableDataMarkup.push(' ' + key + '="' + value + '"');
                }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) { var process = column.editable.noeditFormatter(value, row, index); if(!process.hasOwnProperty('class')){
                        process.class = '';
                    } if(!process.hasOwnProperty('style')){
                        process.style = '';
                    }
                    _dont_edit_formatter = ['<a href="javascript:void(0)"', ' data-name="'+process.filed+'"', ' data-pk="1"', ' data-value="' + process.value + '"', ' class="'+process.class+'" style="'+process.style+'"', '>' + process.value + '</a>' ].join('');
                } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                        editableDataMarkup.join(''), '>' + value + '</a>' ].join('');
                } else { return _dont_edit_formatter;
                }

            };
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

结果如下:

这里写图片描述

这里写图片描述

然后是bootstrap table的使用js文件,在其中实现noeditFormatter函数。返回的result必须包含filed和value,class和style可以不需要,class可以额外用其它插件之类,比如badge,style是增加样式(背景,颜色,字体等)。

$('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true, //是否显示行间隔色 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 15, 20, 25], //可供选择的每页的行数(*) uniqueId: "id", //每一行的唯一标识,一般为主键列 showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                success: function (data, status) { if (status == "success") {
                        alert("编辑成功");
                    }
                },
                error: function () { alert("Error");
                },
                complete: function () { }
            });
        }, //      onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发 //          if(reason === 'save') { //              var $td = $el.closest('tr').children(); //          //    $td.eq(-1).html((row.price*row.number).toFixed(2)); //          //    $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动 //          } else if(reason === 'nochange') { //              $el.closest('tr').next().find('.editable').editable('show'); //          } //      }, data: [{
            id: 1,
            name: '张三',
            sex: '男',
            time: '2017-08-09' }, {
            id: 2,
            name: '王五',
            sex: '女',
            time: '2017-08-09' }, {
            id: 3,
            name: '李四',
            sex: '男',
            time: '2017-08-09' }, {
            id: 4,
            name: '杨朝来',
            sex: '男',
            time: '2017-08-09' }, {
            id: 5,
            name: '蒋平',
            sex: '男',
            time: '2017-08-09' }, {
            id: 6,
            name: '唐灿华',
            sex: '男',
            time: '2017-08-09' }, {
            id: 7,
            name: '马达',
            sex: '男',
            time: '2017-08-09' }, {
            id: 8,
            name: '赵小雪',
            sex: '女',
            time: '2017-08-09' }, {
            id: 9,
            name: '薛文泉',
            sex: '男',
            time: '2017-08-09' }, {
            id: 10,
            name: '丁建',
            sex: '男',
            time: '2017-08-09' }, {
            id: 11,
            name: '王丽',
            sex: '女',
            time: '2017-08-09' }],
        columns: [{
            field: 'id',
            title: '序号' }, {
            field: 'name',
            title: '姓名',
            editable: {
                type: 'text',  
                validate: function (value) { if ($.trim(value) == '') { return '姓名不能为空!';  
                    }  
                }
            } 
        }, {
            field: 'sex',
            title: '性别',
            editable: {
                type: 'select',
                pk: 1,
                source: [
                    {value: 1, text: '男'},
                    {value: 2, text: '女'},
                ],
                noeditFormatter: function (value,row,index) { var result={filed:"sex",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                }
            }
        },  {
            field: 'time',
            title: '时间',
            editable: {
                type: 'date',
                format: 'yyyy-mm-dd',    
                viewformat: 'yyyy-mm-dd',    
                datepicker: {
                    weekStart: 1 },
                noeditFormatter: function (value,row,index) { var result={filed:"time",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                }
            } 
        }]
    });
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143

关于bootstrap table的导出及使用可以看我另外一篇博客

下载和引用

下载x-editable,并如下引用。

<link href="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"> <script src="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/js/bootstrap-editable.js"></script> <script src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/editable/bootstrap-table-editable.js"></script>
    
  • 1
  • 2
  • 3

然后讲上诉的一些文件修改添加,就完成了。

另外项目的结果展示

这里写图片描述

这里写图片描述

其中的样式都是自行在x-editable的基础上添加的。如配置出问题,以下是源码链接。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


看看苹果App Store 10年来那些应用设计演变引领的潮流

博博

看看苹果App Store 10年来那些应用设计演变引领的潮流

UI巴巴 2018-07-17 21:53:05

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


很少有创新的事物能像手机应用一样在改变我们的生活方式,让我们与周围的世界互动。最开始的那500个开发者很幸运的有机会为未来数百万个应用程序提供设计方向和交互方式,为了庆祝App Store成立10周年,让我们来研究一下10个原创的App Store应用程序的界面设计演变。

一、应用程序

关于应用程序这部分,我们关注的10款应用到今天为止都还能下载的,有些近几天都还在更新。虽然很多应用提供了iPad版,但是这次我们主要研究iphone版的界面设计的变化。

1,iTunes Remote

Apple通过在App Store上发布一些自己的软件,为其他开发人员树立了榜样。Apple最初创建的应用有两个:Texas Hold'em(德州扑克游戏)和Remote,Texas Hold'em在2011年下架了。而Remote今天还在,Remote是一个简单实用的应用,通过Wi-Fi控制Mac或Apple TV的iTunes库的播放。

看看苹果App Store 10年来那些应用设计演变引领的潮流

从一开始,Remote的设计就受到iPhone iPod应用程序(今天称为音乐)的界面和感觉的影响很大。事实上,正在播放的视图在界面上基本相同。2.0版带来了由Louie Mantia设计的新图标。这两个应用程序从iOS 6开始,变得不一样,图标再次更新以匹配Mac上iTunes 11的设计风格。

看看苹果App Store 10年来那些应用设计演变引领的潮流

Remote 的一次全新设计发生在iOS 7,与音乐应用程序的鲜明白色主题不同,Remote采用了深色的模糊背景。并与专辑封面的颜色融合。2016年,Apple发布了针对第4代Apple TV 的Apple TV Remote应用程序,这是改变似乎要取代Remote。但不久之后,Remote被重命名为iTunes Remote,该应用程序一直保持原来的界面继续可供下载,直到今年6月,Remote才更新了全新设计并支持iPhone X。

2,Facebook

看看苹果App Store 10年来那些应用设计演变引领的潮流

与iTunes Remote的更新相比,Facebook在过去时间不断改进设计,而且修改的频率越来越高,算上小修小补,Facebook都可以出书了。我们选了其中比较重大的8个变化。

Facebook在2017年10月就开始在iPhone上使用了,那时候是作为网页版应用。如果不显示顶部的蓝色导航,App Store中Facebook 1.0版几乎无法识别。而且图标是用人物头像,而不是标志性的“f”。底部导航为:主页,个人资料,朋友,聊天和收件箱。2.0版基于相同的设计概念,在主标题栏下添加了二级导航。

看看苹果App Store 10年来那些应用设计演变引领的潮流

Facebook 3.0于2009年7月首次亮相,并推出了3×3网格图标,以帮助解决应用程序的气球导航问题。早期的屏幕截图显示了一个完全蓝色的平铺网格,但这个设计从未在应用程序的公共版本中发布。

2011年10月,Facebook 4.0 采用了汉堡包导航。在第4版之后,Facebook的设计更新变得更频繁了。应用程序的界面开始更快地迭代,并且设计的修改通常是逐步推出而不是推倒重来。

2013年4月,Facebook在iOS应用程序中使用“Chat Heads ”,允许用户一边爪机一边聊天。

Facebook的设计挑战主要来自其亿级别的用户基数。与许多小型应用程序不同,Facebook必须在各平台上为大量的用户提供一致的体验,而不仅仅是苹果的设备上。2017年8月的更新尝试统一 iOS,Android和网络上的新闻Feed 设计,其评论样式看起来更像是Messenger对话设计。

3,Things

看看苹果App Store 10年来那些应用设计演变引领的潮流

Things原来上Mac上的任务管理工具,所以有机会率先在iOS上出现。开发人员Cultured Code称,iOS的应用只用了1个月就开发完成,完成了一项不可能的任务。

Things 1.0 不能与Mac同步,而且不能标记。下图是早期的设计草图。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2012年发布的2.0版本是比较大的一次更新。背景变得更干净了。图标也更小巧精致有个性。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2014年的2.5版本,设计变得扁平化,颜色更浅。2017年5月发布的应用是界面上最大的一个变化。布局差不多,但是图标和ui元素都重新设计。设计师Cultured Code特别强调了如何使用动画为应用程序提供全新的感觉。重新设计的应用获得了2017年Apple设计奖。

4,OmniFocus

看看苹果App Store 10年来那些应用设计演变引领的潮流

App Store从一开始就提供了很多任务管理类的应用,来自Omni公司的Things和OmniFocus是两个重量级应用。虽然两个功能类似,但是两个应用的界面设计发展轨迹却各有千秋。

OmniFocus for iPhone最初使用简单的桌面视图和自定义底部导航,赢得了2008年Apple设计奖。Omni Group在2010年6月为iPhone 4 重新设计了高清图标。而2011年6月开始,界面发生了重大变化,头部多了一个日期选择。2013年针对iOS 7的推出,设计的界面变得扁平化。新的设计依赖颜色来提升空间感。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2015年春季的app 图标更新使用了黑色的“☑️”。从2012年开始,每个图标都包含了彩蛋。图标放大,您会注意到碳纤维纹理实际上是由微小的重复Omni徽标组成。

5,Evernote

看看苹果App Store 10年来那些应用设计演变引领的潮流

Evernote的发展代表了很多软件自2008年以来的设计趋势。Evernote原来是在电脑端出现的,App Store推出之后,Evernote更为识别性高的大象图标。

像许多早期的iPhone应用程序一样,Evernote 1.0严重依赖于UIKit,大量使用高光效果。2011年重新设计了标签栏,按时间顺序排列笔记。Evernote在2012年推出了针对iPhone 5的新界面,但是仍然使用默认的iOS UI元素。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2012年11月,Evernote 5推出了全新的界面设计。采用了卡片式的展示方式。浮雕效果,阴影效果的运用看上去更有深度。

2013年开始,Evernote 全面拥抱扁平化设计。每个纹理,阴影和斜角都消失了。一个明亮的从左到右的渐变条纹的导航栏设计,与新的无纹理图标上使用的颜色相匹配。2017年开始,设计又进一步极简化。白色的头部导航,黑色的底部标签栏。

6,eBay

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

eBay的设计可以说是这篇文章中10个应用程序中最引人注目的转变。在WWDC 2008上,eBay特别的登台展示。但与今天的app相比,最初的版本是相当的简陋。2009年11月,整个界面的背景换成了灰色。

一年后的2.0版本才是真正的设计,也为未来几年的设计奠定了基础。

2013年的设计像是重新披了一件外衣,而用户体验跟以前保持一致。

每个版本的变化都反映了整个时代快速变化的设计趋势,设计品味。

2015年9月,eBay 4.0 打破了常规。大多数应用程序的功能都放在汉堡包菜单下面,只留下顶部的三个标签:“活动,商店,销售。”然后这个设计很快没有继续了,2016年,ebay又重新恢复了原来的布局方式。如今的布局与2010年相比,又更加类似了。

7,Twitterrific

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

在App Store宣布之前,Craig Hockenberry和The Iconfactory为iPhone 设计了第一个 Twitter客户端。应用是放在越狱市场的。

App Store上的Twitterrific 1.0从越狱版上借鉴了一些设计元素。它获得了2008年的Apple设计奖。Twitterrific也是最早使用如今越来越流行的深色主题的应用程序之一 。但Twitterrific的设计故事更多地讲述了Twitter作为服务的历史,而不是设计趋势。每次更新都反映了Twitter平台的特性和功能的变化。在早期,这些功能通常由第三方自己开创的。

2012年,Twitterrific 5.0将所有导航移动到顶部,并使用完全自定义的UI元素。类似的布局一直持续到今天。就像应用程序的设计一样迷人,Twitterrific的图标使用了现代化的鸟类图像,而且从一开始到现在,基本上没有什么变化。

8,Instapaper

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

一个专门为阅读而设计的应用应该优先考虑内容而不是浏览器,因此Instapaper的设计从一开始就是非常自然简单的。但是,由于iOS本身的变化,应用也在外观上又一些变化。导航栏和按钮样式在iOS 6和7中都进行了更改。

9,PCalc

看看苹果App Store 10年来那些应用设计演变引领的潮流

PCalc的故事从App Store推出的前10年就开始了,开发人员James Thomson 于1992年为Mac 发布了应用程序,并一直延续至今。PCalc从一开始在iOS运行就是完全自定义的界面,并且有很多自定义的选项。

用于iPhone的PCalc 的第一个版本是从Mac仪表盘小部件移植而来。有光泽的按钮和深蓝色LCD面板与应用程序的图标相匹配。在2008年12月,一个名为Twilight的热门主题添加了更加详细的图形和类似于默认iOS计算器的配色方案。Twilight后来更新了视网膜并支持更大的显示屏。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2013年,PCalc采用了名为“Samurai”的新默认主题和图标,适配iOS 7的扁平设计。PCalc的图标在2016年3月再次更新。自iOS 10.3发布以来,Apple已允许第三方应用程序动态更改其应用程序图标,而无需向商店提交新版本。PCalc于2017年5月开始充分利用该功能,推出了各种各样的备用图标供您选择。

10,Yelp

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

与Facebook一样,Yelp的iPhone界面多年来发生了重大变化,但由于使用了一致的导航栏颜色,因此品牌识别度非常高。由于与Apple Maps的深度集成,该应用程序越来越受欢迎。

2009年8月,Yelp将一个基本的增强现实界面隐藏在iPhone应用程序中,用于定位您周围的企业。虽然它当时只是一个新奇事物,但鉴于ARKit应用程序的兴起,这一功能在今天仍然具有先见之明。

2010年1月,Yelp主屏幕推出了 3×3网格快捷菜单。界面在风格上不断完善,直到整个应用程序在2013年10月重新设计,界面更加扁平,更加突出“附近”标签。

Yelp的更新通过显示与您相关的附近的内容,展示更多基于地理位置的内容。

二、图标

看看苹果App Store 10年来那些应用设计演变引领的潮流

比较所有上面列举的10个应用的图标迭代。在过去十年中,一些图标保持相当一致,只进行了细微的改进,其他图标每隔几年就重新设计一次。

在App Store推出时,高光的图标设计占统治地位。随着设计师和开发人员逐渐建立了图标设计规范和多年来的实践经验,细节和更多色彩的运用已经悄悄出现在许多图标中。

三、个性

看看苹果App Store 10年来那些应用设计演变引领的潮流

早期的iPhone应用进入的是一个未知的世界,除了苹果公司自己的小型股票应用外,应用的界面和交互方式没有先入为主的观念,设计师和开发人员可以完全自由地进行实验。

尽管如此,许多早期的应用看起来感觉非常相似,因为用户和开发者都在互相测试。早期的反馈和反复试验很快就会影响每个应用的发展方式。然而几年内,大多数应用都找到了自己的方式,并开发出独特的风格和个性。随着硬件功能的改进,设计差异逐渐从静态图形转变为动画和动态界面。

在iOS 7引入的设计规范将设计人员和开发人员又重新拉回来,许多应用开始通过感官体验选择来区分自己,而不仅仅是界面设计的不一样。所以用户体验的重要性导致近年来用户体验(UX)设计的普及。

四、未来10年

2008年,谁也无法准确预测App Store会发展到如今的繁荣。创新源于创新,iPhone用户的品味和习惯塑造了开发人员不断的创新。

可以说,未来是不可预测的,即将推出的iPhone和iOS版本肯定会以不可预见的方式改变应用的格局。一个新的设计趋势明天将席卷全球。即使在10年后,未来也是令人兴奋的。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

博博

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

UI巴巴 2018-08-09 20:34:25


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

图表是显示大量信息的一种重要表达方式,良好的图表设计能够传达复杂的统计数据,并让用户易于理解。图表设计可以专门分出一个设计类别:信息图设计。

不过,信息图设计更多针对桌面端,很少考虑移动端,所以,移动端的图表设计挑战性更大。在小的屏幕上展示数据或信息,只能做一些取舍。

Android - 统计数据图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Arco的图表和图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

股票应用设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Analytics(分析)

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

移动仪表盘

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

优化 - 统计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

移动UI中的图表和图形

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

金融应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

财经和新闻应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

支付帐单

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

线图页面

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

分析应用页面

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

分析应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

健康应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

自行车比赛

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

威胁仪表盘设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

仪表盘设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

足迹App

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

管理模块

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

紫色的图表和图形

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

运动追踪应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

关于铁的图

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Noblyn App重新设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

投资平台

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

跟踪应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档