首页

12条鲜有人知的css事实

高劲

      此文为译文,在这篇文章中提到了12条我们前端人员在日常工作中不是特别熟悉而又确实可以使用或者浏览器是可以很好支持的CSS技巧,熟知这些点,对我们深入研究CSS有很好的帮助。在本文中,用括号的方式加了一些简单的算是注释的个人理解。    原文地址:http://www.sitepoint.com/12-little-known-css-facts-the-sequel/

1、 border-radius属性可以使用'/'(斜杠)标签 

      不管你信不信,下边是有效的border-radius代码:

.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;

    }

    如果你之前没有见过这些,这里你可能会有一些困惑,所以这里有规范的解释:

   “如果斜杠/前后都设了值,那么斜杠前面的值就设定横向的圆角半径值,而斜杠后面的值就是设定纵向的半径值。如果没有斜杠的话,就把横向跟纵向的值设定为相等。”

763731149396848.png

图片注释:“border-top-left-radius: 55pt 25pt 的两个值定义了这个圆角的曲率(弯曲度) ”  所以,斜杠在值中的作用是让你创建不对称(横向跟纵向值)的圆角曲率

2、使用bolder、lighter相关关键字进行font-weight属性的定义

    正常来说你所看到的font-weight 属性的定义,它的值要么是normal要么是bold。你也偶尔能看到整数以整百为增量的值:100,200、、最大到900.
     然而,bolder跟lighter这两个值经常会被忘记。

         根据规范定义,这两个关键词指定了比继承值更粗或更细的值。它的出现会让你在处理一个比简单的‘bold’更粗一点或者比正常文本更细一点的多种权重的字号的时候表现的更加明显。(这块可能会有点难理解,其实这里是跟字体本身有关联的,如果你的字体,比如例子中用到的‘Exo 2’字体中,因为这个字体最细为100,bolder一下就变成400,再bolder一下是700,其实它这个bolder跟lighter是有个固定跳到的数值的,只会匹配到400,700,900这样的值里,当你的继承值为100、200或300,bolder一下,这个bolder的值都会是400,继承值为900,800,lighter一下,这个值都一样会是700,所以两个关键字其实是只会是400、700、900三个值的。)

3、关于outline-offset属性
    outline 属性由于它能够帮助调试而被众所周知(它不影响页面流)。规范上增加了一个outline-offset属性,它的作用完全跟它名字所表示的一样--让你定义它的外框线应该距离元素本身的偏移量。
    需要注意的就是,虽然outline属性是一个简写属性,但它不包含outline-offset属性,所以你每次都需要再单独定义outline-offset。

     outline-offset属性唯一的缺点就是,它在IE浏览器(即使是IE11)中不起效。

4、关于table-layout属性

    你可能会想,这是很老的信息了。我对display: table很熟悉,最早用来实现垂直居中的一种方法。但那不是我想说,注意我要说的是table-layout属性,而不是display属性。
    table-layout属性不像CSS的其他属性那样容易解释,所以我们还是先来看看规范是如何解释的:
    "根据这个算法,table的横向布局不依赖于单元格的内容;它仅仅依赖于表格的宽度、列的宽度以及边框和单元格的间距"
    这可能也是W3C规范史上第一次出现这样很难理解的东西

5、vertical-align属性用在表格跟非表格中的时候表现不一样
    如果你在2000年或者更早就开始接触网站编程,或者你处理过很多HTML电子邮件的话,那么你可能会认为vertical-align 属性是对老的HTML4中valign属性一个在HTML5里过时的,不符合功能要求的标签)的一个标准升级。
    但在CSS中vertical-align 并不是起到那样的作用。除开表格,我认为这个属性更牛逼的地方并不在于表格中的表现。
    所以,这个属性被应用于常规的元素跟表格单元的时候有什么不一样的地方呢?
    当vertical-align 不是应用在表格单元的时候,它遵循下边这些基本规则:

  • 它只在inline或inline-block元素中起效。
  • 它对元素中的内容不起效,但能改变该元素相对于其他inline或inline-block元素的对齐。
  • 它受文本/字体属性(比如行高line-height)或者相邻inline或inline-block元素的大小设置的影响。

6、伪元素::first-letter比你想象中更灵活

    伪元素::first-letter可以给元素的第一个字母定义样式,让你实现在印刷中多年前就有的段落效果(drop-cap 印刷的书本中经常能看到的段落中的第一个字比其他字号要大的效果)。
    有个好消息就是浏览器快要出一个关于元素的首字母构成的标准了。我最早在 Matt Andrews的twitter上看到有关这个推文,虽然他仅仅是发推文吐槽::first-letter选择器很糟糕。

7、你可以在HTML class列表中使用无效字符作为分隔符
    这个概念是Ben Everard在2013年的时候提出,而且我认为它值得推广一下。Ben的观点是用斜杠去将他的HTML类名进行分组,以便他的代码能够更好地阅读或浏览。他的观点认为,转义斜杠是一个无效字符,浏览器会无视它。
    所以你的HTML实例可能是这样的:

<div class="col col-4 col-8 c-list bx bx--rounded bx--transparent"> 使用斜杠后,变成这样: <div class="col col-4 col-8 / c-list / bx bx--rounded bx--transparent"> 你也可以使用任何字符(无效的或者空字符)去实现同样的效果: <div class="col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent">[/font]
<div class="col col-4 col-8 || c-list || bx bx--rounded bx--transparent">
 
<div class="col col-4 col-8 && c-list && bx bx--rounded bx--transparent">

8、动画重复的次数可以是带小数的值

   在写CSS关键帧动画的时候,你应该可以用animation-iteration-count 属性来定义动画重复执行的次数:

.example {
animation-iteration-count: 3;
}

     这个例子中的整数值将会让这个动画重复执行3次。但你可能不知道这里我们可以使用小数值:

.example {
animation-iteration-count: .5;
}

   在这个案例中,这个动画将执行半次(它会在第一次动画循环的中途停止)

