首页

jquery 关于table的全选与反选

seo达人

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

控制表格的多选和反选,直接上代码,顺便安利一个小知识点:tr的底边框不显示的问题,解决办法是:table{border-collapse:collapse;}    


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style>
  6. *{margin:0;padding:0;}
  7. table{border-collapse:collapse}
  8. .detail_tb {width: 100%;border: 1px solid #ccc;}
  9. .detail_tb .fied_header {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #ececec;}
  10. .detail_tb .fied_header th {text-align: center;border-right: 1px solid #ccc;color: #333;font-size: 14px;}
  11. .detail_tb .fied_header th input {vertical-align: middle;}
  12. .detail_tb tr {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #fff;}
  13. .detail_tb tr td {text-align: center;border-right: 1px solid #ccc;color: #666;font-size: 14px;}
  14. .detail_tb tr td input {float: left;margin: 12px 5px 0 10px;}
  15. .detail_tb tr td span {float: left;}
  16. .detail_tb tr td select {display: inline-block;width: 90px;height: 24px;}
  17. </style>
  18. </head>
  19. <body>
  20. <table class="detail_tb" >
  21. <thead>
  22. <tr class="fied_header">
  23. <th width="65"><input type="checkbox" value="number" id="number"> 序号</th>
  24. <th width="110">孩子姓名</th>
  25. <th width="130">家长电话</th>
  26. <th width="110">介绍人孩子姓名</th>
  27. <th width="130">介绍人电话</th>
  28. <th width="150">报名时间</th>
  29. <th width="100">分组情况</th>
  30. <th width="100">拉新数量</th>
  31. <th width="100">是否签到</th>
  32. <th width="100">是否发奖</th>
  33. </tr>
  34. </thead>
  35. <tbody id="tbody">
  36. <tr>
  37. <td width="65"><input type="checkbox" value="" id="" ><span>1</span></td>
  38. <td width="110">张三</td>
  39. <td width="130">13888888888</td>
  40. <td width="110">李四</td>
  41. <td width="130">13888888888</td>
  42. <td width="150">2016/08/6 21:00</td>
  43. <td width="100">
  44. <select name="" id="">
  45. <option value="">未分组</option>
  46. <option value="">1</option>
  47. <option value="">2</option>
  48. </select>
  49. </td>
  50. <td width="100">33</td>
  51. <td width="100"></td>
  52. <td width="100">
  53. <select name="" id="">
  54. <option value=""></option>
  55. <option value="">奖品1</option>
  56. <option value="">奖品2</option>
  57. </select>
  58. </td>
  59. </tr>
  60. <tr>
  61. <td width="65"><input type="checkbox" value="" id=""><span>2</span></td>
  62. <td width="110">张四</td>
  63. <td width="130">13888888888</td>
  64. <td width="110">李四</td>
  65. <td width="130">13888888888</td>
  66. <td width="150">2016/08/6 21:00</td>
  67. <td width="100">
  68. <select name="" id="">
  69. <option value="">未分组</option>
  70. <option value="">1</option>
  71. <option value="">2</option>
  72. </select>
  73. </td>
  74. <td width="100">33</td>
  75. <td width="100"></td>
  76. <td width="100">
  77. <select name="" id="">
  78. <option value=""></option>
  79. <option value="">奖品1</option>
  80. <option value="">奖品2</option>
  81. </select>
  82. </td>
  83. </tr>
  84. <tbody>
  85. </table>
  86. <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  87. <script type="text/javascript">
  88. // 全选和反选
  89. $("#number").click(function () {
  90. var isChecked = $("#number").prop("checked");
  91. $("#tbody input").prop("checked", isChecked);
  92. })
  93. // 单独选项控制全选
  94. $("#tbody input").click(function () {
  95. var allLength = $("#tbody input").length;
  96. var checkedLength = $("#tbody input:checked").length;
  97. if(allLength == checkedLength){
  98. $("#number").prop("checked",true);
  99. }else {
  100. $("#number").prop("checked",false);
  101. }
  102. });
  103. </script>
  104. </body>
  105. </html>



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


手机端页面常见的问题

周周

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?



首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是:



(1) 看是否能把body和html的height: 100%去除掉。

(2) 在滚动的容器中增加:-webkit-overflow-scrolling: touch或者给body增加:body {overflow-x: hidden}。



2.ios页面橡皮弹回效果遮挡页面选项卡?



(1) 有时body和html的height: 100%去除掉问题可能就没有了。

(2) 到达临界值的时候在阻止事件默认行为

var startY,endY;
//记录手指触摸的起点坐标
$('body').on('touchstart',function (e) {
     startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
     endY = e.touches[0].pageY;  //记录手指触摸的移动中的坐标
     //手指下滑,页面到达顶端不能继续下滑
     if(endY>startY&& $(window).scrollTop()<=0){
         e.preventDefault();
     }
   //手指上滑,页面到达底部能继续上滑
     if(endY<startY&& $(window).scrollTop()+ 
         $(window).height()>=$('body')[0].scrollHeight){
         e.preventDefault();
     }
})
有时也会碰见弹窗出来后两个层的橡皮筋效果出现问题,我们可以在弹出弹出时给底层页面加上一个类名,类名禁止页面滑动这样下层的橡皮筋效果就会被禁止,就不会影响弹窗层。 3.IOS机型margin属性无效问题? (1) 设置html body的高度为百分比时,margin-bottom在safari里失效 (2) 直接padding代替margin 4.Ios绑定点击事件不执行?  (1)添加样式cursor :pointer。点击后消除背景闪一下的css:-webkit-tap-highlight-color:transparent;  5.Ios键盘换行变为搜索? 首先,input 要放在 form里面。 这时 "换行" 已经变成 “前往”。 如果想变成 “搜索”,input 设置 type="search"。 6.Jq对a标签点击事件不生效? 出现这种情况的原因不明,有的朋友解释:我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件,就得先往A标签中的文字添加能被JS捕获的元素,然后再用JS模拟点击该元素即可。但是我觉得不合理,虽然找不到原因但是解决办法还是有的。 (1)document.getElementById("abc ").click(); (2)$("#abc ")[0].click(); 7.有时因为服务器或者别的原因导致页面上的图片没有找到? 这是我们想需要用一个本地的图片代替没有找的的图片
<script type="text/javascript"> 
function nofind(){ 
var img=event.srcElement; 
img.src="images/logoError.png"; 
img.onerror=null; 控制不要一直跳动 
} 
</script> 
<img src="images/logo.png" />
8.transform属性影响position:fixed?

(1)规范中有规定:如果元素的transform值不为none,则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1不只在手机上,电脑上也一样。除了fixed元素会受影响之外,z-index(层叠上下文)值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素.

9.ios对position: fixed不太友好,有时我们需要加点处理?

在安卓上面,点击页面底部的输入框,软键盘弹出,页面移动上移。
而ios上面,点击页面底部输入框,软键盘弹出,输入框看不到了。。。查资料说什么的都有,iscroll,jquery-moblie,absolute,fixe,static都非常复杂,要改很多。。。
让他弹出时让滚动条在部
var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
    $('textarea').focus(function () {
        window.setTimeout('scrollBottom()', 500);
    });
}
function scrollBottom() {
    window.scrollTo(0, $('body').height());
}
10.jq validate插件验证问题?

(1)所以的input必须有name不然会出错

11.有时手机会出现断网的情况,我没可能会对断网的情况做一些处理?

(1)navigator.onLine可判断是否是脱机状态.

12.判断对象的长度?

(1)用Object.keys,Object.keys方法返回的是一个数组,数组里面装的是对象的属性
var person = {
    "name" : "zhangshan",
    "sex" : "man",
    "age" : "50",
    "height" : "180",
    "phone" : "1xxxxxxxxxx",
    "email" : "xxxxxxxxx@xxx.com"
};
var arr = Object.keys(person);
console.log(arr.length);
(2)Object.getOwnPropertyNames(obj).length

13.上一题我们用到了Object.keys与Object.getOwnPropertyNames他们的区别?

Object.keys定义:返回一个对象可枚举属性的字符串数组;
Object.getOwnPropertyNames定义:返回一个对象可枚举、不可枚举属性的名称;
属性的可枚举性、不可枚举性:定义:可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性,对于通过直接的赋值和属性初始化的属性,该标识值默认为即为 true,对于通过 Object.defineProperty 等定义的属性,该标识值默认为 false。
var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
console.log(Object.keys(obj).length);           //output:1
console.log(Object.getOwnPropertyNames(obj).length);    //output:2
console.log(Object.keys(obj));           //output:Array[1] => [0: "prop1"]
console.log(Object.getOwnPropertyNames(obj));    //output:Array[2] => [0: "prop1", 1: "prop2"]

综合实例


var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});
console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true
console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false
console.log('prop1' in obj);    //output: true
console.log('prop2' in obj);    //output: true
for (var item in obj) {
    console.log(item);
}
//output:prop1
for (var item in Object.getOwnPropertyNames(obj)) {
    console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]

14.移动开发不同手机弹出数字键盘问题?



(1)type="tel"

iOS和Android的键盘表现都差不多

(2)type="number"

优点是Android下实现的一个真正的数字键盘

缺点一:iOS下不是九宫格键盘,输入不方便

缺点二:旧版Android(包括微信所用的X5内核)在输入框后面会有超级鸡肋的小尾巴,好在Android 4.4.4以后给去掉了。

不过对于缺点二,我们可以用webkit私有的伪元素给fix掉:


input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
}

(3)pattern属性



pattern用于验证表单输入的内容,通常HTML5的type属性,比如email、tel、number、data类、url等,已经自带了简单的数据格式验证功能了,加上pattern后,前端部分的验证更加简单了。

显而易见,pattern的属性值要用正则表达式。

实例 简单的数字验证

数字的验证有两个:

<input type="number" pattern="d"> 

<input type="number" pattern="[0-9]*">



15.input[number]类型输入非数字字符



js获取的值是空;比如-12,+123等



16.Javascript:history.go()和history.back()的用法与区别?




简单的说就是:go(-1):返回上一页,原页面表单中的内容会丢失;back():返回上一页,原页表表单中的内容会保留。history.go(-1):后退+刷新history.back():后退

之所以注意到这个区别,是因为不同的浏览器后退行为也是有区别的,而区别就跟javascript:history.go()和history.back()的区别类似。

Chrome和ff浏览器后退页面,会刷新后退的页面,若有数据请求也会提交数据申请。类似于history.go(-1);

而safari(包括桌面版和ipad版)的后退按钮则不会刷新页面,也不会提交数据申请。类似于javascript:history.back();



17.Meta基础知识:



<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

// width    设置viewport宽度,为一个正整数,或字符串‘device-width’

// height   设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置

// initial-scale    默认缩放比例,为一个数字,可以带小数

// minimum-scale    允许用户最小缩放比例,为一个数字,可以带小数

// maximum-scale    允许用户最大缩放比例,为一个数字,可以带小数

// user-scalable    是否允许手动缩放 

空白页基本meta标签

<!-- 设置缩放 -->

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) -->

