参考了企鹅电竞和09UI的腾讯视频品牌提案,尝试着去理解系统的设计思路和方法。
来源:https://www.zcool.com.cn/work/ZMjIxMDgwODQ=.html
视觉对齐:
用最简单的文字来举例——————
这两行字,左边对齐了吗?是否会有第一行偏右了一点的感觉。
实际上这两行文字已完全对齐,这叫物理对齐,视觉不齐。而做设计当然是追求视觉上的,人的眼睛很容易产生错觉,大部份时候要避免,有时候要利用。
把第一行左移一点:
这样,左对齐的感觉更明显,实际上金字的边已往左超过了D字的边。为达到视觉对齐的目的,而实际是不齐的,原因是因为边界面积。
大标题与小字,艺术字与黑体,不规则元素与方块……随时都出现这种情况。
来源: h
在目前的APP产品设计中大部分都是采用小团队作业的方式,关于流程等通常很少关注与规范,所以导致产品在进一步发展壮大的过程中很容易就乱套了。
一个产品的研发流程大致为:基础调研→产品分析→交互设计→视觉设计→研发→测试→交付。其中需要三次评审,分别为产品需求评审(需要产品+设计+研发人员参与),原型评审(需要产品+设计+研发+市场等人员参与),最后是开发评审。设计师在制定需求的环节加入是最为理想的状态,这个阶段加入可以更利于理解需求的起源并省去后期重新沟通的成本,还能为产品带入更多设计层面的思考,将用户体验注入到产品的基因中去。而通
在创建多图的网页,或者html5游戏的时候,为了减少网页对服务器的请求,或者方便安排资源文件。 常常会使用sprites,又叫雪碧图或者精灵图。
如何创建精灵图,下面列出两种方式:
方法一,Photoshop方法
新建背景透明的文件后,菜单栏中选择,视图- 新建参考线。下面的例子分别在200px,400px,600px,800px的位置创建了参考线。
然后在把资源添加到合适的位置,图片之间要留几像素的距离, 图片越大,这个距离应该也越大。
这样生成的图片,可以根据参考线的位置和图片大小,在css或者游戏中使用了。
方法二,使用TexturePacker
Tex