9、动画名称会在动画的简写方式中影响动画的使用
      有些开发者可能已经发现了这一点,在规范中对这个也有个提醒。比方说,你有以下的动画代码:

@keyframes reverse {
from {
left: 0;
}
  to {
left: 300px;
}
}
  .example {
animation: reverse 2s 1s;
}

    注意这里我使用reverse作为动画的名称。简单来看,这并没什么不妥,但要注意当我们在用上面的代码作为一个例子时发生了什么:
    这段动画并不起效,因为‘reverse’是animation-direction属性的一个关键字。任何的动画名称在匹配到一个简写语法中的关键字值的时候都会发生这样的情况。但在普通写法中这样的情况不会发生(animation-name这样单独的动画名称写法的时候)。
    动画命名在简写语法中包含了任何定时功能的关键字 (比如infinite, alternate, running, paused 等等)都会被阻断。

10、使用样式选取元素列表中元素的范围
    我不知道是谁首先这样用的,但我第一次是在Gunnar Bittersmann 的这个demo 中看到的。比如说有一个20个元素的有序列表,你想选择第7到14个元素。这里你可以使用一个选择器来实现:

ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;

}

    这个代码使用了链式结构的伪类表达式。虽然表达式有点难理解,但你可以通过表达式中的数字看到你想要选中的范围。
    更详细地解释这个工作的原理:在链式结构的第一部分,表达式为“选中第七个元素及后面的所有元素”。第二部分的意思是“选取第十四个元素及前面的所有元素”。但由于两部分是链接在一起的,每一个限制前一个的范围。所以链式结构的第二部分不允许第一部分超过第十四个元素,然而第一部分又不允许第二部分选取到第七个元素之前的元素。

11、伪元素也适用于一些空元素
    如果你跟我一样,尝试过把伪元素附加到一个图片或者表格input标签上。你会发现这样并不生效因为伪元素在非闭合元素上无效。我想很多开发者都认为空元素(即没有闭合标签的元素)都是这样的。但这并不正确。

12、有些属性值在选择器中是不区分大小写的
    这是一个不起眼的点,让他们通过下边的HTML来看:

<div class="box"></div>
<input type="email">

    你可以通过属性选择器来给他们两个添加样式,像这样:

div[class="box"] {
color: blue;
}
 
input[type="email"] {
border: solid 1px red;
}

    上面这样是没问题的,那下边这样呢?

div[class="BOX"] {
color: blue;
}
 
input[type="EMAIL"] {
border: solid 1px red;
}

    现在两个属性值都是大写的。在这个示例中,因为class 属性是区分大小写的,所以 .box 元素的样式不生效。而另外一个email的标签,却由于type 的属性值不区分大小写,所以它的样式能生效。这并非什么重大发现,只是一些你之前可能没留意到的。

微信小程序学习参考demo源码集合

seo达人

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

微信小程序学习参考demo源码集合,仅供参考学习用途!!!

面对面翻译 微信小程序源码下载,语音翻译类小程序工具http://www.henkuai.com/thread-37499-1-1.html

开源微信小程序,小团队管理小程序下载 :http://www.henkuai.com/thread-37498-1-1.html

微信小程序多用户商城demo,还在开发中:http://www.henkuai.com/thread-37497-1-1.html

微信小程序抢课列表demo :http://www.henkuai.com/thread-37496-1-1.html

微信小程序地图实时显示demo:http://www.henkuai.com/thread-37495-1-1.html

高质量微信小程序UI组件库:http://www.henkuai.com/thread-37492-1-1.html

购房摇号助手微信小程序下载:http://www.henkuai.com/thread-37471-1-1.html

股票金融微信小程序客户端:http://www.henkuai.com/thread-37470-1-1.html
接龙微信小程序脚本,创建房间等等:http://www.henkuai.com/thread-37469-1-1.html
微信小程序统一中央服务器的思路,校园小情书联盟:http://www.henkuai.com/thread-37468-1-1.html
辅导员预约微信小程序:http://www.henkuai.com/thread-37467-1-1.html
仿星巴克用心说微信小程序:http://www.henkuai.com/thread-37466-1-1.html
微信小程序顶部滑动导航菜单栏:http://www.henkuai.com/thread-37465-1-1.html
微信小程序朋友圈点赞功能,让你的朋友圈秀起来:http://www.henkuai.com/thread-37464-1-1.html
微信小程序版 “前端TOP100”:http://www.henkuai.com/thread-37463-1-1.html
微信小程序3D轮播图效果示例:http://www.henkuai.com/thread-37459-1-1.html
微信小程序仿滴滴打车小程序源码下载,欢迎加入开发:http://www.henkuai.com/thread-37458-1-1.html
微信小程序仿青桔单车,打开地图扫码开锁:http://www.henkuai.com/thread-37436-1-1.html
微信小程序投票器,投票小程序源码:http://www.henkuai.com/thread-37434-1-1.html
微信小程序时间轴源码,记录中国LGBT事件:http://www.henkuai.com/thread-37433-1-1.html
微信小程序api拦截器,完美兼容原生小程序项目:http://www.henkuai.com/thread-37431-1-1.html
微信小程序使用map组件实现多点定位显示:http://www.henkuai.com/thread-37421-1-1.html
微信小程序商城前端,展示婴幼儿商品: http://www.henkuai.com/thread-37418-1-1.html
答题小程序免费送,有人用这个“小程序”每天做100000:http://www.henkuai.com/thread-37412-1-1.html

使用微信小程序map组件开发的一个demo,各种坑:http://www.henkuai.com/thread-37400-1-1.html

微信小游戏2048源码下载,经典的小游戏:http://www.henkuai.com/thread-37399-1-1.html

微信小程序-菜谱百科,小程序开发学习demo :http://www.henkuai.com/thread-37380-1-1.html

鲜切水果微信小程序,水果商城小程序:http://www.henkuai.com/thread-37379-1-1.html