<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) -->

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->

<meta name="format-detection"content="telephone=no, email=no" />

其他meta标签

<!-- 启用360浏览器的极速模式(webkit) -->

<meta name="renderer" content="webkit">

<!-- 避免IE使用兼容模式 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->

<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->

<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->

<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->

<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->

<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->

<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->

<meta name="browsermode" content="application">

<!-- QQ应用模式 -->

<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->

<meta name="msapplication-tap-highlight" content="no">



18.移动端如何定义字体font-family?



@ --------------------------------------中文字体的英文名称

@ 宋体 SimSun

@ 黑体 SimHei

@ 微信雅黑 Microsoft Yahei

@ 微软正黑体 Microsoft JhengHei

@ 新宋体 NSimSun

@ 新细明体 MingLiU

@ 细明体 MingLiU

@ 标楷体 DFKai-SB

@ 仿宋 FangSong

@ 楷体 KaiTi

@ 仿宋_GB2312 FangSong_GB2312

@ 楷体_GB2312 KaiTi_GB2312 

@

@ 说明:中文字体多数使用宋体、雅黑,英文用Helvetica



body { font-family: Microsoft Yahei,SimSun,Helvetica; }



19.打电话发短信写邮件怎么实现?


// 一、打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
//  二、发短信,winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
// 三、写邮件
<a href="mailto:863139978@qq.com">点击我发邮件</a>
//2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a>
//3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题)
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a>
//4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址
<a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]">点击我发邮件</a>
//5.包含主题,用?subject=
<a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a>
//6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行 
<a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
//7.内容包含链接,含http(s)://等的文本自动转化为链接
<a href="mailto:863139978@qq.com?body=http://www.baidu.com">点击我发邮件</a>
//8.内容包含图片(PC不支持)
<a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>
//9.完整示例
<a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0A[url=http://www.baidu.com]http://www.baidu.com[/url]%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>
20.移动端touch事件(区分webkit和winphone)?

// 以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用

//TouchEvent说明:
touches:屏幕上所有手指的信息
targetTouches:手指在目标区域的手指信息
changedTouches:最近一次触发该事件的手指信息
touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息

//参数信息(changedTouches[0])
clientX、clientY在显示区的坐标
target:当前元素

//事件响应顺序
ontouchstart > ontouchmove > ontouchend > onclick


想用设计化腐朽为神奇,你得先想明白这10个问题

资深UI设计者


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


今天的译文同样来自设计师 Eugen Eşanu,他将经典设计书《Don‘t Make Me Think》中的内容梳理出来供你参考。这些老问题依然能够给我们今天的新局面以启发。

「好设计应该是显而易见的」,这句老话在过去的几个世纪当中影响到了各个不同的领域,从美食到音乐,从建筑到哲学,我们如今的生活几乎是在这句话的影响下被逐渐被塑造出来的。

但是同样的,人类的进化并没有我们想象中那么快速,我们的思维和本能仍然被深刻地影响着我们的决策。换句话来说,人类的行为模式有着很长的保质期,在许多事情上,20年前很难做,在今天依然不那么容易去执行。

重温《Don’t Make Me Think》

Steve Krug 的这本《Don’t Make Me Think》中文译本名字是《点石成金:访客至上的网页设计秘籍》,译名可能没有它的原名那么直接,但是也传递出这本书所要表达的核心概念。

这本书成于2000年第一次互联网泡沫时代之后,Krug 在这次浪潮之后提出了不少实用的设计原则,直到今天仍然有着极高的价值。这本书随后多次再版和修订,其中的设计案例几经迭代升级,我们可以看到现代网页设计的提升和进步,同时也能从中感受到,用户——人类行为本身的模式化。「访客至上」的表述太过客气,「不要让我思考」这一表述更能表现用户行为的特征,而今天我们所面对的绝大多数的优秀产品,无论是手机电脑还是汽车,同样遵循着这一原则。

这本书的成功是建立在无数痛彻心扉的教训之上,这也使得它本身的价值无与伦比。今天的文章本质上也是一篇读书笔记,设计师应该对于用户、人性有足够的认知,方可作出足够优秀的设计。下面的10个总结,既是常见的认知错误,也是成就好设计的契机,就看你怎么把握了。

1. 对于内容,用户从来都是扫视,而非用心阅读

当我们在查看内容和信息的时候,绝大多数情况下我们都会下意识寻找让自己感兴趣的东西。比如,我们很少会完整地浏览网站上所有的文本和内容,为什么?绝大多数的用户打开网站都是在试图完成某项任务,达成某个目标,而网页中的不同部分的内容往往是服务于不同的功能和目标的,我们努力达成目标即可,并没有阅读全部的必要。不过,作为网站的设计者,我们往往还是提供了足够丰富的内容和完善的功能,一方面是因为我们觉得人们需要知道,另一方面也是应对不同用户的需求。正如有的设计师所说的,它们「增加了体验」。

所以,通常而言,我们可以作出下列优化:

  • 大量使用标题:通过标题告诉用户这些内容都是和什么相关的,确保用户能够在扫视的时候快速明白并做选取。
  • 保持段落精简:在长段落中,用户可能稍分神就迷失了,而短段落更容易阅读,也更容易汲取其中的信息。
  • 使用列表展示:几乎所有的信息都可以分割为列表来展示,甚至一个使用多个逗号分割的句子,都可以制作成为列表。当然,值得注意的是,注意列表之间的行间距,确保可读性。
  • 突出关键信息:用户在扫视的时候,主要是在定位关键词。将关键词使用粗体等方式标注出来,便于用户扫视和定位。不要强调太多的内容,这样会失去强调的作用。

2. 创建卓有成效的视觉层次

视觉层次是确保用户快速扫视能够获取到信息的重要助力。视觉层次能够呈现出页面中不同元素之间的优先级和关系,在设计的时候,同样需要遵循下面的几个原则:

  • 重要性越高,越突出。最重要的元素,要么越大,要么越醒目,使用特定的色彩标注出来。
  • 在逻辑上有关联的元素,在视觉上应该相关的,例如使用相同的色彩或者相同的视觉样式。

3. 不要重新发明轮子

我们明白,用户总会期望看到新东西,但是,市面上有太多的工具和应用,如果各行其是,忽略约定俗成的规则,特立独行地采用自己的规则,会让每个应用的学习成本都提高,这对于用户几乎是毫无益处的。

当设计师被要求设计某个东西的时候,内心是充满重新发明的冲动的,这个我们都明白。而设计出和别人相似的东西看起来又有点「政治不正确」,甲方总会希望设计作出点不一样的东西。更何况,这还是一个少有鼓励和赞扬的行业,也很少为「最贴合用户需求」的产品颁设计奖。

但是设计仍然需要在各方之间作出最佳的平衡。

在重新发明轮子之前,你必须了解破坏和创新所意味着的真实的价值(时间,体验,耗费的精力和所需的知识)。

4. 产品说明没必要存在了

我们的工作是要让产品清晰明了,让事情便捷易行。即使做不到明显,也应该尽力向着不言自明的设计靠拢。说明书这种东西是没有人会主动去看的,它们的存在意义本身就不大,你需要通过合理的设计,让产品本身发挥指引性的效果。即使说明书必须存在,也尽量让它简短明了。

如果功能并不明显,我们应该尽量让它明显一点,让目标更明显。

以宜家为例,一个需要买回家组装的柜子,绝大多数的用户可以在简短的指引之下就可以轻松正确地组装,为什么?因为绝大多数情况下,一个柜子长什么样,用户眼前有清晰的画面,哪怕说明只有几张简单的图片,用户也不会犯错。

5. 用户并不在意产品是怎么运作的

绝大多数的用户并没有兴趣了解你的产品的工作方式,并不是因为他们不够聪明,仅仅是因为他们不在乎。所以,一旦他们确定你的产品是能用的,就很少会去注意其他的部分。

以苹果的无线耳机 AirPods 为例,从价格上来说,它并不亲民,但是它的交互方式和使用体验确实非常的独特和优秀,这也不难理解许多用户会选择它。用户在购买它之后,并不会去思考它是如何运作的,其中所包含的诸多新技术,对于用户而言,只是润物细无声地发挥着作用而已。

我的母亲就使用的 AirPods ,她从来不会问我它的原理,但是她很清楚,耳机需要放在充电盒中充电,和手机配对之后就能用了,并不复杂。

6. 来去匆忙的人们,从不主动寻找「微妙的线索」

这一条可能是我最喜欢的。我们设计师总喜欢为用户带来微妙的视觉效果,来给用户带来乐趣。对吧?可是如果我告诉你,用户并不关心它们,你会怎么想呢?他们也根本不会告诉你他们有多在意或者多不在意,也不会在一次又一次看到的时候对于这些设计有多少感觉。

为什么会这样?生活环境赋予每个用户以复杂多变的情境,他们很少有机会去感受微妙的设计所带来的奇妙情绪。风在吼,狗在叫,小孩还在满屋跑,水壶里面水开了,老婆在耳边抱怨着工作中的细微末节,而你正在填写着表单准备预订明天的高铁票,在那个时刻,APP 当中微妙的动效和视觉线索,手一抖,你可能还会多买一个没有必要的捆绑销售的酒店折扣券。

但是另外一方面,对于优秀体验的追求不应该因此而放弃,还有很多用户会从中受益,这也是促成优秀产品的必须因素。只不过确实有很多用户没法去在意它们罢了。

7. 焦点小组的任务不是做可用性测试

焦点小组是做什么的?一小群人围坐在桌子旁边,讨论他们对于产品的看法,他们过去的经历,它们的感受和对于新概念的理解。焦点小组的作用是帮你更好地界定目标用户,目标用户的感受等等。

可用性测试则是另外一回事。做可用性测试的时候,通常是为了测试产品而观察一个特定的用户使用产品的过程。在测试中,你需要测试人员执行特定的操作,以此来查看整个设计中的概念是否直观,功能是否需要完善。面对焦点小组的时候,你需要倾听观点,梳理思路,在进行可用性测试的时候,更多需要的是观察,并且解决具体的问题。

8. 不要让个人情感替代整个用户历程

我们在设计产品的时候,常常会从自己的需求出发:「我也是一个用户,所以我知道什么好什么不好。」我们对于自己的喜好有着强烈的感受。

我们会说,当我们的产品具备_____的时候,我们会很喜欢,又或者,我们认为_____是一个巨大的痛点。当我们真正和团队成员坐在一起讨论产品的时候,大家都有各自的看法和各自的情绪,所有人的都有着极强的个性和独特的看法,这个情况就很尴尬了。因为我们常常会倾向于认为绝大多数的用户和我们自己一样。事实上并不一定如此。

9. 问对问题,才能让产品走向对的方向

无论是设计产品功能还是测试产品的时候,问对问题都很重要。测试的时候,问用户「你们喜欢下拉菜单吗」这样的问题,不仅销量不高,而且不会带来价值。这个问题,应该这么问:「在这个情况下,在这个页面上,下拉菜单这种设计是否能够给你带来良好的用户体验?哪里让人觉得不舒服?」

诸如「用户喜欢这个产品吗」这样宽泛的问题意义不大,用户也很难提供针对性的、具体的回复。

而且,作为设计师我们不应当专注于用户是否喜欢这样的问题,这样会失去动力和专注力。可用性测试可以帮你消除各种「喜欢」相关的问题,并且帮你找到真正要做的事情。这才是重点。

10. 不要让用户思考问题

我在哪?我要干嘛?

我应该点哪里开始?

他们在这放的这个控件是干啥的?

这个页面是用来做什么的?

他们为什么这么称呼这个功能?

这个是广告还是内置的功能?

在使用产品的时候,如果触发用户大脑中的各种问题,只会增加用户的心理负荷和工作量,分散用户注意力并不是好事,而且用户本身并不喜欢解决各种难题。

每当用户点击某个控件而不起作用,或者它看起来是个链接实际上并不是,会消耗用户对你的信任感,降低产品的可靠度。

One more thing

炫酷的概念和新颖的趋势不仅吸引用户,同样是设计师的心头好。但是我们在新的时代,新的局面之下,始终面对的是以往的用户,看似千变万化的需求背后是不变的人性。

至少《Don’t Make Me Think》这本书一直在探讨的问题,经过20年的世事变迁,几次互联网浪潮,在这个号称互联网4.0时代,仍然发挥着作用,依然是那么具有启发性。

新状况之下潜藏着老问题,想要洞悉本质,设计师要懂心理学和行为学。在之前的几篇文章当中,我一直在试图梳理出不会随着时间改变,而一直存在的、亟待解决的问题以及可供使用的原理。

《为何如今的产品总给人千人一面的感觉?》揭示的是「特征蔓延」和「竞争驱动式设计」是如何让产品走向平庸和毁灭,解决方案藏在结尾。

《熟知用户行为的这7个层面,你的设计才会走进人心》则介绍了唐纳德诺曼的用户行为的7个层面,这是一套分析用户行为,设计产品流程的有效方法,拥有持久生命力的产品的设计策略,和这套方法不谋而合。

《这7种广泛存在的认知偏差,影响了我们太多的决策》 则帮你梳理了7种常见的认知偏差,认识自己了解用户,这些知识能消除误解,同样能够帮你洞悉真相,是不可多得的利器。

设计的方法和工具成千上万,想明白道理,问对问题,接下来的路更容易走通。


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



学会UI设计中的留白,还怕作品没有表现力?

ui设计分享达人

留白对于设计的价值,已经得到相当广泛的认可了。尽管留白看起来不复杂,但是在复杂多变的设计环境之下,往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡,而要做到这一点,需要相当的实践和积累。

优秀UI界面设计评析

蓝蓝设计的小编

男生运动鞋商店支付界面,颜色搭配非常舒服,鞋子摄影也很漂亮,字体字号运用非常到位。

React Native原生与JS层交互

seo达人

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

最近在对《React Native移动开发实战》一书进行部分修订和升级。在React Native开发中,免不了会涉及到原生代码与JS层的消息传递等问题,那么React Native究竟是如何实现与原生的互相操作的呢?

原生给React Native传参

原生给React Native传值

原生给JS传值,主要依靠属性,也就是通过initialProperties,这个RCTRootView的初始化函数的参数来完成。通过RCTRootView的初始化函数你可以将任意属性传递给React Native应用,参数initialProperties必须是NSDictionary的一个实例。RCTRootView有一个appProperties属性,修改这个属性,JS端会调用相应的渲染方法。

使用RCTRootView将React Natvie视图封装到原生组件中。RCTRootView是一个UIView容器,承载着React Native应用。同时它也提供了一个联通原生端和被托管端的接口。

例如有下面一段OC代码:

NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; NSArray *imageList = @[@"http://foo.com/bar1.png",
                         @"http://foo.com/bar2.png"]; NSDictionary *wjyprops = @{@"images" : imageList};

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"ReactNativeProject" initialProperties:wjyprops
                                                   launchOptions:launchOptions];
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

