首页

vue中引用图片

前端达人

一、template中引用图片

1. 直接用

<template>
    <img src="@/assets/images/img.png">
    <img src="../../../assets/images//img.png">
<template/> 
  • 1
  • 2
  • 3
  • 4

2. import引入

<template>
    <img :src="imgUrl">
<template/>
<script>
    import imgUrl from '@/assets/images/img.png'
    export default {
        data () {
            return {
                imgUrl: imgUrl
            }
        }
    }
</script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

二、script中引用图片

同上 一、2import引入

三、style中引用图片

  1. 正常来讲可以直接用
.test1 {
    background-image: url(../../../../assets/images/img.png)
}
.test2 {
    background-image: url(@/assets/images/img.png);
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. 但是在scss方式中不可以直接用
<style scoped lang="scss">
$img: "../../assets/images/img.png";
.test {
    background-image: url('#{$img}');
}

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

苹果和三星,哪家设计强?

seo达人

图片

a

字体 

图片

第一个就是字体,大家都知道,设计其实就是形色字构质,字体是设计中非常重要的因素。2014年三星委托了一家名为 Sharp Type 的字体制造商来设计了旗下产品字体。这款字体就是 Samsung Sharp Sans,今天我们看见的字体都是这款字体。

 

Samsung Sharp Sans

图片

三星这款字体是一个几何感很强,接近完美的圆形O和简约设计感强的小写字体,特别是字母a设计的脱颖而出。

图片

三星这款字体除了用在移动端,还包括电子业、生物技术各个行业,同时还考虑了线下的印刷需要,扩展了拉丁字体系列。

图片

在首尔的街头上,物理交通工具上,这款字体都很清晰美观,和整个城市的时尚结合在了一起。图片字体不仅仅是一个字体,同时还是一个沟通工具。三星这款字体不仅用在数字广告,还包括印刷上,这个字体承载了三星对于未来的突破。三星不再是只有产品线,而是成为时尚生活品牌。图片
无论一线大品牌还是国货新潮流,都靠一系列创新商品,在这波浪潮中占据一席之地。三星 Sharp Sans 在海报上的运用,高级且现代,同时基于全球化最大的中欧俄罗斯是智能手机增长最快的,三星也单独设计了俄罗斯版本字体。
图片
在网页设计中运用,也考虑俄罗斯本土市场行情。可以看出作为一家全球的跨国公司,对于各个体验极致的考虑。Samsung One
图片

在移动端,三星使用的是 Samsung One 字体,它也是一个非衬线字体,相对于传统的衬线字体,这款字体设计更加具有人性化。

图片

苹果和谷歌早已推出了自己的字体,三星也推出了自己的通用字体,Samsung One 由三星和 Brody Associate 联手打造。超过400种语言,以及超过25000个字符,成为一套全球性的字体。从手机到电视,从笔记本电脑到微波炉,所有的三星产品都将用上这套字体。它也是未来三星视觉语言的核心。图片
Samsung One 字体设计语言有5个关键词:人文主义,易区分,通用性,专业性,清晰可扩展。图片
人文主义:笔画自然就像手写一样变化,字体具有动态角度的正方形曲线,有很大想象空间。图片
字没有的左右空间都很窄,所以有效空间非常好。图片
易区分:这个不用解释,字体大小写符号的区分。

图片

通用性:在全球各种语言环境下要足够通用。图片
专业性:就是每个笔画的设计都需要经得起考究。图片清晰可扩展:各种场景的拓展性这块需要能适用。图片
三星 One 这款字体,让整体三星设计语言在多端使用时候无割裂,设计语言的统一性有助于用户减少陌生感,提升使用效率和交互体验。
苹果 San Francisco 字体

图片

苹果在 iOS10 后更改了系统字体 Helvetica Neue 为 San Francisco,优化字体的目的是让字体保证清晰度和易读性,新的字体不管缩放如何,无论电脑上还是手表上,都能很清晰展示内容。这个字体也得到了一致的好评。
图片
Helvetica Neue 字体之前有一些设计很受诟病的地方,比如时间的冒号不居中,理想状态应该是居中,识别性和平衡感更好。图片
Helvetica Neue 之前的6和9在缩小时候容易和8混淆,但是新的 San Francisco 显示更清晰,也不容易混淆。
但是不可否认 Helvetica Neue 是这个时代最伟大的字体,因为他不止是苹果设备可以使用,在其它的场景都可以使用。也是第一个给系统设计字体的引领者,包括后面的谷歌和三星都陆续为自己的产品设计字体。

苹果和三星对于字体的设计,你更喜欢那个呢?

 

版式 

图片
三星整体的版式采用的左图右文或者右图左文,这样的设计能让用户更加关注内容,阅读也比较符合从左到右的习惯。图片这样的版式结构在全球官网设计都是类似,和苹果的上下排版不同。版式字体上也是通过字重来凸显视觉层级。图片
在电视页面中,采用的文字居中的方式,和苹果那种沉浸式大图全然不同。整体三星PC上设计略显沉迷和安静。

图片

相比如苹果大胆的设计,三星在动态设计上官网并没有体现太多,除了一个活动广告弹窗是一个动态的盒子打开。在这方面和苹果还是有点不足。
图片
图片

这两张是三星和苹果十年前的设计,从这个图中就可以看出两家设计水平差异。苹果的设计和广告语今天看起来也还不错,但是三星看起来就会觉得有些粗糙,可能10年前审美也不一样。

 

图片 

图片
图片

苹果的图片更加强调产品的实用性,以突出产品本身功能和价值为主。

图片
苹果会结合产品的特点,重点体现产品,其次生活场景。图片三星的产品图片,色调都是以生活化,贴近生活为主,无论手机还是电器。图片
注重生活化,接地气。
图片
图片

苹果的图片则不一样,和摄影师合作,每一个图片都是一个摄影作品、一个伟大艺术创作,苹果手机可以拍大片、可以拍电影等等。体现出苹果产品无与伦比的优秀,虽然他那些样品,我怎么也拍不出来。

 

最后 

图片
最后,无论是苹果还是三星,都是伟大的公司,产品服务的人群不同。苹果主要是移动端数码产品,三星覆盖全品类,两个公司用户人群不同,决定设计风格和主张不同,我们要学会去学习这些巨头设计上可取之处。随着当今智能手机水平不断提升,包括我们的华为,未来差距只会越来越小。但是随着用户审美和经济水平提升,大家对于品牌苛刻度更高,希望我这篇研究对大家有些帮助。
但是从我个人而言,更喜欢苹果,也是苹果的忠实粉丝。你呢?更喜欢哪个品牌,欢迎评论中留言哦。

 

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》苹果和三星,哪家设计强?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



案例锦囊|设计如何为用户「节省时间」?

seo达人



1. 有效的信息抓取 

案例 1  :钉钉的“代办事项”设置功能,可以自动抓取到语句中的时间信息,自动帮助用户设置好时间,减少用户的操作时长:

图片

案例 2  :在微信中可以对图片中的文字进行识别提取,手指在识别出来的文字上滑动就能够选中,可以直接全选、复制和转发:

图片

案例 3  :不同产品之间也可以共享数据。咸鱼和淘宝订单数据打通,在闲鱼平台上发布产品时,会看到系统给出的用户曾在淘宝买过的商品,以及卖出这些商品的预估价格,便于用户直接拍卖:

图片

  案例 4  :支付宝拍照添加银行卡可以使用拍照功能,由系统识别银行卡号和开户行,减少用户的操作时长:

图片

 

2. 避免重复阅读和操作 

案例 1  :爱奇艺在剧集片头处,都会弹出提示,选择“跳过片头”,即可设置该剧跳过片头:

图片

案例 2  :微信的朋友圈在退出后再次进入时,会在内容流中间出现一个“跳到还没看的位置”,帮助用户快速定位之前离开的位置,不必阅读重复内容:

图片

案例 3  :在微信群聊天记录中,如果有太多条内容未读,会在右上角标注出未读数据,点击之后即可从未读的地方开始浏览:

图片

 

3. 减少错误的可能性

案例 1  :在恶劣天气,美团先让骑手接单,再让商家接单,可以避免无人配送的情况:

图片

案例 2  :高德地图 App 会预估并提示行驶路程何时会拥堵,让用户提前有心理准备和预知:

图片

案例 3  :微信在你没有领取对方红包时,会给出红包即将超时的提醒。点击“转账”链接,会直接定位到转账对话的位置,防止用户再次花时间处理:

图片

案例 4  :美团的新单车是在 App 上关锁,不再需要在单车上手动关锁,解决了用户骑行完成,忘记锁车还要跑回去的问题:

图片

 

4. 用选择代替输入

案例 1  :饿了么可以记录你每次写的备注,在下次填写备注时可以快速选择输入,不需要用户做多余的输入:

图片

案例 2  :在携程 App 中填写姓名拼音信息时,系统提供了一键转拼音的功能,同时对于多音字还能够自动为用户提供选项判断,提高用户录入的效率和准确率:

图片

案例 3  :京东 App 对商品进行评价时,底部会提供一些评价标签,既能引导用户进行规范评价,又能提高用户的填写效率:

图片

案例 4  :微信钱包的钱转账到零钱通里,有一个“全部转入”的快捷选项,减少了用户输入时长:

图片

 

5. 提供下一步路径入口

案例 1  :高德地图搜索路线,会自动提供哈罗单车和地铁的扫码快捷路口;支付宝出行支付地铁票成功后会看到附近的网约车信息提醒,可以立即使用高德地图进行打车:

图片

案例 2  :蚂蚁森林新增了 “找能量“ 的功能,点击会自动跳转至有能量可偷的好友的森林界面,多次点击随机跳转,直至所有好友的蚂蚁森林可偷能量被偷完,偷能量也可以省时高效:

图片

案例 3  :得到 App、大众点评等产品,会在截屏时直接提供分享入口,帮助用户做下一步分享:

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》案例锦囊|设计如何为用户「节省时间」?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

如何排版更高级?带你重新认识宋体字排版!

seo达人



图片

 

宋体的起源和发展

雕版宋体字的形成 

在印刷术发明之前,书要一字一句用手抄写,费时费力。而唐代发明的雕版印刷术,使书籍由手工抄写进入印刷复制时代。

图片

现存最早的雕版印刷品是唐代咸通九年的《金刚经》

 

宋朝体

到了宋代,雕版印刷迎来黄金时代,但此时的字体也并非我们熟知的“宋体”,而是以唐代大家的楷书字体入板,并且不同地区入板的字体也不同。

图片

浙江刊本–《姓解》

 

图片

四川地区 – 《开宝大藏经》

 

明朝体

明朝体是中国明代木板印刷中出现的字体,也是现今大众所认知的“宋体”的原型。虽然明朝体逐渐失去宋朝体所特有的风格,但由于易于凋刻,字形便于走刀,能满足当时的印量而得以发扬。

图片

《南齐书》 –明朝时期的南京国子监刊本

 

清代宋体字

在康熙中期以后逐渐形成清代的风格,此时的宋体字更加成熟、精致。乾隆时期,宋体字大体定型,与现代宋体字基本相同。

图片

《学统》清康熙刻本

 

综上所述,我们可以知道宋体字不是宋朝的字体,而是汉字字体中的一种风格类别。而在日本以及港台地区,宋体字也被称为“明朝体”,“宋体”与“明体”本为一物,是由于文化差异所带来的名称上的差异。

 

现休宋体

如今,为了适应印刷和电子屏显示的需要,宋体又被进行了一番改造。现代型宋体的几何特征更为明显,笔画更为利落冷峻,为了可读性,文字胸线也较大,更加符合现代设计所需要的明快感。

图片

以宋体为基础发展出许多新字体,各大字库也开发有各有特点的宋体。包括老宋到新宋,再到仿宋,从用于标题的粗宋、中宋,到用于正文的书宋,成为一个完整的字体系列。笔画较粗的宋体适合用做标题,醒目大方;笔画较细的宋体,拥有很高的阅读性,主要用于正文排版。

图片

根据中宫和体饰等特点,可以大致地将宋体分为传统型宋体、中间型宋体、现代型宋体:

图片

图片

图片

图片

目前可免费商用的宋体字非常稀缺,

推荐9款免费商用宋体。

图片

 

宋体的使用场景

传统、历史

传统宋体的笔画结构带有手工雕刻的痕迹,几百年的文化沉淀,加上字体本身的特征,使得宋体用于传统、历史题材的设计中,可以体现出古朴的传统文化感。

图片

图片

 

文化、艺术

宋体由于继承了自然书写的痕迹,又具有精致的装饰性美感,运用在文化艺术等题材,具有强烈的人文气息,充满文艺范。

图片

图片

 

典雅、高贵

宋体字方正平稳、对称均衡的字体结构,显得端庄典雅,舒展大气。常运用在要体现高端、雍容、典雅、华丽的设计中。

 

女性、优雅

宋体在工整中充满人情味,有着很强的韵味感和精致美感,带着几分女性的温柔与优雅气质。所以很多和女性相关的设计都会使用宋体。

图片

图片

 

时尚、前卫

现代宋体笔画呈几何化结构,相对于传统宋体的温情,现代宋体更加的冷峻,细腻中透露出时尚前卫的风格,具有时尚感与精致的印象。

图片

图片

 

宋体搭配推荐

案例一

使字体搭配协调的一个基本原则就是选择风格相近的字体。使用同一字族里的字体进行搭配,是最简单、安全的搭配方法。所谓字族(font family)即一款字体下的多个子字体,如思源宋体字族从细到粗共有七款字体,风格协调统一。

图片

使用中西文组合排版时,西文尽量不要使用中文自带的字体。宋体常与衬线体相搭配使用,因为两种这字体无论在笔画特征,还是气质上都很相似。如本案例使用的是西文字体“Times New Roman”。

图片

在编排时需要形成视觉层次,通过字体的大小、粗细、颜色等方式来给版面带来阅读的层次感。

图片

 

案例二

搭配不同的字体时,要注意他们之间的包容性,既要有所区别又要统一和谐。书法字笔画变化丰富且非常具有视觉冲击力,通常会搭配同样具有历史文化属性的宋体字形。

图片

西文则选择与宋体对应的衬线体,与书法字形搭配。

图片

根据书法字的结构和笔势,通过对文字大小、位置的调整,进行编排,让文字看起来更紧密也更有节奏感。

图片

 

案例三

在进行时尚类的设计时,可以选择现代型宋体,西文字体则可以搭配几何衬线体。本案例使用方正风雅宋和Didot进行搭配,这两款字体简约的几何造型和粗细对比强烈的笔画,细腻中透露着时尚前卫的风格。

图片

黑体与宋体的混搭是很常用的一种搭配方式,需要注意的是尺度的把握,适当的对比能够为版面带来更丰富的视觉印象,但对比过度也会产生凌乱感。

本案例选择较细黑体进行搭配,字形形成了微妙的对比,较细的黑体还有着高雅、精致的气质,运用在具有女性时尚特征的设计中相得益彰。西文则选择和黑体相对应的无衬线体。

图片

编排效果:

图片

如果感觉排版太过于规矩,可以尝试加入手写体加强字形对比,打破呆板感,营造更强烈的动感。

图片

在进行设计时,不管是中文与中文还是中英文搭配,都是需要经过仔细分析和不断练习,才能达到和谐统一、层次清晰而美观大方的效果。

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》如何排版更高级?带你重新认识宋体字排版!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何限制datatable列宽--(收缩内容)

前端达人

实现功能:dataTable某列内容过长的话,只显示部分内容,鼠标点击显示全部,再点击显示部分。可以切换。

效果图:

鼠标点击:

如果再次点击,备注内容又收缩了。

JS实现代码如下:

var remarkShowLength = 10;//默认现实的字符串长度

datatable中的配置:

首先在 columnDefs 中显示文本的时候,如果超长,就只显示部分。

然后通过 createdRow ,如果备注信息超长的话,给该td元素添加上onclick时间,鼠标点击的时候,可以进行切换。并且将全部的字符信息 data.remarks 放置到属性中去,以便后面可以取出来。


  1. "createdRow": function( row, data, dataIndex ) {
  2. if(data.remarks.length > remarkShowLength){//只有超长,才有td点击事件
  3. $(row).children('td').eq(7).attr('onclick','javascript:changeShowRemarks(this);');
  4. }
  5. $(row).children('td').eq(7).attr('content',data.remarks);
  6. },
  7. "ajax" : {
  8. "url" : "/cluster/list?importantLevel=" + $('#searchImportantLevelSelect').val()
  9. },
  10. "columnDefs" : [
  11. {
  12. "type": "date",
  13. "targets": 7,
  14. "render": function (data, type, full, meta) {
  15. if (full.remarks.length > remarkShowLength) {
 return getPartialRemarksHtml(full.remarks);//显示部分信息
 } else {

 return full.remarks;//显示原始全部信息 }

 }
}
]

下面从td的属性中取出全部的remark,然后根据当前是显示的全部还是显示的部分信息,进行切换。


  1. //切换显示备注信息,显示部分或者全部
  2. function changeShowRemarks(obj){//obj是td
  3. var content = $(obj).attr("content");
  4. if(content != null && content != ''){
  5. if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注,切换到显示部分
  6. //$(obj).removeAttr('isDetail');//remove也可以
  7. $(obj).attr('isDetail',false);
  8. $(obj).html(getPartialRemarksHtml(content));
  9. }else{//当前显示的是部分备注信息,切换到显示全部
  10. $(obj).attr('isDetail',true);
  11. $(obj).html(getTotalRemarksHtml(content));
  12. }
  13. }
  14. }

 


  1. //部分备注信息
  2. function getPartialRemarksHtml(remarks){
  3. return remarks.substr(0,remarkShowLength) + '&nbsp;&nbsp;<a href="javascript:void(0);" ><b>...</b></a>';
  4. }
  5. //全部备注信息
  6. function getTotalRemarksHtml(remarks){
  7. return remarks + '&nbsp;&nbsp;<a href="javascript:void(0);" >收起</a>';
  8. }

原文链接:https://blog.csdn.net/zz_chst/article/details/79587936?utm_source=blogxgwz5

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

table中td超出内容隐藏,鼠标悬停全部显示(完整版,含js代码)

前端达人

一、CSS语法:
text-overflow:clip | ellipsis
默认值:clip
适用于:所有元素
clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
ellipsis: 当对象内文本溢出时显示省略标记(...)。
在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果
 
实例:
复制代码
table { width: 100%; float: left; table-layout:fixed; width:500px; border:1px solid #ccc;
        } table tr { line-height: 25px; border:1px solid #ccc;
            } table td { border:1px solid #ccc; text-align:center;
            } .MHover{ border:1px solid #ccc; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
            }
复制代码
二、HTML代码
复制代码
<table> <tr> <th>姓名</th> <th>个性签名</th> <th>性别</th> </tr> <tr> <td>张国荣</td> <td> <div class="MHover">我就是我,是颜色不一样的烟火!</div> <div class="MALL">我就是我,是颜色不一样的烟火!</div> </td> <td></td> </tr> </table>
复制代码
注:class="MHover"为表格里显示的内容,内容长度超多指定宽度时隐藏多余字段,并在后面加...
class="MALL"为鼠标悬停显示的内容。
三、js代码
复制代码
$(document).ready(function () {
            $(".MALL").hide();
            $(".MHover").mouseover(function (e) {
                $(this).next(".MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show();
            });
            $(".MHover").mousemove(function (e) {
                $(this).next(".MALL").css({ "color": "fff", "position": "absolute", "opacity": "0.7", "background-color": "666", "top": e.pageY + 5, "left": e.pageX + 5 });
            });
            $(".MHover").mouseout(function () {
                $(this).next(".MALL").hide();
            });
        });
复制代码
注:class="MHover"为表格里显示的内容,内容长度超多指定宽度时隐藏多余字段,并在后面加...
class="MALL"为鼠标悬停显示的内容。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

 


最近超火的“彩虹光感”,别告诉我你是最后一个知道的

seo达人


什么是彩虹光感?

图片
彩虹光感也是最近这一年左右在设计圈蔓延,然后至今发现越来越多的设计师喜欢上这样的风格,也许是因为单色渐变或者黑白灰看腻了,从而去选择一些更能在平凡中凸显竞争性彩虹色彩。
图片
彩虹光感的形成,一般由多种色彩叠加混合而出来,通过色彩柔和过度或者扩散开的方式处理形成。这种色彩出来的效果十分惊艳,艺术感十足。
图片
Microsoft Office 365
譬如之前微软一只影片里面,应用到了彩虹色彩搭配思路。在玻璃拟态轻质感的加持下,视觉效果让人眼前一亮。
或许有些设计师觉得彩虹光感,会有些花哨且也不高级。其实在在同质化严重的今天,尝试下新的视觉表现形式,未必是坏事,也许它可以让你的设计脱颖而出。
图片
英国约克郡雕塑公园的旧教堂
艺术家kimsooja 用彩虹色灯光,为教堂带来新的生命力。在这种环境中,似乎让我们感受到了色彩呼吸的声音,放下生活中的杂事,聆听色彩在歌唱,开始静谧冥想。
图片
apple watch
就连苹果的硬件产品设计,也采用了彩虹色彩搭配,这种与众不同的新鲜感,有网友直呼太美了吧。也正是因为彩虹色的活力与年轻化潮流,受到越来越多人的关注。

 

彩虹光感的特点

彩虹光感由自然界中真实存在彩虹演变而来,如今在数字设计中越发广泛的使用。因其特殊的效果,以及迷人般的色彩弥散处理,使得这种色彩虽然混合多种,也不会让人产生厌倦感。
图片
untitled macao
基于目前彩虹色彩应用案例,我们可以分析出这种风格最大特征点有:丰富、多彩、年轻、活力、细腻的质感、充满想象空间以及有一些疯狂特征,似乎有着为年轻一代而出的风格。
图片
图片
其实在早期从20世纪70年代开始,彩虹色彩就受到摇滚乐队的喜爱,以及一些电影霓虹灯效果演变,也有些彩虹色彩踪迹。
图片
摇滚音乐CD封面
直到今天,彩虹色的再次复兴,已经延续到众多领域中,例如装置艺术,艺术展览以及产品包装、音乐节海报等各种领域的渗透,我想我们是时候思考它的价值以及接下来潜力。
图片

图片

untitled macao
图片

 

彩虹光感的应用

如今不论装置艺术,还是数字设计,彩虹色彩搭配都能有眼前一亮感受,这种效果不仅 能打破 枯燥配色,还可以活跃氛围感,特别是一些涂鸦类型艺术装置等、音乐海报、酸性风格和平面设计等大量出现,下面挑选一些优秀领域应用案例和大家分享下。
#1. 平面中的应用
图片
图片
图片

图片

图片

Behance/Canwei Lai 赖灿伟

 

#2. 包装中的应用

图片

图片

图片

 

写在最后

彩虹光感慢慢开始成为流行文化中的一部分,特别是演艺海报与展览装置艺术等都在大量出现。这种色彩搭配的出现,更是一种前所未有的改变与突破,大胆而张扬的精神,极具吸引力。

个人觉得彩虹光感的配色,可以让产品在竞争中脱颖而出,彩虹色更有着年轻活泼的寓意。如今看到一些营销,也在为Z世代年轻人打造产品,将彩虹色应用在产品中也是一种突破窘境的手段。

 

原文地址:功夫UX(公众号)
作者:功夫UX

转载请注明:学UI网》最近超火的“彩虹光感”,别告诉我你是最后一个知道的

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



系统化思维如何辅助设计实现

seo达人



“文中示例相关数据都为模拟数据,而非真正的商业数据,以此声明”

 

先给大家介绍一下酷大师的背景:

1. 酷大师产品定位:面向设计领域的在线建模工具和内容平台。

2. 酷大师当前阶段:0-1搭建并完善用户体验闭环。

3. 酷大师阶段目标:服务用户增长的同时,提高用户留存。(站点留存→引流→工具留存)

在一周一迭代,交付任务紧的敏捷流程中。以下是我们在其中的一些实践:

 

1、以系统化的视角来分析业务

酷大师项目启动至今,已经大致完成了站点从0-1的内容搭建。站点的主要模块包含:首页、模型广场、工作台、帮助中心、活动中心、课程中心。他们相互独立,又相互影响。独立好懂,聪明的亲们通过名字就能猜出各个模块的功能,并且这些功能彼此都不可替代。那么他们是怎么相互影响的呢?这里引出一个词:系统化

请看下图:

图片

同样一个事物,独立的看,和把它放到一个系统中看,我们可能会有不同的理解。同理,当我们把酷大师站点当作一个系统来看时,再结合我们的业务指标,我们可以把这个系统转译成如下模型:

图片

从抽象到具象,我们把整个模型分为三个指标类型:

  • 1、核心指标:整个项目为之负责的目标,是评判所有项目行为的基本准则。
  • 2、策略指标:影响核心指标的所有变量集合,是基于产品策略拆解出来的二级支撑性指标。
  • 3、行为指标:随着策略指标的精细化,产品的策略指标最后都会对应到一个或者多个具体的用户行为指标。

我们可以通过模型找到影响业务核心指标的重点发力板块,也可以通过最底层的行为指标去反推上层的策略指标,进而量化设计价值。到这里,我们也就可以在这个系统中,找到对核心指标影响较大的策略指标,他们分别是:注册UV数、站点引流UV数和客户端引流UV数。这三个策略指标对应的产品板块分别是:游客页、详情页和工作台。他们就是设计接下来需要在酷大师众多产品模块中着重发力的项目。

 

2、以系统化的方式来分析用户

说完了产品目标和拆解,我们来看看用户。市场和用研同学往往可以在项目前期给我们输入很多关于用户的数据,在项目初期,我们可以把这些信息抽象成几个有代表性的关键词。下图是酷大师用户关键词,可以帮助我们定制大的设计思路,不过在一些更细的业务场景中,这些信息并不给到更清晰的设计指导。

图片

所以在此基础上,我们可以把这些信息作为一个一个的内容切片,通过不同的标准来重新组织这些切片,进而得到一个相对系统化的用户信息。

我们换一个维度,再做一次梳理分析:

图片

可以看到,当我们把酷大师用户以不同阶段做划分,从新游客到资深用户,不同阶段的用户对于产品的诉求有着明显差异性。游客和新用户更注重价值和需求的匹配;资深用户更注重实际产品价值的最大化。并且我们对于不同的用户群体,需要对应不同的产品策略,甚至不同的“端”来承接用户需求。到这里,我们已经可以通过以上信息,在产品的不同链路里规划不同的设计策略了。

不过有时候需求对标的用户群体比较聚焦,以上信息还是不够说服我们自己的话,还有最后一个技能,就是找到和需求高度对标的用户(注意,是高度对标),和他们深度交流,为他们做用户画像:

图片

(图中为虚拟数据,仅供参考)

 

PS:这里的用户画像需要根据实际的业务需求来针对性的采集信息,这是一个比较灵活的过程,需要设计师拿捏其中的尺寸。

通过以上三个维度的用户数据,我们就可以根据产品的不同模块,找到对标的用户群体,然后为其做对应的设计策略。

接下来就是第三步:

 

3、以系统化的思维规划设计策略

面向资深用户的设计策略(以客户端改造为例):

通过用户访谈和调研结果看,如果用一句话来描述酷大师客户端的用户特点的话,应该是这样的:

图片

基于用户特点和业务诉求,我们再结合服务模型,我们可以一步步推导出我们的设计策略。

图片

(图中为虚拟数据,仅供参考)

 

当设计策略明确后,结合实际的业务需求,接下来就是有的放矢的设计实施过程。

面向新用户的设计策略(以游客页改版为例):

回想我们的生活,最吸引用户眼球的传播方式是什么?思前想后,我觉得是电视直播,因为通过它,自诩谨慎机智的我买了人生第一箱「生发水」…

  • 1、你是否有脱发的烦恼? → 诉求
  • 2、用了一堆产品,却迟迟没有效果? → 顾虑
  • 3、我们有北美硅谷防脱技术+南亚失传生发秘方! → 优势
  • 4、主持人和甲方撕破脸,工厂紧急调货、买一送五!!! → 驱动

事实证明,「生发水」没有白买,因为后来我发现这和酷大师游客页的业务目标几乎一致:“在没有互动的情况下以很短的时间把用户从游客转变为消费者。”

通过前面的用户分析我们可以知道:对于酷大师的游客用户&新用户而言,他们更多关注于产品价值和自己需求的匹配程度。

那么如何在短时间里向用户传达信息,并促成注册转化呢?

我们从诉求->顾虑->驱动三个维度来去组织我们的优势信息。

因此在面向此类用户时,除了对他们介绍酷大师的共性价值外,需要重点介绍酷大师的差异性价值,以及足够有吸引力的驱动利益点。

如下图:

图片

基于上文分析,我们再基于目前产品可提供的能力范围,结合用户反馈,把信息和用户需求做一一对应,然后再给出设计解法。

设计实现:

正所谓:条条大路通罗马,各个小道奔安康。只要设计策略是正确的,那么具体的设计方案就是合理的,篇幅有限,这里就不做展开。

图片

 

4、以系统化的模型验证设计成果

万物皆可度量,设计并不例外。系统是度量设计成果的最好“尺寸”。

怎么度量?还记得最初的指标模型么?

  • 1、通过技术手段监控用户的行为指标:“按钮点击、停留时长、滑动屏数、返回&跳出率…”
  • 2、通过行为指标反推对策略指标的影响。“按钮点击提高 → 页面引流效果提高。”
  • 3、通过AB测试、上线前后变量监测等其他手段,对比出设计在数据上带来的变化。

通过以上方法,我们可以直观的看到设计在整个项目中的贡献。

那么在酷大师项目中,这个成果是多少呢?请看下图:

图片

ps:图中注册转化和老用户登录转化是以设计为唯一变量带来的数据提高

 

以上就是酷大师从0-1过程中的主要思考点,从前期业务拆解分析、用户调研,到制定设计策略,再到设计实施,最后到成果验证。

图片

到这里,我们也基本回答了最开始的问题:我们如何在业务迭代中抓重点,并有的放矢的“集中精力做大事”。

以这样的思路,我们就能以有限的精力,最大程度保证业务的目标的实现,也能对用户的关键路径做有效的体验提升。

 

写在最后

1):设计师不能盲目跟随需求,更不能对需求一视同仁,什么都想做好的结果就是什么都做不好。我们需要有一个自己判断标准。

2):“系统”是一个标准,也是一个视角。他影响着我们对业务、对需求、对用户以及设计的理解。