微信小程序线上图书馆前端+后端源码下载,图书查询小程序 :http://www.henkuai.com/thread-37378-1-1.html

微信小程序日历打卡项目下载,轻巧好用的日历打卡组件:http://www.henkuai.com/thread-37367-1-1.html

微信小程序练手项目,包含抽屉效果、底部tab效果实现等:http://www.henkuai.com/thread-37365-1-1.html

【独立小程序】志汇餐饮8.6 小程序前端修复版本:http://www.henkuai.com/thread-37344-1-1.html

仿今日头条3.0 小程序前端 demo分享:http://www.henkuai.com/thread-37338-1-1.html

微信小程序真心话大冒险游戏,朋友聚会必备小程序:http://www.henkuai.com/thread-37337-1-1.html

微信小游戏头脑王者自动答题辅助插件,小游戏作弊工具:http://www.henkuai.com/thread-37336-1-1.html

微信小程序左滑操作自定义组件,让你的小程序开发更:http://www.henkuai.com/thread-37334-1-1.html

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

设计规范|Web端设计组件篇—文本与选择器

博博


人人都是产品经理 2018-04-23 00:00:00

本文作者主要讲解表单中的文本和选择器,enjoy~

设计规范|Web端设计组件篇—文本与选择器

根据组件的用途,可以分为六大类:Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。

设计规范|Web端设计组件篇—文本与选择器

表单在网页中主要负责数据采集功能;用户需要填写输入数据并且提交到数据库,则这种组件就是表单类。

本文主要讲解表单中的文本和选择器,其中文本分为input短文本、InputAutocomplete 短文本联想和InputMultiline 长文本。

input 短文本

定义:用于用户文本输入,并以字符串的方式提交到数据库。

使用场景:

  1. 用户需要输入字符时
  2. 通过鼠标键盘输入内容
  3. 输入的文本通常置于输入框

例如网易考拉优惠券兑换的表单填写,就是短文本输入组件,前面是标题,后面是文本输入框。

设计规范|Web端设计组件篇—文本与选择器

input短文本组件的展示形式可以分为三类。第1类是标题和输入框左右排列;第二类是标题和输入框上下排列;第三列不需要标题的排列。

标题和输入框左右排列时,短文本组件存在的状态有:初始态、激活态、报错态、完成态和禁用态。

设计规范|Web端设计组件篇—文本与选择器

常见的表单类排版都是左右排版,同时表单之间,标题采用左对齐,输入框左对齐的情况比较多。有时候标题名字过长这样话 左右排列就不够好,这时候需要采用上下排列。

设计规范|Web端设计组件篇—文本与选择器

标题和输入框上下排版时,存在状态和左右排列是一致的。

设计规范|Web端设计组件篇—文本与选择器

当没有标题时,存在状态同左右排列的规则和逻辑。

设计规范|Web端设计组件篇—文本与选择器

InputAutocomplete 短文本联想

定义:用户用于文本输入,在输入过程中会联想匹配文本选项,并以字符串的方式提交到数据库。

使用场景:

  1. 需要用户输入文本时。
  2. 提供联想匹配文本,减少用户输入成本。
  3. 在输入过程中根据用户输入的内容,出现匹配选项,提交的数据是文本而非枚举项。

例如百度搜索,在输入框输入关键词时会出现对应的联想匹配文本。

设计规范|Web端设计组件篇—文本与选择器

和input短文本组件相比,InputAutocomplete 短文本联想唯一的不同就是新增了联想匹配选项,并且提交的是文本而非枚举项。

标题和输入框左右排列时,InputAutocomplete 短文本联想组件存在的状态有:初始态、激活态、报错态、完成态和禁用态。

设计规范|Web端设计组件篇—文本与选择器

上下排列的状态和规则逻辑同左右排列。

设计规范|Web端设计组件篇—文本与选择器

不含标题的状态和规则逻辑同左右排列。

设计规范|Web端设计组件篇—文本与选择器

InputMultiline 长文本

定义:用户用于长文本输入,并以文本的方式提交到数据库。

使用场景:

  1. 多段文字输入
  2. 需要换行
  3. 输入的文本通常置于输入框中

例如新浪微博,在输入框发微博时,就是长文本输入,可以换行。

设计规范|Web端设计组件篇—文本与选择器

标题和输入框左右排列时,InputMultiline 长文本存在的状态有:初始态、激活态、报错态、完成态和禁用态。在输入过程中一般有字数统计,超过限制字数,不允许用户输入。

设计规范|Web端设计组件篇—文本与选择器

上下排列逻辑和规则同左右排列。

设计规范|Web端设计组件篇—文本与选择器

不含标题的逻辑同左右排列。

设计规范|Web端设计组件篇—文本与选择器

select 选择器

定义:用户通过选择枚举项,提交到服务器。后端存储为枚举项。

使用场景:

  1. 弹出一个下拉选项给用户选择操作
  2. 当选项少时(少于 5 项),建议直接将选项平铺,使用 Radio 是更好的选择。

例如淘宝卖家后台筛选订单的状态时,点击选择器,出现下拉列表。这就是一个常见的选择器,选择器分为多选和单选两大类。

设计规范|Web端设计组件篇—文本与选择器

下图为选择器基本样式,就是简单的下拉选项,不可进行关键词的搜索。

设计规范|Web端设计组件篇—文本与选择器

下图是可以搜索的选择器,当输入框处于激活态时,浮出下拉列表。在输入过程中,出现匹配枚举项,点击枚举项,则输入的关键词清空,同时下拉选项收起。输入框出现选择的选项。

设计规范|Web端设计组件篇—文本与选择器

有时候存在一个场景。用户对需要填写的选项设为空选项,则需要空值的选项。

设计规范|Web端设计组件篇—文本与选择器

有时候存在一个场景。用户选择了一个选项,但是后面想去掉选择的选项,不进行选择。

设计规范|Web端设计组件篇—文本与选择器

选择器多选组件中需要注意的一点就是:用户在输入关键词中,选择对应下拉选项,则输入的字符串清空,同时出现该选项tag。

