分类:设计分享

比BOOTSTRAP还更强大的前端框架TOOLKIT

目前比较流行的前端框架有Bootstrap、Foundation,这两都有着常用的网页设计组件,并且兼容移动设备,深受大众喜爱,但如果你认为这两个框架的组件依然不够用的话,可尝试今天分享的Toolkit,它内置的UI组件更多、更强大,而且实用流行。

Toolkit:比Bootstrap更多实用UI组件的前端框架

Tookit框架特点是使用扁平化设计,并带有很多新鲜的UI组件,配合CSS3动画,使很多组件交互效果变得很漂亮,功能实用强大。

下面来看看一些截图介绍:

Tookit

高亮文本提示

Toolkit 前端框架

Tooltips

073026u1f

提示信息组件(图:左下角)

有动画效果,英文称为Toast,大家可以去官方看实际的DEMO。

导航定位

如下图,页面查看到E区域,右则导航的E就会高亮,像某手机上的联系人效果。

Step

开头按钮

手风琴

图像展示

进程进度条

滑动侧栏效果(Off Canvas)

流布局

Loading…

图像Lazy load技术

好了,实在太多太多了,不一一展示,具体请点击下面的链接去官网看实际效果吧:)




为设计师量身打造的DPI指南

什么是DPI、PPI?

DPI(Dots Per Inch)是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上,计算机屏幕一般采用PPI(Pixels Per Inch)来表示一英寸屏幕上显示的像素点的数量,现在DPI也被引入。

安装Windows操作系统的电脑屏幕PPI的初始值是96,Mac的初始值是72,虽然这个值从80年代起就不是很准确了。 一般来说,非retina桌面(包括Mac)的PPI的取值区间在72-120之间,因为这个取值区间能够确保你的作品在任何地方都能保持大致相同的比例。

这里有一个应用实例: 27寸Mac影院显示屏的PPI是109,这表示在每英寸的屏幕上显示了109个像素点。斜角长是25.7英寸(65cm),实际屏幕的宽度大概是23.5英寸,23.5109约等于2560,因此原始屏幕分辨率就是25601440px。

我知道23.5109不是恰好等于2560.实际上是23. 486238532英寸。要是用每厘米的像素点计算,会更加准确,但是这里你知道就行。

影响

在屏幕上设计一个前面我们讨论过的109*109px的蓝色正方形。

这个正方形在1*1英寸的屏幕上有一个初始的物理尺寸,但是如果用户的PPI是72,蓝色正方形就会显得更大。因为PPI是72时,屏幕需要大约1英寸半的尺寸来展示109px的蓝色正方形。模拟效果如下图所示:

附加: 不考虑颜色和分辨率差异,因为每个人看到的设计都是不同的。你应该力求达到平衡,满足大多数的用户的需求就可以了。不要期待用户拥有和你一样好的屏幕。

屏幕分辨率(原始分辨率)

屏幕分辨率对用户如何理解设计有很大的影响。幸运的是,自从LCD显示器代替了CRT,现在的用户更趋向于使用原始分辨率,它保证了好的屏幕尺寸或者说PPI比例。

分辨率定义了屏幕上显示的像素数量(比如:27寸的显示器分辨率是25601440px,2560是宽,1440是高)。在了解了PPI之后,我们就知道它不是一个测量物理大小的单位。你可以有一个25601440屏幕,它能跟墙一般大,也可以跟脑袋一般小。

如今的LCD显示器有分辨率初始值或者原始分辨率来确定屏幕上展示像素点的数量。它和过去的CRT显示器稍有不同,这里就不赘述了。

一个27寸的影院显示屏,原始分辨率为2560*1440px,PPI为109。如果减小分辨率,元素将会显示得更大,因为有23.5英寸的水平宽度需要数量远远不够的像素点来填满。

如例子所示,屏幕的原始分辨率是2560*1440px。如果分辨率减小,像素点还是被展示在PPI为109的屏幕上。你的操作系统会自动拉伸所有元素来填补间隙,使得整个屏幕被填满。GPU/CPU会捕获所有像素点并且使用新的比例重新计算他们。

如果想要设置27寸屏幕分辨率为1280*720(之前宽的一半,高的一半),GPU会让一个像素点变成原来的2倍大来填充屏幕,那么结果就是会变得模糊。在分辨率为原来一半的时候,因为有简单分频器的存在可能看着还算可以。但是如果使用原来的1/3或者3/4,最终会以小数点结束,就不能等分一个像素点了。我们来看下面的例子:

思考后面的例子:在原始分辨率的屏幕上画一条1px的线,然后设置分辨率为50%。为了填满屏幕,CPU需要制造150%的视觉效果,所有像素点都要乘以1.5,1*1.5=1.5,但是因为不能有半个像素点,这就使得填充周围的像素点的颜色只有一部分,便产生了模糊。

这就是为什么当你想要改变一台Retina Macbook Pro的分辨率的时候,系统会展示下面的窗口来让你知道(下面的屏幕截图)这个分辨率会“看着像”1280*800px,它采用用户的分辨率经验来表达尺寸比例。

这些描述带有浓重的主观色彩,因为它用像素分辨率作为衡量物理尺寸的单位,虽然不够严谨,但至少他们觉得是对的。

附加:如果你希望你的设计精确到像素,那么最好不要改变原始分辨率。你也许觉得使用小的比例会更舒服,但是当涉及到像素点时,这样会影响精确性。有些时候,用户会把调整分辨率当作在控制屏幕(特别是桌面)美观程度的方式,这样虽然会让设计看起来不太好,但是可以满足用户对易读性的需求。

什么是4K

你也许听到过很多次4K,它在最近非常流行。在了解它是什么之前,我们需要先弄明白“HD”的含义。

需要事先声明的是,本文是简化版本,所以这里只考虑最常见的分辨率。HD有不同的类别。

它适用于从1280*720px或720p开始的720水平的任何分辨率。一些地方也将这个分辨率SD叫做标清。

全高清适用于1920*1080px的屏幕。大多数的TV以及越来越多的高端手机(Galaxy SIV,HTC one,Sony Xperia Z,Nexus5)都是这个分辨率。

4K始于3840*2160像素,它也叫做Quad HD,被称为UHD超高清。简而言之,你可以放4个1080p的像素点在4K的屏幕上。

另外一个4K的分辨率是4096*2160,这个稍微大一点,一般用在投影仪和大画幅相机上。

如果我外接一个4k的显示器到电脑会发生什么呢?

最新的OS不再参照4K的比例,这意味着给Chromebook或者macbook外接一个4K显示器,将会使用最高的DPI。假如这样,200%或者@2x,按照正常比例展示就会看起来很好但是有点小。

假设的例子:如果你外接一个12寸4k屏幕到12寸高清屏幕(2x)的电脑,所有东西都会显得小了两倍。

附加:

  • 4k就是四倍全高清。
  • 如果现在的OS掌握了4k但是又不按照比例来,这说明现在还没有特定的4k资源。
  • 如今没有手机或者平板电脑使用4k.

显示器赫兹

稍微从PPI和屏幕分辨率中休息一下,来看个小知识。你可能注意到在屏幕设置中靠近分辨率的地方有显示器的Hz值,它和PPI没什么关系,显示器赫兹或者刷新频率是显示器每秒展示固定图像或者帧的速度单位,比如一个60 Hz的显示器每秒可以显示60帧,同样,一个120 Hz的显示器每秒可以显示120帧。

在UI环境中,显示器赫兹(Hz)决定了动画的流畅和精细程度,大多数的屏幕都是60Hz。而每秒显示的帧数依赖于设备处理图像的能力,像在Atari 2600使用120Hz屏幕就没有太大的用处。

下面这个例子,可以帮助大家更好地理解。T-rex同时在60Hz和120Hz的屏幕上以完全相等的步伐快速从A点到B点,60fps的屏幕上展示了9帧动画,而在相同时间内120fps的屏幕展示了2倍帧数,并且动画在120Hz屏幕上会显得更加流畅。

附加: 也许有人会说,每秒显示60帧以上人眼是无法识别的,这是错误的。

什么是视网膜显示屏

“Retina(视网膜)显示屏”是Apple公司在发布iPhone 4时引入的。之所以叫做Retina是因为设备的PPI非常高以至于人的视网膜也不能在屏幕上分辨出像素点来。

这个说法在现在的设备的屏幕范围内是正确的,但是随着屏幕越来越好,我们的眼睛也会被训练得足够感知像素点,特别是圆形的UI元素。

从技术的角度来讲,他们做的就是在完全相同的物理大小上展示比原来高和宽多一倍的像素点。

iPhone 3G/S是3.5英寸的斜角,分辨率为480320px,PPI为163。 iPhone 4/S是3.5英寸的斜角,分辨率为960640px,PPI为326。

事实证明正好是两倍的关系,同样的物理大小,屏幕上的元素却有两倍的清晰度,因为他们有两倍的像素点。1个标准的像素=4个Retina像素,像素的四倍。

思考下面的例子,在复杂设计中如何直接应用:

图注:在第三方设备上很难模拟出来自不同设备的不同图片质量,如上图所示,Retina的音乐播放器虽然与iPhone 4的音乐播放器有相同的物理空间,但图片质量看上去比iPhone 4好了两倍并且更清晰。如果大家想在本地进行验证,我会提供免费的演示事例源码,供大家下载(http://sebastien-gabriel.com)。

因为“Retina”显示屏的命名归Apple公司所有,所以其他公司使用“HI-DPI”或者“超大像素sp33d显示器”(我将注册这个)或者其他的来表示。

附加: 使用Apple的产品是熟悉DPI换算,理解分辨率、PPI、物理尺寸比例之间差异的极佳方式,因为你只需要考虑一个像素比。

什么是像素比

当你的设计需要在不同PPI下转换时,像素比就是你的救星。当你知道像素比后,就不需要再考虑设备的详细规格了。

以iPhone 3G和4为例,相同物理大小上iPhone4的像素点是3G两倍,因此像素比就是2,这表示只需要用你的资源乘以2,就可以兼容4G的分辨率了。

让我们先创建一个44*44px的iOS上被推荐的touch按钮(我后面会介绍),定义为典型按钮“Jim”。 为了让Jim在iPhone 4上看起来更好,需要创建一个它两倍大小的版本。下面就是我们做的。

很简单。现在的Jim,一个是标准PPI(iPhone 3)的Jim.png版本,一个是200%PPI(iPhone 4)的Jim@2x.png版本。

现在你也许会问,“等等啊!我很确定还有其他的像素比,不止这两个。”有,这是一个噩梦。好吧,也许不是噩梦,但是我很肯定你宁愿花一天时间熨袜子也不想处理无数的像素比。幸好这也没有你想象的那么严重,我们后面再说。

让我们先说说单位,因为现在比起像素,你更需要单位来规范多DPI设计。这就是DP和PT起作用的地方。

附加: 对于每一个你正在做的设计,像素比都是需要知道的。像素比把屏幕大小和PPI结合起来,让人们更理解它们。

什么是DP、PT、SP

DP或PT是测量单位,你可以用来规范你的各种设备和多DPI的app模型。 DP(Dip)表示独立于设备的像素点,PT表示点。DP用在Android上,PT用在Apple上,但是他们本质上是相同的。

简而言之,它能定义独立于设备的像素比的大小,这会包含在不同角色(如设计师和工程师)之间的讨论规则中。

继续说前面“Jim”按钮的例子。 Jim在标准的非Retina屏幕上宽度为44px,在Retina屏幕上是88px。从技术上给Jim添加20px的padding,在Retina上padding是40px。但是,当你基于非Retina屏幕设计时计算Retina的像素值并没什么意义。

因此我们需要做的就是以标准的100%非Retina比例作为一切设计的基础。

在这种情况下,Jim的大小就是4444DP(PT),padding为20DP(PT)。你可以在任何PPI上执行你的规范,Jim仍然是4444dp/pt.

Android和iOS会调整自身大小适应屏幕并且使用正确的像素比来进行换算,这就是为什么我发现使用屏幕的原始的PPI设计会更简单。

SP和DP、PT从用途上来讲是不同的,但是工作方式相同。SP表示与比例无关的像素,通常用来定义字体大小,SP受用户Android设备字体设置的影响。作为一个设计师,为任何事物定义SP就像定义DP,最好基于清晰的1x的比例(以16sp为例,它是非常便于阅读的字体大小)。

附加: 始终使用分辨率或者非比例的值作为规范。屏幕尺寸、分辨率种类越多,它就越重要。

PPI配置

现在,你已经知道PPI、Retina、像素比是什么了,接下来我们要讨论的是 “如果我在设计工具里改变PPI配置,会发生什么呢?”

如果你问自己这个问题,那就表示你对设计软件比较熟悉。

任何非打印的设计使用像素大小不用考虑原始PPI配置。

软件PPI配置是打印的一个传统。如果你只是做web设计,PPI对位图大小没有影响。

这就是我们使用像素比而不直接用PPI值的原因。你的画布和图像总是会被被软件按照对应的像素比换算成像素点。

这里有个例子。你可以在允许配置PPI值的软件(比如Photoshop)里面进行试验。我在Photoshop上画了两个80*80px的正方形和16pt的文本,一个配置的PPI值是72,另一个是144。

如你所见,文本变大了,准确点说是两倍大,然而正方形还保持不变,原因就是Photoshop按照PPI值放大了pt值,结果在PPI值变为两倍的情况下文本大小增加为原来两倍。而用像素定义的蓝色正方形,保持了原来大小。像素就是一个像素点,不管PPI怎么配置它会一直保持一个像素。造成这个差异的是用来显示它的屏幕的PPI值。

我们需要记住的是在做数字化设计的时候,PPI只会影响你对设计的感知、你的工作流和以pt为单位的图案例如字体。如果你在工作资源文件里包含了各种PPI配置,程序就会根据接收到的文件的PPI比例在不同的文件里调整转移视觉的大小,这会成为一个需要解决的问题。

那么,解决方案是什么呢?就是坚持使用PPI(对于1x设计,最好控制在72-120之间)。我个人使用72PPI,因为这是Photoshop的默认配置,我的同事也是。

附加:

  • PPI配置对输出到web上的设计毫无影响。
  • PPI配置只对基于PPI独立计量(比如PT)产生的图案有影响。
  • 像素是任何数字化设计的度量单位
  • 保持像素比以及设计的目标,而不是PPI
  • 在进行数字化设计时使用实际的PPI配置,你会感受到它在目标设备上的样子(以1x的web/桌面设计72-120ppi为例)。
  • 在你的文件中自始至终保持相同的PPI配置

关于这个的额外趣味阅读:StackExchange post

iOS上的PPI处理

是时候钻研下特定平台的设计了。

让我们花点时间看看2014年年初时的iOS设备。 从屏幕大小和DPI的角度来看,iOS有两种类型的手机设备和两种类型的笔记本/台式电脑屏幕。

对于手机,有iPhone和iPad。 在手机分类中,有过去的3GS(iOS6依旧支持)和更高版本,其中只有iPhone 3GS是非Retina。iPhone 5以及后来的都用了和iPhone 4/4s有相同DPI的更好的屏幕。让我们来看看下面的列表:

2014年9月Apple宣布,现在又有2个新类别的iPhone:iPhone 6和iPhone 6 Plus。

iPhone 6比5要大一点(0.7英寸左右),但是PPI相同。iPhone 6 Plus由于它的尺寸,5.5英寸,产生了iOS上新的像素比,@3x。

相较于其他iPhone,iPhone 6 Plus控制展示比较特殊的是:视觉效果降频。

以为iPhone 6设计为例,设计的画布为1334750px,手机上就呈现1334750的物理像素。当为iPhone 6 Plus时,手机的分辨率小于渲染的图像,因此你设计的分辨率为22081242px,展示时降频为19201080px。如下图:

物理分辨率比渲染分辨率小15%,会造成一些细节问题,比如半像素使得精细的地方变模糊。分辨率如此高也是很微妙的,除非你近距离观察。因此,在2208*1242px的画布上设计,需要注意设计中真正精细的地方,像是分隔符。模拟如下:

感谢Paintcode的说明,看看他们专门的页面。点击查看

在iPod touch分类中,iPod第四代出来的时候使用的是iOS6和非Retina。iPod第五代以及后面的都使用Retina屏幕并且兼容iOS7,它的屏幕大小与iPhone 5相同。

最后说说iPad。除了iPad 第一代,其余的都用的是iOS7,同时只有iPad2和iPad mini是非Retina屏幕。从设计的角度来看,iPad mini只是普通的iPad(一样的PPI屏幕),但是物理体积更小,也就是说它们拥有相同的分辨率,只是大小从9.7英寸减小到了7.9英寸。保持同样的比例,便会相应地增大像素点的密度,你的虚拟资源就会显得更小了。

至于台式机和笔记本,我们不会全面讨论Apple提供的各种尺寸的屏幕。在今天,Apple提供的几乎都是1x像素比的Retina屏幕(Macbook,Macbook Air,旧版Macbook Pros,台式机显示器),Retina只应用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x。为台式机设计与手机设计不同的是,你需要以相同方式设计来覆盖这两种不同类别的屏幕。

当只使用一种像素比时,基于iOS和OSX的设计是非常简单的。我建议开始设计时先用基础的PPI(例如,100%/1x)然后增加到2x并在2x的屏幕上校验你的设计并且生成2x的资源。当你熟悉在1x和2x之间切换设计后,就能够直接在2x上进行设计了,低分辨率时资源更小。如果你正在为Retina屏幕设计的话(Macbook Pro),这就特别有用。

引入资源,chrome为例

如图所示,每次请求资源需要传送两张图片。非Retina下图片名为name.png,Retina的图片增加到@2x命名为@2x.png,这是iOS开发约定的命名规范。

如果你创建了一个图片只用在iPad上,我们在.@2x后面加上~iPad,这仅仅只是chrome的约定。对需要的资源都这样处理,不要只用一个版本的资源来覆盖所有DPI。

附加, iOS规则集:

  • @2x的资源必须始终是1x资源的两倍。
  • Retina资源加上@2x.
  • 始终创建100%和200%比例的图片。
  • 1x和2x的资源始终要保持名字相同。
  • 在100%比例下开始设计,然后做乘法。
  • 传递.png格式的图片。
  • 使用pt创建规范而不是px。

Android上的PPI处理

Android平台的设备种类比iOS多,因为任何OEM都可以生产设备并且几乎没有比例的限制,然后加上自己版本号。结果就是生产出几乎无限制的屏幕大小和DPI种类,电话和平板电脑一样大,或者电话和平板电脑一样小的情况比比皆是。为此,你的设计总是需要做适配。

在这个部分,我们将采用不同于iOS的方法,我们先来讨论下像素比和DPI分类。

Android设备可以分为两类:手机和平板电脑。这两种设备又可以按照不同DPI分为:ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi。

幸好,有些比其他使用得更加频繁,有些甚至已经弃用了。

首先我们要找到等价于iOS上1x的基础单位。在Android上,这个基础单位就是MDPI。

让我们看看下面列表的像素比。

是的,很多,而且还没有完,还有一个落下了。

实际上,目前正在使用的DPI有4个:MDPI, HDPI, XHDPI和XXHDPI。 LDPI是过时的DPI,现在已经不再使用,TVDPI是TV UI的特殊例子,在2012年版的Nexus 7中短暂使用过,在手机和平板电脑的使用中没有考虑的必要。尽管如此,TVDPI的像素比(1.33x)还是被用在一些安卓系统的设备上,像是LG G手表,我们后面来讨论这个。

让我们结合带着各自DPI的Android手机和平板电脑全面客观地看待事物。

也许在现在这个时候有一个设备使用XXXHDPI的实际app资源,但也不是很常见。如果你能用额外时间生产XXXHDPI资源,你的app便不会过时。

引入资源,chrome为例

每次请求资源都需要传递一组4张图片,从MDPI到XXHDPI,无需考虑LDPI。注意,在下面的chrome版本中,TVDPI的输入在这个例子里的5张图片里也很清楚。

和iOS一样,我建议把100%或者1x的像素比作为你设计的基础,这会让设计在适配其他像素比的时候容易一点,特别是在像素比为1.33和1.5的安卓系统上。

看看下面安卓上chrome的返回按钮的例子。

DPI后面跟着的建议名称不是安卓官方指南强制要求的,这是我们为资源取名的方式,因为现在有限的设计工具很难给每个资源定义一个路径。 考虑到一个资源有时有上百个资源文件,站在设计师的角度来说这是使输出过程不那么痛苦以及避免重命名错误的一个途径。资源在资源仓库里面的存储方式是有结构的,参考后面:

  • drawable-mdpi/asset.png
  • drawable-hdpi/asset.png
  • etc…

如你所见,资源被截成了3232dp的正方形,Android像素比也会是小数。当用1.33或者1.5乘以一个数的时候,最后的结果很有可能就是小数。在这种情况下你需要通过四舍五入来让数字变得有效。在这个例子中,321.33=42.56所以四舍五入之后是43px。

你需要注意以像素为单位的元素,比如笔画。你需要确保你的笔画既不是1px宽也不是2px同时也不像屏幕分辨率部分描述的那样模糊。

附加, Android规则集:

  • Android有7种不同的DPI,你需要关注其中的4个:mdpi,hdpi,xhdpi,xxhdpi,如果希望你的app面向未来,可以关注XXXHDPI。
  • MDPI是基础的DPI或者1x像素比
  • Android使用dp代替pt当作参数规格,但是他们是一样的。
  • 用你最好的判断来处理小数像素比。
  • 传递.png格式图片。
  • 确保检验命名约定,与执行负责人共同完成输出进程。

Mac、Chrome OS上的PPI

Mac(OSX)和Chrome OS在处理PPI方面是十分相似的。 两个OS都支持常规的PPI(100%)和hi-res/retina PPI(200%)。像iPhone和iPad,就只有2x像素比。

即使大多数的用户都使用Mac和Chrome OS,但是也有用户会在低分辨率的设备上使用,我强烈建议将你的app面向未来的高端屏幕。面向未来对于ChromeOS意味着为Web-app或者网站创建hi-res资源,那绝不是浪费时间。当前有3种笔记本处理PPI,13寸、15寸Macbook pro以及Chromebook Pixel。除此之外,Chromebook Pixel还处理了touch。

引入资源,chrome为例

Chrome的工具栏按钮资源就是相似性最好的例子。我们在两个平台上使用完全相同按钮,即使代码不同,视觉上也是一样的。看下面这个chrome菜单按钮的例子。

附加:

  • Chrome OS和OSX像素比相同,都是2.
  • Chrome OS高分辨率展示也处理touch。

可拉伸资源

不管你的app是在桌面或者手机上。你通常都会引入可拉伸资源。

可拉伸资源的建立会使代码在没有减少渲染的情况下比实际需要的多。

他们与可重复资源即使有的时候展示结果一样,工作方式也是不同的。

看看下面这个Chrome的例子。iOS上的工具栏在整个屏幕上只用了一个在x轴上平铺的超细资源。

现在这种方式已经过时了,让我们来看看不同平台如何处理可拉伸资源。

iOS上的可拉伸资源

对iOS的设计师来说这个很简单,因为拉伸在代码里面定义比资源片段或者标记方式好。所有需要做的就是提供一个基础图片,如果你自己还没有实现这个,可以将你的资源规范定义为水平或者竖直可扩展,或者两者均可。看看下面这个iOS上Chrome的默认按钮的例子。

Android上的可拉伸资源

Android有和iOS不一样的处理可拉伸资源的方式,它更依赖设计师一点。

在这个平台你将采用九宫格,这些辅助线包括了4条围绕资源本身的线。他们必须被当作资源的一部分来传递片段/图片,用它来准确的呈现视觉规格。

他们定义了两个区域:可拉伸区域和填充区域。一旦定义好,代码就只会拉伸可拉伸区域,并把内容放在你定义的填充区域。

看看下面的例子,就是你前面看到的Chrome默认按钮的Android版本。为了演示,我把他放大了。

如你所见,这个九宫格是一组4条纯白色的bar。他们在任何DPI下都是宽1px,这是代码表示的。可拉伸区域不包括圆角因为圆角不能平铺开(否则看起来很难看)。在这个例子中,我们给按钮添加了规格允许范围内10dp的padding。.9也需要平铺并且截断部分要100%透明。如果不这样,他就不能正常工作,需要修改。

使用九宫格要求在名称后面加上.9,和在iOS资源上添加@2x的方式一样。重命名按钮的例子如下:

现在你需要非常注意你的资源大小。如果我在演示中放大了它,你就需要通过减小它的尺寸到一个最小限度来优化资源,如后面所示。保持了圆角的原样,但是将可拉伸和内容区域减小到最小限度。

需要注意的是九宫格的标记不会和设计重叠,并且资源切割是合理的。.9需要尽可能靠近资源并不与之重叠,试着不内置padding。前面的例子因为阴影而内置了padding。

九宫格不会代替你导出每种DPI的资源。它需要在每个资源版本都实行。

最后一点,.9可以有许多可拉伸区域(上面和左边),虽然我没有经常遇到这样的情况,但它也是很值得尝试的。

附加: 总是采取最好的解决方案来实现设计,特别是桌面设计。图片越多,app就会变得越沉重。追踪和更新资源也变得困难。九宫格应该使用在命名有规范、组织结构良好的资源中。

Touch和触摸目标

首先需要知道的是做触屏相关的准备和DPI一点关系也没有。但是当涉及到设计UI或者创建资源,弄清楚触屏和DPI的关系就很重要。

选择触屏或者非触屏很大程度上取决于app的适用范围,它被部署在哪里以及希望得到怎样的用户体验。 我们可以简单地将他们分为:非触屏的桌面应用和手机app。

台式机, 非触屏

直到2005年,触屏才开始出现在计算机技术中。 我们使用鼠标和键盘,它们能够非常准确的操作UI。鼠标光标的精度是1pt,也就是说理论上你可以创建一个能让任何人点击的1*1pt的按钮。

请看下面图解。

这是个Chrome OS光标的20x版本。 红色区域是能在UI上触发一个事件的实际区域,十分准确。 你知道我的标题。什么是不准确的呢?手指。

那么如何为触屏设计呢?最好的办法就是让所有东西变得更大。

手指大小

这里有交互中最常用到的两根手指(食指和大拇指)的平均大小,这代表了触摸区域和被手指遮挡了的区域。实际的触摸区域(例如,你手指接触屏幕的那部分)当然会小一点并且更准确,除非你把你的手指压在屏幕上。

在设计触屏的时候,放大触摸目标的尺寸比低估更安全。

如何将此应用到我的设计流程

如我们已经看到的,在像素世界英寸或者厘米并不是一个好的计量方法,即使是像素也不是真正好的计量方法。所以你怎么确保你的设计是可被触摸的呢?

我虽然讲了很多理论知识,但是更重要的是自己试着在目标设备/台式机上设计。 但是为了避免浪费更多时间,有一些基础的像素的大小使用起来是比较安全的,并且被推荐使用在每个OS上。

各平台推荐的触屏目标

需要注意的是,这些大小都是为了方便,都不是现实生活中的测量单位,他们依赖于OEM和各厂商遵守这个指南来生产屏幕,使之保持大小、dpi比例一致。

如你看到的,每个OS都有一系列自己的推荐规范,但是都在48pt左右。Windows的规格是包含了padding的,所以我把它加到这里。

尺寸的不同是源于不同的因素。 Apple可以控制它的硬件,因此知道触屏的质量并且能够控制这个确切的比例,它可以触摸更小的目标,另外,本身的物理尺寸也更小。

另一方面,Android和Windows有不同的OEM,都各自生产自己的硬件,有更大的触摸目标会更“安全”。他们的UI更加无规范(特别是Windows),物理尺寸也越来越大了。

Chrome为例

这是在Chrome上的应用,编码使触摸目标呈蓝色。

如你所见,两个平台上工具栏都是被推荐的触摸目标的高度。可视范围在iOS和Android上分别是4444pt和4848pt的正方形,这不仅使得UI在大小方面和其他OS保持一致,而且也能让与用户交互的部分都保持最小的规格。

Windows 8以及Chrome OS

Windows 8和Chrome OS都支持触屏和非触屏的接口。如果你在为Windows 8 设计app,我强烈建议按照它们guidelines for touch targets来做。

Chrome OS准则目前尚未发布,但是Pixel使用问题不大。因为所有Chrome OS的app都是基于web开发,我的建议是按照触屏设计并且遵照Android touch targets guidelines来进行开发。

web,混合设备和未来

如果你在为手机设计,触屏是不二选择。如果你在设计桌面应用,参照非触屏。这听起来很简单但是在混合设备兴起的时候很容易被忽略,。

混合设备是一种既支持触屏又支持非触屏的设备。Chromebook Pixel,Surface Pro和Lenovo Yoga就是很好的例子。 在这样的情况下,我们该做什么呢?没有简单的答案,但是我会首先给一个答案,触屏方向,因为那是未来的发展趋势。 如果你为web或者其他相关的设计,首先考虑触屏。

附加:

  • 移动和触屏设计几乎是未来发展趋势。
  • 参考每个OS上建议的触摸目标。这能帮助你更好地设计并让你的产品在OS中保持一致。触摸目标有参考价值,但是不代表你需要不折不扣地遵守,同时你也需要根据经验判断。

设计软件

软件不能制造设计师,但是在完成任务时选择使用正确的软件可以提高效率,更快完成工作。软件“诀窍”不应该是你唯一的技能,但是学习和操作正确的工具可以帮助你产生灵感。

当涉及到在设计界面处理DPI变化,不同的软件采用不同方式。在特定任务中有些软件比其他的更好。下面是最常见的:

Photoshop

界面设计工具之母。也许也是如今使用最广泛的工具。关于它的资源、教程、文章数不胜数,Photoshop几乎几乎贯穿界面设计的每一个阶段。

正如其名,软件最开始的目的并不是界面设计而是图像或者位图处理。随时间推移以及界面设计的产生,设计师们再次使用起来。部分人是因为他们以前就用并且是那时仅有的能够把事情做得足够好的软件。

在今天,Photoshop是主要的位图编辑工具,也是UI设计中使用最广泛的软件。数十年的积累使得它成为学习和使用比较困难的软件。作为软件中的瑞士军刀,你可以用来做任何事,但是并不总是最有效的。

因为最初是基于位图的,所以Photoshop十分依赖DPI,下面描述的是与之相反的Illustrator和Sketch。

Illustrator

Illustrator的矢量是基于同级的。顾名思义,它重点在插画,但是也可以作为界面设计工具。

Illustrator也很适合平面设计,因此它的界面,颜色管理,缩放,标尺和单位首先就吸引你,只需要一些补丁就会更便于使用。和Photoshop一样,他也是一款很强大的工具,同时也需要付出努力去学习。

和Photoshop不同的是,它是独立于DPI的,因为它依赖矢量图。与点阵图或者光栅图相反,图像生成采用矢量图,依靠数学公式计算,以编程方式重新调节大小并且不会损失图片质量。

了解栅格化和矢量化图片的不同是建立可扩展视觉设计和资源的关键。

Sketch 3.0

与Photoshop和Illustrator比起来,Sketch还很年轻。虽然只产生了四年,但它在UI设计行业里面引起了巨大的反响。因为从一开始,Sketch的目标就是供界面和UX设计师使用,没有Photoshop和Illustrator的历史积累,Sketch把自己定位成针对小众用户——界面设计师的一款完美的调整工具。

Sketch适合快速设计框架以及复杂的视觉设计。它像Illustrator一样是完全基于矢量的,简单轻量化同时还拥有美观的UI。它结合了铜版纸使用方便和灵活的资源生成系统,让它成为跨DPI、跨平台设计最快的工具。最近发布的3.0版本也是可以用来替代Photoshop的产品。

但是也有不足的地方,Sketch是小团队开发的,而且出来得比较晚。尽管它的团队能够积极响应需求的变化,但是也没有Adobe(Photoshop和Illustrator)公司这样的规模。在位图编辑时,Sketch只能满足(设计时)最低的需求,但是Photoshop的功能就更加全面。同时,因为它的年轻,在源文件、教程和社区方面在数量上也远少于Photoshop,不过,社区用户都很积极上进。

另外私人方面,从8年前我就是是Photoshop的用户,但是最近我把我设计中的最重要部分切换到了Sketch3.0。这不是对质量的判断,Photoshop仍然是一个好软件,只是Sketch3.0更加适合我。

 

文档和资源

这篇指南只是一个介绍,真正开始做的时候能学到更多。如果你想要了解更多或者获取我们讨论的主题相关的更详细的内容,可以点击下面的链接:

平台文档

Android UI guidelines

Google Material guidelines

iOS7 UI guidelines

Windows UI guidelines

Google dev Principles of site design

速查表和模板

iPhone 6 Screens Demystified

Ultimate guide to iphone resolutions by PaintCodeApp

Screen sizes, ratio and PPI

iOS7 designer cheat sheet

iOS7 design resource (requires Apple account)

App icons template, Android and iOS

Bjango blog (A design article gold mine)

iPhone GUI and iPad GUI(.psd) by @teehanlax

工具

Density converter by @brdrck

Android asset generation by @brdrck

Android design tips by @destroywerk and @BPScott

9patch creation in Android by @romannurik

Android asset studio by @romannurik

原文地址:sebastien-gabriel
译文地址:w3ctech




响应式导航有哪几类设计方式?

在大屏幕上,导航置顶或导航居左是两种典型的设计模式,然而,这两种模式在小屏幕上却遭遇挑战。在响应式设计日渐流行的今天(译者注:其实已经流行了好几年了),我们更有必要重新审视针对小屏幕环境下的导航设计模式。这些通过移动设备访问的页面导航,必须既方便用户快速访问,又不能过于突出。

以下,我列出了 7 种常见的响应式导航的设计模式,它们分别是:

  1. 置顶(或“放任自流”)
  2. 页脚锚点
  3. 菜单选择
  4. 开关
  5. 侧滑
  6. 置底
  7. 彻底隐藏

上述每种设计模式都各有利弊,大家在选择导航设计方案时,需要根据项目的实际情况作出判断。

置顶(或“放任自流”)

将导航置顶或让导航随布局任意流动(放任自流)是一种最简单的导航实现方式。正是由于这种易于实现的方式,它也成为了当下许多响应式网页的“标配”。

优点

  • 易于实现:在大屏幕和小屏幕上的实现方式一致
  • 不依赖 JavaScript:这样就最大程度上保证了兼容性
  • 无需打破原有 CSS 样式
  • 无需打乱内容本来的顺序:这种方式保证了它是完完全全的流体布局,无需一丁点的人为干预

缺点

  • 占用空间:高度问题在移动端是核心问题。Luke 在自己的书中表达的“内容优先,导航其次”是典型的移动端网页体验。我们都期望用户能够以最快的速度获取内容,这久意味着我们需要移除导航以确保用户关注的焦点始终保持在核心信息上。而当导航高度过大,导致屏幕内的核心信息无法展示的时候,就会引起用户的疑惑。如下图,当我们打开一个页面时,整个屏幕都被导航占据,用户无法获取有效信息。 ![置顶导航在小屏幕上自动折行显示][2]
  • 扩展性差:当你的导航刚好在一行内展示时,若要再添加章节的时候会出现什么情况呢?如果客户突然要求再增加一个名为“产品和服务”的导航类目呢?或者将导航标题翻译成其他语言后导致字符长度的变化呢?这些情况都会破坏原有的设计方案。
  • 粗手指:导航全挤在一起,粗手指心急如焚,怎么点也点不到自己想要访问的导航链,这样就增加了误操作的几率(不适合小屏幕上通过手指进行点击操作)
  • 跨设备的问题:不同设备渲染的方式各异,在 iPhone 上很棒的页面或许在其它平台上表现得很糟糕。 ![不同设备上渲染的差异][3]

页脚锚点

xys20150105

在页面头部只保留一个去底部的锚点,将导航放在页脚是一种讨巧的做法。它节省了头部宝贵的空间,同时又满足了访问导航的需求。

优点: 容易实现:页眉锚点,导航置底,没有比这更简单的了! – 不依赖 JavaScript:这意味着更少的测试和更好的浏览器支持 CSS 改动小:由于采用了绝对或固定位置,将底部导航移到大屏幕的顶部简直太容易了

缺点: 用户迷惑:快速跳转至页脚这一动作容易让用户迷惑 缺乏优雅:这样说很奇怪(译者也有同感),但我(作者)认为类似开关的交互方式更性感一些。这种采用锚点跳转的方式虽然实用,但不优雅,相比那些经过精心设计的移动端应用的交互方式而言太过粗糙。

菜单选择

xys201501051

将导航收纳在一个选择菜单的控件当中是一个不错的方式。它避免了导航置顶所占用的屏幕空间。

优点:

腾出了足够的空间:一个选择菜单无论是在横向或纵向上都特别省空间 符合用户习惯:相比置底的方式,用户更习惯导航被放置在页面头部 容易辨认:下拉菜单的控件样式十分显眼,及其容易发现 支持本地化的交互方式:由于采用标准控件,使得操作十分本地化,这种本地化是指对设备自身属性的支持,比如,在触摸设备上能够通过点击操作,而在轨迹球上支持滚动操作;

缺点:

样式不统一:不同浏览器会呈现不同样式的下拉菜单 可能会让用户困惑:大部分用户只在填写表单时才会看见下拉菜单,而将下拉菜单用作导航,担心用户一下子无法理解 下拉菜单内容的处理方式比较奇怪:因为在下拉菜单中,子项目会自动缩进,这样虽然可用,但从视觉上看十分混乱; 可能会依赖浏览器调用 JavaScript

开关

xys201501052

开关的实现方式类似页脚锚点,但不是点击跳转至页脚,而是点击后将菜单区域滑动展开。同样也是比较容易实现的设计模式。

优点:

易于理解:相较于页脚锚点突然间的跳转,开关这种是位置不变的交互方式更容易让用户接受 交互更优雅(相比跳转而言) 拓展性强:你唯一要做的就是在PC端隐藏开关,在适当的断点处显示它,这一切的一切都能通过 CSS 来实现。

缺点:

动画可能不够平滑:Android 对于动画的支持一直不好,因此,可能得到你想要的效果 非常依赖 JavaScript:正因为打开开关的动画需要 JavaScript 来实现,所以它的兼容性不太好(作者的黑莓设备就不支持);

侧滑导航

xys201501053

侧滑是在 Facebook 的大力推广下流行起来的。之所以叫抽屉源于它的交互动效,当点击菜单按钮后,导航模块会像抽屉一样从页面边缘滑动出现。

优点:

空间充裕:因为从边缘滑出,这些内容被理解为在底层或屏幕外的无限区域内 好看:简洁就是美,而且动画效果惊艳。

缺点:

小众:与其他简单的设计模式比起来,从侧面滑动展开导航栏的效果需要若干复杂的动画来实现,这样就将一些低端设备挡在门口。因此,如果你的项目是面向大众而设计的,需要谨慎。 适配性不好: 这种模式仅适合移动设备,在大屏幕上的表现并不好(也没有必要)。 可能存在迷惑:当我(作者)第一次看到 Facebook 采用这种设计时,我还以为页面出错了呢!在屏幕右侧露出一些信息对于我本人而言还是很奇怪的(纯属作者个人看法)

只在页脚放置导航

只在页脚放置导航和页脚锚点类似,只是它不在页眉放置锚点。这种模式的理念是内容优先、导航其次。 这种方式需要用户将页面滑动至底部才能看见导航

优点: 容易实现 兼容性(无需 JavaScript) CSS 改动小:由于采用了绝对或固定位置,将底部导航移到大屏幕的顶部简直太容易了

缺点: 难以发现:无论在大屏或小屏上都很难发现页脚会有导航; 难以使用:移动端用户需要不断滚动页面至底部,才能使用页脚导航,十分不便

相关案例: Pears Fray

彻底隐藏

将导航隐藏,得到最大化的空间。

这种设计模式遵循了该法则:不要惩罚那些通过移动端访问你网站的用户。 移动端用户到底想得到或不想要哪些信息仍旧是个谜。移动端用户会做任何桌面端用户都会做的事情,因此,仅针对移动端用户提供某些核心功能是很有必要的。

优点: 屌爆了(原文 Sexy as hell 求大神信达雅的翻译)

完美的利用有限的屏幕空间

对于移动端设备有很大优势,只用向下滑动就能查看更多。

缺点: 去掉了针对移动端用户的核心功能或内容 将链接或内容隐藏的做法并不好。响应式的鼓吹者认为这种做法会导致移动端页面与桌面端形成内容上的差异,以及体验上的灾难。

增加页面额外的开销 使用命令 display: none 仅能在页面上隐藏该元素。页面的代码、图片或别的文件依旧在后台下载,这最终导致了页面访问缓慢。

难以维护 两个完全分离的导航体系将成为后期维护时的负担。

可能存在迷惑 移动端用户向下滑动页面来刷新列表时,并不会意识到 当我(作者)第一次看到 Facebook 采用这种设计时,我还以为页面出错了呢!在屏幕右侧露出一些信息对于我本人而言还是很奇怪的(纯属作者个人看法)

结语

移动导航就像你真正的朋友一样:彼此需要,但又给彼此空间;而那些假装跟你很要好的朋友总是在你需要的时候消失(当你需要导航的时候找不到)或者占据你的个人空间而让你抓狂(比如:擦,从我床上滚下去);因此,针对响应式导航进行设计,需要在访问的便携性和空间上做一个平衡。

原文地址:aliued




做设计为什么还需要看数据?

一、做设计为什么还需要看数据?

很多设计师从来不看数据,要么是因为没有数据可看,要么是根本不想看,但是也一样把设计做的很好啊!设计本来就是有感性的一面,为什么非得要和数据扯上关系呢?我们不妨先看看设计的本质是什么。设计不同于纯粹的艺术,艺术源于艺术家对现实的观察和思考,以及对这种观察和思考的自我表达;设计天生就是为别人在做事情,纵然同样需要观察和思考,但是这种观察和思考不是为了表现设计师的自我,而是为了更好地服务于某个用户群,因而设计师了解用户就变得非常重要。尤其是要了解用户的目标、行为、态度等相关的情况,我们这里说的数据其实也就是对用户的目标、行为、态度等情况的量化,因此,通过对这些数据的分析,我们可以更好地挖掘用户的需求,进而为用户提供更好地体验。

简单点说,设计是服务于用户的,了解用户才能更好地做设计,数据是了解用户的一种途径。

二、数据在项目中的作用有哪些?

要了解这个作用,我们先回到设计师看数据的主要场景,总结起来无外乎两类:一个是因为项目的需求,通过数据的论证,让设计走得更从容,有理有据,而不是设计师自己的YY;另外一个是日常监测的需求,自己做的产品,总要知道大概有多少人在用,使用的情况如何,用户的行为和预期是否一致。也就是说要了解你的设计被使用的情况,否则你怎么知道设计的好不好,是不是达到了设计目标,是不是真的帮助用户解决了问题。

先来分析下项目中看数据的场景。几乎整个设计的过程都可能会用到数据,概括起来可以把这个过程切分成三部分:

设计前数据帮你发现问题

所有设计开始之前的研究和分析,都是为了更明确用户的需求,明确为什么要做这个设计?从业务的角度来看,这个产品对公司有何价值,此次设计要达到什么目的;从用户的角度来看,这个产品对用户有何价值,此次设计要为用户解决什么问题;在了解业务诉求和用户诉求的过程中,我们难免要用到数据,这个阶段,数据的作用就是为了“发现问题”,看看设计可以解决什么问题,从而更佳明确设计的目标。

当然具体的工作中,多数设计师都比较纠结,既要考虑业务诉求,又要考虑用户诉求,如果这两者不能完全匹配的时候,我们该咋办,是两者的相加吗?还是我们就只考虑用户诉求,对业务诉求看看就行了。我个人的理解是,现实工作中我们都不是在追求最完美的设计,更多的是在做平衡,如果是一个用户型的产品,比如偏向于为用户提供某个功能的平台,本身就是完全从用户的角度出发,通过为用户提供功能帮助用户解决问题的,应该向用户诉求靠拢多一些;如果是一个商业型的产品,比如偏向于为用户提供某些内容的平台,那么在为用户提供主动查找的入口的同时,可以适度的向着业务发展需求倾斜,做适度的业务层面的引导;当然这个也不是绝对的,往往同一个平台,同一个产品,在不同的发展阶段也有不同的需求,如果是一个全新的产品,业务的生存就变得格外重要,这个时候设计应该多一些考虑业务诉求,先帮助业务生存,否则,这个产品都要挂了,还怎么为用户提供服务呢?

当然,好的设计师总是能在业务和用户之间找到巧妙的平衡,找到二者的交集,举个例子,假如这个产品这个阶段就是要做用户规模,而用户诉求是享受个性化的服务,看似完全不关的两个诉求,实际上我们完全可以通过更好的个性化服务提升用户满意度,获得好的用户口碑,再间接地借助用户口碑提升产品的用户规模,这二者之间并不是完全的不相干,更多的时候看能否找到他们的关联性,抓住阶段性的设计目标。

通过一个具体的例子看看如何利用数据来发现问题?数据代表的是用户的目标、行为和态度,但是单独看一个数字是没办法发现问题的,数据的对比是最简单有效地手段。我们知道交易关系买家所产生的交易对1688网站有着非常重要的意义,我们想提升交易关系型买家的交易体验,但是不知道从何入手,因此做了大量的数据分析。交易关系买家是通过什么方式找到老卖家?不同路径的转化率如何?不同用户查找方式与转化率有什么差异?

首先,通过用户群的细分,我们发现,交易关系买家通过搜索支付订单转化率是搜索整体支付订单转化率的2倍。因此,在搜索结果中增加老买 家标签,方便找到老卖家。

此外,我们还发现,普通会员、1-2星会员等级,是提升交易关系交易的关键用户。

通过以上的数据分析,我们找到了目前主要的一些问题,围绕着这些问题,后续做了优化方案。

设计中数据帮你判断思路

因为设计师的个人经验不同,创造性思维不同,因此不同的设计师面对同一个问题,解决方案也很可能差别较大,即便是同一个设计师也会想到不同的解决方案,到底哪个方案更合适,有些情况下数据可以给你参考意见,为你提供“判断思路”,协助你做决策;条条大路通罗马,但是哪一条路才是当前最合适的呢?

通过一个具体的例子看看如何利用数据来判断思路?有一个批发类的电商网站(1688.com)的频道首页(ye.1688.com),我们发现用户的转化率很低,就去研究了数据,然后结合了对典型用户做的用户访谈的结论,最后发现转化率低的原因其实很简单,这个频道的首页入口主要是来源于整个网站的首页,而整个网站的首页是一个全行业品类的页面,用户如果是女装行业的买家,她从一个全品类的首页点击一个链接进入另一个全品类的页面,再艰难的找到女装这个类目,再点击进入List页面查看商品,这个路径是非常深的,那么怎么解决这个问题呢?那就是要避免做女装的用户从网站首页进入这个频道之后还要再次选择女装类目,才能看到女装的商品!

解决这个问题的思路有哪些?可以在网站首页增加入口,让用户直接点击女装类目进入频道首页,给用户展示女装商品;可以在用户进入频道首页之后,根据行业偏好的个性化数据来推荐商品,推荐的不准确,用户也可以去定制;到底哪个更靠谱?两个思路各有利弊,鉴于前一个思路需要有外部依赖,要改动网站首页,所以我们内心都很期望后一个思路能跑通,但是怎么知道这个思路行不行?首先我们需要知道行业的个性化推荐能覆盖多大的人群,又有多少的人愿意去定制行业偏好?

对于普通的网站来说这个可能是一个不够明确的问题,但是1688.com是一个会员用户早就过亿的B类电商网站,有着如此庞大的用户规模,较高的用户覆盖率,这就意味着对用户行为数据的积累,再者B类的用户有一个显著地特征就是在一个较长的时间里,行业的偏好相对比较稳定,如果是一个主营女装的买家,那么她的偏好一般会以女装为主,不会超出服装的范围,最多会有少量的服装周边配套的采购。

如上图,通过行业偏好的个性化算法,我们追踪了一段时间来访这个频道首页(ye.1688.com)的用户数据,我们发现大约2/3的用户是有着非常明确的行业偏好的,那么这基本可以断定做行业偏好的个性化推荐是靠谱的!但是剩下的1/3用户愿意去定制行业偏好吗?我们当时因为时间原因,无法直接从这1/3无明确偏好的用户中去判断他们是否愿意定制偏好,但是通过整个用户群的问卷抽样调查发现,大约3成的用户表示定制行业偏好是很好的服务,基于这些情况,我们判定基于行业偏好的个性化推荐能够解决绝大部分用户的行业偏好问题,提升了内容的相关性。这个方案最终上线后,实际上有大约10%的人真正找到定制入口并且产生了定制行为,70%的人不用定制,实现了默认的精准推荐。

设计后数据帮你验证方案

我们的设计方案到底做的好不好呢?衡量标准就是看设计方案是否能够达成设计目标?这也需要数据来量化,通常会用GSM的模型来支撑设计的验证。G(Goal)设计目标、S(Signal)现象信号、M(Metric)衡量指标,所谓的设计目标,就是要确定设计要达成什么结果,要解决什么问题;衡量指标,我们不能凭空猜想,必须建立在设计目标的基础上,先假设设计目标会实现,那么会出现什么现象或信号呢?列举出所有的现象或信号,选择我们可以监控的到的,然后对这个现象或信号产品进行量化,自然就得到了衡量指标,但是指标的波动幅度往往要依赖经验来定。

比如说,某个产品的设计目标是通过设计的引导,让更多的买家产生购买,想象一下,如果设计目标实现了,会有什么现象呢?可能会有更多的人有购买意愿,看了商品详情页,点击了购买按钮等等,最终也产生了购买,那么,衡量指标是哪个?设计只是改变了商品信息的呈现方式,并不能改变商品本身的质量或背后的服务,所以我们应该重点考察设计是否强化了引导,提升了购买意愿,是否激发了用户进一步了解的行为,主要是指浏览行为,最典型的就是到达了商品列表页或者商品详情页等,量化的结果就是看又进一步行为的用户的比例;

通过一个具体的例子看看如何利用数据来验证你的设计方案是否达成设计目标。曾经有一个找产地的功能模块,我们在设计前进行了调研,用户告诉我们他们需要找产地,而且比较习惯于用地图来找产地,我们欣喜若狂,照着这个方向做了个产地直达的楼层,我们坚信用户告诉我们的肯定是对的!但是这样的设计真的能达到帮助用户高效找产地的需求吗?来看下面的数据分析

用户的目标不是要找产地吗?还告诉我们用地图找产地很符合他们的习惯呢?为什么上线后,用户却不怎么使用这个版块???我看到这个数据非常的意外,一时之间根本摸不着头脑,后来再去看了看这个板块的热力图,一下子恍然大悟。通过数据分析得出,地图纵然符合用户习惯,但是才这么狭小的地图上进行如此复杂的操作,其效率是非常底下的,因此将地图找产地的功能保留下来,只是不作为默认的方式,采用了按照热门的、区域的、附近的、可搜索的、地图的方式综合承载,最后取得了较好的效果!

三、如何利用数据做日常监控?

作为一个设计师,你的作品上线后,有多少人用?这些用户是谁?有什么特征?用户具体是怎么在使用你的产品的?你的设计是否还有优化的空间?如何才能为用户打造更好的使用体验?怎么才能知道这些数据好不好,有没有问题呢?主要是靠比较、靠经验,靠对这个产品长期跟进产生的直觉,只有在对这个产品非常熟悉的前提下,你才有可能对数据的变化给予比较靠谱的解读。

日常监控中用于发现问题的主要手段就是做数据的对比,但是如何具体的作对比呢?主要有三种最常用的最简单的对比方式:a、横向比较,和类似的产品去比较,看相对的状况,进而推测出自身是否存在问题;b、纵向比较,和自己的过去比较,看看从历史的发展规律中是否能得到某些启发,主要是看自身的变化趋势;c、用户细分,这个就是把用户按照不同的分析需要,拆分来之后来看数据,看看各个群体之间的差异在哪里,有没有一部分用户和其他用户表现出不同的行为,进而找到问题所在。当然除了这三种常用的对比之外,我们还可以做一些配套的定性研究,进而把问题搞得更透彻。一些统计学的工具有时候也能起到作用,比如说用SPSS做数据的因子分析、聚类分析等等,也可以有一些意想不到的收获。

四、数据不是核心价值,你才是!

说了这么多,我并不是要强调数据有多么的万能,但是在互联网领域,任何一个具有一定用户量的的产品,你都不得不去了解数据,这些数据中有一些是宏观的,作为设计师我们可以当做是背景知识,应该去了解了解,但是设计师更多的是应该关注用户的目标、行为和态度等相关的数据,关注那些微观的、和用户、和设计方案息息相关的数据,这样才能更好的了解我们的用户,了解用户对我们的设计方案的反馈,以帮助我们更好的发挥自身的价值!




用代码呈现DRIBBBLE作品+16进制颜色网站

Give n Go

该网站专门分享CodePen上的JS/CSS/HTML/片段代码,而这些代码都是来自Dribbble的Gif动效及漂亮的界面截图,并用代码呈现出来,实在惊人。

用代码呈现Dribbble的设计作品 -“Give n Go”

Dribbble有很多可爱的GIF动效和精美的界面设计,可是很多我们没法看到用代码实现后的真实效果,或者不知道这些GIF和界面该如何实现。give ’n’ go 就是专门展示这类作品,很多看上去复杂的东东其实也可以用代码实现出来的哦!

左图为Dribbble的截图,右图为CodePen

 

What colour is it

这是一个有趣的实验,这网站运行原理简单,根据当前时间来组成16进制颜色值,同时网页背景根据值的变化面实时变化,确实有点创新。

有趣的16进制颜色网站 – what colour is it

此外,一名Github用户Jonic尝试把它转成OS X系统屏保,你可以下载使用,用多了说不定哪天你连16进制对应的颜色值都记得了!

屏保下载地址:https://github.com

时间颜色 时间颜色 时间颜色 时间颜色

原文地址:shejidaren




字体科普文!手把手带你认识最基础的字体结构

一、常用分类

字体设计得先了解字体结构和组合形式,就像房屋装修一样,你得先了解房屋结构和框架才好进行拆墙重新装饰设计。所以首先了解2个我们常用的字体分类概念:

衬线字体(宋体):

笔画开始、结束的地方有额外的装饰,而且笔画的粗细有所不同。

衬线体粗细不同(可读性更佳)。大段落文章,增加阅读对字母参照参考。就像大家都穿了(衬)衣服和不同装饰物一样好识别,装饰性强、有对比参照性。

图片1.png

非衬线字体(黑体):

没有额外的装饰,而且笔画的粗细差不多。

简洁、时尚、轻松休闲、干净。笔画对比较弱,不及衬线字体。

图片2.png

这2种字体概念联想起穿衣和没穿衣就容易好记,也很好理解。在字体设计中记住这2个概念针对不同类型字体做装饰性处理是关键。

二、结构特征

抛开上面2种我们常见的字体分类概念,我们在来复习下小学语文中的字体结构。

单体字:一个偏旁单独构成的字。

合体字:两个或两个以上偏旁组合成的字。

其中合体字又分:

图片3.png

汉子轮廓以形似方块,但是由于笔画不同,字体轮廓的形状就会呈现不同的形状,所以在视觉均衡上就会有些许视觉偏差。尤其是单体字和合体字组合笔画就会显得不好看。所以我们要在不同形状的字形上做调整和处理,让他们看起来更加完整、均衡。

图片4.png

上图,等高、等宽的三角形、正方形、圆形我们会发现视觉上他们是不等大。

图片5.png

顶格、缩格、出格就是针对不同结构的字体笔画特征进行微调,让他们看起来更加均衡、等大、视觉更完整。

三、平衡/杠杆原理

图片6.png

中学物理里学过杠杆原理:动力×动力臂=阻力×阻力臂 ,公式:F1×L1=F2×L2

时过变迁,也许有点难理解。结合上图,简单点讲:就是距离中心点越近,F2越重才能与离中心点远的F1平衡。

图片7.png

结合汉字方格,中心点就是方格的垂直中心,例如“体”字,右侧“本”的垂直中心点B,单人旁的垂直中心A,B跟中心点的距离越近,A跟中心点的距离越远,整个字体组合字体重心才平衡,均衡。

当字体变形的时候,把字体拉长,或压扁都是同样的道理需要去细调偏旁部首让重心更平稳、均衡、视觉才更加完美。

单独看每个字都有一个独立视觉重心,设计字体就是要兼顾每个字体的重心,让整体更加平稳均衡。

四、一般规律

(1) 黄金分割线原理

黄金分割值≈0.618

按照黄金分割线0.618的位置我们可以把方格字按上下、左右结构的比例特质画出4条黄金分割线A、D、C、D。

图片8.png

我们在设计单个字体结构的时候,可以参照黄金分割线的原理去调整不同笔画结构的字体,让其看起来更加美观。

(2 )上紧下松

上紧下松的例子比较容易记住。拿长腿女人和长腿大叔做例子就好很贴切了。

图片9.png

(3)横细竖粗

横细竖粗跟重力感觉相近,只有字杆粗壮(像树一样)才看起来更加平稳,舒适。

图片10.png

(4) 左紧右松

左紧右松跟视觉阅读习惯相关,就像我们阅读喜欢从左上角开始往右下角阅读一样。

图片11.png

原文地址:tgideas.qq
作者:高露洁




搞定游戏视觉包装中的”情感化设计”

首先我们来看几个例子:

这个是我们访问页面时,时常会见到的404页面。

1415861234_1.jpg c68cce0f709db5a976ee5324bbdaec98.jpg

设计师通过情感化的图形设计以及充满人文关怀和社会责任的设计让原本冷冰冰的服务器反馈变得充满人情味。

另外一个比较有代表性的案例应该就是淘宝时光机和易迅独家记忆了。它们从用户长期使用过程中沉淀的历史数据中,发掘出触动用户内心的故事。

下面再看看情感化设计在游戏游戏视觉包装领域中的尝试;

QQ游戏品牌站:

设计师在QQ游戏十年品牌站的设计中,以在这十年的沉淀中,玩家的数据资源,以一种轻松、幽默的方式进行展示,通过插画的视觉表现手段,触发用户的情感共鸣。在无形中传递了QQ游戏“无处不在的快乐”的品牌理念。

通过上面的案例我们可以看出情感化设计的价值,那何为情感化设计呢?

情感化的设计只是一种创意工具,表达和发挥设计师的思想和设计目的,在《情感化设计》(PDF 微盘下载,喜欢的同学请购买正版呦)一书中从知觉心理学的角度揭示了人的本性3个特征层次:即本能的、行为的、反思的,提出了情感和情绪对于日常生活做决策的重要性。

笔者在这次的御龙在天的周年庆的设计中也进行了情感化设计的尝试:从本能的设计,行为设计,反思设计3个层面出发,帮助玩家拾御龙在天中的点滴。回忆在游戏中的成就与失败,欢乐与泪水,促发用户的情感反思以及加深对游戏产品的粘性。

1415861464_79.jpg

1\本能的设计关注于外形的视觉效果。可以结合游戏中熟悉的场景,角色,道具等图形所呈现的视觉效果来引起玩家的共鸣。

1415862053_41.jpg

通过插画重现御龙玩家每日要完成的一些任务以及事件。例如每日出征国战和斩杀敌军,以及偷取经书等任务和事件。

2、行为的设计。

即通过网站体验的优化设计。让玩家可以在体验获得乐趣。

1415862235_17.jpg

网站整体设计成一条路连接着各种场景和事件。在经过某个场景会触发其中的互动效果。

例如:

1415862271_87.jpg

3、反思的设计。通过把整个网站把玩家从游戏中经历的事件一一通过数据和图形表现。呼起玩家的回忆。引发玩家共鸣。

1415862329_99.jpg

玩家在游戏中驰骋沙场。

在游戏中结交兄弟和获得爱情。

1415862390_31.jpg

以及在游戏中成就大业。

总结:

在平常的设计中,设计师所承担并不是单单把信息被动冷冰冰的展现给玩家。更应该用好“情感化”这张牌。让玩家在“情”与“景”的双重冲击下。完成对玩家的情感植入。增强对产品的粘性。

 

原文地址:tgideas.qq
作者:阿斌




设计师入坑指南!成为设计师之前必知的8件事

1、别指望这是一份朝九晚五的工作

7-top-copywriter-skills-bannerB

如果你希望找一份朝九晚五的工作,加班无关,双休俱全,那么设计应该不是你想要的工作。虽然确实有很多招聘启示上写着各种诱人的工作条件,但是少年,你总会发现享有那样工作体验的前提是,你得达到严苛的要求,为此你还是得主动加班。

设计师是一份工作时间并不那么固定的工作。这也是为什么有许多设计师选择做自由职业者,自己掌控工作时间。对于那些有恋家情节,或者是希望在家工作的设计师妈妈们,是个不错的选择。

2、你需要一颗坚强的心(不要太在意被拒绝/打击)

ux-principle-being-bannerB

前辈们一致认为,设计师是世界还是挺残酷的。在设计师的残酷成长道路上,你需要一张耐操的厚脸皮,来应对各种专业和不专业的批评指正,与指责。另外,很重要的一点是,你的老板和你的客户是给你付薪水的人,他们不一定懂设计,但是他们拥有决定权……永远都是。

设计行业本身就不轻松——甚至可以说是极为残酷——总会有新项目出现,老的产品和设计很容易被忘记。如果你有所懈怠,就必须尽快振作精神,调整自己,继续前进。你必须学会不去纠结于过去,这是成功的设计师必须具备的基本素质。

3、学习永无止境

图标设计初阶的3大关键入门知识点

当你从学校毕业进入社会,开始自己的第一份设计工作,通常你会发现这份工作永无止境,没完没了。设计行业是一个快节奏、不断变化的行业,你不得不在应付各种新项目的同时,持续关注最新的技术和趋势,保持更新,持续了解。

成为设计师之后,你投入多少精力,才能收到多少收获。如果你没有成为专业设计师的上进心,不停成长,那么你会很快被淘汰。只有始终跟随设计产业的发展而学习,才能在激烈的竞争中脱颖而出,才能构建属于自己的客户群。

4、这是一个服务型产业

Squared (5)

你必须始终牢记一件事情,作为设计师,你所做的一切都是服务于你的客户。别忘了,是你的客户聘请你来设计。在你开脑洞发挥创意之前,你首先得满足你的客户的需求,让他们高兴满意。

你必须始终信任并尊重你的客户。如果他们所提出的要求并不符合你的意愿,也得有风度地礼貌处理。你需要同客户分享你的专业意见,但是不要表现地比他们更了解他们的业务。

5、仅仅掌握软件远远不够

做懂代码的设计师!Photoshop CC与前端的那些事

在这个信息爆炸的年代,“设计师”这个称谓不值钱,任何可以玩转作图软件的人都会被冠以这个称谓。你笔记本电脑上那个旧版的Photoshop并不足以证明你是一名专业的设计师。

业内人士普遍认为,真正的设计师还是需要经过相对专业的培训,在技术上需要有完备的理论学习,了解行业的历史和传统。当你完成设计的时候,你不仅要能说清楚怎么实现的,具体做了什么,还有能解释清楚为什么要这么设计。

6、你需要学习商业技能

KAT_1586-Edit_large1

虽然好设计能给人带来惊喜,但是设计师的工作远不止折腾有趣的字体的漂亮的配色。保持设计的艺术性和创新性自不比多言,但是如果你不了解如何控制预算,处理好发票,管理好客户,那么从长远来看可能会非常吃力。

作为设计师,你需要掌握一些市场营销方面的知识,提升技能。你不仅要保持设计的美观,还需要明白如何为特定的观众提供有针对性的信息。拥有商业头脑,能让你的设计更上一层楼。

7、你仍然需要数学知识

如果你认为搞设计能让你从可怕的数学世界中脱离出来的话,那你就错了。虽然设计师这个职业能让你肆意挥洒创意,但是在你仍然需要每天同数字打交道。至少对绝大多数设计师而言是这样。

当然,你不必成为数学高手,但是若要成为一名靠谱的设计师,还是得对常用的数学知识熟练掌握。从计算布局大小到设计创意原型,从预算计划到记账开票,你依然得倚靠这些你不待见的数字来搞定这些问题。

8、要么爱设计,要么走远点

虽然这并不是最重要的事情,但是入行久矣的前辈们一致认为,对设计的热情是成就你的设计人生的最重要的因素。如果你不爱你做的事情,那么你会迅速地倦怠、开始心生怨忿。如果你对设计没有足够的兴趣和专注力,那么长时间的持续工作和严苛的要求会不断地折磨你,直至失控。

对,这样的工作会让你心塞,令你受伤。你花费几个小时精心制作的东西可能会被客户无情地贬斥视作垃圾,你也得忍着。只有真正乐观的心态,才能助你用心借助视觉媒介传达出对的信息,对设计真正的爱才能带你保持专注,应对挫折,成为大师。

最后,问自己一句,真的准备好了么?

当然,在真正毕业成为设计师之前,设计美好的一面你想必多少都了解一些,而看完这些残酷的现实,了解了设计师职业生涯上的8个大坑(当然,还有许多小坑咱们没有时间一一总结)之后,想必你已经清醒地了解了设计师的职业生涯吧?了解设计,了解自己,你准备好了吗?

信息提供:

  • Allison Dalton, art director at Ridiculous Creative
  • Billy Joe Pyle, creative director at Mint Advertising
  • Caitlin Ward, art director at Mint Advertising
  • Jacob Cass, graphic designer at JUST Creative
  • Jamie Volansky, graphic designer at Mint Advertising
  • Lidia Varesco Racoma, owner of Lidea Varesco Design
  • Mike Steele, creative director at Vitalink
  • Natalie Dewhirst, chief operations officer at ThreeTwelve Creative
  • Patrick Barcinas, graphic designer at Mint Advertising
  • Russell Dow, senior designer at PGAV Destinations
  • Taylor Irwin, art director at Mint Advertising



那些你不知道的PHOTOSHOP冷知识(一)

1.在画布中调整笔刷的各种参数

关于笔刷,用过PS的人基本上都知道几个快捷键,比如Ctrl+”[“、”]“调整笔刷大小之类,这次我带来的方法比那个更加便捷,不但是大小上的调整,连同硬度和颜色都可以在画布中完成调整。

那些你不知道的PHOTOSHOP冷知识(二)

那些你不知道的PHOTOSHOP冷知识(三)

那些你不知道的PHOTOSHOP冷知识(四)

方法:

①在画布中按住Alt+鼠标右键——此时在画布上会出现一个红色的圆点,圆点代表了你笔刷的大小和硬度(越实越硬,越虚越软),拖动鼠标进行左右平移可以调整笔刷的大小,上下拖动可以调整硬度,如下图。

②按住Alt+Shift+鼠标右键——此时你会发现鼠标旁出现了一个色彩选取框,没错!现在你可以调节颜色了!按住右键不放,移动鼠标到想要的颜色上即可,如下图。

2.小抓手的组合用法

按住空格键将鼠标变成小抓手拖拽画布已经是相当普及的用法,几乎每个PS玩家都要使用,但是它的组合键却鲜有人知,这次为大家带来小抓手的组合级之一:全局拖拽——即使放大到很大比例仍然能瞬间让视图到达画布的任意位置。

方法为:按住空格键将鼠标变成小抓手后,再按住一个“Z”,然后按下鼠标——这时你会发现视图瞬间回到了全局,鼠标则变成了一个小方框,这个小方框就是你当前所能显示到的区域,拖动鼠标挪到想要去的地方,然后撒手,走你~

3.自由变换的附加用法

这一条有点老调重弹了,不过估计肯定会有不知道的,这里再提一下,Ctrl+T进行自由变换过一次后,用Ctrl+Shift+T可重复上次的变换,用Ctrl+Shift+Alt+T可实现复制本体并重复上次变换的效果,如下图。

4.利用Shift实现加速拖动

不知道大家有没有遇到过这种问题,有的时候为了对准细节不得不将视图放得很大,这时候拖动一个图层或者选区等到另一个地方要经历漫长的等待,看着下面的滚动条慢慢悠悠的走真是心急如焚呐……其实这个时候只要按住Shift,你会发现滚动条嗖的一下就过去了~这个技巧需要多练几次,因为按住Shift之后的拖拽速度真的是灰常快,可能一不注意就过头了,所以建议你可以一下下的点着而不是一直按着,具体效果大家看下图(注意看滚动条位置)。

5.钢笔工具绘制中转换折点

一个小技巧,在使用钢笔工具时,按住鼠标拖拽节点时按下Alt,即可实现对当前节点的一个转折,如下图。

6.利用Alt选中锁定图层

锁定图层大部分时候是因为不想再移动它,但有时真需要动它的时候却可能因为图层过多而找不到,即使勾选了直接选取图层也无法选中锁定了的,这个时候只要按住Alt在画布上点击被锁定的图层就可以选中了,不仅如此,其实被锁定的图层仍然可以进行一些操作,比如合并,如下图。

本期的冷知识就介绍到这儿,额外分享一个自己总结的有关三大功能键Shift、Ctrl、Alt的语义不完全总结,其实有的时候根据三种功能键的语义就能猜出某些功能的快捷键,一试一个准儿~

原文:zcool
作者:@Nefish_W

 




那些你不知道的PHOTOSHOP冷知识之乾坤大挪移(二)

那些你不知道的PHOTOSHOP冷知识(一)

那些你不知道的PHOTOSHOP冷知识(三)

那些你不知道的PHOTOSHOP冷知识(四)

万用滚轮

在大家使用PS时,滚轮这个东西实际上并不常用,但一个滚轮加上三功能键却可以完全实现缩放和平移、纵移、调整数值等功能。

①缩放

Alt+滚轮:此法可实现对画布的无比例缩放,滚动时以鼠标所在位置为参照中心进行缩放。(PS:笔者不推荐此法,介绍这条纯粹为了引出第二个…)

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

Alt+Shift+滚轮:等比例缩放画布,滚动时以鼠标所在位置为参照中心进行缩放(注意看动图中视图百分比的数值前后变化),墙裂推荐,我最常使用的快捷键之一,等比例缩放,完美替代Ctrl+”+”、Ctrl+”-”。

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

PS:Ctrl+1:100%视图 Ctrl+0:缩放至铺满视图(非比例)

②移动

视图在超过一屏的情况下(或者在全屏下)

直接鼠标滚轮即可实现纵向移动,每滚一小格是一个屏幕像素;

按住Ctrl+滚轮可实现横向移动,也是每格一屏幕像素。

在上面的基础上加上Shift即可实现加速移动,每滚一小格就是一个屏幕,若是放到很大的倍数那么加上Shift还是十分方便的。

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

可能大家也发现了,通过Shift可以实现改进许多功能,还记得上次文章中说的三功能键的语义吧?

万能选区对齐大法

贴一张动图给大家看看效果先,有木有很神奇?

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

好了,现在我来给大家分析一下我的实现原理:

这里的神奇之处在于,我可以在PS中实现以任意区域为对象进行对齐,这里类似AI中关键对象的设定(多选N个目标后,再次点击其中的一个目标将加重显示,这个时候使用对齐的话是以此目标为关键对象进行对齐),其实在PS中并不存在这种关键对象,但是我们仍然可以自己创造一个——选区!经过不完全测试,选区这个东西无论是选择还是对齐,其优先级都是凌驾于图层之上的(对于路径无效),所以当你在画板中创造一个选区之后,你的任何对齐方式都是以此选区作为关键对象的!这样图中的效果就不难理解了吧。

拓展1:像AI一样,能不能让一图层以其中指定的某个图层为关键对象进行对齐呢?当然可以,只需要按住Ctrl点击想要对齐的图层,将它转换为选区即可,是不是So easy?

PS:看到评论好多小伙伴说这里没看明白,是这样的——我在选择工具的选项中勾选了”自动选择——图层”,所以我可以框一下就选中那三个图层,如果你没勾选的话,就手动点选那几个物件就好啦。之后就跟之前的对齐是一样的了,关键在于要有选区存在~

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

拓展2:每次都要在状态栏上点击对齐,是不是好麻烦?快捷键木有,这可怎么办?没关系,咱们自己设定一个就是了。

打开编辑——键盘快捷键,打开图层那一页,找到上面的几项内容,然后根据自己口味进行修改吧! 以后对齐只用快捷键,高大上有木有!

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

拓展3:之前也说过了,选区的优先级凌驾于图层之上,同样图层具备的有些属性选区也同样具有,比如对齐边缘。

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

如图所示,在开启参考线对齐边缘的前提下,拉出的参考线(拉参考线时按住Alt可以改变线的方向)是可以吸附选区的边缘的,这样就可以快速的打出我们想要的参考线了。

再赠送几个小技巧

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

有的小伙伴会经常在一组同样尺寸的源文件间切来切去,把一个文件中的东西拖到另一个里,拖过去发现位置变了还要再调整,是不是很烦恼?

这里有一个小秘诀:在把物件拖到另一个文件中时,按住Shift,如果两个文件尺寸是一样大的,那么它就会粘在原来的位置;如果尺寸不同则会粘在画板正中央。此方法无论是图层、路径、形状、选区…只要是能拖动的东西都可以实现。

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

另外,用Ctrl+Tab(Mac中是Control+Tab)可以在不同文件画板间切换。

一个文件中使用了N个同样的智能对象,只想更改其中一个?右键点击该层——通过拷贝新建智能对象

第二弹!那些你不知道的Photoshop冷知识之乾坤大挪移

利用方向键移动时嫌走得太慢?按住Shift试试看。

好了,冷知识第二期就到这里了,很多人问我这些技巧我是如何发现的,其实这些东西就在平时的使用中,有的时候用着用着就会发现那么一个,有心的话把它记住,多用几次就变成了一个方便的好技巧了。

我相信上面提到的技巧有人没见过也有人已经在使用,无论你是怎样的情况,点个推荐留个言~你们的支持是我前进的最大动力!

另外说一句题外话…最近在搞一个分享会的线下活动,地点在北京,每周会跟小伙伴们分享一些UI方面的知识,感兴趣的可以加群71160281(标明来自优设),活动是免费的(可能会产生场地费,但绝不会多)。

作者:@Nefish_W