3):“系统”本身不重要,用“系统”的思维来看待事物很重要。

4):多个视角看到的东西,一定比单视角看到的更全面。

以上内容,和诸位共勉。

 

原文链接:酷家乐用户体验设计(公众号)

作者:沧耳

转载请注明:学UI网》系统化思维如何辅助设计实现

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



DataTables固定表格宽度(设置横向滚动条)

前端达人

当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了。默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%",至于css的100%为什么不生效,原因未知。下面就说说设置如何给datatables设置固定的宽度。

1.html代码

复制代码
<div id="tableArea"> <table id="userTable" class="display table table-bordered" cellspacing="0" > <thead> <tr> <th style="display: none">ck</th> <th>序号</th> <th>账号</th> <th>姓名</th> <th>CPID</th> <th>CP名称</th> <th>操作</th> </tr> </thead> </table> </div>
复制代码

 

2.覆盖某些样式(我们的样式优先级高,所以会覆盖内置的样式)

复制代码
#tableArea .dataTables_wrapper { position: relative; clear: both; zoom: 1; overflow-x: auto;
} #tableArea table{ width: 800px;
}
复制代码

这里的overflow-x:auto是新增的,表示表格内容超出宽度后,出现横向滚动条;table的width必须写死宽度,直接写在table元素上不生效,原因未知。

 