设计规范|Web端设计组件篇—文本与选择器

常用正则表达式20例

高劲

   总结了工作中可能经常会用到的各类正则表达式的写法。
   方便以后进行查找,减少工作量。

   1. 校验基本日期格式

var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;

   2. 校验密码强度
   密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。

var reg = /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;

   3. 校验中文 

   字符串仅能是中文。

var reg = /^[\\u4e00-\\u9fa5]{0,}$/; 4. 由数字、26个英文字母或下划线组成的字符串 var reg = /^\\w+$/; 5. 校验E-Mail 地址
同密码一样,下面是E-mail地址合规性的正则检查语句。
var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/; 6. 校验身份证号码
下面是身份证号码的正则校验。15 或 18位。
15位: var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/; 18位: var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/; 7. 校验日期
“yyyy-mm-dd” 格式的日期校验,已考虑平闰年。 var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/; 8. 校验金额
金额校验,到2位小数。 var reg = /^[0-9]+(.[0-9]{2})?$/; 9. 校验手机号
下面是国内 13、15、18开头的手机号正则表达式。(可根据目前国内收集号扩展前两位开头号码) var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/;    10. 判断IE的版本
   IE目前还没被完全取代,很多页面还是需要做版本兼容,下面是IE版本检查的表达式。

var reg = /^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;

      11. 校验IP-v4地址

var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;

     12. 校验IP-v6地址

var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;

      13. 检查URL的前缀
   应用开发中很多时候需要区分请求是HTTPS还是HTTP,通过下面的表达式可以取出一个url的前缀然后再逻辑判断。

if (!s.match(
    /^[a-zA-Z]+:\/\//
  )) {
  s =
    'http://' +
    s;

}

      14. 提取URL链接
   下面的这个表达式可以筛选出一段文本中的URL。

var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;    15. 文件路径及扩展名校验
   验证 windows下文件路径和扩展名(下面的例子中为.txt文件)
var reg = /^([a-zA-Z]\\:|\\\\)\\\\([^\\]+\\)*[^\\/:*?"<>|]+\\.txt(l)?$/;       16. 提取Color Hex Codes
   有时需要抽取网页中的颜色代码,可以使用下面的表达式。
var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/; 17. 提取网页图片
   假若你想提取网页中所有图片信息,可以利用下面的表达式。
var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;    18. 提取页面超链接
   提取html中的超链接。

var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;

   19. 查找CSS属性
   通过下面的表达式,可以搜索到相匹配的CSS属性。

var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;

   20. 抽取注释
   如果你需要移除HMTL中的注释,可以使用如下的表达式。

var reg = /<!--(.*?)-->/;

Loading设计思路分享

博博


UI妹儿 2018-05-04 10:44:21

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

Loading设计思路分享

Loading作为一个常见,并且带有排他性的动画,已经被各路大神表现的淋漓尽至。那么如何在众优秀作品下,做出一个性化的Loading动画?

Loading设计思路分享

Loading种类:

1.状态类(进度条):通常数据量很大,客户端已知加载量,并能根据当前加载速度计算出何时加载完成。

状态型的Loading以进度条类为基准,可以为用户提供预期时间,多伴随百分比进度出现。进度条的形式以线性的形式出现,已知总量,降低用户对期待时间的感受。无聊的等待会让人厌烦,作为一个UI设计师需要关注每一个细节,尤其是用户的情绪并将引导到加载后的页面。

By Piotr Adam Kwiatkowski

2.无状态类(菊花):通常数据量比较小,客户端无法预知加载量。

Loading设计思路分享

无状态类的Loaing以菊花为代表,通常都是一组可以无限循环播放的动画。

无状态类的Loaing如有需要可以做的特别一些:https://dribbble.com/search?q=loading

我们的App需要一个无状态的Loading。

我始终相信设计的直觉很重要,抓住直觉的爆发点,是一个成熟设计师必备的素质。于是先按照最初的想法快速做了一版。

Loading设计思路分享

相信很多人对这个Loaing眼熟,当然,这肯定不是我们要的效果,不过在制作这Loading的时候不断的推翻自己的想法,时而清醒时而模糊,感觉突然找到了方向但瞬间也可能烟消云散。这种不断反复的过程中还是收获了很多。

Loading设计思路分享

既然是无限,循环,表现上就不能过于缺乏趣味,这个度很难把握。形式感上面设计要简单,又要通过最直接的方法创造空间感,偶然间发现马戏团的抛球表演。突然间有了灵感,于是就沿着这个思路开始动手设计:

我尝试去直接模仿抛弃的运动,但是效果并不是很好,但是从Demo中可以看出,值得很入研究。

为此我们搜索了一下现实中的扔球效果:

Loading设计思路分享

经过分析我们得出了第一条小球的运动路经是一个无限的符号。

工作路经确定后,导入C4D中进行单球运动轨迹测

由于实例中,小球会受到重力以及加速度的影响,并非匀速运动,但在实际Loading制作过程中,为了视觉效果,我们希望小球做匀速运动

发现问题:小球在中心焦点位置出现明显卡顿

起初我们认为是速度曲线没有调整好所导致的,但我们尝试几版后发现并不是这样,最后我们发现导致这个问题的原因是路经节点问题。

Loading设计思路分享

调整节点

通过调整节点后,不难发现,中心焦点处的卡顿明显不见了

为了加强透视效果,我们将球的大小和颜色进行了关键帧处理,这已处理增加的景深对视觉的冲击,使得空间感更强了。

看起来怪怪的。。。。。

为了使整个运动规律更加精准,我们发现运动的起点距离是关键,不懈的追求完美的情况下,总是会有顿悟的时刻,幸运的是找到了问题的所在

三个球匀速运动的情况下,应该保证每相邻两个球之间路经上的距离是相同的。

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

UI设计 如何让你的配色更加舒服

蓝蓝设计的小编

色彩作为视觉感知的先觉条件,在很大程度上决定了作品的好坏以及给观者留下什么样的印象,人们感知到的即是通过色彩所传递出的情感,色彩作为一门独立的学科,在基于其理论体系之上衍生出了众多的搭配方法和技巧,在遵循色彩构成的原理之上可以更好的帮助我们对色彩有深入的认知和使用,对于色彩而言,除了要了解基本的构成之外,在使用的过程中更重要的是要对色相,明度,饱和度有敏锐的观察里和视觉感知力,通过三者不断的变化和调整把控使色彩更加具有情感,让视觉感知更加的舒适并满足我们的实际的需求;

【css】背景颜色渐变,文字颜色渐变,边框颜色渐变

seo达人

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

前言:css3的出现使得我们可以通过前端技术,让网页内容变得更丰富,更华丽。今天来玩玩好玩的颜色渐变。

一、背景颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
  4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
  5. }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>  