下面是JS层的处理:

import React, { Component } from 'react'; import {
  AppRegistry,
  View,
  Image,
} from 'react-native'; class ImageBrowserApp extends Component { renderImage(imgURI) { return (
      <Image source={{uri: imgURI}} />
    );
  }
  render() { return (
      <View>
        {this.props.images.map(this.renderImage)}
      </View>
    );
  }
}

AppRegistry.registerComponent('ImageBrowserApp', () => ImageBrowserApp);
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

不管OC中关于initialProperties的名字叫什么,在JS中都是this.props开头,然后接下来才是key名字。

{"rootTag":1,"initialProps":{"images":["http://foo.com/bar1.png","http://foo.com/bar2.png"]}}. 
    
  • 1

使用appProperties进行参数传递

RCTRootView同样提供了一个可读写的属性appProperties。在appProperties设置之后,React Native应用将会根据新的属性重新渲染。当然,只有在新属性和旧的属性有更改时更新才会被触发。

NSArray *imageList = @[@"http://foo.com/bar3.png", @"http://foo.com/bar4.png"]; rootView.appProperties = @{@"images" : imageList};
    
  • 1
  • 2
  • 3

可以随时更新属性,但是更新必须在主线程中进行,读取则可以在任何线程中进行。

React Native执行原生方法及回调

