我的项目 未读
iOS充电壁纸:Guli充电壁纸设计,让你的iOS壁纸个性化灵感来源于国外Ben Vessey设计师的充电壁纸。通过快捷指令的自动化功能可以根据手机的电源状态来变化锁屏壁纸。使用Gui作为锁屏形象。
样式
资源下载蓝奏云下载
安装方法安装方法部分转载并修改于陈信儒,可以作为借鉴。安装方法原文地址
快捷指令自动化的自定义程度高,我们可以根据自己的需求进行修改。这套壁纸将手机电量分为三个状态:分别为「充足的电量(Healthy Battery)」、「低电量」与「充电中」。电量充足部分可以更改为随机壁纸。
绿色代表开心:电量充足
黄色与闪电相交:正在充电
红色代表愤怒:电量不足
快捷指令自动化的配置对应下图 ↓
将壁纸保存至快捷指令文件夹我们将用于配置的壁纸勾选,储存到“文件”- Shortcuts 中。
配置低电量先配置「低电量」 👉🏻 低电量.png 创建个人自动化 - 选择电池电量 - 滑动滑块我这里选择的是低于 30%,选择获取文稿,如图所示配置,文件路径中填写刚才设置好的壁纸名称,关闭未找到时报错,点击加号,再添加壁纸,设定壁纸,如图所示配置。
下一步,关闭运行前询问,第一条配置完成。
配置充电中再配置「充电中」 👉🏻 充 ...
经验分享 未读
支付宝地铁码iOS快捷指令,一键打开支付宝地铁码支付宝地铁码支持北京地铁了,再也不用忍受非常难用的易通行app。直接通过快捷指令打开支付宝地铁码,非常方便快捷。
使用预览
安装方式使用iOS设备安装快捷指令
翻译内容 未读
Principle教程:中文文档(带图)如何制作App应用高保真原型
本文为翻译内容,来自Principle官方文档翻译: 张洪Heo(转载注明出处)非原创内容须知
本译文对内容有部分删减和增加,可能与文档原义不符,配合我自己理解改动,仅供参考。
译者前言principle是一款无代码,十分简单的高保真原型制作工具,体积小巧,适合制作简单的动画高保真,适合作为方案评估的工具。对于开发的对接可能比较复杂,不过能够快速出效果,制作多套方案和修改起来非常方便。
简介Principle是一个为网络、移动设备和桌面设计动画和交互用户界面的工具(一些设计团队甚至将其用于虚拟现实!)通过允许你在投入宝贵的工程时间之前快速评估你的想法,Principle加快了设计开发周期。在确定最终设计后,原理样机会与工程团队交流想法。Principle不提供专门用于传递设计趋势或利基用例的功能,而是致力于提供一个通用功能工具箱,这些功能可以创造性地组合在一起,产生各种结果。由于不可能涵盖所有可以组合这些功能的方式,因此本文档侧重于描述Principle是如何工作的,并将其留给读者去发现创造性的应用程序。
界面
画布画布中心是你完成大部分工作的地方。它包含所有画板以及它们之间的过渡 ...
软件推荐 未读
Mac软件推荐:做UI都用什么软件?我做设计都在用什么工具?这里是Mac软件推荐第二弹,在这篇文章中我将会介绍一下我做设计都在用什么软件,有什么好用的工具安利一下。
说起做设计的话生产力工具主要就是sketch和Photoshop。但是一些小工具能够大幅度优化使用时间和体验,包括输出质量。我们来看看吧。
Eagle
首先不得不说的就是Eagle了。在你浏览网页的时候,看比较好的设计作品的时候总是想将它们保存下来,作为之后工作的设计灵感来源。但是复杂的文件夹管理,带来的可能不是灵感,而是懒得去翻了。很多素材收集软件我都有了解过,其实只有这个软件支持的格式能够覆盖我的需求。比如存一些视频素材等。
此软件收费软件,学生证购买会便宜一些。
官网地址
图压
图片压缩神器,完全免费、速度非常快。之前用过一些压缩软件,要么需要网络传输下载、要么是很慢的压缩速度。这个软件可以说是将图片压缩的这个需求完美实现了。并且支持批量更改尺寸,神器有木有。
官网地址
skala preview
可以将你的设计稿传输到手机上查看。功能非常强大,支持剪贴板传输。支持sketch插件和photoshop。如果你的显示器可能有色偏,或者担心手机端展示的效果不好,不如用用这个。
官 ...
软件推荐 未读
Mac软件推荐:装机必备软件和实用工具合集之实用工具篇从黑苹果到现在这台笔记本用macOS已经接近三年了。作为一个非常喜欢折腾的人来说,在这三年时间里软件也是换了又换,最后留下的其实都是我目前用起来最顺手的。这篇文章从我个人向出发去做一些软件推荐,大家都熟知的软件就不在这里写了。这里不提供下载地址,有兴趣的小伙伴可以自行去App Store、官网、下载网站上装。
因为应用数量非常的多,所以这里就根据软件的分类分成了多个文章,每章推荐10个左右的软件。干货满满。大多数人可能只用过其中不足5成的应用。
下载网站推荐先安利一波下载软件的网站吧,MacWk,里面有非常多的开源和免费软件可以下载,还有一些付费软件可以免费试用。网站设计非常好看,下载体验特别棒。强烈推荐。
Downie网络视频下载应用,复制视频网站地址,CMD+V粘贴到软件里就可以直接下载了。操作简单,windows几乎没同样体验的应用。
网易mumu最好用的android虚拟机,因为用的iOS手机,很多应用都只有安卓独占版本,所以网易mumu可以作为一个游戏机、安卓独占软件的虚拟机。
Snipastemac上最好用的截图应用之一。满足我截图复制到剪贴板并产生一份本地文件的需求 ...
转载内容 未读
滴滴是如何设计并落地一个插画系统?插画系统该如何构建?
本文为转载文章,以下内容来源于
如何设计并落地一个插画系统?
CDX创意设计中心
拥抱变化,是互联网人的座右铭。
小步迭代,快速响应,只为降低成本、提升效率。
一切都在变,对效率的追求不变。
插画,作为一种高效的视觉设计形式,自然备受互联网公司的青睐。
但是,“插画”真如我们想象的那么“高效”吗?
不,答案是否定的,未经整合形成系统的插画,会造成元件重复设计、无法最大程度提升公司的生产效率,并且会影响品牌一致性。我们要拥抱的高效插画,不仅是一个高效的单次产出,更是一个高效的生产系统。
围绕效率,滴滴CDX品牌设计将为大家介绍:
插画风格该如何选择?
插画系统的效率究竟有多高?
十几个部门该如何协作共建?
插画所服务的业务目标是什么?在滴滴,插画系统与图片、三维合成等视觉形式,共同构建出了一个综合的“画面视觉系统”,这三个系统所服务的传播目标侧重点有所不同。
1.传播目标是品牌品质,实景图⽚是最适合的画⾯形式
实景拍摄可 ...
我的项目 未读
快捷指令:将图片上传到7bu去不图床并将url复制到剪贴板这算是短文向发图片迈进的一小步,一直以来不太清楚快捷指令是如何上传图片的,根据从冰老师那拿来的快捷指令掌握了发图片的技巧,但是这个快捷指令能力有限。所以改进了一下。
快捷指令特性
支持图片直接上传并将url复制到剪贴板
配合mac接力可实现手机端传图无需经过电脑自动复制链接
支持共享表单,通过图片app中的分享直接调用快捷指令
运行截图
指令地址使用手机打开此链接
经验分享 未读
基于Hexo的Butterfly下自定义指定首页文章卡片高度列表如果都是统一的样式、高度未免有些过于单调和重重复。在一些关键性文章中加一些特殊的样式也是我们常用的举措,例如文章置顶。但是文章置顶多了就会看不见新文章,置顶折叠展示的力度又不够。所以对于有特殊意义的文章展示特殊的效果是非常必要的,丰富层次。
这个文章的核心思路就是给文章的markdown文件里添加一个large参数,当large=true时,则文章会添加一个class。然后针对这个class进行css的调整。让我们开始吧。
样式预览
Demo
修改源文件编辑themes/butterfly/layout/includes/mixins/post-ui.pug
12345mixin postUI(posts) each article , index in page.posts.data if article.hide !== true- .recent-post-item+ .recent-post-item(class= (article.large === true) ? 'post-card-large' : ' ...
经验分享 未读
Js如何针对不同城市的访客提供不同的服务,屏蔽指定地区访问有些时候我们需要对不同地域的用户做一些限制,比如在北京的用户不能查看文章正文等。如何判断用户所在的地域并针对不同的地域做出限制呢?这里利用sohu的地域判断API。这篇文章用Butterfly的评论功能做地域限制为例子。
本文以pug代码为例,html代码在文章后面。
城市获取1234script(language='javascript', type='text/javascript', src='//pv.sohu.com/cityjson')script(language='javascript', type='text/javascript'). var city = returnCitySN['cname']; //- console.log(city)
city变量则为城市名。例如北京市。然后可以通过city变量内容字符串是否包含北京即可。
判断 ...
经验分享 未读
乐理笔记:找音位置、黑键、五线谱、音程找音在钢琴上找哆音位置
钢琴上的黑键表示方法
五线谱五线谱名称
五线谱上哆音位置
五线谱上黑键表示
音程音程度数计算
八个标准音程
音程计算
计算键数与标准音程键数的差别
参考乐球网
转载内容 未读
什么是AB测试?AB测试的详细流程和方法?
本文为转载文章,以下内容来源于
设计中的试验设计
腾讯FXD
“ Never stop testing, and your advertising will never stop improving. ” 这是奥美公司创始人大卫奥格威的一句经典名言。
我们所熟悉的一些互联网公司佼佼者都崇尚快速实验,通过验证自己的想法推进产品的优化:Google每年运行超过1万次A/B测试;Booking通过大量试验实现超过同行业2-3倍的转化率;美国前总统奥巴马政府在募集选举资金的时候,通过测试对募资网站的图片以及文案进行测试优化,网站点击率提升了40.6%,而点击率的提升为奥巴马团队带去了预估6000万美元的捐赠… 从种种数据资料中,我们可以看到通过测试我们可以量化和提高运营效率、优化产品体验甚至还可以搞钱!
随着现代互联网的发展,试验的门槛不断降低,A/B测试已经被普遍运用在各行各业,就算你没有做过A/B测 ...
经验分享 未读
产品需求应该怎么定,什么需求是紧急需求?在产品开发的阶段,特别是产品初期,总会有很多非常繁杂的产品需求。当这些需求一窝蜂的砸过来时,首先要对这些需求进行筛选、归类和排序。并且实时跟踪进度来进行完善。
开发什么需求?选择当下的需求当产品出现多个需求时,我们要区分战略性需求和当前需求。在与开发沟通产品发展方向后,决定发展方向的战略性需求应滞后。例如用户有想要分享自己生活的需要,现在有两个需求:
添加一个动态功能,用户可以类似微博一样表达自己的看法。
增加一个相册功能,用户可以发送自己的照片到相册中,其他人也能看到。
从体量上判断,相册功能体量会远小于动态功能;从功能上判断,动态功能的添加会影响产品逻辑。当出现此类情况,应该以体量小、实现功能、简单满足需求的前提选择第二条进行开发。当通过数据表现出用户强烈的分享欲望——当相册功能不满足用户的需求时,再考虑开发第一项。
即不过度规划、不过度设计、不过度开发
即使在做决策的时候感觉未来一定会做动态,也不要去强烈追求一步到位。即需求推动着产品,而不是产品走在需求之前,臆想真实需求的开发。
产品领先需求的后果当产品的开发规划是远超用户需求的时候,就会出现浪费开发资源的情况。当今时代很难 ...
经验分享 未读
自媒体创作者的封面该怎么做?标题该怎么取?B站、公众号、微信视频号?写下一些对内容市场的观察和思考,首先抛出观点。对于PUGC视频创作者而言,
标题入口化
封面鲜明化
做视频不是做产品,你应该照顾到绝大多数可能不属于你的垂直圈层的用户,这样才有破圈的可能。那么提升播放量的主要手段每个内容制作者都很清楚,就是类似“标题党”。在人们接受到的学校教育中,标题通常起到的是「总结归纳」「内容核心」的作用。其实这样对每期播放量的稳定是不乐观的。很有可能出现忽高忽低的情况。那么标题该如何去取呢?
对于选题非常有自信的内容,总结核心是关键。将选题最关键点作为标题或者封面上的文字。
对于选题一般,靠内容质量来说话的,重要的是靠用户点进来的这个操作,那么需要一些标题的优化和具备吸引力。具有吸引力的几个点
引起冲突
引起共鸣
引起悬念
默认观众是初中学历的中国三线城市高中生(降低标题门槛)
对于学校教育而来的我们大多数人,对于全文总结已经炉火纯青了。那么在这简单说一下对于选题自信的作者来说,有几个点可以注意一下
标题简洁干练
没有一个是多余的字,去掉任何一个都不行
封面标题无需是连贯的语言
封面标题抛出核心,文字标题深度解释
减少封面上的文字数量
很多创作者本着 ...
转载内容 未读
优质设计报告推荐:2021全新淘宝品牌Logo升级
本文为转载文章,以下内容来源于
官方复盘!2021全新淘宝品牌Logo升级设计解读
思鱼耶
全新的2021已经到来,在这个适合展望未来的时候,淘宝也迎来了品牌形象的升级,一个万象更新的淘宝正在向我们走来。
“淘宝直播很有趣味”,“淘宝人生很新潮”,“淘宝更好逛了”越来越多的用户在感受淘宝的新变化。新淘宝,让用户在“淘好物”过程中更能感受到“逛”的乐趣,从产品、直播等多场景多维度带给用户全新体验。作为淘宝的镜子,我们的品牌也伴随着产品的升级,在设计层面表达了全新内核。
设计思路在新淘宝的大背景下,设计的挑战在于如何将抽象的心智具象表达。此次品牌设计将围绕“连接”“开放”“有趣”三大设计理念透过字体传达淘宝的品牌新内核。
在新的字体中将有粘连但又不够流畅的笔画结构,让它们“一气呵成”起来,通过连笔来表达“连接”,它寓意了新淘宝要更好地连接商业、用户和内容。
“通透”是新的字体比较直观的感觉,让字体本身结构上有“呼吸”的空 ...
翻译内容 未读
UI设计人机界面准则:交互作为UI设计师,最重要的就是接触iOS的设计规范。苹果拥有引领世界的设计能力,iOS影响着一代又一代的设计师,所以这篇文章主要是来翻译和解析一下iOS的设计规范。这个规范算是所有移动设计师必看的内容了。
本文为翻译内容,来自苹果官方人机界面准则推荐访问英文原文地址:人机界面准则翻译: 张洪Heo(转载注明出处)非原创内容须知
该文章为系列内容:查看系列全部文章
交互3DTouch在支持的设备上,人们可以通过对触摸屏施加不同程度的压力来访问附加功能。应用程序可以通过显示上下文菜单(或支持窥视和弹出)进行响应,以显示项目以及人们可以用来影响项目的操作。
在运行iOS 13和更高版本的设备上,无论设备是否支持3D Touch,用户都可以使用触摸按住手势打开上下文菜单。在3D Touch设备上,手势可以更快地显示上下文菜单。
主屏互动在运行iOS 13或更高版本的设备的主屏幕上,当人们触摸并按住应用程序图标时,应用程序可以显示上下文菜单(在3D Touch设备上,人们只需简单地按一下图标就可以看到菜单)。应用程序的上下文菜单可以让人们快速执行常见的应用程序特定任务,并查看有趣的信息。例如, ...
翻译内容 未读
UI设计人机界面准则:应用架构作为UI设计师,最重要的就是接触iOS的设计规范。苹果拥有引领世界的设计能力,iOS影响着一代又一代的设计师,所以这篇文章主要是来翻译和解析一下iOS的设计规范。这个规范算是所有移动设计师必看的内容了。
本文为翻译内容,来自苹果官方人机界面准则推荐访问英文原文地址:人机界面准则翻译: 张洪Heo(转载注明出处)非原创内容须知
该文章为系列内容:查看系列全部文章
应用架构启动发布体验对人们对你的应用程序的感觉有很大影响。不管人们使用的是什么设备,也不管他们上次打开你的应用有多长时间,启动体验都应该是快速和无缝的。
下面的指导原则可以帮助你设计一个令人愉快的启动体验。有关开发人员指南,请参见响应应用程序的启动。
提供启动屏幕。当你的应用程序启动时,系统就会显示你的启动屏幕,并迅速将其替换为你的应用程序的第一个屏幕。启动屏幕的功能是给人一种你的应用程序速度快、反应灵敏的印象,同时允许加载初始内容。为了确保从你的启动屏幕无缝过渡,设计一个与你的第一个应用程序屏幕相似的普通屏幕,并且不会引起人们的注意。有关指导,请参见启动屏幕。
以适当的方向启动。如果你的应用程序同时支持纵向和横向模式,它应 ...
经验分享 未读
外卖差异化定价?我对于产品的动态定价的一点看法
补充一下,动态定价违反了《关于平台经济领域的反垄断指南(征求意见稿)》第七条 纵向垄断协议的利用数据和算法对价格进行直接或间接限定,遵纪守法,每个公司都有责任,遇到问题建议举报
最近美团又因为定价火了一把,产品如何做定价,如何才能将产品的利润最大化呢?通过资料来看,平台是通过用户来判断收费价格,针对优质用户提供更高的配送费和更低的优惠政策的方式进行差异化定价,让不同消费能力的用户用最大的消费金额来购买,保障用户使用和利润的最大化。但是这带来的问题就是会产生舆论压力和公关风险,进而影响股价。那么有没有更好的定价方式呢?
我们假设一份食物店铺50元,外卖原价70元。针对优质用户收费55元,针对其他用户收费45元。平台抽佣25%(17.5元)。
全部以标准价出售当我们修改成针对所有用户定价相同时产生的问题就是与竞品竞争和比店铺价高的问题。首先这个市场已经是几个平台垄断的情况,所以当价格略微高于其他平台时优质用户一半不会去比价,但是对于消费金额比较敏感的人群和初入平台的用户来说,当你一家店铺使用标准价格的时候,他们可能会放弃整个平台。所以在竞争对手使用差异化定价时,你使用标准定价显然对于价 ...
转载内容 未读
优质设计报告推荐:高德地图品牌升级设计总结
本文为转载文章,以下内容来源于
这份高德地图设计总结,让我觉得捡到宝了!!
UX小学
前段时间,高德发布了新IP 高小德 ,酷酷的小鹰。最近,高德又更新了LOGO及品牌视觉,设计更为简单、干净、清晰、专业。所以,接下来的干货重点讲讲,高德这套设计总结,是如何推导并落地应用的。
高德地图设计理念
品牌意识 定位与DNA
在升级改造品牌之前,第一往往是需要先明确品牌升级目标,即第一要务是解决现有品牌问题,接着是进一步清晰高德的品牌定位与DNA。
通过多维度调研,我们积累了很多有价值的信息,也逐步清晰了我们第二阶段的品牌设计方向,即继承品牌资产、优化阶段性问题、增加品牌活力。
高德BRAND-LOGO
品牌方案 标志部分
通过调研,我们发现用户对于高德品牌的认同度已经较高,所以我们继承了现有的品牌资产的同时,通过设计为品牌增添活力,增加年轻用户覆盖。
图形上,我们保留了纸飞机这一具有高辨识度的元素,且对形态做了全新调整, ...
经验分享 未读
Heo产品设计报告06:知识类博客的设计思路和理念本博客是基于Butterfly主题进行魔改制作的,在最初从pure主题切换到butterfly中,我带着非常多的兴奋感。Butterfly的令人震撼的首屏和打字效果深深吸引着我。
博客用的久了就会产生一些想要调整的想法,于是经过了漫长时间的边改边用,现在博客已经魔改到了v3.3.2版本,相信每个魔改人都会有着自己的想法和思路改造一个完全属于自己的博客,那么我来表达一下我的看法。
理念设计理念:清晰、轻快、易操作
清晰首先解决清晰问题,博客的主要目的就是为了文章的阅读,所以首先我就要针对阅读体验进行改进。
原主题的字号真的太小了。小字体带来了美观,但是作为一个「实用性博客」,以快速找到需要的内容为核心,放大字体是不可避免的。那么多大合适呢?针对桌面屏幕来说,我选择了以我16寸mbp的屏幕距离1.2m左右能流畅阅读的程度作为参考依据。
1.2m
流畅阅读
在很多位置使用了隐喻的方式来表达这个部分是做什么的,例如右侧的卡片相比主题的失去了卡片标题。其实在我不告诉你标题的情况下,绝大多数人会知道这个卡片意味着什么。即使不清楚也完全不影响整个博客的阅读。包括文章下面的版权信息等。通过隐喻的 ...
经验分享 未读
Markdown表格宽度如何自定义,如何设置表格的列宽Markdown表格我们可以使用插入一个空白div并自定义宽度的方式进行自定义。有的时候我们不是想要首行和首列出现自动换行的情况,这个时候就需要使用自定义宽度和高度来解决了。一些人通过空白img标签或者外置css样式来实现,感觉很麻烦效果还不好,这里推荐使用插入空白div的方式。
无自定义宽度
类别
含义
行为
独奏环境
声音不是必不可少的,但它会使其他音频静音。例如,有配乐的游戏。
响应静音开关。 不与其他声音混合。 在后台不播放。
周围
声音不是必不可少的,它不会使其他音频静音。例如,一个让人们在玩游戏时播放其他应用程序中的音乐来代替游戏原声的游戏。
响应静音开关。 与其他声音混合。 在后台不播放。
回放
声音是必不可少的,并且可能与其他音频混合。例如,教外语的有声读物或教育应用,人们在离开应用后可能想听。
不响应静音开关。 可能会或可能不会与其他声音混合。 可以在后台播放。
记录
声音被记录下来。例如,提供音频录制模式的笔记应用程序。如果此类应用允许人们播放已记录的笔记,则可能会将其类别切换为播放。
不响应静音开关。 不与其他声音混合。 可以在后台录制。
...
转载内容 未读
优质设计报告推荐:小桔有车租买车业务体验设计升级
本文为转载文章,以下内容来源于
小桔有车租买车业务体验设计升级
CDX创意设计中心
一.背景小桔租车1.0上线一段时间了,过程中很多功能点时间紧、迭代快,点状的设计迭代满足了租车前期的业务发展,接下来随着业务模式变化,需要整体性的思考,什么样的体验更符合现有业务模式?特此,设计和产品同学一起,以现有业务为基础,从全新的视野出发,以产品设计比赛的形式,从业务模式、产品框架到信息结构、设计语言全部进行了重构与升级,并推进产研开发落地,拿到结果。
二.调研分析及设计目标1.用户分析从有车的流量来看,大多数都是来自于滴滴出行端,从出行端用户的特性可细分为需求明确型、纠结对比型、闲逛型、商家(车企、销售)4种类型。每种类型的用户需求是不同的,因此我们需要从不同维度设计以解决不同问题。
2.线上问题业务探索调整前我们的业务以租车为主,业务发生调整后,模式由纯租到租买灵活,原有主流程和页面已经不能很好的支撑当前业务了,同时之前也存在一些体 ...
转载内容 未读
潘通 2021 年度色发布:PANTONE 17-5104 极致灰 + PANTONE 13-0647 亮丽黄
少废话,先用上极致灰1234极致灰sRGB 147, 149, 151极致灰Hex #939597极致灰Lab 62, 0, -1极致灰CMYK 49, 39, 36, 0
亮丽黄1234亮丽黄sRGB 245, 223, 77亮丽黄Hex #F5DF4D亮丽黄Lab 89, -3, 70亮丽黄CMYK 11, 13, 75, 0
潘通发布 2021 年度代表色PANTONE 17-5104 极致灰 + PANTONE 13-0647 亮丽黄
结合一对持久耐看又鼓舞人心的色彩, 传达力量与希望的讯息。
PANTONE 17-5104 Ultimate Gray(极致灰)与 PANTONE 13-0647 Illuminating(亮丽黄)这两个独立的色彩突显不同的元素如何在一起支持彼此,最能表达潘通 2021 年度代表色的精神。实用又稳固,同时也是温暖又乐观,PANTONE 17-5104 极致灰 + PANTONE 13-0647 亮丽黄是力量与正向的结合。这个色彩故事将深思熟虑的深层感受与阳光友善的希望浓缩在一起。
PANTONE 17-5104 极致灰 + PAN ...
资源中心 未读
优秀UI设计规范分享:光音移动端设计规范1.0
团队名称:光音设计小分队交互设计师:Echo、张晶视觉设计师:齐杰、凯文、MiroCat、三牛、张晔
规范内容本套通用型规范旨在帮助广大设计师,快速入手制作属于自己团队App的设计规范,降低设计人力成本。
文件预览
下载地址
方法1(推荐)关注Echo的设计笔记微信公众号,在公众号后台回复设计规范
方法2(推荐)链接:百度网盘 提取码:766M
方法3蓝奏云
经验分享 未读
Heo产品设计报告05:视频播放器横屏与竖屏的设计差异在哪?我应该如何选择?今天读到一篇文章讲的是视频横屏和竖屏的设计差异,发现每个人的观点差异还比较明显,这篇报告我也写一些对于视频播放器的设计看法。仅个人观点。
如今视频行业非常火热,我们可以发现曾经的优酷、爱奇艺、腾讯视频、B站等都是采用的横向屏幕;我们看到的电影、电视都是横向屏幕。抖音、快手等都是纵向屏幕。微信小视频是横向屏幕。那么他们是怎么来的呢?
以人类为核心一些人们会将横竖屏作为硬件的变化,认为设备是怎样的,软件就去适应它,所以才会出现了竖屏的设计。那么最初的横屏是怎么来的呢?
其实原因非常简单而且显而易见:人类的眼睛是横向的。
不仅如此,因为人类的每只眼睛是横向的,眼球的顶部和底部容易被上下眼皮遮住;两只眼睛处于横向水平线,造成了人眼本身的视觉就是一个宽屏的画幅。并且人眼的长宽比例会非常宽:电影的21:9的宽幅比例就是适应人们视觉的生理器官。
所以我们所谓的「沉浸感」「沉溺其中」其实就是内容占我们视觉的比例。当视觉内容占据整体视觉信息的比值越大,沉浸感越强。当我们的注意力只在屏幕上时,大脑并不只是分析手机上的内容,他还在同时分析其他环境内容、周围的环境音等等。大脑在做的这些额外工作会削弱沉浸感。 ...
资源中心 未读
WCAG颜色对比度检测工具,网页及App文字背景配色检测软件我们在设计网页、设计App的时候会担心文字是否能在有色背景上清晰显示,其实WCAG向我们提供了非常好的检查方案。检查颜色是否有足够的对比度应加入到设计检查的流程中来。
为什么要做颜色对比度检查?对比度为3:1是[[ISO-9241-3]]和[[ANSI-HFES-100-1988]]为标准文本和视觉推荐的最低水平。使用4.5:1的比例来说明由于中度视力低下、先天或后天颜色缺陷或通常伴随年龄增长的对比度敏感度丧失而造成的对比度损失。
其基本原理是基于在ANSI标准中采用3:1对比度作为正常观察者可接受的最低对比度,以及b)人群中,20/40的视力与大约1.5的对比度敏感度损失。因此,20/40的用户需要3*1.5=4.5比1的对比度。根据类似的经验发现和相同的逻辑,视力为20/80的用户需要大约7:1的对比度。
对比度为4.5:1被选为AA级,因为它补偿了视力损失大约相当于20/40视力的用户通常经历的对比度敏感度的损失。(20/40计算约为4.5:1。)20/40通常被报道为大约80岁的老年人的典型视力。
7:1的对 ...
翻译内容 未读
UI设计人机界面准则,UI设计交互设计必看的UI设计标准
作为UI设计师,最重要的就是接触iOS的设计规范。苹果拥有引领世界的设计能力,iOS影响着一代又一代的设计师,所以这篇文章主要是来翻译和解析一下iOS的设计规范。这个规范算是所有移动设计师必看的内容了。
本文为翻译内容,来自苹果官方人机界面准则推荐访问英文原文地址:人机界面准则翻译: 张洪Heo(转载注明出处)非原创内容须知
该文章为系列内容:UI设计人机界面准则:交互UI设计人机界面准则:应用架构
iOSIOS设计主题。作为一名应用程序设计师,你有机会交付一款登上App Store排行榜榜首的非凡产品。要做到这一点,你需要满足对质量和功能的很高期望。
IOS有别于其他平台的三个主要主题:
清晰。在整个系统中,文字在任何大小下都是清晰的,图标是精确和清晰的,装饰品是微妙和合适的,对功能的突出关注激发了设计的灵感。负空间、颜色、字体、图形和界面元素巧妙地突出重要内容并传达交互性。
直观。流畅的运动和清晰、美观的界面帮助人们理解内容并与之互动,而不会与之互相争抢眼球。内容通常会填满整个屏幕,而半透明和模糊通常会暗示更多内容。最小限度地使用边框、渐变和投影使界面保持明亮通风,同时确 ...
经验分享 未读
Windows下安装软件就报错,无法安装的解决方案我的好兄弟今天刚入职,结果发现啥软件都装不上。
这篇文章作为安装软件的错误排除流程进行探讨。大概率能解决在Windows系统下的软件无法安装问题。
管理员模式运行首先尝试右键单击安装包,选择以管理员身份运行,查看是否解决问题
兼容模式运行如果是windows10操作系统,可能有些软件没有办法在Windows10上正常运行,右键单击安装包,选择属性,然后点击兼容性,将兼容性设置为Windows7
安装运行库软件在编写的时候依赖运行库,有的时候电脑没有对应版本的运行库时就无法打开,解决的办法就是安装对应的运行库。有的时候我们不知道需要安装哪些运行库,所以就找一个运行库合集来一劳永逸。
这里提供两个下载链接,也可以在百度搜索
微软常用运行库合集
3DM游戏运行库合集离线安装包(1G)
经验分享 未读
让网站根据浏览器自动选择是否展示webp格式图像关于webp格式的好处,我在很久之前转载过一篇文章:WebP 相对于 PNG、JPG 有什么优势?那个时候我的博客刚改成使用webp格式,不过后来出了一些问题导致我回滚了这个操作。
时隔近一年时间,我的博客再次重新支持webp格式了。这篇文章主要是介绍我的博客是如何判断浏览器是否支持webp格式并将所有的图片以webp格式展现。
我的配置因为我使用的是七牛云自带的格式转换的图片样式,所以我使用了替换全站img标签的src中的url参数。如果你使用的不是七牛云,可以根据我的代码进行二次修改。
主要思路使用的是js来判断浏览器的头部信息是否支持,如果支持则将原有我全站里面img标签里src中的!blogimg改为@blogwebp。
代码如下可以放在外置的js文件,也可以直接写进网页中
1234567891011121314151617181920212223242526window.onload=function(){ var checkPic = function(isWebP){ $("img").each(function ...
经验分享 未读
如何通过推迟js的加载来改善网页加载速度再博客优化的过程中我们经常会嵌入很多第三方的js,第三方js提供更丰富的功能,但是却拖垮了网页的加载速度。这个时候我们可以使用async/defer来推迟js的加载。
在HTML5以前,script标签没有这两个属性,而浏览器单纯的按照顺序解析(解析)并执行,HTML5之后,我们可以在脚本标签定义他的行为,包括网路请求是否同步,执行时机等等。
选择async还是defer
广泛地说,可以通过你加载的js用途来判断你的选择
顺序
DOMContentLoaded
async
加载优先顺序。脚本在文档中的顺序不重要 —— 先加载完成的先执行
不相关。可能在文档加载完成前加载并执行完毕。如果脚本很小或者来自于缓存,同时文档足够长,就会发生这种情况。
defer
文档顺序(它们在文档中的顺序)
在文档加载和解析完成之后(如果需要,则会等待),即在 DOMContentLoaded 之前执行。
在实际开发中,defer 用于需要整个 DOM 的脚本,和/或脚本的相对执行顺序很重要的时候。
async 用于独立脚本,例如计数器或广告,这些脚本的相对执行顺序 ...
软件推荐 未读
Heomagic 07 | 在mac上的视频转格式方案分享Heomagic 07 | 在mac上的视频转格式方案分享
近期非常常用视频转格式,我们使用一些油猴插件、视频下载插件经常能下载到flv、mkv、rmvb等格式,而这些格式有的时候不兼容你的播放器(可替换自带播放器解决),有时为了做一些其他的事情。有的时候可以使用premiere、finalcut等工具来进行转格式,但是这样不仅速度慢,而且不方便批量转格式。所以一个小巧的专门用来转格式的工具就显得非常重要了。
我们最常用到的就是MP4格式,而如何将各种各样的格式转换为MP4呢?
这个时候就用到了一些mac上的视频转格式工具了。
几乎大部分视频转格式的软件我都试用过了。目前我用过的比较好的视频转格式软件在这里分享出来。
Permute官方网站:
引用站外地址,不保证站点的可用性和安全性
permute
charliemonroe
这个是值得你付费购买的视频转格式软件(如果你是视频工作者并且这部分需求比较大的时候)
仅仅一个 ...