运行效果


二、文字颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
  4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
  5. -webkit-background-clip:text; -webkit-text-fill-color:transparent; }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>  

运行效果


三、边框颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;   
  4. border:10px solid;  
  5. border-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%) 10; }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>   

运行效果

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


浅谈jQuery之动画

seo达人

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

背景

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑

滑入滑出动画

  1. 滑入动画

    定义:以下拉方式动画效果将html内容显示出来

    使用方式:

    $(selector).slideDown(time,function) 
    $(selector).slideDown(2000) 
    $(selector).slideDown() 
    $(selector).slideDown(fast/normal/slow)

    time代表执行动画的时间,function代表动画执行完之后所要执行的函数

  2. 滑出动画

    定义:以上滑方式动画效果将html内容隐藏出来

    使用方式:

    $(selector).slideUp(time,function) 
    $(selector).slideUp(2000) 
    $(selector).slideUp() 
    $(selector).slideUp(fast/normal/slow)

    time代表执行动画的时间,function代表动画执行完之后所要执行的函数

  3. 滑入滑出切换动画

    定义:在滑入滑出动画间切换

    使用方式:

    $(selector).slideToggle(time,function) 
    $(selector).slideToggle(2000) 
    $(selector).slideToggle() 
    $(selector).slideToggle(fast/normal/slow)

淡入淡出动画

  1. 淡入动画

    作用:让元素以淡淡的进入视线的方式展现出来

    使用方式

    $(selector).fadeIn(time,function) 
    $(selector).fadeIn(2000) 
    $(selector).fadeIn() 
    $(selector).fadeIn(fast/normal/slow)

  2. 淡出动画

    作用:让元素以淡淡的离开视线的方式隐藏起来

    使用方式

    $(selector).fadeOut(time,function) 
    $(selector).fadeOut(2000) 
    $(selector).fadeOut() 
    $(selector).fadeOut(fast/normal/slow)

  3. 淡入淡出切换动画

    作用:让元素在淡入淡出动画切换

    使用方式

    $(Selector).fadeToggle(time,function) 
    $(selector).fadeToggle(2000) 
    $(selector).fadeToggle() 
    $(selector).fadeToggle(fast/normal/slow)

  4. 修改opacity

    作用: 修改opacity的值

    使用方式

    $(Selector).fadeTo(time,opacity,function) 
    time可以是字符串,可以是具体数字 
    也可只有参数一、参数二

显示隐藏动画

  1. 显示动画

    作用: 将Html结构显现出来

    使用方式

    $(Selector).show(time,function) 
    $(selector).show(2000) 
    $(selector).show() 
    $(selector).show(fast/normal/slow)

  2. 隐藏动画

    作用: 将Html结构隐藏起来

    使用方式

    $(Selector).hide(time,function) 
    $(selector).hide(2000) 
    $(selector).hide() 
    $(selector).hide(fast/normal/slow)

停止动画

  • 定义:停止正在执行的动画

  • 使用方式:

    $(selector).stop() 
    stop()中可以有两个参数,参数一:后续动画是否执行,参数二:当前动画是否执行完毕,默认的是(false,false),注意第一个参数,true代表的是后续动画不执行 
    ———————————————————————————— 
    第一种:(false,false) 
    后续动画会执行,当前动画不会执行完 
    第二种:(false,true) 
    后续动画会执行,当前动画会执行完 
    第三种:(true,false) 
    后续动画不会执行,当前动画不会执行完 
    第四种:(true,true) 
    后续动画不会执行,当前动画会执行完

自定义动画

  • 作用:执行一组CSS属性的自定义动画

  • 使用方式:

    $(selector).animate({CSS定义},time,function())

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

基于jQuery的select2下拉框

高劲

select2简介】
       select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder……
【引入文件】
      <linkrel="stylesheet" href="./css/select2.css">
      <scriptsrc="./js/jquery-2.1.0.js"></script>
      <scriptsrc="./js/select2.full.js"></script>
select2的简单用法】


  • 设置禁用状态disabled,如:$(".js-example-disabled").prop("disabled",false);
  • 默认值设置:$("#select2").val("1").trigger("change");
  • 多选的默认值可以使用:$("#select2").val(["1","2"]).trigger("change"); 这样传递数组过
  • select2还有丰富的自定义事件

  JavaScript

$("#select2").on("select2:open", function (e) { log("select2:open", e); });
 
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
 
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
 
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
 
$("#select2").on("change", function (e) { log("change"); });


select2的其他组件】

      一、多选效果
      效果图

161511wc0em4p5ictpk0k6.gif



代码如下
Html代码

<div class="box1 div">

   <p>多选下拉框</p>

<select id="sel_menu1" multiple="multiple" class="form-control">

  <optgroup label="系统设置">

  <option value="1">用户管理</option>

  <option value="2">角色管理</option>

  <option value="3">部门管理</option>

  <option value="4">菜单管理</option>

  </optgroup>

  <optgroup label="订单管理">

  <option value="5">订单查询</option>

  <option value="6">订单导入</option>

  <option value="7">订单删除</option>

  <option value="8">订单撤销</option>

  </optgroup>

  <optgroup label="基础数据">

  <option value="9">基础数据维护</option>

  </optgroup>

  </select>

