18801051825的个人主页

http://www.qtcn.org/bbs/u/185984  [收藏] [复制]

18801051825

  • 2

    关注

  • 11

    粉丝

  • 142

    访客

  • 等级:新手上路
  • 身份:禁止发言
  • 总积分:0
  • 男,2011-01-01

最后登录:2021-03-12

更多资料

日志

2019-07-31 14:53

创意动画

1. 品牌加载
公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号,融合到产品设计中,从而提升视觉的一致性,创造富有特有性格的产品界面。

△ Netflix & Airbnb
2. 图标动画
微交互是建立在移动端上微妙视觉效果的小动画,而图标动画是微交互其中的一种。它的目的是吸引用户,让用户感觉顺畅、愉悦。
最近,让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面,这些由产品所包含的一个个小细节,创造出了新颖而有趣的设计。

△ Facebook Website

..

阅读全文»分类:默认分类|回复:0|浏览:565
2019-07-30 10:20

减少页面加载时间的方法:
1.压缩html css js等文件
2.减少DNS解析
3.减少DOM元素,对于相关操作可以缓存节点
4.改变页面元素样式时尽量操作className,而不是频繁使用xxx.style.(其实还有很多这种DOM修改操作的细节比如opacity替代visibility ,多个DOM统一操作(虽然V8会有缓存优化) ,先将DOM离线,即display:none;修改后显示 ,不要把DOM放在已给循环中作为循环变量 ,不要使用table )
5.避免不必要的重定向
6.合并js css及图片,减少请求数量
7.使用CDN
8.合理利用缓存
9…

关于CDN?
https://zhuanlan.zhihu.com/p/39028766

..

阅读全文»分类:默认分类|回复:0|浏览:357
2019-07-29 09:03

拿到PRD的瞬间,你在想什么?
设计一个产品的前提是要先了解这个产品想要解决的是用户什么痛点,核心功能是什么,价值点在哪里等等。






整体需求概览,产品画布



先整体浏览下需求,对需求有个整体的认知,知道大概的框架,功能点是什么












思维导图,梳理需求





用白纸或XMIND将功能点梳理出来,最好是按照用一级菜单/二级菜单/三级菜单的模式,把整体的流程,页面的逻辑都整理出来


这是一个消化过程,从PRD一堆文字,消化成,自己可以理解图画


这一步当中,要把逻辑理顺,不懂的就问,千万不要用猜的,猜一猜,无 ..

阅读全文»分类:默认分类|回复:0|浏览:359
2019-07-26 09:22

1 状态共享
随着组件的细化,就会遇到多组件状态共享的情况,Vuex当然可以解决这类问题,不过就像Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是vue.js 2.6新增加的Observable API ,通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。


如下这个例子,我们将在组件外创建一个store,然后在App.vue组件里面使用store.js提供的store和mutation方法,同理其它组件也可以这样使用,从而实现多个组件共享数据状态。


首先创建一个store.js,包含一个store和一个mutations,分别 ..

阅读全文»分类:默认分类|回复:0|浏览:419
2019-07-25 09:25

嗨,本周Nathan 与大家分享下一些在UX 工作中,常会听到的一些衡量指标专有名词,有些或许是你常常听到但不太确定的,有些则可能是你所在的领域或项目比较少讨论的。
虽然在大多数的公司中,与中小型的设计团队,采用快速定性的研究,可能是比较符合CP 值的方式。但当产品、用户甚至团队具有一定规模时,关于量化指标的重要性,在2019 年的今天想必已经不需要再重复叙述。
不太一样或是常被误会的是,对于设计师来说,多数在工作中使用的量化衡量指标,其实大多是围绕设计工作的显性部分,也就是可用性(Usability) 上,而可用性工作其实只 ..

阅读全文»分类:默认分类|回复:0|浏览:402
2019-07-24 09:22

一、文字样式中阶

字体样式
代码格式:
font: 文字粗细 大小/行高 字体名称;
例子:font: bold 200px/400px "微软雅黑";
2.字体阴影
代码格式:
text-shadow:x y r color;
注:x是为负数则阴影向左,整数向右,同理y正数向上,负数向下,r代表阴影模糊程度,数值月大则越模糊,其单位都是px,color为文字颜色。
例子:text-shadow: 10px 10px 0px red;
提示:允许一段文字有多层阴影,多层之间用逗号隔开,每一层内,不同参数用空格隔开。

凹凸字体 阴影巧用
原理:通过背景颜色以及不同于背景颜色的阴影打造凹凸字体效果 ..

阅读全文»分类:默认分类|回复:0|浏览:418
2019-07-23 09:08

实现思路有两个:



1、用6个input,输入一个数字后将focus给下一个输入框。

2、用一个input和6个span,input隐藏,用span显示。



现在大部分都是使用的第二种方法。(当然,如果你能说服产品也可以只用一个普通的input输入框,就什么都不用考虑了)



两种方案遇到的坑,以及优缺点,如下:



方案一:6个input。



主要就是用js切换focus,在安卓是相当流畅的,但是在ios会严重卡顿,简直逼死强迫症。



HTML:

<div class="divYZM">
<!-- onpropertychange是为了避免在ios中oninput方法不被触发 -- ..

阅读全文»分类:默认分类|回复:0|浏览:459
2019-07-22 13:15

for(var i = 0; i < 5; i++) {
console.log(i)
}

这样for循环可打印出 0 - 4的结果

for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i)
}, i * 1000)
}

但这样只能间隔一秒打印出5个5

原因在于 setTimeout是异步,等for循环全部完成 i 后才会执行

解决方法可以将 for循环中的var 变成 let

let只作用于for循环内,这样每次付给setTimeout的值都是当前值

或者在setTimeout外再包一层function

for(var i = 0; i < 5; i++) {
(function(i) {setTimeout(function() {
console.log(i)
}, i * 1000)})(i ..

阅读全文»分类:默认分类|回复:0|浏览:412
2019-07-19 09:05

按钮,无论是在 Web 还是 App 上都被广泛地使用,而很少有设计师会注意到按钮当中的细节,导致在设计过程中出现一些低级的错误,使得用户在完成任务的过程中产生阻碍,无法顺利达成目的。


在许多优秀的产品中,关于按钮的设计已经有了一套相应的规范去执行。作为设计师,应该总结这些规范,并产出一套适用于自家产品的设计规则。这也是我写「按钮规范」系列文章的目的。


今天主要先与各位聊聊「取消按钮」的设计思路。


关于「取消」,大多数人对其理解还停留在 PC 端,认为「取消」的目的就是让用户停止操作上的流程。但时至今日, ..

阅读全文»分类:默认分类|回复:0|浏览:484
2019-07-18 08:59

在过去两个月,从国外的 Google I/O、Apple WWDC、Facebook 开发者大会,到国内的飞聊、QQ改版、豆瓣FM 6.0,可以看到很多关于交互设计上的趋势。
同时,我从日常的产品体验中,整理了一些思考内容,以下是对 2020 年交互设计趋势的展望。


模态展示

在 iOS 13 中,模态面板采用了新的卡片样式,它占据了屏幕 90% 的面积。模态面板拉起时,原有的页面会有一个纵深效果,以灰色状态显示,防止用户和它们发生交互。模态面板可以通过滑动操作下拉关闭,适用于单手操作,专为大屏服务。

在系统邮件、日历、通讯录、Apple Music、信息 Animo ..

阅读全文»分类:默认分类|回复:0|浏览:433

Powered by phpwind v8.7 Certificate Copyright Time now is:03-29 18:02
©2005-2016 QTCN开发网 版权所有 Gzip disabled