首页

UI设计师作品集你准备好了吗

蓝蓝设计的小编

整理了一份UI设计师怎么整理自己的作品集,希望能给正在准备作品集的你一点小小的帮助,大家互相进步^_^


mongoose中save无法获取回调函数值的解决方法

seo达人

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

mongoose保存数据:

const save = new Model(data).save()
    
  • 1

如果成功,则可以获取到保存在数据库的值,但是如果保存数据失败,则会抛出异常,好在save可以传入一个回调函数,用法如下:

const save = new Model(data).save((err, result)=>{ if(err){ // 保存失败执行的操作
    }else { // 保存成功执行的操作
    }

})
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

我们希望根据结果获取到不同的值,但是此时save返回的是undefined,因为save中的回调函数是一个异步操作

解决方法:

使用try catch:

try{
    const save = await new Model(data).save();
    // 保存成功执行的操作 return ... }catch(err){
    // 保存失败执行的操作 return ... }
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

注意:在async函数中才可以这么使用,因为await只能用在async函数中

示例:(注册功能)

user.model.js

const mongoose  = require("mongoose"); const port      = process.env.PORT || "8899"; const UserSchema = mongoose.Schema({
    userName: {
        type: String,
        unique: true },
    passWord: String,
    createTime: {
        type: Date, default: Date.now()
    },
    updateTime: {
        type: Date, default: Date.now()
    }
}, {
    timestamps: {
        createAt: "createTime",
        updateTime: "updateTime" }
});

module.exports = mongoose.model("USER", UserSchema);
    
  • 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

service.js

const User = require("./user.model);
class User{
    async login(user){
            try{
                const result = await new User(user).save();
                // 其他操作,如发送注册邮件
                return { success: true }
            }catch(err){
                return { success: false, message: "用户名或密码错误" }
            }
   }
}
moduel.exports = new User();
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

controller.js

const server = require("./server); async login(){ // 首先获取请求中携带的用户信息 const result = await server.login(user);
    if(result.success){ // 注册成功执行的操作 }else { // 注册失败执行的操作 }
}
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

列表的时间排序,应该正序还是倒序?

资深UI设计者

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

列表时间排序到底应该正序还是倒序?哪种体验会更好?各大知名产品都是如何做的?

背景

前阵子正好做到了一个类似“申请通知“的功能,因为涉及到列表,所以要考虑列表的排序规则,那么问题来了,要用哪种排序规则(拼音、时间…)?

当然,这里肯定会用时间排序,那么按照时间的正序(新的通知在下面)还是倒序(新的通知在上面)?以下将进行一个系统的分析,列表时间排序到底要正序还是倒序?

产品分析

我们可以先看下市场上的产品都是怎么做的,在这里我将这些产品分成了两类(可能不全,这里不谈评论页面哈):

1. 消息通知页面

一般由产品推给用户,可能是产品运营通知,也可能是其他用户发生了一些操作等。

看了很多产品的例子,这里就不全部列出了,几乎大部分的通知列表都是按照时间倒序,只有网易马上办和拼多多是正序。

2.内容信息流页面

内容更新相对比较频繁:

几乎所有新闻资讯类都是这种类型的列表,采用的都是时间倒序。

微信和钉钉逻辑分析

1.微信

提及微信大家对微信新版本的一大改动肯定非常熟悉了,那就是订阅号的变化,微信把用户关注的所有订阅号的新消息拿出来放到一个页面——订阅号消息,它的排序是倒序,而其他具体的订阅号内部历史消息是正序,另外新的好友申请消息页面是倒序。

那么微信的这些模块为什么排序规则不一样呢?背后的原因是什么呢?我个人认为有几点原因:

  1. 首先新的订阅号类似新闻资讯一样(可能微信就是想把它打造成这样,这点我们不展开),所以按照倒序排列也讲得通;
  2. 具体订阅号中按照正序排列是因为页面下面有操作,可以进行文字的输入,所以这个页面很像聊天页面,按照正序也有道理;
  3. 腾讯新闻这个功能模块的排序有点不太理解,明明是新闻类,排序是按照正序,和订阅号很像,这里我也分析了两点原因:

1)毕竟微信主体功能是IM,那么其他的模块都是附属,不是主要功能,可能腾讯新闻的根本目的就是为了给腾讯新闻APP导流。

2)将其他的模块做成订阅号模式在产品层面一致性和复用性很高,既保证了体验一致性,又减少了开发成本。

综上所述,微信内部列表排序规则是根据具体场景和功能决定的,其实都可以讲得通,不过单纯就某些模块的体验来讲却是有些勉强。感兴趣的话,大家可以看看支付宝,它的内部所有的列表高度一致,都是按照倒序,包括它的生活号(和微信的订阅号很像),这里就不讲了。

2.钉钉

钉钉作为一款企业级IM产品,大家也许并不陌生,它的功能可谓相当复杂,涵盖了很多模块,已然做成了一个大的平台生态系统,那么是不是因为功能的复杂导致了内部一些列表的排序规则各不相同呢?

说实话我是有些懵的,比如其他大部分产品的通知都是倒序排列,而钉钉就是正序,那如果说钉钉有自己的产品规则和逻辑的话,为啥有些类似通知的页面排序又是倒序?

这个实在讲不通,而且场景和功能层面这些列表其实还是比较相近的,那唯一能解释的可能就是互联网界经常说的——“这些模块不是一个团队做的”。

思考

综上,大家可以看到,基本大部分产品都是采用时间倒序,也就是的内容在上面,也有小部分采用正序,那么为什么会按照这样的逻辑呢?我进行了几点分析猜测:

  1. 用户视觉流习惯从上到下,产品希望用户能及时关注新的内容,所以按照正序
  2. 列表可能有一些操作,如下拉刷新、筛选,的内容靠近操作会更自然
  3. 列表中若有回复的功能(微信公众号),更类似IM聊天页面,所以正序新的内容在下,比较合理
  4. 产品内部体验一致性,大部分产品内部只采用了一种排序规则(除钉钉和微信新公众号),这让用户在使用同一款产品时,体验是一致的,有预期的。
  5. 技术实现,技术实现的框架可能产品内部采用了同一套方案,所以如果是正序都是正序,是倒序都是倒序。

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

 

一名优秀的UI设计师应该具备哪些条件?

蓝蓝设计的小编

想做好一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的开发过程,因为目前国内的软件行业还不能对UI设计形成应有的重视度,所以对我们的要求就更高了,你要能作出夺人眼球的东西,还要站在用户的角度充分了解他们的需求和使用习惯,因为一般的软件公司的UI设计师只有一个或者几个也都是孤军奋战,而且经常会碰见没有经验的TEAM LEADER,不懂得协调你和其他团队成员的工作,所以你还要与团队成员充分沟通,来获得设计中所需要的基本信息,要有耐心有好脾气,做界面设计的工具一般有PS、AI、FH、CD、c4d、(至少一个),Dearweaver、FLASH HEML;编程方面最好能跟程序员同步,懂一点ASP JSP等软件开发语言、还有开发坏境、服务器种类;还要耐得住寂寞,在漫长的项目开发过程中,你的工作可能只是前期,到了后面可能会有很多的空间时间,用来学习充电是不错的选择。

「UI设计」零基础小白如何入门UI设计

蓝蓝设计的小编

嗯,首先呢,这是我从零基础到现在老司机写的一篇小经验文章,也是我首次发表文章,废话不多说,进入主题。

目前有太多太多的同学被UI这个行业给吸引了过来,都纷纷进军UI了。但是选择了进军UI,当然就要开始学习了,我相信有很多同学挺迷茫的,迷茫是在于选择培训班去培训呢,还是自己在家自学。在这里我个人建议,如果经济不差的话,你可以去选择一家较好的培训机构学习,这样也比较有可信度些,如果你实在是几千块钱都没有,分期几百块钱一个月都有压力的话,那么我建议你还是自学好了。(老司机:为自己学习千万不要想着省几块钱)

重复与突变在产品设计中的应用

资深UI设计者

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

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。

一、设计中的重复是什么?

在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐、统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感。

排版的四大原则:对比、对齐、亲密性、重复,重复在排版中也占据了一席之地,可见它在设计中分量是不可小觑的。

格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同运动,格式塔原理中的对称性就是重复的一种表现方式;格式塔原理中的相似性算是重复中自带的一种突变。

1. 重复

重复是设计中最基本的形式。在同一设计中,相同的形象出现过两次或两次以上就形成了重复。

在产品设计中重复的元素有大小、形状、配色、间距、组件、圆角值;在交互层面重复的元素有位移(方向)、旋转、缩放、不透明度、相同属性交互要一致。

在产品设计的前期设计师需要输出界面设计,为了方便下游前端工程师更好的规范和适配,也要保证产品后期上线产品视觉稿的高度还原,这就要求设计师输出一整套产品的视觉和交互规范。

重复配色

在 app store 的页面中使用了相同的颜色进行提醒,方便用户快速查找和点击,整体的蓝色又给人理性的感觉,看到付费app 的好评数可以看出是因为产品好才推荐你进行理性消费。

重复大小

INS 主页第一排头像相同大小进行重复排列,与内容的人物头像有大小对比之分;INS 搜索页采用了九宫格布局,为了重复中有变化它把右边的四个方格合并成一个内容展示区域,推荐好的热门视频。

重复间距

Airbnb 界面中的间距非常规范,首页大体采用了谷歌里面的8px 原则,每个间距之间的规范很多1:2的比例关系。好的比例规范会给界面带来简洁大气的感觉。

重复组件

(如图标注)INS 界面中用了统一组件,相同的圆角和高度规范又给画面增加了统一性和连贯性。

2. 突变

在相同的形象重复出现时,尝试去改变某一形象的形状、颜色、大小、不透明度等来丰富画面时我们称之为突变。

格式塔原理中的相似性也是重复中突变的一种形式。

在产品设计中我们运用的突变的目的很简单就是为了让其更加突出,多用于区分当前状态、选中状态和默认状态。

banner轮播

banner轮播图上面的提示状态会根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。

导航栏分类

导航栏分类上面的提示状态也是根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。

按钮

在登录注册页面中,我们会通过大的色块凸显登录按钮,引导用户快速登录进入到 app 里面。也减少了用户的思考过程,符合大脑的惰性。

但是在很多 windows系统中,卸载软件时会跟你玩文字游戏,会用非、否、不是等诱导你作出错误的判断。

feed流

feed流是产品中持续更新并呈现给用户内容的信息流。feed流在产品展现形式有列表、瀑布流、卡片形式。

站酷首页 feed流里面会把内容分为作品和文章,之前版本中的作品和文章的样式是一样的,新版本中重点是推作品,当文章出现时通过改变文章的排版进行区分,重复里面又带有变化。

3. 节奏感

多少元素排列可以形成节奏感,一般来说是3个或3个以上,两个你不能说是节奏感只能说它是重复。当3个或3个以上整齐的排列就会形成一种节奏感。

左右滑动

(如图来自uistar)界面中三个书籍整齐的排列在一起,可以通过左右滑动来获取更多的书籍。在使用左右滑动效果时,应考虑元素的数量,尽量不要超过10个以上。

列表页

(如图来自uistar)列表页面整齐的排列在一起有一定的节奏感,通过改变 icon 的配色来丰富画面。

4. 韵律

元素在排列的过程中有形状、颜色、大小、不透明度等有规律的变化就形成了一种韵律感。在动效上主要还是通过位移、放大缩小、旋转、不透明等变化来制作界面动画。

最美有物

最美有物app 的画报界面中,通过改变每个界面的大小比例有序的排列在一起,通过上下滑动可以快速浏览标题,进行查找翻阅,整个过程很流畅,整个界面有流动性和韵律感。

图表

图表在设计的时候通过不同颜色来区分不同的时间段,线条错落有致的排列增加了界面的韵律感。

配色

△ 来自Prakhar Neel Sharma和crisssamson

这两个作品都是通过色彩按照红橙黄绿青蓝紫规律运用到界面中的背景和列表中,增加了画面的丰富感和韵律感。

重复在动效中如何运用才会有韵律感?

界面动效中主要分成当前状态动效变化和转场动效变化,界面中的元素a1对b1、a2对b2、a3对b3信息对等,能帮助界面做出很有韵律感的动效。

二、总结

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。

重复、突变、节奏感、韵律几种不同的方式都是存在于产品当中的,几种不同的美感可以同时存在的,只不过它适应不同人群的审美能力,审美能力高一点的更喜欢一些变化,审美能力相对基础更喜欢简单的重复。

所以画面中不断出现同样的元素这叫重复,而在很多重复里面突然出现一个变化这叫突变,相同元素整齐的排列在一起这叫节奏感,而这些元素在排列的过程中有形状、颜色、大小、不透明度等变化就形成了一种韵律感。

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

HTML-图片标签img

seo达人

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

图片标签

图片标签<img src=路径属性 alt:加载失败后显示的文本  width:指定图片宽度  height:指定图片高度>  单位: px

路径属性

绝对路径
        E:\ruanjian\软件\环境\images
相对路径:相对于主文件位置的路径
        引用文件方式:

        同级:直接写文件名.后缀名
        上级:../文件名.后缀名   ../返回上一级文件夹
        下级:文件夹/文件名.后缀名


    
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <h1>这是一个图片</h1>
  9. <!-- 图片标签<img src=路径属性 alt:加载失败后显示的文本 width:指定图片宽度 height:指定图片高度 单位:px>
  10. 路径属性:
  11. 绝对路径
  12. E:\ruanjian\软件\环境\images
  13. 相对路径:相对于主文件位置的路径
  14. 同级:直接写文件名.后缀名
  15. 上级:../文件名.后缀名 ../返回上一级文件夹
  16. 下级:文件夹/文件名.后缀名
  17. -->
  18. <img src="../img/ad.jpg" alt="加载中" width="1000px" height="500px">
  19. <img src="../img/1.jpg" alt="加载中"><br><br><br><br><br><br><br><br><br><br><br>
  20. <img src="../footer.jpg" ><br>
  21. </body>
  22. </html>

<br>标签:换行   <img>标签为内联标签所以不换行,所以添加<br>标签换行。

页面是这样的:

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


2018年Behance 上最值得关注的20个设计趋势...

博博

2018年Behance 上最值得关注的20个设计趋势...


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


对于2018年的设计趋势,众说纷纭。作为大型设计社区的behance终于按耐不住,多名设计师预测了2018年20大设计趋势,下面就和兴元君一起看看到底是哪些吧!

1 未来感

无论何时,我们都对未来充满了幻想与期待。更先进的显示技术、更的出行方式,那些若梦幻离的景象总是令人兴奋,未来感的塑造总会唤起人们心中对科技的无尽渴望。

2018年Behance 上最值得关注的20个设计趋势...

2 简约舒适

少即是多,这是亘古不变的真理。简约意味着简洁,以简约主义的白色为主,优化功能,强调空间感。

2018年Behance 上最值得关注的20个设计趋势...

3 深度感

为传统的平面元素增添厚度,是 2018 年的设计大势。一点阴影,赋予了元素另一个维度,为交互体验打开了一扇窗。空间造就了深度,深度成就了空间。

2018年Behance 上最值得关注的20个设计趋势...

4 响应式图标

在未来,越来越多的面向移动体验,而日渐修长的屏幕让纵横之别不容忽视。无论哪种情况,图标都必须适应新的环境。因此,响应式图标设计对设计师而言至关重要。

2018年Behance 上最值得关注的20个设计趋势...

5 插画设计

任时光奔腾如梭,但历史总是惊人相似。太长时间的同质化,让突出个性的呼声愈喊愈震。这些年尚未发力的插画,在今年一定会得到大家的关注。

2018年Behance 上最值得关注的20个设计趋势...

6 动效设计

雨木林风,荷伴涟漪。我们无时无刻都在被运动吸引,技术的不断革新,为动效的使用铺平了道路,越来越多的产品也随之使用动效。大势所趋,永不停息!

7 微交互

上下拨动,左右平移;点按有悦,长停则变。 优化体验,塑造品牌,微交互无处不在

2018年Behance 上最值得关注的20个设计趋势...

08 演示动效

这种动效只供展示,引导用户使用。特别是在启动页、空状态,演示动效能极大的激发用户使用兴趣,帮助用户完成特定操作。

2018年Behance 上最值得关注的20个设计趋势...

9 明亮渐变

扁平化大行其道多年,多少让人有些审美疲劳,渐变得以重新回归。不同以往的是,鲜艳、明亮、酷炫,是当下渐变的特点。

2018年Behance 上最值得关注的20个设计趋势...

10 三维效果

3D 始终是我们不容忽视的力量,蛰伏多年,一直在寻找爆发的良机。且在这多年的隐忍中,聚集了越来越多的力量,让本就可怕至极的力量变的愈加摧枯拉朽。

2018 年,它不一定会发力,可一旦契机出现,就会势不可挡。

11 金属质感

现实和虚拟的界限愈加模糊,较为容易 “欺骗” 视觉的金属质感重新博得设计师关注。

2018年Behance 上最值得关注的20个设计趋势...

12 上个时代的彩色图案

也许是怀旧情怀的需要,也许是那年的少年已肩扛重担。那些年在玩具和衣着上图案重新焕发出新的活力。

2018年Behance 上最值得关注的20个设计趋势...

13 傻大粗黑

这一点毋庸置疑,在较长的一段时间里它都不会被取代。更令人欣慰的是,无衬线字体也开始展露头脚,让字体的选择进入了一个新世界。

2018年Behance 上最值得关注的20个设计趋势...

14 字体设计

在一切归于冷静之后,那些精雕细琢,能彰显差异性的东西重回王者之地,字体设计也得以荣膺桂冠。

2018年Behance 上最值得关注的20个设计趋势...

15 粒子背景

沉浸体验,是所有设计师的不懈追求。不喧宾夺主突出主体,不太阿倒持取悦用户,正是粒子背景的魅力所在。

16 拆分页面

一分为二,各司其职;化繁为简,相辅相成。划分页面空间,重新定义区域,图像与文字分离,构建信息结构。信息越是爆炸,越需要化繁为简

2018年Behance 上最值得关注的20个设计趋势...

17 艳,更艳

从性冷淡到大胆用色,恍然间抛开了对过度的恐惧。越是过度,愈是讨喜,任何大胆的设计都会被称赞和鼓励。

2018年Behance 上最值得关注的20个设计趋势...

18 单色图标

色彩纷呈,渐幻若璃;界面之中,唯我独素。色彩艳丽的今天,唯有图标坚守其道。不跟风任吹,不随波逐流,这种坚持换来了舒适与愉悦

2018年Behance 上最值得关注的20个设计趋势...

19 混合图标

线与面合,白与艳合;合则一派,不合则灭。在不同风格争相出现的今天,也是一种不错的尝试。

2018年Behance 上最值得关注的20个设计趋势...

20 新造型主义

作为新造型主义的奠基人,皮特·蒙德里安曾这样说过:对自由和平衡(和谐)的渴望是人类天性。通过理想的绘画形式将宇宙真理物质化、几何化

简化,井然有序,色面完美。率真的纯粹原色相互对立与平衡,凭借两种否定,黑与白分割构图。

2018年Behance 上最值得关注的20个设计趋势...

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


美团点评 UED 总监:突破设计边界,互联网变革幸存之道

资深UI设计者


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

美团点评 UED 总监崔颖韧(下文简称崔校长)认为:曾经设计师仅靠一技之长就能在行业内生存,但互联网行业瞬息万变,如今,人工智能的设计水平都可以达到设计助理的级别。在互联网变革下,设计师只有不设限,扩展自己的价值空间,才能在这场持久战中成为最后的赢家。

一、设计师的现状

1. 设计师已经开始被人工智能取代

2018年紧跟2017,是人工智能重点发力的一年,关于「人工智能会完全取代设计师」的话语层出不穷,很多从业者倍感危机。

崔校长表示,AI 时代是真的来了,设计师也开始被人工智能所取代。

现在,很多负责垂直业务的运营设计师已经参与到智能体系建设中,建设素材库、设定配色、排版规则和标准,帮助训练 AI 等。

甚至美团点评也开发了可以做 Banner 的智能设计系统,不光可以做 Banner,今年内还可以自动生成活动主页和简单 H5 页面,而且是多品类覆盖,包括餐饮、休娱、丽人等。

相应的,设计部门原先计划申请的运营设计师人数就减少,甚至不新增了。

尽管 AI 的强势冲击很吓人,但是设计师工作中,例如设计师对目标受众的理解,现阶段是没有机器可以替代的,顶尖设计师的专业技能在冲击之下,反而会更加突出、显眼。

2. 国内设计师普遍话语权不高

在国外,很多优秀的公司都是设计驱动,而国内设计师普遍话语权不高。

针对这个现象,崔校长认为,实际上国外很多「设计驱动」的公司,本质上是 CEO 驱动,有一个重视用户体验的 CEO,那么全公司做事都会重视用户体验。实质上是 CEO 在驱动,设计仅仅是执行。

而在国内,行业环境没有那么舒服,特别是偏传统的公司,高管层对用户体验的价值认知非常弱,所以才会有设计师话语权低的问题。

如果要解决这个「历史难题」:

  • 首先,设计团队本身要对用户体验有清晰正确的认识,不能唯设计、唯用户体验论;
  • 然后,通过专业手段,既保障了用户体验,又良好的解决了商业问题,

那么一定是可以在业务团队那边赢得认可的。

有了实际案例证明价值,下一步就可以做一些跨团队的用户体验概念普及,去提供相关的认知度。

美团点评是一个高管层很重视用户体验的公司。在美团点评,用户体验部的价值是可以得到足够认可的。

在这样的情况下,大家依然会努力拓展自己的价值空间,会突破边界,比如说交互设计师会做一些用户研究和产品分析相关的事情。

项目产品 Leader 只需提供一个产品目标,而在「战略层、范围层、结构层、框架层、表现层」五个层面的分析研究和输出工作,交互设计师都可以完成,产出一个完整的项目提案报告。

由此可见,设计工作者只要有实际案例证明价值,得到 Leader 的认可,加上持之以恒的拓展自身价值,提高自身话语权不是问题。

3. 对产品设计的认识还停留在图形界面

很多刚工作的设计师摆脱不了专业的束缚,认为设计只是图形的搭建,没有更多思考。

对此,工作经验丰富,且阅人无数的崔校长表示,这是一个普遍现象,也是一个正常的现象。

在社会化精细分工的时代,设计师从专业入手,自然而然地,一开始认知会局限在图形界面上。随着专业级别的提升,会扩大认知范畴,看到界面之外的东西。这是基本规律,没有捷径。

古语说:

不谋全局者,不足谋一域。

设计师应该有意识去突破边界,这是正确的方向。现实中有很多人无法突破瓶颈,往往是拒绝突破边界,思维的局限导致了个人价值的局限。

4. 设计的好坏没有绝对的评判标准

大家都知道,设计是有好坏之分的,但却不一定清楚这个评判好坏的标准。

崔校长认为,设计师没有一个绝对标准来评判好坏的。

在商业团体中,一切资源投入都是为了达成商业目的,所以能帮助达成这个目的的设计就是好设计,这是一个评判标准。而具体的标准,根据团队的商业目的差异,有很大区别。

在商业团体中,用户体验是实现商业目的的一种手段,脱离商业目的,讲纯粹的用户体验就是耍流氓。

只有摆正了这个认识,在职场中就更容易获得成功。

二、设计师的突破

1. 保障用户体验是第一标准

现在,很多人都在倡导,设计规范化、组件化,这种趋势是有利有弊的。

针对这个趋势,崔校长建议,不能唯规范唯组件论。虽然规范化、组件化这类比较基本的设计增效手段,可以明显提升基层效率和基础质量,但是规范和组件只能保障底线,无法拉高设计质量的上限。

比如有的设计师会跟产品说,我们的规范如此,所以只能这么设计,这是错的,规范不是一刀切的标准,保障用户体验才是第一标准。

该用规范组件的时候就用,如果场景上不适用也不能硬用。

2. 用户体验设计,不仅仅要把界面做好看

作为用户体验设计师,要有把界面做美观的能力。

除此之外,崔校长还说:

界面好看是最表层的设计体现,真正的用户体验远不止于此。

《用户体验的要素》所描述的「战略层、范围层、结构层、框架层、表现层」五个要素,要做到都充分、专业、逻辑连贯,最终才能获得一个在线产品的良好用户体验。

在构建一个良好的用户体验时,更重要的是表现层背后的商业体系、产品目标、用户心智模型,对设计依据做充分的研究和挖掘才是根本。

3. 方法论为主导,找灵感

遭遇设计瓶颈时,找灵感也是有技巧的,有一部分设计师,凭空想灵感,这是低效的。

崔校长建议,以方法论为主导,找灵感。

崔校长说:

设计的目的是为了解决问题,应该以理性思维为主导,去定义问题,分析问题,解决问题。如果以 Idea 导向,也就是通过试错来验证有效 Idea,这跟碰运气差不多,效率非常低下。

在美团点评上海用户体验部的设计路径中,总体是以方法论来主导,仅在方案的表现层,会运用头脑风暴和素材搜集的方式帮助激发灵感、发散方案。

4. 注重自身和团队的共同成长

在学习、成长上,每个工作者都更注重自我的成长,这是必然的,设计师也不例外。

但工作究其根本,是自我成长、团队成长、产品成长的结合,优秀的团队一定都是非常注重这三方面成长的,美团点评也是如此。

崔校长说,美团点评有涵盖各个专业的互联网+大学,在设计方面设有设计学院,沉淀了很全很丰富的方法论和案例,同时公司还有复盘文化,大家会从每次的项目实践中,总结经验、获得知识。

崔校长建议,设计师应该尝试「跨界」,个人能在其中飞速成长,这是经验之谈。

校长本人是学计算机专业的,做过产品经理,最后在设计领域深耕。

这样的综合角色帮助他更宏观、更完整地去看产品体验搭建的过程;能够更好的理解上游产品角色到底关心什么,下游开发角色需要什么;能够更好的跟相关角色沟通,并让设计发挥更大的价值。

所以设计师不仅要注重外部学习环境,还要注重自身的跨界、不断拓宽边界,自身和团队共同成长,这对你职业生涯的发展产生不可估量的价值。

5. 优秀的设计团队不能没有管理者

设计不是单打独斗。

一个优秀的团队应该注意哪些问题呢 ?

对团队进步起着关键性作用的管理者应该是怎样的呢?

对此,崔校长认为,优秀的设计团队在团队建设上,要有完善的管理制度、完善的专业体系、扎实的人才梯队,在结果上要有优秀的产品案例。

作为 Leader :

  • 首先,要专业过硬、学习能力强、格局大;
  • 然后,要赋能团队,用你的决策力赋能,给团队判断正确的方向,不走错路;
  • 用专业能力赋能,指导团队提升专业高度;
  • 用协调能力赋能,让团队运作更。

刚刚成为 leader 的同学,可能会不适应与设计师完全不同的工作模式。

对此,崔校长建议,此时你最需要注意的是思维转换。思维转换首先需要明确三个角色,崔校长总结为「三位一体管理模型」,分别是教练、裁判、经理,这三者缺一不可。

  • 在项目过程中,要发挥教练角色,进行专业指导,保障设计输出质量,如果教练角色缺失,设计质量难以提高,设计师成长难。
  • 在评审和决策的时候,要发挥裁判角色,给出明确的结论,承担决策责任,如果裁判角色缺失,容易变成甩锅侠,把自己的责任丢给基层设计师,设计质量容易失控,也会导致设计师压力过大,产生流失。
  • 最后是经理角色,去思考团队建设,去选择团队需要的设计师,对设计师的绩效进行判断,识别出哪些应该重点培养,哪些应该淘汰换血。经理角色缺失会导致吃大锅饭的局面,团队能力止步不前,陷于平庸化。

6. 保持沟通

沟通,在设计师的工作内容中占了不小的比例。

跟团队同事进行合理的沟通,在一定程度上,能提高工作效率,专注设计质量,将更多的时间放在设计本身。

对此,美团点评崔校长很有发言权。

美团点评上海用户体验部现在有100多位设计师,对接的产品经理在500人以上,对接的程序员在1000人以上,而且上下游部门都是分散的。

产品部门和研发部门都是多个的,不像 UED ,只有一个部门统一管理,那么沟通方面确实有很大的难度。

崔校长表示,为了团队沟通更,美团点评内部要求 Leader 跟相关部门的 Leader 建立良好的沟通机制,保障信息通畅;然后,用设计流程规范,来要求设计师跟自己的上下游对接方充分沟通;最后,团队风格上推动设计师走出去,深入上下游讨论和协作,跟进产品讨论会,多到开发位置上确认实现的细节。

崔校长还分享了一个关于沟通的小故事:

在搬了办公区之后,产品的座位离设计师只有一个过道之隔,于是设计师开始有了一些「小烦恼」。产品经理一有问题就随时找设计师讨论,设计师的工作总被打断,却不太好意思拒绝产品。

这是一个比较有趣的现象,说明产品跟设计师之间沟通非常紧密,而且很信任设计师的专业度,能够一起有效地解决问题。

这个场景在团队内部时有发生,这个「烦恼」对设计师而言,可以说是不可避免的。

对此,崔校长建议设计师要做好时间管理,掌握好沟通的时间安排,不能影响了总体的设计效率。

总结

设计不设限,是每一个设计师都应该思考的方向。

只有自己不甘现状,勇敢突破,才能以更高的速度进步,才能在互联网高速发展的现在,甚至未来,成为最后的赢家。

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

前端性能优化之Lazyload

seo达人

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

前端性能优化之Lazyload

@(Mob前端-冬晨)[JavaScript|技术分享|懒加载]


Lazyload 简介

前端工作中,界面和效果正在变得越来越狂拽炫酷,与此同时性能也是不得不提的问题。有些项目,页面长,图片多,内容丰富。像商城页面。如果同步加载时一次性加载完毕,那肯定是要等到花都谢了,loading转的人都崩溃~。今天分享的是Lazyload技术 是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。

一、实现思路

页面较长,屏幕的可视区域有限。 
不设置页面中img标签src属性值或者将其指向同一个占位图。 
图片的实际地址存在img标签自定义的一个属性中,如:“data-url”。 
监听scroll,滚动到某个位置时,动态的将url替换成实际的“data-url”。

二、上代码

  • html部分(简单示意下结构)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lazyload</title> <style type="text/css"> .mob-wrap li{list-style: none;width: 100%;height: 345px;} </style> </head> <body> <ul class="mob-wrap"> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sharesdk-logo.jpg"><p>ShareSDK轻松实现社会化功能</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sms-logo.jpg"><p>短信验证码SDK</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/rec-logo.jpg"><p>MobLink实现Web与App的无缝链接</p> </li> </ul> </body> </html>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

简要流程

Start监听滚动事件距顶部高度<scrollTop么?将url替换成data-urlEndyesno
  • js部分
var aImg = [
  {"src":"http://mob.com/public/images/index/sharesdk-logo.jpg","txt":"ShareSDK轻松实现社会化功能"},
  {"src":"http://mob.com/public/images/index/sms-logo.jpg","txt":"短信验证码SDK"},
  {"src":"http://mob.com/public/images/index/rec-logo.jpg","txt":"MobLink实现Web与App的无缝链接"}
]; var sLi = '';
document.getElementsByClassName("mob-wrap")[0].innerHTML=""; for(let i = 0;i<10;i++){
  sLi = document.createElement("li");
  sLi.innerHTML = `<img class="tamp-img" alt="loading" src="./zwt.gif" data-src="${aImg[i%3].src}"><p>${aImg[i%3].txt}</p>`;
  document.getElementsByClassName("mob-wrap")[0].appendChild(sLi);
};

window.onscroll = function () {
  var bodyScrollHeight =  document.documentElement.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('tamp-img');
  for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度 if (imgHeight < windowHeight + bodyScrollHeight - 340) { imgs[i].src = imgs[i].getAttribute('data-src'); imgs[i].className = imgs[i].className.replace('tamp-img','');
    }
  }
};
    
  • 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