</div>


JS代码

$("#sel_menu1").select2({[/align]
         tags: true,
         maximumSelectionLength: 3 //最多能够选择的个数

      });


二、图文结合效果
效果图

161544vqrri760rldcbg5d.gif


代码

Html代码

<div class="box2 div">
     <p>图文结合的效果</p>
     <select id="sel_menu2" class="js-example-templating js-states form-control">
          <optgroup label="系统设置">
  <option value="1">用户管理</option>
   <option value="2">角色管理</option>
   <option value="1">部门管理</option>
  <option value="1">菜单管理</option>
  </optgroup>
  <optgroup label="订单管理">
  <option value="1">订单查询</option>
  <option value="1">订单导入</option>
   <option value="1">订单删除</option>
  <option value="1">订单撤销</option>
   </optgroup>
  <optgroup label="基础数据">
  <option value="1">基础数据维护</option>
  </optgroup>
      </select>
</div>

JS代码

$("#sel_menu2").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState(state) {
            if (!state.id) {
                return state.text; 
            }
  var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };


从已知探索未知的设计之道

涛涛

从已知探索未知的设计之道
DESIGN
在寻找如何更好的“发现-解决问题”过程中,受到MIT媒体实验室教授Neri Oxman文章《Design and Science - Krebs Cycle of Creativity》一文启发,区别于“点对点”的发现-解决问题,为了从更高角度更好的解决问题,类比克雷布斯循环和创造力的克氏循环(KCC),将“发现-解决”问题/机会点这一过程整体系统化,尝试提出系统性解决问题之思考-行动模型Krebs Cycle of Design,并以空间Feeds信息流产品举例如何实践Krebs Cycle of Design。



从已知探索未知的设计之道 - 系统性解决问题之<思考-行动>模型Krebs Cycle of Design

作为互联网的用户体验实践者-交互设计师,大大小小经历过很多不同种类不同维度的项目,比如成熟期产品的常规迭代项目(如社交指数、校园问答、空间社交周报、Feeds新增礼物等),这时我是哪里需要就在那里的问题解决者;也会和产品一起探索新的产品方向,经历从0到1的探索型项目(如视界、AR相机、ABCmouse等),此时我是主动探索的问题解决者。近两年都在思考用户体验设计师该如何在互联网团队中发挥设计最大价值,最终达到“解决用户问题,创造美好产品体验”的终极目标。结合自己的用户体验设计从业经历,我尝试给设计做个定义:

设计就是从已知探索未知的过程,是一个不断解决问题的过程。

具体来讲,就是从发现问题/机会点后,通过“How”等各种方法手段去解决问题/机会点的整个过程。

而解决问题/机会点的各种方法手段“How”就至关重要,在寻求“How”的过程中,受到MIT媒体实验室教授Neri Oxman文章《Design and Science - Krebs Cycle of Creativity》一文启发,Neri Oxman在《Design and Science - Krebs Cycle of Creativity》中提出的类似克雷布斯循环的创造力的克氏循环(KCC),创造性的将人类的创造力四种模式-科学、工程、设计和艺术,形成创意循环的地图假设并进行了相应解读,阐释了学科之间不再是割裂离散的孤岛这一命题。感兴趣的小伙伴可以使用传送门:

英文版原文:《Age of Entanglement》https://jods.mitpress.mit.edu/pub/ageofentanglement

中文翻译版本之【设计读本】媒体实验室教授Neri Oxman文章《纠缠时代》,揭示创意循环在科学、工程、设计与艺术中深层关系》:https://zhuanlan.zhihu.com/p/27951549

拓展阅读:《Design and Science byJoichi Ito》https://jods.mitpress.mit.edu/pub/designandscience

区别于“点对点”的解决问题,为了从更高角度更好的解决问题,类比克雷布斯循环和创造力的克氏循环(KCC),将“发现-解决”问题/机会点这一过程整体系统化,尝试提出系统性解决问题之 < 思考-行动 > 模型-Krebs Cycle of Design。

系统性解决问题之 < 思考-行动 > 模型主要包含以下8个阶段:发现问题/机会点- 系统性思考- 判断问题/机会点- 挖掘行动- 挖掘出真正的问题/机会点 - 解决行动 - 构建更好的产品(1小步)- 迭代进化思考 - 重新发现问题/机会点。


以空间Feeds为例,解析如何实践Krebs Cycle of Design

前文讲述了系统性解决问题之 < 思考-行动 > 模型-Krebs Cycle of Design,接下来通过具体的项目,说明如何通过“系统性解决问题之 < 思考-行动 > 模型”全局解决问题,这里采用一个从需求引发的未知产品探索,以QQ空间基础Feeds信息流产品为例。


项目背景

作为腾讯典型社交产品,QQ空间已经12年了,那么对于12年的空间Feeds信息流产品日常需求,整体来讲具有以下3个特点:需求量多(面对多个产品不断快速迭代)、需求类型杂、需求内容小。

基于这样一个前提,为了更好的解决问题,仅仅只做需求是不够的,需要设计师发挥产品主人翁意识,这样首先我的角色定位无形中发生了变化,从单纯的设计师(产品需求转换者)转变为产品设计师(产品需求洞察者)。

角色的变化,进一步带来了解决问题思维模式的变化,从之前为单一用户需求而设计的线性解决问题思维模式转变为从点触发的系统性解决问题思维模式。

总的来讲系统性解决问题之 < 思考-行动 > 模型,以空间基础Feeds信息流产品为例。主要有以下几个阶段,并且每一个阶段都是上一个阶段的自然转化。

1. 提出产品需求/机会点。

2. 基于产品需求/机会点,从点触发,通过系统性思考,全面的思考分析。

3. 基于系统性思考,判断需求在系统中是否有价值。

4. 判断有价值后,继续深入挖掘更多的问题和机会点。