3.设置列宽(可略)

"columns": [
    { "data": "number", "orderable": false ,"width":"100px","searchable": false}
]

 

4.运行浏览,发现此时,当浏览器窗口小于800像素的时候,表格出现了横向的滚动条,正是我们想要的结果。

 

5.为什么不用"scrollX":true的配置实现横向滚动条呢?查询它渲染后的网页发现,它把table拆分成了两个表格,一个表示表头,一个表示表体。这不是我想要的,而且它表头的内容若是超出的话是隐藏的。

 

6.还有两个样式,可以参考参考,可能对你有用。

table td{

word-break:break-all;

}

单词也可以允许换行,这对于单元格的宽度有很好的控制,而不会让单元格被内容撑开!

 

table
{
        table-layout:fixed;
}

表格布局算法为固定(列宽由表格宽度和列宽度设定)。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

NiceScroll销毁

前端达人

受分页器影响,NiceScroll的滚动条一直显示不正常

干脆直接在分页后销毁重建  在网上查到了这个方法 还比较好用

$("#ID").getNiceScroll().remove();

1 个解决方案

#1


20  

But this works $("#ID").getNiceScroll().remove();

但这有效$(“#ID”)。getNiceScroll()。remove();

Try to execute in console on nicescroll demo page: $("#boxscroll2").getNiceScroll().remove() and you'll see that first div This is a simple scrollable DIV will change from nicescroll scrollbars to native browser ones.

尝试在nicescroll演示页面的控制台中执行:$(“#boxscroll2”)。getNiceScroll()。remove(),你会看到第一个div这是一个简单的可滚动DIV,将从nicescroll滚动条更改为本机浏览器。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

日历

链接

个人资料

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

存档