谢谢观看,搞定收工0.0~~~这样草草了事总是不好的

三、再优化

不做任何处理直接监听scroll必然导致在滚动鼠标滚轮的时候,过于频繁的触发处理函数。 
如果刚巧在处理函数中有大量的操作dom等消耗性能的行为,引发大量操作,导致页面变卡变慢, 
甚至浏览器崩溃无响应。 
处理这种问题的思路是节流和防抖。 
节流函数的概念有一个很形象的比喻:在接咖啡的时候,按了一次按钮会出咖啡, 
紧跟着再按几次按钮接到的还是那一杯咖啡,相当于后面几次按的没有起作用。


常规的节流在这里就不多说了,下面介绍的是一种每隔least时间内至少执行一次的节流函数。

//节流函数 _throttle = (fn, delay, least) => { var timeout = null,
  startTime = new Date();
    fn(); return function() { var curTime = new Date();
    clearTimeout(timeout); if(curTime - startTime >= least) {
        fn();
        startTime = curTime;
    }else {
        timeout = setTimeout(fn, delay);
    }
    }
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

使用节流函数

function compare () { var bodyScrollHeight =  document.documentElement.scrollTop;// body滚动高度 console.log(bodyScrollHeight+"替换src方法") var windowHeight = window.innerHeight;// 视窗高度 var imgs = document.getElementsByClassName('tamp-img'); for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度  if (imgHeight < windowHeight + bodyScrollHeight - 340) {
       imgs[i].src = imgs[i].getAttribute('data-src');
       imgs[i].className = imgs[i].className.replace('tamp-img','');
    }
  }
}
window.onscroll = _throttle(compare, 350,600);
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

滚动时间least长于600,调用compare,否则延迟350ms执行。 
这样相对于直接onscroll性能得到更进一步提升,在功能上也没有什么问题。 
不同的业务场景调整一下delay和least就可以。


结语:历史潮流浩浩荡荡,前端技术的发展也是日新月异。 
不断通过一个个小的技术点深入探究,以加深自己对js这门语言的理解。 
温故知新,回顾旧的内容,学习新的内容和特性,更好的适应工作中的需求。

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



日历

链接

个人资料

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

存档