5. 综合判断挖掘真正的问题/机会点。

6. 确定真正的问题/机会点后,针对性的进行解决行动。

7. 阶段性的解决行动后,就向构建一个更好的产品迈出了一小步。

8. 构建更好的产品后,为了产品后续更好发展,进入新一轮的迭代进化思考。

9. 迭代进化思考后,就开始了新一轮的系统性解决问题,构建越来越好的产品和更加美好的体验。


1.提出产品需求/机会点

在互联网公司,尤其是互联网产品比较成熟时(如QQ空间Feeds信息流产品),设计师通常扮演者产品需求转换者的角色,在常规迭代项目中面对产品经理一个又一个的小点需求,很多设计师都是基于点对点的需求进行功能细化,有些甚至可以直接开始详细设计;而系统性解决问题思考行动模型则建议“将产品需求直接转换为详细设计”的这一类设计师,在日常常规需求之外,可以跳出点对点的小需求,更加系统的思考需求&探索问题和机会点。


2.系统性思考

从已知的需求、问题和机会点出发,从点触发设计师全局思考产品。通过系统性思考,了解产品整体系统,该部分思考的维度和方法,通常从商业、产品、项目、用户等多角度思考,如商业工具(理解商业的商业模式画布)、产品工具(了解行业位置的SWOT分析法、发散创意的搜寻领域图和思维导图)、产品工具(理解阶段目标的目标分解图)、用户研究工具(量化理解用户的问卷和访谈、定性用户研究的可用性测试&焦点小组、模拟分析场景的体验地图)。而以QQ空间Feeds信息流产品为例,阐述如何更全局的系统性思考产品。

系统性思考第1步:从日常繁琐的小需求中跳出,从资源输入-内容输出维度,全局的了解空间的整体产品体系,比如核心UGC业务、运营相关业务、分支业务、广告业务等。

系统性思考第2步:基于资源输入-内容输出维度全局了解产品体系后,针对Feeds信息流模块,梳理出资源输入类型和各个类型所包含内容,以及触达用户的内容输出Feeds类型以及包含内容信息,分析输入输出不同对象关系,明确空间Feeds信息流的空间枢纽作用,为下一步判断需求/问题/机会点的价值提供依据。


3. 判断问题和机会点在整个系统中是否有价值

基于系统性思考,分析判断需求在系统中是否有价值。对于QQ空间Feeds信息流产品,通过产品的系统性思考,会发现Feeds基于空间的枢纽作用,连接空间各个业务内容,并以Feeds产品形态分发给UGC和PGC用户。因此Feeds信息流的产品设计优化对于整个空间而言,都有极大的商业和用户价值。


4. 深入挖掘行动

判断问题/机会点有价值后,继续纵向深入挖掘更多的问题和机会点,该部分思考的维度和方法可从需求挖掘和设计调研/用户研究两个维度,从产品、用户等多角度思考,如现有问题挖掘的日常积累法、数据定量分析法、用户调研访谈等定性研究、头脑风暴等涌现挖掘法、用户核心行为的全链路分析法等。下面以QQ空间Feeds信息流产品,举例如何深入进行挖掘行动。

挖掘行动第1步:从项目团队内部(产品&开发&设计师)收集现有痛点问题,并将问题梳理归类整理,确定内部收集痛点问题重要程度优先级。

挖掘行动第2步:从用户“发表-浏览-互动”的Feeds信息流相关的核心行为路径切入,收集用户/专家反馈,并分析确定用户核心行为路径哪些问题与Feeds相关。


5. 判断确定真正的问题和机会点

挖掘行动后,就可以从产品内部、用户本身等多维度得到N个问题和机会点,通过对问题和机会点整理判断分析,得出真正的问题和机会点。如针对空间Feeds信息流产品真正的问题点和机会点有2个:Feeds缺失系统化、Feeds关键触点暴露的用户问题。


6. 解决行动

确定真正的问题/机会点后,针对性的进行解决行动。不同的问题和机会点,可根据需要采用适合的解决行动。下面仅以QQ空间Feeds信息流产品,举例如何进行解决行动。

解决行动第1步:针对有多个问题和机会点的情况,首先需要明确解决问题的优先级,这里可以参考评估优先级的方法-知觉图、C-BOX图表(来自代尔夫特设计指南《设计方法与策略》),定义问题管理四象限,从“重要程度+紧急程度”两个维度分析确定解决问题优先级,其中横坐标轴代表紧急程度,从左到右紧急程度降低;纵坐标代表重要程度,从上到下重要程度降低。正所谓建造房子地基很重要,Feeds缺失系统化代表Feeds信息流的地基不稳,在地基打牢之后我们可以有针对性的解决用户关键触点暴露的问题,分优先级逐步推进解决问题。因此形成了以解决“Feeds缺失系统化”为基础,有节奏的探索解决Feeds关键触点暴露问题的解决策略。