React Native执行原生方法

.h的文件代码:

#import <Foundation/Foundation.h> #import <RCTBridgeModule.h> @interface wjyTestManager : NSObject<RCTBridgeModule> @end
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

.m的文件代码:

#import "wjyTestManager.h" @implementation wjyTestManager RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(doSomething:(NSString *)aString withA:(NSString *)a)
{ NSLog(@"%@,%@",aString,a);
} @end
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

为了实现RCTBridgeModule协议,你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定,默认就会使用这个Objective-C类的名字。

并且必须明确的声明要给Javascript导出的方法,否则React Native不会导出任何方法。OC中声明要给Javascript导出的方法,通过RCT_EXPORT_METHOD()宏来实现。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Alert,
  TouchableHighlight,
} from 'react-native';

import {
  NativeModules,
  NativeAppEventEmitter
} from 'react-native'; var CalendarManager = NativeModules.wjyTestManager; class ReactNativeProject extends Component { render() { return (
          <TouchableHighlight onPress={()=>CalendarManager.doSomething('sdfsdf','sdfsdfs')}>
          <Text style={styles.text}
      >点击 </Text>
          </TouchableHighlight>

        );
      }
} const styles = StyleSheet.create({
text: {
  flex: 1,
  marginTop: 55,
  fontWeight: 'bold' },
});

AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
    
  • 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

要用到NativeModules则要引入相应的命名空间import { NativeModules } from ‘react-native’;然后再进行调用CalendarManager.doSomething(‘sdfsdf’,’sdfsdfs’);桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的,所以要返回结果给Javascript,你必须通过回调或者触发事件来进行。

传参并回调

RCT_EXPORT_METHOD(testCallbackEvent:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback)
{ NSLog(@"当前名字为:%@",dictionary); NSArray *events=@[@"callback ", @"test ", @" array"];
  callback(@[[NSNull null],events]);
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

说明:第一个参数代表从JavaScript传过来的数据,第二个参数是回调方法; 
JS层代码:

import {
  NativeModules,
  NativeAppEventEmitter
} from 'react-native'; var CalendarManager = NativeModules.wjyTestManager; class ReactNativeProject extends Component { render() { return (
          <TouchableHighlight onPress={()=>{CalendarManager.testCallbackEvent(
             {'name':'good','description':'http://www.lcode.org'},
             (error,events)=>{ if(error){
                   console.error(error);
                 }else{
                   this.setState({events:events});
                 }
           })}}
         >
          <Text style={styles.text}
      >点击 </Text>
          </TouchableHighlight>

        );
      }
}
    
  • 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

参数类型说明

RCT_EXPORT_METHOD 支持所有标准JSON类型,包括:

  • string (NSString)
  • number (NSInteger, float, double, CGFloat, NSNumber)
  • boolean (BOOL, NSNumber)
  • array (NSArray) 包含本列表中任意类型
  • object (NSDictionary) 包含string类型的键和本列表中任意类型的值
  • function (RCTResponseSenderBlock)

除此以外,任何RCTConvert类支持的的类型也都可以使用(参见RCTConvert了解更多信息)。RCTConvert还提供了一系列辅助函数,用来接收一个JSON值并转换到原生Objective-C类型或类。例如:

#import "RCTConvert.h" #import "RCTBridge.h" #import "RCTEventDispatcher.h" //  对外提供调用方法,为了演示事件传入属性字段 RCT_EXPORT_METHOD(testDictionaryEvent:(NSString *)name details:(NSDictionary *) dictionary)
{ NSString *location = [RCTConvert NSString:dictionary[@"thing"]]; NSDate *time = [RCTConvert NSDate:dictionary[@"time"]]; NSString *description=[RCTConvert NSString:dictionary[@"description"]]; NSString *info = [NSString stringWithFormat:@"Test: %@\nFor: %@\nTestTime: %@\nDescription: %@",name,location,time,description]; NSLog(@"%@", info);
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

iOS原生访问React Native

如果需要从iOS原生方法发送数据到JavaScript中,那么使用eventDispatcher。例如:

#import "RCTBridge.h" #import "RCTEventDispatcher.h" @implementation CalendarManager @synthesize bridge = _bridge; //  进行设置发送事件通知给JavaScript端 - (void)calendarEventReminderReceived:(NSNotification *)notification
{ NSString *name = [notification userInfo][@"name"];
    [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@{@"name": name}];
} @end
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

在JavaScript中可以这样订阅事件,通常需要在componentWillUnmount函数中取消事件的订阅。

import { NativeAppEventEmitter } from 'react-native';

var subscription = NativeAppEventEmitter.addListener( 'EventReminder',
  (reminder) => console.log(reminder.name)
); ... // 千万不要忘记忘记取消订阅, 通常在componentWillUnmount函数中实现。
subscription.remove();
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

用NativeAppEventEmitter.addListener中注册一个通知,之后再OC中通过bridge.eventDispatcher sendAppEventWithName发送一个通知,这样就形成了调用关系。

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

ofo《我们看过的世界杯》H5

资深UI设计者

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

项目背景:为了配合世界杯做的H5活动,主题是DIY你的世界杯时刻                                      

玩法:选择自己看世界杯的场景,可以在画面当中添加食物和自定义的小元素,另外根据场景的变换人物的腿也可以选择哦                                                 

项目周期大概半个月,和团队的小伙伴一起完成的,感谢@珊,@暖暖,@明明   

使用工具包括sketch、ps、手绘板                                                                    

 

ps:做H5真的是很累,工作量大,画的手疼,不过也积累了很多的经验,上线了好开心!

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

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



前端工程师必备实用网站

周周

素材类网站


千库网,一个免费下载图片素材的网站:http://588ku.com/ 
千库网.jpg.png


Unsplash是一个分享免费高质量照片的网站,照片分辨率都挺大,而且都是真实的摄影师作品,图片多是风景和静物:https://unsplash.com/ 

Unsplash.jpg.pngUnsplash2.jpg.png

插件类网站

jq22分享jQuery插件和提供各种jQuery的详细使用方法,在线预览,jQuery插件下载及教程http://www.jq22.com/

jq22.jpg.png


http://www.htmleaf.com/ 这个网站与上一个网站类似,也提供了大量的jQuery插件

                htmleaf.jpg.png

layui这是一个强大的模块化前端框架http://www.layui.com/

             layui1.jpg.png

layui2.jpg.png

H-ui,端框架,一个轻量级前端框架,简单免费,兼容性好,服务中国网站:http://www.h-ui.net/index.shtml

H-ui.jpg.png 

字体类网站

有字库,一个免下载字体,直接在线引用字体的网站http://www.youziku.com/onlinefont/index

有字库.jpg.png



PS字体库,包含了几乎所有类型的字体,下载好安装,PS中就可以使用了:http://www.psjia.com/pssc/fontxz/list_18_3.html


               PS字体库.png

图标类网站

iconfont,这是阿里巴巴旗下的图标库网站,直接搜索关键词就可以找到大批的图标。下载图标的时候我们还可以选择颜色、大小、格式,根据自己的需要下载就好了:http://www.iconfont.cn/plus

                   iconfont.jpg.png

easyicon这也是一个非常有名的图标库,与上面那个不同的是,这里的图标不是单一颜色的,而是设计好的颜色。下载图标也很简单,直接点击对应图标上面的格式就可以下载:http://www.easyicon.net/iconsearch/ios/

                  easyicon.jpg.png

奥森图标(Font Awesome),提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影:http://www.thinkcmf.com/font/search.html

                奥森图标.jpg.png

                 奥森图标1.jpg.png

配色类网站

http://colorhunt.co这个网站给我们提供了很多的配色方案,我们直接使用就OK了。

使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色到工具里就可以使用了。

                colorhunt.jpg.png

https://webgradients.com/180种渐变方案供你选择,还可以直接复制CSS样式应用到网页中。

              webgradients.jpg.png

adobe这个是Adobe公司出的,他提供了多种配色方案。我们点击圆盘中间的点,就可以调整出我们想要的配色方案:https://color.adobe.com/zh/create/color-wheel

                Adobe.jpg.png

http://www.colorhunter.com/这是一个提取现有图片配色方案的工具。我们上传一张图片,它就会帮我们把图片的配色提取出来供我们使用。

                colorhunt.jpg.png

bootcss这个网站是为WEB设计,开发中经常用到的安全色。网站内列出了颜色的十六进制码和RGB码,复制粘贴就可以了:http://www.bootcss.com/p/websafecolors/

               bootcss..jpg.png

sioe这是一个在线RGB和十六进制颜色码转换工具。在对应的位置填入十六进制代码,点击转换,我们就可以获取到RGB颜色的代码了http://www.sioe.cn/yingyong/yanse-rgb-16/

              sioe.jpg.png




2018年UI设计趋势概览

博博

2018年UI设计趋势概览

嗨兔科技 2018-06-11 10:41:59

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


互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的。在仔细分析了过去几年用户界面设计的趋势和创新之后,我们可以发现其背后的一些规律,2018年UI界面设计的趋势如下。

2018年UI设计趋势概览

渐变色

在过去的几年里,越来越多的设计师在设计作品时采用了色彩渐变的方法,今年的流体渐变更是风靡全球。即使你只选择了一种颜色,也可以在色彩渐变和不同图片的帮助下,营造出出丰富的层次结构感,绘制出一幅令人赏心悦目的画面。因此,色彩渐变的流行之风不仅在席卷了2017年整年,还将会在2018年继续流行下去。

2018年UI设计趋势概览

icon由线转面、刻画细节

现在的ios12中,采用了面性图标,未选中和选中状态只有颜色上的区分,并且图标更加圆润。目前很多用户界面已经给页面底部标签栏的icon加上微动效底部标签栏icon不仅有微动效,十分有意思,符合当下95后00后的用户心态。同时细节的设计带给用户的感受也会上一个档次。

2018年UI设计趋势概览

透明度+重叠

字体、图形以及颜色的重叠,不仅可以使界面看上去更加醒目鲜明,还可以营造出一种空间感。 相同元素的重叠,再辅以阴影,也会使整个APP界面的设计产生更多的奇妙感,牢牢抓住用户眼球,给他们留下深刻印象。因此,用户体验设计中,不同元素的重叠将会成为2018年的趋势。

2018年UI设计趋势概览

卡片+投影相结合

ios12中采用了大圆角卡片设计,它不再像过去MD中的小圆角那样呆板,大圆角让设计更加轻快大气。相信大家已经看到了很多卡片都使用了投影这一手法,轻微的、似有似无的投影,不会被用户立即察觉,但是会给设计增加深度,形成层叠的关系,更加醒目,可以更好的抓住用户的注意力。

2018年UI设计趋势概览

插画风格

插画风格运用的越来越广泛,适用于app当中的启动页、缺省页、banner图、专题头图、弹窗插画、icon等等,UI界面有各式各样的插画风格——如手绘风格、简约风格、MBE风格、剪纸风格和孟菲斯风格等。这些插画风格的使用不仅使APP更加有趣和与众不同,同时也赋予了用户界面个性,这就在界面设计层出不穷的当下能够给用户留下更为深刻的印象。

2018年UI设计趋势概览

较强的颜色或字体大小对比

强烈的颜色或字体对比也可以帮助设计师设计出优秀的用户界面来吸引用户的注意。例如,添加不同样式、类型、大小的字体,也可以传递层次和空间的感觉。而不同类型和风格的配色也会形成鲜明的对比,使整个设计更加丰富多彩和引人注目。

2018年UI设计趋势概览

3D效果正流行

今年C4D大热,相信大家已经感受到了,今年双十一很多商家都使用了3D效果,有的还加上了动效,可以让你全方位、多角度、更加真实的观察商品。目前还不会C4D的设计师们,为了提升你的竞争力,有必要学起来了,毕竟技多不压身。

2018年UI设计趋势概览

交互动效

给APP的图标、字体、照片和按钮添加动画或交互总是对用户有着积极的影响,因为它能带用户更多愉快的体验。它的几点特性:快速且流畅、恰到好处的反馈、提升操作感受、提供良好的视觉效果。所以这一趋势在2018年还将继续流行下去。

2018年UI设计趋势概览

动态视频

一般小视频使用在启动页多用于第一次打开app的场景,对用户的代入感较强再如由动态图片转变成动态视频,图片中有少量的动态元素,仿佛赋予图片生命,比较唯美和贴近现实。手机banner设计上也会采用动态视频进行展现,方便360度的查看商品,刺激你剁手的欲望。

2018年UI设计趋势概览

VR/AR/VUI是未来的大趋势

众所周知,现在VR(虚拟现实)和AR(增强现实)VUI(语音交互设计)大火,它们的核心都是计算机视觉和听觉。VR目前在娱乐领域被使用,而AR将会真正影响我们的工作和生活,多用于多媒体、市场营销、教育等方面。VUI在医疗和户外活动方面会发挥出前所未有的用户超级体验。

2018年UI设计趋势概览

我们为创造者和变革者而生,我们帮助企业制定用户体验策略,为用户创造精彩的数字体验,并通过品牌设计与用户建立情感的连接,用设计驱动商业策略的成功。

2018年UI设计趋势概览


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




日历

链接

个人资料

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

存档