解决行动第2步:解决“Feeds缺失系统化”,即Feeds设计系统化,也就是将整个Feeds产品体系化,进行设计的规范化和组件化,并在设计层面和开发层面统一共享资源,并应用到产品的后续迭代中。而设计系统化的典型代表Material Design,就通过从真实世界观察到数字世界模拟,构建了一个数字世界观,包含设计理念、设计原则、设计元素(如输入框、按钮、文字等控件/组件)、设计模式(如空状态、手势、搜索等)、工具等内容。 关于设计系统化(design system感兴趣的小伙伴可以查看《design systems》一书,购买书籍链接:https://www.smashingmagazine.com/design-systems-book/

Feeds设计系统化主要有以下3个阶段:明确设计系统化目标 - 明确设计系统化思路 - 设计系统化过程。

首先是明确设计系统化目标,明确预期目标有助于我们在项目后期更好的评估系统化设计的价值和效果,空间Feeds信息流产品主要从3个维度明确目标:规范化(形成Feeds基础设计体系,保障Feeds整体设计统一性)、提升效率(可以快速复用,保质保量的支撑业务需求的快速迭代)、可持续原则(一句话就是跟得上潮流,不断的迭代进化)。

其次是是明确设计系统化思路,明确了目标之后,需要定义如何进行Feeds设计系统化的思路,主要有以下4个阶段:场景类目梳理- 抽象框架- 填充细节内容 - 建立设计规范。


在明确了设计系统化思路后,依据思路,通过以下4个阶段一步一步构建Feeds设计系统化:场景类目梳理- 抽象框架- 填充细节内容 - 建立设计规范。

设计系统化第1步:场景类目梳理,从场景出发归类所有的Feeds类型。

设计系统化第2步:抽象框架,首先将所有Feeds类型每个的结构模块化,其次通过“类比-分析-聚类”归类同类型框架,最后设定Feeds框架应用策略(不同框架的每个模块可采用LEGO自由组合策略)。

设计系统化第3步:填充细节内容,补充A/B框架类型中的填充元素(控件/组件等内容)。

设计系统化第4步:建立Feeds设计规范,提升产品设计效率,为后续设计夯实基础。

Feeds设计系统化项目,在产品设计内部也得到了广泛好评,一定程度上提升了产品设计效率。


解决行动第3步:有节奏的探索解决Feeds关键触点暴露问题,也就是Feeds设计有亮点。设计有亮点的探索聚焦用户的核心使用路径,在关键触点上发现亮点设计机会点。


首先是聚焦用户核心行为路径,从用户触点切入,深挖不同关键触点,收集用户/专家的反馈,并针对用户的关键触点问题探索出相应的解决方案。


其次在有了这么多的亮点解决方案后,先做哪一个再做哪一个,我们需要明确亮点设计功能实践优先级。此时就需要回归产品目标用户群,深度探索目标用户的特性,比如QQ空间的使用用户群体为95后,他们具有“创造、个性、有趣、表达”等特性,他们爱玩的产品有“弹幕、变声语音、斗图、鬼畜视频”,这些产品都具有“DIY、个性互动、满足成就感”等心理因素,因此针对8个Feeds亮点解决方案,优先在互动层面实践快评表情。


接下来就是如何进行快评表情产品设计,首先明确快评表情产品设计思路,主要有以下4个阶段:定义产品需求-明确产品目标-探索用户趣味表达心智模型-定义具体的解决策略

在明确了产品设计思路后,依据思路,通过以下4个阶段逐步推进快评表情亮点化设计:定义产品需求-明确产品目标-探索用户趣味表达心智模型-定义具体的解决策略。

亮点设计第1步:定义产品需求,需要明确正在设计的产品需求到底是什么?该需求要解决什么问题,或者满足了用户哪一方面的诉求;比如在QQ空间快评表情产品设计中,由于快评表情可能存在空间多个用户场景(如Feeds评论、发表Feeds、直播场景等)。为了快速上线快评表情,验证其可促进用户活跃度,首先确定了快评表情的具体产品需求,将其使用场景缩小为优化Feeds评论表情功能。

亮点设计第2步:明确产品设计目标,确定了产品做什么后,为了更好的评估衡量设计效果,我们需要在具体设计前先定义设计预期目标。如快评表情产品需求中,在具体设计之前,明确了产品设计预期目标,如增加评论趣味性、增强用户互动欲望、提升用户活跃度等。

亮点设计第3步:探索用户趣味表达心智模型,明确了产品设计目标后,我们需要更深层次的挖掘用户使用产品心理动机,从而探索用户的一个使用心智模型,心智模型有助于我们在更高更深层面让用户使用产品过程中超出预期。如快评表情设计中,基于目标用户探索用户互动心智模型,发现了以用户互动诉求为基础,满足用户个性化、专属感、控制感的深层心理动机,从而可以让用户达到最终的成就感,建立起用户与产品的情感联系。

亮点设计第4步:定义具体的解决策略,分析了目标用户特性和动机后,可以尝试定义“如何做”的产品设计策略,搭建/聚焦用户使用核心路径,在核心路径上明确用户关键触点,并基于核心路径形成关键页面,并最后给出用户超越预期的产品体验。如快评表情设计中,由于是原有的评论表情优化,因此在定义解决策略时,首先聚焦评论表情的核心路径,基于核心路径寻求机会点,并且根据机会点搭建全新的快评表情使用路径。


定义了具体的设计解决策略后,就进入详细的交互设计阶段,此处仅由于内容篇幅太长,仅做简要的一些核心点说明。主要有3点:

1. 聚焦用户评论核心路径,找到评论表情关键触点,探索设计机会点。

2. 基于评论核心路径机会点,新增用户关键触点,加强用户与产品、用户与用户之间互动反馈。

3. 搭建用户使用新路径,通过主动触发和被动触发机制,强化推荐互动。


7. 解决行动结果-构建更好的产品体验

阶段性的解决行动后,比如进行了Feeds设计系统化打好根基,探索了快评表情的亮点设计后,已经向构建一个更好的产品迈出了一小步。无论从产品内部评价和上线后数据验证结果来看,均达到当时的一个小小目标。如产品数据验证部分方法感兴趣的,可查看“用户行为数据分析”等方法。


8. 迭代进化思考

正所谓“潮流是在不断发展变化的”,互联网圈的发展更是日新月异,因此为了后续产品发展的更好,需要进入新一轮的迭代进化思考。如果设计师在横向有一个属于自己的设计中心(或者设计团队),可以定期挖掘讨论创意想法,沉淀为创意资源库,从而更好的发挥设计中心横向优势,合力扩大影响力。如QQ空间内部就有Qzone idea的创意小组,定期输出创意想法,讨论,并向上汇报推动产品侧落地。


总的来讲,系统化解决问题<思考-行动>模型可以你“找对事 & 做对事”,“如何做设计的亮点深挖四部曲”具体化做对事的过程,两者相辅相成,合力打造更美好的产品体验。


日历

链接

个人资料

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

存档